そろそろ HTTPS でしか使えない新機能なんかを使いたくなるので、すこしずつノウハウを溜めようという気持ちはあります。

localhost 自己証明書

ググって出てくるコマンドだと対話的インターフェイスでどうでもいい情報を入力する必要があってダルいので一発で自己証明書つくれるようにします。

#!/bin/sh

cd dev

CN=localhost

openssl genrsa -out server.key 2048
openssl req -new -key server.key -out server.csr -subj "/C=JP/ST=Kyoto/L=Kyoto/O=Example/CN=$CN"
openssl x509 -req -days 1024 -in server.csr -signkey server.key -out server.crt
rm server.csr

server.key と server.crt を使って HTTPS サーバを立てます。

(備考) node で HTTP2 サーバを立てる

HTTP2 は一応暗号化はオプションということになってるようだが (H2C/HTTP2 Over TCP)、実際の実装では TLS に乗っているものしかないので必然的に HTTPS でしか使えない。

node の http.Server / https.Server を使っている場合、Server のインスタンス化コードを替えるだけで HTTP2 にできる (インターフェイスが一緒)

コンストラクタに server.key と server.crt を指定するだけ。

ホスト名解決

localhost だけでの開発ならいいが、LAN 内のスマートフォンなどから HTTPS な開発環境にアクセスしようと思うと、IP アドレス指定してもアクセスできない。Chrome の場合、ERR_CONNECTION_CLOSED (This webpage is not available) になる。

どうやらホスト名でアクセスしないとブラウザ側で強制的に接続を切るようで、どうしようもない。

ということで、一旦 LAN 内に DNS サーバを立てて該当コンピュータを名前でひけるようにする必要がある。(mDNS でいけないかと思ったけどダメだった)

node で DNS サーバを書ける実装もある (node-dns (native-dns)) のでこれを使えばとりあえず簡単に書ける。

/etc/hosts 形式を読んで A レコード返すだけのは雑に書いた。


立てた HTTPS サーバと同じマシン上で良いので、port 53 で起動する。sudo が必要。

端末側でもこの DNS サーバを参照する必要がある。

Android では Settings → Wi-Fi → (接続中のネットワーク名を長押し) → Modify network とすすんで、Show advanced options にチェックを入れ、IP settings を Static に変え、DNS 1 にマシンのIP Addressを指定すれば反映される。

またはルータの設定を書き変えて DHCP 経由で通知する DNS サーバを変えてもいいけど、これはこれで面倒。

  1. トップ
  2. tech
  3. HTTPS 開発環境

link rel="import" によるロードはやはりちょっと時間がかかる。Polymer の場合どうしてもインポート数が増えるのでなんとかしたい。

もちろん vulcanize すれば import 自体は解決するが、created/attached まわりの処理もチリも積もればという感じで、なかなか時間がかかるので、根本的解決にならない。

特に appmanifest によってスタンドアロンアプリ表示させている場合、ロードまでの間完全に真っ白の画面になり、プログレスバーも出ないのでかなり残念なことになる。

ということで、一旦ローディング画面を挟みたい。

問題点:first paint がなかなか発生しない

HTML Imports はポリフィルされていない場合ブロックする (Chrome にしかネイティブ実装されてないから Chrome だけ)。インポート先がインポートしている場合再帰的にインポートするので、依存全部インポートが終わるまで表示が完全にブロックし、head内でインポートしていると画面描画が全く走らない。

Chrome の場合 first paint が走るまで現在表示中の内容を消さないので、リロードした場合特に「全く操作はできないのに表示はされている」状態になって気持ちが悪い。

なので、まずはインポートなしの状態ないし、最低限必要なものだけをインポートしてから、ロード画面を表示する。

ローディングプログレスがとれない

link要素のloadイベントでひとつのインポートの完了はわかるが、再帰的な全てのリクエストのプログレスをとることができない。

どうしようもない?ぽいので、intermidate なローディングプログレス表示するしかない。

CSS でアニメーションさせるのが現状では一番マシっぽい。

コード

		<div class='loading'></div>
		<my-app></my-app>
		<script>
			requestAnimationFrame(function () {
				var link = document.createElement('link');
				link.rel = "import";
				link.href = "src/app.html"; // my-app の定義
				link.addEventListener('load', function () {
					var loading = document.querySelector('.loading');
					loading.parentNode.removeChild(loading);
				});
				document.body.appendChild(link);
			});
		</script>

link rel="import" は作って挿入してもちゃんと動いてくれるのでこれで良い。polyfill もちゃんと動いててうまく動く。

load イベントは再帰的なロードが全部終わってから発火するようになっている。

将来性

HTTP2 化してもカスタムエレメントの初期化処理はなくならないので、大量のカスタムエレメントを使う場合なんらかのローディング表示が必要ではないかという気がする。

appmanifest によるスタンドアロンアプリ化ではコンテナ(ブラウザ)側でそのうちちゃんとローディング出せるようになりそう。

  1. トップ
  2. tech
  3. webcomponentsjs/Polymer、HTML Imports が終わるまでの間ローディングを出したい。

ウェブアプリをスタンドアロンアプリのように表示するため (ようはロケーションバーを消したいという) 試してみた。




「ホーム画面に追加」というメニューに manifest が反映される形になる (わかりにくい)

"display": "standalone" の場合、こうなる。

  1. トップ
  2. tech
  3. Manifest for a web application

ちょっと考えごとするとき Google Keep にとにかくタイピングしていく、みたいなことが多々あるが、図を入れようとすると途端に困難になるので、ペンと紙という便利な道具を使うことにしてみた。

できればデジタルガジェットで解決したかったがコストの割に性能で満足いくか微妙に感じた結果、良いペンと紙を使うほうが気持ちいいのではないかと考えた。

マルマン ノート ニーモシネ A5 方眼罫 N182A -

5.0 / 5.0

別段こだわりがないし思考過程を保存しようとも思わないので、紙とかコピー用紙でいいかと思ったが、思いのほかスムーズに書けずイライラしたので、調べた結果ニーモシネが良いだろうという感じだった。装丁がかっこいいのと、方眼の薄さがちょうどよくて気にならない。

ペンは手持ちにあった LAMY の Safari (なんかのときにもらった) の細字(F)と、kakuno の中字(M)、細字(F) で良さそうなのでこれのまま。(Safari も kakuno も学習用の安い万年筆。LAMY のFはkakunoのMと同じかそれより太い線)

LAMY ラミー 万年筆 F 細字 サファリ ブラック L17-F 正規輸入品 -

5.0 / 5.0

パイロット 万年筆 カクノ FKA-1SR-SLM 中字 ソフトブルー -

5.0 / 5.0

この組み合わせはかなり気持ち良く書ける。ペンは安くても紙はちゃんとしたのを使ったほうが良いということを学んだ。

現状

紙 vs コンピュータという点では、結局筆記で書いていくのは自分の場合長くは続かない気がしている。

今のところ8ページぐらい消費したけど、今やっていることに対してはそこそこ良い感じがする。ある程度以上に複雑になると図がないと厳しいけど、コンピュータ上で図を書くのは、書けないことはないけど今のところペンで書くよりも早く書けない。

一方で書いた図を編集させるのが難しいので図の試行錯誤はしにくいのと、字を書く分にはコンピュータ上に書いたほうが早いので、思考過程を最終的にデジタル化したいなら最初っから Inkscape 極めたほうが有益そうではある。

  1. トップ
  2. tech
  3. 紙とペン