作るツールから支えるツールへ - Movable Typeと外部システムの連携事例 -

作るツールから支えるツールへ Movable Typeと外部システムの連携事例

MTDDC Meetup TOKYO 20162016.11.12 SAT at コワーキングスペース MONO（Room C）

insemble

自己紹介

西山　泰史 にしやま　やすふみ

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

西山　泰史 にしやま　やすふみ

創業時よりMovable Typeを プラットフォームにウェブサイトを構築 2013年よりMT蝦夷を主宰

三度の飯より食べることが好き

ジャクスタと言えば

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月、

眼科医に

高血圧・動脈硬化の

疑いをかけられる。

※注：検査の結果、深刻な状況ではありませんでした。

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

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

自己紹介（２人目）

濱内　勇一 はまうち　ゆういち

株式会社インセンブル　代表取締役株式会社ジャクスタポジション　居候CTO

1982年札幌生まれ札幌育ち。 新卒で自動車ディーラーの営業。 25歳でIT業界に転職と同時に東京へ。 31歳のときにUターン。 2014年1月に独立。 2014年10月、株式会社インセンブル設立。 趣味はマラソン。 2017年の東京マラソンに当たっちゃいました。

濱内　勇一 はまうち　ゆういち

株式会社インセンブル　代表取締役株式会社ジャクスタポジション　居候CTO

職種 • ITコンサルタント • システムエンジニア • プログラマ • インフラもやるよ • テストもやるよ • フルスタック（ｒｙ（死語

濱内　勇一 はまうち　ゆういち

株式会社インセンブル　代表取締役株式会社ジャクスタポジション　居候CTO

プログラマ属性 • PHP　←得意 • JavaScript　←ぼちぼち • Java　←ちょっとだけ • C#　←かじった程度 • Perl　←これから • 汎用機(IBM-HLASM/COBOL/JCL)↑過去の話

会社紹介

株式会社インセンブル• 中小企業専門のIT専門家

• ソフトウェアの受託開発

主な実績

• 中小企業向け業務システム開発 • EC（Amazon/楽天/Yahoo）の在庫・受注データ同期システム • CMS構築（MovableType/WordPress/Drupal） • Webのフロントエンドプログラミング • PCセッティング

Cybozu Days 2016 に登壇しました• 『1時間で作れる！kintoneプラグインハンズオン』

• 札幌在住kintoneエバンジェリスト斎藤栄氏と登壇。

• kintoneとMTもCONNECTIVE!!

kintoneプラグイン 《Movable Type 連携》 http://radical-bridge.com/product/kintone-mt-plugin.html

　※斎藤栄氏の制作。

実は私も…

ラーメン大好きです！ 今年食べたラーメンの数：110杯 (2016/11/6現在)

#ラーメン王子←はじめました

本日のアジェンダ

Movable Type ✕ ECサイト・ECを取り巻く状況・オウンドメディアとEC・ECサイト構築事例

Movable Type ✕ 業務システム・解決すべき課題・MTを選んだわけ・予想と現実

Movable Type ✕ ECサイト

2014.11.29 MTDDC Meetup TOKYO 2014

ECサイトは数え切れないほど増加 唯一無二の商品を取り扱うか、

同じ商品・サービスなら どこよりも安い価格じゃないと売れない

今や「消費者」ではなく「生活者」 そう簡単には売れない時代

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.43.17

2.842.843.17

3.4

3.85

4.37

4.75

ただでさえ売れにくい時代なのに

競争相手は増加

商品力や価格といった魅力に負けない お客さんとの関係性と愛着心を育てること

そんな今だからこそ ECサイトが今から取り組むべき

たった1つのこと

それを実現できる環境なら揃っている

ペイド メディア

オウンド メディア

ソーシャル メディア

認知バイラル

（クチコミ）

優良なコンテンツの醸成

エンゲージメント（愛着心）を向上

オウンドメディアがその「核」になりうる ＝ECサイトのオウンドメディア活用

？ECサイトで オウンドメディアを 活用するには？

ECサイトとは別に自社ブログを運営 →潜在顧客の具体的な送客方法が難しい →異なるドメインでの運営

ECサイトにブログ機能を搭載して運営 →機能面で不足する場合がある →学習コストが高い場合がある

？Movable Typeに EC機能を追加する

ECをメディア化する＝メディアをEC化する 品物を買うためだけに訪れるのではなく

そのウェブサイトが好きで訪れているうちに 商品を購入したくなるような仕組みづくり

ECサイトで オウンドメディアを 活用するには？

SKELETON CARTとは

1. PHPで作られたショッピングカートMovable Type用プラグインではない

2. データベース不要（商品情報はCSV） 3. PHPとHTMLが分離

HTMLテンプレートでデザインが自由 4. 買取インストール型（25,000円＋税） 5. クレジット記載不要（OEM的利用が可能） 6. その名の通り「骨格だけ」のカート 7. 設置から動作確認まで5分

できること／できないこと

できる　基本的なことはだいたいできる 　スマートフォンへの対応もOK　便利な機能をプラグインで追加できる

できない　商品ページ作成機能がない　リアルタイムな在庫数表示ができない　会員登録／管理機能がない

できないことをMTプラグインで可能に Movable Typeとの連携を実現

Movable Type 用プラグイン（商品ページ作成時補助）

SkeletonCartConnectorSKELETON CART 用プラグイン（DB連携）

