# Opening Block

## 概要
このリポジトリはOpening BlockというWordpressのプラグインのソースコードを含んでいます。
機能の概要は以下のとおりです。
- Webサイトが開くとき、オープニングアニメーションを表示させるブロックです。アニメーションは３つのタイプがあり、３つのブロックに分かれており、お好みのアニメーションが選択できます。
- 全てのブロックには、閲覧者が次回からアニメーションを表示させないことを選択できる機能があります。ただし、この機能を使用するためには[BLOCK COLLECTIONS plugin](https://ja.wordpress.org/plugins/block-collections/)がインストールされ有効化されている必要があります。

zipファイルをダウンロードしてWordpress管理画面からプラグインのインストールを行うとプラグインとして機能します。

このプラグインをインストールすると次の３つのブロックが登録され、ブロックエディタでもサイトエディタで使用することができます（WordPress6.4.3で動作確認済み）。

以下各ブロックの機能の概要を説明します。
1. Logo Anime
文字列をSVGファイルに変換して、その周囲をなぞるようなアニメーションを演出します。文字列は自由に設定できます。フォントはEduVICWANTBeginner、Robotoの２種類が選択できます。
2. Tea Time
設定した文字列をテロップとして流すアニメーションを演出します。文字列は自由に設定できます。テロップはカップから湯気のように立ち上り、消えていきます。このアニメーションの長さは調節可能です。
3. WelCome
「Welcome」という文字をペンが描画するアニメーションを演出します。今回のバージョンでは文字列は「Welcome」に固定されています。

終了時のアニメーションを次の５つから選択できます。
1. 縦型スライド
2. 横型スライド
3. 縦方向開き
4. 横方向開き
5. 円形エクスパンド
これらのアニメーションと各ブロックのアニメーションを組み合わせてオープニングアニメーションを作成することになります。
具体的なアニメーションがどのようなものかは、スクリーンショットをご覧ください。

いずれのブロックでも画面の右下に閲覧者が次回からアニメーションを表示させないことを選択できるチェックボックスが配置されています。アニメーション実行中は、このチェックボックスが常時表示されていますが、アニメーション終了後は非表示となり、ユーザーが画面右下にマウスカーソルを持っていくと表示されます。


## その他特筆事項
1. このプラグインで提供されるブロックはWebページごとに１つのブロックを配置することができます。複数のブロックを配置しようとしてもエラー表示が出て配置することはできません。
しかし、トップページ以外のWebページに配置することは可能ですので、Webサイト全体で見ると複数のブロックが配置可能です。
2. 文言等の表示に関しては、WordPressの国際化関数による設定を行っていますので、多国籍の言語表示が可能です。現時点においては英語と日本語表記が可能となっています。

## 留意事項
1. Logo Animeブロックはフォントタイプからsvgファイルのパスを生成するため、opentype.jsというプラグインを使用しています。ソースコードや利用規約は[こちら](https://www.npmjs.com/package/opentype.js)に掲載されています。
2. 全てのブロックにはオープニングアニメーションを表示させないようにするスイッチ機能がありますが、それを機能させるためには[BLOCK COLLECTIONS plugin](https://ja.wordpress.org/plugins/block-collections/)がインストールされ有効化されている必要があります。