02 | 2008/03 |  04

  1. 無料サーバー

search phpbb-phpbb-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut

anything from here

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


フレッツの場合において、OS起動時にPPPoE接続でインターネットに自動接続するための要点

1. 広帯域接続の作成

これについては例えば次のようなプロバイダサイトの絵入りマニュアルが分かりやすい。

しかしながら、これらのプロバイダサイトのマニュアルでは、アプリケーションソフト起動時にインターネットに自動接続する方法について触れているものの ( 正確に言えば nifty サイトのマニュアルではその点は全く触れられていない。何とブラウザやメールソフトなどのアプリケーションを利用する時に、手動でネットに接続することを前提としたマニュアルとなっている。)、OS 起動時にインターネットに自動接続する方法については、全く触れていない。

インターネット常時接続時代においては、パソコン起動=インターネット接続が当たり前であり、本来、そのような使い方を想定したマニュアルにすべきだ。

▲ToTop

2. OS起動時にインターネットに自動接続するようにする設定

ブラウザもメーラーもいずれも起動していなくても OS が起動したら自動的にインターネットに接続するようにしてこそ、常時接続の意味があるというもの。例えばOS起動直後にまず Internet radio からの音楽を楽しみたい、という使い方もあるので、インターネット接続を OS 起動時に自動的に行うことが好ましいのだ。

まず、フレッツ接続ツールを使う場合の方法については、 NTT西日本 | フレッツ | よくあるご質問 に、画像はないが言葉だけによる説明がある。

一方、PPPoE接続の場合における同様のマニュアルはプロバイダサイトでは適当なものが見あたらない。

あったとしてもインターネットエクスプローラや OutlookEdxpress 起動時に自動接続するマニュアルであって、OS 起動時の自動接続に関するものではない。

作成した接続のプロパティ - オプションにおいて、「名前、パスワード、証明書などの入力を求める」のチェックを外すことが重要なポイントなろう。

上の設定だけでも自動接続にはならないが、上の設定を終えた後に Windows を起動すれば起動時に接続ダイアログが表示されるので、その中の「自動接続する」のチェックボックスをその段階で on にすれば、それ以降の Windows 起動時にはインターネットに自動接続される。

こうして、フレッツ光サービスによるインターネット接続を利用している場合において、Windows起動時に自動的にインターネットに接続出来るようになる。

▲ToTop

PPPoE接続に影響する Windows Service

次の4つのサービスがPPPoE接続に関わる決定的な影響をしっかり踏まえておく必要がある。

  1. Telephony……説明には「テレフォニー デバイスと IP ベース音声接続を制御するテレフォニー API (TAPI) を供給します。ローカル コンピュータと同様、このサービスを実行しているサーバーを LAN をとおして制御できます。」とある。要はダイアルアップ接続( PPPoE接続はこれに該当する )を使用するには、このサービスが開始されていなければならない。
  2. Remote Access Connection Manager……説明に「ネットワーク接続を作成します。」とあるように、これが「開始」状態になっていないと、新しい接続を作成することが出来ない。なおこのサービスはTelephonyサービスに依存しているので、Telephonyサービスが開始されていなければならない。
  3. Remote Access Auto Connection Manager……説明には「プログラムがリモート DNS、NetBIOS 名または NetBIOS アドレスを参照するときに必ず、リモート ネットワークへの接続を作成します。」とある。不要なサービスを停止する -[Di]によれば、「IE以外のソフトから自動的にダイアルアップ接続をするものなので、ダイアルアップの人は手動」に設定する必要があるようだ。Remote Access Connection ManagerとTelephonyに依存している。
    しかし、browser起動時にネットに接続するのではなくOS起動後に自動的にネットに接続する用に設定した場合にはこのサービスは不要となるはずだ。
  4. Remote Procedure Call(RPC)……説明には「エンド ポイント マッパーや各種の RPC サービスを提供します。」とある。エンド ポイント マッパーなんて何の事やらさっぱり分からないが、ASCII24 - アスキー デジタル用語辞典 - RPCによれば、RPCとは「ネットワーク上の異なるマシンで処理を実行する手続き。あるいはそのプロトコル。分散コンピューティング環境の基盤となる技術」とある。
    そしていくつかのサイトを覗いてみた限り、このサービスは有効にしておいた方が賢明なようである。

