Google Chrome拡張の作り方（その1：マニフェストファイル作成とパッケージ化）
Google Chrome拡張の作り方を紹介します。 １．はじめに 6月11日に「Data API & Chrome 勉強会」、6月28日に「MT Hackathon @ Six Apart New Office」が開催されるようです。 MT Hackathon @ Six Apart New Office ～Data API で Chromeアプリを作ろう～ がどちらも参加できそうにないので、乗り遅れないようChrome拡張について調べてみることにしました。 Chrome拡張は、HTML/CSS/JavaScript（jQuery）の知識があれば作成することができます（実際にはChrome Extensions APIを利用することになります）。 それぞれについて1つのエントリーで解説するとかなり長くなるので、ここでは次の手順に絞って解説します。 マニフェストファイルを作る 拡張機能をパ
ブラウザの操作をマクロ化する「iMacros」
ブラウザの操作をマクロ化する「iMacros」を紹介します。 １．はじめに ブラウザで操作を行う場合、ある決まった手順を行うことがあると思います。 簡単な例では、ブログを投稿する場合のブログツールへのログインから新規作成画面の表示などですが、より複雑な操作を日常的に行なう場合、結構面倒に感じることがあると思います。 本エントリーで紹介する「iMacros」を利用すれば、そういったブラウザ上の操作をマクロ化することができます。 iMacrosはGoogle Chrome/Firefox/IEのアドオンとして提供されています。 クリック動作やフォームへの入力などは、ブラウザの座標ではなくHTML要素や属性を探索して実行しているので、精度はそれなりに高いようです。 またJavaScriptなどによる制御も可能なようです。 ということで今回はインストールから基本な操作について紹介し、高度な機能につ
CSSのレイアウトの崩れを見つける時に役立つChromeの機能拡張 -Pesticide
ウェブ制作時の困ったは、CSSのレイアウトが思うようにいかない時。 そんな時に役立つ、ページ上の全ての要素のアウトラインを要素ごとに異なるカラーで表示する便利ツールを紹介します。 PesticideはChromeの機能拡張だけでなく、外部スタイルシートとしても提供されているのでローカル環境でブラウザを問わず利用できます。 Pesticide Pesticide -GitHub Pesticideのインストール Pesticideの使い方 Pesticideのインストール Pesticideは2種類、利用方法があります。 Chromeの機能拡張 ローカル環境での使用（スタイルシートファイル） Chromeの機能拡張 下記ページからPesticideをChromeにインストールします。 Pesticide -Chrome ウェブストア インストールが完了すると、上部のバーにPesticideボ
写真や画像上の文字列を選択してコピペ可能にするChrome拡張機能「Project Naptha」
写真やJPEG画像、ダイアグラム、スクリーンショット上にある文章など、通常はコピー＆ペーストができない文字列を選択＆コピー＆ペースト可能にするGoogle拡張機能が「Project Naptha」です。 Project Naptha http://projectnaptha.com/ 実際にどういうことができるのか？ということは、以下のGIFアニメを見るとわかります。 拡張機能を使うには、まず「Add to Chrome」をクリック。 「Chromeに追加」という画面が出るので「追加」をクリックします。 拡張機能が追加されると、アドレスバーの横に「Project NapthaがChromeに追加されました」と表示されます。 ということで、実際にGIGAZINEを開いて試してみます。画像内にある「Gunosy」という文字を選択して右クリックでコピー。この時、文字が少しナナメになっていても問題
無料でインストール＆ログイン不要で使えるPC画面共有ツール「sgSCREEN」
世の中には便利なソフトウェアがたくさん存在しますが、その多くは使用するまでにインストールやログインの作業が必要になってきます。最近はアカウントを作成する代わりに各種SNSアカウントでログインさせようとするサービスも少なくありませんが、それらを使う度に自分のSNSアカウントで無駄な投稿が行われたりして釈然としなかったりします。こういった面倒な作業なしで即使用可能になるのが「sgSCREEN」で、ソフトウェアをインストールしたり使用する度にログインしたりする必要は一切なく、複数台のPC画面を共有することが可能です。 sgSCREEN : Simple screen sharing https://screen.sonicgarden.jp/ 実際にsgSCREENを使ってPC画面を共有すると以下のようになります。 「sgSCREEN」を使ってPC画面を共有するとこんな感じ - YouTube
Googleカレンダーをより便利に使えるChrome拡張機能5選＋α
GoogleカレンダーをGoogle Chromeで利用する場合に便利な5つの拡張機能と、Labsが提供している機能をまとめて紹介する。 プライベートはもちろんビジネスにも使われるケースが多いGoogleカレンダー。スマートフォンの普及で外出先からも手軽に確認できるようになったことで、活躍の場はますます広がりつつある。今回は、そんなGoogleカレンダーをGoogle Chromeで利用する場合に便利な5つの拡張機能と、Labsが提供している機能、合わせて6つをまとめて紹介する。 （1）住所を入力すると自動的に地図にリンクを張る「CalendarMapper」 Googleカレンダーにスケジュールを登録する際、「場所」欄に住所を入力することで自動的にGoogleマップにリンクを張れる拡張機能。スケジュールから訪問先の地図を素早く表示できる。
BUY INSTAGRAM FOLLOWERS
Instagram Followers have never been this affordable We all know that the internet is one of the best ways to get our marketing messages out there nowadays, and social media networks are the best ways to do this. However, what many people don’t realise is that social media is evolving, sure, we have social networks that are going strong such as Facebook and Twitter, but they are not visual enough,
データを圧縮転送してChromeを高速化する拡張機能「Data Compression Proxy」
AndroidとiOS版のChromeにはSPDYプロトコルですべてのHTTPトラフィックをGoogleのサーバーに転送することで、データ使用量を最大で50％削減してウェブブラウジングを高速化できる「データ圧縮と帯域幅管理機能」が備わっています。この帯域幅管理機能をPC版Chromeでも使えるようにして高速ブラウジングを実現するChrome拡張機能が「Data Compression Proxy」です。 Chrome ウェブストア - Data Compression Proxy https://chrome.google.com/webstore/detail/data-compression-proxy/ajfiodhbiellfpcjjedhmmmpeeaebmep インストールするには「無料」をクリック。 「追加」をクリック。 すると画面右上に緑色のマークが出現しており、アイコンを
CSSハック一覧
2013年3月23日 CSS 異なるブラウザーで見たらレイアウトが崩れる。。CSSハックはそんな時のお役立ち裏技（？）です。私がブックマークしているCSSハックに関するWebサイトがたくさんあったので（Safariがのってない・IE8しかのってない。。等の理由で）、自分用メモ。「こんなやり方もある！」というのがあればコメントして教えてください！ ↑私が10年以上利用している会計ソフト！ Internet Explorer IE6以下 #help_me { _color: blue; } * html #help_me { color: red; } IE7 *:first-child+html #help_me { color: red; } *+html #help_me { color: red; } IE6, IE7 #help_me { /color: blue; } IE8 #h
Google ChromeでHTTPを確認する拡張「HTTP Headers」
Google ChromeでHTTPを確認する拡張「HTTP Headers」について紹介します。 １．概要 Google Chrome拡張「HTTP Headers」は、ページのHTTPヘッダーを簡単に確認することができるものです。 なお、Google Chromeではデフォルトの機能でHTTPを確認する方法がありますがちょっとみにくいので、今回はこちらの拡張を紹介します。 ２．インストール 「HTTP Headers」のページにアクセス。 （クリックで拡大） 右上にある「無料」をクリック。 表示されたダイアログの「追加」をクリック。 「CHROMEに追加済み」に表示が変わればインストール完了です。 ３．表示されているページのHTTPヘッダを確認する 表示されているページのHTTPヘッダを確認する方法です。ここではYahoo JAPANのページを例に説明します。 ページを表示した状態で右
HTML5文書のアウトラインを簡単に確認できる「HTML5 Outliner」
HTML5文書のアウトラインを簡単に確認できる「HTML5 Outliner」の紹介です。 １．HTML5 Outliner 「HTML5 Outliner」は、HTML5文書のアウトラインを簡単に確認するためのツールです。 HTML5 Outliner このツールにURLやHTMLマークアップを設定して「Outline this!」をクリックすれば、文書のアウトラインが確認できます。 たとえば、「HTML 5.1 Nightly - 1 Introduction」のページのURLを実行すると次のような結果が表示されます。 ２．Chrome拡張の「HTML5 Outliner」 Chrome拡張の「HTML5 Outliner」も用意されているので、こちらの方が扱いやすいでしょう。 HTML5 Outliner ここではChrome拡張のインストールと利用方法を紹介します。 Chromeで
Google ChromeでJavaScriptエラーを通知してくれるChrome拡張「JavaScript Errors Notifier」
Google ChromeでJavaScriptエラーを通知してくれるChrome拡張「JavaScript Errors Notifier」を紹介します。 １．概要 Google Chromeでページを表示したとき、そもそもJavaScriptエラーが発生しているかどうかが分かりません。 JavaScriptエラーと分かった場合でも、次のようにコンソールを開かないと詳細を確認することができません。 このアドオンを利用すれば、ページを表示した時点でJavaScriptエラーを知ることができます。 なおコンソールを使ったJavaScriptエラーの確認方法については、「JavaScriptエラーを表示・確認する方法のまとめ」をご覧ください。 ２．インストール 「JavaScript Errors Notifier」のページを開きます。 右上にある「CHROMEに追加」をクリック。 表示された
ウェブディレクターがおすすめする、とにかく捗るGoogle Chromeの拡張機能（エクステンション）20選 : LINE Corporation ディレクターブログ
こんにちは、広告事業部でLINEやNaverまとめ、livedoorの広告企画を担当しておりますディレクターの阿部です。 ウェブディレクターの皆さんの中でも愛用している方が多いと思われるGoogleのウェブブラウザ、Google Chrome。その速さには定評がありますが、ディレクターの仕事をさらに捗らせてくれる拡張機能（Extensions）は活用していますか？ 今回は、私が常用しているChromeの拡張機能を、一気に20個紹介したいと思います。皆さんの業務効率化に役立つようなら幸いです。 ※こちらの記事は私の個人ブログからの転載です。 検索を捗らせる系 ato-ichinen Activeにしている間、Google検索結果を1年以内のものに限定する拡張機能。フレッシュな情報のみを検索したい時に便利。
Chromeの機能拡張 -Responsive Inspector | コリス
レスポンシブの確認ツールの多くは単にブラウザのサイズを変更して確認するだけですが、レスポンシブがスタイルシートで定義されているかに基づいてページの確認ができるChromeの機能拡張を紹介します。
PHPからChromeにログ出力「Chrome Logger」
こんにちは、中川です。 PHPでの開発中のちょっとしたデバッグに、echo や var_dumpで画面に値を出力して確認することがありますよね。 このデバッグ方法は簡単でいいのですが、出力した配列の値などはパッと見で確認しやすいとは言えませんし、画面の表示内容が崩れたりします。 画面に出力しない方法としては、 error_log関数を使ってapacheログやファイルに出力する方法もありますが、 この場合は、サーバ側にログインしてtailなどでファイル内容を確認する必要がでてきます。 そんなちょっとした問題を解決してくれるツール 「Chrome Logger」をご紹介したいと思います。 Chrome Loggerを使えば、JavaScriptのconsole.logのように、 表示画面には影響を与えないでブラウザのデベロッパコンソールにPHPから値を出力できます。 ■Chrome Logge
Tag Assistant: Googleアナリティクスのトラッキングコードが正しくインストールされているかをチェックするChrome拡張
[対象: 全員] Tag Assistant（タグ・アシスタント）というChromeの拡張機能をこの記事では紹介します。 Tag Assistantを使うと、GoogleアナリティクスをはじめGoogleが提供するサービス・ツールのタグが正常に動いているかどうかを検証できます。 使い方は簡単です。 インストールして有効化したら調べたいページでアイコンをクリックします。 “working”と出ていれば正常に動作しています。 Googleアナリティクスのトラッキングコードだけでなく、タグマネージャのタグやAdWordsのコンバージョンタグ、リマーケティングタグもチェックしてくれます。 正常に動いていないときは“not working”が表示されます。 “working”あるいは“not working”をクリックすると詳細な情報が表示されます。 オプションで「Detailed Informat
Google ChromeでサイトパフォーマンスのボトルネックをチェックできるChrome拡張「PageSpeed」
Google ChromeでサイトパフォーマンスのボトルネックをチェックできるChrome拡張「PageSpeed」を紹介します。 この拡張を利用すれば、「ブラウザのキャッシュを活用する・圧縮を有効にする・CSSスプライトに画像をまとめる」といったパフォーマンスの最適化のための項目や、その詳細なデータを確認することができます。 １．インストール Using PageSpeed Insights for Google Chromeのページにある「Install PageSpeed Insights」またはその左のアイコンをクリック。 ページ右側にある「CHROMEに追加」をクリック。 「追加」をクリック。これでインストールが開始します。 インストールが完了しました。 ２．使い方 Windowsの場合、測定したいページを表示した状態で「F12」をクリックして、表示されたデベロッパーツールの右側
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ソニック速報
シンプルで使いやすいレスポンシブWebデザインの確認ツール・Dimensions
IDEA * IDEA
