読者です 読者をやめる 読者になる 読者になる

モーリーのメモ

プログラミングやCG作成等、アプリ開発を中心に情報を収集中!

はてなブログでPCとスマホで内容を変更する!

 こちらの記事で、Webアプリをはてなブログ内に貼り付けました。
mmorley.hatenablog.com
 ところが問題発生。
 このWebアプリは、Cocos CreatorでWeb Mobile用にビルドしたのでスマホからでも見ることが出来るのですが、問題は表示サイズです。
 このブログの記事の部分の幅は560px(見出しの幅を図りました)なので、アプリの幅を550pxにしていました。
 ここ数年のスマホの画面サイズにも十分収まるので、勝手にこの幅でいけると思っていました。
 
 が、結果全然だめでした。はみ出しまくりです。
 ブログのスマホの表示幅を調べると360pxぐらいらしいです。せまい。
 スマホに合わせるとPCだと小さいしどうしよう。
 
 と思って調べたら、なんとか解決方法が見つかりました。

使用環境

 私が使用している環境です。

  • Mac OS X El Capitan Version 10.11.4
  • Cocos Creator Version 1.0.1
  • ブラウザ:Google Chrome Version 50.0.2661.94 (64-bit)

やり方

 どの端末でブログを見ているか、判別して内容を変更する方法がありました。

使用しているコード

 実際に使用しているコードです。これを記事の中に貼り付けています。

<script>
(function(){
    var _UA = navigator.userAgent;
    if (_UA.indexOf('iPhone') > -1 || _UA.indexOf('iPod') > -1 || _UA.indexOf('Android') > -1) {
        document.write('<div style="width:330px;height:420px;"><div style="width:550px;"><iframe src="http://githubmorley.github.io/cocosprojects-pages/challedun/" frameborder="0" width="550" height="700" style="transform:scale(0.6); transform-origin: left top;"></iframe></div></div>');
    }else{
        document.write('<div style="width:550px;height:700px;"><div style="width:550px;"><iframe src="http://githubmorley.github.io/cocosprojects-pages/challedun/" frameborder="0" width="550" height="700" style="transform:scale(1); transform-origin: left top;"></iframe></div></div>');
    }
})();
</script>

 iPhoneiPodAndroidで見た場合は、『 if (_UA.indexOf('iPhone') > -1 || _UA.indexOf('iPod') > -1 || _UA.indexOf('Android') > -1) {}』の中身が実行がされます。
 それ以外、つまりPCで見ていたら『else{}』の中身が実行されます。
 スマホ向けだと、本来は下記のコードを実行したいので、

<div style="width:330px;height:420px;"><div style="width:550px;"><iframe src="http://githubmorley.github.io/cocosprojects-pages/challedun/" frameborder="0" width="550" height="700" style="transform:scale(0.6); transform-origin: left top;"></iframe></div></div>
</script>

 これをdocument.write('ここ');に書いています。
 PC向けのコードも同様です。
 これでPC、スマホiPhoneiPodAndroid)、それぞれ自分が設定したサイズでWebアプリを表示できるようになりました。

PCとスマホで内容を変更するためのコード

 下記は、最初に書いたコードから、私の個人的なタグを取り払ったものです。

<script>
(function(){
    var _UA = navigator.userAgent;
    if (_UA.indexOf('iPhone') > -1 || _UA.indexOf('iPod') > -1 || _UA.indexOf('Android') > -1) {
        document.write('');
    }else{
        document.write('');
    }
})();
</script>

参考にしたサイト

 下記のサイトを参考にしました。
tamsaaan.hatenablog.com

あとがき

 PCはchromesafarifirefoxから、スマホiPhonesafarichromeから動作を確認しました。
 スマホの端末の判別は細かく分かれているので、対応機種は増やしたほうが良いかもしれません。