Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
Xamarin逆引きTips

Xamarin逆引きTips

Xamarin.FormsでTwitterクライアントを作成するには?

2015年6月2日

TwitterのAPIを扱えるライブラリであるCoreTweetを使用して、Twitterデータを検索するアプリを作成。CoreTweetの導入と、検索したテキストの表示までを紹介する。

古谷 誠進(@furuya02
  • このエントリーをはてなブックマークに追加

1. Twitterデータを検索するアプリ

 Twitter上のつぶやきなどを扱いたい場合は、同社が提供しているWeb APIを利用することになるが、そのためには、OAuth認証など、少し複雑な作業が必要になる。そのため、いくつかの複雑手順を隠ぺいして、簡単に扱えるようにした各種のライブラリが開発されている。CoreTweetは、そのようなライブラリの一つであり、C#からも使用できる。

 今回は、このCoreTweetを使用して、Twitterデータを検索するアプリを2回に分けて紹介する。

 第1回は、CoreTweetの導入と、つぶやきの本体のみをテキストで表示するところまで、そして、第2回は、ListViewコントロールの表示をカスタムセルにしてつぶやきのデータを見やすい形で表示する方法を紹介する*1

  • *1 なお本Tipsは、Windows上でVisual Studio 2013を使用してXamarin.Forms開発をすることを前提としている(編集部注: Mac上のXamarin Studioでも同様の手順で、本稿の内容が実現できることは確認している)。使用しているXamarin.Formsのバージョンは、プロジェクト作成時に利用されている「1.3.1.6296」である。

 なお、最終的な完成画面は、次のようになる。

図1 最終的な完成画面(iOS) 図1 最終的な完成画面(Android)
図1 最終的な完成画面(iOS/Android)

【コラム1】CoreTweet

 CoreTweetは、下記のリンク先で配布されているTwitter用のライブラリである。ほとんどのAPIでLINQが使用可能であり、また、asyncawaitによる非同期によるアクセスにも対応している。

 なお、GitHubでコードが公開されているだけでなく、本記事で紹介しているようにNuGetライブラリからも簡単にインストールが可能である。

2. Xamarin.Formsプロジェクトを作成する

 メニューバーの[ファイル]-[新規作成]-[プロジェクト]から表示したダイアログで、[テンプレート]-[Visual C#]-[Mobile Apps]-[Blank App (Xamarin.Forms Portable)]を選択し、名前を「TwitterClientSample」として[OK]ボタンを押す。

図2 「Blank App (Xamarin.Forms Portable)」の新規作成

3. CoreTweetパッケージの追加

 CoreTweetは、NuGetパッケージで簡単にインストールできる。Visual StudioでのNuGetパッケージのインストールは、メニューバーの[ツール]-[NuGet パッケージマネージャー]-[ソリューションの NuGet パッケージの管理]を選択して表示された[NuGet パッケージの管理]ダイアログから行う。検索欄に「CoreTweet」と入力すると、目的のパッケージを簡単に見つけることができる。

図3 NuGetパッケージマネージャーによるCoreTweetパッケージの追加

 図3の[インストール]ボタンを押した後、続いて表示される[プロジェクトの選択]ダイアログでは、全てのプロジェクトにチェックを入れて[OK]ボタンを押す(図4)。なお、この時点で、依存関係からNewtonsoft.Jsonパッケージも同時にインストールされる。

図4 全てのプロジェクトを選択する
図4 全てのプロジェクトを選択する

4. 画面の作成

 最初に、画面を作成するためApp.csファイルを以下のように修正する。

C#
using System.Collections.ObjectModel;
using Xamarin.Forms;

namespace TwitterClientSample {
  public class App : Application {
    public App() {
      MainPage = new MyPage();
    }

    private class MyPage : ContentPage {

      private readonly ObservableCollection<string> _tweets = new ObservableCollection<string>(); // <= 1

      public MyPage() {

        var entry = new Entry { // <= 2
          HorizontalOptions = LayoutOptions.FillAndExpand,
          Text = "Xamarin"
        };

        var button = new Button { // <= 3
          WidthRequest = 80,
          Text = "Search"
        };

        var listView = new ListView { // <= 4
          ItemsSource = _tweets, // <= 5
        };

        Content = new StackLayout { // <= 6
          Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0), // iOSのみ上余白
          VerticalOptions = LayoutOptions.Fill,
          Children = {
            new StackLayout {
              Padding = 5,
              BackgroundColor = Color.Teal,
              Orientation = StackOrientation.Horizontal, // 横に配置する
              Children = { entry, button }
            }, listView
          }
        };

      }
    }
  }
}
画面を構成するコード(App.cs)

 2は、検索文字列を入力するためのEntryコントロールであり、3は、検索を開始するButtonコントロールである。Tweetの内容を表示するには、ListViewコントロールを使用し(4)、それぞれを、StackLayoutで配置した(6)。

 なお、ListViewコントロールのデータソース(5)として、string型のObservableCollection(ここでは、_tweetsとしている)を定義している(1)。事後、取得したデータをこの_tweetsに詰め込むと、ListViewコントロールに表示される仕組みである。

 このコードを実行すると次のような画面になる。

図5 画面の構成(iOS) 図5 画面の構成(Android)
図5 画面の構成(iOS/Android)

5. CoreTweetによるTwitter検索

 CoreTweetを使用してTwitterを検索するため、App.csファイルを以下のように修正する。

C#
……省略……

namespace TwitterClientSample {

  ……省略……

  private class MyPage : ContentPage {

    public MyPage() {

      ……省略……

      var button = new Button {
        WidthRequest = 80,
        Text = "Search"
      };
      button.Clicked += (s, a) => {
        Refresh(entry.Text); // <-1
      };

      ……省略……
    }

    async void Refresh(string keyword) { // <-2

      const string ApiKey = "API_KEY"; // <-3
      const string ApiSecret = "API_SECRET"; // <-4
      const string AccessToke = "ACCESS_TOKEN"; // <-5
      const string AccessTokeSecret = "ACCESS_TOKEN_SECRET"; // <-6

      var tokens = CoreTweet.Tokens.Create(ApiKey, ApiSecret, AccessToke, AccessTokeSecret); // <-7
      var result = await tokens.Search.TweetsAsync(count => 100, q => keyword); // <-8
      _tweets.Clear();
      foreach (var tweet in result) {
        _tweets.Add(tweet.Text); // <-9
      }
    }

  }
}
CoreTweetを使用してTwitterを検索するコード(App.cs)

 Twitterを検索して、ListViewコントロールのデータソースを初期化するファンクションとしてRefreshメソッドを定義し(2)、Buttonコントロールをクリックしたイベントで、これを呼び出す(1)。

 CoreTweetを使用してTwitter検索を実施するには、最初にTokensクラス(CoreTweet名前空間)のインスタンスを生成する(ここでは、tokensとした)。なお、この際にAPI_KEYなどの4つのキー(2345)が必要であるが、これらは、Twitterデベロッパーセンターの[Application Management]ページで取得する(コラム2参照)

 tokensが取得できると、Twitterを操作する各種のメソッドが利用可能になるが、そのうちの一つである、Search.TweetsAsyncメソッドで、指定した文字列でのTwitter検索ができる(8)。検索した結果は、SearchResult型(CoreTweet名前空間)のデータとして取得できるが、このデータはコレクション型となっているので、foreachを使用して_tweetsに追加した(9)。

【コラム2】Twitterキーの取得方法

 TwitterのAPIを利用するためには、アプリケーションの登録が必要である。新規にアプリケーションを登録するには、Twitterデベロッパーセンターの下部右端にある[TOOLS]-[Manage Your Apps]リンクをクリックして開き、次に表示されるページ上の[Create New App]ボタンから行う。

 ボタンクリックにより表示される[Application Management]ページでアプリケーションを作成・登録することにより(その手順の説明は割愛)、次の画面のように[Keys and Access Tokens]タブで[API Key]や[Access Token](そのページ上で作成)の取得が可能である。

[Application Management]のページ

 このコードを実行すると次のような画面になる。

図6 Twitter検索を実行した画面(iOS) 図6 Twitter検索を実行した画面(Android)
図6 Twitter検索を実行した画面(iOS/Android)

6. まとめ

 今回は、CoreTweetを使用した、Twitter検索するアプリ作成の第1回として、CoreTweetの導入と、検索したテキストの表示まで紹介した。

 次回は、ListViewコントロールの表示を拡張し、最初に紹介したような、ユーザー名、登録日付、アイコンなどをレイアウトした画面の作成を行う。

※以下では、本稿の前後を合わせて5回分(第50回~第54回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

Xamarin逆引きTips
50. Xamarin.Formsでローカルデータベースを使用するには?

アプリを終了して再起動したときに、ユーザーデータを復活させたい場合、ローカルやクラウドにデータを保存することになる。その一つの方法として、SQLite.Netを使ってローカルDBに保存する方法を説明する。

Xamarin逆引きTips
51. MvvmCrossでカスタムコンバーターを作成するには?

MvvmCrossでのiOS/Androidアプリ開発において、バインディングする値を変換できるカスタムコンバーターの使い方を説明する。

Xamarin逆引きTips
52. 【現在、表示中】≫ Xamarin.FormsでTwitterクライアントを作成するには?

TwitterのAPIを扱えるライブラリであるCoreTweetを使用して、Twitterデータを検索するアプリを作成。CoreTweetの導入と、検索したテキストの表示までを紹介する。

Xamarin逆引きTips
53. MvvmCrossでWebBrowserプラグインを使用するには?

WebBrowserプラグインを追加・利用する例を通じて、MvvmCrossでのiOS/Androidアプリ開発におけるMvvmCrossプラグインの基本的な使い方を説明する。

Xamarin逆引きTips
54. コードを書く前に正規表現をテストするには?(.NET/Xamarin対応)

.NET/Monoの基本クラスライブラリを使って正規表現を書く場合、そのテストはどうする? Xamarin Studioの正規表現ツールキットを使って手軽に行う方法を紹介。

サイトからのお知らせ

Twitterでつぶやこう!