OmniAICreator/Qiita-1.07M huggingface dataset:
なぜ12月21日が回文の日なのかを考えてみた

これは「[文字列アルゴリズム Advent Calendar 2016](http://qiita.com/advent-calendar/2016/str)」25日目の記事です。

# はじめに
12月21日は回文の日です。

>12月21日は「回文の日」。「回文」とは、上から読んでも下から読んでも同じ読みになる文章で、「1221」が回文のようになっていることから、回文俳句などを展開している宮崎二健氏が制定した。
[回文の日 | SmartNews 今日は何の日](http://today.smartnews.com/20161221/)

1221が回文ということは疑いようもない事実ですが、1月1日や1月11日など、他に回文になる日があるにも関わらず、なぜその中から12月21日が選ばれたのかその理由がはっきりとしません。
真相は宮崎二健氏に聞くよりありませんが、本記事では客観的な事実を元に最も納得の行く理由を探ってみたいと思います。

# 回文日の列挙
12月21日のように月の数字と、日の数字を連結した文字列が回文となる日を回文日と呼ぶことにします。
まずは、365日のうち、どれだけ回文日があるか列挙してみましょう。

```python
# python3
# palindrome_day.py
import collections

days = [0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]

def gen_days():
  for month in range(1, 13):
    for day in range(1, days[month]+1):
      yield str(month) + str(day)

def isPalindrome(x):
  for i in range(len(x)//2):
    if x[i] != x[len(x)-i-1]:
      return False
  return True

if __name__=='__main__':
  palindromes = [md for md in gen_days() if isPalindrome(md)]
  print(palindromes)
  num_days = sum(days)
  num_palindrome_days = len(palindromes)
  print(num_days, num_palindrome_days, num_palindrome_days / num_days)
  count = collections.Counter(map(len, palindromes))
  print(count)
```

```sh
$ python palindrome_day.py
['11', '111', '121', '131', '22', '212', '222', '33', '313', '323', '44', '414', '424', '55', '515', '525', '66', '6
16', '626', '77', '717', '727', '88', '818', '828', '99', '919', '929', '101', '111', '1111', '121', '1221']
365 33 0.09041095890410959
Counter({3: 22, 2: 9, 4: 2})
```

上記のプログラムを実行すると365日の内、回文日は33日あり、全体の9%を占めることがわかりました。
（111のように2回現れる文字列は1月11日と、11月1日のように異なる日をそれぞれ示しています）
約10日に一度の割合で出現するので、回文日はそれほど珍しい日ではないといえるでしょう。
また、回文の長さは2文字が9、3文字が22、4文字が2という結果が得られました。


# 考察
ある性質を持つ要素の中からその代表となる代表値を選ぶ場合には、以下のような基準を満たす要素が代表値としてより適しています。

- 他の性質と重複しない
- 希少性が高い

例えば、11, 22, ...などは回文ですが、ゾロ目でもあり代表値としては適しません。
また、121や212などの3文字の回文は回文日のなかでも2/3を占めることから、希少性が低く代表値としては適しません。

このような観点から考えると、12月21はたった2つしかない希少性の高い4文字回文であり、またその中でもゾロ目でない唯一の回文であることから、回文日の代表値として適した値と結論付けることが出来ます。


# おわりに
本記事では12月21日が回文の日に選ばれた理由を以下のように結論づけました。

- ゾロ目など他の性質を含まない
- 文字列の長さが4文字で回文日の中で希少

回文についてより詳しく知りたい方は[文字列アルゴリズム Advent Calendar 2016](http://qiita.com/advent-calendar/2016/str)」21日目、@Shiho_tksam さんの記事「[回文を列挙する - Qiita](http://qiita.com/Shiho_tksam/items/17ed870cd4c8c0f1f478)」を参照してみて下さい。

そもそも本記事を書いたのは、上記記事を読んで、回文の日の存在を知った事がきっかけとなっています。
サイバードのエンジニア採用について

こんにちは。[CYBIRDエンジニア Advent Calendar](http://qiita.com/advent-calendar/2016/cybird) 25日担当の@kagawa1982です。
サイバードに入社して3年目。人事として入社してから一貫して採用に携わってます。
24日目は@jin_kさんの[初めてのRaspberry Piのセットアップ!おまけに可愛いはりねずみが見られます](http://qiita.com/jin_k/items/c3fa71c5b45a8dd67317)でした。

さてさて、ついに本日で今年のアドベントカレンダーが終了となります。
今回は人事ということで、ベタですが、サイバードのエンジニア採用について書かせて頂きます。


###**■サイバードのエンジニア採用■**
---------------------------------------
サイバードではプランナーやディレクターのほかデザイナー、ライター等のクリエイターのポジション、
マーケティングや人事や法務等のコーポレート系のポジションなど、幅広い職種を採用しています。
そして、数ある職種の中でも最も力を入れて採用に取り組んでいる職種がエンジニアです。

社内では『エンジニア文化部』なる、組織横断のユニットを立ち上げし、エンジニア自ら文化醸成や採用活動に主体的に携わっているのですが、私も2年目からはその組織にジョインさせてもらっています。
週次で行われるミーティングでは様々な課題が提示されるのですが、私は採用の観点からアドバイスしたり、ミーティングで決定した事を実行に移す役割を担っています。
  
では、そんなサイバードではどういった採用を行っているのでしょうか～？
思いあたるものをいくつか書いてみたいと思います。


####**（1）SNS採用(https://goo.gl/fIuimb)**
履歴書や職務経歴書を確認するという選考ではなく、GitHub、Qiita、Wantedly等のプロフィール、自身で開発されたサイトやアプリ等のURLとメールアドレスだけでエントリー完了です。楽ですよね～。


####**（2）カジュアル面談**
転職理由や志望動機、経歴の詳細を確認するような、いわゆる面接スタイルではなく、フランクにコミュニケーション取りながらの行う「カジュアル面談」を実施してます。
面談者もエンジニアなので、お互い興味のある技術を語ったり、コードレビューを行ったりしてます。
もちろん、転職意向がなくても、サイバードという会社を良く知らなくても全く問題なし！
このカジュアル面談を導入してから応募数も増え、採用に至るケースも増えたんです！


####**（3）社員紹介制度**
応募者には会社の良い点も悪い点もフラットに社員経由で伝えられているので、やはりマッチング度が高いですね。入社に至った場合には紹介者に報奨金が支給されます。
ちなみに、応募者とコンタクトを持つ際のランチや飲み代は会社持ちです。


####**（4）ダイレクト・リクルーティング**
人材エージェントからの紹介を待っていても優秀なエンジニアは来ない！ということで、以下様々な媒体で募集中です。我々からスカウトしてハンティングも行っています。
 [paiza](https://paiza.jp/business/recruiter/preview)
  [Switch](https://switch.bz/Switch/businesslogic/lp/offerdetail/OfferDetailLogic/?offerSeq=2332)
  [Wantedly](https://www.wantedly.com/companies/cybird/info)
  [Green](https://www.green-japan.com/company/2670)
  [転職ドラフト](https://job-draft.jp/)


####**（5）インターンシップ**
今年はある専門学校の学生さんを対象にオータム・インターンシップを開催しました。
約1ヵ月間、様々な課題に取り組んで頂き、学生さんからは非常に良い経験になったと好評でした。
就活の際、応募する1社に検討してもらえると嬉しいです。


####**（6）逆求人イベント**
年明けから既に複数の逆求人イベントに参加することが確定しています。逆求人とは、学生さんがプレゼンをして、それを企業側が聞いて選考していくというものですが、毎回どの学生さんもアプトプットのレベルが高くて驚かされます。
　　・
　　・
　　・
という感じです。
この他にも色々なチャレンジをしていますが、これらの施策をエンジニアが主体的に行っています。
「エンジニア採用は一日にして成らず」ということで、こういった施策を粘り強く継続していくことが大事ですね。
興味があれば、是非、気軽な気持ちでいいので、エントリしてみてくださいね！
採用サイト：http://www.cybird.co.jp/recruit/

###**エンジニア インタビュー記事**
---------------------------------------
以下、参考までに、弊社エンジニアのインタビュー記事です。

-Social　Game　Infoエンジニアインタビュー
[つくり手が中心となって働ける会社にしたい サイバード社が取り組むエンジニアが活躍できる組織作りとは](http://gamebiz.jp/?p=157129) 


-エンジニアスペシャルインタビュー
[エンジニアがプランナーと一緒に企画を作っていく環境](http://www.cybird.co.jp/recruit/interview/interview9/)


-[エンジニアblog](http://www.cybird.co.jp/recruit/engineer/blog/)
※今後、随時更新してまいりますので、是非チェックしてください。


-メンバー  インタビュー
[YOSHITOMO](http://www.cybird.co.jp/recruit/interview/member_interview28/)
[KEITARO](http://www.cybird.co.jp/recruit/interview/member_interview30/)
[KEN](http://www.cybird.co.jp/recruit/interview/member_interview29/)
[RYO](http://www.cybird.co.jp/recruit/interview/member_interview22/)



---------------------------------------
はい、最後までお読み頂き、ありがとうございました！
引き続きサイバードではエンジニア採用を注力してまいりますので、よろしくお願いします！
皆さま、良いお年を～:grin:
GroovyからPythonが使えたという話

# TL;DR

jython経由でGroovyからPython2系を実行できる。

# 環境
Groovy 2.4.7
JVM 1.8.0_111
Python 2.7.5 (GCC4.8.5)

端的に言うとConoHaのCentOS 7で普通に構築すると入るもの。

# いきなりコード

```groovy:jython_test.groovy
@Grab("org.python:jython-standalone:2.7.0")

import org.python.util.PythonInterpreter

def interpreter = new PythonInterpreter()

interpreter.exec("a = 1 + 2")
interpreter.exec("print(a)")
```

インタープリターにまるっと渡して評価してるっぽい(気がする)

# 動機とか感想とか

G*カレンダーが一日分未投稿だったので何か書こうと思った。
そこで、私の興味の対象がPython周りに集中してたので、GroovyからPython呼べれば(私が)めっちゃ楽になるという理由で、呼ぶ方法を調べた。
結果、拍子抜けするほど簡単だった。Jythonのインタフェース作ってくれた人や、ノウハウ書いてくれた人達ありがとう！

# 参考

JythonでJavaからPythonを使う。あとハマったこと。
http://qiita.com/ota-meshi/items/76f4a65e9bd2fe0e2f68
クリキャンA日程！！

皆さん始めまして、クリキャンA日程参加のMine(お菓子配り)です。今日はクリスマスということでクリキャンのこと話します。スマホでやっているということとQiitaの使い方が分からないので分かりやすくまとめることは出来ませんがクリキャンB日程の人もいけない人も是非見てください


まず23~26日のリキャンA日程参加して分かった注意点等を伝えます  今回のクリキャンの会場の周りは山が多く景色がいいですがコンビニが無いです 売店はありますが無いものが多いので前もってお菓子等は準備しておくといいでしょう 部屋は一つ辺りの人数は多いですが結構いい部屋です タオル歯ブラシは毎日交換されるのでその準備は大丈夫と思います プレゼントは元々ある程度包んで持っていきましょう 


次は注目点です  注意点体操、注意点ヒューマン、注意点ビデオと続いた注意のまとめ方は今回は今年話題になったあれです  謎解きは今回はとてもハイレベルとなっていますなんと1グループしか成功出来ませんでした 今回も仮装パーティーは盛況でした 

打ちにくいのでここで終えてしまいますがA日程残り1日ちょっと、B日程の方も楽しみにしていてください、今回来れない人は行った人から感想とかを是非聞いて想像してくださいね
OpenCV Advent Calendar 2016まとめ

# はじめに
今日でAdvent Calendarもおしまいです。昨年は fukushima1981 先生が言い出しっぺの法則で大量の記事を投稿してくれてましたが、今年は総勢15名の方から**27日分**の記事を寄稿頂きました。その2ができるほど盛況で、改めてお礼申し上げます。

# OpenCV 3.2
Advent Calendar 2015 の時のデジャヴなのですが、12月23日（日本時間）に [OpenCV 3.2](http://opencv.org/opencv-3-2.html) がリリースされました。私もさっそくビルドしていますが、今回は自分のPRが含まれたリリースなので、感慨もひとしおです。OpenCVの開発は近年Itseezが行っていましたが、それが今年5月26日に買収のニュースが出て、OpenCVの古巣とも言うべきIntelが現在の開発母体です。もっともメンバーが特段入れ替わったわけではありませんがね。IntelがどのようにOpenCVをドライブしていくかはまだ不明ですが、例年通り3.2がクリスマスにリリースされたところを見ると、性急にOpenCVの開発方針を変える意図は無さそうで、ひとまずは安心できるかと思います。

今年の記事も、「xxとOpenCVを連携させてみた」というふうに、様々な言語/ライブラリ/プラットフォームと連携させた、という記事が多かったように思います。既にComputer VisionでできることをOpenCV単体ではまかないきれなくなってきている、とも見えますし、どんな状況においても必要になる、安定のOpenCVとも言えます。どのみち、**日本語ドキュメントはまだまだ貧弱**（だと感じているのは筆者だけでは無いと思います）ですので、是非来年以降も、Advent Calendarを**誰かが立ててくれれて**様々な情報共有がなされれば良いかな、と思います。

# 自分自身の反省
筆者自身の記事としてはやれSIMDだ、プラットフォームだ、命令セットだ、と言った情報を連投してしまい、ハードルを**変な方向に上げて**(レイヤを下げて？)しまったかな、と思います。どんな情報でも、誰かの役には立つと思うので、これからも積極的に情報を発信して行こうと思います。
以下の記事の執筆も予定していました、これ以降は[自身のサイト](http://tessy.org/wiki)にいつか書こうと思います。あと、私の書いたPRがOpenCVにマージされた経緯なども[次回の](https://kantocv.connpass.com/) [コンピュータビジョン勉強会@関東](https://sites.google.com/site/cvsaisentan/)で話そうと思っていますので、興味がある方は是非参加していただければと思います

- opencv_extra リポジトリの紹介
- 割り算の精度問題

# おわりに
最終回は，完全に雑談でした。
皆様、ありがとうございました。また来年も、私じゃないだれかよろしくお願いします。
メディアクエリ ブレークポイント設定 2016 決定版 @media css



1つだけでいい

```css

/* モバイル（768までの端末） */
@media screen and (max-width:767px) {
	
}

```

2つで分ける

```css

/* モバイル（768までの端末） */
@media screen and (max-width:767px) {
	
}

/* PC（768以上の端末） */
@media screen and (min-width:768px){
	
}

```

3つで分ける

```css

/* 小 (タブレット以下) */
@media (min-width: 768px) {
	
}
/* 中 (普通のデスクトップ以下) */
@media (min-width: 992px) {
	
}
/* 大 (大きいデスクトップ以下) */
@media (min-width: 1200px) {
	
}

```


よく見るデバイスのサイズ

- iPhone 4s 320px x 480px
- iPhone 5s 320px x 568px
- iPhone 6/7 375px x 667px
- iPhone 6/7Plus 414px x 736px
コンソールで動くエディタを作る(22日目) 範囲指定カーソル

本稿は[自作エディタをつくる Advent Calendar 2016](http://qiita.com/advent-calendar/2016/make_editor)の22日目です、レポジトリは[こちら](https://github.com/tinyco/tiny_code_editor)

# カーソルを再び考える

13日目の制御文字コードに誤りがあったため修正しました。

### 末尾カーソル問題・空行カーソル(14日目・15日目)

14日目に積み残してあった、行にn文字あるとき、カーソル位置はn+1箇所ある問題を修正しました。

```
(例)
「｜」が配置可能なカーソル位置、行にabcの3文字あるとすると
普通のエディタは｜a｜b｜c｜の4箇所に配置できる。
もしもカーソルを文字に色をつける形で実装している場合(コンソール上だとたいていそうなるはず)、
末尾の文字には色をつける文字がない
```

これの解決策として、末尾にカーソルがいるときは、色を付けために余計に空白文字をつけることにしました。

15日目にやった、空行にカーソルがおけるが空行には色をつける文字がない問題への対策と同様です。

### 範囲選択カーソル

コンソール**以外**で動く、普通のエディタでShift+十字キーを押すと、
範囲選択ができると思います。
これを実現するために、

```
typedef struct _cursor {
  unum position_x;
  unum position_y;
} cursor;
```

を単純な発想として

```
typedef struct _cursor {
  unum start_position_x;
  unum start_position_y;
  unum end_position_x;
  unum end_position_y;
} cursor;
```

に置き換えればいいのかな？と思ってやってみました。

実装時に気づいた、ハマりやすいポイントとして、

- 普通のエディタの十字キー相当の操作はstartを動かし、Shift+十字キー相当の操作はendを動かす
- 普通のエディタの十字キー相当の操作後は、startとendを同じ位置にする
- endはstartより前に来るときがある(Shift+左キー等)
  - `end > start`のときにswapしてしまうと、どっちを操作していたかわからなくなってしまう
  - 今回は、表示用に使い捨ての`start <= end`が必ず守られているカーソルを都度作成した

考えれば気づく話ではありますが、endはstartより前に来るときがあるんですね・・・。

ともあれカーソルだけは範囲指定できるようになったので、色々な機能をつけたりしたいです。

ついでにcursorを配列にしてsublimeやatom等にあるマルチカーソルを実現したかったのですが、
カーソルを増やすためには検索等の手段を用意しないと実用上意味がない気がしました。
まずはコピーペーストかな！

### キーバインド問題(未解決)

13日目に悩んでいた問題ですが、macのターミナル + bash環境において

```
Option + LEFT = 取得できる
Option + RIGHT = 取得できる
Shift + LEFT = 取得できる
Shift + RIGHT = 取得できる

Shift + UP / DOWN = 判別不能(Shiftを押さない時と同じ文字コードになる)
Option + UP / DOWN = 判別不能(Optionを押さない時と同じ文字コードになる)
Cmd + UP / DOWN / LEFT / RIGHT = 測定不能(Macのスクリーン移動に操作を取られる)
Ctrl + UP / DOWN / LEFT / RIGHT = 測定不能(Macのスクリーン移動に操作を取られる)
```

となっていて、何かのキーと十字キーの組み合わせで4方向全て使えるキーがありません。
現時点では試しにOptionと左右キーの組み合わせのみ実装していますが、上下も当然押したい・・・。
筆者の趣味の問題として十字キー以外でのカーソル移動はやりたくないので、
いまのところの候補は、

1. Optionと左右キーだけ範囲選択で、上下キーは常に範囲選択解除＋上下移動の操作にする(現時点の実装)
2. Optionと左右キーだけ範囲選択を開始できて、範囲選択中の上下キーは範囲選択状態を継続する。範囲選択状態解除は左右キー単体。
3. 案1のOptionをShiftにしたもの
4. 案2のOptionをShiftにしたもの
5. Escキー単体押しで範囲選択になって、その状態でもう一度Escキーを押すと解除される。
6. 案5のEscキーをCtrl+Dなど、組み合わせ系のショートカットキーにしたもの

なんとなく案2がいいのかなぁと思ってますが、
わかりにくいかもしれないな・・・と思ってます。
ご意見やアイデアがあれば教えてください(๑•́ω•̀)

### 最終行で下を押すとどうなるか(未解決)

現状で何も操作をしてないのですが、どうあるべきなのかがイマイチわからないです。

1. 何もしないべきだ
1. 改行を末尾に付け足すべきだ
1. 改行を末尾に付け足すべきだが、末尾に1度空行を足したらそれ以上は何もしないべきだ
1. ファイルを開いた時点で末尾が空行になるように編集するべきで、そうしたらこの問題も解決するはずだ
1. ファイル末尾の行の、行末にカーソルを移動するべきだ

結局好みの問題なんでしょうけども、自分の好みすらわからないですね・・・。
どれがいいんだろう。なんか改行足したい気もするのですが、十字キーで改行増えるのは変な気もする。

# 今日のまとめ

- 末尾カーソル問題を修正しました
- カーソルだけは範囲選択できるようになりました
- 未解決の問題が気になります、意見が欲しいです

![65dfa30f3a941eac239736369c886193.gif](https://qiita-image-store.s3.amazonaws.com/0/151926/75b2136c-b2af-5a00-1efe-68d719b31ccd.gif)

次はコピーペーストと、範囲指定カーソルの指定範囲を削除を実装したい！
そろそろ、エディタの名前も考えないとって気がしてきました。
フリーランス削除物語

これは[「フリーランス残酷物語 Advent Calendar 2016」](http://qiita.com/advent-calendar/2016/free_zankoku)の22日目のポエムなのですが、書いているのは日本時間の25日です。アメリカ西海岸的にはまだ24日のクリスマスイブです。

25日最終日の mesaka さんの記事（[「プログラミングって楽しいですか？」](http://d.hatena.ne.jp/mesaka/20161224)）も上がりました。みなさんほんとお疲れ様でした。僕も15日・17日・21日・とこの22日にできるだけ役に立たない糞ポエムを投げさせて頂きました。

僕的にフリーランスとは「サラリーマン以外」という定義でしかありません。社長も契約社員も受託もアルバイトもパートも、報酬を得ないインターンもフリーランスのようなものだと思っています。あまりにも広すぎる人たちの役にたつ話なんて書けないと思っていますし、読んだところできっと面白くありません。フリーランスはルールが存在しない世界で試行錯誤しながら生きていく人種なのだと思います。きっとそれぞれが独自のスキルや手法を持っていると思います。

フリーランスの定義などどうでもよいのですが、 Advent Calendar 2016ランキング なるものができています。みんなの頑張りがどのように反映されているのか確認してみてください。現在フリーランス残酷物語の購読数は164、いいね数は229です。

[Advent Calendar 2016ランキング](http://qiita.com/advent-calendar/2016/ranking/subscriptions)

それでは良いお年を
YesodのHandler関数からJSONを返す方法

Yesod Advent Calendar 2016を通してたくさんの知見が得られたことを嬉しく思います。

Yesodは素晴らしいフレームワークです。Haskellらしい厳密さに対するこだわりに満ちていて、Webアプリ内でのリンク切れは起きません。DBアクセスにも型安全にこだわり抜かれていて、常に、「何かに守られている」感覚でプログラムすることが出来ます。

しかし・・・型安全を捨てねばならない時もあります。昨今のクライアント側はReactで構築することが多く、この場合、WebサーバはAPIのみを提供すれば充分。型安全なHTMLの出番はなくなります。

この場合、Yesodの旨味はかなり無くなりますが、それでもそれなりに意味はあって、私がリリースしたWebアプリの場合、データ量が多いページを非力なスマホで表示する際に、Reactでは遅すぎて辛かった時に、hamletでHTMLを組み立てる方針に転換したことがあります。

たとえAPIのみの提供であってもリソースに型が割り当てられるというところに非常に嬉しさがあって、工夫次第でAPIの各URLを安全にクライアントに伝えることができるのです。

さて、本エントリでは、APIのコンテンツとしてよく使われるJSONをHandler関数で返す方法を説明します。

# Handler関数の型宣言

stackが作るテンプレートプロジェクトで、実はJSONを返す実装が書かれています。
Comment型は、``` config/models ``` の中で json というアノテーションが書かれているのが前提です。

```config/models
Comment json -- Adding "json" causes ToJSON and FromJSON instances to be derived.
    message Text
    userId UserId Maybe
    deriving Eq
    deriving Show
```

```Comment.hs
module Handler.Comment where

import Import

postCommentR :: Handler Value
postCommentR = do
    -- requireJsonBody will parse the request body into the appropriate type, or return a 400 status code if the request JSON is invalid.
    -- (The ToJSON and FromJSON instances are derived in the config/models file).
    comment <- (requireJsonBody :: Handler Comment)

    -- The YesodAuth instance in Foundation.hs defines the UserId to be the type used for authentication.
    maybeCurrentUserId <- maybeAuthId
    let comment' = comment { commentUserId = maybeCurrentUserId }

    insertedComment <- runDB $ insertEntity comment'
    returnJson insertedComment
```

ただ、この型宣言は汎用的すぎて好ましくありません。
出来れば

```Comment.hs
postCommentR :: Handler (Entity Comment)
```

と書きたい。そのためには、``` Entity Comment ``` を ``` ToContent ``` と ``` ToTypedContent ``` のインスタンスにします。
下記に、書き換えた例を載せます。

```Comment.hs
module Handler.Comment where

import Import

import Data.Aeson (encode)

postCommentR :: Handler (Entity Comment)
postCommentR = do
    -- requireJsonBody will parse the request body into the appropriate type, or return a 400 status code if the request JSON is invalid.
    -- (The ToJSON and FromJSON instances are derived in the config/models file).
    comment <- (requireJsonBody :: Handler Comment)

    -- The YesodAuth instance in Foundation.hs defines the UserId to be the type used for authentication.
    maybeCurrentUserId <- maybeAuthId
    let comment' = comment { commentUserId = maybeCurrentUserId }

    insertedComment <- runDB $ insertEntity comment'
    return insertedComment

instance ToContent (Entity Comment) where
  toContent = toContent . encode
instance ToTypedContent (Entity Comment) where
  toTypedContent = TypedContent "application/json" . toContent
```

下４行がインスタンスを宣言している箇所です。定型的なコードでいけます。
ただ、ビルド時に ``` orphan instance ``` の警告が出ることがあります。

```
 Orphan instance: instance ToContent (Entity Comment)
```

この意味と解消の検討方法については、拙エントリ「[Warning: Orphan instanceを回避する](http://qiita.com/jabaraster/items/1278a82dea9639f74efe)」をご覧下さい。


# まとめ

これで理想的な型宣言を得ることが出来ました。
``` ToContent ``` と ``` ToTypedContent ``` のインスタンスにするのが少し面倒ですが、適切な型宣言を得るには軽い代償だと思います。
Visual Studio Code上でwebpack-dev-serverを使ってデバッグする

# はじめに

VSCodeの売りの1つにデバッグ機能がありますが、webpack/webpack-dev-serverを使った場合のやり方があまり見かけなかったのでまとめてみました。

# 検証した環境

- OS
 - Windows 10
 - MacOS Sierra
- VSCode 1.8.1
- Debugger for Chrome 2.4.1
- webpack 1.14.0
- webpack-dev-server 1.16.2

# 準備

## webpack/webpack-dev-serverのインストール・設定

npmでインストールし、webpack.config.jsを編集します。詳しいやり方は他の記事を参照してください。

VSCodeのデバッグ機能を使う場合、sourcemapを出力するようにする必要があります。自分が実行した時の値を載せておきます。

```js:webpack.config.js
const config = {
  devtool: "source-map",
  entry:  __dirname + "/app/App.js",
```

devtoolがsourcemapの形式を表します。

```bash:webpack-dev-server実行時の引数
webpack-dev-server -d --progress --colors --display-error-details
```

-dでsourcemapを出すように指定しています。

## Debugger for Chromeのインストール・設定

[Debugger for Chrome](https://github.com/Microsoft/vscode-chrome-debug)をインストールします。
拡張機能のMarketplaceから検索・インストールできます。

インストール後、デバッグ画面を開いてlaunch.jsonを編集します。

```json:launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome against localhost, with sourcemaps",
      "type": "chrome",
      "request": "launch",
      "sourceMaps": true,
      "url": "http://localhost:8080/",
      "webRoot": "${workspaceRoot}",  // ${workspaceRoot}/appではない
      // Windowsの場合のみ以下設定が必要
      "sourceMapPathOverrides": {
        "webpack:///./C:/myproject/*": "${webRoot}/*"  // 動く
        // "webpack:///./*": "*"  // 動かない
      }
    },
    {
      "name": "Attach to Chrome, with sourcemaps",
      "type": "chrome",
      "request": "attach",
      "port": 9222,  // Chrome起動時のremote-debugging-portを指定
      "sourceMaps": true,
      "url": "http://localhost:8080/",
      "webRoot": "${workspaceRoot}",    // ${workspaceRoot}/appではない
      // Windowsの場合のみ以下設定が必要
      "sourceMapPathOverrides": {
        "webpack:///./C:/myproject/*": "${webRoot}/*"  // 動く
        // "webpack:///./*": "*"  // 動かない
      }
    }
  ]
}
```

ハマりどころはコメントに書いた部分です。
sourcemapのパスが想定と合わないとブレイクポイントで止まってくれません。

また、WindowsとMacでwebpackが作るパスが違います。

```
// Windowsの場合
webpack:///./C:/a/b/c/myproject/app/App.js
// Macの場合
webpack:///./app/App.js
```

これとなぜかDebugger for Chromeのデフォルトのsourcemap書き換えがWindowsの場合のみ合っていませんでした。

```js
"sourceMapPathOverrides": {
    "webpack:///./*":   "${webRoot}/*", // Example: "webpack:///./src/app.js" -> "/users/me/project/src/app.js"
    "webpack:///*":     "*",            // Example: "webpack:///C:/project/app.ts" -> "C:/project/app.ts"
}
```

さらに以下問題があるため、キーに${workspaceRoot}は今の所使えないようです。

https://github.com/Microsoft/vscode-chrome-debug/issues/226

今回のケース以外でもsourcemapの不一致が合った場合は、sourceMapPathOverridesで元のソースファイルとのマッピングを正せばデバッグが機能するはずです。

# デバッグ方法(launchの場合)

1. VSCode上でブレークポイントを設定
2. VSCodeのデバッグ画面から'launch'を起動(Chromeが起動される)
3. Chrome上で画面操作
4. VSCode上のブレークポイントで止まる
5. VSCode上でデバッグ操作

# デバッグ方法(attachの場合)

1. VSCode上でブレークポイントを設定
2. Chrome上で--remote-debugging-portオプションをつけて起動([OSごとのやり方](https://github.com/Microsoft/vscode-chrome-debug#attach))
3. VSCodeのデバッグ画面から'attach'を起動
4. Chrome上で画面操作
5. VSCode上のブレークポイントで止まる
6. VSCode上でデバッグ操作

# 注意

- 今のところブラウザの開発者ツールを同時に起動すると切断される
- VSCodeとChromeの接続がうまくいかない場合、Chromeを再起動して接続し直すとうまくいくことがある

# 最後に

これでconsole.logと書く不毛な作業から解放される。。
Canvasで波紋みたいなアニメーション

まだ途中。。。
こちらを結構参考にさせていただいております。
http://wiredhiro.jp/blog/archives/2303

現段階で課題が2点。
1. 今だと複数の円が同時に表示されているが、これをランダムなタイミングで表示するようにしたい。
2. http://jsdo.it/kazuki_nagasawa/createjs-easeljs-012
みたいに同じ座標から等間隔で円が広がっていくようにしたい。。。

とりあえず現段階のソースコード

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Canvas</title>
</head>
<body>
  <h1>Canvasの練習</h1>
  <canvas id="mycanvas"
          width="600" height="400">
  Canvasに対応したブラウザを使ってください。
  </canvas>
  <script src="myscript.js"></script>
</body>
</html>
```

```js:myscript.js
var circleArr=[];
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
var w=canvas.width;
var h=canvas.height;
window.onload = function(){
  draw_circle();
  animation();
}

function animation(){
  ctx.clearRect(0,0,w,h);
  for(var i=0; i<circleArr.length; i++){
    var this_circle = circleArr[i];
    this_circle.update_me();
  }
  requestAnimFrame(animation);
}

function draw_circle(){
  for(var i=0; i<50; i++){
    circleArr[i]=circle();
  }
}

function circle(){
  var x=Math.floor( Math.random()*w );
  var y=Math.floor( Math.random()*h );
  var r=0;

  var update_me = function(){
    ctx.beginPath();
    ctx.arc(x,y,r,Math.PI*2, false);
    ctx.stroke();
    if(r<200){
      r += 1;
    }else{
      x=Math.floor( Math.random()*w );
      y=Math.floor( Math.random()*h );
      r =0;
    }

  }

  return{
    update_me:update_me,
    x:x,
    y:y,
    r:r
  }
}

window.requestAnimFrame = (function(){
  return window.requestAnimFrame     ||
  window.webkitRequestAnimationFrame ||
  window.mozRequestAnimationFrame    ||
  window.oRequestAnimationFrame      ||
  window.msRequestAnimationFrame     ||
  function(callback){
    window.setTimeout(callback, 1000/60);
  };
})();
```
技術英語 > a list of food ingredients followed by [directions for preparation].

@ Introducing Python: Modern Computing in Simple Packages by Bill Lubanovic
(No. 131 / 12833)

プログラムの説明に関して、レシピとの比較をしている。

> a list of food ingredients followed by **<font color=red>directions for preparation</font>**.

意訳「食材のリストに続いて、**準備手順**が記載されている」

codingでのdirections for preparationに対応するのは何だろうか。
いきなり実装はないので、ソフト設計？
コンソールで動くエディタを作る(21日目) テスト・バグフィックス

本稿は[自作エディタをつくる Advent Calendar 2016](http://qiita.com/advent-calendar/2016/make_editor)の21日目です、レポジトリは[こちら](https://github.com/tinyco/tiny_code_editor)

# プルリクエストをもらう

equal-l2氏から2件プルリクエストをもらいました٩(๑❛ᴗ❛๑)۶
自分がこまめにpushしていなかったせいでconflictして申し訳ない(しかも直してもらった。。。)

1件目はmakefileに関するもので、暗黙変数を使うようにするものです。

16日目にmakefileを書き間違えてgcc(指定したつもりが、設定ミス)ではなくcc(デフォルト)でコンパイルされていました。
そういうデフォルトルールがいくつかあるらしく[(参考)](http://www.ecoop.net/coop/translated/GNUMake3.77/make_10.jp.html)、
デフォルトルールを使うようにしたらmakeする人の環境に合わせてビルドできるよ、
っていうプルリクエストでした。

C言語でもCPPFLAGSを指定するのが不思議ですが、
調べた感じ、普通はそうするようです。
C++だとCXXFLAGSみたいなので、歴史的経緯とかでしょうか？

あわせて、makefileのちょっとしたリファクタリングをしました。

2件目はスペルミスの修正です。

単純にスペルが間違ってるもののほかに、
`lines_calculatotion_width` → `lines_calculate_width`のように動詞と名詞が違うものと、
`ARROW`(矢印キー)はutf8として正しくないが`ALLOW`しているネーミングセンスのわかりにくいさの修正がありました。
自分でもわかりにくいと思って`ARROW_KEY`にリネームしていたのでconflictしてしまいました。

# テストを充実させる

自分の中ではMVCでいうとMのコードにテストを増やしていきました。

備考：自分の中の基準

- M -> typeフォルダ
- V -> renderフォルダ
- C -> commandフォルダ

なので、typeフォルダのコードにテストをつけました。
条件分岐を網羅してないですが、該当フォルダには全メソッドテストがつきました。
基本的にテストしたい関数を呼んでprintfするだけなので、お手軽なのが良いですね。

テストを増やしたので、バグを2つみつけました。
1つめは、asciiコードだと上手くいっていたがutf8だと上手くいかないところで、
2つめは、free先がファイル先端・末尾を超えている時にセグフォでした。
テストがあったらあったで色々わかっていいですね。
せっかくなので、変数名のリネームもしまくります。

あと、モンキーテストで見つけたバグもいくつか直しました。

# include を整理する

いままで適当にincludeしていたheaderを整理しました
あわせて、clang-formatのSortIncludesをtrueにしました

# 今日のまとめ

- テストが充実しました
- bugをいくつか修正しました
- includeを整理しました

知人のrubyエンジニアにiOSアプリの作り方を休みに教えていた、
っていう更新が遅れた言い訳でした。
最初はswiftどうこうよりもXcodeが難しい気がしますね。

19日目のコメントの静的解析ツールが気になります、valgrindも動かしたいけど。
残り日数も少ないですが、目標としては25日目のブログまでに検索とコピーペーストをつけたい！
npm使い方メモ


久しぶりにJS触ったのでやったことメモ

- npm バージョンアップ
- npm init
- npm intall

## npmバージョンアップ

`sudo npm install -g npm`

## npm init

`npm init`

色々プロジェクト作る時に聞かれるので答えていくと、`package.json`が出来る

## npm install

`npm install bulma --save`

`--save`または`-s`とするとpackage.jsonに依存パッケージとして追加される

一気にパッケージをインストールしたい時は`npm install`と入力するとpackage.jsonにあるパッケージがインストールされる

## プロジェクトの最小構成

```
dist/  // srcの中身をビルドしたのもが入る
src/  // htmlやJSコード
   /index.html
   /js/
   /css/
   /img/
node_modules/  // npm installして入ってくるモノ
package.json  // パッケージ管理
```

## 流れ
`src/js`下に書いて`npm run build`で`dist/bundle.js`に書き出す
書き出したjsをindex.htmlで読み込ませてブラウザで見る

とりあえずこれで良い

## Babel

babelはES2015を現状のブラウザで動くコードに変換(トランスパイル)してくれる
※調べたけど今回は使ってない

`npm install --save-dev babel-cli babel-preset-env`

presetとは: どの仕様で動いているかを選択するための項目
.babelrcで指定

```.babelrc:.babelrc
{
  "presets": ["env"]
}
```

## 使うコマンド
`npm intall パッケージ -s`
`npm run`
`npm run 設定したコマンド`


## 参考
[フロントエンド開発の3ステップ](http://qiita.com/hashrock/items/15f4a4961183cfbb2658 "フロントエンド開発の3ステップ")
[step by stepで始めるwebpack](http://qiita.com/howdy39/items/48d85c430f90a21075cd "step by stepで始めるwebpack")
[Babel](https://babeljs.io/ "Babel")
[Babelを使おう](http://qiita.com/foursue/items/d80667eff2faed8613f2 "Babelを使おう")
[Babel6でトランスパイル](http://christina04.hatenablog.com/entry/2016/02/24/224116 "Babel6でトランスパイル")
今しかできないことをしよう

子育てエンジニア AdventCalender2016 の最終日です。
最終日にふさわしいか内容かどうかは別として、私自身のことを書いていきます。

#自分の子育て環境
私、妻、娘（幼稚園の年長）、息子（幼稚園の年少）の4人家族です。
仕事はリモートワーク可能ですが、基本的には家では作業しません。

#子供はいつまでも子供じゃない
仕事を続ける上でやらないといけないこと、やりたいこと、たくさんあると思います。
ただ、私が気をつけているのは、子供が子供でいるのは、今しかないということです。
正直なところ、仕事上で負債を背負っている部分はあるかもしれません。
今しかできない仕事もありますが、今しかできない子供との時間は、本当に今しかありません。

#普段の生活
子供たちと過ごす普段の生活を描いてみます

##幼稚園まで一緒に通う
娘が年少さんになって半年くらい経った時に、サラリーマンを辞めました。
これは別に娘と幼稚園に通うためにサラリーマンを辞めたわけではありません。
ただ、サラリーマンを辞めて時間が比較的コントロールできるようになったので、
一緒に幼稚園まで通うようになりました。
それから2年、朝早い時間に打ち合わせ等がない限りは、家族みんなでお話をしながら幼稚園に通うのが日課になっています。

##お風呂に一緒に入る
基本的に、18時半過ぎには家に着くように帰ります。
お家に着いたら、まずお風呂。
子供たちをお風呂に入れるのは、基本的に私の役目です。
もちろん、仕事でお風呂に一緒に入られない日もありますが、そんな日は週に1日あるかないか。
ほぼ毎日子供たちとお風呂に入っています。
お風呂では、幼稚園で何をして遊んだとか、そんなことをやっています。
妻は夕飯の準備をしています。

##夕飯を一緒に食べる
お風呂から上がったら、家族みんなで夕飯を食べます。
基本的には毎日家族で夕飯を食べます。
一家団欒。

##子供たちと遊ぶ
寝る時間までの間、ほんの少しですが子供たちと遊びます。
すごろくやったり、ゲームしたり。

##子供たちと寝る
基本、21時には子供たちと一緒に就寝します。
最初の頃は、子供たちを寝かしつけた後に起きて、勉強の時間に充てたりました。
ただ、子供たちの寝つきが悪いと1時間以上は寝てくれないことがあったり、
いざ子供たちが寝ても、自分も眠かったりして、どちらかというとそのまま寝ちゃうことが多かったです。
ですので、無理に起きることは辞めました。
子供たちと一緒に寝ます。その代わり、朝起きるのは早いです。

#仕事のこと
夜9時には寝てしまうので、朝は4時半に起きます。
場合によっては3時半や4時に起きることがありますが、だいたい4時半くらいです。
5時から8時までが最初の仕事タイムです。
その後、朝ごはんを食べて、前述の通り、子供たちと幼稚園に行った後、作業をするコワーキングスペースに向かいます。
10時から17時まで、コワーキングスペースで仕事します。
18時半頃帰宅し、後は前述の通り、お風呂や夕飯を子供たちと共にします。

#できることを無理せずに
子供たちとこのような生活ができるのは、小学生の低学年くらいまでだと思うので、
せいぜい後5年くらいだと思っています。
その後は子供たちの世界もどんどん膨らんで、親と一緒に過ごす時間は少しずつ減っていくでしょう。
できることを無理せずにやっていこうと思っています。

以上、子育てエンジニア AdventCalender2016は、これで終わりです。
【Objective-C】delegate入門

きっかけは後輩にdelegateについて教える機会があったことです。
最初は自分もなかなか理解できなかったことを思い出しました。
delegateを理解する手助けができるような記事になればと思っています。

## こんな人にオススメ
* ViewControllerに処理を書いていけばiOSアプリ作れる人
* でも処理を他のクラスに切り出すのは難しい、という人
* なんとなくdelegateって言葉は知っているけど、自作delegateは作れない・・・という人

## 書くこと
* delegateの概要
* delegateの実装方法

## 環境
* Xcode8.2
* Objective-C

## delegateの概要
そもそもdelegateって何なのでしょう。
Appleのドキュメントには下記のように書かれています。
（[Objective-C プログラミングの概念](https://developer.apple.com/jp/documentation/CocoaEncyclopedia.pdf) p.22）

> デリゲート(delegate, 委譲)とは、あるオブジェクトがプログラム中でイベントに遭遇したとき、それに代わって、または連携して処理するオブジェクトのことです。

delegateのイメージ

![delegate.001.jpeg](https://qiita-image-store.s3.amazonaws.com/0/102583/01f35a94-0ee6-28b9-83bb-792d277048d0.jpeg)

上記の「delegateされる側」というのがdelegateオブジェクトです。
「delegateする側」はdelegateオブジェクトが何者なのかはわからないけど、delegateオブジェクトに対してdelegationの通知を送ります。
そして、delegateオブジェクトは通知を受け取ったあとの処理を行います。

## delegateの実装方法
それではdelegateはどのようにコードにすればいいのでしょうか。
だらだら説明するより実際に見たほうが早いと思うので、簡単なサンプルコードを書いてみました。
補足をコメントに記載しているので参考になれば幸いです。

### delegateする側

```objc:Hoge.h
#import <Foundation/Foundation.h>

/**
 HogeDelegate protocol
 */
@protocol HogeDelegate <NSObject>
/*
 @optionalではないメソッドは、delegate準拠先で必ず実装する必要があります。
 実装しないと警告が発生します。
 */
@optional
// @optional以下のメソッドはdelegate準拠先での実装は必須ではなくなります。
- (void)didFuga: (NSString *)string;

@end

@interface Hoge : NSObject

/**
 delegateオブジェクト
 */
@property (weak, nonatomic) id <HogeDelegate> delegate;

- (void)fuga;

@end
```

```objc:Hoge.m
#import "Hoge.h"

@interface Hoge ()

@property (strong, nonatomic) NSString *hogeString;

@end

@implementation Hoge

/*
 その他の実装は省略
 hogeStringに値が設定されていたりします。
 */

- (void)fuga
{
    /* 
     delegateメソッドが@optionalなので、respondsToSelectorで
     delegateオブジェクトがdelegateメソッドを実装しているか判定します。
     */
    if ([self.delegate respondsToSelector:@selector(didFuga:)]) {
        /* 
         delegationの通知を送ります。
         必要であれば、このように引数にHogeクラス側の情報を渡すことも可能です。
         */
        [self.delegate didFuga:self.hogeString];
    }
}

@end
```

### delegateされる側

```objc:ViewController.m
#import "ViewController.h"
#import "Hoge.h"

@interface ViewController () <HogeDelegate> // HogeDelegateに準拠します

@property (weak, nonatomic) IBOutlet UILabel *hogeLabel;
@property (strong, nonatomic) Hoge *hoge;

@end

@implementation ViewController

#pragma mark - Lifecycle

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    self.hoge = [Hoge new];
    // hogeのdelegateに自身を指定します。
    self.hoge.delegate = self;
    [self.hoge fuga];
}

#pragma mark - HogeDelegateMethod

/**
 delegationの通知を受けとったら実行する処理
 delegateメソッドの具体的な実装を記述します。

 @param string Hogeクラス側から渡されてくる文字列
 */
- (void)didFuga:(NSString *)string
{
    // Hogeクラス側から渡されてくる文字列をラベルに表示します。
    self.hogeLabel.text = string;
}

@end
```

以上、簡単ではありますがdelegateについて紹介しました。

### ポイント1
他クラスに処理してほしいとか、自クラスの値渡したい、というときに便利だと思います。

また、ViewControllerのこの処理のまとまりを別クラスに切り出したい、というときにも役立つはずです。
ViewControllerでやらなければならない処理はdelegateで実装して、その他ロジック等は別クラスとして切り出す、ということができます。

### ポイント2
サンプルコードの`Hoge`クラスは`ViewController`クラスのことを知りません。
（`#import "ViewController.h"`とか見当たらないですよね）

`Hoge`クラスが`ViewController`クラス以外にも様々なクラスから使われるとしてもそのクラスのことを知らなくていいのです。
これは各クラスが複雑に依存しあうカオスな状況を避けられることを意味します。

うまく使って継続開発しやすいアプリを作っていただければと思います！
Grimoire Inspector(β)を作った

まだまだ開発途上で、qiitaの記事にしようかものすごく悩んだのだが、せっかくなので放出する。
**[Grimoire.js](https://grimoire.gl)**は普段のWeb開発のようにWebGLが扱えるようにしていくためにありとあらゆる試行をしている。
その中の一つが`Grimoire.js Inspector`だ。

Webエンジニアのほとんどは、CSSやjavascriptを変更しては、実際の画面を確認して直したり、その際に何がおかしいか確認する際にインスペクタの力を借りることだろう。  
Grimoire.jsはこの`<canvas>`という一つのWebの機能の一部を、他のWebの部品にできる限り近い形で利用するために、今回はChromeの拡張機能として`Grimoire.js inspector`なるものを作成した。

# 実際に使ってみる

まだChromeのマーケットプレースに出していないため、少し面倒な手順を経る必要があるが、誰でも利用できる。

## gitでクローン

適当なフォルダを作り、`git`でクローンする。**[レポジトリのページ](https://github.com/GrimoireGL/grimoirejs-inspector)**からダウンロードしてくるのも良いだろう。

```shell-session
git clone git@github.com:GrimoireGL/grimoirejs-inspector.git .
```

## chromeの拡張機能developerモードを有効にして、インストール

Chromeの拡張機能ページ(chrome://extensions/)にアクセスして、開発者モードを有効にする。

![Chrome拡張機能の開発者モード](https://i.gyazo.com/2442cd39ddd4f4eb77b4e5125ee44010.png)

Load Unpacked extensionで先ほどダウンロードしたフォルダを選ぶ。

![Chrome拡張、パックされていない拡張機能の読み込み](https://i.gyazo.com/917bbd76c138ac5211e644c2941bc442.png)

できました。

せっかくですので、**[Grimoire.jsのトップページ](https://grimoire.gl)**を見てみましょう。

![Inspectorの画面](https://i.gyazo.com/d6abce2e7d5f196cc31f83a95fe79736.png)

タグを選択すると、そのタグについているコンポーネントや属性の詳細が見れます。実際に変更したつもりのオブジェクトの属性が変更されているか、ノードが本当にインスタンス化されているかなどはわかりやすいことでしょう。

まだまだ、**ほとんどの属性は読み取り専用**、監視しているオブジェクトのプロパティが頻繁に変わる場合は、非常に重いのですが、今後開発していい感じになってきたらChromeの拡張機能のマーケットプレースに出したいと考えています。

Grimoire.jsの開発に必須のツールになることでしょう。

# コントリビューター募集

このインスペクタのGUIを作るのが僕のスキルセットでは非常に辛いです。  
Vue.jsを用いて主に開発されているこのインスペクタですが、Grimoire.jsの各種コンバーターなどに拡張可能なように対応したり、色々と手が回らないけど必要な機能がいくつもあります。　　
もし、片手間にでも協力していただける方や、御指南等いただける方がいらっしゃいましたら、ぜひ、Grimoire.jsの**[コミュニティ](https://grimoire.gl/guide/community)**へ。
【プログラミング初心者向け】上手くいかなかっ時に確認したいミス集

#はじめに
大学で質問を受けたりするんですが,本当に初めたばかりだと何を確認すべきかわからないらしいです
ってことで注意すべき点をまとめました

#プログラム中にあるバグ
##全角文字
コメントを書いたときに全角を切り忘れてインデントで全角スペースを含んでしまったり
プログラムファイル名を全角文字にしてターミナルで反応しなかったりバグの温床です
(ちなみに絶対パスの時のフォルダ名に全角が入っていてもバグの要因になりえます)
個人的にはコメントなども英語とかで書くことをお勧めします(一人で書くなら)

##区切り文字忘れ
C言語で言うところの「;」です
区切り文字のない言語(Pythonなど)に慣れた後だと特に忘れがちです

##継続行の忘れ
VBでいうところの「_」です
継続行を使うこと自体が少ないので意外と忘れがちです

##括弧の数が合わない
if文やループ文を消したり拡張したときに括弧がズレたりして合わなくなるケースです
インデントすれば一発でわかるので最初は面倒ですがインデントする習慣を付けましょう

##ゼロスタート
配列 array[n] を制限した場合,ゼロスタートの言語では array[0]～array[n-1]までを用意したことになります
ここで array[n] を呼び出そうとしてエラーになることがあります

#最後の処理
##改行文字
C言語のprintfなどで文字を表示した後に改行し忘れるケースです
Javaのprintlnのように改行もセットになっている関数は忘れにくいです

##終了コードを返さない
C言語で言うところのmain関数の「return 0(EXIT_SUCCESS)」
コンパイラによっては警告だけで終わり,自動補完してくれますが
プログラミングコンテストなどではランタイムエラーとなります

##予約したメモリ領域を開放し損ねる
C言語で言うところの「malloc」です
メモリが扱える言語がそもそも少ないのでC/C++の時は注意が必要です
これもコンパイラに補完してもらえることがほとんどですが,バグの元なので正しく書きましょう

#その他
##文字エンコード
保存するソースコードの文字エンコードとターミナルの文字エンコードが異なれば
日本語などが文字化けしたり,コメント中の全角文字が反応してコンパイルできなかったりします

##宣言の仕方
私が見た希少な例ですが

```test1.c
  int x = 0;
  int y = 2 * x + 3;

  x = 3;
  printf("%d\n",y);
  return 0;
```

たぶんy=2*3+3=9としたかったんでしょうけど
「=」は方程式を表すものではないので
注意しましょう

```test1-a.c
  int x = 0;
  int y;

  x = 3;
  y = 2 * x + 3
  printf("%d\n",y);
  return 0;
```

こんなのもありました


```test2.c
  int i;
  int n;
  int N;
  int f[N];

  n = 10;

  f[0] = 1;
  f[1] = 1;
  for(i = 2; i < n; i++){
    f[i] = f[i-1] + f[i-2];
  }
  printf("%d\n",f[n-1]);
```
フィボナッチ数列を書きたかったのかもしれませんが配列の宣言がおかしいです(gccで何故か通ってました)

```test2.c
  int i;
  int n;

  int f[10];

  f[0] = 1;
  f[1] = 1;
  for(i = 2; i < n; i++){
    f[i] = f[i-1] + f[i-2];
  }
  printf("%d\n",f[n-1]);
```
こう書くかmallocなどで必要なメモリ分予約するべきです
ど素人がつまづいた、AWSの接続

AWSが12ヶ月無料ということでメールサーバーでも構築するかと息巻いてみたものの、接続方法がわからない。ターミナルをpoderosaで縛っているため、尚更わからない。

そこでググってみるとおあつらえ向きな情報が。

http://saifis.net/?p=116

こちらの方の手順でやってみて接続してみると、見慣れた黒い画面に接続ｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!

と思ったのもつかの間、
「Please login as the ec2-user user rather than root user.  」

と表示され接続が切れました(´・ω・`)

今思えばrootじゃなくてec2-userでログインしてね！ってモロに書いてるんですが、接続が自動的に切れる現象に混乱してそこから色々ググって30分位ハマっていました。

結論を言うと先述したとおり、SSHのアカウントパラメーター（ID）を"ec2-user"にして接続を押下するだけ！簡単！！
【PHP】演算子

この記事は[一人PHP総復習 Advent Calendar 2016](http://qiita.com/advent-calendar/2016/php_beginner)6日目の記事です！
今日はPHPの演算子についてまとめてみます( *˙ω˙*)و ｸﾞｯ!

とは言っても、全部羅列するだけだとドキュメントと変わらないので、よく使うやつと気をつける点を紹介します。

## 演算子とは

> ひとつ以上の値 (あるいはプログラミング用語における「式」) から別の値 (制御構造が式になるように) を生み出すもの

（PHPマニュアルより）

言葉にすると難しいですね。汗
変数のような値に対して効果を与えるものと言えます。
`= + ? !` など、よく目にするものが多いですね。

覚えるまでもなく、演算子なしにプログラミングは（ほぼ）できないので、習うより慣れろで見ていきましょう。
演算子の名前ごとに分類していますが、名前は覚える必要ないと思います。

## 演算子の分類
### 代数演算子
プログラミング以外でもよく目にする、いわゆる「計算」のようなものです。

`$a + $b` は加算
`$a - $b` は減算
`$a * $b` は乗算（×ではないので注意）
`$a / $b` は除算

といった具合です。
除算の結果は整数または[浮動小数点数](http://php.net/manual/ja/language.types.float.php)が返されるので、扱いには注意しましょう。

演算子の効果： 計算

### 代入演算子
これまでにも頻出した`=` を使います。
この `=` は計算式の「等しい」ではなく「値の代入」を示します。

`$b = 1;`

`$b` は1と等しい、ではなく、`$b` に1を「代入する」という意味です。

演算子の効果： 代入

### 比較演算子
値同士を比較してその結果を返します。

例えば、先ほどの`=`は「代入」を表していましたが、`===`は「等しい」ことを演算します。
`$a === $b` は`$a`と`$b`が等しい場合はboolean型の`TRUE`、等しくない場合は`FALSE`を返します。

ただし、等しいことを比較する演算子には型を変換して比較する `==` と、型が等しいことも精査する `===` があるので注意してください。

```php
<?php

$a = '1'; // string型（文字列）
$b = 1; // integer型（整数）

echo $a == $b; // true
echo $a === $b; // false
```

「型」の勉強がここでも活きてきますね( 厂˙ω˙ )厂

よく使う比較演算子には、

`!=` 等しくない（型を変換して比較）
`!==` 等しくない（型も比較する）
`>` 大なり
`>=` 大なりイコール

などがあります。
`!`は、下記でも紹介しますが主に否定の意味を表します。

演算子の効果： 比較


さらに、三項演算子というものがあります。
`?:`を使います。

`式1 ? 式2 : 式3`

式1を評価し、trueの場合は式2を、falseの場合は式3を返します。

```php
<?php

$user = 'Tom';
$greeting = isset($user) ? 'Hello, '. $user : 'Hello, guest';

echo $greeting; // 'Hello, Tom'
```

初めに式1の`isset($user)`を評価して、`true`だったので式2を返しています。（その返り値を`$greeting`に代入）

また、式2が式1と同じ値をとる場合は省略ができます。

```php
<?php

$user = ['id' => 1, 'age' => 18, 'region' => 'Tokyo'];
$name = $user['name'] ?: 'NONAME';

echo $name; // 'NONAME'
```

さらにPHP7からはnull合体演算子という`??`を使った演算子ができました。

`式1 ?? 式2`

式1が存在するとき式1を、無い場合は式2の値を返します。

```php
<?php

// 下記は全て同じ結果を返す処理
if (isset($name)) {
	$user['name'] = $name;
} else {
	$user['name'] = 'NONAME';
}

$user['name'] = isset($name) ? $name : 'NONAME';
$user['name'] = $name ?? 'NONAME';
```

一行でスッキリ簡潔に書けるので、null合体演算子よく使います！

### 論理演算子
条件式を組み合わせて評価をすることができます。

`式1 && 式2`

上記の`&&`は「且つ」を表すので、「式1がTRUE且つ式2がTRUE」の時に`TRUE`を返します。

`式1 and 式2`

上記も同様に「且つ」を表しますが、`&&`と`and`は優先順位が違います。
同様に「又は」を意味する`or`と`||`も優先順位が違うので注意してください。

優先順位は `or << and << || << &&` なので、

`if (式1 && 式2 || 式3 or 式4) { ・・・`

という条件文があった場合は、

① `式1 && 式2`
② `① || 式3`
③ `② or 式4` 

という順で演算されます。

### 文字列演算子
`.`を使って文字列を操作します。

```php
<?php

$greeting = 'Hello, ';
$message = $greeting . 'Tom!';

echo $message; // 'Hello, Tom!'
```

文字列を`.`で繋げると、結合します。

```php
<?php

$greeting = 'Hello, ';
$greeting .= 'Tom!';

echo $greeting; // 'Hello, Tom!'
```

`.=`を使うと、左の変数に右の文字列を結合して代入します。


## まとめ
ごくごく基本的な演算子をさらってみました。
演算子をうまく使って、できるだけ簡潔なコードを書いていきたいですね！
Unity2D ～キャラクター操作ジャンプ編～


#ジャンプスクリプト
前回のキャラクター操作スクリプト作成の引き続きっぽいやつ
##とりあえずスペース押したらジャンプ
```csharp
public float flap = 1000f;

void Update () {
        if (Input.GetKeyDown("space"))
        {
            rb2d.AddForce(Vector2.up * flap);
        }
}
```
これを追加すればスペースを押したらジャンプ
　→このコードだと何段階でもジャンプできちゃいます
飛ぶ量を変えたいときはflap変更
速さを変えたいときはInspentorタブのRigidbody2DのGravityScaleの数値を上げればok
![gfsrdgsg.PNG](https://qiita-image-store.s3.amazonaws.com/0/156510/f896f7b9-b38d-d032-be4e-e267d01bd0c1.png)

##1段ジャンプ制限
```csharp
bool jump = false;

    void Update () {
        if (Input.GetKeyDown("space") && !jump)
        {
            rb2d.AddForce(Vector2.up * flap);
            jump = true
        }
    }

    void OnCollisionEnter2D(Collision2D other)
    {
        jump = false;
    }

```
OnCollisionEnter2Dはオブジェクトに衝突した時に呼び出される
2Dの場合は2Dまでの名前指定が必要です
注：衝突するオブジェクトにはどちらもcolliderとrigidbodyが付いている必要があります
地面には物理法則はいらないので、Bodytypeをstaticにでもしておきましょう。


##地面にぶつかったときのみジャンプ
オブジェクトそれぞれにタグを付けることで、衝突時の判定に使えます
地面のオブジェクトのInspertorのTagをGroundに変更

![gfdsgraegergs.PNG](https://qiita-image-store.s3.amazonaws.com/0/156510/17fbe5cc-194b-cd33-adb6-d52e542edc0b.png)



```csharp
    void OnCollisionEnter2D(Collision2D other)
    {
        if (other.gameObject.CompareTag("Ground"))
        {
            jump = false;
        }
    }
```
こんな感じ

#まとめ
大体こんな感じで横スクロールアクションの超基本は出来たかな

```csharp

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Player : MonoBehaviour {

    //変数定義
    public float flap = 1000f;
    public float scroll = 5f;
    float direction = 0f;
    Rigidbody2D rb2d;
    bool jump = false;
    
	// Use this for initialization
	void Start () {
        //コンポーネント読み込み
        rb2d = GetComponent<Rigidbody2D>();
	}
	
    
	// Update is called once per frame
	void Update () {

        //キーボード操作
        if (Input.GetKey(KeyCode.RightArrow))
        {
            direction = 1f;
        }else if (Input.GetKey(KeyCode.LeftArrow))
        {
            direction = -1f;
        }else
        {
            direction = 0f;
        }
        

        //キャラのy軸のdirection方向にscrollの力をかける
        rb2d.velocity = new Vector2(scroll * direction, rb2d.velocity.y);

        //ジャンプ判定
        if (Input.GetKeyDown("space") && !jump)
        {
            rb2d.AddForce(Vector2.up * flap);
            jump = true;
        }


    }

    void OnCollisionEnter2D(Collision2D other)
    {
        if (other.gameObject.CompareTag("Ground"))
        {
            jump = false;
        }
    }
}

```
HoloLensで俺のこの手が光ってうなる

この記事は [Unity Assets Advent Calendar 2016](http://qiita.com/advent-calendar/2016/unity-asset) 24日目の記事になります。

今日は俺のこの手を光って唸らせる。

## Ultimate VFX 2.6.2 (Dec 20, 2016)
[![image](https://qiita-image-store.s3.amazonaws.com/0/32347/01a440a7-97b8-3816-4974-c7012e9a3f3e.png)](https://www.assetstore.unity3d.com/jp/#!/content/26701)

## HoloLensで自分の手の位置を認識する

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">Microsoft HoloLens Hand Tracking <a href="https://t.co/FgNGAjnfXs">https://t.co/FgNGAjnfXs</a> <a href="https://twitter.com/YouTube">@YouTube</a>さんから</p>&mdash; ゆーじ (@yuujii) <a href="https://twitter.com/yuujii/status/812700000383664128">2016年12月24日</a></blockquote>

- HandPositionスクリプトを空のManagarゲームオブジェクトにアタッチ。
- シーンにCubeを配置。Scaleは0.01にしてInspectorでHandObjectに設定しておく。

```csharp:HandPosition.cs
using UnityEngine;
using System.Collections;
using UnityEngine.VR.WSA.Input;

public class HandPosition : MonoBehaviour {

	private Vector3 initPos;
	public GameObject HandObject;
	
	void Start() {
		InteractionManager.SourceUpdated += InteractionManager_SourceUpdated;
	}
	
	void InteractionManager_SourceUpdated(InteractionSourceState state) {
		Vector3 handPosition;
		if (state.source.kind == InteractionSourceKind.Hand && state.properties.location.TryGetPosition(out handPosition)) {
			HandObject.transform.position = initPos + handPosition;
		}
	}
	
}
```

### HoloLensのハンドジェスチャーで手を光らせる
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">Microsoft HoloLens: Shining Finger <a href="https://t.co/3mLX9H6KZn">https://t.co/3mLX9H6KZn</a> <a href="https://twitter.com/YouTube">@YouTube</a>さんから</p>&mdash; ゆーじ (@yuujii) <a href="https://twitter.com/yuujii/status/812703965255061504">2016年12月24日</a></blockquote>

Ultimate VFXに含まれるよさげなエフェクトのプレハブをCubeの子に入れて完成。

HandPosition.csはAir-Tapを認識するようにし、HandObjectに指定したゲームオブジェクトの表示非表示をON/OFFするようにする。

```csharp:HandPosition.cs(改)
using UnityEngine;
using System.Collections;
using UnityEngine.VR.WSA.Input;

public class HandPosition : MonoBehaviour {

	private Vector3 initPos;
	public GameObject HandObject;
	
	void Start() {
		InteractionManager.SourceUpdated += InteractionManager_SourceUpdated;
		InteractionManager.SourceLost += InteractionManager_SourceLost;
		InteractionManager.SourcePressed += InteractionManager_SourcePressed;
		InteractionManager.SourceReleased += InteractionManager_SourceReleased;
	}
	
	void InteractionManager_SourceUpdated(InteractionSourceState state) {
		Vector3 handPosition;
		if (state.source.kind == InteractionSourceKind.Hand && state.properties.location.TryGetPosition(out handPosition)) {
			HandObject.transform.position = initPos + handPosition;
		}
	}
	
	void InteractionManager_SourceLost(InteractionSourceState state) {
		ShiningFinger(false);
	}
	
	void InteractionManager_SourcePressed(InteractionSourceState state) {
		ShiningFinger(true);
	}
	
	void InteractionManager_SourceReleased(InteractionSourceState state) {
		ShiningFinger(false);
	}
	
	void ShiningFinger(bool isActive) {
		HandObject.SetActive(isActive);
	}
	
}
```
動的なSQLクエリの生成でちょっとトリッキーな構築方法

# 背景
新人さん（PG歴3weekくらい？）のコードレビューしていて、やや面白いSQLのクエリ生成をしていたのでネタ共有を。いいかげん何かしらのORマッパーとかDomaとか使わせろって話なんですが、まぁそこは置いておいて。

# 前提
やりたいことは検索画面にて複数の入力ボックスがあり、ユーザが入力した項目をSQL検索条件に追加するというよくあるもの。

Active Record的なORマッパーを使っていなければ、Domaのような2-way-SQLのライブラリも使っていない。

気がきいていればSQLを外部ファイルに切り出すかもしれませんが、初心者の普通の発想としては動的に文字列生成してSQLを構築しようとする事がほとんどだと思います。

したがって、通常はコードの中でSQLクエリを文字列結合で生成することになるはずです。

**今回のスキーマ：**
http://otndnld.oracle.co.jp/document/products/oracle11g/111/doc_dvd/server.111/E05780-02/scripts.htm#Cihgfecd


例：社員テーブルから「職種にセールスが含まれており」、「給料が600万円以上」の検索したい場合のクエリ。
Like句でエスケープ設定がどうとかは省略させてください。

```sql:生成したいSQL
SELECT
 em.EMPLOYEE_ID
, em.FIRST_NAME
, em.LAST_NAME
FROM
  EMPLOYEES em
, INNER JOIN JOB_HISTORY jh on (em.EMPLOYEE_ID = jh.EMPLOYEE_ID)
, INNER JOIN JOBS jb on (jh.JOB_ID = jb.JOB_ID)
WHERE 1 = 1
AND CURRENT_DATE BETWEEN jh.START_DATE AND jh.END_DATE
AND jb.JOB_TITLE LIKE '%' || ? || '%';     -- ユーザの指定があれば条件に追加したい
AND jb.SALARY >= ?                         -- ユーザの指定があれば条件に追加したい
;
```

通常は値の有無から文字列結合の有無を分岐させることが多いかと。
StringBuilder使うとかは置いておいて、まぁ分からなくも無いかと。

```java:
String sql = ~ ; // 省略。WHERE句1行目までのSQLの想定。

if (jobTitle != null && jobTitle.length >= 0) {
  sql += "AND jb.JOB_TITLE LIKE '%' || ? || '%'"
}

if (minSalary != null && minSalaly.length >= 0) {
  sql += "AND jb.SALARY >= ?"
}
```

ところが、ある新人さんはこうやっていた。

```java
jobTitleComment = "";
minSalaryComment = "";
if (jobTitle != null && jobTitle.length >= 0) {
 jobTitleComment = "--";
}

if (minSalary != null && minSalaly.length >= 0) {
 minSalaryComment = "--";
}

String sql = "SELECT"
+ " em.EMPLOYEE_ID"
+ ", em.FIRST_NAME"
+ ", em.LAST_NAME"
+ "FROM"
+ "  EMPLOYEES em"
+ ", INNER JOIN JOB_HISTORY jh on (em.EMPLOYEE_ID = jh.EMPLOYEE_ID)"
+ ", INNER JOIN JOBS jb on (jh.JOB_ID = jb.JOB_ID)"
+ "WHERE 1 = 1"
+ "AND CURRENT_DATE BETWEEN jh.START_DATE AND jh.END_DATE"
+ jobTitleComment + "AND jb.JOB_TITLE LIKE '%' || ? || '%'"  // ポイント
+ minSalaryComment + "AND jb.SALARY >= ?"                     // ポイント
;
```

パット見て意図が分からず数秒固まっちゃいましたが、よく見ると分からなくもないと。
SQLの検索条件を利用するかどうかをコメントを示す「--」でスイッチしようというわけ。

例えば、条件がどちらも未設定の場合の実行後のSQL生成例はこうなる。

```sql:検索条件が未設定の場合
SELECT
 em.EMPLOYEE_ID
, em.FIRST_NAME
, em.LAST_NAME
FROM
  EMPLOYEES em
, INNER JOIN JOB_HISTORY jh on (em.EMPLOYEE_ID = jh.EMPLOYEE_ID)
, INNER JOIN JOBS jb on (jh.JOB_ID = jb.JOB_ID)
WHERE 1 = 1
AND CURRENT_DATE BETWEEN jh.START_DATE AND jh.END_DATE
-- AND jb.JOB_TITLE LIKE '%' || ? || '%'  /* ★どちらもコメントアウトされます */
-- AND jb.SALARY >= ?　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　/* ★どちらもコメントアウトされます */
;
```

検索条件が空っぽなのでWhere句の絞込条件がコメントアウトされ無効になります。

続いて、ジョブ名だけ設定された場合の生成例です。

```sql:ジョブ名だけ設定された場合
SELECT
 em.EMPLOYEE_ID
, em.FIRST_NAME
, em.LAST_NAME
FROM
  EMPLOYEES em
, INNER JOIN JOB_HISTORY jh on (em.EMPLOYEE_ID = jh.EMPLOYEE_ID)
, INNER JOIN JOBS jb on (jh.JOB_ID = jb.JOB_ID)
WHERE 1 = 1
AND CURRENT_DATE BETWEEN jh.START_DATE AND jh.END_DATE
AND jb.JOB_TITLE LIKE '%' || 'セールス' || '%'  /* こちらは有効 */
-- AND jb.SALARY >= '??'                      /* こちらはコメントアウトのまま */
;
```

検索条件が存在した場合、Where句の該当する絞込条件が有効になります。
意外と見やすくて良いなと思いました。


# まとめ

* こういう出力結果な2-way-SQLがあっても面白いかもですね。
* でもDoma使えよって感じですよね
redmineのメール設定

ローカルサーバのredmineのメール送信機能でハマったので記載

vi  ~/config/configuration.yml

```
production:
  email_delivery:
    delivery_method: :sendmail
```

これだけ

なおredmineはrubyを使用しているためタブ使用では連続とみなされるためスペースで書く（ハマった）

以上
goで読み込んで濃淡を変更する。


# とりあえずレポジトリの作成をすることにした。
[ここ](https://github.com/kaepa3/imaging)
最終的にはWEBのツールみたいにしようと思ったけど、なんか趣旨ずれそうですね。

# 本日の課題
以下を実施いていく
主に
1. 濃度反転を使用して画像を加工する。
2. 階調数変換を使用して画像を加工する

裏で
3. ソースコードの分割
4. 今回の作成分はinterfaceにしとく（結果ソースの分割） 


# 濃度反転
$Z' = Z_{max} - Z $
で出るそうです。
要するに最大から引けって話ですな。

## ソースコード
「// 反転する」以降のところくらいしか見所はないですね。
あと、勝手にmath.MaxInt16を最大にしてるのどうかと思う。
けど、どうなんだろ？詳しくはjpegについての話になったりして後で詰まるからそのうちでいいや

```go
func (ef *effect) ReverseConcentration() image.Image {
	rect := ef.inputImage.Bounds()
	width := rect.Size().X
	height := rect.Size().Y
	rgba := image.NewRGBA(rect)
	for x := 0; x < width; x++ {
		for y := 0; y < height; y++ {
			var col color.RGBA64
			// 座標(x,y)のR, G, B, α の値を取得
			r, g, b, a := ef.inputImage.At(x, y).RGBA()
			//反転する
			col.R = math.MaxInt16 - uint16(r)
			col.G = math.MaxInt16 - uint16(g)
			col.B = math.MaxInt16 - uint16(b)
			col.A = uint16(a)
			rgba.Set(x, y, col)
		}
	}
	return rgba
}
```
## 出力結果
※元画像は[前回](http://qiita.com/himao/items/39e253f4f8e7ea8ecae1)のと同様
![plant4_revcon.jpg](https://qiita-image-store.s3.amazonaws.com/0/51009/c43fb8b0-ec42-7888-e0a6-6ce07581cf1e.jpeg "plant4_revcon.jpg")

本当にあってるかは謎だけど、それっぽい。

# 階調数変換
下のような式になるそうです。謎すぎるので、サンプルコードを見て考えましょう
$Z_1 = \frac{Z_{max}}{n}$

$Z_2 = \frac{Z_{max}}{n-1}$

n がその階調になる。から今回は４

## ソースコード
まず大元の関数、ボチボチ共通化を考えましょうね、という話。

```go
// 4階調にする
func (ef *effect) FourTone() image.Image {
	rect := ef.inputImage.Bounds()
	width := rect.Size().X
	height := rect.Size().Y
	rgba := image.NewRGBA(rect)

	// この処理での特殊な値
	//	4階調とする
	tone := 4
	for x := 0; x < width; x++ {
		for y := 0; y < height; y++ {
			// 座標(x,y)のR, G, B, α の値を取得
			r, g, b, a := ef.inputImage.At(x, y).RGBA()
			effectFunction := fourToneColor
			rgba.Set(x, y, effectFunction(r, g, b, a, tone))
		}
	}
	return rgba
	}
```

変換の中身です。

```go
func fourToneColor(r, g, b, a uint32, tone int) color.RGBA64 {
	var col color.RGBA64
	z1 := uint16(math.MaxUint16 / (tone))
	z2 := uint16(math.MaxUint16 / (tone - 1))
	vals := []uint32{r, g, b}
	ptr := []*uint16{&col.R, &col.G, &col.B}
	//	計算する
	for i, v := range vals {
		*ptr[i] = (uint16(v) / z1) * z2
	}
	col.A = uint16(a)
	return col
}
```
書くとわかりますが「uint16(v) / z1」で情報の密度を1/4(4階調)にして、「* z2」で元に戻すと、名前のまんまなんですな。

## 出力結果
![plant4_fourtone.jpg](https://qiita-image-store.s3.amazonaws.com/0/51009/a36ade79-6eaf-b3a0-aea7-054a2cf2a5a0.jpeg "plant4_fourtone.jpg")
それっぽい、ボチボチテスト方法を考えないとしょうもない
と思ったから関数切り出し始めたんですけどね。

# その他の課題
1. 関数ポインタ見たいの渡せばfor分は省略できると思う。
2. テストプログラムどうやって書くの？

とりあえず、やるかどうかは根性が発生しだい。
修正しても記事のアップデート面倒だな、と思いました。