03 | 2017/04 |  05

  1. 無料サーバー

User forum-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut

CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。
2005年12月から社会問題も掲載!


スポンサーサイト

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

スクリプトファイルは Fc2 ブログのファイル置き場には置きたくない!

上書きしたファイルの更新に時間が掛りすぎる Fc2 ブログ

Fc2 ブログの動画や静止画、スクリプトファイル等のためのファイル置き場は、設置当初から 1 GB と言う巨大な容量を誇っている素晴らしいものでした。そして Fc2 ブログ開設当初は上書きアップロードファイルでも、ほぼ直ぐに最新のファイルにアクセス出来ました。

巨大な容量とほぼ即刻のファイル更新───これが Fc2 ブログファイル置き場の大きな魅力でした。

ところが最近は、上書きアップロードした場合の更新所要時間が、半端ではなくなってきました。6 時間経っても更新されないことすら、一度や二度ではありません。6 分ではなく6 時間です。こんなに待たされたらスクリプトファイルの更新は事実上使い物になりません。一日後でなければ更新結果が反映されないファイル置き場なんて!とても使えません。

Fc2 ブログのファイル管理頁には「ファイルの上書き・削除が反映されるまでに、しばらく時間がかかることもあります。」との注書きがありますが、ファイルの更新において、6 時間は「しばらく」ではなく膨大と言って良い時間です。しかも「場合がある」のではなく、必ず更新が遅延するのですから、注書きは嘘ということになります。

ここ数ヶ月、じっと耐え続けて来ましたが、本日ついに堪忍袋の緒が切れました。

頻繁に更新するファイルは Fc2 ブログのファイル置き場には置かない!

スクリプトファイルは何度も更新するのが当たり前です。トライアンドエラーでバグを取っていくものです。だから、上書きアップロードしたファイルの更新に 6 時間以上掛るようなファイル置き場では使い物になりません。

だから決めました。もうスクリプトファイルは Fc2 ブログのファイル置き場には置かない、と。

▲ToTop

で、スクリプトファイルをどこに置くか?

一般にファイル置き場は、直リンク禁止の制約があります。実際 Fc2 ブログのそれも一部のファイルを除いて他サイトのためのファイルは置けません。

有料ならば色々なサービスがありますが、無料ブログのためのファイル置き場として有料のサービスは使いたくありません。

そこで google に頼らざるを得ないと判断しました。

2,3 年前には google page サービスがファイル置き場として使えました。特に Fc2 ブログ以外の Web 頁から使用するスクリプトファイルを置く場所として活用してきたのです。Fc2 ブログのファイル置き場は、Fc2 ブログ以外の為のファイル置き場とすることを禁じているので、そうせざるを得ませんでした。

しかし、2010 年 12 月現在そのサービスは廃止され google site に衣替えし、他方、以前から google code が存在していました。

前者は google Blogger に似ていますが、google API's をフル活用出来る Webサイト作成サービスで、後者は開発者のためのコードアップロード・検索サービスです。そしてこの google code が利用出来るのではないか、と見当を付けました。

ところが事はそう単純ではありませんでした。簡単に直リンクを貼れるものと、決め込んでいたのですが、決してそうではありませんでした。google 社もやはり、直リンクにトラフィックが集中してしまうことを懸念しているようでした。

顛末と Google code の使い勝手

久しぶりに訪れた最新の Google サイト( Google サイトの使い方 | Google Apps セットアップ&サポート )は、Google Page Creator と命名されていた頃からかなり変容していました。

そして、いくらやってもそのサービス内に置いたファイルには直リンクが貼れません。正確に言えばログインしている時にのみ、直リンクが有効になりますが、サインアウトするともはや直リンクは無効となってしまいます。これではとても実用的ではないので、google code の利用に踏み切ることにしました。

アクセスキーを取得しないと直リンクは有効にならないようなので、それを取得して何とか運用に漕ぎ着けたのですが、まだ本当に良かったのか不安を抱えています。

色々とマニュアルを読んで何とか直リンクを貼ることが出来たのですが、果たして正しい方法でそうできたのかどうか、一抹の不安を抱えたまま現在は一部の js ファイルを google code からインクルードしています。しばらく様子を見て安定的に使えるようであれば、順次スクリプトファイルを Fc2 サーバーから google code へと移行しようと思っています。

淘汰が激しい IT 界です。Fc2 ブログが素晴らしいからこそ、ファイル更新の遅延が一日も早く解決されることを願ってやみませんが、当面使い物にならないファイル置き場の利用は控えざるを得ません。

jQuery を活用したオリジナルの Ajax 通信コードを全面的に改訂しました

何はともあれ結果を見て戴くのが最善でしょう

任意の Fc2 ブログを個別エントリイモードで開き、そこで Ajax 通信を行って、最新/以前/以後エントリイのタイトル情報などを取得する Ajax 通信プロジェクト(以下「 Fc2タイトル情報プロジェクト 」)を半年を要してやっと実現しました。その結果サンプルは以下の通りです。

サンプル 1【 Fc2総合インフォメーションブログ 】

下の画像は、Fc2総合インフォメーションブログ上で Fc2 タイトル情報プロジェクト を実行した際の表示結果抜粋です。

Ajax 通信によって最新/以前/以後エントリイのタイトル情報などを取得した結果を示すサンプル画像 1
サンプル 2【 関西ZIGZAG 】

下の画像は、人気ブログ「 関西 ZIGAZAG 」ブログ上で Fc2 タイトル情報プロジェクト を実行した際の表示結果の抜粋です。

Ajax 通信によって最新/以前/以後エントリイのタイトル情報などを取得した結果を示すサンプル画像 2
サンプル 3【 FCafe 】

下の画像は、自ブログ開設時からお世話になってきたサイト上で Fc2 タイトル情報プロジェクト を実行した際の表示結果の抜粋を示すものです。

Ajax 通信によって最新/以前/以後エントリイのタイトル情報などを取得した結果を示すサンプル画像 3

以上に例示した Fc2 タイトル情報プロジェクト の詳細については、こちらのエントリイ( ファイル置き場と Ajax 通信を活用して、任意のFc2ブログから情報を得る )をご覧いただければ幸いです。

「その光明」はなかなか見えなかった

jQuery.js を活用した Ajax 通信に、今年の 2 月からチャレンジしています。

しかし、目的とする連続的な Ajax 通信の結果取得(後に分かったことではあるが、結果取得ではなく取得結果の即刻表示)が巧くいかず、半ば諦め、4分の1ほどやけっぱちになり、4分の1ほど食らいついて解明したい、との思いが錯綜する中で、昼間の仕事の多忙さに追われて、なかなか「食らいつく」時間が取れませんでした。

しかしこの程、幸いにもその時間が取れたので、改めて jQuery.js( ver1.2.6 )コードと格闘し、最近刊行された書籍( Amazon.co.jp:『jQueryで作るAjaxアプリケーション』: 沖林 正紀著 2008年6月19日発売) )も購入し、 jQuery.js を利用した Ajax 通信に再チャレンジしてみました。

余談ですが、上記の書籍は日本語で書かれた jQuery.js 入門書としては初めてのものではないでしょうか?

その点での価値は大いに評価できると思います。

しかし、内容は、といえばまさしく「羊頭狗肉」と言わざるを得ません。

書籍名から推測すると、 jQuery.js を活用した Ajax アプリケーションのあれこれについて書かれているのではないか、と思っても決して無理はないと思います。しかし、内容は決してそのようなものではありません。

jQuery.js 入門書としては結構詳述されていますが、 Ajax アプリケーションのあれこれについてはたいした記述がありません。しかも Global イベントを利用した Ajax 通信のことしか書かれていないのです。jQuery 本家サイトを見れば分かるとおり、global イベントを利用した Ajax 通信は「それも出来る」行為であって、決して推奨されるべきものではないはずです。

何故ならば、Ajax 通信はその結果を取得するのに時間を要する行為であり、一方イベント処理も jQuery.js コード内を縦横に縦断する時間を要する行為です。二重に時間を要することを推奨すべきではないでしょう。

故に書籍名はまさに「看板倒れ」と言わざるを得ないのです。書名を「jQuery 入門」とした方が遙かに「体を表す名」だと思います。

▲ToTop

連続的な Ajax 通信による結果取得の困難性

以前のエントリイタイトル、最新のエントリイタイトル、そして以後のエントリイタイトル───Ajax 通信によるこれらの 3 つのフェースの情報取得をずっと試みる中で、特に躓いた点は過去/未来のエントリイタイトル取得、それもそれぞれに 10 個の、合計 20 個のエントリイタイトルを一発で取得する Ajax 通信でした。

もっと具体的に言えば、1回のコード進行で過去/未来の 20 個のエントリイタイトルを取得することは出来たのですが、それらの取得後可及的速やかにそれらを表示することがどうしても巧くいかなかったのです。

例えば、20個の取得を指示しても、過去エントリイは 3 つしか表示できないのに、未来エントリイは 10 個表示できたり、その逆だったり、二度目に実行すると必ず 20 個全てのタイトルを表示取得できたり、結果取得が非常に不安定だったのです。

どうしてそうなるのか、どうすれば問題を解消できるのか、その解決策を求めて上記書籍を購入したのですが、そこからは解決策は得られませんでした。

あれこれのサイトも探索しましたが、1回だけの Ajax 通信に jQuery.js を利用した例はいくつか見つかりましたが、連続してAjax通信を行って、その結果取得を試みたサイトは見つからないのです。

勿論 FireFox + Firebug を利用して進行過程をチェックしてみましたが、Ajax 通信の進行過程は流石の Firebug でもブラックボックス化してしまい、その過程を覗くことが出来ませんし、Firebug でコードのステップ進行している間にも Ajax 通信は進行するので、通信過程を垣間見ることは出来ませんでした。

更に、Firebug でコードをステップ進行するということは、その間に Ajax 通信の進行を許す訳ですから、いわば待機時間を作ることになり、通常では巧く取得できない結果も Firebug を使って進行をチェックすると取得に成功してしまうのです。

つまり、Firebug を使っても Ajax 通信のコードチェックにはならないのです。

▲ToTop

連続した Ajax 通信においてその全ての通信結果が取得できたことをどのようにして知るのか?

連続する Ajax 通信結果を可及的速やかに表示するためには、最後の通信結果が取得できたそのタイミングを Javascript に知らせなければなりません。スクリプトがそのことを知って初めて表示させる事が出来る訳ですから、通信結果が全て取得できたことをコード自体に分からせなければなりません。

その方法を色々と暗中模索した経緯の一端を以下に記しておきます。

最後の通信結果が存在すれば..

例えば「最後の通信結果が存在すれば..」という条件では不完全です。何故ならば最後の通信結果が取得できたからと言って、それ以前の通信結果が取得できている保証は何もないからです。

実際色々試してみましたが、Ajax 通信の所要時間は、それぞれの Ajax 通信の通信量と回線速度によって変化しますが、回線速度が同一であれば Ajax 通信量で決まります。つまり通信されるコンテンツの容量によって通信時間は決まります。今回の例においては、取得する HTML ファイルの容量、つまり各エントリイの本文の長短に応じて通信所要時間が変化します。大きなサイズのエントリイの場合には通信時間が長くなり、小さなサイズの場合には短くなります。

故に最後の通信が終わってもそれ以前の通信が終わった保証はどこにもありません。

通信毎に flag を立てたら..

flag を立てることも検討しましたが、Ajax 通信のどの段階で flag を記述すればよいのか、それが問題です。結果を取得できたその時に立つ flag でなくては意味がありません。ではどこに?

jQuery を活用する前提で考えてみると、なかなか適切な回答が見いだせないまま、空しく月日が流れました。

1 つの光明は jQuery.active プロパティの活用だった

flag をどの様にして立てようか思案する中で、改めて jQuery.js の Ajax 通信部分を眺め回し、また上記で紹介した書籍の Ajax 通信部分を見てみて、jQuery.js の Ajax 通信コード部分に既に flag が立てられていることを知りました。

それはクラス jQuery の 1 つのプロパティであり、コード実行時に Ajax 通信数を数えるカウンターとして利用される jQuery.active です。

そのカウンターは jQuery.ajax() メソッド内で活用されますが、その値は Ajax 通信を行おうとする度に、send コマンド実行直前に 1 だけ増加し(ver1.2.6 の 2650 行)、結果を取得し終えると 1 だけ減じられ(ver1.2.6 の 2835 行)ます。つまり、連続して Ajax 通信を指示すると、その値は順に増加し、それが終わる度に順不同で減じられる仕組みとなってます。(但し、jQuery Ajax 諸定数の1つである global 値を初期値の true ままにしておかなければ、何回 Ajax 通信を行っても、jQuery.active 値は 0 から変化しません。───jQuery.js ver1.2.6: 2650 行と 2835 行)

これを活用すれば、連続通信を開始した後にその値が 0 になるタイミングを捉えて取得結果をまとめて表示することが出来るはずだ、と推測し、実際にその推測は当たっていました。

jQuery.active プロパティを利用することにより、連続した Ajax 通信が完了したことを Javascript に知らせることの出来る flag を獲得することが出来たのです。

というよりも、正確に言えば、そもそも jQuery.active プロパティはそのような目的で作成されたもの、と言えるでしょう。

jQuery.active 利用と Ajax globalイベントの関係に係る若干のコメント

jQuery.active 利用しようとする時に、必ずしも Ajax global イベントを利用する必要はありません。global 値を true としておかなければ、jQuery.active は利用できませんが、それを利用するために Ajax global イベントを使う必要はありません。

