音声読み上げ

はじめに

ネットにテキストの読み上げ方法が載っていたのでReac+TypeScriptベースに書きなおしてみました。

元記事: Web Speech API の音声読み上げ機能の実装方法

実行例

See the Pen Untitled by kalz2q (@kalz2q) on CodePen.

おわりに

音声読み上げの部分は元のママです。

テキスト入力のonChangeとクリックのonClickの処理がReactになっています。

hookはonChangeの処理なので、useStateを使います。

例に入っているテキストは百人一首のかるた大会で最初に読み上げられる序歌です。

標的 bullseye を描く

はじめに

標的とか目玉とかで同心円を書きたい時にgradientをどう使うかの実験です。
2通りやってみた。

実行例

See the Pen bullseye by kalz2q (@kalz2q) on CodePen.

説明

左は background: linear-gradient で右は background: radial-gradient です。
いずれにせよ%やpxの使い方がよくわからない。

はっぱ(leaf)を描く

はじめに

葉っぱをCSSで描く例がネットに上がっています。
あの鋭角をどうやって出すのかなぁ、と疑問に思ってチャレンジしました。

実行例

See the Pen react-css-leaf-eye by kalz2q (@kalz2q) on CodePen.

解説

意外にも三角形を描くときのようなborderを使った技ではなく、普通にborder-radiusだけで形は作れていた。
border-topとかはどこに描かれるのかなぁ、と実験していたら妖艶な目になりました。

CSSでヒゲ(mustache)を描く

はじめに

TEDのhttps://www.youtube.com/watch?v=mNKz3devFAw と言う動画でCSSでヒゲを描いていた。

  • border-bottom: 0 0 0 100% とかで、ひげの先、鋭角を作ることが出来る

のが参考になりました。

再利用が出来るように box の中に配置してみました。

実行例

See the Pen react-css-mustache by kalz2q (@kalz2q) on CodePen.

解説

元のTED話では知らなかった事がいっぱいありました。

  • currentColor => Color を変数のように使う 。
  • box-shadow => 複数のシャドーをつけて画像として使う。
  • border-bottom: 0 0 0 100% とかで、ひげの先、鋭角を作ることが出来る 。
  • transform-origin: で回転の中心を変えられるのは知っていたけど、このように使うのは思いついていなかった。

このやり方だと再利用に困難だと思って、改造しました。改造の要点としては、

  • shadow を使わないやり方にした。
  • 上下左右均等に配置することにより、座標を計算しやすくした。
  • できる限りピクセルを直接ではなく、% や calc() を使って計算した座標に配置出来るように心がけた。

正三角形を回転する(その2)

はじめに

CSSで正三角形を描くのにborderを使う技がありますが、CSSのコマンドにpolygonがある。

clip-path: polygon(0% 87%, 50% 0%, 100% 87%);

紙と鉛筆で中心を割り出したりしなければいけないけれど、ボーダーで描くより頭は楽かもしれない。

実行例

See the Pen rotate-triangle-drawn-by-polygon by kalz2q (@kalz2q) on CodePen.

説明

ちゃんと回転していることを確認するのに円を重ねたのですが、正三角形を描くことより図形を重ねるabsoluteの使い方の方が難しかったかもしれない。

ランダムに人名を表示する

はじめに

ちょっと前に作った色とその名前をランダムに表示するプログラムを応用して人名を表示するページを作りました。

実行例

See the Pen react-random-name-picker by kalz2q (@kalz2q) on CodePen.

解説

背景色を変えるのを残したのはその方が画面が変わったのがわかっていいかなと思ったからです。
背景色のリストの数は150色くらいで人名の方は2000人くらいなのでそれぞれランダムにソートしています。
人名は読みと漢字もしくはアルファベットのスペルを出しているので、リストのリストになっています。そう言うのの型指定やuseStateをやったことがなかったので適当に書いたところ、無事ReactとTypeScriptのチェックを通りました。
あと、データをすべて同じページに埋め込んだので遅くなるかと思ったのですが、CodePenの環境でも全然問題ないみたいです。
人の名前を思い出すのはボケ防止になるので環境アプリとしていかがでしょうか。

React+TypeScript+Canvasで迷路

はじめに

Canvasに少し慣れて来た。
今回はuseEffectで出来ました。
再読込すると迷路が書き換わります。 棒倒し法と言うアルゴリズムだそうです。

実行例

See the Pen react-maze by kalz2q (@kalz2q) on CodePen.

解説

Reactのhookの使い方ですが、リアルタイムに書き換える場合は前回のようにuseRefを使う。
そうでなく、今回のように静的なCanvasに図形を置きたい場合はuseEffectでCanvasを用意して、useEffectの中で図形を描く。
と言うことなのかな、と言うのが現在の理解です。

あとTypeScriptがnullを含む型をエラーにするので本当はifで切り出さなければいけないのだろうけど、anyで受けると大丈夫なので邪道だけど便利です。