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

2022年4月21日に行われた microCMS Online Meetup の発表資料です。
https://microcms.connpass.com/event/240629/

発表のアーカイブをYouTubeで公開しています。こちらもあわせてご覧ください。
https://youtu.be/2BBsCR1Mop8?t=4666

Transcript

1. #microcms_meetup
2. 自己紹介 • 松田承一 / @shoma2da • 株式会社microCMSの共同創業者 兼 CEO • エンジニア （アプリエンジニア → バックエンドエンジニア） • 元ヤフー株式会社 2 #microcms_meetup
3. 目次 3 • microCMSのiframeフィールドとは • 具体的な開発方法 • iframeフィールドの活用・実用例 • 今後のロードマップ • おわりに #microcms_meetup
4. microCMSのiframeフィールドとは 4 iframeを用いて外部のデータをmicroCMSに取り込める機能 #microcms_meetup
5. 3月末より無料を含む全プランで利用可能に！ 5 https://blog.microcms.io/update-iframe-field/ #microcms_meetup
6. 目次 6 • microCMSのiframeフィールドとは • 具体的な開発方法 • iframeフィールドの活用・実用例 • 今後のロードマップ • おわりに #microcms_meetup
7. iframeフィールドの設定手順の概要 1. iframeフィールドの参照先（iframe内部の画面）を開発する • デプロイしておく（URLで参照できるようにする） 2. microCMSでiframeフィールドを選択し、デプロイした画面のURLを設定する 7 詳しくはドキュメント https://document.microcms.io/manual/iframe-field を参照ください。 #microcms_meetup
8. 実例紹介：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
9. 組み込み後のmicroCMSの画面とAPIイメージ 9 microCMS管理画面内でAmazonの商品を検索でき、REST APIからも必要な情報を得られます。 管理画面で本を検索 APIからは検索した結果が返却される（一部省略） #microcms_meetup
10. 組み込み後のmicroCMSの画面とAPIイメージ 10 （デモします） #microcms_meetup
11. データの流れ 11 Amazon PA APIからデータを利用しながらコンテンツ管理を行う #microcms_meetup
12. データの流れ 12 Amazon PA APIからデータを利用しながらコンテンツ管理を行う #microcms_meetup
13. iframe内部の画面の開発概要 microCMSとiframeはブラウザの window.postMessage を使ってデータのやりとりを行います。 https://document.microcms.io/manual/iframe-field 1. 初期化 2. microCMSにデータ送信 3. microCMS管理画面でのスタイル調整 13 #microcms_meetup
14. 実装①：初期化 14 microCMSの画面表示時に前回までに設定されたデータ（後述）が送られてきます。
15. 実装②：microCMSにデータ送信 15 Amazon PA APIの検索結果の一部をmicroCMSに送信 → microCMSは受け取ったJSONをそのまま保存し、APIの取得時に返却する
16. 実装③：表示の調整 16 microCMSにおける表示領域（高さや幅）の調整をiframe側から行うことができます。 今回のOSSの実装では表示領域の高さを400に設定しています。
17. 目次 17 • microCMSのiframeフィールドとは • 具体的な開発方法 • iframeフィールドの活用・実用例 • 今後のロードマップ • おわりに #microcms_meetup
18. 無限に広がるユースケース • 自社データベース読み取り（商品や店舗情報など） • 外部SaaSのAPI利用（Shopify、Firebase、Salesforceなど） • 大規模CSVの読み込み • 動画の選択 • 地図から対象地域を選択 • 書評ブログ / 商品レビュー 18 #microcms_meetup
19. 目次 19 • microCMSのiframeフィールドとは • 具体的な開発方法 • iframeフィールドの活用・実用例 • 今後のロードマップ • おわりに #microcms_meetup
20. iframeに関する主なロードマップ 1. 開発キットのご提供 • iframe利用コードのひな形提供 • コンポーネントの配布 2. 各種サービスの公式連携のご提供 • S3 • Shopify • 各種DBなどなど 3. （検討中）プラットフォーム化 • ホスティングの簡易化 • 誰でも便利な機能を作って共有できる場のご提供 20 #microcms_meetup
21. 目次 21 • microCMSのiframeフィールドとは • 具体的な開発方法 • iframeフィールドの活用・実用例 • 今後のロードマップ • おわりに #microcms_meetup
22. microCMS社、採用してます！！ 22 https://microcms.co.jp/ #microcms_meetup
23. Twitterもフォローお願いします🙏 23 @micro_cms #microcms_meetup
24. iframeフィールドとは microCMS無料版で使えるようになったフィールドの機能のひとつ 24 ここにテキストを挿入 45K ここにテキストを挿入 ここにテ キストを挿入 ここにテキストを挿入 690K ここにテキストを挿入 ここにテ キストを挿入 ここにテキストを挿入 100K ここにテキストを挿入 ここにテ キストを挿入 ここにテキストを 挿入 ここにテキストを挿入
25. 図版を当てたら ここにテキストを挿入 ここにテキストを挿入 ここにテキストを挿入 ここにテキストを挿入 ここにテキストを挿入 ここ にテキストを挿入 ここにテキストを挿入 ここにテキストを挿入 ここにテキストを挿入 ここにテキストを挿入 ここにテ キストを挿入 ここにテキストを挿入。 25
26. ご清聴ありがとうございました的なスライド 26 イベント告知とか ドキュメントへのリンクとか？ お問い合わせとか Copyright © microCMS All rights reserved.