• https://medium.com/odoruinu

よければフォローしてね！！

WordPressは気に入ってるんですが、フォロー機能が無いのが不満です。
今の時代、影響力を蓄積していかないとどうも生き残れる気がしないんです。
いろいろ検討した結果、Mediumで行くことに決めました。
はてなブログも有力候補だったんですが、SSLに対応していなかったのでボツにしました。
Mediumのミニマリズムなデザインが個人的に好みというのも一つの理由です。

ただ、Custom Domainが最近有料化して75ドルも必要になってしまったのがちょっと残念。
まぁ買い切りなのでしばらくして気が向いたら課金するかもしれません。

このブログは大学時代から移転を繰り返しつつ続けてきたものなので、冷凍保存します。発掘しないでね！！

ではMediumでお会いしましょう！！！

なんか右のボタンにパックマンらしきアイコンが出現しています。これを押すと・・

表示していた地図上でパックマンが開始されました！
しかも結構むずいし！

かなり凝ったエイプリルフールネタですね。
エイプリルフールじゃなくても遊べるようにして欲しいｗ

年初からお手伝いしていたPsychic VR LabさんのSTYLYというサービスがプライベートβでローンチしました。
僕はWeb周りを担当しました。

このサービスは、VRによってファッションブランドの持つ世界観の表現力を拡張しようという試みです。

• http://suite.styly.cc/

サイトに飛ぶと再生される動画にあるような、ファッションのVR空間を簡単につくれるツールを作っています。
まだプライベートβなので詳しく知りたい人はエントリーしてみて下さい。

社長の山口征浩さんはVRに関する構想をいろいろ持ってらっしゃる方なので、気になる方はインタビューなどを読んでみてください。

• 会社ホームページ: http://psychic-vr-lab.com/

筆者がまさにそういうやり方でアプリ作っているので、Androidビルドで生まれた魑魅魍魎たちの退治記録を以下にまとめました。ご参照下さい。

Android SDK Build Tools revision 23.0.1 が必要と怒られる

RNのバージョンによって要求されるSDKも異なるかもしれません。
こんな風に怒られます：

> react-native run-android
JS server already running.
Building and installing the app on the device (cd android && ./gradlew installDebug)...

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':app'.
> failed to find Build Tools revision 23.0.1

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

Total time: 3.994 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html

という訳でインストールしてあげます。
以下でインストールできるsdkの一覧を取得する。

> android list sdk -a

リスト左の番号を-tオプションに指定してインストール：

> android update sdk -a -u -t 12

androidコマンドなんて無ぇよと言われる

SDKのバージョンが新しいと、androidコマンドを実行すると以下のように怒られます：

The android command is no longer available.
For manual SDK and AVD management, please use Android Studio.
For command-line tools, use tools/bin/sdkmanager and tools/bin/avdmanager

おとなしくAndroid Studioからインストールしてください。

Could not find com.android.support:design:25.0.1

気を取り直して再ビルド！
次は以下のように文句を言われます：

JS server already running.
Building and installing the app on the device (cd android && ./gradlew installDebug)<home>
downloadRobolectricDependencies /Users/<home>/react-native-app/android/build/robolectric-dependencies
Download https://jcenter.bintray.com/com/aurelhubert/ahbottomnavigation/1.3.3/ahbottomnavigation-1.3.3.pom
Download https://jcenter.bintray.com/com/balysv/materialmenu/material-menu-toolbar/1.5.4/material-menu-toolbar-1.5.4.pom
Download https://jcenter.bintray.com/com/balysv/materialmenu/material-menu/1.5.4/material-menu-1.5.4.pom

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':app'.
> A problem occurred configuring project ':react-native-navigation'.
   > Could not resolve all dependencies for configuration ':react-native-navigation:_debugCompile'.
      > Could not find com.android.support:design:25.0.1.
        Searched in the following locations:
            file:/Users/<home>/.m2/repository/com/android/support/design/25.0.1/design-25.0.1.pom
            file:/Users/<home>/.m2/repository/com/android/support/design/25.0.1/design-25.0.1.jar
            https://jcenter.bintray.com/com/android/support/design/25.0.1/design-25.0.1.pom
            https://jcenter.bintray.com/com/android/support/design/25.0.1/design-25.0.1.jar
            file:/Users/<home>/react-native-app/node_modules/react-native/android/com/android/support/design/25.
0.1/design-25.0.1.pom
            file:/Users/<home>/react-native-app/node_modules/react-native/android/com/android/support/design/25.
