OmniAICreator/Qiita-1.07M huggingface dataset:
iPhoneX対応のiOSアプリを作る上で知っておくべきコト

# 始めに
僕は[SP2LC](https://qiita.com/Shimizu_sp/items/47394efcbcb1b2d33aee)で多くの事を学んでいますが、多くの時間はiOSアプリケーションの開発を行なっています。最近iPhoneXが出てこれまでとは少し違うスクリーンサイズと形で困ってる人は多いと思います。そこでiPhoneX対応のアプリケーションを作成するために気をつけるべき事、知っておくべきことを書いていきたいと思います。多くはAppleのHuman Interface Guidelinesに載っていることですが、日本語では説明がなかった為それも含めて記事にしました。

# iPhoneXの形を理解する
iPhoneXのスクリーンサイズの横は他の4.7インチディスプレイのiPhoneと同じで、縦は145ptだけ高くなっています。縦に約20%大きくなったと言うことです。

<img width="762" alt="iPhoneXScreenSize.png" src="https://qiita-image-store.s3.amazonaws.com/0/218304/3e4d9d1f-30e8-e144-2e6c-e5ea51372d78.png">
もちろんセンサーの部分で隠れている部分にも考慮しなくてはなりません。

<img width=70% alt="iPhoneXEdge.png" src="https://qiita-image-store.s3.amazonaws.com/0/218304/c0e6eab5-3e6b-2de5-8225-2f969e88f097.png">



# 解像度について
iPhoneXはHigh-Resolution Super Retina displayを使っていて2436 x 1125pxが5.8インチにおさまっていて458ppiになっています。このためアプリで使用するための画像は@3xの高画質な物を用意しましょう。

<img width="400" alt="iPhoneXRez.png" src="https://qiita-image-store.s3.amazonaws.com/0/218304/2e2b5e62-4f50-6591-72fa-79b3dfcd71a4.png">


# Safe AreaとMargin Layout Guidesを使おう
iOS11で追加されたSafe Areaは簡単に言うとシステムで追加されているUIと被らないエリアのことです。
 iPhone8においてSafe Areaは画面と同じ大きさですが、ステータスバーが表示されている時はステータスバーの高さ分低くなり、ナビゲーションバーがある場合はさらに低くなります。ここまでは無くてもそこまで大変ではありませんでした。
 しかしiPhoneXの時に役に立ちます。たとえステータスバーが非表示であっても、ステータスバーの部分とホームボタンの部分はSafe Areaでは無くなります。横に表示した場合も同くセンサーの部分に被らないようになっています。

![iPhoneXSafeArea.png](https://qiita-image-store.s3.amazonaws.com/0/218304/fe4f80d0-c4aa-77e7-95d9-7ee1e44166e5.png)


これを利用することによって、ボタンが画面外に行ってしまった、などのようなことは起こりません。


Margin Layout GuidesとはSafe Areaからのマージンを自動的に設定してくれているもので、これを利用し統一されたデザインを作りましょう。

<img width="324" alt="iPhoneXmargin.png" src="https://qiita-image-store.s3.amazonaws.com/0/218304/22b04738-154c-4177-6fff-7e16e58d1197.png">

# StoryBoardにばっかり頼らない。
これは僕が感じている事なので人それぞれ意見は違うと思います。多くの人は全てのView,UIButton,...をStoryBoard上で用意して配置して使用していると思います。確かにStoryBoardを完全に理解してAutoLayoutもきちんと使えるようになると大体の事はStoryBoardで出来ます。しかし、複雑なアプリになってくるとオブジェクトが増えてどうしてもコードで書いた方が早くて正確な場合が出てきます。iPhoneXと言う画面の形状が特殊な端末が出てきてますますオートレイアウトだけでは対応しきれずにコードを書くと言うことが多くなってきます。iPad Proが出た時点でStoryBoardでは対応しきれない部分があったと思います。そしてなんと言っても一切StoryBoardを使わないとビルド時間がすごく速くなります。
そこで最近僕はStoryBoardを使用しないと言う選択を取っています。StoryBoardを使わなくてもオートレイアウトは使えますし、Safe AreaとMargin Layout Guidesも使えます。Swiftの標準のAutoLayoutは少し書きにくい為[SnapKit](https://github.com/SnapKit/SnapKit)というライブラリをおすすめします。

# 最後に、コレだけはやってはいけません。
<img width="240" alt="iPhoneXDontDoThis.png" src="https://qiita-image-store.s3.amazonaws.com/0/218304/a21939e6-9812-6576-fd0d-528a5532be0b.png">

# 参考文献
https://developer.apple.com/ios/human-interface-guidelines
binder の紹介

# binderとは

[binder](https://mybinder.org) とは

- GitHub の repository から(使い捨ての)Jupyter Notebook の環境を構築し
- その(計算)環境を誰もが利用できる形で提供してくれる

ウェブアプリケーションです。

binder を使うと Dockerfile や requirements.txt といった環境構築設定ファイルに基づいた(使い捨てのクラウド)計算環境をウェブブラウザから利用できます。
またbinderは無償で利用できます。

[2日目の Jupyter Advent Calender](https://qiita.com/kozo2/items/cc6444e6bc02374e18ad) では Azure Notebooks を紹介しました。
binder と Azure Notebooks はクラウドの計算環境(Jupyter Notebook)を無償で利用できる，という点は同じですが

- 計算環境を Dockerfile (など)で自由に構築できる
- ただしその計算環境は永続的な利用を目的としたものではない
- あくまで「計算環境再現の保証」と「誰もが試用できる計算環境の提供」を目的としている

という点で異なっています。

# なぜ binder が生まれたのか

最近では科学技術計算系のリポジトリが GitHub に数多く公開されています。
しかしこれらのリポジトリの動作確認や再利用のためには下記のような困難が付きまといます。

1. インストールが難しい場合がある。また手間がかかる。
2. 自前で計算機を用意する必要がある。計算の再現がリポジトリ作者の環境に依存している可能性がある。

1.2. が様々な場で繰り返され(また，失敗に終わ)ることが時間の無駄であることは明白です。
binder はそういった無駄を無くすことを目的(の一つ)として生まれました。

また「科学研究成果の再現性に対する問題意識」も背景にあります。
科学研究だからといって再現性がすべてにおいて確認されているわけではありません。
binder のようなソフトウェア試用のハードルを下げる仕組みがあれば

- より多くの人がより素早く動作の確認ができるようになり
- 再現性の改善に大きく寄与するだろう

というわけです。

# とりあえず binder の活用例を見る

まずは binder を体感してみましょう。

https://github.com/QuantStack/xeus-cling

の README.md 内 に launch binder というバッジがあります。
これをクリックしてみてください。

下記画像のように binder のサイトに jump した後，しばらく待つと この repository (Xeus という C++ をJupyter Notebook で interactive に実行するための project です) の Jupyter Notebook 環境に到達するはずです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/7591/42a7a23d-976d-1fb2-e697-4d513d5206c3.png)

ここで binder が行うことは

- https://github.com/QuantStack/xeus-cling の 0.0.7-binder タグの repository 情報に基づき
- [conda](https://conda.io/) と [environment.yml](https://github.com/QuantStack/xeus-cling/blob/0.0.7-binder/environment.yml) を用いて作った Jupyter Notebook 環境を
- repository の [notebook/xcpp.ipynb](https://github.com/QuantStack/xeus-cling/blob/0.0.7-binder/notebooks/xcpp.ipynb) をまず開く形で start する

というものです。
binder が build した Jupyter Notebook 環境はあくまで試用目的のものであって永続的なものではありません。その点ご注意ください。
またこの例では環境構築用の設定 file として `environment.yml` が用いられていますが，`Dockerfile` も利用できます。
(repository にこれらが両方ある場合は Dockerfile の内容が優先して使われます。)

# まとめ

是非みなさんの repository でも binder による Jupyter Notebook 環境のbuildが可能か試してみてください。
またそれによって

- ソフトウェアが果たす機能の再現性の確保
- ユーザがすばやく試用できる環境の提供

といった効用が得られるかどうか試してみてください。
Lチカで雑なクリスマスツリーを作る（むなしい）

組み込みプログラミングの入門機として人気のあるArduino。
とりあえずLEDを接続してLチカを行った事のある人は多いのではないでしょうか。

12月になり、そろそろクリスマスが近いのでこのLチカを応用して雑なクリスマスツリーを作ります。

## 用意した道具
![_DSC3415.JPG](https://qiita-image-store.s3.amazonaws.com/0/189239/6c9591ac-e534-4dde-597c-7a07eaef6cd5.jpeg)
* ブレッドボード
* ジャンパケーブル
* 赤色LED（写真に掲載がありませんがRGBLEDも用意しました）
* Arduinoの互換機
* 画用紙
* ノリ
* ハサミ

## Lチカの復習
ArduinoはデフォルトでBlinkというサンプルプログラムが書き込まれていることが多いです。
Blinkは13番Pinを点灯させるプログラムなのでLEDに13番Pinとグランドを接続します。

本当は回路の中に抵抗を挟み、LEDのデータシートに合わせた順方向電流（通常20mA～30mA程度）に調整した方が良いのですが
今回はめんどくさいのとクリスマスまで寿命が持てばいいので無視します。![_DSC3416.JPG](https://qiita-image-store.s3.amazonaws.com/0/189239/8689b9fb-85ee-e081-803e-dda531e447cb.jpeg)

## Arduinoのピン
![画像6.jpg](https://qiita-image-store.s3.amazonaws.com/0/189239/92aa1e85-e2ba-b192-2e78-4ccf96bd7307.jpeg)
LEDを点灯させるだけであれば番号のついているPINであればどこでも使用できるのですが
LEDの発光を調整したい場合は電圧を調整できるPWMピンに接続する必要があります。

今回はRGB表示ができるLEDの電圧を制御したかったので９、１０、１１番のピンをRGBLED用に使用します。

## 接続
![IMG_20171210_171236.jpg](https://qiita-image-store.s3.amazonaws.com/0/189239/09affe12-8a4b-808e-873c-17ef539663ac.jpeg)
写真では左側のグランドが未接続です。

## Arduinoのプログラム
```C++
int interval[5];
int mode[5]={0};
int count = 0;

void setup() {
  // simple blink
  pinMode(2, OUTPUT);
  pinMode(3, OUTPUT);
  pinMode(4, OUTPUT);
  pinMode(5, OUTPUT);
  pinMode(6, OUTPUT);

  // pwm blink
  pinMode(9, OUTPUT);
  pinMode(10, OUTPUT);
  pinMode(11, OUTPUT);
  
  randomSeed(analogRead(0));
  for(int i=0;i<5;i++){
    interval[i] = random(100);
  }
}

void loop() {
  long max = 255;
  if(!(count%10)){
    analogWrite(9,random(255)); // Green
    analogWrite(10,random(255)); //Blue
    analogWrite(11,random(255)); //Red
  }

  for(int i=0;i<5;i++){
    if(!(count%interval[i])){
      digitalWrite(i+2, mode[i]);
      mode[i] = !mode[i];
    }
  }
  count ++;
  delay(100);   
}
```
赤色LEDは初期化時に周期を決定して点灯し、RGBLEDは1秒に一度色が変わる仕組みにしました。
動画では白飛びしていてRGBLEDの色が良くわかりませんが・・。
![ezgif-4-6ad2ab6524.gif](https://qiita-image-store.s3.amazonaws.com/0/189239/61830880-716b-b367-4e8c-b84f00660abf.gif)

## 露出部分を絶縁する
カプトンテープが見つからなかったので今回やりませんでした。
絶縁されていないので人がいないところでは動作させません。

## クリスマスツリーにする
緑色の紙を手に入れる。
クリスマスツリー状にして貼り付ける。
![ezgif-4-9815ec9151.gif](https://qiita-image-store.s3.amazonaws.com/0/189239/92855729-b459-c4fe-c643-ff535378d856.gif)
***とてもむなしい・・・***
競技プログラミングで解けなかった問題をConoHaのRedmineを使って管理してみよう！

はい、こんにちは。
これはConoHa Advent Calendar 2017 10日目の記事です。
競技プログラミングで解けなかった問題をConoHaのRedmineを使って管理してみよう！というお話です。
なお、管理することに意味が無いのでは？とか、その時間を練習に割くべきでは？論には反論しません。はい。


昨日 nobukumaさん
[http://blog.strawhat.net/posts/2017/12/09/how-to-create-servers-at-conoha](http://blog.strawhat.net/posts/2017/12/09/how-to-create-servers-at-conoha)
↓
今ココ 今ココ
↓
明日 mikamadouさん


はい、こんにちは。テンプレートでRedmineを選択してインストール済の状態から話をしようとしたはずがなんだか様子が変でした。
選ぶのが見当たりません／(^o^)＼
![Screen Shot 2017-12-10 at 10.12.33 PM.png](https://qiita-image-store.s3.amazonaws.com/0/5118/80276f2c-3c1a-d0f5-fded-0fee6d0f10e7.png)
つまり、企画の環境が用意できませんでした。。。
[http://blog.redmine.jp/articles/3_4/install/ubuntu](http://blog.redmine.jp/articles/3_4/install/ubuntu)を見ながらコマンドをコピペしましたが、Passengerのバージョンが上がっていたりでうまく起動しませんでした。辛いですね(´・ω・｀)
コピペでインストールは諦めて自動で実行してくれるという[https://github.com/farend/redmine-ubuntu-ansible](https://github.com/farend/redmine-ubuntu-ansible)の手順に任せたところインストールと起動に成功しました( ･`ω･´)
Redmineは初回はデフォルトでID:adminとPASS:adminでログインして、パスワードを変更します。今回は一人で使うのでadminユーザーのみで使うことにします。

まずは任意のコンテストに参加 or　過去問練習をします。
過去問練習ということでAtCoder Typical Contest 001 [https://beta.atcoder.jp/contests/atc001](https://beta.atcoder.jp/contests/atc001) を例として考えます。

B問題のUnion Findが解けなかったときもGitHubには適当にテンプレでも上げておきましょう。

RedMineではProjectがAtCoderのIssues -> New issueでSubjectを｢AtCoder Typical Contest 001 B｣、Descriptionは空欄でも確定できるのですが、解法となるアルゴリズム名や、考えてみた方針などをメモしてissueを発行しましょう。

issueのclose(解決)については明日以降に追記します。。本当に申し訳ないです。。
Docker Composeのインストール方法(CentOS7.3)

## 「Docker Compose」とは？

複数のコンテナを使うDockerアプリを、定義・実行するツールです。
コンテナを使って `WordPress` サーバーを構築するとします。コンテナは小さくまとめるのが望ましいため、最低でも `WordPress` コンテナと`MariaDB` コンテナの2つを作成して構築したいです。
複数のコンテナを作成して連携させるのは手間ですが、Docker Composeを使うと、設定ファイルを記述してコマンドを1つ実行するだけで、設定した全てのサービスを作成・起動して連携することができます。

## 環境

- ホストOS：CentOS 7.3-1611 64bit Minimal
- Docker：1.12.6, build 85d7426/1.12.6
- Docker Compose：1.17.1, build 6d101fb

## セットアップ

### Docker Engineのインストール

Dockerのことです。
[こちら](https://qiita.com/uhooi/items/f8c67a9e716a226e28cd)の記事を参照してインストールしてください。

### Docker Composeのインストール

Docker Composeの最新版は[こちら](https://github.com/docker/compose/releases)から確認してください。

```bash
# Docker Composeの最新版をダウンロードする
# `1.17.1` の値はバージョンに応じて変更する
$ sudo curl -L https://github.com/docker/compose/releases/download/1.17.1/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose

# バイナリの実行権限を適用する
$ sudo chmod +x /usr/local/bin/docker-compose
```

pipでインストールすることもできます。

```shell-session
$ pip install docker-compose
```

私はpipを使わない方法でインストールしました。

### バージョンの確認

インストールできたかどうか、バージョンを確認してみます。

```shell-session
$ docker-compose --version
docker-compose version 1.17.1, build 6d101fb
```

バージョンが表示されているため、インストールに成功しています。

### Docker Composeのアンインストール

あまりないと思いますが、以下のようにしてアンインストールできます。

```shell-session
$ sudo rm /usr/local/bin/docker-compose
```

pipでインストールした場合、以下のようにしてアンインストールします。

```shell-session
$ pip uninstall docker-compose
```

## 参考リンク

- [Docker Compose 概要 — Docker-docs-ja 17.06.Beta ドキュメント](http://docs.docker.jp/compose/overview.html)
- [Docker Compose のインストール — Docker-docs-ja 17.06.Beta ドキュメント](http://docs.docker.jp/compose/install.html)
- [Install Docker Compose | Docker Documentation](https://docs.docker.com/compose/install/)
機械学習を仕事として遂行していく中で知っておくといいんじゃないかなっていうTips

初めまして。今は亡き、経営工学科(通称「i科」)という学科のOBです。

卒業後は縁あってIT業界に足を踏み入れ、縁あってエンジニアになり、最近またまた縁あって機械学習というものに着手しております。

同じく理科大で学んだ皆さまにとって、プログラミングだったり数学系の話題だったり、その方面でああだこうだ言うのは釈迦に説法をするようなものでしょう。

ただ、この機械学習という分野に業務で携わっている中で、さまざまに発見・学びがあったので是非この場をお借りして共有したいと思います。

技術面でも、ビジネス面でも。なにか一つ役に立つ情報がお届けできれば幸い。


###「それ、本当に機械学習でやる必要ありますか？」


文面だけだとなんかケンカふっかけてるみたいですが、全然そんなことはありません。

弊社への問い合わせ内容の中では、


####「今の業務を、AI・機械学習で自動化したい」


みたいな感じ…が一番多い気がします。(他の企業様もやはりそうなのかな？)

これまでのシステム開発とはやはり勝手が違うので、探り探りな人は多いのだと思います。

なので要件を聞き出すとともに、「本当にやりたいこと・実現したいことは具体的に何であるか」をはっきりさせる必要があります。

中には、機械学習を用いることなく解決できる課題もあるので、「機械学習」に無理にこだわる必要もありません。


目的と手段を混合してしまうことの無いよう、導いてあげることが大事です。


~~「機械学習でなにかできませんか？」~~
~~「我が社でも機械学習に取り組もう。キミ、あとはよろしく。」~~


###いきなり「機械学習モデル」をガリガリ実装することはない
ベタなキーワードでいえば、Python、Tensorflowあたりでしょうか。ほかにもKerasやScikit-learnなどなど。

データを用いて学習し、目的となるパラメータを予測できるようなモデルを実装する必要があります。

しかし、そもそも学習・推定させるためのデータがそろっていないと話が進みません。

今、手元に十分な質・量のデータがありますか？あるいは、データを作成できるだけの準備が整っていますか？

場合によっては前処理をかけて、学習・推定に最適なフォーマットに再成型する作業も必要です。

時間もそれなりにかかります。

クライアントからGB単位のcsvを渡されて→適切な形に再成型←実装+動作確認などで2週間とかかかります。
(そのうちの大半は、実行が終わるのをただ待つという時間です。ものすごい時間がかかります。)

まだ書き始めたばかりですが、[csvを扱う上でのヒント](https://qiita.com/gangun/items/4cf0eb8a75c25750d058)なんかも書いているのでもしよければご参考までに。今後更新した記事を書いていく予定です。


###本実装と学習
いよいよデータがそろって、学習用のモデルを実装するぞ！

しかし全データを学習させるとなると、GPUを使って●●時間、とかいう次元の話になってくるので少ない試行回数で成功させたいものです。

そんなときこそ"divide and conquer"の精神を忘れないこと。(原義としては「分割統治」。転じて「問題やタスクを細かく分割してひとつひとつ対処する」というニュアンスで使われます。)

実装の時は、試験的に小規模のデータを作ってこまめに動かしてみること。

その時の所要時間やメモリの消費量についてチェックし、全量データでの学習にも耐えうる設計となっているか確認すること。

また、実装時の精度は基本的に宛てにしないこと　結果そのものまでを出すまでが正しく動作することに意味がある。

学習時にやることといえば、コンソールでの出力を見守ることくらい。。。


###結果考察

いい感じの結果が出ることもあれば、そうでないこともあります。

なぜその結果になったのか、という考察は、実装の改善だけでなくクライアントへの報告時にも必要になります。

前処理が間違っていたのか？学習回数が少ないのか？逆に過学習になってしまっていたのか？そもそもデータに不備があったのか？

どのパターンも実際にありうることです。

犯人探しでは断じてありません。「なぜ」そうなったのかを考え、次回の学習やプロジェクトに活かすことが何より重要です。


###上記以外で知っておくべきこと
ドキュメントやプログラムを納品した後、クライアント側の環境ででシステムに組み込んで運用してもらう…なんてことがあります。

ドキュメントに書くものとして主だったものは、クライアントで用意しなければならない環境の情報やプログラムの使い方、あとは学習・推定結果に対する考察報告などです。プロジェクトによって必要なものは違うはずなのですり合わせはしっかりしておきましょう。

また、実運用してもらうにあたっては「使い勝手」もよくしておくことを意識しましょう。

シェルスクリプトのコマンドだけで前処理や学習まで自動でやってくれるようにすること

前回実行時の出力結果を削除してくれること

処理にかかった時間をログで吐き出すこと

処理が何らかの原因でコケた場合、何がおかしいのか、どういう操作をすべきなのかをログに出してあげること

…などなど。

最近上司にもらったアドバイスには「暗黙の了解が必要な部分を残すな」なんて言葉もありました。

今週はまさに納品に向けた作業がメインになっていくので、この記事で共有するとともに、自身への戒めとして認めておきます。


###終わりに
結構書きなぐる感じでしたが、機械学習においてはおそらく皆さんが思う以上に泥臭い部分が多いと思います。

ただ、とても楽しいです。データの流れを深く考えすぎて、脳みそがちぎれるような感覚に襲われてからが本番です。

理科大で数学・統計学・情報処理を学んでいる(学んでいた)方は、その素養が備わっているはずなのでぜひ取り組んでみてほしいと思っています。

個人で「〇〇を推定してみた」なんて記事を挙げている方も多いので、大分とっつきやすくなってきているはずです。

それでは。
Amazon Echoにバスの到着時刻を教えて貰う

追記：
2018/7/29 [Echo Spot対応版作りました](https://qiita.com/osa9/items/8847ac9fc0b8b6fc53a3)

# はじめに
ついに待ちわびていたAmazon Echoが我が家にやってきました。
LINE WAVE, Google Homeに続いて3台目のスマートスピーカーです。

Amazon EchoもGoogle Homeみたいに自分で対話アプリを作れるそうなので、以前Google Home(& DialogFlow)で作っていたアプリを移植してみました。

# つくるもの
三鷹市在住の我が家では最寄り駅までバスに乗らないといけないのですが、バスは電車と違って到着間隔が長いので、到着に合わせて家を出る必要があります。小田急バスはリアルタイム運行状況をWebサイト上で公開しているのでいつもスマホで確認していましたが、スマホを開くのも面倒なのでAmazon Echoが到着時刻を教えくれるようにしてみました。

まずはシンプルに「Alexa, "時刻表"を開いて」でバスの到着時刻を教えてくれるようにしてみました。

# おおまかな流れ
Amazon Echo (Alexa)との対話をさせるためにはおおまかに以下の手順を踏みます。

1. AWS LambdaでAlexaとの対話プログラムを書く
2. Amazon 開発者コンソールでスキルの設定をする
3. (一般公開するなら)審査を受ける

自分の環境で動くだけで良いならば3は不要です。

# AWS Lambdaでプログラムを書く
今回はServerless + Pythonで組んでみました。

サンプルコードは[github](https://github.com/osa9/alexa-bus)に上げました。

やっている事は、小田急バスのリアルタイム運行状況([参考：三鷹市役所→三鷹駅の運行状況](http://www.odakyubus-navi.com/blsys/loca?VID=lsc&EID=nt&DSMK=46&ASMK=148))をスクレイピングしてAlexaのメッセージを組み立てているだけです。恐らく読んでいる人の99.9%は小田急バスユーザーではないと思いますが、他のバスでもダイヤや運行状況が公開されていたら簡単に出来ると思います。

スクレイピング部分を除いてAlexaにしゃべらせる箇所はこれだけです。

```Python
response = {
    'version': '1.0',
    'response': {
        'outputSpeech': {
            'type': 'PlainText',
            'text': message, # しゃべらせたいメッセージ
        }
    }
}

return response
```

スロット(発話に含まれるキーワード)を使った例は[Serverlessのサンプル](https://github.com/serverless/examples/tree/master/aws-python-alexa-skill)を参考にすると良いと思います。ユーザーとAlexaで対話させたいならば、LambdaのテンプレートにもPythonやJavaScriptのコード例があります。

Lambdaにデプロイした後は、AWSのコンソールで当該関数の設定画面を開いてARNをメモっておきます。(ところでserverlessのコマンドでARNを取得する方法ってあるのでしょうか?)

# Alexaのスキルを作成する
プログラムの準備が出来たら次はAlexaからスクリプトを呼び出す部分(スキル)の設定を[Amazon開発者コンソール](https://developer.amazon.com/ja/alexa-skills-kit)でします。Amazon開発者コンソールはEchoと紐付いているAmazonアカウントでログインします。ログインしたら「スキル開発をはじめる」のボタンからスキルの作成を行います。

## スキル情報
スキル名と呼び出し時の名前(今回は「時刻表」)を設定します。
「Alexa, "時刻表"を開いて」でこのスキルが起動します。呼び出し方はいくつかパターンがあるので、[公式ドキュメント](https://developer.amazon.com/ja/docs/custom-skills/understanding-how-users-invoke-custom-skills.html)を参考に決めると良いです。本当は「バスの時刻を教えて」とかで起動出来ると良いんですが出来ないみたいです…。

![skill_info.png](https://qiita-image-store.s3.amazonaws.com/0/107166/8f6ddebe-c4e2-d1e0-4d15-62502932938d.png)

## 対話モデル
対話させたい時に利用します。
今回は対話しないので特に編集せずにSaveとBuildするだけです。

## 設定
AWS Lambdaを選択し、先ほど作成した関数のARNを記入します。
![alexa_config.png](https://qiita-image-store.s3.amazonaws.com/0/107166/6f5818b8-9e0e-475d-13cf-7024b6e42647.png)

## テスト
上部のチェックを入れるとログインしているAmazonアカウントに紐付いているAmazon Echoから呼び出せるようになります。下部でテストも出来ます。

![skill_test.png](https://qiita-image-store.s3.amazonaws.com/0/107166/0b3a2ab0-216b-d9af-46e4-fc9a1a580cb4.png)

## デモ
https://twitter.com/osa9/status/939861080192434182
(恥ずかしいので自分のしゃべっている部分は省略しています)

# おわりに
今回はAlexaに呼びかけるとバスの時刻を教えて貰うだけの簡単なスキルを作成してみました。今回ぐらいの簡単なサンプルなら1時間ぐらいで出来るのでとてもお手軽です。ただスマートスピーカーを使うと便利というシチュエーションがなかなか思い浮かばないのでアイデアが重要な気がします。

Siri(iPhoneだけど)やGoogle Homeより色んなパターンで起動出来る(気がする)ので、個人的には一番使い勝手が良かったです。スキルが豊富なのも良いですね。あとは、置物と化しているLINE WAVEもいずれSDKが公開されるとの事なのでこちらにも期待です！
自作アニメーションループを試す

この記事はQuadアドベントカレンダー10日目の記事です。
[前回からの続き](https://qiita.com/s_s_k/items/8ebd4a32ff294f8eeff3)です。
別スレッドでループを作ることができたので、ちょっと試してみたいと思います。動くも飲みながらでないとモチベーションも下がってしまうので...

## シンプルエンジンクラスを作る
簡易なエンジンクラスを作ります。シングルトンかstaticクラスがやりやすいと思います。

```swift
class SimpleAnimationEngine {
    
    public static let shared: SimpleAnimationEngine = SimpleAnimationEngine()
    private var thread:Thread?
    private var isRunning:Bool   = true
    private var fps:TimeInterval = 0
    private var displayLink:CADisplayLink?
}
```
とりあえずこんな感じ。

## 必要なインターフェイスを定義を追加
まずは、実行と停止を用意します。

```swift
func start() -> Void {
    self.isRunning = true
    self.thread = Thread(target: self, selector: #selector(self.threadLoop(_:)), object: nil)
    self.thread?.start()
}

func stop() -> Void {
    self.isRunning   = false
    self.displayLink?.remove(from: RunLoop.current, forMode: .defaultRunLoopMode)
    self.displayLink = nil
}
```

ループ部分は前回と同じです。

```swift
@objc func threadLoop(_ sender:AnyObject) -> Void {
   self.displayLink = CADisplayLink(target: self, selector: #selector(self.engineLoop(_:)))
   self.displayLink?.preferredFramesPerSecond = Int(self.fps)
   self.displayLink?.add(to: RunLoop.current, forMode: .defaultRunLoopMode)
   while self.isRunning {
       RunLoop.current.run(until: Date(timeIntervalSinceNow: 1/fps))
   }
}
```

## delegateを用意する
アニメーションは同時に複数実行することもあると思うので、delegate用に配列を用意します。

```swift
private var listeners:[EnableAnimation] = []
```

プロトコロルも定義します。

```swift
protocol EnableAnimation {
    func update() -> Void
    func draw() -> Void
}
```

登録メソッドを用意します。

```swift
func addAnimation(listener:EnableAnimation) -> Void {
    self.listeners.append(listener)
}
```

## updateとdrawの追加
数値計算と描画のメソッドを追加します。登録されているオブジェクトのメソッドを順番に実行しています。

```swift
@objc func engineLoop(_ sender:AnyObject) -> Void {
   self.update()
   self.draw()
}

private func update() -> Void {
   self.listeners.forEach { (animation: EnableAnimation) in
       animation.update()
   }
}

private func draw() -> Void {
   self.listeners.forEach { (animation: EnableAnimation) in
       animation.draw()
   }
}
```

とりあえず準備はできました。あとは、EnableAnimationを実装した型を用意して試すだけです。

## 試してみる

Engineのインスタンスを取得

```swift
var engine:SimpleAnimationEngine = SimpleAnimationEngine.shared
``` 

FPSを設定し、実行。

```swift
self.engine.initalize(fps: 60)
self.engine.addAnimation("ここでEnableAnimation型のオブジェクトを渡します。")
self.engine.start()
```

## サンプルも作りました。
簡単なサンプルを作ってみました。

https://github.com/SuguruSasaki/attractor-sample
NodeJSでsleep処理

async/awaitを使用します。

```javascript
const sleep = msec => new Promise(resolve => setTimeout(resolve, msec));

(async () => {
    console.log('a');
    await sleep(1000);
    console.log('b');
    await sleep(1000);
    console.log('c');
    await sleep(1000);
    console.log('d');
    await sleep(1000);
})();

/**
a
b
c
d
**/
```
新人エンジニアが学んだ４つのこと

リブセンスの [IESHIL](https://www.ieshil.com/) で内定者インターンをして一ヶ月が経ちました。
そのなかで「学」んだことを書いていきます。

# 対象読者
- これから新卒やインターンでエンジニアになる（なりたての）方
- 複数人での開発経験が浅い方
- 新規の開発現場に行く予定の方

少しでもみなさんのお力になれれば :pray: 

# 学んだこと
ここから学んだことをつらつらと書いていきますが、至極当たり前なことを書いています。
ただ、その当たり前の品質を保ち続けるためには、日々意識的に行動していかないと自分の血肉にはならないと思ったので、自戒の念を込めて言語化しました。

## 変数やメソッドなどの命名には最大限の配慮を心がけましょう

僕が初プルリクエストで指摘された箇所はほとんど命名に関してでした。
下記のように愛のあるコメントをいただきました。普段は心優しいボスです :heart: 

<img width="512" alt="反響数が上限に到達した企業のステータスを「一時停止」から「掲載中」に自動的に変更する_by_ArakawaShintaro_·_Pull_Request__2009_·_lvs-hero_ieshil_com.png" src="https://qiita-image-store.s3.amazonaws.com/0/93967/a0fffed5-c8c4-800b-4213-f4518d809f50.png">


現開発メンバーや、のちに開発メンバーとして入ってくる人たち、そして数ヶ月後の自分自身のためにも命名はしっかりと考えるべきです。
自分以外のメンバーのために、わかりやすい命名をするのは当たり前かもしれません。
ただ、自分自身も「あれ？なんでこんなコード書いたっけ？」ってよくなりますよね :cry: 
数ヶ月後の自分も他人と認識しておきましょう。


この辺の知識を補ってくれるオススメの書籍は[リーダブルコード](https://www.oreilly.co.jp/books/9784873115658/)です。
是非読んでみてください :smile: 


## 1行1行のコードに思いを込めて書きましょう
ちょっと表現がポエムっぽいですが...
要するに、1行1行のコードに対して**なぜそう書いたのか、根拠を持って説明できる状態**にしておくことが大事です。
レビューをしていただくときに、「こういう書き方の方がいいんじゃない？」というような議論がよく起きます。そういったときに、自分自身が根拠なくコードを書いていたらそういった議論が発展しなくなります。
良いコードを書くためにも、1行1行のコードには思いを込めましょう。

## コードを書く前に、まず事業やオペレーション周りを把握しましょう
メリットは大きくわけて２点あると思っています。

### ⓵ コードがより読みやすくなる

自分が事業部に配属されたころ、事業のことやオペレーションのことをほとんど把握していませんでした。
その状態で、コードを見たら、正直わからないことだらけでした。

*「やべぇ、なんにもわからねぇ。。。」*

初めは自分に技術力がないだけだと思い込んでいました。
ただ、よくよく考えたらそもそも事業のことを何にも理解していないことに気がつきました。
それから、ミーティングなどで事業に関するわからない単語などがでてきたら、1つ1つ質問して潰していくことを意識しました。
事業のことがわかってくると、コードも読みやすくなってきます。
**コードが読めないのか、そもそも事業のことを理解していないのか**は、分けて考えた方がいいです。
もし、事業のことを理解していないのであれば、すぐに周りに聞きましょう。
優しく先輩たちが教えてくれるはずです :thumbsup:

コードが読めないのであれば、しっかり勉強しましょう　（自分も含め）

### ⓶ 最適解を提案（考案）できるようになる
事業やオペレーションを把握するとことで、課題に対する最適解を提案（考案）できるようにもなります。
もし把握していない場合、与えられた開発タスクを日々こなすだけになってしまいます。

事業やオペレーションを把握することで、開発タスクに対しても「これが本当の最適解なのか？もっといい方法はないのか？」と改めて考えることもできますし、課題点を見つけて自分でタスクを作ることもできます。

早くチーム内で自走していけるためにも、事業やオペレーションは早めに把握しましょう。

## 技術書は読みましょう
当たり前ですが、網羅性の高い書籍を読んでおくことは必須だなと思いました。
技術書を読んでいると、利用シーンがわからない部分とかと頻繁にでてきますが、頭の片隅に入れておくだけでも武器になると思います。

技術書を読んでいるときにわからなかった利用シーンが、
実際の開発で「もしかしたら、あれが使えるかもしれない:exclamation:」ってことが何度かありました。
利用シーンに実際に出会うと、かなり理解も増します。
なので、網羅性の高い技術書を読んでおくことはオススメします。

# さいごに
たった１ヶ月で多くのことを学びましたが、今回は厳選して４つのことだけを書きました。
まだまだ学ぶことはたくさんあると思うので、随時発信して行く予定です。
来年はもっと技術よりな記事を書こうと思うので、お楽しみに！
それでは、良いお年を :tada: （まだ早いか...）
【iOS】ロード画面を作成する！

#ロード画面を作成するには？？

通信などの重い処理がはしるときに表示するローディング画面を作成します！

##実装内容
・viewを重ねて画面を少し暗くする
・くるくるまわるインジケータを表示する

![スクリーンショット 2017-12-10 22.54.52.png](https://qiita-image-store.s3.amazonaws.com/0/138735/6bec3ec5-3686-1eb8-1cf8-8d8aee6e34cf.png)


##実装コード

```ViewController.swift
   
   var indicatorBackgroundView: UIView!
   var indicator: UIActivityIndicatorView!

   //省略     

    func showIndicator() {
        
        // インジケータビューの背景
        indicatorBackgroundView = UIView(frame: self.view.bounds)
        indicatorBackgroundView?.backgroundColor = UIColor.black
        indicatorBackgroundView?.alpha = 0.4
        indicatorBackgroundView?.tag = 100100　 
    
        indicator: UIActivityIndicatorView! = UIActivityIndicatorView()
        indicator?.activityIndicatorViewStyle = .whiteLarge
        indicator?.center = self.view.center
        indicator?.color = UIColor.white
        // アニメーション停止と同時に隠す設定
        indicator?.hidesWhenStopped = true
        
        // 作成したviewを表示
        indicatorBackgroundView?.addSubview(indicator!)
        self.view.addSubview(indicatorBackgroundView!)
        
        indicator?.startAnimating()
    }
    
    func hideIndicator(){
        // viewにローディング画面が出ていれば閉じる
        if let viewWithTag = self.view.viewWithTag(100100) {
            viewWithTag.removeFromSuperview()
        }
    }

```
Xcode PlaygroundでPlatformによる分岐をする

これは [Swift愛好会 Advent Calendar 2017](https://qiita.com/advent-calendar/2017/love_swift) 10日目の投稿です。
昨日9日目は[@kamui_project](https://qiita.com/kamui_project)さんの[LottieアニメーションをTableViewCell内で動かしてみた](https://qiita.com/kamui_project/items/cd5010ebc74967edb71d)でした。

# TL;DR

Playground上でも、[Compiler Control Statements](https://developer.apple.com/library/content/documentation/Swift/Conceptual/Swift_Programming_Language/Statements.html#//apple_ref/swift/grammar/compiler-control-statement)が使えるよという話。
特に使いたいことないけども...

```swift

#if os(iOS)
    print("iOS")
#elseif os(macOS)
    print("macOS")
#elseif os(OSX) // macOSの時と一緒
    print("OSX")
#elseif os(tvOS)
    print("tvOS")
#endif

```

# PlaygroundのPlatform

###### 新規Playgroundを作成時
これ
<img width="1392" alt="Screen Shot 2017-12-08 at 21.09.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/78710/8eb81aab-f71f-0fd9-4a64-e6bcbc1928a7.png">

###### 既存のファイルの場合は
`File Inspector` から変更可能
<img width="1280" alt="Screen Shot 2017-12-09 at 13.25.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/78710/80086fed-cec5-5f53-89a1-f0ab6ef658d5.png">

# Compiler Control Statements

Compiler Control Statementsはコンパイル時に評価され、条件外の行は無視されるので、以下のようには使えます。

```swift

#if os(iOS)
    import UIKit
    let color: UIColor = #colorLiteral(red: 1, green: 0.1491314173, blue: 0, alpha: 1)
#elseif os(macOS)
    import AppKit
    let color: NSColor = #colorLiteral(red: 1, green: 0.1491314173, blue: 0, alpha: 1)
#elseif os(tvOS)
#endif

print(color)
//
//  Platform: iOS
//  UIExtendedSRGBColorSpace 1 0.149131 0 1
//
//  Platform: macOS
//  NSCustomColorSpace sRGB IEC61966-2.1 colorspace 1 0.149131 0 1
//
//  Platform: tvOS
//  Playground execution failed:
//
//  error: Qiita.playground:15:7: error: use of unresolved identifier 'color'
//  print(color)
//

```
# まとめ

勉強会の懇親会で[@takasek](https://twitter.com/takasek)と[@nonchalant0303](https://twitter.com/nonchalant0303)と話してた時に見つけました。
いろいろ考えてみたけど、やはりPlaygroundで使いたいタイミングは思いつかない...
ブロックチェーンのトランザクション手数料とは



今回はブロックチェーンにおける**トランザクション手数料**について紹介します。
なお、そもそもの**トランザクションについて**は以下の記事をご参照ください。

- [ブロックチェーンにおけるトランザクションとは](https://qiita.com/nagata03/items/b2a4a2a3d1e5081be28b)

できる限り「Short & Simple」を心がけます。
なお、私もブロックチェーン初学者なので、内容に誤り等ありましたらご指摘いただけると幸いです。

## トランザクション手数料とは
トランザクション手数料とは、その名の通り**トランザクションに含める手数料**のことで、トランザクションを記録しているブロックをマイニングした**マイナーに与えられる**。つまり、マイナーがトランザクションを次のブロックに含める（マイニングする）ための**インセンティブ**となる。

ほとんどの場合、**ウォレットが自動でトランザクション手数料を計算**し、トランザクションに含める。しかし、もしプログラムを通してトランザクションを構築もしくはコマンドラインを使って構築する場合、これらの手数料を手動でトランザクションに含める必要がある。

トランザクション手数料は、トランザクションの**データサイズに基づいて計算**される。送金する金額には影響を受けない。

マイナーがマイニングするブロックにどのトランザクションを選ぶかの判断条件には、トランザクション手数料の大きさも含まれる。そのため、十分な手数料を含むトランザクションほど次のブロックに含まれる可能性が大きく、手数料が十分でないもしくはゼロのトランザクションはブロックに取り込まれるのが遅くなる（または永遠に取り込まれない＝承認されない）。
トランザクション手数料は必須ではなく、手数料がないトランザクションもときどきマイナーに処理されるが、手数料を含めることは、マイナーによる処理（承認）の優先順位を上げることにつながる。
*※マイナーがトランザクションの優先順位づけに使用しているアルゴリズムについては別途記事を書こうと思います。*

## トランザクションへの手数料の追加
トランザクションのデータ構造には、手数料のためのフィールドはない（参考：[ブロックチェーンにおけるトランザクションとは](https://qiita.com/nagata03/items/b2a4a2a3d1e5081be28b)）。代わりに手数料は**トランザクションインプットの総和とアウトプットの総和の差**としてトランザクションに含まれる。

```
Fees = Sum(Inputs) - Sum(Outputs)
```

このため、自分でトランザクションを構築する場合、すべてのインプットを把握し、必要に応じて**おつりを自分に送るアウトプットを作成する**必要がある。でなければ、高額な手数料をトランザクションに含めることになる。
例えば、20bitcoinのUTXOを消費して1bitcoinの支払いをする場合、19bitcoinのおつりをアウトプットに含める必要がある。でないと、19bitcoinはトランザクション手数料としてカウントされ、そのトランザクションを含むブロックをマイニングしたマイナーによって19bitcoinが集められることになる。


## 参考文献
- [Mastering Bitcoin](https://www.amazon.co.jp/ビットコインとブロックチェーン-アンドレアス・Ｍ・アントノプロス-ebook/dp/B072JJL66R/ref=sr_1_2?s=digital-text&ie=UTF8&qid=1511787188&sr=1-2&keywords=mastering+bitcoin)
[AWS Cloud9]EC2自動停止を検知して別の処理を始める

# はじめに
AWS Cloud9はIDEの**ブラウザを閉じたとき、自動でEC2インスタンスが停止する機能**があります。
何分後に、自動停止するかは、設定から変更が可能です。
![1.PNG](https://qiita-image-store.s3.amazonaws.com/0/216527/05c99cd6-7b2b-0c11-b7ad-1c6278c86dd8.png)

AWS Cloud9を1週間使うと、EC2インスタンスが自動停止するのが**「便利 → 当たり前」**という感覚になりました。そして、思いました。自動停止を検知してもっと楽できないかと。

# やりたいこと
AWS Cloud9の機能で

* 検知した情報をトリガーに別の処理を動作させてみる。
* 今回は、サンプルに以下を動作確認
    * 自動停止のお知らせメール (実装したら、イチイチお知らせが来てウザくなった)
    * RDSの自動停止 (IDEとセットで使ってたので、止め忘れがなくなり非常に便利になった)

## 自動停止したことを検知
CloudWatchのルールを作成。

* イベントパターンを選択
* サービス名：EC2
* イベントタイプ：EC2 Instance Status-change Notification
* 特定の状態：インスタンスの停止を設定
* Specific instance Id(s)：**AWS Cloud9のインスタンスIDを設定**
![2.PNG](https://qiita-image-store.s3.amazonaws.com/0/216527/ae991758-986f-7f7f-27ed-df14f00c46c4.png)

```json
{
  "source": [
    "aws.ec2"
  ],
  "detail-type": [
    "EC2 Instance State-change Notification"
  ],
  "detail": {
    "state": [
      "running",
      "stopped"
    ],
    "instance-id": [
      "AWS Cloud9のインスタンスID"
    ]
  }
}
```

## 検知した情報をトリガーに別の処理を動作
ターゲットに今回は2つ(SNS(メール送信)とLambda(rds停止)を設定しました。)
SNSは使い道を思いつかなかったのでEメールを設定したのみ。jsonがそのままメールに飛んでくる。

![3.PNG](https://qiita-image-store.s3.amazonaws.com/0/216527/42eed0c8-dc1e-9fde-6b55-280fa98b5394.png)

LambdaはついでにIDE起動したときの動作も記述。

* IDE起動→EC2開始→RDS開始
* IDE終了→30分後EC2停止→RDS停止

```json:IAMロール
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Action": [
                "logs:CreateLogGroup",
                "logs:CreateLogStream",
                "logs:PutLogEvents",
                "rds:StartDBInstance",
                "rds:StopDBInstance"
            ],
            "Effect": "Allow",
            "Resource": "*"
        }
    ]
}
```

```python3:lambda_function.py
import boto3

def lambda_handler(event, context):
    dbinstance = 'RDSインスタンス名'
    rds = boto3.client('rds')
    instanceState = event['detail']['state']
    if instanceState == 'stopped':
        result = rds.stop_db_instance(DBInstanceIdentifier = dbinstance)
    else:
        result = rds.start_db_instance(DBInstanceIdentifier = dbinstance)
    print(result)    
```

* 開始状態のRDS

![4.PNG](https://qiita-image-store.s3.amazonaws.com/0/216527/02ed9f5e-3c0b-43bf-970b-a69c62e5bda0.png)



* EC2が停止するイベントが発生


![5.PNG](https://qiita-image-store.s3.amazonaws.com/0/216527/d4d09529-3e6c-ef1d-9363-4d73ab20214f.png)

* RDSが自動で停止
![6.PNG](https://qiita-image-store.s3.amazonaws.com/0/216527/ea391fd8-f6b8-4a1e-96dd-c9f56bade1d9.png)




# まとめ
* CloudWatchを使うことでIDEの終了後、EC2自動停止を検知できました。
* 後続処理を自動化できることが分かったので、一日の作業終了をブラウザを閉じるだけに出来そうです。


# 関連
* [AWS Cloud9を動かしてみた](https://qiita.com/icck/items/7705ef6871e261d6535e)
【Vue.js】リストのデータを Local Storage で永続化する方法

![screencast20171210225705.gif](https://qiita-image-store.s3.amazonaws.com/0/66754/c15bf3b9-8f8f-f0a8-5439-0f8c65eecbc7.gif)

Vue.js で Local Storage を使う場合 [vue-ls](https://www.npmjs.com/package/vue-ls) というライブラリがあるのですが、ボタンクリックでリスト内のデータ追加、削除を行なうような場合にはその都度リストデータを Local Storage に保存してしまえば良いのではないかと思います。

# 環境

- Vue.js 2.5.9

# 処理

```js
export default {
  data() {
    return {
      items: [],
      json: ''
    }
  },
  mounted() {
    this.items = JSON.parse(localStorage.getItem('items')) || [];
  },
  methods: {
    addItem() {
      this.items.push('item_' + this.items.length);
      this.setItems();
    },
    deleteAllItems() {
      this.items = [];
      this.setItems();
    },
    setItems() {
      localStorage.setItem('items', JSON.stringify(this.items));
    }
  }
}
```

## mounted()

マウントしたときに Local Storage からデータを取得しています。このとき、Storage にデータが無ければ空の配列を代入しています。

もともと該当のプロパティは配列で初期化しているのでちょっと違和感のある処理ですが、 if でやると冗長になるかと思ってこれにしました。

## setItems()

配列を JSON テキストにして Local Storage に保存しています。

データの変更を行ったときには必ず行う処理なのでメソッドにしておきました。

## addItem(), deleteAllItems()

データの操作です。

配列を変更した後で配列を JSON 化、JSON テキストを Local Storage に登録しています。

Vue.js はリストを管理する系のアプリを作るのが簡単ですね。ページをリロードしてもデータが失われないようにすることで、結構いろいろなツールを作れそう。
LinuxでささっとGIF動画を作る

# 目的

ちょっといい感じのgif（ジフ）動画をLinuxでささっと作りたい。

# やったこと

[ここ](http://takuya-1st.hatenablog.jp/entry/2015/07/15/002701)にあった方法では `Past duration 0.999992 too large`などとワーニングがでて動画の前半がきれてしまった。

[StackOverflow](https://superuser.com/a/556031)を参考に下記のコマンドを打てばうまくいった。

```shell:shell
mkdir -p frames
ffmpeg -i input.mp4 -vf fps=15,format=rgb8 frames/ffout%03d.png
convert -loop 0 frames/ffout*.png output.gif
```
format=rgb24とするととってもきれいな動画を作れるが、mp4などと違って時間方向の圧縮がないため結構動画サイズが大きくなるので注意。
pythonでNMF(非負値行列因子分解)を実装する

## NMFとは
"Non-negative Matrix Factorization"のこと。
各要素が非負であるような行列$M \in \mathbb{R}^{m \times n}$に対して

```math
M \approx UV^T\\
s.t. \qquad U \in \mathbb{R}^{m \times k},\;V\in \mathbb{R}^{n \times k},\;k < min(m, n)
```
を満たすような$U, V$(ただし各要素は非負)を生成する手法。

## 更新式
以下のような更新式を適当な回数適用することで$U, V$が得られる。

```python
import numpy as np

def update_uv(M, U, V):
    U = U * np.dot(M, V) / np.dot(np.dot(U, V.T), V)
    V = V * np.dot(U.T, M).T / np.dot(U.T, np.dot(U, V.T)).T
    return U, V
```

$U, V$の初期値はランダムな非負の行列。
dotは行列の積、『*』『/』は要素ごとの乗算、除算をあらわすことに注意。

##実装
```python
k = 2
m, n = 3, 5
iters = 30

M = np.random.randint(1, 6, (m, n))

U = np.abs(np.random.uniform(low=0, high=1, size=(m, k)))
V = np.abs(np.random.uniform(low=0, high=1, size=(n, k)))

for _ in range(iters):
    U, V = update_uv(M, U, V)

X = np.dot(U, V.T)

# M =
# [[1 4 1 5 4]
#  [5 3 3 1 3]
#  [2 4 2 5 4]]

# X =
# [[ 0.97226794  3.8740713   1.19828474  5.14962285  3.8740713 ]
#  [ 4.9954159   2.96768054  3.05263671  1.04196113  2.96768054]
#  [ 2.02462211  4.14097417  1.77570319  4.83147475  4.14097417]]
```

## コスト関数
$||M - UV^T||_F^2$は以下のように推移する。
![figure_2.png](https://qiita-image-store.s3.amazonaws.com/0/196110/30fde000-b32c-da7d-1246-acdd17ca706c.png)

## なお……
scikit-learnにはNMFが実装されているので結果だけが必要ならこちらを使えばよい。
http://scikit-learn.org/stable/modules/generated/sklearn.decomposition.NMF.html
GitHub からみた Crystal言語とプログラミング言語全体の動向 2017

これは GitHub に対して http://namaristats.com/rankings をすこし別角度で見たものです。

#これは[Crystal Advent Calendar 2017](http://qiita.com/advent-calendar/2017/crystal)の投稿です
#またこれは[Crystal Advent Calendar 2016](http://qiita.com/advent-calendar/2016/crystal)の投稿の２０１７年版　です。

ねらいは、２０１６をご覧ください

#私は [Crystal言語](http://crystal-lang.org/)がとても好きで、動きを眺めています、こういった新しい潮流にある言語が実際どんなポジションに位置するのか、気になり継続して見ています。新しい言語の全般動向もまとめています。

#Crystal言語界隈の今年の話題は何といっても、８月[TIOBE Index](http://www.tiobe.com/tiobe_index)  でプログラム言語ランキングで３２位に突然現れたことです（１２月は２４位です！）

7月までは50位から100位のなかに位置しており、原因はTIOBEが喫緊の状態を表していないという評判に対して、検索条件を変更したことが原因です。これには、Crystal 言語関心の人以外も、なんだこの言語は？と大きな議論になりました。それは TIOBE ランキング自体の正確度の議論となり、今でも Rustより Crystalが上位にあるのは、確かに不正確である印象です。しかし、私は２０１６年よりこの github Top3　を眺めていますが、その中のランクでいえば、Crystal 言語は確かに３５位あたりに存在しています！　私は TIOBE のランキングもあながちフロックではないと思っています。

ではgit　を眺めてみます。

GitHub の動向を見るのに namaristats.com の [Top3 Repos](http://namaristats.com/top3s) は貴重な情報ですので、今回も　GitHub での人気度を示す、[Top3 Repos](http://namaristats.com/top3s)　をStar の総数集計でソートしました。

#それがこちらです！
今年も、Tiobe や Redmonk とずいぶん違う点があり、
Tiobe や Redmonk よりむしろ実情を表しているように私は感じます。

#2017年12月時点の特徴
・Javascriptの Star数があいかわらず急に伸びている、利用がますます拡大している。
・C++ は Tensorflow 人気で再上昇。
・Go が Python と同等のレベルにあるほど Go の認知普及は広まっている。
・Ruby 系統言語（Ruby Coffeescript Groovy）は下降気味。
・Swift は Ruby と同列になったが、TIOBE では不思議な現象が起きており、ランク下降が始まっている、言語のむずかしさが、要素か？
・TypeScript はメジャーに駆け上がっている。その反動かCoffeescript は使命を終え下降。
・Kotlin が急上昇（Google が採用のため今後は大注目）
・Rust が Scala を抜いたが、Kotlin 人気で停滞。また使ってみたが言語が意外と難しく学習しにくいと過去 Scala で起きたことと同様の流れになる懸念意見が出てきた。
・Elixir は Lua と同列まで追いついている、世界中で Elixir Conf が開催されて活発ですが、継続してちょっと息切れ感が．．
・Julia, Crystal が R, Groovy，D, Haxe, OPAL を超え、Erlang,Dart と同列に上がっている！　Crystalは Juliaより勢いがある。Julia はやはり何故か伸び悩んでいるように見えます（Python 人気の反動　とも言えます）。
・C#, Matlab が拡大。
・下位では RED が評判通り、抜け出てきた。　ELMは評判の割には停滞。

などが特徴です
![image.png](https://qiita-image-store.s3.amazonaws.com/0/103937/15994b74-ae43-eb8a-0614-937c49b121cd.png)




# *[こちらでは GitHubの Star数がどのように増加してきたか履歴を見ることができます。例で Rust、Elixir、Crystal の Star数上昇比較です。](http://www.timqian.com/star-history/#crystal-lang/crystal&elixir-lang/elixir&Rust-lang/Rust)
#GitHub のなかった2000年代初頭までに提案され普及していったプログラム言語の変遷と、それ以降に現れたプログラム言語は、間違いなく変遷のスピードと拡大の様相が違う時代になりました。

#Crystal 言語は、Git上に提案されて未だ5年の若いプログラム言語で、なおかつメジャーな支援企業のないながら、ここまで成長した注目すべき言語といえます。

#結論として、Crystal 言語の2017年は、10年後に振り返ってみても、間違いなく飛躍の年と記憶されると思われます。

#Crystal 関連リンク
[これから Crystal を始める方へ: Crystal 日本語情報まとめ](http://qiita.com/pine613/items/7407e56771b504bed82f)　by Pine613 さん

#Crystal コミュニテイ
[Crystal-JP](http://crystal.connpass.com/)
[Crystal 情報交換用 Slack チーム Crystal-jp](https://crystal-jp.slack.com)
[-> 登録：Crystal-jp.slack.com 日本語で Crystal の情報交換を行うチャットルームです。ご自由にお入りください](http://crystal-jp.pine.moe/)
[Gitter Crystal 情報交換用  Crystal-jp]
(https://gitter.im/crystal-jp/issues)
[Crystalに関する意見や質問、議論などをする場所] (https://github.com/crystal-jp/issues)

#[A list of programming languages that are actively developed on GitHub.](https://github.com/showcases/programming-languages) も参考になります。
こちらでは Crystal は 13番目にランクされています。
Androidアプリで抵抗するで🤜🤛


#※充電器修理中で充電切れて書けないので
途中までで、後で編集します。
申し訳ありません（土下座）←計画性がない。


#🤜🤛
Q.このカレンダー参加したのお前ちゃうん？
A.そやね。手が滑ったごめんなさい。

Q.素人なのに何で書くねん
A.で？だからどうして？そこで義務があるん？自由参加でええんちゃうん？

Q.じゃあお前のカレンダー見るだけでいい？俺記事書かんで？
A.もちろん俺らは抵抗するで？技術で🤜🤛


#Androidアプリで抵抗するで🤜🤛
今まで写経のようにコードを写したことなかったので、自分このアプリ作りたいな！と思って、作れるか挑戦してみようと思いました。
一からオリジナルで何かを作る、ということをしたことがないので未知なる挑戦ですが、作ってみたいので頑張ります。

#目的🤜🤛
まずこんなアプリが作りたい。
・ITエンジニア、デザイナーなどがスケジュールをみんなで共有できる。
・管理してる人が「あ、この日は空いてる人が多いな〜」と他の人の予定が見てわかるようになっていて勉強会など開きやすい。（できればconnpassなどのIT勉強会のサイトなどを関連づけたい。）
・某スケジュール管理で使っているサイトは使いづらいので使いやすいものを作りたい。

#で？🤜🤛
考えたのはいいんだけど何やればいいんだろう。
![DK0GVPWUIAEo6MF.jpg](https://qiita-image-store.s3.amazonaws.com/0/148394/c557eb78-c1e8-3590-fcbf-b13a89ab97ba.jpeg)
設計とか全くやったことないし、そもそも頭が悪い人でよくわからないので、ググることにしました。


##見本🤜🤛
どんなのが作りたいか具体的なのがあった方がいいだろうと、参考になるアプリをみてみます。
ナスカレを何故か使っていますが、イメージとしてはこんな感じ。
https://itunes.apple.com/jp/app/%E3%83%8A%E3%82%B9%E3%82%AB%E3%83%AC-%E3%83%8A%E3%83%BC%E3%82%B9%E3%82%AB%E3%83%AC%E3%83%B3%E3%83%80%E3%83%BC/id727459432?mt=8


#UI🤜🤛
とりあえず、見た目だとわかりやすので見た目を作ることにしました。
どうすれば作れるか調べた結果、いい感じのツールを見つけました。

参考になりました。
http://kirimin.hatenablog.com/entry/20140629/1404039922

https://pencil.evolus.vn/
![スクリーンショット 2017-12-10 22.50.14.png](https://qiita-image-store.s3.amazonaws.com/0/148394/deb66e65-a629-b9a8-2783-46a747770971.png)
そんな雰囲気を作りました。

#画面仕様図　設計図　画面遷移図🤜🤛
書かないと何が何だかよくわからない。
参考にさせていただきました。
https://kt-kiyoshi.com/wp/tech/android_app_dev_for_metro_contest_2/
http://mesubuta.blog.jp/archives/36245870.html

![Image uploaded from iOS.jpg](https://qiita-image-store.s3.amazonaws.com/0/148394/1c56716a-f19d-cd7a-4e13-a9b28217e65a.jpeg)
適当な感じですが、
とりあえずこうしたいというのを書いてみました。

#よくわからなくて調べたこと
##画面のライフサイクルの管理　ActivityとFragment
http://mixi-inc.github.io/AndroidTraining/fundamentals/2.02.activity-and-fragment.html

##アプリはそもそも何で落ちるのか？

・システムメモリの空き容量が不足している
・アプリの不具合（バグ）
・アプリが機能制限で制限されている機能にアクセスした
・アプリが不完全にダウンロード/インストールされている

http://www.appbank.net/2012/07/25/iphone-news/447763.php
http://minto.tech/iphone-app-kyouseisyuryou/


###互換性とは？
>互換性（ごかんせい、英語: Compatibility）とは、ある部品やコンポーネント（構成要素）などを置き換えても同様に動作させることができる性質のこと。 ... 互換性を確保するために余計なコストがかかる場合は軽視されることがあるほか、メーカー間の互換性はベンダーロックインを狙うため、あえて削ぐものもある。
https://ja.wikipedia.org/wiki/%E4%BA%92%E6%8F%9B%E6%80%A7

「Aを使っていても、Bを使っていても」
どんな媒体であっても同じように問題なく動く、ということらしい。


#APIって何だろう？
カレンダーは、Googleのカレンダーを使うといいらしいのでそうすることにしました。

参考になりました。
https://qiita.com/InoueDaiki/items/69421b03472e7f23354a

Googleカレンダーを使うには、
APIというものがいるらしいので取得することにしました。
![スクリーンショット 2017-12-20 22.43.30.png](https://qiita-image-store.s3.amazonaws.com/0/148394/9d156000-1c37-b205-2c82-86e4760530c8.png)
↓
![スクリーンショット 2017-12-20 22.45.05.png](https://qiita-image-store.s3.amazonaws.com/0/148394/4e26efbe-1e60-7e9f-8c59-1c545859bb69.png)
↓
![スクリーンショット 2017-12-20 22.45.20.png](https://qiita-image-store.s3.amazonaws.com/0/148394/2a626672-113c-0a2d-babc-854e498e70a1.png)

https://developers.google.com/google-apps/calendar/quickstart/android#step_5_setup_the_sample
公式のサンプルコードを貼り付け。

![DRgJ7MXUIAERnqp.jpg](https://qiita-image-store.s3.amazonaws.com/0/148394/fd6f6109-fdf3-f953-bb46-114659f5722b.jpeg)
自分の予定を取得することができました!


#続く🤜🤛
POV-Rayでの透過色の指定

# はじめに
これは [POV-Rayによる数学お絵かき入門 Advent Calendar 2017](https://qiita.com/advent-calendar/2017/povray4math) の11日目の記事です.

今日の記事では物体の透過色の指定について書きます.
透過色を使えば, 例えば次のようなアニメーションを作ることが可能です.

![](https://media.giphy.com/media/3o6gb5Js0KLzi2xzKU/giphy.gif)

この画像は立方体と正八面体の凸包として菱形十二面体が得られる様子を表しています.

公式ドキュメントでは以下が近いです.
http://www.povray.org/documentation/3.7.0/r3_3.html#r3_3_1_7_1

# オブジェクトの透過色
## rgb
既に何度も使っていますが, POV-Rayで色を指定するには`rgb`を書くのでした.
次のように, `rgb`の後に続くベクトルの各要素には0から1までの数値を与えます.

```Povray
box{-1/2,1/2 pigment{rgb<1,1,0>}}
```

![](https://i.imgur.com/15ugl0P.png)

## rgbf
POV-Rayでの物体の透過色の指定は2つの方法があり, そのうちの1つが`rgbf`です.
これを指定するには`rgb<a,b,c>`の代わりに`rgbf<a,b,c,d>`とします.
`rgb`と同様に, 各要素には0から1までの数値が与えられ, `d`が1に近いほど透過度が高くなります.

次に例を示します.

```Povray
box{-1/2,1/2 pigment{rgbf<1,1,0,.5>}}
```

![](https://i.imgur.com/urRNTjD.png)

微妙に裏側の辺が透けて見えています.
アニメーションで確認したものが次です.

```Povray
#declare Time=clock;
box{-1/2,1/2 pigment{rgbf<1,1,0,(1-cos(2*pi*Time))/2>}}
```

![](https://i.imgur.com/AQM7Cw4.gif)

## rgbt
残りの透過度の指定方法が`rgbt`です.
使い方は上に述べた`rgbf`と同じです.
例を次に示します.

```Povray
box{-1/2,1/2 pigment{rgbt<1,1,0,.5>}}
```

![](https://i.imgur.com/UbNJ8rz.png)

こちらでもアニメーションで確認してみましょう.

```Povray
#declare Time=clock;
box{-1/2,1/2 pigment{rgbt<1,1,0,(1-cos(2*pi*Time))/2>}}
```

![](https://i.imgur.com/BJVrx3r.gif)

上記2つの透明度をまとめると次のようになります.

* `rgbf`: カラーセロハンのような意味での透明度の指定 (**F**ilter)
* `rgbt`: 色水を薄めたような意味での透明度の指定 (**T**ransmit)

## rgbft
上記の2つの透明度をまとめて書くための命令が`rgbft`です.
今度は透明度に関する引数の数が増えるので, 5次元ベクトルを引数に取ることになり, `rgbft<a,b,c,d,e>`の形式で書かれます.
ただし, 2つの透明度のパラメータの和`d+e`が1を超えないようにする必要があります.

次の例では`d`, `e`をともに0から1まで変化させています.

```Povray
#declare Time=clock;
box{-2/5,2/5 pigment{rgbft<1,1,0,(1-cos(2*pi*Time))/2,(1-cos(2*pi*Time))/2>}}
box{-2/5,2/5 pigment{rgb<.2,.2,.2>} translate<0,-1,0>}
```

![](https://i.imgur.com/YqXnkTp.gif)

アニメーション中盤では`d+e`が1を超えてしまったために, 手前の立方体(黄色)の補色(青色)が奥の立方体に写ってしまっています.

`d`, `e`を0から0.5まで変化させるようにすればこの問題は解決されます.

```Povray
#declare Time=clock;
box{-2/5,2/5 pigment{rgbft<1,1,0,(1-cos(2*pi*Time))/4,(1-cos(2*pi*Time))/4>}}
box{-2/5,2/5 pigment{rgb<.2,.2,.2>} translate<0,-1,0>}
```

![](https://i.imgur.com/j6ehqug.gif)

# 背景の透過色化
POV-Rayでの標準の出力画像はpng形式でしたから, 透過色を使うことが出来ます.
このためにはコマンドライン引数に`+ua`を与えます.

```ini:povray.ini
Width = 500
Height = 500
Antialias=On
+ua
```

![](https://i.imgur.com/gJAZ4gX.png)

この画像だけだと分かり難いですが, 実際には背景が透過のpng画像になっています.
このように`+ua`を指定した際には, `background{ }`で指定した背景色の情報は無視されます.

影も含めて透過にする方法は, 公式ドキュメントではありませんが以下が詳しいです.
http://www.imagico.de/pov/icons.php

# おわりに
POV-Rayではオブジェクトに対して透過色以外にも

* 拡散反射率
* 鏡面反射率
* 屈折率

などをも指定する事が可能です.
当初はこれらについても書く積りでしたが, 普段は使わないこと/既存資料で十分に説明されていることから今回は書かない事としました.
以下の資料が詳しく書かれています:
http://www.arch.oita-u.ac.jp/a-kse/povjp/povjp/html/pov35ref_tex0c.html
公式ドキュメントは画像が少なくてつらくなる事が多いのですが, 上記資料は日本語でかつ画像が豊富にあるため参考になります.
IntelliJ IDEAでjava-processingを書く時の応用的なことまとめ

この記事は [NCC Advent Calendar 2017](https://qiita.com/advent-calendar/2017/ncc) の11日目の記事です。

初投稿です。

processingを外部エディタで書く紹介はEclipseでならたくさんあるのですが、IntelliJで調べた時に応用的な所の紹介となかなか出会えなかったので改めてまとめます。

プロジェクトの立ち上げは他の方の記事を参考にして行ってください。

#クラスを書きたい
さて、IntelliJ等のjavaIDEでprocessingを書く時はjavaにPAppletを継承したmainクラスを作って書きます。
なのでmainとは別にjavaクラスファイルを作ってクラスを書こうとするとそのままではPAppletが無いと怒られてしまいます。
`Cannot resolve method 'random(?)'`や「java:シンボルを見つけられません」なんかを言われた時はこれです。

そこで、別のファイルでクラスを書く時はmainからPAppletをもってきて書いていきます。

```java:Main.java
package myPrecessingTest;
import processing.core.PApplet;

public class Main extends PApplet {
    @Override
    public void settings() {
        super.settings();
        size(200,200);
    }

    Ball[] balls = new Ball[3];

    @Override
    public void setup() {
        super.setup();
        for(int i = 0; i < balls.length; i++){
            balls[i] = new Ball(this);
        }
    }

    @Override
    public void draw() {
        //super.draw();
        background(200);
        for(int i = 0; i < balls.length; i++){
            balls[i].disp();
            balls[i].move();
        }
    }

    public static void main(String[] args) {
        PApplet.main("myPrecessingTest.Main");
    }
}

```

```java:Ball.java
package myPrecessingTest;
import processing.core.PApplet;

public class Ball {
    PApplet parent;
    private float x,y;

    Ball(PApplet p){
        parent = p;
        x = parent.random(parent.width);
        y = parent.random(parent.height);
    }

    void disp(){
        parent.fill(0);
        parent.ellipse(x,y,20,20);
    }

    void move() {
        this.x = (this.x + parent.random(-20, 20))%parent.width;
        this.y = (this.y + parent.random(-20, 20))%parent.height;
    }

}

```
### 実行結果

![0eaa9c7d7b07b377db99afe5ec948993.gif](https://qiita-image-store.s3.amazonaws.com/0/207330/4f1d9f69-b652-6284-115d-d41ba6e7e6e2.gif)

#外部ライブラリを入れたい
外部ライブラリを使う時はprocessing:coreを登録した時と同様にライブラリのjarファイルを登録して使います。

**File** > **Project Structure** > **Libraries** から左上の＋を押してjavaを選択します。
その後追加するファイルを選択するので、processingのlibraryフォルダの中にある任意のjarファイルを追加してください。

![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/207330/fd624c13-03c1-05e9-fb93-1e7f779d97b5.png)

あとはprocessingエディタの時と同様にライブラリを`import`すれば使うことができます。
private なメソッドを public なメソッドで オーバーライド出来たり出来なかったり

#ruby の場合

まずは ruby。

```ruby:ruby2.4
class Foo
  private
  def hoge
    p :hoge_in_Foo
  end
end

class Bar < Foo
  def hoge # エラーにならず、オーバーライド出来てしまう
    p :hoge_in_Bar
  end
end

b = Bar.new
b.hoge # Bar#hoge が呼ばれる
```
だまって override 出来てしまう。
警告は出ない。
トラブルの原因になると思う。

#Java の場合

Java の場合は：

```java:Foo.java
class Foo
{
  private void hoge(){ System.out.println( "hoge in Foo" ); }
}
```

```java:Bar.java
class Bar extends Foo
{
  @Override
  public void hoge(){ //=>エラー: メソッドはスーパータイプのメソッドをオーバーライドまたは実装しません
    System.out.println( "hoge in Bar" );
  }
  public static void main( String[] args ){
    (new Bar()).hoge();
  }
}
```

などとやると、上記のコメントの通りエラーになる。好ましい。
そもそも Foo の hoge はオーバーライド可能なメソッドではないんだから、当たり前。
なので、「`@Override`」がないと、エラーも警告も出ない。

#C++ の場合

```cpp:c++11
#include <iostream>

class Foo
{
  private:
    virtual void hoge(){ std::cout << "hoge in Foo\n"; }
};
class Bar: public Foo
{
  public:
    virtual void hoge() override { std::cout << "hoge in Bar\n"; }
};

int main()
{
  Bar bar;
  bar.hoge(); // okay
}
```

普通にオーバーライドできる。
オーバーライドできるのは、Foo の hoge が virtual なんだから当然。
ただ、可視性を private から public に変更していても警告が出ないのはどうかなと思わなくもない。
そもそも private で virtual という時点で警告を出してくれてもいいかもと思わなくもない。

※ C# だとどうなるんだっけ？
Bootstrap 4 を Laravel mix で使う方法

タイトルの通りの構成で使うために色々と調べたところ、情報が古かったり、やたら面倒な感じの物が多かったので色々試して落ち着いた方法を記録に残しておきます。

# 各種設定

package.json の　devDependencies は下記の通り。

```json
"devDependencies": {
    "bootstrap": "^4.0.0",
    "jquery": "^3.2.1",
    "laravel-mix": "^1.7.0",
    "popper.js": "^1.12.9"
  }
```

webpack.mix.js はこうなります。

```js
let mix = require('laravel-mix');

mix.js('src/main.js', './')
    .autoload({
      "popper.js": ['Popper', 'window.Popper', 'popper', 'window.popper'],
      "jquery": ['$', 'window.jQuery']
    })
    .sass('src/main.scss', './');
```

# スクリプトとスタイルシート

sass ファイルの冒頭

```scss
@import "variables";

@import "~bootstrap/scss/bootstrap";
```

js の冒頭

```js
require('bootstrap');
```

これだけです。

できてみれば簡単なんですけどね。

結構回り道をしてしまいました。
Thymeleafを使って簡単な表示をさせてみる


## Thymeleaf(タイムリーフ)って？
・Springと仲良しです（Javaのフレームワーク）
・テンプレートエンジンです。


## テンプレートエンジンって？
テンプレートと呼ばれる雛形と、データを組み合わせてドキュメントを作成することです。

## 見たほうが早い
こんな感じ


###### Java
```java:sample.java
@GetMapping("/sample")
public String sample(Model model) {
    model.addAttribute("title", "Hello world");
    return "sample";
}
```

###### HTML
```html:samle.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h1 th:text="${title}"></h1>
</body>
</html>
```

Javaの`"title"`とHtmlの`"${title}"`が紐付かれて値が渡されています。


###### 実行結果
![スクリーンショット 2017-12-10 13.54.32.png](https://qiita-image-store.s3.amazonaws.com/0/215106/26a479fa-42bb-5f4d-c6bb-eb92e9505682.png)

## リストだってサクサク
こんな感じ


###### Java

```java:sample.java
@GetMapping("/sample")
public String sample(Model model) {
    List<Word> list = new ArrayList<Word>();
    for(int i = 0; i < 3; i++) {
        Word w = new Word();
        w.id = i;
        list.add(w);
    }
    model.addAttribute("list", list);
    return "sample";
}
```

###### HTML

```html:samle.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <table border="1">
        <tr><th>ID</th></tr>
        <tr th:each="word : ${list}">
            <td th:text="${word.id}"></td>
        </tr>
    </table>
</body>
</html>
```
JavaのWordモデルを使用して（中はidフィールドのみ）Word型のリストを渡しています。

`th:object`を使用すると、`${word.id}`を`*{id}`と省略できます。

###### HTML

```html:samle.html
<tr th:each="word : ${list}" th:object="${word}">
    <td th:text="*{id}"></td>
</tr>
```
###### 実行結果
![スクリーンショット 2017-12-10 22.10.38.png](https://qiita-image-store.s3.amazonaws.com/0/215106/971ca1ea-e7f4-b1d0-1850-cdf45c0552f4.png)

## 入力タイプの場合
さっきのリストを入力フィールドにするとこんな感じ

###### HTML
```html:samle.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <table border="1">
        <tr><th>ID</th></tr>
        <tr th:each="word : ${list}" th:object="${word}">
            <td>
                <input type="text" id="id" name="id" th:value="*{id}">
            </td>
        </tr>
    </table>
</form>
</body>
</html>
```
###### 実行結果
![スクリーンショット 2017-12-10 22.16.54.png](https://qiita-image-store.s3.amazonaws.com/0/215106/ef926d23-c843-5feb-919a-43a16cb2cb59.png)


Spring Bootの導入は省略してますが、
こんな感じでシンプルに記載することができます。便利！

:smile:では〜

## 参考
[テンプレートエンジン:Wikipedia](https://ja.wikipedia.org/wiki/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%B3)
[Thymeleaf:公式](http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf_ja.html)