jQuery.js の初期値のままで global 値は true となっているので、何も操作することなく「local callback」関数の中で jQuery.active を活用できます。

timerを使った jQuery.active 活用の実際

1回の Ajax 通信の場合には jQuery.active を活用するまでもなく、容易に結果を取得/表示出来ますし、複数回の通信の場合でも「概ね」問題なく結果を取得/表示できました。

これまでに試みてきた全ての自作 Ajax local コード(頁トップに掲載した関連エントリイ参照)において、jQuery.active が全てで目的通りに作動すること、つまり、第一に jQuery.active ==0 が全ての Ajax 通信が終了したことを意味し、第二に、その値になれば全ての Ajax 通信結果が取得出来ていることを確認しました。

jQuery.active 活用の要点

Ajax 通信コード部分より下に、以下のように同一関数の間欠起動を設定し jQuery.active 値がゼロになる迄 Ajax 通信完了を待機し続け、ゼロになってから(つまり全ての Ajax 通信が終わってから)結果をまとめて表示すれば良い訳です。

 function display(){
  if (jQuery.active==0) {
   if (timer) {clearInterval(timer);timer=null;}
   ・・・ここに全ての通信結果を表示するためのコードを記述する。・・・
  }
 }
 var timer = setInterval(display,milsec);
しかし、1 回の jQuery.active 活用だけではまだ不十分だった

ところが、1 回の jQuery.active の活用だけではどうしても全ての Ajax 通信結果を一括表示出来ないケースが発生しました。つまり、一括取得は出来ているのに、一括表示が出来ない場合が生じたのです。

そのケースとは、4 つめのチャレンジとして試みた、任意の Fc2 ブログの任意のエントリイの以前/以後/最新エントリイタイトルを取得するコードの場合でした。当然、そのような現象が発生する理由について、一人悶々とと分析しました。分析し続けました。数ヶ月に亘って・・・。

そしてやっと到達した要点は次のような、今更ながらの基本的なことでした。

  • 第一に、( 分かってみれば余りに当然のことですが )連続する Ajax 通信中において、先行する通信コードの中で設定した変数を、後続する他の通信中で活用しようとする時、先行する通信の中で変数が取得できていない時点で、後続する通信コードの中でそれを利用しようとすれば、当然エラー( 値は undefined となる)となること
  • 第二に、最も確実な連続 Ajax 通信コードの書き方は、先行する通信が終わったことを確認する何らかの flag を設定し、それを確認してから次の Ajax 通信が進行するようにコードを記述すればよいこと
  • 第三に、しなしながらその方法を採用すると、全体の通信完了までに相当の長時間を要してしまい、実用的ではないこと
  • 第四に、従って jQuery.active を複数回活用して各 Ajax 通信完了 を待機させれば、確実に各通信完了を javascript に認識させられること

───などでした。

そこで原点に返って可能な限り Ajax メソッド内で行ってみた

上記の再確認した基本的事項を踏まえて、Ajax 通信コードの外であれこれ操作して Ajax 通信結果を取得する試みがどうしても巧くいかないことから、原点に返って全てを Ajax 通信メソッドの内で行ってしまった方がよいのではないか、と考え直しそれを実行してみました。

すると驚いたことに、あるいは当然の結果なのかも知れませんが、これまでの悩みが嘘のようにあっさり解決してしまったのです。

詳細は以下のエントリイに記述しました。

FireBugLite における mousemove/mouseup イベントについて

FireBugLite のブックマークレットによる組み込み

firebug Liteを組み込みたいサイトに対して、一々その html を加工して firebug Liteをインクルードするのは面倒ですから、誰しもそのインクルードをブックマークレット等によって容易に行えるようにしたい、と考えるでしょう。

