日経ソフトウエアに寄稿した記事がオンラインで公開されています。

公開されてから1ヶ月ほど経っていますが、ブログで紹介し忘れていたので改めて。

日経BP様の技術系の情報サイトであるIT Proにて、以前日経ソフトウェアに寄稿した記事が公開されました。

Windows Phone アプリを開発してみよう

3/12~14の3回で私が寄稿した分の記事が公開されました。
3/12分:開発環境を整えよう
3/13分:まずは「ボタン」と「テキスト」から
3/14分:ツイート付きプレイヤーにチャレンジ!

こちらの記事で紹介しているアプリのソースコードは日経ソフトウェアのサイトからダウンロードできるので、是非ダウンロードしてみてくださいね。

私の担当分で分からないことがありましたら、Twitterとかコメント欄でご質問頂ければできる限りフォローさせて頂きます。

Windows Phone 7 ことはじめ(7) - 簡単なブラウザアプリケーションを作成してみよう。(2)

前回は、簡単なブラウザアプリを作る前段階で話が終わってしまいました。今回はその続きで、ブラウザでWebサイトを開くまで行いたいと思います。

ブラウザに必要なコントロールを配置する

前回は、アプリケーションのタイトルなどを編集しました。今回は、ブラウザのアプリケーションで必要なコントロールを配置していきます。
今回必要なコントロールは次のコントロールです。

  • WebBrowserコントロール
  • TextBoxコントロール
  • Buttonコントロール

それぞれを1個ずつContentPanel内に適当に配置します。適当なので、以下のような感じになるかと思います。
WPStudy_Lesson2_0_001

コントロールに名前を付ける

まずは配置した各コントロールに名前を付けたいと思います。
配置したコントロールのどれでも良いのでクリックしてください。すると、プロパティウィンドウの内容が切り替わりますので、その最上部のコントロール名が表示されている横をクリックしてください(下図赤丸で囲っている箇所)
WPStudy_Lesson2_1_001
クリックすると入力できるようになりますので、各コントロールの名前を変更しましょう。この時、そのコントロールにどういう役目を割り当てるのかを考えながら名前を付けるように習慣づけてください。今後開発していく上で大切なことです。
今回は、以下の感じで名前を付けました。

  • WebBrowserコントロール …… webMain
  • TextBoxコントロール …… txtUri
  • Buttonコントロール …… btnGo

コントロールの配置をキレイに並べる

これをもうすこしキレイに並べたいと思います。
ここでは、デザインビューで修正するのもありかと思いますが、XAMLで修正したいと思います。

MianPage.xamlのデザインビューの反対側は、XAMLコードになっているかと思います。その中に以下のようなコードの箇所があるかと思いますので探してください。
以下のソースではClick=”btnGo_Click”の記述がありますが、今の段階ではないと思いますので無視してください。
WPStudy_Lesson2_0_002

これを次のように書き換えてみてください。
主にMargin属性を削除し、StackPanelを利用して、コントロールの並びを整理しています。
WPStudy_Lesson2_0_003

書き換えると、以下のようにデザインが変わるかと思います。
WPStudy_Lesson2_0_004

これで大体のコントロールの配置は完了しました。

イベントを設定する

次に、イベントを設定します。イベントとは、あるボタンをタップしたらメッセージを表示したり、リストボックスなどをタップしたらそのタップされた箇所にあるアイテムを選択状態にするなど、ある処理を行うときのきっかけを設定するモノです。

今回は、ボタンをクリックしたらブラウジングを行うので、ボタンのClickイベント設定します。初めに配置したbtnGoを選択してください。プロパティウィンドウのEventsタグを選択します。するとボタンコントロールに設定されているイベント一覧が表示されます。
WPStudy_Lesson2_1_002
表示されたイベント一覧からClickイベントを選択し、ダブルクリックしてください。
すると、自動的にClickイベント用のメソッドが生成され、MainPage.xamlには、btnGoに先ほど紹介した「Click=”btnGo_Click”」の記述が追加されていると思います。

