paiza開発日誌paiza開発日誌IT/Webエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。ITエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。プログラミングTweetどうも、まさとらん(@0310lan)です!今回は、PC・スマホのブラウザ上でVR体験ができるWebアプリを簡単に開発可能なWebサービスをご紹介します。コード不要でブラウザ上から誰でも手軽に開発できるように設計されており、ブロック化されたさまざまな機能を「線」でつなげていくだけで開発できます。■「Patches」とは?「Patches」は、ビジュアルプログラミングをベースにしており、さまざまな機能を「パッチ」と呼ばれるブロック同士をつなげていくことでVR開発を実現しているのが特徴です。マルチメディアや3Dモデルなど...VR開発に必要な機能がすべて含まれています。WebVRの特徴としてPC・スマホに搭載されているブラウザだけでVRを楽しめるというのも大きな魅力の1つでしょう。そのため、VR用のHMDデバイスを持っていなくても疑似体験が可能で、URLをシェアするだけですぐに世界中の人が楽しめるので便利です。「Patches」を利用すると、例えば以下のような360度写真にボタンを追加してポップアップを表示するのも簡単です!【ポップアップ付き360度写真の例】(コチラのリンクから実際に体験できます)もちろん、3Dモデルを読み込んで仮想空間に没入することもできます。以下の例はポイントをタッチすることで、VR空間内をさまざまな視点で閲覧できるようにした例です。【仮想空間内を移動する例】(コチラのリンクから実際に体験できます)3Dモデルをアニメーションさせることも可能で、以下の例はロケットをタッチすると上空に飛んでいきます。「リセットボタン」をタッチすると元に戻るという例です。【ロケット発射の例】(コチラのリンクから実際に体験できます)他にも、音源を再生したりゲームのようなインタラクティブなアプリを開発したりなど、アイデア次第で可能性は無限大と言えるでしょう。up」ボタンをクリックして無料のユーザー登録を済ませましょう。「ユーザー名」「メールアドレス」「パスワード」を設定するだけで、すぐに登録が完了します。すると、VR開発ができる「製作エディタ」が表示されます!あとは、この画面上でインタラクティブなオブジェクトの設置や「パッチ」をつなげてロジックを組み立てていくだけで自由にVR開発ができます!また、同時に自分専用のマイページも作成されており、作品をポートフォリオのように公開することも可能です。■インタラクティブな360度写真を作ってみよう!ここからは、「Pathces」を使って実際に簡単な作品を作りながら基本的な使い方を見ていきましょう。そこで、冒頭で紹介したような360度写真の中に「ポップアップ」を表示させるインタラクティブなVRアプリを作りたいと思います。最初にエディタの使い方ですが、キーボードの「タブ」キーを押すたびに「Buildモード」と「Programモード」が切り替えられることを覚えておきましょう。「Buildモード」は3Dモデルなどのオブジェクトを空間内に配置するモードで、「Programモード」がパッチをつなげて基本的なロジックを組み立てるモードになります。画面左側にあるメニューはすべての「パッチ」が選択できるようにカテゴライズされており、ここから必要な機能を持ったパッチをドラッグして使うことになります。画面下にある「VR視点モード」に切り替えると、ブラウザで表示された時にどのように見えるかを確認することができます。「Buildモード」では、マウスをドラッグすると画面の視点を変更でき、右クリックで並行移動などができます。基本的な操作としてはこのくらいなので、誰でもすぐに扱えるようになるはずです!それでは「360度写真」を表示させてみましょう。最初に、デフォルトで表示されている左側のパッチをすべて削除します。画面が「真っ黒」になりますが問題ありません。次に、画面左側の「パッチメニュー」にある検索窓から「360」と入力します。photo」というパッチが見つかるのでクリック(ドラッグでも可)しましょう!このパッチの端をマウスでドラッグしながら「Scene1」というパッチの「0番」と接続します。これだけで、360度写真が背景に合成されます。「VR視点モード」に切り替えて、マウスでグリグリ動かしながらどのように動作するのかチェックしてみましょう。当然ですが、自分で撮影した「360度写真」を利用することも可能です。その場合は「Texture」パッチのアイコンをクリックすることで、写真をアップロードすることができます。■「ポップアップ表示」を組み込んでみよう!今度は、360度写真の中にポップアップを表示できる機能を組み込んでみましょう。パッチメニューから、「HOTSPOTS」→「Hotspot」というパッチをクリックします。先ほどと同じように「Hotspot」パッチを1番に接続します。パッチの「編集アイコン」をクリックしましょう。すると、「Hotspot」パッチの中に別のロジックが組み立てられているのが分かります。見ると複雑そうな感じですが、変更するのは左側にある「Pop-up-card」と書かれたパッチだけです。このパッチは、ポップアップ表示される画像を指定する機能になります。編集アイコンをクリックして自分の好きな画像を選んでみましょう。!今回は、サンプルなので以下のような画像にしました。画像の設定が終わったら、「Buildモード」に切り替えてオブジェクトの位置を中心に近づけておきましょう。中心に近いほど、VR視点になった時に近くで見ることができます。■作品を公開してみよう!ある程度、作品ができたら「公開」をしてみましょう。方法は簡単で、画面上にある「Publish(書き出し)」ボタンをクリックするだけです。「作品名」を入力して「Public(公開)」か「Private(非公開)」を選択したら、「Publish」ボタンをクリックして完了です!今回のサンプルは以下のような感じで動作します!また、公開用のURLをシェアしたり「埋め込みコード」を利用してブログやサイトに貼り付けることも可能なのでぜひ試してみてください。■3Dモデルをアニメーションさせる!「Patches」には、数多くの3Dモデルがあらかじめ用意されているので、これを使ってアニメーションを作成してみましょう!パッチメニューから「OBJECTS:ANIMALS」→「Eagle」を選択して鷹の3Dモデルを表示してみます。(他にも、キャラクター・街並み・ビル・家具など多数の3Dモデルがあります...)「Eagle」のパッチを4番に接続します。「Buildモード」に切り替えると、見事に3Dモデルが表示されていますね!このモデルはすでに羽を動かすアニメーションが搭載されているのですが、指でタッチすると大空に飛んでいくアニメーションを追加してみたいと思います。そこで、「球体」をタッチするとアニメーションが実行されるようにしたいので、「Sphere」を追加しておきます。Animation」というパッチが用意されているので検索して選択しましょう。Vector」パッチも追加して、それぞれを接続していきます。今回は「Y方向」「Z方向」だけを接続し、最後に「position」の箇所へ接続すればOKです!オプションとして、「Min」「Max」パッチが用意されているので「Max」の値を変更して3Dモデルが飛び上がる高さを大きくしておきます。最後に、球体をタッチしたらアニメーションが実行されるようにしたいので、「Sphere」モデルを指定しておきましょう!あとは、「Publish」ボタンをクリックして公開すると以下のようになります!「球体」をタッチすると大空へ飛び上がるアニメーションが実行されるのが分かりますね。このように、簡単なアニメーションを作成できるパッチが数多く用意されているので、上手く組み合わせることで自由自在に3Dモデルを動かすことが可能です。ちなみに、3Dモデルは別のソフトウェアで作成したものを読み込むことも出来るし、Googleが公開している「Poly」から好きなモデルを利用することも可能なので便利ですよ!■「Ruby入門」が今だけ無料!動画でプログラミングが学べるpaizaラーニング動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。ただいま、2/26(月)までの期間限定で「Ruby入門編」を全編無料公開しております。「Python入門編」「C#入門編」「JavaScript入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。■まとめ今回は、WebVRアプリを簡単に開発できる「Patches」について駆け足でご紹介しました!VR空間に音源を追加したり、パーティクルエンジンを利用したエフェクトや移動モーションを追加するなど、まだまだ紹介できていない機能がたくさんありますが今回ご紹介した基本的な機能だけでも十分に楽しめると思います。みなさんもオリジナルのVRアプリを開発して友人・知人とシェアして遊んでみてください!<参考>「Patches」公式サイト「Patches」公式チュートリアルブログ「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。記事内に記載している情報は、記事公開時点でのものとなります。reserved.引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。