Movable Type CMSプラットフォーム Movable Type
ドキュメントサイト

Community Solutionコミュニティ・ソリューション

テンプレートを編集する時の注意点とJavaScriptの解説

テンプレートやCSSを編集する際の注意点を解説します。

  • テンプレート、CSSを編集する際の注意点

    • また、コミュニティ・ソリューションでは、色々な場面で JavaScriptを利用しています。ここでは特徴的な４つの場面で、どう利用されているかを解説します。

  • サインイン、サインアウト 機能
  • コメント欄の表示非表示 機能
  • 注目、被注目 機能
  • レコメンド 機能
    •

    テンプレート、CSSを編集する際の注意点

    コミュニティ・ソリューションでは、テンプレート、CSSを修正する際に注意しなければいけない事が何点かあります。

    HTMLに書き込まれている JavaScript は修正しない

    1. これらのほとんどは、HTMLファイルのロード終了前に動作を始める、イベントを設定するなど重要な処理をしています。
    2. 同じ理由により、一見無意味に見える JavaScript でも場所を変更したり、削除すると正しく動作しなくなります。

    HTML タグの "id", "class" は変更削除しない

    1. コミュニティ・ソリューションの JavaScriptはHTMLに書かれている "id", "class" を見て動作します。
    2. 上記の理由により、"id" や "class" の表記を変更してしまうと正しく動作しなくなります。
    3. HTML上では空のdivタグでも、文言や画像を表示させるために記述されているものもあるので、それらも削除しないで下さい。

    テンプレートの処理は最小限に

    1. 上記の理由により、テンプレート（グローバルテンプレート含む）の修正は最小限に留めて下さい。
    2. CSSで対応できるもの（配置やdivタグの非表示など）はテンプレートの修正をせず、CSSで対応して下さい。

    JavaScript の修正、追加をしたい場合

    1. グローバルテンプレートの "mt.js" は修正しないで下さい。
    2. 外部 JavaScript を作成し、それらをインクルードする形にして下さい。
    3. これによって、"mt.js"に手を入れた時と比べて、問題発生時に条件切り分けが容易になります。

    JavaScriptの解説

    以下で指している行番号は環境や設定によって異なりますので、適宜読み替えて下さい。

    サインイン、サインアウト 機能

    サインイン、サインアウトは、ほとんどの JavaScript コードがHTMLページに直に記載され動作しています。

    [function mtUpdateSignInWidget(u)] と、その処理

    1. [mtUpdateSignInWidget(u)] が呼び出されると、閲覧ユーザの情報（サインイン済かどうかなど）を取得します。（69～79行）
    2. 閲覧ユーザーが未サインインだった場合、[サインイン | 登録 ] を"content"変数にセットします。（101～105行）
    3. 閲覧ユーザーが当該ブログにサインインする権限が無かった場合「このブログにサインインする権限がありません」を"content"変数にセットします。（99～100行）
    4. 閲覧ユーザーがサインイン済みかつMTユーザーだった場合「サインイン | ユーザー情報の変更 | サインアウト」を"content"変数にセットします。（80～99行）
    5. 閲覧ユーザーがサインイン済みかつMTユーザーでなかった場合「サインイン | サインアウト」を"content"変数にセットします。（80～99行）
    6. "content"変数の内容を「サインインウィジェット」に書き込みます。（109行）
    7. ユーザのサインイン処理の終了時に [mtUpdateSignInWidget(u)] が呼び出されるように設定します。（111行）
    8. 112行がロードされたタイミングで [mtUpdateSignInWidget(u)]を呼び出します。（112行）

    サインイン

    1. [サインイン] をクリックするとユーザー情報を取得します。（mtSignInOnClick関数 mt.js 1254～1268行）
    2. 次の処理に移るまでに「サインインします...」表示と共にインジケーターが表示されます。
    3. サインイン状態に無い事がわかった場合、サインイン画面にリダイレクトされます。
    4. サインイン状態にあることがわかった場合、[mtUpdateSignInWidget(u)] を呼び出すイベントが発生します（usersigninイベント）。

    サインアウト

    1. [サインアウト] をクリックするとサインアウト処理を実行します。（mtSignOutOnClick関数 mt.js 1299～1302行）
    2. サインアウト処理を行い、完了後サインアウト処理の前に閲覧していたページにリダイレクトされます。

    コメント欄の表示非表示 機能

    コメント欄の表示、非表示は、mt.js により制御されています。

    [mtUserOnload] と、その中でのコメント関連の処理

    1. ページが読み込まれるとイベントが発生し、mt.js の mtUserOnload 関数が呼び出されます。
    2. ユーザーのステータスを調べコメント欄の表示、非表示を実行します。（mtUserOnload 関数 mt.js 1167～1178行）
    3. コメント欄の上にテキスト（Greeting）を表示します。（mtShowGreeting 関数 mt.js 1306～1353行）
    4. Greetingには「コメントする権限がありません」「○○としてサインインしています」「コメントするにはサインインしてください」などの文言が入ります。

    注目、被注目 機能

    注目、被注目は、ロード時の処理と「注目する」「注目をやめる」時の２つの処理があります。

    ロード時の処理（HTML中のJavaScript）

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

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

    1. 「注目する」ボタンをクリックすると "script_follow" 関数が呼ばれます。（script_follow 関数 mt.js 608～628行）
    2. mt-cp.cgi が呼び出され 「注目する」旨をシステムに伝えます。（script_follow 関数 mt.js 624行）
    3. ロードが終了するまでインジケーターが表示されます。（script_follow 関数 mt.js 626-627行）
    4. ロードが終了すると「○○に注目しています。 [注目をやめる]」が表示され、インジケーターが非表示になります。（follow 関数 mt.js 653-655行）

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

    1. 「注目をやめる」ボタンをクリックすると "script_leave" 関数が呼ばれます。（script_leave 関数 mt.js 630～650行）
    2. mt-cp.cgi が呼び出され 「注目をやめる」旨をシステムに伝えます。（script_leave 関数 mt.js 646行）
    3. ロードが終了するまでインジケーターが表示されます。（script_leave 関数 mt.js 648-649行）
    4. ロードが終了すると「[注目をする]」が表示され、インジケーターが非表示になります。（leave 関数 mt.js 659-661行）

    レコメンド 機能

    レコメンドは画面のロード時、サインイン時の処理と、レコメンドリンクをクリック時の処理があります。

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

    1. ロード時、サインイン時にイベントが発生し、[mtUpdateScores] 関数を呼び出すよう設定されています。
    2. [mtUpdateScores] が呼び出される前、レコメンドアイコンはクリックできない状態（灰色）になっています。
    3. [mtUpdateScores] 関数が呼ばれると画面内のレコメンドを調べ、全てのレコメンドに対してステータスをチェックします。(mtUpdateScores 関数 mt.js 530-563行）
    4. [mtUpdateScores_cb] 関数が、[mtUpdateScores] 関数でチェックしたステータスを画面に反映させます(mtUpdateScores_cb 関数 mt.js 565-604行）
    5. [mtUpdateScores] 関数が呼び出された後、投票可能なレコメンドアイコンはアクティブな状態（青色）になっています。
    6. [mtUpdateScores] 関数が呼び出された後、投票済みのレコメンドアイコンはクリックできない状態（黒にチェック）になっています。
    7. ユーザがサインアウトを行うと、全てのレコメンドアイコンはクリックできない状態（灰色）に戻ります。

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

    1. アクティブなレコメンドアイコンをクリックすると、[mtScore] 関数が呼び出されます。（mtScore 関数 mt.js 503-528行）
    2. [mtScore] 関数は、引数として渡された Entry ID から、レコメンドされた旨をシステムに送信します。（mtScore 関数 mt.js 526行）
    3. [mtScore_cb] 関数が、クリックしたアイコンを投票済み（黒にチェック）に変更します。（mtScore_cb 関数 mt.js 580-581行）
    4. [mtScore_cb] 関数が、クリックしたアイコンの票数を変更します。（mtScore_cb 関数 mt.js 590-591行）
    マニュアル
    リファレンス

    よく検索されているキーワード

    サイト内検索

    よく検索されているキーワード

    MTを使う

    MTを知る

    MTを導入する