WPStudy_Lesson2_0_003

また、同様にMainPage.xaml.csには、イベント用のメソッド「btnGo_Click」が追加されているかと思います。
WPStudy_Lesson2_1_003

作成されたbtnGo_Clickメソッドに以下の2行を追加します。
WPStudy_Lesson2_1_004a

追加すると、以下のようになります。
WPStudy_Lesson2_1_004

これでひとまず完成です。

アプリケーションをビルドする

編集したソースを一旦保存し、[Build]->[Build Solution]を選択するかF6キーを押して、アプリケーションのビルドを行います。ビルドを行わないと、アプリケーションとして使えません。コードを編集したら必ず実行しましょう。
WPStudy_Lesson2_2_001

ビルドがすべて正常に終了し、問題がなければ、画面左下のステータスバーに[Build succeeded]と表示されるはずです。
WPStudy_Lesson2_2_002

エミュレーターを使って、デバッグしてみる

その後に、[Debug]->[Start Debugging]を選択するかF5キーを押して正常に動作するか確認しましょう。すると、エミュレーターが起動して作成したアプリケーションがエミュレーターに転送されます。
アプリケーションの転送が完了すると、以下の画面になります。
WPStudy_Lesson2_2_003

今回はエミュレーターでのテストなので、マウスでエミュレーター内のテキストボックスをクリックします。すると、テキスト入力の画面になります。
WPStudy_Lesson2_2_004

テキストボックスに適当なURLを入力して、そのまま「Go」ボタンをクリックしてください。すると、入力したURLのサイトが表示されるかと思います。
今回の例では、モバイル用のIE Test Driveページの「http://ie.microsoft.com/testdrive/mobile/」を指定して、表示しています。
WPStudy_Lesson2_2_005

表示されれば、成功しています。表示されなかった場合、入力したURLが間違っていないか確認してください。合っていても表示されない場合は、MainPage.xaml.csで追加したコードを確認してください。

ここまで問題なく完了したら、晴れて初めてのアプリケーションが正常に実行されたことになります。
おめでとうございます。

次回は、今回記載したコードに関して簡単に解説したいと思います。

Windows Phone 7 ことはじめ(6) - 簡単なブラウザアプリケーションを作成してみよう。(1)

今回からアプリケーションを作るところを実際にやっていきたいと思います。今回作成するのは、簡単なブラウザアプリケーションです。
すでに【Microsoft Visual Studio 2010 Express for Windows Phone】(今後、VSEWPと記載したいと思います。)がインストールされていることを前提で話を進めていきます。まだの方は、私の過去記事を参考にインストールしてください。

アプリケーションの動作仕様を決めよう

今回は、次のような動作仕様で作ってみたいと思います。

  • テキストボックスには、URLを入力する。
  • テキストボックスに入力した後、「GO」ボタンを押すと入力されたURLへブラウジングする。

プロジェクトを作成しよう

まずは、必要なプロジェクトを作りたいと思います。VSEWPを起動した後、[File]->[New Project]をクリックしてください。
WPStudy_Lesson1_001

すると、プロジェクトの作成画面になります。今回は簡単なアプリケーションなので、ウィンドウ左の[Installed Templates]から[Silverlight for Windows Phone]を選択して、その項目から[Windows Phone Application]を選択します。
その次にプロジェクト名を入力します。ウィンドウ下にある[Name]のテキストボックスをクリックし、今回は学習という意味もあるので[WPStudy]と入力しておきましょう。別の名前でも問題ありません。皆さんが分かりやすい名前で入力してください。
また、保存されるフォルダを決めておきたい場合はこのときに決めておきましょう。デフォルトは、
C:\Users\[ユーザー名]\Documents\Visual Studio 2010\Projects
の下に保存されます。
私は今回の場合、「C:\work\MyOriginal」という場所の配下に置くことにしました。
これらの入力が完了したら、[OK]ボタンを押します。
WPStudy_Lesson1_002

