注文メモ連携の投稿を「1枚のお知らせカード」に作り変えた

概要

外部サービス（sp.hist.jp の注文メモ）から取り込んだお知らせ投稿の見た目を作り変えた。

これまでは「本文テキスト」と「その下にぶら下がるリンクカード」という2段構成だった。情報が上下に分かれていて少しごちゃっとして見える。今回は、もらったデザイン案（ミニマル・テキスト型）に合わせて、投稿全体を1枚のすっきりしたお知らせカードにまとめた。

カードの中身は上から順に、

という構成になっている。

注文メモのお知らせは「どの商品を検討中として登録したか」を伝える投稿である。読み手が知りたいのは「どんな商品か（画像と名前）」「どこのサイトか」「もっと詳しく見るにはどこへ行けばいいか」の3点だ。

旧デザインは本文がただのテキストで、その情報がカードと二重に出ていた。1枚のカードに役割をきれいに割り当てることで、ぱっと見て内容がわかり、画像・サイト名・商品名のそれぞれを直接タップして目的のページへ行けるようにした。

タイムラインにはいろいろな種類のリンクカードが流れる。今回の新デザインは注文メモのお知らせ専用なので、ほかのリンクカードと混ざらないように区別する必要がある。

注文メモの投稿には「注文メモ詳細ページのURL（continueUrl）」が必ず入っている。これを目印にして、continueUrl を持つ投稿だけを新デザインに切り替えた。それ以外のリンクカードは今まで通りの見た目のままにしている。

新しいカードは画像・サイト名・商品名・導線をすべて含んでいる。そのため、これまで本文に出していた「○○を注文メモに登録しました」というテキストは表示しないようにした。同じ情報を2回見せないためである。

タイムライン（一覧）と個別ページ（その投稿だけのページ）の両方で同じカードが出るので、2つのファイルの両方を直した。個別ページでは投稿日時はカードの外に残してある。

カードのサイト名をタップすると、そのサイトのトップページに飛ぶようにした。飛び先は商品URLから「ドメイン部分（https://○○○）」だけを取り出して組み立てている。

ここで URL の解釈に失敗した場合（おかしな文字列が入っていた場合など）は、リンクにはせず、ただの文字として表示するようにしている。変なURLにそのまま飛ばさないための安全策である。

カードに出すURL（商品URL・注文メモURL・画像URL・ファビコン）は、もともとサーバー側で https:// で始まるものだけに限定して保存している。今回の表示側でも同じ前提で扱い、危険なURLを描き出さないようにした。
外部サイトへ飛ぶリンクには必ず rel="noopener noreferrer" を付けて、飛んだ先のページから元のタブを操作されないようにした。
商品名やサイト名などの文字は、Astro の標準のエスケープ（HTMLとして解釈しない仕組み）に乗せて描画しているので、投稿経由のスクリプト混入は起きない。
画像が取得できなかったときは、グレーのスケルトン（仮の灰色エリア）を表示してレイアウトが崩れないようにした。

注文メモのお知らせ投稿を、画像から導線まで一目で追える1枚のお知らせカードに作り変えた。情報の重複をなくし、タップできる場所をわかりやすくしつつ、URLの扱いは引き続き https:// 限定で安全側に倒している。