OmniAICreator/Qiita-1.07M huggingface dataset:
eZ Publish 5 管理画面（コンテンツツリー）

eZ Publish 5 の管理画面のコンテンツツリーについて解説します。

## コンテンツツリー
ログイン直後にこの画面が表示されます。
画面上部のグローバルナビゲーションにある「コンテンツツリー」をクリックしても遷移できます。

![contenttree.png](https://qiita-image-store.s3.amazonaws.com/0/15175/01886450-4628-d20b-c808-3f81f62aeced.png)

### コンテンツツリー（ローカルナビゲーション）
左サイドバーのローカルナビゲーションに「コンテンツツリー」が表示されます。
これは Windows のエクスプローラーのように、コンテンツ（オブジェクト）をツリー上に表示することができます。
標準でツリー表示に対応したオープンソース CMS は意外に少なく、コンテンツ量が膨大になった場合などにも直感的にコンテンツを管理することが出来るので非常に便利です。
#### ツリーの開閉
<i class="fa fa-plus-square-o" aria-hidden="true"></i> をクリックするとそのコンテンツ（オブジェクト）の子アイテムを表示することができます。
<i class="fa fa-minus-square-o" aria-hidden="true"></i> をクリックすると子アイテム表示を閉じることができます。

なお、ここで表示対象となるのは contentstructuremenu.ini 内の [treemenu] ブロックの [ShowClasses](https://doc.ez.no/eZ-Publish/Technical-manual/4.x/Reference/Configuration-files/contentstructuremenu.ini/TreeMenu/ShowClasses) で指定されたクラス（コンテンツタイプ）のみになります。
デフォルトでは以下のクラス（コンテンツタイプ）が指定されています。

* folder
* user_group
* wiki_page
* event_calender
* landing_page
* forums
* gallery
* blog
* place_list

### コンテキストメニュー
コンテンツツリーのアイコン画像を左クリックすると、コンテキストメニューが表示されます。

![contextmenu.png](https://qiita-image-store.s3.amazonaws.com/0/15175/b64caf33-6e06-e9f2-ce65-c821a182329e.png)

#### 編集
コンテンツツリーから編集画面に遷移できます。この際に対象言語を指定する必要があります。

#### 複製
コンテンツツリーからコンテンツ（オブジェクト）をコピーできます。複製時に配置先を指定する必要があります。
「複製」の場合は子アイテムはコピーされず、指定したコンテンツ（オブジェクト）のみがコピーされます。

#### サブツリーを複製
コンテンツツリーから子アイテムを含めたコンテンツ（オブジェクト）をコピーできます。

#### 移動
コンテンツツリーからコンテンツ（オブジェクト）を移動できます。移動先を指定する必要があります。

#### 削除
コンテンツツリーからコンテンツ（オブジェクト）を削除できます。

#### アドバンス
![contextmenu_advanced.png](https://qiita-image-store.s3.amazonaws.com/0/15175/d8c7b26a-5fb5-fa18-3ffd-b963ea5bfbd5.png)
##### 他ノードと入れ替え
コンテンツ（オブジェクト）を他のコンテンツ（オブジェクト）と入れ替えることができます。

##### 表示/非表示
コンテンツツリーからコンテンツ（オブジェクト）の表示/非表示の切り替えが行えます。
一時的にコンテンツを非公開にしたい場合などに便利な機能です。
非表示に設定した場合、対象のコンテンツ（オブジェクト）の子アイテムも自動的に非表示になります。

##### サブツリーのサイトマップ
##### サブツリーから関連付けする

##### バージョン管理
コンテンツツリーからコンテンツ（オブジェクト）のバージョン履歴画面へ遷移できます。

##### URL エイリアスの管理
コンテンツ（オブジェクト）に URL エイリアスを指定できます。
WordPress や Drupal では**スラッグ**と呼ばれるものに近いですが、複数の URL エイリアスが指定できたり、言語を指定できたりと、より高度な機能となっています。

#### ブックマークリストへ追加
コンテンツツリーからコンテンツ（オブジェクト）をブックマークへ追加できます。
右サイドバーなどにショートカットが表示されます。
![bookmark.png](https://qiita-image-store.s3.amazonaws.com/0/15175/e96651d6-d9ef-5169-3e3e-bb5d21d6d6c2.png)

#### 通知リストへ追加
コンテンツツリーからコンテンツ（オブジェクト）を通知設定の対象に追加できます。
ダッシュボードの「通知設定」の「通知アイテム」で確認できます。

#### 作成
コンテンツツリーからコンテンツ（オブジェクト）の子アイテムとして新規にコンテンツ（オブジェクト）を作成できます。クラス（コンテンツタイプ）を指定する必要があります。
![create.png](https://qiita-image-store.s3.amazonaws.com/0/15175/20140a34-3b22-9dba-0556-476b2c78a768.png)

#### OpenOffice.org
コンテンツツリーからコンテンツ（オブジェクト）を Word ファイルや PDF ファイル、odt ファイルなどに出力、あるいはインポートできます。

![openoffice.png](https://qiita-image-store.s3.amazonaws.com/0/15175/f015b877-4938-746e-a970-c6725bc656b5.png)

#### eZ Flow

#### 複数ファイルのアップロード
コンテンツツリーからコンテンツ（オブジェクト）の子アイテムとして複数ファイルのアップロード画面へ遷移できます。
Gebでテスト失敗時のみキャプチャを自動取得する

# はじめに

これは[Geb Advent Calendar 2016](http://qiita.com/advent-calendar/2016/geb)の10日の記事です。
今日はGebでの失敗時のキャプチャの話。
知ってる人も多いかもなのですが、そのものズバリで日本語記事がなかったので書いておきます。

# Gebのスクリーンキャプチャ

そもそもGebでスクリーンキャプチャを使うには、`GebReportingSpec`を利用します。そのあたりの話はこちらが詳しいです。

- [面倒な画面確認から解放されるためのgeb自動キャプチャ](http://qiita.com/nyasba/items/edf102578bde7edf0d4f)

`GebReportingSpec`を入れておくと、各テストの終了時に自動でキャプチャを取得してくれます。

# テスト失敗時だけキャプチャを取りたい
エビデンスとしてキャプチャを残す場合は、毎回終了時にキャプチャを取得するのは重宝しますが、テストの失敗時だけ、どういった状態で失敗したいのかと確認したいケースでは、すべてのテストでキャプチャがあると探すのに邪魔です。また、テスト数が多くなってくると、テストの実行速度も遅くなってきます。

というわけで、バージョン0.13.0から失敗時のみキャプチャをとることできるようになりました。

やり方は簡単で、`GebConfig.groovy`に下記を追加するだけです。

```groovy:GebConfig.groovy
reportOnTestFailureOnly = true
```

## 参考リンク
- [面倒な画面確認から解放されるためのgeb自動キャプチャ](http://qiita.com/nyasba/items/edf102578bde7edf0d4f)
- The Book Of Gebの関連セクション
    - http://www.gebish.org/manual/current/#report-test-failures-configuration
    - http://www.gebish.org/manual/current/#0-13-0

# まとめ
設定追加で失敗時だけキャプチャ！

## 明日のエントリー
[@kosukeito](http://qiita.com/kosukeito)さんのセカンドトラックです！！ よろしくお願いします。
WebサイトリニューアルでES2015を実際に使ってみた

（投稿が遅れてしまって申し訳ない気持ちでいっぱいです。。。）

#はじめに
最近、ES2015やES2016、ES2017に関する記事が多くなってきていますが、みなさんはES2015使ってますか？

僕はWeb制作会社で働いているのですが、Webサイト制作の現場ではES2015の利用はそんなに拡大してないなーという印象です。
他の会社の人に話を聞いても、興味はあるけど使ってない…みたいな話が多いです。（もちろんバリバリ使っている制作会社もあると思いますが、まだ少数派であるように感じます。）

そんな中で自分がES2015を使ってみてどうだったか、ということについて書きたいと思います。

#なんで使われないのか
まずWebサイト制作でES2015の利用が進まない理由を考えてみたいと思います。
（個人的な感想なので、違うよ！という部分があったらコメントください）

##開発環境の構築がめんどくさい
個人的に一番大きいのはここではないだろうかと思います。
常に遅れがちなWeb制作の現場において、一番工数を圧縮されやすいのがコーディングです。
そんな時間のない中で、新しい技術を導入したり環境構築をするのは非常に難しいを思います。

また、案件ごとに技術構成や納品形式が違ったりするので、それらに対応したビルド環境を構築するのも大変です。


##レガシーブラウザ…
…

##周囲の理解が得られにくい
これはどの職種でもあることだとは思いますが、かなり重要な問題ですよね。

特にES2015に関しては、旧来のJavaScriptの記法が使えなくなるとか問題があるとかではなく普通につかえるので、「使えるんだったら今までの感じでよくね？」みたいになりがちです。
使うメリットが明確にして、この問題を解決しないと案件での導入は難しいと思います。

#解決策

##ボイラープレートを使う
WebpackやBabelなどのツールを使うことになると思いますが、それらの設定を1からやっていくのはとても大変です。
そこで、公開されているボイラープレートを最初は使うのが良いと思います。

WebpackはReact用のボイラープレートが多く出回っているので、それを使うといいです。
http://andrewhfarmer.com/starter-project/

##ケースごとに導入メリットを考える
漠然と、ES2015の導入を考えるとイメージしにくいです。
そこで、実際に困っている問題やケースを考えて、ES2015を導入することでどう解決できるのか？を考えていくと、周囲の理解も得られるのではないでしょうか。


#実際に使ってみてよかったこと

##機能の切り分けができるのが便利
ES2015から `class` , `import` , `export` が使えるようになりました。
みなさん下記のようなコードを一度は見たことがあると思います。

```js
import $ from 'jquery';
import Hoge from '../Hoge';

export default class Hogehoge {
  //処理内容
}
```

上記のコードは
「 `jQuery` と `Hoge.js` を読み込んで、 `Hogehoge` という `class` を作るよ」
という内容になっています。

ES5でも、クラスみたいなものを作ったり機能の継承をすることができますが、同一ファイル内に限ったものでした。
しかしES2015では外部ファイルの機能も継承することができるようになりました。

これによって、今まで1つのファイルの中におさまっていたものを、複数のファイルに分割することができるようになりました。

これには以下のようなメリットがあります。
一度使い始めるともうやみつきです。

###複数人開発がやりやすい
複数人で開発する際に同一ファイルを編集しなくてよくなり、より効率的に作業をすすめることができるようになりました。

###コードの見通しがよくなる
機能ごとにJSを分割することで、修正や追加をする際、どの部分をみればよいかわかりやすくなります。
各機能で共通で使う部分を切り出して使いまわすことができ、コード全体の量を減らすこともできます。

##ライブラリの管理が簡単に
これはES2015の直接の機能ではないですが、ライブラリをnpmで管理できるので、バージョン管理や追加削除などがとても簡単に行えるようになりました。
以前は使用するプラグインやライブラリが増えたら、各ページにscriptタグを追加しなければならず、非常に大変でした。
しかし、ES2015ではnpm moduleを`import`して使用することができるので、そのライブラリを使用する部分に記述をするだけでよくなります。
これにより、読み込み漏れや、使わないライブラリを読み込んでいた、みたいな問題が起こりにくくなります。

##アロー関数便利
アロー関数は即時関数を同じような働きをします。（厳密には違いがありますが）
詳しくはこちら
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/arrow_functions


#課題

##ビルド環境の最適化
やはり案件ごとにいろいろあるので、最適化難しいです…

##書き方に慣れない、、、
ES5は「命令的に」記述しますが、ES2015では「宣言的に」処理を記述します。
この書き方の違いになれないと大変かな…と思います…

#まとめ
ES2015は、ES5で不便に感じていたことを改善してくれます。
たしかに導入面などでハードルはありますが、それ以上に大きな恩恵をもたらしてくれると思います。
ES2015を使ってよりよいJS生活を送りましょう！
WatchOS AppleWatch単体で録音する

WatchOS向けアプリでも録音可能なものはたくさんありました。
しかしバックグラウンド録音できないのか調査しましたが、AVAudioRecorderを使用すればできそうな感じでしたがAVAudioRecorder.hファイルは存在してましたがWatchOS3ではまだ記述されていませんでした。
再生に関するものは記述されているんですがAVAudioRecorderだけはまだ公式的に使用を認めてないみたいです。
しかしSceneKitで3Dモデルをアニメーションさせた時に定義が抜けている部分が多々あったのでiOSで記述されているものをそのまま補完させる形で追記すると問題なく動くので
AVAudioRecorderは実装はされているもののヘッダーファイルに記述されていないので使えないように見せかけているかもしれないです。

今回は単体で録音するために簡素にまとめておきます。

まず
1.AppGroupsの設定をする　（アプリ間でファイルを共有するもの)

![スクリーンショット 2016-12-10 16.26.30.png](https://qiita-image-store.s3.amazonaws.com/0/142882/193f59e5-400d-2338-a34c-5b676c208516.png)

![スクリーンショット 2016-12-10 16.26.44.png](https://qiita-image-store.s3.amazonaws.com/0/142882/3a5c225e-4a70-e118-fb03-a094d9addbbf.png)

![スクリーンショット 2016-12-10 16.26.51.png](https://qiita-image-store.s3.amazonaws.com/0/142882/f8b0ee61-122a-e5bb-f48b-6e94e7779690.png)


2.ボタンを押した時などの処理に以下のコードを記述

```objc:InterfaceController.m
- (IBAction)buttonOnTouch
{
    NSURL *appGroupUrl = [fileManager containerURLForSecurityApplicationGroupIdentifier:@"group.nkawai.VoiceRecorder"];
    NSDictionary *dictMaxAudioRec = @{@"WKAudioRecorderControllerOptionsActionTitleKey":@"Store"};
    [self presentAudioRecorderControllerWithOutputURL:[appGroupUrl URLByAppendingPathComponent:@"test.m4a"] preset:WKAudioRecorderPresetWideBandSpeech options:dictMaxAudioRec completion:^(BOOL didSave, NSError * _Nullable error) {
    }];
}
```
3.presetについては下記の通り 主に録音する時の品質
https://developer.apple.com/reference/watchkit/wkaudiorecorderpreset?language=objc

4.optionsについては下記の通り
https://developer.apple.com/reference/watchkit/wkinterfacecontroller/1653555-audio_recording_options?language=objc
EC CUBE3 が Heroku Buttonに対応したので見てみる

 
EC CUBE3 が Heroku Button に対応しました。

[公式のリポジトリ](https://github.com/EC-CUBE/ec-cube)にあるHeroku Button から簡単にEC CUBE3を立ち上げて動作を確認することが可能です。
管理画面についても admin / password でログインして簡単に入ることが出来るようになっています。

当然ですが、このまま本番運用するのはめちゃくちゃ危険なので、パット見た感じで気になった点などをまとめておきます。

実際に Heroku でEC CUBE を運用する際の参考にしてもらえれば…

## 管理画面のUSERのID/PASSWORDを変更する

管理USERのID/PASSWORDは デフォルトで admin/password になっており、非常に危険です。

テスト環境とはいえ、メール送信等の機能が有効になっていれば不正に利用される可能性もあるため、必ずこれは変更しておくほうがいいでしょう。

管理画面のユーザ設定周りは環境変数から読み込んで初期セットアップするように設定されています。
こんなのはセットアップのときにHeroku Button で聞いておいてもらえるほうが便利ですね。

以下にセットアップ済みのリポジトリがありますのでそちらのHeroku Button をご利用いただければ Heroku Buttonの起動画面にて初期ユーザのログインID/Passwordがセットアップ可能となっています。
(ちなみに1/1とかでも問題なくセットアップ出来るみたいです。)

https://github.com/mikakane/ec-cube/tree/ask_admin_credential_on_setup

## Database の設定をうまいことHeroku対応する

この辺が一番の鬼門です。

Heroku Postgres の Dashboardにて Credential の項目を見ると次のような記述が見つかります。

````
Database Credentials

Please note that these credentials are not permanent.
Heroku rotates credentials periodically and updates applications where this database is attached.
````

Heroku Postgres のホスト名・ポート番号は定期的に変わります。なので、DBのパスワード等は動的に変わる値として設定されなければなりません。

EC CUBE3 のDB接続はYamlとかでべた書きとなっているので、代わりにPHPの設定ファイルを用いて、それを使用するよう変更してあげなければなりません。
(こういうこともあるので個人的にはあまりYamlの設定ファイルが好きになれない…)

この辺についても以下にセットアップ済みのリポジトリがありますので、コレを試すことができます。

https://github.com/mikakane/ec-cube/tree/support_heroku_pg_config

以下の Heroku コマンドを実行してDBの認証情報をリセット(変更)出来るので、このコマンド実行後も引き続きECCUBEが起動していればOKです。

````
$ heroku pg:credentials DATABASE_URL --reset 
````

ここまでやると今度はローカル環境向けに`.env`対応とかが出てくるんですが、そのへんはまた別の機会に…
SierraでRXTXを使おうとしたらハマった

macOS SierraのEclipseでArduinoとシリアル通信しようとしたらハマったお話．

# 実行環境
- OS : macOS Sierra
- java : java1.7
- Eclipse : Eclipse Java EE IDE for Web Developers.(version: neon)

# RXTX
## 概要
Arduinoなどのマイコンとシリアル通信を行うためのライブラリ．
Windows, Mac, Linuxがサポートされている．
以下のページを参考に進めていきました．
http://cho-kotan.blogspot.jp/2012/10/javaavrmacjavaavr.html

## ダウンロード
以下のページの`rxtx-2.1-7-bins-r2.zip`をダウンロード
http://rxtx.qbang.org/wiki/index.php/Download

## ファイルの移動
ダウンロードしたファイルを展開し，下記コマンドによって外部ライブラリ用のフォルダにダウンロードしたファイルを移動します．

```
$ cd <download_folder>/rxtx-2.1-7-bins-r2
$ sudo cp RXTXcomm.jar /Library/Java/Extensions/
$ sudo cp Mac_OS_X/librxtxSerial.jnilib /Library/Java/Extensions/
```
また，RXTXの排他制御のためのディレクトリが必要であるため，下記コマンドを実行

```
$ sudo mkdir /var/lock
$ sudo chmod 777 /var/lock
```

## eclipseでパスを通す
1. eclipseにて，現在のプロジェクトフォルダを右クリック -> [プロパティ]
2. [Javaのビルド・パス] -> [ライブラリ]
3. [外部JARの追加] -> 先ほどのExtensionsディレクトリの`RXTXcomm.jar`を選択
4. [ビルドパス上のJAR及びクラス・フォルダ]に出現したRXTXcomm.jarの中の[ネイティブライブラリー・ロケーション]に先ほどのExtensionsディレクトリを選択
5. OK

## 実行
参考にした下記URLのソースコードをコピペしそのまま実行．
http://cho-kotan.blogspot.jp/2012/10/javaavrmacjavaavr.html

すると，以下のようなエラー

```
java.lang.UnsatisfiedLinkError: /Library/Java/Extensions/librxtxSerial.jnilib: dlopen(/Library/Java/Extensions/librxtxSerial.jnilib, 1): no suitable image found.  Did find:
/Library/Java/Extensions/librxtxSerial.jnilib: no matching architecture in universal wrapper thrown while loading gnu.io.RXTXCommDriver
```

リンクに関するエラーが出ているが，`gnu.io.RXTXcommDriver`を読んでいる最中にエラーが出たと怒られているのでパスはきちんと通っているらしい.
何度やっても動かなかったので調査．

# バージョンの問題だった
Sierraだから対応できていないのか，javaが対応できていないのかわからず，とりあえず色々調べて見たら下記のページを見つけました．
http://blog.brianhemeryck.me/installing-rxtx-on-mac-os-mountain-lion/

記事によると，どうやら公式のページからダウンロードしたファイルの`librxtxSerial.jnilib`はJava5にしか対応しておらず，Mountain LionからのJava 6以降では同じようなエラーが起こることがあるみたいです（Eclipseの環境によるかもしれませんが...）．

そのため，先ほどのExtensionsファイルの`librxtxSerial.jnilib`を削除し，下記ページでJava 6対応のものが配布されているのでダウンロード．
http://blog.iharder.net/2009/08/18/rxtx-java-6-and-librxtxserial-jnilib-on-intel-mac-os-x/#comment-163295

```
$ rm /Library/Java/Extensions/librxtxSerial.jnilib
$ cp <download_folder>/librxtxSerial.jnilib /Library/Java/Extensions/
```

## 再度実行
先ほどの設定でEclipseにて外部JARファイルのパスの設定はしてあるので，上記のコマンドが終わった時点でそのままEclipseで実行．

無事コンソールにてArduinoから読み取った値が表示されました．

# 結論
公式ページからダウンロードしたライブラリファイルは新しいJavaのバージョンをサポートしていなかった．

# 参考ページ
- http://cho-kotan.blogspot.jp/2012/10/javaavrmacjavaavr.html
- http://blog.brianhemeryck.me/installing-rxtx-on-mac-os-mountain-lion/
Storyboardの画面で「An internal error occured. Editing functionality may be limited」の警告が表示されて青枠だけになってしまった時の対処法(備忘録)


##状況
***.Storyboardのファイルを開いた時に画面に作成していたボタンやテキストフィールドなどが全て青枠の状態になっていた。
(詳しくは下記記載のURLを参照)

##対処方法
>1.FinderもしくはTerminalで「~/Library/Developer/Xcode/DerivedData」の直下にある該当アプリのフォルダを削除する
>2.command(⌘) + shift + k もしくは メニューのProduct > Cleanを押下する
>3.デバイスからケーブルを外し、Xcodeを終了、パソコンの再起動を行う

##備考
これで、私は解決しました。
海外のQAサイトに同じような質問が投稿されたいたので、日本語に必要そうな所だけ翻訳しました。
英語が分かる方は、下記に記載しているURLをご参照下さい。

##参考
http://www.it1me.com/it-answers?id=33456411&ttl=IOS+project+showing+error+%26quot%3BAn+internal+error+occured.+Editing+functionality+may+be+limited%26quot%3B+on+xcode+7.1
Macでmysql2のgemをインストールする際のエラー対処法

# 環境
* macOS Sierra(10.12.1)
* MariaDB(10.1.19)
* ruby(2.3.3)
* Rails(5.0.0.1)
* bundler(1.13.6)
* gem(2.5.2)

# エラー発生
1. HomebrewでMariaDBをインストール
2. Gemfileに`gem 'mysql2'`を記述
3. `bundle install`を実行
4. エラー発生

# 対処法

以下のコマンドを実行することでmysql2をインストールできる。

```
bundle config --local build.mysql2 "--with-ldflags=-L/usr/local/opt/openssl/lib --with-cppflags=-I/usr/local/opt/openssl/include --with-mysql-config=/usr/local/Cellar/mariadb/10.1.19/bin/mysql_config"
```
UE4のMaterialParameterCollectionにコメントを追加しよう

MaterialParameterCollection便利ですよね。ただ多用しているとどれが何のパラメーターだかわからなくなってきます。
そんなときにパラメータごとにコメントを付けられたら良いのにと思ったことはないですか？

エンジンソースにちょっと追加するだけで簡単に拡張できるのでそのやり方です。

Engine/Source/Runtine/Engine/Classes/Materials/MaterialParameterCollection.hの29行目あたりに追加します。

```
    /** Uniquely identifies the parameter, used for fixing up materials that reference this parameter when renaming. */
    UPROPERTY()
    FGuid Id;

//@dgtanaka BEGIN
#if WITH_EDITORONLY_DATA
    /** Describe usage of the parameter. */
    UPROPERTY(EditAnywhere, Category = Default, meta = (MultiLine = true))
    FString Desc;
#endif
//@dgtanaka END
};
```

これだけです。

![mpc_desc.JPG](https://qiita-image-store.s3.amazonaws.com/0/147177/19e5af9b-6f5a-cf54-3a17-de2cdbe83b78.jpeg)

こんな感じで各パラメーターにコメント(DESC)が付けられます。
Azure Functionsの基本的な話

[Microservices Advent Calendar 2016](http://qiita.com/advent-calendar/2016/microservices) の10日目です。ちきさんです。

僕にとってマイクロサービスと言えばサーバーレス。
サーバーレスと言えばAWS Lambda。
そしてAWS Lambdaと言えば **Azure Functions**！！

今月Gotanda.jsでLTした [「Azure Functionsでサーバーサイドアプリを動かす」](http://qiita.com/ovrmrw/items/f190e4a8b7fff7c95133) も併せてどうぞ。

## Azure Functions

[Azure Functions (公式)](https://azure.microsoft.com/ja-jp/services/functions/)

要するにで言ったらAWS LambdaのAzure版なんですけど、**起動にえらい時間がかかる**という特徴があります。なのでConsumption(従量課金)プランでHTTPエンドポイントの運用をすることは止めておいた方がいいでしょう。バッチ処理ぐらいに留めておいた方が無難です。

どれくらい起動時間がかかるかというと、まともなExpressアプリを書いてバンドルしないで運用したら**100秒くらい**です。本当です。

## Azure Functionsの料金プラン

[Azure Functions のスケーリング方法](https://docs.microsoft.com/ja-jp/azure/azure-functions/functions-scale) に書いてあるのですがわかりにくいのでざっくり話すと2種類あります。

- 従量課金プラン(Consumption Plan)
- 固定料金プラン(Azure App Service Plan)

前者はAWS Lambdaのように実行回数と実行時間による従量課金です。この場合の料金体系はLambdaとほぼ同等かと思います。ただしAzure Functionsは起動が激遅ですが。
後者は起動時間をチャラにした反則プランで、早い話がインスタンスを借り切って起動させっぱなしにしてそこでFunctionsを動かす、つまりEC2でAWS Lambdaを動かすみたいなイメージです。

後者はこのように説明されています。

> App Service プランでは、関数は現在動いている Web Apps (Basic、Standard、Premium SKU) と同じように、専用の VM 上で実行します。この専用 VM はアプリと関数に割り当てられ、コードがアクティブに実行されているかどうかに関係なく、常に使用できます。このプランは、他のコードを既に実行している既存の VM があるが使用率が低い場合、または (ほぼ) 継続的に関数を実行する予定がある場合に適したオプションです。VM を使用すると、コストが実行時間とメモリ サイズの両方から切り離されます。その結果、長時間実行される多数の関数のコストを、それらを実行する 1 つ以上の VM のコストに制限できます。

なるほどスケールアウトを犠牲にしたことで得られるメリットもあるわけですね。

## Azure Functionsの基本

内容が重複してしまうので [「Azure Functionsでサーバーサイドアプリを動かす」](http://qiita.com/ovrmrw/items/f190e4a8b7fff7c95133) を見てください。

- プロジェクトのサブフォルダがエンドポイントになる。
- `function.json`がないとそのフォルダはファンクションと見なされない。
- `context`を引数に取る関数をexportしなければならない。

等々いくつかのルールがあります。

## 最もシンプルなファンクション

考えうる限り最もシンプルなファンクションを書こうとするとこうなります。

```
root
|--function1
   |--function.json
   |--main.ts
```

```ts:main.ts
export function azureFunction(context, req) {
  context.res = {
    status: 200,
    body: {
      message: 'Hello world.'
    }
  };
  context.done();
}
```

- `/api/function1`を叩くと
- `{"message": "Hello world."}`というJSONが返ってくる。

## Web APIサーバーを作る分には特に苦労しない

そもそも起動が遅いのでバッチ処理以外の用途には向かないAzure Functionsですが、インスタンス借り切りプランであればWeb APIサーバーとしての使い道もありです。

JSONを返すだけのサーバーを作るなら既存のExpressやHapiをほぼそのままの形で持ち込むこともできます。
そのへんも冒頭で紹介したスライドの中で解説しています。

## 一般的なWebサーバーとしては使えない

実はAzure Functionsの中でExpressを動かして **Client --> Azure Functions --> Express** みたいな仕組みもできてしまうので、Expressで作った既存のWeb APIサーバーを持ち込むのは簡単です。

でもこれだけは無理というのが、静的ファイルの配信です。

- `...../api/hoge/index.html`
- `...../api/foo/bundle.js`
- `...../api/bar/style.css`

とかが軒並みエラーになります。レスポンスのヘッダーで`Content-Type`を指定してもダメです。実際にそこにファイルがあるにもかかわらず。理由はよくわかりません。

---

今回はここまでです。

次回はどうやってその問題を乗り越えるかについて書こうと思います。

明日は [@nabuchi](http://qiita.com/nabuchi) さんです。
Dockerized Zabbix(検証用) 構築してみる

#初めに

だいぶ乗り遅れている感が否めないが、
Dockerでzabbix(検証用) を構築してみる。

#前提
centos7　//CentOS Linux release 7.2.1511 (Core)
Docker version 1.10.3, build cb079f6-unsupported　#インストール済みであること

#zabbix構築
##検証用：コンテナの停止とともに、DBが消えるので注意

##1) Zabbix server用のDBコンテナを開始する。

```bash
docker run \
    -d \　#バックグラウンドで実行
    --name zabbix-db \　#コンテナに名前を付ける
    --env="MARIADB_USER=zabbix" \　#環境変数の指定
    --env="MARIADB_PASS=my_password" \　#環境変数の指定
    monitoringartist/zabbix-db-mariadb  #DBのImageを指定
```

1分たったら、作成できているかログを確認する

```bash
 docker logs zabbix-db
```

##2) DBコンテナに接続するZabbixサーバを開始する。

```bash
docker run \
    -d \　#バックグラウンドで実行
    --name zabbix \　#コンテナに名前を付ける
    -p <任意>:80 \　#ホストのポート<==>コンテナのポートを紐づける
    -p 10051:10051 \　#ホストのポート<==>コンテナのポートを紐づける
    -v /etc/localtime:/etc/localtime:ro \　#ホストのパスをコンテナのパスにマウント
    --link zabbix-db:zabbix.db \　#コンテナ間のアクセス
    --env="ZS_DBHost=zabbix.db" \　#環境変数の指定
    --env="ZS_DBUser=zabbix" \　#環境変数の指定
    --env="ZS_DBPassword=my_password" \　#環境変数の指定
    --env="XXL_zapix=true" \　#環境変数の指定
    --env="XXL_grapher=true" \　#環境変数の指定
    monitoringartist/zabbix-xxl:latest  #DBのImageを指定
```

1分たったら、作成できているかログを確認する

```
docker logs zabbix
```

ブラウザから接続確認

```
http://DockerホストIP:<任意で決めたport番号>/
※初期ID/PW：Admin/zabbix
```

##最後に)
検証後、コンテナを停止、削除するには。

```
docker rm -f zabbix; docker rm -f zabbix-db;
```


#参考
https://www.zabbix.org/wiki/Dockerized_Zabbix
https://github.com/monitoringartist/zabbix-xxl/tree/master/Dockerfile/zabbix-xxl

v(timezone)
http://qiita.com/ganta/items/a0f34866c994ebaeef69

link
http://qiita.com/metalels/items/d3f4082986a7174be376
【初心者】【Laravel5.3】【Mac】ローカルでMySQLとの接続エラーに対応する

個人でWebアプリケーションを作る必要があったので、Laravelの学習をしながら作ってみようとしているWebアプリ開発、PHP共に初心者がローカルでデータベースに接続しようとして困った際の対応備忘録です。

# 問題概要
- [PHPおすすめフレームワーク『Laravel5』入門 基本を押さえるサンプル](http://tech.pjin.jp/blog/2016/02/15/php-framework-laravel-primer-3/)

こちらのサイトで紹介されている練習用のブログページを作っていたら、MySQLとの接続でエラーが起きました。

このコマンドを入力すると、

```shell-session

$ php artisan make:model Article
```

こんなエラーが起きていました。

<img src="https://gyazo.com/e4254eff0d5a0690ce838f355d56e853.png">

```erlang
 SQLSTATE[HY000] [2002] No such file or directory (SQL: select * from information_schema.tables where table_schema = tes
  tdb and table_name = migrations)
```

`app/.env`ファイルにはちゃんとDBの設定はしてありました。

# 解決

- [Laravel(5.1)のMacローカル環境での 'SQLSTATE[HY000] [2002] No such file or directory'エラー対処](http://qiita.com/tadashi0713/items/97ad17b3865efdfeab21)

こちらのページを参考にさせていただきました。

`app/config/database.php` ここを編集します。
<img width=320 src="https://gyazo.com/07cd79221c6bcfe94405a85e8c066da7.png">

`tmp/mysql.sock`を

```shell-session

$ ls /tmp/m
mongodb-27017.sock  mysql.sock          mysql.sock.lock
```

`database.php`に指定します。

```database.php
'mysql' => [
            'driver' => 'mysql',
            'host' => env('DB_HOST', 'localhost'),
            'port' => env('DB_PORT', '3306'),
            'database' => env('DB_DATABASE', 'forge'),
            'username' => env('DB_USERNAME', 'forge'),
            'password' => env('DB_PASSWORD', ''),
            'charset' => 'utf8',
            'collation' => 'utf8_unicode_ci',
            'prefix' => '',
            'strict' => true,
            'engine' => null,
            'unix_socket' => '/tmp/mysql.sock', // 新しく追加
        ],
```

もう一度コマンドを実行

<img width=500 src="https://gyazo.com/add8bad48ac6f6d78942a868be5ce932.png">

成功。

# 最後に
内容が重複してしまっていますが、図解と`5.3`の対応だったので記事を作成しました。

# 蛇足
- [PHPおすすめフレームワーク『Laravel5』入門 基本を押さえるサンプル](http://tech.pjin.jp/blog/2016/02/15/php-framework-laravel-primer-3/)

このページで紹介されている、

```
$ php artisan make:migration create_articles_table –create=articles
```

が、`create`のオプションが足りていなくて、正しくは

```
$ php artisan make:migration create_articles_table --create=articles
```

でした。 参考: [Laravel5.3 マイグレーション](https://readouble.com/laravel/5.3/ja/migrations.html)

技術系の誤植はゼロにできないとはいえちょっとしたことでも初心者には大変なのだな、と改めて実感。
カレンダーフィールド　datepicker コード例

datepickerを使う機会があったので、
サンプルコードをメモしておきます。


```js
<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
  <link rel="stylesheet" href="/demos/style.css" />
  <script>

  $(function() {
    $.datepicker.setDefaults( $.datepicker.regional[ "ja" ] );
      $(".datepicker").each(function() {
        $(this).datepicker();
      });
  });
  
  </script>
  </head>
  <body>
    <p>１つ目: <input type="text" class="datepicker"/></p>
    <p>２つ目: <input type="text" class="datepicker"/></p>
  </body>
  </html>
```
eZ Publish 5 管理画面（ダッシュボード）

eZ Publish 5.x の管理画面について解説します。

## ダッシュボード
### ダッシュボード
![ezp_dashboard.png](https://qiita-image-store.s3.amazonaws.com/0/15175/2e8027b7-abe1-de45-3456-5440897542fa.png)

ダッシュボードのメインエリアには「自作の保留アイテム」「下書き」「最新コンテント」「最新の自作コンテント」「What's happening in th eZ Community」の5つのブロックが表示されます。

赤枠の画像をクリックすると右サイドバーが開きます。

#### 右サイドバー
![ezp_dashboard_open.png](https://qiita-image-store.s3.amazonaws.com/0/15175/9259b4b1-22fb-4b61-0a14-de7e59bce633.png)

##### ログインユーザ
ダッシュボードのローカルナビゲーションにもありますが、「プロフィール」リンクは「プロフィールの編集」と同じく、ログインユーザーのコンテンツオブジェクトの編集画面に遷移します。

「パスワード変更」も同様にパスワード変更画面に遷移します。

##### ユーザ設定
###### 配置先設定
編集画面の最下部に「配置先」ブロックとして「配置先」プロパティと同じ内容を表示します。

###### 再編集
編集画面に「編集へ戻る」チェックボックスを表示します。
![back_to_edit.png](https://qiita-image-store.s3.amazonaws.com/0/15175/758460c6-1c47-e75a-8861-b93b7eb73bc8.png)


##### ブックマーク
後述します。

##### キャッシュのクリア
対象を選択して管理画面からキャッシュをクリアできます。
コンソールでは以下のように実行します。

```bash
php ezpublish/console cache:clear
```

##### デバッグ設定
管理画面からサイトアクセスごとにデバッグ設定を変更できます。

### パスワード変更
ログインユーザーのパスワードを変更できます。

![ezp_dashboard_password.png](https://qiita-image-store.s3.amazonaws.com/0/15175/c2a82ebd-e760-df62-abd4-1167199e7fb5.png)

### 協同作業
「協同作業」とはわかりにくい表現ですが、承認許可などのワークフローの内容がここに表示されます。承認フロー（ワークフロー）の詳細は別記事で解説したいと思います。

![ezp_dashboard_collaborate.png](https://qiita-image-store.s3.amazonaws.com/0/15175/999ed414-bc7a-fa20-795e-b7ba3b2b2aac.png)

### プロフィールの編集
ログインユーザーのコンテンツ（オブジェクト）を編集画面に遷移します。

### ブックマーク
ここで言うブックマークとは、管理画面の特定コンテンツ（オブジェクト）へのショートカットを意味します。
ブックマークを作成すると、右サイドバーに表示されるようになります。
![ezp_dashboard_bookmark.png](https://qiita-image-store.s3.amazonaws.com/0/15175/8d4f84f2-5719-6ab6-da26-6edd8ca788de.png)

### 下書き
編集途中のコンテンツ（オブジェクト）の一覧が表示できます。
eZ Publish では、いったんコンテンツ（オブジェクト）の編集画面を開くとバージョン管理のために下書きが生成され、「下書きを破棄」しない限り下書きが残り続けます。
「ドラフト」という翻訳の表記揺れが残っている場合がありますが、下書きと同義です。

![ezp_dashboard_draft.png](https://qiita-image-store.s3.amazonaws.com/0/15175/bd67d5a9-6209-f346-21c9-6870344d3b53.png)

### 通知設定
![ezp_dashboard_notification.png](https://qiita-image-store.s3.amazonaws.com/0/15175/9a50eccf-262b-1279-dc38-aa199dd219c9.png)
コンテンツ（オブジェクト）が公開されたり協同作業（承認フロー）に設定された場合に、メールで通知させることができる設定です。

### 保留アイテム
承認待ちのコンテンツ（オブジェクト）の一覧が表示できます。
Magento2 Data Migration Toolを使ってみた。その１

#Magento Migration Toolとは
Magento1.X系からMagento2.X系への移行をしてくれるツールです。
https://github.com/magento/data-migration-tool
今回は、このツールを使って実際に移行をしてみました。2回にわたって書きます。

#実行環境
**サーバ1**
Magento1.9.2.3
Vagrant
Ubuntu 14.04.4 LTS
PHP5.6
MySQL5.6
Apache2.4.7

**サーバ2**
Magento2.0.7
さくらのサーバ
Ubuntu 14.04.5 LTS
PHP5.6
MySQL5.6
Apache2.4.7

#参考
http://devdocs.magento.com/guides/v2.0/migration/migration-tool.html
https://github.com/magento/data-migration-tool
http://devdocs.magento.com/guides/v2.0/migration/migration-manually.html
http://devdocs.magento.com/guides/v2.0/migration/migration-migrate-after.html


流れとしては、Magento1のDBを複製して、それをMagento2のサーバに移し、Migration toolで移行します。

#Magento1のDB複製
Magento1が入っているサーバでは、実際に商品を登録したり、アカウントを登録したり、商品を購入したりしておきましょう。
mediaファイルもMagento2 のpub/mediaへ手動で移動しておいてください。
では、複製していきます。バックアップ推奨（http://devdocs.magento.com/guides/v2.0/install-gde/install/cli/install-cli-backup.html）
Magento1のサーバで、
	1. mysqldump -u ユーザー -p 既存のデータベース名 > 保存先
	`mysqldump -u magento -p magento > magento1database.sql`
	2. Magento2サーバへmagento1database.sqlを移動します。
	3. Magento2サーバで、Magento1用のDBを作っておきます。
	4. mysql -u 開発用のユーザー -p 開発用のDB < Mage1のsql
	`mysql -u magento -p magento1database < magento1database.sql`
	複製完成

#Migration toolインストール
github: https://github.com/magento/data-migration-tool
Magento2のサーバで、コマンドをたたいていきます。
	1. `config repositories.data-migration-tool git https://github.com/magento/data-migration-tool`
	2. `composer require magento/data-migration-tool:<version>`
ここで、インストールするmigration toolのバージョンは、移行するMagento2のバージョンに合わせてください。
今回私は、Magento2.0.7へ移行するので、2.0.7のmigration toolを使いました。

次にconfigfileで設定をしていきます。
ドキュメントルート/vendor/Magento/data-migration-tool/etc/ce-to-ce
ドキュメントルート/vendor/Magento/data-migration-tool/etc/ce-to-ee
ドキュメントルート/vendor/Magento/data-migration-tool/etc/ee-to-ee
今回私はcommunity editionからcommunity editionへと移行するので、1番目のconfigfileを編集していきます。
	1. `cd ドキュメントルート/vendor/Magento/data-migration-tool/etc/ce-to-ce/<Magento1 version>`
	今回私は、Magento1.9.2.3を使っているので、1.9.2.3を選びました。
	2. `cp config.xml.dist config.xml`
	3. `cp map.xml.dist map.xml`
	4. config.xmlを編集していきます。	
```
<source>
<database host="127.0.0.1" name="Magento1DB" user="DBユーザ" password="パスワード"/>
	</source>
	<destination>
	    <database host="127.0.0.1" name="Magento2DB" user="DBユーザ" password="パスワード"/>
	</destination>
	<options>
	<crypt_key>Magento1のapp/etc/local.xmlのkeyタグ参照</crypt_key>
	</options>
```
	5. ドキュメントルート/vendor/Magento/data-migration-tool/etc/ce-to-ce以下の.distを全部.xmlに変更してコピーしていきます。
	6. これに伴って、config.xmlの●●.xml.distをすべて●●.xmlに変更していきます。


設定完了です。

次回、Migrate部分を書きます～:smiling_imp:
appear.inを使ってオンライン勉強会に参加したので感想を

手軽さはとても良い　ブラウザだけでも出来る上、スマホとも簡単に連動出来る

安定性はまあ良好。カメラが時々カクカクになり音声も時々かすれるが普通に使える。

複数端末ある場合、そこそこ離れていてもハウリングがおこる。小さいテーブルであれば１つのPCでみんなで共有するやり方が無難かな？
→マイクをミュートにすればハウリングは起きないので、マイク用PCを決めればいいみたい
→自分から発信するとき以外は、マイクミュートにしておくとやりやすいかも

シェアスクリーンで自分の画面を見せられるのは便利。
→Excelの画面、PowerPointの画面を見せながら打ち合わせが出来る

つながらないとき、やり直すとうまくいくことがある

スマホからの場合はアプリが必要になるが、アプリをインストールしておくとappear.inの
URLのとき開くアプリ一覧に表示されるので簡単に起動出来る。

メンバーの参加を制限したい場合、Lock機能で参加者をロック出来る。
→特定メンバーだけのロックにはアカウントが必要らしい。


総評
完全にオンラインで打ち合わせする場合、とても便利。
特にインストール、アカウント作成などがいらないので、即打ち合わせに参加出来る
内容を聞きたいだけならスマホからも見れるので、ちょっと時間が空いたときに
参加して内容だけ聞きたいとかも出来そう
Angular Material 2の導入の備忘録

## バージョン(2016.12.10現在)
Angular 2.2
@angular/material@2.0.0-alpha.11-3

公式ページ
[Angular Material 2](https://github.com/angular/material2)

下記の手順は、公式ページを実際にフォローした際に採った手順の抜粋です

## 導入手順

### インストールなど（公式ページどおり）
Angular CLIをインストールします。

``` console:console
npm install -g angular-cli
```
これで、ngコマンドが使えるようになります。

続いて、今回の開発プロジェクトのルートフォルダを作成します。

``` console:console
ng new my-project
```

最後に、ルートフォルダに移動して、プロジェクトにangular materialをインストール

``` console:console
npm install --save @angular/material
```

### Angular Material 2のスタイルの作成

srcフォルダ内のstyles.cssに、ベースのprebuiltスタイルをインポートしておきます。

``` styles.css
@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';
@import '~https://fonts.googleapis.com/icon?family=Material+Icons';
```
＃アイコンはなんとなくインポートしています


開発プロジェクト専用のSassファイルをsrcフォルダ内に作成します。（内容は公式ページどおりです）

``` myapp-theme.scss
@import '~@angular/material/core/theming/all-theme';
@include md-core();
$candy-app-primary: md-palette($md-indigo);
$candy-app-accent:  md-palette($md-pink, A200, A100, A400);
$candy-app-warn:    md-palette($md-red);
$candy-app-theme: md-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
@include angular-material-theme($candy-app-theme);
```
＃色は、好きな色を選択します。
（参考）md-light-themeは、コアに存在する関数です。

``` node_modules/@angular/material/core/theming/prebuilt/_theming.scss
// Creates a container object for a light theme to be given to individual component theme mixins.
@function md-light-theme($primary, $accent, $warn: md-palette($md-red)) {
  @return (
    primary: $primary,
    accent: $accent,
    warn: $warn,
    is-dark: false,
    foreground: $md-light-theme-foreground,
    background: $md-light-theme-background,
  );
}
```


作った専用Sassファイルをangular-cliでコンパイルできるように設定ファイル（angular-cli.json）にファイル名を追加します。

``` angular-cli.json
      "styles": [
        "styles.css",
        "myapp-theme.scss"
      ],
```

### 関連ファイル/フォルダ構成

angular-cli.json … 追記
src/styles.css … 追記
src/myapp-theme.scss … 新規作成

（おまけ）
その他、component/serviceを入れていくフォルダを[ngコマンド](https://cli.angular.io/)で作成していきます。

コンポーネント

``` console:console
ng generate component xxxx
```

src/component/xxxx.component.css（※必要に応じてscssに変える。後述）
src/component/xxxx.component.html
src/component/xxxx.component.ts
src/component/xxxx.component.spec.ts

サービス

``` console:console
ng generate service xxxx
```

src/shared/xxxx.ts
src/shared/xxxx.spec.ts


### xxxx.component.scssを作成した場合

『myapp-theme.scss』のときと同じようにangular-cli.jsonに追加して、cliからコンパイルが実行されるようにします。

``` angular-cli.json
      "styles": [
        "styles.css",
        "myapp-theme.scss",
        "app/xxx/xxxx.component.scss"
      ],
```


## 導入手順（2017.1.22追記）

### HammerJSを追加する

本設定でWebアプリケーションを作成すると、Web consoleに警告メッセージ「Could not find HammerJS. Certain Angular Material components may not work correctly.」が表示されることがあります。

この場合、手動でHammerJSをインストールしてください。

``` console:console
npm install --save hammerjs
```

angular-cli.jsonにも追記します。

``` angular-cli.json
      "scripts": [
        "../node_modules/hammerjs/hammer.min.js"
      ],
```

これで警告メッセージが表示されなくなります。

[こちらのページ](https://alligator.io/angular/angular-material-2/)を参考にしました。




（終わり）
[iOS]MetalでGPUコンピューティング(7) MTLCommandBuffer


この記事は、Metal Advent Calendar2016の10日目です。

これまで、MetalのGPUコンピューティングについて解説記事を書いてきました。
[[iOS] MetalでGPUコンピューティング (1) 最小限のコードの記述と特性の把握](http://qiita.com/yuky_az/items/ece9b64befc635e89f1a)
[[iOS] MetalでGPUコンピューティング (2) 群知能](http://qiita.com/yuky_az/items/ce5920f28c08e743418b#_reference-cc4434da198d861bba61)
[[iOS] MetalでGPUコンピューティング (3) MTLDevice](http://qiita.com/yuky_az/items/1992daff208223468e70)
[[iOS] MetalでGPUコンピューティング (4) MTKView](http://qiita.com/yuky_az/items/a2556edcfa417b7d912c)
[[iOS] MetalでGPUコンピューティング (5) MTLLibrary](http://qiita.com/yuky_az/items/fd777dfde0bdef85861e)
[[iOS] MetalでGPUコンピューティング (6) MTLCommandQueue](http://qiita.com/yuky_az/items/e40b8a36035a409d08db)
 本記事では、前回に引き続きAppleが提供するサンプルコードの解説を行います。

扱うサンプルコードは、前回と同じ[ライフゲーム](https://ja.wikipedia.org/wiki/%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B2%E3%83%BC%E3%83%A0)のアプリ、MetalGameOfLifeです。
 [MetalGameOfLife](https://developer.apple.com/library/content/samplecode/MetalGameOfLife/Introduction/Intro.html)

![IMG_5933.PNG](https://qiita-image-store.s3.amazonaws.com/0/35297/fa9b4e62-91a6-83fb-c60c-3666fc44fdf1.png "IMG_5933.PNG")
（実行画面）

今回は、サンプルコード内の[MTLCommandBuffer](https://developer.apple.com/reference/metal/mtlcommandbuffer)について解説を行います。
MTLCommandBufferのオブジェクトはGPUに引き渡されるエンコードされた命令を格納しています。

MTLCommandBufferはクラスではなくプロトコルです。
MTLCommandBufferのオブジェクトは、MTLCommandQueueにより生成され、生成元のキューの内部でのみ実行することができます。全てのコマンドバッファは、生成元のコマンドキューに追加された順番に実行されることが保証されています。

コマンドキューの生成は一度だけですが、コマンドバッファは毎フレームごとに生成、実行されます。

繰り返しになるのですが、このサンプルコードは、主に以下のファイルで構成されています。

AAPLRender.h
AAPLRender.m
AAPLViewController.h
AAPLViewController.m
Sharder.metal

このうち、AAPLRender.mには並列コンピューティング及び描画のCPU側のロジックが、Shader.metalには頂点シェーダー、フラグメントシェーダー、GPUコンピューティング用のシェーダーが書かれています。

ここからは、サンプルコード内におけるMTLCommandBufferの使用箇所を解説していきます。
AAPLRender.mに以下の記述があります。MTLCommandQueueのcommandBufferメソッドによりコマンドバッファが生成されています。この記述は毎フレームごとに呼ばれる箇所にあります。

```Objective-C:AAPLRender.m
id<MTLCommandBuffer> commandBuffer = [self.commandQueue commandBuffer];
```

また、以下のコードでは、コマンドバッファからMTLComputeCommandEncoderのオブジェクトの生成を行なっています。

```Objective-C:AAPLRender.m
id<MTLComputeCommandEncoder> commandEncoder = [commandBuffer computeCommandEncoder];
```

このコマンドエンコーダーオブジェクトは、コマンドバッファにコンピューティングのコマンドを格納します。

以下のコードでは、コマンドバッファからMTLRenderCommandEncoderのオブジェクトの生成を行なっています。

```Objective-C:AAPLRender.m
id<MTLRenderCommandEncoder> renderEncoder = [commandBuffer renderCommandEncoderWithDescriptor:renderPassDescriptor];
```

このコマンドエンコーダーオブジェクトは、コマンドバッファにレンダリング用のコマンドを格納します。

MTLCommandBufferから生成できるコマンドエンコーダーオブジェクトには、以下の4つがあります。

+ MTLRenderCommandEncoder
+ MTLComputeCommandEncoder
+ MTLBlitCommandEncoder
+ MTLParallelRenderCommandEncoder. 

このうち、MTLBlitCommandEncoderは画像データのコピーに用いるエンコーダー、MTLParallelRenderCommandEncoderはマルチスレッドでレンダリングする際のエンコーダーです。

コマンドバッファに対してGPUコンピューティングの設定、及びレンダリングの設定が為された後、コマンドバッファがコミットされます。

```Objective-C:AAPLRender.m
[commandBuffer presentDrawable:self.view.currentDrawable];
...
[commandBuffer commit];
```

このように、MTLCommandBufferはGPUへのエンコードされたコマンドを格納する役割を担っています。

今回はライフゲームのサンプルコード内におけるMTLCommandQueueの解説を行いました。
次回以降、さらに他の箇所についての解説を行なっていきます。
cpm - a fast CPAN module installer

この記事は[Perl 5 Advent Calendar 2016](http://qiita.com/advent-calendar/2016/perl5)の9日目です。

昨日はnqounetさんによる、「[遅延実行と仮実行（dry_run）について考えてみた](http://www.nishimiyahara.net/2016/12/08/202141)」でした。

今日は僕が開発しているCPANモジュールインストーラ[cpm](https://github.com/skaji/cpm)を紹介したいと思います。

# cpmとは

CPANモジュールインストーラといえば、[cpanm](https://github.com/miyagawa/cpanminus)が世界的に有名でたくさんの方が使っていると思います。

僕自身もcpanmを本当によく使っていますが、大量の依存があるアプリケーションを開発しているときなどcpanmだとCPANモジュールインストールにかなりの時間がかかり、もう少し早くならないかと思っていました。

そこで[cpm](https://github.com/skaji/cpm)を作りました。cpmは内部でcpanmを並列に使ってCPANモジュールインストールを高速に行います。

![cpm-Plack.gif](https://qiita-image-store.s3.amazonaws.com/0/103710/250e8ba6-0ab1-f0ee-35ae-e2b89d8036d8.gif)

さて、速さを求めて作ったcpmですが、最近いくつか他の機能も追加したので
今日はその紹介したいと思います。

# darkpanとの連携

darkpanとはCPANの全部、もしくは一部分のミラーを指します。[OrePAN2](https://github.com/tokuhirom/OrePAN2), [CPAN::Mini](https://github.com/rjbs/CPAN-Mini)などを使うと比較的簡単に作ることができます。

このdarkpanからのモジュールインストールにcpmは対応しています。

例えば/opt/darkpanにdarkpanがあるとき

```
> cpm install --resolver 02packages,/opt/darkpan Your::Module
```

とすれば/opt/darkpanからYour::Moduleをインストールします。

なお、この書き方だと/opt/darkpan **のみ** からYour::Moduleをインストールしようとします。もし/opt/darkpanは一部分のミラーであるため、存在しないモジュールはMetaDBにfallbackして探して欲しい場合は、

```
> cpm install --resolver 02package,/opt/darkpan --resolver metadb Your::Module
```
としてください。

# 依存モジュールをgitからインストール

上記darkpanを使えば、社内専用モジュールも管理できるようになるでしょう。ただモジュールをgithubで管理してある場合は、そこから直接インストールできるとさらに便利かもしれません。

そのような場合は

```perl
requires "Your::WebApp", git => "git://github.com/you/Your-WebApp.git", ref => "develop";
requires "Plack", ">= 1.000, < 2.000";
```
というcpanfileを準備して

```
> cpm install
```
とすればgithubから直接インストールできます。

なお、この機能はcapnm/Cartonにも一時あったのですが、現在は削除されています。ほかのtoolchainとの連携を考えるとき、この「CPAN以外のディストリビューション保存場所」をどう扱っていくかは、議論があります。

# resolverが柔軟

さて上記２つの特徴に代表されるように、cpmはresolver =「モジュール名からディストリビューション保存場所を取得」のところが柔軟にできています。
実際、それらは[App::cpm::Resolver::*](https://github.com/skaji/cpm/tree/master/lib/App/cpm/Resolver)の名前空間の下にまとまっており、
容易に変更可能にしてあります。

今後、これをユーザが簡単に変更できるインタフェースを用意したいと思っています。

# 今後

以上cpmの特徴について説明してきました。

さてすでにいくつかのCPANモジュールインストーラが存在するとき、cpmの存在意義はなんでしょうか。

前述したとおりcpanmは安定したCPANモジュールインストーラであり世界中で使われています。したがって大幅な内部変更、新規機能の追加にはすこし慎重にならざるを得ません。
そこでcpmです。すなわちcpmをsandboxとしてとらえ、何の機能は役に立ち、何の機能は意味がないのかを見極めたいと思っています。

実際、まだまだ[試したいこと](https://github.com/skaji/cpm/issues)がたくさんあります。もしもみなさんの中にCPANモジュールインストーラに不満を持っている方、新たな機能の提案を持っている方がいましたら、ぜひ議論したいなと思います。

さて明日はytnobodyさんで[Azure + Perl でサーバレスなジョブシステムを作る](http://ytnobody.net/post/154275088314/azure-perl-%E3%81%A7%E3%82%B5%E3%83%BC%E3%83%90%E3%83%AC%E3%82%B9%E3%81%AA%E3%82%B8%E3%83%A7%E3%83%96%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%82%92%E4%BD%9C%E3%82%8B)です！
ExcelのVLOOKUP関数で左端列以外を検索したいときのメモ

# VLOOLUP、真ん中の列で検索させてくれ
VLOOKUP関数、よく使いますね。
しかし、データ範囲の左端列しか検索してくれなくて困ることがあります。
勝手にデータレイアウトを変えるわけにはいかず、別シートにいい感じに参照させていい感じにする面倒なことをして凌いでいました。

調べてみると、INDEX関数とMATCH関数で代替できることがわかったのでメモします。
また、いちいち書くのは面倒なので自作関数を作りました。

# それぞれどんな関数なの？

## VLOOKUP関数

**VLOOKUP(検索値, 検索値を含む範囲, 戻り値を含む範囲内の列番号, 近似一致には TRUE または完全一致には FALSE を必要に応じて指定)**

「指定された範囲の１列目で特定の値を検索し、指定した列と同じ行にある値を返します。」だそうです。

## INDEX関数

**INDEX(参照, 行番号, [列番号], [領域番号])**

「指定された行と列が交差する位置にある値またはセルの参照を返します。」だそうです。

## MATCH関数

**MATCH(検査値, 検査範囲, [照合の型])**

「指定された照合の種類に従って検査範囲内を検索し、検査値と一致する要素の、配列内での相対的な位置を表す数値を返します。」だそうです。

# で、どうやんの？
MATCH関数で検索値の行を取得
⇒取得した行に対して、INDEX関数で列を指定して値を取得する

`=INDEX(データ範囲,MATCH(検索値,検索範囲,0),返却列)`

# 実際にやってみる

## やりたいこと
名字ランキングの表がある。
「カナ」（黄色部分）を入力すると、表を検索して「漢字」「順位」を取得したい。
![image](https://qiita-image-store.s3.amazonaws.com/0/149257/93b0f623-f37e-9dca-7267-e1de640a1b8e.png)

## こんな感じでできる
`=INDEX(データ範囲,MATCH(検索値,検索範囲,0),返却列)`
`=INDEX(A:C,MATCH(E3,C:C,0),2)`
「コバヤシ」(E3)をC列(C:C)から探し、その行に該当する表(A:C)の2列目にある「小林」(B11)をF3に返す
![image](https://qiita-image-store.s3.amazonaws.com/0/149257/aa94cbab-1dc5-ed6f-a445-253e3cee7a2c.png)

## 「表の検索」関数を作る
いちいち`=INDEX...`と入力するのは面倒なので、自作関数を作ります。
`=表の検索(検索値,データ範囲,検索範囲,返却列番号)`
とすれば、
`=INDEX(データ範囲,MATCH(検索値,検索範囲,0),返却列)`
と同じようにします。



```vbnet:表の検索
Function 表の検索(検索値 As Variant, データ範囲 As Variant, _
                            検索範囲 As Variant, 返却列番号 As Integer)

    表の検索 = WorksheetFunction.Index(データ範囲, _
                        WorksheetFunction.Match(検索値, 検索範囲, 0), 返却列番号)

End Function
```

# 参考リンク

▼WorksheetFunction.Match メソッド (Excel)
https://msdn.microsoft.com/ja-jp/library/office/ff835873.aspx

▼WorksheetFunction.Index メソッド (Excel)
https://msdn.microsoft.com/ja-jp/library/office/ff197581.aspx
2016末 Actionscript エディタ・IDE事情

FLASHerのAdventカレンダー2016(その2)の枠が空いているので小ネタでお邪魔します。
こちらは10日目の記事となります。
http://qiita.com/advent-calendar/2016/flasher2

思い起こせば秀丸やSEPYでscriptを書いていたあの頃（いつ？）。今現在みなさん何でActionScriptを書いてますでしょうか。2016年末時点で候補となりうるIDE・エディタを個人的な目線ではありますが、いくつかピックアップしてあげてみたいと思います。

# IDE・エディタの例

* AnimateCC(旧Flash)内部エディタ
忘れがちなこいつですが単体でswfもAIRもCanvasコンテンツも書き出せるわけですから、実はすごいやつ。
http://www.adobe.com/jp/products/animate.html

* FlashBuilder
開発止まってますね。今後のアップデートはhopelessみたいな事をAdobeの中の人がオンラインカンファレンスで言っていたのを聞いた気がしました。しかし、今でもCreativeCloudでPROバージョンが入手可能ですし、AIR SDKを入れ替えれば(しかしちょっと面倒)最新のAIRも書き出せます。更新がなくても実は現役で使えるやつです。CreativeCloud契約して入れば無料。
http://www.adobe.com/jp/products/flash-builder.html

* FDT
自分は使ったことがないですが、海外で人気な印象。Macで本格的にコード書く人が使うものですね。FlashBuilderと同じくエクリプスベースだったはず。有料。
http://fdt.powerflasher.com/

* FlashDevelop
Windowsのみとなりますが、無料でHaxeやCreateJSもかけるオススメのやつ。オススメと言っときながら自分は長らく使っていませんが、みなさんこれなんじゃないでしょうか。
http://www.flashdevelop.org/

* FlashDevelop + CrossOver
結局他の有料ソフトが必要になりますが、MacでFlashDevelopを動かす方法もあるようです。
http://qiita.com/_nabe/items/662624c7b093da9195f2

* IntelliJ IDEA
自分はこれを使ってます。あまり知られてませんが、Actionscript開発を高度にサポートしています。AIRも問題なく書き出せます。StarlingFrameworkの開発もFlashBuilderからこれに移動したようです。なお、WebStormとかではActionscript対応してないので、最上位のIntelliJ IDEAを使う必要があります。欠点としては有料でアフィリエイトリンク貼りたいくらい高い。
https://www.jetbrains.com/idea/

* その他
VimとかEmacsとか。SDKやコンパイラを設定すれば実際はなんのエディタでもいけるわけで、実は完全に無料でswfやAIRの開発が可能です。AnimateCCさえもいらない（タイムラインアニメは作れませんが）。実際業務で直接コンパイラを使う形式で中規模なAIRアプリをリリースした事があります。なんでもイイ！
http://www.adobe.com/devnet/air/air-sdk-download.html

こんな感じですかね。

# まとめ
デザイナー・アニメーターがちょっと使うなら無料のもので良いでしょう。バリバリのエンジニアなら細かいことは能力でなんとかできちゃうのでコマンドライン系エディタで良いでしょう。そんな中、自分がクソ高いIDEAを使ってるのは、すべての業務を１つのエディタでこなしたいからです。ActionScriptだけ書いてて食える時代ではないので。JSもTypeScriptもPerlもPythonも(書かないけど本陣のJava)もいけるので、業務から趣味AS開発に戻ってきた時などにエディタ移行のストレスが少なくて良いです。元AS現フロントエンジニアでWebStormな人には操作方法も同じなのでオススメです。でも高い。

ではでは。
ruby date format変換  YYYY-MM-DD => YYYY年MM月

きっと２度と見返さないメモ

`YYYY-MM-DD` => `YYYY年MM月`

```
[]:~/ irb
irb(main):001:0> require 'date'
=> true
irb(main):002:0> d = '2016-12-10'
=> "2016-12-10"
irb(main):003:0> x = DateTime.parse(d)
=> #<DateTime: 2016-12-10T00:00:00+00:00 ((2457733j,0s,0n),+0s,2299161j)>
irb(main):004:0> str = x.strftime("%Y年%m月")
=> "2016年12月"
irb(main):005:0>
```
direnvをつかう


## direnvってなに

- ディレクトリに移動したときに処理をhook出来る
- .envrcというファイルにbashスクリプトを書くと、そのディレクトリに移動した時にそれが実行される

### 便利さ

- プロジェクト固有の環境変数(`PERL5LIB`とか)をセットしたり
- pythonのvirtualenvをactivateし忘れずに済むようにしたり

## direnvを使い始める

インストール

```bash
$ brew install direnv
```

.bashrc

```bash
# .bachrc
export EDITOR=vim
eval "$(direnv hook bash)"
```

使い始める

```bash
$ direnv edit .
# 例: このディレクトリに来るたびに日時が記録される
echo `date +'%Y%m%d-%H%M'` >> ./envtime
# python virtual env
source bin/activate
```

うっかり `direnv edit` 以外で.envrcファイルを更新しちゃった場合

エラーが出るので言われた通りにする

> direnv: error .envrc is blocked. Run `direnv allow` to approve its content.

```bash
$ direnv allow
```
if文

#基本的なif文
例（読み込んだ整数値が正か負か0か判断するプログラム）

```ruby:filename.rb
import java.util.Scanner;

class Abc
    public static void main(String[] args) {
        Scanner stdIn = new Scanner(System.in);

        System.out.print("整数値 ");
        int n = stdIn.nextInt();

        if (n > 0) {
            System.out.println("その値は正です");
        } else if (n < 0) {
            System.out.println("その値は負です。");
        } else {
            System.out.println("その値は0です。");
        }
    }
}
```

このようにifの横に制御式を記述して、条件を設定する。
入力した整数値が「if」の条件に当てはまらなければ下の「else if」、どれにも当てはまらなければ「else」の文が表示されます。


#論理積演算子と論理和演算子
例（読み込んだ整数値の桁数を判断するプログラム）

```java:filename.java
        if (n == 0) {
            System.out.println("ゼロです。");
        }
        else if (n >= -9 && n <= 9) {
            System.out.println("1桁です。");
        }
        else {
            System.out.println("2桁以上です。");
        }
```

「else if」の制御式の「&&」というものが論理積演算子。
この場合、nの値が-9以上かつ9以下であるときにelse ifの制御式が「true」となる。


```java:filename.java
        if (n <= -10 || n >= 10) {
            System.out.println("2桁以上です。");
        }
        else {
            System.out.println("2桁未満です。");
        }
```

「if」の制御式の「||」というものが論理和演算子。
この場合、nの値が-10以下か10以上のときに「true」となる。

また、式全体の評価結果が、左オペランドの評価の結果のみで明確になる場合は、右オペランドの評価は行われない。

#条件演算子

```java:filename.java
int min = (a < b) ? a : b;
System.out.println("小さいほうの値は" + min + "です。");
```

このように「式1」?「式2」:「式3」となるものが条件演算子。
式1の評価が「true」の場合は式2を評価して、式1の評価が「false」であれば式3を評価する。

この場合、aがbより小さければ「min」にaの値が入り、aがbよりも大きければ「min」にbの値が入る。
aws-cli AMIに紐付いているEBSスナップショットのIDを取得する

マネジメントコンソールでAMIに紐付いているEBSスナップショットの情報が取得できなかったのでコマンドで取得します。

# 0. 環境

- macOS Sierra 10.12.1
- aws cli

```bash
$ aws --version
aws-cli/1.11.27 Python/2.7.10 Darwin/16.1.0 botocore/1.4.84
```

# 1. AMIとEBSスナップショットの情報を取得

```bash
$ aws ec2 describe-images \
  --owners self \
  --query "Images[].{ImageId:ImageId, SnapshotId:BlockDeviceMappings[].Ebs.SnapshotId, Name:Name}" \
  --output json
[
    {
        "SnapshotId": [
            "snap-xxxxxxxx"
        ],
        "Name": "hoge-snapshot",
        "ImageId": "ami-xxxxxxxx"
    }
]
```

# x. 関連

- [describe-images — AWS CLI 1.11.28 Command Reference](http://docs.aws.amazon.com/cli/latest/reference/ec2/describe-images.html)
rubyでmysqlを操作できるgem"mysql2"をUbuntu 16.04.1にインストールする方法

Ubuntu 16.04.1にmysql2のgemをインストール（sudo gem install mysql2）しようとしたところ、
以下のエラーが出現しました。

```
ERROR: Failed to build gem native extension.
mkmf.rb can't find header files for ruby at /usr/lib/ruby/include/ruby.h
```

ちなみに他の環境は以下のとおりです。

* mysql：5.7.13
* ruby：2.3.1p112  


mysql2は他のライブラリとも依存関係にあるので、以下の２つをインストールする必要があります。

```
sudo apt-get install libmysqlclient-dev
sudo apt-get install ruby-dev
```

特に後者の方はStackOverflowのAnswerではなくCommentに
ちらっと出てくる程度なので最初は見逃していました。これも大事な物のようです。

インストールが上手くいったら

```
sudo gem install mysql2
```
で目的のgemが無事インストールできました。
あとは、各rubyファイルの中で、

```ruby
require 'mysql2'
```
とすることで、mysqlにアクセスできます。


[How to install mysql2 on Ubuntu 16.04](http://stackoverflow.com/questions/37240720/how-to-install-mysql2-on-ubuntu-16-04-error-error-installing-mysql2-error-f)



<div style="text-align: right;"><u>(著: 平田 真人)</u></div>
google analyticsとslackを連携するstatsbotのコマンド集

statsbotは便利ですが、helpページにはほとんどコマンドの説明がないので、全てではないですが、よく使うモノをまとめました。

# コマンド概要
 
@statsbot list metrics で概要を確認できます。
@statsbot [metric name] [period] として使います
>Ex: `@statsbot new users yesterday`

### metrics
>User
----------------
`users` `new users` `sessions per user` 
`percent new sessions`
>Session
----------------
`sessions` `bounces` `bounce rate` 
`session duration` `avg session duration`
>Adwords
----------------
`impressions` `clicks` `cost` `CTR` `CPC` `ROAS`
>Page and Event Tracking
----------------
`pageviews` `events` `unique events` 
`event value` `sessions with event`
>Goal Conversions
----------------
`conversions` `conversion rate`
>Ecommerce
----------------
`transactions` `ecommerce conversion rate` `revenue` 
`average order value` `product list clicks`


# Daily Basis
@statsbot summary yesterday

# Weekly Basis

### サイトスピード
@statsbot site speed

### 要約
@statsbot summary last week

### 訪問数(セッション数)はどれくらいあったか？
@statsbot sessions last week

### コンバージョン率は？
@statsbot conversion rate last week

### ページビューはどれくらいあったか？
@statsbot pageviews last week

### どのページが閲覧されているか？
@statsbot sessions last week by page

### 各ページから平均何ページの遷移があったか？
@statsbot pageviews last week by landing page

### 直帰率（1ページビューだけしかない訪問数の割合）は？
@statsbot bounce rate last week

### どうやってサイトにたどり着いているか？
@statsbot sessions last week by source / medium

### どんな端末をつかってるか？
@statsbot sessions last week by operating system
@statsbot sessions last week by browser
@statsbot sessions last week by browser version
@statsbot sessions last week by browser size
@statsbot sessions last week by device
@statsbot sessions last week by mobile device model

### ユーザ数（ユニークブラウザ数）はどれくらいだったか？
@statsbot users last week

### 新規ユーザ数はどれくらい？
@statsbot new users last week

### ユーザの性質は？
@statsbot users last week by age
@statsbot users last week by gender
@statsbot users last week by interest in affinity category
@statsbot users last week by interest in market category

# スケジューリング設定
@statsbot schedule `command`
@statsbot list schedule 
@statsbot unschedule ID 

# アラート設定
@statsbot alert users > 1000
@statsbot list alerts 
@statsbot alert remove ID 

# Ref.
http://qiita.com/kenzo0107/items/235c143e1ddbcba68cc3
Riot.jsとjQueryのページロード時間比較

こんにちは。[前回もRiot.jsについての記事を書きました](http://qiita.com/Hirata-Masato/items/b7db18bc1e18d0074090)が、ふと疑問に思ったので今回はRiot.js、jQueryを使った簡単なDOMの生成速度について検証してみました。

## 動作環境
 - サーバー：Ubuntu 14.04.4 (Vagrant)
 - jQuery: 2.1.1
 - Riot.js: 2.3

http://riotjs.com/ja/

Riot.jsのバージョンは、比較的最近まで2.3だったと思っていたら、最新バージョンはいつの間にか2.6.4になっていました。開発が活発に行われていることの証左ですね。

今回は長い文字列を一文毎に区切り、一文が長い順に並べたあとに、カードパネルでそれぞれを囲んだものを表示するものを作りました。
長い文字列として採用したものは方丈記で、9400文字程度あります。

<!-- more -->

## jQueryでのソースコード

```html:index.html
<head>
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
	<div class="card-tag">　</div>
	<script>
		var log_str = '行く川のながれは絶えずして、しかも本の水にあらず。...';
		var arr=log_str.split('。').sort(function(a,b){ if(a.length < b.length) return 1; if(a.length > b.length) return -1; return 0; });
			arr.forEach(function(v, i){
				$(".card-tag").append('<div class="card-panel" style="width:300px">' + v + '</div>');
			});
	</script>
</body>
```
scriptタグの中では、appendで要素を追加しています。要素を文字列として指定しなければならないし、文字列と変数を連結している'+ v +'の部分がイケてないですね。泣いている顔文字みたいです。

## Riot.jsでのソースコード
下はindex.htmlで、

```html:index.html
<body>
	<card>　</card>
	<!-- app タグを定義 -->
	<script src="card.tag" type="riot/tag"></script>
	<script>
		riot.mount('*');
	</script>
</body>
```
下はcard.tagです。

```html:card.tag
<card>
<div each="{ str, i in arr}" class="card-panel" style="width:300px">
    { str }
</div>
<script>
    var log_str = '行く川のながれは絶えずして、しかも本の水にあらず。...';
    this.arr=log_str.split('。').sort(function(a,b){ if(a.length < b.length) return 1; if(a.length > b.length) return -1; return 0; });
</script>
</card>
```
DOMを生成するのは配列を変形させればOKです。ソースコードが書きやすいだけでなく、すんなり理解できるのがいいですね。

## バニラJS
素のJSだとindex.htmlのscriptタグの部分は以下のように書けます。

```javascript:index.html
var arr=log_str.split('。').sort(function(a,b){ if(a.length < b.length) return 1; if(a.length > b.length) return -1; return 0; });
		arr.forEach(function(v, i){
			var element = document.createElement('div');
			element.innerHTML = v;
			element.style.width = '300px';
			element.classList = 'card-panel'
			var objBody = document.getElementsByClassName("card-tag").item(0);
			objBody.appendChild(element);
		});
```
DOM操作をバニラJSで書くのは二度とやりたくないですね。クラスを取得するだけで'document.getElementsByClassName'は流石に長すぎると思います。

## 比較結果
下のグラフでは、10回測定した平均ロード時間を表示しています。
エラーバーも表示してみました。

![20161024153734.png](https://qiita-image-store.s3.amazonaws.com/0/154105/9a69cb6f-2222-dcb9-f170-370786e7176d.png)

cacheはキャッシュを有効にした状態のロード時間で、Riot.jsなど名前がついているものはキャッシュを都度クリアしながら測定したものです。
若干jQueryよりもRiot.jsのロード時間のほうが速いですね。Riotのコンパイラは軽いので、そのこともロード時間の短縮に寄与していると思われます。

流石に素のJSには勝てませんでしたが、開発に時間と労力がかかるので、極限までロード時間を短くしたい、という場合以外には使わないほうが良さそうです。

## 感想
今回はシンプルな題材だったため、そこまで大きな差は出ませんでしたが、DOMの生成、操作速度がページロード時間に大きく影響を与えるようなアプリケーションの場合、ソースの書きやすさ、レンダリングの速さの面でもRiot.jsが有効な選択肢だといえるでしょう。

<div style="text-align: right;"><u>(著: 平田 真人)</u></div>