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サービスのマルチデバイス対応方法 / Multi-Device...
Search
shimataro
November 28, 2017
Technology
1
240
レスポンシブから逆戻り!?Webサービスのマルチデバイス対応方法 / Multi-Device Support Method for Web Services
東京Node学園祭2017の発表資料です
http://nodefest.jp/2017/
shimataro
November 28, 2017
Tweet
Share
More Decks by shimataro
See All by shimataro
Single Executable Applicationsについて / About Single Executable Applications
shimataro
0
1.6k
パッケージ開発者の苦悩 -JavaScriptランタイム群雄割拠- / distress of package developer
shimataro
0
580
An introduction to Node.js
shimataro
0
240
KFDのススメ / About KFD
shimataro
3
680
Node.js v12のES Modules / ES Modules on NodeJS v12
shimataro
1
1k
おまいらちゃんとリソース解放してますか / Remember to close resources!
shimataro
2
1.1k
CJSとESMとnpmパッケージ / CommonJS and ES Modules and npm package
shimataro
0
670
BigInt あれこれ / overview about BigInt
shimataro
0
760
dynamic import あれこれ / dynamic import - overview and pitfalls
shimataro
1
720
Other Decks in Technology
See All in Technology
[CV勉強会@関東 ECCV2024 読み会] オンラインマッピング x トラッキング MapTracker: Tracking with Strided Memory Fusion for Consistent Vector HD Mapping (Chen+, ECCV24)
abemii
0
220
Python(PYNQ)がテーマのAMD主催のFPGAコンテストに参加してきた
iotengineer22
0
480
安心してください、日本語使えますよ―Ubuntu日本語Remix提供休止に寄せて― 2024-11-17
nobutomurata
1
1k
Application Development WG Intro at AppDeveloperCon
salaboy
0
190
AWS Media Services 最新サービスアップデート 2024
eijikominami
0
200
スクラムチームを立ち上げる〜チーム開発で得られたもの・得られなかったもの〜
ohnoeight
2
350
個人でもIAM Identity Centerを使おう!(アクセス管理編)
ryder472
3
220
【Pycon mini 東海 2024】Google Colaboratoryで試すVLM
kazuhitotakahashi
2
510
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
3.2k
rootlessコンテナのすゝめ - 研究室サーバーでもできる安全なコンテナ管理
kitsuya0828
3
390
複雑なState管理からの脱却
sansantech
PRO
1
150
Flutterによる 効率的なAndroid・iOS・Webアプリケーション開発の事例
recruitengineers
PRO
0
100
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
169
14k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Side Projects
sachag
452
42k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
How STYLIGHT went responsive
nonsquared
95
5.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
Designing Experiences People Love
moore
138
23k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
Transcript
レスポンシブから逆戻り!?WEBサービス のマルチデバイス対応方法 DAY #2 (2017/11/26) 小田島 太郎 / @shimataro 東京NODE学園祭2017
自己紹介 / / / ウェブリオ株式会社所属(京都) サーバサイドエンジニア 趣味は手品 小田島 太郎 shimataro@GitHub
odashima.taro@Facebook shimataro999@Twitter
この発表について 対象: マルチデバイス対応に苦労している人 技術レベル: 初〜中級 実戦向けの話です ↓スライドはこちら↓ https://speakerdeck.com/shimataro https://shimataro.github.io/slides/
それでは始めます
マルチデバイス対応してま すか?
3つの選択肢 1. 対応しない 2. デバイスごとに出力を変える 3. 1つの出力ですべて対応 歴史とともに説明します。
1. 対応しない デバイスを決め打ち かつてはPC向けサイトしかなかった This page is written in Japanese
only. 踏み逃げ禁止!キリ番ゲッターは要報告! 今でもやりようによっては使える
2. デバイスごとに出力を変える UAからデバイスを判別して、異なるHTMLを出力 判別方法は割愛 ガラケーの普及に伴い主流に
3. 1つの出力ですべて対応 レスポンシブウェブデザイン Googleが推奨 スマホの普及によって注目 表示はクライアント側で調整
そして今… まだレスポンシブデザインで大丈夫?
レスポンシブデザインの問 題 ガラケーに対応できない 出力内容は最大公約数的なものになる 本格的にやろうとするとメンテナンスは意外と面倒 Google AMP
GOOGLE AMPについて Accelerated Mobile Pages HTML/CSS/JSの仕様を制限 一瞬で表示! AMP専用のHTMLが必要
お分かり頂けただろうか レスポンシブデザインは万能ではない モバイル端末こそ別の出力が必要なときもある 回帰現象が起きているとでもいうのだろうか
ようやく本題 同じURLでもリクエストごとにHTMLを変えたい Node(Express)ではどうやる?
EXPRESSでのUA別出力方法 標準では用意されていない ビューを res.render() 時に切り替えるのが一般的? ページ数×デバイス数のビューが並ぶ views ├index.pug ├index-smartphone.pug └index-tablet.pug
やりたいこと デバイスごとに階層化 ソースコードの変更は最小限で! views ├default │└index.pug <- ビューはデバイスディレクトリ内に配置 ├smartphone │└index.pug
└tablet <- ビューがないデバイスでは規定のビューを表示
ミドルウェア作りました https://github.com/shimataro/express-view-switcher npm install -S express-view-switcher
使い方1: マルチデバイス対応 import viewSwitcher from "express-view-switcher"; const app = express();
app.use(viewSwitcher((req) => { // "User-Agent" ヘッダを解析して検索したいディレクトリを列挙 // ※実際の判別ロジックはREADME参照 // https://www.npmjs.com/package/express-view-switcher // 最初に見つかったビューを表示 // 1. views/smartphone // 2. views/default return [["smartphone", "default"]]; })); // あとは普通に res.render() をコール
使い方2: 多言語対応 app.use(viewSwitcher((req) => { // "Accept-Language" ヘッダやクエリストリングなどを解析 // ※実際の判別ロジックは(ry
// 1. views/en-us // 2. views/en // 3. views/ja return [["en-us", "en", "ja"]]; }));
使い方3: 多言語+マルチデバイス app.use(viewSwitcher((req) => { // 組み合わせてもOK // ※実際の(ry //
1. views/en-us/smartphone // 2. views/en-us/default // 3. views/en/smartphone // 4. views/en/default // 5. views/ja/smartphone // 6. views/ja/default return [ ["en-us", "en", "ja"], ["smartphone", "default"], ]; }));
導入してみた Weblio英会話 Perl→Node.jsに書き換え ※完了したとは言ってない ※全ページマルチデバイス対応とは言ってない https://eikaiwa.weblio.jp/
まとめ デバイスごとに出力を変えなきゃいけない状況はまだま だあるよ ミドルウェア作ったよ 多言語対応もできるよ 手品に興味があったら声をかけてね!
ご清聴ありがとうございました
おまけ ここまで見てくれてありがとう( *´艸`)
Q&A
Q: 対応バージョンは? A: Node.js 4以上 Express 4以上 動作中のNodeバージョンに合わせて最適化する素敵 仕様!
Q: REQUIRE できないよ! A: // NG: これだと使えない const viewSwitcher =
require("express-view-switcher"); // OK: 時代はES6!babelで変換しよう import viewSwitcher from "express-view-switcher"; // OK: 宗教上の理由でrequireしか使えない方はこちら const viewSwitcher = require("express-view-switcher").default;
Q: ベースディレクトリを指定したい! A: // 第二引数を指定すると、実際に使われたディレクトリが // res.locals オブジェクトのkey/valueとして追加される。 // includeやextendのベースディレクトリを指定する際に使える。
// 例: res.locals.basedir = "views/smartphone" app.use(viewSwitcher((req) => { // ※(ry return [["smartphone", "default"]]; }, "basedir")); // ただし、 "view engine" が "pug" の場合は // 自動的に "basedir" が設定されるので指定不要
Q. VARY ヘッダを指定したい! A: ごめんなさい。まだできてません。
None