ReactではじめるChrome拡張開発入門ReactとTypeScriptで、シンプルかつ実用的なChrome拡張機能を開発するための入門書です。 開発のために最低限知っておきたい知識から環境構築の方法、実装で陥りやすいポイントまでを網羅的に解説します。 また、本書を読むことでDeepLのような実践的な翻訳Chrome拡張機能を開発できるようになります。 所要時間： 約2時間 対象者： Reactを少しでも触ったことがある人 【2023/02/20】 初版を公開しました！ 【2024/02/18】 改訂版を公開しました！
閲覧中のウェブページ全体を単一のhtmlファイルとしてダウンロード＆注釈付けも可能な「SingleFile」レビュー
ウェブブラウザで閲覧中のウェブサイトをページ中の画像も含めて保存したいと思ったときに、HTMLファイルと画像ファイル・スタイルシートが別フォルダになることなく、単一のHTMLファイルとして保存できるブラウザ拡張機能が「SingleFile」です。 SingleFile – Firefox (ja) 向け拡張機能を入手 https://addons.mozilla.org/ja/firefox/addon/single-file/ SingleFile - Chrome ウェブストア https://chrome.google.com/webstore/detail/singlefile/mpiodijhokgodhhofbcjdecpffjipkle SingleFile - Microsoft Edge Addons https://microsoftedge.microsoft.com
知らないとヤバイ!高精度翻訳DeepLのChrome拡張機能 | ソフトアンテナ
高精度な言語翻訳サービス「DeepL」。 これまではWebサイトや、デスクトップ用のネイティブアプリ経由で使用する方法が主流でしたが、今後はChrome用の公式拡張機能「DeepL翻訳」にも注目した方が良いかもしれません。 現在ベータ版ですが昨年末から便利すぎると話題になっています。 DeepL翻訳拡張機能の使用方法 ChromeでChromeウェブストアの「DeepL翻訳」ページにアクセスし、拡張機能をインストールします。 ▲Webサイトの情報を日本語に翻訳したい場合、Chromeでそのサイトを表示し、翻訳したい部分のテキストを選択します。表示されたDeepLのアイコンをクリックすると、その近くに翻訳結果がポップアップ表示されます(トップ画像)。 また、自分の入力した情報を他の言語に翻訳することもできます。 ▲拡張機能が有効な場合、TwitterやGmailの入力欄にDeepLのアイコン
Google Chrome開発版でGreasemonkeyを使ってみた
さくっと起動できてWebページの描画も速いと評判のWebブラウザ「Google Chrome」。「これでFirefoxみたいに拡張機能に対応していれば、メインブラウザとして使えるのになぁ」と考えていた人も多かったことだろう。そんなGoogle Chromeの開発版が、Firefoxの拡張機能「Greasemonkey」に対応したというニュースが、ブログ「Google Operating System」で紹介されていたので試してみた。 利用手順の前に、Greasemonkeyについて簡単におさらいしておこう。Greasemonkeyは、ブラウザ上でユーザースクリプトを実行できる拡張機能。目的に合ったユーザースクリプトをインストールすることで、Webページをユーザー側で自在にカスタマイズして表示できる。 例えば、複数ページにまたがったコンテンツをスクロールだけで連続表示したり、Amazon.c
Chrome拡張機能おすすめ｜長年使って生き残った便利なアドオン
Chrome拡張機能おすすめ｜長年使って生き残った便利なアドオン 2015/8/25 [更新:2022/4/18] パソコン, Chrome, まとめ 2 Google Chromeの拡張機能から、おすすめのものを紹介します。 もうChrome歴もかなり長くなるので、今まで実際に使ってきたおすすめの拡張機能をまとめました。 「他ブラウザから乗り換えを悩んでいるけどアドオンの代わりがあるか不安」という人の参考にもなると思います。 注意：Chrome拡張機能は個人が開発したものも多く、更新がストップしたり、セキュリティリスクが発生することがあります。 この記事に書いてある内容もそのうち古くなる可能性があるので、自分で検索して調べてみることも大事です。 Selection Search ⇒ Selection Search 選択文字列から検索できる拡張機能。 ↓検索のやり方がいろいろあります。
【知ってた？ Chrome裏技】縦に長いWebページ全体のスクリーンショットを撮る方法（拡張機能も不要！）
拡張機能を使わずに縦長ページのスクショが取れる！ Webページのスクリーンショット（画面キャプチャー、スクショ）を撮る際に、ブラウザーの画面上に表示されている部分だけでなく、スクロールした先も含めたページ全体を撮りたいことがあります。今回は、そんなときに便利なテクニックを紹介します。 Chromeブラウザー（クロームブラウザー）に搭載されている開発者向けの「デベロッパーツール」を使えば、ページ全体のスクリーンショットを撮影することが可能です。この方法なら、新たにChromeブラウザーに拡張機能をインストールする必要もありません。Chromeブラウザーだけで、縦に長いWebページ全体のスクリーンショットを撮影できます。 ここでは例として、Amazonの商品ページ（縦に長い！）全体のスクリーンショットを撮ってみます。Chromeブラウザーの便利なTipsなので覚えておいて損はありません。ぜひ一
スクリーンショットを撮るのはChromeがいちばん?! | DevelopersIO
新しい職場、新しいパソコン。まず始めに入れるツールの一つがスクリーンショットではないでしょうか。 でも、Chromeのver.59からは、標準機能として装備されたようなのです。 やりかた ChromeのDevelopers Toolを立ち上げる。 Macだと、Chromeを開き「alt + command + i」を同時に押す。 レスポンシブ表示にする 続いて、command + shift + m を押します。または、下記のボタンを押してください。 画面上部に、解像度やデバイスを変更するセレクトボックスが表示されます。 デバイスの選択肢を増やす 必要最低限はありますが、PCのスクリーンショットも取れるようにしたいので、Editを押します。 デベロッパーツールの表示が切り替わるので、「Laptop with HiDPI Screen」と「Laptop with MDPI Screen」をチ
知っておくとかなり便利！Chromeのデベロッパーツールであまり知られていない実用的な機能とテクニックのまとめ
Chromeのデベロッパーツールは、Web制作に欠かせないといっても過言ではありません。DOMインスペクター、スタイルパネル、JavaScriptコンソールなど基本的な機能だけでも便利ですが、さらに便利になる機能も数多くあります。 デベロッパーツールを使って、Webページやアプリの制作・デバッグのワークフローが大きく改善される実用的で便利な機能とテクニックを紹介します。 Mastering Chrome Developer Tools: Next Level Front-End Development Techniques 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ダークテーマ 02. 要素をすばやく選択できる選択モード 03. グローバル変数として格納 04. アニメーション用のツール 05. 要素の疑似状態をシ
Chrome愛用のエンジニアであれば、これだけは入れておくべき拡張機能を8つに絞ってみた｜TechClips[テッククリップス]
ウェブ系エンジニアにとってブラウザは、自分好みにカスタマイズして使い倒したい一種の仕事道具のような存在なのではないでしょうか？ 最近だと、純国産で多機能なブラウザ「Kinza」が登場し、国内でもエンジニア好みのブラウザが増えている印象。 とはいえ、やはり不動の人気を誇るのがGoogleの提供するChrome。これまで幾度となく、ネット上ではエンジニアにとってオススメのChrome拡張機能が紹介されてきましたが、今回改めてエンジニアにとって本当に必要であろう拡張機能を8つに厳選しました。 Chrome愛用のエンジニアはお見逃しなく！ 1. YSlow http://yslow.org/ エンジニア向けとしてよく紹介される王道の拡張機能「YSlow」。サイトパフォーマンス計測ツールであり、Webサイトの表示を高速化する際に役立ちます。 最近で言えば、このサイトスピードをいかに早くするか、ある意
![Chrome愛用のエンジニアであれば、これだけは入れておくべき拡張機能を8つに絞ってみた｜TechClips[テッククリップス]](https://cdn-ak-scissors.b.st-hatena.com/image/square/49b48a9a28ce96184a2dafcfd8da5a9633f5c938/height=288;version=1;width=512/https%3A%2F%2Fobject-storage.tyo1.conoha.io%2Fv1%2Fnc_261159609ad84809af5afcb9e5f56abb%2Ftechclips%2Fimages%2F167%2Fimage.png)
既存のコードの理解が捗るChrome DevToolsの使い方 - kitak blog
jQuery系ライブラリによるDOM操作が中心のプロジェクトにがっつり機能を追加する機会があった。 そのJavaScriptのコードは他の人から引き継いだコードで、一応引き継ぎ時にディレクトリ構成、設計、実装方針について共有を受けたが、それでもいざ手を入れようとすると自分自身のコードの理解が進んでおらず「えーっと...」となってしまった。 上記以外にも、長年、多くの人が触れてきたJavaScriptのコードに機能を追加する、修正するのはなかなか難しいのではないか、と思う。最初は、ちょっとしたユーザビリティの向上のために書かれたスクリプトが、気がつけば多数のDOM操作、至る所で宣言される変数、どこから実行されるか分からない関数群で無秩序に膨れ上がり、頭を抱えることになる(そうならないようにするのがウェブフロントエンジニアがいるひとつの理由ですが…)。 これらのケースでは、まずは修正、あるいは
Chrome DevToolsを使いこなすための参考サイトまとめ | 1 pixel｜サイバーエージェント公式クリエイターズブログ
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 フロントエンドエンジニアの谷です。 本記事ではGoogle Chromeの開発者ツール、Chrome DevToolsを使いこなすために参考になるサイト、ページの紹介をします。 すでに多くのフロントエンドエンジニアが開発で使っているかもしれませんが、「要素のインスペクタなどの基本的な機能しか使っていない」「UA切り替えくらいしかつかってない」というような方や、そもそもほとんど使ったことがない、という方もこれらを参考にフロントエンド開発を効率化していきましょう！ 基本的な使い方 Chrome DevTools Overview 基本はやはり公式ドキュメ
Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能
Webアプリのデバッグやチューニングに役立つ、Chrome Developer Toolsの主要機能を、スクリーンキャプチャ中心で簡潔に紹介。2014年10月に最新情報に改訂。 モダンブラウザーの中でGoogle Chromeは最後発ながら、その機能の潤沢さ、便利さ、高速さからシェアを大きく伸ばしている。そして、今やほとんどのブラウザーではWindowsの場合F12キーを押すことで（Macの場合はCommand＋Option＋Iキーで）手軽に各ブラウザー搭載のデベロッパーツールを利用できるが、特にChromeのデベロッパーツールは、非常に機能が豊富なため、利用している人もかなり多い。 本稿では筆者がよく使う機能や、使うと便利な機能を中心に、Chromeのデベロッパーツールについて紹介していく。なお、本書は執筆時点で、最新のChrome 38を使用している。 機能ふかん 残念ながら、Chro
歌うキツネ : Google ChromeのWebページの保存方法をMHTMLに変更する
Google ChromeのWebページの保存方法をMHTMLに変更する Google Chrome のWebページの保存方法を、MHTML(Webアーカイブ・単一のファイル)に変更します。 (試験運用機能は バージョンアップで常に変化するため、削除・変更される可能性があります。) 1. アドレス欄に chrome://flags/#save-page-as-mhtml と入力して [Enter]キー を押し 試験運用機能の MHTML としてページを保存 の項目を表示する 2. [MHTML としてページを保存] の [有効にする] をクリックし [無効にする] へ変更する 3. [今すぐ再起動] をクリックして完了です 変更前 拡張子: html ファイルの種類: ウェブページ、HTML のみ / ウェブページ、完全 変更後 拡張子: mhtml ファイルの種類: ウェブページ、H
Amazonの商品価格が安い時に購入できるAmazon Price TrackerというGoogle Chrome拡張が便利。 – @attrip
Amazonの商品価格が安い時に購入できるAmazon Price TrackerというGoogle Chrome拡張が便利。 Amazonの商品価格で安い時に購入したい！って要望を叶えてくれるGoogle Chrom拡張の紹介です。 Amazon で欲しい商品を安い時に購入したい！ Amazon Price Trackerという拡張機能を使うことで価格が安い時に購入することが出来ます。 よく買う商品は、安い時に買いたい！ ちょっと高いかいものだから安くなっているタイミングで購入したい！ などの要望を叶えてくれる超便利な機能です。 Amazon Price Trackerの使い方 ブラウザをGoogle Chromeにして Chrome ウェブストア – Amazon Price Tracker – Keepa.comにアクセスして “CHROMEに追加” をクリックします。 例えば、これ
Web開発者のための現場で使える10個のウェブアプリまとめ - Chrome Life
先日、Chrome OS搭載PC「Chromebook」が、海外で発売されましたね。Amazon.comにあったので予約しようとしたら日本には発送できませんとなってしましました。 Chromebookの日本での発売が待ち遠しいですね。 それまでにChromeの環境を整えておき、普段からChromeだけである程度のやりたいことができるようになっておけば、Chromebookを起動したとたんすぐに自分の環境が使えるようになるはずです。 そこで今回は、筆者がWeb開発者として普段使っているChromeウェブアプリの中から、皆さんの現場で使えそうなもの10個を厳選してご紹介したいと思います。 今回ご紹介するウェブアプリのほとんどは、FirefoxやSafariなど他のブラウザでも使えますので、是非試してみてください。 （オフィス系は、定番のGoogle DocsやGmailなどで十分だと思うので、
なんでもっと早く使わなかったんだと後悔したChrome拡張５つ（ブロガーとして）
今回はChromeExtensionを５つのご紹介。正確には以前に１個紹介しているので４つかな。 たった4つかというのもありますが、あんまり拡張するのが好きではないのもあり、入れてもすぐ消す癖があって、本当に便利なもの、もしくはよく使うものしか基本的に追加してません。ただこれ、「職業ブロガー」っていうところに恐らく焦点が合わさっていますので、さきにご了承願います！ 以前書いた記事でもそうなんですけど、かなり消してますね・・・ 私が厳選して愛用するGoogleChromeエクステンション12個＋消した奴36個 是非まだ入れてないって人は使ってみてください。 使えば使うほど味が出る超便利エクステンション とりあえず今回紹介する4つはこちら。 他のやつはド定番なので紹介の必要が無いかと判断したりなんだりです。 １）ato-ichinen ダウンロード とりあえず「１」と書かれたアイコン。押してお
Amazonの本が図書館にあるか一目瞭然 Chrome拡張「その本、図書館にあります。」が便利
書籍代を大幅削減できるかも!?――Google Chromeの拡張機能「その本、図書館にあります。」が便利だと話題になっている。Amazonで売っている本が図書館にあるかどうか手軽に確認できる。 利用方法は、プラグインをインストールしてChromeのツールから任意の図書館を指定しておくだけ。設定した後に、Amazonの書籍ページを開くと図書館にあるかどうか表示されるようになる。取り扱っていた場合、表示されたリンクから直接、図書館の予約ページに飛ぶことができる。 開発者はkanakogiさん。書庫検索には図書館の蔵書検索サイト「カーリル」のシステムを使った。ブログには「書籍代をおさえたい」のはもちろんのこと、「図書館が好き」であり「もっと図書館へ行こう！」との思いから作成したと記している。 advertisement 関連記事 「ウサギのできそこないが2匹でてくる絵本」ある？ 福井県立図書館
WEB開発者はインストール必須のChrome拡張「Pendule」:phpspot開発日誌
Chrome ウェブストア - Pendule WEB開発者はインストール必須のChrome拡張「Pendule」。 昔からあるChrome拡張ですが知らない間に色々と便利になっているようだったのでご紹介。 ４月からはたいている新入社員のWEBデベロッパーさんにもオススメ インストールすると以下のようなボタンが表示されますのでクリック。 まず、StyleSheetのタブではCSSを見れる、CSSがその場でリロードできたり、CSSをを無効にできます サイトで使われているカラーを１６進数で出してくれる機能もあります CSSビュー。折畳み可能で使いやすく見やすい Formsタブ。パスワードを表示したり、hiddenなフィールドのアイテムを表示したりできちゃいます。恥ずかしい！ Imagesのタブでは全部の画像を非表示にしたり、背景画像を非表示にしたり、altを全部表示したりといったことが可能 そ
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「これは強い」 DeepL公式Chrome拡張が登場 GmailでもTwitterでも外国語の読み書きを一発変換