1. No category

天使やカイザーと呼ばれて
思ってることってこんなもんだよ
Profile
« お坊さんの話 | (English) MySQL Console Chrome application has been released! »
Yoichiro Tanaka
(よういちろう)
Biography
Portfolio
Chrome Apps for mobileの開発方法
一部で話題になっていたGithubにある「MobileChromeApps / mobile-chrome-apps」ですが、先日遂
に正式にGoogleからアナウンスがありました。デスクトップPC向けに開発されたChrome Appを元にし
て、このツールを使ってモバイル向けアプリ(Android/iOS)を自動的に作成することが可能です。HTML5
とJavaScript、CSSを使って、Android/iOSアプリを開発することができるだけでなく、その中で各種
Chrome APIを使うことができます。Cordovaベースなので、Cordovaそのものが提供する機能も利用す
ることができるでしょう。
Twitter
Facebook profile
Google
天使やカイザーと呼ばれて
今日は、このツールの使い方を説明した文書を日本語訳してみました。以下の手順をやっていくこと
で、モバイル向けChrome Appを作ることを試すことができます。ぜひ体験してみてください！
Like
148 people like 天使やカイザーと呼ばれて.
Step 1: 開発ツールのインストール ( 原文 )
Chrome Apps for mobile ツールチェーンは、iOS6以上、Android 4.x以上を対象としています。
全てのプラットフォーム向けの開発依存物
Node.js version 0.10.0以上(npm同梱)が必要とされます。
Facebook social plugin
Windows: nodejs.orgからダウンロード可能な実行可能インストーラを使ってNode.jsをインス
トールします。
OS XまたはLinux: 同じくnodejs.orgからダウンロード可能な実行可能インストーラを使うことが
できます。もしrootアクセスの必要性を回避したい場合は、nvm経由でのインストールがより便利
です。以下は例です:
@yoichiro からのツイート
1
curl https://raw.github.com/creationix/nvm/master/install.sh | sh
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
?
pdfcrowd.com
1
2
3
4
curl https://raw.github.com/creationix/nvm/master/install.sh | sh
source ~/.bash_profile || source ~/.profile || source ~/.bashrc
nvm install 0.10
nvm alias default 0.10
?
Yoichiro Tanaka
Follow
Androidが対象
Android向けにアプリケーションを開発するときは、以下のものもインストールすることが必要です:
Java JDK 7
Android SDK version 4.4.2 (またはそれ以上)
Android ADT BundleがバンドルされてくるAndroid SDKおよびAndroid Developer Toolsをインス
トールします。
sdk/toolsおよびsdk/platform-toolsを、あなたのPATH環境変数に追加します。
OS X: Android SDKと一緒に付いてくるEclipseのバージョンは、JRE 6を必要とします。もし
Eclipse.appを開いた時にJRE 6のインストールのためのプロンプトが表示されない場合は、Mac
App Storeを通じてそれを入手してください。
Linux: Android SDKは、32bitをサポートするライブラリを必要とします。Ubuntuの場合、”aptget install ia32-libs”を使ってそれらを入手してください。
Apache Ant
apache-ant-x.x.x/binを、あなたのPATH環境変数に追加します。
English
日本語
Books
開発者のためのChrome
ガイドブック
吉川 徹, あんど...
100人のプロが選んだソ
フトウェア開...
デブサミ運営事...
ロープライス ￥1,500
or 新品 ￥3,456
ロープライス ￥384
or 新品 ￥1,944
ポイント 19pt
プライバシーについて
プライバシーについて
OpenSocial入門 ~ソー
シャルアプリ...
田中 洋一郎
mixiアプリ開発&運用コ
ンプリートブ...
田中 洋一郎
ロープライス ￥327
or 新品
ロープライス ￥1
or 新品 ￥2,894
プライバシーについて
プライバシーについて
iOSが対象
iOS開発はOS Xでのみ可能であることに注意してください。加えて、以下のインストールが必要になる
でしょう:
Xcode command line toolsを含むXcode 5
ios-deploy (iOSデバイスへ配布するために必要になります)
npm install -g ios-deploy
ios-sim (iOSシミュレータに配布するために必要になります)
npm install -g ios-sim
任意: iOS開発者として登録
これは、実際のデバイスでテストするため、およびAppStoreに提出するために必要です。
もしiPhone/iPadシミュレータを使う予定の場合は、登録を省略することが可能です。
ccaコマンドラインツールのインストール
npmを通じてccaをインストールします:
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
Recent Entries
pdfcrowd.com
npm install -g cca
?
後でツールチェーンを新しいリリースに更新する時: npm update -g cca
コマンドラインからこのコマンドを実行することで、全てが正しくインストールされたかどうか確認し
ます:
cca checkenv
?
出力されたccaのバージョン番号や、AndroidやiOS SDKのインストールについての確認をすることがで
きるでしょう。
Step 2: プロジェクトの作成 ( 原文 )
“YourApp”という名前のディレクトリで空のモバイルChrome Appプロジェクトを作成するには、以下の
コマンドを実行します:
cca create YourApp
?
もし既にビルドされたChrome Appを持っていて、それをモバイルプラットフォームに移植したい場合
は、それに対してsymlinkを作成するために、”–link-to”を使うことができます:
まだあなた自身のChrome Appを持ってないですか？その場合は、多くのモバイルをサポートする
Chrome Appsのサンプルから1つ選んで試してみてください。
完了しましたか？Step 3: 開発に進みましょう。
Step 3: 開発 (原文 )
あなたは2つの方法でアプリケーションをビルドおよび実行することができます:
選択肢 A: コマンドラインから”cca”ツールを使う。
選択肢 B: EclipseやXcodeといったIDEを使う。IDEの利用は、あなたのハイブリッドなモバイルアプリ
ケーションの起動、設定変更、デバッグの補助については全体的にオプション(しかししばしば便利)で
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
NaCl、nacl_ioやるときにハマったこと
Categories
Chrome extension (34)
Chrome Native Client (8)
Google Drive API/SDK (1)
Google+ (3)
Languages (350)
Erlang (5)
Java (290)
Eclipse (43)
Groovy (4)
java-ja (4)
?
そうではなく、もし既に存在するChrome Appファイルをコピーしたい場合は、”–copy-from”フラグを
使うことができます:
cca create YourApp -copy-from=path/to/manifest.json
2014年を振り返って
NaClモジュールをgdbでステップ実行や変数値を覗
くための手順
Google (87)
Chrome apps (9)
完了しましたか？Step 2: プロジェクトの作成に進みましょう。
cca create YourApp --link-to=path/to/manifest.json
Chrome OSに仮想ファイルシステムを提供するため
のAPIのリファレンスを和訳してみました
HTML5 FileSystem APIを使って上書き処理をする
方法
?
Maven (3)
PetStore (4)
Quartz (2)
Shale (25)
Wicket (37)
JavaScript (8)
dojo (6)
Ext.js (1)
Node.js (1)
Ruby on Rails (47)
My interests (71)
Camera (4)
Commusuke (21)
Complaining (18)
Gymnastic (16)
Ski (12)
My PC environment (71)
MacBook Pro (19)
pdfcrowd.com
す。
選択肢 A: コマンドラインを使った開発とビルド
ccaを使って作られたプロジェクトフォルダのルートから:
Android
Androidエミュレータでアプリケーションを実行する: “cca emulate android”
注意: これはエミュレータがセットアップされていることを要求します。これをセットアップす
るために、”android avd”を実行してください。”android”を実行することで、追加のエミュレータ
イメージをダウンロードしてください。Intelイメージの実行を速くさせるために、Intel’s
HAXMをインストールしましょう。
接続されたAndroidデバイスでアプリケーションを実行する: “cca run android”
iOS
iOSシミュレータでアプリケーションを実行する: “cca emulate ios”
接続されたiOSデバイスでアプリケーションを実行する: “cca run ios”
注意: これはあなたのデバイスに対してProvisioning Profileがセットアップ済みであることが要求
されます。
選択肢 B: IDEを使った開発とビルド
Android
1. Eclipseにて、”File”->”Import”を選択する。
2. “Android”>”Existing Android Code Into Workspace”を選択する。
3. “cca”を使って作成したパスからインポートする。
2つのプロジェクトがインポートされることを期待するはずです。そのうちの1つは、”*CordovaLib”という名前です。
4. アプリケーションを実行するために、Playボタンをクリックする。
あなたは、Run Configuration(全てのJavaアプリケーションと同じように)を作成する必要があるで
しょう。通常初回は自動的にプロンプトが表示されます。
同じように、初回にデバイス/エミュレータを管理する必要があるでしょう。
iOS
1. ターミナルウィンドウの中で以下のようにタイピングすることで、Xcodeにてプロジェクトを開く。
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
MacBook Pro (19)
Other (156)
Web Technologies (134)
AngularJS (3)
Semantic Web (3)
Social web (112)
facebook (7)
Google+ (1)
OpenSocial (90)
Web Components (6)
Web Intents (4)
Archives
2015年1月 (2)
2014年12月 (5)
2014年11月 (1)
2014年10月 (10)
2014年9月 (1)
2014年8月 (2)
2014年7月 (9)
2014年6月 (4)
2014年5月 (3)
2014年4月 (2)
2014年2月 (2)
2014年1月 (1)
2013年12月 (2)
2013年11月 (1)
2013年10月 (1)
2013年9月 (2)
2013年8月 (2)
2013年7月 (6)
2013年6月 (4)
2013年5月 (5)
2013年2月 (13)
2013年1月 (9)
2012年12月 (3)
2012年11月 (11)
2012年10月 (10)
2012年9月 (2)
2012年8月 (2)
pdfcrowd.com
cd YourApp
open platforms/ios/*.xcodeproj
?
2. 正しい対象をビルドしているか確認する。
左上(RunやStopボタンの側)に、ターゲットプロジェクトやデバイスを選択するためのドロップダウンが
あります。YourAppが選択されていて、”CordovaLib”が選択されていないことを保証してください。
3. Playボタンをクリックする。
アプリケーションのソースコードが変更されたとき
HTML、CSS、JavaScriptファイルは、あなたのccaプロジェクトフォルダの”www”ディレクトリの中に
います。あなたのファイルの変更が反映されるために、あなたのプロジェクトから”cca prepare”を実行
しなければなりません。
通常のCordovaアプリケーションをデバッグするのと同じ方法で、あなたはモバイル向けChrome App
をデバッグすることが可能です。
完了しましたか？次のステップに進みましょう。
Step 4: 次のステップ ( 原文 )
今、あなたは動作するChrome Appを持っていますが、モバイルデバイス向けに体験を改善するための
多くの方法があります。
アイコン
モバイルアプリケーションは、デスクトップ向けChrome Appsに比べて、より多くのアイコンの解像度
が必要です。
Android向けに、これらのサイズが必要になります:
36px, 48px, 78px, 96px
iOS向けには、iOS 6、iOS 7のどちらをサポートするかに依存して、要求されるサイズが異なります。
要求されるアイコンの最低限の数は以下となります:
iOS 6: 57px, 72px, 114px, 144px
iOS 7: 72px, 120px, 152px
完全なアイコンの一覧は、あなたのmanifest.jsonファイルの中で以下のようになるでしょう:
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
(2)
(7)
(2)
(3)
(6)
2012年3月 (7)
2012年2月 (8)
2012年1月 (4)
2011年12月 (7)
2011年11月 (7)
2011年10月 (8)
2011年6月 (3)
2011年5月 (6)
2011年1月 (1)
2010年12月 (1)
2010年10月 (2)
2010年9月 (4)
2010年5月 (1)
デバッグ
"icons": {
"16": "assets/icons/icon16.png",
2012年8月
2012年7月
2012年6月
2012年5月
2012年4月
?
2010年2月 (2)
2010年1月 (5)
2009年12月 (8)
2009年11月 (5)
2009年10月 (1)
2009年9月 (2)
2009年8月 (1)
2009年7月 (3)
2009年6月 (4)
2009年5月 (12)
2009年3月 (8)
2009年2月 (8)
2009年1月 (13)
2008年12月 (11)
2008年11月 (1)
2008年10月 (8)
2008年9月 (8)
2008年8月 (7)
2008年7月 (14)
2008年6月 (11)
2008年5月 (7)
2008年4月 (10)
pdfcrowd.com
}
"16": "assets/icons/icon16.png",
"36": "assets/icons/icon36.png",
"48": "assets/icons/icon48.png",
"57": "assets/icons/icon57.png",
"72": "assets/icons/icon72.png",
"78": "assets/icons/icon78.png",
"96": "assets/icons/icon96.png",
"114": "assets/icons/icon114.png",
"120": "assets/icons/icon120.png",
"128": "assets/icons/icon128.png",
"144": "assets/icons/icon144.png",
"152": "assets/icons/icon152.png"
アイコンは、あなたが”cca prepare”を実行する度に毎回、各プラットフォームに適切な場所にコピーさ
れるでしょう。
スプラッシュ画面
iOSアプリケーションは、そのアプリケーションが読み込まれている時に、短くスプラッシュ画面を表
示します。デフォルトのCordovaスプラッシュ画面は、”platform/ios/[AppName]/Resources/splash”に含
まれています。
そのサイズは以下が必要になります:
320px x 480px + 2x
768px x 1024px + 2x (iPad ポートレート)
1024px x 768px + 2x (iPad ランドスケープ)
640px x 1146px
スプラッシュ画面イメージは、現在”cca”によって変更されません。
完了しましたか？Cordovaで開発する際の特別な考慮事項に進みましょう。
Cordovaを使って開発する際の特別な考慮事項 ( 原文 )
Chrome Appは、モバイルデバイスの中で機能しないかもしれません。モバイル向けに移植する際に、
いくつかの共通的な問題があります:
小さな画面によるレイアウト問題、特にポートレート方向。
対応への提案: より小さな画面にコンテンツを最適化するために、CSS media queriesを使用して
ください。
2008年4月 (10)
2008年3月 (8)
2008年2月 (9)
2008年1月 (17)
2007年12月 (23)
2007年11月 (16)
2007年10月 (8)
2007年9月 (6)
2007年8月 (18)
2007年7月 (33)
2007年6月 (16)
2007年5月 (16)
2007年4月 (11)
2007年3月 (16)
2007年2月 (19)
2007年1月 (15)
2006年12月 (26)
2006年11月 (23)
2006年10月 (8)
2006年9月 (2)
2006年8月
2006年7月
2006年6月
2006年5月
2006年4月
2006年3月
2006年2月
(7)
(9)
(7)
(12)
(11)
(16)
(9)
2006年1月 (11)
2005年12月 (30)
2005年11月 (7)
2005年10月 (7)
2005年9月 (6)
2005年8月 (10)
2005年7月
2005年6月
2005年5月
2005年4月
2005年3月
(15)
(10)
(19)
(14)
(37)
chrome.app.windowを経由してセットされたChrome Appウィンドウサイズは、無視されるでしょう。代
わりに、デバイスのネイティブな大きさを使ってください。
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
対応への提案: ハードコーディングされたウィンドウの大きさを削除します。異なるサイズがあ
ることを念頭に置いてアプリケーションをデザインしてください。
小さなボタンやリンクは指でタップするのは厳しいでしょう。
対応への提案: タッチ対象が少なくとも44×44ポイントになるように調整してください。
マウスホバーに依存した際の予期せぬ挙動は、タッチ画面では存在しません。
対応への提案: ホバーに加えて、タップの場合にドロップダウンやツールチップのようなUI要素を
アクティブにしてください。
300msのタップの遅延。
対応への提案: FastClick by FT Labs JavaScript polyfillを使ってください。
いくつかの背景事情は、HTML5Rocks記事を読んでください。
サポートされるChrome API
私たちは、Chrome Apps for Mobileに対して、コアChrome APIの多くを利用可能にします。現在は以下
が含まれます:
identitiy – OAuth2を使ったユーザサインイン
payments – あなたのモバイルアプリ内での仮想グッズ販売
pushMessaging – あなたのサーバからアプリケーションへのメッセージプッシュ
sockets – TCPおよびUDPを使ったネットワーク越しの送受信
notifications (Androidのみ) – あなたのモバイルアプリからのリッチ通知送信
storage – ローカルでのKey-Valueの格納と取得
syncFileSystem – バックエンドがGoogle Driveによるファイルの格納と取得
alarms – 定期的なタスクの実行
idle – マシンのアイドル状況の変更検知
power – システムの電源管理機能のオーバーライド
しかしながら、全てのChrome JavaScript APIは実装されません。そして、全てのChromeデスクトップ
向け機能は、モバイルにおいて利用可能にはなりません。
<webview>タグはありません
IndexedDBはありません
getUserMedia()はありません
NaClはありません
私たちのAPI Statusページから、あなたは進捗を追うことができます。
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
完了しましたか？Step 5: 公開に進みましょう。
Step 5: 公開 (原文 )
あなたのプロジェクトの”platforms”ディレクトリ内に、あなたは2つの完全にネイティブなプロジェク
トを持っています: 1つはAndroid向け、もう1つはiOS向けです。これらのプロジェクトのリリースバー
ジョンをビルドし、それらをGoogle PlayやiOS App Storeに公開することができます。
Play Storeへの公開
Play StoreにあなたのAndroidアプリケーションを公開するためには、以下を行います:
1. “platforms/android/AndroidManifest.xml”を編集し、”versionCode”および”versionName”プロパティを正し
くセットします。
2. “platforms/android/ant.properties”を編集(または作成)し、”key.store”および”key.alias”プロパティをセット
します(Android developer docsにて説明されています)。
3. あなたのプロジェクトをビルドします。
cca build android --release
?
4. “platforms/android/ant-build”の中に入っている署名された.apkを見つけます。
5. Google Play developer consoleへ署名されたアプリケーションをアップロードします。
iOS App Storeへの公開
“platforms/ios”ディレクトリの下で見つかるXcodeプロジェクトファイルを開きます:
open platforms/ios/*.xcodeproj
?
そして、後はAppleのApp Distribution Guideに従ってください。
いいね！
Facebookに登録するして、友達の「いいね！」を見てみましょう。
たった1日で即戦力にな...
吉田 拳
新品 ￥1,922
ポイント 58pt
Posted: 02.05.2014 Category: Chrome extension
WEB+DB PRESS Vol.85
菅原 元気, 磯辺...
新品 ￥1,598
ポイント 15pt
29
Trackback URL:
https://www.eisbahn.jp/yoichiro/2014/02/chrome-apps-for-mobile%e3%81%ae%e9%96%8b%e7%99%ba%e6%96%b9%e6%b3%95.html/trackback
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com
コメントを追加...
次のログインでコメント…
Facebookソーシャルプラグイン
このエントリーのはてなブックマーク (0) はてなブックマークのページへ飛ぶ
このページはまだブックマークされていません。
Related entries:
Google+ Platformがモバイルに進出します
Movable Type Data API & Chromeアプリ勉強会で発表をしてきました
「開発者のためのChromeガイドブック」が出版されます！
Chrome Packaged Appsが「Chrome Apps (Chromeアプリ)」として正式公開されました
2012年のGoogleに関する22の予言
Copyright © 2005-2015 Yoichiro Tanaka. All rights reserved. Pow ered by WordPress.
open in browser PRO version
Are you a developer? Try out the HTML to PDF API
pdfcrowd.com