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

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

SPAとは？

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

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

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

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

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

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

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

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

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

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

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

頑張って書く

これでできる。。。？ 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

これでできる。。。？

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

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

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

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

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

amanoese

More Decks by amanoese

Other Decks in Technology

Featured

Transcript