google拡張機能を開発する その6 公開編

後はいよいよ公開するだけです。

https://chrome.google.com/webstore/developer/dashboard

にアクセスし、ページの指示通りに進めば登録出来ます。

初回のみ登録料として500円(5$)かかります。

クレジットカード支払いですが、Vプリカを使えばクレジットカードなしでも登録できます。

余った残高はamazonギフト券を購入すれば無駄も少ないかと思います。

それでは、良き拡張ライフを!

 

google拡張機能を開発する その5 本編 manifest.json以外について

manifest.jsonさえ乗り越えれば後は簡単です。ざっと見て行きましょう。

icon.png

アイコンファイルです。ツールバーに表示されるだけなのでそんなに詳細に作っても仕方ないです。16*16ぐらいで十分。

myscript.js

これはその3で触りましたね。jsファイルです。好きな様に書きましょう。

popup.html

アイコンをクリックした時に出る、ポップアップファイルです。

javascriptは

<script src=”jquery.js”></script>

のように書き、外部ファイルを作成、その4で説明した”content_scripts”に加えておいて下さい。

<script>~</script>の中に書いても動作しない仕様になっています。

 

これで作成に関するトピックは以上です。

次は最後、公開編です。

google拡張機能を開発する その4 本編 manifest.jsonについて

本題です。manifest.json以外は次の項で説明します。

manifest.json、windowsで言うとboot.iniみたいなものでしょうか、必須ファイルです。

しかも中身も結構ややこしいです。

ざっと見てみましょう。

