世界中のあらゆる情報を検索するためのツールを提供しています。さまざまな検索機能を活用して、お探しの情報を見つけてください。
The Tabs API not only offers features for manipulating and managing tabs, but can also detect the language of the tab, take a screenshot, and communicate with a tab's content scripts. Permissions Most features don't require any permissions to use. For example: creating a new tab, reloading a tab, navigating to another URL, etc. There are three permissions developers should be aware of when working
概要 html5で追加された「WebRTC」の機能を使えば、ブラウザでWebカメラの映像を取得することができます。 今回はその映像を画像化します。 html5の「video」領域にWebカメラの映像を映し、それを「canvas」領域にコピーし、さらにそれを「img」領域に書き出します。 Webカメラの映像を映す WebRTCの「getUserMedia」というメソッドによってカメラにアクセスします。 現在はChrome、Firefox、Operaなどが対応しており、IEやSafariは未対応となっています。 以下のページから詳しい対応状況を見ることができます。 Can I use... Support tables for HTML5, CSS3, etc また、最近localhost以外のhttp通信では、カメラが起動しなくなりました。 localhost以外でこのメソッドを使用する場合
まさにQiitaに投稿したりする時に、ぱっとスクリーンショットをとって、ちょっと加工してアップします。 フォトショでもいいのかもしれませんが、そこまでヘビーな操作をするわけでもない。そんな時に使っているツール群を紹介します。 サイズを縮小したい これだけならMac標準のプレビューツールでできます。 右肩のかばんみたいなマークをクリックすると編集ツールが出てきます。 サイズ縮小だけでなく、文字を載っけたり枠で囲ったり投げ縄でくりぬいたりもできます。 以外と高機能 モザイクをかけたい そんなときはToyViewer。 https://itunes.apple.com/jp/app/toyviewer/id414298354?mt=12 App Storeから入手できます。 プレビューツールでできることも当然できます。 モザイクは、Menu > Effect > Noise/Mosaic で範囲
概要 Chrome extension を使って、Popup 部から HTML の DOM を操作してみる。 とりあえず背景色を変化させてみる。 ( 将来的には、コレをベースに色々操作できるように―― ) メモ Chrome extension についてググってみたところ、 extension から DOM 操作することは可能。 DOM 操作のためのサンプルについてググってみたところ、 content script から DOM 操作するサンプルは発見。 ブラウザアクションボタンから発火させて DOM を操作するサンプルもあった。 Popupで出したページから色々DOM操作するようなサンプルは見つからず。。⇒今回コレ!! 作成サンプル概要 Popup として Color Picker を出して、表示されているページの背景色を変更してみる。 フォルダ構成 : extension_sample
<img>要素 ⇔ Base64 相互変換についてのまとめです。注意点として、<img>要素 → Base64 の時は、Ajax同様に JavaScript のクロスドメイン制限があります。つまり、外部サーバーにある画像をBase64形式に変換することはできません。 <img>要素 → Base64 //===================================================== // <img>要素 → Base64形式の文字列に変換 // img : HTMLImageElement // mime_type : string "image/png", "image/jpeg" など //===================================================== function ImageToBase64(img, mim
以前リリースしたとあるサービスで、「一部の入力フォームを別ウィンドウをポップアップして入力させ、終わったらリンクをクリックして閉じる」という JavaScript の処理を入れていたのですが、なぜか2015年頃から Chrome で画面が固まってしまう不具合が発生しました。2014年の春にテストした時は問題なく動いていたのですが。 どうやらブラウザーのバージョンアップに伴い、正しく子ウィンドウを閉じるための方法が変化してしまったようです。今ならどう実装するべきなのかを、少し検証してみました。 再現方法 不具合は以下の流れで発生します。確認したブラウザは Chrome 39.0.2171.99m (Windows) です。 親ウィンドウにある <a onClick="window.open()"> リンクを叩き、子ウィンドウをポップアップさせる。 子ウィンドウにある <a onClick="
chrome 機能拡張の作り方を解説します Chromeの機能拡張については多くのページで解説されていますが、Chromeのバージョンアップに伴い、どうしても情報が陳腐化してしまいます。 また個別の機能については詳しい解説はあっても、全体を俯瞰する解説が見つけられず、結局は慣れない英語のドキュメントと睨めっこが必要でした。 そこでこのページでは、初めての方でも全体像を理解できるように、概略から解説します。実物の動作を見るのが一番理解が早いと思うので解説と合わせて機能拡張のサンプルも用意しました。 一連の投稿を応用して「公式ドキュメントを見れば、1人で機能拡張を作成することができる」ということを目標に進めていきます。 Chrome機能拡張について全体の目次 初めてでも理解できるようになる「Google Chrome機能拡張の開発」(このページ) 機能拡張を作成して、ブラウザで読み込み、デバッ
Node.jsとChromeの拡張機能を組み合わせることでサイト上で何かが起こった時にリアルタイムに通知を出す事ができるようになります。 例えば・・・ サイトで何かしらの申し込みがあった時にチームメンバーにお知らせをしたい サイトでデイリーの目標CV数に到達したときにお知らせをしたい などなど、、、 とりあえず今回はGitLabを使ってマージしたときにポップアップで通知がでるようなものを作成したいと思います。毎回ポップアップがでるのは鬱陶しい!という方はアイコンのバッチを変えたりとかでもいいと思います。 本当は拡張機能を公開とかできればいいんですが、お金かかるし、そこまで作り込んでいないので、断念。 超簡単な図 リクエストを受け付けるNode.jsサーバを用意 リクエストを受け付けるNode.jsサーバを用意します。 今回は node.js v0.10.26 express 4.9.0 で
タイトルどおりのことをやった際の実装時メモ。 Canvasから画像を取得 2通りの方法が見つかった。 Base64への変換 Blobへの変換 Base64への変換 canvas.toDataURL()を呼び出すだけで取得可能であるが、 画像サイズに比例した巨大な文字列となり、変換によって元サイズより33%データ量が増える。 取得したBase64を<image>のsrcに指定すれば画像表示され、 <a>のhrefに指定すればリンククリックでダウンロードできてこれはこれで便利。 Blobへの変換 canvas.toBlob()を呼び出すだけで取得可能。 Blob形式で表現すれば、createObjectURL(blob)によりURL参照が取得できるので、 画像サイズに依存せずメモリ使用量を抑えられるらしい。(未確認) これは便利と思いきやcanvas.toBlob()はFirefoxでのみサポ
Twitter Bootstrap 3.0.0のcontainer、row、col(Bootstrap 2.xならspan)クラスの使い方を説明する。公式サイトでも例示されているが、体系だった説明がされていないのでBootstrap初心者の役に立つはずだ。 1. containerは中身をセンタリングし幅を固定するcontainerクラスは中身を画面の中央に幅を固定するクラスだということを理解しよう。containerクラスはBootstrapのレイアウトを使う上でルートとなるクラスである。 2.で述べるcontainerクラスより幅の広いレイアウトをする場合を除いて、Webページのほとんどの内容をcontainerクラスの内部に書くことになるだろう。 containerクラスはWebページの中に複数個作っても全く構わない。また3.で詳しく述べるが、グリッドシステムを使わなくて良いのなら、
Firefox11になってとっくにWebSocketのベンダープレフィックスとれてたし、 バイナリデータの送受信の辺りがどうなってるか確認してみた。 確認したブラウザはFirefox11.0とGoogle Chrome18.0.1025.162。 サーバ側 node.jsで実装する。 httpサーバ用にconnectを使って、WebSocketサーバはWebSocket-Nodeを使う。 それぞれnpm install connect、npm install websocketでモジュール入れる。 サーバ側のコードは次の通り。 // http server var connect = require('connect'); var httpServer = connect() .use(connect.static(__dirname + '/webroot')) .listen(1234
Node.js で WebSocket-Node を使って実装しました。 転送するめぼしい画像が見当たらなかったので、デスクトップをスクリーンキャプチャして転送してみました。 ブラウザはChrome 17以上か、Firefox 11以上が必要です。サーバ側は scrrencapture コマンドを利用している関係で Mac OS X限定です。 デモ 上半分が転送元のデスクトップ、下半分が転送された画像をブラウザで表示したものです。ニコ動のコメントの飛び具合を見るとわかると思いますが、800*600の解像度の画像を、横640に縮小して転送して、1FPSくらいです。(※ これはWebSocket の限界ではありません。速度は向上させる余地はかなりありますが、今回の本質ではないので気にしないことにします) ソースは github に置いてあります。 hakobera/screencast · G
windowオブジェクトのscrollBy()メソッドは、スクロール位置を、現在位置から指定距離だけ移動します。 スクロールの移動距離には、マイナスの値も指定できます。 指定したスクロール位置がページサイズを超えている場合には、指定が無効となります。 window.scrollBy はウィンドウ表示位置を相対的に移動する際に使用します。 絶対位置に移動する際には window.scroll や window.scrollTo を使用してください。 ■構文・引数・戻り値 HTML + JavaScriptソース <html> <head> <script> function sample1() { window.scrollBy(0,50); } function sample2() { window.scrollBy(0,-100); } </script> </head> <body>
twitter bootstrapので画像をレスポンシブ指定(クラス"img-responsive")したら中央寄せが効かなくなってしまった。 ↓コードはこんな感じ <div class="text-center"> <img src="./image.jpg" class="img-responsive" alt="hoge"> </div> どうやらクラス"img-responsive"を指定すると、横幅のmarginが調節されて左寄せになってしまう様子。 以下のようにstyleでmargin autoを指定したらちゃんと中央寄せになった。 <img src="./image.jpg" class="img-responsive" alt="hoge" style="margin: 0 auto"> ※P.S. そもそも「text-center」はこんな風に画像に対して使っちゃいけない
初めてChrome Extention作ってみました。 https://github.com/NewGyu/redmine_tickets_printable そもそも論的なところはこんないいまとめ http://developer.chrome.com/extensions/overview.html http://dev.screw-axis.com/doc/chrome_extensions/guide/ があるので割愛して、自分が詰まったところをメモ代わりに書いておきます。 ざっくり要件 今回作ったのはRedmineのチケット一覧を付箋みたいにブロックを並べた見た目にするものです。 Redmineのチケット一覧はリスト形式で、それをA4印刷して貼りだすと小さくて読めないので大きく、付箋っぽくしようというものです。 before after そして、今回はブラウザアクションではなくペ
スピードの選択 Linear easeInQuad easeInCubic easeInQuart easeInQuint easeInOutQuad easeInOutCubic easeInOutQuart easeInOutQuint easeOutQuad easeOutCubic easeOutQuart easeOutQuint ダミーテキスト ダミーテキスト ダミーテキスト ダミーテキスト ダミーテキスト ダミーテキスト ダミーテキスト ダミーテキスト ダミーテキスト ダミーテキスト ダミーテキスト ダミーテキスト ダミーテキスト ダミーテキスト ダミーテキスト ダミーテキスト ダミーテキスト ダミーテキスト ダミーテキスト ダミーテキスト ダミーテキスト ダミーテキスト ダミーテキスト ダミーテキスト ダミーテキスト ダミーテキスト ダミーテキスト ダミーテキスト ダミーテ
JavaScriptだけでページ内をゆっくりと移動する、スムーススクロールを実装する方法を説明します。jQuery不要です。
何を作ったか? 以前、Youtubeの埋め込みコードに開始時間を設定する拡張を書いた。 YouTubeを途中再生できるように埋め込みコードを改変するChrome拡張をつくった - not good but great Embed Screen Jump Code for YouTube™ - Chrome ウェブストア それの技術的な解説を書こうと思う。 アプリの設計 拡張の作り方、用語の解説 構成や、拡張の作り方はこのページを参考にした。 2013-09-09 アプリの動作手順 おおまかな流れは次のようになる。 行程1.Youtubeの視聴ページに行くと、URLバーの端にPage Actionのボタンが現れる。 行程2.ページ読み込み終了後、Content Scriptを実行し、Youtubeの動画オブジェクトを取得し、現在の再生時間を得る。 行程3.Content ScriptからBa
Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system. Overview Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development. HTML5 doctype Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at th
p { margin: 4px; font-size:16px; font-weight:bolder; } .blue { color:blue; } .under { text-decoration:underline; } .highlight { background:yellow; } <p class="blue under">Hello</p> <p class="blue under highlight">and</p> <p class="blue under">then</p> <p class="blue under">Goodbye</p> $("p:even").removeClass("blue");
前回はWebアプリの検索ボックスとコンテキストメニューの拡張を通して、OmniboxとContext Menusについて詳細を解説しました。今回は、任意のWebサイトでJavaScriptを実行できるContent Scriptsについて解説していきたいと思います。 ほかのWebサイトと連携する みなさんは、Webアプリを使っていてほかのWebサイトと連携して欲しいと思ったことはありませんか。例えば、あるWebサイトから情報を抜き出して欲しかったり、もしくはユーザーインフェースを変更・追加して直接Webアプリを操作したかったりといった内容です。それらは、Content Scriptsの仕組みを利用することで実現可能です。Content Scriptsは、対象のWebサイトで任意のJavaScriptを実行することができます。 今回の機能追加では、GoogleマップのWebサイトと連携して目
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く