Chrome拡張機能「Perfect Pixel」を使ってピクセルパーフェクトを実現させよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
デザインとコーディングが分業制の企業は最近多くなってきたと思います。分業制の場合、デザインがFixして、次にフロントエンド作業、実装チェックという工程で進行します。 この実装チェックまでに期間が空いてしまったり、自分が作ってないデザインだと、チェックしにくいなと思うこともしばしばあります。そんな憂うべき実装チェックの際に、よく使う便利なChromeの拡張機能をご紹介します。 perfect pixel まず、chromeの拡張機能をインストールしましょう。 下準備 まず、デザインカンプを書き出します。Retinaディスプレイ用に、2倍サイズで書き出します。今回は、本記事用にダミーのカンプ画像を用意してみました。Perfect Pixelを使って、検証してみましょう。 レイヤーを追加 まず、検証したいページを開きます。今回はこのページを使いました。 右上にPerfect Pixelのメニュー
ブラウザ上の操作手順を自動でスクショしてくれるChrome拡張機能【今日のライフハックツール】 | ライフハッカー・ジャパン
三井住友カード ゴールド(NL)のデメリットは?メリットない・いらないは勘違い【年会費無料になる100万円修行のコツ】
ウェブページ上にある画像を一括保存できるChrome拡張「Image Downloader」が超便利 - あなたのスイッチを押すブログ
2chのまとめサイトで見つけたネコの「ごめん寝」画像集。これを見つけた瞬間に、すべての画像をEvernoteに保存したい欲求に駆られました。 でも、画像をひとつひとつポチポチと保存していたのでは、時間が掛かって仕方ない。もっと素早く、画像を一括でパパっと保存する方法はないものかと。 そこで見つけたのが、Google Chromeの拡張機能「Image Downloader」でした。 ウェブページ上に表示されている画像が、一発ドンッで全てダウンロードできてしまう優れ物。インストールしておくと、何かと便利ですよ。 使い方は至ってカンタン！ Image Downloaderの使い方は簡単です。 まず、保存したい画像が掲載されているページ上で、Image Downloaderを起動します。今回の私のケースですと、先ほどの2chまとめサイトですね。 すると、ページ上にある画像ファイルを検出してくれま
Web制作者のためのおすすめChrome拡張15
2018年1月16日 Webサイト制作, 便利ツール 普段使っているChromeをより便利にしてくれる拡張機能。私も様々なものを入れていますが、その中でもWeb制作時に使える便利拡張をいくつか紹介します。Firefoxに対応しているものもありますよ！ ↑私が10年以上利用している会計ソフト！ Web Developer Chrome拡張｜Firefox Add-on｜GitHub｜公式サイト Webに携わる人は入れておいて損はない拡張のひとつ！長年利用させていただいてます。1クリックでCSSやJavaScriptを無効化したり、画像の非表示、様々なデバイスサイズでの表示、クラスやID名の表示、定規やカラーピッカーまで揃っています！カラーピッカーはCSSで定義されたものだけでなく、画像からも抽出できるのがすごい。日本語版もあるので試してみてくださいね。 CSS Peeper Chrome拡張
ブラウザ拡張の権限でどこまで悪いことをできるのか？とその対策【デモあり】 - Qiita
[2018/07/07 追記] 本記事ではChrome拡張について説明していますが、Firefox1やEdgeの拡張機能もほぼ同じ仕組みで動いています。 [2023/11/06 追記] #参考 ページを追加しました。 Chrome拡張。便利な機能を簡単に追加できるので使っている人も多いと思います。 ただ、インストール時の権限の注意書きが分かり難いので無条件に承認（追加）していることもあるのではないかと思われます。 そこで、本記事ではChrome拡張の権限の種類・確認方法の他、拡張がどこまで（悪いことを）できるのかとその対策を3段階の権限（危険性）レベルごとに紹介していきたいと思います。 便利だが危険性もあるChrome拡張 Chrome拡張をインストールすると、Webページを読むというブラウザ本来の機能だけでなく様々なことができるようになります。 例えば、Webメールの新着通知や記事などの
【Chrome拡張機能】はてなブックマークのフィルタリングを可能にする「はてなNG」と公式アドオンの紹介 - えむしとえむふじんがあらわれた
こんにちは、えむしです。最近、はてなブックマークでお困りの方が多いようなので、こういう解決方法もありますよ、と言うご紹介のエントリーです。 はてなNG はてなブックマークでアイキャッチを変更 アイキャッチの変更方法 はてなのお知らせ はてなNGだけだとちょっと短いので、公式のアドオンも軽く触れていきます。 はてなNG フィルタリングでブックマークを快適にできます。 この機能拡張、以外と知られていないんじゃ無いかと思います。 chrome.google.com 使い方を見ていきましょう。 下の画像は検索窓に当サイトのURLが入っていまして、表示されている記事は全て当サイトの記事になっています。 解説 画像で見ていきますよ。 画像ではサイトの例を紹介していますが、NGワード、NGIDの設定も可能です。 結果 上のNGサイトには、当サイトのURLを入力しました。さあ、この状態で、上のアドオンのフ
閲覧中のWebサイトで使われている技術を確認できるChrome拡張「Wappalyzer」のご紹介 - Qiita
はじめに エンジニアたるもの、よそで使われている技術は気になると思います。今回は、そんな時に役立つChrome Extensionの「Wappalyzer」をご紹介します。 概要 Wappalyzerは、ブラウザに現在閲覧しているWebサイト内で使われているテクノロジーを覗き見する機能を追加できる拡張スクリプトです。 Chrome Extensionとして配布されているほか、FirefoxのAdd-onとしても配布されているので、どちらでもお好みのブラウザで利用が可能です。 Chromeのかたはこちらのリンクより、Firefoxのかたはこちらのリンクよりダウンロードが可能です。 使ってみる 導入方法をご紹介しましたので、早速実際に使ってみましょう。 今回はWappalyzerを導入したGoogle Chromeにて、Qiitaの執筆画面を見てみます。 まずはじめに、対象とするページを開いた
私が使っているChrome拡張機能のおすすめ13選【2016版】 - ネットの海の渚にて
前回、Chromeのおすすめ拡張機能を紹介したのが2014年の4月のことなので、2年と半年が過ぎた。 dobonkai.hatenablog.com この2年6ヶ月の間に公開をやめてしまった拡張機能もあるし、私が使うのをやめたものもある。 新たに公開されて使い始めたものもあるし、前回からずっと使い続けているものもある。 なので今回もう一度、私が実際に使って便利だと思っているChrome拡張機能を改めて紹介したい。 Checker Plus for Gmail いつ頃だったか忘れてしまったのだけど昔使っていた「Google Mail Multi-Account Checker」という拡張機能が使えなくなってしまってChromeウェブストアからも消えてしまったので、しばらく困っていたところ、ほぼ同じ用途で使えるこちらが出来ていたのでサラッと乗り換えた。 仕事用とプライベート用さらにブログ用と複
手軽にブラウザ上の操作を録画できる拡張機能「HYFY」 | ライフハッカー・ジャパン
「HYFY」は手軽にブラウザ上の操作を録画できる拡張機能です。ワンクリックで録画を開始できます。マウスポインタも録画され、クリックしたところは波紋が表示されるのでマウス操作も把握しやすいですよ。Webサイトの使い方などに使えそうです。 以下に使ってみた様子を載せておきます。まずHYFYへアクセスしましょう。Google Chromeに拡張機能をインストールしましょう。インストール後、録画したいWebページを開きましょう。 「Start Recording」から録画を開始できます。ブラウザ内での操作がすべて録画されますよ。また、マイクの音声も記録されているので、口頭で操作を解説することもできます。 録画したデータはその場でHYFYのサーバへアップロードされ、共有用のリンクが生成されます。ブラウザ上の操作を手軽に録画・共有することができるので、ぜひ一度お試しください。 HYFY （カメきち）
Webデザイナーがこの夏入れておきたいChrome拡張機能10選 | UX MILK
仕事でもプライベートでも、ブラウザを使う比重はどんどん増えていませんか？ サイト閲覧はもちろん、メールやチャットツールなど、ブラウザベースのものばかりです。Google ChromeやFirefoxの拡張機能なども日に日に進化しており、ブラウザ主体となった私たちの生活のかゆいところに手を伸ばしたアプリが次々と出ています。 今回はGoogle Chromeのおすすめ拡張機能の中でも特にこの夏話題の物を中心にご紹介していきたいと思います。Webデザインや開発などに関わるクリエイター目線で、仕事に便利なものを中心にピックアップしていきます。 Fontface Ninja Chromeに追加：Fontface Ninja Webサイトで使われているWebフォントの種類とフォントサイズなどがマウスオーバーで表示されます。日本語は表示対応していなさそうですが、かっこいい英語フォントなどの名前がすぐわか
Chromeの負担が軽くなる、隠し機能「タブのメモリを自動解放する」を有効にしてみる｜男子ハック
Chromeの「試験運用機能」にある機能を利用して、メモリを自動解放する Chromeはその特徴上、どうしてもたくさんのタブを開くと大量のメモリを使用してしまいます。これのおかげでブラウザクラッシュなども起こらず、安定して利用できるのですが、大量のメモリ使用によって、Mac(PC)本体の動作が重くなることも。 Chromeには「試験運用機能」と呼ばれる隠し機能が存在します。この機能はGoogleが正式に採用していないものなので、利用については全て自己責任。ですが、この機能の中に「タブのメモリを自動解放する」という機能が存在します。 Chromeのアドレスバーに「chrome://flags/」と入力、試験運用機能のメニューが表示されるので、メニューから「タブのメモリを自動解放する」を有効にします。 メニューの説明によると「有効にした場合、システムのメモリが少なくなったときにタブのメモリが自
Chromeをより快適に使いたい人にオススメするChrome拡張機能を紹介！ - USEFUL TIME
Chromeを使ってブラウジングする場合、Chrome拡張機能を使用するとより便利になります。 ですが、Chrome拡張機能は数多くリリースされているので、「どれを選べば良いかわからない」「最初に入れておくべき拡張機能は？」と悩んでしまいますよね。 Chromeを初めて使用する人やChromeを快適に使用したい人へ、私が実際に使用してより便利になったChrome拡張機能のオススメを紹介！ まずは入れておきたいオススメChrome拡張機能 SimpleExtManager 「SimpleExtManager」は、追加したChrome拡張機能を一括で管理できるアドオン管理ツール。 Chrome拡張機能のオン/オフやよく使うアドオンをグループ化して切り替えできたりと、Chromeを使用する人ならはじめに入れておきたい拡張機能です。
【便利すぎて神に感謝】効率化を極めたGoogle Chromeの拡張機能13選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
もしも、今まで1時間かけてやってきたことがたったの15分でできるようになったら、凄くありがたいですよね。余った45分間で世界を変えられるかもしれません。時は金なりです。ということで今回は、一気に作業の効率化を図れるGoogle Chromeの拡張機能を調べてみました。 特に役に立つなと思い、神に感謝したものを13個ご紹介します。 効率化の化身！おすすめChrome拡張機能13選 1. ページ全体のキャプチャに便利！ - Awesome Screenshot Awesome Screenshot みなさんはページキャプチャに何のツールを使っていますか？ OS標準のスクリーンショット？ それともSkitch？ これらのツールを使っているとページ全体のキャプチャが出来ず困ってしまうことがありますよね。そんなときにこの拡張機能が入ってると便利です。本当にありがとうございます！ できること Webペ
ダブルクリックするだけで英単語の和訳をポップアップ表示できるGoogle公式拡張機能「Google Dictionary」 - GIGAZINE
英語のウェブページを読んでいるときにわからない英単語があると、コピーしてから別タブを開いて辞書サイトなどで日本語の意味を調べる、という行動が必要です。知らない英単語が多すぎると、英語のページと辞書サイトを何度も往復せざるを得ないわけですが、単語をダブルクリックするだけでページ上にGoogle翻訳から和訳をポップアップ表示できる無料のChrome拡張機能が「Google Dictionary」です。 Google Dictionary (by Google) - Chrome ウェブストア https://chrome.google.com/webstore/detail/google-dictionary-by-goog/mgijmajocgfcbeboacabfgobmjgjcoja Google DictionaryをChromeにインストールするため、「CHROMEに追加」をクリック
Bootcomp｜Bootstrap × Photoshop CC 2015 エクステンション
�10倍ラクするデザインカンプ制作 Photoshop CC 2019に「Bootcomp」を導入すればWebサイトやアプリのデザインカンプ制作にかける時間を大幅に短縮することが可能です。 ダウンロードする フォーマット作成 Webサイトやアプリのデザインをスタートする際にまずはレイアウトのガイドを作成するなど事前準備に時間がかかっていました。 Bootcompを使えば１クリックでフォーマットが瞬時に作成されるのですぐにデザイン作業をスタートさせることができます。 画像挿入もワンストップ シェイプを作成してクリックするだけで画像挿入〜リサイズをワンストップで行うことができます。画像がまだ未定の場合は画像挿入をキャンセルすれば自動でダミー画像が挿入されます。ぶっこみ機能を使用すれば大量の画像もあっという間に配置することができます。
【これ神】Chromeのテキストフィールド内の文字列をSublime Textでリアルタイムに編集できる拡張機能「GhostText」 – 和洋風KAI
次に、Sublime Text 3を起動して、Package Controlを開きます。↓↓ Install Packageをクリックします。↓↓ GhostTextと入力して、GhostTextをクリックすればインストール完了です。↓↓ GhostText for Chromeの使い方。 まず、テキストフィールドのあるページにアクセスします。 そして、Chromeの右端にある、GhostTextアイコンをクリックします。↓↓ こんなボックスが表示されるので、編集したいテキストフィールドにカーソルを当てます。↓↓ すると、テキストフィールドが青く囲われて、↓↓ Sublime Textにテキストフィールド内の文章が反映されます。なんて便利な！↓↓ さて、GhostTextが凄いのはこれだけじゃなく、なんとSublime Textで編集した文字がリアルタイムにChromeのテキストボックスに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
現役WEBディレクターお墨付き！マジで使えるおすすめツール10選。 | BACKYARD デジタルマーケティングNEWS
org-rabo.com
便利すぎ！Bootstrapベースのデザインカンプ作成がびっくりするほど簡単にできてしまうPhotoshopの機能拡張 -Bootcomp
便利すぎる！GoogleフォントがPhotoshopで簡単にホイホイ利用できる無料の機能拡張 -Fontea
