天使やカイザーと呼ばれて 思ってることってこんなもんだよ 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
© Copyright 2024 Paperzz