構想
技術書典18で頒布予定の「Babylon.jsレシピ集 vol.6」のネタとして、ずっと構想してました。ただ、kintoneのJavaScriptカスタマイズはしたことがなく、どんな感じになるのかわからなかったため、ChatGPTと相談しながら構想を練っていました。
結果、ビューにCanvas要素を埋め込み、そこに描画する流れを提案してくれて納得でした（GPTくん、優秀）。
実装
ここもChatGPTにコード全体を考えてもらいましたが、なかなかうまく行きませんでしたので、切り分けとして下記ステップで実装していきました。
ステップ① GLBファイルのPlaygroundへの表示
Babylon.jsのPlaygroundへGLBファイルを表示するだけのコードです。GLBファイルは、Github PagesにアップすることでWebからアクセスできるようにしました。
Github Pagesの設定の仕方もわからなかったので、GPT君に確認しながらの作業で、無事に完了しました。
👉 ま、これぐらいは当然できますわなｗ
ステップ② kintone上にBOXメッシュを表示
GLBファイルはBabylon.jsで表示できるのは確認取れたので、次はkintone上でBabylon.jsが動くのかの確認。
これも無事に動きました。
ステップ③ kintone上にGLBファイルの表示
ステップ①＋ステップ②の状態ですね。
こちらも、無事に表示できました。
この状態は、kintone上に登録されたファイルを見ているのではなく、無条件にRX-78を表示しているだけでした💦
とりあえず、ここまではそれほど苦労なくこれました。
※ホントは、もっと躓いたところがあるのですが、そのあたりはレシピ集の方で。
ステップ④ kintone上に登録されたGLBファイルを表示
ここが一番苦労しました。
何が苦労したかと言えば、"KintoneRestAPIClient" を利用するためのライブラリのインポート方法。
やり方としては、2パターンあるんですが、自分はめんどくさがりなので、CDN形式を採用したのですが…GPT君の最新情報では、上記ライブラリがver1.2.0ぐらいで止まっていて、それがどこ探してもない！
実態は、ver5.6.0まで進んでたという…笑
ここの苦労話もレシピ集の方で書きます。
動きました
ぐりんぐりんに動きます（笑）
これで、レシピ集の執筆に入れますｗ
ちなみに、サイボウズの青野さんにも、いいね押してもらえました👍
ということで、GPT君を相棒してコードを全面的に生成してもらいました。生成してもらったコードは、ちゃんと自分なりには理解しています！
あと、ちゃんとリファレンスマニュアルも見て、使い方違うじゃん！とGPTに教えたり、ライブラリの最新版情報を教えたりと、案外、持ちつ持たれつの関係でした笑
最後に
コードや説明、苦労話などは5月31日から始まる技術書典18のBabaylonjs勉強会から頒布される「Babylon.jsレシピ集 vol.6」に書かせてもらいますので、お楽しみに～(^^)/