[OK]ボタンを押すと、[Windows Phone Developer Tools V1]をインストールしている場合は、すぐにプロジェクトが作成されますが、Windows Phone SDK(以降、WPSDKと表記します)をインストールしている場合は、すぐにプロジェクトが作成されず、次に作成するプロジェクトを利用するWindows Phone のバージョンを訊ねられます。
今回は[Windows Phone 7.1]のままで問題ないと思いますので、このまま[OK]ボタンをクリックしてプロジェクト作成します。
WPStudy_Lesson1_003

プロジェクトが作成されると、以下のような画面になるかと思います。
※クリックすれば、大きい画像が見られます。
WPStudy_Lesson1_004

画面構成を把握しよう

コードウィンドウ

まずは、画面構成を把握しておきたいと思います。中央一番広いウィンドウは「コードウィンドウ」になります。Windows Phoneアプリケーションは必ずSilverlightまたはXNAで作成するので、このウィンドウで画面のデザインとか、コード編集とかを行うことになります。
WPStudy_Lesson1_004_c

ソリューションエクスプローラー

画面右には、ソリューションエクスプローラーと呼ばれる、作成したプロジェクトのファイル一覧を見れるウィンドウがあります。
プロジェクトにフォルダやファイルを追加する場合は、このウィンドウを介して行いますので、覚えておきましょう。
WPStudy_Lesson1_004_d

プロパティウィンドウ

また、画面右下にはプロパティウィンドウがあります。このウィンドウは、選択したコントロールの各プロパティ(設定値)を変更するためのウィンドウです。プロパティ設定は、調整等で頻繁に使います。また、後で説明しますが、イベント管理でも使われますので、この画面の存在は覚えておきましょう。
WPStudy_Lesson1_004_j

※プロパティウィンドウは、デフォルトでは開いていません。[View]->[Other Window]->[Properties Window]で、表示するようにしておくと後々楽です。
WPStudy_Lesson1_004_k

ツールボックスなど

画面左には、少しわかりにくいかもしれませんがツールボックスなどのサブウィンドウが最小化されて配置されています。
WPStudy_Lesson1_004_e

ツールボックス

[Toolbox]タブにマウスカーソルを合わせると、次のような表示になり、Windows Phoneアプリで配置できるコントロール(部品)の一覧が表示されます。
WPStudy_Lesson1_004_f

ドキュメントアウトライン

[Document Outline]タブにマウスカーソルを合わせると、次のような表示になります。このウィンドウは、Silverlightの画面をデザインするときに使われるXAMLというマークアップ言語のアウトラインが表示されます。コントロールをまとめるためのコントロールであるStackPanelGridの前後関係などを確認するのに使用します。
WPStudy_Lesson1_004_g

その他

もう1つ[Data Sources]タブもありますが、今回はデータを保存するなどのこともしないので説明は割愛します。

デザインビューを把握する

では、初期のデザイン画面を見てみましょう。デザイン画面では、2つのブロックにコンテンツが分かれているのが分かると思います。上部は、[TitlePanel]と呼ばれるブロックです。主にアプリケーション名やアプリケーションのガイドになるものを表示するエリアです。下部は[ContentPanel]と呼ばれ、アプリケーションのメイン部分になります。Windows Phoneアプリケーションは、主にこのContentsPanelの中身を入れ替えて動かします。
WPStudy_Lesson1_004_h

プロパティを変更する

まずは、アプリケーションのタイトルを変えてみましょう。TitlePanelのブロックで表示されている、[MY APPLICATION]の部分をクリックしてみてください。するとエリアが小さな■に囲まれるかと思います。この■に囲まれているエリアが[MY APPLICATION]と表示しているコントロールTextBlockの有効範囲となります。
WPStudy_Lesson1_004_i

また、よく見ると画面右下にある[Properties]ウィンドウが、選択したTextBlockコントロールのプロパティに変化して、TextBlockコントロールの主要プロパティであるTextプロパティが有効になっているのが分かるかと思います。
WPStudy_Lesson1_004_j

このTextプロパティ値を「WP STUDY」に変更してみましょう。
すると、デザイン画面のタイトル表示も[MY APPLICATION]から[WP STUDY]に変わったのが分かるかと思います。
WPStudy_Lesson1_005_a

