ツイッターでアクセシビリティ向上日誌２【目視試験編】‐Akira Tsuda Portfolio and Blogというのを見かけて、そういえばアクセシビリティチェックって何をどうしているのかという話をウェブ上でほとんど見かけない（というか自分は知らない）ので、思い切ってチェックの過程や考え方を書いてみようかなと。 チェック対象のサイトを作った@HeldaForStudy氏に尋ねたところ、題材として使ってよいという返事をいただいたので、「アトリエ金工やまぐち」のサイト1ページをチェックしてみることにします。 対象ページはBasic認証がかかっているので、アクセシビリティ向上日誌１【各種ツール評価編】からたどってください。 @HeldaForStudy氏はレベルはA*1でチェックしたとのことなので、チェック基準はWCAG 2.1レベルAでチェックすることにしましょう。 わたしは普段はCOB-

Twitter が日々壊れゆくなか、周りの人が Misskey や Mastodon や Threads に住居を移すようになりました。 私も移住先を検討してみたものの、移住先のプラットフォームだっていつまで持つか分からないし、複数のプラットフォームにアウトプットを分散させるのも良くないなぁと思い、 最終的にマイクロブログがだめならブログでいいじゃんと自分を納得させるに至りました。 せっかくなら ActivityPub に対応して、Fediverse の人からリモートフォローできるようにして、反応が見れたら嬉しいよねということで色々と調べて対応させることができました。 本ブログは「@blog.tyage.net@blog.tyage.net」でリモートフォローすることが可能です。 このブログは hugo で生成しており、静的ファイルのみ配信しています。 それは変えたくなかったため、Acti

はじめに こんにちは、都内でソフトウェアエンジニアをしているYSasagoです。 私はフロントエンドの開発時に、Chromeのブラウザを使うことが多いです。 Chrome には開発を便利にするchrome 拡張機能がたくさんあります。 普段、フロントエンド開発時に私が使っている拡張機能を紹介したいと思います。 UI Build Assistant アイコンは IT 大学と面白いですが、こちらの拡張機能を使えば、ワンクリックで背景と線に色付けをしてくれて、レイアウトが見やすくなります。こちらの拡張機能を使うとマージンの調整等が簡単にできるようになりとても便利です。 また、作成者のしまぶーさんの Youtube 動画は、フロントエンド学習にとても有益なのでよく拝見させていただいてます。 OFF ON Responsive Viewer 次に紹介するのは、Responsive Viewer です

アップデートのお知らせ(2022/03/15) 2022/03/15(火)にケンオールをアップデートしました。 アップデート内容は以下のとおりです。 新API: 日本の祝日API 郵便番号逆引き検索API: 品質の改善 祝日や休日のAPIについて、機能要望アンケートを募集中です！ 新API: 日本の祝日API 日本における祝日は、内閣府が毎年CSVデータを公開しています。 しかし、システムで祝日データを利用するとき、CSVをダウンロードし、それをシステムにロードするというのは意外と手間がかかります。 手動で更新する場合、手順自体を検証した上で運用ドキュメントを執筆する必要があります。 さらに、手動運用によるオペレーションミスのリスクも毎年つきまとうことになります。 自動化する場合、特別に祝日が移動するケースなどに対応できるようにしなければいけません。結局のところ手動でも更新できるようにして

最近のデバイスやブラウザに対応させる最小限のファビコンセットには、6種類のファイルで対応できます。ブラウザはもちろん、スマホやタブレットにも対応し、さらにSVGも含めて6種類だけです。 ファビコンに必要な6種類のファイル、ファビコンの設定方法、ファビコン画像を作成する方法について紹介します。 How to Favicon in 2024: Six files that fit most needs by Andrey Sitnik Sitnik氏は、PostCSS, Autoprefixer, NanoIDの制作者です。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2024/2/28: 元記事がアップデートされたので、当記事もアップデートしました。 はじめに ファビコンの設定方法 -ショートバージョン ファビコンの設定方法

突然ですが、皆さんはどのフォントでコーディングしていますか? monaco、Monospace、MSゴシックなど、等幅フォントを軸に種類は多種多様です そんな中、それらを尻目に私が使っているフォントはIosevkaというフォントです Iosevkaとは? 以下の特徴を持ったフォントです 等幅フォント 日本特有の文字種(㈱や㌕など)に対応 これらもきっちりと等幅を守っている リガチャ機能あり !=や<=など、特定の連続した文字列を合成して別の文字で表す機能 エディタもリガチャに対応している必要あり(VSCodeやAtom、iTerm2は対応しているので、大抵のエディタやIDEは対応していると思います) 特定の文字をプリセットの中から選ぶ事ができる プリセットから選んで、特定の文字のみデザインを変更することも可能 全体的な文字の太さ、デザイン、文字のゆとりも設定することが可能 特に 特定の文字

