Windows8ストアアプリのサイドローディング

Date: 7月 19, 2013 Author: 石原 繁彦 Comments: Leave a reply

こんにちは。アスカクリエイション　石原です。

本日はWindows8ストアアプリのサイドローディングについて書きたいと思います。

ストアアプリでは基本的にストアからダウンロードしインストールする仕様となっており、従来のデスクトップアプリのように直接実行ファイルをコピーしセットアップすることができず、入手経路が制限されています。ストアアプリはMicrosoftで審査を経て掲載されるので品質の低いアプリや悪意あるアプリが混入しづらい点や、ユーザーがWeb上に点在するアプリを見つけ出さなくても、ストアで検索することで目的のアプリを入手することができるという面や、開発者にとっても自分のアプリを発信する場として、また、アップデートや収益、ユーザーからのレスポンスを管理できるという面で便利です。が、反面デメリットもあります。

社内システム等の限られた環境向けのアプリの場合、ストアに掲載したくないでしょうし掲載しても関係のないユーザーにはまったく無意味なアプリとなってしまいます。また、セキュリティ面で好ましくない場合もあるでしょう。

そのようなニーズの為にサイドローディングという手段があります。サイドローディングの手法を使うことでストア経由ではなくアプリのパッケージファイルを手動でインストールすることが出来ます。

しかし、サイドローディングが行えるシステム要件はかなり厳しいものとなっており一般ユーザーや中小企業が導入するには敷居の高い感が否めません。要件を以下に記載します。

 
・Windows8 Enterpriseで、グループポリシーで”信頼できるすべてのアプリのインストールを許可する”が有効になっているアクティブディレクトリドメインに参加していること。

・Windows8 Enterpriseでアクティブディレクトリドメインに参加していない環境ではサイドローディングプロダクトキーを購入し導入していること。

・Windows8 Pro、 RTではアクティブディレクトリドメインに参加しているかに関わらずサイドローディングプロダクトキーを購入し導入していること。

表にすると以下のようになります。

Windows 8 Windows RT Windows 8 Pro Windows 8 Enterprise
ドメイン環境 非サポート 非サポート サイドローディングプロダクトキー グループポリシーで許可
非ドメイン環境 非サポート サイドローディングプロダクトキー サイドローディングプロダクトキー サイドローディングプロダクトキー

 

無印のWindows8ではサイドローディングは出来きません。また、サイドローディングプロダクトキーは一般ユーザーが個別に購入するこは出来ず、Microsoftとボリュームライセンス契約を結んでいなければ購入出来ません。Microsoftに問い合わせてみたところボリュームライセンス契約にはいくつかの形態がありますが、サイドローディングプロダクトキーが入手できる契約には最低57万7千円かかるそうです。Windows8 Enterpriseも一般販売されていませんから、いずれにしても企業でMicrosoftと契約を結ぶ必要があり、一般ユーザーや小規模オフィスで気軽に導入できるものではないようです。

通常運用で使用する場合は上記のような要件が必要ですが、実は開発者ライセンスというものがあり、Visual Studio 2012 for Windows8等をインストールすると取得できます。開発者ライセンスは一定期間で期限が切れ、更新する必要がありますが、一時的にサイドローディングが可能になります。開発中のアプリをローカル環境で動作確認、デバッグするための配慮と思われます。

 

開発者ライセンスを取得した環境で手動サイドローディングを試してみたので手順を紹介します。

Step1. アプリの作成時にサイドローディング用のパッケージを作成する必要があります。 Visual Studioで「ストア」メニューから「パッケージの作成」ウィザードにて「Windowsストアにアップロードするパッケージを作成しますか？」で「いいえ」を選択。

sideloading_package

 

Step2. ルート証明書をインストールする必要があります。(実運用では信頼できる署名をアプリにバインドしておくべきで、本来この手順は不要のはずです)作成したパッケージフォルダ内(AppPackages)の.cerファイルを右クリックし「証明書のインストール」を選択。ウィザードにて「保存場所」→「ローカルコンピュータ」(「現在のユーザー」ではサイドローディングに失敗した)を選択。「次へ」をクリック「証明書をすべての次のストアに配置する」で「参照」をクリック「信頼されたルート証明書機関」を選択「次へ」をクリック。→完了。

