Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

4,227 views

Published on

MTDDC Meetup TOKYO 2016で、株式会社インセンブル 濱内勇一さんと行ったジョイントセッションのスライド資料です。

Published in: Internet
  • Be the first to comment

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

  1. 1. 作るツールから支えるツールへ Movable Typeと外部システムの連携事例 MTDDC Meetup TOKYO 2016
 2016.11.12 SAT at コワーキングスペース MONO(Room C) insemble
  2. 2. 自己紹介
  3. 3. 西山 泰史 にしやま やすふみ 株式会社ジャクスタポジション 札幌市在住のウェブディレクター 創業13年目(法人4期目) 2004年頃よりMovable Type利用 好きなMTタグは、MTIf
  4. 4. 西山 泰史 にしやま やすふみ 創業時よりMovable Typeを プラットフォームにウェブサイトを構築 2013年よりMT蝦夷を主宰 三度の飯より食べることが好き
  5. 5. ジャクスタと言えば
  6. 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. 7. ですが…
  8. 8. 西山と言えば?
  9. 9. ラーメン!
  10. 10. ありがとうございます
  11. 11. ここで悲しいお知らせです
  12. 12. 今年7月、 眼科医に 高血圧・動脈硬化の 疑いをかけられる。 ※注:検査の結果、深刻な状況ではありませんでした。
  13. 13. 先生の指示により血圧計を購入、 アプリも利用しています
  14. 14. 西山泰史(43歳) 今日も元気です!
  15. 15. 自己紹介(2人目)
  16. 16. 濱内 勇一 はまうち ゆういち 株式会社インセンブル 代表取締役 株式会社ジャクスタポジション 居候CTO 1982年札幌生まれ札幌育ち。 新卒で自動車ディーラーの営業。 25歳でIT業界に転職と同時に東京へ。 31歳のときにUターン。 2014年1月に独立。 2014年10月、株式会社インセンブル設立。 趣味はマラソン。 2017年の東京マラソンに当たっちゃいました。
  17. 17. 濱内 勇一 はまうち ゆういち 株式会社インセンブル 代表取締役 株式会社ジャクスタポジション 居候CTO 職種 • ITコンサルタント • システムエンジニア • プログラマ • インフラもやるよ • テストもやるよ • フルスタック(ry(死語
  18. 18. 濱内 勇一 はまうち ゆういち 株式会社インセンブル 代表取締役 株式会社ジャクスタポジション 居候CTO プログラマ属性 • PHP ←得意 • JavaScript ←ぼちぼち • Java ←ちょっとだけ • C# ←かじった程度 • Perl ←これから • 汎用機(IBM-HLASM/COBOL/JCL)
 ↑過去の話
  19. 19. 会社紹介 株式会社インセンブル • 中小企業専門のIT専門家 • ソフトウェアの受託開発 主な実績 • 中小企業向け業務システム開発 • EC(Amazon/楽天/Yahoo)の在庫・受注データ同期システム • CMS構築(MovableType/WordPress/Drupal) • Webのフロントエンドプログラミング • PCセッティング
  20. 20. Cybozu Days 2016 に登壇しました • 『1時間で作れる!kintoneプラグインハンズオン』 • 札幌在住kintoneエバンジェリスト斎藤栄氏と登壇。 • kintoneとMTもCONNECTIVE!! kintoneプラグイン 《Movable Type 連携》 http://radical-bridge.com/product/kintone-mt-plugin.html  ※斎藤栄氏の制作。
  21. 21. 実は私も… ラーメン大好きです! 今年食べたラーメンの数:110杯 (2016/11/6現在) #ラーメン王子←はじめました
  22. 22. 本日のアジェンダ
  23. 23. Movable Type ✕ ECサイト
 ・ECを取り巻く状況
 ・オウンドメディアとEC
 ・ECサイト構築事例 Movable Type ✕ 業務システム
 ・解決すべき課題
 ・MTを選んだわけ
 ・予想と現実
  24. 24. Movable Type ✕ ECサイト
  25. 25. 2014.11.29 MTDDC Meetup TOKYO 2014
  26. 26. ECサイトは数え切れないほど増加 唯一無二の商品を取り扱うか、 同じ商品・サービスなら どこよりも安い価格じゃないと売れない 今や「消費者」ではなく「生活者」 そう簡単には売れない時代
  27. 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. 28. ただでさえ売れにくい時代なのに 競争相手は増加
  29. 29. 商品力や価格といった魅力に負けない お客さんとの関係性と愛着心を育てること そんな今だからこそ ECサイトが今から取り組むべき たった1つのこと
  30. 30. それを実現できる環境なら揃っている ペイド メディア オウンド メディア ソーシャル メディア 認知 バイラル (クチコミ) 優良なコンテンツの醸成 エンゲージメント(愛着心)を向上 オウンドメディアがその「核」になりうる =ECサイトのオウンドメディア活用
  31. 31. ?ECサイトで オウンドメディアを 活用するには? ECサイトとは別に自社ブログを運営 →潜在顧客の具体的な送客方法が難しい →異なるドメインでの運営 ECサイトにブログ機能を搭載して運営 →機能面で不足する場合がある →学習コストが高い場合がある
  32. 32. ? Movable Typeに EC機能を追加する ECをメディア化する=メディアをEC化する 品物を買うためだけに訪れるのではなく そのウェブサイトが好きで訪れているうちに 商品を購入したくなるような仕組みづくり ECサイトで オウンドメディアを 活用するには?
  33. 33. SKELETON CARTとは
  34. 34. 1. PHPで作られたショッピングカート
 Movable Type用プラグインではない 2. データベース不要(商品情報はCSV) 3. PHPとHTMLが分離
 HTMLテンプレートでデザインが自由 4. 買取インストール型(25,000円+税) 5. クレジット記載不要(OEM的利用が可能) 6. その名の通り「骨格だけ」のカート 7. 設置から動作確認まで5分
  35. 35. できること/できないこと できる  基本的なことはだいたいできる  スマートフォンへの対応もOK
  便利な機能をプラグインで追加できる できない  商品ページ作成機能がない
  リアルタイムな在庫数表示ができない
  会員登録/管理機能がない
  36. 36. できないことをMTプラグインで可能に Movable Typeとの連携を実現 Movable Type 用プラグイン(商品ページ作成時補助) SkeletonCartConnector SKELETON CART 用プラグイン(DB連携) MTDBConnector
  37. 37. MT ✕ SKELETON CARTのフローイメージ 商品ページ(HTML) SkeletonCartConnector ②ブログ記事で  商品ページを作成 ③商品ページを  パブリッシュ SKELETON CART ④商品を  カートに入れる MTDBConnector ⑤商品が売れた ⑥MTのDB内で  在庫調整 ⑦最新の在庫数を  動的表示 ⑦最新の  在庫数を表示 Webサイト運営者 ①管理画面サインイン
  38. 38. MT ✕ SKELETON CART ECサイト構築事例
  39. 39. 羅臼海産株式会社 https://www.rausu-kaisan.jp/
  40. 40. ウェブサイト ブログ 商品情報 Database Movable Typeで構築 顧客・売上管理画面 Data API プラグイン連携 SKELETON CARTで構築 ウェブサイトの構成イメージ
  41. 41. 500g(250g✕2) 500g 1kg 商品ページに カテゴリアーカイブを利用 公開URL /item/karashi-mentaiko/ ブログ記事は 商品名や価格など、 商品のデータのみを格納 記事アーカイブは 存在しない
  42. 42. 実際の管理画面をご覧ください
  43. 43. Movable TypeとSKELETON CARTを 連携させたことで得られたメリット 1. ウェブサイト/ブログとECを同じドメインで運営 2. 管理画面を1つにできた 3. Movable Typeの構築スキルをそのまま利用できた 4. デザイン変更などが自由自在(デザインフレンドリー) 5. 運営・開発コストをダウンできた 6. オウンドメディアのEC化を実現
  44. 44. Movable Type ✕ 業務システム ウェブサイト/システム構築事例
  45. 45. •運営会社
 株式会社ナカムラ・コーポレーション
 (本社:兵庫県芦屋市) •建築関係者向けBtoBサイト
 (施主の方も購入できます) •商材
 無垢フローリングとその関連商品
 (框、羽目板、遮音マット、ボンド等) ウェブサイトご紹介 http://www.muku-flooring.com/
  46. 46. これまでのウェブ制作事情
  47. 47. 2016 2014 2015 2013 2012 HTML等リソースはすべて人力で作成 • 価格変更もすべて手打ち • 当然ミスが発生する 簡易HTML更新ツールでウェブサイトを作成 • HTMLテンプレートをページ単位で作成 • 価格等の詳細情報をタグ化 • 新商品が出たときはテンプレートを追加・修正 2011 これまでのウェブ制作事情
  48. 48. 一方で業務システムの構築が進む
  49. 49. 営業管理 配送管理 在庫管理 顧客管理 見積 受注 フォロー状況 コンタクト履歴 CTI 要フォロー可視化 出荷指示の作成 配送スケジュール作成 配送状況管理 在庫状況管理 在庫の予約 倉庫ごとの棚卸 輸入明細・原価計算 商品マスタ 売掛請求管理 予算管理 経営指標レポート クレーム管理 加工・塗装依頼 発注管理 構築した(現在も進行中)業務システム
  50. 50. 業務システムによる一元管理の必要性
  51. 51. 必要性を感じる例 商品情報 社内 業務システム ウェブシステム 個別管理 個別管理 個別管理 1. 個別管理 2. 手動でデータ移行 →データの不整合 →忘れる、間違える等 <オペレーションミス>
  52. 52. 商品情報 社内 業務システム ウェブシステム 一元管理することの本質 商品情報は唯一である 一元管理
  53. 53. Movable Typeを選んだわけ
  54. 54. 静的か動的か どのCMSを選択するか 表示速度 システムダウンのリスクを下げる Staticの実績 Connectable MTML 静的ファイルから動的にする理由 Webサーバ vs Webサーバ×DBサーバ たしかな実績 APIがある 社内のデザイナーも触れられる 技術的選択 AWS S3も 視野に入れて MovableTypeを選択
  55. 55. 業務システム Webシステム DataAPI サーバー構成図 さくらのクラウドAmazon Web Services PHP Connect!!
  56. 56. 実際の画面でお見せします Movable Typeでこう作った!
  57. 57. • 使用した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による連携
  58. 58. • PHPでの実装 藤本さんの『Movable Type Data API Library for PHP』を
 使わせていただきました Data APIによる連携
  59. 59. 残念ながら、予想と違った点
  60. 60. お、重い…、とにかく重い(汗) • サーバー負荷の問題? • DBの問題? • Apacheだから? 予想と違った点①
  61. 61. DBクエリを調査してみる カテゴリが多いと一覧を開く動作が重くなるようだ ログインしてからカテゴリの一覧を開くまで… DBに7,000回アクセスしている…!! 予想と違った点①
  62. 62. 非常に高度なテンプレートになってしまった • 要件/仕様が整理できていなかった • PowerCMSのグループ機能の理解不足 高度なテンプレートが完成 社内デザイナーが編集できることをねらったが これは難しいかな…💦💦 予想と違った点②
  63. 63. ただ、予想と違ったかもしれないが…
  64. 64. ������� ��������� ������ ����� ���������� �������������� ��� ��������� �������� �������������� �������� ���������� ����������� ���������� ���������� ����� ���������� ���������� ������ ��� ��� �� �� ��� ��������s� ������� ��������� ��������� ������� bs �������� ���� ����� ���������� �������� ��� �� 公開時のフロー
  65. 65. • CMS化の範囲を拡張 • 現状は施工事例など他のコンテンツなども手作り。こちらもCMS化を進める • 全体的なCMS化を実現することで、運用上の負担軽減を目指す • 売上に直結するサイトなので、継続的なUX向上が今後の大きな課題 • システム的な観点 • カテゴリの階層を減らすこと=軽量化に繋がる、その検討。 • サイトの持続可能性の向上→オブジェクトストレージやCDNの活用 今後の展開
  66. 66. 情シスとWeb制作者も Connectするのは必然 ウェブ制作会社における意味 社内 業務システム ウェブシステム 業務システムと WebシステムがConnect
  67. 67. 本日のまとめ
  68. 68. MTML デザインとロジックを分離 Data API Movable Typeと世の中を融合
  69. 69. さぁ、MTがある世界へ旅立とう 作るツールから支えるツールへ Movable Typeと外部システムの連携事例 MTDDC Meetup TOKYO 2016
 2016.11.12 SAT at コワーキングスペース MONO(Room C) insemble

×