まだまだ開発途上で、qiitaの記事にしようかものすごく悩んだのだが、せっかくなので放出する。
Grimoire.jsは普段のWeb開発のようにWebGLが扱えるようにしていくためにありとあらゆる試行をしている。
その中の一つがGrimoire.js Inspectorだ。
Webエンジニアのほとんどは、CSSやjavascriptを変更しては、実際の画面を確認して直したり、その際に何がおかしいか確認する際にインスペクタの力を借りることだろう。
Grimoire.jsはこの<canvas>という一つのWebの機能の一部を、他のWebの部品にできる限り近い形で利用するために、今回はChromeの拡張機能としてGrimoire.js inspectorなるものを作成した。
実際に使ってみる
まだChromeのマーケットプレースに出していないため、少し面倒な手順を経る必要があるが、誰でも利用できる。
gitでクローン
適当なフォルダを作り、gitでクローンする。レポジトリのページからダウンロードしてくるのも良いだろう。
git clone git@github.com:GrimoireGL/grimoirejs-inspector.git .
chromeの拡張機能developerモードを有効にして、インストール
Chromeの拡張機能ページ(chrome://extensions/)にアクセスして、開発者モードを有効にする。
Load Unpacked extensionで先ほどダウンロードしたフォルダを選ぶ。
できました。
せっかくですので、Grimoire.jsのトップページを見てみましょう。
タグを選択すると、そのタグについているコンポーネントや属性の詳細が見れます。実際に変更したつもりのオブジェクトの属性が変更されているか、ノードが本当にインスタンス化されているかなどはわかりやすいことでしょう。
まだまだ、ほとんどの属性は読み取り専用、監視しているオブジェクトのプロパティが頻繁に変わる場合は、非常に重いのですが、今後開発していい感じになってきたらChromeの拡張機能のマーケットプレースに出したいと考えています。
Grimoire.jsの開発に必須のツールになることでしょう。
コントリビューター募集
このインスペクタのGUIを作るのが僕のスキルセットでは非常に辛いです。
Vue.jsを用いて主に開発されているこのインスペクタですが、Grimoire.jsの各種コンバーターなどに拡張可能なように対応したり、色々と手が回らないけど必要な機能がいくつもあります。
もし、片手間にでも協力していただける方や、御指南等いただける方がいらっしゃいましたら、ぜひ、Grimoire.jsのコミュニティへ。