シェアしたくなる最新のWebサービス・ITニュース情報をチェック!
  • follow us in feedly

アプギガトップ > HTML5アプリをChromeアプリに爆速変換できる「Monaca」のビルド能力がスゴイ件!
注目記事ピックアップ
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
share0
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
share0
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
share0
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
share0
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
share0
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
share0
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
share0
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
今すぐ、自分の知識を「オンライン学習コース」としてWebに公開できる「Thinkific」の多機能ぶりに驚愕!
share0
今すぐ、自分の知識を「オンライン学習コース」としてWebに公開できる「Thinkific」の多機能ぶりに驚愕!
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
share0
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
share0
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
share0
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
share0
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
share0
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
share0
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
share0
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
share0
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
share0
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
share0
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
share0
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
share0
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
プログラミング
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
2015/06/03 20:45

HTML5アプリをChromeアプリに爆速変換できる「Monaca」のビルド能力がスゴイ件!

monaca-build-chromeapps_01 どうも、まさとらん(@0310lan)です!

ブラウザ上で動く「Webアプリ」と違い、単体のデスクトップアプリとして動作する「Chromeアプリ」をご存知でしょうか?

現在、Googleが提供するChromeブラウザ内のストアには、多彩な種類の「Chromeアプリ」が公開されています。
monaca-build-chromeapps_02 Chromebookの人気もあって、今後も多彩なアプリがリリースされることが予想されています。

そこで、このような「Chromeアプリ」を、誰でも簡単に手っ取り早く作れる「Monaca」のビルド機能についてご紹介してみようと思います!


「Monaca」で作るChromeアプリ!
「Monaca」は、スマホ向けの「HTML5ハイブリッドアプリ」を手軽に開発できるサービスです。
クラウド上に必要なツールが全部入りとなっており、過去にアプギガでもご紹介していました。
monaca-build-chromeapps_03 そんな「monaca」を使ったChromeアプリの制作手法を、実際に試しながら見ていきましょう!
(※今回ご紹介する内容は、すべて「無料プラン」でも利用可能です)


まずは、管理画面から「プロジェクトの作成」ボタンをクリックします。
monaca-build-chromeapps_04

今回は、サンプルとして「ブロック崩し」のテンプレートを選択してみました。
monaca-build-chromeapps_05

プロジェクトを開くと、ブラウザ上に専用のコードエディタが表示されます。
monaca-build-chromeapps_06

一応、「プレビュー」でちゃんと動作するかを確認しておきます。
monaca-build-chromeapps_07 本来は、このエディタを使って「HTML/CSS/JS」でプログラミングをするのですが、今回はこのまま使ってみましょう。


そこで、メニューの「設定」→「Chrome Apps設定」をクリックします。
monaca-build-chromeapps_08 ここで、Chromeアプリの詳細情報やアイコン画像などを設定します。(今回は、デフォルトのまま使います…)


次に、メニューの「ビルド」→「Chrome Appsのビルド」をクリック!
monaca-build-chromeapps_09

あとは、そのまま「次へ」ボタンをクリックすれば完了です!
monaca-build-chromeapps_10

たったこれだけで、Chromeアプリとして利用可能なファイルをダウンロードできるのです!
monaca-build-chromeapps_11 Chromeアプリに必要な「マニフェストファイル」などは、すべて自動生成されているので非常に便利ですね。

<参考>
「Chromeアプリ」ビルド手順|Monacaサイト


早速、起動させてみよう!
それでは、今作った「Chromeアプリ」を実際に起動してみましょう!

そこで、ダウンロードした圧縮ファイルを解凍して、フォルダごとChromeブラウザの拡張機能ページへ「ドラッグ&ドロップ」します。
monaca-build-chromeapps_12 これだけで、準備は完了です!


あとは、「起動」リンクをクリックするだけ。
monaca-build-chromeapps_13

これで、先ほど作った「Chromeアプリ」が起動するのです!
monaca-build-chromeapps_14 簡単ですよね?


ちなみに、スマホアプリのストア登録みたいに、Chromeの「ウェブストア」へ登録して、世界中に配信することも可能です。
monaca-build-chromeapps_15 登録は、Chromeウェブストアの「ダッシュボード」から出来るようになっていますが、Googleへ「5$」の登録料を支払う必要があります。(登録料は最初の1回のみ)


「Chromeアプリ」専用デバッガーを使おう!
「Monaca」では、単純にChromeアプリをビルドできるだけでなく、リアルタイムにデバッグしながら開発をすることも可能になっています。


これを実現しているのが「専用のデバッガー」であり、Chromeウェブストアからインストールすることが可能です!
monaca-build-chromeapps_16 「+ CHROMEに追加」ボタンをクリックすれば、自動的にインストールが始まります。


インストールが終わったら、早速起動してみましょう!
monaca-build-chromeapps_17

まずは、自分のユーザー情報を入力します。
monaca-build-chromeapps_18 ログインすると、自動的に自分のアカウント設定と同期します。


そして、利用したいプロジェクトを選択!
monaca-build-chromeapps_19 プロジェクトファイルをダウンロード出来るので、Chromeの拡張機能ページへドラッグ&ドロップして起動させます。


これで、コードを修正すれば、リアルタイムに実行画面へ反映されるようになるので、開発効率が劇的に上がるでしょう。
monaca-build-chromeapps_20 ちなみに、デバッガーの初回起動時のみ、「ワーキングディレクトリ」を設定するのですが、これはファイルのダウンロード先となるので、任意のディレクトリを設定すればOKです。


おまけ
今回は、Chromeアプリのご紹介でしたが、「Monaca」はそもそもスマホ向けアプリを手軽に作って配布できるのが特徴です。

以下の記事で、詳細な解説をしています。

【Xcode無しでiPhoneアプリ開発が可能な「Monaca」は実機確認も無料!】
monaca-build-chromeapps_21 HTML/CSS/JSの基本的な知識があれば、すぐにiOS/Android向けのアプリ開発が可能で、専用アプリを使えば即座に実機で楽しむこともできます。

必要なツールはすべてクラウド上に用意されているので、ネットに繋がったPCさえあればいつでもどこでも開発が可能です。
(※ローカル開発環境も用意されています…)

ご興味ある方は、ぜひ参考にしてみてください!


まとめ
Chromeアプリは「HTML/CSS/JS」を使って作れるのですが、「Monaca」も同じ技術でスマホ向けアプリを開発できるようになっています。

そのため、相互に親和性が高く、上手く作ればスマホ向けとPC向けを一度に作ってしまうことも不可能ではないでしょう。

Chromeアプリ開発にご興味ある方は、ぜひ一度試してみてください!


<参考>
「Monaca」公式サイト

Monacaアプリ開発公式本


wirtten by まさとらん

まさとらん

国内外問わず「良いモノ」だけひたすら集めて情報共有してます。
厳選ネタはアプギガ内で分かりやすく情報発信中!
その他の旬なネタは、twitterにて発信してますので、お気軽にどうぞ!

twitter:0310lan

この記事を読んでいる人は、他にこんな記事も読んでいます。
Related Posts Plugin for WordPress, Blogger...

ページトップへ戻る