CSSで円グラフや集中線が描けるconic-gradient入門 - ICS MEDIA
CSSのグラデーションconic-gradient()関数は、conic（円錐）の名のとおり、円錐状にグラデーションを描画するものです。conic-gradient()関数を使用すると、円錐状のグラデーションはもちろん、集中線や市松模様といった表現が手軽に実装できます。 ▼ conic-gradient()関数で実装したグラデーション例 ▼ conic-gradient()関数で実装した演出例 サンプルを別ウインドウで開く 本記事ではconic-gradient()関数の基本的な使い方を解説しつつ、応用的な表現やクロスブラウザ対応の方法を紹介します。 conic-gradient()関数の基礎 linear-gradient()関数・radial-gradient()関数との比較 CSSでグラデーションを実現する手段は次の3種類があります。 linear-gradient()関数： 直線状
気軽にデスクトップを録画して、コメントも入れられるChrome拡張機能 | ライフハッカー・ジャパン
家族にコンピューターのトラブルシューティングを頼まれ、詳しい友達に画面を見せながら状況を説明したい。ゲームをしていて、今から披露するスゴ技をサクッと録画したい。そんなときに便利なのが、Chrome拡張機能「Loom」です。 Loomは、ブラウザの特定のタブ、開いているアプリ、デスクトップ全体をシンプルに録画するための拡張機能です。インストールしてかんたんなセットアップを完了すると、Chromeのオムニバーの隣にLoomのアイコンが表示されるようになります。 Screenshot: David Murphy via LoomWebカメラ、画面、両方（左下に丸いウインドウで顔が入る）など、撮影元を選べます。下の画像は、両方を選んだ場合のスクリーンショットです。 Screenshot: David Murphy via Loomまず、録画対象として、デスクトップ全体かChromeのアクティブなタ
Webブラウザの操作をJavaScriptで自動化。Headless Chromeのフレームワーク「Puppeteer」がバージョン1.0に到達。ChromeのDevToolsチームが開発
UIを持たずスクリプトから操作可能なWebブラウザのHeadless Chromeを利用するためのフレームワーク「Puppeteer」がバージョン1.0に到達した。Webアプリケーションの自動テストなどに利用可能だ。 GoogleのWebブラウザ「Chrome」は、ユーザーインターフェイスを持たずコマンドラインやリモートデバッグ機能を通じてWebブラウザを操作できる「Headless Chrome」機能を備えています。この機能は2017年6月にリリースされた「Chrome 59」から実現されたものです。 Headless Chromeを利用すると人間がWebブラウザをマウスやキーボードで操作することなく、プログラムでHeadless Chromeを起動し、特定のWebページを読み込み、画面キャプチャの取得や、指定された場所をクリックし、値を入力し結果を取得する、といった操作を自動的に行わせ
どんどん便利になってるChromeの機能拡張！Web制作に便利な機能がまとめられた -CanvasFlip
DOMの構造を調査する、要素のサイズを測る、要素のみのキャプチャを撮る、画像ファイルを抽出する、カラーやテキストを編集するなど、これらWeb制作に便利な機能がまとめて、しかも高性能で快適に利用できるChromeの機能拡張を紹介します。 それぞれ単体の機能拡張を使用している人は、一つにまとめられて簡単だと思います。 CanvasFlip CanvasFlipの機能 CanvasFlipのインストール CanvasFlipの使い方 CanvasFlipの機能 CanvasFlipは先日リリースされたばかりの新しい機能拡張で、私も先週から使用していますが、かなり便利です。パネルのUIも操作しやすく、ページに表示されるハイライトやメジャーも見やすいと思います。 ページの基本情報。 指定した要素のプロパティを表示するインスペクタ。 インスペクタでスタイルを変更すると、すぐにページに反映されます。 メ
PAY.JP で Google Chrome の Payment Request API を使って決済する - PAY.JP Engineering Blog
こんにちは @wozozo です花金です。 Android の Google Chrome 53 以降、デスクトップ版の Chrome 60 以降では Payment Request API に対応しています。これに対応しているブラウザであれば、毎回クレジットカード情報の入力をすることなく Google Chrome に保存されているカード情報を使って簡単に決済を行うことが可能です。 まず前提として、Payment Request API が提供する機能は決済に必要なカード情報の受け渡しであり、カード情報を受け取ったにあとに実際に決済を行うためには PAY.JP のような決済ゲートウェイを別途利用する必要があります。 ECサイトによって必要な機能の違いはあると思いますが、クライアント側の実装は基本的に以下のコードだけで済みます。 (Google Developers のサイトにサンプルコー
Chromeのアドレスバーに「保護されていない通信」と表示される原因とその対策
Chromeで「保護されていない通信」という不安なメッセージが表示されるのはなぜ？ Google Chrome（以下、Chromeと略）でWebページを開いた際、アドレスバー（オムニボックス）内のURLの左側に「保護されていない通信」と表示されて不安に感じたことはありませんか？ この不安になるメッセージは一体何を表しているのでしょうか？ 本稿では、このように表示される原因と対策について説明します。 「保護されていない通信」と表示されるのはHTTPのせい ●HTTPは「保護されていない通信」 上記の「保護されていない通信」というメッセージは、「安全」ではない通信路でWebサイトと接続し、Webページを開いたときに表示される警告の一種です。具体的には、URLが「http://」から始まるHTTP接続のWebページでは、必ずこの警告が表示されます。 HTTPはWebサーバとクライアントの間でやり
2016年度版 僕が考えたChrome拡張機能を作るときのデザインパターン - Qiita
4年近く前の2012年に僕が考えたChrome拡張機能を作るときのデザインパターンというエントリを書きました。最近参加したイベントで「よういちろうさんの拡張機能の記事見て作ってみました〜」と声をかけてくれた人がいて嬉しかったのですが、2012年のそのエントリは、すでに内容が古くなってしまっています。最近の状況を踏まえて、内容を新しくした「2016年度版」を書いてみようと思います。 変更しようと思った点は、以下です。 prototype.jsは使わず、ECMAScript 2015で書く。 Background Page(常駐型)ではなく、Event Page(非常駐型)にする。 そもそも最初のコードセットは自分で書かない。 本文やコード的には、2012年度版をコピペしています。 （この投稿の内容は、自分のブログエントリと同じです。） 前にいくつかのChrome拡張機能を作っていて、すでに数
Chrome拡張「Scraper」でWEBページ情報を手軽にスクレイピングしてデータ化する方法
Scraperとは Scraperは、WEBページ上の規則性のあるデータを手軽に取得することができるChrome拡張です。 例えば、テーブルデータや、Aリンクデータ、のような特定のHTML要素に入っている情報を、片っ端から取得してテーブルデータ化することができます。 また、その取得したデータをワンクリックでGoogleスプレッドシートに保存することができます。 テーブルデータのスクレイピングは以下の動画を見た方が分かりやすいかも。 以下では、その使い道などをいくつか考えてみました。 テーブルデータの取得最もオーソドックスな使い方と言えば、動画にも出てきたテーブルデータの取得です。 例えば、信長の野望の以下のような武将データテーブルがあったとします。 これを、以下のように選択して、Chromeの右クリックメニューから「Scrape similar（似たものをスクレイプ）」を選択します。 する
超見やすい！Chromeのデベロッパーツールが劇的に見やすくなる拡張機能｜男子ハック
黒背景でハイライト表示！デベロッパーツール用のテーマが拡張機能として利用可能！うぉぉ！こんな拡張機能があったなんて、もっと早く知りたかった！と思う人が続出しそう（？）ですが、Google Chromeのデベロッパーツールを物凄く見やすい配色に変更するテーマファイルのChrome拡張機能を試してみました！ 今回試してみた拡張機能は「DevTools Theme: Zero Dark Matrix - Chrome ウェブストア」という拡張機能。同様のデベロッパーツールのテーマを変更する拡張機能は他にもありますが、配色の違いなので好みで選択するのが良さそうです。 下記の画像が通常のデベロッパーツールを開いた画面。コードはハイライトされていますが、白背景だと見づらいです。 そこで「DevTools Theme: Zero Dark Matrix - Chrome ウェブストア」を利用すると以下の
Emacs 設定いろいろ [Emacs24 (Cocoa Emacs) on Mac OS X]
年が明けたかと思っていたら、気がつけば 1 月が終わってしまいましたね。 久しぶりの投稿ですが、今回は Emacs ネタで。 Emacs に触り始めたのはもう 10 年以上前でしょうか。当時は Emacs20 とか 21 ぐらいでしたかね。古いバージョンのまま 6,7 年ぐらい使っていましたが、学生から社会人になったり環境が変わったりで 1 年ぐらい触る機会なくなってたのが、個人で自宅用に MacBook Air 買ったのキッカケでまたメインのエディタとして使うようになりました。慣れもあるのでしょうがやはり使いやすいですね。 現在使ってるのは Emacs24 (Cocoa Emacs) で最近バージョン 24.2 に更新しました。久しぶりだったこともあって設定を見なおしたり評判のいい機能を探して導入したりしました。ファンも未だに多いせいか、いろいろ進化してますね。ありがたいです。 せっかく
![Emacs 設定いろいろ [Emacs24 (Cocoa Emacs) on Mac OS X]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a836fede0cc6ad729fc0675242dbb21678e4750f/height=288;version=1;width=512/https%3A%2F%2Fblogger.googleusercontent.com%2Fimg%2Fb%2FR29vZ2xl%2FAVvXsEgk4ZANC3ROnfGgLij4U4rOfu5WK8Jh6-1DN6Lfvb6sFs-E_XivsaQa5uy5t-2IklLolbCJ9GCiA2ZSc_hV5vF3rX7Kva5_5oIIFv-PhDuaLy9Y8-AOFWCvBCQ5DBoJAUsarwTjFkk8J1s%2Fw1200-h630-p-k-no-nu%2Femacs.jpg)
Chrome Packaged Apps」の作り方を学んでみた その１ ～ Chrome Packaged Appsって何ができるの？ ～
前回のABC2013Springの基調講演で丸山先生が「AndroidとChromeの統合の流れ」についてお話されてから，早数ヶ月が経ち，5月以降は具体的にPackaged Web Appsの重要性について語られて，先日まで，全国のAndroidの会 地方支部で講演行脚を行っていただいておりました．この大胆予想に乗っかって私は，「Chrome Packaged Apps」の作り方を本当に一から学んでみました．環境構築から実際に何ができるのかを超初心者として皆さんにお伝えできればと思います． ターゲット： Chromeに関しては単なるユーザで開発は超素人... でもちょっと最近気になる存在って思っていらっしゃる方Read less
Googleアナリティクスのレポートを簡単に見る、ブロガー必須のChrome拡張機能「Client for Google Analytics」 | Heartlogic
Googleアナリティクスのレポートを簡単に見る、ブロガー必須のChrome拡張機能「Client for Google Analytics」 2013/9/15 2016/7/3 ネットよもやま話 Googleアナリティクスのレポートは見たい。でも毎度ログインするのはめんどい、という人向けのアプリは複数ありますが、多くは有料です。 ですがGoogle Chromeの拡張機能として公開されている「Client for Google Analytics」は無料で、PV、検索キーワード（オーガニック検索）、参照元サイトなどをこまめにチェックしたいブロガーには、十分な機能を持っています。 Client for Google Analytics インストールは、上記のページから行います。 インストールに成功するとこのように拡張機能のアイコンが表示され、下記のようにアカウントとプロファイル（ビュー）
Desktop Notifications : Androidの通知をデスクトップ版Chromeに転送するアプリ | juggly.cn
Android端末の各種通知をデスクトップ版ChromeやFirefox上で確認できる「Desktop Notifications」を紹介します。 Androidスマートフォン・タブレットのメールやアプリからの通知は基本的にその端末でしか確認できませんが、今回紹介する「Desktop Notifications」を利用すると、パソコンでの作業中に通知が鳴るたびにAndroid端末を手にとって通知パネルを開くことなく、どのような通知があったのかを確認できるようになります。 「Desktop Notifications」のセットアップ まず、Android端末側にGoogle Playストアから「Desktop Notifications」アプリを、デスクトップPCにChromeウェブストア・Firefox Add-onsから拡張機能「Android Desktop Notifications
Web屋ならチェックしておきたい！作業効率が激変するChrome DevToolsの便利な使い方まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Web屋ならチェックしておきたい！作業効率が激変するChrome DevToolsの便利な使い方まとめ こんにちは、デザイナーの王です。 今回の記事では、ChromeのDevTools（デベロッパーツール）について、「多分、周知されていないけど、使わないともったいない！」的な機能を紹介させて頂きたいと思います。 フロントエンジニアにも、デザイナーにも、きっと効率アップに繋がる小技が見つかるはずです。 開発者なら「Chrome Canary」を使おう！ みなさんはChrome Canaryを使っているんでしょうか？一般向けにリリースされている安定版であるChromeより、ほぼ毎日アップデートしている「Canary」ビルトを選ぶ理由があります。 それは、開発者向けの新機能がいち早く利用できるからです！リリースがノロノロしているChromeを使ってたら、いつまでも最新の便利な機能の恩恵が受けられ
あらゆるRESTのテストが出来るWEB開発者用Chromeアプリ「Postman」:phpspot開発日誌
Postman あらゆるRESTのテストが出来るWEB開発者用Chromeアプリ「Postman」。 通常のHTTP、Basic認証、ダイジェスト認証、OAuth等のテスト用クライアントとして活用できます。 HTTPであればGET、POST等のメソッドを選んで、任意のデータを送信することが可能。 返却値はHTMLでもJSONでもハイライトして見やすく表示してくれます。レスポンスBodyだけではなくヘッダーなんかも表示することができます。 Chromeアプリなのでとりあえず追加しておくだけでもしておくといいかも デザインがBootstrapベースでカッコよく使いやすいのも特徴 関連エントリ POSTやファイルアップロード等がPHPから簡単に行えるHTTPライブラリ「Unirest」
意外と知らない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.power APIが利用可能になりました
省電力を抑制するchrome.power APIが利用可能になりました Written on Jun 19, 2013. Posted in Chrome extension 「操作はしていないけれど、画面を表示しっぱなしにしておきたい」という場面があります。例えば、プレゼンテーションの真っ最中とか、電子書籍を読んでいる時などです。そのような種類のアプリや拡張機能をChrome向けに作った際に、 chrome.power APIを使うことで、一時的に省電力に入ることを抑制することが可能です。 Chrome 27から、アプリと拡張機能の両方でchrome.power APIを使うことができます。そのAPI Referenceを和訳してみましたので、下に掲載します。 ただし、あくまでこのAPIは「一時的に」使うべきです。省電力モードへの移行抑止は、最低限にとどめましょう。何のための省電力なのか
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chromeで開いてるページのリンクをエディタへ貼り付けるAlfred の WorkFlow を作ったった | 緑ナ日々)
PHP Console v3 Release (November 2013)
Themes for Web Developer's Toys - devthemez