sideloading_cer

sideloading_cer2

 

Step3. 現在のユーザーのアプリとしてインストールするにはPowerShellを起動し以下のコマンドを実行します。

> import-module appx
> add-appxpackage "アプリのパス\アプリ名.appx"

 

もしくは、全ユーザー向けにプリインストールされているアプリのようにシステムイメージにインストールすることも出来ます。その場合はまず、ファイル名を指定して実行からgpedit.mscと入力しローカルグループポリシーエディタを起動し、「コンピュータの構成」→「管理者用テンプレート」→「Windowsコンポーネント」→「アプリパッケージの展開」→「信頼できるすべてのアプリのインストールを許可する」を「未構成」から「有効」に変更します。

gpedit1

PowerShellからgpupdateコマンドを実行し設定を反映させた後、PowerShellを管理者権限で起動し以下のコマンドを実行します。

> DISM /Online /Add-ProvisionedAppxPackage /PackagePath:"アプリのパス\アプリ名.appx" /skiplicense

 

手順は以上です。上記手順ではコマンドを打つ必要がありますがMicrosoftのWindows IntuneやSystem Center 2012 Configuration Manager SP1という製品を使うとGUIでサイドローディング環境を構築できるようです。

 

Share

Windows 8.1 Previewを試す

Date: 7月 17, 2013 Author: 石原 繁彦 Comments: Leave a reply

皆さん。ご無沙汰しております。アスカクリエイションの石原です。

このところプロジェクトが忙しくて、なかなか記事を書く時間が取れませんでしたが、ようやく落ち着いてきたので久々に書こうと思います。

さて、今回はWindows8ネタで書こうと思います。先日、Windows BlueことWindows8.1のプレビュー版が公開されました。早速インストールして使ってみた中で、目立った変更点を紹介していきたいと思います。

Windows8.1プレビュー版は下記URLから入手できます。

http://windows.microsoft.com/ja-jp/windows-8/preview-download

なお、今回ISOイメージをダウンロードしVMWare上にインストールしてみましたが、インストール手順は従来のWindows8と大きな変更点もなくスムーズに完了しました。

 

まず、Windows8.1の前評判として期待されていたデスクトップのスタートメニューの復活ですが、Windows7以前のスタートメニューを期待していた方には期待外れかもしれません。

win8.1_desktopたしかに新Windowsロゴマークのアイコンがタスクバーの左下に追加されていますが、これは単にタイルのスタート画面への切り替えでした。

現在のWindows8ではアイコンは表示されていませんが、デスクトップの左下の隅にマウスカーソルを持っていくとタイルのスタート画面への切り替えとなっていたものが、アイコンとして明示的に表示されるようになったにすぎません。

なお、左下の隅で右クリックすると表示されるコンテクストメニューに若干の追加がありました。

win8.1_desktop_startPowerShellとシャットダウンメニューが追加されました。現在の８ではシャットダウンはチャームから設定で行うので、少しわかり辛かったのが多少楽になるかもしれません。

その他、エクスプローラのリボンがデフォルト最小化になっていました。

win8_explorer

 

スタート画面です。

win8.1_startスタート画面は魚があしらわれています。これは恐らくベタでしょうか。Windows7のベータ版でも壁紙にベタの画像が使用されていました。ちなみにベタの泡が時間の経過によって動きます。

スタート画面での変更点でまず、目につくのは左下の矢印アイコンの追加です。これをクリックすると以下のようにインストールされているアプリの一覧表示になります。

以前のスタート画面からチャームの検索の表示と同様のものですが、確かに、Windows8を使い始めたころはメモ帳や電卓、ペイントなどのデスクトップアプリを探すのに戸惑った経験があります。地味ですが気の利いた改善だと言えます。

 

win8.1_app

 

なお、スタート画面でチャームから検索すると、すべての場所の検索、つまりPCのファイルやアプリやストアとWeb(bing)での検索結果の表示という動作に変更されたようです。

win8.1_search

 

また、タイルの固まりにグループ名をつけられるようになりました。

win8.1_group

 

さらに、目立った点としてタイルサイズがこれまで標準とワイドのみでしたが、新たに小と大が加わり４段階になりました。これはアプリ開発時の対応が必要になってきそうですね。

