Windows Phoneアプリケーション開発入門

第40回 Facebook C# SDKを使ってみよう!(1)

この記事を読むのに必要な時間:およそ 5 分

Facebook C# SDKの導入

さて,ここからがWindows Phoneアプリケーション側のお話になります。

「Facebook C# SDK」は,Facebookとクライアント間でのOAuth認証やウォールへのステータスやリンクの投稿,友達リストの取得など,さまざまな機能を簡単に扱えるようにしたSDKです。

ここでは別段取り上げませんが,同じマネージコードを利用しているASP.NET MVCやデスクトップWindowsのWPFでも同じ使い勝手でこのSDKが利用できるようです。

右にダウンロードページへのリンクがありますので,ビルド済みのアセンブリファイル一式をダウンロードします。執筆時点の最新ビルドはv5.3.2でしたので,使用方法についてはこのバージョン基準にて合わせています。

画像

アセンブリファイルはzip形式で提供されていますので,任意のフォルダに解凍しておきます。解凍するとWindows Phone向けのビルドが「sl3-wp」フォルダに格納されています。使用するのは下記の3ファイルです。

  • Facebook.dll
  • Facebook.pdb
  • Facebook.xml

後ほど,これらのファイルを自分のプロジェクトのフォルダに移動して,参照の追加をおこなっておいてください。

ユーザー認証は,ユーザー自身のFacebookへのログインと,今から作成するWindows Phoneアプリケーションを使ってFacebook APIを利用することに関しての許可をもらって,初めてアクセストークンが発行されます。

この認証の一連のやりとりはWebBrowserコントロールで実施する必要があるので,画面(MainPage.xaml)にはWebBrowserコントロールを用意しています。また,認証の最後にJavaScriptでアクセストークンを含んだURLへ遷移します。必ずWebBrowserコントロールのIsScriptEnabledプロパティを有効にしておくのを忘れないでください。

プロジェクトを新規に作成しましょう。プロジェクト名は「FacebookTest」とします。

XAML

Facebookのログインに必要なのはウェブブラウザだけですので,Navigatedイベントハンドラの定義と,IsScriptEnabledプロパティをTrueに設定します。

  <phone:WebBrowser Name="webBrowser" Navigated="webBrowser_Navigated" Grid.ColumnSpan="2" IsScriptEnabled="True" />

取得したアクセストークンやログインしたユーザー名を表示させるTextBlockも準備しておきます。ユーザー名を表示するためのTextBlockやApplicationBarIconButtonに関しては次回使用します。

<phone:PhoneApplicationPage 
    x:Class="FacebookTest.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" 
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="696" 
    FontFamily="{StaticResource PhoneFontFamilyNormal}" 
    FontSize="{StaticResource PhoneFontSizeNormal}" 
    Foreground="{StaticResource PhoneForegroundBrush}" 
    SupportedOrientations="Portrait" Orientation="Portrait" 
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="SOFTBUILD" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="FacebookTest" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.329*"/>
                <ColumnDefinition Width="0.671*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="0.8*"/>
                <RowDefinition Height="0.1*"/>
                <RowDefinition Height="0.1*"/>
            </Grid.RowDefinitions>
            <phone:WebBrowser Name="webBrowser" Navigated="webBrowser_Navigated" Grid.ColumnSpan="2" IsScriptEnabled="True" />
            <TextBlock Grid.Row="1" TextWrapping="Wrap" Text="AccessToken" d:LayoutOverrides="Width" VerticalAlignment="Center" Margin="12,0,0,0"/>
            <TextBlock Grid.Row="2" TextWrapping="Wrap" Text="Name" VerticalAlignment="Center" Margin="12,0,0,0"/>
            <TextBlock x:Name="textAccessToken" HorizontalAlignment="Left" Grid.Row="1" TextWrapping="Wrap" VerticalAlignment="Center" Margin="8,0,0,0" Grid.Column="1"/>
            <TextBlock x:Name="textName" HorizontalAlignment="Left" Grid.Row="2" TextWrapping="Wrap" VerticalAlignment="Center" Margin="8,0,0,0" Grid.Column="1"/>
        </Grid>
    </Grid>

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/icons/appbar.share.rest.png" Text="Update Statues"/>
            <shell:ApplicationBarIconButton IconUri="/icons/appbar.upload.rest.png" Text="Upload"/> 
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

</phone:PhoneApplicationPage>

以上で,XAML側の定義は完了です。

著者プロフィール

和田健司(わだけんじ)

1982年10月12日生まれ。大阪で働くプログラマ。Microsoft MVP for Device Application Development(Jul 2010 - Jun 2011)。Windows Mobileに傾倒し今に至る。Windows Mobile向けのTipsを書いています。iPhoneアプリ開発を始めました。嫌いな食べ物はカレー。

URL: http://ch3cooh.jp/
Blog: http://d.hatena.ne.jp/ch3cooh393/