0.1/design-25.0.1.jar
            file:/Users/<home>/Library/Android/sdk/extras/android/m2repository/com/android/support/design/25.0.1/design-25.0.1.pom
            file:/Users/<home>/Library/Android/sdk/extras/android/m2repository/com/android/support/design/25.0.1/design-25.0.1.jar
            file:/Users/<home>/Library/Android/sdk/extras/google/m2repository/com/android/support/design/25.0.1/design-25.0.1.pom
            file:/Users/<home>/Library/Android/sdk/extras/google/m2repository/com/android/support/design/25.0.1/design-25.0.1.jar
        Required by:
            inkdrop:react-native-navigation:unspecified
      > Could not find com.android.support:appcompat-v7:25.0.1.
        Searched in the following locations:
            file:/Users/<home>/.m2/repository/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.pom
            file:/Users/<home>/.m2/repository/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.jar
            https://jcenter.bintray.com/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.pom
            https://jcenter.bintray.com/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.jar
            file:/Users/<home>/react-native-app/node_modules/react-native/android/com/android/support/appcompat-
v7/25.0.1/appcompat-v7-25.0.1.pom
            file:/Users/<home>/react-native-app/node_modules/react-native/android/com/android/support/appcompat-
v7/25.0.1/appcompat-v7-25.0.1.jar
            file:/Users/<home>/Library/Android/sdk/extras/android/m2repository/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.pom
            file:/Users/<home>/Library/Android/sdk/extras/android/m2repository/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.jar
            file:/Users/<home>/Library/Android/sdk/extras/google/m2repository/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.pom
            file:/Users/<home>/Library/Android/sdk/extras/google/m2repository/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.jar
        Required by:
            inkdrop:react-native-navigation:unspecified
      > Could not find com.android.support:appcompat-v7:25.0.1.
        Searched in the following locations:
            file:/Users/<home>/.m2/repository/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.pom
            file:/Users/<home>/.m2/repository/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.jar
            https://jcenter.bintray.com/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.pom
            https://jcenter.bintray.com/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.jar
            file:/Users/<home>/react-native-app/node_modules/react-native/android/com/android/support/appcompat-
v7/25.0.1/appcompat-v7-25.0.1.pom
            file:/Users/<home>/react-native-app/node_modules/react-native/android/com/android/support/appcompat-
v7/25.0.1/appcompat-v7-25.0.1.jar
            file:/Users/<home>/Library/Android/sdk/extras/android/m2repository/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.pom
            file:/Users/<home>/Library/Android/sdk/extras/android/m2repository/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.jar
            file:/Users/<home>/Library/Android/sdk/extras/google/m2repository/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.pom
            file:/Users/<home>/Library/Android/sdk/extras/google/m2repository/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.jar
        Required by:
            inkdrop:react-native-navigation:unspecified > com.facebook.react:react-native:0.39.2
      > Could not find com.android.support:design:25.0.1.
        Searched in the following locations:
            file:/Users/<home>/.m2/repository/com/android/support/design/25.0.1/design-25.0.1.pom
            file:/Users/<home>/.m2/repository/com/android/support/design/25.0.1/design-25.0.1.jar
            https://jcenter.bintray.com/com/android/support/design/25.0.1/design-25.0.1.pom
            https://jcenter.bintray.com/com/android/support/design/25.0.1/design-25.0.1.jar
            file:/Users/<home>/react-native-app/node_modules/react-native/android/com/android/support/design/25.
0.1/design-25.0.1.pom
            file:/Users/<home>/react-native-app/node_modules/react-native/android/com/android/support/design/25.
0.1/design-25.0.1.jar
            file:/Users/<home>/Library/Android/sdk/extras/android/m2repository/com/android/support/design/25.0.1/design-25.0.1.pom
            file:/Users/<home>/Library/Android/sdk/extras/android/m2repository/com/android/support/design/25.0.1/design-25.0.1.jar
            file:/Users/<home>/Library/Android/sdk/extras/google/m2repository/com/android/support/design/25.0.1/design-25.0.1.pom
            file:/Users/<home>/Library/Android/sdk/extras/google/m2repository/com/android/support/design/25.0.1/design-25.0.1.jar
        Required by:
            inkdrop:react-native-navigation:unspecified > com.aurelhubert:ahbottomnavigation:1.3.3
      > Could not find com.android.support:appcompat-v7:25.0.1.
        Searched in the following locations:
            file:/Users/<home>/.m2/repository/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.pom
            file:/Users/<home>/.m2/repository/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.jar
            https://jcenter.bintray.com/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.pom
            https://jcenter.bintray.com/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.jar
            file:/Users/<home>/react-native-app/node_modules/react-native/android/com/android/support/appcompat-
v7/25.0.1/appcompat-v7-25.0.1.pom
            file:/Users/<home>/react-native-app/node_modules/react-native/android/com/android/support/appcompat-
v7/25.0.1/appcompat-v7-25.0.1.jar
            file:/Users/<home>/Library/Android/sdk/extras/android/m2repository/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.pom
            file:/Users/<home>/Library/Android/sdk/extras/android/m2repository/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.jar
            file:/Users/<home>/Library/Android/sdk/extras/google/m2repository/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.pom
            file:/Users/<home>/Library/Android/sdk/extras/google/m2repository/com/android/support/appcompat-v7/25.0.1/appcompat-v7-25.0.1.jar
        Required by:
            inkdrop:react-native-navigation:unspecified > com.balysv.materialmenu:material-menu-toolbar:1.5.4

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