start_tile

 

その他、特筆すべき点としてスナップの動作が変更されました。

win8.1_snap従来のスナップでは横幅320ピクセル固定だったのが、自由な割合でスナップできるようになっていました。

これはアプリ開発のスナップ時のレイアウトに影響しそうですね。ちなみにスナップは従来1366×768以上の画面解像度が必要でしたがこの制限は取り払われたようです。

また、従来はスナップ時のメインとサブが明確だったため、スナップ中に新たにアプリを起動するとメイン側が入れ替わるのに対し、領域が自由に分割可能になりメインかサブか明確では無くなったためか、新たにアプリを立ち上げると左右のどちらに表示するかを選択する画面になります。

win8.1_snap2

駆け足で目立った変更点を紹介しましたが、他にもストアの表示が変更されたりと細かな改善が見られます。正式リリースで仕様が変更される可能性もありますが、一ユーザーとしてリリースが楽しみです。開発者としてはタイルやスナップの仕様変更によって考慮しなければならない点が増えそうです。

今回は以上です。

Share

Firefox OS カスタマイズ – ホームスクリーンのアイコン表示数を変えてみた

Date: 6月 21, 2013 Author: 千原 寛之 Comments: Leave a reply

今回はホームスクリーンのカスタマイズ第一弾です。

FirefoxOSのホームスクリーンは中央が時計、左が検索、右がインストールアプリのアイコンリストとなっていて、検索画面以外では、下部にDockと呼ばれるAndroidやiPhoneなどでもお馴染みの固定のショートカットが配置できます。

前回NexusS用のROMをビルドして、焼いたのですが、ホームスクリーン自体は公式開発機のKEONとPEAK向けに作成されているようで、低解像度向けのロジックになっているようです。
NexusSの解像度が勿体ないので、アイコンの表示数を増やしてみました。

変更前のアプリのアイコンリストは、こんな感じです。
device-2013-06-19-193002

今回はこれを5×5表示に変えてみようと思います。

手順
まずは、ビルド環境のB2G配下に移動します。

$ cd B2G

変更するファイルは以下の5ファイルです。

gaia/apps/homescreen/js/grid.js
4  var MAX_ICONS_PER_PAGE = 5 * 5;

4行目の1ページあたりのアイコン表示最大数を5×5に変更します。

gaia/apps/homescreen/style/grid.css
38  width: 20%;

38行目のタグliの幅を20%に変更します。今回は横方向に5個のアイコンを表示するので100% / 5 = 20%となります。

gaia/apps/homescreen/js/dock.js
9  var maxNumAppInViewPort = 5, maxOffsetLeft;

9行目のDockのアイコン表示数を5に変更します。アイコンが5×5なので、下部のDockに表示するアイコン数も5個に揃えます。

gaia/apps/homescreen/style/dock.css
13  width: 140%;

13行目のDockの全体幅を140%に変更します。Dockは7個までアイコンを登録できるので、表示数から1つあたりの幅を計算して、100% / 5 * 7 = 140%となります。

gaia/apps/homescreen/js/page.js
22 var SCALE_RATIO = window.innerWidth / BASE_WIDTH * 0.8;

22行目のアイコンのスケール係数に0.8を掛けて、80%に縮めます。アイコンの表示数だけ変えた場合、ぎっしり並んでしまうので、サイズを調整します。

各ファイルの編集が終わったら、ビルドして、焼きましょう。

$ ./build.sh
$ sudo ./flash.sh

こんな感じにアイコンの表示数を変えることができました。
device-2013-06-21-102927

まだまだJavaScriptを追いかけるのに苦労しているのですが、Webアプリケーションに詳しい方なら、もっと大胆な変更が可能なはずです。
FirefoxOSは色々な可能性を感じますね。

Share

Firefox OS カスタマイズ – 起動ロゴを変えてみる

Date: 6月 12, 2013 Author: 千原 寛之 Comments: Leave a reply

Firefox OSのカスタマイズをやってみなさいと天の声があったので、調べていると簡単に起動ロゴを変えられるとのこと。
勉強会で発表されていたsolaさんのブログに書いてありました。こちら

