Firebaseを使ってP5をScrapboxで実行する
(2019/11/7)
GitHub Pagesを使ってp5をScrapboxで実行するようにしていたが、Firebaseを使う方法を試してみた。
Firebase Hostingというやつを使う。
https://masui.github.io/runp5/?p=masui/p5をScrapboxで実行する&c=p5.js より簡単に実行できるようにしたい
手順
ローカルマシンにFirebaseツールをインストール
$ npm install -g firebase-tools Firebase環境の設定
$ mkdir runp5 $ mkdir runp5/public $ cd runp5 https://github.com/masui/runp5 にある index.htmlとかをpublicフォルダに置く
$ firebase init Hostingを選択する
その他いろいろ指定する
$ firebase deploy 動いた! https://run-p5.firebaseapp.com/?code=https://scrapbox.io/api/code/prog-exercises/正規分布の生成/normal.js
run-p5になってるのは、6文字以上という制約があるため
runp5.comで動かす
firebaseapp.com じゃなくて独自ドメインで動かしたい
Google Domainsで
runp5.com を取得する Firebaseに接続する
ダッシュボードで設定する
ステータスが『設定が必要です』となっている間は独自ドメインからは接続できません．しばらく待たないといけないようです．
待てばいいのかな
3時間ぐらい待ってもかわらない... 
どうもGoogle Domainsで設定が必要らしい
自動じゃなかったのか...
こんなのを設定した
保留中になった
1時間たっても変わらず
最大24時間かかる?
http://runp5.com/ は動くようになったが https にならない
httpsにする方法がわからない
DNSSECとやらの設定なのかもしれない
違うかもしれない
やっとhttpsになった(半日後ぐらい)
結果
というわけで、よくわからないが動くようにはなった
ノウハウが多いようで大変だったが
Firebaseは、あまり重要でないサービスを軽く作るには良いのかも
サーバでRuby動かしたりはできないだろうし制限はある
もっと複雑なものはHerokuなどでやるのが良いのだろうが、サーバの機能をほとんど使わない場合はFirebaseで良いということなのだろうか
ハマったところ
DNSの設定がよくわからない
httpsの設定もよくわからない
index.htmlの中でindex.jsを相対パス指定してたらエラーで動かなかった
/index.js みたいな指定が必要 ルーティングの方法がわからない
https://runp5.com/project/page/file を認識するためには firebase.json に以下のような記述を書くfirebase.jsonCopied!
"rewrites": [ { "source": "/*/*/*", "destination": "/index.html" }], こう書くと、
runp5.com/project/page/file のようなURLを与えたとき index.html に飛ぶ index.js の中で、 document.location.pathname が /a/b/c になっている場合を調べる そういうのをJSでやるのは邪道ではないのか? よくわからない。
JSONでもJSでもルーティングの指定をしなきゃならないのは変だと思う