JadeでスマホかタブレットかPCかなどを判定する

- - posted in jade, javascript

Androidアプリの改修をぼちぼちやり始めていますが、ちょっと煮詰まってきたので気分を変えて、先日リリースしたWebサイトでちょっと詰まったところをメモっておきます。

サイトの中で、ユーザーがスマホかPCかで判定をして高さを調整する、というロジックを実装しました。

Bootflat(Bootstrap)は、幅の調整は簡単ですが、高さの調整がちょっと見つからなかったので、生JavaScriptでゴリゴリ書いてしまいました。
もしBootflat(Bootstrap)を使ってスマートにやる方法があったら誰か教えて下さい。。


で、HTMLのテンプレートはJadeを使っているのですが、Jade内でJavaScriptが書けるので、そこに書いちゃえ、ということで下記サイトを参考に(すみません、まるまるコピペです。。)、最初以下のように実装しました。

参考サイト : JavaScriptでスマホかタブレットかその他かを返す

_js/device_info.jade
1
2
3
4
5
6
7
8
9
10
11
script.
  var getDevice = function(){
      var ua = navigator.userAgent;
      if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){
          return 'sp';
      }else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){
          return 'tab';
      }else{
          return 'other';
      }
  }();
index.jade
1
2
3
4
5
6
7
8
9
include _js/device_info

~省略

 - var dh = (getDevice == 'sp') ? 100 : 230;

 h1(style='text-align:center;margin-top:#{dh}px;margin-bottom:#{dh}px;') Technology with your life.

~省略

やりたいことは、スマホの時はマージンを100pxに、それ以外の時は230pxにするという処理です。
getDeviceで判定して、マージンをセットするだけ。
しかし、getDeviceがundefinedになる。


これは大きな勘違いだったのですが、JadeでのJavaScriptの書き方は2通りあります。

example.jade
1
2
script.
  JavaScriptのコード
example.jade
1
- JavaScriptのコ

前者はJavaScriptコードがHTMLファイルに吐き出される。
後者はJadeをコンパイルする時にだけ実行され、HTMLファイルには吐き出されない。
後者はすごく便利なのですが、混在する時は気を付けなければなりません。

結論としては、以下のように実装いたしました。

index.jade
1
2
3
4
5
6
7
8
9
10
11
12
13
14
include _js/device_info

~省略

  script.
    var dh = 0;
    if(getDevice == 'sp'){
      dh = 100;
    }else{
      dh = 230;
    }
    document.write('<h1 style=\'text-align:center;margin-top:' + dh + 'px;margin-bottom:' + dh + 'px;\'>Technology with your life.</h1>');

~省略

document.writeで書き出すあたりがイケてないですが、やむを得ませんでした。
以上です!