日記/2007-10
<< | 2007-10 | >> | ||||
S | M | T | W | T | F | S |
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
2007-10-25
jQueryを利用したプラグイン
勉強がてら、JavaScriptのライブラリjQueryを利用したFreeStyleWiki用のプラグインを作成してみました。JavaScriptが全然わからない私でもなんとかなりそうな感じ。
でも、作成したといっても、トグル表示のプラグインだけ。
もうちょっとかっこいいプラグインも作りたいと思ってはいるのですが、果たして作れますかどうか……。
- jQtoggle プラグイン
- jQmore プラグイン 2007/10/26追加
- jQcycle プラグイン 2007/11/06追加
- jQzoomi プラグイン 2007/11/28追加
- jQtoggle2 プラグイン 2008/02/29追加
- jQmore2 プラグイン 2008/02/29追加
- 「Wikiメニューにアイコン画像を表示するプラグイン」をjQueryでドック風に 2008/07/18追加
- jQubox プラグイン 2009/02/10追加
- jQaccordion プラグイン 2009/03/07追加
- jQshadowbox プラグイン 2009/04/14追加
- jQfloatingmenu プラグイン 2009/12/27追加
- jQshadowyoutube プラグイン 2010/01/03追加
インストール
- 以下のファイルすべてを、いろんなところからダウンロードしてインストールする必要があります。面倒くさくてすいません。
- jQuery本体は、GoogleのCDNを利用するため、ダウンロードの必要はありません。
jq プラグインのインストール
- 以下のファイルをダウンロードし解凍する。
- jq.zip(503)
- jq はディレクトリごと plugin 以下にインストールする。
- header.tmpl は tmpl 以下にインストールする。
- default.tmpl は tmpl/site/default 以下にインストールする。
- header.tmpl、default.tmplは上書きされるので注意!
- 「Wikiメニューにアイコン画像を表示するプラグイン」をjQueryでドック風にの機能を使わない場合は、header.tmplをインストールしないこと。
jQuery Cycle Plugin のインストール
- 以下から jquery.cycle.zip をダウンロードし、解凍後、jquery.cycle.all.min.js をplugin/jq 以下にインストールする。
Zoomi のインストール
- 以下から zoomi.js をダウンロードし、plugin/jq 以下にインストールする。
CSS Dock Menu のインストール
- 以下から css-dock-menu.zip をダウンロードする。
- ダウンロードしたファイルを解凍後、interface.js を、plugin/jq 以下にインストールする。
uBox のインストール
- 2009/02/10現在、こちらで配布されている uBox 1.0 にはまだいくつかバグが残っていて、当方による確認では、うまく動作しなかった。
- そこで、いつの間にかアクセスできなくなった旧配布先 http://zori.udesign.sk/ubox/ で報告されていたバグを修正してみると、IE7、Firefox3、Chromeでの動作が確認できた。Thank you, khoker.
- 上記修正を施したファイル uBox.js を以下に添付する。
- uBox.js(374)
- これをダウンロードし、plugin/jq 以下にインストールする。
Accordion Content script のインストール
- 以下から ddaccordion.js をダウンロードし、plugin/jq 以下にインストールする。
Shadowbox.js のインストール
- 以下から shadowbox-3.0.3.zip をダウンロードし、解凍後、すべてのファイルをplugin/jq 以下にインストールする。
- セレクタやラジオボタンの設定は以下の通り。
- Choose the adapter you'll be using:
- jQuery
- Select the player(s) for the types of content you want to display:
- Images
- Flash (swf files)
- Flash video (flv files)
- Choose the language support you need:
- English
- Include support for using CSS selectors to select links
- Choose the adapter you'll be using:
インストール後のplugin/jqディレクトリの状況
└─plugin └─jq click.gif close.png ddaccordion.js expressInstall.swf Install.pm interface.js jQaccordion.pm jQcycle.pm jqdocstyle.css jQfloatingmenu.pm jQHeader.pm jQmore.pm jQmore2.pm jQshadowbox.pm jQshadowyoutube.pm jQtoggle.pm jQtoggle2.pm jQubox.pm jquery.cycle.all.min.js jQzoomi.pm LICENSE livefloatingmenu.js loading.gif next.png pause.png play.png player.swf previous.png README shadowbox.css shadowbox.js tclose.png topen.png uBox.js zoomi.js
参考および関連情報
jQueryとそのプラグイン
- jQuery: The Write Less. Do More. JavaScript Library
- JavaScriptのライブラリ。まだちょろっと眺めたくらいですが、なかなか楽しそうです。
- jQuery Cycle Plugin
- jQcycle プラグインで利用しています。ありがとうございます。
- Zoomi
- jQzoomi プラグインで利用しています。ありがとうございます。
- CSS Dock Menu
- 「Wikiメニューにアイコン画像を表示するプラグイン」をjQueryでドック風にで利用しています。ありがとうございます。
- uBox
- jQubox プラグインで利用しています。ありがとうございます。
- Accordion Content script
- jQaccordion プラグインで利用しています。ありがとうございます。
- jQueryでメニューを固定位置に追随させる:Live floating menu
- jQfloatingmenu プラグインはこのページの内容そのまま。ありがとうございます。
- Shadowbox.js
- jQshadowbox プラグインで利用しています。ありがとうございます。
FreeStyleWikiの本家のサイトのプラグイン
- 直リンク画像表示プラグイン
- jQcycle プラグイン、jQzoomi プラグイン、jQubox プラグイン、jQshadowbox プラグインは、このプラグインを用いてページに貼り付けられた画像を表示します。
- レイアウト・プラグイン
- jQtoggle2 プラグイン、jQmore2 プラグインで使っている画像は、このプラグインのものを流用しました。ありがとうございます。
- Wikiメニューにアイコン画像を表示するプラグイン
- このプラグインをそのまま用いて「Wikiメニューにアイコン画像を表示するプラグイン」をjQueryでドック風に動作するようにしてみました。ありがとうございます。
jQueryの使い方
- jQuery 日本語リファレンス
- すごく便利です。ありがとうございます。
jQueryの書籍
2007-10-21
Tdamazon プラグイン
Koshiamazon プラグインが、文章からキーワードを抜き出すKOSHIANというWeb APIのサービス停止により無力化されてしまいました(こちらの10/11のコメント参照)ので、同様のWeb APIであるTermDripsを用いたFreeStyleWiki用のプラグインを作ってみました。
プラグインが記載されているページの内容からTermDripsを用いてキーワードを抜き出し、それを元にAmazon Web Serviceで商品を検索するというもの。時期的に、さらにいまさら感が強まりましたが、そこはそれ。
使い方
{{tdamazon b,5,1}}
「b」は商品ジャンルの指定で、これはAmazonSearch プラグインと同じです。
「5」は表示される商品件数の上限の指定(10より大きい数は指定できません)です。省略すると「1」と同じ。
「1」はAmazonで検索するときに与えるキーワード数です。数を増やすと検索結果を絞り込めます(なにもヒットしなくなることもありがち)。キーワードはTermDripsがつけるscoreの高いものから順に与えられます。省略すると「1」と同じ。
本ページでの結果は以下のようになります。「extracted by TermDrips」の手前に出ている単語が、抽出されたキーワードです。さらに別のページでも試してみました。
{{tdamazon b,5,1}}
インストール
- あらかじめAmazonSearch プラグインをインストールしておく。
- 以下のファイルをダウンロードし、plugin以下にインストールする。
- tdamazon.zip(205)
- さらに以下のモジュールをlib以下にインストールする。
補足
- ページを表示するたびにキーワード抽出するのは無駄ですし、TermDripsに負荷をかけますので、抽出されたキーワードはキャッシュしています。ページが更新されたら、キャッシュも作り直します。
- でも、アマゾンへはページ表示のたびに検索にいきます……。
- 以下の単語はキーワードとして抽出されても無視しています。ページ内にURLが書いてあると必ず抽出されちゃうので。
- WWW、HTTP、HTML、HTM
- プラグインの出力全体を <div class="tdamazon">〜</div> でくるんであります。テーブルを組んで表示していますので、枠線がうるさく感じる場合にはCSSで非表示にしてください。
div.tdamazon table, div.tdamazon th, div.tdamazon td, div.tdamazon img { border-style:none; }
参考および関連情報
- キーワード抽出API:TermDrips
- ありがとうございます。
- Koshiamazon プラグイン
- これを改造してキーワード抽出のWeb APIをTermDripsに変更しました。
- AmazonSearch プラグイン
- このプラグインをモジュールとして利用しています。
追記
- 2009/08/01にAmazon Product Advertising APIに対応しました。これに伴い、本プラグイン利用のためには、AmazonSearch プラグインのインストールが必須となりました。ご注意ください。
2007-10-15
KOSHIAN停止中続報
Koshiamazon プラグインで利用しているKOSHIANですが、8/27から停止中です。そのため、Koshiamazon プラグインの出力が No Keyword. になってしまいます(停止前にキーワードがキャッシュされていたページは、問題なく表示されます)。
こちらの10/11付けのコメントによりますと、「解決しているのですが放置期間が長くなってしまったのでそのまま停止することにします」とのこと。残念です……。