OmniAICreator/Qiita-1.07M huggingface dataset:
初心者プログラマーがひと皮剥けるためにやるべき14のこと

こちらは[qnote Advent Calendar](http://qiita.com/advent-calendar/2015/qnote) 20日目の記事となります。

会社のAdvent Calendarらしく、初心者プログラマー向けのアドバイスをまとめてみました。
翌日の内容と被ってたらスミマセン。狙ってテーマを被せたわけではありません。スミマセンパイ。

# 心がけ編

## 1.プログラミングに興味を持つ
まずはコレです。

職業プログラマーではなく、プログラミングに興味を持ち、プログラミングを好きになってください。
きっかけは難しいですが、これがステップアップの一番の近道です。

身につけたプログラミングの技術は、何も仕事にだけ使わなくても良いのです。
アプリやゲーム、サービスを趣味で作ってみるなど、プログラミングの技術が活かせることは沢山あります。
好きなものを作るのはきっと楽しいですし、うまくやれば副収入も得られますよ。

## 2.怠惰は素質
「何もかもめんどくせー」というのはプログラマーとして良い素質です。

100個のファイルを1つずつ手でリネームする、数千件のExcelデータを1行ずつ手でいじる、そんなものはクソくらえです。
プログラムを使って、もっと楽に解決する方法を考えましょう。

楽するために苦労する、これはプログラマーの本質とも言えます。

## 3.俺イケてるって思え
自分に自信を持つことはとても重要です。
いい感じのコードが書けたら、自分をイケメンだと思い込みましょう。

そして、自信を付けたところでもっと凄いコードを見つけて、「俺ぜんぜんダメだ」ってなってください。
ダメだってなったら、ひたすら勉強しましょう。

イケてると思い続けるためには日々の努力が欠かせないのです。

# 注意すること編

## 4.コードは必ず「他人」が見ることを意識せよ
仮に誰にも見られる余地がなくても、その場凌ぎの汚いコードで済ませるのは出来るだけ避けましょう。

半年後にあなたはそれを見て「なんだこのクソコード！誰が書いたんだ！！」と思ってしまうからです。

半年も経つと、もはやあなたは「他人」になってしまうのです。

## 5.リファクタリングは思い立ったらすぐ実行
コード汚いなーって思ったら、出来るだけ早い段階で直しましょう。

放っておくと、そのコードはあなたのティータイムをファイヤーでバーニングな時間に変えてくれます。
食後のコーヒーくらいゆっくり飲みたいですよね？

## 6.コーディングルールを守るべし
コーディングルールが守られていないコードは、それだけで「品質が悪い」という烙印を押される可能性があります。
基本的な部分が統一されていないと、プログラム構造の一貫性も期待出来ないからです。

特別な理由が無ければ、言語やフレームワークのコーディング規約に沿うのをオススメします。
複数人数で開発する場合は、特に気を付けた方が良いでしょう。

## 7.ログを収集しよう
ちゃんと動いてるからログなんて要らない？
いやいや、それヤバイですよ。

バグってやつは想定外のところで発生します。（というか想定内のバグなんてありません）

ログがあれば、バグが発生したときの対応が格段に楽になります。

せっかくの休日を不具合対応で潰してしまわないよう、ログは出来るだけとっておきましょう。
後から追いづらい部分は特に、です。

## 8.トレンドに流され過ぎない
トレンドはステキです。
素敵な設計、素敵なフレームワーク、日々色々なトレンドが生み出されています。

でもちょっと落ち着いて、それがホントに良いものかどうかを考えてみましょう。
最先端を走るのも重要ですが、安定性を求めるのであれば枯れた技術の方が確実です。

何でもかんでも食いつくのではなく、要はバランスが大切ということです。

## 9.TODOリストを作る
人間の記憶力なんてたかが知れてます。
私もメシ食ったら自分の名前以外全部忘れてた、なんてことはザラです。
（ウソですすみません。）

やるべき事が思い浮かんだら、忘れないうちにTODOリスト化しておきましょう。
コード中のTODOコメントも積極的に書きましょう。

# やってみよう編

## 10.既存アプリの仕組みを想像してみよう
アプリでもゲームでもWebサイトでも、気に入ったものがあるなら仕組みを想像してみてください。

ここは多分こういう仕組みで動いているのだろう、自分だったらこう実装するだろうな、ここは仕組みがさっぱりわからない　など、想像するだけでも得られることは沢山あります。

そして、想像がついた部分は雑でもいいので試しに実装してみましょう。
手を動かすと、もっともっと得られることが増えます。

## 11.勉強会に参加してみよう
たまには仕事を早めに切り上げて、勉強会に参加してみて下さい。

無料の勉強会はたくさんありますので、コストはかかりません。
勉強会の後に懇親会があったりしますが、苦手なら帰ってしまってもOKです。

勉強会に参加すると、知識はもとより、素敵な出会いなんかも得られるかもしれません。

## 12.当たり前をアウトプットしよう
あなたが当たり前だと思っている知識が、誰かにとっては得難いものかもしれません。
ちょっと手間はかかりますが、積極的にアウトプットしていきましょう。

アウトプットの機会を増やすと、必然的に調べごとをする機会も増えます。
誰かの役に立つだけではなく、自分のためにもなるのです。

## 13.ユーティリティクラスを作る前にメソッドやライブラリを探してみよう
初心者のうちは特に、自分が頑張って実装したユーティリティクラス（便利メソッド群）が言語デフォルトのメソッドとして存在していたり、他の人がライブラリを作っていたりすることが往々にしてあります。
（特に、配列をいじりまわす処理などで非常にありがちです）

配列制御・日付制御などのありがちな処理は、作る前にGoogleやgithubなどで検索するときっと幸せになれます。

## 14.ユーザの立場で考えてみよう
どんなアプリでも、必ずユーザが存在します。

クライアント（依頼主）の要望は出来るだけ聞いてあげるべきですが、クライアントが何をしたいかって言うと、最終的にはアプリをユーザに使ってもらいたいわけです。

単純にイエスマンになるのではなく、ユーザの立場に立って積極的に議論しましょう。
請け手としてではなく主体的に考えることで、クライアントにも評価される可能性が上がります。

# まとめ
例えソロ開発であっても、プログラミングは自分の力だけで進められるものではありません。

技術書を買って勉強する場合は、著者の方がまとめた情報に頼ることになります。
インターネットで検索する場合は、見知らぬ先人たちがまとめた情報に頼ることになります。
むしろプログラミング言語を使う時点で、言語開発者のまとめた情報に頼ることになります。

プログラミングは人同士の助け合いによって成り立っているのです。

偉大なる先人たちに学び、後輩たちにもぜひ何かを残せるよう頑張りましょう。
Go(pher) vs D(-man)

有史以来，プログラミング言語のマスコットキャラクターの王座にD言語くんが君臨し続けていることは皆さんご存知のことかと思いますが[^1]，近年Gopherの勢威が増し続けていることが指摘されています[^2]．そこで本当の王者は一体誰なのか調べるため，我々はMaker Faire Tokyo 2015へと向かいました．

そこで我々を待ち受けていたのはIntel Edisonのブースにあった[「召喚らくがきモンスターズ」](http://edison-lab.jp/showcase/coconoe/)というゲームでした．自分が描いたキャラクター同士で戦えるとの情報に，調査班は動揺を隠せませんでした．我々がGopherとD言語くんを対決させるという結論に至ったことも，無理はないものでした．

技術的な詳細は上のページに載っているのでぜひご覧ください．なんとソフトウェアはオープンソースとして公開しているようです[^3]．すごい！

「召喚らくがきモンスターズ」の周りには人がたくさん集まっていて，プレイの順番待ち行列が連なっていました．列に並んでいる合間に手のひら大のシートに好きなキャラクターの絵を描いて，順番が来たらいざゲームの始まりです！「魔法の書」というコントローラーのスキャナ部分にキャラクターシートを重ねて，マイクに「召喚！」と叫んだら画面の中でキャラクターが命を吹き込まれます！移動方法は「魔法の書」は手をかざすことでその方向に移動させるというものでした．マイクに向かって「パンチ」・「キック」と言ったり技名を叫んだりすることで相手に攻撃をすることができました．「こなくそ」とか「むむむ」とか思わず言葉が出ちゃったときも反応して技が出てたので正確性よりも反応性を重視しているのでしょう．ラグもなく，自分の操作に従って画面内のキャラクターがとても気持ちが良いものでした．

では，実際の勝負を見てみましょう．僕が描いたキャラクターはもちろん！
![gopher001.jpg](https://qiita-image-store.s3.amazonaws.com/0/11714/81063104-e4d8-bfe3-7b46-03feb021287f.jpeg)

**＿人人人人人＿
＞　Gopher　＜
￣Y^Y^Y^Y￣**
フハハハハ！！！あのDに手足がついただけのふざけたやつを粉砕してやるのだ！！！！

勝負の初めはD言語くんが優勢な展開でした．しかし，途中でGopherの技が連続で決まり，体力の有利を奪います．その後，お互いが必殺技を出す展開になりましたが，D言語くんの必殺技は不発！Gopherの一撃が決まって勝ちました！やったーーー！！
<div>
<figure>
<img src="https://qiita-image-store.s3.amazonaws.com/0/11714/58216918-bf40-b15e-8f68-131f71785626.jpeg" width="480" />
<figcaption>召喚されるD言語くん</figcaption>
</figure>
</div>
<div>
<figure>
<img src="https://qiita-image-store.s3.amazonaws.com/0/11714/e4a7c836-2e88-a06b-e7d3-601da9a1f849.jpeg" width="480" />
<figcaption>必殺技を打ち合う</figcaption>
</figure>
</div>
##着地攻めされるD言語くん
![着地攻めされるD言語くん](https://i.gyazo.com/0a21579b454d1fa8d088184799ce04d4.gif)

##Gopherの必殺技に倒れるD言語くん
![Gopherの必殺技に倒れるD言語くん](https://i.gyazo.com/711f2a16b8047ad5bc8c9d508402d994.gif)


[^1]: 要出典
[^2]: 誰によって？
[^3]: https://github.com/edison-lab/intel-edison-coconoe-monsters
SharedMemory と Atomic API について

# SharedMemory と Atomic API について

このエントリは [JavaScript stage 0,1,2,3 Advent Calendar 2015](http://qiita.com/advent-calendar/2015/esnext) の 19日目の記事です。

**ちなみに stage 1 です。**

![image](https://qiita-image-store.s3.amazonaws.com/0/6031/a928bf99-e13f-f016-8674-5f8481bec80b.png)

SharedMemory は SharedArrayBuffer と呼ばれる特殊な ArrayBuffer をインタフェースにして提供されます。さらに、 Atomic API というのはこの SharedArrayBuffer を操作するための Atomic という built-in Object です。

ちなみに Node.js v4.0 以降なら `--harmony-sharedarraybuffer` と `--harmony-atomics` で有効になります。 (Worker がないので無意味ですが)

# 背景

基本的に WebWorker に代表される Worker は shared nothing、 つまりメモリを共有せず、値をコピーしてpostMessageなどでWorker間で協調しながら値を共有してきました。

このやり方はシンプルですが、コピーせず Worker 間でメモリを共有できたほうが効率的です（もちろん共有するな協調せよという考え方もあります）。

また　SharedArrayBuffer を扱うためにはWorker間でのリソースの競合を防ぐ必要があります。これを可能にするために入っているのが Atomic API です。

こちらは SharedArrayBufferで作った配列に対して Atomic な操作を提供します。配列に対してadd/sub/and/or等の操作をする際に他のWorkerが操作していないか確認しロックを取る仕組みになっています。仕様によれば、futexの仕組みを使ってロックを取ると記述があります。

# SharedArrayBuffer を共通化する

```js
// main.js
var worker = new Worker("worker.js");
var sab = new SharedArrayBuffer(1024); 

worker.onmessage = function(e) {
  console.log(e.data);
};

worker.postMessage(sab, [sab]);
```

```js
// worker

var sab;
onmessage = function (ev) {
   sab = ev.data; // data が共有化される。
}
```

こんな感じで SharedArrayBuffer を共有します。直接 data の配列を変更すると値が修正されます。ただしその場合、 Atomic な操作じゃないので別な worker が変更してしまうと競合が発生する可能性があります。

競合を回避するのが Atomic API です。 Atomic API は下記のようにして使います。

# Atomic API

```js
// SharedArrayBuffer and Atomics
// use flag --harmony-sharedarraybuffer --harmony-atomics

var sab = new SharedArrayBuffer(4); // SharedArrayBufferを作る
var uint8Array = new Uint8Array(sab); // Integer Shared Typed Array になる
for (i = 0; i < 4; i++) {
  uint8Array[i] = i;
}

uint8Array.forEach((x) => console.log(x)); // 0, 1, 2, 3

Atomics.add(uint8Array, 2, 10); // index 2 に 10 を足す
Atomics.sub(uint8Array, 3, 3); // index 3 から 3 を引く
Atomics.compareExchange(uint8Array, 0, 0, 1); // index 0 が 0 なら 1 にする
uint8Array.forEach((x) => console.log(x)); // 1, 1, 12, 0

console.log(Atomics.load(uint8Array, 2)); // 12 index 2 の値を get する
console.log(Atomics.store(uint8Array, 2, 19)); // 19 index 2 の値を19に書き換えて書き換えた値をgetする
uint8Array.forEach((x) => console.log(x)); // 1, 1, 19, 0
```
Kicadの小技（DXFから外形取り込み）

KiCadを使いはじめて、2年くらい経ちました。
基板外形の取り込みが出来ないものかと悩んでいましたが
ハンガリーの方が、非常に素晴らしいソフトを提供されているのを発見しました。

○DXF to SVG to KICAD_PCB converter

https://monda.hu/2013/08/07/dxf-to-svg-to-kicad_pcb-converter

使用方法

1．基板外形をCADソフトで描いて、DXFフォーマットで保存する。
私は、VectorWorksとjw_cadを使用して、DXFを出力と変換をしています。
![00.png](https://qiita-image-store.s3.amazonaws.com/0/103701/a84099bb-ec86-d984-2bb9-f5c6a921dbc9.png)


2．作成したDXFファイルを開く。
3．画面に描いた基板外形図が表示されます。

![01.png](https://qiita-image-store.s3.amazonaws.com/0/103701/bc2f294a-cae6-2057-e260-08a7f0910abf.png)


4．「Advanced options...」をクリックします。
5．Layer to be used is を「edge.cuts」を選択します。
![02.png](https://qiita-image-store.s3.amazonaws.com/0/103701/d889695d-7cc1-0684-02ae-1d019357b2e9.png)



6．Translate drawing byの値で、基板外形の位置を調整します。
7．Save the converted SVG or KICAD_PCB file.で「KICAD_PCB file」をクリックして
ファイルをダウンロードする。
8．KiCadのpcbnew画面で、「ファイル」→「ボードを追加」で７．でダウンロードしたファイルを選択する。

![03.png](https://qiita-image-store.s3.amazonaws.com/0/103701/81334c83-3f43-43e0-2e45-af4aceab4f1f.png)

9.pcbnewで、最終的な位置調整をします。
![04.jpg](https://qiita-image-store.s3.amazonaws.com/0/103701/af91bb7a-68a7-e39b-d7b4-08dcfee3c072.jpeg)

*追記*　寸法線は、図示の為入力しました。

画像ファイルを用意していたのですが、どうもアップロードがうまく動作しなくて、掲載を断念しました。
公開が大変遅くなり申し訳ありません。
どなたか、画像の投稿の仕方を教えていただけたら幸いです。

*追記*　何か具合が悪かったのか、画像を掲載することができました。

明日（本日）は、回路図エディタBSch3Vのネットリストの活用事例についてご紹介いたします。

*追記*　遅い時間になりますが、ご了承ください。
JUNOSのパスワードを忘れた時の対処


自宅にあるSRX210のパスワードを忘れてしまったのでメモ

# リカバリー

コンソールで繋いで、電源を入れます。

以下のメッセージを表示した際にスペースを押す。

```
Loading /boot/defaults/loader.conf
/kernel data=0xb0496c+0x1344a4 syms=[0x4+0x8a9e0+0x4+0xc8f47]
```


シングルユーザモード起動

```
Type '?' for a list of commands, 'help' for more detailed help.
loader> watchdog disable
loader>  boot -s
```

「recovery」と打ち込む

```
Enter full pathname of shell or 'recovery' for root password recovery or RETURN for /bin/sh: 
```


結構時間がかかります。
起動したらパスワードを入力。

```
Starting CLI ...
root> configure
Entering configuration mode
[edit]
root# set system root-authentication plain-text-password
New password:
Retype new password:
```

コミットして再起動したら終わり。

```
[edit]
root# commit
commit complete

[edit]
root# exit
Exiting configuration mode

root> exit

Reboot the system? [y/n] y
```
EC-CUBE3プラグイン開発に使える便利集

先日12/11,12、静岡県伊東市で開催された
EC-CUBE3.0プラグイン開発合宿にて
共有された、便利なコマンドなどをQiitaに投稿したいと思います。
https://www.facebook.com/groups/1079411082083238/


今後も、使えそうなものがあれば、
どんどん追記していきたいと思います。
この投稿を見られました方も是非コメントで教えてください。
本文に取り込んでいきたいと思います。

※メモは編集していないので、説明不足・言い回しなどに関してはご了承ください。


#1 変数の中身を見たい時
$requestなどをvar_dumpすると、
データ量の問題で表示しきれませんが、
以下を使って、ブラウザからソースコードの表示で、
変数の中身を覗けます。
\Doctrine\Common\Util\Debug::dump($request);

https://github.com/EC-CUBE/ec-cube/pull/1302
上記URLのデバッグ方法の方が良いらしいですが、
正式版ではまだ使えないのと、私自身中身がよくわかっていないので、
一旦情報のみのせておきます。
※現在の最新版3.0.7には導入されておりません。おそらく3.0.8で導入されるのではと考えております。


#2 （Mac の方）Apacheを立ち上げずに、EC-CUBEを動かす
Apache 立ちあげなくても動くんです。EC-CUBEのルート直下で実行します

php -S localhost:8080 -t html


#3 大量ダミーデータ作成方法
こちらQiitaの別記事です。
http://qiita.com/Geany/items/594f4d383bd55d99d9ca


#4 dcm.ymlファイルから、EntityクラスとRepositoryクラスを自動生成
※環境によって、パスが異なるので要注意です。

■ymlファイルから【コマンド実行】でentityを自動生成
「vendor/bin/doctrine orm:generate:entities --extend="Eccube\Entity\AbstractEntity" src」を実行
→ 「C:\workspace\qqq\ec-cube-master\src\Eccube\Entity」にymlファイルで指定したファイル名でEntityが作成される
■ymlファイルから【コマンド実行】でrepositoryを自動生成
「vendor/bin/doctrine orm:generate:repositories src」を実行

今回の情報を書くにあたって、
ネットで情報を調べたらかなり前にQiitaで書いてくださっていたみたいです。
http://qiita.com/chihiro-adachi/items/0c781e68d1bcbab3c620



#5 プラグイン開発用スケルトンプラグイン
合宿の中で、プラグイン開発者用にということで、
プラグイン開発に必要なディレクトリ・ファイル群を
自動生成してくれるスケルトンプラグインを、作成くださっている方がおられました。
~~オーナーズストアに公開予定とのことでしたので、
楽しみに待ちましょう！！~~

オーナーズストアに公開されておりました。（2016/01/06追記）
これを使って、プラグインのテンプレートをさくっと作ってどんどん開発しましょう！
http://www.ec-cube.net/products/detail.php?product_id=1022


以上、少しでもプラグイン開発時の参考になれば幸いです。

明日は、 @amidaike さんです。
よろしくお願いします。
node-redでmilkcocoaにつなぐ

#概要
node-redでmilkcocoaのmqttにつないでみた。
#写真
![milkcocoa.jpg](https://qiita-image-store.s3.amazonaws.com/0/18104/1aa21e2f-41e0-3d24-0021-c995a26b7313.jpeg)
#設定
```
url: flagi9edsvfg.mlkcca.com
port: 1883
user: sdammy
pass: flagi9edsvfg
topic: flagi9edsvfg/message/push
```
【FileMaker】バーコードを作ろう（追記：2019/05/29）

FileMaker Advent Calendar 2015 20日目、今回はバーコードをFileMakerで作ってみましょう。

バーコードを作るというのは、文字列をフォントの一つであるバーコードフォントで表示することです。なにも特別なことはありませんよ。

今回使用したバーコードフォントは、フリーソフトの"[CODE39_2](http://www.vector.co.jp/soft/data/writing/se457833.html)"です。
こちらの環境はMac版ですので、Windowsのバーコードフォントのダウンロードとインストールについては[こちら](http://www.vector.co.jp/soft/dl/data/writing/se457833.html)の取説をごらんください。

Mac版では、ダウンロードしたフォントファイルをアプリケーションのFontBookを立ち上げてインストールしてください。
インストール方法は、「＋」ボタンをクリックしてフォントファイルを指定するだけです。
この時、FileMakerが立ち上がっている場合、FileMakerを再起動してバーコードフォントが読み込まれるようにしてください。

FileMakerを立ち上げてフィールドを選択すると、CODE39_2フォントが選択できるようになります。
![スクリーンショット 2015-12-18 21.29.18.png](https://qiita-image-store.s3.amazonaws.com/0/60538/28941abf-291b-a0ef-0b92-07362faaecff.png)
このフォントを、レイアウト内のバーコードを表示するフィールドで指定します。

今回は指定した文字列の確認とバーコードの表示を行いたいので、両方のフィールドを用意します。
![スクリーンショット 2015-12-18 21.29.39.png](https://qiita-image-store.s3.amazonaws.com/0/60538/35c85ec6-5cae-8006-f3c7-e18c1a17d123.png)
指定した文字列は、スタート/エンド文字として、”＊”（半角で指定します）を両脇につけることになっていますので、バーコードの計算フィールドで文字列を”＊”で囲んで表示します。

すると、バーコード文字列を指定すると、こうなります。
![スクリーンショット 2015-12-18 21.33.59.png](https://qiita-image-store.s3.amazonaws.com/0/60538/832beb72-d989-e6e1-4b9f-191d9f0ac5de.png)
あら、何て簡単。

あとはこれをシールシートなどに印刷すれば運用できますね。
ぜひ、お試しを^^

# 追記（2019/05/29）
Windowsのバージョンのよっては、バーコードの印刷がされないようですので、以下のバーコードフォントもオススメしておきます。
[株式会社テクニカル提供の無料バーコードフォント](https://www.technical.jp/barcode/font/)
すごいレスポンシブデザインのサイト

# あらまし

世の中すっかりレスポンシブサイトが定着してきましたが、これは作りこみ半端ないぞ、というサイトを 1 つと、レスポンシブサイトの構成を検討するにあたって便利なサイトを紹介したいと思います。


# これは凄い

いろいろなサイトを見てきたのですが、これは芸が細かいぞ、というサイトを1つだけ紹介したいと思います。それは[早稲田大学のサイト](http://www.waseda.jp/top/)でした。

## 解像度ごとにことなったナビ x 3 パターン

![スクリーンショット 2015-12-17 20.21.55.png](https://qiita-image-store.s3.amazonaws.com/0/103124/0a36171a-87fb-4ab0-2575-e1bbd56af820.png)
これはスマホの解像度。

![スクリーンショット 2015-12-17 20.22.13.png](https://qiita-image-store.s3.amazonaws.com/0/103124/8dbcd1c8-156b-f960-3d22-6f3f88f2b41d.png)

ちょっと古い端末やタブレット向け (sm-md) くらいの解像度。メニューがアイコンで少しだけ展開されています。

![スクリーンショット 2015-12-17 20.22.27.png](https://qiita-image-store.s3.amazonaws.com/0/103124/f3453591-5567-b9c0-4660-7c1d666f2ac2.png)

PC (lg) の解像度。メニューがフルに展開されています。

### ナビ展開時の動作も解像度によって異なり芸が細かい

![スクリーンショット 2015-12-17 20.23.14.png](https://qiita-image-store.s3.amazonaws.com/0/103124/67a4a0f7-a7e8-31c4-1844-7e149dc4ea33.png)

スマホの場合は、ナビを展開すると現れるナビ。

![スクリーンショット 2015-12-17 20.24.01.png](https://qiita-image-store.s3.amazonaws.com/0/103124/67fe9e47-9366-46dd-b432-fed04058f3a8.png)

sm-md あたりの解像度の時は、アイコンだけじゃなく hover したら説明がでるという芸の細かさ。

~~ちょっと作りこみが半端なさすぎて、サイト構成の変更ごとに発生するアイコンの用意などメンテナンスコストについて心配してしまいます。レスポンシブデザインはシルバーブレットではない、という話もありますしxs と lg くらいの作り分けで良いのではないかと思ってしまいます。~~


![スクリーンショット 2015-12-17 20.23.33.png](https://qiita-image-store.s3.amazonaws.com/0/103124/c0e5df78-c72d-2b1b-d7dd-fa801be512eb.png)

lg といった広い解像度がある時はこのようなナビですが、スマホの時と見た目がちょっと違う芸の細かさ。

いろいろ画像を貼り付けましたが、ちょっと実際にアクセスして画面の横幅をグリグリしてみてもらえると、「おおっ」と思っていただけると思います。

# いい感じのレスポンシブサイト一覧

[RWDJP](http://responsive-jp.com/) というサイトでいけてるレスポンシブサイト、そして、レスポンシブデザインとは一見思えない見た目だが実はレスポンシブデザインだった、といった一覧がありますので、構成など検討される場合はきっと参考になると思います。
SDL2でも増殖するD言語くん

#D言語くんかわいい

![dman_sdl.gif](https://qiita-image-store.s3.amazonaws.com/0/77773/e6ad2db2-6f4d-48c5-82d1-74c9f6d910df.gif)
#ソースコードです

```d:app.d
import derelict.sdl2.sdl;
import derelict.sdl2.image;

import std.random;
import std.math;
import std.algorithm.iteration;

import window;
import texture;
import surface;
import manager;
import input;
import event;
import vector;

enum WINDOW_WIDTH = 640;
enum WINDOW_HEIGHT = 480;
enum DMAN_SIZE = 100;
enum SPEED_MAX = 10.0;
enum SPIN_MAX = 10.0;
enum DMAN_NUM = 100;

static this()
{
    //いろいろ読み込んで初期化
	DerelictSDL2.load();
	SDL_Init(SDL_INIT_VIDEO);
	DerelictSDL2Image.load();
	IMG_Init(IMG_INIT_PNG);
}

void main()
{
	auto win = new Window("D言語くん",
					SDL_WINDOWPOS_CENTERED,
					SDL_WINDOWPOS_CENTERED,
					WINDOW_WIDTH,
					WINDOW_HEIGHT,
					SDL_WINDOW_SHOWN,
					SDL_RENDERER_ACCELERATED);
	auto tex = win.createTexture(new Surface("dman.png"));
	auto key = new Key;
	SDL_Event e;
	Dman[] dmans;
	foreach(i;0..DMAN_NUM)
		dmans ~= new Dman(tex);
	bool running = true;
	while(running)
	{
		SDL_Delay(16);
		update(key);	//キー入力状態のアップデート	
		if (key[SDL_SCANCODE_ESCAPE] > 0)
			running = false; //Esc押すと終了
		win.clear; //画面をクリアー
		dmans.each!(a => a.update(win));
		win.present; //反映
	}
}	


class Dman
{
	Vector!float vector; //移動ベクトル
	double spin; //角速度
	double angel; //角度
	float x,y; //座標
	Texture tex; //テクスチャ
	this(Texture tex)
	{
		this.tex = tex;
		init();
	}
	void init()
	{
		vector = Vector!float(uniform(-SPEED_MAX,SPEED_MAX),uniform(-SPEED_MAX,SPEED_MAX));
		spin = uniform(-SPIN_MAX,SPIN_MAX);
		x = WINDOW_WIDTH / 2 - DMAN_SIZE / 2;
		y = WINDOW_HEIGHT / 2 - DMAN_SIZE / 2;
		angel = 0.0;
	}
	void update(Window window)
	{
		x += vector.x;
		y += vector.y;
		angel += spin;
        //画面外なら初期化して再利用
		if (x < 0 - DMAN_SIZE || x > WINDOW_WIDTH + DMAN_SIZE || y < 0 || y - DMAN_SIZE > WINDOW_WIDTH + DMAN_SIZE)
			init();
		auto rect = const SDL_Rect(cast(int)x,cast(int)y,DMAN_SIZE,DMAN_SIZE);
        //SDL_RenderCopyExと同じ
		window.drawEx(tex,null,&rect,angel,null,SDL_FLIP_NONE);
	}
}
```
作りかけのSDL2のラッパライブラリみたいなの使ってます。GitHubに上げるつもりです。D言語くんかわいい
Doma2.0使ってみた

ちょっと前になりますが、案件でDoma2.0を使ってみたのでその使い勝手とかをレポしてみます。

**Welcome to Doma**
http://doma.readthedocs.org/ja/stable/

以下、公式より抜粋。
> Doma は Java のDBアクセスフレームワークです。
> Doma 2 には以下の特徴があります。
> ・注釈処理を使用して コンパイル時 にコードの生成やコードの検証を行う
> ・データベース上のカラムの値を振る舞いを持った Java オブジェクトにマッピングできる
> ・2-way SQL と呼ばれる SQL テンプレートを利用できる
> ・Java 8 の java.time.LocalDate や java.util.Optional や java.util.stream.Stream を利用できる
> ・JRE 以外のライブラリへの依存が一切ない

ようはよくあるJavaのO/Rマッパーです。
これを採用した理由は結構単純で
・JRE 以外のライブラリへの依存が一切ない
・SQLをファイルですべて管理できる
・たまには違ったものを使ってみよう
という理由からでした。

使い方は公式が良くできているのでそちらを見てもらって、自分は使ってみてきになったところを以下列挙してみます。

#1. トランザクションのかけかた

```java:トランザクションのかけ方
@Test
public void testSelectByAge() {
    TransactionManager tm = AppConfig.singleton().getTransactionManager();
    tm.required(() -> {
        List<Employee> employees = dao.selectByAge(35);
        assertEquals(2, employees.size());
    });
}
```
トランザクションはラムダ式で書くみたい。慣れてないと結構はまっちゃうかも。
例外がRuntimeしか投げられなくなってるので、その前提で例外処理を考えておく必要あり。
`tm.required(() -> {`
この間がトランザクション
`});`　

#2. ロガー

公式より抜粋
> ログ出力ライブラリへのアダプタ
> JdbcLogger を getJdbcLogger メソッドで返してください。 JdbcLogger はデータベースアクセスに関するログを扱うインタフェースです。 実装クラスには次のものがあります。
>     org.seasar.doma.jdbc.UtilLoggingJdbcLogger
> UtilLoggingJdbcLogger は java.util.logging のロガーを使用する実装で、 デフォルトで使用されます。

そう、java.util.loggingの実装です。
自分はSLF4Jとかのが好きなので、自前でロガーを用意しなくてはなりませんでした・・・。

```java:SLF4J向けロガー実装サンプル
package jp.co.opst.doma.logger;

import java.sql.SQLException;
import java.util.LinkedHashMap;
import java.util.Map;

import net.arnx.jsonic.JSON;

import org.seasar.doma.jdbc.JdbcLogger;
import org.seasar.doma.jdbc.Sql;
import org.seasar.doma.jdbc.SqlExecutionSkipCause;
import org.slf4j.Logger;

/**
 * SLF4J向けJdbcLogger実装クラス。
 *
 */
public class Slf4jJdbcLogger implements JdbcLogger {

    /**
     * Loggerインスタンス。
     */
    protected Logger log;

    /**
     * コンストラクタ。
     *
     * @param log logger
     */
    public Slf4jJdbcLogger(Logger log) {
        this.log = log;
    }

    @Override
    public void logDaoMethodEntering(String callerClassName,
            String callerMethodName, Object... args) {
        StringBuilder logMessage = new StringBuilder();
        logMessage.append(callerClassName).append(" ");
        logMessage.append(callerMethodName);
        // argsは略
        log.debug(logMessage.toString());
    }
・・・
```

こんな感じ。公式で用意してくれるとうれしいんだけどなぁ～

#3. 検索結果をでOptionalを使うとき、Entityがイミュータブルである必要がある

```java:Daoサンプル
public interface HogeDao {
    @Select
    Optional<Hoge> selectById(Integer id);
}
```

HogeテーブルについてのDaoは↑のような感じになる。
このとき　検索結果でOptionalを使いたいとき、HogeはイミュータブルなEntityクラスである必要があるとのこと。

・・・ということは、検索結果の一部を変更してUPDATEしたいってときは　Entityのインスタンスを再度作る必要があるということ。

まぁ作ってしまえばよいのですが、更新の数が多いと結構大変でした。。。。


#最後に
とはいえ、Entityクラスの自動生成があったり、SQLファイルへの条件の書き方が直観的だったり、と自分としては結構好みでした。

機会があれば使ってみてくださいませませ。

でわでわ。
Appium はじめの一歩（環境構築と動作確認まで）

この記事は[Selenium/Appiumアドベントカレンダー2015](http://qiita.com/advent-calendar/2015/selenium)の20日目の記事です。

@gluelan2013 さんからバトンが渡ってきました。 @akasakas です。去年に続き、Selenium/Appiumアドベントカレンダーに参加させて頂きます。よろしくお願いいたします。

※去年の記事はコチラです
 [SeleniumWebdriver で Jenkins から Firefox 多重起動時 の 「e is null」エラー対処法](http://qiita.com/akasakas/items/7a7a47aa9eb96644df6c) 

いままでは主にSeleniumをRubyで書いてましたが、今回Appiumを初めてさわってみたので、「Appiumはじめの一歩」として環境構築と動作確認までをまとめてみました。

### **環境構築**

appium の導入は楽です。

[appium.io](http://appium.io/)にも書いてありますが、下記４行で終わりです。

```

$ brew install node      
$ npm install -g appium  
$ npm install wd         
$ appium &

```

いまくいかなかったら、sudo とかしたり node 入れ直したりしてください。
~~ぼくはnode入れ直したり、下記のエントリを参考にさせて、ごにょごにょしたら、うまくいきました。なので、めっちゃ時間かかりました。。。~~

参考
[①Appiumを使ってみた【iOS編】](http://qiita.com/tabbyz/items/36629fe2a3c82e3e4933)

### **CUIからの実行**

コマンドからは下記のような感じで実行&終了ができます。

```
> appium &            # start appium
> ruby appium.rb      # execute appium script
> killall -9 node     # exit appium
```

### **GUI**

AppiumのGUIはこんな感じです。

![image](https://qiita-image-store.s3.amazonaws.com/0/40852/39c8a264-a141-dcf8-8664-b413dc354fbc.png)

**Appium Inspector**

上の画像にある。左上から3つ目のお医者さんマーク的なやつをクリックするとAppium Inspector なるものが出てきます。

![image](https://qiita-image-store.s3.amazonaws.com/0/40852/fbd56c1e-6b8a-2813-9bfb-4728c79c74d8.png)

エレメントの調査とかRecordができて、スクリプトも作ってくれる優れもの
ただ、ちょいちょい固まる。。。

### **サンプルコード実行**

環境が整ったら、動かしてみましょう。
ご丁寧にもサンプルコードがあるので、そいつを拝借。

:warning: Xcodeインストール済み

[appium/sample-code](https://github.com/appium/sample-code/tree/master/sample-code/examples/ruby)

もろもろ準備です。

```
$ git clone git@github.com:appium/sample-code.git
$ cd sample-code/sample-code/examples/ruby/  # ruby でやります。
$ bundle install 
$ rspec --init
```

下記のコマンドで実行できます。

```
rspec simple_test.rb
```

### **雑感**

:sunny: **喜び** :sunny: 
- Seleniumの知識は流用できる
  - エレメントの指定ぐらい
- バージョン・機種違いで同じテストを並列実行できたら夢が広がる

:umbrella: **辛み** :umbrella: 
- ネイティブのことも理解していないとしんどい
  - Android iOSのビルド周りとか、もうわからんです
- アプリ起動はブラウザよりも遅いかも
- インスペクターおっそい。。。
  - ちょいちょい固まるのはちょっと・・・

### **最後に**

読んで頂いた方、ありがとうございました。
明日は @itaru さんです。よろしくお願い致します :bow:
デザインをhtml化するとき困った事

<h2>ご挨拶</h2>
おはよううございます。
本日担当させていただくことになりました、株式会社WACULでhtmlを書いている秋山です。
以後、よろしくお願いいたします。

<h2>デザインをhtml化するとき困った事</h2>
デザインをhtml化する上で時々「これ、どう～すっかな」というものがあります。
そのうちの一つがこれ。

![c544261e5b46dc0cac335253d31acacf.png](https://qiita-image-store.s3.amazonaws.com/0/103932/a8d17da4-0462-a92d-b63f-c1336d584da6.png)

th,tdの仕切り線の上下が途切れているのがポイントです。
このデザインをもらったとき、思わず確認しました。
「これ、ど～しても再現したい？」
「ど～～～～～しても、したい、です！！！！！」
「そっかー・・・」

<h2>隠してしまえばいい</h2>
解決策の一つとしては線の上下を背景色で塗りつぶした block要素で塗りつぶしてしまう、です。

<b>html</b>
![e1e747d24e2c56905603eddd5c6de5c4.png](https://qiita-image-store.s3.amazonaws.com/0/103932/8f606218-d76d-850f-a552-8f7dbed7b688.png)

<b>css</b>
<pre>
table.basic th, table.basic td {
  border-bottom: solid 1px #ddd;
  padding: 24px 30px 21px 0;
  line-height: 200%;
  position: relative;
  overflow: visible;
}
table.basic td {
  border-left: solid 1px #ddd;
  padding-left: 30px;
}
table.basic td::before, table.basic td::after {
  content: "";
  background-color: #fff;
  width: 5px;
  height: 20px;
  display: block;
  position: absolute;
  left: -3px;
}
table.basic td::before {
  top: 0;
}
table.basic td::after {
  bottom: 0;
}
</pre>

といった感じです。

とはいえ、before,abterが使えない、th,tdにpositionが適用されないといった場合があります。
その時はそれ用に手を加える必要がありますが、原理は同じで再現可能です。

<b>「不要な部分は隠してしまえばいいのです。」</b>
パイプライン演算子（擬）

これは[マイネット Advent Calendar](http://qiita.com/advent-calendar/2015/mynet) 20日目の記事です。
5日目に引き続き、@aonoが担当します。

さて、[elixir](http://elixir-lang.org/)にはパイプライン演算子というものがあります。Unix系OSにおけるパイプと似たような、関数と関数を接続するための演算子で、左辺の戻り値を右辺に第一引数として渡して実行させると言うものです。F#がルーツになっているそうですね。

```
[1, 2, 3] |> Enum.map(fn(x) -> x + 1 end) |> Enum.filter(fn(x) -> rem(x, 2) == 0 end)
#=> [2, 4]
```

こんな感じ。
小さな関数を繋いで式を作れるので、見通しがいいのと、関数の再利用がしやすくなるのが利点かと思います。

で、RubyistとしてはRubyでも同じ事がしたくなるわけです。
ただし、Rubyの仕様上`|>`と言う演算子は定義不能（define_methodで無理矢理定義することは不可能ではないが、使用不可能）なので、演算子として使用可能な`|` で代用します。

また、Rubyはprocを使わないと関数をオブジェクト化出来ないので、関数を接続するのではなくオブジェクトを接続する形を取りたいと思います。

まずはパイプライン演算子を使用可能にするためのクラス

```pipe.rb
class PipeBase
  def initialize(data)
    @data = data
    @klasses = []
  end

  def |(klass)
    @klasses << klass
    self
  end

  def lower; end
  def self.lift; end
end

class Pipe < PipeBase
  def self.lift(data)
    new data
  end

  def lower
    if @klasses.length == 0
      return @data
    end
    @klasses.inject(@data) do |d, klass|
      break unless d
      obj = klass.send(:new, d)
      d = obj.execute
    end
  end
end
```

`|`メソッド（演算子）は実際には右辺のクラスを配列に入れるだけの動作しかしていません。
ThreadやFiberを使用する実装、と言うのも考えた（と言うかやってみた）のですが、試作段階ではメモリの使用量が増えるだけだったのでシンプルな形に落ち着きました。今後いいやり方を思いついたら実装したいです。

使用する場合にはこれを継承し、データをパイプライン上で使用可能にするためのliftメソッドと、パイプラインからデータを持ち出すためのlowerメソッドを定義してやる必要があります。そうすると上記Pipeクラスのようになります。

そして、パイプライン上でデータを処理するフィルタクラス

```filter.rb
class FilterBase
  def initialize(data)
    @data = data
  end
end

class FilterA < FilterBase
  def execute
    return @data if @data[:log_type] == 'kc'
  end
end

class FilterB < FilterBase
  def execute
    return @data if @data[:foo_id] == 9393
  end
end

class FilterC < FilterBase
  def execute
    return @data if @data[:bar_id] == 72
  end
end
```

こちらも親クラスはインスタンスメソッドを一つ定義するだけの簡単なクラスで、実処理は子クラスのexecuteメソッドに記載します。

で、これをなんのために作ったかと言えば、前回の続きな訳です。
下記のようにして使用します。

```Log.rb
require 'msgpack'

res = []
File.open('msg_packed.log') do |log|
  log.each_line do |l|
    l = MessagePack.unpack(l)
    pipe = Pipe.lift(l)
    pipe | FilterA | FilterB | FilterC
    data = pipe.lower
    res << data if data
  end
end
```

これで整形済みログファイルから必要なデータを抽出することが出来ます。（この場合、:log_typeがkcで、:foo_idが9393、:bar_idが72のデータが抽出される。え？ 例が恣意的？ σ(のヮの)ﾅﾝﾉｺﾄﾔﾗ）
存在していれば、いろいろ面白い使い方が出来そうな演算子ではないでしょうか。
【vte.cx応用】19.設定情報(properties)とエラーページの設定

今日は設定情報とエラーページの設定について説明します。
[ドキュメント](http://reflexworks.jp/documentation.html#taggingservice.html#RX1)の補足説明になります。
### 設定情報

設定情報とは、セッションタイムアウト時間やエラーページの設定などのシステム情報のことで、/_settings/propertiesのrightsタグに記述します。

ここには、以下のようなものを設定できます。

```
_entry.number.default : エントリーGET時のデフォルト最大数 [100]
_ignore.condition.{連番} : 検索条件除外値。ここに指定した値はGETでクエリパラメータに指定しても検索条件とならない。
_errorpage.{適用順}.{エラーページselfid}={PathInfoの正規表現} : エラー画面表示URLパターン(正規表現)
_aws.sns.push.self : 更新者自身にpush通知を行うかどうか(Amazon Web Service SNS mobile push) [false]
_rxid.minute : RXID(WSSE)有効時間(分) [120]
_rxid.counter.{連番}.{回数} : 同じRXIDを使用しても指定回数まで許可されるURLパターンを指定。
_session.minute : セッション有効時間 [30]
_aws.sns.push.self : 更新者自身にpush通知を行うかどうか(Amazon Web Service SNS mobile push) [false]
```

ここに設定していないものについてはシステム設定のプロパティの値が使用されます。

### エラーページの設定

アクセスしたコンテンツに参照権限がない場合（アクセスエラー）やログインタイムアウト（未ログインエラー）などでエラーページを強制的に表示したい場合があります。

エラーページは以下のようなルールで設定できます。
このルールに合致する場合、指定されたエラーページを表示します。

```
_errorpage.{適用順}.{エラーページselfid}={PathInfoの正規表現} : エラー画面表示URLパターン(正規表現)
```

以下は実際の設定例です。

```
_errorpage.1.error.html=^/_html/foo.html$ 
_errorpage.2.login.html=^/_html/.*$
```

PathInfoの正規表現とは実際にアクセスするページのことで、例えば、/foo.htmlをアクセスした際にログインタイムアウトなどのエラーが発生するとリダイレクトされて/error.htmlが表示されます。また、その他のページをアクセスした際にエラーが発生すると/login.htmlが表示されます。
優先順位はlogin.htmlの方が下なので/foo.htmlの場合はerror.htmlが表示されます。

（※ 画面にアクセスする場合、PathInfoの先頭には/_htmlをつけるようにしてください。）

上記の条件に合致しないURIでエラーが発生すると、以下のシステム設定のルールが適用され、管理サービスのエラー画面(/@/_html/error.html)が表示されます。

```
_errorpage.1000000./@/_html/error.html=^/_html/.*$
```

ということで今日は以上です。
明日はサーバーサイドJavascriptについて説明します。
Grailsを触ってみる2

# 今日の目標
Grailsで画面を作ってみる
※Grailsが面白そうだったので、また登場。

# 使ったもの
* GGTS 3.6.4.RELEASE
* grails-2.4.4
* Windows 8.1

# 参考サイト
* [初心者のためのGroovy/Grails入門](http://libro.tuyano.com/index3?id=1311003&page=3)

# ではスタート

## 前回からの続き
前回はindexというメソッドを作り、そのメソッドの中でrenderを呼び出してHTMLを表示しました。

作ったものはこれ。

```HelloController.groovy
package hellograils

class HelloController {

    def index() {
		def name = "torinist"
		render "<html><body><h1>Hello, " + name + "</h1><p>Welcome to Grails!</p></body></html>";
	}
}
```

![grails9.png](https://qiita-image-store.s3.amazonaws.com/0/97937/139c5a5c-285d-0a48-4149-7da0509354a6.png)

ということで、次は画面を作って値を埋め込んでいきたいと思います。

## 画面に表示したいものを用意する

コントローラ側で画面に表示したいものを作ります。ちなみにコントローラ側で用意するのはマップです。マップ！「キー」が画面側での変数名となるそうです。へー。
また、returnをしなくてもそのマップ定義（なのかな）をメソッドの最後に置いておけば、画面側で使えるようになるらしいです！すごいね！

```HelloController.groovy
package hellograils

class HelloController {

    def index() {
		def name = "torinist"
//		render "<html><body><h1>Hello, " + name + "</h1><p>Welcome to Grails!</p></body></html>";
		[
			'title': "Hello, date",
			'contents': "Hello, " + name,
			'date': Calendar.getInstance().getTime()
		]
	}
}
```

## 画面側を作る

画面側ですが、上のメソッドと同じ名前で作ります。今回上のメソッドはindexだったので、index.gspを作成します。
HelloControllerを作ったときに自動的に`views`の下に`hello`というフォルダが作られていると思うので、`views/hello`の中にindex.gspを作りましょう。（ちなみに私は元々入ってたindex.gspをコピって、CSSの記述とbodyの要らないところをゴッソリ削除しました）

```view/hello/index.gsp
<!DOCTYPE html>
<html>
	<head>
		<meta name="layout" content="main"/>
		<title>Welcome to Grails</title>
	</head>
	<body>
		<div>
			<h1>${title}</h1>
			<h3>${contents}</h3>
			<p>${date}</p>
		</div>
	</body>
</html>
```

アクセスするURLは前と一緒。

![grails2-1.png](https://qiita-image-store.s3.amazonaws.com/0/97937/7d531962-1c33-49a0-7ea6-7b0ef05b9e81.png)

きちんと表示されますね。
しかもなんかGRAILSのロゴが出てる…！と思ったら、`<meta name="layout" content="main"/>`で`views/layout/main.gsp`が呼び出されていて、layout表示しているみたいですね。すごいすごい。

最後にmapの記述がないとどうなるんだろうなあ、と思って入れてみたら、思った通り何も出ませんでした。

```HelloController.groovy
package hellograils

class HelloController {

    def index() {
		def name = "torinist"
//		render "<html><body><h1>Hello, " + name + "</h1><p>Welcome to Grails!</p></body></html>";
		[
			'title': "Hello, date",
			'contents': "Hello, " + name,
			'date': Calendar.getInstance().getTime()
		]
		
		def name2 = "torinist2"
	}
}
```

ちなみに！index.gspという名前のファイルはプロジェクトを作ると自動的に作ってくれます。作られている場所は`views`の直下ですね。最初、これの中に表示させちゃえばいいじゃん！と編集してましたが、アクセスがうまくいかない。

* http://localhost:8080/HelloGrails/index
![grails2-2.png](https://qiita-image-store.s3.amazonaws.com/0/97937/177c6540-230d-e1fa-b348-c151ab54b18e.png)

* http://localhost:8080/HelloGrails/index.gsp
![grails2-3.png](https://qiita-image-store.s3.amazonaws.com/0/97937/b91d51cc-c644-44b0-62c9-7aa1081a0a33.png)


* http://localhost:8080/HelloGrails/
![grails2-4.png](https://qiita-image-store.s3.amazonaws.com/0/97937/46567dc5-315d-7750-7fa4-26ee23857b1e.png)


いろいろ試してみましたが、きちんと裏で紐づけしてるんですねえ。

* `views/index.gsp`はプロジェクト名だけ指定すれば出てくる
* 画面とコントローラは`コントローラクラス名＝views下のフォルダ名`、`メソッド名＝画面ファイル名`で紐づいてる

多分この紐づけは設定ファイルでやってるんだろうけど、それを触らなくて良いというのがいいですね。
ちょっと時間が無くなってきたのでこの辺で！
OAuth 2.0 認証のクライアントを作る時の注意点

# OAuth 2.0 の基本

OAuth 2.0 [^1] を一言でまとめると、プログラムがウェブサービス上にあるユーザ所有のリソースにアクセスするための認証フレームワークです。

クライアントプログラムの接続開始から認証完了の流れは大体このようになっています。

1. プログラムがウェブサービスの認証サーバに自分のクライアント情報を知らせる
2. 認証サーバがユーザにログインしてもらって、プログラムのアクセスを許可するかをユーザに確認する
3. ユーザがアクセスを許可したら、認証サーバがアクセスするためのトーケンをプログラムに返す
4. プログラムがトークンを使ってウェブサービスのリソースサーバにアクセスする

OAuth 自体はあくまでも認証フレームワークなので、それぞれのステップは必須な処理以外にオプションとなっている部分が多いです。[^2]
そのため、サービスプロバイダーによってサーバ側の実装が異なるので、なんでも繋がる汎用的なクライアントを作るのはかなり面倒です。

以下では実装時の注意点を（独断と偏見で）ピックアップして説明していきます。

# 遠足の前：バナナはおやつなのか？

OAuth 2.0 の接続開始前、事前にサービスプロバイダーにクライアントの情報を知らせる必要があります。
クライアント情報を動的に登録や変更する標準はまだ実用化されていなくい[^3]ので、サービス側での設定が必要となります。

そこで気をつけなければならないのは、**クライアントがどのような物に対して、どのような操作を行うか**です。

単一のサービスをホストしているプロバイダー(例えば課題管理システムの[JIRA](https://www.atlassian.com/software/jira))の場合、
対象となるリソースは自明的なので、CRUD の制御は API のエンドポイントで行うことになります。

しかし、複数のサービスをホストしているプロバイダーの場合(例えばGoogle)、サービスやリソースごとに API を用意することが一般的です。
クライアント情報を登録する際に、API も設定しておく必要があります。
リソースに対する CRUD 権限の制限は認証時に scope で明示的に指定することになるので、scope と API が一致しないと認証が失敗してしまいます。

小学生の遠足をイメージすれば分かりやすいと思います。
かの永遠のテーマ「バナナはおやつに入りますか？」のように、気になる「バナナ」（リソースに対する操作）が「おやつ」（API）に含まれるかどうかを事前にはっきりさせておくのはとても大事です。


# 外野からの送球：ホームに届かないけど…？

OAuth 2.0 の認証中、ユーザを含めて、登場人物の間には何回かの情報交換を行っています。
ユーザがログインしたかどうか、もしログインしたとしたらどのアカウントを使ったか、これらの情報は認証サーバの方しか把握できません。
これの情報は認可コードに集約されて、なんらかの手段でクライアントに送らなければなりません。
認証サーバが認可コードをクライアントに返す手段として、事前に登録された redirect_uri に返送するが一般的です。

そこで気をつけなければならないのは、**返送先がどこまで細かく指定できるか**と、**受け取れるもののいる場所を返送先として指定できるか**です。

特に、ネイティブアプリケーションの場合、受け口が存在していない状況もありうるので、注意が必要です。
受け口があったとしても、グローバルIPがあるかどうか、どのポートを使用しているか、その受け口を指定できるかどうかもとても重要です。
ウェブアプリケーションの場合、制限は比較的に少ないですが、パスとポート周りはやはり要注意です。

外野（認証サーバ）からの送球がホーム（クライアント）に届どかないなら、中継（リダイレクト）すれば問題無いですが、受け取れないところにでも投げられたら困りますよね…


# ス○バにて：使い捨てカップ？それともマイタンブラー？

OAuth 2.0 認証完了後に発行されたアクセストークンは、一定期間経過すると無効になります。
そのあとにまた同じリソースをアクセスしたい場合は新しいアクセストークンを再発行しなければなりません。
再発行する際、もしリフレッシュトークンを持っていれば、手順はリフレッシュトークンとアクセストークンの引き換えになります。
その場合、ユーザの認可を取りなおす手間を省けることができます。

しかし、リフレッシュトークンのの扱いもサービスプロバイダによって違っていて、大きく分けると

* リフレッシュトークンを発行しない（例えばDropbox）
* リフレッシュトークンは一回限り有効、または一定期間内有効（例えばBox）
* リフレッシュトークンは無効化されるまでずっと有効（例えばGoogle）

の３つのパターンがあります。

したがって、リフレッシュトークンにつては、**サポートしているかどうか**、**サポートしているなら、いつまで使えるか**を意識しなければなりません。

サポートしない場合はユーザに手間をかけないように、アクセストークン再発行フローを工夫する必要があります。
サポートする場合は、リフレッシュトークンの有効期限に合わせた、適切なトークン保持と再発行の仕組みが必要になります（特に長期間有効なものは要注意）。

ス○バでのマイタンブラー（リフレッシュトークン）を利用すると少しお得になりますが、適切な衛生管理（セキュアなトークン保持）が必要です。


# まとめ
OAuth 2.0 のクライアントを作る時に、注意したほうがいい点を覚えやすい（？）ように、適当な比喩で書き留めました。
かなり適当な比喩なので、やはり標準ドキュメントを目を通して頂きたいです…


[^1]: RFC 6749: The OAuth 2.0 Authorization Framework. 日本語訳は[こちら](http://openid-foundation-japan.github.io/rfc6749.ja.html)です。
[^2]: あくまでも個人的な意見ですが、ルーティングプロトコルとかと比べると、実装側に委ねる部分が多い気がします。
[^3]: RFC 7592: OAuth 2.0 Dynamic Client Registration Management Protocol. 現在はまだ実験段階です。
Milkcocoaと複数のESP8266と温度センサでIoTしてみた。

MilkcocoaがIoT向けに改良されていく中で、今回は複数の端末から同時にデータを集めて表示してみようと思います。
今回はハードウエアの解説は軽くして、freeboardの解説をしていこうと思います。

#Milkcocoaとは？

Uhuru Technical Rockstarsさんが開発している、リアルタイム通信やハードウエアとwebの接続などが簡単にできるようになるバックエンドサービスです。
![2015-12-19_23h40_23.png](https://qiita-image-store.s3.amazonaws.com/0/97208/f8d11811-1568-250d-cef9-a73d60c67fa9.png)

#ハードウエアについて
ESP8266とDHT11をつかって複数のセンサを動かしています。
![IMG_20151219_214050.jpg](https://qiita-image-store.s3.amazonaws.com/0/97208/a6ace121-dd92-d605-a77c-a709e610eaff.jpeg)
今回はハードウエアに関する説明は省略します。

#Milkcocoaで表示してみる

Milkcocoaでは、freeboardというのを使って簡単にセンサのデータをグラフ化することができます。

今回はその説明をメインで使用と思います。

Milkcocoaのデータストアからfreeboardのリンクがあるのでそこをクリックしてください。

![2015-12-19_23h41_06.png](https://qiita-image-store.s3.amazonaws.com/0/97208/c93bb272-3840-6043-2a83-1d39392d6aaf.png)

##センサ（データ）を追加する際にはADDをクリックしていただくと追加画面が出ます。
それをセンサの数だけやります。

![2015-12-19_22h22_16.png](https://qiita-image-store.s3.amazonaws.com/0/97208/f0159c7f-fbfa-6fb8-f0b1-931a14529f2d.png)
![2015-12-19_22h04_52.png](https://qiita-image-store.s3.amazonaws.com/0/97208/c491ad3c-329f-2c33-6abe-845b0a31539a.png)
![2015-12-19_22h15_43.png](https://qiita-image-store.s3.amazonaws.com/0/97208/0a7bfdc8-086b-c356-7116-11c028cfda3f.png)
![2015-12-19_22h18_12.png](https://qiita-image-store.s3.amazonaws.com/0/97208/54b4b19d-920d-c8da-5f1b-d841dfbe7ac5.png)

##データを登録できたら今度は表示部分を作ります。

![2015-12-19_22h26_07.png](https://qiita-image-store.s3.amazonaws.com/0/97208/8f84a78c-ec5c-f886-f9b4-f21b90b1f844.png)
![2015-12-19_22h30_20.png](https://qiita-image-store.s3.amazonaws.com/0/97208/27178700-0508-2ac0-c865-6355e071e84b.png)
![2015-12-19_23h35_28.png](https://qiita-image-store.s3.amazonaws.com/0/97208/14b76200-69f1-d3f5-b268-93be318b344d.png)

#完成

クリックだけで複数の温度センサのグラフができてしまうなんてすばらしいです。
ただ反面作りこむことはなかなかしづらいので、あくまでプロト向けかもしれません。

![2015-12-19_23h13_23.png](https://qiita-image-store.s3.amazonaws.com/0/97208/6f88f351-1796-8a98-2f5d-86f8c6004a0e.png)
![2015-12-19_23h15_28.png](https://qiita-image-store.s3.amazonaws.com/0/97208/ba3d99c1-ccd4-a05d-a66a-a3f83386ca38.png)
ConoHaにNutanix CEがインストールできるか検討だけしてみた

# 1. はじめに
“[ConoHa Advent Calendar 2015](http://qiita.com/advent-calendar/2015/conoha)”及び“[Nutanix Advent Calendar 2015](http://www.adventar.org/calendars/1124)”の12月19日への投稿となります。



　今回は、2015年６月に開催されていた「[Nutanix Community Edition - Blogコンテスト](http://nutanix.connpass.com/event/15452/)」に投稿を検討した際に考えつき、お蔵入りしたネタを書いてみることにします。
年の瀬ということもあり実際に動かして確認する余裕がなく、アイディアメモ程度の内容になることをご容赦ください。　


なお「Nutanix Community Edition(以下、Nutanix CE)って何？」と思った方は、“[Nutanix Advent Calendar 2015](http://www.adventar.org/calendars/1124)”にあります以下の投稿を参照されることをおススメいたします。


12月1日分
[「Nutanix Community Editionの歩きかた 〜必読資料まとめ〜」](http://qiita.com/smzksts/items/ce45dcbabcc1bcd56fa0)

12月12日分
[「Nutanix CE導入ガイド斜め読み -Nutanix CEをこれからインストールしたい人向け-」](http://qiita.com/hanakara_milk/items/ee81ca81785a2600d3df)



# 2. Nutanix CE導入のハードル
 Nutanix CE導入するにあたり、必要となるソフトウェアは"Nutanix Communityポータル"に登録することで無償で入手が可能である。（2015年12月19日時点）
だたし、必要となるハードウェア要件が高く、下記の最小システム要件をみたさないとインストールすることすら出来ず、これがそのまま導入するハードルの高さとなっている。

## 最小システム要件
(1) CPU：Intel VT-xに対応をした物理４コア以上のもの
  （物理2コアをHyper-Threading機能で4スレッドとするのはNG）

(2) メモリ：16GB以上　

(3) ディスク： SSD + HDD を各1つ以上
　・SSD 200GB以上
　・HDD 500GB以上　※HDDの代わりにSSDでも可

(4) NIC： Intel製を推奨

# 3. ConoHaに着目した訳
 当時、Nutanix CEが出たばかりで、ちょっとインストールだけでも試してBlogが書ければなぁと思い、いくつか手持ちのハードウェアで検討してみましたが、どれも一つずつ要件がたりないといった状況でした。
そこで、ウケ狙いもありVPSなどのパブリッククラウドサービスでNutanix CE構築ができれば面白いのではないかという発想に至りました。

では、ConoHaに着目した理由は何だったのか？
(1) Nested Virtualizationができそう
　VPSサービスを利用するにあたりIntel VT-xに対応しているかが気になりましたが、/proc/cpuinfoの中にvmxという文字列が確認できていた。


(2) SSDが提供されている
　ConoHaの売りのひとつですがディスクはSSDで提供されており、追加SSDとして200GB, 500GBもちょうど要件のディスク容量も一致していた。

(3) 時間単位での料金プラン
　コア数やメモリ、追加SSDなど組み合わせて要件を満たそうとすると料金コストが増大しますが、時間単価を割り出し計算したところ1日程度、インストールのテストとして個人で許容できる範囲の金額でした。


(4) 単純にConoHa VPSが好き
　これ以上の理由はないかと思いますが、一応書いておきます。　


# 4. お蔵入りになった理由
　タイミングを逃しました。
言い訳となりますが、当時、Nutanix Communityポータルができたばかりで新規アカウント申請から実際に作成されるまでに数日かかる状況であったこと。また偶々運悪くやっと発行されたアカウントで直ぐにログインできず、サポートとのやり取りをしている間に、本業も忙しくなるなど余裕がなくなり、そのままお蔵入りとなりました。


# 5. その他、やり残したこと
(1) 起動用のUSBメモリ
　Nutanix CEは起動イメージをUSBメモリに書き込んで使用します。
これは標準のSSD 50GBの領域をUSBメモリの代替えとし、イメージの書き込みをLive起動ができるLinuxディストリビューションでやれるのではないかと考えていますが、結局のところ本当にこの方法でよいかは確認がとれていません。


(2) NICの対応
　推奨はIntel製のNICモデルですがIntel以外のベンダーNICも動いたとの報告もありますが、virtioのNICモデルをNutanix CEが認識する可能性もありますが確認がとれていません。



# 6. さいごに
　Nutanix CEをクラウド上で動かすというのは、現在サービスとして存在しています。
すでにやる意味を失った感がありますが、また時間があるときにでも再チャレンジできればいいなぁと考えいます。

時間ぎりぎりとなりましたので、以上で締めさせていただきます。
New Relic Synthetics: Simple Browserで実際のブラウザからの稼働チェックとリソースチェック

Advent Calendar 19日目は、13日目の[New Relic Synthetics: 無料のPingモニターでサイトの稼働状況をらくらくチェック](http://qiita.com/kumatronik/items/c542feac77b08c3ca646) に続き、New Relic Synthetics の Simple Browser を紹介したいと思います。

これらは、有料機能ですが、2週間無料で利用できるので、Simple Broser や後日紹介する Scripted Browser を是非試してみてください。Simple Browser の設定方法や結果表示画面は基本的に、Ping モニターと同じなので、共通部分は省略していきます。気になる方は、前回の記事をご覧ください。

# Simple Browser 

Simple Browser は、前回紹介した Ping モニター機能の強化版です。指定した1つの URL に対して、その URL の稼働状況、パフォーマンスのチェックを行います。

強化版の所以は、Ping モニターでは、指定した URL に対して HTTP HEAD リクエスト（GET も使える）を飛ばして返ってきた HTML レスポンスの内容をチェックするものでした。対して Simple Browser は、実際のブラウザ（Chrome) から、対象のURLを叩き、実際のリソース（HTML、CSS, 画像、JS など)のパフォーマンスのチェックを行います。

Synthetics のドキュメントなどでは、よく RUM (実際のユーザー監視）との違いを述べています。つまり、New Relic Browser と何が違うのかということです。両者とも、実際のブラウザからアクセスしたページに対するパフォーマンスを計測します。以下のように違いがあると述べています。

- RUM ではユーザー自身の環境（ネットワークやマシンパワー）に依存する部分が多いので、一貫したデータをとりずらい（ノイズが多い）
- 実際にユーザーがアクセスするまでデータがとれない。つまり、定期的にデータがとれるかわからない。

Ping モニターもそうですが、Simple Browser もこの問題を解決しています。毎回同じ環境から、定期的にアクセスするため、一貫したデータを取得できるからです。

では、設定方法から見ていきます。

# 設定方法

基本的には、Ping モニターと同じです。多少、Advanced Optionsが減っているくらいですね。

![synthetics_simple.png](https://qiita-image-store.s3.amazonaws.com/0/46003/66cf7861-e4b9-baf0-1d10-1cee15060293.png)

# 結果表示

設定は Ping モニターとほぼ一緒でした。しかし、取得しているデータの量が違うので、結果表示は変わります。

結果概要("Overview")や、結果一覧("Resutls")ページも Ping モニターと同じなので、省略します。では、特定のチェック結果を見てみます。

![synthetics_sb02.png](https://qiita-image-store.s3.amazonaws.com/0/46003/803f2dd4-9e17-285a-7587-ca77eb488cf6.png)

Ping モニターでは、HTML しかありませんでしたが、ここでは全リソースの情報を表示しています。リソースごとの絞りこみなども簡単に行なえます。

さらに特定のリソースの詳細をみてます。以下では、HTMLとその下の JAVASCRIPT をクリックして、詳細を表示しています。

![synthetics_sb03.png](https://qiita-image-store.s3.amazonaws.com/0/46003/5cebfe54-8b99-e45f-d9ac-28bbed5c621d.png)

Ping モニターでは `Overview` しか詳細がありませんでしたが、ここでは、`Reqeust` と `Response` タブが増えています。

また、以下の画像のように、これも Ping モニターには有りませでしたが、`Browser Log` タブが増えています。ここでは、ブラウザでの Console で表示される内容を見えるようです。

![synthetics_sb04.png](https://qiita-image-store.s3.amazonaws.com/0/46003/6638878e-855a-c77f-c159-981d1475f838.png)

また、サブメニューとして、`Results` メニューの下に、`Resources` メニューが増えています。これは各リソースを様々な角度からみたリソースのパフォーマンスを確認できます。

![synthetics_sb05.png](https://qiita-image-store.s3.amazonaws.com/0/46003/10897dc8-c90e-f23e-e32f-9e8d2544f313.png)

左のリソース一覧から１つをクリックすると、以下のように詳細を表示します。

![synthetics_sb06.png](https://qiita-image-store.s3.amazonaws.com/0/46003/748d07fc-fb1d-0afd-ef34-eae166433ec1.png)

# まとめ

どうでしたでしょうか、Ping モニターとの違いが分かって頂けたでしょうか。単なる稼働チェックだけなく、どちらかというと、Browser のリソースチェックに近い機能となっています。次回は、Scripted Browser を使って単一の URL のチェックにとどまらず、画面遷移を含めたより機能的な稼働チェックの紹介をしたいと思います。
Office for mac 2011で「EXC_BAD_ACCESS」と出て起動しない時の対処法

#経緯
macでエクセルが必要になった
会社にライセンス余っていないかを確認
余ってたのでもらった
office **2011** for macだった
ダウンロード->インストールまでは順調だった
起動するとエラー
詳細を見ると**EXC_BAD_ACCESS**というエラー
excelでもwordでも同じ状態
アクセス権の修復を行ったり、OSをElcaptainへアップデートしたり、でもダメだった

#解決した方法
**Office for mac 2011のアップデートを行うと動いた**

アップデートファイルのダウンロードはここ
https://support.microsoft.com/ja-jp/kb/3098229
RTMP配信するときに便利なnginxのフロントエンドをElectronで作りました

RTMP配信を複数のサービスに同時に配信できるデスクトップアプリをElectronで作りました。
厳密に言うと、RTMPの仕事をnginxにやらせるフロントエンドになっています。

解決したかった問題
----
* RTMPでの配信は一つのサービス宛にしか届けられないけど、配信サイトは沢山あって一つに絞れない
* 特定のサービスにロックインされたくない
<br>

* **ロックインされたくない！**
* **ロックインされたくない！**
* **ロックインされたくない！**
<br>

* nginxのrtmp-moduleを使うと一つのrtmpストリームを複数のサービスに分配してくれるけど、サービスを切り替えたりするのに逐一コンフィグを直接いじるのはちょっと面倒

解決策
----

**nginxのrtmp-moduleを簡単に動かす事ができるフロントエンドを用意する**

<img src="https://qiita-image-store.s3.amazonaws.com/0/3790/19969411-86b5-61ad-554a-0deb4e48baf0.png" width="600">

できること

![image.png](https://qiita-image-store.s3.amazonaws.com/0/3790/c7c0d7d4-90a0-1015-96df-052d264508d5.png)

動かし方は [README.ja.md](https://github.com/progre/nginx-rtmp-frontend/blob/master/README.ja.md) を参照ください。

技術的な諸々
====
ソースコードはMITライセンスで公開されています。
https://github.com/progre/nginx-rtmp-frontend/

nginxの操作
----

https://github.com/progre/nginx-rtmp-frontend/blob/master/src/service/nginx.ts
nodeのchild-processでnginxを非デーモンモードで立ち上げています。
設定ファイルはフロントエンド用のものを抱えていて、nginxインストール先はなるだけ汚さないようにしています。
設定ファイルの操作は [nginx-conf](https://www.npmjs.com/package/nginx-conf) を使っています。ちょっと癖のあるモジュールで、conf.die()せずにアプリを落とすとファイルを壊す事があります。。。

タスクバー作成
----

https://github.com/progre/nginx-rtmp-frontend/blob/master/src/ui/trayicon.ts
タスクトレイアイコンが超簡単に作れるのもElectronの魅力の一つだと思っています。
特に.NET FrameworkだとまともにAPIが提供されてない(※)のが辛かったですが、Electronだとあっという間です。
※Windows.Formsという古いGUIライブラリにしかない

多言語対応
----

https://github.com/progre/nginx-rtmp-frontend/blob/master/src/public/index.jade
https://github.com/progre/nginx-rtmp-frontend/blob/master/src/public/js/app.ts
レンダラープロセスの多言語対応は [i18next](http://i18next.com/) を使用しています。
あまりパフォーマンスとか深く考えずに、jade側に ```.i18n-hogehoge``` ってクラスを書いておけばよろしく文言を当て込んでくれるようにjQueryに頑張らせています。

Electronでのログ出力
----

https://github.com/progre/nginx-rtmp-frontend/blob/master/src/index.ts
Electronのブラウザープロセスのconsole.logは文字化けしたりなんかうまいこと出してくれません。
[log4js](https://www.npmjs.com/package/log4js) をコンソール出力モードにして使うといい感じにコンソールにログを出せました。

お手軽アプリアイコン作成
----

[https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html](https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html#foreground.type=text&foreground.space.trim=1&foreground.space.pad=0&foreground.text.text=nrf&foreground.text.font=&foreColor=fff%2C100&crop=0&backgroundShape=square&backColor=ff5722%2C100&effects=shadow)
アイコンに時間をかけたくなかったので、Androidアプリ用アイコン作成のWebサービスでお手軽に作成しました。

マルチプラットフォーム自動パッケージ作成
----

https://github.com/progre/nginx-rtmp-frontend/blob/master/.travis.yml
[Travis](http://travis-ci.org/) さんに一式作成をお願いしていますので、 [release-it](https://www.npmjs.com/package/release-it) でバージョン更新＆タグ打ち＆pushしてほっとくとビシッとリリースバイナリを [Releases](https://github.com/progre/nginx-rtmp-frontend/releases) に置いてくれます。

今後
====
* ブラウザープロセス側の多言語対応<del>忘れてた</del>
* HTMLのパーツの重複やjQueryのつらみがあるのでReactかAngular2を試す
Dancing D Men Generator

まずはこのページを見てくれ，こいつをどう思う？
[Dancing D Men Generetor](http://www.dancingdmen.me:8080/)

すごく．．．殺風景です．．．

#仕組み
さくらのクラウド上に立てたUbuntu Serverで**vibe.d**をWebサーバとして動かしています．UbuntuのデフォルトではパッケージにD言語が無いようなので，[d-apt](http://d-apt.sourceforge.net/)を利用してdmd,dubを導入しました．

画像の生成には18日のD言語くんアドベントカレンダー[^1]で紹介された**素晴らしいジェネレータ**を使いました．このジェネレータはアルファベットと空白の印字ができるepsファイルなので，これを元にフォームのリクエストを合成してImageMagickに流しこんでいます．ImageMagick最高！！！！

生成した画像はmd5をpermalinkのアドレスとして保存しました．**D言語には標準で種々のハッシュ関数が揃っている**[^2]ので大変助かりました．

ソースは（後で上げる）にあります．

#やりたいこと
- SPAにしたい．
- 少なくとももうちょっとかっこよくしたい．
- シェアボタンをつけたい．
- Twitter botつくりたい．
- なんか画像の大きさがおかしい．
- FireFoxで画像がダウンロードできない．
- 上2つの原因たぶんHTTPのヘッダが正常になってないからだと思う．正しいやり方がわからない．
- ページ自体がD言語くんで暗号化されたものをつくりたい．

有識者の助言お待ちしております．
今日のアドベントカレンダーでもう一つの方をこれから書くので後でいい感じにします．．．

[^1]: [Dancing D men](http://qiita.com/amama/items/a8788287c6c57872169b)
[^2]: https://dlang.org/phobos/std_digest_digest.html
よいプログラムの5原則

当たり前のことではあるが、プログラミング作法を語る前にこれらを明文化したい。
「Rubyらしい」などといった感覚的な表現は好ましくない。

1. バグを生みにくい
* 理解しやすい
* 仕様変更に強い
* 移植性が高い
* 実行効率がよい
はてブ ホットエントリーを一覧表示してくれるCLIツールを書いた


## はじめに

この記事は、[Go Advent Calendar 2015](http://qiita.com/advent-calendar/2015/go) 19日目の記事です。

Golang初心者が、勉強を兼ねてCLIツール作ってみました。

ちなみにGolang経験値は以下のみです...

+ [A Tour of Go](http://tour.golang.org/welcome/1) 完了
+ [【増枠】「最近、Go言語始めました」の会～GoConWinter開催前の入門者向けLT大会&交流会～](http://connpass.com/event/22536/) 参加
+ [Go Conference 2015 Winter](http://eventdots.jp/event/573121) 参加
+ このCLIツール作成時間 5H

## 作ったもの

[はてブ ホットエントリー](http://b.hatena.ne.jp/hotentry)の一覧を表示してくれるコマンドラインツール「gotebu」
https://github.com/massa142/gotebu

![Screenshot.png](https://qiita-image-store.s3.amazonaws.com/0/19111/0ebb6769-b768-6c88-d7fe-d882ec9b1fef.png "Screenshot.png")

はてブを情報収集の中心として使っている人は頻繁にブラウザやアプリではてブを覗いてると思いますが、開発中の息抜きにターミナルから確認できればより捗るなーと思ってGolangで書いてみました。

[はてなブックマークドキュメント一覧 - Hatena Developer Center](http://developer.hatena.ne.jp/ja/documents/bookmark)
ここ見た限りホットエントリーのデータは引っ張れなさそうだったんで、スクレイピングして取ってきてます。

## 参考にしたもの

+ [コマンドラインツールについて語るときに僕の語ること - YAPC::Asia Tokyo 2014](http://yapcasia.org/2014/talk/show/b49cc53a-027b-11e4-9357-07b16aeab6a4)

+ [「commit-m: GitHubコミットメッセージの文例が検索できるサービス」がとても便利だったのでcliから使えるコマンド書いた](http://yuroyoro.hatenablog.com/entry/2015/11/10/132620)

ソースコードに関しては、この[@yuroyoro](https://twitter.com/yuroyoro)さんの[gommit-m](https://github.com/yuroyoro/gommit-m)を大幅に参考にしましたm(_ _)m

## おわりに

gotebuのおかげで、はてブライフをより楽しむことができそうです！ʕ◔ϖ◔ʔ

今回はじめてGolangでモノを作ってみたんですが、以下ざっくり感想です。

+ [A Tour of Go](http://tour.golang.org/welcome/1)をやれば、基礎はOKそう
+ Golangは設計がシンプルで書いてて楽しい
+ はじめの学習コスト低い(気がする...)
+ IntelliJのGoプラグインがとても快適
+ goqueryはお手軽で良い
+ Advent CalendarもGoConも盛り上がっていて、初心者が飛び込みやすい
+ この前のGoConに未経験な身分で参加して申し訳なかったです><
ESP-WROOM-02 > UDP > echo server

```txt:動作確認
- ESP-WROOM-02
- ユニーバサル基板実装
```

使用したユニバーサル基板は以下。
http://qiita.com/7of9/items/bc96d1cf17d4d87e1fcd

UDPの通信を受けたらエコーバックするプログラム。

## プログラム
[v0.1 @ github](https://github.com/yasokada/esp8266_151219_udpEcho/releases/tag/v0.1)

## 使用方法

TemplateWifiConfig.hを wifiConfig.hとして、中身のSSIDとパスワードを書き換える。

<font color=red>wifiConfig.hはリポジトリにpushせず、ignore扱いすること</font>


ESP-WROOM-02に書き込んだら、以下のように実行する
- シリアルモニタを起動 (115200 bps) または、Tera Termなど他の端末でもいい
- ESP-WROOM-02をFlash Boot Modeで起動する
- シリアルモニタにIPとポート番号が表示される
- そのIPとポート番号にUDP送信すると、エコーバックされる

## 補助ソフト

ESP-WROOM-02にUDP送信するのは、以下を使った。
[unity-150830-udpSender](https://github.com/yasokada/unity-150830-udpSender)

## 実行の様子

### ESP-WROOM-02側
起動して少ししてからWiFi接続が完了し、Local IPとLocal portの表示がされる。

received以降は、実際にUDP送信を受けて、エコーバックしているタイミングで表示される。

![qiita.png](https://qiita-image-store.s3.amazonaws.com/0/32870/c9da4b0d-aba8-9109-09c7-b3f398a904dd.png)

### udpSender側
Input Fieldに送信先と文字列を入れて、Sendボタンを押して使う。
Sendボタンのすぐ上にある、青色(背景)に白抜きの文字が受信されたもの。エコーバックなので同じ文字列が表示される。

![Screenshot_2015-12-19-22-45-00.png](https://qiita-image-store.s3.amazonaws.com/0/32870/8785459d-8917-fa79-c1d2-afa32d628dce.png)

## 用途
エコーバック機能を使って、機器のバッテリー試験ができそう。

近日中に整備して行う予定。

ESP-WROOM-02が色々な電池でどれほど動くか把握したいため。

ESP-WROOM-02自体のIPアドレスとポートをシリアルモニタ以外で確認する方法は要改善。
Re: Pythonのlambdaがダメダメな^H^H^H^H^H使い方が難しい件

@buchio さんの書かれた [Pythonのlambdaがダメダメな^H^H^H^H^H使い方が難しい件](http://qiita.com/buchio/items/29428003d00726607f72) という記事に反応してみます。

# どうしてこうなったか

ローカル変数はその裏で領域が確保されていると考えると理解しやすいと思います。 lambda 内で参照しているのは（定義時点で見えている）変数の値そのものではなく領域です。つまり、元記事の test1 は以下のコードと等価です。

```pycon
>>> def test1_aux():
...     env = [None]
...     funcs = []
...     for i in range(10):
...         env[0] = i
...         funcs.append(lambda a: a+env[0])
...     return funcs
... 
>>> print [f(10) for f in test1_aux()]
[19, 19, 19, 19, 19, 19, 19, 19, 19, 19]
```

変数 i のスコープが for 文の内部に限定されていないのは確かに若干分かりにくい挙動ですが、それ以外は特におかしなところはないと思います。

ちなみに、 for 文と関係の深いリスト内包表記については、 Python 3 からは変数を外側のスコープからは参照できないようになりました。

```pycon:python2
>>> [x for x in range(3)]
[0, 1, 2]
>>> x
2
```

```pycon:python3
>>> [x for x in range(3)]
[0, 1, 2]
>>> x
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
NameError: name 'x' is not defined
```

# どうすればよかったか

Python では任意のクラスで \_\_call\_\_ メソッドを実装すると呼び出し可能になります。そのため、クロージャーが必要なところでオブジェクトを使えばいいです。

```pycon
>>> class Adder(object):
...     def __init__(self, i):
...         self.i = i
...     def __call__(self, a):
...         return a + self.i
... 
>>> def test_callable():
...     funcs = []
...     for i in range(10):
...         funcs.append(Adder(i))
...     return funcs
... 
>>> print [f(10) for f in test_callable()]
[10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
```

Python では、関数やオブジェクトを使った方が可読性が高くシンプルになりやすいことから、単純な式以外では lambda を使わない方がより Pythonic であるとされています。