前々から気になっていたFigmaのStorybookと連携できるプラグインを試してみる
これをやるにはChromaticにStorybookがパブリックにホスティングされている必要がある
やり方は以下にまとめた
これをみてやってみる
プラグインを入れて、コンポーネントを選択すると以下のようなポップアップが出現する
コンポーネントを選択する時しかこのポップアップがでないことに注意
次にChromaticのStorybookのURLをコピーする
このとき、URLはChromaticのライブラリタブにあるhttps://www.chromatic.com/component?appId=xxxxxではなく、
https://xxxxxxxxxxxx.chromatic.com/というURLであることに注意
いつまでも連携できずに若干困った
これで連携できるようになった
コンポーネントの横にStorybookが表示される
ほぼ同時に@xrxoxcxoxさんも記事にしていた
Qiitaの@xrxoxcxoxさんと同じモチベーションでChromaticを試してみた
ChromaticはStorybookを利用したクラウドベースのツールチェーンで、主にVRT（ビジュアルリグレッションテスト）などに使われる
さっそくやってみる
まずは、chromaticにサインアップするとGithubとの連携を求められるので、リポジトリと紐づける
このときプライベートは選択肢に出てこないので、Githubから [Integrations]→[Applications]→[Chromatic OAuth] でプライベートリポジトリにチェックをつける
紐付けが完了すると次のような画面がでてくるので、順にコマンドを実行する
これでまずはChromaticにStorybookとビルド結果がアップロードされた
ここをみてGithubActionsで自動化する
公式ドキュメントでは、pushイベントでChromaticのステップを実行することをお勧めしているが、プルリクにつくったときにビルドするように変更した
これでめちゃめちゃ簡単にVRT環境がつくれた
JackさんのNavigation APIの記事を読んで痺れた
SPA（シングルページアプリケーション）の履歴管理について、既存のwindow.historyAPIを使った方法ではいくつかの問題がある
例えば、iframeの中の遷移履歴も含まれてしまっていたり、「戻る」時の focus や scroll の位置をブラウザに伝えにくいなど
このことは特に支援技術を通じてアクセスしているユーザにとっては大きな問題である
この問題を解決するため、window.historyおよびwindow.locationの代替手段としてNavigation API （window.navigation）が考えられている
window.navigationはナビゲーションをインターセプトして開始する機能と、アプリケーションの履歴エントリを監視する機能を提供している
詳しい機能はJackさんの記事に書いてあるので割愛するが、フロントエンドとしてできることが増え、きめ細やかなユーザーにとって利用しやすいサイトがつくれそう
最近のSEO対策では、そのサイトの信頼度も重要な指標になることを知った
このとき、ちゃんと会社を証明するためにSSL証明書もOVかEVにしておくとよいみたいだが、それぞれ何かパッと説明できなかったのでまとめる
SSL証明書にはDomain Validation （DV）、Organization Validation （OV）、Extended Validation （EV）の３種類がある
会社を証明するための認証方法の違いによって種類が異なる
そのため、所有者がどういう組織かどうかは保証していない点がリスクになる
悪意のある人が実際にあるサイトと酷似したサイトを立ち上げてクレジットカード情報を盗むなどの詐欺は防げない
OV と EV は、ドメイン使用権に加えて、組織が実在するかと、本物の組織が申請しているを保証するのでDVのようなリスクはない
認証局は申請した会社の実在を民間信用調査会社の調査や、自ら現地に赴く等して確認するとのこと
EVが最も信用度の高い証明書で、ブラウザも一目でわかるようにアドレスバーが緑色になる
EVは会社が実在するかどうかの調査で、電話認証（在籍確認、会社運用状況確認）などもあるとのこと
E-A-Tで信頼度が求められる時代、証明書も見直す必要がありそう
去年の記事だが下の記事を読んで最近のSEO対策をキャッチアップしたい
自分の知識ではコンテンツの質と量の両方が大切で、誰も読まないようなページをたくさん用意しないことがよいと思っている
具体的にはGoogle Botが読みやすく、ちゃんとアクセスがあるコンテンツをインデックスさせていることと考えていた
ただ、令和時代ではそれでは不十分で、ユーザー行動をしっかり考えなければならないとのこと
例えば、YMYLページ
コロナなどの情報が載ったコンテンツはユーザーの将来の幸福、健康、経済的安定、または安全性に影響を及ぼす可能性があるため、「専門性や権威性、信頼性」が求められる
Googleはこのような専門性や、権威性、信頼性を重要視して評価軸にしており、頭文字をとってE-A-Tと呼ぶらしい
E-A-Tが必要な領域はここを注視する必要がある
他にもソーシャル運用やサイテーションの獲得が重要とのこと
サイテーションとは「企業名やサイト名、店舗名、ブランド名などが他サイトやSNSに書かれる」「企業名やサイト名、店舗名、ブランド名などが他サイトやSNSに書かれる」こと
つまり、話題になっていることも重要らしい
E-A-Tとサイテーションというワードだけでもアップデートすることができた
あるサイトでクリックしたらクリップボードに保存することをJavaScriptで実装していたが、その時のAPIが非推奨になっているのに気づいたので更新したい
非推奨になっているAPIはこれ
document.execCommand("copy”)
これを以下の書き方にする
navigator.clipboard.writeText()
thenで成功した場合と失敗した場合のコールバックを受け取れるので、デザインするときにはその辺の考慮が必要そう
navigator.clipboard.writeText("<empty clipboard>").then(function() { /* clipboard successfully set */ }, function() { /* clipboard write failed */ });
