2013/08/05

オムニボックスからニコニコで検索 - 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に変更しました。


2013/07/30

「レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック」レビュー

レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック
菊池 崇(著) アスキー・メディアワークス
アスキー・メディアワークス様から本日発売、菊池 崇さんが書かれた「レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック」を頂戴いたしました。

PCだけでなく、iPhoneやAndroidなどのスマートフォン、iPadなどのタブレットなど多種多様なデバイスで見られるWebサイト。昨今はそのマルチデバイス対応が求められていますが、デバイス毎にHTMLファイルを用意して対応するのではなく、1つのHTMLファイルで対応する手法「レスポンシブWebデザイン」について解説しています。

導入編、基礎編、実践編、応用編で構成されており、レスポンシブWebデザインを基礎から学び、実践で活かせるテクニックまで総合的に学べる書籍でした。

既にレスポンシブWebデザインについて知っている方でも、現在W3Cで策定中のCSSの仕様に触れていたり、即活用できるツールやライブラリがソースコードを用いて詳細に紹介されてるので、読んで得るものがあると思います。

所々散りばめられている「ワンポイント」や「Follow up」により、分かった気になっていたけれど、実は知らなかったことに気付くこともあるのではないでしょうか。
個人的には「デザイニングインザブラウザを助けるツール」、これについて早く知っておけば、あの時もっと楽だったのにな...と悔やまれます。

デザイナではないエンジニアの私にとっては、応用編の「軽量化のための画像編集のアイデア」で紹介されているテクニックが新鮮で参考になりました。
読みやすい構成とボリュームなので、もう一度読み返して知識を深めようと思います。

2013/06/19

Confluenceプラグインの作り方 - Cacoo Diagramming for Confluence

何だかんだ書いたけど、まずは公式のGetting Startedに目を通しましょう。
https://developer.atlassian.com/display/DOCS/Getting+Started

今回、作成したプラグインがこちら。

Cacoo Diagramming for Confluence
https://github.com/shoito/cacoo-confluence

Cacoo Diagramming for Confluence | Atlassian Marketplace
https://marketplace.atlassian.com/plugins/com.github.shoito.confluence.integration.cacoo


まず始めにAtlassian Plugin SDKをインストールしておきます。
Macの人ならhomebrewを使って、以下のコマンドを実行するだけで良いです。

$ brew install atlassian-plugin-sdk

次にAtlassian Plugin SDKのatlas-create-xxxコマンドでプラグインプロジェクトを作ります。

$ atlas-create-confluence-plugin

名称やバージョンなどのプロジェクト情報を設定するため、いくつか質問されるので答えていきます。
ここでの回答内容はプロジェクト直下のMavenのpom.xmlファイルに反映されるので、上記コマンド実行後に変更したい場合はpom.xmlファイルを編集することになります。
※groupIdとartifactIdはJavaのpackageとして反映されるので、packageに指定可能な文字列で構成されている必要があります。
test-macroのように‘ - '(ハイフン)を含めることはできないので要注意。

