Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
静的WEBサイトをSPA化するワンライナー
Search
amanoese
December 24, 2018
Technology
0
60
静的WEBサイトをSPA化するワンライナー
第39回シェル芸勉強会の大阪サテライトLT (2018/12/24)で発表した内容になります。
amanoese
December 24, 2018
Tweet
Share
More Decks by amanoese
See All by amanoese
魔術式シェル芸
amanoese
0
1k
シェル芸でなれるVTuber!
amanoese
0
860
Technopop shell-gei(テクノポップシェル芸)
amanoese
0
490
Alexaアカウントリンクの認証と申請で躓いた話
amanoese
0
34
シェル芸のおかげでUnicodeに怯えず楽しめるようになった話
amanoese
0
150
AlexaにSSMLで音声記号(IPA) 使って喋らせたかった
amanoese
0
420
VUIでシェル芸を実行できるようにしてみた
amanoese
0
1.8k
インタラクティブなシェル芸実行コマンド作った感想
amanoese
0
130
Other Decks in Technology
See All in Technology
DevIO2024_レガシー運用からの脱却 -クラウド活用の実践事例とベストプラクティス-
jun2882
0
210
コミュニティサービスに「あなたへ」フィードを リリースするまでの試行錯誤
takapy
1
150
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
CTOから見た事業開発とプロダクト開発 / My Perspective on Business and Product Development as CTO
keisuke69
4
960
dxd2024-生成AIに振り回された3か月間の成功と失敗/dxd2024-link-and-motivation
lmi
2
260
エンジニア向け会社紹介資料
caddi_eng
14
220k
エンジニアの生存戦略 〜クラウド潮流の経験から紐解く技術トレンドのメカニズムと乗りこなし方〜
shimy
9
1.9k
AWSサービスメニュー開発をしていてAWSを好きだ!と感じた瞬間
toru_kubota
0
130
AIアシスタントの活用で品質の向上と開発ワークフローのスピードアップ
nagix
1
200
[I/O Extended Android 2024] What`s new in Android 2024
kyeongwan
0
220
「単なる OAuth 2.0 を認証に使うと、車が通れるほどのどでかいセキュリティー・ホールができる」のか検証してみた
terara
0
380
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
Building Your Own Lightsaber
phodgson
101
5.9k
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Principles of Awesome APIs and How to Build Them.
keavy
124
16k
Being A Developer After 40
akosma
72
580k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
18
1.2k
The World Runs on Bad Software
bkeepers
PRO
63
11k
Git: the NoSQL Database
bkeepers
PRO
423
64k
Transcript
静的WEBサイトをSPA化する ワンライナー
自己紹介 RustとElmに憧れてる自称ウェッブ系エンジニア javascriptとシェル芸が好き 仕事はIBM Cloudのなかでふるすたっくに頑張るひと Spring BootとVue.js使ってAI系の案件をフワッとやってま す。 最近Elmの勉強を始めました。 taka@SIではたらくフレンズ
@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は暗黙で生成されます。
None
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(再帰的)を書 けば多分いける。。。 ただ、ソースがもう読めないので諦めたい。。。。
回避策2 Electronに突っ込めんでexe化すれば終わります。 「ドキュメント.exe」になる闇が残りますが。。。
None