そして過去に、それを実現しているサイトを見つけたのですが、最近そのブックマークレットが利用しているファイル置き場が消失してしまい、当該ブックマークレットが使えなくなってしまいました。(WebOS Goodies:Firebug Lite をブックマークレット化しました - WebOS Goodies

そこで WebOS Goodies に倣って、 GooglePages に Firebug Lite 関連ファイルを置き、自作ブックマークレットを活用しようと思い立ったのです。

ところが、Firebug Lite サイトからダウンロードしたファイルを単純に解凍し、解凍後のファイルをファイル置き場として使用する Google Pages にアップロードし、それを利用したブックマークレットを作ってみても、それだけでは Firebug Lite は使えませんでした。

その原因を探るべく WebOS Goodies の「Firebug Lite をブックマークレット化しました」頁をよく見てみると、firebug.js を多少加工して upload している、等のブックマークレット作成上の留意点(※)が書いてありましたので、それを真似て firebug.js に必要な加工を施して upload してみたのです。すると、確かに Firebug Lite の起動には成功したのですが、新たに次の課題が出現しました。

Firebug Lite をブックマークレット化しました - WebOS Goodies からの引用
  • firebug.html の内容を文字列として firebug.js に埋め込み、IFRAME に document.write で流し込むように変更。
  • CSS の URL を変更。
  • ファイルを Google Page に保存する都合で、見分けやすくするためにアイコンのファイル名を変更。
  • Opera できちんと動くように、 z-index の値を小さめ(65536)に変更。
  • こちらの記事のアイディアを参考にして、改行が反映されるように writeRow 関数で生成するタグを pre に変更。ただし、 IE では効果がないようです(謎)。

Opera では問題なし。しかし IE では・・・

Opera では狙い通りに FirebugLite が組み込まれ作動しました。jQuery.js とのダブルインクルードも成功し、FirebugLite 上で jQuery.js を利用することも出来ました。

しかし IE においてはマウスカーソルを動かすだけで、Firebug Lite によって用意されるインラインフレームの高さが上下してしまうため、思うように使えないのです。

その原因を探るためFirebugLite.jsを紐解いてみたところ、原因は 202 行の「toolbar.onmousedown = onSplitterMouseDown;」にあることが判明しましたので、この行をコメントアウトしました。つまり、toolbar 上のマウスダウンイベントを無効にしてしまった訳です。

これにより、202 行によって登録されることになる onSplitterMouseMove 及び onSplitterMouseUp イベントも同様に無効になるわけですが、不如意なフレームサイズ変更は操作上大きな支障を来すためやむを得ない処置であると思います。

また、frame内に表示させるために用意されている firebug.html も不要なので、217行もコメントアウトしました。

▲ToTop

改訂した FirebugLiteを Google-Page 上に置く

こうした改訂を施した firebug.js を Google-Page 上に置いて活用するようにしたのです。

Fc2ブログの場合、ファイル置き場を認めていませんから、 Google-Page 上に置いて活用するようにしたことにより、任意の Web サイト上において FirebugLite を活用できるようになった訳です。

後はこれをインクルードする問題が残るだけですが、それについては別項( Query と FirebugLite を一括登録するブックマークレット: )でまとめました。

Ajax通信による最新/以前/以後の合計30個のエントリイタイトル情報の取得について

このエントリイの改訂履歴
  • 初稿:2008/3/23
  • 大幅な追記(連続するAjax通信の結果をどのようにして過不足なく取得するのかについて):2008/7/13
3/23 の記事

jQuery を活用した Ajax 通信にここ半年ほどのめり込んできました。

しかしアクセスログを見てみると、Ajaxに関するエントリイは余りアクセスが有りません。つまり関心を呼んでいないのです。

jQuery + Ajax の組み合わせは決して一般的ではないし、Javascripter にとってさえもメジャーな話題ではないのかもしれません。つまり、jQuery の Ajax ユーティリティを利用する行為自体が極めてマニアックなのかも知れません。だからアクセスも少ないのでしょう。

決して見られるために書いている訳ではないので、アクセス数に一喜一憂している訳ではありません。それはある意味では二の次であって、書きたいことを書き綴ることに意味があります。一般的な話題ではなく寧ろ deep な話題と言えますから、その意味では閲覧される確率は決して高い筈はないと思います。

それでも尚、読まれているかどうかは気になります。

反応は皆無に近く(あるのは迷惑千万なエロイ書き込みばかりです。(;_;)ウルウル)

最近は、無言の黒い壁に向かって全く自己満足で書き続けている気がしています。

それもこの国の Blog の1つの有り様ですから、致し方ないことなのですが...

▲ToTop

jQuery や Ajax を話題とするサイトや SNS を見つけたい

どうせ書くならば、共通の話題に関心のある方々に読んで貰いたい、あるいは情報交換をしたい、と願っています。

こう書いたからと言ってアクセスが増えたり、また情報交換が可能となるなんて思っていませんが、それでも尚書き綴りたい今日この頃なのです。


以後は 7/13 の記事

連続するAjax通信結果を過不足なく取得する具体的な方法

以下の関連エントリイに共通する「 連続する Ajax 通信からの結果取得方法 」について、ここでまとめておきます。

つづく

Google Page 利用雑感

突然の未知との遭遇

ファイル置き場で色々検索を掛けている中で、GooglePage を利用しているサイトを偶々、本当に偶然に見つけました。「ナンジャこりゃ?」とグーグって見ると、WYSWYG な Homepage 作成を提供している無料サービスであることが判明し、早速ファイル置き場としてこれを活用するために登録し、そして活用したのでした。

ファイル置き場としての性能を考慮する時、それが Google Code と決定的に異なるメリットは upload したファイルの上書きが可能であることです。

これは Google Code を使えば分かることですが、上書きが出来ない、少なくとも直ぐに反映されないことは大変使いにくいものです。結局、同名の version 番号を付けたファイルを沢山 upload する羽目になってしまうからです。

その点 Google Page は曲がりなりにもホームページ形式のウェブサイトですから、uploadしたファイルの上書きは当然可能であり、むしろ当たり前のことです。

その使い勝手

WYSWYG な Homepage 作成サイトですから、当然簡単に Homepage が作れてしまいます。それをブログとして活用することも、英語を native とする人間ならば簡単かも知れません。作成されるソースファイルを見ると「なんじゃこりゃ?」と驚くほどのコードの羅列なので、HTMLファイルを編集するという感じの使い方は出来ないとは思いますが、ファイル置き場として使うのですから、決して複雑なレイアウトを行う訳でもないし、むしろ単にファイルが置けて、別サイトから自由にリンクを貼れれば良い訳ですから、複雑なレイアウトは不必要です。

その意味では、GooglePage はファイル置き場として最適と言えるでしょう。そのファイルが写真や動画の場合には決してベストの選択肢ではないでしょうが、HTML、Javascript、CSS などのコードファイルである限り、その利用の便さえ問題がなければ(事実今のところ問題は皆無です)、最高の無料 Homepage サービスと言えるでしょう。

▲ToTop

iDrive が悪いのではないかも──Internet Security が停止してしまった!

関連エントリイ一覧 in this Blog

このEntryを書いてから数日後に起こった Internet Security 2007 のエラーから推測すると、以下に書いたことは憶測であり、そもそもの原因は iDrive にはないかも知れません。

よって以下の文章は全面的に取り消すこととします。

1つのファイル置き場である iDrive の利用をやめる!

無料オンラインストレージサービス iDrive を利用するには、固有のアプリケーションをローカル PC にインストールしなければなりません。

さて、必要なインストールを行って何日か経過したある日のことです。

メールが全く受信出来なくなってしまい、その原因を究明している中で、ウィルスソフトが起動してないこと、そのためにメール受信も出来なくなっていることに気がつきました。そのことが判明するまでに数時間が経過しましたから、その間にウィルスに感染したのではないか、とビビリながら、同時に早急に復旧しなければならない深刻な事態となっていることに驚きを覚えました。

いつからこんな状況になってしまったのか、そういえば昨晩もメールが受信できなかったような...、と記憶の糸を辿ったのですが、それ以前はどうであったか思い出せません。

しかし兎にも角にも Anti Virus が動いていないのですから、一刻も早くこれを有効にしないといけません。Web 頁を開くだけでも感染するサイトもある訳ですから、当然焦りました。早速 Norton Protection Center を起動して警告が出ている箇所をクリックし、必要な修復を施しました。 Live Update を繰り返すだけでしたが、その後再起動したところエラーは消え、メールも受信出来るようになりました。

▲ToTop

iDrive を操作するとまたしても Norton Protection Center にエラーが...

iDrive 関連アプリケーションをインストールすると、デフォルトでスタートアップフォルダに登録されるようで、パソコンを起動すると関連アプリが起動しログインを求めます。それをキャンセルすると Norton Protection Center にエラーが出てしまうのです。

つまり iDrive が Norton Protection Center と干渉し合っているようなのです。

そこで大して使っていない iDrive をアンインストールし、その後 LiveUpdate を繰り返してやっと AntiVirus を走らせると共にメール受信を可能としました。

iDrive は使用しない方が無難でしょう!

Microsoft's Windows Live SkyDrive を使ってみる

関連エントリイ一覧 in this Blog

それはブックマークレット作成に関わって始まった

よく知られているようにブックマークレットには文字数制限があります。IE では 508 文字、Firefox では2000 文字などです。それはある意味では当然の措置です。アンカータグ内に際限もなく長い Javascript コードを書くことを認めてしまえば、リンク機能を使った「悪さ」を許容することになるのかもしれません。それにしてもIEの508文字は余りに短すぎますが...。

さて、ブックマークレットを使えば任意のサイトにおいて、 Javascript や CSS ファイルをインクルード出来ますが、そのためにはそれらのファイルを置く場所が必要です。いわゆるオンラインストレージが必要になります。

ファイル置き場、又はオンラインストレージサービス(OLSS)概観

オンラインストレージに関しては、「オンラインストレージを使ってみよう(2001/4/23)」 に詳述されています。

impressのこの頁が書かれた年月日に注目すれば分かることですが、ファイル置き場は2000年頃には一世を風靡していました。競うように次々とサービスが提供されていたらしいのです。しかし理由は分かりませんが、現在は当時に比べれば下火となっているようです。

しかし、上記ページが書かれた後にも、Google が G Mail Drive を始め、最近ではネット業界の流れに乗り遅れまいと、破格の買収価格を提示して Yahoo 買収に奔走している、あの Microsoft 社が Windows Live SkyDrive という長い名前のオンラインストレージサービスをこの2月22日から38カ国で開始しました。

更に、Google は容量無制限の OLSS を開発中との報道もあります。

こんなことから、改めて OLSS に注目が集まりつつある、と言えるでしょう。

OLSS は殆どログイン制を採用しているが...

さて、日本の OLSS では、ジャストシステム社のインターネットディスクが老舗とも言える位置を占め、SONY の WebPocket がそれを追いかけているように思われます。ここで注目すべきことはこれらのOLSSが共にログインして使用する、原始的な利用形態を採用していることです。専用ソフトを利用してファイルを操作することも共通しています。

そして別のエントリイで書いたとおり、これらの2社の OLSS は外部からのリンクを認めていません。不特定多数のアクセスを排除しているのです。つまりこれらのOLSSは、特定の個人や組織によって利用するあくまでも閉じられたファイル置き場に過ぎません。

一方、G Mail Drive では特にログインを意識せずに利用出来るものの、これは既に Gmail アカウントによるログインが済んでいる状態で利用するからログインを意識しなくて済むのであって、基本的にはログインが必要な閉じたファイル置き場であることに替わりはありません。オンラインで使える自分の、自分だけのハードディスク装置と言えます。

これらに対して Windows Live SkyDrive の場合、HTMLマークアップによるブログ等への埋め込み機能があります。これを利用すれば、skyDrive の公開フォルダに置いたファイルへのリンクを任意のブログ内に貼ることが可能となります。つまりファイル置き場として利用できるはずです。

まず単純なファイル埋め込みを試してみます。下の setjQnFbug-WL.js をクリックするとその下の図のようなサイトが開かれ、当該ファイルをダウンロードする画面となります。つまり SkyDrive は誰でもアクセスできるファイル置き場として利用できる訳です。

SkyDriveTest結果図

不特定多数の人によるファイルダウンロードが可能ならば次に、ブックマークレットによるファイル操作も可能なのではないか、と考え、ここではこの一ヶ月間追求してきた、Ajax通信によってFc2ブログのエントリイタイトルを取得するブックマークレットが、 SkyDrive 上のファイルを呼び出した場合に動作するかどうか試してみました。

fc2BlogのエントリイタイトルをAjax通信で取得表示するブックマークレット

そしてそれは駄目でした!

JSファイルのインクルードまでは出来るのですが、肝心のインクルードしたファイルを読み込むことが出来ないようなのです。また何故か CSS ファイルはインクルード出来ませんでした。

SkyDriveもまた ブックマークレットのためのファイル置き場には使えませんでした

ということがこのエントリイの結論です。

Google Code を利用した感想

Google Code は簡単に利用できるファイル置き場としてGood!

Google Code は1プロジェクト当たり 100MB のディスクスペースが提供され、1ユーザー当たりのプロジェクト件数制限は見あたりませんので、実質無制限なファイル置き場として活用できます。

与えられる URI はプロジェクト名から始まるので分かりやすく、upload、download 操作も簡単にできます。

英語の説明書きしかありませんが、特に難しいことが書いてある訳でもないので、何度か使えば操作も難しくありません。

多くのディスクスペースが id やパスワード入力を求め、ファイル置き場としての利用に大きな制限を掛けている中で、Google Code の存在は貴重なものです。

ファイル上書き操作に難点が...

以前次のように書きました。

Google Code では登録済みファイルの上書き更新が出来ません。間違って登録してもそれを取り消せないのです。説明を読むと削除に同一名による新規ファイル登録が可能なように書いてあるのですが、何度試しても駄目でした。

この上書き禁止ルールは、際限なく登録されるファイル置き場として悪用されないための、1つの防護策なのかも知れません。

上に書いたことは正確ではありませんでした。

上書きは基本的に可能で、そのことは説明通りでした。注意すべきことは上書き変更が即座に反映されないことです。

上書きしてもその変更結果を直ぐに確認できないのです。しかし一定の時間(それが何時間なのか、何日なのかは不明)が経過すると、確かに変更が反映されます。

つまり、頻繁にファイル更新を行う行為は認めないが、ファイルの上書きは認める。頻繁な更新を抑制するために、更新にタイムラグを設け、出来るだけ更新を行わないようにさせる───という設計思想だと考えられます。

以上の特性を踏まえて利用すれば、大変貴重で有益な無料サービスだと思われます。

また、Systems engineer の間では Google Code Search が注目されているようで、Google Code でネット検索しても search のことばかりが表示されます。

▲ToTop

Javascript コードおよびCSSファイル説明

ファイル構成

ファイル置き場と Ajax 通信を活用して、任意のFc2ブログから情報を得る

  • 2008/3/12 : 初稿
  • 2008/7/9 : コードの抜本改訂とファイル置き場利用版up
  • 2008/7/12 : Ajax 通信関連部分を更に抜本改正
  • 2008/7/20 : Ajax 通信関連部分で確実性を更に向上(ここで Ajax 関連コードは完成し、これ以降はあれこれのユーザビリティの向上対策を施した。)
  • 2008/7/21 : id 及び class 名称を他の Fc2 ブログで使われていないと推定される固有のものに変更
  • 2008/8/12 : 各 Ajax 通信所要時間を記録し閲覧できるように変更。このプロジェクトの削除(関連cssファイルやjsファイルの登録削除)と隠蔽(単にpopup小窓を隠すだけ)を分け、各ボタンを配置。
  • 2008/8/14 : responseText の 文字化け対策として、或る <meta/> タグを追加するように変更

他ブログ上での Ajax 通信をついに実現( 2008/7/9 記 )

上の関連エントリイでつらつらと述べてきた課題──すなわち他の任意のFc2ブログサイト上において、ブックマークレットによって必要なスクリプトをインクルードし、当該スクリプトによる Ajax 通信によって当該ブログの情報を取得し、それを当該ブログ上に表示する──が、やっと解決しました。( 8/12 完結 )

上記 「 Related Entries in this Blog 」 の No1エントリイで計画したことが、No.2 エントリイで述べた、過去/未来/最新エントリイタイトル取得/表示を行う Ajax 通信の成功と、No.3 とNo.4 エントリイで述べたファイル置き場問題の解決によって実現したのです。

何はさておき、結果を画像で紹介することが最も分かりやすいでしょう。( 2008/8/14 追記 )

サンプル 1【 Fc2総合インフォメーションブログ 】

下の画像は、Fc2総合インフォメーションブログ上でこのプロジェクトを実行した際の表示結果抜粋です。

Fc2 総合インフォメーションブログ上で Ajax 通信によって最新/以前/以後エントリイのタイトル情報などを取得した結果を示すサンプル画像 1
サンプル 2【 関西ZIGZAG 】

下の画像は、人気ブログ「 関西 ZIGAZAG 」ブログ上でこのプロジェクトを実行した際の表示結果の抜粋です。

関西 ZIGAZAG ブログ上で Ajax 通信によって最新/以前/以後エントリイのタイトル情報などを取得した結果を示すサンプル画像 2
サンプル 3【 FCafe 】

下の画像は、自ブログ開設時からお世話になってきたサイト上でこのプロジェクトを実行した際の表示結果の抜粋を示すものです。

FCafe ブログ上で Ajax 通信によって最新/以前/以後エントリイのタイトル情報などを取得した結果を示すサンプル画像 3

今回のプロジェクト「Fc2ブログ エントリイ情報取得」の概要

今回作成したコード群は、任意の Fc2 ブログ上で jQuery を活用してエントリイタイトル等を取得するツールです。また併せて jQuery.js と ( Firefox 以外の browser の場合には )firebugLite もインクルードするようにしたので、IE や Opera などにおいても jQuery と firebugLite を使用し、スクリプトテストや DOM 操作を行うことも可能としました。

つまり、或る Fc2 ブログサイトの、或る個別エントリイ頁を開いた状態でブックマークを起動すれば、以前、最新及び以後の各 10 個のエントリイに係る諸情報(具体的にはタイトル、Entry番号、投稿日など)が閲覧できると共に、そのページ上で jQuery.js と firebugLite.js を使って Javascript コードの実行が出来るわけです。

プロジェクトのファイル構成( 2008/7/9 記 )

コード群はブックマークレットを含めて以下の6つから構成されます。

  1. ブックマークレット……次の setjQnFbug_getFc2EnTts.js を登録するため
  2. スクリプト登録用JSファイル( setjQnFbug_getFc2EnTts.js )……今回のプロジェクト実行に必要な以下の 4 つの全てのファイルを、今閲覧中の任意の Fc2 サイトのHTML文のヘッダー部に登録するための、短い Javascript コードファイル
  3. 上の 2. のファイルで登録するファイルは以下の 4 つです。
    1. jQuery.js、
    2. firebug.js、
    3. getFc2EntryTitles-gp.js( Ajax 通信用オリジナルJSファイル)
    4. getFc2EntryTitles-gp.css(通信結果表示用オリジナルスタイルシート……Ajax通信結果を固有に用意した絶対配置要素内で表示させるために、各ブログに依存しない固有のスタイルシートを用意)

ここに、このプロジェクトでは Ajax 通信処理をはじめとして、随所に jQuery.js を多用したコードを記述し実行しているため、jQuery.js が組み込まれていないブログの場合も想定し(大多数は組み込まれていないと思われる)、なければそれをインクルードするようにしました。

また firebugLite も組み込むようにしたので、IE や Opera 上でも Javascript のテストが容易に出来るようにしました。

以上により、Fc2のブログであれば何であれ、個別エントリイ表示モードの場合において、jQuery を活用して Ajax 通信を行い、エントリイタイトル情報を取得すると共に、firebugLite を使った Javascript の走行テストが出来るようにしました。

▲ToTop

ファイル置き場は Google Page を活用( 2008/7/9 記 )

ファイル置き場に出来るかも知れない、と考えた Just Sysytem 社のインターネットディスクは、同社への問い合わせの結果、使えないことが判明しました。また SONY の WebPocket にも問い合わせましたが、こちらも駄目でした。

有料なのに、それでもなお、ファイル置き場を認めない理由は全く理解できません。

確かに「 アクセスが集中する、ウィルスファイルを置かれる可能性も否定できないから踏み台とされる、つまりサービスの利用よりも悪用に手を貸すことになる 」等の否定的な側面が懸念されます。そしてこの懸念から解放されるためには、ファイル置き場を認めないことが安易な方法なのでしょう。

───と、いくら批判し、嘆いていても仕方ないので、調べた中で、無料で容易にファイル置き場として利用できる Google Page ウェブサイトを活用することにしました。Google page 上にマイページを立ち上げ、そこに上記 6 つのファイルの内ブックマークレットを除く 5 つのファイルを GooglePage サイトに upload し、自作ブックマークレットを作動させてその稼働を半年以上に渡って確認しています。

※ この少し下に成功したブックマークレットを置きました。

このプロジェクトの利用方法( 2008/3/12 記 )

ブックマークレット

以下のブックマークレットを(ブックマーク又はお気に入りに登録し)クリックすれば、関連する JS ファイルや CSS ファイルが head タグ内に追加され、固有の絶対配置要素が画面上部に表示されます。FireFox 、 Opera 及び IE7 で動作確認済みです。

後は Before・・・、Recent・・・、After・・・ などのボタンをクリックすれば、所定の情報が絶対配置要素内に表示されます。

Ajax 通信をやり直すボタン( ReLoad Data ボタン )や、Ajax 通信に要した時間を知ることが出来るような Log 閲覧ボタンも設置しました。また、結果を表示する小窓が邪魔になったら、隠蔽することも出来るし、ブックマークレットによってインクルードした関連スクリプト・cssファイルを削除するボタンも設置しました(但し jQuery.js と firebug.js は残すようにしました)。

こうして、Ajax通信結果を示す小窓が邪魔になったら隠蔽し、ブックマークレットを再起動すれば、隠蔽直前の状態で小窓が復帰するようにすると共に(Ajax 通信結果は閲覧中の頁がリロードされない限りメモリ上に残る仕様としたのです)、インクルードファイルが邪魔になったら簡単に剥離・削除出来る仕様にしました。

次のブックマークレットをお気に入りに登録すれば、今回のプロジェクトを任意の Fc2 ブログサイトで共通して使うことが出来ます。また、単に以下のブックマークレットをクリックするだけでも、今ご覧戴いているこのエントリイを対象としてブックマークレットを利用できます。

このプロジェクトの起点となるブックマークレット

※ 2008/8/11迄上記ブックマークレットのコードに一部ミスがあり機能しませんでした。利用しようとしてくださった方々には大変ご迷惑をお掛けいたしました。

Ajax 通信結果の表示

ブックマークレットをクリックすると、次のような小窓がブラウザの上部に表示されます。

Ajax 通信結果を表示する絶対配置要素の図

上の図は既に Ajax 通信が終わった状態の画像ですが、7つのボタンは左から順に「(1)今見ているエントリイの前の10個のエントリイタイトル表示、(2)最新の10エントリイ表示、(3)今見ているエントリイの後に投稿された10エントリイのタイトル表示、(4)Ajax通信再実施、(5)所要時間表示閲覧、(6)小窓の隠蔽、(7)関連スクリプトやcssファイルの削除」を行うためのものです。

例えば 「 Recent Entries 」 ボタンをクリックすると下図のようにタイトル名とエントリイナンバーが表示されます。Ajax 通信をやり直すことができるように設けた 「 Relaod Data 」 ボタンは、何らかの事情で取得結果がおかしかった場合などに Ajax 通信をやり直すことが出来るように配置したものです。このボタンをクリックすれば Ajax 通信に要した時間を比較して知ることも出来ます。

Ajax 通信結果である過去エントリイ10タイトルを見ている図
表示エントリイ上で jQuery と Firebug Liteを活用!

単に、エントリイタイトルを閲覧するだけでなく、このプロジェクトでは jQuery.js と FirebugLite もインクルードしますので、IE や Opera において、ちょっとした Javascript 利用が(デバッグ環境とまではいかないが、テストや学習に活用出来る)、エントリイ頁上でリアルタイムに行えるようになります。F12 キー又は CTRL+Shift+Lキーを押せば firebug Lite を起動することが出来ます。

▲ToTop

Javascript コードおよびCSSファイル説明( 2008/3/12 初稿:その後漸次改訂。確定は2008/8/14 )

1. スクリプトをインクルードするためのブックマークレット

ブックマークレットは各種のスクリプトや CSS ファイルをインクルードするための、いわば初期化スクリプトです。たった1つのスクリプトの存在をチェックし、存在していなければインクルードします。

そもそも全てのコードをブックマークレットに記述できればそれが最も合理的なのですが、ブックマークレットにはブラウザ毎に文字数制限があり、ここで行ったことはとてもその制限値内には収まらないので、複雑な手続きを経なければなりませんでした。

<a href="javascript:
(function(){
  // 文字数を減らすために変数を纏めて指定
  var%20x=0,i=0,
  h=document.getElementsByTagName('head')[0],
  t=document.getElementsByTagName('script'),
  s=document.createElement('script');
  // headタグ内を検索して
  if(t) for(;i<t.length;i++) 
    // setjQnFbug 文字の有無を走査し、有れば x に 1 を代入
    if(/setjQnFbug/.test(t[i].src)) x+=1;
    // setjQnFbug 文字が見つからなければ所定のjsファイルをインクルードする
    if(x==0){
      s.src='http://hkom007.googlepages.com/setjQnFbug_getFc2EnTts.js';
      s.type='text/javascript';
      // headタグ内にスクリプトタグを追加
      h.appendChild(s);
    // 既に所定のjsファイルがインクルード済みならば所定の関数(chkScript)を起動する。
    // この関数は3つのjsファイルと1つのCSSファイルのインクルードを行うためのもの
    }else%20chkScript();
})()">set jQuery & FirebugLite & getFc2EntryTitles.js</a>

▲ToTop

2. Javascript 及び css ファイルの一括インクルードを行う

setjQnFbug_getFc2EnTts.js は 4 つのファイルを一括してインクルードするコードだけを記述した 小さな JS ファイルです。といってもブックマークレットにするには文字数が多すぎてIEで読み込めないため、ブックマークレットとは別に設置した訳です。このファイル作成の当初段階では、インクルードするだけではなく、その後の処理も1つのファイルに纏めようとしましたが、それは無理でした。

何故ならば、インクルードのためのコードに続けて、インクルードされたファイルを使用して様々な処理を行うコードを書いて実行すると、インクルードが中断されてしまうからです。

ブラウザがファイルをインクルードする処理を行っている間に、JS インタープリタが次の処理を行おうとすると、インクルードそのものが中断されてしまうのです。

そのためインクルード専用のファイルと、インクルードされたファイルを利用して諸処理を実行するコードを記述したファイルとを別々に分けました。

// このスクリプトがインクルード済みの場合に関数が起動できるよう
// 名前付き関数とし、最後の行でこの関数を起動する。
var chkScript = function(){
  var v=0,w=0,x=0,y=0,z=0,i=0,
    h=document.getElementsByTagName('head')[0],
  m=document.getElementsByTagName('meta'),
    t=document.getElementsByTagName('script'),
    l=document.getElementsByTagName('link'),
    s=document.createElement('script');
  // 文字化け対策 
  // http-equiv="content-type" かつ content="application\/x-javascript charset=euc-jp"であるmetameguがあるかどうか走査
  // 存在すれば v 値を加算する。 
 if(m) for(;i<m.length; i++){
  if(/content-type/.test(m[i].getAttribute("http-equiv"))
   && /application\/x-javascript charset=euc-jp/.test(m[i].content)) v+=1;
 }
  // v 値がゼロならば meta タグを追加する。 
 if (!v){ 
  var k=document.createElement('meta');
  k.setAttribute("http-equiv","content-type");
  k.content = "application/x-javascript charset=euc-jp";
  h.appendChild(k);
 }
  // 所定のスタイルシートがインクルード済みかどうか link タグ走査し、あれば記録。
 if(l) for(i=0 ;i<l.length; i++) {if(/getFc2EntryTitles/.test(l[i].href)) w+=1}
  // CSSファイルのインクルード
 if(!w) {
  var k = document.createElement('link');
  k.rel = "stylesheet";
  k.type = "text/css";
  k.media = "screen, print";
  k.href='http://hkom007.googlepages.com/getFc2EntryTitles-gp.css';
  h.appendChild(k);
 }
  // jquery、firebug 及び getFc2EntryTitles の文字を含むスクリプトタグを走査し、
  // 存在していればそのことを記録する。
 if(t) for(i=0;i<t.length;i++){
  if(/jquery[^u][^i]+/.test(t[i].src)) x+=1;
  if(/firebug/.test(t[i].src)) y+=1;
  if(/getFc2EntryTitles/.test(t[i].src)) {
      // ブックマークレットが複数回起動された場合の処理
      // インクルード済みで結果表示小窓が非表示ならば表示する
      var tmp = document.getElementById("ajaxPopup");
      if (tmp && tmp.style.display == "none") tmp.style.display="block";
    } // 結果表示小窓が表示済みならば、何もしないでif文を終える。
 }
  // 以降で反復利用する文字列を定義
 s.type='text/javascript';
  // jQuery.js のインクルード
  // jQuery.js は単に firebug Lite から利用するだけではなく、Ajax通信や
  // その取得結果を表示するコードで多用します。
  // なお、min 版を利用することにしました。
 if (!x){
  s.src='http://hkom007.googlepages.com/jquery126min-gp.js';
  h.appendChild(s);
 }
  // firebugLite のインクルード
 if(!/firefox/.test(navigator.userAgent.toLowerCase()) && y==0){
  var c=document.createElement('script');
  c.src='http://hkom007.googlepages.com/firebug-gp.js';
  c.type=s.type;
  h.appendChild(c)
 }
  // Ajax 通信を行う本体コードの getFc2EntryTitles.js のインクルード
 if (!z){
  var r=document.createElement('script');
  r.type=s.type;
  r.src='http://hkom007.googlepages.com/getFc2EntryTitles-gp.js';
  h.appendChild(r);
 }
  // 無名関数としなかったのは再呼び出しがあり得るからです。
};chkScript(); //関数実行

▲ToTop

3. 結果を表示する小窓用 CSS ファイル

取得結果を絶対配置要素内に表示させるために、CSS ファイルを作成しました。これによりどんな Fc2 ブログであっても Ajax 通信結果を同様に表示するようにしました。

なお、任意のFc2ブログで活用できるようにするには、id や class の名称に工夫が必要であることを、いくつかのサイトで試してみて納得しました。このプロジェクトで利用する名称が、閲覧しているブログサイト内で利用されてる名称と重複してしまってはいけない、ということです。

このことは振り返れば余りに当たり前のことですが、実行して初めて分かった次第です(^_^;)。

経緯はこうでした。( 2008/7/21 追記 )

FC2総合インフォメーション 【ブログ】画像ファイル挿入の仕様変更のお知らせ でこのプロジェクトを試してみたのですが、その際に当該サイトで使用されている id 名称( #menuBlock )が、このプロジェクトで利用していた id 名称と重複していたため、当該サイトでは予想外の挙動が起きてしまいました。

そこで初めて、任意の Fc2 サイトと id や class 名称が干渉しないよう、このプロジェクトでは他には絶対に存在しないであろう、固有の名称を使用しなければならない、と気がついた訳です。

こうして id 及び class 名称は以下にあるように長たらしいものとなりました。全ての id 及び class 名称に、「 getEntryTitles_ 」なる接頭語を付けたのです。これで「おそらく」世界で唯一の名称になったのではないか、と一人合点しています。

更に CSS ファイルでは重要なことがあります。( 2008/8/17 追記 )

それは自分のブログで様々な CSS コードを書いている限り全く問題とはならなかったことであり、他のサイト上で自分が書いた CSS ファイルを適用する際には、必ず注意しなければならない問題です。

その問題とは CSS ファイルの優先順位です。

ブラウザにはそれぞれ固有のスタイル値があり、また当然のことですがそれぞれのブログには、作者固有の、またはテンプレート固有のスタイル値があります。そして私が考え、CSSファイルで表現したスタイル値があります。これらの優先順位についてこれまで全く考慮する必要がなかったのですが、他の方のブログ上で MyCSS ファイルを適用することになった時点で、即座にこの CSS ファイルの優先順位が切実な課題となってきたのです。

そこで数年ぶりに改めて CSS の学習を思い起こし、また一部再学習して !important 属性を使うことに到達しました。

@charset "euc-jp";
	#getEntryTitles_pasteData ul { /* important によって任意の Fc2ブログにおいて同一の */
		margin:0 0 0.5em 1.5em !important; /* 結果を得るようにした。*/
		padding:0 !important; /* ここに到達するまでに結構悩んでしまった。*/
		clear:both !important;
	}
	#getEntryTitles_pasteData ul li{
		margin:0 !important;
		padding:0 !important;
	}
	#getEntryTitles_ajaxPopup{
		position:absolute; z-index:100000; top:150px;left:50%;
		width:0; height:0; margin:0px;
		font-size:small;
		text-align:left;
		color:black;
		display:none;
	}
	#getEntryTitles_menuBlock {
		padding:10px;
		width:0px; height:0px;	/*not auto*/
		background-color:#def;
		border:2px #777 solid;
		display:none;
	}
	#getEntryTitles_loading {
		clear:both;
		padding:5px 10px;
	}
	#getEntryTitles_pasteData {
		clear:both;
		margin-top:-28px;
		display:none;
	}
	#getEntryTitles_pasteData a:link{color:blue; text-decoration: none;}
	#getEntryTitles_pasteData a:visited { color: purple; text-decoration: none;}
	#getEntryTitles_pasteData a:hover {
		color:darkgreen;
		background:#dd0; 
		text-decoration: none; 
	}
	#getEntryTitles_pasteData a:active { color: lightblue; text-decoration: none;}

	#getEntryTitles_finish, #getEntryTitles_resultbefore, #getEntryTitles_resultrecent,#getEntryTitles_resultafter {
		padding:0 10px 10px 10px;
		background:#def;
		border-left:2px #777 solid;
		border-right:2px #777 solid;
		border-bottom:2px #777 solid;
		display:none;
	}
	.getEntryTitles_btn {
		width:120px;
		float:left;
		margin:0 2px;
		padding:2px;
		border:1px black solid;
		font-weight:bold;
		color:white;
		background-color:#89A;
		text-align:center;
	}
	#getEntryTitles_viewLog {
		float:left;
		width:50px;
		margin:0 2px;
		padding:2px;
		border:1px black solid;
		font-weight:bold;
		color:white;
		background-color:#89A;
		text-align:center;
	}
	#getEntryTitles_hideThis, #getEntryTitles_removeThis {
		float:right;
		width:20px;
		margin:0px 2px;
		padding:2px;
		border:1px black solid;
		font-weight:bold;
		color:white;
		background-color:#89A;
		text-align:center;
	}
	#cmtbtn1{
		text-align:center;
		margin-top:-2em;
		display:block; width:16em; float:right;
	}
	#cmtbtn2{
		text-align:center;
		border:1px solid darkgray;
		padding:2px;
		margin-top:-2em;
		width:12em; float:right;
	}