There are many categories of events including user events such as 'click' and system events such as 'DOMContentLoaded'.

2021 年 3 月 22 日に『ゼロからの OS 自作入門』を出版する予定です。 本書は OS を手作りする本で、現代のパソコンでちゃんと起動する点が特長です。 15 年前の 2006 年に出版された『30 日でできる！OS 自作入門』を読んで育った私（uchan）が その後継となるだろう本を書いたということで、執筆の裏話を記してみたいなと思います。 書籍の概要 タイトル：ゼロからの OS 自作入門 著者：内田公太（uchan） 出版予定日：2021 年 3 月 22 日 ページ数：768（最大。実際はもっと少なくなる予想） ISBN：978-4-8399-7586-9 出版社の書籍ページ：ゼロからのOS自作入門 | マイナビブックス 本書は OS 作りに関する知識がないところから始め、オリジナルの OS「MikanOS」を作る一通りの過程を説明します。 パソコンの電源を入れ、他の OS

補完するのは登録された軸のみになります。たとえばitalの値が1種類しか登録されていないフォントはitalの値によらず一定の傾きをもちます。 オプティカルサイズとは、サイズに連動した文字のスタイルです。フォントサイズが小さなときは簡略化された表記、大きなときは細かく装飾されたフォント、というように設計されることがあります。 標準ではフォントサイズに依存しているため手動での変更はできませんが、一部のフォントでは変更が可能です。先ほどのデモにおいても、オプティカルサイズに応じて文字バランスが微妙に変更されることが確認できますね。 Roboto-Flexフォントを例に バリアブルフォントはまだそれほど普及していないこともあり、入手元がそれほど多くありません。今回は、オープンフォントライセンスで配布されているRoboto-Flexフォントを使用します。 GitHub - Roboto-Flex 記

iOSのスマホでheight: 100vh;を定義してビューポートの高さいっぱいに表示したいのに、アドレスバーが表示されているとその分下が隠れて表示されてしまい、高さいっぱいにならないのを解決する方法を紹介します。 CSSのみのテクニックで、JavaScriptは必要ありません。 height: 100vh;だけでなく、min-heightやmax-heightでも機能します。 PostCSS 100vh Fix -GitHub PostCSS 100vh Fix 注意点 使い方 PostCSS 100vh Fix PostCSS 100vh Fixは、100vhのiOSの挙動（バグ？）を修正するPostCSSのプラグインです。ピュアCSSのソリューションで、JavaScriptは必要ありません。 高さいっぱいに表示したい時に、height: 100vh;だけを定義してもiOSでは期待通り

PCやスマホを使って、英語学習を時短にする便利なサービスやツールなどを紹介する連載。今回は、初心者から上級者まで、幅広くリスニング能力を向上できる「ELLLO」をご紹介します。 ELLLOは、「English Listening Lesson Library Online」の略で、読んで字のごとく、英語のリスニング学習に特化したオンライン学習サイト。3000以上という多くの無料のレッスンが用意されており、幅広いレベルの学習者が利用できる。もともと、日本で英語教師だったTodd Beuckens氏が創設したサイトで、2004年にスタートしたサイトだ。 メインの学習コンテンツは、ひたすら英語の音声を聞くというもの。スクリプトも用意されているため、聞き取れなかった場合も内容は把握できる。理想的なのは、スクリプトを見なくても聞き取れるようになることだ。 メインコンテンツとなるリスニングレッスンは、

エンジニアお茶会 2020/08/19 pastak.icon @pastak この発表のゴール 現代のウェブブラウザの目指している方向性について紹介する モダンブラウザで使える最新の面白便利APIを紹介する ちゃんと仕様に入りそうなもの(Googleの力技で…も含む) （前半の各ベンダの話はpastak.icon個人の見解を含みます） 次ではない フロントエンドなんでも相談室 前提知識のコーナー "WebAPI"とは何を指すのか、標準化について ECMAScript Ecma InternationalにてECMA-262という規格番号 ほぼLiving Standardという雰囲気もあるけど、年に1回タグが付く ES2020: ECMAScript® 2020 Language Specification 最新の様子: https://tc39.es/ecma262/ Array、Nu

