OmniAICreator/Qiita-1.07M huggingface dataset:
Unityの余計なファイルをgit diffの対象外にする

#問題：Unity立ち上げただけなのに差分が出てしまう
gitを綺麗にしてからUnityを起動すると見知らぬファイルの差分がたんまり...。

```
On branch develop
Your branch is up-to-date with 'origin/develop'.
Changes not staged for commit:
  (use "git add/rm <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

	modified:   myProject/Assets/App/Art/Effect/Mbo/USS.meta
	modified:   myProject/Assets/App/Art/shs/Materials.meta
	modified:   myProject/Assets/App/Art/tst/TO.meta
	deleted:    myProject/Assets/App/Art/sb/de/Ma/de_1053.meta
	deleted:    myProject/Assets/App/GameData/ER/Bu/Mo/de/Ma/de.meta
	modified:   myProject/Assets/App/GameData/ER/So/VO/10045.meta
	deleted:    myProject/Assets/App/GameData/ER/To/Un.meta
	deleted:    myProject/Assets/App/GameData/ER/UI/CD/cd_07.prefab.meta
	deleted:    myProject/Assets/App/GameData/ER/UI/TR.meta
	modified:   myProject/Assets/App/GameData/Re/Ba/Te/ba.png.meta
	deleted:    myProject/Assets/App/GameData/Re/UI/Su.meta
	modified:   myProject/Assets/App/Scenes/Ga/Co.unity
```
※適当に伏せ字にしています

#解決策：個人ignoreファイルをワンライナーで作成する
以下を丸っとbash_profileに登録しています。

```
# ==== 以下独自git ====

# 【Original Git Ignore】 操作しないゴミファイルを登録する（個人ignore）
alias ogi='git diff --name-only > gitTemp; cat gitTemp'

# 【Original Git Diff】 ゴミ以外のファイルの差分を全て表示する
alias ogd='git diff --name-only | grep -vf gitTemp | xargs git diff'

# 【Original Git Diff --Name-only】 ゴミ以外の差分のファイル名を表示する
alias ogdn='git diff --name-only | grep -vf gitTemp'

# 【Original Git Add】 ゴミ以外の差分を全て追加する
alias oga='git diff --name-only | grep -vf gitTemp | xargs git add; git status -uno'

# ==== 独自git 終了 ====
```

#解説
###Unity起動時
```
# 【Original Git Ignore】 操作しないゴミファイルを登録する（個人ignore）
alias ogi='git diff --name-only > gitTemp; cat gitTemp'
```
作業を行う前に「ogi」を実行します。
現状のdiffをgitTempファイルに書き込みます。
gitTempに書き込まれたパスは以降の操作の対象外となります。

###diff確認時
```
# 【Original Git Diff】 ゴミ以外のファイルの差分を全て表示する
alias ogd='git diff --name-only | grep -vf gitTemp | xargs git diff'

# 【Original Git Diff --Name-only】 ゴミ以外の差分のファイル名を表示する
alias ogdn='git diff --name-only | grep -vf gitTemp'
```
「ogd」とするとgitTempに含まれないパスの「git diff」が表示されます。
「ogdn」とするとgitTempに含まれないパスの「git diff --name-only」が表示されます。
自分の変更分だけが表示されます。

###add時
```
# 【Original Git Add】 ゴミ以外の差分を全て追加する
alias oga='git diff --name-only | grep -vf gitTemp | xargs git add; git status -uno'
```
diffに問題がなければ「oga」を実行します。
「ogd」「ogdn」で確認したファイルが「git add」されます。
あとはいつも通りcommit & pushします。

###ゴミファイルと自分の変更ファイルが混在したら
```
vi gitTemp
```
でパスを削除したり、追加したりします。

#改善点
* 新規ファイルの「git add」は手動のままなので一緒に管理したい
processingで外部ライブラリを追加する。（Linux）

外部で公開されているライブラリを導入する方法です。
ここではtwitter4jというライブラリを例に説明します。

twitter4jとは
http://twitter4j.org/ja/index.html

##環境 
ubuntu 14.04 LTS
Processing 3.3.5


###1.使用するライブラリをダウンロードする。
http://twitter4j.org/ja/index.html
ここからtwitter4j-4.0.4.zipをダウンロードし、unzipコマンドで展開します。

###2.ライブラリのファイルを配置する。
展開したディレクトリ/lib　の中に 　
twitter4j-core-4.0.4.jar
というファイルがあります。

このファイルを

<font color="SlateBlue">/home/ユーザー名/sketchbook/libraries/twitter4j/library</font>

の中に配置します。
twitter4jディレクトリと、その中のlibraryディレクトリは自分で作成する必要があります。

###3.jarファイルの名前を変更する。
最後に、
twitter4j-core-4.0.4.jarファイルの名前を
twitter4j.jar
に変更します。

<font color="SlateBlue">/home/ユーザー名/sketchbook/libraries/<font color="IndianRed">twitter4j</font>/library/<font color="IndianRed">twitter4j</font>.jar</font>

他のライブラリを追加する際も、この<font color="IndianRed">赤字</font>の部分の名前は必ず同じにしましょう。


processingを再起動し、スケッチ -> ライブラリをインポート に追加したライブラリが表示されていれば成功です。
![20170627_120419801_iOS.jpg](https://qiita-image-store.s3.amazonaws.com/0/179692/a7ca9f66-96f1-3d65-c588-c8fdaeb75819.jpeg)
angular-cliでプロジェクト作成

# Angular
なぜか流行っていないangularを使ってwebアプリを作っていきます。

## インストール
Angularの環境構築をするために
angular-cliをインストールします。

```
npm install -g @angular/cli
```

＊Node.jsのv6.9.0以上とnpmのv3以上が必要です。

## プロジェクト作成
new コマンドを使ってプロジェクトを作ります

```
ng new Rayyyy --style=sass
```


__--style=sass__で__css__ではなく__sass__を使うと指定しています。
何も指定しなければ通常通り__css__になります。

とりあえず、サーバー起動します。

```
npm start
```

http://localhost:4200/
にアクセスします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/109713/d52fd195-c0a3-bc75-1327-00e3cd39fd24.png)

とりあえず、初期画面です。

