リストボックスを引っ張って更新

スマートフォンでSNS系のアプリを使っていて
「更新ボタン」を押しているとなんとなく未来感がない。
Twitterの公式アプリ等はそうだが、上側に引っ張るとリストが更新される。

WindowsPhoneでもこれを行なってみようと思ったら

高橋忍氏のブログや
その書籍プログラミングWindowsPhoneでも紹介されています。

んじゃ書く必要ないじゃん。と思いましたけど少し書いてみます。


スタイルを変更

ListBoxの中身はScrollViewerで構成されているので、
ScrollViewerのVerticalCompressionというVisualStateGroupを利用して
ListBoxの状態を把握しようってことですね。

上記のブログにはPageごとの設定とありますけど
私的にはアプリケーション内で指定したいのでApp.xmlにApplication.Resoucesとして定義しています。

    <Application.Resources>
        <Style TargetType="ScrollViewer">
            <Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
            <Setter Property="HorizontalScrollBarVisibility" Value="Disabled"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ScrollViewer">
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="ScrollStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="00:00:00.5"/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Scrolling">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="VerticalScrollBar"/>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HorizontalScrollBar"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="NotScrolling"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="VerticalCompression">
                                    <VisualState x:Name="NoVerticalCompression"/>
                                    <VisualState x:Name="CompressionTop"/>
                                    <VisualState x:Name="CompressionBottom"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid Margin="{TemplateBinding Padding}">
                                <ScrollContentPresenter x:Name="ScrollContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"/>
                                <ScrollBar x:Name="VerticalScrollBar" HorizontalAlignment="Right" Height="Auto" IsHitTestVisible="False" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Opacity="0" Orientation="Vertical" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{TemplateBinding VerticalOffset}" ViewportSize="{TemplateBinding ViewportHeight}" VerticalAlignment="Stretch" Width="5"/>
                                <ScrollBar x:Name="HorizontalScrollBar" HorizontalAlignment="Stretch" Height="5" IsHitTestVisible="False" IsTabStop="False" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Opacity="0" Orientation="Horizontal" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{TemplateBinding HorizontalOffset}" ViewportSize="{TemplateBinding ViewportWidth}" VerticalAlignment="Bottom" Width="Auto"/>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>


この記述によって、アプリケーションのすべてのScrollViewerで圧縮した場合のイベントの発生が可能になります。
※私には縦の必要がないのでVerticalのみです。

ListBoxから取り出してイベントを登録

上記ブログにある通り(そのままのコード)ListBoxからScrollViewerを取り出して
変更があったというイベントに登録します。

        private void ListBoxCompressionHandling(ListBox targetlistbox)
        {
            VisualStateGroup vgroup = new VisualStateGroup();

            // ListBox の初めに定義されている ScrollViewerを取り出す 
            ScrollViewer ListboxScrollViewer = (ScrollViewer)VisualTreeHelper.GetChild(targetlistbox, 0);

            // Visual State はコントロールテンプレートの常に最上位に定義されている 
            FrameworkElement element = (FrameworkElement)VisualTreeHelper.GetChild(ListboxScrollViewer, 0);
            // Visual State を取り出しその中から 縦横Compression のVisualStateを取り出す 
            foreach (VisualStateGroup group in VisualStateManager.GetVisualStateGroups(element))
                if (group.Name == "VerticalCompression") vgroup = group;

            //縦横Compressionの状態が変わった時のイベントハンドラ 
            vgroup.CurrentStateChanging += new EventHandler<VisualStateChangedEventArgs>(ScrollViewer_CurrentStateChanging);
        } 


でイベントは

        void ScrollViewer_CurrentStateChanging(object sender, VisualStateChangedEventArgs e)
        {
            switch (e.NewState.Name) 
            { 
                case "CompressionTop":
                    break; 
                case "CompressionBottom": 
                    break;
                case "NoVerticalCompression":
                    break; 
                default: 
                    break; 
            } 
        }


で、この関数をLoadなどのイベントで呼び出すのですが
Loadは何度も呼び出されるので、画面遷移が多いような画面だったら重複して登録してしまうので
一度だけ登録するようにしておくのが良いでしょう。


で何がしたいか？

これだと高橋忍氏のブログそのまま(アプリで登録した位の違い)です。
私的にはスクロールを「グッ」とした時にだけ、更新をしたいのです。

このままだと少しでも上にするだけでイベントが発生します。

んじゃ、圧縮イベントと圧縮が終わったイベントの時刻で処理してみよう！


