プレビュー環境を構築するのに便利なサービス

さくっとプレビュー環境を用意したい。 DBがいらない静的なサイトをクライアントに見せるのにサーバーの設定とか面倒だし費用もかかる。

そんな悩みを解決してれるNetlifyとngrokを紹介。

Netlify

https://www.netlify.com/

これはなに

静的サイト向け自動デプロイアプリケーションです。

ローカルで作業して git push したら、自動でプレビュー環境（https）にデプロイされる。 ブランチごとにプレビュー環境をそれぞれ用意することも可能。

DBはデプロイに含まれないのであれば、やりたいことはプレビュー環境としてはこれでほぼカバーできる。

サンプル

独自ドメインを設定 https://yabukarastick.work/

独自ドメインを設定するとブランチ名がサブドメインに指定できる develop ブランチをデプロイすると develop.yabukarastick.work として公開される

https://develop.yabukarastick.work/

必要な環境

Github GitLab Bitbucket のいずれかのアカウント

公開鍵の設定を行い上記のリポジトリにアクセス（git clone, git push ）できるマシンとスキル

カスタマイズ

かなり柔軟に設定できる。

ここからはユーザー向けのURLになる。

Deploys

Build command

デプロイ時に実行するコマンド

Publish directory

公開するディレクトリ 指定したディレクトリ以外はアクセスできない

Production branch

公開されるブランチ デフォルトはmaster

Branch deploys

ブランチのデプロイ設定 全て、ブランチはデプロイしない、個別設定のいずれかを選択 デフォルトはブランチはデプロイしない

ブランチをデプロイする設定にした際コミットのハッシュ値ごとにURLが生成される。 管理画面上からpublishするとマスターにマージされる。 独自ドメインを設定していない状態ではブランチごとにプレビューはできない。

Domains

ドメインの設定

xxxx.netlify,com の xxxxは自由に変更できる 独自ドメインも設定できる 参考→ NetlifyとGithubで独自ドメインのサイトをHTTPS化したメモ

独自ドメインのSSL化も無料でできる

ngrok

https://ngrok.com/

これはなに

ローカル環境を外部へ公開するアプリケーションです。

トークンの登録（最初だけ行う）を行って

ngrok がインストールされたディレクトリで以下のコマンドを叩くとローカル環境が外部に公開される。

$ ./ngrok http 80

バーチャルホストを設定している場合は公開するホスト名を指定してあげます。

$ ./ngrok http -host-header virtual-host.name  80

URLやトークンはランダムな文字列なので管理画面から確認する

トークン https://dashboard.ngrok.com/get-started

URL https://dashboard.ngrok.com/status

必要な環境

ngrok アプリケーション（Windows）

ngrok アカウント

コマンドラインツール（Windowsのターミナル Git Bash のターミナル）

コマンドを叩く勇気

カスタマイズ

独自ドメインの設定→有料プラン などできる。

個人的な用途としてはgit push することなくスマホの確認用として使うくらいなので無料で満足している。

その他

以下にもエントリを書いている。

まとめ

めちゃくちゃ便利だ。 これなら15分で環境用意できる。 ありがとうございました。

ブラックジャックの黒いコートあるいは生存戦略に基づいた意識的な選択

ブラックジャック先生の黒いコート

正月休みに暇だったのでブラックジャック先生のことをいつの間にか考えていた。あるある。

ブラックジャック先生を知らない人のためにいちおう説明すると本名は間黒男といって無免許の医者だ。 不幸な生い立ち、手術料は法外で、友人は少なく、同居人は腫瘍に幼女の肉体を与えた少女。あっちょんぶりけ。 でも腕はたしか。 もうすでに終わった存在と思われていた手塚治虫を復活させたマンガの主人公だ。

ブラックジャック先生は夏でも黒のコートを着ている。 これはとても医者らしくない。 なぜ彼がこんな格好をしているかというと、彼は医者にみられたくない医者だからだ。 つまり夏でも黒のコートを着ているほうがブラックジャック先生として生きやすいのだ。 難しくいえば黒のコートは生存戦略に基づいた意識的な選択であったのだ。

