CSSの制作時や検証時に役立つGoogle Chromeの機能拡張を紹介します。 いくつか機能がかぶっているので、お好みのものをご利用ください。
Local and Remote PHP Debuging in NetBeans with Xdebug on Google Chrome (just like in Visual Studio) at Arturito.net 「HTML/CSS/PHP等のコーディングに、無料のNetBeansが快適過ぎる件」という記事でNetBeans(IDE)が少し話題になっていたようですが、NetBeansとXdebug+Chromeを使ったPHPのリモートデバッグの設定方法が紹介されています。 画面付き設定方法が紹介されています。 ・xdebugのインストール ・php.iniでxdebugの設定 ・ChromeのXdebugHelperをインストール&設定 ・NetBeansオプション設定 ・ブレークポイントを定義 ・Ctrl+F5でブラウザがハングし、エディタ上でステップ実行が可能になりま
jQueyを使う場合に覚えておくと便利なChrome拡張が2つほどありましたのでご紹介。 マニュアルを検索する際にクイックに目的のものにアクセスし、開発スピードを上げられます。 jQuery API Browser ツールバーにボタンを追加してマニュアルをインクリメンタル検索。サンプルコードまでをChrome上で出せます。 インストールするとボタンが表示されます。 インクリメンタル検索が可能。 クリックすればサンプルコードも表示されます。 これは便利。 jQuery API Search 標準の検索窓に「jq ajax」などをタイプすればjqueryのマニュアル検索に飛べます Chrome上でインクリメンタルな検索が可能。 結果はjQueryのサイトにて閲覧 とりあえずどちらかいれておいて損はなさそうです。 関連エントリ PHPのエラーなんかをブラウザで確認できるChrome拡張「php-
iPSim - Chrome Web Store ChromeをiPhoneシュミレーターにできる拡張「IPSim」 IPSimを使えばChromeをiPhoneシミュレーターにすることが出来ます。 インストールすると次のようにボタンが追加されます クリックするとシュミレーターが現れます。 縦・横方向での表示が可能。 以下、横表示の例 Chrome自体がWebKitベースなので実機でもそれほと差異がない点にも注目。 ChromeでサクッとiPhone対応したい場合に入れておくとよさそうですね。 関連エントリ PHPのエラーなんかをブラウザで確認できるChrome拡張「php-console」 JavaScriptエラー時にエラーを分かりやすく通知してくれるChrome拡張「JavaScript Errors Notifier」 PHPフロントエンドのコンソールロギング用Chrome拡張「C
2011/3/22に、GoogleがようやくGoogle Chrome版「Page Speed」拡張機能を公開しました。 「Page Speed」は、項目をある程度理解できれば自分や自社のサイトの表示速度の改善にとても役立つツールです。 この記事では、「Page Speed」のインストール方法から各調査項目の見方や改善方法を中心に使い方を解説します。 ぜひ、ご自身のサイトの改善に役立てていただければと思います。 そもそも、なぜサイトの表示速度を速くする必要があるのか? 例えば、Amazonの調査によると「表示速度が0.1秒遅くなると、売上が1%減少する」といい、Googleの調査によると「表示速度が0.5秒遅くなると、検索数が20%減少する」と言われます。 また、GoogleはWebページの読み込み速度をアルゴリズムに取り入れたことを発表しています。 大手サイトや大規模なECサイトに限らず
php-console - Google Chrome extension for displaying PHP errors/exceptions/debug messages in browser console or notification popups - Google Project Hosting PHPのエラーなんかをブラウザで確認できるChrome拡張「php-console」。 Chromeの拡張とPHPのソースコードで動かすもので、PHPのエラーを、Chromeのコンソールウィンドウや、画面内にポップアップでポコポコ出せたりします。 要はChrome用のFirePHPみたいなものです。 以下のようにエラーレベルとエラーメッセージが表示されます。 コンソールの例 ポップアップの例 この機能が使えるかどうか?はアドレスバーで確認できます。使える場合はアイコンが次のように表
Google Chromeのショートカットまとめです。ショートカットはたくさんありますが、中でも、ウェブブラウジングを快適にするものをピックアップしました。 それでは以下にショートカットをまとめます。 Alt+F または Alt+E ツールメニューの開閉。 Ctrl+Shift+B ブックマークバーの表示・非表示。 Ctrl+D 現在開いてるページをブックマークに追加。 Ctrl+Shift+D 開いているタブすべてをブックマークに追加。 Ctrl+J ダウンロード履歴を表示。 Shift+Esc Chromeタスクマネージャの起動。 Ctrl+Shift+J Chromeデベロッパツールの起動。 Ctrl+L URLバーにカーソル移動。 Ctrl+Backspace テキストボックス内の文字列を一定間隔まとめて削除。 Ctrl+G ページ内検索。Ctrl+Gを押し続けることでヒットしたワ
オフラインでじっくり読みたい時などに便利な、ウェブページをPDFや画像ファイルに簡単に変換するFirefoxとChromeの機能拡張「iWeb2x」を紹介します。 日本語でも文字化けすることなく変換されます。 FirefoxでiWeb2xを使用したキャプチャ [ad#ad-2] iWeb2xのダウンロード・インストール Firefox, Chromeのダウンロード先はそれぞれ異なります。 Firefox版 iWeb2x - Printer Friendly Web 0.3 Chrome版 iWeb2x 上記ページにて、「Add on Firefox」「Install」ボタンをクリックして、インストールをしてください。 iWeb2xの使用方法 下記は、Firefox版を例にしたものです。 インストールが完了すると、ブラウザの枠の下にiWeb2xのボタンが表示されるので、それをクリックすると、
以前にも似たようなChromeエクステンション をご紹介しましたが、より使いやすい拡張 がありましたのでシェア。検索したいサイト や使いたい検索エンジンを自分好みに決め られ、追加できるエクステンションです。 基本的に検索可能なサイトならなんでも追加 出来ます。 以前ご紹介したUniversal Searchと機能はまったく同じですが、使い勝手は今日ご紹介するSearch Centerのほうが上でした。というわけで乗り換え。 Universal Searchよりもワンステップ少ないプロセスで検索出来る、という感じ。サジェスチョンも出てくれます。 ショートカットでらくらく検索 Ctrl+Qのショートカットキーも使えます。キーワードをドラッグしてショートカットキーを使えば上画像のように検索ボックスがドロップダウンします。 グループ化も出来る 検索対象のサイトをグループ化出来るので多くなってもゴ
10 Best Chrome Web Apps For Web Designers WEBデザイナー向けのChromeアプリケーション10。 先日オープンしたChrome Web Storeに登録されている便利なアプリケーションの特集のご紹介。 まだ公開して間もないというのに便利そうなツールが多数公開されています。 Ajax Animation HTML5ベースのアニメーションをFlashみたいにタイムラインをベースに編集できるツール レイヤーなんかも使えるみたいです。 Image MarkUp by Aviary 画像のリサイズ、回転、クロップ等の基本的な操作や文字を入れたりすることも出来ます。 ブロガーの方は便利に使えるかもしれません。 Picnik Photo Editor 写真編集ツールのPicnikをChromeから使えるアプリ Color Editor アプリ上で次のような画面
印刷する メールで送る テキスト HTML 電子書籍 PDF ダウンロード テキスト 電子書籍 PDF クリップした記事をMyページから読むことができます 【ラウンドアップ】 長い間使い続け、すっかり手に馴染んだつもりのマシンとOSでも、ちょっとしたワザを新しく覚えたり、今まで知らなかったフリーソフトを入れてみたりするだけで、大幅に作業効率が上がることがある。今回、これまで「IT業界を生き抜く秘密10箇条」に掲載された記事の中から、特に即効性の高い「裏技」「フリーソフト」の紹介記事をプラットフォーム別に集めてみた。まだ試していないものがあったら、ぜひトライしてみてほしい。この記事では、近年人気のウェブブラウザである「Firefox」と「Chrome」に関するものを紹介する。
Google純正ブラウザ、Google Chromeは2008年の9月に登場して以来順調にシェアを伸ばしているようです。 米NetApplications社の最新の調査によれば、2010年11月のChromeの市場シェアは9.26%だったそうです。 僕のブログで言えば、11月のChromeのシェアは19.44%でした。 一般ユーザーの間ではまだまだInternet Explorerが優勢なようですが、ITリテラシーの高いユーザーの間では着実に浸透しているようです。 僕も例外ではなく、メインのブラウザはすっかりGoogle Chromeです。 軽さと安定性、インターフェイスのシンプルさが魅力です。 以前のメインブラウザだったFirefoxには豊富な拡張機能(アドオン)が揃っていました。 ですが時間がたってChormeにも便利な拡張機能(エクステンション)が出始めたのが切り替えに至った大きな理
Firefoxユーザーの時に使用していた CSSViewerを今更Chromeに入れて みました。やはり便利ですね、これ。 シンプルなので高機能を求めない方 にお勧めです。サクッと使えるのが いいですね。 ブックマークレットににたようなのあった気がするんですけど、これはこれで便利なのでお勧めです。 インストールするとアイコンが出るのでクリック後に見たい要素にマウス持っていけば、そこに指定されたcss見れます。 こんな感じ。テキスト、カラーなどで分けてくれているのも地味に良いですね。 Web制作の方に良さそうですよ。動作も軽いし、Firebug使うほどでもない、的な時にサクッと使えて便利です。 CSSViewer
有名な拡張が多いですが、僕の簡単な使い方を含めて紹介します。 Lightshot スクリーンショット系の拡張は数あれど、僕は一番こいつがお気に入りです。こいつなしじゃブログを書く気が起きないくらい依存してます。 こいつのスゴイところは、フラッシュだろうがウィンドウの外だろうがなんでも撮れる安定感が素晴らしいのです。 スクリーンショットが取りたい場所で、羽のボタンをクリックします。すると画面全体が暗くなるので、コピーしたい場所をドラッグで範囲選択をします。 すると選択範囲の右下にメニューアイコンが複数表示されます。 選択範囲を編集 Lightshot専用の画像サービスにアップロードされます。(使ったことない) 選択範囲を画面全体に引き伸ばします。 クリップボードにコピーします。 ファイルにPNG形式で保存します。 キャンセル 実にシンプルです。とくにPNG形式で問答無用で保存してくれるのがエ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く