Total time: 13.908 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html

なげーんだよ！
要するに以下のライブラリが無い、と。

Could not find com.android.support:design:25.0.1.
Could not find com.android.support:appcompat-v7:25.0.1.

これはAndroid StudioでAndroid SDKを最新に更新してあげれば解決しました。
実際には以下のディレクトリにインストールされます。

ls -l ~/Library/Android/sdk/extras/android/m2repository/com/android/support/appcompat-v7/25.0.1/
total 2936
-rw-r--r--  1 nora  staff      261 Mar 15 10:18 appcompat-v7-25.0.1-javadoc.jar
-rw-r--r--  1 nora  staff       32 Mar 15 10:18 appcompat-v7-25.0.1-javadoc.jar.md5
-rw-r--r--  1 nora  staff       40 Mar 15 10:18 appcompat-v7-25.0.1-javadoc.jar.sha1
-rw-r--r--  1 nora  staff   445548 Mar 15 10:18 appcompat-v7-25.0.1-sources.jar
-rw-r--r--  1 nora  staff       32 Mar 15 10:18 appcompat-v7-25.0.1-sources.jar.md5
-rw-r--r--  1 nora  staff       40 Mar 15 10:18 appcompat-v7-25.0.1-sources.jar.sha1
-rw-r--r--  1 nora  staff  1012220 Mar 15 10:18 appcompat-v7-25.0.1.aar
-rw-r--r--  1 nora  staff       32 Mar 15 10:18 appcompat-v7-25.0.1.aar.md5
-rw-r--r--  1 nora  staff       40 Mar 15 10:18 appcompat-v7-25.0.1.aar.sha1
-rw-r--r--  1 nora  staff     1114 Mar 15 10:18 appcompat-v7-25.0.1.pom
-rw-r--r--  1 nora  staff       32 Mar 15 10:18 appcompat-v7-25.0.1.pom.md5
-rw-r--r--  1 nora  staff       40 Mar 15 10:18 appcompat-v7-25.0.1.pom.sha1

Cannot evaluate module react-native-webview-bridge : Configuration with name 'default' not found

エラー：

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':app'.
> Cannot evaluate module react-native-webview-bridge : Configuration with name 'default' not found.

react-native-webview-bridgeは使っていないモジュール。リンクしたままだったので怒られた。
android/app/build.gradleから該当のcompileステートメントを削除。
自分の場合は以下のような感じ：

