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
73
静的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
880
Technopop shell-gei(テクノポップシェル芸)
amanoese
0
500
Alexaアカウントリンクの認証と申請で躓いた話
amanoese
0
44
シェル芸のおかげでUnicodeに怯えず楽しめるようになった話
amanoese
0
170
AlexaにSSMLで音声記号(IPA) 使って喋らせたかった
amanoese
0
440
VUIでシェル芸を実行できるようにしてみた
amanoese
0
2k
インタラクティブなシェル芸実行コマンド作った感想
amanoese
0
140
Other Decks in Technology
See All in Technology
Wvlet: A New Flow-Style Query Language For Functional Data Modeling and Interactive Data Analysis - Trino Summit 2024
xerial
1
110
社内イベント管理システムを1週間でAKSからACAに移行した話し
shingo_kawahara
0
180
株式会社ログラス − エンジニア向け会社説明資料 / Loglass Comapany Deck for Engineer
loglass2019
3
31k
Amazon SageMaker Unified Studio(Preview)、Lakehouse と Amazon S3 Tables
ishikawa_satoru
0
150
私なりのAIのご紹介 [2024年版]
qt_luigi
1
120
OpenAIの蒸留機能(Model Distillation)を使用して運用中のLLMのコストを削減する取り組み
pharma_x_tech
4
550
5分でわかるDuckDB
chanyou0311
10
3.2k
KnowledgeBaseDocuments APIでベクトルインデックス管理を自動化する
iidaxs
1
260
UI State設計とテスト方針
rmakiyama
2
420
Jetpack Composeで始めるServer Cache State
ogaclejapan
2
170
re:Invent をおうちで楽しんでみた ~CloudWatch のオブザーバビリティ機能がスゴい!/ Enjoyed AWS re:Invent from Home and CloudWatch Observability Feature is Amazing!
yuj1osm
0
120
watsonx.ai Dojo #5 ファインチューニングとInstructLAB
oniak3ibm
PRO
0
160
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Producing Creativity
orderedlist
PRO
341
39k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
Site-Speed That Sticks
csswizardry
2
190
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
RailsConf 2023
tenderlove
29
940
Writing Fast Ruby
sferik
628
61k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
810
Building Adaptive Systems
keathley
38
2.3k
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