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/24

GitHub API URLリスト - メモ

GitHub Developer
http://developer.github.com/

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拡張機能

https://chrome.google.com/webstore/search-extensions/楽天%20メルマガ

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

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

https://chrome.google.com/webstore/detail/rakuten-anti-mail-magazin/kclbpbfpfddcglkinajbcfcldhpdkmmk

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

https://chrome.google.com/webstore/detail/rakuten-uncheck/bgohafkdjhdgohhnhcmahhdidkkabbik

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

https://chrome.google.com/webstore/detail/%E8%87%AA%E5%8B%95%E4%BE%A1%E6%A0%BC%E6%AF%94%E8%BC%83%EF%BC%8F%E3%82%B7%E3%83%A7%E3%83%83%E3%83%94%E3%83%B3%E3%82%B0%E6%A4%9C%E7%B4%A2%EF%BC%88auto-pric/hafkflejlikjnadiclapppceddoielio

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

https://chrome.google.com/webstore/detail/deny-rakutens-mail/pigchijeckgkghjogldojaalmbackgob

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

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

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

http://emagazine.rakuten.co.jp/

2013/02/05

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

2/2(土)にとても自由なハッカソンが開催されたのでそれに参加してきました。

参加者は7人くらいと少なかったこともあり、短い時間ではありましたが落ち着いて開発することができました。

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

私はCoffeeScript(JavaScript)でChrome拡張を2つ作ったので、ここで紹介しておきます。

主にビルド周りではYeoman(Grunt)さんに助けていただきました。

ChontentEditable

https://chrome.google.com/webstore/detail/chontenteditable/amnpphhcbandchhkmgloehggicoedcpl

https://github.com/shoito/chontenteditable-chrome-extension

これはChromeで表示中のページを編集できるようにするChrome拡張です。

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

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

java2yuml

https://chrome.google.com/webstore/detail/java2yuml/glhmljgoioemnbaaijkpbiggmjkogbkb

https://github.com/shoito/java2yuml-chrome-extension

これは以前、某CV社にいた時に作ったjava2class拡張をベースに、yUMLを用いてクラス図を表現したChrome拡張です。

GitHubやBitbucket, Google Code HostingでJavaのソースコードを読んでいるときに、右上にそっとコード解析結果からクラス図を表示して、コードの理解を助けてくれます。

JavaDocを見ているときはJavaDocのHTMLをパースして、クラス図を同様に表示してくれます。

しかし、これにはちょっと欠陥があってフィールドやメソッド数が多いとyUMLに渡すURL文字列が長くなり過ぎて、正常にクラス図が作れないようです。

(502 Bad Requestとレスポンスが返ってきます)

今のところは程よいサイズのクラス限定対応になっています。

yUMLはこちらを参考に。

http://yuml.me/diagram/scruffy/class/samples

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

やっぱりもくもく開発するハッカソンは楽しいイベントですね。

2013/01/27

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

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

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

えぇ、まぁ、それだけです。

astah Nannyプラグイン

https://github.com/shoito/astah-nanny-plugin

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

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

2012/12/31

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

参考まで。

2012/10/13

Mac版astahの言語設定を日本語/英語で切り替える方法

私はMac OSの言語設定を英語に設定しているので、その上で動作するソフトも英語に対応している場合、自動的に英語表記になります。

企画の際のアイデアのまとめやシステムのラフな設計に astah というソフトを使っているのですが、それも同様です。

しかし、日本語表記で利用しているユーザーと話すとき英語表記だと通じないことがあるので、そういう時は日本語表記に切り替えて確認することもありました。

Windows版やLinux版とはやり方が違うので紹介しておきます。

1. astahのInfo.plistをエディタで開く - エディションによって違うけど下記の何れか

/Applications/astah\ community/astah\ community.app/Contents/Info.plist
/Applications/astah\ UML/astah\ UML.app/Contents/Info.plist
/Applications/astah\ professional/astah\ professional.app/Contents/Info.plist

2. VMOptionsプロパティに、-Duser.language=ja -Duser.country=JP を追加する

修正前 - OSの言語設定に従う

<key>VMOptions</key>

<string>-Xms16m -Xmx768m</string>

修正後 - 日本語表記に切り替え

<key>VMOptions</key>

<string>-Xms16m -Xmx768m -Duser.language=ja -Duser.country=JP</string>

修正後 - 英語表記に切り替え

<key>VMOptions</key>

<string>-Xms16m -Xmx768m -Duser.language=en -Duser.country=US</string>