Firefox OSのロゴを利用するのは基本的にフリーっぽいんですが、改変したらダメだよー、並べるときは火狐→文字の順だよー、など規約があるようで、そのへんは守りつつ・・・NexusSの画面サイズの480×800の起動ロゴ画像を作成して差し替えてみます。
ロゴの規約と素材が公式サイトにあります。こちら

で、作成した画像がこちら！
logo2

さて、画像の差し替え方法ですが、solaさんのブログによると、ファイルを環境に置いてビルドすればいいだけという簡単仕様のようです。

前回のビルド手順で作成した、ビルド環境のB2Gディレクトリに移動します。
ここに、gaiaというディレクトリが出来ていると思います。

Firefox OSは3つのレイヤーで構成されていて、gaiaはUIの描画を行う最上位レイヤーです。

差し替え手順
作成画像がホームディレクトリに置いてあると仮定しています。

$ cd B2G
$ mkdir -p gaia/apps/system/resources/power
$ cp -p ~/logo.png gaia/apps/system/resources/power/carrier_power_on.png
$ ./build.sh
$ sudo ./flash.sh

キャリアごとのブートアニメーションなんかが簡単に設定できるようになっているんですねー
次回はホームスクリーンを変更する方法について書こうと思います。

Share

Firefox OS ビルド for NexusS

Author: 千原 寛之 Comments: Leave a reply

先日、TizenとFirefoxOSの合同勉強会に参加して以来、FirefoxOSに盛り上がりを感じている今日このごろです。

今回はNexusSが手元にあったので、FirefoxOSを焼いてみることにしました。
NexusSは公式にサポートされているので、簡単に焼くことができました。
前回、石原が挑戦した環境はUbuntu12.04でしたが、自分の環境はUbuntu12.10 64bitなので、ちょっとつまづいた部分もあり、その辺りも交えて手順を書いて行こうと思います。

環境構築
Ubuntu12.10に必要なツールをインストールします。
環境構築に関しては、こちらを参考に。

$ sudo apt-get install autoconf2.13 bison bzip2 ccache curl flex gawk gcc-4.6 g++-4.6 g++-4.6-multilib git ia32-libs lib32ncurses5-dev lib32z1-dev libgl1-mesa-dev libx11-dev make

gccとg++がバージョン4.7だと、ビルドエラーが出てしまいます。
gccは4.6に変えて大丈夫！と思っていたらg++も4.6にしないといけなくて、数時間無駄にしましたorz
ちなみに既知のエラーとして、公式サイトにも記載されています。こちら

$ sudo update-alternatives --install /usr/bin/gcc gcc /usr/bin/gcc-4.7 110
$ sudo update-alternatives --install /usr/bin/gcc gcc /usr/bin/gcc-4.6 100
$ sudo update-alternatives --config gcc

$ sudo update-alternatives --install /usr/bin/g++ g++ /usr/bin/g++-4.7 110
$ sudo update-alternatives --install /usr/bin/g++ g++ /usr/bin/g++-4.6 100
$ sudo update-alternatives --config g++

自分の環境は64bitなので、上記に加えてライブラリの参照先も変えないといけません。

$ sudo ln -s /usr/lib/i386-linux-gnu/libX11.so.6 /usr/lib/i386-linux-gnu/libX11.so
$ sudo ln -s /usr/lib/i386-linux-gnu/mesa/libGL.so.1 /usr/lib/i386-linux-gnu/libGL.so

これで環境構築は終わりです。ソースを落としてビルドしてみましょう！

リポジトリの複製
ワークディレクトリを作成し、そこにリポジトリの複製を取得します。

$ git clone git://github.com/mozilla-b2g/B2G.git

取得できたら、B2Gディレクトリが作成されているので、中に入ります！

$ cd B2G

ビルド
まずは、ターゲットに併せてコンフィギュレーションを行います。コンフィギュレーションで必要なパッケージがダウンロードされるようです。基本的に全てシェルを実行するだけです。
今回はNexusS向けのビルドを行うので、nexus-sを指定。

$ ./config.sh nexus-s

毎日なにかしらリポジトリが更新されているようです。タイミングによってはパッケージが見つからずエラーになったりしました・・・
そんな時は、コーヒーでも飲みながら少し時間を起きましょう。日を改めるという忍耐力も必要です:P
大抵はエラーも無く終わるはずです。

では、ビルドを開始しましょう。

