Facebook SDK for .NETを使い、アプリから画像をFacebookに投稿させるには：2カ月で160本作った還暦開発者が送る10のアプリ開発ノウハウ（4）（4/5 ページ）

[薬師寺国安，PROJECT KySS]

メイン画面のロジックコード（MainWindow.xaml.vb）

　次に、［ソリューション・エクスプローラー］内のMainWindow.xamlを展開して表示される、「MainWindow.xaml.vb」のコードを記述する。

　ここでは、コードが長くなるため、名前空間の読み込み、メンバー変数の宣言は一部省略している。全てのコードは、サンプルをダウンロードして「MainWindow.xaml.vb」ファイルで確認してほしい。

メイン画面で「画像を開く」アイコンがタップされた時の処理（openFileButton_Clickメソッド処理）

    Private Async Sub openFileButton_Click(sender As Object, e As RoutedEventArgs) Handles openFileButton.Click
        saveBmp = New BitmapImage
        Dim myFileOpenPicker As New FileOpenPicker
        myFileOpenPicker.ViewMode = PickerViewMode.Thumbnail
        myFileOpenPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary
        myFileOpenPicker.FileTypeFilter.Add(".jpg")
        myFileOpenPicker.FileTypeFilter.Add(".png")
        myFile = Await myFileOpenPicker.PickSingleFileAsync()
        If myFile Is Nothing = False Then
            FileName = myFile.Path
            saveBmp.SetSource(Await myFile.OpenReadAsync)
            If saveBmp.PixelWidth <> 640 OrElse saveBmp.PixelHeight <> 480 Then
                Dim message As New MessageDialog("640×480サイズの画像を指定してください")
                Await message.ShowAsync
                Exit Sub
            Else
                LoginButton.IsEnabled = True
                Image1.Source = saveBmp
            End If
        Else
            Exit Sub
        End If
    End Sub

　以降、上記コードの中身を詳細に見ていこう。

　まず、非同期処理で行われるためメソッドの先頭にAsyncを追加している。

　次に、新しいBitmapImageのインスタンスsaveBmpオブジェクトを作成する。

　FileOpenPickerクラスの新しいインスタンスmyFileOpenPickerオブジェクトを作成する。FileOpenPickerクラスは、ユーザーが選択し、ファイルを開くことのできるUI要素を表すクラスだ。

　ファイルの表示モードを指定するViewModeプロパティにサムネイル表示を指定する。サムネイル表示のほかにリスト（List）表示がある。ファイルを開く最初の場所を設定する、SuggestedStartLocationプロパティにピクチャライブラリ―を指定しておく。

　開くファイルタイプを指定するFileTypeFilter.Addで「.png」と「.jpg」を指定しておく。PNGファイルを指定する場合は、「FileTyleFilter.Add(".png")」と指定する。"*.png"ではないので注意してほしい。

　PickSingleFileAsynメソッドで、ユーザーが1つのファイルを選択できるようにファイルピッカーを表示し、モジュール変数myFileで参照する。モジュール変数myFileがファイルを参照している場合は、選択された画像のファイルシステムパス名（myFile.Path）を、モジュール変数FileNameに格納しておく。

　新しいBitmapImageクラスのインスタンスsaveBmpオブジェクトに、SetSourceメソッドで「Await myFile.OpenReadAsync」と指定して、ファイルの内容を読み込むために、現在のファイルを、ランダムアクセスストリームで開く。

　もし指定したファイルの画像サイズが640×480より大きかった場合は、メッセージを表示し、処理を抜ける。そうでない場合は、LoginButtonの使用を可能にし、Image1のSourceプロパティにsaveBmpオブジェクトを指定する。これで、ファイルピッカーで指定したファイルが表示される。

メイン画面で「Facebookにログイン」ボタンがタップされた時の処理（LoginButton_Clickメソッド処理）

    Private Sub LoginButton_Click(sender As Object, e As RoutedEventArgs) Handles LoginButton.Click
        backButton.Visibility = Xaml.Visibility.Visible
        logoImage.Visibility = Xaml.Visibility.Collapsed
        openFileButton.Visibility = Xaml.Visibility.Collapsed
        myFrame.Visibility = Xaml.Visibility.Visible
        myFrame.Navigate(GetType(FacebookLoginPage), saveBmp)
    End Sub

　「←（戻る）」アイコンを表示し、ロゴの画像を非表示にする。「画像を開く」アイコンを非表示にする。myFrameを表示し、NavigateメソッドでsaveBmpを引数に「FacebookLoginPage」に遷移する。

「←（戻る）」アイコンがタップされた時の処理（backButton_Clickメソッド処理）

    Private Sub backButton_Click(sender As Object, e As RoutedEventArgs) Handles backButton.Click
        logoImage.Visibility = Xaml.Visibility.Visible
        openFileButton.Visibility = Xaml.Visibility.Visible
        myFrame.Visibility = Xaml.Visibility.Collapsed
        backButton.Visibility = Xaml.Visibility.Collapsed
    End Sub

　ロゴの画像を表示し、［画像を開く］アイコンを表示し、myFrameを非表示にする。「←（戻る）」アイコンも非表示にする。

Facebookログイン画面のロジックコード

　次に［ソリューション・エクスプローラー］内の「FacebookLoginPage.xaml」を展開して表示される、「FacebookLoginPage.xaml.vb」のコードを記述する。

