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

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

Transcript

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

   View Slide

2. 自己紹介
   RustとElmに憧れてる自称ウェッブ系エンジニア
   javascriptとシェル芸が好き
   仕事はIBM Cloudのなかでふるすたっくに頑張るひと
   Spring BootとVue.js使ってAI系の案件をフワッとやってま
   す。
   最近Elmの勉強を始めました。
   taka@SIではたらくフレンズ
   @amanoese
   

   View Slide

3. SPAとは？
   

   View Slide

4. SPAとは？
   ようは１ファイルにすればよい（横暴）
   

   View Slide

5. なぜ？
   引き継ぎ資料の作成中
   先輩「すべてのドキュメントを散らばらず、１つのファイルで作って」
   ↓
   自分で作れよ　gitbookでpdfにする？
   いやフォーマットあれだし結局サーバサイドが必要？
   ↓
   シェル芸でなんとかならないか？
   

   View Slide

6. どうするか
   gitbookはbuildすると、
   _book/にhtmlやcss、jsなどの成果物を出力する。
   

   View Slide

7. どうするか
   ファイルはデータURIにすると、文字列として扱えるようになる
   

   View Slide

8. どうするか
   このファイルたちをbase64化してhtmlファイルに埋め込む
   

   View Slide

9. どうするか
   あまり知られてない？ですが、
   htmlファイルもdataURIとして扱えます。
   

   View Slide

10. どうするか
    html以外のコンテンツをデータURI (base64)化
    ↓
    htmlのリンクをすべて差し替え
    ↓
    データURI化されたコンテンツを埋め込まれたhtmlをデータURI化
    ↓
    データURIなhtmlを1つのファイルに埋め込みコントロールする
    javascript+htmlを書けばOK
    

    View Slide

11. javascriptの復習
    html , body ,head タグは書かなくても良い。。。
    書かないとかってにbodyに入ります。またhtml,head,bodyは暗黙で生成されます。
    

    View Slide

12. View Slide

13. javascriptの復習
    ‘()’中括弧を使うと’;’を書かなくずに連続した処理が短くかける。
    

    View Slide

14. javascriptの復習
    コンソールからは使えるけど、コンソール以外からは使えない
    

    View Slide

15. javascriptの復習
    汚染や間違えたメソッドの使い方は気にしない
    

    View Slide

16. 頑張って書く
    

    View Slide

17. これでできる。。。？
    printf 'height="100%%">(f=(a,d=document.all[3])=>(d.onload=_=>[...<br/>frames[0].document.querySelectorAll("a")].map(x=>x.onclick=_=>f(x.href)),d.src<br/>="data:text/html;base64,"+({%s})[new<br/>URL(a,"http://_/").pathname]))("index.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
    

    View Slide

18. これでできる。。。？
    

    View Slide

19. データURI
    https://developer.mozilla.org/ja/docs/data_URIs#Encoding_data_into_base64_format
    

    View Slide

20. 回避策
    form要素の中でform要素を展開するjavascriptを埋め込むjavascript（再帰的）を書
    けば多分いける。。。
    ただ、ソースがもう読めないので諦めたい。。。。
    

    View Slide

21. 回避策２
    Electronに突っ込めんでexe化すれば終わります。
    「ドキュメント.exe」になる闇が残りますが。。。
    

    View Slide

22. View Slide