では、なぜ黒のコートのなにが彼にとって有利にはたらくのだろう。 ブラックジャック先生がコートを手放さない表層的な理由（いいわけ）はいつでも手術ができるように手術道具をコートの中に仕込んでいるためだ（銃刀法違反だ）。 たまに命を狙われたときにコートに仕込んでいたメスで相手を撃退しているので、自分の身を守るためという理由もあるかもしれない。

しかし、手元にはせいぜいメス一本くらい残しておいてほかの手術道具一式は鞄の中に入れておけばいい。 メス一本ならジャケットでもパンツでも隠しポケットの中に入れたりすれば身軽に動けるしコートいらないですよね。 なんなら拳銃でもいいじゃないですか。 はい論破。

他人が想起するわたしと他人にイメージされたいわたし

唐突な自分語り。

ぼくは仕事で打ち合わせに行くときたいてい普段着のままでいく。 ときどき普段は着ないジャケットで行くこともあるがスーツにネクタイはない。 それはスーツにネクタイという格好に意味がないというよりもマイナスだからだ。

どういうことかというと、スーツにネクタイという格好はビジネスを思わせる。 そしてぼくはエンジニア職でビジネス的な立場でものを言うのが得策でない職種だからだ（これくらい3日あればできるよね？）。 たまに、同じ職種でスーツにネクタイの人もいるが残念ながらビジネスとしては的はずれなことしかいえないのでただの間抜けにしか見えない。

立場的に非ビジネスのことしかいえない人間がビジネスの格好をしてもおかしなことになるだけだ。 格好だけそれらしくしても不格好が目立つだけで世の中そこまで甘くないのだ。

エンジニアにも経営的な視点をという意見もあるがそれについては depends on としかいえない。

逆に、普段着でビジネス的に的はずれなことを言ってもこいつはエンジニアだからしゃーないと大目に見てもらえる。 あえてそのような的はずれな意見をすることで場の空気を変えたり、自分の意見を聞いてもらいやすくできるのだ。

人は他人を外見で判断する。自分の中の既成概念で相手がどんな人間なのかラベリングするのだ。

あなたがスーツを着てツーブロックで色黒なら不動産か保険の営業だと思われる。 問題は他人が想起する記号化されたイメージがあなたにとって有利にはたらいているかどうかだ。

記号化されたイメージとあなたが相手に与えたいイメージは異なるだろうかそれとも同じだろうか。 もし異なるのなら、異なることがプラスに働いているのだろうか。

黒いコートの理由

さて、話をブラックジャック先生に戻そう。

彼はモグリ（無免許）でしかも法外な診療報酬をぼったくる医者なのだ。 既存の価値観からは逸脱している。 患者の多くはおそらく彼のような医者とは会ったことがないだろう。

そこでまず患者に第一印象で「なんだこいつは」と思わせる必要がある。 ようやく答えにたどり着いた。そうそこで黒いコートが必要になるというわけです。

夏でも黒のコート、こいつ変なやつだな。と。 そう思わせればこっちのもの。 手術料さんぜんまんえんですと請求しても相手はああこいつは変な格好しているだけあって手術料もめちゃくちゃなんだなと納得してくれる。はずだ。

髪は七三、黒ぶちメガネで立ち居振る舞いは聖人君子の医者が「うーん、手術料いちおくえんですね」何事もないように伝える。あなたは何が起こったのかわからないだろう。あれ、これ募金とか必要なやつじゃん。それって海外で受けるから高いんでしょ。ここは日本医療保険とても発達した国。これは何かの間違いだ、そうだもしかしたら病気とか全部夢だったのかな。あぁなんだ夢だったか、びっくりしたびっくりしたと思考がお花畑方面に旅立ってしまう。 これはいけない。 患者は一刻を争う病状かもしれないのに、手術料の同意を得るどころか患者が自分の置かれた状況について疑問を持ち始めたら手術までの道のりがずいぶんと遠回りになってしまう。

はたまた冷静に弁護士とか警察とか手続きを取られるのもよくない。 臨場感がすべてだ。 相手に自分のフォーカスさせたい情報にフォーカスさせ、かつ冷静さを失わせた状態で意思決定を行わせる必要がある。 そこで、そう黒いコートですね。

普通の医者のように合法的な診療報酬を取るのであれば、夏は長袖のシャツとジャケット、それに医療用の器具が入った鞄というスタイルで過ごすはずだ。 事実研修医時代の彼はほかの医者と同じファッションだった。

