第39回シェル芸勉強会の大阪サテライトLT (2018/12/24)で発表した内容になります。
静的WEBサイトをSPA化するワンライナー
View Slide
自己紹介RustとElmに憧れてる自称ウェッブ系エンジニアjavascriptとシェル芸が好き仕事はIBM Cloudのなかでふるすたっくに頑張るひとSpring BootとVue.js使ってAI系の案件をフワッとやってます。最近Elmの勉強を始めました。[email protected]ではたらくフレンズ@amanoese
SPAとは?
SPAとは?ようは1ファイルにすればよい(横暴)
なぜ?引き継ぎ資料の作成中先輩「すべてのドキュメントを散らばらず、1つのファイルで作って」↓自分で作れよ 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 '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
これでできる。。。?
データURIhttps://developer.mozilla.org/ja/docs/data_URIs#Encoding_data_into_base64_format
回避策form要素の中でform要素を展開するjavascriptを埋め込むjavascript(再帰的)を書けば多分いける。。。ただ、ソースがもう読めないので諦めたい。。。。
回避策2Electronに突っ込めんでexe化すれば終わります。「ドキュメント.exe」になる闇が残りますが。。。