‘　定数メンバー変数ExtendedPermissionsにFacebookのパーミッションを指定しておく。
‘　Facebookのパーミッションについては、下記のページを参照してほしい。
‘　http://facebook-docs.oklahome.net/archives/51927681.html
    Const ExtendedPermissions As String = "user_about_me,publish_stream,offline_access,user_photos,read_stream"
‘　定数メンバー変数AppIDに取得したApp IDを指定しておく。
    Const AppID As String = "取得したApp ID"
‘　定数メンバー変数AppSecretに取得したApp Secretを指定しておく。
    Const AppSecret As String = "取得したApp Secret"

Facebookログイン画面がアクティブになった時の処理（OnNavigatedToメソッド処理）

    Protected Overrides Sub OnNavigatedTo(e As Navigation.NavigationEventArgs)
        myFB = New FacebookClient
        myBmp = CType(e.Parameter, BitmapImage)
    End Sub

　新しいFacebookClientのインスタンスmyFBオブジェクトを作成する。MainPage.xamlの「Facebookにログイン」ボタンクリックで送られた画像を、e.Parameterで受け取り、メンバー変数myBmpで参照しておく。

WebViewコントロールが読み込まれた時の処理（WebView1_Loadedメソッド処理）

    Private Sub WebView1_Loaded(sender As Object, e As RoutedEventArgs) Handles WebView1.Loaded
        Dim loginUrl = GetFacebookLoginUrl(AppID, ExtendedPermissions)
        WebView1.Navigate(loginUrl)
    End Sub

　GetFacebookLoginUrl関数にAppIDと、メンバー変数で指定したパーミッションを指定して、Uri型のオブジェクトloginUrlに格納する。

　WebViewのNavigateメソッドにloginUrlを指定する。これで、初めてFacebookにアクセスする場合は、認証の画面が表示されることになる。

Facebookにログインする関数（GetFacebookLoginUrl関数）

    Private Function GetFacebookLoginUrl(AppID As String, extendedPermissions As String) As Uri
        Dim parameters As Object
        parameters = New ExpandoObject()
        parameters.client_id = AppID
        parameters.redirect_uri = "https://www.facebook.com/connect/login_success.html"
        parameters.response_type = "token"
        parameters.display = "popup"
        If Not String.IsNullOrWhiteSpace(extendedPermissions) Then
            parameters.scope = extendedPermissions
        End If
        Return myFB.GetLoginUrl(parameters)
    End Function

　実行時にメンバーを動的に追加および削除できるオブジェクトであるExpandObjectクラスのインスタンス、parametersオブジェクトを作成し、client_id、redirect_uri、response_type、displayに各値を指定する。

　メンバー変数extendedPermissionsが、Nullまたは空、または空白文字だけで構成されていない場合は、scopeにメンバー変数extendedPermissionsの値を指定する。

　最後に、parametersを引数にFacebookのOAuthログインurlを取得し、戻り値とする。

ナビゲーションが完了して、コンテンツがWebViewコントロールに読み込まれた時の処理（WebView1_LoadCompletedメソッド処理）

    Private Sub WebView1_LoadCompleted(sender As Object, e As Navigation.NavigationEventArgs) Handles WebView1.LoadCompleted
        Dim oauthResult As FacebookOAuthResult = Nothing
        If Not myFB.TryParseOAuthCallbackUrl(e.Uri, oauthResult) Then
            Return
        Else
            WebView1.Visibility = Windows.UI.Xaml.Visibility.Collapsed
            myFrame.Navigate(GetType(MainPage), Nothing)
        End If
        If oauthResult.IsSuccess = True Then
            myFB = New FacebookClient() With {.AppId = AppID, .AppSecret = AppSecret}
            accessToken = oauthResult.AccessToken
            LoginSucceded(accessToken)
        Else
        End If
    End Sub

　Facebookの認証結果を表すFacebookOAuthResultクラス用オブジェクト変数oauthResultを宣言する。

　ログインに成功しなかった場合は、WebView1を非表示にして、MainPageに遷移し、認証が成功した場合は、FacebookClientをAppIDとAppSecretキーで初期化する。

　アクセストークンを取得して、モジュールで宣言しているPublic変数accessTokenに格納。accessTokenを引数にLoginSucceded関数を実行する。

ログインが成功した場合の関数（LoginSucceded関数）

    Private Async Sub LoginSucceded(accessToken As String)
        Dim parameters As Object
        parameters = New ExpandoObject()
        parameters.access_token = accessToken
        parameters.fields = "id"
        Dim result = Await myFB.GetTaskAsync("me", parameters)
        parameters.access_token = accessToken
        WebView1.Visibility = Windows.UI.Xaml.Visibility.Collapsed
        myFrame.Navigate(GetType(FacebookInfoPage), myBmp)
    End Sub

　非同期処理で行われるため、メソッドの先頭にAsyncを追加し、実行時にメンバーを動的に追加および削除できるオブジェクトであるExpandObjectクラスのインスタンス、parametersオブジェクトを作成する。

　GetTaskAsyncメソッドのパスに"me"、パラメータにparameters変数の値を指定して、Facebookサーバに非同期のGETリクエストを送信する。

　access_tokenにモジュールで宣言しているPublic変数accessTokenの値を指定し、WebViewコントロールを非表示にし、FrameのNavigateメソッドで、選択された画像を引数にFacebookInfoPageに遷移する。