アーキテクチャ・タイムラプス

タイムラプス は、プロジェクトのバージョン履歴を短編映画に変えます。記録された最も古いリビジョンから始まり、アーキテクチャが目の前で組み上がっていきます。要素が描かれ、リレーションシップがキャンバス上に線を引き、更新がフラッシュし、廃止された要素には赤い取り消し線が入ります。最後は、これまでの歩み全体をまとめたクレジットバンドで締めくくられます。

すべては Archyl が自動的に記録しているバージョンから計算されるため、設定は一切不要です。フィルムは読み取り専用で、再生してもエクスポートしてもモデルが変更されることはありません。

必要な条件

タイムラプスには、フィルムのレベルで表示可能な変更を含む 2 つ以上のバージョン がプロジェクトに必要です。バージョンは編集に応じて自動的に記録されるため、通常は少し編集履歴があれば十分です。

「履歴がまだ足りません」 と表示される場合は、ダイアグラムの編集を続けてください。編集セッションごとに新しいバージョンとして記録されます。

フィルムを開く

  1. プロジェクトの ダイアグラム ビューを開きます。
  2. ツールバー(右上)の タイムトラベル をクリックします。
  3. パネルのヘッダーで タイムラプス をクリックします。

プレーヤーが全画面で開き、再生が始まります。Esc を押せば、いつでも閉じられます。

タイムラプス ボタンは、プロジェクトに 2 つ以上のバージョンが記録されてから表示されます。

何が映るのか

フィルムは最も情報量の多いレベルを自動的に選びます。プロジェクトが単一のシステムの場合は コンテナ、それ以外は システムコンテキスト です。そして、目に見える変更があったリビジョンごとに 1 章を再生します。

ビジュアル言語

見えるもの 意味
光るハローとともにフェードインするカード このリビジョンで新しい要素が追加されました
2 枚のカードの間に自ら描かれる線 新しいリレーションシップ。説明または種類がラベルとして表示されます
琥珀色の 変更 フラッシュ 既存の要素が更新されました(説明、技術など)
赤い取り消し線、廃止 スタンプ、破線のゴースト 要素が削除されました — 削除もストーリーの一部なので、ゴーストとして表示され続けます

カメラはアクションを追いかけます。各リビジョンの変更をフレームに収め、最も重要なクラスターに寄り、新しいリレーションシップの両端が常に画面に入るようにします。

画面に表示される情報

  • 左上 — プロジェクト名と、現在のリビジョン番号・日付・作成者。
  • キャプション — 各章にはそのバージョンの説明が表示されるため、フィルムはチーム自身の言葉で物語を語ります。説明のない章は 「リビジョン N」 にフォールバックします。
  • チップ — リビジョンごとの要約: +N 要素+N リレーション~N 更新−N 削除
  • 右下 — 要素とリレーションの合計数を示すライブカウンター。
  • エンドカード — マイルストーンストリップ(リビジョンごとに 1 目盛り)、カウントアップする統計、貢献した作成者、そして Rev NN — 最新 スタンプを備えたクレジットバンド。

フィルムは完全にローカライズされています。キャプション、チップ、スタンプ、クレジットはすべてインターフェース言語に従います。

操作

アクション コントロール
再生 / 一時停止 再生ボタン、または Space
任意の時点へジャンプ プログレスバーをクリックまたはドラッグ
リビジョンへジャンプ タイムライン上の REV ピルをクリック
プレーヤーを閉じる 閉じるボタン、または Esc

タイムラインには章ごとに目盛りが表示されるため、見たいリビジョンへ直接ジャンプできます。

表示するリビジョンを選ぶ

長い履歴には、ストーリーに何も加えないリビジョンが含まれがちです。トランスポートバーの フィルター ボタンをクリックするとリビジョンの一覧が開き、目のトグルで任意のリビジョンを非表示にできます。

  • 非表示にしたリビジョンの変更は、次に表示されるリビジョンにマージ されます。フィルムに穴が空くことはありません。
  • 少なくとも 2 つのリビジョンは表示されたままである必要があり、最後の 2 行は自動的にロックされます。
  • すべて表示 でフィルターをリセットできます。
  • 選択内容は、このブラウザにプロジェクトごとに記憶されます。

長い履歴

フィルムを見やすく保つため、タイムラプスは 直近 10 リビジョン を対象とします。それより古いものは冒頭の章にまとめられ、既存のアーキテクチャが状況説明のショットとして描かれます。つまり何かが消えるわけではなく、単にリビジョンごとのアニメーションにならないだけです。

MP4 でエクスポート

トランスポートバーの MP4でエクスポート をクリックします。フィルムは ブラウザ内 でフレームごとにレンダリングされ、<project-slug>-timelapse.mp4 としてダウンロードされます。

  • 1920×1080、24 fps、H.264
  • レンダリング中は進捗がパーセントで表示され、いつでもキャンセルできます
  • 何もアップロードされません。アーキテクチャがマシンの外に出ることはなく、サーバー側でのレンダリングも一切ありません

レンダリングには、フィルムの長さのおよそ 3〜4 倍の時間がかかります。30 秒のフィルムなら 1〜2 分です。レンダリング中はタブを前面に置いたままにしてください。

必要な条件

MP4 エクスポートはブラウザの WebCodecs API を使用するため、次が必要です。

  • 最新の Chrome、Edge、または Safari。 WebCodecs に対応していないブラウザでは、ボタンが無効になります。
  • セキュアコンテキスト — ページが HTTPS(または localhost)で配信されている必要があります。プレーンな HTTP の内部アドレスではボタンは無効のままです。ボタンにカーソルを合わせると、正確な理由が表示されます。

Archyl をプレーンな HTTP でセルフホストしていることが、エクスポートボタンが無効になる最も一般的な原因です。アプリを TLS の背後に置けば解決します。

活用シーン

  • オンボーディング — 新しいエンジニアが、2 年分のアーキテクチャ上の意思決定を 30 秒で把握できます。
  • アーキテクチャレビューとレトロスペクティブ — 静的なダイアグラムの代わりに、フィルムから始めましょう。
  • リリースやマイルストーンの告知 — MP4 を Slack やリリースノートに貼り付けます。
  • ステークホルダー向けデモ — エンドカードにプロジェクト名、統計、貢献者が表示されます。

トラブルシューティング

「履歴がまだ足りません」 — 表示可能な変更を含むバージョンが 2 つ未満か、リビジョンフィルターで多くを非表示にしています。フィルターを開いて すべて表示 を選ぶか、編集を続けて履歴を増やしてください。

タイムラプスボタンが見当たらない — プロジェクトに記録されているバージョンが 2 つ未満です。

エクスポートボタンが無効になっている — ブラウザが WebCodecs に対応していないか、アプリが HTTPS/localhost で配信されていません。ボタンにカーソルを合わせると、正確な理由が表示されます。

エクスポートが途中で失敗する — 再試行してください。繰り返し失敗する場合は、エンコードがメモリを多く消費するため、他の重いタブを閉じてください。

関連