このブラウザ バージョンのサポートは終了しました。サポートされているブラウザにアップグレードしてください。

はじめに こんにちは、モチベーションクラウドの開発にフリーのフロントエンジニアとして参画している@HayatoKamonoです。 この記事は、「モチベーションクラウド Advent Calendar 2019」10日目の記事となります。 概要 Web系の開発をしているエンジニアであれば、Chrome DevToolsをよく利用されている方も多いかと思います。 特にフロントエンドエンジニアであれば、毎日のように、お世話になっているのではないでしょうか？ しかし、Chrome DevToolsは多機能であるがゆえ、あまり知られていない機能も多いはず。 そこで、この記事では、私が普段よく使っている機能や、今年になって知った便利な機能、面白い機能をまとめて紹介して行きたいと思います。 Console編 CSS - consoleを華やかに console.log('%cHello Qiita',

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Google Chrome機能拡張を使えばWebブラウザがさらに便利になります。普段物足りない、痒いところに手が届かないと感じているなら自分で機能拡張を作ってしまいましょう。しかし作り方を一から学ぶのは面倒ですよね。 そこで使ってみたいのがChrome Extension CLIです。Google Chrome機能拡張作成をサポートしてくれるCLIツールです。 Chrome Extension CLIの使い方 ベースを作成して、Google Chromeで取り込みます。 ツールバーでカウンターが使えます。これがスケルトンとして生成されます。 コードを編集すればGoogle Chrome側に反映されます。 Chrome Extension CLIでは自動的にGoogle Chrome

◆ Chrome Extension CLI https://github.com/dutiyesh/chrome-extension-cli 紹介 「Chrome Extension CLI」は、npmを使って簡単にChrome拡張機能の初期セットアップができるオープンソースのテンプレートです。 $ npm install -g chrome-extension-cli /usr/local/bin/chrome-extension-cli -> /usr/local/lib/node_modules/chrome-extension-cli/index.js + chrome[email protected] added 21 packages from 11 contributors in 2.879s まずは、Chrome Extension CLIをインストールします。 $

こんにちは デザイナーのミライです。 ジャスの意味がわかるやつは大体友達。 今回はデザイナーにオススメしたいChrome拡張機能を紹介します！ みなさんの日々の業務が、便利なツールで心地よくなりますように。 ※ 導入方法や詳細な使用方法などは、本記事では割愛させていただきます。 01.デザインに役立つやつ Muzli 2 – Stay Inspired デザイン系の情報を集めるならMuzliです。「新しいタブ」で Muzliを毎日見ていればトレンドを追い続けることができそうですね。「dribbble」「Award系のサイト」「クリエイティブ系のブログ」などからの情報が表示されています。 Chrome ウェブストア 提供サイト ColorZilla サイトから色を抽出できる、カラーピッカーです。 抽出しヒストリーを保存してくれたり、1箇所だけでなくページ全体から抽出できる機能があったりして、

ヘッドレスChromeでシンプルに自動テストを行う Google Chromeのバージョン59から標準搭載された、ヘッドレスモード（GUIがないモード）。コマンドラインからヘッドレスブラウザを立ち上げることができ、スクリーンショットの撮影を行ったりDOMを出力したりすることができます。自動化の可能性に満ち溢れた機能です。 ヘッドレスChromeの導入については、次の公式ドキュメントが詳しいです。 ヘッドレス Chrome ことはじめ  |  Web  |  Google Developers ドキュメントを読んでいただくと分かると思いますが、様々なことが可能なため指示の記述が少し冗長な面があります。 そこでヘッドレスChromeを用いた自動化処理をシンプルにすることに特化した便利ツール「Chromeless」を紹介します。 なお、今回実装したソースコードはGitHubで公開しています。わせ

エイチームライフスタイルアドベントカレンダー2017、14日目は株式会社エイチームライフスタイルの @ayumik が担当します。 好きな言葉は、「コスパ良い」と「120%改善」と「効率よいなぁ」と「定時退社」です。 というわけで、好きな言葉を全部叶えてくれる、Chrome拡張機能をご紹介します。 自分が数年使っての選りすぐりのものと、できる上司・先輩・同僚に聞いて使ってみて、今まで使ってこなかったことを後悔したものだけを選びました！ (もし他のおすすめもあったら、コメント頂けると嬉しいです) 不具合を防ぐ 不具合は起きるものだけれど、極力0にしたいですよね。できることなら防ぐための工数も少なくしたいです。 ここで紹介するのは、作業中やレビューですぐにチェックできるものです。 HTMLの文法チェックする「HTMLエラーチェック」 おすすめ理由 たかがタグ。されどタグ。 自分が担当しているサ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 転職ナビのフロントエンドを担当しています、@sueshinです。 Livesense - 関 Advent Calendar 2017、22件目をお送りします。 どうぞ宜しくお願いします。 はじめに フロントエンドでよく注目されるJavaScriptではなく、 地味で渋いまるで関節技のような、Google Chrome Devtoolsを使った技術をtipsの形式でまとめました。 免責事項 ショートカットなどは全てMacのキーボード操作にしています。Windowsユーザーは適宜読みかえてください。 Chromeのバージョンは63系に基づ

Firefoxには存在するのに、何故かChromeには区切り線が存在しない！ これは困った！ というわけで作ってみたよ！ しかもプラグイン追加とか一切不要、以下のページにアクセスするだけで簡単に区切り線が使えるよ！ 区切り線の追加方法 1.ページを開きます 2.アイコンを、セパレータを入れたいところにドラッグします。 3.完了！ 区切り線を自由に自作できるよ！ フォームに使いたい文字と繰り返し数を入れれば、簡単に区切り線が作れるよ！ もしくは直接URLにリンクしてもOK！ /sep/-/50 (初期値) →-------------------------------------------------- /sep/♡/20 →♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡♡ /sep/杏マナー/10 →杏マナー杏マナー杏マナー杏マナー杏マナー杏マナー杏マナー杏マナー杏マナー杏マナー /sep/下

株式会社トクバイの根岸です。みなさん、SSSランキングの調子はどうでしょうか。僕は今朝家を出たときには766位でした。一睡もしてません。 さて、今回もブラウザ拡張を作ったよという話です。"外部サイト向けバナー・リンク"という、我々の管理下にないウェブサイトに設置するウィジェットなどの管理・改修をどのように行っているのかについて書きました。 外部サイト向けバナー・リンクについて トクバイが運営しているクックパッド特売情報は、今日のチラシが見られる、お買い物をするひとたちのためのサイトです。閲覧できるチラシ情報自体は、基本的にはスーパーの店員さんによって管理がされています。 では店員さんがなぜチラシをアップロードするのかというと、単純な観点でものを言えば、販促のためです。 それでは、なぜ、販促ができるのかというと、様々な認知・再訪チャネルがクックパッド特売情報には存在し、お買い物をするひとたち

タブブラウザでは、知らないあいだにタブが20～30個、ひどい場合には50個開いていたなんてケースがざらにある。そんなとき、Chromeではタイトルのみならずアイコンすら表示されなくなってしまう。その上ブラウザの動きもかなり重くてしんどい。そんなあなたにすすめたいのが『TooManyTabs for Chrome』だ。

JavaScriptのデバッグは必ず覚えておきたいウェブ開発の必須スキルの1つです。プログラムの実行をデバッグすることで現在の変数の値や、処理がどのように進んでいるのかを確認します。これを利用してプログラムが意図した動作になっているかの分析に役立てることができます。 本記事ではGoogle Chromeブラウザーの「Chrome Developer Tools」(以下「デベロッパーツール」)を使用してJavaScriptをデバッグする際の基本的な使い方を解説します。「今までデベロッパーツールを使ったことのない」という方でもこの記事を読めば理解できるよう、チュートリアル形式になっています。20分ほどで理解できるようまとめているので、1つ一つ順番に試しながら読み進めてください。 この記事で学べること ・デベロッパーツールの使い方 ・JavaScriptのブレークポイントの使い方 ・実行中の変数

普通に画像の寸法を測ったり、Divサイズを図ったり、フォントサイズを図ったりなんていうツールは大量にありますが、ブラウザで見えてるもの全てを測るなんてものは今までに無いでしょうね。 いや、ないですよね？え？ある？ とりあえずご紹介。 見えているものを測るとはどういうことか 例えばこちらのページ。 https://www.pakutaso.com/20151103315post-6250.html 以下のように、要素を測るなんて言うのは当然の機能として・・・。 この辺りから本気だしはじめます。 よく見るとテキストの『日』までの間を測っています。 おでこの範囲を測ることもできます。 二人の距離を測ることもできます。 ちょっとLaLaさんに近づきすぎですね。81ピクセルの距離。 ちなみに、どこからどこまでの距離を測るとか言うツールではなくて、マウスをそこに持って行ったら、勝手に距離を測ってくれる

説明で使用した拡張機能はこちらからインストールできます. 一人でも多くの方に利用いただければ幸いです. 改版 ソースコードはこちらから閲覧できます. 最新版のソースコードでは、GoogleAnalyticsを動作しないように変更しました. ソースコードはv2.1.0を閲覧してください. バックグラウンドページとは Chromeに拡張機能がインストールされてから、常駐し続けるページになります. バックグラウンドページでは、Chrome-Javascript-APIの(恐らく)すべてを利用することができます. Chromeの起動中は常駐し続けるアーキテクチャのため、リソース使用量を最適化する目的からイベントページが追加されていました. これから拡張機能でバックグラウンド機能を実装される方は、イベントページを選択された方が良さそうです. プラグインでは、バックグラウンドページで実装しました. 主

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

説明で使用した拡張機能はこちらからインストールできます. 一人でも多くの方に利用いただければ幸いです. ソースコードはこちらから閲覧できます. Chromeウェブストアとは Chrome ウェブストアでは、Google Chrome ブラウザ向けのアプリ、拡張機能、テーマを見つけることができます。アプリや拡張機能、テーマを追加すると、Chrome でできることが増えます。 デベロッパーダッシュボードとは デベロッパーダッシュボードとは、Chromeウェブストアに公開するアイテムの管理ポータルになります. デベロッパーダッシュボードの表示手順 Chromeウェブストアにアクセス 画面右上の歯車アイコン＞デベロッパーダッシュボード　をクリック 公開するChrome拡張機能の追加手順 デベロッパーダッシュボードにアクセス 新しいアイテムを追加する　をクリック ファイルを選択　をクリックして、拡張

説明で使用した拡張機能はこちらからインストールできます. 一人でも多くの方に利用いただければ幸いです. ソースコードはこちらから閲覧できます. gulpとは Node.jsのStreamAPIを利用したビルドシステム、およびタスクランナーです. gulpを利用することで、定型的な作業を自動化することができます. 公式サイト 開発環境の構築 Node.jsやgulpを開発環境にインストールします. なおWindows版は十分な実機検証していないため、うまくいかないかもしれません. nvmのインストール Node.jsは頻繁に更新されるため、Node.jsのバージョン管理ツールをインストールします. Mac Windows インストールスクリプトも頻繁に更新されるようですので、ここには記載しません. 前述したサイトのインストール手順を参照してください. Node.jsのインストール nvmを使

以前の記事で、 Webアプリケーションのデバッグの仕組み について触れました。今回は実践的なJavaScriptのデバッグについて掘り下げていきたいと思います。 ブラウザデベロッパツール 私の個人的なお気に入りはChromeデベロッパツールです。SafariやFirefoxはChromeほどの高水準に達していません。しかし、徐々に改善されてきています。FirefoxにはFirebugと改良されたFirefoxデベロッパツールが組み合わされた機能が備わっています。もし、Firefoxチームがビルトインされているデベロッパツールの改良の中で素晴らしい仕事をし続けたとしたら、Firebugはいつか、すたれるかもしれません。 個人的な好みにかかわらず、ターゲットとするあらゆるブラウザで、全てのコードのテストやデバッグができるようにすべきです。”あらゆるブラウザ”には、かの有名なInternet E

chrome 機能拡張の作り方を解説します Chromeの機能拡張については多くのページで解説されていますが、Chromeのバージョンアップに伴い、どうしても情報が陳腐化してしまいます。 また個別の機能については詳しい解説はあっても、全体を俯瞰する解説が見つけられず、結局は慣れない英語のドキュメントと睨めっこが必要でした。 そこでこのページでは、初めての方でも全体像を理解できるように、概略から解説します。実物の動作を見るのが一番理解が早いと思うので解説と合わせて機能拡張のサンプルも用意しました。 一連の投稿を応用して「公式ドキュメントを見れば、1人で機能拡張を作成することができる」ということを目標に進めていきます。 Chrome機能拡張について全体の目次 初めてでも理解できるようになる「Google Chrome機能拡張の開発」（このページ） 機能拡張を作成して、ブラウザで読み込み、デバッ

Googleのメール「Gmail」はスパムが少ないうえに高機能だが、同じくGoogleが開発するブラウザ「Chrome」で使うとさらに生産性がアップする。今回、Chrome拡張として無償で提供されている「Mixmax」を使って、Gmailをさらに便利に使いこなすポイントについて、MakeTechEasierの記事「Top 8 Mixmax Features That Will Make You More Productive in Gmail (in Chrome)」を参考に、紹介しよう。 MakeTechEasierによると、Mixmaxは豊富な機能を備えているため、Mixmaxをインストールすれば、Chrome向けのGmail拡張をバラバラとインストールする必要がなくなるという。早速、Mixmaxを用いたGmailの効率アップの方法を見てみたい。 メールの追跡 まず、Mixmaxでは相