静的WEBサイトをSPA化するワンライナー

第39回シェル芸勉強会の大阪サテライトLT (2018/12/24)で発表した内容になります。

Transcript

1. 静的WEBサイトをSPA化する ワンライナー
2. 自己紹介 RustとElmに憧れてる自称ウェッブ系エンジニア javascriptとシェル芸が好き 仕事はIBM Cloudのなかでふるすたっくに頑張るひと Spring BootとVue.js使ってAI系の案件をフワッとやってま す。 最近Elmの勉強を始めました。 taka@SIではたらくフレンズ @amanoese
3. SPAとは？
4. SPAとは？ ようは１ファイルにすればよい（横暴）
5. なぜ？ 引き継ぎ資料の作成中 先輩「すべてのドキュメントを散らばらず、１つのファイルで作って」 ↓ 自分で作れよ　gitbookでpdfにする？ いやフォーマットあれだし結局サーバサイドが必要？ ↓ シェル芸でなんとかならないか？
6. どうするか gitbookはbuildすると、 _book/にhtmlやcss、jsなどの成果物を出力する。
7. どうするか ファイルはデータURIにすると、文字列として扱えるようになる
8. どうするか このファイルたちをbase64化してhtmlファイルに埋め込む
9. どうするか あまり知られてない？ですが、 htmlファイルもdataURIとして扱えます。
10. どうするか html以外のコンテンツをデータURI (base64)化 ↓ htmlのリンクをすべて差し替え ↓ データURI化されたコンテンツを埋め込まれたhtmlをデータURI化 ↓ データURIなhtmlを1つのファイルに埋め込みコントロールする javascript+htmlを書けばOK
11. javascriptの復習 html , body ,head タグは書かなくても良い。。。 書かないとかってにbodyに入ります。またhtml,head,bodyは暗黙で生成されます。
13. javascriptの復習 ‘()’中括弧を使うと’;’を書かなくずに連続した処理が短くかける。
14. javascriptの復習 コンソールからは使えるけど、コンソール以外からは使えない
15. javascriptの復習 汚染や間違えたメソッドの使い方は気にしない
16. 頑張って書く
17. これでできる。。。？ printf '<html><iframe src="" frameborder="0" width="100%%" height="100%%"></iframe><script>(f=(a,d=document.all[3])=>(d.onload=_=>[... frames[0].document.querySelectorAll("a")].map(x=>x.onclick=_=>f(x.href)),d.src ="data:text/html;base64,"+({%s})[new URL(a,"http://_/").pathname]))("index.html")</script></html>' $(find -type f | grep html$ | xargs -L1 -i bash -c "echo \\\"\$(echo {}| cut -c 2-)\\\":\\\"\$(base64 -w0 <(sed -f <(find -type f | egrep -v '(html|md)\$' | awk '{print length(), \$0}' | sort -nr | cut -d ' ' -f2- | cut -c3- | xargs -L1 -I@ bash -c 'echo s\|[.\/]*@\|data:\$(echo @ | sed -e s\/.*css$\/text\\\/css\/ -e s\/.*js$\/application\\\/javascript\/ -e s\#@\#\# | grep . || file @ -ib)\;base64,\$(base64 -w0 @)\|g') {}))\\\"," | tr -d \\n ) | tee spa.html
18. これでできる。。。？
19. データURI https://developer.mozilla.org/ja/docs/data_URIs#Encoding_data_into_base64_format
20. 回避策 form要素の中でform要素を展開するjavascriptを埋め込むjavascript（再帰的）を書 けば多分いける。。。 ただ、ソースがもう読めないので諦めたい。。。。
21. 回避策２ Electronに突っ込めんでexe化すれば終わります。 「ドキュメント.exe」になる闇が残りますが。。。