次の方法で共有

  • [アーティクル]

クラウディアと Twitter でコミュニケーションするアプリケーションを作ってみよう

更新日: 2011 年 11 月 11 日

Zip Fileダウンロード (Zip、2.16 MB)

Windows Phone はソーシャル ネットワークに簡単に接続できるスマートフォンです。People ハブから友人の状況を確認したり、ME タイルから自分自身の状況を更新したりできます。この記事では、クラウディアとコミュニケーションするアプリケーションを作ってみましょう。図 1 のようなタイル「Claudia Tweets」で表示されるので、クラウディア タイルと呼んでもいいでしょう。

「Claudia Tweets」は、図 2 のような画面で、次の 3 つの機能を持ったアプリケーションにします。

  • クラウディアに関するツィートを表示する
  • クラウディアのツィートを表示する
  • Windows Phone の機能でメッセージ投稿する


図 1: スタート画面に表示された Claudia Tweets のタイル


図 2: アプリケーションの画面例とアプリケーション メニュー

ページのトップへ

事前準備

ページのトップへ

手順 1: 新しいプロジェクトの作成

Visual Studio 2010 を起動し、メニューから [ファイル] → [新しいプロジェクト] を選び、図 3 のように、左ペインから [インストールされたテンプレート] → [Visual C#] → [Silverlight for Windows Phone] を選択し、[Windows Phone アプリケーション] テンプレートを指定します。名前を「ClaudiaTweets」と入力し、[OK] ボタンをクリックします。


図 3: 新しいプロジェクトの作成

ページのトップへ

手順 2: 対象の Windows Phone OS バージョンの確認

図 4 のように対象の Windows Phone OS のバージョンが [Windows Phone OS 7.1] となっていることを確認し、[OK] ボタンをクリックします。


図 4: Windows Phone OS のバージョン

ページのトップへ

手順 3: プロジェクトにクラウディアの画像素材を追加

Visual Studio のメニューから [プロジェクト] → [既存項目の追加] を選び、解凍したクラウディアの画像素材から「クラウディアSD4.jpg」(図 5) を追加します。追加した後、ソリューション エクスプローラーは、図 6 のようになります。


図 5: クラウディアSD4.jpg


図 6: 素材を追加した直後のソリューション エクスプローラー

ページのトップへ

手順 4: フィードを処理するクラス ライブラリの参照

RSS や ATOM フィードを処理する Silverlight のクラス ライブラリ、SyndicationFeed クラスを利用できるように、参照設定を行います。Visual Studio 2010 のメニューから [プロジェクト] → [参照の追加] を選びます。ファイルの場所は、お使いの OS が 32 ビット版か、64 ビット版かによって変わります。

32 ビット: C:\Program Files\Microsoft SDKs\Silverlight\v4.0\Libraries\Client

64 ビット: C:\Program Files (x86)\Microsoft SDKs\Silverlight\v4.0\Libraries\Client

図 7 のように、「System.ServiceModel.Syndication.dll」を選択して、[OK] をクリックします。


図 7: 参照の追加

ページのトップへ

手順 5: アプリケーション画面の作成

MainPage.xaml をリスト 1 のように編集し、アプリケーションの画面を作成します。太字の部分が変更されている部分になります。

リスト 1: MainPage.xaml

<phone:PhoneApplicationPage
    x:Class="ClaudiaTweets.MainPage"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://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="https://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="https://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"
    Language="ja-jp"
    >
    <phone:PhoneApplicationPage.Resources>
        <DataTemplate x:Key="SyndicationItemTemplate">
            <StackPanel Orientation="Horizontal" Width="460">
                <Image Height="91" Width="91" Source="{Binding Links[1].Uri}" Margin="4"/>
                <StackPanel Orientation="Vertical" Width="350">
                    <TextBlock Text="{Binding Authors[0].Name}" FontWeight="Bold" >
                    <TextBlock.Foreground>
                        <SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>
                    </TextBlock.Foreground>
                    </TextBlock>
                    <TextBlock TextWrapping="Wrap" Text="{Binding Title.Text}" />
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </phone:PhoneApplicationPage.Resources>

    <!--LayoutRoot は、すべてのページ コンテンツが配置されるルート グリッドです-->
    <Grid x:Name="LayoutRoot" Background="Transparent" >
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel は、アプリケーション名とページ タイトルを格納します-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="クラウディア" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="@Claudia_Azure" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" FontSize="64" />
        </StackPanel>

        <!--ContentPanel - 追加コンテンツをここに入力します-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Image Source="クラウディアSD4.jpg" Stretch="UniformToFill" Opacity="0.3"/>
            <ListBox ItemTemplate="{StaticResource SyndicationItemTemplate}" ItemsSource="{Binding Items}"/>
        </Grid>
    </Grid>

    <!--ApplicationBar の使用法を示すサンプル コード-->
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Mode="Minimized">
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem x:Name="menuSearch" Text="皆さんのメッセージを表示" Click="menuSearch_Click"/>
                <shell:ApplicationBarMenuItem x:Name="menuUserTimeline" Text="私のツィートを表示" Click="menuUserTimeline_Click"/>
                <shell:ApplicationBarMenuItem x:Name="menuShareStatus" Text="メッセージの投稿" Click="menuShareStatus_Click"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

</phone:PhoneApplicationPage>

ページのトップへ

手順 6: アプリケーション機能の実装

MainPage.xaml.cs をリスト 2 のように編集し、アプリケーションの機能を実装します。太字部分が変更されている場所になります。

リスト 2: MainPage.xaml.cs

using System;
using System.Net;
using System.Windows;
using Microsoft.Phone.Controls;
using System.IO;
using System.Xml;
using System.ServiceModel.Syndication;
using Microsoft.Phone.Tasks;

namespace ClaudiaTweets
{
    public partial class MainPage : PhoneApplicationPage
    {
        // アプリケーションで利用するTwitterのユーザーIDを指定する
        private readonly string TwitterId = "Claudia_Azure";
        // コンストラクター
        public MainPage()
        {
            InitializeComponent();
            GetTweets(TwitterId);
        }
        // 指定したユーザーに関するツィートを検索して表示する
        private void GetUserTimeline(string strId)
        {
            Uri u = new Uri(String.Format("http://twitter.com/statuses/user_timeline/{0}.atom", strId), UriKind.Absolute);
            WebClient cli = new WebClient();
            cli.DownloadStringCompleted += new DownloadStringCompletedEventHandler(cli_DownloadStringCompleted);
            cli.DownloadStringAsync(u);
        }

        // 指定したユーザーのタイムラインを表示する
        private void GetTweets(string strId)
        {
            Uri u = new Uri("http://search.twitter.com/search.atom?rpp=50&q=" + HttpUtility.UrlEncode(strId));
            WebClient cli = new WebClient();
            cli.DownloadStringCompleted += new DownloadStringCompletedEventHandler(cli_DownloadStringCompleted);
            cli.DownloadStringAsync(u);
        }

        // 通信を実行し、結果を画面に表示する
        void cli_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
        {
            if (e.Error != null)
            {
                MessageBox.Show("通信エラーが発生しました。\r\n" + e.Error.Message);
                return;
            }
            StringReader sr = new StringReader(e.Result);
            XmlReader xr = XmlReader.Create(sr);
            SyndicationFeed sf = SyndicationFeed.Load(xr);
            this.DataContext = sf;
        }
        // [皆さんのメッセージを表示]メニューが選択された時の処理
        private void menuUserTimeline_Click(object sender, System.EventArgs e)
        {
            GetUserTimeline(TwitterId);
        }

        // [私の表示]メニューが選択された時の処理
        private void menuSearch_Click(object sender, System.EventArgs e)
        {
            GetTweets(TwitterId);
        }

        // [メッセージの投稿]メニューが選択された時の処理
        private void menuShareStatus_Click(object sender, EventArgs e)
        {
            if (Microsoft.Devices.Environment.DeviceType == Microsoft.Devices.DeviceType.Device)
            {
                ShareStatusTask t = new ShareStatusTask();
                t.Status = "@" + TwitterId + "、がんばって！";
                t.Show();
            }
            else
            {
                MessageBox.Show("エミュレータ上ではメッセージの投稿機能をご利用いただけません。");
            }
        }
    }
}

ページのトップへ

手順 7: テスト実行と確認

[F5] キーを押して、Windows Phone Emulator 上でアプリケーションを実行します。

画面下部の [...] をタップして、メニューを表示し、それぞれ試しましょう。

ページのトップへ

手順 8: アプリケーション タイルの作成

Windows Phone Icon Maker を起動します。起動後は、図 8 のように表示されます。解凍したクラウディアの画像素材から「クラウディア正面1.jpg」を Windows Phone Icon Maker にドラッグ アンド ドロップし、プロジェクト名に「ClaudiaTile」と入力し、[アイコン保存] をクリックし、図 9 のようにタイルを作成します。クラウディアの画像素材が入っているフォルダー内に [ClaudiaTile Icons] というフォルダーが作られていることを確認しましょう。


図 8: Windows Phone Icon Maker の起動直後の画面


図 9: タイルを作成した後の Windows Phone Icon Maker

ページのトップへ

手順 9: 作成したタイルをプロジェクト ファイルへ追加

Visual Studio 2010 のメニューから [プロジェクト] → [既存項目の追加] を選び、図 10 のように手順 8 で作成したフォルダーにある、ApplicationIcon.png、Background.png を選択し、[追加] ボタンをクリックして、プロジェクトに追加します。図 11 のような「ターゲット ファイルが存在します」というダイアログが表示されますので [すべての項目に適用] にチェックして、[OK] をクリックしましょう。ApplicationIcon.png と Background.png が上書きされて、クラウディアの顔に変わります。


図 10: アプリケーション タイルの追加


図 11: 確認ダイアログ

ページのトップへ

手順 10: アプリケーション タイルの表示確認

[F5] キーを押して、アプリケーションを実行し、Windows Phone Emulator 上で戻るボタンをクリックして、アプリケーションを終了します。その後、図 12 のようにアプリケーション リストから Claudia Tweets アプリケーションの上でマウスの左ボタンを長押しし、メニューからスタート画面に追加しましょう。スタート画面には、図 1 のように「Claudia Tweets」のタイルが表示されます。


図 12: アプリケーション リストからスタート画面に追加

ページのトップへ

手順 11: 実機での動作確認 (オプション)

Windows Phone の開発者登録されたデバイスをお持ちの場合は、図 13 のように展開先を Windows Phone Device に変更し、[F5] キーを押してアプリケーションを Windows Phone デバイス上で実行しましょう。


図 13: アプリケーションの展開先を Windows Phone Device に変更

ページのトップへ

まとめ

この記事では、クラウディアを題材に、Twitter から情報を取り出す方法と Windows Phone からメッセージを投稿する方法を紹介しました。手順 6 の TwitterId を他のユーザーに変更すれば、別のアプリケーションに変身しますので、お試しください。

ページのトップへ