またしてもログイン出来ない状態が出現! Fc2さんこれでは困ります!

3月30日午後12時前のこと

新記事を投稿しようとしたところ、「込みいっています。しばらくしてから改めて・・・」とのメッセージが表示され、新規投稿も過去記事の編集も出来ない状態となりました。

数日前の深夜(22〜24時の時間帯)にも同様の現象が発生したのですが、まさか日曜日の真っ昼間にログイン出来ないほどにサーバーが混雑しているとは吃驚です。

余程アクセスの多いサイトがあるためなのか、別の原因があるのか分かりませんが、まるで繋がらないテレホンテクニカルサポートのような現象が、連続して出現していることに、驚くと共に、幻滅しています。

このようなことが頻発するのであれば、別のブログサービスに乗り換えることも視野に入れた対策を検討せざるを得なくなります。

最も自由度が高く、つまりユーザビリティの高いブログサービスとして、気に入っているのですが、今回のようにログインしたい時に出来ない状態が繰り返されると、サービスの基本的な要件として失格です。

何とかして欲しいものです!

ウィルスチェックソフトがおかしくなってしまった!

Internet Security 2007 が突如としておかしくなってしまった

数日前からエラーが出ていたが、昨晩遅くになってついに LiveUpdate が事実上出来なくなってしまった。

流石にウィルスチェックソフトなしでネットを徘徊する訳にも行かないので、 Internet Security 2007 が推奨する作業を進めてみた。そして何の気なしに行った作業によって何とInstallされているInternet Security 2007 が全て削除されてしまったのである。

作業を開始してから、あれおかしい、もしや削除行為が進行しているのではないか、と懸念し、驚愕し、焦燥した時には既に遅かった。完璧にそれは削除されてしまったのである。

1年以上前にそれを購入した時にダウンロードしたファイルのバックアップは取ってなかったので、改めてダウンロードしようとしたが60日を経過するとダウンロード出来ない旨の、御宣託がSymantecサイトに書いてある。

ということは折角パターンファイルの更新を有料で期間延長したばかりだというのに、2008を買うしかないのか?!?!?!───そんな馬鹿な!

▲ToTop

Symantec社の対応には納得がいかない

期限切れになる15日程前にメールで自動更新するかどうか問い合わせるメールが来た。正確に言えば来ていた。気がつかなかったのだ。

そして10日程すると何と 5000 円以上の課金をされて自動更新されてしまったのである。

最新バージョンを購入しようか、と思っていた矢先に一遍のメール通知だけで強引に自動更新してしまうなんて、あまりにも殿様商売ではないか!

そもそも以前から、Symantec社の対応には怒りを感じていた。一言で言えば不親切極まりないのである。2008について日経パソコンでは如何にメモリを食わないか、起動が速いかを得々と宣伝しているが、裏返せば2007まではメモリを大量に消費し、起動も遅かったと自白しているようなものだ。

ホームページも極めて分かりにくいし、エラーがあった時の詳細情報は、正直なところ、その内容を理解出来るユーザーがどれ程いると思っているのか、根本的に抗議したいほど難解である。

・・・とSymantec 社への怒りを綴っていると際限がないので、ここで主題に戻ろう。

▲ToTop

自動更新したばかりなのに2008を買うなんてあり得ない!

意地でも買いたくない。本来ならばセキュリティソフトの乗り換えを検討していたのだから。

しかし、ではどうすればよいのか?

Internet Security 2007 は削除してしまったし、ダウンロードしたファイルはコピーを取っておかなかった。つまりこのままでは Internet Security 2007 を再インストールすることは不可能であり、追加購入するしかないのか?!

否否!!断じて否!

こんな時のためにもまた、イメージバックアップが生きてくるのだった。

半年前にバックアップしておいたC:ドライブを復元し、その後必要なUpdateを繰り返せば、Internet Security 2007 が生き返るのではないか?!

そしてそれは成功した!イメージバックアップ様々なのだ

数時間を要したが、Microsoft Update と Internet Security 2007 のパターンファイル Update を無事終えることが出来、今こうしてネットに接続したパソコンに向かって文章を綴り、メールチェックを行い、サイトサーフィンも普段通り行っている。

イメージバックアップをしてあったお陰で、故障する前の時点の正常に作動していたInternet Security 2007 を復元し利用することが出来たのである。

