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
63
静的WEBサイトをSPA化するワンライナー
第39回シェル芸勉強会の大阪サテライトLT (2018/12/24)で発表した内容になります。
amanoese
December 24, 2018
Tweet
Share
More Decks by amanoese
See All by amanoese
魔術式シェル芸
amanoese
0
1.1k
シェル芸でなれるVTuber!
amanoese
0
870
Technopop shell-gei(テクノポップシェル芸)
amanoese
0
500
Alexaアカウントリンクの認証と申請で躓いた話
amanoese
0
37
シェル芸のおかげでUnicodeに怯えず楽しめるようになった話
amanoese
0
160
AlexaにSSMLで音声記号(IPA) 使って喋らせたかった
amanoese
0
430
VUIでシェル芸を実行できるようにしてみた
amanoese
0
1.9k
インタラクティブなシェル芸実行コマンド作った感想
amanoese
0
130
Other Decks in Technology
See All in Technology
エムスリー全チーム紹介資料 / Introduction of M3 All Teams
m3_engineering
1
330
Unlearn Modularity
lemiorhan
6
190
JAWS PANKRATION 2024 配信システムの紹介
yoshimi0227
0
100
それでもやっぱり ExpressRoute が好き!
skmkzyk
0
390
Product Utilization of Large Language Models Starting Today
ymatsuwitter
3
1.6k
I tried the newly introduced certification "Applied Skills" on Microsoft Learn
mappie_kochi
0
260
Do you know “Environment Variables” ?
akimiya
0
100
AWS Lambdaで実現するスケーラブルで低コストなWebサービス構築/YAPC::Hakodate2024
fujiwara3
7
3.7k
Graph Database と Generative AI の素敵な関係
oracle4engineer
PRO
13
2.2k
Microsoft 365 でデータセキュリティを強化しよう
sophiakunii
2
330
コード✕AIーソフトウェア開発者のための生成AI実践入門~
yuhattor
4
870
Binary Hacks Rebooted 私選ハック集
nullpo_head
1
300
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
RailsConf 2023
tenderlove
28
850
GraphQLとの向き合い方2022年版
quramy
43
13k
Infographics Made Easy
chrislema
239
18k
Done Done
chrislema
181
16k
Adopting Sorbet at Scale
ufuk
73
9k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
How to Ace a Technical Interview
jacobian
275
23k
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.3k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Code Review Best Practice
trishagee
63
17k
How to name files
jennybc
77
99k
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