エバンジェリストの太田です

 みなさん、こんにちは。エバンジェリストの太田です。

一部ではGeorgeさんなんて通り名でも呼ばれています。理由は秘密。

メインの担当はWindows 8 ストアアプリ開発の普及啓発です。元々は制御ソフトウェア開発をやっていた組込みSW開発者、いわゆる、”クミコマー”出身なので、センサーや位置情報、NFC、周辺機器デバイス(健康器具とか、Legoとか）連携…といった機能はほっとけない質です。Windows 8.1はこれらの機能が非常に強化されたので、関連する技術情報発信、今後力を入れていきます。こういうのが好きな皆さん、一緒に盛り上がりましょう!!

その傍ら？、組込み機器そのもののソフトウェア開発の話も良くやります。特に、手軽にセンサー計測したりモータ回したり組込みSW開発を試せる、超小型組込み機器向けファームウェアの.NET Micro Frameworkもエバンジェライズ中。簡単にクラウドともつながるんだよね。

 

裸のボードを見ると萌えますねぇ…写真はFEZ Spiderとセンサーとか。Netduinoでも使えます。ArduinoやRaspberry PI、ガジェルネで遊んでいる人達、是非お試しを。

センサー？とくれば、最近はセンサークラウドとかM2M、ビッグデータ、IOT（Internet Of Things）とか流行ってますね。.NET Micro Framework＋Windows Azure＋Windows 8 Store Appsで実案件で実現すべく邁進してたりします。

過去にモデル駆動型開発やCMM等開発プロセス改善やっていた関係で、Visual Studioを使った組込みSW開発に関する話もしています。Visual Studioは日々の開発での機能が凄いだけでなく、の拡張性はすごく高いので、Visual Studio SDKとかVisualization & Modeling SDKなんぞをインストールして遊んでみてくださいまし。IDEの拡張とか、メタプログラミングなんかは、これはまた面白い世界。

う~ん…いろいろやってるなぁ…

最後にパーソナルなことの紹介。旅好きです。歴オタ＆神社仏閣好きなので殆ど行先は日本国内です。この間ようやく47都道府県全部制覇しました。

 ※宮崎県の伊弉諾命が禊した池

更には歌好き。ギターも練習していて、とりあえず、ストリートミュージシャンができるぐらいを目指して…（嘘です）

あ、忘れてました。Twitterは@embedded_george、私のブログは http://blogs.msdn.com/hirosho その名も、”デバイスとITの架け橋”。是非、フォロー＆ご参照くださいましぃ

【相談科】 テキスト入力できるマグネットの実装

相談科にご質問をいただいたのでご紹介します。

相談内容：Spotlight で公開されている、ホワイトボードテンプレートで、マグネット画像を「編集できるテキストボックス」にしたい。できればクラス図の様に記載できるともっといい。

なるほど、これ追いかけていくとかなり深刻な内容になりそうです。まずは一番簡単なパターンで、マグネットに編集可能なテキストを追加してみましょう。

シンプルにマグネットにテキストを追加してみる

ここのマグネットはMangnetItem のユーザーコントロールとして定義されているため、ここにTextBox を配置することで機能を実装することができます。

具体的には、MagnetItem.xaml に以下の1行を追加することで編集可能なテキストの表示が可能になります。

<Grid Background="{Binding Background, ElementName=userControl}">      

    <Image x:Name="img" Source="Image/Blue.png"/>

    <TextBox HorizontalAlignment="Center" TextWrapping="Wrap" Text="Item" VerticalAlignment="Center" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="White" TextAlignment="Center" />

</Grid>

これを実装するだけでもいろいろ応用ができそうです。

クラス図を目指して

もしクラス図のように表示するのであれば、このようなイメージでしょうか？

MagnetItem.xaml

    <Grid Background="Black" HorizontalAlignment="Center" VerticalAlignment="Center" MinWidth="200">

         <Grid.RowDefinitions>

             <RowDefinition/>

             <RowDefinition />

             <RowDefinition/>

         </Grid.RowDefinitions>

         <TextBox TextWrapping="Wrap" Text="Top" Background="White" BorderBrush="{x:Null}" Grid.Row="0" />

        <TextBox TextWrapping="Wrap" Text="Interface" Background="White" BorderBrush="{x:Null}" Margin="0,-2,0,-2" Grid.Row="1" />

        <TextBox TextWrapping="Wrap" Text="Class" Background="White" BorderBrush="{x:Null}" Grid.Row="2" />

        <!--使用していません-->

        <Image x:Name="img" Source="Image/Blue.png" Visibility="Collapsed" Grid.RowSpan="3"/>

    </Grid>

この場合、MainPage.xaml 側は 以下のように Height と Width を指定しないようにします。

<local:MagnetItem Margin="995,207,0,0" />

<local:MagnetItem Margin="123,494,0,0" />

<local:MagnetItem Margin="1045,592,0,0" />

<local:MagnetItem Margin="297,184,0,0" />

今のテンプレートの設計はマグネットのサイズが可変になることを想定していない為、このままで実装するといろいろ問題が出てくると思いますのでご注意が必要ですね。

また、マインドマップ的なものを実装するとしたら矢印の追従のケアも必要になりそうですね。ここまで行くと大手術が必要ですのでユーザーコントロールをしっかり設計する必要があります。

【アプリ紹介】 アプリ紹介 シンプルサッカー戦術ボード

今回1本の Windows ストアアプリを紹介させてください。

シンプルサッカー戦術ボード

これは、今行っている Spotlight 企画に一番最初にご応募いただいたアプリです。

今回バージョンアップされてまさに サッカー戦術ボードとして公開されました（ただ、私はサッカー素人なので...）

初めのバージョンは本当に Spotlight 企画 のテンプレートのマグネットをプレイヤーに置き換えたものでしたが、今回のアップデートでいろいろ機能アップしていました。

何が変わったかというと、

• ボールが追加された
• GKの表記が変わった（GKだとわかるようになった）
  
  
• 11x11人セット、6x6人セットをボタン一つで配置できるようになった
  
  
• ゴール前だけの画面も選べるようになった（ポストプレイの確認ができますね）
  
  

 特に、サッカー経験者なのはぜひ使ってみてほしいですね。

た詳しいことはこちらに。

高橋 忍のブログ

アプリ紹介 シンプルサッカー戦術ボード

タブレットアプリのデザイン

エバンジェリスト高橋です。

私の場合特にWindows Phone のアプリ開発周りにをずっとやっているので特にそう思うんですが、「タブレットのアプリケーションの画面デザインってなぜか難しい」って思うんです。そして、これまでの Windows のアプリデザインとも違うんです。

なんでだろう？って考えるといくつか要因がありそうです

・ 画面が広い。Phoneに比べると広すぎて画面を埋めるのに困る
・ 広いのでまとまらない、統一感がなくなる
・ デスクトップ感覚で作ると使いづらい

この辺りの話って、実はちょっとしたヒントで解決するものが多かったりします。ですので例をあげながら MSDNのUXパターンの記事を紹介してみましょうか。

Windows ストアアプリ UXパターン
http://aka.ms/8ux

埋まらない。ってのはやっぱり最初の設計が少し足りないせいかもしれません。まぁ、気軽に作り始めて作りながら考える、ってのも Visual Studio の便利なところではあったりしますけどね。
設計といってもそれほど大した話ではなく、どういったアプリにするか、そのために何が必要な要素か、それで子の画面では何をするのか？といったことを考えること。持って使う？置いて使う？これだけでも画面のつくり方は異なります。

この辺りの考え方はこの辺をぜひ眺めてみてください
http://msdn.microsoft.com/ja-JP/library/windows/apps/hh465427

統一感、という意味ではデザインのパターンが決まっているか？というのが重要ですね。色や形のデザインパターンです。ひとまず無難なのは標準のコントロールや標準のテンプレートをもとに初めて見るのがいいでしょうね。
後、統一という意味では、見た目のものだけではなく、見た目でもアニメーションであったり、通知方法だったり、というのも統一パターンです。戻る時のアニメーション、進むときのアニメーション、これが統一されているだけでもユーザーには理解しやすく安心できるアプリになります。さらに操作方法の統一も重要で、こういう操作はこうやってというのはOSレベルである程度身についてしまうものです。これをアプリが合わせるのは大事なことですね。

UXガイドライン
http://msdn.microsoft.com/ja-JP/library/windows/apps/hh465424

デスクトップ同様に作ると使いづらい。これもよくあることです。特にデスクトップアプリは1画面ですべて完結させたりするものが多く、結果としてすべての要素を画面に入れます。そして、マウスとキーボードで操作することを念頭に作られています。
しかし、タブれとはそうではない。重要なのは見やすいこと、そしてタッチで操作しやすいことだったりします。タッチ前提になれば、操作できる対象は必然的に大きくなります。当然情報量は減るので無駄なものを表示する余裕はありません。今すぐに使わないメニューは隠すようにすべきです。目的によってある領域の情報しか使わないのであればそれは目的別に画面を分けるべきです。

タッチパターン
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh465415.aspx

なので、もう一度「どういうシチュエーションで使うのか？」「何をしたいのか？」そういったことをいったんきっちり考えてくると、非常に優れたアプリになったりします。

このためにもぜひ、一度UXパターンの記事は見てみてください。
http://aka.ms/8ux

BAセミナー 「Web技術を活かしたWindows 8 アプリ開発セミナー 」

エバンジェリスト高橋です。

UXでも実績のあるBA社（Business Architects 社から社名変更されました）主催のセミナーが開催されます。（http://www.b-architects.com/seminar/windows8/）おもにWeb開発者・技術者に向けてのWindows 8の開発セミナーです。

タブレットなら、Webでいいじゃん？というのもあると思いますが、ぜひ、Webの技術を持ってアプリケーションの世界を広げる可能性を見に来てください。マイクロソフトからはエバンジェリストが登壇してお話しします。ぜひふるってご参加ください。

尚、100名定員になり次第終了となりますので、ご希望の方はお早目にご参加ください。

セミナー詳細

「Web技術を活かしたWindows 8 アプリ開発セミナー
　Windows 8 アプリの可能性と事例紹介」

日時：2013年9月26日（木）19時〜（開場：18時40分〜）

会場：日本マイクロソフト株式会社　品川本社 31階　セミナールームC+D

参加費：無料

定員：100人 (先着順)

内容

Windows ストア アプリケーション ビジネスモデル（MS Evangelist）
Web技術者向けWindows ストア アプリケーション 開発概要 （MS Evangelist）
HTML5やCSS3を活用したWindows 8 アプリ開発例 （BA Specialist）
質疑応答
懇親会（軽食ドリンク付）（無料、任意参加）

お待ちしておりますｗ