なんとなく開発日記(仮) このページをアンテナに追加 RSSフィード

現在公開停止中→「KeyJump」Chrome拡張
これらの機能の使用によって発生した何らかのトラブルや損失・損害等につきましては、一切責任を問わないものとします。

2011-05-29

他のタブからYoutubeやニコニコ動画の操作ができる「MovieController」Chrome拡張を公開しました!

需要あるんでしょうか…w

今、XSPという拡張機能を作ってまして、その副産物です。
Youtubeやニコニコ動画を作業用BGMとして流している方、多いと思います。
で、それらを一時停止したいとき、いちいちそのタブに切り替えるのって面倒じゃないですか?
その面倒を解消するのが、MovieControllerです。

f:id:nash716:20110529191820p:image

インストールすると、右上にアイコンが出ます。
クリックすると、ほかのタブで開いている動画が一時停止されます。
もう一度押すと、再生されます。
ただそれだけです。

●インストール

サーバの設定ミスってました 少々お待ちください

●注意

・クリックしても効かないんだけど!!
→もう一回クリックしてください。大人ではありませんが大人の事情です。

・バグ発見!!
→是非このコメント欄からお知らせください。

・対応サイト増やして!!
→コメント欄に書いていただければ、できる限り対応します。

・複数のタブで動画サイト開いてるんだけど!!
→一番右のタブの動画が一時停止/再生されます。大人ではありませんが大人の事情です。

●お願い

気に入っていただけたら、Twitterやはてブ等で広めていただけると、逆立ちしながら喜びますのでよろしくお願いします。

2011-05-11

いろいろなブラウザの拡張機能の開発しやすさを比較してみた

ということで、主要3ブラウザの拡張機能の開発しやすさを比較してみたいと思います。
ここでは、Firefox、Chrome、Operaについて。




FirefoxChromeOpera
ユーザー数
開発言語Jetpack or XUL or GMJS+HTML+CSS or GMJS+HTML+CSS
公開方法Add-ons for FirefoxChrome webstore*1Opera Extensions


大体こんな感じです。次はブラウザごとにもう少し詳しく見ていきましょう。

●Firefox
最近Jetpackという、新しい拡張機能の開発方法が登場しました。
今までは難解なXUL*2を使って開発する必要がありましたが、Jetpackではその必要がなく、UI部分の実装がとても簡単になりました。
Jetpackはまだ出始めということもあり、APIの仕様が定まっていなかったり、出来ないor実装が難しい部分も多くありますが、今後期待できる開発方法です。
対してXULは、Firefox 4以前に使用されていたユーザーインタフェース言語です。Jetpackでは実装できない細かいUIが指定できること、設定画面の実装が容易なのが特徴です。もちろんFirefox 4でもXULはサポートしていますが、Jetpackが安定してくれば魅力は薄れるでしょう。
拡張機能の形式は、XUL、Jetpackともに.xpiです。XULで開発する場合、必要なファイルの入ったフォルダをまとめてzip圧縮、拡張子をxpiに変更することで作成できます。*3Jetpackの場合、「cfx xpi」というコマンドで作成できます。
拡張機能を変更した場合、XULの場合はFirefoxの再起動、Jetpackの場合は「cfx run」で変更が反映されます。

Chrome
おそらく、拡張機能の開発が最も容易なブラウザだと思われます。
UIもマニフェストファイルに記述するだけで済み、他の拡張との変数の衝突などもすべて自動で回避してくれます。
また、設定画面の製作が簡単で、拡張機能の変更の反映も「再読み込み」をクリックするだけです。
ただ、ポップアップの挙動が不安定です。『バージョンによっては』document.location = "…"; でのページ遷移が認められていません。
拡張機能の形式は、.crxです。「拡張機能のパッケージ化」から簡単に作成できます。
ただし、Chrome webstoreに掲載する場合は、初回に$5をGoogle Checkout経由で支払う必要があります。(今までに一つでも公開したことがある人は除く)
自由度はFirefoxほど高くありませんが、ブラウザ拡張を開発したいだけならChromeがおすすめです。

●Opera
最近アドオン機能が実装されたこともあり、よく分からない仕様となっています。
ためしに開発してみましたが、「あってるはずなのに動かない…」が多くて投げてしまいましたw
変更は、アドオンのアンインストール→再インストールで反映されます。
拡張機能の形式は、.oexです。必要なファイルの入ったフォルダをまとめてzip圧縮、拡張子をoexに変更することで作成できます。

●まとめ
自由度の高いFirefox、お手軽なChrome、今後に期待のOpera。
ちなみにSafariはDeveloper登録が面倒で手を出していませんw

相変わらず読みづらい日本語で申し訳ないです。こればっかりは…。
あ、間違ってるところあると思うので、もし見つけたらコメント欄からツッコんでください。出来る限り早く修正します。
コメントとかはてブとかスターとかもらえると雄叫びをあげながら喜ぶと思います。

*1:初回公開時に$5が必要

*2:イメージとしてはMozilla版XML

*3:こちらは簡易的な方法です。

2011-05-07

Chrome拡張開発入門の次に読む記事…?

注:未完結の記事です。「これはどうやって実装するの!?」というリクエスト、お待ちしています。

この記事では、主に、「Chrome拡張開発してみたい!とりあえずHelloWorldはできたよ!でも、こういう動作をさせる方法がわからない!!」という方を対象にしています。
※HelloWorldまでの習得は、こちらのサイトが大変わかりやすいと思います。

ほかのサイトで詳しく解説されていることに関しては、そのサイトに丸投げしてしまっています。すみません…。
分からない関数等がありましたら、こちらで調べてみてください。

