Tool カテゴリーの記事一覧

Web 上の便利ツールや機能などに関する記事の一覧を表示しています。（1 / 7 ページ）

Pa11y CI でアクセシビリティテストを自動化し日本語のレポートを HTML 形式で生成する

Node.js で動作する CUI Web アクセシビリティチェックツール「Pa11y」ベースの CI ツール「Pa11y CI」の導入から、複数 URL に対するアクセシビリティテストを一括で実行し、最終的に日本語のレポートを HTML 形式で生成するまでを解説します。

リアルタイム画像処理機能が充実した CDN、「imgix」を試してみたらとても簡単で便利だった件

画像処理に関する機能を豊富にそろえ、画像の配信に特化した CDN である「imgix」を導入してみたらとても便利だったので、導入の手順から実際の利用方法などについて簡単にまとめました。

完全禁煙のカフェを現在地から簡単に調べるサイトを作った件

外出先で完全禁煙のカフェを探す手間を最小限にするため、ブラウザで開くだけで現在地から周辺にある禁煙のカフェやレストランの存在を簡単に調べられるサイトを作ったという話。

Windows 10 で画面の一部をドラッグ & ドロップしてスクリーンショットを撮る方法

Windows 10 （Creators Update 適用済み）では、ショートカットキーとして [Windows キー] + [Shift キー] + [S] を押すことで、画面の一部をドラッグ & ドロップで選択してクリップボードにコピーする機能が標準で利用できます。

Mastodon インスタンスの画像や動画の保存先をクラウドストレージ（Amazon S3）に移行した話

Mastodon インスタンスが取得する画像や動画の保存先を外部サーバに変更して自分のサーバのストレージ消費を抑えた話。Mastodon がデフォルトで対応している Amazon S3 に画像や動画が保存されるように設定した際の手順をまとめます。

さくらの VPS + CentOS7 で俺専用 Mastodon インスタンスを立ててみた話

Mastodon インスタンスを自分専用に運用してみようと思い、手元で余っていたさくらの VPS （さくらインターネット）を利用して CentOS7 + nginx + Docker で立ててみたのでメモ

過去 2年間のカーシェアリング利用料をまとめてみたので普通自動車の維持費と比べてみる

車を所有するかカーシェアリングなどを利用するかは単に金銭的な比較だけではなくライフスタイルの問題なのでどちらが良い悪いと言うつもりはありませんが、個人的にここ 3年程カーシェアリングを使ってきて、車を所有していた場合と比べてどの程度コスト的なメリットがあったのか参考までにまとめてみます。

閲覧中の URL を AMP （Accelerated Mobile Pages）バリデータに投げるブックマークレット

q-Az さんが公開した「AMP ページに＃development=1 を付けて開くブックマークレット」に感化されて、閲覧中の URL を Web 版の AMP バリデータに送信するブックマークレットを作ったので共有します。私が作ったシンプル版と、q-Az さんのものを改造した版の 2バージョンを掲載。

まとめサイトなどを除外した Google 検索「クリーンサーチ」を作ってみた

まとめサイトなどを除外した Google 検索が行える「クリーンサーチ」を作ってみました。元々個人で Google カスタム検索を利用して作成したものを公開したもの。検索時に邪魔なサイトを排除してありますのでノイズを排除しながら検索ができます。

Let's Encrypt （無料 SSL サーバ証明書）の設定が超簡単になったと聞いて試してみた件

無料の SSL （TSL）サーバ証明書を提供する認証局「Let's Encrypt」からの証明書取得がとっても簡単になったという話を聞いてちょっと試してみましたが、本当にとっても簡単だったので手順などをメモ。

Grunt 1.0.0 がついに正式リリース、0.4.5 のリリースから約 2年

0.4.5 を最後に 2年近く開発が止まってしまっていた JavaScript タスクランナー「Grunt」ですが、今年 2月の 1.0.0 RC1 リリースに続き、正式リリース版の 1.0.0 が公開されました。

pa11y のレポートを日本語で表示したかったので HTML_CodeSniffer の日本語版作った

JavaScript ベースのアクセシビリティチェックツール、HTML_CodeSniffer を日本語化して GitHub で公開しました。これを利用したアクセシビリティチェックツール、pa11y のレポートを日本語で表示したかったというのがきっかけです。

Windows 版 1Password の保管庫形式を「OPVault」に変更する方法

