バスナビアプリ

iphoneやandroidにはバス接近情報表示するアプリがあるのですが、WindowsPhone7には今のところ無くて、これから先に誰かが作ってくれる可能性は低そうです。

（ローカル路線毎にはできるかもしれませんが、東急バスをサポートするアプリとなるとまず自分で作らないとだめかな）

なので、東急バスのバスナビページをwp7で見るアプリを作ってます

折角なので、東急バス以外のバス会社のページも表示できるような作りにしようと目論んで、バス会社選択ページがあります。

が、バス情報のページは各社ばらばらで、まとまった情報を得る手段はなさそうなので他社に対応できるかどうか怪しいです。

というか東急バスのページだけでもう気力がなくなりました。あぁぁ

アプリではwebページを取得して内容を解析してリストボックスに表示するような事をします。

htmlを解析する必要があるのですが、デバイスで解析させないでyqlを使ってみました。

リストを取得するのにいちいちyql経由でアクセスするのでちょっと動作が遅いですし、yql使ってアプリにしちゃって良いものかどうか？いまいちわかりません

yql使う利点は他の人が勝手にyqlのコードを書いて別会社のサービスを追加したりとか出来そうなところです。そのためにはバス会社情報のデータもweb上に置く必要があって、ホストを用意しなきゃいけないのですが

できたらβ版配布を試してみたいなと思ってますが、ローカルすぎて需要は０かも

ノッテちゃんのアイコン画像はまずいかな...

サービスの選択

路線一覧から選択する

これが最終的にたどり着くバス接近情報ページです。ここをスクレイピングしてGUI化する気力は残ってませんでした。でももう少しデバイスにフィットした表示したいんだけど、どうすれば良いのやら？

駅から路線を選択する

駅から路線選択で渋谷駅を選択したときの画面。ここもwebページそのまま。うまくスクレイピングできなかった。

バス停名称を入力してバス停を選択する画面

バス停を選択したときの画面

画面デザインをなんとかしないといけないですねー

QRコードメーカ

WindowsPhone7の標準で組み込まれているQRコードリーダは良くできてるなー、自分のアプリから使用するにはどうすればいいんだろう．．．とうい疑問から始まりましたが、ひとまず自分のアプリからQRコードを表示する方法を試してみました。

QRコード表示して何に使うか！は夢が広がりますが、やっぱりリーダも使えないと中途半端かな。
まぁいずれ解決されるでしょう。それはさておき


QRコードを表示するアプリを作る
他力本願なアプローチでなるべく簡単にします。
まずプロジェクトを作って、MainPageに

1. TextBox
2. Button
3. Image

を配置します。 Image のSourceに以下のURLを指定します

http://chart.apis.google.com/chart?chs=300x300&cht=qr&choe=Shift_JIS&chl=http://nextgate.blogspot.com/

XAMLは下記のようになりました

<!--ContentPanel - 追加コンテンツをここに入力します-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" Grid.RowSpan="2">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="0.817*"/>
    </Grid.RowDefinitions>
    <StackPanel>
        <TextBox x:Name="textBox1" Text="" AcceptsReturn="True" InputScope="Url" TextWrapping="Wrap" />
        <Button Content="作成" Click="Button_Click" />
    </StackPanel>
    <Image Margin="0" x:Name="image1" Stretch="Fill" d:LayoutOverrides="GridBox" Grid.Row="1" HorizontalAlignment="Center" Width="300" Height="300" Source="http://chart.apis.google.com/chart?chs=300x300&amp;cht=qr&amp;choe=Shift_JIS&amp;chl=http%3A%2F%2Fnextgate.blogspot.com%2F" />
</Grid>

という感じでUrlを指定します。

こんな感じになります。
なんかもうQRコードが表示されてて、完成したみたいです。

これだけだと使い道がないので、ユーザーが指定した文字列のQRコードを表示するようにしてみます。

”作成”ボタンを押したときのコードを記述します。ボタンをダブルクリックして以下のようにコードを追加します

private void Button_Click(object sender, RoutedEventArgs e)
{
    string url_base = "http://chart.apis.google.com/chart?chs=300x300&cht=qr&choe=Shift_JIS&chl={0}";

    string url = string.Format(url_base, Uri.EscapeDataString(textBox1.Text));

    image1.Source = new BitmapImage(new Uri(string.Format(url_base, textBox1.Text), UriKind.Absolute));

}

GoogleChart APIにテキストボックスの文字列を追加したURLを作成して、Imageのソースとして設定するコードです

これで完成

プロジェクトファイル QRMaker.zip

GuGuReader デモ動画を作った