まとめると自分の要求を通しやすくするためには見た目が重要だということ。 それをブラックジャック先生は気づいててあえて夏でも無理して黒いコートを着ているということ。

以外と計算高い男だったんだね、ブラックジャック先生は。

「人生に物語は要らない」リンク集

リンク集

時系列順に。

2012年

最初のエントリ。 すべてはここからはじまる
まさにHello world
高校中退→工場派遣→プログラマ→ホームレス→自立支援施設→プログラマ→海外放浪→職業訓練→世界一周アプリを作る という経歴のインパクトと文章の読みやすさに驚く

2013年?

上記の増田エントリの反響の大きさに驚きAmazonでセルフ出版する 内容は上記の増田エントリに幼少期〜高校中退や海外旅行など大幅に内容が追加されたもの
ボリューム的には東南アジアを中心とした紀行文半分以上占めている
合法（だった）ドラッグの記述がバロウズ的

ハッピーエンドは欲しくない

2014～2016年

ブログ
福島除染と北海道放浪
沈没する期間の画像がモラトリアム的ですごくいい

2015年

大学に行こうと決心する
日本の大学ってそういうところではないので失望しないか心配

大学受験するために高認を取ったよ
数学を理解した場面がすごくいい
数はか「かず」ではなくて「すう」、抽象的な概念なのだ

2016年

Webアプリをモダンにリファクタリング
情報を集めて噛み砕くのがものすごくうまいんだなとあらためて思う

Webで使われている技術の変遷
一般化していないことで生々しさが際立つ

2017年

東京でVRの仕事している

2018年

様々な場所で活動している
もはや増田ではない

katanov - Qiita

Kanata(@Kanata_VRC)さん | Twitter

Kanata – Medium

ハッピーエンドは欲しくない雑感

システム開発者にしか見えない景色と

作業している人は作業そのものには精通していても、プログラムでどんなことができるのかを知らないので、その人自身から最適解は引き出せないのだ。「こうなったら便利」というもやもやしたイメージはあっても、具体的な案としては出てこない。引き出せるのはヒントだけだ。それを頼りに、または、しばらく実際にライン作業をやらせてもらったりしながら、実際の業務フローそのものにふれ、それがどういう意味を持っているのか、システムに落としこむためにはどうしたらいいか、自分の中で咀嚼し、最適解を見つけていく。そうしてもやもやしたイメージを手に取れる形にして見せると「あ、それそれ！」といってもらえるのだ。
ハッピーエンドは欲しくない

ホームレスにしか見えない景色が同居している。

これはきっと帰る場所のある人間には絶対に見えない風景だ。帰る場所のない――家のない――本当の意味でのホームレスにしか見えない風景なのだ。そしてこの風景を見るためのコストは、全財産だ。一億の資産を持つ人間なら一億すべてを支払わなければ、これを見ることはできない。だからもしかすると、これはこの世でいちばん高価なものなのかもしれない。
ハッピーエンドは欲しくない

しかも、この著者のすごいところはホームレスとWeb開発の世界を行ったり来たりしているところにある。
若いころはいっぱしのWebエンジニアだったけど、精神的に疲れてしまって、いまはホームレスみたいな生活をしています。いまはお金とは縁のない生活だけど時間はたっぷりあってこれが人間本来の生活だと思います。とは世界が違う。

まとまった金が手に入れば、なんの躊躇もなく西成のドヤ街にいってホームレスになったり、海外を放浪したりする。

このいきざまよ

そして金がなくなれば、数年のブランクを取り戻すためにちゃっちゃと技術をキャッチアップしてWebエンジニアとして働くのだ（または除染作業員として！）。
そして、Webエンジニアとしてもレベルが高い。 というよりも思考能力が高い。

さらっと書いているけど独学でこのレベルの高さはほんとチートだよ。

そして文章も「物書きとして食っていける」レベルだ。

なんなんだろう、自分の中で交わらないはずだと思っていた世界を行ったり来たりしている。
あれ、世界ってこんなんだったんだー自分の世界観ってすごく狭くて間違ったものだったんだなーと気付かされた。

Webエンジニアと除染作業員が並列に存在する世界観。
金がなくなったけど、うーんいまはコードを書きたい気分じゃないし体を動かしたいから福島で除染でもするかな。

