1. 作るツールから支えるツールへ
Movable Typeと外部システムの連携事例
MTDDC Meetup TOKYO 2016
2016.11.12 SAT at コワーキングスペース MONO（Room C）
insemble

2. 自己紹介

3. 西山 泰史
にしやま やすふみ
株式会社ジャクスタポジション
札幌市在住のウェブディレクター
創業13年目（法人4期目）
2004年頃よりMovable Type利用
好きなMTタグは、MTIf

4. 西山 泰史
にしやま やすふみ
創業時よりMovable Typeを
プラットフォームにウェブサイトを構築
2013年よりMT蝦夷を主宰
三度の飯より食べることが好き

5. ジャクスタと言えば

6. 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/

7. ですが…

8. 西山と言えば？

9. ラーメン！

10. ありがとうございます

11. ここで悲しいお知らせです

12. 今年7月、
眼科医に
高血圧・動脈硬化の
疑いをかけられる。
※注：検査の結果、深刻な状況ではありませんでした。

13. 先生の指示により血圧計を購入、
アプリも利用しています

14. 西山泰史（43歳）
今日も元気です！

15. 自己紹介（２人目）

16. 濱内 勇一
はまうち ゆういち
株式会社インセンブル 代表取締役
株式会社ジャクスタポジション 居候CTO
1982年札幌生まれ札幌育ち。
新卒で自動車ディーラーの営業。
25歳でIT業界に転職と同時に東京へ。
31歳のときにUターン。
2014年1月に独立。
2014年10月、株式会社インセンブル設立。
趣味はマラソン。
2017年の東京マラソンに当たっちゃいました。

17. 濱内 勇一
はまうち ゆういち
株式会社インセンブル 代表取締役
株式会社ジャクスタポジション 居候CTO
職種
• ITコンサルタント
• システムエンジニア
• プログラマ
• インフラもやるよ
• テストもやるよ
• フルスタック（ｒｙ（死語

18. 濱内 勇一
はまうち ゆういち
株式会社インセンブル 代表取締役
株式会社ジャクスタポジション 居候CTO
プログラマ属性
• PHP ←得意
• JavaScript ←ぼちぼち
• Java ←ちょっとだけ
• C# ←かじった程度
• Perl ←これから
• 汎用機(IBM-HLASM/COBOL/JCL)
↑過去の話

19. 会社紹介
株式会社インセンブル
• 中小企業専門のIT専門家
• ソフトウェアの受託開発
主な実績
• 中小企業向け業務システム開発
• EC（Amazon/楽天/Yahoo）の在庫・受注データ同期システム
• CMS構築（MovableType/WordPress/Drupal）
• Webのフロントエンドプログラミング
• PCセッティング

20. Cybozu Days 2016 に登壇しました
• 『1時間で作れる！kintoneプラグインハンズオン』
• 札幌在住kintoneエバンジェリスト斎藤栄氏と登壇。
• kintoneとMTもCONNECTIVE!!
kintoneプラグイン 《Movable Type 連携》
http://radical-bridge.com/product/kintone-mt-plugin.html
※斎藤栄氏の制作。

21. 実は私も…
ラーメン大好きです！
今年食べたラーメンの数：110杯 (2016/11/6現在)
#ラーメン王子←はじめました

22. 本日のアジェンダ

23. Movable Type ✕ ECサイト
・ECを取り巻く状況
・オウンドメディアとEC
・ECサイト構築事例
Movable Type ✕ 業務システム
・解決すべき課題
・MTを選んだわけ
・予想と現実

24. Movable Type ✕ ECサイト

25. 2014.11.29
MTDDC Meetup TOKYO 2014

26. ECサイトは数え切れないほど増加
唯一無二の商品を取り扱うか、
同じ商品・サービスなら
どこよりも安い価格じゃないと売れない
今や「消費者」ではなく「生活者」
そう簡単には売れない時代

27. EC市場規模
13.8兆円
（前年比7.6％増）
EC化率
4.75％
（対前年0.38ポイント増）
経済産業省「電子商取引に関する市場調査（2015年版）」
0
3.5
7
10.5
14
0
1.2
2.4
3.6
4.8
2010年 2011年 2012年 2013年 2014年 2015年
EC化率（％） 市場規模（兆円）
13.812.811.29.58.57.8
4.75
4.37
3.85
3.4
3.17
2.842.84
3.17
3.4
3.85
4.37
4.75

