Webコーディングするのに欠かせないブラウザChrome。デフォルトのブラウザもChromeです。
Chromeの最もいいところはデベロッパーツールの使いやすさです。

FireFoxのFirebugよりも動作が軽く、リアルタイムでCSSのプレビューができてありがたいです。

今回の記事ではChromeでブラウザのキャッシュを無効にする設定方法をご紹介いたします。

まずはデベロッパーツールを開きます。右上に歯車のマークがあるのでクリック。

【Disable cache〜】という項目にチェックを入れます。デベロッパーツールが開いている間はブラウザキャッシュは無効化されます。

特にアドオンを入れなくても標準のデベロッパーツールで十分に役割を果たしてくれます。

素晴らしいブラウザですね！更に動作が軽くなってくれれば言うことなしです！

「プロになるためのWeb技術入門」

WindowsやMacで手軽にスマホサイトのレイアウトを確認する方法をご紹介いたします。
iPhoneやiPadのレイアウトの確認にはiOSの実機を使うか、MacにＸcodeをインストールし、iOSシュミレーターで確認しなければなりませんでした。
しかし、フリーの高性能ブラウザChromeならiOSだけでなくAndroidやKindleもレイアウトを表示確認することができます。
Chromeを起動したら、右クリック→「要素を検証」を選択。

虫眼鏡の右側のスマホのアイコンをクリック。

画面左上に縮小されたブラウザが表示されます。この段階ではまだスマホのレイアウトが反映されません。リロードします。

スマホサイトに切り替わりました。レスポンシブデザインに対応していない場合は、ブラウザの枠だけ縮小された状態になります。

iPhone6プラスや第四世代iPad、Kindle Fire、Nexus7など検証できるデバイスはとても充実してます。

スマホが違えばブラウザの横幅も異なります。どんなブラウザにも対応できるようにマルチブラウザ化させる必要がありますね。

レスポンシブWebデザイン マルチデバイス時代

ChromeやSafariでブラウジングしていると『Java（TM）のインストールがかんりょうしたら、ページを再読み込みして有効にします。』というメッセージが表示されます。
こんな時、サイトが要求するコンテンツを見たり操作する事ができないので、Javaの最新版をインストールする必要があります。
黄色いところをクリックすると、Javaのインストールページにジャンプします。

https://java.com/en/download/mac_download.jsp

このページにジャンプしたら、OSを確認してリンクをクリックします。

ソフトのイメージファイルがダウンロードされます。

ファイルをダブルクリックしてインストールします。

インストールは数秒で完了します。

JavaもFlashのように度々、更新を促す表示がされますのでその都度更新するのは面倒ですね。

アップル iPad mini Retinaディスプレイ Wi-Fiモデル

ChromeでJavaScriptを無効にする方法をご紹介いたします。ChromeにはJavaScriptを無効にするプラグインもありますが、IEやFirefoxと同様、設定画面からでも無効にすることができます。

ブラウザの右上の設定アイコンをクリックします。下から3番目の【設定】というテキストをクリック。

【コンテンツの設定】というボタンをクリックします。

【Javascript】に「すべてのサイトに対してJavascriptの実行を許可しない」にチェックを入れます。

これでChromeで開いたページのJavaScriptを無効にすることができます。見つけにくい所に設定ボタンがあるので、ちょっと分かりにくいですね。

仕事がはかどるJavaScript活用術

サイトをデザインする時に必要なのがCSS。思い描いたイメージに近いボックスやシャドー、アニメーションを手軽に作成できる便利なChromeの拡張機能をご紹介いたします。

CSS3 Generator

インストールするとブラウザに【3】というマークが表示されます。

枠の中のスライダーを左右に動かすだけでテキストシャドーを調節できます。

カラーはマウスポインタをドラッグすれば指定できます。

【＋ボタン】で影を追加することもできます。

作成した後はソースをコピーして貼り付ければOK！

ボックスシャドーも作れます。

左右非対称、角丸なボックスも作れます。

吹き出し風ボックスも！

ヌルヌル動くアニメーションも作れます！

完成イメージをプレビューしながら調節できるのでとても便利な拡張機能だと思います。大いに役に立ちそうです！

スラスラわかるHTML&CSSのきほん

Chromeウェブストアから『XPath Helper』のキーワードで検索。

WindowsとMac両方共ショートカットキーは【Control ＋ Shift ＋ X】です。ウィンドウ上部に黒い枠が表示されます。

キーボードのShiftを押しながらマウスを取得したい項目の上に移動させると、左側の枠にxpath右側に取得した値が表示されます。

複数の要素にマッチする値も取得できて便利。

このアドオンを活用すれば、xpath取得にかかる時間がとても短縮されます。オススメの拡張機能です！

XML Hacks ―エキスパートのためのデータ処理テクニック

SEO、ユーザービリティの向上に欠かせないのがページの読み込み速度の高速化です。ページ高速化はページを構成しているHTML,CSS,Javascriptや画像ファイル諸々の無駄を省き実現できます。

