プログラミング C# - 翔ソフトウェア (Sho's)

C#/.NET/ソフトウェア開発など

Visual Studio Code の拡張機能「Twitter Client」を試してみる

Visual Studio Code の拡張機能「Twitter Client」を試してみる

Visual Studio / Visual Studio Code Advent Calendar の12月10日の記事。

Visual Studio Code の拡張機能

Microsoft の開発者向けテキスト エディターである Visual Studio Code には、インテリセンスやデバッグ機能などの Visual Studio の素晴らしい機能があり、Windows 以外にも LinuxOS X で使うことができる。オープンソースだ。

豊富な拡張機能も魅力だ。これにより、様々な機能を使うことができる。また、C#JavaScript のみならず、Go、D Language、Haskell 等の沢山のプログラミング言語にも対応できる。

どんな拡張機能があるかは、次のサイトで見ることができる。

Twitter Client 拡張機能

この記事では、Visual Studio Code の拡張機能の一つ、"Twitter Client" を紹介したい。

この拡張機能を使うことによって、テキスト エディターから出ることなく、Twitter のタイムラインを見たり、呟いたりすることができる。

実際にインストールして使ってみよう。

以下で、その手順を示したい。

1. Visual Studio Code のインストール

Visual Studio Code (現在 Version 0.10.3) は、次のサイトからダウンロードしてインストールすることができる。

インストールが完了したら起動してみよう。

Visual Studio Code の起動画面 (Windows の場合)
Visual Studio Code の起動画面 (Windows の場合)
2. Twitter Client 拡張機能のインストール

次に、Visual Studio Code に Twitter Client 拡張機能をインストールする。

詳しい内容は、次のページで見ることができる (英語)。

Visual Studio Code で F1キーを押すと、上にコマンドを入力するテキスト ボックスが現れる。

ここに、"ext install" と入力し、Enter キーを押す。

拡張機能のインストール
拡張機能のインストール

暫く待つと、拡張機能がリストアップされてくる (インターネット接続が必要)。

拡張機能のリストアップ
拡張機能のリストアップ

ここで、"ext install " の後ろに "twitter" と入力する。"Twitter Client" が表示されるので、右側の雲のアイコンをクリックしてインストールする。

"Twitter Client" のインストール
"Twitter Client" のインストール

インストールが終わると、"Restart Now" というボタンが表示される。クリックして Visual Studio Code を再起動しよう。

"Twitter Client" のインストール完了
"Twitter Client" のインストール完了
3. Twitter Developer Account による Twitter App の作成

Twitter のクライアント アプリを作るためには、Twitter Developer Account によって Twitter App の作成を行う必要がある。

その手順は次のページで見ることができる (英語)。

"Twitter Client" には、このステップの為のウィザードが用意されている。見てみよう。

再び F1 キーを押して、コマンドとして "Twi Wizard" と入力する。

"Twitter Client" のウィザードの起動
"Twitter Client" のウィザードの起動

すると、"Twitter Client" のウィザードが起動し、Twitter App をセットアップする手順を教えてくれる。 "Continue" をクリックしよう。

"Twitter Client" のウィザードの開始画面
"Twitter Client" のウィザードの開始画面

すると、"https://apps.twitter.com" で Twitter App を作成するか訊いてくる。 "Continue" をクリックする。

"Twitter Client" のウィザード
"Twitter Client" のウィザード

Web ブラウザーで、"https://apps.twitter.com" が開かれる。 ここで Twitter App の作成を行う。Twitter にログインしよう (Twitter アカウントが必要)。

"Create New App" をクリックする。

Twitter App の作成
Twitter App の作成

Visual Studio Code 側では、ウィザードを進めていこう。

"Twitter Client" のウィザード
"Twitter Client" のウィザード
"Twitter Client" のウィザード
"Twitter Client" のウィザード

すると、Web ブラウザー側では、Twitter App を作成するための必要事項の入力を求められる。 入力しよう。

Twitter App を作成るための必要事項の入力
Twitter App を作成るための必要事項の入力

Twitter App が作成されたら、"Access level" が "Read & write" になっているのを確認しておこう (もし違っていたら、"modify app permissions" から変更しておく)。

Twitter App が作成されたら "Access level" の確認
Twitter App が作成されたら "Access level" の確認

次に、"Keys and Access Tokens" のタブをクリックして切り替える。

ここに表示されている "Consumer Key (API Key)" と "Consumer Secret (API Secret)" は、後で使うのでメモしておく。

そして、下部の "Create my access token" をクリックしよう。

"Keys and Access Tokens"
"Keys and Access Tokens"

"Access token" が表示される。 "Access Token" と "Access Token Secret" をメモっておこう。

"Access token"
"Access token"
4. Twitter Developer Account による Twitter App の作成

メモっておいたキーやトークンは、Visual Studio Code で入力する。

Visual Studio Code で、メニューから "File" - "Preferences" - "User Settings" を選ぶ。

Visual Studio Code で "User Settings" を開く
Visual Studio Code で "User Settings" を開く

"settings.json" というファイルが開く。 右側がユーザー用の設定ファイルだ。 次のように入力する。

"twitter.consumerkey": "xxxx", // Consumer Key (API Key)

"twitter.consumersecret": "xxxx", // Consumer Secret (API Secret)

"twitter.accesstokenkey": "xxxx", // Access Token

"twitter.accesstokensecret": "xxxx" // Access Token Secret
User Settings の編集
User Settings の編集
5. "Twitter Client" を使ってみよう

以上で準備は完了だ。 使ってみよう。

Visual Studio Code の下部に "Twitter" と書かれたボタンが表示されている。

クリックしてみよう。

すると、上の方に Twitter 用のコマンドが表示される。

Twitter のコマンド
Twitter のコマンド

例えば、"Home" をクリックしてみると、自分のタイムラインが表示される筈だ。

Home Timeline
Home Timeline

"User" を選んで自分の呟きだけに切り替え、"Post" を使って呟いてみると次のような感じだ。

自分の呟きを表示して呟いてみる
自分の呟きを表示して呟いてみる

まとめ

今回は、Visual Studio Code の拡張機能の一つ Twitter Client を試した。

Visual Studio Code には、他にも豊富な拡張機能がある。是非試してほしい。