28. ただでさえ売れにくい時代なのに
競争相手は増加

29. 商品力や価格といった魅力に負けない
お客さんとの関係性と愛着心を育てること
そんな今だからこそ
ECサイトが今から取り組むべき
たった1つのこと

30. それを実現できる環境なら揃っている
ペイド
メディア
オウンド
メディア
ソーシャル
メディア
認知
バイラル
（クチコミ）
優良なコンテンツの醸成
エンゲージメント（愛着心）を向上
オウンドメディアがその「核」になりうる
＝ECサイトのオウンドメディア活用

31. ？ECサイトで
オウンドメディアを
活用するには？
ECサイトとは別に自社ブログを運営
→潜在顧客の具体的な送客方法が難しい
→異なるドメインでの運営
ECサイトにブログ機能を搭載して運営
→機能面で不足する場合がある
→学習コストが高い場合がある

32. ？
Movable Typeに
EC機能を追加する
ECをメディア化する＝メディアをEC化する
品物を買うためだけに訪れるのではなく
そのウェブサイトが好きで訪れているうちに
商品を購入したくなるような仕組みづくり
ECサイトで
オウンドメディアを
活用するには？

34. SKELETON CARTとは

35. 1. PHPで作られたショッピングカート
Movable Type用プラグインではない
2. データベース不要（商品情報はCSV）
3. PHPとHTMLが分離
HTMLテンプレートでデザインが自由
4. 買取インストール型（25,000円＋税）
5. クレジット記載不要（OEM的利用が可能）
6. その名の通り「骨格だけ」のカート
7. 設置から動作確認まで5分

36. できること／できないこと
できる
基本的なことはだいたいできる
スマートフォンへの対応もOK
便利な機能をプラグインで追加できる
できない
商品ページ作成機能がない
リアルタイムな在庫数表示ができない
会員登録／管理機能がない

37. できないことをMTプラグインで可能に
Movable Typeとの連携を実現
Movable Type 用プラグイン（商品ページ作成時補助）
SkeletonCartConnector
SKELETON CART 用プラグイン（DB連携）
MTDBConnector

38. MT ✕ SKELETON CARTのフローイメージ
商品ページ（HTML）
SkeletonCartConnector
②ブログ記事で
商品ページを作成
③商品ページを
パブリッシュ
SKELETON CART
④商品を
カートに入れる
MTDBConnector
⑤商品が売れた
⑥MTのDB内で
在庫調整
⑦最新の在庫数を
動的表示
⑦最新の
在庫数を表示
Webサイト運営者
①管理画面サインイン

39. MT ✕ SKELETON CART
ECサイト構築事例

40. 羅臼海産株式会社 https://www.rausu-kaisan.jp/

41. ウェブサイト
ブログ
商品情報
Database
Movable Typeで構築 顧客・売上管理画面
Data API
プラグイン連携
SKELETON CARTで構築
ウェブサイトの構成イメージ

42. 500g（250g✕2）
500g
1kg
商品ページに
カテゴリアーカイブを利用
公開URL /item/karashi-mentaiko/
ブログ記事は
商品名や価格など、
商品のデータのみを格納
記事アーカイブは
存在しない

43. 実際の管理画面をご覧ください

44. Movable TypeとSKELETON CARTを
連携させたことで得られたメリット
1. ウェブサイト／ブログとECを同じドメインで運営
2. 管理画面を1つにできた
3. Movable Typeの構築スキルをそのまま利用できた
4. デザイン変更などが自由自在（デザインフレンドリー）
5. 運営・開発コストをダウンできた
6. オウンドメディアのEC化を実現

45. Movable Type ✕ 業務システム
ウェブサイト/システム構築事例

46. •運営会社
株式会社ナカムラ・コーポレーション
（本社：兵庫県芦屋市）
•建築関係者向けBtoBサイト
（施主の方も購入できます）
•商材
無垢フローリングとその関連商品
（框、羽目板、遮音マット、ボンド等）
ウェブサイトご紹介
http://www.muku-flooring.com/

47. これまでのウェブ制作事情

