OmniAICreator/Qiita-1.07M huggingface dataset:
[初心者向け]Java8ラムダの基本をサクッと理解する

## この記事は？
世間ではすでにJava9がリリースされていますが、Java8で追加されたラムダ式をもう一度おさらいしたい人のための記事です。自分用まとめも兼ねてます。
間違いなどあったら指摘していただけるとありがたいです！

## ラムダ、ラムダ式とは？
Java8で変更された大きな点がラムダ式です。
もともと数学では「関数を変数のように扱って演算する」と言う考え方があり、その変数としてよくλ（ラムダ）と言う名称が使われているとのこと。
この数学的な考え方をJavaでも取り入れたのがJavaのラムダ式で、意味合いとしては「値として扱える関数の表現」といったものというのがわかりやすいと思います。

例えば以下のようなコードを指します。
```(p) -> (p.getAge()) < 30)
```
これは関数にpを入れるとpの年齢が30未満かが返ってくることを表す式です。

## ラムダ式を書いてみよう
サンプルとなるラムダ式を書いて、そのコードを分解してくことでラムダ式を理解していきましょう。

```java:LambdaSample.java
public class LambdaSample {
    public static void main(String[] args) {
        Runnable r = () -> System.out.println("Hello Lambda!");
        r.run();
    }
}
```
上の例を実行してみると以下のような結果が出力されます。
```Hello Lambda!```

ラムダ式で書かれたコードは以下です。
``` () -> System.out.println("Hello Lambda!")
```



## ラムダ式をJDK8以前の書き方で書いてみると・・・
このLambdaSample.javaをJDK8以前の書き方をすると以下のようになります。

```java:RunnableSample.java
public class RunnableSample {
    public static void main(String[] args) {
       Runnable r = new Runnable() {
           @Override
           public void run() {
               System.out.println("Before Lambda!");
           }
       };
        r.run();
    }
}
```

LambdaSample.javaでは以下の部分をラムダ式に置き換えています。

```java:JDK8以前
new Runnable() {
           @Override
           public void run() {
               System.out.println("Before Lambda!");
           }
       }
```
```java:JDK8 
() -> System.out.println("Hello Lambda!")
```
コード量がだいぶ減りましたね。

このJDK8以前で書かれているコードは「無名クラス（匿名クラス）」とも言います。
つまりラムダ式とは「インターフェースを実装した無名クラスのオブジェクトを書き換えたもの」と言えます。


