船の軌跡のアニメを作る

ニコバル諸島とスマトラ島の間を通過したコンテナ船は、マラッカ海峡の入口付近で漂流モードに入ったようです。船首があさっての方向を向き、速度が極端に落ちています。

マラッカ海峡は、年間12万隻以上の船舶が通航する世界で最も混雑している海峡だそうで、狭い海峡に入る手前のやや広いところでシンガポール港がレディになるまで待機するのでしょう。待つしかないですね。

さて私は、こんな感じの船の位置のトラッキングには、MarineTrafficというアプリ（Web版はhttps://www.marinetraffic.com）を使っています。どんなことができるかというと、船名で検索した船について、

・今、船がどこにいるのかを画面で確認できる、

・過去一定期間の軌跡データを表示できる、

という機能が無償で利用できます（地上から位置捕捉できる範囲）。

しかしながら、船の航路軌跡をデータとして取得して、それを後から分析したり再生するような機能は無償版では利用できません。有料会員になるとどうやらできるようなんですけどね。

まあ私は輸入業者ではないですし、そこまでして航路軌跡を分析する必要はそもそもないわけです。それでスピットファイアが早く届くようになるわけではないですしね。でも、せっかく「過去一定期間の軌跡データを表示」する機能があるんだったら、どんな軌跡だったのか経路を見たくなるじゃないですか。

と言うことで、無償版で取得できる範囲の情報を使って船の軌跡を再生するようなことを生成AIを使ってやってみました。

まず、ある時点で過去一定期間の軌跡データが、どういう感じで表示されるかというと、こんな感じです。

日時と緯度・経度が羅列されて表示されます。でも、過去3日分しか表示されませんし、画面に表示されるだけでデータとして落とすことはできません。その場限りで直近の情報を見るだけを想定した機能ということでしょう。

そうなんですが、気が向いたときに画面のスクリーンショットを撮っていたのですよね。後から使えないかぁと漠然と考えて。でも、そこからデータを拾うなんてことは面倒な話でやりたくはないわけです。

なので、多数のスクショからデータを拾うところも含めて、航路の軌跡を描くことをGeminiにお願いしてやってもらってみました。

具体的には、こんな感じでお願いしました。

画像ファイルとして与えた9枚のスクショはあっさりと解析され、こんな感じでデータが整理されてきました。

提供されたすべての画像から抽出したデータを時系列に整理し、重複を除いた結果を以下に示します。

[

("2025-05-26 09:26 UTC", -33.4970, 30.2747),

("2025-05-26 22:10 UTC", -32.0076, 34.3121),

("2025-05-27 10:06 UTC", -31.3937, 37.3514),

("2025-05-27 20:45 UTC", -30.8485, 39.1818),

("2025-05-28 09:05 UTC", -30.0334, 41.3000),

("2025-05-28 20:42 UTC", -29.3005, 43.2013),

("2025-05-30 08:54 UTC", -26.7583, 49.2647),

("2025-05-30 20:30 UTC", -25.9463, 51.0139),

("2025-05-31 07:43 UTC", -25.0373, 52.9340),

("2025-05-31 19:57 UTC", -24.0000, 55.0085),

("2025-06-01 06:50 UTC", -22.9667, 56.9808),

("2025-06-01 19:43 UTC", -21.7425, 59.2248),

("2025-06-02 07:28 UTC", -20.6267, 61.2525),

("2025-06-02 19:47 UTC", -19.4986, 63.1604),

("2025-06-03 06:40 UTC", -18.5901, 64.6757),

("2025-06-03 18:50 UTC", -17.5917, 66.3627),

("2025-06-04 04:24 UTC", -16.8166, 67.6200),

("2025-06-04 18:59 UTC", -15.6318, 69.5208),

("2025-06-05 06:15 UTC", -14.6500, 71.0450),

("2025-06-05 17:20 UTC", -13.6700, 72.5683),

("2025-06-06 17:32 UTC", -11.4087, 75.9694),

("2025-06-07 17:52 UTC", -8.5836, 79.5791),

("2025-06-08 17:19 UTC", -5.4098, 82.8219),

("2025-06-09 00:53 UTC", -4.3917, 83.8840),

("2025-06-09 06:09 UTC", -3.7463, 84.5417),

("2025-06-10 12:25 UTC", 0.0598, 88.4283),

("2025-06-10 15:03 UTC", 0.3914, 88.7562),

("2025-06-10 17:40 UTC", 0.7183, 89.1050),

("2025-06-10 20:55 UTC", 1.1700, 89.6865),

("2025-06-11 02:05 UTC", 1.8653, 90.2810),

("2025-06-11 04:34 UTC", 2.1694, 90.9780),

("2025-06-11 08:21 UTC", 2.6186, 91.0600),

("2025-06-11 18:03 UTC", 3.8967, 92.3436),

("2025-06-12 05:33 UTC", 5.0334, 93.8483),

("2025-06-12 17:04 UTC", 6.5304, 95.3257)

]

