池田 泰延 @clockmaker ウェブ制作会社ICS代表。筑波大学非常勤講師。HTML/CSSのフロントエンド技術が専門、TypeScript/WebGLによる3D表現やクリエイティブコーディングが得意。著書『JavaScriptコードレシピ集』など解説書12冊を執筆。ウェブ業界の最新情報と、現場で役立つ技を発信します。趣味でタイムラプス撮影。 ics.media/entry/staff/ik…

はじめに エンジニアとして働く、開発をする以外にプライベートや趣味の時間などPCで作業をするときにブラウザを使ってGoogleなどの検索エンジンを使うことが多くあります。私の場合は、一日の大半は検索して情報収集をすることがほとんどです。気がつけば、かなりの時間をGoogleの検索結果画面と向き合うということも多くあります。そのときに、検索する時間を少なく、アウトプットに時間をうまく割けるようブラウザの効率的な操作について考えることがありました。今では拡張機能など、作業を効率化できるツールが好きになり、なるべくキーボード操作だけでブラウジングができるような環境作りをして開発に専念しています。そこで今回はChromeを使って検索をいかに効率よく行うことができるかに焦点を置き、方法について調べてみました。 検索するときに効率化できれば生産性が上がるのでは Google検索を頻繁に行う場合、テンポ

Did you know that you can use Google as a timer, text editor, and currency converter? Or that you can add quotation marks and other symbols to get more accurate results? You can even choose to search specific websites directly from your browser. Google Chrome is quite an amazing tool on its own, but you can take your productivity to a whole new level with the tips below. For instance, you can crea

おはようございます。しなもんです。 今回はセキュリティ調査に使える便利なブラウザの拡張機能 (アドオン・エクステンション) をご紹介します。 こうした拡張機能の多くはこの世で唯一無二の機能を持っているわけではありませんが、普段から一番よく使う調査ツールである「Web ブラウザ」に直結するため、手間の節減や各種オンラインサービスへのアクセシビリティ向上に大きな効果を発揮する場合があります。 前提 Mitaka IP Address and Domain information Link Redirect Trace User-Agent Switcher Flagfox IP Domain Country Flag Wappalyser anonymoX Wayback Machine Exif Viewer/EXIF Viewer Pro Simple Translate Mouse Di

※2021年3月4日の記事を編集して再掲載しています。 Chromeスキルが上がったぞ！ 【全画像をみる】ウェブブラウザ「Chrome」の便利な機能12選。よーし、これでもっと快適になるぞ！ ウェブブラウザ何使っていますか？ 私がメイン使いしているのはGoogle Chromeです。長いことずっーっとChromeです。それでも、まだまだ知らないことはたくさんあります。Googleも常に新機能アップデートしてますからね。あまり知られていないChromeの便利機能をまとめました！ 1：ゲストモードへ切り替え 「ちょっとパソコン貸して？」と言われた時に便利なのがこれ。自分が普段使いしているブックマークはもちろん、開きっぱなしのタブや、ログイン状態のページをもし見られたらと思うとハラハラします。別に何もやましいことないけど、なんかソワソワします。そういう時はゲストモードに切り替えてから貸してあげた

コロナ感染者が増える中、リモートワークの長期化は避けられない情勢だ。ビジネスパーソンも「リモート強者」と「リモート弱者」に二極化しつつある今、あなたは「リモート強者」か？ それとも「リモート弱者」か？ そんな時、心強い味方が現れた。 ITビギナーから絶大な信頼を得ている平塚知真子氏だ。 平塚氏は、Googleが授与する資格（Google認定トレーナー/Google Cloud Partner Specialization Education）を2つ保有する国内唯一の女性トレーナー経営者。 初の単著『Google式10Xリモート仕事術──あなたはまだホントのGoogleを知らない』が発売たちまち3刷が決定。日経新聞にも掲載された。 「10％改善するより10倍にするほうがカンタン」というGoogle急成長の秘密「10X（テンエックス）」で成果を10倍にする「10X（テンエックス）・10（テン）

Chrome 90がリリースされたことで、より多くの機能が自動化されて使いやすくなりました。 一方で、設定をあれこれ調べたり、Chromeフラグを調整しないと表示されない機能もあります。 これは、Chromeの新バージョンがリリースされるたびに発生する「トムとジェリーの果てしない追いかけっこ」みたいなものです。それでは、今回もジェリーを追いかけにいきましょう。 新機能の使い方を説明する前に、Chrome 90で見られる迅速な自動変更について説明します。 Chrome 90のブラウザは、WebRTCベースのWeb会議の動画の品質を向上させ、同時に帯域幅を狭める新しいAV1エンコーダーを備えています。 さらに、Chromeは、WebサイトにアクセスするたびにデフォルトでHTTPS接続になります。 これまでは、HTTPS Everywhere などの拡張機能を使ってこれをしてきたユーザーもいるで

