Node.js でつくったサイトをスマホ対応させました

先日、Node.js ではじめてWebサービスをつくりました。

とりあえず最低限のリリースを目指したのでPCのみ対応だったのですが、
今回スマホ画面にも対応したのでそのメモです。

できたもの

結婚式の余興.jp | スマートフォンにも対応

スマホで見れる・・・！見れるぞ・・・・！！

まず対応方針を考える

スマホ対応にはいくつかパターンがあります。レスポンシブルデザインにしたり、PCとスマホでURLを分けたりなど。

今回はPCとスマホでURLは同じで、User Agentをみてhtmlとcssを出し分ける方法にしました。
特に深い理由はないですが、SNSバッジなどを考えてURLは共通がいいなと思っていたのと、PCとスマホで別のことに特化する（PCは投稿でスマホは閲覧みたいな）気がしたのであまり共通化する意味はないかなーと思ったためです。

スマホ対応の作業の流れ

こんな感じで進めました。

1. User AgentをみてPCかスマホか判断する
2. PCならindex.ejs、スマホならindex_m.ejsを表示する
3. index_m.ejs に適用する用のCSSファイルをガリガリ書く

それぞれの作業のメモを以下に書いていきます。

スマホ対応の手順

1. User AgentをみてPCかスマホか判断する

PCのみ対応だった時は、テンプレートエンジンは使わずに単純に public/index.html を表示する仕様でした。
今回はアクセス時に出し分けが必要なので、以下のように変更。

app.js (app.js)

// テンプレートエンジンは ejs を用いる
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');

// ルート（wedding.mashroom.in/）にアクセスされた場合、index.jsをcallする
var routes = {
    index:require('./routes/index.js'),
 };
app.get('/', routes.index.index);

次に、ルートアクセスされた場合に呼ばれるindex.jsの中身が以下です。

index.js (routes/index.js)

exports.index = function(req, res){
    //User Agentの取得
    var userAgent = req.headers['user-agent'].toLowerCase();

    // 表示するページ出し分け
    if(ua.indexOf("android") != -1
             || userAgent.indexOf("iphone") != -1
             || userAgent.indexOf("ipod") != -1){
        res.render('index_m', {title: 'スマホ用ページ'});
    }
    else{
        res.render('index', {title:'PC用ページ'});
    }
};

リクエストのヘッダにあるuser-agentを見て、表示ページを出し分けしています。

2. PCならindex.ejs、スマホならindex_m.ejsを表示する

手順1で出し分けまでできたので、実際に表示されるファイルを準備します。

PC用: index.ejs （views/index.ejs）
スマホ用: index_m.ejs （views/index_m.ejs）

拡張子はejsですが、今回テンプレートは使わないので中身は普通のhtmlを書いています。これを配置するだけ。

ここで手順1でapp.jsに書いた記述を振り返ってみます。

// テンプレートエンジンは ejs を用いる
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');

この設定は、res.render('index') とした場合に (__dirname)/views/ + index + .ejs が表示されることを意味しているようです。必要に応じてviewsやview engineを変更すれば良さそうですね。

ここまでで、出し分けは完了しました。

3. index_m.ejs に適用する用のCSSファイルをガリガリ書く

CSSを書き始める前に、スマホ向けの記述を index_m.js に追記します。

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes">

この記述によりスマホでアクセスした場合にフィットして表示されるようになります。

あとはCSSをガリガリ書くだけです。
PCとスマホは画面サイズや比率が大きく異なるので、どのコンテンツを表示すべきか等に注意しながらページを作ります。CSSの記述は以下の本を参考にしました。

HTML5 テクニックバイブル

開発時にブラウザ上でスマホでの見た目を確認するにはChromeデベロッパーツールを使用。下記の記事が分かりやすいです。

あとはデプロイして完成です。

感想

• スマホ向けのCSSは初めて書いたが、コンテンツ間の距離やスクロール量を考慮した配置が重要だなと感じた
• User-Agentによる出し分けは将来新しい端末（iWatchとか）が出たら対応が大変そう
• レスポンシブルデザインで組むには、最初のhtml / cssの設計が非常に重要そう

以上、スマホ対応時にやったことのメモでした。
レスポンシブルデザインもつくってみたいですね！

関連リンク