OmniAICreator/Qiita-1.07M huggingface dataset:
cordova buildでError: spawn EACCESが発生した時の対処方法

# cordova buildでError: spawn EACCESと怒られた

```
$ cordova build android
ANDROID_HOME=/Users/bin/android-sdk/
JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_101.jdk/Contents/Home
Error: spawn EACCES
```

よくわからない。[ググってもionicのことしか出てこないし](https://stackoverflow.com/questions/38767126/getting-error-spawn-eacces-while-ionic-build-android-in-ubuntu-14-04)書いてあるようにフォルダの権限を変えても直らないし。しばらくはまったけど、以下で直った。

# 対処方法

```
chmod +x "/Applications/Android Studio 3.0 Preview.app/Contents/gradle/gradle-4.0-milestone-1/bin/gradle”
```

どうやらAndroid Studioをアップデートしてgradeの実行権限が変わったためみたいだった。
ヒントは以下。gradeの実行の直後でエラーになってる。

```
$ cordova build android --verbose
No scripts found for hook "before_build".
No scripts found for hook "before_prepare".
Checking config.xml and package.json for saved platforms that haven't been added to the project
Config.xml and package.json platforms are the same. No pkg.json modification.
Package.json and config.xml platforms are different. Updating config.xml with most current list of platforms.
PlatformApi successfully found for platform android
Checking config.xml for saved plugins that haven't been added to the project
Checking for any plugins added to the project that have not been installed in android platform
No differences found between plugins added to project and installed in android platform. Continuing...
Generating platform-specific config.xml from defaults for android at /Users/src/Cordova/test/platforms/android/res/xml/config.xml
Merging project's config.xml into platform-specific android config.xml
Merging and updating files from [www, platforms/android/platform_www] to platforms/android/assets/www
Wrote out android application name "Test" to /Users/src/Cordova/test/platforms/android/res/values/strings.xml
android-versionCode not found in config.xml. Generating a code based on version in config.xml (1.0.0): 10000
Wrote out Android package name "com.bathtimefish.test" to /Users/src/Cordova/test/platforms/android/src/com/bathtimefish/test/MainActivity.java
This app does not have launcher icons defined
This app does not have splash screens defined
This app does not have additional resource files defined
Prepared android project successfully
No scripts found for hook "after_prepare".
No scripts found for hook "before_compile".
ANDROID_HOME=/bin/android-sdk/
JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_101.jdk/Contents/Home
Running command: "/Applications/Android Studio 3.0 Preview.app/Contents/gradle/gradle-4.0-milestone-1/bin/gradle" -p /Users/src/Cordova/test/platforms/android wrapper -b /Users/src/Cordova/test/platforms/android/wrapper.gradle
Error: spawn EACCES
```

あと、このコメントが決め手になった。
https://forum.ionicframework.com/t/ionic-build-android-error-spawn-eacces/88358/5
Riot.jsのコンポーネント間データ渡し

Reactを触った経験を元にRiotに手を出しています。
コンポーネント指向で開発したくても、**AngularやReactはビルドツールが複雑な印象を持たれており、拒否反応がある社内の古参開発者には勧めにくい**と感じていました。**Riotはscriptタグベースで始められる**ので、コンポーネント指向入門としては敷居が低くその点が魅力的ですね！Riotで感覚を掴んでもらえれば「今度はReact試してみる？？？」という気運も高まってきそうです。

今日はRiotを使ったコンポーネント間のデータ連携を整理してみたいと思います。

# データ渡しのパターン
ざっと調べた限りでは以下の4パターンがあるみたいです。

- 属性渡し
- tags経由渡し
- parent渡し
- Observer渡し

## 属性渡し
独自タグの属性に値を渡す方式です。

```html
<mytag name="邪王炎殺黒龍波"/>
```

受け取る側は opts を使います。

```html
<mytag>
  <h1>技名:{opts.name}</h1>
</mytag>
```

渡す値を変数化して動的に変えることも可能です。

```html
<bosstag>
  <mytag name="{skill}"/>
  <script>
  this.skill = "霊丸";
  changeSkill() {
    this.skill = "ローズウィップ";
  }
  </script>
</bosstag>
```

React であれば Props の Validation が定義できるのですがそこはご愛嬌。
※何故か自分の環境では変数経由の属性渡しが上手くいったりいかなかったりする……。

## tags経由渡し
JavaScriptのコードからも子供コンポーネントにアクセス可能です。

```html
<mytag>
  <h1>技名:{name}</h1>
  <script>
  this.name = "霊剣";
  </script>
</mytag>
```

```html
<bosstag>
  <mytag/>
  <button onClick="{changeSkill}">PUSH</button>
  <script>
  changeSkill() {
    //独自タグ名が大文字だったとしても小文字指定になる
    this.tags.mytag.name = "修羅旋風拳";
  }
  </script>
</bosstag>
```

ソースのコメントにも書いてますが tags 以下で指定するタグ名は**全て小文字**です。
便利な反面、子供側のコンポーネントからすると、**変数がいつ誰に書き換えられるか分からないので意図しない挙動に繋がりそうな**気がしています。ご利用は計画的に。

## parent経由渡し
これは tags の逆パターン。子供が親にアクセス方法です。

```html
<bosstag>
  <h1>技名:{name}</h1>
  <mytag/>
  <script>
  this.name = "霊光鏡反衝";
  </script>
</bosstag>
```

```html
<mytag>
  <button onClick="{callBoss}">PUSH</button>
  <script>
  callBoss() {
    this.parent.name = "霊光弾";
  }
  </script>
</mytag>
```

こちらも tags と同様に**いつ誰に書き換えられるか分からない問題**が起こりそうです。

## Observer渡し
これは複数階層から成るアプリだと便利な機能ですね！識別子を付けてアプリ全体に通知を流すことで、その識別子を監視しているコンポーネント全てと連携可能になります。どれだけ階層が離れていても通知は実行できる点がポイントですかね。

```html
<script>
  var observer = riot.observable();
</script>
```

```html
<bosstag>
  <button onClick="{sendMessage}">PUSH</button>
  <script>
  sendMessage() {
    observer.trigger("skill", "裂蹴紅球波");
  }
  </script>
</bosstag>
```

```html
<mytag>
  <h1>技名:{name}</h1>
  <script>
  this.name = "風華円舞陣";
  var self = this;
  observer.on("skill", function(text) {
    self.name = text;
  });
  </script>
</mytag>
```

# 所感
基本的には属性渡しベースで作っていくのが無難？という気がしています。属性名やoptsを見れば外部とのインタフェースが明確に分かりますし、意図しない挙動も比較的起きにくいでしょう。階層構造が深くなってきた場合は、Observer渡しを適宜使っていく……感じなんでしょうかね。

ReactでいうRedux相当のものがRiotにもありそうなので、もう少し調べてみようと思います。
Laravel構築手順（CentOS)

Laravelの構築手順　（CentOS)
-
PHPのフレームワークであるLaravelが急激に成長しているので、私もLaravelを使用してみようと思い、構築手順をここにメモ感覚で示しおきます。（以前まで、フレームワークを使わずに頑張って直書きPHPで頑張っていた者です）
構築するLaravelは最新のバージョン5.5です。プロジェクトを作る際は、古いバージョンを指定して作成できるので、最新でも心配はいりません。

## CentOSに構築
構築作業を行ったOSの詳細は以下になります。

```
$cat /etc/redhat-release
CentOS Linux release 7.2.1511 (Core)
```
###1. PHPのアップデート&インストール
まず初めに、PHPのアップデート（インストール)を行います。古いPHPのバージョン、特にCentOSのリポジトリにデフォルトで入ってるPHPのバージョンでは、Laravelのプロジェクトを作成するときに、laravelのバージョンを指定すると（例えば 5.1など)、エラーを吐かれてしまいます。なので、PHP7にアップデートしておきましょう。
まずは、既にインストールされているPHPを以下のコマンドで削除します。

```
$yum remove php-*
```
次に、外部リポジトリをインストールしてきます。（PHP7はデフォルトで入ってるBascリポジトリにないので）
以下の二つのコマンドを実行してください。このとき、順番を間違えないようにお願いします。私はここで少しはまったしまいました。多くのサイトや記事に書いてある方法で外部リポジトリをインストールしても、PHP7が入りませんでした。リポジトリの優先度を変えたり、いろいろ試したのですが、結局だめでした。。。。　同じ境遇の人でも、以下のコマンドならば、しっかりとインストールすることができます。

```
$rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm
$rpm -Uvh https://mirror.webtatic.com/yum/el7/webtatic-release.rpm
```
これで、PHP7がインストールできるようになっているので、実際にインストールします。

