boilerplateA-Frame年の瀬ですね。jujunjun110です!VR元年と呼ばれた今年、みなさんはどのような年を過ごされたでしょうか。今回は、一年を振り返る意味も込めて今年の流行語を駆使しながら、開発したA-Frameのコンポーネントをライブラリとして公開する方法について書いていきたいと思います。いうパターンに基づいて作られており、球や立方体など基本的なエンティティに、コンポーネントと呼ばれる「見た目や機能などの振る舞い」を実装した再利用可能なモジュールを付与することでアプリケーションを実装していきます。自作コンポーネントはディベロッパーがライブラリとして公開することができます。aframeというページに公開されていきます。眺めているだけでも楽しいしアイデアが湧いてくるのでおすすめです。先日A-FrameイベントにLT登壇した際、A-Frame開発者のKevinにコンポーネントをぜひ公開してねと言ってもらったので、npmに公開してみました。↓こちらです!www.npmjs.comというわけで、今回はそんな自作コンポーネントの公開方法について書いていきます。打つとパッケージを落としてきてくれるツール。A-Frame開発においては手放すことのできないアモーレですね。詳しい使い方はこちらの記事などをご覧ください。*1環境を整えるまず、開発をはじめる前に環境を整えていきましょう。建築で言ったら盛り土にあたる部分です。公開用Githubリポジトリの作成とクローンまず最初はGithubで公開用のpublicリポジトリを作成して、自分の作業環境にcloneしてきましょう。{remote_path}publicリポジトリであれば無料ユーザーでいくらでも作成できるので、マイナス金利になるほど経済が冷え込む昨今でも安心です。ダウンロード素晴らしいことに、A-Frameのエコシステムでは、コンポーネントを公開するためのとてもよくできた雛形(boilerplate)が用意されています。その名もズバリaframe-component-boilerplate。github.comこのリポジトリ全体をzipでDLし解凍して、中身をさきほど作った自分のgitリポジトリに配置しましょう。初期設定ファイルが配置できたら、公式のREADMEに沿って、プロジェクトに対するnpmの初期設定をしていきます。initここでライブラリのライセンスが入力できるので慎重かつ大胆に決めましょう。今回はMITライセンスにしてみました。installpackage.jsonのdevDependenciesに記述されているモジュールが全てインストールされます。unboil対話形式でコンポーネントの重要な情報を入力します。こんな感じで必要情報を入力すると...こんな感じで、各ファイルの必要情報をいい感じに書き換えてくれます!ポケモンGOでポッポを捕まえるくらい簡単ですね!ここまで完了したところで、プロジェクトの初期状態はこんな感じになっているはずです。以下で詳細に説明していきますが、これらのファイル・ディレクトリは、おおよそ以下の役割を持ちます。以下ライブラリ公開後実際に利用される、ブラウザで実行可能なjsファイルが配置されます。ライブラリのデモを自分の環境で試してみる際のデモページの一式が配置されます。index.jsファイルに配布するモジュールの実装そのものを記述するファイルです。記法(require()など)が使えます。外部nodeモジュールが配置されます。package.jsonnpmの設定を記述するファイルです。言うと、自分でコードを書くのはindex.jsだけでOKなようになっており、用意されている便利コマンドを使うことで、配布用やデモ用のファイル群を自動でビルドすることができます。コンポーネントの実装とデモページの作成さて、ここまで準備ができたら、コンポーネント自体を実装していきましょう。初期状態は以下のようになっています。A-Frameのコンポーネントが持つ、各プロパティとイベントのひな形が書かれています。各イベントに対しての実装は、必ずしもされていなくても問題ないので、必要なイベント部分だけ実装していきましょう。デモ用のjsをビルドする実装がうまくできたら、以下を実行します。いうファイルが新たにできます。なるのか軽く説明していきます。中に、以下のような記載があります。エイリアスになっています。node記法で書かれたjsを、ブラウザで実行できるjsに変換するnodeモジュール。して書き出してくれたというわけですね。ここまでを図にまとめると以下のようになります。すればいいというわけです!実装した内容の確認ビルドができたら、以下のコマンドを打ってみましょう。そこからBasicをクリックして、自分のモジュールが正しく動いているか確認しましょう。examples/basic/index.htmlは自動的にexamples/build.jsを読みこむようになっているので、そのコンポーネントの機能がわかりやすいようなデモを実装しましょう。リソースファイルの置き方などは、すでに公開されているコンポーネント群を聖地巡礼して参考にすると良いと思います。エイリアスが張られています。nodeで簡単にウェブサーバーが立てられるnpmモジュール。--liveオプションがついているので、budoのLiveReload機能により、javascriptファイルが更新されるとブラウザ側でも自動的に更新が行われます。記述ここまでで、自分のライブラリが正しく動いていることが確認できたら、README.mdを記述していきましょう。雛形が用意されているので参考にしながら以下の項目を記述しましょう。distを実行しましょう。すると、以下のように、dist以下に、ブラウザで直接実行可能なjsファイルがビルドされます。dist/aframe-crawling-cursor.min.js"が実行されています。*3npmへのサインアップnpmにモジュールをアップロードするために、まずnpm公式サイトからユーザーを作成します。{username}で現在のプロジェクトに自分のnpmユーザーアカウントを紐付けます。公開ッ!!ここまで完了したら、重大なバグがないことを強く念じながら、以下のコマンドを打ちます。Pageの公開URLひとつで他の人にコンテンツをシェアできるのがWebVRの魅力。公開出来る機能も備わっています。以下のコマンドを打ってみましょう。gh-pagesブランチが作成され、https://{github_username}.github.io/{repository_name}という形式のURLでページにアクセスできるようになります!これまた便利すぎる。公開後の確認さて、npmに公開が完了したら、正しく動くか確認しましょう。試す必要があるのは、以下の2パターンです。dist/以下のパッケージだけを利用するパターン通常利用されるのはこっちのパターンですね。initしたのち、おもむろに以下のコマンドで自分のモジュールがインストールできるか試します。{package_name}わーいインストール成功!普段使ってるnpmコマンドで自作のライブラリを落としてこれるのは結構感動ものです。aframe本体などと一緒に読み込んで、ブラウザで問題なく動くか確認しましょう。書かれているモジュールは読み込まれ、devDependenciesに書かれているモジュールは読み込まれません。実行に不要なモジュールをdependencies書かないように注意しましょう。リポジトリ全体をビルドしてサンプルを使ってみるパターンA-Frameでコンポーネントを探す際には、実際にサンプルシーンを手元でビルドしてみて、パフォーマンスや挙動を確かめることが多々あります。このパターンは、以下の流れで試すことができます。開発者に直接知らせましょう!良いモジュールであれば取り上げてもらえるかもしれません!以上、npmとaframe-component-boilerplateについて一通り説明してみました。あまりに至れり尽くせりで、他のツールにゲス不倫する気も起きないくらい素晴らしいですね。Publisher)です!ん?PPAP????♪PPAP〜♪PPAP〜♪ペンパイナッポーアッポーペン!!!来年もよろしくお願いします!!!!*1:なお筆者はjavascriptの開発環境の複雑さについては全く明るくないので、用語の使い方など不適切なところがあればTwitterなどでご指摘ください。*2:afarme-component-boilerplateの方をcloneしてきてから向き先のgitリポジトリを変更する方法でも問題ないと思います*3:webpackもBrowserifyと同様、node記法で書かれたjsをブラウザで実行可能にするnodeモジュールです。Shaderで美しい日本語テキストを表示する方法こんにちは。家のMacのOSをうっかりSierraに上げた結果、アホほ...2016-10-19Blenderで出力したUVメッシュ付きobjファイルをA-Frameで読み込む方法こんにちは。Vive向けにアプリケーションを開発する〜コントローラでインタラクション編〜最近糖質制限を始めたVR室の@daybysayです。明日はPSVRの発売...お気軽にお問い合わせ下さい!VRコンテンツ開発を検討している紹介されている機材を使ってみたいその他、VRについての質問があるなど、VR開発や記事の内容についてのご相談は、まずは下記の連絡先までお気軽にお問い合わせください。3Dコンテンツ用のシェーダーを書く。techlogはてなブログをはじめよう!voyagegroup_techさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。