Upgrade to Pro — share decks privately, control downloads, hide ads and more …

レスポンシブから逆戻り!?Webサービスのマルチデバイス対応方法 / Multi-Device Support Method for Web Services

shimataro
November 28, 2017

レスポンシブから逆戻り!?Webサービスのマルチデバイス対応方法 / Multi-Device Support Method for Web Services

東京Node学園祭2017の発表資料です
http://nodefest.jp/2017/

shimataro

November 28, 2017
Tweet

More Decks by shimataro

Other Decks in Technology

Transcript

  1. レスポンシブから逆戻り!?WEBサービス
    のマルチデバイス対応方法
    DAY #2 (2017/11/26)
    小田島 太郎 / @shimataro
    東京NODE学園祭2017

    View Slide

  2. 自己紹介
    / /
    /
    ウェブリオ株式会社所属(京都)
    サーバサイドエンジニア
    趣味は手品
    小田島 太郎 [email protected]
    [email protected] [email protected]

    View Slide

  3. この発表について
    対象: マルチデバイス対応に苦労している人
    技術レベル: 初〜中級
    実戦向けの話です
    ↓スライドはこちら↓
    https://speakerdeck.com/shimataro
    https://shimataro.github.io/slides/

    View Slide

  4. それでは始めます

    View Slide

  5. マルチデバイス対応してま
    すか?

    View Slide

  6. 3つの選択肢
    1. 対応しない
    2. デバイスごとに出力を変える
    3. 1つの出力ですべて対応
    歴史とともに説明します。

    View Slide

  7. 1. 対応しない
    デバイスを決め打ち
    かつてはPC向けサイトしかなかった
    This page is written in Japanese only.
    踏み逃げ禁止!キリ番ゲッターは要報告!
    今でもやりようによっては使える

    View Slide

  8. 2. デバイスごとに出力を変える
    UAからデバイスを判別して、異なるHTMLを出力
    判別方法は割愛
    ガラケーの普及に伴い主流に

    View Slide

  9. 3. 1つの出力ですべて対応
    レスポンシブウェブデザイン
    Googleが推奨
    スマホの普及によって注目
    表示はクライアント側で調整

    View Slide

  10. そして今…
    まだレスポンシブデザインで大丈夫?

    View Slide

  11. レスポンシブデザインの問

    ガラケーに対応できない
    出力内容は最大公約数的なものになる
    本格的にやろうとするとメンテナンスは意外と面倒
    Google AMP

    View Slide

  12. GOOGLE AMPについて
    Accelerated Mobile Pages
    HTML/CSS/JSの仕様を制限
    一瞬で表示!
    AMP専用のHTMLが必要

    View Slide

  13. お分かり頂けただろうか
    レスポンシブデザインは万能ではない
    モバイル端末こそ別の出力が必要なときもある
    回帰現象が起きているとでもいうのだろうか

    View Slide

  14. ようやく本題
    同じURLでもリクエストごとにHTMLを変えたい
    Node(Express)ではどうやる?

    View Slide

  15. EXPRESSでのUA別出力方法
    標準では用意されていない
    ビューを res.render() 時に切り替えるのが一般的?
    ページ数×デバイス数のビューが並ぶ
    views
    ├index.pug
    ├index-smartphone.pug
    └index-tablet.pug

    View Slide

  16. やりたいこと
    デバイスごとに階層化
    ソースコードの変更は最小限で!
    views
    ├default
    │└index.pug <- ビューはデバイスディレクトリ内に配置
    ├smartphone
    │└index.pug
    └tablet <- ビューがないデバイスでは規定のビューを表示

    View Slide

  17. ミドルウェア作りました
    https://github.com/shimataro/express-view-switcher
    npm install -S express-view-switcher

    View Slide

  18. 使い方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() をコール

    View Slide

  19. 使い方2: 多言語対応
    app.use(viewSwitcher((req) => {
    // "Accept-Language" ヘッダやクエリストリングなどを解析
    // ※実際の判別ロジックは(ry
    // 1. views/en-us
    // 2. views/en
    // 3. views/ja
    return [["en-us", "en", "ja"]];
    }));

    View Slide

  20. 使い方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"],
    ];
    }));

    View Slide

  21. 導入してみた
    Weblio英会話
    Perl→Node.jsに書き換え
    ※完了したとは言ってない
    ※全ページマルチデバイス対応とは言ってない
    https://eikaiwa.weblio.jp/

    View Slide

  22. まとめ
    デバイスごとに出力を変えなきゃいけない状況はまだま
    だあるよ
    ミドルウェア作ったよ
    多言語対応もできるよ
    手品に興味があったら声をかけてね!

    View Slide

  23. ご清聴ありがとうございました

    View Slide

  24. おまけ
    ここまで見てくれてありがとう( *´艸`)

    View Slide

  25. Q&A

    View Slide

  26. Q: 対応バージョンは?
    A:
    Node.js 4以上
    Express 4以上
    動作中のNodeバージョンに合わせて最適化する素敵
    仕様!

    View Slide

  27. 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;

    View Slide

  28. 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" が設定されるので指定不要

    View Slide

  29. Q. VARY ヘッダを指定したい!
    A: ごめんなさい。まだできてません。

    View Slide

  30. View Slide