知らなくてもいいけど、知っているとちょっと便利な拡張機能 Chromeは拡張機能を利用することで、色々と便利に使うことができるようになります。今回はなくても困らないけど、あったら少し便利になる拡張機能をあつめて見ました。 特に「Amazonの商品の値動きを確認することができる拡張機能」は便利なので、是非使ってみてください。 1. サイトのSEO状況を簡単に確認することができる拡張機能サイト内のタグの利用状況などを簡単に確認することができます。かなり本格的なツールです。
カップル専用アプリPairyでおなじみ株式会社TIMERSのCTOの椎名アマドです。 先日うちの社員と話してて自分が普段使ってるChrome拡張機能をしれっと紹介したら、 「生産性が上がる」とだいぶ好評価でした。 なので今回は、モバイルアプリやスマートフォンWeb開発などに役立ってる、Chromeの拡張機能を紹介します。 使う使わないでかなり生産性が変わってくるものもあるので、是非活用してみてください。 API開発に最適 JSONView オススメ度:★★★★★ JSONで来たレスポンスを、綺麗に最適化して表示してくれます。 わかりやすく色分けハイライトされてたり、配列を畳むことが出来たりと、 APIを絡めた開発では必需品です。 Postman - REST Client オススメ度:★★★★★ REST リクエストをその場で作成して送信できるクライアントツールです。 GET/POST/D
はじめに こんにちは。KMC2回生のtyageです。 京都もほんとに寒くなってきて鍋が捗りますね。簡単だし美味しいあったまるし、最高ですね。 この記事はKMCアドベントカレンダー2013の17日目の記事で、 昨日は1回生のnona65537君によるSSH の二段階認証についてでした。 今日はGoogle ChromeというSSHクライアントの紹介なのですが、12日間続いたKMCアドベントカレンダーのサブプロジェクトであるSSHアドベントカレンダーもこれで最後になります。 最後がこれでいいのか?とも思うのですが、今までの内容がハードだったという方に向けて優しい内容となっておりますので、安心して御覧ください。 定番SSHクライアント「Google Chrome」 Google Chrome(もしくはChromium)と聞いて「あっ、SSHクライアントのことか!」と思われた方には少し物足りないか
グーグルがChrome DevToolsの学習ビデオを公開。DOM操作からプロファイリング、メモリリークの発見まで詳しく学べる 学習内容は全部で以下の7つのレベルに分かれており、17本のビデオと、レベルごとに用意された、実際に自分で操作して解いてみる75以上の例題から構成されています。レベルをクリアするとバッジがもらえるようになっています。 Level 1: Getting Started & Basic DOM and Styles Level 2: Advanced DOM and Styles Level 3: Working With the Console Level 4: Debugging JavaScript Level 5: Improving Network Performance Level 6: Improving Performance Level 7: Memo
tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ
Chrome ウェブストア - BuiltWith Technology Profiler サイトに使われている技術が丸裸になるChrome拡張「BuiltWith」。 サーバに何を使っているとか、PHPを使っているかとか、jQueryとかのライブラリや、Analyticsが入っているかといった情報を一括で表示してくれるChrome拡張。 サイト上でボタンを押すだけで解析することが出来ます。なんだか恥ずかしいですがこういうツールで調べられちゃうので気をつけましょう ヘッダやソースを見れば当然ながら調べられる情報なんですがボタン一発で調べられるっていうのは便利ですね 関連エントリ Vimの分かりやすいチートシートを見れるChrome拡張「Vim Help」 PHPのエラーなんかをブラウザで確認できるChrome拡張「php-console」 ChromeをiPhoneシミュレーターにできる拡
Chrome ウェブストア - Pendule WEB開発者はインストール必須のChrome拡張「Pendule」。 昔からあるChrome拡張ですが知らない間に色々と便利になっているようだったのでご紹介。 4月からはたいている新入社員のWEBデベロッパーさんにもオススメ インストールすると以下のようなボタンが表示されますのでクリック。 まず、StyleSheetのタブではCSSを見れる、CSSがその場でリロードできたり、CSSをを無効にできます サイトで使われているカラーを16進数で出してくれる機能もあります CSSビュー。折畳み可能で使いやすく見やすい Formsタブ。パスワードを表示したり、hiddenなフィールドのアイテムを表示したりできちゃいます。恥ずかしい! Imagesのタブでは全部の画像を非表示にしたり、背景画像を非表示にしたり、altを全部表示したりといったことが可能 そ
モバイルデバイス用のWebサイトやWebアプリケーション開発で大変なものの1つが動作確認です。何台ものデバイスを机の上に並べて、ひとつひとつ確認しなければなりません。 アドビシステムズのAdobe Labsが公開した「Adobe Shadow」は、そうした苦労をしているデベロッパー、デザイナーにとって手放せないツールになるでしょう。 複数デバイスに対する同時表示とリモートインスペクション Shadowがどんなツールなのか解説用ビデオの説明を紹介しましょう。 iPhoneアプリのShadowを起動すると番号が表示されます。 その番号を、MacOSかWindows用Chromeブラウザのエクステンションとして配布されているShadowに入力します。これで、ChromeブラウザとiPhoneがペアになりました。 同じように、Android用ShadowもChromeブラウザとペアにすることができ
いろいろとGoogle Chrome拡張機能を試していたら、入れすぎたらしく、壊れてすべてリセットされるアクシデントに見舞われましたw おまけにChrome テーマまで綺麗にデフォルトへ戻してくれるとは、、、ともかく入れすぎは注意なので、厳選したものだけをご紹介します。 → 新着のおすすめChrome拡張機能はこちらです。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! 厳選Google Chrome 拡張機能 まとめ 【永久保存版】 今回のコンセプトは、 複数機能をひとつにまとめられるものを優先 ボタンはなるべく少なく済ませる といったものです。大事なことなので繰り返し言いますが、何せ入れすぎると壊れるから。。。 また、あまりにも不安定すぎて、使いものにならないと判断したものも、ここではご紹介し
Chromeには、一般公開されている通常版とは別に、「バージョン2.0」と呼ばれるベータ版が存在する。新しい機能が盛り込まれている次期バージョンを開発者向けに公開しているものだが、このバージョン2.0の特徴が、「Greasemonkey」に対応していることだ。最新の機能に触れたい人は早速導入してみよう。 Greasemonkeyはウェブページの表示をブラウザ側で改造できるスクリプトで、Firefoxで採用され広く人気を集めている。インストールするとブラウザが重くなるのが難点だが、もともと軽量なChromeなら、Firefoxよりずっと快適に利用できる。バージョン2.0は一般ユーザー向けのページには用意されておらず、開発者向けのサイトでしか入手できない。 ■ Chromeの最新ベータ版をゲットする Google Chromeバージョン2.0 作者:Google Chromeを起動し「Chro
Chromeは将来的にはアドオンの導入を予定しているが、現状ではあまりカスタマイズの余地がないブラウザだ。だが、「Greasemonkey」を使えば、ウェブページの大幅な改造が可能になるぞ。バージョン2.0の導入を終えたら早速インストールしてみよう。 例えば「oAutoPagerize」を導入すると、複数にまたがったページの場合「次へ」や「2ページ目へのリンク」をクリックしなくても、画面をスクロールするだけで次のページが現在のページの下に続けて表示されるようになる。また、「Google+SBM」を導入すると、Google検索の結果に、ソーシャルブックマークに登録された件数を表示してくれるようになるので、検索したページが人気があって有用かどうかが一瞬で判断できるようになるのだ。設定方法はスクリプトをCドライブのフォルダに入れておくだけ。ChromeはFirefoxと比べるとかなり軽快にスクリ
■クリックボードにURLを記入しているとき、アドレスバーの上で右クリックすると、「貼り付けて移動」することが可能(つまりエンターキーを押さなくて済むわけですね)。 ■テキストエリアのコーナーをクリック&ドロップすることで、入力エリアをリサイズ。ブログコメントやWebメール、フォーラムなどに記入する際には、恐ろしく便利な機能です。 ■Ctrl + マウスホイールでズームイン&アウト。 ■アドレスバーのURLをドラッグ&ドロップすることで、デスクトップにURLを保存。エクスプローラウィンドウにも同じことができます(タブをドラッグ&ドロップすることで、ウィンドウを切り離したり、融合させたりできるのはすでにご存知ですよね?)。 『Google Chrome』のショートカット一覧 マウス操作を好まない方のために、『Google Chrome』にはさまざまなショートカットが搭載されています。しかも、ほ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く