OmniAICreator/Qiita-1.07M huggingface dataset:
【Qiita】初心者がMarkdown記法を使ってみた②

前回に引き続きQiitaでMarkdown記法について投稿します。
備忘録として使用したMarkdownを残すことを目的としています。

#シンタックスハイライト
バッククオート「`」を3つ繋げて記述します。

+ ノーマル
 
> ```text:記述例
> ```　
> シンタックスハイライト適用中
> ```　
> ```
>> ---シンタックスハイライトなし---
>> シンタックスハイライト未設定
>> 
>> ```
>> ---シンタックスハイライトあり---
>> シンタックスハイライト指定中
>> ```

+ 言語指定

> ```text:記述例
> ```言語:表示したい文字(「記述例」を記載)
> シンタックスハイライト適用中
> ```　
> ```
>> ```text:textを指定中
>> public class Main {
>>    public static void main(String[] args) throws Exception {
>>        System.out.println("Hello world");
>>    }
>> }
>> ```
>> ```Java:Javaを指定中
>> public class Main {
>>    public static void main(String[] args) throws Exception {
>>        System.out.println("Hello world");
>>    }
>> }
>> ```
>> ```:言語指定なし
>> public class Main {
>>    public static void main(String[] args) throws Exception {
>>        System.out.println("Hello world");
>>    }
>> }
>> ```


#テーブル

+ 1×1のテーブル

```:記述例
x|
---
```
> x| 
> --- 

+ 2×2のテーブル

```:記述例
x|x
---|---
a|b
```
> x|x
> ---|---
> a|b 

+ 2×2のテーブル

```:記述例
x|x|x|x|x
---|---|---|---|---
a|b|c|d|e
f|g|h|i|j
k|l|m|n|o
```
> x|x|x|x|x
> ---|---|---|---|---
> a|b|c|d|e
> f|g|h|i|j
> k|l|m|n|o

+ 文字位置の指定

文字位置を指定する場合は下線部分を指定することにより指定することが可能となる。
但し、行ごとの指定となり列での指定は不可となる。

■左寄せ　　　「---」
■センタリング「:-:」
■右寄せ　　　「--:」


```:記述例
左寄せ|センタリング|右寄せ
---|:-:|--:
a|b|c
```
> 左寄せ|センタリング|右寄せ
> ---|:-:|--:
> a|b|c 

+ 改行を入れる

改行を入れるにはHTMLで使用する\<br>を改行したい位置に記載することで改行することができる。

```:記述例
x|x
---
a <br> b|ab
```
> x|x
> ---|---
> a <br> b|ab 

#次回やりたいこと

Markdown記法で知っておいた方が良いと思ったことを実際に記載していました。
基本抑えたと感じているため、次回からは応用しつつ新たなことに挑戦できればと思っています。
PACEMAKER > Python2 > fileIO > /tmp/capture_motionがあれば日付を表示 | なければ作る (touchに相当する処理)

```txt:動作環境
Raspberry Pi 2 Model B (以下RPi)
Raspbian Jessie
Python 2.7.9
```

プロジェクト開始: [link](https://qiita.com/7of9/items/6aa0ea8b3a4fc802ca61)

### 処理

- /tmp/capture_motionファイルの有無を確認
    - あれば
        - ファイルの更新日時を取得
    - なければ
        - ファイルを作る

### 参考

- ファイル最終更新日を取得
    - [python > ファイル最終更新日を取得する > mddt = time.ctime(os.path.getmtime(filepath)) > Mon Mar 7 07:18:45 2016](https://qiita.com/7of9/items/b35747318a251247a249)
- touch
    - https://stackoverflow.com/questions/1158076/implement-touch-using-python


### code

```welcomeBack_171105.py
from __future__ import absolute_import
from __future__ import division
from __future__ import print_function
import os.path
import time
from datetime import datetime as dt

"""
v0.1 Nov. 05, 2017
   - touch file
   - read file datetime
"""

filepath = "/tmp/capture_motion"
if os.path.exists(filepath):
    mddt = time.ctime(os.path.getmtime(filepath))
    print(mddt)
else:
    with open(filepath, 'a'):
        os.utime(filepath, None)

```

```txt:run
$ python welcomeBack_171105.py 
$ python welcomeBack_171105.py 
Sun Nov  5 19:23:37 2017
$ python welcomeBack_171105.py 
Sun Nov  5 19:23:37 2017
```
Scalaの開発環境構築のためにsbtをインストールしようとしたらエラーになった

# 概要
- Scalaに手を出そうと思い、環境構築を進めていたが、sbtのインストール時にエラーが発生した。

# バージョン
- sbt
    - stable 1.0.3
- scala
    - stable 2.12.4


```bash
updating Homebrew...
==> Auto-updated Homebrew!

Updated 1 tap (caskroom/cask).
No changes to formulae.

sbt: Java 1.8 is required to install this formula.
JavaRequirement unsatisfied!

You can install with Homebrew-Cask:
  brew cask install java

You can download from:
  https://www.oracle.com/technetwork/java/javase/downloads/index.html
