小粋空間  -  a cheap joke and a play on words site

Movable Typeのブロックエディタ（MTBlockEditor）のカスタムブロックの紹介です。

１．はじめに

Movable Type 8からMTBlockEditorがデフォルトのプラグインとなりました。

MTBlockEditorではデフォルトで用意されているブロックの他に、任意のブロック（カスタムブロック）を作成することができます。

ここでは、公式マニュアルに掲載されている「Markdown」ブロックを作ってみたいと思います。

参考：カスタムブロック機能を利用して高機能な Markdown を利用する

２．カスタムブロック（Markdown）の作成

左メニューより「ブロックエディタ」→「カスタムブロック」をクリック。

「新規作成」をクリック。

• 名前：Markdown
• 識別子：markdown

を設定。アイコンは設定しなくて大丈夫です。

「ブロック」の「+ブロックを追加」をクリック。

「テキスト（複数行）」をクリック。

• クラス名：source
• ブロック要素：P
• フォーマット：なし

を設定または選択。「ラベル」「説明」「規定値」は設定不要です。

「カスタムスクリプト」に下記の内容を設定。これがMarkdown記法に対応するためのスクリプトになります。

<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.1.0/marked.min.js" integrity="sha256-POA+Q3FC8tyo/jZhQrw40H5mKcWAABdxNeUQ/uhIm4U=" crossorigin="anonymous"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
if (document.body.dataset.hasCompiledHtml) {
return;
}
const source = document.querySelector(".source").innerHTML;
MTBlockEditorSetCompiledHtml(marked(source));
});
</script>

「コンテナ要素で包む」の「編集した内容をDIV要素で囲む」と「ブロックの追加と削除」の「ブロックの追加と削除を許可する」のチェックを外します。「ブロックの追加と削除を許可する」のチェック有無の違いは３項で説明します。

「プレビューの表示」の「プレビューを表示する」はチェックします。チェックすることで、テキストエリアからフォーカスが外れると、プレビュー表示に切り替わりので分かりやすいと思います。

「保存」をクリックして作成完了です。

３．カスタムブロック（Markdown）の利用

ここではコンテンツデータの「テキスト（複数行）」から利用します。

「フォーマット」から「ブロックエディタ」を選択。

「+ブロックを追加」をクリック。

「Markdown」を選択（「名前」で設定した「Markdown」が表示されます）。

ここに表示されたアイコンは下記のSVGで生成されているようです。

data:image/svg xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><style>text{font-family:'Arial';font-weight:bold;font-size:405px}</style><circle r='256' cx='256' cy='256' stroke='none' fill='#666'></circle><text x='256' y='274' text-anchor = 'middle' dominant-baseline = 'central' fill='white'>M</text></svg>

Markdown用のテキストエリアが表示されます。テキストエリアにフォーカスがあたったとき、「名前」で設定した「Markdown」がヘッダに表示されます。

設定画面で、「ブロックの追加と削除を許可する」のチェックを入れると、次のようにMarkdownブロック内に他のブロックが追加可能になります。

Markdown記法で入力してみます。「*～*」がイタリック、「**～**」が太字、「***～***」がイタリック+太字です。

フォーカスが外れると、プレビューが表示されます。

設定画面の「プレビューを表示する」のチェックを外せば、フォーカスが外れてもMarkdown記法がそのまま表示されます。

2024年5月22日からページにアクセスすると、他のページに誘導される事象が発生しました。

切り分けのため、2024年5月23日の19時頃にサイトのすべての情報を削除しましたが事象が改善せず、24日にレンタルサーバ会社に問い合わせ、原因が判明したのがその日の昼頃。

24日の午後から手作業でデータを少しずつ復元させ、現在はほぼ通常運用に戻っています。

備忘録で状況を残しておきます。

１．事象の詳細

最初に気づいたのは、トップページ（index.php）の内容が書き換えられる事象でした。

その後、.htaccessが自動生成され、いくつかのページがトップページに誘導される内容が記載されていました。

そこからさらに（トップページに埋め込まれた、暗号化されたスクリプトで）別のページにリダイレクトされていました。

