オムニボックスからニコニコで検索 - nicomnibox Chrome拡張

nicomnibox概要
アドレスバー(Omnibox)にns[Tab]と入力すると、サジェスト機能に導かれながらニコニコ動画、静画、生放送、ブロマガなどniconicoのコンテンツを簡単に検索できるChrome拡張。
アドレスバーから即座に検索できて、さらにサジェストが使えるのがポイント。

ChromeウェブストアページURL
https://chrome.google.com/webstore/detail/hjpolhdmkacmhjjnijjenpdjgnkggaie

利用方法
1. ポチッとChromeにnicomniboxをインストールする。
2. アドレスバーに "ns" と入力し、Tabキー押下、検索ワードを入力する。
3. 検索候補があれば表示されるので、そこから検索ワードを選択しても良い。

検索対象
・ニコニコ動画
・ニコニコ静画(イラスト/マンガ/電子書籍)
・ニコニコ生放送
・ニコニコチャンネル(チャンネル/ブロマガ)

実験的機能
以下のように :（コロン） に続けてコンテンツの種類を指定し、空白を挟んで、検索ワードを入力すると、直接該当コンテンツの検索がされます。

 :video ほげほげ
 :live ほげほげ
 :illust ほげほげ
 :manga ほげほげ
 :book ほげほげ
 :channel ほげほげ
 :blomaga ほげほげ

Chromeを使われてる方、どうぞお試しください。
https://chrome.google.com/webstore/detail/hjpolhdmkacmhjjnijjenpdjgnkggaie

ソースコードはこちら
https://github.com/shoito/nicomnibox-chrome-extension

※公開初日だけniconico Omniという名前でしたがググらビリティが低いのでnicomniboxに変更しました。

YeomanでCoffeeScript & LESS構成

YeomanはデフォルトではCompass, scss/sassを使う設定になっているので、CoffeeScript & LESS派な私はこんな感じでGruntfile.js/.coffeeとpackage.jsonを設定していますよ、というメモ。

これを定義して npm install でLESSコンパイルタスクとCoffeeScriptのLintタスクを事前にインストールしときます。
・grunt-contrib-less
・grunt-coffeelint



前回の投稿で紹介したCacoo Finderが上記のような構成になってます。
Cacoo FinderをCoffeeScript, LESS, Knockout, Yeomanで再構築

Cacoo FinderをCoffeeScript, LESS, Knockout, Yeomanで再構築

ふと、以前のMashup Awards7で作ったChrome拡張 Cacoo Finderのソースコードを公開していなかったことに気付いたので、どうせならとCoffeeScript(JavaScript), LESS(CSS), Knockout.js(MVVM), Yeoman(Grunt)で再構築しました。

ソースコード - GitHub
https://github.com/shoito/cacoo-finder-chrome-extension

Chrome Web Store
https://chrome.google.com/webstore/detail/pcfedgjdgkacloiabdlghochjfmnalck

Cacoo Finder - ブラウザ拡張 以前の紹介ブログ記事
http://blog.air-life.net/2011/11/cacoo-finder.html

yeoman --skip-updaterフラグが消えてた

$ yeoman server

を実行するとYeomanの更新チェックが走り、新しいバージョンがあれば自動更新されます。こんな感じで。

$ yeoman server

Starting update check…

Update available: 0.9.6 (current: 0.9.5)

Updating yeoman

npm http GET https://registry.npmjs.org/yeoman

npm http 200 https://registry.npmjs.org/yeoman

npm http GET https://registry.npmjs.org/yeoman/-/yeoman-0.9.6.tgz

npm http 200 https://registry.npmjs.org/yeoman/-/yeoman-0.9.6.tgz

npm http GET https://registry.npmjs.org/yeoman/0.9.6

npm http 200 https://registry.npmjs.org/yeoman/0.9.6

npm http GET https://registry.npmjs.org/yeoman/-/yeoman-0.9.6.tgz