```
$yum install -y mod_php71w php71w-cli php71w-common php71w-gd php71w-mbstring php71w-mcrypt php71w-mysqlnd php71w-xml
インストールされたか確認
$php -v
```
###2. Composerのインストール
LaravelのインストールにはComposerというPHPのパッケージ管理システムが必要なので、インストールします。

```
$curl -sS https://getcomposer.org/installer | php
```
インストールしたら、composerコマンドをどこでも叩けるように、パスの通ったところに移動させましょう。

```
$mv composer.phar /usr/local/bin/composer
```
これで、composerコマンドが使えるようになったと思います。

###3. Laravelのインストール
やっと本題です。Laravelを先ほどインストールしたcomposerを使い、インストールしましょう。

```
$composer global require "laravel/installer=~1.1
```
これで、無事Laravelのインストールが終わりました。

###4. プロジェクトの作成
早速、プロジェクトを作成してみましょう。

```
$composer create-project laravel/laravel プロジェクト名 --prefer-dist
```
Laravelのバージョンを指定して作成する場合は以下になります。プロジェクトの後ろにバージョンを指定するだけです。

```
$composer create-project laravel/laravel プロジェクト名 5.1(など) --prefer-dist
```

テストサーバを以下のコマンドで立てて、(http://localhost:8000/)
にアクセスしてみましょう。

```
作成したプロジェクトに移動
$cd プロジェクト名
$php artisan serve
```
[Monaca] aタグを動的にInAppBrowserプラグインで開くようにしてみる

以前、[`<a>`からInAppBrowserプラグインを利用する](http://qiita.com/keeey/items/d81b3c64dc5c1fcc1c9b#aからinappbrowserプラグインを利用する)でも書きましたが、Monacaで開発したアプリでaタグを利用した場合、遷移先にアプリに戻るためのリンクが用意されていない場合は、アプリに戻ることができません。

そこで、aタグをInAppBrowserプラグインを利用して開くことになるのですが、はじめから下記のように、

```
<a href="#" onclick="openMonaca();">Monaca</a>

<script>
  function openMonaca() {
    window.open("https://ja.monaca.io/", '_blank', 'location=yes');
    return false;
  }
</script>
```

記述することができれば良いのですが、aタグのリンク先を動的にInAppBrowserプラグインで開きたい場合もあります。

下記のように記述することで、動的にaタグをInAppBrowserプラグインで開くことができます。

```js
var arrATag = document.getElementsByTagName('a');
if (arrATag.length > 0) {
  replaceATag(arrATag);
}

/**
 * aタグを置換します。
 * 
 * @param {String[]} arrATag
 */
function replaceATag(arrATag){
  for(var i = 0; i < arrATag.length; i++) {
    (function(a) {
      var href = a.href;
      a.href = '#';
      a.onclick = function(){
        var ref = window.open(href, '_blank', 'location=yes');
        return false;
      }
    })(arrATag[i]);
  }
}
```

HTMLファイル読み込み時にaタグを動的に変更する場合は、下記のように記述することで可能です。

```js
document.addEventListener('DOMContentLoaded', function(event) {
  var arrATag = document.getElementsByTagName('a');
  if (arrATag.length > 0) {
    replaceATag(arrATag);
  }
}, false);

function replaceATag(arrATag){
  for(var i = 0; i < arrATag.length; i++) {
    (function(a) {
      var href = a.href;
      a.href = '#';
      a.onclick = function(){
        var ref = window.open(href, '_blank', 'location=yes');
        return false;
      }
    })(arrATag[i]);
  }
}
```

aタグを動的にInAppBrowserで開くようにする必要がある場合は、一度おためしください。
Githubのプルリクエストで、マージ先ブランチに含まれている変更がプルリクエストの変更差分に表示されてしまう問題

社内の開発チームでタイトルのような問題がでていた。
初めてきいた時はちょっと信じられず、かなり疑いました(w)が、実際やってみるとほんとうにそのとおりでした。
この状態、下で図で説明していますが、コードレビュー時に<font color="DeepPink">致命的</font>です。

なぜかというと、レビュー対象ではない変更差分が表示されるため、どれをレビューしていいか、まったくわからなくなるから。

まあ、ちょっとややこしいので図で説明する。

#どういうことか？

こんなブランチで開発をしているとする。
これ自体はよくある形でしょう。

<img width="742" alt="スクリーンショット 2017-06-17 14.08.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/25562/dc90fb3c-fc44-6719-64ae-ffce33e615cb.png">

この時点で各BranchからMasterブランチへのプルリクエストはこうなっているはず。

###BranchXからMasterへのプルリクエスト

<img width="1058" alt="スクリーンショット 2017-06-17 13.53.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/25562/227f0c56-159d-d7d5-4a7f-1d3a6ad10b2e.png">

##BranchYからMasterへのプルリクエスト

<img width="1053" alt="スクリーンショット 2017-06-17 13.54.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/25562/9fe4f424-18ec-1ae7-d757-19f382af79dc.png">

#BranchXの開発にBranchYの機能が必要になった
次にBranchXの開発中にBranchYの機能が必要になったため、
以下の図のようにBranchXにBranchYにマージした。
(え、それ開発スコープおかしくない？というツッコミはなしでｗ)

<img width="531" alt="スクリーンショット 2017-06-17 14.10.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/25562/7065dfc6-d411-ce2e-d917-f0d436860834.png">

#BanchYの開発が終わったのMasterへマージをする
BranchYの開発完了(やった！テストコードあるかい？)したので、Masterブランチにマージしました。
よくある感じですね。

<img width="712" alt="スクリーンショット 2017-06-17 14.15.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/25562/182be092-334e-05fa-522d-aaeaef79ceb9.png">

#BranchXの開発完了したので、コードレビューをするためのプルリクエストをみる。
ちなみに、今の状態は概念的にはこんな感じ。

<img width="836" alt="スクリーンショット 2017-06-17 17.04.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/25562/3ab5e753-fd17-6047-b957-cd2de3a14140.png">

さあ、BranchXの開発が終ったので、チームにレビューをしてもらおう。
「ん？？なんかレビュアーがざわついてる。。」

![12.jpg](https://qiita-image-store.s3.amazonaws.com/0/25562/d786e04d-8594-d84b-9689-44d5b044839b.jpeg)


「レビューア」ん。。。なんかおかしくない？変更ファイル多くない？

#BranchXからMasterのプルリクエストをみてみよう。

<img width="723" alt="スクリーンショット 2017-06-17 13.55.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/25562/5ee5a1f7-3a85-fabd-12ff-5e8d66519984.png">

そうです。BranchYの差分がでています。上記の概念図でも表していますが、
BranchYはすでにMasterブランチにマージされているのですが、
BranchXからMasterのプルリクエストにBranchYの変更差分表示されていました。

#これはしんどい。
はい、これめちゃしんどいんです。
上記は例ですが、実際こんなに変更フィルが少なくなるはずもなく、まさにカオスです。
実際、かなりチームの生産性落ちます。これ。


#解決方法
調査してみたら簡単でした。

###<font color="Blue">「BranchXでMasterを追従する(pullする)」</font>

はい、これだけです。
コードにするとこうなる。

```
# git checkout BranchX
# git pull origin master
# git push origin BranchX
```

簡単でしょ？
BranchXからMasterへのプルリクエストはこうなりました。

<img width="1058" alt="スクリーンショット 2017-06-17 13.53.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/25562/355b97a4-c65a-04aa-f841-e1be57ebf033.png">


わーい。おしまい。
メモ - IntelliJ IDEAでLWJGL3のライブラリを追加する時につまづいた点

##LWJGL3のネイティブライブラリを追加する時の注意点
LWJGLが新しくなってから、ソースもJavadocもネイティブファイルも全てjarファイルに変身し、
従来のセットアップから少しやり方が変わってしまいました。
解決方法を海外サイトで見つけるもIntelliJ初心者な自分にはつまづいてしまったので、
念のためここに覚え書きメモ。
<hr>
「File > Project Structure > Libraries」
「New Project Library > Java」
で、ダウンロードしてきたLWJGL3のjar達を全部入れた後、
「Add(Alt+Insert)」で全ての"lwjgl-\*-natives-\*.jar"を選択。
「Choose Categories of Selected Files」ウィンドウが表示されるので、
ここで「Native Library Location」を選ばず、「Classes」を選択し「OK」。

これで問題なくプログラムが動けばおｋ
###参考文献
http://forum.lwjgl.org/index.php?topic=6428.0
hamlでアノテーション(rake notes)を利用する方法

アノテーションって便利ですよね〜、TODOとかFIXMEとかHACKとか書いてあとで`rake notes`するだけで一覧することが出来ます。

**：参考**
http://qiita.com/tbpgr/items/1c046a877c6be4d89876

デフォルトでスキャンしてくれる拡張子は
`.builder、.rb、.rake、.yml、.yaml、.ruby、.css、.js、.erb`なのですが、それ以外にもしてほしいときが有りますよね〜。

そんなときは

```rb
config.annotations.register_extensions("scss", "sass", "less") { 
|annotation| /\/\/\s*(#{annotation}):?\s*(.*)$/ }
```

こんな感じで書き込めばいいよ〜、[Rails Guides](https://railsguides.jp/command_line.html)に書いてありました。

そこで`config/environments/development.rb`とかにでも書けばいいのかな〜、と思ったら違いました。

正しくはRakefileです。Rakefileに書きましょう。

こんな感じに書くことになります。

```rb:Rakefile
SourceAnnotationExtractor::Annotation.register_extensions("haml") {
 |tag| /\/\/\s*(#{tag}):?\s*(.*)$/ }
```

情報源は例によってstackoverflow
https://stackoverflow.com/questions/32492734/rake-notes-should-scan-haml
Redashの結果をそのままExcelに流し込むVBA

# これはなに？
Redashは便利なんですが、どうしてもExcelで加工したいなどのニーズはまだまだ残っていると思います。
以前、いちいちRedashからデータをコピペしなくて済む方法を記事にしましたが、その方法では50シート目あたりから辛くなってきてメモリ不足で落ちるようになりました。

参考：
Redashのデータを毎日エクセルへコピペしている人へささげる -APIを利用した自動更新方法-
http://qiita.com/aomegane/items/63f0a5086fd045ee0067

ということで、もうVBAを書くしかない！ということでVBAを書いてみました。

# ソースコード
## 設計
1. 同名の
2. RedashのAPIを叩き、CSVを取得する
3. CSVをパースしてシートに書き込む

ということをしています。

## コード
```vbnet:
Sub Main()
    'RedashAPIを使用するための変数
    Const ApiToken = "YOUR-API-KEY"
    Dim Url As String
        
    '取り込むRedashのQueryIdを定義する
    TargetQueryIds = Array("939", "1434", "879", "806", "1042", "1337", "876", "895", "897", "1338", "1339", "833", "885", "835", "1568", "1002", "1408")
    
    'Queryごとにループを回す
    For Each tqid In TargetQueryIds
        Url = "https://YOUR-REDASH-URL/api/queries/" + tqid + "/results.csv?api_key=" + ApiToken
        
        'Redash のAPIを叩き 結果をCSVとして取得する
        Dim ResultCsv As String
        ResultCsv = GetContents(Url)
        
        '同名称のシートがあれば削除し、新しいシートにデータを保存する
        MakeRefreshedSheet (tqid)
        CsvToSheet (ResultCsv)
    Next
End Sub

'ReadshのAPIを叩いてCSVで返す
Function GetContents(Url As String) As String
    Dim XmlHttp As Object
    Set XmlHttp = CreateObject("MSXML2.XMLHTTP")
    XmlHttp.Open "GET", Url, False
    XmlHttp.Send
    GetContents = XmlHttp.ResponseText
End Function

'CSVをシートに書き込む
Function CsvToSheet(ResultCsv As String)
    StringLines = Split(ResultCsv, vbCrLf) '改行コードでSplitして行に分割する
    i = 0
    For Each sl In StringLines '1行ずつ処理
        CellValues = Split(sl, ",")
        j = 0
        For Each c In CellValues  '1列ずつ処理
            Cells(i + 1, j + 1).Value = c
            j = j + 1
        Next
        i = i + 1
    Next
End Function

'同名のシートがあれば削除し、新規のシートをつくる
Function MakeRefreshedSheet(sname As String)
     If ExistsWorksheet(sname) Then
        Application.DisplayAlerts = False
        Worksheets(sname).Delete
        Application.DisplayAlerts = True
     End If
     Set wSheet = Worksheets.Add
     wSheet.name = sname
End Function

'ワークシートの存在チェックを返す
Function ExistsWorksheet(sname As String)
    Dim ws As Worksheet
    For Each ws In Sheets
        If ws.name = sname Then '存在する => True
            ExistsWorksheet = True
            Exit Function
        End If
    Next
    ExistsWorksheet = False '存在しない => False
End Function
```

## ハマりどころ
<b>RedashのjsonAPIは列の並び順が画面と異なる</b>
なので今回はCSVを返すAPIを利用することにしました

## 画面
![image.png](https://qiita-image-store.s3.amazonaws.com/0/44801/2d29334f-899f-e92f-4fec-d209c12b7b77.png)
追加インストールなしでpowershellのカスタマイズ

#概要
今までずっとConEmu使ってたけど、純正のpowersehllがプロパティからカスタマイズできることを知って、これConEmuいらなくね？と思い、実行したことをまとめました。
カスタマイズ項目は主に2点
1.カラースキーム(molokai風)
2.フォント(consolasとMS ゴシックのフォントリンク)
完成したカスタマイズをレジストリに保存するスクリプトを作成したので、windowsの再インストール時などはスクリプト実行でカスタマイズを行える。(自己責任でお願いします。)

#.regファイルの作成
下記2つの.regファイルを作成する。
.regファイルの文字コードは少し特殊なので、既存のレジストリをregeditからエクスポートし、メモ帳で開いて編集すると楽。

```console_config.reg
Windows Registry Editor Version 5.00

[HKEY_CURRENT_USER\Console]
"ColorTable00"=dword:00222827
"ColorTable01"=dword:0035e1a4
"ColorTable02"=dword:005f7174
"ColorTable03"=dword:008f8f8f
"ColorTable04"=dword:00000000
"ColorTable05"=dword:00000000
"ColorTable06"=dword:00000000
"ColorTable07"=dword:00d5ef66
"ColorTable08"=dword:0079dde4
"ColorTable09"=dword:00eed96e
"ColorTable10"=dword:00fd7bb1
"ColorTable11"=dword:0090af36
"ColorTable12"=dword:003b58ec
"ColorTable13"=dword:002a96f9
"ColorTable14"=dword:006b1cf6
"ColorTable15"=dword:00f2f8f8
"CtrlKeyShortcutsDisabled"=dword:00000000
"CursorSize"=dword:00000019
"EnableColorSelection"=dword:00000000
"ExtendedEditKey"=dword:00000001
"ExtendedEditKeyCustom"=dword:00000000
"FaceName"="Consolas"
"FilterOnPaste"=dword:00000001
"FontFamily"=dword:00000000
"FontSize"=dword:000e0007
"FontWeight"=dword:00000000
"ForceV2"=dword:00000001
"FullScreen"=dword:00000000
"HistoryBufferSize"=dword:00000032
"HistoryNoDup"=dword:00000000
"InsertMode"=dword:00000001
"LineSelection"=dword:00000001
"LineWrap"=dword:00000001
"LoadConIme"=dword:00000001
"NumberOfHistoryBuffers"=dword:00000004
"PopupColors"=dword:0000002f
"QuickEdit"=dword:00000001
"ScreenBufferSize"=dword:012c0050
"ScreenColors"=dword:0000000f
"ScrollScale"=dword:00000001
"TrimLeadingZeros"=dword:00000000
"WindowAlpha"=dword:000000e6
"WindowSize"=dword:00190050
"WordDelimiters"=dword:00000000
"CurrentPage"=dword:00000003
```

```fontlink.reg
Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\FontLink\SystemLink]
"Consolas"="MSGOTHIC.TTC,ＭＳ ゴシック"

```
#powersehllのプロファイル作成
powersehllの文字コードがデフォルトのcp932だとconsolasを選択できないので変更する。下記プロファイルを作成する。

```my_profile.ps1
chcp 65001
#ほかにも個人的なカスタマイズを記載する。
```

#初期設定スクリプトの作成
上記ファイルを実行するスクリプトを作成。このスクリプトを管理者権限で実行すればカスタマイズ完了です。

```init_powersehell.ps1
#my_profileのシンボリックリンクをpshomeに作成
$scriptPath = (Split-Path $MyInvocation.MyCommand.Path -parent)
if(!(test-path $pshome\profile.ps1)){
New-Item -ItemType SymbolicLink -Path $pshome\profile.ps1 -Target $scriptPath\my_profile.ps1
}

reg import fontlink.reg
reg import console_config.reg
```

#カスタマイズが適用されない場合
*regeditでHKEY_CURRENT_USER\Console配下のごみを消すと適用される場合がある。
*powershellはショートカットごとにプロパティが保存されているので、レジストリを書き換える前に作成したショートカットには適用されない。ショートカットを作り直す必要がある。
*ショートカットを作り直しても古いショートカットのプロパティのままの場合がある。これはよくわからない。
Kotlin覚書-環境構築

[Google I/O 2017](https://events.google.com/io/)で、Kotlinが正式にAndroidの開発言語となりました。

これはKotlinを覚えないといけません。

ということで、Java→Kotlinをした際の覚書をここに書いていきます。

# Kotlinの導入
AndroidStudioにKotlinを導入します。
これは非常に簡単。
1. [Android Studio] -> [Preferences]を開きPluginから[Install JetBrains Plugin...]を選択する。![image.png](https://qiita-image-store.s3.amazonaws.com/0/151973/fcd4420c-3214-e25c-570a-e7c7251ac442.png)
2. 検索窓にkotlinと打てば出てくるので、インストールします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/151973/0bbaf5d8-0c08-aa50-a191-b244f1c0cf6d.png)

インストールが完了したら、AndroidStudioを再起動すれば、kotlinが使えるようになってると思います。

# Java→Kotlin変換
今あるJavaのコードをKotlinに変換するのは簡単にできます。
1. 変換したいJavaファイルを開きます。
2. タブから[code]->[Convert Java File to Kotlin File]
![image.png](https://qiita-image-store.s3.amazonaws.com/0/151973/7764010a-7347-3e58-251a-a97332ceb8ea.png)

ショートカットキーまで用意されてるんですね・・・( ´ー｀)
⌥⇧⌘Kらしいです。頻繁には使わなそうですけどね・・・

さて、それではそろそろ構文などなどを・・・と思いますが、
色々と長くなりそうなので、一旦環境設定ということでコードについては別で投稿します。
Tumblrテーマで苦労した事

　Tumblrは色々カスタマイズ出来てテーマも共有できて楽しいんだけど、いちから作るとなるとそれなりに大変だったりします。
ワタシがテーマ作成で苦労した主な点を纏めてみました。
Qiitaの[公式ブログ](https://blog.qiita.com/)って、Tumblrを使ってるんですね。

##テーマ
　本当はcssのみで作りたかったんだけど、携帯からの利用を考えるとスクリプトも使わらずに負えない。
で、cssフレームワークを利用するのがやりやすいのかな。

###フォント
####フォント指定
　これが一番悩ましい。
ユーザーが複数のフォントから選択可能な独自タグ「`{TitleFont}`(ブログタイトル部分のフォント)、`{BodyFont}`(ボデイ部分のフォント)」を使う方法があるけど、その中に日本語フォントはありません。
う～ん、[Google Fonts + 日本語 早期アクセス • Google Fonts + Japanese Early Access](
https://googlefonts.github.io/japanese/)を使うとか。
cssフレームワークを使う場合はフレームワークのをそのまま使うのが殆どです。
####アイコンフォント
　どのフォントを使ったら迷ったので、有名な[Font Awesome](https://fontawesome.io)を使うことに。
だけど、Tumblrはアップロードできるファイルが限られているし,全てが必要なわけではない。
CDNは手軽で便利。だけどサーバーが落ちるとその部分は表示されないし、全てを読み込むし、非常用ならいいんだろうけど。
　なので、フォントを選んで使えるアイコンフォントジェネレーターの[Fontello](https://fontello.com/)を選択。
ダウンロードしたzipファイルを解凍し、fontelloのフォルダの中のcssフォルダの中にある埋め込みファイル(`fontello-embedded.css`)を使ったらできました。

###フォトセット投稿
　シンプルに複数枚画像を表示させるだけであれば問題ないのですが、Tumblrダッシュボードのように並び替え可能にさせようとするとそれが大変でした。
　レスポンシブ用独自タグに`{Photoset}`と言うのがあります。
これがそのまま挿入しただけでは携帯ではダメなんですね。
以前はあるスクリプトを使っていましたが、もっとコンパクトに出来ないかなと探しても探しても全くわからないので半ば諦めていました。
それでも根気よくhtmlを弄っていると、cssで`@media`を使って幅の値を指定してやったらレスポンシブに出来ました(^▽^)

##参考リンク

###Tumblr公式
* [開発者センター | Tumblr](https://www.tumblr.com/developers)
* [Creating a custom HTML theme | Tumblr](https://www.tumblr.com/docs/ja/custom_themes)
* [テーマのローカライズ | Tumblr]
(https://www.tumblr.com/docs/ja/localizing_themes?language=ja_JP)
* [テーマを送信 | Tumblr](https://www.tumblr.com/themes/new)
* [Tumblr Official | Tumblr](https://www.tumblr.com/theme/37310)
Ruby on Railsで動的なツイートボタンを作成

ユーザーが閲覧しているサイトについてTwitterでツイートを行うことを促すツイートボタン。

その内容をModelの値や条件分岐によって異なる値で柔軟に設定ができたら便利だなーと思い、Railsで作成しているWebサービスに組み込んでみました。

##実装例

###コントローラー

```rb
...(省略)
@tweet_url = URI.encode(
  "http://twitter.com/intent/tweet?original_referer=" +
  request.url +
  "&url=" +
  request.url +
  "&text=" +
  "記事『" + @article.title + "』を閲覧しています。" 
)
...(省略)
```

ボタンを実装したいページのコントローラーに対し、上記のコードを追加し、ツイートボタン用のURLを設定します。
テキスト処理の仕方がちょっと不細工になってしまいましたので、各自お好みでいい感じに整えてください。
@tweet_urlに対して適切なURLが入っていさえいればOKです。

一応URLに設定しているパラメータの簡単な解説↓

* original_referer:ツイート後に表示される元に戻るリンクに使用されます
* url:ツイートの末尾にここに設定されたURLが追記されます
* text:ツイート本文です

他にもユーザー名を関連付ける__via__やハッシュタグを付与する__hashtags__などあります。
リンクURLの詳細についてはTwitterのWeb Intentsについて調べてみてください。
基本的に__url__と__text__さえ設定しておけば、基本的な目的は達成できます。

またツイート本文には日本語を使用することが多いと思いますので、URL全体にエンコード処理を加えています(URI.encode)
これは無くても何とかなったけど一応加えておきました。

### ビュー
```html+erb
...(省略)
<%= link_to @tweet_url,:onclick=>"window.open(this.href,'hoge', 'height=400, width=600');return false;" do%>
  この記事についてツイートする
<% end %>
...(省略)
```

あとはlink_toでツイートリンクを作成するだけです。
window.openで新規ウィンドウで開くようにしています。同ページでリンクさせる場合は特に設定不要です。
オプションに:target=>["_blank"] を追加すれば別タブで開くように設定できます。
お好みでボタンの装飾など行ってください。

## まとめ
以上でサクッとツイートでリンク共有できるリンクが作成できました。
ご自身のWebサービスに追加して、拡散を狙ってみてはいかがでしょうか。
閲覧いただき、ありがとうございました。
Google Cloud Machine Learningの設定で詰まった

Next TokyoでGoogle Cloud Machine Learningに刺激を受け、GCPのCloud Machine Learningを試してみた時の、設定時に詰まった箇所をメモしておきます。

Cloud Machine Learningの設定で参考にしたサイト:
URL:https://cloud.google.com/ml/docs/how-tos/getting-set-up


#詰まった場所1 
必要なツールと依存関係をインストールする為に以下を実行した際に、
scipy 0.19.0のダウンロードが完了しない。

```コマンドライン
curl https://raw.githubusercontent.com/GoogleCloudPlatform/cloudml-samples/master/tools/setup_cloud_shell.sh | bash
```

使用環境の確認の為に下記を実行しても当然エラーが出る。
```コマンドライン
curl https://raw.githubusercontent.com/GoogleCloudPlatform/cloudml-samples/master/tools/check_environment.py | python
```

#解決策
scipy 0.19.0を手動で端末にダウンロードしてからインストールする。
①　scipy 0.19.0を下記URLをダウンロード
```URL
https://pypi.python.org/pypi/scipy
scipy-0.19.0-cp27-cp27mu-manylinux1_x86_64.whl 
```
②　cloudコンソールからscipy 0.19.0をアップロード

③　chmodでscipy-0.19.0-cp27-cp27mu-manylinux1_x86_64.whlの権限変更

④　手動でインストール
```コマンドライン
pip install --user  -U scipy-0.19.0-cp27-cp27mu-manylinux1_x86_64.whl
```

⑤　再度必要なツールと依存関係をインストール
```コマンドライン
curl https://raw.githubusercontent.com/GoogleCloudPlatform/cloudml-samples/master/tools/setup_cloud_shell.sh | bash
```

使用環境の確認を実行

```コマンドライン
curl https://raw.githubusercontent.com/GoogleCloudPlatform/cloudml-samples/master/tools/check_environment.py | python
```
```
Success! Your environment has the required tools and dependencies
```
無事解決！！


#詰まった場所2
Cloud ML プロジェクトの初期化の初期化で下記を実行
```コマンドライン
gcloud beta ml init-project
```
エラーが出る。
```ERROR: (gcloud.beta.ml) Invalid choice: 'init-project'.
Usage: gcloud beta ml [optional flags] <group>
  group may be           language | speech | vision
For detailed information on this command and its flags, run:
  gcloud beta ml --help
```

下記に修正して実行
```gcloud ml-engine init-project
```
"gcloud beta ml"が"gcloud ml-engine"に切り替わったようです。

#最後に
GCPのサービスがどんどん変化していくので、キャッチアップの大切さを感じます。
まだ設定しかしていませんが。。。
mrubyでQRCode

mrubyでQRCodeを表示するためのmrbgemを作ってみました。

https://github.com/yamori813/mruby-qrcode

後日追記：すでに作られていた方がいらっしゃいました。そちらは画像を返すmrbgemのようですが、こちらは画像処理が入っていないmrbgemになります。

使い方は簡単で文字列をmruby-packを使って配列にして、クラスメソッドのencodeに渡します。

```ruby
txt = "MORI MORI QRCode"
qr = QRCode.encode(0, 1, txt.unpack("C*"))
```

でqrコードのビットパターンの配列が返ってきます。

第一引数がLevelで0から4で第二引数がVersionで第三引数がエンコードするデータの配列です。

漢字の場合はmruby-nkfでSJISにします。

```ruby
sjis = NKF.nkf('-s', txt).unpack("C*")
```

mruby-cairoで液晶に表示してみました。

```ruby
    wnnsjis = NKF.nkf('-s', wata + naka).unpack("C*")
    qr = QRCode.encode(0, 2, wnnsjis)
    bs = 2
    offx = (128 - (25 * bs)) / 2
    offy = 80
    c.set_source_rgb(0, 0, 0)
    for n in 0..24 do
      for m in 0..24 do
        if qr[n * 25 + m] == 1 then
          c.rectangle(m*bs+offx, n*bs+offy, bs, bs)
          c.fill()
        end
      end
    end
    lcd.write_cmd([0x2C])
    lcd.copyspi(c)
```

![写真（2017-06-17 17.21） #2.jpg](https://qiita-image-store.s3.amazonaws.com/0/104066/dc150e50-0642-a7f0-0c0a-142186906804.jpeg)

SJISでゴメンね＞K林さん

c++のコードを使っているので実行にはc++のライブラリが必要になります。

コアの部分は[サイテック](http://www.psytec.co.jp/)さんが公開されているコードを利用させてもらいました。ありがとうございます。

mruby-qrcodeはFreeBSDで作りましたが、特にOS依存はないはずなので、他のプラットフォームでも使えると思います。
Bloccomとは?

#**Bloccomとは?**
**Bloccomとは**、**法政大学デザイン工学部システムデザイン学科**の教授が開発したマイコンボードの名称である。今回、このマイコンボードをCrowdfundingによる出資を募り、世間に公開する運びとなった。
[法政大学デザイン工学部システムデザイン学科HP](http://www.hosei.ac.jp/edn/gakka/sd/index.html)

そのため、現在Crowdfunding公開に向けて準備を行っている。

#Bloccom紹介
**Bloccom**は、ESP-WROOM-02を搭載したWiFI接続可能なマイコンボードである。また、さまざまなセンサを搭載可能なAdditional Boardがあり、最大255個の接続が可能である。
![Bloccom_LOGO.png](https://qiita-image-store.s3.amazonaws.com/0/185986/42d524ab-6a91-e7af-07f7-843770c223f3.png)



##構成部品
-USBポート
-CPU本体
-Additional Board

###USBポート
CPU本体からUSBポートだけを切り離すことで、PCと接続するとき以外は取り付ける必要がなく、CPU本体の大きさをなるべく最小にしている。![USB.png](https://qiita-image-store.s3.amazonaws.com/0/185986/ce828f61-1981-4afe-2cdc-ce7105c97f22.png)

###CPU本体
CPU本体は34×36mmの基盤に、ESP-WROOM-02や青色LED、電源ポートが搭載されている。
[Chapter1 LED点灯](http://qiita.com/Bloccom/items/4722dd0f8fac82e9531c)
![CPU.png](https://qiita-image-store.s3.amazonaws.com/0/185986/137dc24c-fa83-db1b-acc7-037de1e66f56.png)

###Additional Board
Additional BoardはCPU本体同様34×36mmの基盤であり、I2Cに対応したセンサを搭載させることができる。

現在実装済みのセンサ
[Chapter2 温湿度・気圧センサ](http://qiita.com/Bloccom/items/34252904c7cfa10cdd80)
Chapter3 Coming Soon
　　　　　　:
![Additional-Board.png](https://qiita-image-store.s3.amazonaws.com/0/185986/58b8d63a-7c4f-15a7-e31c-c4d83b6ac337.png)

##接続
**上記**の画像を見てもらうとわかるが、基盤にはメス型のソケットしか搭載していない。そこで、CPU本体とAdditional Boardを接続するために、オスオスのピンで両者を繋ぐ。

下記はそのイメージ画像である。

**横接続**
![横軸結合2.png](https://qiita-image-store.s3.amazonaws.com/0/185986/874c9b55-90bb-c433-462e-470c20dc9083.png)


**縦接続**
![縦軸結合1.png](https://qiita-image-store.s3.amazonaws.com/0/185986/46c488d7-5410-a746-9531-59f007b39a41.png)

上記のように、横・縦双方向の接続を実現させ、プロダクトなどの実装時の幅を広げる。

##実装
実装時の形態は個人の自由に任せるが、私たちは固定板を設け接続不良を防ぐ。
![実装.png](https://qiita-image-store.s3.amazonaws.com/0/185986/9b6f3c9a-b8f6-4be8-f5cd-288412901bcd.png)

以上でBloccomの紹介終了

[Chapter0 SetUpに進む](http://qiita.com/Bloccom/items/9537a1228498dc5f061c)
第15回つぶやき勉強会 ~ みんな大好き正規表現のルック ~ 

```rb
  tbody
    - @admin_quizzes.each do |admin_quiz|
      tr
        td = link_to 'Show', admin_quiz_path(admin_quiz)
        td = link_to 'Edit', 
                     edit_admin_quiz_path(admin_quiz)
        td = link_to 'Destroy', 
                     admin_quiz_path(admin_quiz), 
                     data: { confirm: 'Are you sure?' }, 
                     method: :delete
```

ここから、`admin_quiz` にマッチする regex を教えてください。`edit_admin_quiz_path` など、suffix に `_path` があるものにはマッチさせてはいけません。

----

# 解答

```rb
/admin_quiz(?!_)/
```
ESLint、Airbnbのスタイルガイドをすべて守るのは難しいね。


## create-react-appで生成されたApp.jsからエラー

何もしてないのにエラーが出た。

```vim
src/App.js|5 col 1 error| Component should be written as a pure function (react/prefer-stateless-function)
src/App.js|8 col 7 error| JSX not allowed in files with extension '.js' (react/jsx-filename-extension)
```

prefer-stateless-functionはその名の通りに状態がないコンポーネントはstateless functionを使ってくれと言う意味で、
jsx-filename-extensionはjsxフォーマットなのに拡張子が.jsxではないと言う意味である。

まずはprefer-stateless-functionについて修正してみた。

```vim
src/App.js|5 col 21 error| Missing space before function parentheses. (space-before-function-paren)
```

今度はfunctionの後ろに空白を入れると指摘された。
function()はダメでfunction ()にするとの話だ。

```javascript
    1 import React, { Component } from 'react';
    2 import logo from './logo.svg';
    3 import './App.css';
    4
⚠   5 const App = function () {
    6   return (
    7     <div className="App">
    8       <div className="App-header">
    9         <img src={logo} className="App-logo" alt="logo" />
   10         <h2>Welcome to React</h2>
   11       </div>
   12       <p className="App-intro">
   13         To get started, edit <code>src/App.js</code> and save to reload.
   14       </p>
   15     </div>
   16   );
   17 };
   18
   19 export default App;
```

```vim
src/App.js|5 col 13 warning| Unexpected unnamed function. (func-names)
```

今度は何？、function名がない場合はfunctionを使うな！という意味らしい。
それでも今度は警告で済んだ。
警告でも嫌だから、arrow関数でやってみるか。

```javascript
    1 import React, { Component } from 'react';
    2 import logo from './logo.svg';
    3 import './App.css';
    4
✗   5 const App = () => {
    6   return (
    7     <div className="App">
    8       <div className="App-header">
    9         <img src={logo} className="App-logo" alt="logo" />
   10         <h2>Welcome to React</h2>
   11       </div>
   12       <p className="App-intro">
   13         To get started, edit <code>src/App.js</code> and save to reload.
   14       </p>
   15     </div>
   16   );
   17 };
   18
   19 export default App;
```

```vim
src/App.js|5 col 19 error| Unexpected block statement surrounding arrow body. (arrow-body-style)
```

今度はエラーが出てarrowを使うならボディスタイルを守りなさいって。
__ちなみに、Reactのコンソールではエラーや警告表示にならない。__

これ以上手を出してもまたエラーや警告になりそうで、諦めた。
そもそもES6のclass式が好きな僕はstateless functionだと言われて修正することに違和感があった。
.jsと.jsxの拡張子の区分も要らない。

そんなわけで、.eslintrcを下記のように修正した。

```javascript
"rules": {
	"react/prefer-stateless-function": 0,
	"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"]  }],
}
```

エラーや警告表示が消えてスッキリ!

```javascript
  1 import React, { Component } from 'react';
  2 import logo from './logo.svg';
  3 import './App.css';
  4
  5 class App extends Component {
  6   render() {
  7     return (
  8       <div className="App">
  9         <div className="App-header">
 10           <img src={logo} className="App-logo" alt="logo" />
 11           <h2>Welcome to React</h2>
 12         </div>
 13         <p className="App-intro">
 14           To get started, edit <code>src/App.js</code> and save to reload.
 15         </p>
 16       </div>
 17     );
 18   }
 19 }
 20
 21 export default App;
```

少し冗長な感じだがいいではないか！
わかりやすいコードが一番いいのだ。
Windows環境で日本語を含むRDocが生成できない場合


## 発生した問題

日本語が含まれるRDocをWindows環境で生成しようとすると、"No newer files."と表示され、docディレクトリに`created.rid`というファイルが作成されるだけで、それ以外何も出力されない。

以下はその実行例。

```ruby:money.rb
# お金を表すクラスです。
class Money
end
```

```
>rdoc money.rb
Parsing sources...
100% [ 1/ 1]  lib\gate.rb

No newer files.

  Files:      1

  Classes:    0 (0 undocumented)
  Modules:    0 (0 undocumented)
  Constants:  0 (0 undocumented)
  Attributes: 0 (0 undocumented)
  Methods:    0 (0 undocumented)

  Total:      0 (0 undocumented)
    0.00% documented

  Elapsed: 0.0s

>dir doc
 ドライブ C のボリューム ラベルがありません。
 ボリューム シリアル番号は DCBD-3B40 です

 C:\Users\JunichiIto\ruby-book\doc のディレクトリ

2017/06/17  10:22    <DIR>          .
2017/06/17  10:22    <DIR>          ..
2017/06/17  10:22                 0 created.rid
               1 個のファイル                   0 バイト
               2 個のディレクトリ  45,016,821,760 バイトの空き領域
```

ただし、RDocを英語だけにすると、ちゃんとRDocが生成される。

```ruby:money.rb
# This is money.
class Money
end
```

```
>rdoc money.rb
Parsing sources...
100% [ 1/ 1]  .\money.rb

Generating Darkfish format into C:/Users/JunichiIto/ruby-book/doc...

  Files:      1

  Classes:    1 (0 undocumented)
  Modules:    0 (0 undocumented)
  Constants:  2 (2 undocumented)
  Attributes: 0 (0 undocumented)
  Methods:    4 (4 undocumented)

  Total:      7 (6 undocumented)
   14.29% documented

  Elapsed: 0.2s
```

## 問題が発生した環境

- Windows 10 Home 日本語版
- Ruby 2.4.1（[RubyInstaller](https://rubyinstaller.org/)でインストール）
- RDoc 5.0.0（`rdoc --version`で確認）

## 原因

RDoc 5.0.0の不具合っぽい。

### 参考

このpull reqで修正？

- [fix an issue that rdoc fails when running on Windows with RUBYOPT=\-U by dogatana · Pull Request \#430 · rdoc/rdoc](https://github.com/rdoc/rdoc/pull/430)

## 解決策

RDocの最新版をインストールする。

```
>gem install rdoc
Fetching: rdoc-5.1.0.gem (100%)
rdoc's executable "rdoc" conflicts with C:/Ruby24-x64/bin/rdoc
Overwrite the executable? [yN]  y
rdoc's executable "ri" conflicts with C:/Ruby24-x64/bin/ri
Overwrite the executable? [yN]  y
Successfully installed rdoc-5.1.0
Parsing documentation for rdoc-5.1.0
Installing ri documentation for rdoc-5.1.0
Done installing documentation for rdoc after 11 seconds
1 gem installed

>rdoc --version
5.1.0
```

RDoc 5.1.0以上であれば、日本語が含まれている場合でもRDocが生成される。

```ruby:money.rb
# お金を表すクラスです。
class Money
end
```

```
>rdoc money.rb
Parsing sources...
100% [ 1/ 1]  .\money.rb

Generating Darkfish format into C:/Users/JunichiIto/ruby-book/doc...

  Files:      1

  Classes:    1 (0 undocumented)
  Modules:    0 (0 undocumented)
  Constants:  2 (2 undocumented)
  Attributes: 0 (0 undocumented)
  Methods:    4 (4 undocumented)

  Total:      7 (6 undocumented)
   14.29% documented

  Elapsed: 0.2s
```

よかった :v:
Docker for Windows で postgres コンテナの Volume マウントを安全にする


## はじめに

[Docker] でコンテナを使ってDBを動かすとき、コンテナを落としてもデータが消えないよう、多くの人はDBのデータディレクトリをホスト側にマウントすると思います。

本記事は [PostgreSQL] についてですが、他DBでも同様だと思われます。

## BAD: ホストOSのDirectoryをマウントする

一番Basicな方法だと思いますが、Windowsですと ``Permission denied`` だとか、書き込み時に ``initdb: could not fsync file`` Errorが頻発します。頑張ってLinuxの仮想FileSystemをWindows上で再現しているので折り合いが悪い様子。

```shell-session
### (a) コマンド直打ちの場合
$ docker run -d -v ./data:/var/lib/postgresql/data postgres:9.6.3-alpine
```

```yaml
### (b) docker-compose.yml の場合
version: '2'
services:
  db:
    image: postgres:9.6.3-alpine
    volumes:
      - ./data:/var/lib/postgresql/data
```

Windows10 (Docker for Windows) の場合は↓も必要。

![sharedrives.png](https://qiita-image-store.s3.amazonaws.com/0/60131/17aa273b-7a2d-4d7c-6032-1f362d6114b5.png)

## GOOD: Named Volume をマウントする

[Docker] の [Named Volume] にマウントする方法で安定しました。

```shell-session
### (a) コマンド直打ちの場合
$ docker volume create dbdata
dbdata

$ docker volume ls
DRIVER              VOLUME NAME
local               dbdata

$ docker run -d -v dbdata:/var/lib/postgresql/data postgres:9.6.3-alpine
```

```yaml
### (b) docker-compose.yml の場合
version: '2'
services:
  db:
    image: postgres:9.6.3-alpine
    volumes:
      - dbdata:/var/lib/postgresql/data

volumes:
  dbdata:
```

データを消したい時はこうします。

```shell-session
$ docker volume ls
DRIVER              VOLUME NAME
local               dbdata
local               dockerpostgres_dbdata   # <-- docker-compose で作った方. 勝手にPrefixが付く

$ docker volume rm dbdata
dbdata
```

## 参考

今回も Stack Overflow 先生のおかげで助かりました。

* https://stackoverflow.com/questions/43504238/postgresql-docker-container-on-widnows


[Docker]:https://docs.docker.com/
[Named Volume]:https://docs.docker.com/engine/tutorials/dockervolumes/#add-a-data-volume
[PostgreSQL]:https://hub.docker.com/_/postgres/
Jupyter Notebookをブログの記事しとして投稿する

[前回](http://qiita.com/driller/items/4d998ca765717c7e0a6c)の続きです。

前回はNikolaのデフォルト形式であるreStructuredText形式とMarkdown形式を使ってブログを投稿しました。
今回はipynb形式(Jupyter Notebook)を使ってブログを投稿してみます。

# 準備

サイトディレクトリ直下にあるconf.pyを編集します。拡張子 `ipynb` のエントリを追加します。

* 編集前

```conf.py
POSTS = (
    ("posts/*.rst", "posts", "post.tmpl"),
    ("posts/*.md", "posts", "post.tmpl"),
    ("posts/*.txt", "posts", "post.tmpl"),
    ("posts/*.html", "posts", "post.tmpl"),
)
PAGES = (
    ("pages/*.rst", "pages", "page.tmpl"),
    ("pages/*.md", "pages", "page.tmpl"),
    ("pages/*.txt", "pages", "page.tmpl"),
    ("pages/*.html", "pages", "page.tmpl"),
)
```

* 編集後

```conf.py
POSTS = (
    ("posts/*.rst", "posts", "post.tmpl"),
    ("posts/*.md", "posts", "post.tmpl"),
    ("posts/*.txt", "posts", "post.tmpl"),
    ("posts/*.html", "posts", "post.tmpl"),
    ("posts/*.ipynb", "posts", "post.tmpl"),
)
PAGES = (
    ("pages/*.rst", "pages", "page.tmpl"),
    ("pages/*.md", "pages", "page.tmpl"),
    ("pages/*.txt", "pages", "page.tmpl"),
    ("pages/*.html", "pages", "page.tmpl"),
    ("pages/*.ipynb", "pages", "page.tmpl"),
)
```

# 投稿
下記のコマンドを実行します。

```bash
nikola new_post -f ipynb
```

```
Creating New Post
-----------------

Title:
```
記事のタイトルを入力すると、 post/タイトル名.ipynb ファイルが生成されます。
このファイルをJupyter上で編集します。

# ビルドと確認
ビルドは前回と同じです。

```bash
nikola build
nikola serve -b
```

このような感じで投稿されます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/22023/a33c13ba-58a2-bdef-e37a-9697174edc52.png)

# 既に作成されたipynbファイルから投稿

* ipynbファイルは `サイトのディレクトリ/post` 直下におきます。
* Jupyter Notebook上から `menu bar - Edit - Edit Notebook Metadata` を選択し、下記のようなエントリを追加します。 `"nikola":` は固定で、タイトル等は記事に合わせて変更します。

```
  "nikola": {
    "tags": "",
    "title": "post4",
    "date": "2017-06-17 15:15:00 UTC+09:00",
    "type": "text",
    "slug": "post4",
    "category": "",
    "link": "",
    "description": ""
  }
```

* Notebookの中身を入力して保存します。
* 前述と同じ方法でビルドします。

```bash
nikola build
nikola serve -b
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/22023/6109b460-35fb-b3a6-ecf6-18000ec51f86.png)

このように、Notebookのメタデータを追加するだけで、ブログの記事として投稿ができます。
Cloud Datalabをタブレットやスマホから使う

![](https://dl.dropboxusercontent.com/u/4207279/public/public_images/IMG_0080.PNG)

[Cloud Datalab](https://cloud.google.com/datalab/?hl=ja)はGCPが提供するサービスのひとつで、[Jupyter Notebook](http://jupyter.org/)のGCP版です。便利なところは、

- インストールがすごく簡単。[Cloud SDK](https://cloud.google.com/sdk/?hl=ja)を入れてあれば、`datalab create your-instance-name`って実行するだけであっという間にDatalabインスタンスを作れる

- AnacondaのようにNumPy/SciPy、scikit-learn、matplotlib等の定番データ分析ツールがひととおり入っていてすぐ使える。もちろんTensorFlowも

- BigQueryやGoogle Cloud Storage、Cloud Dataflow、Google Charts等のGCPサービスが統合されていて、例えばBigQueryのクエリ結果をNumPyやPandasの配列として扱える

等々の便利さで、最近はなんでもDatalabで済ませるようになりました。気になる方は、[こちらのビデオ](https://youtu.be/XEka7Bp41To)を見てみてください。BigQueryからのデータ抽出とTensorFlowによるモデル学習までを5分間くらいでさくっと解説しています。

## タブレットやスマホから使いたい！

このDatalabを出先に持ってったiPadから手軽に使いたい！　と思ったのですが、DatalabインスタンスはGCP上のGCEインスタンスで、`datalab`コマンドによるsshポートフォワーディングで接続するため、Cloud SDK環境がなければアクセスできません。いろいろ試行錯誤の結果、以下の手順でいい感じにiPadからDatalabを開ける環境をつくれました。

### 踏み台PCを用意する

最初はiPadからsshアプリでポートフォワーディングしてDatalabインスタンスに直接接続する方法も考えました。が、iOSはバックグラウンドアプリが10分でサスペンドされてしまいます。直接接続はあきらめて、踏み台PCを用意することにしました。自宅のPCでDatalabに接続し、そこへiPadからVPN接続します。

まずは踏み台となるPCから以下のコマンドを実行してDatalabに普通に繋いでみます。

```
> datalab connect xxx --verbosity=debug
```

このように`--verbosity=debug`と指定すると、Datalabインスタンス接続時にいろいろとデバッグログが表示され、中で何をやってるのかがわかります。その中から、以下のssh接続部分を見つけてコピーしておきます。

```
/usr/bin/ssh -t -i /Users/kaz/.ssh/google_compute_engine -o CheckHostIP=no -o HostKeyAlias=compute.xxx -o IdentitiesOnly=yes -o StrictHostKeyChecking=yes -o UserKnownHostsFile=/Users/kaz/.ssh/google_compute_known_hosts -o LogLevel=error -4 -N -L localhost:8081:localhost:8080 datalab@xxx.xxx.xxx.xxx
```

つまり`datalab connect`コマンドとは、クラウド上のDatalabインスタンスの`localhost:8080`をPCの`localhost:8081`にsshポートフォワーディングするラッパーとして動作しています。`xxx`の部分には個々の環境ごとに異なる値が入ります。

このままではPC上のブラウザからしかアクセスできないので、`-L`オプションにつづく部分を`xxx.xxx.xxx.xxx:8081:localhost:8080`と修正します。`xxx`部分には、PCのIPアドレスを指定します。踏み台PC上では、`datalab`コマンドの代わりにこのsshコマンドでDatalabインスタンスに接続しておきます。

### タブレットやスマホからVPN接続する

あとは、外出先からタブレットやスマホで自宅LANにVPN接続すればOKです。私の環境では、

- [VPN ActivatorでVPNサーバを立て、AirMac ExpressでL2TPパススルー設定](http://iici.cocolog-nifty.com/blog/2012/01/macbook-prol2tp.html)
- iPadのVPN設定で自宅LANにL2TP接続

により、VPN環境を作りました。あとは、タブレットやスマホのブラウザから踏み台PCのIPアドレスを参照して`xxx.xxx.xxx.xxx:8081`を開けばDatalabにアクセスできます。

## いつでもどこでもBigQuery+TensorFlow

この環境のよいところは、

- ネットがあんまり速くない環境でもクラウド上のDatalabインスタンスでそこそこ重い作業も実行できる。gitからcloneしてビルド、BQの検索結果でモデル学習、等々。
- ssh接続のみではmatplotlib等の可視化ツールを使えないが、ブラウザ経由なら可視化しながらのデータいじり可能

といったところです。iPadとSmart Keyboardさえあれば、飛行機のウルトラ遅いWiFiでもTensorFlowいじりできるかな？　ともくろんでます。

![](https://dl.dropboxusercontent.com/u/4207279/public/public_images/IMG_0081.PNG)

-----
Disclaimer この記事は個人的なものです｡ここで述べられていることは私の個人的な意見に基づくものであり､私の雇用者には関係はありません｡
メモ：iostatコマンドのオプションの組み合わせ

『詳解システムパフォーマンス』を読んでいたら、便利そうなiostatのオプションの組み合わせた載っていた。

> $ iostat -xkdz 1


|オプション|意味|
|-----|-----|
|x|拡張表示|
|k|kB表示|
|d|ディスク報告のみ. (CPUの統計は表示しない)|
|z|すべての0の行は省略|
|1|1秒ごとに表示|

必要に応じて、p(パーティションごとの統計を追加)、t(タイムスタンプをあわせて表示)も使う。


## 参考文献
 * https://www.oreilly.co.jp/books/9784873117904/
Unicorn+Nginx+Rails タイムアウトの設定方法

# やりたいこと
サーバーのデフォルトタイムアウトが60秒に設定されていた。
スクレイピングやバッチサーバーでは60秒以内に完了しないものが多いのでタイムアウトの時間を設定したい。

# 設定方法
NginxとUnicornのタイムアウト値を設定する必要がある。

## Unicornのタイムアウト値変更（999999999999秒）
```sh
$ vi /projects/config/unicorn.rb
```
　※「timeout 999999999999」を追加。無制限

## Nginxのタイムアウト値変更（3600秒）
```sh
$ vi /etc/nginx/conf.d/timeout.conf
```
（ファイル自体を追加）
proxy_connect_timeout       3600;
proxy_send_timeout          3600;
proxy_read_timeout          3600;
send_timeout                3600;

## NginxとUnicornの再起動
```sh
$ /etc/init.d/nginx restart
$ kill -9 <Unicorn マスタープロセスPID>
$ bundle exec unicorn_rails -c config/unicorn.rb -E development -D
```

# 備考
タイムアウトの設定は「Unicorn」「Nginx」の2箇所にあります。

- 「Nginx」のタイムアウト値に引っかかった場合は、
　「504 Gateway Time-out」と表示されます。

- 「Unicorn」のタイムアウト値に引っかかった場合は、
　ログ下記のような出力があります。

```sh
$ grep timeout /projects/log/development_unicorn_error.log | grep killing
E, [2017-06-15T11:30:50.803344 #23658] ERROR — : worker=0 PID:23661 timeout (61s > 60s), killing
E, [2017-06-15T11:36:41.156568 #23658] ERROR — : worker=1 PID:23663 timeout (61s > 60s), killing
E, [2017-06-15T11:43:53.542174 #23658] ERROR — : worker=1 PID:23769 timeout (61s > 60s), killing
E, [2017-06-15T11:45:32.648281 #23658] ERROR — : worker=0 PID:23720 timeout (61s > 60s), killing
E, [2017-06-15T13:36:51.095563 #23658] ERROR — : worker=0 PID:23978 timeout (61s > 60s), killing
```
5分でGAE上にCMSを立ち上げるgae-initの紹介

GAE(standard environment)上にウェブアプリケーションを作る一番簡単な方法と謳っているPython製フレームワーク、gae-init(http://docs.gae-init.appspot.com) を紹介します。

## 準備

「5分で」というのはGAEでプロジェクトを作成した経験があれば必ずしも大げさではなく、やるべきことはわずかです。まず必要な環境を一気にインストールします(例:macOS Homebrew)。

```
$ curl https://raw.githubusercontent.com/gae-init/gae-init/master/bin/requirements_osx_brew.sh | bash
```

次にプロジェクトをクローンしてnpmインストール

```
$ git clone https://github.com/gae-init/gae-init.git hello
$ cd hello
$ npm install
```

で準備完了。

ローカルサーバーを起動するには

```
$ gulp
```

で、```http://localhost:3001``` に

<img width="1263" alt="スクリーンショット 2017-06-17 11.27.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/10362/f3be587b-63d0-99a5-ed37-7c599fe9ea43.png">

のような画面が表示されます。
デプロイするのも

```
$ gulp deploy --project=<YOUR_PROJECT_ID>
```

で終わり。これでhttps://helloworld-152405.appspot.com のようにデプロイできます。

##特徴

プロダクトはFlaskをベースにしていて

- Google App Engine
- Flask, Jinja2, Flask-WTF
- CoffeeScript, Less
- Bootstrap, Font Awesome, Social Buttons
- jQuery, Moment.js
- OpenID sign in (Google, Facebook, Twitter and more)
- Python 2.7, pip, virtualenv
- Gulp, Bower

などが使われています。

Gulpがインストール、コンパイル、リソースの圧縮、サーバー立ち上げにデプロイまでしてくれるので覚えるコマンドはごくわずか。またBootstrapを使っているので見栄えや使い勝手はこなれています。そしてPython製のフレームワークらしく管理画面が最初から用意されています。

<img width="1254" alt="スクリーンショット 2017-06-17 14.14.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/10362/367c1d34-7444-9b10-fe4e-9ec778eec5fe.png">

<img width="1251" alt="スクリーンショット 2017-06-17 11.22.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/10362/8d0c1caa-774d-3265-446a-6c5a67c668e9.png">


さらに初めからUserモデルが用意されていて、ソーシャルログインもまったくコードを書かずに管理画面からの設定で可能になります。

<img width="1252" alt="スクリーンショット 2017-06-17 11.23.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/10362/46534ba5-2110-4de0-1b8a-cfa936ac912e.png">


<img width="1262" alt="スクリーンショット 2017-06-17 11.26.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/10362/8b6a0002-6583-4285-fd81-13fa484c3b9c.png">

##まとめ

もともとデプロイについては簡単なGAEですが、フレームワークについてはGAE専用でないものを少ない情報をかき集めながら使ったり、専用のフレームワークを見つけてもずいぶん昔に開発が止まっていたりと、せっかく無料で始められるお手軽さを享受しにくい状況かと思います。

その点、決して活発とまではいえないまでも(失礼)、2013年から今現在も開発が続いていて、インストールからデプロイまでほかに無いお気軽さのgae-initはもっと注目されるべきプロジェクトかと思います。

gae-init
http://docs.gae-init.appspot.com
GitHub
https://github.com/gae-init
jquery-tmpl.jsからjsrender.jsに移行してみた

作者さんによると、jquery-tmplは開発されておらず、jsrenderがjquery-tmplに取って代わるライブラリだそうです。

- https://github.com/BorisMoore/jquery-tmpl
- https://github.com/BorisMoore/jsrender

なので、jquery-tmplを使った部分をjsrenderに書き換えて行きたいと思います。以下サンプルコードです。

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

# jquery-tmplで書いたコード

```html
<html lang="ja">
<head>
<meta charset="utf-8">
    <script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>

    <!-- jquery-tmpl.js --> 
    <script type="text/javascript" src="../bower_components/jquery-tmpl/jquery.tmpl.min.js"></script>
</head>

<body>
    <div id="main"></div>
</body>

</html>

<!-- jquery-tmplのテンプレート  -->
<script id="main_tmpl" type="text/x-jquery-tmpl">
    {{each site_info}}
        <a href="${url}">
            <div>${site_name}</div>
        </a>
    {{/each}}
</script>


<script type="text/javascript">
(function () {
    var data = {
        site_info:[
            { url: "http://google.com", site_name: "Google" },
            { url: "http://yahoo.co.jp", site_name: "Yahoo" }
        ]
     };

    /* jquery-tmpl テンプレートにdataを渡す　*/
    $('#main_tmpl').tmpl(data).appendTo("#main");

}());
</script>
```

# jsrenderに書き換えコード

```html
<html lang="ja">
<head>
<meta charset="utf-8">
    <script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>

 	<!-- jsrender.js　読み込み　-->
    <script type="text/javascript" src="../bower_components/jsrender/jsrender.min.js"></script>
</head>

<body>
    <div id="main"></div>
</body>

</html>

<!-- jsrenderのテンプレート -->
<script id="main_tmpl" type="text/x-jsrender">
    {{for site_info}}
        <a href="{{:url}}">
            <div>{{:site_name}}</div>
        </a>
    {{/for}}
</script>


<script type="text/javascript">
(function () {
    var data = {
        site_info:[
            { url: "http://google.com", site_name: "Google" },
            { url: "http://yahoo.co.jp", site_name: "Yahoo" }
        ]
     };

    /* jsrender テンプレートにdataを渡す */
    $("#main").html(
        $("#main_tmpl").render(data)
    );

}());
</script>
```


このように基本的な部分は、少しの書き換えで動作するようになりました。
UIButtonのInsetsがうまく設定できなかったので調べてみた

UIButtonにpaddingを設定して表示したかったので以下のようなコードを書いたところ、文字サイズを全て固定で指定しているのにサイズがバラバラになってしまうという現象が発生しました。

```swift
btn.layer.cornerRadius = 16
btn.backgroundColor = UIColor.gray
btn.titleLabel?.font = UIFont.systemFont(ofSize: 28.0)
btn.titleEdgeInsets = UIEdgeInsetsMake(5.0, 7.0, 5.0, 7.0)
btn.titleLabel?.adjustsFontSizeToFitWidth = true
```

■`titleEdgeInsets`を指定
<img src="https://qiita-image-store.s3.amazonaws.com/0/100736/5b0a585e-1147-b245-f282-b7540ce88454.png" width=50%>

最初、日本語だけこのようなことになるのではないかと思いましたがそんなこともなさそうでした。文字数には影響されているようです。
ちなみに`titleEdgeInsets`を指定しなかったら文字サイズがバラバラになることはありませんでした。

■`titleEdgeInsets`を指定しない
<img src="https://qiita-image-store.s3.amazonaws.com/0/100736/291167cc-0109-d1fe-46af-3ad91342f7ed.png" width=50%>

`UIButton`クラスをよく見てみると、もう一つInsetsを指定できるプロパティがありました。それが`contentEdgeInsets`です。試しに`titleEdgeInsets`ではなく`contentEdgeInsets`にUIEdgeInsetsMake(5, 7, 5, 7)を指定してみると以下のような表示になりました。

■`contentEdgeInsets`を指定
<img src="https://qiita-image-store.s3.amazonaws.com/0/100736/ac3861e3-e7ff-bd3c-b420-2d5ffd0cdfe9.png" width=50%>

Insetsが正しく設定されているようです。

このような現象について書かれている記事はないかと探したところ、SnapKitのissueが見つかりました。[そのissue](https://github.com/SnapKit/Masonry/issues/48)では「AutoLayoutでは残念ながら`titleEdgeInsets`は効かない。でも`contentEdgeInsets`なら実現できる。また、別のやり方として`intrinsicContentSize`を使うというやり方もある。」というやり取りがありました。結局このissueを立てた人は`titleEdgeInsets`の一部にマイナスの値を指定し、不足分を`contentEdgeInsets`の方で補充したようです。この部分については[あるstackoverflowの回答](https://stackoverflow.com/a/28287773)を見ると言っていることがより理解できます。

ということでUIButtonでInsetがうまくいかない時は`contentEdgeInsets`の利用を検討してみるとうまくいくかもしれません。