MT福岡 Web制作・運営のツボ Vol.1

1. MTAppjQueryで
マニュアルいらずの管理画面を
2016-10-09
Web制作・運営のツボ vol.1
柳谷真志（@mersy）

2. bit part 紹介
• Movable Type、Movable Type Cloud、
PowerCMS を利用した構築がメイン業務
• Six Apart の ProNet、
Alfasado の PowerCMS Partner Pro
• 日本各地＋αでリモートワーク

3. リモートワーク!!
photo by デザイン日本地図のフリー画像 http://www.abysse.co.jp/japan/d-japanmap/map07-1.html
NZ
New !!

4. bit part 紹介
hei_a
mersy
tinybeans
BUNh2ham
ƭ
コーディング指示 構築指示
コーディングデータ
ƭ

5. bit part 紹介
• MTAppjQuery（マニュアルいらずの管理画面を作る）
• SimilarEntries（関連記事を自動で表示）
• Data API Extend Search、Data API PHP Cache
• MTML Completions（Sublime Text、Atom、IntelliJ IDEA）
• flexibleSearch.js（超高速 JavaScript 検索）
• その他のMTプラグイン多数
NEW

6. What is MTAppjQuery?
• Movable Type の管理画面を JavaScript / jQuery /
CSS でカスタマイズ
• jQuery のプラグインを使う方法と同じ
• Perl の知識、MTML の知識すら不要

8. どんなことできるの？

9. 例えば、
関連記事を選択するとき。

10. 『この記事に関連する記事の記事IDをカンマ区切りで入力し
てください。』
マニュアル
記事IDってどこで確認するんだっけ？
カンマの後にスペース入れていいんだっけ？

11. 『この記事に関連する記事の記事IDをカンマ区切りで入力し
てください。なお、記事IDは～～で確認することができま
す。また、カンマの後には全角スペースなど半角スペース以
外は入れないようにご注意ください。』
マニュアル 追記

12. MTAppListing なら
説明なくてもクリック
クリックすると…

13. 記事を選択
並び順はドラッグアンドドロップで変更
記事タイトルでフィルタ可能
マニュアル
不要

14. 例えば、
フォトギャラリーの管理。

15. 『ギャラリーの画像は10枚まで登録できます。画像の順番は、
「ギャラリー順序」フィールドに、カスタムフィールドのベー
スネームをカンマ区切りで登録してください。初期値は
「image_01,image_02,image_03,・・・」となります。』
マニュアル
カスタムフィールドのベースネームってなん
でしたっけ？
そもそも面倒です、それ。。。

16. MTAppJSONTable
+
MTAppAssetFields
ドラッグアンドドロップで並び替え可能
代替テキストやリンクも設定
MT本体のアップロード機能を利用
マニュアル
不要

17. ちょっと待って、そもそも
どのメニューからそのペー
ジにいくんだっけ？

18. 『記事を作成する場合は「ファーストウェブサイト > ファー
ストブログ」と移動して「新規作成」をクリックしてくださ
い。ギャラリーを管理するときは「ファーストウェブサイト
> ギャラリー管理」ブログへ移動してください。』
マニュアル

19. JSONの設定書くだけで
ユーザー専用のメニューも
簡単に作れます
ユーザー専用の管理メニューを提供

20. 確かに便利…でもいちいち
ダッシュボードに戻るの
面倒です…

21. JSONの設定書くだけで
ユーザー専用のメニューも
簡単に作れます
注目

22. すべてのページからダッシュボードと同じ
管理メニューを開ける
どこからでも作業するページに遷移可能
マニュアル
不要

23. ほんの一部ですがカスタマ
イズ例をご覧ください

24. 運用に合わせてフィールドを変更
ラベルやプレースホルダーを変更
本文欄を非表示
続きタブだけ非表示
ヒントを表示
鉛筆アイコンで
誤編集を防止
最大値を設定

25. 運用に合わせてボタンを追加

26. 別コンテンツ用のデータを作成

27. カテゴリごとに入力欄を変更

28. 大量のカスタムフィールドを１つ
の表入力にまとめる
▶

29. 入力欄の並べ替えは自由自在
▶

30. 概要欄もリッチテキストエディタに

31. 更新者チェックでロールバック防止

32. MTAppjQuery があれば
• JavaScriptとCSSでできることなら何でもできます
• 可能性は無限大
• Up to you!
MTAppjQuery

33. ご静聴ありがとう
ございました。
MT::Lover::bitpart
Update bit part, everyday!!