PhoneGap 1.3 : HTML5 と JavaScriptで作るWindows Phone アプリケーション

Windows Phone Advent Calendar 2011の24日目です。 PhoneGapとは、HTML5によるアプリケーションプラットフォームで、複数のモバイルデバイスをサポートしています。 2011/12/19 (日本では2011/12/20)にPhoneGap 1.3がリリースされ、Windows PhoneプラットフォームもすべてのPhoneGap APIをサポートするようになりました。 Microsoftからは、Port25でアナウンスがありました。 PhoneGap 1.3を Windows Phoneで利用するのは簡単です。 1. Windows Phone SDK 7.1 をインストールします。当然ですが、Windows Vista/Windows 7のOSを準備してください。 Intel Macで利用される場合は、Bootcampをご利用の上、物理マシン上にOS環境を作成してください。 2. PhoneGapのファイルをダウンロードし、zipファイルを展開します。 3. PhoneGapStarter.zip ファイルをお使いのコンピュータのドキュメントフォルダーの下にある Visual Studio 2010\Templates\ProjectTemplates サブフォルダへそのままコピーします。zipファイルの展開は不要です。 4. 新しいプロジェクトを作成し、[PhoneGapStarter]テンプレートを選択します。 5.ソリューション エクスプローラーに www フォルダがあることを確認しましょう。 HTML、CSS、JavaScript、画像ファイルなどはこちらに、[コンテンツ]として配置します。 6. [F5]キーを押して、デバッグ実行します。PhoneGap 1.3.0が利用できることを確認します。 7. PhoneGapのAPIリファレンスを開きます。index.htmlを編集してカメラを利用してみましょう。 APIリファレンスのコードは、phonegap.jsの表記にバージョンが入っていないため、テンプレート内にある記述を残して利用しましょう。 <!DOCTYPE html> <html>   <head>     <meta…

0

Windows Phone : TweetTileテンプレート

※ 2012/3/21 添付ファイルをv2.1に更新しました。 クラウディアと Twitter でコミュニケーションするアプリケーションを作ってみよう の記事で紹介しているサンプルをVisual Studio 2010用のテンプレートにしてみました。 テンプレートを利用して、短時間にアプリケーションをApp Hubに申請できるところまで仕上げてみましょう。   テンプレートのインストール この投稿に添付のzipファイルを、お使いのコンピュータのドキュメントフォルダーの下にある Visual Studio 2010\Templates\ProjectTemplates サブフォルダへそのままコピー (zipの展開は不要)  を行い、Visual Studio 2010あるいはVisual Studio 2010 Express for Windows Phone を起動してください。(すでに起動している場合は、一度、終了してください)   テンプレートの利用手順 手順1: 新しいプロジェクトの作成で、TweetTileV2を選択 新しいプロジェクトの作成を選ぶと、次のように、TweetTileV2というテンプレートが表示されますので、名前を設定して、[OK]ボタンを押します。 手順2: MainPage.xamlの修正 MainPage.xaml を開き、太字の部分をお使いのTwitterユーザーに合わせて修正します。 (修正前) <StackPanel x:Name=”TitlePanel” Grid.Row=”0″ Margin=”12,17,0,28″>     <TextBlock x:Name=”ApplicationTitle” Text=”クラウディア” Style='{StaticResource PhoneTextNormalStyle}’/>     <TextBlock x:Name=”PageTitle” Text=”@Claudia_Azure” Margin=”9,-7,0,0″ Style='{StaticResource PhoneTextTitle1Style}’ FontSize=’64’ />…

0

[TFセミナー フォローアップ] サンプル公開: Windows Phone 企業向けアプリケーション配布の考え方と実装例 (IIS Expressを使用していないバージョン)

http://blogs.msdn.com/b/aonishi/archive/2011/11/28/10241875.aspx で公開したサンプルは IIS Express を利用しているため、うまく開けない方がいらっしゃったかもしれません。 IIS Express を利用していないバージョンを添付します。   AppForEnterprise02.zip

0

データ URI (Data URI)サポート : Internet Explorer 9 (PC) / IE Mobile (Windows Phone 7.5)

Internet Explorer 9 は Data URI をサポートしています。Data URIのスキーマはRFC2397にあります。IE の歴史においては、IE 8から Data URIがサポートされました。IE 9では、Data URIのサイズ上限が4GBまで拡張されています。 次のような書式で記述します。 data:[mime-type][;base64],<data as text>   たとえば、左の画像は、Data URI を利用すると <img src=’data:image/png;base64,iVBORw0KGgoA…’ /> という形式で宣言することができます。メリットは、クライアントからサーバーへのHTTP リクエストが減り、パフォーマンスが向上することです。 PC版のInternet Explorer 9だけではなく、Windows Phone 7.5のInternet Explorer Mobileでも利用できます。加えて、Windows Phone 7.5のWebBrowser コントロールでも表示できます。左の図は、WebBrowserコントロール上でData URIを利用して画像を表示している例です。 サンプルファイルを添付します。 WebDataURI.zip

