Chrome Dev Summit 2018に参加しました！ - 一休.com Developers Blog
この記事は一休.comアドベントカレンダー2018の1日目です。 こんにちは。レストラン事業本部の西村です。 11月12、13日にサンフランシスコで開催されたChrome Dev Summit 2018に参加しました。 今年はChromeが10周年ということで、この10年で変わったこと、これからについての話で始まりました。 2日に渡って行われた22のセッションの中で、特に注目した点について深掘りしていきます。 1日目のセッション 1日目は現在提供している技術について、具体的な事例を交えながら紹介されました。 VisBug VisBugは、hoveringとKeyboard shortcutsでブラウザ上でサイトの画像を差し替えたり、一部のコンテンツの内容やスタイルを変更できるChrome extensionです。 ブラウザ上でちょっとしたスタイル修正や画像の入れ替えをしてデザイン決め、とい
DevFest Tokyo 2016 みんなの知らない Chromeアプリの世界
みんなの知らない Chromeアプリの世界 DevFest Tokyo 2016
Visual Studio CodeでのJavaScriptのデバッグ方法 - ICS MEDIA
マイクロソフトが無償で提供しているコードエディター「Visual Studio Code（略称：VS Code）」はGoogle ChromeやMicrosoft Edgeのデバッグ機能と連携できます。VS Code上でブレークポイントを設定してコールスタックを確認したり、ステップ実行や変数のウォッチなどを行えます。複雑なJavaScript開発を行っている方は、デバッグ機能を使うことで、効率のよい開発体験を得られるでしょう。 本記事ではデバッグ機能を使うためのVS Codeの導入方法について説明します。 導入手順と前提 VS Codeにはデフォルトでデバッグ機能が搭載されています。 ※2021年8月以前のVS Codeでは拡張機能「Debugger for Chrome」の導入が別途必要でしたが、今のVS Codeでは拡張機能をインストールする必要はありません。 本記事では、ウェブページ
リンクもまるごとキャプチャしてSVGで出力するChromeスクリーンショット拡張をつくりました - #daiizメモ
閲覧しているウェブサイトの選択された範囲のスクリーンショットを撮ってSVG形式でダウンロードできるChrome拡張機能をつくりました．SVGで出力しているため，普通のPNGやJPGと比べると，以下のような少しだけ高度なことができます． スクリーンショットを撮ったページのURLを<svg>のdata属性として保持できる スクリーンショットの範囲内のリンクをそのまま残すことができる． ページ中の<a>の位置に，外部ページヘのリンクを持つ<rect>を挿入しています．クリックするとリンク先のページが開きます． ブラウザで通常リンクと同じように扱われるため，rectをホバーするとChromeの左下にジャンプしようとしているURLが表示されるので，移動先もしっかり確認できます． まだかなり荒いベータ版ですが，GitHubで公開しています．クローンして，そのままChromeの拡張機能管理ページから読み
GitHub と CI を連携してる人にオススメの userscript: PR Build Status in Favicon - 詩と創作・思索のひろば
GitHub を使って Pull Request ベースで仕事しているとこんなことがありますよね…… ( ^o^) LGTM もらった！:sushi: ( ˘⊖˘) 。o(CI 通ったらマージしよう) |花金|┗(☋｀ )┓三 ( ◠‿◠ )☛ マージしてから帰れよ ▂▅▇█▓▒░(’ω’)░▒▓█▇▅▂ 忘れてたああああああ Issue/PR のタブを開きすぎて、自分のにしろ他人のにしろ何がどこにあってステータスがわからなくなってしまうという問題もありますね。 そんなときに便利なユーザースクリプトがこちら。 GitHub PR Build Status in Favicon chrome://extensions に放り込むなどしてインストールすると、ビルドステータスが設定されている Pull Request（例）では、Favicon の右下にそのステータス（最新コミットのもの）を表す色
Qiitaの通知を表示できるChrome拡張を作った - Qiita
画面の上の方に出てくる通知を見れるChrome拡張を勉強がてら作りました。よければ使ってみて下さい。 Chrome Web Store - Qiita Notifications taka84u9/qiita-notifications クロール間隔は150秒です。 HTTP通信の履歴からAPIを予測して（つまり非公開APIを用いて）作っているので、突然APIが変わったりして動かなくなったりする可能性があります。 また、バグなんかがあったら、GithubのページかQiitaに書いてくれれば、極力対応します。 ソースコードはオープンですが、最初の実装がQiitaに過剰にアクセスする感じだったので、キャッシュをさせたりなんなりしていたら、だんだんコードを綺麗に保つのが面倒になってしまって、つまり、汚いです。 最初の仕事はリファクタリングですかね。
Chrome Extensionの話をしよう。ようこそ Hometype が創るマウスレスの世界へ。 · けんごのお屋敷
vi のようなキー操作で Google Chrome を操作できるエクステンション Hometype の紹介をしたいと思います。元々はエクステンションの作り方の勉強をするために始めた Hometype でしたが github にソースコードを置いて自分が使いやすいようにいろいろ作ってるうちに、会社の同僚が何人か使い始めてたのでとりあえず公開しても良いかなと思って、先日バージョン 0.0.1 を Chrome ストアへ登録しました。ただ実際は、まだ実験的な機能も多く、バグも多く潜んでいると思いますし、テストもないし、最低限の機能しかないので、既存の同類のエクステンションに比べればまだまだ発展途上ではありますが、自分の中でやりたいことはいっぱいあるので開発はずっと続けていく予定です。 Hometype とは 先にも紹介しましたが vi のようなキー操作で Google Chrome を操作でき
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
狭い幅で開いたら勝手にスマートフォンのUserAgentでリクエストするChrome拡張を書いた - Cside::Weblog
2013-06-30 狭い幅で開いたら勝手にスマートフォンのUserAgentでリクエストするChrome拡張を書いた ダウンロード https://chrome.google.com/webstore/detail/keffnkgkjiancfjjolkoejiocficcbni リポジトリ https://github.com/Cside/auto-change-to-sp-ua.crx 640px（設定で変えられる）以下の幅のウィンドウでWebページにアクセスすると、勝手にスマートフォンのUserAgentに偽装してアクセスする。よければ使ってみてください。 Cside 2013-06-30 22:37 Write a comment Prev. entry
意外と知らないChrome Developer Toolsの便利な機能 - Qiita
参考資料がすべて英語なので、日本語で情報がまとまってる場所が欲しいと思いこの記事を作りました。「俺もっと便利な機能知ってるぜ！」「こういうことできないの？」って思った人はコメント/編集リクエストをくれると僕の幸せのステージがどんどん上がります。 DevToolsの起動するショートカットキーは？ 開くだけ F12, Ctrl + Shift + I (Win, Linux) Opt + Cmd + I (Mac) 要素の検証(Inspect Element)と同じ状態で開く Ctrl + Shift + C (Win, Linux) Shift + Cmd + C (Mac) Consoleタブが開いた状態で開く Ctrl + Shift + J (Win, Linux) Opt + Cmd + J (Mac) DevToolsって下じゃなくて右に持ってこれないの？ Dock To Righ
Chrome の拡張機能でogpとかを確認するのを作ってみた - めも帖
Chrome の拡張機能でogpとかを確認するのを作ってみました。 確認できる項目は、 ogp:title ogp:url ogp:description ogp:image canonical title description keywords ogpの状態を確認するのが、HTMLを見たり、facebookのツールで確認したり（これが一番確実なんですが）するのが面倒になりました。そこで、Bookmarklet（ブックマークレット）でやってみようとしていたんですが、Chrome の拡張機能の方が、見やすいかも？なんて思って作ってみました。 「WEB+DB PRESS Vol.72」に「Backlog/Cacoo開発ノウハウ大公開」という特集があり、何かあると「Chrome の拡張機能で...」という解決方法を見ると、これはこれでアリなのかなあ...と思っていました。問題解決の為にちょっと
CSS Filter Effectsの使い方
こんにちは、橋本です。 今日は最新版のChromeとWebkit(Nightly Build)で実装された「CSS Filter Effects」の使い方について書いていきたいと思います。 途中のサンプルは、最新のChromeもしくはWebkitを使って見てみてください。 また、サンプルではおなじみの麦わら帽をかぶった女性の画像を使っています。 この画像の女性はレナという方だそうで、この画像は元々はプレイボーイ誌に載っていたヌード写真の一部だそうです。 wikipedia: レナ (画像データ) 「CSS Filter Effects」とは、簡単に言うと「CSSで画像に対して画像処理フィルタを適用しちゃおう！」というものです。 Photoshopの画像処理フィルタのようなものだと思っていただけるといいかと思います。 具体的には、以下のようなフィルタが実装されています。 ・色相・明度・彩度
Chromeに「CSS Filter Effects」が実装
Google Chrome runs web pages and applications with lightning speed. 6月4日(米国時間)のChromium公式ブログにおいて、「CSS Filter Effects」が紹介されている。「CSS Filter Effects」は、W3Cが3月末に公開したドラフト仕様である「Filter Effects 1.0」を、ChromiumのWebKitに実装したもの。最新のChromium 19で利用できる。 Chromiumに実装された「CSS Filter Effects」は現在、グレースケール[grayscale()]、セピア[sepia()]、彩度[saturate()]、不透明度[opacity()]、輝度[brightness()]、コントラスト[contrast()]、ぼかし[blur()]、反転[hue-rotate
Chromeで超簡単にUser Agentを変える方法 :: 5509
@hokaccha に言われて便利すぎて脳みそ飛び出るかと思った途中から嘘です 以下、見たことのある内容が続きます 全然気がつかなかった・・・いつからだろう・・・ ＞ 17からだそうです Chromeにビルトインされてるのですぐ使えます。 ちなみに、キャプチャはChromeのdev版なのでstable版は少し違うかもしれません。stable(Macの17.0.963.46)でもOverride User Agentの項目あるのは確認してます。 通常はもちろんユーザーエージェントはChromeですが、Cmd+Option+I などでインスペクタを開くと 右下にギアアイコンがあって、そこからインスペクタのSettingが開けます すると Override User Agent という項目があるので チェックすると、よく使いそうな User Agent 一覧がプルダウンで開きます 試しに iPh
Google ChromeのJavaScriptデバッガの進化がすごい - os0x.blog
Chrome版のFirebugことGoogle Chrome Developer Toolsですが、以前gihyoで解説したときよりさらに便利になっているので、少し紹介します(元はWebKitなので、そのうち(近いうちに)Safariでもそれなりに使えるようになるはずです)。 圧縮されたコードの整形 まず、目立つところからいきましょう。ちょうど先日更新されたChromeのdev版(12.0.742.0)に搭載されたばかりの機能で、minifyされているJavaScriptコードを読みやすいように整形して表示してくれるというものです(IE9の開発者ツールにも実装されている機能です)。 例えば、Google Analyticsのコードは圧縮されていて普通は読めません。 しかし、Chromeのデベロッパーツールなら、 このように整形してくれます。 やり方は簡単で、デベロッパーツールのScript
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blog.fumiz.me/2011/08/27/chrome-extension%E3%81%A7%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E6%9B%B4%E6%96%B0%E3%82%92%E7%9B%A3%E8%A6%96%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B/
「保存する」のちょっといい UI - トメトメボンド
CSSだけで画像を白黒に！Chromeに実装された「CSS Filter Effects」の使用例
Google Chrome Developer Tools入門 in DevFestX Sapporo
作業効率が10倍アップする Chrome Developer Tools の使い方