紹介用にデモ動画を作ったので載せておきます。
エミュレータで実行したときの動作をビデオにしました。
だいたいの感じが判るかな？


 


マーケットプレースでの評価に画面の固定の仕方が判らないと指摘があったけど、答える方法がわからないのでココに書いておきます。

記事を開いているときに、画面を固定したいときはページのどこかを長押しします。
画面右下にピンマークがでたら固定状態です。（動画の1:20秒あたり）
ピンマークをクリックすると固定を解除します

GuGuReader Ver1.1公開しました

WindowsPhone7用のGoogleReaderアプリのGuGuReaderがMarketPlaceにてダウンロードできるようになりました。
ほんとうはWindowsMobile用に作ったアプリと同じ名前にするつもりだったのですが、UltimateGuitarReaderrとやらに先を越されてしまいこの名前になりました。

http://windowsphone.com/s?appid=178a6e59-0f4d-46a2-bf2e-af05b8abecb1

使用するにはGoogleReaderのアカウントが必要です。GuGuReaderでサイトの購読追加は出来ないので
PCの補助的な感じで、通勤途中とかに記事を流し読みするような使い方を想定しています。

 気になる記事はスターを付けて後で読むか、共有ボタンでtwitter,facebookに投稿することができます

今のところオフライン動作には対応していません。
未読の記事のみ表示します

簡単ですが画面の紹介

フォルダ画面
記事はフォルダごとにまとめて読みます

オプション画面
GoogleReaderのアカウントログイン、記事の更新等

記事一覧
縦に記事をスクロール、横にスクロールでメニューを表示します。
フォルダタイトルをクリックしてサイトの絞り込みができます

記事画面
タイトルリンクをクリックすると元記事、mobile+リンクをクリックするとモバイル向けに変換した元記事を開くことができます。左右に画面をフリックして次の記事に進めることができます。画面を長押しすると記事を固定できます。

サイト選択
フォルダ内でサイト別に記事を絞り込んで表示できます。
このメニューは記事一覧中に左から右にフリックすると表示できます。
逆にフリックするか戻るボタンでメニューを閉じることができます

メニュー
今のところ全部既読にする、記事の更新があります
このメニューは記事一覧中に右から左にフリックすると表示できます
逆にフリックするか戻るボタンでメニューを閉じることができます

ShareLinkTaskを試してみる

WindowsPhone7ではプログラムから簡単にFacebookやtwitterにメッセージを投稿するしくみが用意されています。
具体的には ShareStatusTask や ShareLinkTask を使用するようです。詳しくはWP7アプリ開発者ならお馴染みのCH3COOHさんのページShareStatusTaskを使ってステータスを共有するとShareLinkTaskを使ってリンクを共有するに紹介されています。

さっそく試してみることにします。

という　テストの為のエントリー

WindowsPhone7多言語対応アプリ申請までのメモ

今日やっとこさWindowsPhone7アプリを申請しました。
もともとMango以前から開発していたのでアプリの言語設定は英語でしたが、日本で発表するからにはマーケットには日本語で説明を書きたい。ついでだから世界中にもアプリを公開したい、アプリの説明は英語にしたい。といったところで一寸つまずいたのでメモしておきます。

まず、申請してみたわかったのですが、言語設定を英語で作成したアプリにはマーケット上で英語の紹介文しかかけない。日本語で作った場合は日本語しかかけない。言語の設定はアップロードしたアプリファイルから自動的に決定される。つまり両言語同時に申請するにはアプリを多言語対応で作る必要がある？っぽい。

アプリケーション自体は元々英語表記で作っているし、メッセージなどを特に日本語化する必要も感じられなかったのですが、とにかく多言語対応という体裁を作ることにします。

まずはお試しでテストアプリを作りました
多言語対応の仕方はここに書いてあるので、その通りにやってみます
http://msdn.microsoft.com/en-us/library/ff637520(v=vs.92).aspx


まずアプリのプロジェクトを作成

MultLangPhoneApp としました。

プラットフォームは当然 OS 7.1　です
プロジェクトを作成したら、ソリューションエクスプローラから追加→新しい項目して新規リソースファイル追加します

アセンブリリソースファイルを選択してAppResource.resxとします。これがデフォルト言語のリソースファイルになります

今度は日本語用のリソースファイルを同じ手順で作成します。リソースファイル名は　AppResource.ja-JP.resx とします。



それぞれ作成したリソースファイルにメッセージ文字列を追加します。
ここではアプリケーションのひな形で作成されたアプリ画面をマルチ言語対応化することにします

