生産性が爆上がりするブラウザ：Sidekick｜One Capital｜note
こんにちは、One Capital の三好（@saas_penguin）です。 Product hunt で話題になったため、すでに知っている方も多いかと思いますが、今回は超高速ブラウザ「Sidekick」について紹介します。ずっと使いたいと思っていたものの、なかなかM1 Macで安定稼働してくれず・・・ようやく安定してきたので、使ってみた感想や気になるポイントを書いていきます。 昨今のブラウザ事情について 本題へ移る前にブラウザを取り巻く環境について簡単に触れておきます。デスクトップブラウザのシェア推移を見ると、10年前は Internet Explorer（以下、IE）が約50％、Firefox が30％のシェアを握るという2強状態でした。しかし、2008年に誕生した Google Chrome が Android 端末の普及とともにシェアを急拡大させます。2011年には Firefo
2020年: PuppeteerとPlaywrightの激動の１年。 - Qiita
2020年は、突如Playwrightが現れ、Seleniumを置き換えるほどの勢いでいろいろなツールが現れました。 Puppeteerは、Playwrightが出てからもTypeScript化をしたりカスタムクエリハンドラ機能が実装されたりと、Chrome DevToolsプロトコルを利用するライブラリとして改善が続いています。 今年１年の Puppeteerのリリースページ https://github.com/puppeteer/puppeteer/releases Playwrightのリリースページ https://github.com/microsoft/playwright/releases を時系列にまとめてみます。 2020年1月。 PuppeteerとPlaywrightの15日間の演劇 https://speakerdeck.com/taminif/relation-
Chromeの新機能CSS Overviewがすごく便利！ページに使用しているCSSの概要や未使用の宣言がすぐ分かる
Chromeに新しく実装された「CSS Overview」が非常に便利なので、紹介します。 表示しているページのCSSの概要、カラー、フォント、メディアクエリ、未使用の宣言が一覧でき、制作したページの検証やスタイルガイドとしても役立ちます。 Chromeの新機能「CSS Overview」 Fyi: New in Chrome: CSS Overview Chromeの新機能「CSS Overview」の準備 Chromeの新機能「CSS Overview」の使い方 Chromeの新機能「CSS Overview」の準備 まずは、Chrome デベロッパーツールを開き、右上の歯車アイコン（Settings）をクリックします。
--headless時代の本命？ Chrome を Node.jsから操作するライブラリ puppeteer について - Qiita
--headless時代の本命？ Chrome を Node.jsから操作するライブラリ puppeteer についてJavaScriptChromee2e puppeteer はHeadless Chrome をNode.jsで操作しやすくしたライブラリです。今日(※ 2017/8/17)一日で凄い勢いでGitHubのトレンド入りしており、TLでも話題になっていたので、早速触ってみました。 Node.jsでChromeを操作するというコンテキストにおいては、Nightmare.jsと同じレイヤに属するプロダクトですね。Nightmare.jsはElectronを介在させることで、Chromeの操作を実現していましたが、今年の5月にChromeでheadlessモードが利用可能になって以降1、headless Chromeを直接操作するライブラリが色々と出始めていますね。この系統は、chr
Headless Chrome をさわってみた | CYOKODOG
Headless Chromeのリリースをうけて、PhantomJS のメンテナーが開発の終了を宣言したりとか、ちょっと話題になった Headless Chrome について試してたことをメモっておく。 試したやつのリポジトリ：https://github.com/cyokodog/headless-chrome 概要 ヘッドレス（GUIを表示しない状態）で実行できる Chrome の機能 Chromium と Blink が提供する機能をコマンドラインで利用できる Chrome 59 から利用可（2017/06/08時点ではMAC、Linuxのみ） 活用例 ウェブページのテスト 表示・動作テスト、画像やPDFによる画面のスクリーンショット スクレイピング 認証が必要なサイトでも対応 ヘッドレスで起動する --headless フラグと --disable-gpu フラグ（そのうち指定不要
ヘッドレス Chrome スタートガイド | Blog | Chrome for Developers
要約 ヘッドレス Chrome は Chrome 59 でリリースされます。Chrome ブラウザをヘッドレス環境で実行する方法です。基本的には Chrome を使わずに Chrome を実行しますこれにより、Chromium と Blink レンダリング エンジンが提供する最新のウェブ プラットフォーム機能がすべてコマンドラインに組み込まれます。 なぜこれが有用なのでしょうか ヘッドレス ブラウザは、UI シェルを表示する必要のない自動テストやサーバー環境に最適なツールです。たとえば、実際のウェブページに対してテストを実行したり、そのウェブページを PDF 化したりできます。また、ブラウザが URL をどのようにレンダリングするかを検査することもできます。 Headless（CLI）の起動 ヘッドレス モードを開始する最も簡単な方法は、コマンドラインから Chrome バイナリを開くこと
Electron アプリをつくる時に便利なパッケージ - はやくプログラムになりたい
この記事は Electron アドベントカレンダー2016 の13日目の記事です． 本記事では，僕が Electron アプリをつくる上で便利だったり，ほしかったのでつくったりしたパッケージを7つほど紹介します． electron-about-window electron-dl electron-in-page-search electron-window-state menubar node-auto-launch electron-mocha electron-about-window electron-about-window は 'このアプリについて' ウィンドウを簡単にクロスプラットフォームにつくるためのパッケージです．下記のように関数を1つインポートして呼び出すだけで「このアプリについて」ウィンドウを生成することができます．（example） import openAbout
Eight名刺データダウンロードを便利にするChrome拡張機能つくった - noriaki blog はてな出張所
以前、名刺情報をiPhone連絡先へインポートする方法（またはEightデータをvCard形式でエクスポートするブックマークレットを作りました）という記事を書きました。 その後、Eightサービスが公式にEightプレミアム機能の提供を開始したのでブックマークレットの公開を終了しましたが、機能を追加してChrome拡張機能として公開しました。 Better Eight (8card.net) Tools ダウンロード・インストール Better Eight (8card.net) Tools - Chrome ウェブストア 機能概要 Eightサービスのプレミアム機能の一つである「名刺データのダウンロード機能」を強化し、以下のファイル形式をダウンロード可能にします。 EightオリジナルのCSV（通常ダウンロードできるもの） プレーンCSV（Eightオリジナルから余分なヘッダを削除したも
Chrome開発者ツールの小技集 | POSTD
最近、普段以上にChromeの開発者ツールを使うことに時間をかける機会がありました。その過程で、自分が今まで気づいていなかった機能をいくつか見つけました（少なくとも今までその機能を探す必要に迫られていなかった、とも言えるのですが。例えばブラックボックス化や非同期のスタックトレースなど）。そのため、開発者ツールでとても気に入っているいくつかの機能についてまとめてみたくなったのです。 小さな虫眼鏡ののアイコンは、特定の要素やCSSプロパティに対して、「どのCSSファイルに書かれているどのセレクタ/クラスが最終的なスタイルを決めているか」を示してくれます。例えば、どれかDOM要素に対して「要素を検証」を選び、右側の「Computed」というタブを選びます。確認したいCSSプロパティを見つけてその虫眼鏡アイコンをクリックすることで、すぐさま右側に正しいCSSファイル内のクラス/セレクタを表示してく
任意のサイトで任意のJavaScriptを自動実行させるChrome拡張 - Qiita
任意のサイトで任意のJavaScriptを自動実行させる拡張機能の紹介です。 nakajmg/ScriptAutoRunner 使い道 スニペットを実行させておきたいときに jQueryなどのライブラリを挿入しておきたいときに デバッグに devtools-snippets/にあるconsoleを拡張するスニペットなど、スニペットをあらかじめ実行しておく必要があるものなどに使えます。 ブックマークレットなどで挿入していたjQueryなども自動で挿入することができます。 ホスト名でフィルタリングできるので、デバッグにも使えると思います。 使い方 まず実行させたいスクリプトを追加します。スクリプトの追加は拡張のオプションページから行います。 オプションページは次の3つの方法で開くことができます。 拡張機能のアイコンを押して歯車アイコンをクリック 拡張機能のアイコンを右クリックして"オプション"
Chrome ExtentionからOAuth.ioを使ってTwitterのAccessTokenを取得する。 - return $lock;
Chrome ExtentionからOAuth.ioを使ってTwitterのAccessTokenを取得する。 2014-02-15 JavaScript Twitter Tutorial: OAuth – Google Chrome chrome_ex_oauth.jsがTwitterで使えなくなっていたので、OAuth.ioのoauth-jsを利用してChrome拡張からTwitterのAccessTokenとSecretを取得してみました。 作業自体は10分あれば完了するというお手軽さです。あまりに簡単だったので感動しました。 ライブラリは以下を使用します。 oauth-io/oauth-js · GitHub 1. OAuth.ioでアプリケーション用のpublic keyを取得する。 OAuth.io – OAuth that just works. OAuth.ioに登録してP
AndroidアプリがLinuxで動作、Chromeで動かせるプラグイン提供
米Google社は2015年4月1日、ChromeブラウザーやChrome OS向けのソフトウエア「ARC Welder」を公開した。ARC Welderは、ChromeブラウザーやChrome OS上でAndroidアプリを動作させるためのプラグイン。動かないアプリも多いが、正常に動作したアプリは快適に使えた。 オープンソースのコミュニティーによって多くのLinux用フリーソフトが開発されているが、日本語環境ではうまく使えないというものも少なくない。一方、スマートフォンアプリなら日本人に向けた便利なものが数多く開発されている。 米Google社が2015年4月1日に公開した「ARC Welder」は、便利なAndroidアプリをChromeブラウザーやChrome OS上で動作させるためのソフトだ。ChromeブラウザーはLinuxやWindows、Mac向けに提供されており、そのブラウ
Rails 開発をサポートするChrome拡張 Rails Panel の機能と仕組み | 割り箸ポテチ
7 must have Development Gems to install on every project この記事を読んでいて、Rails PanelというChrome拡張を知りました。 qqshfox/meta_request RailsPanel - Chrome ウェブストア Rails PanelでできることデベロッパーツールにRailsというパネルが追加されます。 このパネルでは、ページリクエスト単位で下記のような情報を表示することができます。 Breakdown: 処理時間の内訳(ActiveRecord, Rendering, Other) Params: コントローラから参照できるparamsの内容 ActiveRecord: そのリクエストを処理する際に発行したSQLと処理時間 Rendering: ビューテンプレートごとの描画時間 要するに rails serv
メモリー圧迫防止！使っていないタブを“スリープ状態”にするChromeの新拡張機能 | Techable(テッカブル)
私たちの生活に欠かせないインターネット。いくつものタブを同時に出しながら、作業をしている人は多いのではないだろうか。 しかし、たくさんのタブを出しっぱなしにしておくと、メモリーを圧迫して、コンピューターの動作がスローダウンしてしまう、なんてこともある。 ・Google Chromeの新拡張機能 そんな問題を解決するため、Google Chromeに新しい拡張機能が追加された。使っていないタブを一時的に待機状態にしておける「The Great Suspender」という機能で、インストールするだけですぐ使えるようになる。 ・待機状態にする期間も自由に設定可能 ユーザーは、どのタブをスリープ状態にするか選択したり、20秒～3日間まで、どれくらいの期間休止状態にしておくか、自由に設定することができる。 ・設定期間を過ぎるとお知らせ スリープ状態になっているタブは、ユーザーが設定した期間が経過する
Chrome拡張「Scraper」でWEBページ情報を手軽にスクレイピングしてデータ化する方法
Scraperとは Scraperは、WEBページ上の規則性のあるデータを手軽に取得することができるChrome拡張です。 例えば、テーブルデータや、Aリンクデータ、のような特定のHTML要素に入っている情報を、片っ端から取得してテーブルデータ化することができます。 また、その取得したデータをワンクリックでGoogleスプレッドシートに保存することができます。 テーブルデータのスクレイピングは以下の動画を見た方が分かりやすいかも。 以下では、その使い道などをいくつか考えてみました。 テーブルデータの取得 最もオーソドックスな使い方と言えば、動画にも出てきたテーブルデータの取得です。 例えば、信長の野望の以下のような武将データテーブルがあったとします。 これを、以下のように選択して、Chromeの右クリックメニューから「Scrape similar（似たものをスクレイプ）」を選択します。 す
ページ内の全角英数文字を半角に置換するGoogle Chrome機能拡張「さよなら全角英数（goodbye "Zenkaku"）」 - ネタフル
ページ内の全角英数文字を半角に置換する「さよなら全角英数（goodbye “Zenkaku”）」というGoogle Chrome機能拡張が話題になっておりました。そうそう、新聞社のサイトとか、気になるんですよ、全角英数文字が！ これで、そんなイライラからも解放されますね。 「さよなら全角英数（goodbye “Zenkaku”）」を試してみた！ 使い方は簡単。 Google Chrome機能拡張「さよなら全角英数（goodbye “Zenkaku”）」をインストールするだけ、です。 これが‥‥ こうなります！ しかし、なぜあえて英数字が全角なのでしょうね。ワープロ時代の名残だったりするのでしょうか。 オプションでは、置換を行わないページやサイトの指定も可能です。 「さよなら全角英数（goodbye “Zenkaku”）」は無料のGoogle Chrome機能拡張です。
ウェブのプッシュ通知、何がそんなにすごいのか？
3 月 13 日、Chrome Beta のブログポストが出ました。Android 版 Chrome でプッシュ通知が使えるようになったのが個人的なハイライトです。 「確かにプッシュ通知は便利かもね〜」と思ったあなた、驚きが足りません。のけぞるべきです。小躍りするべきです。 理由を説明します。 ユーザーエンゲージメントが変わる # あなたのウェブサイトのビジネスモデルが広告モデルにしろ課金モデルにしろ、ユーザーが繰り返し訪れてくれることは大前提です。通常のウェブサイトやサービスは、そのための策を練ります。そのきっかけをサービス側から能動的に与えることで、ユーザーが戻ってきて、ビジネスは回ります。しかし、そのきっかけを与える方法は、非常に限定されていると言わざるを得ません。 インターネットが普及し始めた当初から伝統的に利用されているのがメール、数年前から利用されているのがソーシャルメディア、
簡単にFeedlyを便利にするchrome拡張など厳選8ツール
今回は、Chromeで使えるFeedlyの拡張ツールを知りたい人のために、以下の内容をお話します。 LINE Outの複数の料金プランの紹介 料金をLINEアプリ、ラインストアで決済する方法 それでは早速見ていきましょう。 1.Feedlyの記事をバックグランドタブで開く「Feedly Background Tab」 「Feedly Background Tab」 Feedly Background Tabは、Google Chrome用拡張機能です。これを使うとFeedly内でクリックした記事リンクをバックグランドタブで開いてくれます。地味ですが、かなり便利です。 2.Feedlyの記事行間を詰めて表示「RSS Reader Style」 「RSS Reader Style」 RSS Reader Style はFeedlyの記事行間を詰めて表示してくれるGoogle Chrome拡張で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「Chrome」からWindows/Mac/Linuxへリモート接続！ Googleが公式提供する無償ツール【レビュー】 - 窓の杜
TechCrunch