どうしてそういう思考になる？僕には無理だなあ。

たぶん、彼と僕とは同年代のはずだ。
おそらく年齢はひとつかふたつくらいしか違わないだろう。

嫉妬するとかそういう次元を超えていて、すごいねとしか言えないというか。

どのように会社にコミットするかというテーマでスピーチしなきゃいけないことになって職場をフェードアウトするところとか、ちゃんとした人たちよりダメな人たちといたほうが落ち着くとかそういう社会で生きてく上で間違いなくマイナスな特徴は自分と似ている。

自分も理不尽なことがあると社会から定期的に離れたくなる衝動に駆られるので、なるべく会社とかそういうものとは深くコミットせずにテキトーにやっているのだがこの一連のリンクを読んでそろそろ逸脱するタイミングなのかなとかそういう非社会的な思考に陥ったりしているのですごく面白く読んだけど影響としてはよくなかったのかもしれない。

ハッピーエンドは欲しくない

荒野へ (集英社文庫)

ハマータウンの野郎ども (ちくま学芸文庫)

ChromeのデベロッパーツールでJavaScript のメモリ使用量を調べる

prototype プロパティでメモリを節約する においてprototype プロパティを使うとメモリ使用量が少なくてすみますというエントリを書いたのだが、どのくらいのメモリが節約できるのかについては言及していなかった。

推測するな、計測せよ（Don’t guess, measure!）の原則のもとChromeのデベロッパーツールを使用してメモリ使用量を計測してみた。

なお、Chromeのデベロッパーツールでメモリを計測するのには以下を参考にした。

今回は[Record Allocation Profiler] という、JavaScript 関数ごとのメモリ割り当てを表示してくれるプロファイルを使用した。

サンプルプログラム

100000個のインスタンスを生成するプログラム。
連番で変数をつくる方法がevalくらいしか思いつかなかった。

コンストラクタでメソッドを追加版

function Something (any) {
  this.any = any;

  // インスタンスを生成する数だけメモリ領域を確保する
  this.doSomething = function () {
    console.log("I do " + this.any);
  }

}

for (var i = 0; i < 100000; i++) {
  eval("var something" + i + " = new Something('nothing')");
  eval("something" + i + ".doSomething()"); // I do nothing
}

console.log('finished.')

prototype プロパティにメソッドを追加版

function Something (any) {
  this.any = any;
}

// __proto__ プロパティを参照するためインスタンス数に依存しない
Something.prototype.doSomething = function() {
  console.log("I do " + this.any);
}

for (var i = 0; i < 100000; i++) {
  eval("var something" + i + " = new Something('nothing')");
  eval("something" + i + ".doSomething()"); // I do nothing
}

console.log('finished.')

結果発表

コンストラクタでメソッドを追加

メモリ使用量: 37.6MB

prototype プロパティにメソッドを追加

メモリ使用量: 31.5MB

Something()のメモリ使用量がコンストラクタ版では6.5MB、prototype プロパティ版では16.4KBと400倍違った。
きれいにこの差がメモリ使用量の差となっており、prototype プロパティにメソッドを追加するほうがメモリ使用量は少なくなるという結果になった。

めでたしめでたし。

prototype プロパティでメモリを節約する

普段は業務用のアプリケーション開発がメインで、JavaScript でコードを書いているときにメモリの使用量を意識することはない。
ただ、インスタンスを1000個とか生成するケースに遭遇するときのためにこう書いておけばメモリが節約できるよという引き出しをひとつ用意しておいたほうがいいだろう。

コンストラクタでメソッドを追加

例えば、あるメソッドをObject 自身のメソッドとして定義すると、インスタンスを生成する数だけあるメソッドのメモリ領域を確保する。

function Something (any) {
  this.any = any;

  // インスタンスを生成する数だけメモリ領域を確保する
  this.doSomething = function () {
    console.log("I do " + this.any);
  }

}

const something = new Something("nothing");
something.doSomething(); // I do nothing

インスタンスが生成されるたびにdoSomething()はメモリ領域に格納される。 100個インスタンスを生成するとdoSomething()も100個生成されメモリ領域に格納される。

prototype プロパティにメソッドを追加

prototype プロパティを使えばメソッドを実行する際にプロトタイプチェーンを辿って対象のメソッドを探す。

