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
260
レスポンシブから逆戻り!?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.8k
パッケージ開発者の苦悩 -JavaScriptランタイム群雄割拠- / distress of package developer
shimataro
0
660
An introduction to Node.js
shimataro
0
270
KFDのススメ / About KFD
shimataro
3
780
Node.js v12のES Modules / ES Modules on NodeJS v12
shimataro
1
1.1k
おまいらちゃんとリソース解放してますか / Remember to close resources!
shimataro
2
1.2k
CJSとESMとnpmパッケージ / CommonJS and ES Modules and npm package
shimataro
0
760
BigInt あれこれ / overview about BigInt
shimataro
0
870
dynamic import あれこれ / dynamic import - overview and pitfalls
shimataro
1
800
Other Decks in Technology
See All in Technology
機械学習を「社会実装」するということ 2025年夏版 / Social Implementation of Machine Learning July 2025 Version
moepy_stats
1
630
AWS Well-Architected から考えるオブザーバビリティの勘所 / Considering the Essentials of Observability from AWS Well-Architected
sms_tech
1
850
MCPと認可まわりの話 / mcp_and_authorization
convto
1
150
AI工学特論: MLOps・継続的評価
asei
10
1.6k
室長の逆襲 :データ活用の陣地を増やすためのヒント
masatoshi0205
0
190
Data Engineering Study#30 LT資料
tetsuroito
1
570
CSPヘッダー導入で実現するWebサイトの多層防御:今すぐ試せる設定例と運用知見
llamakko
1
220
M365アカウント侵害時の初動対応
lhazy
7
4.6k
複数のGemini CLIが同時開発する狂気 - Jujutsuが実現するAIエージェント協調の新世界
gunta
12
3.3k
Turn Your Community into a Fundraising Catalyst for Black Philanthropy Month
auctria
PRO
0
140
地図と生成AI
nakasho
0
700
TypeScript 上達の道
ysknsid25
9
1.1k
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Statistics for Hackers
jakevdp
799
220k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Producing Creativity
orderedlist
PRO
346
40k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Site-Speed That Sticks
csswizardry
10
720
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
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