2015/07/30ChromeBookを使っているとやっぱり気になるChromeアプリ。作るのって難しいのかなぁ・・・ということで実際に作ってみたのでその過程を書いていきます。アプリを作成してみましたChromeアプリの構成と開発環境さっそく作ってみました最後にアプリを作成してみましたちなみに作ったのは一番アプリっぽいPackagedAppsです。Chromeアプリの構成と開発環境まずどういう構成で作成するか、何が必要か調べました。困ったときのGoogle先生ということで、こちら(ChromeApp-HatenaBlog)のサイトなどによると、Chromeアプリは下記で構成されているようです。JSON(マニフェスト)ファイルJavaScript初期ウィンドウ生成用アプリ用HTMLCSSアイコンファイル特別な環境も必要なさそうです。いけるでしょうということで、続けて必要な設定も行いました。作ってみました何作ろうか・・・と考えに考えて、時間にして5秒くらいですかね。今回は電卓にしました!HTMLの勉強で作り掛けのがあったので。上記サイトのサンプルを参考に試行錯誤もすること約1日...。▼完成しました!!作ったアプリをインストールするには、拡張機能を開いて右上のデベロッパーモードにチェックを入れ、「パッケージ化されていない拡張機能を読み込む」から指定するとインストールできます。ソースは以下の通りです。躓いたところも書いておきます。]}マニフェストファイルです。基本的には参考サイトと同じですが、1箇所SandBox対応を追加しました。Chrome電卓で使用しているeval関数を有効化するためです。});});アプリのWindowを構築するJavaScriptです。マニフェストファイルのappプロパティで指定しているのですが、このJSからHTMLを参照してアプリ画面を作ります。ウィンドウ枠が邪魔だなと思い調べたら、frameプロパティで消せました。コメントアウト部分を有効化してください。▼このような感じで消えます。}}電卓の処理を行うJavaScript(JQuery)です。Chromeアプリ化のために修正したところはありません。ソースは割愛しますが、JQueryを使わなくても(addEventListener等々で実装しても)動作しました。src="calc.js"></script></body></html>アプリ用のHTMLです。こちらもそのまま流用可でした。auto;}アプリのCSSです。CSSもそのまま流用できました。最後にJavaScript→HTML→JavaScriptというロードに違和感はありますが、ほとんどはまることなく直感的に作ることができました。Chrome)のサイトを見ると多数用意されていることがわかります。Chrome-app-sample)も充実しているので、もう少しイケてるアプリを作ってみようと思います。記事はアーザスでの導入事例が元になっております。IT関連のコンサルタントおよびご相談はこちらまでお願いいたします。法人様お問い合わせはこちら私たちアーザスは一緒に成長してくれるメンバーを随時募集しております!経験者はもちろん、新卒・未経験の方でも歓迎いたします!新卒採用ご希望の方はこちら中途採用ご希望の方はこちらこの記事を読んで興味を持っていただけましたら、下記のボタンからご購読をお願いします。RSSで購読するfeedlyで購読する記事に関するご意見・ご質問がございましたら、SNS投稿をお願いします。2014年2月SNSTwitterFacebookFeedlyHOMEへ上へ戻るこのブログでは、株式会社アーザスがSCCMやキャッシュレス決済、Office365などITについて「誰でもわかる」ような記事を公開しています。