Xamarin逆引きTips
Xamarin.FormsでTwitterクライアントを作成するには？
TwitterのAPIを扱えるライブラリであるCoreTweetを使用して、Twitterデータを検索するアプリを作成。CoreTweetの導入と、検索したテキストの表示までを紹介する。
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】CoreTweet
CoreTweetは、下記のリンク先で配布されているTwitter用のライブラリである。ほとんどのAPIでLINQが使用可能であり、また、async／awaitによる非同期によるアクセスにも対応している。
なお、GitHubでコードが公開されているだけでなく、本記事で紹介しているようにNuGetライブラリからも簡単にインストールが可能である。
2. Xamarin.Formsプロジェクトを作成する
メニューバーの［ファイル］－［新規作成］－［プロジェクト］から表示したダイアログで、［テンプレート］－［Visual C#］－［Mobile Apps］－［Blank App (Xamarin.Forms Portable)］を選択し、名前を「TwitterClientSample」として［OK］ボタンを押す。
3. CoreTweetパッケージの追加
CoreTweetは、NuGetパッケージで簡単にインストールできる。Visual StudioでのNuGetパッケージのインストールは、メニューバーの［ツール］－［NuGet パッケージマネージャー］－［ソリューションの NuGet パッケージの管理］を選択して表示された［NuGet パッケージの管理］ダイアログから行う。検索欄に「CoreTweet」と入力すると、目的のパッケージを簡単に見つけることができる。
図3の［インストール］ボタンを押した後、続いて表示される［プロジェクトの選択］ダイアログでは、全てのプロジェクトにチェックを入れて［OK］ボタンを押す（図4）。なお、この時点で、依存関係からNewtonsoft.Jsonパッケージも同時にインストールされる。
4. 画面の作成
最初に、画面を作成するためApp.csファイルを以下のように修正する。
|
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
}
};
}
}
}
}
|
2は、検索文字列を入力するためのEntryコントロールであり、3は、検索を開始するButtonコントロールである。Tweetの内容を表示するには、ListViewコントロールを使用し（4）、それぞれを、StackLayoutで配置した（6）。
なお、ListViewコントロールのデータソース（5）として、string型のObservableCollection（ここでは、_tweetsとしている）を定義している（1）。事後、取得したデータをこの_tweetsに詰め込むと、ListViewコントロールに表示される仕組みである。
このコードを実行すると次のような画面になる。
5. CoreTweetによるTwitter検索
CoreTweetを使用してTwitterを検索するため、App.csファイルを以下のように修正する。
|
……省略……
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
}
}
}
}
|
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］（※そのページ上で作成）の取得が可能である。
このコードを実行すると次のような画面になる。
6. まとめ
今回は、CoreTweetを使用した、Twitter検索するアプリ作成の第1回として、CoreTweetの導入と、検索したテキストの表示まで紹介した。
次回は、ListViewコントロールの表示を拡張し、最初に紹介したような、ユーザー名、登録日付、アイコンなどをレイアウトした画面の作成を行う。
※以下では、本稿の前後を合わせて5回分（第50回～第54回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
50. Xamarin.Formsでローカルデータベースを使用するには？
アプリを終了して再起動したときに、ユーザーデータを復活させたい場合、ローカルやクラウドにデータを保存することになる。その一つの方法として、SQLite.Netを使ってローカルDBに保存する方法を説明する。
51. MvvmCrossでカスタムコンバーターを作成するには？
MvvmCrossでのiOS／Androidアプリ開発において、バインディングする値を変換できるカスタムコンバーターの使い方を説明する。
52. 【現在、表示中】≫ Xamarin.FormsでTwitterクライアントを作成するには？
TwitterのAPIを扱えるライブラリであるCoreTweetを使用して、Twitterデータを検索するアプリを作成。CoreTweetの導入と、検索したテキストの表示までを紹介する。
53. MvvmCrossでWebBrowserプラグインを使用するには？
WebBrowserプラグインを追加・利用する例を通じて、MvvmCrossでのiOS／Androidアプリ開発におけるMvvmCrossプラグインの基本的な使い方を説明する。
54. コードを書く前に正規表現をテストするには？（.NET／Xamarin対応）
.NET／Monoの基本クラスライブラリを使って正規表現を書く場合、そのテストはどうする？ Xamarin Studioの正規表現ツールキットを使って手軽に行う方法を紹介。
