開発者の皆さん
開発してない方もOKです。

使用しているウェブブラウザをお教えください！
複数使用している場合は複数の使い分けなど教えていただけると助かります。
また、アドオンツールなど便利なものがあったら教えてください。

コメントにて大募集します！
アイ・エス・シー関係者の方、部外者の方、関係なく投稿してください！
コメントは「テンプレート」を用意しますが、テンプレートに沿う必要はありません。

———– テンプレート ———————–
１．ご職業
２．ご使用のブラウザ（複数可）
３．便利なアドオンツールがあれば教えてください
４．自由欄
—————————————————–
よろしくお願い致します！

楽しみに待っています！！！

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

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

ダウンロードはこちらから
速攻！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」のリンク先に配布方法らしきものが・・・
これは後日・・・

今日のあなたの取り扱い説明書をゲットしてください！

Powered By　ISC-WEB

入力された「名前」を元にいろいろ解析（？）して今日のあなたの「取扱説明書」を表示します。

いろいろやってみてください。
日付も関係させてありますので同じ名前でも明日は違う結果が待っています。

favicon.ico Generator

ここで簡単に作れます！
しかも他の方が作ったアイコンも閲覧可能。
すごいのを作る方がいますねぇ～


[Latest favicons]をクリックするとこれまでの履歴が見られます。

便利です。

ちなみに「favicon.ico」をページに設定するためには
<head></head> 内に
<LINK REL=”SHORTCUT ICON” HREF=”favicon.ico”>
href= には 「http://～」などの絶対パスか相対パスで記述します。

追記　2011/05/16

ちなみに弊社デザイナーは
favicon.icoを作ろう！というサイトを利用している　とのこと
こちらは３つのアイコンをひとつのファイルにまとめられるので便利とのこと。

先日紹介したＷＥＢサービスで使用されている「jsonp」で取得と表示を簡単に出来ないかな？と思い「Twitter」のＡＰＩを利用してデータを取得しJSONPで表示するものを書きました。

※ＪＳＯＮＰについては→JSONPとは

[html]
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>JSONPでTwitter発言表示してみました</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.6.0");</script>
<script type="text/javascript">
function dispTweet() {
// 一度クリアにする
$("#recent").html("");
// ユーザーアカウントのデフォルト値
var screenName = "isc_web";
// デフォルト表示件数
var count = 20;
if ($("#sname").val() != "") {
screenName = $("#sname").val();
}
if ($("#count").val() != "" && !isNaN($("#count").val())) {
count = $("#count").val();
}
var url="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=" +
screenName + "&count=" + count + "&callback=?";
$.getJSON(url , function(data){
$.each(data,function(i){
// 取得できるデータは
// http://dev.twitter.com/doc/get/statuses/user_timeline
// にて確認してください。
$("#recent").append("<li>"+this.text+"</li>"); // とりあえず記事本文のみ出力
});
});
alert("OK");
}
</script>
</head>
<body>
<strong>TwitterのつぶやきをJSONPで取得表示する</strong><br />
表示したいアカウント：<input type="text" id="sname" value="">&nbsp;
表示件数：<input type="text" id="count" value="">※デフォルト20件<br />
<input type="button" value="ツイート表示" onclick="dispTweet()">
<div id="recent"></ul>
</body>
</html>
[/html]
サンプルはこちら

即できました。
アカウントと表示件数を変更できるようにしてみました。
ちょいちょい改造すれば普通に見られる感じになります。
※あくまでも基本だけでスミマセン。

参考資料
無題メモランダム：jQueryでJSONP

先日、アシアル株式会社主催の「iPhone/Androidアプリ制作セミナー」に出てきました。
そこで習った「PhoneGap」を深めようといろいろ作ったりしています。
※発表は後日・・・（出来るかな・・・出来るといいな）

他にもこのようなフレームワークがないかと調べたところ
やっぱりまとめてくれている方がいらっしゃいました。
↓
某開発者の独り言： スマートフォン向けアプリ開発フレームワーク

参考にさせていただきます！

※社内向け覚え書き的な・・・投稿ですみません。

「参考資料」
PhoneGap Fan:アシアル株式会社さんが運営しているサイトです。