雑念ベース

　最近よく見かける ClickComments を導入してみました。よく見かける割には導入の仕方についての説明を見たことがないので、ついでに解説記事を書いてみることにします。解説不要なくらい簡単でしたが、せっかくスクリーンショットも用意しましたので。

ブログサイトの情報を送信

　初めに、導入したいブログサイトの情報を送信します。ClickComments のページにフォームがあります。メールアドレスの欄もありますが、これは必須でないので空のままでも大丈夫です。入れておくとユーザー登録されるのかもしれません。このサイトにはログインページがあります。
　Category は、サブのカテゴリでなくても大丈夫です。私は大まかに Technology にしました。サブカテゴリのほとんどが当てはまりますので。

　入力が終わったら、ボタンを押して送信します。

ブログシステムの選択

　このサービスは、現在8種類のブログシステムに対応しています。導入先のブログを選択するように促されますので、今回は WordPress を選択します。

プラグインのダウンロードと有効化

　ブログシステムを選択すると、使えるようにするための説明ページが表示されます。説明にはプラグインをダウンロードするためのリンクも含まれています。

　ここにある説明は、一般的なプラグインの導入方法となんら変わりありません。ファイルをダウンロードして、プラグインファイルをアップロードして、管理画面で有効化。それだけです。有効化すると、記事本文の下に表示されるようになります。

プラグイン Hack

　おまけ項目です。

　ついでにプラグインの中身を見てみました。ややこしいことをやっていると思いきや、メインのコードはわずか12行でした。ほとんどの処理を JavaScript で行っているのでしょうか。ブログサイトのアドレスや記事の情報を引数で渡しているので、ブログページのソースから JavaScript を見てみます。

　またもや単純なコードです。インラインフレームのタグを表示しているだけでした。アマゾンの個別商品リンクと同じ方式ですね。インラインフレームの中身のアドレスには、blog というパラメーター名で ID らしきものが渡されています。これが初めに送信した情報と結びついていて、言語にあわせた表示にしたりしているのでしょう。

　最終的な構造は次のようになります。div.postreachclickcomments にスタイル設定をすれば、多少のデザインは可能ですね。

　AmazonLink の Amazon.co.jp 検索に、検索結果のページ切り替え機能を実装しました。

　コードの整理などがある程度終わったところで実装方法を思いついたので、3時間ほどで一気に実装。今のところ気持ちよく動いてくれています。

　ページ切り替えで1ページ目の前や最後のページの次を表示しようとしたときの処理をどうしようかと考えていたのですが、ループして反対側を表示するようにしてみました。これだとボタンの表示非表示の処理もいらないので、作る側としても楽です。

　残りの TODO は、キーワードを入れるところでエンターキーを押されたときの処理だけです。通常だと submit されてしまいますが、代わりに検索ができることを目指します。keydown イベントでキーコードを拾って分岐処理という予定ですが、環境依存にならないか心配です。