(2)についても、あっさりと、

(2) そのデータを世界地図にプロットする方法

Pythonとfoliumライブラリを使用するのが、インタラクティブな地図を作成する上で簡単でおすすめです。foliumはLeaflet.jsをPythonから利用できるようにしたもので、地図上にマーカー、線、ポップアップなどを簡単にプロットできます。

と言ってきます。

言われるがまま、

$ pip install folium

としてfoliumなるライブラリをインストールして、秒未満で作ってきたpythonコードをplot_track.pyという名前を付けて保存して実行しました。

どうやら、pythonでJavaScriptで書かれたHTMLファイルを生成する作戦のようです。

pythonはわかるんですが、JavaScriptはさっぱり知りません。まあ中身がわからなくても問題はないので、生成されたHTMLファイルをブラウザにドラッグ＆ドロップしてみると‥‥‥さっくり航路が表示されました。こんな感じです。

おぉぉ、ちゃんと軌跡が描けていますね。ここまでにかかった時間は、たぶん1分くらいです。この手のシンプルなお題ならば、生成AIはめっちゃ得意ですね。なお、生成されたコードの中身はまったく見ていませんし、見る必要もありません。

さらには、(3)の提案も最初の投げ掛けだけであっさり答えてきました。

(3) もしも可能ならば、(2)で作った軌跡の上を船が通るアニメーションを作成したいです。

folium単体では複雑なアニメーション（パスに沿って動くマーカーなど）は直接サポートしていませんが、JavaScriptを組み合わせることで可能です。しかし、これはPythonのみで完結する簡単な方法とは言えません。

より簡単な方法として、foliumとfolium.plugins.TimestampedGeoJsonを組み合わせることで、時間軸に沿ったデータの表示をアニメーション風にすることができます。これは、時間経過とともにデータポイントが表示されたり消えたりするような機能で、船が航路を「進む」ように見せることはできますが、厳密な「船のアイコンが移動する」アニメーションではありません。

本格的な船のアニメーションを作るには、JavaScript（Leaflet.jsのプラグインなど）や、より専門的なGISツール（QGISのアニメーション機能など）を利用する必要があります。

ここでは、folium.plugins.TimestampedGeoJson を使用した「アニメーション風」の表示方法を提案します。

とのことです。

こちらは、「時間経過とともにデータポイントが表示されたり消えたりする」pythonのみで完結すると言ってきた方法は、ちょっと問題があってうまくいかなかったのですが、最初に言ってきたpythonで処理したあとにJavaScriptそのものを書く組み合わせの方法はうまくいきました。

とは言っても、最初はバグが出たりして動かなかったのですが、生成したコードや実行時のエラーメッセージをそのままGeminiに渡して、全部Geminiにデバッグしてもらいました。エラーメッセージの出し方なんかも全部教えてくれます。JavaScriptはわからないので(というか読む気がないので)、右から左へ丸投げです。

それを5回くらいやりとりして、ちゃんと船のアイコンが動くアニメーションが動くようになりました。でも最初は、不均一な時間間隔で取得した位置データのままで、単に次の地点へ移動するだけのアニメーションになってしまっていました。せっかくある日時データがうまく使えていなくて、不自然な動きになってしまっていたのです。

で、各ポイント間の時間も考慮して、船が一定の速度で移動するように補間処理を加える修正をさらにしてもらって、できたアニメーションがこちらです。

おぉぉ、ちゃんと最初に思っていた通りのものができました。ここまではちょっとデバッグであれこれあったので、20分くらいかかったかなと思います。

日々どんどん賢くなっていく生成AIは、こんな感じでいろいろな使い方ができます。定番の画像を加工してもらうとかも面白いですが、比較的複雑な処理を伴うプログラミングが必要なようなことも、スキルがなくてもサクッと作ってくれますよ。

ブログ一覧 | 日記

コメント (2)