Windows Azure Mobile Service で独自テーブルを作ってみる

カレンダー – Windows Azure – 技術者でつなぐ日めくりカレンダー の3/4の記事です。関係ないですが、3/4はうちの娘の誕生日です。誕生日プレゼントは何がいい?と聞くと「携帯電話がいい」という答えだったので「みまもり携帯とガラケーとiPhone5cから選べ」と言うと「なんでもいいそうです」欲がないですね…つーか、みまもり携帯だと何にもできないから私が(!)詰まららないですけど。

さて、Windows Azureというと仮想化の話から盛り上がっていたので、それのちょっと前の ひと目でわかるWindows Azureアプリケーション開発入門 を書いた身としては、BLOB と Table ストレージの API はどうなったんですか?ってな感じなのですが、まあ、いまいち Windows Azure に直接接続する API 絡みは流行らなかったんですよね(どうも、Azure 側にいないので事情がよくわからないのですが、感想的に)。当時は、Google の Big Table あたりの話があって、Amazon EC とか「ビックデータ」以前の純粋にでかい検索データをどうやって扱うのか?という点で、BLOB のフラットな構造や SQLと中間的な Table ストレージとかが API 的によいのではないかと思っていたのですが、いやはや、撃沈しております。まあ、そんなにでかいデータなんてそうそう必要ないって現実ですよね。本格的に業務で使うにしても、ほどよい柔軟性とアクセスがしやすければレンタルサーバーで十分な訳です…と思ったけど、仮想化の話が続くのだから、それはそれでVPSの移行なりで辛い思いをするよりはいいのかな?

■モバイルサービスを試してみる

MSDNを持っているので、単体でのWindows Azureの課金状態を忘れてしまったのですが、モバイルサービスでアクセスするデータベースは SQL Serverを使います(内部的にもSQL Serverなのかな?)。以前 SQL Azure と言われていたときはデータベースを扱うときに結構な値段になったので、あまりお勧めできなかったのですが「無料の20MB」ってことで、ちょっとした設定ぐらいならば Azure サーバーに置くのもありかな、と思ったりします。大量なデータは BLOB やらテーブルストレージやらがいいんでしょうが、そんなことをするよりも仮想マシンを使ってMySQLに落とし込んだほうが楽みたいですね。

image

モバイルサービス自体が何ぞや?ってことに関しては、モバイル サービス | Windows Azure と読む…のかな。プッシュ通知にメリットは、【第1回】がりっち勉強会 in 東京開催しました!! | がりっち勉強会 あたりにあります。自前サーバーを作らなくてもモバイルサービスを使えばプッシュ通知が作れますって話です。

簡単なToDoアプリのサンプルは、モバイルサービスを作ったあとにクイックスタートから各種のサンプルアプリがダウンロードできます。

image

※あれ?PhoneGapがあるけど最近増えましたっけ?

■ToDoサンプルのテーブル

自動作成されるテーブルは、こんな感じです。

image

Azure側のファイアーウォールを設定してやると、SQL Server Management Studio でも接続できます。データの編集とかはこっちのほうが楽でしょう。

image

