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

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

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

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

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

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

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

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