48. 2016
2014
2015
2013
2012
HTML等リソースはすべて人力で作成
• 価格変更もすべて手打ち
• 当然ミスが発生する
簡易HTML更新ツールでウェブサイトを作成
• HTMLテンプレートをページ単位で作成
• 価格等の詳細情報をタグ化
• 新商品が出たときはテンプレートを追加・修正
2011
これまでのウェブ制作事情

49. 一方で業務システムの構築が進む

50. 営業管理
配送管理
在庫管理
顧客管理
見積
受注
フォロー状況
コンタクト履歴
CTI
要フォロー可視化
出荷指示の作成
配送スケジュール作成
配送状況管理
在庫状況管理
在庫の予約
倉庫ごとの棚卸
輸入明細・原価計算
商品マスタ
売掛請求管理
予算管理
経営指標レポート
クレーム管理
加工・塗装依頼
発注管理
構築した（現在も進行中）業務システム

51. 業務システムによる一元管理の必要性

52. 必要性を感じる例
商品情報
社内
業務システム ウェブシステム
個別管理
個別管理 個別管理
1. 個別管理
2. 手動でデータ移行
→データの不整合
→忘れる、間違える等
＜オペレーションミス＞

53. 商品情報
社内
業務システム ウェブシステム
一元管理することの本質
商品情報は唯一である
一元管理

54. Movable Typeを選んだわけ

55. 静的か動的か
どのCMSを選択するか
表示速度
システムダウンのリスクを下げる
Staticの実績
Connectable
MTML
静的ファイルから動的にする理由
Webサーバ vs Webサーバ×DBサーバ
たしかな実績
APIがある
社内のデザイナーも触れられる
技術的選択
AWS S3も
視野に入れて
MovableTypeを選択

56. 業務システム Webシステム
DataAPI
サーバー構成図
さくらのクラウドAmazon Web Services
PHP
Connect!!

57. 実際の画面でお見せします
Movable Typeでこう作った！

58. • 使用したAPI
• [POST] /authentication
• [POST] /sites/:site_id/entries
• [POST] /sites/:site_id/entries/:entry_id
• [DELETE] /sites/:site_id/entries/:entry_id
• [GET] /sites/:site_id/categories
• [POST] /sites/:side_id/categories
Data APIによる連携

59. • PHPでの実装
藤本さんの『Movable Type Data API Library for PHP』を
使わせていただきました
Data APIによる連携

60. 残念ながら、予想と違った点

61. お、重い…、とにかく重い（汗）
• サーバー負荷の問題？
• DBの問題？
• Apacheだから？
予想と違った点①

62. DBクエリを調査してみる
カテゴリが多いと一覧を開く動作が重くなるようだ
ログインしてからカテゴリの一覧を開くまで…
DBに7,000回アクセスしている…!!
予想と違った点①

63. 非常に高度なテンプレートになってしまった
• 要件/仕様が整理できていなかった
• PowerCMSのグループ機能の理解不足
高度なテンプレートが完成
社内デザイナーが編集できることをねらったが
これは難しいかな…💦💦
予想と違った点②

64. ただ、予想と違ったかもしれないが…

65. �������
���������
������
�����
����������
��������������
���
���������
��������
��������������
��������
����������
�����������
����������
����������
�����
����������
����������
������
���
���
��
��
���
��������s�
�������
���������
���������
�������
bs
��������
����
�����
����������
��������
���
��
公開時のフロー

66. • CMS化の範囲を拡張
• 現状は施工事例など他のコンテンツなども手作り。こちらもCMS化を進める
• 全体的なCMS化を実現することで、運用上の負担軽減を目指す
• 売上に直結するサイトなので、継続的なUX向上が今後の大きな課題
• システム的な観点
• カテゴリの階層を減らすこと＝軽量化に繋がる、その検討。
• サイトの持続可能性の向上→オブジェクトストレージやCDNの活用
今後の展開

67. 情シスとWeb制作者も
Connectするのは必然
ウェブ制作会社における意味
社内
業務システム ウェブシステム
業務システムと
WebシステムがConnect

68. 本日のまとめ

69. MTML
デザインとロジックを分離
Data API
Movable Typeと世の中を融合

70. さぁ、MTがある世界へ旅立とう
作るツールから支えるツールへ
Movable Typeと外部システムの連携事例
MTDDC Meetup TOKYO 2016
2016.11.12 SAT at コワーキングスペース MONO（Room C）
insemble