感謝 イメージバックアップ!

blog1serverが混雑でアクセスできないのは迷惑なことである!

 ここ数日午後10時から11時の間、殆どアクセスできない状況が続いている。blog1へのAccessが集中しているらしいのだ。
 これはおそらくblog1サーバー内に人気の高いブログがあって、そこへのAccessが集中するために発生する現象だと思われるが、迷惑千万な話である。

 そうしたAccessが集中するブログが有る場合には、何らかの対応をFc2で取ってくれないと、他のユーザーが迷惑してしまう訳で、善処を強く希望したい。

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
  • コードの抜本改訂とファイル置き場利用版up:2008/7/9
  • (再改訂)Ajax通信関連部分を更に抜本改正:2008/7/12
  • (再々改訂)Ajax 通信関連部分でflagを追加して確実性を向上:2008/7/15

他ブログ上での Ajax 通信をついに実現

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

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

もう少し具体的に述べると、次のことを実現しました。

  1. 4 つの js ファイル(今回は次の4ファイル:1. jQuery.js、2. firebug.js、3. Ajax 通信を履行する自作の js ファイル、4. Ajax 通信結果を表示するための css ファイル)を一括してインクルードするための js ファイル( setjQnFbug_getFc2EntTts.js )を作成し、この js ファイルの実行によって 4 つのファイルの全てまたは一部をインクルードする。
  2. Ajax 通信はもちろんのこと随所に jQuery.js を多用してコードを実行するため、jQuery.js が組み込まれていないブログの場合も想定し、なければそれをインクルードするようにした。
  3. setjQnFbug_getFc2EntTts.js をインクルードするためのブックマークレット(BMsetScriptTag.html)を作成する。
  4. BMsetScriptTag.html をブックマークに登録し、閲覧したい Fc2 ブログを開いてこのブックマークを実行する。

以上により、Fc2のブログであれば何であれ、jQuery を活用して Ajax 通信を行い、エントリイタイトル情報を取得することが出来るようにしました。

▲ToTop

ファイル置き場は Google Page を活用

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

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

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

───と、いくら批判し、嘆いていても仕方ないので、調べた中で、無料で容易にファイル置き場として利用できる Google Page ウェブサイトを活用していきたいと思います。

Google page 上にマイページを立ち上げ、そこに関連ファイルを置いて自作ブックマークレットを作動させその成功を確認し、この頁の少し下にその成功したブックマークレットを置きました。

何をしたのか?───今回のプロジェクト「他ブログエントリイタイトル取得」について

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

あるFc2ブログサイトの或るエントリイ頁を開いた状態で、ブックマークを起動すれば、以前、最新及び以後の各10個のエントリイに係る諸情報(具体的にはタイトル、Entry番号、投稿日など)を表示すると共に、jQuery と firebugLite を使用することが出来ます。

ファイル構成

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

  1. ブックマークレット……次の setjQnFbug_getFc2EntTts.js を登録するため
  2. スクリプト登録用JSファイル( setjQnFbug_getFc2EntTts.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通信結果を固有に用意した絶対配置要素内で表示させるために、各ブログに依存しない固有のスタイルシートを用意)

これらのファイルの内、今回独自に作成した3つのファイル( setjQnFbug_getFc2EntTts.js、getFc2EntryTitles.js 、getFc2EntryTitles.css )と firebug.js を GooglePage サイトに upload した上で、setjQnFbug_getFc2EntTts.js 内から、jQuery.js を含む他の 4 つのファイルにリンクを貼ってインクルードするようにしました。なお、jQuery1.2.6pack.js は、既定のファイル置き場(これは Google Code 上にあります)にあるファイルを利用するよう、setjQnFbug_getFc2EntTts.js 内で記述しました。

▲ToTop

利用

ブックマークレット

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

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

Ajax 通信をやり直すボタン( ReLoad Data ボタン )も設置しましたし、結果を表示する小窓が邪魔になったら、隠蔽することも出来るようにしました。更に、小窓を隠蔽した場合には、ブックマークレットを再起動すれば、隠蔽直前の状態で小窓が復帰するようにしました。Ajax 通信結果は閲覧中の頁がリロードされない限りメモリ上に残る仕様としたのです。

