AIRLife.net

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

2013-08-05T22:47:00.000+09:00

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に変更しました。

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

2013-07-30T00:10:00.000+09:00

レスポンシブWebデザイン　マルチデバイス時代のコンセプトとテクニック
菊池崇（著）アスキー・メディアワークス

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

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

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

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

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

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

GitHub API URLリスト - メモ

2013-06-24T00:19:00.001+09:00

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

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

2013-06-19T00:02:00.001+09:00

何だかんだ書いたけど、まずは公式の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-23T16:00:00.002+09:00

楽天といえば、最後の最後に登場するメールマガジンのチェックをオフにする作業。

デフォルトでチェックボックにチェックが入っていますが、あれを外すのを忘れると不要なメールが届くようになってしまいます。

(最近は選択解除リンクがついて改善してる？？)

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

そんな願いを叶えたいと思い、慣れている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/

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

2013-02-05T00:12:00.001+09:00

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サービスやタブレット用アプリの開発に戻りましょうかねぇ。

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

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

2013-01-27T23:56:00.001+09:00

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

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

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

astah Nannyプラグイン

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

4時間くらい仕事をしていると疲れたあなたに優しく声をかけてくれて、断ると1時間後にまた優しく声をかけてきてくれます。

興味をもった奇特な方はGitHubからclone/forkして、メッセージや音声は自分好みにカスタマイズしてくれてかまいません。

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

YeomanでCoffeeScript & LESS構成

2013-01-27T17:25:00.000+09:00

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

2013-01-23T00:55:00.002+09:00

ふと、以前の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

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

2013-01-09T00:16:00.002+09:00

2012年にｼｮｲﾄｫが最も驚愕したニュース

ちなみに私とは一切関係なく、この会社のことは速報ではじめて知りました。

確かに背が高いし、O型だけど。

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

2013-01-01T01:51:00.001+09:00

$ 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

2012-12-31T18:20:00.001+09:00

フロントエンド開発のワークフローをサポートしてくれるコマンドラインツールの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

参考まで。

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

2012-10-13T20:24:00.006+09:00

私は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

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

2012-01-10T06:00:00.000+09:00

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

FreeMind Import for astah - astahプラグイン

2012-01-09T18:58:00.002+09:00

背景

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

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

2011-12-20T01:00:00.000+09:00

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

JIRA 5.0、REST APIとREST API Browser

2011-12-15T01:40:00.000+09:00

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さん、ありがとうございます。

Backlog Connector for astah - astahプラグイン

2011-11-27T23:28:00.001+09:00

背景

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

astah Viewer Gadget - OpenSocial Gadget

2011-11-01T00:49:00.000+09:00

背景

こちらも「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 - ブラウザ拡張

2011-11-01T00:48:00.000+09:00

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

私の福井県立図書館の利用法

2011-06-12T21:27:00.012+09:00

私は最寄り図書館の福井県立図書館に、隔週〜月イチくらいのペースで通っています。
貸し出し期間が2週間なので、隔週で行くことが多いですね。

大きな地図で見る

福井県立図書館に限らず、図書館には多くの本があり目的の本を見つけるのも一苦労ですし、いちいち図書館の検索システムで探すのも面倒だなと思ってました。

そんな中、Amazonのページから最寄りの図書館の蔵書を”自動で”検索できる便利なブラウザ拡張Libronの登場は、これぞ待ち望んでいたものでした。
LibronはChrome/Firefox/Safariに対応しているので、多くのユーザー環境で利用できます。

私の場合は、Chrome版のLibronと、Userscript(実質1行)を合わせて利用しています。

Chrome拡張 Libron
https://chrome.google.com/webstore/detail/fpfgglfemmnflnmjminpghmeiajcajoi

Userscript



// ==UserScript==

// @name              福井県立図書館予約システム利用支援スクリプト

// @namespace      http://labs.shoito.me/userscripts/

// @description      福井県立図書館予約システムで、資料を受け取る館に「県図書」を設定

// @include            https://www.library.pref.fukui.jp/cgi-bin/Sfkisyoc.sh

// ==/UserScript==

(function(){

document.getElementsByName('yukn')[0].value='01';

})();