MTDBConnector

MT ✕ SKELETON CARTのフローイメージ

商品ページ（HTML）

SkeletonCartConnector

②ブログ記事で 　商品ページを作成

③商品ページを 　パブリッシュ

SKELETON CART

④商品を 　カートに入れる

MTDBConnector

⑤商品が売れた⑥MTのDB内で 　在庫調整

⑦最新の在庫数を 　動的表示⑦最新の

　在庫数を表示

Webサイト運営者①管理画面サインイン

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

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

ウェブサイト

ブログ

商品情報

Database

Movable Typeで構築 顧客・売上管理画面

Data API

プラグイン連携

SKELETON CARTで構築

ウェブサイトの構成イメージ

500g（250g✕2）

500g

1kg

商品ページに カテゴリアーカイブを利用

公開URL /item/karashi-mentaiko/

ブログ記事は 商品名や価格など、 商品のデータのみを格納

記事アーカイブは 存在しない

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

Movable TypeとSKELETON CARTを 連携させたことで得られたメリット

1. ウェブサイト／ブログとECを同じドメインで運営

2. 管理画面を1つにできた

3. Movable Typeの構築スキルをそのまま利用できた

4. デザイン変更などが自由自在（デザインフレンドリー）

5. 運営・開発コストをダウンできた

6. オウンドメディアのEC化を実現

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

•運営会社株式会社ナカムラ・コーポレーション（本社：兵庫県芦屋市）

•建築関係者向けBtoBサイト（施主の方も購入できます）

•商材無垢フローリングとその関連商品（框、羽目板、遮音マット、ボンド等）

ウェブサイトご紹介

http://www.muku-flooring.com/

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

2016

2014

2015

2013

2012

HTML等リソースはすべて人力で作成 • 価格変更もすべて手打ち • 当然ミスが発生する

簡易HTML更新ツールでウェブサイトを作成 • HTMLテンプレートをページ単位で作成 • 価格等の詳細情報をタグ化 • 新商品が出たときはテンプレートを追加・修正

2011

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

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

営業管理

配送管理

在庫管理

顧客管理

見積受注

フォロー状況

コンタクト履歴CTI

要フォロー可視化

出荷指示の作成配送スケジュール作成

配送状況管理

在庫状況管理在庫の予約

倉庫ごとの棚卸

輸入明細・原価計算商品マスタ

売掛請求管理予算管理

経営指標レポート

クレーム管理

加工・塗装依頼発注管理

構築した（現在も進行中）業務システム

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

必要性を感じる例

商品情報

社内

業務システム ウェブシステム

個別管理

個別管理 個別管理

1. 個別管理

2. 手動でデータ移行→データの不整合

→忘れる、間違える等 ＜オペレーションミス＞

商品情報

社内

業務システム ウェブシステム

一元管理することの本質

商品情報は唯一である

一元管理

Movable Typeを選んだわけ

静的か動的か

どのCMSを選択するか

表示速度

システムダウンのリスクを下げる

Staticの実績

Connectable

MTML

静的ファイルから動的にする理由

Webサーバ　vs　Webサーバ×DBサーバ

たしかな実績

APIがある

社内のデザイナーも触れられる

技術的選択

AWS S3も 視野に入れて

MovableTypeを選択

業務システム Webシステム

DataAPI

サーバー構成図

さくらのクラウドAmazon Web Services

PHP

Connect!!

実際の画面でお見せします

Movable Typeでこう作った！

• 使用した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による連携

• PHPでの実装

藤本さんの『Movable Type Data API Library for PHP』を

使わせていただきました

Data APIによる連携

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

お、重い…、とにかく重い（汗）

• サーバー負荷の問題？

• DBの問題？

• Apacheだから？

予想と違った点①

DBクエリを調査してみる

カテゴリが多いと一覧を開く動作が重くなるようだ

ログインしてからカテゴリの一覧を開くまで… DBに7,000回アクセスしている…!!

予想と違った点①

非常に高度なテンプレートになってしまった

• 要件/仕様が整理できていなかった • PowerCMSのグループ機能の理解不足

高度なテンプレートが完成社内デザイナーが編集できることをねらったが これは難しいかな…💦💦

予想と違った点②

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

�������

���������

�����������

���������� �����������������

�����������������

����������������������

���������������������

����������

���������������

����������

����������

���������

���

��

��

���

��������s��������

���������

���������

�������

bs

��������

����

�����

������������������

���

��

公開時のフロー

• CMS化の範囲を拡張 • 現状は施工事例など他のコンテンツなども手作り。こちらもCMS化を進める

• 全体的なCMS化を実現することで、運用上の負担軽減を目指す

• 売上に直結するサイトなので、継続的なUX向上が今後の大きな課題

• システム的な観点 • カテゴリの階層を減らすこと＝軽量化に繋がる、その検討。 • サイトの持続可能性の向上→オブジェクトストレージやCDNの活用

今後の展開

情シスとWeb制作者も Connectするのは必然

ウェブ制作会社における意味

社内

業務システム ウェブシステム

業務システムと WebシステムがConnect

本日のまとめ

MTML デザインとロジックを分離

Data API Movable Typeと世の中を融合

さぁ、MTがある世界へ旅立とう

作るツールから支えるツールへ Movable Typeと外部システムの連携事例

MTDDC Meetup TOKYO 20162016.11.12 SAT at コワーキングスペース MONO（Room C）

insemble