このVMOptionsで、コマンドラインからjavaを実行するときのオプションと同等のものを指定できるので、Mac版astahでは初期ヒープサイズ(-Xms)、最大ヒープサイズ(-Xmx)のデフォルト値が設定されています。

なお、Windows版astahについては公式サイトでFAQが公開されています。

英語でastahを使用できますか
http://astah.change-vision.com/ja/faq/faq-setup/astah-inenglish.html

2012/01/10

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 へツイートいただけると嬉しいです。

2012/01/09

FreeMind Import for astah - astahプラグイン

背景

これまで6年ほどマインドマップを描いていて、ツールはMindManager, MiNDPiECE, FreeMind, astahといろいろ使ってきてました。そのため、それぞれのツールで作ったファイルがあるんですが、全てのツールに互換性がある訳じゃなくて「あー、以前描いたマインドマップが見たいのになー。」ってことがありました。
そんな訳で、まずは自分以外からも要望のあったFreeMind → astahを実現してみました。

FreeMind Import for astahとは

ソフトウェア設計支援ツール astah(旧JUDE) に、マインドマップ作成ツール FreeMind のファイル(.mm)をインポートするastahプラグインです。astah UML, professionalの何れかにインストールして利用します。

※このプラグインはastahのバージョン6.5.1以上で動作します。

※マインドマップを利用するため、astah communityでは利用できません。

※個人で作ったプロトタイプなので無保証でお願いします。

FreeMindのこんなマインドマップを↑

↑astahにインポートするとこうなります

FreeMindとは

FreeMind（フリーマインド）は、PC上でマインドマッピングとナレッジビルディングのための無料のソフトウェアである。

GPL下でソースコードが公開されているオープンソースソフトウェアである。 Javaで書かれたソースのほかに、バイナリ形式で、Microsoft Windows版、Mac OS X版、Linux (Debian、SuSE) 版が公開されている。

FreeMind - Wikipediaより引用

プロジェクトページ インストール方法など詳細は下記プロジェクトページをご覧ください。

freemind-import-for-astah

プラグイン開発について astahプラグイン開発チュートリアルとSDKが公開されているので、それをベースに開発しています。 http://astah.change-vision.com/ja/plugin-tutorial/ FreeMindファイル(.mm) 拡張子.mmのXMLファイルであり、XML Schemaが公開されています。これをJAXBバインディングコンパイラ(xjc)にかけてJavaのモデルクラスを作っています。

$ xjc src/main/resources/schema/freemind.xsd -p com.github.astah.mm2asta.model -d src/main/java

これでFreeMindファイル(.mm)をastah側で読み込むベースは出来たので、あとはプラグイン側で、読み込んだマインドマップのツリー構造通りにastahのマインドマップAPIを使って、astah側のデータを作っています。この処理はこの辺でやってます。 フィードバック

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

2011/12/20

Web Storage APIを別空間から使ってみる - HTML5 Adv

12月20日のHTML5 Advent Calendar担当の@shoitoです。

今回は、以前にも本ブログで軽く紹介したことがある、Web Storage APIをFlash側と共有する簡単な方法について紹介します。業務でHTML5(File APIやWeb Storage, Application Cache...)以外にも、Flash/Flexもまだ現役で使用中(主にメンテ)なので、その両方に関係するネタを扱うことにしました。

ページの一部にFlashが埋め込まれているようなページで、HTML部分とFlash部分の共有ストレージ領域を設けられないかと思って、Web Storage APIに今回白羽の矢が立ちました。

多くのブラウザで利用できるAPIであることが大事ですので、Web Storage APIについて確認してみると、IE6, 7以外のほとんどのブラウザで使えることがわかります。

イメージ的には下記のようになりますが、Web Storage APIはもちろんJavaScript APIなので、ページ内のJavaScriptから簡単に扱えます。しかし、Flash側からWeb Storageのストレージ領域にアクセスするAPIがありません。そこでActionScriptでWeb Storage APIを実装します。青の矢印部分。

まず、ActionScriptのAPIを実装するために、W3Cで公開されているWeb Storage API仕様を確認すると、引数、戻り値の方は基本的にvoidかDOMStringなので扱いやすそうです。

Web Storage API自体シンプルなので、メソッドの数も多くはありません。なお、Local StorageとSession Storageはインターフェースは同じで、スコープが違うだけです。

次に、実装に用いるflash.external.ExternalInterfaceクラスのリファレンスに目を通すと下記のように説明されています。