ページの読み込み速度の改善はしたほうが良いですが、絶対に必須！！というわけではなく、且つ面倒な作業なのであまり手をつけないと思います。
Chromeのアドオンにページの読み込み速度の改善案を表示してくれるものがあったので入れてみました。
PageSpeed Insights (by Google)

PageSpeed Insights (by Google)をインストールします。

インストールした後、右クリックで【要素の検証】を選択。タブの項目に【PageSpeed】が追加されます。

【分析】ボタンをクリックします。

ページ速度改善案がズラリと表示されます。

速度の改善方法を参考にソースを削除したり、キャッシュや圧縮をしたりと色々と大変ですが、時間があるときに作業を進めて行きたいですね。

これからはじめる SEO内部対策の教科書

メインのブラウザはChromeを使用しています。現在開いているページをSafariもしくはFirefoxで開きたい時、URLをコピーして別ブラウザのアドレスバーにペーストし、ページを開きます。

地味にその作業は面倒ですね。

マウスクリックでカンタンにページの受け渡しができる便利ソフトをご紹介いたします。

SwitchというMacのフリーソフトです。

まずはhttps://easilymistaken.com/switch/からソフトをダウンロード。

Zipファイルを開くと、Switch.appが表示されるので、アプリフォルダに移動しておきます。このアプリを起動させると。。

メニューバーに右矢印が表示されます。

ChromeではYahooを開いてます。その状態でこのアイコンを右クリックします。
Macにインストールされているブラウザが表示されるので、【Transfer to Safari】をクリック。

Chrome→SafariにURLを受け渡し、ページを開くことができました。

【Preferences】でデフォルトで開くブラウザをSafariに設定すれば、右クリックしなくても、アイコンをクリックするだけで、URLの受け渡しができます。

ブラウザのチェックなどに、とても役立つソフトです！

APPLE MacBook Pro with Retina Display

MacでChromeのリモートデスクトップを使ってみたら、画面が真っ暗になる現象が起こる場合があります。

キーボードやマウスを操作しても何も応答しません。

真っ暗（真っ黒）になる原因はMacが画面の共有（リモート操作）を許可していないからだそうです。
解消方法は、【システム環境設定】から【共有】をクリック。

左側のメニューからリモートで操作したいものにチェックを入れます。【リモートマネジメント】をクリックします。

「ほかのユーザが画面操作の権限を要求することを許可」にチェックを入れます。

もう一度、Chromeのリモートデスクトップを操作してみると、先程は真っ黒だった画面が正常に表示されるようになります。

Macのリモートデスクトップでこのような現象がでましたら、お試し下さい。
関連記事
無料で使える！MacとWindowsのリモートデスクトップソフト

APPLE MacBook Pro with Retina Display

Chromeの拡張機能【Chrome リモート デスクトップ】です。
こちらのリンクから拡張機能をインストールできます。
https://chrome.google.com/webstore/detail/chrome-remote-desktop/gbchcmhmhahfdphkhkmpfmihenigjmpp?hl=ja

このソフトは、リモートコントロールする側とコントロールされる側の両方にインストールする必要があります。

また、設定は最初の一回だけで、設定が済んだらピンコードを入力するだけでリモートコントロールができるとても便利でカンタンなソフトです。

Chromeの拡張機能をインストールしたら、【続行】をクリック。

アカウントを選択します。アカウントはGmailで使用しているアカウントです。

【承認する】をクリック

承認作業が完了したら、Chrome リモートコントデスクトップを起動させます。Chromeのブラウザの左上に【Apps】というアイコンがあるのでクリック。

【Chrome リモート デスクトップ】のアイコンがあるのでクリック。

【マイ パソコン】の【利用を開始】をクリック。

【リモート接続を有効にする】をクリック。

【OK】をクリック

Mac/Windowsのソフトがダウンロードされるのでインストールを完了させます。

PINコードを入力します。適当な数字の羅列でOKです。

Macの場合、システム環境設定からPINコードを設定します。鍵のアイコンをクリックして、管理者のパスワードを入力。先ほどChromeで入力した数字と同じものを入力。

ChromeとMacのリモート接続の設定が完了しました。

MacBook Air：操作する側
Mac：操作される側
でリモートコントロールしてみます。
リモートコントロールするPCをクリックします。

PINコードを入力して【接続】をクリック。

画面の縦横比がズレてますが問題なくリモートコントロールすることが出来ました。
下の画像はリモートコントロールする側のキャプチャです。

容量の少ないPCは自宅に有るPCのファイルを遠隔操作で必要なファイルだけ転送できればディスクの圧迫を予防することが出来ます。
もし、リモートの画面が真っ暗になってしまったら、コチラの方法をお試し下さい。
MacでChromeリモートを使うと画面が真っ暗になる現象を解消！

APPLE MacBook Pro with Retina Display