次のリンクをお気に入りに登録しておけば、任意の Fc2 ブログサイトで共通して使えます。また、単にクリックするだけでも、今ご覧戴いているこのエントリイを対象として利用できます。

全ての起点となるブックマークレット :
Ajax 通信結果の表示

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

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

上の図は既に Ajax 通信が終わった状態の画像ですが、5つのボタンは左から順に「今見ているエントリイの前の10個のエントリイタイトル表示、最新の10エントリイ表示、今見ているエントリイの後に投稿された10エントリイのタイトル表示、Ajax通信再実施、小窓の隠蔽」を行うためのものです。

例えば「 Before 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ファイル説明

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_getFc2EntTts.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. jsファイルの一括インクルードを行う

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

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

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

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

// このスクリプトがインクルード済みの場合に関数が起動できるよう
// 名前付き関数とし、最後の行でこの関数を起動する。
var chkScript = function(){
  var x=0,y=0,z=0,w=0,i=0,
    h=document.getElementsByTagName('head')[0],
    t=document.getElementsByTagName('script'),
    l=document.getElementsByTagName('link'),
    s=document.createElement('script');
  s.type='text/javascript';
  // jquery、firebug 及び getFc2EntryTitles の文字を含むスクリプトタグを走査し、
  // 存在していればそのことを記録する。
  if(t) for(;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)) {
      z+=1;
      // ブックマークレットが複数回起動された場合の処理
      // インクルード済みで結果表示小窓が非表示ならば表示する
      var tmp = document.getElementById("ajaxPopup");
      if (tmp && tmp.style.display == "none") tmp.style.display="block";
      // 結果表示小窓が表示済みならば、何もしないでこのjsファイルのコード進行を終える
      if (tmp && tmp.style.display == "block") return;
    }
  }
  // 所定のスタイルシートがインクルード済みかどうか link タグ走査し、あれば記録。
  if(l) for(i=0 ;i<l.length; i++)  {if(/getFc2EntryTitles/.test(l[i].href)) w+=1;}

  // jQuery.js のインクルード
  // jQuery.js は単に firebug Lite から利用するだけではなく、Ajax通信やその取得結果を表示するコードで
  // 多用するためにインクルードします。
  // なお、軽量化のためにpack版を利用するようにしました。
  if (x==0){
    s.src='http://jqueryjs.googlecode.com/files/jquery-1.2.6.pack.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)
  }
  // getFc2EntryTitles.js のインクルード
  if (z==0){
    var r=document.createElement('script');
    r.type=s.type;
    r.src='http://hkom007.googlepages.com/getFc2EntryTitles.js';
    h.appendChild(r);
  }
  // CSSファイルのインクルード
  if (w==0){
    var k = document.createElement('link');
    k.rel = "stylesheet";
    k.type = "text/css";
    k.media = "screen, print";
    k.href='http://hkom007.googlepages.com/getFc2EntryTitles.css';
    h.appendChild(k);
  }
  // 無名関数としなかったのは再呼び出しがあり得るからです。
};chkScript(); //関数実行

▲ToTop

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

取得結果を絶対配置要素内に表示させるために、CSS ファイルを作成しました。

これによりどんな Fc2 ブログであっても同様な結果表示を行うことにしました。

@charset "euc-jp";
#ajaxPopup{
	position:absolute; z-index:100000; top:150px;left:50%;
	width:600px; margin-left:-300px;
	font-size:small; padding:0.5em;
	background-color:#def;
	text-align:left; border:2px #777 solid; color:black;
	display:block;
}
#pasteData {clear:both; color:black;}
#pasteData a:link{color:blue; text-decoration: none;}
#pasteData a:visited { color: purple; text-decoration: none;}
#pasteData a:hover {
	color:black;
	background:#dd0; 
	text-decoration: none; 
}
#pasteData a:active { color: darkgreen; text-decoration: none;}

.btn {
	width:120px;
	float:left;
	margin:2px;
	padding:2px;
	border:1px black solid;
	font-weight:bold;
	color:white;
	background-color:#89A;
	text-align:center;
}
#menuBlock {float:left;}
#closeThis {
	float:right;
	width:20px;
	margin:2px;
	padding:2px;
	border:1px black solid;
	font-weight:bold;
	color:white;
	background-color:#89A;
	text-align:center;
}