これと同じように、[page name]も[web browser]に変更しておきましょう。
WPStudy_Lesson1_006

次回は、各コントロールを配置していきます。

Windows Phone 7 ことはじめ(5) - アプリケーション認定要件を整理する。

Windows Phone 7 アプリを開発するに当たって、第1回でUIデザイン/操作ガイドについて書きました。
今回は、アプリを開発し公開するに当たって最大の壁である審査で注意しなくてはいけない点を考えてみたいと思います。

アプリケーションの審査では、アプリケーション認定要件が用意されており、その内容に基づいて審査されていると考えられます。ちなみに認定要件の原文は以下のリンクから確認ください。

アプリケーション認定要件(英語)
http://msdn.microsoft.com/en-us/library/hh184843.aspx
Bing Translatorによる自動翻訳されたページ
http://bit.ly/knwZws

プログラムが認定されるためのキモ

プログラムが認定されるには、最低でも以下の要点がクリアされていなくてはなりません。

  1. 信頼性の高いアプリケーション。
    要は、用途がはっきりしていて、それ以外の機能を持ち合わせていないアプリケーションと考えれば良いのではないかと思います。
  2. アプリケーションリソースの仕様効率。
    メモリを無駄遣いしたり、CPUのパワーを無駄に使い続けていないこと。バックグラウンドに隠れたらUIスレッドのメモリ解放とかをちゃんとしているかとか、キモの中でも一番肝心で一番難しいところ。
  3. アプリケーションは電話機能に干渉しない。
    マルウェアによく見られる、勝手に国際電話の番号に電話をかけたり、SNSでメッセージを送信したりしないことと云えば良いでしょうか。
  4. アプリケーションは悪意のあるソフトウェアを含まない。
    要はウィルスやマルウェアのようなコードを入れるなと云うことですね。コソコソとどこかのサーバーに情報を送信したり、メールを勝手に送信とか。3と細かいところで被るかと思いますが、要するにそういうこと。

この4点は、日頃の開発でも重要なところですので、気をつけていただけたらと思います。

他にも、細かいところでもありますが、今回はこの4点は絶対抑えると云うことを覚えていただけたらと思います。

次回は、超簡単なブラウザアプリを作ってみたいと思います。
基本中の基本コンポーネントしか使わないものにしますので、初めての方も覗いていただけたらと思います。

Windows Phone 7 ことはじめ(4) - エミュレーターのコピーアンドペーストを試す。

Windows Phone 7ことはじめ、気付けばもう4回目です。アプリ開発での要件などもまとめておきたいのですが、やはりエミュレーターなどの開発環境の機能に目がいってしまっていて……まずいなぁとか思いながら今回もエミュレーターの機能の紹介です(苦笑)。
前回は、エミュレーターの日本語入力を試しました。今回は、コピーアンドペーストの機能です。コピーアンドペーストは、初期のWindows Phone 7には実装されていなかったそうで、今回のMangoでのアップデートで確実に実装される機能のようです。

早速ですが、動画を見てください。

操作としては、以下のような手順をふみます。

  1. コピー開始位置付近で長めにタップ。すると、選択範囲を設定するカーソルが出てきます。
    無題001
  2. 次にタップした付近に現れた左右のスライダーを動かして、選択範囲を設定します。
    無題002
  3. 選択範囲設定後に少し待つと、コピーアイコンが出てきます。
    これをクリックすると、コピーできます。
    無題003
  4. 貼り付けは、貼り付ける場所を指定して入力モードになると、貼り付け用のアイコンが出てきます。
    これをタップすると、コピーしたものを貼り付けられます。
    貼り付けが完了すると、貼り付けのアイコンが引っ込みます。
    無題004
    無題005

色々使ってみて、コピーアンドペーストも使用するユーザーのことをよく考えて作られているように感じました。
些細な機能かもしれませんが、細かいところに配慮されていることを考えると、ますます期待が高まりますね。