OmniAICreator/Qiita-1.07M huggingface dataset:
「RPG Maker Auto Tile Impoter」使ってみた

#はじめに
ゲーム制作でRPGツクールのマップチップ素材を使用し、またUnity 2017.3のTilemapを用いることにしたのだが、UnityのTilemapにはツクールのオートタイルに相当するものが2d-extrasのTerrain Tileしかない上、当然ではあるがツクールのオートタイルの仕様と互換性は全くない。
どうしたもんかと頭抱えながらAsset Storeあさってみたら、ものの見事に私のやりたいことまんまのアセットが売っていた。
せっかく見つけたんだしそれほどお高い訳でもなかったので、ちゃちゃっと買って試してみた。

##免責とか
この記事は、このアセットの日本語記事が軽く探した限り見当たらないし、せっかくだから私が書こうじゃないか的なアレです。
紹介している内容に誤りがある可能性があるので、このアセットを使用する場合この記事は参考程度にとどめておき、実際にご自身で購入しご確認ください。

##環境等
この記事での環境は以下の通りです。

- Windows 7 SP1 64bit
- Unity 2017.3.1f
- RPG Maker Auto Tile Impoter 1.6.1

#「[RPG Maker Auto Tile Impoter](https://assetstore.unity.com/packages/tools/sprite-management/rpg-maker-auto-tile-impoter-103504)」とは
![ss-01.png](https://qiita-image-store.s3.amazonaws.com/0/240304/3de504c7-8e90-15cb-27f0-344fd56ad2ec.png)

- RPGツクール等のオートタイル素材をUnityのTileに変換するエディタ拡張アセット
- 編集時点の価格は\$4（Unity Plus/Unity Proの方は\$3.20）
- 使用できるオートタイル素材
- 「RPGツクールXP」仕様の素材
    - 「RPGツクールVX・MV」仕様の素材
    - 「WOLF RPGエディター」仕様の素材
- 海・池や滝などのアニメーションにも対応

##注意点
RPGツクールVX・MV使用の素材に関しては、このアセットで変換できるのはAグループのオートタイルのみで、**B、C、D、Eグループは対応しておりません**

#使い方
まず前提として、Asset Storeにてこのアセットを購入し、プロジェクトにインポートしてください。
アセットの購入、プロジェクトへのインポートのやり方・詳細はご自身で調べてください。

##Importerを開く
アセットのインポートに成功すると、UnityのメニューバーにToolsメニューが追加されます。
そのToolsメニューからRPGM Importer→インポートしたいタイルの種類を選びます。
![ss-03.png](https://qiita-image-store.s3.amazonaws.com/0/240304/8517e4ba-74cd-57d5-75e0-ad9f4e53c9f8.png)

##オートタイル素材を読み込む
開かれたImporterのウィンドウ内のLoad Imageをクリックし、Importerの種類にあったオートタイル画像を開きます。
成功すれば以下のように各オートタイルが表示されます。
（このA1タイルの場合は、この時点で実際にアニメーションしているけど、編集時は動画撮れる環境ではなかったので許してくださいなんでも（ｒｙ）
![ss-04.png](https://qiita-image-store.s3.amazonaws.com/0/240304/f8e1d5fa-b78c-4ef8-56f5-0e04baec93d6.png)

##オートタイル生成
必要なタイルにチェックを入れ、Generate Tilesボタンをクリックします。
環境にもよりますが、ちょっと待てばプロジェクト内の
Assets/RPG_Maker_Tiles_Importer/_rtp_auto_tiles/素材ファイルの名前
というフォルダが生成され、その中にオートタイルが生成されています。
![ss-05.png](https://qiita-image-store.s3.amazonaws.com/0/240304/78e122d4-fcf8-9d7e-89d2-8d4f3c5fa773.png)

#まとめ
ぶっちゃけこの記事読むより公式の動画見た方が早いし分かりやすいので、実際参考にする際は公式の紹介動画（英語）をきっちり見た方がいいです（本末転倒）
いずれにせよ、「このアセットは私みたいな状況に陥った人にはとてもおすすめなので、ぜひ購入して2DのRPGとかローグライク作ろうぜ！」というお話でした。

#参考

- [RPG Maker Auto Tile Impoter](https://assetstore.unity.com/packages/tools/sprite-management/rpg-maker-auto-tile-impoter-103504)
- [Unity3D Rpg Maker Tile Importer - Indie Gear Lab](http://www.indiegearlab.com/unity3d-stuff/unity3d-rpg-maker-tile-importer)

#最後に一言
![ss-02.png](https://qiita-image-store.s3.amazonaws.com/0/240304/53751bba-7e2d-4982-aadc-8263434af5e2.png)
アセット名はImpoterなのに内部フォルダ名はImporterという謎
~~（誤字にマジレスするな）~~
コードを書く人だけが知っているプログラミングの基本

# まえがき
釣りみたいなタイトルで申し訳ないです :bow: 
久しぶりにプログラミングして、インターンとかで頻繁にコードを書いている人にコードレビューしてもらいました。
めちゃめちゃ勉強になったのでその途中で気づいたことをまとめます。
「今回の僕が個人的に気づいたこと」というだけで、普遍性があるものではないかもしれません。
あくまで目安くらいに考えていただけるとありがたいです。
意見や感想などある方はコメントしていただきたく思います。

# 本編
久しぶりにプログラミングして、コードレビューしまくってもらいました。
大量のコメントをつけてもらったのですが、その修正案の中に共通するものがあることに気づきました。
それは、**命名** です。
今回は特に **関数の命名** について書いていきます。

### 関数命名の大前提

- 関数には要素がある
    - **主語**
        - この関数を扱う主体は誰か
    - **述語**
        - この関数は何をするか
    - **目的語**
        - この関数は何を扱うものか


- 関数は主語か目的語のクラスに置く
    - 置けなければ以下を確認する
        - 関数に複数の要素を持たせていないか
        - 他の変数や関数の配置が正しいか

- クラス名以外の関数の要素を関数名に含ませる
    - 述語と目的語が「○○の値を知る」「○○の状態を確認する」などなら「get」
    - 述語と目的語が「○○の値を変える」「○○の状態を設定する」などなら「set」
    - 述語と目的語が「○○かどうかを知る」などなら「is」で返り値はBoolean
    - 他の関数と区別ができるように、修飾語もきちんと付ける

### 例
- 「Player」が「Card」を「Playする」関数

```kotlin
class Player{
    fun playCard(): Card{
```

- 「Player」が「Playしているかどうか」を「知る」関数

```kotlin
class Player{
    fun isPlaying(): Boolean{
```

# まとめ

僕もプログラミングを始めた一昨年くらいまでは **プログラムなんて動けばいい** と思っていたのですが、実際に **後からコードが読めない事態に陥る** ことが増えてからは、少し気をつけているつもりでした。
しかし、今回のコードレビューで原則がわかり、今度こそ読みやすいコードが書けるようになったのではないかなと思います。
GoogleColaboratory使ってみた

# はじめに

仕事で機械学習に携わる機会があったのですが、
家で機械学習を勉強しようと思うと Python の環境の用意が結構面倒だと思っていました。

・・・が、色々探していたら GoogleColaboratory を使えばすぐ始められるようですので使ってみようかと思います。

# GoogleColaboratory とは

すごい端的に言うとGoogleが提供しているWEB上で開発ができるサービスです。
サーバーとか用意しなくてもいいし大変楽です。

下記にアクセスすると使えます。

[GoogleColaboratory](https://colab.research.google.com)

アクセスすると下記のような画面がでますので「Python3の新しいノートブック」をクリックすれば開発が始められます。

![TOP.png](https://qiita-image-store.s3.amazonaws.com/0/151981/cb747ad8-36d8-3f98-27b8-027d4473f6cb.png)

下記が開発画面です。とりあえず伝統の hello world を書きました。
pythonでプログラム書いて「Ctrl＋Enter」すれば実行できます。

![GC01.png](https://qiita-image-store.s3.amazonaws.com/0/151981/07ef3c48-1181-e99e-de80-735b64be31b0.png)

# おわりに

今回の記事は使ってみたなのでこれで終わりにしようかと思います。
【Android】月額課金まとめ

月額課金の実装の時にあれこれ調べたりしたので、そちらの内容をまとめます。
プログラムコードまで記載すると長くなってしまいそうだったので、あくまでも月額課金の概要まとめです。

## 1.月額課金の設定項目
月額課金では請求対象期間や無料試用期間などが設定出来ます。項目はこちらです。

![スクリーンショット 2018-12-15 13.06.55.png](https://qiita-image-store.s3.amazonaws.com/0/325007/c8aeeb28-2841-c23f-9849-896b39b26c89.png)

![スクリーンショット 2018-12-15 13.13.11.png](https://qiita-image-store.s3.amazonaws.com/0/325007/37a7942c-e735-8a56-2b35-e6f9ed2435b1.png)


- 価格 -> 月額の金額を設定(税抜きなので注意)
- 請求対象期間 -> 週間、月別、3ヶ月、6ヶ月、年間が選択できます。こちらがどのタイミングで請求するかの設定です。利用しているプロジェクトでは月別(月額)を利用してます。
- 無料試用期間 -> 記載の通り、最初の何日間は無料といった設定が可能です。
- お試し価格 -> 新規登録ユーザーの場合に最初の何ヶ月は割引出来ます。期間などは比較的自由に設定出来ます。
- 猶予期間 -> ユーザー側で何か問題(クレジットでの引き落としが出来ないなど)があり、対象の請求日に請求が出来なかった場合に猶予期間を設けます。なし、3日間、7日間が設定可能です。
猶予がある場合、その期間まではレシートも有効になっていたはず。1日毎にレシートの有効日が更新される形。請求が出来なかった場合はその期間を持って、レシートの有効期限も切れます。
その期間内に請求出来た場合は期間は元の状態で請求されます。
請求の仕組みは次の項目で説明します。

そのほかは特に設定値としてそこまで重要なものでは無いので割愛します。

## 2.月額課金の更新
月額課金は当日に購入してから、1ヶ月後に再度請求される仕組みになっています。
例えば、12月15日に課金した場合、次の請求は1月14日になり、それ以降は毎月14日に請求がされるようになります。

2018/12/15に購入した場合
![スクリーンショット 2018-12-15 13.45.41.png](https://qiita-image-store.s3.amazonaws.com/0/325007/0a5fa4d3-9085-5bff-9978-66c56d57195f.png)

2018/12/31に購入した場合
![スクリーンショット 2018-12-15 13.45.35.png](https://qiita-image-store.s3.amazonaws.com/0/325007/1c946a82-fd2f-ad88-879b-e02015051ba9.png)


＊データによって1日ずれが発生することはあるようなので、こちらの画像が全てのパターンではありません。

アプリ側としては意識してないですが、サーバ側で1日1回レシート情報をチェックし、月の更新がある場合はそちらを更新するようにします。

3.月額課金のアップグレード、ダウングレード
Androidの場合のアップグレード、ダウングレードは管理画面で設定するわけではなく、アプリ側のメソッドで制御します。getBuyIntentToReplaceSkusメソッド(現在はgetBuyIntentExtraParamsを推奨)を使って、現在のアイテムを対象のアイテムを渡して、更新するような形です。
プログラムコードは説明が長くなってしまうので、今回は割愛。
iOSの場合は管理画面上で優先度みたいなものをつけて設定します。そのため、実装方法は若干異なります。

また、アップグレード、ダウングレードした場合の次回請求日ですが、こちらがやや複雑です。
Google Play側ではアップグレード、ダウングレードしたタイミングで金額を返金などで対応しません。
そのため、余っている分はアップグレード後、ダウングレード後のプランの価格で日数換算し、適応される形になっているようです。
参考資料：定期購入のアップグレードとダウングレード https://developer.android.com/google/play/billing/billing_subscriptions?hl=ja

ちょっと分かりにくいかもしれないですが、イメージとしては下記のような形です。

![スクリーンショット 2018-12-15 14.12.26.png](https://qiita-image-store.s3.amazonaws.com/0/325007/4e65e37a-cf44-bff2-ca9e-8532e84d659f.png)


そのため、期間が延長されるような形になります。ダウングレードも同様っぽいので、ダウングレードした際は日にちによってはかなり期間延長がされると思います。

4.その他
- アプリの実装で考慮すべき点
レシート情報の復帰処理を出来るようにしておく必要があります。サーバ側になんらかの原因でレシート情報が送れなかった場合に、購入済みのレシートを再度取得し、サーバに送付します。
ユーザ側でもこの処理が実行できるようにプロジェクトでは課金画面などにボタンを置いてます。

- 注文IDの保存
ユーザに対して払い戻しなどの課金情報に対して何かしら対処が必要なことが発生するかと思います。その際に管理画面から対象の課金情報を検索する場合にこの注文IDが必要です。

下記画像の一番左の項目です。


4.まとめ
ざっと、Android側の月額課金の内容について記載してみました。月額課金を導入検討されている方の参考になれば幸いです。
もし、内容で間違っているなど、追記してほしいなどありましたらご連絡ください。
matplotlibでpng保存するときに `_tkinter.TclError: no display name` とか怒られる場合の対処方法

Ubuntu 18 のGUIなし環境での話です。
いまさら感はあるし、それほど流行らない使い方だけど、何度か調べてだんだん面倒になってきたので、自分が腑に落ちる形でまとめる。

GUIを使っていないときに、よく怒られる。

```
_tkinter.TclError: no display name and no $DISPLAY environment variable
```

### 対処方法1: システム側の設定を変える
システム管理者で、かつバックエンドがシステム共通でよい場合は、
/etc/matplotlibrc の backend を Agg 変える。

インストールの仕方によっては、設定箇所が異なるかもしれない。

### 対処方法2: ユーザ側の設定でどうにかする
システム管理者でないか、バックエンドが個人の嗜好による場合は、次のように環境変数を設定した状態で Pythonプログラムを動かせばよい。

```bash
MPLBACKEND=Agg; export MPLBACKEND
```

### 対処方法3: プログラム側の設定でどうにかする
システム側のバックエンドを変えることができなかったり、システム依存、つまり、動かすシステムにより挙動が変わってしまうプログラムにしたくない場合は、こんなコードを差し込む。

```python
import matplotlib
matplotlib.use('Agg')
import matplotlib.pyplot
```

### 参考

- [Environment Variables — Matplotlib 3.5.0 documentation](https://matplotlib.org/3.5.0/users/faq/environment_variables_faq.html)
DjangoでCSSの変更が反映されない時に試してみて欲しいこと

## 開発環境
- macOS 10.13.6
- PyCharm
- Django 2.1.3
- Chrome

## CSSの変更が反映されないのだが

CSSを変更したのに、反映されなくてちょっと困ったので、私のケースで解決した方法を記しておきます。

反映されてないのを見つけて、まず以下のことを試しましたが、うまくいきませんでした。
- runserverし直す
- chromeを再起動させる

## スーパーリロードしたら反映された

chromeには普通のリロードの他に、スーパーリロードなるものがあります。

ページが参照している外部ファイルについては、キャッシュを使わずにリロードできるというやつです。

Command + Shift + Rで実行可能。

こいつで解決することができました。

当初、私はsettingsの問題かなと思ってしまい、時間を取られました。

css反映されないなあと思ったら、とりあえずスーパーリロードしてみてください。
WindowsのXAMPP環境下でPHPのLDAPとIMAPを有効化

#内容
```php.ini
extension=php_ldap.dll
extension=php_imap.dll
```
#参考
https://ameblo.jp/itboy/entry-12017089952.html
http://www.itbox4vn.com/2013/07/how-to-install-php-imap-xampp.html
https://blog.e2info.co.jp/2016/05/07/php_imap/
Udemy 「手を動かしながら2週間で学ぶAWS基本から応用まで」を修了した

#受講前
AWS?聞いたことあるけどクラウドにデータを保存ってなんか怖い
VPS借りて自前でサービスをインストールすればいいんでしょ？

#14日間の流れ
動画～ハンズオン形式
こまかい流れはUdemy参照

#無料枠を越えて課金されるポイント
その日の修了時に戻す設定があるが忘れないこと
##Day1 CloudTrailの設定
ログを記録しているとS3の「2,000 Put Requests of Amazon S3」をすぐに越える
私の場合、途中で止めながらで修了時に「$0.02」
CloudTrailで$0.01
##Day2 ElasticIPアドレスの設定
講座中にも触れられている
1つまでは無料だが割り当てたEC2インスタンスが停止、もしくは割り当てられないと課金
IPアドレス自体を解放すること
##Day4 NATゲートウェイ
そもそもこれは無料枠に含まれない
「3 Hrs$0.19」
##Day5 RDS(マネージドDBサービス)
マルチAZ構成は無料枠に含まれない
転送量と起動時間によるが「$1.35」
##Day8 Route53(DNS)
25 Hosted Zonesまで「$0.5」

#受講後
無料枠の範囲内であればまあ個人でサービスを開設等は気楽に使えるかも
12ヶ月を越えるまでにはマネタイズできるかどうか解ってるだろうし
仕事ならRDSを使うけど個人サービスならDBはWebサーバのインスタンス内かなあ
Prologで一筆書き

#はじめに
Prologで一筆書きをするプログラムを書きました。

#オイラーの定理
ケーニヒスベルクの橋の問題はポピュラーです。数学者オイラーはグラフ理論におけるオイラーの定理を証明し、ケーニヒスベルクの橋の問題は解決しました。次の図形はオイラーの定理によれば一筆書きができるはずです。
![ArcSoft_画像225.PNG](https://qiita-image-store.s3.amazonaws.com/0/33927/cac9734b-2a20-c293-4bbb-886e1a56693b.png)

これをPrologで解いて楽しみましょう。

#アイディア
頂点と辺に次の図のように名前をつけました。

![ArcSoft_画像226.PNG](https://qiita-image-store.s3.amazonaws.com/0/33927/e5b399a5-8cb0-89c5-260a-dcbc9f23fe68.png)

すべての辺をリストにして初期値とします。移動可能なルートをroot/3として記憶しておきます。

```prolog

root(a,b,ab).
```

これは頂点、a,bが辺abによりつながることを意味しています。移動可能なルートをバックトラックによりしらみつぶしに調べます。このとき通過した辺は辺のリストから削除します。辺のリストに移動しようとしている頂点への辺が存在しなければ失敗します。他のルートを当たることになります。最終的にすべての辺を通過し辺のリストが[]になったときが一筆書きが成功した場合です。このときにはその追加してきた頂点のリストを画面出力します。

#実行結果

```prolog

O-Prolog Ver 1.62(Chika)
| ?- ['one-stroke.pl'].
yes
| ?- run.
[c,e,a,b,c,d,e,b,d]
[c,e,a,b,c,d,b,e,d]
[c,e,a,b,d,e,b,c,d]
[c,e,a,b,d,c,b,e,d]
[c,e,a,b,e,d,b,c,d]
[c,e,a,b,e,d,c,b,d]
[c,e,b,c,d,e,a,b,d]
[c,e,b,c,d,b,a,e,d]
[c,e,b,d,e,a,b,c,d]
[c,e,b,d,c,b,a,e,d]
[c,e,b,a,e,d,b,c,d]
[c,e,b,a,e,d,c,b,d]
[c,e,d,b,e,a,b,c,d]
[c,e,d,b,a,e,b,c,d]
...
[d,c,e,d,b,a,e,b,c]
[d,c,b,d,e,a,b,e,c]
[d,c,b,d,e,b,a,e,c]
[d,c,b,e,a,b,d,e,c]
[d,c,b,e,d,b,a,e,c]
[d,c,b,a,e,b,d,e,c]
[d,c,b,a,e,d,b,e,c]
yes

```

ｄかｃからスタートする場合だけしか一筆書きができないようです。手で書いてみていくつか確かめました。全部は確認していないのですが、良さそうな感じです。


#コード
Prologだと短い行数で書けてしまいます。この手の問題に向いています。これをC言語などで記述しようとすると、けっこう手間がかかると思います。

root/3　頂点と辺のデータ
run/0　メイン述語
node/1　すべての頂点のリスト
edge/1　すべての辺のリスト
solve/1　リスト中のすべての頂点からスタートして一筆書きができるかどうかを調べ、可能なら表示する。
solve1/3　第一引数をスタート地点、第二引数を辺のリストとして、一筆書き可能なら表示する。バックトラックにより網羅する。
delete/3　第一引数のリストから第二引数を削除したものを第三引数にunifyする。削除するものがない場合には失敗する。

```prolog

root(a,b,ab).
root(b,c,bc).
root(b,d,bd).
root(b,e,be).
root(c,e,ce).
root(c,d,cd).
root(d,e,de).
root(e,a,ae).

node([a,b,c,d,e]).
edge([ab,bc,bd,be,ce,cd,de,ae]).

run :- node(N),solve(N).

solve([]).
solve([N|Ns]) :-
   edge(E),solve1(N,E,[N]).
solve([N|Ns]) :-
  solve(Ns).

solve1(X,[],R) :- reverse(R,R1),write(R1),nl,fail.
solve1(X,E,R) :-
  root(X,Y,E1),
  delete(E,E1,E2),
  solve1(Y,E2,[Y|R]).

solve1(X,E,R) :-
  root(Y,X,E1),
  delete(E,E1,E2),
  solve1(Y,E2,[Y|R]).

delete([X|Xs],X,Xs).
delete([X|Xs],Y,[X|Z]) :-
  delete(Xs,Y,Z).

```
Scalaによる末尾再帰を使った 関数型プログラミング

# はじめに
以前投稿した記事「[Scalaハンズオンで学んだ関数型プログラミング](https://qiita.com/DaisukeKURATA/items/ac4d6cebed6330a4b4cc)」で紹介したコードではスタックオーバーフローを起こしてしまうので、末尾再帰を使いましょうという話をちらっとさせていただきました。本記事では、末尾再帰についての補足説明をいたします。

# お題
フィボナッチ数列のN番目の数値を求めるメソッド
※フィボナッチ数列とは？
フィボナッチ数列のN番目の数値はN-2番目の数値とN-1番目の数値の和となる。
なお、1番目と2番目の数値は1とする。

# 前回の方法で解く
※Int型で収まらなくなる気がしたので、諸々をLong型に変えてあります。
## コード
1番目と2番目の数値は1, それ以外の数値は直前の2数（n-1番目の数とn-2番目の数）を足すという実装をしました。

```scala
def f(n: Long): Long = n match {
  case 1 => 1
  case 2 => 1
  case _ => f(n - 1) + f(n - 2)
}
```
10番目など再帰呼び出しの回数が少なければ問題がないのですが、回数が増えていくとスタックオーバーフローを起こしたり、OutOfMemoryErrorが発生したりするようです。
## 実行結果
私も試しに100番目の数を求めようと関数を実行してみました。
もはやエラーも発生せず、音沙汰なし。
JVMにビンタをしましたが、目を覚ましませんでした。

# 末尾再帰を使う
## 末尾再帰とは
関数を再帰呼び出しするときは、再帰関数の末尾で呼び出しましょうねということです。
以下のコードでは、関数gが自身の最後の処理で関数gを呼び出していることがわかります。
末尾再帰を使うことで、コンパイラが再帰関数をwhile式として最適化してくれるそうです。

## Scalaで末尾再帰をつかう
Scalaで末尾再帰を使うときは、関数に`@scala.annotation.tailrec`アノテーションをつけましょう。
末尾再帰になっていなかったらコンパイルエラーにしてくれるという優れものです。

## こういう風に組み立てるとやりやすいかもと思ったこと
末尾再帰の実装では、計算の途中経過（コレクションなど)を引数として与えるとうまく関数の定義ができそう。
今回の例では、計算の途中経過として、N-1番目とN-2番目の数値を引数に詰め込みました。

## コード
```scala
def f(n: Long): Long = {
  /**
    * フィボナッチ数列m番目の数値を求める関数
    * m => 今求めようとしている数値が数列の何番目かを表す
    * a => m-2番目の値
    * b => m-1番目の値
    */
  @scala.annotation.tailrec
  def g(m: Long, a: Long = 0, b: Long= 0): Long = {
    // 今求めるべきは2つ前の数と1つ前の数の和
    val result = (a, b) match {
      case (0, 0) => 1
      case _ => a + b
    }
    if (m == n)  now else g(m + 1, b, result)
  }
  g(1)
}
```

## 実行結果
`3736710778780434371`という結果が戻ってきました。もはや正しいのかが分からなくて、[ぐぐりました](http://www.suguru.jp/Fibonacci/Fib100.html)が、正解でした。

# さいごに
正直、関数型プログラミングのハンズオンを受けたときは、「これ、実務で使うの？」って思いました。
今回は、そもそも末尾再帰って何という話だったので平易な例になりましたが、実際に「プライベートで」プロダクトコードとして書いた末尾再帰の例について紹介したいと思います。
ARKit画像マーカーに適した画像適さない画像

# ダメな画像

## 模様が少ない画像

<img width="963" alt="スクリーンショット 2018-12-15 13.36.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/111366/005708a8-4994-caf8-a1b9-6e7b441821a8.png">

上図のような模様の少ない画像は使えるっちゃ使えるものの推奨されておらず、精度が下がってしまいます。

WWDCのsessionでも指摘されています。

![aj580.jpg](https://qiita-image-store.s3.amazonaws.com/0/111366/b1d37d9e-c0bd-317a-497c-22387b0491a3.jpeg)

https://developer.apple.com/videos/play/wwdc2018/602/?time=2236

## まだあるダメ条件
<img width="635" alt="スクリーンショット 2018-12-15 13.51.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/111366/139e1abf-0546-8554-4e44-7cb98bf4fc2b.png">

試しに明らかにダメっぽい画像をいれてみました。

- AR reference Image must have non-zero positive width
- AR reference Image the histogram of the image is narrow or not well distributed. Recognition works better on images with wider, flatter histograms.
- AR reference: The image has uniform color regions, low texture, or low contrast regions. Recognition works better when there are higher local contrast regions distributed across the image.
- AR reference: The resolution of the image is low. Both width and height should be at least 480 pixels

- **3:1より横長はダメ**
- **明暗がはっきりした方がいい**
- **色の均一領域広すぎダメ**
- **縦横480px以上**

といった感じ。

## まだまだあるダメ条件

先日書いた記事に[ARWorldTrackingConfigurationで画像認識を使うと固まる問題](https://qiita.com/k-boy/items/7ce8263392dfa7acaca4)というのがあるのですが、

AR Image Resourcesではアラート出ないけど、ビルドしたら固まる画像があります。(Xcode10.0現在)

- **pngじゃだめ。jpgが安全**

pngだとarkit起動した瞬間に固まることあります。しかも全く関係ないエラーログで。。。w

#良い画像

<img width="150" alt="スクリーンショット 2018-12-15 10.42.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/111366/70847cb2-925a-ca3b-1aac-06bd05584728.png">

こういう画像だと大丈夫です。下記の通りエラーが出ませんでした！

<img width="500" alt="スクリーンショット 2018-12-15 14.07.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/111366/a128c33b-2ae8-c903-fa31-e37bb132101c.png">


# まとめ

- **3:1より横長はダメ**
- **明暗がはっきりした方がいい**
- **色の均一領域広すぎダメ**
- **縦横480px以上**
- **pngじゃなくてjpgにすべし**
- 筋肉はすべてを解決してくれる
AngularMaterialを使ったDialog(モーダル画面)の実装

# はじめに
[Angularを使った業務アプリの環境](https://qiita.com/K-Masa/items/e5cc2b44095b04c1345a) でも書いているように、Angular Materialは無料のUI・UXライブラリーで非常に便利。そのライブラリーを使ったモーダル画面の実装方法をメモします。

![7a8afd5bfa1f6301dc5c0ef030cd137e.gif](https://qiita-image-store.s3.amazonaws.com/0/184967/75ea98fa-0ace-9d8a-1c02-add1b8ef0796.gif)


# 実装方法
[公式ドキュメント](https://material.angular.io/components/dialog/overview)を見ればそれで終わるのだが、要点を記載。

* `app.module.ts`にて、dailogコンポーネント(この例では`AppDialogComponent`)を、`declarations:[]`パラメータの他に、`entryComponents:[]`パラメータに設定。

```tsx:app.module.ts
@NgModule({
  declarations: [
    AppComponent, AppDialogComponent
  ],
  imports: [
　　　　　　　　・・・ 
  ],
  entryComponents: [
    AppDialogComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

```

* 呼び出し元のコンストラクターで、MatDialogサービスをDIさせる。
* MatDialogサービスの`open()`メソッドでDialogを開く。`config`パラメータで画面の大きさ(`width`・`height`パラメータ)の設定や、Dialogに表示させるデータ(`data`パラメータ)を渡す。

```tsx:呼び出し元(app.component.ts)
export class AppComponent {
  dialogData: DialogData = {
    name: '',
    animal: ''
  };
  // 1.MatDialogサービスのDI
  constructor(public dialog: MatDialog) {}

  openDialog() {
    // 2.サービスを使用してmat-dialogをopen
  　　const dialogRef = this.dialog.open(AppDialogComponent , {
      width: '90vw',
      height: '90vh',
      data: this.dialogData
    });
    
    // 3.はAppDialogComponentに記載

　　　　　　　　// ４.ダイアログを閉じた後処理    
    dialogRef.afterClosed().subscribe(
      result => {
        console.log('dialog was closed:', result);
        if (result !== undefined) {
          this.dialogData = result;
        }
      }
    );
  }
}
```
```tsx:呼び出し先(app.component.dialog.ts)
import ・・・
export interface DialogData {
  animal: string;
  name: string;
}

@Component({
  selector: 'app-dialog-component',
  templateUrl: './app.dialog.component.html',
  styleUrls: ['./app.dialog.component.css']
})
export class AppDialogComponent {

  //3.コンストラクターでDialogを参照するためのクラス(MatDialogRef<T>)をDI
　　　　//呼び出し元で設定したdataパラメータ(DialogData)を設定
  constructor(
    public dialogRef: MatDialogRef<AppDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData
  ) {}

  onNoClick(): void {
    this.dialogRef.close();
  }
}
```
```html:app.component.dialog.html
<div>
  <div>
    <p>こんにちは、{{data.name}}さん！</p>
  </div>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal" placeholder="好きな動物は？" >
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">閉じる</button>
  <button mat-button [mat-dialog-close]="data">OK</button>
</div>
```

`[mat-dialog-close]="data"`とすることで、dialog上で編集した`data`を呼び出し元で参照することが可能となる。
Rails Consoleをより良いものにするgemとTipsの紹介

## はじめに

皆さんは快適なRailsライフを過ごすのにRailsConsoleを欠かせないものですよね/
自分も検証はほとんどRails Consoleを使うほどのRailsConsoleジャンキーです。
そこで、RailsConsoleジャンキーにもおすすめなRailsConsoleをより良いものにするGemの紹介とRailsConsoleのTipsについて紹介します。

## Gem Pry

ド定番のGemですね。
導入方法はGemfileに以下の記述を入れるだけです。

```rb
gem 'pry-rails'
```

もともとのirbが以下のように表示されますが、

```irb
irb(main):016:0> Color.first
  Color Load (2.2ms)  SELECT  `colors`.* FROM `colors` WHERE `colors`.`deleted_at` IS NULL ORDER BY `colors`.`id` ASC LIMIT 1
=> #<Color id: 1, display_order: 1, name: "白", color_code: "#ffffff", created_by: "", created_at: "2016-10-11 19:22:13", updated_by: "", updated_at: "2016-10-12 20:34:28", deleted_by: "", deleted_at: nil>
irb(main):017:0>
```

pry-railsを導入すると

![pry-rails.png](https://qiita-image-store.s3.amazonaws.com/0/27126/ae416fbc-ead4-501e-fe77-645fbd593aba.png)


上記のように整列されて見やすくなりましたね。

他にもPryを導入したことによる機能として、

- `↑`キーで過去に使用したコードの検索
- `tab`キーでメソッドの補完
- `show-routes`コマンドで登録してあるRouteの表示
- `show-models`コマンドで登録してあるModelと属性を表示

などなどirbがより便利になります。

## Gem awesome_rails_console
Pryで大方きれいになりましたが、もっとConsoleをより良いものにしたい欲望(少なくとも自分は)が出たので、awsome_rails_consoleを導入します。

いつもどおりの

```rb
gem 'awesome_rails_console'
```

で導入できます。

で、どうなるかというと、

![pry-rails.png](https://qiita-image-store.s3.amazonaws.com/0/27126/ae416fbc-ead4-501e-fe77-645fbd593aba.png)

が

![awesome_rails_console.png](https://qiita-image-store.s3.amazonaws.com/0/27126/dfeab130-5389-fd42-8eeb-732adc43d03c.png)


になります。

- 整形されてより見やすくなる
- 色がカラフルになり見やすくなる
- enumに対応した値が表示される

といった要素が追加され、よりわかりやすくなりましたね🎉🎉
## Rails Console Tips

最後にRailsConsoleで使えるTipsを紹介します。

- Railsでの変更内容を更新する`reload!`
    
```console
Development [1] app(main)> reload!
```

上記のコマンドを実行すると、Railsで変更した内容をリロードして使用することができます。
ですので、変更したあとにconsole再起動しなくてすみます。

- コントローラで使用する`_path`, `_url`を確認する方法

`app.xxxx_path`または`app.xxxx_url`で確認できます。

```console
Development [1] app(main)> app_root_path
"/"
Development [2] app(main)> app_root_url
"http://www.example.com/"
``` 

- `↑`キーで過去に使用したコードの検索(Rails5.2.1で確認)
- `tab`キーでメソッドの補完(Rails5.2.1で確認)

実は上記2つの機能についてはRails5.2.1でデフォルトで実装されています。


## 参考文献

- [awesome_rails_console](https://github.com/ascendbruce/awesome_rails_console)
- [pry-rails](https://github.com/rweng/pry-rails)


---

RailsConsoleについて、よりよいgemやコマンド等ありましたらコメントよろしくおねがいします:pray::pray:


明日は @yuyasat さんです！
よろしくおねがいします。

(*) gem hirbについては、導入しましたが、こちらの環境では反映されなかったため、今回の紹介記事から省きました。:bow::bow:
論文解説：An Analysis of Encoder Representations in Transformer-Based Machine Translation[Raganato+18]

# Summary

Transformer[Vaswani+17]のattentionがどこに向いているのかを分析した。結果として、低次の層では表面的な文法に、高次の層では文の持つ意味に対してattentionが向く傾向にあることがわかった。

# Data

WMT18のshared taskで提供されたニュース翻訳文からなる対訳コーパスを用いる。

ダウンロード元：[http://data.statmt.org/wmt18/translation-task/preprocessed/](http://data.statmt.org/wmt18/translation-task/preprocessed/)

|言語|文数|
|:-:|--:|
|English-Czech|51,391,404|
|English-German|25,746,259|
|English-Estonian|1,064,658|
|English-Finnish|2,986,131|
|English-Russian|9,140,469|
|English-Turkish|205,579|
|English-Chinese|23,861,542|

# Model settings

OpenNMTによる実装でのTransformerモデルを使用。ハイパーパラメータは[Vaswani+17]の設定に従う。データはBPE[Sennrich+16]によって未知語のない10万語彙にtokenizeされ、訓練は20 epochs行われた。

# Evaluation

4種類のアプローチからattentionの分析を行う。

## Visualization

<img width="726" alt="visualization.png" src="https://qiita-image-store.s3.amazonaws.com/0/127680/97970ebc-0197-eb44-fbd2-a759d2131f6a.png">

縦軸と横軸は同じ単語の並び"there/is/also/an/economic/motive/."である。

* 左から1枚目：自分自身へattentionが向いている
* 左から2枚目：前の単語へattentionが向いている
* 左から3枚目：前の単語へattentionが向いている
* 左から4枚目：文末へattentionが向いている

Transformerの最初の層では、一番左の画像のように、自分自身の単語にattentionが向いている。それがより高次の層になるにつれ、隣の単語へ、より遠くの単語へのattentionが向くようになってゆく。

## Inducing Tree Structure

<img width="627" alt="tree.png" src="https://qiita-image-store.s3.amazonaws.com/0/127680/f0e873a1-5bfd-855d-21f6-0a08ce7db8b4.png">

同じ層の中でも、Headによって近くの単語にattentionを向けているのか、遠くの単語にattentionを向けているのかが異なっている。

## Probing Sequence Labeling Tasks

機械翻訳のタスクで学習したEncoderのパラメータを使い4種類の異なるタスクを解かせることで、attentionがどのような働きを持っているのかを検証した。Decoder側はすべて一層のmulti-head attentionとFFNNからなり、またEncoderのパラメータは固定してDecoderのパラメータのみ更新する。

まずはタスクの概要を示す。

|タスク|タスクの解説|使用されたデータセット|データセットの規模<br>(train+test)|
|:-:|:-:|:-:|:-:|
|Part-of-Speech(PoS) tagging|単語の品詞を判定する|[Universal Dependencies English Web Treebank v2.0](http://universaldependencies.org/)|13,543文|
|Chunking|文を文節で区切る|[the CoNLL2000 Chunking shared task](https://www.clips.uantwerpen.be/conll2000/chunking/)|10,054文|
|Named Entity Recognition(NER)|固有表現抽出<br>（東京→地名、太郎→人名、等）|[the CoNLL2003 NER shared task](https://www.clips.uantwerpen.be/conll2003/ner/)|18,671文|
|Semantic Tagging(SEM)|文の意味を判定する|[Parallel Meaning Bank (PMB)](http://pmb.let.rug.nl/data.php)|67,090文|

各タスクのprecisionを測ったところ、PoS taggingやChunkingでは低次の層、NERでは中間の層、SEMでは高次の層で優れた結果が得られる傾向にあった。すなわち、低次の層は品詞や文節へのattentionを、高次の層は意味へのattentionを向けようとしていることがわかる。

## Transfer Learning

English-Germanの翻訳タスクで訓練したEncoderのパラメータをEnglish-Turkishの翻訳タスクの初期値に利用することで、利用しなかった場合に比べてよい成果を出した。

|モデル|newstest 2017|newstest 2018|
|:-:|:-:|:-:|
|baseline|6.93|6.22|
|Fine tuning|8.72|7.93|
|Transfer Learning|7.82|6.91|

Transfer LearningはEncoderのパラメータを更新しない。Fine tuningではTransfer Learningをした後でEncoderのパラメータを更新する。

# References

* [An Analysis of Encoder Representations in Transformer-Based Machine Translation[Raganato+18]](http://aclweb.org/anthology/W18-5431)
* [Neural Machine Translation of Rare Words with Subword Units[Sennrich+16]](http://www.aclweb.org/anthology/P16-1162)
* [Attention Is All You Need[Vaswani+17]](https://papers.nips.cc/paper/7181-attention-is-all-you-need.pdf)
【Android】Status barにTool barの色を基にした濃い色をセットする

この記事はand factory Advent Calendar 2018 Day 17の記事になります。
前日は@Yaruki00 の「[XCTestでアニメーションの結果を待つ便利メソッド](https://qiita.com/Yaruki00/items/11d9590beda50a0ba436)」でした。

## はじめに
アプリを新しく作成するときに、styleにステータスバー、ツールバーの背景色を指定できます。これでページごとに色指定をする必要がなくなり便利です。

ただ、やっぱり例外はあるもので、ページ毎で使う色数の増減や、個性（世界観？）をもたせたい場合などのデザイン要求が発生した場合は柔軟な指定が必要になると思います。

#### こちらを実装したコードを書きます。
- ステータスバーの色はツールバーの色を少し濃くした色にする




## イメージ
<img width="314" alt="スクリーンショット 2018-12-15 13.50.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/36517/f1f52c13-e457-d9ab-3b96-64d962432e5f.png">

ステータスバーの色はツールバーの色を濃いめにした感じです。

# 動作環境
Lolipop ~ Pie


# コード
```HogeActivity.kt
private void setupStatusBarColor() {
    if (Build.VERSION.SDK_INT >= 21) {
        int toolBarColor = R.color.morning_glory
        int statusBarColor = ColorUtils.compositeColors(ContextCompat.getColor(this, R.color.foreground_status_bar),
                ContextCompat.getColor(this,toolBarColor)); // ①
        getWindow().setStatusBarColor(statusBarColor);
    }
}
```

①
ステータスバーの色を生成しています。暗めの色（R.color.foreground_status_barはcolors.xmlで #20111111を指定）とツールバーの色の２つを指定しています。

このコードではツールバは薄い青、ステータスバーは濃いめの青をセットしています。


## 終わりに
簡単ですが以上です。良い感じに暗めの色を重ねる処理が実現できなかったのですがColorUtilsのメソッドを利用して実装しました。

## 参考
https://developer.android.com/reference/android/support/v4/graphics/ColorUtils
S3では使える特定prefix配下の権限制御がGCSでは使えない

## 3行でまとめ(時間がない人向け)
GCSはprefix指定による権限制御が不可能

* つまり、バケットの特定フォルダ(厳密にはprefix)配下へのアクセスのみを許可したサービスアカウントを発行する、といった制御が実施不可能
* GCSで設定可能な権限制御の単位は、**バケット**か**オブジェクト**のみ

## S3の場合
IAM policyにより、特定prefix配下の権限制御を設定可能

例: `hoge-bucket` に対して、`huga/`配下のみ、read権限を与えるIAM policy

```json
{
    "Sid": "ReadOnlyFuga",
    "Action": [
        "s3:ListBucket", 
        "s3:GetObject"
    ],
    "Effect": "Allow",
    "Resource": ["arn:aws:s3:::hoge-bucket"],
    "Condition":{"StringLike":{"s3:prefix":["huga/*"]}}
}
```

## GCSの場合
権限制御可能な単位は**バケット**または**オブジェクト**のみ

### バケット単位での権限制御
**IAM**で設定

例: サービスアカウント(`gs-hoge-readonly@xx.iam.gserviceaccount.com`)に対して、 `hoge-bucket`のread権限を付与。terraformによる例。

```
resource "google_service_account" "gs-hoge-readonly" {
  account_id   = "gs-hoge-readonly"
  display_name = "gs-hoge-readonly"
}

resource "google_storage_bucket_iam_member" "gs-hoge-readonly-objectviewer" {
  bucket = "hoge-bucket"
  role   = "roles/storage.objectViewer"
  member = "serviceAccount:${google_service_account.gs-hoge-readonly.email}"
}
```

### オブジェクト単位での権限制御
**ACL**で設定

例: サービスアカウント(`gs-hoge-object-readOnly@xx.iam.gserviceaccount.com`)に対して、 `hoge-bucket`の `huga/image.jpg`のみread権限を付与。terraformによる例。 

```
resource "google_service_account" "gs-hoge-object-readonly" {
  account_id   = "gs-hoge-object-readonly"
  display_name = "gs-hoge-object-readonly"
}

resource "google_storage_object_acl" "gs-hoge-object-readonly" {
  bucket = "hoge-bucket"
  object = "huga/image.jpg"

  role_entity = [
    "READER:user-${google_service_account.gs-hoge-object-readonly.email}",
  ]
}
```

## さいごに
AWSを使っていると、特定prefix配下のみの権限を許可したIAM roleを発行する運用がよくあるので、GCPでも当たり前にできるものかと思っていたら、出来なくて衝撃的だったので書いてみました。
Qiita、始めました

ブログを今日から始めようと思います。

#自己紹介
普段は都内でデータアナリストとして働いています。RとかPythonとか SQLを使っています。
「統計学や機械学習」を使って、自分の好きな企業・サービスの意思決定に役に立ちたいと思います！
記事の内容は、基礎的なことを書いていきます！

#とりあえず
予定としては、月に1記事程度かけたらと思っています。

###正直
Markdownあんまり知らないので、結構大変です。
pingを知ろう

はじめに
----
新人でも何気なく使っているpingコマンドですが、出てくる結果に対してしっかり把握している人は意外と少ないかもしれません。
ここでは、結果に関して書いていきたいと思います。

pingとは？
----
ICMPプロトコルを使用したネットワークの診断プログラムです。
pingコマンドにより宛先となるノードと通信できるかを確認することができます。
pingが成功すれば送信元と宛先とでIPの通信に問題がないことが証明され、pingが失敗すればIP上の通信に問題があると判断できます。

正常結果
----
Windowsのコマンドプロンプトでpingを実行した結果。「ping 192.168.0.1」を実行した結果です。
192.168.0.1に ping が成功しており、pingコマンドを実行したPCとIPでの通信が正常にできることを証明しています。
![Reply From.png](https://qiita-image-store.s3.amazonaws.com/0/315849/7e3687bf-9d94-66f7-e2c6-61e554ebc3a7.png)

```
ping 192.168.0.1

Reply from 192.168.0.1： byte=32 time<1ms TTL=128
Reply from 192.168.0.1： byte=32 time<1ms TTL=128
Reply from 192.168.0.1： byte=32 time<1ms TTL=128
Reply from 192.168.0.1： byte=32 time<1ms TTL=128 
```
※結果から以下の内容がわかります。

|表示結果|内容|
|:---------|:-----|
|Reply from|PINGが成功した場合に表示。| 
|byte=32|ICMPパケットのデータサイズ。デフォルトで32byteのデータが送信。|
|time<1ms|ICMPパケットの応答までに経過した時間。今回は1ミリ秒（0.001秒）時間を要したことが分かります。|
|TTL=128|何台のLayer3機器を通過することができるのかを示す。残り128台通過できることが分かります。|

タイムアウト結果
----
以下のように「Request time out :」と表示される場合、要求がタイムアウトされ宛先の機器と通信できないことを意味しています。
![time out.png](https://qiita-image-store.s3.amazonaws.com/0/315849/643f1b3f-74a8-353e-42a9-07fa88733671.png)

```
ping 192.168.0.1

Request time out :
Request time out :
Request time out :
Request time out :
```

ただし、WindowsファイアウォールのようにICMPだけをブロックしているケース、経路途中にあるルータなどでセキュリティ上の観点でICMP通信を制限しているケースなどでは、このメッセージが出力されても通信できないのはICMPの通信だけで、TCP/IPにおける通信が問題ないケースがあるので注意が必要です。


宛先ネットワークに到達できなかった場合
----
以下のように「Destination net unreachable」と表示されている場合はPINGが失敗しています。
![Destination net unreachable.png](https://qiita-image-store.s3.amazonaws.com/0/315849/809c26fb-c74f-33c9-d61c-ab8b16e782e4.png)

```
ping 172.16.0.1

Reply from 192.168.0.254：Destination net unreachable
Reply from 192.168.0.254：Destination net unreachable
Reply from 192.168.0.254：Destination net unreachable
Reply from 192.168.0.254：Destination net unreachable
```
172.16.0.1にPINGをした結果、172.16.0.1からの応答はありませんが、代わりに192.168.0.254 が応答している状態です。これは、192.168.0.254 まではパケットが到達したけれど、ルータの時点でルーティング情報がなくて、宛先ネットワークに対してパケット転送できなかったことを示しています。


宛先ホストに到達できなかった場合
----
以下のように「Destination host unreachable」と表示されている場合も、宛先ホストに到達できていないためPINGが失敗しています。
![Destination host unreachable.png](https://qiita-image-store.s3.amazonaws.com/0/315849/70eab51f-b356-0c76-fc74-f75d151616ba.png)

```
ping 172.16.0.1

Reply from 192.168.0.254：Destination host unreachable
Reply from 192.168.0.254：Destination host unreachable
Reply from 192.168.0.254：Destination host unreachable
Reply from 192.168.0.254：Destination host unreachable
```

このエラーは「net」ではなく「host」です。このエラーメッセージは192.168.0.254のルータまでは到達して宛先のネットワークへの到達性があるが、該当する機器（ホスト）に到達できない事を意味します。
または、この機器（172.16.0.1）へのルーティングが見つけられないことを意味するメッセージです。

おわりに
----
正常以外の結果もいろいろあると思いますが、何気なく正常だ！異常だ！と思うのではなく、出てきた結果に対してしっかりと理解して円滑な作業を行っていきましょう！
Next.js+Firebase HostingにMaterial-UIを導入する

## はじめに
この記事は、[HUITアドベントカレンダー2018](https://qiita.com/advent-calendar/2018/huit) 15日目の記事です。

## この記事について

[前回の記事](https://qiita.com/sono8/items/3c9bfaac7f35162563b7)でNext.jsとFirebase HostingによるSSRを行うWebサイトを作りました。
今回は、このWebサイトにMaterial-UIを導入し、見た目を整えたいと思います。
[Materia-UI公式サンプル](https://github.com/mui-org/material-ui/blob/master/examples/nextjs)の機能を、前回作ったWebサイトに適応させるという流れになります。
まだWebサイトをデプロイしていない方は前回の記事を参考にデプロイを完了させておきましょう。

## Material-UIとは？
Material-UIはReactでマテリアルデザインを実現するモジュールです。
サクッとイイ感じの見た目を実現するために使っている方も多いかもしれません。

## Next.jsでMaterial-UIを使うときの注意点

そんなMaterial-UIですが、通常通り使用するとSSRに対応してくれないため、一瞬スタイルが適用されていない画面が表示されたり、ページ幅がやたら長くなったりします。
この原因は、最初に送られてくるSSRされた静的なhtmlの方にスタイルが適用されないことにあります。
キチンとSSRに対応させる必要がある訳です。

## モジュールのインストール
まずは必要なモジュールのインストールを行います。
以下のコマンドを実行します。

```
$ npm i --save @material-ui/core jss prop-types react-jss
```

## _app.jsと_document.jsを追加する
_app.jsと_document.jsは、ともにNext.jsでSSRするときの設定を定義するためのファイルです。
_app.jsではAppコンポーネントを継承してページ間の遷移に関する挙動を定義します。一方、_document.jsではDocumentコンポーネントを継承してhtml属性を定義します。ここにMaterial-UIの設定を追加することで、Material-UIをSSRに対応させることができます。
その設定方法ですが、それぞれ**公式サンプルからコピペするだけでOK**です。
pagesフォルダ内にそれぞれのファイルを作り、[_app.js](https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_app.js)と[_document.js](https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js)を丸々コピペしましょう。

次に、MyAppコンポーネントが参照するgetPageContext.jsを追加します。
pagesフォルダと同じ階層にsrcフォルダを作り、その中にgetPageContext.jsファイルを作ります。
こちらも公式の[getPageContext.js](https://github.com/mui-org/material-ui/blob/master/examples/nextjs/src/getPageContext.js)の内容を**コピペすればOK**です。
srcフォルダという名前に抵抗があれば任意のものに変更して問題ありませんが、その場合は_app.jsファイル内のimport文を適切に変更してください。

ここまででNext.jsでMaterial-UIを使う準備が整いました。

## ページの見た目を変える
ここからは、React時と同様に好きなコンポーネントにMaterial-UIのコンポーネントを適用させてゆくだけです。
公式サンプルでindex.jsとabout.jsの見た目を変えているので、これも**コピペしましょう**。
- [index.js](https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/index.js)
- [about.js](https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/about.js)

## デバッグ
ページにスタイルが適用されているか、以下のコマンドで確認してみます。

```
$ npm run dev
```

[http://localhost:3000](http://localhost:3000)にアクセスします。
下の画像のようにスタイルが適用されていればokです。

![muidebug.png](https://qiita-image-store.s3.amazonaws.com/0/274982/e111664b-441a-a657-084b-f6d3804801f1.png)

お疲れ様でした。

## さいごに
はい、というわけで**圧倒的コピペ大会**でした。
やはりスタイルを適用するとサイトを更新していくモチベがグッと高まって良いですね。
それでは。

## 参考
- [material-ui/examples/nextjs at master · mui-org/material-ui](https://github.com/mui-org/material-ui/tree/master/examples/nextjs)
Linuxエミュレーション

MIPS SOCのメーカーからGPLのコードと一緒に提供されるtoolchainのバイナリはすべてLinux用なのでFreeBSDではそのままでは使えません。最近だと仮想マシンでLinux環境を用意する人が多いかもしれませんが、私は貧乏なので仮想マシンを借りる事ができません。

昔はgccやbinutilsをビルドする事を試していましたが、これ自体が大仕事になり、最近はFreeBSDのLinuxエミュレーションでLinux用のtoolchainを使っています。

以下のような物をFreeBSD/amd64上でビルドしています

* RedBoot
* u-boot
* 蟹さんのブート
* rtlbm-mruby
* bcmbm-mruby

ほとんどのtoolchainはi386(32bit)のgcc 4です。gcc 4は偉大で既存のコードをビルドしてもほとんどコンパイルエラーが出ません。

蟹さんはlexraでインストラクションがmipsと違うところがあるようなので、普通にgccをビルドしてもダメだと思います。また蟹さんのtoolchainはなんだかよく分からないコンフィグレーションになっています。

FreeBSDのpkgでmips用gcc 6をインストールしてみて、newlibをコンパイルしようとしたら、気が遠くなるほどエラーが出てあきらめました。

それぞれの開発環境はjailの下においているのですが、Linuxエミュレーションを使う場合は親のホストで以下を実行します。

```
% sudo kldload linux
```

いつも使うのであれば/etc/rc.confに以下を書いておくと良いです。


```
linux_enable="YES"
```

jailの中では以下を実行しておきます。

```
% sudo pkg install linux_base-c6
```

linux_base-c6はCentOS6相当でlinux_base-c7がCentOS7相当のようです。

これでgccなどが使える状態になります。

```
 % file mipsel-linux-uclibc-gcc
mipsel-linux-uclibc-gcc: ELF 32-bit LSB executable, Intel 80386, version 1 (SYSV
), dynamically linked, interpreter /lib/ld-linux.so.2, for GNU/Linux 2.2.5, stri
pped
% ./mipsel-linux-uclibc-gcc -v
Using built-in specs.
Target: mipsel-linux-uclibc
Configured with: /home/gracecsm/toolchains/src/toolchains/linux-2.6/buildroot/to
olchain_build_mipsel/gcc-4.2.3/configure --prefix=/projects/hnd/tools/linux/hndt
ools-mipsel-linux-uclibc-4.2.3 --build=i386-pc-linux-gnu --host=i386-pc-linux-gn
u --target=mipsel-linux-uclibc --enable-languages=c,c++ --disable-__cxa_atexit -
-enable-target-optspace --with-gnu-ld --with-gmp=/home/gracecsm/toolchains/src/t
oolchains/linux-2.6/buildroot/toolchain_build_mipsel/gmp --with-mpfr=/home/grace
csm/toolchains/src/toolchains/linux-2.6/buildroot/toolchain_build_mipsel/mpfr --
enable-shared --disable-nls --enable-threads --disable-multilib --with-abi=32 --
with-tune=mips32
Thread model: posix
gcc version 4.2.3
```

toolchainのpathはそれぞれ違うので、.cshrcとかには書かずに個別にファイルに書いておいてsourceして設定しています。

スピードもネイティブとほとんど変わらない気がします。newlibはもともとすごく時間かかるんですが、コンパイラーのコンフィグレーションにもよっていて、蟹さんのツールチェインだとすごく時間かかるんですが、これはエミュレーションの問題ではないと思います。

toolchainを使ったビルドにはmakeコマンドを使うのですがifの書き方がGNU makeとBSD makeで違います。Linuxエミュレーションを使っていながらBSD makeに依存するのはちょっと変な気がしたので、両方で使えるように以下のようにしました。

```
# Default configuration is 'RTL8196C'
TARGET = RTL8196C

include $(TARGET).mk
```

RTL8196C.mkとRTL8196E.mkにそれぞれの設定を書いておいて、そのままビルドするとRTL8196CでビルドされますしRTL8196Eでビルドしたい場合は、以下のようにします。

```
% make TARGET=RTL8196E
```

まったく問題なく大変便利です。この話をある人にしたら「Linuxでいいじゃん」と言われてしまいましが、やっぱりBSDが好きなんですよね。

追記：

gdbを実行したところlibexpat.so.0が無いとエラーになります。いろいろ調べたところ、linuxのexpatのpkgがありました。

```
$ pkg install linux-c6-expat
```

ところがこれでインストールされるのはlibexpat.so.1でした。しかたなく/compat/linux/libでlibexpat.so.0のシンボリックリンクを作りました。
ISMS基礎情報


##ISMSとは
情報セキュリティに関する国際規格の1つまたその取り組みです。「情報セキュリティマネジメントシステム」とも呼ばれています。リスクマネジメントプロセスを適用することによって情報の機密性、完全性及び可用性を維持・改善し、リスクを適切に管理しているという信頼を関係者（取引会社や顧客）に与えることにあります。そのためには、ISMSを、組織のプロセス及びマネジメント構造全体の一部としてかつその中に組み込むことが重要です。


##情報セキュリティの３要素
前述しましたが情報セキュリティの要素は３つあります。

■機密性
悪意のある利用や人的ミスを防ぐためのアクセス権等の設定
・情報漏えい防止、アクセス権の設定などの対策を講じる

■完全性
意図しない情報の変更を防ぐために行う改ざん防止策やウイルスの検出ソフトの導入
・改ざん防止、検出などが行える仕組み（システム導入など）作る

■可用性
情報資産を必要なときに使用できるようにしておくこと
・電源対策（UPS導入、自家発電用のタップなど）、システム二重化、バックアップ、災害復旧計画（BCP）などの対策を講じる



##ISMS認証を取得するメリット・デメリット
メリットとしては、社内のセキュリティを制度として向上させられる点です。自社で取り扱う情報資産を個別にどのように管理し、取り扱うのかなど具体的な利用方法に関して詳細に取り決めを行うので高水準なリスク管理が行えます。またISMSを取得することで、外部の取引先企業や顧客への信頼感を生める点です。全社的に情報セキュリティ対策を継続して実施していることを外部に証明できますのでメリットが大きいです。その一方デメリットとしては、社内に新たな制度を導入することで発生する工数です。また上長からの承認が必要になるケースもあるため、どうしても業務工数が増えてしまいます。そのため、人事総務部や営業部など個人情報や契約情報などの情報を扱う部門は手続きが今まで以上に面倒になる可能性が高いです。

##プライバシーマークとの違いについて
情報セキュリティという観点からプライバシーマークと類似しています。
ISMSは国際標準規格および日本工業規格に準拠した取り組みですが、プライバシーマークは日本工業規格に準拠した取り組みです。対象となる範囲も異なり、ISMSは全ての情報資産であるのに対して、プライバシーマークは個人情報に特化しています。

##ISMS取得の大まかな流れ
第三者機関に申請し審査を受けることで取得できます。

■流れ
１、２、３、７に関しては認識合わせや進捗確認など各フェーズの打合せを適時実施することが
望ましい


１、適用範囲の決定
２、セキュリティに対する方針の作成
３、リスクアセスメントと実施手順の策定
４、社内教育と導入
５、内部監査とマネジメントレビュー
７、５を踏まえてのドキュメントの加筆、修正
６、審査機関による審査

■適用範囲の決定
全社的に行うこともできますが、部署単位での認証可能。

■セキュリティに対する方針の作成
なぜ取得するのかといった方針を決めなければいけません。上述した情報セキュリティの三大要件に基づき、方針を定めた文書を作成していきます。これを外部の企業や顧客へ開示する上でも必要になります。

■社内教育と導入
全従業員に実施必要があります（実施履歴も残します）。上記で定めた方針と手順書を元に、社員への教育を実施します。

■内部監査とレビュー
社内での実施した後に、内部監査担当者によって実施の状況やISMS認証が有効な取り組みとして実施されているかをチェックします。その後２で決めた方針を包括しているかどうか、他に改善策は考えられないかなどを見直すレビューを行います。

■審査機関による審査
第三者機関による審査が行われます。審査に１日目は文書審査と２日目は社内での実施状況をチェックする現場審査があります。（経営者・役員や各部署の管理監督職などはインタビューもありますので以前審査を受けたときは対応が結構大変だった記憶があります...）


##最後に
審査にあたり全社的な情報資産の洗い出しやリスクアセスメント策定が必要になるため労力はかかりますが、セキュリティ上のリスクを考えると得られるメリットはとても大きいです。
--minifyオプションが使えるHugoのDockerコンテナを作った

[minifyオプションが使えるHugoのDockerコンテナを作った](https://xn--v6q832hwdkvom.com/post/minify%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%8C%E4%BD%BF%E3%81%88%E3%82%8Bhugo%E3%81%AEdocker%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%9F/)の抜粋版です

## Dockerfileで試行錯誤したい
Dockerfileを書くためにいちいちコンテナをビルドしていたら完成前に挫けてしまう  
Dockerfileを作成する前にいろいろ試行錯誤する  

```shell
$ docker run -it ubuntu:18.04 sh 
# # ここからコンテナ内
# ここで試行錯誤したいコマンドを次々実行してみる
# exit
# # これでコンテナから抜ける
```
うまくいったものだけをDockerfileに書き残す

## とりあえず書いてみたDockerfile
```dockerfile
FROM ubuntu:18.04

## Ubuntu18.04の環境を構築する
RUN set -x && \
 apt-get update -qq && \
 DEBIAN_FRONTEND=noninteractive apt-get -y -qq install wget language-pack-ja && \
 update-locale LANG=ja_JP.UTF-8 && \
 echo export LANG=ja_JP.UTF-8 >> /root/.bashrc && \
 rm -rf /var/lib/apt/lists/*

## Hugoをインストールする
RUN set -x && \
 wget -O /root/hugo_latest_Linux-64bit.deb https://github.com/gohugoio/hugo/releases/download/v0.52/hugo_0.52_Linux-64bit.deb && \
 dpkg -i /root/hugo_latest_Linux-64bit.deb && \
 rm /root/hugo_latest_Linux-64bit.deb

EXPOSE 1313

CMD test -f /website/local.sh ; /website/local.sh
```

`/website/local.sh`はコンテナにマウントするパス(=コンテンツを永続化するための置き場所)に

```shell
$ cat local.sh 
#!/bin/bash
hugo server --bind=0.0.0.0 --baseUrl="//localhost/" --theme=[なにか適当なテーマ] –-buildDrafts --buildFuture --minify
```
な感じのスクリプトを書いておくと、コンテナを実行するだけでHugoのローカルサーバーを使っていい感じに作業ができる

## Dockerイメージをビルドする
```shell
$ docker build -t hugo:v052 .
```

## Dockerコンテナを実行する
```shell
docker run -it --rm -p 1313:1313 -v /Volumes/website/takeuchi.tk:/website hugo:v052
```
Wio LTE Cat.1 LTEでのハンドオーバーを調べてみた。


#ハンドオーバー動画
前回のブログ[「LTE-M1で、あそんでみた。」](https://qiita.com/sachiki/items/9dd59b2dec020260e6d3)で作成した、
おもちゃを使ってハンドオーバーを、動画で見える化してみました。
動画をご覧ください。（GIFアニメーションなので画質は良くないです。）

![mv3.gif](https://qiita-image-store.s3.amazonaws.com/0/322143/f2afd219-6c04-09bc-fc85-5e334dd3c0d2.gif)


この動画で、大きい基地局エリアの中の小さい基地局へ
ハンドオーバーしている動作を可視化する事ができました:v:

この時のハンドオーバーの画像です。
大きい基地局エリアから、
２つ目の画像で青い円で囲っている基地局に、ハンドオーバーしています。

![スクリーンショット 2018-12-16 10.45.39.png](https://qiita-image-store.s3.amazonaws.com/0/322143/f8eb82a3-dbc6-f7d5-b7bd-82ac38821630.png)

![スクリーンショット 2018-12-16 10.45.49.png](https://qiita-image-store.s3.amazonaws.com/0/322143/90ad73f3-e756-8f92-b7af-75400cd02a86.png)

赤いヤツ（Wio LTE Cat.1）を車に搭載しての
走行試験としては、30分ほどでした。
もっと走行試験すると、面白い何かを発見できる気がしています。

搭載時の画像
![IMG_1731.JPG](https://qiita-image-store.s3.amazonaws.com/0/322143/588736f1-b4b9-6f4e-9dad-d22bb361b5a7.jpeg)


最後に、LTE線香花火？:relaxed:
![名称未設定.png](https://qiita-image-store.s3.amazonaws.com/0/322143/e9e8244d-da32-e071-0863-049dcee53c71.png)
Markdown -> pandoc -> TeX と変換してドキュメント作成する手順

# Markdown -> pandoc -> TeX と変換してドキュメント作成する手順

コード断片・変数名・ファイル名（アンダースコアを含む）などの表現がMD, pandoc由来だと綺麗だった。
TeXのみでverbatimなどで調節するのはかなり困難だった。
よって、原稿作成にはTeXを使うものの、さらにそのマスターをMarkdownで作成する手法を確立する。


## 作業の手順

1. mdでドキュメント作成する（例：このファイル）
2. pandoc用includeファイルを用意
3. その他のincludeファイルも用意
4. TeXの本体ファイル作成
5. mdをpandocで変換
6. 変換したtexファイルのコピーして手修正（後述）する
7. mdの原稿を更新したらpandocで変換し、手修正のものとdiffを取りながらマージする

pandocはbrewでインストールする。
関連でTeXもbrewでインストール＋設定

### TeX側設定

以下を参考に
http://www.clas.kitasato-u.ac.jp/~fujiwara/MacTeX/

>TeXShop の設定を以下のように書き換えます．
>
>    1. TeXShop を起動し，環境設定を開きます．
>    2. 設定プロファイルから pTeX(ptex2pdf) を選択します．
>    3. OKを押して環境設定を終わり，TeXShopも一度終了します． （注：メニューの「TeXShop」から「TeXShopを終了」を選択する，ということ．） 


## 作業の詳細

```sh
pandoc -s test1.md -o test1_0.tex
pandoc test1.md -o test1_1.tex
cp test1_1.tex test1_2.tex
```

`test1_0.tex`から、必要なプリアンブルを取り出しincludeファイル `pandoc_pre.tex`にまとめる。
それ以外の自分用includeファイル`myheader.tex`も用意する。
texの本体ファイル`doc1.tex`を作成し、これらのincludeファイル、mdから生成する`test1_2.tex`をインクルードする。

`test1_2.tex`は`doc1.tex`をコンパイルした結果を見ながら適宜修正する
（この文章の場合だと次節の^hの部分とか）。
一方でマスター文書`test1.md`も別途更新する。
マスターのmarkdown原稿が更新されたら、上の手順で`test1_1.tex`を生成し、

```sh
diff -u test1_2.tex test1_1.tex
```

として新旧を比較して自分が手で修正した部分を踏みつぶさないように気をつけながら、ざっくり`test1_1.tex`から`test1_2.tex`に変更部分を貼り込んで置き換える。
コンパイルして不適切な箇所を探して`test1_2.tex`の方で修正する。


## そのほか

VScodeでmarkdownを編集していてdeleteを連打すると、なぜか文字の削除の他に^hが紛れ込む
**＆＆標準では制御文字が非表示なので紛れ込んだ^hが表示されず気づかない**。
pandocでmdからtexファイルを生成すると、そのなかにこの^hが引き継がれる。これは
texコンパイル時にエラーを出す。
VScode設定で`Editor: Render Control Characters`にチェックを入れる。


## ファイル

`doc1.tex`の構造

```tex
\documentclass[12pt]{jarticle}

\usepackage{newtxtext,newtxmath}

\def\thefootnote{\alph{footnote}}

\include{pandoc_pre}

\include{myheader}
\pagestyle{myheadings}

\title{まーくだうんから\TeX}
\author{わたし}
\date{\today}

\begin{document}

\maketitle

\tableofcontents
%\listoffigures
%\listoftables
\def\baselinestretch{1.25}

%%%%%%
\include{test1_2}

\end{document}
```

## もだんなTeXに追随する

jarticleの代わりにjsarticleを使おうとすると、フォントは大きくなるのに用紙サイズを正しく扱えてないように見える。

以下にあるように
https://oku.edu.mie-u.ac.jp/tex/mod/forum/discuss.php?d=507

```tex
\documentclass[12pt, a4paper]{jsarticle}
\usepackage[driver=dvipdfm,truedimen]{geometry}
```

とするらしい。

さらに、upLaTeXとやらを利用しようとすると

1. TeXShop環境設定の設定プロファイルで「upTeX (latexmk)」を選んでおいて
2. プリアンブルを以下に変更

```tex
\documentclass[12pt, a4paper, uplatex]{jsarticle}
\usepackage[driver=dvipdfm,truedimen]{geometry}
```
Python FlaskでRestful API を作る

#Flaskとは
Flaskとは、Pythonのための軽量なウェブアプリケーションフレームワークです。
Pythonで用いられるフレームワークとしてはDjangoも人気ですが、
簡単なLINEボットやスマートスピーカーのアプリなど、小規模〜中規模のWebアプリケーションであれば、Flaskで作成するのが軽量かつ早く作ることができるのでオススメです。

以下のようなMicrosoft AzureのVisionAPとリクルートのAPIの機能を組み合わせたインスタ映え診断（画像診断）ができるLINEのチャットボットをFlaskで作っています。
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">リクルートの人工知能APIとMicrosoftのVisionAPIを合わせた肉のインスタ映え診断LINEボット完成。言語はPython。環境はHerokuです。<a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a> <a href="https://t.co/D2k3x8rHJ9">pic.twitter.com/D2k3x8rHJ9</a></p>&mdash; さい (@saisan78) <a href="https://twitter.com/saisan78/status/1071775905918283776?ref_src=twsrc%5Etfw">2018年12月9日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#Flaskをインストールする
```
$ pip install flask
```

バージョンが不安な人はアップグレードをしておきましょう。

```
pip install --upgrade flask
```

#Hello Worldを試す

```python
@app.route("/")
def index():
    return "Hello World! ハローワールド!"

if __name__ == "__main__":
    app.run()
```

#GETでうけてJSONを返す
FlaskでGET通信を受けつけるにはmethodsにGETを指定することで、POSTリクエストを受けられます。

```python
@app.route('/get_request', methods=['GET'])
def post_request():
    output = {　##※ここのJSONフォーマットは自由だよ
        "version":"1.0",
        "response":{
                "outputSpeech":{
                    "type":"PlainText",
                    "text":"ハロー"
                }
            }
    }

    return jsonify(output)

```



#POSTでうけてJSONを返す
FlaskでPOST通信を受けつけるにはmethodsにPOSTを指定することで、POSTリクエストを受けられます。

```python
@app.route('/post_request', methods=['POST'])
def post_request():
    output = {　##※ここのJSONフォーマットは自由だよ
        "version":"1.0",
        "response":{
                "outputSpeech":{
                    "type":"PlainText",
                    "text":"ハロー"
                }
            }
    }

    return jsonify(output)

```

#jsonifyを使って日本語が文字化けする時の解決方法
Flask のアプリケーションの config に、デフォルト設定項目として JSON_AS_ASCII なるものが定義されており、app.config['JSON_AS_ASCII']=False を設定すると最終的に json.dumps に ensure_ascii が設定されるようになっています。
日本語を扱うアプリを作っている人は注意です。

参考　[jsonify の日本語文字化けを解決するコード](http://datalove.hatenadiary.jp/entry/flask-jsonify-how-to-encode-japanese)

```Python3
from flask import Flask, jsonify

app = Flask(__name__) 
app.config['JSON_AS_ASCII'] = False
```
(自分用メモ) PyCharmの設定

(自分用メモ)

# PyCharm
* https://www.jetbrains.com/pycharm/
    * 使うのはCommunity Edition
    * Proとの違い: https://www.jetbrains.com/pycharm/features/editions_comparison_matrix.html

# 設定
* Keybind: Emacs

# PyCharm上でpytestを走らせる
* https://stackoverflow.com/questions/36718762/idea-run-debug-py-test-single-test-not-the-whole-suite
    * ここにある1つ目の回答
Visual Studio Live Shareを使って得られた知見をまとめた

この記事は、[Business Bank Group Developers Advent Calendar](https://qiita.com/advent-calendar/2018/bbg_developers) 15日目の記事です。

Visual Studio Live Shareを使って得られた知見をまとめました。

#### Visual Studio Live Shareとは

複数人で同時にソースコードの編集を行える、Visual Studio Codeの拡張機能です。
![vscode_mob1.gif](https://qiita-image-store.s3.amazonaws.com/0/205948/c01136d2-c414-9a3b-842e-5e7bb7244bcb.gif)
ソースコードに変更を加えると動画のように同期されます。
(上の動画では、左がホスト、右がゲストとしてコードを編集しています。)

#### Terminalも共有できる
Visual Studio Live Share`Share Terminal`という機能があって、
ゲストからホストのterminalを閲覧できたり、操作が行えたりします。

![vscode_mob2.gif](https://qiita-image-store.s3.amazonaws.com/0/205948/13551712-1a2d-58eb-c8a1-749035a8d607.gif)

### 知見
・従来のモブプロやペアプロのやり方だった、　
__1台のPC__が、__複数のPC__になった。
これにより、コードレビュー等でtypoの指摘をしなくても、「こっちで直しておくわ」
で話が進むので、その分の時間が短縮された。

・terminalをシェアできることにより、一人はビジネスロジックを実装して、もう一人はテストを書いて、テストを流して...
と言った、数人でのTDD開発が行いやすくなった。

他にもいくつかありますが、モブプロのメリットとあまり変わらないため、ここでは記載しないことにしました。

明日は @bigplants さんが担当です。よろしくお願いします！
raspberry pi 1でtensorflow lite その11

#概要

raspberry pi 1でtensorflow liteやってみた。
kerasモデルからtfliteファイルを作ってラズパイで、実行。
データセットは、sin.

#Makefileを書く。


```
CXXFLAGS ?= -I../tensorflow -I../tensorflow/tensorflow/lite/tools/make/downloads/flatbuffers/include
LDFLAGS ?= -L../tensorflow/tensorflow/lite/tools/make/gen/rpi_armv6l/lib

.PHONY: all clean

all: lite2

lite2: main.cpp
	g++ --std=c++11 main.cpp -O2 $(CXXFLAGS) $(LDFLAGS) -ltensorflow-lite -lstdc++ -lpthread -ldl -lm -o lite2

clean:
	rm -f lite2

```

#Makeして実行。


```
#include <vector>
#include <chrono>
#include <iostream>
#include "tensorflow/lite/model.h"
#include "tensorflow/lite/interpreter.h"
#include "tensorflow/lite/kernels/register.h"
#include <iostream>
#include <fstream>
#include <stdlib.h>
#include <math.h>
using namespace std;

bool is_error(TfLiteStatus const & status) 
{
  	return status != kTfLiteOk;
}
int main(int argc, char const * argv[]) 
{
    std::string a = "sin_model.tflite";
    TfLiteStatus status;
    std::unique_ptr<tflite::FlatBufferModel> model;
    std::unique_ptr<tflite::Interpreter> interpreter;
    std::cout << "0: Loading model: " << a << std::endl;
    model = tflite::FlatBufferModel::BuildFromFile(a.c_str());
    if (!model) 
	{
      std::cerr << "0: Failed to load the model." << std::endl;
      return -1;
	}
    std::cout << "1: The model was loaded successful." << std::endl;
	tflite::ops::builtin::BuiltinOpResolver resolver;
    tflite::InterpreterBuilder(* model, resolver)(& interpreter);
	std::cout << "2: interpreter was build successful." << std::endl;
    status = interpreter->AllocateTensors();
    if (is_error(status)) 
  	{
      std::cerr << "2: Failed to allocate the memory for tensors." << std::endl;
      return -1;
  	}
	std::cout << "3: The model was allocated successful." << std::endl;
	ofstream fout("pred.csv");
    float * in = interpreter->typed_input_tensor<float>(0);
    float * out = interpreter->typed_output_tensor<float>(0);
	fout << "x,y,p" << endl; 
	int i;
	double x, 
		y;
	double pi = acos(-1.0);
	for (i = -20; i < 20; i++)
	{
		x = (double) i / 6;
		y = sin(x);
		in[0] = x;
		status = interpreter->Invoke();
		if (is_error(status)) 
    		{
    		std::cerr << "3: Failed to invoke the interpreter." << std::endl;
    		return -1;
    		}
   		std::printf ("%2.2f\n", out[0]);
		fout << x << "," << y << "," << out[0] << endl;
	}
	cout << "ok" << endl;
	fout.close();
	return 0;
}

```

#結果

![sin.png](https://qiita-image-store.s3.amazonaws.com/0/18104/0ae762da-c116-192c-df0e-a6db1196eeca.png)


以上。