読み上げ機能は目に優しい最近、ブラウザでニュースを読む時にMacの音声読み上げ機能を使うと、「目を閉じていてもニュースが頭に入ってくる」ことに気付きました。これは慣れるとかなり便利。なんと言っても目の疲れが大幅に軽減できることが最大の利点です。Speaking」を選べば読み上げ機能を使うことは可能です。アクセシビリティの設定で任意のショートカットキーを設定することも出来ます。一つの言語しか読み上げさせる必要がないのであれば、これで大丈夫です。複数の言語を使い分けたい場合は、これだと読み上げに使用する言語(音声)をその都度選ぶことが出来ません。日本語の音声を設定している状態で英語の文章を読み上げさせても、カナカナ読みの変な発音でしか読まれません。逆に英語の音声が選択されている状態で日本語を読み上げさせようとしても、上手く発音してくれません。選択されている文章の言語によって読み上げに使う音声を切り替える必要があるわけです。これが出来るように今回設定した方法を、以下にメモしておきます。選んで、ドラッグアンドドロップで追加します。読み上げに使う言語に対応した音声を選んで、後から分かる名前を付けて保存します。これを、使いたい言語の数だけ繰り返します。Actionが表示されます。ActionのチェックをONにして、好きなショートカットキーを設定すれば完了です。英語読み上げとしています。片手ですぐ押さえられる組み合わせが良いと思います。Actionが追加されているのが分かります。Analyticsを追加する(Next.js)まずは、Firebaseの管理画面から、該当のプロジェクトでAnalyticsを有効化します。アナリティクスを使ってみるここではNext.jsからエクスポートした静的サイトを例にします。全てのページで共通に含まれる部分で、下のようにHeadコンポーネントを使ってscriptタグを埋め込みます。要は下の赤字部分の3行のscriptタグがHTMLのhead部分に含まれるようにすれば良いということですね。);}次に、下のドキュメントの通りにイベントを送信する必要があります。「use-send-screenview.js」という2つのファイルを作成しました。pages/index.jsから呼び出すことでAnalyticsにイベントを送信します。deployでデプロイしてサイトを更新します。更新後のページを開くと、数秒でAnalyticsの画面にイベントが表示されるのが確認出来ます。Hostingでホスティングするまずは公式のドキュメントにしたがってNext.jsのアプリケーションを作成しましょう。Next.jshttps://nextjs.org/learn/basics/create-nextjs-apppackage.jsonファイルのscriptsセクションに下記を追加しておきます。outフォルダに結果が出力されるのを確認します。CLIを初期化します。initカーソルキーで「Hosting」を選択してスペースキーを押し、Enterで確定です。Firebaseの管理画面でまだ「プロジェクト」を作成していない場合は、プロジェクトIDと名称を入力して新規作成します。使われているIDを入れてしまうとエラーになるので、ユニークなIDを入力しましょう。アップロード対象のフォルダを聞かれるので、デフォルトの「public」ではなく「out」を指定します。complete!」と表示されれば完了です!慣れれば3分もかからずに出来てしまいますね。Functionsを使ったりするような場合も、下のドキュメントの通り設定すれば決して難しくはありません。使用した動的コンテンツの配信とマイクロサービスのホスティング本当に便利な世の中になったものです。Hostingでなくても良いのであれば、もちろんNext.jsの開発元であるVercel(旧Zeit)社のサービスを使うのが一番簡単でオススメです。https://vercel.com/こちらであれば、静的サイトでなくSSRありのサイトであっても、またバックエンドのAPIが必要な場合でも、何も考えずにデプロイしてしまえばあとはサービス側で上手くやってくれるみたいなので、こちらも素晴らしいと思います。共有2020年5月4日ReactでSVGファイルをコンポーネントとしてレンダリングするegghead.ioのレッスンを観ていて良さそうなものがあったので、メモしておきます。ドキュメントにも記述があります。Appで作ったReactアプリケーションでは画像ファイルを下のようにインポートしてコンポーネント内で参照することが出来ます。/>;}もちろん画像の形式がSVGであっても同様です。/>;}ただ、SVG形式の場合はインポートの仕方を下のように変えるとReactコンポーネントとしても使えるようになるそうです。imgタグではなく、svgタグになります。svgタグになってうれしい点は、SVG内の個々の要素(図形)をCSSでコントロール出来るようになることです。線の色や太さを変えたり、アニメーションを付け加えたりすることが可能になります。下の例では、Reactロゴのpathエレメントの部分のみ点線にして、さらに点線のオフセットをアニメーションで動かしています。}}実行するとこんな感じになります。