function Something (any) {
  this.any = any;
}

// __proto__ プロパティを参照するためインスタンス数に依存しない
Something.prototype.doSomething = function() {
  console.log("I do " + this.any);
}

const something = new Something("nothing");
something.doSomething(); // I do nothing

doSomething() は Something.prototype に存在するのでインスタンス生成時のメモリの増減に関与しません。 100個インスタンスを生成しても、参照するdoSomething() はSomething.prototype.doSomething() ただひとつです。

まとめ

JavaScriptでメモリを節約するにはprototype プロパティ使えばいいんやでということが理解できました。

すべてのインスタンスが共通のprototype からプロパティを継承するというJavaScriptの独特な仕様ですね。

ES6のClass構文を使っていると、prototype なんて意識しなくなりますがBabelが吐き出すコードがある程度読めないとあれなので知識として知っておくべきですね。

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質

ブレイクスルーJavaScript フロントエンドエンジニアとして越えるべき5つの壁―オブジェクト指向からシングルページアプリケーションまで

自分のローカル環境をプレビュー環境にする ngrok

ほしかったのはこれなのかもしれない。
zipをダウンロードしてコマンドからトークンを登録するだけで自分のローカル環境がプレビュー環境になる。

なんだこれ魔法？

WindowsのGit bash での作業になりますのでMacの人はMacのページをみてください。
ngrokを使用してローカル環境を外部に公開する - Qiita

トークンの登録

https://ngrok.com からダウンロードしてzipを解凍しておきます。 ngrok を解凍したディレクトリで以下を実行します。

$ ./ngrok authtoken トークン

トークンはユーザー登録後に https://dashboard.ngrok.com/get-started に表示される文字列です。
上記で ~/.ngrok2/ngrok.yml にトークンが登録されます。

起動

以下のコマンドでローカルホストが外部に公開される。

$ ./ngrok http 80

自分の環境はバーチャルホストを設定しているのでvirtual-host.nameを自分のホスト名に書き換えればよい。

$ ./ngrok http -host-header virtual-host.name  80

まとめ

簡単すぎてすごい。

ngrok についてあり

WEB+DB PRESS Vol.98

刑務所に収容されやすい遺伝子を持つ人々

技術の進歩というのは眼を見張るものがあり、実は刑務所に収容されやすい遺伝子というのはずいぶんと前からわかっている。

しかも刑務所に収容されている人の9割だかそのくらいはその遺伝上の特性を持っているという。

わたしはそんなこと今まで聞いたことがなかったからその話を知った時とてもショックを受けた。

おそらくはそんなことが知れ渡ると社会に与える影響が大きすぎると施政者たちが情報統制でもしたのだろう。

その9割のやつらと同じ遺伝的特徴を持つものを世の中から排除しろ。子孫を残せないようにしろと叫ぶ人たちが出てきてもおかしくない。

その人たちには悪いけど犠牲になってもらって世の中から犯罪がなくなるなら社会にとっては大きなプラスだ。 犯罪を取り締まるコストが下がりその分もっと別な分野に投資することができる。そして、人々が安心して暮らせる世の中が待っている。

たとえ、それが認められないとしても議論はすべきじゃないのか。情報を隠ぺいしてそのことをなかったことにするのはよくない。自由を！

さて、もう少しこの事実についていうと実はこの遺伝的特徴を持つ人たちは人類の50％ちかく占めているということがわかっている。 そして彼らは国家や地域による偏りがあまりない。 強いて言えば中国はややその割合が高いのかもしれない。 これは間違いない事実だ。

え、そんなにというのが正直なところだ。 さすがにちょっと多すぎる。 地球の人口が70億だとしてその半分35億がそのような特性を持っているというのはちょっとした恐怖だ。

そろそろ核心に触れよう。 いったいそんな遺伝子を持つ人たちとはいったいどんな人々なのか。 かれらはどこにいて何をしている人々なのか。

その特徴とはY染色体があること。 世間では男性として知られている人たちである。

この事実から以下のことがわかる。

• 性差は明らかにある。

• 男性は現代の社会生活に適応できていない。

• クローン技術がより発達すれば今の男性は姿を消す可能性がある。

• 人間は主義主張の正しさより自分の置かれた立場によって意見を変える。

さて、この世の中いったい誰が誰を差別してるのでしょうか。