Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

microCMS

April 22, 2022
Tweet

More Decks by microCMS

Other Decks in Programming

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