OmniAICreator/Qiita-1.07M huggingface dataset:
デザイナー向け - コンポーネント化について考える


この記事は [Retty Advent Calendar](http://qiita.com/advent-calendar/2016/retty) 15日目です。
昨日は[saku](http://qiita.com/saku)パイセンの[XcodeでJavascriptをテストする話](http://qiita.com/saku/items/0eff733caaafa0e9d58c)でした。

こんにちは！
Rettyでフロントエンドエンジニアやってます渡辺です。

盛り上がりを見せ続けるReact.jsやRiot.jsの影響もあって
コンポーネント化というワードをデザイナーの皆さんも耳にすることが増えてきたのではないでしょうか。

今回は「まだコンポーネントってよくわらない」「実は理解していない」というデザイナーを対象に
デザイナーにおけるコンポーネント化についてフロントエンド的な視点も交えつつざっくりとまとめてみました。


# そもそもコンポーネント化とはなんじゃい

「何らかの機能を持ったプログラムの部品を作ること」

エンジニア的にはこのような認識になるのですが、デザイナー的には

**「部品の持つ役割を視覚的に定義すること」**

になるのかなと思います。


役割を定義された部品を組み合わせ、一つの機能をデザインしていく。
フロントエンドエンジニアも同様に、
HTML・CSS・Javascirptを使って部品を定義し、組み合わせて一つの機能を作り上げます。

フロントエンドエンジニア的にはこのコンポーネント化を特にデザイナーと共に進めていきたい部分だったりします。


# コンポーネントをつくろう！

## 小さなコンポーネント

コンポーネントを作るうえでまず大事になるのは**粒度**になります。
これ以上役割として分割できない部品を最小単位（小さなコンポーネント）として定義します。
（ここはサイトの規模やプロジェクトの考えによって変化する部分かと思います。）


例えば

- 見出し
- バッジ
- テキスト
- ボタン
- 画像
- アイコン
- フォームのテキスト入力部分

などが最小単位候補でしょうか。

ボタンを例にして見た場合、
ボタンの中でもいろいろな役割が存在しますよね。

- 確定
- 検索
- 進む
- 戻る

とか。

![buttons.png](https://qiita-image-store.s3.amazonaws.com/0/107996/f6636fda-dece-a633-6142-0ef7bdf0a9de.png)



上の画像の様な2種類のボタンの場合、AとBでは矢印の有無というのが視覚的な違いになります。
**役割を視覚的に定義する**のがコンポーネント化なので、
矢印があるものとないものとでは決定的に役割が異なるはずです。 

Aが確定でBが進むとかでしょうか。

逆に、AとBが同じ役割を持つものであれば、矢印の有無は意味のない（無駄な！）視覚的な違いとなります。
このような場合は、制作段階でNGを出す必要があります。


## よくある事例
BootStrapのスタイルガイドのようなものを作る際に
デザインのパターンだけを並べられることがあるのですが、
そこに**役割の言語化**がされていないと都合のいい解釈を各メンバーがおこなって
デザインスキーム、CSSが崩壊に進み始めます。


ある時は、プロジェクトマネージャーやディレクターが
 「これだけさあー。矢印つけたいんだよねぇ」
とか言い出すかもしれません。

なので、序盤に役割を言語化し**プロジェクトに関わるメンバーとできるだけ共有すること**が大切かなと思います。


前職での経験ですが、
CSS設計をする際にもデザイナーやディレクターと認識の擦り合わせをおこなうことで、
大規模なリニューアルでもデザインの手戻り、CSSの修正もあまり発生することなく
スムーズに実行することができました！



## 大きなコンポーネント

小さなコンポーネントの集合体で構成され、ページを構成するための重要な機能を持つものを大きなコンポーネントとして定義します。

例えば

- フォーム
- リスト
- メニュー

などがそれにあたります。


![list.png](https://qiita-image-store.s3.amazonaws.com/0/107996/4e96b859-79a9-caf6-5d71-e3d70333f029.png)



上の画像の様なリストを、例えば「検索結果を表示するリスト」という機能を持つ大きなコンポーネントと定義した場合。

この機能を構成する最小粒度の部品（小さなコンポーネント）として、

- お店の画像
- お店の名前テキスト
- お店のカテゴリーテキスト
- リンク（遷移できる）テキスト
- コンテンツを区切る罫線

などが挙げられます。


もしかすると、
この大きなコンポーネントを拡張して、下部に「もっと見る」ボタンを追加するなんて施策が考えられるかもしれません。



![list2.png](https://qiita-image-store.s3.amazonaws.com/0/107996/5ca79873-2f31-8ef7-92b1-d3a5c9db0c02.png)



その場合は

- 検索結果を表示するリスト
- もっとみる（非同期で取得する）

の組み合わせが一つの大きなコンポーネントとなります。

この様に機能が定義されたコンポーネントが集合して、1つのページが出来上がります。



# ドキュメント化しよう！
会社のワークフローにもよるところではありますが、
機能要件を決め、ワイヤーフレーム、ビジュアルデザインに落とす際に
画面を構成する大きなコンポーネントが持つ機能と、それを構成する小さなコンポーネントの個々の役割を明確にし、できればドキュメント化することをオススメします。
ルールを明確にすることで新たなメンバーを迎えることになっても同じ認識で作業をすることができます！
（実際に小さなコンポーネントから作り出すということは難しいと思いますので、大きなコンポーネントを構成するものを最小粒度まで分解していくというフローがわかりやすいかと思います）


# まとめ

役割を視覚的に定義するということを意識することで、ユーザーに一貫性のあるUIを提供することができます。
それはユーザーの学習コストをさげることにもつながりますし、
サイトとしてまとまりのあるデザインを維持することにもつながっていくと思います。

これらのことはフロントエンドエンジニアとしても論理立てて設計できるので、
運用中のCSS崩壊を防ぐことにもつながり、素早い施策運用にもつながります。


導入コストは高めですが、
コンポーネントデザイン、これを機会に挑戦してみませんか？

周りのフロントエンドな方達は多分喜んで一緒に実現してくれると思いますよ！


### 参考

- [React](https://facebook.github.io/react/)
- [Atomic Design](http://atomicdesign.bradfrost.com/)
Excel データを MySQL に移行

[CData Excel Add-In for MySQL](http://www.cdata.com/jp/drivers/mysql/download/excel/) を使えば、Excel から直接 MySQL のテーブルデータの編集や保存が可能になります。この記事では、Excel から MySQL にデータを移行する方法を説明します。MySQL のデータを一度 Excel にエクスポートして編集・データソースの一括更新を行えるだけではなく、Excel スプレッドシートに保存されているデータを一括で MySQL にインポートすることも可能です。今回の記事では、customer テーブルを使います。同じことが、CData Excel Add-In で取得できるすべてのテーブルに対して実行可能です。

#接続の確立
MySQL への接続には、Excel Add-in をインストールしたExcel の［CDATA］タブ→［MySQL］アイコンをクリックします。

#MySQL データの取得
MySQL にデータを挿入するには、まず該当する MySQL のテーブルを取得します。これにより Excel スプレッドシートと MySQL のテーブルが連携した状態になります。取得したテーブルに対し変更、もしくは追加した部分は文字が赤でハイライトされます。

1. CData リボンからMySQL ボタンをクリックします。データ選択ウィザードが表示されます。
1. テーブルもしくはビューメニューから、customer テーブルを選択します。
1. ［最大行数］に、取得したい最大行数を入力します。データの一括入力だけが目的の場合は1行だけを取得すれば十分です。リクエストどおりにクエリ欄にSQL クエリが表示されます。
1. ［シート名］に作成されるシートの名前を入力します。デフォルトでは、取得するテーブル名が新しいシート名になります。 

#MySQLにデータを登録
データ取得後、既存の Excel で保存されているデータを取得したテーブルの下に追加していきます。

１．テーブルの最終行の下の行に、他のシートを参照する式を入力します。例：=Sheet1!A1。 
Sheet1には取引先の情報が記載されており、その内容を参照する例になります。
他のセルを参照するため、入力するセルの書式は「標準」にしておく必要があります。
![fig2_01.png](https://qiita-image-store.s3.amazonaws.com/0/141193/934bfcd8-0c1e-4252-b07e-9a7801590220.png)


２．MySQL に挿入するセルを参照する式を入力し、セルを取得する行数分ドラッグダウンします。テーブルに参照された値が表示されます。 
![fig2_02.png](https://qiita-image-store.s3.amazonaws.com/0/141193/c56c28d4-8fb3-5c13-9d71-a0bdec5a1605.png)


３．挿入する行を選択して、CData リボンの［行を挿入］ボタンをクリックします。

各行の挿入が完了すると、Id の値が表示され、追加した値の文字が赤から黒に変わります。

![fig2_03.png](https://qiita-image-store.s3.amazonaws.com/0/141193/6560cce4-8321-1828-770d-518e88f4ee70.png)
Fess Sambaファイルシステム認証

Fess 10.3
管理>クローラ>ファイル認証を利用してSmabaのファイルシステムをクロールします。

#### ファイル認証
Sambaサーバを立ち上げ、Fessサーバから接続できる状態にしておきます。

- Sambaアカウント
`ユーザ名: sambaadmin`
`パスワード： password`

- 管理>クローラ>ファイルシステムクロールの設定
`クロール名: samba_crawler`
- 管理>クローラ>ファイル認証

| 項目         |       設定値 |
|:-------------|:------------------|
| ホスト名     | ホスト名またはIPアドレス |
| ポート      | ポート番号(80は省略可) |
| スキーム      | Samba |
| ユーザー名      | sambaadmin |
| パスワード | password |
| パラメータ  | パラメータが必要な場合は記述 |
| ファイルクロール設定  | basic_site_crawler |
行儀良い待機でしょうか。いえ、ただのビジーウェイトです

Node.jsで非同期実行の待機をしていたら、思わぬ事態に見舞われてしまいました。

## 起こった問題

Node.jsで終了処理を行うために、`SIGTERM`にイベントを仕掛けていました。そして、終わったことが確認されてからプロセスを落とす予定でした。

```js:問題あり
process.on('SIGTERM', function checker(){
  if(/* 終了条件が満たされていない */){
    process.nextTick(checker);
    return;
  }
  process.exit();
});
```

このようにした上で実際に`SIGTERM`を送ってみたところ、仮想マシン全体が不調となってしまいました。`top`で見てみると、終了前のNode.jsプロセスが95%以上のCPUを消費してしまっていました。

## 「非同期」の中身
無限ループさせながら待機するのは、直感的にも「まずい」とわかると思いますが[^1]、今回のように非同期で流れを切ってもCPUを食ってしまったのはなぜなのでしょうか。

まず、ここでの「終了条件」のチェックはすぐ終わるので、`nextTick`の登録が終わればすぐに抜けますが、抜けた直後に`nextTick`の関数が動き出す、という流れでハイペースでまわり続けます。さらに悪い事に、`nextTick`はI/O処理より前に実行されるので、一度実行ループに入ってしまえば、抜けるチャンスはなくなってしまいます。

## 正しい書き方
非同期実行でいつ発生するかわからないイベントを、1ミリ秒の遅延もなく待ちたいというのであれば、イベントに直接ハンドラを仕掛けるのが適当でしょうし、終了処理のような場合は（状況にもよりますが）1秒遅れても実害がない、というケースも多いでしょう。

そういう、時間的余裕があるタスクに対して、全力でCPUを使いながら監視する必要性は全くありません。ブラウザにもある`setTimeout`を使って、時々実行させるような形にすればそれで十分です。

```js:改良後
process.on('SIGTERM', function checker(){
  if(/* 終了条件が満たされていない */){
    setTimeout(checker, 100);
    return;
  }
  process.exit();
});
```

たとえ1ミリ秒しかウェイトを入れなかったとしても、現代の数ギガヘルツのCPUにしてみれば、それは**数百万クロック**という途方もない時間です。それだけの時間を処理し続けるのと、単に待つのとでは、負荷の違いは明らかです。

## ブラウザ環境では？
ブラウザの場合、`setTimeout`を使っている限りは、[0にしても数ミリ秒のウェイトが入る](http://qiita.com/jkr_2255/items/17693ab77beea71a871c)ので、激しく実行されるようなことはありません。一方で、[`postMessage`を使えばウェイトなしで非同期実行できます](http://qiita.com/hiruberuto/items/0b89c36556cadbd751e2)が、こちらの方はそのまま回し続けると、CPUの1コアをフル回転させる程度に爆走してしまいます。

## まとめ

* タイミングが大切ならきちんとイベントとして仕掛けよう
* 待機ならウェイトを挟んで時折、で充分
* 全力を挙げて変化を待ち続ける、なんてことはふつう必要にならない


## 関連記事

* [「for やめろ」またはイベントループと nextTick()](http://jxck.hatenablog.com/entry/for-with-eventloop)


[^1]: そして、シングルスレッドであるブラウザやNode.jsでは、無限ループがまわり続ける限り別なコードが実行されることはありません。
GoogleTagManagerを使って技術者の手間が減った話

これは [日本情報クリエイト Engineers Advent Calendar 2016](http://qiita.com/advent-calendar/2016/njc) の15日目の記事です。

※今回はGoogleTagManagerを使った話ですので、以下タグマネージャー＝GoogleTagManagerと同義です。

こんにちは、WEB集客系の部署に在籍しているshiiiibaです。

先にお伝えしておきますが、私は技術者ではないので技術的な話はほぼ出てきません。
※場違い感が半端ないのは重々承知ですが、今回は技術者の手間が減った話を書かせていただきます。

# **先に結論**
**管理しているサイトが多ければ多いほどタグマネージャーは入れてた方が良い**
（当たり前ですみません・・・）

# **なぜタグマネージャを入れてた方が良いと思うのか**
技術者目線：技術者の手間がかからなくなる。
依頼者目線：技術者に依頼しなくてすむし、設定が楽。あと、いろいろ設定できる。

# **昔の話（技術者の手間がかかっていた頃：タグマネージャの設置前）**

##手間① タグ入れたいんですけど
生まれて入社するまで一度も言ったことのない「タグ入れたいんですけど」。入社してから数年でこんなに言うとは思わなかったです。
技術者にとっては「タグをbody直下に配置する」ってのは、自販機に飲み物を買いに行く程度の時間で出来ることなんでしょうが、数が増えてくると依頼自体が申し訳なくなってきます。

- Analyticsのタグ（全ページに設置）
- 各種分析ツールのタグ（全ページに設置）
- 広告のリタゲタグ（全ページに設置）
- 広告のコンバージョンタグ（複数の完了ページに設置）　等々

分析ツールを試す度に都度技術者に依頼し、ツールが使えなかったら再度削除の依頼。自分でやれよって感じですよね。

最終的には私の入社前から埋まっていたものも併せて

- **埋めたタグの種類を把握しきれなくなった**
- **ページによって設置しているタグが異なるので管理がややこしい（煩雑）**

という状況になってました。

##手間②　イベント設定したいんですけど
①の内容はタグを入れるだけなので、まだ依頼しやすかったんですが、イベントを計測したいんですけどっていうケースでは、部分的にソースを書き換えないといけないので、①の時より若干遠慮がちに依頼しました。

「あのー、電話番号クリック（タップ）を把握したいんで、ソース書き換えてほしいんですけど」
`<a href="tel:XXXXXXXXXX" >TEL：XX-XXXX-XXXX</a>'`
↓
`'<a href="tel:XXXXXXXXXX" onclick=”ga(‘send’, ‘event’, ‘カテゴリ’, ‘アクション’, ‘ラベル’, 値);”>TEL：XX-XXXX-XXXX</a>'`

※その他、PDFのクリック、印刷ボタンのクリック等、クリック状況を確認したいと思う度に依頼し、技術者の時間を使い続けていたのです。

##手間③　あっちのサイトにこのタグを、こっちのサイトにこのタグを設置してほしいんですけど
①と②の内容が1つのサイトであればまだましですが、サイトが増えれば増えるほど①と②の問題が大きくなっていきます。さらに、依頼者が1人ではなくなったら・・・、社外からの依頼も増えてきたら・・・。

**結果的に、タグマネージャーの運用に切り替わりました。**
（その他いろいろありましたが割愛させていただきます）

# **今の話（タグマネージャーの設置後）**
タグマネージャーでの管理にシフトしてから、技術者に頼ることはほとんどなくなりました。

##良くなったこと
###① 技術者の手間が減った
- タグの設置の全てを担当者で完結できるようになった
- 担当者が出来ることの幅が大きく広がった（クリックイベント：電話番号・PDF・印刷ボタン、等)　

###② タグの管理が出来るようになった（楽になった）
- どのサイトに何のタグが埋まってるかすぐ確認できる
- どのページにタグが埋めたかすぐ確認できる

※タイトルには技術者の手間が減った話って書いてますが、結果的には**タグが管理できるようになったことの方が重要**でした。

###③ソースが綺麗になった（技術者談）
- タグの数がn個→1個になり、ソースがすっきりした
- ページの読み込み速度が上がった（データ未取得のため、感覚値）

##悪くなったこと
### 担当者（自分）の手間が増えた
- タグマネージャーの設定をする担当者（自分）の手間は増えました

# **最後の結論**
**管理しているサイトが多ければ多いほどタグマネージャーは入れてた方が良い**
PostgreSQLのhstore型を操作するSQL構文まとめ 

15日目を担当させていただくことになりましたf-murakamiです。
よろしくお願いします。


PostgreSQLには**hstore型**という便利な型があります。
本稿では、そのhstore型のSQLでの構文について、自分の備忘録もかねて、まとめてみようと思います。

## PostgreSQLのhstore型について簡単に

PostgreSQLの**hstore型**とは、**キーとバリューの集合を１つの列に管理できる**型です。

つまり、**複数の項目を１つの列で管理できる**ので、テーブルに列を追加しなくても、キーを追加するだけで項目を手軽に増やせることが大きなメリットです。

ただその分、管理をきっちりしないと、あとでどういう項目が入ってくるんだっけ、って分からなくなったりするので注意が必要です。

ちなみに、Ruby on Railsなら rails4からサポートしています。
（PostgreSQLのhstore extensionを有効にする必要があります）

## hstore型をSQLで表現するワケ

最近はORMが充実していますので、SQLをゴリゴリ書くことは無いかもしれません。

それでも、

* データベースの内容を表形式でさっと確認したいとき
* 複数テーブルをjoinしないと取得できないようなとき
* データベースのデータを直接修正しないといけないとき

のような状況があったり、

上司や他部署の人たちから、データベースの保守スクリプトのレビューを受けるときに、

「プログラムじゃ分からないよ。SQLで書いてよ！」

って言われたり。
（かくいう私も、一昔前はバリバリSQLを書いていた世代でした　^^;）


このようなときに、hstore型ってSQLでどう表記するんだっけ、と毎回ググるのも面倒なんで、さっと確認できるようまとめておこうと思います。
（意外にこの手の内容がまとまったサイトはあまりない感じです）

前置きが長くなりましたが、これよりhstore型のSQLの構文を見ていきましょう。

## hstore型における基本的なSQL構文

hstore型を操作する構文は多々あるのですが、基本的な4つの構文に絞りました。
以下の4構文さえ押さえておけば、だいたいの場面はカバーできるんじゃないかと思ってます。


### (1)hstore型カラムのキーを指定して値を取得するには

varchar型

```
select column_name as xxx from table_name
```

hstore型

```
select column_name -> 'key_name'  as xxx from table_name
```

例） accountsテーブルのtags(hstore型カラム)から、start_dateというキーの値を取得する

```
select
    id
    ,account_number
    ,tags -> 'start_date'  as start_date
from
    accounts;
```

結果）

```
 id | account_number  | start_date
----+-----------------+------------
  1 | 00000001        | 2016-01-01
  2 | 00000002        | 2016-03-01
  3 | 00000003        | 2016-12-10
```


### (2)hstore型カラムのキーの値を条件するには


varchar型

```
where column_name = 'xxxx'
```


hstore型

```
where column_name -> 'key_name' = 'xxxx'
```

例） accountsテーブルのtags(hstore型カラム)にあるstart_dateというキーの値が'2016-01-01'以降のデータを取得する

```
select
    *
from
    accounts
where
    tags -> 'start_date' >= '2016-01-01';
```

### (3)hstore型カラムにキーが存在するかどうかを条件にするには

hstore型

```
-- キーが存在するとき
where exist(column_name,'key_name') = true
-- キーが存在しないとき
where exist(column_name,'key_name') = false
```

例） accountsテーブルのtags(hstore型カラム)にstart_dateというキーが存在するデータを取得する

```
select
    *
from
    accounts
where
    exist(tags,'start_date') = true;
```


### (4)hstore型カラムのキーを指定して、値を更新するには

varchar型

```
update table_name set column_name = 'xxxx' where <条件>;
```


hstore型

```
update table_name set column_name = column_name || hstore('key_name','xxxx') where <条件>;
```


例） accountsテーブルのtags(hstore型カラム)にあるstart_dateというキーの値を'2016-02-01'に更新する

```
update accounts set tags = tags || hstore('start_date','2016-02-01') where id=xxx;
```


## まとめ

PostgreSQLのhstore型を操作する基本的なSQL構文についてまとめてみました。
利用する場面はあまりないかもしれませんが、いざというときのお役に立つことができれば幸いです。
それでは。
OpenAMからOpenAMにFederationする

## ※注意※
ちょっとうまく動作しませんでしたので、途中までしかできていません。
時間取れたら更新します。すみません。

## 今日やること

タイトルだけじゃよくわからないですね。
今日は昨日やった**ソーシャルログイン**の応用で、OpenAM同士を連携させようと思います。

イメージは以下のような感じです。

![001.jpg](https://qiita-image-store.s3.amazonaws.com/0/148404/85198c6a-6e71-1914-0607-92cc85fda40e.jpeg)

昨日は**ソーシャルログインはあまりうちでは使わないなぁ**みたいなことを言ってました。ただ、ふと思い立ってこういうことが出来るのではないかなぁと思ったので、やってみようと思います。
グループ企業向けに公開するアプリ向けとかに使えそう。

## 会社B側のOpenAMをもう１つセットアップする

[Advent Calendarの1日目](http://qiita.com/nanazero/items/0a2d6530c8dd50820dd9)を見ながら、以下のパラメータでセットアップしました。

* FQDN
    - exiam.example.com

## 会社B側のOpenAMにユーザーを追加する

下記のユーザーを作ります。

|key|value|
|:---|:---|
|ID|exiamuser|
|名|user|
|姓|exiam|
|フルネーム|exiam user|
|パスワード|password|
|ユーザー状態|アクティブ|

以下のような感じです。

<img width="602" alt="005.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/148404/15c194bd-1b17-aa55-33db-9f1de565be34.jpeg">

## 会社B側をOpenID Providerにする

[Advent Calendarの9日目](http://qiita.com/nanazero/items/6e14ddbf113745173d1c)を見ながら、セットアップしたOpenAMをOpenID Providerにします。

## 会社B側のOpenAMにクライアント登録する

[Advent Calendarの10日目](http://qiita.com/nanazero/items/56d6bc70b7348dce1aca#openam%E3%81%ABrelying-party%E3%82%92%E7%99%BB%E9%8C%B2%E3%81%99%E3%82%8B)を見ながら以下のパラメータでクライアント登録をします。

|key|value|
|:---|:---|
|client id|externalidentityprovider|
|client secret|password|
|redirect uri|https://iam.example.com:443/openam/oauth2c/OAuthProxy.jsp|
|scope|openid email profile|

## 会社A側にソーシャルログインの設定をする

OpenAMの管理者アカウント（ユーザー名は`amadmin`）でサインインします。

**Dashboard => Social Authentication Configuration => Configura Other Authentication**をクリックします。

設定フォームが表示されるので、下記のパラメータで設定を行います。

|key|value|desc|
|:---|:---|:---|
|OpenID Discovery URL|https://exiam.example.com:443/openam/oauth2/.well-known/openid-configuration|会社B側のIAMのDiscovery URL|
|Provider Name|External IAM|ディスプレイネーム|
|Image URL/Path|/openam/ZUI/images/logs/exiam.jpg|ログイン画面に表示するアイコン|
|Client ID|externalidentityprovider|会社B側に登録したclient id|
|Client Secret|password|会社B側に登録したclient secret|
|Redirect URL|https://iam.example.com:443/openam/oauth2c/OAuthProxy.jsp|コールバックURL|

こんなかんじです。

<img width="957" alt="004.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/148404/7f2e25c4-75f8-f59b-bdb2-5ce7461b7e99.jpeg">


## 確認

ここまで設定が完了すると、**会社A側のIAMのサインイン画面に会社BのIAMでサインイン**みたいなリンクが表示されます。

<img width="340" alt="007.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/148404/ccd284cc-9ea1-81dd-3c68-fa9812e678fc.jpeg">

良い感じに動いてそうですが、現状では**B社のリンクをクリックすると、B社のIAMのサインイン画面が表示されず、エラー**となってしまいます。

<img width="318" alt="008.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/148404/9dd230fd-bde1-6856-3057-c793f0b56c02.jpeg">

通常のOpenID Connectのフローが行われているのであれば、認証前なのでJWTはまだ発行されていないと思うんですが、JWTの署名が不正...？リクエストを追ってみないとわからないですね。

## 〆

今日は全然時間取れませんでした。すみません。
本件はちゃんとdebugして動かしたいと思います。また更新します。

ん～、なりゆきで書く内容を決めると大変ですね...。
明日は何しよう～？

ばい！
Siv3Dでリソースファイルをまとめてexeに埋め込むワークフロー

この記事は [Siv3D Advent Calendar 2016](http://qiita.com/advent-calendar/2016/siv3d) 15日目の記事です。

画像や音声、テキストファイル、フォントファイル等のリソースファイルをユーザから隠蔽したい場合、Siv3Dではリソースファイルを実行ファイルに埋め込むことができます。

しかし、製作中のプログラムに追加のリソースがあるたびにResource.rcにファイル名を記述するのは面倒です。
ファイルパスもリソース番号としてしか扱えないし…。

そこで、複数のファイルをひとつにまとめるアーカイブ機能を使って、ファイル埋め込みの手間を減らしましょう。



# 1.アーカイブファイルの作成

アーカイブファイルの作成方法はこちらで解説の通り。
[Siv3D/Reference-JP/アーカイブファイル](https://github.com/Siv3D/Reference-JP/wiki/%E3%82%A2%E3%83%BC%E3%82%AB%E3%82%A4%E3%83%96%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB)

アーカイブファイルはフォルダ単位でアーカイブ化できるので、必要なリソースファイルを全てひとつのフォルダにまとめます。
（筆者はテクスチャならテクスチャ、サウンドならサウンドごとに分けています）

実装中のプログラムでいちいちアーカイブファイルを作成するのは煩雑なので、以下のようなexeを作ってしまいましょう。

```cpp:main.cpp
# include <Siv3D.hpp>

void Main()
{
	Console::Open();
	Window::Minimize();

	if (CommandLine::Get().size() < 3){
		std::wcout << L"参照パスとファイル名をコマンドライン入力で指定してください。" << std::endl;
	}
	else {
		Archive::Create(CommandLine::Get()[1], CommandLine::Get()[2]);
		std::wcout << L"Make Archive! \"" + CommandLine::Get()[2] + L"\" From \"" + CommandLine::Get()[1] + L"\"" << std::endl;
		std::wcout << L"FileSize: " + Format(FileSystem::FileSize(CommandLine::Get()[2])) + L"byte" << std::endl;
	}
	std::wcout << L"Enterキーを押して終了してください。" << std::endl;
	getchar();
}
```

あとはこのexeに、リソースフォルダのパスとアーカイブファイルのファイル名を渡して実行すればOKです。
バッチで起動してもいいですが、ショートカットでも起動できます。

![10.png](https://qiita-image-store.s3.amazonaws.com/0/106059/15a3c44c-352c-5a01-abdc-600971a06b1f.png)

というふうにショートカットを作成すると、Textureフォルダの中身をまとめたTextureAcv.s3aファイルが作成されます。
フォルダ・アーカイブファイルの指定は相対パスで行っています。

リソースフォルダにこのショートカットを置いておけば、ファイル追加→ショートカット実行でアーカイブファイルが作成されてお手軽です。
（アーカイブファイルにショートカットも含まれてしまうので、配布版を作る前には別のところに移したほうがいいです）



# 2.アーカイブファイルの埋め込み

手順1で作ったアーカイブファイルを埋め込みます。
埋め込みについてはこちらで解説の通り。
[Siv3D/Reference-JP/ファイルの埋め込み](https://github.com/Siv3D/Reference-JP/wiki/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF)

特にひねることなく、そのままResource.rcに記述します。
読み込みもそのまま。



```cpp:Resource.rc
1010	FILE	"TextureAcv.s3a"
1020	FILE	"SoundAcv.s3a"
```

```cpp:main.cpp
void Main()
{	
	FileArchive textureAcv(L"/1010");
	
	Texture playerTexture(textureAcv.load(L"chr/player.png"))
	Texture buttonTexture(textureAcv.load(L"menu/button.png"))
	
	FileArchive soundAcv(L"/1020");	
	
	Sound jumpSound(soundAcv.load(L"chr/jump.wav"));
	Sound selectSound(soundAcv.load(L"menu/select.wav"));
}
```
アーカイブファイルを再度作成し直した場合も、Resource.rcの更新は不要です。

# 3.ビルドせずにアーカイブファイルを読み込みたい場合

ただしこのままでは、アーカイブファイルの更新後、ビルドしなければexeにアーカイブファイルの更新が反映されません。

リソース調整のたびにビルドするのは不便です。
アーカイブファイルが所定の場所に存在する場合はそちらを、存在しない場合はexe埋め込みのアーカイブファイルを読むようにしましょう。

```cpp:main.cpp
void Main()
{	
	FileArchive textureAcv;
	
	if(FileSystem::Exists(L"TextureAcv.s3a")){
		textureAcv = FileArchive(L"TextureAcv.s3a");
	}else{
		textureAcv = FileArchive(L"/1010");
	}

	Texture playerTexture(textureAcv.load(L"chr/player.png"))
	Texture buttonTexture(textureAcv.load(L"menu/button.png"))
}
```
これで、ビルドせずにアーカイブファイルを読み込めるようになりました。

ただしこのまま配布してしまうと、不正なファイルを読み込んでしまう恐れがあります。
配布時には最初からexe埋め込みのアーカイブファイルを読み込むように修正しましょう。

# まとめ

実行ファイルへのファイル埋め込みはそのまま使用すると色々と手間です。
アーカイブファイル機能を利用して効率化しましょう。
アーカイブ作成用の実行ファイルを作っておくと更に便利です。
うるう秒がやってくる

うるう秒が近づいてきて、そわそわしているサーバ管理者のみなさま、こんにちは。
この記事は、さくらインターネット Advent Calender 2016 その2 の15日目の記事です。

#今年もやってきた
来る2017年1月1日、うるう秒がやってきます。なんと元日です。
（ちなみにうるう秒が挿入される日は、1月1日か7月1日のどちらかに決まっています。）

うるう秒の挿入にあたり、さくらインターネットでは以下とおり注意喚起を行っています。
[2017年1月1日の「うるう秒」挿入に際する注意喚起](http://server.sakura.ad.jp/news/sakurainfo/newsentry.php?id=1407)

本稿では、さくらインターネットで実施している対策、ならびにクライアント側でできる対策についてまとめました。

#うるう秒の挿入とは
通常、59秒の次は0秒がやってきますが、59秒の次に**60秒**が挿入されるのがうるう秒です。

しかしLinuxでうるう秒が挿入される場合、**59秒の次にまた59秒**がやってきます。

>8:59:58 → 8:59:59 → 8:59:59 → 9:00:00

※ただし特殊なタイムゾーン（例えばright/Asia/Tokyo）を利用すると8:59:60という時刻が刻まれます。

59秒が2度繰り返されるということは、ミリ秒単位で考えたとき、時刻が巻き戻って見えることを意味します。
※例えば `8:59:59.500` の900ミリ秒後は `8:59:59.400` となります。


ただし、この時刻の巻き戻りはクライアント側の設定で防止することができます。


##NTPクライアントのslewとstepモード
NTPクライアント(ntpd)の時刻同期モードには、`step`と`slew`の2つのモードがあります。

　**step** : 時刻のずれが発生した場合、すぐにその時刻にあわせる
　**slew** : 時間を巻き戻すようなことはせず、ゆっくりと時間を調整しつつあわせる

`step`モードの場合、NTPサーバより過去の時刻が通知されたとしてもそのまま時刻を合わせてしまうため、注意が必要です。
そのため、クライアント側で実施するうるう秒対策としては`slew`モードで動作させるのが良いでしょう。

#NTPサーバ側での対応
全てのNTPクライアントが`slew`モードで動作していれば影響はそんなに無いのですが、ntpdのデフォルトモードは`step`のため、そうもいきません。
ということで、NTPサーバ側でも対策を行う必要があります。

##leap smear
leap smearは、NTPサーバ側でうるう秒挿入に起因するトラブルを避ける技術で、ざっくり以下のような動作をします。

 - そもそもうるう秒予告は通知しない
 - うるう秒挿入によってずれた1秒は、NTPサーバ側でゆっくり追加して補正する
 - クライアントにはゆっくり補正された時刻を通知する

このような動作を行うことで、NTPサーバから通知される時刻が巻き戻ることは無くなり、仮にクライアントが`step`モードであったとしても、時刻の巻き戻りが無くなります。
※しかし、あくまでもクライアント側では`slew`モードとすることをおすすめします。

また、2012年のうるう秒挿入の際に発生したトラブルは、「うるう秒予告」に起因していたので、そもそも予告を通知しないこと自体が対策となり得ます。
（参考）[「うるう秒」挿入実施に伴うサービスへの影響について](https://www.sakura.ad.jp/news/sakurainfo/newsentry.php?id=655)



冒頭の注意喚起にも記載しているとおり、さくらインターネットのお客様向けに提供している `ntp1.sakura.ad.jp`では、leap smearを採用し、時間をかけてゆるやかに時刻補正する仕組みを採用しています。
※実は、leap smearは2015年7月1日に挿入されたうるう秒のときから採用を続けています。

## leap smearの注意点
いっけんleap smearは万能のようにも思えますが、そうともいえません。

NTPクライアントでは、複数のNTPサーバから時刻同期するように設定していた場合、その中でも信頼の高いものを採用するという動きをします。
このとき、leap smearを行うNTPサーバと、通常どおりうるう秒が挿入されるNTPサーバ両方を設定していた場合、leap smearを行うNTPサーバはゆっくり補正する都合上、1秒ずれて見えてるため、信頼性の低いNTPサーバ（falseticker）として扱われてしまいます。
falsetickerとなってしまうと、そのNTPサーバから通知された時刻が採用されることがなくなるため、**うるう秒が挿入されるNTPサーバ**の時刻が採用されることになってしまいます。

何はともあれ、まずはクライアント側で`slew`モードに設定するのが良いでしょう。

#まとめ
昨年、うるう秒がなくなるかも...という報道もあり期待していたのですが、結局無くならず存続が決まっています。

「うるう秒」当面存続　国際機関で決定
http://www.nikkei.com/article/DGXLASGM19H6H_Z11C15A1FF2000/


少なくとも2023年まではうるう秒の存続が決まっているので、仲良くお付き合いしていきたいです。
mocha + enzyme で React Native コンポーネントをテストする

React Native 開発でも mocha を使う理由
--------------------------------------

React Native ではテスティングフレームワークとして Jest が推奨されていますが、 Jest は Jasmine 系の API を受け継いでいることもあり、 mocha に比べると習熟が難しいことが難点です。 API を覚えるまでは `expect` に続けてどういった条件を書けるんだっけ、とリファレンスをあさる必要が出てきます。

https://facebook.github.io/jest/docs/api.html

こういったことを覚えずにすむ mocha は非常にコストパフォーマンスのよい技術です。単純に `assert` で満たすべき条件を羅列してやるだけでテストが書けます。テスト駆動開発で有名な @t_wada 和田卓人さんは <q>No API is the best API</q> とおっしゃっています。

https://speakerdeck.com/twada/from-library-to-tool-power-assert-as-a-general-purpose-assertion-enhancement-tool#10

ちなみに `react-native init` 時の Jest インストールは設定で抑制できます。

https://github.com/facebook/react-native/commit/8689b0f21cff74fd6c667d67554c7eb3df5eef30


React コンポーネントテスト用ライブラリー enzyme
-----------------------------------------------

React コンポーネントをレンダリングしてどういった仮想 DOM に展開されるかをエミュレートしてくれる enzyme というライブラリーがあります。基本は 1 段だけ展開する `shallow` を使うのですが、フルレンダリングすることもできます。

https://github.com/airbnb/enzyme

展開された仮想 DOM の構造が想定したものかどうか、というテストを書くわけです。ただし、実は enzyme もいろいろな API を持っています。

https://github.com/airbnb/enzyme/tree/master/docs

これではせっかく mocha を選んだ意味がないじゃないかと思うかもしれませんが、基本的に使うのは特定の仮想 DOM が含まれているかを確かめる `contains` と CSS セレクターで DOM を探すことのできる `find` およびテキストノードを取り出す `text` ていどで用がたります。

そもそもテストを書くべきコンポーネントというのが少ないと考えています。 React の思想に則って dumb なコンポーネント設計をしているのであれば、 props に対して決まりきった仮想 DOM を出力するコンポーネントがたくさん、それらを条件によって使い分けるコンポーネントが少数という構成になるはずです。個人的に後者のみにテストを書けば良いと考えています。なので、特定の条件を満たす props を入力としたときに、想定する仮想 DOM もしくはテキストノードを含むかどうかのチェックのみで済むことが多いのです。

ちなみに JavaScript フロントエンドを長く経験されている方はお気づきかと思いますが、 enzyme の API は古き良き jQuery ととても似ています。これは既存知識を使いまわせるため、テスティングライブラリーとしては筋の良い設計だと思いますが、 jQuery を知らない方々に使ってもらうにあたってはこういったことはまったく意味がありません。

サンプル
--------

mocha + enzyme で React Native 用にテストを書いたリポジトリーを次に用意しています。

https://github.com/januswel/mocha-sample

注意点として次が挙げられます。

- enzyme で React Native コンポーネントをレンダリングするために `react-native-mock` が必要
    - https://github.com/januswel/mocha-sample/blob/master/test/mocha.opts
- `.ios.js` や `.android.js` をうまくハンドリングできるように `PLATFORM` という環境変数で切り分けている
    - https://github.com/januswel/mocha-sample/blob/master/test/lib/extensions.js


まとめ
------

React コンポーネントだけのテストであれば Jest の `toMatchSnapshot` のみを使うという割り切りでもいいのですが、それ以外のロジックのテストを書くことを考えると mocha + enzyme という選択肢がコスパがよいと考えています。

https://facebook.github.io/jest/docs/api.html#tomatchsnapshot

今回は React Native にフォーカスしてのハナシでしたが、もちろん React で開発する際も mocha + enzyme は大安定です。ぜひ試してみてください。
WordPressで雪とサンタを降らせた話

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

みなさん、こんにちは。クリスマスも近くなってきましたね。

「[ニジボックス公式サイト](http://nijibox.jp/)に雪を降らせてちょ」
という要求があり、降らせることになりました。


WordPressで作っているので、選択肢は2つ

* JSゴリゴリ
* なんかいけてるプラグイン使う

なんですが、JSゴリゴリ書く時間と、本番マージ作業が面倒だったので

プラグインで完結する( ~~楽な~~ )道を。


## 実装
[WP Super Snow](https://ja.wordpress.org/plugins/wp-super-snow/)
というプラグインが比較的カスタマイズ出来るみたいなので、これ使いました。

ただ、実装は他の記事が紹介してるので、そこらへんは各自。

* 降らせる雪の画像
* 数
* 最大の大きさ
* 持続時間
* 透過エフェクト
* 出す日付など

がカスタマイズできます。

エンジニアなしで、ディレクターの方だけで完結できて素敵〜〜〜！！！


と思ったのですが、ふと

### 「クリスマスだし、サンタ降らないかな〜」

な要望が出てきたので、応えた話です。(**本題**)

#### 要求は以下
* 雪とサンタ、二つの画像を降らせたい
* でも、サンタはたまにしか出ないように

なんかカスタマイズないかなーって思いながらゴリ押ししました。

Super Snow の setting部分で
![setting.png](https://qiita-image-store.s3.amazonaws.com/0/99988/83209700-8b11-dd8b-d731-16fce45c7931.png)

**雪はたくさん**
**たまにサンタ**

って具合になりました！素敵!!

[サイト](http://nijibox.jp/)


もっともっとこだわりたいなーってなってくると
やっぱりJSガリガリのがいいかもなー。と思いました。
WebStorm PHPStorm で node_modules が表示されなくなったら…

PHPStorm で node_modules が表示されなくなったので　困っていました。

![スクリーンショット 2016-12-13 12.35.21.png](https://qiita-image-store.s3.amazonaws.com/0/27973/478f2c84-791e-44b5-c6d5-a723e0d9d64b.png)

phpstorm node_modules excluded や ｐｈｐstorm node_modules not showing など、
同様の問題で困っている人も多くいて、ググってみたものの、 2016.02 バージョンでのバグの話だったり、
逆に消したい系の話だったりでよく原因がわからない…

よくよく調べてみるとどうやらPhpStormのVue.js向けプラグインのバグだったようです。

https://github.com/henjue/vue-for-idea/issues/46#issuecomment-227340288

最近、PhpStorm 入れ直したためそこが原因かなぁ…と思いつつ、前使っていたときはそんなことなかったのになぁ…と思ってもう少し調べてみると、どうやらVue.js 向けのプラグインが複数あるよう。

![スクリーンショット 2016-12-13 12.43.05.png](https://qiita-image-store.s3.amazonaws.com/0/27973/4f8fa770-0925-980a-6b0a-2a530050a492.png)

https://plugins.jetbrains.com/plugin/8057

https://plugins.jetbrains.com/plugin/9188

node_modules が見えなくなる周りのバグを含んでいるのが `vue-for-idea` の方で、`Vue.js` の方は問題なく動作するようです。

IDEA派のVue.js使いの人はお気をつけください。
CSSのリストコンポーネントを最適化する

`ul`や`ol`タグはほとんどのWebサイトで使いますよね。リストのスタイルはひとつのサイトでも4~5種類くらいは作ることが多いと思います。例えば以下のように。

- `ul`の`list-style-type: disc;`をオリジナルの黒丸にする
- `ol`をネストごとに1や1.1のように表記を変えたい
- `※`や`注)`のように注釈用の役物などをつけたい
- `※1`のように順序をつけた注釈用のリストも欲しい

検索していてよく見つける実装方法としては、

- `text-indext: -1em`と`margin-left: 1em;`のようにしてインデントを取り、テキストを左揃えにする
- `padding-left`で余白をつけて`position`でリストスタイルを移動させる

といったパターンがあると思います。  
ただし、この方法だと半角と全角が混ざると微妙に余白が指定しにくかったり、構造的にあまり汎用的とは言えないところがあります。


## リストコンポーネントのベーススタイル

僕は以下のようなパターンをよく使っています。

```css
.c-list {
  display: table;
  padding-left: 0;
  list-style-type: none;
}

.c-list > li {
  display: table-row;
  &:before,
  & > span:before {
    display: table-cell;
  }
}
```

`::before`擬似要素にリストスタイルを表示します。`table-cell`がリストスタイルの表示領域を確保してくれるので`1em`のように数値を指定する必要がありません。複数行になってもテキストの左側は揃います。

[リスト要素を左寄せぴったりに配置するスタイルシートのテクニック | コリス](http://coliss.com/articles/build-websites/operation/css/css-align-lists-flush-left-by-jeremy.html)

※本来であれば`li`ではなく`.c-list__item`のようにしてもいいのですが、マークアップに制限のあるタグであることや、量産や運用がしやすいように要素セレクタに指定しています。

## Modifier
OOCSSにおける構造は用意できたので、見た目にあたるスタイルをModifierとして指定していきます。

デモは[Codepen](http://codepen.io/gaku/pen/pNLOQz)にまとめています。

### 注釈リスト
米印で注釈であることを示します。単純に`::before`に※を指定するだけです。

```css
.c-list--note > li:before {
  content: "※";
}
```

### 順序つき注釈リスト
注釈リストに順序をつけたい場合は`counter-increment`プロパティを指定します。リストスタイルとテキストの間に余白が欲しかったので`padding-right`を指定しています（`table`を使っているので`margin`は効きません）。

```css
.c-list--noteOrder > li {
  counter-increment: noteOrder;
  &:target {
    background-color: lightgray;
  }
  &:before {
    content: "※" counter(noteOrder);
    padding-right: 0.25em;
  }
}
```


### 丸括弧つき順序リスト
丸括弧などで囲いたい場合は`content`プロパティ内に入れてあげるだけです。

```css
.c-list--bracketOrder > li {
  counter-increment: bracketOrder;
  &:before {
    content: "(" counter(bracketOrder) ")";
    padding-right: 0.25em;
  }
}
```

### 入れ子対応順序リスト
入れ子に対応するには`counters()`関数を使います。

```css
.c-list--order li {
  counter-increment: order;
  &:before {
    content: counters(order, ".");
    padding-right: 0.5em;
    text-align: right;
  }
  & ol {
    counter-reset: order;
    padding-left: 0;
    list-style-type: none;
  }
}
```

### 背景画像アイコンリスト
黒丸などの任意のアイコンを背景画像として表示させるパターンです。SVGで用意しておきます。※Codepenのデモには含まれていません。

```css
.c-list--disc > li:before {
  content: "";
  background-image: url("/assets/img/icon_disc.svg");
  /* アイコンの大きさ */
  background-size: 1em;
  background-repeat: no-repeat;
  /* アイコンの大きさ + 余白 */
  width: 1.5em;
  height: 1em;
  /* アイコンの位置調整 */
  position: relative;
  top: 0.25em;
}
```

アイコンフォントでもいけますが、`content`の内容（例えば`"\EA01"`など）をスクリーンリーダーが読んでしまうと余計な情報が入ってしまうので、`li`のテキストの前に`span`を入れて、そこにアイコンフォントを表示させるようにするのがいいと思います。

```css
.c-list--disc > li > span:before {
  content: "";
  background-image: url("/assets/img/icon_disc.svg");
  /* アイコンの大きさ */
  background-size: 1em;
  background-repeat: no-repeat;
  /* アイコンの大きさ + 余白 */
  width: 1.5em;
  height: 1em;
  /* アイコンの位置調整 */
  position: relative;
  top: -0.25em;
  vertical-align: middle;
}
```

```html
<ul class="c-list c-list--disc">
  <li><span aria-hidden="true"></span>リスト</li>
</ul>
```
MAGELLAN BLOCKSでBigQueryのクエリをチェーンする

中間テーブルを作成し、分析するクエリを中間テーブルに対して実行するという操作は、パフォーマンス向上や料金の節約のためなどにBigQueryでそれなりによくやる操作です。
一度やるだけならBigQuery Web UIで適当にやればいいんですが、何度も実行する場合や、毎日一回自動でやるという処理をしたい場合、どこからクエリを投げるのか、ちょっと悩むところです。
Compute Engineのcronで設定すると、Compute Engine管理するのが面倒だし、App EngineやGoogle Scriptでやる場合は、そこそこロジック組んであげる必要があります。
ごりごりロジック書ける人は好きな方法でやればいいんですが、今回は適当にブロック繋いでいけば適当にやってくれる [MAGELLAN BLOCKS](https://www.magellanic-clouds.com/blocks/) でやるやり方を紹介します。

# 実行するクエリ

`bigquery-public-data:samples.natality` のテーブルに対してクエリを複数回実行します。
似たようなカラムに対するクエリを複数回実行する前に、必要なデータを抽出して中間テーブルを作ることで、読み込むデータサイズを小さくして、パフォーマンス向上とクエリ料金を節約する感じのものです。

``` sql
# 中間テーブル用のクエリ
SELECT
  year, state, mother_age, mother_race, drinks_per_week
FROM
  [bigquery-public-data:samples.natality]
WHERE
  state = 'WI' OR 
  state = 'CA' OR 
  state = 'CO'
```

``` sql
# COのデータを取得する
SELECT year, state, AVG(mother_age) AS avg_mother_age
FROM cpb200demo1:work.state_data
WHERE state = 'CO'
GROUP BY state, year
ORDER BY year ASC
```

``` sql
# CAのデータを取得する
SELECT year, state, mother_race, count(*) AS num_mothers
FROM cpb200demo1:work.state_data
WHERE state = 'CA'
GROUP BY state, year, mother_race
ORDER BY year ASC
``` 

``` sql
# WIのデータを取得する
SELECT year, state, avg(drinks_per_week) AS avg_drinks_wk
FROM cpb200demo1:work.state_data
WHERE state = 'WI'
GROUP BY state, year
ORDER BY year ASC
```

# ブロックの設置

ボードの作成までの手順は [公式のドキュメント](https://www.magellanic-clouds.com/blocks/guide/start/) に書いてあるので、BigQueryのブロックの設置から説明します。

まず、中間テーブルを作成するブロックを設置します。
クエリを実行するので、BigQueryの `クエリーの実行` を使います。

<img width="1230" alt="mb1.png" src="https://qiita-image-store.s3.amazonaws.com/0/15640/25b88523-41ab-d123-fd58-724febfc4c80.png">

次に分析用クエリのブロックを繋げていきます。

<img width="1231" alt="mb2.png" src="https://qiita-image-store.s3.amazonaws.com/0/15640/6652212b-fd40-9d21-aa83-ec91f242bf06.png">

この時便利なのが、拡張設定で、 `実行に必要なテーブル` のところに、中間テーブルを指定しておくと、そのテーブルがあるのを確認して、クエリを実行してくれます。

<img width="386" alt="mb3.png" src="https://qiita-image-store.s3.amazonaws.com/0/15640/c14b5c83-5991-7e5c-ad55-888e3f5f8769.png">

後は、投げたいクエリの数だけブロックを置いておけばOKです。

# おまけ

MAGELLAN BLOCKSの `クエリーの実行` ブロックはクエリ実行のプライオリティのデフォルトがバッチモードになっています。
おそらくDaily Batchとかで人がいない時に実行するのがデフォルトの思想にあるからだと思いますが、ブロック置いてテストしてる時は、インタラクティブモードの方がとっとと実行されて便利なので、拡張オプションからインタラクティブに変えてテストして、できあがったら最後にバッチモードにすれば良いと思います。

<img width="388" alt="mb4.png" src="https://qiita-image-store.s3.amazonaws.com/0/15640/eb11eef6-da9b-76a9-f43d-48e6dd581b0d.png">
Serverless+TypeScriptの開発環境を作る

[Serverless(2) Advent Calendar 2016](http://qiita.com/advent-calendar/2016/serverless2)の記事です。
投稿がギリギリになってしまいました。

私の現在携わっているプロジェクトではServerless+TypeScriptでアプリケーションを実装しています。
今のプロジェクトではまだserverless v0.5系なのですが、そろそろv1に移行したいと思っているので
serverless v1系とTypeScriptの組み合わせの開発環境を作って検証してみたいと思います。

# 環境

* serverless 1.3.0
* TypeScript 2.1.4

# 手順

## Serverlessでサービスを作成

```
serverless create --template aws-nodejs --name sls-ts-sample
```

TypeScriptの構成ファイルtsconfig.jsonを作ります。

```
tsc --init
```

## 型定義ファイルの導入

TypeScriptの型定義ファイル(d.ts)を読み込みます。
念のための補足ですが、TypeScript 2.0以降はtypingsを使う必要はなくなり
npmだけで型定義ファイルの管理ができるようになっています。 （⇒参考: [型定義ファイルのインストール方法(TypeScript 2.0版)](http://qiita.com/shundy/items/8a40d5f3bc6e22ea37f3) )
今回、aws-lambdaという型定義ファイルが用意されているのでそれを使用します。

```
npm i @types/aws-lambda
```

テンプレートから作成されたJavaScriptのハンドラーに相当するTypeScript用の**handler.ts**というファイルをプロジェクト直下に作成します。
先ほどインストールした`aws-lambda` という型定義ファイルをimportして、仮引数contextとcallbackの型を指定します。

```ts:handler.ts
import * as lambda from 'aws-lambda';

export const hello = (event: any, context: lambda.Context, callback: lambda.Callback) => {
  const response = {
    statusCode: 200,
    body: JSON.stringify({
      message: 'Go Serverless v1.0! Your function executed successfully!',
      input: event,
    }),
  };

  callback(null, response);
};

```

eventパラメータに対する型は提供されていないのでanyとしています。
プロジェクトフォルダ内で`tsc`コマンドを実行すればhandler.jsがコンパイルされるます。
これで普通にデプロイコマンドを叩けば正常にデプロイされると思います。

```
sls deploy
```

## --strictNullChecksを試す

また、最近null安全が話題のようですが、TyepScript 2.0以上だとNon-nullable typesの指定ができます。
tsconfig.jsonに`"strictNullChecks": true,`を1行追加してコンパイルしてみます。

```json:tsconfig.json
{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "strictNullChecks": true,
        "noImplicitAny": false,
        "sourceMap": false
    }
}
```

```
$ tsc

handler.ts(12,12): error TS2345: Argument of type 'null' is not assignable to parameter of type 'Error | undefined'.
```

残念ながらまだ型定義のstrictNullChecks対応がまたのようです。
あまり気持ちよくは無いですがcallbackの引数のnull⇒undefinedにすればコンパイルが通るようになります。

```ts:handler.ts
  // 修正前
  callback(null, response);

  // 修正後
  callback(undefined, response);
```

# 最後に

本格的に開発するならwebpackなどの設定も行った方がいいと思いますが
特に難しい設定はなくてもTypeScriptでの開発ができることが分かりました。


lambdaはまだNode 4.3のランタイムまでしかサポートされていないため
その為es5をターゲットにしていると一部対応していない文法があります。
早くNode 6も対応してくれるとありがたいなと思います。



<font color="red">2017/04/01 追記
AWS LambdaでNode.js 6.10がサポートされたようです。
参考：https://aws.amazon.com/jp/about-aws/whats-new/2017/03/aws-lambda-supports-node-js-6-10/</font>
今日からherokuでhubot運用

##背景
bot運用サーバー解約に伴って、移行ついでに　heroku　ってみる。

##結論
先に結論を言うと無料でもhubotの運用はできる。はず。

##では始めましょう
１. <b>S</b>ign up on heroku
https://www.heroku.com
クレジットカードの入力するだけで+450hの稼働時間をもられるのと、あとで使うaddon使えるようになるので入れましょう。

２. <b>I</b>nstall heroku cmd
https://devcenter.heroku.com/articles/heroku-cli
パッケージ取得してherokuコマンドインストール

３. <b>C</b>reate Project

```
$ heroku login
$ mkdir -p ~Dev/Heroku/hubot
$ cd ~Dev/Heroku/hubot
```

４. <b>I</b>nstall hubot

```
$ npm install -g yo generator-hubot
$ yo hubot
$ bin/hubot --name unko
```

５. <b>P</b>ush to heroku

```
$ git init
$ git add .
$ git commit -m 'first'
$ heroku create
$ vim Procfile
```
```Procfile:Procfile
web: bin/hubot --adapter slack
```
```
$ git push heroku master
```

６. <b>G</b>et Token of Slack
slackにてHubotを有効にして、tokenを取得

７. <b>S</b>et Config for heroku

```
heroku config:set HUBOT_SLACK_TOKEN={SLACK_TOKEN}
heroku config:set HUBOT_HEROKU_KEEPALIVE_URL={HEROKU_URL}
```

８． <b>L</b>et's Try

```slack:on_slack
@unko image me banana
```
![名称未設定.png](https://qiita-image-store.s3.amazonaws.com/0/29216/75bd5ee4-b37d-3cb5-1af6-fbacf8e1b4aa.png)

９. <b>S</b>et Custom Search on google
[下記を参照してください。]
http://qiita.com/hoto17296/items/f27ebf62c6015befdaa8
https://github.com/hubot-scripts/hubot-google-images#cse-setup-details

１０. <b>S</b>et CSE Conf

```
heroku config:set HUBOT_GOOGLE_CSE_ID={CSE_ID}
heroku config:set HUBOT_GOOGLE_CSE_KEY={CSE_KEY}
```

１１. <b>S</b>et Schedule Conf
bot君は定時退社

```
$ heroku config:add HUBOT_HEROKU_WAKEUP_TIME=9:30
$ heroku config:add HUBOT_HEROKU_SLEEP_TIME=18:30
$ heroku config:add TZ='Asia/Tokyo'
$ heroku addons:create scheduler:standard
$ heroku addons:open scheduler
```

１２. <b>S</b>et the Schedule Detail
タイムゾーンはUTCなのでJSTから-9hした値を入れてください。
![Heroku Scheduler.png](https://qiita-image-store.s3.amazonaws.com/0/29216/f7c84ef7-0451-4921-10b8-749e6e55fe05.png)

終わり
Microsoft Word + pandoc + git によるドキュメント管理

なぜ俺たちはこんなことをしなければならないのか

# 苦しみ
はじめに Word があった
Word は客と共にあった
Word は神であった

.docx 自体はただの zip ファイルで、解凍すれば xml 等が得られるのだが、それらは解読しがたく、変更差分の管理などは苦しみがある

git のドキュメントでも同じ苦しみについて言及されている
[8.2 Git のカスタマイズ - Git の属性](https://git-scm.com/book/ja/v2/Git-%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA-Git-%E3%81%AE%E5%B1%9E%E6%80%A7)

ここでは git の [textconv](https://git.wiki.kernel.org/index.php/Textconv) が用いられている
textconv を使うと、生ファイルではなく、それらを指定のコマンドに与えた結果(として出力されるテキスト)を diff に渡することができる
そこで、[docx2txt](http://docx2txt.sourceforge.net/) という.docxをテキスト変換するスクリプトを textconv に定義することでテキストの差分を得ている

Mac ならば、標準の [textutil](https://developer.apple.com/legacy/library/documentation/Darwin/Reference/ManPages/man1/textutil.1.html) を使い同様の事ができるだろう

これらによって差分を得ることはできるものの、プレーンなテキストで示される差分とドキュメント自体とを紐付ける苦しみは続く

# 啓示
[pandoc](http://pandoc.org/) に Docx reader が加わったことで、さらなる救いの道が示された

# 救済
pandoc はマルチプラットフォームなドキュメントフォーマット変換ツールであり、Windows用の.msiインストーラまで提供されている
そして、  .docx をインプットとして markdown をアウトプットできる
これによりプレーンなテキストよりは幾分まともな差分を得ることができる

```text:.gitattributes
*.docx diff=pandoc
```

```text:.gitconfig
[diff "pandoc"]
  textconv=pandoc --to=markdown
  prompt = false
[alias]
  wdiff = diff --word-diff=color --unified=1
```
```
git wdiff 糞糞.docx
```
pandocによる変換では、今のところ([pandoc 1.19.1](https://github.com/jgm/pandoc/releases/tag/1.19.1))図形は無視され、画像は連番の参照情報が残されるだけだが、見出し、リスト、表等は生存することができる

以上、よろしくお願いいたします

# 参考

- [Using Microsoft Word with git](http://blog.martinfenner.org/2014/08/25/using-microsoft-word-with-git/)
[Swifty]プロトコルを導入する

<p>テーブルビュー関連のコードを切り離す。</p>

<p>SourceTypeというプロトコルを作り、プロトコルエクステンションとして中身を実装する。</p>

<pre><code>protocol SourceType: UITableViewDataSource {
    func insertTopRowIn(tableView: UITableView)
    func deleteRowAtIndexPath(indexPath: NSIndexPath, from tableView: UITableView)
}
 
extension SourceType {
    func insertTopRowIn(tableView: UITableView) {
        let indexPath = IndexPath(row: 0, section: 0)
        tableView.insertRows(at: [indexPath], with: .fade)
    }
    
    func deleteRowAtIndexPath(indexPath: NSIndexPath, from tableView: UITableView) {
        tableView.deleteRows(at: [indexPath as IndexPath], with: .fade)
    }
}
</code></pre>

<p>データソースクラスに組み込む。</p>

<pre><code>class DataSource: NSObject, UITableViewDataSource, SourceType {
    private var document = Document.sharedInstance
    
    func addItemTo(tableView: UITableView) {
        if document.numberOfCards < 5 {
            document.addNewCard(at: 0)
            insertTopRowIn(tableView: tableView)
        }
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return document.numberOfCards
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! CardCell
        let card = document.getCard(at: indexPath.row)
        cell.fillWith(card: card)
        return cell
    }
    
    func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCellEditingStyle, forRowAt indexPath: IndexPath) {
        if editingStyle == .delete {
            document.deleteCard(at: indexPath.row)
            tableView.deleteRows(at: [indexPath], with: .fade)
        } else if editingStyle == .insert {
            // Create a new instance of the appropriate class, insert it into the array, and add a new row to the table view.
        }
    }
}
</code></pre>

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

関連情報
<a href="https://realm.io/jp/news/tryswift-daniel-steinberg-blending-cultures/">文化を調和させる</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 />
macのコマンドラインで『ssh user@host -p22』をキーボードで叩くのが面倒という貴方へ

# ssh_login.shというファイルを作り、下記をコピペしてください。

必要な箇所は変更してください。

* ~/.ssh/know_hosts にホストが追加されていないと上手動きません…調整中

```bash:ssh_login.sh
#!/bin/sh

USER="hogehoge"; #←ユーザー名
PASS="piyopiyo"; #←パスワード（自己責任）
HOST="127.0.0.1"; #←接続先ip
PORT="22"; #←接続先ポート
CD="cd ~/"; #←初回に開くフォルダ

expect -c "
set timeout -1
spawn ssh $USER@$HOST -p$PORT
expect \"password:\"
send \"$PASS\n\"
expect \"Last login:\"
send \"$CD\n\"
interact
"
```
amp-imgのルール

AMPのタグの一つであるamp-imgタグのルールを備忘的に記述。

## 使用方法
pタグで囲み、widthとheightは固定値を指定する

```html
<p>
  <amp-img 
    src="example.jpg"
    width="500"
    height="300">
  </amp-img>
<p>
```

さらに色々な属性を指定することができる

## layout属性
### respomsive
画像のアスペクト比を保ったまま拡大・縮小をしてくれます。

```html
<p>
  <amp-img
    src="example.jpg"
    width="500"
    height="300"
    layout="responsive"
  </amp-img>
<p>
```

### fixed
width heightで指定した通りのサイズに固定される

```html
<p>
  <amp-img
    src="example.jpg"
    width="500"
    height="300"
    layout="fixed"
  </amp-img>
<p>
```

### fixed-height
高さが固定される。アスペクト比は考慮されないので注意。
widthは指定しないかautoにする

```html
<p>
  <amp-img
    src="example.jpg"
    height="300"
    layout="fixed-height"
  </amp-img>
<p>
```

### fill
ドキュメントに収まるように高さ、幅が調整される。親要素ではないので注意。
width heightを指定してはいけない。

```html
<p>
  <amp-img
    src="example.jpg"
    layout="fill"
  </amp-img>
<p>
```

## serset属性
ser属性をserset属性に変えると指定の幅によって表示させる画像を切り替えることが出来る。
しかしAMPはスマホ用なので使うのかどうか...


```html
<p>
  <amp-img
    srcset="/s.jpg 699w
	    /m.jpg 948w,
	    /l.jpg 1200w"
    width="500"
    height="300">
  </amp-img>
<p>
```
深層学習の数式の紹介

深層学習(DeepLearning)とは深い層の学習という名の通り、多層のニューラルネットワークを用いた学習方法です。ニューラルネットワークを学習することはニューラルネットワークを学習することに等しいので、関連した数式を簡単に説明していきます。


ちょっとぼーっとしてたら日にちになってしまって、中途半端な状態で公開してますが、ちゃんと更新します。ごめんなさい。


###単層パーセプトロン
出力値は0または1をとります。
入力に対して、閾値θを超えたら発火するという単純なモデルですが、深層学習を始めとするニューラルネットワークの基礎となっています。

```math
\begin{align}
&\thetaを閾値とします。\\
&(x_1,x_2は入力値)\\
&(w_1,w_2は重み(weight))\\
&y = 0\,(w_1x_1+w_2x_2 \leq \theta)\\
&y = 1\,(w_1x_1+w_2x_2 \gt \theta)\\
\end{align}
```

###順伝播型(ニューラル)ネットワーク
>順伝播型（ニューラル）ネットワーク(feedforward neural network)は、層状に並べたユニットが隣接層間でのみ結合した構造を持ち、情報が入力側から出力側に一方向にのみ伝播するニューラルネットワークです。文献によっては多層パーセプトロン(multi-layer perceptron)と呼ばれます。
>(*1より抜粋)

```math
\begin{align}
& u_j=\sum_{i=1}^{I}w_{ji}x_i+b_j\\
& z_j=f(u_j)\quad(u_jは総入力)\\
シグモイド関数(ロジスティックシグモイド関数とも呼ばれる)\\
活性化関数として利用されます。\\

&f(u_j)=\frac{1}{1+e^{-u}}\quad(fが活性化関数)\\
\\
数式の説明としては、u_jが入力ユニットになり、iが & 第1層のユニットi=1,2,3\cdots=I\\
& 第2層のユニットはj=1,2,3\cdots=J\,となります。
\end{align}
```



##引用文献
(*1) 機械学習プロフェッショナルシリーズ 深層学習
著者　岡谷貴之
【Swift3】Xcode 8.2 にした途端、謎のエラーで落ちる問題

#環境

Xcode8.2
Swift3.0

#Xcode8.2

Xcode8.2が2016年12月12日にアップデートされたので入れました。
変更点などは[Xcode 8.2 Release Notes](https://developer.apple.com/library/content/releasenotes/DeveloperTools/RN-Xcode/Introduction.html)を参照してください。

#起こったこと

今回何が起こったかと言うと、Xcode8.2で今までのプロジェクトを起動しました。すると、Bildができません！！
Bildのエラーを見てみると、

```
“Use Legacy Swift Language Version” (SWIFT_VERSION) is required to be configured correctly for targets which use Swift. 
Use the [Edit > Convert > To Current Swift Syntax…] menu to choose a Swift version or use the Build Settings editor to configure the build setting directly.
```
と出ていました。

#解決策

まず初めに、文章で言われているようにやってみました。
具体的には、Xcodeの画面左上にある``Edit``を選択して、``Convert``の中の``To Current Swift Syntax…``を選ぶ、という手順です。
結果は、**失敗!!!**
消えるどころか、他のエラーがいくつか出てきてしまいました^^;

#本当の解決策

いろんなサイトをググりまくった結果、解決策を見つけました！
stack overflowに書いてあったのですが、

>Found work around. I went through each target (and project settings, so both in the project and 
>target) in my project, toggled the "Use Legacy Swift Language Version" from "No" to "Yes" and 
>back to "No" for each. The project then built again.

http://stackoverflow.com/questions/41118912/use-legacy-swift-language-version-xcode-8-2

とのことです！

つまり
Build Settingの
"Use Legacy Swift Language Version" を``No→Yes→No``と変更して、Bildすれば解決すると言うわけです！

なんとも不思議な解決方法ですが、無事これで僕のは動きました！
GitHubからpullしてきてVPSやlocalhostでLaravelが使えない時

#はじめに
VPSやLocalにGitHubからpullをしてくると、Laravelがうまく機能していないことが多い。今回はその解決策をGitHub上で管理している**リモートリポジトリにLaravelはインストールされて使えることを前提に**してこの記事を書いた。

#.envを作ってあげる
GitHubからpullなどの操作によってVPSやlocalリポジトリにある**`.env`ファイルは動作環境に対する設定値である**持ってこれない。つまり**手動で作る必要がある**。GitHubでバージョン管理をしている人は、**`.env`はバージョン管理の対象から外す必要である。**そのため、`.env_example`があることを利用して`.env`ファイルを作る。

```Bash:terminal
$ cp .env.example .env
```

#composerをインストールする
Laravelを動かすにはcomposerをインストールする必要がある。
以下のコマンドを実行することでインストールできる。（すこし時間がかかる）

```Bash:terminal
$ ./composer.phar install
```

上記によってVPSおよびローカル環境でLaravelが動くようになる。

#ローカルサーバーを立ち上げる(ローカル環境で開発者向け）
次のコマンドによってローカルサーバーを立ち上げることができる。

```Bash:terminal
$ php artisan serve
```

もし仮にうまくローカルサーバーが動いてない時は以下のコマンドによってキーを作成し、再度コマンドを打つ。

```Bash:terminal
$ php artisan key:generate
$ php artisan serve
```

である。これによってローカルサーバーによって開発ができるようになる。
TensorFlow(+Keras)がWindowsで簡単にインストールできた件

Googleのブログで[TensorFlow 0.12 が Windows をサポート](https://developers-jp.googleblog.com/2016/12/tensorflow-0-12-adds-support-for-windows.html)とあったので、試してみると簡単にできました。

#実行環境
[以前にインストールしたもの](http://qiita.com/samacoba/items/7fa5883d7d715aeabd53)になります。

 - Windows 10 Professional 64bit
 - Anaconda3 4.2.0 (Python 3.5)　⇒　CPU版、GPU版どちらでもpython3.5が必要
 - GeForce GTX 1070　⇒　GPU版に必要
 - CUDA Toolkit 8.0 (8.0.44)　⇒　GPU版に必要
 - cuDNN 5.1　⇒　GPU版に必要


CPU版でとりあえず試したい方は[こちらより](https://repo.continuum.io/archive/.winzip/)「Anaconda3-4.2.0-Windows-x86_64.zip」をそのままイントールしてください。python3.5やJupyterなどがインストールされます。

#Tensorflowのインストール
Windowsスタートメニュー ⇒ Anaconda3 (64-bit) ⇒ Anaconda Promptを立ち上げ、以下のpipコマンドを実行すると、CPU版、GPU版どちらもインストールできました。

- CPU版
 
```
C:\> pip install tensorflow
```

- GPU版

```
C:\> pip install tensorflow-gpu
```
![インストールtensor.PNG](https://qiita-image-store.s3.amazonaws.com/0/109458/8f72cdb8-0d4a-8624-79ea-d311b23b64b5.png)


#Jupyter操作方法
Anacondaをインストールするとブラウザ上でコードを編集・実行できるJupyterが一緒にはいります。コードをコピペで実行できるので、とりあえず動かすにはとても便利です。簡単な操作方法を書いておきます。

Windowsスタートメニュー ⇒ Anaconda3 (64-bit) ⇒Jupyter Notebook
で下のようにブラウザでJupyterが立ち上がります。

![20170320_jupyter1.png](https://qiita-image-store.s3.amazonaws.com/0/109458/ddba0fa5-449c-2f45-0df6-ab3dba46da6a.png)

立ち上がったブラウザの右上の「New」の「python(default)」をクリックすると
下のような画面が出てきてきます。下のは１＋２を計算させた例になります。

![20170320_jupyter2.png](https://qiita-image-store.s3.amazonaws.com/0/109458/25f94496-1e86-3e15-5f99-bbc9633fa1ae.png)



#TensorFlow MNISTサンプルの実行

[こちらから](http://qiita.com/samacoba/items/c3291addba06ea6206c1)MNISTのサンプルをJupyterにコピペして実行すると計算されます。
※mnistのデータのダウンロードが最近重いことが多いので、途中で止まっているような感じに見えても、そのままおいてみてください。


CPU版とGPU版両方入れたのでどちらで計算されているかと思い、[負荷を見てみる](http://qiita.com/samacoba/items/368d67f2d7d4e11abdf7)と、どうやらGPU版で計算されていたようでした。

![tensor.PNG](https://qiita-image-store.s3.amazonaws.com/0/109458/53f87aa6-ab49-1933-2f1e-b2121151044a.png)


#Kerasもインストール
簡単だったのでついでにKerasもインストールしてみました。
Anaconda Promptにもどって以下のコマンドでKerasはインストールでき、バックエンドは自動的にtensorflowになります。
```
C:\> pip install keras
```

[公式の方からMNISTサンプル](https://github.com/fchollet/keras/blob/master/examples/mnist_cnn.py)をJupyterにコピペして実行できました。

![keras2.PNG](https://qiita-image-store.s3.amazonaws.com/0/109458/01927e4e-7f53-1f44-f344-f5b8277f87ca.png)




#更新・追記など
＜2017/3/20変更・追記＞

- 2017.3.20現在 Windowsではpython3.6のtensorflowがpipでインストールできないようなのでpython3.5をインストールしてください

- [前のリンク先](http://domkade.hatenablog.jp/entry/2016/04/07/011016)のTensorflowのmnistのサンプルは警告が出てたので、[新しくコピペしたものを作りました](http://qiita.com/samacoba/items/c3291addba06ea6206c1)。

- Kerasのデフォルトのバックエンドがtheano⇒tensorflowになっていたのでバックエンドの変更は[「Keras バックエンドの変更」](http://qiita.com/samacoba/items/3e29f0ac61c2f369892b)に分離しました。

- TensorflowやKeras、Chainerなど最近メジャーアップデートが多いですが、複数の環境を[Anaconda で切り替えて使う方法](http://qiita.com/samacoba/items/400f450f06c1e53a4b66)の記事も参考にしてみてください。
Yapc::Hokkaido 2016 セミナールームCでのサテライト中継

YAPC::Hokkaido2016でC会場を担当していました。
ここは電源を提供することを主目的とし、併せてA会場のサテライトとしての役割も担うことになりました。
ここではサテライト中継の構成について書きます。


# システム構成

<送信側>

各ソース
　↓
Rolandのミキサー
　↓
USB接続で音声と映像を取り込み
　↓
Let's Note CF-Y8 (Core2 duo / 2GB mem / Windows10) + Skype
　↓
WiFi AP


<受信側>

WiFi AP
　↓
Intel Stick PC (Atom / 2GB mem / Windows10) + Skype
　↓
HDMI
　↓
会場備え付けのProjector
（音声はBluetoothで接続したBoseスピーカーから再生）


# ソフトウエア

前日に諸々な手段を検討した結果、今回はSkypeが最適であるという結論となりました。


# 回線

会場Wifiも使えたのですが、利用者が多い想定[^1]でもあり、実行委員長判断でWiFiルータで公衆回線を経由させることとなりました。

実際、回線はギリギリの感じで、Skypeからも回線品質は「低」で赤いアイコンが出ている状況でした。

[^1]: 実際には悪天候のため、飛行機の欠航が相次ぎ、欠席者続出であったが、延べ参加者数は180人以上となった。

# 品質等

まあそこそこ。
低コスト(作業コスト的に)の割にはよかった。
文字が小さいものはつらい。
文字が大きなものは十分いける。
音声は十分に聞こえる。


# 利点

SkypeだからP2Pなので、原則非公開のチャネルが維持できる。
回線品質が低いなりにコンテンツをコントロールするので、およそ連続８時間程度の中継を行ったが、一度も回線が切れることはなかった。
何とか乗り切りました。
git pull でデプロイする時ハマったこと

そろそろバージョン管理の必要性を感じ、Git学習中なのですが、`git pull`でデプロイする環境を作るにあたって、理解不足でハマったため、今後のためにメモしておきます＾＾；
実際の作業はリンク先参照。

#`git pull`でデプロイとは？

すでに多くの記事がありますが、ローカル環境から、リモート環境へ`push`した際、Web環境等へコンテンツやスクリプトを自動的に`push`し配置するための仕組みを言っています。
一般的には以下の手順で行うようです。

1. コンテンツやスクリプトの配置領域を`git init`で working tree 化する（今回コンテンツ用リポジトリと呼びます）
1. 非公開領域に`git clone --bare --shared`でベアリポジトリを作成（今回管理用リポジトリと呼びます）
1. 管理用リポジトリのフック（hooks）に post-receive を作成し、実行権限を付与
1. ローカル環境から`push`し、コンテンツ用リポジトリに意図通り反映されていれば完成

最終的に参考にしたのはこちらのサイトでした。ありがとう＾＾
[ベアリポジトリとノンベアリポジトリ：理論編〜GitでWordpressのテーマを管理](http://www.nekotricolor.com/entry/theory-of-bare-and-non-bare-repository-manage-wordpress-themes-with-git)
[ベアリポジトリとノンベアリポジトリ：実践編〜GitでWordPressのテーマを管理](http://www.nekotricolor.com/entry/practice-of-bare-and-non-bare-repository-manage-wordpress-themes-with-git)


#ハマったトコロ
いろんな情報に左右されながら、作業したため、かなり時間がかかってしまいました。Gitの挙動と問題解決方法を理解していなかったのが致命的でした。

+ コンテンツ用リポジトリに更新が反映されない（post-receive 編）

原因は2点。post-receive に実行権限がなかったのと、post-receive 内の挙動でコンテンツ用リポジトリのディレクトリに移動後、git コマンドがうまく動作しなかったことが原因でした。

前者は実行権限を与えることで解消。post-receive の挙動の切り分け方法が分からず、原始的な方法（実行コマンドを `echo 'aaa' > ~/test.txt` に差し替え）で切り分けしました。ログとかってどこに出るんだろ。。。

後者は git コマンド実行前に`unset GIT_DIR`を入れることで解消。コマンドラインからの入力の場合、正常に動作していたため、`unset GIT_DIR`の情報にたどり着くまで、結構悩みました。

+ コンテンツ用リポジトリに更新が反映されない（ケアレスミス編）

切り分けの途中で、コンテンツ用リポジトリ側のファイルを更新してしまっていたため、`pull`がうまく動作していませんでした。ケアレスミスですね＾＾；全然気が付かず、かなり時間をかけてしまいました。。。

# 課題

Gitの根底の理解が出来ていないので、ちゃんと時間を取って、学習する必要がありそうです。
特に挙動を追うための手段があるのかないのかもわかっていないので、そこからかなぁ。

最近物覚えが悪く、同じことでつまずくので、ハマったシリーズでも作ろうかと思ってます。