Vue.jsで構築された、デスクトップでもスマホでも快適に操作できるスライドショーのフレームワーク -Eagle.js

Vue.jsで構築されたスライドショーのフレームワークを紹介します。
デスクトップ・スマホに完全対応、プレゼンテーションモードも備えており、キーボード・マウス・タッチ操作をサポートしている快適なスライドショーを実装できます。

Eagle.js -GitHub

• Eagle.jsの特徴
• Eagle.jsのデモ
• Eagle.jsの使い方

Eagle.jsの特徴

• Vue.jsで構築された、軽快に動作するスライドショーのフレームワーク。
• アニメーション、テーマ、インタラクティブウィジェットをサポート。
• プレゼンテーション全体でコンポーネント、スライド、スタイルを再利用可能。
• ビルトインプレゼンターモードとさまざまな便利なウィジェット。
• すべてのAPIが公開されており、カスタマイズ可能。
• ライセンスはISC Licenseで、商用でも無料で利用できます。

Eagle.jsのデモ

Eagle.jsを使用したさまざまなスライドショーを楽しめます。

まずは、スライドやフェードなどのアニメーションが仕込まれたスライドショーから。
Eagle.jsをプレゼンしているスライドショーで、コミカルな動きや映画のスタッフスクロールなどもあり、かなり面白いスライドです。

デモページ

スライドショーの操作は、キーボード・マウス・タッチ操作に対応しています。

スライドショーの操作方法

続いて、Eagle.jsのさまざまな使い方を解説したスライド。

Eagle recipes

スライドのテーマの作り方。

Themes Slideshows

スライドショーを作成するためのテンプレート。

Your First Slideshow

Eagle.jsの使い方

スライドの作り方は、デモのスライドで詳しく解説されています。

Eagle.jsを使用するには、Node.js/npmがインストールされている必要があります。
最初は、デモをクローンすることをお勧めします。

デモをインストールします（ローカルフォルダにのみダウンロードされます）。

「npm run dev」を実行してサーバを起動し、ブラウザで「http://localhost:8080」を開くと、スライドショーが表示されます。