Google Chrome 拡張機能を作ってみる(2011/02/04作った内容も追記)

先日、appmakr上で簡単にRSSリーダを作ってみた(つかRSSフィード入れただけ)ら Twitter上で少々コメントをいただいたりして結構おもしろかった。あれと同じくらい超手抜きな内容であれば”Google Chrome 拡張機能”でも簡単に15分くらいで作れんじゃね?”拡張機能ギャラリー”にリリース(世界に公開だよ!)できそうだしapp storeよりお手軽じゃね?ターゲットもっとデカくね?wと思い簡単に試してみた。

しかし、できるんじゃね?と思いついた15分後に会議を予定していたため、15分以内でできる事に限定されてしまった、よって以下内容はその程度の内容である。

まずは”Google Chrome 拡張機能”が何者だかサッパリわからんので以下をチェック。

Google Chrome Extensions (Labs)
Tutorial: Getting Started (Hello, World!)

Google Chromeと適当なエディタがあれば作れるらしい、でも15分で作るためにはこのチュートリアルサンプルをまねっこするしかないのでコピペ…ふむ…すぐ動いた、コピペ練習に3分、簡単かも。でもこんな写真が見たいわけじゃないし!

よっしゃ、この”popup.html”の中身を書き換えて、このポップアップ部分に今回はTwitterでappmakrの件にコメントをいただいた方々のBlogのRSSフィード(複数)を表示させよう!と2分で構想も確定した。@Motoshi_t, @kuracyan, @tomos2006の皆様、勝手にすんません、なんせ時間がないもんでw。

CSS と JavaScript(両方ともよくわからんがw)を適当に入れときゃ動きそうなのはわかったが、ちょー手抜きするにはどうするかをググってみると…ほぅ…”Google AJAX Feed API”っつーのがいいらしく、まさに構想2分を実現できそうな”複数のフィードをタブ表示できる例題”を発見!ちゅーかググって最初に出てきた以下を参考にさせていただいたwwwありがとうございます!&ググるって最高!

Google AJAX Feed APIでRSSフィードをタブで表示

ちょっとエントリが古いのが気になるがなんとかなるっしょ的に見ていくと…え!API keyが必要なの?メンドくせぇしサイトじゃなく”Google Chrome 拡張機能”なんだから”Google AJAX Feed API”使えなくね?とか思ながら、またググるとサイトじゃないなら必要ないらしい?!…上記サンプルからAPI keyを投げてる部分を削除し皆さんのBlogをチェックして各RSSフィードURLをコピペ…ふむ…動く、拡張機能名を”RSSフィードをポップアップする簡単なGoogle chrome拡張機能”にしようと考えたり(考えたのかよっ!)CSSを1行だけ追加したりして改造に5分。

トータル10分でできた!…あと5分で会議かコーヒ飲むか…なんか忘れてる気が…あっ!アイコン!アイコン!アイコンのデザインをしないとっ!!これが一番重要!うーん、うーむ…まったく思いつかず3分経過…結局手書きのひらがな”さ”を採用した適当アイコン…しっしまったこんなダサいアイコン作成に5分使ってしまったwやっぱ15分かかった。

実は”拡張機能ギャラリー”で世界にリリース!(審査は無いようだ)する事も可能で、うっかりリリースしそうになる程簡単だったが思いとどまったwww(最初に1回だけ登録に$5必要)。

作成した機能拡張はGoogle Chromeのunstable版で作成し動作確認しただけだったが、Twitter上で@pon_switcさんにstable(Mac版?)にインストールして動作できる事を確認いただいた、ありがとうございます。

appmakrは、iPhoneアプリをWebブラウザで作り(つーかデザインするに近いかも)最終的にはapp storeでリリースできちゃう、というものらしい。もちろん、これを雛形にしてもっと作り込むんじゃ?って話しもあるだろうが、それは置いといて、あまり技術的な事などは気にせず(技術的に高度な事を必要とせず)なにかアプリを作りリリースするという事ができるならば、これは面白い事だなあ、と思った。たぶんスマートフォン(iPhone)がヒットした事でアプリを作るとかって事にみんな(普通に違和感なく)興味を持っているのだなあ、とTwitter上でいただいたコメントで急にそう思えてきた。

セルフブランディングとかソーシャルブランディングなんて言葉もある。BlogやTwitterやFacebookなんてものを使ってやっている事を指すと思われるが、スマートフォンアプリやブラウザの機能拡張(これだってWeb storeでリリースできるアプリみたいなもん、有償でリリースもできるのかな?)で、できるだけ手抜きで簡単にもっと人と違ったアピール(?)やコミニュケーションってできる可能性がいっぱいあるなあ、と思った。

Mac app storeなんてものもオープンすると聞く。これからは、すでに個人がBlogやホームページを持つ事が普通になったように、スマートフォンアプリやWebアプリなど、小さなアプリを個人がリリースする事が普通になっていくのだろうなあ、技術的な問題は急速に解決されてしまうのだろうなあ、と思った。

* 2011/02/04追記
なんとこのポストについてTwitter上でご質問をいただいた、いいかげんなポストですんません & 内容をすっかり忘れている自分にも再度驚いたwww。
まず、先日作成したGoogle Chrome extensionのリンク先がわかりにくかったかもしれず、以下に再度記載、

RSSフィードをポップアップする簡単なGoogle chrome拡張機能

また、今日再度インストールして試してみたGoogle Chromeのバージョンは”10.0.648.18 dev”で、とりあえず動いているように見えますがスクリーンショットを以下に、

RSSフィードをポップアップする簡単なGoogle chrome拡張機能スクリーンショット

もしかしてご質問の趣旨は、書き換えた内容自体をお知りになりたいのかもしれず、この内容が正しいかどうかは置いといて(置いとくのかよっw)あの時会議直前に急いでコピペしてた内容は以下のようなので置いておきます(ここに載せようと思ったがhtmlコードはエスケープされたり載せ方がわからんw)、以下3ファイルのリンク先をご参照下さい、

manifest.json
popup.html
あと、一番重要なアイコンを”icon.png“(サイズ19×19)で作っておるようですw。

以上3ファイルをフォルダに入れ、Google Chromeのdev版の”機能拡張”のデベロッパモードで”パッケージ化されていない機能拡張を読み込みます…”で読み込んで動作させ、追記冒頭のGoogle Chrome extensionリンクは”機能拡張のパッケージ化…”で作成した”hellorss.crx”というファイルです。

参考になりますでしょうか?というよりもっとカッコイイもの、じゃなくてw技術的に正しいモノを教えていただきたいっす…まあそんな感じで。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中