CREATE TABLE [todomasuda].[TodoItem](
	[id] [nvarchar](255) NOT NULL,
	[__createdAt] [datetimeoffset](3) NOT NULL,
	[__updatedAt] [datetimeoffset](3) NULL,
	[__version] [timestamp] NOT NULL,
	[text] [nvarchar](max) NULL,
	[complete] [bit] NULL,
PRIMARY KEY NONCLUSTERED
(
	[id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON)
)

というテーブルが作られますが、これを独自に作ってみましょう、ってのがこの記事の本題です。やっと本題ですね。ToDoアプリだけダウンロードして、その先はどうするの?ってことで途方に暮れてしまったので、そのメモもかねて。

■独自にテーブルを作る

「データ」→「作成」で新しいテーブルを作ります。

image

新しいテーブルができたら、テーブル名をクリックして「列」タブを選択します。

image

文字列型のid列と、その他(__createdAt, __updatedAt, __version)という列が作られます。どうやら、この4つの列があれば最低限動きそうですね。

「Add COLUMN」(日本語化されてませんね)をクリックして「列を追加」します。

image

データ型は、String(文字列)、Number(数値)、Date(日付)、Boolean(ブール値)の4種類だけです。

image

こんな風に対応します。数値はfloatになってます。普通にCREATE文で作ると int 型もできると思ったのですが…Azure側で認識してくれないっぽいので、alter を使うのかな?

image

■テーブルをアクセスするクラスを作る

まずは、プロジェクトに windowsazure.mobileservices のモジュールを Nuget でインストールします。

image

データモデルのクラスを作ります。Azure側の列名と同じにしておくと JsonProperty の属性はいりません。クライアント側のコード規約とかがある場合は設定したほうがいいでしょう。

class OriginalTable
{
    public string id { get; set; }
    public string firstname { get; set; }
    public string lastname { get; set; }
    public DateTime birthday { get; set; }
    public int age { get; set; }
}

リストを取得して表示するだけのコード

public partial class MainWindow : Window
{
    public static MobileServiceClient MobileService = new MobileServiceClient(
        "https://todomasuda2.azure-mobile.net/",
        "<アクセスキー>"
    );

    public MainWindow()
    {
        InitializeComponent();
    }

    /// <summary>
    /// データを取得
    /// </summary>
    /// <param name=&quot;sender&quot;></param>
    /// <param name=&quot;e&quot;></param>
    private async void Button_Click(object sender, RoutedEventArgs e)
    {
        var t = MobileService.GetTable<OriginalTable>();
        var data = await t.ToListAsync();
        dg.ItemsSource = data;
    }
}

MobileServiceClient クラスのコンストラクタを作っておいて、GetTable でテーブルを取得。そのあとは LINQ で取得できます。ここでは全件取得しているので ToListAasync しているだけですが、Where 句などを使えます。ここのクエリは API を呼び出すときに検索文字列(のようなもの)に変換されるので、検索を絞ればトラフィックは小さくなります。

データの挿入とか削除は Azure からダウンロードできるサンプルを参照ということで。ここのサンプルは時間を取ってあとで公開しておきましょう。

image

そんな訳で9歳の誕生日おめでとう&Azureの日本データセンターおめでとうございます、という親バカ記事でした。

カテゴリー: 開発, Azure | Windows Azure Mobile Service で独自テーブルを作ってみる はコメントを受け付けていません

1年間利用したSSDは遅くなるか?,,,というのは幻想でした

最強開発PCの HDDのアクセススピードは VMWare に影響するのか? | Moonmile Solutions Blog と比較して、1年間使ったSSD/HDD のスピードを確かめてみます。

左が1年前の新品、右が現在です。

image

全然変わっていませんね。数値は誤差の範囲です。このPCにはVisual Studio, VMWare等、もろもろの開発環境が入っているので相当ハードに使っています。何度かビデオドライバーの不具合でクラッシュ(ブルースクリーン)していますが、その他の問題は出ていません。先週あたり起動直後のUSB接続のキーボードの反応が悪かったのですが、なぜか最近直りました。

念のため同じように、DドライブのHDDも調べてみましょう。

左が1年前の新品HDD(2TB)、右が現在です。

image

比べてみると、遅くなっている?ってほど遅くはないですよね。Dドライブは作業用に使っているので、これも頻繁に読み書きしていた領域です。つまりは「SSD/HDDは、数年使うと遅くなる」ってのが幻想かも。

まあ、Windows XPの頃(だったか?)とは違って、Windows 8.1 の場合は定期的にデフラグが走るのでファイルが再配置されてそれほど遅くならないのかもしれません。このあたりは、体感速度的なものが大きいのでこの手のベンチマークでは現れないのかもしませんが。

カテゴリー: 最強.NET開発PC | 1年間利用したSSDは遅くなるか?,,,というのは幻想でした はコメントを受け付けていません

Term Foundation Service を Xamarin から利用する

旧 Team Foundation Services(新 Visual Studio Online)は、Visual Studio 2013 から接続する場合、TFS と Git が選べます。私の場合、もともと TFS で業務アプリのソース管理をしているので、そのまま使ってみたのですが、いやいやいや、Xamarin Studio からは Git と Subversion しかアクセスできないので、TFS 側も Git を利用するようにしないとダメっていうオチです。image

■作成するときに Git を指定する

プロジェクトを作成するときに「Version Control」で「Git」を選択します。

image

■Visual Studio Online の Git アドレスは何処にあるのか?

  1. Visual Studio 2013を起動して、
  2. チームエクスプローラーで TFS へ接続
  3. プロジェクトを右クリックして「複製」を選択すると、ローカル Git リポジトリにアドレスが表示されます。「https//<TFSの名前>.visualstudio.com/defaultcollection/_git/<プロジェクト名>」となっているはずです。

image

■Xamarin Studio で Git を指定する。

Xcode のデザイナを使う場合には、Xamarin Studio for Mac が必須なので、プロジェクトのソースをやり取りできるように共有させておきます。

  1. Xamarin Studio を起動
  2. メニューから「Version control」→「Check out」を選択して、git のリポジトリを指定する。
  3. 後は、普通に Git からダウンロードする。

image

Git の場合 TFS と違って、コミット → プッシュの順番になるのが VSS とかに慣れている場合、注意したいところ。コミットをした後でも、まだ Git サーバーにアップされていないという状態なので。

カテゴリー: Xamarin | Term Foundation Service を Xamarin から利用する はコメントを受け付けていません

Xamarin から BlueStacks を使って実行する

BlueStacks ってのは、Windows や Mac 上の Android エミュレータです。デバッグ用ではなくて、巷の Android ゲームを動かすための仕組みなのですが、これを Xamarin から使ってみます。

Android エミュレータは、Android SDK の高速エミュレータ、使ってますか? | OPTPiX Labs Blog にある Intel Atom (x86) Android エミュレータ を使えばいいんですが、これに必要な「Intel VT」が手元の VMWare と競合してしまうために動きません。まあ、BlueStacks 自体は仮想環境上では動かないので、実機 PC に入れないとダメという制約はあるのですが。後、試してみるとデバッグモードでは動かなくて、リリースモードだけ実行できます。なので、ブレークポイントを置けないので、ログ出力とか何らかの print デバッグをしないとダメっぽいです。素直に実機接続をしたほうがいい、ってのもありますね。

BlueStacks のインストール自体は、日本語Windows 8 Pro で Kindle を動かす方法 | Moonmile Solutions Blog を参考にしてください。

BlueStacks と visual studio + xamarin は同じPCで動作させます。

BlueStacks を起動して、adb devices を実行すると「emulator-5554」が実行された状態になる(このエミュレータ名は異なる可能性あり)

adb tcpip 5555 を実行してポートを開く。

adb connect localhost を実行してポートにつなげる。

image

adb devices を実行すると「localhost:5555」に接続できる。これが先の「emulator-5554」=bluestakcs .

Target Android Devices を更新するために、Visual Studio を再起動する。すると、エミュレータの「Samsung GT-N7000」が出てくる。モデル名は異なる場合あり?

image

Android プロジェクトのプロパティで、API バージョンを揃えて置く。最新の BlueStacks は Android 4.0 だそうなので、これにしておく。

image

デバッグビルドして実行すると、以下のようなエラーが出て実行できない。

image

Loaded assembly: Mono.Android.dll [External]
02-17 11:49:03.560 V/dalvikvm(27932): +++ not scanning ‘/system/lib/libwebcore.so’ for ‘register’ (wrong CL)
02-17 11:49:03.560 V/dalvikvm(27932): +++ not scanning ‘/system/lib/libmedia_jni.so’ for ‘register’ (wrong CL)
02-17 11:49:03.560 V/dalvikvm(27932): +++ not scanning ‘/system/lib/librs_jni.so’ for ‘register’ (wrong CL)
02-17 11:49:03.560 V/dalvikvm(27932): +++ scanning ‘/data/data/SamplePazzle.Android/lib/libmonodroid.so’ for ‘register’
02-17 11:49:03.560 V/dalvikvm(27932): +++ calling dlsym(Java_mono_android_Runtime_register)
Loaded assembly: System.Core.dll [External]
02-17 11:49:03.560 V/dalvikvm(27932): Found ‘Java_mono_android_Runtime_register’ with dlsym – func=0xab9e7805
Loaded assembly: MonoDroidConstructors [External]
Loaded assembly: System.dll [External]
プログラム ‘Mono’ はコード 0 (0x0) で終了しました。
Couldn’t connect to logcat, GetProcessId returned: 0

よくわからないけど、リリースモードで実行するとうまくいく。

image

BlueStacks は、こんな風なゲームも動くので、大抵のものなら大丈夫なはずです。ただし、OpenGL(かな?)の調子が悪いらしく私のPCのグラボ上では再描画がちかちかしていますが。

image

というわけで、かなり制限がありますが、VS2013 + Xamarin + BlueStacks で Android の実行ができます。制約としては、

  • BlueStacks は仮想環境(VMWare上)では動かないので、実PCで動かす必要がある。
  • Xamarin と BlueStacks は同じPCで動かす必要がある。
  • デバッグ実行ができず、リリースモードでの実行のみ可能。

せめて、ログが出ればいいんですけどね。これはあとで調べてみます。

カテゴリー: Xamarin | Xamarin から BlueStacks を使って実行する はコメントを受け付けていません

日本語版Visual Studio 2013 に Xamarin 4.2.3 が入らない場合の対処

Visual Studio 2012 と Visual Studio 2013 が同じPCに入っていると、何故か Xamarin Shell が 2012 のほうにしかインストールされなくて、肝心の 2013 では動作しないというインストーラのバグっぽい動きの回避方法です。半日ほど嵌ったので。
※以前のインストーラーは VS2010, VS2012, VS2013 を別々に判断していたのですが、4.2.3 のインストーラから同時に入れるようになっています。選択肢がなくなっているので、たぶんインストーラのバグかと。

image

Visual Studio 2013 の「拡張機能と更新プログラム」を確認すると、何故か Xamarin Shell が入っていませんでした。何度再インストールしてもダメなのですが、どうせ拡張機能なのだから VS2012 と互換ではないかと思って、コピーすることに。

Install Xamarin in VS 2013 Preview 1 – fd Blog と同じように、VS2012 のフォルダーからコピーをします。実質必要なのは、c:\Program Files (x86)\Microsoft Visual Studio \12.0\Common7\IDE\Extensions\Xamarin だけなので、これを「管理者モード」でコピー。

そのあとに、”c:\Program Files (x86)\Microsoft Visual Studio \12.0\Common7\IDE\devenv.exe” /setup /nosetupvstemplates を管理者モードで実行します。「コマンドプロンプト(管理者)」を使えばOK。何もメッセージはでませんが、設定がリセットされています。

念のためキャッシュである、C:\Users\masuda\AppData\Local\Microsoft\VisualStudio\12.0\Extensions と C:\Users\masuda\AppData\Local\Microsoft\VisualStudio\12.0\ComponentModelCache も丸ごと削除しておきます。これは Visual Studio 2013 を起動したときに自動的に作られるので大丈夫です。

ひとまず、2日間ほど動かした感じでは、日本語環境で XAML(ストアアプリのデザイナ)が開けなる現象は発生していません。ようやく、日本語の Visual Studio 2013 で Xamarin を使って開発ができるという環境が整った感じです。

お次は、Android のシミュレーターが遅いので、BlueStacks を使えないかどうかをチェックしている途中です。Titanium + BlueStacksでAndroid開発 | Selfkleptomaniac を見る限り、アプリのインストールはできそうなのですが、私の環境では落ちるんですよね。Android のバージョンが違うのかな?

カテゴリー: Xamarin | 日本語版Visual Studio 2013 に Xamarin 4.2.3 が入らない場合の対処 はコメントを受け付けていません

ActivePerl に DBD::mysql をインストールする方法

Unix 版は簡単なんだけど、どうも Windows のほうは cpan ではうまくインストールできなかった(make test あたりでこける)ので、ppm を使えってことで。

私の環境では 64bit 版の ActivePerl is Perl for Windows, Mac, Linux, AIX, HP-UX & Solaris | ActiveState が c:Perl64 に入ってます。

1. コマンドラインから ppm を起動

image

2. Perl Package Manager が起動するので、上の検索に「dbd-mysql」と入力。

image

3.検索が絞られるので、左上の mark for install でチェックした後「→」ボタンの run mark action でインストール

image

正常にインストールできたら、c:Perl64sitelibDBD の中に mysql.pm があることを確認。

image

■実行テスト

se DBI ;
$db = DBI->connect('DBI:mysql:database','user','pass');
$rows = $db->selectall_arrayref(&quot;SELECT id, name, tel, modified from store;&quot;);
@row = @$rows ;        # 一度、配列に直す
$cnt = @row ;        # 行数を取得
print &quot;count: $cntn&quot; ;
# 繰り返し処理
foreach $r ( @row ) {
    print &quot;num: $r->[0] $r->[1]n&quot; ;
}

# 直接参照するとき
# print $rows->[0][3] ;

fetch で回してもよいのだが、selectall_arrayref で一気に配列に取り込んだほうが楽かもしれない。
日本語は「????」になってしまうので、これをどうするかは不明。datetime 型もどうやって取るかわからず。

追記
UTF8にするには、
$db = DBI->connect(‘DBI:mysql:db’,’user’,’pass’,{‘mysql_enable_utf8’=>1});
で良い模様。

カテゴリー: 開発, Perl | ActivePerl に DBD::mysql をインストールする方法 はコメントを受け付けていません

Xamarin から WiFi経由で Android を動かす

昨日の続きですが、AndroidのWiFiデバッグ – 滴了庵日録 を参考にすると、あっさり動きました。

一応、手順を示しておくと、

  1. Android を USB 接続する。
  2. adb devices でデバイスが認識できる状態にしておく。
  3. adb tcpip 5556 で、Android のサーバーをポート番号 5556 で起動する。ここのポート番号は自由に設定してOK。
  4. adb connect 172.16.0.9 のように、Android に接続する。IP は Android の IP アドレス。
  5. USB ケーブルを抜く。
  6. adb devices を起動して、デバイスが tcpip 経由でつながっていることを確認する。

List of devices attached
172.16.0.9:5556 device

な感じで接続が確認できます。

tcp/ip 接続を切るのは adb disconnect 172.16.0.9 なんだけど、Android 側のサーバーが kill されるかどうかは不明です。

■嵌るところ

で、いろいろ検索すると落とし穴ったぽいのが、「adb connect 172.16.0.9:5555」のようにポート指定しているものが多いけど、実際は「adb connect 172.16.0.9」です。たぶん、Linux の adb がそうなのか、それとも古いだけなのか。Windows 版の最新の adb だと IPアドレス/ホスト名だけを指定します。

ポート番号が 5555 を指定しているので、皆 5555 を使ってしまうけど、うっかり公共無線LAN 上で IP アドレス知れたらポート番号固定でアタックが掛けられる(やっている人はいる?)ので、いまどきならばポート番号は変えたほうがベターかと。

ひとまず、VMWare から Android に USB 接続しようとすると最初の接続が不安定(何故かホストPCのUSBポートを1つしか認識しないんですよね…)なので、無線LAN接続できるようにしておくと便利です。自宅とか会社でやる分にはOKかと。

カテゴリー: Xamarin | Xamarin から WiFi経由で Android を動かす はコメントを受け付けていません

Xamarin から Android の実機を動かす

Androidのシミュレータが遅いので実機を使います…っていうんですが、なかなかしんどいので手順を残しておきます。

■実機を用意する

手元に実機がないので、何でもいいのですが タブレット Diginnos Tablet DG-D07S|ドスパラ公式通販サイト を買いました。Andoroid ver.4.2だそうだから、程よく新しくてまあ中華パッドだけどよいかという感じで。ちなみにこのタブレットは Google Play が入っていません。後から入れることも可能らしいので買ったのですが、また実験しておりません。まあ、しばらくはデバック機として過ごす予定です(今はビデオが流れていますが)。

■VMWare上に Xamarin Studio と Visual Studio を用意する

XamarinからiOSシミュレータを起動する | Moonmile Solutions Blog の環境として、VMWare 8 上に英語版 Windows 8.1 を入れておきます。結論から言うと、Win8.1 をホストにして VMWare 8(最新は 10)+ Win8.1 で Android 実機につなげられます。

■Android の ADB用USBドライバーをインストール

Android SDK Manager を起動して「Google USB Driver」をインストールします。Visual Studio の上にあるアイコンをクリックするか、C:Users<ユーザー名>AppDataLocalAndroidandroid-sdk のフォルダの「SDK Manager」を開きます。

image

下のほうにある Extras フォルダの「Google USB Driver」をチェックしてインストール。

image

■実機のドライバーをインストールする

Windows 8でAndroidのADB用USBドライバーをインストールする方法 とか Google USB DriverでAndroid端末をWindowsに認識させる – Yahoo!知恵袋 とかを参考にしてドライバをインストールします。

  • 大抵の場合 android_winusb.inf ファイルを修正して %SingleAdbInterface% と %CompositeAdbInterface% を追加する。ベンダー ID を指定しないとインストールできない模様。

DG-D07S の場合は、

;DG-D07S
%SingleAdbInterface% = USB_Install, USB\VID_2207&PID_0010
%CompositeAdbInterface% = USB_Install, USB\VID_2207&PID_0010&MI_01

を [Google.NTx86] と [Google.NTamd64] の両方に追加します。

  • google の usb ドライバーには署名が入っていないので、bcdedit /set testsigning on を実行してテストモードでインストール。元に戻す時は bcdedit /set testsigning off にする。

単に署名のないドライバーをインストールするだけなので「安全」です。もちろん、Googleを信用するってのが前提ですが。

■実機のUSBデバッグを有効にする

Windows に Xamarin.Android をインストール : XLsoft エクセルソフト のように、実機の「USBデバッグ」を有効にします。機種によって違うのですが「アプリ開発者用」とかのカテゴリにあります。

■VMWare上から実機へ接続する

うまく認識すると、下のように「Android Composite ADB Interface」が表示されます。VMWare上でこれが出ないときは、

image

「取り外し可能デバイス」のところで Android の実機を切り離してやります。何かタイミング(順序?)があるらしく、「ホストから切断」(VMWareに接続)した状態で、何回かUSBを抜き差しすると認識します。USB認識があるので、抜き差しの間に10秒ぐらい置くとうまくいきます。

同じUSBポートにハブでつなぐとうまくいくけど、別のUSBポートだとダメな感じですね。VMWare 10 だとうまく動くのかもしれません。

→ VMWare Workstation 10 にバージョンアップをすると、確実につながるようになりました。10 から USB が 3 ポートサポートされているので、おそらく 8 の場合は1つだけだったのかも(USB接続のキーボードとマウスとの競合っぽい)。となると、最新の VMWare Player 6 でもうまくいくかも。

image

■ADO devices で確認する

必須かどうか不明なのですが USB接続でadbコマンドを使う – forzando@net を参考にして、

  • adb start-server サーバーを起動
  • adb kill-server サーバーを止める
  • adb debices 接続デバイスの一覧を表示

ここにデバイスマネージャで表示されている実機が出てこない場合は、何か adb.exe がおかしいパターンが多いです。

私の場合、 DG-D07SのADB認識について | AndroidのQ&A【OKWave】 と同じ現象で、google のではなく、配布されている adb.exe と *.dll を差し替える(C:UsersmasudaAppDataLocalAndroidandroid-sdkplatform-tools にコピーする)とうまく動きました。

adb devices でデバイス表示をさせると、自動的にサーバーが起動します。

■Xamarin Studio から実機へ起動させる

プロジェクトの「Run With」(日本語だと何?)から実機を選択します。「Mono Soft Debugger for Android」のはシミュレータですね。Windows に Xamarin.Android をインストール : XLsoft エクセルソフト のように、Genymotion Emulator を使ってもよいのですが、私のPCは Intel VTを動かせない(VMWareと競合する)ので試していません。

実機の接続を切ってしまうと、ここのリストに出てこないので、Xamarin Studio を再起動させます。

image

■Visual Studio から実機を動かす

ツールバーにターゲットが表示されます。「rockchip DG-D075」というのが実機です。これも USB を抜いてしまうと実機を認識しないので、Visual Studio を再起動します。

image

というわけで、VMWare 上の Xamarin から実機へのデバッグ実行ができました。実機の画面キャプチャがないのは、私が「実機の画面キャプチャの方法を知らない」からです(苦笑)。だって、Andoroidを触ってまだ1日目ですから。

そうそう、実機へのデプロイ時に Android のバージョンが異なるとエラーになるので、当然ですがそろえておきます。

Set Up Device for Development | Xamarin を見ていくと WiFi 経由でデバッグ実行ができるみたいなんですよね。USB ケーブルの場合、VMWare の認識でややこしいので無線LAN経由でやりたいところです。この設定はあとから試してみます。SmartQ 5 – アプリケーション開発とデバッグ | Scenery and Fish とか、Wifi接続でadbコマンドを使う – forzando@net があるので。

カテゴリー: Xamarin | 1件のコメント

XamarinからiOSシミュレータを起動する

MvvmCross と Xamarin for Visual Studio で iOS, Android, Windows アプリを作る流れ – Yuta Watanabe’s Blog を参考にして、手始めに iOS とストアアプリの共通ロジック(PCL)を試そうかと思ったので嵌ったのでメモ。MVP Community Camp 2014 の発表用の下ごしらえというのもあるのですが、その他もろもろ。

■Xamarin.com からダウンロードして Windows/Mac に入れる

http://xamarin.com/download からガンガンダウンロードしてインストールします。Visual Studio 2013 にアドインを入れると Windows ストアアプリの XAML が開けなくなる…ってのは直ったかどうかわからないので、別途英語版のWindows8.1 を作ってインストールしてます。

iOS 用のアプリを C# で作る訳ですから、Windows のほうには

  • Xamarin.iOS
  • Xamarin Studio
  • Visual Studio integration

Mac のほうには、

  • Xamarin.iOS
  • Xamarin Studio
  • Xamarin.Mac

を入れます。

■Xamarin Studio のバージョンを揃える

Windows と Mac のバージョンを揃えます。最初 Mac のほうでペアリング用の「Xamarin.iOS Build Host」が見つからなくて困ったのですが、xamain.com から直接ダウンロードできるのは 4.0.2 で、Mac 使って iOS シミュレータを動かせるのは、4.2.2 です。ここで嵌って @ytabuchi さんに聞きました。

image

Visual Studio の場合は、オプションの「Xamarin」→「iOS Settings」でアップデートができます。

image

■ペアリングを設定する

Visual Studio から Mac の iOSシミュレーターを動かす場合は、Mac 側で「Xamarin.iOS Host Build」を起動します。Xamain のアップデートをした後に PC を再起動してなかったので、このあたりかなり嵌ったんですよね。PC と Mac の両方を再起動することでうまく動くようになりました。

image

同じ PIN コードを Visual Studio 2013 のほうでも打てば OK

無事接続ができれば、Visual Studio 2013 から Mac 上の iOS シミュレータが起動します。ターゲットで ios シミュレーターを選択することを忘れずに。

image

ちなみに、ペアリングは Visual Studio 単位らしく、複数の VS2013 を立ち上げるとペアリングがうまくいきません。ペアリングが取り合いになってしまうようです。接続先がオプションの中に書いてあるので仕方がないのですが、複数のプロジェクトを同時にひらいて切り替えて使いたいときはちょっと不便です。

カテゴリー: 開発, Xamarin | XamarinからiOSシミュレータを起動する はコメントを受け付けていません

CakePHPのXMLレスポンスをListViewで一覧表示する

CakePHPのXMLレスポンスをストアアプリで一覧表示する | Moonmile Solutions Blog
http://www.moonmile.net/blog/archives/5374

の ListView 版です。GridView の場合、横スクロールなのですが、ListView は縦スクロール。WPF の ListView と同じ感じ…では使えないので結構面倒です。なので、フォームにあるリストビューを作りたい場合は下手に自作するよりもコンポーネントを買ったほうがいいような気がするのですが。Windows UI http://jp.infragistics.com/products/windows-UI.aspx のグリッドコントロールじゃないですかね。

が、あえて自作します。

こんな風にフォームアプリのように縦スクロール。右側にそれぞれの値を表示という画面です。
まず、標準で「これじゃない感」が強いので、このままでは役に立たないのです。これじゃないところを列挙すると、

  • 縦スクロールすると、タイトル部分もスクロールしてしまう。
  • 幅をユーザーが自由に変えられない。

ちなみに、業務のほうは、ヘッダ部分を ListView の外側に追いやって逃れました。ヘッダクリックでのソートと幅の変更は WPF の ListView には備わっているのですが、WinRT のほうにはありません。というか、まったく別物です。

データモデルは同じなので、リストビューを作るところから。

■リストビューを作る

<ListView 
    ItemsSource=&quot;{Binding Items}&quot;
    d:DataContext=&quot;{d:DesignData /SampleData/StoreSampleData.xaml}&quot;
    HeaderTemplate=&quot;{StaticResource myHeaderTemplate}&quot;
    ItemTemplate=&quot;{StaticResource myItemTemplate}&quot;
    SelectionChanged=&quot;ListView_SelectionChanged&quot;
    Margin=&quot;10&quot; Grid.Row=&quot;1&quot;>
</ListView>

リストビューにはヘッダ部分(HeaderTemplate)とアイテム部分(ItemTemplate)のテンプレートを指定できるのですが、ヘッダ部分もスクロールしてしまうんですよね…というか、どうやらアイテムの先頭だけを「ヘッダ」と言っているようです。英文の最初の文字を大きくするイメージでしょうか。日本のエクセル方眼紙にはなじめない文化ですよね、とか。

リソースは ListViewHeaderItem と ListViewItem の2つを作っておきます。ヘッダ部分の Text プロパティは直書きに、アイテムのほうはバインドしているのですが、これはフォームアプリのデータグリッドのように両方いっぺんにバインドをしたいところです。

    <DataTemplate x:Key=&quot;myHeaderTemplate&quot;>
        <Grid 
        Background=&quot;ForestGreen&quot;
        Margin=&quot;1&quot; Height=&quot;50&quot; 
        >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width=&quot;1*&quot;/>
                <ColumnDefinition Width=&quot;1*&quot;/>
                <ColumnDefinition Width=&quot;1*&quot;/>
                <ColumnDefinition Width=&quot;1*&quot;/>
                <ColumnDefinition Width=&quot;1*&quot;/>
            </Grid.ColumnDefinitions>
            <TextBlock Text=&quot;ID&quot; FontSize=&quot;32&quot; Grid.Column=&quot;0&quot; />
            <TextBlock Text=&quot;Store&quot; FontSize=&quot;32&quot; Grid.Column=&quot;1&quot; />
            <TextBlock Text=&quot;Sellingcompany&quot; FontSize=&quot;32&quot; Grid.Column=&quot;2&quot; />
            <TextBlock Text=&quot;Areagroup&quot; FontSize=&quot;32&quot; Grid.Column=&quot;3&quot; />
            <TextBlock Text=&quot;modified&quot; FontSize=&quot;32&quot; Grid.Column=&quot;4&quot; />
        </Grid>
    </DataTemplate>
    <DataTemplate x:Key=&quot;myItemTemplate&quot;>
        <Grid 
                    Background=&quot;BlueViolet&quot;
                    Margin=&quot;1&quot; Height=&quot;50&quot; Width=&quot;1030&quot;
                    >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width=&quot;1*&quot;/>
                <ColumnDefinition Width=&quot;1*&quot;/>
                <ColumnDefinition Width=&quot;1*&quot;/>
                <ColumnDefinition Width=&quot;1*&quot;/>
                <ColumnDefinition Width=&quot;1*&quot;/>
            </Grid.ColumnDefinitions>
            <TextBlock Text=&quot;{Binding ID}&quot; FontSize=&quot;32&quot; Grid.Column=&quot;0&quot; />
            <TextBlock Text=&quot;{Binding Name}&quot; FontSize=&quot;32&quot; Grid.Column=&quot;1&quot; />
            <TextBlock Text=&quot;{Binding Sellingcompany.Name}&quot; FontSize=&quot;32&quot; Grid.Column=&quot;2&quot; />
            <TextBlock Text=&quot;{Binding Areagroup.Name}&quot; FontSize=&quot;32&quot; Grid.Column=&quot;3&quot; />
            <TextBlock Text=&quot;{Binding modified}&quot; FontSize=&quot;32&quot; Grid.Column=&quot;4&quot; />
        </Grid>
    </DataTemplate>

ColumnDefinition で等倍にしていますが、本来ならばサイズを指定したいところです。というか、自動的にサイズを計算してほしいところですね。このあたりの機能はあるかないか分かりません(たぶん無い)。1画面だけ作るのであれば、これでいいのですがマスター画面で十数画面を一気に作ろうと思うと結構面倒くさいことになります。まあ、マスター画面自体を「没入型」で作るかどうかは別だし。

■プロパティビューっぽいものとバインド用のモデル

プロパティビューのところは、GridView と同じです。ふつうにバインドしていけばOK。バインド用のモデルクラスも同じ。

■アイテムを選択したときのイベント

/// <summary>
/// アイテムを選択したとき
/// </summary>
/// <param name=&quot;sender&quot;></param>
/// <param name=&quot;e&quot;></param>
private void ListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var item = e.AddedItems[0] as Model.Store;
    _model.Item = item;
}

