OmniAICreator/Qiita-1.07M huggingface dataset:
matplotlib でアニメーションを作る

matplotlib とは python のグラフ描写モジュールであり、アニメーションも作れる。つまり深夜にアニメを見ないと死ぬ諸兄は matplotlib を覚えるというのも一案である。

というわけで極めて簡単なサンプルとして、numpy で生成した乱数を描写するだけのコードを書く。

公式ドキュメントはこちら。
http://matplotlib.org/api/animation_api.html

# ArtistAnimation

matplotlib のアニメーションは ArtistAnimation と FuncAnimation の2種類がある。
ArtistAnimation は、あらかじめ全てのグラフを配列の形で用意しておき、それを1枚ずつ流すというものである。

```python:artistanimation.py
import numpy as np
import matplotlib.pyplot as plt
import matplotlib.animation as animation

fig = plt.figure()

ims = []

for i in range(10):
        rand = np.random.randn(100)     # 100個の乱数を生成
        im = plt.plot(rand)             # 乱数をグラフにする
        ims.append(im)                  # グラフを配列 ims に追加

# 10枚のプロットを 100ms ごとに表示
ani = animation.ArtistAnimation(fig, ims, interval=100)
plt.show()

```
![artist.gif](https://qiita-image-store.s3.amazonaws.com/0/40166/7fac2b76-46c7-e001-83f7-ab12bc947610.gif)

なかなか電波っぽいのが出来た。深夜残業でアニメが見たくなった時はこういうのをじっと眺めていると良いと思う。動画をGIFで保存する際は、末尾の

```
plt.show()
```
の部分を

```
ani.save("output.gif", writer="imagemagick")
```
に書き換えるとよい。(imagemagick というパッケージが必要)
MP4 とかに出力も出来るらしいが少々面倒なのでやってない。


# FuncAnimation

こちらは予め完成したグラフを渡すのではなく、アニメーションの1フレームごとに関数を実行する。
データが巨大すぎる場合や潜在的に無限に続く場合に便利。

```python:funcanimation.py
import numpy as np
import matplotlib.pyplot as plt
import matplotlib.animation as animation

fig = plt.figure()

def plot(data):
    plt.cla()                      # 現在描写されているグラフを消去
    rand = np.random.randn(100)    # 100個の乱数を生成
    im = plt.plot(rand)            # グラフを生成

ani = animation.FuncAnimation(fig, plot, interval=100)
plt.show()
```
![func.gif](https://qiita-image-store.s3.amazonaws.com/0/40166/448c95d1-6f3c-d388-549f-79b234fb97d4.gif)

こちらは動的にグラフを作るため、縦軸の範囲が乱数に応じて毎回変わる。

GIFに出力する場合、ArtistAnimation と違って終わりが指定されていないので、

```
ani = animation.FuncAnimation(fig, plot, interval=100, frames=10)
ani.save("output.gif", writer="imagemagick")
```

という具合に `frames=10` と予めフレーム数を指定してやる。
create-react-appコマンドを使ってReact-Bootstrapを導入

[Facebook公式のcreate-react-appコマンドを使ってReact.jsアプリを爆速で作成する](http://qiita.com/chibicode/items/8533dd72f1ebaeb4b614 "Qiita")を見て、少し試した。[React-Bootstrap](http://react-bootstrap.github.io/ "React-Bootstrap")の導入まで軽く試してみた。

## 環境
ローカル環境:Windows10
ターミナル：GitBash + ConEmu

## Qiitaの記事通りHello-Worldまで
```:Terminal
npm install -g create-react-app
create-react-app hello-world
npm start
```
<img width="365" alt="2016-07-29.png" src="https://qiita-image-store.s3.amazonaws.com/0/133718/64e2d58e-a641-5451-097a-38ee96b679bf.png">
ターミナルで上記のコマンド実行で、この画面まで。

## Hello-World以降
[React-Bootstrap Getting started通りに導入](http://react-bootstrap.github.io/getting-started.html "React-Bootstrap Getting started")

```:1.Terminal
npm install react-bootstrap --save
```
```:2.Terminal
bower install react react-bootstrap
```
>bash: bower: command not found

2のコマンド実行時に、上記のエラーがでる。以下のコマンド実行し、再度2を実行。

```:3.Terminal
npm install -gf bower
```
App.jsで試しにButtonを読み込んでみる。

```js:App.js
import { Button } from 'react-bootstrap';
~~以下のコードをdivタグ内に記述。
<Button className="btn-github" >View Code</Button>
```

index.htmlでbootstrap.cssを読み込む。

```html:index.html
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">　->追加
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">　->追加
```

bootstrapのボタンが表示される。
<img width="352" alt="button.png" src="https://qiita-image-store.s3.amazonaws.com/0/133718/b275efe5-2efc-1d82-936d-6a64c2fccca4.png">

##その他参考
[bower command not found windows](http://stackoverflow.com/questions/21732447/bower-command-not-found-windows
 "stack")
[Playframework]FilterでPOSTデータが受け取れない

# PlayframeworkのFilterでPOSTデータが受け取ることができない
FilterでPOSTデータを取り出したかったが、うまく取り出すことができなかったのでソースコードを見ながら調べてみた。

原因はForm.bindFromRequestの引数がplay.api.mvc.Request[]であること。
[play.api.data.Form.bindFromRequest](https://github.com/playframework/playframework/blob/2.3.x/framework/src/play/src/main/scala/play/api/data/Form.scala#L76)
Filterの引数となっているRequestHeaderではリクエストボディを見ることができない。
[play.api.mvc.RequestHeader](https://github.com/playframework/playframework/blob/2.3.x/framework/src/play/src/main/scala/play/api/mvc/Http.scala#L22)
Request[]の初期化にRequestHeaderとbodyを渡しているよう。
[play.api.mvc.Request](https://github.com/playframework/playframework/blob/2.3.x/framework/src/play/src/main/scala/play/api/mvc/Http.scala#L264)

# 対応策
ActionBuilderを拡張してPOSTデータを受け取って処理を行うようにし、各Controllerで使用するようにした。
<pre>
object ActionTest extends ActionBuilder[Request] {
  val testForm = Form("test" -> text)
  def invokeBlock[A](request: Request[A], block: Request[A] => Future[Result]): Future[Result] = {
    if (testForm.bindFromRequest.value.isDefined) {
      block(request)
    } else {
      Future.successful(Ok("error"))
    }
  }
}
</pre>

上記対応を行ってもうまくいかない場合はRequestHeaderのcontent-typeを確認し、下記関数内でどのように扱われているのか確認すべし。
[play.api.mvc.ContentTypes.anyContent](https://github.com/playframework/playframework/blob/master/framework/src/play/src/main/scala/play/api/mvc/ContentTypes.scala#L608)
content-typeを明記しておらず、AnyContentAsRawとして処理されていたためPOSTデータを受け取れない場合があった。
ニューラルネットワークにおけるDeconvolution

ディープニューラルネットワークを用いた画像生成モデル（DCGAN）を調べていたところ、Deconvolutionという単語が出てきたので調べてみました。

## Convolutionとは？

Convolutionは日本語だと畳み込みと訳されます。
Deep Convolutional Neural Network = 深層畳み込みニューラルネットワークが画像認識タスクで高い識別率を叩き出して話題になっているやつですね。

詳しいことはこっちの記事へ

[Azure Machine Learningをわかった気になるために細かいことは気にせずに機械学習のことをまとめてみる - ディープラーニング](http://qiita.com/shngt/items/431d7749a67573085aec#convolutional-bundle%E7%95%B3%E3%81%BF%E8%BE%BC%E3%81%BF)

イメージとしてはこの画像の通りで、元画像のピクセルや特徴マップの値にカーネル（フィルタ）をかけて、そのカーネルが表す特徴っぽさを抽出するような作業です。

![畳み込みイメージ](https://qiita-image-store.s3.amazonaws.com/0/103085/018c688d-dec4-a329-f6e6-bbc8f93f2d25.gif)
画像引用：[深層畳み込みニューラルネットワークを用いた画像スケーリング](http://postd.cc/image-scaling-using-deep-convolutional-neural-networks-part1/)

## Deconvolutionとは？

Deconvolutionが日本語で一般になんと訳されるのかはわかりませんが、語感的には逆畳み込みでしょうか。

画像処理でDeconvolutionというと、画像にぼけなどのノイズが入っている場合に、それを元画像にぼけの原因となる関数がかかっている（畳み込みされてる）と考え、その関数を推定して元画像を復元することのようです。

[画像の高解像度化技術　～新型画像処理技術(デコンボリューション)の説明～](http://www.casleyconsulting.co.jp/blog-engineer/%E7%A0%94%E7%A9%B6%E9%96%8B%E7%99%BA/%E3%80%90%E7%A0%94%E7%A9%B6%E9%96%8B%E7%99%BA_%E7%AC%AC3%E5%9B%9E%E3%80%91%E7%94%BB%E5%83%8F%E3%81%AE%E9%AB%98%E8%A7%A3%E5%83%8F%E5%BA%A6%E5%8C%96%E6%8A%80%E8%A1%93-%EF%BD%9E%E5%85%89%E5%AD%A6/)

## ニューラルネットワークにおけるDeconvolutionとは？

Deconvolution = 逆畳み込みという言葉から特徴マップから畳み込む前の画像・特徴を復元するのかな？でも隣り合った特徴同士が影響し合いそうだし、どうするんだろう？難しそうだな……そう思ってた時代が自分にもありました。

調べてみると、ニューラルネットワークにおけるDeconvolutionというのは、transposed convolution = 転置畳み込みと言うほうがわかりやすく、元となる特徴マップを拡大してから畳み込むようです。

![f2RiP.gif](https://qiita-image-store.s3.amazonaws.com/0/103085/20e0e845-f631-1995-d85e-bc39f69ae9f8.gif)
画像引用：[What are deconvolutional layers?](http://datascience.stackexchange.com/questions/6107/what-are-deconvolutional-layers)

青が元の特徴マップ（3X3）で、周囲や間に空白を足してサイズを拡大した後でカーネルを適用し、緑の画像・特徴マップ（5X5）を得ています。

こちらのページは色々な畳み込みが視覚化されていてわかりやすいですね。

[Convolution arithmetic](https://github.com/vdumoulin/conv_arithmetic)

これなら実装も難しくなさそうですね。

[waifu2x](https://github.com/lltcggie/waifu2x-caffe/releases)などの画像拡大でも同じものが使われているんですかね？
以下の例だと畳み込み層と全結合層を組み合わせているようですが、どうして全結合層を使っているんでしょうか？

[深層畳み込みニューラルネットワークを用いた画像スケーリング](http://postd.cc/image-scaling-using-deep-convolutional-neural-networks-part1/)
レイマーチングの法線をdFdxとdFdyで導出する

# dFdxとdFdyとは
GLSLには[`dFdx/dFfy`](https://www.opengl.org/sdk/docs/man/html/dFdx.xhtml)というフラグメントシェーダで使える組み込み関数があります。

`dFdx/dFfy`によって、X方向・Y方向の偏微分が計算できます。

偏微分というと、難しそうな印象を受けるかもしれませんが、単なるスクリーン上のピクセル単位の画素値（本当は任意の値）の差分です。

そもそも`dFdx/dFfy`とは？という方は、先にコチラをご覧になることをお勧めします。

- [dFdxとdFdyでわずか4行のお手軽エッジ検出！ - Qiita](http://qiita.com/gam0022/items/1342a91d0a6b16a3a9ba)

# レイマーチングの法線の計算をdFdxとdFdyで行う
dFdxとdFdyによって、スクリーン上での微分から法線を求めることができます。

これで法線が求まるのは単純に面白いですね。同じことをしてる人は見たことがないです。

![レイマーチングの例の比較。左側が距離関数の勾配による法線。右側がdFdx/dFfyによる法線](https://qiita-image-store.s3.amazonaws.com/0/17718/4920f98e-a7f0-ee94-6308-95bc5de9a75f.png)

これはレイマーチングの例の比較した画像です。左側が距離関数の勾配による法線、右側がdFdx/dFfyによる法線です。

ただし、2x2にブロックに解像度が落ちてしまい、結果が汚くなるので、実用性があるかどうかは不明です。

- 球体の例
    - [距離関数の勾配による法線の計算](http://glslsandbox.com/e#33244.0)
    - [dFdx/dFfyによる法線の計算](http://glslsandbox.com/e#33244.1)
- 鉄骨の例
   - [距離関数の勾配による法線の計算](http://glslsandbox.com/e#33244.3)
   - [dFdx/dFfyによる法線の計算](http://glslsandbox.com/e#33244.2)

## 距離関数の勾配による法線の導出
一般的にはレイマーチングの法線は距離関数の勾配で求めます。今まではこの方法しか見たことがありませんでした。

```glsl:距離関数の勾配による法線の計算
const float EPS = 0.001;

vec3 getNormal(vec3 p) {
    return normalize(vec3(
        sceneDist(p + vec3(EPS, 0.0, 0.0)) - sceneDist(p + vec3(-EPS,  0.0,  0.0)),
        sceneDist(p + vec3(0.0, EPS, 0.0)) - sceneDist(p + vec3( 0.0, -EPS,  0.0)),
        sceneDist(p + vec3(0.0, 0.0, EPS)) - sceneDist(p + vec3( 0.0,  0.0, -EPS))
    ));
}
```

距離関数は形状を陰関数表現したものとも言えます。また、陰関数における勾配が法線となる性質があります。
つまり、距離関数をワールド空間上のXYZに偏微分することで勾配が求まり、この勾配が法線ベクトルとなります。

詳しい話は、次のスライドの63ページあたりに簡単に解説しています。

- [シェーダだけで世界を創る！three.jsによるレイマーチング](http://www.slideshare.net/shohosoda9/threejs-58238484)

## dFdx/dFfyによる法線の導出
さて、本題のdFdx/dFfyによる法線の計算について説明します。

以前の記事のエッジ検出の例では、スカラー値の微分をしましたが、普通にベクトルも微分できます。

さらに微分する対象が画素値である必要も無いです。今回はレイと物体との交点の座標をスクリーン上で微分しています。

```glsl:dFdx/dFdyによる法線の計算
vec3 getNormal(vec3 p) {
    vec3 dx = dFdx(p);
    vec3 dy = dFdy(p);
    return normalize(cross(dx, dy));
}
```

上の関数で法線が求まる仕組みを簡単に説明します。

物体の交点座標を微分すると接線になります。そして、XとYの2方向の接線があれば接平面が一意に決まり、接線の外積から法線も導出できるという仕組みです。

どちらの手法も偏微分で法線を求めますが、微分する対象が異なります。表にまとめるとこうなります。最終的にはどちらも法線になるのも面白いですね。

|手法|偏微分される関数|偏微分する変数|偏微分した後の処理|
|---|---|---|---|
|距離関数の勾配による法線の計算|距離関数|ワールド空間上のXYZ|勾配（偏微分した値を並べる）|
|dFdx/dFdyによる法線の計算|交点座標|スクリーン空間上のXY|外積|
WPS > namelist.wps > ドメインの確認 > NCL v6.3 > ncl util/plotgrids_new.ncl 

```txt:動作環境
CentOS 6.8 (64bit)
WRF v3.7.1
WPS v3.7.1
```

関連 http://qiita.com/7of9/items/8ff328ed1c144d659335

WRF(Weather Research and Forecasting Model)の前処理のWPS。
WPSのnamelist.wpsにて設定しているドメインの確認方法が以下に掲載されていた。

http://www2.mmm.ucar.edu/wrf/OnLineTutorial/Basics/GEOGRID/index.html

>  Run plotgrids.ncl to ensure your domain is in the right location before running geogrid.exe.
>
>    ncl util/plotgrids.ncl

### 実行してみた

WPSのフォルダにて以下を実行した。

```
$ ncl util/plotgrids.ncl 
 Copyright (C) 1995-2015 - All Rights Reserved
 University Corporation for Atmospheric Research
 NCAR Command Language Version 6.3.0
 The use of this software is governed by a License Agreement.
 See http://www.ncl.ucar.edu/ for more details.
(0)	You need NCL V6.1 to run this script. Try running util/plotgrids_new.ncl. Stopping now...
```

NCL v6.3をインストールしたが、上記の通りnclファイルが対応していないようだ。

コメントの通り、以下の実行をすると設定ドメインの確認ができた。

```
$ ncl util/plotgrids_new.ncl 
 Copyright (C) 1995-2015 - All Rights Reserved
 University Corporation for Atmospheric Research
 NCAR Command Language Version 6.3.0
 The use of this software is governed by a License Agreement.
 See http://www.ncl.ucar.edu/ for more details.
```

![qiita.png](https://qiita-image-store.s3.amazonaws.com/0/32870/e2a9b4a3-dff6-fed4-8560-4320ccf535a7.png)
CentOS > クリックして消えるウィンドウのスクリーンショットを取る > gnome-screenshot --delay=3 --window

```txt:動作環境
CentOS 6.8 (64bit)
```

クリックしたら消えてしまうウィンドウのスクリーンッショットを取りたい。

Alt+PrintScreenでは取る前にウィンドウが消えてしまった。

参考 http://motw.mods.jp/Linux/screenshot.html

```
$ gnome-screenshot --delay=3 --window
```
を実行して、該当ウィンドウをクリックしたら取れた。
widthが可変の要素を中央に配置する

テキスト等、可変長の要素を中央に配置する場合、
親要素に`text-align: center;`、子要素に`display: inline-block;`と指定する事で中央に配置出来ますが、
複数行のテキストの場合は上記では実現出来ません。

以下のように`display: table;`を使う事によって実現できます。

```css
.block {
  display: table;
  margin: 0 auto;
}
```

親要素へのスタイル指定も不要なので便利です。
Sequel Pro で C-h でヘルプが開かないようにショートカットを変更する

## tl;dr

システム環境設定 :arrow_right: キーボード :arrow_right: ショートカット :arrow_right: アプリケーション

で Sequel Pro を追加して

- 単語の MySQL ヘルプ
- 選択部分の MySQL ヘルプ

を別のキーバインドで置き換える

<img width="780" alt="スクリーンショット 2016-07-29 12.07.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/29846/7efaf030-c82f-b1d0-f94c-dbcaa3c90f45.png">

※上記は日本語版向け。他言語の場合は「単語の MySQL ヘルプ」などを置き換える。例えば「MySQL Help for Word」

## C-h 押したらヘルプが開きやがる

Sequel Pro のクエリエディタで文字を消そうとして C-h 押したらヘルプが開いて「うわー」ってなるの最高につらいですよね。

対策として、

- [Sequel ProのC-hをKarabiner(KeyRemap4MacBook)で置き換える](http://qiita.com/kwappa/items/94d2c18151e11462630c)
- [Sequel Pro で C-h でちゃんと DELETE する](http://qiita.com/aereal/items/e21e044927b2d30be98c)

などのサードパーティのツールを利用するものや、

- [Sequel Proのクエリエディタで一つ前の文字を消す方法](http://cockscomb.hatenablog.com/entry/2013/10/05/170004)

といったソースコードを書き換えて野良ビルドする方法が紹介されていますが、最近のバージョン (?) の Sequel Pro では [OS X のキーボードショートカット機能を使って簡単に対策する](https://github.com/sequelpro/sequelpro/issues/1974#issuecomment-54702112)ことができます。

## キーボードショートカットを変更する

システム環境設定 :arrow_right: キーボード :arrow_right: ショートカット :arrow_right: アプリケーション

で、 `+` を押して、

- アプリケーション: Sequel Pro
- メニュータイトル: 単語の MySQL ヘルプ
- キーボードショートカット: C-H 意外で好きなやつ (CMD-C-H とか)

と

- アプリケーション: Sequel Pro
- メニュータイトル: 選択部分の MySQL ヘルプ
- キーボードショートカット: C-H 意外で好きなやつ (CMD-C-H とか)

を追加し、ヘルプを開くショートカットキーをキーバインドを変更してください。

これだけです。
Google Speech API を手軽に試せる環境を Docker で構築した

## TL; DR

- [Google Cloud Speech API](https://cloud.google.com/speech/)をサクッと試せる環境を作った
    - **[github: dogwood008/google_cloud_speech_recognition_sample](https://github.com/dogwood008/google_cloud_speech_recognition_sample)**
- Dockerのコンテナを走らせるか、gitプロジェクトをクローンして `bundle install` で動きます
- APIキーの取得は自分でどうぞ
    - [Google Speech APIを使えるようになるまで](http://qiita.com/lethe2211/items/7c9b1b82c7eda40dafa9)

## 前書き

先日、ベータ版で[Google Cloud Speech API](https://cloud.google.com/speech/)が一般公開されました。ちょっとだけ試してみたい場合、前述のリンク先でテスト使用ができます。

ただし、そのページでテストできるのは **その場で録音した音声** しか使用できません。「音声ファイルの場合どうなるんだ…？」というのをテストするには、実際にPOSTでリクエストを投げる必要があります。

その場合には適切にファイルを変換し、決められたパラメータを調べ、それをを付けてリクエストが必要です。本当にやりたいのはテストであって、パラメータを調べたり、対応する音声ファイル形式を調べたりすることではないのです。

## やったこと

手軽に試せるよう、 Docker のコンテナを起動するだけで全て整うようにしました。詳細はREADMEを読んで下さい。

**[github: dogwood008/google_cloud_speech_recognition_sample](https://github.com/dogwood008/google_cloud_speech_recognition_sample)**

APIキーの発行は自分で行う必要があります。以下を参考にして下さい。ちなみに、Chromium-devグループへの加入は不要でした。

- [Google Speech APIを使えるようになるまで](http://qiita.com/lethe2211/items/7c9b1b82c7eda40dafa9)
- [Google音声認識(Speech API)のAPIキー取得方法](http://eyepodtouch.net/?p=81)

## 後書き

実際にこれを使って手元にあった音声ファイルを認識してみたところ、声が響く環境だった＋「あー」等の間をつなぐ言葉が多用されていたため、あまり精度は良くありませんでした。

この記事「[Google Speech API をストリームで利用してみた](http://qiita.com/voluntas/items/fb9fc621947272928df4)」にもあるように、ストリームでの認識も魅力的で、（おそらく録音環境と内容が適切であれば）かなりの精度を持っているようです。

これは予想ですが、話者が最初から音声認識させるつもりで話したものを録音したファイルであれば、認識精度は良いのではないかと思います。

## 参考にさせて頂いた記事、資料

- [Google Cloud Speech API Documentation](https://cloud.google.com/speech/docs/)
    - [Google Cloud Speech API](https://cloud.google.com/speech/reference/rest/)
- [Google Speech APIを使えるようになるまで](http://qiita.com/lethe2211/items/7c9b1b82c7eda40dafa9)
- [Google Speech APIをRubyから使う](http://qiita.com/github0013@github/items/6dd9c62b78be98dcd25f)
- [Google Speech API ver.2の使い方](http://qiita.com/mountcedar/items/be1e5d54fcef8f3a4bda)
- [Google音声認識(Speech API)のAPIキー取得方法](http://eyepodtouch.net/?p=81)
Fortran 奇譚

先日 NASA が1977年に打ち上げられたボイジャー探査機のメンテナンスのために FORTRAN のエンジニアを募集しているという記事を見た。
http://www.theregister.co.uk/2015/10/31/brush_up_on_your_fortran/

「FORTRAN が書ける人間がいるわけがない」「あれはIT業界のインダス文字だ」「NASA は暗に宇宙人に募集をかけてるのではないか」と思った人も多いと思うが、科学技術計算界隈ではわりと普通に FORTRAN が現役である。そこで本稿では FORTRAN を面白おかしく紹介しようと思う。

FORTRAN は歴史が長いだけあって様々なバージョンがあるが、FORTRAN 77 は **アルファベットの小文字が使えない** などの仕様があり、気の弱いエンジニアは見るだけで失神するだろう。本稿は全年齢対象という観点から、コードの視覚的な危険性の薄い Fortran 90 について述べる。

コンパイラはおそらく最も普及している gfortran を用いているため、gfortran の仕様なのか Fortran 90 の仕様なのかを区別していないが、まあネタ記事ということでご了承願いたい。

# 変数宣言は、なくても良いが絶対必要

C 同様のコンパイル言語なので変数宣言が必要かと思いきや、実は宣言しなくても使える。

```fortran
program main
        x = 3.14
        n = 3.14
        print *, "x = ", x
        print *, "n = ", n
end program
```

Fortran 自体を知らなくても意味は分かるだろう。`x` と `n` にそれぞれ `3.14` を代入して表示するという他愛ないプログラムだ。だがこれを実行すると

```:実行結果
 x =    3.14000010
 n =            3
```

おわかりいただけただろうか。Fortran は `x,y,z` といった文字は実数、`n,m` といった文字は整数というふうに **値ではなく変数名から型推論** をするという機能がある。
この機能はおそらくコンピュータ黎明期には便利だったのだろうが、野蛮過ぎるということで当時のキリスト教会により弾圧された。現代では `implicit none` という悪魔祓いのおまじないを入れることが義務付けられている。これは「変数宣言なしで変数使ったらコンパイルエラー出すよ」という意味。

```fortran
program main
        implicit none
        x = 3.14
        n = 3.14
        print *, "x = ", x
        print *, "n = ", n
end program
```

これをコンパイルするとエラーが出る。

```
test.F90:4:3:

   n = 3.14
   1
Error: Symbol ‘n’ at (1) has no IMPLICIT type
test.F90:3:3:

   x = 3.14
   1
Error: Symbol ‘x’ at (1) has no IMPLICIT type
```

# 配列番号は ( ) で囲む

配列 `p` の5番目の要素にアクセスするには `p[5]` ではなく `p(5)` と書く。
「エッ、それじゃ関数に引数を渡すときはどう書くの？」と思うだろう。他の言語同様 `func(arg)` である。なんて紛らわしいんだ！

ちなみに配列番号は1から始まる。

```fortran
program main
        implicit none
        integer p(5)
        p(1) = 2
        p(2) = 3
        p(3) = 5
        p(4) = 7
        p(5) = 11
        print *, p
end program
```
```:実行結果
           2           3           5           7          11

```

配列を `print` すれば要素を全部表示してくれる。この点 C よりもだいぶラクと言えるだろう。他にも「配列全体に対する操作」というのが充実していて、たとえば

```fortran
real x(10)
x = 1.0
```

とすれば `x` の10要素すべてに 1.0 を代入してくれるし

```fortran
sin(x)
```

とすれば x の要素すべてに `sin()` 関数を適用してくれる。また大抵の言語で扱いのめんどい多次元配列も

```fortran
integer x(10,10) 
```
こうすればあっさり 10x10 の二次元配列になる。

# 充実の数学機能

もとを正せばコンピュータとは計算機なので、元祖高級言語である Fortran は数学機能がやたら充実している。たとえば複素数型 `complex` というマニアックな機能がなんの追加モジュールもなしに使える。以下は複素数 z=1+2i の自乗計算である。

```fortran
program main
        implicit none
        complex z
        z = (1.0, 2.0)
        print *, z**2
end program
```
```:実行結果
 ( -3.00000000    ,  4.00000000    )
```

また、同じ長さの配列はループなどせずにそのまま足し算することが出来る。いわばベクトルとして扱われている。

```fortran
program main
        implicit none
        integer a(3), b(3)
        a(1) = 10
        a(2) = 20
        a(3) = 30
        b(1) = 40
        b(2) = 50
        b(3) = 60
        print *, a+b
end program
```
```:実行結果
          50          70          90
```

このように単純な計算が C よりずっとラクに書けて、しかもスクリプト言語よりも桁違いに計算が速いので、いまだに科学計算で使われるのもまあ分からんでもないだろう。
遅延静的束縛 (Late Static Bindings)

```php
#継承されたクラスのメソッドなどを親クラスで解決するための機能
<?php
class A {
    public static function who() {
        echo __CLASS__;
    }
    public static function test() {
        self::who();
    }
}

class B extends A {
    public static function who() {
        echo __CLASS__;
    }
}

B::test();
```
「Microsoft .NET Core 1.0.0 VS2015 Tooling Preview Update 2」がインストールに失敗する件


Visual Studio 2015 Communityを利用して皆さんのサンプルなどを見ながらC#回りの勉強していますが、最近　.NET Coreがリリースされたという記事を読んだので早速ツールを入れてみようかと思いました。

が、ツールを実行してもSetup Failedとなってしまいました。表示された案内通りログファイルを確認したところ（環境のせいかもしれませんが）バージョンチェックで失敗してしまうようです。

解決方法を検索したところ、以下のURLに対処法が掲載されていたので、同じような現象に会った誰かの役に立てばくらいの気持ちでメモしておきます。

http://www.ryadel.com/en/microsoft-net-core-1-0-0-vs2015-tooling-preview-update-2-fails-install-error-0x81f4000-fix/

前述のURLに記載されているままですが、ツールを実行する際に以下のように、SKIP_VSU_CHECK=1とすると、バージョンチェックをスキップしてくれるようです。
```
dotnetcore.1.0.0-vs2015tools.preview2.exe SKIP_VSU_CHECK=1
```
【Xcode】第二引数以降はラベルをつける【Objective-C】

Objective-Cを触り始めて一ヶ月が経ちました。先日言われて初めて気づいたのですが、**Objective-Cでは第二引数以降はラベルをつける**のが一般的だそうです。


>```Objective-C:
>// 引数が3つの場合
>- (戻り値の型)メソッド名:(引数の型)引数1　ラベル:(引数の型)引数2 ラベル:(引数の型)引数3

>//@IT Objective-Cのクラスやプロパティ、特徴的なメソッドの使い方 (3/3) 
>//http://www.atmarkit.co.jp/ait/articles/1404/09/news029_3.html より引用
>```

実はこの引数のラベル、省略することができるので全く気づかなかったという…
##実装

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

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    NSString *stringArgument1 = @"aiueo";
    NSString *stringArgument2 = @"kakikukeko";
    int intArgument = 5;
    
    [self setMyArgument:stringArgument1 myArgument2:stringArgument2 myArgument3:intArgument];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (void) setMyArgument:(NSString *)argument1 myArgument2:(NSString *)argument2 myArgument3:(int)argument3;{
     NSLog(@"myArgument1:%@ myArgment2:%@ myArgment3:%d", argument1, argument2, argument3);
}

@end
```

実行結果

```
myArgument1:aiueo myArgment2:kakikukeko myArgment3:5
```

第一引数はメソッド名（ラベル名？）で関連付けができているので新たに明記しないとのこと


##参考
[Objective-Cの勉強(2)；メソッドの宣言](http://info-utakura.blogspot.jp/2013/07/objective-c2.html)
[引数が複数あるメソッドの記述方法](http://objc.web.fc2.com/cocoa-3.htm)
Swiftで乱数ゲットだぜ

あまりツール系のアプリを作ってると
乱数ってあまり使わないですけど
ゲーム要素とかが入ってくると途端に使うことが多くなりますね

乱数を取得する処理は共通化のため
自分は `Int` の静的メソッドとして追加しました

```swift
public extension Int {

    public static func random(min n: Int, max x: Int) -> Int {
        let min = n < 0 ? 0 : n
        let max = x + 1
        let v = UInt32(max < min ? 0 : max - min)
        let r = Int(arc4random_uniform(v))
        return min + r
    }
}
```

正の整数で最小と最大を指定して、その中からランダムな数値を取得します

使う時は

```swift
let randomNum = Int.random(mim: 10, max: 50)
```

という感じです。

で、ワンモアシング

`Range` を使って、今作ったメソッドを少しだけオシャレに。。

```swift
public extension Int {

    public static func random(range: Range<Int>) -> Int {
        return random(min: range.startIndex, max: range.endIndex)
    }
}
```

先ほどの `random` メソッドと並べて
上記のようなメソッドを追加しました

すると

```swift
let randomNum = Int.random(mim: 10, max: 50)
```

```swift
let randomNum = Int.random(10...50)
```

このふたつが同じ意味になります
swiftライクになった気がします(あくまで気だけ)

50を含めたくない時なんかは

```swift
let randomNum = Int.random(10..<50)
```
こうしてやればいいのですね。オシャレ。
インターフェース

```php
#インターフェイスを実装するには、implements 演算子を使用し、 このインターフェイスに含まれる全てのメソッドを実装する必要があります。 
#インターフェースにおいて定数はインターフェイスを継承したクラスやインターフェイスから上書きすることはできません。
#インターフェースのチェック
<?php

// インターフェイス 'iTemplate' を宣言する
interface iTemplate
{
    public function setVariable($name, $var);
    public function getHtml($template);
}

// インターフェイスを実装する。
// これは動作します。
class Template implements iTemplate
{
    private $vars = array();

    public function setVariable($name, $var)
    {
        $this->vars[$name] = $var;
    }

    public function getHtml($template)
    {
        foreach($this->vars as $name => $value) {
            $template = str_replace('{' . $name . '}', $value, $template);
        }

        return $template;
    }
}

// これは動作しません。
// Fatal error: Class BadTemplate contains 1 abstract methods
// and must therefore be declared abstract (iTemplate::getHtml)
class BadTemplate implements iTemplate
{
    private $vars = array();

    public function setVariable($name, $var)
    {
        $this->vars[$name] = $var;
    }
}
```
抽象クラス

```php
#抽象クラスはそれ自体をインスタンス化することはできません。必ずその抽象クラスを継承したクラスをインスタンス化する必要があります。
<?php
abstract class AbstractClass
{
    // 拡張クラスにこのメソッドの定義を強制する
    abstract protected function getValue();
    abstract protected function prefixValue($prefix);

    // Common method
    public function printOut() {
        print $this->getValue() . "\n";
    }
}

class ConcreteClass1 extends AbstractClass
{
    protected function getValue() {
        return "ConcreteClass1";
    }

    public function prefixValue($prefix) {
        return "{$prefix}ConcreteClass1";
    }
}

class ConcreteClass2 extends AbstractClass
{
    public function getValue() {
        return "ConcreteClass2";
    }

    public function prefixValue($prefix) {
        return "{$prefix}ConcreteClass2";
    }
}

$class1 = new ConcreteClass1;
$class1->printOut();
echo $class1->prefixValue('FOO_') ."\n";

$class2 = new ConcreteClass2;
$class2->printOut();
echo $class2->prefixValue('FOO_') ."\n";
```
MTBBarcodeScannerを使ってちゃちゃっとシンプルなバーコードリーダーを作ろう


## ライブラリ

- MTBBarcodeScanner


### 準備

```Podfile
pod 'MTBBarcodeScanner'
```

```bash
$ pod install
```

## サンプルコード

storyboardにUIViewを設置し `ViewController.m` に紐付ける

```objective-c:ViewController.m
#import "ViewController.h"
#import "MTBBarcodeScanner.h"

@interface ViewController ()

@property (weak, nonatomic) IBOutlet UIView *previewView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
	[self setup];
}

- (void)setup {
    MTBBarcodeScanner *scanner = [[MTBBarcodeScanner alloc] initWithMetadataObjectTypes:@[AVMetadataObjectTypeEAN13Code]
                                                   previewView:self.previewView];
    [MTBBarcodeScanner requestCameraPermissionWithSuccess:^(BOOL success) {
        if (success) {
            [scanner startScanningWithResultBlock:^(NSArray *codes) {
                AVMetadataMachineReadableCodeObject *code = [codes firstObject];
                NSLog(@"Found code: %@", code.stringValue);
                [scanner stopScanning];
            }];
        } else {
            // The user denied access to the camera
            NSLog(@"The user denied access to the camera");
        }
    }];
}
```

[私の作ったサンプル](https://github.com/nnsnodnb/BarCodeScanner-MTBBarcodeScanner)がGitHubに上がっているので良かったら見てください！
キーワードメモ

・PHPのスカラー値は４種類です。
論理値 (boolean)

整数 (integer)

浮動小数点数(double)

文字列 (string)



・stdClass


・オーバーロードのマジックメソッドの一覧
__get
__set
__isset
__unset
__call
__callStatic


・オートロード
__autoload()関数は、引数に使おうとしたクラス名を受け取ります


・Copy-On-Write

・アロー演算子（->）、スコープ定義演算子（::）
c++ builder / Indy > IndyTextEncoding() > メモリリーク比較 > IndyTextEncoding( 932 ) / IndyTextEncoding( TEncoding::GetEncoding(932) )

```txt:動作確認
C++ Builder XE4
```

関連
http://qiita.com/7of9/items/db882fbaa4e610f7c910

`m_encSJIS = IndyTextEncoding( TEncoding::GetEncoding(932) );`とした時にはTEncoding::GetEncoding()のオブジェクトが開放されないことによるメモリリークが発生する、という情報について。

## 再現コード

```Unit1.h
//---------------------------------------------------------------------------

#ifndef Unit1H
#define Unit1H
//---------------------------------------------------------------------------
#include <System.Classes.hpp>
#include <Vcl.Controls.hpp>
#include <Vcl.StdCtrls.hpp>
#include <Vcl.Forms.hpp>
#include <IdBaseComponent.hpp>
#include <IdComponent.hpp>
#include <IdUDPBase.hpp>
#include <IdUDPClient.hpp>
//---------------------------------------------------------------------------
class TForm1 : public TForm
{
__published:	// IDE で管理されるコンポーネント
	TIdUDPClient *IdUDPClient1;
private:	// ユーザー宣言
	Idglobal::_di_IIdTextEncoding m_encSJIS;
public:		// ユーザー宣言
	__fastcall TForm1(TComponent* Owner);
};
//---------------------------------------------------------------------------
extern PACKAGE TForm1 *Form1;
//---------------------------------------------------------------------------
#endif
```

```Unit1.cpp
//---------------------------------------------------------------------------

#include <vcl.h>
#pragma hdrstop

#include "Unit1.h"
//---------------------------------------------------------------------------
#pragma package(smart_init)
#pragma resource "*.dfm"
TForm1 *Form1;
//---------------------------------------------------------------------------
__fastcall TForm1::TForm1(TComponent* Owner)
	: TForm(Owner)
{

#if 0 // leak
	m_encSJIS = IndyTextEncoding( 932 );
#else
	m_encSJIS = IndyTextEncoding( TEncoding::GetEncoding(932) );
#endif
}
//---------------------------------------------------------------------------
```

FastMMを設定して#ifで切り替えた場合の比較をした。

## 結果

### IndyTextEncoding( 932 )の時

![qiita.png](https://qiita-image-store.s3.amazonaws.com/0/32870/bae66ad6-abda-71f7-7e09-71a5da022cdd.png)

### IndyTextEncoding( TEncoding::GetEncoding(932) )の時

![qiita.png](https://qiita-image-store.s3.amazonaws.com/0/32870/91c4e36f-0ca7-6c12-b7ce-3cdd8a489063.png)

### 比較結果

IndyTextEncoding( TEncoding::GetEncoding(932) )の時は「TMBCSEncoding」関連のリークがあり、IndyTextEncoding( 932 )の時はない。

IndyTextEncoding( 932 )を使う方がいいようだ。


他のメモリリークについては要調査。

### TIdCriticalSection 関連

TIdCriticalSectionレポートに関しては以下の情報がある。

http://stackoverflow.com/questions/5260680/why-are-memory-leaks-reported-for-indy-10
案件や改善項目の優先順位の決め方

# 案件や改善は、優先順位を決めて取り掛かる

案件の中にいろいろな機能を盛り込んで日程や工数に入りきらなかったり、不具合が多発して対処しなきゃいけなかったり、KPTしてみるとProblemばかりが溜まっていたりしませんか。

そんなときは優先順位を決めなければいけません、
優先順位を決めるときは「重要度」と「緊急度」で振り分けます。
これは「7つの習慣」にある「第三の習慣 緊急度ではなく重要度を優先する」です。

![select1.png](https://qiita-image-store.s3.amazonaws.com/0/114529/09468fea-fa92-5c27-b99a-159a34fa8741.png)

ここに優先度の高い方から順に１～４の番号を振ってみてください。
１と４は分かりますよね？２と３はどこに振ります？

![select2.png](https://qiita-image-store.s3.amazonaws.com/0/114529/9a7b417b-bfc0-75cb-eee1-0b81acdf983d.png)

重要度が高いほうが優先です。

![select3.png](https://qiita-image-store.s3.amazonaws.com/0/114529/cba29fd9-1feb-55b1-38a7-ef0ae83c7898.png)

重要じゃないものは、自分のためやチームのためになりません。
どこかの声の大きい人が「すぐにやれーー」とか云っているだけかも知れません。

# 上手に時間を割り当てていきましょう

![select4.png](https://qiita-image-store.s3.amazonaws.com/0/114529/7ae3e735-3ffb-9adb-074f-e505f237ddd6.png)

優先順位を決めた時の振る舞いは上のように考えます。

1. すぐに取り掛かるけど、時間が掛かりそうなものは２へ
2. 計画を建ててじっくり取り組む
3. 間の時間をつくって取り組む
4. やらない

３は後回しと言っていますが、やらない訳にもいきません。つまりは計画を建てて行動するので、実は２の領域に充てていくのがコツです。

Problemを全部対処しようなんて出来ないので、４のものはバッサリと切ってしまうと半分はなくなってしまうでしょう。そもそも見えている現象は症状が表面化しただけなので、根本問題は別にありますしね。
コピー・ペーストをtmux、iTerm2、OS Xで共有する


tmuxを使っているとコピー・ペーストがOS X上の他のアプリケーションと共有できない。

## 原因

OS Xはクリップボードを使うさいに、`pbcopy`と`pbpaste`というコマンドラインユーティリティを用いている。
しかしtmux上では上記ユーティリティが使用できないことがコピー・ペーストが共有できない理由のよう。

`pbcopy`と`pbpaste`をtmux上でも使えるようにするのが今回のゴール。

## iTerm2
先にiTerm2の下記設定を無効にしておく。

```
Preferences > General > Applications in terminal may access clipboard
```

![スクリーンショット 2016-07-29 8.46.29.png](https://qiita-image-store.s3.amazonaws.com/0/56499/e8054a5c-4138-7bdb-eb6a-9e6135f9f862.png "スクリーンショット 2016-07-29 8.46.29.png")

## tmux

`pbcopy`と`pbpaste`を使えるようにする。
まず下記をインストール。

```
$ brew install reattach-to-user-namespace
```

インストールしたら`~/.tmux.conf`に下記を追記する。

```~/.tmux.conf
# Mac OS X pasteboardを使用できるようにする
set-option -g default-command "reattach-to-user-namespace -l zsh"

# コピーモードでvimキーバインドを使う
setw -g mode-keys vi

# 'v' で選択を始める
bind-key -t vi-copy v begin-selection
bind-key -t vi-copy y copy-pipe "reattach-to-user-namespace pbcopy"

# `Enter` でもcopy-pipeを使う
unbind -t vi-copy Enter
bind-key -t vi-copy Enter copy-pipe "reattach-to-user-namespace pbcopy"

# ']' でpbpasteを使う
bind ] run "reattach-to-user-namespace pbpaste | tmux load-buffer - && tmux paste-buffer"
```

最後にtmuxの設定を読み込む。

```bash
$ tmux source-file ~/.tmux.conf
```

## 参考
* [Making the clipboard work between iTerm2, tmux, vim and OS X.](https://evertpot.com/osx-tmux-vim-copy-paste-clipboard/)
c++ builder / Indy > IndyTextEncoding()の定義

```txt:動作確認
C++ Builder XE4
```

関連
http://qiita.com/7of9/items/db882fbaa4e610f7c910

IndyTextEncoding()の定義を見てみた。

インストールしているC++ Builder内のIndyソースファイルの中でIdGlobal.pasには以下のように定義されている。

```delphi
  function IndyTextEncoding(AType: IdTextEncodingType): IIdTextEncoding; overload;
  function IndyTextEncoding(ACodepage: Word): IIdTextEncoding; overload;
  function IndyTextEncoding(const ACharSet: String): IIdTextEncoding; overload;
  {$IFDEF DOTNET}
  function IndyTextEncoding(AEncoding: System.Text.Encoding): IIdTextEncoding; overload;
  {$ENDIF}
  {$IFDEF HAS_TEncoding}
  function IndyTextEncoding(AEncoding: TEncoding): IIdTextEncoding; overload;
  {$ENDIF}
```


`enc := IndyTextEncoding(1252);`
と
`IndyTextEncoding(TEncoding.GetEncoding(20127))`
はそれぞれ上記の別の関数呼び出しが使われていることを理解した。
Laravel5.2 Herokuにデプロイ

##やること
Laravel5.2でHerokuにデプロイ
[Deploy Heroku [Laravel 5.2.*] ](https://gist.github.com/3runoDesign/7c4c8652c7c4543c9a3b "GitHub")を参考に淡々と実行するだけで、Laravel5.2ならデプロイできる。
＊＊Laravel5.1の場合は不明です。

##環境
デプロイアプリ：Laravel 5.2
開発環境：Laravel/homestead v0.5.0
ローカル環境:Windows10
ターミナル：GitBash + ConEmu
その他：Heroku Toolbeltをインストール済

##手順
1.対象アプリのディレクトリでgit init
2.buildpacksをセット
3.APP Bootを作成
4.Procfileを作成
5.本番環境の環境変数を設定
6.Herokuにpush

```:1.terminal
git init
```

```:2.terminal
heroku buildpacks:set https://github.com/heroku/heroku-buildpack-multi.git
curl -s https://gist.githubusercontent.com/3runoDesign/7c4c8652c7c4543c9a3b/raw/5bb673135c6498abf8512b623e3d362efcfbd59c/buildpacks > .buildpacks
```
```:3.terminal
curl -s https://gist.githubusercontent.com/3runoDesign/7c4c8652c7c4543c9a3b/raw/bdc5e201a7949c6d90c53ee2fd12dd164a173247/app_boot.sh > app_boot.sh
```
```:4.terminal
curl -s https://gist.githubusercontent.com/3runoDesign/7c4c8652c7c4543c9a3b/raw/2dec75e90b8d8c9ac165b412ec7d2b18861136c9/Procfile > Procfile
```
```json:4.composer.json
    "scripts": {
         ......
        "post-install-cmd": [
            "php artisan clear-compiled" ->追加
        ],
        "post-update-cmd": [
            "php artisan clear-compiled" ->追加
        ]
    },
```
```:5.terminal
heroku config:set APP_ENV=production
heroku config:set APP_KEY=$(php artisan --no-ansi key:generate --show)
heroku config:set APP_DEBUG=false
```
```:6.terminal
git add .
git commit -m "自由なコミットメッセージ"
git push heroku master
```
##参考
以下の記事を見るだけでたぶん大丈夫。
[Deploy Heroku [Laravel 5.2.*] ](https://gist.github.com/3runoDesign/7c4c8652c7c4543c9a3b "GitHub")
c++ builder XE4, 10.2 Tokyo > IDE | Indy > Indyのバージョンを知る

```txt:動作確認
C++ Builder XE4
RAD Studio 10.2 Tokyo Update 2 (追記: 2017/12/27)
```

使用している環境のIndyのバージョンを知る方法。

1. Indyのコンポーネント(TIdUdpClientなど)をフォームに貼る
2. Indyのコンポーネント上で右クリックする
  - 右クリックメニューの一番上にバージョンが記載されている

![qiita.png](https://qiita-image-store.s3.amazonaws.com/0/32870/b01b8810-07fb-773b-8665-c0c8d2db6a1b.png)
Processing / ControlP5 > serialPlotter (v0.7) > y軸ラベル表示 / シリーズ3,4対応

```txt:動作環境
Processing 3.1.1 on Windows 8.1 pro(64bit)
Library: ControlP5 v2.2.6
Library: Serial
```

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

## code v0.7

[v0.7 @ github](https://github.com/yasokada/processing_160726_serialPlotter/releases/tag/v0.7)


以下の実装をした。

- Y軸の最大、最小値を表示
- シリーズ3,4のボタン追加

## 動作例

![qiita.png](https://qiita-image-store.s3.amazonaws.com/0/32870/458b4dcd-0a55-b6ed-b235-e7621087d998.png)

軸の数値の桁数が多い時に改行されているのが誤算だが、これはこれで、小さい桁から大きい桁の数値を見るのに便利かもしれない。


## TODO

- グラフ描画の外部ファイル化
  - udpPlotterなどの実装時に使いまわしできるように
- データ追加のオーバーフロー対策
  - 300点以上追加されたらオーバーフローする
  - 適宜、配列の中身をシフトするなど
- マウスクリック地点のデータ数値表示
- ボタン名を配列に格納しているのは無駄
Macを持っていない人がkeynoteファイルをPowerPoint(ppt)やPDFに変換する

Macのkeynoteで作成されたプレゼンテーション資料をLinuxやWindowsの人が見るには、通常、Mac上のkeynoteでPowerPoint(ppt)やPDFに変換をしてもらいますが、Web版iCloud Keynoteを使えば、Macを持っている人がまわりにいなくてもブラウザだけで変換をすることができます。(iCloudのアカウントは必要です)

# 前提

* iCloudのアカウント(iPhoneなどで設定してください)
* ローカル上にダウンロードされたkeynoteファイル群

# 手順

(1) keynoteをzipでアーカイブします。Linuxの場合、たとえば以下のようなコマンドです。

```shell-session
$ ls -l
合計 8
drwxr-xr-x 4 yuta yuta 4096  7月 24 14:20 sample.key
$ zip -r sample.key.zip sample.key
  adding: sample.key/ (stored 0%)
  adding: sample.key/Index.zip (stored 0%)
  adding: sample.key/preview-web.jpg (deflated 4%)
  adding: sample.key/Data/ (stored 0%)
...
$ ls -l
合計 29756
drwxr-xr-x 4 yuta yuta     4096  7月 24 14:20 sample.key
-rw-rw-r-- 1 yuta yuta 30453809  7月 24 17:11 sample.key.zip
```

(2) ブラウザでiCloud Keynoteアプリケーション https://www.icloud.com/#keynote を開きます。
(3) プレゼンテーションの管理メニューから「プレゼンテーションをアップロード...」を選び、先ほどzipアーカイブしたkeynoteファイルをアップロードします。

![icloud-keynote-menu-upload.png](https://qiita-image-store.s3.amazonaws.com/0/21963/bdbf080e-e3d2-7ebc-4a68-28e9eff94d46.png)

![uploading-zipped-keynote.png](https://qiita-image-store.s3.amazonaws.com/0/21963/b01f4cb4-e032-b52c-29bd-3a286f438d2d.png)

(4) アップロードされたkeynoteをダブルクリックして開きます。
(5) Keynoteツールから「コピーをダウンロード...」を選び、フォーマット選択でPowerPointかPDFを選択してダウンロードします。

![icloud-keynote-menu-download-a-copy.png](https://qiita-image-store.s3.amazonaws.com/0/21963/1ead9a1d-014e-75aa-b1a4-6c40f0291703.png)

![icloud-keynote-selecting-download-format.png](https://qiita-image-store.s3.amazonaws.com/0/21963/3465f430-ec12-7d78-f4f4-77f40800a463.png)

以上です。理解してみると意外に簡単でした。
Rails4でActionCableを使ってみる（2016年7月時点

Railsの勉強のために簡単なサービスを作っています。
そこでActionCable機能を利用してみたくなったのですが、しかしバージョンはRails4。
Qiitaでの有用な記事を参考にさせてもらって実装しましたが、時間経過によって変更された部分や、Rails4特有の理由により詰まった所があったので、2016年7月時点で動かす為に必要な事を書いておきます。

環境:
 ruby:2.2.3
 rails:4.2.5


* ActionCableの実装基礎知識
http://qiita.com/jnchito/items/aec75fab42804287d71b

* Rail4でのActionCable
http://qiita.com/totzyuta/items/556d1bae65bb918db322

上記に挙げた記事は非常に参考になりました。
作者の方々、ありがとうございます。
本記事はこれらの導入記事があった上での補足情報になります。

#詰まりポイント1: gemの宣言
Rails4での導入記事でのgemfile記述を行うとbundle installでエラーが出てしまいます。

```ruby:
# Gemfile
gem 'actioncable', github: 'rails/actioncable'
```
↓　今はこっち

```ruby:
# Gemfile
gem 'actioncable', github: 'rails/actioncable', branch: 'archive'
```
2016年7月現在では、githubのrails/actioncableはrails/rails/以下に移動しました。
Rails4用のActionCableのソースは今はrails/actioncableのbranchにて公開されています。

#詰まりポイント2: AssetPipeline requireでのモジュール名称
ActionCableはRail4->Rails5でrequireするモジュール名称が変更になりました。

```ruby:
#= require action_cable
```
↑はRail5　 ↓　Rail4はこっち

```ruby:
#= require cable
```
Rail5での導入を参考にするとrequreには"action_cable"とありますが、 rails4ではrequireには"cable" です。

#詰まりポイント3: Rails4では cable.rb or cable.coffeeのファイル名はダメ
ActionCableを利用するにはブラウザからjavascriptでルームへ接続する命令を書かなければなりません。
そのjavascript命令を記述するファイル名にも注意点があります。

```ruby:cable.js
(function () {
    this.App || (this.App = {});

    App.cable = Cable.createConsumer("/cable");
}).call(this);
```
↑はRail5ではcable.jsのファイル名はOK　 ↓　Rail4はダメなのでcable以外の任意のファイル名。

```ruby:hoge_cable.js
(function () {
    this.App || (this.App = {});

    App.cable = Cable.createConsumer("/cable");
}).call(this);
```

Rail5のgithubのREADME.mdなどを見ながら作業を進めると、cable.jsというファイルを作ってそこにルームへの接続命令を書く例が示されています。
しかし、Rails4でrequireするモジュール名が"cable"のため、実装側でcable.js(もしくはcable.coffee)ファイルを作成すると、モジュール側のcable.jsとバッティングします。
ここは素直にcable.js以外のファイル名にしましょう。

#おまけ Webサーバーは一つで気軽にActionCableを試す場合
ActionCableはActionCable機能を利用するサービスのアプリケーションサーバーとは、別にマルチスレッド対応のアプリケーションサーバーを別に立てるのが基本ですが、学習用であるならサービスと同居するスタンドアローン構成の方が気軽ですね。
簡単に自分の設定を書いておきます。

スタンドアローンなサーバーを立ち上げるための設定ファイル

```ruby:config.ru
require ::File.expand_path('../config/environment', __FILE__)
Rails.application.eager_load!

run Rails.application
```

ブラウザからのルームへの接続命令

```ruby:hoge_cable.js
(function () {
    this.App || (this.App = {});

    App.cable = Cable.createConsumer("/cable");
}).call(this);
```

ブラウザからのルームへの接続要求を処理するrouts

```ruby:routes.rb
  mount ActionCable.server => '/cable'
```

これで、ActionCable機能を利用するサービスのアプリケーションサーバーを立ち上げると、同サーバーを使ってActionCableのcableルームへ接続が確立されるようになりました。
簡単！

# 終わりに
如何でしょうか。
今思えば初学者ゆえに詰まっただけで、基本的な知識があれば自前でどうにかできる物ばかりな気がしますが...
私と同様の初学者のために参考になれば幸いです。
JSでもモバイルアプリらしい体験は実装できるのでしょうか？ with React Native

アニメーションはモダンなアプリ体験に不可欠なものになってますよね。
手のひらのなかのツールの使い心地に鈍感な人は減ってきてるのではないでしょうか。

JSでモバイルアプリを作る時、「アニメーションは実装できるけど、カクカクしてたりして、それないほうが良いよね」みたいな話になったことはありませんでしたか？ 僕もTitanium,Ionic Frameworkと触ってきて、こういうフレームワークは割りきって使うものという印象をずっと持ってました。

ただ、去年React Nativeを使って[iOS](https://itunes.apple.com/us/app/minnano-duan-ge-tou-gaokomyuniti/id675671254?mt=8), [Androidアプリ](https://play.google.com/store/apps/details?id=com.plasticaromantica.utayomin&hl=ja)（短歌を投稿するSNSアプリです）をリリースしてみて、とても気に入って、今回アニメーションやらインタラクション、どこまで出来るのが実験的にアプリを出してみました。

[Phrasal Verbs Flashcard](https://launchkit.io/websites/28D-wVkgDV4/)
最近ロンドンに来て、英語学習者の友達が増えたのもあって内容はFlashcardです。一人でデザインしてから作り始めました。２プラットフォーム作っても、一人でまかなえるのがJSベースのフレームワークの良いところです。

![A4.jpg](https://qiita-image-store.s3.amazonaws.com/0/29793/c9cfc25c-4270-eb22-a012-4fda45f73b46.jpeg)

今回活用したLibraryを実際どこで使ってるかを含め紹介していきます。
触れるのは、**Animated**、**PanResponder**、**ReactArt**、そして**OpenGL**です。

それぞれ、**アニメーション全般**、**カードインタラクション**、**チャート**、**カードの背景のブラー**で使っています。
参考にアプリのGIFアニメーションを置いておきます。

![2016-07-28 16_45_43.gif](https://qiita-image-store.s3.amazonaws.com/0/29793/a79bc1be-1bdb-9171-ab74-2e7405b6b53c.gif)

### Animated

メニューのトグル、チャートのアニメーションなど、アニメーション全てでお世話になってます。
React Nativeでアニメーションを扱う場合、基本的にこのAnimated libraryを使うことになります。

https://facebook.github.io/react-native/docs/animated.html

過去に別の[投稿](http://qiita.com/imaimiami/items/1ad4170c06b1922604dd)でも触れました。

### PanResponder

カードへのジェスチャーを扱う為に使ってます。ジェスチャー後にカードが元の位置に戻る動きはAnimatedを使います。

ジェスチャーを簡単に扱う為に用意されたlibrary。tinderのようなカードアニメーションのデモを作ってる人は沢山いますね。

https://facebook.github.io/react-native/docs/panresponder.html

こちらも過去[別記事](http://qiita.com/imaimiami/items/450ce7bfa0c365a5d1dc)で触れています。

### ReactArt

グラフを描画するために使ってます。図形をアニメーションさせたかったので、画像ではなくてDrawingライブラリで図形を描画してみました。アニメーションは変わらずAnimatedライブラリを使っています。

ReactARTはDrawingライブラリであるARTのブリッジライブラリ。これをReactNativeから扱えるようにしたLibraryがReactNativeに含まれています。

https://github.com/facebook/react-native/tree/master/Libraries/ART

このReactARTはReactNativeのDocsにも登場しないので、最近は別のライブラリもウォッチしています。

https://github.com/magicismight/react-native-svg

### OpenGL

カードの背景画像にブラーをかけるのに使っています。今回はOpenGLのSurface自体にAnimationの値を渡すみたいな果敢な事はしていないです。親のViewごとAnimationさせてます。

ReactNative用のOpenGLバインディングです。

https://github.com/ProjectSeptemberInc/gl-react-native

#### まとめ

ReactNativeのHotReloadを使ってアニメーションを試しながらサクサク開発出来るのは楽しいです。

今回のアプリはもちろんAndroid版もリリースしています。Androidでは正直削った機能もあるけど、箇所によっては何ら問題なく気持ち良い体験が提供できる感触がありました。

<img width="640" alt="iPhone_6_-_iPhone_6___iOS_9_3__13E230_ 2.png" src="https://qiita-image-store.s3.amazonaws.com/0/29793/03fd4779-b282-75f5-5568-ff542c0af398.png">

以前JSでモバイルアプリ開発して絶望した経験がある人は、今一度イメージを更新して採用を考慮にいれてみればいいのではと思います。

ちなみに、[React Nativeでどんな事出来るの？って記事](http://qiita.com/imaimiami/items/8e62a5111fe48a65b911)も最近投稿したので良ければどうぞ！

では、またいつか！ :)
技術英語 > Sometimes the only problem with a routine is that its name is [wishy-washy]

@ Code Complete (No. 6079 / 36077)

Sometimes the only problem with a routine is that its name is <font color=red>wishy-washy</font>; the routine itself might actually be well designed.

http://ejje.weblio.jp/content/wishy-washy
> 薄い、水っぽい、気の抜けた、くだらない、中身のからっぽな、煮え切らない、決断力のない

意訳「時々あるルーチンに関するたった一つの問題は、その名前がはっきりしないことだ。ルーチン自体はよく設計されているかもしれない（にも関わらず）」

wishy-washyという変な用語はそうそう出ないだろうと思ったら、VHDLの資料検索時にも出てきたので覚えることにした。

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

indecisive

http://qiita.com/7of9/items/641b45b29b54f12e1eb9

<hr>
dm-crypt/luksの起動前パスフレーズ入力(暗号化解除)をSSH経由で行う

今の時代、スマートフォン（Android/iPhone）ですらデバイス全体のデータに暗号化が掛かっているのに、PCはセットアップしないと暗号化がなされない。
せっかくCPUにAES-NI命令も乗っててほとんどオーバーヘッドがないので暗号化を掛けよう。

Linuxにはdm-crypt/luksでシステムの起動ディスク全体に暗号化を掛ける機能がある。これは、Linux起動前にパスワードの入力を必要とする。
PCはともかく、サーバなどに暗号化を掛けるときは、遠隔でパスワードを入力できないと不便なので、その部分をSSHで入力できるようにする。

----

# サーバー側の準備
debian を想定。

## 1.1 インストール
必要なパッケージをインストール。 dropbear がキモ。組み込み用のSSHサーバー。

```
apt-get install openssh-server dropbear busybox
```

## 1.2 鍵のコピー
勝手に秘密鍵・公開鍵を作ってくれるので、秘密鍵 `/etc/initramfs-tools/root/.ssh/id_rsa` をSSH接続したい接続元マシンにrsync/sftpなどでコピーする。

# GRUBをいじる
## 2.1 GRUB設定の書き換え

`/etc/default/grub` をvimなどで開いて、 `GRUB_CMDLINE_LINUX=` の部分を以下のように変更。

`GRUB_CMDLINE_LINUX="ip=IPアドレス:空:ゲートウェイIP:ネットマスク:ホスト名:インターフェイス:none" `

### 例

```
GRUB_CMDLINE_LINUX="ip=192.168.122.192::192.168.122.1:255.255.255.0::eth0:none" 
```

## 2.2 GRUB/initramを更新
root権限またはsudoした権限で

```
update-grub
update-initramfs -u # 一応（なくていいかも）
```

をしてgrub/initramfs等をアップデート。

----

# サーバーに接続 (ディスク暗号化解除)
サーバーの秘密鍵 `/etc/initramfs-tools/root/.ssh/id_rsa` を手元に持ってきて `-i` で指定して接続をする。

SSHをすでにマシンに入れていた場合、initramfsで起動するSSHのホスト鍵と異なるので、 `StrictHostKeyChecking=no` にしないと接続されないことがある。

## ちょい危険な方法
パスワードが接続元 history に残るので、接続元マシンが絶対に安全なとき以外は微妙。

```
$ ssh -i ~/id_rsa.initramfs \ 
 -o StrictHostKeyChecking=no \
 -o UserKnownHostsFile=/dev/null \
 host.example.com \
 "echo -ne \"PASSWORD\" > /lib/cryptsetup/passfifo"

Warning: Permanently added '130.158.xxx.xxx' (RSA) to the list of known hosts.
```

## ちょっと安全な方法 (接続後に入力)

```
$ ssh -i ~/id_rsa.initramfs \ 
 -o StrictHostKeyChecking=no \
 -o UserKnownHostsFile=/dev/null \
 host.example.com

Warning: Permanently added '130.158.xxx.xxx' (RSA) to the list of known hosts.


BusyBox v1.22.1 (Debian 1:1.22.0-9+deb8u1) built-in shell (ash)
Enter 'help' for a list of built-in commands.

~ # echo -ne "PASSWORD" > /lib/cryptsetup/passfifo
```

以上のどちらかを実行すると、勝手に暗号化ロックが解除されて普通のrootドライブのLinuxが立ち上がってくる。

### ~/.ssh/config

```
Host host.example.com
        Hostname host.example.com
        User root
        UserKnownHostsFile ~/.ssh/know_hosts.initramfs
        IdentityFile ~/.ssh/id_rsa.initramfs
```

# 参考
* http://blog.neutrino.es/2011/unlocking-a-luks-encrypted-root-partition-remotely-via-ssh/
* https://stinkyparkia.wordpress.com/2014/10/14/remote-unlocking-luks-encrypted-lvm-using-dropbear-ssh-in-ubuntu-server-14-04-1-with-static-ipst/
Docker on LinuxにMySQLがソケットがないとかでインストールできない！

# Mysql公式のリポジトリがあるじゃん
そうなんですけどね。 -> https://hub.docker.com/_/mysql/
でも開発する時は全部のせのDockerfile作って使いたいときありませんか？
そんな使い方邪道ですかね？
今回はそんなときにLinux(Ubuntu15.10,16.10)でMySQLがインストールできない問題に遭遇したので、防備がてら投稿です。

####注
Dockerは **Docker for Mac** を使用。バージョンは以下です。
```Docker version 1.12.0-rc4, build e4a0dbc, experimental```

## こんなことをしていた

#### Dockerを動かす

    docker run --rm -it ubuntu:16.10

(vimいれておく)

### update & upgrade apt-get

    apt-get update && apt-get upgrade -y

### apt-get mysql-server

    apt-get install -y mysql-server

### /etc/mysql/my.cnf 見る

    !includedir /etc/mysql/conf.d/
    !includedir /etc/mysql/mysql.conf.d/

### /etc/mysql/mysql.conf.d/mysqld.cnf 見る

    [mysqld_safe]
    socket          = /var/run/mysqld/mysqld.sock
    ...
    [mysqld]
    user            = mysql
    pid-file        = /var/run/mysqld/mysqld.pid
    socket          = /var/run/mysqld/mysqld.sock
    port            = 3306
    find /var/run/mysqld/mysqld.sock

### ls /var/run/ してみたら...
    lock  mount  utmp <- "mysqld" directoryない

こんなことになりましたとさ

# 解決方法

質問をすると返事が返ってくるウェブサービスで質問したところ
http://stackoverflow.com/questions/38641183/ubuntu-16-10-in-docker-1-12-claims-there-is-no-socket-for-mysql

#### Dockerを動かす

```docker run --rm -it ubuntu:16.10```

で、ポートフォワーディングをしてやる必要があるのだそうな。つまり

```docker run --rm -it -p=xxxx:3306 ubuntu:16.10```

ということ。見事なまでの初見殺しとは思いました。
みなさんは貴重な一週間を無駄にしないでくださいね！！


### 後付け

でも、同様のsocketない問題が `mysql-client` で発生しています。
誰か答えがわかる方がいらっしゃいませんか？
いらっしゃらなければまた質問をすると返事が返ってくるウェブサービスに...
プログラミングド素人のデザイナーがJava入門してみた_その2

## 前回までのあらすじ
[プログラミングド素人のデザイナーがJava入門してみた_その1](http://qiita.com/iwashi0830/items/b35a62d7313fbd5c3f43)

- javaファイルを作成し、terminal上で実行できるようになった
- 変数の定義やら、基本的な型がわかった

## 教科書
[ドットインストール](http://dotinstall.com/)さまさま

- [#06 データの演算をしてみよう](http://dotinstall.com/lessons/basic_java_v2/37706)
- [#07 データ型の変換をしてみよう](http://dotinstall.com/lessons/basic_java_v2/37707)
- [#08 ifで条件分岐をしてみよう](http://dotinstall.com/lessons/basic_java_v2/37708)
- [#12 配列を使ってみよう](http://dotinstall.com/lessons/basic_java_v2/37712)
- [#13 配列の要素を操作してみよう](http://dotinstall.com/lessons/basic_java_v2/37713)


## 文字列連結
- `+` でつなぐ

```
System.out.println("Hello "+"world!");
```

## 型変換(キャスト)
- 型変換する際は、変換後の型を明示する必要がある

```
double d = 1345.654;
int i = (int)d; //i に dを int として代入?みたいなイメージ?
```

## 条件演算子
- 値を返すif文を短くまとめることができる

```
Stirng hoge = [条件] ? 真の場合の値 : 偽の場合の値;
```

```
int score = 99;
String msg = score > 80 ? "Good!" : "so so";
System.out.println(msg);
```

## 配列
### 宣言と値へのアクセス

```
型[] hoge; //配列の宣言
```

- 宣言、データ領域確保、値の設定を個別に行う

```
int[] score; //配列の宣言
score = new int[3]; //データ領域の確保_配列3つ分
score[0] = 50;
score[1] = 75;
score[2] = 100;
```

- 宣言と値の設定を個別に行う

```
int[] score; //配列の宣言
score = new int[] {50,75,100}; //データ領域の確保と、値の設定
```

- 一行ですべて行う

```
int[] score = {50,75,100}; //宣言と値の設定
```

- 値へのアクセス


```
score[0] = 50;　//scoreの0番目に50を設定
System.out.println(score[0]); //50
```

### 配列の操作
- 配列の長さ

```
hoge.length
```

- for文で配列の中身をすべて取り出す

```
int[] scores = {50,75,100}; //配列の宣言と値の設定

for (int score : scores) { //int score　に　scoresの値をひとつずつ入れる
  System.out.println(score); //scoreを表示
} //↑をscoresの長さ分だけ繰り返す
```

## [@iwashi0830](https://twitter.com/iwashi0830)はこう思った
けっこうJavaScriptと似た感じで書ける部分も多いみたい。
条件演算子が使えるとかっこいいかも。