Twitter APIのトレンドAPIで貯めたデータを使い、新たに#ハッシュタグの検索コピペツールを作ってみました。実際に作ったツールをご紹介しつつ、PHP、SQL、javascriptで制作を進める際のポイントをこちらの記事ではまとめてあります。

Twitter APIを使って似たような機能の制作をお考えの方は、ひとまず実際に制作した#ハッシュタグの検索コピペツールを「ツイータン」の検索画面でご確認下さい。コピペツールは検索機能のオマケとして実装してあるので、キーワード検索からお願いします。

ツイータン」がどのようなサイトかについては、下記の記事などで詳しくご紹介をしております。

ツイータン」用にTwitter APIで収集していたトレンドハッシュタグやキーワードのデータが14万語以上もたまってしまったため、検索機能をサイトに付けましたが、その検索機能を少々拡張させて、#ハッシュタグのコピペツールとしてみた感じです。

完成したハッシュタグツール

ツイータンで検索をすると、Twitterでトレンドになったことがあるハッシュタグやキーワードを人気順に(独自に付けたスコア順に)表示をします。

例えば、キーワード「看護師」で検索をすると、ここ最近話題になっている「看護師派遣」や、「看護師と家族」といったコロナ初期に話題になったキーワードがスコア順に表示されます。

ツイータンで「看護師」を検索してみた結果の画面イメージ
ツイータンで「看護師」を検索してみた結果

APIでデータ収集をスタートした2019年末からの累計値によるスコア順ですので、直近で人気になっているかどうか気になる場合には、キーワードをクリックしてトレンド推移をチェックしてください。

キーワード:新型コロナ陽性のTwitterトレンド推移
こんな感じでキーワードのトレンド出現推移がみれます

検索結果に表示されるキーワードは、Twitter APIのトレンドワード取得API「GET trends/place API」を使って集めたワードだけなので、スコアが高ければ高いほど、#ハッシュタグ化することで「いいね」「リツイート」「フォロー」を増やすのにも効果的とは思います。

ハッシュタグ化ボタンとコピペボタン

検索されたハッシュタグやキーワード部分にある「ハッシュタグON」スイッチをオンにすると、上のテキストエリアにハッシュタグがどんどん追加されます。

スイッチをONにするとテキストエリアにハッシュタグが表示される
スイッチをONにするとテキストエリアにハッシュタグがでます

コピーするボタンを押せば、選んだハッシュタグをまとめてコピペできますので、ハッシュタグ選びや投稿の入力手間削減にご利用下さい。

また、ハッシュタグ「#文字列」はインスタグラムでも同じですので、インスタグラムのハッシュタグツールとしても活用して下さい。

ハッシュタグツールの作り方

ここからは、ツールに仕立てるまでの諸々を覚書がてらまとめておきました。似たようなツールを作ってみたいとお考えの方は是非参考にどうぞ。

キーワード検索でワードを抽出

キーワード検索でトレンドとなったハッシュタグやキーワードを抽出させるには、そもそもデータがないとできません。

お金があるならTwitterのエンタープライズAPIでは全ツイートデータを取得できますので、膨大なツイートデータを使って壮大なキーワード解析をするとかもできるでしょうが、私のように無料のAPIでなんとかしたいという場合には、「GET trends/place API」が直近トレンドを50件しか取れませんので、時間をかけてデータを蓄積していくしかありません。

10分おきに50レコードをためて、1年半で400万レコード、14万語程度はデータを貯めることができましたので、APIのデータは5分毎に更新されるとかでしたので、間隔を更に縮めればもっとデータは増やすことができると思います。

微妙なトレンドワードを検索から除外

データを長期間貯めて分かりましたが、Twitterトレンド入りをしたワードであっても、この1年半くらいの間にほんの一瞬しかトレンド入りしていなかったワードというのも結構みられました。

何も考えずにキーワードで検索をしてしまうと、該当するハッシュタグやキーワードがすぐに1000件以上表示されて使い勝手が悪くなってしまったので、ある程度スコアリングして抽出をすることにしました。

SQLで集計抽出時にデータを絞り込み

ツイータンではこのような形でマスターデータとトランデータをテーブルに持たせてあります。

マスターテーブル(master)
keyword_idkeywordkeyword_url
1#コロナウィルスhttp://twitter.com/search?q=%E3%82%B…
2#新型コロナウィルスhttp://twitter.com/search?q=%E3%82…
3コロナウイルス流行http://twitter.com/search?q=%E3%82%B3…
トランザクションテーブル(tran)
log_idfk_keywordlog_timelog_score
112019-09-24 02:10:0050
222019-09-24 02:10:0025
312019-09-24 02:10:0010
422019-09-24 02:10:005
532019-09-24 02:10:005

SQLで集計抽出する際に、ザックリとスコアで絞り込みをかけていますので、以前トレンド入りしたことがあるワードなんだけど表示されないな、といったパターンも結構あると思いますが、そのあたりはご容赦ください。

SELECT
	master.keyword_id,
	master.keyword,
	master.keyword_url,
	SUM(tran.log_score) AS SCORE
FROM
	tran
LEFT JOIN
	master
ON
	master.keyword_id = tran.fk_keyword
WHERE
	master.keyword LIKE '%キーワード%'
