がちゃがちゃフレンド公開

2004年08月05日 (木)

がちゃがちゃフレンド公開

BlogPoeple が提供している「ガチャガチャブログ(GB)」と同様の機能をページに表示しているリンクリストに限定して提供する「がちゃがちゃフレンド(GF)」を公開します。

GF はリンクサイトに限定してがちゃがちゃするのでこんな感じの特徴があります。

BlogPeople を利用したコミュニティ内での交流をサポートします。
元サイトの友達サイトに限定されるので、よりコメントなど付けやすくなります。
リンクリストの中で閉鎖されたところのサンプリングチェックに利用できます。
RSS 巡回から漏れたところもときどき見に行けます。
暇つぶし -- これは GB も同じ?

iBlog カテゴリに入れてエントリしましたが、どんなブログツールやサービスを利用していてもカスタマイズができるのなら利用できます。

GF は

BlogPeople のリンクリストが表示されたページに設置する必要がある。
あなたのブログにリンクリストが表示されていなくても、やりようはあります。希望があればその工夫をエントリするのでコメントなどでお知らせください。
ブラウザの JavaScript 機能を有効にしておく必要がある。
調べたら GB もそうなんですね。最近まで知りませんでした。

という条件の下で使用できます。あなたのブログに複数のリンクリストを表示していてもへっちゃらです。全体をジャンプ候補にすることもできますし、一つに限定することもできます。そしてそれぞれ別々にがちゃがちゃすることもできます。以下、基本の導入方法について説明します。このエントリが一次情報となるので、なるべく詳しく書きます。詳しいので長くて難しそうに思えるかもしれませんが、できるだけ噛み砕いたつもりなので順を追ってじっくり読んでみてください。それでも部分的に ??? となりやすい箇所もあります。導入された方は是非、自分の導入例をエントリして他の方への実例を増やしていただけると助かります。

準備

導入準備として以下を行ってください。

GachaGachaFriend.js を設置: 上のリンクから GachaGachaFriend.js をダウンロードし、自分のサイトの適当な場所にアップロードしてください。
リンクリストを囲むタグの ID 属性の値: 後でリンクリストを表示する場所を例えば
<div id="BlogPeople"> </div>
で囲みます。この BlogPeople に相当する部分を決めておいてください。この例では div タグを用いていますが必ずしも div タグである必要はありません。ブロック要素を作るタグであれば何でも構いません。よくわからなければ div にしておいてください。
リンクリストを複数設置していてがちゃがちゃ候補を切り分けたいときは必ず行ってください。一つしか設置していない場合でも行った方が動作がきびきびします。

埋め込むコード(全体)

ここではテンプレート(XHTML)に書き加えるコード全体を説明します。細かい部分は後のセクションに回します。

まずお使いのテンプレートの head 要素の中(<head>から</head>までの間)に次のような指定をします。

<script type="text/javascript" src="{GachaGachaFriend.jsのURL}" charset="Shift_JIS"></script>

ここで {GachaGachaFriend.jsのURL} はセクション「準備」でアップロードした GachaGachaFriend.js の URL です。

次に BlogPeople のリンクリストのためのコードがある部分を次のようにします。

<div id="{ID}">
	{BlogPeopleのリンクリストのコード}
</div>
{GFのためのコード}

ここで {ID} はセクション「準備」で決めておいた ID 属性値です。{BlogPeopleのリンクリストのコード} は BlogPeople のサイトで指示されたあなたのリンクリストのためのコードです。そして {GFのためのコード} が GF を表示して動かすための部分ですが、これは次のセクション以降で説明します。

私は {GFのためのコード} の部分を {BlogPeopleのリンクリストのコード} を囲む要素の前に記述しています。これは見た目がその方がよいと思ったからですが、リンクリストのロードが終わりきらないうちに GF を実行される恐れがあります。上の例ではその危険を回避するためにリンクリストよりも後に付けているのです。

GF の実行

上の {GFのためのコード} の中の GF を動かすための部分について説明します。表示は次のセクションで説明します。GF は次のような JavaScript コードで実行させます。省略ができる部分があるので全部で四通りあります。ここで {ID} はセクション「準備」で用意した ID 属性値です。また {ウィンドウ} はリンクリストがあるウィンドウ(フレーム)です。