▲ToTop

4. メインの JS コード( Ajax通信実施、結果表示等全ての処理を実行する )

Ajax 通信処理、取得結果表示処理などを行うメインコードを書いたファイルです。

必要なファイル全てのインクルードを行ってから、getFc2EntryTItles-gp.js によって Ajax 通信処理を行い、その取得結果を表示中のブログ内に表示します。

結果を表示する小窓にはスクロールイベントを登録し、スクロール時にも常に画面上部に表示され続けるようにしました。

  1 :/* getFc2EntryTItles-gp.js
  2 : * 2008/7/21 Release
  3 : * 2008/8/12, 2008/8/17 update
  4 : */
  5 :// fc2ブログでかつ個別 Entry 表示モードの場合にのみコードを進行する。
  6 :if (location.href.indexOf("fc2")!=-1 && location.href.indexOf("blog-entry-")!=-1){
  7 :(function($){
  8 : var now=function(){return +new Date;}; // 時刻取得関数
  9 : $.extend({ // 時刻・timer起動回数記録用 jQuery 拡張オブジェクト
 10 :  tr:{
 11 :   start:now(),
 12 :   registerEvent:"",
 13 :   ajax:{ recent:[],before:[],after:[]},
 14 :   end:"",
 15 :   waitRecentAjaxCnt:0,setEndingCnt:0
 16 :  }
 17 : });
 18 : // ローカル変数定義
 19 : var aP,mB,ld,pD,fn,lg,r_c,r_b,r_a, constStr="getEntryTitles_";
 20 : var html = { before:[], after:[], recent:[] },getStr ={ before:"", after:"", recent:"" },
 21 :  blogTitle =null, regExpr = "",border={ before:0, after:0},realElm={before:0,after:0},thisEntryNo, lastNo, itval,complement,cmt=0;
 22 :
 23 : // 取得結果表示用のタグを作り表示する。
 24 : if ( $("#"+constStr+"ajaxPopup").size()==0) {
 25 :  $(document.body).append(
 26 :   '<div id="getEntryTitles_ajaxPopup">'+
 27 :    '<div id="getEntryTitles_menuBlock">'+
 28 :     '<button id="getEntryTitles_before" class="getEntryTitles_btn" title="このエントリイより前のエントリイのタイトル情報を見る">Before Entries</button>'+
 29 :     '<button id="getEntryTitles_recent" class="getEntryTitles_btn" title="最新エントリイのタイトル情報を見る">Recent Entries</button>'+
 30 :     '<button id="getEntryTitles_after" class="getEntryTitles_btn" title="このエントリイより後のエントリイのタイトル情報を見る">After Entries</button>'+
 31 :     '<button id="getEntryTitles_reload" class="getEntryTitles_btn" title="Ajax通信をやり直す">ReLoad Data</button>'+
 32 :     '<button id="getEntryTitles_viewLog" title="Ajax 通信の所要時間を見る">Log</button>'+
 33 :     '<button id="getEntryTitles_removeThis" title="このプロジェクトの関連スクリプトやcssを一気に削除する。">'+decodeURI(encodeURI("×"))+'</button>'+
 34 :     '<button id="getEntryTitles_hideThis" title="この小窓を隠蔽する。再表示はブックマークレットを再度クリックすれば良い。">-</button>'+
        // 通信中であることを表示するタグ
 35 :     '<div id="getEntryTitles_loading"><img src="http://hkom007.googlepages.com/loading_16.gif" width="16" height="16" border="0" alt="" /> Now Loading...</div>'+
 36 :    '</div>'+
 37 :    '<div id="getEntryTitles_pasteData">'+
        // 連続する Ajax 通信の全てが終わったことを表示するタグ
 38 :     '<div id="getEntryTitles_finish"><div><strong>Finish Ajax Communication !</strong></div><div id="getEntryTitles_log"></div></div>'+
        // 以前エントリイタイトル名等を表示するタグ
 39 :     '<div id="getEntryTitles_resultbefore"></div>'+
        // 最新エントリイタイトル名等を表示するタグ
 40 :     '<div id="getEntryTitles_resultrecent"></div>'+
        // 以後エントリイタイトル名等を表示するタグ
 41 :     '<div id="getEntryTitles_resultafter"></div>'+
 42 :    '</div>'+
 43 :   '</div>'
 44 :  );
 45 : } else {
 46 :  $("#"+constStr+"ajaxPopup").show();
 47 :  return;
 48 : };
 49 :
 50 : // 表示/非表示を操作するために必要な要素をショートカット変数に代入する。
 51 : aP=$("#"+constStr+"ajaxPopup");
 52 :  mB=$("#"+constStr+"menuBlock");
 53 :    ld = $("#"+constStr+"loading");
 54 :  pD=$("#"+constStr+"pasteData");
 55 :    fn = $("#"+constStr+"finish");
 56 :       lg =$("#"+constStr+"log");
 57 :    r_c = $("#"+constStr+"resultrecent");
 58 :    r_b = $("#"+constStr+"resultbefore"); r_a = $("#"+constStr+"resultafter");
 59 :
 60 : // 結果表示ポップアップに対するアニメーション関数。真ん中から吹き出すような効果を狙った。
 61 : var doExplodeShrink = function(elem,w,h,padbdr,left,state){
 62 :  elem.show().animate({
 63 :   width: w=="auto" ? "auto" : w+"px", height:h=="auto"?  "auto" : h+"px",
 64 : //  display:state, // IEでは機能しないためやむなく削除
 65 :   marginLeft:left ? (-parseInt(w/2)-padbdr+"px") : 0
 66 :  },400,"swing");
 67 : };
 68 :
 69 : // イベントハンドラー登録
 70 : $.tr.registerEvent=now();
    // 固定配置的に配置するためのスクロールイベントハンドラー
 71 : $(window).scroll(function(){
 72 :  $("#"+constStr+"ajaxPopup").css({
 73 :   top:10 +( window.pageYOffset || Math.max(document.body.scrollTop, document.documentElement.scrollTop) )+"px",
 74 :   marginLeft:-320+ ( window.pageXOffset || Math.max(document.body.scrollLeft, document.documentElement.scrollLeft) )+"px"
 75 :  });
 76 : });
 77 :
    // 最新/過去/未来エントリ情報を表示させるクリックイベントハンドラー
 78 : $.each([$("#"+constStr+"recent"),$("#"+constStr+"before"),$("#"+constStr+"after")],function(j){
 79 :  $(this).click(function(){
 80 :   $([fn,r_c,r_b,r_a]).each(function(i){
 81 :    i==j+1 ? $(this).show() : $(this).hide();
 82 :   });
 83 :   this.blur();
 84 :  });
 85 : });
 86 :
    // Ajax通信をやり直すボタン
 87 : $("#"+constStr+"reload").click(function(){
 88 :  $.tr.start=now();
 89 :  this.blur();
 90 :  pD.hide().children().hide();
 91 :  mB.hide();
 92 :  doExplodeShrink(aP,0,0,0,true,"none");
 93 :  ld.show();
 94 :  makeLists(10);
 95 : });
 96 :
    // Ajax通信に要した時間を見る為のボタン
 97 : $("#"+constStr+"viewLog").click(function(){
 98 :  $([r_c,r_b,r_a]).each(function(){$(this).hide();});
 99 :  fn.show();
100 :  this.blur();
101 : });
102 :
    // 小窓を一時的に隠蔽するボタン
103 : $("#"+constStr+"hideThis").click(function(){
104 :  this.blur();
105 :  aP.hide();
106 : });
107 :
    // プロジェクトに係るjsファイルやcssファイルを削除するボタン
108 : $("#"+constStr+"removeThis").click(function(){
109 :  this.blur();
110 :  aP.remove();
111 :  $("script[src*='getFc2EntryTitles']").remove();
112 :  $("script[src*='setjQnFbug']").remove();
113 :  $("link[src*='getFc2EntryTitles']").remove();
114 : });
115 :
116 : mB.children().hover( // ボタンにマウスオーバー/アウトした際のイベントハンドラー
117 :  function(){
118 :   $(this).css({color:"black",backgroundColor:"#dd0"});
119 :  },
120 :  function(){
121 :   $(this).css({color:"white",backgroundColor:"#89A"});
122 :  }
123 : );
124 :
125 :// 最近のタイトルを取得する関数を定義
   // limit 個数のエントリイタイトル情報を Ajax 通信によって取得する。
126 :var makeRecentEntryList = function (limit){
127 : var No, subject, date, iter=0, ret=[],
128 :  target ={  //xml ファイル内での順番
129 :     link:[],     //0
130 :   title:[],     //1
131 : // description:[],  //2 これは利用しない
132 : // content:[],    //3 同上
133 :    subject:[],    //4
134 :   date:[]      //5
135 :  };
136 :
137 : // エントリイタイトルを取得する
138 : $.ajax({
     // 閲覧中のFc2ブログの xml ファイルのアドレスを設定する。
139 :  url: /(http:.+fc2\.com\/.*)blog-/.exec(location.href)[1] + "?xml" || null,
140 :  type: "GET",
141 :  dataType: "xml",
     // xmlファイルが成功裏にダウンロード出来た場合の処理関数
142 :  success: function(xml){
143 :   var tmpStr = '<div>'+decodeURI(encodeURI("最新のエントリイ情報がありません。"))+'</div>';
144 :   if (xml==null) {getStr.recent = tmpStr; return;}
145 :   // Blogタイトルを取得する
146 :   blogTitle = $(xml).find("title").eq(0).text();
147 :   // 最新エントリイ情報を巡回取得
148 :   $.tr.ajax.recent["start"]=now();
149 :   $.each(target,function(key){
150 :    $.each($(xml).find("item"), function(i,n){
        // 取得結果を ret 配列の i 番目に代入
151 :     ret[i]= [$(n).children().eq(0), $(n).children().eq(1), $(n).children().eq(4),$(n).children().eq(5)];
        // ret配列内のテキスト文字列を抽出して target 配列に代入する。
152 :     target[key].push( ret[i][iter].text() );
153 :    });
       // 次のエントリイ情報を取得するために(46行で初期値ゼロを定義済み)
154 :    iter++;
155 :   });
156 :   try {
       // エントリイ番号、エントリイタイトル、投稿年月日を取得する。
157 :    for (var i=0 ; (i < limit) && target.link[i] ; i++) {
158 :     No = /entry-([0-9]+)/.exec(target.link[i])[1];
159 :     i==0 && (lastNo = Number(No)); // 最新エントリイ番号を取得
160 :     subject =" , " +target.subject[i];
161 :     date =" , " +target.date[i].substring(0,10); // 年月日のみを抽出
        // limit 個の取得結果を表示用に整序して配列 html.recent に代入する。
162 :     html.recent.push( "<li><a href='" + target.link[i] + "' target='_blank'>" + target.title[i] + "</a> (No." + No + subject + date + ")</li>" );
163 :    }
164 :    $.tr.ajax.recent["end"]=now(); // 時刻記録
       // 格納済み配列を HTML 文字列に併合して最終表示用に整序する。
165 :    getStr.recent = "<div><strong>Recent " + Math.min(limit,i) + " Entries</strong></div><ul style='margin-left:1.5em;list-style-type:disc'>" + html.recent.join('') + "</ul>";
       // 最終表示用に整序した HTML 文字列を表示用タグに挿入する。
166 :    r_c.html(getStr.recent);
167 :   } catch (err) { // 何らかのエラーが発生した場合にはその旨を表示する。
168 :    r_c.html(tmpStr);
169 :   }
170 :  } // End of success()メソッ
171 : }); // End of ajax()メソッド
172 :}; //End of makeRecentEntryTitle func
173 :
174 :// 前後のタイトルを取得するための準備を行う
175 :var makeEntryList = function(b_a,limit){
176 : var thisHTTP, getEntryNos=[], thisURL=[]; // ローカル変数定義
    // エントリイアドレス文字列を分解するための正規表現文字列定義
177 : regExpr = /(http:.+entry-)([0-9]+)/;
    // 今開いているエントリイのエントリイ番号を取得する。
178 : thisEntryNo = Number(regExpr.exec(location.href)[2]);
    // 今開いているエントリイアドレスのエントリイ番号前までの文字列を取得する。
179 : thisHTTP = regExpr.exec(location.href)[1];
    // 以前エントリイについてアドレス名にエラーが出ないように
    // この段階では最新エントリイタイトル名取得関数内で設定した。
    // 最新エントリイ番号値は上で取得済みなので、これを活用して
    // 以後番号も存在しない番号を取得しないようにする。
180 : border[b_a] = Math.min(limit+1, b_a == "before" ? thisEntryNo : Number(lastNo)-thisEntryNo+1);
181 : if (border[b_a]==1) thisURL.length=0; // 求める以前エントリイがない場合の処理
182 : else {
     // 求める以前または以後のエントリイが存在すれば
183 :  for (var i=1; i < border[b_a]; i++)
      // そのアドレス文字列を作成し配列に格納する。
184 :   thisURL.push(thisHTTP + (thisEntryNo - (b_a == "before" ? i : -i)) +".html" );
185 : }
186 : realElm[b_a] = 0; // 初期化
187 : // 準備完了! Ajax 通信開始
188 : getTitlesByAjax.call(this, b_a,thisURL);
189 :};
190 :
191 :// Ajax 通信によりエントリイタイトル等を取得する関数の定義
   // b_a は以前のエントリイか、以後のエントリイかを示す文字列
192 :var getTitlesByAjax = function (b_a,thisURL){
193 : if ( thisURL.length != 0 ) {
     // エントリイアドレス毎に巡回処理を行う。
194 :  $.each(thisURL,function(i,aryitem){
195 :   $.tr.ajax[b_a][i]=[];
196 :   $.tr.ajax[b_a][i]["start"]=now();
197 :   $.get(aryitem,function(data){ //data は thisURL[i] の html テキスト文
       // エントリイタイトル部分を抽出するための正規表現文字列を定義する。
198 :    regExpr = /<title>(.*)<\/title>/;
       // ブログタイトル文字列があればそれをエントリイタイトル文字列から削除する。
199 :    var titleStr = blogTitle && regExpr.exec(data)[1].replace(blogTitle,"") || "" ;
200 :    if ( /\S+/.test(titleStr)){ //空白だけのタイトル名は補足しない。
201 :     ++realElm[b_a]; // 取得したタイトル数をカウントする。
        // 1つのエントリイのタイトル名、エントリイ番号を取得

202 :     html[b_a][i]="<li><a href='" + aryitem + "' target='_blank'>" + decodeURI(encodeURI(titleStr)) +" (Entry No." + /entry-([0-9]+)/.exec(aryitem)[1] + ")</a></li>";
203 :    }
204 :    $.tr.ajax[b_a][i]["end"]=now(); // 時間記録
       // 最後の通信処理が終わったらsetEnding()関数をタイマー起動する。
205 :    if (b_a == "after" && aryitem == thisURL[thisURL.length-1]) 
206 :     itval=setInterval(setEnding,20);
207 :   });
208 :  });
209 : } else {if (b_a == "after") itval=setInterval(setEnding,20)}
210 :};
211 :
   // 終了処理関数定義
212 :var setEnding = function (){
213 : $.tr.setEndingCnt++; // 回数記録
214 : if (jQuery.active==0){ // Ajax通信結果が取得出来たならば
215 :   if (itval) {clearInterval(itval);itval=null;} //タイマー変数停止無効化
     // 以前・以後別に処理
216 :   $.each(["before","after"],function(i,b_a){
      // 取得結果がない場合
217 :  if (realElm[b_a]==0)
218 :   getStr[b_a]="<div>"+ (b_a=='before' ? 'Before ' : 'After ') + "Entry "+ decodeURI(encodeURI('はありません。')) + "</div>";
219 :  else {
      // 欠番があった場合の説明文を complement 変数に代入
220 :   complement = (border[b_a]-1 -realElm[b_a]!=0) ? 
221 :    " ( " +decodeURI(encodeURI("欠番があります。")) +" )" : "";
      // 取得結果を HTML 文字列にして変数に代入
222 :   getStr[b_a] = "<div><strong>"+ (b_a=='before' ? 'Before ' : 'After ') + realElm[b_a] + " Entries" + complement +"</strong></div><ul>" + html[b_a].join('') + "</ul>";
223 :  }
     // HTML 文字列化された取得結果文字列を所定のタグに挿入する。
224 :  $("#"+constStr+"result"+b_a).html(getStr[b_a]);
225 :  if (b_a=="after") {
      // Now loading...文字を隠蔽
226 :   ld.hide();
      // 結果表示ボタンの無効化と半透明化を解除
227 :   $(".getEntryTitles_btn").attr("disabled","").animate({opacity:1.0});
      // 以前タイトルの所要時間を設定(ゼロの時にも対応)
228 :   var beforeTime=$.tr.ajax.before.length ? "<li>以前タイトル取得 Ajax 通信所要時間: "+ ($.tr.ajax.before[realElm.before-1].end-$.tr.ajax.before[0].start)/1000 +" 秒</li>" : "";
      // 以後タイトルの所要時間を設定(ゼロの時にも対応)
229 :   var afterTime=$.tr.ajax.after.length ? "<li>以後タイトル取得 Ajax 通信所要時間: "+ ($.tr.ajax.after[realElm.after-1].end-$.tr.ajax.after[0].start)/1000 +" 秒</li>" : "";
      // 所要時間を表示するためのHTML文の作成
230 :   var AjaxLog ="<ul style='margin-bottom:5px'>"+
231 :    "<li>クリック後 Ajax 通信開始迄の所要時間: "+($.tr.ajax.recent.start-$.tr.start)/1000 +" 秒</li>"+
232 :    "<li>最新タイトル取得 Ajax 通信所要時間: "+ ($.tr.ajax.recent.end-$.tr.ajax.recent.start)/1000 +" 秒</li>"+ beforeTime + afterTime +
233 :    "<li>このプロジェクト全体の所要時間: "+ (($.tr.end=now())-$.tr.start)/1000 +" 秒</li></ul>";
      // ログ閲覧回数の記録
234 :   cmt++;
      // 一度目の所要時間表示文字列
235 :   var cmtbtn1="<button id='cmtbtn1' onclick='this.blur();window.open(\"http://hkom.blog1.fc2.com/blog-entry-631.html\",target=\"_blank\")'>この Ajax 通信や所要時間について</button>";
      // 二度目以降の所要時間表示文字列
236 :   var cmtbtn2="<div id='cmtbtn2'>" +(cmt-1)+" 回目の Reload 結果</div>";
237 :   lg.append(AjaxLog+(cmt==1 ? cmtbtn1:cmtbtn2)); // 経過時間ログの挿入
      // 結果表示エレメントの表示
238 :   pD.css({width:"640px",height:"auto"}).show();
      // 通信終了を知らせる文字列の表示(アニメーション)
239 :   fn.show().children().eq(0).fadeIn("slow",function(){$(this).css({color:"darkgreen",background:"pink"})}).fadeOut("slow").fadeIn("slow",function(){lg.show()});
240 :  }
241 :   });
242 : }
243 :};
244 :
   // 一連のAjax通信関数を起動する関数
245 :var makeLists = function(num){
    // popup小窓のアニメーション表示のため
246 : doExplodeShrink(aP,640,600,0,true,"block");// ここでサイズ指定。最外側の div 要素を表示
247 : doExplodeShrink(mB,616,50,12,false,"block"); //OK42=Firefox.Opera,but50=forIE,
    // 結果表示用のボタンの無効化と半透明化並びにその他のボタンの有効化等
248 : $(".getEntryTitles_btn").each(function(i){
249 :  i<3 ? $(this).attr("disabled","disabled").animate({opacity:0.4})
250 :   : $(this).attr("disabled","").animate({opacity:1.0});
251 : });
252 : $.each(["recent","before","after"],function(i,n){ // 結果を格納する変数の初期化
253 :  getStr[n]=""; html[n].length=0;
254 : });
255 : makeRecentEntryList(num); // 最新エントリイ情報取得開始
    // Ajax通信開始待機関数の定義
256 : var nextAjaxTimer = function(){
257 :  $.tr.waitRecentAjaxCnt++; // 回数を記録
258 :  if (jQuery.active==0) { // Recent Entry Titles 情報の取得が終わったら
259 :   if (timer) {clearInterval(timer);timer=null;}
      // 「以前」情報取得のためのAjax通信関数起動
260 :   makeEntryList("before",num); // ここは連続して履行しても
      // 「以後」情報取得のためのAjax通信関数起動
261 :   makeEntryList("after",num);  // 問題なく取得結果を html 化できる。
262 :  }
263 : };
    // タイマー起動
264 : var timer = setInterval(nextAjaxTimer,100);
265 :};
266 : makeLists(10); // 一連の関数を起動
267 :})(jQuery); // 引数 jQuery で無名関数を起動
268 :} else alert("閲覧中のサイトは FC2 ブログではないか、Fc2 ブログであっても個別エントリイ表示モードではありません。\nこのプロジェクトは、Fc2ブログの個別エントリイ表示モードの場合のみ使用できます。");
269 :