このUserscriptが何をしているかというと、@descriptionにも書いているように、資料を受け取る館に「県図書」を設定しているだけです。
県立図書館のシステムで、この項目は「未選択」になっていて、いちいちマウスで「県図書」を選択しないと進めないので、私にとっては無意味な操作を繰り返さないといけなかったんです。
ドロップダウンメニューのこの操作を省略したおかげで、図書館予約システムのボタンのクリック操作だけで済むようになってます。

0. Amazonで気になる本を都度、欲しいものリストに追加しておく

1. Amazonの欲しいものリストページを開く

2. 目当ての本の「福井県立図書館で予約する」を選択する

3. 予約ボタンを選択する (ここから福井県立図書館の予約システム)

4. 利用カードの番号、パスワードの入力をする (ブラウザに記憶してあるので自動入力 - なんで毎回入力せにゃいかんのやろ)

5. 資料を受け取る館を選択して、予約ボタンを選択する (Userscriptが自動設定)

6. 2〜5を読みたい本の分だけ繰り返す

以前はAmazonの欲しいものリストから本当に読みたいものだけを、図書館の検索システムで検索して予約していた
んですが、Libronのおかげで簡単に図書館に本があることの確認もできるし、予約もできるようになりました。
おかげで、今は図書館のカウンターへ行って予約した本を受け取るだけと楽になってます。

Thanks Libron!

UPGRADE JAPAN!!で話してきた | HTML5時代の技術の恩恵を受けるには

2011-06-05T00:15:00.004+09:00

HTML5時代の技術の恩恵を受けるには

View more presentations from Sho Ito

HTML5時代の技術、その恩恵を受けるにはどうすれば良いのか15分という短い時間ですが紹介させていただきました。
難しい内容もあったかもしれませんが、聞いてくださった皆さんが少しでもHTML5に興味を持って、調べたり、実際に使うきっかけになると嬉しいです。

HTML5やCSS3など、新しい技術を使おうにもInternet Explorer 6, 7, 8などの非モダンブラウザのことを考えると使用するのを躊躇してしまう現場もあると思います。
そんな現場でもHTML5やCSS3の利用を支援してくれるライブラリ群(Polyfill)をいくつか紹介しました。

※6/8(水)追記：セッションの内容を補完してくれる記事が本日公開されていました。

HTML5&CSS3入門 with HTML5 パック第6回 Graceful DegradationとPolyfill
by 小山田晃浩さん
http://www.adobe.com/jp/joc/devnet/dreamweaver/articles/html5pack_css3_part6.html

※6/9(木)追記：セッション中に省略したGraceful Degradation, Regressive Enhancement, Progressive Enhancementについての参考にどうぞ。

第16回HTML5とか勉強会 Progressive Enhancement
by 羽田野太巳さん
http://www.html5.jp/blog/?p=503

データ復旧のためのHDD取り扱いについて

2011-03-20T21:08:00.008+09:00

石巻市で津波の被害にあった関係者から「サーバーが海水に浸かってしまったのだが何とかHDDからデータを復旧したい。可能性があるのならどうしたら良いか。」という相談を受けるという機会があったので、少しだけ情報を共有しておく。

相談者の利用しているサーバーはDell(デル株式会社)の物だったため、Dellにデータ復旧の件で電話したところ、Dellではそのようなサービスは行っておらず、株式会社ワイ・イー・データのオントラックというサービスを紹介された。

データ復旧/復元サービスオントラック(株式会社ワイ・イー・データー)
http://www.ontrack-japan.com/

電話にてHDDドライブが海水に浸かってしまっている、泥がドライブ内部に混入している可能性もあることを伝え、対応方法を伺った。
すると同様の問題に遭遇した人たちに向けて「水没ドライブ取り扱い」という案内を掲載してくれていたので紹介する。
詳細はリンク先を参照していただきたい。

水没ドライブ取り扱い
http://knowledge.ontrack-japan.com/guide/flood_drives.html

近年発生した水害からの教訓より、洪水等で水没してしまったハードディスク・ドライブ（HDD、HD）等の媒体（メディア）からデータを復旧するにあたっての注意点をお知らせいたします。下記の注意点を守って頂く事でデータ復旧できる可能性が上がります。
一般的な注意点
....
ハードディスク（HDD、HD）をお送りになるときの注意点
....