それらのファイルを削除したり、再構築で上書きしても、すぐに元の内容に書き換えられてしまいます。

topコマンドやpsコマンドでプロセスを確認しても怪しいプロセスはありません。

www配下のすべてのページをバックアップ後、削除しましたが、index.phpや.htaccessが自動生成される事象が解消ぜず、rootユーザーで実行されていると推測し、レンタルサーバ会社のサポートにチャットで問い合わせ。

借りているレンタルサーバのプランには、rootに昇格する権限はありませんでした。

上記の状況を伝えたところ、rootで不審なプロセスが動作していたようで、プロセスを削除して頂き、ようやく事象が解消しました。

その後、MTを新規インストールしてブログの再構築を実施し、画像等のアセットはバックアップデータから丸ごと復元せず、ひとつずつ確認しながら戻しています。

２．原因と対処

おそらく、契約しているアカウントのログインパスワードを破られた後、rootのパスワードも破られて該当のプロセスが仕掛けられたものと思われます。

サポートから「現在動作プロセスが残っております」と言われたのですが、こちらで確認できる範囲のプロセスに該当するものがないことを伝えたところ、サポート側でプロセスを削除して頂けました。

３．今後の対応

サーバログインパスワードはかなり強固なものを設定していましたが、今後は定期的に変更したいと思います。

Movable Typeのダッシュボードプラグインの作り方を紹介します。

１．はじめに

ダッシュボードプラグインを作る機会があったので、サンプルを使って作り方をまとめてみました。

ここでは下記のサンプルを紹介します。

ユーザーダッシュボードに「サンプルダッシュボードウィジェット」を表示します。

選択すると、下記のようにログインしたユーザー名を表示します。

×印をクリックすると、ウィジェットが削除されます。

このサンプルプラグインの構造は次の通りです。

DashboardSample
 ├ config.yaml
 ├ lib
 │　└ DashboardSample
 │　　　└ CMS.pm
 └ tmpl
　　 └ sample.tmpl

サンプルは下記のURLよりダウンロードできます。

DashboardSample.tar.gz

以下、それぞれのファイルについて解説します。

２．config.yaml

下記にサンプルを示します。

name: DashboardSample
id: DashboardSample
widgets:
  DashboardSample:
    label: サンプルダッシュボードウィジェット
#    plugin: $DashboardSample
    template: sample.tmpl
    order: 1000
    singular: 1
    set: main
    handler: $DashboardSample::DashboardSample::CMS::test
    view:
      - user

主な項目の意味は次の通りです。

• template：ダッシュボード用テンプレートファイル名
• order：表示順序
• singular：単独表示（"1"固定。プルダウンから選択・表示したあと、プルダウンの候補から外すためのもの）
• set：表示領域（main：中央／sidebar：右カラム）
• handler：ダッシュボード表示用ハンドラ名
• view：表示種別（user：ユーザーダッシュボード／system：システム管理画面／website：親サイト／blog：子サイト）

"plugin"という項目もありますが、記述無しでも動作するようなのでコメントアウトしています。

記述する場合は、サンプルのように「id:」の値を"$"つきで記述してください。

３．sample.tmpl

下記にサンプルを示します。

<mtapp:widget
  id="DashboardSample"
  class="widget DashboardSample"
  label="サンプルダッシュボードウィジェット"
  can_close="1">
<p><mt:var name="name"></p>
</mtapp:widget>

ここではパラメータ「name」の値だけを表示するようにしています。

<p><mt:var name="name"></p>

ダッシュボードを表示したあとに×印で削除できるようにするには、mtapp:widgetタグに「can_close="1"」を付与します。

４．CMS.pm

下記にサンプルを示します。

package DashboardSample::CMS;
 
use strict;
use warnings;
 
sub test {
    my $app = shift;
    my ( $tmpl, $param ) = @_;
 
    my $user = $app->user;
}
 
1;

sample.tmplの"name"に値を渡すために、下記の1行を追加しています。

    $param->{name} = $user->nickname;