Windows 版 1Password で保存庫の形式を旧来の Agile Keychain 形式から、OPVault 形式に変更する方法についてメモ

Bootstrap 4周年の記念日に Bootstrap 4 の alpha 版がリリース

2011年 8月 19日に公開された Bootstrap は 2015年 8月 19日で 4回目の誕生日を迎えたそうですが、この記念日に Bootstrap 4 のアルファ版が最初のリリースをされました。

Web サイト閲覧時のデータ使用量を節約する Chrome 拡張機能「Data Saver （データセーバー）」

Web ページ閲覧時にブラウザが受信するデータを一旦 Google のサーバ側で圧縮することでデータ使用量を節約する「データセーバー」機能をデスクトップ版 Chrome で使用するための拡張機能がベータ版としてリリースされました。

GitHub が PDF ファイルのプレビューに対応

GitHub の公式 Blog で、GitHub に PDF プレビュー機能が新たに追加された件が紹介されていました。

Siri が勝手に起動する怪奇現象を解決した件

Siri さんが何もしていないのに勝手に立ち上がって怖いと思っていた件は Siri のある機能が原因でしたというお話。

Google が言う「モバイルフレンドリー」とは？モバイルフレンドリーテストツールで色々試してみた

Google がモバイル検索の順位決定時に「モバイルフレンドリー」かどうかを重要なシグナルとして利用すると発表したことに関連して、そもそも Google は何を根拠に「モバイルフレンドリー」かどうかを判断しているのか、という点について調べてみました。

Firefox 39 のインスペクタが要素のドラッグ & ドロップに対応

現在、Firefox Nightly としてリリースされている、Firefox 39 のインスペクタで、要素をドラッグ & ドロップして移動することができるようになりました。

ブラウザから SVGO で SVG ファイルを最適化できる「SVGOMG」

SVG ファイルから不要なデータを取り除いたりして最適化してくれる SVGO をブラウザの画面から使えるようにした Web アプリケーション、「SVGOMG」の紹介。

初めて GitHub を使う人にオススメの入門書「Web 制作者のための GitHub の教科書」

Git バージョン管理システムのホスティングサービスとして最も有名、かつ利用者の多い GitHub の使い方を、ノンプログラマな人にもわかりやすく解説した書籍、「Web 制作者のための GitHub の教科書」をインプレス様よりご恵贈いただいたので紹介です。

TinyPNG が JPEG ファイルの最適化にも対応、TinyJPG もローンチ

PNG ファイルの最適化を行うオンラインツール「TinyPNG」が JPEG ファイルの最適化にも対応、TinyJPG も同時に立ち上がりました。また開発者向け API も JPEG ファイルに対応して、より使い勝手が向上しました。

直近の履歴や Cookie だけを削除する「忘却」ボタンが Firefox 正式版に追加

直近の閲覧履歴や保存された Cookie などをまとめてワンクリックで削除できる「Forget （忘却）」ボタンが、現在正式リリース版の Firefox 33 に対しても追加アップデート（33.1）を通して適用されました。

Firefox Aurora が「Firefox Developer Edition」へ、開発者向けにリニューアル

Mozilla から「Firefox Developer Edition」という新しいバージョンの Firefox がリリースされました。これは今までのデスクトップ向け Firefox Aurora に替わるもので開発者向けツールが強化されたバージョンです。

Google ウェブマスターツールに「モバイルユーザビリティ」レポートが追加

Google ウェブマスターツールに新たに「モバイルユーザビリティ」の項目が追加されました。自サイトのモバイルユーザビリティを向上させるヒントが表示されるようになっています。

bit.ly が Google セーフブラウジングで不正なサイトとしてブロックされてる件

さっき気がついたんですけども、短縮 URL サービス bitly が提供しているドメイン「bit.ly」が Google セーフブラウジングでブロックされてしまっているようで、短縮 URL を使用して投稿したツイートなどのリンクが Firefox や Chrome で開けなくなってました。

IFTTT が Twitter 関連のトリガーを新たに 4つ追加、検索やメンション、ツイートの位置情報など

IFTTT の Twitter チャンネルがアップデートし、新たに「Twitter 検索」、「特定ユーザーのツイート」、「メンション」、「特定エリア内のツイート」という 4つのトリガーが追加されました。

Web サイトのパフォーマンスレポートを自動で作成してくれる Google Pagespeed Insights for WordPress