npm http 200 https://registry.npmjs.org/yeoman/-/yeoman-0.9.6.tgz

(略)

私はパッチを当てて使ってたのでこの自動更新はされたくなくて、

$ yeoman server --skip-updater

というように自動更新をオフにしてました。

そのフラグがv0.9.6で消えてたというお話。

アンドキュメントなフラグでしたし、updater.js周りで変更があったんかな。

https://github.com/yeoman/yeoman/commit/8b75970d856000c2ce5f3e57b384cf7b80ba6c75

Yeoman ServerでURL Rewrite

フロントエンド開発のワークフローをサポートしてくれるコマンドラインツールのYeoman(ヨーマン)おじさん、Jenkinsおじさんとは違う形で活躍しています。

チームみんなのJenkinsおじさんに対して、私だけのYeomanおじさんのような感じで。

http://yeoman.io/ 

https://github.com/yeoman/yeoman

Gruntfile.js/.coffeeにワークフローを定義すれば多彩な才能を発揮してくれるんですが、ウチでは、CoffeeScript/LESSのコンパイル、.html/.js/.cssのconcat/minify、mochaテスト実行、ローカルサーバ、LiveReloadによるファイル編集時の自動リロード...等々でお世話になってます。

で、そんなYeomanおじさんは

$ yeoman server

とコマンド入力すると http://localhost:3501でローカルサーバ起動してくれるのですが、このローカルサーバでは、mod_rewrite相当の手段が見当たりませんでした(ある？)。

HTML5 Hisotry APIを使ったSingle Page Applicationで、URLを更新した後のリロードすると404になって困ってました。

YeomanのGithub Issueを見ると同じような要望は度々上がっているようで、マージされてませんが実装されてる方はいるようです。

今のところ私は以下を参考にv0.9.6の yeoman/tasks/server.js へパッチを当て、Gruntfile.jsにrewriteルールを記載した形で対応しています。開発用のローカルサーバなので。

Yeoman Server and Backbone/BBB pushState
https://github.com/yeoman/yeoman/issues/468

参考まで。

MicrojsでJavaScriptのソースコードリーディング

Microjs CodeReading Bookmarkletとは

http://microjs.com にリストされているJavaScriptライブラリのソースコードリーディングを支援するブックマークレットです。Read/Unread状況、Readサイズ/合計コードサイズを把握できるので、ソースコードリーディングでちょっとした達成感を味わえます。ブックマークレットは http://let.hatelabo.jp/ を利用して公開しています。

Microjsとは Microjsは、数百バイト〜数キロバイトの小さなJavaScriptフレームワークやライブラリを集めて紹介しているサイトです。2012/01/09時点で154個、合計206.7kBのライブラリがリストされています。小さいものに限定されているので、短時間で読めるものがほとんどです。Backbone.js, Zepto, yepnope, Modernizrなど、JavaScript, CSS3, HTML5に興味のある方は一度は見聞きしたことがあるものが並んでると思います。 インストール方法 Hatena::Letのブックマークレット公開ページからブックマークレットをブックマークに追加します。 http://let.hatelabo.jp/shoito/let/gYC-xZiazbHnRw

使用方法

1. http://microjs.com にアクセスします。

2. ブックマークをクリックし、ブックマークレットを実行します。

    実行すると下図のように、どのライブラリがRead/Unreadなのか、どの程度のコードを読んだのかが表示されます。

注意 ソースコードリーディングの履歴はWeb Storageを利用してブラウザに保存していますので、別ブラウザ/別マシンを使用した際に履歴は引き継がれません。 ソースコード https://github.com/shoito/bookmarklet/tree/master/microjs

フィードバック

感想、要望、不具合などありましたら @shoito へツイートいただけると嬉しいです。

「.fukui vol.2 -続・JavaScriptの巻-」をやりますよ