現在、仙台市でデータ復旧サービスを提供している株式会社データサルベージコーポレーションが「仙台営業所への持込に限定」「データ容量が1GB以下」「障害のレベルが軽度、中度に分類されるもの」のようにかなり厳しい条件ではあるが3/25日まで無償で復旧してくれるらしい。
被災地では、運送業者がまだ機能しておらず、自分で持って行くしか手段がない状態であるため、このように現地の営業所で受け付けてくれることは重要だと思う。

被災して読めなくなったHDDを無償で即日復旧、病院や学校のデータを優先
http://itpro.nikkeibp.co.jp/article/NEWS/20110315/358368/

是非、被災地の法人/個人のためデータ復旧サービスを提供する企業には、費用の値引きを検討していただきたい。
サーバーやPCはまだ買い替えれば済むが、データの価値はそれら以上に遥かに高いものなので。

福井でみんなで集まってサービス/ソフトウェアを作ってみませんか？[3/5, 3/12]

2011-03-01T00:18:00.015+09:00

2011年3月5日(土), 3月12(土)に第2回Google Hackathon for GAE in 福井が開催されます。なんで第２回かというと、2010年は2月にGoogle App Engine、4月にChrome拡張をテーマにGoogle Hackathonが行われており、無料で使えるクラウドプラットフォーム Google App Engine(GAE)をテーマにするのが2回目だからです。

今回は3月12日のHackathon当日に、京都GTUG(Google Technology User Group)からGoogle API Expertの山下さん、GoogleからGoogle App Engineを担当されている松尾さんに来ていただきます。GAE/Python、GAE/Javaの先生がいるのでここぞとばかりに疑問をぶつけるチャンスかと思います。

現在の申込者の統計(だいたい)としては、下記のようなデータとなっています。
GAE初心者：90%
デザイナー：20%
女性：10%

「Hackathon？レベルの高い人たちの集まりかな？そんなの怖いわー。ついてけないよ。」という心配はありません。事前勉強会やIdeathonからHackathonまでの準備期間が十分にありますので 学生や初心者の方も安心してご参加いただいております。

また、バックエンドはGoogle App Engine + 各種Webサービス、フロントエンドはPC/Mac、iPhone/Android/ガラケーというように組み合わせはいろいろ考えられますので、フロントエンドのデザイン/開発をしたい方の参加も強く願っています。
是非、JavaScript , Objective-C , HTML5 , CSS3 など持っている知識を存分に活かしてください。

====== イベント案内 ======
■名称
　第2回Google Hackathon for GAE in 福井
■申し込み
　こちらのフォームからお申込みをお願いします。
　http://goo.gl/UMfRE
■日程
　2011年3月5日(土) 事前勉強会, Ideathon
　　　　　12日(土) Hackathon

　※Hackathonのみの参加は原則出来ません。Ideathonにもご参加下さい。
　難しいなという方はコチラへご相談ください -> gh.fukui at gmail.com
■スケジュール
　3月5日（土）
　　12：30 ～　開場
　　13：00 ～ 15：00　事前勉強会(こちらは必須ではありません)
　　　GAE/Java編　　@shoito
　　　GAE/Python編 @rch850
　　15：00 ～ 18：00　Ideathon(ここからの参加でOKです)
　　18：30 ～　懇親会(ビアバッシュ)

　3月12日（土）
　　09：30 ～　開場
　　10：00 ～ 18：00　Hackathon
　　18：30 ～　懇親会
■会場
　めがね会館7階株式会社jig.jp様会議室
　・地図： → http://goo.gl/2rXe
　・アクセス：JR鯖江駅から徒歩15分、鯖江ICから車で5分
■定員
　最大30名（事前にお申し込みが必要です）
■対象者
　プログラマー、デザイナー、Hackathonに興味がある方 (入門者や学生の方も大歓迎)
■参加費
　一般1,000円、学生は無料
　※参加費は備品の準備、遠方よりご参加いただくスタッフへの交通費に割当てさせていただきます。
■その他
　twitter公式タグは #ghfukui です。