ファイル置き場問題(2) 結局有料サイトしかないのか?! 否!Google Codeが!

概ね5時間掛けて色々調べた結果...!!

リンクが貼れるファイルを無料ホスティングサービスでゲットすることは、かなり困難であることが判明しました。

そこで最後のチャレンジで Google Code に登録してみました。すると何と!upload 出来て、かつリンクを貼ってダウンロード出来るではありませんか!

早速、その例を下に掲載してみます。

firebug.js

firebugx.js

既存のファイルなので Google Code Website の主旨に反するでしょうが、テストということで許して貰うとして(苦笑)、上のリンクをクリックすると直ぐにダウンロードを開始するダイアログが表示されます。まさにこれこそ願っていた環境なので、ついに目的を達することが出来ました。

これにより、各種のブックマークレットによって各種のサイト上でスクリプトをインクルードし、Ajax 通信などによる情報取得/表示を実現する道が開けました。

例えば、先のエントリイで掲載したブックマークレット( jQuery と firebugLite を一括してインクルードするもの)において、その中の firebug.js ファイルのリンク先を webos-goodies から、Google Code に変えたものを以下に掲載しました。

これで (1) jQuery1.2.3.jsと (2) firebug.js のインクルードが実現すれば、万々歳です。

そしてそれは実現できました!!

