OmniAICreator/Qiita-1.07M huggingface dataset:
開発の為のゲーミフィケーション

このエントリは[Classi Advent Calendar 2016](http://qiita.com/advent-calendar/2016/classi) の23日目です。

Classiではサーバーサイド開発を担当しています。
普段は会長と呼ばれていますが本当に役職があるわけではありません。

今回は社内で実施しているゲーミフィケーションの試みについて紹介しようと思います。

#ゲーミフィケーションとは
wikipediaによると**課題の解決や顧客ロイヤリティの向上に、ゲームデザインの技術やメカニズムを利用する活動全般**のことらしいです。
ゲーミフィケーションも色々ありますが、今回は開発に導入したら面白いんじゃねという記事です。

#切欠
↑でも書いたのですが普段は会長(kaicyou)と呼ばれてますが偶々Slackで課長(kacyou)とtypoされたことから呼び名が課長に降格したので、頑張ってタスクをこなして会長に復帰しようという事で開始されました。

#課長、出世の道ルール
以下の基準でポイントを貯めると1周間毎に集計してポイントに応じた役職で呼ばれるようになります。
評価点としてはタスクを終わらせるのは基本として問題点の発見や周りを助けたりという点に重きが置かれています。

## ポイント増減
* 実装が終わったら見積もりポイント分の得点を付与
* 見積もりポイントより早めに終わった分（実工数）だけ+1ポイント
* 見積もり期間をオーバーしたら1日おきに-1ポイント減る
* 実装後のテストでバグが見つかったら-1ポイント（バグ内容による）
* 実装とは別に挙げているissueの対応をしたらissue内容に応じたポイントを付与（チームで決める）
* レビューで鋭い指摘をしたら+1pt
* 他の人の作業を巻き取ったら、該当機能の見積もりポイント+3pt
* 改善点を見つけてissueにする+0.5pt
* 既存担当機能の修正を期限内に実施したら+0.5〜1pt（期限超過は-1pt）
* 寝坊-1pt 回数に応じてフィボナッチ数列で増加(1,1,2,3,5,8...)
* ミーティングをすっぽかす-1pt 回数に応じてフィボナッチ数列で増加(1,1,2,3,5,8...)
* 仕様がキメラな担当機能を他の人が引き継げるようにする+100pt

注1.見積もりはプランニングポーカーで算出しています。

## 役職一覧
|役職|必要ポイント|ガイドマップ|
| --- | --- | --- |
|会長（取締役会長）|40|issueの対応を色々やった場合|
|社長（代表取締役社長）|33|2つ巻き取った場合|
|副社長（代表取締役副社長、取締役副社長）|28||
|専務（取締役専務、代表取締役専務）|24|1つ巻き取った場合|
|常務 （取締役常務）|18|普通に進むとココまで|
|監査役|15||
|執行役員|12||
|本部長または事業部長|9||
|部長|6||
|次長|3||
|課長|0|11月からstart|

注1.18ptは開始時に残っていたタスクの総見積ptです。

# 12/23現在
毎週火曜日に集計しているので正確には12/20現在ですね

* ＋ポイント合計  38.5
* －ポイント合計 -10.0
* 合計 28.5

残っているタスク 見積pt 5(但し1日遅れ)
+は主に別の作業が忙しかった人のタスクを巻き取って稼いでいます。あと一部タスクが難しいと思っていたら意外に簡単だったのでボーナスがちょっと付いてます。
-は主にミーティング忘れが2回と寝坊が4回です。

# 傾向
* 今のチームは来年度2017年4月に向けた機能改善の作業をしてますが、別の作業を持ってたりするので別件が忙しいときに作業を巻き取ると評価が高くなります。
* 問題点を見つけるとissueを作ってから自分で修正するとissue+修正分のptがつくのでちょっとお得。

# やってみた感想
* 俺の仕事じゃないわー系を担当するとちゃんと評価されるのでモチベーションの維持にはいいんじゃないかと(勿論これが無くてもやりますよという前提はありつつ)
* 忙しくても問題点はissueするだけでもちゃんと評価されるので、忙しいから後にしよう=>そのまま忘れるのコンボのリスクが下がります。
* 寝坊リスク辛い(次は-5なので1週間分くらいの作業と相殺desu)

# あるかもしれない質問
* 会長になるとなにかメリットが？
  * 今回は物的報酬はありません。呼び名が会長に戻るだけです。
* チーム全体で実施してるの？
  * 評価等はチームでやっていますが、ptを集計するのは私だけです。チームでやる場合はptの配分とかいろいろ考えないと駄目そうだなーと思っています。 
* 寝坊しすぎでは？
  * 反論の余地がありません・・・

# まとめ
というわけで楽しく開発するための一例ということでこの記事を書きました。
私のチームは実験ということで私一人でしたが、チームで導入して一番貢献したひとにランチ奢ったりしてもいいかもしれませんね。
参考になれば幸いです。

それではまた

#一言
そもそも名前で呼ばれたい人生だった
しかし同じ姓の人が組織にいるので叶わぬ願いなのである
皆さんクリップボード履歴使ってますか？ テキスト編集が捗りますよ！

コピー＆ペースト、略してコピペ。みんな大好きなコピペ
でも、クリップボードは直前の1つを記憶してくれるのみです。

そこで、「クリップボード履歴ソフト」の登場です！

実際の紹介は作者様のサイトをご覧になるのが一番だと思います。
[amuns:code](http://www.amunsnet.com/)


ちなみに、クリップボードの操作は次の操作がお勧めです。

コピー：<kbd><kbd>Ctrl</kbd> + <kbd>Insert</kbd></kbd>
貼付け：<kbd><kbd>Shift</kbd> + <kbd>Insert</kbd></kbd>
切取り：<kbd><kbd>Shift</kbd> + <kbd>Delete</kbd></kbd>

Cliborを表示するホットキーの割当（自分で設定）：<kbd><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Insert</kbd></kbd>

この方法なら左手は、<kbd><kbd>Ctrl</kbd></kbd> か <kbd><kbd>Shift</kbd></kbd>、場合により <kbd><kbd>Alt</kbd></kbd> を操作し、右手は次のキーを押せるようにします。
<kbd><kbd>Insert</kbd></kbd>、<kbd><kbd>Delete</kbd></kbd>、<kbd><kbd>Home</kbd></kbd>、<kbd><kbd>End</kbd></kbd>、<kbd><kbd>PageUp</kbd></kbd>、<kbd><kbd>PageDown</kbd></kbd>、<kbd><kbd>←</kbd></kbd>、<kbd><kbd>↑</kbd></kbd>、<kbd><kbd>↓</kbd></kbd>、<kbd><kbd>→</kbd></kbd>

クリップボード履歴ツールと合わせて、編集作業が2倍、3倍違うのではないかと思います。

以上
Python > coding rule > PEP8 > read_chpoint.py:20:1: E302 expected 2 blank lines, found 1

```txt:動作環境
GeForce GTX 1070 (8GB)
ASRock Z170M Pro4S [Intel Z170chipset]
Ubuntu 14.04 LTS desktop amd64
TensorFlow v0.11
cuDNN v5.1 for Linux
CUDA v8.0
Python 2.7.6
IPython 5.1.0 -- An enhanced Interactive Python.
gcc (Ubuntu 4.8.4-2ubuntu1~14.04.3) 4.8.4
```

Pythonで書いたコードのPEP8チェックを試している。
参考　http://qiita.com/clarinet758/items/312e95ee1513560dfdd1

```txt:実行
$ pep8 read_chpoint.py | head
read_chpoint.py:20:1: E302 expected 2 blank lines, found 1
read_chpoint.py:21:1: E101 indentation contains mixed spaces and tabs
read_chpoint.py:21:1: W191 indentation contains tabs
...
```

コードの該当部分は以下の`wrap_fromfile()`のdefの行。

```read_chpoint.py
import numpy as np
import array
import sys

'''
v0.5 Dec. 23, 2016
    - wrap_fromfile() takes [num] arg
v0.4 Dec. 21, 2016
    - read from "auxiliary" file [auxfp]
        + add read_auxiliary_info()
v0.3 Dec. 19, 2016
    - add wrap_fromfile()
    - read [inprodR],[prev_err],[resid_scale]
v0.2 Dec. 19, 2016
    - fix bug > read [local_nRows] for "size_t" type
v0.1 Dec. 18, 2016
    - read_chpoint_file() > read [ind_m],[local_nRows],[niter],[counter]
'''

def wrap_fromfile(rfp, typecode, num):
	res = array.array(typecode)
...
```

### 対処

コメントの下は１行の空白行にしていたが、２行にするようだ。

```read_chpoint.py
import numpy as np
import array
import sys

'''
v0.5 Dec. 23, 2016
    - wrap_fromfile() takes [num] arg
v0.4 Dec. 21, 2016
    - read from "auxiliary" file [auxfp]
        + add read_auxiliary_info()
v0.3 Dec. 19, 2016
    - add wrap_fromfile()
    - read [inprodR],[prev_err],[resid_scale]
v0.2 Dec. 19, 2016
    - fix bug > read [local_nRows] for "size_t" type
v0.1 Dec. 18, 2016
    - read_chpoint_file() > read [ind_m],[local_nRows],[niter],[counter]
'''


def wrap_fromfile(rfp, typecode, num):
	res = array.array(typecode)
	res.fromfile(rfp, num)
...
```

上記の修正により関連エラーがなくなった。

```txt:実行
$ pep8 read_chpoint.py | head
read_chpoint.py:22:1: E101 indentation contains mixed spaces and tabs
read_chpoint.py:22:1: W191 indentation contains tabs
read_chpoint.py:23:1: W191 indentation contains tabs
read_chpoint.py:24:1: W191 indentation contains tabs
read_chpoint.py:26:1: E302 expected 2 blank lines, found 1
read_chpoint.py:27:1: W191 indentation contains tabs
read_chpoint.py:28:1: W191 indentation contains tabs
read_chpoint.py:28:35: E261 at least two spaces before inline comment
read_chpoint.py:28:36: E262 inline comment should start with '# '
read_chpoint.py:29:1: W191 indentation contains tabs
```
技術英語 > [The moral of the story is that] if you dig deep enough, you can [make some surprising gains]. / learn a lesson / I don't know, Miltia, but we should teach her a lesson.

@ Code Complete (No. 19613 / 36077)

> **<font color=red>The moral of the story is that</font>** if you dig deep enough, you can **make some surprising gains**.

http://ejje.weblio.jp/content/the+moral+of+the+story
> 話の教訓

意訳 「教訓としては、もし十分に（物事を）掘り下げたとしたら、驚くほどの進展を遂げることができる」

<hr>
関連して思い出したのは

http://eow.alc.co.jp/search?q=learn+a+lesson
> learn a lesson
> 教訓を得る［学ぶ］、戒めとする

Star Trek VoyagerかDeep Space Nineにおいて、敵がクルーに対して「これからお前は失敗をするだろう」と伝える場面でlearn a lessonが出ていた気がする。

> You'll learn a lesson from it.

<hr>
(追記 2016/12/23)

職場では見ないほうがいいかもしれない動画 (アニメ動画)
[RWBY "Yellow" Trailer](https://www.youtube.com/watch?v=QCw_aAS7vWI)
の3:15から

> Melanie, who is this girl?
> I don't know, Miltia, but we **should teach her a lesson**.

そして、戦闘に加わる二人。

「痛い目」に合わせようとしている。
MySQLのtime型の合計

## サンプルテーブル

- テーブル定義

| Column      | Type |
|-------------|------|
| time_onsite | time |

- データ

| time_onsite |
|-------------|
| 00:00:01 |
| 00:01:00 |
| 01:00:00 |

## time型を秒に変換
``` sql
select
    time_onsite,
    time_to_sec(time_onsite) as sec
from
    time_table
;
```
| time_onsite | sec  |
|-------------|------|
| 00:00:01    | 1    |
| 00:01:00    | 60   |
| 01:00:00    | 3600 |

## time型の合計

``` sql
select
    sum( time_to_sec(time_onsite)) as total_sec,
    sec_to_time(sum( time_to_sec(time_onsite))) as total_time
from
    time_table
;
```

| total_sec | total_time |
|-----------|------------|
| 3661      | 01:01:01   |
もう少し押さえておきたいGitの仕組み(リモート編)

# こんな人が対象
- [これだけは押さえておきたいGitの仕組み](http://qiita.com/nejiko96/items/5cc10af6d706fabd0c5c)を読んだが、  
  サーバー絡みのところが書かれていなくて結局使いこなせない

# サーバーの仕組みも基本は難しくない(かも)
- 以下の説明は簡単のために細部を思い切ってはしょっているので、  
  正確でない記述も含まれています

# ローカルリポジトリとリモートリポジトリ
- ローカルリポジトリ(ローカル)  
  ローカルの開発環境にある.gitフォルダが、  
  コミット/タグ/ブランチを管理している
- リモートリポジトリ(リモート)  
  サーバーにも.gitフォルダがあり、  
  ローカルリポジトリと同様コミット/タグ/ブランチを管理している
- ローカルとリモートの間でコミットをアップロード/ダウンロードしてやり取りする
- SourceTreeで見ると１つのコミットグラフ上で  
  ローカル/リモート両方のコミット/ブランチが確認できる  
  ※名前が「origin/」で始まっているブランチがリモートブランチ

# リモート関連の操作
- クローン  
  リモートリポジトリを丸ごとダウンロードしてローカルリポジトリを作成する
- フェッチ  
  SourceTreeに表示されるリモートの状態を最新にする  
  ローカルの状態には影響を与えない
- チェックアウト  
  通常はブランチを切替えるだけだが、リモートブランチをチェックアウトした場合、  
  ローカルブランチがなければ作成し、リモートブランチのコミットをダウンロードする  
- プル  
  作業中ブランチのリモートに新しくできたコミットをローカルにダウンロードする
- プッシュ  
  作業中ブランチのローカルに新しくできたコミットをリモートにアップロードする  
  リモートにブランチがなければ作成する

# 注意点
- とりあえずフェッチ  
  ローカルが古い状態のままで作業を進めると、  
  マージの際にコンフリクトを起こしやすくなる等あまりいいことがないので、  
  何か操作をする前にはフェッチをして、リモートの状態を確認するのがおすすめ  
- チェックアウトとプル  
  リモートブランチをダウンロードする操作は、ローカルブランチの有無によって  
  「なければチェックアウト、あればプル」という使い分けが必要  
  ローカルブランチのアップロードに関してはプッシュしかないので使い分けは不要
Multiversion Concurrency Control(MVCC) その3

## Multiversion Serialization Graph(MVSG)の導入

マルチバージョンの環境でのトランザクションの順序を整理する為に、**Multiversion Serialization Graph**という考え方を導入する。
グラフとは頂点と辺からなる構造で、各頂点は各トランザクションの各ステップである。
辺を引くルールは簡単で

- あるトランザクションAが書いた(=新バージョンを生成した)値を別のトランザクションBが読む場合、A→Bの関係を取る
- あるトランザクションAが書いた(=新バージョンを生成した)後で別のトランザクションBが書く(=新バージョンを生成する)場合、A→Bの関係を取る

という2つのルールでトランザクションステップの間に辺を引く。文章で書くとわかりにくいので図で書いて説明すると例えば以下のようなマルチバージョンスケジュールがある。

![nomvsg.png](https://qiita-image-store.s3.amazonaws.com/0/1716/45019442-decb-c73c-7f46-f58bab6b564b.png)

この中で、上に書いたルールの通り辺を描画すると

![mvsg.png](https://qiita-image-store.s3.amazonaws.com/0/1716/8aeee447-2888-5e57-4513-9dc0fe72598c.png)

このように辺が整理される。（なお初期状態はTx0というトランザクションがすべて書き込んだものとして扱い、最終状態も1つのステップと見做す）
こうして作ったグラフから、辺の関係をそのままステップからトランザクション同士の関係に持ち込むと

![mvst_b.png](https://qiita-image-store.s3.amazonaws.com/0/1716/671317cb-e02d-17e6-3126-733e2ad720d9.png)

もう少し簡略化すると

![mvsg_t.png](https://qiita-image-store.s3.amazonaws.com/0/1716/b973a62d-c706-96c2-4844-fff02bab03f2.png)

こんな感じに整理される。(最終状態は便宜的にTx∞と書いた）
こうして作った有向グラフが**円環を作らない**場合、そのマルチバージョンスケジュールは**MVSR**である。
上の例は円環を作っているので**MVSR**ではない。

証明としてはその有向グラフをトポロジカルソートして得られた順列で各トランザクションをシリアルに実行した場合のスケジュールと**Read-From関係**が一致するからである。

眠いので続きはちょっと後で更新します
(随時更新)　Nimを活用したUI/UX開発をCoreFoundation経由で。

<font color="Blue">
(随時更新)　
斜め上の意味で(？)、
(Swift + Objective-C)のポテンシャル ≒ (Nim+Spry)のポテンシャル
と捉えている。
なら、メジャーなSwiftとObjective-Cを使っておけばいいじゃんとなりそうだが、
なかなかそうはいかなそうなのが、クロスプラットフォーム開発とIoT開発。
要するに、iOS/Darwin以外の環境でSwiftを動かすのが、どうやら至難の業なのだ。
...Objective-Cを介したブリッジあたりの実装コストが高いためか。

ということで、
Objective-C + (Nim+Spry)
という組み合わせで、
クロスプラットフォーム開発やIoT開発にチャレンジしたいと思っている。
iOS開発を仕事で行っているわけではないため、
ゆっくりなメモとはなってしまうが、Ｃで実装されているCoreFoundationを意識すべきとの方向性は定まったため随時追記のメモ書きをさらしはじめる。

</font>

#CとObjective-cの関係
Objective-cの入門書を読むと、
C++と違って、Objective-cはC言語そのものだよ、
と書いてある。
それ自体は間違っていないのだが、OSを書いているだけあって、
Objective-C クラスの依存関係はかなり複雑。

ビジュアル化例
![Hackbook の依存関係図](http://cdn-ak.f.st-hatena.com/images/fotolife/s/shu223/20140310/20140310030019.jpg)

出典　http://d.hatena.ne.jp/shu223/20140309/1394388414

Nimは、Objective-cにコンパイル可能だが、この世界に直接入り込むのは手間が大きくメリットが感じられなかった。ということで、NimをC言語にコンパイルし、
Objective-cと相互インターフェースすることとしたい。

ちょうど、
https://teratail.com/questions/14278
のQAで良い図式を書いてくださっていたので引用しておく。

## Ｃ言語とObjective-Cとの呼び出し関係

>
Ｃ言語　　 |　　Objective-C
関数＜－－＋ー－－メンバ関数　　○
関数ーーー＋ーー＞メンバ関数　　×
関数ーーー＋ーー＞関数　　　　　○
　　　　　｜

## Ｃ言語とObjective-Cとの組み合わせ方

>
Ｃ言語　　 |　　　Objective-C
関数＜－－＋－－メンバ関数
　｜　　　｜　　　↑
　＋ーーー＋ー＞ 関数

すなわち、相互呼び出しは、
Objective-Cのコード内にC言語のラッパーを用意すれば良い。

#CoreFoundationをお手本に
Mac OS もiOSも低レベルのところはC言語で実装されている。
その中でも中心的なライブラリのひとつが、CoreFoundation。

実用ライブラリであるCoreFoundationの使われ方を学べば、

ＣにコンパイルされたNim/SpryとObjective-Cとの実用的な組み合わせ方が見えてくるものと考える。

---------(ここまで2016.12.23)-------------
Webサイト、作るその前に〜 キックオフで決めておきたいこと、諸々まとめ

##はじめに
さあ、作るぞ！その前に！


実際に作り出す前に、確認と決め事、準備を行うのは大事。


特にチームで制作を行う場合、ここを怠ると後で苦しみます、確実に。


特にマークアップその前に、と言った感じの話が多いです。


ざっくりですが、まとめ。




##制作前に決めたいこと


###制作仕様書


どこまで対応するのか、どこまでは切り捨てるのかを決めます。これは案件によって変わってきますね。
また、開発環境もこの時点でしっかり足並みを揃えておきます。


- PC どのブラウザのどのバージョンまで対応するのか
- スマホ 対応機種を設定、なるべく実機で確認
- HTML、CSSのバージョンはどうするのか


着地点を決めた上で制作しないとコーディングの際にズレが発生したり、
無駄な努力も発生します。
やること、やらないことを決めちゃいます。


###コーディングルール


コーディングの記述にルールを決めます。


- インデントするのか
- インデントは何スペース分か
- class、IDのルール決め
- コメントの入れ方


マークアップする人が増えれば増えるほど、癖が後々思いもしない
不具合を起こします。
防ぐためにもしっかり書き方はなるべく細かいところまで統一します。


以下に参考になりそうなガイドラインも載せておきます。


####参考になりそうなガイドライン


[Google HTML/CSS Style Guide まとめ](http://qiita.com/Sugima/items/785644372397595644ba#%E9%96%A2%E4%BF%82%E3%81%AE%E5%88%86%E9%9B%A2) - 天下のGoogleさんのガイドラインの和訳

	
[コーディングガイドライン HTML5版 ver1.0](http://met.hanatoweb.jp/guideline/html5/index.html
) - 大阪の制作会社Qriptのガイドライン、分かりやすい


[新人コーダーに知っておいて欲しい命名則の考え方[画像・ID・class名]｜クロノドライブ](http://html-coding.co.jp/knowhow/tips/naming-rule/
) - 具体的な命名規則の例が表にされていて非常に参考になる


###デザインカンプ


簡単なサイトの場合や、
BootstrapなどのCSSフレームワークを使う場合のclass名をつけるだけで
UIが壊れる場合以外は、
カンプをチェックし、問題なければマークアップしていきます。


###遷移図


ユーザーして移動していく導線を決めます。


特に、大規模に複雑なサイトになる程導線も複雑になります。
しっかり具現化しておくことが重要です。


###webライティング


サイト内に入れる文章です。


クライアントからもらえる場合はいいのですが、
カタログ、雑誌からこちらでリライトする場合もあります。


先に考えてメモ帳などにまとめておいた方が、後からコピペで貼り付けるだけなので
コーディングの手を止めて考えなくていいので楽だと思います。

やりながら考えるとしんどいです。


##スタイルガイド自動生成ツール


今は便利なものがありまして、モジュール一覧ページの自動生成ツールがあります。

残念ながら、まだ試せてませんが、まとめておきます。


[FrontNote -Node.js StyleGuide Generator-](http://frontainer.com/frontnote/)


[StyleDocco](http://jacobrask.github.io/styledocco/)


[KSS · Knyle Style Sheets](http://warpspire.com/kss/)


[Hologram — Style Documentation Build System](http://trulia.github.io/hologram/)


##まとめ


いかがでしたでしょうか？
準備あれば憂いなし、という言葉があるように制作においとも準備が必要です。
もちろんすでに会社で働いている方には当たり前のことばかりでしょうが。


面倒かも知れませんがこれらの事前準備は、作業中に中断してのミーティングを減らすため、
必ず結果的に効率も上がります。


私はスクールに通っている頃から、実際の制作現場を想定して準備を行い、
チームで制作を心がけていました。
今学ばれている方はこれらを踏まえての制作をすることでより実戦に近い経験を得られるのではないでしょうか。
履歴差分の精度が悪くて辛い

この記事は「[Qiita改善案 Advent Calendar 2016](http://qiita.com/advent-calendar/2016/qiita_improvement)」の23日目の記事に該当する。空いていたので個人的に気になる部分を指摘して改善要望としたい。
なお、22日目の記事は @kaitoy さんの「[Qiitaの今のスライドモードはほぼ無価値だと思う件](http://qiita.com/kaitoy/items/60e723938ef6fc26f0e0)」だった。

## 履歴差分の精度が悪くて辛い
例えば以下の差分では、まったく順序の違う文言が差分として扱われており、順番も文言の距離も無関係でめちゃくちゃな差分となっている。（変更として検知されている文言は何十行も離れたまったく別の文章）

![「yumリポジトリ一追加リスト 完全版」の編集履歴   Qiita.png](https://qiita-image-store.s3.amazonaws.com/0/15175/eaa8f6eb-347e-4542-3de9-c2fe6308ba47.png)

これがまた結構な割合で起こるので、ちょいちょい差分をチェックする人間としては何とかしてもらいたいところ。
具体的なライブラリーや差分検知を行うロジックの提案などは残念ながら出来ないが、もう少し精度を上げられないものだろうか。
現状の具体的なロジックやライブラリーの提示などが運営側からあると、そこから技術的な議論が発生して面白いことになると思うが、当アドベントカレンダーへの運営からのコメントは皆無なので期待薄である。


## 下書きの最大数を増やして欲しい
すでに @mdstoy さんが11日目の記事で指摘している [^11] が、他にも要望者が居ることを知ってもらうために当記事でも要望として記載する。

もともと Advent Carendar が1人で執筆する前提ではないと思うので、アドベントカレンダーが25日だからという理屈だと難しいところがあるが、個人的にも下書きが10件ではすぐに埋まってしまう。

運営側としてはそのために Kobito を用意しているのだろうと思われるが（できればそのことを丁寧にコメントする姿勢は見せて欲しい）、例えば職場でメモしたものを帰宅後に清書して投稿したい場合などに Kobito では月額480円か年額4800円を支払って同期することになるが、そのために支払う金額としてはいささか高額すぎるように感じる。「Kobitoのヘルプはありません。」とか言われるし、Changelog もなんか遙か昔のしか残ってないし、バージョンもダウンロードページと Mac 版の最新アップデートで差異があるし。そもそも Windows 版と同期はできるのだろうか。あまり安くない金額でサポートがしっかりしていないとなると、仮に有償の代替案がありますと言われてもはいそうですかと納得するのは難しい。ATOK より高い金額を提示しているのだから、それなりの矜持を見せて欲しい。

[^11]: http://qiita.com/mdstoy/items/933e4112cc2ee9b59b65

## いいねとストックが押下済みかどうか判別しづらい
誰かが既に指摘済みだったと思うが（見つからなかった）、分かりづらい。すでに「いいね済み」と表示されたり、「ストック済み」とポップアップされたりと対策は打たれているようだが、フラットデザインの弊害でやはり直感的な区別がしづらいままとなっている。トレンド上は現状の対策で充分実施済みと言えるとは思うが、押下済みの場合は陰影を付けるなどの直感的な区別を付けて欲しい。

## マイページから検索するときは `user:` を自動で付加して欲しい
毎度 `user:bezeklik` とタイプするのが面倒。いま気づいたが http://qiita.com/mine から自分の投稿に絞った検索ができるようだ。マイページを起点に遷移する人間を考慮してもらえるといいかもしれない。トップページへ行ったりマイページへ行ったりと忙しいと大変なので。

## 最後に
当記事が該当するかどうかは読み手によると思うが、このようなサービスを運営していると一方的な要望という名の要求が絶え間なく舞い込み苦労していることと斟酌する。ただ、一般消費者に向けたB2Cのサービスというのはそういうものなので、Qiita が今後継続的に発展していくためにも常識の範囲で真摯に対応してもらいたい。必ずしも要望に応えることだけが真摯な対応というわけではなく、技術的な課題や経営上の理由など、理解可能な形で説明していく姿勢を見せるというのもひとつだろう。今後の益々の発展を期待して本記事を終わりとしたい。


24日目の記事は @richmikan@github さんの「「規約違反」とした投稿への対処が暴君にしか見えない」の予定。
スマホサイトの製作時に注意することと対策まとめ

##始めに

スマートフォンのサイト制作の際に注意、意識すべきこととその対策法を簡単にまとめました。

あくまでスマホサイト制作のまとめであり、レスポンシブデザインのまとめではないです。

(また別の注意点があるということですね)


##スマホサイトの制作時に注意すること


###デバイス幅は固定されている
PCとは違い基本的にスマートフォンではブラウザを縮小、拡大はできません。
デバイス幅は固定幅になります。


####どうする？
viewport設定をしてあげます。

```html
<meta name="viewport" content="width=device-width,initial-scale=1">
```
viewportとは
>meta要素に name="viewport" を追加すると、文書の表示領域を設定することができます。

[HTML5/ページ全般/meta要素 表示領域を設定する - TAG index](http://www.tagindex.com/html5/page/meta_viewport.html)

詳しい説明は割愛しますが、スマホの時はこの幅で表示しますよ、って設定してあげることができます。

スマホの画面の大きさに合わせて表示幅を変化させてあげることも出来ます。

(機会があればviewportの詳しい記事も書くかも。)



###デバイス幅が機種でバラバラ
iPhone5,6,7にandroidに機種によってバラバラ。ほぼ無限です。


####どうする？
リキッドデザインで作ります。
幅はpxで指定しません。

```css
	% rem em
```

上のviewportで表示領域を変化させたら、
次は画像や文字をブラウザの大きさに合わせて変化するように設定します。


[px,pt,%,em 文字の大きさ 数値一覧表 - 山崎はるかのメモ](http://www.nda.co.jp/memo/pxpt.html)




###wi-fiのない3G回線など遅い環境を想定 
ブロードバンド環境やwi-fiのないところでは、スマホはまだまだかなり遅いスピードになるかもしれません。

重いサイトは表示に時間がかかってしまうので、軽量化を考えなければいけません。

画像やJavaScript、動画を極力減らします。

またはスマホ用の軽量なものを用意するといいでしょう。圧縮はもちろんしましょう。


####どうする？
CSS3のanimationの利用も考えます。
JavaScriptでの表現に近いことがanimationでも可能だったりします。

状況に合わせて使い分けるのも大事です。


[animation－CSS3リファレンス](http://www.htmq.com/css3/animation.shtml)



###タッチパネル操作で作る 
スマホでは、タッチ、フリックなど指を使って操作します。よってマウスやスマートパッドを用いて小さなカーソルでの操作とはまた違う画面設計が必要です。

手の大きさ、小さな画面の中でも使いやすいことを意識しなければいけません。


####どうする？
直感的に操作できる設計にします。

タッチ操作の指の大きさを意識します。



##まとめ
大きく分けてですが、PCサイトの制作と比べてもこれはどの違いが出てきます。

レスポンシブのサイトにしてもそのまま縮めるだけでは、これらの使いやすさは実現しません。

ユーザビリティを意識した設計をしましょう。
クリスマスncursesアプリ特集2016

今年知ったTUIアプリのポエム
みんなkernelとかやってて怖いので, 僕のは恐くない担当です.

# ファイラー
## ranger
![ranger.png](https://qiita-image-store.s3.amazonaws.com/0/136515/27b2e312-b03e-68a3-29ad-440afb61489d.png)

他にファイラーというとMidnight Commander(mc)が有名だけど, こっちのが見やすい
@ssh0 さんの記事が参考になります.
[コマンドラインで動かすファイルマネージャrangerの設定](http://qiita.com/ssh0/items/fe85da119c93333ba34e)

# WI-FI
## wifi-menu(netctl)
![wifi-menu.png](https://qiita-image-store.s3.amazonaws.com/0/136515/152bf681-488f-dd90-96a6-43e6ad0c54bd.png)

アクセスポイントの選択,パスワードの入力をすると繋げてくれる.
次回接続時はパスワードを保存しといてくれる.
前は独自のwpa_supplicantのラッパーを書いていたが, これ見つけて小躍した.
あと最近Network ManagerにTUIフロントエンドがあると知った.

# オーディオ
## alsamixer(alsa-utils)
![alsamixer.png](https://qiita-image-store.s3.amazonaws.com/0/136515/c86c2285-2be6-5136-c4fe-51ee0e5cb1b6.png)

alsaの根っこの音量調整ができる.
アプリ別で音量調整できないので今はpamixを使ってる.
なんかイコライズも出来るとか出来ないとか, よくわかんなかった.
だれかTUIでイコライズできるの紹介してくれ...

## pamix
![pamix.png](https://qiita-image-store.s3.amazonaws.com/0/136515/f84d8632-72f6-d2b0-db1b-a0d490a65eba.png)

pulseaudioのアプリ毎の音量調整ができる.
他の実装は試したことないので教えてくれると助かる.

# ローグ
## Cataclysm: DDA
![cataclysm.png](https://qiita-image-store.s3.amazonaws.com/0/136515/9cd67b8a-3085-8eb2-83e6-5ae21fc35e1c.png)

http://en.cataclysmdda.com

正直これの布教の為にこれ書いた.
ゾンビやサバイバル要素を取り入れたローグ.
Don't Starveや7DTDが近いかもしれない.
窓割ったり, 穴掘ったり, 飯作ったり, サイボーグ化したり, 車運転したり, バイク作ったりなんでもできる.
rogueやnethackとは違った面白さがある.
日本語wikiやニコニコ動画などを見ると遊び方がわかると思う.

https://www57.atwiki.jp/cataclyj/
[ニコニコ動画 Cataclysm:DDA](http://www.nicovideo.jp/tag/Cataclysm%3ADDA?ref=tagconcerned)

# 番外編
## make nconfig(linux kernel)
![nconfig.png](https://qiita-image-store.s3.amazonaws.com/0/136515/e56de670-9ded-7e8b-d3be-48c2fbaa4166.png)

実はmake menuconfig以外にもTUIフロントエンドがある.
カーソルキーでツリーの行き来ができる.
でも僕はmenuconfigの色合いが好き.
nconfigの色変えられないのかな(調べてない)

## consomaton
![consomaton.png](https://qiita-image-store.s3.amazonaws.com/0/136515/a005066c-2eec-c3f3-6f4c-46f858b5dae1.png)
http://abagames.sakura.ne.jp/16/consomaton/

セル・オートマトンを題材にしたゲームです.
自分でルールを書いて課題を達成するのだが, プログラミングゲーの中ではかなり良い出来でプログラミング初心者にもオススメできる.
ncursesに移植しようと思ってる(もうありそう).

# あったらいいな
~~SMART見れるCrystalDiskInfoみたいな奴~~
作ったからあるぞオラァン
## CrazyDiskInfo
![](https://raw.github.com/wiki/otakuto/CrazyDiskInfo/images/0.png)
https://github.com/otakuto/CrazyDiskInfo
* wiresharkのTUIフロントエンド. tsharkは実用性ないだろ!(適当)
* もっとイケてるTUIアプリ他にもあるよって方お願いします
忘年会(新年会)シーズンの飲み会を乗り切る方法のまとめ

#はじめに
**この記事はプログラム関連の話ではありませんが,酒づきあいも社会人としての仕事の一つとして捉えて書いています**

忘年会シーズンでお酒を飲むことが多くなりました
我々下戸プログラマにとって**お酒は「バグよりも厄介な存在」**になりえます
私は今日もお酒を飲んで気持ち悪くなりました
(アルコールでスタックがオーバーフローしそうでしたが,今日はなんとか正常終了したみたいです)
そこで忘備録も兼ねて**お酒の対処法について**まとめてみました
もうすぐ忘年会って方,今気持ち悪いって方はぜひとも参考にしてください

*今も酔っぱらっているので日本語がおかしかったら編集リクエストお願いします*
*というかQiitaに書くべき記事なのかが心配です*

#自分なりのポイント
##とりあえずやるべきこと
- すぐに廊下に出れる端っこの席に座る(トイレに行きやすく,目立たない)
- お酒を強要する人の側には近づかない,特に人数が多いと巻き込まれる
- おなかをすかせた状態でなるべく飲まない(アルコールの吸収効率がよくなってしまう)
- 水を摂取する(脱水状態だと具合が悪くなる)
- おなかを温める(肝機能の活性化)
- グレープフルーツやオレンジジュースを飲む(アルコールを分解する酵素を含む)
- おちょこを空けない(つがせない,言葉を使わずに無理であることをアピール)

##嘘を使う方法
- 早めに気分悪いふりをする
- 自動車できたり,電車で寝過ごせないことを伝える
- 「医師にお酒を控えるよう言われているが飲む」と少し飲ませてはいけない空気を作る

気持ち悪いことは体の危険のサイン
**どうしても逃れられそうにないなら素直に言いましょう**
ただ,軽く無理であることを伝えると悪ノリしてお酒を追加される可能性があるので
空気を悪くしたくない気持ちはわかりますが,重たい空気にせざるを得ないでしょう

#参考になるサイト

記事の内容を転載すると怒られそうなので参考になるサイトのリンクをまとめています

- [【下戸におすすめ】お酒を飲まない人が空気を壊さず、飲み会を乗り切るコツ](http://enrique5581.net/work-liquor-drink/)
下戸の上手な振る舞い方と下戸が言われると傷つく言葉が書かれています

- [下戸必見！　お酒が飲めない人のための飲み会サバイバル術](https://doda.jp/careercompass/compassnews/20140707-9648.html)
様々な人の技がまとめてあります

- [飲んだ後、就寝前にすべきこと | 二日酔い対策センター](http://futsuka-yoi.com/after_drinking_and_before_sleep/)
タイトル通り寝る前にすべきことが書かれています

-  [飲み会後の酒酔いを早く覚ます方法【楽になる対処法】| Naverまとめ](https://matome.naver.jp/odai/2139843750004899001)
飲むべきものやツボなど様々な酔い覚ましの方法がまとめてあります

- [お酒を飲みすぎたときの対処法 | 雑学王リサーチくん](http://kireinasekai.com/osakewonomisugita/)
吐くといけないみたいです

- [してはいけない！「飲み過ぎは吐いて解決」| AllAbout](https://allabout.co.jp/gm/gc/299305/)
吐いてはいけない他の理由もあるみたいです
phina.js - JavaScriptで楽しく簡単にゲームが作れるライブラリ

# phina.jsとは

ブラウザ上で動作するマルチプラットフォーム向けのゲームライブラリです。
言語はJavaScriptです。

- ランディングページ | http://phinajs.com/
- github | https://github.com/phi-jp/phina.js
- gitter (slack のようなgithubのチャット)　| https://gitter.im/phi-jp/phina.js
- ドキュメント | http://phinajs.com/docs/
- アドベントカレンダー 2015 | http://qiita.com/advent-calendar/2015/phinajs
- アドベントカレンダー 2016 | http://qiita.com/advent-calendar/2016/phinajs

ドキュメントがほとんどできてないので、サンプルやソースコードを見て使い方を覚えるしかないというのが現状です。

## 歴史

もともと、phina.jsが開発される前にtmlib.jsというライブラリがありました。

- ランディングページ | http://phi-jp.github.io/tmlib.js/
- github | https://github.com/phi-jp/tmlib.js/

phina.jsはtmlib.jsを更に使いやすく、リファクタリングしたものになります。

tmlib.js 自体は @phi さんが、他の言語で作っていたオレオレライブラリをJavaScriptに移植したのがはじまりのようです。

## ゲームの紹介

phina.js (tmlib.js含む)で作られたゲームを紹介します。

### かちゃコム

http://cachacacha.com/
[![image](https://qiita-image-store.s3.amazonaws.com/0/60690/802cbf3f-00a4-d326-150b-b301d2507a29.png)](http://cachacacha.com/)

かちゃコムは @utyo さんが自分の作ったゲームを載せているサイトです。
tmlib.jsの頃から中々あれなゲームから、センス良すぎなゲームまで色々作っています。
短時間で遊べるものばかりなので、ぜひ遊んでみてください。

また、 @utyo さんの書いた phina.jsの記事もあるので、そちらも紹介しておきます。

- [phina.jsでブロック崩さぬを作ろう](http://qiita.com/utyo/items/05f54607bf4c2e876a19)
- [phina.jsでゲームをつくったので制作過程を公開（バラ）します](http://qiita.com/utyo/items/091f57afe0f5a32a7a53)

### Daishi Games

http://github.dev7.jp/
[![image](https://qiita-image-store.s3.amazonaws.com/0/60690/52abaec4-2dd0-b489-7964-8adbb0b19aef.png)](http://github.dev7.jp/)

このサイトは、 @daishi_hmr さんが作ったゲームを公開しています。
phina.js製のゲームは作りかけなので、まだ公開されていないようですが、今後に期待です。

あとは、9leapにもtmlib.js製のゲームを投稿しています。
http://9leap.net/user/daishi_hmr

@daishi_hmr さんの phina.js関連の記事

- [phina.jsでbulletml.jsを使う！](http://github.dev7.jp/b/2016/12/03/phinajsadvcal20161202/)
- [phina.jsとWebGLでいろいろ](http://github.dev7.jp/b/2016/12/22/phinajsadvcal20161218/)


## エディタの紹介

Runstant
http://runstant.com/

Runstant lite
http://lite.runstant.com/

![image](https://qiita-image-store.s3.amazonaws.com/0/60690/647bc76c-1259-b72a-4227-52bee6d6843d.png)

RunstantはJavaScriptのコードを書いてすぐに実行して確認できるエディタです。
特段phina.js専用エディタというわけではないですが、昔は、tmlib.js公式エディタとして、推していたので紹介します。

Runstant lite の方はアカウント登録不要で、開いて書いて保存するだけで、確認できます。
自分が書いたコードはタイトルごとにローカルストレージに保存され、
http://lite.runstant.com/user
このページのPROJECTSから確認することができます。

また、書いたコードは400行程度であれば、コードをURLに圧縮し短縮URLにして、シェアすることができます。

liteじゃない方のRunstantはアカウントの登録が必要ですが、コードの量でシェアに制限がなく、プロジェクト管理もしやすく、他のユーザのコードも見ることができます。

JavaScriptだけでなく、TypeScript, CoffeeScript, Sass, Jade(Pug), Markdown等で書くこともできます。


# あとがき

自分自身tmlib.jsと出会って、JavaScriptが何もわからないところから、見よう見まねでゲームを作り、今ではphina.jsに初期からコミットするまで成長できました。

ドキュメントが少ないので、常に、サンプルや、ソースコードを読まないといけないということもあって、自分の場合はJavaScriptの言語仕様やCanvas系のAPIを深く理解することができました。

ただ、本当はドキュメントが多ければ、もっと楽だったのでは...という思いもあり、早くドキュメントを整備したいと考えています。

興味さえあれば、あとはググってコードをコピペしていくだけでも、ゲームっぽいものを作り始めることができるので、簡単なミニゲームからでも作ってみてください。
dockerでcrowiを動かすまでのメモ


# 目標

 - docker toolbox を使う
 - LAN内に公開する
 - バックアップをとる

# 環境

 - ホストOS：windows 10
 - 接続確認：Mac

# docker toolboxのインストール
 1. windows版インストーラーをダウンロード
  - DockerToolbox-1.12.5.exe
 1. インストール
  - 何も入ってないので全部インストールする

# 仮想マシンを作る

 1. Oracle VM VirtualBox マネージャーを起動
  - 意味はない。仮想マシンが作られるのが見たいだけ
 1. Docker Quickstart Terminalを起動
  - ここで仮想マシンが作られる
 1. クジラが出てきてMinGWが起動すれば完了

# docker-node-crowiを使う

 1. [docker-node-crowi](https://hub.docker.com/r/noobynoob/docker-node-crowi/)を見て、リポジトリをcloneして起動
 1. Kitematic(Alpha)を見ると、４つのコンテナが起動している
 1. dockernodecrowi_crowi_1がcrowiのコンテナなので、WEB PREVIEWからブラウザアクセスしてみる
  - http://192.168.99.100/installer に行くはず

# VirtualBoxのポートフォワーディングをする

 1. 起動しているコンテナを終了させる
  - Ctrl-c or Kitematic(Alpha)からSTOPする
 1. 仮想マシンを終了させる
  - `docker-mashine stop`
 1. 仮想マシンの設定 > ネットワーク > (高度) > ポートフォワーディング
 1. ルールを追加して適当なホストポートをゲストポートの80につなぐ
  - ホストIP、ゲストIPは空白でいい
  - プロトコルはTCP

# 接続確認
 - 仮想マシンを起動する
  - `docker-mashine start`
 - コンテナを起動する
  - `docker-compose up`
 - 接続確認端末からブラウザアクセスする
  - http://ipaddres:port/installer

# バックアップ
 - windows環境だとvolumeをlocalにマウントできない
  - mongodbがファイルコピーできないみたい
 - 諦めてVirtualBoxのスナップショットを使う
炎の型工房 火の型 23日目 : Dartのループ機能!! Scratchと比較してみよう

[<ruby>炎<rt>ほのお</rt></ruby>の<ruby>型<rt>かた</rt></ruby><ruby>工房 <rt>こうぼう</rt></ruby>ScratchとDartでゲームプログラム<ruby>入門<rt>にゅうもん</rt></ruby> Advent Calendar 2016](http://qiita.com/advent-calendar/2016/firefirestyle-studio)
の<ruby>記事<rt>きじ</rt></ruby>です

# ループ<ruby>機能<rt>きのう</rt></ruby>を<ruby>試<rt>ため</rt></ruby>してみよう
<img width="500" alt="v001.png" src="https://qiita-image-store.s3.amazonaws.com/0/54192/10826d94-050e-1039-6408-02f6f4f91d84.png">


ランダムに「hello」と「bye」を<ruby>表示<rt>ひょうじ</rt></ruby>するコードです。
このCodeをDartで<ruby>書<rt>か</rt></ruby>いてみましょう。

```
import 'dart:math' as math;

main(List<String> args) {
  var rand = new math.Random();
  var messages = ["hello", "bye"];
  while(true) {
    print("${messages[rand.nextInt(2)]}");
  }
}
```
となります。

- リストの<ruby>生成<rt>せいせい</rt></ruby>は、var messages = ["hello", "bye"];    
Dartでは、<ruby>文字列<rt>もじれつ</rt></ruby>のListは、
```
var messages = ["hello", "bye"];
```
で、できます。
Scratchと<ruby>違<rt>ちが<rt></ruby>うのは、0から<ruby>始<rt>はじ</rt></ruby>まることです。
"hello"を<ruby>取得<rt>しゅとく</rt></ruby>したい<ruby>場合<rt>ばあい</rt></ruby>は、messages[0]、"bye"を<ruby>取得<rt>しゅとく</rt></ruby>したい<ruby>場合<rt>ばあい</rt></ruby>は、messages[1]とします。

- <ruby>乱数<rt>らんすう</rt></ruby>の<ruby>生成<rt>せいせい</rt></ruby>には、new math.Random()を<ruby>利用<rt>りよう</rt></ruby>する。  
Dartで<ruby>乱数<rt>らんすう</rt></ruby>を<ruby>生成<rt>せいせい</rt></ruby>させるには、'dart:math'パッケージを<ruby>利用<rt>りよう</rt></ruby>する<ruby>必要<rt>ひつよう</rt></ruby>があります。  
  - パッケージを<ruby>使<rt>つか</rt></ruby>う<ruby>宣言<rt>せんげん</rt></ruby>をする
```
import 'dart:math' as math;
```
  - <ruby>乱数<rt>らんすう</rt></ruby>を<ruby>生成<rt>せいせい</rt></ruby>する<ruby>準備<rt>じゅんび</rt></ruby>をする
```
var rand = new math.Random();
```
  - <ruby>生成<rt>せいせい</rt></ruby>します  
```
rand.nextInt(2)
```  
0、1の<ruby>乱数<rt>らんすう</rt></ruby>が<ruby>生成<rt>されます
- ずっとは、while(true){}
```
var xxx = 0;
while(xxx>10) {
  xxx = xxx + 1;
}
```
のように、10<ruby>回<rt>かい</rt></ruby><ruby>実行<rt>じっこう</rt></ruby>したらループを<ruby>抜<rt>ぬ</rt></ruby>けるとかもできます。


## Thanks

ここまで、<ruby>読<rt>よ</rt></ruby>んでくれてありがとう!!

では、<ruby>次回<rt>じかい</rt><ruby><ruby>会<rt>あ</rt></ruby>えることを、<ruby>楽<rt>たの</rt></ruby>しみにしています。

ではでは
position:absoluteやfixedの要素を画面中央に揃える

要素の幅、高さの半分をmargin-left、margin-topでマイナス指定するのがポイント

```css
#neko img{
position:fixed;
width:600px;
height:400px;
top:50%;
left:50%;
margin-left:-300px;
margin-top:-200px;
}
```

参考
http://techmemo.biz/css/position-absolute-fixed-center/
CodeIQ　「『スパイラル・ウォーク』問題」に参加しました。

[CodeIQ　「『スパイラル・ウォーク』問題」](https://codeiq.jp/q/3053)の掲載期間が終わったということで、自分の提出コードを公開したいと思います。詳しい問題内容と解説は後日CodeIQMagazineあたりに掲載されると思うので、その際にリンクを張りたいと思います――覚えていたら(´・ω・`)

__2016-12-29追記__: [CodeIQMagazineに本問の解説記事](https://codeiq.jp/magazine/2016/12/48446/)が掲載されていました。またほかの方が公開されたコードが[Toggetter](https://togetter.com/li/1062323)にまとめられています。

```py
# 問題文に従うと「進む距離m」は(格子点の数 - 1)となる。
# (格子点の数) = (w + 1) * (h + 1) だから、F(m)は次を満たす(h,w)の組み合わせの総数である:
# 	(w + 1) * (h + 1) - 1 = m <=> (w + 1) * (h + 1) = m + 1
# 言い換えるとF(m)は「m+1の約数のうち、1でもm+1でもないものの総数」とわかる。ｌ

# 以上の性質を利用すると「1<=m<=nとなるすべてのmに対するF(m)の和」G(n)は次のように考えることができる
# 	2<=x<=n+1となるすべてのxについて、「xを約数にもつがxではない、n+1以下の整数」の個数の和

if __name__ == '__main__':
	n = int(input())
	
	t = n + 1
	answer = sum(t // x - 1 for x in range(2, t + 1))
	
	print(answer)
```
 
コメントをのぞくと 実質的なコードは4行。それもやや冗長に書いて4行ですから、もっと短くすることもできそうですね。
 
 個人的には興味深い問題でした。「格子路をらせん状に歩くとき、その歩く距離の組み合わせの総数を求める」という、一見するときわめて複雑な問題提起ですが、よくよく考えていくと「x以下の自然数の約数の個数の総数を求める」というところにまで収れんします。__要するに本問は「複雑そうに見えても、その本質はシンプル」というタイプの問題であり、解答者は周辺的な情報を一切無視して、単純な中核部分にだけ取り組めばよいということになります。__
 
 複雑な事象に対してその複雑さを維持したまま取り組むのは愚策です。複雑さの本質を直感し、その本質にアプローチする。それこそがシステム開発あるいはプログラミングの基本であり、パズルを解く楽しみのひとつでもあるとわたしは考えています。
『C++の設計と進化』に見る Java の方向性

# 前置き

なんか「イマドキ」の言語から見ると Java は古くてイケてないとかいう人がいっぱいいるらしい。
それにたいして、「そうじゃないよ、Java はそもそもからして偉大なる中庸を目指しているのであるからしてこれでいいんだよ」という平生からの私の主張[^1]を『C++の設計と進化』を根拠にゆるーくポエります。

[^1]: 私が勝手にそう思っているだけですよ

## なぜ『C++の設計と進化』なのか？

Java が C++ の影響を受けていることはいうまでもありません。そして、Java には C++ から が選んだもの、選ばなかったものがそれぞれもちろんあります。ストラウストラップがいかにして C++ を作ったかが本人の言葉により語られている『C++の設計と進化』を読むことで、Java がいかにして今の道を選択したかもまた見えてくるのではないかと思います。
それをさておいても、『C++の設計と進化』は　C++ ができるできないにかかわらず、「言語なんて動けば何でもいい」という意識の壁を乗り越えた上でプログラミング言語を愛でるプログラマなら誰でも読んでおいて損のない本だと思います。

問題は、もう新品が入手できないことですね。私はこの記事を書くにあたって、久しぶりに図書館で借りて読みました・・・。


# 『C++の設計と進化』に見る Java の方向性

というわけで、以下の引用は断りのない限り『C++の設計と進化』からのものです。

## クラスとインタフェース

Java には class と abstract class と interface があるのはみなさんご存じのとおりですが、それぞれの使い分け、特に abstract class と interface の使い分けについて悩まれる方もいるのではないかと思います。

> 関数の定義は、ふつうは"よそ"（クラス宣言の外）で指定する。それは、クラスの宣言を（中略）、純粋にインタフェイスの仕様のようにするためである。

Java にあてはめれば、これは class と interface ですよね。interface はまさに「インタフェイスの仕様のようにするため」に用意されたと言えそうです。

> インタフェイスと実装を分離するために派生クラスを使うということを、C++のユーザたちに正しく説明しなかった。説明の努力はしたが、どうも趣旨がちゃんと伝わらなかったようだ。この失敗の主な理由はたぶん、多くの（ほとんどの？）C++プログラマやC++に関心を持っているそのほかのプログラマたちが、インタフェイスを指定しているクラス宣言の中に表現ーーオブジェクトの実装の一部ーーを書けることイコールそうしなくてはならないことだ、と考えるとは、私は夢にも想像しなかったからだ。can（できる）がhave to（必ずそうする）に誤解されて、"必ずつねに"表現（実装）をクラス宣言の中に書いてしまったら、私が説明しようとした派生クラスのメリットがなくなるのは当然である。

はい、インタフェースの中に実装も書ける、これは abstract class ですね。

Java のクラスシステムが、実際にストラウストラップの思想に沿う形で設計されたのかどうかは分かりかねますが、仮にそうだとすれば設計を interface で行い実装を class で行えばよいことになり、abstract class は特に必要がなかったのではないかと考えることも可能かと思います。
しかし Java は、C++ が結果として持ってしまった「インタフェイスを指定しているクラス宣言の中に表現ーーオブジェクトの実装の一部ーーを書けること」という部分を敢えて abstract class として持つことを選択したように思えます。
abstract class を持たないという選択肢もあったように思うのですが、Java はそれをあえて持ったのです。

## C++ が C をベースにした理由

> Cとの違いを大きくしなかった理由は、いくつかある。Cのシステムズプログラミングへの適正と、Simulaのプログラム組織化能力を一体化すること自体が、大きなチャレンジだった。そのほかの言語の重要な機能を次々を加えていったら"ショッピングリスト"言語になってしまい、焦点の定まらない言語が出来上がっただろう。

> CやSimulaの実装済みの技術を最初から無視していたら、C with ClassesとC++の成熟はもっと長くかかったことだろう。

これらは、恐らく言語実装上の話だと思いますが、言語仕様の話としても、すでにあるものをあえて変えずにいることは普及にとっては大きな意味があったのではないでしょうか。

## シンタクス

> 私が一番嫌いなCのシンタクスは、宣言のシンタクスだ。宣言用の演算子に前置型と後置型の両方があるので、多くの人を混乱させる。

> この部分の変更に対するユーザからの否定的な反応は、非常に強かった。

Java でも、例えば配列の宣言は

```java
String[] values = null;
```

この表記が推奨されていますが

```java
String values[] = null;
```

変数の方に `[]` を付けても大丈夫ですし
なんだったら

```java
// 空白なしでも
String[]values = null;
// 変数の頭にくっついても   
String []values = null;
// スカスカでも
String   []   values = null;
// 改行しても
String values





[] = null;
```

これらも全て認められているわけです。
これまた、最初の表記だけを認めるという選択も当然あったかとは思うのですが、Java はそれを選びませんでした。ストラウストラップが C++ でやろうとしてできなかったシンタクスの変更を Java もまた、しないことを選んだのです。

# あとがき

ほかにも、プリミティブ型の存在や OOPL として純粋とはいえないなど、何故？と言いたくなるような部分はいろいろあろうかとは思いますが、きっと Java は全部わかっていてそれを選んでいるのです。
どこまでもどこまでも、尖らず中庸であり続けるために。

そんな Java が私は大好きです。
Swiftの良質なチュートリアルを翻訳しています

Swiftの良質なチュートリアルを作成している
raywenderlich.comから、キャンディクラッシュのような３つ揃えの
ゲームを作るチュートリアルの翻訳をしています。
全部で４パートあるうちの、まず１パートを翻訳しました。
Swiftの楽しみながら学んで見たい、またはiOSでゲーム作りに興味がある
という方、是非見てください。

URL :

https://www.doumeishi.me/static/html/raywenderlich.com/swift/CandyCrush1.html
ローカルにあるJSONファイルをブラウザに読み込む

## ソースコード

ネットで見かける例はむやみに複雑なので、極力単純化して書く。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>

    $(function(){

        var reader;
      
        function onChange(event) {
            reader.readAsText(event.target.files[0]);
        }

        function onLoad(event) {
            console.log(JSON.parse(event.target.result));
        }

        reader = new FileReader();
        reader.onload = onLoad;

        $('input[type="file"]').on('change', onChange);
    });

</script>
</head>
<body>
    <input type="file">
</body>
</html>
```
ポイントは以下の2点。
1. `input`要素の`onChange`イベントでファイルを特定する
2. `FileReader`オブジェクトの`onLoad`イベントでファイルの内容を知る

## ハンドラの設定

まず、HTML中には`<input type="file">`を置く。`<input type="file" multiple>`としてもよい。

```html
    <input type="file">
```

`onChange`イベントのハンドラを設定する。jQueryを使うならこんな感じ。

```js
        $('input[type="file"]').on('change', onChange);
```

ファイルを読み込むには`FileReader`オブジェクトを使用する。あらかじめオブジェクトを生成し、ハンドラを設定しておく。

```js
        var reader;

        reader = new FileReader();
        reader.onload = onLoad;
```

## `input`要素の`onChange`イベントでファイルを特定する

`input`要素でファイルを選択すると`onChange`イベントが発火し、ハンドラが呼出される。
ハンドラでは`event.target.files`でファイルを特定し、`FileReader`の`readAsText()`を使って内容を読み込む。
`multiple`とした場合に複数のファイルが特定されるので、`event.target.files`は必ず配列になる。単数ファイルの読み込みの場合は最初の要素だけ使えばよい。

```js
        function onChange(event) {
            reader.readAsText(event.target.files[0]);
        }
```

## `FileReader`オブジェクトの`onLoad`イベントでファイルの内容を知る

ファイルを読み込み終わると`onLoad`イベントが発火し、ハンドラが呼出される。
`event.target.result`に全文が入っているので、`JSON.parse()`でオブジェクト化すればよい。

```js
        function onLoad(event) {
            console.log(JSON.parse(event.target.result));
        }
```

間違ったファイルを指定した場合はオブジェクト化できないので例外が発生する。
MyoWareを使って筋肉をセンシングしてみた


# 概要
MyoWare( https://www.sparkfun.com/products/13723 )　という筋電センサを使ってみました．
このセンサを直接肌に貼ると，そこの筋肉の様子を取得できるというものです．
簡単に言うと，筋肉に力を入れると値が大きくなります．

これがMyoWareです．3つの電極を貼ることで体につけます．
![Kobito.eZAOQD.png](https://qiita-image-store.s3.amazonaws.com/0/68960/60a9ba81-6f10-57e2-d68e-94dded18a276.png "Kobito.eZAOQD.png")

こんな感じのセンサパッドを使って皮膚に貼ります
![Kobito.KLUDR3.png](https://qiita-image-store.s3.amazonaws.com/0/68960/902576d8-7ad3-cf41-6b95-4b023f780f3e.png "Kobito.KLUDR3.png")

付けた様子はこんな感じ(参照:https://learn.adafruit.com/getting-started-with-myoware-muscle-sensor/whats-next)
![Kobito.vhiPkD.png](https://qiita-image-store.s3.amazonaws.com/0/68960/11f3bbae-94c4-3611-d1c9-38f0f5e64a6a.png "Kobito.vhiPkD.png")


# 実装
このURLからデータシートが見れます．
https://cdn.sparkfun.com/datasheets/Sensors/Biometric/MyowareUserManualAT-04-001.pdf

このセンサはArduinoにつなぐことで，簡単に筋肉の様子を取得できます．
Arduinoへの接続方法はこんな感じです．
データシートにある図を引っ張ってきました．
![スクリーンショット 2016-12-23 午前1.10.41.png](https://qiita-image-store.s3.amazonaws.com/0/68960/667baf88-32e0-acb1-81f8-0a4edf4e630e.png "スクリーンショット 2016-12-23 午前1.10.41.png")

Arduinoのソースコードはこんな感じです．

	int value = 0;
	
	void setup() {
	  Serial.begin(9600);
	}
	
	void loop() {
	    value = analogRead(0);
	}
	
valueに0~1023の範囲の値が入ってきます．
適当に閾値を定めて，それを越えた時に何かをする操作を書いたりするといいと思います．
そうすると，腕に力を入れたことをトリガーに，何かデバイスを操作したり出来るわけです．

入ってきた値は結構ぶれたりするので，いくつかの平均を取って，その値を閾値と比べるのがおすすめです．
それと，センサの付け方によっても値が結構変わるので，閾値もそのたびに決めたほうがいいかもしれません．


	
# まとめ
MyoWareを使えば，腕・足・肩・お腹などなど色んな筋肉をセンシングすることが出来ると思います．
とりあえずは，腹筋に力を入れた時にLチカしたり(?)，肩に力を入れた時にモーター回したり(?)してみてください．
そして，MyoWareを使って何か面白いモノを作ってみてください．
（私にはまだ，いいアイデアが思い浮かんでないので・・・）

ではでは，よいクリスマスを〜〜
androidで起動時に最新バージョンをチェックするライブラリ

siren for androidはjsonを用意してホスティングする必要があって面倒ですが、
[GPVersionChecker](https://github.com/robohorse/gpversionchecker)
google playから自動で情報取得してくれるので、ホスティング不要で楽です。
[WIP]zshで個人的自作コマンドを作る備忘録

![blogcommand.png](https://qiita-image-store.s3.amazonaws.com/0/43608/4642dd80-e360-5d8f-01e9-5cbb3c73a3d0.png)

# 1. やりたいこと

最終的にはtmuxを起動するときに、
既存のセッションが無い場合は
新規でセッションを開始

既存があるばあいは
一覧を表示して
開くセッションを指定できるようにしたい

## 作業環境

- xUbuntu-16.04.1(x86_64)
- zsh-5.1.1
- tmux-2.1

# まずはコマンド自作
全くの初心者なのでまずはここから
参考：
[引数を処理する | UNIX & Linux コマンド・シェルスクリプト リファレンス](http://shellscript.sunone.me/parameter.html)
[zsh の補完関数の自作導入編](https://gist.github.com/mitukiii/4954559)

``` zsh:.zshrc
function hoge (){
    echo "$0"
}
```

``` zsh:zsh
$ hoge
hoge
```
dein導入で地味にハマった話



巷で話題のvim package manager
"Dein"
せっかくなので導入したいなあと思いたったが良いものの・・・

# 作業環境
- xUbuntu-16.04.1(x86_64)
- vim-7.4

# インストールでハマる！！！

http://qiita.com/delphinus/items/00ff2c0ba972c6e41542#%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E6%96%B9%E6%B3%95
こちらの記事を参考に（参考という名の写経）

無事導入自体はできたんですよ。
tomlファイルが無いよ！！って散々怒られたこと以外は

# syntaxが動かない！！！

え、何それって話ですが。
ほんとに動かなかったんですよ。
でも頭悪いのでvimrcの読み込み順番とか、
"dein vimrc not working" で検索したりとか
的外れなことばっかりしてました

https://github.com/Shougo/dein.vim/issues/65
んでまあissueの一番下を見て( ﾟдﾟ)ﾊｯ!となり
https://github.com/Shougo/dein.vim
readmeの

``` vim:.vimrc
filetype plugin indent on
syntax enable
```

この記述を追加したら無事動きました。

でもdein設定の下に

``` vim:.vimrc
" 透過用処理
highlight Normal ctermbg=none
```

これを書いておかないといけなくはなったので
これだけ注意しないといけないですね。
備忘録、備忘録。
スパースコーディングのための辞書生成アルゴリズム，K-SVDをJuliaで実装した

スパースコーディングのための辞書を生成してくれるアルゴリズム，K-SVDをJuliaで実装しました．

# スパースコーディングとは
ひとことで言うと，「ある信号をできるだけ少数の基底で表現する手法」のことを言います．

![](https://qiita-image-store.s3.amazonaws.com/0/46932/b8b2a2a2-492b-e7e4-037e-518545f34f6d.png)
引用元: <a href="http://www.csee.umbc.edu/courses/graduate/678/spring15/visionaudio.pdf">Andrew Ng, Unsupervised Feature Learning and Deep Learning, 2015</a>

例えばこの図では Natural Images が表現したい信号，Learned bases が信号を表現するための基底となっています．
Test example は画像から得られたパッチ(Natural Images内の赤枠の部分)です.

信号の基底を辞書と呼びます．スパースコーディングは，信号を辞書中のできるだけ少ない数の要素で表現することを目標とします．
この図では Test example を3つの要素の組み合わせで表現しています．

# K-SVDとは
K-SVDはスパースコーディングにおける辞書を生成してくれるアルゴリズムです．
表現したい信号を与えると，その信号を効率よく表現するための辞書を生成してくます．

# KSVD.jl

[KSVD.jl](https://github.com/IshitaTakeshi/KSVD.jl)は[K-SVDのオリジナルの論文](http://www.cs.technion.ac.il/~freddy/papers/120.pdf)のアルゴリズムをJuliaのパッケージとして実装したものです．
使い方はREADMEに書いてあるので，結果だけここに載せます．

この文字画像をK-SVDに入力します．
![digit_images.png](https://qiita-image-store.s3.amazonaws.com/0/46932/a769f4f8-3aee-cfac-109f-359544092f47.png)


するとこのように文字画像の基底が得られます．
![digits256.png](https://qiita-image-store.s3.amazonaws.com/0/46932/12e6426c-17e0-40e0-b1cb-449a9adcdb0d.png)


# 問題点
オリジナルのK-SVDには欠点があります．それは入力信号のサイズが大きくなると基底の計算が一気に重くなることです．
物体認識のデータセットなど，大きなデータにK-SVDを適用するとなかなか計算が終わりません．

# 解決策
信号の基底を効率よく計算する方法が既に[論文](http://www.cs.technion.ac.il/~ronrubin/Publications/KSVD-OMP-v2.pdf)になっています．オリジナルのK-SVDよりも複雑ですが，どうやら高速に辞書を求めることができるようです．
COBOLERにはスキルなんてない、と言われてしまうことについて

下請けCOBOLERとして生きていた頃のノウハウ Advent Calendar 2016の15日目ぐらいの記事です。

---
cobolerなら一度は言われるであろう、言葉についてです。

+ COBOLなんてN年後にはなくなる。
+ スキルが身につかないよ

COBOLなんてN年後にはなくなる、よく言われますが、どうやってなくすんでしょうか？
自分のいた現場では30年以上ため込んだデータ、巨大すぎて何をやっているのか解読不能なソースの山々・・
それらを全て移行するにはで巨大ビルが建つぐらいのお金が動くんじゃないでしょうか？
その点でCOBOLをなくすのは無理、むしろ死ぬことが出来ない苦しみのさなかにあるのがCOBOLです。（この病、死に至らず、にも関わらず、プログラマーは死んだ！）

COBOLが患っている病とは、死ぬことではなく、死ねない病のことになります。
この問題については、ここで語ってもしょうがないので、COBOLの仕事は減ってもなくならないよ程度にしておきます。

なので次にスキルが身につかないと言うことについて話をしようと思います。
まずは、以下の一節から

>当然のことながら、ニューギニア人は、西洋人が子供の頃から訓練を受けている作業はうまくこなせない。
>だから、辺鄙な村に住み、学校教育を受けたことのないニューギニア人が町にやってくれば、町の西洋人の目には間抜けに映るだろう。
>その逆に、私には、ジャングルの小道をたどるとか小屋を建てるといった、ニューギニア人であれば子供の頃から訓練を受けている作業はうまくこなせない。
>だから、彼らと一緒にジャングルにいるときは、自分はいかにも間抜けに見えるだろうと、私はいつも意識させられたものである。」（銃・鉄・病原菌　ジャレド・ダイヤモンド　倉骨彰(訳)　草思社）


##優秀なのはどっち？

Aさんの経歴書

| 現場 | 言語 | 年月
|:-----------:|:------------:|:------------:|
| 金融関係       | COBOL 汎用機、JCL   |     ５年10ヶ月
| 在庫管理|C#　SQLSERVER |1年 |

Bさんの経歴書

| 現場 | 言語 |年月
|:-----------:|:------------:|:------------:|
| なんか      |  C# |6ヶ月 |
| なんか| Java |４ヶ月 |
| なんか| Java |４ヶ月 |
| なんか|VB5 |6ヶ月 |
| なんか|PHP |6ヶ月 |            


どちらが優秀かを考えたとき、人月会社の上司からすると売り込める先が多いBさんの方が良いんじゃないでしょうか？
一方で僕の考えではAさんのに軍配が上がります。（というかAさんというのは僕の経歴ですが・・）

##下請けが求められるスキルはプログラミング経験の数

スキル・スキルと会社がとやかく言うのは単に経歴書を良い感じの言語でたっぷり埋めたいだけというのが実情だと思ってます。
機能てんこ盛りの空気清浄機の商品の宣伝チラシのように、経歴書には色んな言語が埋め込まれていると一見艶やかでどんな案件にも入れるメッキのスーパーエンジニアに見えないこともありません。（何より売り込み先の選択肢が増えます）
実際に、開発時に人手が欲しいときなんかを専門に渡り歩くなら色々知っていた方が便利でしょう。

一方でCOBOL現場に長くいたようなプログラマーはそういうところに売れなくて困るようです。
なので会社からすればCOBOLしか知らない人間は売れない(スキルのない)商品だと言うことになります。

##経歴書が多い人間はすぐ切られるような問題のある人間という見方

自分のいた現場の文化では、経歴書の中身が多い人間は現場で重宝されず製造工程が終わったら契約解除されるような人間だからだめという考えが主でした。
良い人材にはずっといて欲しいんだから一つ一つの案件が長くなると考えるようです。
（それにCOBOL現場ではプログラミングスキルなんてほとんど要求されません）


結局COBOL現場ではスキルが育たないというのは売り込み先がなくて困る程度のことです。
実際にどの現場でもそれなりの成果物を出そうとする人はCOBOLでもrubyでも同じように質の高いものを出そうとすると思います。（しかし、経歴書や面接ではそれは全く伝えられないと思います）


最初の話に戻りますが、ニューギニア人と西洋人、お互いの生活文化で必要とされるスキルは全く別物なのです。
1つのCOBOL現場で長く保守をするのに必要な人材と短期間の季節労働者では会社に求められるものが違うのです。

なので、***COBOL現場ではスキルが身につかない***
というのはせいぜいお前は売り物にならんという人身売買人の愚痴であって全く何にもならないというのはありません。

そこに長くいられたこと、つまりその現場で重宝されたことがエンジニアのスキルを証明していると思えるンじゃないかと思います。

##とはいえCOBOL現場にいることはないよね
とまぁCOBOL現場で身につくスキルだってあると言いましたが、頑張る人間はどこでも頑張れるならCOBOL現場にいることはありません。さっさと抜けてもっと単価の良いお仕事に就くべきです。

ここでは新人の頃からCOBOL現場にいたような俺はもうダメだと悲観することはないと、そう自分に言い聞かせたかっただけのポエムとなっております。
GitBucketのメール通知にSendGridを利用する

GitBucketはオープンソースのGitサーバです。Scalaで実装されています。GitHubやBitBucketのような感覚で利用でき、かつ、Javaが入ってる環境であれば簡単に使えるので、イントラでのホスティングなどに便利です。

- https://github.com/gitbucket/gitbucket
- [JJUG CCC 2016 FallでGitBucketの話をしてきました](http://takezoe.hatenablog.com/entry/2016/12/04/041122)

自分は開発でGitが導入される前、お試し環境として使ってたりしました。

- [Git未経験者ですがGitBucket入れてみました…(^^;](http://kikutaro777.hatenablog.com/entry/2013/10/11/201051)

[Jenkinsのメール通知にSendGridを利用する](http://qiita.com/kikutaro/items/f3150be39937351c3df5)で書いたのと同じように、今回はGitBucketでSendGridを設定していきます。

GitBucketの利用は、[リリースページ](https://github.com/gitbucket/gitbucket/releases)からwarを取得してjavaコマンドで起動するだけです。

```bash:GitBucketの起動
java -jar gitbucket.war
```

Jenkins同様お手軽ですね。

localhostの8080で接続します。右上の「Sign up」を選択します。
![2016-12-21_21h21_25.png](https://qiita-image-store.s3.amazonaws.com/0/47737/49bd03a6-2f80-1fe1-0a23-aaa259a8f10e.png)

デフォルト管理者 root/rootでログインします。
![2016-12-21_21h22_04.png](https://qiita-image-store.s3.amazonaws.com/0/47737/4e2b5cee-d9af-d392-2b23-b844aa47f050.png)

ログインできたら右上のアイコンから「System administration」を選択します。
![2016-12-21_21h22_58.png](https://qiita-image-store.s3.amazonaws.com/0/47737/cf190bfb-b3c4-9487-3507-ede3966df714.png)

「System Settings」メニューの一番下へ移動します。
![2016-12-21_21h40_50.png](https://qiita-image-store.s3.amazonaws.com/0/47737/e0c99bfe-400d-6737-d911-5bada42db5d6.png)

SMTPの設定があります。
![2016-12-21_21h47_00.png](https://qiita-image-store.s3.amazonaws.com/0/47737/00a39306-5446-e022-c22a-6c888e2b44d1.png)

チェックを入れて、必要情報を入力します。[ここ](https://support.sendgrid.kke.co.jp/hc/ja/articles/204187885-SMTP%E3%81%AE%E6%8E%A5%E7%B6%9A%E6%83%85%E5%A0%B1%E3%82%92%E6%95%99%E3%81%88%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84-)に参考情報はあります。
情報を入力後、メールが送信できるか右下のテキストにテストメール送信先アドレスを入力して「Send」を押します。
![2016-12-21_21h59_46.png](https://qiita-image-store.s3.amazonaws.com/0/47737/3ba26bda-1b01-266d-7053-dc887b2cd143.png)

成功するとダイアログがでます。（失敗すると例外エラーなどが上図の画面で表示される）
<img width="300" alt="テストメール送信ダイアログ" src="https://qiita-image-store.s3.amazonaws.com/0/47737/049717a4-1a5e-814c-a28f-6ef5a9b4b4b7.png">

メールが届いていることを確認します。
![2016-12-21_22h01_00.png](https://qiita-image-store.s3.amazonaws.com/0/47737/44c691b6-b374-865b-6b37-d242386aa4fe.png)

内容はこんな感じ。
![2016-12-21_22h01_19.png](https://qiita-image-store.s3.amazonaws.com/0/47737/f195c9cd-af31-4e47-7317-1c3802c4799d.png)

問題がないことを確認したら、SMTPの上にある「Send notifications」にチェックを入れます。これで色々とメールが飛びます。
![2016-12-22_14h54_27.png](https://qiita-image-store.s3.amazonaws.com/0/47737/6e20f9a0-2718-4772-1182-a120cd22bf86.png)

Gitリポジトリを作成後、Issueをきってみます。
![2016-12-22_14h49_41.png](https://qiita-image-store.s3.amazonaws.com/0/47737/af8ab0a9-276d-f703-d666-74fc9e84758e.png)

こんな感じにメールが来ました。
![2016-12-22_14h50_13.png](https://qiita-image-store.s3.amazonaws.com/0/47737/73251cb0-0eb8-c415-911e-ed582b03ae1b.png)

内容はこんな形で(Markdownで書けば)ちゃんとHTMLになってます。
![2016-12-22_14h50_31.png](https://qiita-image-store.s3.amazonaws.com/0/47737/68e8f8ae-cbac-ca30-87e7-f80b9d09338f.png)

プルリクなどでも飛ぶので便利です。

以上です。それにしても、UI変わってから触るの初めてだったのですが、すごいキレイですね！こんな感じ↓
![2016-12-22_14h31_31.png](https://qiita-image-store.s3.amazonaws.com/0/47737/7b665a58-e62c-9458-9241-7533826fa2be.png)
非エンジニアだった自分からみたエンジニア

はじめまして、Hirotakuです。
新卒2年目で、プログラミング歴も2年目。
主にCakePHPで、自社サービスの開発・運用を担当しています。

諸先輩方がゴリゴリ技術の話をしている中、
自分は、エンジニアという仕事について
非エンジニアだったときの目線もふまえつつ、
ちょっと真面目に考えてみようと思います。

# エンジニアという世界  
学生時代、天文学を先行していた自分にとって
エンジニアという仕事は、全く持って未知の世界で
まさか仕事にするとは思ってもいませんでした。

それが出会いとはひょんなもので、
様々ないきさつの果てに弊社と出会い
今、こうしてエンジニアという仕事をさせてもらっています。

そんないわゆる **非エンジニア**であった自分にとって
エンジニアの世界は**独特**と表現するのが相応しい世界でした。

# "あたりまえ"の技術（情報）共有  
この仕事に就き、エンジニアという世界に触れて最も印象的だったのは、
「自分の技術（できること）をあますことなく、世界に向けて発信していること」でした。
というのも、自分の中で"技術"というものは、
「その人個人ないし企業における財産」だと思っていたからです。
これは製造業に携わっている父の影響もあるかもしれませんが、
"自分にしかできないこと"を簡単に人に教えるなどもってのほか。
そのために特許があるのではないか、と。

しかし、エンジニアの世界におけるそれはまるで違うもので
「自分が持っている技術を"互いに"共有し合い、よりよいものづくりをしていこう。」
という考えが、ごくあたりまえに根付いています。
これはエンジニアや情報系の事業に携わる人達にとっては当たり前のことなのかもしれませんが、
自分にとってはとても衝撃的でした。

弊社の先輩方も例に漏れず、自作のプラグインなどを公開していますが、
そういった仕事におけるクライアントに対してだけでなく、
同業の仲間たちに対しても働きかけることができる
というのはとても素敵なことだと思っています。

他の業種に置き換えて考えてみてください。
同じように同業種で情報を共有し合い、
助け合っている人達って少ないのではないでしょうか。
ましてや、"モノづくり"の業界においてです。

# 工数という概念  
また、工数という考え方もエンジニアならではかと思います。
良くも悪くも、エンジニアという"仕事"にとって工数は切り離せない存在です。
というのも、情報系を学んでいる学生が工数を意識することはそうないはずで、
エンジニアという仕事がビジネスであるがゆえに生じている考え方だと思っていて、
この工数という考え方があまり世間に認知されてないがために、
エンジニアという仕事に対して誤解を生んでいる場合があるのではないでしょうか。

どんな誤解か。
それは、"システムは安いモノ","簡単に作れるモノ"であるという誤解です。


# システムはタダでは作れない

受託開発をされている方は、クライアントに対して見積りを提出した際に、
「こんなに高いんだ」と、言われた経験が往々にしてあると思います。

お恥ずかしながら、自分も初めてシステムの金額を知ったとき
「高い」と感じてしまいました。

しかし、これは実際に自分が作ってみて、
工数という概念を理解すると、納得どころかむしろこの金額で...?と思うこともあります。

なぜ「高い」と感じてしまったのか。
自分がエンジニアになるまで、一番知らなかったことは
"システムを作るのには、こんなにも時間がかかる"ということでした。

あまりにも簡単に、そしてあたりまえのように
あらゆるものがデジタルに移り変わっている中で、
誰もがシステムに触れられるようになり、
どこかシステムが軽視されているのではないかと
危機感を感じています。

例えば同じ機能のアプリがあったとして、
無料と有料があれば、わざわざ有料を選ばないと思います。
先日、某ゲーム会社からリリースされたアプリでは
続きのステージをやるのに、料金が発生しただけで避難されていました。
ゲームってもともと買って遊ぶものだったはずです。

世間にはわたしたちエンジニアの"工数"は見えません。
だけども、システムは簡単に作れるものではない。
時間をかけて、手作りで作っているものだと知ってもらえたら、
こういった"誤解"も違う方向に向かうのではないかなと思っています。

# もっとエンジニアはリスペクトされるべきである

シリコンバレーミッション（https://fusic.co.jp/doings/126）
へと参加した弊社の先輩も言っていましたが、
**エンジニアはもっとリスペクトされていい職業**だと思っています。
こと、日本においてはエンジニアの立ち位置というのは
あまり高くないように思えます。

自分自身、エンジニアという仕事に就いて
すごく夢がある仕事だと感じています。
カッコよく言えば、クライアントの夢を叶えているわけです。
プログラミングという必殺技で、困っている人を助けることができるわけですから！

プログラミングが義務教育へ導入されようとしている背景の中、
エンジニアという仕事がどういった仕事であるのか。
みなさんが得意とする情報発信を活かし、
もっと世間に対してエンジニアを知ってもらうことによって
エンジニアという"仕事"がより輝くのではないでしょうか。

自分も一人でも多くの人に、
**エンジニアってこんなに素晴らしい仕事なんだよ**
と、伝えられるエンジニアになりたいな、と思った次第です。

最後まで読んでくださった方、
とりとめのない話になってしまいましたが、、
ありがとうございました。
iPhoneで○○を動かす（TouchDesigner編）

[Touchdesigner Advent Calendar 2016 ](http://www.adventar.org/calendars/1623)| 23日目

季節はクリスマス、皆さま如何お過ごしでしょうか？？
忘年会シーズンも真っ盛り、この忙しい師走に、なにか余興やってよ！など上司の無茶振りに苦労されている方も少なくないのでは？
そんな時、手っ取り早くiPhoneで何かを動かせたら、いつもと違う宴会が楽しめる！（かもしれません）

ムービングライトを動かす仕組みを例にざっくりとiphone連携のご紹介をしたいと思います。

ZIG SIMというiphoneアプリを使いTouchDesignerで、簡単にiphone内臓のセンサーの値が取得できます。（今回は特に、汎用性がありそうなiphoneとTouchDesigner接続の仕方を詳しく書きたいと思います。）

##用意するもの
　・iphone（推奨：iPhone6S及びiPhone6S Plus）
　・ZIG SIM（iphoneアプリ）←優れもの！
　・TouchDesigner（windows版）←バージョンは最新に近い方がベター
　・ムービングライト（DMX対応機材）←任意で変更可※
　・Enttec USB PRO Mk2（DMX制御、USBでPCに接続）←任意で変更可※
　・wifi環境

※詳しい仕様は適宜調べてご使用ください。

##ZIG SIMについて
https://itunes.apple.com/jp/app/zig-sim/id1112909974
『フィジカルプロトタイピングをプロトタイピングする』ためのアプリケーション。簡単に言うとセンサーの値を取得し、他のアプリケーションと連携を試せるアプリ。
【センサーの種類】
・加速度
・重力加速度
・ジャイロ
・クォータニオン
・コンパス
・気圧
・GPS
・タッチ座標
・タッチ半径
・タッチ圧力
・BEACON　などなど
※機種及びOSのバージョンによって異なるようです。

開発元の1-10driveさんの説明ページ
http://labs.1-10.com/blog/usecase_zigsim.html

##DMX規格
光の強弱を調整したり、ムービングヘッド等の照明の位置、動き、形、の情報を送るための照明規格
1本のデジタルケーブルでチャンネル分の照明制御データのやり取りが可能で、また各チャンネルの信号を256段階で制御することができます。
チャンネルとは機材ごとに持つ機能(位置、動き、形）を割り振ったもの。このチャンネルのスタートアドレスを機材側とコントローラー側で設定することにより同期をとりそのチャンネルを制御します。
今回は1chパン(横X軸の動き）、2chチルト(縦Y軸の動き）を使用します。

##Enttec USB PRO Mk2
PRO-Managerドライバ
https://www.enttec.com/?main_menu=Products&pn=79003
仕様
https://www.enttec.com/?main_menu=Products&pn=70314&show=description

##1. wifi環境下で、iphone側ZIG SIMの設定を入れる。（アプリのインストール必須）
![sss01_.png](https://qiita-image-store.s3.amazonaws.com/0/156191/55598ae1-45f3-9670-d157-801ccb0de7c6.png)

##2. windows側TouchDesignerで、OSC接続する。
![ss01-1.png](https://qiita-image-store.s3.amazonaws.com/0/156191/1fb51970-abdd-39a2-6a06-820cd713283a.png)

これだけ！スマホのセンサー値が取れました。センサーの値を取るときは、select CHOPを繋ぎ、必要なデータのみ取り出しておきます。

##3. TouchDesignerからDMXで値を送る。（ドライバのインストールとPRO Mk2のUSB接続必須）
<img width="628" alt="ss02.png" src="https://qiita-image-store.s3.amazonaws.com/0/156191/0f38683c-7ea0-a11e-f8a5-0749d692672a.png">
スマホの動きに合わせて左右・上下に動きます。センサーの値を見て、今回は、同期しやすそうだった重力加速度（gravity）を使いました。

全体
<img width="637" alt="ss03.png" src="https://qiita-image-store.s3.amazonaws.com/0/156191/7e86b6e9-6928-8e73-20f9-7df9d895ef60.png">
初心者（私も含め）はこのDMX対応機材のチャンネル設定に確実に躓きますｗご興味ありましたら、機材ごと・チャンネルごとの各種設定を調べてみて下さい。（私も詳しくお聞きしたい！）

参考までにチャンネル設定付きのサンプルをGithubにあげておきます。（動かなかったらゴメンなさい。）
https://github.com/cacao198000/td_zigsim_dmx

ムービングライトの色を制御したり、スマホセンサーの種類を変えたり、ムービングライトを使わずに、そのままプロジェクションマッピングとして使用したり、使い方は工夫次第。色々試してみてはいかがでしょうか？

レッツ プロトタイピング！

ギリギリ間に合って良かった。素敵なクリスマスを♪