この記事は、「Babylon.js Advent Calendar 2023」の 11日目の記事です。
今回の内容
この記事では、以下の X のポストで書いている「技術雑誌で Babylon.js 6.0 の紹介記事を書いた話」に関する内容（もう少し補足すると、依頼をもらった流れから、記事の内容を決めて原稿案を完成させた流れについて）を書いています。
それと合わせて、スペースの都合で誌面にはのせてなかった内容を、いくつかこちらで書こうと思います。
Babylon.js 6.0 の新機能に関する公式動画
技術雑誌の記事で扱った「Babylon.js 6.0 の新機能」に関して、公式の動画が出ているので、本編に入っていく前に紹介しておこうと思います。
Babylon.js 6.0 の新機能について、映像で見てみたいという方は、こちらを見てみるのをお勧めします。
技術雑誌で記事を書くことになった経緯
今年、技術雑誌で Babylon.js の記事を書くことになった経緯と、執筆着手までの流れを書いてみます。時系列順に書くと以下のとおりです。
- 出版社の中で「Babylon.js 6.0」の紹介（レビュー）記事の企画が上がり、その執筆者候補で自分の名前が挙がったらしい
- 出版社の方から依頼の連絡を受領
- 企画の要件について、自分から出版社側にいくつか確認（主に、自分が書けそうなレベル感の内容を想定されているかや、自分が想定する読者イメージがあっているか、ページ数・〆切など）
- こちらの想定はおおよそ合っていて、そして〆切までの時間については 2週間しかないという返信（＋ カラー印刷のページなので、内容に関して、カラー誌面を活かした写真を入れて欲しいという要望も）
- こちらが想定するおおよその内容の方向性を返信して、出来上がりイメージがずれないように進めつつ、〆切まで残り 9日くらいというタイミングから執筆開始
依頼をもらった時、他の自分よりも詳しそうな方を紹介する方向も考えましたが、〆切までの期間が短めで、そしてその期間内での調整や情報共有（原稿案の作成方法の要件などを伝えたり）を進めることを考えると、受けとっていただけた側の方の時間がなくなりそうだったので、自分が進める方向で検討できそうかを確認していくことにしました。
依頼をもらった方とのつながり
依頼をもらった出版社さんとのつながりについて、簡単に補足します。過去に、依頼元の出版社さんとはやりとりをしていて、お世話になっていた出版社さんでした。
Babylon.js の記事を書いた技術雑誌について、過去にも、コミュニティ経由でのつながりで Node-RED に関する単発の記事を書く機会をもらって記事を書いたことがあったり、その後には依頼をいただいて Teachable Machine に関する連載記事を書いたことなどもありました（その連載の話に関する続きの流れでは、Teachable Machine の本を出版したりもしました）。
記事執筆を進めた流れ
構成や内容の意識合わせ・確認
上で書いたとおり、依頼をいただいた時点で〆切までが2週間ほどとなっていました。
平日の仕事がある中での平日の残業後の時間と、土日の予定が空いているときの時間から、自分が確保できそうなおおよその時間を考えて、その時間の中でできそうな範囲をイメージしていきました。
幸い、Babylon.js はこれまでも触ったことはあったライブラリで、Babylon.js 6.0 に関しては情報収集は行っていたので、新機能まわりの概要はつかめていました。そして、新機能関連の情報をまとめていく際に参照すべき Webページなどは、自分用にメモしていたものが手元にある状態でした。
参照先として考えていたページの一部
自分用のメモの中に書き留めていた、Babylon.js 6.0関連の記事の内容はこのような感じです（一部のみ抜粋）。
- Announcing Babylon.js 6.0. Our mission is to build one of the most… | by Babylon.js | Medium
- 3DグラフィックスライブラリBabylon.js 6.0リリース、物理演算ミドルウェアHavokを新たに搭載 | gihyo.jp
- 20230401_Babylon.jsMeetup_Vol.2.pdf - Speaker Deck
公式の情報をベースにしつつ、あわせて日本語で書かれた情報を見ていた感じでした。
具体的な方向性の中身をすりあわせていく
上で書いたように情報は追いかけていたものの、一方で新機能を触ってはいない状況でした。また締め切りまでに確保できる時間を考慮すると、新機能を使ってデモ的なものを記事用に新規開発する時間はない状況でした。
そのような中、想定される読者を考えてみると、JavaScript・描画ライブラリにはあまり触れてない方も多そうに思えたためため（※ 雑誌がメインで扱っているトピックとの方向性は、少し違っていると想定されるため）、まずは公式の情報をメインに知ってもらう形が良さそうだとも思いました。
それであれば、自分が持っている情報と確保できそうな時間の中で、記事を完成させられそうです。
その考えをベースにして、あらためて方向性を文章化し、ある程度は具体的な内容説明をまじえた項目案作ってみてから、その内容を出版社側の内部で確認してもらいました。その後、自分が想定している内容で問題ないという返信をもらい、具体的な記事作成を進めました。
記事に掲載する新機能の選定
次に、具体的な記事の内容を決めるにあたり、記事でとりあげる新機能の絞り込みを行いました。
その背景として、技術雑誌でのページ数が 3ページほどで、なおかつ誌面用のフォーマットになると、文章と図以外にも誌面用の余白などが入ってくるため、実質 3ページ分の 8割ほどの分量におさまるよう、文章量と図の数を調整する必要がありました（※ 過去、同じ雑誌で最初に記事を書いた時、3ページ分ほぼぴったりの文章と図を原稿案として用意したら、誌面用フォーマットになった時のページ数が 4ページ分になり、誌面側のページ増の調整の手間を発生させてしまった経験があったり...）。
選定の方向性
上に書いた出版社側とのやりとりで、カラー誌面なのでそれが活きる写真を入れる、という内容があったので、それらを考慮しつつ内容を考えていくと、「カラー写真が活きる新機能を 2つか 3つほどとりあげる」「新機能全体の話も書くが、箇条書きベースのコンパクトな内容にする」という感じがよさそうでした。
新機能のお試しをする
文章量を考えるのと合わせて、掲載する画像の内容・数をどうするか、具体化する必要がありました。
それで、公式ページの写真やデモコンテンツを見つつ、公式ページのどの部分を見てもらうのが良さそうかということや、デモコンテンツを自分で動かしてみて、例えば動きがあるものについてはどういった瞬間を画像に切り出すのがよいかなどを、手を動かしつつ考えていきました。
以下は、その作業を進めたいた中でポストしたものです。
選定した内容について
そういった作業を進めて、最終的には以下を画像付きで紹介することにしました。
- 「Fluid Rendering（流体のレンダリング）」
- 「Screen Space Reflections v2（反射の描画）」
- 街中のシーンでの反射の描画
- 光沢のあるオブジェクトでの反射の描画
それと、Babylon.js 公式ページの一部を画像でのせました。
自分が出した原稿案では上記のとおりだったのですが、その後の出版社側から受領した初稿（原稿案を誌面用のフォーマットにされたもの）では、画像の追加が行われ、最終的には「Havok Physics」の画像なども掲載した形となりました。
物理演算エンジンの「Havok Physics」
最終版で画像の追加が行われた、物理演算エンジンの「Havok Physics」について、今回のアップデートの目玉の一つとなっていたものでした。ここで少し紹介ができればと思い、情報としてリンクをいくつか掲載してみます。
●The Playroom（ブラウザ上で操作をしながら体験できる公式のページ）
https://theplayroom.babylonjs.com/
●Using Havok and the Havok Plugin | Babylon.js Documentation（ドキュメント）
https://doc.babylonjs.com/features/featuresDeepDive/physics/havokPlugin
●Babylon.jsのHavokエンジンの基本的な使い方 - CrossRoad
https://www.crossroad-tech.com/entry/babylonjs-havok-basic-usage
●Havok - Babylon.js Tips集
https://scrapbox.io/babylonjs/Havok
ざっくりと紹介したもの
その他、スペースの都合で画像や詳細な解説は省略しましたが、以下の内容などもテキストベースで軽く紹介しました。
- 性能優先モード（後方互換性・性能が異なる3つのモードの切り替え）
- GUIエディタ v1（正式版リリース）
- Babylon.js連携ができるFigma用プラグイン
そして、スペースの都合で、「マテリアル・テクスチャ関連の新機能」「新しいglTFエクステンションへの対応」などは、さらに簡易な記載となりました。
せっかくなので、上記の誌面ではほとんど説明などを書けていなかったものに関し、以下でいくつか紹介してみようと思います。
Babylon.js Gui Editor
まずは Babylon.js Gui Editor をピックアップしてみます。
アクセス先の URL と、そのページにアクセスした時の画面を掲載してみます。
●Babylon.js Gui Editor
https://gui.babylonjs.com/
この Babylon.js Gui Editor では、以下の公式動画のワンシーンに出てくるような、「例えば 3Dモデルをコントロールするためのスライダーなどのパーツのセット」を、GUI上で作成できるようです。
↓こちらが、上記の画面キャプチャをしている元動画になります。この動画を飛ばし飛ばし見てみると、概要がつかめそうです。
↓公式ドキュメントはこちらです。
●The GUI Editor | Babylon.js Documentation
https://doc.babylonjs.com/toolsAndResources/guiEditor
Babylon.js関連の Figmaプラグイン
もう1つ、Babylon.js関連の Figmaプラグインをとりあげてみます。
以下のページが、Babylon.js公式の「Community Extensions」のページです。
●Community Extensions | Babylon.js Documentation
https://doc.babylonjs.com/communityExtensions
ここに新たに以下の Figmaプラグインが追加されました。これを使うと、Babylon.js用の GUI を Figma で作成できるようです。
●Figma to BabylonJS | Babylon.js Documentation
https://doc.babylonjs.com/communityExtensions/figmaToBabylonJS
上記の Babylon.js の説明ページをたどっていくと、以下の Figma公式のページへのリンクや、説明などが書かれていました。
●Figma to BabylonJS | Figma Community
https://www.figma.com/community/plugin/1186201881571137432/figma-to-babylonjs
以下に Babylon.js の公式動画も掲載しておきます。
おわりに
今回、技術雑誌で Babylon.js 6.0 に関する記事を書くために行ったことを書いてみました。
自分が今年行った Babylon.js に関する振り返りの 1つみたいな内容でしたが、Babylon.js を使って試した内容といった方向の記事も別に直近で書ければと思います。
※ Babylon.js Advent Calendar 2023の 11日目以外に、17日目にもエントリーしているので、それに向けて書かねばという状況
余談
今回のような、雑誌の一部に記事を書いたという場合も、Amazon の著者ページに掲載できるという話を過去に聞いたことがありました。
手続き的には、Amazon側に自分が書いたという証明の画像や説明（雑誌の目次・自分の名前が出ている記事の冒頭部分の写真や、記事を寄稿したという説明など）を、所定の送信フォームから送る形です（※ 事前に写真を用意していれば、数分ほどで終わるくらいの作業量）。
その手続きをして、上記の雑誌の件も自分の Amazon の著者ページに追加してもらいました。