PageSpeed Insights を使用した Web ページのパフォーマンスレポートを WordPress の管理画面上で見ることができるプラグイン、「Google Pagespeed Insights for WordPress」の紹介。

Firefox Nightly のインスペクタが ::before / ::after 疑似要素を表示するようになった

現在、Firefox Nightly としてリリースされている、Firefox 35 のインスペクタが変更され、::before / ::after 疑似要素を表示するようになりました。

閲覧中の Web ページに Thumb Zone Map （親指が届く範囲マップ）をオーバーレイ表示するブックマークレットを作った

Scott Hurff 氏による、「Thumb Zone Map」を閲覧中の Web ページにオーバーレイ表示するブックマークレットを簡単に作ってみました。

OneDrive の 1ファイルあたりサイズ制限が 2GB から 10GB に拡大

OneDrive は今まで、アップロード可能なファイルサイズについて、1ファイルあたり 2GB までという制限がありました。本日、この制限が 10GB まで拡大された旨、公式 Blog でアナウンスされています。

Twitpic がサービス終了とのことなのでアップロードした画像をすべて救出してみた

Twitter 社との商標問題を理由に Twitpic がサービスを終了すると急遽発表したことを受けて、Twitpic にアップロードしていた画像を Windows 用アプリ、「TwitPicDLer」で一括ダウンロードしてみたので紹介。

Twitter 「ダッシュボード」が全ユーザーに開放、ツイートの解析が可能に

これまでは認証アカウントや Twitter で広告を出しているアカウント向けにのみ正式に提供されていた「ダッシュボード」機能が、一般ユーザーにも開放されました。自分のツイートに関する様々なデータを解析することができます。

Dropbox Pro が大幅機能追加。ディスク容量もお値段そのまま 1TB まで拡大

Dropbox の有料プラン、Dropbox Pro に共有リンクの有効期限設定やパスワードロック機能などの機能追加が行われたほか、ディスク容量も 1TB （1,000GB）に増強されるとのこと。お値段は据え置きです。

iOS 版 Dropbox がアップデートして Word や PowerPoint ファイル内の検索に対応

iOS 版の Dropbox が 3.3 にバージョンアップ。Word や PowerPoint ファイル内の検索が可能になるなどいくつかの機能追加が行われています。

W3C Markup Validation Service が HTML5 picture 要素や srcset 属性に対応

Validator.nu および、W3C Markup Validation Service が、picture 要素と srcset / sizes 属性に対応したとのこと。実際にサンプルソースを用いて検証してみた結果と、その結果に対する簡単な解説をしてみます。

導入から応用まで、Sublime Text がよくわかる「Web 制作者のための Sublime Text の教科書」

Web 制作者の間で人気のエディタ、Sublime Text の基本から応用までをわかりやすく解説した書籍、「Web 制作者のための Sublime Text の教科書」をインプレス様よりご恵贈いただいたので紹介です。

Firefox 32 で開発ツールに「Web ページ全体のスクリーンショットを撮影」機能が追加

9月 2日に正式リリース予定の Firefox 32 では、開発ツールに Web ページ全体のスクリーンショットを撮影する機能が追加されました。開発ツールバーのボタンを押すだけで簡単にスクリーンショットが撮影可能です。レスポンシブモードにも対応。

Google Analytics に「ロボットのフィルタリング」機能が追加

Google Analytics に検索エンジンのクローラーやその他ボットからのアクセスをフィルタリングする機能を追加したよとアナウンスされましたので設定してみました。

Gmail のエイリアスは個人情報漏洩対策にならないからやめとけっていう話

Gmail のエイリアス（Google Apps 除く）は本来のメールアドレスがバレバレなのでスパム対策や情報漏洩対策にはなりませんよというお話です。

iPhone Safari などで Web ページのタイトルと URL をコピーするブックマークレットを作った

iPhone 版 Safari など、モバイルブラウザで閲覧中の Web ページのタイトルと URL をコピーするブックマークレットを作ったので紹介します。プレーン、HTML、Markdown の 3つの形式でコピーできます。

「寿司ゆき」プラグイン「SushiForTinyMCE」を WordPress にも対応させてみた

「LINE クリエイターズスタンプ」で人気のスタンプ、「寿司ゆき」イラストを WordPress のビジュアルエディタに追加できるプラグインを作ってみました。