ActionScript から、HTML ページに対して次のことを実行できます。

任意の JavaScript 関数を呼び出す

引数の数を名前と共に渡す

ブール（Boolean）、数値（Number）、ストリング（String）などの各種データ型を渡す

JavaScript 関数からの戻り値を受け取る

HTML ページの JavaScript から、次のことを実行できます。

ActionScript 関数を呼び出す

標準の関数呼び出しの表記法を使用して、引数を渡す

JavaScript 関数に値を戻す

注目すべき点を太字にしましたが、ExternalInterfaceを利用することで、ActionScriptからJavaScript APIを利用できることが分かります。下記のようなイメージになります。

これに着目して、実装したActionScript APIが下記になります。

package com.google.code.as3webstorage {
    import flash.external.ExternalInterface;

    public class LocalStorage {
        public static function length():uint {
            return ExternalInterface.call("function() { return localStorage.length; }");
        }

        public static function key(index:uint):* {
            return ExternalInterface.call("localStorage.key", index);
        }

        public static function getItem(key:String):* {
            return ExternalInterface.call("localStorage.getItem", key);
        }

        public static function setItem(key:String, data:*):void {
            ExternalInterface.call("localStorage.setItem", key, data);
        }

        public static function removeItem(key:String):void {
            ExternalInterface.call("localStorage.removeItem", key);
        }

        public static function clear():void {
            ExternalInterface.call("localStorage.clear");
        }
       
        public static function available():Boolean {
            return ExternalInterface.available && ExternalInterface.call("function() { return typeof localStorage != 'undefined'; }");
        }
       
        public static function addStorageEventListener(func:Function, useCapture:Boolean = false):void {
            ExternalInterface.call("as3webstorage.assignSwf", ExternalInterface.objectID);
            ExternalInterface.addCallback("callbackToAs", func);
            ExternalInterface.call("as3webstorage.addStorageEventListener", "callbackToAs", useCapture);
        }
    }
}

ActionScriptに見慣れていない方には分かりにくいと思います。

どういうことをしているかと言うと、getItem()やsetItem()など各メソッドの中で、JavaScriptによるWeb Storage API実装を呼ぶようにしています(ラップしているだけ)。
call()メソッドの第一引数にJavaScriptコードの文字列表現、第二引数に各Web Storage APIに渡す引数を指定しています。こうすることで、ExternalInterfaceを通して、JavaScript ＜---＞ ActionScript連携が実現できます。しかし、これだけだとWeb Storage APIのStorageイベントを扱うことができません。

そこで、addStorageEventListener()用のコールバックをJavaScript側に実装します。

(function() {
    if (this.as3webstorage) return;
   
    var as3webstorage = this.as3webstorage = {
        swf: null,
       
        assignSwf: function(swfId) {
            this.swf = document.all ? window[swfId] : document[swfId];
        },

        addStorageEventListener: function(callback, useCapture) {
            window.addEventListener("storage", function(event) {
                var returnObject = {
                    "key": event.key,
                    "oldValue": event.oldValue,
                    "newValue": event.newValue,
                    "uri": event.uri,
                    "source": undefined,
                    "storageArea": undefined
                };

                as3webstorage.toNativeFunc(as3webstorage.swf, callback).apply(null, [returnObject]);
            }, useCapture);
        },
       
        toNativeFunc: function(obj, functionName) {
            return function() {
                var parameters = [];
                for(var i = 0; i < arguments.length; i++) {
                    parameters[i] = "_" + i;
                }
               
                return Function(
                    parameters.join(','),
                    'this["' + functionName + '"](' + parameters.join(',') + ')'
                ).apply(obj, arguments);
            };
        }
    };
})();

サンプルを作ったので下記で試せます。
http://dl.dropbox.com/u/227786/code/flex/as3webstorage/as3localstorage.html

本当にWeb Storageが使われているかはデベロッパーツールなどを使って確認してください。

ExternalInterfaceでJavaScript ＜---＞ ActionScript間のデータ交換はXML形式で行われるので、オブジェクトによってはデシリアライズできないものもあります。
そのため、シンプルなインターフェースなら今回のように実装することが可能なのですが、Indexed Database APIのような複雑なものだと難しそうです。

あ、これって誰得？ActionScriptの話が多くない？という感じで終わってすいません。
HTML5 Advent Calendar 2011はまだ続きますのでお楽しみに。

関連記事

