【JQueryMobileとPhoneGap】 Phone Gapを実装したActivityを終了させる編

前回の続き
Androidの機能を全部JQueryMobileとPhoneGapで作成って実際イメージつかないですよね？
そして、私の場合は
AndroidのActivityからPhone　Gapを実装したActivityへ遷移後、バックキーではないボタンイベント操作でAndroidのActivityへ戻りたい時を考える事があります。
そんなときのために、
Phone　Gap側のメソッドでPhoneGapを実装したActivityを終了させるためのメモです。

ベースは、前回の環境とします。

【JQueryMobileとPhoneGapで開発する目的】

 JQueryMobileとPhoneGapを採用することで、マルチプラットフォーム開発を目指す。
異なる、ディスプレイの大きさに対応したアプリ開発を目指す。

【環境】
Eclipse　3.7　（基本的な設定済みとする。）
Jquery mobile  1.0.1
Phone Gap 1.5
Android1.6 is01
Android2.3 003sh端末
Android4.0 Galaxy Nexus
JQueryMobileとPhoneGapの環境構築済みとする。
【１．JQueryMobileとPhoneGapの注意点】
・PhoneGap側に用意されているバックキーイベント扱いについての個人的な注意点
PhoneGap側に用意されているバックキーイベントを取得する処理は、JQueryMobileを使っている限り、使わない方が無難です。

初めて、PhoneGapのバックキーイベント処理をゴニョゴニョいじった時、困ったことが起きました。

PhoneGap側でバックキーイベントを取得する処理を追加した場合、従来のJQueryMobileで画面遷移をし、その後元の画面に遷移した時に
「PhoneGap側で最初に登録したバックキーイベント取得用コールバック関数」でやっている処理がUIに反映されない現象になったからです。

未だに良く分からないです。。。
私の現在のPhoneGapとJQueryMobileを使う上での注意点は、
バックキーのイベント等「PhoneGapとJQueryMobile同士がかぶる」機能は、実装しないほうが無難です。別の方法で実装することをまず考えたほうが、幸せになれると思います。
【２．ボタン押下後の変更】
下記のようにPhoneGapのメソッドである「navigator.app.exitApp();」を呼び出します。






 以上で、Phone　Gapを実装したActivityを終了させることができました。

Windows Phone SDKが用意しているアイコンについて

忘れちゃうといけないのでメモをします。


Windows Phoneのデフォルトで入っているアイコンがSDKで提供されているようです。


１．SDKが提供しているアイコンがある場所
私の環境では下記の場所にあります。

C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Icons\

ま・・このアイコンを参照するためにどうやって記述すればいいのかよくわからず・・・・


とりあえず、プロジェクト内にコピーして使用することにします。

Windows Phone Application Bar実装編

サンプルアプリがあったので、簡単かな？と思ったら意外と盲点が・・・

ネックだったのが、画像ファイルの設定
iPhoneやAndroidでは普通に画像を「あるフォルダ配下」に置く。その後、パスを指定して使用すればOK～


では、WindowsPhoneの場合は？


違う設定があるのですｗ
（一杯覚えなきゃいけない・・・・・）

１．VSを使ったApplication Barの設定方法

VSで画像ファイルのプロパティ→ビルドアクションを選択→Resourceからコンテンツへ変更

これをしないとApplication Bar上のアイコンの画像が×のまま表示されません。
コンパイルはでき、エラーメッセージもありません。そのため、「何が原因で×マークになるか？」の調査が困難になりました。
現状、VSツールは、開発者を困惑する仕様なのでは？っと決め付けておりますｗ
また、VSのコンパイラが貧弱な気がします。

あとは、MainPage.xamlをいじります。

Imagesフォルダに画像を２つ追加。プロパティのビルドアクションをコンテンツへ変更したら、Application Barが、×マークからちゃんとアイコンへ表示されるようになります。

２．Blendを使用した、Application Barの設定方法
「UI関連は、Blendで設定して下さい。」と以前マイクロソフトさんの講演で伺ったので、
Application BaｒをBlendから設定する方法を私なりに調査


２．１【やったこと】見切り発車でBar単語を検索して調べる
BlendのUIは 、アセットの中にあるという理解です。

さて、では「検索でBarのUIからApplication Barっぽいのをとってくればいいじゃん！！」てことで検索～

 ぷｗｗ「ProgressBar」「ScroｌlBar」
の２つしかヒットしないｗｗ
→おいｗ　　話が違うじゃないか！！っと３回心の中で叫びます。


さて、どうするか？・・・・・私の理解が間違っているんだろうっと落ち着きます。
  んで、「BlendのUIは 、アセットの中にある」という前提が間違っていると予想～

Google先生！！教えてください！！

なにやら丁寧に解説してあるページ発見

 ふむふむ・・・とはいっても
