カテゴリー: 便利ツール

Google 拡張機能 ・・・ 結局 公開しました!

投稿者:isc_blog

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

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

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

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

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

2011年5月19日

Google 拡張機能 そして世界公開へ・・・のはずが

投稿者:isc_blog

参考資料
スマートネットワーク 開発ブログ: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ドル必要なんですね。

そりゃそうか・・・

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

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

2011年5月19日

Google Chromeの拡張機能を作ってみる!

投稿者:isc_blog

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」のリンク先に配布方法らしきものが・・・
これは後日・・・

2011年5月18日

今日のあなたの取り扱い説明書

投稿者:isc_blog

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

Powered By ISC-WEB

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

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

2011年5月15日

favicon.ico を作るサイト

投稿者:isc_blog

favicon.ico Generatorfavicon.ico Generator

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


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

便利です。

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


追記 2011/05/16


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

2011年5月14日

Twitter発言をjQueryとJSONPで取得して表示してみました

投稿者:isc_blog

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

※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

2011年5月11日

スマートフォン向けアプリ開発フレームワーク

投稿者:isc_blog

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

他にもこのようなフレームワークがないかと調べたところ
やっぱりまとめてくれている方がいらっしゃいました。

某開発者の独り言: スマートフォン向けアプリ開発フレームワーク

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

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

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

2011年5月9日

技術系のブログでHTML書くときに便利なGoogle Chrome 拡張機能

投稿者:isc_blog

技術系のブログ投稿でHTMLソースを記述する際にHTMLタグのエスケープを行ったりするのが
ちょっとめんどくさいかったんです。
ワードプレスだと「ビジュアル」モードでHTMLタグをエスケープしないままコピペして・・・
って出来るもののなんだか「改行」がメチャクチャになっちゃう(自分の設定が悪いのかな?)ので
改行差し込んで・・・ってやっていたんですが、ちょっと良い物がないか探してみました。

そしたら、こんなのがありました!!
HTML Escape Helper」 chromeウェブストアより

使い方は上記よりGoogle chromeに拡張機能をインストールして「&lt;」ボタンを押したら開くテキストエリアにHTMLコードをコピペしてから「ESCAPE」ボタン押すだけ!
コピペしたHTMLコードがそのままエスケープされます。

Chrome使用率が高いので重宝しそうです。

今回「chrome アドオン」で検索したんですが、他にもいろいろあるんですね・・・・
ちょっと調べたらいろいろ入れちゃいそうな自分が怖いです。

2011年5月8日