【Wedding×IT】(ぱーと1)お返しAR～Glitchの使い方編～

～シリーズ情報～

はじめに
必要なもの
いざ実践
1. サンプルコード
おわりに
1. 関連

はじめに

Wedding ITとは

エンジニアの夫婦が結婚式をすると．．オープニングムービーではUE5を使ったフルCG プロフィールムービーではプロジェクションマッピング余興ではメイキングムービーなど，IT技術を駆使したコンテンツが目白押しになります．このようにWedding（結婚式）とIT技術を駆使したものを「Wedding IT」と呼んでみます．これらのやり方を紹介したいのは山々なんですが，まずは「お返し」に関してIT技術を駆使したものを作成しようと思います．

今回は，お返しの封筒にARマーカーを付与してみたいので，試しにGlitchの使い方を学んでいきます．

ちなみに無料で実践できます．

Glitchとは

Glitchはコーディングの共有とコラボレーションを促進するブラウザベースの開発環境です。その特徴としては、ユーザーが自分自身のアプリケーションを作成し、編集し、そして共有することができるという点にあります。

Glitchの特徴

Glitchは、リアルタイムのコラボレーションとコードの再利用を可能にすることで、誰でも簡単にウェブアプリケーションを作成することができます。また、ライブプレビュー機能があり、コードの変更をリアルタイムに確認することができます。

Glitchでできること

Glitchでは、ウェブサイトの作成からゲーム開発まで、様々な種類のプロジェクトを作成することが可能です。また、他のユーザーとコードを共有したり、他のユーザーのプロジェクトをリミックスしたりすることもできます。

A-Frameとは

A-Frameは、ウェブブラウザで動作するオープンソースの仮想現実（VR）フレームワークです。これにより、HTMLのような簡単なマークアップ言語を使って3DとVRの体験を作成することができます。

A-Frameの特徴

A-Frameの主な特徴は、その使いやすさと柔軟性にあります。HTMLと同様のシンタックスを使用するため、初心者でも簡単に3DとVRの体験を作成することができます。また、A-Frameはエンティティ・コンポーネント・システム（ECS）アーキテクチャを使用しており、これにより高度なカスタマイズと拡張性が可能になります。

A-Frameでできること

A-Frameを使用すれば、ウェブサイトでの3Dアニメーションから、完全な仮想現実体験まで、様々なことが可能になります。また、A-Frameはモバイルデバイスやデスクトップ、さらにはVRヘッドセットでも動作します。

GlitchとA-Frameを合わせて使うメリット

GlitchとA-Frameを合わせて使うことで、あなたは独自の仮想現実体験を作り出すことができます。そのプロセスは簡単で、かつ多くのメリットがあります。

独自の仮想現実体験の作成

GlitchとA-Frameを組み合わせることで、自分だけのVR体験を手軽に作成することができます。HTMLのようなマークアップ言語で3Dの体験を記述し、Glitchでそれを編集・共有することが可能です。

コードの共有とコラボレーション

Glitchのコード共有機能を使えば、A-Frameで作成したVR体験を簡単に他の人と共有することができます。また、チームで作業する場合、リアルタイムでコードの編集を行うことが可能になります。

低コストでのVR体験

この組み合わせにより、高価なハードウェアやソフトウェアを必要とせずにVR体験を作成することが可能になります。これにより、誰でも手軽にVRの世界を体験することが可能になります。

必要なもの

ARアプリ開発に欠かせないGlitchとA-Frameとは何か？

こんにちは、今日は二つの非常に魅力的で革新的なツール、Glitch とA-Frame についてお話しします。これらは新世代の開発者たちがクリエイティブなプロジェクトを手軽に始められるプラットフォームで、かつてないほど簡単に仮想現実の世界を作り出すことができます。

いざ実践

サンプルコード

こちらのサイトにサンプルコードがあります．

Aframe

Base for creating virtual reality experiences on the Web using A-Frame. #aframevr #webvr

<html>
  <head>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

こちらのRemix your ownを押すことで，自身の[Glitch](https://glitch.com/)のアカウントにコピーされます．