東京Node学園祭2017の発表資料です http://nodefest.jp/2017/
レスポンシブから逆戻り!?WEBサービスのマルチデバイス対応方法DAY #2 (2017/11/26)小田島 太郎 / @shimataro東京NODE学園祭2017
View Slide
自己紹介/ //ウェブリオ株式会社所属(京都)サーバサイドエンジニア趣味は手品小田島 太郎 [email protected][email protected] [email protected]
この発表について対象: マルチデバイス対応に苦労している人技術レベル: 初〜中級実戦向けの話です↓スライドはこちら↓https://speakerdeck.com/shimatarohttps://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 PagesHTML/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-switchernpm 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/defaultreturn [["smartphone", "default"]];}));// あとは普通に res.render() をコール
使い方2: 多言語対応app.use(viewSwitcher((req) => {// "Accept-Language" ヘッダやクエリストリングなどを解析// ※実際の判別ロジックは(ry// 1. views/en-us// 2. views/en// 3. views/jareturn [["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/defaultreturn [["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) => {// ※(ryreturn [["smartphone", "default"]];}, "basedir"));// ただし、 "view engine" が "pug" の場合は// 自動的に "basedir" が設定されるので指定不要
Q. VARY ヘッダを指定したい!A: ごめんなさい。まだできてません。