[次回](http://qiita.com/nrainiero/items/7e21523fbc520a7bb80a)は、[UIkit](https://getuikit.com/)というフレームワークを導入していきます。
sony製の深層学習ライブラリnnablaの感想

sony製の深層学習ライブラリ。
モォ動かしてる人がいるじゃないか。
http://qiita.com/miumiu0917/items/c8895c488aed8834ff1b

ってことで一応動かした。
動的計算グラフって書いてるし、chainer like。

```
sudo pip install nnabla
sudo pip install nnabla-ext-cuda
git clone https://github.com/sony/nnabla.git
```


#mnistサンプル

```
cd examples/vision/mnist/
python classification.py
2017-06-27 22:52:33,967 [nnabla][INFO]: Parameter save (hdf5): tmp.monitor/params_000000.h5
2017-06-27 22:52:34,625 [nnabla][INFO]: iter=9 {Training loss}=2.29262495041
2017-06-27 22:52:34,625 [nnabla][INFO]: iter=9 {Training error}=0.8546875
2017-06-27 22:52:35,254 [nnabla][INFO]: iter=19 {Training loss}=1.95494496822
2017-06-27 22:52:35,254 [nnabla][INFO]: iter=19 {Training error}=0.6015625
...
```


#imagenetサンプル
tiny-imagenet-200.zipってのダウンロードするけど、cpuで学習には結構時間かかる。

```
cd examples/vision/imagenet/
python classification.py -a4 -b64 -L34
2017-06-27 23:25:23,584 [nnabla][INFO]: Initializing CPU extension...
2017-06-27 23:25:24,034 [nnabla][INFO]: Running in cpu
2017-06-27 23:25:24,035 [nnabla][INFO]: DataSource with shuffle(True)
2017-06-27 23:25:24,334 [nnabla][INFO]: Using DataIterator
2017-06-27 23:25:24,336 [nnabla][INFO]: DataSource with shuffle(True)
2017-06-27 23:25:24,445 [nnabla][INFO]: Using DataIterator
2017-06-27 23:25:25,064 [nnabla][INFO]: Parameter save (hdf5): tmp.monitor.imagenet/param_000000.h5
```


#感想

cpuで動いたけどgpuで動かない。cudnn6.0の最新にしろってエラーのようだ。
めんどくさいのでまた今度にする。


```
ImportError: libcudnn.so.6: cannot open shared object file: No such file or directory
```

http://nnabla.readthedocs.io/en/latest/python/install_on_linux.html


cpuではすぐに動いた。cpuだとc++で高速に動いてそう。

cudaとの繋ぎこみはchainerのcupy見たく別ライブラリになってる。
https://github.com/sony/nnabla-ext-cuda
chainerからforkされたpytorchはライブラリ内でcudaファイルがたくさんあってそこで繋いでる。

海外のコミュニティ見てても、なんで出したの？why??
的なコメントが多数。

個人的には日本の企業なので応援したいので、時間があったら使っていこうかと思う。
SwiftのSelfキーワードの使い方まとめ

Swiftにおける`Self`キーワードについて、整理する意味も含めてメモします。
※小文字開始の`self`ではなく大文字開始の`Self`についてです。

# 概要
 - `Self`はクラスやプロトコルの定義内で、**その型自身**を表します。
 - プロトコル定義内では特に、その**プロトコルを準拠する型**を表します。

# どんな用途で使うの？
 - (1) protocol extensionを準拠する型で限定する
 - (2) protocol extensionを準拠する型のAssociatedTypeで限定する
 - (3) プロトコル定義内のメソッドの引数、戻り値、変数の定義
 - (4) クラス定義内のメソッドの戻り値の定義

## (1) protocol extensionを準拠する型で限定する
 - プロトコルを準拠する型をSelfで参照できる
 - Selfで参照した型が条件をみたす場合にのみextensionを有効にすることができる
 - 条件は準拠している他のプロトコルや継承しているクラスを指定可能

```swift
// プロトコルを準拠する型がSomeClassを継承しているクラスの場合のみ有効
extension SomeProtocol where Self: SomeClass { }

// プロトコルを準拠する型がOtherProtocolに準拠している型の場合のみ有効
extension SomeProtocol where Self: OtherProtocol { }
```

## (2) protocol extensionを準拠する型のAssociatedTypeで限定する
 - protocolを準拠する方のAssociatedTypeをSelf.{AssociatedType名}で参照できる
 - AssociatedTypeが条件をみたす場合にのみextensionを有効にすることができる
 - 条件は準拠している他のプロトコルや継承しているクラス、一致する型を指定可能

```swift
// SomeAssociatedTypeがSomeClassを継承しているクラスの場合のみ有効
extension SomeProtocol where Self.SomeAssociatedType: SomeClass { }

// SomeAssociatedTypeがOtherProtocolに準拠している型の場合のみ有効
extension SomeProtocol where Self.SomeAssociatedType: OtherProtocol { }

// SomeAssociatedTypeがSomeClassに一致する場合のみ有効
extension SomeProtocol where Self.SomeAssociatedType == SomeClass { }
```

## (3) プロトコル定義内のメソッドの引数や戻り値の定義
 - プロトコルを準拠する型をSelfとして引数や戻り値、変数の型に指定できる
 - EquatableプロトコルやBitwiseOperationsプロトコル等で利用されている

```swift
protocol SomeProtocol {
    // 引数の型をプロトコルを準拠する型にする
    func someMethod1(some: Self) -> Void

    // 戻り値の型をプロトコルを準拠する型にする
    func someMethod2() -> Self

    // 変数の型をプロトコルを準拠する型にする
    var someVariable: Self { get }
}

/// Equatableプロトコルの例
public protocol Equatable {
    public static func ==(lhs: Self, rhs: Self) -> Bool
}

/// BitwiseOperationsプロトコルの例
public protocol BitwiseOperations {
    public static func &(lhs: Self, rhs: Self) -> Self
    public static func |(lhs: Self, rhs: Self) -> Self
    public static func ^(lhs: Self, rhs: Self) -> Self
    prefix public static func ~(x: Self) -> Self
    public static var allZeros: Self { get }
}
```

## (4) クラス定義内でのメソッドの戻り値の定義

 - Selfはクラス定義内の場合、プロトコルと違い、戻り値の型としてのみ指定できる
 - サブクラスでもサブクラスの型を参照するため、再定義の必要がない
 - クラス名に依存しない書き方が出来るので、メソッドの再利用がし易い

```swift
class SomeClass {
    // 戻り値の型をSomeClassと書かず、Selfで指定
    // ファクトリメソッドなど、インスタンスを生成して返すメソッドなどで便利
    class func create() -> Self {
        return self()
    }
}
```
deployer で deploy:writable タスクがエラーになっても中断させないハック


`deploy:writable` タスクで権限変更できないディレクトリがある存在するとエラーになってしまうのですが、以下の方法で回避できます。

`writable_dirs`で権限を変更するディレクトリを指定できますが、配列の末尾に ` | echo` を追加してください。

```php
// deployer.php
set('writable_dirs', ['dir1', 'dir2', 'dir3', ' | echo']);
```

`writable_dirs`の要素はスペースで結合されて`chmod`の引数になります。末尾に`echo`コマンドをパイプで仕込んでおくと、コマンドの終了ステータスが必ず 0 になるので deployer が継続して処理してくれるようになります。

実行されるコマンドはこのようになります。

```bash
chmod 775 dir1 dir2 dir3 | echo
#echo $? => 0
```
[rails][css]文字数揃える方法をいくつか

## 文字数数えるだけでいいよってときはこれ。

```
"あいうえおかきくけこさしすせそ”.truncate 10
```

truncate: http://railsdoc.com/references/truncate

## １行にしたいときは、cssでこれ。

```css
            h3{
              //base
              text-align: center;
              font-size: 30px;

              //これ！
              white-space: nowrap;//改行禁止
              overflow: hidden;//はみ出たの隠す
              text-overflow: ellipsis;//はみ出た分「...」
            }
```

## 複数行で、かつ指定した行数を固定で表示したい場合は、cssでこれ。

```css
    h3{
      margin: 10px;
      font-weight: bold;
      &.lineclamp {
        /* config */
        line-height: 1.5;
        height: 3em;
        background-color: #fff;
        /* config end */
        position: relative;
        padding-right: 1.5em;
        overflow: hidden;
        word-wrap: break-word;
      }
      &.lineclamp:before {
        content: "...";
        position: absolute;
        right: 0;
        bottom: 0;
        display: inline-block;
        width: 1.5em;
      }
      &.lineclamp:after {
        content: "";
        position: relative;
        right: -1.5em;
        float: right;
        width: 1.5em;
        height: 100%;
        background-color: inherit;
      }
    }
```

もうchromeの表示だけでいいよっていうときは、cssでこれ。

```css
            p{
              overflow: hidden;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              height: 50px;/縦幅を指定すれば
            }
```
書籍『Ruby on Rails 5 超入門』【6章】ajax Yahoo!ニュースのヘッドライン RSSエラー

書籍通りに作成すると次のエラーが発生します。

REXML::ParseException (Missing end tag for 'meta' (got "head")

原因

http　→　https になっている

コード修正前
書籍

	require 'net/http'
	
	def index
	end

	def data
		url = URI('http://news.yahoo.co.jp/pickup/sports/rss.xml')
		http = Net::HTTP.new(url.host)
		response = http.get(url)
		@data = Hash.from_xml(response.body).to_json.html_safe
		logger.info @data
	end


コード修正後


　　require 'net/https'
　　def index
　　end

    def data
    	url = URI('https://news.yahoo.co.jp/pickup/sports/rss.xml')
		https = Net::HTTP.new(url.host,443)
		https.use_ssl = true
		https.verify_mode = OpenSSL::SSL::VERIFY_NONE　//証明書を検証しない
		https.verify_depth = 5
		response = https.get(url)
		@data = Hash.from_xml(response.body).to_json.html_safe
		logger.info @data
    	
    end
インデックスが使えない検索条件

いっつも忘れるのでいい加減Qiitaに書いとくことにした。初歩的な内容。

# 中間一致・後方一致のLIKE文

インデックスが使えないクエリ。

```中間一致.
SELECT ID FROM USER WHERE USER_NAME LIKE '%岡賢%'
```

```後方一致.
SELECT ID FROM USER WHERE USER_NAME LIKE '%岡賢一' 
```

これはインデックスが使える。

```前方一致.
SELECT ID FROM USER WHERE USER_NAME LIKE '長岡賢%' 
```

# インデックス列で演算をやっている

インデックスが使えないクエリ(PRICE列にインデックスが張られているものとする)。

```インデックス列で演算をやっている.
SELECT NAME FROM GOODS WHERE PRICE * 10 > 100000 
```

これはインデックスが使える(PRICE列にインデックスが張られているものとする)。

```右側に式を書けばOK.
SELECT NAME FROM GOODS WHERE PRICE > 100000/10
```

# IS NULLを使っている

PRICE列にインデックスが張られているものとする。

```インデックス列に対してISNULL.
SELECT NAME FROM GOODS WHERE PRICE IS NULL
```

# インデックス列に対して関数を使っている

PRICE列にインデックスが張られているものとする。
これに対して関数(MAX、MIN、LENGTH等)を使っている。

```インデックス列に対して関数を使っている.
SELECT NAME FROM GOODS WHERE MAX(PRICE) = 100000
```

# インデックス列に否定形を使っている

PRICE列にインデックスが張られているものとする。
これに対して否定形(<>、!=、NOT IN)を使っている。

```インデックス列に対して否定形を使っている.
SELECT NAME FROM GOODS WHERE PRICE <> 100000
```

# 参考
[SQL実践入門 高速でわかりやすいクエリの書き方 (WEB+DB PRESS plus) ](
https://www.amazon.co.jp/SQL%E5%AE%9F%E8%B7%B5%E5%85%A5%E9%96%80%E2%94%80%E2%94%80%E9%AB%98%E9%80%9F%E3%81%A7%E3%82%8F%E3%81%8B%E3%82%8A%E3%82%84%E3%81%99%E3%81%84%E3%82%AF%E3%82%A8%E3%83%AA%E3%81%AE%E6%9B%B8%E3%81%8D%E6%96%B9-WEB-DB-PRESS-plus/dp/4774173010)
Dockerでワードプレスのローカル環境を構築

# 概要
最近何かと流行りのDockerを使ってローカル環境のMacにワードプレスをインストールしてみる。

# キーワード
- Docker
- wordpress
- LAMP

# 目次
- Dockerをインストール
- プロジェクトの定義
- プロジェクトの起動
- ブラウザでワードプレスを立ち上げる
- 参考サイト

# Dockerをインストール
下記のサイトにアクセスしてDockerをインストールする。
[Install Docker for Mac](https://docs.docker.com/docker-for-mac/install/#download-docker-for-mac)![Screen Shot 2017-06-27 at 22.44.48.png](https://qiita-image-store.s3.amazonaws.com/0/167850/12bff570-051d-b3ef-88c7-70a9f2034a24.png)

ダウンロードしてきたファイルを解凍する。ファイルを開いてみると下記のような画面が開く。
<img width="417" alt="Screen Shot 2017-06-27 at 22.49.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/167850/27921569-2654-a396-23fd-7dae3a0542c3.png">

# プロジェクトの定義
###空のプロジェクトディレクトリを作成して、そのディレクトリに移動する。

```
$ mkdir my_wordpress
$ cd my_wordpress/
```
### docker-compose.ymlの作成
touchコマンドでファイルを作成して中身をvimコマンドで編集していく。

```
$ touch docker-compose.yml
$ vim docker-compose.yml
```

```
version: '3'

services:
   db:
     image: mysql:5.7
     volumes:
       - db_data:/var/lib/mysql
     restart: always
     environment:
       MYSQL_ROOT_PASSWORD: somewordpress
       MYSQL_DATABASE: wordpress
       MYSQL_USER: wordpress
       MYSQL_PASSWORD: wordpress

   wordpress:
     depends_on:
       - db
     image: wordpress:latest
     ports:
       - "8000:80"
     restart: always
     environment:
       WORDPRESS_DB_HOST: db:3306
       WORDPRESS_DB_USER: wordpress
       WORDPRESS_DB_PASSWORD: wordpress
volumes:
    db_data:
```

# プロジェクトの起動
$docker-compose up -dを実行する。

```
$ docker-compose up -d
Creating network "mywordpress_default" with the default driver
Creating volume "mywordpress_db_data" with default driver
Pulling db (mysql:5.7)...
5.7: Pulling from library/mysql
9f0706ba7422: Pull complete
2290e155d2d0: Pull complete
...
```

# ブラウザでワードプレスを立ち上げる
Docker for Macを使っているので、ブラウザでhttp://localhost:8000にアクセスしてみる。

下記の画面が立ち上がるので、日本語を選択してみる。
![Screen Shot 2017-06-27 at 23.13.48.png](https://qiita-image-store.s3.amazonaws.com/0/167850/77d0f5d7-cd87-1b70-1f8e-1ee396bebb2d.png)

続けるをクリックして次の画面に進む。

![Screen Shot 2017-06-27 at 23.15.09.png](https://qiita-image-store.s3.amazonaws.com/0/167850/96f205dd-75d8-1bc7-b9e2-879bced61c9d.png)

必要項目を記述してインストールを押す。

![Screen Shot 2017-06-27 at 23.17.08.png](https://qiita-image-store.s3.amazonaws.com/0/167850/ad6c6669-4a4c-48e1-2371-f33a377834c5.png)

ログインしてみる。
![Screen Shot 2017-06-27 at 23.18.18.png](https://qiita-image-store.s3.amazonaws.com/0/167850/5bcb8e7d-c34b-8f68-d138-934df5701fa3.png)

管理画面が出て来る。めちゃくちゃ早い。
![Screen Shot 2017-06-27 at 23.18.51.png](https://qiita-image-store.s3.amazonaws.com/0/167850/54ddceda-d467-99cf-77eb-ab4411bdd9cb.png)

# まとめ
すごく簡単にローカル環境にワードプレスの環境を構築できた。まだわからないことだらけなので、テーマの編集とかSEO対策とか色々いじってみたい。

# 参考サイト
[DockerでWordPress環境を構築する](https://eikatou.net/blog/3299.html)
API仕様書フォーマット（簡易版）

- 最小限のみ記載しています。（随時アップデートしていきます

---

# Sample　API

ここにAPIの概要を書くここにAPIの概要を書く
ここにAPIの概要を書くここにAPIの概要を書く


## Get a sample list

```
- GET /sample
```
### Parameters
| Name | Type | Required | Default |Description |
|:----:|:----:|:----:|:----:|-------------|
| required_id | int | ○ | 初期値です | 説明です説明です |
| any_id | int | | | 説明です説明です |
| any_string[] | string | | | 説明です説明です |


### Example　Request
```
/sample?required_id=1
```

### Example　Response
```
Status: 200 OK
```

```json
[
    {
        "id": 1, 
        "name": "AAA"
    }, 
    {
        "id": 2, 
        "name": "BBB"
    }, 
    {
        "id": 3, 
        "name": "CCC"
    }
]
```


---
参考：https://developer.github.com/v3/
　　　https://dev.twitter.com/rest/reference
日付や時間などの<option>を量産するjsスニペット(ejsを例に)

ejsとかpugでのselect量産をできるだけ楽したい。
ES2015と、ejs等のテンプレートエンジンを前提とした記事です。
キモとなるのは配列の作り方。

# やりたいこと
こんなHTMLがほしい。`<option>`全部書くのはやりたくない

```html
<select>
  <option value="2017">2017</option>
  <option value="2016">2016</option>
  <option value="2015">2015</option>
  <!--中略-->
  <option value="1908">1908</option>
</select>

<select>
  <option value="00:00">00:00</option>
  <option value="00:30">00:30</option>
  <option value="01:00">01:00</option>
  <!--中略-->
  <option value="23:30">23:30</option>
</select>
```

# 準備
- ES2015の動くNode.js環境
- (必要ならば)gulpやExpress等の環境
- ejsやpug等のテンプレートエンジン
- コンポーネント(下記のような感じ。以下、例はejs。pug等でも同様)

```html+erb:input-select.ejs
<%
var options = options ? options : [];
var selected = selected ? selected : false;
%>
<select>
  <% options.forEach(function (value, idx) { %>
    <option value="<%- value %>"><%- value %></option>
  <% }); %>
</select>
```

# つくってみる
## 2017〜1898


```html+erb:ejs
<%- include("/atoms/input/input-select", {  //input-select.ejsを呼び出し、optionsを渡す
  //2017 - kの部分を変更すれば昇順降順や開始年を変更できる
  options: [...Array.from(Array(120), (v, k) => 2017 - k)]
})
%>
```
↑が↓になる

```html:html
<select>
  <option value="2017">2017</option>
  <option value="2016">2016</option>
  <option value="2015">2015</option>
  <!--中略-->
  <option value="1898">1898</option>
</select>
```

- `...`は[spread operator](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_operator)
- `Array.from`は配列っぽいやつから配列を生成する
- `...` も `Array.from`もES2015

## 先頭は"--"、続いて1〜12

```html+erb:ejs
<%- include("/atoms/input/input-select", { //input-select.ejsを呼び出し、optionsを渡す
  //spread operatorは配列の途中の要素からでも動く
  options: ["--", ...Array.from(Array(12), (v, k) => 1 + k)]
})
%>
```
↑が↓になる

```html:html
<select>
  <option value="--">--</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <!--中略-->
  <option value="12">12</option>
</select>
```


## 00:00〜23:30

```html+erb:ejs
<%- include("/input-select", { //input-select.ejsを呼び出し、optionsを渡す
    options: [...Array.from(Array(48), (v, k) => ( ("00" + Math.floor(k / 2)).slice(-2) ) + ":" + ( k%2 == 1 ? "30" : "00") )]
  })
%>
```
↑が↓になる

```html:html
<select>
  <option value="00:00">00:00</option>
  <option value="00:30">00:30</option>
  <option value="01:00">01:00</option>
  <!--中略-->
  <option value="23:30">23:30</option>
</select>
```

- 先頭のゼロパディング(0で始まるように数字をうめる)は http://so-zou.jp/web-app/tech/programming/javascript/grammar/data-type/string/zero-padding.htm を参考にしました。
ESP32の罠 - SDMMCについて

ESP32でSDカードを動かすライブラリは二つあります。一つはSDライブラリ、もう一つはSDMMCライブラリです。SDライブラリはSPIペリフェラルを使ってSDカードと通信する方法で、一般的によく電子工作で行われている方法です。SDMMCライブラリはSDMMCペリフェラルというSDカード専用の4線式通信機能を使って通信する方法で、より高速に通信できます。ただしこれにはいくつかの罠があります。
[ESP-WROOM-32](http://ht-deko.com/arduino/esp-wroom-32.html)
[esp-idf 「SD Card example」](https://github.com/espressif/esp-idf/tree/master/examples/storage/sd_card#hardware)

#プルアップ
信号線はD2(IO12), D3(IO13), CMD(IO15), CLK(IO14), D0(IO2), D1(IO4)ですが、SDカード動作中には全ピンをプルアップする必要があります。さもなくばSDカードが正常動作しません。しかし実はこれと矛盾した罠があります。

#プログラムの書き込みができない！
ESP32はIO2をプルアップしているとプログラムの書き込みができない仕様になっています。したがってIO2はプログラムの書き込みが終わった後にプルアップする必要があります。そうなるように外付け回路を組んでもOKです。
[魔法の大鍋 ESP-WROOM-32](http://blog.eldhrimnir.com/?page_id=5193)

#ビルトインBASICが起動する！
ESP32はIO12をプルアップした状態で電源を入れるとイースターエッグのビルトインBASICが起動する仕様になっています。[HACKADAY：BASIC Interpreter Hidden in ESP32 Silicon](https://hackaday.com/2016/10/27/basic-interpreter-hidden-in-esp32-silicon/)
したがってESP32起動後にIO12をプルアップする必要があります。実はIO12は通常内部でプルダウンされていますが、内部プルアップ回路も持っており、起動後にプログラムでIO12をプルアップすることができます。SDMMCライブラリには起動後にプルアップするプログラムが入っているようなので、IO12は特に何も繋がなければ問題ない...ように見えます。

実はまた罠があります。SDカードの起動中にESP32がリセットされるとIO12のプルアップ状態がラッチされるようです。そしてそれはESP32の電源を落としても続きます。つまり外付けでプルアップしているわけでもないのに何度電源を入れてもビルトインBASICが起動します。これを止めるにはIO12をGNDに落として強制的にラッチを切ります。

回避方法はその他にもefuseを切る、4線式をやめて1線式で使うなどもあるようです。詳しくは[esp-idf 「SD Card example」](https://github.com/espressif/esp-idf/tree/master/examples/storage/sd_card#hardware)を参照下さい。

#ライセンス
SDカード専用の4線式通信機能を商用利用するにはライセンスが必要なようです。完成品を販売する場合は注意しましょう。

#その他
SDMMCライブラリという名前の割には、対応しているのはSDカードだけで、いまのところMMCカードには対応していないそうですｗ

あとはSDMMCライブラリの中にこのライブラリ用のピン配置のままでSPIモードで動く(SDMMCペリフェラルの1線式とはまた別らしい)ようなフラグだけはあるのですが、まだ実装されていないそうです。

ESP32は素晴らしい製品ですが、SDMMCはちょっと扱いが難しいです。初心者はSPIを使ったSDライブラリを使うことをお薦めします。
社畜ちゃんの漫画をまとめて入手するRubyスクリプト

社畜ちゃんとは、とっても可愛い女の子たちが、がんばって仕事に励む姿を描いた漫画作品です。後輩ちゃんの可愛さは、尋常じゃないです（ペカー）！
![160711Udemy_comic_02.jpg](https://qiita-image-store.s3.amazonaws.com/0/189330/a4dd1ad8-68e9-ea60-5ba3-885f0355287c.jpeg)
漫画は、Webで公開されています↓。是非、読んで見ましょう。
https://syachiku-chan.com/?page_id=228
「とても面白い！漫画のファイルを手元に置いておきたい！でも、量が多い...」
という人のために、ファイルをまとめて保存する（簡単な）スクリプトを作成しました。

```ruby:syachiku_chan.rb
#!/usr/bin/env ruby

require 'open-uri'
require 'nokogiri'

class Syachiku_chan_downloader

  def initialize
    @doc
  end

  def download_html
    url = 'https://syachiku-chan.com/?page_id=228'

    charset = nil
    html = open(url) do |f|
      charset = f.charset
      f.read
    end
    @doc = Nokogiri::HTML.parse(html, nil, charset)
  end

  def dl_main_story
    gallaly = @doc.css('div#foogallery-gallery-1662')
    max_episode_num = 0 #ダウンロードしている最新エピソードの番号
    latest_episode_num = 0 #今回の入手した最新のエピソード
    gallaly.css('a').each do |each|
      title = each.css('img').attribute('alt').to_s #タイトルの取得

      unless title.empty?
        episode_num = title.match(/\d+/)[0].to_i #話数の数値だけを取得
      else
        # imgタグにalt属性が存在しなかったときの処理
        title = each[:'data-caption-desc']
        episode_num = title.match(/\d+/)[0].to_i unless title.nil? #話数の数値だけを取得
      end

      if title.nil?
        #タイトル情報が存在しないとき
        title = "タイトル情報なし" # タイトル情報の取得は諦める
        episode_num = each[:'data-caption-title'].match(/\d+/)[0].to_i
      end

      next if episode_num <= max_episode_num
      url = each[:href]
      dl_file_name = format("%04d",episode_num)
      `wget -nc -O #{dl_file_name}.jpg #{url}`
      sleep(1)
      latest_episode_num = episode_num if episode_num > latest_episode_num
    end

  end

  def dl_sub_story
    gallaly = @doc.css('div#gallery-2')
    gallaly.css('a').each do |each|
      url = each[:href]
      `wget -nc #{url}`
      sleep(1)
    end
    gallaly = @doc.css('div#gallery-3')
    gallaly.css('a').each do |each|
      url = each[:href]
      `wget -nc #{url}`
      sleep(1)
    end
  end

  def do_download
    download_html
    dl_main_story
    dl_sub_story
  end
end

downloader = Syachiku_chan_downloader.new
downloader.do_download
```

スクリプトを動かすには、nokogiri(Rubyのgem)とwgetが必要になります。gemとかaptで入れましょう。
単行本も出版されているので、紙媒体で欲しい人は購入してみましょう（Webにはない漫画も収録されています）。
https://www.amazon.co.jp/gp/product/4048659073/ref=as_li_tf_il?ie=UTF8&camp=247&creative=1211&creativeASIN=4048659073&linkCode=as2&tag=vitaone0e-22
TypescriptでBackbone.jsを書く際に気をつけるポイント

この度、既存のBackbone.js環境をTypescriptに移行したので注意点などをご紹介します。
型定義はDefinitelyTypedから取得して使っています。

# Model
最大の問題は、Modelのgetメソッドの戻り値がany型になってしまうという点です。
このままだと型のメリットが全く受けられません。
そのため、getを使うのをやめてattributesの値を直接見るのが良いです。
内部的には[getメソッドはattributesの値を返しているだけ](https://github.com/jashkenas/backbone/blob/master/backbone.js#L446
)なので問題ないです。

まず以下のような抽象クラスを定義します

```ts
abstract class TypedModel<Props> extends Backbone.Model {
  public attributs: Props
}
```

これで、attributesの型がGenericsのProps型になりました。
後はこのTypedModelを継承してモデルを作ればオッケーです。

```ts
interface IUser {
  id: number;
  name: string;
}

class User extends TypedModel<IUser> {

}
```

# View
DefinitelyTypedにホストされている型定義を使っている場合、コンストラクタのシグネチャが決まっているので、追加のパラメータを渡したい場合はoverrideしてやる必要があります。
この際、constructorとinitializeの両方をoverrideしてやる点が注意です。

```ts
interface Options extends Backbone.ViewOptions<User> {
  foo: string;
}

class UserView extends Backbone.View<User> {
  private foo: string;

  // constructorとinitializeの両方にOptionsインターフェースを渡してあげる必要がある
  constructor(options: Options) {
    super(options)
  }
  
  initialize(options: Options) {
    this.foo = options.foo
  }
  
}

```

# Router
Viewと同様に、独自のパラメータを渡す場合はconstructorとinitialize両方をoverrideする点だけ注意です。

```ts
interface Options extends Backbone.RouterOptions {
  bar: string;
}

class AppRouter extends Backbone.Router {
  private bar: string;

  constructor(options: Options) {
    super(options)
  }

  initialize(options: Options) {
    this.bar = options.bar;
  }
}
```

# 終わりに
既にES2015環境が導入済みであれば、JSからの移行もそんなに大変ではないのでぜひやってみると良いと思います。
それなりに規模のあるアプリ(Viewが100近くあるくらい)でしたが1週間程度で移行を完了することが出来ました。
Reactなど別のフレームワークに移行するのと比べれば遥かに低コストで型の安心感が得られるのでおすすめです。
yhpg03 - Y字路巡り をPythonで解いてみる

http://nabetani.sakura.ne.jp/hena/ord3ynode/
で出題されたY字路巡りをPythonで解いてみる

BからAにたどり着いたところから始まって
辞書から次の目的値をひいてくる感じ。
地図が小さいからなんとかなったけど、大きくなると辛い。

```python:yhpg03.py
#!/usr/bin/env python3
# -*- coding:utf-8 -*-

#https://yhpg.doorkeeper.jp/
#http://nabetani.sakura.ne.jp/hena/ord3ynode/

def solve(data):
    beforePos = "B"
    currentPos = "A"
    result = "A"
    for nextData in data:
        nextP = nextPos(beforePos, currentPos, nextData)
        result = result + nextP
        beforePos = currentPos
        currentPos = nextP
    return result

def nextPos(beforePos, currentPos, nextData):
    #mapData = { beforePos+curPos : [l ,r, b]}
    mapData = {
        "AB" : ["C","E","A"],
        "AC" : ["F","B","A"],
        "AD" : ["E","F","A"],
        "BA" : ["D","C","B"],
        "BC" : ["A","F","B"],
        "BE" : ["F","D","B"],
        "CA" : ["B","D","C"],
        "CB" : ["E","A","C"],
        "CF" : ["D","E","C"],
        "DA" : ["C","B","D"],
        "DE" : ["B","F","D"],
        "DF" : ["E","C","D"],
        "EB" : ["A","C","E"],
        "ED" : ["F","A","E"],
        "EF" : ["C","D","E"],
        "FC" : ["B","A","F"],
        "FD" : ["A","E","F"],
        "FE" : ["D","B","F"],
    }

    data = {"l":0,"r":1,"b":2}
    return mapData[beforePos+currentPos][data[nextData]]


def test(data, expect):
    result = solve(data)
    if result == expect:
        print("成功: " + result + "/" + expect )
    else:
        print("失敗: " + result + "/" + expect )


test("b", "AB" )
test("l", "AD" )
test("r", "AC" )
test("bbb", "ABAB" )
test("rrr", "ACBA" )
test("blll", "ABCAB" )
test("llll", "ADEBA" )
test("rbrl", "ACADE" )
test("brrrr", "ABEDAB" )
test("llrrr", "ADEFDE" )
test("lrlll", "ADFEDF" )
test("lrrrr", "ADFCAD" )
test("rllll", "ACFDAC" )
test("blrrrr", "ABCFEBC" )
test("brllll", "ABEFCBE" )
test("bbrllrrr", "ABACFDEFD" )
test("rrrrblll", "ACBACABCA" )
test("llrlrrbrb", "ADEFCADABA" )
test("rrrbrllrr", "ACBABEFCAD" )
test("llrllblrll", "ADEFCBCADEB" )
test("lrrlllrbrl", "ADFCBEFDFCB" )
test("lllrbrrlbrl", "ADEBCBACFCAB" )
test("rrrrrrlrbrl", "ACBACBADFDEB" )
test("lbrbbrbrbbrr", "ADABABEBCBCFE" )
test("rrrrlbrblllr", "ACBACFCACFDAB" )
test("lbbrblrlrlbll", "ADADFDABCFDFED" )
test("rrbbrlrlrblrl", "ACBCBADFEBEFDA" )
test("blrllblbrrrrll", "ABCFDADEDABEDFE" )
test("blrllrlbllrrbr", "ABCFDABCBEFDEDA" )
test("lbrbbrllllrblrr", "ADABABEFCBEDEBCF" )
test("rrrrbllrlrbrbrr", "ACBACABCFDEDADFC" )
```
SourceTreeでpullもfetchもできなくなったときの対応

原因不明, 再現方法不明, その状態における解決方法のみ記載。

# 原因
不明。 未特定。

# 現象

* git 2.10.1を使用
* Mac
* fetchやpullができない。
    * fetchやpullを使用とすると延々と終わらない。（タイムリミットまで終わらない）
* Githubを使用
    * Githubへは、HTTPSを使用してた
    * 認証はOAuthを使用してた
    * Githubでは、二段階認証を有効にしている
* SourceTreeでは、[GPG](https://help.github.com/articles/signing-commits-using-gpg/)でサインしてる.


# 修正方法


Credentialが無いと仮定して再度ログインしてやればいい。
＝再度認証をしてやればいい。

`Preference` -> `Accounts` -> Githubのアカウント選択してRemoveボタン押下&Remove -> Addボタン押下 -> (追加)

# 他

## (無意味) SourceTreeが実行するFetchコマンドをTerminalから実行

いみない。



```
✗ git -c diff.mnemonicprefix=false -c core.quotepath=false -c credential.helper=sourcetree fetch --prune origin
git: 'credential-sourcetree' is not a git command. See 'git --help'.
```

## (無意味) Credential を確認

いみない。


```
✗ git help -a|grep credential-
  credential-cache          remote-fd
  credential-cache--daemon  remote-ftp
  credential-osxkeychain    remote-ftps
  credential-store          remote-http
  credential-gcloud.sh  flow
```

------------

しばらくSourceTreeでPush/Pull/Fetchできなくて、Git力が試された。
Expo ではじめる ReactNative 開発環境

某所で調べた資料

## Expo とは

https://expo.io/

ReactNative上で、JS のみで ios/android アプリを作る開発/ビルド環境。ネイティブプラグインが使えないという縛りを受け入れることで、アプリをQRコード経由で簡単に公開したり、共有したりできる。

ios/android のコードを書かなくていい、というか一切書けない。

参考: expo.ioを使ってリアルタイムにReact Nativeアプリを開発する http://amagitakayosi.hatenablog.com/entry/2017/04/18/120000

## Hello World

```
$ npm install -g exp
$ exp init my-native-app
$ exp start # 開発用ビルドの開始
$ exp build:ios # 本番用ビルド
```

テンプレートで blank か tabs を選べる。tabsはややリッチ過ぎるきらいがあるが、プッシュ通知のコードサンプルがついてくるので便利かも。

or

```
npm install -g create-react-native-app
create-recat-native init my-native-app
```

create-react-app の native 版。

## Expo での動作確認

- iOSシミュレーター on Mac
- iOS実機: ExpoClient を DL。起動時のQRコードをスキャン

Androidは試してないけど似たようなもののはず。

## Expo で得られるもの、失うもの

- ネイティブAPIはExpo側で用意されたものだけ使える
    - Google Map
    - カメラ
    - Audio
    - Video
    - Facebook Auth
    - プッシュ通知
    - 他、JSでできることはJSでやる

ReactNativeのパフォーマンスはそこまで良くないという話だが、どのへんが重いのかまだ調査しきれていない。

## Expo を使う場面

- プロトタイピング
- JSエンジニアの片手間

## Expo を選ぶべきでない場面

- 手触り感を突き詰めたい
- ネイティブAPIを使う要件が全く排除できない

## Expo からの脱出

CRNA 版の場合

```
npm run eject
```

ios/android のエントリポイントのJava/ObjCのコードが見えるようになるので、あとはXCode/AndroidStudio でビルドすればよい。

## 資料

- https://github.com/expo/awesome-expo
- http://qiita.com/YutamaKotaro/items/052768ca01a6369a8ad5

## コンポーネント集

- NativeBase

たぶんNativeBaseが一番使い勝手がいい。

## Router 

Webエンジニアがよくやる間違いだが、そもそもWebのブラウザヒストリを想定してはいけない。ネイティブアプリの抽象は基本的にタブとスタックが基本となる。

- react-native-router-flux
- react-navigation
- ExNavigation

expo で使う場合、 react-navigation がいいと思う。
ExNavigation はExpoの古いサンプルに載ってるが、公式に react-navigation に置き換えられるとのこと。

https://hackernoon.com/migrate-from-exnavigation-to-react-navigation-1af661ec5082

## 認証

基本的にJSでやる。よくある AccessToken をヘッダにつけるやつとかで解決することになると思う。

ExpoにはFacebookの認証UIだけ組み込みで入ってる。邪悪。

## 永続層

react-native の async-storage を使う。

https://facebook.github.io/react-native/docs/asyncstorage.html

## プッシュ通知

Expoにある

https://docs.expo.io/versions/v18.0.0/guides/push-notifications.html

## CI

PRごとにQRコードを貼ってくれるやつ。 https://github.com/FormidableLabs/appr

Jestのテストランナーが付いてる。個人的には、Jestあんまり好きじゃないが。
VirtualBox/vagrantフォルダ共有がうまくいかない

## エラーの内容

vagrant upした時、以下のエラーが出る...

```
/sbin/mount.vboxsf: mounting failed with the error: No such device
```

## いろいろ調べてみましたが...

```
フォルダ共有機能はGuest Additionsが提供している。
ホスト(VirtualBox)とゲスト(Guest Additions)でバージョン不一致があるとマウントエラーが起きる
```
らしい...

```Guest AdditionsのVersionとVirtualBoxのVersionが違うとマウントがうまくいかない```
らしい...

## 試したこと

### 1. kernel-devel のインストール

```No package kernel-devel-hogehoge.x86_64 available.```
というエラーの内容から調べた結果、以下を試してみた

```
yum update
yum install <http://rpm.pbone.net/で探した対象のバージョンのkernel-devel>
```
↑を実行してからvagrant reload

「No such device」のエラー解消せず。。

### 2. もともと入れていたプラグイン「vagrant-vbguest」の自動更新を停止する

vbguestの自動更新を行わないようにして、とりあえず解決しました。。

↓vagrantfile↓

```
config.vbguest.auto_update = false
```
↑を記載してからvagrant up

## 参考

[[Sy] 【解決した】Vagrantでvagrant-vbguestを使ってたら共有フォルダのマウントに失敗する](https://utano.jp/entry/2014/11/vagrant_guest_additions_update_error/)
[[Vagrant]Gueat Additionsの更新に失敗するの時の対応](http://www.fun-techlab.com/2016/07/21/vagrant_guest_additions_err/
)
MRDesignLabsのソースの取得について（備忘録）

# 大幅なリファクタリングが入りました。
6/27の朝頃にMRDesignLabsで大きなリファクタリングが入りました。その結果ソースの取得が前回から変わりました。私自身まだGitとか使いこなしていないのでその時のコマンドを備忘録に残しておきます。MRDesignLabsを触るときの参考にしてください。

## 何の修正がはいったか？
もともとMRDesignLabsとしては以下のリポジトリが公開されていました。

* https://github.com/Microsoft/MRDesignLabs_Unity

ですがこのリポジトリの内部構成に問題がありました。具体的なフォルダ構成見るとすぐわかります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/152548/80534bc4-b033-f8f4-a7e5-8d692f4440e2.png)

赤枠の部分がMRDesignLabsのメインのモジュール群を表すAssetなのですが、リポジトリ上は別々に格納されています。おかげで、MRDesignLabs_Unityの修正がMRDesignLabs_Unity_Examplesに反映されていなかったり、その逆が発生していたりと問題が発生していました。
そこで、MRDesignLabsのモジュールを別リポジトリにしたうえでサブモジュール化されました。この結果、少し手順を踏まないとソースを集められなくなっています。

## ソースの取得について

### リポジトリの場所
リポジトリは先ほど説明したようにMRDesignLabsがサブモジュールとして切り出された結果２つのリポジトリを利用する形に変わっています。

1. https://github.com/Microsoft/MRDesignLabs_Unity
2. https://github.com/Microsoft/MRDesignLabs_Unity_Tools

1の方がサンプルを含む以前のMRDesignLabsのリポジトリです。2の方が今回サブモジュールとして切り出されたMRDesignLabsのモジュール群になります。
こういう構造に変わったので、MRDesignLabsのpull Requestに関しては[https://github.com/Microsoft/MRDesignLabs_Unity_Tools](https://github.com/Microsoft/MRDesignLabs_Unity_Tools)で実施する必要があります。

### gitコマンドについて
MRDesignLabsがサブモジュール化されたため、クローンの後、サブモジュールの更新をしなければすべてのコードを取得できません。以下の順でコマンドを実行することで取得できます。

```
> cd [任意のフォルダ]
> git clone https://github.com/Microsoft/MRDesignLabs_Unity
> cd MRDesignLabs_Unity
> git submodule init
> git submodule update
```

## その他
なんとなく、大雑把に急造でやってる感があるのでまた変わるかも？例えば、HoloToolkitはまだ別々だったりと色々気になるところはあるのですが。。。
webpackにfont-awesomeを読み込ませる

webpackにfont-awesomeを読み込ませる方法を調べたところ、以下の3つの方法がありました。
最初の方法が一番良さそうですが、今回はフロントエンドに疎く簡単な一番最後の方法を採用しました。

# webpack.config.jsにfont-awesomeの設定を記載する

こちらのgistを参考にすると良さそうです。gistが長いためURLのみ載せます。

https://gist.github.com/Turbo87/e8e941e68308d3b40ef6#file-webpack-config-js

# [Justineo/vue-awesome](https://github.com/Justineo/vue-awesome)

https://github.com/Justineo/vue-awesome

以下のようにコンポーネントのようなイメージでfont-awesomeを利用できるモジュールです。
ただ、今回の場合は既存のソースで ` fa-xx ` などが少なからずあることから、書き換えコストを考えて採用しませんでした。

```
<!-- basic -->
<icon name="beer"></icon>

<!-- with options -->
<icon name="refresh" scale="2" spin></icon>
<icon name="comment" flip="horizontal"></icon>
<icon name="code-fork" label="Forked Repository"></icon>

<!-- stacked icons -->
<icon label="No Photos">
  <icon name="camera"></icon>
  <icon name="ban" scale="2" class="alert"></icon>
</icon>
```
# [gowravshekar/font-awesome-webpack](https://github.com/gowravshekar/font-awesome-webpack)

betaということとあまりメンテされてないため積極的に導入したくないですが、今回はこちらを利用してみました。
モジュールの内容としては1.の方法を隠蔽してくれているようなモジュールだと思います。

font-awsomeを利用するために必要なのは次の2つの作業だけです。

` npm install --save font-awesome font-awesome-webpack url-loader `

url-loaderをインストールしていないと ` npm run dev ` の際に以下のエラーがはかれるため先に入れておきます。

```
ERROR in ./~/font-awesome-webpack/~/css-loader!./~/less-loader!./~/font-awesome-webpack/font-awesome-styles.loader.js!./~/font-awesome-webpack/font-awesome.config.js
Module not found: Error: Cannot resolve module 'url-loader' in /app/web/node_modules/font-awesome-webpack
```

次にwebpack.config.jsを修正したらおしまいです。

```
module.exports = {
  module: {
    loaders: [
      // the url-loader uses DataUrls.
      // the file-loader emits files.
      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
    ]
  }
};
```

# 元記事

[webpackにfont-awesomeを読み込ませる](http://tackeyy.com/blog/font-awesome-with-webpack)
jar ファイルから Class#getResource でファイルを呼び出すと Not Found になってクソほどはまった備忘録

## 問題事象

Java の何の変哲も無いプロジェクトで、 resources ディレクトリにバイナリファイルを配置。

```
FileInputStream stream = new FileInputStream(getClass().getResource("/hoge.bin").getPath());
```

というような形で呼び出して使うプログラムを書いた。 IDE では問題なく動いているので、 mvn で jar に固めて外部から呼び出すと、 Not Found Exception が発生。

jar を解凍してみると、間違いなく `hoge.bin` は直下に入っている。同じディレクトリにある他の properties ファイルなどは読み込めている。。。

## 解決策

`Class#getResource` ではなく、 `Class#getResourceAsStream` を使う。

```
InputStream stream = getClass().getResourceAsStream("/hoge.bin");
```

InputStream の使い方に応じて、その後のプログラムも修正は必要になることがある。

## Why?

ここに回答： https://stackoverflow.com/a/941785
jar で固めたファイルは、個別ファイルとしては扱えず、 Stream の形で参照する必要があるということ。
もうちょっと真面目なドキュメントとか読みたいが、クソほどはまって疲れたのでまた今度。

## なんでクソほどはまったか

maven で管理された複数プロジェクト構成になっており、エントリはプロジェクト A だけど、 resouces はプロジェクト B のもの、という構成だったので、自分の設定不備かと思って問題特定に時間がかかった。
[.NET] USBデバイスを識別する文字列の取得

# 注意
この投稿は完全にCypressのCyUSB.dllに依存しており、一般的な解法ではない。

# 前書き
CypressのFX2やFX3と通信するために用意されているCyUSB.dllでは、現在通信しているUSBデバイスを独占する機能がないようだ。言いかえると、多重起動した他プロセスの同アプリケーションから現在通信中のUSBデバイスを隠したければ、それは自分でやるしかない。

独占を処理するための排他制御には、Mutexを使用することが考えられる。Mutexは名前を示す文字列でもって、現在排他制御中かどうかを識別する。
すると、「現在接続中のUSBデバイスを一意に識別する文字列」を取得しなければならないことがわかる。この値はプロセス間で共通でなければならない。

# 問題
CypressのCyUSB.dllを使用して、どのようにUSBデバイスを一意に識別する文字列を取得するか。

# 解法
USBDeviceクラスのPathプロパティを使用する。

このプロパティは、SetupDiGetDeviceInterfaceDetail()が返すDevicePathを返すようだ。
(正確には、SP_DEVICE_INTERFACE_DETAIL_DATA型構造体のDevicePathメンバ)
このDevicePathは、CreateFileなどのWin32関数に渡すことでデバイスにアクセスすることができる。すなわち、デバイス間でユニークな識別子であると言える。

USBDeviceクラスは、オブジェクト間を比較するEquals()メソッドの中でふたつのデバイスのPath文字列を比較しているようなので、この目的で使用しても問題ないだろう。なお、肝心のPathプロパティの説明を読んでもこういったことはまるでわからなかった。
使っていないセキュリティグループを洗い出す

コンソールからセキュリティの設定をしていると、作った覚えのないVPCセキュリティグループが氾濫することがあります。
とりあえず以下のようなコマンドで洗い出し、整理しましょう。

```shell-session
# セキュリティグループの一覧を取得
$ aws ec2 describe-security-groups --output json | jq -r '.SecurityGroups[].GroupId' | sort > sglist
```

```shell-session
# インスタンスにアタッチされているセキュリティグループを取得
$ aws ec2 describe-instances --output json | jq -r '.Reservations[].Instances[].SecurityGroups[].GroupId' > tmp
$ aws elb describe-load-balancers --output json | jq -r '.LoadBalancerDescriptions[].SecurityGroups[]' >> tmp
$ aws elbv2  describe-load-balancers --output json | jq -r '.LoadBalancers[].SecurityGroups[]' >> tmp
$ aws rds describe-db-instances --output json | jq -r '.DBInstances[].VpcSecurityGroups[].VpcSecurityGroupId' >> tmp
$ aws elasticache describe-cache-clusters --output json | jq -r '.CacheClusters[].SecurityGroups[].SecurityGroupId' >> tmp
$ cat tmp | sort | uniq > inuse
```

```shell-session
# 差分を確認
$ diff sglist inuse
```
Docker で MySQL コンテナーがなぜか起動できない問題

Ubuntu 上でなぜか MySQL コンテナーが起動せず、ハマりました。ワークアラウンドをメモしておきます。


再現環境
----
- Ubuntu 16.04.2 LTS 64bit (on Vagrant)


現象
----
以下のような docker-compose.yml を作成して、 `docker-compose up -d db` で起動しようとしても、 `Exit 1` で終了してしまいます。

```yaml:docker-compose.yml
version: '2'
services:
db:
    image: mysql:5.6
    ports:
        - "3302:3306"
    environment:
        - TZ=JST-9
        - MYSQL_USER=foo
        - MYSQL_PASSWORD=foo
        - MYSQL_ROOT_PASSWORD=foo
        - MYSQL_DATABASE=foo
    volumes:
        - ~/foobar/db/mysql/dump/:/docker-entrypoint-initdb.d/
        - ~/foobar/db/mysql/conf/:/etc/mysql/conf.d
    privileged: true
    networks:
        - datastore
```

起動してみる:

```sh
$ docker-compose up -d db
Starting db

$ docker-compose ps
     Name                  Command             State            Ports          
------------------------------------------------------------------------------
db               docker-entrypoint.sh mysqld   Exit 1 
```

起動時のエラーログは以下:

```sh
$ docker-compose logs db
Attaching to db
db  | 
db  | ERROR: mysqld failed while attempting to check config
db  | command was: "mysqld --verbose --help --log-bin-index=/tmp/tmp.BTfnm2u97W"
db  | 
db  | mysqld: error while loading shared libraries: libpthread.so.0: cannot open shared object file: Permission denied
db  | 
db  | ERROR: mysqld failed while attempting to check config
db  | command was: "mysqld --verbose --help --log-bin-index=/tmp/tmp.Q0noJONZOp"
db  | 
db  | mysqld: error while loading shared libraries: libpthread.so.0: cannot open shared object file: Permission denied
```

なぜか共有ライブラリが `Permission Denied` でエラーとなっています。


原因
----
Ubuntu (Debian) では AppArmor というセキュリティ機構が動いており、これが Docker の priviledged モードを阻害していました。

`privileged: true` にすると、 Docker 内のコンテナーがホストとほぼ同じ権限を持つことができ、例えば Docker in Docker のような環境を構築できます。一方でコンテナー外のリソースまでアクセス可能になってしまい、コンテナー間の疎結合を壊してしまうので、開発用途などを除いて通常は使いません。

ホスト OS 上に MySQL がインストールされている状態で、 Privileged モードを有効にして MySQL コンテナを起動すると、 AppArmor が「許可していないリソース上で MySQL が動作している」と認識し、実行をブロックするようです。


解消方法
----
以下のいずれかの方法で解消が可能です。

### ホストから MySQL を削除する

```sh
sudo apt remove mysql-server
```

### AppArmor の監視から MySQL を除外する
```sh
sudo ln -s /etc/apparmor.d/usr.sbin.mysqld /etc/apparmor.d/disable/
sudo apparmor_parser -R /etc/apparmor.d/usr.sbin.mysqld
# (単純に /etc/apparmor.d/usr.sbin.mysqld を rm しても OK ですが、上記のようにするのが Ubuntu の流儀)
```

複雑な問題ですね。


補足
----
そもそも Privileged を有効にする必要性がよくわかりませんでした。 MySQL コンテナーならデータを入れるだけだし、 networking さえ設定しておけば Privileged は無効にしたままで十分だと思うんですが…。

別チームの人がこの docker-compose.yml を書いたんですが、何がしたかったんでしょうか？今度問い詰めてみます。


参考
----
- [Mysql, Privileged mode, cannot open shared object file · Issue #7512 · moby/moby](https://github.com/moby/moby/issues/7512)
  - https://github.com/moby/moby/issues/7512#issuecomment-61787845 がワークアラウンド
- https://docs.docker.com/engine/reference/run/#runtime-privilege-and-linux-capabilities
- [Docker privileged オプションについて - Qiita](http://qiita.com/muddydixon/items/d2982ab0846002bf3ea8)
- [AppArmor security profiles for Docker | Docker Documentation](https://docs.docker.com/engine/security/apparmor/)
Githubの2段階認証を実施してgitコマンドが使えないときにやったこと

# Githubの2段階認証を実施してやったこと


## Githubの2段階認証(Two-Factor Authentication)とは？

まずは2段階認証の説明など

https://help.github.com/articles/about-two-factor-authentication/

Github上のアカウントのセキュリティ向上のために、パスワードによるログインだけでなく2段階目の認証を追加出来る

### 2段階認証の設定方法

細かい設定については記載しないが、まずはGithubのサイトにログインし、アカウントの設定画面から設定可能
(https://github.com/settings/profile)

設定項目の「Security」から設定可能

## gitコマンドでの利用

### 2段階認証とgitコマンド

素朴な疑問として、gitコマンドで2段階認証ってどうするの？というところがある
対策としては `Personal access tokens` を利用すべし

### Personal access tokens

2段階認証を設定しているGithubアカウントにて、Githubサイトの設定ページ(https://github.com/settings/profile) にアクセスしPersonal asccess toensを取得する

作成時に「どこまでの権限を付与するか」のチェック項目があるが、gitコマンドでの操作であればとりあえず 
`repo`
があれば大丈夫

![スクリーンショット 2017-06-27 18.44.08.png](https://qiita-image-store.s3.amazonaws.com/0/20943/e1bd69a6-07b9-9620-f749-e16e3efd8ebd.png)

ここから `Generate token` すると token(40文字の英数字)が発行される

### gitコマンドでの利用

通常のgitコマンドセットアップや利用開始と同じような流れで、パスワード入力の箇所でaccess tokenそのものを入れるだけである
以下はgit cloneしようとしたときのサンプル

```
$ git clone https://github.com/sample.git
Cloning into 'sample'...
Username for 'https://github.com': nmorioka
Password for 'https://nmorioka@github.com':(access token:40文字の英数字)
```

あとは他所(Source Treeなど)でも利用出来るように
`git credential-osxkeychain`
あたりを設定しておけば良いはず

https://help.github.com/articles/caching-your-github-password-in-git/
marpで数式を書くにあたって

# 概要
最近[Marp](https://github.com/yhatt/marp)というmarkdownでスライドを書けるアプリを多用している。
これに関していろいろ言いたいことがあるけど、とりあえず数式とかあるあまり凝らなくていいスライドを作るのに向いていると思う。

数式を書くとき少し詰まることがあるのでそのメモをば
(ほぼkatexの話しかしないが)

# TL;DR;
これにあるやつなら使える
https://khan.github.io/KaTeX/function-support.html

# 数式について

marpは数式をレンダリングをするとき[katex](https://khan.github.io/KaTeX/)というライブラリを使っている。
latex記法で書いた数式をレンダリングするライブラリはいろいろあるけど(MathJaxなど)、他と違って**依存関係なし**で**高速**に書ける。
ただしlatexの記法すべてが使えるわけではないので注意が必要。
上記リンクに書いてある機能は対応されているので、数式がレンダリングされない時はこれを見るといい。

以下は個人的にハマったところ

## プレーンな文字列
latexで数式中にプレーンな（イタリックにしない）文字列を入れる場合mboxを使うと思うが、これはkatexは対応していない。
代わりにtextというのがある。

```latex
% latex
\mbox{hoge}
% katex
\text{hoge}
```

## 複数行の数式
katexでは複数行を書くには`\begin{}\end{}`を使う必要がある。

marpで書く場合以下のようにしたら出来る

```markdown
$$
\begin{aligned}
   a&=b+c \\
   d+e&=f
\end{aligned}
$$
```
---

他になにか詰まったら追記する。
MT4　カオスフラクタルの表示について

mql初心者ですどうぞ宜しくお願い致します。今まで使っていたプラットフォームでデフォルトとして入っていたビル・ウィリアムズのFractalsの変更につきまして以前使われていたチャートウィンドウでのアロー表示を作ろうと思い初めてmqlに挑んでいましたところ、まだ全く関数の使い方になれておらず、エラーはないのですがアロー表示が出来ないと言うところで止まっております。どうぞご指導ご鞭撻の程宜しくお願い致します。
#property indicator_chart_window
#property indicator_buffers 2

double UpperFractal[];
double LowerFractal[];

extern int Period = 5;

int init()
{
    SetIndexBuffer(0,UpperFractal);
    SetIndexBuffer(1,LowerFractal);

    return(0);
}
int start()
{
    int limit = Bars-IndicatorCounted();

    for(int i=limit-1; i>=0; i--)
    {
       double UpperFractal = iFractals(NULL,0,1,5);
       SetIndexStyle(0,3,0,1,DarkGray);
       double LowerFractal = iFractals(NULL,0,2,5);
       SetIndexStyle(1,3,0,1,DarkGray);
    }
    return(0);
}

表示の仕方が分かりません、出来ましたらvoidの使い方や入れこむ場所など教えて頂けると幸いです。
基本的なGit Command

# 内容
基本的なgit commandについて。

## gitについて、その特徴
- プログラムソースなどの変更履歴を管理。
- ファイルの状態の好きな時に更新履歴として保存しておくことができる。

## よく使うgit command
1. git init
	- リポジトリを作成
2. git clone
	- 既存リポジトリの複製を作成
3. git fsck
   - リポジトリの破損箇所を特定
4. git gc
   - リポジトリ内のオブジェクトの圧縮（pack）や不要なオブジェクトの破棄などを行う
5. git status
   - 変更が加えられたファイルを表示
6. git diff
   - ファイルに加えられた変更点をdiff形式で表示
7. git add .
   - コミットするファイルを指定
8. git commit
   - 変更点をコミット
9. git commit -a -m "コミットメッセージ"
   - 変更が加えられたファイルを自動で検出し、""内のコミットメッセージを付け加えてコミット
10. git log
   - コミットログを閲覧
11. git reset
   - 直前のコミットを取り消す
12. git commit --amend
   - 直前のコミットを訂正
13. git revert <コミット名>
   - 作業ツリーを指定したコミット時点の状態にまで戻し、コミットを行う。引数にはコミットを指定するハッシュ文字列もしくはタグ名などを指定。
14. git branch <ブランチ名>
   - ブランチ情報の表示、ブランチの作成
15. git checkout
   - ブランチの切り替え
16. git show-branch
   - ブランチの作成/変更/マージ履歴を表示
17. git merge ＜変更点の取り込み元ブランチ＞
   - ローカルブランチのマージ
18. git stash
   - 現在の作業ツリーの状態を一時的に保管(退避)
19. git rebase ＜派生元ブランチ＞
   - ブランチの派生元（上流）を変更
20. git pull
   - 公開リポジトリ(githubなど)に自分のリポジトリの内容を送信

#### 参考
https://mag.osdn.jp/09/03/16/0831212
http://qiita.com/konweb/items/621722f67fdd8f86a017
http://www.backlog.jp/git-guide/
おみくじアプリをES6で書いてみる 

# JavaScriptでおみくじを作ろうをES6で書いてみました。

# 概要

復習がてらドットインストールの「JavaScriptでおみくじを作ろう」をES6で書いてみました。


```js:main.js
(() => {
  'use strict';

  const btn = document.getElementById('btn');

  btn.addEventListener('click', () => {
    const num = Math.random();

    if (num < 0.01) {
      btn.textContent = '大吉';
    } else if (num < 0.1) {
      btn.textContent = '末吉';
    } else {
      btn.textContent = '中吉';
    }
  });

  btn.addEventListener('mousedown', () => {
    btn.classList.add('pushed');
  });

  btn.addEventListener('mouseup', () => {
    btn.classList.remove('pushed');
  });
})();
```
## 今回のES6への書き換えポイント

### 変数宣言

ES6では「const」や「let」による変数宣言が可能です。再代入が必要な場合を除いて基本的には「const」を使う、というのが良いそうです。参考[var, let, constの使い分けについて](http://analogic.jp/var-let-const/)

- const　再代入不可
- let　　再代入可能

### アロー関数

「function」式より短い構文で関数を書くことができます。

```js:ES5
btn.addEventListener('mousedown', function() {
    this.classList.add('pushed');
  });
```

```js:ES6
btn.addEventListener('mousedown', () => {
    btn.classList.add('pushed');
  });
```

### アロー関数内のthisの扱い

通常の無名関数とは「this」の扱いが異なります。「this」の参照は関数の定義時に決定されます。その為、下記のようにアロー関数で「function」式のように「this」を扱うと「undefined」となります。

```js
const btn = document.getElementById('btn');
btn.addEventListener('click', () => {

    const num = Math.random();

    if (num < 0.01) {
      this.textContent = '大吉';
    } else if (num < 0.1) {
      this.textContent = '末吉';
    } else {
      this.textContent = '中吉';
    }
  });
```

上記の状態を回避するには、下記のようにします。

```js
const btn = document.getElementById('btn');
btn.addEventListener('click', () => {

    const num = Math.random();

    if (num < 0.01) {
      btn.textContent = '大吉';
    } else if (num < 0.1) {
      btn.textContent = '末吉';
    } else {
      btn.textContent = '中吉';
    }
  });
```

# 後書き

非常に簡単な内容ではありますが、細かいところからES6で書き直す様に社内でも共有していきたいと思います。
(モダンブラウザではほとんどのES6の構文が対応してきていますね。)

# 参考にさせていただきました
- [var, let, constの使い分けについて](http://analogic.jp/var-let-const/)
- [JavaScriptの「this」は「4種類」？？](http://qiita.com/takeharu/items/9935ce476a17d6258e27)

# GitHub

[GitHub](https://github.com/myateke/jsapp)