Masaya Inaba
← 開発ノート一覧に戻る
めぐる日記 2026-07-27

最後のページだけアニメーションしない、を追いかけた話

めぐる日記には、初めて起動した時に出る4ページのウォークスルー(操作説明)がある。最初は静止画にただ文字が乗っているだけの、素っ気ない見た目だった。 もう少し印象に残るものにしたくて、ゲームのセリフみたいに文字を1文字ずつ表示する演出や、ページごとに少し違う小さなアニメーションを足していった。

文字を1文字ずつ出す

タイトルと説明文を、頭から1文字ずつ表示していく処理を作った。最初は中央揃えで組んだんだけど、文字が増えるたびに表示の開始位置がじわじわ左にずれていって、読んでいる途中でチカチカする。 日記アプリらしく、ノートの罫線に文字を書いていくような見た目に変えることにした。左揃えにして、タイトルと説明文それぞれの下に1本線を引く。

仕上げに、書いている間だけ文字の末尾に鉛筆のアイコンが追従するようにした。正確な座標を計算するのは面倒そうだったけど、表示中の文字列の直後に鉛筆の絵文字をそのまま連結してしまえば、改行も含めて自然に「今書いている場所」に追従してくれることに気づいた。座標計算は一切していない。

ただ、書き終わって鉛筆を消す時に一瞬チラつく不具合が出た。原因は、鉛筆を文字列から完全に取り除いていたせいで文字数が変わり、行の折り返しが再計算されていたこと。鉛筆を消す代わりに透明にするだけに変えたら、チラつきは消えた。

ページごとの小さな演出

1ページ目(ようこそ)は達成演出で使っているキラキラを流用。2ページ目(毎日書く)はアイコンの横に数字が1、2、3とカウントアップして消える。3ページ目(年をまたぐ思い出)はアプリ内の写真スタックそのままに、小さな四角が扇状に広がる。4ページ目(タグ)はタグのチップがポンポンと弾んで現れる。 それぞれ、実際にアプリの中にある見た目や機能をそのまま演出のモチーフにした。

先読みで演出が始まってしまう

ページを1つずつ確認していたら、妙なことに気づいた。1ページ目でゆっくり読んでから3ページ目まで進むと、着いた瞬間にはもうアニメーションが終わっている。でも1ページ目からすぐスワイプして進むと、ちゃんと途中から動いているのが見える。

これは、左右にページをスワイプできるビューが、隣のページをあらかじめ裏側で読み込んでおく仕組みのせいだった。裏側で読み込まれた瞬間に「表示された」という扱いになり、演出がバックグラウンドで勝手に始まって終わっていた。 「表示されたら始める」ではなく「実際に選ばれているページになったら始める」という条件に変えて直した。

ボタンで進むと、最後のページだけ動かない

ここからが長かった。スワイプで進む分には全部のページで演出がちゃんと動くのに、「次へ」ボタンで進むと、なぜか一番最後のページだけ演出が起きない。しかも、2ページ目まで戻ってからボタンで進むと再現するけど、1つ前のページから進むだけだと再現しない。

見た目だけを見ていても埒が明かなかったので、コードに目印を仕込んで、実機とパソコンをつないだ状態でどんな順番で何が起きているかを実際のログで確認した。 すると、ページに初めて到達した瞬間、演出を始める処理が1回ではなく2回続けて呼ばれていることが分かった。1回目で動き出したアニメーションを、2回目の呼び出しがリセットして最初からやり直させてしまっていた。

この二重呼び出しは直したけど、それでも最後のページだけは変わらず動かなかった。ログを見る限り、演出を始める処理自体はちゃんと1回だけ呼ばれている。つまり指示は正しく出ているのに、画面には反映されていない。

ここで、原因が「最後のページであること」なのか「そのページの演出の種類」なのかが分からなくなってきた。そこで、3ページ目と4ページ目の内容(演出込み)をそっくり入れ替えて、もう一度同じ手順で試してみることにした。 結果、入れ替えても症状は「最後のページ」の方についてきた。演出の種類は無関係で、リストの一番最後に来ること自体が原因だと確定した。

最後のページに切り替わる瞬間は、ページ全体をスライドさせる仕組み自身のアニメーションと、こちらが独自に用意した演出のアニメーションが、同じタイミングでぶつかっていたらしい。指示は正しく実行されているのに、描画のタイミングを取り合って負けてしまっていた。 切り替えが落ち着くのを一瞬(0.1秒)待ってから演出を始めるようにしたら、あっさり解決した。

持ち帰ったこと