AppResouce.resx にデフォルト言語（英語）の文字列を追加します
TitleNameとPageName文字列を追加しました

AppResouce.ja-JP.resx に日本語の文字列を追加します
英語の時と同じ文字列名で日本語文字列を追加しました

次にニュートラル言語設定を日本語から英語に変えます

アプリケーションの設定でアセンブリ情報→ニュートラル言語を英語（米国）にしておきます。ニュートラル言語を英語にしておくと、例えばフランス語設定の端末にインストールしたときに仏語のリソースを作っていない場合に英語リソースが使われるので、不用意に日本語文字列を表示して文字化けしまうことが防げると思います

HowToページの解説にあったので、よくわからないけどとりあえず　.csproj ファイルにja-JP;en-USを追記しておきました。これ必要なのかな....

HowToページ通りにApp.xaml.csに LocalizedStringクラスを作りました。このクラスを経由してApplicationPageのxamlから直接リソースをbindするのだと思います。

App.xamlに Application.Resoucesを追加します。これでアプリケーションページ作成画面からローカルリソースとしてリソースファイルをbind出来るようになります。
HowToページではxmlns:local ="clr-namespace:GlobalizationSample"　記述がいっしょくたに書いてあったけど、コンパイルしたらエラーが出たので の中に移動しました。
このあたりの決まり事がいまいち理解できていない

MainPage.xamlを編集してGUI画面を多言語対応します

編集前の状態ではこんな感じです。マイアプリケーションとページ名をリソースファイルから指定した文字列に置き換えするようにします

ApplicationTitleのTextにbindを指定します。StaticResourceにこれまで頑張って追加したLocalizedStringsクラスが見えています。ソースに指定して、続けてパスを指定します

パスはTitleNameです
同様にPageTitleもバインドします

パスはPageNameです

XAMLはこんな感じで Binding　になっています


以上で多言語対応のアプリが完成です！！
こんな感じで画面の表示文字列をリソースから指定する事で、マルチランゲージ対応ができます。ちょっと手順が多くてめんどくさいです


ビルドして表示が端末の言語設定で変わることを確認します。エミュレータで実行しました

エミュレータは日本語なので日本語メッセージが表示されています
エミュレータの言語設定を英語に変更します

変更後、エミュレータのOSがリブートして英語環境になりました

アプリはばっちり英語表示になっています。




テストサンプルアプリが完成したので、申請画面で英語と日本語の説明が入力できることを確認してみます。

パソコンでAppHUBを開いて新しいアプリを申請します

作ったアプリをアップロードします。とりあえずプライベートベータテストです。

詳細に英語と日本語の記入が出来るようになっています。説明文から画像ファイルまで英語用と日本語用を別々にしてすることができます

Windows8レディ

次期WindowsのUIも公表されたということで、Windows8　Metro UI に対応すべくタッチパネル液晶にして、DKのカウンターに取り付けました。（嫁の居ぬ間に勝手に購入取り付けちゃいました)
Windows8がいつ発売されるか判りませんが、いい感じです。いつでも準備OKですョ！

若干生活臭が見えますが、こんな感じです。

モニタはグリーンハウス 21.5インチタッチパネルワイド液晶ディスプレイ HDMI ブラック GH-JTJ223GSHB\19620円でした。光学式のタッチパネルでHDMI,DVI,アナログ入力がついてます。タッチパネル付きで２万円以下で結構安いと思います。ピカピカの光沢画面は見栄えは良いですが、反射が気になります


モニタアームはSHINO-BLOGさんを参考にエルゴトロン LX ウォールマウントアーム 45-243-026 にしました。アマゾンで\18856円、モニタと変わらないぐらいの値段、うへー高い！。デスクスタンドタイプはこちらより５０００円くらい安いのですが、キッチンのカウンターに付けたかったので

値は張りましたが、かなりの自由度です！

通常の取り付けは付属のM8のネジ２本で行うのですが、壁材の石膏ボードに直接取り付けるのは無理っぽかったのでホームセンターで適当な化粧板を買ってきて、板にアームをねじ止めして化粧版を石膏ボードに多数のネジで取り付けることにしました。石膏ボード用のネジ固定パーツが売っているので一緒に買ってきましたが、使わなくても大丈夫そうでした

キッチン側にモニターを向けることもできます。でも、多分活用されることは無いでしょう

モニタのタッチパネルはWindows7にしか対応していませんでした。
良い機会なのでXPからWindows 7 Ultimate アップグレードにしました。今なら５０００円キャッシュバックもあるので\16000円ぐらいでした

Windows8早く来ないかなー。Metro UIのランチャとか誰か作ってないかな