ページ内のYouTube動画を順番に再生してくれるChrome拡張機能「Play all video」｜男子ハック
開いているページの上から順番にYouTube動画を自動再生！超便利！YouTube動画が複数貼られている「まとめ記事」なんかを上から順番に見て行きたいと思ってもいちいちクリックして再生/ストップするのは面倒。 特に作業用BGMとして再生している時なんかは、いちいちページを表示して再生ボタンを押すのは本末転倒。そうゆう人に超便利なChrome拡張機能です。 上記より拡張機能をインストールすると「＞」みたいなボタンが表示されるので、YouTubeがたくさん貼られたページを表示してクリックするだけ。 みんな大好き「Mr.Children」のNAVERまとめ記事で試してみます。 【動画】永久保存版! Mr.ChildrenのLiveパフォーマンスまとめ - NAVER まとめ するとこんな感じに表示されます。あとは再生ボタンを押すだけ。 ちなみに既にYouTubeで削除されてしまっていて再生するこ
Greasemonkey - Google Chrome まとめWiki
r30925で拡張機能形式への変換が導入されました（r31179でバグ修正が行われています）。 Chromium Build 3687での例： Chromium-rel-xp:3687をインストール C:\scriptsへスクリプトを置く Chromium(Chrome.exe)のショートカットを作成し、プロパティ開いてリンク先の「～.exe"」の後に 「 --enable-greasemonkey」を付け足す（先頭に半角スペースを含む） 作成したショートカットからChromiumを実行 Chromium Build 7690以降(12356でも確認)では有効化の方法が変わっています。 Chromium-rel-xpをインストール C:\Documents and Settings\<username>\Local Settings\Application Data\Chromium\Us
Google Chrome Extensions (拡張機能)の作り方
唐突にGoogle Chromeのエクステンション（拡張機能）が作ってみたくなりました。 作り方を調べたときの過程をメモしておきます。 参考サイト エクステンションの作り方を解説しているサイトはこちら。 http://code.google.com/chrome/extensions/index.html 一番簡単なチュートリアルを写経してみます。 Tutorial: Getting Started (Hello, World!) http://code.google.com/chrome/extensions/getstarted.html ちなみに、試したときのChromeのバージョンは「4.1.249.1064」です。 チュートリアル まず、作成する拡張機能の設定ファイルやhtmlを保存するフォルダを作成します。 今回は、「C:\chrome_extensions\tutorial」
JavaScriptエラーを表示・確認する方法のまとめ
JavaScriptエラーを表示・確認する方法をまとめました。 １．はじめに ブラウザでページを表示したときに正しく表示されない、あるいはjQueryで設置したパーツなどが動作しない場合、JavaScriptエラーが発生している可能性があります。 JavaScriptエラーが発生しているかどうかを確認するためにはエラーを表示するためのコンソールを開く必要がありますが、コンソールの開き方が分からなかったり、ブラウザで操作方法も異なります。 このエントリーでは、以下のブラウザを対象にしてJavaScriptエラーの表示・確認方法を解説します。 Google Chrome Firefox IE ビギナーの方向けの内容です。 ２．エラーになるJavaScriptのサンプル エラーになるJavaScriptのサンプルとして、次のサンプルを用いて解説します。このJavaScriptを実行するとシンタッ
Web屋ならチェックしておきたい！作業効率が激変するChrome DevToolsの便利な使い方まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Web屋ならチェックしておきたい！作業効率が激変するChrome DevToolsの便利な使い方まとめ こんにちは、デザイナーの王です。 今回の記事では、ChromeのDevTools（デベロッパーツール）について、「多分、周知されていないけど、使わないともったいない！」的な機能を紹介させて頂きたいと思います。 フロントエンジニアにも、デザイナーにも、きっと効率アップに繋がる小技が見つかるはずです。 開発者なら「Chrome Canary」を使おう！ みなさんはChrome Canaryを使っているんでしょうか？一般向けにリリースされている安定版であるChromeより、ほぼ毎日アップデートしている「Canary」ビルトを選ぶ理由があります。 それは、開発者向けの新機能がいち早く利用できるからです！リリースがノロノロしているChromeを使ってたら、いつまでも最新の便利な機能の恩恵が受けられ
TaKUMA's art World
2011/11/21 MacBook Air (Lion)に入れたソフト メールで送信BlogThis!Twitter で共有するFacebook で共有する 後期に入って研究室配属があった。 4年生である今は、来年の卒研に向けた勉強をする期間だ。 UIなどに興味があるので、一番近いことができるであろうユビキタス系の研究室を選んだ。 で、MacBook Airが配布された。 母艦のMBPはSnow Leopardなので、LionのMacは初めて手にすることになる。 Adobe CSのソフトとか動かなくなるのが怖いのでアップグレードしてなかったのだ。 手にして早々、色々入れてみた。 初Macな研究室仲間達のために、入れたソフトを覚え書きしてみる。 （※アスタリスク付きのものは有料） 言わずもがな： Google Chrome Skype Dropbox (オンラインストレ
jQueryのソースコードを読むための参考サイト２０選 · DQNEO日記
古いバージョンも参考になる 最新バージョンはコードが1万行くらいあってなかなか大変です。 読み疲れたら、古いバージョンを見て気分転換しましょう。 古いバージョンは実装がシンプルなので、全体像を把握するにはよいかもしれません。 バージョン1.0 (わずか1800行。ver1.7の５分の１です) http://code.jquery.com/jquery-1.0.js バージョン1.1 (2100行) http://code.jquery.com/jquery-1.1.js バージョン1.2 (2900行) http://code.jquery.com/jquery-1.2.js バージョン1.3 (4200行) http://code.jquery.com/jquery-1.3.js バージョン1.4 (6000行。セレクタエンジンがSizzleになりました。) http://code.jq
Web Design KOJIKA17
1年に1回は更新する Container Queriesの沼へようこそ2023-03-08UAスタイルシートとリセットCSSとは - 20232023-02-26脳内フィルターで見るCSSレイアウト2022-11-22劇薬の The New CSS Reset2021-07-20Sassを@importから@useに置き換えるための手引き2020-05-26 / 2022-09-29Container Queriesという手法 / CSS Advent Calendar 20192019-12-23レスポンシブwebデザインのコーディングでやってること2018-12-28宣言ブロックのCSS設計2017-07-18Webデザイナーに最低限知っておいてほしい、検索と置換(正規表現)2016-05-21画像をCSSで斜めにマスクした時の知見2015-04-10CSSで2カラムを作ってみる201
自分のサイトの表示を5種のブラウザでチェックできるネットサービス「browserling」
サイトのURLを入力すれば、わざわざ全種類・全バージョンのブラウザ環境をそろえることなく、、無料でバージョン別にInternet Explorer・Google Chrome・Firefox・Safari・Operaでの表示がチェックできるネットサービスが「browserling」です。操作方法は以下から。 browserling - interactive cross-browser testing https://browserling.com/ ◆操作方法 上記サイトにアクセスすると、このような画面が表示されます。 使い方は簡単、まず上部に「表示させたいサイトのURL」を入力します。今回はGoogle Chromeのバージョン14.0でサイト表示を確認したいので「Google Chromeのアイコン」・「14.0」の順に選択してから、「run」をクリック。 そうすると、以下のようにG
これはすごい！Chromeで最強のコマンド環境を構築する方法「gleeBox＋Quix」 - Chrome Life
皆さんはキーボード派ですか？マウス派ですか？ 筆者のようにプログラマの方であれば、キーボード派の人が多いと思います。 マウスでグリグリ操作するよりも、ショートカットキーを使いこなす方が何倍も早く操作できることを知っているはずです。 ターミナルをよく開いている人は1日の大半はキーボードだけで生活しているでしょうw しかし、そんな人でもブラウザの前では、キーボードだけでは効率良く操作できないので、仕方なくマウスで操作するしかありません。 そこで今回ご紹介するのは、Chromeをコマンドで操作できるようにしてくれるキーボード派のためのエクステンション「gleeBox」です。 「gleeBox」は、Chrome上に入力ボックスでコマンドを打ち込むだけで様々な操作が可能になるエクステンションです。 何がそんなにスゴイかというと、ほとんどマウスを使わなくても操作ができるように様々なコマンドが用意されて
「Google Chrome×初音ミク」で2012年を予測する
1974年、大阪市生まれ。99年、早稲田大学政治経済学部卒業。お茶の水美術学院講師を経て、2000年より雑誌「広告批評」（マドラ出版）に在籍。08年、編集長就任。10年、同社退職後、雑誌・書籍・ウェブサイトの編集、企業の戦略立案およびPRコンテンツやイベントの企画・制作を手掛けるほか、講演活動なども行っている。 元「広告批評」編集長・河尻亨一の「月刊マーケティング時評」 元「広告批評」編集長・河尻亨一氏が、ヒット商品、イケてる人や企業、話題の現象……などなど、「ヒト・モノ・コト」にまつわる旬のテーマをマーケティングの視点から読み解く時代批評です。 バックナンバー一覧 一見意外なものの組み合わせが、思わぬヒットを生むことがある。それはマス広告だけでは実現しない「ふたを開けてみると」という効果の産物であることが多い。こんな時代に企業が継続的にマーケットを獲得するにはどうすればよいだろうか。「広
ブロガー必須！のChromeエクステンション「Chrome Keyconfig」の設定方法
ブログを書くなら余計な手間は省きたい。 それはこの世に生きとし生けるもの、万物全ての祈り・・・。そんな気がする。 と、言うわけで今日は劇的にブログ作成を楽にしてくれるChromeエクステンションのご紹介。 ショートカットキーでブックマークレットを呼び出すというエクステンションで、Make LinkジェネレーターはFirefoxのMake Linkのように自分用にカスタマイズしたHTMLタグを吐くブックマークレットをつくってくれるツールです。これを組み合わせることで超高速にHTMLタグを作成できます。 例えば「Shift」+「L」でリンクタグを作成出来たり、「Shift」+「Q」で選択した文章で引用タグを作成出来るのです。9つの中で一番おすすめ! 以前、上の記事を読み、一番最初に紹介されているChromeエクステンション「Chrome Keyconfig」を導入しようとしたのですが、なるほど
Google Chromeに乗り換えて1年、私がWEB活動に欠かせない拡張機能11個まとめ | フリーソフトラボ.com
昨年のちょうど今頃の時期に、FirefoxからChromeに乗り換えたので導入した拡張機能＋周辺ツールまとめという記事をエントリーしましたが、今回、実際に筆者がGoogle Chromeを本格的に使い始めて一年と少しが経過しました。 そこで、上記エントリーでは紹介しなかった、その後新しくインストールした拡張機能や、今はもう使わなくなって消してしまった拡張機能もいくつかあるので、改めて現在愛用している拡張機能をまとめてみます。 AutoPagerize for Chrome Greasemonkeyで超人気のスクリプト「AutoPagerize」のChrome用拡張機能。Googleの検索結果など、ページごとに分けられたウェブページを自動で読み込んで、継ぎ足し表示してくれます。 Readmine 筆者も愛用している”あとで読む”系サービス「Read It Later」のChrome用クライア
Google Chrome版Firebug：デベロッパーツール取扱説明書 記事一覧 | gihyo.jp
運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
第1回 詳説：デベロッパーツールの使い方 | gihyo.jp
こんにちは、Google Chrome ExtensionsのAPI ExpertとChromium-Extensions-Japan管理人を担当している、太田と申します。いつもはクロスブラウザで連載していますが、今回はGoogle Chromeのデベロッパーツールについて紹介します。 昨今のJavaScript、HTML、CSSブームの背景には、開発環境、特にFirebugに代表されるようなデバッグツールの目覚しい発展が大きく貢献していると思われます。その反面、高機能化するデバッグツールの各種機能を使いこなすことが難しくなってきているという現実もあります。そこで、今回から全4回でGoogle Chromeに搭載されているデベロッパーツールの使い方とそれを利用したデバッグ・チューニングのノウハウをお届けしたいと思います。第1回はデベロッパーツールの機能紹介と基本的な使い方を解説します。 な
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
知っているとちょっと便利になるChrome拡張機能10個まとめ｜男子ハック
イースト、ネットなしで単独動作する“おひとり様Wiki”「CliWiki」無償公開 ～HTML5技術普及支援でオープンソースとしてソースコードも公開
css-lecture.com