隔週くらいで適当に集まって、手を動かす勉強会みたいなのをしたいね、という流れで「.fukui(ドットフクイ)」というイベントをやっています。
vol.1(8/4), vol.2(8/18)はまずはJavaScriptをテーマに各々がカチカチとやります。
ちなみに私はSencha Touch(Ext JS)を使ったアプリを勉強がてら作っていますよ。
開発者だけじゃなくて、デザイナーの人も参加しているので、困ったときは頼りにしています。

[8/4] .fukui vol.1 -JavaScriptの巻-
http://atnd.org/events/6652

[8/18] .fukui vol.2 -続・JavaScriptの巻-
http://atnd.org/events/6981

以下、ATNDより抜粋

毎日のように新しい技術と情報が飛び込んでくるWeb業界。
・勉強しないとまずいなーとおもいつつ、なかなか時間がつくれない。
・1人で勉強してると、いろんな誘惑に負けてイマイチ技術習得に身が入らない。
・同じことを勉強している人と情報交換して、スキルを高めたい。

そんなふうにお考えの方。
みんなで同じ場所に集まってプチ合宿形式で技術を身に付けませんか。

基本的には毎回勉強するテーマを決めて開催しようと思いますが、何を勉強するのかはお任せします。
例えばHTML5がテーマだけど、ちょっとjQueryのことも調べてみよう、というのもOKです。
今回のテーマは「JavaScript」です。

誰かがスピーカーとして話すタイプではなく、手を動かす（何かを作る）タイプの勉強会です。
ゆるいけど、切磋琢磨する。そんな感じで勉強会をしていければいいかなと思います。
よろしくお願いします。

.fukui（ドットフクイ）とは・・・
福井クラスタが集まって勉強する会です。
クラスタとcssのclass(.)をかけてます（わかりにくい？
プロパティはHTML5やjQuery、JavaScriptなど様々です。好きなスタイルで勉強しましょう。

比較 - 9つのJavaScriptフレームワーク

この記事は有名なJavaScriptフレームワークを良くまとめ、比較できるように上手く見せてくれる。

JavaScript Framework Matrix
http://matthiasschuetz.com/javascript-framework-matrix/en/

比較対象は、jQuery, MooTools, Dojo, Prototype, Script.aculo.us, Ext JS, Spry, Glow, Yahoo! UI Libraryと多岐に渡る。
さらに、これらはGeneral, DOM Ready, DOM Basics, ....と項目毎に分かれ、コードレベルで一覧できるのだ。



最近、CMSのJoomla!に触る機会があるのだが、それにはMooToolsが組み込まれている。
個人的にこの記事はタイムリーな内容なので紹介した。

Server-Side JavaScript/ActionScript

Server-Side ActionScriptがAdobe MAX 2009で紹介されていて、「サーバーサイドもActionScriptで書けるんだぜー！」という感じのデモがされてました。
Tomcat上でActionScriptにより作られたHelloWorldが動いてて、スゲーと思ったものです。

クライアントサイド(Flex)はActionScriptで書いて、サーバーサイドはJavaで書いてってやってると、ついつい両方が混じってしまって、varつけ忘れたり、functionつけ忘れたり、型を変数の前に書いたり、よくFlex Builderにコンパイルエラーで叱られてしまいます。

クライアントサイドもサーバーサイドも同じ言語で書けると、確かにこういうイライラはなくなるのでしょうけど、言語仕様上の向き不向きってのもあると思います。
ActionScriptでマルチスレッドのコードが書けなかったりとか。
HelloWorld程度であれば、そんなことは意識しなくてもイイのでしょうけど。

そんなサーバーサイドのお話ですが、Server-Side JavaScript(ServerJS)というのがあるようですね。
Googleグループでは活発に様々な議論がなされています。
現時点のメンバー数260名、ディスカッションのメッセージ数は1月325件、2月現時点で609件です。
2月ってまだ10日ですけど？
もう追えません・・・。