下のリンクをお気に入りに登録すれば、 jQuery と firebugLite を一括してインクルードするブックマークレットとして使えます。
No1簡易版 jQuerify + FirebugLite

▲ToTop

それでも有料サイトを使うべきかも知れない

Google Code サイトは他者に貢献できるようなファイルを置く場所だと思われますので、私のような使い方、あるいは私のようなレベルの素人が使うのは、いかにも僭越な気がします。

よってGoogle Code には遠慮して、有料サイトを使うべきかも知れません。

しかし、暫くの間は自作の ブックマークレットを含む Javascript コード等を Google Code に upload し、このブログ上からダウンロードやインクルード出来るようにしてみようか、と思っています。

JustSystem や Sony が提供するホスティングサービスを利用することは、いつでも可能なことですし、Google Codeでは写真や動画あるいは通常の文書ファイルは保存できません。毎月 300 円程度で確実にファイル置き場として利用できるのであれば、決して高くはありませんから、追って有料サービス利用に踏み切ろうかと、思案中です。

ps:昨日確認したところ、二社とも無料期間を設けて自社サービスへの誘導を行っていました。

ファイル置き場問題に明るい展望が開けた!、かと思いきや・・・駄目だった。

駄目元でも良いから...とグーグったら!

検索用語はずばり「無料 ファイル置き場」。するといくつかの候補がリストアップされるではありませんか!

iDrive───これは英語圏のもので無料ではあるものの、利用規約などとても読む気にはならないので、最後の手段かな、と概観してみました。使えそうではありました。( Free Online Backup - IDrive - Encrypted, Secure and Automated! )一度は無料サービス提供をやめたはず(2001年)ですが、その後また再開したものと思われます。何と 2GB の容量が無料で使えるようです。

但し、バックアップ用途としてのディスク容量の提供に限定されているのかも知れませんが、詳細は調べ切れていません。

なお、有料の eXys iDrive(WebDAV対応 大容量 オンラインストレージ - eXys iDrive - 簡単・安全にファイルを保存・共有できます) とは全く別物です。

