icon
icon

TwitterのJavaScript APIを現役エンジニアが解説【初心者向け】

初心者向けにTwitterのJavaScript APIについて現役エンジニアが解説しています。APIとは、JavaScriptで外部から操作出来るように提供されている仕組みのことです。Twitter開発者アカウントを申請、APIキーを取得します。JavaScriptでツイートしたり、いいねボタンを押してみましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

TwitterのJavaScript APIについて、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

TwitterのJavaScript APIについて詳しく説明していくね!

大石ゆかり

お願いします!

 

TwitterのJavaScript APIとは

TwitterのAPIを使うためのJavaScriptインターフェースのことです。APIは「Application Programming Interface」の略です。APIとはある特定のサービスの機能やデータを、無料で外部サービスと提携して開発・整形して利用できるようになるものです。

今回のケースを平たく言うと、TwitterのアプリをJavaScriptというプログラム言語で操作するものという感じです。

 

TwitterのJavaScript APIで実現できる主なこと

APIのリファレンスを見ることで、用意された機能の一覧が確認できます。

Twitter APIリファレンスはこちら

平たく言うと、普段Twitterを使うときにしている操作がAPIでできます。ツイートする、いいねを押すなどの操作です。

[PR] コーディングで副業する方法とは

Twitter APIを利用するための準備

JavaScriptでAPIを呼ぶためのコードを書く前に必要な手順が3つあります。

1、Twitterアカウントの作成

Twitterのサイトから画面の指示にしたがってアカウントを作成します。

Twitterのサイトはこちら

2、Twitter開発者アカウントの申請

Twitter Developerのサイトから画面の指示にしたがって申請をします。Twitterアカウントと比べると少し大変なので、申請の流れを概要レベルで書いておきます。

  1. 簡単な質問に英語で答える
  2. APIを利用する目的などを英語で200文字以上書く

(※まず基本英語での表記しかありません。英語が苦手な方は自動翻訳などを利用して進めてください)

なお、このときに書いた理由によって申請にかかる日数が変わるようです。ちなみに、勉強のためという感じの内容にしたら即時で申請がとおりました。

Twitter Developerのサイトはこちら

3、APIのキーを取得

申請が通るとメールが送られてくるのでTwitter DeveloperサイトにログインしてAPIの操作に必要な各種キーを取得しましょう。

画面右上の方にある「Create an app」ボタンを押して必須入力項目(requiredと書かれている項目)を入力します。入力をして「Create」ボタンを押せば各種キーは目前です。「Keys and tokens」というタブの中に各種キーが記載されています。

画面の4つの項目の文字をAPIを呼ぶ際に使用しますのでコピーしておいてください。

1、API key
2、API secret key
3、Access token
4、Access token secret

キーとトークンが記載された画面

画面の赤線がAPIと、API keyとAPI secret keyです。Access tokenとAccess token secretは赤丸のCreateボタンを押すことで表示されます。

Twitter開発者アカウントのAPIキーとトークンの画面

 

実際に書いてみよう

Node.jsのtwitterモジュールを使用すると楽にAPIを使えますので、今回はこれを使用した例を紹介します。下記のコマンドでtwitterモジュールをインストールしてください。

npm install twitter

まずはAPIを使ってツイートをする例を紹介します。

var Twitter = require('twitter');

var client = new Twitter({
	consumer_key:'【API key】',
	consumer_secret: '【API secret key】',
	access_token_key: '【Access token】',
	access_token_secret: '【Access token secret】'

var params = {status: '日本語ツイート検証'};
client.post('statuses/update', params, function(error, tweets, response){
	if(error){
		console.log(error);
	}
});

 

解説

  1. 「var Twitter = require(‘twitter’);」にて、インストールしたtwitterモジュールを読み込んでいます
  2. 「var client = new Twitter({」にて、事前に準備した4つの文字(キーとトークン)を設定しています
  3. 「var params = {status: ‘日本語ツイート検証’};」にて、ツイートの文面を指定しています
  4. 「client.post(」は、第1引数がAPIリファレンスに記載されたエンドポイント(URL)、第2引数がツイート内容、第3引数がAPIが呼ばれた後に実行される関数(コールバック)となっています

APIが呼ばれた後の関数はエラーがあった場合のみコンソールにエラーメッセージを表示するようにしています。

TwitterのツイートをするAPIのリファレンスページはこちら

client.post(~の部分をAPIリファレンスを見ながら書き換えることで好きな処理が実行できるかと思います。

応用編

せっかく準備に手間をかけてAPIが実行できるようになったので、他の処理を呼ぶ例を紹介します。

TechAcademy/テックアカデミーのツイッターアカウント(@techacademy)の一番上に表示されるツイートにいいねをつけてみます。

twitterモジュールの読み込みやキーの設定は同じで、client.~の部分のみを変えるだけで実行できます。client.~の部分のみのソースです。

var params = {screen_name: 'techacademy',count:1};
client.get('statuses/user_timeline', params, function(error, tweets, response){
	if(!error){		
		client.post('favorites/create', {id :tweets[0].id_str}, (error, tweets, response) =>{});
	}else{
		console.log(error);
	}
});

 

解説

  1. 「var params = {screen_name: ‘techacademy’,count:1};」にて、ツイートを取得するアカウントと取得件数を指定しています
  2. screen_nameにツイッターのアカウントの@を覗いたもの、今回はテックアカデミーのアカウント(@techacademy)のtechacademyを指定。countはなくても良いのですが今回のようにツイートの取得件数を指定する場合に追加します
  3. 「client.get(」にて、第1引数にツイート取得の「statuses/user_timeline」を指定しています。第2引数に取得条件、第3引数にツイートを取得した後の処理を記述しています
  4. 取得した後の処理は、いいねをつけるAPIです。「client.post」にて、第1引数にいいねをつける「favorites/create」を指定しています。第2引数にツイートのID、第3引数は何もしない空の処理です
  5. 第2引数のツイートIDは、ツイートの取得APIで取得したツイートがtweetsに配列で入っているので、この1つめである[0]を指定しています
  6. ツイートIDには「id」と「id_str」があるのですが、idはプログラムやサーバーによって数字が丸められる(端数が切られるようなもの)ことがあるのでid_strを使った方が無難です

以上です。このようにリファレンスを参照して、URLと条件の値を変えるだけで好きなAPIの処理を実行できます。

筆者プロフィール

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。