OmniAICreator/Qiita-1.07M huggingface dataset:
Reactチュートリアル覚書 その2


* 前回はこちら → Reactチュートリアル覚書 その1 - Qiita http://qiita.com/masarufuruya/items/9755673c6e9f796a8924

* 今回はUsing props〜Adding Markdownまでをやった。以下学びをまとめる
  * https://facebook.github.io/react/docs/tutorial.html

## コンポーネントから別のコンポーネントを呼び出すことが出来る

* 覚書その1の時点ではコンポーネントの呼び出しは`ReactDOM.render`時に行っていた

```js
ReactDOM.render(
  <CommentBox />,
  document.getElementById('content')
);
```

* 今回の範囲ではCommentBoxコンポーネントから別のコンポーネントを呼び出す書き方が出てくるため、作ったコンポーネント同士で呼び出すことが出来ることを学んだ

```js
var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList />
        <CommentForm />
      </div>
    );
  }
});
```

## データは親コンポーネントで管理し、子コンポーネントは使うだけ

* コメントのデータ(作成者、作成日時、内容)をコンポーネントの外部から受けとり、表示を変えたい場合はpropsを使う
* propsを渡すには、コンポーネントを呼び出す時に渡したい名前の属性をつけてやる
* propsは親のコンポーネントから子のコンポーネントがデータを受け取るための手段
* 子コンポーネントがデータを更新してしまうと、どこでデータが変更されているか把握するのが困難になるので、データの管理は親コンポーネントで行う

参考URL: React.jsでPropやStateを使ってComponent間のやりとりをする - Qiita http://qiita.com/koba04/items/43200b6fd6e6f43f0d8d

## JSX内の波括弧{}はJavascriptの値を出力したい時に使う

* {}内ではコンポーネント内で定義した変数、関数、グローバル変数、Reactの組み込みプロパティを取得して出力することができる
* {}内で変数を定義したり条件分岐させるようなコードはかけずあくまで取得のみに利用できる

```js
render: function() {
  return (
    <div className="comment">
      <h2 className="commentAuthor">
        {this.props.author}
      </h2>
      <span dangerouslySetInnerHTML={this.rawMarkup()}></span>
    </div>
  );
}
```

## サニタイズを無効にしたい場合はdangerouslySetInnerHTMLを使う

* dangerouslySetInnerプロパティをつけて__htmlキーの中にサニタイズを無効にしたいHTMLを返すようにする
   
```js
rawMarkup: function() {
  var md = new Remarkable();
  return {
    __html: md.render(this.props.children)
  };
},

render: function() {
  return (
    <div className="comment">
      <h2 className="commentAuthor">
        {this.props.author}
      </h2>
      <span dangerouslySetInnerHTML={this.rawMarkup()}></span>
    </div>
  );
}
```
macOS Sierraで追加されたSF MonoにPowerlineのパッチを当てる

始めに 
---
macOS SierraからTerminalのデフォルトフォントがSF Monoに変更されました．

<img width="522" alt="Screenshot 2016-09-25 05.15.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/78590/99a75c05-bc46-4546-a0f6-2a8884a96dfb.png">

なかなか見やすいのでこのまま使おうと思いましたが，Powerlineには対応していないので，自分の環境ではPromptが文字化けてしまう...

そのため，Powerlineのパッチを当てる手順を書いておきます．

手順
---

 　
！！このコマンドは古い可能性が高いので，2016/12/06追加部分をご覧になることを推奨します！！

    $ git clone https://github.com/powerline/fontpatcher

    $ ./fontpatcher/scripts/powerline-fontpatcher /Applications/Utilities/Terminal.app/Contents/Resources/Fonts/SFMono-Regular.otf

~~以上です．現在のディレクトリ内に'SF Mono Regular for Powerline.otf'が生成されているので~~

    $ cp -f *Powerline ~/Library/Fonts

~~とかでコピーしてやるといいと思います．~~

~~あとはTerminalにフォントの設定をしてあげれば完了です．~~

~~前にRictyをパッチ当てた時はfontforgeやらが必要で面倒でしたが，簡単になってました~~

--- 

（2016/12/06追記）

コメントにて指摘があったので確認を行ったところ，

    The required FontForge modules could not be loaded.
    You need FontForge with Python bindings for this script to work.

というエラーメッセージが出てきてしまいました．その場合，以下のYVTさんのコメントにある

    $ port install fontforge +python27

で，MacPortsを使いインストールすることでパッチをあてることができるそうです．

ご指摘ありがとうございました．

brewを使っている方は

    $ brew install fontforge

で，fontforgeをインストールしたのち，

    $ git clone https://github.com/powerline/fontpatcher
    $ fontforge -lang=py -script ./fontpatcher/scripts/powerline-fontpatcher /Applications/Utilities/Terminal.app/Contents/Resources/Fonts/SFMono-Regular.otf

でパッチをあてることができました．ご参考になれば幸いです．

（2016/12/06追記終）

---

比較
----
Ricty
<img width="568" alt="Screenshot 2016-09-25 05.01.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/78590/d4e89117-42c3-641e-b944-b4eed019f902.png">


SF Mono
<img width="568" alt="Screenshot 2016-09-25 05.02.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/78590/b6cbb7e5-3abf-8d60-aa0a-b7fad6bb5f7b.png">


SF Monoの方が詰まってはいますが，なかなか読みやすいのではないでしょうか．

他の方法
---
以下のようにiTerm2を使えばパッチを当てなくてもPowerlineを文字化けせずに使えるみたいです．
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/patthemav">@patthemav</a> I didn&#39;t patch SF Mono - I used Roboto Mono for the non-ASCII bits - these are my iTerm2 settings. <a href="https://t.co/GVYlaMZHRC">pic.twitter.com/GVYlaMZHRC</a></p>&mdash; Simon Rice 🐦📲 (@_SimonRice) <a href="https://twitter.com/_SimonRice/status/777817794280886272">September 19, 2016</a></blockquote> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

以上です．ありがとうございました
Unity / geometry > droxtalの表示 > v0.4 > 13万個のdroxtal表示 / 52万個

```txt:動作環境
Unity 5.3.5f1 on MacOS X El Capitan
1.3GHz Core i5のMacbook Air
```

http://qiita.com/7of9/items/b033571e0b4f01bbaba6
の続き。

### v0.4

マウスクリックイベントでdroxtalGOをコピーしてみた。
これで何個のdroxtalを描画できそうかあたりをとってみる。