Flash + HTML 5 : Offline Flash Apps using DataStore API
http://blog.flexgeek.in/2010/05/flash-html-5-offline-flash-apps-using-datastore-api/

HTML5 Web Storage APIをFlash/Flexから使う - as3webstorage
http://blog.air-life.net/2010/06/as3webstorage.html

HTML5 Geolocation APIをFlash/Flexから使う - as3geolocation
http://blog.air-life.net/2010/06/as3geolocation.html

2011/12/15

JIRA 5.0、REST APIとREST API Browser

JIRA Advent Calendarの12/15担当 @shoito です。

今回は、フライング気味にJIRA 5.0(12/15時点ではRC2)のREST APIとREST API Browser(RAB)について紹介します。
12/14担当の@showyouさんとREST APIネタで被っている気がしますが気にしませんｗ

みなさんはJIRAプラグインやJIRA連携ツールはご存知でしょうか？

初耳という方はどんなものがあるのかAtlassian Plugin Exchangeをご覧ください。

https://plugins.atlassian.com/plugin/home

Atlassian Plugin Exchange

JIRAプラグイン

JIRA以外にも、Confluence, FishEye, Bamboo, Crowd, CrucibleなどAtlassian製品のプラグインが1000以上あり、JIRAだけでも12/15時点で、395のプラグイン(または連携ツール)が公開されています。

Atlassian製品のGreenHopperやBonfireもJIRAプラグイン(+ブラウザ拡張)ですので、Atlassian Plugin Exchangeで見つけることができます。

JIRA連携ツール

JIRAはAPIを公開してくれているので、他のツールと連携させることが可能です。

SOAP、XML-RPC、REST APIと受け口は設けられていて、連携元の構成に合わせて選択できますが、今回はREST APIに焦点を絞って話を進めます。

ちなみに、連携ツールとしてはEclipseやVisualStudioなどのIDEと連携するAtlassian Connectorが私は思い浮かびます。

REST APIを試す準備

JIRA 5.0のREST APIを試すためには、まずAtlassian SDKをインストールします。

Mac OS X環境でHomebrewを使っていれば、下記のコマンドでインストールできます。

$ brew install atlassian-plugin-sdk

他の環境の方はAtlassian Developersからダウンロードし、PATH変数の設定などを行います。

https://developer.atlassian.com/display/HOME/Welcome

Atlassian Developers

この辺はInstalling the Atlassian Plugin SDKが参考になります。

https://developer.atlassian.com/display/DOCS/Installing+the+Atlassian+Plugin+SDK

次に、JIRAプラグイン/連携ツール開発用のJIRAを立ち上げるために、プロジェクトを作ります。

JIRA 5にするのかい？4にするのかい？と聞かれるので、JIRA 5を使うように1を選択しましょう。

$atlas-create-jira-plugin

A new plugin structure is required for JIRA 5 plugins due to significant changes in the APIs.

Create a plugin for?

1) Shiny new JIRA 5

2) Regular 'ol JIRA 4 (or earlier)

mavenプロジェクトのgroupIdやartifactIdなどの入力を求められるので、適当に入力します。

Define value for groupId: : com.github.astah

Define value for artifactId: : jira-connector

Define value for version: 1.0-SNAPSHOT: :

Define value for package: com.github.astah: : com.github.astah.connector.jira

Confirm properties configuration:

groupId: com.github.astah

artifactId: jira-connector

version: 1.0-SNAPSHOT

package: com.github.astah.connector.jira

このままの状態で、atlas-run コマンドを実行してJIRAを起動すると5.0-beta1で起動してしまうので、pom.xmlのjira.versionを最新バージョンに変更します。

REST APIは5.0 finalに向けてどんどん追加されていっていたので、beta1のままだと扱えないAPIがあるためです。

[before]
＜jira.version＞5.0-beta1＜/jira.version＞

[after]
＜jira.version＞5.0-rc2＜/jira.version＞

pom.xmlを編集し終えたら、atlas-run コマンドを実行します。

$ atlas-run

JIRAの実行に必要なライブラリが大量にmavenリポジトリからダウンロードされ、私の家の貧弱な回線では30分程度時間がかかったので、この間にランチやディナーにでも行ってください。

さぁ、これでJIRAのREST APIを試す環境はできましたが、このままではプロジェクトも課題もadmin以外のユーザーも存在しないので、適当なプロジェクトを作って、課題を幾つか登録しておくことをお勧めします。

(準備でここまで...)

REST API