## 参考図書・サイト
http://java-code.jp/106
https://qiita.com/sanotyan1202/items/64593e8e981e8d6439d3
[Java8ではじめる「ラムダ式」](https://www.amazon.co.jp/Java8%E3%81%A7%E3%81%AF%E3%81%98%E3%82%81%E3%82%8B%E3%80%8C%E3%83%A9%E3%83%A0%E3%83%80%E5%BC%8F%E3%80%8D-I%E3%83%BB-BOOKS-%E6%B8%85%E6%B0%B4-%E7%BE%8E%E6%A8%B9/dp/4777518418/ref=sr_1_2?ie=UTF8&qid=1508761078&sr=8-2&keywords=java8)
[Javaプログラマーなら習得しておきたい Java SE 8 実践プログラミング](https://www.amazon.co.jp/Java%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E%E3%83%BC%E3%81%AA%E3%82%89%E7%BF%92%E5%BE%97%E3%81%97%E3%81%A6%E3%81%8A%E3%81%8D%E3%81%9F%E3%81%84-Java-SE-8-%E5%AE%9F%E8%B7%B5%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0-ebook/dp/B00VM0FMIW/ref=sr_1_3?ie=UTF8&qid=1508761078&sr=8-3&keywords=java8)
【JVM】jstatでつまづいた時のまとめ

#はじめに
jstatをつかった際に詰まったことをまとめる

#jstat起動時のつまづき
リモートデスクトップでjstatを使おうとしたら以下のようなエラーが帰ってきた
1234はJVMのPID

```cmd:cmd
>jstat -gcutil 1234 1000
1234 not found
```

##結論
リモートデスクトップでjstatを起動するときは
「PsEsec」を使わないとだめらしい

##手順
### PsEsecのダウンロード

[PsExec](https://technet.microsoft.com/ja-jp/sysinternals/bb897553)

上のページからPsEsecをダウンロードして
リモートデスクトップ上の任意のフォルダに格納
今回は`C:\Program Files\PSTools`にしました。

### パスを通す
`C:\Program Files\PSTools`
これを環境変数のシステム環境変数の`Path`に追加

これでできるようになっているはずです。

##jstatの実行

```cmd:cmd
C:\Program Files\PSTools>PsEsec64.exe -s jstat -gcutil 1234 1000
```
リモートデスクトップのOSが64bitだったため`PsEsec64.exe`を使用しました。
32bitの場合は`PsEsaec.exe`で行けると思います。

#出力結果のつまづき
ヘッダーの意味が分からなかったので調べた結果をまとめました。

[jstat](https://docs.oracle.com/javase/jp/8/docs/technotes/tools/unix/jstat.html)
この中の一部を抜粋

-gcutil option
ガベージ・コレクション統計データのサマリー

S0: Survivor領域0の使用率(現在の容量に対するパーセンテージ)。

S1: Survivor領域1の使用率(現在の容量に対するパーセンテージ)。

E: Eden領域の使用率(現在の容量に対するパーセンテージ)。

O: Old領域の使用率(現在の容量に対するパーセンテージ)。

M: メタスペースの使用率(現在の容量に対するパーセンテージ)。

CCS: 圧縮されたクラス領域の使用率(パーセンテージ)。

YGC: Young世代のGCイベントの数。

YGCT: Young世代のガベージ・コレクション時間。

FGC: フルGCイベントの数。

FGCT: フル・ガベージ・コレクションの時間。

GCT: ガベージ・コレクションの総時間。

S0はSurviverのFrom
S1はSurviverのTo
FromからToで使用率の遷移が分かる

OはOldの使用率
徐々に使用率が上がっていく

Mはネイティブメモリ
以前のヒープ領域といわれていた場所
16エクサバイトまで確保することが可能

この4つが分かればリソース状況が分かると思います。
Laravel/Lumenでログフォーマット変更

# 結論

いい加減英語のページを毛嫌いしないで公式ドキュメント読め。
Laravelの軽量フレームワークLumenで、Laravelと同じように設定したらなかなか動かず悲しい思いをしたメモというか懺悔的な。  

公式ドキュメントにバッチリ書いているのでハマる人はいないと思いますが、もしいたら参考になればと


# Laravel でのログフォーマット設定

編集するファイルは`bootstrap/app.php`。
最後にフォーマットを指定する記述を追記します。

```bootstrap/app.php
//...最後の方
$app->configureMonologUsing(function($monolog) {  
    $log_level = \Monolog\Logger::DEBUG;  
    $log_format = '%datetime%,' . getmypid() . ",%level_name%,%message%,%context%,%extra%\n";
    $log_date_format = 'Y-m-d H:i:s.u';

    $ip = new \Monolog\Processor\IntrospectionProcessor(
        $log_level,
        [
            'Monolog\\',
            'Illuminate\\',
        ]
    );
    $monolog->pushProcessor($ip);

    $monolog->pushHandler($handler = new \Monolog\Handler\StreamHandler(storage_path('logs/laravel.log'), $log_level));
    $handler->setFormatter(new Monolog\Formatter\LineFormatter($log_format, $log_date_format , true, true));
});

return $app;
```  

上記の設定で、ログにプロセスIDを、ログの日時をマイクロ秒まで表示させるよう設定できました。  
この辺りはちゃんとLaravel日本語の公式ドキュメントに書いています。（[参考](https://readouble.com/laravel/5.5/ja/errors.html)）


# Lumen でのログフォーマット設定

Lumenも追記するのは同じファイル、同じ個所です。

```bootstrap/app.php
//...最後の方
$app->configureMonologUsing(function($monolog) {  
    $log_level = \Monolog\Logger::DEBUG;  
    $log_format = '%datetime%,' . getmypid() . ",%level_name%,%message%,%context%,%extra%\n";
    $log_date_format = 'Y-m-d H:i:s.u';

    $ip = new \Monolog\Processor\IntrospectionProcessor(
        $log_level,
        [
            'Monolog\\',
            'Illuminate\\',
        ]
    );
    $monolog->pushProcessor($ip);

    $monolog->pushHandler($handler = new \Monolog\Handler\StreamHandler(storage_path('logs/laravel.log'), $log_level));
    $handler->setFormatter(new Monolog\Formatter\LineFormatter($log_format, $log_date_format , true, true));

    return $monolog;
});

return $app;
```

同じ設定の修正ですが違う箇所があります。
そうです。最後の

```
 return $monolog;
```  

です。
Laravelと違い、これを返さないと`app('Psr\Log\LoggerInterface')`に値が入らず、ログインスタンスがnullになってしまいます。

しっかりと英語の公式ドキュメントに書いてありました。。。（[参考](https://lumen.laravel.com/docs/5.2/errors#configuration)）
　  
これを私は30、40分はまってしまい、Facadeのコードを確認したり、いろいろと調査して時間を浪費しました。
ググって日本語のブログを読んで「書いてねー」って言って次の日本語ブログを検索する、というダメダメエンジニアの習慣から足を洗い、まずしっかりと英語だろうと公式ドキュメント読まなきゃいつまでたってもダメダメエンジニアだな、と痛感しました。

私は中学卒業レベルの英語力しかないので、何とかGoogle翻訳等を駆使して英語に触れていきたいと思います。。。
機械学習スタートアップシリーズ『これならわかる深層学習入門』の学習　第１章　はじめに

『<a target="_blank" href="https://www.amazon.co.jp/gp/product/4061538284/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=4061538284&linkCode=as2&tag=aokikenichi-22&linkId=49ba4aca1a7f7707948c71fb2d01f4e0">機械学習スタートアップシリーズ これならわかる深層学習入門 (KS情報科学専門書)</a><img src="//ir-jp.amazon-adsystem.com/e/ir?t=aokikenichi-22&l=am2&o=9&a=4061538284" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />』
<a target="_blank"  href="https://www.amazon.co.jp/gp/product/4061538284/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=4061538284&linkCode=as2&tag=aokikenichi-22&linkId=90d53586e7963a353581d0a1298fed72"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ASIN=4061538284&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL160_&tag=aokikenichi-22" ></a><img src="//ir-jp.amazon-adsystem.com/e/ir?t=aokikenichi-22&l=am2&o=9&a=4061538284" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
が出ました。同じく講談社の定番書となっている『機械学習プロフェッショナルシリーズ 深層学習』については [講談社機械学習プロフェッショナルシリーズ『深層学習』の学習 第1章 はじめに、第2章 順伝播型ネットワークの学習](https://qiita.com/aokikenichi/items/eead6f7b7fad1f33056e) に参考記事を書いています。
「これならわかる」となっていて入門的な位置づけのようですが一見したところ数式がっちりです。一つずつ紐解いて行こうと思います。

目次は

+ 1章 はじめに
+ 2章 機械学習と深層学習
    + なぜ深層学習か?/機械学習とは何か/統計入門/機械学習の基礎/表現学習と深層学習の進展
+ 3章 ニューラルネット
    + 神経細胞のネットワーク/形式ニューロン/パーセプトロン/順伝播型ニューラルネットワークの構造/ニューラルネットによる機械学習/活性化関数/なぜ深層とすることが重要なのか
+ 4章 勾配降下法による学習
    + 勾配降下法/改良された勾配降下法/重みパラメータの初期値の取り方/訓練サンプルの前処理/
+ 5章 深層学習の正則化
    + 汎化性能と正則化/重み減衰/早期終了/重み共有/データ拡張とノイズの付加/バギング/ドロップアウト/深層表現のスパース化/バッチ正規化
+ 6章 誤差逆伝播法
    + パーセプトロンの学習則とデルタ則/誤差逆伝播法/誤差逆伝播法はなぜ早いのか/勾配消失問題,パラメータ爆発とその対応策
+ 7章 自己符号化器
    + データ圧縮と主成分分析/自己符号化器/スパース自己符号化器/積層自己符号化器と事前学習/デノイジング自己符号化器/収縮自己符号化器
+ 8章 畳み込みニューラルネット
    + 一次視覚野と畳み込み/畳み込みニューラルネット/CNN の誤差逆伝播法/学習済みモデルと転移学習/CNN はどのようなパターンを捉えているのか/脱畳み込みネットワーク/インセプションモジュール
+ 9章 再帰型ニューラルネット
    + 時系列データ/再帰型ニューラルネット/機械翻訳への応用/RNN の問題点/長・短期記憶/再帰型ニューラルネットと自然言語処理
+ 10章 ボルツマンマシン
    + グラフィカルモデルと確率推論/ボルツマンマシン/ボルツマンマシンの学習と計算量爆発/ギブスサンプリングとボルツマンマシン/平均場近似/制限付きボルツマンマシン/コントラスティブダイバージェンス法とその理論/ディープビリーフネットワーク/ディープボルツマンマシン
+ 11章 深層強化学習
    + 強化学習/関数近似と深層 Q ネット/アタリゲームと DQN/方策学習/アルファ碁
+ 付録 確率の基礎/変分法

となっており、深層強化学習まで入っています。

前提知識は線形代数と微分積分のみってことでほんとかよとは思いますが。[データサイエンス、データ分析、機械学習に必要な数学](https://qiita.com/aokikenichi/items/4d683dc5774f844f8113) で線形代数、微分積分、そして機械学習に必要な最適化の数学の参考書の紹介をしています。

⇒[機械学習スタートアップシリーズ『これならわかる深層学習入門』の学習　第２章　機械学習と深層学習](https://qiita.com/aokikenichi/items/789d54d28d330065b202)へ
「missing "＠end"」でハマりました。

最近これにハマってしまいました。
クラスなどの終わりに＠endが無い際に出るエラーみたいです。

##状況
開発中、編集していない.hファイルから突然この警告が出ました。→「missing "＠end"」
ただ、そのファイル内では＠endはきちんと書いています。
どうやらこれは、「ソースのimport時に読み込んだファイルのどれかが@endで閉じられていない」場合に出るみたいです。
※Xcodeの自動補正でも解決しません。

<img width="561" alt="スクリーンショット 2017-10-23 20.20.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/205256/77c2e864-4e5d-6f85-943b-5361d3226144.png">

##解決方法
「@endで閉じていないファイルを探し出して、@endを記載する」だけなのですが、意外と面倒でした。
どんな関連で、どのファイルにエラーが表示されるかは、よくわかりませんでした。
※結局、メインコントローラーの.hファイルでした。何かの拍子で消してしまってました。

<img width="558" alt="スクリーンショット 2017-10-23 20.22.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/205256/53bc24c3-a93e-a28c-ff34-ec08fb7cb190.png">
sqlite3で小数点以下の切り捨ては、INTEGERにキャストすればOK

　　SQLite3の[ドキュメントを参照](https://sqlite.org/lang_corefunc.html)しても、小数点以下の切り捨てを行うTRUNC関数はありませんでした。
何故か、sqlite3のINTEGER型へのキャストでは、暗黙的に小数点以下を切り捨てされます。

## 確認用コード

```sql:sqlite3_cast_to_int.sql
SELECT 
 CAST( 0.999999999 AS  int ) AS to_int
;
```
## 他のデータベースマネジメントシステムとの差異
　PostgreSQL等多くのRDBでは、INTEGER型へのキャストでは暗黙的に四捨五入が行われます。sqlite3が特別なような気もします。
　異なるDBMSでSQLを書く際には、キャストの際の暗黙的な処理についても差異があることに気を配りたいものです。
boot2docker から Docker for Mac へ移行したら docker コマンドがなにかおかしい時のメモ

ずいぶん前に MacBook に Docker 使える環境を整備しましたが、目的を達したあと長らく放置していました。

最近また必要に迫られて使おうとしたところ、いろいろ頭から抜けていたので軽く調べていたら、環境整備当時は boot2docker だったデファクトスタンダードが昨今は [Docker for Mac](https://www.docker.com/docker-mac) だということなので移行してみました。

移行自体はスムーズに終わった、と思うのですが `docker` コマンドの反応が何かおかしくなってしまいました。

## 症状

- `docker -v` で30秒以上待つ状態になってしまった
- `docker -v` は遅いとはいえバージョン出力自体は正常に表示される
- `docker ps -a` すると `Cannot connect to the Docker daemon at tcp://192.168.xx.xxx:2376. Is the docker daemon running?` となる

## 解決した方法

`boot2docker` を使っていた時にセットしていた環境変数を `unset` するのを忘れていたのが原因のようです。

すっかり忘れていましたが、毎回コマンドラインで入力するのが面倒だったので、boot2docker 利用時に以下のように設定していました。

```zsh:.zshenv
# set Docer env vals
export DOCKER_HOST=tcp://192.168.xx.xxx:2376
export DOCKER_CERT_PATH=/Users/xxxx/.boot2docker/certs/boot2docker-vm
export DOCKER_TLS_VERIFY=1
```

私の場合はこれを削除し、シェルを起動しなおしたら解決しました。


## 参考

https://stackoverflow.com/questions/25234792/what-does-the-docker-host-variable-do
Cognos Framework Manager のモデルのバージョン管理

#概要
Cognos Framework Managerで、パッケージほ発行時のオプションで、この「モデルのバージョン管理を有効にする」というチェックボックスの話です。
デフォルトでチェックが入っていますが、初めてCognosを習った時から、このオプションは外すものだと自然に身に付いていたので、この設定の意味を考えた事がありませんでした。
![001.PNG](https://qiita-image-store.s3.amazonaws.com/0/147246/001f976a-2a39-b560-b43d-96cfc307eb58.png)

という訳で、実際にやってみて、「あ～、なるほど、でも、デフォルトでチェック入ってない方がいいんじゃないかな」と、やっぱり思った話です。

#動作確認
こんなパッケージを元にリストのレポートを作成します。
![002.PNG](https://qiita-image-store.s3.amazonaws.com/0/147246/f80d0565-73c1-d1a3-1479-4f7cd39e75fb.png)

実行イメージはこんな感じで、「地域」列が入ってます。
![003.PNG](https://qiita-image-store.s3.amazonaws.com/0/147246/9537da71-dff2-09bd-b386-c0f66d58833c.png)

Framework Managerのモデルから「地域」を削除してみます。
![004.PNG](https://qiita-image-store.s3.amazonaws.com/0/147246/eee36f18-4556-481b-8e0e-631d587cea46.png)

「地域」が無い状態で、バージョン管理有効で、パッケージ発行します。
![005.PNG](https://qiita-image-store.s3.amazonaws.com/0/147246/10dd4360-e04c-0f2d-302b-9caf6dbb0377.png)

さて、レポートを実行すると、パッケージに「地域」は無いはずですが、レポート実行は成功します。
![006.PNG](https://qiita-image-store.s3.amazonaws.com/0/147246/a7669c10-f698-9682-d76e-07367e6d9f10.png)

Report Authoringで開いてみると、こんな感じに怒られます。Report Authoringは常に最新のパッケージを見に行きます。
![007.PNG](https://qiita-image-store.s3.amazonaws.com/0/147246/b7d7d4a7-40ff-63a4-ca8d-1adcc6ac1c83.png)

Report Authoringのソースタブからパッケージを見ると、「地域」は存在していません。
![008.PNG](https://qiita-image-store.s3.amazonaws.com/0/147246/4d42a19b-c734-7534-8932-cd57bcce1d21.png)

さて、Report Authoringはそのまま閉じて(保存しない)、ついでにCognosサービスを再起動して、もう一回レポートを実行してみました。
問題なくレポートが実行されました。
Report Authoringで開くとか、Cognos再起動とかでは、古いパッケージを見に行くのは変わらないようです。
![009.PNG](https://qiita-image-store.s3.amazonaws.com/0/147246/ce76b756-bc48-6ba0-039f-944ddfdf365d.png)

レポートの「プロパティ」から「パッケージへのリンク...」を触ってみます。
![010.PNG](https://qiita-image-store.s3.amazonaws.com/0/147246/91885971-656f-01ae-5815-886ce78aeb94.png)

そのままの状態で「OK」。
![011.PNG](https://qiita-image-store.s3.amazonaws.com/0/147246/c31aa4e0-c7af-9089-32d4-19babf8bbd2e.png)

するともうだめ。レポート実行時にエラーになります。
![012.PNG](https://qiita-image-store.s3.amazonaws.com/0/147246/62784aa6-4ba4-79df-d0cb-241cebd87c88.png)

感覚的に、パッケージを発行したんだから、上書いて欲しい、というのが通常な感覚な気がするので、やっぱりここのオプションは、特に意思が無ければ外すようにしておきましょう。
![013.PNG](https://qiita-image-store.s3.amazonaws.com/0/147246/aa7b70fb-ea07-afcb-929a-00751fa574bc.png)
気象庁のデータを取得して、pandasでデータを整形してみる。

# 気象庁のデータをBeautifulSoupを用いてパースし、pandasを用いてデータを整形する。

必要なライブラリなどをインポートします。

```python
import urllib.request
import matplotlib.pyplot as plt
import matplotlib.cm as cm
import numpy as np
import pandas as pd
from pandas import DataFrame
from bs4 import BeautifulSoup
```

データを読み出すための関数を定義します。
この関数は年と月を指定して、その時のデータを読み出します。

```python
def read_data(month, year):
    html = urllib.request.urlopen("http://www.data.jma.go.jp/obd/stats/etrn/view/daily_s1.php?prec_no=44&block_no=47662&year="+str(year)+"&month="+str(month)+"&day=&view=")
    data = BeautifulSoup(html, 'lxml')
    
    data.prettify()
    title = data.find("h3")
    day = data.find_all(class_="data_0_0")

    y_vals = []
    
    for i, item in enumerate(day):
        if i % 20 == 5: 
            y_vals.append(float(item.string))

    ave_data = sum(y_vals) / len(y_vals)
    return ave_data
```

以下のようにして、先ほど定義した関数を用いてデータを読み出し、
pandasのDataFrameを利用して、データを整形します。
DataFrameに配列を渡す時に、indexとcolumnsを指定することで、インデックスとコラムを指定することができます。
ここで2014年の読み出しを飛ばしていますが、これは2014年のデータのみに均質でない値が存在し、関数により読み出すことができず、別処理を加えなければいけないためです。

[気象庁](http://www.data.jma.go.jp/obd/stats/etrn/view/daily_s1.php?prec_no=44&block_no=47662&year=2014&month=12&day=&view=)

```python
x_ave = np.zeros((10, 12))

year = 2006
for i in range(0, 10):
    if year + i == 2014:
        year = year + 1
    for month in range(0,12):
        x_ave[i][month] = (read_data(month + 1, year + i))

index = ['2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2015', '2016']
columns = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']

temperature_ave = DataFrame(x_ave, index=index, columns=columns)
temperature_ave = temperature_ave.round(1)
print(temperature_ave)
# 	
          1	  2	   3	   4	   5	   6	   7	   8	   9	  10	  11	 12
2006	5.1	6.7	 9.8	13.6	19.0	22.5	25.6	27.5	23.5	19.5	14.4	9.5
2007	7.6	8.6	10.8	13.7	19.8	23.2	24.4	29.0	25.2	19.0	10.3	6.0
2008	5.9	5.5	10.7	14.7	18.5	20.9	27.0	26.8	24.4	19.4	13.1	9.8
2009	6.8	7.8	10.0	15.7	20.1	22.5	26.3	26.6	23.0	19.0	13.4	9.0
2010	7.0	6.5	 9.1	12.4	19.0	23.6	28.0	29.6	25.1	18.9	13.5	9.9
2011	5.1	7.0	 8.1	14.5	18.5	22.8	27.3	27.5	25.1	19.5	14.9	7.5
2012	4.8	5.4	 8.8	14.5	19.6	21.4	26.4	29.1	26.2	19.4	12.7	7.3
2013	5.5	6.2	12.1	15.2	19.8	22.9	27.3	29.2	25.2	19.8	13.5	8.3
2015	5.8	5.7	10.3	14.5	21.1	22.1	26.2	26.7	22.6	18.4	13.9	9.3
2016	6.1	7.2	10.1	15.4	20.2	22.4	25.4	27.1	24.4	18.7	11.4	8.9
```
JSON内のUNIX時間を人が読めるようにしよう！


[UNIX時間](https://ja.wikipedia.org/wiki/UNIX%E6%99%82%E9%96%93)を脳内で日付に変更できない人向けの内容です。
jqコマンドで私でもパッと見て読めるようにします！

## 使うもの
- [jq](https://stedolan.github.io/jq/)  
インストール方法は[ダウンロード](https://stedolan.github.io/jq/download/)を参照してください。

## サンプルJSON
適当なJSONを用意します。

```json
{"time":[1500000000,1500100000,1500200000,1500300000]}
```

## 見やすくする
JSONをコピーしてコマンド実行。
コピー部分はよしなに。

```bash
$ pbpaste | jq '.time[] |= strftime("%Y-%m-%dT%H:%M:%SZ")'
```

## 出力

```json
{
  "time": [
    "2017-07-14T02:40:00Z",
    "2017-07-15T06:26:40Z",
    "2017-07-16T10:13:20Z",
    "2017-07-17T14:00:00Z"
  ]
}
```

私でも読めます！！

## UNIX時間がstringで入っている場合もあるかもしれない
こんなJSONです。

```json
{"time":["1500000000","1500100000","1500200000","1500300000"]}
```

## コマンドと出力
```bash
$ pbpaste | jq '.time[] |= (tonumber | strftime("%Y-%m-%dT%H:%M:%SZ"))'
```
```json
{
  "time": [
    "2017-07-14T02:40:00Z",
    "2017-07-15T06:26:40Z",
    "2017-07-16T10:13:20Z",
    "2017-07-17T14:00:00Z"
  ]
}
```

読めます！！！


## 複数要素にUNIX時間が入っている場合
このようなJSONです。
`time[].start`と`time[].end`の2要素があります。

```json
{"time":[{"start":1500000000,"end":1500100000},{"start":1500200000,"end":1500300000}]}
```

## 見やすくする
JSONをコピーしてコマンド実行

```bash
$ pbpaste | jq '.time[].start |= strftime("%Y-%m-%dT%H:%M:%SZ") | .time[].end |= strftime("%Y-%m-%dT%H:%M:%SZ")'
```
```json
{
  "time": [
    {
      "start": "2017-07-14T02:40:00Z",
      "end": "2017-07-15T06:26:40Z"
    },
    {
      "start": "2017-07-16T10:13:20Z",
      "end": "2017-07-17T14:00:00Z"
    }
  ]
}
```

無理やり感あふれるコマンドができあがりました(´･_･`)
詳しい方、いい方法あったら教えてくださいー
vue-cliとElementUIでtiqavクライアントを作った

[Angular Materialでtiqavクライアントを作った](https://qiita.com/daikiojm/items/a7f3f7ea2cb4beae6737) に引き続き、vue.jsでもtiqavクライアントを作ってみました。
vue.jsを初めて、チュートリアルの次に作ったものなので、あまりよろしくない作りの箇所もあるかもしれませんが、これくらいの規模のプロジェクトを一つ仕上げると色々勉強になるので、概要とリポジトリを紹介します。

## Demo


![スクリーンショット 2017-10-23 18.50.11.png](https://qiita-image-store.s3.amazonaws.com/0/79414/977058d9-354f-f563-cb9c-8b3fa0d8827d.png)


https://daikiojm.github.io/tiqav-vue-frontend/



注意: 使用するブラウザによっては混在コンテンツの警告が表示されます。
※ Google Chromeの場合はアドレスバーに表示される盾マークから混在コンテンツの許可を行うことで閲覧可能です。

## 概要

本家のtiqavにある、ランダム表示と検索の他、APIが用意されていた新着投稿(newest)画面も作りました。
画面一覧です。

* Search(検索結果の表示)
* Newest(新着投稿の表示)
* Random(ランダムに取得した投稿の表示)
* items(画像の詳細表示)

上記3つはサムネイル一覧を表示する画面になっていて、画像の詳細や関連画像を表示するDialogはすべての画面で共通のコンポーネントとして実装しています。本家tiqavにはない機能として、詳細表示画面でのタグの一覧表示と、タグクリックでの検索機能を実装しています。

## 使ったライブラリなど

### CLI
開発にはvue-cliを使いました。
vue-routerのセットアップや、環境設定ファイルの作成などが初めからされているので、かなり快適に開発ができました。
使わない手はないかと思います。

```
$ vue -V 
2.9.1
```
プロジェクト作成時には `webpack` のテンプレートを使いました。

```
vue init webpack tiqav-vue-frontend
cd first-vue-app
? Project name tiqav-vue-frontend
? Project description A Vue.js project
? Author daikiojm <daiking.ca2@gmail.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No
npm install
npm run dev
```

## UIコンポーネントライブラリ

タイトルにもある通り、[ElementUI](http://element.eleme.io/#/en-US) を使いました。
カラムレイアウトや、form、buttonなどのコンポーネントの他、AutocompleteやTagなどの便利なコンポーネントが用意されているため、自分でCSSでスタイリングは最小限でクオリティが高いUIが実現できます。Bootstrapと似ているようで、一味違うデザインがいい感じです。

## Ajax

vue-resourceが引退したらしいので、[axios](https://github.com/axios/axios) を使いました。
これを使っておけば間違いないっぽいです。
今回使ったtiqavのAPIはJSONP形式だったので、[axios-jsonp](https://github.com/AdonisLau/axios-jsonp) というadapterをあわせて使いました。

## Lazy Load(画像の遅延読み込み)

画像のLazyLoadには [vue-lazyload](https://github.com/hilongjw/vue-lazyload) を使いました。(newest,search,randomの画像一覧に使用)
使い方は簡単で、`img`タグに`v-lazy`ディレクティブを追加するだけです。


## 所感

今回は、各コンポーネントに定義したmethodでajax操作を行いViewテンプレートに内容を反映すると言った簡単な内容のみを行いましたが、vue.jsのデータバインディングの基本的な機能、vue-router、axiosなどを一通り使うことができました。
次はvuexによる状態管理を取り入れた更に大きい規模のアプリを作ってみようと思います。


## ソース
https://github.com/daikiojm/tiqav-vue-frontend
Elasticsearch（5.3.0） でelasticsearch-headを使う

### elasticsearch-headとは
[elasticsearch-head](http://mobz.github.io/elasticsearch-head/)は、ブラウザで動くElasticsearchのGUIです。
elasticsearch-headは、Node.jsで動いており、Gruntを利用してWEBサーバを起動させます

### インストール方法
Node.js が入ってなければインストール

```
$ node -v
v6.9.4
```

npm が入ってなければインストール

```
$ npm -v
3.10.10
```

Gruntのインストール（gruntコマンドを利用できるようにするため、「grunt-cli」をnpmを利用して入れる）

```
$ sudo npm install -g grunt-cli
```

elasticsearch-headのセットアップ

```
$ git clone git://github.com/mobz/elasticsearch-head.git
$ cd elasticsearch-head
$ npm install
```

GruntでWebサーバを起動

```
$ grunt server
```

`http://localhost:9200` にアクセス

すると

「cluster health: not connected」

とエラーが

elasticsearchの設定を変更

```
$ vi /usr/local/etc/elasticsearch/elasticsearch.yml
+ http.cors.enabled: true
+ http.cors.allow-origin: “*"
```

の二行を追記して、Elasticsearchを再起動

```
$ sudo services elasticsearch restart
```

`http://localhost:9200` にアクセス

<img width="1434" alt="スクリーンショット 2017-10-23 19.05.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/126002/00e1f5a7-44f9-e38f-db29-14be8abc6871.png">

開いた( ´ ▽ ` )ﾉ
Pythonによる数値計算-放物運動(Euler法)

# はじめに
　前回は放射性物質の半減期をテーマとして扱いました。今回のテーマは重力加速度のもとで運動する物体の**放物運動**です。前回と同じ手法を使って別の問題を扱うことにしました。放物運動は高校物理でも出てくる基本的で重要な内容です。あらかじめ作ろうとしているプログラムを宣言しておきましょう。今回作ろうとしているのは横軸および縦軸が位置を表すグラフです。ある角度で射出された物体がどのような軌道を描くのかをみてみましょう。
　　重力加速度のもとで物体は、Newtonの運動方程式に則って運動することがわかっています。Newtonの運動方程式は次のように表されます。

```math
m\alpha = F  \tag{1}
```

ここでmは物体の質量、$\alpha$は物体の加速度、そしてFは物体に加わる力を意味します。Pythonによる数値計算入門-Part1でも述べたように、まず準備するべきは数値計算の手法で解くことのできる数式を用意することですが、この数式を数値計算の手法で解くのは少し厄介です。
　そこで今まで後回しにしてきた数式の変形を行いましょう。式(1)は書き換えると次のようにかけることがわかります。

```math
\frac{dv}{dt} = F \tag{2}
```

加速度が速度の微分であることを用いました。また簡単のために式を単位質量あたりになるようにしました。質量を考える場合はパラメータとして含めれば良いだけなので運動の本質には影響しません。
　さて、これで数値計算の手法で解くことができるかと言われれば、まだ複雑です。一つは物理でよくやるベクトル分解です。この場合は物体にかかる力が重力ですので、重力のかかる方向をyとしてそれに垂直に交わるようにx軸をとったxy平面を考えるのが良いでしょう。そこで式(2)を次のようにベクトル分解します。

```math
\frac{dv_{x}}{dt} = 0 \tag{3}
```

```math
\frac{dv_{y}}{dt} = -g \tag{4}
```
式(3)はx軸方向の運動方程式です。力がかかっていないので右辺は0になります。一方、式(4)は重力加速度が-y方向にかかっていますから右辺は-gになります。式(3)と(4)から求めることができるのは速度の時間変化ですので、次の式も加えることで物体の軌道を計算できるようにしましょう。

```math
\frac{dx}{dt} = v_{x} \tag{5}
```

```math
\frac{dy}{dt} = v_{y} \tag{6}
```

　これで数式を数値計算の手法で解くことのできる状態まで持ってくることができました。次に行うのはパラメータの設定です。定義域の設定と運動の初期値の設定が必要になります。定義域に関しては、求めたい軌道がグラフの中に入っていれば良いので難しくはありません。運動の初期値の設定とは、この場合は初速度、重力加速度、射出角度を意味しています。式(3)および(4)を完全に解くためにはこれらのパラメータを定義しなければなりません。これらはプログラムを説明する際にまとめて説明することにします。

#Euler法
  前稿のEuler法をそのまま適用してみましょう。自分の力で式(3)から(6)までを変形できるようになりましょう。答えは次のように表されます。

```math
v_{x,i+1} = v_{x,i}\tag{7}
```

```math
v_{y,i+1} = v_{y,i}-g\Delta t \tag{8}
```

```math
x_{i+1} = x_{i}+v_{x,i}\Delta t \tag{9}
```

```math
y_{i+1} = y_{i}+v_{y,i}\Delta t \tag{10}
```

前回も説明したように$\Delta t$が十分小さければ$O({\Delta t}^{2})$の項は無視できます。そのことが理解できていればEuler法が上式のように書けることも理解できるでしょう。

#計算
 では全体のプログラムをみてみましょう。

```parabola.py
import math, pylab

#①
g = 9.8
v0 = 30
angle = 45.0
dt = 0.01

#②
x = [0.0]
y = [0.0]
vx = [v0*math.cos(angle*math.pi/180.0)]
vy = [v0*math.sin(angle*math.pi/180.0)]

#③
i = 0
while y[i] >= 0:

    x += [0.0]
    y += [0.0]
    vx += [0.0]
    vy += [0.0]

    x[i+1] = x[i]+vx[i]*dt
    y[i+1] = y[i]+vy[i]*dt
    vx[i+1] = vx[i]
    vy[i+1] = vy[i]-g*dt

    i = i+1

pylab.plot(x,y)
pylab.ylim(ymin = 0)
pylab.show()
```
①:まずは初期値の設定です。重力加速度はご存知の通り9.8$[m/s^{2}]$です。初速度は適当に30$[m/s]$にしておきました。射出角度は45°で、分割数は0.01[s]ごとにしました。
②:各分割点に対応した計算値を出すために初期値を代入しておきます。前々回までとの違いは最初にリストの初期値を全て決めてしまわないことです。各リストへの値の格納は次のwhile文で行います。
③:yが正である間計算を繰り返します。while文の中はEuler法であることを確認してください。
　このプログラムを実行してみてください。放物線が出力されることがわかると思います。以上で目的の結果が得られました。

![figure_1.png](https://qiita-image-store.s3.amazonaws.com/0/207891/cf229ac0-a1d1-67b8-de36-39e8831f45af.png)


#最後に
　物理的に興味があるのは例えば空気抵抗がある場合です。wikipediaなどを参考に空気抵抗のある場合の運動方程式を数値計算で解いてみましょう。また、パラメータの設定を色々と変えてみてください。角度以外のパラメータが同じ場合、角度が45°のときがもっとも遠くまで放物線が伸びていることも確認できます。
Access VBA テーブルにチェックボックス（YEｓ/No型）のフィールドを追加する

```vbnet
Dim FLD As Dao.Field
Dim tdfNew As Tabledef
'-----中略
Set FLD = tdfNew.Fields("FieldName")
Set Prp = FLD.CreateProperty("DisplayControl", dbInteger, acCheckBox)
FLD.Properties.Delete ("DisplayControl")
FLD.Properties.Append Prp
```
フィールドを追加してプロパティを変更し、変更したプロパティを追加するというながれ。
これも検索しても見つからないのでメモ。
技術書を書いたハナシ

React Native Japan で @besutome 、 @YutamaKotaro と技術書典 3 で技術書を書いたのでその作業内容を記録しようと思う。
出した本はこちら。 PDF 形式で配布している。

https://rnjapan.booth.pm/items/665275

おおまかに次の流れで作業した。

1. 原稿を書く + 校正作業
2. レビュー
3. Re:VIEW 形式への変換
4. 装丁 + 微調整

次で各手順について書いていく。 textlint と Re:VIEW Template は素人が使っても確実に威力を発揮するので強く使用を推奨。

原稿を書く + 校正作業
---

原稿は markdown で書いて git で管理した。今回は複数人で書いたので github に repo を作ってそこで共有。

原稿を書く際は先に textlint と日本語用のルールをセットアップして、日本語として不自然にならないかチェックしながらやった。非常に有用なので使用をおすすめ。

- http://efcl.info/2015/09/10/introduce-textlint/
    - https://github.com/textlint/textlint
    - https://github.com/textlint-ja/textlint-rule-preset-japanese
    - https://github.com/textlint-ja/textlint-rule-preset-JTF-style

もひとつ、 textlint で一緒に表記ゆれもチェックできるのでやってみたがこちらも必須と言っていいものだと思う。

- http://efcl.info/2015/09/14/textlint-rule-prh/
    - https://github.com/textlint-rule/textlint-rule-prh
    - https://github.com/azu/textlint-rule-spellcheck-tech-word

今回は書く内容にあわせて次のように辞書ファイルを追加して使ってみた。

```yaml
---
version: 1
rules:
  - expected: React Native
    pattern: /[rR]eact ?[nN]ative/
  - expected: DDD
    pattern: /[dD]{3}/
  - expected: Redux
    pattern: /[rR]edux(?!-)/
  - expected: Zeplin
    pattern: /[zZ]eplin/
  - expected: Web
    pattern: /[wW]eb/
  - expected: 例えば
    pattern:  /たとえば/
    specs:
      - from: たとえば
        to:   例えば
```

ポイントは `Redux` のところ。技術としての Redux は先頭大文字ではじめたいが、 `redux-saga` などのライブラリ名は小文字ではじめたいのでハイフンが後ろについている場合はマッチしないように先読み否定を使っている。

```yaml
  - expected: Redux
    pattern: /[rR]edux(?!-)/
```

レビュー
---

3 人で書いたので交互にレビュー。わかりにくいところがスッキリしたり、内容がブラッシュアップされるのでひとりで書く場合でも誰かにレビュー依頼したほうがよいかも。

Re:VIEW 形式への変換
---

md2review を使って markdown から Re:VIEW 形式に変換した。

https://github.com/takahashim/md2review

markdown がきちんと書かれていればまったく問題なく変換される。変換後のファイルがちょっとおかしいな ? と思った場合は markdown 側を確認。特にコードハイライトなど範囲にまたがる書式指定が混乱しがちなので重点的にチェックするといい。

画像を使っている場合はここで一緒にコピーする必要がある。`<章名>-<画像名>`の形式でないとRe:VIEW が認識してくれないので後段の装丁作業でエラーが出た場合は要確認。特にエラーが多かったのが画像のコピー忘れだった。

装丁 + 微調整
---

装丁作業には Re:VIEW Template を使用した。

https://github.com/TechBooster/ReVIEW-Template

インストール、特に Tex のセットアップに時間がかかったので早めに準備しておくとよい。今回は使わなかったが、 Docker 版を先に試すのがよいかも。

https://github.com/TechBooster/ReVIEW-Template#docker%E3%82%92%E4%BD%BF%E3%81%86

大体 markdown での記述で本として必要なものは揃うのだが、画像サイズの微調整だけは変換後の Re:VIEW 形式ファイルを直接いじる必要があったので注意。詳しい使い方は TechBooster さんが本を出しているので参照するとスムーズかも。

https://techbooster.booth.pm/items/586727

実際に困ったことがあったときはまずこれを検索、それでもわからないときに Google 検索、ということですべて乗り切れた。感謝。

奥付や表紙など、その他の設定についても記載されているので手元に一冊あるととても安心。

PDF への変換は npm scripts の `npm run pdf` を使ってやった。 PDF だけならこれだけでもまったく問題ない。別途 epub が必要という場合は `review-epubmaker` コマンドを使うだけでよかった。こちらもすごいわかりやすい。

やってみて
---

いまは簡単に本が書けてしまう時代なんだなあと実感。各種ツールを提供してくださっている azu さん、 TechBooster さんありがとう !!
kernel: ip_local_port_range: prefer different parity for start/end values. を消す

カーネルを"3.10.0-327.22.2.el7.x86_64"にアップデートしたところ、OS起動時に"kernel: ip_local_port_range: prefer different parity for start/end values."というメッセージが/var/log/messagesに出た。その際の対処まとめ。

# メッセージの意味
カーネルパラメータの"net.ipv4.ip_local_port_range"の始めと終わりをそれぞれ偶数と奇数にした方がいいよ、というメッセージ。
※parity=偶奇性

エラーや警告ではなく、単なる推奨。
なお、[kernel.orgのドキュメント](https://www.kernel.org/doc/Documentation/networking/ip-sysctl.txt)にも以下の記載がある。
> ip_local_port_range - 2 INTEGERS
> (中略)
> If possible, it is better these numbers have different parity.(one even and one odd values)

# 対処その1
言われた通りに始めと終わりをそれぞれ偶数・奇数にする。
`# sysctl -a | grep range`
`net.ipv4.ip_local_port_range = 32768    60999`

が、OS再起動してみても同じメッセージが出ていた。

# 対処その2
初期RAMのカーネルパラメータが変更前のままになっており、それが検知されていたため、初期RAMを再作成する。
`# dracut "initramfs-$(uname -r).img" $(uname -r)`
`# mv /boot/OLD_INITRAMFS /BACKUP/DIR   #古い初期RAMを退避`
`# mv initramfs-$(uname -r).img /boot   #新しい初期RAM`
`# systemctl reboot`

これで完全にメッセージが出なくなった。
Swiftの文字分割におけるsplit(separator:)とcomponents(separatedBy:)の違い

## 前書き
文字分割なんて同じだろ、と高を括っていたらそーじゃなかった。

## split(separator:)の場合

```swift:splitの場合
let str = "ABCDEFGFEDCBA"
let retVal = str.split(separator: "A")
print(retVal)
```

```swift:結果
["BCDEFGFEDCB"]
```

## components(separatedBy:)の場合
```swift:splitの場合
let str = "ABCDEFGFEDCBA"
let retVal = str.components(separatedBy: "A")
print(retVal)
```

```swift:結果
["", "BCDEFGFEDCB", ""]
```

## 結論
先頭、末尾に`separator`があった場合…

* `split(separator:)`は、削ぎ落とそされる。
* `components(separatedBy:)`は、「空文字」との分割が為される。


## あとがき
JavaScriptのsplit()とは挙動が違うので注意。
文字列置換処理を

```swift
str.split(separator: "A").joined(separator: "B")
```

とか書くと先頭や末尾が削ぎ落とされてバグる。
個人的React周りベストプラクティス③ - React・Reduxパッケージ・ミドルウェア編

#前の記事
前回：[個人的React周りベストプラクティス② - 準備編](https://qiita.com/enshi/items/ac6da19136a466fe1a9d)
一番始め：[個人的React周りベストプラクティス① - 構成編](https://qiita.com/enshi/items/e6ad8c91168cfe8a88da)

#パッケージ
##axios
httpへのリクエストをするAJAXを対応してくれる
プロミスで返り値を返してくれるので***redux-promise***と合わせればすごく楽

##redux-actions
既存のReduxのActionはオブジェクトであれば動く
それを企画を統一しコーディング規約としたものがFlux Standard Action（FSA）
そのFSAに則ったActionを生成するのがこのパッケージ

これを使うことで規約に従ったコードを書くことができ、新人が参入しやすくなる。

##material-ui
既存のHTMLタグだとデザイン的に物足りないなって思った時に、簡単にスタイリッシュなUIパーツを実装できる。
インストールしなくてもまったく問題ないが、以降の記事ではインストールしたものとして書いていく。

↓ *ダイアログも簡単に作ることができる*
![image.png](https://qiita-image-store.s3.amazonaws.com/0/156086/60d99fe0-d44d-7b4d-5c74-ebfc72492e63.png)


##react-router
Reactでページ遷移を実現するためのもの

#ミドルウェア
##redux-promise
ActionCreator内でプロミスを使用すると自動的に非同期で処理してくれるようになるミドルウェア
***redux-actions***を作った人と同じ人が開発したらしい


##redux-logger
1. 変更前State
2. Actionのタイプ
3. Reducerに渡されたAction
4. 変更後State

Actionが実行される度に上記情報をコンソール画面に表示するデバッグ用のミドルウェア


↓ *firefoxでの表示例（「Object」をクリックで中身も見ることができる）*
![image.png](https://qiita-image-store.s3.amazonaws.com/0/156086/30704f1c-2b7b-3ec2-7cd1-90640a976abe.png)


#次の記事
[個人的React周りベストプラクティス④ - Lamdaパッケージ編](https://qiita.com/enshi/items/68ad5cbe6010b2d12ce9)
SQLServer 主キーの追加

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
`USE [DB1]`
`GO`
`ALTER TABLE [table1] ADD PRIMARY KEY ([col1], [col2])`
`GO`
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

※PRIMARY KEYを設定する列⇒NOT NULLが必要になる
・nullable → not null			
`alter table [table1] alter column [col1] [nvarchar(20)] not null;`		
			
・not null → nullable			
`alter table [table1] alter column [col1] [nvarchar(20)] null;`
ajaxでファイルをダウンロードさせようとした


PDFをダウンロードさせる処理を作っていて、ajaxでの実装をしたかった。
諸先輩方には常識だと思うのですが、なかなかつまずいたのでメモする。

#普通にありがちなjQueryのajaxでやってみた
```js
		$(document).on("click", ".Pdf", function () {
			Url = "url/to/api"
			target = $(this).data("document_id")
			Data = {
				"target_id": target
			}
			$.ajax({
				url: Url,
				type: "GET",
				data: Data,
				timeout: 10000,
			}).done(function (data) {

			}).fail(function () {
				alert("ERROR")
			})
		})
```
諸先輩方ならすぐにお分かりかと思うが、これでは動かない。

#いろいろ調べたところ・・・
・取得したファイルからBlobオブジェクトを作成
・そのオブジェクトに対するリンクを生成
・そのリンクをaタグに張ってクリックイベントを発火させる

という処理にすれば可能とのこと。

#やってみた
以下のコードはjQueryを使わずに記述している。
ほんとはできるそうなのだが、自分でjQueryを使って実装してみたら
うまくBlobオブジェクトが作れなかったのでjavascriptのみで実装した。

```js
$(document).on("click", ".createPdf", function () {
    var url = "url/to/api"
    var fileName = "test"
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob'; //blob型のレスポンスを受け付ける
    xhr.onload = function (e) {
        if (this.status == 200) {
            var blob = this.response;//レスポンス
            //IEとその他で処理の切り分け
            if (navigator.appVersion.toString().indexOf('.NET') > 0) {
                //IE 10+
                window.navigator.msSaveBlob(blob, fileName + ".pdf");
            } else {
                //aタグの生成
                var a = document.createElement("a");
                //レスポンスからBlobオブジェクト＆URLの生成
                var blobUrl = window.URL.createObjectURL(new Blob([blob], {
                    type: blob.type
                }));
                //上で生成したaタグをアペンド
                document.body.appendChild(a);
                a.style = "display: none";
                //BlobオブジェクトURLをセット
                a.href = blobUrl;
                //ダウンロードさせるファイル名の生成
                a.download = fileName + ".pdf";
                //クリックイベント発火
                a.click();
            }
        }
    };
    xhr.send();
})
```
tigのUntracked filesが表示されない件

## 問題

tigにはUntracked files (履歴管理していないファイル) を表示する機能がありますが、あるタイミングから表示されなくなってしまい困っていました。

git statusには表示される

```
On branch master
Untracked files:
  (use "git add <file>..." to include in what will be committed)

	bar.txt
	foo.txt
	hoge.txt
```

でも、tig status には表示されない

```
Untracked files:
  (not shown)
```

今回、その解決方法が分かったのでメモしておきます。

## 解決方法

[jonas/tig#595](https://github.com/jonas/tig/issues/595)
Githubのissueによると、2種類の方法が提案されています。

a) ~/.tigrcに次の項目を追加する

```
set status-show-untracked-files = yes
```

b) /usr/local/etc/tigrc を削除 (もしくは移動) 

```
$ rm -f /usr/local/etc/tigrc
※ Homebrew (macOS) を前提にしています。他の環境ではパスが異なるかもしれません
```

どうも システムの設定 (`/usr/local/etc/tigrc`) が存在すると内部のデフォルト値が無視されるようですね。システムの設定を削除して内部のデフォルト値を参照させるか、明示的に `status-show-untracked-files` を有効にすれば、ちゃんと表示されるようになります。
RHEL(CentOS)7系でサービス(デーモン)一覧のエビデンスを取得する時はページャを外す

#6系のノリでやると後悔する
OSの単体試験でサービス(デーモン)の一覧を取得する時、Teratermからサーバにssh接続してコマンド実行ログをエビデンスにするのが一般的(だと思っている)。

6系までは
`# chkconfig --list`
の一発で問題なかった。

しかし、7系からはsystemctlコマンドになっており、
`# systemctl -t service list-unit-files`
と実行すると自動的に結果がページャに引き渡される。
その結果、chkconfigと同じノリで「実行して結果が返ってきたからOK」と思って調子に乗っていると、後でエビデンスを確認した時に先頭の数十行しかログに出力されておらず、エビデンスを取り直すはめになる。

コマンド実行結果をページャに引き渡さないようにするには
`# systemctl -t service list-unit-files --no-pager`
というように"--no-pager"オプションをつければOK。
これでページャを介さずにでサービス(デーモン)一覧が表示される。
Pythonプログラムのパフォーマンスを解析し、可視化する

パフォーマンスチューニングを行う際、改修前後で効果があらわれているか確認するのは重要です。Pythonにはデフォルトで[パフォーマンス解析を行うモジュールが組み込まれている](https://docs.python.jp/3/library/profile.html)のですが、そのままではちょっと使いづらいく出力結果も見にくいです。そこで、簡易な記法で計測できる＋結果の可視化を行うツールを作りました。

[icoxfog417/pyfbi](https://github.com/icoxfog417/pyfbi)

まず、実行結果(`dump_stats`などで保存したファイル)を以下のようにグラフ・表で可視化できます。インストールすると`pyfbi_viz`というコマンドが使えるので、それでファイルを保存したディレクトリを指定すればOKです。改修前の計測、改修後の計測2つのファイルをフォルダに入れておけば前後の可視化が可能です。

```
pyfbi_viz stat_dir=ファイルを保存したディレクトリ
```

![pyfbi_viz_2.png](https://qiita-image-store.s3.amazonaws.com/0/25990/349066c6-e436-6451-052e-f71edf3f0419.png)

![pyfbi_viz_1.png](https://qiita-image-store.s3.amazonaws.com/0/25990/14ff0070-ddd6-fc82-a240-fc69b5ee4063.png)

* `pure`は内部で呼び出している関数の実行時間を加味しない、純粋な実行時間になります(`tottime`)。`total`は、呼び出している関数の実行時間も含めた実際の処理時間になります(`cumtime`に相当)。`/call`は呼び出し一回当たりの時間になります。

計測に際しては、以下のように`pyfbi.target`を設定したところだけ計測を行うことが可能です。`with pyfbi.watch`で開始して抜けるまで観測が行われます。

```py
import time
import pyfbi


@pyfbi.target
def func1():
    time.sleep(1)

def func2():
    time.sleep(2)


with pyfbi.watch():
    [f() for f in (func1, func2)]
pyfbi.show()  # func2は計測されない
pyfbi.dump("your_stat_file_path")  # ファイルに保存
```

もちろん、特に指定せず全てを対象にすることも可能です。その場合は以下のように`global_watch=True`を設定します。

```py
with pyfbi.watch(global_watch=True):
    [f() for f in (func1, func2)]
pyfbi.show()  # func2も計測される
```

定期的な実行を行うことも可能です(x秒ごとに観測してファイルを保存するなど)。

```
import pyfbi

(set target to your function)

stat_dir = os.path.join(os.path.dirname(__file__), "stats")
# You can use global_watch=True if you want to profile all functions.
with pyfbi.watch_periodic(seconds=5, stat_dir=stat_dir):
    for f in [func1, func2, func2, func3, func1, func1]:
        f()
```

## 作成した背景

画像中の関数を見てピンと来た方がいるかもしれませんが、これは[ISUCON7](http://isucon.net/archives/50188676.html)に向けて作成されたツールです。実地でも「計測する」「改修する」「改善を確認してMergeする」というプロセスを踏んで行くのに役立ちました(実際は画像のキャッシュに気付くという壁を超えることができずその改善効果が日の目を見ることはほぼなかったのだが・・・)。

ベンチの値は非常に変動が大きく、またある程度待ち時間もあるため改修結果を測るのに使うのは難しかったです。その意味でも、確かな計測値が手に入るのは良かったです。

予選通過はならずでしたが、せっかく作ったものなのでパフォーマンス改善の折にはぜひ使っていただければと思います。

[icoxfog417/pyfbi](https://github.com/icoxfog417/pyfbi)
(Starを頂けると予選敗退の心が癒されます m(_ _)m)
カードフリップをCSSで実装

演出でカードを表と裏でくるんとフリップさせたいという要望があったのでメモ。

## 下記のページのサンプルが一番よかったです。
[TRANSFORMERS TOP TRUMPS](https://line25.com/wp-content/uploads/2010/webkit-flip/demo/index.html)

## 紹介されていたサンプルをシンプルにしたHTMLとCSSです。
* HTML

```html
<div class="card">
  <div class="card-container">
    <div class="card-item card-front">
      <img src="img_card_front.png" alt="">
    </div>
    <div class="card-item card-back">
      <img src="img_card_back.png" alt="">
    </div>
  </div>
</div>
```

* CSS

```css
.card-container {
  -webkit-perspective: 1000;
}
.card-container:hover .card-item {
  -webkit-transform: rotateY(180deg);
}
.card-container:hover .card-front {
  z-index: 1;
}
.card-container:hover .card-back {
  z-index: 2;
}
.card-item {
  position: relative;
  -webkit-transform-style: preserve-3d;
  transition: all 0.4s ease-in-out;
}
.card-front {
  position: relative;
  z-index: 2;
  -webkit-backface-visibility: hidden;
}
.card-back {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  -webkit-transform: rotateY(180deg);
}

```

## 何が一番よかったのか
カードフリップのサンプルは他にもいろいろあったのですが、上記のサンプルの何が一番よかったかというと、transform3dあたりの指定をわざとベンダープレフィックスだけにすることで、IE11以下では3dの演出はでてこなくてもカードの裏と表の表示切替ができた、という点です。
CSSだけで対応できました。
個人的に良く使いたいけどすぐ忘れるLinuxコマンド集


メインで使ってるLinuxがCentOS7なので固有のコマンドとかあるかも？

# 文字列検索系

## ディレクトリ下のファイル全体から指定文字列を検索

    $find ./ | xargs grep hoge
    $find ./ -type f -print | xargs grep hoge
    
findコマンドのオプション何つけなきゃいけなかったっけ・・・

grep hogeの前何だっけ・・・

って二重に思い出せない

-type f　オプションでファイルのみを対象に検索

# プロセス系

## Pythonとかnodeのプロセスを絞り込んで表示したい
  
    $ps -x | grep node
   
   またもやgrep。最近よく使うから忘れなそう
   
# サーバー系

## boot時にデーモンを自動起動したい(CentOS6向けぽいけど7で使用)
    
最初の一回だけ

    # run as root
    $chmod u+x /etc/rc.d/rc.local
    
で実行権限を与えてあげる。
これをしないとCentOS7では動かないっぽい(Systemdとかなんとか・・・)
 
で、rc.localにコマンドを追記していく 

     $echo "command" >> /etc/rc.d/rc.local
     
     # DiCE設定の時に使った奴
     $echo /usr/local/bin/DiCE/diced -d -l >> /etc/rc.d/rc.local
     
## サーバーのHDD使用量等確認

    $df {-h}
    
やりたいと気にぱっと出てこないよね。
       
随時更新。
Unity(3D・2D) EventSystemでクリックイベントの制御

# クリックなどのイベント
Unityでオブジェクトのクリックイベントなどは、Rayを飛ばす方法が一般的のようですが、EventSystemを使うともう少し簡単に書けるのでその方法です。
内部ではRaycasterでRayを飛ばしてるみたいですが、そこを意識しないでも使えるのがいいかなと。
Unityは初心者なので備忘録も兼ねて書きます。

# 1.カメラにRaycasterをアタッチ
カメラオブジェクトのInspectorから、AddComponentをクリックして、Physics Raycasterをアタッチします。
後述するコライダーが2DのときはPhysics 2D Raycasterの方をアタッチします。

# 2.EventSystemをシーンに配置する
シーン内に UI→EventSystemを配置します。

# 3.クリックされるオブジェクトにコライダーをアタッチ
スプライトやキューブなど、クリックしたいオブジェクトのInspectorにBox Colliderなどのコライダー（当たり判定）をアタッチします。2D/3Dは用途に合わせて。

# 4.クリックされるオブジェクトにEventTriggerをアタッチ
Inspectorから、Event→EventTriggerをアタッチします。

# 5.イベントを受け取る方のオブジェクトに処理を記述
InspectorのEventTriggerの、「Add New Event Type」から、使いたいイベントを選びます。
例えばマウスクリックを拾いたいのであれば「PointerClick」を選択。
すると、Pointer Click(BaseEventData)とでるので、その下の枠にイベントを受け取るオブジェクトを選択し、イベントを受け取る処理が記述されたメソッドを指定します。

![NoName_2017-10-23_17-40-59_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/47220/eaf4d432-8068-8023-2746-1a1ed109b5e5.png)

上の例だと、クリックされた時、Hierarchy上のActManager（Managerクラスのスクリプトがアタッチされている）というオブジェクトの、OnSortiePointClickというメソッドが実行されます。

ActManagerのスクリプトはこんな感じ

```C#:Manager.cs
using UnityEngine.EventSystems;

public class Manager : MonoBehaviour
{
	public void OnSortiePointClick(BaseEventData data){
		var eventData = (PointerEventData)data;
        //処理...
	}
}
```

# もう一つの方法
## アタッチしたスクリプトにイベントハンドラのインターフェースを実装する
上の例だと、インスペクターにイベントを受け取るゲームオブジェクトをアタッチしていましたが、この方法だとPrefabのようなまだオブジェクト化してないときに困ります。
もう一つの方法としては、アタッチしたスクリプトにIPointerClickHandlerなどを実装する方法です。

```C#
using UnityEngine.EventSystem;

// IPointerClickHandlerインターフェースを継承して OnPointerClickを実装
public class Hogehoge : MonoBehaviour, IPointerClickHandler {
    // Start, Updateは省略

    public void OnPointerClick(PointerEventData data){
        // クリック時の処理
    }
}
```

どちらを使うかは状況に応じて変えるとよいでしょう。
どのインターフェースがどのイベントに対応しているかは、下記のその他欄の一覧からどうぞ。

# その他
- EventSystemはUnity5から？古いバージョンでは動かない可能性があります。
 
- サポートしているイベント一覧
  - https://docs.unity3d.com/jp/530/Manual/SupportedEvents.html
プログラミングに関するあの名前の由来 #1　言語名その1

#はじめに

プログラミングの固有名詞がなかなか覚えられないので、
なんでその名前が付いたのかから調べることで自分を納得させます。
今回は一部のプログラミング言語について探っていきます。
最初は**C言語,Java,Perl.Python**。

#C言語
![Letter_c.svg.png](https://qiita-image-store.s3.amazonaws.com/0/205954/dccdb4bb-c330-6ae6-c8b5-55aed091b539.png)

**B言語ってやつの後継だから。**
コーディングが容易になったという理由で、Bは使われなくなった。
B言語の由来ははっきりしていないが、BCPL(Basic Combined Programming Language)から取ったとされる説が有力。
A言語は無い。

#Java
![java.jpg](https://qiita-image-store.s3.amazonaws.com/0/205954/c5690f06-3fd5-ef53-cc11-a3514b2158d0.jpeg)



**ジャワ島のジャワコーヒー(Java Coffee)から。**（諸説あり）
アイコンにもコーヒーカップが用いられている。
Javaを作った人たちが通ってたコーヒー店で見かけたらしい。
適当につけられた名前の言語が、今では世界中のIT業界において強力な存在である。

**ボツ案：Oak**
マイクラとかでよく見かける、樫の木。
樫の木のように堅牢さを求めたからとか、
開発陣のオフィスの近くに生えてたからと言われていたが、
他の会社の商標登録されてたのでお蔵入りになった。


#Perl
![a09af6f7.png](https://qiita-image-store.s3.amazonaws.com/0/205954/4abf1707-b336-6bc8-9673-048679d7f82f.png)

**真珠(Pearl)のもじり。**
なんでPearlにしなかったかというと、すでに使われていたから。
アイコンの玉ねぎはパールオニオンと言い、真珠みたいに綺麗。

**ボツ案：Gloria**
原案者ラリー・ウォール氏の奥さんの名前グロリアから。
家族との会話で紛らわしいのでやめた。
ちなみに、ラリー氏はとても愛妻家らしい。

#Python
![python-logo-master-v3-TM.png](https://qiita-image-store.s3.amazonaws.com/0/205954/2ed9af5b-e97b-4c8f-2dca-9d3b4c4938e8.png)


**イギリスのコメディ「空飛ぶモンティ・パイソン」から。**
Python自体はニシキヘビという意味であり、
参考書の表紙絵やマスコットにもヘビが使われていることが多い。
AWS Batchのコンテナの /dev/shm のサイズを拡張する方法


AWS Batchを使ってchromeをheadlessモードで起動して、色々自動化していると`/dev/shm` の `64M`しか無いことが原因で処理が途中で止まってしまうことがあります。

その際出力されるエラーは、次のようなエラーです。エラーがない場合もあったりしますが。

```
2017-10-12T02:53:01.183Z (node:1) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Page crashed!
```

`docker run`を使用する場合は`--shm-size`オプションを指定することによって、解決できますが、AWS Batchでは`docker run`時のオプションを指定することができません。

この問題、ホストの`/dev/shm`をコンテナにマウントすることで解決できます。
しかし、AWSの管理コンソールの表現がちょっとした罠だったので、手順をメモしておきます。(←たぶん改善されると思いますが)

# 手順
- Create a job definition画面を開く
- VolumesのNameに`dev_shm` , Source pathに `/dev/shm`を指定
- Mount pointsのContainer pathに`/dev/shm` , Source pathに`dev_shm`を指定
- Read-onlyのチェックを外す

![create_job_definitions.png](https://qiita-image-store.s3.amazonaws.com/0/18273/a326cb1a-2437-690a-34a5-297f08db8c9f.png "create_job_definitions.png")

私はMount pointsのSource pathの`path`という表現に影響されて`/dev/shm`と指定していて、しばらくハマりました。
UI > 複数のプロファイルの切替 > GNOME Terminalの場合

```txt:動作環境
Xeon E5-2620 v4 (8コア) x 2
32GB RAM
CentOS 6.8 (64bit)
openmpi-1.8.x86_64 とその-devel
mpich.x86_64 3.1-5.el6とその-devel
gcc version 4.4.7 (とgfortran)
NCAR Command Language Version 6.3.0
WRF v3.7.1を使用。
Python 2.6.6 (r266:84292, Aug 18 2016, 15:13:37) 
Python 3.6.0 on virtualenv
GNOME Terminal 2.31.3
```

複数のプロファイルを持つUIはどういうものか。
GNOME Terminal 2.31.3の場合。

### 設定

[Edit] > [Profiles...]

![qiita.png](https://qiita-image-store.s3.amazonaws.com/0/32870/1ba9e103-6fa5-2e84-9279-513d272ee81f.png)

- New
    - New Profileダイアログが表示される
        - そこでProfile nameを入力して
        - Createボタンを押す
        - オプション: 「Base on:」(例: Default)
- Edit
    - 該当のプロファイルの設定を行う
        - Editing Profile "XXX"ウィンドウが開く
- Delete
    - プロファイルを消す

### 使用

[Terminal] > [Change Profile] > プロファイル選択

### ウィンドウ

- Profilesウィンドウ
- New Profileウィンドウ
- Editing Profile "XXX"ウィンドウ

これらを一つのウィンドウで処理するにはどうするか。
Goでwebサービス

#　作ったもの
https://www.landskip.jp/

![スクリーンショット 2017-10-23 16.39.06.png](https://qiita-image-store.s3.amazonaws.com/0/31237/6a749049-8a60-465f-1c67-00b64f71abda.png)

---

## いろいろあったインフラ
1. 2年前くらい：最初Azureで開始
 - オートスケール機能の使えるアプリケーションサーバが**windowsサーバ**で辛い
 - deploy.sh書いてたけどpower shellに書き直して辛い
 - サポートのレス遅い
 - 動画のエンコードするMedia Serverは便利だった
 - ちょっとスタートアップで使うにはオーバースペック
2. つらみに耐えかねてSakuraへ
 - 先日の大規模障害くらいからオブジェクトストレージが不具合多い
3. 障害復帰が遅かったので
 - ConoHaへ

---

## Goのいいところ

---

#### Goのいいところ
- ビルドが軽い（C++やってた人の所感
- 規約が厳しい（ポジティブな意味で）
    - (API叩いてEntityに入れるような処理書いてみるとわかるけど)
- linterや標準ツールがとても充実
- デプロイが楽（1 binary deploy）

---

## Goで辛かったとこ

---

#### Goで辛かったとこ

- オブジェクト指向の概念がない（構造体）
- gomでパッケージ管理してて結構ビルドがこけたけど原因がわからなかった
- revelのサンプルとか参考にしてもいまいち正解がわからん・・・

---

## 辛かったときに参考にしたこと

---

#### オブジェクト指向の概念がない（構造体）
- [Go言語での構造体実装パターン](http://blog.monochromegane.com/blog/2014/03/23/struct-implementaion-patterns-in-golang/)
- [Goで見かける構造体パターン](https://qiita.com/taizo/items/7e47f505ed0d96747ba2)

実装しながらちょっとした構文やパターンの実装はローカルで環境作るとビルドとか面倒なので[Go Playground](https://play.golang.org/)でためす

#### gomでパッケージ管理してて結構ビルドがこけたけど原因がわからなかった
- Goは1.6から[vendering](https://qiita.com/ksato9700/items/5505e506c20b6048c218)の機能がついているのでGoのバージョンを固定して、gom->glideに移行して安定した
- glide使っている人の方が多い気がした

#### revelのサンプルとか参考にしてもいまいち正解がわからん・・・

未解決

---

## Goで簡単なツールを作ってみた

---

codicというサービスのAPIを使って、コマンド上で変数名をサジェストしてくれるやつ
https://github.com/jumbo-in-Jap/Codic_cli

コード見ながら説明します。

--- 

## Goを始めたくなったあなたへ

---

- [A Tour of go](https://go-tour-jp.appspot.com/)
- [Go入門](https://go-talks.appspot.com/github.com/voyagegroup/talks/2017/treasure-go/intro.slide#1)
iPhoneでゲーム制作する費用

お世話になっております。

iPhoneでゲーム制作するには下記値段がかかると思われるので
メモ失礼します。

http://www.atmarkit.co.jp/ait/articles/1204/04/news112.html

iOS／Androidそれぞれ$300.00（約30000円）という値段が設定

http://www.atmarkit.co.jp/ait/articles/1205/30/news129.html

iOS Developer Programに有償（年間8400円）で登録する必要があります。この登録に関しては、現在では多くの情報が公開されています。日本語の解説ブログなども検索すれば、たくさん見つかると思いますので、今回はこの登録が済んでいるという前提で進めていきます


時間が出来たら公開したいな……と思っているのでメモ失礼します。<(_ _)>
pyenv を使って CentOS 5 に Python 3 をインストールする方法

2017 年もあと少しで終わろうとしている爽秋の季節に CentOS 5 に Python 3 をインストールしないといけない状況になってしまった。

というわけで、本日の「どうしてこうなった」案件。対象のOSは、泣く子も黙るEOSLを迎えた CentOS 5.11 でございます。

# 事前に必要なパッケージをインストール
EPEL 導入済みの環境を前提として、以下のものは最低でもインストールしてリポジトリの最新のバージョンに上げておく。

```
$ sudo yum -y install gcc make readline readline-devel zlib zlib-devel bzip2 bzip2-devel sqlite sqlite-devel openssl openssl-devel git
```

# pyenv のインストール
ちなみに `git` がインストールされてないと詰む。

```
$ git clone git://github.com/yyuu/pyenv.git ~/.pyenv
$ echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bash_profile
$ echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.bash_profile
$ echo -e 'if command -v pyenv 1>/dev/null 2>&1; then\n  eval "$(pyenv init -)"\nfi' >> ~/.bash_profile
$ exec "$SHELL"
```

`pyenv` コマンドでインストール可能なバージョンが確認できるようになる。

```
$ pyenv install --list
Available versions:
  2.1.3
  ...
  3.5.4
  ...
```

# Python 3 のインストール
`CFLAGS` と `LDFLAGS` を明示してインストールしないと、インストール後に `pip` などを実行した際に、SSL 周りでエラーが出力される、あるいはそもそもインストールできない、といった事象が発生するので注意されたし。自分の環境だけなのかどうか分からんが、Python 3.6.0 以降のビルドには失敗する。Python 3.5.4 ならインストール可能。理由は知らん。

```
$ CFLAGS=-I/usr/include/openssl LDFLAGS=-L/usr/lib64 pyenv install -v 3.5.4
```

このコマンドで利用可能なバージョンが確認できる。

```
$ pyenv versions
* system
  3.5.4 (set by /home/user/.pyenv/version)
```

`3.5.4` を利用する場合はこのコマンドを実行する。

```
$ pyenv global 3.5.4
```

すると、`3.5.4` にチェックがついた。

```
$ pyenv versions
  system
* 3.5.4 (set by /home/user/.pyenv/version)
```

パスの通っている `python` のバージョンが `3.5.4` になっている。

```
$ python -V
Python 3.5.4
```

他にも Python3 をインストールする方法はあるだろうが、最速で構築できるであろうゆとりな方法を採用させていただいた。

# 参考にした記事
https://qiita.com/nogayama/items/1adc596d6c305168f302
React Native Cameraで撮影画像が表示できないときの対応

[React Native Camera](https://github.com/lwansbrough/react-native-camera)を導入してみたものの、撮影画像が反映されず、下のようなエラーが出たのでそれの対応をしてみました。

![スクリーンショット 2017-10-23 15.24.26.png](https://qiita-image-store.s3.amazonaws.com/0/35862/187f2fc0-8b45-08b1-0da2-dcc617dd335a.png)

原因は、カメラロール経由で参照していたのに、カメラロールのライブラリが読み込まれていなかったからでした。
導入の仕方は下記の通りです。

1. `node_modules/react-native/Libraries/CameraRoll`内にある`RCTCameraRoll.xcodeproj`をプロジェクトビューの`Libraries`以下にドラッグ

![スクリーンショット 2017-10-23 15.36.11.png](https://qiita-image-store.s3.amazonaws.com/0/35862/c3914648-ede9-8a64-e787-2c178ca8b676.png)

2. Build Phrasesにて`libRCTCameraRoll.a`を追加

参考URL
[Using iOS Image Picker with React Native - Gosha Arinich](https://goshakkk.name/react-native-camera-roll-image-picker/)
GCPに共通鍵を追加する手順まとめ

# はじめに
Google Cloud Platform (GCP) に共通鍵を追加する手順を簡単にまとめました。

## 事前準備
GCPではサーバにアクセスする際に[公開鍵認証](https://ja.wikipedia.org/wiki/公開鍵暗号)を使います。
このため、自分専用の鍵ペア（秘密鍵／公開鍵）をあらかじめ準備する必要があります。

### 鍵ペアを作成する（Windows）
今回は「[PuTTY](https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html)」を使って鍵ペアを作成します。
以下より「puttygen.exe」をダウンロードしてください。
[Download PuTTY](https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html)

1. Generateボタンを押す<br>
<img src="https://qiita-image-store.s3.amazonaws.com/0/184843/e8d3cf34-26dc-a15c-90d8-b726c675eb51.png" width="320"><br>
2. マウスをランダムに動かす<br>
<img src="https://qiita-image-store.s3.amazonaws.com/0/184843/23e8b8e6-7e0c-6005-9ae8-543b10630c8a.png" width="320"><br>
3. コメントを設定する<br>
※コメント欄は**ログイン時の「ユーザ名」**になります。<br>
<img src="https://qiita-image-store.s3.amazonaws.com/0/184843/8ccb68a6-7ef2-1b5a-31d0-a6f81ae9558c.png" width="320"><br>
4. 鍵ペアをダウンロードする<br>
<img src="https://qiita-image-store.s3.amazonaws.com/0/184843/accd7eaf-417b-cc13-c5d1-9a9396ca71ae.png" width="320"><br>
  * ① フィンガープリント … GCPに「SSH認証鍵」として設定する情報になるので、テキストファイル等で保存しておきましょう
  * ② 公開鍵 … GCPログインでは使いませんが鍵ペアの公開鍵として利用できます
  * ③ 秘密鍵 … GCPログイン時に必要となる秘密鍵です
 
### 鍵ペアを作成する（番外編：Mac/Linux）
[ssh-keygen](https://qiita.com/search?q=ssh-keygen)とかを使えばいいと思います。

### GCPにSSH認証鍵を登録する
1. GCPコンソールを開く<br>
https://console.cloud.google.com/<br>
※まだ初期登録が完了していない場合、手順は[こちら](https://cloud.google.com/getting-started/)を参考にしてください。
2. GCPコンソールメニューより①のCompute Engine→メタデータを選択<br>
<img src="https://qiita-image-store.s3.amazonaws.com/0/184843/d42cc913-4360-117a-19f4-e92c1a5f5b1b.png" width="320">
3. SSH認証鍵を追加<br>
<img src="https://qiita-image-store.s3.amazonaws.com/0/184843/37d53134-68e4-6f7c-3f33-82d8a75bb62e.png" width="480"><br>
↓<br>
<img src="https://qiita-image-store.s3.amazonaws.com/0/184843/a8fdf4d1-bd38-6054-5595-7a1cd0804789.png" width="480"><br>

これで共通鍵の登録は完了です。