ReactとWAI-ARIAでアクセシブルなアコーディオンUIを実装してみた / masuP.net
React の手習いに開閉式のいわゆるアコーディオンUIを実装してみましたので備忘録。 Javascript, ES2016, React, WAI-ARIA とも確信を持ってるわけではなく、いずれも調べながらの実装なので、マサカリツッコミやアドバイス歓迎です。 要件 アコーディオンUIは、コンテンツの表示トリガー（アコーディオンヘッダー）とコンテンツ（アコーディオンパネル）がグルーピングされたものが（主に縦方向に）並んでいるものを指していることが多いと思いますが、とりあえず次の要件で実装しました。 アコーディオンヘッダーをクリックでアコーディオンパネルの開閉を切り替え アコーディオンパネルの開閉の初期状態を設定可能 すべて開く / すべて閉じる ボタンの実装（ボタンを表示させるかは選択可能） フォーカスマネジメントする（隠れているアコーディオンパネル内の要素はフォーカスされない） キーボ
Sublime Text 3 + Emmetでid,class名コメントをHTML閉じタグの前に入れる / masuP.net
idやclass属性を付与した要素の閉じタグ付近に属性の名前をコメントで残すことで、HTMLの構造を分かりやすくすることが多いのですが、その都度コメントを入力するのは面倒くさいので、Mac + Sublime Text 3上で、Emmet使って楽しようという話です。 というわけで最終目標は、Emmetで.hogehogeを下記のように展開することです。 HTML <div class="hogehoge"> <!-- /.hogehoge --></div> Emmetのfilter機能 まずEmmetのfilter機能を使って、.hogehoge|cという風に末尾に|cを入力して展開すると、 HTML <div class="hogehoge"> </div> <!-- /.hogehoge --> という形で、閉じタグの後ろにid,class属性の値をコメントで入れてくれます。 とは言
MacBook Pro RetinaのスクリーンショットをAutomatorで自動最適化する / masuP.net
MacBook ProのRetinaモデルで画面のスクリーンショットを取ると、倍のサイズになってしまいちょっと画面共有したいなという場合は、ファイルサイズが重くて不便です。 なのでスクリーンショットを撮るたびにプレビューで開いてサイズを半分にして、画像最適化ソフトで最適化して、とやっていましたがもうやってられないので、Automatorを使って自動化しました。備忘録がてらその手順をご紹介します。 フォルダアクションを作成してスクリーンショット画像を対象にする まず Automatorを立ち上げて新規書類を作成します。書類の種類は「フォルダアクション」を選択してください。「フォルダアクション」はフォルダに新しいファイルかフォルダが追加されると登録した作業を自動で実行してくれます。 次に、対象のフォルダを選択します。スクリーンショットの保存場所はデフォルトではDownloadsですので、Dow
記事のマークアップをGoogleのRich Snippets for Articlesに対応させた話 / masuP.net
このブログの記事は構造化データとしてマークアップをしていましたが、それを改めてGoogleさんのRich Snippets for Articlesに対応したという話です。 Rich Snippets for Articlesが表示されたイメージ via Enabling Rich Snippets for Articles | Structured Data | Google Developers これまでは microdataの記法で下記の4項目を schema.org/BlogPosting としてマークアップしていました。 記事タイトル (name) 公開日 (datePublished) 本文 (articleBody) URL (url) ※()内はプロパティ 上記でも構造化データとしては間違ってはいないのですが、Rich Snippets for Articlesでは、記
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