$ ./build.sh

./build.sh -j1で並列ビルドをしないようにすることを推奨しているみたいですが、指定無しでも大丈夫でした。

焼き込み
NexusSを音量大＋電源ボタンでFASTBOOTモードで起動し、USB接続します。
焼き込みもシェルが用意されているので、実行します。焼き込みだけは管理者権限が必要です。

$ sudo ./flash.sh

自動でBootLoaderのUnlockからRebootまで行なってくれます。

気づいたときにはFirefoxOSが起動しているはずです。

Share

『Google Glass』って何ができるの？

Date: 5月 14, 2013 Author: 千原 寛之 Comments: Leave a reply

今、ちょっとした話題になっているGoogle Glass。
手に入れることはできませんでしたが、気になるので調べてみました。

ついに、あの電脳メガネが・・・！
とまではいかないのですが、右目の上部にスクリーンがあり、情報が表示されるようです。

Google Glassの概要をまとめてみました。

公式動画にもあるように、メガネフレームの右側に付いている部分がタッチパネルになっていて、
そこでスクロールやタップを行い、タイムラインと呼ばれる画面のリストを操作します。
スペック表は公開されておらず、色々なサイト（手に入れた方のBlogなど）で少しずつ集めた情報です。
来年の発売時には全く別のスペックになるということなんでしょうかね・・・

現在公開されているGoogle Glass用のMirrorAPI(v1)のパッケージは、以下の構成になっています。
v1ってことで、まだまだ機能は少ないです。

手に入れば、色々遊べそうですが、入手難易度は高そうです！

Share

「スマートフォンアプリEXPO2013」へ出展致しました

Date: 4月 30, 2013 Author: 大関 敦 Comments: Leave a reply

アスカ・クリエイションの大関敦です。

先日の4/23,24にベルサール秋葉原で開催された「スマートフォンアプリEXPO2013」へ出展を行いました。

今回の展示会でもたくさんの方々に弊社ブースへお越し頂きまして、おかげさまで良い展示会となりました。

ご来場頂いた皆様、大変有り難う御座いました。

DSC_0192

 

前回の展示会で展示した「多眼カメラ」は小型化を行い、

wifi経由でスマートフォンでの映像視聴ができるように致しました。

その他にも前回と同様に「6軸センサー」「ARアプリケーション」等展示致しました。

# 今回もいい写真を撮る事ができませんでした。。。

 

 

 

また、4/24には「今までにないパノラマ動画を実現する多眼カメラ」のタイトルでセミナー講演を行いました。

当日のセミナー動画を弊社ホームページで公開しておりますので、是非ご視聴ください。

セミナー動画　→　http://www.a-creation.jp/seminar/index.html

次回の展示会はまだ未定ではありますが、定期的に出展を予定しておりますので、

その際には是非ご来場ください。

 

Share

Firefox OS ビルド for Panda board

Date: 4月 26, 2013 Author: 石原 繁彦 Comments: Leave a reply

こんにちは。アスカ・クリエイションの石原です。

今回はPanda board向けにFirefox OSをビルドすることに挑戦したいと思います。

前回のエミュレータビルドで開発環境が構築できていることを前提に進めたいと思います。

まず、Panda boardを開発マシンにUSBで接続するためにudevルールを追加します。これはAndroidのソースビルドで追加した手順と同じです。

/etc/udev/rules.d/に51-android.rulesを作成し、以下の内容を書き込みます。OWNERは開発マシンにログインしているユーザー名で良いようです。

# adb protocol on panda (PandaBoard)
SUBSYSTEM=="usb", ATTR{idVendor}=="0451", ATTR{idProduct}=="d101", MODE="0600", OWNER="ishihara"
# fastboot protocol on panda (PandaBoard)
SUBSYSTEM=="usb", ATTR{idVendor}=="0451", ATTR{idProduct}=="d022", MODE="0600", OWNER="ishihara"
# usbboot protocol on panda (PandaBoard)
SUBSYSTEM=="usb", ATTR{idVendor}=="0451", ATTR{idProduct}=="d00f", MODE="0600", OWNER="ishihara"
# usbboot protocol on panda (PandaBoard ES)
SUBSYSTEM=="usb", ATTR{idVendor}=="0451", ATTR{idProduct}=="d010", MODE="0600", OWNER="ishihara"

 