よくわかりません。
文章中で「ただ、ここが面倒なので作成はVisual Studioでやっておきましょう。」
と記載されている・・・あれ・・Blendって簡単にUIを実装するための専用ツールでないの？っと疑問が満載～

とにかく、共通プロパティをいじればよさそうです。

あれ・・・よくわからないパラメータがｗｗ
・・・・・・・・・・・・・・・orz




ぜんぜん、わかんない。

上記参考にしようとしたブログですら「Blenderで全部Application Barを設定使用としたら面倒」のような記載があるので・・・・・・Blender
は、未完ツールなのかな～っというところで、学習終了！！！

Windows Phone アプリ開発 リリース その３

Windows Phoneアプリのリリース３本目です。

東京節電Meter

アプリのアイコン

電球がたくさんあるアイコンです。

現在の東京電力の使用率を表示するアプリです。

東京電力供給状態APIを
使わせていただいております　＾＾

Windows Phone アプリ開発 リリース その２

Windows Phoneアプリの第二弾です。
電車遅延FeedWatch

アプリのアイコン

アイコンがなぜかお馬さんｗｗｗ

キャプチャ画面

Twitterから電車遅延というキーワードを検索して表示するアプリです。
電車遅延が気になる私には、ちょうどいいアプリですね～

Windows Phone アプリ開発 リリース その１

WindowsPhoneで　無料セミナー受けたので１２ヶ月間はAPPHubは無料で使える
花水木です。

ただ、この無料！！
というには、条件があって、1ヶ月以内でアプリを３本リリースする！！
とういうものがあります。

てなわけで、一個目のアプリを作成～
What Time Is It
とういう時計アプリです。

アプリのアイコン

アプリのアイコンがなぜか、ユーフォーｗｗ
画面キャプチャはこんな感じです。

アプリの画面キャプチャ

シンプルなアニメーションの時計アプリをリリースしました～　＾＾

WindowsPhone開発 画面遷移

Windows Phoneで画面遷移の方法のメモです。

1.環境
Windows7(体験版)
VisualStdio2010Expres for WindowsPhone
DirectX10に対応したPC

2.ソースコード
Mainページのソース

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace SampleCodeList
{
    public partial class MainPage : PhoneApplicationPage
    {
        // コンストラクター
        public MainPage()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            NavigationService.Navigate(new Uri("/PhonePage1.xaml?Name="+"MainPage!!", UriKind.Relative));
        }
    }
}

Page１のソース

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

{
    public partial class PhonePage1 : PhoneApplicationPage
    {
        public PhonePage1()
        {
            InitializeComponent();
        }
        bool isBackFlag = false;
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            //この時画面遷移をするが、このPhonePage1インスタンスは残っている
            NavigationService.Navigate(new Uri("/PhonePage2.xaml", UriKind.Relative));
        }
        //画面遷移毎に呼ばれる。
        protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
        {
            
            //クエリキー取得
            IDictionary param = NavigationContext.QueryString;
            if (param.ContainsKey("Name"))
            {
                this.textEmpty.Text = "こんにちは" + param["Name"] + "さん";
            }
            
           // base.OnNavigatedTo(e);

            if (isBackFlag) NavigationService.GoBack();
            base.OnNavigatedTo(e);
            isBackFlag = true;
        }
    }
}

Page２ページのソース

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace SampleCodeList
{
    public partial class PhonePage2 : PhoneApplicationPage
    {
        public PhonePage2()
        {
            InitializeComponent();
        }
    }
}

３．キャプチャーとソース内容
このサンプルアプリは、下記３点が含まれたサンプルです。
・画面遷移の方法
・ページをMainPage->Page1->Page2と進んだ後、BackKey押下で
MainPageへ行く方法（一度ホーム画面へ行くと無効になってしまうｗ）
・ページ間で文字列を渡す方法。

Ming画面

 

Page１画面

Page２画面

Main画面から「backgroud」ボタンを押下
内部で文字列を仕込んでPage１へ遷移するため

 NavigationService.Navigate(new Uri("/PhonePage1.xaml?Name="+"MainPage!!", UriKind.Relative));

と記述しPage１へ遷移
MainPage で仕込んだMinPage!!という文字列をPage１へ受け取ってTextBlockへ表示。
Page１からPage２へ遷移
通常、ここでBackKeyを押下するとPage１ですが、今回はMainページへ遷移するように変更しました。


というか・・・・・WindowsPhone開発って結構ハードル高い
たとえば・・
Marketplaceに並べるアプリを開発する場合は、
Windows Phone 7 Application Certification Requirementsの
「5.2.4 Use of Back Button」に引っかかるため、
BackKeyは必ず有効にしておかなきゃいけない・・・・・
BackKey無効な仕組みをAPIとして提供しているのに・・・それを規約レベルでできないようにしているなんて・・・・・

開発者なかせ？ｗ



今日はこんなところです。
以上です。