REST APIを使うことでプロジェクト、ユーザー、課題の検索や操作などが行えます。

では、JIRA REST API Tutorials を見ながら幾つか試してみましょう。

https://developer.atlassian.com/display/JIRADEV/JIRA+REST+API+Tutorials

下記の例では、初期状態で登録されているadminユーザー、パスワードadminでREST APIを読んでいます。

課題JAC-1の詳細をJSON形式で取得

$ curl -u admin:admin http://localhost:2990/jira/rest/api/2/issue/JAC-1

JIRAにあるプロジェクトの一覧をJSON形式で取得

$ curl -u admin:admin http://localhost:2990/jira/rest/api/2/project/

adminユーザーにアサインされている課題の一覧をJSON形式で取得

$ curl -u admin:admin http://localhost:2990/jira/rest/api/2/search?jql=assignee=admin

というように、これは一例ですがこれまでもREST APIを試すことが出来ました。

しかし、curlコマンドやREST ConsoleよりもJIRAに特化して試しやすいツールがAtlassian SDK 3.6.2から登場しました。それがREST API Browserです。

REST API Browser(RAB)

Atlassian SDKに含まれるJIRAプラグイン。各種REST APIをブラウザ上から試すことができます。

http://localhost:2990/jira/plugins/servlet/restbrowser

REST API Browser

何が便利かというと、まず各APIのパラメーターをイチイチ調べなくて良くなりました。

各APIを試すためのフォームが設けられていて、そこにパラメーターの入力フィールドもあるため、このAPIのパラメーターはprojectIdと何を指定するんだっけ？issueId？fieldsだっけ？ということがなくなりました。

レスポンスのJSONも当たり前のように整形されていてステキです。

まず上部から試したいAPIを選択します。

ここでは、11番目くらいにあるAtlassian JIRA - Plugins - REST Plugin (/rest/api/2)を試しましょう。

次に、adminユーザーにアサインされている課題の一覧を取得してみます。

/search を選択し、jql フォームに assignee=admin と入力し、Executeボタンを押下します。

するとスクリーンショットにあるように、リクエスト、レスポンスヘッダ、レスポンスボディが確認できます。

ちなみに、選択できるカテゴリを数えてみたら34ありました。スゴいなー。

Applinks Product Plugin
Atlassian Developer Toolbox
Atlassian Embedded Crowd - Administration Plugin
Atlassian JIRA - Plugins - Admin Quick Navigation
Atlassian JIRA - Plugins - Common AppLinks Based Issue Link Plugin
Atlassian JIRA - Plugins - Confluence Link
Atlassian JIRA - Plugins - Gadgets Plugin
….

まとめ

準備のため長い前置きとREST APIとREST API Browserについて紹介しました。

REST API Browserの登場のおかげで、連携ツールの開発が進めやすくなったと思います。

是非、来年(？)正式リリース予定のJIRA 5.0のREST APIで遊んでみてください。

注意

atlas-runで起動したJIRAでは、JIRA_HOMEがtarget/jira/home ディレクトリに設定されているため、atlas-cleanコマンド(mvn clean)を実行するとキレイさっぱりと消えてしまいます。

そもそも開発用ですので、適宜データをExportしておくか、消えるのを覚悟しておいてください。

次の担当は @literaliceさんです。お楽しみに！