{
“manifest_version”: 2,
“name”: “test”,
“description”: “change the world.”,
“version”: “0.0.1”,
“permissions”: [
“tabs”,”http://*/*”
],
“browser_action”: {
“default_icon”: “icon.png”,
“default_title”: “change the world”,
“default_popup”: “popup.html”
},
“content_scripts”: [
{
“matches”: [“http://*/*”,”file:///*”],
“js”: [“jquery.js”,”myscript.js”]
}
]
}

これはjson形式といいます。配列、特に連想配列のようなものと思って頂いて構いません。

ただしご覧のとおりやや特殊な記述方法になっています。順に見て行きましょう。

 

{

波括弧、中括弧とも言いますね。忘れると動きません。必ず付けましょう。

 

“manifest_version”: 2,

この一行はこう書きます。現在のmanifest.jsonのversionは2です。最後のカンマは忘れないようにしましょう。

 

“name”: “test”,

拡張機能の名前です。

 

“description”: “change the world.”,

簡単な説明です。公開した時に必要になります。
“version”: “0.0.1”,

公開後はバージョンアップ毎に上げる必要があります。非公開の場合はずっと0.0.1で良いです。

 

“permissions”: [
“tabs”,”http://*/*”
],

権限を表します。なるべく絞ったほうがいいのですが、非公開の場合はこれで良いです。

全てのサイトでタブの操作を可能にする、ということを表しています。

特定のサイトに限定するなら

“http://example.com/*”

などとしたほうが良いです。

最後の角括弧の後のカンマも忘れずに。

 

“browser_action”: {
“default_icon”: “icon.png”,
“default_title”: “change the world”,
“default_popup”: “popup.html”
},

iconはアイコン、titleはタイトルです。

“default_popup”はアイコンをクリックした時のポップアップするウィンドウのことです。CSSなども使えます。

“default_popup”: “popup.html”の後にカンマを付けてはいけません。

 

“content_scripts”: [

{
“matches”: [“http://*/*”,”file:///*”],
“js”: [“jquery.js”,”myscript.js”]
}
]

括弧が多いですが、頑張ってください。というかこのまま使うと良いです。

“matches”: [“http://*/*”,”file:///*”],

は全てのサイト、全てのローカルファイル(chromeを通さないファイルには影響しません。デスクトップにおいてあるhtmlファイルをChromeで閲覧する場合などに動作するという設定です。)

“js”: [“jquery.js”,”myscript.js”]

どのjsファイルを使うかです。jquery.js、myscript.jsは入れておき、適宜追加という形で良いと思います。

 

}

最後も括弧、忘れないで下さい。

 

以上です。やや癖のある構造ですが、慣れればそれほど難しくはないと思います。

他にもactionやらなんやらあるのですが、とりあえずこれだけ書けば動きます。

もっと詳しく知りたい方はこちらへ

https://developer.chrome.com/extensions/manifest

 

続く。

google拡張機能を開発する その3 改造編

「test」拡張機能をインストールできたら、どのタブでもいいのでリロードしてみてください(googleに関するサイト以外、シークレットモード以外でお願いします)。

どうでしょう、なにか変化があったでしょうか。

以下はニコニコ動画の一部なのですが

1

背景色の変更、要素の追加が行われました。また、strong要素をクリックするとアラートが出ます。

myscript.jsの中身はこのようになっています。

$(document).ready(function(){
//背景色の変更
alert(“change background”);
$(‘*’).css(‘background’,’#888′);
//strongのクリックイベントを追加
alert(“click strong!”);
$(“strong”).click(function(){
alert(“click strong!”);
});
//bodyを消す
// $(‘body’).remove();
alert(“remove ok”);
});
function addElement() {
var element = document.createElement(‘div’);
element.id = “id”;
element.innerHTML = “hogehoge”;
element.style.color = ‘red’;

var objBody = document.getElementsByTagName(“body”).item(0);
objBody.appendChild(element);
// body要素にdivエレメントを追加
alert(“append ok”);
} ;
addElement() ;

alertを変えてみたり、divをbuttonに変えてみてください。

なお、ファイルの変更後は拡張機能タブでリロードしないと変更は反映されません。

1

このページで必ずリロードして下さい。

なんとなく理解できたでしょうか。

 

軽く説明しますと

$(document).ready(function(){

});

の中に書いたものはページがロードし終わってから実行されます。基本、この中に書いておけば間違いありません。ややとっつきにくい印象ですが、あまり気にせずこの形のまま使えば良いです。そのうち慣れます。

addElement() ;が外に出ていますが、実はあまり良くないです。サーバーが重い時、全てロード仕切らないうちに実行してしまうと思わぬ動作を引き起こす可能性があります。

 

alert(“change background”);

アラートを出します。結構邪魔なので、一度見た後は消してしまっても良いです。

 

$(‘*’).css(‘background’,’#888′);

は全ての要素の背景色を変えています。

$(document).ready(function(){

});

の中に書かれているので、ページがロードされてから背景色を変える、という流れですね。

 

$(“strong”).click(function(){
alert(“click strong!”);
});

はstrong要素をクリック→アラートを出す、と動作を紐付けしています。$(document).ready…と同じで、この形のまま使えばよいです。

onClick()とほぼ同じものと思って構いません。
// $(‘body’).remove();

このコメントアウト「//」を取ると、bodyが全て消えます。毎回消えると面倒なのであえてコメントアウトにしてあります。

何となくjsでなにかやっているんだなぁ、ということが伝われば幸いです。

続く。

 

google拡張機能を開発する その2 インストール編

解凍したフォルダの中身は

icon.png

jquery.js

manifest.json

myscript.js

popup.html

になります。とりあえずこれだけあれば簡単なもの、というか大抵のものが作れます。

今のところ、見るファイルはmyscript.jsだけで構いません。

 

とりあえず、動きを見るためにインストールしてみましょう。

[≡]ボタンからツール→拡張機能と選択します。

2

そしてデベロッパー(開発者)モードに設定し、google-extensionをインストールします。

(デベロッパーモードと言っても非公開の拡張機能を有効にするだけです。あまり深く考えなくても大丈夫。また、デベロッパーモードで無いと非公開の拡張機能はインストールできません。)

1

デベロッパーモードに入るには右上にチェックを入れます。

拡張機能をインストールするには左上の「パッケージ化されていない拡張機能を読み込む」を選択後、先ほど解凍したフォルダを選択します。

フォルダを選択すると一覧に「test」が現れますので、「有効にする」にチェック。

 

これでこの拡張機能が使えるようになりました。

google拡張機能を開発する その1 導入編

公開して広告収入を稼ぐも良し、自分の作業を楽にする、サイトを自分好みに変える、など色々な用途が考えられます。

現在様々な拡張機能は既に存在していますが、それでは物足りないという人は自分で作ってしまいましょう。

必要な物は、やる気だけです。

それでは、以下のファイルをDL、解凍して下さい。

google_extension

解凍されたファイルを置く場所はデスクトップでok。

その2に続きます。

cssがおかしい時に確認すること

突然ズレた、うまくいかない時に確認すること

・セミコロンが抜けている

いつもの事ですね。

・ブラウザの表示倍率が変わっている

意外と気づきにくい

・拡張機能

adblockなどを入れていると予期しない要素が消えてしまうことも。

 

こういうところにはなるべく早く気づけるようになりたいですね。

wordpressプラグインあれこれ

Custom Post Type UI
カスタム投稿とカスタムタクソノミー使うなら必須。

Advanced Custom Fields
カスタムフィールド、つまり入力欄を手軽に変更できる。カスタム投稿を使うならこれもついでに。

Bulk Registration Terms
タームの一括登録が可能。大量のカスタムタクソノミー使うなら是非。

Contact Form 7
お問い合わせフォームが簡単に作れます。

MTS Simple Booking-C
予約システムが設置できる。これに限らず、wordpressでは意外な機能があっさり手に入ったりする。

WP Multibyte Patch
日本語を使うなら何も考えずに動かしておけばok。デフォルトで入っています。

 

 

excelで並べ替えの順序がおかしい時

・漢字の場合

フリガナが付いている/付いていない、という2種類のデータが混じっている。

フリガナがあると先頭に表示されます。phonetic関数で調べてみましょう。

・アルファベットの場合

別の言語が混じっている場合があります。code関数で調べてみましょう。

・他

ユーザー定義で並び替えの順序も指定できます。あまりないと思いますが、他の人からもらったブックの場合は調べてみるとよいでしょう。