アプローチ


        DateTime startTopTime = new DateTime(0);
        DateTime startBottomTime = new DateTime(0);
        DateTime endTime = new DateTime(0);
        private void InitCompression()
        {
            startTopTime = new DateTime(0);
            startBottomTime = new DateTime(0);
            endTime = new DateTime(0);
        }
        private Boolean IsCompressionTop() {
            if (!startTopTime.Equals(new DateTime(0)))
            {
                TimeSpan ts = endTime.Subtract(startTopTime);
                System.Diagnostics.Debug.WriteLine(ts.TotalSeconds);
                if (ts.TotalSeconds >= 0.9)
                {
                    return true;
                }
            }
            return false;
        }

        void ScrollViewer_CurrentStateChanging(object sender, VisualStateChangedEventArgs e)
        {
            switch (e.NewState.Name) 
            { 
                case "CompressionTop":
                    startTopTime = DateTime.Now;
                    break; 
                case "CompressionBottom": 
                    startBottomTime = DateTime.Now;
                    break;
                case "NoVerticalCompression":
                    endTime = DateTime.Now;
                    if (IsCompressionTop())
                    {
                        MessageBox.Show("できたよー");
                    }

                    InitCompression();
                    break; 
                default: 
                    break; 
            } 
        }


こうしてみると、確かにグッとした後にイベント発生ができるんだけど
リストを離して戻った時の判定になってしまう。
できれば、グッとしている間にイベントを発生したい。


。。。もっといい方法があるような気がする。

