Download - MTAppjQueryでマニュアルいらずの管理画面を
![Page 1: MTAppjQueryでマニュアルいらずの管理画面を](https://reader031.vdocuments.site/reader031/viewer/2022013109/5873bcb91a28abbc788b5a5f/html5/thumbnails/1.jpg)
MTAppjQueryで マニュアルいらずの管理画面を
2016-10-09 Web制作・運営のツボ vol.1
柳谷真志(@mersy)
![Page 2: MTAppjQueryでマニュアルいらずの管理画面を](https://reader031.vdocuments.site/reader031/viewer/2022013109/5873bcb91a28abbc788b5a5f/html5/thumbnails/2.jpg)
bit part 紹介
• Movable Type、Movable Type Cloud、PowerCMS を利用した構築がメイン業務
• Six Apart の ProNet、
Alfasado の PowerCMS Partner Pro
• 日本各地+αでリモートワーク
![Page 3: MTAppjQueryでマニュアルいらずの管理画面を](https://reader031.vdocuments.site/reader031/viewer/2022013109/5873bcb91a28abbc788b5a5f/html5/thumbnails/3.jpg)
リモートワーク!!
photo by デザイン日本地図のフリー画像 http://www.abysse.co.jp/japan/d-japanmap/map07-1.html
NZ
New !!
![Page 4: MTAppjQueryでマニュアルいらずの管理画面を](https://reader031.vdocuments.site/reader031/viewer/2022013109/5873bcb91a28abbc788b5a5f/html5/thumbnails/4.jpg)
bit part 紹介
hei_a
mersy
tinybeans
BUNh2ham
�
コーディング指示 構築指示
コーディングデータ
�
![Page 5: MTAppjQueryでマニュアルいらずの管理画面を](https://reader031.vdocuments.site/reader031/viewer/2022013109/5873bcb91a28abbc788b5a5f/html5/thumbnails/5.jpg)
bit part 紹介
• MTAppjQuery(マニュアルいらずの管理画面を作る)
• SimilarEntries(関連記事を自動で表示)
• Data API Extend Search、Data API PHP Cache
• MTML Completions(Sublime Text、Atom、IntelliJ IDEA)
• flexibleSearch.js(超高速 JavaScript 検索)
• その他のMTプラグイン多数
NEW
![Page 6: MTAppjQueryでマニュアルいらずの管理画面を](https://reader031.vdocuments.site/reader031/viewer/2022013109/5873bcb91a28abbc788b5a5f/html5/thumbnails/6.jpg)
What is MTAppjQuery?
• Movable Type の管理画面を JavaScript / jQuery / CSS でカスタマイズ
• jQuery のプラグインを使う方法と同じ
• Perl の知識、MTML の知識すら不要
![Page 7: MTAppjQueryでマニュアルいらずの管理画面を](https://reader031.vdocuments.site/reader031/viewer/2022013109/5873bcb91a28abbc788b5a5f/html5/thumbnails/7.jpg)
![Page 8: MTAppjQueryでマニュアルいらずの管理画面を](https://reader031.vdocuments.site/reader031/viewer/2022013109/5873bcb91a28abbc788b5a5f/html5/thumbnails/8.jpg)
どんなことできるの?
![Page 9: MTAppjQueryでマニュアルいらずの管理画面を](https://reader031.vdocuments.site/reader031/viewer/2022013109/5873bcb91a28abbc788b5a5f/html5/thumbnails/9.jpg)
例えば、関連記事を選択するとき。
![Page 10: MTAppjQueryでマニュアルいらずの管理画面を](https://reader031.vdocuments.site/reader031/viewer/2022013109/5873bcb91a28abbc788b5a5f/html5/thumbnails/10.jpg)
『この記事に関連する記事の記事IDをカンマ区切りで入力してください。』
マニュアル記事IDってどこで確認するんだっけ? カンマの後にスペース入れていいんだっけ?
![Page 11: MTAppjQueryでマニュアルいらずの管理画面を](https://reader031.vdocuments.site/reader031/viewer/2022013109/5873bcb91a28abbc788b5a5f/html5/thumbnails/11.jpg)
『この記事に関連する記事の記事IDをカンマ区切りで入力してください。なお、記事IDは~~で確認することができます。また、カンマの後には全角スペースなど半角スペース以外は入れないようにご注意ください。』
マニュアル 追記
![Page 12: MTAppjQueryでマニュアルいらずの管理画面を](https://reader031.vdocuments.site/reader031/viewer/2022013109/5873bcb91a28abbc788b5a5f/html5/thumbnails/12.jpg)
MTAppListing なら
説明なくてもクリック
クリックすると…
![Page 13: MTAppjQueryでマニュアルいらずの管理画面を](https://reader031.vdocuments.site/reader031/viewer/2022013109/5873bcb91a28abbc788b5a5f/html5/thumbnails/13.jpg)
記事を選択 並び順はドラッグアンドドロップで変更
記事タイトルでフィルタ可能
マニュアル 不要
![Page 14: MTAppjQueryでマニュアルいらずの管理画面を](https://reader031.vdocuments.site/reader031/viewer/2022013109/5873bcb91a28abbc788b5a5f/html5/thumbnails/14.jpg)
例えば、フォトギャラリーの管理。
![Page 15: MTAppjQueryでマニュアルいらずの管理画面を](https://reader031.vdocuments.site/reader031/viewer/2022013109/5873bcb91a28abbc788b5a5f/html5/thumbnails/15.jpg)
『ギャラリーの画像は10枚まで登録できます。画像の順番は、「ギャラリー順序」フィールドに、カスタムフィールドのベースネームをカンマ区切りで登録してください。初期値は「image_01,image_02,image_03,・・・」となります。』
マニュアルカスタムフィールドのベースネームってなん
でしたっけ?そもそも面倒です、それ。。。
![Page 16: MTAppjQueryでマニュアルいらずの管理画面を](https://reader031.vdocuments.site/reader031/viewer/2022013109/5873bcb91a28abbc788b5a5f/html5/thumbnails/16.jpg)
MTAppJSONTable +
MTAppAssetFieldsドラッグアンドドロップで並び替え可能
代替テキストやリンクも設定 MT本体のアップロード機能を利用
マニュアル 不要
![Page 17: MTAppjQueryでマニュアルいらずの管理画面を](https://reader031.vdocuments.site/reader031/viewer/2022013109/5873bcb91a28abbc788b5a5f/html5/thumbnails/17.jpg)
ちょっと待って、そもそもどのメニューからそのペー
ジにいくんだっけ?
![Page 18: MTAppjQueryでマニュアルいらずの管理画面を](https://reader031.vdocuments.site/reader031/viewer/2022013109/5873bcb91a28abbc788b5a5f/html5/thumbnails/18.jpg)
『記事を作成する場合は「ファーストウェブサイト > ファーストブログ」と移動して「新規作成」をクリックしてください。ギャラリーを管理するときは「ファーストウェブサイト > ギャラリー管理」ブログへ移動してください。』
マニュアル
![Page 19: MTAppjQueryでマニュアルいらずの管理画面を](https://reader031.vdocuments.site/reader031/viewer/2022013109/5873bcb91a28abbc788b5a5f/html5/thumbnails/19.jpg)
JSONの設定書くだけでユーザー専用のメニューも
簡単に作れます
ユーザー専用の管理メニューを提供
![Page 20: MTAppjQueryでマニュアルいらずの管理画面を](https://reader031.vdocuments.site/reader031/viewer/2022013109/5873bcb91a28abbc788b5a5f/html5/thumbnails/20.jpg)
確かに便利…でもいちいちダッシュボードに戻るの
面倒です…
![Page 21: MTAppjQueryでマニュアルいらずの管理画面を](https://reader031.vdocuments.site/reader031/viewer/2022013109/5873bcb91a28abbc788b5a5f/html5/thumbnails/21.jpg)
JSONの設定書くだけでユーザー専用のメニューも
簡単に作れます
注目
![Page 22: MTAppjQueryでマニュアルいらずの管理画面を](https://reader031.vdocuments.site/reader031/viewer/2022013109/5873bcb91a28abbc788b5a5f/html5/thumbnails/22.jpg)
すべてのページからダッシュボードと同じ管理メニューを開ける
どこからでも作業するページに遷移可能
マニュアル 不要
![Page 23: MTAppjQueryでマニュアルいらずの管理画面を](https://reader031.vdocuments.site/reader031/viewer/2022013109/5873bcb91a28abbc788b5a5f/html5/thumbnails/23.jpg)
ほんの一部ですがカスタマイズ例をご覧ください
![Page 24: MTAppjQueryでマニュアルいらずの管理画面を](https://reader031.vdocuments.site/reader031/viewer/2022013109/5873bcb91a28abbc788b5a5f/html5/thumbnails/24.jpg)
運用に合わせてフィールドを変更
ラベルやプレースホルダーを変更
本文欄を非表示
続きタブだけ非表示
ヒントを表示
鉛筆アイコンで誤編集を防止最大値を設定
![Page 25: MTAppjQueryでマニュアルいらずの管理画面を](https://reader031.vdocuments.site/reader031/viewer/2022013109/5873bcb91a28abbc788b5a5f/html5/thumbnails/25.jpg)
運用に合わせてボタンを追加
![Page 26: MTAppjQueryでマニュアルいらずの管理画面を](https://reader031.vdocuments.site/reader031/viewer/2022013109/5873bcb91a28abbc788b5a5f/html5/thumbnails/26.jpg)
別コンテンツ用のデータを作成
![Page 27: MTAppjQueryでマニュアルいらずの管理画面を](https://reader031.vdocuments.site/reader031/viewer/2022013109/5873bcb91a28abbc788b5a5f/html5/thumbnails/27.jpg)
カテゴリごとに入力欄を変更
![Page 28: MTAppjQueryでマニュアルいらずの管理画面を](https://reader031.vdocuments.site/reader031/viewer/2022013109/5873bcb91a28abbc788b5a5f/html5/thumbnails/28.jpg)
大量のカスタムフィールドを1つの表入力にまとめる
▶
![Page 29: MTAppjQueryでマニュアルいらずの管理画面を](https://reader031.vdocuments.site/reader031/viewer/2022013109/5873bcb91a28abbc788b5a5f/html5/thumbnails/29.jpg)
入力欄の並べ替えは自由自在
▶
![Page 30: MTAppjQueryでマニュアルいらずの管理画面を](https://reader031.vdocuments.site/reader031/viewer/2022013109/5873bcb91a28abbc788b5a5f/html5/thumbnails/30.jpg)
概要欄もリッチテキストエディタに
![Page 31: MTAppjQueryでマニュアルいらずの管理画面を](https://reader031.vdocuments.site/reader031/viewer/2022013109/5873bcb91a28abbc788b5a5f/html5/thumbnails/31.jpg)
更新者チェックでロールバック防止
![Page 32: MTAppjQueryでマニュアルいらずの管理画面を](https://reader031.vdocuments.site/reader031/viewer/2022013109/5873bcb91a28abbc788b5a5f/html5/thumbnails/32.jpg)
MTAppjQuery があれば
• JavaScriptとCSSでできることなら何でもできます
• 可能性は無限大
• Up to you!
MTAppjQuery
![Page 33: MTAppjQueryでマニュアルいらずの管理画面を](https://reader031.vdocuments.site/reader031/viewer/2022013109/5873bcb91a28abbc788b5a5f/html5/thumbnails/33.jpg)
ご静聴ありがとう ございました。
MT::Lover::bitpart
Update bit part, everyday!!