axe-runnerを大幅改良してnpmで公開
Twitterを見ていて、2019年に開発した「axe-runner」のことを思い出しました。（詳細は記事「Puppeteerとaxe-coreで複数ページのアクセシビリティ検証を実現する」を参照してください。）最近何か作りたい欲が高まっていてaxe-runnerも改良してみたくなり、先週末から手を入れ始めました。結果、色々至らなかった点を大幅改良すること、またnpmでの公開を達成することができました。 axe-runnerとは Deque Systems社が開発しているアクセシビリティのテストエンジン「axe」を利用し、複数ページのアクセシビリティチェックを行い結果をCSVに記録するものです。コマンドラインで実行します。 改良点 これまではGitHubからソースコードをダウンロードしnode axe-runner（npm start）を実行する方法でしたが、コマンドラインスクリプトを用意
Movable Type 7のBlockEditorに独自フィールドを追加する
Movable Type 7のコンテンツタイプでは、複数行テキストフィールドにおいて「BlockEditor（ブロックエディタ）」が利用できます。ブロックエディタとは、見出し・段落・画像など入力するコンテンツに合わせたブロックエディタフィールドを選択して入力する作業を繰り返し一つのコンテンツページを作り上げていく仕組みです。TinyMCEなどのWYSIWYGエディタでは難しいレイアウトでも、ブロックエディタであれば予め入力フィールドを整えておくことできれいにレイアウトが再現できる可能性を持っています。 現在公開されているMovable Type 7 Betaでは標準で4種類のフィールドが選択できますが、本格的に使用するには段落をはじめ様々なフィールド（フォーマット）が必要になるでしょう。そこで、ブロックエディタのフィールドを追加する方法を研究してみました。よく利用する「画像＋テキスト」フィ
「アクセシビリティやるぞ！夏祭り2」でテストしたアプリの制作ノート
2016年9月28日（水）にヤフー株式会社さんのセミナールームで開催された「アクセシビリティやるぞ！夏祭り2 ～俺たちにテストさせろスペシャル～」のセッション2、「セッション2 俺たちにテストさせろ！スマホアプリのユーザーテスト生実況！」に登壇させていただきました。ご参加いただきましたみなさま、関係者のみなさま、ありがとうございました。 セッションで私が提供したブログリーダーアプリ（Junnama Online）は私がiOSアプリ開発を学ぶ過程で作り始めたもので、「これはシンプルなアプリだな」と思われた方も多いのではないかと思います。おそらく参考書（私は「本気ではじめるiPhoneアプリ作り Xcode 7.x＋Swift 2.x対応 黒帯エンジニアがしっかり教える基本テクニック」を読みました）の内容を応用して作っていけば、初心者でもなんとか完成させることができる簡単なアプリです。また、H
チェックボックスやラジオボタンのカスタマイズとアクセシビリティ
今朝CSS Weekly Issue #178で取り上げられていた記事「CSS vs SVG: Styling Checkboxes and Radio Buttonsを見ました。 個人的にはチェックボックスやラジオボタンはブラウザ標準のものを使うのが無難かな（ユーザーが見慣れている点、アクセシビリティ面などで）と思うのですが、Androidだとチェックボックスやラジオボタンがどうも小さいですし、サイトのテイストに合わせてかっこよく見せるのもありなのかな、とも思うこともあります。 ただ、今回のサンプルもそうなのですが、チェックボックスやラジオボタンのカスタマイズをしている場合にマウスでしか操作できない状況にあるのをよく見かけます。アクセシビリティを確保しつつ、チェックボックスやラジオボタンのカスタマイズするには、以下の点に注意する必要があるのかなと考えています。 input[type="r
スタイルガイドジェネレータ「Hologram」とShadow DOM
スタイルガイドジェネレータ「Hologram」のテンプレートを作ろうとHTML/CSSを書き始めたのですが、どうもスタイルガイドのテンプレートのCSSと、スタイルガイドでドキュメント化しようとしているCSSが干渉し合い、良い感じにならない気がします。スタイルガイドのテンプレートの命名規則を工夫することで干渉はかなり押さえられると考えられますが、例えばスタイルガイドのテンプレートのCSSでNormalize.cssを使った場合はどうでしょうか。 SC5 Style Guide Generatorを見つける CSSの干渉について色々と思案している時、ふと「Shadow DOMでカプセル化できればいいのにな」と思い、おもむろに「styleguide shadowdom」でGoogle検索をしてみたところ、「SC5 Style Guide Generator」が見つかりました。デモを見たところ、確
gruntやgulpでSSIを利用する
Webサイトの設計・実装時に、Gruntのgrunt-contrib-connectを利用してWebサーバーを立ち上げているのですが、ApacheのようにSSIが使えたらなと思うことが時々ありました。 今日「node.js ssi」でGoogle検索をしてみると、偶然1位にssi - npmを発見しました。さらに調べていくと、connect-ssiというMiddlewareを見つけました。テストしてみたところ、<!--#include file="foo/bar.txt" -->の記述で、bar.txtの内容がインクルードされました。これは使えそうです。 ただ、次の3点の問題があり修正してプルリクエストを送信しました（慣れていない上に英語が苦手なので申し訳ない感じですが...）。これらは取り込まれ、バージョン0.1.3として公開されました。 /foo/にアクセスした際に、/foo/inde
gulpでSassのコンパイルやlivereloadなどを試してみた
※過去記事のメンテナンスは通常やっていないのですが（当時の記録を残す意味でも）、最近閲覧してくださる方も多いので、研究も兼ねて2014年7月23日に少し追記等を行いました。 ※2015年2月に書き直したgulpfileを、「My gulpfile.coffee (Early 2015) でSassのコンパイルとか」で紹介しています。 ※gulp-ruby-sassの記述方式の変更について追記しました。 2012年にGruntを知ってから便利に使わせてもらっていますが、最近話題になっているgulp.js（以下gulp）を試してみました。今のところGruntには大きな不満はないのですが、万が一に備えて代替手段を用意しておく方が良いと考えていること、そしてGetting started with gulp -- Mark Goodyear — Front-end developer and de
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
