新年はAWSかるたで遊ぼう！！

新年に間に合いました！**AWSかるた**を作成しました！！
AWSのサービス説明とアイコンを頼りにサービス名を当てください。

[AWSかるた](https://moritalous.pages.dev/aws-karuta)

https://moritalous.pages.dev/aws-karuta

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/0d51a2e8-c91a-ff94-40f3-1cc7197204c5.png)

かるたは楽しく遊んでいただくとして、作成するにあたって使用した技術要素を紹介します。

## Webサイト構築フレームワーク「Docusaurus」

個人ブログをDocusaurusで構築しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/7ac45d86-7d8a-d9a0-8abc-95d4e9dba11f.png)

Docusaurusのいいところを紹介します。

### Markdownでブログが書ける

普段のブログはMarkdownで書いています。Markdownで記事を書いて、静的サイトとしてビルドした後、Cloudflare Pagesにデプロイしています。
Qiitaと同様、Markdownでブログが書けるのはとてもいいですね。

### ブログ以外にドキュメントと固定ページも作成できる

Docusaurusはブログだけでなくドキュメントを作成することができます。
どちらかというとドキュメントがメインかもしれません。
左側にメニューがあるこういうやつです。

* ドキュメントの例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/c8083d66-a069-9d07-4cfb-a4d5c17ff090.png)

以下のドキュメントサイトがDocusaurusで作成されているようです。

* React Native

https://reactnative.dev/docs/environment-setup

* Create React App

https://create-react-app.dev/docs/getting-started

* Supabase

https://supabase.com/docs

他にも単体のページの作成も可能です。
おそらくこのページはその機能で作成されていると思います。

* React Native Showcase

https://reactnative.dev/showcase

### Markdownだけでなく、Reactでページを作成できる

Markdownでかけるのもいいのですが、カスタマイズしたい場合に、Reactでページを作成することもできます。（混在も可能です。）
そのため、ブログの静的なページだけでなく、Reactをつかった動的なページの作成も可能です。
AWSかるたは、Reactで作成しました。

## AWS謹製デザインツール「Cloudscape」

2022年7月にAWSからデザインツールがリリースされました。

[直感的な Web アプリケーションを構築するオープンソースソリューションの Cloudscape デザインシステムを発表](https://aws.amazon.com/jp/about-aws/whats-new/2022/07/cloudscape-design-system-open-source-solution-building-intuitive-web-applications/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/1ca678bb-f471-51a5-2525-9755b0cbe1c6.png)

AWSのマネジメントコンソールに似たUI（ただし、明らかに別物）のコンポーネントが用意されており、デザインのスキルが無くてもある程度の見た目のサイトが構築できます。

![cloudscape.design_(1280x720) (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/81f416de-ee97-7445-7ea9-b3e3ffa9e29c.png)


CloudscapeはReactで利用できるコンポーネントとして提供されています。使用したコンポーネントを紹介します。

### Containerコンポーネント

![moritalous.pages.dev_aws-karuta(1280x720) (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/c2f07a91-913c-58d2-c52b-e066ab5b7424.png)

複数のコンポーネントのグループ化した見た目になります。「スコア」「1問 / 62問」がそれぞれContainerとなります。

Containerにはヘッダー、フッターが指摘でき、「スコア」「正解…」のところまでがヘッダー、「ギブアップ」ボタンはフッターとして配置しています。

### Buttonコンポーネント

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/3775ad1e-f3e7-05a2-4b69-6003c91cf0d6.png)

ボタンです。ラベルの左側のアイコンも用意されているものから選択可能です。また、任意の画像をセットすることも可能です。

Primary属性をつけると見た目が変わります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/22b2b9a8-e2ac-8778-4dd4-5a14d956f74c.png)

### Modalコンポーネント

他の要素の全面に表示させるモーダルです。モーダルの中にContainerなどを配置することで好きな内容を表示させられます。右上の×ボタンはデフォルトで用意されていますが、`onDismiss={() => setVisible(false)}`のように動作は指定する必要があります。（そうしないと閉じれないモーダルになります）

![localhost_3000_aws-karuta(1280x720) (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/22bf3ae6-4b5d-7930-a19b-ee6d4b9bbfcc.png)

### Badgeコンポーネント

すごく細かいですが、「初級」の部分はHeaderコンポーネントの`info`要素として、Badgeコンポーネントを指定しています。見た目の統一感が出ていいですね。

![localhost_3000_aws-karuta(1280x720) (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/6e5948e5-80c1-0b32-e54f-af984189f7c0.png)

## その他のTips

### 音声の再生

[Amazon Polly](https://aws.amazon.com/jp/polly/)で生成した音声データを使い、かるたの読み上げを行います。
HTMLで音声を再生するには`Audio`を使用します。再生を開始する際には`audio.play()`を呼び出します。

```typescript
function YomiageButton() {

  const audio = new Audio(`xxxxx.mp3`)

  const [load, setLoad] = useState(false)

  audio.addEventListener('play', function () {
    console.log('start play')
    setLoad(true)
  })
  audio.addEventListener('ended', function () {
    console.log('ended play')
    setLoad(false)
  })

  function play() {
    audio.play()
  }

  return (
    <>
      <Button iconName='audio-full' onClick={play} loading={load}>読上げ</Button>
    </>
  )
}
```

### 画像のグレースケール化

最上位の難易度の場合に、アイコンをグレースケールで表示しています。グレースケール化はCSSの`filter`だけで簡単にできました。

```css
{
    filter: grayscale(100%);
}
```

* グレースケール

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/54767f41-3e92-7827-ad67-9180bae21939.png)

* 通常表示

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/563f1bfb-300b-50d2-2077-7743016f77fb.png)

---

以上です

新年はかるたをお楽しみください😝

https://moritalous.pages.dev/aws-karuta