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 full-size slide

  2. 自己紹介
    / /
    /
    ウェブリオ株式会社所属(京都)
    サーバサイドエンジニア
    趣味は手品
    小田島 太郎 shimataro@GitHub
    odashima.taro@Facebook shimataro999@Twitter

    View full-size slide

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

    View full-size slide

  4. それでは始めます

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. 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 full-size slide

  27. 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 full-size slide

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

    View full-size slide