{ID} を省略し {ウィンドウ} も省略する

今のページのリンクリストに載っているサイトをジャンプ先の候補とするときに使用する書き方です。

GachaGachaFriend();

{ID} を指定し {ウィンドウ} を省略する

今のページの ID 属性値が {ID} の要素の中のリンクリストに載っているサイトをジャンプ先の候補とするときに使用する書き方です。

GachaGachaFriend('{ID}');

{ID} を省略し {ウィンドウ} を指定する

{ウィンドウ} のリンクリストに載っているサイトをジャンプ先の候補とするときに使用する書き方です。

GachaGachaFriend(false, {ウィンドウ});

フル指定

{ウィンドウ} の ID 属性値が {ID} の要素の中のリンクリストに載っているサイトをジャンプ先の候補とするときに使用する書き方です。

GachaGachaFriend('{ID}', {ウィンドウ});

GF の表示

GF はとにかく上に示した JavaScript 関数を実行させればいいので、そのための表示のさせ方は色々あります。いくつかバリエーションを紹介しておきます。

ボタンで実行する

次のようにします。

<input type="button" value="{ボタンに表示する文言}" onclick="{GF実行コード}" onkeypress="{GF実行コード}" />

{ボタンに表示する文言} はその名のとおりボタンに表示する文言です。{GF実行コード} は前のセクションで示した JavaScript コードです。

イメージボタンで実行する

次のようにします。

<input type="image" src="{イメージのURI}" onclick="{GF実行コード}" onkeypress="{GF実行コード}" />

{イメージのURI} はボタンとして使用するイメージファイルへのパスです。{GF実行コード} は前のセクションで示した JavaScript コードです。

a タグで実行する

< a href="javascript:{GF実行コード}" title="がちゃがちゃフレンド">{リンクの文言}</a>

< と a の間が空いていますが、ここにくっつけて書くと勝手にリンクに置き換えられてしまうので離しました。実際にはくっつけてください。
{GF実行コード} は前のセクションで示した JavaScript コードです。{リンクの文言} はその名のとおりです。

クリッカブルな文字列で実行する

次のようにします。

<span style="cursor: point;" title="がちゃがちゃフレンド" onclick="{GF実行コード}" onkeypress="{GF実行コード}">{リンクの文言}</span>

これは上の a タグを用いたものとほぼ同じ効果を発揮しますが a タグを用いていないので a タグに関するスタイルが適用されません。このためスタイルを追加することでより表示を制御しやすくなります。{リンクの文言} はクリックして GF が動作する部分の文言です。{GF実行コード} は前のセクションで示した JavaScript コードです。

カスタマイズ

この GF は二点ほどカスタマイズができます。これについて説明します。

サポートされていないブラウザへの警告文言

JavaScript をサポートしていても DOM 機能というものがサポートされていないブラウザでは機能しません。この場合 alert のダイアログを表示します。そのダイアログの文言のデフォルトは

ご免なさい。
あなたのブラウザには対応してないんです。

となっています。これを変えたり、あるいはダイアログを出さずに表面上は何も起こらないようにできます。文言を変えるには上の {GF実行コード} よりも前、そして GachaGachaFriend.js をロードする script 要素よりも後ろで次のようにします。

<script type="text/javascript">
	GF_UnSupportAlertString = '{警告文言}';
</script>

そして、次のようにすると alert のダイアログを表示しなくなります。

<script type="text/javascript">
	GF_UnSupportAlertString = '';
</script>

BlogPeople 以外のリンクリストに適用する

BlogPeople のリンクリストにあるリンクは「クリック数」をカウントするための CGI を通してジャンプするようになっています。直接にはこの CGI へのリンクになっているのです。GF はこのことを利用してリンクサイトへのリンクを拾いだしています。ですからこの CGI の URL の指定を別なものにすれば、別な用途に使えます。例えば、あなたのサイトの画像へのリンクからランダムに選んで表示するということができます。ジャンプ先の URL に前方一致する部分を指定するのです。これは上の警告文言の変更と同じ条件の箇所で次のように指定します。

<script type="text/javascript">
	GF_LinkBase = '{ジャンプ先候補のURL全てに前方一致する部分}';
</script>

> >

2004年08月05日 (木)