もくじ
1.選択したテキストを取得する。


ポップアップから、選択部分を取得する

ここは僕も非常に苦戦しました。ポップアップから

	window.getSelection().toString();

を実行しても、返ってくるのは「ポップアップ内での選択部分」で、表示しているページの選択部分は返ってきません。
ここで、メッセージというものを使用します。

具体的なコード例です。

background.html

	var callbacks = [];

	function getSelection(callback) {
		chrome.tabs.getSelected(null, function(activeTab) {
			if (activeTab.url.indexOf('https://') >= 0) {
				callback(null); 
			} else {
				callbacks.push(callback); 
				chrome.tabs.executeScript(null, { file: "content_script.js" }); 
			}
		});
	};

	chrome.extension.onRequest.addListener(function(request) { 
		var callback = callbacks.shift();
		callback(request); 
	});

content_script.js

	chrome.extension.sendRequest({ "text": window.getSelection().toString() });

popup.html

	var bg = chrome.extension.getBackgroundPage();
	bg.getSelection(function(selection) {
		// selection.text に選択部分が入っているので、それを使ってゴニョゴニョ…(ノ゚д゚(; ̄Д ̄)ゴニョゴニョ…(ノ゚д゚(; ̄Д ̄)する
	});

ソースコードの説明
1.[background.html]getSelectionが呼び出されたとき、現在表示しているタブの情報を取得し、保護されているページかどうかを判断。*1
2.[background.html]保護されていなければ、content_script.jsを、表示しているタブに注入。
3.[content_script.js]ウィンドウの選択部分を取得し、background.htmlに送る。
4.[background.html]getSelectionの引数のコールバック関数に、content_script.jsから送られてきたデータを渡す。
5.送られてきたデータをごにょごにょする。

以上が選択部分を取得する基本的な流れです。
popup.htmlは何をしてるんだ!!という意見があると思います。そういう方はこちらをどうぞ。

参考にさせていただいたサイト
この説明でわからなければ、上記のサイトを参照していただくことを推奨します。
こちらのスクリプトは、上記のサイトのスクリプトで、特に重要な部分を抜き出したものです。

*1:保護されているページの場合、そのあとのexecuteScriptが使用できないため。

2011-04-10

【決定版!】「跳.jpでつぶやく」Chrome拡張機能(おそらく最終版)を公開しました。

この拡張が最終版で、これ以降大きな変更はしません。
この後はバグフィックスや小さな機能追加が主になると思います。

大幅にUIを変え、認証も一度で済むようにし、機能も追加しました。

●特徴

  • ✔ Google Readerでフォーカスを当てているページをつぶやくことができるようになりました!
  • ✔ Ctrl+Enterというショートカットで投稿できます!

●謝辞

  • 素晴らしい短縮率を誇る「跳.jp」の製作者様
  • shortcuts.jsの製作者様

●インストール

こちらからどうぞ。

●使い方

初回は認証が必要です。「跳」ボタンをクリックしてください。
2つほどダイアログが開いたのち、設定ページが開きます。
そうしたら、まず「認証する」をクリックします。
そして認証を済ませていただき、2つの値が表示されたところでもう一度「跳」ボタンをクリックします。
設定ページで表示された二つの値をコピー&ペーストし、投稿用フォーマットなどを設定します。
入力が完了したら、「保存」ボタンをクリックしてください。「保存しました」といった意味のメッセージが表示されれば問題ありません。
設定が完了したら、つぶやきましょう。
「跳」ボタンをクリックすればポップアップが表示されますので、コメントを入力し、「ツイート」ボタンまたはCtrl+Enterを押します。
クライアント等で確認していただいて、しっかり投稿できていればOKです!
「Completed」と表示されても投稿されていない場合、設定が間違っている可能性があります。もう一度設定を確認してみてください。

また、Google Readerからつぶやくこともできます!
記事が選択されている状態で「跳」ボタンをクリックすれば、その記事のURLとタイトルが自動的に挿入されます!

●その他

もしご要望等ありましたら、コメント欄から是非教えてください。
バグ報告もこちらで!
また、Twitterやはてブ等で広めていただけると、逆立ちしながら喜びますのでよろしくお願いします。

2011-04-02

【追記】「跳.jpでつぶやく 簡易版」Chrome拡張を公開しました

こちらで予告していた、簡易版が完成しました。
前回同様、お粗末な実装ですので、バグがあるかと思いますが、その場合はコメント欄からご報告よろしくお願いします。

決定版が公開されています!これからはこちらをお使いください!

●簡易版の特徴

✔ 読み込みが早いです
✔ キーボード操作でほとんどの動作が完結します
✔ 代替コメントの設定が可能です

●注意点

  • 改行を含む選択部分は正しく表示されません。しかし、投稿はしっかり行われます。
  • OAuth_tokenとOAuth_token_secretを平文で送信します。これらの値は僕しか知らないConsumer_key、Consumer_key_secretとの組み合わせが正しい場合のみ動作しますが、抵抗のある方は簡易版でない方を使用してください。

●インストール

こちらからどうぞ。
決定版が公開されています!これからはこちらをお使いください!

●使い方

特にこれといったものはありませんが、使い始める前に、設定ページで認証を行う必要があります。
認証と投稿フォーマットの指定が完了すれば、あとはブラウザ上部の「跳」ボタンをクリックするだけです。

●お約束

また、僕自身Twitterは非公開にしてあり、この拡張を多くの人に知ってもらえない状況です。
どんな方法でも構いませんので、この拡張を気に入ってもらえた方は、是非この拡張を誰かに教えてあげてください。
自分勝手で本当にごめんなさい。