公開日：2015年9月25日最終更新日：2016年5月6日 :　ソフト・アプリ・ツール Webページ全体を画像として保存することができるChromeの拡張機能の紹介です。パソコンで使用するスクリーンショットの機能では、ブラウザに表示されている部分しか画像にできません。 拡張機能を使用すれば、ブラウザで1度に表示できないWebページ全体を画像として保存することができます。Webページを資料として保存したい場合など、とても便利です。Web制作者としてはなくてはならない機能となっています。 Webページの画像保存に便利な拡張機能をおすすめ順で紹介していきます。 Blip-shot_機能追加ページへ いまの所、一番シンプルで優秀な拡張機能です。キャプチャの機能で１番大事なのは、見た目のまま余計な部分もなく画像化してくれることです。その点この機能は、動きのスクリプト部分も見た目のまま画像化してくれま

現在Chrome Canaryに実装されているChrome 38から、DevToolsにレスポンシブWebデザインで作ったサイトの表示が簡単に行えるツール（Device Mode？）が実装されるようです。 Chromeのプラグインやブックマークレットでも同じようなツールはあるのですが、よく使うChrome DevToolsに実装されるとさらに便利になりそうです。 正式版はまだChrome 35なので、まだ3リリース後（約18週間）の正式版での実装が待ち遠しいですね。 主な機能 主な機能は上のGIFアニメを見てもらえばだいたい網羅してますが、あえて書き出してみると以下になります。 画面サイズの変更（端末で指定・ドラッグで指定） 画面サイズの変更（ページ内のメディアクエリ値で指定） デバイスのエミュレーション（UAの変更） 回線スピードのエミュレーション 【重要】 Stylesのメディアクエリ

Home > ユーティリティ > レスポンシブデザインを確認するときにChrome Canaryの「Toggle device mode」が便利でした

HTMLとCSSでのデザイン実装に必須！ブラウザに画像を重ねて表示してくれるブラウザ拡張「PerfectPixel」！ 2016年1月8日投稿 カテゴリ：HTML/CSS 著者: jMatsuzaki 私の愛しいアップルパイへ WebサイトやWebサービスを作るときに時間がかかるのがデザインの実装ではないでしょうか。特に、デザイナーさんがデザインカンプを用意してくれている場合には、画面と画像を交互に見ながら実装しなければならないため、正確にHTMLとCSSを実装するのは骨の折れる作業です。 とはいえ、せっかくデザイナーさんが作ってくれたのであれば1px単位で正確に実装したいという気持ちもあるでしょう。そこで役立つのがWebブラウザ上に画面を透過表示してくれるChrome拡張機能「PerfectPixel」です。 ▼公式サイト ▼Chrome版ダウンロード https://chrome.go

Web 開発者の方であれば今開いている Web ページにどのような技術が利用されているのか気になる事がありますよね。ソースを表示したり Developer Tools を起動したりして調べるのも良いですがさくっと確認するだけであれば BuiltWith Technology Profiler という拡張機能を利用するのが便利です。 この拡張機能を入れるとメニューバー上にアイコンが表示されるので、調べたい Web ページを開いてアイコンをクリックするだけです。 例えばこのブログだと上記のような感じに表示されます。 かなーり縦に長いので文字で書きますが以下のような情報を取得しています。 Web サーバの種類, バージョン ネームサーバ ホスティングしているサーバ CMS の種類, バージョン 使用しているフレームワーク 広告の種類 ユーザ統計情報(Google Analytics 等) Jav

Webアプリのデバッグやチューニングに役立つ、Chrome Developer Toolsの主要機能を、スクリーンキャプチャ中心で簡潔に紹介。2014年10月に最新情報に改訂。 モダンブラウザーの中でGoogle Chromeは最後発ながら、その機能の潤沢さ、便利さ、高速さからシェアを大きく伸ばしている。そして、今やほとんどのブラウザーではWindowsの場合F12キーを押すことで（Macの場合はCommand＋Option＋Iキーで）手軽に各ブラウザー搭載のデベロッパーツールを利用できるが、特にChromeのデベロッパーツールは、非常に機能が豊富なため、利用している人もかなり多い。 本稿では筆者がよく使う機能や、使うと便利な機能を中心に、Chromeのデベロッパーツールについて紹介していく。なお、本書は執筆時点で、最新のChrome 38を使用している。 機能ふかん 残念ながら、Chro

