このフォーマットは、タップ操作によって軽快に閲覧可能なフルスクリーンのビジュアルコンテンツを提供可能にします。これに伴い、下記で紹介しているサンプルは少し古くなっていますので、補足記事を別途書いています。呼ばれる、タップ操作によって、まるでカードをめくるように閲覧可能なコンテンツを実装するための拡張コンポーネントが発表されました。storiesドキュメントを軽く読んでみて、簡易なものであれば比較的短時間で作れそうな感じでしたので、早速ですが勉強ついでに自分のポートフォリオを簡単に作ってみたので紹介してみようと思います。タップ操作によって軽快に閲覧可能なフルスクリーンのビジュアルコンテンツを提供する新たな拡張コンポーネントです。カードをめくっていくようにコンテンツを閲覧することができるため、写真や映像コンテンツに閲覧者を没入させることができるかもしれません。いうことで作ってみたまず、ドキュメント類ですが、下記にまとまっています。リファレンスには使用できる要素やそれぞれの役割などが記載されていますので、ひととおり目を通してみるとよいと思います。作り方を順を追って説明してくれていますので、とてもわかりやすく便利です。ベストプラクティスには動画を使用する場合の推奨サイズなどが掲載されていますので、こちらも参考までに読んでおくとよいでしょう。storyで、実際に作ってみたページは下記。版ブラウザで表示すると下記のような感じになります。実際にはスマートフォンでの閲覧を前提としたコンテンツですから、スマートフォンでアクセスする方がよいとは思います。開いた時、下記のような表示になる場合があります。タップして有効にした上で、ページを再読込すると正しく表示されると思います。ソースコードは実際のページを見ていただくのが早いと思いますが、簡単に解説すると、基本は下記の通りです。マークアップに関する、ごく基本的なルールは下記のような感じになります。勝手にやってくれます。指定する値によってレイアウトが選択可能になっていますが、その辺について詳しくは下記で解説されています。要素の子要素となれる要素には制限がありますので注意してください。その辺は下記で解説されています。要素は使用できません。タップ操作でページをめくっていくコンテンツですので、ページ内にリンクなど、タップ可能な要素は置けない仕様になっています。属性を付与するだけで簡単に使えたりもしますので、よりインタラクティブなコンテンツを提供することもできます。書いたら、ページを公開する前に必ずバリデータを通すようにしましょう。エラーが出る場合はリファレンスなどを読み返して、エラー箇所を修正します。エラーがでなければ完成ですね。掲載されていますので、その辺も閲覧してみると参考になるんじゃないでしょうか。なっていると思いますが、このくらいのものでしたら数時間あれば作れてしまうと思います。本領が発揮される感じになると思いますので、興味ある方は試してみるのもいいかもしれません。一方で、長文のテキストを掲載するには向いていないです。その点では今回私が作ったものはテキストが多すぎですね。スマートフォンで閲覧する前提のコンテンツのため、写真にしても動画にしても、縦長サイズのものを用意する必要があります。して公開するみたいな使い方も面白いかもしれませんね。マーケティングに関するコンサルティングサービスを提供しています。詳しくはバーンワークス株式会社のサービス案内をご覧ください。伴い記述が古くなってしまっている点を補足する記事を書きました。先行実装しましたので簡単に紹介。ファイルがそのままでは正常に動作しなくなりました。ファイルの修正点をまとめます。ベースの開発へと移行する計画を発表しました。いう警告が表示されるようになりました。観戦、インターネット、音楽鑑賞、筋トレ、腕時計収集が趣味。好物はゼリー、グミ、お酒、ラーメン。いいね!で最新情報を取得この記事が気に入ったらいいね!してください。最新の記事をお届けします。クリエイターが身につけておくべき新・100の法則。クリエイターが身につけておくべき新・100の法則。(yoshiki.kato@gmail.com)。