タグ「Movable Type Advent Calendar」が付けられているもの

記事毎に MovableType.net フォームの入力項目を変える

  • 投稿日:
  • by
  • カテゴリ:

この記事は、Movable Type Advent Calendar 2024 の18日目の記事です。

"テーマは「MTに関すること」であればOK"とのことなので「HONDA BEAT は MT です!」

HONDA BEAT は MT です

「いやいや、その前に "CMS Movable Type に関するAdvent Calendarです。" て書いてあるよね。」と言われそうですが、大丈夫です。

HONDA-BEAT.JP」は MovableType.net です。

「HONDA-BEAT.JP」は2005年1月に公開しているので、Movable Type 3 で始めたのかな?記憶が曖昧ですがライセンスのことなどで2018年に MovableType.net へ移行(HONDA-BEAT.JP リニューアルしました)しました。いつの間にか公開から20年になるんですね。
(自分はあまり書いてないですが...)

余談はこれくらいにして、本題「記事毎に MovableType.net フォームの入力項目を変える」です。

MovableType.net フォームの入力項目を、カスタムフィールドと表示条件、カスタムスクリプト「フィールド更新処理」を使って、記事毎に変える方法です。需要あるのか?

MovableType.net フォームを記事ページに表示する際に、記事ごとに入力項目を「変えたい」という場面があるかはわかりませんが、記事ごとに入力項目を変える方法です。
※この方法は「選択項目によってフォームの表示項目を変更する(表示条件)」を使って入力項目の表示・非表示をコントロールしているため、Google Chrome のデベロッパーツールなどを使うと、閲覧者が非表示の入力項目を表示させることも出来てしまいます。

最初に MovableType.net フォームで全ての項目を含んだフォームを作成し、記事アーカイブテンプレートに埋め込みます。

フォームの項目

チェックボックスは表示条件のための親となるものです。オプションには分かりやすいように表示させる項目名と同じものを設定しています。

チェックボックスの設定

「複数行テキスト1,2,3」の表示条件で「チェックボックス」を選択して、「複数行テキスト1,2,3」のそれぞれを表示させるチェックボックスのオプション項目を選びます。

表示条件の設定

表示条件を設定後、下記のスクリプトを記事アーカイブテンプレートに埋め込み、記事ページを開くとチェックボックスの「複数行テキスト1」にチェックが入り、複数行テキストの入力項目「複数行テキスト1」が表示された状態になります。

<script>
  window.MTNetFormDataLayer = window.MTNetFormDataLayer || [];
  function MTNetForm(){MTNetFormDataLayer.push(arguments)};
  MTNetForm("updateValues", {
  'チェックボックス':'複数行テキスト1'});
</script>

カスタムスクリプトの動作確認

このスクリプトの「複数行テキスト1」の部分を記事ページごとに設定すれば、記事ごとに入力項目を変えてフォームを表示することができます。

今回はこの「複数行テキスト1」の部分を記事のカスタムフィールドで変えられるようにします。

まずはカスタムフィールドの新規作成で「名前」が「複数行テキスト1」「複数行テキスト2」「複数行テキスト3」のカスタムフィールドを「システムオブジェクト:記事」「タイプ:チェックボックス」で作成します。「名前」「識別子」はそれぞれわかりやすいようにします。

カスタムフィールドの作成

カスタムフィールドを作成すると記事の作成/編集画面にチェックボックスができます。このチェックボックスでチェックした複数行テキスト1,2,3 が表示条件により表示されます。

記事編集画面に追加されたカスタムフィールド

入力項目は MovableType.net フォームの表示条件を使って表示させるようにしているので、下記スクリプトの赤文字部分が記事毎に変えられれば記事毎に入力項目が違うフォームにすることができます。

<script>
  window.MTNetFormDataLayer = window.MTNetFormDataLayer || [];
  function MTNetForm(){MTNetFormDataLayer.push(arguments)};
  MTNetForm("updateValues", {
  'チェックボックス':'複数行テキスト1'});
</script>

スクリプト内の「複数行テキスト1」の部分を記事の作成/編集画面で選択したカスタムフィールドの値になるようにします。

チェックボックスにチェックがある場合は、スクリプト内に埋め込むテキストが書き出されるようにそれぞれのカスタムフィールドを MTIf タグで条件分岐します。

  <mt:If tag="CustomFieldValue" identifier="multiline01">'複数行テキスト1',</mt:If>
  <mt:If tag="CustomFieldValue" identifier="multiline02">'複数行テキスト2',</mt:If>
  <mt:If tag="CustomFieldValue" identifier="multiline03">'複数行テキスト3'</mt:If>