Executing: /usr/local/Cellar/atlassian-plugin-sdk/4.2.0/libexec/apache-maven/bin/mvn com.atlassian.maven.plugins:maven-confluence-plugin:4.2.0:create -gs /usr/local/Cellar/atlassian-plugin-sdk/4.2.0/libexec/apache-maven/conf/settings.xml
[INFO] Scanning for projects...
[INFO] ------------------------------------------------------------------------
[INFO] Building Maven Default Project
[INFO]    task-segment: [com.atlassian.maven.plugins:maven-confluence-plugin:4.2.0:create] (aggregator-style)
[INFO] ------------------------------------------------------------------------
[INFO] [confluence:create]
[INFO] Google Analytics Tracking is enabled to collect AMPS usage statistics.
[INFO] Although no personal information is sent, you may disable tracking by adding false to the amps plugin configuration in your pom.xml
[INFO] Sending event to Google Analytics: AMPS:confluence - Create Plugin
[INFO] determining latest stable product version...
[INFO] artifact com.atlassian.confluence:confluence-webapp: checking for updates from atlassian-public
[INFO] artifact com.atlassian.confluence:confluence-webapp: checking for updates from atlassian-plugin-sdk
[INFO] artifact com.atlassian.confluence:confluence-webapp: checking for updates from central
[INFO] using latest stable product version: 5.1.4
[INFO] determining latest stable data version...
[INFO] artifact com.atlassian.confluence.plugins:confluence-plugin-test-resources: checking for updates from atlassian-public
[INFO] artifact com.atlassian.confluence.plugins:confluence-plugin-test-resources: checking for updates from atlassian-plugin-sdk
[INFO] artifact com.atlassian.confluence.plugins:confluence-plugin-test-resources: checking for updates from central
[INFO] using latest stable data version: 5.1.4
Define value for groupId: : com.github.shoito.confluence.integration
Define value for artifactId: : testmacro
Define value for version:  [1.0-SNAPSHOT]: 0.1.0-SNAPSHOT
Define value for package:  [com.github.shoito.confluence.integration]: com.github.shoito.confluence.integration.testmacro
groupId: com.github.shoito.confluence.integration
artifactId: testmacro
version: 0.1.0-SNAPSHOT
package: com.github.shoito.confluence.integration.testmaccro
 [Y]: Y
