Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

amanoese
December 24, 2018

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

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

amanoese

December 24, 2018
Tweet

More Decks by amanoese

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

  3. SPAとは?

    View Slide

  4. SPAとは?
    ようは1ファイルにすればよい(横暴)

    View Slide

  5. なぜ?
    引き継ぎ資料の作成中
    先輩「すべてのドキュメントを散らばらず、1つのファイルで作って」

    自分で作れよ 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 [email protected] 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. 回避策2
    Electronに突っ込めんでexe化すれば終わります。
    「ドキュメント.exe」になる闇が残りますが。。。

    View Slide

  22. View Slide