hitode909の日記

以前はプログラミング日記でしたが、今は子育て日記です

はてなブログを音読するボタン

そういえば，近年ではWeb Speech APIを使って，テキストを読み上げできるなと思ったので，このブログにも音読するボタンを設置してみた．
見出しの下あたりに「音読する」ボタンが出ていたら，押してみてください．

f:id:hitode909:20171211190723p:plain
音読ボタンの様子．

モダンなブラウザなら表示されてるはず．iOSには表示されてないかもしれない．表示されるけど音読してもらえないパターンもあるらしい．

コードはギットハブに置いてます．3行くらい書いたら読み上げ可能になって，あとは友愛を調整すれば完成した．便利な世の中になりましたね．
読み上げてもらうコツとしては，ちゃんと句読点を入れる，というのがある．普段あまり句読点を使わないけど，今日は丁寧に句読点を入れてみています．
あとは，GitHubをうまく読み上げてくれなかったので，ギットハブって書いたり，UIをうまく読んでくれなかったので，友愛って書いたりした．
それでは，ここまで聞いてくれて，ありがとうございました．趣味はマリンスポーツでした．

■

同僚が日曜の晩にカフェを始めていたので見に行った．コーヒーをいただいて，ワインをいただいて，ウイスキー飲み続けていた．居心地が良くて，一杯飲んだら帰ろうと思っていたけど12時くらいまで居てしまった．

普段同じメンバーで会社で飲んでるときは自分でウイスキー注ぐけど，店で注文すると注いでもらえる．大人なんだから自分で注げばいいのに，設定されたロールに合わせて動いていて，ままごとっぽい．会社で飲むときは適当に払いたい人が払ってるけど，店では客になった側が払う．お金を払う練習みたいになっていて，キッザニア感もある．

■

パソコン音楽クラブを観にメトロまで行った．かっこよかったので良かった．最近分かったのが，僕は耳が弱くて(?)，大音量で音楽を聴いているとすぐ耳がキーンとなってしまう．家でテレビの音がどんなに小さくてもうるさくてしかたないことがある．今も耳がおかしくなっている．

<a>か<button>か

クリックできるものがあって，<a>にするか<button>にするか，という話をしていて，いろんな観点があるなと思ったのでメモ．

  • 単なる画面遷移なら<a>
  • 単にformを送信したいときは，<input type="submit">や<button>
  • <button>はdisabled属性を使って無効状態にできるので，押せない場合もあるなら便利
  • リンクを<a>にしておくと，PCではホバーするとリンク先が見えるので，ユーザーにとっては何が起きるか予想できて便利
    • そう考えるとformは押してみるまでどこに飛ぶか分からないので怖い気がする
  • リンクを<a>にしておくと，:visitedを使って訪問済のリンクの色を変えることができて便利
  • モーダルウィンドウを出すとき，ウェルカムメッセージを開くボタンを<a href="#welcome">として，/#welcomeのときにウェルカムメッセージを出す，としておくとブラウザの機能に乗っかってモーダルウィンドウを出すことができて便利．
    • ブラウザバックやリロードに対応できる
  • <form>の中に<button>を置くとsubmitボタンになってしまうので，<button type="button">する
    • 普段はJSでclickイベントを見てpreventDefaultしているけど，ある日JSで例外が出てformがsubmitされてしまう，ということが昔あった
  • <button>のかわりに<span>を使うと，<button>が本来持つ機能を再実装することになりメリットが少ないのでやめましょう