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

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

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. 1. 対応しない デバイスを決め打ち かつてはPC向けサイトしかなかった This page is written in Japanese

    only. 踏み逃げ禁止!キリ番ゲッターは要報告! 今でもやりようによっては使える
  2. 使い方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() をコール
  3. 使い方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"], ]; }));
  4. Q&A

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