ツール開発講座 〜第2回 スクリプトの新規作成〜 | 元溥帝のまったりブログ

元溥帝のまったりブログ

ブラウザ三国志 溥帝○○翼賛会の公式ブログのようです。

前回のエントリーでMacで使うエディタに関するコメントをいただきました。
Mac使いの方は参考にしてください。

前回エディタ設定をどうしても出来なかった方も、最後の手段を紹介しますので最後までお付き合いください。

今回のテーマはスクリプトの新規作成です。

「ツール」→「Greasemonkey」→「新規ユーザースクリプト」
で新しくユーザスクリプトを作成できます。

・・・がちょっとお待ちを。

ほんのちょっとだけ新規作成が楽になるように、ブラ三ページを開いた状態で行いましょう。
この時、ブラウザのURLの欄をチェックしてください。

mixi鯖の場合は
mixi.jp/run_appli.pl?id=6598
みたいになっているかと思います。
これは実際に操作したいブラ三ページがmixiのフレームの中に入っていることを意味します。
はぁ?フレーム?何それ?
意味がわからなくても問題ありません。
mixiだと何やら面倒くさい事になってるってことだけ理解してください。

面倒くさいことになってるので、その原因のフレームとやらを外す作業をします。
同盟タブを右クリックして対象を別タブで開いてください。
開いた別タブではURL欄が
m17.3gokushi.jp/alliance/info.php?id=1091#ptop
みたいになっているかと思います。
これでフレームが外れました。

本鯖等ではどうなってるのか把握していませんが、必要に応じて同様の作業をしてください。

最初に書いたとおり、これはほんのちょっとだけ作業が楽になるようにするための作業なので
難しかったら無理にやる必要はありません。

さて次に進めます。
同盟ページを開いた画面で
「ツール」→「Greasemonkey」→「新規ユーザースクリプト」
を実行してください。


こんなのが出てきたかと思います(画像はUbuntuの物ですが、WindowsやMacでも似たような感じかと思います)。

では、それぞれの欄を埋めて行きましょう。

「名前」欄はスクリプトの名前です。何でも良いのですが何にしましょうかね?センスが問われますw
とりあえず私はbro3-HighLightNameにしておきました。

次に「名前空間」
名前空間とは何ぞやって話は難しいのでやりませんが、
Greasemonkeyでは「名前」と「名前空間」の組み合わせでスクリプトを認識しています。
つまり名前が同じスクリプトでも名前空間が違うと別のスクリプトと認識されます。
Scriptishでは名前空間は使わずにIDという別のものを使ってスクリプトを認識していますので
Scriptishで開発したい時はIDを適当に指定してあげてください(自動でID作ってくれる機能もついてます)。
名前空間欄も何書いても良いんですが、自分のホームページURLを書く人が多いみたいです。
(余談ですが自分はgluteusって書くことが多いです。英語で大殿筋という意味ですw)
今回はこのブログのURLでも書いておきますかね。
http://ameblo.jp/putei1724

次は「説明」
スクリプトの説明を記述する欄ですが面倒なら書かなくて良いです。
自分はいつもここは公開前に考えるようにしています。

次は「実行するページ」
スクリプトを実行したいページを指定します。
ここではワイルドカード「*」を使用することができます。
わいるどかーど?
「何でも良い」って事なんですが、言葉で覚えるのではなく、使い方を見て感じて理解してもらえれば良いです。

先ほどフレームを外した方は
http://m17.3gokushi.jp/alliance/info.php?id=1091#ptop
みたいに既に書かれているかと思います。
#ptopは邪魔なので外して代わりにワイルドカードを付けて
http://m17.3gokushi.jp/alliance/info.php?id=1091*
としてください。

個人用ならこれで良いのですが、id=1091の部分は同盟毎に違いますので、これでは自分の同盟でしか使えません。
他の同盟でも動かしたい場合は
http://m17.3gokushi.jp/alliance/info.php*
こんな感じにします。これでどの同盟でも使えるようになりました。

