OmniAICreator/Qiita-1.07M huggingface dataset:
Webの入力作業を楽したい


# 内容

**「おまえは今まで作ったアカウント数をおぼえているのか？」**

仕事でログイン・サインイン機能の改修があり、
新規アカウントによるテストというのが何回も行わないといけなかったということがありました。
新規アカウント作るにも電話番号であったり氏名など、入力項目が多くて辛い...
少しでも楽したい...ということでちょっとしたツールを作ってみたという話

テスト用の環境とかちゃんと整備しようよ...って気にもなりますが...

即席で入力が楽になるというやり方の紹介になります。
今回はこの画面からQiitaのキーワード検索を行ってみる例をやってみます。

2016/06/04追記
@tenkoma@github さんの紹介でFirefoxのアドオン、Selenium IDEというキーワードをいただいたので試してみましたが、
結論を言いますとSelenium IDEで自動入力するのが楽でした。
理由としては自動で行いたいことを人間の操作から自動で登録できたからです。
Selenium IDEについて下記に追記を致しました。

JavaScriptを用いてやるか、Seleniumで自動でやるかどっちがいいの？という話についてです。
JavaScriptの実装過程でここを動かせばこのスクリプトを動かしたいとか
デバッグを交えてやりたい時にJavaScriptによる半自動なやり方は有効だと思います。

Selenium IDEを使ってアカウントの作成を行った方が早かった...。

# 何はともあれ開発ツールだ（JavaScript編）

画面上部の虫眼鏡周りのHTML要素を見てみましょう。

## 虫眼鏡をクリック 