水揚げされ、小分けされるスク＝21日午後、南城市玉城の奥武島（新里圭蔵撮影） 【南城】旧暦6月1日に当たる21日、南城市玉城の奥武島で「海のボーナス」とも呼ばれるスク（アイゴの稚魚）が揚がった。島内の売店はスクを買い求める地元住民らでにぎわいをみせた。 漁師たちは午前7時ごろに出港し、約10時間かけてスクを取った。港では島の女性や漁師が水揚げしたばかりのスクをかごに移し替えて袋詰めにした。店頭に並べられたスクは飛ぶように売れ、漁師も店員も笑顔をみせた。 中本鮮魚店を経営する中本健一さん（64）は「今日だけで約100キロ取れた。特に多いというわけではないが、いつも通り味はいいはずだ」と話した。 奥武島いまいゆ市場でスクを買った女性（53）は「今晩は家族でスクの刺身を楽しみたい」と話し、笑顔で喜んだ。

Vue.jsは初学者にもとても手厚いサポートを提供してくれるフレームワークです。 たとえば、以下のコードで「リセット」ボタンを押すと「propsのcountは子コンポーネントから変更すべきではない」とわかりやすくエラーを表示してくれます。 <template> <div class="CountViewComponent"> カウント={{count}} <button @click="reset">リセット</button> </div> </template> <script> export default { props: { // 表示するカウント値 count: { type: Number, default: 3 } }, methods: { // カウントをリセットします reset() { this.count = 0 } } } </script> それでも時として、

そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400" alt="画像の説明"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般的（？）になっていました。また、widthとheight属性が記述してあってもCSSでwidth: 100%; height: auto;が指定されているとレイアウトシフトが発生してしまっていました。 参考： img要素のサイズ属性の記述の有無についてのTwitterのアンケート なんでいまさら？ なぜなら、2019年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか

git-steash.md 間違って別のブランチで実装を始めちゃった時にgit stashで別ブランチに編集中のソースを移動する git Git - Stashingの手抜き翻訳かつ、勝手に構成や説明の流れを変えたものです。 間違ってmasterブランチなどで実装を始めたのに途中で気づいて、開発用のdevelopmentブランチにその書きかけのソースをコミットすることなく持って行きたいときは、git stashを使う。 書きかけだとgit statusとしたときに色々でるはず。 $ git status # On branch master # Changes to be committed: # (use "git reset HEAD <file>..." to unstage) # # modified: index.html # # Changes not staged for c

物理学は常に数学の発展と共に進歩してきた。 というより物理学からの必要に駆られた要請によって新たな数学の概念が切り開かれてきた。 したがって当然、物理を学ぶ際には現象そのものの理解とその裏に潜む数学的内容の理解が両輪となるのだが、 なぜだか日本の学校教育においては、この前提が上手く機能していない。 物理分野においてある現象を習ったその翌年に、ようやく数学分野において必要な概念が登場するといった具合だ。 具体的には、以下のようなものがある。 小学校６年の理科で「てこ」の法則性を学ぶ。この背景にあるはずの「反比例」の関係は中学１年の数学で習う。中学校３年の理科で力の分解を学ぶ。この背景にあるはずの「三角比」は高校１年の数学Ⅰで習う。中学校３年の理科で運動エネルギーを学ぶ。この背景にあるはずの「二次関数」は高校１年の数学Ⅰで習う。高校１年の物理基礎で等加速度運動を学ぶ。この背景にあるはずの「多項

この記事について 本記事はPythonを使ったWebスクレイピングのテクニックを紹介します。 ※お酒飲みながら暇つぶしで書いたので割と適当です。 今回紹介するテクニックを使えれば経験上大体どんな値でも取得でき、これらはRubyだろうがGolangだろうが同じ様に動作します。 Webスクレイピングが出来ないサイトがあればコメントにて教えてください。全身全霊を持ってやってみます。 また、Webスクレイピングをしたことが無い方は下記の記事を読むことをお勧めします。 Python Webスクレイピング 実践入門 - Qiita 追記更新 6/12 コメントに対応しました。 はじめに 注意事項です。よく読みましょう。 岡崎市立中央図書館事件(Librahack事件) - Wikipedia Webスクレイピングの注意事項一覧