さらに、Panda board向けにビルドするには以下のパッケージをビルドマシンに導入する必要がありますのでインストールしておきます。

$ sudo apt-get install libnspr4-dev

 

次にビルドターゲットをPanda boardに設定します。前回取得したソースツリーに移動し、以下を実行します。

$ cd B2G
$ ./config.sh pandaboard

 

これが初期のソース取得でなければ、以下のコマンドでソースツリー全体を更新できます。

git pull
./repo sync

 

ソースツリーが更新されるまでしばらく待ちます。無事完了したらビルドを実行します。

$ ./build.sh -j4

 

しかし、ここでエラーになりました。imgtec-panda-imm76i-67545da7.tgzというファイルのチェックサムエラーのようです。これはプロプライエタリなグラフィックスドライバのファイルで、Androidのソースビルド時にも手動で追加していましたので見覚えがあります。ですが、現在Googleのサイト上(https://developers.google.com/android/nexus/drivers#panda)で公開されているこのドライバファイルはファイル名が変わっていますので、修正します。

~/B2G/device/ti/panda/download-blobs.shの「PANDA_BLOBS=”imgtec-panda-imm76i-67545da7.tgz”」をコメントアウトし以下の様に書き換えます。

#PANDA_BLOBS=”imgtec-panda-imm76i-67545da7.tgz”
PANDA_BLOBS=”imgtec-panda-20120430-67545da7.tgz”

ファイル名を変更しただけではチェックサムがえらーになるので、~/B2G/device/ti/panda/blob-shasums のファイル名も書き換えます。なお、書式はsha-1チェックサム、スペース、?、ファイル名ですので、前述のGoogleのドライバサイトより別のドライバファイルを使用したいときは、download-blobs.shとblob-shasumsのファイル名及び、チェックサムの値を書き換えることで対応できるようです。

* 2013/4/26現在の最新ソースコードでは上記の不具合は修正済みとなっておりました。

さて、ビルドが無事通りましたら、いよいよPanda boardに焼き込んでみます。

焼き込む手順はAndroidをソースビルドして焼いたときと同じような手順を踏みます。

まず、fastbootをビルドします。

$ source build/envsetup.sh
$ lunch full_panda-userdebug
$ make fastboot

 

Panda boardに電源ケーブルやマウス、キーボード、ディスプレイ、miniUSBケーブルで開発PCと接続し、SDカードを外した状態で以下を実行します。

$ device/ti/panda/usbboot device/ti/panda/bootloader.bin

 

次に、SDカードを挿入し、以下を実行します。

$ fastboot oem format
$ fastboot flash xloader device/ti/panda/xloader.bin
$ fastboot flash bootloader device/ti/panda/bootloader.bin
ここまで正常に完了したら以下のコマンドで実際に焼き込みます。
$ ./flash.sh

 

書き込みが無事終わったら電源を入れ直して再起動します。

2013-04-26_12-15-51_787

 

起動しましたが、画面の向きが縦になっており、キーボードやマウスが効かないようです。少し調整が必要そうですね。

今回はここまでです。

 

Share

TizenでGoogleMap、ルート検索

Date: 3月 27, 2013 Author: 千原 寛之 Comments: 4 Replies

晴れ時々Tizen調査チームの千原です。こんにちは。
Tizenパッケージビルドはなかなかうまく行かないので、Tizen2.0SDKで何か出来ないかと模索した結果、WebアプリケーションとNativeアプリケーションを作成してみることにしました。
TizenのWebアプリケーションはHTML5+JavaScriptです。NativeアプリケーションはC++になります。

HTML5であれば、Google Maps JavaScript API v3が簡単に利用できるみたいです。
また、Tizenのエミュレーターにはまだ地図アプリが入っていないので、地図アプリを作成してみました！

まず一番シンプルなProjectを作成します。
Tizen Web ProjectのBasicのBlank Applicationを選択します。
Screenshot from 2013-03-27 16:30:09

index.html、style.css、main.jsを書き換えていきます。

style.css

html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }

#map_canvas { height: 100% }

index.html

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8"/>
<meta name="description" content="A Tizen Web UI FW single-page template generated by Tizen Web IDE"/>

