iframeフィールドでコンテンツとあらゆるAPIをつなぎこもう

Slide 1

Slide 1 text

#microcms_meetup

Slide 2

Slide 2 text

自己紹介 ● 松田承一 / @shoma2da ● 株式会社microCMSの共同創業者兼 CEO ● エンジニア（アプリエンジニア → バックエンドエンジニア） ● 元ヤフー株式会社 2 #microcms_meetup

Slide 3

Slide 3 text

目次 3 ● microCMSのiframeフィールドとは ● 具体的な開発方法 ● iframeフィールドの活用・実用例 ● 今後のロードマップ ● おわりに #microcms_meetup

Slide 4

Slide 4 text

microCMSのiframeフィールドとは 4 iframeを用いて外部のデータをmicroCMSに取り込める機能 #microcms_meetup

Slide 5

Slide 5 text

3月末より無料を含む全プランで利用可能に！ 5 https://blog.microcms.io/update-iframe-ﬁeld/ #microcms_meetup

Slide 6

Slide 6 text

目次 6 ● microCMSのiframeフィールドとは ● 具体的な開発方法 ● iframeフィールドの活用・実用例 ● 今後のロードマップ ● おわりに #microcms_meetup

Slide 7

Slide 7 text

iframeフィールドの設定手順の概要 1. iframeフィールドの参照先（iframe内部の画面）を開発する ● デプロイしておく（URLで参照できるようにする） 2. microCMSでiframeフィールドを選択し、デプロイした画面のURLを設定する 7 詳しくはドキュメント https://document.microcms.io/manual/iframe-ﬁeld を参照ください。 #microcms_meetup

Slide 8

Slide 8 text

実例紹介：Amazon PA APIとの連携 8 microCMSではAmazon Product Advertising APIの利用例をOSSとして公開しています https://blog.microcms.io/iframe-amazon-pa-api/ /microcmsio/microcms-amazon-pa-api #microcms_meetup

Slide 9

Slide 9 text

組み込み後のmicroCMSの画面とAPIイメージ 9 microCMS管理画面内でAmazonの商品を検索でき、REST APIからも必要な情報を得られます。管理画面で本を検索 APIからは検索した結果が返却される（一部省略） #microcms_meetup

Slide 10

Slide 10 text

組み込み後のmicroCMSの画面とAPIイメージ 10 （デモします） #microcms_meetup

Slide 11

Slide 11 text

データの流れ 11 Amazon PA APIからデータを利用しながらコンテンツ管理を行う #microcms_meetup

Slide 12

Slide 12 text

データの流れ 12 Amazon PA APIからデータを利用しながらコンテンツ管理を行う #microcms_meetup

Slide 13

Slide 13 text

iframe内部の画面の開発概要 microCMSとiframeはブラウザの window.postMessage を使ってデータのやりとりを行います。 https://document.microcms.io/manual/iframe-ﬁeld 1. 初期化 2. microCMSにデータ送信 3. microCMS管理画面でのスタイル調整 13 #microcms_meetup

Slide 14

Slide 14 text

実装①：初期化 14 microCMSの画面表示時に前回までに設定されたデータ（後述）が送られてきます。

Slide 15

Slide 15 text

実装②：microCMSにデータ送信 15 Amazon PA APIの検索結果の一部をmicroCMSに送信 → microCMSは受け取ったJSONをそのまま保存し、APIの取得時に返却する

Slide 16

Slide 16 text

実装③：表示の調整 16 microCMSにおける表示領域（高さや幅）の調整をiframe側から行うことができます。今回のOSSの実装では表示領域の高さを400に設定しています。

Slide 17

Slide 17 text

目次 17 ● microCMSのiframeフィールドとは ● 具体的な開発方法 ● iframeフィールドの活用・実用例 ● 今後のロードマップ ● おわりに #microcms_meetup

Slide 18

Slide 18 text

無限に広がるユースケース ● 自社データベース読み取り（商品や店舗情報など） ● 外部SaaSのAPI利用（Shopify、Firebase、Salesforceなど） ● 大規模CSVの読み込み ● 動画の選択 ● 地図から対象地域を選択 ● 書評ブログ / 商品レビュー 18 #microcms_meetup

Slide 19

Slide 19 text

目次 19 ● microCMSのiframeフィールドとは ● 具体的な開発方法 ● iframeフィールドの活用・実用例 ● 今後のロードマップ ● おわりに #microcms_meetup

Slide 20

Slide 20 text

iframeに関する主なロードマップ 1. 開発キットのご提供 ● iframe利用コードのひな形提供 ● コンポーネントの配布 2. 各種サービスの公式連携のご提供 ● S3 ● Shopify ● 各種DBなどなど 3. （検討中）プラットフォーム化 ● ホスティングの簡易化 ● 誰でも便利な機能を作って共有できる場のご提供 20 #microcms_meetup

Slide 21

Slide 21 text

目次 21 ● microCMSのiframeフィールドとは ● 具体的な開発方法 ● iframeフィールドの活用・実用例 ● 今後のロードマップ ● おわりに #microcms_meetup

Slide 22

Slide 22 text

microCMS社、採用してます！！ 22 https://microcms.co.jp/ #microcms_meetup

Slide 23

Slide 23 text

Twitterもフォローお願いします🙏 23 @micro_cms #microcms_meetup

Slide 24

Slide 24 text

iframeフィールドとは microCMS無料版で使えるようになったフィールドの機能のひとつ 24 ここにテキストを挿入 45K ここにテキストを挿入ここにテキストを挿入ここにテキストを挿入 690K ここにテキストを挿入ここにテキストを挿入ここにテキストを挿入 100K ここにテキストを挿入ここにテキストを挿入ここにテキストを挿入ここにテキストを挿入

Slide 25

Slide 25 text

図版を当てたらここにテキストを挿入ここにテキストを挿入ここにテキストを挿入ここにテキストを挿入ここにテキストを挿入ここにテキストを挿入ここにテキストを挿入ここにテキストを挿入ここにテキストを挿入ここにテキストを挿入ここにテキストを挿入ここにテキストを挿入。 25