新ジャンルのjavascript圧縮難読化に挑戦 ~jojofy-js

20
新新新新新新 JavaScript 新新 新新新新新新 By Hitoshi Kondo [email protected]

Upload: kondo-hitoshi

Post on 09-Jan-2017

389 views

Category:

Software


1 download

TRANSCRIPT

Page 1: 新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js

新ジャンルの JavaScript圧縮難読化に挑戦By Hitoshi Kondo

[email protected]

Page 2: 新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js

最近の JS とビルド

 本来 JavaScript にコンパイルなどのビルドは必須ではありませんが… いまどきの JavaScript アプリではビルドが重要です。

Page 3: 新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js

最近の JS とビルド構文チェックJSHint, ESLint

altJS コンパイルtsify, coffeeify

ES2015 コンパイルBabel, Babelify

• JavaScript ビルドでは例えばこんなことをします。

依存性解決Browserify

altCSS コンパイルstylify, sassify

テンプレート処理Reactify,Mithrilify,Riotify

圧縮 / 難読化Uglify, minify

UT/ 操作テストKarma, mochify

※ ベースのビルドツールにより名称は異なります。

Page 4: 新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js

そんな中でのお気に入り• Sushi-fy

• キャッチフレーズは

• 圧縮・難読化ツール (Uglify2 の亜種 )

JavaScript を寿司のネタに握り直すツール

https://www.npmjs.com/package/sushify-js

Page 5: 新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js

そんな中でのお気に入り• Sushi-fy

Before After

Page 6: 新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js

そんな中でのお気に入り• Sushi-fy

• これをパクって今回のネタにしました。しかし後発の製品がヒットするためには• より強烈なインパクト• キラーコンテンツ

が必要

Page 7: 新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js

そして…できました。

Page 8: 新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js

jojofy

Page 9: 新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js

ジョ●ョの奇妙な難読化ツール

jojofy

Page 10: 新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js

jojofy の使い方は簡単• インストールnpm install jojofy-js –g

• 実行 (Uglify と一緒 )jojofyjs [source] -m -o [outfile]

Page 11: 新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js

実演

dojo を jojo にかえてみます

Page 12: 新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js
Page 13: 新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js

キラーコンテンツ従来の Uglify2 にはなかった新機能• --dio• --world• --silver• --green• --exactly

Page 14: 新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js

• コードを盗んで楽をしようという輩には dio 様を使います。• --dio の例

Page 15: 新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js

• 逆に先輩などにコードに対する率直な意見を聞きたいときは花京院を使いましょう• --green の例

※ 花京院のスタンド、  ハイエロファント・グリーンに由来

その他、厳選された jojo-AA をご利用いただけます。

Page 16: 新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js

※AA の確認にはプロポーショナルフォント (MS-PGothic など ) が必要です

Page 17: 新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js

効果検証

Page 18: 新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js

実際にやってみてわかりましたが、読む気がなくなる心理的効果があるようです。

難読化

Page 19: 新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js

圧縮効果はあまりありませんでした。(従来比 80 ~ 90%)

圧縮

dojo.js dojo.jojo.js

Page 20: 新ジャンルのJavaScript圧縮難読化に挑戦 ~jojofy-js

JavaScript ビルドに興味のある方• キャッチアップ JavaScript ビルド ~ビルドから見る JS の今 /2016 春いろいろな **fy を浅く広く知ることで JavaScript の今を把握します

http://www.slideshare.net/khit9/javascriptjs2016