週刊「LUV CAN SAVE Uアプリを作る」創刊号〜アプリの仕様を決める

beatmaniaIIDXの収録曲「LUV CAN SAVE U」のMVで、なんだか悪そうな男(愛称・ラブキャンおじさん)が操作している謎の画面。

あの画面、せっかくなのでiPhoneアプリで再現してみませんか？シンプルでおバカな企画ながら、割と色々な技術が身につくはず。

Contents

「LUV CAN SAVE Uアプリ」とは？

まずはそもそも「LUV CAN SAVE Uアプリ」って何なのかという話から。知ってるという人は読み飛ばしてOKです。

以下の動画の0:38〜0:39に注目。(他にも随所に登場)

いかにも悪そうなおじさんが端末で何かを操作していますよね？そう、これが「LUV CAN SAVE Uアプリ」。

でもよく見たらやってることは謎。2つの”静止画”を、指で操作して移動・拡大するだけのアプリ……これ絶対iPhoneアプリだったら機能不足でリジェクトだろうなあ。

早速アプリ作りにかかりたいところだけれど、まずは「アプリの仕様を決める」という段階から。どんな機能を実装する必要があるか、列挙してしまおう。

個人開発は「やりたいところから自由に実装」ができて楽しいけれど、最低限何を実装するか先に決めておかないとハマります。

最初に、ユーザー目線でLUV CAN SAVE Uアプリがどのような挙動をするのか、大まかに一連の流れをチェック。

やっていることは3つだけ。単純ですね。

ただこれらの3手順だけでは、具体的にどんな処理を組めばいいのかが不鮮明。ということで、実装レベルまで掘り下げてみる。

初期状態で、2つの画像が表示されている
1. 男側の画像の位置とサイズは以下の通り
  1. 初期位置は画面の中心からやや下
  2. 幅は画面の2/3ほど
  3. 高さは画面の1/3より少し大きいくらい
2. 女側の画像の位置とサイズは以下の通り
  1. 拡大後のサイズを基準とする(初期状態は縮小)
  2. サイズは男側の画像と同じ
  3. 縮小状態のサイズは元の2/3
  4. 画面の右下角に、少し余白を置いて配置する
3. 画像はやや透過気味
4. 水色の線で縁取られている
5. 画像の背景は紫色
6. 男側の画像の方が手前に表示されている
男側の画像を上にフリックすると、画像が移動する
1. 0.2秒ほどでアニメーションする
2. 移動先は画面の左上角
3. 逆の動作も用意する(下にフリックしたら下に動く)
女側の画像をタップすると、画像が拡大する
1. タップしたら一瞬で拡大させる
2. 逆の動作も用意する(縮小させる)
3. 画像が縮小中のときは拡大、拡大中のときは縮小する

一気に増えましたね。
2-3と3-2(逆の動作)は実際のMVでは実装されていないけれども、これがないと1回移動して終わりという悲しい仕様になってしまうので入れました。

一見単純そうな処理でも、やるべきことは結構多い。つまりLUV CAN SAVE Uアプリを作れば色々な技術が身につきます。たぶん。

次回から実装の作業に入りましょう。仕様の項番1「初期状態で、2つの画像が表示されている」を片付けてしまいます。

ちなみに「週刊」と銘打ってはいますが、実際はもっと早いペースで書くつもりです。お楽しみに。

このシリーズの記事