【学問のすすめ】中世ヨーロッパ写字生のように黙って静かに手を動かすブログ

語学系、IT系の「やってみた」ことを備忘録を兼ねて書いていきます。資格試験の話が多いです。

【できるかな】Chrome アプリ作ってみた:WeChatのWeb版にリンクするボタン(ソースコードあり)

Google Chromeのエクステンション(拡張機能)で、WeChatのWeb画面を開くボタンを作ります。

f:id:pesia_one:20160324230119p:plain:w300

WeChat(微信)

WeChat(微信)とは、中国のテンセント社のチャットアプリで、LINEやWhatsApp(Facebook Messenger)と同規模のユーザーを持つ世界的に有名なサービスです。
アプリだけで使うイメージが強いためあまり知られていませんが、WeChatにはブラウザで使えるWeb版のページが存在します。

■WeChat WebのページURL
https://web.wechat.com/

f:id:pesia_one:20160324230153p:plain:w300

今回は、Google Chrome上からワンクリックでこのページを開くことのできるアプリを作成します。
ボタンの動作は下記2つのみ、実にシンプルです。

  • Google Chromeのアプリ画面にボタンを設置する
  • ボタンをクリックすろとWeChat WebWeb 専用の画面が表示されます。

必要なファイル

まずは、必要なファイルやフォルダを用意します。必要なものは下記の3種類です。

f:id:pesia_one:20160324230241p:plain:w300

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 CHromeJPEG形式にも対応しているようです)
私は、Google画像検索で一番上に出てきたものを「ペイント」でサイズを変更して使いました。

画像の名前を「icon_128.png」に変更します。

Google Chromeへの読み込み
作成したファイル「manifest.json」と「icon_128.png」を一つのフォルダに入れます。

Google Chromeの設定画面を開き、「拡張機能」の画面を開きます。

画面一番上の「デベロッパーモード」にチェックマークを入れます。
「パッケージ化されていない拡張機能を読み込む」ボタンをクリックします。

f:id:pesia_one:20160324230333p:plain:w300

先ほど作成したファイルの入っているフォルダを選択し、読み込みます。
読み込みが成功すると「拡張機能」画面上にアイコンが表示されます。

f:id:pesia_one:20160324230346p:plain:w300

「アプリ」画面上にWeChatボタンが設置されます。


f:id:pesia_one:20160324230414p:plain:w300
このような警告が出てきた場合は「キャンセル」をクリックします。
キャンセルしませんと、せっかく作ったアプリが使えなくなります。

失敗パターン1

Manifestのバージョンを「1」にした
→エラーを起こして読み込んでくれませんでした

失敗パターン2

"app"と一緒に"BrowserAction"(メニューバーのボタン)と、を作ろうとして同じ「manifest.json」ファイルに両方とも記述した
→どちらか片方しか動作しなかった。
→両方を使いたければ、「manifest.json」ファイルを二つ作らなければいけません。
→このことに気付くのに1時間かかりました

失敗パターン3

「アプリ」を作りたいのに作り方を検索しても「PageAction」と「BrowserAction」しか見つからなかった。
→不思議です。確かに見つかりませんでした。
→しばらく検索を続けたところ「 "app": {」の指定のあるサンプルコードを見つけました。

失敗パターン4

何度フォルダを読み込んでもエラーが起きる
→「"」が抜けている、「{」の数が間違ってる、「[」の数が違うその他基本的なミスでした。
テキストエディタをしっかりとみて直したらなおりました。

失敗パターン6

突然ボタンが動かなくなった。
→読み込み元のフォルダのを移動させたのが原因でした。
→もう一度フォルダを読み込みなおしたら正常に動きました。