Google Chromeのエクステンション(拡張機能)で、WeChatのWeb画面を開くボタンを作ります。
WeChat(微信)
WeChat(微信)とは、中国のテンセント社のチャットアプリで、LINEやWhatsApp(Facebook Messenger)と同規模のユーザーを持つ世界的に有名なサービスです。
アプリだけで使うイメージが強いためあまり知られていませんが、WeChatにはブラウザで使えるWeb版のページが存在します。
■WeChat WebのページURL
https://web.wechat.com/
今回は、Google Chrome上からワンクリックでこのページを開くことのできるアプリを作成します。
ボタンの動作は下記2つのみ、実にシンプルです。
- Google Chromeのアプリ画面にボタンを設置する
- ボタンをクリックすろとWeChat WebWeb 専用の画面が表示されます。
必要なファイル
まずは、必要なファイルやフォルダを用意します。必要なものは下記の3種類です。
manifest.json
ファイル「manifest.json」のコードは下記です。
適当なテキストエディタでこのテキストを書き込み、ファイル名を「manifest」拡張子を「JSON」にして保存します。
私はATOMを使って書きました。
{
"name": "WeChat Chrome Apps DIY Ver",
"description": "WeChat Butten Do it myself",
"version": "0.0.0.1",
"manifest_version":2,
"app": {
"urls": [
"https://web.wechat.com/",
"http://www.wechat.com/"
],
"launch": {
"web_url": "https://web.wechat.com/",
"container": "panel"
}
},
"icons": {
"128": "icon_128.png"
},
"permissions": [
"notifications",
"geolocation",
"background"
]
}
それぞれの項目の意味は下記です。
| 項目名 | 内容 | 備考 |
|---|---|---|
| name | そのアプリの名前ですアプリ画面と設定画面に表示されます | |
| description | 設定画面で表示される簡単な説明文です | |
| Version | アプリのバージョンです | 自由に入力してください |
| manifest_version | このファイルのバージョンです | 2以上の数字にしないとエラーが発生します |
| app | どの形式のものかを指定します | ほかに「PageAction」と「BrowserAction」があります\\ |
| urls | アプリがアクセスする先のURLです | 必要であればワイルドカードを使います |
| launch | ええ、まあ動くんです(適当) | |
| web_url | 最初に開くURLです | |
| container | ページを開く形式です | 「panel」は新しいウィンドウ、「tab」は新しいタブを開きます |
| icons | アイコンファイルの設定です | |
| 128 | 128ピクセルのアイコンの意味です | 今回はほかのサイズを使わないので128のみ設定しています |
| permissions | アクセス許可の設定です | リンクだけのボタンにアクセス許可の設定は必要ありません |
画像
サイズが上下左右とも128ピクセルでPNG形式の画像ファイルを用意します。(Google CHromeはJPEG形式にも対応しているようです)
私は、Google画像検索で一番上に出てきたものを「ペイント」でサイズを変更して使いました。
画像の名前を「icon_128.png」に変更します。
Google Chromeへの読み込み
作成したファイル「manifest.json」と「icon_128.png」を一つのフォルダに入れます。
Google Chromeの設定画面を開き、「拡張機能」の画面を開きます。
画面一番上の「デベロッパーモード」にチェックマークを入れます。
「パッケージ化されていない拡張機能を読み込む」ボタンをクリックします。
先ほど作成したファイルの入っているフォルダを選択し、読み込みます。
読み込みが成功すると「拡張機能」画面上にアイコンが表示されます。
「アプリ」画面上にWeChatボタンが設置されます。
キャンセルしませんと、せっかく作ったアプリが使えなくなります。
失敗パターン1
Manifestのバージョンを「1」にした
→エラーを起こして読み込んでくれませんでした
失敗パターン2
"app"と一緒に"BrowserAction"(メニューバーのボタン)と、を作ろうとして同じ「manifest.json」ファイルに両方とも記述した
→どちらか片方しか動作しなかった。
→両方を使いたければ、「manifest.json」ファイルを二つ作らなければいけません。
→このことに気付くのに1時間かかりました
失敗パターン3
「アプリ」を作りたいのに作り方を検索しても「PageAction」と「BrowserAction」しか見つからなかった。
→不思議です。確かに見つかりませんでした。
→しばらく検索を続けたところ「 "app": {」の指定のあるサンプルコードを見つけました。
失敗パターン4
何度フォルダを読み込んでもエラーが起きる
→「"」が抜けている、「{」の数が間違ってる、「[」の数が違うその他基本的なミスでした。
→テキストエディタをしっかりとみて直したらなおりました。
失敗パターン5
Googleのサポートページにある https://developer.chrome.com/apps/samples を見てもよくわからない。
→本当にわからなかったです。
→結局、各種ブログにあった説明を見ながら何とかしました。
失敗パターン6
突然ボタンが動かなくなった。
→読み込み元のフォルダのを移動させたのが原因でした。
→もう一度フォルダを読み込みなおしたら正常に動きました。
