Edited at

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

More than 3 years have 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エミュレータ