GROUP BY
	tran.fk_keyword
HAVING
	SUM(tran.log_score) > 100
ORDER BY
	SCORE DESC

ハッシュタグ化ボタンをテキストエリアに連動

データ抽出がクリアできたら、あとはスイッチの設置とテキストエリアへの連動ができれば完成です。

checkboxをCSSでスイッチボタン化

checkboxをCSSでスイッチっぽい表示にするサンプルは、ネットを見れば山ほど見つかりました。ツイータンで設置したものは、こちらのサイトで紹介していたソースをほとんどそのまま使って実現しています。ON/OFFの表記がでる角丸スイッチ文字入りが分かりやすくていい感じでした。

複数のcheckbox選択値を配列に格納して一括表示

checkboxのテキストエリア連動はjQueryでやっておきました。まずはPHPでスイッチcheckboxのvalueにハッシュタグを入れ込みます。

<input type="checkbox" class="switch_input" name="hashtag[]" value="#俺コロナ" />
<input type="checkbox" class="switch_input" name="hashtag[]" value="#LINE新型コロナ全国調査" />
<input type="checkbox" class="switch_input" name="hashtag[]" value="#コロナ疎開" />

jQueryでcheckboxのcheckedをみて、チェックが入ったら配列をループで取り出し、取得できた配列要素をjoin()メソッドでカンマをスペースに変えつつ文字列結合し、出来上がったハッシュタグの並びをテキストエリアに設定して完成です。


$(function(){
	$('input[name="hashtag[]"]').change(function(){
		var hashtags = [];
    //配列にデータを取り出し
		$('input[name="hashtag[]"]:checked').each(function(){
			hashtags.push($(this).val());
		});
    //配列を文字列結合
		var cleanhashtags = hashtags.join(' ');
    //テキストエリアに値設定
		$('#hashtag-text').val(cleanhashtags);
	});
});

文字数カウントとテキストエリアコピペボタンを設置

最後のオマケ機能として、文字数カウントとボタンクリックコピペ機能もついでにつけておきました。実際、スマホで良さげなハッシュタグをポチポチ選んでコピペをするので、ここまであればそこそこ使える感じにはなりました。


$(function(){
	$('input[name="hashtag[]"]').change(function(){
		var hashtags = [];
    //配列にデータを取り出し
		$('input[name="hashtag[]"]:checked').each(function(){
			hashtags.push($(this).val());
		});
    //配列を文字列結合
		var cleanhashtags = hashtags.join(' ');
    //テキストエリアに値設定
		$('#hashtag-text').val(cleanhashtags);

    //ついでの文字数カウント
		var count = $('#hashtag-text').val().length;
		$('.show-count').text(count);
	});

	//ついでのコピペボタン
	$('.copy_clipboard').click(function() {
	  var clipboard = $('<textarea></textarea>');
	  $("#hashtag-text").select();
	  document.execCommand("Copy");
	  alert('コピーしました');
  });
});

おわりに

Twitter APIを使って貯めたトレンドデータを月次ランキングに集計していただけのサイトだったツイータンですが、たまったデータを使ってハッシュタグツールを作るところまでコンテンツを増やすことができました。せっかく作ったサイトですので、まだまだ色々試していきたいとは思います。

ABOUT dtn.jp

この運営ブログをみてdtn.jpの運営サイトに興味をお持ちになった方は下記のリンク集からサイトをご参照ください。PHP・SQL・JS・HTML・CSSや様々なAPIでゼロから立ち上げたサイトを複数運営しています。

dtn.jp関連サイト

  • ディレクトリ型検索エンジンdtn大手サイトは全てサービスを終了し、中小でも運営を継続するところがほとんどなくなってしまったディレクトリ型検索エンジンを2002年から細々運営しており、未だに細かい機能改修も行っております。申請されたサイトは実際に訪問して細かく確認をしているので登録までかなりお時間いただきます。
  • 猫ネコサーチエンジン猫・ペットサイト専用のディレクトリ型検索エンジンです。登録サイトはサイトのスクリーンショット付きでカテゴリに掲載しています。
  • 画像掲示板の泉画像やYouTubeやニコニコ動画が貼り付け可能な匿名画像掲示板です。27ジャンルに分かれた掲示板に、それぞれ100スレッドまで立てることが可能です。
  • ツイータンTwitter APIを使って10分おきに収集したTwitter(ツイッター)のトレンドワードや人気ハッシュタグデータを月別に集計してランキング形式で公開しています。
  • Keyword Tool++Yahoo APIや楽天サイトのデータを日次で収集したデータを元に、EC系キーワードをラインキング形式でご紹介しています。各ワードは検索ボリュームや関連語、24か月の検索ボリュームトレンドを確認も可能です。
  • 消費者金融の泉カードローン商品を取り扱う金融業者を一覧で比較可能としたサイトです。カテゴリ別、人気度別、限度額別、金利別に比較可能なサイトにしています。
  • TrendinGファッションモールに出店するブランドをアイテムヒット率でランキングとしたサイトです。まだβ版です。

各サイトの開発方法などについて

各サイトの開発方法や運用トラブルについては、当ブログで不定期にご紹介しています。Twitterで新着記事のお知らせもしています。宜しければフォロー下さい。