1クリックで、IE, Edgeをはじめ、さまざまなブラウザ・スマホなどの表示確認ができるChromeの便利な機能拡張
指定したページが一般的なブラウザやデバイスでどのように表示されるか、1クリックで確認できるChromeの機能拡張を紹介します。 WindowsからSafari, iOSの確認、macOSからIE, Edge, Androidの確認もできます。 Multi-browser Screenshots Multi-browser Screenshotsで対応しているブラウザ・デバイスは、下記の通り。 ※2018年5月現在 それぞれ、WindowsからでもmacOSからでも利用できます。 Edge 15.0(Windows 10) IE 11.0(Windows 10) Chrome 50.0(Windows 10) Firefox 45.0(Windows 10) Safari 9.1(OS X El Capitan) IE 10.0(Windows 7) IE 9.0(Windows 7) IE
デザイナーが入れておきたい、クリエイティブな Chrome拡張機能15個まとめ
グラフィックデザインの世界は進化を続けており、今ではすべてオンライン上で作品を作成、公開まで行うことができるツールも数多く登場しています。デザイン制作をより快適にしてくれる、インストールしておきたい Chrome 拡張機能をまとめています。 デザイン過程をよりスムーズにする、時間短縮系アイテムを中心にセレクトしています。自分だけのカスタマイズで、より使いやすくさぎょうの捗る環境を手に入れてみてはいかがでしょう。 詳細は以下から。 01. Responsive Web Design Tester Responsive Web Design Testerを一度インストールしてしまえば、Webサイトのレイアウトを画面サイズや、解像度別に確認することができます。モバイルが普及したいま、レスポンシブ必須ツールのひとつと言えるでしょう。 ウェブデザイン: Benjamin Guedj – French
WEBサイトにプッシュ通知が付けられるWEBサービス「bpush」を試してみる
最近またブログのデザインを少しずつ弄っています。ブログトップやカテゴリページ、投稿者ページにカバー写真を設置してみました。まだカスタマイズ途中なので画像が無かったり不具合が残っていたりするのですが、少しは見栄えが良くなったかな？ それとは別に、新たにブログのプッシュ通知機能を試験的に導入してみました。今回は、このプッシュ通知機能の実装方法をご紹介したいと思います。 プッシュ通知とは プッシュ通知はRSSよりも手軽に登録できて素早くブログにアクセスできる機能です。スマートフォンを利用していれば必ず目にする通知機能ですが、PCではまだあまり馴染みのないものかもしれません。 Google Chromeのバージョン42がリリースされてから新たにプッシュ通知に対応し、設定をすればSNSのお知らせや新着メールを通知してくれるようになりました。この機能はPC版とAndroid版のみ対応でiOS版では非対
Web担当者なら入れておくべき、GoogleChromeのSEOや効率化関連の拡張機能19選
Web担当者の方であれば、お使いのブラウザに拡張機能の一つや二つは入れられてるのではないでしょうか。GoogleChromeやFirefoxなどのブラウザには、Web担当者様にとって便利なツールが多く揃っています。 特にSEOに関連する拡張機能は大変豊富で、自社ホームページのSEO周りの改善や競合の状況のチェックなど、面倒になりがちな作業の効率が劇的にアップします。 今回は、Internet Explorerに次いで使用率が高いGoogleChromeの便利な拡張機能を、自社ホームページ改善用、競合調査用に分けて22個紹介します。 自社ホームページの改善に役立つChrome拡張機能 1.Google Analytics オプトアウト アドオン ダウンロードURL：http://goo.gl/mqoHY 自社ホームページにGoogleアナリティクスを導入している場合、自分のアクセスまでカウン
文字の上にカーソルを置くだけでフォント名やサイズを特定、試し打ち＆ダウンロードも可能な「Fontface Ninja」
ウェブサイト上で「このフォントいいなあ」と思った時にカーソルをかざすだけでフォントの種類やサイズを知ることができ、さらにその場でフォントの文字を試し打ち＆サイズの変更などが可能で、わざわざフォントのダウンロードページを開かなくても閲覧していたウェブサイト上からフォントのファイルをダウンロードまでできてしまうというGoogle Chrome拡張機能＆Safariプラグインが「Fontface Ninja」です。 Fontface Ninja http://fontface.ninja/ Fontface NinjaはGoogle Chrome拡張機能とSafariプラグインがあり、ブックマークレットは現在開発中のようです。今回はGoogle Chrome拡張機能を使用してみます。 Google ChromeでChrome ウェブストアのFontface Ninjaのページを開きます。 右上に
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
「AmaQuick」Amazonの商品ページからAmazonアソシエイトのアフィリエイトタグを簡単コピペするGoogle Chrome機能拡張 - ネタフル
Amazonアソシエイトで商品をブログに紹介している人でGoogle Chromeユーザであれば必携の機能拡張がリリースされました。Amazonの商品ページから、アフィリエイトタグを超簡単にコピペしやすくするGoogle Chrome機能拡張「AmaQuick」です！ かつて、ネタフルでは「Amazon Quick Affiliate」というスクリプトを紹介したことがありました。「Amazon Quick Affiliate」Amazonアソシエイトの神ツール！という記事です。2009年なので、もう5年前になるのですね。 Amazonから商品画像を持ってきたり、商品リンクを作成するのが簡単だったのでずっと愛用してきたのですが、最近になってAmazon側の仕様が変わり、動作しなくなっているカテゴリがありました。そのことを開発者の @yager に相談したところ、Google Chrome機能
Google Chrome 32でスマホのエミュレーションを行う
Google Chrome 32でスマホのエミュレーションを行う Google Chrome 32になってスマホなどのエミュレーションを行う方法がわからなくなっていたのですが、教えてもらったのでメモっときます。 追記：最新バージョンでの利用方法は以下のエントリーに記述しました。 Google Chrome 37でスマホのエミュレーションを行う Macなら⌘ + option + i、WindowsならF12でデベロッパーツールを表示。 右上の アイコンをクリックして設定画面を表示。Overridesにある「Show 'Emulation' view in console drawer」にチェックを入れて設定画面を閉じます。(2014/1/31追記) 上部のタブで「Elements」を選択。 右上のアイコンをクリックすると画面下部にウィンドウが表示されます。 右側の「Emulation」タブ
ブロガー必須！のChromeエクステンション「Chrome Keyconfig」の設定方法
ブログを書くなら余計な手間は省きたい。 それはこの世に生きとし生けるもの、万物全ての祈り・・・。そんな気がする。 と、言うわけで今日は劇的にブログ作成を楽にしてくれるChromeエクステンションのご紹介。 ショートカットキーでブックマークレットを呼び出すというエクステンションで、Make LinkジェネレーターはFirefoxのMake Linkのように自分用にカスタマイズしたHTMLタグを吐くブックマークレットをつくってくれるツールです。これを組み合わせることで超高速にHTMLタグを作成できます。 例えば「Shift」+「L」でリンクタグを作成出来たり、「Shift」+「Q」で選択した文章で引用タグを作成出来るのです。9つの中で一番おすすめ! 以前、上の記事を読み、一番最初に紹介されているChromeエクステンション「Chrome Keyconfig」を導入しようとしたのですが、なるほど
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
Chrome DevToolsを使いこなすための参考サイトまとめ | 1 pixel｜サイバーエージェント公式クリエイターズブログ
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 フロントエンドエンジニアの谷です。 本記事ではGoogle Chromeの開発者ツール、Chrome DevToolsを使いこなすために参考になるサイト、ページの紹介をします。 すでに多くのフロントエンドエンジニアが開発で使っているかもしれませんが、「要素のインスペクタなどの基本的な機能しか使っていない」「UA切り替えくらいしかつかってない」というような方や、そもそもほとんど使ったことがない、という方もこれらを参考にフロントエンド開発を効率化していきましょう！ 基本的な使い方 Chrome DevTools Overview 基本はやはり公式ドキュメ
Web屋ならチェックしておきたい！作業効率が激変するChrome DevToolsの便利な使い方まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Web屋ならチェックしておきたい！作業効率が激変するChrome DevToolsの便利な使い方まとめ こんにちは、デザイナーの王です。 今回の記事では、ChromeのDevTools（デベロッパーツール）について、「多分、周知されていないけど、使わないともったいない！」的な機能を紹介させて頂きたいと思います。 フロントエンジニアにも、デザイナーにも、きっと効率アップに繋がる小技が見つかるはずです。 開発者なら「Chrome Canary」を使おう！ みなさんはChrome Canaryを使っているんでしょうか？一般向けにリリースされている安定版であるChromeより、ほぼ毎日アップデートしている「Canary」ビルトを選ぶ理由があります。 それは、開発者向けの新機能がいち早く利用できるからです！リリースがノロノロしているChromeを使ってたら、いつまでも最新の便利な機能の恩恵が受けられ
Web版のFeedlyを使いやすくするカスタマイズと使い方 [Firefox/Chrome/Tips]
(07/27) またまたThe Boysのスピンオフドラマ、今度はソルジャー・ボーイが主役の前日譚 (07/26) QLC採用を進めるスマホ業界、2026年に登場の大容量iPhoneにもQLC NANDフラッシュが搭載か (07/25) AppleMapsがWebアプリとして公開、ブラウザからの利用を解禁 (07/25) 超薄型モデルiPhone 17 Slimが2025年に登場、分厚いiPhoneは陳腐化するのか？ (07/25) LED時刻表示がエモかったEcho Dot with clockがひっそりと販売終了 (07/25) 人気ワイヤレスイヤホンBeats Studio Buds+が大量ポイント付与でお買い得に (07/24) Apple初の折りたたみiPhoneは2026年に登場か、2025年のiPhone 17には薄型モデルが (07/24) iPhone 16は排熱シートが
![Web版のFeedlyを使いやすくするカスタマイズと使い方 [Firefox/Chrome/Tips]](https://cdn-ak-scissors.b.st-hatena.com/image/square/711f9d05e6a699da5aefae726130c8e9e53b4556/height=288;version=1;width=512/https%3A%2F%2Fipod.item-get.com%2Fimg%2F13%2F06%2FFeedly-Firefox-03.png)
RWDの定番チェックツールとして期待できる「Responsive Inspector」が便利かも
レスポンシブWebデザインで作ったサイトをチェックするための定番ツールになりそうな「Responsive Inspector」というChrome拡張機能が先日リリースされていたので、ちょっとご紹介。なんとこの拡張機能、1つのツールで以下の3つができてしまいます。 ページに設置されたメディアクエリの確認 ブラウザのウィンドウ幅の変更 ページ全体のスクリーンショット 過去にいろいろなツールを使ってきましたが、この3つの機能をまとめてできるのはかなり嬉しいツールですね。まだβ版で、スクリーンショットはJPGしか保存ができませんが、開発者サイトのコメント欄には、次のリリースではPNGでも保存できるようにしたいと書いてありました。今後の機能改善にも期待できそうです。使い方も以下のように簡単です。 メディア・クエリの確認 インスペクターを開くと、以下のように閲覧しているページに設定されているメディアク
コード作成やデータ編集作業など、マイナーだけどすこぶる便利なChromeアプリを一挙まとめ | ライフハッカー・ジャパン
最近、めまぐるしい成長っぷりを見せているChromeアプリストアの「オフラインアプリ」たちですが、残念なことにその多くが知名度を得られていない状態になっています。そこで今回は、米Lifehackerお気に入りの知られざるアプリたちをいくつか紹介してみたいと思います。 Googleはここ最近、Chromeウェブストアにオフラインアプリを数多く投入してきています。オフラインアプリとは、PCにインストールしたアプリさながらに、Chormeブラウザ内で使えるアプリのこと。Chromeブラウザがインストールされているパソコンであれば使えるので、借り物のノートPCや容量が少ないPCで作業する際にもかなり便利です。 全てのアプリがオフライン作業に対応しているわけではありませんが、オフライン使用が可能なものも段々と増えてきています。つまり、大量の容量を必要とするデスクトップソフトウェアの代替として、オフラ
ウェブディレクターがおすすめする、とにかく捗るGoogle Chromeの拡張機能（エクステンション）20選 : LINE Corporation ディレクターブログ
こんにちは、広告事業部でLINEやNaverまとめ、livedoorの広告企画を担当しておりますディレクターの阿部です。 ウェブディレクターの皆さんの中でも愛用している方が多いと思われるGoogleのウェブブラウザ、Google Chrome。その速さには定評がありますが、ディレクターの仕事をさらに捗らせてくれる拡張機能（Extensions）は活用していますか？ 今回は、私が常用しているChromeの拡張機能を、一気に20個紹介したいと思います。皆さんの業務効率化に役立つようなら幸いです。 ※こちらの記事は私の個人ブログからの転載です。 検索を捗らせる系 ato-ichinen Activeにしている間、Google検索結果を1年以内のものに限定する拡張機能。フレッシュな情報のみを検索したい時に便利。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://buchineko.website/chrome-devtools-cording/
search?q=chrome%20developer%20tools
画像検索を美しいコラージュに変える「ImageQuilts」｜WIRED.jp
【厳選】本当に使える Google Chrome のショートカットキー17個まとめ。 | 和洋風◎