![Microsoft、アプリのアクセシビリティ問題を調査する無償ツールをオープンソース化/WindowsアプリとWebアプリの両方をカバー](https://cdn-ak-scissors.b.st-hatena.com/image/square/ddfbe53c976cfaccf7f67824b32ebbe36498f380/height=288;version=1;width=512/https%3A%2F%2Fforest.watch.impress.co.jp%2Fimg%2Fwf%2Flist%2F1174%2F814%2Fimage1.jpg)
いわさです。 皆様、アクセシビリティに配慮したWebサイトの設計されてますでしょうか。 Webアクセシビリティを評価するためのツールがMicrosoftから提供されていますので紹介したいと思います。 Accessibility Insightsというツールです。 元々はMicrosoftにて内部開発されていたもので、2019年にオープンソース化されています。 本日はWebサイトのアクセシビリティの評価を行いたいと思いますが、AndroidやWindowsのアプリケーションにも対応しています。 Webアクセシビリティの場合はGoogle Chromeの拡張として提供されています。 Webアクセシビリティとは 全ての利用者や環境下において、使用できるようにWebサイトが設計・開発されていることを指します。 弊社の以下のエントリをご参照ください。 使ってみた テスト用のWebサイトはSeleni
サイトを閲覧中に「このサイトの過去のページが気になるけど、わざわざインターネットアーカイブにアクセスしてウェイバックマシンで検索するのはちょっと面倒」と思ったことがある人は少なくないはず。無料でインストール可能なChromeおよびFirefox向け拡張機能「Vandal」を使うと、ウェイバックマシンが収集したスナップショットを簡単に見ることができます。 Vandal | Navigator for Web Archive https://vegetableman.github.io/vandal/ 上記のURLにアクセスすると、以下のように表示されます。VandalはChrome版とFirefox版が用意されていますが、今回はChromeに導入するため「ADD TO CHROME」をクリックします。 続いて「Chromeに追加」をクリックします。 「拡張機能を追加」をクリックします。 導入
最近、JavaScriptフレームワークであるVue.jsの勉強をしているのですが、jQueryを用いて開発を進めるときと比べるとデバックに時間がかかってしまいます。 何か良い解決策を探してみると「Vue.js Devtools」というchromeブラウザの拡張機能の存在を知りました。 早速導入してみると、 作業がとても捗った ので、導入方法や使い方を簡単にまとめたいと思います。 Vue.js Devtoolsとは Vue.js Devtoolsは、Vue.jsの開発をサポートする Chromeブラウザの拡張機能 です。これを導入するとconsoleを開かなくてもdataの中身などを確認することができるようになります。 Vue.js Devtoolsの導入方法について それではさっそくVue.js devtoolの導入方法について。まずは下記URLにアクセスして拡張機能を追加します。 Vu
エディタで作業しながらデバッグをしたい人にぴったりな、VS Code内にChromeをプレビューとして表示させることができる機能拡張を紹介します。 ブラウザで単に表示するだけでなく、デベロッパーツールと連携させることも可能なので、デバッグがかなり捗ると思います。 Browser Preview for VS Code -GitHub Browser Preview for VS Codeの特徴 Browser Preview for VS Codeのインストール Browser Preview for VS Codeの使い方 Browser Preview for VS Codeの特徴 Browser Previewは、VS Code内に実際のブラウザをプレビューとして表示させることができます。 VS Code内でブラウザのプレビューが可能(Chrome Headlessにより)。 複数の
VisBugはChromeの機能拡張で、ブラウザに表示したページのデザインやコンテンツを検証・編集できます。グリッドの確認はもちろん、要素を移動させたり、入れ替えたり、別の画像にしたり、テキストを編集したり、カラーを変更したりなど、さまざまなアイデアを実行・テストすることができます。 制作や検証時だけでなく、クライアントとの打ち合わせ、社内ミーティングなど、活躍するシーンがたくさんある便利ツールです。 VisBug -GitHub VisBugの特徴 VisBugのインストール VisBugの機能 VisBugの特徴 VisBugはChromeの機能拡張で、デベロッパーツールのデザイナーやディレクター向けという感じです。開発者のAdam Argyle氏は、Googleの現役UXエンジニア。 機能拡張なので、使うのは簡単です。 Chromeで当ブログを表示し、VisBugを起動してみました。
CSSでレイアウトをする際、最近の主流はFlexbox、そしてCSS Gridも増えてきました。 そんな中、サポートされていないブラウザ用に必要になるのがフォールバックです。 検証するのが面倒なフォールバックのスタイルを簡単に検証できるChrome, Firefox対応の機能拡張を紹介します。 Feature Queries Manager -GitHub Feature Queries Managerの機能 Feature Queries Managerのダウンロード Feature Queries Managerの使い方 Feature Queries Managerの機能 Feature Queries Managerはその名の通り、@supports機能クエリに記述されたCSSのスタイルを管理して、切り替えることができます。 例えば、レイアウトをFlexboxで実装する場合、Fle
指定したページが一般的なブラウザやデバイスでどのように表示されるか、1クリックで確認できるChromeの機能拡張を紹介します。 WindowsからSafari, iOSの確認、macOSからIE, Edge, Androidの確認もできます。 Multi-browser Screenshots Multi-browser Screenshotsで対応しているブラウザ・デバイスは、下記の通り。 ※2018年5月現在 それぞれ、WindowsからでもmacOSからでも利用できます。 Edge 15.0(Windows 10) IE 11.0(Windows 10) Chrome 50.0(Windows 10) Firefox 45.0(Windows 10) Safari 9.1(OS X El Capitan) IE 10.0(Windows 7) IE 9.0(Windows 7) IE
DOMの構造を調査する、要素のサイズを測る、要素のみのキャプチャを撮る、画像ファイルを抽出する、カラーやテキストを編集するなど、これらWeb制作に便利な機能がまとめて、しかも高性能で快適に利用できるChromeの機能拡張を紹介します。 それぞれ単体の機能拡張を使用している人は、一つにまとめられて簡単だと思います。 CanvasFlip CanvasFlipの機能 CanvasFlipのインストール CanvasFlipの使い方 CanvasFlipの機能 CanvasFlipは先日リリースされたばかりの新しい機能拡張で、私も先週から使用していますが、かなり便利です。パネルのUIも操作しやすく、ページに表示されるハイライトやメジャーも見やすいと思います。 ページの基本情報。 指定した要素のプロパティを表示するインスペクタ。 インスペクタでスタイルを変更すると、すぐにページに反映されます。 メ
次に、Sublime Text 3を起動して、Package Controlを開きます。↓↓ Install Packageをクリックします。↓↓ GhostTextと入力して、GhostTextをクリックすればインストール完了です。↓↓ GhostText for Chromeの使い方。 まず、テキストフィールドのあるページにアクセスします。 そして、Chromeの右端にある、GhostTextアイコンをクリックします。↓↓ こんなボックスが表示されるので、編集したいテキストフィールドにカーソルを当てます。↓↓ すると、テキストフィールドが青く囲われて、↓↓ Sublime Textにテキストフィールド内の文章が反映されます。なんて便利な!↓↓ さて、GhostTextが凄いのはこれだけじゃなく、なんとSublime Textで編集した文字がリアルタイムにChromeのテキストボックスに
Markdown記法で書いた内容をブラウザですぐに確認する方法として 「Markdown Preview Plus」というChromeの拡張機能があります。 ファイルをドラッグアンドドロップするだけで表示してくれて、 便利な拡張機能なので紹介します。 「Markdown Preview Plus」の設定方法 ★ 「Markdown Preview Plus」で検索すると多分1番上か2番目ににChromeウェブストアのページが表示されます。 ★ Chromeウェブストアから「CHROMEに追加」をクリックしてインストール。 ★ 「設定」⇒ 「拡張機能 」⇒ 「Markdown Preview Plus」⇒ 「ファイルの URL へのアクセスを許可する」を選択。
TOP > Article Theme > ツール紹介 > Google検索結果に各SNSシェア数を強制表示するChrome拡張機能「BUZZ RANKER」を作ってみた お久しぶりです。最近思いっきりサボっておりました中村です。 今回は、先日リリースして以来未だ結構な人気拡張機能となっている「Antenna Skipper」に続き、自作Chrome拡張機能シリーズ第二弾ってことで「BUZZ RANKER」のご紹介…というか作ったよレポと構造解説となります。 気になる!けど意外と調べにくい「ライバルサイトの個別記事SNSシェア数」 別にメディアとかコンテンツマーケとか、そっち系に限った話では無く、それこそSEO関連とかマーケ畑の人だって気になると思うんですよね。 『○○系ワードで人気のコンテンツってどんなんだ?』とかその辺の情報。 で、これまでってそういう事調べようと思うと結構大変だったん
サイト強化はこれひとつ はやく、大きな成果へ ヒートマップ、サイト解析、ページ編集、A/Bテスト、WEB接客、パーソナライゼーション 1つのタグ設置だけで、全てノーコードで使えます。
Lucid Chartとは LucidChartが、ブラウザ上の作図ツールです。 マインドマップやUML図等、astah* communityとかで作成するような図をブラウザ上で作成することができます。 また、テンプレートも多数用意されており、それらを元に作図も可能です。 個人用アカウントであれば、オブジェクト数/ストレージ容量/使用できる図形に制限はありますが、無料で使用することもできます。 また、有料プランなら、Google Driveと連携できたりとか、いろんなことができるみたいです。 Visioファイルを開く 先日、LucidChartは新しいChrome用extentionとFirefox用extentionリリースしました。 このextentionを使用すると、Lucidchart上でVisioファイルを表示できます。 Visio用ビューアで見るのも面倒くさいという人(私です)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く