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