上記をスクリプトの中に埋め込んだものが下記になります。

<script>
  window.MTNetFormDataLayer = window.MTNetFormDataLayer || [];
  function MTNetForm(){MTNetFormDataLayer.push(arguments)};
  MTNetForm("updateValues", {
  'チェックボックス':[
  <mt:If tag="CustomFieldValue" identifier="multiline01">'複数行テキスト1',</mt:If>
  <mt:If tag="CustomFieldValue" identifier="multiline02">'複数行テキスト2',</mt:If>
  <mt:If tag="CustomFieldValue" identifier="multiline03">'複数行テキスト3'</mt:If>
  ]
  });
</script>

これで記事の作成/編集ページでチェックボックスのカスタムフィールドにチェックをするだけでフォーム入力欄の表示/非表示をコントロールできます。

チェックを入れた項目が表示されます

上記画像のようにチェックボックスにチェックをして表示させたフォームの該当部分が下記になります。

表示条件で設定した通りチェック済みの項目が表示される

ただし、見ての通り、このままではチェックボックスの項目が表示されてしまっているので、入力項目が簡単に変えられてしまいます。(複数行テキスト2 にチェックすると「複数行テキスト2」の入力欄が表示されてしまう。チェックを外せば非表示になってしまいます)

入力欄を簡単に変更されてしまわないように、チェックボックスの項目はカスタムCSSで非表示にしてしまいます。

フォームのデザインタブにある「フォーム用CSS」にチェックボックスを非表示にするスタイルを記述します。

div[data-column-id="c51a0336-3183-4ed2-b0c2-6eb1266251be"]{
display:none;
}

MovableType.net フォームのカスタムCSSを設定

記事ページを表示すると「チェックボックス」の項目が非表示になっていて簡単には入力項目を変更することはできなくなります。(ブラウザのデベロッパーツールなどを使うと簡単に変更できてしまうので、完全に防ぐことはできません。)

記事ごとに表示項目を変えるフォームの完成

以上、「記事毎に MovableType.net フォームの入力項目を変える」でした。

この記事は「Movable Type Advent Calendar 2022」16日目の記事です。

長くウェブサイトを運営しているとサーバー移転などでウェブサイトを別の場所に移動させる必要が出てくることがあると思います。

HTMLファイルなどをダウンロードして、そのまま新サーバーにアップロードするだけということもありますが、CMSなどを使って運営していたウェブサイトを移行する場合に、ついでにページのファイル名なども整理して変えたいということもあると思います。

旧URL:https://exsample.com/entry_yyyymmdd_hhmmss.html
新URL:https://exsample.com/entry_basename.html

この記事は 「Movable Type Advent Calendar 2021」 15日目の記事です。

サーバーのスペックが低いのが要因ではありますが、GOURMET VOXに記事を投稿するとInternal Server Errorが発生することがあります。都道府県ごとにブログになっていますが、特に記事数の多い東京に影響が出ています。(記事数の少ない都道府県は大丈夫)

サーバーを変えないと解決は出来ないと思っていたのですが、エムロジックさんから「FastThumbnail」という画像のサムネイル処理を高速化するためのプラグインがあることを知り、もしかしたら効果あるかなと思いインストールしてみました。

ダウンロードはGitHubのmt-plugin-fast-thumbnailから。

インストールはダウンロードしたZIPファイルを解凍してPluginフォルダにアップロードするだけです。

インストールが完了したらmt-config.cgiに環境変数を設定することでプラグインが動作するようになります。設定は下記の1行を追加するだけですが、動作モードは0、1、2の3パターンがあります。

StrictImageCheck   1
  • 「0」は実際に画像を読み込むことでサムネイル生成の可否判断を行います。Movable Type 5.2以降の処理と同等です。
  • 「1」は画像アイテムのファイルの存在確認と拡張子による確認を行います。画像の読み込みは行いません。
  • 「2」は画像アイテムとして登録されている画像は無条件でサムネイル生成可能であると判断します(Movable Type 5.13までの処理と同等です)

今回は一番効果のある「2」を設定しました。

結果としては効果てき面でした。今までInternal Server Errorで再構築もままならないこともありましたが、スムーズに公開されるようになりました。(たまにInternal Server Errorになるけど...)

