公開されてから1ヶ月ほど経っていますが、ブログで紹介し忘れていたので改めて。
日経BP様の技術系の情報サイトであるIT Proにて、以前日経ソフトウェアに寄稿した記事が公開されました。
3/12～14の3回で私が寄稿した分の記事が公開されました。
3/12分：開発環境を整えよう
3/13分：まずは「ボタン」と「テキスト」から
3/14分：ツイート付きプレイヤーにチャレンジ！
こちらの記事で紹介しているアプリのソースコードは日経ソフトウェアのサイトからダウンロードできるので、是非ダウンロードしてみてくださいね。
私の担当分で分からないことがありましたら、Twitterとかコメント欄でご質問頂ければできる限りフォローさせて頂きます。
前回は、簡単なブラウザアプリを作る前段階で話が終わってしまいました。今回はその続きで、ブラウザでWebサイトを開くまで行いたいと思います。
前回は、アプリケーションのタイトルなどを編集しました。今回は、ブラウザのアプリケーションで必要なコントロールを配置していきます。
今回必要なコントロールは次のコントロールです。
それぞれを1個ずつContentPanel内に適当に配置します。適当なので、以下のような感じになるかと思います。 
まずは配置した各コントロールに名前を付けたいと思います。
配置したコントロールのどれでも良いのでクリックしてください。すると、プロパティウィンドウの内容が切り替わりますので、その最上部のコントロール名が表示されている横をクリックしてください(下図赤丸で囲っている箇所) 
クリックすると入力できるようになりますので、各コントロールの名前を変更しましょう。この時、そのコントロールにどういう役目を割り当てるのかを考えながら名前を付けるように習慣づけてください。今後開発していく上で大切なことです。
今回は、以下の感じで名前を付けました。
これをもうすこしキレイに並べたいと思います。
ここでは、デザインビューで修正するのもありかと思いますが、XAMLで修正したいと思います。
MianPage.xamlのデザインビューの反対側は、XAMLコードになっているかと思います。その中に以下のようなコードの箇所があるかと思いますので探してください。
以下のソースではClick=”btnGo_Click”の記述がありますが、今の段階ではないと思いますので無視してください。 
これを次のように書き換えてみてください。
主にMargin属性を削除し、StackPanelを利用して、コントロールの並びを整理しています。 
書き換えると、以下のようにデザインが変わるかと思います。 
これで大体のコントロールの配置は完了しました。
次に、イベントを設定します。イベントとは、あるボタンをタップしたらメッセージを表示したり、リストボックスなどをタップしたらそのタップされた箇所にあるアイテムを選択状態にするなど、ある処理を行うときのきっかけを設定するモノです。
今回は、ボタンをクリックしたらブラウジングを行うので、ボタンのClickイベント設定します。初めに配置したbtnGoを選択してください。プロパティウィンドウのEventsタグを選択します。するとボタンコントロールに設定されているイベント一覧が表示されます。 
表示されたイベント一覧からClickイベントを選択し、ダブルクリックしてください。
すると、自動的にClickイベント用のメソッドが生成され、MainPage.xamlには、btnGoに先ほど紹介した「Click=”btnGo_Click”」の記述が追加されていると思います。
また、同様にMainPage.xaml.csには、イベント用のメソッド「btnGo_Click」が追加されているかと思います。 
作成されたbtnGo_Clickメソッドに以下の2行を追加します。 
追加すると、以下のようになります。 
これでひとまず完成です。
編集したソースを一旦保存し、[Build]->[Build Solution]を選択するかF6キーを押して、アプリケーションのビルドを行います。ビルドを行わないと、アプリケーションとして使えません。コードを編集したら必ず実行しましょう。 
ビルドがすべて正常に終了し、問題がなければ、画面左下のステータスバーに[Build succeeded]と表示されるはずです。 
その後に、[Debug]->[Start Debugging]を選択するかF5キーを押して正常に動作するか確認しましょう。すると、エミュレーターが起動して作成したアプリケーションがエミュレーターに転送されます。
アプリケーションの転送が完了すると、以下の画面になります。 
今回はエミュレーターでのテストなので、マウスでエミュレーター内のテキストボックスをクリックします。すると、テキスト入力の画面になります。 
テキストボックスに適当なURLを入力して、そのまま「Go」ボタンをクリックしてください。すると、入力したURLのサイトが表示されるかと思います。
今回の例では、モバイル用のIE Test Driveページの「http://ie.microsoft.com/testdrive/mobile/」を指定して、表示しています。 
表示されれば、成功しています。表示されなかった場合、入力したURLが間違っていないか確認してください。合っていても表示されない場合は、MainPage.xaml.csで追加したコードを確認してください。
ここまで問題なく完了したら、晴れて初めてのアプリケーションが正常に実行されたことになります。
おめでとうございます。
次回は、今回記載したコードに関して簡単に解説したいと思います。
今回からアプリケーションを作るところを実際にやっていきたいと思います。今回作成するのは、簡単なブラウザアプリケーションです。
すでに【Microsoft Visual Studio 2010 Express for Windows Phone】（今後、VSEWPと記載したいと思います。）がインストールされていることを前提で話を進めていきます。まだの方は、私の過去記事を参考にインストールしてください。
今回は、次のような動作仕様で作ってみたいと思います。
まずは、必要なプロジェクトを作りたいと思います。VSEWPを起動した後、[File]->[New Project]をクリックしてください。 
すると、プロジェクトの作成画面になります。今回は簡単なアプリケーションなので、ウィンドウ左の[Installed Templates]から[Silverlight for Windows Phone]を選択して、その項目から[Windows Phone Application]を選択します。
その次にプロジェクト名を入力します。ウィンドウ下にある[Name]のテキストボックスをクリックし、今回は学習という意味もあるので[WPStudy]と入力しておきましょう。別の名前でも問題ありません。皆さんが分かりやすい名前で入力してください。
また、保存されるフォルダを決めておきたい場合はこのときに決めておきましょう。デフォルトは、
C:\Users\[ユーザー名]\Documents\Visual Studio 2010\Projects
の下に保存されます。
私は今回の場合、「C:\work\MyOriginal」という場所の配下に置くことにしました。
これらの入力が完了したら、[OK]ボタンを押します。 
[OK]ボタンを押すと、[Windows Phone Developer Tools V1]をインストールしている場合は、すぐにプロジェクトが作成されますが、Windows Phone SDK（以降、WPSDKと表記します）をインストールしている場合は、すぐにプロジェクトが作成されず、次に作成するプロジェクトを利用するWindows Phone のバージョンを訊ねられます。
今回は[Windows Phone 7.1]のままで問題ないと思いますので、このまま[OK]ボタンをクリックしてプロジェクト作成します。 
プロジェクトが作成されると、以下のような画面になるかと思います。
※クリックすれば、大きい画像が見られます。 
まずは、画面構成を把握しておきたいと思います。中央一番広いウィンドウは「コードウィンドウ」になります。Windows Phoneアプリケーションは必ずSilverlightまたはXNAで作成するので、このウィンドウで画面のデザインとか、コード編集とかを行うことになります。 
画面右には、ソリューションエクスプローラーと呼ばれる、作成したプロジェクトのファイル一覧を見れるウィンドウがあります。
プロジェクトにフォルダやファイルを追加する場合は、このウィンドウを介して行いますので、覚えておきましょう。 
また、画面右下にはプロパティウィンドウがあります。このウィンドウは、選択したコントロールの各プロパティ（設定値）を変更するためのウィンドウです。プロパティ設定は、調整等で頻繁に使います。また、後で説明しますが、イベント管理でも使われますので、この画面の存在は覚えておきましょう。 
※プロパティウィンドウは、デフォルトでは開いていません。[View]->[Other Window]->[Properties Window]で、表示するようにしておくと後々楽です。 
画面左には、少しわかりにくいかもしれませんがツールボックスなどのサブウィンドウが最小化されて配置されています。 
[Toolbox]タブにマウスカーソルを合わせると、次のような表示になり、Windows Phoneアプリで配置できるコントロール（部品）の一覧が表示されます。 
[Document Outline]タブにマウスカーソルを合わせると、次のような表示になります。このウィンドウは、Silverlightの画面をデザインするときに使われるXAMLというマークアップ言語のアウトラインが表示されます。コントロールをまとめるためのコントロールであるStackPanelやGridの前後関係などを確認するのに使用します。 
もう１つ[Data Sources]タブもありますが、今回はデータを保存するなどのこともしないので説明は割愛します。
では、初期のデザイン画面を見てみましょう。デザイン画面では、2つのブロックにコンテンツが分かれているのが分かると思います。上部は、[TitlePanel]と呼ばれるブロックです。主にアプリケーション名やアプリケーションのガイドになるものを表示するエリアです。下部は[ContentPanel]と呼ばれ、アプリケーションのメイン部分になります。Windows Phoneアプリケーションは、主にこのContentsPanelの中身を入れ替えて動かします。 
まずは、アプリケーションのタイトルを変えてみましょう。TitlePanelのブロックで表示されている、[MY APPLICATION]の部分をクリックしてみてください。するとエリアが小さな■に囲まれるかと思います。この■に囲まれているエリアが[MY APPLICATION]と表示しているコントロールTextBlockの有効範囲となります。 
また、よく見ると画面右下にある[Properties]ウィンドウが、選択したTextBlockコントロールのプロパティに変化して、TextBlockコントロールの主要プロパティであるTextプロパティが有効になっているのが分かるかと思います。 
このTextプロパティ値を「WP STUDY」に変更してみましょう。
すると、デザイン画面のタイトル表示も[MY APPLICATION]から[WP STUDY]に変わったのが分かるかと思います。 
これと同じように、[page name]も[web browser]に変更しておきましょう。 
次回は、各コントロールを配置していきます。
Windows Phone 7 アプリを開発するに当たって、第1回でUIデザイン／操作ガイドについて書きました。
今回は、アプリを開発し公開するに当たって最大の壁である審査で注意しなくてはいけない点を考えてみたいと思います。
アプリケーションの審査では、アプリケーション認定要件が用意されており、その内容に基づいて審査されていると考えられます。ちなみに認定要件の原文は以下のリンクから確認ください。
アプリケーション認定要件(英語)
http://msdn.microsoft.com/en-us/library/hh184843.aspx
Bing Translatorによる自動翻訳されたページ
http://bit.ly/knwZws
プログラムが認定されるには、最低でも以下の要点がクリアされていなくてはなりません。
この4点は、日頃の開発でも重要なところですので、気をつけていただけたらと思います。
他にも、細かいところでもありますが、今回はこの4点は絶対抑えると云うことを覚えていただけたらと思います。
次回は、超簡単なブラウザアプリを作ってみたいと思います。
基本中の基本コンポーネントしか使わないものにしますので、初めての方も覗いていただけたらと思います。
Windows Phone 7ことはじめ、気付けばもう4回目です。アプリ開発での要件などもまとめておきたいのですが、やはりエミュレーターなどの開発環境の機能に目がいってしまっていて……まずいなぁとか思いながら今回もエミュレーターの機能の紹介です（苦笑）。
前回は、エミュレーターの日本語入力を試しました。今回は、コピーアンドペーストの機能です。コピーアンドペーストは、初期のWindows Phone 7には実装されていなかったそうで、今回のMangoでのアップデートで確実に実装される機能のようです。
早速ですが、動画を見てください。
操作としては、以下のような手順をふみます。
色々使ってみて、コピーアンドペーストも使用するユーザーのことをよく考えて作られているように感じました。
些細な機能かもしれませんが、細かいところに配慮されていることを考えると、ますます期待が高まりますね。
順序よく進めたいところですが、紹介したいものがありましたので紹介します。
さて、現在Windows Phone Developer Tools （以下、WPDTとしたいと思います）に付属のエミュレータ。最新のMango対応のBeta版では日本語表示に出来ると言うことを以前紹介しました。
今回は、この中でも皆さんが気になっている日本語入力の部分にフォーカスを当てたいと思います。
とにもかくにも、以下動画をご確認ください。
こちらは、日本語でメインとなる12キーで入力した様子をキャプチャしたものです。12キーでは、主力となるであろう「フリック入力」と日本人になじみのあるベル打ちをガラケーではなじみのある「かなめくり」を実際にやってみせています。
現在、日本語入力に関してはMSIMEの開発チームがさらなるカスタマイズを行っているとのことですので、このエミュレーターの内容から改善されて出てくることは必須かと思いますが、雰囲気でも感じてもらえたら幸いです。
2011.6.26 修正
「かなめくり」のことを「ベル打ち」と勘違いしていたところをブログを見てくれた方からご指摘いただきました。訂正して、誤解を招く表現をしてしまい申し訳ありませんでした。
Windows Phone 7 ことはじめの第2回目ですが、今回はアプリケーション開発で補助として使えるオフラインツールを紹介したいと思います。
日本マイクロソフトのエバンジェリストの高橋忍氏がブログにて公開していますが、米UIStencils社が販売している「Windows Phone 7 Stencil Kit」と「Windows Phone 7 Sketch Pad」です。
Windows Phone ステンシル&パッド（高橋忍氏のブログエントリ）
http://blogs.msdn.com/b/shintak/archive/2011/06/13/10173819.aspx
このキットは過日に行われた「Windows Phone Developer’s Day」という招待制のイベントで参加者に配布されたものらしいです。
私は、通販で入手しました。
今回は、Stencil Kit 1つとSketch Pad 3冊を注文してみました。
金額は以下の通りとなりました。
Sketch Padに関しては、1冊で$12.95だったりするので、Stencil Kitを含めると約7000円くらいでお取り寄せできます。ですので、この場合は3冊買って取り寄せた方がお得かなとか思います。
配送にかかる時間は、シアトル発送で約5日。週明けに注文すれば週末に届く計算となります。
実際に袋から取り出すとこんな感じで、Sketch Padは表面がPivotやPanorama向けのパッドになっていて、裏面は3画面分のパッドになっています。
使い方は、イロイロ考えることが出来ますが、Pivot ／ Panorama向けのパッドにメイン画面をデザインして、各ボタンの機能を書き込んでみたりとか、裏面で個々の詳細画面を作ったりとか、アイコンのデザインを残しておいたりとかイメージが膨らみますね。
開発にあたり、こういうツールから入るのもありだと思います。
気になった／購入したいなと思われた方は以下からどうぞ。
UI Stencils
http://www.uistencils.com/
Windows Phone 7 Stencil Kit
http://www.uistencils.com/collections/frontpage/products/windows-phone-stencil-kit
Windows Phone 7 Sketch Pad
http://www.uistencils.com/products/windows-phone-sketch-pad
Windows Phone 7のアプリケーションを作成するに辺り、是非とも目を通しておいた方が良いドキュメントがあります。
Windows Phone 7 向け UI デザイン/操作ガイド
XPS版：3.80 MB
PDF版：3.29 MB
※予告なくリンク先が変更される場合がありますのでご注意ください。
このドキュメントは、Windows Phone 7の主要な操作とUIコントロールのデザインや配置に関して、気をつけなければいけない点などがかなり詳細に記述されています。一通り目を通しましたが、Windows Phone 7に限らず、AndroidやiPhoneでのUIデザインにも共通するところはあると思いますので、モバイルアプリケーションをしている方は是非目を通されることをオススメします。
このガイドに目を通しておいた方が良い理由は以下の通りです。
逆に注意点もあります。
提出したアプリが不採用にならないためにも、一読をお勧めします。
最終的には、ライブラリ等に目を通してチェックすべきところはあるかと思いますが、必要最低限の項目はこちらのガイドラインに大体網羅されています。
次はWindows Phone 7で使えるオフラインのツールをご紹介したいと思います。
※現在配送中ですが、書きたいときに現物が届くか……。
とある個人事業主のシステム開発メモ 