![スクリーンショット 2016-06-03 23.24.49.png](https://qiita-image-store.s3.amazonaws.com/0/89599/ff9d852c-cccb-9909-0136-ec00813f8350.png)

するとaタグや子の要素でiタグとかあります。
このあたりをクリックすれば検索入力のフォームが出てくるので
この中で比較的にJavaScriptでiタグのclassからHTMLの要素取得してイベント発火してみましょう。
classは複数のHTMLの要素に指定できるためプラスでどこの部分のclassを指定するのかを教えるために[0]も追記します。
それとクリックイベントを追記すれば検索フォームが出てきます。

コードとして下記になります。

虫眼鏡クリックの処理

```
document.getElementsByClassName('fa fa-search')[0].click();
```

これを開発ツールのコンソール部分に入れて実行すればフォームが出てきました。

![スクリーンショット 2016-06-03 23.41.21.png](https://qiita-image-store.s3.amazonaws.com/0/89599/61812dd6-d673-a07b-efa3-ebec52535bba.png)

## 文字の入力

![スクリーンショット 2016-06-03 23.46.43.png](https://qiita-image-store.s3.amazonaws.com/0/89599/688530d1-fd18-bb6c-1ca2-56c7ed4a1b74.png)

入力箇所のところはidの指定がされているのでidの指定から入力部に値を入れてみましょう。

入力箇所の文字入力

```
document.getElementById('q').value = 'JavaScript';
```

![スクリーンショット 2016-06-03 23.53.15.png](https://qiita-image-store.s3.amazonaws.com/0/89599/a5ff85b8-dfc5-6ca6-d29d-92ef35b6d9e3.png)

文字が入りましたね！


## 「Search」をクリック

説明は虫眼鏡クリックだいたい同じですので省略。

「Search」をクリックする処理

```
document.getElementsByClassName('btn btn-default btn-sm')[0].click();
```

検索が実行されましたね！

## ブックマークレットを作る

先ほど作成していったJavaScriptをブックマーク化します。
その時に登録するURLの部分を下記のようにして登録を行います。

```
javascript:document.getElementsByClassName('fa fa-search')[0].click();document.getElementById('q').value = 'JavaScript';document.getElementsByClassName('btn btn-default btn-sm')[0].click();
```

あとはブックマーク一覧からこの作成されたものをクリックするだけで
Qiitaのページの要素やイベントを使って検索を半自動で行えるようになります。

# Selenium IDE

https://addons.mozilla.org/ja/firefox/addon/selenium-ide/

FirefoxのアドオンとしてSelenium IDEがあります。
Selenium自体は他のブラウザにもWebDriverというのをインストールしてあげれば使用することができますが、
今回はこのアドオン利用してやった方がアカウント作成するまでにかかる時間が少なかったため、
アドオンの紹介だけします。

## まずはFirefoxとアドオンをインストール

表題通りです。

## Selenium IDEを使う

メニューバーから「ツール」→「Selenium IDE」を選択。
こんな今感じのが出てくるかと思います。

![スクリーンショット 2016-06-04 16.59.02.png](https://qiita-image-store.s3.amazonaws.com/0/89599/4666c02b-0ae1-e36a-947c-24fe011ffb31.png)

URLのとこに対象のURLを入れます。

そしたら下記の画像の「ここをクリック」を押してみましょう。
これでFirefox上のユーザの操作を記憶できるようになります。

![スクリーンショット 2016-06-04 7.04.44.png](https://qiita-image-store.s3.amazonaws.com/0/89599/7cb9eeaa-906c-633b-a69e-aadf2b4e73ac.png)

操作を行いSelenium上で扱うコマンドを自動で作成されたら、![スクリーンショット 2016-06-04 17.03.59.png](https://qiita-image-store.s3.amazonaws.com/0/89599/5eef1452-3fbf-e111-46f5-861e8171a890.png)を押せば自動に入力などの操作が行われます。
LibreSSL で SSL/TLS 対応の Webサーバを設定する（OpenBSD編）

[LibreSSL](http://www.libressl.org/) と Webサーバの組み合わせはまだまだ普及しておらず情報もあまり見かけません。
なので LibreSSL を使った SSL/TLS 対応の Webサーバの設定について調べてみます。

---

# 環境
最初から LibreSSL が組み込まれている [OpenBSD](http://www.openbsd.org/) ならとっても簡単！？
最新の OpenBSD 5.9 を使ってやってみました。

## OS の入手
OpenBSD 5.9 のインストールは以下のサイトで一覧されている Mirror サイトから i386/install59.iso をダウンロードして行いました。
http://www.openbsd.org/ftp.html

## httpd について
OpenBSD は 5.6 以降、ライク フローターさんという方が開発した独自の httpd を提供しており FastCGI と TLS がサポートされています。
HSTS (HTTP Strict Transport Security) にも対応しています。
(詳しくは `man httpd` でマニュアルを参照)

この httpd の紹介スライド
[Introducing OpenBSD's new httpd - AsiaBSDCon 2015 (PDF)](https://www.openbsd.org/papers/httpd-slides-asiabsdcon2015.pdf)

今回はこの httpd を使って、コンパイルや追加インストールなしでの SSL/TLS 対応 Webサーバの設定を紹介します。

# 設定手順

## (1) サーバの秘密鍵と証明書を作る
LibreSSL の `openssl` コマンドを使って秘密鍵とサーバ証明書(自己署名証明書、いわゆるオレオレ証明書)を生成します。

```shell-session
# openssl genrsa -out server.key 2048
# openssl req -new -key server.key -out server.csr
# openssl x509 -days 30 -req -signkey server.key -in server.csr -out server.crt
```

## (2) サーバの秘密鍵と証明書を配置する
上で生成したサーバの秘密鍵と証明書を所定のディレクトリに置きます。

```shell-session
# mv server.key /etc/ssl/private/
# mv server.crt /etc/ssl/
```

## (3) Webサーバの設定をする
httpd の設定ファイルを編集して、SSL/TLS 通信の設定を行います。

```bash:/etc/httpd.conf
server "default" {
        listen on * port 80
        listen on * tls port 443
        root "/htdocs"
        tls certificate "/etc/ssl/server.crt"
        tls key "/etc/ssl/private/server.key"
}
```
(上記以外の設定項目は `man httpd.conf` で参照できます。)

## (4) テスト用の html を作成する
テスト表示用に index.html を作成しておきます。

```html:/var/www/htdocs/index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>LibreSSL WWW TLS test</title>
  </head>
  <body>
    <div align="center">
      <img src="libressl.jpg">
      <h1>LibreSSL WWW TLS test</h1>
    </div>
  </body>
</html>
```
これで設定は完了です。

# 動作確認
`/etc/rc.d/httpd -f start` で Webサーバを起動して SSL/TLS 接続できるか動作確認してみます。

## Web ブラウザで接続してみる
https (443番ポート) にアクセスするとテスト用に作成したhtmlが表示されるはずです。

## s_client で接続してみる
SSL/TLS での通信を確認するために `openssl s_client` で接続してみます。
暗号スイートとして 'CHACHA20' も指定してみました。

```shell-session
# openssl s_client -port 443 -cipher 'CHACHA20'
CONNECTED(00000003)

... <略> ...

---
No client certificate CA names sent
---
SSL handshake has read 1700 bytes and written 372 bytes
---
New, TLSv1/SSLv3, Cipher is ECDHE-RSA-CHACHA20-POLY1305
Server public key is 2048 bit
Secure Renegotiation IS supported
Compression: NONE
Expansion: NONE
No ALPN negotiated
SSL-Session:
    Protocol  : TLSv1.2
    Cipher    : ECDHE-RSA-CHACHA20-POLY1305

... <略> ...
```
TLSv1.2 と ECDHE-RSA-CHACHA20-POLY1305 で接続できていることを確認できました。
暗号スイートとして 'CAMELLIA' を指定することもできます。

# まとめ
LibreSSL 使うなら OpenBSD が手っ取り早いというお話でした。
実際的なニーズとしては「Apache や Nginx で使いたい」でしょうか。
これらも調査していかないといけません。
AWS Summit Tokyo 2016 / 聴講メモ / ビッグデータ 101 ～ AWS で始めるビッグデータパイプラインの設計と実装～

## ■概要
* 全体のアーキテクチャを設計するための方法論、適切な AWS サービスを選択するためのポイント、典型的なユースケースやアーキテクチャパターンの実装例をステップバイステップで一挙紹介

## ■登壇者
* 内海 英一郎さん（アマゾン ウェブ サービス ジャパン株式会社　技術本部 ストラテジックソリューション部 ソリューションアーキテクト）

## ■ビックデータの事例
* AdRoll: 600億/1日
* FINRA: 5PB 750億イベント/1日
* Hearst: 250以上のサイトからクリックストリーム 100GB/1日

## ■悩ましいところ
* テクノロジーや方法論が複雑・高度化

## ■アーキテクチャ全体のモデリング
* 最も抽象的な概念から始める
* 問題領域
	* データの断片 => 価値を持った情報に変換すること
* ステップは5つ
	* データ収集のステージ
		* データソースへのインタフェースを提供
	* 前処理
		* 収集したデータを保存ように変換・登録
	* データを保存するステージ
		* 繰り返し利用されるデータを蓄積・保持
	* 後処理
		* 提供用に変換・登録
	* データ利用を提供するステージ
* 収集の特性
	* ストリーム
		* ペイロード小さい
		* 発生件数多い
	* ファイル
		* ペイロード大きい
		* 発生件数少ない
* 前処理の特性
	* リアルタム処理
		* レイテンシ重視
	* バッチ処理
		* スループット重視
* データ保存の特性
	* 関連データベース
		* ハードスキーマ
		* アクセスパターンに制限ない
		* スケールに
	* NoSQL
		* ソフトスキーマ
		* 捜査限定t系
		* スケール
	* サーチエンジン
		* ソフトスキーマ
	* データウェアハウス
		* ハード
		* 大容量なkensakuni最適化
	* ストリームスキーう
		* スキーマフリー
		* 到着順に一定時間のウィンドウを保持
	* データレイク
		* スキーマフリー
		* 後から自由に処理
* 後処理の特性
	* 機械学習
		* 保存データへアルゴリズムを適用
		* 予測など
	* クエリ
		* 抽出して並び替え
* 可視化
	* 可視化
		* 人
	* API
		* コンピュータ向け

## ■AWSサービスの選択の着眼点
* 指針
	* Right Tools for the Job
		* やりたいことに最適化
		* 機能的特性と性能的特性の両面から最適なサービスを見極める
	* Managed Service First
		* インフラの運用をAWSに任せてアプリケーションの開発に集中しましょう
* ストリームデータ
	* Kinesis Streams, Kinesis Firehose
* ファイル
	* S3, AWS Import/Export Snowboll
* リアルタイム
	* Lambda, EMR
	* Firehose(そのままロードしたいとき)
* バッチ処理
	* EMR, Data Pipeline(複数ジョブの制御)
* 関連データベース
	* RDS
* NoSQL
	* DynamoDB, Elasticserch Service(検索だけでなく集計なども)
* サーチエンジン
	* CloudSearch Elasticserch
* データウェアハウス
	* Redshift
* ストリームデータ
	* Kinesis Streams(1日デフォ、最大7日I)
* データレイク
	* S3
* 機械学習
	* Machine Learning, EMR
* 問い合わせ
	* EMR(Hive, Presto), QuickSight(Spice)
* ※Tips
	* ストレージとコンピュートの分離: エンジン交換可能
	* gyaku ni
	Redshiftなどは柔軟性を犠牲にしてレイテンシーをゆうせん
* 可視化
	 EMR(Hue, zeperlnA1, Elasticserch(Kinaba)
	 QuicSight
* API
	* API Gateway, Lambda

## ■典型的なユースケースの実装方法
* ユースケース1: リアルタイムモニタリング
	* 要件
		* 数千のセンサー、毎秒、アップロードJSON
		* 特異値だけでもみ
		* ダッシュボード
		* 時系列
	* どうする？
		* 収集: リアルタイム
			* Kinesis Streams センサーからSDKで直接
			* Lambda関連付けで前処理、特異値検出、Firehoseに送信、Elasticserchにロード
		* 保存: JSOIN => ソフトスキーマ
		* 照会:
			* Elasticserch
		* ダッシュボード => 可視化
			* Elasticserch
* ユースケース2: ログアナリティクス
	* 要件
		* 日次で大容量ファイル
		* 数百TBのデータ
		* 分析はログ範囲のみ
		* アドホックに検索したい
	* どうする？
		* 収集: ファイル
			* S3
		* 前処理: バッチ
			* Hive (Hive Activityで起動)
			* ORC形式に変換してHiveのテーブルにロード(S3)
		* 保存: データレイク
			* S3
		* 問い合わせ:  EMR
			* HiveQL
		* 照会: EMR
			* Hueでクエリしスプレッドシート、グラフ
* ユースケース3: ラムダアーキテクチャ
	* 要件
		* アクセスログ常時
		* リアルタイムは精度低くても良い
		* 日次で高い制度バッチ
		* セグメントを
	* どうする？
		* 収集: ストリーム
			* Kinesis Streams(Kinesis Aagent でlog tail), Lambdaでセグメント判定)
		* 前処理: リアル + バッチ
			* Hive のテーブル, HiveQLでDynamoDBにロード
		* 保存: NoSQL
			* DynamoDB(ユーザをハッシュで)
		* 問い合わせ
			* API Gateway, Lambdaで問い合わせて戻す
## ■まとめ
* モデリング
	* 5つのステージ
* サービス選択の着岸点
	* 適切なサービスを使う
	* 一つのサービスも使いわける
* ユースケース
	* Firehoseの賢い使い方
	* Hive - S3の上手な組み合わせ

---
※当日の生メモです(ほぼ校正していませんm(_ _)m
※登壇者の方の情報など一部 http://www.awssummit.tokyo/devcon/index.html から引用させて頂きました
AWS Summit Tokyo 2016 / 聴講メモ / Windows 開発者のための継続的デプロイ on AWS

## ■概要
* ASP.NET Core アプリケーションの継続的デプロイを行う方法について解説

## ■登壇者
* 福井 厚さん（アマゾンウェブサービスジャパン株式会社　技術本部 エンタープライズ ソリューション部 ソリューション アーキテクト）

## ■会場調査
* Windowsの人: ほぼ
* .NETの人: ほぼ
* C#の人: かなり
* VBの人: 少し
* F#の人: ほぼゼロ

## ■本セッションの目的と対象者
* 目的
	* AWSをWindows開発環境・実行環境として容易に導入すること
* 対象
	* 開発者、アーキテクト

## ■Windows開発社のためのAWS導入手順
* 3ステップ(ry

## ■開発環境構築
* 目的
	* 開発を容易にするため
		* AWS Tools for Visual Studioがおすすめ
		* AWS Tools for Windows Powershellも
* アカウント取得
	* (ry
* セットアップ
	* (ry
* AWS Tools for Visual Studio
	* AWS Sample Projects(3種類のテンプレート)を提供
	* コーディング例
		* AmazonEC2Clientの使用例
	* その他のテンプレート
		* AWS Lambda Function Project(Node.js)
		* AWS CloudFormation Projet
	* AWS Exploorer: EC2, RDSなどにアクセスできる
		* DEMO:
			* Amazon S3のバケットを参照

## ■実行環境構築
* 実行環境を設計する
	* 検証環境、本番環境用にVPCを構築
	* ポイント: 検証、本番環境を同等な構成にする
		* => クラウドの(コスト)メリット
	* 例
		* VPCにAZ 2つ、Public Subnet 2つ、Private Subnet 1つ
	* 使えるWindowsのバージョン
		* (ry
	* RDPで楽ちん
	* Amazon RDS: SQL Serverもおk
* 実行環境を構築する
	* 環境ごとにVPC定義など: マネージメントコンソール
	* DBインスタンス:  マネージメントコンソール
	* アプリケーションのデプロイ環境を構築: AWS Elastic Beanstalk
* AWS Elastic Beanstalkの活用
	* DEMO:
		* .NET ASP MVCプロジェクトのVSからのデプロイ
		* Publish to AWS => Beanstalk => Create new Enviromet ...(ry
			* 可用性の構成
			* VPCの選択
			* Subnetの設定
			* デプロイメントの設定
			* パーミッションの設定
		* 再デプロイの例
			* 文言修正
			* ビルド
			* Re deploy
	
## ■継続的デプロイ
* 継続的デプロイの目的
	* 自動化することのメリット
		* 手作業によるミスを防ぐ
		* 高速化でリリーススピードも向上
		* エラーの早期検出 etc...
* 継続的デプロイのための設計
	* 目的に合わせて設計する
* AWSのサービス
	* Code Commit
		* コード管理
		* S3
		* Git互換
	* Code Deploy
		* エージェントをEC2にいれれば利用可能
		* GitHub, S3とも
	* Code Pipeline
		* ソース/ビルド/テスト/デプロイのプロセスを管理
		* AWSのサービスやサードパーティとの連携
		* etc...
		* 開発のスタイルにあった柔軟なワークフローが定義できる
* 継続的デプロイの実施
	* 設定手順
		* EC2のデプロイ先の設定: 
			* デプロイ対象のインスタンスにエージェントをインストール
			* AppSpec File(appspec.yml)
				* デプロイパス、カスタム権限、ステージごとの実行スクリプトを指定可能
					* files
					* hooks
		* CodePipelineの設定:
			* GitHubのブランチなどを指定
			* アプリケーション名、デプロイメントグループなどを設定
			* 実行
		* エラー発生時の確認
			* パイプラインのエラー箇所を確認できる
* AWS CodePipelineのDEMO:
	* UnitTestが失敗するパターン
	* Source -> Beta(ステージング環境でテスト) -> Release(本番環境でテスト)
	* コマンドラインでS3にアップデート
	* CodePipelineが変更を検知...失敗...エラーログの照会

## ■まとめ
* Windows開発者のためのAWS導入手順はシンプルに3ステップ
* AWSが提供するサービス、ツールをうまく利用して自動化を
* 自動化によって継続的デプロイ on AWSを！

---
※当日の生メモです(ほぼ校正していませんm(_ _)m
※登壇者の方の情報など一部 http://www.awssummit.tokyo/devcon/index.html から引用させて頂きました
AWS Summit Tokyo 2016 / 聴講メモ / 【日光ケミカルズ様登壇】SAP＆業務システムのフルクラウド化 ～ 3 年運用してみてわかったそのインパクト～

## ■概要
* SAP 基幹システムフルモジュールの AWS への導入について

## ■登壇者
* 長谷川 昌之さん（日光ケミカルズ株式会社　取締役総務部長）

## ■会社概要
* 日光ケミカルズとは
	* コロイド化学を応用した、化粧品、医薬品などのパーソナルケア分野の提供
	* 東京、名古屋、大阪、九州、シンガポール
	* 化粧品分野が強い
	* 70周年
* 化粧品についてひとことだけ
	* 昔は
		* 医薬品と比べて効能・効果を謳ってはならない
	* 今は
		* 使用感、ファッション性
		* 高い安全性と効果が求められるようになってきた
		* => この検証が鍵
	* 効果・安全性試験
		* 2009年以前
			* 動物試験あり
			* 培養した細胞による動物試験の切り替え
		* 2015年
			* 人間の皮膚を入手し、冷凍保存(日本国内では不可)、フランスの合弁会社
		* 近い将来
			* iPS細胞(システムセル)技術を使った高精度な試験
* 利用しているR/3モジュールとサブシステム
	* 2004導入
	* ほぼフルモジュール使用
	* Windowsサーバ

## ■AWS移行プロジェクト概要
* R/3導入からAWSまでの流れ
* 2004年 SAP ERP導入・稼働
* 2007年 アップグレード
* 2011年 DC移設
* 2013年 AWSヘ

### ■■プロジェクト発足の経緯
* 解決すべき課題
	* DR/BCP
		* 物理的に離れた場所バックアップ
		* コストダウン
		* サポート要員不足・運用不可軽減

### ■■サービスとパートナーの選定
* ポイントは3点
	* DR
		* DCの移動の手間がない
	* (ry
* 5社から選定した
	* A社: 大阪にテーブをバイク便で
	* B社: 十勝に移動しましょう。岩盤が強固で。。
	* アマゾン/ISID: 首都圏3箇所にあるDCに自動バックアップ。数時間で復旧可能
* 課題
	* 予算計上が難しい
		* 為替による精算
		* 従量課金
* 選定のポイントは6点
	* バックアップ課題を解決
	* 高いスペックのサーバを時間課金で
	* ハードウェア障害を気にしなくていい
	* 同業他社と差別化
	* 他業者の事例が豊富
	* セキュリティは クラウド > オンプレ
* システム全体像
	* シンガポール、国内拠点ともファイルサーバ、ADなし(上海のぞく(金盾で遮断されることを懸念))
	* 国内はSoftbank Smart VPN
	* AMI backup

## ■3年運用してわかったこと
* 初期導入時のAWS導入に対する不安9点
	* クラウド自体が不安
	* ハードウェアスペックが不安
		* => 現状は公開
	* データセンターの物理的所在が明らかでない
	* 米国企業ゆえの法的制約(パトリオット法米国愛国法)
		* => 2016/06/01失効
	* 帯域、経路が不安(ベストエフオート)
	* 従量課金による経費の予算化が困難
		* => ISIDを挟むことで解消
	* 仮想化による共有、セキュリティホールなど
	* ファーストサーバのデータ消失 -> 倒産事例
	* 費用が高くつくと困る
* AWSの実際
	* 信頼性
		* 物理サーバの場所
			* => DCにいく必要がなくなり、運用負荷は激減
		* データ消失の危険性
			* => 事例は特殊事例
	* 安定性
		* クラウドサーバは不安定？
			* => 業務に影響のある障害はゼロ
			* => 動作が不安定になることもない
		* 事業継続性は？
			* 3.11のような災害があっても別のAZに短時間で切り替え可能
			* オンプレ時代に無かった安心感が得られた
	* 性能
		* 移行後全体で * 42%の高速化
	* コスト
		* DC費用・運用費で45%ダウン(DR対策除く)
		* AWSのサービス自体が通算51回の値引き
* 想定外の効果
	* グループ会社間での製造部門の合併時のシステム移行でメリットを実感
* 想定外の困ったこと
	* 上海オフィスのファイルサーバを統合できないこと(AWSはバックアップ用途に限っている)

## ■活用状況と今後 - Workspaces導入
* 全体スケジュール
	* 2014-2020
* 抱えていた課題
	* 情報漏洩のリスク(外勤営業)
	* クライアントPC陳腐化による買換え・移行作業負荷
	* Windowsバージョン追従
	* (ry
* ポイント
	* コストは4年間で25万とんとんだが、十分に見合うメリットがある
	* 段階的な導入
	* (ry
* VDIの現状と今後
	* データ漏洩リスクなく自宅勤務できる
	* (ry
* VDIの課題
	* Windows Update後ログインできないことがたまにあった
	* 海外からは遅い

## ■まとめ
* ビジネスに求められる要望が高まっている
* 多様化・高度化する業務内容と扱う情報を素早く対応可能なAWS
* (ry

---
※当日の生メモです(ほぼ校正していませんm(_ _)m
※登壇者の方の情報など一部 http://www.awssummit.tokyo/devcon/index.html から引用させて頂きました
AWS Summit Tokyo 2016 / 聴講メモ / 【Gunosy様登壇】AWS を使ったモバイルアプリの設計と実装

## ■概要
* プロダクトの開発スピード向上や運用コスト減に大きく寄与できる AWS モバイルサービス群について

## ■登壇者
* スピーカー： 塚田 朗弘さん（アマゾン ウェブ サービス ジャパン株式会社　技術本部 メディア・エンターテインメント部 ソリューションアーキテクト）
* ゲストスピーカー： 松本 勇気さん （株式会社Gunosy　開発本部執行役員）

## ■このセッションについて
* 対象者1
	* モバイルアプリのエンジニアの方
* 対象者2
	* モバイルアプリのバックエンドのサーバサイドの方
* ゴール
	* AWSを有効活用することでビジネスにフォーカスを

## ■AWSのモバイルサービス
* 紫アイコンがモバイルに最適化されたサービス
* 実機テストの並列実行なども

## ■モバイルアプリアーキテクチャ分類
* 3つのアーキテクチャで着目するのは、バックエンドのアクセス手法
* それは
	* General Web Architechure
		* 王道パターン
		* EC2なのでなんでもできる
	* Serverless Architechure
		* API Gatewayを挟む
		* EC2もELBも使わない
		* APIからiOS, AndroidなどのSDKを生成できる
	* 2-Tier Architechure
		* API Gatewayすら無くす
		* AWS Mobile Hub

## ■アーキテクチャ分類を横断するモバイルサービス
* AWS Device Farm
	* モンキーテスト的なFuzzテストもあり

## ■シンプルなアプリ側の実装
* (ry

## ■ケーススタディ
* 現行プロジェクト
	* メディアパス
	* KDDIと共同の新規メディア開発
* 特徴
	* 非常に小なチーム
		* デザイナ2名
		* サーバサイド1名
		* インフラ1名
		* フロント1名
* クライアントに対する処理の移譲
	* AWS Mobile SDKを利用
	* Cognito経由の認証・認可
	* デバイスのトークン管理をSNSで
	* ログの配送は直接Kinesis
* サーバレスアーキテクチャの部分的適用
	* 全てをサーバレスにはしない
	* 非同期で運用可能なものほを向いている
		* ユーザー設定管理
		* ログ配送・加工・集計
* Congnito Syncによるサーバレスなユーザ管理
	* Congnito -> Lambda -> SNS SQS -> Elasticsearch
* Kinesisによるログ管理フロー
	* ログ中継など行わない
	* Clinetでbuffering -> PutRecordsでまとめて送信 -> Kinesis -> ((EMR Spark Streaming -> RDS) + (Lambda -> S3 -> EMR Hive Prest))

## ■まとめ
* (ry

## ■Appendix
* 2-TierアーキテクチャとmBaaSの違い

---
※当日の生メモです(ほぼ校正していませんm(_ _)m
※登壇者の方の情報など一部 http://www.awssummit.tokyo/devcon/index.html から引用させて頂きました
Windows10 から Vagrant を触ってみる

# 動機.
[Vagrant up で rsync のエラーが出てしまう現象.](http://qiita.com/sirone/items/71fe83d80ac668795d25)という記事を書いておきながら、自分で再度 VirtualBoxやら Vagrant を準備しなければならない状況になり、これならいっそ記事にしようと思いたちました。

# やってみる
## インストール

* [VirtualBox](https://www.virtualbox.org/)
* [Vagrant](https://www.vagrantup.com/)

そしてとりあえずインストールできているか確認してみる.

あと使用するコンソールは cmd.exe じゃなくて Git Bash を利用しています.

なんというか、普通に ls とか使えて楽だったもので(笑


```
$ vagrant -v
Vagrant 1.8.1
```

バージョンが表示されたら OK.

* Ubuntu のイメージ
  * これは http://www.vagrantbox.es/ から探して、適当に選ぶ.

VirtualBox に Ubuntu の box を登録する

```
$ vagrant box add Ubuntu14 https://github.com/kraksoft/vagrant-box-ubuntu/releases/download/14.04/ubuntu-14.04-amd64.box
```

実際に追加された box を見てみるのは list で見れる.

```
$ vagrant box list
Ubuntu14 (virtualbox, 0)
```

## vagrant の初期設定を行う

```
$ mkdir ubuntu
$ cd ubuntu
$ vagrant init Ubuntu14
```

## vagrant up
上記までできたら、ついに vagrant up.

```
$ vagrant up
```

# そうして長い旅が始まる…
## エラーが延々出力される

```
default: Warning: Connection timeout. Retrying...
```

知らんがな！
**どうしたか**、じゃなくて **どうしたらそれが解決するのか** を表示してくれ…！

[vagrant up起動に失敗したら - 3.Vagrantfileをいじる](http://qiita.com/super-hot-engineer/items/21e4456b8318db877f5b#3vagrantfile%E3%82%92%E3%81%84%E3%81%98%E3%82%8B)

とりあえず Vagrantfile に以下の一行コメントを外してみる

```
  vb.gui = true
```

```
$ vagrant up
```

VirtualBox 起動した！ でもエラーが出てる…！

> ホストマシンの仮想化支援機能(vt-x/amd-v)が使用できません。64ビット ゲストosは64ビットcpuを検出できず、起動できません。

**知らんがな。**

そして Windows10 になってから BIOS 画面って見たことないなーって思ってたら、どうやら***高速スタートアップ***が有効になっており、それによって起動時メニューも表示されない、ということだそうで。

ただ、結局 BIOS 設定に入っても仮想化についての設定が見つからず、解決できない状態に。

そこで、藁をも掴む勢いで、以下を参考に Hyper-V を切ってみることに。

http://blog.livedoor.jp/gel___shocker/archives/7644116.html

なんか来た！ エラーメッセージ変わった！

> Failed to mount folders in Linux guest.

***知らん。もう知らん。***

もう最初からやってみようってことでいったん ***destroy*** することに。
初心大事。

```
vagrant destroy
```

destroy しても Vagrantfile 自体は残ったままなので、そのままもう一度

```
vagrant up
```

してみる。

あれ？
動いた…！！

## 原因は何だったのか

何でしょう。
もう一度最初からやり直して、検証してみる予定。

ひとまず動きましたが、何か追加で分かったことなどがあったら更新していきます。

# 追記
## キーボード配列を JIS 配列にしたい(切実
もし Ubuntu インストールしたあとで、vi 開いて「US キーボード使ってねぇから記号わかんねぇぇぇぇ！！ vi がまともに機能しねぇじゃねぇかああああ」って PC を壊しそうになったら、以下の記事を参考にさせてもらおう！

[キーボードレイアウト変更（ubuntu）](http://qiita.com/jjjiii26/items/af134896483ae9d32a7d)

jjjiii26 さん、この窮地を救っていただきありがとうございます…
危うくキーボードのキー変換一覧表でも作ってやろうかと思うぐらい取り乱しました。もう大丈夫。

## 初期の vi の挙動が気に入らない
これはもう正直好みで。
個人的には vi よりも普段使っている Windows のようなキー入力感が好きなので、vim を入れました。
仮想機は普段なら CentOS を利用しており、普段は Huge 版の vim を利用しています。
というわけで、以下のコマンドでお好きな vim を入れましょう。

```
sudo apt-get install vim-gnome
```

ちなみに、Vim の種類を細かく確認してくれている記事があって非常に助かったので、それも一緒に共有します。

[komagawa292's blog - UbuntuでインストールできるVimの種類](http://komagawa292.net/20140802/ubuntu-vim/)

こんだけ vi だの vim Huge だの言ってますが、全く vi とか vim とか興味ないのであしからず…。

それでは良きエンジニアライフを(^w^)ﾉｼ
クエリチューニング: GROUP BY から LATERAL への書き換え

「ユニークキーの GROUP BY」 を 「LATERAL」 に書き換えることで、クエリを性能改善できる可能性があります。
ここでは、非常にシンプルな書き換えの例を示します。

### テーブルの準備
まずは、以下のような「部署」、「書籍」、「部署ごとの書籍在庫数」を管理する3つのテーブルを準備します。
なお、「書籍」テーブルは、データベースの状況をイメージしやすいように用意しているだけで、以降のクエリ書き換えでは特に使いません。

```plpgsql
-- 部署のIDと名前を管理するテーブル department を作成
CREATE TABLE department (dept_id INTEGER PRIMARY KEY, name TEXT);

-- 部署の情報を5件登録
COPY department (dept_id, name) FROM stdin;
1	総務部
2	開発部
3	財務部
4	企画部
5	購買部
\.

-- 書籍のIDと名前を管理するテーブル book を作成
CREATE TABLE book (book_id INTEGER PRIMARY KEY, name TEXT);

-- 書籍の情報を6件登録
COPY book (book_id, name) FROM stdin;
1	AAA
2	BBB
3	CCC
4	DDD
5	EEE
6	FFF
\.

-- 部署ごとの書籍の在庫数を管理するテーブル book を作成
CREATE TABLE book_stock (
    dept_id INTEGER REFERENCES department(dept_id),
    book_id INTEGER REFERENCES book(book_id),
    stock_num INTEGER,
    PRIMARY KEY(dept_id, book_id)
);

-- 書籍の在庫情報を20件登録 (総務部2件、開発部4件、財務部4件、企画部6件、購買部4件)
COPY book_stock (dept_id, book_id, stock_num) FROM stdin;
1	2	7
1	3	3
2	5	2
2	4	7
2	3	3
2	2	8
3	4	10
3	2	10
3	1	1
3	6	4
4	1	5
4	2	7
4	3	10
4	4	10
4	5	5
4	6	4
5	3	6
5	5	5
5	2	8
5	1	10
\.
```

### クエリの書き換え例
ここでは、「部署ごとの総在庫数」を取得するクエリを取り上げます。
このクエリは、部署のIDをキーに GROUP BY で実現するのが一般的だと思います。

```plpgsql
SELECT
    d.name 部署名,
    sum(bs.stock_num) 総在庫数
FROM
    department d,
    book_stock bs
WHERE
    d.dept_id = bs.dept_id
GROUP BY
    d.dept_id;
```

この「ユニークキーの GROUP BY」 は、以下のような 「LATERAL」 に書き換えられます。

```plpgsql
SELECT
    d.name 部署名,
    hoge.sum 総在庫数
FROM
    department d,
    LATERAL (
        SELECT sum(bs.stock_num) sum
        FROM book_stock bs
        WHERE d.dept_id = bs.dept_id
    ) hoge;
```

データ件数が少ないときは、GROUP BY でも LATERAL でも性能に大差はありません。
しかし、データ件数 (特に LATERAL 内でアクセスするテーブルのデータ件数) が多くなると、
この書き換えにより大幅に性能を改善できる可能性があります。
【npm初心者】npm scriptsからbabel cliを叩く。

社内でカンタンな勉強会をしたので、その手順メモ。

## カリキュラム

- package.jsonとは何か。
- npm scriptsを読み書きできるようになろう。
- npmパッケージをインストールして、npm scriptsから呼び出せるようになろう。

今回はnpmパッケージの例として、ターミナルからbabelを実行できるbabel-cliを使います。

## 前準備

### node + npm
nodeとnpmのインストールは割愛します。

ちなみに、node.jsはnodebrewでインストールすることをオススメします。

[Macにnodebrew（node.js, npm）をインストールする手順](http://qiita.com/oreo3@github/items/622fd6a09d5c1593fee4)

### プロジェクト作成

作業する場所を作ります。

```
$ mkdir babel-cli-trial // ディレクトリ作成
$ cd babel-cli-trail // ディレクトリ移動
$ npm init -y // プロジェクト初期化
```

yオプションについては、[こちら](http://javascript-memo2.seesaa.net/article/433473316.html)を。

## babel cliの準備

### パッケージインストール

ターミナルからBabelを実行できるbabel-cliをインストールします。

```
$ npm intall babel-cli --save-dev
// 省略形：npm i babel-cli -D
```

さらに、ES2015をトランパイルするためには、もう１つパッケージをインストールします。

```
$ npm install babel-preset-es2015 --save-dev
// 省略形：npm i babel-preset-es2015 -D
```

これでパッケージの準備ができました。

## npm scripts

### package.jsonとは

```npm init``` コマンドでpackage.jsonが生成されたと思います。これはプロジェクトの設定ファイルになります。

### npm scriptsとは

package.json内に、scriptsという項目がありますが、これが__npm scripts__です。
npm scriptsにはシェルやUnixコマンドを記述でき、タスクランナーとしての機能を持たせることができます。

最近では、gulpやgruntを排して、npm scriptsだけで賄うケースもあるみたいですね。

[[意訳]私がGulpとGruntを手放した理由](http://qiita.com/chuck0523/items/dafdbd19c12efd40e2de)

### npm scriptsに追記

さて、新しいscriptを追記します。

```
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build:js": "babel hoge.js --out-file huga.js" // ← 新規追加行
},
```

さらにいくつかの下準備が必要なのですが、手順については、以下の記事を参考にして下さい。

[お試しでES2015を書く時は、CLIでBabelを動かすと便利](http://qiita.com/chuck0523/items/1be744db0327cc52975e)

ここでは、npm scriptsから、パッケージを実行するという点にフォーカスします。

### npm scriptsの実行

あとはターミナルからnpm scriptsを実行するだけですね。

```
$ npm run build:js
```

これでJSのコンパイルが行われます。良かったですね。

ちなみに、npm scriptsの利点としては、bashの再読み込みが不要です。node_modules/を探しに行ってくれるので、インストールしたパッケージをすぐに使うことができます。

おしまい。


## もっと知りたい方向け

先人のポストのリンクを貼らせていただきます。

- [npm-scriptsについて](http://qiita.com/axross/items/a2a0d148e40b66074858)
- [npm-scripts で使える便利モジュールたち](http://qiita.com/mysticatea/items/12bb6579b9155fd74586)
Pycharmメモ

自分が忘れたときのために、日本語でメモを残します。

#環境
・Win10(64bits)
・Python3系

#PycharmのWin10へのインストール
インストールファイルをダウンロードして実行するだけ。有料のProfessional Editionと無償のCommunity Editionがある。

#機能
## call graph
PycharmのProfessional版（有料版）だと、プロファイル機能というものが使えて、例えば、こんなグラフが書けたりするんですね。
<img width="824" alt="callgraph.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/126482/42ac36df-923f-f9d9-4e98-db72e8352957.jpeg">

大学のころ、C言語をエディタでぽちぽち入力してたくらいしかプログラミング経験がなくて、IDE使うのはPythonがはじめてなので、こういうのに驚きます。活用できるほどのスキルがないんですけど。

##Jupyter notebookの編集
Ipython HTMLノート（Jupyter notebook)も編集できます。使っていると動作が重たくなる印象ですが、便利に使えています。

ただ、Shift+Enterの初回実行時には、一旦表示されたOutの内容が見えなくなり、また、出力のナンバリングも見えなくなる不具合がある。もう一度、Shift+Enterすると、問題がないが、少し面倒。

##TODO管理機能
コメントに、TODOと書いたところをピックアップして表示してくれる機能があります。
ここ　http://d.hatena.ne.jp/yuheiomori0718/20130203/1359893004
の方が詳しく説明されています。

フィルタリング機能だとか、いろいろあって便利そうです。


## Quick Definition　関数の定義の表示
Ctrl+Shift+i で、その関数が定義されているソースを表示可能。表示ウィンドウから、Editを選択すると、編集を開始できる。

#便利なショートカット
-[Ctrl]+[Alt]+[l] : コード最適化
-[Ctrl]+[Alt]+[o] : インポート最適化 


#設定
##GUI上での、パッケージインストール・アンインストール・アップデート
File->Settings->Project->Project Interpreterを選択すると、インタプリタと同時に、パッケージ一覧も表示される。
この画面で、+でパッケージの追加、-でパッケージの削除、↑でパッケージのアップデートが可能。
※裏で動作しているのは、pipなんですかね？condaなんですかね？
##Word wrap（soft wraps)
1行の桁数を超える単語を次の行に送り、見やすくする機能。
`File -> Settings -> Editor -> "Virtual Space" group -> Use soft wraps in console`するか、Use Soft Wrapsボタンをクリックする。

#トラブル
##ファイルが黄色表示され、編集しようとすると、these files do not belong to the projectと表示される。
###背景
ローカルのフォルダから、ファイルをOneDriveのフォルダ配下に移動させたときに発生したかも。
検索すると、英語で、http://stackoverflow.com/questions/23042034/pycharm-opens-old-versions-or-files-in-duplicate-tabs-while-debugging
などが見つかるが、読んでもよくわからず。
###対処
.ideaフォルダを削除にて復活。正しい方法ではない気がするが、とりあえず。
たった 8 つの alias で git を大幅にわかりやすくする

こんにちは。皆さんは git を使っていると思います。が、

「 git は好きだが、 git の command 体系はどうにも我慢ならない」

という方が多いようです。実を言うと私もそうです。そこで私は alias をいろいろ定義して、 command 体系を少しでもましなものに近づけようとしています。今日はそんな私の気に入っている alias を紹介します。


# その 1 g -> git

まずはこれです。 `git` なんて日に 100 回くらい打つ command ですから、 1 文字にしてしまいましょう。

# その 2 stage -> add

git のわかりづらさの原因の一つは、同じ・ほぼ同じ概念に違う言葉が当てられていることではないでしょうか。その一つが stage にまつわる言葉です。

- stage
- add
- cache

の 3 種の言葉が、 stage 関係の操作に使われています。そこで、これらは stage に統一してしまいましょう。私は

```
$ g stage <file>
```

で `git add` を実行するようにしています。

# その 3 unstage -> reset HEAD

stage した後 cancel したくなることは、当然よくあることです。私はこの操作を unstage と呼んでいます。標準ではこの操作は

```
$ git reset HEAD
```

と、 stage の香りが微塵もしない command が当てられています。これはわかりづらいので、私は

```
$ g unstage
```

で unstage できるようにしています。

# その 4 ds ->  diff --cached
# その 5 du ->  diff
# その 6 df ->  diff HEAD

4 - 6 はまとめて説明してしまいます。

`ds` は、最後の commit と stage の差分を示します。もう stage した作業内容とも言えます。 `diff staged` の略と考えてください。

`du` は、 stage と worktree の差分を示します。まだ stage していない作業内容とも言えます。 `diff unstaged` の略と考えてください。

`df` は、最後の commit と worktree の差分を示します。作業内容の全てです。 `diff full` の略と考えてください。

以上の関係をまとめた図が、こちらです。

![git.png](https://qiita-image-store.s3.amazonaws.com/0/52705/f0ed11a2-11c6-5e69-5fed-bc4d299e3339.png)


# その 7 control -> add
# その 8 uncontrol -> rm --cached

標準の `git add <file>` は、次の二つの意味を持ちます：

- `<file>` をこれから git で version 管理すると宣言する
- `<file>` にした作業内容を stage する

私はこれが複雑だと感じたので、

```
$ git control <file>
```

で version 管理の宣言をすることにしています。

反対に、 git による version 管理をやめる宣言は、標準では

```
$ git rm --cached <file>
```

です。 File を消すわけでもないのに `rm` という文字列が入っているのが嫌だったので、私は

```
$ g uncontrol <file>
```

で version 管理をやめることにしています。

# 元ネタ

さて、以上 8 つの alias はどうだったでしょうか。これらは、私が初めて考えたものではありません。 eg という tool ( http://qiita.com/nojima/items/90120968a6412ec07a27 ) から多くの hint をいただいています。特に、用語の統一、 diff の引数の整理という idea はこれに負うところが大きいです。感謝したいと思います。
git rebase競合時、git checkout --theirsとか--oursする時には注意が必要

# 概要
git rebaseで競合したファイルが多い場合、大抵僕はgit checkout --theirsとか--oursで競合解決してます。
ある時職場で、僕が競合修正したファイルに、「以前コミットしたはずの修正が無い」といわれたので、
まさかと思い調査してみたところ--theirsとか--oursを行なって競合修正したことが原因でした。
一見楽そうに見える競合解決方法の--theirsと--oursですが、間違った知識でつかっていると危険なので注意してください。

# checkout --theirsと --oursで発生しうる悲劇

1~10までを英語で書いたファイルを作成します。
あえて、２と9を間違って書いてmasterブランチにコミットしておきます。

```
1 one
2 TOE
3 three
4 four
5 five
6 six
7 seven
8 eight
9 NAINE
10 ten

```

この時点でfeatureブランチを切っておきます。
そして、masterブランチで2行目のTOEを以下のようにtwoに修正してコミットします。
9行目のNAINEはあえて直さずにおいておきます。

```
1 one
2 two
3 three
4 four
5 five
6 six
7 seven
8 eight
9 NAINE
10 ten
```

つぎに、featureブランチに移って、2行目と9行目を修正してコミットします。
あえて2行目で競合が発生するようにtwoではなくtowと修正しました。

```
1 one
2 tow
3 three
4 four
5 five
6 six
7 seven
8 eight
9 nine
10 ten
```

git rebase masterとmasterのようにリベースをかけると当然、2行目で競合が発生します。
また、gitのオートマージにより9行目のnineはfeatureで直した単語になっています。

```
1 one
<<<<<<< 7f8b619dc56865912a9596195faba741938d39c9
2 two
=======
2 tow
>>>>>>> 2と10が間違っていたので修正
3 three
4 four
5 five
6 six
7 seven
8 eight
9 nine
10 ten
```

ここで、masterの変更が正しいからと言ってgit checkout --oursとしてしまうと悲劇が始まります。

```
$ git checkout --ours .
$ cat test
1 one
2 two
3 three
4 four
5 five
6 six
7 seven
8 eight
9 NAINE
10 ten
```

9行目は先ほどfeatureで直した値になっていて欲しいのですが、masterに一致されています。
当然ですが、featureに一致させるために--thirsしても以下のように間違った修正になってしまいます。

```
$ git checkout --theirs .
$ cat test
1 one
2 tow
3 three
4 four
5 five
6 six
7 seven
8 eight
9 nine
10 ten
```

git checkout <file>は指定したファイルを指定したコミットに一致させることになるので、
せっかくgitがオートマージしてくれてもその心遣いを完全に無視してリベース元なり、リベース先なりのブランチの変更に合わせてしまいます。

# まとめ
横着してgit checkout --theirsとか--oursして競合解決するのではなく、面倒ですが手作業で解決しようと思います。
いい方法を知っているという方いらっしゃいましたらご教授ください。。。
railsでユーザー付きノートモデルにユーザー付きコメント機能を乗せる。

忘れないように私的メモ。

コメントモデルに「user_idとnote_id」を取得させるのにはまった＠＠

前提条件として、Deviseなどでユーザーセッションを持つサイトを作成。

scaffoldでUserモデルを作成してある。

コメントの投稿も、表示も、`views/notes/show.html.erb'から投稿できるように。


#モデル設計

それぞれのモデルに関連付けるように設計する。


今回の場合
Userは「ノートを複数所持`has_many :notes`。また、コメントも沢山している。`has_many :comments`」
Noteは、「色々なユーザーに所持されている`has_many :users`、また、色んな人からコメントも貰っている`has_many :comments`」
Commentは、「ユーザーによって記述され`belongs_to :user、コメントはユーザーに属している`belongs_to :user`」

```ruby:terminal
rails g scaffold user name:string
rails g scaffold note title:string
rake db:migrate

rails g scaffold comment user:references note:references
rake db:migrate
```

で、UserとNoteにhas_manyとかbelongs_toを追記。
Commentにもきちんと記述されているか確認しとこう！


```ruby:models
class User < ActiveRecord::Base
    has_many :notes
    has_many :comments
end

class Note < ActiveRecord::Base
    belongs_to :user
    has_many :comments, dependent: :destroy 
end

class Comment < ActiveRecord::Base
  belongs_to :user
  belongs_to :note
end
```

#ルーティング
ノートからコメントにルーティングできるようにネストにする

commentsをscaffoldで作ってる場合は、不要なルートはonlyで絞りこむように！

```ruby:route
resources :notes do
    resources :comments
end
```

#コントローラー

`note_controller`に関しては、何も記述する必要はない。
コメントへの書き込み作業はcomments_controllerにお任せ

```ruby:comments_controller
def create
    @note= Note.find(params[:note_id]) #ページ番号を取得します
    @comment = @note.comments.build(comment_params) #commentテーブルに書き込む
    @comment.user_id = current_user.id #セッション中のユーザーidを練りこむ
    respond_to do |format|
      if @comment.save
        format.html { redirect_to (:back), notice: 'Comment was successfully created.' }
    .この変は環境好みに合わせて書き直してくれ。ちなみに、redirect_to (:back)としとくと、前の画面に戻れるで
    .
```

#ビュー。

##投稿用部分

投稿したコメントは`notes/show.html.erb`で表示させる。

```ruby:notes/show
<h2>Add a comment:</h2> 
<%= form_for([@note, @note.comments.build]) do |f| %> 
<div class="field"> 
<%= f.label :body %><br /> 
<%= f.text_area :body %> 
</div> 
<div class="actions"> 
<%= f.submit %> 
</div> 
<% end %> 
```

##コメント表示部分

`comment.user.○○○`で投稿ユーザーの情報が取得できる。

```ruby:notes/show

<% @note.comments.each do |comment| %>
         <p><%= "#{comment.user.name}さんが、#{comment.body}と言っています" %></p>
        <% end %>
```


こんな感じ。
結構難しかった。
Modelの関係性の構築は比較的簡単だけど、それを動かすにはどうするかが難しいね。

form_for ([@note, @note.comments.build])の式の意味もよくわかってないし・・・
うーん。難しい＠＠
brew install wget --with-debug

単純にbrew installでwgetをいれてしまうと `disable-debug` オプションつきでインストールされてしまい-dオプションが使えない

このようにするとデバッグモード(-dオプション)が使える
`brew install wget --with-debug`

brewのコードを見れば他にもオプションがあることがわかります
`/usr/local/Library/Taps/homebrew/homebrew-core/Formula/wget.rb`
【論文シリーズ】RBMを時系列データに応用する

## 元の論文
[高次元系列データの多レベル特徴表現学習(Learning Multilevel Distributed Representations for High-Dimensional Sequences)](http://goo.gl/EP0Htk)
Ilya Sutskever and Geoffrey Hinton (2007)

## 1. 要約
* 系列データ(動画とか発話とか)に**生成モデル**(厳密にはRBM=「制限付きボルツマンマシン」)を適用し、多くの場合で、事後分布を推定できるようにした。Temporal RBMと言われる。
* 比較対象: 線形動的システム、隠れマルコフモデル
	→混合ガウスモデル、かつ線形結合の伝播でしか、事後分布を推定できないという課題があった。



## 2. 骨子の理論
系列データが関わる時の、RBMの条件付き分布を表現する(可視変数、隠れ変数ともに)

![151124122137_4.JPG](https://qiita-image-store.s3.amazonaws.com/0/127228/62329ff3-ef37-ec2d-1560-05c2bbdf6b9c.jpeg)


系列$t$におけるパラメータとして可視変数と隠れ変数を推定したい。系列$t-m$から$t-1$の可視変数と隠れ変数が予め観測できると、系列$t$の事後確率はボルツマン分布に従うと仮定できる。
$$P(V_t, H_t|V_{t-m}^{t-1},H_{t-m}^{t-1})= \exp(V_t'C_0H_t+B_V(V_{t-m}^{t-1})'V_t+B_H(V_{t-m}^{t-1},H_{t-m}^{t-1})'H_t)/Z$$

$B_V$や$B_H$は、重みベクトルの集合のようなものを表す。

$$B_V(V_{t-m}^{t-1}) = A_1'V_{t-1}+...+A_m'V_{t-m} + \bf a$$
$$B_H(V_{t-m}^{t-1},H_{t-m}^{t-1}) = B_1'H_{t-1}+...+B_m'H_{t-m} + C_1'V_{t-1}+...+C_m'V_{t-m} + \bf b$$

上式において、$t-1$までの隠れ変数を導出する過程で困難が生じる。したがって、下式のようにV→Hのフィルタリングのおいて近似式を追加する。

$$P(H_{ti}=1|V_{1}^{t},H_{1}^{t-1})=\sigma((C_0'V_t)_i+B_H(V_{t-m}^{t-1},H_{t-m}^{t-1})_i)$$

学習は、$B_V$, $B_H$を構成する重み行列$A～C$の更新により、進行する。



## 3. モデル適用例
本稿では、単層RBMによる学習と、RBMの積層による多層学習の2通りを行った。
(動画のソース: www.cs.utoronto.ca/∼ilya/aistats2007_filter/index.html)
ソースの動画の1フレームを20 x 20の400ピクセルに分割した。
学習データは、100フレームを1セットとして、10000セット準備した。

単層学習では、ピクセルをそれぞれ可視ユニットに投入し、400ユニット作った。
隠しユニットは200である。
前後系列のデータの繋がりによって、4つのモデルを作った
1.隠し-隠し
2.可視-隠し
3.可視-可視
4.1～3すべて
学習係数は、0.00005, モメンタムは0.9である。
学習係数は、エポックの進捗に伴い、増加させる。
訓練にかかった時間は、20時間だった。
結果として、いずれのモデルも良好に学習とノイズ除去が進んだ。
WebAssembly(wast)を書こう!

# sexpr-wasmをインストールしよう!

https://github.com/WebAssembly/sexpr-wasm-prototype を参照。

# 環境を作ろう!

インスコして

```
git clone https://github.com/ukyo/wast-small-starter.git
cd wast-small-starter
npm install
```

スタート

```
npm start
```

# 書こう!

何使ってもいいんですが、Visual Studio CodeのExtensionを作ったので是非使ってみてください。
https://marketplace.visualstudio.com/items?itemName=ukyo.wast

文法等は https://github.com/WebAssembly/spec/tree/master/ml-proto/test を見るとなんとなくわかると思います。
React.jsでボタン作り

[React.js: Getting Started](https://app.pluralsight.com/library/courses/react-js-getting-started/table-of-contents)を参考
クリックすると数字が増えるボタンを作る

Plunkerを使用。

```index.html
<!DOCTYPE html>
<html>
  <head>    
  </head>

  <body>
    <div id="root"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
    <script src="https://fb.me/react-0.13.3.js"></script>
    <script src="script.js" type="text/babel"></script>
  </body>
</html>
```
###
```script.jsx
var Button = React.createClass({
  localHandleClick: function(){
    this.props.localHandleClick(this.props.increment);
  },
  render: function(){
    return (
      <button onClick={this.localHandleClick}>+{this.props.increment}</button>
    );
  }
});

var Result = React.createClass({
  render: function(){
    return(
      <div>{this.props.localCounter}</div>
    );
  }
});

var Main = React.createClass({
  getInitialState: function(){
    return {counter: 0};
  },
  handleClick: function(increment){
    this.setState({counter:this.state.counter+increment});
  },
  render: function(){
    return(
      <div>
        <Button localHandleClick={this.handleClick} increment={1} />
        <Button localHandleClick={this.handleClick} increment={5} />
        <Button localHandleClick={this.handleClick} increment={10} />
        <Button localHandleClick={this.handleClick} increment={100} />
        <Result localCounter={this.state.counter} />
      </div>
    );
  }
});

React.render(<Main />, document.getElementById("root"));
```

とりあえずReact.createClassしてrender書く
pyOSCでint64が受け取れなくてはまったメモ

# 状況
[UnityOSC](https://github.com/jorgegarcia/UnityOSC)からクライアント([pyOSC](https://github.com/ptone/pyosc))にUnixTimeのTickをlong型で送ろうとしたら受け取れなかった
### エラーメッセージ
`OSCServer: KeyError on request from localhost:49206: 'h'`
### 環境
- Mac OSX 10.10.5
- Unity Pro 5.3.2f1
- UnityOSC v1.2
- python 2.7
- pyOSC 0.3.5b5294

# 原因
pyOSCがint64の受け取りに対応してない

# 対応
受信メッセージに対するtypeTagの判別は`def decodeOSC(data):`内で行っているが
`def _readLong(data):`の定義はあるのにtypeTagが`h`の場合に呼ばれてないので
typeTagが`h`の場合に_readLong()を呼ぶよう修正

具体的には

	table = {"i":_readInt, "f":_readFloat, "s":_readString, "b":_readBlob, "d":_readDouble, "t":_readTimeTag}
を

	table = {"i":_readInt, "h":_readLong, "f":_readFloat, "s":_readString, "b":_readBlob, "d":_readDouble, "t":_readTimeTag}
に修正した

# その他
- [OSC仕様](http://cnmat.org/OpenSoundControl/OSC-spec.html)([和訳](http://veritas-vos-liberabit.com/trans/OSC/OSC-spec-1_0.html))  
これによると64bit整数は認識しなくても良いものみたいなので今回の問題は単純にpyOSCのバグとは言えなそう
- とりあえず[プルリク](https://github.com/ptone/pyosc/pull/5)送った
- 今回のように時刻を送りたいなら時刻タグ(typetag:t)を使ったほうが正解かも？
- typeTag:hって何の頭文字？
Excelで空セルを上のセルの値で埋めるマクロ

タイトルだけではよくわかりませんが、例えば

| 分類   |      機能名      | 
|----------|:-------------:|
| 認証      |  ログイン　　 |
|          |   ログアウト  |
| ユーザ管理 | ユーザ登録 |
|          | ユーザ更新 |
|          | ユーザ削除 |

という表の分類の列の空セルを埋めて

| 分類   |      機能名      | 
|----------|:-------------:|
| 認証      |  ログイン　　 |
| 認証     |   ログアウト  |
| ユーザ管理 | ユーザ登録 |
| ユーザ管理 | ユーザ更新 |
| ユーザ管理 | ユーザ削除 |

としたいときに使えるマクロです。

```VBScript
Sub Pad()

    Dim s As Object
    Dim str As String
    
    str = ""
    
    For Each s In Selection
        If (s.Value <> "") Then
            str = s.Value
        End If
        s.Value = str
    Next
End Sub
```

実際使うと下のようになります。
![excel_pad1.gif](https://qiita-image-store.s3.amazonaws.com/0/83184/e8f0d0c8-fcdd-15d5-2a98-39e977a81f84.gif)

横方向にも使えます。
![excel_pad2.gif](https://qiita-image-store.s3.amazonaws.com/0/83184/70ccfab9-a39e-c63e-824c-c2537d3b8fc3.gif)
自分以外のユーザの作ったリストを取得する

フォローイング/フォロワーの作ったリストのリストが欲しくなって、[そういうものを作るツール](https://gist.github.com/kotet/ad067397124278804718366b88c12ff2)を作った時のメモ。  
はじめTweepyでやろうと思ったんだけど、自分以外の持っているリストを取得する、つまり`lists/list`、`lists/ownerships`、`lists/subscriptions`などに対応する機能が見つけられなかった。  
結局自力でやることになった。なんで無いんだろう……

```py3
from requests_oauthlib import OAuth1Session
import json

session = OAuth1Session(consumer_key, consumer_secret, access_token, access_token_secret)

api_url = 'https://api.twitter.com/1.1/lists/ownerships.json'
params = {'user_id': userid}
req = session.get(api_url, params=params)

if req.status_code == 200:
    jsn = json.loads(req.text)
    for item in jsn['lists']:
        print(item['name'])
else:
    print('Error: %d' % req.status_code)
```
CakePHP 1.3 TreeView Behavior のchildrenに追加の条件を追加する

今更ですが他に情報が載って無かったのでメモ書き。


CakePHP1.3でTreeビヘイビアを使用する時に、子ノードを取得するchildrenメソッド等の使用時に、lftやrght以外に条件を追加したい場合はModel上で$actAsを指定する際に以下のように指定すると取得条件が追加されるようです。

```php
<?php
class Section extends AppModel {

	var $name = 'Section';

	var $actsAs = array( 'Tree' => array('scope' => 'status = 1') );
```

上記のように記載すると、Sectionテーブル内のstatusカラムの値が1のもののみが取得されるようになります。
VS Codeで標準の拡張子以外に言語のサポート機能を有効化する方法

## Question
標準の拡張子以外に言語サポート機能を効かせるにはどうしたらいいのか。

例で言うと、riot.jsの.tagファイルの編集時にHTMLのサポート機能を有効化したい場合はどうしたらいいのか。

## Answer

ユーザー設定(settings.json)に以下を加える。

```json
{
	"files.associations": {
		"*.tag":"html"
	}
}
```

以上。

## 参考

http://stackoverflow.com/questions/29973619/how-to-make-vs-code-to-treat-other-file-extensions-as-certain-language
連続最適化でポートフォリオを解いてみよう

# はじめに
連続最適化でポートフォリオを解いてみよう

- 3つの銘柄(A,B,C)に対し、それぞれ365個のデータがあります。
- 各銘柄間には、相関があります。
- 今日の購入価格は、どれも 99円とします。
- リスクを最小にするポートフォリオ(銘柄の割合)を求めてみましょう
- 手数料は無視します。

# 考え方
365個のデータを365個のシナリオとします。
購入した銘柄を販売するとき、365通りの販売価格になる可能性があるとします。
一般的なリスクは、ばらつきを見るのですが、そうすると非線形になり、解きづらくなります。
ここでは、シナリオの中の最悪ケースのリターンを最大化することを考えます。

# Python で実行してみる。
まず、乱数データを作成します。

```py3:python3
%matplotlib inline
import numpy as np, matplotlib.pyplot as plt
from pulp import *
from ortoolpy import addvars
plt.rcParams['figure.figsize'] = 16, 4
plt.rcParams['font.family'] = 'IPAexGothic'
N = 365
np.random.seed(1)
# 乱数でデータ作成
a = np.random.multivariate_normal([100, 100, 100],
    [[1, 0.5, -0.5],[0.5, 1, 0.2], [-0.5, -0.1, 1]], N)
a.mean(axis=0)
>>>
array([  99.99327092,  100.06971451,  100.03864796])
```

平均を見ると、わずかですが、銘柄 Bが最も高いです。  
相関を見てみましょう。

```py3:python3
plt.subplot(131)
plt.title('銘柄間の相関(A-B)')
plt.scatter(a[:, 0], a[:, 1])
plt.subplot(132)
plt.title('銘柄間の相関(A-C)')
plt.scatter(a[:, 0], a[:, 2])
plt.subplot(133)
plt.title('銘柄間の相関(B-C)')
plt.scatter(a[:, 1], a[:, 2]);
```

![image](https://qiita-image-store.s3.amazonaws.com/0/13955/c7d63849-9cfe-e0a6-1dc7-54b514b264d1.png)

- A と B は正の相関
- A と C は負の相関
- B と C はほぼ相関なし

最適化問題を解く関数 solve を定義します。  
別途確認して、しきい値(最悪ケースの保証値)の最大は、98.58でした。  
そのときの結果を見てみましょう。

```py3:python3
def solve(a, th):
    m = LpProblem()
    x = addvars(3)
    m += lpSum(x) == 1
    for e in a * np.array(x):
        m += lpSum(e) >= th
    m.solve()
    return m.status, [value(i) for i in x]
r = solve(a, 98.58)
r
>>>
(1, [0.4815265, 0.00026221562, 0.51821129])
```

最初の1は"最適解であること"を、次の配列は各銘柄の購入割合を表しています。

平均は B が高いので、Bだけ購入するケース(収益最大)と、先ほど解いたケース(最小最大)のシナリオごとのヒストグラムを見てみましょう。

```py3:python3
plt.rcParams['figure.figsize'] = 6, 4
plt.title('目的別の利益のヒストグラム')
plt.hist(a.dot([0,1,0]), bins=12, range=(97, 103), alpha=0.5, label='収益最大')
plt.hist(a.dot(r[1]), bins=12, range=(97, 103), alpha=0.5, label='最小最大')
plt.legend();
```

![image](https://qiita-image-store.s3.amazonaws.com/0/13955/a86b655d-e928-4854-5a4c-2e7311096948.png)

1銘柄だけ購入するより、逆相関の銘柄を組合せた方が、値動きのばらつきを抑えることができます。

グラフで見ても、"最小最大"ケースで分布の幅が小さくなっているのがわかります。

しきい値を変えた時の、ポートフォリオも見てみましょう。

```py3:python3
x = np.linspace(97, 98.58, 10)
y = np.array([solve(a, th)[1] for th in x])
plt.title('しきい値の変化に対する割合')
plt.plot(x, y)
plt.legend(['A','B','C']);
```

![image](https://qiita-image-store.s3.amazonaws.com/0/13955/484c67e3-e983-e272-e8e7-226cae75bce9.png)

平均で見ると B が最もよいので、リスクを無視すれば B だけが最もよいです。  
リスクを最大限に評価すると、AとCが逆相関なので、AとCを組合せる方がよいです。  
このように、Bの割合が 1 から 0 まで変化しているのがわかります。

以上
EventとQueueを使ってマルチスレッドなズンドコキヨシ

マルチスレッド動作を確認したくて、[ズンドコキヨシ](http://qiita.com/shunsugai@github/items/971a15461de29563bf90)を作ってみました。
3人の歌手にスレッド動作してもらい、1秒間隔で「ズン」か「ドコ」を歌ってもらいます。
Queueはマルチスレッド対応で、複数スレッドから格納されたデータを順番に取り出すことができます。これをマイクに見立てています。
スレッドが違っても同じオブジェクトを参照するはずなので、ZUN か DOKO かを `==` ではなく `is` を使って比較しています。

```py
#!/usr/bin/env python3

import time
from random import random
from threading import Thread, Event
from queue import Queue

ZUN = "ズン"
DOKO = "ドコ"
KIYOSHI = "キ・ヨ・シ！"

class Singer(Thread):

    def __init__(self, mic):
        '''準備: マイクを持って、開始と終了の指示を待つ'''
        super().__init__()
        self.mic = mic
        self.singing = Event()

    def run(self):
        '''開始: 1秒毎にズンかドコを歌う'''
        self.singing.set()
        while self.singing.is_set():
            time.sleep(1)
            word = ZUN if random() < 0.5 else DOKO
            self.mic.put(word)

    def stop(self):
        '''終了: 歌い終わる'''
        if self.singing.is_set():
            self.singing.clear()
            self.join()

def zundoko():

    # マイク
    mic = Queue()

    # 歌手3人に1つのマイクに向かって歌い始めてもらう
    the_number_of_singer = 3
    singers = [Singer(mic) for i in range(the_number_of_singer)]
    for singer in singers:
        singer.start()

    try:
        # 「ズン」が4回続いたあとに「ドコ」が聞こえたら「キ・ヨ・シ！」と叫ぶ
        zun = 0
        kiyoshi = False
        while kiyoshi == False:
            word = mic.get()
            print(word)
            if word is ZUN:
                zun += 1
            elif word is DOKO:
                if zun >= 4:
                    kiyoshi = True
                zun = 0
        print(KIYOSHI)
    finally:
        # 歌手に歌い終ってもらう (CTRL+Cで強制終了させられたときも)
        for singer in singers:
            singer.stop()

if __name__ == '__main__':
    zundoko()
```
SVG 簡単なanimate

![gif.gif](https://qiita-image-store.s3.amazonaws.com/0/76843/7592aade-46fb-2560-6ce2-466f38926d8c.gif)


circleタグのr(半径)を20から80に2秒かけてアニメーション。
animateタグ内に記述。
おまけでjsでアクセスもしてみる



```html:hoge.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>polylineとpolygon</title>
</head>
<body>
	<svg width="500" height="500" onload="
		var c = document.getElementById('circle');

		// 0.5秒間隔で色変更
		setInterval(setRandColor, 500);
		
		// ランダムな色設定
		function setRandColor(){
		    var randColorArr = ['orange', 'blue', 'pink', 'red', 'aqua'];
			var random = randColorArr[Math.floor(Math.random() * randColorArr.length)];
			c.setAttribute('fill',random);
		}

	">

	  <!-- r半径を20から80に2秒かけてアニメーション -->
	  <circle id="circle" cx="100" cy="100" r="20" fill="pink">
	  	<animate attributeName="r" from="20" to="80" dur="2s" repeatCount="indefinite"/>
	  </circle>


 	</svg>
</body>
</html>
```



svgタグのonload属性にJsをかけるらしい。
それでプロパティにアクセスしていじるの可能。
Postfix + Dovecot 構成でmysql, clamd, amavisd, rsyslogなどが半死状態になる

突然メーラーでメールサーバーがいないとエラーになったので、メールサーバーに入って確認してみると
`[root@01 ~]# /etc/rc.d/init.d/dovecot status
dovecot (pid  18060) is running...
[root@01 ~]# /etc/rc.d/init.d/postfix status
master (pid  17994) is running...`
と元気です。

`[root@01 ~]# /etc/rc.d/init.d/mysqld status
mysqld dead but subsys locked`
とDeadなのでrestart

念のためamavisdすると死んでる
`[root@01 ~]# /etc/rc.d/init.d/amavisd status
amavisd dead but subsys locked`
のでrestart

clamdは生きてたが、いちおrestartかけてみると、なかなか起動しない。
/etc/rc.d/init.d/clamd stop で停止はするが
/etc/rc.d/init.d/clamd start で5分たっても立ち上がらない
もっと待ってみると
`Starting Clam AntiVirus Daemon: ERROR: TCP: bind() error: Address already in use`
と言われる。

関係しそうなものを
`kill -p PID`で殺しまくる。
iptablesも再起動する。

mysqld
postfix
dovecot
amavisd
の順に起動させて、最後にclamdを起動させると約７分かかって起動した。

テストメールを送って、/var/log/maillogを確認したところ、まったく記録されていない・・・。
`/etc/rc.d/init.d/rsyslog status`
するとこちらもdead but subsys lockedとなっていた。
rsyslogはrestartですんなり起動した。
その後maillogもいつも通りに記録されるようになる。

なんだったんだろう？
PHP7を触ってみたメモ

# 概要
PHP7を触ってみたメモ。

## 環境
- PHP 7.0.7
- CentOS release 6.7 (Final)

## php7のインストール

参考： [CentOSにPHP7をインストールする方法](http://qiita.com/Esfahan/items/e55fa83a9dcf91d89d84)

## スカラー型宣言

タイプヒンティングにスカラー型が宣言できるようになった。

```
function sample( int $arg ) {
    return $atg;
}

// OK
sample(1);

// NG
sample('a');
```

## 戻り値の型宣言

戻り値の型を宣言することも可能。
ただし、`==`での判別なので、下記は通ってしまう。


```lang:OKパターン
function sample(): string {
    return 12345;
}

sample();
```

下記のディレクティブを書くことで厳しく判定してくれるようです。

```lang:NGパターン
declare(strict_types=1);

function sample(): string {
    return 12345;
}

sample();
```

## 致命的なエラーをキャッチできるようになった

```
Throwable // PHP7~ [interface]
　├ Exception                  // 通常の例外
　│　└ ErrorException
　└ Error                      // PHP7~
　　　├ TypeError              // PHP7~ タイプヒントと異なる型を関数に渡した場合に起こるエラー
　　　├ AssertionError         // PHP7~ assert() によるアサーションが失敗した場合に起こるエラー
　　　├ ParseError             // PHP7~ 構文解析時(=eval,include時)に起こるエラー
　　　├ ArithmeticError        // PHP7~ 数学的な操作によるエラー
```

引用元： http://yokotakenji.me/log/programming/php/5042/

```lang:実験結果
<?php

// Error
try {

    new SampleClass();

} catch( Error $e ) {

    echo sprintf( "[Error] %s\n", $e->getMessage() );

}
// 実行結果: [Error] Class 'SampleClass' not found


// ParseError
try {

    include('parse_error.php');

} catch( ParseError $e ) {

    echo sprintf( "[ParseError] %s\n", $e->getMessage() );

}
// 実行結果: [ParseError] syntax error, unexpected end of file


// TypeError
try {

    function sample( int $num )
    {
        return $num;
    }

    sample('string');

} catch( TypeError $e ) {

    echo sprintf( "[TypeError] %s\n", $e->getMessage() );

}
// 実行結果: [TypeError] Argument 1 passed to sample() must be of the type integer, string given, called in /home/vagrant/script/php7/exception.php on line 36


// AssertionError
// php.iniで、zend.assertionsとassert.exceptionを有効にする必要あり
try {

    // assert_options( ASSERT_EXCEPTION, false );
    assert( false );


} catch( AssertionError $e ) {

    echo sprintf( "[AssertionError] %s\n", $e->getMessage() );

}
// 実行結果: [AssertionError] assert(false)
```

## 無名クラス

JavaScriptみたいに即時実行も可能。

```
echo (new class {

    public function sum( $num1, $num2 )
    {
        return $num1 + $num2;
    }

})->sum(1,2);

// 3
```

## 結合比較(スペースシップ)演算子

<=> という比較演算子で、左辺と右辺を比較した結果を -1 0 1のどれかで返す。
rubyやperlでは既に実装されている。
いろいろ試してみた。

```
echo 1 <=> 1; // 0
echo 1 <=> 2; // -1
echo 2 <=> 1; // 1


echo "a" <=> "a"; // 0
echo "a" <=> "b"; // -1
echo "b" <=> "a"; // 1


echo "sample1" <=> "sample1"; // 0
echo "sample1" <=> "sample2"; // -1
echo "sample2" <=> "sample1"; // 1


echo "sample1" <=> "sample1"; // 0
echo "sample1" <=> "asample2"; // 1
echo "asample2" <=> "sample1"; // -1
```

## Null合体演算子

Null合体演算子と呼ばれる`??`が追加。

```
$name = $params['name'] ?? 'no name';
```

下記と等価。

```
if (isset($params['name'])) {
    $name = $params['name'];
} else {
    $name = 'no name';
}
```


随時更新するかも。

以上


[参考]
http://qiita.com/rana_kualu/items/68886ba86ee4e75c4122
https://www.infiniteloop.co.jp/blog/2016/04/php7-0-all-rfc/
text_areaとtext_area_tagの違い

Railsのformでtext_areaとtext_area_tagでハマったので一回整理する。
使っているDBはMySQL。

# 使用方法
## text_area
```
text_area(オブジェクト名, プロパティ名 [, オプション])
```
参考サイトより。※記事最後にもリンクあり。
[http://rails3try.blogspot.jp/2011/06/rails3-textfield-textfieldtag.html](http://rails3try.blogspot.jp/2011/06/rails3-textfield-textfieldtag.html)
> 考え方：モデルを対象として、モデルの値を受け渡すためのフォーム部品
> 振舞い：params 変数に二次元のハッシュとして値を渡す（一次元目のキーがモデル名）

## text_area_tag
```
text_area_tag(要素名 [, エリア配下のテキスト, オプション])
```

参考サイトより。※記事最後にもリンクあり。
[http://rails3try.blogspot.jp/2011/06/rails3-textfield-textfieldtag.html](http://rails3try.blogspot.jp/2011/06/rails3-textfield-textfieldtag.html)
> 考え方：モデルには関連づけず、値のみを単純に渡すフォーム部品
> 振舞い：params 変数に一次元のハッシュとして値を渡す

# 違い
* text_areaはシリアライズされるけどtext_area_tagはされない
* 配列で文字列を保存するときはシリアライズする必要があるので、そういうときにtext_areaを使う
* Modelで使用するときはtext_area、そうじゃないならtext_area_tag

## シリアライズについて
シリアライズってよく聞くけどちゃんとわかってない……。

つまり入力された文字列をDBに保存する形式に変換するということで良いのかな？？
ここはわかったら追記予定。(たぶん…)


# 参考
[http://railsdoc.com/references/text_area](http://railsdoc.com/references/text_area)
[http://railsdoc.com/references/text_area_tag](http://railsdoc.com/references/text_area_tag)
[http://rails3try.blogspot.jp/2011/06/rails3-textfield-textfieldtag.html](http://rails3try.blogspot.jp/2011/06/rails3-textfield-textfieldtag.html)
[http://hijiriworld.com/web/serialize/](http://hijiriworld.com/web/serialize/)
xhyveは「エックスハイブ」と読めばいいようだ

xhyveはどう発音したらいい？

* エックスヘイブ？
* エックスハイブ？
* テンヘイブ？

xhyveの発音というか読み方がわからないので、ネイティブがどう発音しているかYouTube動画をさぐってみた。結論としてはxhyveは「エックスハイブ」と読めばいいようだ。

発音を参考にしたYouTube動画 → [CoreOS June Hangout - xhyve, Kubernetes and CoreOS Security - YouTube](https://www.youtube.com/watch?v=NRW7Fv1fCjw)
SVG polylineとpolygon 超基礎

![スクリーンショット 2016-06-03 17.29.53.png](https://qiita-image-store.s3.amazonaws.com/0/76843/d8e0b49d-2645-9c6d-7d72-9d37313c55f4.png)


(左)
polyline .....点を経由して線を引く


(右)
polygon .....点を経由して線を引く、始点と終点で閉じる


```html:hoge.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>polylineとpolygon</title>
</head>
<body>
	<svg width="500" height="500">
		<!-- polyline .....点を経由して線を引く -->
		<polyline points="100 50 150 100 50 100" stroke="black" fill="none"/>
		<!-- polygon .....点を経由して線を引く、始点と終点で閉じる -->
		<polygon points="250 50 300 100 250 100" stroke="black" fill="none"/>
 	</svg>
</body>
</html>
```