壮HTMLWebGL11ブラウザ上で高度なグラフィックを描画できるWebGL。HTMLには多彩なAPIが備わっています。今回はiPhoneでも動作する3Dの写真ビューアーを作ってみました。本記事では次の4つの技術を中心に解説します。Androidについては手元の環境では動作しませんでした。iPhoneでの動作ビデオ実際にiPhoneで動いているデモは以下の動画です。APIを使用すると、ローカルからファイルをアップロードすることができるようになります。ここでは、input要素を使う方法と、ドラッグアンドドロップを使う方法を紹介します。デモでは、demo.FileUploadクラスで実装しています。input要素を使ってファイルをアップロードinput要素のtype属性でfileを指定すると、このinput要素からファイルをアップロードできるようになります。multiple属性を指定することで、複数ファイルのアップロードにも対応します。event.target.files;}JavaScriptではchangeイベントが発生した時にevent.target.filesを参照します。すると、input要素に指定されたファイルを取得できます。APIを使うと、HTMLの任意の要素にドラッグしたファイルを取り扱うことができます。ドロップを受け付けたい要素でdropイベントを監視し、event.dataTransfer.filesでファイルを取得できます。ブラウザで受け取ったファイルを読み込むStep1でローカルからファイルを受け取ったら、今度はそれらのファイルを読み込んでJavaScript内で使えるようにする必要があります。ファイルの読み取りには、FileReaderクラスを使います。今回は、受け取った画像ファイルを、HTMLImageElementにしてWebGLで処理したいので、HTMLImageElementに変換することを目指して処理を進めていきます。File型のファイルをデータURLとして読み込みfileReader.readAsDataURL(file);ファイルの読み込みが完了した時に発行されるイベントオブジェクトeventから、event.target.resultを参照することで読み込みが完了したデータが取得できます。画像の準備が完了したら、WebGLで描画します。TypeScriptを使用します。基本的な使用方法は弊社池田の記事が参考になりますのでそちらをご参照いただければと思います。JavaScriptでの解説記事ですが、基本的にはTypeScriptでも同じです。デモのWebGLでの描画は、demo.Mainクラスで実装しています。Mainクラスの初期化処理init関数で、Step1、Step2で作成した画像リストを受け取ります。写真のレイアウトについて行っている処理は大きく分けてふたつです。スマートフォンにおける傾きの取得スマートフォンなどデバイスの傾きが取得できる環境においては、以下のコードでデバイスの傾きを取得できます。onRotationChange);デバイスが傾いた時に発行されるDeviceOrientationEventイベントにて、傾きの値としてevent.alpha、event.beta、event.gamma、そしてevent.webkitCompassHeadingを取得できます。この傾きを使い、3D空間に対する視点の移動をします。デモでは、away.controllers.HoverControllerのpanAngleとtiltAngleに適用することで、左右、上下の視点の移動を行います。iOS、Android等傾きが検知できるデバイスでお試しください。それぞれの軸について縦長のスマートフォンをディスプレイを上にして地面に置きます。そのとき、ディスプレイから空に向かって垂直に伸びる軸(Z軸)に対する回転がevent.alpha、ディスプレイの左右にまっすぐ伸びる軸(X軸)に対する回転がevent.beta、ディスプレイの上下にまっすぐ伸びる軸(Y軸)に対する回転がevent.gammaです。各軸の詳細については、W3Cのドラフトに詳しいです。W3Cの仕様によれば、event.betaは-180から180まで、event.gammaは-90から90まで変化するのですが、iOSではevent.betaは-90から90まで、event.gammaは-180から180までの変化となります。event.alphaについては、デバイスを地面向きから空向きに傾けて行く際、途中で180度変わるという挙動があるため、カメラの水平視点移動には使用しませんでした。代わりに、方位を取得するevent.webkitCompassHeadingを使用しました。まとめHTML5で使えるようになった新たな技術を用いれば、デスクトップ、スマートフォンを問わず、ブラウザだけでユーザーにリッチな体験を提供できるようになります。キャンペーンサイトの定番であったカルーセル表示等もWebGLを使えば3D表現にできますし、HTML5の位置情報APIを使えばユーザーの住所入力フォームで入力補助ができます。平成30年7月5日に内容をメンテナンスしています。メディアアートを学ぶ。MEDIA、Qiita他)、Twitterで積極的に情報を発信中。Lynda.comやSchooの講師も務める。MEDIAは株式会社ICSが運営するオウンドメディアです。ICSはインタラクションデザイン専門のプロダクション。最先端のwebテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。問い合わせ採用情報インタラクションコンテンツの制作や新しいことに挑戦しながら、互いにスキルを高め合えるメンバーをICSでは募集しています。詳しくは採用情報をご覧ください。MEDIAは古い記事でもメンテナンスし続けることで、常に役立つ情報発信を目指しています。