次に、Google の無料サービスでも使えそうなものがあるようです。プロジェクト ホスティング「独自のオープンソース プロジェクト用に コードとドキュメントのホスティング サービスを無料で提供。」とありますが、jQuery.js ファイルも Google サイトに置いてあったことを思い出しました。( 開発者ホーム - Google Code

しかしこちらは色々とハードルが高そうな気がします。

更に、オンラインストレージに関して、概括的・具体的・網羅的な情報を提供してくれるこんなサイト( オンラインストレージを使ってみよう )もありました。

そしてたどり着いたのは infoseek です。今や楽天傘下に組み込まれているとは知りませんでしたが、こちらの無料ホームページサービスはファイル置き場を認めているらしいのです。

日本語でファイル置き場と言う用語に引っかかるサイトの多くは infoseek の登録 Homepage であることからも象徴されるように、infoseek の Homepage サービスをファイル置き場として活用している方が沢山いるらしいことも判明しました。

▲ToTop

というわけで早速 infoseek に Homepage 開設しようとして...But!

ユーザー登録を終えると「iswebライト新規登録時のご確認」画面が表示されますが、そこには「他サイトからのCGI及びデータの参照を禁止します。 」と書かれているではありませんか!

つまりファイル置き場には出来ない、と言う結論になります。

しかし一方ではいくつかのブログサイトで、ファイル置き場として使っていることを公言しているエントリイもあったりしますので、もしかしたら最近になって「置き場禁止」へと方針を転換したのかも知れません。うむ...。出鼻を挫かれてしまいました!

▲ToTop

そこで更にネット検索を重ねたところ...!!

あった。ありました!

メールアドレスとパスワードを登録するだけで容量制限なしで使えるという、超簡単ストレージが!
「 何の予告もなくファイルを全削除されました(08.1/1)。そして消えていたファイルが全て元通りになってました。何だったんだ?!(08.1/4) 」との記述が象徴しているように( 8倍速対応 | 無料無制限のオンラインストレージ-MediaFire )、何時消えてなくなるかも知れませんが、そのことを覚悟した上で( まさしく駄目元で )利用してみようかと思います。

容量制限なし、登録は超簡単な無料オンラインストレージ

早速アップロードしてみましたが、アップロードが終わるとメルアドとパスワードを入力する画面が表示され、Image Page URL とリンク HTML 文とが直ぐにゲットできてしまいます。

使用例1:例えば写真を登録してみました

Unlimited Free Image and File Hosting at MediaFire
(例)Media Fireに保存した写真

使用例2:jsファイル

firebug.js

しかし...

写真などをダウンロードするのは良いでしょうが、インクルード用 js ファイル置き場としては適さないことが分かりました。

ダウンロードしようとすると MediaFire サイトが開くのです。そしてウィルスチェックが自動的に行われ、その後画面をクリックして初めてダウンロードするようになるのです。これではjsファイルのファイル置き場としては実用的ではありません。

そこでブックマークレットの一部にMediaFireからインクルードするjsファイルを組み込もうと思いましたが、ファイル名が http://www.mediafire.com/?ymw9kjb0jig のように独自ネームに変えられてしまうため、これも駄目だと分かりました。

ということで、明るい展望は開けませんでした。

苦闘5時間の末に!

それでも食い下がった結果、苦闘5時間の末についに「発見し、利用を開始」しました───外部からリンクを貼りそれを参照可能な無料サービスを。このことについては次の Entry( ファイル置き場問題(2) 結局有料サイトしかないのか?! 否!Google Codeが! )で詳述します。

jQuery と FirebugLite を一括登録するブックマークレット

以前次のように書きました。

jQueryブックマークレット(=jQuerify)を利用する前提として、Firebug(firefoxの場合)又はFirebug Lite(IE、Operaの場合)を組み込む必要があります。前者の場合にはFirefoxのアドオンとしてBrowser自身に組み込めばお仕舞いで、簡単に jQuerify を利用することが出来ます。

一方、後者の Firebug Lite の場合には、jQuerify を適用するサイトに、Firebug Liteをインクルードしなければなりませんが、それを一々追加するのでは余りに面倒です。

そこで、Firebug Lite と jQuerify を同時にインクルードするブックマークレットを作成し、容易にインクルード出来るようにすれば便利なはずです。

ここに、jQuerifyブックマークレットにおいて使用する jQuery は、Google のファイル置き場に置いてあるので、そこへのリンクを貼ればよいのですが、IE 、Opera 及び safari 用の Firebug Lite の方は当該サイトに zip 圧縮ファイルがあるだけですから、自ブログサーバーまたは自サーバー等に展開したファイルを置く必要が出てきます。

この時に問題となるのは、Fc2ブログサーバーに置いたファイルに対して、別のドメインや他の fc2 ブログ頁からリンクを貼ることが認められてない、ということです。当然の措置ですが Fc2 はFc2ブログのファイル置き場を、外部サイトから利用する所謂「ファイル置き場」として利用することを、認めていません。

jQuerify.jsブックマークレットを利用したい in this Blog

先のエントリを記述した時点では、「ファイル置き場」を探して彷徨ったものの、適切なサイトを見いだせませんでした。そのため今回解決した 「jQuerify と firebugLite を一括してブックマークレットにする」ことを諦めていたのです。

▲ToTop

サーバーに FirebugLite を置き、その利用を認めているサイトがあった!───がしかし...

その後、あれこれと探す中で希少なサイトが見つかりました。展開した Firebug Lite ファイルを置き、その利用を認めているサイトがあったのです( WebOS Goodies )。そこで早速それを利用させていただくこととし、今回念願のブックマークレットを作成しました。

感謝! webos-goodies!

このエントリイでは、jQuerify と firebugLite を一括インクルードするブックマークレットを紹介させて貰いますが、IEには文字数制限がありますし、fireFox などの Mozilla 系ブラウザの場合には firebugLite をインクルードする必要はないので、それらを考慮して複数のブックマークレットを作成しました。

その後 webos-goodies の firebug は使用できなくなってしまいました。断りもなく勝手にリンクを貼ったことが失礼に当たってしまったのかも知れません。陳謝!

そこで別のファイル置き場を探してそこにfirebugを置くことにしました。

No1.簡易版ブックマークレット
( Firefox or Opera or IE 用. scriptタグの有無などを確認しない簡易版 )

まず、jQuerify と firebugLite を一括してインクルードするブックマークレット No1 を作成しました。文字数は 391 文字で IE6 における文字数制限 508 文字以内に納めるべく、ブラウザチェックやscriptタグチェックを一切行わない原始的なバージョンです。いくつかのサイト上で IE7、Firefox 及び Opera で動作を確認しました。

なお既に firebug が組み込まれている Firefox などでこのブックマークを実行すると、firebug 本体とは別に firebugLite が登録されてしまいます。こうした事態を発生させないために No2 を作成しました。

下のリンクをお気に入りに登録すれば使えます。
No1.簡易版 jQuerify + FirebugLite
No2.拡張版ブックマークレット( Firefox or Opera 用 )

上記のブックマークレットでも実用的に支障はないのですが、ブックマークを二度以上 click してしまうことも良くありますので、本来重複登録しないようにすべきです。また firebug 本体を組み込んだ Mozilla 系ブラウザにおいては、firebugLite を組み込む意味は皆無です。

そこでインクルード済みかどうかをチェックすると共に、Mozilla 系ブラウザの場合には firebugLite を組み込まないようにしました。つまり Firefox などの Mozilla 系ブラウザでは firebug は組み込み済みのものと仮定し、このブックマークレットを使う場合には、jQuery だけをインクルードするようにしました。

文字数は 543 で、いくつかのサイト上で Firefox 及び Opera で動作を確認しました。

なお、このブックマークレットは IE の文字数制限値 508 を越えていますので IE6 及び 7 では動作しません。このため、別途 No3 を作成しました。

次のリンクをお気に入りに登録すれば使えます。
No2:for Firefox or Opera, jQuerify + FirebugLite
No3.拡張版ブックマークレット( IE or Opera 用 )

script 存在を確認する機能を持たせた上で、IE でも動くような文字数制限ぎりぎりのコードを作成しました。文字数は 492 文字です。そのため性能を削らざるを得ず、具体的にはブラウザチェックを排除せざるを得ませんでした。

このため Mozilla 系でも動いてしまい、firebug 本体が組み込まれていても firebugLite をインクルードしてしまう欠点があるので、敢えて IE or Opera 用としました。

動作確認は IE と Opera 及び Firefox(Firefoxの場合には firebugLite が登録されてしまいますが)で行いました。

次のリンクをお気に入りに登録すれば使えます。
No3:for IE or Opera, jQuerify + FirebugLite
※ Opera の場合には IE 程の文字数制限はないようなので、 No2 、No3 のどちらでも使えます。

各ブックマークレットのコード

No1( script タグの存在有無を確認しない版 )

上のブックマークレットのコードは以下の通りです。分かりやすく改行等を入れました。

<div>下のリンクをお気に入りに登録すれば使えます。<a href="javascript:
(function(){
  // 文字数を減らすため最初に全ての変数を一括定義
  var%20h = document.getElementsByTagName('head')[0],
  s = document.createElement('script'),
  c = document.createElement('script');
  // jquery インクルード
  s.src = 'http://jqueryjs.googlecode.com/files/jquery-1.2.3.pack.js';
  s.type = 'text/javascript';
  h.appendChild(s);
  // ブラウザチェック(IE、Opera 及び Safari)
  if(/(msie|opera|webkit)/.test(navigator.userAgent.toLowerCase())){
    c.type = s.type;  // 文字数を減らすため複写出来るものはそれを活用
    // firebug Lite アドレス
    c.src = 'http://hkom007.googlepages.com/firebug-gp.js';
    h.appendChild(c);
  }
})()">No1.簡易版 jQuerify + FirebugLite</a></div>
No2( script タグの存在確認版で Firefox or Opera 用)

上のブックマークレットのコードは以下の通りです。分かりやすく改行等を入れ、また読みやすいようにスペースも入れました。

<div>下のリンクをお気に入りに登録すれば使えます。<a href="javascript:
(function(){
  // 文字数を減らすため最初に全ての変数を一括定義
  var x = 0,y = 0,h = document.getElementsByTagName('head')[0],
  t = document.getElementsByTagName('script'),
  s = document.createElement('script'),
  c = document.createElement('script'),i=0;
  s.type='text/javascript';  // これも文字数を減らすために二度表示しないように
  // script タグがあれば
  if(t){
    for(;i<t.length;i++){
      if( /jquery-/.test(t[i].src) ) x += 1;
      if( /firebug/.test(t[i].src) ) y += 1;
    }
  }
  // scriptタグがないか、又は
  // jquery 文字列がない場合の src = jquery.js の script タグ追加
  if (x==0) {
    s.src = 'http://jqueryjs.googlecode.com/files/jquery-1.2.3.pack.js';
    h.appendChild(s);
  }
  // Mozilla系ではなく、かつ scriptタグがないか、
  // 又は firebug 文字列がない場合の src = firebug.js の script タグ追加
  if ( !/mozilla/.test(navigator.userAgent.toLowerCase()) && y==0 ) {
    c.type = s.type;  // 文字数節約のためこうした
    c.src = 'http://hkom007.googlepages.com/firebug-gp.js';
    h.appendChild(c);
  }
})()">No2:for Firefox or Opera用, jQuerify + FirebugLite</a></div>
No3( script タグの存在確認版で IE or Opera 用)

No3 は No2 と以下の部分が異なるだけです。

No2:  if ( !/mozilla/.test(navigator.userAgent.toLowerCase()) && y==0 ) {
          ↓
No3:  if ( y==0 ) {

jQuery Ajax Utilities を活用して、任意のFc2ブログから情報を得たい。

自分のブログサイト以外で Ajax 通信したいが・・・

上のリンクにあるように、myBlog の任意の頁を開いた状態で、Fc2ブログサーバーのmy HTML または xml ファイルにアクセスして、過去/最新/未来のエントリイタイトル等を取得する術を自作しました。

作成してみて、改めて jQuery の素晴らしさ(使いやすさ、こうしたメソッドがあるかも知れないと思うと大体存在している気配りの深さと広さ、何よりも簡潔な記述を可能とする洗練)に感服しました。引き続き解読作業を進めていくことに、ますます意を強くした次第です。

さて、Ajax は同一ドメイン内における情報のやりとりを、頁をロードし直すことなく可能とするテクニックですが、それは Google がそうしているように、別に自分のサイトでなくても良い、ということに、今更ながらに気がつきました。

Google Map が Ajax 普及に火を付けたことは余りに有名ですが、Google Map の開発者でもなく、著作権などの権利を有することもない、Google 社と無関係な人が誰でも Google Map 上で Ajax 通信を使っているわけですから、Ajax 通信をそのサイト上で仕掛けることが出来さえすれば、そのサイトの管理者ではない第三者が、どんなサイトでも Ajax テクニックを利用することが出来るはずです。

そこで、それが可能となる条件を考えてみました。

  1. 当該サイトが Javascript を有効に出来ること(ユーザーがscriptタグを設置できないブログも多々ある)
  2. 当該サーバーのドメイン内しか処理対象とならないから、ドメイン越えでスクリプトを読み込ませるために、読み込ませるスクリプトファイルを置くサーバーが確保できること
  3. 出来れば jQuery が使える環境下にあること
  4. 出来れば、当該サーバーが提供している xml ファイルの URI が明らかになっていること(これは RSS 配信をしていれば簡単に入手できる)

等のはずです。

▲ToTop

しかし、Fc2 ブログサーバーは規約でファイル置き場には出来ない

早速試してみたいのですが、当面それは不可能です。何故ならば規約上 Fc2 ブログサーバーは所謂「ファイル置き場」には出来ないからです。従ってここで述べようとしていることは、Fc2 ブログ以外のファイル置き場として認められているサーバーに、所与のスクリプトファイルが置けなければ実現しません。

つまり技術的には別ドメインに Ajax 通信を行うように仕組むことは十分可能ですが、ファイル置き場がない限りそれはルール上出来ない、ということになります。残念!

以前もファイル置き場を探しましたが、「無料で」それが可能となるサイトは見つけられなかったので、以下に述べることは自分のファイルサーバーでも持たない限り夢と終わる話となります。

ファイル置き場が見つかった暁に実行する「夢」

その上で手順だけ夢見てみます。

  1. Ajax 通信を行うコードを作成し、これを jQuery.js と一緒にインクルードするコードを作る。
  2. これをブックマークレットにする。
  3. 当該ブックマークレットを任意のサイト上で実行する。

ここに問題となるのはブックマークレットに文字数制限があることですが、外部から読み込むファイル(下の例ではfoo.js)内に諸々の処理を記述するのであって、ブックマークレットでは外部から読み込むファイルを設定するだけですので、文字数制限は障害にはなりません。

そのブックマークレットは以下のようになるはずです。

※ 仮想のファイルを使った例示ですので決して動作しません。また既に必要なscriptタグが存在している場合の分岐処理は未作成です。

<a href='javascript:(function(){
var head=document.getElementsByTagName("head")[0],
script = document.createElement("script");
script.setAttribute("src","http://jqueryjs.googlecode.com/files/jquery-1.2.3.pack.js");
script.setAttribute("type","text/javascript");
head.appendChild(script);
script = document.createElement("script");
script.setAttribute("src","http://fileServerAddress/foo.js");
script.setAttribute("type","text/javascript");
head.appendChild(script);
})()'>Do! Ajax 通信</a>

ファイル置き場からインクルードするjsファイルに、jquery.js をインクルードするコードも盛り込んでしまえばよいのですから、もっと短くするべきでしょう。折角だからインクルード済みかどうかもチェックするのがベターでしょう。

上のコードを改善したブックマークは以下のようになるでしょう。

<a href='javascript:
(function(){
  var%20h=document.getElementsByTagName("head")[0],
  t = document.getElementsByTagName('script'),
  s = document.createElement("script"),
  i = 0, x = 0;
  if (t) 
    for(; i<t.length; i++)
      if( t[i].src.indexOf('foo.js') != -1 ) x += 1;
  if (x == 0) {
    s.type = "text/javascript";
    s.src = "http://fileServerAddress/foo.js";
    h.appendChild(s);
  }
})()'>Do! Ajax 通信</a>

上の foo.js ファイル内において、Ajax 通信を行いその結果を表示するようなメソッドを記述しておき、当該ファイルがインクルードされると同時に、そのメソッドを実行させるようにすれば、例えば最新10エントリイリスト、過去の10エントリイリスト等々を表示させることが可能となります。foo.js内で1つの絶対配置ボックスを用意し、その中にいくつかのボタンを設けて、様々な Ajax 通信結果を表示させることも可能となるでしょう。

また、xmlファイルではなく HTML ファイルにアクセスすれば、過去1ヶ月間、1年間などのエントリイタイトルリストをゲットすることも可能でしょう。

Firebug Liteをサーバーに置いて提供しているサイトがあった

Fc2ブログのMyファイルサーバーに置くことはやめたのです

何故ならばそのようにしてこのブログ以外からアクセスして利用することになった場合、Fc2の規約に違反する虞があるためです。

そこであれこれと無料サイトでファイル置き場として使えるものはないだろうか、と探したのですが、適当なものが見つからないため、Firebug Liteのブックマークレット作成は諦めていたのです。

ところが、あるサイトでそれが得られることが分かりましたので、早速使ってみようかと思います。

そのサイトとはFirebug Lite をブックマークレット化しました - WebOS Goodiesです。

こちらのサイトを開くとブックマークレットが掲載されていますので、それを利用者のブラウザのリンクバーに置けば、簡単にFirebug LiteをどのサイトでもIEや、Operaで使えるようになる訳ですから、大変便利です。

感謝!WebOS Goodiesさん!

エントリイの前後が表示されない問題

それはFirebug Liteをアップロードしてから始まった。

任意のサイトをIEで閲覧している時に、jQueryfyブックマークレットを使って当該サイト上でjQuery.jsを使えるようにし、かつFirebug Liteをもインクルード出来ないか───と思い、Firebug Lite.zipを解凍したファイル全てを、このブログサーバーにアップロードしました。

その後このブログ上で、ではなく自分のローカルPC上のHTMLファイルにFc2ブログサーバーからFirebug Liteをインクルードしようとしたのです。

すると、数回繰り返してからこのブログの表示がおかしくなり始め、その後このブログ内でページを遷ろうとすると必ず表示できないエラーが発生するようになりました。

そして気がついたのです。この行為は規約違反であるということを!

いわゆる「ファイル置き場」として利用してしまった

無意識に、Fc2ブログサーバーをローカルPCから呼び出すファイルサーバーにしてしまっていたのです。

早速Fc2にメールを出し、違反を詫びると共にこうした過ちを繰り返さないことを約束したのです。

すると数日後にFc2からメールが来ました。そこには、支障なく見えていること及びファイル置き場として利用してしまったファイルを削除すべきこと、が書いてありました。

この後者の指示を受けて早速当該ファイルを削除したところ、やっと問題が解決したのです。

▲ToTop

お詫び

ここ一週間ほどの間に閲覧された方には、閲覧障害というご迷惑をお掛けして場合もあったかと思います。その理由は以上の通りですので、この場を借りてお詫びしたいと思います。

オンラインファイル置き場はGmailでも無理でした。

関連エントリイリスト in this Blog

firebug.js のファイル置き場を探して・・・

直前のエントリイで書きましたが、オンラインでファイルにアクセスできる無料のファイル置き場が欲しくなりました。有料のファイル置き場としては、Just System の インターネットディスク等が有名ですが、2893 MB もの巨大容量(GMail)が無料で提供されている今日、敢えて有料サイトを選択する必要はありません。(セキュリティ上の問題から有料サイトを選択する道はあるかもしれませんが。)

そこでGmailの巨大容量をファイル置き場としても利用する方法を色々調べてみました。

しかし結論から言えば、この方法も無理なようです。

Gmail Shell Extension や Gmail File Space (gspace) など

これらが有名なようですが、どちらもマイコンピュータ上に仮想ドライブを構成してExplorerから利用するのですから、Homepage上のリンク先としてのファイル置き場にはなり得ないと思います。

またこんなファイル置き場(ファイルバンク【FILEBANK】-無料でファイル保管・送信・シェアができる-)もありますが、7日間無料保管、つまり8日以降は有料になってしまうため、リンク先ファイルの置き場としては使えません。敢えて有料でも良しとする置き場を欲しない限り・・・。

GmailにfirebugLiteの全ファイルをメールで送ってみた

次に、Gmailにmail送信したFirebugLiteファイルのuriに対して、IEとOperaにおいて下記のコードを試してみましたが、これも成功しませんでした。

試してみた自作のブックマークレットは以下の通りです(可読性を高めるために適当に改行やインデントを挿入しています)。

javascript:(function(){
  var%20d=document.getElementsByTagName('body')[0];
  var%20s=document.createElement('script');
  s.setAttribute('src','http://jqueryjs.googlecode.com/files/jquery-1.1.4.pack.js');
  d.appendChild(s);s=document.createElement('script');
  s.setAttribute('src','http://mail.google.com/mail/xxx');   d.appendChild(s);alert('using jQuery & Firebug Lite!');
})();

ここに「http://mail.google.com/mail/xxx」は、 firebug.js をメール添付ファイルとして自分のGmailアドレスに送信し、その後に取得したその添付ファイルのurlです。

結局複数の一連のfirebugLiteに係るファイルが連動しているのに、その中の特定のファイルであるfirebug.jsにだけリンクを貼っても動かないということでしょう。やはりサーバー内のフォルダを管理出来る状態のURIが記述できない限り、無理なのでしょう。

解決策は・・・

ジャストシステム(インターネットディスク)やsony(Webpocket)の有料レンタルサーバーも調べましたが、単なるファイル置き場としての活用方法は沢山説明されているものの、Homepageのリンク先であるファイル置き場の説明はほとんどなく、そのような使い方が出来るのかどうか分かりませんでした。

自分のWebサーバーを持てば解決しますが、リンク先ファイル置き場のために敢えてWebサーバーを立ち上げるほどの時間も気力もありません。

というよりも、結局jQuery.jsをfirebugを使って色々試したい場合には、Firefoxを利用する、Firefoxだけを利用する、と言う選択肢が賢明なのでしょう。このケースではIEやOperaに拘るのは愚かな選択肢というべきでしょう。

jQuerify.jsブックマークレットを利用したい

jQuerifyブックマークレットを改訂

jQueryを勉強する上で、Firebugは欠かせないツールです。そしてFirebugを利用して、任意のサイト上でjQueryを試すことの出来るjQuerify.jsブックマークレット(Learning jQuery :jQuerify Bookmarklet)は大変重宝する優れものです。

元々FirebugはFirefoxのアドオンとして開発されましたが、IEやOperaでも一部の機能を利用できるFirebug Liteが開発されている(Firebug Lite)ので、jQuerify.jsブックマークレットもこれらのBrowserでも利用できます。

但し、オリジナルのjQuerify.jsブックマークレットは名前空間を汚染する可能性があり、またリンク先のjQueryのバージョンは1.1.3.1であり、既に1.1.4が公表されているため、次のように無名関数を利用し、リンク先を最新版へのものへと改訂し、メッセージもちょっと変えてて利用することにしました。

jQuerify.js ブックマークレット改訂版(無名関数利用)のコードは以下の通り

javascript:(function(){var%20s=document.createElement('script'); s.setAttribute('src',%20'http://jqueryjs.googlecode.com/files/jquery-1.1.4.pack.js'); document.getElementsByTagName('body')[0].appendChild(s);alert('using jQuery1.1.4!');})();

jQueryブックマークレットの利用

jQueryブックマークレットを利用する前提として、Firebug(firefoxの場合)又はFirebug Lite(IE、Operaの場合)を組み込む必要があります。前者の場合にはFirefoxのアドオンとしてBrowser自身に組み込めばお仕舞いで、簡単にjQueryブックマークレットを利用することが出来ます。

しかし、後者のFirebug Liteの場合には、jQueryブックマークレットを適用するサイトに、Firebug Liteをインクルードしなければなりません。しかしそれを、一々追加するのでは余りに面倒です。

そこで、Firebug LiteとjQuerifyを同時にインクルードするブックマークレットを作成し、容易にインクルード出来るようにすれば便利なはずです。

(for IE & Opera)Firebug LiteとjQueryを同時にインクルードするためのブックマークレットはFc2サーバーには置けない

それは先のjQuery.jsに、firebug.jsをインクルードするコードを追加するだけで簡単に出来るはずです。しかしここに大きな問題が1つあります。jQuery.jsのように、サイト上に圧縮しないそのままjsファイルがおいてあれば良いのですが、Firebug Lite の場合、当該サイトにはzip圧縮されたファイルしかありません。そのためどこか別の場所にfirebug.jsを置いておいて、そこからインクルードするようにしなければなりません。

Fc2ブログはファイル置き場を認めていません。従って、そこにファイルを置いて自分のPC上のファイルからアクセスしたり、他の方が利用する場合にはFc2ブログ利用上のルール違反となってしまいます。firebug.js をmyFc2サーバー上に置き、それをmyFc2ブログ以外から利用することは出来ません。

従って、firebug.js はファイル置き場として利用できるWebサーバーに置くか、自分のローカルPC上に置くしかありません。しかし、後者の方法を試してみましたがそれは駄目でした。ローカルPCにリンクするようなブックマークレットはうまく作動しませんでした。一方、ファイル置き場として使えるWebサーバーは知りませんし、また自分のサーバーは持っていません。

従って、firebug.js をネット上からインクルードするブックレットの作成は諦めました。

もしかしたら、巨大なGmailサーバーをオンラインファイル置き場として利用できるかもしれませんが、まだその方法は試していません。

 90%近いシェアを握っているインターネットエクスプローラの描画エンジンを利用したタブbrowser。沢山のタブbrowserがあるが、多機能、カスタマイズフリー、スクリプト利用等で一日の長がある。Gekkoエンジンへの対応も行われ、IEからの自立独立の方向に向かっている。2005年7月にはIE7が登場する見通しの中で、今後の発展が望まれる。

 多様なCSS作成支援機能を備えた、タグ入力式 HTML&CSS作成支援エディタ。スキンデザインもすっきりしている。テキストエディター上で作成するよりも確実で安全にタグ打ちが出来る。
文字コードを選べないのが欠点。

 StyleNote同様のタグ入力式 HTML&CSS 作成支援エディタ。長年使用してきたが現在StyleNoteに乗り換えつつある。

 クリップボード履歴情報を活用する為のソフト。画像まで履歴を取ってくれるのが嬉しい。このソフトを使わない日は絶対ない程に重宝し、愛用している。

 起動中のウィンドウの「コピーできない」説明文などの文字列を取得し、コピー可能な文字データにするツール。何かと便利。

 ストリーミングデータを保存することが出来るソフト。動画利用には不可欠なソフトだ。

 無料ながらレイヤー機能を有し、スクリプトによる拡張も可能な、sleipnir作者が提供している優れもの画像編集ソフト。

 画面キャプチャソフトと言えばこれに勝るものなし、ではないだろうか? 様々な取得方法を有しており、ブログ作成にもHomepage作成に不可欠だ。Jtrimと並んでWoodyBellsの作品。

 複数ファイルの同時編集は出来ないが、透過pngも作れる画像編集ソフト。
(以下当該サイトから抜粋)初心者にも簡単に操作が出来るフォトレタッチソフトです。多くの加工機能で画像に様々な効果を与えることができます。非常に軽快に動作するため、ストレスなく操作できます。

 Animation Gifファイルを作れる無料ソフト。

 キャプチャソフト。画面内にサイト全体が表示しきれない場合でも、これを使えば全体をキャプチャすることが出来る。

 画像処理。画像のフォーマット変換のみならず、色数やサイズ、圧縮率の変更まで一括処理できてしまう『BatchGOO!』は、大量の画像をまとめて処理したいときに大変便利なソフト。BMP, TIFF, JPEG, PCX, PNG の相互変換をはじめ、色数・サイズ・解像度の統一、JPEG圧縮率の調節など、ホームページ用の画像や携帯電話用の壁紙を揃えるのに抜群の相性を見せる。(Vectorの当該ソフト紹介頁より抜粋引用)

 名前から直ぐに想像が付くように画像のサイズを測るためのソフトだ。Homepage作成には欠かせない。2カラム、3カラムのレイアウトを行う場合に大変重宝する。

 ランチャーソフトは沢山あるが、中でもこれが一押しだ。2年以上使ってきたがその操作性には毎日満足している。これを使い始めてからデスクトップには一切のアイコンを表示することをやめてしまった。

 AdobeReader7によって、起動時間が長すぎるという長年のユーザーの不満はある程度解消した。そのためこの高速化ソフトは存在価値が低下してしまったかもしれない。AdobeReader6迄はこのソフトによる起動高速化で恩恵を受けてきた。

 IE専用が難点だが、様々なサイト内でIDやパスワードを入力するのに重宝するソフト。コンテキストメニューから簡単に起動できるのがGood! sleipnir等のIEの描画エンジンを利用しているブラウザでも使える。

 利用しているパソコンの諸元値を取得するには、このソフトがベストだ。インストール済みソフトの一覧が取得できるのも嬉しい。

 WMPは機能が豊富なだけ重い。RealPlayerも同様だ。そこでMedia Player Classicを使いたい。動作が軽快なだけではなく、対応しているファイル形式もすこぶる多く、これひとつで、wmvもrmも表示できてしまうのだから凄い! 数多あるMedia Playerの王様と言えるだろう。

 自宅でPCを起動しているときには必ず起動しているメディアプレーヤー。何かと過剰なWinampよりも、起動も速くスキンはシンプルだ。

 DivX, Xvid, Mov, Vob, Mpeg, Mpeg4, avi, wmv, dv, などの動画をDVD-Video形式に変換できるフリーソフト。クリックするとDVD関連ソフト紹介サイト=「DVDなToolたち」なるHomepageが開きます。

----------
201012120329
200807050116
200804011946
200803230159
200803230145
200803221916
200803220944
200803180910
200803120931
200803100150
200803092205
200803060108
200803032357
200709102123
200708310708
200708261210
200708251245
FC2 Management
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。