JIRA Advent Calendar (#jiraadvent) ではあと10人(9人？)の書き手が不足しているようなので、JIRAを既に使いこなしている方もまだまだこれからという方も立候補してみてはいかがでしょう。

最後に
REST API周りでは @kompiroさんとの会話で気づいたことや存在を教えてもらったことが含まれています。@kompiroさん、ありがとうございます。

2011/11/27

Backlog Connector for astah - astahプラグイン

背景

Backlog Connector for astahは「Cacoo Finder - ブラウザ拡張」と同様にMA7向けに、何か提供できるアプリ/サービスがないか考えてプライベートで開発したものです。
しかし、MA7の締め切りには間に合わなかったので、残念ながら応募はできませんでした。

Backlog Connector for astahとは

ソフトウェア設計支援ツール astah(旧JUDE) から、Backlogの課題を確認/作成/編集ができるastahプラグインです。astah community, UML, professionalの何れかにインストールして利用します。なお、プラグインはastahのバージョン6.5以上でないと利用できません。
ちなみに個人で作ったプロトタイプなので無保証でお願いします。

ご存知ない方のために紹介しますが、Backlogは、Cacooと同様にヌーラボが提供しているプロジェクト管理のためのサービスです。XML-RPCによる実装のAPIが公開されているので、astahプラグインからそのAPIをコールして利用しています。

プロジェクトページ

backlog-connector-for-astah

インストール

astahのインストールフォルダ/plugins に connector-backlog-x.x.x.jar ファイルをコピーしてastahを再起動します。 ※astahバージョン6.5以上のインストール この辺から各OS用のインストーラーをダウンロードして、実行します。 http://astah.change-vision.com/ja/product/astah-community.html

アンインストール

astahのインストールフォルダ/plugins から connector-backlog-x.x.x.jar ファイルを削除してastahを再起動します。

使用方法 プロトタイプレベルなので、Youtube動画をご覧いただければ十分です。 http://www.youtube.com/watch?v=kh61BBOTyRg

フィードバック

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

2011/11/01

astah Viewer Gadget - OpenSocial Gadget

背景

こちらも「Cacoo Finder - ブラウザ拡張」と同様にMA7向けに、何か提供できるアプリ/サービスがないか考えて開発したものです。

astah Viewer Gadgetとは

astah(旧JUDE)製品で作られた設計情報を見るためのOpenSocial Gadgetです。

astah Viewer Gadgetを使うことで、astahで描かれたUML、ER図、データフロー図、フローチャート、CRUD、要求図、マインドマップをOpenSocial対応インフラ上で見ることができます。

infoScoop OpenSourceをターゲットにしていますが、OpenSocial Gadgetの仕様に沿って作っているため、infoScoop以外にも、iGoogleでもご利用いただけます。

インストール

各OpenSocialインフラ上でガジェットの追加メニューから、ガジェットのURLとして下記を指定します。

Gadget URL

http://f.air-life.net/apps/gadgets/astah/astah-gadget.xml

使用方法

astah ViewerをinfoScoopやiGoogleなどのガジェットとして追加する
astah(旧JUDE)製品で作られた.asta/.judeファイルをastah publishで公開する
ガジェット設定のastah URLに.asta/.judeファイルのURLを入力する
[例: http://p.astah.net/a/dademo]

フィードバック

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

Cacoo Finder - ブラウザ拡張

背景
毎年9月〜11月上旬にかけて開催されているMashup Awardsですが、今回で7回目(MA7)になります。
応募条件は、MA応募対象になっている数百あるWeb API/プラットフォームを一つ以上使ったアプリ/サービスです。
http://ma7.mashupaward.jp/outline?locale=ja

数百あってどのAPIを使ったものかと考えていたところ、良く使わせてもらっているヌーラボのCacooもAPIを提供していたので、それを使用したブラウザ拡張を作りました。

Cacoo Finderとは
Web上で図の作成＆リアルタイムコラボレーションサービスCacooをブラウザでより簡単に使える、”非公式”のブラウザ拡張です。

Cacoo Finderでは、以下の機能をご利用いただけます。

Cacooで作った図の情報を確認
Cacooで作った図に簡単にアクセス
Cacooで新規に図の作成
図のコメントを確認／追加

ダウンロード
Google Chrome用
https://chrome.google.com/webstore/detail/pcfedgjdgkacloiabdlghochjfmnalck?hl=ja

Firefox用
自動アップデート対応のため、一時的に非公開

Safari用
http://dl.dropbox.com/u/227786/app/safari/CacooFinder/CacooFinder.safariextz

使用方法

利用しているブラウザ用のファイルを上記URLからダウンロード/インストールします。
ブラウザにCacoo Finderのボタンが追加されているので、それをクリックします。
初回実行時には、CacooのAPIキー入力フォームが表示されるので、APIキーボタンをクリックして、CacooのAPIキーを生成/コピーします。
Cacoo FinderにCacooのAPIキーを設定すると、あなたの作成した図、または他のユーザーから共有されている図の一覧が表示されます。
図の一覧からは、素早く図を開く、各図のシートやコメントを確認する、コメントを書き込むなどの操作が可能です。

※ CacooのAPIキーを再作成した場合は、Cacoo FinderでAPIキーの再設定を行う必要があります。

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

※2013/01/23追記
ソースコードを公開していなかったことに気付いたので、CoffeeScript(JavaScript), LESS(CSS), Knockout.js(MVVM), Yeoman(Grunt)を利用して再構築し、GitHubに公開しました。
http://blog.air-life.net/2013/01/cacoo-findercoffeescript-less-knockout.html

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

登録: 投稿 (Atom)