mizdra.icon が社内向けに発表した資料なのですが、折角なので一般向けに書き直して公開します。

モバイルバッテリーとは呼べない。「ほぼポタ電」なコレ1台で有事の時もアウトドアも大活躍!【AmazonスマイルSALE】

2018年1月16日 Webサイト制作, 便利ツール 普段使っているChromeをより便利にしてくれる拡張機能。私も様々なものを入れていますが、その中でもWeb制作時に使える便利拡張をいくつか紹介します。Firefoxに対応しているものもありますよ！ ↑私が10年以上利用している会計ソフト！ Web Developer Chrome拡張｜Firefox Add-on｜GitHub｜公式サイト Webに携わる人は入れておいて損はない拡張のひとつ！長年利用させていただいてます。1クリックでCSSやJavaScriptを無効化したり、画像の非表示、様々なデバイスサイズでの表示、クラスやID名の表示、定規やカラーピッカーまで揃っています！カラーピッカーはCSSで定義されたものだけでなく、画像からも抽出できるのがすごい。日本語版もあるので試してみてくださいね。 CSS Peeper Chrome拡張

Chromeのデベロッパーツールは、Web制作に欠かせないといっても過言ではありません。DOMインスペクター、スタイルパネル、JavaScriptコンソールなど基本的な機能だけでも便利ですが、さらに便利になる機能も数多くあります。 デベロッパーツールを使って、Webページやアプリの制作・デバッグのワークフローが大きく改善される実用的で便利な機能とテクニックを紹介します。 Mastering Chrome Developer Tools: Next Level Front-End Development Techniques 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ダークテーマ 02. 要素をすばやく選択できる選択モード 03. グローバル変数として格納 04. アニメーション用のツール 05. 要素の疑似状態をシ

Chromeのデベロッパーツールをプロのように使いこなすための20のテクニックを紹介します。 いやー、本当にデベロッパーツールは機能が豊富ですね。 How to use Chrome DevTools like a Pro 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 HTMLの要素をクイック編集 指定した行番号に移動 すべての子ノードを展開 デベロッパーツールの位置を変える CSSのセレクタによるDOM検索 Material Designとカスタムカラーパレット 複数のカーソル 画像をData URIとしてコピー 疑似クラスのトリガー 複数のコラムをドラッグで選択 「$0」で現在の要素を手に入れる 要素の表示 「Event Listeners」の表示 イージングのプレビュー Media Queriesの検証 ネットワークをフィルム

オンライン地図サービスはGoogleマップを愛用しているという人は多いはず。しかし、Googleマップには大きな欠点がある。それは、検索窓やユーザーアイコンを非表示にできないことだ。Chrome拡張「FullScreen for GoogleMaps」は、Googleマップの地図以外の要素をすべて非表示にできる。 「FullScreen for GoogleMaps」は、Googleマップ用のChrome拡張だ。導入後、「Esc」キーを押すとGoogleマップ上にある検索窓、ユーザーアイコン、GoogleEarthへのリンクといった機能やボタンがすべて非表示になり、地図だけが表示される状態になる。もう一度「Esc」ボタンを押すと再び表示されるぞ。 Googleマップのキャプチャを撮ったり印刷したいときに、こういった機能は邪魔以外の何物でもない。このツールで非表示にして、まっさらな地図だけの

黒背景でハイライト表示！デベロッパーツール用のテーマが拡張機能として利用可能！うぉぉ！こんな拡張機能があったなんて、もっと早く知りたかった！と思う人が続出しそう（？）ですが、Google Chromeのデベロッパーツールを物凄く見やすい配色に変更するテーマファイルのChrome拡張機能を試してみました！ 今回試してみた拡張機能は「DevTools Theme: Zero Dark Matrix - Chrome ウェブストア」という拡張機能。同様のデベロッパーツールのテーマを変更する拡張機能は他にもありますが、配色の違いなので好みで選択するのが良さそうです。 下記の画像が通常のデベロッパーツールを開いた画面。コードはハイライトされていますが、白背景だと見づらいです。 そこで「DevTools Theme: Zero Dark Matrix - Chrome ウェブストア」を利用すると以下の

This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.