2015年3月29日日曜日

HTML5で出力して、ブログに組み込む

久しぶりの投稿です。

遅くなりましたが、先月のUE4　PBR・ワークフロー勉強会に来ていただいた方
どうもありがとうございました。
あんなに大人数の前でお話する機会が初だったので脇汗いっぱいかいてましたが、
東京の皆様のお役に立てたのであれば何よりでございます。

さて、今回は何を思ったのか突然ですが、HTML5での出力に挑戦してみました。


きっかけとしては、ヒストリアさんのサイトでHTML5の出力をブログに組み込んでいるのをみて、
webに簡単に組み込めるのがやりたいと思っていたのと費用がかからないのがいいなと。
（正確にはレンタルサーバー代がかかってしまうので無料ではないですが…）


ちなみにhtmlと聞くとそれなりにwebの知識が必要となりそうですが、
私自分でホームページを組んだのは高校の実習ぐらいのスキルなのでほぼ初心者レベルだと思ってください。


※※予め注意事項※※

UE4のHTML5はまだ試験段階ということで安定しておりません。
主にPCのブラウザでも対応していないと見れないものもありますし、携帯からは見ることができない事を予めご了承ください。


また、今回この投稿にHTML出力した結果を埋め込んでいるため、
300MB近いデータがダウンロードされます。
通信量に制限のある方はご注意ください。



■HTML5に出力するまで

まずはhtml5に出力するところから始めます。
html5に出すまではこちらの記事を参考にさせて頂きました。

◯UE4のHTML5出力でTappyChickenを飛ばすまで

丁寧に手順が書かれているので、初心者の私でも無事に出来ましたので、
これ以上書くことはありません。
housakusleepingさんまじ感謝です！


HTML5で出力が出来た段階でFirefoxで動くか確認しておきます。
ここで動かなかったらwebでも動かないのでｗ

出力されたファイルのhtmlファイルを右クリックし、プログラムから開く>Firefoxをクリックし、
Firefoxで動くか確認します。



■ブログに組み込むまで（１）　レンタルサーバー編

ブログに組み込むのにどうするのか、ここが一番の問題でした。
結論から言うとレンタルサーバーに出力されたファイルをアップし、そのアップしたファイルをブログに組み込むという方法で行っています。


レンタルサーバー周りで行ったことは以下の通り。
  1. レンタルサーバーを契約する
  2. FFFTPをダウンロード
  3. レンタルサーバーとFFFTPを接続する
  4. データのアップロード


1. レンタルサーバーを契約する

今回はXserverというレンタルサーバーを契約しました。
月々1000円以上とお値段が高いのですが、UE4の大きい容量扱えるのと速度が早い、安定しているなどの面から選択。

とはいっても、今回はテストで試用期間の10日間だけ使用する予定なので
試用期限の4/8までしか使いません。
どこかよいレンタルサーバーをご存知の方はオススメしていただけると助かります。。。

（追記）現在はDropboxから開いて見れるようになっています。


2. FFFTPをダウンロード

FFFTPはサーバーにデータをアップするのに使用しました。
こちらは無料で落とせます。

FFFTPを使用しなくてもデータをアップすることはできるとは思いますが、
FFFTP使ったほうが一度に全部のデータをアップできるので楽でした。



3. レンタルサーバーとFFFTPを接続する

接続の設定は『レンタルサーバー　FFFTP　接続』と検索すればいくつか解説ページがヒットします。
参考までにこちら

レンタルサーバーを契約するとメールで接続に必要なものが届きます。
  • 　FTPホスト
  • 　FTPユーザー
  • 　FTPパスワード
これらの情報を元に接続を行ってください。



4. データのアップロード

これはFFFTPの使い方になりますが、接続をするとこのような画面が表示されます。
左側が自分が使用しているPCのフォルダ、右側がレンタルサーバーのFTPのフォルダになっています。

余談ですが、私Dドライブにプログラムファイルやマイドキュメントなどを移動させています。




Webに詳しくないので正しいのかよくわかりませんが、
Webにアップするデータはpublic_htmlに入れるというのであってるのかしら？なんかそうらしいので
今回はpublic_html下にUE4ってフォルダを作ってその中にデータを入れてみました。
フォルダは右クリックから作成出来ます。

UE4から出力したHTMLフォルダをFTPサーバーのUE4フォルダの中にドラッグ＆ドロップすることでデータのアップロードが出来ます。




アップロードが完了するまで待ちます。




■ブログに組み込むまで（２）　ブログに組み込む編


ここまででUE4から出力されたHTML5のデータはwebにアップされている状態になりますので、
ブログに組み込まなくてもアドレスを直接入力することで見ることが出来ます。

アドレスはどこで確認するのかというと、赤枠の部分です。

で、ややこしいですがこの赤枠のアドレスから“public_html”をなくして、
後ろに黄色の名前をつけます。

つまり、ドレスは以下の用になります。

http://sinocof.xsrv.jp/UE4/HTML5/TPS-HTML5-Shipping.html
（http://　はついてなくてもOK)




ブログに組み込む時は投稿形式をHTMLに切り替えて以下の内容を入力します。
赤字のところに先ほど確認したアドレスを入力します。

<iframe height="500" src="http://sinocof.xsrv.jp/UE4/HTML5/TPS-HTML5-Shipping.html" width="700"></iframe><br />


これでブログをアップするとこのようにHTML5がブログに組み込めるわけです。
やったぜ！

今回はテストとして適当なものを出していますが、そのうちちゃんと作ったものを出したいですね～。
一回出せれば後が楽になりますなぁ。

しかし、回線速度が早くないと毎回ダウンロードが結構かかります。
また、UE4のHTML5出力もまだ試験段階ということで安定していないみたいですので、今後のアップデートでもっと使いやすくなることを期待したいですね～。



■操作方法
WASD …　上右前左　移動
十字キー←→　…　カメラの回転
左、右クリック　…　ジャンプ




◯追記1

処理に関してこんなコメントも頂きました。


◯追記2

レンタルサーバーではなく、Dropboxでも使えるのではというお話からDropboxでもできるか試してみました。

結果としてはうまくいきましたが、無料版は規制に注意が必要とのこと。


参考としてはこちら。

◯Dropboxの公開フォルダを使って無料で手軽にWebサイトを公開
http://quartet-communications.com/info/topics/9024

しかし、DropboxのPublicフォルダは有料版か古いアカウントの方しかないとのことでご注意を。

◯Dropboxで廃止されたPublicフォルダ機能を５秒で復活させる方法
http://shikemokumk.blogspot.jp/2012/10/dropboxpublic.html



0 コメント:

コメントを投稿

登録: コメントの投稿 (Atom)