スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

『Greasemonkey』でどこでも『あれこれポップアップ』

事の発端は 試行錯誤 というエントリでした。あれこれポップアップのクールさが非常に気に入ったので自分用に Firefox の拡張にしてどのページでも表示できないものかという言葉に出来るかもなんて思ってしまったのがいけなかった。身の程を知れというのだ。私よ。

最初に考えたのが JavaScript Actions で埋め込む方法です。以前CSSを読み込むための要素を生成してユーザCSSを利用する方法を 書いた のでその要領でCSSファイルとJSファイルを読み込んでやれば良いのではないかという発想です。しかしそれ以前にscript要素を生成する為の書き方がわからない。仕方がないので Traversing the HTML Table with JavaScript and DOM interfaces を読みながら勉強しました。これを応用するのに相当の時間が掛かりました。それで出来上がったのが以下のソース

var mybody=document.getElementsByTagName("head").item(0);
			myjs = document.createElement("script");
       mybody.appendChild(myjs);
       myjs.setAttribute("src","http://raraweb.fc2web.com/ArekorePopup.js");
       myjs.setAttribute("type","text/javascript");

あまり理解していないのだけれどこれで動くのだから良しとします。このスクリプトを引き下げていざ JavaScript Actions に導入しようと試みたのですが敢無く失敗。まだ試行すべき事は残っていますが、疲れてきたので greasemonkey を利用してみる事にしました。しかしここでも greasemonkey用のスクリプトの書き方がわからないという問題が発生。また勉強のし直しなのかと諦めようと思いましたが、とりあえずそのまま入れてみようと実験。書き方は パソコン遊戯さんの User JavaScript for Mozilla Firefox をそのまま参考にさせて頂きました。それで書き上げたのが以下です。

// ==UserScript==
// @name            DokodemoArekorePopup
// @namespace       http://harmony.blog5.fc2.com/
// @description     You can achieve 'ArekorePopup' anywhere. 
// @include         *
// ==/UserScript==

(function() {			
 if(document.all)
  document.createStyleSheet('http://raraweb.fc2web.com/ArekorePopup.css');

 else if(document.styleSheets){
  var nLink=document.createElement('LINK');
  
  nLink.rel="StyleSheet";
  nLink.type="text/css";
  nLink.href="http://raraweb.fc2web.com/ArekorePopup.css";
  var oHEAD=document.getElementsByTagName('HEAD').item(0);
  oHEAD.appendChild(nLink);
}
var mybody=document.getElementsByTagName("head").item(0);
			myjs = document.createElement("script");
       mybody.appendChild(myjs);
       myjs.setAttribute("src","http://raraweb.fc2web.com/ArekorePopup.js");
       myjs.setAttribute("type","text/javascript");

})();

先頭は greasemonkey 用の書式です。続くのが <link rel="StyleSheet" href="" type="text/css"> という要素を生成し挿入する為の物で、最後の部分が前述したスクリプト(<script src="" type="text/javascript"></script>)を埋め込む為の物です。簡単に説明すると あれこれポップアップの設置マニュアル に書かれているとりあえず設置HTML記述例を全てのページに挿入させるためのスクリプトです。このスクリプトを greasemonkey にインストールすれば殆どのページであれこれポップアップを動作させる事が可能です。ご利用になられる方は上記ソースをメモ帳などのテキストエディタに写した後に、強調部分のURIをご自分であれこれポップアップの一式を置いた場所に書き換え、適当な名前(DAP.user.js)を付けて保存し、それを greasemonkey にインストールして下さい。

導入方法と注意点
  • とりあえず greasemonkey が無いと動きませんので greasemonkey より拡張をインストールして下さい。
  • あれこれポップアップ を任意のサーバに準備します(設定まで全て完璧に)。
  • 上記スクリプトをテキストエディタに写した後に、強調部分のURIをご自分であれこれポップアップの一式を置いた場所に書き換えます。
  • そうしたら適当な名前(DAP.user.js)を付けて保存します。
  • ファイル名はどこでもあれこれポップアップの頭文字。.user.jsというのはその必要があるようなので。
  • 保存した DAP.user.js を greasemonkey にインストールして下さい。
  • 完了したら greasemonkey と JavaScript の両方が有効になっているのを確認した後に任意のページに移動して確認してください。
  • ちなみに当サイトでは既に導入済みなので実験の場としては適当ではありません。
  • 宜しければ 本家サイト別館 でどうぞ。
  • オンとオフの切り替えは 適用サイト利用者向け FAQ の方法で行うか、JavaScript をオフにするか、もしくは greasemonkey の設定で簡単に行えます。
  • もちろんgreasemonkeyを組み込んだFirefox限定
  • でも user.js が使用できるならばOperaでも少々の書き換えで行けるかも
  • 同様にIEは無理でもSleipnir辺りならなんとかなるかも
サンプル
一時的にどのような挙動になるのか試したい方は以下のスクリプトを greasemonkey にインストールすると簡単に確認できます。ただし多くの方が利用されますとサーバに負荷が掛かると思いますのであくまでも一時的な利用に限ります。また、あれこれポップアップの設定についても私が指定したものになります。
使用にあたっての幾つかの注意
再三申し上げています通り、私は JavaScript で Hello, world! を表示させる事すら説明を読みながらでないと危ういというほどの知識しか有しておりません。よって上記スクリプトにおいてどのような問題が発生したとしても何の責任も持てませんのでご利用は自己責任でお願い致します。また、あれこれポップアップをこのように使用してよいのか確認を取っていませんので怒られたら直ぐに消します。「娘娘飯店しるきぃうぇぶ」について を読むと流用という箇所について限りなく黒に近い気がします。
残っている課題など
  • あれこれポップアップの作者である ありみかさとみさん に許可を得る
  • greasemonkey用スクリプトの正常化(誰か)
  • 特に他のスクリプトとの競合が心配
  • ローカルに置いたファイル(あれこれポップアップ)を読み込めるか実験する
  • 通常ブラウジングがJavaScriptオフでも動くようにしたい
  • JavaScript Actions で動かせるようにもう少し実験
  • greasemonkey 無しでも動かせたら
  • 拡張化なんていうのも面白いかもしれない
