モーリーのメモスマートフォン用の表示で見るモーリーのメモアプリ開発等(プログラミング、CG作成)、興味を持ったことを実践してまとめるブログです。Creatorはてなブログの中で、Cocos2d-JSで作成したWebアプリを動かす方法がないかと少し前から方法を調べていたのですが、見つかりました!<iframe>タグを使えば、はてなブログ内に外部サイトが表示出来たんですね。Pages』にアップしています。これを<iframe>タグを使ってブログ内で表示します。私が使用している環境です。下記のページをブログ内で表示します。></iframe>『srcに表示したいページのURLを指定します。『width』と『height』は表示する枠のサイズです。ブログの幅に収まるように表示したいページを縦横半分にしています。このコードで表示すると次のようになります。*ページが重くなるので画像にしています。中身は枠に合わせて縮小しません。Webアプリを作る際にサイズを合わせてやれば良いのかもしれませんが、それだと融通が効きません。そこでブログ側で縮小します。サイズを調整して表示するコード使用したコードは下記のサイトを参考にさせて頂きました。blog.asial.co.jp*CSS3の『transform』を使用して拡大縮小するので、IE8等古いブラウザだと対応していまないようです。下記のコードでは、縦横半分のサイズに縮小して表示しています。top;"></iframe></div></div>タグを改行すると、ブログの表示も改行されるので1行で書いています。style="width:510px;height:370px;">』には表示する枠のサイズを指定します。720px)で、縦横半分にするのでこのサイズです。style="width:1020px;">』には表示したいページの幅を指定します。top;">』は、縮尺比と変形の基準となる位置を指定しています。他は最初のコードと同じです。今度は実際にブログ内にタグを書いてみます。アプリが表示されているでしょうか?上手く表示されていなかったらごめんなさい。このアプリはは『CocosCreator』の『HelloWorld』プロジェクトに仮想ジョイパッドを取り付けただけのものです。左下がジョイスティックで、赤い部分を動かすとラベルが動きます。右下がボタンで、押すとラベルが最初の位置に戻ります。下記の記事で作成したアプリです。mmorley.hatenablog.comちなみに、GitHubページでWebアプリを公開する方法については、下記の記事で説明しています。mmorley.hatenablog.comあとがきWebアプリをブログ内に組み込むと、表示に時間がかかってしまうので、そこは注意したほうが良さそうですね。今まで通りのリンクだけの表示と使い分けたいと思います。省略記法で、効率よく書くためのプラグ...2016-05-08はてなブログでPCとスマホで内容を変更する!こちらの記事で、Webアプリをはてなブログ内に貼り付けました。2を使ってListViewを作成しました。(8)参加グループプログラミングリンクはてなブログブログをはじめる週刊はてなブログはてなブログProはてなブログをはじめよう!mmorleyさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。