WindowsPhoneの初期化と通信でトラブルヽ(´Д`；)ﾉ

ちょっと失敗したので書いておく。
WindowsPhoneにおいて、通信は非同期処理しかサポートしていない。
ってのは有名な話だと思いますが、
OAuth認可の部分で少し失敗したのでメモしておく。

Access Tokenが切れていた場合、
Refresh Tokenを用いて再度トークンを取得してくる必要があります。

私はリフレッシュトークンを実装する前

・トークンが存在したら、アプリのメニュー画面
・トークンが存在しなかったら、ログイン画面

としていました。

これに
・トークンが存在しても、期限が切れていたらリフレッシュトークンで再発行処理
という部分を追加しました。

しかし、何度やってもResponseが返って来ませんでした。

結論から言うと既存処理の遷移の為、Defaultの画面が存在しませんでした。
なので画面用のスレッドが作成されず、
そのまま通信を行なってしまって、スレッドが同じになって、
同期処理とみなされていた。(なんかもう少し細かい話がありそうですけど)

って感じのようです。
Defaultを設定してあげて、そこから再発行をしたらすんなり動きました´ω｀
この画面がよくありがちな、アプリのロゴを出す画面でして
ほぼ見えない画面なのですが、何かしっくりこないです。

※お陰でBackで終了するという処理も必要になりました。
本人が推奨はしてません


一旦APIキーのみでアクセスできる検索画面にして、
ユーザにログインボタンを提示する画面を作って無駄のないようにしようと考えています。

objectのjsonデータを変換する。

Google+のAPIの戻り値に"object"というオブジェクトデータがあり、
これがC#の予約後に引っかかってしまい、NewtonsoftのJSONパーサで解析をしていると無理になります。

https://developers.google.com/+/api/latest/activities#resource

なので

            private ObjectData objectValue;
            [Newtonsoft.Json.JsonPropertyAttribute("object")]
            public virtual ObjectData Object
            {
                get
                {
                    return this.objectValue;
                }
                set
                {
                    this.objectValue = value;
                }
            }


とすればOKです。

WindowsPhoneで最初の画面を選ぶ

OAuth認証は基本的に最初の一回でOKのはずです。
なのでアクセストークン(もしくはリフレッシュトークン)を持っていて
通信可能な状態だった場合、別の画面を表示する必要があります。

画面を作る

まず縦向きのページを作成します。




分岐を作成する

App.xamlに対して、Startupイベントを指定します。

<Application 
    x:Class="Ziro.PlusPhone.App"
    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"
    Startup="Application_Startup">


で、App.xzml.csにコードができるので

        private void Application_Startup(object sender, StartupEventArgs e)
        {
            if (oauth.Load())
            {
                RootFrame.Navigate(new Uri("/MainPage.xaml", UriKind.Relative));
            }
            else
            {
                RootFrame.Navigate(new Uri("/LoginPage.xaml", UriKind.Relative));
            }
        }


という風に条件式を作ってあげて、遷移先を変更してあげます。
私の場合、OAuth認証があるかどうかで判断しています。

デフォルトの画面を読み込ませない

次にプロジェクトの「Properties」内にあるWMAppManifest.xmlの
TasksタグにあるDefaultTaskのNavigationPageを削除します。
    <Tasks>
      <DefaultTask Name="_default" NavigationPage="/MainPage.xaml"/>
    </Tasks>
↓
    <Tasks>
      <DefaultTask Name="_default"/>
    </Tasks>


これをやっておかないと強制的にここが優先されます。


これでOKです。

非同期で結果を受け取る

WindowsPhoneの非同期処理の理念は伝わっているけど、、、
C#の言語理解が足りないから実装方法がわからない。
GoogleのAPIの実装を見た時に「うわっこんな実装になるのか。。。なんで？」って
ところが理解できてなかったと再度思うことになった。

何がしたいか？

WindowsPhoneでGoogle+にアクセスしたい。
そこで処理を書いていくと

1.OAuthの部分（＋その後の処理）をGUIと切り離したいのでライブラリ化しておきたい。
　－だけどアクセスは非同期処理になるので、データが返ってくるタイミングがわからない。
2.なのでそのデータをどう使うかはPhone側関数の処理にしたい。
3.その関数の引数はJsonの生データ(string)ではなくて、型が決まった状態で受け取りたい。
　－Newtonsoft.JsonのDeserializeObject()を呼び出すのでT型で呼び出したい。

この位の知識で実装してたら、あれ？あれ？って感じになったのでまとめておく。

レスポンスデータ取得後の呼び出し

最終的にT型で関数を呼び出すという目標に対して、
レスポンスが受けとったデータを呼び出すので

        public IJsonResult target;

        string = {レスポンスデータ};
        target.SendJson(data);

みたいな実装が必要なのでまずインターフェースを定義してみた。
これは生成時にT型が必要なのですが、呼び出し時にtargetをインスタンス化する為です。

SendJson()の実装

で、SendJson()の実装はジェネリックを利用して

    public class JsonResult<T> : Ziro.OAuth.IJsonResult where T : JsonData 
    {
        private Action<T> action;
        public JsonResult(Action<T> lambda )
        {
            action = lambda;
        }
        
        public void SendJson(string responseData) {
            //データを解析
            T jsonData = JsonConvert.DeserializeObject<T>(responseData);
            action(jsonData);
        }
    }

として、文字列をT型でデシリアイズして、それを引数にaction()を呼び出しています。
action()は引数がT型のラムダ式を引数に持つ式をコンストラクタで受け取ってます。

リクエストの呼び出し

        private void GetMe()
        {
            oauth.target = new JsonResult<GooglePlusData.Person>(GetPeople);
            oauth.GetPeople("me");
        }

        private void GetPeople(GooglePlusData.Person person)
        {
            //元のスレッドでメイン画面に遷移
            this.Dispatcher.BeginInvoke(() => NavigationService.Navigate(new Uri("/MainPage.xaml", UriKind.Relative)));
        }

って感じでOKです。
GetPeple()はUrlを作成して、GETしています。

これでJsonResultの生成時に型情報と受け取りの実装を渡します。

総括

一瞬、OAuthを直接行う部分のインスタンス化を行う時にT型を使おうとしたのですが、
アクセストークンをやり取りするのがだるかったのでこうしています。
※おそらく後で分散ストレージを使うので、そうしなくても良かったかな？とも思ってます。
こうしておくことで多分他のOAuthを作りたい感じになった時に楽になるかな。。。と勝手に思ってます。

ここに行くまでﾌﾞﾋｰって感じでした。
C#の知識が乏しい状況での実装なので、本当にこれでいいのかも不明です。


JavaScript辺りのゆるふわな感じと、Javaの静的な感じが実現できていて素晴らしいなぁ。
結論としては、、、λｶﾜｲｲ。。。

WindowsPhoneでGoogle+に対してOAuth認証

Google+APIでの認可を書いて、
後日WindowsPhoneへの移植を試みた。。。

しかしそれと同時に衝撃の事実。

DLLの参照設定ができないのだ。

「WindowsPhoneアセンブリのみと連動・・・」・・・なんとっ！

ということでOAuthの生コードを書くことにした。

何か調べるとライブラリは存在するのだが、OAuth1.0っぽいもの(Twitter系)が多くて

勝手に使い物にならないと判断した。

まぁC#触るの自体久しぶりだし、言語になれる意味でやっていきますか。

ってことで結局Google+のOAuthのページを読むことにした。

http://code.google.com/intl/ja/apis/accounts/docs/OAuth2.html

画面の作成

画面を作ります。

OAuthにはブラウザアクセスが必要なので、ブラウザを準備して
作成した認証コードが必要になるのでテキストと認証用のボタンを準備しておきます。