モーリーのメモ

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

iframeで、はてなブログ内にWebアプリ(外部サイト)を表示する!

 はてなブログの中で、Cocos2d-JSで作成したWebアプリを動かす方法がないかと少し前から方法を調べていたのですが、見つかりました!
 <iframe>タグを使えば、はてなブログ内に外部サイトが表示出来たんですね。
 Webアプリの本体は、『Github Pages』にアップしています。これを<iframe>タグを使ってブログ内で表示します。
 具体的にやってみます。

使用環境

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

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

<iframe>タグの使い方

下記のページをブログ内で表示します。

このページの拡大縮小なしのサイズは(width, height)=(1020px, 720px)です。

そのまま表示するコード

<iframe src="http://githubmorley.github.io/cocosprojects-pages/hellococos13/" width="510" height="370" ></iframe>
  • 『srcに表示したいページのURLを指定します。
  • 『width』と『height』は表示する枠のサイズです。ブログの幅に収まるように表示したいページを縦横半分にしています。

 
 このコードで表示すると次のようになります。
 *ページが重くなるので画像にしています。動きません。
f:id:mmorley:20160418224821p:plain
 中身は枠に合わせて縮小しません。
 Webアプリを作る際にサイズを合わせてやれば良いのかもしれませんが、それだと融通が効きません。
 そこでブログ側で縮小します。

サイズを調整して表示するコード

 使用したコードは下記のサイトを参考にさせて頂きました。
blog.asial.co.jp
 
 *CSS3の『transform』を使用して拡大縮小するので、IE8等古いブラウザだと対応していまないようです。
 下記のコードでは、縦横半分のサイズに縮小して表示しています。

<div style="width:510px;height:370px;"><div style="width:1020px;"><iframe src="http://githubmorley.github.io/cocosprojects-pages/hellococos13/" frameborder="0" width="1020" height="740" style="transform:scale(0.5); transform-origin: left top;"></iframe></div></div>

 タグを改行すると、ブログの表示も改行されるので1行で書いています。

  • 最初の『<div style="width:510px;height:370px;">』には表示する枠のサイズを指定します。
    表示したいページのサイズは(width, height)=(1020px, 720px)で、縦横半分にするのでこのサイズです。
  • 『<div style="width:1020px;">』には表示したいページの幅を指定します。
  • 『style="transform:scale(0.5); transform-origin: left top;">』は、縮尺比と変形の基準となる位置を指定しています。
  • 他は最初のコードと同じです。

 
 今度は実際にブログ内にタグを書いてみます。

 アプリが表示されているでしょうか?上手く表示されていなかったらごめんなさい。
 このアプリはは『CocosCreator』の『HelloWorld』プロジェクトに仮想ジョイパッドを取り付けただけのものです。

  • 左下がジョイスティックで、赤い部分を動かすとラベルが動きます。
  • 右下がボタンで、押すとラベルが最初の位置に戻ります。

 下記の記事で作成したアプリです。
mmorley.hatenablog.com


 ちなみに、GitHubページでWebアプリを公開する方法については、下記の記事で説明しています。ご参考まで。
mmorley.hatenablog.com

あとがき

 Webアプリをブログ内に組み込むと、表示に時間がかかってしまうので、そこは注意したほうが良さそうですね。
 今まで通りのリンクだけの表示と使い分けたいと思います。