AWS Elastic Beanstalkを求めて、JAWS-UGの勉強会に行ってきた

2011-01-26T20:47:00.032+09:00

既に、ギークなご家庭では「新しいPC買ってよ。」でなく「今月はインスタンス3つまでよ。」とか、「あなた！今月インスタンス立ち上げ過ぎじゃない？MapReduceでいかがわしい画像をごにょごにょしてたんでしょ！」などという会話が交わされている思います。

そんな、オフィスでも家庭でもクラウドは切っても切れない時代ですので「Japan AWS User Group (JAWS-UG) - Hokuriku(金沢)勉強会第0回」に参加してきました。
http://atnd.org/events/11854

JAWS-UGはAWS(Amazon Web Services)の利用促進、情報共有のためのユーザーグループで、全国各地でイベントを開催しています。
今回はAWSエバンジェリストの玉川憲さん(@KenTamagawa)がいらっしゃるということと、先週、AWS Elastic Beanstalk(以降、Beanstalkと表記)という興味深いサービスが発表されたので、それを目的に参加しました。

AWSの多くの情報を共有していただいのですが全部は書ききれないので、今回はBeanstalkについて共有します。
これまでAmazonが提供していたEC2, S3のようなサービスはIaaSというタイプに分類(どこかの誰かが勝手に？)されていましたが、BeanstalkはPaaSに分類されるであろうサービスだと思います。

Beanstalkを使用すると、私たちはJavaで開発したアーカイブ(warファイル)をアップロードするだけで良く、あとのEC2インスタンス、Elastic Load Balancing、Auto Scalingの作成/設定はAWS側で自動的に行われます。
この辺のインフラ周りの作成/設定が面倒だったのですが、Beanstalkのおかげで解放されそうです。
(SimpleDBやRDSまではその範疇でないので、完全に解放されるわけではなさそうですが)

まだ試してないですが、Google App Engineのような運用の手軽さ、AWSの自由度が合わさった魅力的なサービスな気がしています。
ちなみに、現在はJavaだけに対応しているのですが、今後、Rubyなど他の言語にも対応していくそうです。

それと昨夜のイベント中、Amazon Simple Email Service(SES)という大量メール送信ができるサービスが発表されました。
AWSのサービスブロックが着々と揃ってきた感じがしますね。
http://aws.amazon.com/ses/

AWSには無料枠が設けられていますので、もしまだ使ったことがないという方は試してみてはどうでしょう？
百聞は一見に如かずと言いますし。
http://aws.typepad.com/aws_japan/2010/11/%E3%82%A2%E3%83%9E%E3%82%BE%E3%83%B3%E3%82%AF%E3%83%A9%E3%82%A6%E3%83%89%E3%81%AE%E7%84%A1%E6%96%99%E3%83%86%E3%82%A3%E3%82%A2%E3%82%92%E7%99%BA%E8%A1%A8.html

※JAWS-UG: Japan Amazon Web Services User Group (ジョーズ・ユージー)
http://jaws-ug.jp/

※AWS: Amazon Web Services(下記のサービス群)
http://aws.amazon.com/jp/

※AWS Elastic Beanstalk
http://aws.typepad.com/aws_japan/2011/01/introducing-amazon-beanstalk.html

AIRLife.net

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

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

GitHub API URLリスト - メモ

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

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

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

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

YeomanでCoffeeScript & LESS構成

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

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

2012年にｼｮｲﾄｫが最も驚愕したニュース

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

Yeoman ServerでURL Rewrite

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

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

FreeMind Import for astah - astahプラグイン

freemind-import-for-astah

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

JIRA 5.0、REST APIとREST API Browser

Backlog Connector for astah - astahプラグイン

backlog-connector-for-astah

astah Viewer Gadget - OpenSocial Gadget

Cacoo Finder - ブラウザ拡張

私の福井県立図書館の利用法

UPGRADE JAPAN!!で話してきた | HTML5時代の技術の恩恵を受けるには

データ復旧のためのHDD取り扱いについて

福井でみんなで集まってサービス/ソフトウェアを作ってみませんか？[3/5, 3/12]

AWS Elastic Beanstalkを求めて、JAWS-UGの勉強会に行ってきた

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