Women Techmakers Story Map の開発秘話
Google Cloud Japan Team
※この投稿は米国時間 2024 年 3 月 10 日に、Google Maps blog に投稿されたものの抄訳です。
編集者注: 本日の投稿では、Lazer Technologies のソフトウェア エンジニアであり、Women Techmakers メンバーの Maren Sigson 氏と、Laetro のクリエイティブ ディレクターである Michael Elkeslassy 氏にさまざまな質問をし、答えていただいた様子を紹介します。Women Techmakers アンバサダーのストーリーを称えるために、没入型のマップ エクスペリエンスを生み出した方法をお話していただきます。
Women Techmakers（WTM）は、テクノロジー業界の女性がコミュニティを見つけ、個々のブランドを拡大し、リソースを発掘するための Google のプログラムです。Women Techmakers は毎年、イベントの主催、スピーチ、コンテンツの作成に加え、テクノロジー業界で活躍する女性のメンターとしての活動に携わることでコミュニティの促進に重要な役割を果たすプログラムのアンバサダーになってくれる人を探してスカウトしています。これらのアンバサダーの素晴らしいストーリーを称えるために、WTM は Google Maps Platform を使用して没入型のインタラクティブなウェブ エクスペリエンスである Women Techmakers Story Map を開発し、リリースしました。
このエクスペリエンスの開発に至ったきかっけや開発の裏話について、Michael Elkeslassy 氏（クリエイティブ ディレクター）と Maren Sigson 氏（リード デベロッパー、WTM メンバー）に詳しくお話を伺いました。
なぜ Women Techmakers はこれらのストーリーを伝える手段として地図を選んだのでしょうか。
Elkeslassy 氏: 約 20 年前に Google Maps API が登場して以来、開発者は地図に対するユーザーの考え方の枠を押し広げるための取り組みを率先して行ってきました。地図の使い方は大きく進化し、もはや単なる道案内のツールではなく、コンテンツハブとして機能しています。そして今、Google Maps Platform の新しい API と機能を使用することで、そこからさらに進んで、没入型のストーリーテリングを可能にするマップ エクスペリエンスを作成できます。
没入型のエクスペリエンスは、まさに Women Techmakers チームが探し求めていたことでした。チームはアンバサダーの素晴らしいストーリーを余すことなく集め続けていたので、地図上にただアンバサダーの所在地を示すだけでなく、ユーザーをアンバサダーの世界観やストーリーに引き込みたいと考えていました。
開発にはどのように取り組みましたか。
Sigson 氏: Women Techmakers のメンバーとして、同じ分野で働く他の女性の経験を紹介するプロジェクトの立ち上げに携われたことは本当に素晴らしいことでした。アンバサダーのストーリーはどれも本当に貴重なものばかりです。ユーザーが没入型の方法でそれらのストーリーにアクセスできるようにすることで、現在および将来の Women Techmakers メンバーがテクノロジー業界でうまくやっていく方法を学ぶのに役立ててもらえるでしょう。
Michael と私は Google チームと緊密に連携して、ユーザーをこれらのストーリーに引き込むにはどうすれば一番良いかを、ストーリーボードに描きました。この過程は、開発作業であると同時に、まるで映画を作っているように感じられました。
リリース時点では厳選したアンバサダーのストーリーを紹介し、その後もさらに多くのストーリーを追加していけるような作りにしたいと考えました。まず、呼び物にするコンテンツの種類に基づいて、どのような機能が最も役立つかを見極めました。
Elkeslassy 氏: 重要な課題の一つは、すべてのコンテンツを 1 か所で提供する方法を見つけることでした。動画であれ地理空間であれ、多くの場合、コンテンツの種類ごとに個別のエクスペリエンスが必要になります。私たちは、動画と文章の両方の形式でストーリーを特集できるコンテンツハブとして、「Story Map」のコンセプトを考案しました。また、各アンバサダーが Women Techmakers にとって特に役立つだろうと考えるリソースも紹介したいと考えていました。物理的な場所もあればデジタルな場所もあるため、それらを解決する設計も必要でした。
Sigson 氏: このようなリソースは非常に重要です。その分野の専門家が提供する重要なヒントのリストのようなものだからです。紹介されている機関や組織の情報はまさに、私がソフトウェア エンジニアリングを始めたときに知りたかった情報ですし、今でも興味深いです。
このプロジェクトの進行に不可欠なプログラミング言語、フレームワーク、ライブラリは何でしたか。
Sigson 氏: 私たちは Google のテクノロジーを最大限に活用しました。Story Map は Google Cloud でホストされています。Google Maps Platform からは、Maps JavaScript API、Places API、MapTiles API の Photorealistic 3D Maps、そして Maps JavaScript API 内のストリート ビュー サービスを使用しました。地球儀、ポリゴン、カメラの動きに Cesium も使用しました。Google の API ドキュメントでは、Cesium を最大限に活用する方法について役立つ情報が数多く提供されています。
お気に入りの言語は何ですか。
Sigson 氏: JavaScript です。現在 JavaScript ではさまざまなことができます。JavaScript に触れたことがない場合は、コーディングのレパートリーに JavaScript を加えることを強くおすすめします。フロントエンドおよびバックエンドのソリューションに加え、地理空間ソリューションも構築できます。Story Map では主に JavaScript を使用してすべての機能を連携させました。
Story Map を構築する際、どのような課題に遭遇しましたか。
Elkeslassy 氏: 当初の最大の課題の一つは、ストーリーのさまざまな側面を効果的に取り上げる方法を見つけることに加え、何を取り上げないかを決定することでした。今や地図には多くの情報を含めることができ、地図はまさにストーリーテリングのためのメディアとなっています。何を除外するかは、何を含めるかと同じくらい重要です。
たとえば、WTM のアンバサダーは、自分の地域の Women Techmakers コミュニティを主導して熱心に支援するのと同時に、他の地域のリソースも推奨しています。私たちは、地域のリソースを紹介するだけでなく、場所の概念のないオンライン リソースへのリンクも共有できるようにしたいと考えました。
Sigson 氏: 3D タイルの適用は非常に簡単でしたが、Cesium を使用したことがなかったので、コツをつかむまでに少し時間がかかりました。とはいえ、数回試してみた後は、3D Tiles API と組み合わせて快適に使用できるようになりました。JavaScript に関する十分な知識があったので、これらのツールセットをすべて活用することができました。
たとえば、3D タイルの周りを回るエフェクトの場合、最後のフレームからの経過時間と、建物を基準としたカメラの移動経路上の位置に基づいて、新しいカメラの位置を算出する必要があります。リファクタリングを行い、Cesium がデータセットをどのように扱うかを理解するには、少し時間がかかりました。
3D の視点とカメラの動きを扱うことは、映画制作に少し似ていました。私たちは「人々を呼び込む」方法や、地図内に表示する視点について話し合いを重ねました。Michael が述べたように、地図を使用すると、視点を変え、さまざまな方法でコンテンツを表示できます。ユーザーが Story Map を操作する際に、関連するコンテンツを表示する方法を設計することは、大仕事でした。大量のコンテンツでユーザーを圧倒しないように、ユーザーが物理空間とデジタル空間の両方を体験しながら、それぞれの情報に一つずつ触れていき、また、前後にも移動しやすくしたいと考えました。
開発にはどのくらい時間がかかりましたか。もっと時間があれば取り組みたかったことはありますか。
Sigson 氏: 開発には約 2 週間かかり、その後 QA を行いました。あっという間でした。もちろん、いつももっと時間が欲しいとは思っていますが、Google Maps Platform のドキュメントとアプローチは非常に使いやすいです。視点の動作が設計と一致していることを確認するためのテストを何回か繰り返しましたが、開発者は私だけだったにもかかわらず、作業はスピーディーに進みました。
Elkeslassy 氏: 設計には約 6 週間かかりました。提供したいリソースを正確に見極めたら、すぐに案がまとまりました。納得のいくイラストを仕上げるのには、かなりの時間を費やしました。イラストレーターの Genevieve St. Charles 氏と入念に検討して、シンプルでありながらエレガントで魅力的な方法でアンバサダーを表現するスタイルを生み出しました。実際、設計を何回か繰り返した後で Story Map のアイデアを思いつき、それからはすべてがうまく運びました。
開発過程ではどのような教訓を学びましたか。
Elkeslassy 氏: 地図にとらわれずに考えることです。私たちは地図を使ってさまざまなもの作成でき、さまざまな方法で地図の概念を変えることができます。もはや「地図に持ち込むことができる体験」を考えることはなく、「地図は体験そのもの」と考えることができます。想像できるでしょうか。今や地図は、動画や音声に加え、VR や AR といった新しい世界を組み合わせるパレットのように使うことができるのです。
Sigson 氏: また、開発者は設計のかなり早い段階から参加できると思います。地図はパレットのようであるという Michael の意見にまったく同感です。API でできることを把握していれば、開発者はクリエイティブ プロセスの手引きをすることもできますし、コンテンツを公開してユーザーを引き付けるための新しくて素晴らしい方法を考案することができます。
Google Maps Platform で開発している開発者にアドバイスをお願いします。
Sigson 氏: 地理空間に関する API やプラットフォームの経験が少なくても、恐れる必要はありません。学習には少し時間がかかりますが、一度習得してしまえばとても楽しく、さまざまな方法で API を適用できます。私たちはすでに、新しい機能を実現することを考えています。タイルレンダラに Cesium を使用して、Photorealistic 3D Map Tiles を試してみることをおすすめします。現実世界を 3D 表現で扱えることは本当に魅力的です。ドキュメントに沿って操作すれば、すべてをシームレスに連動させることができ、とても利便性に優れています。
また、もしあなたがテクノロジー業界に携わる女性なら、ぜひ Women Techmakers コミュニティに参加してください。Women Techmakers のメンバーとして、私がこのプロジェクトで最も良かったと思うことは、さまざまなアンバサダーの貴重なストーリーを聞くことができ、この有益なコミュニティの力強さとサポートをユーザーに感じてもらえるエクスペリエンスを作成できたことです。
-Lazer、ソフトウェア エンジニア Maren Sigson 氏
-Laetro、クリエイティブ ディレクター Michael Elkeslassy 氏
