OmniAICreator/Qiita-1.07M huggingface dataset:
Bluemix git リポジトリの使い方のメモ

Bluemix のリポジトリ https://git.ng.bluemix.net/ 利用のメモです。 プロジェクトを作成して、git コマンドでアクセスするには、基本的にはGitHubと同じ方法で良いのですが、少しハマった部分もあったので、忘れない様にメモを残しておきます。

### gitリポジトリへのログイン

https://git.ng.bluemix.net/ をアクセスすると、良く見かけるログイン画面が出来てきます。　ここからログインすることで、Bluemix git リポジトリへログインできます。
![スクリーンショット 2017-05-28 8.38.38.png](https://qiita-image-store.s3.amazonaws.com/0/42829/c8283d64-4c73-c06c-9595-421c4233b1a6.png)

この Git リポジトリへログインするユーザーIDとパスワードは、Bluemix のポータルにログインする時と同じです。


### プロジェクトの作成

ログイン直後の初期画面で、ヘッドライン部分の **+** をクリックする事で  GitHub の Create new repository と同等の操作になります。
![スクリーンショット 2017-05-28 8.41.33.png](https://qiita-image-store.s3.amazonaws.com/0/42829/9636d4b6-6cdb-fe9c-799c-406877c863af.png)

**+** をクリックすると、次の画面が表示されるので、プロジェクト名を入れて **Create Project** をクリックして先へ進みます。GitHub と異なり、Private で作成しても有料になりませんね。　
![スクリーンショット 2017-05-28 8.45.54.png](https://qiita-image-store.s3.amazonaws.com/0/42829/fe17b9ba-9583-f620-ff61-1ae3c8491f6e.png)

これで、GitHub の表記で Repository が新規に作成されました。 注意点として、Bluemix の Gitでは、ユーザーID / パスワード の認証を許可していません。https://git.ng.bluemix.net/ にログインした時に使ったパスワードを利用しても認証されません。 パスワードの設定画面は存在せず、認証は必ず SSH-KEY を利用する必要があります。
![スクリーンショット 2017-05-28 8.50.09.png](https://qiita-image-store.s3.amazonaws.com/0/42829/8180ddf6-6acf-7764-32d0-6a0d9ea8aeb2.png)


### SSH-KEYの登録
SSH-KEYの登録画面へ進むには、画面右端のユーザーのアイコン（写真）をクリックして、**Settings** に進みます。 
![スクリーンショット 2017-05-28 8.57.53.png](https://qiita-image-store.s3.amazonaws.com/0/42829/92d2b0cc-d138-5d1c-ea21-113f44ca670e.png)

次のメニューが表示される画面に遷移するので、SSH Keys をクリックして、公開鍵をコピペします。 gitコマンドでは、ssh の様に秘密鍵ファイルを -i で指定できない様ですから、ホームディレクトリの .ssh/id_rsa.pub を利用します。 

### リポジトリへの登録

既存のコード、または、GitHubからクローンしたリポジトリを Bluemix のリポジトリへ登録することを想定して書いていきます。
Git の グローバル設定です。 名前、メールアドレスは自己のものに変更して設定します。

~~~
$ git config --global user.name "Maho Takara"
$ git config --global user.email "takara9@gmail.com"
~~~
登録したいコードを置いたディレクトリへ移動して、以下のコマンドを順番に実行することで、Bluemix の Git リポジトリへ登録されます。

~~~
$ cd existing_folder
$ git init
$ git remote add origin git@git.ng.bluemix.net:takara9/myapp.git
$ git add .
$ git commit -m "1st commit"
$ git push -u origin master
~~~

### リポジトリからローカルの開発環境へのクローン
プライベートのプロジェクトでは、パスワードによる認証を許していないので、ssh を使って認証してクローンします。

~~~
imac:tmp maho$ pwd
/Users/maho/tmp
imac:tmp maho$ git clone git@git.ng.bluemix.net:takara9/myapp.git
Cloning into 'myapp'...
remote: Counting objects: 31, done.
remote: Compressing objects: 100% (28/28), done.
remote: Total 31 (delta 1), reused 0 (delta 0)
Receiving objects: 100% (31/31), 68.17 KiB | 0 bytes/s, done.
Resolving deltas: 100% (1/1), done.
~~~

以上です。
macのpython環境のせいでaws cliがインストールできないときは、pythonがバンドルされたインストーラーを使うと良い


こんにちはsekitakaです。

macOSのバージョンアップ後やローカルのpython環境で色々実験した後など、aws cliが動かなくなったり、再インストールできなくなったりすることがあります。

そんな時は依存関係コミコミのバンドルされたインストーラーを使うと、スムーズにインストールできることがあります。
インストール手順は次の通り。

```bash
curl "https://s3.amazonaws.com/aws-cli/awscli-bundle.zip" -o "awscli-bundle.zip"
unzip awscli.zip
sudo ./awscli-bundle/install -i /usr/local/aws -b /usr/local/bin/aws
```

参考
http://docs.aws.amazon.com/ja_jp/cli/latest/userguide/awscli-install-bundle.html
Cloud9のタブ設定

Cloud9のタブの初期値は半角スペース4文字です。
タブの設定は下記の方法で変更する事が可能です。

- 画面上部のメニューの「Cloud9」→「Preferences」を選択
- 「Project Settings」の「Soft Tabs」を変更

上記の作業をすることによって変更することが可能です。
SSLの無償化への途、真剣に探っています。ご協力ください。

お世話になっております。浦本＠エクスファです。

最近、グーグルもアップルもSSL使用を前提とした動きが強まっています。
特にアップルは、iOS10あたりから、必須となりつつ在り、開発屋としたら、SSL化を急ぐなど、様々な苦労を強いられています。

SSL化そのものは、少しクラックしにくく成るので、否定しませんが、なんやかや経費が嵩むのも難儀です。
そこで、 
##費用の掛かるSSL化を無償で実現できないか？あれこれ可能性を探っています。##
## **iOSでのSSL使用について、情報が在りましたら、宜しくお願いします。** ##

エクスファ
http://x-fer.info
浦本勝久
MacbookProのタッチバーがUSキーボードで役に立った件

MacbookPro、タッチバーは産廃？
私も購入から５秒でそう思っていました（ぁ

しかし、USキーボード利用の日本人には利用価値が少しだけありそうです。

##InputTypeの切り替えをF1に配置
USキーボードってCtrl＋スペースなどのショートカットから
入力言語モードの切り替えを行うのがスタンダードだと思います。

が、**これすると意外と便利だった**
今までのCtrl＋スペースのショートカットと共存も可能です。

<img width="500" alt="Screen Shot 2017-05-27 at 12.56.59 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/85214/49082007-fbc3-34b6-6f97-4f90f2fe2cb2.png">

ファンクションキー利用アプリではF1を押せばいける！

![IMG_4394.jpg](https://qiita-image-store.s3.amazonaws.com/0/85214/119ab465-2e25-9b92-227b-fa1ac23126ef.jpeg)

##タッチバーの左端にInputTypeの切り替えを配置

MacbookPro2016からは、タッチバーのカスタマイズができるようになってます。
（SystemPreference＞Keyboard＞Customize Control Strip...）

* Touch Bar Shows を Expanded Control Strip にしておく
* Customize Control StripからInputTypeの切り替えをタッチバー左端に配置

<img width="500" alt="Screen Shot 2017-05-27 at 1.11.29 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/85214/3f530a51-8811-83de-10b7-ce1a16c5fc6b.png">

<img width="851" alt="Screen Shot 2017-05-27 at 1.08.58 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/85214/fc82c984-2583-4a70-b9eb-0820c13e857a.png">

すると、こうなります

![IMG_4396.jpg](https://qiita-image-store.s3.amazonaws.com/0/85214/359a995f-dba4-7205-e205-e08981f4b00e.jpeg)

##どんなときもEscの隣がInputTypeの切り替えになる！
タッチバーの表示をファンクションキーにするか多機能キーにするかは
設定から**アプリ単位**で変更ができます。

しかしこの２段構えをすることで、
どんなアプリでもEscの隣をInputTypeの切り替えにすることができます！
いえーい👍

##Windowsの半角/全角キーを押している感覚
生粋のMac愛好家には無縁の話かもしれませんが、
JISキーボードって半角/全角キーが左上にありますよね。

あれ私は多用していたんですが、
そこを押す感覚がMac利用者になってからも残っていたのか
わりとすんなりとF1を押す癖をつけることができました。

##デメリット１
F1キーが潰れてしまうこと。
しかしF1キーってヘルプ表示くらい？なので
あまりデメリットとしては大きくない要素かなと思います。

##デメリット２
デメリットというかイライラポイント。
やはりタッチバー、押せたの？押せてないの？イラッがたまにあります。

##タッチバーは産廃なのか
意外とありがたいと思う場面はあったりします
押せていない感覚がまだなれませんが、
たま〜に、ほんとたま〜にですが、便利だと思うときがあります。
MacbookPro 2016 15inch と MacbookPro 2015 Early 13inch のビルド時間差

がっつり自分のノートで仕事をするようになり
MacbookProを買い換えました。主にビルド時間短縮のため。
Kotlinを使うとビルド時間が1.5倍くらいになっちゃったので。。

## 結果から
ビルド時間は**約半分になりました**
スペック差は以下の通り

|Model |CPU |Memory |
|:--|:--|:--|
|2015 Early 13inch|2.7GHz dual-core i5|8GB|
|2016 15inch|2.7GHz quad-core i7|16GB|

【体感平均時間】

|Build Type |Performance(old) |Performance(new) |
|:--|:--:|:--:|
|ソースを一部変えてビルド|2〜4分|1分弱|
|署名付きapkの作成 | 3〜5分| 1分強|

## ビルド環境
ソースの規模は、30万Stepくらいでしょうか。。（予想）
あと一部Kotlin使っているので、少しビルドが遅いです

## 感想
**エンジニアたるものCPUとメモリはケチるな！！**
数値以上に効率が上がること間違いなしです。

AndroidStudioのビルド時間もさながら、
他作業（SourceTreeのコミットソース選択や差分抽出など）も爆速になり
思わぬところでも効率が上がっているのを実感できました。

グレードアップするだけのコスト以上の価値はあるかと！

私は今回諸事情でlaptopにしましたが、
デスクトップであればさらにパフォーマンスアップが期待できるかと！
Googleフォントを自サーバー上で使う！

サイトのヘッダーに使用する為にGoogleフォントからかっこよさげな物を拝借したもののローカル環境ではフォントが反映されないので調べてみました。

## Google Fontsから使いたいフォントをダウンロード
まずGoogle Fontsから使いたいフォントを選びます。
セレクトするとダウンロードの矢印が出るので一旦自分のPCにダウンロード。
zip形式でダウンロードされるので展開。
使いたいサイトのディレクトリ内に適当なディレクトリを作成。
僕はわかりやすく**fonts**という名前にしました。
展開されたディレクトリ内にある２つのファイルをそのディレクトリに移動。

## CSS内にfont-face設定
使用したいサイトに使用しているCSSファイルに先程移動してきたフォントを使用できるように設定。
僕は**BlackOpsOne**というフォントをダウンロードしたのでこのような記述にしました。

```css:style.css
@font-face {
    font-family: BlackOpsOne;
    src: url('./fonts/BlackOpsOne-Regular.ttf') format("truetype");
}
```
これで使用準備は出来ました。
あとはそのフォントを使用したい箇所に**font-family**を設定すればOK。

```css:
    font-family: 'BlackOpsOne';
```
ESPr developer メモ

# FYI

現在は ESPr Developer は Rev.4 に切り替わっているだろうから大丈夫だろうけど、もし手元のものが該当したときの参考に：

- ESPr Developer Rev.4 : 回路図が未掲載だけど、大丈夫そう。
- ESPr Developer Rev.3 ハンダブリッジ無し : nodemcu 回路が働きにくい？感じなので、そういう時は、ボタン操作で書き込みモードにして書き込む。ピンヘッダ付き所有。
- ESPr Developer Rev.3 ハンダブリッジ付き : PIN16 を使ったスリープで長時間運用するのは避けたほうが良さそう。だいたい動くが、たまにおかしいというトラブルにあった（後述）。ピンヘッダ無し所有。
- ESPr Developer Rev.2 : 所有無し
- ESPr Developer 無印 : 問題ない。

# 事例
主に熱中症対策を目的として温湿度計を家に設置して、観測しています。

基本構成は WROOM-02 + BME280 で、無線越しに Influxdb (HTTP) で直接受ける構成です。

<img width="858" alt="err.png" src="https://qiita-image-store.s3.amazonaws.com/0/41883/b346582f-6a96-aa03-2e66-5bfb97f0ee99.png">

緑のラインは ESPr Developer 無印 + 環境センサシールド の構成です。オレンジは ESPr Developer Rev.3 ハンダブリッジ付き + 他社製品 BME280 （後述）です。オレンジは緑よりコンパクトなパッケージングにして、別の場所に追加設置する予定でした。環境センサシールドとの違いは、光量センサが無く I2C pull up 抵抗が 2.2K が 10K になっている程度です。

緑は 1 年以上運用していて、安定した計測ができています。問題はオレンジ側で、異常値が時々混じります。異常値の出方が不規則で、手でリセットボタンを繰り返し押しても異常値はでるし、PIN 16 を使った RST でも同様に異常値がでます。センサー側を取り換えても、全く同様の現象が発生しました。I2Cのレジスタ読み出しバイト列を見てみても、ビットが化けてるというレベルではなく、A/D 変換レベルでおかしそうな予感がします。ハンダブリッジ無し Rev.3 （ピンヘッダ付き）でブレッドボードで動作させると異常値はでません。ハンダブリッジでセンサ側にノイズが流れていそうな予感。

pull up 抵抗は時定数の違いなので、念のため `Wire.setClock` で I2C の標準スピードである 100k に指定してたりしましたが、あっても無くても関係なさそうな感じでした。

BME280 のドライバに [reset](https://github.com/SWITCHSCIENCE/BME280/blob/master/Arduino/libraries/SSCI_BME280/SSCI_BME280.h#L22) を追加して動作させると、異常値のでかたが若干緩和される印象。

ということで、ハンダブリッジ付きは避けたほうが良さそうです。ピンヘッダ無しのボードが欲しい場合は「シリアル無しピンヘッダ無しモデルを使う」か「ピンヘッダ付きからピンヘッダを取り除く」が良さそう。「Rev.4 ピンヘッダ無し」に切り替わっていたら、それでもいいかも。ブリッジハンダを除去するのは、難しくて、私はチップ抵抗を飛ばしてしまいました（廃棄）。


# Switch science BME280

これの使いどころは：

- raspberry pi で I2C 接続
- SPI 接続

かと思います。ESPr Developer で I2C 接続するには pull up 抵抗を追加しないといけなくて、チップ抵抗を載せる技術が必要になるか、あるいは、無骨にカーボン抵抗を配線に差し込む感じでしょうか。ワイヤーだけで「環境センサシールド」相当にできれば、ソースコード使いまわしでコンパクト版が作れたんだけど、それは叶わず。いっそ I2C pull up 抵抗の付いた別の製品でも簡単そうなので、私は今そうしています。
Waffleで始める、初めてのIoT＋初めてのAndroidアプリ（PC接続編）

[前回](http://qiita.com/mine820/items/46530519c3875d390925)までにサンプルアプリの動作までは確認できましたので、いよいよそれらをいじっていきたいと思います。

と、その前に、PC（Windows7）につなぐところでハマりましたので、そこだけピックアップして説明します。

# PCと接続する
WaffleとPCを接続します。
このとき、同封されていたUSB変換コネクタを使用します。
![DSC_0009.JPG](https://qiita-image-store.s3.amazonaws.com/0/130771/0f5a1cbb-51df-418a-e099-eb98c13d05a5.jpeg)

# 問題発生！
ここで通常であれば、勝手にデバイスドライバを探してきてインストールしてくれるのですが、何故か失敗します。
で、デバイスマネージャーで確認すると、Waffle（Arduino）であることすら認識していません。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/130771/57ec604a-1c23-9093-e255-19ab1ad55fa5.png)

# そして解決へ

そこで、表示されている『FT232R USB UART』のデバイスドライバを探してきます。
![image3.png](https://qiita-image-store.s3.amazonaws.com/0/130771/16296869-ced1-5240-16e3-bcca53a0c595.png)

インストール後、ちゃんとCOMポートとして認識されます。
![image2.png](https://qiita-image-store.s3.amazonaws.com/0/130771/ba75a0c2-8206-7c30-bdf9-eebe0aa71f3f.png)

※1回目のデバイスドライバのインストールでは、インストールのみしかせず、何故かデバイスに対してそのドライバを適用しません。
　ということで、もう一度、ドライバのインストールをします。

このポート番号は、Waffleアプリを開発するために使用する『Arduino IDE』の設定で必要になります。

このあたりはまた次回。
「paizaの10万登録ありがとうキャンペーン問題」での自分の提出コード(perl:146, C++:192)

[paizaの10万登録ありがとうスペシャルWキャンペーン](https://paiza.jp/poh/hundred_thousand)
で自分が使用したC++&perlのコードとその解説を載せる

# はじめに
この記事は以下の記事を読みながら書かれているので、
まず、以下の記事を読んでほしい。
[paizaの10万登録ありがとうキャンペーン問題で使用したアルゴリズムと提出コード](http://qiita.com/letranger/items/c8d023bd6f781dd3ba4c)

# 大まかな解法
C++, perlかかわらず、大まかには

1. 一度箱の大きさのパターンを全部計算・保存
  1. 配列的なものを用いて `Memo[x*y]=true` 的な処理でメモ
  2. 場合によっては何らかの方法速度向上のためのハックをする
2. メモから、ある品物の数以上の面積パターンを線形探索して、出力

という方法を用いた。

# 回答コード

## C++での回答
以下のようなコードを提出した。192文字だったらしい

```cpp
#include<iostream>
int*p,M['}}'],*L,*C=M-1,R['}}'],A;
int main(){
    for(;std::cin>>*++C;)
        for(L=M+2+*M,p=C;p>L;A<9999&&R[A]++)A=*C**p--;
    for(p=M+2;p<L;)for(A=*p;!R[A]||!printf("%d\n",A-*p++);++A);
}
```
###大まかな処理
入力を読み込みながら箱の面積のパターンを計算して、`R[計算して求めた面積]` を0以外の値に変更。
最後に　各品物の数からRを探索して0以外になったら出力

###解説

- `M['}}']`  なんか大きい配列。4byteで9999より大きな配列が作れる。
- `for(;std::cin>>*++C;)` 入力を終わりまで読み込んでいく。
- `L=M+2+*M` 長さに関する情報の始まりをメモる。 `*M`は問題文のMのこと
-  `p=C;p>L;` 
  - 今まで読み込んだ長さの部分を読み込む。後ろから前に読み込んでいくことになる。
  - `C>L`が満たすようになるまでは、つまり入力で品物の数情報を読み込んでる間はここでのメイン処理を行わない
-  `A<9999&&R[A]++` 
  - 掛け算でヒットした部分のフラグを（インクリメントして）0以外にする。
  - `R[A]=1`じゃないのは演算子の優先速度的な関係。
  - `A<9999`で大きすぎる値をはじいてるのはこれ入れるとなんか処理が早くなるから。キャッシュとか効いてるんじゃないですかね(適当)。9999ではじいていい理由は……なんか通ったから。通るんだからしゃーない
- `for(A=*p;!R[A]||!printf(` 
  - 各品物の値*pからスタートして`R[A] !=0`になるまでAをインクリメント
  - そして出力

## perlでの回答
以下のようなコードを提出した。146文字だったらしい。

```pl
$M=<>+0;$R=$0x999;@I=<>;
@L=sort{$a<=>$b}@I[$M..$#I];
for$i(@L){$t=$i*$_,$t>6x4?last:substr$R,$t,1,1for@L}
print index($R,1,$_)-$_,"\n"for@I[0..$M-1]
```

###大まかな処理
できるだけ大きな文字列を確保。面積の計算結果のメモ空間とする
入力を読み込み、各長さ*長さに対し `計算して求めた面積` 文字目を1に上書き
index関数で文字れるの何文字目に1があるかを求め、差をとり出力
###解説
- `<>+0` "M N"を数値に変換してMを取り出す
- `$R=$0x999` 計算結果のメモ用にできるだけ大きな文字列を作る。$0は(たぶん)"Main.pl"で7文字。x999なので7000文字くらい
- `$t>6x4` C++と大体同様に、なんかこれで計算打ち切ってもなんかうまくいくので打ち切って速度を稼ぐ
- `index($R,1,$_)-$_,` `$_文字目以降の1`=`$_以上の最小の存在する面積`を取得し、 `$_`と差をとって出力する


#反省点
## C++&perl共通
- 「まず面積を全部求め」という処理を疑えなかったこと
  - 「毎回探索したらO(M*N^2)になって遅くなるに決まってるだろ！」と考えていた

## C++


#perl
http://qiita.com/letranger/items/c8d023bd6f781dd3ba4c#perl を見ながら

- perlに対する知識が足りない
  - `$/`を改行記号として見れなかった
  - `0..<>`とかが思いつけなかった
  - シェルコマンドを使う方法は考えはしたが、なぜか`tail -n +$M *di*|sort -n`って書いてあり、遅いと書かれていた

# おまけ
## 一番最初に書いたコード
とりあえず問題を解くために書いたコード in c++
存在する面積のリストを作ってlower_boundで頑張る

```cpp
#include<algorithm>
#include<iostream>

int main(){
    // 入力
    int M,N;
    std::cin>>M>>N;
    std::vector<int> nums(M),lens(N);
    for(auto&x:nums)std::cin>>x;
    for(auto&x:lens)std::cin>>x;

    // 全パターン計算してメモ化
    std::vector<int> areas;
    for(auto&x:lens)
        for(auto&y:lens)
            areas.push_back(x*y);

    // 各品物の数に対し探索して出力
    std::sort(areas.begin(),areas.end());   //lowerboundのためにsort
    for(auto&x:nums)
        std::cout<< *std::lower_bound(areas.begin(),areas.end(),x)-x<<"\n";
}

```
怒りのラズパイ環境構築〜SSH編〜

## SSH接続できない
macかららずぱいにリモートログインする際、いつも通りに以下を実行。

`ssh pi@192.168.100.100`

しかし以下のエラーが出て失敗。

`ssh: connect to host 192.168.100.133 port 22: Connection refused`

ネットワーク研究室出身舐めんな全然わけわかんねえわ。Google先生おなしゃす。。。調べてみるとどうやらラズパイ側でsshが有効になっていないみたい。
#### ラズパイでSSHを有効にする
`sudo raspi-config`

を打つと設定画面のようなものが出てくるので『5 Interfacing Options』を選択し、SSHの欄があるので有効にする。（7番のAdvancedOptionじゃないから気をつけて、ネットには嘘が転がってることをここで痛感したよ）

いざもう一度挑戦。

```
▶ssh pi@192.168.100.133
The authenticity of host '192.168.100.133 (192.168.100.133)' can't be established.
ECDSA key fingerprint is SHA256:Zw5rQnbyocScmvQmGLTljgAYxrAwRFz51TNM51ALVEc.
Are you sure you want to continue connecting (yes/no)? yes
Warning: Permanently added '192.168.100.133' (ECDSA) to the list of known hosts.
pi@192.168.100.133's password:
```

おっ、いけた！
パスワードは知らんけどrootやろと思い入力するも、、、  
`Permission denied, please try again.`

ふざけんな、、、rootじゃなかったらpiか？pipiか？→弾かれます。

もう一度`sudo raspi-config`で設定を開き『1 Change User Password』をタップ！パスワード変更！！

```
▶ssh pi@192.168.100.133
pi@192.168.100.133's password:

The programs included with the Debian GNU/Linux system are free software;
the exact distribution terms for each program are described in the
individual files in /usr/share/doc/*/copyright.

Debian GNU/Linux comes with ABSOLUTELY NO WARRANTY, to the extent
permitted by applicable law.
Last login: Mon Apr 10 10:10:02 2017
pi@raspberrypi:~ $
```

GooD!!ログインできました！

## まとめ
らずぱい初起動したらとりあえず`sudo raspi-config`。
→パスワード変更（セキュリティ的にも変更は必須ですよね）
→SSHをenable（有効）に。
iOSのChromiumをビルドして実行してみた

## 結論
やっぱりBlinkじゃなかったです

## 期待してたこと
iOS向けChromiumがオープンソース化した → もしかしてBlinkなんじゃね？

## 使ったマシン
MacBook(Early 2015, 1.1GHz Intel CoreM)

## やったこと
[Checking out and building Chromium for iOS](https://chromium.googlesource.com/chromium/src/+/master/docs/ios/build_instructions.md)を見ながらビルドしました

`depot_tools`のインストール含め、4時間弱かかりました。
もっと高スペックなマシンならもう少し速くビルドができるのかも？


![pittanko_pta_2017-5月-28.jpg](https://qiita-image-store.s3.amazonaws.com/0/30152/4b826a9b-8302-c1c1-d8f4-6ff6aa00b4ee.jpeg)
PPTPでVPN接続する時にハマったメモ

#はじめに
巷ではPPTPは数少なくIPSecやL2のVPN（？）が主流らしいですが，今回は個人で使うアンド早急に自宅PCを外で使いたいということで，ルーター付属機能のPPTPでVPNを構築しました．

#環境
- VPNサーバ・・・IOデータのルーター
- PPTPクライアント・・・CentOS6.9（ノートPC）

#構築

##VPNサーバ側の設定

これはIOデータのマニュアルどおりにやって，手持ちのAndroid端末から接続確認を行いました．

##クライアントの設定

一通りのパッケージをインストール．

```
$ yum install pptp pptp-setup
```

pptp-setupを使ってVPN設定を作成．

```
$ pptpsetup --create "jitaku" --server "xxx.xxx.xxx.xxx" --username "hoge" --password "fuga" --encrypt
```

設定ファイルは，/etc/ppp/peers配下に作られます．
パスワードは，/etc/ppp/chap-secret内に保存されています．

余段ですが，パスワードに記号（$とか！とか）使う場合は，ダブルクォートで囲わないとおかしなことになります．（当然っちゃあ当然ですが）

##問題発生
いざ，接続！

```
$ pppd call "jitaku" updetach
pppd 2.4.5 started by tedpc, uid 0
Using interface ppp0
local  IP address 10.64.64.64
remote IP address 10.112.112.112
```

・・・
なんか知ってる出力と違う．

接続先VPNのローカルネットワークは192.168.0.0/24なので，これはおかしい．
ルータのVPN接続情報を見ると，接続なしになっているので，繋がっていないことは確実です．

## ログを見る
こんな感じ．

``` /etc/log/messages.
May 28 00:21:06 localhost pppd[4250]: pppd 2.4.5 started by tedpc, uid 0
May 28 00:21:06 localhost pppd[4250]: Using interface ppp0
May 28 00:21:06 localhost pppd[4250]: Connect: ppp0 <--> /dev/pts/3
May 28 00:21:06 localhost pptp[4251]: anon log[main:pptp.c:314]: The synchronous pptp option is NOT activated
May 28 00:21:07 localhost pptp[4261]: anon log[ctrlp_rep:pptp_ctrl.c:251]: Sent control packet type is 1 'Start-Control-Connection-Request'
May 28 00:21:07 localhost pptp[4261]: anon log[ctrlp_disp:pptp_ctrl.c:739]: Received Start Control Connection Reply
May 28 00:21:07 localhost pptp[4261]: anon log[ctrlp_disp:pptp_ctrl.c:773]: Client connection established.
May 28 00:21:08 localhost pptp[4261]: anon log[ctrlp_rep:pptp_ctrl.c:251]: Sent control packet type is 7 'Outgoing-Call-Request'
May 28 00:21:08 localhost pptp[4261]: anon log[ctrlp_disp:pptp_ctrl.c:858]: Received Outgoing Call Reply.
May 28 00:21:08 localhost pptp[4261]: anon log[ctrlp_disp:pptp_ctrl.c:897]: Outgoing call established (call ID 0, peer's call ID 9).
May 28 00:21:37 localhost pppd[4250]: LCP: timeout sending Config-Requests
May 28 00:21:37 localhost pppd[4250]: Connection terminated.
May 28 00:21:37 localhost pppd[4250]: Modem hangup
May 28 00:21:37 localhost pptp[4251]: anon warn[decaps_hdlc:pptp_gre.c:204]: short read (-1): Input/output error
May 28 00:21:37 localhost pptp[4251]: anon warn[decaps_hdlc:pptp_gre.c:216]: pppd may have shutdown, see pppd log
May 28 00:21:37 localhost pptp[4261]: anon log[callmgr_main:pptp_callmgr.c:234]: Closing connection (unhandled)
May 28 00:21:37 localhost pptp[4261]: anon log[ctrlp_rep:pptp_ctrl.c:251]: Sent control packet type is 12 'Call-Clear-Request'
May 28 00:21:37 localhost pptp[4261]: anon log[call_callback:pptp_callmgr.c:79]: Closing connection (call state)
May 28 00:21:37 localhost pppd[4250]: Exit.
```

## 原因
以下のサイトを参考にしました．
https://www.centos.org/forums/viewtopic.php?t=52407

モジュールのロードを行えばいいとのこと．

```
$ modprobe nf_conntrack_pptp
```

無事，ノートから接続できるようになりました．
Waffleで始める、初めてのIoT＋初めてのAndroidアプリ（動作確認編）

[前回の記事](http://qiita.com/mine820/items/e73c18dfa2fcdeaacbc8)で箱を開けましたので、今回は実際に動かしてみたいと思います。

手順等は、[こちら](https://dotstud.io/docs/waffle/)のdotstudio様のドキュメントを見ながら進めていきます。

# WaffleとGroveセンサーを接続
まずはWaffleとGroveセンサー（温湿度センサー）と接続します。
Waffleには出荷時に、コネクタのA0に接続したセンサーの値を転送するようなアプリが入れてありますので、GroveセンサーをA0コネクタにつなぎます。
（ケーブルは反対向きには刺さらないようになっています）
![DSC_0004.JPG](https://qiita-image-store.s3.amazonaws.com/0/130771/c4843c03-4443-75fa-fcec-cbcb20548eae.jpeg)
![DSC_0005.JPG](https://qiita-image-store.s3.amazonaws.com/0/130771/edbe7e8e-3ba8-c745-ce3a-29ced8043f09.jpeg)
![DSC_0008.JPG](https://qiita-image-store.s3.amazonaws.com/0/130771/e896ea6c-ebd5-8c8a-84e1-11e84b783fce.jpeg)

# Androidアプリのインストール
[サンプルのAndroidアプリ](https://play.google.com/store/apps/details?id=com.luckyblaze.waffle&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1)がGoogle Playにありますので、これをインストールします。
![Screenshot_20170528-001817.png](https://qiita-image-store.s3.amazonaws.com/0/130771/d3d24fe5-e19b-e6e9-383b-bdd35f183d30.png) ![Screenshot_20170528-001823.png](https://qiita-image-store.s3.amazonaws.com/0/130771/f09164eb-1031-74e7-c49d-a23d4522ce9f.png)

# WaffleとAndroidと接続
WaffleとAndroidをUSBコネクタ経由で接続します。
Waffleが薄っぺらいので、力の入れ具合が難しく、なかなか刺しづらいです。
（壊しそうですｗ）
![IMG_4842.JPG](https://qiita-image-store.s3.amazonaws.com/0/130771/dd7588a1-a616-eb23-6042-377bd23bf1af.jpeg)

# アプリの実行
インストールしたサンプルのAndroidアプリを起動します。
![Screenshot_20170528-002157.png](https://qiita-image-store.s3.amazonaws.com/0/130771/5988b82f-1e87-e976-f439-8d54becc8b33.png)

その後、右上の「DISCONNECTED」をタップして、接続状態にします。
表示されたダイアログでOKすると、JSON形式でデータ受信を開始します。
（アプリ起動1回目はうまく接続できず、一度切断してからもう一度接続するとつながります）
![Screenshot_20170528-002553.png](https://qiita-image-store.s3.amazonaws.com/0/130771/84b44250-95e3-a790-cbba-565d35c68ed9.png)

文字列やグラフで、受信した値が表示されます。
（この値は正しいのだろうか？）
![Screenshot_20170528-002746.png](https://qiita-image-store.s3.amazonaws.com/0/130771/17c41989-d5ce-9a99-cdbd-bcc3b397d5f0.png) ![Screenshot_20170528-002755.png](https://qiita-image-store.s3.amazonaws.com/0/130771/1ded58c7-454d-05d2-c77d-28706cd162ec.png)

★出荷時のWaffleアプリに問題があったようです。
　[こちら](https://www.facebook.com/groups/waffleiot/permalink/176706632858599/)を参考に修正してください。

ちなみにグラフ表示時は、Waffleから送られてきた0～1023の値を0～100にしているそうです。

また、サンプルのAndroidアプリ、および、Waffleアプリのソースコードは[こちら](https://github.com/hamatani63/Waffle)から取得できます。

# 次回
Waffle側やAndroid側のアプリをいじってみたいと思います。
Heroku 随笔


## Heroku

heroku 版本确认 : `heroku version`


**使用 heroku 命令登录，然后添加 SSH 密钥**

`heroku login`

`heroku keys:add`

**在 Heroku 中创建一个新应用**

`heroku create`


**部署应用的第一步是，使用 Git 把主分支推送到 Heroku 中:**

`git push heroku master`

**那个迁移命令前面加上 heroku run:+*

`heroku run rails db:migrate`




##Heroku Toolbelt で複数の Heroku アカウントを管理する
# 前提
- Heroku Toolbelt が事前にインストールしてあること
- 複数の Heroku アカウントそれぞれで利用する 公開鍵/秘密鍵 が生成してあること
- 複数の Heroku アカウントそれぞれで Heroku app が作成してあること

# heroku-accounts をインストール
**1 . 複数のアカウントを切り替え可能にするためのプラグインをインストールします**

```
$ heroku plugins:install heroku-accounts
```

# 複数の Heroku アカウントを登録
**1 . 管理するアカウントを追加します**

-  `work` という仮想アカウント名で Heroku のアカウントを追加する
  - メールアドレス/パスワードの入力をする

```
$ heroku accounts:add work
```

- `private` という仮想アカウント名で Heroku のアカウントを追加
  - メールアドレス/パスワードの入力をする

```
$ heroku accounts:add private
```

**2 . 追加したアカウントを確認します**

```
$ heroku accounts

* private
  work
```

**3 . `work` アカウントの設定を行います**

- `work` アカウントに切り替える

```
$ heroku accounts:set work
```

- `work` アカウントの公開鍵設定を追加する
  - `work` アカウントで利用する公開鍵を Heroku に登録します

```
$ heroku keys:add ~/.ssh/work.pub
```

- `work` 仮想アカウントのSSH接続設定を `~/.ssh/config` に追記する
  - `heroku.[仮想アカウント名]` という仮想的な Host を定義する


```
$ vi ~/.ssh/config

Host heroku.work
    port 22
    HostName heroku.com
    IdentityFile ~/.ssh/work.pem
    User git
    TCPKeepAlive yes
    IdentitiesOnly yes
```

`work` アカウントの git リモートリポジトリ接続設定を追加する

- 下記コマンドで git のリモートリポジトリ接続設定を行う

```
$ git remote add heroku-work git@heroku.[仮想アカウント名]:[Herokuアプリケーション名].git
```

- 仮想アカウントが `work` で、`test-app-work` という Heroku アプリケーションだった場合は下記コマンドを実行します

```
$ git remote add heroku-work git@heroku.work:test-app-work.git
```

- リモートリポジトリを確認します

```
$ git remote -v

...
heroku-work  git@heroku.work:test-app.git (fetch)
heroku-work  git@heroku.work:test-app.git (push)
...
```

- `work` アカウントで git push する場合は下記コマンドを実行します

```
$ git push heroku-work master
```

**4 . `private` アカウントの設定を行います**

- `private` アカウントに切り替える

```
$ heroku accounts:set private
```

- `private` アカウントの公開鍵設定を追加する
  - `private` アカウントで利用する公開鍵を Heroku に登録します

```
$ heroku keys:add ~/.ssh/private.pub
```

- `private` アカウントの秘密鍵を設定する
  - `heroku.[仮想アカウント名]` という仮想的な Host を定義する


```
$ vi ~/.ssh/config

Host heroku.private
    port 22
    HostName heroku.com
    IdentityFile ~/.ssh/work.pem
    User git
    TCPKeepAlive yes
    IdentitiesOnly yes
```

`private` アカウントの git リモートリポジトリ接続設定を追加する

- 下記コマンドで git のリモートリポジトリ接続設定を行う

```
$ git remote add heroku-private git@heroku.[仮想アカウント名]:[Herokuアプリケーション名].git
```

- 仮想アカウントが `private` で、`test-app-private` という Heroku アプリケーションだった場合は下記コマンドを実行します

```
$ git remote add heroku-work git@heroku.work:test-app-private.git
```

- リモートリポジトリを確認します

```
$ git remote -v

...
heroku-private     git@heroku.private:test-app-private.git (fetch)
heroku-private     git@heroku.private:test-app-private.git (push)
...
```

- `private` アカウントで git push する場合は下記コマンドを実行します

```
$ git push heroku-private master
```
flutterコマンドを打った時に"Waiting for another flutter command to release the startup lock..."が出た時の対処法

Flutterでアプリ開発中に `flutter run` を打つと、以前に起動した時のロックがかかっていて次のようなエラーが出ることがあります。

```
Waiting for another flutter command to release the startup lock...
```

コードで言うと[このあたり](https://github.com/flutter/flutter/blob/master/packages/flutter_tools/lib/src/cache.dart#L72)で、中を読むとわかりますが `$flutter_root/bin/cache/lockfile` が残っていることが原因です。
一応プロセスが残っていないことを確認してからこれをrmすればOKです。

以上。
Instagramのような画面UIを簡単に作れるPastelViewを試してみた

##はじめに
Instagramのログイン画面のようなUIを簡単に作れる[PastelView](https://github.com/cruisediary/Pastel)を試してみましたので、その内容を共有します。PastelViewを使用することで下のような画面を簡単に作ることができます。（色が動的に変化します）
<img width="300" alt="pastel_screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/154099/472a4d1c-c655-a724-1c28-4cc5673c3898.png">


##検証環境
以下の環境を使用しています。


- macOS Sierra Version 10.12.4
- Xcode Version 8.3.2

##導入
CocoaPodsやCarthageを使用して導入することができます。

```vim:Pods
use_frameworks!
target 'PastelSample' do
  pod "Pastel"
end
``` 

```vim:Carthage
github "cruisediary/Pastel" ~> 0.3.0
```

##pastelの主要コンポーネント

###PastelView
- PastelViewの本体です。
- 色の移り変わりの始点と終点を指定できます。
    - デフォルトでは開始地点が画面右上、終点が画面左下に指定されているようです
    - デフォルトの設定では画面右上から画面左下へ色が移り変わっていきます
- 変化する色の指定ができます。（複数指定可能）
- 色の変化する時間間隔を設定できます。（一つの色から別の色に変化する間隔）
    - 例えば、時間感覚を3秒に設定、色を3つ指定している場合は元の色に戻るまで9秒かかります
- アニメーションの開始を行います。

###PastelGradient
- PastelViewで使用する色のセットを提供しています。
    - 暖かい色、春っぽい色など直感的な名前で指定できます。
    - PastelViewに直接自分で色を指定できますが、このような色のセットがあると使い勝手が良いなと思いました。


##実装
1. PastelViewの初期化
2. 色の移り変わりの始点と終点の設定
3. アニメーション間隔の設定
4. 色のセットの設定
5. アニメーションの開始

```swift:実装例
import UIKit
import Pastel

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let pastelView = PastelView(frame: view.bounds)
        view.addSubview(pastelView)
        
        pastelView.startPastelPoint = .bottomLeft
        pastelView.endPastelPoint = .topRight
        
        pastelView.animationDuration = 3.0
        
        pastelView.setColors([UIColor(red: 156/255, green: 39/255, blue: 176/255, alpha: 1.0),
                              UIColor(red: 255/255, green: 64/255, blue: 129/255, alpha: 1.0),
                              UIColor(red: 123/255, green: 31/255, blue: 162/255, alpha: 1.0),
                              UIColor(red: 32/255, green: 76/255, blue: 255/255, alpha: 1.0),
                              UIColor(red: 32/255, green: 158/255, blue: 255/255, alpha: 1.0),
                              UIColor(red: 90/255, green: 120/255, blue: 127/255, alpha: 1.0),
                              UIColor(red: 58/255, green: 255/255, blue: 217/255, alpha: 1.0)])
        
        pastelView.startAnimation()
    }
}
```

###その他
```swift:gradientの設定例
pastelView.setPastelGradient(.sunnyMorning)
```



##所感
おしゃれな画面を非常に簡単に作ることができました。
色の組み合わせなどは実際の実装の際にはどのようにしようか迷うかと思いますが、それを事前に用意してくれているのは親切だなと感じました。（色はcolorLiteralで書かれているのでひと目で簡単に確認できます。）
初夏のJavaScript祭2017　参加メモ

行ってきました。殴り書きメモですが公開するよ！

* [初夏のJavaScript祭 in mixi](https://javascript-fes.doorkeeper.jp/events/60189)

hikarutさんのQiita記事のほうがリンク等しっかりしてるかと。

* [初夏のJavaScript祭(2017) 資料まとめ](http://qiita.com/hikarut/items/d7046a390736582c0fee)

訂正点あったらよろしくお願いします。

# JSのエラーチェックツールを作ろうとした話

* Rails製のウェブページ解析サービスWWCheckerを作った
* サイトのスクショ撮影 + 実行時JSエラー解析しようとして苦戦
    * headless chrome使ったらメモリ食いすぎ
* 実行時エラー解析機能を削って、より需要のあるパフォーマンス分析機能をPageSpeed InsightsのAPI使って作ることにした
* PageSpeed Insightsでスクショも撮れて満足

# Draft.jsによる統制のとれたテキスト編集の世界

* Draft.js
    * WYSIWIGエディタを作るやつ
    * 内部でcontentEditable使ってる
    * Facebook謹製のReactベース
* Good
    * 一度中間表現に変換するのでmarkdownやhtmlへの対応が楽
* Bad
    * バージョンアップ激しくてプラグイン同士の干渉つらい
        * マイナーバージョンアップでも死ぬ　
        * package.jsonでチルダ使うな
        * 覚悟が必要
    * React依存なので他のViewライブラリで使うと厳しい

# flow-typeでjavascriptに型をつけよう

* 型はいいよ
* 既存コードからの移行はTypeScriptより楽

# Vue.js 2.0 で自社プロダクトを SPA + SSR 化した話

* もともとgolangでバックエンド作ってた
* golang用JSエンジン使ってもSSRできるけど、素直にExpressを間に置いて作った
* 共通処理
    * view componentはサーバ、PC、スマホで分けたい
    * けど共通部分は共通化したい
    * vue-class-component使って共通部分をdecoratorで注入して解決
        * （react-reduxのconnect的なもの?）
* メタタグはvue-mata
* AdSenceはSPA非対応
    * ページリフレッシュなしのAdSenceの更新は禁止されてる
    * AdSence使いたい人はSPAよくないかも
* APIキャッシュ周りでメモリリークしてた
    * そもそもミドルでキャッシュすべきなのか問題
* SSR化は割と楽、まあまあ安定
* KPI
    * PV/セッション上がった
    * 滞在時間変わらない
    * つまり、回遊しやすくなったのでは
* まとめ
    * SSR+SPAはアリ
    * SEOのため（だけ）にSSRやる、というほどではない
    * メタタグをサーバで作れてさえいればOK

# スマホとセンサーWeb Bluetooth APIでさらにセンサーを盛るおはなし

* ブラウザのサポート
    * GPS、ジャイロ、加速度、照度、近接
* Web Bluetooth APIで任意デバイス接続できるのでセンサ盛れる
    * お酒センサ
    * Androidの標準ブラウザ/ChromeとMacのChromeで使える
* まとめ
    * 数行のJSで使えて簡単でいいよ
    * 趣味程度なら

# JavascriptとUnityでWebGL試した話

* Unity5.xからWebGLビルド可能になった
    * 今までブラウザ動作にはUnityWebPlayer(Flash, Silverlight)が必要だった
* 対応状況
    * Android4.4がネック、他は大体OK
* asm.jsで高速動作
    * Safari系が対応していないのつらい
    * 対応してなくても動くことは動く
* JavaScriptとUnityScriptは違う
    * 別の型を代入できない
    * deleteがない
    * 正規表現リテラルがない
    * 詳しくはUnityScript vs JavaScript記事を見よう
* WebGLとJSの連携
    * Application.ExternalCall()でWebGLからJSコール
    * gameInstance.sendMessageでJSからWebGLをコール
* LeamMotionのUnitySDKはあるがWebGL書き出し非対応
    * JS側でLeapMotionにつないでWebGLに渡してる
* Unityについて
    * Tips
        * Unity 5.5 beta-3からPersonalライセンスでも任意スプラッシュスクリーン使えるように
        * JavaScriptからC#に変換できるようになった
    * Bad
        * UnityのUI慣れない
        * UnityScriptはJSと結構違う
        * 結局C#で書いたほうがリッチ
        * ビルドやロード長い
    * Good
        * 3D演算楽
        * 豊富なアセットストア

# 感想

* さすがのMac率
* Viewライブラリ派閥はVue > React > Angulerな印象
* FirefoxはあんまりShadow DOM対応優先する気ないという話を漏れ聞いて(´・ω・`)
デザインパターン学習メモ：「State」

## 目的
GoF本より引用する。

> オブジェクトの内部状態が変化したときに、オブジェクトが振る舞いを変えるようにする。クラス内では、振る舞いの変化を記述せず、状態を表すオブジェクトを導入することでこれを実現する。(P.325)

オブジェクトの内部状態が変化した時の振る舞いの変化をクラス内で記述した場合、if文もしくはswitch文でクラスの状態を判断し、処理を切り替える実装をすることになる。

この方法ではコードは読み難くく、また、内部状態のパターンが追加されるたびにコードが複雑化していく。

そこで、内部状態をそれぞれクラスとして表現し、状態によって処理が異なる場合は、そのクラスに委譲する。

Strategyパターンとよく似ている。
http://qiita.com/mokrai/items/2caf83112c4b92d2ebe7

## 実装例
ボタンの例。スイッチを押すと仕事を実行する。もう一度押すとストップする。
スイッチオンの状態とオフの状態を別々のクラスで表現している。

```java:Button.java
// Context役
public class Button {
	private static final State onState = new OnState();
	private static final State offState = new OffState();
	private State state = offState;

	public void push() {
		state.push(this);
	}

	public void setOff() {
		this.state = offState;
	}

	public void setOn() {
		this.state = onState;
	}

	public void execute() {
		// do something...
	}

	public void stop() {
		// stop something...
	}
}
```

```java:State.java
// State役
public interface State {
	void push(Button button);
}
```

```java:OffState.java
// ConcreteState役
public class OffState implements State {

	@Override
	public void push(Button button) {
		System.out.println("スイッチ　オン！");
		button.setOn();  // Context役の状態変化はState役(ConcreteState)で実施
		button.execute();
	}
}
```

```java:OnState.java
// ConcreteState役
public class OnState implements State {

	@Override
	public void push(Button button) {
		System.out.println("スイッチ　オフ！");
		button.setOff();  // Context役の状態変化はState役(ConcreteState)で実施
		button.stop();
	}
}
```

## その他の実装例
『アジャイルソフトウェア開発の奥義』にでてくる改札口の例がわかりやすい。

改札がロック状態（閉じている状態）とアンロック状態（通過可能な状態）をStateとして表現している。

## 参考文献
 * ロバート・C・マーチン（2004）『アジャイルソフトウェア開発の奥義　第２版　オブジェクト指向開発の神髄と匠の技』瀬谷啓介訳、SBクリエイティブ
 * エリック ガンマ、ラルフ ジョンソン、リチャード ヘルム、ジョン プリシディース（1999）『オブジェクト指向における再利用のためのデザインパターン　改訂版』本位田　真一、吉田　和樹 監訳、SBクリエイティブ
【R】データの振り分け

Rで読み込んだデータを一致条件によって振り分ける

モデル名
Honda:

Yamaha:

Suzuki:
・50cc
レッツ/G/バスケット,レッツ4/パレット/バスケット,レッツ5/G,アドレスV50,バーディー50
・50-125cc
アドレス110,アドレスV125,アドレスV125S,アドレスV125SS,アドレスV125Sリミテッド
・125-250cc
バーグマン200,GSR250S,GSR250F,GSX250R,ST250Eタイプ,スカイウェイブ250Sベーシック,スカイウェイブ250SS,スカイウェイブ250M,スカイウェイブ250リミテッド,グラストラッカー/ビッグボーイ,ジクサー


Kawasaki:

バイク関連:

![image.png](https://qiita-image-store.s3.amazonaws.com/0/183229/473b79dd-e1de-65a2-84d7-b37847d66019.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/183229/72d2cac4-f0b5-953d-56ab-2144a0f4d4dc.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/183229/788f4989-d9ba-a025-e7f6-bb77401c9acf.png)
[ruby] rbenvので最新のrubyをインストールするときはruby-buildのアップデートが必要

環境: Mac OSX 10.11.6

```
$ rbenv install 2.4.1

ruby-build: definition not found: 2.4.1

The following versions contain `2.4.1' in the name:
  rbx-2.4.1

See all available versions with `rbenv install --list'.

If the version you need is missing, try upgrading ruby-build:

  cd /Users/username/.anyenv/envs/rbenv/plugins/ruby-build && git pull && cd -
```

ruby-build、そういえばgitリポジトリだったので
最後の指示通りgit pullで最新に更新する必要がある

```
cd /Users/username/.anyenv/envs/rbenv/plugins/ruby-build && git pull && cd -
```

```
$ rbenv install --list | grep 2.4
  2.2.4
  2.4.0-dev
  2.4.0-preview1
  2.4.0-preview2
  2.4.0-preview3
  2.4.0-rc1
  2.4.0
  2.4.1
  rbx-2.2.4
  rbx-2.4.0
  rbx-2.4.1
```

（2017年5月時点）
最新の2.4.1が増えたのでこれでOK
Content Security Policy (CSP)


# 概要

CSPを使用する事でXSS攻撃の軽減、検出(レポーティング機能を利用する事で)が可能

# CSPの使用方法

下記のいずれかの方法でCSPを有効化できる
- Content-Security-PolicyヘッダをHTTPレスポンスで返す
- metaタグ指定


## レスポンスヘッダーでの指定

ポリシーを適用させる

```
Content-Security-Policy: <policy-directive>; <policy-directive>
```

ポリシーを適用はせず、違反を報告させる

```
Content-Security-Policy-Report-Only: <policy-directive>; <policy-directive>
```

## metaタグでの指定

```
<meta http-equiv="Content-Security-Policy" content="<policy-directive>">
```

# Policy directive

個々のdirectiveは下記を参照。
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Content-Security-Policy

|Policy directive|説明|
|:--|:--|
|Fetch directive|リソースのタイプ毎にロードする制限をかけられる.default-srcは対応するリソースのポリシーが指定されてない場合に適用される.[ソースの指定方法](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/default-src#Sources)|
|Document directives|baseの属性やプラグインの種類等を制限|
|Navigation directive|formのポスト先やiframeのソース等の制限|
|Reporting directives|ポリシー違反のレポート方法を指定|

### その他

block-all-mixed-content

- HTTPS時のHTTPコンテンツの読み込みを防ぐ
- 常時HTTPS化の際にレポーティング機能との組み合わせで問題のあるリンクを見つけるのに役に立つ

require-sri-for

- scriptとstyleに対して[sri](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity)を強制する

upgrade-insecure-requests

- HTTPのアクセスをHTTPSに強制する

# 使用例

## 自ドメインのリソースのみ読み込みを許可する

```
Content-Security-Policy: "default-src 'self'
```

## 自ドメインと指定したドメインのみの読み込みを許可する

```
Content-Security-Policy: default-src 'self' *.example.com
```

# ReadOnlyを利用したレポートティングの例


指定したレスポンスヘッダ

```
Content-Security-Policy-Report-Only: default-src 'self'; report-uri http://localhost:8080/report
```

## 画像ポリシーに違反した場合のレポート

```
{
	"csp-report": {
		"document-uri": "http://localhost:8080/img.html",
		"referrer": "",
		"violated-directive": "img-src",
		"effective-directive": "img-src",
		"original-policy": "default-src 'self'; report-uri http://localhost:8080/report",
		"disposition": "report",
		"blocked-uri": "http://placehold.it/350x150",
		"status-code": 200
	}
}
```

## スクリプトポリシーに違反した場合のレポート

```
{
	"csp-report": {
		"document-uri": "http://localhost:8080/script.html",
		"referrer": "http://localhost:8080/",
		"violated-directive": "script-src",
		"effective-directive": "script-src",
		"original-policy": "default-src 'self'; report-uri http://localhost:8080/report",
		"disposition": "report",
		"blocked-uri": "https://code.jquery.com/jquery-3.2.1.min.js",
		"status-code": 200
	}
}
```

# 参考サイト

https://developer.mozilla.org/ja/docs/Web/Security/CSP

https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Content-Security-Policy

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only
格ゲーのコマンドを絵文字で表示する


![command_emoji.png](https://qiita-image-store.s3.amazonaws.com/0/17437/4db3b0ae-5ce0-f54c-058d-44b52ffe834b.png "command_emoji.png")

格ゲーでは、コマンド表示を数字で表すことがあります。

```
789
4 6
123
```

789が左上、上、右上を表し、46が左右、123が左下、下、右下となります。

例えば、ストリートフィターシリーズで有名な昇竜拳や波動拳の必殺技のコマンドは以下のようになります。

```
波動拳 : 234 + P
昇竜拳 : 623 + P
```

分かる人にはわかるのですが、初心者にはなんだかわかりません。

それでは、:数字:を絵文字で表示できるプログラムを作成してみたいと思います。環境はRuby on Railsでmarkdown中に:数字:が現れたら、絵文字に変換します。絵文字にはGitHubが提供している[gemoji](https://github.com/github/gemoji)を使用します。

railsアプリをまず作成します。

```
$ bundle exec rails new emoji
```

Gemfileに以下を追加します。

```ruby:Gemfile
gem 'gemoji'

```

以下のコマンドでgemojiをインストールします。

```
$ bundle install --path vendor/bundle
```

以下のコマンドで絵文字画像をインストールします。

```
$ bundle exec gemoji extract public/images/emoji
```

:1:のように1桁の数字を絵文字するほかに、さらに、:236:のように複数の数字が並んでいる場合も絵文字にします。

コマンドの絵文字にするemojifyメソッドを定義します。

```ruby:application_helper.rb
module ApplicationHelper
 def emojify(content)
    str = h(content).to_str
    new_line = "\r\n"
    if str.match(/\r\n/)
      new_line = "\r\n"
    elsif str.match(/\r/)
      new_line = "\r"
    elsif str.match(/\n/)
      new_line = "\n"
    end
    lines = str.split(/\r\r|\r|\n/)
    ret = '';
    pre_start_tag = false;
    pre_end_tag = false;

    lines.each do |line|
      pre_start_tag = line.match(/<pre><code>/) unless pre_start_tag
      pre_end_tag = line.match(/<\/code><\/pre>/) if pre_start_tag
      if !pre_start_tag && !pre_end_tag
        ret += _emojify(line)
      else
        # pre codeタグ中では絵文字化しない
        ret += line
      end
      if pre_start_tag && pre_end_tag
        pre_start_tag = false
        pre_end_tag = false
      end
      ret += new_line
    end
    ret.html_safe if ret.present?
  end

  private

  def _emojify(content)
    return '' if content == ''
    content.gsub(/:([\d]+):/) do |match|
      numbers = $1.split('')
      ret = ''
      numbers.each_with_index do |number, i|
        if emoji = Emoji.find_by_alias(number)
          ret += ' ' if i > 0
          ret += emoji_image_tag(number, emoji.image_filename)
        else
          ret += match
        end
      end
      ret
    end
  end
end
```

以下のコマンドでコントローラを作成します。

```
$ bundle exec rails g controller emoji show
```

それではコマンドを絵文字で表示してみましょう。viewでemojifyメソッドが使用でます。

```app/view/emoji/show.html.slim

h1 絵文字でコマンド表示
p = emojify(':6: + P')
p = emojify('波動拳 : :236: + P')
p = emojify('昇竜拳 : :623: + P')
```

以下のコマンドでrailsアプリを起動します。

```
$ bundle exec rails server
```

ブラウザで確認すると以下のアドレスにアクセスします。
http://localhost:3000/emoji/show

![command_emoji.png](https://qiita-image-store.s3.amazonaws.com/0/17437/4db3b0ae-5ce0-f54c-058d-44b52ffe834b.png "command_emoji.png")

コマンドが絵文字で表示されました。

markdownを使用する場合は、markdownからhtmlに変換したものにemojifyのメソッドを適用して下さい。
ROSでdarknetを動かしてみた。

##目的
深層学習フレームワークdarknetのYOLO(You only look once)特徴量による物体認識を、ROSラッパーしたパッケージ”darknet_ros”をWEBカメラと接続して動かしてみた。
darknet_ros”はETH Zurich(チューリッヒ工科大)のRobotic Systems Labが作成したものを使用した。

[darknet_ros](https://github.com/leggedrobotics/darknet_ros)
[darknet](https://github.com/pjreddie/darknet/tree/9726f1e89c29fb9a8802f0a544e2cc79aafa67ff)

![predictions.jpg](https://qiita-image-store.s3.amazonaws.com/0/73020/ebc3d614-3799-d0f8-f351-c0de6b9991c0.jpeg)


##環境
Ubuntu 16.04(x64) 
ROS:Kinetic 
GPU:NVIDIA GeForce GTX1050


##インストール

ROSのcatkin-toolsをインストールする。
これで catkin buildコマンドが使えるようになる。

````
sudo apt-get install python-catkin-tools
````

darknetをダウンロードし、catkinでコンパイルする。

````
 mkdir -p ~/catkin_darknet/src
 cd ~/catkin_darknet/src
 git clone --recursive https://github.com/leggedrobotics/darknet_ros.git
 cd ../
 catkin build darknet_ros
````

ROSにパッケージの情報を読みこむ。

````
source ~/catkin_darknet/devel/setup.bash 
````

##実行

コンソースを3つ立ち上げ、以下のコマンドを実行する。

roscoreの起動

````
roscore
````

usbカメラの起動

````
rosrun usb_cam usb_cam_node /usb_cam/image_raw:=/camera/image_raw
````
darknet_rosの起動

````
roslaunch darknet_ros darknet_ros.launch 
````

rqt_graphの図は以下の様になっている。
![darknet_rosgraph.png](https://qiita-image-store.s3.amazonaws.com/0/73020/328f3ca5-cf84-2c45-b1b2-d20567c03586.png)


検出結果は、/darknet_ros/YOLO_BoundingBoxesでPublishされる。

```
$　rostopic echo /darknet_ros/YOLO_BoundingBoxes 
---
boundingBoxes: 
  - 
    Class: person   //物体の識別
    probability: 0.382561951876　//尤度
    xmin: 69　  //物体のboundingBoxの左上座標
    ymin: 0     //物体のboundingBoxの左上座標
    xmax: 640   //物体のboundingBoxの右下座標
    ymax: 480   //物体のboundingBoxの右下座標
---
【Laravel】artisan 主要な使い方チートまとめ

# はじめに
laravel では何をするにも artisan を良く使うが、毎回調べるのも何なので、
よく使うコマンドをチート的にまとめておく。

#### プロジェクト作成

```shell-session
composer create-project laravel/laravel プロジェクト名 --prefer-dist 
```
storage 以下に書込み権限がないと 500エラーになるので注意。laravel のバージョンを特に指定しないなら --prefer-dist の後ろのに "5.5.*" の様にバージョンを追加して呼び出す。
#### コントローラ作成

```shell-session
php artisan make:controller コントローラ名 (例:AdminControllerとか)
```
app/Http/Controller/ に作成される --resource を付けるとリソースに対する様々なアクションを作成してくれる。
#### モデル作成

```shell-session
php artisan make:model モデル名 (例:Adminとか)
```
app/に作成される
#### テーブル作成

```shell-session
php artisan make:migration create_テーブル名_table (例:adminsとか)
```
database/migrations/に作成されるので、フィールド等を追記する。
No such file or directory と表示され、エラーになったら、とりあえず以下を実行してみる。

```shell-session
composer dump-autoload
```

```php:YYYY_MM_DD_HH_II_SS_create_admins_table.php
    public function up()
    {
        Schema::create('admins', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('password');
            $table->timestamps();
        });
    }
               :
    public function down()
    {
        Schema::drop('admins');
    }
```

#### マイグレーション実行
実際のテーブルが作成される

```shell-session
php artisan migrate
```
#### シーダー作成

```shell-session
php artisan make:seeder シーダー名 (例:AdminTableSeederとか)
```
database/seeders/ に作成されるので、初期値を設定する。

```php:AdminTableSeeder.php
    public function run()
    {
        DB::table('admins')->insert([
            'name' => 'admin',
            'password' => bcrypt('secret'),
        ]);
    }
```
これだけでは実行されないので、database/seeders/DatabaseSeeder.php に
呼び出し部分を記述する。

```php:DatabaseSeeder.php
public function run()
{
    Model::unguard();

    $this->call(AdminTableSeeder::class);
 
    Model::reguard();
}
```
#### シーダー実行

```shell-session
php artisan db:seed
php artisan db:seed --class=AdminTableSeeder
```
初期値が設定される。

#### キャッシュクリア
```shell-session
php artisan cache:clear
```
#### パブリッシュ
```shell-session
php artisan vendor:publish
```
パッケージのビューがユーザ領域のビューにコピーされる。
#### 認証クイックスタート
```shell-session
php artisan make:auth
```
認証関連がスカフォールドされる。

[- 目次 -](https://qiita.com/search?q=laravel+nekyo)
Qiita で YouTube 動画 を インラインっぽく 表示

YouTube動画を Qiitaでインラインっぽく 表示・再生する方法です。

#twitter 経由 YouTube
<blockquote class="twitter-tweet" data-lang="ja"><p lang="und" dir="ltr">K20170523 mb500<a href="https://t.co/PsclbHLqSN">https://t.co/PsclbHLqSN</a></p>&mdash; t-tkd3a (@t_tkd3a) <a href="https://twitter.com/t_tkd3a/status/868379600904101888">2017年5月27日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

1. YouTubeに投稿する。
2. ↑のURLを Twitterで ツイートする。
3. ↑のツイート欄にて「ツイートをサイトに埋め込む」を選択。
4. ↑で表示される画面のURLを、Qiita記事にコピペする。

ちょっと手間かかりますが、インラインっぽくできます。

#参考記事

* [Qiitaに動画を埋め込む方法](http://qiita.com/akameco/items/6ff78b0918e96f871f57)

* [QiitaにYouTubeを埋め込む（MarkdownにYouTubeを埋め込む）](http://qiita.com/tnarihi/items/762b6ba4ac0a160eef5b)


# 望んでいたこと
* でかい動画も Qiita に ドラッグドロップで埋め込みたい...。
zabbix3.0(server/agent)のansible-playbookを作ってみた(その２)

## 2017/09/03追記

Zabbix3.4のansible-playbookも作ってみた。

```ruby:shell
git clone https://github.com/mishikawan/zabbix34-ansible.git
```

## 目的

2回目のAnsible用playbookの挑戦結果です。
CentOS7環境に、Zabbix-server(rpm)とZabbix-agent(rpm)の機能を自動設定する。

一回目の記事([zabbix3.0のansible-playbookを作ってみた](http://qiita.com/mishikawan/items/9c11afc08b2588d8a552))はこちら。

## アウトプット

作成したplaybookを githubに登録してみた。
git clone https://github.com/mishikawan/zabbix30-ansible.git

興味があれば、git-cloneしてみてください。

## 内容

* os(共通(common))
	+ selinux無効化
	+ timezoneの設定(zone情報指定可能)
	+ chrony(時刻同期先IP指定可能)
	+ zabbix-repoの登録

* zabbix-server
	+ zabbix3.0(zabbix official repo)
	+ mariadb( DB名"zabbix"のユーザ"zabbix"のパスワード指定可能)
	+ httpd
	+ snmptrapd( snmptrapの受付コミュニティ名指定可能)
	+ snmptt(epel repo)

* zabbix-agent
	+ zabbix-agent3.0( zabbix-serverのIP指定可能)

## playbook実行

ansibleサーバで以下を実行

```
git clone https://github.com/mishikawan/zabbix30-ansible.git
cd zabbix30-ansible/
ansible-playbook -i zabbix30/inventory/inventory.ini zabbix30/zabbix30_deploy.yml
```

無事完了すると、zabbixサーバ上でzabbixサーバが稼働しています。以下、URLでアクセス可能。

```
http://{zabbix-server-ip}/zabbix
  ID = Admin
  PASS = zabbix
```
初夏のJavaScript祭(2017) 資料まとめ

# 概要
JavaScript祭に参加してきたので発表資料や内容をまとめます。
間違いや追記などあればご指摘お願いします :bow: 

* [初夏のJavaScript祭 in mixi](https://javascript-fes.doorkeeper.jp/events/60189)
* [twitter #jsfes](https://search.yahoo.co.jp/realtime/search?p=%23jsfes&ei=UTF-8&rkf=1)

# 講演内容
<img width="540" alt="スクリーンショット 2017-05-27 15.55.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/110485/4cb38ddf-094a-626a-d4a1-a38d4538af52.png">
<img width="536" alt="スクリーンショット 2017-05-27 15.56.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/110485/e5a8daff-4652-099c-f5d9-6a3040ba23bb.png">

# 講演資料
## JSのエラーチェックツールを作ろうとした話
資料：https://www.slideshare.net/keisukeimura/javascript-76398722
ツイート:https://togetter.com/li/1115447

* [WW checker](https://wwchecker.jp/)を作った話
    * jsエラーやリンク切れなどを自動でチェックするツール
* 本日β版の事前登録開始！

## Draft.jsによる 統制のとれたテキスト編集の世界
資料：https://speakerdeck.com/potato4d/draft-dot-jsniyoru-tong-zhi-falsetoretatekisutobian-ji-falseshi-jie-number-jsfes
ツイート:https://togetter.com/li/1115424

* [Draft.js](https://draftjs.org/)が凄い話


## flow-typeでjavascriptに型をつけよう
資料：https://speakerdeck.com/kaidouji85/flowtejavascriptnixing-fu-kesiyou
ツイート:https://togetter.com/li/1115428

* [flow](https://flow.org/)を使うとjsでも静的型付けができていい！

#### 質疑応答
* 導入するときの苦労は？
    * 元々型を使っている人(Java使っている人)が多かったので苦労はなかった
* TypeScriptの苦労は？
    * そもそも既存のコードをビルドできなかった
* 全部にflowを対応した？
    * 徐々に対応した。いっぺんに全部は厳しい
    * タイプにAnyがあるのでそれを使えば無理やり全部型付にできるがそれを入れても意味がないのでやってない
* flowを辞めるとき大変そう？
    * 機械的にflowを外すことはできる。外しても基本エラーはないはず
    * `@flow`がついてるところを消せばいい。
* flowの定義ファイルはあるのか？(例えばReactとか)
    * TypeScriptでは定義ファイルは充実しているが、flowではそこまで揃っていない(Reactはあるはず) 


## Vue.js 2.0 で自社プロダクトを SPA + SSR 化した話
資料：https://www.slideshare.net/vwxyutarooo/vuejs-20-spa-ssr
ツイート:https://togetter.com/li/1115443

* [SSR](https://jp.vuejs.org/v2/guide/ssr.html)の実装はそれほど大変じゃないかも

## スマホとセンサー Web Bluetooth APIでさらにセンサーを盛るおはなし
資料：https://t.co/UwZkf26RO5
ツイート:https://togetter.com/li/1115417

* jsで簡単に色々なセンサーが使える
* 発表中にアルコールを飲むという凄い発表！(アルコールセンサーデモのため)

## JavascriptとUnityでWebGL試した話
資料：https://t.co/bcxjHvVap3
ツイート：https://togetter.com/li/1115430

* jsでUnityが書ける(若干の違いはあるものの)
* ChromeやFireFoxがWebAssemblyをサポートしているのでWebGLが高速になる
* 補足資料：[asm.jsとWebAssemblyって実際なんなの？](https://www.slideshare.net/likr/asmjswebassembly)

# LT
LT、懇親会ツイート:https://togetter.com/li/1115448

## 一行のjsで色々やる話
(すみませんタイトルを忘れてしまいました。。)
資料：https://gist.github.com/butackle/9619d6acf8b352ac98fc8224630bb005

## キミは「TextLint」を知っているか
資料：https://speakerdeck.com/potato4d/kimiha-textlint-wozhi-tuteiruka-number-jsfes
参考：[TextLint](https://github.com/textlint/textlint)

## Polymer / Web Components Update
資料：https://speakerdeck.com/sizuhiko/web-components-update
参考：[Polymer](https://www.polymer-project.org/)

## React-Fiber変更点まとめ
資料：https://speakerdeck.com/mukai21/react-fiberbian-geng-dian-matome

## bodymovin × Lottie - マルチデバイスに対応した SVG アニメーション・エコシステム
資料：https://speakerdeck.com/wakamsha/bodymovin-x-lottie-marutidebaisunidui-ying-sita-svg-animesiyonekosisutemu

# 感想
初のJavaScript祭参加でしたが楽しかったです！懇親会も参加して少しお話もさせていただいて貴重な経験ができました。やっぱりJavaScript界はまだまだ自分の知らない事も多いし、できることもいっぱいあり、日々進化しているなぁと感じました。自分ももっと勉強します。
Visual Studio 2017からPythonでツイートするアプリ開発

Visual Studio 2017でTwitterにツイートするアプリをPythonで開発してみました。
今回は仮想環境(venv)を使ってプロジェクト用の環境を作っています。

#環境
Windows 7 Professional SP1 64bit
Visual Studio 2017 Community 15.2 (26430.6)
Python 3.6.0
requests-oauthlib 0.8.0

環境構築やPythonプロジェクトの作成はこちらを参考にしてください。
http://qiita.com/akabei/items/a3b8b62f1cf34b683121

#プロジェクト作成
新しいプロジェクトから「Python アプリケーション」を作成します。

![bbb.png](https://qiita-image-store.s3.amazonaws.com/0/112075/fa7d3b9b-41d3-6551-e5d6-a04455a16512.png)

#仮想環境作成
プロジェクト毎に環境を変えて開発するときは仮想環境(venv)を作成します。
ソリューションエクスプローラーのPython環境を右クリックしてメニューから「仮想環境を追加...」を選択します。

![ccc.png](https://qiita-image-store.s3.amazonaws.com/0/112075/859508af-2e38-708e-3ff1-3c6f9c1fa58c.png)

ダイアログが表示されるのでプロジェクトで使うPythonのバージョンを選択して仮想環境を作成します。

![ddd.png](https://qiita-image-store.s3.amazonaws.com/0/112075/88de52f2-02ef-c8e8-d721-3ad7bcb8411e.png)

Python環境に仮想環境「env」が作成されます。パッケージもまだ最小限のものしかありません。

![eee.png](https://qiita-image-store.s3.amazonaws.com/0/112075/977909a5-6a47-53f3-21d9-dda8e87c4886.png)

#requests_oauthlibパッケージインストール
プロジェクトのPython環境から「env (Python 3.6 (64bit))」を右クリックして「Python パッケージのインストール...」を選択します。

![fff.png](https://qiita-image-store.s3.amazonaws.com/0/112075/ddf311e9-cbaf-f5f3-75db-289c21c14801.png)

テキストボックスに「requests-oauthlib」と入力して、「requests-oauthlib(0.8.0)のインストール」を選択するとパッケージがインストールされます。

![ggg.png](https://qiita-image-store.s3.amazonaws.com/0/112075/dd841194-ff16-19d9-8243-8c4ab39b69e9.png)

env仮想環境にrequests-oauthlibパッケージと依存するパッケージがインストールされます。

![hhh.png](https://qiita-image-store.s3.amazonaws.com/0/112075/816bcc80-fd8b-fa83-41cf-bdca005b42ff.png)

#ツイート
ツイートするプログラムをtweet.pyに記述します。
パッケージを入れた直後は入力補完（インテリセンス）が使えませんが、しばらくすると使えるようになります。

```py3:tweet.py
from requests_oauthlib import OAuth1Session

CONSUMER_KEY = 'xxxxxx'
CONSUMER_SECRET = 'xxxxxx'
ACCESS_TOKEN = 'xxxxxx'
ACCESS_SECRET = 'xxxxxx'

twitter = OAuth1Session(CONSUMER_KEY, CONSUMER_SECRET, ACCESS_TOKEN, ACCESS_SECRET)
twitter.post("https://api.twitter.com/1.1/statuses/update.json", params={"status": "ついーとなう"})
```

実行してちゃんとツイートされたか確認してください。
状態か機能かわからないトグルボタンの改善

# 概要

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">こういう切替スイッチ、苦手なんですよ‥‥。できれば左のほうに統一してほしい <a href="https://t.co/dBlWhVj4Cv">pic.twitter.com/dBlWhVj4Cv</a></p>&mdash; LV41 (@lV41_) <a href="https://twitter.com/lV41_/status/868082574727315456">2017年5月26日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

ちょうど2ヶ月ぐらい前に同じことを思い、改善策を考えていたので、現実的で筋が良さそうな2つの案を紹介します。

## 改善策1 : 機能を表すラベルとその状態を表すトグルボタンのセットにする

![改善策1.png](https://qiita-image-store.s3.amazonaws.com/0/99270/19f552c0-bfc7-8591-dfb9-00c0cbbc15fc.png)

ボタンという機能をもちつつも、その表面に状態を表現することが混乱させてしまう原因なので、機能と状態に分離し、各々を明確に表現することで改善します。

## 改善策2: ツールチップを用いてそのボタンのアクションを明記する

![改善策2.png](https://qiita-image-store.s3.amazonaws.com/0/99270/61902430-cf90-f90f-1abd-e67c7a24a7d8.png)

状態は画面を見てわかっていたりするので、本当にユーザーさんが欲しい情報はそのボタンの機能だと考えると、状態は置いといて、マウスホバー時などにツールチップを用いてアクションを明記することで改善します。ホバー状態があるPCの場合に使える技ではありますが。