やっていることは、「分割ページ」の ListView と同じなんですけどね。

■方眼紙っぽく枠線をつけてみる

縦横の線を書く、ってことはできなそうなので、まめに boarder をつけます。何気に面倒ですが、以下のように Border をちまちまつけていくと枠線が引けます…が、こんなことやるぐらいだったらコードで自動生成したいですよね。

<DataTemplate x:Key=&quot;myItemBTemplate&quot;>
    <Grid 
                Background=&quot;BlueViolet&quot;
                Margin=&quot;1&quot; Height=&quot;50&quot; Width=&quot;1030&quot;
                >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width=&quot;1*&quot;/>
            <ColumnDefinition Width=&quot;1*&quot;/>
            <ColumnDefinition Width=&quot;1*&quot;/>
            <ColumnDefinition Width=&quot;1*&quot;/>
            <ColumnDefinition Width=&quot;1*&quot;/>
        </Grid.ColumnDefinitions>
        <Border BorderBrush=&quot;White&quot; BorderThickness=&quot;2&quot; Padding=&quot;3&quot; Grid.Column=&quot;0&quot; >
            <TextBlock Text=&quot;{Binding ID}&quot; FontSize=&quot;32&quot; />
        </Border>
        <Border BorderBrush=&quot;White&quot; BorderThickness=&quot;2&quot; Padding=&quot;3&quot; Grid.Column=&quot;1&quot; >
            <TextBlock Text=&quot;{Binding Name}&quot; FontSize=&quot;32&quot; />
        </Border>
        <Border BorderBrush=&quot;White&quot; BorderThickness=&quot;2&quot; Padding=&quot;3&quot; Grid.Column=&quot;2&quot; >
            <TextBlock Text=&quot;{Binding Sellingcompany.Name}&quot; FontSize=&quot;32&quot; />
        </Border>
        <Border BorderBrush=&quot;White&quot; BorderThickness=&quot;2&quot; Padding=&quot;3&quot; Grid.Column=&quot;3&quot; >
            <TextBlock Text=&quot;{Binding Areagroup.Name}&quot; FontSize=&quot;32&quot; />
        </Border>
        <Border BorderBrush=&quot;White&quot; BorderThickness=&quot;2&quot; Padding=&quot;3&quot; Grid.Column=&quot;4&quot; >
            <TextBlock Text=&quot;{Binding modified}&quot; FontSize=&quot;32&quot; />
        </Border>
    </Grid>
</DataTemplate>

罫線としてはいまいちだし、ヘッダ部分をクリックしたらソートしてほしいし、そのあたりも含めて ListView の自動生成機能が欲しいところです。

カテゴリー: CakePHP, WPF, WinRT | CakePHPのXMLレスポンスをListViewで一覧表示する はコメントを受け付けていません