console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

APIでつぶやきを表示する時のディスプレイガイドライン

表示に関しても、いくつか制限があるみたいです。

参考:Display Guidelines | Twitter Developers

以下は、このページの要旨を日本語に訳したものです。

これは守ろう

発信者について

以下、@hogehogeのことを「ユーザーID」、自由に入れられる方を、「ユーザー名」とします。
私の場合、「ユーザーID」は「leader22」、「ユーザー名」は「りぃ」です。

  • 発信者の表示は、「ユーザーID」か、「ユーザーIDとユーザー名」とする必要があります。
  • 発信者の表示は、リンクにてTwitter公式のプロフィールページにリンクさせる必要があります。
  • もしくは、同サイト内のユーザー情報ページへのリンクとし、そのユーザー情報ページは、Twitter公式のプロフィールページへのリンクを含むこととします。
  • 発信者の表示は、太字にするなど他の要素との表示を差別化する必要があります。
  • できれば「@」を名前の前につけないように。
ユーザー情報ページへのリンク例:http://twitter.com/hogehoge

@ツイートについて

  • @ツイートの送信先のユーザーのプロフィールページにリンクさせる必要があります。
  • もしくは、同サイト内でその該当ユーザーの情報を表示へのリンクとし、そのユーザー情報ページは、Twitter公式のプロフィールページへのリンクを含むこととします。
ユーザー情報ページへのリンク例:http://twitter.com/hogehoge

ハッシュタグについて

  • ハッシュタグは、検索結果のページへリンクさせる必要があります。
  • Twitterクライアントの場合は、検索結果ページへのリンクを含むコンテンツであると良いでしょう。
検索結果のページへのリンク例:http://twitter.com/search?q=%23hogehoge
※%23は#をURLエンコードしたものです。

URLについて

  • URLはリンクにする必要があります。
  • このリンクは、色を変える、下線を引くなど、他と表示を差別化する必要があります。

ブランディングについて

  • ツイートを単独でサイトに表示する場合、それぞれのツイートは「TwitterBird」の表示や「Twitterからの投稿」と表示するなど、Twitterのコンテンツであることを示す必要があります。
  • 複数のツイートを表示する場合、そのグループに対してTwitterのコンテンツであることを明示する必要があります。

つぶやくフォームについて

TweetBoxというやつです。

  • Twitterへのツイートを投稿できるフォームを設置する場合は、「What'sHappening?」といった内容をテキストフォームの上に表示することを推奨します。
  • このフォームは、上記ブランディングを施したツイートの近くに設置するか、上記ブランディングをテキストフォーム内で実施することを推奨します。
  1. つぶやくボタン:Twitterへ投稿する場合は「Tweet」と表示し、他のサービスへも連動する場合は「Update」と表示すべきです。
  2. 文字数カウント:140文字から入力する度にカウントが減るとユーザーの助けになるでしょう。

画像について

  • 投稿に含まれた画像を表示する時は、一緒に投稿されたツイート本文を一緒に表示します。
  • その際「本文すべて」、「プロフィールページへリンクされたユーザー名かユーザーID」も含むようにします。
  • 画像をクリックした時は、画像のURLへ遷移するようにします。
  1. 本文は、画像の下に注釈のように表示すると良いでしょう。
  2. 画像と本文を一緒に表示できない場合(サムネ表示など)は、画像をクリックできるようにし、そこで本文等の情報を表示するようにしましょう。

例外あり

メールで連絡してもらえれば、ケースによっては例外として認める場合があるそうな。

こっちはできたら守ろう

「こんな場合どうすれば・・?」という時や、「何か決まりごとあったっけ?」な場合に参考にせよとのこと。
必須じゃないけど参考にしてね、という内容。

プロフィール画像と文字揃え

  • プロフィール画像はツイートの「左」に表示します。
  • ツイート本文自体は、画像のすぐ「右」に「左揃え」で表示します。
  • プロフィール画像はユーザーのプロフィールページへのリンクとします。

投稿時間

  • ○分前のようにしてもOK、○時○分のように固定でもOK
  • ツイート本文とは別要素として扱い、本文や他の要素より控えめに表示する。
  • ツイートIDに基づくページへのリンクとする。
参考:http://twitter.com/hogehoge/status/1111111111111111111

アクション

  • リプライ、RTなどは可能であると望ましい。
  • それぞれの動作だとわかるアイコンがあるとさらに良い。
  • 左から右へ、「リプライ」、「リツイート」、「お気に入り」の順で並べること。

ソース

  • 「From Web」や、「From Twitter for iPhone」など、何で投稿されたかわかることが望ましい。
  • その表示は、それらアプリやサイトへのリンクになっていることが望ましい。

複数のツイートの表示

  • TLのように複数のツイートを表示する際、個々ツイートは、水平線やスペースなどで区切ることが望ましい。
  • その区切りの間隔は、一定であることが望ましい。

特定単一のユーザーの、複数のツイートの表示

  • プロフィール画像は全てのツイートに表示する必要はなく、わかるところに1つあれば良い。

ツイートの並び順

  • 最新が一番上で、そこから時系列で降順が基本。
  • 何かしら検索条件があったりする場合は、それに応じて並び替えて良い。

ユーザー名とユーザーID

  • これらを一緒に表示する場合は、ユーザーIDの方を目立たせるべき。

検索結果ページへのリンク

  • 検索結果を表示する場合は、公式の検索結果ページへのリンクを含めると良いかもしれません。

まとめ

TwitterAPIを使う=公式のTLみたいなのを表示する」、そういうシーンが多いと思うのですが、何かと基本的には公式に則るように!みたいな感じですね。
間違ったことは書いてないと思いますが、あくまで意訳なので鵜呑みにはなさらぬよう。

その他規約がまだまだあるので、そちらも要チェックです。