OmniAICreator/Qiita-1.07M huggingface dataset:
osmdroidを使ってAndroidでOpenStreetMapを表示してみる

こんにちは@xsotaです。

この投稿は[OpenStreetMap Advent Calendar 2016](http://qiita.com/advent-calendar/2016/osmjp) 20日目の記事です。

osmdroidを使って地図を表示したくなったので、なんとなくやってみました。
そのうちもっと突っ込んだネタを書いてみようかと思います。

## OSM
- osmdroid
osmdroidはOpen Street MapをAndroidで使えるようにする超すごいやつだよ
<a href="https://github.com/osmdroid/osmdroid">https://github.com/osmdroid/osmdroid</a>

- Open Street Map(OSM)
みんなで地図をつくる超すごいやつ
<a href="https://openstreetmap.jp/">https://openstreetmap.jp/</a>

## つかってみるよ
まずはプロジェクトをEmptyActivtyとか指定しててきとうに作ってね。

```diff
repositories {
        jcenter()
+       mavenCentral() //これを追加
    }
```

```diff
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.4.0'

+   compile 'org.osmdroid:osmdroid-android:5.6.2' // これを追加
}

```

これでosmdroidが使えるようになるよ！

### AndroidManifestにいろいろpermission追加する
```xml:このへんを追加する
  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
  <uses-permission android:name="android.permission.INTERNET" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

```

### layoutにMapViewを追加するよ
```xml:activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:paddingBottom="@dimen/activity_vertical_margin"
  android:paddingLeft="@dimen/activity_horizontal_margin"
  android:paddingRight="@dimen/activity_horizontal_margin"
  android:paddingTop="@dimen/activity_vertical_margin"
  tools:context="com.xsota.osmdroidtest.MainActivity">

  <org.osmdroid.views.MapView
    android:id="@+id/map"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />
</RelativeLayout>
```
### MainAvtivityとかにTileSourceとかタッチでズームできるようにする設定を書くよ
```java:MainActivity.java
public class MainActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);


    org.osmdroid.tileprovider.constants.OpenStreetMapTileProviderConstants.setUserAgentValue(BuildConfig.APPLICATION_ID);

    MapView map = (MapView) findViewById(R.id.map);
    map.setTileSource(TileSourceFactory.MAPNIK);
    map.setBuiltInZoomControls(true);
    map.setMultiTouchControls(true);
  }
}
```
### とりあえず地図を表示できるようになったよ
<img src="https://blog.xsota.com/wp-content/uploads/2016/08/20160830205202.png" alt="osmdroid" width="360" height="640" class="alignnone size-full wp-image-658" />

簡単にOpen Street Mapの地図を使ったアプリが作れるので、使ってみてはどうでしょうか。

「GoogleMapではアレができるのにosmdroidではできない！！！！」っていうネタがあったらチャレンジしてみたいので誰か教えて下さい。

それではさようなら。
ゲームをつくる：Hex（ヘックス）マップの座標系構造

#この記事は、
ヘックス・ターン制シミュレーションゲームが好きな筆者が、最近その手の面白いゲームが無いので、自分で作るぜ！と、頑張る記録です。

# この記事のまとめ
データ構造として、Hexを扱うには、飛び飛びの座標系で表すのが良さそう。
(追記)、、、と、思ったのですが、後で交互にずらす座標系のほうが良いと思い直しました。
その記事は[こちら](https://qiita.com/papipu-games/items/8e1ef93a2c9c74670418)。

#Hexマップとは
六角形をつなげて作られているマップ。
![HexMap.jpg](https://qiita-image-store.s3.amazonaws.com/0/157328/d482193b-88ca-c499-0fa8-ec13e015eadb.jpeg)
こんな感じのヤツですね。

最近よくあるSLGだと、四角く区切られたマップが多いです。
四角と比べてHexマップの良さは、
- より詳細に現実を表せる（特に移動距離や向き）
- 戦略性が高くできる
あたりでしょう。

あと、自分的にはやっぱりHexが格好良いです。好みの問題だけど超重要。大戦略が好きだからだね。
でも、個々のマスが周囲の６マスと接していて互い違いに並んでいるので、２次元の座標としてどのように表すのか、ちょっと悩みます。

#Hexマップのデータ構造の選択肢
色々な方向がありえるのですが、代表的な形は３種類くらいかなぁ、と。
以下の２つの記事が詳しいです。
[NinaLabo](http://ninagreen.hatenablog.com/entry/2015/11/14/193417)さん・[猫とゲーム](http://catgames.16mb.com/1381)さん
	選択肢の中で、飛び飛び形式の座標系でデータを持つことにしました。
	他の座標系と比べて、飛び飛びの良さはこんなところ。

### スプレッドシートで表現できる
スプレッドシートでデータを作って、マップを作りたいので重要です。
試しにGoogleっスプレッドシートで作ってみました。こんな感じ。
<img width="506" alt="hexss.png" src="https://qiita-image-store.s3.amazonaws.com/0/157328/9ae23c9b-4c05-eb66-690e-ec9160b1dfff.png">
座標が普通にCOLUMNとROWで引っ張ってこれるのが素敵。
以下のような感じ。
	="(" & column(A1)-1 & ", " & row(A1)-1 & ")"

### 結構簡単に距離を計算できる
２点間の距離計算も楽々。
２座標のX,Yそれぞれの差の絶対値をとる。これを(dx, dy)とした時、

- dx > dy の場合、距離は dx
- dy > dx の場合、距離は (dx + dy)/2

### マップのデータ構造もOK
マップのデータ構造も無駄なく作れる。
Y座標を２で割って、切り捨てれば普通に無駄のないデータの記述が可能。配列とかにも入れやすい。後で、X座標が偶数のときには、Y座標ｘ２、奇数のときにはY座標ｘ２＋１としてやれば、元の座標系に復元できます。


~~というわけで、飛び飛びの座標系で行こうと思います。~~
作ってみたら交互にずらす座標系の方が良いと思い直しました
その記事は[こちら](https://qiita.com/papipu-games/items/8e1ef93a2c9c74670418)。
ウェブサービス構築時に導入している、開発が3倍速くなる仕組み


# はじめに
新しいサービスを作成するときに、毎回使いまわしている仕組みをまとめる。

以前記事にした、[一からマイクロサービスを作ったとき](http://qiita.com/tomoyamachi/items/0f049c87bfdef4aa6ad9)から活用しはじめ、とてつもなく便利だったため、外部から組み込めるフレームワークにして使いまわしている。

# 特にオススメな状況
- 仕様が明確に定まっておらず、細かな変更が行われそうだ
- ディレクターがSQLなどに詳しくない
- 人に任せられるものは任せたい

# 仕組みの全体像
Googleスプレッドシートのフォーマットに沿って項目を入力することで、
エンジニア以外の人が必要とする画面や、機能が勝手にできていく仕組み。

![table_automator_general.png](https://qiita-image-store.s3.amazonaws.com/0/14275/3c33ec95-33de-1f92-2d62-27598c6f3eb0.png "table_automator_general.png")

この仕組みにより、非エンジニア以外の人ができることが増え、結果自分への質問や依頼が減る。
また、一般的な管理画面もひととおり網羅されるので、サービス特有の機能に手と頭を使えるようになる。

# サンプルのスプレッドシート
サンプルとなるスプレッドシートを紹介。
![table_data_オリジナル.png](https://qiita-image-store.s3.amazonaws.com/0/14275/5c11ca24-ab17-620d-50ee-d3c4f917a120.png "table_data_オリジナル.png")

分かりづらいので、各項目に説明を加えた。
それぞれエンジニア用/ディレクター用/エンドユーザ用と分かれているのが分かってもらえると思う。
![table_data_全体像.png](https://qiita-image-store.s3.amazonaws.com/0/14275/8019f7ad-a691-af2b-58dc-977347c35758.png "table_data_全体像.png")

ちなみにバリデーションについては、任意で追加できるようになっているが、さしあたり必要な以下の項目のみがデフォルトで記載されている。

- 入力必須項目
- 文字数
- 文字フォーマット(数値のみ, 英数字のみ, 「かな」のみ etc)

# サンプルの管理画面

スプレッドシートの情報をもとに、デフォルトでテーブル一覧と説明と実データへのリンクが表示される。ちなみにエンジニア用と記載されているのは、バリデーション設定や型が確認できるようになっている。

<自動で作成される管理画面_テーブル一覧ページ>
![管理画面_TOPサンプル.png](https://qiita-image-store.s3.amazonaws.com/0/14275/1427c9f8-7ddd-3781-90d0-16006e920f18.png "管理画面_TOPサンプル.png")


実データ画面では、スプレッドシートで記載した検索フォームが用意される。

<自動で作成される管理画面_実データ一覧ページ>
![管理ツール_サンプル.png](https://qiita-image-store.s3.amazonaws.com/0/14275/21e9a77a-8337-cd9e-ef4d-b1fd60d61cb3.png "管理ツール_サンプル.png")


# フロー図
裏側としては、一度EXCELデータとしてダウンロードしたあとに、各ファイルに変換している。
EXCELデータのダウンロード部分と、変換処理部分は独立させている。
なぜEXCELデータにしているかというと、オフラインの状態でも作業ができるようにするためだ。実際、出張中の新幹線内で利用することがあったので、その判断は正しかったと思う。

では、なぜGoogleスプレッドシートにしたかというと、自分がEXCELを立ち上げるのが億劫なのが1つと、社内にEXCELを持っていない人もいるためである。

![table_automator_flow.png](https://qiita-image-store.s3.amazonaws.com/0/14275/71b6dd8f-38f7-e6d5-efea-f292e72e1ec9.png "table_automator_flow.png")

# 最後に
この仕組みの導入により、気軽に新しいサービスをちょっと作ってあとは管理者に任せるということができるようになった。またちょっとしたDB構造の変更であれば、ほとんどスプレッドシートの更新だけやっておけば、反映させられるので精神衛生上もいい。

本当であればコードを共有したいのだが、共有するほど構造が綺麗に整理されていないのと、あまり汎用的な作りになっていないので、今後まわりの人に使ってもらう場合があれば綺麗に書き直して共有していきたい。
顔画像データセット Labeled Faces in the Wild の aligned with deep funneling とは

Labeled Faces in the Wild (LFW)は顔画像データセットである。人の名前ごとのフォルダに顔画像が入っているので、名前情報も持っているデータである。

# データセットの場所

* http://vis-www.cs.umass.edu/lfw/index.html

## 整形済みのデータも提供されている

* 通常のもの
    * 13000 images
    * 1680 humans

![Aaron_Peirsol_0004.jpg](https://qiita-image-store.s3.amazonaws.com/0/12309/50f6fcab-a871-ad58-ebcf-34ec59135159.jpeg)

* aligned with deep funnelingされたもの
    * データ数と構造は同じだが、顔が直立するように回転が入っている
    * 上記ページによると、これにより精度が上がる

![Aaron_Peirsol_0004.jpg](https://qiita-image-store.s3.amazonaws.com/0/12309/fc4691e8-db9a-eef5-fbd6-d67f5b69ceaf.jpeg)
私のフロントエンド開発環境 - 2016年


2016年のまとめも兼ねて自分が今使っている環境について書いておきたいと思います。
※仕事は主にフロントエンド開発してます

## PCスペック

PC => Mac / El Caption

## 開発環境

![スクリーンショット 2016-12-29 17.41.50.png](https://qiita-image-store.s3.amazonaws.com/0/95873/1fee2a3d-2965-98a8-642b-02a0c4ff3384.png "スクリーンショット 2016-12-29 17.41.50.png")

開発中の画面はこんな感じです。基本的にターミナルで生活しています。

## もろもろ

- iTerm2
- tmux
- zsh
- neovim

## ざっくり作業環境について

基本的にターミナルで生活しております。

iTermを起動させるとtmuxが起動します。
方法については[ターミナルマルチプレクサ tmux をカスタマイズする](http://qiita.com/b4b4r07/items/01359e8a3066d1c37edc)をかなり参考にさせていただいます。

開発中はtmuxを上の画像みたいに分割させて作業しています。
※左上 : neovim / 左下 : gulp / 右 : 適時

## zshに関して

zshに関しては[zplug](https://github.com/zplug/zplug)を利用してもろもろ管理しています。

ただ、zshに関してもまだまだ勉強中なので基本的には[zprezto](https://github.com/sorin-ionescu/prezto)をあまりカスタマイズせずに利用しています。

## neovim

私はエディタに[neovim](https://neovim.io/)を利用しています。
かなり快適に利用させていただいます。

neovimの導入に関しては[NeoVim、そしてdein.vimへ](http://qiita.com/okamos/items/2259d5c770d51b88d75b)をがっつり参考にさせていただきました。

## フロントエンド周り

私の仕事の感じとしてwebサービスを作っていくというよりはwebサイトを制作しています。

なので現状は[Gulp](http://gulpjs.com/)を利用しております。

技能や知識もバラバラの人たちとチームを組んだりする可能性もあるため、
パッケージも必要最低限で使用している感じです。

また、コーディングルールの統一や楽をするためにも下記のものを導入しています。

- [EditorConfig](http://editorconfig.org/)
- [CSSfmt](http://qiita.com/morishitter/items/7e58b0cc32797bf59538)
- [Ctags](http://qiita.com/y_sekitoba/items/0ae6bbd9c71fba9b8970)

### Ctagsに関して

私の場合、Ctagsを利用してSASSの変数に飛べるようにしております。
ただ、デフォルトでは対応していなかったので下記のようにしております。

[備忘録_ctagsをscssで利用](http://qiita.com/y_sekitoba/items/9ae05220b731ed09b90c)

## 地味に気に入っていること

私はコーディン中、iTermの後ろに常に製作中のサイトを表示させています。

コーディングしながらいちいち確認するのが面倒だったのでiTermの透過機能を利用してコーディングしながら常に確認できるようにしております。

今の所、非常に気に入ってます。

映像見ながら作業できないか探していた時に[iTerm2で快適にアニメ観ながらターミナル(透過度を自由に変更)](http://blog.neknote.com/archives/2650)のサイトを見つけ速攻で取り入れさせていただきました。

## そもそもなぜターミナルなのか

結論から言うと「ターミナルで作業とかめっちゃかっこよさそうじゃん」です。

本当に最初は上記の気持ちのみでした。

ただ、実際に環境を構築していくにあたりいろいろ壁にぶつかったり乗り越えたりで少しづつですが自分の知識も上がってきたのではないかと感じております。

まだまだ、未熟なのでこれからも先人の知恵を拝借しながら精進していきたいと思います。
プログラミング初心者が先輩からもらったHTML/CSS/JSに関するフィードバックまとめ（IP）

規則やルールなどは自分の関わっているチームによって異なると思いますので掻い摘んで読んで頂けたらと思います。

#全体構成に関するフィードバック
1. 同じ記述はパーシャルに切り出して書く。コードを再利用すること！
2. 上下でクラスを若干分けていたの意図はわからないけど、リファクタしたら統一してもちゃんと動作したので統一した方が良い。
3. <a href="#基本的なHTMLのマークアップ規則とCSSの命名規則を守る">基本的なHTMLのマークアップ規則とCSSの命名規則を守る</a>
4. 今回の場合はsocialボタンとして独立したコードを作るから、viewもscssも独立したファイルを作って管理した方があとから見る人もわかりやすい
5. <a href="#`.clearfix`は単体で要素を作るために存在するのではなく、特定の要素に追記して使う">`.clearfix`は単体で要素を作るために存在するのではなく、特定の要素に追記して使う</a>
6. タグの名前はなるべく`.`や`#`から始めるように心がける
7. インデント、スペースの配置場所を意識する（手帳を参照）
8. CSSで指定するとき、個別の名前で指定できるときはそうする
9. 画像周りの余白を調整するときは`<br>`よりもCSSの`margin`で調整したほうがきれい

##基本的なHTMLのマークアップ規則とCSSの命名規則を守る

CSSはどのファイルからでも同じクラス名に適用されてしまう。意図しない場所にCSSが効いてしまい、バグを起こさないように冗長に書くことを意識している。また、クラス名単体で何を意図しているかもわかりやすくする。xxx-wrapperなどはよく使う。ソースコードを読んで、どういうクラスが使われているかはなんとなく頭に入れておくと自分で書くときにも良い。

参考: <a href="http://morobrand.net/mororeco/html/google-guide/" target="_blank">Google HTML / CSS Style Guideを翻訳してみた。</a>

##`.clearfix`は単体で要素を作るために存在するのではなく、特定の要素に追記して使う

```example.html
 //BAD
ol.social-share_wrapper
　li.social-share_twitter
　　= link_to hogehoge
　li.social-share_twitter
　　= link_to hogehoge
　li.social-share_twitter
　　= link_to hogehoge
.clearfix

 //GOOD
ol.social-share_wrapper.clearfix
　li.social-share_twitter
　　= link_to hogehoge
　li.social-share_twitter
　　= link_to hogehoge
　li.social-share_twitter
　　= link_to hogehoge
```

#htmlについて学んだこと

1. clearfixとは
2. floatとは
3. bottomとは
4. overfloatとは
5. rails viewhelperのlink_toを使う
6. wrapperとは
7. position relateiveとabsoluteとは
8. `\t`と`\n`とは

#JS/jQuery周辺について学んだこと
1. `.size()`とは
2. `.offset()`とは
3. `.addClass()`
4. `.removeClass()`
5. 現在のURLを取得

##`.size()`とは

<a href="https://www.sitepoint.com/size-length-javascript/" target="_blank">Do I use .size() or .length in Javascript?</a>より

```size.js
size: function() {
      return this.length;
}
```

基本的には`.length()`と同じ

##`.offset()`とは

<a href="http://www.buildinsider.net/web/jqueryref/046" target="_blank">要素の表示位置を取得／設定するには？（offset）</a>

>要素のドキュメント上の表示位置を取得／設定する

<a href="http://www.w3schools.com/jquery/css_offset.asp" target="_blank">jQuery offset() Method</a>では

>Return the offset coordinates of a <p> element:
>p要素の表示位置を取得する

と書かれています。
なので例えば`$('#var').offset().top`だと`var`のトップにある要素の表示位置ということですね。

##`.addClass()`

<a href="http://www.w3schools.com/jquery/html_addclass.asp" target="blank">jQuery addClass() Method</a>によると

>Add a class name to the first `<p>` element:
>最初のp要素にクラスを追加する

>```addclass.js
$("button").click(function(){
    $("p:first").addClass("intro");
});
```

##`.removeClass()`

<a href="http://www.w3schools.com/jquery/html_removeclass.asp" target="_blank">jQuery removeClass() Method</a>より

>Remove the class name "class_name" from all `<p>` elements:
>p要素から`class_name`がついたクラスを全て取り除く

>```removeclass.js
$("button").click(function(){
    $("p").removeClass("class_name");
});
```

##現在のURLを取得

<a href="http://www.kaasan.info/archives/1279" target="_blank">jQuery　色々な自分自身の○○を取得する</a>によると

`location.href`で取得できるとのこと。
Web::Queryのcpanモジュールがインストールに失敗する話

cpanmコマンドでWeb::Queryをインストールしようとすると失敗。(環境はUbuntu14.04)
ログを確認すると、XML::LibXMLのインストールに失敗している。
検索すると、XML::LibXMLをインストールするにはどうやらlibxml2-devが必要らしい。

```shell-session
$ sudo apt-get install libxml2-dev
$ cpanm Web::Query
```

成功した。
【Visual Studio Code Extension開発】エディタに着色する方法


## 簡単に

1. 色などのデータをvscode.window.createTextEditorDecorationTypeインスタンスに格納する
1. 色を付けたい範囲をvscode.Rangeインスタンスに格納する
1. vscode.window.activeTextEditor.setDecorations()に、2つのインスタンスを渡す

これで色が付きます。

## 詳細に

### vscode.window.createTextEditorDecorationTypeインスタンスの生成

```typescript
var decorator: vscode.TextEditorDecorationType;
decorator = vscode.window.createTextEditorDecorationType({
    'borderWidth': '1px',
    'borderRadius': '2px',
    'borderStyle': 'solid',
    'light': {
        'backgroundColor': 'rgba(58, 70, 101, 0.3)',
        'borderColor': 'rgba(58, 70, 101, 0.4)',
        'color': 'rgba(255, 0, 0, 1.0)'
    },
    'dark': {
        'backgroundColor': 'rgba(117, 141, 203, 0.3)',
        'borderColor': 'rgba(117, 141, 203, 0.4)',
        'color': 'rgba(255, 255, 0, 1.0)'
    }
});
```

`light`、`dark`の中にそれぞれスタイルを指定すると、テーマのligth、darkによってスタイルを変えることができるみたいです。（light、darkの判断基準は未調査）。
ひとまず文字色・背景色を指定していますが、インスタンス生成時に渡せる属性はたくさんあるみたいです。

https://code.visualstudio.com/Docs/extensionAPI/vscode-api#DecorationRenderOptions

### vscode.Rangeインスタンスの生成

```typescript
const editor = vscode.window.activeTextEditor;

var startPos = editor.document.positionAt(0);
var endPos = editor.document.positionAt(editor.document.getText().length-1);
var range = new vscode.Range(startPos, endPos);
```

Positionインスタンス生成時に渡す数値は、行・桁関係ない先頭からの文字数のようです。
Positionインスタンスで開始、終了位置を指定してRangeインスタンスを生成します。

### vscode.window.activeTextEditor.setDecorations()の実行

```typescript
editor.setDecorations(decorator, [range]);
```

これで色をつけることができます。第二引数はRange配列なので、1つだけの場合は[]で囲ってしまいます。

https://code.visualstudio.com/Docs/extensionAPI/vscode-api#_a-nametexteditoraspan-classcodeitem-id295texteditorspan

### 色のクリア

```typescript
decorator.dispose();
```

createTextEditorDecorationType.dispose()で破棄したら色クリアできます。
破棄しない場合、色の指定は蓄積されます（半透明指定している場合はどんどん透明度がなくなっていきます）。


## 参考

TypescriptのVSCode用クラスはvscode namespaceにて定義されています。

https://code.visualstudio.com/Docs/extensionAPI/vscode-api

## 宣伝

色付けを使用してVSCode拡張をつくってみました。
良ければソースを参考にしてください。
さらによければ、インストールして使っていただいて、issue/pull requestおねがいします。

https://github.com/kojisaiki/evilinspector

https://marketplace.visualstudio.com/items?itemName=saikou9901.evilinspector
vagrant + centos7 でprivate_networkで設定したIPに接続ができない

MacBook Pro 13" (late2016)を新調した際にはまったのでメモ

##環境
- macOS Sierra 10.12.2
- vagrant 1.9.1
- VirtualBox 5.1.12

```ruby:Vagrantfile
Vagrant.configure("2") do |config|
  config.vm.box = "centos/7"
  config.vm.network :private_network, ip: "192.168.33.10"
end
```

##構築結果

```bash
$ vagrant up
~省略
$ ping 192.168.33.10
PING 192.168.33.10 (192.168.33.10): 56 data bytes
Request timeout for icmp_seq 0
```
つながらない

##(CASE1) eth1にアドレスがないケース
```bash
$ vagrant ssh -c "ip a"
~省略
3: eth1: <BROADCAST,MULTICAST> mtu 1500 qdisc pfifo_fast state DOWN qlen 1000
    link/ether 08:00:27:83:b9:c8 brd ff:ff:ff:ff:ff:ff
```

###解決
```bash
$ vagrant ssh -c "sudo systemctl restart network.service"
$ ping 192.168.33.10 # => OK
```
ネットワークをリスタートするとeth1に192.168.33.10のアドレスが割り当てられた

##(CASE2) eth1に192.168.56.xxが割り当てられているケース
```bash
$ vagrant ssh -c "ip a"
~省略
3: eth1: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc pfifo_fast state UP qlen 1000
    link/ether 08:00:27:bf:9d:c2 brd ff:ff:ff:ff:ff:ff
    inet 192.168.56.101/24 brd 192.168.56.255 scope global dynamic eth1
       valid_lft 1082sec preferred_lft 1082sec
```
何故に192.168.56.101?
192.168.56.101にpingも通らず

###解決
```bash
$ vagrant ssh
$ ls -l /etc/sysconfig/network-scripts/ifcfg*
-rw-r--r--. 1 root root  86 12月 15 11:14 /etc/sysconfig/network-scripts/ifcfg-eth0
-rw-r--r--. 1 root root 254  9月 12 10:47 /etc/sysconfig/network-scripts/ifcfg-lo
```

eth1のインターフェース設定ファイルがないので手動で書く

```bash
$ sudo vi /etc/sysconfig/network-scripts/ifcfg-eth1
```

```vim:ifcfg-eth1
#VAGRANT-BEGIN
NM_CONTROLLED=no
BOOTPROTO=none
ONBOOT=yes
IPADDR=192.168.33.10
NETMASK=255.255.255.0
DEVICE=eth1
PEERDNS=no
#VAGRANT-END
```

```bash
$ sudo chown vagrant:vagrant /etc/sysconfig/network-scripts/ifcfg-eth1 #一応
$ sudo systemctl restart network.service
$ ip a
~省略
3: eth1: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc pfifo_fast state UP qlen 1000
    link/ether 08:00:27:bf:9d:c2 brd ff:ff:ff:ff:ff:ff
    inet 192.168.33.10/24 brd 192.168.33.255 scope global eth1
       valid_lft forever preferred_lft forever
```
eth1に192.168.33.10が割り当てられた

##最後に
```bash
$ vagrant reload
$ ping 192.168.33.10 # => Request timeout
```
再度立ち上げるとネットワークがリセットされてしまう(事があった)ので

Vagrantfileにおまじない追加

```rb:Vagrantfile
config.vm.provision "shell", run: "always", inline: "systemctl restart network.service"
```

なんかバグっぽいからvagrantのバージョンアップで直りそうな気がするんですけどね
ちなみにboxをcentos/6にするとこの現象は起きませんでした
ゲームをつくる：前提

#この記事は、
ヘックス・ターン制シミュレーションゲームが好きな筆者が、最近その手の面白いゲームが無いので、自分で作るぜ！と、頑張る記録です。

# この記事のまとめ
インディーズゲームをつくるにあたって、明確にした方が良いと思われる前提をまとめてみた。下記の４項目くらいを予めブレずに決めておくことが重要だと思う。
- 動機・何をやりたいのか
- 誰に遊んでもらうのか
- 最終的にどうしたいのか
- どのようにアプローチするのか
というわけで、自分のプロジェクトに関して、どのように考えたか書いて、記録しておこう。

#動機・何がやりたいのか
大戦略が好きです。ファミコンウォーズが好きです。フロントミッションが好きです。ヴァンテージマスターが好きです。
割とクラシックなコアゲームが好きな僕ですが、最近はめっきりゲームを遊ぶためにPCや家庭用ゲームを立ち上げることが少なくなりました。いじっているのはスマホばっかり。なので、スマホで戦略SLGを探してみるのですが、ろくなものが無い。というか、戦略SLG自体があまりない。
なければ自分で作ってやろう！　ということで、そういったゲームを作ることにしました。まずは、スマホで遊べる大戦略Ⅱがほしいので、そこを目指します。AIがきちっと賢くて、ガチで手応えがあるヤツ。互角な条件では、自分が負けるくらいのレベルを目指したいですね。

#誰に遊んでもらうのか
作るからには多くの人に遊んで貰いたいですね。なので、最も多くの人が持っているデバイス、スマホでの公開を目指します。
マニア向けゲームだと思うけど、そこそこの需要があるのではないでしょうか？１００人とか？一応英語版も作れば、３００人くらいは遊んでくれるのでは？

#最終的にどうしたいのか
スマホで需要があるようであれば、PCでSteamとかにも出したいですね。
というわけで、開発環境はUnityに決定。
エンジン部分や基本のロジックは流用できそうなので、大戦略を作ったら、次はフロントミッション的なやつに展開したいですね。バトルテックでも良いかも。
フロントミッションは、大戦略にミッション要素、RPG的な成長要素・カスタム要素・シナリオを足す形で完成できると思うのです。間にミッションとシナリオ要素を足した形の、ファミコンウォーズ的なステップを挟んでも良いかも。
ヘックスタイプのフロントミッション。うーん、遊んでみたいぞ！

#どのようにアプローチするのか
上のような遠大なビジョンは大事ですが、じゃあその為にどのようにアプローチをするのか考える必要があります。
遠大な目標を実現するためには、現実的な短いステップを刻まなければ、絶対完成しません。
なので、幾つかのアプローチを取ります。
- 　Qiitaに制作の記録をつける
　　自分で何をやるのか宣言しつつ、記録を付けてモチベーションを維持します。
- 　細かく進捗を発表
　　遊んでもらって、リアクションがなければ続けられません。
　　なので、成果物を公表していきます。
　　GitHubと、UnityのWebGLで成果物をアップしていく。

頑張ります！
fishでPATHを通したり消したり

よく忘れるので自分用のメモ。

## PATHへの追加

fishでPATHを追加しようとする場合、恒久的にPATHを追加しようと思ったら、`$fish_user_paths`に追加します。

```fish
set -U fish_user_paths /usr/local/bin $fish_user_paths
```

## PATHから削除

PATHから削除する場合は、`$fish_user_paths`から値を削除する必要があります。
`$fish_user_paths`は配列なので、その値のある項目を消しましょう。
配列の開始は1からになるので、その点に注意しましょう。

```fish
set -e -U fish_user_paths[1]
```
Erlangの勉強、始めます。

#おことわり！
人さまにお見せすることを主目的にはしておりません。
私が何かを忘却した未来の私のために残す書き置きです。

#座学
##Erlangのこと
[twitterブームの陰で注目を集める“Erlang”](http://www.atmarkit.co.jp/news/200704/27/erlang.html)

背景

- [Web2.0の先にあるC10K問題](http://www.atmarkit.co.jp/news/analysis/200701/09/c10k.html)
- メモリを共有するマルチスレッドプログラミングの複雑性は人間の脳の処理能力を超える
- NコアでN倍のパフォーマンスが出ればそれで良い

Erlang

- 各"ユーザスレッド"はメッセージをやり取りするアクターとして振る舞う

#始める環境

- Macbook Air(macOS Sierra 10.12.2)
- kerl(build 19.2)

#導入手順

[こちら](http://qiita.com/tatsuya6502/items/f15da8ea6e793c5038a2)を参考にさせていただきました。

#やったこと
- [これから15分でErlangを始めるための資料](http://blog.overlasting.net/2007-05-09-1.html)
- [Erlang触ってみた](http://route477.net/d/?date=20070502#p01)

#仕様が変わったらしいこと
##httpがない
インターネットに転がっているサンプルを見よう見まねで実行するとうまく行かなかった。

```
1> inets:start().
ok
2> http:request("http://www.google.co.jp/"). 
** exception error: undefined function http:request/1
```
えっ。。。
これで時間を食いました。とりあえず諦めて次のサンプルをコンパイルしたところ…

```cohttp.erl
（前略）
〜〜〜http:request(Url),
（後略）
```
```
1> c(cohttp).
cohttp.erl:9: Warning: call to http:request/1 will fail, since it was removed in R15B; use httpc:request/1
```

（あっ）

```
1> inets:start().
ok
2> httpc:request("http://www.google.co.jp"). 
{ok,{{"HTTP/1.1",200,"OK"},
     [{"cache-control","private, max-age=0"},
      {"date","Thu, 29 Dec 2016 08:55:34 GMT"},
      {"accept-ranges","none"},
      {"server","gws"},
      {"vary","Accept-Encoding"},
      {"content-length","47048"},
      {"content-type","text/html; charset=Shift_JIS"},
      {"expires","-1"},
      {"p3p",
       "CP=\"This is not a P3P policy! See https://www.google.com/support/accounts/answer/151657?hl=en for more info.\""},
      {"x-xss-protection","1; mode=block"},
      {"x-frame-options","SAMEORIGIN"},
      {"set-cookie",
       "NID=93=UiOepo6RoWcDubfvyc_WRQVgry0qetWS11_GyEk9oaGvT-cWW-tiEZMbCKzXhEB4N0oHS4n2OwyE8pSOUS6LnWTH02sQO6WVVQglMDd3GvWZsrp0cO3fAQ_n3unWAOby; expires=Fri, 30-Jun-2017 08:55:34 GMT; path=/; domain=.google.co.jp; HttpOnly"}],
     [60,33,100,111,99,116,121,112,101,32,104,116,109,108,62,60,
      104,116,109,108,32,105,116,101|...]}}
```

はい（＾ω＾　）気をつけますー

ご参考:[Erlang -- HTTP Client](http://erlang.org/doc/apps/inets/http_client.html)

#これから読む（TODO）
- [jijixi's diary [Erlang (2007年)]](http://jijixi.azito.com/cgi-bin/diary/index.rb?year=2007;category=Erlang)
- [(Erlangの手順書的なやつ)](http://ancient.s6.xrea.com/erlang/erlang.pdf)
- [Lisp Flavored Erlang](http://docs.lfe.io)
- [ErlangとJavaのあいだでリモートメッセージング (後編](http://d.hatena.ne.jp/m-hiyama/20070710/1184035643)
- [分散DBMS「Mnesia」の並列処理](http://codezine.jp/article/detail/5014)
- [Authentication and Authorization Achieving Single Sign-on in an Erlang Environment](https://uu.diva-portal.org/smash/get/diva2:344199/FULLTEXT01.pdf)
- [Erlang 基礎ポイント7 - 分散処理](http://dukelab.hatenablog.com/entry/2014/08/31/233708)
- [Erlang Data Storage Modules](https://ja.scribd.com/document/20492533/Erlang-Data-Storage-Modules)
【GitHub入門】登録から簡単な操作方法まで

#はじめに
Githubに登録して使い始めるまでの流れの覚書です。

- アカウント登録
- 鍵登録
- リポジトリ・ブランチ作成
- コミット
- プッシュ
- プルリクエスト
- マージ

の説明です。
Githubの基本的な使い方です。

#そもそもGithubとは？
バージョン管理システムです。バージョン管理システムを利用することで、ファイル編集履歴を記録・管理したり、複数人の開発でお互いの干渉をなくしたりすることができます。

#アカウント登録
[Githubの公式ホームページ](https://github.com)より登録します。

#公開鍵登録
アカウント登録が終了したら、公開鍵の登録が必要です。Githubでファイルを編集する際には、ターミナルからGithubへSSH接続する必要があります。そのために、公開鍵・秘密鍵を生成して公開鍵の方をGithubへ登録します。
###鍵の生成
ターミナルを起動し、鍵を生成する`.ssh`ディレクトリへ移動します。
`$ cd ~/.ssh`

次のコマンドで鍵を生成します。
`$ ssh-keygen -t -rsa`
パスフレーズなどの設定を求められますが、何も入力せずエンターで大丈夫そうです。
パスフレーズについて少しググると、どうやら秘密鍵を守るためのもののようですね。設定した方が安心なのかもしれませんが、設定しなくても利用はできます。

`ls`コマンドで.sshの中身を確認してみてください。
`id_rsa`と、`id_rsa.pub`があれば成功です。
前者が秘密鍵で、後者が公開鍵です。

###鍵の登録
Githubへ公開鍵を登録しますが、絶対に秘密鍵と公開鍵を誤ってはいけません。

では、[Githubの公開鍵登録ページ](https://github.com/settings/ssh)で登録を行います。
ページ上部の「New SSH Key」というボタンから登録を行います。
Titleは任意のもので構いません。

公開鍵は普通にコピペでも構いませんが、ターミナルで以下のコマンドを実行するとクリップボードへコピーできるので簡単です。
`$ pbcopy < ~/.ssh.id_rsa.pub`

「Add Key」ボタンから登録すれば完了です。

`$ ssh -T git@github.com`
で接続を確認します。
初めて接続する際、以下のようなメッセージが出ますが、`yes`で大丈夫です。

```
The authenticity of host 'github.com (207.97.227.239)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?
```

無事接続されると、

Hi (account名)! You've successfully authenticated, but GitHub does not provide shell access.

と表示されるはずです。

#リポジトリ作成
アカウント登録と鍵の生成・登録が完了したら、sampleでGithubの使い方を確認します。

まずはリモートにリポジトリを作成します。
[Githubのアカウントページ]()の右上の`+ボタン >「New Repository」`より新規リポジトリ作成の画面に行きます。
repository nameに`sample`を入力し、

> - [ ] Initialize this repository with a README

にチェックを入れ、「Create Repository」をクリックします。
これで「sampleリポジトリ」の完成です。

###クローンとブランチ作成
- クローン

作成したsampleリポジトリをローカルにクローンするため、以下のコマンドを実行します。
`$ git clone git@github.com:username/sample.git`

`sample`というディレクトリが生成されて入れば成功です。

- ブランチ

以下のコマンドで`sample-branch`というブランチを作成します。
`$ git branch sample-branch master`
`$ git checkout sample-branch`

#コミット
変更をコミットするために、テストファイルを生成し、それをsample-branchにコミットしてみましょう。

- `$ touch test_file`:テストファイルの生成
- `$ git add test_file`:これからコミットするファイルの指定
- `$ git commit -m　"テストファイルの追加"`:コミットする。オプションコマンドは、メッセージの追加。


#プッシュ
コミットが完了したら、ローカルの`sample-branch`をリモートへプッシュします。
以下のコマンドを実行します。
`$ git push origin sample-branch:sample_branch`

このコマンドは、
`$ git push [リモートリポジトリ名][ローカルのブランチ名]:[リモートのブランチ名]`
という構成です。
ここではあえて、ブランチ名を変えて挙動の確認をしてみました。
ターミナル上に` * [new branch]      sample-branch -> sample_branch`といった表記が見られ、ブラウザでもブランチ名がアンダーバーになっていることが確認できます。

`origin`は何もしなくても通常であれば設定されているリモートリポジトリ名です。

#プルリクエスト
ブラウザに戻ります。
先ほどの`sample_branch`についての通知がきているので、「Compare & pull request」をクリックします。続くページの「pull request」をクリックすると、プルリクエストの完了です。

#マージ
「merge pull request」をクリックすればマージは完了です。
開発現場では、この段階でコードレビューなどを行い、問題がなければマージするといった流れになるようです。


#以上
以上で、いつでもGithubが使える状態になったかと思います。
Githubにはまだ様々な機能があるので、使いながら覚えていきたいと思います。
js 配列のオブジェクトから一致するペアを返す

##お題
配列のオブジェクト（最初の引数）を調べ、一致するプロパティと値のペア（2番目の引数）を持つすべてのオブジェクトを持つ配列を返す関数を作る。


```js
function findPair(collection, source) {
//write your code.
  return arr;
}

findPair([{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }], { last: "Capulet" });
//[{ first: "Tybalt", last: "Capulet" }]

```

##出力結果

```js
findPair([{ "a": 1 }, { "a": 1 }, { "a": 1, "b": 2 }], { "a": 1 }) // [{ "a": 1 }, { "a": 1 }, { "a": 1, "b": 2 }]
findPair([{ "a": 1, "b": 2 }, { "a": 1 }, { "a": 1, "b": 2, "c": 2 }], { "a": 1, "b": 2 }) // [{ "a": 1, "b": 2 }, { "a": 1, "b": 2, "c": 2 }]
findPair([{ "a": 1, "b": 2 }, { "a": 1 }, { "a": 1, "b": 2, "c": 2 }], { "a": 1, "c": 2 }) // [{ "a": 1, "b": 2, "c": 2 }]
```


##使ったもの
[Object.keys()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/keys)
[hasOwnProperty()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty)
filter()
every()

##考え方
・obj.keys()をつかって第二引数の配列のプロパティを新しい配列にいれる。
・fliter()で第一引数から第二引数のプロパティをもたない要素を取り除く。
・hasOwnProperty()で第二引数のプロパティを持ち、値が同じオブジェクトを返しておわり
##コード

```js
function findPair(collection, source) {
 var arr = [];
  var keys = Object.keys(source);// ["last"]
  arr = collection.filter(function(obj) {
    return keys.every(function(key) {
      return obj.hasOwnProperty(key) && obj[key] === source[key];
    });
  });
  return arr;
}
findPair([{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }], { last: "Capulet" });
```

###他にもコードが浮かんだ方、コメントお待ちしております。
３層ニューラルネットワークを実装する

本記事は、[ゼロから作るDeep Learning](http://amzn.to/2iLPFZW)の学習メモです。　　
<a href="https://www.amazon.co.jp/%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89%E4%BD%9C%E3%82%8BDeep-Learning-Python%E3%81%A7%E5%AD%A6%E3%81%B6%E3%83%87%E3%82%A3%E3%83%BC%E3%83%97%E3%83%A9%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B0%E3%81%AE%E7%90%86%E8%AB%96%E3%81%A8%E5%AE%9F%E8%A3%85-%E6%96%8E%E8%97%A4-%E5%BA%B7%E6%AF%85/dp/4873117585/ref=as_li_ss_il?s=books&ie=UTF8&qid=1483626311&sr=1-1&keywords=%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89%E4%BD%9C%E3%82%8Bdeep+learning&linkCode=li2&tag=nesheep5-22&linkId=db4083b79083eb2446ff31dd16bc0409" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=4873117585&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=nesheep5-22" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=nesheep5-22&l=li2&o=9&a=4873117585" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />

## 要点

- 活性化関数：  
入力信号の総和がどのように活性化するか（発火するか）を決定する役割を持つ。  
パーセプトロンでは閾値を境に出力が切り替わる「ステップ関数」が使用されるが、ニューラルネットワークでは滑らかな曲線を描く「シグモイド関数」や「ReLU関数」などが用いられる。  
隠れ層の活性化関数はh()で表し、出力層の活性化関数はσ()で表す。
- 行列の内積を用いることで、各ニューロンでの計算を１階層分ひとまとめに行う事ができる。


## ３層ニューロンネットワーク図
![Untitled_ニューロンネットワーク_-_Cacoo.png](https://qiita-image-store.s3.amazonaws.com/0/41569/45c2bf93-0e75-34ec-f471-c7d074ba1c86.png)

## シグモイド関数
```math
  h(x) = \frac{1}{1+ \mathrm{e}^{-x}}
```

## 各ニューロンの変換式
```math
  a = w_1x_1+w_2x_2+b  
```
```math
  z = h(a) 
```
※x:入力　w:重み　b:バイアス　a:入力信号の総和　h():活性化関数

## ３層ニューロンネットワークを実装する
```py3:3layered_neuralnetwork.py.py
import numpy as np
import matplotlib.pyplot as plt

# 重みとバイアスの初期化
def init_network():
    network = {}
    # 1層目
    network['W1'] = np.array([[0.1, 0.3, 0.5], [0.2, 0.4, 0.6]])
    network['b1'] = np.array([0.1, 0.2, 0.3])
    # 2層目
    network['W2'] = np.array([[0.1, 0.4], [0.2, 0.5], [0.3, 0.6]])
    network['b2'] = np.array([0.1, 0.2])
    # 3層目
    network['W3'] = np.array([[0.1, 0.3], [0.2, 0.4]])
    network['b3'] = np.array([0.1, 0.2])

    return network

# 入力→出力
def forward(network, x):
    W1, W2, W3 = network['W1'], network['W2'], network['W3']
    b1, b2, b3 = network['b1'], network['b2'], network['b3']

    # 1層目
    a1 = np.dot(x, W1) +b1  # A = XW +B
    z1 = sigmoid(a1)        # Z = h(A)
    # 2層目
    a2 = np.dot(z1, W2) +b2
    z2 = sigmoid(a2)
    # 3層目
    a3 = np.dot(z2, W3) +b3
    y = identity_function(a3)   # 最後の層のみ活性化関数が異なる

    return y

# シグモイド関数(活性化関数)
def sigmoid(x):
    return 1 / (1 + np.exp(-x))

# 恒等関数(活性化関数)
def identity_function(x):
    return x

# 以下動作確認
network = init_network()
x = np.array([1.0, 0.5])
y = forward(network, x)
print(y) # [0.31682708  0.69627909]
```
[iOS]ビューの横幅が意図したサイズにならない場合にやること

### 概要
Xibの設定でハマったこと。
オートレイアウトをいくらいじってもビューのサイズが変更されない場合、以下の現象が発生している可能性がある。

以下の設定になっているとXibの親ビュー（UIView）のサイズが勝手に600pxにすり替わってくれるので、実行中に意図したサイズで処理されない。（僕の環境では600pxで固定でした）

### 前提
StoryboardかXibを使用してビューを構成していること。
該当のUIViewの"Simulated Metrics" -> "Size"の設定が"Inferred"になっていること。

### 修正方法
1. Xib設定の"Simulated Metrics" -> "Size"を"Freeform"にする

![xcode.png](https://qiita-image-store.s3.amazonaws.com/0/90301/c35ff1cc-fddc-12d7-e37e-8fdab14af445.png)


2. 親ビューをIBOutletを使って実装ファイルと紐付ける（ここではcontentViewとした）
3. 適宜.mファイルの初期化処理等に以下をセットする

```
    self.contentView.frame =  CGRectMake(self.contentView.frame.origin.x,
                                         self.contentView.frame.origin.y,
                                         [UIScreen mainScreen].bounds.size.width,
                                         self.contentView.frame.size.height);
```

### 所感
Simulated Metricsの仕様が掴めてなかったので苦労した。このプロパティをInferredにしてしまっているとフレームの調整を勝手にXcodeがやってしまうみたいです。明示的にフレームを指定することで改善されました。この例ではデバイスの幅を設定しましたが、縦の長さについても同様のようです。

なぜかXcode8にバージョンアップ後のXibのコンバート作業で発生しました。
AWSでTensorFlowを使うまで

時間がかかったのでメモしておきます。
ほぼ[こちら](http://myugos.hatenablog.com/entry/2016/11/02/134141)に沿って進めましたが、一部補いながら進めたのでそれを雑に書きます。
使ったAMI...Ubuntu Server 16.04 LTS (HVM), SSD Volume Type (ami-b7a114d7)

#手順の中で補ったこと
gitが入ってなかったので、gitコマンドを使う前に入れる。
`sudo apt-get install git`

.bash_profileを編集する時emacsを使いたかったから、入れる。
`sudo apt-get install emacs24`

以下のコマンドでemacsを起動。
`emacs .bash_profile`
以下の内容を書き込み、Ctrl+x Ctrl+sで保存。Ctrl+x Ctrl+cでemacsを終了。
```export PYENV_ROOT="$HOME/.pyenv"
export PATH="$PYENV_ROOT/bin:$PATH"
eval "$(pyenv init -)"```

書き込んだファイル内容を反映するために以下を実行。
`source .bash_profile`

ここからはしばらく上のサイトの手順で進める。
cudnnはローカルにダウンロードし、scpコマンド(WindowsならFileZillaとか)でAWSサーバに送る。

pip3でTensorFlowを入れようとすると、アクセス権限がないぞと怒られた。
でもsudoをつけてインストールしたらカオスになった。やってはいけない。
--userオプションをつけたら解決した。
`pip3 install --upgrade $TF_BINARY_URL --user`
多次元配列の宣言 Javaの問題をTypeScriptにしてみる 4-4


この中からコンパイルエラーになるコードを全て選びなさい

A. int a[] = new int[2][3]
B.int[] b = new int[2.3]
C.int c[] = new int[2*3]
D.int x = 2 , y=3;
    int[] d = new int[x*y];
E.int[][] e = new int[2][];
F.int f[][] = new int[][3];


答えはABFです。

Aは、
左辺１次元配列に右辺の２次元配列を代入しようとしているためコンパイルエラーとなります。

Bは、
配列のインデックスに実数は使えません。よってコンパイルエラーとなります。

Fは、
２次元目の要素を指定しているのに、１次元目の用を数を指定していないためコンパイルエラーになります。


これをそのままTypeScriptにすることはできません。
jsの配列は実質javaのList構造で出来ているため、２次元配列の要素を確保して宣言することができません。

1次元配列であれば、new Array(1);のような形で宣言することができますが、２次元配列を作ることはできないため、
var array:any = new Array(3);
 for (var i = 0; i < 3; i++) { 
    array[i] = new Array(2); 
}
とすれば、3×2の２次元配列を作ることはできます。
AWS始めようとしてつまったこと

GPU使ってTensorFlowを走らせるためにAWSを使ってみようと思ったら、色々とつっかえました。
初心者として、先に知っておきたかったことを雑に並べておきます。
ここではTensorFlowとは関係ないAWS一般の事柄について書きます。

#接続する前にセキュリティグループの設定が必要
とりあえず無料枠のt2.microインスタンスを立ち上げましたが、接続できず。
原因はセキュリティグループの設定でした。
セキュリティグループのインバウンドという項目に、送信元IPアドレスを登録しておく必要があります。
登録するときに「マイIP」を選択すると間違いないです。

#ユーザ名に注意
使ったAMI...Ubuntu Server 16.04 LTS (HVM), SSD Volume Type (ami-b7a114d7)
ユーザ名はubuntuなんですね。ここが間違ってて接続できず、しばらく悩みました。

#スポットインスタンスは停止(Stop)できない
安いので嬉しいのですが、削除(Terminate)しかできません。
保存したい内容はルートデバイス以外に置くとか、スナップショットをとるとかする必要があります。

#インスタンスタイプは変更可能
使ってて気づくものではあると思いますが、インスタンス作成後でもインスタンスタイプが変えられます。
それ知ってたら、環境構築してる間はGPU付きの高いインスタンスタイプ選ばなかったのにな。。。
dockerでnoneイメージをCIツールで削除したいとき

dockerでnoneイメージがどんどん増えていってディスクフルになりCIツールが動かないみたいなことに出くわしたんで、そん時に解決策を備忘録として簡単に書いときますー。


よくある一般的な削除方法としてxargsを使う方法でとりあえずやりました。

```
docker images | awk '/<none/{print $3}' | xargs docker rmi -f 
```

ただこれだとエラーになってしまい、CIツールの処理がfailureとして終了してdeploy失敗となってしまいます。

```
docker: "rm" requires a minimum of 1 argument.
See 'docker rm --help'.

Usage: docker rm [OPTIONS] CONTAINER [CONTAINER...]

Remove one or more containers
```

理由としては<none>イメージがない時、xargsの引数がないよというエラーです。

こんな時の解決策として、xargsを実行時にemptyの時は何も実行しないようにしました。


```
docker images | awk '/<none/{print $3}' | xargs --no-run-if-empty docker rmi -f
```


かなり単純な方法ですが、これでいけました〜
cocos2d-xマクロまとめ


普段よく使用しているマクロをまとめてみた
気付いた時に随時追加する予定

バージョン
cocos2d-x 3.14.1

## 判別系

### デバッグチェック

`#if COCOS2D_DEBUG`

### プラットフォーム

#### Android

`#if (CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID)`

#### iOS

`#if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)`

#### Mac

`#if (CC_TARGET_PLATFORM == CC_PLATFORM_MAC)`

以下略

## 展開系

### createメソッド作成

cocosのお作法的にstaticなクリエイトメソッドを作る

例えば
`CREATE_FUNC(UnitCard)`
みたいにすると

``` cpp
static UnitCard* create()
{
    UnitCard *pRet = new(std::nothrow) UnitCard();
    if (pRet && pRet->init())
    {
        pRet->autorelease();
        return pRet;
    }
    else
    {
        delete pRet;
        pRet = nullptr;
        return nullptr;
    }
}
```

みたいに展開される

### メモリ解放

安全にメモリ解放を行う
とはいえ、nullチェックをする程度なので、完全に安全というわけではない

`CC_SAFE_RELEASE_NULL(ptr)`

### シンセサイザ

rubyのアクセサみたいなやつ
メンバ変数とゲッターとセッターをまとめて用意してくれる感じ

例えば
`CC_SYNTHESIZE(std::string, _name, Name)`
みたいにすると

``` cpp
protected:
	std::string _name;
	
public:
	std::string getName();
	void setName();
```

みたいに展開される

- 通常型

`CC_SYNTHESIZE`

- 通常型(展開時にconst $type&がつけられる)

`CC_SYNTHESIZE_PASS_BY_REF`

- セッターを作らない

`CC_SYNTHESIZE_READONLY`

- セッターを作らない(展開時にconst $type&がつけられる)

`CC_SYNTHESIZE_READONLY_PASS_BY_REF`

- セット時に既に値が入っていた場合、releaseする

`CC_SYNTHESIZE_RETAIN`

## システム系

### ログ出力

`CCLOG(format, ...)`

### 警告

`CCASSERT(condition)`
GitHubのいろいろ[随時更新]

#Gitでバージョン管理
Gitのようなシステムは、**バージョン管理システム（VCS：Version Control System）**と呼ばれ、
他にもいくつか存在する。
Git以外の有名なものでは、「Subversion（SVN）」など。

#issue機能を追加する
GitHubでforkしたプロジェクトには、最初issue機能が付いていない。

GitHubでフォークしたプロジェクトについては、issue機能がデフォルトで無効化されているが、有効化することで、普段と同じようにissue機能が使える。

・issue機能を有効化する方法

[Settings] -> [Features] -> [issues]をチェック

これによって、forkしたプロジェクトでも、issue機能が利用できます。

#ブランチの流れを確認する
いつどのブランチから切って派生させたかなど、視覚的に確認する際には、
![image.png](https://qiita-image-store.s3.amazonaws.com/0/134919/886d8b30-8e04-8832-a5ce-a840499cba3e.png)


のように、InsightsのNetworkから確認することができる。

#かんばん機能
進捗管理など、マネジメント系に使える機能で

![image.png](https://qiita-image-store.s3.amazonaws.com/0/134919/f71ca6b9-5f56-a6fb-0ad8-cf4bd13d0e98.png)

画面の"Create a project"を選択し、

![image.png](https://qiita-image-store.s3.amazonaws.com/0/134919/53d532f5-e007-946e-e377-31c4e3151d46.png)

NameとDescriptionを記入すれば作成できる。

Nameをテストとして作ってみた場合、

![image.png](https://qiita-image-store.s3.amazonaws.com/0/134919/70232b54-35bc-8eca-2f36-495474866da0.png)

のような画面になる。この"Add column"を選択し、
![image.png](https://qiita-image-store.s3.amazonaws.com/0/134919/7bf42258-05b3-cd5c-8379-73fb5a1a165d.png)

のように追加すると、
![image.png](https://qiita-image-store.s3.amazonaws.com/0/134919/0aecbc10-2357-5f4f-c9dc-c0b6b9e28e1d.png)

上記のような画面になる。


このようにコラムを作成できたら、画面右上にある
"Add cards" からカードを追加して管理していくことができる。

また、issueを切ったりプルリクを出していたりすれば、それをカードとしても使えるので紐付けもできて便利。

最終的には、
![image.png](https://qiita-image-store.s3.amazonaws.com/0/134919/8c21f9dd-a4c0-55c9-1ba9-d55caba2fd08.png)
で作成したテストを開くと、
![image.png](https://qiita-image-store.s3.amazonaws.com/0/134919/5c182750-a93e-ad7d-2932-d16d6108c3ce.png)


基本一つの追加機能実装ごとにプルリクをだし、
issueに関してはバグ部分ごとに切り分け、issueの対応はissue番号をつけたプルリクをだす。
上のスクショのかんばん上では、切り分けたissueを並べて管理している。
別にプルリクを並べることもできる。

個人的には[WIP]方式が好きで、（開発規模の小さいレベルなら）それでDoingの部分は事足りるとも思っていて、TODOに関しても、正直issueで上がっているものは全てだと思うので、優先度だけはしっかりラベルをつけて管理できていたら良いのではとも思う。

WIPでプルリク出しておくと、masterとの全体的な差分などを
他メンバーもGitHubから見れるので好き。


#関連

[GitHubに間違ったコミットをpushしてしまった時の対処法](http://qiita.com/YuukiWatanabe/items/d326aad1224f2a559843
)
Gradient has outdated direction syntax. New syntax is like "to left" instead of "right".

久々に昔建てたサイトでcssの変更があったので、 gulp　でsassコンパイルしてみると下記のエラーが。

```
[12:15:57] autoprefixer: [PATH] Gradient has outdated direction syntax. New syntax is like "to left" instead of "right".
```


調べてみると...
https://github.com/postcss/autoprefixer/issues/530

```sample.scss
background-image: linear-gradient(top, #aaa 80%, #555);
```

``linear-gradient`` の書き方が駄目ですよって話でした。
https://www.w3.org/TR/css3-images/#linear-gradients

上記の書き方は下記に修正したら大丈夫でした。

```sample.scss
background-image: linear-gradient(to bottom, #aaa 80%, #555);
```

本番環境だったので焦った😅
Alpine Linux3.5で php-fpm7 (socket) + nginx

* [tukiyo3/alpine-nginx-php7](https://hub.docker.com/r/tukiyo3/alpine-nginx-php7/)

```rb
docker run --rm -it -v `pwd`/www/:/var/www/loaclhost/htdocs/ -p 8080:80 tukiyo3/alpine-nginx-php7
```

## 今回用意するファイル

| ファイル | 説明 |
|:--|:--|
| Dockerfile | nginx, php-fpm7 のインストール |
| docker-compose.yml | nginx, php-fpm7 の起動 |
| conf/php-fpm7.conf | php-fpm7 の sock 生成 |
| conf/nginx.conf | nginx で php-fpm7 の sock 指定 |
| conf/php.ini | timezoneなど設定 |
| www/ | /var/www/localhost/htdocs/ |


## 設定

```rb:Dockerfile
FROM alpine:3.5

RUN apk update
RUN apk add --no-cache nginx php7-fpm certbot
RUN mkdir /run/nginx/
```

```rb:docker-compose.yml 
http:
  #image: alpine:3.5
  image: 8b66a33e6a8d
  restart: always
  ports:
   - "80:80"
   #- "443:443"
  volumes:
   - /etc/localtime:/etc/localtime:ro
   - ./www/:/var/www/localhost/htdocs/:ro

   - ./conf/nginx.conf:/etc/nginx/conf.d/nginx.conf:ro
   - ./conf/php-fpm7.conf:/etc/php7/php-fpm.d/www.conf:ro
   - ./conf/php.ini:/etc/php7/conf.d/php.ini:ro

   #- ./cron/:/var/spool/cron/crontabs/
  command: sh -c "cd /usr/sbin; nginx; php-fpm7; crond -f -l 2"
```

* [nginx と PHP-FPM の仕組みをちゃんと理解しながら PHP の実行環境を構築する - Qiita](http://qiita.com/kotarella1110/items/634f6fafeb33ae0f51dc)
    * /var/run/php7-fpm.sock で nginx が php-fpm と通信する。
    * /etc/nginx/nginx.conf で `server_tokens off;`になっているのでここでは指定しない。



```nginx:conf/nginx.conf
server {
    listen 80 default_server;

    root /var/www/localhost/htdocs;
    index index.php index.html index.htm;

    server_name localhost;

    location / {
        if (-f $request_filename) {
            expires 30d;
            break;
        }
    }

    location ~ [^/]\.php(/|$) {
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        if (!-f $document_root$fastcgi_script_name) {
            return 404;
        }
        fastcgi_pass unix:/var/run/php7-fpm.sock;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
        fastcgi_param PATH_TRANSLATED $document_root$fastcgi_path_info;
    }
}
```

* `listen = 127.0.0.1:9000` をやめて sock にする。

```rb:conf/php-fpm7.conf 
[www]
user = nginx
group = nginx

listen = /var/run/php7-fpm.sock
listen.owner = nginx  
listen.group = nginx

pm = dynamic
pm.max_children = 5
pm.start_servers = 2
pm.min_spare_servers = 1
pm.max_spare_servers = 3
```

```bash:conf/php.ini 
[Date]
date.timezone = Asia/Tokyo
```

## 起動

```
docker-compose up -d
```

```bash:shellを起動する場合
docker-compose exec http sh
```
UnityのAnimatorのTransitionを削除するには


UnityのTransitionの削除法を記述しておきます。
右クリックしてもdeleteキーを押しても削除できないので、詰まりました。

このサイトを参考にしました。
http://answers.unity3d.com/questions/521124/how-do-i-delete-transitions-in-the-animator-state.html

![スクリーンショット 2016-12-29 11.49.06.png](https://qiita-image-store.s3.amazonaws.com/0/53172/4ef034b2-bc93-990c-fe7c-efc0334f642c.png "スクリーンショット 2016-12-29 11.49.06.png")

ご覧の通り、右クリックしても削除できません。

なので、右側の「Transitions」のマイナスボタンを押しましょう。

![スクリーンショット 2016-12-29 11.52.20のコピー.png](https://qiita-image-store.s3.amazonaws.com/0/53172/aec4c972-ebc9-404a-0db5-475ad0de8a06.png "スクリーンショット 2016-12-29 11.52.20のコピー.png")

これでTransitionが消えます。

![スクリーンショット 2016-12-29 11.50.27.png](https://qiita-image-store.s3.amazonaws.com/0/53172/f5889dd2-3c51-d1fa-60ca-d43c3f075461.png "スクリーンショット 2016-12-29 11.50.27.png")
jsのグラフライブラリ52選 その2

だいぶほったらかしにしていましたが(^^;、気を取り直して、その2を書いてみたいと思います。

[前回の記事](http://qiita.com/yasaito/items/c08e5281b1a69dc4f6cf)でも書きましたが、**個人で触るので無料で使えるもの** をコンセプトにして、
触ってみたライブラリにコメントしていきたいと思います。

## [Google Chart API](https://developers.google.com/chart/)
### 良かった点
#### 商用でも無料
言わずもがな、です。
カッコいいグラフを描くとき、試してみたら有料だった。。。なんて話は、実際にありましたからね。

#### 導入は容易
### 微妙な点
#### とにかく重い
描画が重い！
もちろん、使ったライブラリのVersionやらブラウザの種類、ブラウザのversion、一概には言えませんが、筆者の環境では描画がえらく重かったです。

#### ***アニメーションがなかった***
jsでグラフ描くなら、アニメーションをつけたかったな・・・・・
最新のversionには入っているのかな。。。。？


## [D3.js](https://d3js.org/)
### 良かった点
#### とにかく高機能
[D3.js](https://d3js.org/)のポイントは、これに尽きると言って過言ではないのではないでしょうか。
書けるグラフの種類や、細かなチューニング。何でもできちゃいそうです。

#### 導入に何も考えない
htmlファイルにこれだけ書けば、書きたい全てのグラフが描けます。

```html
<script src="https://d3js.org/d3.v4.min.js"></script>
```

他のライブラリだと、書きたい機能によってjsファイルを事細かにimportしないと行けなかったりしますが、
この一行で一通り使えるというのは気が楽ですね。

### 微妙な点
#### 学習コストの高さ
ちょっとグラフを描ければいい。。。。と思っているだけなら、
[D3.js](https://d3js.org/)より他のライブラリのほうが導入が簡単な面があります。
要するに、よほど確信をもって[D3.js](https://d3js.org/)のこのグラフを描きたいんだ！と思わないと、大変かも。

でも、グラフはカッコいいよね。。。

#### [無駄に奇麗なサンプル](https://github.com/d3/d3/wiki/Gallery)
こんなの描くことあるかな・・・・というサンプルたち。
それよりも、動かすための実際のコードと並べておいてほしい。

## [C3.js](http://c3js.org/)
### 良かった点
#### D3をお手軽に使える
D3.jsは敷居が高いな・・・と思ったら[C3.js](http://c3js.org/)ですね。
D3.jsの機能を全部使えるわけではないですが、わかりやすい使い方で、使い始める敷居が低くなります。

### 微妙な点
#### D3.jsの機能をすべて使えるわけではない。
不勉強だったら申し訳ないのですが、D3.jsのいろいろな種類のグラフ、
全てを使えるわけではなさそうでした。

今日はここまで。
積んDoc（つんどっく）

# こんなサービス

積ん読を見える化（＝消化促進）するためのサービス。

## ドメイン

tsun-doc.com （とりあえず押さえた）

# こんな機能

## 見える化

* 金額換算
* 月別の推移
    * 消化ペース
    * 増加ペース
* Amazonからデータをインポート
    * メールの転送設定？

## リマインダー

* 積ん読を優先順位付けして、一番上のものをリマインド
* メールとかTwittertとかSlackとかスマホへのプッシュノーティフィケーションとか、好きなやつを選べる
    * Kindle本の場合は、リンクをクリックしたらKindleが起動するとベストな気がする

## コミュニティ

* 同じ本を積ん読してる人とつながる
    * 読書会の開催
    * 進捗状況を競う
    * この本を積ん読している人はこんな本も積ん読しています

# プロモーション

* [Twitterで「積ん読」に関連するツイート](https://twitter.com/search?f=tweets&vertical=default&q=%E7%A9%8D%E3%82%93%E8%AA%AD&src=typd)をした人にbotが話しかける
PHPからTwitterを操作する、いろいろなパターン(TwitterOAuth編)

# やりたいこと

PHPスクリプトからTwitterを操作したい。

基本的にはTwitter REST APIそのもの。
メソッド(get/post)に対し、連想配列にてURL(statuses/home_timeline等)及びパラメータを渡すことで、
オブジェクトにて結果が返ってくる。
※なお、Streaming APIについては未対応とのこと。

Twitter REST APIの仕様については、下記URLを参照されたい。
https://dev.twitter.com/rest/public

当然ながら、Twitter側のAPI利用制限が適用される。乱発すると止められる可能性があるので注意。

基本的な使い方については、以前の記事を参照して頂きたい。
http://qiita.com/kumasun/items/ae3ff60acab4b1227d61


# 動作確認環境、使用ライブラリ等

- Twitter App https://apps.twitter.com/
- Fedora 24 Server Edition 64bit
- PHP 5.6.29
 - Twitter OAuth 0.7.2 https://twitteroauth.com/


# サンプルコード

## 【共通】ライブラリの読み込みからオブジェクト生成まで

```php:header.php
<?php
require "twitteroauth/autoload.php";
use Abraham\TwitterOAuth\TwitterOAuth;

$consumerKey = "your consumer key";
$consumerSecret = "your consumer secret";
$accessToken = "your access token";
$accessTokenSecret = "your access token secret";

$twitter = new TwitterOAuth($consumerKey, $consumerSecret, $accessToken, $accessTokenSecret);
```

```php:footer.php
if($twitter->getLastHttpCode() == 200) {
    // 操作に成功した時の処理
} else {
    // 操作に失敗したときの処理
}
```

以下のサンプルの共通部分。適宜付ける。


## 自身のタイムラインを取得する

この例では、自身のタイムライン上にある直近20ツイートを抽出している。

```php:get_timeline.php
$result = $twitter->get(
                    "statuses/home_timeline",
                    array(
                        "count" => 20
                    )
);

foreach($result as $tweet)
{
    print $tweet->user->name . "さんのツイート:";
    print $tweet->text."\n";
}
```

出力サンプル

```text:output
デル株式会社 法人向けテクニカルサポートさんのツイート:パスワードリセットディスクの使用方法 [動画約1分]
ハンズネットさんのツイート:おハンズございます。
本日も宜しくお願いいたします！
ツクモ名古屋1号店さんのツイート:【3F買取センター】9のつく日のお楽しみ！本日29日(木)は 全品10％増額買取のツクモの日
```

Tweetに関しては、この他にも様々な情報を取得できるようなので、var_dumpする等して確認されたし。

## ツイートを検索する

```php:search_tweets.php
$result = $twitter->get(
                    "search/tweets",
                    array(
                        "q" => "うまい棒なっとう味"
                    )
);

foreach($result->statuses as $tweet)
{
    print $tweet->user->name . "さんのツイート:";
    print $tweet->text."\n";
}
```

「うまい棒なっとう味」を含むツイートを検索する。
こわくないよ。おいしいよ。


## 画像を添付してツイートする

```php:tweet_with_pictures.php
$picture1 = $twitter->upload("media/upload", ["media" => "karaage1.jpg"]);
$picture2 = $twitter->upload("media/upload", ["media" => "karaage2.jpg"]);

$result = $twitter->post(
            "statuses/update",
            array(
                "status" => "からあげたべたい",
                "media_ids" => implode(",", [$picture1->media_id_string, $picture2->media_id_string])
            )
);
```

あらかじめTwitterに画像をアップロードしておき、メディアIDを取得。
そのメディアIDをツイート本文に付加してPOSTしている。



# 所感

ほとんど何でもできるという印象。
API制限にだけは気を付けよう。
GoogleAppsScriptからSlackに通知を送るスクリプト

コピペで使える簡単スクリプト

## 1.Slackメッセージ送信用クラスを作る
Slack.gsファイルを新規作成する

```#Slack.gs
(function(global){
  var Slack = (function() {

    function Slack(options){
      var options = options || {};
      this.url = options.url || "https://slack.com/api/chat.postMessage";
      this.token = options.token || "Slack API Token";  // APIトークン　（デフォルト値を設定）
      this.channel = options.channel || "#channel_name";  // 通知するチャンネル　（デフォルト値を設定）
      this.username = options.username || "username";  // ボットの名前　（デフォルト値を設定）
      this.icon_emoji = options.icon_emoji || ":icon:";  // ボットのアイコン画像を指定　（デフォルト値を設定）
    }

    Slack.prototype.send =  function(text) {
      var self = this;
      UrlFetchApp.fetch(self.url, {
        "method" : "POST",
        "payload" : {
          token: self.token,
          channel: self.channel,
          username: self.username,
          icon_emoji: self.icon_emoji,
          text: text
        }
      });
    };

    return Slack;
  })();

  global.Slack = Slack;
})(this);
```

## 2.メッセージ送るメインスクリプトを作成

```#main.gs
function myFunction() {
  // デフォルト値を設定していればこれだけでOK
  var slack = new Slack();
  var msg = "Slackに通知したい";
  slack.send(msg);

  // optionsに引数を渡せば通知先などを変更できる
  var anotherSlack = new Slack({
    channel: "#another_channel",
    username: "another_username",
    icon_emoji: ":another_icon:"
  });
  var msg = "別のチャネルに通知したい";
  anotherSlack.send(msg);
}
```

**以上！**

トリガーを設定すれば簡単に定時つぶやきボットが作れますね。
Googleスプレッドシートのセルからメッセージを取得するようにすれば、簡単にメッセージ編集ができるようになります。
Unityの表示方法に関するTip　Unityのファイルの表示方法を変えるには


しょうもないことですが、UnityにおけるProjectのファイルの表示の変え方を記述しておきます。

![スクリーンショット 2016-12-29 11.11.13.png](https://qiita-image-store.s3.amazonaws.com/0/53172/4ff6e700-5c0c-0d31-dfac-274a6c7980e8.png "スクリーンショット 2016-12-29 11.11.13.png")

まあ、見たらわかる通り、ファイルのファイル名が切れてよくわからないです。なので、表示方法を変えましょう。

![スクリーンショット 2016-12-29 11.13.18.png](https://qiita-image-store.s3.amazonaws.com/0/53172/8b7dd8c1-d396-e601-f4e7-eb76a49abb40.png "スクリーンショット 2016-12-29 11.13.18.png")

ここクリックして、「One Column Layout」に変えましょう。
そうすると、こうなるので

![スクリーンショット 2016-12-29 11.15.17.png](https://qiita-image-store.s3.amazonaws.com/0/53172/bc20a186-6c8e-4bbc-57c0-aae4da9f4302.png "スクリーンショット 2016-12-29 11.15.17.png")

このようにファイル名がよく見えるようになります。


![スクリーンショット 2016-12-29 11.16.08.png](https://qiita-image-store.s3.amazonaws.com/0/53172/6b7af318-ee31-17ec-da5e-a3e11f9d1888.png "スクリーンショット 2016-12-29 11.16.08.png")

役に立てていただければ幸いです。
Turbolinks 5 でGAのトラッキングコードを有効にする

こんな感じの CofeeScript を書けばいいみたい。

```
document.addEventListener 'turbolinks:load', (event) ->
  if typeof ga is 'function'
    ga('set', 'location', event.data.url)
    ga('send', 'pageview')
```

Turbolinks は off にされがちだけど、個人サービスレベルであれば、 on のままで何か問題が起きたときは回避していく、という方針でやっていくのも悪くないと思う。早いは正義。

## 追記

Google Analytics のタグが新しくなり、それに対応するには

```
$(document).on 'turbolinks:load', ->
  if typeof gtag is 'function'
    gtag('config', [GA_TRACKING_ID], {'page_path': window.location.pathname})
```

こんな感じ。