でもこれではまだm17鯖でしか動きません。
http://*.3gokushi.jp/alliance/info.php*
こうすれば全鯖の全同盟で動きます。
mixi鯖限定なら
http://m*.3gokushi.jp/alliance/info.php*
ですね。

フレームを外していないと
「実行するページ」欄の初期値が
http://mixi.jp/run_appli.pl?id=6598
になっているので、肝心の同盟ページで動かす事ができませんので、書き換えるようにしてください。

ちなみに、この欄と次の「実行しないページ」欄は改行で複数ページを指定することができます。

「実行しないページ」欄は使う機会が少ないかと思いますが、
例えば「実行するページ」欄を
*
にして「実行しないページ」欄を
http://*.3gokushi.jp*
にすれば、ブラ三でだけ動かないスクリプトにすることができます。
今回は空欄で構いません。

完成図

さて、必要な欄を埋めたのでOKを押してください。

前回設定したエディタが立ち上がり、こんなコードが書かれているかと思います。
// ==UserScript==
// @name        bro3-HighLightName
// @namespace   http://ameblo.jp/putei1724
// @include     http://*.3gokushi.jp/alliance/info.php*
// @version     1
// ==/UserScript==
@nameはスクリプト名
@namespsceは名前空間
@includeは実行するページ
@versionはバージョンです。

Greasemonkeyのバージョンが1.0になる前までは、この後にJavaScriptで書いていけば良かったのですが
バージョン1.0以降は
@grantというのを足さなくてはいけなくなりました。
詳しい説明は必要になった時にしますが
今回は
@grant none
を足して
// ==UserScript==
// @name        bro3-HighLightName
// @namespace   http://ameblo.jp/putei1724
// @include     http://*.3gokushi.jp/alliance/info.php*
// @version     1
// @grant       none
// ==/UserScript==
としておいてください。

今回は自動生成されたコードまでしか書けませんでしたが、記事が長くなりすぎてるのでこの辺で終わりにしたいと思います。


ただ最後に、前回エディタをどうしても設定出来なかった人のサポートだけさせてください。
// ==UserScript==
// @name        bro3-HighLightName
// @namespace   http://ameblo.jp/putei1724
// @include     http://*.3gokushi.jp/alliance/info.php*
// @version     1
// @grant       none
// ==/UserScript==
エディタ設定が出来なかった方は、これをエディタにコピペして文字コードをUTF-8で保存してください。
ファイル名は何でも良いですが、拡張子は.user.jsです。
例えば「bro3highlightname.user.js」

保存できたらそのファイルをFirefoxにドラッグ&ドロップ。
これで、このスクリプトがインストールされます。
インストールできたら、先ほどのファイルは削除してください。

「ツール」→「Greasemonkey」→「ユーザスクリプトの管理」
で目的のスクリプトの所に行って右クリック
「保存先フォルダを表示」
でスクリプトのファイルが表示されますので、これをエディタで開いて編集するようにしてください。
エディタにドラッグ&ドロップすれば開けると思いますが、
もしかしたら人によっては関連付けの作業が必要になるかもしれません。
ググれば関連付けは出来ると思いますが、どうしても出来なかったら、拡張子をtxtに変えれば編集可能になります。
動作を見る時はuser.jsに拡張子を戻してやれば良いわけです。

さて次回はHello, World!という世界一有名なコードを実際に書いて、そこから少しずつツールを一緒に作っていきたいと思います。

それでは本題のこちらもよろしく→


編集後記
いろいろセンスが無くて読みにくいエントリーになっちゃいました。
少しでも読みやすくしようと、試行錯誤してる最中に突然アメブロのエラーか何かで全て消えてしまい、半泣きで復旧。
再度レイアウトを考えるのが面倒になって中途半端で投稿しちゃいましたw