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
110
静的WEBサイトをSPA化するワンライナー
第39回シェル芸勉強会の大阪サテライトLT (2018/12/24)で発表した内容になります。
amanoese
December 24, 2018
Tweet
Share
More Decks by amanoese
See All by amanoese
魔術式シェル芸
amanoese
0
1.2k
シェル芸でなれるVTuber!
amanoese
0
920
Technopop shell-gei(テクノポップシェル芸)
amanoese
0
530
Alexaアカウントリンクの認証と申請で躓いた話
amanoese
0
75
シェル芸のおかげでUnicodeに怯えず楽しめるようになった話
amanoese
0
210
AlexaにSSMLで音声記号(IPA) 使って喋らせたかった
amanoese
0
480
VUIでシェル芸を実行できるようにしてみた
amanoese
0
2.1k
インタラクティブなシェル芸実行コマンド作った感想
amanoese
0
180
Other Decks in Technology
See All in Technology
大規模組織にAIエージェントを迅速に導入するためのセキュリティの勘所 / AI agents for large-scale organizations
i35_267
6
330
M365アカウント侵害時の初動対応
lhazy
7
5.1k
経理出身PdMがAIプロダクト開発を_ハンズオンで学んだ話.pdf
shunsukenarita
1
230
AI時代の知識創造 ─GeminiとSECIモデルで読み解く “暗黙知”と創造の境界線
nyagasan
0
160
PdM業務における使い分け
shinshiro
0
670
Vision Language Modelと自動運転AIの最前線_20250730
yuyamaguchi
1
610
東京海上日動におけるセキュアな開発プロセスの取り組み
miyabit
0
200
Datasets for Critical Operations by Dataform
kimujun
0
120
AIを使っていい感じにE2Eテストを書けるようになるまで / Trying to Write Good E2E Tests with AI
katawara
3
1.9k
AIエージェントを支える設計
tkikuchi1002
11
2.3k
ファインディにおける Dataform ブランチ戦略
hiracky16
0
210
Microsoft Learn MCP/Fabric データエージェント/Fabric MCP/Copilot Studio-簡単・便利なAIエージェント作ってみた -"Building Simple and Powerful AI Agents with Microsoft Learn MCP, Fabric Data Agent, Fabric MCP, and Copilot Studio"-
reireireijinjin6
1
150
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
A better future with KSS
kneath
238
17k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
The Language of Interfaces
destraynor
158
25k
What's in a price? How to price your products and services
michaelherold
246
12k
4 Signs Your Business is Dying
shpigford
184
22k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Adopting Sorbet at Scale
ufuk
77
9.5k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
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