Error: An unsatisfied requirement failed this build.
```

- 要するにjavaが入ってないからインストールしなさいと怒られている。

# 進めていた手順
ところがsbtのインストール手前まで以下の手順で進めていたため、javaはインストール済みであるはずである。

```bash
brew cask install java
brew install scala
```

# 調べてみると
[参考URL](https://github.com/sbt/sbt/issues/3686)
要約すると、java9は入っているが、sbtさんが欲しがっているのはjava8だよ、とのこと。
brew cask install javaではjava9がインストールされていたわけです。
で、これはjava8をインストールすれば解決する。

```bash
brew cask uninstall java
brew tap caskroom/versions
brew cask install java8
brew install sbt
```

```bash
$ sbt
[warn] No sbt.version set in project/build.properties, base directory: /Users/xxx/workspace/scala
-sample
[info] Set current project to scala-sample (in build file:/Users/xxx/workspace/scala-sample/)
[info] sbt server started at 127.0.0.1:5807
sbt:scala-sample>
```
上記手順で実施し直したところ、無事sbtをインストールすることができました。

# まとめ
僕のように最近「ちょっくらScalaやってみるか」と思って躓いてしまった方のお役に立てれば幸いです。
新卒２年目がやったタスク管理あれこれ


# はじめに
タスク管理について新卒２年目が思った事を書き連ねているだけなので
色々変なところはあると思いますがご容赦を。

# 現状の業務
* プロジェクトのPMOと保守運用(ユーザーからの問い合わせ対応とか)を一緒にやっている
※メインはPMO
* ユーザー部門の担当部署は３部署
* 半年くらい前まではプロジェクトのWBSとメールにフラグを立てるだけで、
それ以外のTODO管理はやってなかった

# 困っていたこと
* プロジェクトのTODOと問い合わせ対応がごっちゃになる
* プロジェクトも運用も3部署それぞれとやりとりする必要がある
* ユーザー部門の担当者がタスクを忘れがちなので、ちゃんとトラッキングする必要がある
* 優先度が段々わからなくなる
* **誰にどこまで聞いたか・何をどこまでやったかがわからなくなる**
* **プロジェクトでチケット単位のレビュー(設計などなど)もくるとさらに何をどこまでやったかわからなくなる**

# 試したこと
とりあえずぱっと思いついたタスク管理方法を試してみた

* 付箋
タスクを書き出して、タスクボードに貼ってステータス毎に位置を変える、よくあるやつ。
ちっちゃめの付箋を使ってた。
レビューみたいに往復が発生するだけのやつには便利だが、
経緯的な事が細かく残しておけないので、あちこちに確認しなきゃいけないようなものにはちょっと不便に感じた

* TODO tab
クロームのプラグイン([リンク](https://chrome.google.com/webstore/detail/todo-tab/ljkjodkdilmmlaiphehiceeblnnndhnd)) 
付箋と似たようなもので、chromeで新しいタブを開くとタスク一覧が出てくるというもの
付箋のようにステータスは追えないが、
タスクを追加するのもクローズするのも削除するのもクリックひとつなので、
ラフにタスク管理できるので、誰に電話する・あれをチェックする、みたいなタスクを管理するときは便利

* メモ
マークダウンで今持っているタスクとステータス・経緯を書いてみた
一か所に経緯等をまとめて書いておけるので、
経緯を残しておきたいけど、あちこちとやりとりしててどこにもまとまってない…は防げて便利
細かいタスクを書くと全体の分量も増えて見づらいので分けて管理しておいたほうがやりやすかった

# 色々試した結果
以下のようなやり方・分け方でタスク管理をしている

* WBS
週の始めと終わりに、今週・来週やることをメインに、全体のスケジュールの整合性を確認するくらい
ここに追記してタスク管理するとなんかやってる気になってしまうのでやっていない
あんまり信用出来ないし細かく管理するものでもない気がする

* メール(outlook)
ヌケモレの確認用に、
対応しなきゃいけない物はとりあえずフラグ立てておいて、後からでも漏れていないかチェックする

* 付箋
設計とかテストシナリオのレビューの時だけ使う
ステータスボード(といってもノートに領域を分けてステータスを記載するくらい)を作って、
どのチケットがどこまで進んだか、の確認

* TODO tab
上述の通り、誰に連絡する等のちょっとしたタスクを忘れないように書いておく
とりあえず忘れないように書いておいて、対応したらクローズ

* メモ
色々な人に確認して検討が必要なタスク(リリース日の決定とか)は経緯やマイルストーンも含め、
メモ書きで残しておく。

# 最後に
上記のようなやり方で、当初困っていた何をどこまでやったかわからなくなるという問題は改善されたものの、
あっちこっちでタスク管理しているのは非効率で、優先度ごとに分けての管理等は出来ていないので
もう少しスッキリキッチリタスクを管理できる方法は模索したい。
Gitについて#1

#はじめに
今日からソース管理でデファクトになりつつあるGitについて、学習した内容をいくつかに分けて投稿してみたい。

#Gitとは
一言で言うと、バージョン管理システムのこと。
もともとはLinuxのソースを管理するために開発されたが、現在はEclipseやVisual Studioなどでもサポートされている。
[Git](https://git-scm.com/ "Git")のサイト
![1.JPG](https://qiita-image-store.s3.amazonaws.com/0/158038/187093e6-d66c-e147-3c57-ba332730ab64.jpeg)


#Gitの特徴
- リモートリポジトリとローカルリポジトリ
Gitではファイルを管理するデータベースをリポジトリと呼ぶが、このリポジトリをリモートリポジトリとローカルリポジトリで構成できる。
リモートリポジトリは複数の担当者が共有するリポジトリのことで、一方ローカルリポジトリは自分のローカル環境に構築したリポジトリを指す。

- オフショアやリモートでの作業に最適
これもリモートリポジトリとローカルリポジトリに関連するが、ローカルリポジトリで作業した内容をリモートリポジトリに公開することができ、リモートリポジトリから他の担当者の作業も取得できる。
つまり都度サーバと通信することなく作業ができ、必要なときだけ通信すればよいので外出先でのモバイルでの作業やオフショアなどの回線が細い環境でも利用できる。

#GitとGitHubの違い
Gitと似ているものとして、[Github](https://github.com/ "GitHub")がある。Gitはバージョン管理システムというツールであるのに対して、GitHubはGitを使って世界中の人が利用できるようにしたGitのWebサービス。
GitHubはクラウド上でリモートリポジトリを提供しているため、オフショアなどにも向いている。また世界中の技術者から助言をもらったりもできるのでまさにHubのような役割。ほかにもGitにはない機能も追加されており、それは後日記載予定。
[Github](https://github.com/ "GitHub")のサイト
![2.JPG](https://qiita-image-store.s3.amazonaws.com/0/158038/5354c061-a650-f652-afdd-8e310845128f.jpeg)

#次回について
次回はGitのGUIツールとして、[SourceTree](https://ja.atlassian.com/software/sourcetree "SourceTree")を導入するところから記載する。
Gitは基本的にコマンドラインで操作するが、そのGUIツールとしてアトラシアン社が提供するSourceTreeは直感的に利用でき人気があるよう。
![3.JPG](https://qiita-image-store.s3.amazonaws.com/0/158038/74e8f7a8-8a68-d5f4-4224-fbeaff9108b4.jpeg)
iTunes Connectの審査時に必要なスクリーンショットサイズのまとめ

##はじめに
iTunes Connectで使うスクリーンショットサイズのメモです。
iPhone Xの登場によりiTunes Connect申請時のスクリーンショットのサイズが追加されました。

###主なサイズ
iPhone 5.5インチとiPad 12.9インチは必須です。

![Artboard.png](https://qiita-image-store.s3.amazonaws.com/0/89206/72e0b475-434d-bf29-e8dc-4d8ec2090ad9.png)

|     向き     |     iPhone 5.8インチ     |     iPhone 5.5インチ      |     iPad 12.9インチ      |
|:--------------------:|:--------------------:|:--------------------:|:--------------------:|
|      縦     |      1125 × 2436     |     1242 × 2208      |     2048 × 2732      |
|      横     |      2436 × 1125     |     2208 × 1242      |     2732 × 2048      |

### iPhone 5.5インチのスクリーンショットで代用可能なサイズ
未設定の場合はiPhone 5.5インチのスクリーンショットが使われます。

|     向き     |     iPhone 3.5インチ     |     iPhone 4インチ      |     iPhone 4.7インチ      |
|:--------------------:|:--------------------:|:--------------------:|:--------------------:|
|      縦     |      1125 × 2436     |     1024 × 2208      |     2048 × 2732      |
|      横     |      2436 × 1125     |     2208 × 1024      |     2732 × 2048      |

### iPad 12.9インチのスクリーンショットで代用可能なサイズ
未設定の場合はiPad 12.9インチのスクリーンショットが使われます。

|     向き     |     iPad 9.7インチ      |
|:--------------------:|:--------------------:|
|      縦     |     768 × 1024      |
|      横     |     1024 × 768      |
PlayerInteractEventを２回連続で反応しないようにする

# PlayerInteractEventについて

Spigotにて、プレイヤーがクリックしたときに呼ばれるイベントです。

例えば、棒を右クリックしたときに処理が実行される場合以下のように書けます

```kotlin
class ItemListener(private val plugin: SamplePlugin) : Listener {

    init {
        plugin.server.pluginManager.registerEvents(this, plugin)
    }

    @EventHandler
    fun ckickItem(event: PlayerInteractEvent) {
        val player = event.player
        if (event.action == Action.RIGHT_CLICK_AIR || event.action == Action.RIGHT_CLICK_BLOCK) {
            val itemStack = player.inventory.itemInMainHand
       
            if (itemStack.type == Material.STICK) {
                // 処理を書く
                event.isCancelled = true
            }
        }
    }
}
```

しかし、このように書くと、処理は実行されますが、1回のクリックに付きイベントが2回呼び出されて、処理が2回実行されてしまいます。

# 対処方針

- プレイヤーがPlayerInteractEventを実行すると、プレイヤーにメタデータとしてフラグを持たせる
- プレイヤーにフラグが存在する場合、PlayerInteractEventをスキップするようにする
- 一定時間経過後にフラグを消す

# 実際のコード

以下のようなPlayerFlagというクラスを作りました
メタデータにtrueをセットし、一定時間経過後にfalseにセットします。

```kotlin
class PlayerFlag(val player: Player, val plugin: SamplePlugin) {

    fun set() {
        setMetadata(true)
        object : BukkitRunnable() {
            override fun run() {
                setMetadata(false)
            }
        }.runTaskLater(plugin, 10)
    }

    private fun setMetadata(flag: Boolean) {
        player.setMetadata("PlayerInteractEvent", FixedMetadataValue(plugin, flag))
    }

    fun get(): Boolean {
        try {
            return player.getMetadata("PlayerInteractEvent")[0].value() as Boolean
        } catch (e: Exception) {
            return false
        }
    }
}
```


ListenerにPlayerFlagのコードを追加します

```kotlin
class ItemListener(private val plugin: SamplePlugin) : Listener {

    init {
        plugin.server.pluginManager.registerEvents(this, plugin)
    }

    @EventHandler
    fun ckickItem(event: PlayerInteractEvent) {
        val player = event.player

        //追加したところ
        val playerFlag = PlayerFlag(player, plugin)
        if (playerFlag.get()) {
            return
        }

        if (event.action == Action.RIGHT_CLICK_AIR || event.action == Action.RIGHT_CLICK_BLOCK) {
            val itemStack = player.inventory.itemInMainHand
       
            if (itemStack.type == Material.STICK) {
                //追加したところ
                playerFlag.set()

                // 処理を書く
                event.isCancelled = true
            }
        }
    }
}
```


このようにして2回反応してしまう現象を防げます。
API Gateway のリスポンスヘッダーのカスタマイズ (Node.js)

AWS の API Gateway のリスポンすヘッダーをカスタマイズする方法です。

Lambda の関数です。Node.js 6.10 です。

```js
'use strict';

exports.ex02_handler = (event, context, callback) => {
    const response = new Response()
	response.statusCode = 200

	const unit_aa = JSON.parse(event.body)
	const aa = unit_aa.aa
	const bb = unit_aa.bb
	const cc = unit_aa.cc

	var sum = aa + bb + cc

    response.body = JSON.stringify({
          "event": event.body,
	"aa": aa,
	"bb": bb,
	"cc": cc,
	"sum": sum          
      })


    callback(null, response)
};

class Response{
    constructor(){
        this.statusCode = 200;
	this.statusCode = 401;
        this.headers = {};
	this.headers["X-Custom-Header"] = "Shimotsuke"
	this.headers["X-Powered-By"] = "Node.js"
	this.headers["Status"] = "200 OK"
	this.headers["Status"] = "401 Unauthorized"
	
        this.body = "";
    }
}
```

API のメソッドを作成する時に、「Lambda プロキシ統合の使用」にチェックを入れます。

![proxy_nov05.png](https://qiita-image-store.s3.amazonaws.com/0/179446/8f82fce9-5763-ca56-6924-ec7a978fcb8a.png)

ヘッダーの変更が反映されていることを確認するプログラム
rest_api_id は変更して下さい。

```py3
#! /usr/bin/python
# -*- coding: utf-8 -*-
#
#	restapi_test.py
#
#					Nov/05/2017
# ----------------------------------------------------------------
import sys
import json
import requests
# ----------------------------------------------------------------
def proc01(rest_api_id):
#
	url="https://" + rest_api_id + ".execute-api.ap-northeast-1.amazonaws.com/test"
