www.ni4.jp

MovableType.net DashBoard Utilityとは？

MovableType.net DashBoard Utilityは、Chromeブラウザのエクステンションで、これをご利用いただくと、MovableType.netの管理画面をより使いやすくできる拡張機能です。
2016年12月に公開してから毎年のようにアップデートしており、現在は43名の方にご利用いただいています。

この拡張機能をChromeにインストールすると、以下のことができるようになります。

1. 各ウェブサイト／フォームのパネルが開閉式になり、高さが極端に狭められる
2. 新しくウェブサイトを作るためのリンクが最上部へ移動する
3. 新しく作成したウェブサイトが最上部に追加される
4. ウェブサイトの順序を任意に変えられる
5. パネルの開閉、ウェブサイトの順序をCookieに保存できる（1年/変更の都度延長）
6. ダッシュボードから直接、ウェブサイト／ブログのテンプレート編集画面へ移動できる
7. ファイルマネージャ内で画像のサムネイルを表示する
8. MT.netフォーム、サーチサービスにも対応
9. ダッシュボードで「新しく〜を作る」をサイドバーに移動
10. プレビュー／確認のボタンをスクロール追随型に変更
11. 記事・ウェブページ編集時のサイドバーをソータブルに変更
12. 履歴比較ボタンを最上部に移動

これまでにリリースした機能については、過去の記事をご覧いただけると詳細を確認できます。

そして今回、新たに2つの機能を実装しています。
以降はその機能をご紹介します。

新機能1：カスタムスクリプトのコードをハイライト表示

昨年リリースされ、このブログでもいろいろな利用方法をご紹介している「カスタムブロック」
これを作るときに、JavaScriptやCSSのコードをカスタムスクリプトとして書き込むのですが、通常この部分はハイライト表示されずこのような感じになってしまいます。

このままだと見にくいというか、ちょっと使いづらいと思うことが増えてきたので、テンプレート編集画面と同じようにハイライト表示するよう対応しました。
拡張機能をインストールすると、こんな感じになります！

…うん、我ながらすごく見やすくなりましたね（笑）
ちなみにこのコードは先日公開した「画像アップロード時にネイティブLazy-load対応にする」という記事で作ったカスタムブロックのJavaScript部分です。

新機能2：エディタCSSのコードをハイライト表示

また、管理画面上での記事/ウェブページのプレビューに使用するエディタCSS部分も、これまではこんな感じでした。

普段はテキストエディタなどで別に書いたものをここに貼り付けることが多いので、それほど困っていませんが、ちょっと変更を試したいときなど、やはりハイライト表示されていた方が見やすいと思うので、ここもハイライト表示に対応しました。

うん、これまた見やすい！（自画自賛…笑）

まとめ

MovableType.netにブロックエディタが搭載されてから1年半、カスタムブロックにハマっている私ですが、これらを利用する際の最大のメリットは「記事/ウェブページ作成時の管理画面の見た目」、いわゆる見たまま編集に近いことができる点と思っています。

今回のアップデートで、カスタムブロックを作成するのも、記事/ウェブページ作成時のCSSを調整するのも、今まで以上にやりやすくなったと思います。

MovableType.netを利用して多くのウェブサイトを構築している開発者の方はもちろん、自身のウェブサイトやブログを運営している方にも便利な機能がたくさんと思いますので、ぜひこのChromeエクステンションをお試しください！