movabletype.jp
検索

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

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

  • テンプレート、CSSを編集する際の注意点
  • また、コミュニティ・ソリューションでは、色々な場面で JavaScriptを利用しています。ここでは特徴的な4つの場面で、どう利用されているかを解説します。

  • サインイン、サインアウト 機能
  • コメント欄の表示非表示 機能
  • 注目、被注目 機能
  • レコメンド 機能
  • テンプレート、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には「コメントする権限がありません」「○○としてサインインしています」「コメントするにはサインインしてください」などの文言が入ります。

    注目、被注目 機能

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

    ロード時の処理(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行)