Chromeで特定サイトのみプロキシ経由でアクセスする拡張機能Proxy SwitchyOmega - Qiita
Chromeで特定サイトのみプロキシ経由でアクセスする拡張機能Proxy SwitchyOmega この拡張機能を使用すると、特定のルールにマッチしたサイト・ページのみ、プロキシ経由でアクセスできます。 管理者用の画面のみIPアドレスによるアクセス制限をしているWEBアプリケーションでは、プロキシサーバとこの拡張機能を使用すれば、どこからでもアクセスできます。 ルールを作成せずに手動でプロキシ経由に切替えることもできます。 複数のプロキシサーバを使い分けることも簡単にできます。 使用するプロキシサーバは自分で用意してください。 Proxy SwitchyOmegaの導入方法 以下のリンクをChromeで開いて拡張機能を追加 Proxy SwitchyOmega Proxy SwitchyOmegaの使い方 拡張機能を追加するとChromeの右上にアイコンが表示されます。青丸で囲ったアイコン
Dockerで手軽にスクレイピング環境を手に入れる - Qiita
この記事は Docker Advent Calendar 2017 の1日目の記事です。 こんにちは。Emotion Techの子安です。すっかり冬ですね。今日は夜の銀座からお送りします。 なんでもDockerで Dockerに触れるようになって約2年ほど経ちました。最近は技術検証はもちろん、何かをちょっと試したいときなども、新しい環境が必要になるとまずはDockerで構築してみることが当たり前に（自分的には）なってきています。 で、今回はWebからちょこっと何か取ってきたいとき、いわゆるスクレイピングをしたいとき、Dockerがあれば簡単に環境が作れるぞという話をします。 ※なお、スクレイピングは用法・用量を守って正しく行いましょう。あくまで自己責任でお願いしますね。 要件 とあるサイトから情報を抜き出したい ブラウザを操作してサイトを巡回する Docker上に構築する プログラミング言
Headless ChromeをDocker上で動かして、E2Eのテスト - Qiita
この記事はGunosy Advent Calendar 2017の14日目の記事です。 昨日は@harahenikuさんのGoを遅くしないための地味な話でした。 広告技術部の@hoshitocatです。 主な業務はRailsで広告の入稿やレポートのための管理画面の開発をしております。たまにGoで配信側のAPIを触ることがあります。 今回は管理画面でChromeのHeadlessモードを使ったE2Eのテストを導入した話をします。 PhantomJSからChromeへ 私たちはこれまでE2EのテストをPhantomJSを使っていました。 しかし、Javascriptの動作も含めたテストを書いている際に、includes()がPhantomJSだと動作しないことがわかりました。 プロダクトコードをテストコードに合わせて書き直すことも考えましたが、それでは新しく使えるようになった便利な機能をいつま
UnityからSFSafariViewController/Chrome Custom Tabsを開く - Qiita
■概要 iOS/Androidアプリ開発においてUIWebViewが事実上非推奨になり、iPhoneの場合は「SFSafariViewController」、Androidの場合は「Chrome Custom Tabs」の利用が推奨されています。しかし僕が調べた範囲では、それらをUnityから利用する方法がまとまった情報として存在していなかったため、以下にまとめました。 SFSafariViewController自体の情報は、iOS9からの機能ということもありとても充実していますが、サンプルコードのほとんどがSwiftで書かれており、UnityのC#からはSwiftコードを直接呼び出せないためそのままでは参考にならなかったり、Chrome Custom Tabsもそれ自体の情報は沢山あるのですが、利用するためにはUnityのレガシーなビルドシステムからはアクセスできないbuild.gra
ヘッドレスChromeをもっとも簡単に操作できると思われるNightmareJS風ライブラリ - Qiita
Chrome59(2017/05/27現在はベータ)から--headlessオプションを使うことでChromeをヘッドレスブラウザとして使えます。これをNodeJSから操作するにはchrome-remote-interfaceというNPMパッケージを使うのですが、そのままですとなかなか面倒です。そこで、NightmareJS風にヘッドレスChromeを操作することができるライブラリをご紹介します。 GitHub: https://github.com/OnetapInc/chromy 基本的な使い方 このようにNightmareJS風のメソッドチェーンで操作することができます。visibleオプションを指定すればヘッドレスモードではなく通常モードでChromeを起動することもできます。 Chrome本体は標準的なインストールをしていれば自動的に最も新しいChromeを探してそれを起動します
AngularJSのチュートリアルで躓いたE2Eテストの対応 - Qiita
npm verb pkgid angular-phonecat@0.0.0 npm verb cwd /Users/*/angular-phonecat npm ERR! Darwin 14.3.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "protractor" npm ERR! node v0.12.6 npm ERR! npm v2.11.2 npm ERR! code ELIFECYCLE npm ERR! angular-phonecat@0.0.0 protractor: `protractor test/protractor-conf.js` npm ERR! Exit status 100 npm ERR! npm ERR! Failed at the angular-phonecat@0
2016年度版 僕が考えたChrome拡張機能を作るときのデザインパターン - Qiita
4年近く前の2012年に僕が考えたChrome拡張機能を作るときのデザインパターンというエントリを書きました。最近参加したイベントで「よういちろうさんの拡張機能の記事見て作ってみました〜」と声をかけてくれた人がいて嬉しかったのですが、2012年のそのエントリは、すでに内容が古くなってしまっています。最近の状況を踏まえて、内容を新しくした「2016年度版」を書いてみようと思います。 変更しようと思った点は、以下です。 prototype.jsは使わず、ECMAScript 2015で書く。 Background Page(常駐型)ではなく、Event Page(非常駐型)にする。 そもそも最初のコードセットは自分で書かない。 本文やコード的には、2012年度版をコピペしています。 （この投稿の内容は、自分のブログエントリと同じです。） 前にいくつかのChrome拡張機能を作っていて、すでに数
白い画面恐怖症患者のためのChrome系ウェブブラウザーの処方箋 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 導入 こんばんは、白い画面恐怖症患者です。 眩しい＞＜ こんなに眩い白い画面ではソフトウェア開発どころか趣味のお茶や盆栽の情報収集もままなりませんね＞＜ 癒やされますね、闇に。ﾌﾌﾌﾌﾌﾌ…ヽ(´ー｀)ノ ・・・ところが、最近 Facebook が投稿時に投稿フォームの外側を"暗転"させるエフェクトを導入しました。つまり、↑のように画面を闇モードにしている方は逆に"明転"させられてしまいます。 ぁぁっ・・まぶ・・し・・ぃ・・(｡ŏ﹏ŏ) と、いうわけで、こうした症状をお持ちの方への処方箋を比較的この手の患者さんが多いと思われる Qiit
TypeScript での Chrome 拡張機能開発 Tips - Qiita
はじめまして、こんにちは、水音ぴねといいます。高知で大学生してます。 今回は、私が TypeScript を使って Google Chrome 拡張機能を作る上で見つけたことを書いていきたいと思います。 少々長くなりすぎた感があります。必要なところを、つまみ食いしてください。 前置き Google Chrome 拡張機能とは ? Google Chrome の機能を拡張するソフトウェアで、Web の技術 (JavaScript / HTML / CSS) 使って作ります。そして、一般的に Chrome 拡張機能と呼ばれるものには、大きく分けて以下の二種類があります。 拡張機能 アプリ (chrome://apps/ に表示されるもの) 「拡張機能」は、ブラウザの UI を拡張したり、ウェブページの内容を書き換えたりするものを指します。「アプリ」は、Chrome の API を使ったアプリケ
JavaScript Promiseの実行順序(Firefox31とChrome37で違うけどどっちが正しい？) - Qiita
var p = new Promise(function(fulfill, reject){ console.log("start"); fulfill(""); }); p.then(function(result){ console.log("1-1"); }).then(function(result){ console.log("1-2"); }).then(function(result){ console.log("1-3"); }); p.then(function(result){ console.log("2-1") }).then(function(result){ console.log("2-2"); }).then(function(result){ console.log("2-3"); });
Cross-OriginでWebフォントを使うとき注意すべきこと - Qiita
皆さん、Webフォント使ってますか？ Qiitaでも有名なアイコンフォントが使われてますね。FontAwesomeです。 今のところStableだとかBetaのChromeでQiitaを見ても何の問題も無いでしょう。(今回の辺りでは。) しかし、うちのChrome(38)ではこのようになってしまいます。 見事に豆腐です。 Why? ここでDevツールを開いてエラーログを見てみましょう。 そう。QiitaのFontAwesomeはcdn.qiita.comと言うCDNを経由して配信されていたんですね。でもChrome38以降のBlinkではフォントに対してもOriginチェックがあるらしい… ちなみに このことはChrome37までで既に予告されてたんですね。(手元にあったのがChromium37だったのでそれ以前のは確認できてませんが。) まとめ CDNとか経由してフォント配信する際はクロ
フロントエンドエンジニアになってから11ヶ月間で覚えたちょっと捗るChromeの使い方 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 昨今のWebブラウザはどのような機能があるのか把握するのも大変なほど多機能で便利ですよね。 Webブラウザの機能を把握してうまく使いこなせること（とくに開発者ツール）が、フロントエンドエンジニアの前提スキルになってきてるのかなぁと感じる今日この頃です。 ということで自分のデフォルトの開発用ブラウザはChromeなのですが、これを覚えて捗ったなぁということをメモしていこうと思います。 思い浮かんだら追記していこうと思っているのでストックして頂けると幸いです。 基本系 キーボードショートカットを覚える Chromeのキーボードショ
[最速] HTTP/2 で Hello World! するまでの手順 - Qiita
2014年6月にHTTP/2の13番目のドラフトが公開され、来年にはRFC化の見通しとのことでHTTP/2の機運が高まってきています。 HTTP/2の世界を体感すべく、HTTP/2プロトコルでHello World!を表示するまでの手順をまとめました。 最速と名をうちましたが実のところそこそこ長い道のりですので予めご了承ください。 方針 簡単と思われる方法を探した結果、以下の構成にしました。 クライアント 2014年7月現在、Google ChromeではHTTP/2を有効にすることはできませんが、Chromeの開発版であるChrome Canaryを使えばHTTP/2を有効できます。 Mac Book ProにChrome Canaryをインストールします。CanaryはChromeの開発版でMac用のdmgパッケージが提供されているのでインストールは簡単です。 なお、クライアントはng
![[最速] HTTP/2 で Hello World! するまでの手順 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/6db88d56e325346ccb524221e9f0c884d956a112/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGMTM4NzclMkZwcm9maWxlLWltYWdlcyUyRjE2NjkwMjM0MzQ_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmJnPUZGRkZGRiZmbT1wbmczMiZzPWVhMWQ2Mzg3ZmIxYWIxNjAwNzQ5ZDRmMmEzZjAxMGYy%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D8bab6eb6790272245e2496fdcdb21007%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCJUU2JTlDJTgwJUU5JTgwJTlGJTVEJTIwSFRUUCUyRjIlMjAlRTMlODElQTclMjBIZWxsbyUyMFdvcmxkJTIxJTIwJUUzJTgxJTk5JUUzJTgyJThCJUUzJTgxJUJFJUUzJTgxJUE3JUUzJTgxJUFFJUU2JTg5JThCJUU5JUEwJTg2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9YWM2MDVhMTZlNzM3YTZlZWNiOTdmYjhkNWIyY2QzNTI%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBuaWt1c2hpJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9NjllZWI5NDRiMzhiZTMwYTFkZmM5YzhlMGEzZjg3NWE%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D39148171d8d473e08bc4c6822016badf)
GitHub を使いやすくする Chrome Extension 5 選 - Qiita
Pretty Pull Requests (Github) Chromeウェブストア - Pretty Pull Requests (Github) Pull Request を読むときに便利なエクステンション。 ファイルをアコーディオンで開閉したり、追加された行または削除された行のみを表示することができる。 長い PR を読むときに特に便利。 GitHub Wiki Search Chromeウェブストア - GitHub Wiki Search GitHub Wiki を検索するためのエクステンション。シンプルで使いやすい。 検索語をハイライトしてくれたり、検索中はプログレスバーがでたりと気が効いている。 これを使わずに検索しようとすると GitHub Wiki の git リポジトリをクローンして、 git grep するはめになる。 GitHub.Expandinizr Chrom
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Dockerを使ってHeadless Chromeを動かしてみる - Qiita
YeomanでChrome Extension開発環境を簡単作成 - Qiita