RumiCarのトップページで動いている「ゆっくり流れる写真の帯」の仕組みを、PhotoStrip という名前のオープンソースソフトウェアとして公開しました。活動を写真で紹介したいコミュニティ・サークル・学校・団体はもちろん、企業の製品・サービスへの組み込みなど営利目的を含めて、どなたでも・どんな用途にも自由にお使いいただけます(MITライセンス)。このロジックを土台に新しい機能やサービスが生まれるなら、それも公開の目的にかなうことだと考えています。
GitHub: RumiCar-group/RumiCar-PhotoStrip(解説は日英両方あります)
解決したかった問題
活動写真をループ表示で見せたいとき、素朴に作ると「たくさんの写真を一気に送ってしまう」実装になりがちです。私たちの場合、265枚の写真を並べた最初の実装は、実測で転送27MB・表示まで4秒かかりました。5秒で立ち去る訪問者のスマートフォンにも、同じ27MBが送られてしまいます。
かといって表示枚数を絞ると、今度は数分で同じ写真が再登場します。ページの文章を読みながら視界の隅で帯を眺めていた人ほど「あれ、さっきの写真だ。この団体、実はあまり活動していないのかな」と感じてしまう——見せたいはずの活動量を、ループが過小に見せてしまうのです。
どう解決したか
PhotoStripは、写真を「画面に流れ込む直前」に1枚ずつダウンロードします。10秒だけ眺めた訪問者の通信は数百KB。長く見てくれた訪問者には、その時間に応じて少しずつ流れます。見なかった写真のデータを、誰にも払わせません。そして写真のプール全体が一巡するまで同じ写真は再登場しないので、長く見るほど「次々に違う活動」が現れます。
同じ265枚での実測値は、初回888KB・表示0.5秒。視聴中の追加通信はおよそ9秒に小さな画像1枚です。
教材としても読めるREADMEにしました
RumiCarシミュレータと同じ方針で、READMEは仕様の羅列ではなく開発の思考過程を残しています。検討した4つの選択肢とそれぞれを捨てた理由、そして計測して初めて分かった落とし穴——例えば「横に流れるレイアウトではブラウザの遅延読み込み(loading=lazy)が効かず全画像が読み込まれる」「画像に寸法(width/height)を付け忘れると先読みが暴走して112枚を一気に取得する」など、私たちが実際に踏んだ罠を数値つきで書いてあります。同じものを作る方の近道になれば幸いです。
依存ライブラリはゼロ、JSファイル1つとCSSファイル1つをページに読み込むだけで動きます。WordPressでなくても使えます。また、サイトの保守が年に数回という方のために、環境別のレシピ(FTPだけの静的HTML/PHPが動くレンタルサーバー/WordPressミニプラグイン)と、写真フォルダから必要な一式を自動生成する変換ツールも同梱しました。実際に動いている様子はこのサイトのトップページの「RumiCarのある風景」でご覧いただけます。
この開発はAI(Claude)が人間の監督・承認のもとで行いました。質問・提案はGitHubのIssueで日本語・英語どちらでも歓迎です。