「寿司ゆき」イラストを Movable Type のリッチエディタ（TinyMCE）で使えるプラグイン「SushiForTinyMCE」を作ってみた

「LINE クリエイターズスタンプ」で人気のスタンプ、「寿司ゆき」の画像素材を、作者のあわゆきさんが CC ライセンスで公開したとのことで、試しに Movable Type のリッチエディタに「寿司ゆき」イラスト挿入ボタンを追加できるプラグインを作ってみました。

夜中に公開した Blog 記事を時間差で Twitter などに投稿するなら IFTTT と Buffer の組み合わせがいいと思う

Blog は夜中に更新したい。でもソーシャルメディアにはみんな寝ている夜中じゃなくて昼間に投稿したい。そういう希望を自動で簡単にやってもらう方法として、IFTTT と Buffer を組み合わせたやり方を紹介します。

Dropbox の 2段階認証を Google Authenticator を使って設定する

2段階認証というと、SMS や音声通話でセキュリティコードを受け取るイメージがありますが、アプリでも可能で、さらに TOTP に対応したアプリであれば複数の Web サービスのセキュリティコードを 1つで管理できます。ここでは Dropbox の 2段階認証を Google Authenticator を使って設定する方法を紹介します。

Firefox 31 の開発ツールに便利なカラーピッカー機能が実装される

Firefox 31 の開発ツールに、閲覧中の Web ページから色情報を取得する新しいカラーピッカー機能「Eyedropper」が実装されました。1px 単位で選択できるため、細かいグラデーションなどの一部でもピックアップしやすくなっていて便利です。

Firefox 30 でインスペクタが各要素のボックスモデルをオーバーレイ表示するようになっていた件

Firefox 30 では、今までインスペクタの左隅に表示されてた各要素のボックスモデルについて、実際のページ上にレイヤー表示するようになりました。見やすくて便利です。

Twitter が 8周年、いろんな人の「初ツイート」を確認できるツールを公開

Twitter が誕生から 8周年を記念して、Twitter ユーザーの初ツイートを簡単に調べることができるツールを公開しています。ユーザー名を入れるだけで最初のツイートが表示され、専用ハッシュタグでシェアすることもできます。

Web デザイナーさん向け Grunt を使ったコーディング作業の効率化、はじめの一歩

フロントエンドの開発を色々と捗らせてくれる Grunt について、初めて Grunt を使うならこれだけまずはやってみたら？という入門的な解説記事を書いてみました。

Dropbox の障害について公式 Blog が説明、ユーザーデータには影響なし

1月 10日～ 1月 12日にかけて発生していた Dropbox の大規模障害について、ユーザーのデータには影響はなく、長時間にわたる障害の原因はメンテナンスに使用したスクリプトのバグによるデータベース障害と、その復旧に時間を要したこととの説明がされました。

Page Top

このブログの著者: 加藤善規 - 埼玉県出身男性。サッカー、フットサル（観戦 / プレー）、モータースポーツ観戦、格闘技（主にボクシング）観戦、インターネット、音楽鑑賞、筋トレ、腕時計収集が趣味。サッカー 4 級審判員、ウオッチコーディネーター（上級 CWC）資格認定者。好物はゼリー、グミ、お酒、ラーメン。

いいね！で最新情報を取得

このブログが気に入ったらいいね！してください。

Facebook で最新の記事をお届けします。

Information

Pa11y CI でアクセシビリティテストを自動化し日本語のレポートを HTML 形式で生成する

リアルタイム画像処理機能が充実した CDN、「imgix」 を試してみたらとても簡単で便利だった件

完全禁煙のカフェを現在地から簡単に調べるサイトを作った件

Windows 10 で画面の一部をドラッグ & ドロップしてスクリーンショットを撮る方法

Mastodon インスタンスの画像や動画の保存先をクラウドストレージ （Amazon S3） に移行した話

さくらの VPS + CentOS7 で 俺専用 Mastodon インスタンスを立ててみた話

過去 2年間のカーシェアリング利用料をまとめてみたので普通自動車の維持費と比べてみる

閲覧中の URL を AMP （Accelerated Mobile Pages） バリデータに投げるブックマークレット

まとめサイトなどを除外した Google 検索 「クリーンサーチ」 を作ってみた

Let's Encrypt （無料 SSL サーバ証明書） の設定が超簡単になったと聞いて試してみた件