2012年01月28日
node.jsでニコニコ生放送のコメントを受信してパースするパーサを書いた
以前に、node.jsでニコ生のコメントを取得という記事を書きましたがコメントをパースするときに正規表現を使うのも気が引けるので簡単なパーサを書きました。
といってもDOMParserを使うのでブラウザなどでないと実行できません。
node.js上では動きませんね。
ソケット接続ではデータイベントでXMLが必ず終端に来るとは限らないので、そのまま他のDOMParserを使うこともできません。
注意することとして、
子要素を持たないXMLをパースすることはできない <xml>という名前の要素があったときに死ぬ
くらいです。用法用量を守って参考程度にお使い下さい。
Permalink | コメント(0) | トラックバック(0) | 23:59 
2012年01月27日
Chrome Extension(拡張機能)のいろは 4〜BrowserActionsを使った拡張機能を作る1〜
HTML, Javascript, GoogleChrome
一回目、二回目、三回目にて拡張機能の概要や、基本的な作り方を説明しました。
二回目にて「Hello, World!」をやりましたが、実際にコードを書いたり何か動作的なプログラムは組んでませんでした。
ここからは何か実際に使えそうなものを作って行きましょう。
拡張機能では主にJavascriptを使ってコードを書きます。
Javascriptがわからない場合は他のサイトを参考にして下さい。
manifest.json
manifest.jsonに次のように記述しましょう。
"browser_action": {
"default_icon": "icon.png",
"default_title": "title",
"default_popup": "popup.html"
},
default_icon - BrowserActionのアイコンです。19pxの正方形を用意して下さい。拡張機能の画像と違いPNGの推奨はありません。BMP, GIF, ICO, JPEG, PNGが対応してます。
default_title - BrowserActionのタイトルです。これはアイコンのマウスオーバー時などに表示されます。
default_popup - BrowserActionがクリックされた際にポップアップするHTMLです。
popup.html
とりあえず表示用のpopup.htmlを作ってみましょう。
<html><body><h1>Popup!</h1></body></html>
実行
適当なアイコンを用意したら、再読み込みをしてみましょう。
Chromeの右上辺りに用意したアイコンが表示されます。
クリックすると。。。。
こんな感じにpopup.htmlが表示されましたか。
しかし、これでは全く動的な動作をしていません。そもそもJavascriptでコードを書いてすらいません。
もちろんpopup.html内にscriptタグを用いてJavascriptを実行することは出来ますが、それではなんらショートカットリンクの役割しかしません。
次回はこれに何か動的な要素を加え、BrowserActionsを使った拡張機能を作ってみましょう。
もし、間違いがあれば気軽にコメントかTwitter(@toriimiyukki)にてお知らせ下さい。
リンク
公式リファレンス(英語) - Browser Actions
Permalink | コメント(0) | トラックバック(0) | 23:24
2012年01月26日
Chrome Extension(拡張機能)のいろは 3〜manifest.jsonについて〜
HTML, Javascript, GoogleChrome
前回のChrome Extension(拡張機能)のいろは 2〜Hello, World〜では、PackagedAppsを使った適当な拡張機能を作って見ました。
そこでのmanifest.jsonの記述方法が結構ざっくりしていたので詳しく説明します。
manifest.json
今の日本の総理である野田総理が選挙演説の時、こんなことを言ってましたね。
マニフェスト、イギリスで始まりました。
ルールがあるんです。
書いてあることは命懸けで実行する。
書いてないことはやらないんです。
このmanifest.jsonもその通り、書いてあることをやって書いてないことはやりません。（皮肉）
前回、manifest.jsonについて触れましたが、これについて深く説明しましょう。
manifest.jsonは拡張機能の設定ファイルです。このファイルを見れば拡張機能がどういう機能を使ってどのファイルを読み込んで実行しているのかがわかります。
前回、manifest.jsonには最低限nameとversion要素が必要と言いましたが、最新の定義では、manifest_versionというものも必要になりました。
manifest_versionは設定ファイルがどのバージョンの記法で記述されているかを判別するものです。
つまり、現段階でmanifest.jsonには最低限下記を記述する必要があります。
"name": "拡張機能の名前", "version": "拡張機能のバージョン", "manifest_version": 2,
name - 拡張機能の名前です。好きな名前を指定して下さい。ディレクトリ名と異なっても大丈夫です。
version - 拡張機能のバージョンです。バージョンを数値で指定して下さい。aやαなどの文字は使わないで下さい。例)"1.0" "0.0.9"
manifest_versionは現段階で2を指定して下さい。
それから下記の要素も記述しておくことを推奨されています。個人や特定の範囲内で使用する文には必要ありませんが、マーケットなどに出す際には必ず記述しましょう。
"description": "A plain text description",
"icons": {"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png" },
description - 拡張機能の説明です。設定の拡張機能リストにも表示されます。マーケットの説明とは別なので完結でわかりやすいものにしましょう。132文字まで。
icons - アイコンに関しては、16px、48px、128pxの正方形のアイコンを作る必要があります。拡張子はPNGです。推奨はされてませんが、BMP、GIF、ICO、JPEGも使用することは出来ます。
default_localeという要素も推奨されていますが、国際化の話はしないのでここでは割愛します。
ここから先はmanifest.jsonに必要な機能を書いていきます。
BrowserActionsなら"browser_action"要素を、PageActionsなら"page_action"、Appなら"app"を記述していきます。
ですが、この記述方法に関しては、今後それぞれの機能を使いながらmanifest.jsonを編集し、説明します。
次回はBrowserActionsを使った拡張機能を説明します。
もし、間違いがあれば気軽にコメントかTwitter(@toriimiyukki)にてお知らせ下さい。
リンク
公式リファレンス(英語) - Google Chrome Extensions (Labs)
非公式リファレンス(日本語) - Manifest File | Chrome Extensions API リファレンス
公式リファレンスの英語は結構簡単めです。。。
Permalink | コメント(0) | トラックバック(1) | 23:41
2012年01月25日
Chrome Extension(拡張機能)のいろは 2〜Hello, World〜
HTML, Javascript, GoogleChrome
前回のChrome Extension(拡張機能)のいろは 1〜はじめに〜では、ChromeExtensionについて色々書きましたが、うだうだ言ってもわからないと思うので、百聞は一見にしかずということで実際に作ってみましょう！
必要なものの準備
とりあえずお好きな場所にお好きなディレクトリを作りましょう。
中にmanifest.jsonというファイルを作り下記のように記述しましょう。
{
"name": "ChromeExtensionHelloWorld",
"version": "0.1"
}
次に、Chromeを開いて右上の歯車アイコンから設定ページを開き、拡張機能タブを開きます。
デフォルトだと「デベロッパーモード」にチェックがついていないのでチェックを付けて下さい。
そうしたら「パッケージ化されていない拡張機能を読み込む」をクリックして、先ほどのディレクトリを読み込んで下さい。
どうですか、ここまで出来ましたか。
この状態では何もしない拡張機能です。ここから色々機能を追加していきます。
この作業の間に、manifest.jsonというファイルを作りましたが、ここにはアプリの設定情報を記入していきます。
manifest.jsonには最低限先ほど入力した name と version 要素が必要になります。
PackagedApps
次にPackagedAppsというローカル内にファイルを置いてそれを開く機能を使ってみましょう。
「Hello, World」の画面を作るために予め拡張機能のディレクトリにhelloworld.htmlとかを下記のように設置して下さい。
<html><body><h1>Hello, World!</h1></body></html>
そしたらmanifest.jsonを下記のように書き換えます。
{
"name": "ChromeExtensionHelloWorld",
"version": "0.1",
"app": {
"launch": {
"local_path": "helloworld.html"
}
}
}
ここで気を付けたいのはJSON形式なので行末の,(カンマ)などに気をつけてください。
あとは、実際に実行してみましょう。
ですが、拡張機能のソースは自動で読み込まれないので、設定の拡張機能タブより作ったアプリケーションの左側の下矢印マークを押すと「再読み込み」が出てくるのでそれを押します。
新しいタブを開くと、アプリケーションのリストに作った拡張機能が載ってるはずです。
クリックすると先ほど作ったhelloworld.htmlが表示されるはずです。
続きはまた明日！
もし、間違いがあれば気軽にコメントかTwitter(@toriimiyukki)にてお知らせ下さい。
Permalink | コメント(0) | トラックバック(2) | 23:59