おまけ
プラグインのインストール先はデフォルトではpluginフォルダですが、環境変数「PluginPath」を使うことでインストール先のフォルダを変更できます。

また、この環境変数で複数のインストール先を設定することもできるので、MovableTypeに同封されているプラグインと後から追加したプラグインを分けておくことができます。

環境変数:PluginPath

PluginPath plugins
PluginPath /path/to/added/plugins_folder

PluginPath環境変数でインストール先を分けておくことで、アップグレードの時などに後から追加したプラグインについてはフォルダーごと移動またはコピー&ペーストすれば済むので、再インストールが簡単になります。

トフxフォルダ

この記事は Movable Type Advent Calendar 2020 の7日目の記事です。3年ぶりの参加です。

先日、MovableType.netの相談を受けた中でサイトの構成上、ウェブページをそれぞれ属するフォルダ別の一覧ページで表示させたいところがありました。

丸12年になるブログをMovableType.netでリニューアル中

  • 投稿日:
  • by
  • カテゴリ:

20171216000453_blogpix.jpg

この記事は「Movable Type Advent Calendar 2017 - Adventar」の15日目の記事です。

先日、街中でこんな会話を耳にしました。

A:昔はみんなMTだったんだけどね〜
B:今はオートマチックですよね〜
A:自分の周りの若い子もみんなオートマチックだよ
B:オートマチックの方が楽ですから
A:でもオートマチックの方がメンテナンスが色々と大変じゃん。
B:でも周りにオートマチックの人が多いですから。
A:それにMTの方が色々と安全だし。
B:まぁ、事故は起こさないに越したことはないけど、万が一の時のために保険に入ってますから。
A:え?保険?
B:もちろん、自動車保険には入ってますよ。
A:そっちのオートマチックかよっ!

HTMLとCSSをひとつのテンプレートモジュールで管理する

  • 投稿日:
  • by
  • カテゴリ:

これは Movable Type Advent Calendar 2016 の15日目の記事です。

サイト構築でコーディングしているときは、後々の運用がスムーズにできるようHTMLやCSSをできるだけ整理してわかりやすくしておこうとすると思います。

しかし、それでも制作が進むにつれてだんだんとルールに合わない部分が出て来てしまったりします。特にCSSはセレクターの書き方やCSSファイルへの記述の位置などのルールが崩れ易いと思います。

movabletype.netでテーマを作ってみた。

このブログ記事は「Movable Type Advent Calendar 2015」の16日目の記事です。

Movable Typeのオンラインサービスであるmovabletype.netでテーマを作成してみました。

このmovabletype.netの最大の特徴はオンラインサービスというところです。そのため公式サイトにも謳われていますが、サーバーの管理をする必要がなく、常に最新版の安定した環境で使うことができます。

Movable Typeでサイトを管理することについて

  • 投稿日:
  • by
  • カテゴリ:

Movable Type Advent Calendar 2014の10日目の記事です。

Movable Typeでサイトを管理する際、カテゴリーページのURLが「http://www.URL/メインカテゴリー/サブカテゴリー/」となる設定が使われることがよくあると思います。

20141210181212_blogpix.jpg

このように「/メインカテゴリー/サブカテゴリー/」の様にディレクトリを切ってファイルを管理するのは、CMSを使わずにウェブサイト構築にDreamweaverなどを使ってHTMLファイルを作り、FTPソフトでアップロードしていた時代の名残なのかなと思います。このようにするとHTMLファイルなどファイル管理しやすかったですからね。

サイドバーのアイテム一覧に表示される画像

この記事は Movable Type Advent Calendar 2013 の5日目の記事です。

20131204134238_blogpix.png

このブログは「プロフェッショナルブログ 1.1」というデフォルトでMovable Typeに含まれているテーマを使っています(2013/12/05時点)。このテーマを使うとサイドバーにアイテムという項目があり、アイテムに登録した画像のサムネールが10件書き出されるようになっています。

このアイテム一覧の書き出しにはウィジェットテンプレートの「アイテム」というテンプレートが使われています。このウィジェットテンプレートは<mt:Assets>によって、「ブログに登録されたアイテムの中で画像から最新の10件」を書き出すようになっています。

ウィジェットテンプレートの「アイテム」テンプレートの一部。以下の部分で書き出すアイテムを画像だけ10件に設定してます。

<mt:Assets type="image" lastn="10">