diff --git a/android/app/build.gradle b/android/app/build.gradle
index 058d7a8..ce25205 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -132,7 +132,6 @@ dependencies {
     compile project(':react-native-mixpanel')
     compile project(':react-native-keychain')
     compile project(':react-native-navigation')
-    compile project(':react-native-webview-bridge')
     compile project(':react-native-vector-icons')
     compile fileTree(dir: "libs", include: ["*.jar"])
     compile "com.android.support:appcompat-v7:23.0.1"

Android Emulatorが立ち上がらねぇ

バーチャルマシン一覧は以下のように取得：

> cd $ANDROID_HOME/tools
> emulator -list-avds
Android_ARMv7a
Android_Accelerated_x86
Nexus_5_API_25

いざ起動：

> emulator -avd Nexus_5_API_25

失敗しました。あああん？

> emulator -avd Pixel_API_25
emulator: WARNING: encryption is off
Hax is enabled
Hax ram_size 0x60000000
HAX is working and emulator runs in fast virt mode.
Failed to sync vcpu reg
Failed to sync vcpu reg
Failed to sync vcpu reg
Failed to sync HAX vcpu contextInternal error: Initial hax sync failed

DockerやVirtualBoxと併用できない

なんかそういう仕様らしいです。不便だ！
しょうがないのでDockerを終了する：

> launchctl list | grep 'VirtualBox|docker'
-       0       com.docker.helper
1241    0       com.docker.docker.37028

> launchctl stop com.docker.docker.37028

> docker ps -a
Error response from daemon: Bad response from Docker engine

> emulator -avd Pixel_API_25
emulator: WARNING: encryption is off
Hax is enabled
Hax ram_size 0x60000000
HAX is working and emulator runs in fast virt mode.

Got it working!!!!!!!! haha!!!

エラーの果てに得たもの

それは祝福の起動画面。

という訳で思いつきで川越に来てみました。
晴れてるし風も無くて天気は最高。
ライカ片手に春の川越を撮ってきました。

林屋 川越店の鰻

麺匠 清兵衛のつけ麺

使用したカメラ

[amazonjs asin=”B00OCB1E3A” locale=”JP” title=”Leica デジタルカメラ ライカX Typ 113 1620万画素 23mm f/1.7 ASPH ブラック 18440″]

//embedr.flickr.com/assets/client-code.js

上記Hacker Newsのコメ欄にRolloutのCEOのErezが出てきたりして、顔面蒼白ぶりがひしひしと感じられますねぇ。
これだからプラットフォーム依存は怖い！

ネイティブの動きを変えられるようにするのはダメ

何がダメかっていうと、以下のAPIを使って動的に挙動を変えられるようにすることです：

dlopen(), dlsym(), respondsToSelector:, performSelector:, method_exchangeImplementations()

いくら安全にこれを取り扱ったとしても、ハイジャックされてMITMアタックとかが起こりえるからダメというのがAppleの判断。
これ別に昔っからあるライセンス条項だったと思うんですけど、どうやら最近になって急に厳しく取り締まり始めたのが騒動の発端らしい。

React NativeのCode Pushはどうなの

このニュースを見て個人的に気になったのがReact Nativeアプリへの影響です。
React NativeにもCode Pushというライブラリがありますが、これもダメなんでしょうか？

調べてみると、React NativeのGitHub issueで既に結論が出ていました：

Problem: Apps with the lib Rollout.io, JSPatch and similars are being rejected because they can dynamically change Swift / Objective-C code without passing through Apple Review process.

Libraries like Code Push only updates JavaScript code and were not affected, at least not yet.

React Native has nothing to do with this problem, don’t worry about it.

次にライセンスを確認してみます。

Apple Developer Program License Agreement

section 3.3.2より:

Except as set forth in the next paragraph, an Application may not download or install executable code. Interpreted code may only be used in an Application if all scripts, code and interpreters are packaged in the Application and not downloaded. The only exceptions to the foregoing are scripts and code downloaded and run by Apple’s built-in WebKit framework or JavascriptCore, provided that such scripts and code do not change the primary purpose of the Application by providing features or functionality that are inconsistent with the intended and advertised purpose of the Application as submitted to the App Store.

強調は筆者による。

大丈夫そう

上記の通りライセンスでは、WebKitとJavascriptCoreで実行されるコードに関しては例外としています。
また、React NativeとCode Pushでは先述の禁止されたAPIをExposeしていません。
Code PushはあくまでReact Nativeのbundleコードしか変更しません。

よって、この組み合わせは大丈夫！！！！

審査通ったよっていう報告も見つけました。

JSPatchとRolloutは使うな

要はネイティブの挙動は変えちゃダメよって話です。
JSPatchやRolloutはこれをしています。
同じような機能を提供しているライブラリも軒並みアウトでしょう。
気をつけてください。

Herokuがついに公式でLet’s Encryptに対応したようです。

• Automated Certificate Management | Heroku Dev Center

こちらの手順に則ったほうがいいでしょう。

さよならStartSSL

ある日StartSSLのダッシュボードにログインした私。
なんか不穏な空気を醸すメッセージが赤々と表示されている事に気づく。

1. Mozilla and Google decided to distrust all StartCom root certificates as of 21st of October, this situation will have an impact in the upcoming release of Firefox and Chrome in January. Apple’s decision announced on Nov 30th of distrusting all StartCom root certificates as of 1st of December will have an impact in their upcoming security update.
2. Any subscribers that paid the validation fee after Oct. 21st can get full refund by request.
3. StartCom will provide an interim solution soon and will replace all the issued certificates with issuance date on or after Oct 21st in case of requested. Meanwhile StartCom is updating all systems and will generate new root CAs as requested by Mozilla to regain the trust in these browsers.

あっるぇ〜？
花粉が目に入ってよく読めないよ〜？
一体何が起こったって言うんだよ。

• 2016年10月21日以降に発行されたStartSSLの無料証明書は無効 – Qiita

なるほど、不正やっちゃったと。そらダメだわ。もう更新できないと。

なつかしいな。StartSSLにはよくお世話になりましたよ。
5年くらい前、Class 2の証明書を取得した時にIdentity Verificationが必要だってんで、イスラエルから国際電話がかかってきたんですよ。
もう英語何言ってんのかサッパリ分からなくて、パスポートに載ってる自分の情報を片っ端から読み上げたっけ。
結局、本籍を確認したかったみたい。
「オーケーオーケー、せんきゅーバーイ！！」って言って切ったんだけど、あの日のお姉さんは今も元気でやってるかな（哀愁）

こんにちはLet’s Encrypt

StartSSL無き今、無料で取得できる認証局はLet’s Encryptのみです（たぶん）。
公益目的で作られた団体がやっているので、StartSSLみたいな安売りとは根本から違います。
下手にマイナーなやっすい証明書を買うより、こっちを導入した方が断然安心感があると言えます。
あとイスラエルから国際電話がかかっくる心配も当然ありません！！

Herokuだと更新しづらい

ただしLet’s Encryptの証明書は有効期限が3ヶ月と短いため、頻繁に更新する必要があるのが難点です。
自動更新スクリプトが公式で提供されているので、これも一度やり方を把握すれば簡単なんですけどね。
このスクリプトは、サーバがまさしく持ち主の物であることを証明するための処理を行います。

ところが、Herokuだとこの認証処理がやりづらい。
Herokuから提供されている方法は、従来のように1年に一回手動で更新するようなフローが前提だからです。
このフローに則って取得・更新する方法はネットで検索すればいろいろ出てきます。

が！！
めんどい！！
絶対更新忘れるでしょ！！
自動更新させてょ！！

と喚いていたら、ありました。

sabayonで自動化する

やっと本題です。
sabayon(サバヨン？) は、SSL証明書の取得と更新を自動化してくれる神のようなheroku用ツール。いや、神。

下準備

この辺の記事を参考にして、あなたのappのSSLを有効にします。

• SSL Endpoint | Heroku Dev Center

sabayonをherokuにデプロイ

$ git clone https://github.com/dmathieu/sabayon.git
$ cd sabayon
$ heroku create letsencrypt-app-for-<name>
$ git push heroku

ツールの名前は何でもいいです。
デプロイするとherokuが勝手にweb dynoを有効にしやがりますが、これは無効にしておいて大丈夫です。

sabayonを設定

いくつかの環境変数を設定してあげる必要があります。

• ACME_APP_NAME: SSLを有効にしたいあなたのアプリ名です。
• ACME_DOMAIN: ドメイン名です。複数指定可。カンマで区切って指定します。 (例: codetriage.com,www.codetriage.com)
• ACME_EMAIL: あなたの緊急連絡先。ドメインは異なっていても構いません。
• HEROKU_TOKEN: あなたのアプリのAPI tokenを指定します。取得方法は次の節で説明します。

oAuth API tokenを取得

sabayonがあなたのアプリを自動で設定するために、herokuが提供するoAuthの仕組みを利用します。
そしてsabayonにアクセス許可を与えるためのAPI tokenが必要です。
これは、heroku toolbeltを使って簡単に取得できます。

> heroku plugins:install heroku-cli-oauth  # たぶん既にインストールされていると言われる
> heroku authorizations:create -d "<description-you-want>"
Created OAuth authorization.
  ID:          <heroku-client-id>
  Description: <description-you-want>
  Scope:       global
  Token:       <heroku-token>

この <heroku -token> を、HEROKU_TOKEN に指定してあげましょう。

アプリに認証リクエストのハンドラを追加する

ここからはアプリの実装依存の話なので、各々で対応する必要があります。

簡単に言うと、あなたのアプリに http://<domain>/.well-known/acme-challenge/<acmetoken&gt; というURLで認証局からアクセスされるので、これを正しくハンドル出来るようにします。
こうやって持ち主であることを証明します。

ここにRuby on RailsとかExpressでの実装方法が書いているので、よくあるスタックを使っている人はコピペでOK。
koa.jsを使っている場合は以下を参考にしてください。

router.get('/.well-known/acme-challenge/:acmeToken', async (ctx) => {
  const { acmeToken } = ctx.params
  let acmeKey = null

  if (process.env.ACME_KEY && process.env.ACME_TOKEN) {
    if (acmeToken === process.env.ACME_TOKEN) {
      acmeKey = process.env.ACME_KEY;
    }
  }

  for (let key in process.env) {
    if (key.startsWith('ACME_TOKEN_')) {
      const num = key.split('ACME_TOKEN_')[1];
      if (acmeToken === process.env['ACME_TOKEN_' + num]) {
        acmeKey = process.env['ACME_KEY_' + num];
      }
    }
  }

  if (acmeKey !== null) {
    ctx.body = acmeKey
  } else {
    ctx.status = 404
  }
})

ACME_KEYとかACME_TOKENという環境変数はsabayonが自動で設定してくれます。
追加したらデプロイしましょう。

手動でsabayonを実行する

さっそく証明書を取得してみましょう。
以下のコマンドを実行します。

$ heroku run bin/sabayon -a letsencrypt-app-for-<name>

上手く行けば以下のようなログが出力されます。

2016/07/21 14:02:50 cert.create email='<name>@example.com' domains='[codetriage.com www.codetriage.com]'
2016/07/21 14:02:51 [INFO] acme: Registering account for <name>@example.com
2016/07/21 14:02:51 [INFO][codetriage.com, www.codetriage.com] acme: Obtaining bundled SAN certificate
2016/07/21 14:02:51 [INFO][codetriage.com] acme: Could not find solver for: dns-01
2016/07/21 14:02:51 [INFO][codetriage.com] acme: Could not find solver for: tls-sni-01
2016/07/21 14:02:51 [INFO][codetriage.com] acme: Trying to solve HTTP-01
2016/07/21 14:02:51 cert.validate
2016/07/21 14:03:12 cert.validated
2016/07/21 14:03:15 [INFO][codetriage.com] The server validated our request
2016/07/21 14:03:15 [INFO][www.codetriage.com] acme: Could not find solver for: dns-01
2016/07/21 14:03:15 [INFO][www.codetriage.com] acme: Trying to solve HTTP-01
2016/07/21 14:03:15 cert.validate
2016/07/21 14:03:36 cert.validated
2016/07/21 14:03:40 [INFO][www.codetriage.com] The server validated our request
2016/07/21 14:03:40 [INFO][codetriage.com, www.codetriage.com] acme: Validations succeeded; requesting certificates
2016/07/21 14:03:41 [INFO] acme: Requesting issuer cert from https://acme-v01.api.letsencrypt.org/acme/issuer-cert
2016/07/21 14:03:41 [INFO][codetriage.com] Server responded with a certificate.
2016/07/21 14:03:41 cert.created
2016/07/21 14:03:41 cert.added

もし以下のようなエラーを得たら、ちゃんとハンドラがうまく動作しているか確認してください：

ERROR: Challenge is invalid! http://sub.domain.eu/.well-known/acme-challenge/HPdGXEC2XEMFfbgpDxo49MNBFSmzYREn2i1U1lsEBDg

さあ、これで証明書が取得できて、あなたのアプリに設定されました！

DNSの設定をSSL用に変更する

herokuではHTTP用とHTTPS用のサーバが異なるので、合わせてやる必要があります。
おそらく今あなたのドメイン設定は CNAMEでyour-app-name.herokuapp.comに向けられているはずです。
SSL用の設定ではSNIが正しく動作するようにCNAMEをyour-app-name.com.herokudns.comとする必要があります。
設定がプロパゲートされるまで待ちましょう。

うまく行けば、 https://your-domain-name/ でアクセスできるはずです。Cheers!!

自動更新用ジョブを設定する

最後に、有効期限が迫ったら自動で更新してくれる設定をしましょう。
上記で bin/sabayon を手動で実行しましたが、これを毎日実行するようにするだけです。
sabayonは期限が一ヶ月以内の時だけ新しく証明書を取得するように計らってくれます。よくできてるゥ！！

以下のようにスケジューラーを追加します。

$ heroku addons:create scheduler:standard

ブラウザでherokuのダッシュボードを開いて、スケジューラの設定画面を開いて下さい。
そして下記画像のように設定します。

これで、毎日sabayonが実行されるようになりました。
めでたし。

無料SSLわっしょい！！！

トラブルシューティング

acme: Error 400 - urn:acme:error:connection - Could not connect to <domain -name>

DNS設定がおかしい

上記のようなエラーが出たら、あなたのDNS設定を見なおして下さい。
おそらくあなたは既にSSLを導入していて、Let’s Encryptに乗り換えようとしていますよね。
SNIサーバはポート80の接続を受け付けませんので、CNAME を your-app-name.herokuapp.com にしてやる必要があります。

アプリが立ち上がるのが遅すぎる

もうひとつの失敗理由は、アプリがまだ立ち上がっていないのに認証局がリクエストを飛ばしてしまった場合です。
ちゃんと起動し切るまで待ってもらう必要があります。

sabayonの環境変数のRESTART_WAIT_TIME を60とか、長めに設定してください。

自分のケースでは、修理に出すためにiPhoneをリセットしたのがキッカケです。
修理から戻ってきて、データ復元してLINEアプリを起動すると「本人確認が必要」という画面が表示されました。
はいそうですかと手続きを進めてもエラーで上手く行きません。
LINEへの問い合わせの結果、「一時対処」ということでサポートに対応してもらう事で解決しました。

しかし納得行かないのは、理由の説明も謝罪の言葉も無かった点。
もしかして引き継ぎ設定せずにiPhoneをリセットすると、毎度問い合わせないといけないのか？
メールも定型文貼り付けただけみたいだし、ラーメン屋でインスタントラーメン出された気分です。

以下、問い合わせ記録。

認証コード入力してもエラーになる

SMSで飛んできた４ケタの認証コードを入力してもうまく通りません。
以下のようなエラーメッセージが出ます。

LINEに登録されていないか
メールアドレスまたはパスワードが間違っています。

は？いや、これはひどいですよね。
どういう実装してるのか気になりますね。スパゲッティーなのかな。4分で茹で上がるやつ。片っ端からgit blameしてやりたいですね。

1. 問い合わせる

問題報告フォームから問い合わせをぶち込みましょう。

iPhone -> LINE -> アカウント・登録情報 -> 2段階認証ができない

と入力します。

そして問題の画像を添付します。

2. 問題を詳細に報告する

夜に報告したんですが、次の日の午前中に返信がありました。
なぜか自分は英語のフォームから報告してしまったので、以下のように返答も英語でした。オーマイガー。

Dear valued customer,

Thank you for contacting LINE Customer Care.

If you are experiencing issues with 2-step authentication, please refer to these Help articles.

If the issue persists, we will look into it in more detail. Please provide us with the following information and contact us again via the Reply URL at the end of this message. Although you may have previously answered some of the following questions, please answer them once again.

1. What is the registered information of the LINE account you wish to transfer?
   Country and country code:
   Phone number:
   Email address:
   LINE ID:
   Display name:
   Device model:
   Facebook verification (Y/N):
   Approximate date of account creation:
   Description of profile photo:
   Note: Please send us your profile photo if possible.

2. If you tried entering a phone number when transferring your account, what was the phone number?

3. Do you see an error saying “Invalid phone number”? Please enter the “*” symbol in beside the option that applies.
   ( ) Yes, I do.
   ( ) No, I don’t.

Again, thank you for using our services, and please let us know if you need any additional assistance.

Kind regards,

LINE Customer Care

という訳で以下のように優しく返信します。

You can reply in Japanese because I’m Japanese.

I had to reset my iPhone for repair.
After restoring my iPhone, LINE app requires me to verify my identity.
So I entered my email and password then continued the 2-step authentication.
I got a verification code via SMS and entered it.
But it didn’t work and the app said “The email address or password you entered doesn’t exist or is invalid.” as I attached the image in previous inquiry (that’s in Japanese though).
I tried again and again but I’m still getting same result.
I also tried to reset my password but no effect.

—

1. What is the registered information of the LINE account you wish to transfer?
   Country and country code: Japan (+81)
   Phone number: ******
   Email address: ******
   LINE ID: ******
   Display name: ******
   Device model: iPhone 6s
   Facebook verification (Y/N): N
   Approximate date of account creation: Over 6 years
   Description of profile photo: Illustration of a dog
   Note: Please send us your profile photo if possible.

2. If you tried entering a phone number when transferring your account, what was the phone number?

3. Do you see an error saying “Invalid phone number”? Please enter the “*” symbol in beside the option that applies.
   ( ) Yes, I do.
   (*) No, I don’t.

3. 対処してもらう

数時間後、めでたく以下のように対処してもらったので再ログインして解決。

お客さまからいただいた情報を元に調査をし、一時的に引き継ぎができるよう対応をさせていただきました。

お手数ではございますが、端末を再起動していただいた上で再度引き継ぎを行ってください。
※事前にバックアップを行っていない場合は、トーク履歴を引き継ぐことはできません。

なお、今回の処理には有効期限がございますので、本メールを受信してから24時間以内にお試しくださいますようお願いいたします。

今後とも、弊社サービスをよろしくお願いいたします。

弊社では、お客様からの貴重なご意見をもとにサービスの向上を目指しております。
お手数ではございますが、お客様のご意見・ご感想をお寄せいただけますと幸いです。

LINEさんゴメンの一言もないのね！！
あとダメだった理由を教えてよ。モヤモヤするぜ！！

しかしまぁ土日にも関わらず半日で解決したのでオーライ。

起動直後に落ちる

配信されたアプリを起動するとすぐにクラッシュしてしまう。
クラッシュレポートも上がってこないから、何が起こったのか分からない。
まるでProvisioning Profileの有効期限が切れた時のような挙動。
しかし、Code SigningやProvisioning Profileの設定は正しい。
そもそも間違っていればTestFlightで配信できないから。

原因1: ダイナミックなクラス名参照を実装している

以下の情報がヒントになった。

• xcode – React-Native ios App crashes without report – Stack Overflow

Production Buildでは、jsがminifyされる。
その過程で、クラス名もnとかfみたいな短い名前に変更されてしまう。
だから、Klass.constructor.nameのように参照している箇所は全て正しく動作しなくなる。

この実装方法は間違いなので修正する必要がある。

原因2: main.jsbundle が作成されていない

アーカイブの実行はエラー無く完了したから、コンパイル自体に問題は無いと思っていたが、そうではなかった。
アーカイブされたアプリの中身には、<name>.app 直下に main.jsbundle が作成されていなければならない。
このmain.jsbundleが、React Nativeのアプリ本体だ。
しかし何らかの理由でこのファイルがうまく作成されていなかった。

手動でコンパイルしてみる

react-native bundle というコマンドでXcodeを通さずに本番用のビルドが出来る。
以下の通り実行してみると予想通りエラーを得た。ちゃんとXcode上でもレポートしてくれよ・・

$ react-native bundle --entry-file index.ios.js  --bundle-output build/out.js --assets-dest build/ --platform ios --dev false
[3/3/2017, 8:09:03 PM] <start> Initializing Packager
[3/3/2017, 8:09:03 PM] </start><start> Building in-memory fs for JavaScript
[3/3/2017, 8:09:03 PM] <end>   Building in-memory fs for JavaScript (251ms)
[3/3/2017, 8:09:03 PM] <start> Building Haste Map
[3/3/2017, 8:09:04 PM] <end>   Building Haste Map (932ms)
[3/3/2017, 8:09:04 PM] </end><end>   Initializing Packager (1284ms)
[3/3/2017, 8:09:04 PM] <start> Transforming files

Unable to resolve module stream from /<path -to-app>/node_modules/pouchdb-quick-search/dist/pouchdb.quick-search.js: Module does not exist in the module map or in these directories:
  /</path><path -to-app>/node_modules/pouchdb-quick-search/node_modules
,  /</path><path -to-app>/node_modules

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
  3. Reset packager cache: `rm -fr $TMPDIR/react-*` or `npm start -- --reset-cache`.

オーケー、どうやらpouchdb-quick-searchが悪さをしているようだ。
エラーメッセージよ、出来れば該当行番号も教えてくれ！！

pouchdb-quick-search の修正

これはアプリ固有の原因なので参考までにして頂きたい。
まずご存知の通りReact Nativeにはstreamというモジュールは存在しない。それはnode.jsの標準モジュールだ。
こいつをrequireしようとしているからbundleでコケているという訳だ。
だからその箇所を修正すればいい。

node_modules/pouchdb-quick-search/dist/pouchdb.quick-search.js:

23605 var Stream;
23606 (function () {
23607   try {
23608     Stream = require('st' + 'ream');
23609   } catch (_) {} finally {
23610     if (!Stream) Stream = require(86).EventEmitter;
23611   }
23612 })();

この require('st' + 'ream') という箇所が原因だった。なんだよ 'st' + 'ream' って。
grepしてもヒットしねぇわけだ！！

以上。

[amazonjs asin=”B01NBIIL2K” locale=”JP” title=”React Native Tutorial: How to Start with React Native. Beginners Guide Book (English Edition)”]

OSSプロジェクトをフォークしてアプリを作り始める

フルスクラッチでアプリやサービスを作ろうとしているなら、自分の好きな技術スタックと共通している(出来るだけ著名な)OSSプロジェクトをフォークして始めるのはオススメです。
OSSのソースコードをなんとなく読むよりずっと学習効率がいいからです。
実用されてある程度くすんだものは、実際的なノウハウがより沢山詰まっています。
これは開発効率というよりは、盗める質と量が多いアプローチかもしれません。

一つやる際の注意点です。
要らないコードが沢山入っている状態から始めることになりますが、それらを削除するのは後にしてください。
実装に困った時の参考にするためです。
充分に身についたと思ったら、一気に削除しましょう。

OSSに何でもいいから貢献する

気に入らない点があればissueを立ててみたり、プルリクエストを送ってみたり、質問をしてみるのは最高におすすめです。
もちろん、自作のライブラリを公開することも。
わざわざ僕が言うまでもありませんね。

ではなぜわざわざ書くかというと、しばしば「恥ずかしい」とか「自信がない」という人がいるからです。
その気持ちはよく分かります。僕もそうですから。それは普通なことです。
人生は不条理です。うまく行く確証なんてひとつもありません。
だから、その「失敗したらどうしよう」という気持ちを一旦そのままにして、「向上したい」気持ちを優先してみましょう。
それが不条理と向き合う唯一の方法だからです。

凄い人とどんな形でもいいから絡んでいくと、沢山学べます。

英語でアプリを作る

もしサービスを日本人向けに限定する必要がないのなら、ぜひ英語版に対応させましょう。
TOEICが600点前後しかなかった僕にも出来ました。
しかも馬鹿にされるどころか、とても良いレビューをユーザさんからもらうことが出来ました。

カタコトの日本語はとても違和感がありますが、英語圏の人はBroken Englishに慣れています。
多少変でも受け入れる風土があります。
日本人はテレビなどで下手な英語を笑う風潮がありますが、外国ではそんなことありません。
あなたの英語がテレビで芸能人のネタにされる心配はほぼ無いでしょうから、笑われることは気にしなくてもいいでしょう。

外国人から問い合わせをもらったらラッキーです。
ユーザサポートは嫌でも返信しなければならないので、強制的に英語力が向上します。

英語でプログラミングを教える

英語でアプリを作ってユーザサポートとかこなした結果、文字でのコミュニケーションに自信が付きました。

自分の場合は海外の仕事が欲しいので、次に技術的な英会話の練習になる場を作ろうと思いました。
プログラミングを外国人に教えるという試みは大正解でした。
相手はプログラミングを学びに来ているので、言ってみれば時間を投資しているわけです。
もうこちらが綺麗な構文や発音にこだわっている暇はありません。
とにかく伝えようと必死になれます。
「あの時はこう言えばよかったんだ」というような失敗の積み重ねが効率よくできました。

しかも上手く行けば外国人と友達になれるので、英会話の必要性を増やせます。

ちなみに英会話スクールは時間とお金の無駄なので僕はやった事がありません。

まとめ：新しい試みを自分の現活動に紐付ける

社会人になると忙しいので、ゆっくり座学していられる時間があまり取れません。
なので、何をするにも一石二鳥を狙って新しい試みを取り入れていくようにしています。

成長とか意識高いこと言っちゃってますが、どれもこれも好きでやっているので楽しいです。
だから、「しんどいけど楽しい」ことを活動に取り入れていけば、気づいたらいろいろ出来るようになっている気がします。

参考になれば幸いです。