AnyManagerは、こちらのプレスリリース にあるように、ノーコードでWeb Storiesを作成できるツール、Story Engineをリリースしました。この記事では、Web Storiesを作成することのメリット、それを実現するためのStory Engineのシステムの構成、また現状の課題と今後の展望について記載します。
Web Storiesとは
Web Storiesとは、「ストーリーズ」フォーマットのWeb版で、ビデオ、オーディオ、画像、アニメーション、テキストを組み合わせて、デスクトップとモバイルの両方のデバイスでダイナミックなユーザー体験を実現します。
通常のウェブサイトでは、記事のサムネイルと要約を載せた以下のような形式の記事一覧をトップページなどで表示するのが一般的でしょう。
一方でWeb Storiesでは、記事の情報を画面全体に表示し、スワイプで次の記事情報を表示するなど、ストーリー形式で記事一覧を表示します。
Web Storiesを作成する手法はいろいろありますが、AnyManagerが提供するStory EngineではこれらをAMP Web Stories をベースに作成しています。これはAMP Web Storiesが既にWeb Storiesで必要とする多彩な機能（次のストーリーへの自動切り替え、背景やボタンへアニメーションを付与するなど）を提供しているために採用しました。もちろんAMP をベースであるため、AMP固有のいくつかの制約がありますが、AMP Web Stories以外のフォーマットも提供できる可用性があるので、今後需要次第でAMPベースでないWeb Storiesの提供もあるでしょう。
Story Engineの機能
Story Engineの機能は大まかに二つのパートに分かれます。
- Web Storiesのデザイン（テンプレート）を作成する
- 上記で作成したテンプレートを用いて実際のWeb Storiesを作成する
テンプレート作成のパートでは、Story Engine側でベースとなるデザインをいくつか提供しており、それをベースにテーマのカラーやサイトのロゴを追加したいなどの編集を行うことができます。これらのデザイン変更はiframeを通じて、実際に提供されるWeb Storiesをプレビューとして表示することで、デザインを確認しながら編集を行うことができます。
Web Storiesを作成するパートでは、使用したい記事のURLを入力することで、そのURLから取得できるタイトルや記事の説明文、画像などをHTMLのメタタグから自動で取得し、それらの情報と作成したテンプレートを組み合わせることで、Web Storiesを作成します。つまり一度テンプレートを作れば、あとはURLを入力するだけで新たなWeb Storiesを簡単に作成できます。（もちろん必要があればURLから自動で生成されたタイトルや画像などは手動で変更可能です。）
Web Storiesを作成後は、AnyManagerがホストするサーバー経由でそれを配信するか、作成したWeb StoriesのHTMLをダウンロードして、サイトをホストしているサーバー上にそれを設置することで配信できます。
システム構成
システムの構成は大まかに以下のようになっております。
- テンプレートの情報をデータベースで保持する
- URLからタイトルなどの情報をクロールする
- 2.3.のデータを組み合わせて、Web Stories HTMLを生成する
- これらをダウンロードする、もしくはこのHTMLをAnyManagerのサーバーにホストしCDN経由で配信する。
システムとして複雑なところは特にないのでそれぞれの詳細は省きますが、URLを入力したら直ちにそれがプレビューとして表示して確認できるように、URLを入力したら2 ~ 5秒程度で実際にできるWeb Storiesを表示できるようにしています。
現状の課題と今後の展望
現状の課題として、作成したWeb StoriesのHTMLをダウンロードしてWebサイトでホストする場合、クライアントはWeb Storiesを作成、ダウンロード、そして開発者などに依頼してそのHTMLファイルをサーバーに設置する必要があります。これは例えば、サイト運営者がサイトの開発を外部へ委託している場合、Web Storiesを作成するたびに外部のリソースを使用しなければなりません。これはあまり良い運用フローではありません。 理想的には、システムの知識がないライターだけでも、URLを入れるだけでWeb Storiesの作成から配信まで行えるようにしたいです。 これを実現するための機能、実現方法にはいくつかのアイディアがあり、今後これを開発していく予定です。それについては、新機能がリリースしたタイミングで別途記事を書こうと思いますので、それまでお楽しみにしてください。