0

[セミナーフォローアップ] 11/28 TFセミナー 企業利用者のための、Windows Phone アプリ開発 ~業務アプリケーションの配信と管理を実装する Part 1: 企業向けアプリケーション展開、考え方と実装例

本日のセッションは、企業向けにWindows Phone アプリケーションを展開するための考え方と実装例について話をしました。 セッション構成です。 一般論としての確認です。 企業向けアプリケーションは、一般のアプリケーションと異なり、公開範囲やセキュリティ要件が異なります。 Web アプリケーションあるいは専用アプリケーションとしての展開が考えられます。それぞれ、セキュリティの実装が必要ですが、セキュリティについては、Part 2のセッションに委ねました。 Windows Phoneのアプリケーションは、Marketplaceを通じて配布します。 Windows Phoneのアプリケーションは、App Hubというサイトを通じて、申請され、審査が行われます。 App Hubのアカウントは年間登録料 9,800円でご利用いただけます。 学生の方には、DreamSparkをご提供しています。 Windows phone のアプリケーションは、.xap ファイルという zip 形式のファイルにまとめられます。中には、アセンブリファイル (.dll)や画像ファイルなどが含まれています。 App Hubに申請されたファイルはテストされて、問題なければ Windows Phone Marketplace に公開されます。 現時点のWindows Phone Marketplaceは、3種類の方法でアプリケーションを公開できます。 公開までの流れを確認しましょう。 ベーター公開は、審査対象外なので、制約はありませんが、あくまでもテスト用途のみにご利用いただけます。 Windows Phone Marketplaceは、現時点では、企業向けの配布機能を有していません。 このため、企業向けでも App Hubへ登録し、審査を通して、Windows Phone Markeplace を通じて配布が必要です。この時に、プライベート配布を利用することで、アプリケーションが一般には公開されないように制御できます。 開発者登録済みのデバイスは、開発者が10個までアプリケーションを直接インストールできます。しかし、企業向けのアプリケーションにこの機能を利用するのは推奨されません。理由として、開発者登録されたデバイスには自由にアプリケーションがインストールできるため、不用意にアプリケーションが展開されるリスクがあります。 ならば、一時的に開発者登録したデバイスにアプリケーションをインストールして、開発者登録を解除する方法を試みる方もいるかもしれませんが、これはうまく動作しません。開発者登録を解除すると、開発者がインストールしたアプリケーションの起動ができなくなります。 それでは、Windows Phone Markeplaceの制約を理解して、アプリケーション配布を考えましょう。 アプリケーションを非公開として Marketplace に登録してください。テストのメモをきちんと書くことをお勧めします。 Markeplace で管理されているアプリケーションには、一意のURLが割り振られます。公開、非公開に依らず、…

3

[TFセミナー フォローアップ] サンプル公開: Windows Phone 企業向けアプリケーション配布の考え方と実装例

本日、TFセミナーで利用したアプリケーションを共有します。事前に公開できず、Ustreamで視聴された皆様にはご迷惑をおかけしました。 この投稿の添付ファイルからダウンロードをお願いします。 ※ 添付は、IIS Expressを利用しています。利用していないバージョンは、こちら。   AppForEnterprise.zip

0

Windows Phoneの名前を変更する: 複数台のWindows Phoneデバイスを開発者登録する際の注意点

App Hubのアカウントを利用して、Windows Phoneデバイスを開発者登録する際に、「デバイスの名前をユニークにする」ことを忘れないようにしましょう。 既定の名前を利用して、1台のデバイスのみを開発者登録している場合は問題にならないのですが、同じデバイスの名前を利用していると、2台目以降はエラーとなります。 この問題に対処するには、Windows Phoneに名前を付けます。 Windows Phoneの名前を変更する方法 (同期関係が設定されていない場合) Windows PhoneデバイスをUSBケーブルで接続し、Zune Softwareを開き、[電話]タブを選択すると、デバイスの名前が表示されます。 デバイスの名前を変更するには、[同期関係の変更]をクリックします。画面が変わるので、[次へ]へ進み、名前を変更します。 Windows Phoneの名前を変更する方法 (同期関係が設定されている場合) Windows PhoneデバイスをUSBケーブルで接続し、Zune Softwareを開き、[設定]メニューから、[電話に名前を付ける]を選びます。

0

Windows Phone : WebBrowserコントロールの User Agent文字列は何?

