とあるタレントの画像差し替えから学ぶベッキーWebサイト運用

とあるタレントの契約打ち切りなどの影響で急遽Webサイトから写真や文言を差し替える必要があったとき、どのような対応が必要なのか。
実際にWebサイト上から削除されたとして話題にあがりつつ、実は部分的に存在していて「まだ残ってるwww」と思ったものの「これは他人事ではないですわ」と考えさせられました。
ということで実際にWebサイト上から「タレントを削除して!!」という依頼がされたときにやるベッキーことを簡単にですがまとめました。




Webサイトを運用する側としてやるベッキーこと

  • 画像がどこに使われているかリストを確認
  • 目視での画像チェック
  • 影響範囲をGrepにかける

さて、
書いてみると簡単ですが
いろいろと罠が潜んでいます。

画像がどこに使われているかリストを確認

用意されている場合はとても簡単です。対象となるタレントがどの範囲でどう使われているのかが纏まっていればこれほど簡単なことはありません。なぜなら「タレントを利用する=契約期間」が決まっているので、必ず差し替えが発生するからです。運用する側としてはすぐにピコーンと来るものですね!!

が、多分用意されていない場合がほとんどな気がします。うちの保守範囲ではないですよ、的な考えがあると死ねます。
というわけで地獄のような鬼チェックが必要な前提で進めます。

目視での画像チェック

画像を一式取得することができれば目視でチェックすることが可能です。ただし、大規模サイトの場合は現実的ではないですね。ということで使われているであろうとされる範囲を考える必要があります。タレントが使われそうな画像は思いつくだけでも下記の通り。

  • キービジュアル・タイトルなど目立つ大きな画像
  • バナー
  • ボタン
  • ソーシャル用の画像(og:imageなど)
  • 背景画像

さて、現実的ではないのとWebサイト上からチェックするには割りと辛いので、この場合は「WebDeveloperTools」なんぞ使ってみましょう。「画像情報の表示(View Image Information)」を選択すればページで使用している画像の取得ができます。
しかし、これも少し罠が。ロールオーバーやdisplay:none;、コメントアウトされている画像は検出されませんので注意してください。

影響範囲をGrepにかける

影響範囲内のHTMLだったりCSSを予想できる文言で一括でGrepにかけます。これで一通りのチェックが可能っちゃ可能ですが……。ここでまた大規模サイトの弊害、「一括でデータの取得なんかできないよ問題」が発生した場合はWebサイト上での鬼チェックが発生します。データ全部よこせ!!って言いたいものなんですけどね……。あといろいろなツールがあってサイト上のデータを一括ダウンロードができたりするものもあるんですが、精度は低いしサーバにアタックしているようなものですしおすすめしません。
よくある罠として考えるものは以下のとおり。

  • 画像は差し替えたけどaltに残っていた罠
  • タイトル、キーワード、ディスクリプションに残っていた罠
  • ソーシャルサービスに残っていた罠
  • CSSやJavaScriptにこっそり残っていた罠
  • コメントアウトしてただけな罠

制作側としてはゾッとする感じですね。以外と残っちゃうものなんです。なもんで第三者によるチェックはほしいところですね。

やっちゃいけないことを確認

なんかいろいろやりかねないなぁと思って書いてて辛くなってきた。

  • 一時的な処置としてコメントアウトだけしておく
  • 別名の画像ファイルに更新。既存のデータをほったらかしてサーバに残ってる状態。
  • ファイル名に固有名詞が入っている場合の上書き保存。

一時的な処置としてコメントアウトだけしておく

これは最悪な処置。一時的にだから、ということでHTML上でコメントアウト、内容は放ったらかしというのは製作者としては怠慢。コメントアウトなんてしてる時点で「どんな体制なの?」と品質を疑われても仕方ありません。コメントアウトするくらいならごそっと削除すればいいのに。GitはおろかSubversionすら使っていない可能性がある。

別名の画像ファイルに更新。既存のデータをほったらかしてサーバに残ってる状態

あり得る。別名の画像ファイルに差し替えを行い、表側としては問題なし!なんだけどサーバ上にいつまでも残り続けている……。画像検索で引っかかる可能性もある世の中、怖いですね。

ファイル名に固有名詞が入っている場合の上書き保存。

超あり得る。「xxx_yyyy_name.jpg」というファイル名の場合、上書き保存をして写真を差し替えるだけだとファイル名に固有名詞が残ります。この処置を行う可能性としてはHTMLやCSSなどコード上の影響が考えられるため一時的に上書きで難を逃れようとする、というパターンな気がします。
「xxx_yyyy_talent.jpg」など誰に差し替えてもおかしくないようなファイル名にしておくといいかもしれませんが、この場合は複数人の場合に耐えられない可能性もありますね。要検討。

固有名詞を入れるのはGrepをかけやすく、一括置換もかけやすいので便利な気がしますが運用の段階でよく考えない場合はちょっとした罠になりそうです。

今後やっておくベッキーこと

  • 影響範囲のリストアップ(契約期間のスケジュールなども記入)
  • サーバー上のデータ差分チェック
  • ファイルの削除漏れ確認
  • タレントをWebサイトで使う場合のガイドライン見直し

いろいろやるベッキーことが多そうですが思いついた感じではこんな感じでしょうか。まだまだありそうですね。

自分もやりそうで怖い

Web業界に勤める人間としては全然ありえることだと思うので、自分だったらどんな対応になるんだろうと考えてみました。
今後も気をつけるベッキーですね。




 

ma-san

日々ラーメンとWebについてぶちかましてます!!東北地方でもWebアクセシビリティやるぞ!!