Embed Size (px)
Citation preview
作るツールから支えるツールへ 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
