PiyoFeeds 関連 JavaScript の更新とリリース

2005年01月23日 (日)

PiyoFeeds 関連 JavaScript の更新とリリース

PiyoFeeds 関連の JavaScript を更新&リリースしました。PiyoFeeds の「開発版」をターゲットにしています。

[2005年1月24日追記]

度々済みません。Mac 版 IE の自動修正を入れておきながら Mac 版 IE でその自動修正するコードが動作しないというアホなことをしていました。WritePiyoFeed.js が最新です。Mac 版 IE のために設置方法が若干変わりました。次のブラウザで確認済みです。

Mac OS X 版 FireFox 1.0
Safari 1.2.4
Mac OS X 版 Opera 7.54
Mac OS X 版 Internet Explorer 5.2.3
Windows 版 Internet Explorer 6.0

[2005年4月29日追記あり]

今回の対象は次の二つのファイルです。

CommentList.js 1.2: HaloScan によるコメントを PiyoFeeds を介して iBlog サイトに表示させる際に、エントリへのリンクを付加するための JavaScript。
WritePiyoFeed.js: PiyoFeeds の JavaScript モードのための HTML への表示スクリプト。RSS の item の description の内容を item へのリンクの title 属性とすることができます。これは以前、エントリ「PiyoFeeds に JavaScript モードが追加されました」で紹介した試作品をブラッシュアップしたものです。

WritePiyoFeed.js と CommentList.js 1.2 とを併用すると、コメントを開かなくてもその内容を見ることができるようになります。このサイトのナビゲーションエリアにある「最近のコメント」でコメント投稿者の名前のところにマウスポインターを持っていってみてください。

以下、それぞれについて説明します。

CommentList.js 1.2

1.1 との違いは次のとおりです。

文字コードが UTF-8 になった。
以前は EUC-JP で書いていました。ただし文字コードが関連するのはコメント部分だけなので動作に影響はありません。しかしながら、何か書き換えて使用する場合、文字コードが UTF-8 なのでバックスラッシュ \ と円マーク ¥ は別の文字となるので注意してください。
コメントへのリンクの title 属性を維持するようになった。
PiyoFeeds オリジナルには title 属性はありませんが、下の WritePiyoFeed.js を利用すると title 属性を付けることができます。この title 属性を失わずに維持できます。
リンクの説明文が付くようになった。
このサイトのナビゲーションエリアにある「最近のコメント」のように、説明文が付きます。不要な方は設定により付けないこともできますし、内容を置き換えることもできます。
コメントがないときの表示ができるようになった。
以前からこのサイトではそうなってました。コメントがないときに「誰かコメントください (T_T)」と表示されます。この文言は設定により置き換えられますし、付けないこともできます。

HaloScan の一つのアカウントを複数のサイトで利用しているときや、エントリ「blog コメントをボタンで開くようにしてみる」などで紹介したブログコメントなどに流用しているときには、当該ブログのエントリのコメントが一つもなくなるときがあります。このときに表示されるものです。
リンクのターゲットを指定できるようになった。
コメントやエントリへのリンクの target 属性の値をそれぞれ指定できます。デフォルトは _self になっています。

ほとんどの変更は以前から行っていてこのサイトや「僕は見ていた」で用いていましたが公開はしていませんでした。今回、WritePiyoFeed.js と併用できるようにしたのをきっかけにバージョンアップ版を公開することにしました。

基本の設置方法は「エントリへのリンク付き最近の HaloScan コメント」をご覧下さい。以下に、そこに書かれていないカスタマイズ方法を説明します。

リンクの説明文

script 要素内で JavaScript 関数 ReplaceCommentLinks を実行する前に次のコードを書くと説明文を入れ替えることができます。

CL_Description = '説明文';

説明文 を空文字列にすると説明文は表示されなくなります。この CL_Description のデフォルト値は次のようになっています。

<div style="border: 1px dotted gray;">EXXXXXX - エントリへ <br />名前 - コメントへ</div>

HTML ファイルの中に書くときは & < " > が含まれているとエージェント(ブラウザなどのこと)を混乱させる恐れがあります。「一年前のエントリ」のセクション「リストアップ方法をカスタマイズする」の後ろの方のただし、で始まる段落をご覧下さい。

コメントがないときの表示

script 要素内で JavaScript 関数 ReplaceCommentLinks を実行する前に次のコードを書くとコメントがないときの表示を入れ替えることができます。

CL_NoComments = 'コメントがないときの表示';

コメントがないときの表示 を空文字列にするとコメントがないときの表示はされなくなります。この CL_NoComments のデフォルト値は次のようになっています。

誰かコメントください (T_T)

コメントへのリンクのターゲット

script 要素内で JavaScript 関数 ReplaceCommentLinks を実行する前に次のコードを書くとコメントへのリンクのターゲットを変えることができます。

CL_CommentLinkTarget = 'ターゲット';

この CL_CommentLinkTarget のデフォルト値は_self です。

エントリへのリンクのターゲット

script 要素内で JavaScript 関数 ReplaceCommentLinks を実行する前に次のコードを書くとコメントへのリンクのターゲットを変えることができます。

CL_EntryLinkTarget = 'ターゲット';

この CL_EntryLinkTarget のデフォルト値は_self です。

PiyoFeeds には JavaScript モードというのがあります。これは RSS の情報を JavaScript オブジェクトとして提供するもので、その表示の仕方はユーザの JavaScript に任せるというものです。これを利用して RSS の item 要素の description 要素の内容を item へのリンクの title 属性とするのが WritePiyoFeed.js の主な機能です。