#
	payload = {'Content-Type': 'application/json',
                'aa': 14,
                'bb': 23,
                'cc': 35
                }

	print(url)
#
	try:
		rr = requests.post(url, data=json.dumps(payload))
		print(rr.status_code)
		print(rr.headers)
		print()
#	print(rr.text)
	except Exception as ee:
		sys.stderr.write("*** error *** request.post ***\n")
		sys.stderr.write(str(ee) + "\n")
#
# ----------------------------------------------------------------
rest_api_id="abcdefghij1"
proc01(rest_api_id)
# ----------------------------------------------------------------
```

Node.js のチェックプログラム

```js
#! /usr/bin/node
// ---------------------------------------------------------------
//
//	restapi_test.js
//
//					Nov/5/2017
//	
// ---------------------------------------------------------------
const rest_api_id="abcdefghi1"

var Client = require('node-rest-client').Client
var client = new Client()

const params = {"aa": 8,"bb": 81,"cc": 6 }
const args = {
	data: params,
	headers: { "Content-Type": "application/json" }
}


const url="https://" + rest_api_id + ".execute-api.ap-northeast-1.amazonaws.com/test"

client.post(url, args, function (data, response) {
	console.log(data)
	console.log(response.headers)
})

// ---------------------------------------------------------------
```
CSSでフッターを固定する(Flexbox利用)

## 目的
CSSでフッターを固定表示したい。

## 結論

色々とググった結果、下記サイトの通りにやるとうまくいった。

- Solved by Flexbox
    - http://hashrock.github.io/solved-by-flexbox-ja/demos/sticky-footer/

## 参考

下記はSolved by Flexboxを下敷きにしたQiita記事(250ブクマくらいある)

- 脱Bootstrapガイド 〜フルスクラッチCSS〜
    - https://qiita.com/hashrock/items/5c18bf5086f52e4122e5
[Python3]グラフの描写

# matplotlibを使ってグラフを描く
##折れ線グラフ
```graph001.py
#pyplotを用意
import matplotlib.pyplot as plt
#ggplotを使う
plt.style.use("ggplot")

#プロットするテーブルを用意
fig = plt.figure()
ax = fig.add_subplot(111)

#描きたいグラフのx,yを用意
x  = [0, 1, 2, 3, 4, 5]
y1 = [0, 3, 1.5, 5, 2, 2.5]
y2 = [3.5, 0, 1.5, 2, 1, 0.5]

#折れ線グラフの用意
ax.plot(x, y1, label = "x points")
ax.plot(x, y2, label = "y points")

#タイトルを用意
ax.set_title("Title")
ax.set_ylabel("Y1 and Y2")
ax.set_xlabel("X")

#凡例を付ける
ax.legend()

#グラフを描く
plt.show()
```
こんな感じ

![oresen_graph.png](https://qiita-image-store.s3.amazonaws.com/0/210241/ca08998d-3b32-1e2c-7191-3a26d04949d5.png)

##散布図
```graph002.py
import matplotlib.pyplot as plt
import numpy as np

plt.style.use("ggplot")

fig = plt.figure()
ax = fig.add_subplot(111)

np.random.seed(3)

x = np.arange(1, 101)
y = 10 * x * np.random.rand(100)

ax.scatter(x, y, label = "point")

#タイトルを用意
ax.set_title("Title")

#凡例を付ける
ax.legend()

plt.show()
```
こんな感じ
![sanpuzu.png](https://qiita-image-store.s3.amazonaws.com/0/210241/85acf72f-da42-2e5a-0283-f903f83d63e9.png)

##棒グラフ
```graph003.py
import matplotlib.pyplot as plt

plt.style.use("ggplot")
fig = plt.figure()
ax = fig.add_subplot(111)

x = [1, 2, 3, 4, 5]
y = [1, 3, 2 ,5 ,4]

labels = ['aaa', 'bbb', 'ccc', 'ddd', 'eee' ]
ax.bar(x, y, tick_label=labels)

plt.show()
```
こんな感じ
![bougarahu.png](https://qiita-image-store.s3.amazonaws.com/0/210241/13b120cb-2d74-f5a4-45b9-bfe7dc916bfb.png)
seasar2のお勉強3(Seasar2徹底入門の3 SAStruts入門あたり）

まあ大体本に書いてあるとおりなんですが・・・
やってみた感じのメモとかを残します。

#HelloWorld的なところ
・プロジェクトはDoltengで記載通りに作れるので詳細割愛
・Index画面も手順通りで出るので詳細割愛

#エコーアプリ作成
org.seasar.sastruts.example.actionにこんな感じでAction作りました。
eveningメソッド作ったりとちょっとだけカスタマイズ

```
package org.seasar.sastruts.example.action;

import javax.annotation.Resource;

import org.seasar.sastruts.example.form.EchoForm;
import org.seasar.struts.annotation.ActionForm;
import org.seasar.struts.annotation.Execute;
public class EchoAction {

	@Resource
	@ActionForm
	protected EchoForm echoForm;

	@Execute(validator=false)
	public String index() {
		return "input.jsp";
	}

	// チェックエラー時はinputで書いたパスに戻る
	@Execute(validator=true, input="input.jsp")
	public String echo() {
		return "echo.jsp";
	}

	// チェックエラー時はinputで書いたパスに戻る
	@Execute(validator=true, input="input.jsp")
	public String evening() {
		return "evening.jsp";
	}
}
```

あとFormも作りました。

```
package org.seasar.sastruts.example.form;

import org.seasar.struts.annotation.Required;

public class EchoForm {

	@Required
	public String name;

}
```

さらにsrc/main/webapp/WEB-INF/view/echo/の下には以下の３ファイルを作りました。
1.input.jsp

```
<%@ page pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
	<html:errors/>
	<s:form method="post">
		お名前をどうぞ!
		<html:text property="name" />
		<s:submit property="echo" value="送信" />
	</s:form>
	<s:form method="post">
		お名前をどうぞ(夜)!
		<html:text property="name" />
		<s:submit property="evening" value="送信" />
	</s:form>
</body>
</html>
```

2.echo.jsp

```
<%@ page pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
	こんにちは、${f:h(name)}さん!
</body>
</html>
```

3.evening.jsp

```
<%@ page pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
	こんばんは、${f:h(name)}さん!
</body>
</html>
```

#動作確認
ここまでやってtomcatにデプロイした後に
http://localhost:8080/sastruts/echo/

にアクセスすると
![Clipboard01.png](https://qiita-image-store.s3.amazonaws.com/0/206483/ef9aac4f-15c1-a86d-e598-f45d81348cb2.png)

こんな感じの画面が出て
上の方に名前をXXXXと入れて送信を押すと「こんにちはXXXXさん」って出て、
下の方に名前をXXXX入れて送信を押すと「こんばんはXXXXさん」って出ます。

＃処理の流れのイメージまとめ
1.sastruts/echo/にブラウザでアクセスするとEchoActionに飛ぶ。EchoAction に飛ぶのは末尾のActionを取った（＋小文字にした）クラスがURLに対応したActionクラスになるようにSAstrutsが制御してくれているから。
2.EchoActionクラス内のindexメソッドは特別扱いでsastruts/echo/にアクセスが有ればこのメソッドが呼ばれる。メソッド内ではinput.jspを返却しているだけだからinput.jspの内容がブラウザ上に表示される。
3.input.jspの画面にはformが2つ合ってボタンを押下するとpropertyに記載された名前に対応するEchoActionのメソッドが呼ばれる。それぞれのメソッドで遷移先jspが違うから結果画面も異なってくる。
4.あと、どちらのフォームにもnameって言うフィールドが合ってココに入れた内容がEchoFormのnameにセットされる。ActionとFormのマッピングはActionクラス側で@ActionFormアノテーションでやってる。ActionはFormをおそらく一個しか持てない。

やってみた感じ結構簡単に処理書けるなって印象です。（少なくとも素のstrutsよりは）
自主トレーニング 2017/11/04

# 今日やること

## 環境構築

### NodeJS バージョン固定
```
$ nvm ls
$ nvm install 9.0.0
$ nvm use 9.0.0
$ nvm alias default 9.0.0
```

### nodeパッケージ管理を NPM から YARN に切り替える
まず yarn について調べる...。

- Yarnとnpmの違い
 https://www.webprofessional.jp/yarn-vs-npm/
- 日本語ドキュメント
 https://yarnpkg.com/ja/

| | npm | yarn |
|:--|:--|:--|
| 依存ファイルのロック | 明示的に `npm shrinkwrap`が必要 | 常に yarn.lock を生成 |
| 並行インストール | シーケンシャル | パラレル（速い） |
| 出力 | 冗長 | 最適化 |
| 互換性 | | 洗練されたデフォルトといった感じ (add, why ...etc) |

...良さそうですね。
「何をためらっているのですか？」と煽ってるぐらいなので使ってみます。
自分は nvm を使用しているので以下のコマンド。

```
$ brew install yarn --without-node
```

:warning: https://yarnpkg.com/ja/docs/install#alternatives-tab
> npm install は代替手段として提供されているが、yarnを使用する理由の一つとして、セキュリティ上正しいパッケージがインストールされない可能性があるため推奨されないとのこと。

brew で yarn インストール失敗
色々環境が古すぎる。

ruby 2.4.2に更新

```bash:
$ brew update
$ brew upgrade ruby-build
```

失敗
rubyの元のパスを変更
sudo mv /usr/bin/ruby /usr/bin/ruby2.0.0

```bash
$ rbenv install --list
$ rbenv install 2.4.2
$ rbenv global 2.4.2
$ rbenv versions
```
切り替わってない。

```text:~/.ruby-version
2.4.2
```

切り替わった！

packageインストール済みな環境であれば カレントディレクトリで `yarn`を実行すると `yarn.lock`ファイルが生成される。

できたので、react-create-app アプリ名で作成した環境に移動。
```
$ react-create-app karma
$ cd karma
$ yarn start
```

起動した。簡単だ。

## バージョン管理
```
$ git init
```text:.gitignore
# dev tools
/.idea
```