[v0.4 @ github](https://github.com/yasokada/unity-160924-droxtal/releases/tag/v0.4)

1024個のdroxtalからなるcubeを128個配置して回転を見れた。
13万個のdroxtalになる。

![qiita.png](https://qiita-image-store.s3.amazonaws.com/0/32870/e5551987-7945-ed1a-5da5-88533416e9a3.png)

2048個で処理が重いと思っていたのは、実装方法がまずかったようだ。
http://qiita.com/7of9/items/642475a0fa9e052e05d2

さらに増やして52万個でもなんとか見れている。

対象としているソフト(ADDA)のユーザガイドを見るとコード上は以下の数の粒子を扱えるようになっているとのこと。

> 1024 x 1024 x 1024

10億個はさすがに無理。~~というよりもこれの計算をするメモリは1TBでも足りないのではないかと思われる。某国のスーパーコンピュータでは1TB程度は扱えるのだろうか。フィンランドとアメリカとドイツのスーパーコンピュータ事情は不明~~。

700GBで5.6億個扱おうとしている例があった。
https://groups.google.com/forum/#!searchin/adda-discuss/1024%7Csort:relevance/adda-discuss/m5lJqt6r-Ww/facLQSI5Ke8J
> Total number of occupied dipoles: 562218544 

### Android上で動作

304SHで動かしてみた。それをAndroidToolで動画キャプチャした。

https://youtu.be/lzVfMHS4D5U

13万個くらいで動かそうとするとメモリの関係で落ちる。
コンソール上の処理終了通知をslackに投稿する

# 前置き

偉大なる先駆者様
[[10分で出来る]シェルスクリプトの結果をslackに投稿](https://cloudpack.media/11271)

上記のスクリプトを使用して、コマンドラインで処理終了したタイミングでslackに通知を飛ぶようにする。
処理時間の長いスクリプトを流した後の、終了アラートに最適なコマンドになります。

<注意>
処理終了を通知した欲しいだけなので、標準出力はそのままコンソールに出します。
処理{成功|失敗}はコンソールを見て確認しましょう。
</注意>

# アプリのslackにてchanelを作る

自分のslack上に通知専用チャンネル`notify-me` を作成

![01.png](https://qiita-image-store.s3.amazonaws.com/0/25582/ff9a71a7-cae9-6fbd-df4b-ac137d30ca5d.png)

# Webのslackにて、WebHookを設定

### integrationの設定
[Incoming WebHooks](https://hejda.slack.com/apps/A0F7XDUAZ-incoming-webhooks)

![02.png](https://qiita-image-store.s3.amazonaws.com/0/25582/4dfeb672-ae16-1201-32e8-90165c3763c2.png)

先ほど、作ったchannelを設定する。
後はデフォルトで。

![03.png](https://qiita-image-store.s3.amazonaws.com/0/25582/29e66428-fe95-1646-485f-1abb0edbbb5f.png)

saveしましょう

![04.png](https://qiita-image-store.s3.amazonaws.com/0/25582/79f35f7b-52fd-a1d6-91a8-a9265c938ec7.png)

後ほど、使用するのでWebhook URLをコピーしておく。
下記のような書式のもの
`https://hooks.slack.com/services/AAA/BBB`

# 使用するシェルを設定する
### スクリプト設置

先駆者様のスクリプトを一部改変したもの
[iganari/notify-me.sh](https://gist.github.com/iganari/8a636b25055dd088111ef461688beb07)

上記の中で設定するものは4つ

+ WEBHOOK
    + 先ほど設定したWebHook URLを入れる  
+ CHANNEL
    + slack上の通知したいchannelの固定する
+ BOTNAME
    + botの名前を設定可能
        + 愛着が湧く名前がいいかも。
+ FACEICON、{icon_url|icon_emoji}
    + 通知するbotのアイコンを指定。
    + slackに登録してあるアイコンを使いたければ`icon_emoji`、URLを使いたければ`icon_url`を使用する
        + 愛着が湧くアイコンがいいかも。

+ 上記を元に設定してみる
    + アイコンとして[クラウディアさん](https://twitter.com/claudia_azure?lang=ja)をお借りしました。愛着がわk

```
### Incoming WebHooksのURL
WEBHOOKURL="https://hooks.slack.com/services/AAA/BBB"
### slack 送信チャンネル
CHANNEL=${CHANNEL:-"#notify-me"}
### slack 送信名
BOTNAME=${BOTNAME:-"Claudia M"}
### slack アイコン
ICON='icon_url'
FACEICON="https://pbs.twimg.com/profile_images/474832226773770240/MMctMu9Y.png"
```

### .bashrcに登録
最後にcliから呼び出せるように、.bashrcにaliasを登録します。自分はMac環境ですのでOSが違う場合にはよしなに書き直してください。

+ shellの配置([iganari/notify-me.sh](https://gist.github.com/iganari/8a636b25055dd088111ef461688beb07))

```
~/cmd-shell/slack/notify-me.sh
```

+ ~/.bashrcにaliasを登録
    + メンション機能をつけると通知が分かりやすくなると思います。

```text:~/.bashrc
+ ### notify-me scripts
+ alias nm="echo '@cigaguri 頼まれた処理が終わったわよ!!' | sh ~/cmd-shell/slack/notify-me.sh"
```

# 動作確認

例として、`vagrant up`が終了したタイミングでslackに通知して貰います。
処理終了を通知した欲しいだけなので、標準出力はそのままコンソールに出します。(2回目

```
$ vagrant up ; nm
Bringing machine 'svr01' up with 'virtualbox' provider...
==> svr01: Importing base box 'bento/centos-6.7'...
==> svr01: Matching MAC address for NAT networking...
==> svr01: Checking if box 'bento/centos-6.7' is up to date...

割愛
```

###slackに通知が来る

![06.png](https://qiita-image-store.s3.amazonaws.com/0/25582/764596d1-a8e7-976b-aa28-7eaaa4dc7779.png)


これで日々の処理が少し幸せになりますね♡

# 追記

後記録書きました。 
併せて読んで頂けると幸いです。

http://iganari.hatenablog.com/entries/2016/09/25
技術英語 > a few cases in which the goto produced [a legitimate gain].

@ Code Complete (No. 13209 / 36077)

> Knuth's 1974 article cited a few cases in which the goto produced <font color=red>a legitimate gain</font>.

http://ejje.weblio.jp/content/legitimate
> 合法の、適法の、正当な、嫡出(ちやくしゆつ)の、道理にかなった、もっともな、合理的な、(笑劇・メロドラマ・映画・テレビなどに対して)本格的な、正統な、舞台劇の

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

nominal

http://qiita.com/7of9/items/550493bd12d9d9d89073
CocoaPodsでSocket.IO-Client-Swift導入時のエラー


## 実行環境

| 環境 | バージョン |
| --- | -------- |
| Mac | 10.11.6 |
| Xcode | 8.0 |
| CocoaPods | 1.0.1 |
| Swift | 3.0 |
| Socket.IO-Client-Swift | 8.0.2 |

## 発生した現象

CocoaPodsを使ってプロジェクトにSocket.IO-Client-Swiftを導入しようとしたところエラーが発生。
CocoaPodsの実行は問題なく終了するが、CocoaPodsが生成したxcworkspaceファイルを開こうとすると、ソースコードをSwift 3.0へコンバートするダイアログが立ち上がる。

その際、コンバート対象のフレームワークとして、Socket.IO-Client-Swiftをターゲットとして、「既存 -> Swift 3.0」, 「既存 -> Swift 2.3」、「変換しない」のどれを選んでもフレームワーク内でコンパイルエラーが発生した

## 対応方法

次のコマンドを使って、CocoaPodsのバージョンを1.0.1 -> 1.1.0.rc.2へアップグレードし、再度、CocoaPodsでフレームワークをインストールすれば、ダイアログが表示されなくなった

```
$ sudo gem install cocoapods --pre
```

## 参考サイト

* [Socket.IO-Client-Swift](https://github.com/socketio/socket.io-client-swift)
CSSのスタイルを解除する

CSSをマージした結果余計なものまで当たってしまっているときに、スタイルを解除するためリセット用のclassを作成

今回はテーブルのリセットを作成

```xxx.scss
.reset_style {
  table {
    border-collapse: initial;
    border-spacing: initial;
    border-width: initial;
    border-color: initial;
  }
  tr {
    border-bottom: initial;
  }
  td {
    vertical-align: initial;
    padding: initial;
  }

}
```

`initial`を指定する事でスタイルの解除ができる。
後は、Chromのデベロッパーツールで確認しながら、リセットするStyleを探して追記していくだけ。
BizVektor Lightning

#　新機能紹介

---

新機能 1

# 固定ページ<br>Landing Page<br>テンプレート

---

## 使い方

固定ページ編集画面右側の
ページ属性 → テンプレート の
プルダウンで「Landing Page」を選択

## 特徴

* 通常の固定ページと違って上部にタイトルとパンくずリストが入らない。  
* Landing Page に設定した固定ページ専用のウィジェットエリアが利用出来るようになります。

---

## 用途

特殊な商品情報やイベント情報などのキャンペンページを作るためのテンプレート

#### 利用例

http://variety.lightning.nagoya/feature/

## 注意点

Lightningの場合 本文欄に何か入ってないとお問い合わせボタンとか表示できない。

---
新機能 2

# Custom Post Type Manager

---

# Custom Post Type Manager ?

WordPress標準では「投稿」と「固定ページ」の２系統だけ（BizVektorの場合は「お知らせ(nfo)」を入れた3系統）だけだが、この系統を管理画面から自由に追加する機能

---

## BizVektorでの有効化の仕方

子テーマの functions.phpなどに

~~~
get_template_part('plugins/post-type-manager-config');
~~~

## Lightningでの有効化の仕方

1. プラグイン VK All in One Expansion Unit をインストール
2. 管理画面 → VK ExUnit で Post Type Manager を有効化

---

## カスタム投稿タイプを作成

1. 管理画面左側のメニューの「カスタム投稿タイプ設定」をクリック
2. 新規追加

※ パーマリンク設定を必ず保存する

---

## カスタム分類を作成

#### カスタム分類とは

投稿でいう所のカテゴリーに該当する部分

■ カスタム分類名（スラッグ）

識別用のIDになります。半角英数字で入力

■ カスタム分類名

「カテゴリー」など、実際にウェブサイトに表示される名称

---

## ウィジェットをセットする

投稿タイプを追加すると、その投稿タイプ用のサイドバーのウィジェットエリアが自動的に表示されます（BizVektorは 1.9以降）。

カスタム分類ウィジェットやアーカイブウィジェットを使用して、投稿タイプにあった項目を表示しましょう。

http://lightning.vektor-inc.co.jp/ja/setting/customize/custom_post_types_and_tax

---

# カスタマイズ

---

# 子テーマでのカスタマイズ

テーマをカスタマイズする時は必ず子テーマでカスタマイズするようにしてください。

BizVektorの子テーマ
https://bizvektor.com/setting/customize/

Lightningの子テーマサンプル
http://lightning.vektor-inc.co.jp/ja/setting/customize/child_theme

---

## 子テーマのメリット

親テーマでカスタマイズしたいファイルを複製して子テーマのディレクトリに配置しすれば親テーマで更新が入っても上書きされる事はありません。

---

## 投稿タイプ用のテンプレートの作成

■ 詳細ページ
single-★投稿タイプ名★.php

■ アーカイブページでの１件分
module_loop_★投稿タイプ名★.php

--- 

## カスタムフィールドを使う

■カスタムフィールドを簡単に作るプラグイン
https://ja.wordpress.org/plugins/smart-custom-fields/

■簡単なフィールドの値の呼び出し方

$post->フィールド名


---

■注意

エスケープ処理をしてください。

~~~
<?php echo esc_html( $post->フィールド名 ); ?>
~~~

https://gist.github.com/kurudrive/09f37db0939d57df08c1

---

詳細ページでの利用例

~~~
<p><?php echo wp_get_attachment_image( $post->item_image,'large'); ?></p>
<table>
<tr>
<th>価格</th>
<td><?php echo esc_html($post->item_price); ?>円</td>
</tr>
<tr>
<th>品番</th>
<td><?php echo esc_html($post->item_no); ?>円</td>
</tr>
</table>
~~~

---

## 画像の表示

### wp_get_attachment_image() 関数

プラグイン「Smart Custom Field」の場合は画像のID（番号）を保存するので、「$post->フィールド名」を呼び出しても数字しか返ってきません。これをHTMLで表示するには wp_get_attachment_image() 関数を使用します。

~~~
<?php echo wp_get_attachment_image( 画像ID,サイズ); ?>
~~~

---

実際の用例は下記のようになります。

~~~
<?php echo wp_get_attachment_image( $post->item_image,'medium'); ?>
~~~

#### 画像のサイズ

thumbnail : サムネイル
medium : 中
large : 大
full : オリジナルの画像サイズ

---
# ライトニングのデザインスキン作成用サンプルデータ

https://github.com/kurudrive/lightning-skin-sample

---

# プラグイン紹介

### 著者情報表示プラグイン
https://ja.wordpress.org/plugins/vk-post-author-display/

### 投稿のリンク先を変更出来る
https://ja.wordpress.org/plugins/vk-link-target-controller/

---

# 参考

静的HTMLからWordPressのテーマを作る
https://github.com/wckansai2016/make-wp-theme
build gcc

http://stackoverflow.com/questions/9253695/building-gcc-requires-gmp-4-2-mpfr-2-3-1-and-mpc-0-8-0

http://stackoverflow.com/questions/9807581/cannot-find-crtn-o-linking-32-bit-code-on-64-bit-system

http://stackoverflow.com/questions/18389612/make-exits-with-error-2-when-trying-to-install-gcc-4-8-1

除了指定prefix,还需要指定infodir
ElectronでDOM依存のRendererプロセスをユニットテストする方法

ElectronをTDDで始める際、SpectronでE2Eテストができるのはすぐに分かったのですが、Rendererプロセスのjsをユニットテストする方法がなかなか分からず苦戦したので、ここに記しておきます。
結果として、[electron-mocha](https://github.com/jprichardson/electron-mocha) を使用するとシンプルにできました。

## アプリの概要と構成
今回製作したアプリは、デスクトップをスクリーンキャプチャしてローカルに画像を保存するような内容になっています。
ディレクトリの構成は下記になります。

```
├── package.json
├── main.js
│
├── index.html
├── app.js
├── capturer.js
│
├── test
    └── test.js
```

`main.js`で`index.html`をロードし、HTML内の`app.js`経由でキャプチャと画像保存を行うモジュール`capturer.js`が呼ばれる流れになります。

## テスト対象
今回のユニットテストで確認したいモジュールは、`capturer.js`です。

```javascript:capturer.js
const fs = require('fs');

class Capturer {
  constructor(savePath) {
    this.savePath = savePath;
  }

  capture(video, x, y, w, h) {
    const canvas = document.createElement('canvas');
    canvas.width = w;
    canvas.height = h;
    const ctx = canvas.getContext('2d');

    // 指定した矩形領域で切り抜き
    ctx.drawImage(video, x, y, w, h, 0, 0, w, h);

    // 画像のヘッダ情報を除去してデータだけにする
    const base64Img = canvas.toDataURL().replace(/^.*,/, '');

    const dstPath = this.savePath + 'test.png';
    
    return new Promise((resolve) => {
      fs.writeFile(dstPath, base64Img, 'base64', (err) => {
        if (err) throw err;

        resolve(dstPath);
      });
    });
  }
}

module.exports = Capturer;
```

スクリーンキャプチャを映すvideo要素を引数に受け取り、canvas要素に描画した上でファイルへ書き出しています。

## 立ちはだかる壁、そして対策
ご覧のようにDOMと密に結合している為、単純に`mocha`を使用するだけではテストできません。

そこで登場するのが [electron-mocha](https://github.com/jprichardson/electron-mocha) です。
これは`mocha`をラップしたモジュールになっており、Rendererプロセスでテストを実行する機能があります。
まずはさくっとインストールしましょう。

```
npm install electron-mocha --save-dev
```

## テストする！
そして、下記がテストコードになります。
`test/test.js`と`capturer.js`だけで完結したテストになりました。

```javascript:test/test.js
'use strict';

const assert = require('power-assert');
const del = require('del');
const Capturer = require('../capturer');

describe('Capturer', function() {
  const tmpImagesPath = `${__dirname}/images/`;

  let video;
  let capturer;

  beforeEach(() => {
    video = document.createElement('video');
    capturer = new Capturer(tmpImagesPath);
  });

  afterEach(() => {
    return del([tmpImagesPath]);
  });

  it('矩形領域をキャプチャして保存', () => {
    return capturer.capture(video, 0, 0, 100, 100).then((dstPath) => {
      assert(dstPath === `${tmpImgagesPath}test.png`);
    });
  }
}
```

```javascript:package.json
{
  ~
  "scripts": {
    "test": "./node_modules/.bin/electron-mocha --renderer --require intelli-espower-loader"
  },
  "devDependencies": {
    "del": "^2.2.2",
    "electron-mocha": "^3.1.0",
    "intelli-espower-loader": "^1.0.1",
    "power-assert": "^1.4.1"
  }
}
```

## テストの結果
特筆すべき点は下記になります。

- `package.json`のテストコマンドに`--renderer`オプションを付与することで、Rendererプロセスでテストが実行される
- `test/test.js`内で`document`へアクセスできるので、スタブとしてvideo要素を生成
- `capturer.js`も同様に`document`が活きているのでcanvas要素を生成可能
- Spectronのようにアプリ起動に時間が掛からないので、テストの実行が速い
phpのshell_exec()でsudoコマンドを実行する方法

    passwd apache
    任意のパスワードを入力

    yum -y install sudo
    visudo

下記のように編集する。

    apache  ALL=(ALL)       ALL
    #Defaults    requiretty

PHPの実装は下記のようにする。

    $command = "echo 'パスワード' | sudo -S sh test.sh";
    shell_exec($command);

これで、test.sh をroot権限にて実行することが可能となる。
Gitの基本的な使い方 ＜差分管理＞

## 基本的な流れ
Gitの使用方法の基本的な流れは以下のようになる．

1. **pull**: サーバー上の最新のソースファイルをPCにコピーする．
2. **編集**: PC上でソースファイルを編集する．
3. **commit**: ソースファイルの編集をセーブする．
4. **push**: セーブした変更をサーバーに送る．

この4つを知っているだけで，最も基本的な使用方法である，差分管理ができる．

### pull
サーバ上の最新のソースファイルをPCにコピーする．一人だけでリポジトリを管理している場合は，「サーバ上の最新のソースファイル」=「PC上のソースファイル」であるのでこの操作は不要．

複数人で同じリポジトリを管理している場合や，一人でも複数のPCからアクセスする可能性がある場合は必要な操作である．


GitHub Desktop 上では右上の Sync ボタンをクリックするだけ．

コマンド:

```
# git pull
```

### 編集
git ディレクトリ内のソースファイルを普通に編集する．

### commit
ソースファイルの編集をセーブする．

GitHub Desktop では，clone したリポジトリ内でファイルに変更を加えると，自動的に検出される．変更が検出されると Changes タブに行った変更が全て表示されるので，

* **Summary**: 簡単な説明
* **Description**: 詳しい説明

を記入し，`Commit to Document` をクリックする．

コマンド:

```
# git add [ファイル名orディレクトリ名] // 新規ファイルorディレクトリを管理対象に追加．
# git commit -a -m "任意のコメント"  // 変更点をセーブ．どういう変更を行ったのかコメントをつける．
```

(-aオプションを入れると変更を自動検出してくれる)

### push
セーブした変更点をサーバに送る．

GitHub Desktop では Sync ボタンをクリックするだけ．

```
# git push origin master
```

push が完了したら，GitHub のページにも変更が反映されていることが確認できる．

全ての commit の情報が記録されるため，ネットワークに接続できないときなど，push 出来ないときでも変更点を記録(commit)しておき，まとめて情報を push することができる．

## 履歴の確認
GitHub Desktop の History タブで確認できる．GitHub のリポジトリページでも確認できる．


<br/><Div Align="center">
<A Href="http://qiita.com/fiftystorm31/items/f53e065dcf3da57968ef">＜＜GitHubでGit入門</A> <A Href="http://qiita.com/fiftystorm31/items/e10aab9b3f5f1bf542ed">◇</A> <A Href="url">ブランチ作成＞＞</A></Div>
Ubuntuにaptで手っ取り早くrbenvをインストールする


# rbenvのインストール
```shell-session
$ sudo apt-get install rbenv ruby-build
```

## bashの場合

```
$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
```

## zshの場合
```
$ echo 'eval "$(rbenv init - zsh)"' >> ~/.zshrc
```


# rubyのインストール
```
# example, installing 2.2.0
$ rbenv install 2.2.0
```

```
$ rbenv global 2.2.0
$ ruby -v
ruby 2.2.0p0 (2014-12-25 revision 49005) [x86_64-linux]
```
R.swiftで色を管理する

#R.swift
https://github.com/mac-cain13/R.swift

R.swift使ってますか？
R.swiftはAndroidのリソース管理の考え方をiOSに持ち込んだものなのですが、typoを防ぐほかにもリソースを一元管理することで変更を全体に行き渡らせたりすることが可能です。
例えばデザイナーがメインのカラーをオレンジから青に変えた時に、R.swiftを使ってしっかり開発していれば一箇所変更すれば全ての場所の色が変わります。

#色の管理
R.swiftの色管理はmacOSのclrファイルを元に生成されます。
clrファイルはmacOSのカラーピッカーから作ります。

![スクリーンショット 2016-09-25 1.56.27.png](https://qiita-image-store.s3.amazonaws.com/0/24979/c8039c11-fe24-1f56-38b1-9daaf479833e.png)

カラーピッカーで作ったclrパレットファイルは`~/Library/Colors/`に保管されるのですが、これをプロジェクトの配下に置くことでR.swiftがリソースコードを生成してくれます。

#clr管理の問題点
clrファイルを編集するにはカラーピッカーを開くしかないので、~/Library/Colors/に置かれてないと編集することが出来ません。
一人で開発しているのであれば、シンボリックリンクを貼れば良いかもしれませんがgit等で管理している場合はそうもいきません。

#考えられる解決策

##clrを編集できるソフトを使う
clrを直接編集できれば、git管理下にclrファイルを置いて共有すれば問題ありませんがそもそもclrを直接編集できるソフトが見つかりませんでした…。

##clrを共有する
http://qiita.com/TechMeetMeet/items/a799851eef0a11c48103
のように、clrを共有するスクリプトを用意しても良いかもしれません。
ただ、この場合もカラーピッカーで弄る事になります。
カラーピッカーはアプリではないので実は直接起動するのが面倒だったりします。
~~hex入力も出来ないし…。~~→できました
参考：http://qiita.com/noppefoxwolf/items/5132d173b7d82579932a#comment-59c4f20e483b1eb002a9


##clrを動的生成する
これが個人的に正解だと思っている解決策です。

```colors.txt
55acee twitter_color
ffffff bland_white
```

のようなファイルを作り、

https://github.com/ramonpoca/ColorTools
で配布されている`Html2Clr`を利用します。

<img width="993" alt="スクリーンショット 2016-09-25 2.12.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/24979/10f2a4b3-1c50-60d8-e04b-2e96956fdb18.png">
`miewはアプリ名なので適宜読み替えてください`

R.swiftよりも先にこのcolor.txtからcolor.clrをHtml2Clrを使い生成し、それをR.swiftでリソースコードに変換させます。
このようにすれば色を足したい時にcolor.txtに追記してビルドすれば

```swift
let color = R.color.app.twitter_color()
```

のようにして色を利用することが出来ます。
【Firebase】observeEventType の ChildRemoved のコールバックが2度呼ばれる


# 前提
Firebase のリアルタイムデータベースで、あるデータが削除されたかを監視したい

# 例

削除したいデータが例えば、

```
{
 "data": {
  "{child_id}": {
   "test_id": 1,
    "detail": {
      "description": "aaaaaaaaaaa"
    }
  }
 }
}
```

`{child_id}`はfirebaseが自動付与してくれるid。

このとき、削除されたことを監視したいパスが `data/{child_id}`だった場合、以下の処理を書いていたらコールバックが2回呼ばれます。

```
reference.observe(.childRemoved, with: { (snapshot) -> Void in
   // 処理
})
```

snapshotの中身は、1回目が`test_id`で、2回目が`detail`の値になります。

なので2回呼ばれてます。

.ChildRemoved は指定したパスのchildが削除されたときに発火されるので、オブザーブしたいパスを

`data/{child_id}/type`にしても、一度もコールバックは呼ばれません。

この場合は、

`data/{child_id}/detail` をオブザーブするパスとして指定するのが良いです。

ただし、`detail`の下の要素が複数ある場合は、その数だけ呼ばれるので、データの中身を確認しながら、オブザーブの処理をつくらないといけません。
「メンバ変数・グローバル変数」Global 'var' declaration requires an initializer expression or getter/setter specifier というエラー

```ruby:qiita.rb

Global 'var' declaration requires an initializer expression or getter/setter specifier

```


このようなSwiftのエラーは、メンバ変数・グローバル変数を定義する際、初期値を指定してない時に現れるエラーです。

Swiftではメンバ変数、グローバル変数を定義するときは、必ず初期値を入れなければいけません。下記のように、初期値を省いてグローバル変数を定義すると


```ruby:qiita.rb


import UIKit


//初期値を省いたグローバル変数の定義
var global:Int


class ViewController: UIViewController {

```

このようなエラーが発生します。


```ruby:qiita.rb

Global 'var' declaration requires an initializer expression or getter/setter specifier

```

ので、「?」を付けた形でグローバル変すを定義しましょう。こうすることで、どこからでも変数を参照できます。

そして、はてなをつけることで変数にnilを許容します。絶対に何かが入るという意味では「！」でも構いません。


```ruby:qiita.rb


import UIKit

var global:Int?
var global:String?
var global:Img?

class ViewController: UIViewController {

```
Apple様からアプリへの死の宣告はどうやってくるのか？(2016年QualityAppsの件)


Apple様：「2016年9月7日から、これ始めますよ。」
アプリ開発者一同：「はい、よろこんで」

2016年9月、Apple様から以下のお達しがありました。

##QualityApps

> Quality Apps
Quality is extremely important to us. We know that many of you work hard to build innovative apps and update your apps on the App Store with new content and features. However, there are also apps on the App Store that no longer function as intended or follow current review guidelines, and others which have not been supported with compatibility updates for a long time. We are implementing an ongoing process of evaluating apps for these issues, notifying their developers, and removing problematic and abandoned apps from the App Store. 

要点を言うと、

**長い期間アップデートされておらず、現在のレビューガイドラインに沿っておらず、機能していないアプリは、デベロッパーへお知らせの上、AppStoreから削除しますよ。**

というお話です。

アプリ開発者の方なら、誰しもiOSを覚えたての頃に作ってストア公開したアプリの1つや2つ、あることと思います。
今はもう開く事もなく、どっちかというと今開くと当時の事を思い出して少し恥ずかしくなり、むしろ、ちょっとした黒歴史になってしまっているという…

そんな甘酸っぱい思い出がたくさん詰まったアプリが無くなってしまいます。
まぁメンテしていないんだから消されて当然な訳ですが…

最近、アプリ開発を始めた方にとっては無縁な話でもあるので、
これに該当した場合、Apple様からどうやって通知されるのか実体験をメモしておこうと思います。

##9月7日になっても何もこなかったので一安心…
と思ってました。心当たりはあったので、意外と対象となるアプリは少ないのかな、なんて思ってました…


##突然のResolution Center
それから1週間ちょっと経った頃、突然のResolutionCenterからのお知らせが… ついに来てしまったか。

内容は、以下の通りでした。

>On September 1, 2016, we announced that we're implementing an ongoing process of evaluating and removing apps that no longer function as intended, don't follow current review guidelines, or are outdated.
>
>We noticed that your app has not been updated in a significant amount of time.
>
>Next Steps
To keep your app on the App Store, submit an updated version for review and make sure it follows the latest App Review Guidelines. If you are unable to submit an update within 30 days, your app will be removed from the App Store until you submit an update and it is approved.
>
>If Your App is Removed
>Your app will remain fully functional for current users. They will experience no interruption to services, will still be able to buy in-app purchases, and can re-download the app while restoring from an iCloud or iTunes backup. However, we recommend that you update your app as soon as possible to reinstate it on the App Store and ensure that it remains functional and engaging for new and existing customers.
>
>You can continue to use your current app name, as your app has not been deleted from your account.

ということでした。要点をまとめると、次の通り。

- AppStoreに公開し続けたければ、最新のレビューガイドラインに沿ってアプリをアップデートしてね
- もし、30日以内にアップデートしなければ、AppStoreから削除されます
- もし削除されても、現在のユーザについては完全に機能する状態のままですよ
- アプリ内課金もまだ購入可能です
- iCloud や iTunesバックアップからリストアしている間はずっと、アプリを再ダウンロードできます
- でも、なるべく早くストアに復活させて、既存ユーザや新規ユーザに魅力ある機能を提供し続けてね
- アプリは、アカウントから削除されません。現在のアプリ名は使い続けることができます

という事で、削除されると言っても、アプリ内課金も生きるので現在利用中のユーザが全く使えなくなるわけでもなく、思ったよりも優しいApple様。さすがです。ありがとうございます。
TLS1.3は従来のTLS1.2までと何が共通なのか

[RFC8446](https://tools.ietf.org/html/rfc8446)([Google翻訳](https://rfcs.web.fc2.com/rfc8446.html))として標準化されたTLS1.3は、従来のTLS1.2とは大幅に異なるプロトコルになってしまいました。とはいえ、TLSはTLSですし、httpsとして使う分には、エンドユーザーにバージョンの違いを意識させない程度には共通性があります。本稿では、TLS1.2と1.3で変わっていない点にスポットを当ててみたいと思います。

# 証明書はそのまま使えます。

サーバ証明書、クライアント証明書は従来のものがそのまま使えます。Static Diffie-Hellman形式の証明書が使えなくなりましたが、これを使っている人は多分ほぼいないと思われるので無問題と思ってよいでしょう。

# ClientHelloメッセージはあります。

サーバがTLS1.3に対応していなければTLS1.2以前のプロトコルにフォールバックするわけですので、ClientHelloのメッセージ形式はTLS1.2以下と互換性を取ってあります。ただし、SSL2.0互換型式は使えません。

# ClientHelloメッセージのProtocolVersion値は、TLS1.2と同じ0x0303です。

こんなところでTLS1.2と共通でも困るんですがねという気がしますが、ClientHelloのProtocolVersionでTLS1.2と1.3の区別ができません。TLS1.3では新設された「supported_versions拡張」を使ってバージョン番号を見分けます。

DPI (Deep Packet Inspection) でTLSのハンドシェイクを見ている場合の対応がかなり大変そうな気がしてきましたが、まあ何というか、幸運を祈ります。

# サイファースイートという概念はあります。

ただし、中身は変わりました。TLS1.2以前用のサイファースイートは1.3以上では使えませんし、TLS1.3用に新設されたサイファースイートはTLS1.2以前では使えません。TLS1.2以前と1.3で互換性を取るには、ClientHelloのCipherSuiteフィールドにTLS1.2以前用とTLS1.3用の両方のサイファースイートを書き並べる必要があります。

TLS1.3対応のサイファースイートは[RFC8446 Appendix B.4](https://tools.ietf.org/html/rfc8446#appendix-B.4)に記載されている5種類です。

# 拡張という概念もあります。

TLS1.2以前用と共通の拡張がかなり使えます。[RFC8446 Section 4.2](https://tools.ietf.org/html/rfc8446#section-4.2)に一覧表があります。
[IANAの一覧表](https://www.iana.org/assignments/tls-extensiontype-values/tls-extensiontype-values.xhtml#tls-extensiontype-values-1)に「TLS1.3」列が追加されました。「-」となっている項目はTLS1.3では使えません。CHとかEEとかの記号の説明は、[RFC8446 Section 4.2](https://tools.ietf.org/html/rfc8446#section-4.2)に準拠します。

# EAP-TLSは2022年になって標準化されました。

IEEE802.1XでRADIUSでエンタープライズな人向けに、TLS1.3版EAP-TLSが[RFC9190](https://tools.ietf.org/html/rfc9190)([Google翻訳](https://rfcs.web.fc2.com/rfc9190.html))として策定されました。

以上！それ以外は何もかもが違います。

# リファレンス

E. Rescorla (2018)
The Transport Layer Security (TLS) Protocol Version 1.3
https://tools.ietf.org/html/rfc8446 ([Google翻訳](https://rfcs.web.fc2.com/rfc8446.html))

EAP-TLS 1.3: Using the Extensible Authentication Protocol with TLS 1.3
https://tools.ietf.org/html/rfc9190 ([Google翻訳](https://rfcs.web.fc2.com/rfc9190.html))

Transport Layer Security (TLS) Extensions
https://www.iana.org/assignments/tls-extensiontype-values/tls-extensiontype-values.xhtml
Azureの仮想マシンにSSH接続

#SSH接続とは
暗号や認証の技術を利用して、安全にリモートコンピュータと通信するためのプロトコル。
パスワードなどの認証部分を含むすべてのネットワーク上の通信が暗号化される。
ここでは、Azure上に構築した、仮想マシンにSSH接続をしてみます。

#仮想マシンにSSH接続
####IPアドレスの確認
管理ポータル画面から**Virtual Machines**を選択
【仮想マシン(作成したマシン名)】➡️【概要】➡️【パブリックIPアドレス】
IPアドレスをメモしておこう！
![スクリーンショット 2016-09-24 23.21.39.png](https://qiita-image-store.s3.amazonaws.com/0/130097/44ad8250-8bc4-98f1-0bc4-c1c9d31a4e2c.png)

###OSXからSSH接続
仮想マシンで設定したユーザ名に＠をつけ、IPアドレスを入れることで接続できます。
**saiyuki1919$ ssh saiyuki1919@44.74.88.219**
接続後パスワードが聞かれるので、仮想マシンで設定したパスワードを入力します。
これで接続できます。
![ssh接続.png](https://qiita-image-store.s3.amazonaws.com/0/130097/1083f24b-6a7e-4d25-7166-6b618e0934a5.png)

###WindowsからSSH接続
Windowsでは、一般的によく使われるTera Termを使います。
まず、ホストにメモしたIPを入力し、設定はそのままで【OK】を押します。
![terterm.png](https://qiita-image-store.s3.amazonaws.com/0/130097/35ec58f7-e156-e776-1ce1-1da4188775bd.png)

セキュリティ警告が出ますが【続行】を押します。
![ter1.png](https://qiita-image-store.s3.amazonaws.com/0/130097/45cd3c66-6f28-cd0e-99a7-18f8fc65084d.png)

仮想マシンで設定したユーザ名とパスワードを入力し、【OK】を押します。
![ter2.png](https://qiita-image-store.s3.amazonaws.com/0/130097/ca183664-5593-a364-60f4-12750d80dbd9.png)

接続できます。
![ter33.png](https://qiita-image-store.s3.amazonaws.com/0/130097/1957c7d5-1f4b-7d71-d25f-71656921b2a2.png)

#最後に
**IPアドレスは動的に振り分けられるために仮想マシンを再起動や停止するとIPが変わるので注意！**
vaporのauth-exampleを試してみる  


# 準備  
9月24日現在、以下の環境で動作しています。  

||環境|
|:--|--:|
|swift|Apple Swift version 3.0 (swift-3.0-GM-CANDIDATE)|
|OS|OSX El Cacpitan 10.11.6|



## swiftのバージョンを合わせる  
swiftenvを用いて上記のものに合わせましょう。

```bash
swiftenv install swift-3.0-GM-CANDIDATE
swiftenv rehash
```

## vapor toolboxインストール

続いて、vaporにtoolboxをインストールしましょう。
bashとhomebrewの２つからインストールできます。
ここでは、homebrewを用いた方法を記載します。

```bash
brew install vapor/tap/toolbox
```



## サンプルダウンロード  
リポジトリをクローンします。  

```bash 
git clone https://github.com/vapor/auth-example.git
```


# auth-exampleを覗いてみる
下記コマンドを実行することで、xcodeプロジェクトファイルが作成されます。「y」を入力しエンターすることで、xcodeが開きます。
便利。  

```bash
vapor xcode
```  

![スクリーンショット 2016-09-24 21.58.08.png](https://qiita-image-store.s3.amazonaws.com/0/37148/d7bab333-b428-f00a-1f38-ed98c1db094c.png "スクリーンショット 2016-09-24 21.58.08.png")







## ルーティングを見てみる
Sorces/App/main.swiftにルーティングが記述されています。

```swift:main.swift
drop.group("users") { users in
    users.post { req in
        guard let name = req.data["name"]?.string else {
            throw Abort.badRequest
        }

        var user = User(name: name)
        try user.save()
        return user
    }

    users.post("login") { req in
        guard let id = req.data["id"]?.string else {
            throw Abort.badRequest
        }

        let creds = try Identifier(id: id)
        try req.auth.login(creds)

        return try JSON(node: ["message": "Logged in."])
    }

    let protect = ProtectMiddleware(error:
        Abort.custom(status: .forbidden, message: "Not authorized.")
    )
    users.group(protect) { secure in
        secure.get("secure") { req in
            return try req.user()
        }
    }
}
```

/usersにpostすると、リクエストの"name"が適切でないとguard節に入り、nameが含まれていると、Userオブジェクトを作成しsaveされようです。  
/users/loginにpostすると"id"にチェックが入り、適切であればIdentifierの引数として渡され、Authミドルウェアでログイン処理が走り、login完了のJSONがレスポンスとして返されるようです。
その下は、まだ追えていない・・・



|url|メソッド|アクション|
|:--|--:|--:|
|/users|POST|ユーザ作成|
|/users/login|POST|ログイン処理(認証？)|

  

# 試してみる  
とりあえず、ユーザ作成とログイン処理がわかったので、ちゃんと動くのか試してみます。  

## ビルド  
auth-exampleをビルドします
```bash
vapor build
```



## 実行
実行します

```bash
vapor run
```
![スクリーンショット 2016-09-24 22.11.32.png](https://qiita-image-store.s3.amazonaws.com/0/37148/dd55430a-56c7-bbaf-75de-06ba9b5d6539.png "スクリーンショット 2016-09-24 22.11.32.png")



## ユーザ作成 
　「name」に「test1」という名前で、jsonでpostします。

![スクリーンショット 2016-09-24 22.26.52.png](https://qiita-image-store.s3.amazonaws.com/0/37148/22241c5d-ccbb-126c-af21-88fb57cdc14b.png "スクリーンショット 2016-09-24 22.26.52.png")


以下のレスポンスが返却されました。

```json
{
    "id": 1,
    "name": "test1"
}

```  
   

## ログイン   
次に、ログインをしてみます。
ログインは、/users/loginにPOSTでidを渡せばいいということで
・・・ていっ😊

![スクリーンショット 2016-09-24 23.56.26.png](https://qiita-image-store.s3.amazonaws.com/0/37148/0f2e4723-590b-6375-4685-7a915d2b8f0f.png "スクリーンショット 2016-09-24 23.56.26.png")

これで認証はされたようです。

# ドキュメント関係  
公式ドキュメントだと記載が足りていない部分があったので、直接サンプルコードを見に行ったりするといいかと思います。


[Authミドルウェア](https://vapor.github.io/documentation/auth/user.html "Authミドルウェア")  

[Droplet](https://vapor.github.io/documentation/guide/droplet.html "Droplet")  

# 備考  
このサンプルは、モデルの保存にMemoryDriverを利用していましたが、todo-exampleを参考に少し変えるだけでMysqlに保存することができます。
[JavaScript]ニコニコ風コメントを作ってみた[リメイク]

## はじめに
結構前に、「[JavaScriptだけでニコニコ動画風コメントを作ってみた](http://qiita.com/yuki540/items/ba94db4c11b21d6c603b)」でニコニコ風コメントを作ったんですが、それのリメイク版を最近作ったので公開します。

## つかいかた
``` html:sample.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>ニコニコ風コメント</title>
	<script src="nico.js"></script>
	<script src="sample.js"></script>
</head>
<body>
<div id="nico"></div>
<input type="text" id="comment" placeholder="コメント" />
<button id="btn">送信</button>
</body>
</html>
```
``` javascript:sample.js
var nico = new Nico({
	ele: document.getElementById('nico'), // スクリーンになる要素
	width: 400,                           // スクリーン幅
	height: 400,                          // スクリーン高さ
	font: 50,                             // フォントサイズ
	color: '#fff',                        // フォントカラー
	speed: 3                              // 流れるスピード
});
```
### 特定のコメントを流し続ける場合

``` javascript:sample.js
nico.loop(['88888', 'かわいい', 'なんだこれw']);
```
![名称未設定.gif](https://qiita-image-store.s3.amazonaws.com/0/77608/e46b7e88-4f7f-ef77-23c9-808712aaa4d3.gif)
※画質が悪くてすみません。

### 任意のタイミングでコメントを送信

``` javascript:sample.js
nico.listen();
document.getElementById('btn').onclick = function() {
    var text = document.getElementById('comment').value;
    nico.send(text);
    nico.send(text, '#ff0000'); // 色変更
}
```

![fa.gif](https://qiita-image-store.s3.amazonaws.com/0/77608/d3ec9dc5-819c-5ef3-cf40-aac5997d762d.gif)
※画質が悪くてすみません。

### 止める
``` javascript:sample.js
nico.stop();
```

## さいごに
単純なコードですが、
これからニコニコ風コメントを使ったサービスを作る人へのヒントにでもなれば幸いです。

[GitHub](https://github.com/yuki540net/nicoJS)にあげたのでよかったらみてください。

## 追記
canvas版とcssアニメーション版を追加しました。
不完全なところがまだありますが、徐々に修正していきます。
``` npm i nicojs ```でインストールできるようにしました。
raspberrypi3にPyMySQLの導入

PyMySQLでpythonからMySQLを操作する。

# PyMySQLインストール
  - 下記コマンドを実行する。

```
$ sudo pip install PyMySQL
```

# 使い方

  - 下記のようなテーブルを想定

```
+----------+--------------+------+-----+---------+----------------+
| Field    | Type         | Null | Key | Default | Extra          |
+----------+--------------+------+-----+---------+----------------+
| id       | int(11)      | NO   | PRI | NULL    | auto_increment |
| email    | varchar(255) | NO   |     | NULL    |                |
| password | varchar(255) | NO   |     | NULL    |                |
+----------+--------------+------+-----+---------+----------------+
```

  - 上記テーブルのcreate文

```sql
CREATE TABLE `users` (
    `id` int(11) NOT NULL AUTO_INCREMENT,
    `email` varchar(255) COLLATE utf8_bin NOT NULL,
    `password` varchar(255) COLLATE utf8_bin NOT NULL,
    PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin
AUTO_INCREMENT=1 ;
```

  - DBに接続して切断する

```py:sample.py
import pymysql.cursors

# Connect to the database
connection = pymysql.connect(host='localhost',
                             user='user',
                             password='passwd',
                             db='db',
                             charset='utf8mb4',
                             cursorclass=pymysql.cursors.DictCursor)

～下記のＩＮＳＥＲＴ文などの記述～

connection.close()
```

  - INSERT文

```py
with connection.cursor() as cursor:
    # Create a new record
    sql = "INSERT INTO `users` (`email`, `password`) VALUES (%s, %s)"
    cursor.execute(sql, ('webmaster@python.org', 'very-secret'))

# connection is not autocommit by default. So you must commit to save
# your changes.
connection.commit()
```

  - SELECT文

```py
with connection.cursor() as cursor:
    # Read a single record
    sql = "SELECT `id`, `password` FROM `users` WHERE `email`=%s"
    cursor.execute(sql, ('webmaster@python.org',))
    result = cursor.fetchone()
    print(result)
```



# 参考
[github readme](https://github.com/PyMySQL/PyMySQL)
モナドモナド (LT没ネタ)

[数学カフェ](https://eventdots.jp/event/598765)のLTで話す予定でしたが、使う機会がなくなったので公開します。

## Haskellにおけるモナドとは

Haskellでは`Monad`という型クラスでモナドを表現しています。この型クラスは `return :: a -> m a` 、 `join :: m (m a) -> m a`　、そして `fmap` においてモナドが表現されています。色んな人が色んな場で説明していることですから、今さらここで議論を掘り返す必要はないでしょう。

モナドには `[]`、`Maybe`、`State s`、`Cont r`、`Reader r`、`Writer w`、`IO`、などがあります。しかし、みなさんはそれで満足でしょうか？ そんなモナドで大丈夫ですか？

## Haskellでもっとモナド

モナドをさらにこじらせた人は、 `Free` モナドや `Codensity` モナドなどに手を出すでしょう。これらは大変便利なものですが、その珍しさ故これまた多くの場所ですでに語られています。次の図を見てもわかるように、一度モナドを触り始めると人は際限なく満足できなくなってしまうのです。

![category.PNG](https://qiita-image-store.s3.amazonaws.com/0/6696/e1fc3fca-7482-fd5f-2f25-e5b0b59bef92.png)

## モナドで満足できなくなってしまった人のためのモナドモナド

普通のモナドに満足ができなくなった方は、モナドモナドに触れてみるのはいかがでしょうか？ モナドモナドが公の場で語られているところを私は見たことはありませんが、 `mmorph`パッケージの[Control.Monad.Morph](https://hackage.haskell.org/package/mmorph-1.0.6/docs/Control-Monad-Morph.html)において、 `MMonad` 型クラスで密かに定義されています。　`Monad`　型クラスとは別のものです。

このモナドモナドとはなんでしょうか？　モナドは特定の性質を持つ、 `Hask` 圏における自己関手でした。ところが、モナドはさらに新たな圏の構造を持っています。自己関手は自然変換を射と見なせば圏を構成します。モナドは自己関手に演算を入れたものですので、その演算を保持するような自然変換と組み合わせることで圏をなします。モナドの性質を保存する自然変換を、モナドモーフィズムと呼びます。`mmorph`の語源ですね。

圏が存在すれば、そこには自己関手、そしてモナドが存在する可能性があります。 `MMonad` は、モナドが成す圏(対象がモナド、射がモナドモーフィズム(自然変換))上の自己関手によるモナドです。

## `MMonad`の持つ演算

`MMonad`はモナドなので、単位元と積を持ちます。単位元(`return`)に該当するのは `lift :: Monad m => m a -> t m a` という関数です。型を見て分かる通り、モナド　`m`　を　`t m` というモナドへ移します[^nat]。そして、積(`join`)に該当するのは `squash :: (Monad m, MMonad t) => t (t m) a -> t m a` です。`t t m`と入れ子になったモナドモナド`t`を、 `t　m` へ潰します。

[^nat]: 圏論的に見る場合、モナドの場合関数 `return` が対象　`a`　についてのコンポーネントでしたが、ここでは自然変換 `lift` が対象 `m` のコンポーネントとなることに注意しましょう。

モナドは関手なので射関数(`fmap`)に該当する対応も必要ですね。これは `hoist :: (Monad m, MFunctor t) => (forall a . m a -> n a) -> t m b -> t n b` です。モナドの圏の射は自然変換なので、Haskの射を移すだけの `fmap` とは違って `Rank2Types` が必要となります。

## `lift` の正体

モナドモナドの単位元である `lift` に見覚えのあるモナド常習者の方もいらっしゃるかもしれません。この `lift` は、モナド変換子の `lift` そのものです。モナドモナドの視点から見ると、モナド変換子はモナドモナドの性質をかなり弱めたものです。一般論ではモナド変換子は `lift` の存在しか要請しておらず、関手 `MFunctor` にすらなっていません。これは条件を厳しくすると `ContT` がモナド変換子になってくれないためです。 `ContT` は継続を表す実用上は重要な変換子であるため、これをモナド変換子と言えないのは問題です。

モナド変換子の分類については、モナドモナドを使うよりもモノイダル関手を使って分類したほうがきれいにまとまると個人的には思っています。詳しくは [モナモナ言うモナド変換子入門](http://hiratara.github.io/presentations/2015-03-21_monadbase_vol2.html) を参照して下さい。

## モナドモナドの使い道

モナド変換子のうち `MMonad` のインスタンスになるものについて、モナドと同じ感覚で使うといいでしょう。モナドを使い慣れていれば、`m`の代わりに`t`を同じ感覚で変更できると思えば有意義に使えるはずです。例えば `squash` はモナド `(t m) (t m)` を潰すわけではなく、モナド変換子 `t t` を直接潰すことができます。詳しくは [mmorphのチュートリアル](https://hackage.haskell.org/package/mmorph-1.0.6/docs/Control-Monad-Morph.html#g:3) を見るといいでしょう。

## 最後に

モナドモナドはLTでウケを狙うために作った造語で、そういう言い方をすることはありません。 `MMonad` の考え方自体は圏論とHaskellの表現力を見るという点では面白いので、興味がある人は追っかけてみるのもいいでしょう。
時間を無駄にしないために使いたいAndroid Studio ショートカット集

## はじめに
時間を無駄にせず、効率的にAndriod開発がしたいので、ちゃんとショートカットを覚えようと思う。
使いたいものをまとめるので、参考にしていただければと :smile_cat:

※ショートカットはMac版でお送りします。

## 操作方法編
### どこでも検索 (search everywhere)
🏰 最強の検索なんでも探せる 💪 💪   
デフォルトではショートカットキーが割り振られてないので、振ってあげましょう。

自分はこんな感じで設定しています。良ければ参考にしてください 🙇

- 使うのはこんな時！ 😙
 - 考えるのめんどくさい！これで一発解決してやれ。

`ctrl + shift + f`

### アクションを探す (Find Action)
Android Studioの設定項目や、ショートカット等あらゆる機能を検索できる

- 使うのはこんな時！ 😙
 - ショートカット忘れた😓 どのボタンおすんだっけ??..
 - あんなこんな機能あるかな? 探してみよう!

`⌘ + shift + A`

## ファイルナビゲーション編
### 最近開いたファイルを探す (Recent Files)
最近開いたファイルを一覧で表示できる。
タブ移動でなく、こちらでファイル移動していった方が効率良さそう！

- 使うのはこんな時！ 😙
 - もちろんファイル間移動の時。タブを移動はめんどくさい。

`⌘ + e`

### クラス名検索 (Class)
`⌘ + o`

### ファイル名検索 (File)
`⌘ + shift + o`

## コードナビゲーション編
### シンボル検索
シンボルを検索ができる。

- 使うのはこんな時！ 😙
 - クラス名やメソッド名、変数名から探したいときに。

`⌘ + option + o`

### メソッドなどの宣言箇所にジャンプ (Declaratino)
`⌘ + b`

### 呼び出し階層の確認　(Call Hierarchy)
メソッドの宣言で使うと、呼び出し元が一覧でみれる。
処理を追いかけるのに便利!

`control + option + h`

## カーソル移動編
### 前のカーソル位置に戻る・進む
これは結構便利。よく使う。

戻る `⌘ + [`  
進む `⌘ + ]`

## コーディング編
### 引数リストの表示 (Parameter Info)
Android Stuido 3.0から引数ヒント表示してくれるようになったけど、これも便利だと思う！

`⌘ + p`

### Smart Type Completion
型を参考に補完してくれる。型から使える引数の入力といったことができる。

`⌘ + shift + space`

### Complete Current Statement
現在フォーカスしている文を完成させることができる。
オートフォーマットかつ、括弧閉じなどを自動的にやってくれる。

`⌘ + shift + enter`

### Parameter Info
メソッドの引数を一覧表示してくれる。

`⌘ + p`

### Extract
#### Variable
カーソルがフォーカスしている部分(変数)をローカル変数にしてくれる。

`⌘ + option + v`

#### Field
カーソルがフォーカスしている部分(変数)をメンバ変数にしてくれる。

`⌘ + option + f`

### Method
カーソルがフォーカスしている部分をメソッドにしてくれる。

`⌘ + option + m`

### Constant
カーソルがフォーカスしている部分を定数にしてくれる。

`⌘ + option + c`

### Postfix Completion
参考：http://qiita.com/takahirom/items/ac1d1b08351610dfcc43
```変数.par```を入力し、Enterを押すと、よしなにいろいろとしてくれる。

#### .var
ローカル変数にしてくれる。

#### .notnull
nullチェックのif文ができる。



## 参考
http://qiita.com/takahirom/items/a211b1fcc4304c487c4b#_reference-b274ebea0a18ddb1e0dc
http://www.sbcr.jp/products/4797385366.html
TypeScript 2.0.3 変更点


こんばんは[@vvakame](https://twitter.com/vvakame)です。

とかいいつつ、本当は[RC変更点](https://blogs.msdn.microsoft.com/typescript/2016/08/30/announcing-typescript-2-0-rc/)とかです。
ついに[2系正式版リリース](https://blogs.msdn.microsoft.com/typescript/2016/09/22/announcing-typescript-2-0/)の運びとなり、大変めでたいです。
[2.0 Beta変更点](http://qiita.com/vvakame/items/ae239f3d6f6f08f7c719)から実に2ヶ月半。長い。

## 変更点まとめ

* Literal Typesの拡大 [Number, enum, and boolean literal types](https://github.com/Microsoft/TypeScript/pull/9407)
	* 今まではstringだけだったものがnumberとbooleanにも拡大

薄味ですね。

次の2つはBetaからの要素でした。
タグ付きUnion型 [Discriminated union types](https://github.com/Microsoft/TypeScript/pull/9163)
tsconfig.jsonでのglobサポート [support globs in tsconfig.json files property (or just file/directory exclusions)](https://github.com/Microsoft/TypeScript/issues/1927)

## Literal Typesの拡大

[String Literal Types](http://qiita.com/vvakame/items/31f5c45ff49de67d5634#string-literal-types)の考え方がbooleanとnumber、Enumにも拡張されました。
これでJavaScriptのprimitiveっぽい型はLiteral Typesで書けるようになりました。

```ts
// 1桁の数字！
type Digit = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;

function pinNumber(a: Digit, b: Digit, c: Digit, d: Digit) {
}

// 1桁の数字×4 → OK！
pinNumber(1, 2, 3, 4);
// 2桁の数字が混ざってるのでコンパイルエラー
pinNumber(8, 7, 9, 10);

// JavaScript的に false な値の集合なども表現できる
type Falsy = "" | 0 | false | null | undefined;
let f: Falsy = 0;

// EnumもLiteral Types扱い
enum Suit {
	Heart, Spade, Club, Diamond,
}
type RedSuit = Suit.Heart | Suit.Diamond;
type BlackSuit = Suit.Spade | Suit.Club;
```

[Playground](https://goo.gl/9Qi1CU)

これだけなので見どころがない…！
raspberrypi3にmysqlをインストールから文字コード指定まで

# MySQLのインストール
  - 下記コマンドを実行する。

```
$ sudo apt-get install mysql-server
```
  - rootのパスワードを設定する。  
![msql_root_pass.jpg](https://qiita-image-store.s3.amazonaws.com/0/141266/25b50f10-c301-22aa-d4a4-34d1beafeb24.jpeg)
  - 設定したパスワードを再入力する。  
![msql_root_pass2.jpg](https://qiita-image-store.s3.amazonaws.com/0/141266/d630c407-a52f-ed58-0669-02040bc995ce.jpeg)

# MySQLクライアントの実行
```
$ mysql -uroot -p
Enter password:←前項で設定したパスワードを入力
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 43
Server version: 5.5.52-0+deb8u1 (Raspbian)

Copyright (c) 2000, 2016, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql> 
```

# 文字コード確認
  - 下記コマンドを実行する。

```
mysql> status
--------------
mysql  Ver 14.14 Distrib 5.5.52, for debian-linux-gnu (armv7l) using readline 6.3

Connection id:          43
Current database:
Current user:           root@localhost
SSL:                    Not in use
Current pager:          stdout
Using outfile:          ''
Using delimiter:        ;
Server version:         5.5.52-0+deb8u1 (Raspbian)
Protocol version:       10
Connection:             Localhost via UNIX socket
Server characterset:    latin1
Db     characterset:    latin1
Client characterset:    utf8
Conn.  characterset:    utf8
UNIX socket:            /var/run/mysqld/mysqld.sock
Uptime:                 28 min 56 sec

Threads: 1  Questions: 584  Slow queries: 0  Opens: 189  Flush tables: 1  Open tables: 41  Queries per second avg: 0.336
--------------
```
  - 上記の状態ではDBに日本語を保存することができないためlatin1となっている個所をutf8にする。
  - 下記のようにmy.cnfを編集する。

```
$ sudo vi /etc/mysql/my.cnf 
[client]
default-character-set=utf8
  
[mysqld]
character-set-server = utf8
```

  - mysqlを再起動する

```
$ sudo /etc/init.d/mysql restart
```

  - utf8になっていることを確認する。

```
mysql> status
--------------
mysql  Ver 14.14 Distrib 5.5.52, for debian-linux-gnu (armv7l) using readline 6.3

Connection id:          37
Current database:
Current user:           root@localhost
SSL:                    Not in use
Current pager:          stdout
Using outfile:          ''
Using delimiter:        ;
Server version:         5.5.52-0+deb8u1 (Raspbian)
Protocol version:       10
Connection:             Localhost via UNIX socket
Server characterset:    utf8
Db     characterset:    utf8
Client characterset:    utf8
Conn.  characterset:    utf8
UNIX socket:            /var/run/mysqld/mysqld.sock
Uptime:                 19 sec

Threads: 1  Questions: 111  Slow queries: 0  Opens: 48  Flush tables: 1  Open tables: 41  Queries per second avg: 5.842
--------------
```


# 参考
[データベースを使う(MySQL)](http://make.bcde.jp/raspberry-pi/%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%E3%82%92%E4%BD%BF%E3%81%86mysql/)
urfave/cli(旧github.com/codegangsta/cli)でのヘルプ表示で追加テンプレートパラメータを使う

ヘルプ表示のカスタマイズ方法について、基本はGitHub上の[README.md](https://github.com/urfave/cli#generated-help-text)を見ればOKです。

今回はテンプレート内で使えるパラメータを追加する方法をメモしておきます。
以下のように書けばOKです。

```go 

package main

import (
	"github.com/urfave/cli"
	"io"
	"os"
)

func main() {

	app := cli.NewApp()

	// カスタムテンプレートを指定
	cli.AppHelpTemplate = yourlHelpTextTemplate

	// オリジナルのヘルプライターを退避
	originalHelpPrinter := cli.HelpPrinter

	// 追加のパラメータを使うようにヘルプライターを差し替える
	cli.HelpPrinter = func(w io.Writer, templ string, d interface{}) {
		// 元々のパラメータ(*cli.App型で渡ってくる)
		app := d.(*cli.App)
		// 元のパラメータ + 追加のパラメータを持った構造体を取得
		data := NewHelpData(app)
		// オリジナルのヘルプライターに取得した構造体を渡す
		originalHelpPrinter(w, templ, data)
	}

	app.Run(os.Args)
}

// customParameter ヘルプ表示で使われる元のパラメータ + 追加パラメータを保持した構造体を定義
type customParameter struct {
	*cli.App // 元のパラメータ(*cli.App)を埋め込んでおく

	// 以下で好きなパラメータを追加する。これをテンプレート内で利用する
	MyParameters []string
}

func NewHelpData(app *cli.App) interface{} {
	return &customParameter{
		App:          app,
		MyParameters: []string{"string1", "string2"},
	}

}

var yourlHelpTextTemplate = `NAME:
   {{.Name}} - {{.Usage}}
USAGE:
   {{if .UsageText}}{{.UsageText}}{{else}}{{.HelpName}} {{if .VisibleFlags}}[global options]{{end}}{{if .Commands}} command [command options]{{end}} {{if .ArgsUsage}}{{.ArgsUsage}}{{else}}[arguments...]{{end}}{{end}}
   {{if .Version}}{{if not .HideVersion}}
VERSION:
   {{.Version}}
   {{end}}{{end}}{{if len .Authors}}
AUTHOR(S):
   {{range .Authors}}{{.}}{{end}}
   {{end}}{{if .VisibleCommands}}
COMMANDS:{{range .VisibleCategories}}{{if .Name}}
   {{.Name}}:{{end}}{{range .VisibleCommands}}
     {{join .Names ", "}}{{"\t"}}{{.Usage}}{{end}}
{{end}}{{end}}{{if .VisibleFlags}}
GLOBAL OPTIONS:
   {{range .VisibleFlags}}{{.}}
   {{end}}{{end}}{{if .Copyright}}
COPYRIGHT:
   {{.Copyright}}
   {{end}}{{if .MyParameters}}
MY CUSTOM PARAMETERS:
   {{range .MyParameters}}{{.}}
   {{end}}{{end}}
`

```

今回はカスタマイズとして、一番下の`MY CUSTOM PARAMETERS`というセクションに
`MyParameters`という追加パラメータを表示するようにしています。

実行例は以下のようになります。

```bash

$go run main.go --help
NAME:
   main - A new cli application
USAGE:
   main [global options] command [command options] [arguments...]
   
VERSION:
   0.0.0
   
COMMANDS:
     help, h  Shows a list of commands or help for one command

GLOBAL OPTIONS:
   --help, -h     show help
   --version, -v  print the version
   
MY CUSTOM PARAMETERS:
   string1
   string2

```

以上です。
既存データを集計してランキング化する


同一のitem_idに異なった複数のuser_idが紐付いたデータがあります。
（人気がある商品ほど紐付いているuser_idの数が多い）


これをグループ化、カウントして多い順に並べ替えます。
key(item_id)だけ配列として取得します。

`@keys = Have.group(:item_id).order('count_item_id desc').count('item_id').keys.first(10)`


ランキング用に商品データを出力したいので
1つづつkeyでItemデータからfindして詳細項目を出力していきます。

`@keys.each do |key|`
`item = Item.find(key)`





###参考URL
[ActiveRecordでgroup Byしてカウントをして、カウント数でorderする](http://morizyun.github.io/blog/count-order-active-record-rails/)


大変参考になりました。
ありがとうございました。