OmniAICreator/Qiita-1.07M huggingface dataset:
ページ表示を速くするCSSの記述方法

今年11月に新しいFirefoxがリリースされましたね。多くの処理がパラレルで動作するようになりマルチコア環境での動作が高速化しました。

この新しいFirefoxで改善された点にCSS描画速度の高速化も含まれていたので、ページ表示速度を速くするためのCSSの記述方法をまとめてみました。

## シンプルに適用できるCSSにする（と速くなるはず）

要素への適用ルールをシンプルにできるCSSにすると描画速度が改善されるはず、です。後述しますが、この適用ルールには疑似要素(:beforeや:afterなど)も含まれます。

新しいFirefoxに搭載されているレンダリングエンジンの一部、Quantum CSS (Stylo) は以下3つの要素を組み合わせて実装されています。

 - [Servo](https://servo.org/)のParallelism（並行処理）
 - Firefoxの[Rule Tree](https://developer.mozilla.org/ja/docs/Style_System_Overview#The_rule_tree)
 - ChromeとSafariから取り入れた Style Sharing Cache <- ???

Style Sharing Cacheが何のことか分からなかったので、Mozilla Developer Relations teamのエンジニアによる[Quantum CSSの説明](https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/
)を読んでみたStyle Sharing Cacheへの自分なりの理解です。

- メリット
 - メモリ利用量を抑えられ、描画速度が向上する。
- 実装方法
 - 事前にCSSセレクタを収集し適用ルールのパターンを作成する。
 - ノード単位で同じルールが適用されていればキャッシュ出来る。
- 存在するリスク
 - ノードの構造によってはルールが複雑化しキャッシュ効率が下がる。

所々に疑似要素 (Pseudo-elements) の影響があると説明されており、具体的な実装方法が気になりました。

なので[rustで書かれたソースコード](https://dxr.mozilla.org/mozilla-central/source/servo/components/style/sharing/mod.rs)を読んでみた所の理解です。

- Style Sharing Cacheを実現するには以下4つの制約を満たす必要がある。
  - 同じスタイルを継承している事。
  - 同じルールで適用されている事。
  - インラインCSSとプレゼンテーションヒントが同じ事。
  - 疑似要素のルールが同じ事。
- 疑似要素によって制約を満たすための方法が複雑になっている。
- 具体的にどのパターンだと適用されないのか？がちょっと不明。

Style Sharing Cacheで行われている事が明確になり理解が進みました。

とりあえず、要素への適用ルールがシンプルなCSS（疑似要素を含む）にするとキャッシュが有効になるので描画速度が速くなるはずです。

## レイアウトのCSSトリガーになっているCSSプロパティをCSS Triggers.comで確認する

ウェブページの描画は「レイアウト > ペイント > 合成」の関係が成り立ちます。

レイアウトのトリガーになるCSSプロパティを変更すると、レイアウトからの再描画（ドキュメント全体に影響する）が発生し描画速度が遅くなります。

レイアウトのCSSトリガーとなっていないCSSプロパティを優先して利用するようにすると、レイアウトからの再描画を回避できます。

え、そんな事を言われても、一体どれがトリガーになっているの？となりますよね。

CSSトリガーとなっているCSSプロパティの一覧は[CSS Triggers.com](https://csstriggers.com/)で確認できます。各レンダリングエンジン別で確認できるので便利です。

1つ例を挙げると、比較的利用頻度の高い`background-image`はBlinkとGeckoでは「ペイント > 合成」のためレイアウト変更が発生しませんが、WebkitとEdgeHTMLでは「レイアウト > ペイント > 合成」となりレイアウトの変更が発生します。

このレイアウトの問題は[大きく複雑なレイアウトとレイアウト スラッシングの回避](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing?hl=ja)で詳細に説明されています。

## floatよりもflexboxを利用する

floatと比べflexboxはレイアウトの処理時間を短くできます。

そのため昔から利用されているfloatを利用したレイアウト調整よりも、新しいブラウザで実用化され始めた[flexbox](https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Flexbox)を利用した方がページのレンダリングが速いです。

flexboxを使うデメリットとしては（挙動が安定しつつありますが）予期せぬ現象への対処に時間が取られる所でしょうか。

## CSS内でリソース読み込みを避ける（webfontのimportなど）

これは良く話題になるため意識している方も多いと思います。URL先の読み込みが優先されてパラレルに動作しなくなります。

```
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
```

この解決方法はCSS内で行っているリソースの読み込みをHTML上に移動する事です。

```
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans" />
```

さらに速くするにはbase64エンコーディングして埋め込んでしまいます。

```
@font-face {
  font-family: 'Open Sans';
  src:url("data:font/ttf;base64,AAEAAAASAQA[...]") format('truetype');
}
```

## まとめ

CSSの最適化はページ表示の高速化を行う中でも後回しにされる事が多いですよね。CSSを書き直すの大変ですし。

ただ動作速度もUI/UXに影響するので暇な時に見直してみると改善点が見つかるかも知れません。
KotlinでのArrayListのコピー

- 使用環境
  - AndroidSrudio3.0
  - Kotlin1.1


#コピーの違い


```Kotlin:example.kt
var numarray:ArrayList<Int> = arrayListOf(0)
var newarray:ArrayList<Int> = numarray
```
と書くと、newarrayを変更すると、numarrayも変わってしまう。
そこで、

```Kotlin:example.kt
var numarray:ArrayList<Int> = arrayListOf(0)
var newarray = ArrayList<Int>(numarray)
```

と書くと、それぞれが独立するのでnewarrayを変えてもnumarrayに影響はない。

以上
プレゼン初心者エンジニアが初めて会社の顔としてイベント登壇して技術プレゼンを成功させるためにした工夫

プレゼンに苦手意識のあるエンジニアの方、多いと思います。かくいう私もその一人で、プレゼン資料を作っては見せた人にボロボロに言われる、みたいなことを繰り返していました。

工夫を繰り返してほどほどのプレゼンができるようになったかな、という水準に至ったので、自社が共催するイベントに登壇してみました。その知見を共有しようと思います。

[「BtoB Tech Meetup! #1 @Sansan青山オフィス」](https://visasq.connpass.com/event/69590/)
[発表資料](https://www.slideshare.net/AitoShiroshita/b2b2c2)

発表状況は上記。今回の記事とは大して関係ないので貼るだけです。

## 今回書くこと

* スライド
* 構成（反省点）

## スライドについて

プレゼンスライド作成ソフトウェアは、

* Keynote
* PowerPoint
* Googleスライド

などがメジャーですが、プレゼン発表という文脈で初心者が利用するのであればKeynote一択だと言うのが個人的見解です。iCloudに登録すれば、Macを持ってなくても使えます。

### なぜKeynoteか？

Keynoteと他のソフトを比較した際に際立つのは、__Keynoteはプレゼンの作法を教えてくれる__と言う点です。簡単に言えばテンプレート通りに作ればそれっぽいプレゼン用スライドが作れると言うことです。Keynoteのテンプレートはプレゼンテーションに特化しており、プレゼンに限れば他を圧倒しています。

簡単に言えば、__パワポは機能多すぎて使いこなせない（´・ω・｀）__と言うことです。

### プレゼンのスライドと発表資料は別物

個人的に、プレゼン用スライドと資料は別物、と割り切っています。

資料として使えるレベルで書き込んでもプレゼン中には読めません。

今回は、資料として配る予定はなかったので、サクッと作りました。


### Readability counts.

「Keynoteで枠に収まるくらい」の文量がを心がけました。いいスライドが作れるのはKeynoteのおかげ。

![20171118Qiita.001.jpeg](https://qiita-image-store.s3.amazonaws.com/0/140543/f0a33cd5-b308-aa7d-45e3-95ca84fa6c1c.jpeg)

後述の等幅フォント　Source Han Code JPの場合、半角32文字が最大のようです。

### テンプレートのカスタマイズ項目

私はデザイナーじゃないのでテンプレートのカスタマイズは、基本的にしません……が一点だけ。

#### 日本語対応

Appleの作ったテンプレートは基本的に素晴らしいのですが、英字フォントが綺麗なテンプレートでも、なぜか日本語はヒラギノ角ゴかヒラギノ明朝だけになっていると言う問題点があります。かっこいい装飾のついた英字＋明朝体みたいなスライドは違和感だらけなので、 嫌だ。
![font.001.jpeg](https://qiita-image-store.s3.amazonaws.com/0/140543/2628a63a-e8d9-73aa-5836-0b89986676bd.jpeg)

デフォルトだと本当にこうなっています。

ここで私が使ったフォントは、Source Han Code JPです。　

![20171118Qiita.001.jpeg](https://qiita-image-store.s3.amazonaws.com/0/140543/233fa90e-7db6-6565-d910-7e69443f5500.jpeg)

このテーマがもともと持っていたイメージは失われましたが、フォント間の調和は取れました。（やはりテーマイメージからブレているのでこのテンプレートは使わない方がいい可能性はあります）。

Source Han Code JPは等幅フォントなので、エンジニアっぽさが出て良いですね。

![20171118Qiita.001.jpeg](https://qiita-image-store.s3.amazonaws.com/0/140543/5a773fe5-5f67-badd-3e2f-527e806119db.jpeg)

（一応）コードも書けます。（この書き方はやめた方が良いと思うけど）

### Keep it Simple, Stupid!

今回（先ほど紹介したイベント）の失敗として「ロゴの挿入」と「ガイドの挿入」があります。

![20171115_b2b_.001.jpeg](https://qiita-image-store.s3.amazonaws.com/0/140543/ce582b22-131f-9aef-3a62-ddacd616d8f9.jpeg)

これは今回利用したスライドですが、下の点（目次を表すガイド）と自社ロゴがはっきり言って邪魔でした。伝えたいことだけ伝えると言うシンプルな原則に立つのなら挿入すべきではありませんでした。

#### ロゴを載せなくて大丈夫？

スライドの関係ないところにロゴが書いてある必要はありません。むしろ、「弊社」と言っているところで社名を言う方がよっぽど効果的です。

* 「弊社では」 -> 「アイリッジでは」
* 「弊社サービスの」 -> 「popinfoの」

のように言い換えるだけで相当印象に残ります。

実際、プレゼン後の懇親会で「アイリッジさんのpopinfoでは」のように言われて、名前を覚えていただけました。

### コードとどう向き合うか

読めないコードは書かない。でもコードは書きたい。

こう言う状況ってすごく多いのですが、今回はコードを一行も載せませんでした。理由はシンプルで、スライドにコードを載せても読めないからです。

社内・プライベートのプレゼンでコードを使いたいときは、EditorやIDEを別に立ち上げてデモをしています。

* 実行した方がわかりやすい
* 会場の解像度に応じてサイズを変えやすい
* 書き換えて見せられる

などがその理由です。

## 反省点：構成について

わかりやすい構成と言う観点から言うとだいぶボロボロでした。難しい……。

基本的なやり方がいくつかあるようなので社内やプライベートで試してみます。

## まとめ

業務として技術プレゼンをすると言うのは、負担がかかる反面楽しくて、視野の広がる仕事でした。また機会があったらやってみたいと思っています。

私の拙い気づきですが、プレゼンに悩んでいる方の助けとなったら幸いです。
mecab surface 表層エラー？

備忘録。

gensimの動作確認を行うのに、どうやってやろうか探していたところ、yasunoriさんのサイトを参考に、試していました。
https://qiita.com/yasunori/items/31a23eb259482e4824e2
参考にさせていただきます。ありがとうございます。

参考にさせていただいたコードをjupyterに貼り付けて実効すると、途中まですんなり動きました。
ちょっと安心して、再び最初から実効してみると、次のエラーが。

```
UnicodeDecodeError: 'utf-8' codec can't decode byte 0x90 in position 0: invalid start byte
```

bash on windows環境なので、一応、shit-jsやutf-8などを疑い、現状を確認。

```py
$ python
Python 3.6.3 |Anaconda, Inc.| (default, Oct 13 2017, 12:02:49)
[GCC 7.2.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> import sys
>>> sys.getdefaultencoding()
'utf-8'
>>>
```


それとこの時点で僕がインストールしていたmecabのバージョンです。
最新バージョンのようです。

```py

~$ mecab --version
mecab of 0.996
```


いろいろ調べた結果
----------------
調べてみたところ、トラーフィールズさんのブログに次のようなことが書かれていました。
Mecab関係の問題のようでした。

https://www.trifields.jp/how-to-use-mecab-in-ubuntu-14-04-and-python-3-1196
(トライフィールズさんのブログより)
MeCabのバージョン0.996で、この方法によりPython3からMeCabのparseToNode関数を使うと、最初のsurface（表層形）が表示されないというバグが・・・

ブログに書かれていた修正方法で試してみると、

```py

import MeCab
mecab = MeCab.Tagger('mecabrc')
mecab.parse("")  # ここを追加しましたYYY


def tokenize(text):
    node = mecab.parseToNode(text)
    while node:
        if node.feature.split(',')[0] == '名詞':
            yield node.surface.lower()
        node = node.next


def get_words(contents):
    ret = []
    for k, content in contents.items():
        ret.append(get_words_main(content))
    return ret


def get_words_main(content):
    return [token for token in tokenize(content)]
```
なんとかうまくいくました(*''▽'')
herokuでrailsアプリを本番運用する

# herokuのプラン

## Free（無料プラン）

herokuは一応無料プランもあるが、30分間トラフィックがない場合自動的にシャットダウン（スリープ）してしまうため、本番環境としては使えない。基本的にはhobbyプランに入る。

## Hobby

* sleepしないで使える
* 独自ドメインを使える

# Dynoについて

Dynoとは、Herokuアプリケーションが実際に実行されるプラットフォームのことです。その実体は、Amazon EC2の巨大インスタンス上で動作する軽量Linuxコンテナです。ベースとなるOSはUbuntuであり、ユーザーの作成したアプリケーションはすべてDyno上で実行されます。大きな特徴として、Dynoのファイルシステムは揮発性であることが挙げられます。例えば、ブラウザからアップロードしたファイルをDynoのディスク上に保存しても、そのファイルはDynoがシャットダウンした際に失われます。

　Dynoは常にHerokuのDynoManagerによって監視されており、毎日1度は再起動されます。データを保存する際には必ずHeroku Postgresなどの外部ストレージを利用します。また、DynoはHerokuの課金のための単位でもあり、DynoのサイジングをどのようにするかはHerokuを運用する上で大きなポイントになります。

# SSH設定について

Herokuで公開したアプリケーションには、デフォルトで https://xxxxx.herokuapp.com/ というURLが割り当てられ、そこからアプリケーションにアクセスします。このURLは先頭が(httpでなく)httpsとなっていますが、これは説明は省略しますがざっくり言うと「安全な」通信が行なわれるということを意味します。しかし実際にサービスを運用するときには、このデフォルトのURLではなく独自に他サービスで取得したドメインを使うのが普通です。Herokuでは独自のドメインさえ持っていれば、どの料金プランでも無料でデフォルトのURLから独自のhttpで始まるURLに置き換えて公開することが可能ですが、SSLアドオンを利用することで、Hobby以上の有料プランであればhttpsで始まる独自URLも無料で設定することができます

# 定期実行はcronではなくHeroku Scheduler

[Heroku Scheduler](https://elements.heroku.com/addons/scheduler)

定期的に実行する処理は普通cronを使用することが多いと思うがherokuでは上記のアドオンがある。実行頻度は Daily/Hourly/Every 10min から選択することができる。

# railsの設定方法

## DBはpostgres

railsはpostgresがherokuはmysqlがデフォルトなのでaddonでpostgresを入れる。

https://elements.heroku.com/addons/heroku-postgresql

## そのままではheroku本番のDBの中身は見れない

本番のDBをみるためにはposticoで接続する。
[python] 標準ライブラリ`timeit`を用いて関数の処理時間を計測する

# やりたいこと
pythonプログラムで、
関数ごとでどの程度処理時間がかかっているかを知りたい

# 利用するモジュール
timeitという便利なモジュールがあるので試してみた

- [timeit](https://docs.python.org/2/library/timeit.html)

# コード例

```
#!/usr/bin/env python

import time
import timeit

def test_func(inputs, sleep_time=5):
    """
    This is a test function
    :param inputs:
    :param sleep_time:
    :return:
    """
    print("call func of test_func")
    print("inputs = %d" % inputs)
    print("sleep_time = %d" % sleep_time)
    time.sleep(sleep_time)

def main():
    """
    main
    :return: None
    """
    inputs = 10
    results = timeit.repeat("test_func(inputs, sleep_time)", repeat=5, number=1, setup="from __main__ import test_func;inputs,sleep_time=%d, 2" % inputs)

    print(results)

if __name__ == "__main__":
    main()
```

python2.7(.13)でもpython3(.6.2)でも上記のコードで動きました。
上記のように第一引数に実行したい関数およびその引数の変数を、
`timeit.repeat`は、`number`で指定された回数の実行時間を`repeat`回計測します。
上記の場合、`test_func`一回の実行時間を5回計測した時結果が
`results`に格納されます。

もし`number`を10に指定した場合は、10回の計測時間の合計を5つ分`results`に格納します。(`len(results)`は5になるが、`results[i]`は`test_func`を10回行った場合の時間になる）

上記を利用して簡単に`number`回の実行時間のサンプルを`repeat`個取得できるので、`max`, `min`, `average`などが出せる！
プログラムが遅い場合にボトルネックとなっている箇所を探すときなどに使えそう

# はまったポイント
最初、`timeit.repeat("test_func(inputs, sleep_time)", repeat=5, number=1, setup="from __main__ import test_func)`として実行すると、`inputs`なんてグローバル変数知らないぜってエラーが出ました。

上記で引用している公式サイトで、`setup`の部分で変数を定義しているので、それを参考にしたらうまいことできた！

`globals()`というのを引数に取れるのがpython3.5で追加されたみたいですが、
公式ドキュメント見てもいまいち効果がわからなかったが、とりあえず、
上記のコードで動くので、気にしないでおこう
ビットコインを仮想環境で動かしてみる(前編)

# はじめに
　近頃仮想通貨が盛り上がりを見せている。自分もbitflyerでウォレットを作って1万円だけ入れて遊んだり、google先生に聞いたり、https://minergate.com でお手軽マイニングをしているが、まだまだ技術的に分からない部分がある。理解を深めるために、ビットコインを自分の環境内のみで動かしたい。

　今回は手始めにVirtualBox+vagrantで仮想ノードを作り、その上でビットコインのマイニングプログラムを動かすところまでのメモを書いておく。

　この環境構築ができれば実際に動いているブロックチェーンに参加できるので、ビットコインをマイニングしたいという人もぜひ。 

　VirtualBoxとvagrantの関係が分からない人は「[ここ](https://qiita.com/CsFactoryitter/items/35977a5d18aa121bb24c)」を見ると理解し易いのでオススメ。

# インストール
## VirtualBox
「[ここ](https://www.virtualbox.org/wiki/Downloads)」からダウンロード&インストール
インストール後再起動推奨

## vagrant
「[ここ](https://downloads.vagrantup.com/)」からダウンロード&インストール

# 環境
```
$ system_profiler SPHardwareDataType
Hardware:

    Hardware Overview:

      Model Name: MacBook Pro
      Model Identifier: MacBookPro12,1
      Processor Name: Intel Core i7
      Processor Speed: 3.1 GHz
      Number of Processors: 1
      Total Number of Cores: 2
      L2 Cache (per Core): 256 KB
      L3 Cache: 4 MB
      Memory: 16 GB
....

$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.13.1
BuildVersion:	17B48

$ VBoxManage -v
5.1.30r118389

$ vagrant -v
Vagrant 2.0.0
```

# ディレクトリを作り、移動
```
$ mkdir bit_birtual
$ cd bit_birtual/
```
# vagrantを起動
「[これ](
https://qiita.com/MasayaMizuhara/items/791c2b713ac7d8c98123)」と「[これ](https://qiita.com/RyochanUedasan/items/b1ff13bc39913cb5b561)」を参考にvagrantの設定を行う

「[ここ](http://www.vagrantbox.es/)」から使用したいboxを選んでURLをコピペ
CentOS7.2だとスムーズにいけるので今回はCentOS7.2で

```
# vagrant box add [box名] [boxのURL]
$ vagrant box add centos7.2 https://github.com/CommanderK5/packer-centos-template/releases/download/0.7.2/vagrant-centos-7.2.box
$ vagrant init centos7.2
$ vagrant up
```
次回以降は`vagrant up`のみで良い

# 仮想環境にログイン
```
$ vagrant ssh #ローカル
[vagrant@localhost ~]$ #仮想環境
```

# ビットコインのサーバープログラムをインストール
「[ここ](http://bitcoin.clock-up.jp/contents/install/install-by-yum)」を参考にビットコインのプログラムを仮想環境の各ノードにインストール

`vagrant ssh` を実行したときに下のようにlocale関連のwarningが出る人はLC_ALLにCを入れておく

```
$ vagrant ssh
Last login: Sat Nov 18 06:19:56 2017 from 10.0.2.2
-bash: warning: setlocale: LC_CTYPE: cannot change locale (UTF-8): No such file or directory
[vagrant@localhost ~]$ export LC_ALL=C
```

各種ツールをインストール

```
[vagrant@localhost ~]$ sudo yum install yum-utils
[vagrant@localhost ~]$ sudo rpm -Uvh https://linux.ringingliberty.com/bitcoin/el7/x86_64/bitcoin-release-3-1.noarch.rpm
[vagrant@localhost ~]$ sudo yum-config-manager --enable rhel-7-server-optional-rpms
[vagrant@localhost ~]$ yum -y install bitcoin-server bitcoin-utils
```

# 使用コマンドの確認
```
[vagrant@localhost ~]$ bitcoind -version
Bitcoin Core Daemon version v0.15.1.0-g7b57bc998f3
Copyright (C) 2009-2017 The Bitcoin Core developers
....

[vagrant@localhost ~]$ bitcoin-cli -version
Bitcoin Core RPC client version v0.15.1.0-g7b57bc998f3
```

# おわりに
これでビットコインのマイニング環境は整った。実際に動いているブロックチェーンに参加することもできる。
次回は仮想マシンを複数立ててローカル環境でブロックチェーンを動かすところまでいきたい。
reactnativeダウングレードでビルド時にエラーになったときの対処

## 問題
reactnativeが0.5で不具合があったので0.47にダウングレードした。
その後、ビルドが動かなくなってしまった。

以下エラーが出た。
```
ld: library not found for -lRCTBlob
clang: error: linker command failed with exit code 1 (use -v to see invocation)
```

どうも、ビルド時に<アプリ名>.xcodeproj/project.pbxprojの中身が書き換えられていて、
RCTBlobのライブラリを持ってくるように言っているようだ。

RCTBlobはreact-native0.50.2には入っているが、0.47では存在しないので、「ライブラリが見つからない」と言うエラーになった。


## 解決
projectt.pbxprojを0.47仕様に戻そうにも、そもそも最初のinit時から0.50.2で生成したものなので、戻せない。
仕方なくreact-native init --version "0.47.0" としてプロジェクトを作り直した。

もっと良い解決方法はないものか。。。
Slackの表示言語を日本語に変更する手順

# 公式サイト
[言語設定を管理する – Slack](https://get.slack.help/hc/ja/articles/215058658-%E8%A8%80%E8%AA%9E%E8%A8%AD%E5%AE%9A%E3%82%92%E7%AE%A1%E7%90%86%E3%81%99%E3%82%8B)

# 1. 環境設定を開く

1-1. ページの左上に表示されているワークスペース名（会社名など）をクリックしてメニューを開く
1-2. メニューで**Preferenes**をクリックする

![slack-jp01.png](https://qiita-image-store.s3.amazonaws.com/0/141934/fe32971a-7fc6-c27d-e329-2e4ff53f9d47.png)

# 2. 表示言語で日本語を選択する

2-1. 左メニューで`Language & Region`をクリックする
2-2. `Language`プルダウンで**日本語**を選択する

![slack-jp05.png](https://qiita-image-store.s3.amazonaws.com/0/141934/553865fd-640f-09e5-b332-60144c30e83b.png)

2-3. `Change language to 日本語`ダイアログで**Change to 日本語**ボタンをクリックする

![slack-jp03.png](https://qiita-image-store.s3.amazonaws.com/0/141934/d558707a-1451-b997-58c9-36d77b3a83e0.png)

# 補足

![slack-jp04.png](https://qiita-image-store.s3.amazonaws.com/0/141934/c18ae628-ad31-bbaa-0227-a9dd7730921c.png)
LaravelでVue.js超入門


続き。
Laravelのデフォルトのpackage.jsonの中身にvueがいる。

```package.json
"devDependencies": {
    "axios": "^0.16.2",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^5.0.1",
    "jquery": "^3.1.1",
    "laravel-mix": "^1.0",
    "lodash": "^4.17.4",
    "vue": "^2.1.10"
}
```

```npm install```してみる。

うまくいった。

viewファイルをちょっといじる。
javascriptのソースコードを別のファイルに移動させる。

```resources/view/sample.blade.php
<!DOCTYPE HTML>
<html>

<head>
  <title>Vue Sample</title>
</head>

<body>
  <sample id="test"></sample>
  <example id="app"></example>
</body>

  <script src=" {{ mix('js/app.js') }} "></script>

</html>
```

mixヘルパを使うと```resources/assets/```配下をみる。よく知らない。
https://readouble.com/laravel/5.5/ja/helpers.html#method-mix

挙動を確かめるために以下のようにしてみる。
ここでvueのコンポーネントを読むらしい。ので追記。

```resources/assets/js/app.js
Vue.component('example', require('./components/Example.vue'));
Vue.component('sample', require('./components/Sample.vue'));

const app = new Vue({
    el: '#app'
});

const sample = new Vue({
    el: '#test'
})
```

読み込むvueファイルを作る。
templateタグ、divタグがないと動かなかったのでそういうものらしい。
(ちゃんとドキュメントを読みましょう)

```resources/assets/js/components/Sample.vue
<template>
  <div>
    this is test
  </div>
</template>
```

```npm run dev```してlocalhost:8000をみる。

Example.vueのコンポーネント(?)とSample.vueのコンポーネント(?)が表示された。
AppleScriptで画面を白黒・カラー反転表示する(メニューバーから実行可能)

~~High Sierra対応。~~
2018-12-04追記：Mojave対応版
![IMG_2509.jpg](https://qiita-image-store.s3.amazonaws.com/0/192970/db98c9d3-df21-52ac-a280-4f6e439d26b1.jpeg)

1. SystemUIServer.appによるコンピュータ制御を許可する。
2. システム環境設定を操作して画面を白黒反転させるスクリプトを作る。
3. 1.のスクリプトをメニューバーに登録する。

#1. SystemUIServer.appによるコンピュータ制御を許可する
スクリプトによって画面を操作するには，
システム環境設定 -> セキュリティとプライバシー -> プライバシー -> アクセシビリティ
で，「下のアプリケーションにコンピュータの制御を許可」にUIを操作するアプリケーションを追加し有効にしておく必要がある。
メニューバーに登録したスクリプトから制御するため，SystemUIServer.appを登録しておく。
※SystemUIServer.appの場所：/System/Library/CoreServices/SystemUIServer.app

#2. システム環境設定を操作して画面を白黒反転させるスクリプト
```AppleScript
tell application "System Preferences"
	activate
	set current pane to pane "com.apple.preference.universalaccess"
	tell current pane
		reveal anchor "Seeing_Display"
	end tell
end tell

tell application "System Events"
	repeat 50 times #ハングアップ対策で，最大繰り返し回数を設定
		try
			tell group 1 of window 1 of process "System Preferences"
				click checkbox "カラーを反転"
				click checkbox "グレイスケールを使用"
				click checkbox "コントラストを上げる"
				click checkbox "カラー以外で区別"
			end tell
			exit repeat
		on error errMsg
			log ("ERROR: " & errMsg)
			delay 0.1
		end try
	end repeat
end tell
```
2018-12-04追記：
High SierraからMojaveになった際に，System Preferencesのメニュー構成が変更されたのか，`window 1 of process "System Preferences"`ではチェックボックスを取得できず，`group1 of window 1 of process "System Preferences"`から取り出すように変更しました。
ついでに，画面遷移が間に合っていない場合にエラーで終了していたので，`repeat`と`delay`を使って画面遷移を待つように変更しました。（イベントリスナー的な設計にできればベターなのですが…）

#3. メニューバーへの登録
1. スクリプトエディタ.appの 環境設定 -> 一般 で「メニューバーニスクリプトメニューを表示」にチェック
2. メニューバーのスクリプトメニュー -> スクリプトフォルダを開く -> ユーザ・スクリプト・フォルダを開く で開かれるフォルダ（~/Library/Scripts/)に上記スクリプトを配置する。（※エイリアス可）
[Swift] loadNibNamedの"(not yet loaded)"エラーについて

## はじめに
鶏並みの記憶力の自分用備忘録です。
loadNibNamedの"(not yet loaded)"エラーの発生ケースの一例とその解決方法について。

## 前提
Xcode8.3.1

## 発生するエラー
Swiftでxibをコード上からロードしようとしたところ、下記エラーが発生することがある。

```
Terminating app due to uncaught exception 'NSInternalInconsistencyException', 
reason: 'Could not load NIB in bundle: 'NSBundle <**********************.bundle> 
(not yet loaded)' with name 'TestView''
```

## ケース1
### 発生状況
CocoaPodsで管理しているframeworkの中にxibを新規追加して、それを呼び出して使いたかった。

1. Pod側で管理しているframeworkにTestView.xibファイルを新規作成する
2. xibのFile's Ownerにクラスなどを紐づける
3. コード上にLoadNibNamed("TestView", owner: self, options:nil)を追記し、アプリを起動
4. 上記エラーが発生する

### 原因＆解決方法
pod install忘れ。
CocoaPodsで管理しているframeworkにxibを新規追加した後にpod installをしてなかったので、該当Nibないよってエラーが出るのは当りまえでした。


## ケース2
### 発生状況
1. Pod側で管理しているframeworkにTestView.xibファイルを新規作成する
2. xibのFile's Ownerにクラスなどを紐づける
3. pod installを叩き、新規追加したxibをインストール
4. コード上にLoadNibNamed("TestVie", owner: self, options:nil)を追記し、アプリを起動
5. 上記エラーが発生する

### 原因＆解決方法
ロードするxib名の指定ミス。"TestView"と指定するべきところを、"TestVie"としていた。


## 終わりに
しょうもないようなエラーですが、基本アホなので忘れた頃にぶち当たって時間食ったりします。
クラウドGPUインスタンス価格比較  (2017/11/14現在)


とある勉強会用に調べたのでメモ

機械学習向けではないのでGrid K2 K520 M60を除く  AWSは東京リージョン オンデマンドインスタンス GCPは台湾リージョン

|シリーズ || GPU | 時間単位コスト|
|:-----------------|-------|------------------:|------------------:|
|Microsoft| NCシリーズ| Tesla K80(x1 ~ x4)|¥110.57/h ~  ¥486.54/h
|Microsoft| NC_v2シリーズ| Tesla P100(x1 ~ x4)|¥110.57/h ~  ¥486.49/h
|Microsoft| NDシリーズ| Tesla P40(x1 ~ x4)|¥110.57/h ~  ¥486.49/h
|IBM|| Tesla K80 (x2) |$5.30/h
|AWS| P2シリーズ| Tesla K80 (x1 ~ x16)|\$1.542/h ~  $24.672/h
|AWS| P3シリーズ|Tesla V100 (x1 ~ x8)|\$5.243/h ~  $41.944/h
|GCP||K80  (P100提供予定)|$0.770/h
|さくらインターネット| さくらの専用サーバ 高火力シリーズ|  Tesla P40 x1 |¥349/h(税抜) 
|さくらインターネット| さくらの専用サーバ 高火力シリーズ|  Tesla P100 x1 |¥357/h(税抜)
Vuejs超入門

npm?webpack?よくわからないので本当に最初から。

とりあえずLaravelのプロジェクトを作成。

```
$ composer create-project --prefer-dist laravel/laravel sample
```

サンプルの画面を作成して、ビルドインサーバ起動

```
$ cd sample
$ touch resources/view/sample.blade.php
$ php artisan serve
```

中身をちょっといじる。

```resources/view/sample.blade.php
<!DOCTYPE HTML>
<html>

<head>
  <script src="https://unpkg.com/vue"></script>
</head>

<body>
  <div id="app">
    @{{ message }}
  </div>
</body>

  <script type="text/javascript">
    var app = new Vue({
      el: '#app',
      data: {
        message: 'this is test'
      }
    })
  </script>

</html>

```

ルーティングを変更

```routes/web.php
Route::get('/{any}', function() {
    return view('sample');
})->where('any', '.*');
```

localhost:8000にアクセス。
this is testと表示されれば
Dockerを導入　Wordpress環境を構築

話題の仮想化環境であるdockerに触れてみました。
導入にあたり、助けていただいた勉強会＆qiita
・[2時間でマスターしちゃう Docker ECSハンズオン](https://tec.connpass.com/event/71605/)
・[docker-composeでwordpress環境をサクッと構築する](https://qiita.com/mom0tomo/items/7e611ac829863d4c5c82)

## 目的
・dockerを用いてwordpress環境を作ることを目的とする。
・今後導入しやすいように「docker-compose」を作成する。
・dockerのコマンドについて覚える

##インストール
公式のサイトからインストールする
●Mac用、windows用それぞれある。
※windowsの場合はwindows10proで無ければならない。（toolboxなどをさらにインストールしなければならずやや面倒くさいみたいです）
https://docs.docker.com
インストール後に正しく動いているのかの確認は下記のコマンドを実行

```ruby:command
docker version
```

##docker-compose作成

```ruby:docker-compose.yml
version: "2"
services:
  wordpress:
    image: wordpress:latest
    volumes:
      - "$PWD:/var/www/html"
      - "$PWD/.docker/backup:/tmp/backup"
      - "$PWD/.docker/log:/tmp/log"
    ports:
      - "8080:80"
    depends_on:
      - db
    environment:
      WORDPRESS_DB_HOST: "db:3306"
    env_file: .env

  db:
    image: mysql:5.7
    volumes:
      - "db-data:/var/lib/mysql"
    env_file: .env

volumes:
  db-data:
```

```ruby:.env
WORDPRESS_DB_NAME=wordpress
WORDPRESS_DB_USER=admin
WORDPRESS_DB_PASSWORD=pass

MYSQL_RANDOM_ROOT_PASSWORD=yes
MYSQL_DATABASE=wordpress
MYSQL_USER=admin
MYSQL_PASSWORD=pass
```
[githubはこちら](https://github.com/na-horita/docker/tree/master/docker_wordpress)

##buildする

####buildするディレクトリ（test3）を作成し、移動する。

```ruby:command
mkdir test3
cd test3
```

ビルド実行

```ruby:command
docker-compose up -d
```

##local環境で画面確認
http://localhost:8080
wordpressのインストール画面が見えましたら、成功です。

###各種コマンドについて
####イメージの確認
```ruby:command
docker images
```
####稼働中のコンテナ一覧
```ruby:command
docker ps
```
####稼働中・稼働停止も含めたコンテナ一覧
```ruby:command
docker ps -a
```
####稼働コンテナの停止
```ruby:command
docker stop [コンテナ名]
```
####停止コンテナの稼働
```ruby:command
docker start [コンテナ名]
```
####コンテナの削除
```ruby:command
docker rm [コンテナ名]
```
####イメージの削除
```ruby:command
docker rmi [イメージ名]
```
##苦戦したところ、解らなかったところ

###①8000:80が動かない
docker-compose.ymlファイルを作成するにあたり、wordpressのport番号を「- "8000:80"」にしたかったが、(port is already allocated) と出て起動させてくれなかった。練習でdockerを立ち上げていてすでに8000番を使っていたのだろうか、そうであれば8000番ポートを解除してちゃんと使えるようにしたいのだが、よくわからずでした。
しょうがなく「- "8080:80"」にしたら起動した。

###②$PWDとは

「volume」がホスト側でファイルを操作するための設定であると聞きました。今回のdocker-compose.ymlファイルには下記のように記述しました。

```docker-compose.yml
    volumes:
      - "$PWD:/var/www/html"
      - "$PWD/.docker/backup:/tmp/backup"
      - "$PWD/.docker/log:/tmp/log"
```
・【$PWD】これはどのような意味なのか（省略文字なのか）？。
（/test3/という階層にwpファイル群が展開していったのでなんとなく意味はわかるが）
・下の二つの隠しフャイル展開しているものはどのように使えば良いのか（不要ならば消したい）

###③ホスト側のdbの場所がわからない
dbでの「volume」でも下記のような設定をしました。

```docker-compose.yml
    volumes:
      - "db-data:/var/lib/mysql"
```
この設定をしたがファイル群を見ても「db-data」という階層が見当たらない、どこにdb情報が格納されているのかがわからない。
local環境で開発後にサーバーにデプロイするために、db情報がどこにあるかわからないのは致命的である。
MySQL Clusterをsystemdから立ち上げる

MySQL Clusterのtarパッケージを展開するとmydqldのinitスクリプトはsupport_files配下に存在するものの、ndbdやndb_mgmdの起動ファイルは見あたらず、なおかつsystemdのファイルでは無いので作ってみた。

良いのか悪いのか判断つきにくいところだが、ndb_mgmdとndbd(ここではマルチスレッドのndbmtd)は、プロセスが落ちてしまった場合に自動的に復旧するようにしてある。(意図的に停止したい場合には*systemctl stop xxx*)
mysqldについてはmysqld_safeが復旧させてくれる(mysqld_safeを1から書き直す元気が無かった)ので、これをそのまま利用している。

起動順序としては *ndb_mgmd → ndbd → mysqld* 。
NodeIdは各サーバで割り当てたNodeIdに合わせること。

``` /etc/my.cnf
[ndb_mgmd]
# daemonとして起動しない(Type=simpleとするため)
nodaemon = true

[ndbd]
# daemonとして起動しない(Type=simpleとするため)
nodaemon = true
```

```/etc/systemd/system/ndb_mgmd.service
[Unit]
Description=NDB Manager
After=syslog.target
After=network.target

[Service]
Type=simple
ExecStart=/usr/local/mysql/bin/ndb_mgmd
Restart=always
User=mysql

[Install]
WantedBy=multi-user.target
```
```/etc/systemd/system/ndbd.service
[Unit]
Description=NDB MultiThread Daemon
After=ndb_mgmd.service

[Service]
Type=simple
ExecStart=/usr/local/mysql/bin/ndbmtd
Restart=always
User=mysql

[Install]
WantedBy=multi-user.target
```
```/etc/systemd/system/mysqld.service
[Unit]
Description=MySQL Server
After=ndbd.service

[Service]
Type=simple
ExecStart=/usr/local/mysql/bin/mysqld
PIDFile=/var/lib/mysql/mysql.pid
User=mysql
Restart=always

[Install]
WantedBy=multi-user.target
```

####修正(2018/3/29)
ndb_mgmdおよびndbdをdaemon化させないようにし、Type=simpleとした。
これによりPID管理などから解放。
####修正(2018/4/5)
mysqldをmysqld_safeでなくsystemdから制御するようにした。
(Restart=alwaysでプロセスダウン時には自動的に復旧)
【GAE/Go】GAE/GoのローカルサーバのDataStoreのデータを削除するコマンドのメモ

# GAE/GoのローカルサーバのDataStoreのデータを削除するコマンドのメモ

完全に自分用のメモ。

## 削除用コマンド

以下のコマンドで、GAE/GoのローカルサーバのDataStoreのキャッシュされたデータを削除することができる。

```
dev_appserver.py --clear_datastore=yes [app.yamlのあるディレクトリへのpath]
```

## 参考にさせていただいたサイト
[The Go Development Server  |  App Engine standard environment for Go  |  Google Cloud Platform](https://cloud.google.com/appengine/docs/standard/go/tools/using-local-server#using_the_local_datastore)
CentOS 7.2でdnfを使う方法

# dnfとは何か？
dnfとはyumに代わる次世代のパッケージマネージャ。

# 背景
CentOS 7.2ではdnfがインストールされていないためインストールを行う必要がある。

# インストール方法
以下のコマンドでインストールを行った。

```
wget http://springdale.math.ias.edu/data/puias/unsupported/7/x86_64/dnf-conf-0.6.4-2.sdl7.noarch.rpm
wget http://springdale.math.ias.edu/data/puias/unsupported/7/x86_64/dnf-0.6.4-2.sdl7.noarch.rpm
wget http://springdale.math.ias.edu/data/puias/unsupported/7/x86_64/python-dnf-0.6.4-2.sdl7.noarch.rpm
yum install python-dnf-0.6.4-2.sdl7.noarch.rpm dnf-0.6.4-2.sdl7.noarch.rpm dnf-conf-0.6.4-2.sdl7.noarch.rpm
rm -f python-dnf-0.6.4-2.sdl7.noarch.rpm
rm -f dnf-0.6.4-2.sdl7.noarch.rpm
rm -f dnf-conf-0.6.4-2.sdl7.noarch.rpm
```

# 動作確認

httpdのインストールを行う。
```
dnf -y install httpd
```

# 感想
dnfはyumと同じ感覚で使うことができた。コマンドのオプション等もyumを踏襲しているので迷うことはないと思われる。
yumからdnfへの移行はほぼ決定事項らしいので積極的に使っていきたい。

# 余談
yumからdnfへ移行する理由として、yumがメンテナンスできない状態になっていることや、Pythonが2から3へ移行していることがあげられているが、yumの開発者「セス・ヴィダル」の死亡も大きな要因だったらしい。しかもその死因はひき逃げだったとか…。
iOSアプリエンジニアがAndroid特有のサポートライブラリに困惑した

iOSアプリ専門でやっていたが、Androidアプリも少しずつやることになりAndroidアプリの勉強をしている。
AndroidにはiOSにはないサポートライブラリというものがある。
まぁそのうち調べようと思って、コピペとかしていたが、何回もエラーが出ていい感じに動かない。
なので調べてみたよというメモです。

## そもそもサポートライブラリとは？
Androidは標準のAndroid SDKとは別にアプリ開発をサポートするSupport Libraryというものがある。
つまりAndroidアプリは `Android SDK + Support Library (+ サードパーティライブラリ)` を使ってアプリを作るという感じ。

サポートライブラリはざっくり分けると
- エンハンス系・・・RecyclerViewやマテリアルデザインライブラリなどイケてるアプリ開発をサポート
- バックポート系・・・APIレベルが低いものでもいい感じにその新しい機能が使えるようにサポート

の2種類があるっぽい。

## よくわからなかった部分
サポートライブラリのどの数字が何に対応するのか😓

## たとえば
```
compile "com.android.support:appcompat-v7:22.2.1"
compile "com.android.support:recyclerview-v7:25.1.1"
compile "com.android.support:support-v4:22.2.0"
```

の
`-v7:22.2.1'`
`-v7:25.1.1'`
`-v4:22.2.0"`
の部分。

# で、調べてみたら
[Androidの公式ドキュメント](https://developer.android.com/topic/libraries/support-library/features.html?hl=ja)


> v4 Support Library
> このライブラリは、Android 2.3（API レベル 9）以上で使用するよう設計されています。

や

> v7 Support Library
> ライブラリには、Android 2.3（API レベル 9）以上で使用するよう設計されているものがいくつかあります

`v4やv7でもAPIレベル9以上で使用されるように設計されている` とか書いてある。
ネットであさると、`-v◯の部分はサポートする最小APIレベル` と書いてあるが、今は特にそういうわけではなさそう🤔
確かにv13 Support Libraryとかは `-v◯の部分がサポートする最小APIレベル` だが。 

[追記]
http://vividcode.hatenablog.com/entry/android-app/android-support-library
↑にあるように昔は`-v◯の部分がサポートする最小APIレベル` だったっぽいです。

## 複数のサポートライブラリを使うときのバージョンは？
> アプリに v14 Preference Support library と v17 Leanback library の両方を追加する場合は、最低 SDK バージョンを 17 以上にしてください。

複数のサポートライブラリを使う場合のAPI Levelは高いほうに合わせる。

## 結論
ポイントは

- Androidは標準のAndroid SDKとは別にアプリ開発をサポートするSupport Libraryというものがある
- `-v◯` の部分はサポートライブラリ自体のバージョンではない。
- `-v◯` の部分はあまり気にしなくても良さそう。そういう名前のライブラリと思っても？
- サポートライブラリ自体のバージョンは `:◯.◯.◯` の部分
- サポートライブラリは頻繁に更新があるため、すべてのサポートライブラリは以下のように一元管理しておくほうが良さそう
(別のサードパーティライブラリはもちろん別のバージョンで管理する)

```
supportPackageVersion = 24.1.0

dependencies {

    compile "com.android.support:appcompat-v7:${supportPackageVersion}"
    compile "com.android.support:cardview-v7:${supportPackageVersion}"
    compile "com.android.support:recyclerview-v7:${supportPackageVersion}"
    compile "com.android.support:support-v4:${supportPackageVersion}"


    compile 'com.jakewharton:butterknife:7.0.0'
}
```
RedPen v1.10 の新機能（表記ゆれ対応とエラーレベルの指定）

このたびRedPenの新バージョン[v1.10](https://github.com/redpen-cc/redpen/releases/tag/redpen-1.10.0)をリリースしました。

本稿はRedPen　v1.10が新たに提供する機能（表記ゆれ対応とエラーレベルの設定）について紹介します。

## 表記ゆれへの対応

今までカタカナ単語の表記ゆれを検知する機能は提供していたのですが、カタカナ以外には対応できていませんでした。この問題に対応するため、本リリースで`JapaneseExpressionVariation`が追加されました。この機能は単語の表記ゆれに対応する機能の一つでカタカナ以外の単語も処理できます。

本機能は同一の発音をする単語ペアをエラーとして出力します。たとえば同一文書中にエクセルとExcelという単語が両方存在する場合、どちらかが表記ゆれがある可能性があるためエラーを出力します。

たとえば、以下の内容をもつ文書があったとします。

```
このエクセルはあのExcelとは違うのです。

```

すると、`JapaneseExpressionVariation`は以下のエラーを出力します。


```
excel.txt:1: ValidationInfo[JapaneseExpressionVariation], Found possible Japanese word variations for "エクセル", "Excel(名詞)" at (L1,9) at line: このエクセルはあのExcelとは違うのです。
```

## エラーレベルを指定

RedPen が提供する機能の多くは問題のない箇所であってもエラーとして出力してしまうことがあります。エラーが出力されないようにするため、今までは ``@suppress`` アノテーションを使うか機能を設定ファイルから削除するしかありませんでした。

たとえば前節で紹介した`JapaneseExpressionVariation`は強力な機能です。しかし残念ながら、出力されるエラーには間違いが含まれてしまいます。このような間違いが含まれてしまう機能は通常のチェックでは利用せず、リリース前など最終確認のときだけオンにして確認するとよいでしょう。

そこで本リリースからエラーレベルを指定できるようになりました。エラーレベルは`Error`、`Warn`、`Info`を指定できます。エラーレベルを指定するには設定ファイルの各`validator`ブロックに機能のレベル（`level`）を指定します。`level`プロパティを指定しなかった場合のエラーレベルは`Error`です。

```
<redpen-conf lang="ja">
    <validators>
        <validator name="JapaneseExpressionVariation" level="Info"/>
        <validator name="DoubledConjunctiveParticleGa" />
    </validators>
</redpen-conf>
```

エラーレベルを指定した上でCLIの ``--threshold`` オプションを指定するとRedPenの出力を調整できます。たとえば以下のようにエラーレベルのしきい値を指定しない場合には、上記の設定で ``info`` レベルが指定されている ``JapaneseExpressionVariation``からエラーは出力されません。

```
$redpen -c conf/redpen-conf-ja.xml input.tt
...
[2017-11-14 22:44:14.409][INFO ] cc.redpen.validator.JavaScriptValidator - JavaScript validators directory: js
```

逆にしきい値に``info``を指定して実行すると、設定ファイルで info レベルが指定されている機能からのエラーも出力されます。

```
$redpen -t info -c conf/redpen-conf-ja.xml input.txt
...
excel.txt:1: ValidationInfo[JapaneseExpressionVariation], Found possible Japanese word variations for "エクセル", "Excel(名詞)" at (L1,9) at line: このエクセルはあのExcelとは違うのです。

```

## まとめ

RedPen v1.10 で導入された `JapaneseExpressionVariation` について紹介しました。この機能は強力ですが、問題ないところもエラーとして出力してしまう恐れがあります。この機能のようにエラーを含みやすい機能のエラーレベルを `info` にしておいて、必要なときだけ出力するとよいでしょう。 


## Appendix: 表記ゆれの実装方法

[こちらのスライド](https://speakerdeck.com/takahiko03/ri-ben-yu-falsebiao-ji-yure-jie-jue-fang-fa-falsejian-tao-toshi-zhuang)に表記ゆれを検知する機能の実装方法についてまとめました。お使いの自然言語用のLinterで実装してみると便利かもしれません。
(初心者向け) JavaScript の for 文4種

#概要

JavaScript では最初、C 言語風の for 文のみがサポートされていましたが、その後、for in 文が追加され、ECMAScript6 仕様で for of 文が追加され、現在では３種の for 文が利用できます。

**※ for each...in 文というのもありますが、現在、使用は推奨されていません。**


#構文

##C 言語風の for 文

昔ながらの for 文です。構文は C 言語と同じです。ただし、初期化部分で変数を初期化するとき、var を使うより let を使ったほうが、ブロック内でその変数がローカルになるので安全です。

```JavaScript
var data = ['Apple', 'Google', 'Microsoft', 'Oracle'];
var hash = { "A": 0x41, "B": 0x42, "C": 0x43 };

/* for 文 */
console.info("-- C 言語風の for 文 --");
for (let i = 0; i < data.length; i++) {
  console.log(data[i]);
}
```

##for in 文

Java や C# にも for in 文がありますが、見た目が似ているだけで JavaScript のfor in 文とは動作が違います。

JavaScript の for in 文ですが、コレクションの要素そのものを一つづつ列挙するのではなく、インデックスやキーを列挙します。

```JavaScript
var data = ['Apple', 'Google', 'Microsoft', 'Oracle'];
var hash = { "A": 0x41, "B": 0x42, "C": 0x43 };

// 配列の場合
for (let i in data) {
  console.log(data[i]);
}

// オブジェクトでも利用可能
for (let k in hash) {
  console.log(hash[k]);
}
```

##for of 文

Java や C# の for in 文に相当するのが、この構文です。使い方もほぼ同じです。

オブジェクトを連想配列として使う場合、イテレータが実装されてないため、for of 文は使えません。そのような場合は、オブジェクトでなく ECMAScript6 でえ追加された map などを使用します。

```JavaScript
var data = ['Apple', 'Google', 'Microsoft', 'Oracle'];
var hash = { "A": 0x41, "B": 0x42, "C": 0x43 };

// 配列はイテレータが実装されているので利用できる。
console.info("-- ECMAScript6 の for 文 --");
for (let x of data) {
  console.log(x);
}

// この構文はエラーとなる。(オブジェクトにはイテレータが実装されてないため)
/*
for (let v of hash) {
  console.log(v);
}
*/
```

終わり
DeepLearningBox pyenv環境構築で困ったこと

すでにpythonとTensorflowはインストール済みのようです。

ssh接続ではなくて、実機で動かす予定なので、少し困った点をまとめます。

[pyenbvのインストール](https://qiita.com/Kodaira_/items/feadfef9add468e3a85b)
ここに書いてある通りにやったらターミナル起動する度にsource ~/.bash_profileしなくてはいけなかった。
やったことは、まずgit cloneする
`$ git clone https://github.com/yyuu/pyenv.git ~/.pyenv`

その後、**~/.bash_profile**ではなくて、**~/.bashrc**の一番下にvimを使って追加する

```bash
$ export PYENV_ROOT="$HOME/.pyenv"
$ export PATH="$PYENV_ROOT/bin:$PATH"
$ eval "$(pyenv init -)"
```

その後は
`$pyenv install -l `
で自分が欲しいパッケージをインストールする

tensorflowをインストールするときも似たようなことしないといけない
**~/.bashrc**の一番下にvimを使って追加
`export LD_LIBRARY_PATH=/usr/local/cuda/lib64/`
[openFramewoks] ofxOpenCv で映像から顔検出

ついにここまで来ました....顔検知。目指せ「笑顔の検知」
ofxOpenCvを使ってカメラ映像から顔の検知をします





 
#opencvでは物体検出にカスケード分類器というものを使うそうです。
「たくさんの物体の特徴が定義されて、」
機械学習された学習データのことを、カスケード分類器といいます。
今回はofxCvHaarFinder finder ;
finder.setup("haarcascade_frontalface_default.xml");
がそれにあたります。

 

#実装方法
of_v0.9.8_osx_release/examples/addons/opencvHaarFinderExample/bin/data/haarcascade_frontalface_default.xmlのカスケード分類器ファイルをプロジェクトのbin/data内にコピーしときます。

![スクリーンショット 2017-11-18 13.17.19.png](https://qiita-image-store.s3.amazonaws.com/0/76843/5f97e75e-ae3b-83ca-135d-08f7014213f8.png)

↓
ofApp.hで
    // カメラ入力画像、グレースケール映像を定義
    ofxCvColorImage colorImg;
    ofxCvGrayscaleImage grayImg;
↓
ofApp.cppで
colorImg、grayImg
それぞれを処理するメモリ領域を確保   allocate(割り当てる)
↓
// 顔検出 検分器の読み込み
finder.setup("haarcascade_frontalface_default.xml");
↓
// グレースケールかrオブジェクトを検知
 finder.findHaarObjects(grayImg, 10, 10);
↓

正面顔を検知してdrawで四角形を描画。


こちらをトリビュートしてコード記述
http://www.tkd55.net/?p=532


#コード


```cpp:ofApp.h

#pragma once

#include "ofMain.h"
#include "ofxOpenCv.h"

class ofApp : public ofBaseApp{

	public:
		void setup();
		void update();
		void draw();

		void keyPressed(int key);
		void keyReleased(int key);
		void mouseMoved(int x, int y );
		void mouseDragged(int x, int y, int button);
		void mousePressed(int x, int y, int button);
		void mouseReleased(int x, int y, int button);
		void mouseEntered(int x, int y);
		void mouseExited(int x, int y);
		void windowResized(int w, int h);
		void dragEvent(ofDragInfo dragInfo);
		void gotMessage(ofMessage msg);
    
    // カメラ
    ofVideoGrabber cam;
    
    // カメラ入力画像
    ofxCvColorImage colorImg;
    // カメラ入力グレースケールの画像
    ofxCvGrayscaleImage grayImg;
    
    // サイズ定義
    const int W =  640;
    const int H = 480;
    
    // 顔検出器
    ofxCvHaarFinder finder;
		
};

```

```cpp:ofApp.cpp

#include "ofApp.h"

//--------------------------------------------------------------
void ofApp::setup(){
    
    // 背景を黒に
    ofBackground(0, 0, 0);
    // カメラからの取り込み
    cam.initGrabber(W, H);
    // それぞれを処理するメモリ領域を確保   allocate(割り当てる)
    colorImg.allocate(W, H);
    grayImg.allocate(W, H);
    
    // 顔検出 検分器の読み込み;
    finder.setup("haarcascade_frontalface_default.xml");

}

//--------------------------------------------------------------
void ofApp::update(){
    
    // カメラの更新
    cam.update();
    
    // 一個一個のピクセルデータをカラーイメージにほりこんでる
    colorImg.setFromPixels(cam.getPixels().getData(), W, H);
    
    // グレースケールイメージにカラーデータを入れる
    grayImg = colorImg;
    
    // グレースケールかrオブジェクトを検知
    finder.findHaarObjects(grayImg);

}

//--------------------------------------------------------------
void ofApp::draw(){
    
    // 映像出力
    ofSetColor(255,255,255);
    colorImg.draw(0, 0, W, H);
    
    // 検出した顔を黄色の四角で覆う
    for(int i = 0; i < finder.blobs.size(); i++) {
        
        // 検出した顔を黄色の四角で覆う
        ofNoFill();
        ofSetLineWidth(5);
        ofSetColor(255,255,0);
        
        // 正面顔を検知認識
        ofRectangle faceBox = finder.blobs[i].boundingRect;
        
        // 四角形を描画
        ofDrawRectangle(faceBox.x, faceBox.y, faceBox.width, faceBox.height);
    }
    

}

```
macOS でシステム用ディレクトリ下にディレクトリを作る

こんにちは。
macOS [^1] で、System Integrity Protection (SIP) を無効にすると [^2]、システム用ディレクトリ下にディレクトリを作れるようですね。

無効であることを確認

```console
$ csrutil status 
System Integrity Protection status: disabled.
```

homebrew 用にディレクトリを作る

```console
$ sudo mkdir -p /usr/local
```

Adobe Illustrator 用にディレクトリを作る [^3]

```console
$ sudo mkdir -p /System/Library/Java/Support/Deploy.bundle
$ sudo mkdir -p /System/Library/Java/JavaVirtualMachines/1.6.0.jdk
```

### パッチ作業
システム用ディレクトリ下にパッチを適用する際も、System Integrity Protection を無効する必要があるようです。

* [open-uri のパスワード付きプロクシ情報の環境変数利用](https://qiita.com/kkdd/items/bc27032d083a8e2cbc5f)

-----------------

[^1]: OS X 10.11 以降、System Integrity Protection (SIP) が導入されました
[^2]: [SIP(System Integrity Protection)の無効化、有効化](https://qiita.com/deg84/items/2897d012e3a4c1fdb93a)
[^3]: [OS X 10.11/El CapitanでAdobe Illustrator CS6を最新Java SE 8で動かす](https://qiita.com/munepi/items/3d90c02279b1d1b8a2b5)
環境整理 anaconda 再インストール

備忘録。

gensimでエラーが出る。
現時点で、原因もわからない。

原因を探そうとしても、今まで環境構築を含め、その場その場での対応だったため、体系的に理解できていない。
環境がごちゃごちゃしてきのかも。

そろそろ整理しなくてはといった感じです。

まずは、整理用のメモとして、anaconda関係を。
振り返れるように、インストールの手順と、コマンドからまとめ。
エラーが発生したら、その都度整理するつもりで。

バックアップ
---------------------
まず、念のため、今まで作成したjupyter notebookのファイルをバックアップ。
たぶん一括でバックアップなど、良い方法がありそうだが、方法がわからないので、１つずつ、ダウンロードしてバックアップ。

jupyter notebook起動。
対象のファイルを開く。
「File→Download as→notebook(.ipynd)」でローカルにダウンロード。


Gitのインストール
---------------------
```
sudo apt install git
```

gccのインストール
---------------------
```
sudo apt install gcc
```

pyenvの再インストール
---------------------
まず、アンインストール

```
rm -rf $(pyenv root)
```

再インストール

```
git clone https://github.com/yyuu/pyenv ~/.pyenv
```

anacondaの再インストール
---------------------
まず、アンインストール。

```
conda install anaconda-clean
```
```
anaconda-clean
```


そして、再インストール。
インストール可能なanacondaのバージョン確認。

```
pyenv install --list
```

リストに出てきたバージョンのanaconda3-5.0.1をインストール。

```
pyenv install anaconda3-5.0.1
```

インストールされたか確認。

```
pyenv versions
```

anacondaのバージョンを「system」でデフォルトのanacondaから、「anaconda3-5.0.1」へ切り替え。

```
pyenv global anaconda-3-5.0.1
```

バージョンの指定が正しくされているか確認。

```
pyenv versions
```

指定したバージョンで再起動。

```
pyenv rehash
```
最後に、最新版に更新。

```
conda update conda
```

```
conda update anaconda
```




作業中に利用したbashのコマンド集
---------------------
```
id
```
```
pwd
```
```
df
```
```
ls -la
```
怠惰なFizzBuzzが面白かったので自分も怠惰なFizzBuzz書いてみた

怠惰なFizzBuzzが面白かったので ~~パクリました~~ 真似して書いてみました。
https://qiita.com/QUANON/items/c77c22b910651b54fe24

```rb
numbers = 1.step
fizzes = [nil, nil, "Fizz"].cycle
buzzes = [nil, nil, nil, nil, "Buzz"].cycle

numbers
  .lazy
  .zip(fizzes, buzzes)
  .map { |n, *yells| yells.any? ? yells.join : n }
  .take(30)
  .each(&method(:puts))
```

```stdout
1
2
Fizz
4
Buzz
Fizz
7
8
Fizz
Buzz
11
Fizz
13
14
FizzBuzz
16
17
Fizz
19
Buzz
Fizz
22
23
Fizz
Buzz
26
Fizz
28
29
FizzBuzz
```
Eclipseの文字とかアイコンがちっちゃい

注: 解決してません→解決したから落ち着いたら追記します。CSSをいじれば良いっぽいですね。→ [追記しました](https://qiita.com/shirohanada/items/3d844ce64c35706bfc86)

#問題
今までろくにIDEを使ったことがなかったんですが真面目に使えるようになろうと思って昨日Eclipseを入れたんです。

が...

文字ちっちゃ！( ﾟдﾟ)　
アイコンも、まあこっちはまだ許せるけどちっちゃ！( ﾟдﾟ)

どこのことを言ってるかというと...
<img width="1392" alt="スクリーンショット 2017-11-18 11.24.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/147926/a4d2b177-45ed-b476-30c8-b0a84c8a3aee.png">

このPackage ExplorerとOutlineの中の文字。
アイコンは他のとこも。

各ツールバーのタグ名とか、コード部分の文字サイズはちゃんと変えられます。

でまあ調べて調べてまだ調べ途中ですがいくつか他の方がやってる解決法を試して...

直らない(^ω^;;)

調べた方法が間違ってるとかではなく問題の部分以外の文字が大きくなってくんですよ。
おかげさまで問題の部分以外は大分読みやすくなりました...

#試したことと推察
文字に関しては試した方法はこちら↓
1. Eclipseの設定　AppearanceのFontのとこから変える。→問題の部分以外は変えられる。
2. Contents/MacOS/eclipse.iniの 
　-Dorg.eclipse.swt.internal.carbon.smallFontsを削除
→そもそも私のダウンロードしたパッケージのMacOs以下にはeclipse.iniがない...(・・?
で、他のとこにあるeclipse.iniをいじっておいたけどどこに対して効果があったのかはその後１でEclipseの設定も変えたから不明。でも問題の部分は解決しない。


で、問題のPackage Explore と Outline部分ですがなんかシステム設定された文字サイズ使ってるんですかね？
となるとシステム設定の方を変えるかちなみにアイコンに至っては変えられないので諦めるか...
あと、
1. Tinker Toolを入れる
2. Eclipse起動時にシステムフォントを変える設定を書いておく。
は試してないんですけど1はTinker Toolっていうのが他の機能もついてきてこれ便利らしいんですが、内容的に入れたくなかった、という理由。
2はまあ単にちょっとやる気が出なかったんですよね(^^;
昨日もう夜遅かったし...(^^;
それに起動時にシステムフォント変えたら起動中他のアプリケーションの文字も変わるんでは...?
それはやだなあ...

#今の所の結論
とりあえず我慢...いや作業効率的に我慢したくない部分ですが...
ちなみにさっきの2、「システムフォントを変える方法」と他のアプリケーションの挙動も変わってしまうという点では大差ないですが一つ文字やらアイコンやらを間違いなくでっかくする方法があります。
それは...システムの解像度の変更
Before
<img width="1392" alt="スクリーンショット 2017-11-18 11.45.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/147926/6c96bc73-4239-5d53-894a-1881f1395c34.png">
After
<img width="1108" alt="スクリーンショット 2017-11-18 11.45.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/147926/fb96d453-f1ca-70d7-e07e-eba55820224e.png">

ただこれ必然的に他のアプリケーションは見にくくなっちゃうんですよね...(**)
とりあえずしばらくどうしても見にくかったらこれで行きます...
上で試した方法以外で何か良い方法ありましたらぜひご教授ください。。。
では。
Google Home (Actions on Google) めも_01：申請にあたってのTIPS（リジェクトされやすいポイントをまとめました。）

# Google Home (Actions on Google) めも_01：申請にあたってのTIPS
申請にあたってのTIPSメモです。 リジェクトされやすいポイントをまとめました。

# Actionの名称と呼び方について
リジェクト時に適切なPronunciationを教えてはくれますが、開発に影響する部分なのでやり方を覚えましょう。

## Display Name
表示用の名称

## Pronunciation
認識用の名称。Display Nameと同じ読み方の言葉で、Google Assistantが日本語で認識した言葉にする必要がある。

## 実際の名前のつけかた

①Display Nameを考える
→例：「ロボトリビア」
②Google Assistantに、「Pronunciation＋Trigger Phrase」（例：「ろぼとりびあとはなす」）と話しかける
→この時点で、他の人のActionが起動したらアウト
③GoogleHomeアプリを開いて、左メニューの「マイアクティビティ」でログをみる
→「ロボ トリビアと話す」になっている
④Pronuciationに、「ロボ トリビア」と設定
「ロボトリビア」と「ロボ トリビア」という、スペース一個の違いですが、これをしないとリジェクトされます。

## 上記でうまくいかないパターン

上記ではうまくいかないパターンが存在します。「忍者の秘密」という名前にしようとすると・・・

例１：「忍者の秘密と話す」
例２：「忍者の秘密と話したい」
例３：「忍者のひみつにつないで」

Trigger Phraseによって、Pronunciationの漢字認識が変化してしまいます。
この場合は、Display Nameを変更する必要があります。

## 申請後に上手くいかなくなるパターン

申請後に、Pronunciationの漢字認識が変化するケースがレアですがあります。

①申請時の漢字認識
→「ロボ トリビア」

②申請後、ある日突然こうなった
→「robot リビア」

この場合、アクションの起動ができなくなります。
Google Assistantによる音声認識は機械学習により決定されるため、変化する可能性があるとのこと

この場合、Pronunciationの設定を変更して再申請する必要があります。
（ちなみに、このケースは、数日後に「ロボ トリビア」に戻りました。最申請しなくてよかった・・・。）

# Privacy policy
プライバシーポリシーについては、シンプルなものでOKです。
現時点では、SSL対応の必要はありません。

例：
http://labo.tonosamart.com/policy

ただし、サブドメインやURLが他のアプリ名になっていると、
ユーザが混乱する可能性があるためリジェクトになります。

複数のアプリを申請する場合は注意してください。

だめな例：（ロボトリビア以外のActioｎの申請に、このURLを使うとリジェクト）
http://labo.tonosamart.com/robotrivia

自分は独自ドメインの既存ページにおいていますが、
個人であればGoogle Docsで作ったりするのもスマートでいいと思います。

ちなみに、プライバシーポリシーはココに表示されます
https://assistant.google.com/services/a/id/21e542b68b97ada9

# カテゴリについて

申請したカテゴリが間違っていると、リジェクトになります。
リジェクト時に適切なカテゴリを教えてくれるので、それなら勝手に変えて申請通してくれればいいのにって思う。

以下の２個でまよったら「Education & Reference」の方が採用確率高いきがします。
（スキルによるので一概には言えませんが参考に）

「Games and fun」（ゲームやダジャレなど）
「Education & Reference」（本や、教育、教育用ゲームなど）

# その他、開発中に分かったことめも

## 日本語認識の英単語について

英単語を話しかけた場合に、英語として認識する時があります。

例：「サッカー」
→「サッカー」
「グーグルホーム」
→「google home」

ただし、話しかけた日本語に対して自動的に英語に翻訳するといったことは、ないそうです。
例：「あずき」
→「red bean」にはならない

じゃあ、「ロボトリビア」→「robot リビア」は何なの？っていう話になりますが、現在は再現しないので謎です。

## 話しかける内容について

現在、日本語版では、action invocation phrase に対応してない模様。
ワンショットでアプリに話しかけられないみたいです。

![explicit-invocation-grammar.png](https://qiita-image-store.s3.amazonaws.com/0/40994/1ee52d51-98cc-409f-d5ae-136a2fb1bc0b.png)
https://developers.google.com/actions/discovery/explicit より引用

このページは、日本語での解説も書いてないし仕様が謎です。

## 設定画面に出るActionの登録方法について
### Q
たとえば、ニュースのActionを作った場合、NHKニュースのように設定画面に表示させたり、
「おはよう」と話しかけた時に、自作のニュースを読んでほしいと思います。
その場合、どういう設定をすればいいのでしょうか？
### A
~~「頂きましたお問い合わせ内容は関連部署との連携の上、調査を進めております。~~
~~そのため恐れ入りますが、必ず返信いたしますので今しばらくお待ちいただきますようお願い申し上げます。」~~
専用のお問い合わせフォームができました。（11/22追記）

# まとめ
申請にあたってのTIPS（リジェクトされやすいポイント）をまとめてみました！

途中アプリ名とか書いてるけど、Google公式からのメールもそうなってるからしょうがない！
vagrant + virtual box + ubuntu 16.04 + docker の構成で、Dockerfile を作った時 RUN npm install でビルドが失敗することへの対症療法

## 対症療法

```
vagrant reload
```

或いは windowsの再起動

## 環境

* windows10
* vagrant1.9.7
* virtualbox5.1.26
* ubuntu-16.04
* Docker version 17.09.0-ce, build afdb6d4
* docker-compose version 1.17.1, build 6d101fb

## 考察

`RUN npm i` 以外でも、 `RUN yarn`, `RUN curl ` や `RUN wget`のエラーでも、
同様の対処で解決することがある。
virtual boxのネットワークがおかしくなって、接続の不具合が起きているのかなと思っている。

きちんとした原因は分かっていないので、どなたか教えてくださると幸い。

## 或いは...

開発環境のメモリが足りずにbuild失敗していたこともあった。
これは、以下のようにかいていたのを

```docker
RUN npm i typescript tslint babel ...
```

以下のように書き換えることで解決。

```docker
RUN npm i typescript
RUN npm i tslint
RUN npm i babel
...
``` 

レイヤが増えるのでファイルサイズは増えるけれど、自分の場合は公開用じゃなくて開発用なので問題なし。
むしろ、どこで失敗していたかわかりやすくなって一つ一つ書いたほうがメリットが大きかった。
MATLAB > API > Delaunay | Voronoi 試してみた

```txt:動作環境
GeForce GTX 1070 (8GB)
ASRock Z170M Pro4S [Intel Z170chipset]
Ubuntu 16.04 LTS desktop amd64
TensorFlow v1.2.1
cuDNN v5.1 for Linux
CUDA v8.0
Python 3.5.2
IPython 6.0.0 -- An enhanced Interactive Python.
gcc (Ubuntu 5.4.0-6ubuntu1~16.04.4) 5.4.0 20160609
GNU bash, version 4.3.48(1)-release (x86_64-pc-linux-gnu)
scipy v0.19.1
geopandas v0.3.0
MATLAB R2017b (Home Edition)
```

### Delaunay

Delaunay()を試してみる。

https://jp.mathworks.com/help/matlab/ref/delaunay.html

```matlab
>> load seamount
>> tri = delaunay(x,y);
>> trisurf(tri,x,y,z);
```

![qiita.png](https://qiita-image-store.s3.amazonaws.com/0/32870/54e54da2-e636-6137-953e-81adcc02cb52.png)

これはドキュメント通り。

### Voronoi

Delaunayのdual graphであるVoronoi diagramを取得できるか。

https://jp.mathworks.com/help/matlab/ref/voronoi.html

```matlab
>> load seamount
>> tri = delaunay(x,y);
>> vrn = voronoi(x,y,z,tri);
エラー: triangulation
入力の三角形分割が無効です。データは、numtriangles 行 3 列または numtetrahedra 行 4 列の形式でなければなりませ
ん。

エラー: voronoi (line 119)
tr = triangulation(tri,x,y);
```

三次元を扱えないのだろうか。

二次元で試してみる。

```matlab
>> load seamount
>> tri = delaunay(x,y);
>> vrn = voronoi(x,y,tri);
```

voronoi()を実行するとFigureが表示された。

![qiita.png](https://qiita-image-store.s3.amazonaws.com/0/32870/e9a49643-ca85-f0ee-71e6-0380c9d65579.png)
Spotlightにアプリケーションが引っかからなくなるのを修正する方法

# はじめに
macのspotlightって便利ですよね。インストールしたアプリケーションを開くときなどによく使います。ただなぜか最近急にアプリケーションに引っかからなくなるときがあります。  
その修正方法のメモ書きです。  
※ 細かいこと調査してないので、何か起こった際は自己責任でお願いします。  

# 方法
```
# turn indexing off for the whole drive
sudo mdutil -i off /
# turn indexing on again
sudo mdutil -i on /
# reindex 
sudo mdutil -E /
```

これやったらいけました。

# 参考にした記事
- [Spotlight does not find the Mac app when I search](https://discussions.agilebits.com/discussion/77526/spotlight-does-not-find-the-mac-app-when-i-search)
初めてのArduino(Lチカまで)

# 必要なもの

+ Arduino本体
+ USBケーブル(Arduino側がType-Bなので注意)
+ [Arduino IDE](https://www.arduino.cc/en/main/software)
    + 2017/11/18日現在、バージョンは1.8.5

# 環境

項目|値
---|---
OS|MacOS Siera
Arduino|Uno Rev3

# Arduino IDEのインストール

[ダウンロードページ](https://www.arduino.cc/en/main/software)で以下の箇所から自分の環境に合ったインストーラをダウンロードしてインストールする。

![スクリーンショット 2017-11-18 10.23.28.png](https://qiita-image-store.s3.amazonaws.com/0/172314/b1ee645e-4334-2df4-4157-b2d8e0bf8b24.png)

# ArduinoとPCの接続

このような形で接続する。

![arduino.jpg](https://qiita-image-store.s3.amazonaws.com/0/172314/ea8d223a-768c-e30f-603a-ae4801874aeb.jpeg)

# Arduino IDEのセットアップ

<img width="1188" alt="スクリーンショット 2017-11-18 10.21.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/172314/51a7063e-6508-dd80-c715-4542b33ef193.png">

`ツール => シリアルポート`からArduinoが接続されているポートを選択。

# コード記述

1秒ごとに13番ピンの電圧レベルを切り替える。

```.c
int led = 13;

void setup() {
  // put your setup code here, to run once:
  pinMode(led, OUTPUT);
}

void loop() {
  // put your main code here, to run repeatedly:
  digitalWrite(led, HIGH);
  delay(1000);
  digitalWrite(led, LOW);
  delay(1000);
}
```

# コード検証 + 書き込み

<img width="501" alt="スクリーンショット 2017-11-18 10.33.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/172314/e458abcb-9c77-60f5-bbd1-684d0d88582c.png">

左上のチェックマークをクリックするとコードの検証を行うことができ、
右矢印のマークをクリックするとArduinoに書き込みを行うことができる。

# LEDを13番に接続

一秒ごとにLEDが点滅するようになる。
なお、LEDには向きがあるので注意。
長い足の方を13番ピンに差す。

![led.jpg](https://qiita-image-store.s3.amazonaws.com/0/172314/13144108-b2f3-d40d-19e6-409556ce48ea.jpeg)
UI > 失敗 > 口頭で詳細を説明しないといけない

### 状況

以下のようなものを見た。

- スーパーに設置されている装置
- 鍵がささったまま
- 装置の傍に人はいない
- 装置は一般客が通る通路に置かれている
- スーパーに来る人には一定の割合で「親切な」人がいる

「鍵がささってますよ。大丈夫ですか？」という質問が離れたところにいる店員に行く(N回)。

### 明示的でない事柄

店員に声をかけたところ、以下のことだと分かった。

- 装置の特定処理中には鍵を「ぬけない」仕組みになっている
    - 処理中に限り、鍵を盗難される心配はない

### 失敗と思う点

- 鍵が見える状況にある
- 鍵の仕組み(特定動作中に着脱できない)が明示的ではない
- 人が傍らにいない

### 失敗のUIの結果

- 装置利用者: 親切な人の声かけが発生する (N回)
- 装置販売者(営業): 仕組みの説明が必要 (M回)
- 装置販売者(設計): 営業への周知が必要 (L回)

一つのUIの失敗により、上記のように関係者の時間を奪い続ける。

### 改善案

装置そのものに対する改善点はないだろうか。

- 状況の明示化
    - 例: 「XXX動作中は鍵は抜けません」というステッカー
- 隠す
    - 例: 鍵が見えないように隠すデザインにする

### 備考

失敗のUIでは口頭での詳細説明を必要とする。それは関係者の時間を奪い続けるという認識を持つのがいいと思う。

口頭での詳細説明を必要とするUIにはどこかに問題がある、とも思われる。


### 引用

@ プログラマが知るべき97のこと by Kevlin Henney

コードは生涯サポートするつもりで書く by Yuriy Zubarev

> 「どういう理由でこういうコードを書いたのか説明してくれ」と言われても文句は言えないとしたら。そう考えれば、自然に、そんな問い合わせを受けないですむようにしたい、と思うでしょう。そのために、技術力を少しずつでも高めようとし、変数名やメソッド名の付け方にも注意するようになります。


他の本にも「同僚にコードのことで尋ねられたら、口頭で説明をするのではなく、同僚が分かるコードにしてチェックインして、”チェックインしたよ”というようにした方が良い」ということが記載されていた。

同意する。
Fabricを試そうとしたらcannot import name 'isMappingType'というエラーになった

Fabricは、Python3に対応していなかった。代わりに、Fabric3というパッケージを使うと解決した。


```bash:Python2環境下でFabricを使う
pip install fabric
```

```bash:Python3環境下でFabricを使う
pip install fabric3
```