スライドに載るコードは、たいていスクリーンショットです。見た目は悪くありませんが、動きません。完成形だけを見せるか、3 枚の画像を並べて、違いは各自で追ってもらうことを期待するかのどちらかになります。
Keynote はもっとうまくやれます。マジックムーブは 2 枚のスライドの間を補間する機能で、コードが画像ではなく本物のテキストなら、単語ひとつずつを動かしてくれます。1 行が下にずれて場所を空け、値が書き換わり、ブロックがまるごと現れて、まわりがそれに合わせて動く。
これがスライド 2 枚とトランジション 1 つの結果です。After Effects も、ビデオトラックもありません。
スクリーンショットでは実現できない理由
マジックムーブは、連続する 2 枚のスライドにあるオブジェクト同士を対応づけ、その間を補間します。画像はオブジェクト 1 個です。Keynote は動かすことも、拡大縮小することも、フェードさせることもできますが、その中に手を入れて 4 行目だけを動かすことはできません。Keynote から見れば、4 行目などというものは存在しないからです。
テキストは違います。テキストボックスは単語の集まりであり、マジックムーブはそれを 1 語ずつ対応づけられます。
つまりこの手法は、色のついたコードをテキストのまま Keynote に持ち込めるかどうかにかかっています。手で打ち直して色を付けるのは苦行です。エディタからコピーするとハイライトは失われます。エディタがクリップボードに置くのはプレーンテキストだからです。
色つきのコードをテキストで取り出す
Codeshot が書き出せるものは 2 つあります。PNG は組み上がった絵で、背景もウインドウの枠も影も入ります。RTF はコードだけを、色のついたテキストとして書き出したものです。
フォーマットを RTF にして、RTFをコピーを押します。RTF に背景が入らないのは意図的です。背景はスライド側が用意するものですし、その後ろにもう一枚あっても邪魔になるだけだからです。
ひとつ知っておく価値のある点があります。貼り付けたコードがだめになる原因はたいていこれです。RTF はフォントを名前で指定しますが、システムの等幅フォントは他のアプリが解決できない非公開の名前を持っています。解決できなかったアプリはプロポーショナルなフォントで代用し、コードをコードらしく読ませていた桁の揃いが崩れます。Codeshot は書き出す時点で Menlo に差し替えるので、これは起きません。自分でフォントを選んでいる場合、その名前はもともと公開されているので、そのまま通ります。
2 枚のスライドを作る
スライドに貼り付ける。 ⌘V。色もそのまま付いてきます。テキストボックスのサイズは変えてかまいませんが、打ち直しはしないでください。マジックムーブは単語そのものを手がかりに対応づけます。
スライドを複製する。 ナビゲータで選んで ⌘D。同じスライドが 2 枚になります。
片方を編集する。 2 枚目にまだ無かった行を足していくか、あるいは——こちらのほうが楽なことが多いのですが——完成したコードを貼っておいて、1 枚目から行を削って前の状態に戻すか。触らずに残した部分がマジックムーブの動かす対象になり、足した行と消した行がフェードで現れたり消えたりする対象になります。
後ろから作るほうをおすすめします。マジックムーブは単語そのもので対応づけるので、動かさずに置いておきたい行は 2 枚のスライドで完全に一致していなければなりません。複製から削る方法ならそれが保証されます。行を手で打ち直すのは、どこかの単語が黙って対応づけに失敗し、移動ではなくジャンプになる原因の作り方です。
順番が大事です。トランジションは「出ていく側」のスライドに属するので、前の状態から先に作ってください。
効果を決めるただひとつの設定
1 枚目のスライドを選び、アニメーションサイドバーを開いて、マジックムーブを追加します。
そのうえで、一致を初期値から単語ごとに変更します。
効果全体がこの設定にかかっています。触らないままだと、マジックムーブはテキストボックスを 1 個のオブジェクトとして扱ってクロスフェードします。動くコードではなく、2 つの状態のあいだのぼやけた切り替わりになるということです。単語ごとにすると、両方のスライドの単語同士を対応づけて個別に動かすようになり、行が滑り、値がその場で書き換わります。
継続時間はコードなら 1.5〜2 秒あたりが読みやすいところです。これより速いと、どの行が動いたのかを追えません。それを見せることこそが目的なのに、です。
不一致のオブジェクトをフェードはオンのままにしておきます。新しい行が現れ、消えた行が消えていくのが、ぱっと切り替わるのではなくフェードになるのはこの設定のおかげです。
続きものにする
スライド 3 枚とマジックムーブ 2 つあれば、リファクタリングを 1 段階ずつ見せられます。素朴な版、関数を切り出した版、最終形。変わっていない行は各トランジションがそのまま運んでくれるので、見る側の視線は実際に変わった箇所に留まります。
1 段階は小さく保ってください。1 回のトランジションにつき差分は 2〜3 行で十分です。内容の半分が入れ替わるスライドは、アニメーションではなくノイズになります。
画像のほうが良い場合
コードのスライドがすべてこれを求めているわけではありません。
コードが変化しないなら、PNG のほうが単純で、輪郭も鮮明で、しかもデザインされた見た目を作っているウインドウの枠と背景が付いてきます。2× で書き出して終わりです。その道筋は一連の流れにまとめてあります。
RTF とマジックムーブを使うのは、変化そのものが主題のときです。差分を見せる、少しずつ組み上げる、なぜこの版が次の版になったのかを説明する——そういうときです。
Keynote の外でも
同じ RTF は Pages にも Word にも、リッチテキストを受け取るものなら何にでも入ります。画像ではなく、色のついた、選択でき、検索できるテキストです。つまりスクリーンリーダーからも読めるままですし、読み手が文書から 1 行コピーして実行することもできます。