OmniAICreator/Qiita-1.07M huggingface dataset:
AmazonDashボタンをリモコンにする

IOTを体験したかったので、AmazonDashボタンを購入して、音楽再生リモコンを作ります。
今回実装するのは再生と停止のみです。
必要はものは下記の3つだけです。

- [AmazonDashボタン](https://dekiru.net/article/14809/)
- [itunes-remote](http://applech2.com/archives/47584681.html)
- [dasher](https://github.com/maddox/dasher)
 
# 1. DashボタンとIOSの設定
上記のリンクを参照しながら手順どおりに設定します。
商品選択画面で商品を選択せずに止めておきましょう！

# 2. itunes-remoteの設定
上記のサイトを参考にgitからcloneしてきてください。

```
git clone https://github.com/mischah/itunes-remote.git
```

# 3. dasherのconfig
## 3.1 dasherをcloneする
```
git clone https://github.com/maddox/dasher.git
```

## 3.2 MACアドレスの取得
cloneしたdasherのディレクトリに移動してMACアドレスの取得をします。

```
script/find_button
```

を実行したら、ボタンを押してみます！

```
Possible dash hardware address detected: ac:63:xx:xx:xx:xx Manufacturer: Amazon Technologies Inc. Protocol: arp
```

*「ac:63:xx:xx:xx:xx」*というアドレスがとれました

## 3.3 configを編集する
先程取得したMACアドレスを使って設定をします。
今回は音楽再生用のシェルスクリプトを書いて実行します。

```config:config.json
{"buttons":[
  {
    "name": "Attack Button",
    "address": "ac:63:be:e3:36:2f",
    "cmd": "/bin/sh /Users/murotanimari/dasher/sh/dashbtn.sh"
  }
]}
```

## 3.4 音楽再生、停止のシェルスクリプトを書く
```sh:/Users/murotanimari/dasher/sh/dashbtn.sh
#!/bin/sh
pid=/tmp/dash.pid
if [ ! -e $pid ]; then
  echo 0 > $pid
fi
pidid=`cat $pid`
if [ $pidid == 0 ]; then
  echo 1 > $pid
  itunes-remote search two > /dev/null &
else
  echo 0 > $pid
  itunes-remote stop > /dev/null &
fi
exit 0
```

# 4. 実行する
```
npm run start 
```

ボタンを押してみます。音楽が再生されればOKです。
連打防止の為か1分以上経過しないと処理が流れてこないという事が判明しました( ´Д｀ )
指定幅に合わせて正方形にするViewPager

画面内に、正方形で画像を出して横スワイプで次の画像を表示するような部品が欲しくて作った。
インスタグラムの画像表示みたいな感じ。

2017/5/6追記
経緯が雑すぎた。。。
これ、実は幅をmatch_parentにして正方形の領域を取りたいけど、コードで端末幅とってsetLayoutParamするより良い方法がないかと思って実装してみたコードでした。
幅が固定値なら普通に幅高さ決め打ちで正方形で定義したViewPager使えば良いだけです。。。

#コード
ViewPagerを継承してonMesureでheightにwidth突っ込むだけ。
これだけなので、使い方は普通のViewPagerと全く同じ。

```
public class SquareViewPager extends ViewPager {

    public SquareViewPager(Context context){
        super(context);
    }

    public SquareViewPager(Context context, AttributeSet attrs){
        super(context, attrs);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
        super.onMeasure(widthMeasureSpec, widthMeasureSpec);
    }

}
```
Slack をインストールしよう

客がスラック使ってるんなら入れるしかない。

ＰＣに入れたが、スマホにも入れろとのこと。

# スマホに入れよう

スマホでブラウザを開き　グーグルを開き

スラック

と入力して検索。

http://slack.com/ 

のページに飛ぶ。アプリは無いのか？

[Download Slack] リンクをクリックしてみる。


携帯の電話番号とか入れたらいいのか？

「Japan +81」 を選択

携帯電話番号を入れて「Google Play」をクリック。

「Play ストア」へ「１回のみ」クリック。

「インストール」ボタンをクリック。

「同意する」をクリック。

ダウンロード中のプログレスバーが伸びていく。
ダウンロード終わり。

「開く」をクリック。

スラックが開いたようだ。

チームＵＲＬを入力だって？

「https://★チーム名.slack.com/」

を入力。

Email Address を入力しろだって？

「Google accounts」ボタンを押す。自分のグーグル・アカウントを入れて楽する。

パスワードが長いですか、と聞かれるが　わけわからん。

パスワードをタイピングする。といか　パスワードなんか覚えてないぜ☆

そういえば　パスワード忘れてしまったんで　そっちでなんとかしてください、という案件を思い出した。　こんどは自分もパスワードを忘れた。

さっきＰＣに入れた分際で　今　[Reset password] ボタンをクリック。

メールが来ていた。自己最速でパスワードを忘れて更新。

[Choose a new password] をクリック。

なんか新しくパスワードにする文字を入れる。

スラックのページから何をしたらいいんだ？

[Menu] から [Sign in] を選択。

```
Get the Slack app

GET IN ON
Google Play
```

とか出てきた。グーグル・アプリじゃないところにパスワードを入れたのか。
何やってんだ。

[Google Play] をクリック。[開く]をクリック。

さっきの　パスワードを入れるのに失敗した画面に戻ってきた。

パスワードを入れて [Next] ボタンをクリック。

全部　英語で書いてあるページが出てきた。
アイコンを押せとのことだ。

[Let's try it out!] ボタンをクリック。

はい、スラックのスレッドが並んでいるページに入れたぜ！

おわり。



もっと　簡単にできないのか。
ハードはシンプルなのに　ソフトは　ボタン何回押させるんだ。

# えっ！？　新着を通知設定しろだって！？

「Slackの通知設定まとめ」UX MILK
http://uxmilk.jp/33088

スマホのホーム画面を開く。

スラックのアイコンを探してタップ。

「…」が縦に並んだボタンをクリック。

[Settings]メニューをクリック。

[Notifications] という区画を見る。直訳すると　通知　だ。

[Push notifications] をクリック。

[Vibrate] は　ON になっている。（直訳：震える）
[Light] は　ON になっている。（直訳：光る）
[Push ringtone] は Ding。（直訳：着信音、ゴーン）

あとはめんどくさい。もういいだろ。
【個人メモ】wordpressのブログ機能だけホームページに導入したった

以下の記事を参考にさくらインターネットのレンタルサーバーで運用しているホームページにWordpressのブログを導入
http://wp-technique.com/wp-blog/

さくらインターネットの場合は「クイックインストール」から超簡単に出来た。
既存のホームページとフォルダ名が被らないようにだけ注意！

以上。
boostのobject_poolは使ってはいけない

# 追記履歴

* 2017/04/30<br>
@faithandbrave@github さんからご指摘いただき「何故使うべきではないか？」のところに<br>
synchronized_pool_resourceを使ったときの結果も記載しておきました。<br>
boost::pool_objectよりも速かったですがシステムアロケータの解放よりは若干遅かったです。<br>
(unsynchronized_pool_resourceも載せようとしましたがなぜかpool作成で不完全な型でエラーになったためやめました)

# 最初に
boostライブラリにはobject_poolというテンプレートが用意されています。
この記事は **絶対にobject_poolを使うべきではない** 理由を書いていきます。

# そもそもobject_poolとは？
すごく簡単に言うと、テンプレート引数で指定された型のメモリープールを作成、管理してくれるテンプレートです。

使用例コードです

```cpp:object_pool_example.cpp
boost::object_pool<int> pool;
int* p = pool.construct(10);
pool.destroy(p);
```

使い方も難しくはないし、便利そうです。

# 何故使うべきではないか？
一言で言うと **destroy（オブジェクトの解放）が非常に遅いから** です。

※synchronized_pool_resourceのサンプルも追記済みです。

* 実証コード
    * https://wandbox.org/permlink/su2qiqXBjldezpKl

# なぜ遅いか？
どうやらオブジェクトのプールリストを単方向リストで管理しているらしく削除のたびにリストを検索して削除していく仕組みのようです。

このリストの検索が計算オーダーO(N)なのでオブジェクトが増えれば増えるほどこの検索時間がかかります。

もっと都合がわるいことに、オブジェクトをconstructした順番にdestroyを呼び出すと最悪ケースの処理時間になるようです。

例：a,b,cの順番でconstructしたものをa,b,cの順番でdestroyすると遅くなる

**この問題は2009年12月12日に報告されて以来、メンテナンス者が不在のため放置され続けている問題です。**
おそらく修正されない悲しい問題なので使わないほうが良さそうです

* 報告チケット
    * https://svn.boost.org/trac/boost/ticket/3789

# 最後に
object_poolがよろしくないという原因で不具合の修正にご協力いただいた方々に深く感謝します。
プログラミング言語Go読書会#7(4.4-5.2)[2017/04/26]

[Go読書会 #7](https://lancers-engineer.connpass.com/event/55852/) が[ランサーズ株式会社](https://www.lancers.co.jp/)で行われたので進捗と技術的なメモ書きを書いておきます。読書会の内容は[プログラミング言語Go](https://www.amazon.co.jp/dp/4621300253/?&_encoding=UTF8&tag=amesho-22&linkCode=ur2&linkId=7e29043d833086d36f8b64c2ed3721b2&camp=247&creative=1211)を冒頭から皆で読み進めていくというものです。

## 進捗した内容

+ 4章 コンポジット型
    + 4.4 構造体
    + 4.5 JSON
    + 4.6 テキストテンプレートとHTMLテンプレート
+ 5章 関数
    + 5.1 関数宣言
    + 5.2 再帰

## 話題に上がった話

### 4.4 構造体

ここでは、構造体とMapはどう違うんですか。という話がでてきました。確かにスクリプト系の言語を使っていると構造体を見かけないし、構造体の代用品のような使い方をされているのでそう言う質問がでてくるのもそんな不思議では無いかなと思いました。Mapは所謂[hash table](https://ja.wikipedia.org/wiki/%E3%83%8F%E3%83%83%E3%82%B7%E3%83%A5%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB)と呼ばれるもので、ハッシュ値を添え字とした配列で、キーからハッシュ値を生成して添え字にして O(1)で検索出来るという特徴を持つデータ構造のことで、高速にデータ検索したいとか、ユニークな値を保証したいとかそういう用途、あとはWeb系だとログ集計とかによく使われますね。一方、[構造体](https://ja.wikipedia.org/wiki/%E6%A7%8B%E9%80%A0%E4%BD%93)は、複数の変数をまとめて扱うための型ですかね。最近だとクラスだけの言語とかあるのでそれだと概ねクラスとプロパティがほぼそれに当たるかとは思います。実際にはアクセス制御とか諸々あるので大分違いますがイメージするならそんなところかなとは思います。

あと、個人的に気になったのは、`構造体の宣言はフィールドをまとめて宣言したり、位置を買えたりしただけで違う型として認識される`というところと、`同じ型をフィールドに宣言出来ない、したい場合はポインタ型を使う`というところでした。これは、構造体同士の比較で、フィールドの頭から比較を行っていくので宣言方法が変わると同一の比較にならないため違う型になるという理由でした。

他に話題になったのは、構造体の埋め込みフィールドですね。Goは構造体の宣言に型だけを埋め込むことによって直接その構造体にフィールドが有るかのように振る舞うことが出来ます。これは知っていないとバグにみえてしまうので要注意だと思います。


### 4.5 JSON

JSONでは、[フィールドタグ](https://golang.org/pkg/encoding/json/#Marshal)が話題になりました。これは、JSONは構造体からMarshalしてJSONに変換するのですが、コンパイル時に構造体へフィールドタグを付けておくと、名前を指定したものへ変換したり出来る機能です。それ以外にもオプションで、omitemptyやstringをしていして挙動を返ることが出来るのでJSONを扱うときはこれを使用すると余計な処理を書かずに済みそうです。

参考になりそうなURL

+ http://qiita.com/pside/items/0fc7f85746211371b23e


### 4.6 テキストテンプレートとHTMLテンプレート

ここでは、テキストテンプレートとHTMLテンプレートの使い分けについてが話題になりました。基本、Webで外部に向けて表示する場合はエスケープ機能のついたHTMLテンプレートの方を使った方が良いという話になりました。この辺の知識は[安全なウェブサイトの作り方](https://www.ipa.go.jp/security/vuln/websecurity.html)を読んでおくと言い気がします。

### 5.1 関数宣言

関数の型をシグニチャ([signature](https://golang.org/ref/spec#Function_declarations))なんですが、これは宣言された名前に関係なく、パラメータ列と結果の列が同じで有れば同じ型を持つというところが、構造体と違っていて面白いです。おそらくは、変数に関数を入れたりするのに同じシグネチャなら許容するためとか、あとは、恐らく比較を行わないのせいだとは思いますが、宣言をまとめられたりしても同じ型だと認識する点も気になりました。

あと、他の言語だと関数にデフォルトパラメータを持つことが有るのですが、Goの場合ないので何ででしょうかという話になりました。これは、あとで聞いたのですが、簡素化のために意図的にこの機能はないという[話](https://talks.golang.org/2012/splash.article)でした。

### 5.2 再帰

ここでは、関数のスタックがGoでは可変長であると言うことが話題になりました。普通の言語ではスタックは固定長であることが多く。これが再帰の呼び出しの深さの制限になります。試しにjsやrubyなどで再帰を実装してみると分かりやすいかもしれません。以前jsで再帰を書いたら割と早く限界がきました。

ここまで読んだところで時間になりました。次回は 5.3 複数戻り値からです。
学習記録　-html&cssの基礎的手法について-

学習サイトでhtml&cssを一度さらった程度ではやはり忘れていることが多いことに気づかされる。
反復してさらって身につける必要があると痛感する。何度でも何度でも。。。

<h3>backgound-image設定</h3>
css
background-image:url('画像のurl');

<h3>画像をページに目一杯広げる方法</h3>
css
backgound-size:cover;

<h3>要素を中央に配置</h3>
css 
margin:0 auto;
marginの左右をautoにする,上下はできない

<h3>1.要素全体を半透明にする</h3>
css 
opacity:0.5;
値は0~1の間

<h3>2.backgroundだけを半透明にする</h3>
css
gackground-color:rgba(r,g,b,opacity); 

<h3>3.文字だけを半透明にする</h3>
backgound-color:rgb(r,g,b);
opacity:0.5;


<h3>文字間隔の設定</h3>
css
letter-spacing:;

<h3>aタグの使い方</h3>
リンク移動　<a href="リンク先"

<h3>h,pタグの共通点</h3>
pはparagraghの略、h,pタグどちらも使うと段落を作る。

<h3>urlとは？</h3>
uniform resource locator の略
web上の住所のこと
Nodeモジュール自作まとめ

# :rotating_light: 前提 :rotating_light:
**自分用のメモです。**
やり方やその他の方法など、
ご紹介頂けますと喜びます。

## コード例

- Perlやjavaに実装されているpackが必要だったので、調べてみた。
[Converting a string to hex and vice-versa in perl, javascript, and java][link1]
という方法がある。
コードを拝借し、実装してみる。

### モジュール作成の参考

- いつもお世話になっているサイトより参照。
[Node.js 用の自作モジュールの作り方メモ][link2]


#### Codeまとめ
```javascript:./pack-h/pack2.js
// 更新履歴 -JL- 
// - 2017.04.28 - 新規作成
// ver.0.0.1
// a2hex & hex2a を 追加

var path = require('path');
var fs = require('fs');

exports.a2hex = function (str) {
  var arr = [];
  for (var i = 0, l = str.length; i < l; i ++) { 
      var hex = Number(str.charCodeAt(i)).toString(16); 
      arr.push(hex.length > 1 && hex || "0" + hex);
  }
  return arr.join('');
}

// a2hex('Test');

exports.hex2a = function (hexx) {
    var hex = hexx.toString();
    var str = '';
    for (var i = 0; i < hex.length; i += 2)
        str += String.fromCharCode(parseInt(hex.substr(i, 2), 16));
    return str;
}
// hex2a('54657374');
```



##### 実行例
```javascript:main.js
// 2017.04.28 './node_modules/pack-h/pack2.js'

import {a2hex, hex2a} from 'pack-h/pack2';

.
..
...
let text = a2hex("Test");
console.log(text); // >>> 54657374
...
..
.

```

###### 更新履歴

- 2017/04/28 現状、コード手直し、追加なし。

<!-- Link 2 List -->
<!-- Group1 -->
[link1]:https://www.code-monk.net/2016/03/07/perl-javascript-java-converting-string-to-hex-vice-versa/
[link2]:http://phiary.me/node-js-ones-own-module-create-memo/
React.js の submit でページを更新しない方法

# preventDefaultを使う

```js

return e.preventDefault()

```
    
# 実装

```js
handleClick(e) {

return e.preventDefault();

}
```

# 参考

[input type=submit でページを更新"しない"方法。](http://qiita.com/Phiyory18/items/cfa1c1c756c7f54e98ab)

[React.js の submit でページを更新しない方法](http://off.tokyo/blog/2017/04/29/react-js-%E3%81%AE-submit-%E3%81%A7%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E6%9B%B4%E6%96%B0%E3%81%97%E3%81%AA%E3%81%84%E6%96%B9%E6%B3%95/)
HTMLのテキスト選択を制御するCSS


- Webページを選択しようと思うとできたりできなかったりすることがありますよね。なんでだろうということで調べてみました。

## user-select

- user-selectという指定を使うようです。[developer.mozilla.org - user-select](https://developer.mozilla.org/ja/docs/Web/CSS/user-select)


## Syntax

```css
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;

-moz-user-select: none;
-moz-user-select: text;
-moz-user-select: all;

-webkit-user-select: none;
-webkit-user-select: text;
-webkit-user-select: all; /* does not work in Safari, use only "none" or "text", or else it will allow to type in the html container*/

-ms-user-select: none;
-ms-user-select: text;
-ms-user-select: element;
```

## どれが効くのか？

- 実際に試したところ効くのと効かないのがあるようです。
- 確実なのはnoneくらい？allはMacでは便利かも。
	1. auto : デフォルトなので特になし。
	1. none : 選択できなくなります、Mac(Safari/Chrome)でもiOSでも効きました。
	1. text : ダブルクリックすると単語が選択されました。ただこれって普通の動作？
	1. all  : クリックすると全文が選択されます、コピペして欲しいブロックが指定できて便利かも？ただ、iOSでは効きませんでした。
	1. contain : IEだけっぽいので無視


## サンプル

<p data-height="265" data-theme-id="dark" data-slug-hash="rmyoVE" data-default-tab="html,result" data-user="qoAop" data-embed-version="2" data-pen-title="user-select" class="codepen">See the Pen <a href="http://codepen.io/qoAop/pen/rmyoVE/">user-select</a> by q∂~∂p (<a href="http://codepen.io/qoAop">@qoAop</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

## まとめ

- WebAppではときどきコントローラ部がごっそり選択されちゃって微妙なことになります。
- なので、全般的にnoneでコンテンツ部をtextにして、コンテンツの電話番号とかをallにするとかだといいのかも？

## 実際にためしてみました。

- Bootstrapの勉強でつくったみたWebアプリ[Today's Lunch](https://todays-lunch.herokuapp.com/)にuser-selectを指定してみました。
- 基本的にはuser-select:noneで、店名と住所はワンクリックで指定できるuser-select:allを指定しました。
- 使い勝手は良くなるかな？
Reactで作るSPA入門

# 概要
- WEB+DB PRESS vol.97のReactで作るシングルページアプリケーション入門の自分用メモ
- https://www.amazon.co.jp/o/ASIN/4774187283/gihyojp-22

# 開発環境の構築
```Bash
cd ~/project
mkdir spa-note
npm init -y
cd spa-note
```

# jsのビルド環境の設定
```Bash
npm install --save react react-dom # Reactのインストール
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react webpack  # babel, webpackのインストール
```

# webpackの設定
## webpack.config.jsの作成
```Javascript:webpack.config.js
module.exports = {
  entry: { js: './src/main.js' },
  output: { path: __dirname + '/public', filename: 'bundle.js' },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
    ],
  },
  devtool: 'source-map',
};
```
※ 本だとoutput/pathが「’./public’」だったが以下のエラーがでたため、「__dirname + '/public'」に変更したら治った
エラー内容
```Bash
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.output.path: The provided value "./public" is not an absolute path!
```

## .babelrcの作成
```Javascript:.babelrc
{
  "presets": ["es2015", "react"]
}
```

## ビルド実行
```Bash
./node_modules/.bin/webpack
```

# 開発用サーバの設定
## webpack-dev-serverのインストール
```
npm install --save-dev webpack-dev-server
```

## webpack.config.jsの修正
```Javascript:webpack.config.js
module.exports = {
  // == 以下を追加 ==
  devServer: {
    contentBase: './public',
    port: 8080,
    inline: true,
    historyApiFallback: true,
  },
  // == 以上を追加 ==
};
```

## htmlの用意
```HTML:src/index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>SPA Note</title>
    <link ref="stylesheet" href="/bundle.css">
  </head>
  <body>
    <div id="app"></div>
    <script src="/bundle.js"></script>
  </body>
</html>
```

## サーバ起動
```Bash
 ./node_modules/.bin/webpack-dev-server
```

## 動作確認
ブラウザでhttp://localhost:8080/index.htmlにアクセスすれば
Hello SPA!と表示されるはず
macOS X SierraとKarabiner-Elementsで英語配列

# SierraではKarabinerが使えない
キーバインドを自由に変更できるツール「[Karabiner](https://pqrs.org/osx/karabiner/index.html.ja)」が、macOS X Sierra以降では利用できなくなり、ASCII配列が身に染み付いた自分にはとても困ったことになった。

で、調べて見たら、機能限定Sierra暫定対応版である「[Karabiner-Elements](https://github.com/tekezo/Karabiner-Elements/blob/master/README.md)」があるらしい。
インストールして少し設定をいじったら英語配列が使えるようになった。

# インストール
1. [Karabiner-Elements](https://github.com/tekezo/Karabiner-Elements/blob/master/README.md)の開発サイトから最新のdmgファイルをダウンロード。
2. ダウンロードしたdmgファイルをダプルクリック。
3. Finderに表示されたpkgファイルをダブルクリック。
4. インストーラが起動するので、画面の指示に従う。

# 設定
インストールすると、設定ダイアログ「**Karabiner-Elements　Preferences**」が表示される。
メニューバーのアイコンから「**Preferences...**」を実行しても表示される。

- Virtual Keyboardタブ
  - Keyboard Typeで「**ANSI**」を選択する。
- Simple Modificationsタブ
  - 「む」を「`~」に変更：「**backslash**」→「**grave_accent_and_tilde**」を追加する。
  - 「￥」を「¥」に変更：「**international3**」→「**backslash**」を追加する。
  - 「ろ」を「¥」に変更：「**international1**」→「**backslash**」を追加する。

以上でJIS配列からASCII配列への変更は完了。
「かな」「英数」も問題なく使えている。
PHPで学ぶデザインパターン(Facadeパターン)

# Facadeパターンとは
facade(ファサード)とは「建物の正面」という意味で窓口としての役割を果たします。
Facadeの役割を果たすクラスやメソッドがシステムの内側にある各クラスの役割や依存関係を考えて、正しい順番でクラスを利用するため、システムの外側(呼び出し元)からするとシンプルなインターフェースとなります。

<img width="569" alt="スクリーンショット 2017-04-29 13.14.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/144753/7196ba56-82f5-17d7-5fb7-281cb8c4c417.png">


# Facadeパターンで登場する概念
## クライアント
Facadeの呼び出し元です。

## Facade
下に出てくるその他大勢のクラスやメソッドの窓口として機能します。

## システムを構成しているその他大勢
それぞれ様々な仕事をするクラスやメソッドで、Facadeの役目をするクラスやメソッドから呼び出されることはあっても、呼び出すことはありません。


# 簡単なコードを書いてみる

##その他大勢
いろいろな処理をするクラスをずらずらと。
これらをクライアントで呼び出すときに、クライアントからすべて呼び出すのか、間に窓口となるクラスを作るのかどうかが今回のFacadeパターンを使うかどうかの違いです。

```php
class Test1
{
    public function doSomething()
    {
        echo 'test1';
    }
}

class Test2
{
    public function doSomething()
    {
        echo 'test2';
    }
}

class Test3
{
    public function doSomething()
    {
        echo 'test3';
    }
}
```
## Facade
窓口となるクラスを作成します。
この中で呼び出したい各メソッドを呼び出し、順番を決めているため、あとはこのメソッドを呼び出すだけです。

```php
class Facade
{
    private $test1;
    private $test2;
    private $test3;

    public function __construct()
    {
        $this->test1 = new Test1();
        $this->test2 = new Test2();
        $this->test3 = new Test3();
    }

    public function run()
    {
        $this->test1->doSomething();
        $this->test2->doSomething();
        $this->test3->doSomething();
    }
}

```

## クライアント
呼び出し元でFacadeクラスのメソッドだけを呼び出しています。
Facadeクラスを使用しない場合には、こちらから各クラスを呼び出すことになります。
Facadeクラス一つを呼び出すだけに比べると、インターフェースの数が多くなりどの順番で呼び出すかなどもこちらで考慮する必要が外部との結合が密になります。

```php
class Client
{
    private $facade;

    public function __construct()
    {
        $this->facade = new Facade();
    }

    public function run()
    {
        $this->facade->run();
    }
}
```

## 実務で使っている場面
昔コントローラーが肥大化してしすぎて手に負えなくなってしまったことがありました。
この時はコントローラーに処理を書きすぎてしまいました。
これは上記の例でいうとクライアントからその他大勢のクラスを呼び出している状況です。

呼び出し元を肥大化させないということと、どんな処理の流れで呼び出しているのかをわかりやすくするためにfacadeパターンの考えを使って、窓口となるメソッドを作成して対応しました。
今回のFacadeパターンはコントローラーを肥大化させないためにも重要な考え方となると思います。

# メリット
Aメソッドの後にBメソッドを呼ばないといけないといったメソッドやクラス同士の関係性のような複雑化しやすいものを、呼び出し元からは単純に見せてくれます。
呼び出し元からFacadeの役割を果たすクラスやメソッドだけ見えている状態なので、インターフェースを少なくすることができ、外部との結合を疎にすることができます。

# 参考
Java言語で学ぶデザインパターン入門
iOS 解像度、画像スケール、アプリアイコンサイズ

# はじめに
端末ごとに解像度、画像スケール、アプリアイコンをまとめました。

## 解像度

| 端末 | Retina | Portrait (px) | Landscape (px) |
|---|---|---|---|
| iPhone X | Retina HD | 1125 x 2436 | 2436 x 1125 | 
| iPhone 8 Plus | Retina HD | 1080 x 1920 | 1920 x1080 | 
| iPhone 8| Retina| 750 x 1334| 1334 x 750 | 
| iPhone 7 Plus | Retina HD | 1080 x 1920 | 1920 x1080 | 
| iPhone 7| Retina| 750 x 1334| 1334 x 750 | 
| iPhone 6 Plus, 6s Plus | Retina HD | 1080 x 1920 | 1920 x1080 | iPhone 6 |  Retina | 750 x 1334 | 1334 x 750 | 
| iPhone 5, 5S, 5C, 6SE | Retina | 640 x 1136 | 1136 x 640 |
| iPhone 4, 4S | Retina | 640 x 960 | 960 x 640 |
| iPhone 1st, 2nd & 3rd Generation | - | 320 x 480 | 480 x 320 |
| iPad Air 1st & 2nd  Generation/ Retina iPad  3rd & 4th	 |  - | 1536 x 2048| 2048 x 1536 | 
| iPad Pro	| -	| 2048 x 2732| 	2732 x 2048| 
| iPad Mini 2nd & 3rd Generation	 |  Retina | 1536 x 2048 | 2048 x 1536 | 
| iPad Mini, 1st & 2nd Generation| - | 768 x 1024| 1024 x 768| 

## 画像スケール

| 端末 | 画像スケール| 画面密度(PPI)| Display Size(inch)| 
|---|:---:|:---:|:---:|
| iPhone X | @3x | 458 | 5.8 | 
| iPhone 8 Plus | @3x | 401 | 5.5 | 
| iPhone 8 | @2x | 326 | 4.7 | 
| iPhone 7 Plus | @3x | 401 | 5.5 | 
| iPhone 7 | @2x | 326 | 4.7 | 
| iPhone 6 Plus, 6s Plus  | @3x | 401 | 5.5 | 
| iPhone 6 | @2x | 326 | 4.7 | 
| iPhone 5, 5S, 5C ,6SE | @2x | 326 | 4.0 | 
| iPhone 4, 4S | @2x | 326 | 3.5 | 
| iPhone 1st, 2nd & 3rd Generation  |  @1x | 163 | 3.5 |  
| iPad Pro| @2x| 264| 12.9| 
| iPad Air / Retina iPad 1st & 2nd Generation/ 3rd & 4th |  @2x| 264| 9.7| 
| iPad Mini 2nd & 3rd Generation | @2x| 326| 7.9| 
| iPad Mini 1st Generation |  @1x| 163| 7.9| 
| iPad 1st & 2nd Generation| @1x| 132| 9.7| 

## アプリアイコンサイズ

| 端末| App Icon(px)| AppStore Icon| Spotlight(px)| Settings(px)| 
|---|:---:|:---:|:---:|:---:|
| iPhone 6 Plus, 6S Plus, 7 Plus, 8, 8 Plus, X | 180x180| 1024x1024| 120x120| 87x87| 
| iPhone7, 6S, 6, 6SE, 5S, 5, 5C, 4S, 4 | 120x120| 1024x1024| 80x80| 58x58| 
| iPhones 1st, 2nd, 3rd Generation| 57x57| 1024x1024 | 29x29| 29x29 | 
| iPad Pro| 167x167| 1024x1024| 120x120  | 58x58 | 
| Retina iPads Mini 2 & 3, Air, 3 & 4|  152x152 | 1024x1024| 80x80| 58x58| 
| iPads 1, 2, Mini 1|  76x76 px | 1024x1024| 40x40 | 29x29| 

## フォントサイズ

| Element| Size (pt)| Weight| Spacing (pt)| Type| 
|---|:---:|:---:|:---:|:---:|
| Nav Bar Title | 17| Medium| 0.5| Display | 
| Nav Bar Button | 17 | Regular | 0.5 | Display | 
| Search Bar | 13.5 | Regular | 0 | Text | 
| Tab Bar Button | 10 | 	Regular | 	0.1 | 	Text | 
| Table Header	 | 12.5 | 	Regular	 | 0.25 | 	Text | 
| Table Row | 16.5 | Regular | 0	 | Text | 
| Table Row Subline | 12 | Regular | 0 | Text | 
| Table Footer	 | 12.5	 | Regular | 	0.2 | Text | 
| Action Sheets | 20 | Regular / Medium	 | 0.5 | Display

## 参考
[・The iOS Design Guidelines](http://ivomynttinen.com/blog/ios-design-guidelines)
AlcatrazをインストールしたらXcodeのプロジェクトを開く時にクラッシュする

#発生した事象
Alcatrazをインストールしたら、Xcodeでプロジェクトを開くときにクラッシュするようになった。
環境:Xcode8.3.1

#対処
下記のファイルを削除したらとりあえず、プロジェクトが開くようになった。
1.Finderで以下ファイルを右クリックし、[パッケージの内容を表示]をクリック
```/[プロジェクト格納ディレクトリ]/[プロジェクトフォルダ]/[プロジェクト名].xcodeproj
```

2.いくつか表示されるファイルの内、以下を削除する。
```project.xcworkspace```

3.Xcodeを起動し、プロジェクトを開く

~~これでプロジェクトは開くようになったが、まだ特定のファイルを開くとクラッシュしてしまう。対処法を試行錯誤中ですorz~~
Xcode8.3.2にアップデートしたら治りました。
Pythonで、呼び出し方によってメソッドの振る舞いを変える

# 通常の定義と呼び出しの結果
Pythonのクラスのメソッドは3種類ある。

- 通常のメソッド（インスタンスメソッド）
  - 第1引数は必須で、慣例として`self`にする。
  - インスタンス経由で呼び出すと、呼び出したインスタンスが第1引数に入る。
  - クラス経由で呼び出すと、呼び出したときの引数がそのまま渡される。
- クラスメソッド
  - `@classmethod`を付けて定義する。第1引数は必須で、慣例として`cls`にする。
  - インスタンス経由で呼び出すと、呼び出したインスタンスのクラスが第1引数に入る。
  - クラス経由で呼び出すと、そのクラスが第1引数に入る。
- スタティックメソッド
  - `@staticmethod`を付けて定義する。引数は必須ではない。
  - 呼び出したときの引数がそのまま渡される。

```python
class C:
  val = 20
  def __init__(self):
    self.val = 1
  def normal_method(self, v):
    return self.val + v + 2
  @classmethod
  def class_method(cls, v):
    return cls.val + v + 3
  @staticmethod
  def static_method(v):
    return C.val + v + 4

i = C()
i.normal_method(5)    # i.val + 5 + 2 = 1 + 5 + 2 = 8
i.class_method(6)     # C.val + 6 + 3 = 20 + 6 + 3 = 29
i.static_method(7)    # C.val + 7 + 4 = 20 + 7 + 4 = 31
C.normal_method(5)    # requires 2 args but 1: error
C.normal_method(i, 6) # i.val + 6 + 2 = 1 + 6 + 2 = 9
C.normal_method(C, 7) # C.val + 7 + 2 = 20 + 7 + 2 = 29
C.class_method(8)     # C.val + 8 + 3 = 20 + 8 + 3 = 31
C.static_method(9)    # C.val + 9 + 4 = 20 + 9 + 4 = 33
```

# メソッドの呼び出し方で振る舞いを変える
通常のメソッドも関数であることに変わりはない。

- 第1引数が`self`というのは単なるお約束であって、`self`の型については制約はない。
- インスタンス経由で呼び出すと、処理系が勝手に第1引数にそのインスタンスを入れている。

これを逆手にとって、第1引数によって振る舞いを変えることができる。

```python
class C:
  # 上記に追加
  def trick_method(arg, v):
    if isinstance(arg, C):
      return arg.val * 2 * v
    else:
      return C.val + arg * v

i.trick_method(4)    # i.val * 2 * 4 = 1 * 2 * 4 = 8
C.trick_method(5)    # requires 2 args but 1: error
C.trick_method(6, 7) # C.val + 6 * 7 = 20 + 6 * 7 = 62
C.trick_method(i, 8) # i.val * 2 * 8 = 1 * 2 * 8 = 16
C.trick_method(C, 9) # C.val + C * v: error
```

上記の`trick_method()`は、インスタンス経由では通常のメソッドのように振る舞い、クラス経由ではスタティックメソッドのように振る舞っている。

本来であれば、振る舞いが違うのなら別メソッドにするべきである。

# 実例
こんな変な使い方は、インスタンスをグループで管理するクラスを製作中に思いついた。

```
class Student:
  rooms = {}
  def __init__(self, room):
    self.myroom = room
    if not room in Student.rooms:
      Student.rooms [room] = []
    Student.rooms [room].append(self)

  def classmates(self_or_room):
    if isinstance(self_or_room, Student):
      self = self_or_room
      for s in Student.rooms[self.myroom]:
        if s != self:
          yield s
    elif self_or_room in Student.rooms:
      room = self_or_room
      return iter(Student.rooms[room])

Ann = Student('3-A')
Bob = Student('3-B')
Cathy = Student('3-B')
Dan = Student('3-A')
Ellen = Student('3-A')
Fred = Student('3-B')

mates_of_ann = Ann.classmates() # Dan, Ellen
mates_of_3A = Student.classmates('3-A') # Ann, Dan, Ellen

mates_of_bob = Bob.classmates() # Cathy, Fred
mates_of_3B = Student.classmates('3-B') # Bob, Cathy, Fred
```

# 注意
デコレータ付き(`@property`とか`@classmethod`とか)のメソッドでは、この方法は使えない。
Linuxで簡単に無線Lanアクセスポイントを作る

どうも。かちおです。
自分の学校の教室の壁にLanポートがあるが学内wifiは無いので、ラズパイでアクセスポイントを作ってみました。別にラズパイでなくとも動くことは確認しています。
※この記事の内容について、施設管理者の許可を得て実行しています。大学などによっては怒られるだけじゃ済まない可能性があるため、注意してください。

# 環境
- Linux系OS (ラズパイ1B+、ラズパイ3、Ubuntuノートパソコンで動作確認しました。) 
- 有線Lanと無線LanのNICが両方パソコンに積んであること（要するにパソコンに有線Lanポートと無線Lanの機能が両方あればOK。） 

 もしパソコンに機能が無い場合でも、USBで取り付けるタイプの有線Lanポートや無線Lan子機で動作可能。

# インストール
本来はhostapdというものでL2層でパソコンとwifiをつなげて、さらにその上でLinuxブリッジを作成して、IP も動的割当にするためにDHCPサーバーを建てなければいけません。
が、面倒なので、それらを自動化してくれるシェルスクリプトを使用します。
これはcreate_apというもので、コマンド１つで無線Lanアクセスポイントを作ることができます。

まずは依存しているパッケージをインストールしましょう。

```shell-session:UbuntuやDebian系の場合
$ sudo apt install bash util-linux procps hostapd iproute2 iw
```
CentosやRHEL系の場合は…ごめんなさい自分で調べてください。
Macの場合も…ごめんなさい。

次に適当な場所でcreate_apをダウンロードしましょう。

```shell-session:全OS共通

$ curl https://raw.githubusercontent.com/oblique/create_ap/master/create_ap
```

そしてコマンドとして使えるように、パスの通った場所に移動させましょう。
また、実行フラグも付けておきましょう。

```shell-session:全OS共通
$ sudo mv ./create_ap /usr/local/bin/
$ sudo chmod +x /usr/local/bin/
```

これでコマンドとしてcreate_apが使えるようになりました。
もしシェルの予測変換が聞かない場合は一旦ターミナルを消してもう一度ターミナルを実行してみてください。

# 使い方

まず、以下のコマンドでパソコンに乗っているNIC（ネットに接続する機械）を表示させましょう。

```shell-session:全OS共通
$ ip a
```

これを実行すると、だらだら〜っと表示が流れてきます。このなかでenoやenpやethで始まるものが有線Lanのポート、wlpやwlanで始まるものが無線Lanのポートです。これがそれぞれのNIC名になります。
もし複数Lanポートがあったり無線Lanの子機を接続してる場合はそれぞれ複数出てくると思います。とりあえずなんとなく雰囲気でどれがどれか察してみてください。

両方ともその名前を控えておいてください。

そしてコマンドの標準の使い方は以下です。

```shell-session:全OS共通
$ create_ap 無線LanのNIC名 有線LanのNIC名 SSID(Wifiの名前) パスワード
```

例として以下のようになります。

```
$ create_ap wlan0 eth0 test password
```

この場合スマホ等からtestという名前のwifiを見ることができ、passwordというパスワードで接続することができます。

# カスタマイズ

玄人むけです。結構色々とできるみたいです。

オプション

- -c 数字 # wifiのチャンネル番号を指定（デフォルトは1）
- --isolate-clients # wifiのクライアント同士が通信できなくなる
- --hidden # アクセスポイントを非表示にできる
- --freq-band 数字 # 2.4か5を指定することで、周波数帯を選べる
- --daemon # デーモン化し、プロンプトが帰ってくる。
- --stop 無線LanのNIC名 # そのNICでデーモン化して動いているcreate_apを止められる
SwaggerでAPI通信のコードを自動生成させて楽をしよう！

# 概要
API通信処理、どんな方法で実装していますか？

クライアントアプリを開発してると何かと書く機会が多い部分ですが、アプリごとに頑張って書いていくの面倒ですよね。

同じ言語ならライブラリとして切り出せば良いですが、プラットフォームが違う場合は大抵言語も違うので、その場合は再開発する必要が出てきて辛いですよね。

そういう時はSwaggerを使うとその問題解決、あるいは軽減できるかもしれません。

今回はSwaggerを使った通信処理を自動生成する方法を紹介したいと思います。

# こんな人にオススメ
- APIドキュメントの追従や管理がつらい
- プラットフォームごとに実装書くのつらい
- JSONをいい感じにパースするライブラリがない
  - （もしくはあるけど実装がめんどい）
- APIガッツリ使うプロダクトなのに、開発開始直後でサーバー側にAPIが用意されてない
  - 結合まで待ってたら作業進まない

javaはGsonとかjsonicとかアノテーションベースでパースできるからあんまし気にしてなかったけど、iOSで簡単なアプリ作ってた時は個人的には面倒に感じていました。

# Swaggerとは
##  特徴
- yamlもしくはjsonからAPIの通信処理が自動生成できる
  - 言語も一つノファイルから複数に書き出せる
- 書き出したファイルからAPIドキュメントが自動生成できる
   - ファイルを修正していけば、通信処理のコードも新しくなってくしドキュメントも追従されていく
   - メンテの忘れで乖離が発生しにくくなる
- 書き出したファイルからモックレスポンスを返すサーバーを立てれる

## インストール
自動生成するための環境自体はすぐに用意できる
### mac
`$ brew install swagger-codegen`

### linux
`$ wget http://central.maven.org/maven2/io/swagger/swagger-codegen-cli/2.2.2/swagger-codegen-cli-2.2.2.jar -O swagger-codegen-cli.jar`

## 試しにコードを自動生成してみる
コマンドの`-l`オプションに生成したい言語のコードが生成される

### mac
`swagger-codegen generate -l java -i hoge.yml -o build/output/`

### linux
`java -jar bin/swagger-codegen-cli.jar generate -l java -i hoge.yml -o build/output/`

### yamlからAPIのドキュメントとスタブサーバーを自動生成する

nodejsで立てる場合はこんな感じ

```
$ swagger-codegen generate -l nodejs-server -i hoge.yml -o build/output/
$ cd build/output/ && node index.js
```

立ち上げるとドキュメントとモックが返るURLが用意される。モックは定義したAPIのリクエストからレスポンスを適当な文字や数字で返してくれる。

- ドキュメントを見る場合
  - `http://localhost:3000/doc` 
- モックを見る場合
  - `http://localhost:3000/{定義したAPIエンドポイント}`

# 所感

- 面倒なAPIクライアント処理を自動生成できるのは便利
- APIドキュメントに流用できるので、wikiで頑張って管理しなくて良い
  - 後述するswagger-playあたりを活用すれば、コードとドキュメントの乖離を減らすこともできる
- stubサーバーが返すレスポンスは貧弱
  - これに関しては良いライブラリを見つけたので別記事で紹介する
- 自動生成されるコードの依存が古い
  - バージョンアップの期間に幅があるので、そこらへんは少し心配かもしれない。

## Android開発から見たSwagger
- __RxJava__ が使える
  - ただしRxJava2は非対応
  - 最近PRがマージされたようなので直近で対応されるかも
- __Retrofit__ が使える
  - こちらはRetrofit2も対応

Android開発だけで見ると、Retrofitのおかげで大分開発しやすいので恩恵は薄いですが、他の言語にも使えるフォーマットから自動生成できるのは便利ですね。

あとドキュメントなどにも応用できるなど考えると、__導入するメリットはそれなりにありそう__ に感じました。

##  Swaggerは何にでも使える便利な仕組みなのか

そんなことはないと思います。
中には表現できないAPIも存在します。

複雑な配列を返すようなものは現状厳しそうです。
(anyOf的な表現が非対応)

ただ継承関係みたいな表現は可能なので、うまくやれば大体の構造はいけると思います。
ここらへん参照
http://swagger.io/specification/

# おまけ
## サーバー側の実装から生成できないの？

せっかくサーバー側でリソースやエンドポイントも定義して実際の処理はそっちで書かれるのにyamlにも書くの？と思うかもしれませんが、yaml以外の方法でもSwaggerのファイルを生成することができます。

### swagger-play
アノテーションベースでSwaggerを定義できるっぽい。
自前でAPI用意する場合はこういうのからSwaggerを生成する方が現実的な気がしますね。

https://github.com/swagger-api/swagger-play
書籍『Ruby on Rails 5 超入門』つまずきやすいポイントまとめ【Chapter6 最終回】

# 関連記事

* [書籍『Ruby on Rails 5 超入門』つまずきやすいポイントまとめ【Chapter1】](http://qiita.com/laineek/items/50282a1d152098f42e15)
* [書籍『Ruby on Rails 5 超入門』つまずきやすいポイントまとめ【Chapter2】](http://qiita.com/laineek/items/121a9a20d5eb26fb56f4)
* [書籍『Ruby on Rails 5 超入門』つまずきやすいポイントまとめ【Chapter3】](http://qiita.com/laineek/items/86d392541e3278dd95d3)
* [書籍『Ruby on Rails 5 超入門』つまずきやすいポイントまとめ【Chapter4】](http://qiita.com/drafts/408dc12e2c5f8c86d48c)
* 書籍『Ruby on Rails 5 超入門』つまずきやすいポイントまとめ【Chapter5】
    * 特にありませんでしたので、作成していません。
* 書籍『Ruby on Rails 5 超入門』つまずきやすいポイントまとめ【Chapter6 最終回
】　★今ここ

初心者の友人向けにはじめたシリーズですが、１冊無事に終わることができました。何事もちゃんとやりきると嬉しいですね（涙）

# 私の環境

* Windows 10 Home 64bit
* Ruby 2.2.6
* Rails 5.0.2

# つまずきやすいポイント

## [p.434] RSSリーダー作成：Netの名前解決ができない

### 事象

書籍通りに作成すると次のエラーが発生します。

```
NameError (uninitialized constant AjaxController::Net)
```

### 原因

Netライブラリが読み込めていないため、エラーになっています。

### 解決方法

AjaxControllerの冒頭にrequireを追加してください。

```ruby
class AjaxController < ApplicationController
	layout 'ajax'
	require 'net/http' # この一行を追加する
	# ... 省略 ...
end	
```

## [p.434] RSSリーダー作成：パースエラーが発生する

### 事象

Yahoo!ニュースヘッドラインにアクセスすると、次のエラーが発生します。

アクセスするURL：

```
http://news.yahoo.co.jp/pickup/rss.xml
```

エラー内容：

```
REXML::ParseException (Missing end tag for 'meta' (got "head")
```

### 原因

Yahoo側の都合ですが、上記URLにアクセスすると、HTTPSにリダイレクトされています。リダイレクトしているので想定するコンテンツ（ニュース一覧）ではない、レスポンスが返ってきています。その結果、パースエラーが発生しました。

### リダイレクト有無の確認方法

ブラウザのデバッグツールを起動（ChromeならF12キーを押下）して、改めてURLにアクセスしてみてください。次のようにリダイレクトされているのが確認できます。

[301] http://news.yahoo.co.jp/pickup/rss.xml
↓
[200] https://news.yahoo.co.jp/pickup/rss.xml

![https___news_yahoo_co_jp_pickup_rss_xml.jpg](https://qiita-image-store.s3.amazonaws.com/0/170816/c9d92e09-bbe6-a1d0-6d31-3a03156ece6a.jpeg)


プログラムでも確認できます。レスポンスの中身をコンソールに出力して確認してみてください。

```ruby
	url = URI('http://queryfeed.net/twitter?q=%23ruby&title-type=user-name-both&geocode=')
	http = Net::HTTP.new(url.host)
	response = http.get(url)
	
	logger.debug response.inspect # デバッグ用に追加
	# <- #<Net::HTTPMovedPermanently 301 Redirect readbody=true>
```

### 解決方法

実用的なものを作るのであれば、「リダイレクト先を遡って、何回まで許容する」といった処理を追加する必要があります。

ただし、書籍の学習範囲から逸れてくるので、とりいそぎ解決したいのであれば、次の条件のシンプルなRSSフィード用のURLを探して設定してください。

* リダイレクトしないもの。（いきなり200になる。）
* HTTPSではなくHTTPのもの。
	* HTTPSのURLにいくにはまた別のコードを追加する必要になります。

例えば、[QueryFeed](http://queryfeed.net/)からURLをとってくるとよいです。

（あくまで学習を急ぐ人用の解決方法なので、上記をどうやって解決できるか自分で調べてみるともっと勉強になると思います！）

## [p.445] メソッド名末尾の「!」とは

deviseのログインチェックに「authenticate_account!」というメソッドを呼び出しています。末尾の「!」の意味は次の通り。

> def xxx!
> 「!」はメソッド名の一部です。慣用的に、 同名の(! の無い)メソッドに比べてより破壊的な作用をもつメソッド(例: tr と tr!)で使われます。

引用元：[Rubyで使われる記号の意味（正規表現の複雑な記号は除く） (Ruby 2.4.0)](https://docs.ruby-lang.org/ja/latest/doc/symref.html)

今回の場合では、戻り値ではなく副作用として、accountというモデルの状態を変えてしまうのできっとついてるんですかね。
 

# 誤植

明らかなものは見つかりませんでした。（いや、当たり前なんですけど！）

# 最後に

無事に１冊終わりました。RubyやRailsに関わらず、Webアプリに関わったことがない人にも**基礎から教えてくれる非常に素晴らしい本**です。なので、ちょっとつまりそうかな、というところを、フォローさせて頂きました。友人向けに書き始めたものですが、これからはじめるどこかのだれかにも役に立ってくれると嬉しいなと思います。読んでいただいてありがとうございました。
configure のソースを見る

GRASS 7 をどのようにビルドしても、X11 に依存してしまう。

<pre class="terminal">$./configure --help</pre>

としても、


<pre>  --with-opengl           support OpenGL functionality (default: yes)

  --with-opengl-includes=DIRS
                          OpenGL include files are in DIRS
  --with-opengl-libs=DIRS OpenGL library files are in DIRS
  --with-opengl-framework=DIR
                          OpenGL framework is in DIR</pre>

となるだけだ。

ある日、ふと configure のソースを見ると、


<pre>case "$with_opengl" in
        n|no)
                OPENGL_TYPE=none
                ;;
        y|yes|x|x11|glx)
                OPENGL_TYPE=X11
                USE_OPENGL=1
                OPENGL_X11=1
                ;;
        aqua|mac|osx|macosx|agl)
                OPENGL_TYPE=Aqua
                USE_OPENGL=1
                OPENGL_AQUA=1
                ;;
        win|windows|mswin|wgl)
                OPENGL_TYPE=Windows
                USE_OPENGL=1
                OPENGL_WINDOWS=1
                ;;</pre>

なんと、aqua とか mac とかしないと、X11 として認識するのか！

configure --help だけでなく、やはりソースを見るのが大事と言う話でした。

おかげで、grass72-mac というパッケージが Fink でできました。
AtomのMarkdownプレビュー機能を使ってみた

プレビュー機能のあるMarkdownエディタを探していたところ、
普段使っているAtomに機能が備わっていることがわかったのでメモしておく。

## 環境
OS Mac Sierra
Atomバージョン 1.16.0 x64 https://atom.io/

## 手順
1. Atomで既存ファイル or 新規ファイル を開く。
2. [control] + [shift] + [M] キーを入力するとプレビューが開く。
3. ファイルにMarkdownで記述すればリアルタイムにプレビューが表示される。

## 補足
プレビュー機能は「Markdown Preview」というコアパッケージに含まれる。
Markdownで改行する場合、行の末尾に半角スペースを２つ入れなければならないが、
プレビュー機能の設定を変えると、通常の改行でプレビューされる。

## 通常の改行をプレビューに反映する設定
1. Atomの [環境設定] を開く。Atom上に [設定] タブが開く。
2. [設定] タブの [Packages] を選択する。
3. [インストール済みのパッケージ] に「Markdown Preview」と入力すると、画像のように表示される。
4. コアパッケージに表示された「Markdown Preview」の [設定] を選択する。（英語の場合は [設定] が [Settings] と表示される）
5. Settings の「Break On Single Newline」にチェックを入れる。

以上。
.batでカレントディレクトリ名だけを取得する【メモ】

### やりたいこと

カレントディレクトリのパスではなく、カレントディレクトリ名だけを取得したい。

つまり、出力結果として、`C:\build\sample01`ではなく
`sample01`がほしい。

### 使いどころ

CMakeでout-source-buildするときの下準備として、
ソースコードと同名のフォルダを自動生成したい。

### （参考）カレントディレクトリのパスを取得する
```bat
%CD%
```

### カレントディレクトリ名だけを取得する
ついでにその同名フォルダを生成。

```bat:hoge.bat  
@echo off  
:: set build directory  
call ..\tools\GetCdName.bat .
set BUILD_DIR=C:\build\%DIRNAME%  
mkdir -p %BUILD_DIR%
exit /b  
```

```bat:\tools\GetCdName.bat  
@echo off
call set DIRNAME=%~n1
echo %DIRNAME%
exit /b
```

`%~n`で、ファイル名だけを抜き出すことができる。
これを対象フォルダのパスに対して行う。
CloudFormationがCognito対応したらしいので試してみた

すいません、弊社ブログに書きました。下記から御覧ください。

- [前編：シンプルにUserPoolを作る](https://techblog.hc-mti.com/2017/04/29/549/)
- [後編：FederatedIdentityも作る](https://techblog.hc-mti.com/2017/04/29/556/)

待ちに待った機能がリリースされて、控えめに言っても最高です！
Go言語 | goroutineの基本 ( Go by Example より )

[Go by Example: Goroutines](https://gobyexample.com/goroutines) に以下のサンプルがある。

```go
package main

import "fmt"

func f(from string) {
	for i := 0; i < 3; i++ {
		fmt.Println(from, ":", i)
	}
}

func main() {
	f("direct")

	go f("goroutine")

	go func(msg string) {
		fmt.Println(msg)
	}("going")

	var input string
	fmt.Scanln(&input)
	fmt.Println("done")
}

```

# 解説

## 普通に出力を行う部分

これは必ず実行される。

```go
f("direct")
```

## 非同期でループ実行される部分。

```go
go f("goroutine")
```

## 非同期で1回だけ実行される部分。

```go
go func(msg string) {
	fmt.Println(msg)
}("going")
```

## ユーザー入力を待つ部分

これがないと、プログラムが非同期処理より早く終わってしまって、結果が出力されない。

```go
var input string
fmt.Scanln(&input)
fmt.Println("done")
```


要するに非同期処理が終わるまで待てば良いので、Sleep とかでも同じことが出来るようだ。

```go
time.Sleep(100000)
fmt.Println("done")
```

## 実行結果

```
goroutine : 0
goroutine : 1
goroutine : 2
going
```

いまいち非同期処理されていることが分かりづらい。

## ループ回数を増やしてみよう

```diff
- for i := 0; i < 3; i++ {
+ for i := 0; i < 30; i++ {
```

## 結果

非同期処理されているのが分かりやすくなった。
(コマンドを走らせるたびに `going` の位置が変わることに気付くだろう)

```
..
goroutine : 3
goroutine : 4
goroutine : 5
going
goroutine : 6
goroutine : 7
goroutine : 8
..
```

# 環境

- go version go1.8.1 darwin/amd64








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
numpy > savetxt() > 1次元のデータ書き出しは、各要素に改行が入る > 2次元にする

```txt:動作環境
GeForce GTX 1070 (8GB)
ASRock Z170M Pro4S [Intel Z170chipset]
Ubuntu 14.04 LTS desktop amd64
TensorFlow v0.11
cuDNN v5.1 for Linux
CUDA v8.0
Python 2.7.6
IPython 5.1.0 -- An enhanced Interactive Python.
gcc (Ubuntu 4.8.4-2ubuntu1~14.04.3) 4.8.4
GNU bash, version 4.3.8(1)-release (x86_64-pc-linux-gnu)
```

numpyでsavetxt()を使っていてはまった。

```test_python_170429a.py
import numpy as np

wrk = [ 3.1415, 2.718, 6.022, 1.023 ]
np.savetxt('testout.csv', wrk, fmt="%.4f")
```

```testout.csv
3.1415
2.7180
6.0220
1.0230
```

要素ごとに改行が入る。

[numpy.savetxt saving every element on new line?](http://stackoverflow.com/questions/33716509/numpy-savetxt-saving-every-element-on-new-line)
> If you give np.savetxt a 1-d array, it will treat said array as a column and write each entry on a new line. 

### v0.2

二次元にすればいいようだ。

```test_python_170429a.py
import numpy as np

wrk = [[ 3.1415, 2.718, 6.022, 1.023 ]]
np.savetxt('testout.csv', wrk, fmt="%.4f")
```

```testout.csv
3.1415 2.7180 6.0220 1.0230
```

### v0.3

reshapeでも可能。

```test_python_170429a.py
import numpy as np

wrk = [ 3.1415, 2.718, 6.022, 1.023 ]

wrk = np.array(wrk).reshape(1,4)

np.savetxt('testout.csv', wrk, fmt="%.4f")
```

v0.2ではこちらのコードでうまく実装できなかった。
reshapeなら楽だ。
Xamarin StudioにReactivePropertyを追加できない件

Xamarin StudioにReactivePropertyのパッケージを追加しようとすると、こんなメッセージが出て失敗する。

```
Could not install package 'System.ComponentModel.Annotations 4.1.0'. You are trying to install this package into a project that targets '.NETPortable,Version=v4.5,Profile=Profile111', but the package does not contain any assembly references or content files that are compatible with that framework. For more information, contact the package author.
```

- Xamarin Studio 6.3
- ReactiveProperty 3.6.0

2017年4月現在、Xamarin StudioにはReactivePropertyの3.x系はインストールできない模様。
2.9.0ならOKらしい。
https://teratail.com/questions/66438
システムエンジニアの弱点を武器にする方法


システムエンジニア、プログラマというのは面白い仕事である。
たとえば「記憶力の低さ」が有利に働く場合がある。

- 自分が書いたコードは3日も覚えてられない
- だからこそ、覚えておかなくても良いコードを書く

これが有効に働く。

なぜなら「覚えておかなければいけないコード」よりも「覚えておかなくて良い」コードの方が優れているからだ。

# 弱点が武器になる

僕の場合は、

- 変数名やクラス名などで、名前付けがすごく気になる。
- 名前と実体やイメージがズレていると、いつまで経ってもコードをよく理解できない。
- テストの説明 ( rspec だと `it "diplays user accounts"` みたいな部分 ) が曖昧だと、テストが仕様書として読めずに、混乱する。

という弱点がある。

だがこれは、

- そもそも実体と乖離しない、理解しやすい名前をつける。
- 仕様書として読めるテストを書く。
 
という長所に置き換えられる。
(少なくとも、それを意識してコードを書くことは出来る)

# 理解力の低さを武器にする

これは「理解力が高い人」には出来ない芸当だ。
なぜなら、ある特定の領域を「すんなり理解できる人」はそもそも「理解しづらい部分」がどこか分からないからだ。

なので「理解しづらいと思った人」が声を挙げて、真っ先に改善を施すことによって、コードや開発環境はより良いものにすることが出来る。

ちなみに「理解力の高さ」は領域によって変わる。ある領域では理解力が低い人が、ある領域では高かったりする。
あくまでも特定のコンテキストにおける話だと考えてほしい。


# 分かりづらいことは分かりづらいと言ってみよう

開発環境やコーディング方法の改善のきっかけとなるのは、「これは分かりにくい」「これはやりづらい」という個人的感覚である。

だから「分かりづらいこと」を「分かりづらい」と言ったり、「やりづらいこと」を「やりづらい」と言うことは意外に重要だ。

これは決して、コードやプロジェクトを理解する努力を放棄しろという意味ではない。
何百回理解しようと努力しても、何百回でも自分が突き当たる「ネック」には、何か落とし穴が隠れているはずという話だ。

それをメンバーにシェアした結果

- 他の人にも、実は分かりづらかった。
- 自分だけが、分かりづらかった。

という2種類の、どちらかのフィードバックを得ることが出来るだろう。

# 初心者向け注意

1. 自分が理解できていない部分
1. 実装的に分かりづらい部分

この違いを区別するには、

- プロジェクトの内容が理解できている
- 技術的な事柄が理解できている

ということが前提となる。

もしプロジェクトや技術領域がよく理解できていないなら、まずは理解する努力をしてみよう。

# 熟練者向け注意

逆にプロジェクトや技術分野に慣れた熟練者の場合、状態化している問題は、特に意識にのぼらなくなる。
関わっている年数が長ければ長いほど、自分自身が問題に最適化してしまって、問題自体が見えにくくなるからだ。

なので、

- 意識的に開発の死角を見つけ出す。
- プロジェクトに慣れていない人の声に耳を傾ける。

ということが重要になってくるだろう。

# 具体例

自分の場合。

- API エラーを起こした時に Slackに飛んでくる通知の情報量が少なく、毎回調査コストが発生していたのを、詳細なエラーが表示されるようにした。
- Github のレビューで何個の + が付いているかを一覧するために、Approve機能を使うようにした。(それ以前は +1 を表現するために、Convesations にコメントを付けていた)
- Github で レビュー中の状態を分かりやすく示すために、レビューリクエスト機能を使ってはどうかと提案した。(この提案はウケが悪かったので)
  - たとえ提案が却下されても、チームとして失うものは何もない。
- Wikiの情報が腐っているのに気付いたら、すぐに更新する。

というようなことを実践した。

上記は非常に些細な事ではあるが、誰かが最初に声を上げなければ改善されなかった部分ではある。
そしてこういった小さな改善を積み重ねることによって、僕たちがコアなストーリーに使える時間は少しずつ増えて行くのである。

エンジニアにもっとも重要なのは、開発における幸福度だと僕は考える。

# まとめ

- システムエンジニアは、特定の能力の低さを武器に出来る
- 自分の欠点をカバーするための改善は、全体にも寄与する可能性がある。

# 関連記事

- [プログラミングのモチベーションのバリエーション (己を知れば百戦危うからず) - Qiita](https://qiita.com/YumaInaura/items/a07d46e43f2fbc94ef78#_reference-b120b5cf2c29e6c40ed6)
- [流行りのモブプログラミングをやって分かった 個人の開発手法の違い - Qiita](http://qiita.com/YumaInaura/items/ef2904676ad1707b7001)

## [4年勤めたNTTを退職して1年が経ちました - Qiita](https://qiita.com/__issssey/items/34bb9671aa140a2a9e35)

>技術力なんて持っていなかった
>我々がドキュメントの体裁を整えているとき、彼らはずっとプログラムを書いています。

>マネジメント能力で戦える
>一方で彼らは綺麗なV字モデルでの開発経験はありません。
>システムの仕様に関してお客様と揉めた経験もありません。








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
windowsでTensorFlow その5

#概要
windowsのtensorflow環境で、"General AI Challenge"やってみた。

#写真
![jj.jpg](https://qiita-image-store.s3.amazonaws.com/0/18104/90f0a798-c344-5e09-1dc0-977445f9abf8.jpeg)
![tt.jpg](https://qiita-image-store.s3.amazonaws.com/0/18104/253ae1cb-b6f9-64b9-bf03-06c36a81fc82.jpeg)

#環境
windows 7 sp1 64bit
anaconda3
tensorflow 1.0
pyqt5

#インストール
attrs
future
pyzmq
six
zmq
pluggy
py
tox
tox-battery
virtualenv
FAdo
git
iPhoneからSlackアカウントを作り、ログインする方法

##はじめに
今回は、Slackのチームの管理者がログインするメンバーに招待メールを送っていることを前提とします。

##やってみよう
まず、[Slackのアプリ](https://itunes.apple.com/app/slack-app/id618783545?ls=1&mt=8)をダウンロードしましょう。

次に、管理者からの招待メールを確認し、Join Nowをタップしてください。
<img width="375" alt="IMG_0826.png" src="https://qiita-image-store.s3.amazonaws.com/0/43650/eebf5c63-8c32-3d95-14f4-5ebc924305bd.png">

すると、Slackのアプリが起動し、下のような画面になると思うので、自分の好きなユーザーネームを入力してNextをタップしてください。
<img width="375" alt="IMG_0827.png" src="https://qiita-image-store.s3.amazonaws.com/0/43650/e90a6f31-7176-f91d-6c85-11ce559bcb04.png">

次に、Passwordを設定する画面に移るので、自分の新しいPasswordを入力してNextをタップしてください。
<img width="375" alt="IMG_0828.png" src="https://qiita-image-store.s3.amazonaws.com/0/43650/64c31456-a4d0-f7dd-52ac-40e87197edbe.png">

最後に、I Agreeをタップしてください。
これで、SlackをiPhoneからも使うことができます。
<img width="375" alt="IMG_0829.png" src="https://qiita-image-store.s3.amazonaws.com/0/43650/dadda89f-cbc6-f07d-e9c3-ea8b1e823030.png">

##まとめ
管理者からの招待メールを使うとiPhoneからでも簡単にアカウントを作ることができるのでおすすめです。
Gulpで自分自身(gulpfile.js)を監視する

# Gulpで自分自身(gulpfile.js)を監視する
serve や watch などのタスクを記述するときに gulpfile.js 自身にもホットスワップが欲しいと思っていたので
https://github.com/gulpjs/gulp/issues/1009
を参考にしながら記述。
## いきなり結論
```js
const argv = require('yargs').argv;
const cp = require('child_process');

let childProcess;
function spawnChildProcess(task) {
    childProcess && childProcess.kill();
    childProcess = cp.spawn('gulp', [task], {stdio: 'inherit'});
}

gulp.task('self-watch', function () {
    const task = argv.task || 'default';

    spawnChildProcess(task);
    gulp.watch(__filename, function () {
        spawnChildProcess(task);
    });
});
```
## 使い方
```bash
gulp self-watch --task=watch
```
のように使う。package.json にスクリプトとして追加しておくと便利。

```json
{
  "scripts": {
    "build": "gulp build",
    "serve": "gulp self-watch --task=serve",
    "watch": "gulp self-watch --task=watch"
  }
}
```

## 結果
![Screenshot from 2017-04-29 07-51-15.png](https://qiita-image-store.s3.amazonaws.com/0/102243/ab4b5649-4518-5e15-a70c-2770352e0174.png)
これは便利。
DATAハンドルを読み直して内容を２回表示する

`__END__`または`__DATA__`以下に書いた文字列は特殊ハンドルDATAで読み込むことができる。

```
use 5.12.0;
while (my $line = <DATA>) {
        chomp $line;
        say "1 $line";
}
__END__
111
222
333
# 出力結果
1 111
1 222
1 333
```

ファイルハンドルなのでpostionが最後のままなので２回は読めない

```
use 5.12.0;
use warnings;

while (my $line = <DATA>) {
        chomp $line;
        say "1 $line";
}

while (my $line = <DATA>) {
        chomp $line;
        say "2 $line";
}
__END__
111
222
333
# 出力結果
1 111
1 222
1 333
```

２回読むにはseek関数で位置をリセットする

```
use 5.12.0;
use warnings;

while (my $line = <DATA>) {
  chomp $line;
  say "1 $line";
}
seek DATA, 0, 0;

while (my $line = <DATA>) {
  chomp $line;
  say "2 $line";
}
__END__
111
222
333
出力結果
1 111
1 222
1 333
2
2 use 5.12.0;
2 use warnings;
2
2 while (my $line = <DATA>) {
2       chomp $line;
2       say "1 $line";
2 }
2 seek DATA, 0, 0;
2
2 while (my $line = <DATA>) {
2       chomp $line;
2       say "2 $line";
2 }
2 __END__
2 111
2 222
2 333
```

seek関数で0指定だとファイルの先頭を指してしまうのでtell関数で事前に取得しておく。

```
use 5.12.0;
use warnings;

my $pos = tell DATA;
while (my $line = <DATA>) {
  chomp $line;
  say "1 $line";
}
seek DATA, $pos, 0;

while (my $line = <DATA>) {
  chomp $line;
  say "2 $line";
}
__END__
111
222
333
出力結果
1 111
1 222
1 333
2 111
2 222
2 333
```
技術英語 > has no equal / a fit companion / nothing compared to

Huluで見た「マイティー・ソー」という映画の9分あたり。

ソーの親であるオーディンがソーに対して武器の説明をしている場面。

これほどの武器はない、という賛辞の意味を込めてのhas no equal。

適当リスニング (間違っているかもしれない)
> Its power **has no equal**, so, a weapon to destroy, or is the tool to build, **is a fit companion** for a King.

字幕は
> そのパワーは強大で、すべてを破壊する武器となり、創造する道具ともなる。王が持つにふさわしい。

http://ejje.weblio.jp/content/be+not+equal+to
> be not equal to
> 〈できない〉・かなわない、及びもつかない

<hr>
以下を見つけた。

nothing compared to

http://eow.alc.co.jp/search?q=%22nothing+compared+to%22
> 《be ～》～に比べたら何でもない［物の数ではない］

https://www.merriam-webster.com/dictionary/nothing
> You think that's bad? It's nothing compared to what I went through.
Vagrantで開発環境作成

# Vagrant

おうちから触れる CentOS 環境が欲しくなったので、
今更 Vagrant を Mac Air にいれてみる。

Vagrant: https://www.vagrantup.com/

## Vagrant インストール

公式から Mac 用 dmg をダウンロードしてインストール
https://www.vagrantup.com/downloads.html

## VirtualBox インストール

Vagrant は VirtualBox, Hyper-V, Docker をサポートしているらしい。
VirtualBox にしてみる。

公式から Mac 用 dmg をダウンロードしてインストール
https://www.virtualbox.org/wiki/Downloads

## box の取得

起動イメージを box と呼ぶらしい。

https://atlas.hashicorp.com/boxes/search
から探してダウンロードする。

とりあえず bento/centos-6.8
https://atlas.hashicorp.com/bento/boxes/centos-6.8
にしてみる。

## Vagrant 作成・実行

作業ディレクトリ作成

    $ mkdir -p Vagrant/centos-6.8
    $ cd !$

Vagrant 初期化

    $ vagrant init bento/centos-6.8

VM は private network を使う

    $ sed -i -e 's/# config.vm.network "private_network"/config.vm.network "private_network"/' Vagrantfile

(ネットワークの種類は割愛。検証用なら private_network が良いのでは)

VM 起動

    $ vagrant up

VM 起動確認

    $ vagrant status
    Current machine states:
    
    default                   running (virtualbox)

VM 接続

    $ vagrant ssh
    [vagrant@localhost ~]$ cat /etc/redhat-release
    CentOS release 6.8 (Final)

VM 削除

    $ vagrant destroy

## 複数 Vagrant 作成・実行

複数 VM 起動する場合は Vagrantfile を

    Vagrant.configure("2") do |config|
      config.vm.box = "bento/centos-6.8"

      config.vm.define "cent6.8-1" do |vm1|
        vm1.vm.network "private_network", ip: "192.168.33.21"
      end

      config.vm.define "cent6.8-2" do |vm2|
        vm2.vm.network "private_network", ip: "192.168.33.22"
      end
    end

のように書く。

実行は

    $ vagrant up

で両方起動する。
名前を指定すれば1台だけ起動もできる。

起動確認

    $ vagrant status
    Current machine states:

    cent6.8-1                 running (virtualbox)
    cent6.8-2                 running (virtualbox)

ディレクトリで閉じているので最初に作った default VM は表示されない。

vagrant で作成した VM を全て確認する

    $ vagrant global-status
    id       name      provider   state   directory
    -----------------------------------------------------------------------------
    86f4387  default   virtualbox running PATH_TO_VAGRANTFILE
    04a9930  cent6.8-1 virtualbox running PATH_TO_VAGRANTFILE
    0607349  cent6.8-2 virtualbox running PATH_TO_VAGRANTFILE

Vagrantfile を色々いじったりして global-status で出るけど消せない VM ができたら

    $ vagrant global-status --prune

で伐採する。

### 参考

box ファイルサイズ

    $ du -hs ~/.vagrant.d/boxes/bento-VAGRANTSLASH-centos-6.8/
    280M	~/.vagrant.d/boxes/bento-VAGRANTSLASH-centos-6.8/

VM disk ファイルサイズ

    $ du -hs ~/VirtualBox\ VMs/cent68_cent68_1493411084611_79030/
    860M	~/VirtualBox VMs/cent68_cent68_1493411084611_79030/

VM イメージがやっぱりちょっと大きい・・・。

## まとめ

VirtualBox をコマンド (vagrant) で管理できる。
大量に作成したり、IP 管理したり、起動後にコマンド実行したりが設定できて便利。
設定ファイルも Vagrantfile だけなので Git 管理できる。
検証含めてプロジェクト毎にディレクトリと Vagrantfile を分ける運用が良さそう。

何か困ったらまた追記
iOS10.3以降でCharlesが使えない場合の対処法

iOS10.3以降でCharlesを使ってSSL通信内容をデバッグ確認しようとしましたが、
以前はうまく使えていたのに今回はキャプチャできずハマったのでメモします。

# 事象
以下のエラーが表示され、SSL通信が確認できない

```
SSLHandshake: Received fatal alert: certificate_unknown
```
<img width="834" alt="スクリーンショット 2017-04-29 4.47.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/113553/63050c71-2f4e-3087-a92e-4bd0c29bbbb5.png">

# 原因
**iOS10.3からルート証明書の信頼をする設定が必要になった**ため。

# 設定方法
**設定アプリ > 一般 > 情報 > 証明書信頼設定**　からCharlesのルート証明書をオンにする。
![IMG_0063.png](https://qiita-image-store.s3.amazonaws.com/0/113553/1609d981-ec57-033c-4da1-43acbdee5bf4.png)
ダイアログが表示されるので、「続ける」をタップ。
![IMG_0064.png](https://qiita-image-store.s3.amazonaws.com/0/113553/d04e1392-bf87-3af7-5d28-340bd73ebc62.png)

# その他チェックリスト
上記の証明書の信頼設定以外での確認項目です。
基本的な設定方法はこちらの公式サイトから確認できます。
https://www.charlesproxy.com/

 - **PCとiOS端末が同じネットワークに接続しているか**
（iOS端末が4GでPCが社内Wifiになっていないか、VPN環境でないか）

 - **iOS端末のネットワーク設定で、HTTPプロキシ設定をしているか**
（PCのIPアドレスとCharlesで設定したポート番号を指定）
**iOS側の設定箇所**（`設定` > `Wi-Fi` > 接続中のWifiのiアイコン　> `HTTPプロキシ`）
**Charles側の設定箇所**（`Proxy` > `Proxy Settings...`）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/113553/fc6f5357-5020-4902-7477-cbd6a06367cb.png)

 - **iOS端末にCharlesのルート証明書をインストールしているか**
※証明書をインストールする際はCharlesに接続している状態で行う必要があるようです。
 http://www.charlesproxy.com/getssl
![chartssl.png](https://qiita-image-store.s3.amazonaws.com/0/113553/e1458c78-d350-63ab-b715-219c9d690a1a.png)

 - **Charlesの設定でEnable SSL Proxingにチェックを入れているか**
（`Proxy` > `SSL Proxings Settings`）

 - **Charlesの設定でSSLプロキシを有効にするホスト名を追加しているか**
（`Proxy` > `SSL Proxings Settings`、`add`から*を指定）