Chrome Appsの作成チュートリアル - m_shige1979のときどきITブログ

基本的に使用するのはchrome

どんなことができるかわからないけどちょっとは便利になりそうかもしれないので…

chromeをインストール

https://www.google.co.jp/chrome/browser/desktop/index.html

試験機能を設定する

chromeのURL欄に以下の項目を設定

chrome://flags

一部の機能を有効にする

試験運用版の拡張機能 API
f:id:m_shige1979:20141222095844p:plain

パッケージ化されたアプリのデバッグの有効化
f:id:m_shige1979:20141222095855p:plain
※有効後は再起動が必要になります

デベロッパーモードを有効にする

chromeのURL欄に以下の項目を設定

chrome://extensions

有効にする

f:id:m_shige1979:20141222100247p:plain

サンプルアプリのソースを読み込む

https://github.com/GoogleChrome/chrome-app-samples
↑より取得
hellowordのものを使用

ディレクトリ構成

.
├── README.md
├── assets
│   └── screenshot_1280_800.png
├── hello_world.png
├── icon_128.png
├── icon_16.png
├── index.html
├── main.js
├── manifest.json
├── sample_support_metadata.json
└── styles
    └── main.css

manifest.json

{
  "manifest_version": 2,
  "name": "Hello World",
  "version": "2.1",
  "minimum_chrome_version": "23",
  "icons": {
    "16": "icon_16.png",
    "128": "icon_128.png"
  },
  "app": {
    "background": {
      "scripts": ["main.js"]
    }
  }
}

「パッケージ化されていない拡張機能を読み込む」を選択

f:id:m_shige1979:20141222101347p:plain

サンプルのアプリを取り込む

f:id:m_shige1979:20141222101542p:plain

起動

起動リンクをクリックするかアプリのメニューでクリックする

f:id:m_shige1979:20141222101644p:plain

なんか出ました

f:id:m_shige1979:20141222101844p:plain

今回のファイルをちょっと確認したけど

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello World</title>
    <link href="styles/main.css" rel="stylesheet">
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>