Linux の Firefox で Text-to-Speech ができるようになっていた

Linux の Firefox で Text-to-Speech ができるようになっていました。 Windows / Mac だと Microsoft / Apple の手を借りて Text-to-speech ができたのですが、 Linux だとずっと方法がわかりませんでした。

ふと見つけた speech-dispatcher のキーワード周りを調べてみたら普通に方法が載っていました。 忘れると困るのでメモしておきます。

• How can I change the voice used by Firefox Reader View (Narrator) in Ubuntu?
• Bug #1866880 “Firefox Speech Synthesis Not Working in Kubuntu By...” : Bugs : kubuntu-meta package : Ubuntu

一番上の内容はすこし古いので、いまは以下のコマンドを打つだけで、Text-to-Speech ができます。 なお発話精度は酷すぎて何言っているかわからないですが…。

sudo apt install speech-dispatcher

ボタン一つで動くようになったという事実が大きいです。

あとは発話精度の良い話者モデルを簡単に利用できるようになれば良いだけです。 たとえば festival をインストールすればギリギリ許せるくらいにはなります。

sudo apt install festival speech-dispatcher-festival

参考文献には設定が必要と書いてありましたが、Lubuntu 20.04 & Firefox 98 では特に何も設定は必要ありませんでした。 再起動すれば終わり。 いつからできたのかわかりませんが、ついにほとんどのブラウザで Text-to-Speech のサポートが完了しましたね。

ttf2svg を作った

@marmooo/ttf2svg を作りました。



機能は名前の通りで、qdsang/ttf2svg という同名のツールがあるのですが、 これは TTF を SVG フォントに変換するもので、1つの文字を SVG として切り出すようなことができません。 本当に欲しかったのは、その部分です。 後からパースすればできないこともないんですが、手軽さが必要なので…。

例えばどんな時に使うかというと、アイコンなどを作るとき、1文字だけ埋め込みたい時があります。 SVG にフォントを埋め込むと環境によって表示がズレてしまいます。 ズレないような表示が必要な場合、ライセンスをよく見ながら SVG として切り出して、 利用させてもらうほうが合理的だと思っています。

ttf2svg 以外の名前を考えつかなかったので、scoped packages で公開しました。

タッチde書き順を作った

タッチde書き順 という漢字の書き順ゲームを作りました。 書き順だけのアプリは色々ありそうですが、書き順の理解チェックもでき、 1学年ぶん一気に学習できるゲームっぽいアプリにしました。

タッチde書き順

漢字は得意な子と苦手な子で学び方も違うので、 手間を省かせてあげられるような仕組みを用意したいものです。 例えば得意な子にドリル教材は必要ないので、もっと有意義に時間を使ったほうが良いでしょう。 どちらの子もテストができれば良いはずで、 そこまでの過程にはかなりの無駄があるように思います。

今回作った タッチde書き順 は、 その壁を取り払うために、漢字を知って、書き順を覚えるという作業をすべてゲームにしました。 割と色々な使い方ができそうです。 まずは予習で漢字をさらっとすべて学ぶのに良いでしょう。 もともと漢字を知っている子は 15分くらいで1学年の学習が終わります。 それで覚えられれば漢字テストで良し、足りなければ タッチ漢字ドリル を練習をする。

苦手な子が一気に復習するのにも良さそうです。 書き順は完璧に覚える必要はないと思っていますが、 苦手な子ほど書き順が崩壊していることが多いので、高速復習に使えます。 綺麗さを強く意識せずにゲーム感覚でできるようにしたので、 文字が汚い子も遊びやすいと思います。 計算ゲームみたいな感覚でプレイできるので、割とおすすめかも。

「廴」のように画数が変わる面倒くさい漢字も若干ある訳ですが、 その判定はかなり難しいので、学習はゆるめにしています。 ストレス軽減を重視しました。

transition.css がアニメーションの実装に便利そう

たまたま argyleink/transition.css というアニメーションライブラリを見つけました。 これは便利そうです。 以下のようなアニメーションを、コピペで簡単に作れます (画像は公式より拝借)。

animate.css とよく似たライブラリですが、いくつか利点があります。

1. アニメーションを自由に作れる
2. 作ったアニメーションの CSS を部分的にコピーできる

(1) アニメーションの秒数や、開始・終了時のエフェクトを簡単に編集できます。 色々なものに適用しやすそうで、良い特徴だと思いました。

(2) 公式ページ で使いたいアニメーションの CSS だけコピーできます。 animate.css だと何も考えずに使おうとすると、ライブラリ全体を読み込まないといけないので利点です。 まあ animate.css も使うところだけ自分でコピペすれば良いので、慣れている人には関係ないかも知れませんが、楽さは重要です。

欠点としては、まだビルトインのアニメーションの数が少ないことでしょうか。 最近のナウいページで使われがちなアニメーションは網羅されていますが、 ゲームなどで面白い効果を出そうとするには、まだまだ不足している気はします。 animate.css のほうが使えそうなアニメーションが多いです。 ただ、いくらでも増やせる実装になっているので、これから増えていくと面白そうです。

今後に期待ですね。 ちなみに loadingio/transition.css というのもあって、これはこれで便利そう。 ただこちらは導入に少し手間が掛かる。

英文法タイピングを作った

英文法タイピング を作りました。 Grament で作った文法問題をそのまま使ってるので、作るのは簡単。

英文法タイピング

これで ABC → フォニックス → 英単語 → 英文法 → 英文、ときれいにカバーできました。 文法はまだ完璧じゃないけど。 派生部分はもう少しゲームを作りたいけど、高校生くらいまでの基礎英語はもう遊んでるだけで学べますね。

英語チートシートを作った

英語チートシート を作りました。 すこし前に作った英文法の学習アプリ Grament で遊ぶときに、簡易的な文法サイトが欲しいと思ったからです。

英語チートシート

いざ作り始めるとなかなか大変だったので、ひとまず中1の範囲までを公開することにしました。 まあ中1英語まで完璧にマスターすれば、何となく英語が読める状態にはなるでしょう。 そこから先は Sentency でも十分学習できるとは思います。 ただ、当然ながらその先についても追加したいとは思っているので、残りはじっくり作っていきます。

英語チートシート の副産物として、不規則動詞の暗記シート も作りました。 不規則動詞の暗記シートって、みんな適当に自作したりしていそうですが、いい感じに使い回せるものが欲しいですよね。 今回作ったものは部分的にテストしたり、カスタマイズできるようになっています。 どちらも A4 で綺麗に印刷できるようにも調整してあるので、使い勝手は良いんじゃないかと思います。

不規則動詞の暗記シート は微妙にページを跨いでズレがちですが、 ある程度スキルがあれば、Dev Tools でページを開いてちょちょいと編集してください。 それでも足りない時は、html タグに contenteditable 属性を付けて弄ればいくらでも調整できるので、まあ良いかと思っています。