最近は Googleのクラウドサービス、Google Cloud Platform をいろいろ試しています。そして前回から Google App Engineでウェブサイトを無料で作ってみる紹介をしています。今回はその続きとなります。

Google App Engineでウェブサイトを無料で作ってみた Part.1

実質無料でウェブサイトができてしまうなんて素晴らしいですよね!通常のプロバイダを利用するよりコスト削減ができてしまう。
GCP_72

今回、通常の Web画面に続いて、最後には WebVRを置いてみてスマホから WebVRを試すなんてことまで紹介しています。

【作業概要 Part.1&Part.2】

 Part.1:

  Google Cloud Platformの利用登録
  プロジェクトの作成
  Google Cloud SDKのイントール
  フォルダの準備
  app.yamlファイルを作成
  index.htmlファイルの作成

 Part.2:

  App Engineにデプロイ
  表示テスト
  Web VRを表示
  もう少し手の込んだWebVR


【App Engineにデプロイ】

Google Cloud SDKの「Cloud Tools for PowerShell」か「Google Cloud SDK Shell」を立ち上げます。
GCP_31

「cd」コマンドで先ほど作成したルートディレクトリ(ここではプロジェクトIDのフォルダ)に移動します。

そして、「gcloud app deploy」コマンドでApp Engineにデプロイをします。
その際、以下の様に各種情報が表示されますので確認して、「Do you want to continue (Y/n)?」に対して「Y」を入力。デプロイが開始されます。
GCP_73


【表示テスト】

Google Cloudの App Engineにデプロイされた Hello Worldの表示テストをしてみます。

コマンドプロンプトから実行するのであれば、「gcloud app browse」を実行
または、直接WebブラウザからURLとして「https://[YOUR_PROJECT_ID].appspot.com」を入力しても確認することができます。
GCP_74

うまく表示できました。


【Web VRを表示】

少し Google Cloud Platformネタとは異なりますが、以前 A-Frameを利用して WebVRを簡単に作る説明記事を書きました。

【A-Frameで簡単にWebVRを実現】

これを今回の Google Cloud Platform上において試してみましょう。ここでは、index.htmlファイルから A-Frameを組み込んだ HTMLファイルにリンクする形にしておきます。
GCP_75

WebVR側は以前の説明記事のものをそのまま利用です。
GCP_76

ファイルはwwwフォルダに置いてしまいます。
GCP_77

先ほど説明した方法でデプロイを行います。そして実行。
GCP_78

リンクをクリックするとうまく WebVRが動きました!これが無料でアップできてしまうわけですね。
GCP_79


【もう少し手の込んだWebVR】

以前の WebVRの説明で作成した、もう少し手の込んだ WebVRも試してみましょう。これも基本的には中身は以前と同じです。
GCP_80

表示するための画像や3Dモデルファイルがあるので、それらを以下の様に配置
GCP_81

そして、先ほどと同じようにデプロイを行います。そして実行。リンクをクリックしてWebVRのページを表示すると画像や3Dモデルもうまく表示されています。
GCP_82

もちろんスマホからもうまく表示されています。
GCP_83

WebVRなので WebVRの機能も試します。当然うまく行ってます。
GCP_72


どうでしょう。無料でウェブサイトができてしまい、WebVRなんかも置くことができました。
上記しましたが、Google Cloud Platformのドキュメントにも無料でウェブサイトができますと書いてあり、これはぜひ使ってみるべきではないでしょうか。


Sponsored Link