ツイートを表示する際、埋め込みというのは当然選択肢としてあるかなと思いますが、ただ埋め込みはレンダリングが相当遅く、表示にストレスがかかるので、webサービスを提供する場合にはどうしても避けたいところ。ちなみに、調べてみたところ、別に権利関係的にも埋め込みを必ずしも使う必要はないらしく、デザインのガイドに従って掲載でも問題ないらしいので、今後私も埋め込み機能以外で掲載していきたいと思いますので、そのための記録というかメモを。

埋め込み機能以外でも掲載していいんでしたっけ？

埋め込みを使った方がいいよ、最新のデータになるしなって書いてありますが、ただ要件通りに表示してもよいようです。

※初めて知りましたがテレビ放送やラジオなどの音声などでも要件が決められているんですね。

Display requirements – Twitter Developers

Tweets are one of our most visible brand elements, so it’s important that they are presented correctly. You should comply with the display requirements below when you display Tweets, timelines, and o…

apiで取得したtweetのデータ(json)を使ってレンダリングを作ってみる

ここからが本題なんですけど、普通にテキストをレンダリングするだけならそんな難しい話でもないんですけど、例えばテキストに入ってるハッシュタグのリンク化とか、このあたりがちょっとめんどくさいです。

Ｑ＆Ａサービスとかみても、回答がだいたい間違ってるので、ちゃんとした説明をしてるサイトを探したところ、こちらにありました。

Twitter Rest APIでツイートにリンクを付ける方法

Twitter Rest APIで取得したツイートのURLやハッシュタグにリンクを付ける方法を説明します。サンプルコード、デモなど。

※こちらのサイトは、とても勉強になります。。。管理人さんのアカウントも実はフォローしております。。

こちらをベースに、私も作ってみました。ちょっと自分用に色々修正しています。

function tweet_render($json_data){
  $data=json_decode($json_data["twitter_json"],TRUE);
  $full_text=$data["full_text"];


  $replace_table = [
    "hashtags" => [ "text", 2, '#', '#', 'https://twitter.com/hashtag/' ] ,
    "symbols" => [ "text", 0, '$', '$', 'https://twitter.com/search?q=' ] ,
    "user_mentions" => [ "screen_name", 0, '@', '', 'https://twitter.com/' ] ,
    "urls" => [ "display_url", 1, 'url' ] ,
    "media" => [ "display_url", 3, 'url' ] ,
    ] ;

///置換予定のデータを$entitiesに格納していく
  $entities=array();

  foreach($data["entities"] as $key=>$values){
    ///entitiesのkeyでループさせる。
    ///各keyに所属する配列をとりだしていく
    ///ただし、置換に使わないやつはスキップする
    foreach($values as $value){
      if(!isset($replace_table[$key])){
        continue;
      }
      $replace_data=$replace_table[$key];
      $text=$value[$replace_data[0]];

      switch($replace_data[1]){
        case 0:
          $after_text='<a href="'.$replace_data[4].rawurlencode($replace_data[3].$text).'" target="_blank">'.$replace_data[3].$text.'</a>';
        break;

        case 1:
          $after_text='<a href="'.$value[$replace_data[2]].'" target="_blank">'.$text.'</a>';
        break;

        case 2:
          $after_text='<a href="'.$replace_data[4].rawurlencode($text).'?src=hashtag_click" target="_blank">'.$replace_data[3].$text.'</a>';
        break;

        case 3:
          $after_text='';
        break;


      }

      $entities[$value["indices"][1]]=[$value["indices"],$after_text];

    }
  }

///indicesには、置換を行う文字列の位置が記録されているので、そちらに基づいてどんどん置換していく
///ただし、テキストの後ろから置換をしていかないと、記録されている位置と実際に置換すべき位置がずれるので
///後ろの置換部分から実行していく
///そのために、$entitiesをindicesの大きい順に並び替える
  krsort($entities);

  i

こんな感じでいけました。

Ｑ＆Ａサービスの回答の何がダメだったの？

例えば、こんな感じ

#プロセカ
#プロセカ履歴書
#プロセカ好きさんと繋がりたい

こういう感じのをツイートに入れた場合、一番上のハッシュの文字列をリンク化する際、２番目、３番目が途中でリンク化されてしまうんですよね。

ハッシュタグ自体にリンク化されないという。だから、正規表現でレンダリングは無理なのかなとおもいました。

というか、Twitter関係で困ったら、「〇〇 site:syncer.jp」で検索することを強くおすすめです。信頼度高めの情報がたっぷりでした。

コメント