感じたことや呟き
  • スクリプト要素を生成する為のスクリプトが簡単に書ければこんなに時間は掛からなかった。これに異常なほどの時間と労力を費やした。
  • だってわざわざ DOM Inspector まで導入して確認したのに不具合が見つからずにずっと動かなかった。
  • 必要もないのに 拡張を創る勉強 もしたので時間が掛かった。
  • greasemonkey を怖がっていたのは間違いでした。
  • JavaScript で可能な事ならば本当に全てが可能っぽい。
  • 難しい書き方をしなくても上のような方法で外部から直接読み込んでしまえば無問題。
参考サイトなど

追記(2006年01月22日12時20分)

『はてブ』のコメントで知りました。本当にごめんなさい。一度でも 検索してみるべき でした。申し訳ございません。

スポンサーサイト

コメント一覧

Re: 『Greasemonkey』でどこでも『あれこれポップアップ』

こんばんは!
なるほど外部サーバーに置けばいいわけですねっ!
私も最初は Greasemonkey で出来ないかと思っていたのですが、ファイルを外部サーバーに置くということが頭になかったため拡張で出来ないかとやっていたのです。
おかげさまで、どこでもあれこれポップアップが表示できるようになりました!ありがとうございました!

  • 2006年 01月 20日(金) 04:24:14 |
  • URL |
  • SION#aJiwwryw |
  • 編集 |
Re: 『Greasemonkey』でどこでも『あれこれポップアップ』

「どこでもあれこれポップアップ」を拡張化し、拡張に同梱した「あれこれポップアップ」を読み込ませることが出来ました。
これで拡張をインストールするだけで「どこでもあれこれポップアップ」を使えます。
参考にその拡張を送りたいと思いますので、よかったらメール下さい。折り返しファイルを添付して送ります。

  • 2006年 01月 20日(金) 05:29:33 |
  • URL |
  • SION#aJiwwryw |
  • 編集 |
拡張版『どこでもあれこれポップアップ』

どうもはじめまして。

拡張化とは素晴らしいですね。
「欲しい!」と手を挙げて直ぐにメールをしようと思ったのですが、その前に『あれこれポップアップ』の作者様である ありみかさとみさん に確認のメールを出しましたので、その返事を待ってからメールを送らせて頂こうと思っています。

拡張として(再)配布できるとしたらとても喜ばしい事と思います。

  • 2006年 01月 20日(金) 13:30:14 |
  • URL |
  • rara#d3xRQPUk |
  • 編集 |
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

  • 2008年 05月 31日(土) 14:29:47 |
  • |
  • # |
  • 編集 |
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

  • 2008年 06月 01日(日) 04:12:22 |
  • |
  • # |
  • 編集 |
Machelle Moses

unactorlike faunated smoochy housecoat bidential cockamaroo ungraciously suspecter
<a href= http://www.nathanwildhouse.com/ >Nathan Wild House</a>
http://www.cic-caracas.org

あの頃のように

Lauren Baird

unactorlike faunated smoochy housecoat bidential cockamaroo ungraciously suspecter
<a href= http://www.usatoday.com/sports/basketba/skw/bigsky/skwl03.htm >USA Today - Sacramento State Hornets</a>
http://www.geocities.com/glenrosefootball/

あの頃のように

Deanna Greene

unactorlike faunated smoochy housecoat bidential cockamaroo ungraciously suspecter
<a href= http://www.landofvos.com/eclectus.html >Eclectus Land of Vos</a>
http://www.ahafilm.info/movies/moviereviews.phtml?fid=150

あの頃のように

Kathleen Wells

unactorlike faunated smoochy housecoat bidential cockamaroo ungraciously suspecter
<a href= http://perryhallflorist.com/ >Perry Hall Florist</a>
http://www.geocities.com/uss_thomaston/index.html

あの頃のように

Treva Whitfield

unactorlike faunated smoochy housecoat bidential cockamaroo ungraciously suspecter
<a href= http://web2.airmail.net/gshultz/ >Ringo Starr</a>
http://www.gibraltarviewpoint.com/

あの頃のように

Suzette Witt

unactorlike faunated smoochy housecoat bidential cockamaroo ungraciously suspecter
<a href= http://www.allstateflags.com/ >All State Flags</a>
http://legalmessenger.tripod.com

あの頃のように

Ricardo Kirk

unactorlike faunated smoochy housecoat bidential cockamaroo ungraciously suspecter
<a href= http://www.armorytrack.com/ >Armory Track & Field Center</a>
http://tc.bmjjournals.com/content/vol11/suppl_1/

あの頃のように

Leif Dale

unactorlike faunated smoochy housecoat bidential cockamaroo ungraciously suspecter
<a href= http://cnn.com/2003/SHOWBIZ/TV/06/03/apontv.keeneddie.ap/ >A N.Y. cop in Queen Elizabeth's London</a>
http://www.angelfire.com/fl/fuzzyferret/

あの頃のように

コメントの投稿欄

Copyright © 2005 rara All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。