<title>MapViewer Test</title>

<link rel="stylesheet" type="text/css" href="./css/style.css"/>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=GOOGLE_API_KEY&sensor=true&language=ja"></script>
<script type="text/javascript" src="./js/main.js"></script>
</head>

<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

※GOOGLE_API_KEYは個別に取得して設定する必要があります。

main.js

var map;
var markerA;
var markerB;
var imageA;
var imageB;

var directionRenderer;
var directionService;

function route() {
	// マーカーが2つあるときにルート検索
	if (markerA && markerB) {
		var request = {
				origin: markerA.getPosition(),
				destination: markerB.getPosition(),
				travelMode: google.maps.DirectionsTravelMode.DRIVING,
				unitSystem: google.maps.DirectionsUnitSystem.METRIC,
				optimizeWaypoints: true,
				avoidHighways: false,
				avoidTolls: false
		};
		directionsService.route(request, function(response, status) {
			if (google.maps.DirectionsStatus.OK == status) {
				directionsDisplay.setMap(map);
				directionsDisplay.setDirections(response);
			}
		});
	}
}

function dragAction(event) {
	route();
}

function clickAction(event) {
	// 両方のマーカーがあるときは、マーカーとルートを初期化する
	if (markerA && markerB) {
		markerA.setMap(null);
		markerA = null;
		markerB.setMap(null);
		markerB = null;
		directionsDisplay.setMap(null);
	}

	// マーカーAがあるときはマーカーBの設定
	if (markerA && !markerB) {
		var option = {
				position: event.latLng,
				draggable: true,
				map: map,
				icon: imageB
		};
		markerB = new google.maps.Marker(option);
		//マーカードラッグイベントの登録
		google.maps.event.addListener(markerB, 'dragend', dragAction);
	}
	// マーカーAの設定
	else {
		var option = {
				position: event.latLng,
				draggable: true,
				map: map,
				icon: imageA
		};
		markerA = new google.maps.Marker(option);
		//マーカードラッグイベントの登録
		google.maps.event.addListener(markerA, 'dragend', dragAction);
	}

	// ルート検索を実施
	route();
}

function initialize() {
	// 地図の生成
	var styles = [{stylers: [{hue: "#003388"}, {saturation: -40}]},
	              {
				featureType: "road", 
				elementType: "labels",
				stylers: [{visibility: "off"}]
	              },
	              {
				featureType: "road.highway",
				elementType: "geometry",
				stylers: [{saturation: -40}]
	              }];
	var styledMap = new google.maps.StyledMapType(styles, {name: "Styled Map"});
	// 初期位置は東京駅を中心に設定
	var option = {
			center: new google.maps.LatLng(35.681111, 139.766667),
			zoom: 13,
			mapTypeId: google.maps.MapTypeId.ROADMAP,
			mapTypeControl: false,
			panControl: false,
			streetViewControl: false,
			scaleControl: true
	};
	map = new google.maps.Map(document.getElementById("map_canvas"), option);
	map.mapTypes.set('map_style', styledMap);
	map.setMapTypeId('map_style');

	// マーカーのアイコンを読み込む
	imageA = {
			url: 'WebContent/icon1.png',
			size: new google.maps.Size(32, 32),
			origin: new google.maps.Point(0, 0),
			anchor: new google.maps.Point(16, 32)
	};
	imageB = {
			url: 'WebContent/icon2.png',
			size: new google.maps.Size(32, 32),
			origin: new google.maps.Point(0, 0),
			anchor: new google.maps.Point(16, 32)
	};

	// ルート検索サービスの設定
	var polylineOption = {
			strokeColor: "#ff4422",
			strokeWeight: 5,
			strokeOpacity: 0.6
	}
	var renderOption = {
			draggable: true,
			preserveViewport: false,
			suppressMarkers: true,
			polylineOptions: polylineOption
	};
	directionsDisplay = new google.maps.DirectionsRenderer(renderOption);
	directionsService = new google.maps.DirectionsService();

	// イベントリスナー登録
	google.maps.event.addListener(map, 'click', clickAction);
}

