Xamarin.Forms(PCL)とCoreTweetでツイートしてみた。

  • 7
    Like
  • 1
    Comment
More than 1 year has passed since last update.

概要

Xamarinが楽しそうだったので、練習を兼ねて作ってみたものを投稿します。
単純に文字を入力してツイートするだけな簡単なアプリです。
iOSでもAndroidでも動作します(`・ω・´)

環境

  • MacOS X 10.11.5
  • Xamarin Studio Community 6.1(Alpha channel)

プロジェクトの種類

  • Xamarin.Forms FormApp
  • Shared CodeはPCL (Portable Class Library)

NuGetで導入するパッケージ

  • CoreTweet Version 0.5.3
  • CoreTweet.Streaming.Reactive Version 0.5.3
  • Corcav.Behaviors Version 2.1.1
    ※CoreTweetは、なぜか最新版が導入できず、導入できる中で最新のバージョンが0.5.3のため、
    CoreTweetは0.5.3を導入しています。(´・ω・`)
    (本件はコメントを頂いたのでそちらを参考にしてください)

なお、上記を導入すると下記が自動で入ります。

  • Newtonsoft.Json
  • Rx-Core
  • Rx-Interfaces
  • Rx-Linq

プロジェクト名

今回は、TwitterSample という名前で作りました。

注意事項

  • Androidで正しく動作させるには、AndroidManifest.xmlから「Internet」のPermissionを設定してください。
  • iOSのAppDelegate.cs内の LoadApplication(new App()); の前行に下記を追記してください。
    Corcav.Behaviors.Infrastructure.Init();

ソース

MainPage.xaml

XAMLでUIを書きます。
画面を横に向けた場合など、UIが画面外にはみ出た時に操作できなくなってしまうので、
StackLayoutをScrollViewで囲んでいます。

MainPage.xaml
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:behaviors="clr-namespace:Corcav.Behaviors;assembly=Corcav.Behaviors"
        x:Class="TwitterSample.MainPage">

    <ScrollView Padding="30,60,30,30">
        <StackLayout>
            <Label Text="Tweetするよ!" HorizontalTextAlignment="Center" />

            <Editor Text="{Binding TweetText,Mode=TwoWay}" HeightRequest="200" BackgroundColor="Silver">
                <behaviors:Interaction.Behaviors>
                    <behaviors:BehaviorCollection>
                        <behaviors:EventToCommand EventName="TextChanged" Command="{Binding CountWord}" />
                    </behaviors:BehaviorCollection>
                </behaviors:Interaction.Behaviors>  
            </Editor>

            <Label Text="{Binding WordCount,Mode=OneWay}" HorizontalTextAlignment="End"/>

            <Button Command="{Binding Tweet}" Text="Tweetする!" />
        </StackLayout>
    </ScrollView>

</ContentPage>

MainPage.xaml.cs

BindingContextを使います。

MainPage.xaml.cs
using Xamarin.Forms;

namespace TwitterSample
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            var View = new ViewModel(){};
            this.BindingContext = View;
        }
    }
}

TwitterSample.cs

最初に入っていたコードはほとんど全て消して、MainPage = new MainPage(); だけにします。

TwitterSample.cs
using Xamarin.Forms;

namespace TwitterSample
{
    public class App : Application
    {
        public App()
        {
            // The root page of your application
            MainPage = new MainPage();
        }

        protected override void OnStart()
        {
            // Handle when your app starts
        }

        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }

        protected override void OnResume()
        {
            // Handle when your app resumes
        }
    }
}

ViewModelBase.cs

ViewModel用の基底クラスをINotifyPropertyChangedを継承して作ります。

ViewModelBase.cs
using System.ComponentModel;

namespace TwitterSample
{
    public class ViewModelBase : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        public void NotityPropertyChanged(string info)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(info));
            }
        }
    }
}

ViewModel.cs

ViewModelBaseからViewModelを作り、MainPage.xamlとBindingさせるコマンドなどを定義します。

ViewModel.cs
using System.Windows.Input;
using Xamarin.Forms;

namespace TwitterSample
{
    public class ViewModel : ViewModelBase
    {
        public ICommand CountWord { get; set; }
        public ICommand Tweet { get; set; }

        Model Model = new Model(){};

        public ViewModel()
        {
            CountWord = new Command(() => WordCount = Model.CountWord(TweetText));
            Tweet = new Command(() => Model.TweetAsync(TweetText));
        }

        private string _TweetText;
        public string TweetText
        {
            get { return _TweetText; }
            set
            {
                _TweetText = value;
                NotityPropertyChanged("TweetText");
            }
        }

        private int _WordCount;
        public int WordCount
        {
            get { return _WordCount; }
            set
            {
                _WordCount = value;
                NotityPropertyChanged("WordCount");
            }
        }
    }
}

Model.cs

ここにTweetさせるコードなどを書きます。
KeyやSecretは「Twitter Apps」から取得できます。

Model.cs
using System.Threading.Tasks;
using CoreTweet;
namespace TwitterSample
{
    public class Model
    {

        public int CountWord(string TweetText)
        {
            return TweetText.Length;
        }

        async public Task TweetAsync(string TweetText)
        {
            var tokens = Tokens.Create("API key",
                                       "API secret",
                                       "Access token",
                                       "Access token secret");

            var accepted = await Xamarin.Forms.Application.Current.MainPage.DisplayAlert("確認", "Tweetしますか?", "OK","Cancel");
            if (accepted)
            {
                tokens.Statuses.UpdateAsync(status => TweetText);
                await Xamarin.Forms.Application.Current.MainPage.DisplayAlert("(`・ω・´)", "Tweetしました!", "OK");
            }
        }
    }
}

できたもの

これで、単純にツイートするだけのアプリができました(`・ω・´)
(文字を入力すると自動で右下の文字数が変化します。)

ここ間違っているよーとか、Qiitaの投稿方法おかしいよーとかなどあれば教えてください!
(投稿初めてなのです。)

iOS、Androidエミュレータ