ディレクター・ノンプログラマー目線のmovable typeでのサイト運営・保守
TRANSCRIPT
![Page 1: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/1.jpg)
ディレクター・ノンプログラマー目線の Movable Typeでのサイト構築・保守
![Page 2: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/2.jpg)
西山 泰史 にしやま やすふみ
株式会社ジャクスタポジション 札幌市在住のウェブディレクター 創業13年目(法人4期目) 2004年頃よりMovable Type利用 好きなMTタグは、MTIf
![Page 3: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/3.jpg)
西山 泰史 にしやま やすふみ
創業時よりMovable Typeをプラットフォームにウェブサイトを構築 2013年よりMT蝦夷を主宰 2015年よりウェブディレクション研究会(仮称)をスタート
三度の飯より食べることが好き
![Page 4: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/4.jpg)
ジャクスタと言えば
![Page 5: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/5.jpg)
Webデザイナーのためのショッピングカート
SKELETON CART http://skeleton.juxtaposition.jp/
Movable Typeの画像アップロード機能補助プラグイン
ImageUploadUtility http://skeleton.juxtaposition.jp/image-upload-utility/
Movable Type用プレビュー機能強化プラグイン
DynamicPreview
http://skeleton.juxtaposition.jp/dynamic-preview/
![Page 6: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/6.jpg)
本日のアジェンダ
![Page 7: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/7.jpg)
1. Movable Typeの歴史を知ろう
2. MTのいいところ/残念なところ
3. クライアントのタイプ別にみるライセンス選定事例
4. 構築フロー事例(分業の事例)
5. ウェブサイト運営に効く弊社プラグインのご紹介
![Page 8: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/8.jpg)
Movable Typeの歴史を知ろう
![Page 9: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/9.jpg)
2001年にトロット夫妻の手によりリリース フロントエンド(デザイナー)のMenaが、 それまでよりもっと機能的で使いやすいブログを要望。 Menaの「これが欲しい」をもとにエンジニアのBenが開発。
カテゴリー分類や、コメント・トラックバック機能のほか、 特にページテンプレート(MTML)が特徴的だった。
2001年にSix Apartとして起業。 社名の由来は「誕生日が6日しか離れていなかったから」 日本ではネオテニー社(伊藤穰一さん、平田大治さん在籍)が その普及に活躍した。
![Page 10: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/10.jpg)
2001年 Movable Type リリース
2003年 米国Six Apartの日本法人が設立
2004年 Movable Type 3 日本語版を販売開始
2007年 Movable Type 4 リリース
2009年 Movable Type 5 リリース
2011年 日本法人が独立(インフォコム株式会社グループ企業)
2012年 Movable Type EZ(その後のMTクラウド)リリース
2013年 Movable Type 6 リリース 1月、MTDDC Meetup KYUSHU開催(MT福岡発足)
10月、MTDDC Meetup HOKKAIDO 開催(MT蝦夷発足)
2014年 海外事業の再展開を開始
2015年 MovableType.net リリース
2016年 6月、Employee Buy-OutによりSix Apart社独立
![Page 11: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/11.jpg)
全国におよそ 300社のProNet加盟企業
![Page 12: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/12.jpg)
全国におよそ 300社のProNet加盟企業
2008年より加盟
![Page 13: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/13.jpg)
Movable Type ユーザーコミュニティ 北海道
東北
東京
愛媛名古屋
新潟
長野
広島 関西福岡熊本
鹿児島
神戸
佐賀
https://www.movabletype.jp/mtug/
![Page 14: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/14.jpg)
Movable Typeのいいところ
![Page 15: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/15.jpg)
①ファイル形式を問わず静的ファイルを出力
CSV JSONPHP
HTML CSS javascript
![Page 16: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/16.jpg)
HTMLなど Database
再構築=書き出し
DBにアクセスせず ウェブサイトを閲覧
![Page 17: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/17.jpg)
Movable TypeからJSONファイルを出力し、 それを検索対象とすることも可能
![Page 18: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/18.jpg)
②テンプレートの構造を管理画面上から俯瞰
インデックス
カテゴリ
月別・日別
…
記事別
…
![Page 19: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/19.jpg)
テンプレートの管理
![Page 20: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/20.jpg)
現在のテンプレートが、 ほかのどのテンプレートを インクルードしているか すぐに把握できる
Movable Typeの テンプレート編集は 管理画面でほぼ全てを操作
※エディタを使用して外部から テンプレートを構築することもできます。
![Page 21: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/21.jpg)
③MTMLの学習コストが低い (テンプレートの可読性)
![Page 22: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/22.jpg)
Movable Type Markup LanguageMovable Typeで利用するテンプレート記述言語 HTMLを拡張し、MTタグとして利用できる。
![Page 23: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/23.jpg)
ex. ブログ記事タイトル
<?php the_title(); ?> ↓ <mt:EntryTitle>
![Page 24: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/24.jpg)
記事がある場合
<a href=“01.html”>記事タイトル①</a><br> <a href=“02.html”>記事タイトル②</a><br> <a href=“03.html”>記事タイトル③</a><br> ・ ・ ・
記事がない場合
<p>記事がありません</p>
ex. ブログ記事一覧
![Page 25: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/25.jpg)
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?> <a href="<?php the_permalink(); ?>”>
<?php the_title(); ?></a><br> <?php endwhile; ?>
<?php else : ?>
<p>記事がありません</p>
<?php endif; ?>
ex. ブログ記事一覧(WP)
![Page 26: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/26.jpg)
<mt:Entries>
<a href=“<mt:EntryPermaLink>”> <mt:EntryTitle></a><br>
<mt:Else>
<p>記事がありません</p>
</mt:Entries>
ex. ブログ記事一覧(MT)
![Page 27: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/27.jpg)
④公開中のページを編集する際も 確認用ファイルを出力できる
![Page 28: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/28.jpg)
ファイルを複製
①ファイルを選択
②複製でGO
③複製が完了
![Page 29: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/29.jpg)
出力ファイル名を変更
④ファイル名変更
⑤実際に出力される内容を確認
![Page 30: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/30.jpg)
サーバーの同じ場所に index.html と test.html が出力された状態
![Page 31: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/31.jpg)
⑥test.htmlをリネームして index.htmlを上書き
確認後にファイルを上書き
⑦メインページ(index.html)を削除 ⑧メインページのコピーを「メインページ」に変更
これだとリビジョン(更新履歴)が残らないので、 test.htmlのソースをコピーするのがいいかも。
![Page 32: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/32.jpg)
⑤管理画面もMTML
![Page 33: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/33.jpg)
MTMLでカスタマイズも可能
![Page 34: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/34.jpg)
管理画面のカスタマイズなら!
PerlやMTMLの知識が無くても jQueryでMTの管理画面をカスタマイズできる
↑bit part 柳谷さん この会場にいます
![Page 35: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/35.jpg)
⑥再構築
![Page 36: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/36.jpg)
MTMLの書き方を間違ったり バージョンアップが原因で
動かないプラグインがあっても
![Page 37: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/37.jpg)
画面が白くならない
![Page 38: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/38.jpg)
間違ったまま「保存/再構築」しても
![Page 39: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/39.jpg)
保存しない/ファイルを出力しない
公開中のサイトに 影響しない
![Page 40: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/40.jpg)
ちょっと残念なところ
![Page 41: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/41.jpg)
①再構築が…
(́Д`;)
![Page 42: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/42.jpg)
再構築を早めるためにできること
•モジュールのキャッシュ化 •アーカイブテンプレートの活用 •テンプレートの手動再構築 •再構築キュー cron の利用 •利用しているプラグインの見直し
![Page 43: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/43.jpg)
再構築ってどれぐらいの頻度? 誰が支払うべきコストなのか?
![Page 44: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/44.jpg)
②ドキュメント…
(́Д`;;)
![Page 45: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/45.jpg)
![Page 46: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/46.jpg)
お、おう…
![Page 47: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/47.jpg)
ドキュメントでわからないこと
MTQ
![Page 48: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/48.jpg)
ドキュメントでわからないこと
MTCafe
![Page 49: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/49.jpg)
③動的な出力が…
(́Д`;;;)
![Page 50: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/50.jpg)
ダイナミック・パブリッシング
•Movable Type標準機能 標準機能でも動的出力ができます。
•Perl版ダイナミック・パブリッシング 藤本壱さんのプラグイン
•DynamicMTML アルファサードさんのプラグイン
![Page 51: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/51.jpg)
④ライセンス料…
(́Д`;;;;)
![Page 52: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/52.jpg)
実はライセンスのバリエーションが多い
90,000円(税別) 1,800,000円(税別)
0.07ドル/1時間 月額5,000円~
![Page 53: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/53.jpg)
サービス型CMS MovableType.net
月額約2,100円(税別)~
![Page 54: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/54.jpg)
CPIのレンタルサーバー ACE01
月額1,500円(税別) ※3ユーザー・ライセンス
![Page 55: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/55.jpg)
クライアントのタイプ別にみる ライセンス選定事例
![Page 56: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/56.jpg)
北海道大学バスケットボール連盟
1. 更新担当者が交代するため、スキルレベルが一定ではなかった。
2. 連盟での運営のため、初期構築予算が限られていた。
3. 更新は年に数回まとめて実施していた。
MovableType.netを採用
北海道内の複数の大学バスケットボール部からなる連盟の ウェブサイト。大会結果などを掲載。
※FONTPLUS、絶賛利用中!
![Page 57: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/57.jpg)
北照高等学校(小樽市)北海道小樽市の私立高等学校。現在アルペンスキー・野球・ 男子サッカー・女子サッカーに絞って全国から生徒を募っている。
1. 比較的多い更新作業にかかる人的・時間的負担を減らしたい。
2. 独自ドメインを持っていなかった。→公開時からSSL化したい
3. 保護者向けクローズドコンテンツを載せたい。
MovableType.netを採用
※FONTPLUS、絶賛利用中!
![Page 58: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/58.jpg)
J-Physics(北海道大学理学研究院)
CPI ACE01(MTオプション)を利用
1. 更新作業が多くなるとが予想されたが、担当者はHTML等に詳しくなかった。
2. 初期コストを抑えたかった。
3. 年に数回開催されるイベント用に専用の申込フォームをその都度用意する必要があった。(A-Formを採用)
文科省の補助金を活用した2015年~2019年の時限公開サイト。 研究成果の公表や各種イベント情報を掲載。
※FONTPLUS、絶賛利用中!
![Page 59: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/59.jpg)
羅臼海産株式会社(羅臼町)
Movable Type(ソフトウェア)を利用
1. SKELETON CARTを導入したい。
2. 専用の管理画面を開発し、売上把握と送り状発行を連携したい。
3. コンテンツを充実させる必要がある
4. 当初掲載の商品数は少なく、徐々に増やしたい。
羅臼前浜で穫れた魚介を自社加工して製造卸。 消費者直販を目標にウェブサイトを新規構築。
※FONTPLUS、絶賛利用中!
![Page 60: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/60.jpg)
構築フロー事例(分業の事例)
![Page 61: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/61.jpg)
![Page 62: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/62.jpg)
構成メンバー
ディレクター 西山 泰史
デザイナー 飯島 聡子
フロントエンド エンジニア 森 智香子
Movable Type エンジニア 淺田 昇平
プログラマー SKELETON CART/DB管理画面担当 濱内 勇一(株式会社インセンブル)
プログラマー MTプラグイン開発 遠藤克洋(カーリーブラケット株式会社)
![Page 63: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/63.jpg)
ウェブサイト
ブログ
商品情報
SKELETON CART
全体の構成図
Database
Movable Typeで構築 顧客・売上管理画面
プラグイン連携
Data API
SKELETON CART プラグイン連携
![Page 64: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/64.jpg)
2特 500g
特 500g
瓶 250g
商品ページに「カテゴリアーカイブ」を利用公開URL /item/karashi-mentaiko/
ブログ記事アーカイヴ 公開ページなし
![Page 65: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/65.jpg)
カテゴリ情報に カスタムフィールドで 項目別入力欄を追加
![Page 66: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/66.jpg)
ブログ記事を 商品販売単位に見立て 商品名や価格を入力
入力項目は、 プラグインで拡張
![Page 67: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/67.jpg)
WireFrame
① デザイン作成
② HTML作成
④ MTML作成
•今回のサイト構築趣旨 •デザイン、機能での要望 •テンプレート構成の相談
構築フロー
③ プラグイン開発
![Page 68: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/68.jpg)
① デザイン作成 ② HTML作成
構築フロー
ウェブサイト全体を HTMLで作ってしまう
![Page 69: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/69.jpg)
構築フロー
商品情報 SKELETON CART
プラグイン連携
商品情報の項目をDBに保存、MTMLで出力するプラグイン
実現したい内容 ③ プラグイン開発
![Page 70: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/70.jpg)
SkeletonCartConnector for MT
MT管理画面内で設定
![Page 71: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/71.jpg)
カスタムフィールドではなく プラグインで入力欄を作成
SkeletonCartConnector for MT
![Page 72: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/72.jpg)
<mt:ScDir> SKELETON CARTのインストールディレクトリを出力
<mt:itemname> 商品名を出力
<mt:itemprice> 商品の価格を出力
などなど
独自のMTタグが使えるようになる
SkeletonCartConnector for MT
![Page 73: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/73.jpg)
② HTML作成
構築フロー
④ MTML作成
HTMLの必要箇所を MTMLでテンプレート化 及びモジュール化を実施(MTでの一元管理)
③ プラグイン開発
![Page 74: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/74.jpg)
<div class="wgt-items__colA"> <p class="wgt-items__name">鮭醤油いくら 1kg</p> <p class="wgt-items__price">1箱 税込 <span class="number">0,000</span>円</p> </div>
<div class="wgt-items__colA"> <p class="wgt-items__name"><mt:itemname></p> <p class="wgt-items__price">1<mt:unit_displayname> 税込 <span class="number"><mt:itemprice></span>円</p> </div>
HTML ̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶
MTML ̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶̶
※上記はほんの一例です
![Page 75: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/75.jpg)
構築フロー
Data APIを利用してMTデータベース内の情報を独自管理画面に表示
Database
Data API
⑤ 管理画面開発実現したい内容
売上管理画面
![Page 76: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/76.jpg)
専用の管理画面を開発
MTのDBから情報を取得
![Page 77: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/77.jpg)
商品ページブログ
ウェブページ ショッピングカート
![Page 78: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/78.jpg)
デザインを 作る人
MTタグを作る人
MTタグを使う人
Data APIを 利用する人
共通言語 MTML
![Page 79: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/79.jpg)
MTML デザインとロジックを分離
Data API Movable Typeとウェブを融合
![Page 80: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/80.jpg)
ウェブサイト運営に効く弊社MTプラグインのご紹介
![Page 81: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/81.jpg)
Movable Typeの画像アップロード機能補助プラグイン
ImageUploadUtility http://skeleton.juxtaposition.jp/image-upload-utility/
![Page 82: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/82.jpg)
アップロード・リサイズ パブリッシュ・サムネイルリサイズ マルチバイト・リネーム Exifコントロール、JPEG画像圧縮率指定、拡張子変換
ウォーターマーク合成、PDFサムネイル作成 複数画像アップロード、タグ装飾機能、ファイル名ソート機能
ImageUploadUtility
ImageUploadUtility Pro
![Page 83: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/83.jpg)
DEMO 製品サイトをご覧くださいhttp://skeleton.juxtaposition.jp/image-upload-utility/
![Page 84: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/84.jpg)
Commercial 9,000円(税別) Personal 0円 <導入例> 学校法人(幼稚園など)、お花屋さん、一般企業
ImageUploadUtility
![Page 85: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/85.jpg)
Commercial 27,000円(税別)
<導入例> 学校法人(大学など)、研究機関(大学院など)、メディア系企業(Webメディア、TV放送局など)
ImageUploadUtility Pro
![Page 86: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/86.jpg)
Movable Type用プレビュー機能強化プラグイン
DynamicPreview
http://skeleton.juxtaposition.jp/dynamic-preview/
![Page 87: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/87.jpg)
プレビューを別ウインドウ表示、プレビューを動的表示 複数テンプレートを一括表示、未公開記事のプレビュー SSIインクルード対応
カテゴリ編集画面でのプレビュー、ベースURL設定可能 URL/文字列置換可能 プレビュー依頼メールの送信機能 プレビュー限定アカウントの作成機能
DynamicPreview
DynamicPreview Pro
![Page 88: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/88.jpg)
DEMO 製品サイトをご覧くださいhttp://skeleton.juxtaposition.jp/dynamic-preview/
![Page 89: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/89.jpg)
通常版 10,000円(税別) Pro版 30,000円(税別)
DynamicPreview
![Page 90: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/90.jpg)
本日のまとめ
![Page 91: ディレクター・ノンプログラマー目線のMovable Typeでのサイト運営・保守](https://reader030.vdocuments.mx/reader030/viewer/2022020203/5873bcd51a28abbc788b5a9d/html5/thumbnails/91.jpg)
ありがとうございました!
Web制作・運営のツボ Vol.1 at デジタルハリウッド福岡校(2016/10/09)
ディレクター・ノンプログラマー目線の Movable Typeでのサイト構築・保守