WEB制作中にこのGIFのバックの色なんだっけ・・・って思って調べるのにいちいち画像ソフト立ち上げなくてすむGoogle Chrome 拡張機能を見つけました！

Eye Dropper

要するにカラーピッカーなんですけど、WEB制作中（主に修正中）にブラウザとテキストエディタで終わっちゃうとPCが重くなくて良い！

年度末なので
テキストエディタ（愛用の秀丸こちゃん）×5枚くらい・・・エクセル多数・・・ワード1枚・・・ブラウザ二種類・・・Eclipse・・・xampp・・・Thunderbird・・・etc…
立ち上げ過ぎなのでたすかります。

Google Chromeってなにげにキャッシュがきついので
テスト等で結構困ってたんですが、キャッシュをオフにする方法があったのでご紹介します。

Chromeのキャッシュをオフにする方法 :: 5509.

こちらの記事のとおりなんですが
「右下にアイコン」あたりがはじめ「？」だったので補足的にちょっと説明します。

まず、Chromeの右上にある「レンチマーク」をクリックし
「ツール」→「デベロッパーツール」をクリックしていきます。

そして右下の「ギアアイコン」が表示されるのでそれをクリックし表示される画面・・・

にて「Network」の「Disable cache」をチェックする。

という流れです。

これで爽快かな・・・

とにかく、感謝感謝！助かりました！

本日、またGoogle Chromeの拡張機能をリリースしました。

URLエンコード/デコードを行う際にペロっとやりたくて作ったツールです。
URLエンコード速攻！

是非使ってみてください！

使う機会は限られているかもしれませんが・・・

関連記事：
Google 拡張機能 そして世界公開へ・・・のはずが
Google Chromeの拡張機能を作ってみる！

WebAPIから日本語を含むJSONデータを取得して内容を精査するテストを行っていますが
ログを見てJSONの生データのままだと
「\u65e5\u672c\u8a9e\u3092\u542b\u3080JSON\u30c7\u30fc\u30bf」
こんな感じでわけがわからなかったので
愛用のGoogle Chromeに入っている拡張機能を使いました！

これです↓↓↓
Native2Ascii速攻！
※作者は私です。手前味噌ですみません。

「\u65e5\u672c\u8a9e\u3092\u542b\u3080JSON\u30c7\u30fc\u30bf」というデータが・・・

こんな感じで上記のわけわからない「\u65e5\u672c\u8a9e\u3092\u542b\u3080JSON\u30c7\u30fc\u30bf」をコピペ

「ascii2native」ボタンを押すと・・・

「日本語を含むJSONデータ」になりました！

こんな感じにしてくれます！

便利です！手前味噌ですが・・・

「native2ascii」ボタンは「日本語を含むJSONデータ」を「\u65e5\u672c\u8a9e\u3092\u542b\u3080JSON\u30c7\u30fc\u30bf」に変換するものです。本来はこちらの用途が使用したいために作成したものだったんですが、最近は意外にescapeよりもunescapeにお世話になっています。

関連記事：
Google 拡張機能 そして世界公開へ・・・のはずが
Google 拡張機能　・・・　結局　公開しました！

昨日、IE１０が出るんですねぇ。早いですねぇ。

と書いたのですが、６月９日付けでマイコミジャーナルさんに「Chrome 12安定版登場 – 3D CSS H/Wアクセラレーションほか」の記事が掲載されていました。

記事によると新機能は下記のとおり

・3D CSSハードウェアアクセラレーション
・スクリーンリーダーサポートの改善
・Google Gearsの排除
・アドレスバーからアプリケーションを起動する機能
・同期設定を設定画面へ統合
・悪質なファイルのダウンロードを防止する新しいセーフブラウジングプロテクション機能
・Flashクッキーを簡単に削除する機能の提供

※３D CSSハードウェアアクセラレーションは対応するハードウェア構成が必要とのこと

こちらも要チェックですね。

Google Chromeダウンロード

結局、個人的に今後もツールを作るであろう・・・ということでデベロッパー登録してしまいました。

で、拡張機能デビューです。

ダウンロードはこちらから
速攻！native2ascii

使う人って限られてるけど無意味にインストールしてみてください。

今後、バージョンアップして使いやすくしていきたいと思います。

参考資料
スマートネットワーク 開発ブログ：Google chrome extension(拡張機能)を開発してみた

個人的に欲しかった
Javaの「native2ascii」をやってくれるアドオンを作ってみたので
世界に向けて公開したいと思います。

Google Chromeの拡張機能を作ってみる！
で紹介したとおりに拡張機能を作ったあと・・・

「パッケージ化」から説明したいと思います。

「拡張機能のパッケージ化…」ボタンを押します。

ルートディレクトリを指定後
「OK」ボタンを押すと

と表示されて秘密鍵が作られました。
「GoogleExtensionNative2Ascii.pem」

chrome拡張のダッシュボード画面を開きます。
https://chrome.google.com/extensions/developer/dashboard

「Add new item」ボタンを押します。

同意文章が表示されますのでよく読んでから同意チェックして
「Accept」ボタンを押します。