title 属性にするとブラウザによっては、そのリンクの上にマウスを持ってゆくと description をツールチップで表示することができます。Safari や IE、FireFox などメジャーなブラウザではそうなっています。このため、コメントを辿らなくとも内容を知ることができます。(title 属性の値が長いとブラウザによっては全てが表示されません。)

また、PiyoFeeds の JavaScript モードによる JavaScript コードは Mac 版 IE では動作しませんが、この WritePiyoFeed.js を利用するとこれを自動で修正して Mac 版 IE でも動作するものにしてくれます。

利用するにはまず次のような XHTML コードで WritePiyoFeed.js をロードします。これは head 要素内(<head> から </head> の間)か、下に示す表示のための XHTML コードの直前がいいでしょう。

<script type="text/javascript" src="WritePiyoFeed.js の URL" charset="UTF-8"></script>

そして PiyoFeeds を介して RSS を表示させたい箇所に次のような XHTML コードを書きます。


		PiyoFeeds から指示された XHTML コード
<script type="text/javascript">
    var wpf = new WritePiyoFeeds('createRSSFor_PiyoFeedsアカウント名_RSS名');

    wpf.Write();
</script>
<noscript>
    JavaScript が有効でないと表示できません。直接 <_a href="RSSのURL">RSS</a> をご覧下さい。
</noscript>

[2005年1月24日追記]
以前は new WritePiyoFeeds(...) の引数部分は関数そのものでしたが、今は関数名になっています。シングルクォートで囲む必要があります。

[2005年4月29日追記]

この部分は WritePiyoFeed.js のバージョンアップにより変更になりました。詳しくはエントリ「WritePiyoFeed.js 更新、Opera 8.0 対応」をご覧下さい。

WritePiyoFeed.js がブラウザに書き出す XHTML をある程度カスタマイズすることができます。以下、できることとその方法の説明をします。以下に各 JavaScript コードは全て上の設置用 XHTML コードの中の var wpf = new ... という行と wpf.Write(); という行の間に書いてください。

チャンネルのタイトルを指定する

チャンネルとは RSS 全体が表すもので、ブログの場合はブログそのものです。デフォルトでは RSS に書かれているタイトルが使用されますが、これを指定することができます。

wpf.m_ChannelTitle = 'タイトルのための XHTML コード';

タイトルのための XHTML コード には文字列だけを入れてもよいですし、a 要素を用いたリンクを入れてもよいです。

チャンネルをリンクにする

チャンネルのタイトルを指定せず RSS に書かれたタイトルを使用するとき、その表示を RSS へのリンクにするか、単にタイトルを書くかを指定できます。デフォルトではリンクにしません。RSS の URL でなくチャンネルの URL が入っていればデフォルトでリンクにしたのですが...

wpf.m_ChannelIsLink = true;

チャンネルへのリンクのターゲットを指定する

wpf.m_ChannelIsLink を true にしてデフォルトの機能によってチャンネルをリンクにした場合の、その a タグの target 属性の値を指定できます。デフォルトは _self になっています。

wpf.m_ChannelLinkTarget = 'ターゲット';

アイテムへのリンクのターゲットを指定する

各アイテムへのリンクのための a タグの target 属性を指定できます。デフォルトは _self になっています。

wpf.m_ItemLinkTarget = 'ターゲット';

item の description を a タグの title 属性としない

デフォルトでは RSS における item の description を各 item へのリンクの a タグの title 属性値にしますが、そうしないようにすることもできます。ただし、それなら JavaScript モードを使用しない方がよいでしょう。

wpf.m_UseItemDescriptionAsTitle = false;

item の取捨選択関数を指定する

デフォルトでは全てのアイテムを表示しますが、自作の関数を指定することで表示する item を取捨選択できます。例えば、あるキーワードが入っている item のみを表示するとか、item の URL が特定のパターンになっているかによって取捨選択ができるようになります。

wpf.ChoiceItemFunc = 自作の取捨選択関数;

自作の取捨選択関数 は PiyoFeeds の JavaScript モードの JavaScript が作成する PF_Item オブジェクトを受け取りブール値を返す関数でなければなりません。PF_Item オブジェクトは PiyoFeedsCommon.js で定義されています。

チャンネル全体のスタイルシートクラスを指定する

wpf.Write(); でブラウザに書き出されるチャンネル全体の div 要素のスタイルシートにおけるクラス名を指定できます。デフォルトは PiyoFeedChannel です。

wpf.m_ChannelClass = 'クラス名';

チャンネルへのリンクのスタイルシートクラスを指定する

wpf.Write(); でブラウザに書き出されるチャンネルへのリンクの a 要素のスタイルシートにおけるクラス名を指定できます。デフォルトは PiyoFeedChannelLink です。

wpf.m_ChannelLinkClass = 'クラス名';

item 達全体のスタイルシートクラスを指定する

wpf.Write(); でブラウザに書き出される item 達全体の div 要素のスタイルシートにおけるクラス名を指定できます。デフォルトは PiyoFeedItemList です。

wpf.m_ItemListClass = 'クラス名';

item へのリンクのスタイルシートクラスを指定する

wpf.Write(); でブラウザに書き出されるitem へのリンクの a 要素のスタイルシートにおけるクラス名を指定できます。デフォルトは PiyoFeedItemlLink です。

wpf.m_ItemlLinkClass = 'クラス名';

Posted: 05:42 | Comment | Trackback

Trackback Ping URL(U)

以下、類似エントリです。

>  >

2005年01月23日 (日)

PiyoFeeds 関連 JavaScript の更新とリリース

CommentList.js 1.2

WritePiyoFeed.js

> >