※この記事にはアフィリエイト広告が含まれています。
カメラの前で動くと、顔や体がぐにゃっと伸びたり、同じ人が一枚の中に何度も現れたりする。そんな少し変わった写真を作れるWebアプリを公開しました。
名前は「タイムスキャンカメラ」です。
ブラウザで公開ページを開き、カメラの利用を許可すると遊べます。パソコンだけでなく、スマートフォンからも使えるようにしました。
カメラ映像と完成画像は、このWebアプリの処理として端末内で扱い、サーバーへ送信しません。端末やOS、ブラウザによっては、表示や保存方法が異なる場合があります。
この記事では、何がきっかけで作り始めたのか、AIとどのように相談しながら形にしたのか、そして普通の写真とは違う一枚を作るために工夫したことを紹介します。
SNSで見かけた表現を、自分でも作ってみたかった
きっかけは、SNSで見かけた動画でした。
画面を横切る線に合わせて映像が少しずつ固定され、動いた部分が不思議な形で残っていく。その表現を見て、「これをWebアプリでできないかな」と思いました。
ただ、最初はブラウザからWebカメラをどこまで使えるのか、よく分かっていませんでした。
調べながら作ってみると、現在のブラウザには、利用者の許可を得てカメラ映像を扱う仕組みがあります。画像を組み立てる処理もブラウザの中でできるため、普通のWebページと同じように、URLを開いて遊べる形にできました。
アプリをインストールしなくても、スマートフォンやパソコンで試せる。この形まで持ってこられたことは、作っていて特によかったところです。
スマホのブラウザですぐ遊べるアプリになった
使い方はシンプルです。
撮影時間、スキャンする方向、画質などを選び、撮影ボタンを押します。線が画面を移動している間にカメラの前で動くと、その動きが時間差のある一枚として残ります。
撮影時間は3秒、5秒、10秒。スキャン方向は上下左右に斜めを加えた8方向から選べます。
同じ動きをしても、線が進む方向を変えるだけで違った形になります。短い時間で素早く動いてみたり、10秒かけてゆっくり位置を変えてみたりと、設定によって遊び方も変わります。
完成するまで結果が完全には分からないところも、このアプリの面白さです。狙った画像を作るというより、試してみたら思いがけない一枚ができた、という楽しみ方が合っています。
画面も、スマートフォンとパソコンのどちらでも使いやすいように調整しました。パソコンでは設定をカメラ映像の左側に置き、画面が狭いスマートフォンではカメラ映像の下に並べています。
撮影ボタンと状態の説明は、映像を見る流れの中で分かりやすい位置へ動かしました。機能を増やすだけでなく、実際に触ったときに迷わないよう、配置についても考えました。
AIと相談しながら形を整えた
今回は、技術的な構成や実装方法の多くをAIに提案してもらいました。
私が最初に持っていたのは、「SNSで見たような時間差の表現を、ブラウザで遊べるようにしたい」というアイデアです。そこから、カメラ映像をどう取り込み、どうやって一枚の画像にするかをAIと相談しました。
ViteやTypeScript、Canvasといった技術の組み合わせも、AIからの提案が中心です。実装やテストも手伝ってもらいながら、私は実際に動かして、遊び方や操作の分かりやすさを確認しました。
たとえば、撮影ボタンをどこに置くか、状態を説明する文章をどこに表示するか、スマートフォンでは設定をどう並べるか。こうした部分は、画面を見ながら少しずつ調整しています。
すべてを一度にAIへ任せて完成したというより、作りたいものを伝え、提案された形を触って確かめ、気になるところを直していく。その繰り返しで作ったアプリです。
きれいな画像にするための試行錯誤
タイムスキャンカメラは、動画をそのまま保存しているわけではありません。
カメラ映像から細い帯を取り出し、スキャン線が進むのに合わせて一枚の画像へ順番に描き込んでいます。最初に通過した場所には少し前の映像が残り、最後に通過した場所には後の映像が残ります。その時間差が、独特な形を作ります。
仕組みだけを見ると単純そうですが、細い帯のつなぎ方によっては、完成画像に縞模様が見えることがありました。
そこで、上下左右のスキャンでは中途半端な位置に半透明の帯が重ならないよう、整数ピクセル単位で映像を写すようにしました。斜め方向では、逆に帯と帯の間へ隙間ができないよう、ほんの少しだけ重ねています。
仕上げには「スムーズ」と「シャープ」の2種類があります。スムーズでは画像全体をぼかすのではなく、時間の違う映像が接する部分だけを控えめになじませます。大きく加工するのではなく、タイムスキャンらしい変形を残したまま、細い縞を目立ちにくくするための調整です。
このように、カメラ映像を少しずつ切り取り、一枚の画像へ組み立てるために使っているのが、ブラウザのCanvasという機能です。
アプリを形にした技術
ここまでは、カメラ映像から一枚の画像を作る仕組みの話でした。ここからは、このアプリを形にするために使った技術について、少しだけ紹介します。
今回は小さな一画面のアプリだったため、ReactのようなUIライブラリは使いませんでした。必要なものを増やしすぎず、このアプリに合う範囲で組み合わせています。
作りながら確認するためのVite
Viteは、制作中のアプリをブラウザですぐに確認し、最後に公開用のファイルへまとめる役割を担当しました。
間違いを見つけやすくするTypeScript
TypeScriptは、コードを書いている途中で間違いを見つけやすくする仕組みです。カメラや画像の処理が増えても、変更した部分の確認を進めやすくなります。
必要なものを管理するYarn
Yarnは、制作に必要なパッケージと、そのバージョンを管理します。
開発を始めたときは、YarnのPlug'n'Play（PnP）という方式を使っていました。しかし、Viteを動かしたときにPnPに関する非推奨警告が出たため、途中から一般的な node_modules 方式へ変更しました。
ここで変えたのは、パッケージを置く方式です。Yarn自体をやめたわけではありません。特定の方式にこだわるより、組み合わせたときに無理なく動く方法を選びました。
Webアプリとして公開して分かったこと
公開先には、以前ブログを作り直したときに契約したConoHa WINGを使いました。そのとき実験・開発用として用意した chrono-lab.tech で、このアプリを公開しています。
サーバーやドメインを決めた経緯については、最初の記事「GCPからConoHa WINGへ、AIと一緒にWordPressブログを作り直した記録」で紹介しています。
完成したアプリは、Viteで公開用のファイルにまとめ、ConoHa WINGのサーバーへ配置しました。
公開用に作られるのは、HTMLやCSS、JavaScriptなどの静的なファイルです。今回は、生成したファイルをConoHa WINGへ手動でアップロードしました。
カメラを扱う機能は、基本的にHTTPSで安全に配信されたページから利用する必要があります。公開先でSSLを有効にし、実際のURLからカメラを起動できるところまで確認しました。
公開前には、スキャンの進み方や8方向の描画、画像サイズ、カメラの許可拒否、撮影後の保存とやり直しなど、32ケースの自動テストを行いました。あわせて、TypeScriptの型検査と本番用ビルドも実行しています。
ただし、これはブラウザやカメラを模擬したテストです。実際の映り方や操作感については、公開画面をパソコンとスマートフォンから開いて確認しました。
ブラウザでカメラが使えることは知識として理解できても、実際に自分のスマートフォンで公開URLを開き、そのまま遊べたときには、きちんとWebアプリになったと実感できました。
今回は手動で公開しましたが、更新するたびに同じ作業をするのは少し手間です。次はアプリの機能だけでなく、更新した内容をもっと簡単に公開できる仕組みも作ってみたいと思っています。
「こんなものをブラウザで作れないかな？」というところから始まりましたが、AIと相談しながら、スマートフォンでも気軽に遊べるところまで形にできました。
どんな画像になるかは、実際に動いてみるまで分かりません。よければカメラの前でいろいろな動きを試して、時間のずれが作る一枚を楽しんでみてください。