Upload an extension or app (.zip file)
ということで
先ほどのフォルダをZIP圧縮したものをファイル選択ダイアログで選択します。

アップロード完了

おおっ！なんだかそれらしい画面になりました。

とりあえず必要事項を入力しながらも疲れたのでちょいと保存したところがこれです。
[Sava draft and return to dashboard]ボタンを押しました。

そして「Edit」でダッシュボードに戻って今度は公開・・・・
「Publish to test account」ボタンを押してみました。

Publish？　みたいに聞かれるので
思わず「OK」押してしまいます。

・・・・「Please upload at least one screenshot, video or slide show.」
ってエラーみたいなのが出てる・・・
「少なくとも一つのスクリーンショット、ビデオ、スライドショーをアップロードしてください。」
ということらしい・・・

なのでスクリーンショットを取って・・・アップロードします。

もう一度、「Publish to test account」ボタンを押してみました。

あ、
「A one-time developer registration fee of $5.00 is required to verify your account and publish items. Pay this fee now – Learn more」
という文言が・・・・

はじめだけ5ドル必要なんですね。

そりゃそうか・・・

ちょっと打診しないと・・・

当面は自分のデスクトップでだけ使います・・・・

Google Chrome アドオン　作成　日記

※参考資料
Google Chrome Hello worldの作り方 アドオン機能を開発者向けに解禁

ここ↓閲覧しながら進めることにします。
http://code.google.com/chrome/extensions/index.html

開いたら・・・
引用 ——————-
How do I start?
1.Follow the Getting Started tutorial
2.Read the Overview
3.Keep up-to-date by reading the Chromium blog
4.Subscribe to the chromium-extensions group
————————
とあるので

まずは Getting Started tutorial
http://code.google.com/chrome/extensions/getstarted.html

「Create and load an extension」の章を見てやってみる（全編英語なのが辛いけどがむばる）
1.Create a folder somewhere on your computer to contain your extension’s code.
要するにどこでもいいからフォルダ作れってことね。
はい作成。

「GoogleExtension」フォルダをc:\に作りました。

2.Inside your extension’s folder, create a text file called manifest.json, and put this in it:

{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"http://api.flickr.com/"
]
}

作ったフォルダに「manifest.json」って名前で上記のコード記述しろって言ってるよね。

はい、完了！

3.Copy this icon to the same folder:
Download icon.png
同じフォルダにicon.pngをダウンロードしろって言ってるのでダウンロードします。

4.Load the extension.

a.Bring up the extensions management page by clicking the wrench icon and choosing Tools > Extensions.
b.If Developer mode has a + by it, click the + to add developer information to the page. The + changes to a -, and more buttons and information appear.
c.Click the Load unpacked extension button. A file dialog appears.
d.In the file dialog, navigate to your extension’s folder and click OK.

a.レンチのアイコンをクリックして　Tools → Extensions 開く（日本語だとツール→拡張機能）
b.デベロッパーモードが「＋」だったらクリックして・・・
c.「パッケージ化されていない拡張機能を読み込みます…」ボタンをクリック。
d.ファイル選択ダイアログでさっき作ったフォルダを指定して「OK」ボタンをクリックする。

If your extension is valid, its icon appears next to the address bar, and information about the extension appears in the extensions page, as the following screenshot shows.

まぁ、問題なかったらアイコンがアドレスバーの横に表示されて、拡張機能の情報が拡張機能のページに表示されます。次のスクリーンショットのように。
（結構直訳すみません。）

これは問題なかったんだろう・・・

それで次が本題だろう・・・
「Add code to the extension」に入ります。

In this step, you’ll make your extension do something besides just look good.
1.Edit manifest.json to add the following line:

…
"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
},
…

「manifest.json」にこの行を追加する・・・
※現在「manifest.json」はこんなソース

{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"http://api.flickr.com/"
],
"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
}
}

2.Inside your extension’s folder, create a text file called popup.html, and add the following code to it:

同じフォルダに「popup.html」っていう名前のファイルを作って
「CSS and JavaScript code for hello_world」をクリックして得たコードをコピペ

2.Return to the extensions management page, and click the Reload button to load the new version of the extension.
拡張機能のページに戻って、リロードボタンを押し機能拡張の「再読込する」ボタンを押す。

3.Click the extension’s icon. A popup should appear that displays the contents of popup.html.
その後、アドレスバー横の機能拡張アイコンを押すと「popup.html」のコンテンツが表示される・・・

It should look something like this:

If you don’t see the popup, try the instructions again, following them exactly. Don’t try loading an HTML file that isn’t in the extension’s folder – it won’t work!
Google翻訳で翻訳：あなたはポップアップを表示されない場合は、正確にそれらに続いて、作業手順をもう一度試してください。それは動作しません-拡張機能のフォルダにないHTMLファイルをロードしないでください！

・・・というわけで「Now What?」は現在どうですか？的な感じなので省略します。
「The hosting page, which tells you about options for distributing your extension」
という項目の「hosting」のリンク先に配布方法らしきものが・・・
これは後日・・・