## npmモジュールの追加
必要そうなものをざっと記述
### グローバル
yarn global add serve
- serve ( http-server なども有るが、create-react-app の指名なので）
- 

### ローカルパッケージ
Railsでファイル保存をせずにPNGデータとしてQRコード表示

#概要
railsで一時的なトークンをqrコードにして表示したかった。
gemは色々情報が乗ってて簡単だったので[rqrcode](https://github.com/whomwah/rqrcode)を使うことにした。

ただ一つだけ問題があり、大体どこのサイトでもqrを一旦pngで保存してurl表示って方法をとっていたり、svgで出力してたとこ。

個人的にpngの方がとりあえずサイズ調整とか簡単だしpngにしたかったが、一時トークンのためにファイル保存したり削除したりの管理コード書くのかったるいなと思ったのでファイル保存しないで直接生成したpngを表示したかった。

しかし、[この記事](https://qiita.com/yutackall/items/d68c8c95aa7aa0a3b542)の情報しかそのように行う情報が存在せず、ここで使われてるrmagickというgemがimagemagickのバージョンで動かなくなる（bundle install ができない。詳しくは[ここ](https://qiita.com/sho012b/items/362abe993248c686fcf4)）とかで、imagemagickのバージョンとかいちいち変えたりするのめんどくさかった。

で、なんか他に方法ないのかよとchunky_pngってgemのドキュメント見てたらなんか行けたのでメモ。

#使うgem
#### [rqrcode](https://github.com/whomwah/rqrcode)
qrコード作成gem

#### [chunky_png](https://github.com/wvanbergen/chunky_png)
pngを扱うためのgem

```
gem 'rqrcode'
gem 'chunky_png'
```
これをgemfileに追加してbundle install

#やり方
まずはrqrcodeの使いかた。
QR表示したいViewで使うためのヘルパーメソッドを作成。

```ruby
require 'chunky_png'


def qrcode_tag(text, options = {})
    qr = ::RQRCode::QRCode.new(text)
 return ChunkyPNG::Image.from_datastream(qr.as_png.resize(500,500).to_datastream).to_data_url
end

```

一行目は引数のテキストを使ってQRコード生成
ただしこのままだとただのObjectであり、これを表示させてもQRにはならない。
svgでいいなら

```rb
return qr.as_svg().html_safe
```
とすればよく、これをerbファイル内で

```rb
<%= qrcode_tag request.url %>

```
としてヘルパーメソッド呼び出せば表示させることができる。
超簡単。
けどこれじゃあpng表示ができない。もう一手間必要。

2行目でpng表示をするためにChunkyPNGというgemを使っている。
これのChankyPng::Imageにはto_data_urlというメソッドが存在しており、これをimage_tagメソッドでerbから利用する事ができる。

まず先ほど作ったRQRCode::QRCodeオブジェクトをas_png()でpngデータにした後to_datastereamメソッドを使ってdatastreamという型にする。
ついでにサイズも調整

```rb
qr.as_png.resize(500,500).to_datastream
```

次にChankyPNG::Imagesのfrom_datastreamを使ってdatastream型からインスタンス生成。それのto_data_urlメソッドを実行しリターン。
全部やったのが以下

```rb
return ChunkyPNG::Image.from_datastream(qr.as_png.resize(500,500).to_datastream).to_data_url
```


そしてこのヘルパーメソッドをveiwファイルで呼び出すとurlが返ってくるのでimage_tagヘルパーメソッドが普通に使える。

```rb
<%= image_tag qrcode_tag "test"%>
```
こうすると"test"という文字列をQRコード化したimageが500,500のサイズで表示される。
![screenshot.png](https://qiita-image-store.s3.amazonaws.com/0/143871/6f30662b-d8e0-749b-1c5a-70f7482ff637.png)

表示された！！！
デベロッパーツールで見てみるとソースがなぞurlになってるから裏で一時保存とかしてくれてるのかな？
まあこっちで管理したりしなくてすむからこれで問題なし！！
Android Studio のメニュー文字サイズを変える

# 概要
Windows 版の Android Studio 3.0系でちょっと困った点について書いてみます。

## 動機
Windows PC で Android Studio を 3.0 にアップグレードしたところ、メニュー等の文字が 2 系の頃に比べて小さくなったように感じました。

![12.png](https://qiita-image-store.s3.amazonaws.com/0/102004/da3515e7-d48e-8d36-df05-35a522b4973e.png)

目が悪くてちょっと厳しいので設定を変更します。

----

# 設定変更
メニューバーの "File" -> "Settings" -> "Appearance & Behavior" の "Appearance" にある "UI Options" の "Override default fonts by (not recommended):" というセクションで、任意のフォント名とフォントサイズを設定可能です。

## 変更前
12でした。

![font_size.png](https://qiita-image-store.s3.amazonaws.com/0/102004/36ae835b-5616-c25a-9776-03b853bf5ea6.png)


## 変更後
14に変更するとこのようなサイズになります。

![14pt.png](https://qiita-image-store.s3.amazonaws.com/0/102004/6bbf9cca-9352-fd20-c437-d9a052686aee.png)

----

# エディタのフォント
メニューバーの "File" -> "Settings" -> "Editor" -> "Colors & Fonts" -> "Font" のところで変更可能です。

![editor.png](https://qiita-image-store.s3.amazonaws.com/0/102004/09c2d19b-ce27-8b01-d9e9-4b2f6def2bea.png)

----
# スクリーンショットと動画
2系の頃から配置が変わって、3.0 だと Logcat タブのところに格納された形で存在するようです。

![ss.png](https://qiita-image-store.s3.amazonaws.com/0/102004/8bb74d5a-d2c3-0153-c0b1-0aa733bbe8f5.png)

カーソルを合わせると出現します。

![ss1.png](https://qiita-image-store.s3.amazonaws.com/0/102004/11d8273d-15f4-6e57-8358-0017235c5840.png)

----
# 終わりに
Settings のダイアログには検索ボックスがあるので、「この設定はあるのかな」と思ったら探してみると良いと思います。
カラー表示される標準出力からカラーを除く

# 方法
カラー表示される標準出力からカラーを除く

```
コマンド | sed -r "s/\x1B\[([0-9]{1,2}(;[0-9]{1,2})?)?[mGK]//g"
```

出力をパイプで繋いで色を表してる`[33m`とかを`sed`で消す。



# alias登録

## zsh
~/.zshrcにグローバルエイリアスとして登録

```shell-session:.zshrc
% alias -g I='| sed -r "s/\x1B\[([0-9]{1,2}(;[0-9]{1,2})?)?[mGK]//g"'
```

## bash
bash派の人は~/.bashrcにaliasを登録

```shell-session:.bashrc
$ alias ic='sed -r "s/\x1B\[([0-9]{1,2}(;[0-9]{1,2})?)?[mGK]//g"' 
```


zshで`% ls --color I`やbashで`$ ls --color | ic`などと打ってみて確かめてください。


## 補足

### よく設定されているalias
よくあるshell上では最初から
```
alias ls='ls --color=auto'
```
などと最初からカラー表示で設定してあると思うので、わざわざ--colorなんてオプションはいらないのですが念の為。


### aliasの回避としてバックスラッシュ
以上のようなaliasが登録されている環境でlsをカラー表示したくないなら`ls`の前にバックスラッシュをつけて`\ls`とすればaliasを無視して本来の`ls`が使えます。
ここでわざわざ`ls`を例にあげているのは単純にみんな知っているコマンドだからです。

今回この記事を書くキッカケとなった自作コマンド([[git ailias]本日のまとめログと最後のタグからのコミットログ、その他](https://qiita.com/u1and0/items/89227ca259f29b9b3c95)参照)がカラー表示で、lsのようにcolorオプションがあるわけではないので、一時的にカラー表示を無効化したい時にと思って何か方法がないか調べたまででした。



# 参考
参考というか丸パクリ: [Stack over flow - Removing colors from output](https://stackoverflow.com/questions/17998978/removing-colors-from-output)
日本語記事で存在しなかったのでここにメモしておきます。

以上
OctoberCMSテーマ作成Tips：ページファイルにコメントを記述する

結論から書くと、ページファイルのページ設定セクションでは`;`でインラインコメントを書ける。

ページファイルは、ページ設定セクション、PHPコードセクション、そしてテンプレートセクションで構成される。PHPコードとテンプレートセクションでは言うまでもなくそれぞれの言語のコメントシンタックスが使用できるが、わからなかったのがページ設定セクション。

ページ設定セクションについてはあまりドキュメントでは説明されていないが、このセクションは[INIファイル](https://ja.wikipedia.org/wiki/INI%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB)フォーマットが適用されている。

INIファイルでは `;` でインラインコメントを開始できるので、ここでもそれが使える。

例

```
; ブログ記事ページ
title = "Blog Post" ; タイトル
url = "/blog/post/:slug" ; `:slug`は記事IDのようなもの
layout = "default"
is_hidden = 0

[blogPost]
slug = "{{ :slug }}"
categoryPage = 404
==
{% component 'blogPost' %}
```

[OctoberCMSのINIパーサーのAPIドキュメント](https://octobercms.com/docs/services/parser#ini-parser)にさらに詳細が書いてあるのでご参考までに。
GlogとWindos.hの対立解消

 ceres solverのサンプルは動いたけど、opencvの自分のプログラムに組み込んだら、ビルド時に下記のエラーが発生しました。
"error ERROR macro is defined. Define GLOG_NO_ABBREVIATED_SEVERITIES before including logging.h. See the document for detail."
調べてみるとglogとWindows.hは対立するそうなので、Windows.hをインクルードしているファイルに"#define NOGDI"を追加すれば直りました。
参考：https://code.google.com/archive/p/google-glog/issues/33
Integromatによるプログラミングレス/サーバーレスwebAPI作成 その1(データ定義編)

# Integromatとは？
Integromat(https://www.integromat.com/en/) はIFTTTやZapierのようにwebサービスを使った自動ワークフローを作るためのサービスです。
<img width="1272" alt="スクリーンショット 2017-11-05 16.05.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/211743/be16efc4-cd93-f49a-e569-370856df07b8.png">

Integromatの使い方の記事は[こちら](https://qiita.com/nendocode/items/b3f9f9810a0dfd744dcf)に書いてみました。

この記事では本来のIntegromatの使い方からちょっと外れて、簡単にwebAPIを作るための環境として使ってみたいと思います。

# 作成するAPI
今回は下記のデータのCRUD(Create/Read/Update/Delete)APIを用意します。
IDと本のタイトルと著者名を持つ単純なデータ構造です。
###今回作成するデータ構造(JSON形式)

``` json
{
    "Id":string,
    "Title":string,
    "Author":string
}
```

# 　データストアの作成
まずはデータストアを作成してみましょう。メニューから"Data stores"を選択し、"Add data store"をクリックします。


データストアの作成画面のポップアップが出るので、下記のとおりデータストア名を設定し、"Data structure"のAddボタンを押します。
<img width="503" alt="スクリーンショット 2017-11-05 16.38.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/211743/2de36c2f-dd47-3586-0129-c011f2a60a96.png">

今度はデータ定義のポップアップ画面が出るので、データ定義名を入れ、"Specification"の"Add item"をクリックし、データ定義を作っていきます。
<img width="403" alt="スクリーンショット 2017-11-05 16.43.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/211743/cde9f2d8-4967-4110-026f-f31c7b8ca3ac.png">

<img width="401" alt="スクリーンショット 2017-11-05 16.44.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/211743/157e0b45-60e4-a976-9eb6-d01a5a0fe286.png">

最終的にこんな感じのデータ定義にしました。
<img width="405" alt="スクリーンショット 2017-11-05 16.44.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/211743/1b3f9378-36d3-d859-6dbb-4b2abdf80a99.png">
"Id"メンバの定義はしていません。データストアにデータを追加すると自動でキーが追加されるので、データストア用のデータ構造としては不要なためです。
あとは各ポップアップで"Save"を押して定義を保存します。

# API用データ定義
メニューから"Data structures"を選択し、先程作ったデータが作成されている事を確認します。
"Clone"ボタンを押し、先程作成した"Book"型を元に、webAPIリクエスト用のデータ定義を用意します。
<img width="502" alt="スクリーンショット 2017-11-06 6.11.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/211743/930337c6-3168-b96b-9977-a345a52b60a2.png">

先程のデータに加えて"Id"を追加します。

これでデータ定義は完了です。次回(https://qiita.com/nendocode/items/c0d2f9fd1e812ea3e3bd)
はCreate/Update用のAPIを作成します。

# 記事一覧
その1(https://qiita.com/nendocode/items/756b59b33d3e0cab4108)
その2(https://qiita.com/nendocode/items/c0d2f9fd1e812ea3e3bd)
その3(https://qiita.com/nendocode/items/f71982042018ddb8c74a)
Seagate DateCode の変換方法

Seagate製造のドライブに記載されているDateCodeの計算方法

# 計算
- 書式は YYwd [w=1-9] 又は YYwwd [ww=10-53]
- 7月第1土曜をYY-1年の第1週の開始日とする
    - 例：2017/07/01 (Sat) → **18年**の第1週は7/1
- wは週としてdは日数として計算する
    - 例：16112 → 2015/07/04 (Sat) + (11-1)*7 + 2 → 2015/09/14 (Mon)
- 土曜始まりの会計年度というのがポイント？

# 実装例

## JavaScript
```js:sgDate.js
function sgDate( str ) {
  // Convert Seagate DateCode to YYYY/MM/DD
  var sy = 1999;
  var sw = 1;
  var sd = 0;

  // Format: YYwd YYwwd
  if ( str.length < 4 ){
    return "";
  } else if ( str.length < 5 ){
    sy += parseInt(str.substr(0,2)); 
    sw = parseInt(str.substr(2,1));
    sd = parseInt(str.substr(3,1));
  } else {
    sy += parseInt(str.substr(0,2)); 
    sw = parseInt(str.substr(2,2));
    sd = parseInt(str.substr(4,1));
  }

  try{
    // Begins from first Saturday of July 1999
    var d = new Date(sy,6,1);
    d.setTime( d.getTime() - d.getTimezoneOffset()*60*1000 );
    d.setDate( d.getDate() + 6 - d.getDay() ); 
    // Add weeks and days
    d.setDate( d.getDate() + sw * 7 - 7);
    d.setDate( d.getDate() + sd );
    return( d.toISOString().slice(0,10).replace(/-/g,"/") );
  }catch(e){
    return "Invalid string"; 
  }
}
```

## moment.js
計算部分は moment.js を使うと少し見やすくなる

```js
// require moment.js
  var dm = moment({ Y:sy, M:6, d:1 });
  dm.add( 6 - dm.day(), 'd');    
  dm.add( sw, 'w' );
  dm.add( sd, 'd' );
  return( dm.format("YYYY/MM/DD (ddd)") );
```

# 備考
PHP実装をJavaScriptで再実装した機会にまとめることに
特定ロット不良といった不具合期間は避けたいですね :-(

## 参考文献
www.lerti.fr/web/public/NoteTechnique03-v1.01.pdf
Google Fusion Tablesを操作する

## Google app scriptを利用するパターン
- メリット
	- Google app scriptを利用すると、JS-like にかけて、認証も必要ない
- デメリット
	- 外部ライブラリを読み込めない
- 参考
	- https://qiita.com/U11/items/c4d9632715b016bef8ee

## Google APIからFusion Tablesを操作するパターン
### 設定
- selectは、GETするだけで簡単にとってこれる
	- `https://www.googleapis.com/fusiontables/v2/query?sql=SELECT * FROM {Fusion tales id}&key={your API key}` 
	- [公式ドキュメント](https://developers.google.com/fusiontables/docs/sample_code)


- insertとdeleteは認証が必要

	- [Create a fusion table](https://support.google.com/fusiontables/answer/2571232)

	- [管理画面](https://console.developers.google.com/apis/credentials?project=project-id-XXX)からOAuthクライアントを作成してJsonをダウンロード
![Screen Shot 2017-11-05 at 15.39.09.png](https://qiita-image-store.s3.amazonaws.com/0/99549/aa25351a-7da1-b049-1af2-e2b6ac9c229a.png "Screen Shot 2017-11-05 at 15.39.09.png")

	- Fusion Tablesの共有設定から、APIのemailに対して権限を追加する必要がある。


### Node

- `$ npm install googleapis --save`
	- https://github.com/google/google-api-nodejs-client

- コードは[ここ](https://github.com/BoChengHuang/Google_oauth_jwt_test/blob/385302040d550c153cdf023a41f31f7e597dda6a/index.js)を参考にした。

```js
var google = require('googleapis');
var fusiontables = google.fusiontables('v2');

var key = require('./管理画面からとってきたOAuth情報.json');

fusion_table_id = "Fusion tablesのID"

// クエリはここ
insert_sql = "INSERT INTO " + fusion_table_id
insert_sql += " (column_name1, column_name2, column_name3) "
insert_sql += "VALUES (111,222,333)"

var jwtClient = new google.auth.JWT(
  key.client_email,
  null,
  key.private_key,
  ['https://www.googleapis.com/auth/fusiontables', 'https://www.googleapis.com/auth/fusiontables'],
  null
);

jwtClient.authorize(function (err, tokens) {
  if (err) {
    console.log(err);
    return;
  }

  fusiontables.query.sql({
    auth: jwtClient,
    sql:insert_sql,
    key: '<api-key>'
  }, function (err, res) {
      if (err) {
          console.log(err);
      }
      else {
          console.log(res);
      }
  });
});

```
## Python(認証なしパターン)
```py3

import urllib.request
fusion_tables_id = "<fusion-tables-id>"
api_key = "<api-key>"
sql = "SELECT * FROM "+fusion_tables_id+"&key="+api_key
url = "https://www.googleapis.com/fusiontables/v2/query?sql="+urllib.parse.quote(sql,safe='*&=')
print(url)
webURL=urllib.request.urlopen(url).read()

data = webURL.read()
encoding = webURL.info().get_content_charset('utf-8')
JSON_object = json.loads(data.decode(encoding))
```

- `urllib.parse.quote`は`safe`というパラメータでquoteしない文字を指定できる
	- https://docs.python.org/3.6/library/urllib.parse.html#url-quoting

- jsonでload
https://stackoverflow.com/questions/32795460/loading-json-object-in-python-using-urllib-request-and-json-modules
参考
- http://schima.hatenablog.com/entry/2013/11/28/005648
MySQLのmy.iniファイルの在り処

##mysqlをインストールしてみた

先日、mysqlをインストールしたのですが、
(手順は以下のサイトを参照)
https://www.dbonline.jp/mysqlinstall/
my.iniファイルを設定する箇所でファイルがない？！とあたふたし、調べてみたのでメモ。

インストール先の設定とかしなかったので、(というか、聞かれなかったような…)`C:\Program Files\MySQL`というのがインストールされたものだとてっきり思っていたんですね。。

ところがmy.iniファイルがない。

あれ、なんでだ。と思ってググったら、隠しフォルダにあるらしいんです。

というわけで、探していたmy.iniは`C:\ProgramData\MySQL`にありました。
.Net System.Reactive の使い方。イベントアグリゲータのサンプル

# .Netで使うRxの覚え書き

## Rx,Reactive Extentionとは

さっくり省略。別記事(他の人の)を参照してね。

## なんに使えるの？

解釈が人によりそうだけど、イベント処理・タイマーなどかな。

ただし、簡単なイベント処理なら自前で処理する、タイマーならOSサービスやらを使った方が良いですよ。

便利なんだけど、いまいちLinqに比べて普及しない所はやや複雑だからかな〜

## .NetのRxは...

使ってるプラットフォームにより、一部記述に違いがあるようだ。
他人のサンプルをそのままコピペしても動かないことがあるよ〜

ついでに、ライブラリの方にも変更があるから、それについて行く必要もあるよ〜
たとえば、ライブラリのNuget参照名が~~Rx-Main~~から**System.Reactive**になってたり。

## なのでサンプルを自分用に作った

ここでのコードは、Windows Desktop, Form用。
(WinFormsで使うことを考えて作ってみたけど、ここに書いた程度では影響ほとんど無いか。。。)

イベントアグリゲータを作ってみた。

ここのサンプルは、System.Reactive Ver3.1.1でのこと。

### イベントアグリゲータってなに？

省略。Wow

### どんなメッセージ送れるの？

指定のインタフェースを実装したオブジェクトが送信できる。
メッセージの種類は、このオブジェクトの型で分けている。なので、同じ型でリスナを登録すると、全部にメッセージが送られるぞ。

### インタフェース

- アグリゲータ
  - イベントリスナの登録　Subscribe
  - イベント発行　Publish
- イベントメッセージ
  - (空っぽ)必要に応じて付けてくれ〜 

``` インタフェース定義
    public interface IAggregator : IDisposable
    {
        IDisposable Subscribe<T>(Action<T> action) where T : IEventArgs;

        void Publish<T>(T @event) where T : IEventArgs;
    }


    public interface IEventArgs
    {

    }
```

### アグリゲータの実装

``` イベントアグリゲータ実装
using System.Reactive.Linq;
using System.Reactive.Subjects;

    public class Aggregator : IAggregator
    {
        public void Dispose()
        {
            _subject.Dispose();
        }

        readonly Subject<object> _subject = new Subject<object>();

        public void Publish<T>(T @event) where T : IEventArgs
        {
            _subject.OnNext(@event);
        }

        public IDisposable Subscribe<T>(Action<T> action) where T : IEventArgs
        {
            return _subject.OfType<T>()
                .AsObservable()
                .Subscribe(action);
        }
    }
```

### イベントメッセージの実装

とりあえずのサンプル。文字列を持つ形で作ってみた。
この部分からは、実際の実装に合わせて変更すべき所ですよ。

``` イベントメッセージのサンプル実装
    public class EventParam : IEventArgs
    {
        public string Msg { get; set; }

        public EventParam(string s)
        {
            Msg = s;
        }
    }
```

### 使い方サンプル部分

イベントリスナ側

``` sample
        //アグリゲータの実体定義
        //これだけはいつも必要
        IAggregator agre;
        agre = new Aggregator();

        //残りはリスナに合わせて実装する
        //ここのはまあ、こんな感じで
        EventParam receivedEvent = null;
        void Handler(EventParam ep) => receivedEvent = ep;
        agre.Subscribe((Action<EventParam>)Handler);

        //もう一つ
        var a = new Action<EventParam>((x) => 
        {
            System.Diagnostics.Trace.WriteLine("receive;" + x.Msg);
        });
        var tok = agre.Subscribe(a);

```

イベント発行側

イベント発行と解除。解除は必要ならするでOK。

``` sample
        //イベント発行
        agre.Publish(new EventParam("hello"));

        //リスナ削除
        tok.Dispose();
```

## 〆

イベントアグリゲータとしてはこんな感じでしょうか。

今回イベントソースを手動でやってますけど、Rx使うなら色々できまっせ〜
ファクトリでソースを作ってあげれば良いのですけど、色々ありすぎて逆に使いづらい（暴言！）

以上
MATLABの histogram で 'Normalization', 'Probability' は nan まで計算に入ってしまう

N数が違う histogram を重ねる時，y軸を 'Prpbability' にすると思うが，NaN まで計算に入れているみたいなので注意．
↓のような事が簡単に起こる (二つのヒストグラムの面積の合計同じにならない)．

```
x = randn(1,1000);
nanx = x;
nanx(:) = nan;
y = [x nanx];

figure;
histogram(y, -5:.5:5, 'Normalization', 'probability', 'DisplayStyle', 'stair'); hold on;
histogram(x, -5:.5:5, 'Normalization', 'probability', 'DisplayStyle', 'stair');
```
![untitled.png](https://qiita-image-store.s3.amazonaws.com/0/28835/e6db4e4e-d4c8-d5b1-2d89-c493cc997ee3.png)




解決策
```
histogram(y(~isnan(y)), -5:.5:5, 'Normalization', 'probability', 'DisplayStyle', 'stair'); hold on;
```
みたいにする．めんどくさい…

MATLAB2017a で確認．
Node.jsでParrotのミニドローンを飛ばす (async/await利用)


> [RESASハッカソン 岩手](https://connpass.com/event/67430/)で記事書いてます。 `#RESAS`

![](https://i.gyazo.com/b83a96c96de04381ae5930caeb2adaac.png)

[Node.jsでParrotのミニドローンのBLE情報を探す](https://qiita.com/n0bisuke/items/a9cd09ea70cec216ee10)の続きです。

[rolling-spiderのサンプル](https://github.com/voodootikigod/node-rolling-spider/blob/master/eg/keyboard.js)をasync/awaitで利用できるように書いてみました。

このサンプルだとキー入力で制御でしたが、`何秒後にこれを実行`みたいな処理を同期的に書きたかった感じです。

## 準備

```
npm i --save rolling-spider
```

## コード

```app.js
'use strict';

const RollingSpider = require('rolling-spider');
const DRONE_UUID = process.env.DRONE_UUID || ``; //各々書き換えましょう。
const drone = Promise.promisifyAll(new RollingSpider({uuid:DRONE_UUID}));
const STEPS = 5;

let activeFlag = true;

const cooldown = () => {
  activeFlag = false;
  setTimeout(() => activeFlag = true, STEPS);
}

// Promise化
const droneConnectAsync = () => new Promise(resolve => drone.connect(resolve('connect success!')));
const droneSetupAsync = () => new Promise(resolve => drone.setup(resolve('setup success!')));
const droneFlatTrimAsync = () => new Promise(resolve => drone.flatTrim(resolve('trim success!')));
const sleep = msec => new Promise(resolve => setTimeout(resolve, msec)); // async/awaitでのSleep処理

// メインの処理
const main = async () => {
  //ドローンとの接続/セットアップ
  console.log('connecting...');
  let res = await droneConnectAsync();
  console.log(res);
  res = await droneSetupAsync();
  console.log('Configured for Rolling Spider! ', drone.name);
  res = await droneFlatTrimAsync();
  console.log(res);
  drone.startPing();
  res = await droneFlatTrimAsync();
  console.log(res);
  console.log(drone.name + ' => SESSION START');
  activeFlag = true;
  
  // 離陸
  await sleep(5000);
  drone.takeOff();

  // 5秒待って前進
  await sleep(5000);
  drone.forward({steps:10});
  cooldown();

  // 5秒待って着陸
  await sleep(5000);
  drone.land();

  // 10秒後に接続解除
  await sleep(10000);
  console.log('disconnect');
  drone.disconnect();
  process.stdin.pause();
  process.exit();
};

main();
```



## 実行

```
$ DRONE_UUID=xxxxxxxxxxxx node app.js
```

これで`離陸->5秒待つ->前進->5秒待つ->着陸`ができました。
[Python] listが空かどうか判定する方法2つ

##方法 

- 1つ目

```.py
a = []
if not a:
 print("リストは空です")
```
- 2つ目

```.py
a = []
if len(a)==0:
 print("リストは空です")
```
## 解説
1つ目の方法、2つ目の方法ともに問題なく動作します。
pythonのlistは、空であれば**False**、中身が入ってれば**True**を返す性質があります。

```
>>> bool(['A','B','C'])
True
>>> bool([])
False
```

1つ目の方法はこの性質を使って判定しています。
2つ目の方法は、listの要素数を調べてサイズが0であれば空ということにしています。
[stack overflow](https://stackoverflow.com/questions/53513/best-way-to-check-if-a-list-is-empty)ではどちらの方法が良いかという議論があり、1つ目が優勢です。
理由としては、listのサイズを調べる前に、まずlist変数の真偽を調べるのが先だということです。
またPythonのコーディング規約の**PEP8**においても1つ目の方法が推奨されています。
２つ目も可読性があって良いとは思います。

## 追記
- 3つ目

```.py
if a == []:
 print("リストは空です")
```
1つ目や2つ目は、list以外にも空の文字列や空のタプルでもTrueを返してしまいます。3つ目の方法では、変数aはlistでなければいけないという条件をつけた上で、空かどうかを判定できます。

ご指摘ありがとうございます！
```if a == []:```
では、aが空である、かつaがlistである、と2つの条件をチェックできます。
今回のタイトルである「listが空かどうか判定する方法」をより厳密にチェックできて良いと思います。
勉強になりました。追記をいたしました。
カスケードトレーニングについて私が知っていることをメモしておこう

opencv_traincascadeでカスケードファイルを作っています。あと20時間くらいかかりそうで手持無沙汰なのでメモ。

まず、　opencv_traincascade.exeは自分でコンパイルしたものを使ったほうがよさそうです。
コンパイルオプションをちゃんと吟味して、早く動くものでやるとはかどります。しかしながら段数が増えてくると早いやつを使ってもだんだんスピードが遅くなります。それでも自前でコンパイルしたほうが良い理由は、配布されているopencv_traincascadeバイナリだとできない段数でも自前で作ったバイナリならできたからです。理由は調べてないのでわかりません。

メモリーは多いにこしたことはないです。-precalcValBufSize   -precalcIdxBufSize は内蔵の物理メモリが許す限り大きくとったほうが初速が稼げます。これも段数が上がるとあんまり効果がなくなるみたいです。

正解画像も不正解画像もあらかじめすべてJPEGならJPEG、BMPならBMPに変換しておいたほうが良いです。ディスクスペースに余裕があるならBMPにすれば画像展開の時間が稼げると思います。OpenCVのLIBPNGは古いしなんがおかしいのでPNGは使わないほうが良いでしょう。ZLIBも古いし。不正解画像はグレースケールにしたほうが良いみたいですが、理由は知りません。もしかしたら正解もグレースケールにしたほうが良いのかもしれませんがわかりません。

JPEG画像をどうしても使う場合はOPENCVをビルドするときに、JPEGライブラリをLIBJPEG-TURBOに差し替えたほうがちょっと早いですが、これも段数が上がると効果が薄れます。

TBBは有効にしたほうが良いと以前書きましたが、最新のやつ(3.3.1　Gitで持ってきたソース参照)はTBB有効にしなくてパラレル処理するようになっているみたいです。CPUの占有率とかスピードを見るとTBBを有効にしたほうが早いみたいです。なぜかはわかりません。マルチコアのCPUでなかったら段数上がっていくと時間がめちゃくちゃかかるので悲しくなると思います。

アノテーションは、有名なツール、https://github.com/takmin/ObjectMarker　
を利用されるとよいでしょう。OpenCVの付属ツールより使いやすいです。
ObjectMakerを自力でコンパイルするときには注意点として、IFDEF　でWindowsを判断しているところがあるのですが、WIN　とかなっているところを　_WIN　とアンダーバーを付けないとマウスをちゃんと持ってこれないので気を付けて下さい。矢印キーを使いたい人、残念ですがOPENCVのキー処理のソースをいじらないとできないので、あきらめて10キーつきのキーボードを使うかを10キーを買ったほうが早いと思います。
ビルドするのにBoostライブラリが必要ですが、自分でビルドして使えるようにするのはとても面倒なので、Nugetで持ってくるとよいと思います。

アノテーションが終わったものは、そのまま使うのではなく、囲ったところを切り出した画像にしたほうが良いみたいです。ObjectMakerをビルドして使えば作成したアノテーションファイルでできます。

しかしながら切り出してしまうとopencv_createsample.exeで必要な入力画像の位置指定TXTファイルを作るのに往生することになります。
リサイズするユーティリティーはフリーで落ちているので、それらを使って全部同じサイズにリサイズすればファイル名をdirなどで吐き出して、そのあとはコピペで行けます。
もしくは、プログラムがとくいな人はPythonなどで、画像一杯を領域としたOK用の位置指定ファイルを生成するプログラムを作ってしまえばよいと思います。PILとか使ってディレクトリ内の切り取り済みのイメージファイルのサイズを読み取ってファイル名とサイズを吐き出すプログラムを作ればよいです。image.sizeとかでとれます。


あと、不正解画像ですが、ありえないシチュエーションの画像は入れないほうが良いでしょう。段数上がるごとに
時間がかかるので時間の無駄遣いになります。

メモは以上です。
certbot管理下でサブドメイン追加するときの個人的な手順

1.Nginxまたはhttpdの設定 取得したいドメイン:80のドキュメントルートの指定
2.sudo certbot certonly --webroot -w /var/www/hogehoge -d www.hogehoge.com
3.晴れて443の設定
PHP スクレイピングライブラリ Goutte で text() が空のときエラーじゃなくて空文字が返るようにする


##経緯
webスクレイパとしてGoutteを使っています。
https://github.com/FriendsOfPHP/Goutte

下の記事にありますが、
https://qiita.com/zaburo/items/45d748ae3966bf08323f

対象のタグが無いときか、空文字のときに、
エラーを吐いて動かなくなるので、
いっそエラーを吐かなくしました。

##コード
`Crawler.php`の大体551行目くらいで一行書き換えるだけです。

```before.php
    public function text()
    {
        if (!count($this)) {
            throw new \InvalidArgumentException('The current node list is empty.');
        }

        return $this->getNode(0)->nodeValue;
    }
```

```after.php
    public function text()
    {
        if (!count($this)) {
            //throw new \InvalidArgumentException('The current node list is empty.');
            return '';
        }

        return $this->getNode(0)->nodeValue;
    }
```

#注意
この変更によって、タグの中が空文字なのかタグ自体がないのかが判定できなくなるかもしれません。後日ちゃんとコード追います。
引用の記事にgoutte自体を書き換えないで空文字を出力するやり方があるので、そちらのほうがいいかもしれません。
今回の自分の場合タグが空でも空文字でも同じで問題なかったのでこうしました。
PlatformIO で mbed Nordic nRF51 をオフラインで開発する手順

スイッチサイエンスが販売している [mbed TY51822r3](https://www.switch-science.com/catalog/2574/) をオフライン環境のPlatformIOで開発できたのでそのメモです。

## platformio 対応 ボードを確認
mbed TY51822r3 は nRF51-DK なので nrf51_dk がボード一覧に有ることを確認してみる。

```
platformio boards
...
Platform: nordicnrf51
-------------------------------------------------------------------------------------------------------------------
ID                    MCU            Frequency  Flash   RAM    Name
-------------------------------------------------------------------------------------------------------------------
bbcmicrobit           NRF51822       16Mhz     256kB   16kB   BBC micro:bit
bbcmicrobit_b         NRF51822       16Mhz     256kB   16kB   BBC micro:bit B(S130)
bluz_dk               NRF51822       32Mhz     256kB   32kB   BluzDK
dfcm_nnn40            NRF51822       32Mhz     256kB   32kB   Delta DFCM-NNN40
wallbot_ble           NRF51822       16Mhz     128kB   16kB   JKSoft Wallbot BLE
nrf51_dk              NRF51822       32Mhz     256kB   32kB   Nordic nRF51-DK
nrf51_dongle          NRF51822       32Mhz     256kB   32kB   Nordic nRF51-Dongle
nrf51_mkit            NRF51822       16Mhz     128kB   16kB   Nordic nRF51822-mKIT
oshchip               NRF51822       32Mhz     256kB   32kB   OSHChip
...
```

## platformio 初期設定
作業するディレクトリを作りその中で ボード nrf51_dk,フレームワーク mbed を指定して platformio の初期設定をします。

```
mkdir blink
cd blink
platformio init -b nrf51_dk -O "framework=mbed" -O "upload_port=/Volumes/MBED" -O "build_flags = -std=c++1y"
```

## platformio.ini
[LPC1114 LPC1114FN28 / mbed 開発を platformio を使ってやる](https://lowreal.net/2016/02/17/3)を参考に platformio.ini を下のように設定しました。

``` ini:platformio.ini
[env:nrf51_dk]
platform = nordicnrf51
board = nrf51_dk
framework = mbed
build_flags = -std=c++1y
upload_port = /Volumes/MBED
```

## Lチカコード
ビルドできるかの確認なので シンプルな Lチカコードを main.cpp として srcディレクトリに作成

```c++:main.cpp
#include "mbed.h"

DigitalOut led(LED1);

int main() {
	while(1) {
		led = 1;
		wait(0.5);
		led = 0;
		wait(0.5);
	}
	return 0;
}
```

## ビルド
mbed として ビルドできて 接続した MBEDへアップロードしてみます。

```
platformio run -t upload
```

## 参考
[LPC1114 LPC1114FN28 / mbed 開発を platformio を使ってやる](https://lowreal.net/2016/02/17/3)
[Switch Science mbed TY51822r3](https://os.mbed.com/platforms/Switch-Science-mbed-TY51822r3/)
なぜ、Java、JavaScript、Python、Ruby等で「参照渡し」の言葉を使うべきではないのか？

私の考える理由はただ一つ「C++、C#、PHP等の『参照渡し』と混同するから」です。

Java、Python、Ruby、JavaScript(ECMAScript)等としていますが、この記事では、それらの代表として主にJavaを取り上げます。しかし、他の言語についても同様のことが言えるため、同じく「参照渡し」の言葉を使うべきではありません。

## 本当の参照渡しとは？

C++での参照渡しの例です。

```C++
#include <iostream>
using namespace std;
void f(int x) {
  x = 1;
}
void g(int &x) {
  x = 2;
}
int main(void) {
  int n = 0;
  cout << n << endl; // => 0
  f(n);
  cout << n << endl; // => 0
  g(n);
  cout << n << endl; // => 2
}
```

`f`が値渡し、`g`が参照渡しです。値渡しでは、仮引数への代入は実引数に何の影響も与えませんが、参照渡しでは、仮引数への代入が実引数そのものへ代入した事になります。参照渡しでは、仮引数は実引数の別名(alias)と見なすこともできます。

## 混同するとどうしていけないのか？

Javaの参照型の渡し方は「参照渡し」だという説明を受けた人が、C++の参照渡しを見たとき、上のコードを理解できないからです。Javaにおいて、仮引数が参照型であっても、仮引数そのものの代入で実引数を変更することはできません。つまり、C++において参照渡しと言っているものとは全く異なる動作であるということです。それを同じ名称で呼んでしまえば、どちらが正しい動作なのかが理解できなくなります。

## なぜ、Javaでも「参照渡し」と呼ぶ人が続出しているのか？

C++でも参照型という表現をします。しかし、Javaの参照型とは「参照」の意味が異なります。C++で「参照」と言った場合「変数[^1]への参照」ですが、Javaで「参照」と言った場合「オブジェクト(の実体)への参照」を表すからです[^2]。この違いを理解せずに、そのまま「参照」という言葉だけが一人歩きした結果、「参照渡し」という言葉を再発明してしまったと考えられます。

## 言語によって意味が異なってもいいのではないか？

確かに、上記の「参照型」のように、言語やその言語のコミュニティーによって意味が異なる用語というのは存在します。ですが、ほとんどの場合は、誤解を生まないように、根本的な意味は言語間で共通であり、その言語特有の事情によって異なっているに過ぎません。仕様等により厳密に定義されているわけでも無ければ、なるべく言語によらない意味で使用すべきです。そもそも、Javaの参照型の渡し方はC++での参照渡しとは全く異なる動作であり、根本的に共通とも言い難いものです。

それでも、言語が異なるのだから、両方とも「参照渡し」でいいのではないかという人もいるでしょう。その場合は、C#について考えるべきです。C#では、参照型の渡し方はJavaと同じですが、それとは別にC++での参照渡しも可能です。もし、JavaとC++の両方とも「参照渡し」という用語を使うのであれば、C#では異なる渡し方の両方を「参照渡し」と言ってもいいとなってしまいます。かといって、一方を別の呼び方をした場合、同じ動作なのに言語によって名称を変えなければならないとなり、更なる混乱を呼び込み、その動作の理解はさらに難しくなるでしょう。

## 私は混同しないから、使ってもかまわない。

あなたが良くても、あなたが書いた記事を読んだ人は混同するかも知れません。少なくとも注意書き等が無ければ、何も知らない人は混同すると思います。そのような、人を混乱させるような記事を書くのであれば、あなたには他人に対して説明するような文章を書く能力が無いと言わざるを得ません。

## それでも「参照渡し」という言葉を使いたい！

C++、C#、PHP等の言語を生涯使わないことを誓って下さい。あなたが書く記事の最初に「C++、C#、PHP等の別の意味での『参照渡し』がある別言語を生涯使うことがない人以外は読まないでください。」の一文を追加することを推奨します。そうすれば、あなたも、あなたの記事を呼んだ人も、混同することは永遠に無いでしょう。

## Javaが正しくC++が間違っている。正すべきはC++だ。

C++での参照渡しの概念は古く、少なくともFORTRAN IIまでは遡れます。ただ、当時から「参照渡し」と呼ばれていたかは不明ですが、少なくとも、最初のC++ができる頃には「値渡し」と区別するためにも「参照渡し」の言葉はあったと思われます。Javaができたのはその10年以上後になります。言葉というのは最初に呼んだ人の勝ちです。以前からあった言葉の意味を変えるのは難しく、そちらを別の呼び方に変えるというのは厳しいでしょう。

ただ、言葉というのは移り変わりが激しいものですので、頑張って啓蒙すれば、10年後ぐらいには意味が変わっている可能性はあります。私は応援しませんし、賛同もしませんので、勝手に頑張ってください。

## では、何という言葉を使えばいいのか？

私は主に「参照の値渡し」や「共有渡し」と呼んでいますが、本当にこれでいいのかどうかはわかりません。teratailで質問をしたのですが、あまり回答が集まらなかったです。もし、こう呼ぶべきという意見をお持ちであれば、ぜひ、下記質問に回答をお願いします。もちろん、それでも「参照渡し」と呼ぶべきと言う回答でもかまいません。

[オブジェクトを共有できる形で渡す(呼ぶ)評価戦略の名称](https://teratail.com/questions/84660)

参考: [もう参照渡しとは言わせない](https://qiita.com/mdstoy/items/2ef4ada6f88341466783)

[^1]: 正確には左辺値への参照です。また、C++11以降は右辺値参照というまた別の「参照」があります。

[^2]: Javaの参照型はC++のポインター型に近いです。変数に入るのは「参照」ではなく「参照値」であることからも、実際の値であるポインターと近い物があります。対して、C++の「参照」は変数にポインターのような値が入ることを意味するものではありません。
Pythonで二分探索する公式ライブラリ

こんにちは。shamojiです。
相も変わらず、覚えたことはメモしていきたいので
発見したことをまとめていきたいと思います。

#Pythonで二分探索法してくれるライブラリ

まずコードから

```{nibutan.py}
import bisect
a=[1,3,5,7,9,11,13,15,17,19]
x=4

insert_index = bisect.bisect_left(a,x)

"""
insert_index=2
"""

a.insert(insert_index,x)

print(a)
"""
Out[1]:[1,3,4,5,7,9,11,13,15,17,19]
"""

```

見て分かるかと思いますが、bisect_leftメソッドは昇順ソートされたリストに昇順を崩さず挿入できる位置を返します。　
リスト要素が全部わかってないと使えない。
ただ$O(\log_{2} N)$でやってくれるからうれしい

#その他メソッド

```{}
a=[1,1,1,1,2,2,2,2,3,3,3,3]
x=2
```
のような時に他のメソッドはどういう挙動をするのか調査してみた

```{example.py}
import bisect
bisect.bisect_left(a,x)
"""
Out[1]: 4
[1,1,1,1,2,2,2,2,3,3,3,3]
         ^
"""
bisect.bisect_right(a,x)
bisect.bisect(a,x)
"""
Out[2]: 8
[1,1,1,1,2,2,2,2,3,3,3,3]
                 ^
"""

bisect.insert_left(a,x)
"""
[1,1,1,1,2,2,2,2,2,3,3,3,3]
         ^
"""
bisect.insert_right(a,x)
bisect.insert(a,x)
"""
[1,1,1,1,2,2,2,2,2,3,3,3,3]
                 ^
"""


```

#使いどころさん

list要素数Nが$1<N<10^9$とかってめちゃくちゃなリストの中からランダムでアクセス要求があったりした場合は自前実装よりもライブラリを使用した方が早いしミスがないのでお勧めです。
ただし、insertは$O(N)$とくそ重いのでinsert_left か right 使うときは二分探索に関係なく$O(N)$スピードになるので要注意です。

それに、競技プログラミングにおいては、速攻で実装し問題を崩すことができるので、余計な実装時間を削れることでしょう。