Googleのサンプルコードを参考にして作りました。
不要なコードでエラーになっていて、ルートが表示できないところで少しハマりましたが、結構簡単に作成できました。
ルート結果から距離とか時間も取れるようなので、カスタマイズすれば実用レベルのものになりそうです！
地図のスタイルはデフォルトから変更して、青系に変えてあります。（Tizenのイメージカラーが青なので）
マーカーのアイコンも変更してあります。（猫が好きなので・・・）

Screenshot from 2013-03-27 16:13:53

ルートが蛇行しているのは、寄り道ポイントを設定しているからで、ルート検索がバグっている訳ではありません(・ω・)

Share

Firefox OS ビルド

Date: 3月 22, 2013 Author: 石原 繁彦 Comments: Leave a reply

こんにちは。アスカ・クリエイション　石原繁彦です。

今回は最近、巷を賑わせているFirefox OSのビルドに挑戦したいと思います。

オフィシャルな開発者向けのドキュメントはMDN(Mozilla Developer Network)のページにまとまっていますので、これを参考にやってみようと思います。

https://developer.mozilla.org/ja/docs/Mozilla/Boot_to_Gecko/B2G_build_prerequisites

まずは、開発環境を確認します。

サポートされているターゲットデバイスは以下の物のようです。

  • Unagi（開発用スマホ）      - Firefox OSの開発者の多くが使用
  • Otoro（開発者用スマホ）   - Firefox OSの開発者の多くが使用
  • Panda Board
  • エミュレータ(x86/ARM)
  • デスクトップ(PC上でのアプリ実行環境)
  • Samsung Nexus S          - 大抵の機能が動作
  • Samsung Nexus S 4G    - 大抵の機能が動作
  • Samsung Galaxy S2       – あまり活発に開発されてない
  • Samsung Galaxy Nexus – あまり活発に開発されてない

まずは第一段階としてARMエミュレータをビルドしてみようと思います。

ビルド環境はLinuxの場合、以下が推奨されています。また、Mac OS Xでもビルドできる様です。Windowsはサポートされていません。

  • Ubuntu 12.04 64bit版
  • 4GB RAM
  • 20GB以上のHDD空き容量

今回はUbuntu 12.04 64bitで作業します。

必要なツール群をインストールします。

$ sudo apt-get install autoconf2.13 bison bzip2 ccache curl flex gawk gcc g++ g++-multilib git ia32-libs lib32ncurses5-dev lib32z1-dev libgl1-mesa-dev libx11-dev make

 

オフィシャルなドキュメントによれば場合によって以下のシンボリックリンクを作成するとなっていますが、私の環境では以前にAndroidをビルドできる環境にしたためか、すでにシンボリックリンクがありましたので、今回はこの手順を省いて進んでみました。

$ sudo ln -s /usr/lib/i386-linux-gnu/libX11.so.6 /usr/lib/i386-linux-gnu/libX11.so
$ sudo ln -s /usr/lib/i386-linux-gnu/mesa/libGL.so.1 /usr/lib/i386-linux-gnu/libGL.so

 

ソースを取得します。

$ git clone git://github.com/mozilla-b2g/B2G.git
$ cd B2G

 

ビルド構成を設定します。今回はARMのエミュレータをビルドするのでemulatorを指定します。なお、引数を指定しなければサポートされるデバイスの一覧が表示されます。

$ ./config.sh 
Usage: ./config.sh (device name)

Valid devices to configure are:
- galaxy-s2
- galaxy-nexus
- nexus-s
- nexus-s-4g
- otoro
- unagi
- inari
- keon
- pandaboard
- emulator
- emulator-x86
$ ./config.sh emulator

 

オフィシャルのドキュメントには書いてありませんでしたが、inariやkeonといったデバイスもサポートしているようです。

ここでソースが取得されます。かなり時間がかかりますので、しばらく待ちます。

ソースの取得が完了したら、ビルドします。なお、-jオプションで並列ビルド可能です。

$ ./build.sh -j4

 

無事ビルドが終わったらエミュレータを起動してみます。

$ ./run-emulator.sh

Screenshot_from_2013-03-22 19:13:03

Screenshot_from_2013-03-22 19:15:25

思ったよりすんなりいきました。数ヶ月前に行ったときはビルドが通りませんでしたが、開発が進んでいるようです。

今回はここまでにします。次回はPanda Boardで動かすことに挑戦しようと思います。

Share