Google謹製ブラウザChromeが（勝手に）バージョンアップされて右上の最小化のボタンの左隣にまたまた出現した「ユーザーアイコン（アバターメニューというらしい）」を消す方法です。 以前も記事にしているのですが、今回の方法は2015年7月中旬にアップデートされたChrome バージョン44以降でユーザーアイコンを消す方法となります。 バージョン47からは、この記事で紹介している起動オプション（–disable-new-avatar-menu）を使って非表示化する方法も使えなくなっています。。 それ以降のバージョンは完全非表示はできないようですが、一応パッと見で非表示にする小ワザは存在するので紹介します。 現行のChromeで非表示にしたい人は↓の記事のやり方でどうぞ。 関連記事：【最新版】Chromeの右上のユーザー名（ユーザーアイコン、切り替えボタン）を消す、非表示にする方法 ここから

なにはともあれ、インストール 今回ご紹介する「The Great Suspender」は、Google Chrome 専用の拡張機能。以下の Chrome ストアから無料でダウンロードできます。 サイトにアクセスしたら、右上の「Chrome に追加」ボタンを押して完了です。 インストールが完了すると、右上に人の顔のようなアイコンが追加されます。 実際に使ってみよう 使ってみようと言っても、基本的には自動的にスリープするので、あまり能動的なアクションは必要ありません。 一定時間使われなかったタブは、こんな感じでスリープします。クリックをすると再読み込みされるような仕組み。 右上のアイコンをクリックすると、「このタブを一時的にスリープさせない」「このタブ以外のすべてをスリープさせる」などの設定が可能です。 使いやすいように設定をしよう 右上のアイコンをクリックして「setting」を選択すると

黒背景でハイライト表示！デベロッパーツール用のテーマが拡張機能として利用可能！うぉぉ！こんな拡張機能があったなんて、もっと早く知りたかった！と思う人が続出しそう（？）ですが、Google Chromeのデベロッパーツールを物凄く見やすい配色に変更するテーマファイルのChrome拡張機能を試してみました！ 今回試してみた拡張機能は「DevTools Theme: Zero Dark Matrix - Chrome ウェブストア」という拡張機能。同様のデベロッパーツールのテーマを変更する拡張機能は他にもありますが、配色の違いなので好みで選択するのが良さそうです。 下記の画像が通常のデベロッパーツールを開いた画面。コードはハイライトされていますが、白背景だと見づらいです。 そこで「DevTools Theme: Zero Dark Matrix - Chrome ウェブストア」を利用すると以下の

Readable テーマファイルの適用方法 テーマファイルを適用するには、Chromeの試験運用機能を使用します。 ※試験運用機能はサポート対象外のため、ご利用の際には十分ご注意ください。 テーマファイルをダウンロードします。 Chromeのアドレスバーに「chrome://flags/#enable-devtools-experiments」と入力し、試験運用機能にある「デベロッパー ツールのテストを有効にする」を有効化します。 Chromeを再起動。 デベロッパーツールを起動し、設定の「Experiments」タブを選択し、「Allow custom UI themes」をチェック。 これでデベロッパー ツールにテーマファイルが適用されます。 「Experiments」タブの「Allow custom UI themes」をチェック ※テーマ適用済みなので既に背景がブラックです。通常は

ウェブページの広告を非表示にすることで表示速度をアップしようとAdblockなどの拡張機能をインストールしてみたものの、かえって動作が重くなってしまうということがあります。そこで、広告を非表示にできAdblockよりもはるかに軽いと評判の拡張機能「µBlock」を使ってみました。 gorhill/uBlock · GitHub https://github.com/gorhill/uBlock ◆µBlockについて 広告を非表示にしてくれるブラウザの拡張機能としては「Adblock」が圧倒的に有名ですが、最近、企業からお金をもらってホワイトリストに追加するという動きをAdblockが見せ始め、デフォルト設定で表示される広告が増え、さらに、「以前より動作が重くなった」という意見がちらほら聞こえ始めています。 GoogleやAmazonは広告を消す拡張機能「AdBlock Plus」にお金を

Chromeを使っていたら最小化のボタンの左隣にいきなり出現したこのボタン どうやらユーザー管理の新しいUIみたいなんですが、ユーザー名が表示されるので気になる、Chromeブラウザを最小化しようとおもって間違って押しちゃうなど、このボタン邪魔だよっていう声が多いみたいですね… バージョン44からは、この記事で紹介しているオプション（chrome://flags/）および起動オプション（–disable-new-avatar-menu）を使って非表示化する方法が使えなくなっています。。 それ以降のバージョンは完全非表示はできないようですが、一応パッと見で非表示にする小ワザは存在するので紹介します。 現行のChromeで非表示にしたい人は↓の記事のやり方でどうぞ。 関連記事：【最新版】Chromeの右上のユーザー名（ユーザーアイコン、切り替えボタン）を消す、非表示にする方法 以前までは無かっ