▲ToTop

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

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

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

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

  1: /* getFc2EntryTItles-gp.js
  2:  * 2008/7/15 Release
  3:  * Ajax通信結果要素内配置版
  4:  */
  5: 
  6: // fc2ブログでかつ個別Entry表示モードの場合にのみコードを進行する。
  7: if (location.href.indexOf("fc2")!=-1 && location.href.indexOf("blog-entry-")!=-1){
   // 実行コード全体を無名関数で包含する
  8: (function($){
  9:  var aP,ld,fn,r_c,r_b,r_a;
 10:  var html = { before:[], after:[], recent:[] },getStr ={ before:"", after:"", recent:"" }, 
    blogTitle =null, regExpr = "",itval,border={ before:0, after:0},
    realElm={before:0,after:0},thisEntryNo=Number(1), lastNo;
 11: 
 12:  // 取得結果表示用のタグを作り表示する。
 13:  if ( !aP ) { // 存在しなければ
 14:   $(document.body).append( // 以下のタグを document.body 内に追加する
 15:    '<div id="ajaxPopup">'+
 16:     '<div id="menuBlock">'+
 17:      '<div id="before" class="btn">Before Entries</div>'+
 18:      '<div id="recent" class="btn">Recent Entries</div>'+
 19:      '<div id="after" class="btn">After Entries</div>'+
 20:      '<div id="reload" class="btn">ReLoad Data</div>'+
 21:     '</div>'+
 22:     '<div id="closeThis">'+decodeURI("%C3%97")+'</div>'+
       // 通信中、通信終了、以前/最新/以後エントリイタイトル名表示などの各種情報表示用タグ
 23:     '<div id="pasteData">'+
        // 通信中であることを表示するタグ
 24:      '<div id="loading"><img src="http://blog1.fc2.com/h/hkom/file/loading_16.gif" width="16" height="16" border="0" alt="" /> Now Loading...</div>'+
        // 連続する Ajax 通信の全てが終わったことを表示するタグ
 25:      '<div id="finish"><strong>Finish Ajax Communication !</strong></div>'+
        // 以前エントリイタイトル名等を表示するタグ
 26:      '<div id="resultbefore"></div>'+
        // 最新エントリイタイトル名等を表示するタグ
 27:      '<div id="resultrecent"></div>'+
        // 以後エントリイタイトル名等を表示するタグ
 28:      '<div id="resultafter"></div>'+
 29:     '</div>'+
 30:    '</div>'
 31:   );
 32:   // 表示/非表示を操作するために必要な要素をショートカット変数に代入する。
 33:   aP=$("#ajaxPopup"); ld = $("#loading"); fn = $("#finish");
 34:   r_c = $("#resultrecent");r_b = $("#resultbefore"); r_a = $("#resultafter");
 35:  } else {
     // 結果取得済みの時にはそれを表示するだけでコード進行を終える。
     // これはブックマークレットが再度クリックされた場合への対応策
 36:   aP.show();
 37:   return;
 38:  }
 39: 
 40: // 最近のタイトルを取得する関数を定義
 41: var makeRecentEntryList = function (limit){
	  // getStr.recent が存在し、かつ空でない場合
 42:  if (!!getStr.recent && getStr.recent!="") {
     // それを表示してこの関数を終える
 43:   $("#pasteData").html(getStr.recent).show();
 44:   return;
 45:  }
 46:  var No, subject, date, iter=0, ret=[],
 47:   target ={  //xml ファイル内での順番
 48:      link:[],     //0
 49:    title:[],     //1
 50:  // description:[],  //2  :今回は使用しない。
 51:  // content:[],    //3  :今回は使用しない。
 52:     subject:[],    //4
 53:    date:[]      //5
 54:   };
 55: 
 56:  // エントリイタイトルを取得する
    // limit 個数のエントリイタイトル情報を Ajax 通信によって取得する。
    // 閲覧中のFc2ブログの xml ファイルのアドレスを設定する。
 57:  $.ajax({
 58:   url: /http:.+fc2\.com\//.exec(location.href)[0] + "?xml" || null,
 59:   type: "GET",
 60:   dataType: "xml",
     // xmlファイルが成功裏にダウンロード出来た場合の処理関数
 61:   success: function(xml){
      // 「ありません。」の encodeUTI 文字列
 62:    var tmpStr = '<div>'+decodeURI("%E6%9C%80%E6%96%B0%E3%81%AE%E3%82%A8%E3%83%B3%E3%83%88%E3%83%AA%E3%82%A4%E6%83%85%E5%A0%B1%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%9B%E3%82%93")+'</div>';
      // xmlファイルが取得できない場合には「ありません。」を取得結果変数に代入
 63:    if (xml==undefined || xml==null) {getStr.recent = tmpStr; return;}
 64:    // Blogタイトルを取得する
 65:    blogTitle = $(xml).find("title").eq(0).text();
 66:    // 最新エントリイ情報を巡回取得
 67:    $.each(target,function(key){
 68:     $.each($(xml).find("item"), function(i,n){
        // 取得結果を ret 配列の i 番目に代入
 69:      ret[i]= [$(n).children().eq(0), $(n).children().eq(1), $(n).children().eq(4),$(n).children().eq(5)];
        // ret配列内のテキスト文字列を抽出して target 配列に代入する。
 70:      target[key].push( ret[i][iter].text() );
 71:     });
       // 次のエントリイ情報を取得するために(46行で初期値ゼロを定義済み)
 72:     iter++;
 73:    });
 74:    try {
       // エントリイ番号、エントリイタイトル、投稿年月日を取得する。
 75:     for (var i=0 ; (i < limit) && target.link[i] ; i++) {
 76:      No = /entry-([0-9]+)/.exec(target.link[i])[1];
 77:      i==0 && (lastNo = Number(No)); // 最新エントリイ番号を取得
 78:      subject =" , " +target.subject[i];
 79:      date =" , " +target.date[i].substring(0,10); // 年月日のみを抽出
        // limit 個の取得結果を表示用に整序して配列 html.recent に代入する。
 80:      html.recent.push( "<li><a href='" + target.link[i] + "' target='_blank'>" + target.title[i] + "</a> (No." + No + subject + date + ")</li>" );
 81:     }
       // 上行で格納した配列を HTML 文字列に併合して最終表示用に整序する。
 82:     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 文字列を表示用タグに挿入する。
 83:     r_c.html(getStr.recent);
 84:    } catch (err) { // 何らかのエラーが発生した場合にはその旨を表示する。
 85:     r_c.html(tmpStr);
 86:    }
 87:   } // End of success()メソッ
 88:  }); // End of ajax()メソッド
 89: }; //End of makeRecentEntryTitle func
 90: 
 91: // 前後のタイトルを取得するための準備を行う
 92: var makeEntryList = function(b_a,limit){
    // 表示用のデータ配列があり、それが空でなければ
 93:  if (!!getStr[b_a] && getStr[b_a]!="") {
     // 結果を表示してこの関数の実行を終える。
 94:   $("#pasteData").html(getStr[b_a]).show();
 95:   return;
 96:  }
    // ローカル変数定義
 97:  var thisHTTP, getEntryNos=[], thisURL=[];
    // エントリイアドレス文字列を分解するための正規表現文字列定義
 98:  var regExpr = /(http:.+entry-)([0-9]+)/;
    // 今開いているエントリイのエントリイ番号を取得する。
 99:  thisEntryNo = Number(regExpr.exec(location.href)[2]);
    // 今開いているエントリイアドレスのエントリイ番号前までの文字列を取得する。
100:  thisHTTP = regExpr.exec(location.href)[1];
    // 以前エントリイについてアドレス名にエラーが出ないように
    // この段階では最新エントリイタイトル名取得関数内で設定した最新エントリイ番号値
    // はまだ取得できない。(最新エントリイ情報を取得する Ajax 通信が完了していないため)
101:  border[b_a] = Math.min(limit+1, b_a == "before" ? thisEntryNo : limit+1);
102:  if (border[b_a]==1) thisURL=[]; // 求める以前エントリイがない場合の処理
103:  else {
     // 求める以前または以後のエントリイが存在すれば
104:   for (var i=1; i < border[b_a]; i++)
      そのアドレス文字列を作成し配列に格納する。
105:    thisURL.push(thisHTTP + (thisEntryNo - (b_a == "before" ? i : -i)) +".html" );
106:  }
107:  realElm[b_a] = 0; // 初期化
108:  // 準備完了! Ajax 通信開始
109:  getTitlesByAjax.call(this, b_a,thisURL);
110: };
111: 
112: // Ajax 通信によりエントリイタイトル等を取得する関数の定義
   // b_a は以前のエントリイか、以後のエントリイかを示す文字列
113: var getTitlesByAjax = function (b_a,thisURL){
   // ローカル変数定義
114:  var result={before:[],after:[]}, complement, realSize;
    // エントリイタイトル部分を抽出するための正規表現文字列を定義する。
115:  regExpr = /<title>(.*)<\/title>/;
     // エントリイアドレス毎に巡回処理を行う。
116:  $.each(thisURL,function(i,aryitem){
117:   $.get(aryitem,function(data){ //data は thisURL[i] の html テキスト文
      // ブログタイトル文字列があればそれをエントリイタイトル文字列から削除する。
118:    var titleStr = blogTitle != null ? regExpr.exec(data)[1].replace(blogTitle,"") :"" ;
119:    if ( /\S+/.test(titleStr)){ //空白だけのタイトル名は補足しない。
120:     ++realElm[b_a]; // 取得したタイトル数をカウントする。
       // 1つのエントリイのタイトル名、エントリイ番号を取得
121:     html[b_a][i]="<li><a href='" + aryitem + "' target='_blank'>" + titleStr +" (Entry No." + /entry-([0-9]+)/.exec(aryitem)[1] + ")</a></li>";
       // 実証的にこの段階ならば先行するAjax通信が完了していて、 lastNo 値を取得でき
       // ることが分かったので、ここで limit 値よりも 
       // (現在の最終エントリイ番号 - 現在開いているエントリイ番号の値)
       // が小さければ、border[b_a] 値をその値+1の値に変更する。
       // これにより thisURL[i]の番号値が、欠番なのか、存在しない番号なのかを判別する
       // ことが可能となる。
122:     b_a=="after" && (border[b_a]=Math.min(border[b_a],Number(lastNo)-thisEntryNo+1));
       // 欠番があればその旨を表示する文字列を complement 変数に代入する。
123:     complement = (border[b_a]-1 -realElm[b_a]!=0) ? 
124:     " ( " +decodeURI("%E6%AC%A0%E7%95%AA%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82") +" )" : "";
       // result[b_a] 配列の各要素にタイトルが取得できたかどうかを記録する。
       // 取得できたらば true、出来なければ null が要素の代入される。
125:     result[b_a][i]=true;
126:    }
      // each 巡回が最後の thisURL になった場合には、
127:    if (aryitem == thisURL[thisURL.length-1]) {
       // 一つもタイトル名が取得できなかった場合
128:     if (realElm[b_a]==0){
        // 存在しなかった旨の文字列を getStr オブジェクトの b_a プロパティに代入する。
129:      getStr[b_a]="<div>"+ (b_a=='before' ? 'Before ' : 'After ') + "Entry "+ decodeURI('%E3%81%AF%E3%81%82%E3%82%8A%E3%81%BE%E3%81%9B%E3%82%93%E3%80%82') + "</div>";
130:      display(); // 表示タグ内に最終結果を挿入する関数を起動する。
131:     } else docking(); // 以前又は以後のエントリイタイトル名を表示用に整序する関数を起動する。
132:    }
133:   });
     // タイトル名を表示用に結合する関数の定義
134:   function docking(){
      // timer タイマーの停止
135:    if (timer) {clearTimeout(timer);timer=null;}
      // 取得できたタイトル数を変数に代入
136:    realSize = realElm[b_a];
      // 巡回処理
137:    for (var i=0; i < border[b_a];i++){
       // 結果が取得できていて、その結果が実際に存在しすれば、変数値を 1 減する。
138:     result[b_a][i] && html[b_a][i] && realSize--;
139:    }
      // 巡回処理が終わった時点で変数値 realSize がゼロであれば、
      // すなわち Ajax 通信が以前又は以後エントリイの全ての結果を取得できたこと
      // が確認できたので、
140:    if (realSize==0) {
       // 取得結果を表示用に結合し、HTML文化する。
141:     getStr[b_a] = "<div><strong>"+ (b_a=='before' ? 'Before ' : 'After ') + realElm[b_a] + " Entries" + complement +"</strong></div><ul style='margin-left:1.5em;list-style-type:disc'>" + html[b_a].join('') + "</ul>";
142:     display(); //それを表示用に挿入する関数を起動する。
143:    }
      // realSize != 0 ならばまだ取得できていない通信があるから
      // 15ミリ秒後に docking 関数を再起動する。こうすることによって、全ての結果が
      // 取得できるまで巡回処理を行い続け、これが終わるまではdisplay関数は起動されない。
144:    else var timer=setTimeout(function(){docking()},15);
145:   }
146:   var display = function(){ // 挿入関数定義
      // 表示用にHTML文に加工済みのタイトル名情報を、表示用タグに挿入する。
147:    $("#result"+b_a).html(getStr[b_a]);
      // 以後タイトルを扱っていれば、setEnding関数を起動する。
148:    b_a == "after" && setEnding();
149:   } // End of $.get()メソッド
150:  }); // End of each function
151: } // End of function
152: 
   // 全ての Ajax 通信が終わったことを画面に表示するための関数定義
153: var setEnding = function (){
    // itval タイマーの停止
154:  if (itval) {clearTimeout(itval);itval=null;}
    // 念のために jQuery.active==0 となっているかどうか判別し、
155:  if (jQuery.active==0){ //ゼロならば
     // 通信中表示を隠蔽し、全てのAjax 通信が終わったことを fadeIn/Out メソッドを
     // 活用して「注目させながら」表示する。
156:   ld.hide(); fn.fadeIn("slow").fadeOut("slow").css({color:"darkgreen",background:"pink"}).fadeIn("slow");
    // (jQuery.active != 0) ならば20ミリ秒後にこの関数を再起動させる。
157:  } else itval=setTimeout(function(){setEnding()},20);
158: } // 以前/以後のエントリイ情報取得完了
159: 
   // 一連の Ajax 通信実行関数を呼び出すための関数の定義
160: var makeLists = function(num){
    // 必要なタグを表示し、不要なタグを隠蔽する。
    // $(・・・).each(・・・) メソッドを活用してした。
161:  $([ld,fn,r_c,r_b,r_a]).each(function(i,n){i==0 ? n.show() : n.hide();});
    // 最新情報を取得するための行
162:  getStr.recent=""; html.recent.length=0; makeRecentEntryList.call(this,num);
    // 以前情報を取得するための行
163:  getStr.before=""; html.before.length=0; makeEntryList.call(this,"before",num);
    // 以後情報を取得するための行
164:  getStr.after=""; html.after.length=0; makeEntryList.call(this,"after",num);
165: }
    // 一連の連続した Ajax 通信を実行する関数を起動する。
166:  makeLists(10);
167: 
168: //--------------------------------------------
    // 固定配置的に配置するためのスクロールイベントハンドラー
169:  $(window).scroll(function(){
170:   $("#ajaxPopup").css({
171:    top:10 +( window.pageYOffset || Math.max(document.body.scrollTop, document.documentElement.scrollTop) )+"px",
172:    marginLeft:-300+ ( window.pageXOffset || Math.max(document.body.scrollLeft, document.documentElement.scrollLeft) )+"px"
173:   });
174:  });
175: 
    // 最新/過去/未来エントリ情報を表示させるクリックイベントハンドラー
    // ここでもeach()メソッドを効果的に活用した
176:  $.each([$("#recent"),$("#before"),$("#after")],function(j){
177:   $(this).click(function(){
178:    $([fn,r_c,r_b,r_a]).each(function(i){
179:     i==j+1 ? $(this).show() : $(this).hide();
180:    });
181:   });
182:  });
183: 
184:  $("#closeThis").click(function(){ // 結果表示用の小窓全体を隠蔽するために
185:   $("#ajaxPopup").hide();
186:  });
187: 
188:  $("#reload").click(function(){
189:   makeLists(10);
190:  });
191: 
192:  $(".btn, #closeThis").hover( // ボタンにマウスオーバー/アウトした際のイベントハンドラー
193:   function(){
194:    $(this).css({color:"black",backgroundColor:"#dd0"});
195:   },
196:   function(){
197:    $(this).css({color:"white",backgroundColor:"#89A"});
198:   }
199:  );
200: })(jQuery);
201: } // 1 行目の if を閉じる

ファイル置き場問題(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が! )で詳述します。