movabletype.jp
検索

連載その5「mt.js は何をしているのか? その2」

コミュニティ・ソリューションで利用される mt.js とは?

"mt.js" ファイルは、コミュニティー掲示板やコミュニティーブログで利用される多機能な JavaScript ファイルで、各掲示板やブログディレクトリの直下に配置されています。

コミュニティ・ソリューション以外でも "mt.js" を利用しますが、若干違う JavaScript ファイルとなっています。

主な利用場面は以下の4つです。

  • サインイン、サインアウト
  • コメント欄の表示、非表示
  • お気に入りの制御
  • 注目、被注目

今回は「お気に入りの制御」「注目、被注目」について取り上げます。

お気に入りとは?

コミュニティ・ソリューションでは、ブログ記事に対して、読者が『お気に入り』に追加することができます。この機能は、Movable Type のレーティング・フレームワークと呼ばれる仕組みによって実装されており、Movable Type に保存されている、記事などのあらゆるデータに、スコア付けやランキングを設定することができます。

お気に入りは、ユーザー各々のブックマークとしても利用できますし、コミュニティ全体では、人気度の目安として働きます。投票者がコミュニティにサインインしているユーザーなら、お気に入りに登録したトピックやブログ記事は自分のプロフィールページの [最近のアクション] で確認できます。

お気に入り 機能

お気に入り機能は JavaScript によって動作しています。お気に入りの情報はユーザーログインした際に JSON データとしてダウンロードされ、それによりアイコンのステータスを変更します。

ロード時、サインイン時の処理

  1. ロード時、サインイン時にお気に入りアイコンの状態を変更する JavaScript を呼び出します。
  2. JavaScript が呼び出される前、お気に入りアイコンはクリックできない状態(灰色)になっています。
  3. JavaScript が呼ばれると JSON のデータから画面内のお気に入りの状態を調べ、ステータスをチェックします。
  4. JavaScript でチェックしたステータスを画面に反映させます。
  5. JavaScript が呼び出された後、投票可能なお気に入りアイコンはアクティブな状態(青色)になっています。
  6. JavaScript が呼び出された後、投票済みのお気に入りアイコンはクリックできない状態(黒にチェック)になっています。
  7. ユーザがサインアウトを行うと、全てのお気に入りアイコンはクリックできない状態(灰色)に戻ります。

アクティブ(青色)アイコン クリック時の処理

  1. アクティブなお気に入りアイコンをクリックすると、JavaScript が呼び出されます。
  2. JavaScript は、引数として渡された Entry ID から、お気に入りになった旨をシステムに送信します。
  3. データ送信中はアイコンがアップデート中(インジケーター)に変更されます。
  4. JavaScript が、クリックしたアイコンを投票済み(黒にチェック)に変更します。
  5. JavaScript が、クリックしたアイコンの票数を変更します。

投票済み(黒にチェック)アイコン クリック時の処理

  1. 投票済みなお気に入りアイコンをクリックすると、JavaScript が呼び出されます。
  2. JavaScript は、引数として渡された Entry ID から、お気に入りから外した旨をシステムに送信します。
  3. データ送信中はアイコンがアップデート中(インジケーター)に変更されます。
  4. JavaScript が、クリックしたアイコンをアクティブ(青色)に変更します。
  5. JavaScript が、クリックしたアイコンの票数を変更します。

メニューから [ 設定 ][ コミュニティ ] で、「匿名での投票を許可する」にチェックが入っていた場合、サインインしなくてもお気に入りアイコンがアクティブ(青)になり、お気に入りに投票する事が可能になります。既定値ではチェックが入っていません(サインイン必須)。

注目、被注目 とは?

コミュニティ・ソリューションはユーザーがコミュニティの中で注目するユーザーをフォローする機能を提供します。注目・被注目の状況は、ユーザー各々のプロフィールページで確認したり、テンプレートをカスタマイズして、ユーザーが注目しているユーザーの一覧を表示することもできます。

また、アクション機能と組み合わせれば、注目ユーザーの活動 (記事・トピック作成、コメント、お気に入り) を確認できる仕組みをコミュニティ管理者と、デザイナーに提供します。

注目しているユーザーの一覧とは逆に、ユーザーがどのユーザーに注目されているのかを一覧することもできます。こちらもアクション機能と組み合わせて利用できます。例えば、自分を注目しているユーザーは最近どのようなトピック (または記事) を投稿したのかをチェックするといったこともできます。

注目、被注目 機能

注目、被注目は、ロード時の処理と「注目する」「注目をやめる」時の2つの処理があります。ここでは、プロフィールページでの注目、被注目の挙動を説明します。

ロード時の処理(HTML中のJavaScript)

  1. プロフィールページを開いた時点では「注目する」「注目をやめる」のリンクは表示されていません。
  2. これらを表示するための JavaScript はHTMLに書き込まれています。
  3. サインインするとJavaScript により「注目する」「注目をやめる」のどちらが表示されるか制御します。
  4. JavaScript の呼び出しはHTMLページの最後にある外部 JavaScript をインクルードしている部分で行われます。
  5. ここで読み込まれた外部 JavaScript は 「注目しているかどうか」「ユーザ名」「メールアドレス」などの引数を渡します。これにより表示、非表示が制御されます。

「注目する」ボタンをクリックした際の処理(mt.js中のJavaScript)

  1. 「注目する」ボタンをクリックすると JavaScript が呼ばれます。
  2. mt-cp.cgi が呼び出され 「注目する」旨をシステムに伝えます。
  3. ロードが終了するまでインジケーターが表示されます。
  4. ロードが終了すると、インジケーターが非表示になり「○○に注目しています。 [注目をやめる]」が表示されます。

「注目をやめる」ボタンをクリックした際の処理(mt.js中のJavaScript)

  1. 「注目をやめる」ボタンをクリックすると JavaScript が呼ばれます。
  2. mt-cp.cgi が呼び出され 「注目をやめる」旨をシステムに伝えます。
  3. ロードが終了するまでインジケーターが表示されます。
  4. ロードが終了すると、インジケーターが非表示になり「[注目をする]」が表示されます。