OmniAICreator/Qiita-1.07M huggingface dataset:
Dockerを使ってロードバランシング環境構築

この記事は Docker Advent Calendar 2015 15日目の記事です。

# 目的
Dockerを利用して、2台のサーバーに対してロードバランシングする環境を作成する。

-

ではさっそく構築に取り掛かります。

最終的な構成としては以下にになります。

- ロードバランサー
	- 1台
- Webサーバー
	- 2台

今回は`Nginx`の機能を使用してロードバランシングを実現します。

別の方法としては`haproxy`を使う方法があります。
[dockerfile/haproxy](https://github.com/dockerfile/haproxy)
Dockerで簡易的にロードバランシングを行いたい場合はこちらで充分でしょう。

## 前提知識

Nginxでのロードバランシング設定
[Using nginx as HTTP load balancer](http://nginx.org/en/docs/http/load_balancing.html)
[Nginxを使用してのロードバランシング](http://astap.hatenablog.jp/entry/2015/11/21/131851)

上記設定を用います。
今回はデフォルトのラウンドロビンにします。

## docker-compose.yml

```
nginx_server:
  image: nginx
  links:
   - web
  volumes:
   - ./loadbalancer:/etc/nginx/conf.d
  ports:
   - "80:80"

web:
  image: kitematic/hello-world-nginx
```

```loadbalancer/nginx.conf
upstream web {
    server loadbalance_web_1;
    server loadbalance_web_2;
}

server {

    listen       80;
    location / {
           proxy_pass http://web;
    }
}
```

設定は以上です。

構築していきます。

-

```
mkdir loadbalance
cd loadbalance
```

docker-composeは使用できるものとします。

```
docker-compose up -d
```

このタイミングでは、nginx_serverのコンテナで`loadbalance_web_2`のhostが見つからないとエラーになると思います。

webサーバーを2台に増やします。

```
docker-compose scale web=2
```

このコマンドを実行することでwebコンテナが2台に増えます。
nginx_serverのコンテナをリスタートします。

```
docker-compose restart nginx_server
```

これで完成です。

```
docker-machine ip default
```
で、IPを確認し、アクセスしてみます。

例
http:192.168.99.100

docker-log等で2台のwebサーバーのログを確認しつつアクセスしてみましょう。
ロードバランシングされていることが確認できます。

## 解説
docker-composeではlinkしたコンテナがhostsに設定されます。

```/etc/hosts
172.17.0.33	loadbalance_web_2
172.17.0.33	loadbalance_web_2.bridge
172.17.0.34	loadbalance_web_1
172.17.0.34	loadbalance_web_1.bridge
```

scaleコマンドを発行する前はweb_2のhosts設定がなかったためエラーとなり起動ができませんでした。
scale後は再起動することでhostsに反映されます。
初心者向けサイトElixir Schoolを日本語訳した

## Elixirの初心者向け日本語情報が少ない問題

英語圏ではElixirの本が既に何冊も出ていますし、初心者向けの情報や最新動向ブログ、カンファレンスや一部コアな方のYouTube動画やPhoenix本輪読会などもあって、結構ワイワイしている感じですね。

しかし、日本語ではまだまだという印象があります。特に、自分のようにそもそもErlangを使ったことがない人間向けのゆるめのコンテンツが不足しているように感じています。

こういう状況下では、例えば知り合いや後輩にElixirを勧める場合に、「公式サイトの[Introduction](http://elixir-lang.org/getting-started/introduction.html)が充実してるから、**それ(英語)読んどいてね**」的なパワハラまがいの提案が日々どこかで行われているのではないかという懸念があります。
(もっとも、v1.0.0時代の公式サイトは有志の方が日本語訳を提供されているので、情報の鮮度を気にしなければ今でも有用なはずです。cf. http://elixir-ja.sena-net.works/ )

## 公式Introductionが結構な分量になってる問題

そもそも個人的な意見として、公式のIntroductionも結構な分量があるように思えています。全てをこなすのには、きっと数時間から人によっては数日を要するでしょう。

もう少し、ゆるめの学習コンテンツはないものか。

あります。

それが[Elixir School](http://elixirschool.com/)です。

## Elixir Schoolとは何か

https://github.com/doomspork/elixir-school

doomspork氏が個人で作成している、Elixir初学者用のWebサイトです。MITライセンスで公開されています。
公式サイトの情報から、最低限のエッセンスを抜き出して、十数回程度のレッスンとしてまとめたような内容となっています。現時点で、全体を通してもそれほどの分量ではないです。自分はちょうど1時間半くらいの打合せ移動中に、一通り読み終えることができました。
コンテンツはまだ鋭意製作中ですが、今週もまたいくつかのレッスンが追加される予定です。Githubにイシューを書けば、足りないコンテンツについても随時検討するようです。

英語版と[日本語版](https://elixirschool.com/jp/)があり、スペイン語版も現在準備中です。
また、コンテンツを(英語で)書けるElixirパワーユーザも絶賛募集中です。

## 日本語訳について

なるべく意味を落とさないように訳していますが、実質作業時間は2日くらいなので、原文側の同じ言い回しに対して、訳の揺れがあります。また、いくつか作者の多用する表現があって、それを日本語の文脈で訳すのに苦労したりしてました。あとは英語のままにすべきかカタカナにすべきか、日本語にすべきか悩んだりしました。(SupervisorとかBehaviorとか)

辞書については電子英英辞典を引くのが億劫で、もっぱら[ここ](http://www.thefreedictionary.com/)に頼ってました。

色々と改善点や誤訳修正もあるかと思いますが、上記githubリポジトリまで、どしどしPRください。

## まとめという名の感想

Elixir Schoolは公式Introductionの簡易版だと思っているので、時間がある方はきちんと公式サイトを読み込むのが良いかもしれません。

個人的には[PragProg](https://pragprog.com/)から出ている[Programming Elixir](https://pragprog.com/book/elixir/programming-elixir)はなかなか良いです。[Programming Phoenix](https://pragprog.com/book/phoenix/programming-phoenix)も開発者の哲学に触れられる良い本ですし、ともに早く翻訳版が出ると良いですね。

いずれにしても、Elixirの日本語界隈の情報が充実して、広く利用者が増えればいいなと願っています。

P.S.
当初はElixir Schoolとは全然関係なく、Jupyter+IElixirで好きなパッケージを利用する話でも書くか、または以下の記事を訳すことでお茶を濁そうと思ってました。`v1.2.0`で導入される新たな`with`スペシャルフォームについてのブログ記事です。英語ですが、興味のある方はどうぞ。
[Learning Elixir's with – Learning Elixir](http://learningelixir.joekain.com/learning-elixir-with/)
Least Bad Search -- EHC の改良?

EHCを少し改変したLeast Bad Search を紹介します。あんまり面白くなかった・・・

Least Bad Search は、イギリス王立大学 (King's College of London) のAmanda/Andrew Coles 教授夫妻(教授同士で結婚かよ…) のMarvinというプランニングソルバに載っている探索アルゴリズムです。

<sub>Coles, Andrew, and Amanda Smith. "Marvin: A Heuristic Search Planner with Online Macro-Action Learning." J. Artif. Intell. Res.(JAIR) 28 (2007): 119-156.</sub>

# Search Plateau (プラトー)

最適化や探索の専門ではない人であっても、Plateau という言葉を聞いたことがある人は多いと思います。今日の話の主題はこのプラトーです。

プラトーとは、探索空間のうち、どっちに行っても $h$ 値、ゴールまでの推定距離が改善しないような場所のことです。自分のいまいる周囲しか見ることの出来ない局所探索アルゴリズム、たとえば山登り法やEHCは、このような場所では立ち往生 (stack) してしまいます。どの方向に行ってもなかなか自分よりもよい $h$ 値のノードが見つからないからです。

![plateau](https://www.dropbox.com/s/ejvrqdlyvzpwj44/plateau.png?raw=1)

このような時、の局所探索の挙動をHCとEHC、そして今回紹介するLeast Bad Searchで比べてみましょう。

+ HC --- 探索を諦める。
+ EHC --- プラトーでは幅優先探索に移行、よいノードが見つかったらHCに戻る
+ least bad search --- プラトーではBFS に移行、よいノードが見つかったらHCに戻る

これだけの違いです。正直、なんで名前を変えたの?って感じですが、JAIR論文になっているので紹介しました。(Least Bad Search の内容はJAIR論文の内容のほんの一部なので、論文自体の価値はべつに低くないと思います)

LBSは、EHCと比べてプラトーでの挙動を改善します。LBSがプラトーで用いるBFSは $h$ 値の小さいものから順に探索を行うため、調べるノードの数が少なくてすみ、かつ見つかる *Plateau Exit* の質がよくなるというものです。*Plateau Exit* とは、Plateau の開始地点 (*Plateau Entrance*) よりも $h$ 値の改善される始めての探索ノードを指します。(図は (Coles '04) より。)

![lbs](https://www.dropbox.com/s/tr7kfps80qyt0dq/lbs.png?raw=1)

# まとめ

あんまり内容がありませんが、Least Bad Search について解説しました。
タブレット向けにウェブアプリを開発して悲しい気持ちになったこと4つ

こんにちは！ACCESS の近藤です。

普段は、割りとネタよりな記事とか、変なものを作ったりということが多いのですが、
Advent Calendar の空気を吸うだけで高く跳べるような気がするので、真面目なそれっぽい記事を書いてみます。

先日、下記各種タブレットの Chrome ブラウザ向けにウェブアプリを開発する機会があったのですが、
とても悲しい気持ちになったこと4つをご紹介します。

* iPadAir2: iOS 9.1 - Chrome
* Xperia Z4 Tablet: Android 5.0.2 - Chrome
* Surface Pro2: Windows 10 - Chrome

# 1. iOS の Chrome は Blink ではない

これは、開発者でなくとも iOS ユーザーであればご存知の方は多いと思うのですが、
iOS の Chrome は Blink ではなく WebKit ベースです。

というより、Chrome アプリが独自にブラウザエンジンを抱えているわけではなくて、
単純に UIWebView を利用しています。(2015/12/14 現在)
(2016/1/28 より WKWebView になりました)

Apple は iOS が標準搭載しているブラウザエンジン (WebKit) 以外の利用を認めていないため、
Chrome や Firefox であろうとエンジンは WebKit です。
サーバサイドレンダリングの場合はその限りではありません。

というわけで、マルチブラウザに対応したウェブアプリを作るのは大変だけど、
Chrome だけなら差分はあまりないし難しくないよね☆ (´ω｀)ノ

と思って見積もったりすると悲しい気持ちになりますのでご注意ください。。

# 2. Surface はタブレットではない

何が言いたいかというと viewport が効かないのです。

viewport についての説明は割愛しますが、
スマートデバイス向けに動作し、PC であるものに対しては影響を与えません。

なので、iOS Chrome はまぁ特殊としても、Android Chrome と Surface Chrome は解像度だけ気にしておけばレイアウトは大丈夫だよねー、と思っていると実機で見た時に悲しい気持ちになります。。

Chrome の Developer tools では viewport がバッチリ効きますので、
Surface が手元になかったりして、解像度や device pixel rate だけ合わせて devtool で開発を進めていると嵌
りがちです。

![devtool.png](https://qiita-image-store.s3.amazonaws.com/0/38837/c7d29fa0-705c-a1b9-207c-384c4303bc4a.png)

まぁ、冷静になって考えてみれば windows 10 だし、
「あー、そりゃお前は PC だよね、うん。PC だ。うんうん。」と腑に落ちる気はしますが、
iPad や Android Tablet と並べてタブレット対応という括りにしてしまうとついつい忘れがちな点かと思います。

ちなみに、Surface のタブレットモードでも viewport は効かないようでした。

# 3. mobile Safari では onbeforeunload が呼ばれない

mobile Safari と書いたとおり、PC Safari は動作しますが、
iOS 上の Safari (Chrome 含む) では onbeforeunload が呼ばれません。

例えば onbeforeunload でデータを保存、とか、終了通知をサーバへ送信する…といった機能を実装していると、
iOS の場合はなぜか、データが保存されてないとか、サーバが終了を検知できてないといった問題に繋がります。

また、Safari Web Contents Guide によると、
onload や onunload についても deprecated と記載されています。

これらの代わりに onpageshow や onpagehide を利用することを推奨していますが、
当然仕様に違いがありますので、iOS 向けに同等の機能を実現する場合は、別途検討する必要がある点にご注意です。

# 4. Android の Chrome はスクロール時にメニューが開閉して screen.height が変化する

スマートデバイスでは PC に比べて画面が小さいため、
ブラウザもスクロール時にメニューを縮小するなど、コンテンツを快適に見るための工夫が随所に見られますが、

Android 向けの Chrome ブラウザの場合、
このメニューが開閉した際に、コンテンツ表示領域の高さ (screen.height) が変化するのです。

つまり、何が問題かというと、CSS で縦幅を基準とした vh や % を利用したレイアウトを行っていると、
ユーザが画面をスクロールし、メニューの開閉が発生したと同時に再計算されてレイアウトが変化してしまいます。。

素朴に、触るたびにレイアウトが動くというのはユーザビリティとしてアレですし、
ありがちな背景設定で backgroundImage の height に 100vh 指定していたりする場合は、
スクロールするたびに背景が蠢き悲しい気持ちになります。

この問題について議論されているトピックは複数見かけましたが、結局解決方法は見つけられずでした。
結局のところ、縦幅を基準とした値は使わないという方法しか回避方法はないかもしれません。

#　終わりに

実は今 12/14(月) 23:55 というのは内緒です。(´ω｀)
立候補しておきながら、担当の日は来月だし余裕っしょー、とか思っていたらあっという間でした…。
ところどころ文章が変なところや、情報が不足している点をちょこちょこ修正していこうと思います。。すみません。

というわけで…！
明日、12/15 は @keigo1450 さんの番ですね！
よろしくお願いします！＼(^o^)／
メモリ節約のためにarray_chunkではなくgeneratorを使う

## Why

* 大きいサイズの配列があり、それをある程度の塊として分割して処理をしたい要件があった
* `array_chunk` を使うのがコードの見通し的にも望ましかったが、 `array_chunk` だと塊を内包した配列を生成してしまうので、入力の配列が大きいとメモリの無駄も大きい

## 対応策

* generator を使い、分割した塊を yield で返してやる

## サンプルコード

```php
<?php

message('start');

$a = range(0, 200000);
message('create array');

$chunkGenerator = function ($array, $size, $preserveKeys = false) {
    $i = 0;
    while (true) {
        $offset = $size * $i++;
        $sliced = array_slice($array, $offset, $size, $preserveKeys);

        if (count($sliced) === 0) {
            break;
        }

        yield $sliced;
    }
};
message('defined generator');

foreach ($chunkGenerator($a, 1000) as $chunk) {
    // nothing to do
}
message('use generator');

foreach (array_chunk($a, 1000) as $chunk) {
    // nothing to do
}
message('use array_chunk');

message('end');

function message($msg)
{
    echo sprintf(
        "%-3d MB %-3d MB %s" . PHP_EOL,
        memory_get_usage() / 1024 / 1024,
        memory_get_peak_usage() / 1024 / 1024,
        $msg
    );
}
```

### 出力

```
$ php chunk.php
0   MB 0   MB start
28  MB 28  MB create array
28  MB 28  MB defined generator
28  MB 28  MB use generator
28  MB 46  MB use array_chunk
28  MB 46  MB end
```

### 実行環境

```
$ php --version
PHP 5.6.7 (cli) (built: Mar 22 2015 19:03:55)
Copyright (c) 1997-2015 The PHP Group
Zend Engine v2.6.0, Copyright (c) 1998-2015 Zend Technologies
```
レイアウトファイルとそれを使用した画面ファイル間でのViewBagの挙動

ViewBagの値をレイアウトファイルでデフォルトを設定して、各画面で上書きしたい事があったので調べてみました。

結論から書くと、body（各画面） → layoutの順で実行されるので、
<b>『bodyの内容をlayoutで上書きするかどうか』</b>
という視点で見ていくことになります。

# 上書きできないパターン（正しくは_Layout.cshtml『で』上書きしているパターン）

```csharp:Detail.cshtml
@{ ViewBag.isHoge = true; }
```

```csharp:_Layout.cshtml
@{ ViewBag.isHoge = false; } // "_Layout.cshtmlで上書き"する形になる
@( ViewBag.isHoge ? "hoge" : "fuga" ) // fugaを出力
```

こちらの書き方ですと、先にDetail.cshtmlで<b>isHoge</b>が定義されてLayout.cshtmlで値が上書されてしまいます。結果としてfugaが出力されてしまいます。

## 上書きできるパターン（正しくは_Layout.cshtml『で』上書きしていないパターン）


```csharp:Detail.cshtml
@{ ViewBag.isHoge = true; }
```

```C#:_Layout.cshtml
@{ 
   if (ViewBag.isHoge == null) { // Detail.cshtmlで設定されているのでnullではない
     ViewBag.isHoge = false; // したがってここは通らない
   }
}
@( ViewBag.isHoge ? "hoge" : "fuga" )　// hogeを出力
```
こちらの書き方は、先にDetail.cshtmlで<b>isHoge</b>が定義されますが、Layout.cshtml内でnullチェックをしているため、定義済みの場合に値が上書されません。結果としてhogeが出力されます。

# まとめ

個人的にはレイアウトファイルが先に読まれるだろうと思っていたので、ちょっと意外でした。

Webページのタイトル等、デフォルトはあるけども一部ページでは書き換えたい時などに使えるかなと思います。
Javaで実装したWebシステムを試しにKotlinへ移行してみた

この記事は リクルートライフスタイル Advent Calendar 2015[リクルートライフスタイル Advent Calendar 2015 - Qiita](http://qiita.com/advent-calendar/2015/recruitlifestyle) の15日目です。
ホットペッパービューティーで開発を担当しているyubakenです。

[Kotlin Blog](http://blog.jetbrains.com/kotlin/) では最近1.0.0ベータ版のリリース記事が頻繁にあがっていますね。
私も1.0.0に向けてKotlinで何か書こうと考えておりましたが、何が出来るかについては公式ドキュメントでしたり他の方が記事のほうがよくまとまっていました。
なので、私はホットペッパービューティーを動かしているJavaのソースコードの一画面分のControllerとServiceをKotlinに変換して動かせるか試してみた手順について書いていこうと思います。

※Kotlinって何出来るの？と気になった人は以下ページを参照
https://kotlinlang.org/docs/reference/idioms.html

# 環境
* Kotlin:1.0.0-beta-3594
* Java:6
* フレームワーク:SAStruts＋社内フレームワーク
* IDE:IntelliJ IDEA Ultimate 5.0.2（以降、IntelliJ）

# MavenにKotlinの依存性を追加
````
<dependencies>
...
	<dependency>
		<groupId>org.jetbrains.kotlin</groupId>
		<artifactId>kotlin-stdlib</artifactId>
		<version>1.0.0-beta-359</version>
	</dependency>
</dependencies>
````

# JavaのソースコードをKotlinへコピペして自動変換する
移行にはIntelliJを使用します。
まず移行したいファイルと同じ名前のktファイルを作成し、移行元の全ソースをコピーしてKtファイルに貼り付けます。
そうしますと「Clipboard content copied from Java file, Do you want to convert it to Kotlin code?」 と聞かれますので「Yes」を選択します。

これでktファイルへコピーしたJavaのソースコードがKotlin用に自動変換されます。
ですが、もちろんこれだけではコンパイルエラーが発生してしまいます。

# DI（依存性の注入）をするプロパティ（メンバ変数）に対してLate Initializedする
Kotlinはプロパティの初期化が必要ですが、AutoWiredやResourceアノテーションのプロパティなど初期化できないものが出てくると思います。
そういったプロパティ向けにKotlinではLate Initializedという機能があります。

````
// Javaの場合
@Resource
JdbcTemplate jdbcTemplate;

// Kotlinの場合
lateinit var jdbcTemplate: JdbcTemplate;
````
これでプロパティの初期化が不要になりました。

# プロパティのgetter/setter自動生成に対応する
移行元のソースコードでプロパティに対してのgetterメソッドが定義されている箇所にエラーがありました。

````
// 例
var x : List<String> = 1 // Kotlin: Platform declaration clash: The following declarations have the same JVM signature
fun getX: List<String> {
....
}
````

これはKotlinがコンパイル時にプロパティに対応するsetter/getterを自動で生成するためエラーになります。
エラーを回避するためにはプロパティ名、またはfunction名を変更しましょう。

# classをopenに
これは原因がまだ分かっていないのですが、classをopenにしないと画面表示時にエラーになりました。
（SAStrutsのクラスローダーで読み込めなかった？）

````
// これはエラー
class SampleController{
...
}

// OK
open class SampleController{
...
}
````

# 細かいエラーはQuickFixで片付ける
これ以外にもエラーが発生していましたが、IntelliJのAlt+EnterのQuickFixで大体解決出来ました。
※今回は動かすことが目標なのでQuickFix任せにしてますが、商用で動かすものは修正方法が正しいかはしっかりと調査しましょう。

# 動かす
今回はControllerとServiceクラスのみ修正して動かしてみましたが、Javaと変わりないパフォーマンスで動作しました。
細かい箇所のテストは実施出来ていないので確認作業で所々バグが見つかるかも知れませんが、SAStrutsの古いフレームワークでも動作することを確認できました。

# おまけ
Kotlinのブログ内に「What Kotlin feels like, it's less code」という記述がありましたので、本当にソースコードが少なくなったか移行した際のソースコードのByteを比較してみました。
http://blog.jetbrains.com/kotlin/2015/11/the-kotlin-language-1-0-beta-is-here/

| | Java Source | Kotlin Source | Javaとの差 |
| :-- | :-- | :-- |:--|
| Controller |37,208 bytes|34,020 bytes| -3.1KB |
| Service |109,636 bytes|103,890 bytes| -5.7KB |
せいぜい3桁くらい減ってると予測してましたが、実際には5,000byteも減少していました。


あと、SpringBootもKotlin化してみたのでGithubに置いときます。
構成は[SpringBoot]+[JPA]+[Thymeleaf(使ってない)]でDBの値をjsonで表示出来るとこまで実装してます。
https://github.com/yubaken/springboot-kotlin-sample
HTML、CSSは、将来を見越して書こう！

開発環境でHTML、CSSなどでページ作成している時は公開が目標になってしまいがちです。あのブラウザだけレイアウト崩れが…その端末だとうまく表示できない…突然の仕様変更！など、いろんな理由で「もうこれでいいや！えいやー！」とその場凌ぎな書き方になってしまうことがあります。
公開後に直そうと思っても影響範囲が広すぎて、なかなか難しいといったことはないでしょうか？
困ったことになりにくいようにポイントを紹介していきます。

■!importantは最後の切り札
困ったときに!importantで指定してしまえば、自分の書いたstyleが優先されるので便利です。
でも、その後その近くに新しく要素を追加することになった時どうなりますか？
うまく配置できなかったらどうなるでしょうか？
・!importantを外してまた作り直す
・さらに!importantを使って優先順位をあげる

こんなことをやり続けていたら、いつまでも手を入れ続けなくてはならず、運用が楽になりません。
!important以外にも優先順位を上げる方法はありますし、上書きしてしまうという手段もあります。
他にどうしても手段が見つからない場合だけにしましょう。


■styleで直接書かずにCSSでなんとかする
<div class="testClass" style="margin-bottom=10px">
	<p>お知らせです</p>
</div>

このような書き方をすると、testClassを修正してもmargin-bottomが10pxのままになってしまいます。
また、あとでstyleの部分を削除する手間も発生してしまいます。
こういった修正をしたことを覚えていたら大丈夫ですが、もし新しいメンバーが加入した時、
その人はそのことを知らずに困ることになるかもしれません。


■再利用しやすい作りにする
このページでは使えるのに、他のページでは使えない。
同じデザインなのに！

リンクやリストのような他のページでも使うものは、他のページでも使えるように再利用できることを意識する。
また仕様変更にも対応できるように。リストの項目が一つ増えてもすぐに修正できるように作ると運用がぐっと楽になります。


■コーディング規約を作成し閲覧できる場所においておく
・なんで〇〇さんは、なんでもtableで作るの！(怒）
・!importantでなんでも書きすぎ！！（怒）
こういった不満や不機嫌になりがちなプロジェクトには、
・コーディング規約がない（自由でいいよ！ってケースも…）
・wikiの更新が１年以上とまっている
・古参メンバーの暗黙の了解になっている

なので、質問したり、HTMLやCSSを読んで研究して合わせようとしたり、
コミュニケーションコストがかかったり、書き方を自力でつかみにいかなくてはならず大変です。

また、HTML、CSSはフロントエンド担当者のレベルで書き方が違っていたり、
バックエンドに強いプログラマがフロントエンドに強いとは限らなかったり、
いろんな人が編集します。
なので、これは守って欲しい！といったことはドキュメント化しましょう。


いかがでしたでしょうか？
一度作ってしまうと影響範囲が広くてなかなか直せないといったケースにあたったり、
簡単に書けてしまう分、いろんな人が編集することもあり、運用がなかなかうまくいかないことがあります。
少しでも参考になれば幸いです。
こんなことをやるとうまくいくよ！といったコメントも歓迎です。
mrubyデバッガ(mrdb)にnextコマンドを追加してみた


mrdbに**nextコマンド**を追加してみました。

## 概要
### mrdbとは
mrubyのVM上で動作するデバッガです。mruby-1.1.0にてmrbgemsに追加されました。

### nextコマンドとは
デバッガ上でプログラムを実行する際、ソースコードの1行分を実行するコマンドです。**nextコマンド**という名前はC/C++のデバッガであるgdbを参考としています。

例えば以下のプログラムをデバッグするとします。

```rb:sample.rb
def sample
  p "called sample."
end

p "start."
sample
p "end."
```

mrdbにてこのプログラムを実行します。試しに`p "start."`の行で止めてみましょう。

    $ mrdb sample.rb 
    (sample.rb:1) break 5
    Breakpoint 1: file sample.rb, line 5.
    (sample.rb:1) continue
    Breakpoint 1, at sample.rb:5
    5       p "start."

この状態で**nextコマンド**を実行すると、1行分のプログラムを実行し`sample`の行で再び停止します。

    (sample.rb:5) next
    "start."
    sample.rb:6
    6       sample

このコマンドは2015/12/15時点のmrdbには存在しておらず、今回の追加対象です。

### (参考)stepコマンドとは
**nextコマンド**に似たコマンドとして**stepコマンド**があります。このコマンドはmrdbに実装されています。

**stepコマンド**は「メソッド呼び出しを実行する場合に、メソッドの中に入り込んで停止する」という点で**nextコマンド**と異なります。

    $ mrdb sample.rb 
    (sample.rb:1) break 5
    Breakpoint 1: file sample.rb, line 5.
    (sample.rb:1) continue
    Breakpoint 1, at sample.rb:5
    5       p "start."
    (sample.rb:5) step
    /mruby/mrbgems/mruby-print/mrblib/print.rb:40
    40        def p(*args)

このため、メソッドそのものをスキップしたい場合においては少々不便なコマンドです。

## nextコマンド追加の流れ
nextコマンドを追加する方法を簡単に説明します。

ソースコードは以下に公開していますので、気になる方は参照ください。
https://github.com/yuuu/mruby/tree/add_next_command

改造するのは`mrbgems/mruby-bin-debugger/tools/mrdb/`配下のソースコードです。

### nextコマンドを受付可能とする
現状のmrdbにnextと打ち込んでも、コマンドとして認識されません。

    $ mrdb sample.rb 
    (sample.rb:1) break 5
    Breakpoint 1: file sample.rb, line 5.
    (sample.rb:1) next
    invalid command (next)

mrdbは受付可能なコマンドをテーブルに定義しているので、このテーブルに**nextコマンド**を追加します。追加作業は仕様がほとんど同じである**stepコマンド**を参考にしました。

### nextコマンドの実処理を追加する
次に**nextコマンド**の実処理を追加します。nextコマンドで行うべきことは、**stepコマンド**とほぼ同じであるため、これを参考にしました。

唯一異なるのは、メソッド呼び出しした場合にはメソッドを抜けるまで停止させない、という点です。この動作を実現する方法は以下の記事を参考にしました。

http://magazine.rubyist.net/?0050-nomitory#l24

> 要するに、nextを実行した時点のスタック深さを記憶しておき、これより深い箇所では停止させないようにする、という処置が必要ということです。

## まとめ
nextコマンドを追加することで、より快適にmrubyプログラムをデバッグできるようになりました。
ひと通り問題ないことを確認できたら、mruby本家のリポジトリへpull-requestしてみるのも良いかなと思っています。
【FileMaker】TODOリストを作って改良していこう(5)ー試しにみんなに使ってもらおう（レビュー）


さて、TODOリストはiPhoneで動くことを想定して作りましたので、iPhoneに入れたFileMaker Goに入れて他のみんなに使ってみてもらいましょう。

iPhoneへのファイル同期はいろいろありますが、
・Dropboxなど共有フォルダがPCとiPhoneで同期できていれば、そこからFileMaker Goへコピー
・メールにFileMakerファイルを添付して、iPhoneで受信した時に添付ファイルをFileMaker Goで開く
のが簡単かと思います。

開きましたね！
<img width="414" alt="写真 2015-12-13 10 39 47.png" src="https://qiita-image-store.s3.amazonaws.com/0/60538/8f286741-8887-77dc-47e4-2065cfb7a051.png">

私のiPhoneは6 Plusなので画面サイズが大きめなのをすっかり忘れてました。。。（汗）
右側がちょっと開き気味ですね。
ま、いっか。
Plusサイズにする際は、PCのレイアウト変更でPlusの画面サイズに変更してみてください。

フォームの表示や画面遷移もOKですね。
<img width="414" alt="写真 2015-12-13 10 39 58.png" src="https://qiita-image-store.s3.amazonaws.com/0/60538/24470181-ea54-ff15-25ee-b677ef8368f6.png">
でも、「あと何日！」が微妙に目立たない感じがしますね〜。

「未完了」「完了」をタップすると、検索が走るのでこんな↓画面が一瞬出てきますが、検索が終わると表示が消えます。
<img width="414" alt="写真 2015-12-13 10 40 24.png" src="https://qiita-image-store.s3.amazonaws.com/0/60538/f517f696-0649-815c-0497-a8eed24bd3d2.png">

画面右下の「+-」をタップすると、アプリでは機能を実装していない「レコードの削除」などが出てきました。
<img width="414" alt="写真 2015-12-13 10 40 40.png" src="https://qiita-image-store.s3.amazonaws.com/0/60538/182e441a-dd5d-82ac-02ea-9c30b043c23e.png">
これだと、TODOを物理的に削除する懸念があるので、ちょっとカスタマイズしないといけないですね。

まずは、実機でテストができたので、良しとしましょうか。
インスタのAPIをPHP用にwrapされたライブラリをLaravel用にwrapしたvinkla/instagraを使ってインスタのAPIを叩く

この投稿は[オールアバウトアドベントカレンダー](http://qiita.com/advent-calendar/2015/allabout)15日目の投稿になります。

#まえがき
Instagram使っているでしょうか？
よくInstagramから写真を取得して表示する。みたいなサイトが増えてきています。

たとえばWeb上からInstagramを便利に使える[WEBSTA](http://websta.me/?lang=ja)などです。その他にも、Instagram APIを使っているサービスが徐々にひろがりつつあります。
※なお筆者はinstaを使いこなせてはおりません。
※11/17にInstagramのAPIが変更されました。
新しいAPIに関しては以下のライブラリでは対応しないようなので、使用する際にはお気をつけ下さい。

# InstagramのAPI
InstagramではAPIを提供していますが([https://www.instagram.com/developer/](https://www.instagram.com/developer/))、本記事ではAPIの詳しい説明は行いません。
APIを便利に使えるようなライブラリの紹介が中心になります。


※11/17にInstagramのAPIが変更されました。
新しいAPIに関しては以下のライブラリでは対応しないようなので、使用する際にはお気をつけ下さい。

2015/11/17より、API KEY作成時にはsandboxモードになり アクセスが500/hourになるようです。

# PHP用ライブラリ cosenary/Instagram-PHP-API
PHP用のライブラリとして[cosenary/Instagram-PHP-API](https://github.com/cosenary/Instagram-PHP-API)というライブラリがあります。


ユーザのメディアを取得するメソッドなどがあるようですが、
今回はこのライブラリを直接使うわけではないので、このライブラリの詳しい説明も行いません。

# Laravel用の vinkla/instagram
[vinkla/instagram](https://github.com/vinkla/instagram)は cosenary/Instagram-PHP-APIをwrapしてLaravelで使いやすくしたライブラリです。

## インストール
composer.jsonに以下を追加

```
"require": {
		"vinkla/instagram" : "~3.2"
}
```

そして、composer update

## 設定
config/app.phpのprovidersに以下を追加

```
Vinkla\Instagram\InstagramServiceProvider
```

config/app.phpのaliasesに以下を追加

```
 'Instagram' => 'Vinkla\Instagram\Facades\Instagram',
```

設定ファイルを自動生成するために以下コマンド実行

```
php artisan vendor:publish
```

するとconfig/instagram.phpが生成される。

config/instagram.php内に接続情報を記入するところがあるので変更する

```
'connections' => [

        'main' => [
            'client_id' => env('INSTAGRAM_CLIENT_ID'),
            'client_secret' => env('INSTAGRAM_SECRET_ID'),
            'callback_url' => env('INSTAGRAM_CALLBACK_URL'),
        ]
    ],

```

設定値はこのファイルに直接記載してもいいが、環境ごとに切り分けがしたいので、envファイルに記載した。

## 最近タグ付けされたメディア一覧を取得したい

```
Instagram::getTagMedia($tag, $limit);
パラメータ　$tag : 指定のタグ
          $limit : 取得件数
```

これでobjとして返される。

obj->dataが今回取得したデータとなるので、あとはforeachなりで好きに調理する。

## メディアにつけられたコメントを取得したい
```
Instagram::getMediaComments($id)
パラメータ $id: 対象メディアのid
```

これもobjで返却される。

他にもメソッドが用意されているため、使いたいものを調べて使ってみるといい。

### このライブラリの欠点
取得した件数の上限までいき、次のページの情報を取得したい時に
obj->pagination->next_urlのurlで叩くと次のページの情報が取得できるが、
これを叩くのがライブラリ上用意されていないのでCurlなどで叩くように自分で実装する必要がある。
rustのtime


この記事は、Rustアドベントカレンダー15日目の記事です。

Rustで日付の計算を行う便利なcrateにtimeというものがあります。
timeは、二種類あって、rust本体に組み込まれているtimeとcrateに分離されているtimeがあります。

std::time 
https://doc.rust-lang.org/beta/std/time/index.html

crate time
https://github.com/rust-lang-deprecated/time

std::timeの方は、stable では 現状Duration(時間間隔) の計算しか行うことが出来ず、不便です。

```rust
let five_seconds = Duration::new(5, 0);
let five_seconds_and_five_nanos = five_seconds + Duration::new(0, 5);
assert_eq!(five_seconds_and_five_nanos.as_secs(), 5);
assert_eq!(five_seconds_and_five_nanos.subsec_nanos(), 5);
let ten_millis = Duration::from_millis(10);
```
出典: [Struct time::Duration](https://doc.rust-lang.org/beta/std/time/struct.Duration.html)

それと比べて crate の time の方は、現在時間が取得できたり、日付をstrftimeで出力できたりと便利な機能が揃っています。

crates.io にも公開されているので、crates 版 time を使ってしまいそうになると思いますが、URLから分かる通り(rust-lang-deprecated)、非推奨なcrateなのです。

なので、極力 std:time の方を使ったほうが良いのですが、そもそもnowもなかったりするので、使いたくても使いにくい状況ではあります。


## どうしてもcrate版timeを使いたい時の注意点

どうしてもcrate版timeを使いたいときは注意点があります。
これはJST環境で、`2015-12-14 20:40:01` のタイミングで実行した結果ですが、

```rust
extern crate time as crateTime;
use crateTime::Duration as crareTimeDuration;
fn main() {
    // 今の日時    
    let now = crateTime::now();
    println!("{:?}", crateTime::strftime("%Y-%m-%d %H:%M:%S", &now).unwrap());
    // => "2015-12-14 20:40:01"
    
    // 日付の計算
    let yesterday = now - crareTimeDuration::days(1);
    println!("{:?}", crateTime::strftime("%Y-%m-%d %H:%M:%S", &yesterday).unwrap());
    // => "2015-12-13 11:40:01"
    
    // 本当の日付の計算
    let real_yesterday = now - crareTimeDuration::days(1) + crareTimeDuration::hours(9);
    println!("{:?}", crateTime::strftime("%Y-%m-%d %H:%M:%S", &real_yesterday).unwrap());
    // => "2015-12-13 20:40:01"
}
```

なんということでしょう。。。
今の日時は、正常な日付を出力しているのに、日付の計算を行うと、強制的にUTCになります。UTC環境のシステムであれば問題ないですが、JST環境においては日付の計算を行う際に、9時間加算する必要があります。

## 最後に

この記事では、
rust 1.4.0
time 0.1.34
の環境で実行しています。
FetchAPIで非同期処理をやってみた

ニジボックスAdvent Calendar 2015 15日目の記事です。

## FetchAPIとは
FetchAPIはES6(ECMAScript6)のPromiseオブジェクトをベースに設計された非同期処理APIです。長期にわたって、JavaScriptにより非同期処理がXHR(XMLHttpRequest)で行います。2005でjQueryを代表にしたAjaxで一気に有名になったXHRが、今時の視点から見て、関心の分離ができてないなど、設計上のミスがあります。それら不足点をなくし、今後XHRを完全に代替できるだろうというのはFetchAPIのことです。

このリンクが日本語化されたFetchAPI紹介です。 [Fetch Standard 日本語訳](http://www.hcn.zaq.ne.jp/___/WEB/Fetch-ja.html)

## FetchAPIを使ってみよう

まずXHRで簡単な非同期処理のサンプルを用意します。

```Javascript
var url = "test.json";
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json';

xhr.onload = function() {
  console.log(xhr.response);
};

xhr.onerror = function() {
  console.log("Error!");
};

xhr.send();
```

上のサンプルをFetchAPIで書いたらこうなります。

```Javascript
var url = "test.json";
fetch(url).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function(e) {
  console.log("Error!");
});
```
解説するには少しPromiseに関する知識が必要になりますが、ここで割愛させます。Promiseに関しては、このリンクを参考してください。 [Promise](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise)
一気に爽やかになりました。上のコードをES6のアロー関数で書きなおしたら更にシンプルになります。

```Javascript
var url = "test.json";
fetch(url).then(response => response.json())
  .then(data => console.log(data))
  .catch(e => console.log("Error!"))
```

更に簡潔になったが、なんとなくcallback連鎖気味があります。
ここでasync/awaitで加工して進化させましょう。

```Javascript
var url = "test.json";
var asyncFunc = async function() {
  try {
    let response = await fetch(url);
    let data = response.json();
    console.log(data);
  } catch(e) {
    console.log("Error!");
  }
}
```

ここまで来たら非同期処理の処理がまるで同期処理のように書くことができます。

※ async/awaitがES7のAPIで、紹介するには別記事ができてしまうため、割愛させていただきたいです。FetchAPIがPromiseのオブジェクトとして「await」の後ろでついて利用できるのがポイントとなります。

## FetchAPIの注意点
- XHRと違ってFetchAPIでリクエストの場合は、デフォルトでCookieが付かない仕様です。Cookieをつける場合は下のようにしないと。

```Javascript
fetch(url, {credentials: 'include'})
```
- 各ブラウザのサポートがまだまだこれからです。FetchAPIのサポート状況は楽観的ではないです。
![es6.png](https://qiita-image-store.s3.amazonaws.com/0/41234/b01ea9eb-c962-60fe-8cc5-50beaa4fcaf8.png)
[各ブラウザのES6サポート](https://kangax.github.io/compat-table/es6/)

## まとめ
今年リリースされたES6がまだまだ各ブラウザのサポートが不十分ですが、XHRより良く設計されたFetchAPIが徐々に主流になるでしょう。快適とはいえない今時の非同期処理制作やデバッグが、FetchAPIによりやりやすくなると僕はそう思います。
bashのキーバインドを変えて快適ターミナルライフ

## はじめに

Hamee Advent Calendar 15日目の記事です。
bashのキーバインドを変えてターミナル操作を快適にするのが目的です。

## 環境

* 自分のMacでの動作を確認
 * Mac OS X ver 10.9.5
* Windows未検証

## やりたいこと

ターミナル上で例えば

```bash
php test.php hoge moge foo bar sample
```

のように、あるプログラムファイルに引数を大量に渡す場合、または

```bash
ssh 0.0.0.0 -i ~/.ssh/sample.pem
```

のように、あるコマンドに対して引数とオプションを大量に渡す場合

例えば上の例で言うと引数`moge`の部分が間違っていて修正したい時に
`ctrl + e`で末尾から左キーで該当箇所に行く or `ctrl + a`で先頭から右キーで該当箇所に行く
という選択があるかと思うんですが、これだと右キー左キーをしばらく押さなければならず遅いですし手間です。
該当箇所にさくっと移動したいのがやりたいことです。

## やること

デフォルトのbashで単語間移動ができます。
`esc + f`で次の単語へ移動
`esc + b`で前の単語へ移動
しかしこれで`esc`を押しながら`b`を連打すると、一個単語が移動したところで`b`という文字を打ってしまいます。
![jz4RuAXzp9.gif](https://qiita-image-store.s3.amazonaws.com/0/67471/5b06e9a8-3f4e-6792-772d-b84ae604dd78.gif)

更に次の単語へ行くには`esc`を押し直す必要があり非常に手間なのと、そもそも`esc`というのが使いづらい。
そこで`esc`ではなく`ctrl`に変えてしまいます。

```bash:~/.bashrc
# ctrl+fで次の単語に移動
bind '"\C-f": forward-word'
# ctrl+bで前の単語に移動
bind '"\C-b": backward-word'
```

これで`source ~/.bashrc`をすれば`ctrl + b`での単語間移動が可能になります。
以下は`ctrl + b`で`moge`手前まで移動し`ctrl + w`で`moge`を消す様子
![MKVarCTIXY.gif](https://qiita-image-store.s3.amazonaws.com/0/67471/f422e66a-2ea8-3e89-4972-f0c60315b554.gif)



弊害として元々の`ctrl + b`の「1つ左へ移動」という挙動ができなくなりますがそれは左右キーで良いかと思います。

## おわりに

別に`ctrl + b`でなければならない理由はないので、そこは自分の打ちやすい（覚えやすい）キーに変えてしまえば良いかと思います。
キーバインドを変えて快適なターミナルライフを！:+1: 

## おまけ

`ctrl + k`でカーソル位置から行末まで消すことができるのは割と有名だと思ってるんですが、その逆で行頭まで消すのはどうすればいいんだっけとなったので一応ここに記しておきます。
`ctrl + u`でカーソル位置から行頭までを消せます。
覚えておくと何かと便利そうですね:smile: 

## 参考

以前`ctrl + w`でスラッシュまでを消すようにするという記事も書いているので合わせてどうぞ
[Ctrl+wを押した時にスラッシュまでを削除するようにするbash設定](http://qiita.com/yamamoto_hiroya/items/9d569010cf0be4719b6c)
ハンガソンでmyThingsを使った「ケアハンガー」を作った話

この記事は<a href="http://qiita.com/advent-calendar/2015/mythings">myThings Advent Calendar</a>の15日目の記事です。

#はじめに( ´ ▽ ` )ﾉ
皆さんこんにちは。主婦クリエイターのkeropiyoです( ´ ▽ ` )ﾉ

今回私は「ハンガソン」というハッカソンに参加して、チームの皆さんと一緒に、<b>myThings</b>を使って「ケアハンガー」という作品を作った話を書きたいと思います。

#アイデアスケッチとモデリング
ハンガーに関するアイデアスケッチを短時間で沢山描くというワークショップがあり、その中でチームメンバーと一緒にブラッシュアップさせていったのが、臭いがすると<b>「くさい！」</b>とお知らせする「ケアハンガー」でした。
![おおお.005.jpeg](https://qiita-image-store.s3.amazonaws.com/0/96556/96b9fdc2-9394-2182-38cc-f678627f7334.jpeg)

１ヶ月の長期ハッカソンだったので、「ケアハンガー」をイメージしたモデリングも素晴らしいモノが出来上がっています。

#構成
においセンサー（TGS2450）の設定に悩まされ、最終日の構成はシンプルに「におい」が「ある」「ない」を判定する事にしました。
全体の構成は以下の通りです。
![gggg.png](https://qiita-image-store.s3.amazonaws.com/0/96556/cb9a171c-e834-1f6c-8338-9f909efe8023.png)


#内部の電子回路と遠距離開発
電子回路については、まだまだ改良の余地が沢山あるのですが、スカイプなどを使いながら遠距離にいる人と開発をおこなうのは、とてもいい経験になりました。
![おおお.008.jpeg](https://qiita-image-store.s3.amazonaws.com/0/96556/c04d09dd-4ce7-eac7-afc0-9ea732e8fee8.jpeg)

#IDCFクラウドの設定
<a href="http://qiita.com/masato">masato</a>さんの<a href="http://qiita.com/masato/items/f9be4a15216fe29de7fb">myThingsをはじめよう - Part2: IDCFクラウドに「IDCF」チャンネルをセットアップする</a>を参考にIDCFクラウドの設定をしました。

#RaspberryPi2の設定とサンプルコードの利用
RaspberryPi2の設定は<a href="http://qiita.com/masato/items/16bf8b17ee4881179462">myThingsをはじめよう - Part1: はじめてのRaspberry Pi 2セットアップ</a>を参考に、サンプルコードを以下の手順で取得して

```
$ git clone https://github.com/IDCFChannel/bme280-meshblu-py
$ cd bme280-meshblu-py
```
bme280-meshblu-pyの配下にある
・bme280.py
・bme280_data.py
という２つのPythonコードとconfigを書き換えています。

#通知
myThingからの通知は、Gmailへ通知するパターンとPushさせるパターンと作成しましたが、「くさいよー」と通知される以下のパターンが人気でした。
![IMG_1748 (1).jpg](https://qiita-image-store.s3.amazonaws.com/0/96556/9826719c-ed8a-60d3-ee87-2e0114009436.jpeg)



#展示
ハンガソンが終了した後日。北九州で開催されたMONOcafeでケアハンガーの展示をさせてただきました。ご協力いただいた皆さん、本当にありがとうございました。

#終わりに
今回、IDCFクラウドでの仮想サーバー作成や、myThingsの通知、Pythonのコード、秘密キーを使ったSSHや、meshbluやdockerなど、大変勉強になりました。また別の自作デバイスで何か試したいと思います。
iOSでDynamic Typeを使ったときのFontのWeightとサイズの一覧

![advent_calender_15.png](https://qiita-image-store.s3.amazonaws.com/0/32832/05ea4887-66d0-c25b-2a4c-6d3479bc1f8f.png)

この記事は Goodpatch Advent Calendar 2015 14日目の投稿です。
昨日は @inoinojp による「[フルスタックなフレームワーク『FuelPHP』に乗り換えよう！](http://qiita.com/inoinojp/items/30e5c61e67115ad00dd9)」でした。

# Dynamic Typeについて
iOSではDynamic Typeという設定.appでフォントサイズを設定するとアプリに自動的に反映される仕組みがあります。

Dynamic TypeについてはHuman Interface Guidelineに説明があります。
[Color and Typography](https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/ColorImagesText.html)

現状、Dynamic typeに対応しているアプリは少ないように見られますが
これを機にトライしてみてもいいかと思います。
また、Dynamic Typeを使用しない場合でもiOSアプリのデザインをするときにフォントサイズを決める際の参考になるのではないでしょうか。

iOS9から、iOSのシステムフォントは **San Francisco** になりました。
Dynamic Typeを使用するためのAPI(iOS7から利用可能)ではDynamic Typeはシステムフォントのみ対応しているようです。
また、システムフォントを使用すると日本語部分は **Hiragino-Sans**になります。

## Dynamic Typeのスタイル一覧を対応OSバージョン
| スタイル | 対応OS |
|:--|:-:|
| UIFontTextStyleTitle1    	|	9.0	|
| UIFontTextStyleTitle2     	|	9.0	|
| UIFontTextStyleTitle3		| 	9.0	|
| UIFontTextStyleHeadline		|  	7.0	|
| UIFontTextStyleSubheadline	| 	7.0	|
| UIFontTextStyleBody    		|  	7.0	|
| UIFontTextStyleCallout    	|  	9.0	|
| UIFontTextStyleFootnote   	|  	7.0	|
| UIFontTextStyleCaption1   	|  	7.0	|
| UIFontTextStyleCaption2   	|  	7.0	|

# Dynamic Typeを使用したときに使用されるフォントとサイズ一覧
## 設定.appでフォントサイズを変更したとき

※フォントサイズは設定.app内で7段階で変更可能なので、それぞれのサイズを以下に載せておきます。

| スタイル | Weight | 1 | 2 | 3 | 4 | 5 |6 | 7 |
|:--|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
| Title1    	| Light  	| 25| 26| 27| 28| 30| 32| 34|
| Title2     	| Regular	| 19| 20| 21| 22| 24| 26| 28|
| Title3		| Regular	| 17| 18| 19| 20| 22| 24| 26|
| Headline		| Semibold	| 14| 15| 16| 17| 19| 21| 23|
| Subheadline	| Regular 	| 12| 13| 14| 15| 17| 19| 21|
| Body    		| Regular 	| 14| 15| 16| 17| 19| 21| 23|
| Callout    	| Regular 	| 13| 14| 15| 16| 18| 20| 22|
| Footnote   	| Regular 	| 12| 12| 12| 13| 15| 17| 19|
| Caption1   	| Regular 	| 11| 11| 11| 12| 14| 16| 18|
| Caption2   	| Regular 	| 11| 11| 11| 11| 13| 15| 17|

※サイズが20以上のときはSFUIDisplay、20未満のときはSDUITextが適用されます。

# システムフォント以外のフォントで(擬似的に)Dynamic Typeを使用する

```objc

+ (UIFont *)dynamicFontWithFontName:(NSString*)fontName style:(NSString*)style
{
    //指定されたスタイルでシステムフォントのインスタンスを取得
    UIFont* systemFont = [UIFont preferredFontForTextStyle:style];
    
    //システムフォントのインスタンスからフォントサイズを取得
    UIFontDescriptor *fontDesc = [systemFont fontDescriptor];
    NSNumber* fontsize = [fontDesc fontAttributes][UIFontDescriptorSizeAttribute];
    
    //使用したいフォント名を使って使いたいフォントを生成
    UIFont* customFont = [UIFont fontWithName:fontName size:[fontsize floatValue]];
    
    return customFont;
}
```
Office UI FabricのリストUI

今日はOffice UI Fabric(以下"OfficeUI")のListについて解説します。

リスト表示を行うサンプルプログラムを作成してみました。表示例は以下の通りです。併せて実際に動くサンプルを用意しました。

 * [リストのサンプルプログラム](http://furandon_pig.bitbucket.org/sample/officeui/advcal2015/list.html)

![img700.png](https://qiita-image-store.s3.amazonaws.com/0/61137/de52d94a-751c-b90f-c880-f9c628771e10.png)

また、「ms-List--grid」クラスを追加指定することで、複数カラムにわたるリスト表示が可能です。

![img701.png](https://qiita-image-store.s3.amazonaws.com/0/61137/412a6478-823d-8e2c-4621-7abd2e2c52c7.png)

サンプルソースコードは以下になります。

```html
<!DOCTYPE html>
<html ng-app="App">
  <head>
    <meta charset="utf-8" />
    <title>List Sample</title>
    <link rel="stylesheet" href="//appsforoffice.microsoft.com/fabric/1.0/fabric.min.css">
    <link rel="stylesheet" href="//appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  </head>
  <body ng-controller="AppController">
    <!-- ボタンを表示する -->
    <div class="ms-Grid">
      <div class="ms-Grid-row">
        <div class="ms-Grid-col ms-u-sm6 ms-u-md8 ms-u-lg12">
          <div class="ms-ChoiceField">
            <input id="check1" class="ms-ChoiceField-input" type="checkbox" ng-model="isGridStyle">
              <label for="check1" class="ms-ChoiceField-field">
              <span class="ms-Label">"ms-List--grid"クラスを適用する</span>
            </label>
          </div>
        </div>
      </div>
      <div class="ms-Grid-row">
        <div class="ms-Grid-col ms-u-sm6 ms-u-md8 ms-u-lg12">
          <div class="ms-List {{isGridStyle?'ms-List--grid':''}} is-selectable" ng-repeat="item in items">
            <div class="ms-ListItem is-unread is-selectable">
              <span class="ms-ListItem-secondaryText">{{item.title}}</span>
              <span class="ms-ListItem-tertiaryText">第{{item.episode}}羽</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      var app = angular.module('App', []);
      app.controller('AppController', ['$scope',
        function($scope) {
          $scope.init = function() {
            $scope.isGridStyle = false;
            $scope.items = [
              { episode: 1, title: 'ひと目で尋常でないもふもふだと見抜いたよ' },
              { episode: 2, title: '小麦を愛した少女と小豆に愛された少女' },
              { episode: 3, title: '初めて酔った日の事憶えてる？自分の家でキャンプファイヤーしようとしたわよね' },
              { episode: 4, title: 'ラッキーアイテムは野菜と罪と罰' },
              { episode: 5, title: 'ココアと悪意なき殺意' },
              { episode: 6, title: 'お話をするお話' },
              { episode: 7, title: 'Call Me Sister.' },
              { episode: 8, title: 'プールに濡れて雨に濡れて涙に濡れて' },
              { episode: 9, title: '青山スランプマウンテン' },
              { episode: 10, title: '対お姉ちゃん用決戦部隊、通称チマメ隊' },
              { episode: 11, title: '少女は赤い外套を纏いウサギを駆りて聖夜の空を行く' },
              { episode: 12, title: '君のためなら寝坊する' },
            ];
          }
          $scope.init();
        }
      ]);
    </script>
  </body>
</html>
```

## まとめ

すごく駆け足ですが、OfficeUIのListについて解説しました。特徴的なUIなので効果的に使える場面を見つけて行きたいところです。

## 参考URL

 * [List](http://dev.office.com/fabric/components/list)
gst-app-maker  という黒魔術


アドベントカレンダー14日目です。

plugin の記事を書こうとしていたら [gst-plugins-bad](http://cgit.freedesktop.org/gstreamer/gst-plugins-bad/tree/tools) に面白いものを見つけました。


その名は [**gst-app-maker**](http://cgit.freedesktop.org/gstreamer/gst-plugins-bad/tree/tools/gst-app-maker)


使い方は簡単。

```shell-session
$ gst-app-maker my_video_mixer

```

とすると、以下の `main()` を含んだ一通りのベーシックなコードが入ったものが作成されます笑

```c
int
main (int argc, char *argv[])
{
  GError *error = NULL;
  GOptionContext *context;
  GstMyVideoMixer *myvideomixer;
  GMainLoop *main_loop;

  context = g_option_context_new ("- FIXME");
  g_option_context_add_main_entries (context, entries, GETTEXT_PACKAGE);
  g_option_context_add_group (context, gst_init_get_option_group ());
  if (!g_option_context_parse (context, &argc, &argv, &error)) {
    g_print ("option parsing failed: %s\n", error->message);
    g_clear_error (&error);
    g_option_context_free (context);
    exit (1);
  }
  g_option_context_free (context);

  myvideomixer = gst_my_video_mixer_new ();

  if (argc > 1) {
    gchar *uri;
    if (gst_uri_is_valid (argv[1])) {
      uri = g_strdup (argv[1]);
    } else {
      uri = g_filename_to_uri (argv[1], NULL, NULL);
    }
    gst_my_video_mixer_create_pipeline_playbin (myvideomixer, uri);
    g_free (uri);
  } else {
    gst_my_video_mixer_create_pipeline (myvideomixer);
  }

  gst_my_video_mixer_start (myvideomixer);

  main_loop = g_main_loop_new (NULL, TRUE);
  myvideomixer->main_loop = main_loop;

  g_main_loop_run (main_loop);

  exit (0);
}
```

これで開発をスタートアップするのが一番速いのかはいささか疑問ですが、
GStreamer の流儀に沿った命名規則のコードが自動生成されるので、便利なツールであることは確かです。
[tvOS]独自のコンテナViewController

<p>tvOSでも、TabBarControllerやNavigationControllerは使えるが、TVのユーザインタフェースということを考えると、独自のコンテナViewControllerが必要になる場合があると思う。そこで、以前、iOS向けに検討したコンテナViewControllerをtvOSに組み込んでみた。</p>

<img width="240" alt="Title.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/12540/53eb4006-e421-cc52-5659-d196365c9579.jpeg">


<p>コンテナビューコントローラに子ビューコントローラを登録。</p>

<pre><code>self.addChildViewController(titleViewController!)
self.addChildViewController(gameViewController!)
</code></pre>

<p>最初の画面を表示させる。</p>

<pre><code>selectedViewController = titleViewController
self.view.addSubview(selectedViewController!.view)
</code></pre>

<p>画面を切り替えるコード。</p>

<pre><code>    func toGameViewController() {
        transitionFromViewController(titleViewController!, toViewController: gameViewController!, duration: 1.0, options: .TransitionCrossDissolve, animations: nil, completion: { (finished: Bool) -> Void in self.selectedViewController = self.gameViewController })
    }
</code></pre>

ソースコード
GitHubからどうぞ。<br />
<a href="https://github.com/murakami/workbook/tree/master/tvos/Pokopen">https://github.com/murakami/workbook/tree/master/tvos/Pokopen</a> - GitHub<br />

関連情報
<a href="http://qiita.com/advent-calendar/2015/cocoa/">Cocoa Advent Calendar 2015</a><br />
<a href="http://www.bitz.co.jp/weblog/?date=20120923">[iOS]独自のコンテナViewController</a><br />

【Cocoa練習帳】
<a href="http://www.bitz.co.jp/weblog/">http://www.bitz.co.jp/weblog/</a><br />
<a href="http://ameblo.jp/bitz/">http://ameblo.jp/bitz/</a>（ミラー・サイト）<br />
<a href="https://t.co/6P3h2jtbRk</a>note<br />
(void *)なキャストしたくない


※ これはC言語の話です。

私は`void *`型関連のキャスト恐怖症で、`void *`なキャストを見ると恐怖で目がうるんでしまいます。

なんとか`void *`なキャストを明示的に書かないで済ませられないのでしょうか？

### 代入＆引数渡し

`void *`型の変数に値を代入する場合、代入元がポインタ型であれば明示的なキャストは不要です。

なので…

```c
int value;

void *pVoid = (void *)&value;
```

あああ、キャスト恐い！！

しかも不要なのに意味ありげな`()`で可読性が暴落ですよ(?)
大体1行に2回も`void *`って書かされてるのはDRYじゃない。

キャストは取っ払っちゃって、

```c
int value;

void *pVoid = &value;
```

でいい。

タイプ数と横幅を節約できて幸せ！
プログラマの意図も、こっちの方が明確に過不足なく伝わります。

なので関数にパラメータを渡す場合も、

```c
// void *を要求する関数
int requireVoidPointer( void *pVoid );

// 呼び出し
// (void *)&valueにする必要なし
int value;
requireVoidPointer( &value );
```

これでよし。

よかった、キャスト見ずに済みました…

### コールバック関数のパラメータ

コールバック関数を受け取る関数は、以下のパラメータを持たせるパターンが多いですよね。
 * コールバックの関数ポインタ
 * コールバックを呼び出す際に渡す`void *`型の変数

こうすることによって、コールバックを受け取る関数をより汎用的に使えます。

```c
// コールバック受け取る関数
int requireCallBack( void (* pCallBack)(void *pVoid), void *pParam )
{
  pCallBack( pParam );
}
```

こういった関数を使用する場合、コールバックとして渡される関数のパラメータは`void *`型である必要はありません！（ポインタ型であればよい）

なので、以下のようなコードを見ると辛い。

```c
// コールバック受け取る関数
int requireCallBack( void (* pCallBack)(void *pVoid), void *pParam );

void main( void )
{
  int value = 10;

  // コールバック受け取る関数呼び出し
  requireCallBack( addThreeCBR, &value );
}

// コールバック用の関数
void addThreeCBR( void *pVoid )
{
  // わぁ、なんか変なキャスト
  int *pValue = (int *)pVoid;
  *pValue += 3;
}
```

ああ、なんでこんな目に…
どこかで設計ミスったの？

この`addThreeCBR()`は、パラメータとして`int *`型の変数を受け取らないとちゃんと動作しません。

それなのに関数の型が、`requireCallBack()`のプロトタイプに引きずられて`int addThreeCBR( void *pVoid )`になってしまっています。だから関数の内部で無駄なキャストが必要になってしまう。

実は、`requireCallBack()`に渡すコールバック関数の型が`void (* pCallBack)(void *pVoid)`だからって、本当に渡すコールバック関数のパラメータを`void *`にする必要はありません。代入の時と同じで、ポインタ型でさえあればいいんです。

もう思い切って、`addThreeCBR()`のパラメータを`int *`型にしちゃいましょう！

```c
// パラメータをvoid *ではなくint *に変更
void addThreeCBR( int *pValue )
{
  *pValue += 3;
}
```

ああ、まがまがしいキャストと無駄なローカル変数が消せてすっきり！
Crystal - Enumerable - in_groups_of

Crystalの標準ライブラリの `Enumerable#in_groups_of` について

## <i class="fa fa-cubes" style="font-size:1em;"></i> Enumerable#in_groups_of
* <i class="fa fa-external-link" style="font-size:1em;"></i> [Enumerable#in_groups_of - Crystal API Docs](http://crystal-lang.org/api/Enumerable.html#in_groups_of%28size%3AInt%2Cfilled_up_with%3D%3Cspanclass%3D%22n%22%3Enil%3C%2Fspan%3E%29-instance-method)

`Enumerable#in_groups_of(size : Int, filled_up_with = nil)` は `size` の大きさで配列を分割し、
末尾などで余った部分には `filled_up_with` を設定する。
末尾も同じサイズの配列にする点が `Enumerable#each_slice` とは異なる。
（比較はサンプルコード参照）

`Enumerable#in_groups_of(size : Int, filled_up_with = nil, &block))` のようにブロックを与えると、
分割した各配列ごとの処理ができる。

## <i class="fa fa-flask" style="font-size:1em;"></i> サンプル
### <i class="fa fa-code" style="font-size:1em;"></i> プログラム
```ruby
class Fibonacci
  include Enumerable(Int32)

  def each
    a, b = 0, 1
    loop do
      yield b
      a, b = b, a + b
    end
  end
end

fib = Fibonacci.new
pp fib.take(10)
pp fib.take(10).in_groups_of(2)
fib.take(10).in_groups_of(2, 0) { |e|p e.sum }
pp fib.take(10).in_groups_of(3)
pp fib.take(10).each_slice(3)
pp fib.take(10).in_groups_of(3, 1)
fib.take(10).in_groups_of(3, 0) { |e|p e.sum }
```

### <i class="fa fa-files-o" style="font-size:1em;"></i> 出力
```ruby
fib.take(10) = [1, 1, 2, 3, 5, 8, 13, 21, 34, 55]
(fib.take(10)).in_groups_of(2) = [[1, 1], [2, 3], [5, 8], [13, 21], [34, 55]]
2
5
13
34
89
(fib.take(10)).in_groups_of(3) = [[1, 1, 2], [3, 5, 8], [13, 21, 34], [55, nil, nil]]
((fib.take(10)).each_slice(3)).to_a = [[1, 1, 2], [3, 5, 8], [13, 21, 34], [55]]
(fib.take(10)).in_groups_of(3, 1) = [[1, 1, 2], [3, 5, 8], [13, 21, 34], [55, 1, 1]]
4
16
68
55
```

## <i class="fa fa-github-square" style="font-size:1em;"></i> GitHub
Crystalの `Enumerable#in_groups_of` の実装が気になる方はこちら。

* <i class="fa fa-external-link" style="font-size:1em;"></i> [enumerable.cr - Crystal GitHub](https://github.com/manastech/crystal/blob/b3b1223108806f31fdb29cca6110a5d11d82f504/src/enumerable.cr#L275-L317)

## <i class="fa fa-book" style="font-size:1em;"></i> 外部資料
* <i class="fa fa-external-link" style="font-size:1em;"></i> [Enumerable#in_groups_of - Crystal API Docs](http://crystal-lang.org/api/Enumerable.html#in_groups_of%28size%3AInt%2Cfilled_up_with%3D%3Cspanclass%3D%22n%22%3Enil%3C%2Fspan%3E%29-instance-method)
SpriteKitを使ったアプリを実機で実行したときにエラー

SpriteKitを使っていて↓のようなエラーが出たら、

```
<CAMetalLayer: 0x15f57fa70>: calling -display has no effect.
```

`Info.plist`に以下のエントリを追加すれば直る。

<img width="417" alt="20151214232954.png" src="https://qiita-image-store.s3.amazonaws.com/0/38151/88ee6957-4128-e1e6-74ac-55eb10df201f.png">
Emmetテンプレートを編集してdivタグをわかりやすくしてみる


##IntelliJIDEAを快適に使うための設定覚書

Bootstrap（AdminLTE）で管理画面を作ってます。
久しぶりに仕事でHTML + Bootstrap を書いてるんですが、
せっかくIDEAのライセンス買ったのでLiveEditなど機能フル活用したいのですが、いかんせんJSP/Servletな環境なので恩恵に預かれません。

divタグがネストして対応関係がわからずレイアウト崩れまくりでイライラしてたのですが、サンプルのソースなど見てると
↓のように終了タグの後ろにコメントでどこのタグなのか書いてあって目からうろこでした。

```
<div class="test"></div><!--/.test-->
```
・・・なぜこんな初歩中の初歩なテクニックを知らなかったのだろう。

で、Emmet使ってコーディングしているのでデフォルトでコメントも入ってくれれば良いなぁと思っていたらそんな設定がありました。

![kobito.1450102062.702832.png](https://qiita-image-store.s3.amazonaws.com/0/47837/0f60a4a3-c2ca-dcd7-4f3a-6354dceced63.png "kobito.1450102062.702832.png")

```
File>Preference>Emmet>HTML>Comment tags
```

しかし、改行は削除できない模様。


公式ヘルプを見ても見つからなかったので
LiveTemplateをいじらないとダメと思い込んで
↓みたいなことやって思ったようにいかず無駄な時間を過ごしました。

![kobito.1450100884.421399.png](https://qiita-image-store.s3.amazonaws.com/0/47837/5430bc7e-d3a5-642e-650c-ae817a56e7be.png "kobito.1450100884.421399.png")


##参考
http://9-bb.com/brackets-emmet/

https://www.jetbrains.com/idea/help/expanding-emmet-templates-with-user-defined-templates.html
Emmetテンプレートを編集してdivタグをわかりやすくしてみる


IntelliJIDEAを快適に使うための設定覚書

Bootstrap（AdminLTE）で管理画面を作ってます。
久しぶりに仕事でHTML + Bootstrap を書いてるんですが、
せっかくIDEAのライセンス買ったのでLiveEditなど機能フル活用したいのですが、いかんせんJSP/Servletな環境なので恩恵に預かれません。

divタグがネストして対応関係がわからずレイアウト崩れまくりでイライラしてたのですが、サンプルのソースなど見てると
↓のように終了タグの後ろにコメントでどこのタグなのか書いてあって目からうろこでした。

```
<div class="test"></div><!--/.test-->
```
・・・なぜこんな初歩中の初歩なテクニックを知らなかったのだろう。

で、Emmet使ってコーディングしているのでデフォルトでコメントも入ってくれれば良いなぁと思っていたらそんな設定がありました。

![kobito.1450102062.702832.png](https://qiita-image-store.s3.amazonaws.com/0/47837/0f60a4a3-c2ca-dcd7-4f3a-6354dceced63.png "kobito.1450102062.702832.png")

```
File>Preference>Emmet>HTML>Comment tags
```

公式ヘルプを見ても見つからなかったので
LiveTemplateをいじらないとダメと思い込んで
↓みたいなことやって思ったようにいかず無駄な時間を過ごしました。

![kobito.1450100884.421399.png](https://qiita-image-store.s3.amazonaws.com/0/47837/5430bc7e-d3a5-642e-650c-ae817a56e7be.png "kobito.1450100884.421399.png")


参考
http://9-bb.com/brackets-emmet/

https://www.jetbrains.com/idea/help/expanding-emmet-templates-with-user-defined-templates.html
ラクマのライブラリを見てみた。(iOS)

今度はラクマのライブラリ調べてみた。
やっぱりメルカリとライブラリ被ってるね。
特に試してはいないので今回も適当です。
なか引かれるのかなったかな？

#Acknowledgements
OSの設定画面に説明書き用意できるらしい。
[ここ見たらだいたいわかった](http://dev.classmethod.jp/smartphone/iphone/settings-bundle-acknowledgements/)
[git](https://github.com/rivera-ernesto/AcknowledgementsBundle)
気なったんだが、ラクマがそもそも設定画面に出てなくて。
でも覚えといて損はないかなと。

#AFNetworking
いつもの
なんでコレ使ってなかったんだろ俺。。。。

#HMSegmentedControl
メルカリと同じ

#JASidepanels
サイドメニューのスライドパネルのライブラリ
[git](https://github.com/Sephiroth87/ODRefreshControl)

#ODRefreshControl
引っ張ってリフレッシュ
[git](https://github.com/Sephiroth87/ODRefreshControl)

#SDWebImage
いつもの

#SVProgressHUD
HUD系ライブラリは２つのどっちかって感じだね。

#SVPullToRefresh
なぜか２つめの引っ張ってリフレッシュ

#TTTAttributedLabel
ラベル装飾

#UICKeyChainStore
KeyChain

#WEPopover
iPhoneでも使えるPopover


なんかすげーってライブラリに遭遇しない。。。。
rsyncの使い方

仕事でrsyncについていろいろ調べたのでメモします。

rsyncとは、ディレクトリやファイルをローカルまたはリモートで高速にコピーするコマンド。
フルバックアップや差分バックアップも可能。

よく使ったオプションは以下の通り。

`rsync -rlptgov --stats --delete (Source_data) (destination_data)`

- -r：ディレクトリ内を再帰的にコピー
- -l：シンボリックリンクを保持したままコピー
- -p：パーミッションを保持したままコピー
- -t：タイムスタンプを保持したままコピー
- -g：グループを保持したままコピー
- -o：オーナーを保持したままコピー
- -v：コピーするファイル名やバイト数などの情報を表示
- --stats：詳細なファイル数やバイト数などの情報を表示
- --delete：コピー元(Source_data)で削除されたファイルはコピー先で削除

また、リモート先が鍵認証だった場合は以下の通り。

`rsync -e "ssh -i (key_path)" -rlptgovz --stats --delete (Source_data) (destination_data)`

- -z：圧縮転送

また、以下のオプションを指定することで、短縮も可能。

- -a：-rlptgoDを指定したのと同じ。
- -D：デバイスファイルや特殊ファイルを保持したままコピー


【参考資料】

1. Linuxコマンド【 rsync 】高速なファイル同期（バックアップ） - Linux入門 - Webkaru
http://webkaru.net/linux/rsync-command/

2. UNIXの部屋 コマンド検索:rsync (*BSD/Linux)
http://x68000.q-e-d.net/~68user/unix/pickup?rsync

以上
【Excel VBA】コピペ用：簡易StringBuilder

#前述
クラスモジュールを作ってコピペして使う。自分用。

インスタンス化して、` Append()` で文字列追加。` AppendLine()`で1行追加。` GetString()` でAppendしてった文字列を取得する。機能はそれくらい。

Excel VBAでセルの内容を読み取って一文を作り上げるって時に、簡易的なStringBuilder的なクラスがあると便利だし、ソースを文字列結合式で埋めたくなかったので。
` &` でいっぱい文字列とか改行する為に` Chr(13) & Chr(10)`を結合するのもなんか汚く感じるし、なんか楽しくなかったので。

#ソース
```vbnet:SimpleStringBuilder
'====================================================================
' 簡易StringBuilder
'
'--------------------------------------------------------------------
' create: 2015/12/07
' update: 2015/12/07
'====================================================================
Option Explicit

'=========================================================
' メンバ宣言
'=========================================================
' 成形文字列
Private strString As String

' 改行コード
Private RTN_CODE As String

'=========================================================
' コンストラクタ
'=========================================================
Private Sub Class_Initialize()

    ' 初期化
    strString = ""
    RTN_CODE = Chr(13) & Chr(10)

End Sub

'=========================================================
' 成形した文字列を空文字にする
'=========================================================
Public Sub Clear()

    strString = ""

End Sub

'=========================================================
' 成形した文字列を取得する
'---------------------------------------------------------
' return                    成形した文字列
'=========================================================
Public Function GetString()

    GetString = strString

End Function

'=========================================================
' 文字列を追加
'---------------------------------------------------------
' param strAdd              追加する文字列
'=========================================================
Public Sub Append(ByVal strAdd)

    strString = strString & strAdd

End Sub

'=========================================================
' 文字列を追加
'---------------------------------------------------------
' param strAdd              追加する文字列
'=========================================================
Public Sub AppendLine(ByVal strAdd)

    Append (strAdd & RTN_CODE)
   
End Sub

```

#今後
あったら便利な機能とかあったら追加していきたいけど今のところ特に予定なし。