コントロールの配置
ツールボックスからデザイン画面上に「ユーザー名」と「投稿内容」を入力するTextBoxコントロールを2個配置します。「投稿内容」を入力するTextBoxには、AcceptReturnプロパティのチェックを付けて、改行の入力を可能にしています。
[戻る]、[OK]、[投稿]用のButtonコントロールを3個配置します。[戻る]と[投稿]用のボタンは最初の状態では使用不可としておきます。
タイトルやメッセージを表示するTextBlockコントロールを3つ配置します。次回解説するFacebookLoginPageを表示するFrameコントロールを1個配置しておきます。
書き出されるXAMLコードはリスト1、レイアウトは図13になります。
リスト1 書き出されたXAMLコード(MainPage.xaml)
(1)「投稿内容」と「ユーザー名」とを入力する要素を配置しています。「投稿内容」の要素のAcceptReturnプロパティにTrueが指定され、改行の入力が可能になっています。また、MaxLenghtプロパティに140と指定して、入力可能な文字数を140文字に限定しています。
(2)[戻る]、[OK]、[投稿]用の要素を配置しています。[戻る]と[投稿]用のボタンは最初の状態では使用不可としています。
(3)FacebookLoginPageを表示する要素を配置しています。
02
x:Class="Win8_Twitter.MainPage"
04
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
07
xmlns:local="using:Win8_Twitter"
12
<Grid Background="{StaticResourceApplicationPageBackgroundThemeBrush}">
13
<TextBoxx:Name="postTextBox" HorizontalAlignment="Left" Height="225" Margin="626,93,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="554" AcceptsReturn="True" MaxLength="140" FontFamily="Meiryo UI" FontSize="24"/>■(1)
14
<Button Content="投稿" HorizontalAlignment="Left" Height="66" Margin="831,332,0,0" VerticalAlignment="Top" Width="217" x:Name="Button1" FontFamily="Meiryo UI" FontSize="36" IsEnabled="False"/>■(2)
15
<TextBlockHorizontalAlignment="Left" Height="33" Margin="27,40,0,0" TextWrapping="Wrap" Text="ユーザー名:" VerticalAlignment="Top" Width="139" FontFamily="Meiryo UI" FontSize="24" Visibility="Collapsed"/>
16
<TextBoxx:Name="userTextBox" HorizontalAlignment="Left" Height="43" Margin="173,125,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="300" FontFamily="Meiryo UI" FontSize="24" AcceptsReturn="True" />■(1)
17
<Button x:Name="okButton" Content="OK" HorizontalAlignment="Left" Height="52" Margin="478,120,0,0" VerticalAlignment="Top" Width="83" FontFamily="Meiryo UI" FontSize="22" />■(2)
18
<Button Content="戻る" HorizontalAlignment="Left" Height="66" Margin="12,102,0,0" VerticalAlignment="Top" Width="136" x:Name="backButton" FontFamily="Meiryo UI" FontSize="36" IsEnabled="False"/>■(2)
19
<Frame x:Name="myFrame" HorizontalAlignment="Left" Height="680" Margin="148,78,0,0" VerticalAlignment="Top" Width="1190"/>■(3)
20
<TextBlockx:Name="userNameTextBlock" HorizontalAlignment="Left" Height="36" Margin="173,84,0,0" TextWrapping="Wrap" Text="ユーザー名を入力してください" VerticalAlignment="Top" Width="287" FontFamily="Meiryo UI" FontSize="22" Foreground="Gold"/>
21
<TextBlockHorizontalAlignment="Left" Height="63" Margin="48,10,0,0" TextWrapping="Wrap" Text="TwitterとFacebookへの同時投稿。ただしテキストのみ。" VerticalAlignment="Top" Width="1308" FontFamily="Meiryo UI" FontSize="48" Foreground="Crimson"/>
図13:各コントロールを配置した(クリックで拡大)
次に、ソリューションエクスプローラー内のMainWindow.xamlを展開して表示される、MainWindow.xaml.vbをダブルクリックしてリスト2のコードを記述します。
ロジックコードを記述する
リスト2 (MainWindow.xaml.vb)
LINQ to Twitterを使うためのクラスの含まれる、LinkToTwitter名前空間を読み込みます。
3
Public NotInheritable Class MainPage
「LINQ To Twitter Betaに必要な情報を取得」で取得した、「CONSUMER_KEY」、「CONSUMER_SECRET」、「ACCESSTOKEN」、「ACCESSTOKENSECRET」を定数メンバ変数として宣言します。
1
Const myConsumerKey As String = "取得したコンシューマーキー"
2
Const myConsumerSecret As String = "取得したコンシューマーシークレットキー"
3
Const myAccessToken As String = "取得したアクセストークンキー"
4
Const myAcessTokenSecret As String = "取得したアクセストークンシークレットキー"
新しいSingleUserAuthorizerクラスのインスタンス、myAuthオブジェクトを作成します。SingleUserAuthorizerでは、資格情報を所有するユーザーのためのOAuthの承認を実行することができます。
1
Dim myAuth As New SingleUserAuthorizer
資格情報のストレージを管理するInMemoryCredentialsクラスの新しいインスタンス、myCredentialオブジェクトを作成します。
1
Dim myCredential As New InMemoryCredentials
[OK]ボタンがクリックされた時の処理
「ユーザー名」が未入力の場合は処理を抜けます。「ユーザー名」が入力された場合の処理です。
Focusメソッドで「投稿内容」入力ボックスにフォーカスを移します。[投稿]ボタンの使用を可能にします。
資格情報のストレージを管理するInMemoryCredentialsクラスの、ConsumerKey、ConsumerSecret、OAuthToken、AccessTokenプロパティに、宣言しておいた定数メンバ変数の値を指定します。
myAuthオブジェクトのCredentialプロパティに各コンシューマーとアクセストークンキーの指定されたmyCredentialオブジェクトを指定します。これで、Twitterへの認証が完了します。
Twitterの投稿内夜を表すクラスであるTwitterContextクラスのインスタンス、myTwitterContextオブジェクトを作成します。
特定のデータソースに対するクエリを評価する機能を提供する、IQueryableインターフェース型のmySearchResponse変数を宣言します。
IQueryableのデータ型はIQueryable(Of LinqToTwitter.Search)と指定します。
Typeが検索を表すSearchで、かつ、クエリを表すQueryがuserTextBoxに入力した「ユーザー名」の投稿内容を取得します。
もし投稿内容の個数が0の場合は、つまり、指定した「ユーザー名」が存在しない場合は、「ユーザー名」入力欄にフォーカスを移し、[投稿]ボタンの使用を不可とします。FocusState列挙体については下記のURLを参考にしてください。ここで指定している、Programmaticは、要素がフォーカスする意図的なコール、または関連するAPIを介してフォーカスを取得したことを意味します。
→ FocusState enumeration
※Twitterには膨大な数のユーザーが存在します。間違えずに自分のユーザー名を入力するように気を付けてください。
01
Private Sub okButton_Click(sender As Object, e As RoutedEventArgs) Handles okButton.Click
02
If userTextBox.Text = String.Empty Then
05
postTextBox.Focus(Windows.UI.Xaml.FocusState.Programmatic)
06
postButton.IsEnabled = True
08
.ConsumerKey = myConsumerKey
09
.ConsumerSecret = myConsumerSecret
10
.OAuthToken = myAccessToken
11
.AccessToken = myAcessTokenSecret
13
myAuth.Credentials = myCredential
15
Dim myTwitterContext As New TwitterContext()
16
Dim mySearchResponse As IQueryable(Of LinqToTwitter.Search) = Nothing
17
mySearchResponse = From tweet In myTwitterContext.Search Where tweet.Type = SearchType.SearchAndAlsotweet.Query = userTextBox.Text
18
If mySearchResponse.Count = 0 Then
19
userTextBox.Focus(Windows.UI.Xaml.FocusState.Programmatic)
20
postButton.IsEnabled = False
[投稿]ボタンがクリックされた時の処理
投稿内容が未入力の場合は処理を抜けます。投稿内容が入力された場合の処理です。
「ユーザー名」の入力ボックスを非表示にします。[戻る]ボタンの使用を可能にします。
Twitter ライブラリに LINQ で利用可能ないくつかの承認者の1つである、PinAuthorizerクラスの新しいインスタンスmyPinオブジェクトを作成します。
myPinオブジェクトのCredentialsプロパティに、各コンシューマーとアクセストークンキーの指定されたmyCredentialオブジェクトを指定します
Authorizeメソッドで承認します。
全てのクエリが自動的に、Twitterには権限があることを証明する情報で飾られていますので、権限付与者にTwitterContextのインスタンスを渡します。
UpdateStatusメソッドで投稿内容の状態を更新します。FrameのNavigateメソッドでFacebookLoginPage(後編で作成)に遷移します。その際、投稿内容を引数として渡します。
01
Private Sub postButton_Click(sender As Object, e As RoutedEventArgs) Handles postButton.Click
02
If postTextBox.Text = String.Empty Then
05
userNameTextBlock.Visibility = Windows.UI.Xaml.Visibility.Collapsed
06
myFrame.Visibility = Windows.UI.Xaml.Visibility.Visible
07
backButton.IsEnabled = True
08
Dim myPin As New PinAuthorizer
09
myPin.Credentials = myCredential
12
myTwitterContext.UpdateStatus(postTextBox.Text)
13
myFrame.Navigate(GetType(FacebookLoginPage), postTextBox.Text)
[戻る]ボタンがクリックされた時の処理
「ユーザー名」の入力ボックスを表示します。
myFrameを非表示にし、[戻る]ボタンを使用不可とします。
1
Private Sub backButton_Click(sender As Object, e As RoutedEventArgs) Handles backButton.Click
2
userNameTextBlock.Visibility = Windows.UI.Xaml.Visibility.Visible
3
myFrame.Visibility = Windows.UI.Xaml.Visibility.Collapsed
4
backButton.IsEnabled = False
ページが読み込まれた時の処理
Focusメソッドで、「ユーザー名」入力ボックスにフォーカスを移します。
1
Private Sub MainPage_Loaded(sender As Object, e As RoutedEventArgs) Handles Me.Loaded
2
userTextBox.Focus(Windows.UI.Xaml.FocusState.Programmatic)
今回はここまでです。ありがとうございました。