[INFO] Setting property: classpath.resource.loader.class => 'org.codehaus.plexus.velocity.ContextClassLoaderResourceLoader'.
[INFO] Setting property: velocimacro.messages.on => 'false'.
[INFO] Setting property: resource.loader => 'classpath'.
[INFO] Setting property: resource.manager.logwhenfound => 'false'.
[INFO] [archetype:generate]
[INFO] Generating project in Batch mode
[INFO] Archetype repository missing. Using the one from [com.atlassian.maven.archetypes:confluence-plugin-archetype:RELEASE -> https://maven.atlassian.com/public] found in catalog internal
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESSFUL
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 1 minute 52 seconds
[INFO] Finished at: Mon Jun 17 19:43:18 JST 2013
[INFO] Final Memory: 49M/122M
[INFO] ------------------------------------------------------------------------   

これでプロジェクトフォルダと初期ファイルが出来たので、カレントディレクトリを移動します。
$ cd testmacro

中身は以下のように、最低限のプロダクトコードとプラグイン定義ファイル、テストコードが作られています。
$ tree
.
|-- LICENSE
|-- README
|-- pom.xml
`-- src
    |-- main
    |   |-- java
    |   |   `-- com
    |   |       `-- github
    |   |           `-- shoito
    |   |               `-- confluence
    |   |                   `-- integration
    |   |                       `-- testmaccro
    |   |                           |-- MyPluginComponent.java
    |   |                           `-- MyPluginComponentImpl.java
    |   `-- resources
    |       |-- atlassian-plugin.xml
    |       |-- css
    |       |   `-- testmacro.css
    |       |-- images
    |       |   |-- pluginIcon.png
    |       |   `-- pluginLogo.png
    |       |-- js
    |       |   `-- testmacro.js
    |       `-- testmacro.properties
    `-- test
        |-- java
        |   |-- it
        |   |   `-- com
        |   |       `-- github
        |   |           `-- shoito
        |   |               `-- confluence
        |   |                   `-- integration
        |   |                       `-- testmaccro
        |   |                           `-- MyComponentWiredTest.java
        |   `-- ut
        |       `-- com
        |           `-- github
        |               `-- shoito
        |                   `-- confluence
        |                       `-- integration
        |                           `-- testmaccro
        |                               `-- MyComponentUnitTest.java
        `-- resources
            `-- atlassian-plugin.xml
30 directories, 14 files 

既にこのプラグインをインストールされた状態のConfluenceを起動できる状態になっています。
この状態で、Confluenceを起動しましょう。
$ atlas-run
Executing: /usr/local/Cellar/atlassian-plugin-sdk/4.2.0/libexec/apache-maven/bin/mvn com.atlassian.maven.plugins:maven-amps-dispatcher-plugin:4.2.0:run -gs /usr/local/Cellar/atlassian-plugin-sdk/4.2.0/libexec/apache-maven/conf/settings.xml
[INFO] Scanning for projects...
[INFO] ------------------------------------------------------------------------
[INFO] Building testmacro
[INFO]    task-segment: [com.atlassian.maven.plugins:maven-amps-dispatcher-plugin:4.2.0:run]
[INFO] ------------------------------------------------------------------------
[INFO] Preparing amps-dispatcher:run
[INFO] [confluence:copy-bundled-dependencies]
[INFO] [dependency:unpack-dependencies]
....
[INFO] [talledLocalContainer] testmacro (com.github.shoito.confluence.integration.testmacro, Version: 0.1.0-SNAPSHOT, Installed: bundled)
[INFO] [talledLocalContainer]
[INFO] [talledLocalContainer] 2013-06-17 22:12:09,722 INFO [main] [com.atlassian.confluence.lifecycle] init Confluence is ready to serve
[INFO] [talledLocalContainer] 6 17, 2013 10:12:09 ?? org.apache.coyote.http11.Http11Protocol start
[INFO] [talledLocalContainer] ??: Coyote HTTP/1.1? http-1990 ??????
[INFO] [talledLocalContainer] 6 17, 2013 10:12:09 ?? org.apache.jk.common.ChannelSocket init
[INFO] [talledLocalContainer] ??: JK: ajp13 listening on /0.0.0.0:8009
[INFO] [talledLocalContainer] 6 17, 2013 10:12:10 ?? org.apache.jk.server.JkMain start
[INFO] [talledLocalContainer] ??: Jk running ID=0 time=0/75  config=null
[INFO] [talledLocalContainer] 6 17, 2013 10:12:10 ?? org.apache.catalina.startup.Catalina start
[INFO] [talledLocalContainer] ??: Server startup in 120479 ms
[INFO] [talledLocalContainer] Tomcat 6.x started on port [1990]
[INFO] confluence started successfully in 659s at http://test.local:1990/confluence
[INFO] Type Ctrl-D to shutdown gracefully
[INFO] Type Ctrl-C to exit  

簡単なマクロ程度なら、編集するファイルは2, 3で済みます。
プラグイン定義ファイル
こちらにプラグインの名称やリソースを指定します。
https://github.com/shoito/cacoo-confluence/blob/master/src/main/resources/atlassian-plugin.xml

・マクロクラス
Macroインターフェースをimplementsしたクラス。
マクロの編集画面から受け取ったパラメーターを処理したり、テンプレートを読み込んだりします。
https://github.com/shoito/cacoo-confluence/blob/master/src/main/java/com/github/shoito/confluence/integration/cacoo/macro/CacooMacro.java

編集が終わったら、再度Confluenceを立ちあげて確認する。
$ atlas-run

まずはここまで。

※ atlas-runで立ち上がるConfluenceはプラグイン開発用に提供されるものなので、実運用には使用できません。

2013/02/23

楽天のあのメルマガから逃れるために

楽天といえば、最後の最後に登場するメールマガジンのチェックをオフにする作業。
デフォルトでチェックボックにチェックが入っていますが、あれを外すのを忘れると不要なメールが届くようになってしまいます。
(最近は選択解除リンクがついて改善してる??)

少なくとも私の周囲では不評で、デフォルトはオフにしておいて欲しいという声が聞こえてきますし、私自身もそうです。

そんな願いを叶えたいと思い、慣れているChrome拡張機能を作ろうと思ったので事前に調べたところ既にいくつか公開されていました。

Chrome拡張機能


ユーザー数は2013/02/23時点のもの。

Rakuten Anti Mail Magazine - ユーザー数: 4,691 人

Rakuten UnCheck - ユーザー数: 4,608 人

自動価格比較/ショッピング検索 - ユーザー数: 2,628 人

Deny RAKUTEN'S Mail - ユーザー数: 458 人


すべての動作確認をとったわけではありませんが「楽天」「メルマガ」「停止」「迷惑」「スパム」辺りをキーワードにChrome Web Storeから拡張機能を検索すると他にも見つけられるかもしれません。

Google Chrome以外のブラウザ、Firefoxにも類似のアドオン機能があるので、お使いのブラウザにあったものを導入して、環境改善をしてみてはいかがでしょうか。

上記で紹介したChrome拡張機能は予防線をはるもので、既に登録済みのメルマガについて登録解除したい場合はこちらから一括で解除できるようです。

2013/02/05

Hackathonでこんなプレゼンをしてみた

2/2(土)にとても自由なハッカソンが開催されたのでそれに参加してきました。
参加者は7人くらいと少なかったこともあり、短い時間ではありましたが落ち着いて開発することができました。

ハッカソンの最後にあったプレゼンタイムでは、上記スクリーンショットのように、ChontentEditableを使ってGoogleの検索結果画面を編集し、スライド代わりにしました。

私はCoffeeScript(JavaScript)でChrome拡張を2つ作ったので、ここで紹介しておきます。
主にビルド周りではYeoman(Grunt)さんに助けていただきました。

ChontentEditable

これはChromeで表示中のページを編集できるようにするChrome拡張です。
やっていることは簡単で、ボタンをポチッと押したらhtmlタグにcontenteditable属性を付与/削除して、テキスト編集モードのON/OFFを切り替えられるようにしています。

てっきりアプリのデモだけかと思ったら、前の発表者の方々が自己紹介〜いろいろスライドを作ってたので、即席で作りましたがChontentEditable拡張のデモにもちょうど良い感じになりました。

java2yuml

これは以前、某CV社にいた時に作ったjava2class拡張をベースに、yUMLを用いてクラス図を表現したChrome拡張です。
GitHubやBitbucket, Google Code HostingでJavaのソースコードを読んでいるときに、右上にそっとコード解析結果からクラス図を表示して、コードの理解を助けてくれます。
JavaDocを見ているときはJavaDocのHTMLをパースして、クラス図を同様に表示してくれます。


しかし、これにはちょっと欠陥があってフィールドやメソッド数が多いとyUMLに渡すURL文字列が長くなり過ぎて、正常にクラス図が作れないようです。
(502 Bad Requestとレスポンスが返ってきます)
今のところは程よいサイズのクラス限定対応になっています。

yUMLはこちらを参考に。

最近、Chrome拡張やastahプラグインばかりを作っていたので、そろそろWebサービスやタブレット用アプリの開発に戻りましょうかねぇ。
やっぱりもくもく開発するハッカソンは楽しいイベントですね。

2013/01/27

astahにクラウディアさんからの癒しを

長時間仕事をしていて疲れたとき、そんなホッと一息つきたくなるようなときでも、仕事が立て込んでいるとそうもいかないので、じゃあ、強制的に割り込んできてもらいましょう。

今回作ったのは、システム設計支援ツールのastahを長時間使用していると、Windows Azure公認キャラクターのクラウディア・窓辺さんが、あなたに優しいお顔と音声で休憩を促してくれるプラグインです。
えぇ、まぁ、それだけです。

astah Nannyプラグイン

4時間くらい仕事をしていると疲れたあなたに優しく声をかけてくれて、断ると1時間後にまた優しく声をかけてきてくれます。
興味をもった奇特な方はGitHubからclone/forkして、メッセージや音声は自分好みにカスタマイズしてくれてかまいません。

※ ホントはastahで操作したファイルや図、モデルの数値や時間を計測してゴニョゴニョしたかったんだけど、途中でAPIが足りないことに気付いて、なぜかこんなものに化けてしまった...。

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で再構築

2013/01/23

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

2013/01/09

2012年に最も驚愕したニュース

2012年にショイトォが最も驚愕したニュース

株式会社伊藤ショウ 事業停止

ちなみに私とは一切関係なく、この会社のことは速報ではじめて知りました。
確かに背が高いし、O型だけど。

2013/01/01

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周りで変更があったんかな。