本日のTech Fielders セミナーで 「IE Mobileでモバイル優先とデスクトップ優先、2つのユーザーエージェントがありますが、Windows Phone 7.5/Windows Phone OS 7.1のWebBrowserコントロールのユーザーエージェント文字列はどうなりますか?」 という質問がありましたので、記事に残します。 回答としては、「Internet Explorer Mobileの設定に依らず、モバイル優先のユーザーエージェントになります」 エミュレーターでの確認例: IS12TにおけるWebBrowserコントロールのユーザーエージェント文字列: Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; FujitsuToshibaMobileCommun; IS12T; KDDI) 確認用のプロジェクトを添付します。 GetUserAgent.zip

0

10/29(土) スマートフォンアプリ選手権 受賞部門別ファイナリストのアプリ作品紹介

先週土曜日にスマートフォンアプリ選手権の最終プレゼン&表彰式に参加してきました。 USTREAMのページは、こちら。 最終プレゼンに参加となった作品を受賞部門別にご紹介したいと思います。 「かわいい賞」 よつばさがし 林 陽一様の作品です。 よつばのクローバーを探すエンターテインメントアプリです。専用の物理エンジンを開発したそうです。 言葉では伝わりにくいので、ぜひ体験してください。選手権当日は審査員の方も最後まではまってました。   「モテ賞」 SteamMessage 池田道弘(ドリームオンライン)様の作品です。 曇りガラスにメッセージを描くような雰囲気を楽しめる上に、ふっと息を吹きかけて消えたメッセージを再び浮かび上がらせるという粋な仕掛けがあります。 Storyboardを利用して実装しているそうです。   「おばか賞」 KikkakeCamera 青木賢太郎様の作品です。 Windows Phoneで写真を撮ってもらう際に、相手とコミュニケーションできたら、何かきっかけが生まれるかもしれない。 そんな願いをかなえるカメラです。いたずらモードもあるので、相手をびっくりさせるのにも使えるかも。   「学生賞」 走るブタ 栂井良太(学生)様の作品です。まだマーケットプレースには登録が終わっていません。 障害物を避けながらブタをゴールへ連れて行くというゲームです。デバイスの傾きとジャンプ用のボタンだけで操作できるシンプルなものですが、開発した本人もまだすべてのステージをクリアできていないそうです。ステージエディタも.NETとC#で開発されており、当日はデモがありました。 Windows Phone SDK 7.1だけで作成され、選手権の決勝戦で初めて実デバイスで実行した、という驚きの作品でした。今後のリリースに期待です。     「特別賞(インフラジスティックス・ジャパン賞)」 2作品  WikiTrans 松村 哲朗(学生)様の作品です。Marketplaceに登録されていたのですが、直前でWikipedia側の仕様変更があり、決勝戦当日は、新しいバージョンでプレゼンされました。専門用語に強い翻訳アプリです。     トイレに行きたい!! 小島努(豆蔵)様の作品です。地図の上に、トイレの場所が表示されるアプリケーションです。自転車大好きマップの情報を利用しているので、トイレについてのコメントが参考になります。       「高橋名人賞」 4作品 2chまとめ読み 山下拓也様の作品です。 Windows Phoneのピボットコントロールを活用して、上下・左右のスクロールでさくさくと記事を読んでいけるソフトです。    大人のマナー初級編 椎野磨美様の作品です。 社会人のマナーをクイズで学べるアプリケーションです。それぞれの問題に解説があり、解説の大事な部分にマーカーで線を引けるので、繰り返し読んでマナーをしっかり身につけられるでしょう。…

0

Internet Explorer Test Drive Mobileを使ってCSS3 Media Queries を体験しよう

CSS3 の Media Queries (http://www.w3.org/TR/css3-mediaqueries/)を利用して、1つのWebページで、デバイスの表示できる解像度に応じてページが切り替わる仕掛けを作ってみませんか。 論より証拠、まずは次のサイトをHTML5/CSS3に対応したPCブラウザーで表示してください。 http://ie.microsoft.com/testdrive/mobile/HTML5/CSS3MediaQueries/Default.html   解像度大: 写真が2列に表示 解像度中: 写真は一列表示 解像度小: モバイル向けに最適化されたページ 具体的には次のスタイルシートが利用されています。 .smallPhoto, .placeTitleShort, #mobile, #netbook, #widescreen  { display:none;} @media (min-width:950px) {   .place {   border: thin solid black;   width: 46%;   padding:0px  10px 10px 5px;   margin:5px;   float:left;   } .photo {  width:100%;  text-align:center; }  .bigPhoto {  margin:0 auto;  width:100%;  height:100%;  max-width:640px;  max-height:480px; } .smallPhoto, .placeTitleShort {      display:none; }  .description {   margin:10px; }  #widescreen {   display:inline;   float:left;   color:purple;   margin-top:12px;    } #DemoContent h1 {  float:left;  margin-top:0px !important;  margin-right:15px !important;  font-weight:bold !important;  color:…

0