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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

26. ご清聴ありがとうございました的なスライド
    26
    イベント告知とか
    ドキュメントへのリンクとか？
    お問い合わせとか
    Copyright © microCMS All rights reserved.
    

    View Slide