プロファイル

カレンダー

S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  
<< August 2017 >>

categories

archives

放射線観測値

Radiation

福島第一原発
福島第二原発
柏崎刈羽原発
電力館

電力消費量

Chrome Extension(拡張機能)を自作 その1

ChromExtensionIcon


こんにちは、CTO南雲です。突然ですが皆さんブラウザは何を使っていますか?

私は主にGoogle Chromeです。やはり弊社でも活用そしてご提案しているGoogle Appsとの親和性や他Google Apps(Picasa、Google+)なども便利に活用出来るからです。

もちろん他にWebGLなんかの最新テクノロジが搭載されているからでもありますが、CTO的にはそこが気になるところですがね(笑)

さて今日は一風変わった記事にします。このGoogle Chromeで新しいタブを開いたときに出てくる、Google Chrome Extensions(拡張機能)を自作しちゃおうというネタです。

CNTLキー+Tキーで新しいタブが作られることはご存じだと思いますが、この新規タブが開いたときに出てくるアイコンとその中身を作りましょう。

これがあるとブックマークよりも便利なんで是非トライしてみてください。通常はGoogle Chrome Webshopからダウンロードするのですが、ここにないものも多く、自分で作られる方も最近は多くなってきています。

さて、詳細はこちらのGoogle本家のサイトを見ていただければ分かりますが、まずは細かいお作法や能書きは後にして、

とりあえずサンプルを参考に作ってみましょう。

まずはサンプルをダウンロードしてみてください。(解凍して同一フォルダに展開してください)

準備するものは(サンプルに含まれるもの)3つ。
1)manifest.json
2)main.html
3)icon×3
です。

1)manifest.jason
これは、このEXTENSIONの振る舞いや設定が書かれているファイルで、よくGadget, Widgetなどにも利用されるものです。jsonフォーマットで書かれていて、”UTF-8”で保存されていなければなりません。

うちのEXTENSIONではこんな感じです。
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
{
  "name": "日本クラウドコンピューティング株式会社ホーム",
  "description": "Cloud Computing Japan Home",
  "version": "0.9",
  "icons": { "16": "icon16-2.png","48": "icon48-2.png","128": "icon128-2.png"},
  "app": {"launch": {"local_path": "main.html"
    }
  }
}
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−

1.  "name": "日本クラウドコンピューティング株式会社ホーム",
ここに記述した名前が新規タブのアイコの名称と、chrome://extensionsで表示される拡張機能一覧に、表示されます。日本語OKです。

2.  "description": "Cloud Computing Japan Home",
この内容が、chrome://extensionsで表示される拡張機能一覧で、NAMEの下に表示される内容を指定します。

3.  "version": "0.9",
この内容が、chrome://extensionsで表示される拡張機能一覧で、NAMEの右横に表示される内容を指定します。

4.  "icons": { "16": "icon16-2.png","48": "icon48-2.png","128": "icon128-2.png"},
アイコンファイルを指定します。同一フォルダ内にアイコンファイルがある場合は、パスの設定はいりません、また、用途に応じて16px*16px、32px*32px、48px*48px、128px*128px、
のアイコンが必要です。

形式はGIF、JPEG、PNGなどが指定できますが、PNGが最適ですと、Google先生は申しております。

16px:タブのアイコン用
32px:ギャラリー掲示用
48px:chrome://extensionsで表示される拡張機能一覧用
128px:新規タブ用

と用途がわかれます。
自作自演のものであれば32pxは必要ありません。

5.  "app": {"launch": {"local_path": "main.html"
EXTENSIONのタイプを指定します。とりあえず、このままにしておいてください。

ちなみにこんな感じで見れます。
EXTENSION一覧表示


次に
2)main.html
です。
うちのEXTENSIONではこんな感じです。
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
<!DOCTYPE html>
<html lang="ja">
<head>
<META charset="UTF-8" HTTP-EQUIV="Refresh" CONTENT="0; URL=http://cloud-cc.com/">
</head>
<body>
</body>
</html>
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
単純にリダイレクトしているパターンです。これでも遜色なく稼働します。

今回はURLの部分だけ、変更してください。

最後に
3)icon×3
です。
16px,48px,128pxの画像を用意して、同一フォルダに格納して、その名称をここで指定してください。


これで作り物は終わりです。

この後は、このすべてのファイルが同一フォルダ内にあることを確認します。
次に、Chromeのアドレスバーにchrome://extensionsを入力し、拡張機能画面を表示します。
その上部にグレーボタンで「パッケージ化されていない拡張機能を読込む...」を押し、フォルダ選択ッ画面から、先ほど作ったEXTENSIONのファイルが保存されているフォルダを指定します。
EXTENSION読み込み

すると、一覧に追加されます。
EXTENSION一覧追加後

CNTL+Tで新しいタブを開くと、アイコンが追加されているのが分かります。
追加後タブ画面

これで完成です。
ここで表示されなければ、どっか間違っていますので、バグを直しましょう。

次に、専用のフォーマットに従ってこのファイル群をフォルダ毎固めます。
実は専用フォーマットと言っても、ZIPで圧縮されているだけです。
ただ一つ違うのはプライベートキーが包含されますので、通常通りZIPしただけでは出来ません。

方法は一つ。先ほどのテストと同じくchrome:extensions 画面を開き今度は上部右側のグレーボタン「拡張機能のパッケージ化」ボタンを押します。
パッケージ化
ダイアログが表示されますので、ここに先ほど作成した拡張機能のフォルダ名をフルパスで入力します。
はじめの登録時は、秘密鍵ファイルは省略できます。

この処理が完成すると、フォルダ名.crx, フォルダ名.pemという二つのファイルが、拡張機能が入ったフォルダの親フォルダに作成されます。

今回はCCJ-HOMEというフォルダに拡張機能を作りましたので、CCJ-HOME.crx, CCJ-HOME.pemというファイルが出来ました。

ここまで出来たなら、あとはCCJ-HOME.CRXというファイルを、ブラウザにドラッグアンドドロップして、処理続行ボタンを押すと、
インストール許可
インストールが開始され、新しいタブが開き、アイコンが表示されます。

これで完成です!

簡単ですよね。

次回からはもう少し込み入ったアプリの作り方を記事にしたいと思います。

南雲尚彦

コメント
コメントする








   
この記事のトラックバックURL
トラックバック