tag:blogger.com,1999:blog-51133369796271791622024-03-13T15:06:32.351+09:00AIRLife.netWeb技術を追ってHTML5, JavaScript, Flex, Adobe AIRのことをつらつらとshoitohttp://www.blogger.com/profile/01404360965246662555noreply@blogger.comBlogger232125tag:blogger.com,1999:blog-5113336979627179162.post-16915619648048346342013-08-05T22:47:00.000+09:002013-08-16T01:21:59.467+09:00オムニボックスからニコニコで検索 - nicomnibox Chrome拡張<b>nicomnibox概要</b><br />
アドレスバー(Omnibox)にns[Tab]と入力すると、サジェスト機能に導かれながらニコニコ動画、静画、生放送、ブロマガなど<a href="http://www.nicovideo.jp/top_service/" target="_blank">niconicoのコンテンツ</a>を簡単に検索できるChrome拡張。<br />
アドレスバーから即座に検索できて、さらにサジェストが使えるのがポイント。<br />
<br />
<b>ChromeウェブストアページURL</b><br />
<a href="https://chrome.google.com/webstore/detail/hjpolhdmkacmhjjnijjenpdjgnkggaie" target="_blank">https://chrome.google.com/webstore/detail/hjpolhdmkacmhjjnijjenpdjgnkggaie</a><br />
<br />
<b>利用方法</b><br />
1. ポチッとChromeに<a href="https://chrome.google.com/webstore/detail/hjpolhdmkacmhjjnijjenpdjgnkggaie" target="_blank">nicomnibox</a>をインストールする。<br />
2. アドレスバーに "ns" と入力し、Tabキー押下、検索ワードを入力する。<br />
3. 検索候補があれば表示されるので、そこから検索ワードを選択しても良い。<br />
<div><div class="separator" style="clear: both; text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwC_1WUn4dzsCHp5HqfoY1o23MdtQSKkNr8IoavYamqDJQTCONP53fhWjebNAKFmvsDK2aGT6WE9OWffKI3P1WMpkhMDMJWm0cH_aOt-R7sDNZ_-xVxOS9GwhsGUTcFg8a4A5FP0Zui10/s1600/nicomnibox.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="135" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwC_1WUn4dzsCHp5HqfoY1o23MdtQSKkNr8IoavYamqDJQTCONP53fhWjebNAKFmvsDK2aGT6WE9OWffKI3P1WMpkhMDMJWm0cH_aOt-R7sDNZ_-xVxOS9GwhsGUTcFg8a4A5FP0Zui10/s400/nicomnibox.png" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAkeDyr67w5SRsYZB1oZItBxMCy8zgsGr-ULS61z7yrQjv630iD4zyYFDBXxLyDdfcJ4bWyuA_aPNHDPT208c2cXlHtyWBrrpKCu_Rn-X7-ESStkEZgUaGzOoKW_lAEubE_MR4h3r9Duo/s1600/searchresult.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="332" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAkeDyr67w5SRsYZB1oZItBxMCy8zgsGr-ULS61z7yrQjv630iD4zyYFDBXxLyDdfcJ4bWyuA_aPNHDPT208c2cXlHtyWBrrpKCu_Rn-X7-ESStkEZgUaGzOoKW_lAEubE_MR4h3r9Duo/s400/searchresult.png" width="400" /></a></div><br />
<b>検索対象</b><br />
・<a href="http://www.nicovideo.jp/video_top" target="_blank">ニコニコ動画</a><br />
・<a href="http://seiga.nicovideo.jp/" target="_blank">ニコニコ静画</a>(イラスト/マンガ/電子書籍)<br />
・<a href="http://live.nicovideo.jp/" target="_blank">ニコニコ生放送</a><br />
・<a href="http://ch.nicovideo.jp/" target="_blank">ニコニコチャンネル</a>(チャンネル/ブロマガ)<br />
<div><br />
</div><br />
<b>実験的機能</b><br />
以下のように :(コロン) に続けてコンテンツの種類を指定し、空白を挟んで、検索ワードを入力すると、直接該当コンテンツの検索がされます。<br />
<blockquote class="tr_bq"> :video ほげほげ<br />
:live ほげほげ<br />
:illust ほげほげ<br />
:manga ほげほげ<br />
:book ほげほげ<br />
:channel ほげほげ<br />
:blomaga ほげほげ</blockquote><div class="separator" style="clear: both; text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxiZYSGuFo2JeANZ79A0Qkv9fHH_vTpzCDw0rwk7BgTaQDk3LtOLNNtdEURflRxYPt3L4ikswPZLxs_loficDwkxz-3RUKI6FYw7NzEPUbRO-HmjCpkGYr5A0bd-7SNSyRrvH3-zNjM88/s1600/livesearch.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="146" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxiZYSGuFo2JeANZ79A0Qkv9fHH_vTpzCDw0rwk7BgTaQDk3LtOLNNtdEURflRxYPt3L4ikswPZLxs_loficDwkxz-3RUKI6FYw7NzEPUbRO-HmjCpkGYr5A0bd-7SNSyRrvH3-zNjM88/s400/livesearch.png" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuB4bn21VxIIGrw6QHLf7_xMz86eVST2LYRdKTzAjLimSqXeIDeSi4O4J5u_Fg2LhaQf-uTQdY9dMyU1ZAaZBqN27pwnRhQFWuVNKwQjwldnwcsBp5b_TsOriD9bnBZJKnTqjzAMFIPuA/s1600/livesearchresult.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuB4bn21VxIIGrw6QHLf7_xMz86eVST2LYRdKTzAjLimSqXeIDeSi4O4J5u_Fg2LhaQf-uTQdY9dMyU1ZAaZBqN27pwnRhQFWuVNKwQjwldnwcsBp5b_TsOriD9bnBZJKnTqjzAMFIPuA/s400/livesearchresult.png" width="395" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div>Chromeを使われてる方、どうぞお試しください。<br />
<a href="https://chrome.google.com/webstore/detail/hjpolhdmkacmhjjnijjenpdjgnkggaie" target="_blank">https://chrome.google.com/webstore/detail/hjpolhdmkacmhjjnijjenpdjgnkggaie</a><br />
<br />
ソースコードはこちら<br />
<a href="https://github.com/shoito/nicomnibox-chrome-extension" target="_blank">https://github.com/shoito/nicomnibox-chrome-extension</a><br />
<div class="projects"><div data-repo="shoito/nicomnibox-chrome-extension"></div></div><div style="clear:both;"></div><br />
<span style="font-size: x-small;">※公開初日だけniconico Omniという名前でしたがググらビリティが低いのでnicomniboxに変更しました。</span><br />
<span class="fullpost"></span><br />
<br />
</div>shoitohttp://www.blogger.com/profile/01404360965246662555noreply@blogger.com1tag:blogger.com,1999:blog-5113336979627179162.post-44269305307091458172013-07-30T00:10:00.000+09:002013-07-30T00:22:04.525+09:00「レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック」レビュー<div class="separator" style="clear: both; text-align: center;">
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><span style="margin-left: auto; margin-right: auto;"><a href="http://www.amazon.co.jp/dp/4048863231/" target="_blank"><img border="0" height="200" src="http://ascii.asciimw.jp/books/books/jpeg150/978-4-04-886323-0.jpg" width="157" /></a></span></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="http://www.amazon.co.jp/dp/4048863231/" target="_blank">レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック<br />菊池 崇(著) アスキー・メディアワークス</a></td></tr>
</tbody></table>
<a href="http://asciimw.jp/" target="_blank">アスキー・メディアワークス</a>様から本日発売、菊池 崇さんが書かれた「レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック」を頂戴いたしました。<br />
<br />
PCだけでなく、iPhoneやAndroidなどのスマートフォン、iPadなどのタブレットなど多種多様なデバイスで見られるWebサイト。昨今はそのマルチデバイス対応が求められていますが、デバイス毎にHTMLファイルを用意して対応するのではなく、1つのHTMLファイルで対応する手法「レスポンシブWebデザイン」について解説しています。<br />
<br />
導入編、基礎編、実践編、応用編で構成されており、レスポンシブWebデザインを基礎から学び、実践で活かせるテクニックまで総合的に学べる書籍でした。<br />
<br />
既にレスポンシブWebデザインについて知っている方でも、現在W3Cで策定中のCSSの仕様に触れていたり、即活用できるツールやライブラリがソースコードを用いて詳細に紹介されてるので、読んで得るものがあると思います。<br />
<br />
所々散りばめられている「ワンポイント」や「Follow up」により、分かった気になっていたけれど、実は知らなかったことに気付くこともあるのではないでしょうか。<br />
個人的には「デザイニングインザブラウザを助けるツール」、これについて早く知っておけば、あの時もっと楽だったのにな...と悔やまれます。<br />
<br />
デザイナではないエンジニアの私にとっては、応用編の「軽量化のための画像編集のアイデア」で紹介されているテクニックが新鮮で参考になりました。<br />
読みやすい構成とボリュームなので、もう一度読み返して知識を深めようと思います。<br />
<span class="fullpost"></span>shoitohttp://www.blogger.com/profile/01404360965246662555noreply@blogger.com1tag:blogger.com,1999:blog-5113336979627179162.post-48653067040504972792013-06-24T00:19:00.001+09:002013-06-24T00:20:19.231+09:00GitHub API URLリスト - メモ<b>GitHub Developer</b><br />
<a href="http://developer.github.com/">http://developer.github.com/</a><br />
<br />
<script src="https://gist.github.com/shoito/5845386.js"></script>shoitohttp://www.blogger.com/profile/01404360965246662555noreply@blogger.com0tag:blogger.com,1999:blog-5113336979627179162.post-76411306570398461292013-06-19T00:02:00.001+09:002013-08-16T01:20:49.005+09:00Confluenceプラグインの作り方 - Cacoo Diagramming for Confluence何だかんだ書いたけど、まずは公式のGetting Startedに目を通しましょう。<br />
<a href="https://developer.atlassian.com/display/DOCS/Getting+Started">https://developer.atlassian.com/display/DOCS/Getting+Started</a><br />
<br />
今回、作成したプラグインがこちら。<br />
<br />
<b>Cacoo Diagramming for Confluence</b><br />
<a href="https://github.com/shoito/cacoo-confluence">https://github.com/shoito/cacoo-confluence</a><br />
<div class="projects"><div data-repo="shoito/cacoo-confluence"></div></div><div style="clear:both;"></div><br />
<b>Cacoo Diagramming for Confluence | Atlassian Marketplace</b><br />
<a href="https://marketplace.atlassian.com/plugins/com.github.shoito.confluence.integration.cacoo">https://marketplace.atlassian.com/plugins/com.github.shoito.confluence.integration.cacoo</a><br />
<br />
<br />
まず始めにAtlassian Plugin SDKをインストールしておきます。<br />
Macの人ならhomebrewを使って、以下のコマンドを実行するだけで良いです。<br />
<br />
<b>$ brew install atlassian-plugin-sdk</b><br />
<br />
次にAtlassian Plugin SDKのatlas-create-xxxコマンドでプラグインプロジェクトを作ります。<br />
<br />
<b>$ atlas-create-confluence-plugin</b><br />
<br />
名称やバージョンなどのプロジェクト情報を設定するため、いくつか質問されるので答えていきます。<br />
ここでの回答内容はプロジェクト直下のMavenのpom.xmlファイルに反映されるので、上記コマンド実行後に変更したい場合はpom.xmlファイルを編集することになります。<br />
※groupIdとartifactIdはJavaのpackageとして反映されるので、packageに指定可能な文字列で構成されている必要があります。<br />
test-macroのように‘ - '(ハイフン)を含めることはできないので要注意。<br />
<br />
<blockquote class="tr_bq">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<br />
[INFO] Scanning for projects...<br />
[INFO] ------------------------------------------------------------------------<br />
[INFO] Building Maven Default Project<br />
[INFO] task-segment: [com.atlassian.maven.plugins:maven-confluence-plugin:4.2.0:create] (aggregator-style)<br />
[INFO] ------------------------------------------------------------------------<br />
[INFO] [confluence:create]<br />
[INFO] Google Analytics Tracking is enabled to collect AMPS usage statistics.<br />
[INFO] Although no personal information is sent, you may disable tracking by adding <allowgoogletracking>false</allowgoogletracking> to the amps plugin configuration in your pom.xml<br />
[INFO] Sending event to Google Analytics: AMPS:confluence - Create Plugin<br />
[INFO] determining latest stable product version...<br />
[INFO] artifact com.atlassian.confluence:confluence-webapp: checking for updates from atlassian-public<br />
[INFO] artifact com.atlassian.confluence:confluence-webapp: checking for updates from atlassian-plugin-sdk<br />
[INFO] artifact com.atlassian.confluence:confluence-webapp: checking for updates from central<br />
[INFO] using latest stable product version: 5.1.4<br />
[INFO] determining latest stable data version...<br />
[INFO] artifact com.atlassian.confluence.plugins:confluence-plugin-test-resources: checking for updates from atlassian-public<br />
[INFO] artifact com.atlassian.confluence.plugins:confluence-plugin-test-resources: checking for updates from atlassian-plugin-sdk<br />
[INFO] artifact com.atlassian.confluence.plugins:confluence-plugin-test-resources: checking for updates from central<br />
[INFO] using latest stable data version: 5.1.4<br />
Define value for groupId: : com.github.shoito.confluence.integration<br />
Define value for artifactId: : testmacro<br />
Define value for version: [1.0-SNAPSHOT]: 0.1.0-SNAPSHOT<br />
Define value for package: [com.github.shoito.confluence.integration]: com.github.shoito.confluence.integration.testmacro<br />
groupId: com.github.shoito.confluence.integration<br />
artifactId: testmacro<br />
version: 0.1.0-SNAPSHOT<br />
package: com.github.shoito.confluence.integration.testmaccro<br />
[Y]: Y<br />
[INFO] Setting property: classpath.resource.loader.class => 'org.codehaus.plexus.velocity.ContextClassLoaderResourceLoader'.<br />
[INFO] Setting property: velocimacro.messages.on => 'false'.<br />
[INFO] Setting property: resource.loader => 'classpath'.<br />
[INFO] Setting property: resource.manager.logwhenfound => 'false'.<br />
[INFO] [archetype:generate]<br />
[INFO] Generating project in Batch mode<br />
[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<br />
[INFO] ------------------------------------------------------------------------<br />
[INFO] BUILD SUCCESSFUL<br />
[INFO] ------------------------------------------------------------------------<br />
[INFO] Total time: 1 minute 52 seconds<br />
[INFO] Finished at: Mon Jun 17 19:43:18 JST 2013<br />
[INFO] Final Memory: 49M/122M<br />
[INFO] ------------------------------------------------------------------------ </blockquote><br />
これでプロジェクトフォルダと初期ファイルが出来たので、カレントディレクトリを移動します。<br />
<b>$ cd testmacro</b><br />
<br />
中身は以下のように、最低限のプロダクトコードとプラグイン定義ファイル、テストコードが作られています。<br />
<b>$ tree</b><br />
<blockquote class="tr_bq">.<br />
|-- LICENSE<br />
|-- README<br />
|-- pom.xml<br />
`-- src<br />
|-- main<br />
| |-- java<br />
| | `-- com<br />
| | `-- github<br />
| | `-- shoito<br />
| | `-- confluence<br />
| | `-- integration<br />
| | `-- testmaccro<br />
| | |-- MyPluginComponent.java<br />
| | `-- MyPluginComponentImpl.java<br />
| `-- resources<br />
| |-- atlassian-plugin.xml<br />
| |-- css<br />
| | `-- testmacro.css<br />
| |-- images<br />
| | |-- pluginIcon.png<br />
| | `-- pluginLogo.png<br />
| |-- js<br />
| | `-- testmacro.js<br />
| `-- testmacro.properties<br />
`-- test<br />
|-- java<br />
| |-- it<br />
| | `-- com<br />
| | `-- github<br />
| | `-- shoito<br />
| | `-- confluence<br />
| | `-- integration<br />
| | `-- testmaccro<br />
| | `-- MyComponentWiredTest.java<br />
| `-- ut<br />
| `-- com<br />
| `-- github<br />
| `-- shoito<br />
| `-- confluence<br />
| `-- integration<br />
| `-- testmaccro<br />
| `-- MyComponentUnitTest.java<br />
`-- resources<br />
`-- atlassian-plugin.xml<br />
30 directories, 14 files </blockquote><br />
既にこのプラグインをインストールされた状態のConfluenceを起動できる状態になっています。<br />
この状態で、Confluenceを起動しましょう。<br />
<b>$ atlas-run</b><br />
<blockquote class="tr_bq">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<br />
[INFO] Scanning for projects...<br />
[INFO] ------------------------------------------------------------------------<br />
[INFO] Building testmacro<br />
[INFO] task-segment: [com.atlassian.maven.plugins:maven-amps-dispatcher-plugin:4.2.0:run]<br />
[INFO] ------------------------------------------------------------------------<br />
[INFO] Preparing amps-dispatcher:run<br />
[INFO] [confluence:copy-bundled-dependencies]<br />
[INFO] [dependency:unpack-dependencies]<br />
....<br />
[INFO] [talledLocalContainer] testmacro (com.github.shoito.confluence.integration.testmacro, Version: 0.1.0-SNAPSHOT, Installed: bundled)<br />
[INFO] [talledLocalContainer]<br />
[INFO] [talledLocalContainer] 2013-06-17 22:12:09,722 INFO [main] [com.atlassian.confluence.lifecycle] init Confluence is ready to serve<br />
[INFO] [talledLocalContainer] 6 17, 2013 10:12:09 ?? org.apache.coyote.http11.Http11Protocol start<br />
[INFO] [talledLocalContainer] ??: Coyote HTTP/1.1? http-1990 ??????<br />
[INFO] [talledLocalContainer] 6 17, 2013 10:12:09 ?? org.apache.jk.common.ChannelSocket init<br />
[INFO] [talledLocalContainer] ??: JK: ajp13 listening on /0.0.0.0:8009<br />
[INFO] [talledLocalContainer] 6 17, 2013 10:12:10 ?? org.apache.jk.server.JkMain start<br />
[INFO] [talledLocalContainer] ??: Jk running ID=0 time=0/75 config=null<br />
[INFO] [talledLocalContainer] 6 17, 2013 10:12:10 ?? org.apache.catalina.startup.Catalina start<br />
[INFO] [talledLocalContainer] ??: Server startup in 120479 ms<br />
[INFO] [talledLocalContainer] Tomcat 6.x started on port [1990]<br />
[INFO] confluence started successfully in 659s at http://test.local:1990/confluence<br />
[INFO] Type Ctrl-D to shutdown gracefully<br />
[INFO] Type Ctrl-C to exit </blockquote><br />
簡単なマクロ程度なら、編集するファイルは2, 3で済みます。<br />
・<b>プラグイン定義ファイル</b><br />
こちらにプラグインの名称やリソースを指定します。<br />
<a href="https://github.com/shoito/cacoo-confluence/blob/master/src/main/resources/atlassian-plugin.xml">https://github.com/shoito/cacoo-confluence/blob/master/src/main/resources/atlassian-plugin.xml</a><br />
<br />
<b>・マクロクラス</b><br />
Macroインターフェースをimplementsしたクラス。<br />
マクロの編集画面から受け取ったパラメーターを処理したり、テンプレートを読み込んだりします。<br />
<a href="https://github.com/shoito/cacoo-confluence/blob/master/src/main/java/com/github/shoito/confluence/integration/cacoo/macro/CacooMacro.java">https://github.com/shoito/cacoo-confluence/blob/master/src/main/java/com/github/shoito/confluence/integration/cacoo/macro/CacooMacro.java</a><br />
<br />
編集が終わったら、再度Confluenceを立ちあげて確認する。<br />
<b>$ atlas-run</b><br />
<br />
まずはここまで。<br />
<br />
※ atlas-runで立ち上がるConfluenceはプラグイン開発用に提供されるものなので、実運用には使用できません。<br />
<span class="fullpost"></span>shoitohttp://www.blogger.com/profile/01404360965246662555noreply@blogger.com0tag:blogger.com,1999:blog-5113336979627179162.post-5241760297653867352013-02-23T16:00:00.002+09:002013-02-23T16:04:22.246+09:00楽天のあのメルマガから逃れるために<div class="p1">
楽天といえば、最後の最後に登場するメールマガジンのチェックをオフにする作業。</div>
<div class="p1">
デフォルトでチェックボックにチェックが入っていますが、あれを外すのを忘れると不要なメールが届くようになってしまいます。</div>
<div class="p1">
(最近は選択解除リンクがついて改善してる??)<br />
<br /></div>
<div class="p1">
少なくとも私の周囲では不評で、デフォルトはオフにしておいて欲しいという声が聞こえてきますし、私自身もそうです。</div>
<div class="p1">
<br /></div>
<div class="p1">
そんな願いを叶えたいと思い、慣れているChrome拡張機能を作ろうと思ったので事前に調べたところ既にいくつか公開されていました。</div>
<div class="p1">
<br /></div>
<div class="p1">
<b>Chrome拡張機能</b></div>
<div class="p1">
<a href="https://chrome.google.com/webstore/search-extensions/%E6%A5%BD%E5%A4%A9%20%E3%83%A1%E3%83%AB%E3%83%9E%E3%82%AC">https://chrome.google.com/webstore/search-extensions/楽天%20メルマガ</a></div>
<div class="p1">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJlcpF_wNxxp5i8Q_0Kk-oa-cuaBmWPzOYStksZx3XTh-tDeo-fVcZ0AQKOIZVj1bvtqOMmzD9pQuKeo1yAtUmsGkHneZnLqYBD9iihCKq5OjgS48-Wo3CQmSZxXf2ebwKxtqNrtXS-U8/s1600/deny-rakuten.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="555" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJlcpF_wNxxp5i8Q_0Kk-oa-cuaBmWPzOYStksZx3XTh-tDeo-fVcZ0AQKOIZVj1bvtqOMmzD9pQuKeo1yAtUmsGkHneZnLqYBD9iihCKq5OjgS48-Wo3CQmSZxXf2ebwKxtqNrtXS-U8/s640/deny-rakuten.png" width="640" /></a></div>
<div class="p1">
<br /></div>
<div class="p2">
ユーザー数は2013/02/23時点のもの。</div>
<div class="p2">
<br /></div>
<div class="p1">
<b>Rakuten Anti Mail Magazine</b> - ユーザー数: 4,691 人</div>
<div class="p3">
<span class="s1"><a href="https://chrome.google.com/webstore/detail/rakuten-anti-mail-magazin/kclbpbfpfddcglkinajbcfcldhpdkmmk?utm_source=chrome-ntp-icon">https://chrome.google.com/webstore/detail/rakuten-anti-mail-magazin/kclbpbfpfddcglkinajbcfcldhpdkmmk</a></span></div>
<div class="p2">
<br /></div>
<div class="p1">
<b>Rakuten UnCheck</b> - ユーザー数: 4,608 人</div>
<div class="p3">
<span class="s1"><a href="https://chrome.google.com/webstore/detail/rakuten-uncheck/bgohafkdjhdgohhnhcmahhdidkkabbik?utm_source=chrome-ntp-icon">https://chrome.google.com/webstore/detail/rakuten-uncheck/bgohafkdjhdgohhnhcmahhdidkkabbik</a></span></div>
<div class="p2">
<br /></div>
<div class="p1">
<b>自動価格比較/ショッピング検索</b> - ユーザー数: 2,628 人</div>
<div class="p1">
<a href="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">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</a></div>
<div class="p2">
<br /></div>
<div class="p1">
<b>Deny RAKUTEN'S Mail</b> - ユーザー数: 458 人</div>
<div class="p1">
<a href="https://chrome.google.com/webstore/detail/deny-rakutens-mail/pigchijeckgkghjogldojaalmbackgob">https://chrome.google.com/webstore/detail/deny-rakutens-mail/pigchijeckgkghjogldojaalmbackgob</a></div>
<div class="p1">
<br /></div>
<div class="p1">
<br /></div>
<div class="p1">
すべての動作確認をとったわけではありませんが「楽天」「メルマガ」「停止」「迷惑」「スパム」辺りをキーワードに<a href="https://chrome.google.com/webstore/category/extensions" target="_blank">Chrome Web Store</a>から拡張機能を検索すると他にも見つけられるかもしれません。</div>
<div class="p1">
<br /></div>
<div class="p1">
Google Chrome以外のブラウザ、Firefoxにも類似のアドオン機能があるので、お使いのブラウザにあったものを導入して、環境改善をしてみてはいかがでしょうか。</div>
<div class="p1">
<br /></div>
<div class="p1">
上記で紹介したChrome拡張機能は予防線をはるもので、既に登録済みのメルマガについて登録解除したい場合はこちらから一括で解除できるようです。</div>
<div class="p1">
<a href="http://emagazine.rakuten.co.jp/">http://emagazine.rakuten.co.jp/</a></div>
<span class="fullpost"></span>shoitohttp://www.blogger.com/profile/01404360965246662555noreply@blogger.com0tag:blogger.com,1999:blog-5113336979627179162.post-34802432491922789702013-02-05T00:12:00.001+09:002013-08-16T01:25:21.606+09:00Hackathonでこんなプレゼンをしてみた<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy4JrcX_zxX9j3scm2TrwN4v6ZnNktKz4cZdml8-wa-2i8Tg8o-VGe-EF4kA3ZMxMGRCTwyJazivoV87Oj9YlH7t2BP1MRWv1wZ26Nag0laweSyRi6R2IOQIiZ_worP-E0N8esR4Lu19A/s1600/self-intro.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy4JrcX_zxX9j3scm2TrwN4v6ZnNktKz4cZdml8-wa-2i8Tg8o-VGe-EF4kA3ZMxMGRCTwyJazivoV87Oj9YlH7t2BP1MRWv1wZ26Nag0laweSyRi6R2IOQIiZ_worP-E0N8esR4Lu19A/s1600/self-intro.png" /></a></div><div class="separator" style="clear: both; text-align: left;">2/2(土)にとても自由なハッカソンが開催されたのでそれに参加してきました。</div><div class="separator" style="clear: both; text-align: left;">参加者は7人くらいと少なかったこともあり、短い時間ではありましたが落ち着いて開発することができました。</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;">ハッカソンの最後にあったプレゼンタイムでは、上記スクリーンショットのように、<a href="https://chrome.google.com/webstore/detail/chontenteditable/amnpphhcbandchhkmgloehggicoedcpl" target="_blank">ChontentEditable</a>を使ってGoogleの検索結果画面を編集し、スライド代わりにしました。</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;">私は<a href="http://coffeescript.org/" target="_blank">CoffeeScript</a>(JavaScript)でChrome拡張を2つ作ったので、ここで紹介しておきます。</div><div class="separator" style="clear: both; text-align: left;">主にビルド周りでは<a href="http://yeoman.io/" target="_blank">Yeoman</a>(<a href="http://gruntjs.com/" target="_blank">Grunt</a>)さんに助けていただきました。</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;"><b>ChontentEditable</b></div><div class="separator" style="clear: both; text-align: left;"><a href="https://chrome.google.com/webstore/detail/chontenteditable/amnpphhcbandchhkmgloehggicoedcpl">https://chrome.google.com/webstore/detail/chontenteditable/amnpphhcbandchhkmgloehggicoedcpl</a></div><div class="separator" style="clear: both; text-align: left;"><a href="https://github.com/shoito/chontenteditable-chrome-extension">https://github.com/shoito/chontenteditable-chrome-extension</a></div><div class="projects"><div data-repo="shoito/chontenteditable-chrome-extension"></div></div><div style="clear:both;"></div><br />
<div class="separator" style="clear: both; text-align: left;">これはChromeで表示中のページを編集できるようにするChrome拡張です。</div><div class="separator" style="clear: both; text-align: left;">やっていることは簡単で、ボタンをポチッと押したらhtmlタグに<a href="https://developer.mozilla.org/ja/docs/DOM/element.contentEditable" target="_blank">contenteditable</a>属性を付与/削除して、テキスト編集モードのON/OFFを切り替えられるようにしています。</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;">てっきりアプリのデモだけかと思ったら、前の発表者の方々が自己紹介〜いろいろスライドを作ってたので、即席で作りましたがChontentEditable拡張のデモにもちょうど良い感じになりました。</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;"><b>java2yuml</b></div><div class="separator" style="clear: both; text-align: left;"><a href="https://chrome.google.com/webstore/detail/java2yuml/glhmljgoioemnbaaijkpbiggmjkogbkb">https://chrome.google.com/webstore/detail/java2yuml/glhmljgoioemnbaaijkpbiggmjkogbkb</a></div><div class="separator" style="clear: both; text-align: left;"><a href="https://github.com/shoito/java2yuml-chrome-extension">https://github.com/shoito/java2yuml-chrome-extension</a></div><div class="projects"><div data-repo="shoito/java2yuml-chrome-extension"></div></div><div style="clear:both;"></div><br />
<div class="separator" style="clear: both; text-align: left;">これは以前、某CV社にいた時に作った<a href="https://chrome.google.com/webstore/detail/java2class/pjkknfedjcaagjfalcfnfoebghfgjnbd" target="_blank">java2class</a>拡張をベースに、<a href="http://yuml.me/" target="_blank">yUML</a>を用いてクラス図を表現したChrome拡張です。</div><div class="separator" style="clear: both; text-align: left;">GitHubやBitbucket, Google Code HostingでJavaのソースコードを読んでいるときに、右上にそっとコード解析結果からクラス図を表示して、コードの理解を助けてくれます。</div><div class="separator" style="clear: both; text-align: left;">JavaDocを見ているときはJavaDocのHTMLをパースして、クラス図を同様に表示してくれます。</div><div class="separator" style="clear: both; text-align: center;"><a href="https://raw.github.com/shoito/java2yuml-chrome-extension/master/images/1280x800_0.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://raw.github.com/shoito/java2yuml-chrome-extension/master/images/1280x800_0.png" width="640" /></a></div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://raw.github.com/shoito/java2yuml-chrome-extension/master/images/1280x800_1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://raw.github.com/shoito/java2yuml-chrome-extension/master/images/1280x800_1.png" width="640" /></a></div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;">しかし、これにはちょっと欠陥があってフィールドやメソッド数が多いとyUMLに渡すURL文字列が長くなり過ぎて、正常にクラス図が作れないようです。</div><div class="separator" style="clear: both; text-align: left;">(502 Bad Requestとレスポンスが返ってきます)</div><div class="separator" style="clear: both; text-align: left;">今のところは程よいサイズのクラス限定対応になっています。</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;">yUMLはこちらを参考に。</div><div class="separator" style="clear: both; text-align: left;"><a href="http://yuml.me/diagram/scruffy/class/samples">http://yuml.me/diagram/scruffy/class/samples</a></div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;">最近、Chrome拡張やastahプラグインばかりを作っていたので、そろそろWebサービスやタブレット用アプリの開発に戻りましょうかねぇ。</div><div class="separator" style="clear: both; text-align: left;">やっぱりもくもく開発するハッカソンは楽しいイベントですね。</div><span class="fullpost"></span>shoitohttp://www.blogger.com/profile/01404360965246662555noreply@blogger.com0tag:blogger.com,1999:blog-5113336979627179162.post-2763831343270456882013-01-27T23:56:00.001+09:002013-08-16T01:26:34.357+09:00astahにクラウディアさんからの癒しを<div>長時間仕事をしていて疲れたとき、そんなホッと一息つきたくなるようなときでも、仕事が立て込んでいるとそうもいかないので、じゃあ、強制的に割り込んできてもらいましょう。</div><br />
今回作ったのは、<a href="http://astah.change-vision.com/" target="_blank">システム設計支援ツールのastah</a>を長時間使用していると、<a href="http://msdn.microsoft.com/ja-jp/windowsazure/claudiaazure.aspx" target="_blank">Windows Azure公認キャラクターのクラウディア・窓辺さん</a>が、あなたに優しいお顔と音声で休憩を促してくれるプラグインです。<span class="fullpost"></span><br />
<div>えぇ、まぁ、それだけです。</div><br />
<b>astah Nannyプラグイン</b><br />
<div><a href="https://github.com/shoito/astah-nanny-plugin">https://github.com/shoito/astah-nanny-plugin</a></div><div class="projects"><div data-repo="shoito/astah-nanny-plugin"></div></div><div style="clear:both;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://raw.github.com/shoito/astah-nanny-plugin/master/images/screenshot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" height="448" src="https://raw.github.com/shoito/astah-nanny-plugin/master/images/screenshot.png" title="クラウディア・窓辺の癒し" width="640" /></a></div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;">4時間くらい仕事をしていると疲れたあなたに優しく声をかけてくれて、断ると1時間後にまた優しく声をかけてきてくれます。</div><div class="separator" style="clear: both; text-align: left;">興味をもった奇特な方はGitHubからclone/forkして、メッセージや音声は自分好みにカスタマイズしてくれてかまいません。</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;"><span style="font-size: x-small;">※ ホントはastahで操作したファイルや図、モデルの数値や時間を計測してゴニョゴニョしたかったんだけど、途中でAPIが足りないことに気付いて、なぜかこんなものに化けてしまった...。</span></div>shoitohttp://www.blogger.com/profile/01404360965246662555noreply@blogger.com0tag:blogger.com,1999:blog-5113336979627179162.post-75008195533754509702013-01-27T17:25:00.000+09:002013-01-27T17:26:33.286+09:00YeomanでCoffeeScript & LESS構成<a href="http://yeoman.io/">Yeoman</a>はデフォルトではCompass, scss/sassを使う設定になっているので、CoffeeScript & LESS派な私はこんな感じでGruntfile.js/.coffeeとpackage.jsonを設定していますよ、というメモ。<br />
<br />
これを定義して npm install でLESSコンパイルタスクとCoffeeScriptのLintタスクを事前にインストールしときます。<br />
・<a href="https://npmjs.org/package/grunt-contrib-less">grunt-contrib-less</a><br />
・<a href="https://npmjs.org/package/grunt-coffeelint">grunt-coffeelint</a><br />
<br />
<script src="https://gist.github.com/4647285.js"></script><br />
<br />
前回の投稿で紹介したCacoo Finderが上記のような構成になってます。<br />
<a href="http://blog.air-life.net/2013/01/cacoo-findercoffeescript-less-knockout.html">Cacoo FinderをCoffeeScript, LESS, Knockout, Yeomanで再構築</a><br />
shoitohttp://www.blogger.com/profile/01404360965246662555noreply@blogger.com0tag:blogger.com,1999:blog-5113336979627179162.post-8041393364592306282013-01-23T00:55:00.002+09:002013-08-16T01:26:55.798+09:00Cacoo FinderをCoffeeScript, LESS, Knockout, Yeomanで再構築<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6jgXL3bOlp7ASz5FIUM0L6Nejc5UCtc3-1ar-J6fgKwoaPP0ym8c6W5-Sk1acj_kQpclkIddHaco9odcjuhM-SZUVg6yiXNPh-4LJZQQzQTcTnBDmEOtwWKCMZ_llxjON-c6j5MCY7C0/s1600/440x280.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="203" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6jgXL3bOlp7ASz5FIUM0L6Nejc5UCtc3-1ar-J6fgKwoaPP0ym8c6W5-Sk1acj_kQpclkIddHaco9odcjuhM-SZUVg6yiXNPh-4LJZQQzQTcTnBDmEOtwWKCMZ_llxjON-c6j5MCY7C0/s320/440x280.png" width="320" /></a></div><br />
ふと、以前のMashup Awards7で作ったChrome拡張 Cacoo Finderのソースコードを公開していなかったことに気付いたので、どうせならと<a href="http://coffeescript.org/" target="_blank">CoffeeScript</a>(JavaScript), <a href="http://lesscss.org/" target="_blank">LESS</a>(CSS), <a href="http://knockoutjs.com/">Knockout.js</a>(MVVM), <a href="http://yeoman.io/" target="_blank">Yeoman</a>(Grunt)で再構築しました。<br />
<br />
<b>ソースコード - GitHub</b><br />
<a href="https://github.com/shoito/cacoo-finder-chrome-extension">https://github.com/shoito/cacoo-finder-chrome-extension</a><br />
<div class="projects"><div data-repo="shoito/cacoo-finder-chrome-extension"></div></div><div style="clear:both;"></div><br />
<b>Chrome Web Store</b><br />
<a href="https://chrome.google.com/webstore/detail/pcfedgjdgkacloiabdlghochjfmnalck?hl=ja">https://chrome.google.com/webstore/detail/pcfedgjdgkacloiabdlghochjfmnalck</a><br />
<br />
<b>Cacoo Finder - ブラウザ拡張 以前の紹介ブログ記事</b><br />
<a href="http://blog.air-life.net/2011/11/cacoo-finder.html">http://blog.air-life.net/2011/11/cacoo-finder.html</a><br />
shoitohttp://www.blogger.com/profile/01404360965246662555noreply@blogger.com0tag:blogger.com,1999:blog-5113336979627179162.post-14715377559945862532013-01-09T00:16:00.002+09:002013-01-09T00:36:03.934+09:002012年に最も驚愕したニュース<h2 style="text-align: center;">
<span style="font-weight: normal;">2012年にショイトォが最も驚愕したニュース</span></h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.tdb.co.jp/tosan/syosai/3699.html" target="_blank"><img alt="株式会社伊藤ショウ 事業停止" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOK2MBOZkDc5drjj3raHq67RrvOr4zNonf3W_caFgxW4Q3a3ic5L2NMt4-ZCAk8D-1_emQ9OshIf2oUpiP1Bbh8WbgBeQeDhGnf5a73Na4RhazZxx31mEFiKWykVeOTqmzVl5ws3dm88g/s1600/2012.png" title="株式会社伊藤ショウ - 大型倒産速報 | 帝国データバンク[TDB]" /></a></div>
<div class="separator" style="clear: both; text-align: right;">
<span style="font-size: x-small;"><br /></span></div>
<div class="separator" style="clear: both; text-align: right;">
<span style="font-size: x-small;">ちなみに私とは一切関係なく、この会社のことは速報ではじめて知りました。</span></div>
<div class="separator" style="clear: both; text-align: right;">
<span style="font-size: x-small;">確かに背が高いし、O型だけど。</span></div>
<span class="fullpost"></span>shoitohttp://www.blogger.com/profile/01404360965246662555noreply@blogger.com0tag:blogger.com,1999:blog-5113336979627179162.post-87539937714295297402013-01-01T01:51:00.001+09:002013-01-01T01:51:58.445+09:00yeoman --skip-updaterフラグが消えてた<div>
<span style="font-family: Courier New, Courier, monospace;"><i>$ yeoman server</i></span></div>
<div>
を実行するとYeomanの更新チェックが走り、新しいバージョンがあれば自動更新されます。こんな感じで。</div>
<div>
<br /></div>
<div>
<div class="p1">
<span style="font-family: Courier New, Courier, monospace;"><i>$ yeoman server</i></span></div>
<div class="p1">
<span style="font-family: Courier New, Courier, monospace;"><i>Starting update check…</i></span></div>
<div class="p1">
<span style="font-family: Courier New, Courier, monospace;"><i>Update available: 0.9.6 (current: 0.9.5)</i></span></div>
<div class="p1">
<span style="font-family: Courier New, Courier, monospace;"><i>Updating yeoman</i></span></div>
<div class="p2">
<span style="font-family: Courier New, Courier, monospace;"><i><br /></i></span></div>
<div class="p1">
<span style="font-family: Courier New, Courier, monospace;"><i>npm http GET https://registry.npmjs.org/yeoman</i></span></div>
<div class="p1">
<span style="font-family: Courier New, Courier, monospace;"><i>npm http 200 https://registry.npmjs.org/yeoman</i></span></div>
<div class="p1">
<span style="font-family: Courier New, Courier, monospace;"><i>npm http GET https://registry.npmjs.org/yeoman/-/yeoman-0.9.6.tgz</i></span></div>
<div class="p1">
<span style="font-family: Courier New, Courier, monospace;"><i>npm http 200 https://registry.npmjs.org/yeoman/-/yeoman-0.9.6.tgz</i></span></div>
<div class="p1">
<span style="font-family: Courier New, Courier, monospace;"><i>npm http GET https://registry.npmjs.org/yeoman/0.9.6</i></span></div>
<div class="p1">
<span style="font-family: Courier New, Courier, monospace;"><i>npm http 200 https://registry.npmjs.org/yeoman/0.9.6</i></span></div>
<div class="p1">
<span style="font-family: Courier New, Courier, monospace;"><i>npm http GET https://registry.npmjs.org/yeoman/-/yeoman-0.9.6.tgz</i></span></div>
<div class="p1">
<span style="font-family: Courier New, Courier, monospace;"><i>npm http 200 https://registry.npmjs.org/yeoman/-/yeoman-0.9.6.tgz</i></span></div>
</div>
<div>
<i><span style="font-family: Courier New, Courier, monospace;">(略)</span></i></div>
<div>
<i><span style="font-family: Courier New, Courier, monospace;"><br /></span></i></div>
<div>
私はパッチを当てて使ってたのでこの自動更新はされたくなくて、</div>
<div>
<span style="font-family: Courier New, Courier, monospace;"><i>$ yeoman server --skip-updater</i></span></div>
<div>
というように自動更新をオフにしてました。</div>
<div>
そのフラグがv0.9.6で消えてたというお話。</div>
<div>
アンドキュメントなフラグでしたし、updater.js周りで変更があったんかな。</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://github.com/yeoman/yeoman/commit/8b75970d856000c2ce5f3e57b384cf7b80ba6c75" target="_blank"><img border="0" height="232" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIUCS9Gs0xt78aN5R-T4SlWuJBs1tHU1eGpHXpKNAJdiZittLMFsEvj2HtS3BChqcvNt4jFztfG_WOyzzT1aj-Bv339T8FXkExGDTCRn77gMsBScHilgLBQqaSj8wzILCpo6wJgL7k90E/s640/yeoman-commit.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="text-align: start;"><span style="font-size: x-small;"><a href="https://github.com/yeoman/yeoman/commit/8b75970d856000c2ce5f3e57b384cf7b80ba6c75">https://github.com/yeoman/yeoman/commit/8b75970d856000c2ce5f3e57b384cf7b80ba6c75</a></span></span></div>
shoitohttp://www.blogger.com/profile/01404360965246662555noreply@blogger.com0tag:blogger.com,1999:blog-5113336979627179162.post-59666243794356930492012-12-31T18:20:00.001+09:002013-01-01T01:20:17.473+09:00Yeoman ServerでURL Rewrite<span class="fullpost"></span><br />
<div>
フロントエンド開発のワークフローをサポートしてくれるコマンドラインツールの<a href="http://yeoman.io/" target="_blank">Yeoman</a>(ヨーマン)おじさん、<a href="http://jenkins-ci.org/" target="_blank">Jenkins</a>おじさんとは違う形で活躍しています。</div>
<div>
チームみんなのJenkinsおじさんに対して、私だけのYeomanおじさんのような感じで。</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://a248.e.akamai.net/camo.github.com/10c0f69d03b7ac184d77e8aaba4358a2d4791823/687474703a2f2f79656f6d616e2e696f2f6d656469612f79656f6d616e2d6d617374686561642e706e67" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Yeoman" border="0" height="180" src="https://a248.e.akamai.net/camo.github.com/10c0f69d03b7ac184d77e8aaba4358a2d4791823/687474703a2f2f79656f6d616e2e696f2f6d656469612f79656f6d616e2d6d617374686561642e706e67" title="Yeoman" width="640" /></a></div>
<div>
<blockquote class="tr_bq">
<a href="http://yeoman.io/">http://yeoman.io/</a> </blockquote>
<blockquote class="tr_bq">
<a href="http://yeoman.io/"></a><a href="https://github.com/yeoman/yeoman">https://github.com/yeoman/yeoman</a></blockquote>
<div>
Gruntfile.js/.coffeeにワークフローを定義すれば多彩な才能を発揮してくれるんですが、ウチでは、CoffeeScript/LESSのコンパイル、.html/.js/.cssのconcat/minify、mochaテスト実行、ローカルサーバ、LiveReloadによるファイル編集時の自動リロード...等々でお世話になってます。</div>
</div>
<div>
<br /></div>
<div>
で、そんなYeomanおじさんは</div>
<div>
<i><span style="font-family: Courier New, Courier, monospace;">$ yeoman server</span></i></div>
<div>
とコマンド入力すると http://localhost:3501でローカルサーバ起動してくれるのですが、このローカルサーバでは、mod_rewrite相当の手段が見当たりませんでした(ある?)。</div>
<div>
HTML5 Hisotry APIを使ったSingle Page Applicationで、URLを更新した後のリロードすると404になって困ってました。</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk9ge4D0dj4OoSKzVzi91HAxcFuS42ouyzSwaUZ-ZQsaz69TvvqIZHi-5zn7tFSs37sxwXolgxzr7Miz0vsllgJ03PeV2c1hY60bVeDCbX-lplzYwngeaTZCHcmfLeXsUWiC7VmH4L_Pk/s1600/yeoman-404.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="323" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk9ge4D0dj4OoSKzVzi91HAxcFuS42ouyzSwaUZ-ZQsaz69TvvqIZHi-5zn7tFSs37sxwXolgxzr7Miz0vsllgJ03PeV2c1hY60bVeDCbX-lplzYwngeaTZCHcmfLeXsUWiC7VmH4L_Pk/s640/yeoman-404.png" width="640" /></a></div>
<div>
<br /></div>
<div>
YeomanのGithub Issueを見ると同じような要望は度々上がっているようで、マージされてませんが実装されてる方はいるようです。</div>
<div>
今のところ私は以下を参考にv0.9.6の yeoman/tasks/server.js へパッチを当て、Gruntfile.jsにrewriteルールを記載した形で対応しています。開発用のローカルサーバなので。</div>
<blockquote class="tr_bq">
Yeoman Server and Backbone/BBB pushState<br />
<a href="https://github.com/yeoman/yeoman/issues/468">https://github.com/yeoman/yeoman/issues/468</a></blockquote>
参考まで。shoitohttp://www.blogger.com/profile/01404360965246662555noreply@blogger.com0tag:blogger.com,1999:blog-5113336979627179162.post-62193831915300594912012-10-13T20:24:00.006+09:002012-12-31T18:20:53.855+09:00Mac版astahの言語設定を日本語/英語で切り替える方法私はMac OSの言語設定を英語に設定しているので、その上で動作するソフトも英語に対応している場合、自動的に英語表記になります。<br />
<div>
企画の際のアイデアのまとめやシステムのラフな設計に <a href="http://astah.change-vision.com/" target="_blank">astah</a> というソフトを使っているのですが、それも同様です。</div>
<div>
<br /></div>
<div>
しかし、日本語表記で利用しているユーザーと話すとき英語表記だと通じないことがあるので、そういう時は日本語表記に切り替えて確認することもありました。<br />
<div>
Windows版やLinux版とはやり方が違うので紹介しておきます。</div>
</div>
<div>
<br /></div>
<div>
<b>1. astahのInfo.plistをエディタで開く</b> - エディションによって違うけど下記の何れか</div>
<blockquote class="tr_bq">
/Applications/astah\ community/astah\ community.app/Contents/Info.plist<br />
/Applications/astah\ UML/astah\ UML.app/Contents/Info.plist<br />
/Applications/astah\ professional/astah\ professional.app/Contents/Info.plist</blockquote>
<div>
<b>2. VMOptionsプロパティに、-Duser.language=ja -Duser.country=JP を追加する</b></div>
<div>
<br /></div>
<div>
<b>修正前</b> - OSの言語設定に従う</div>
<blockquote class="tr_bq">
<key>VMOptions</key></blockquote>
<blockquote class="tr_bq">
<string>-Xms16m -Xmx768m</string></blockquote>
<div>
<br /></div>
<div>
<b>修正後</b> - 日本語表記に切り替え</div>
<div>
<blockquote class="tr_bq">
<key>VMOptions</key></blockquote>
<blockquote class="tr_bq">
<string>-Xms16m -Xmx768m -Duser.language=ja -Duser.country=JP</string></blockquote>
</div>
<div>
<div>
<br class="Apple-interchange-newline" />
<b>修正後</b> - 英語表記に切り替え</div>
<div>
<blockquote class="tr_bq">
<key>VMOptions</key></blockquote>
<blockquote class="tr_bq">
<string>-Xms16m -Xmx768m -Duser.language=en -Duser.country=US</string></blockquote>
このVMOptionsで、コマンドラインからjavaを実行するときのオプションと同等のものを指定できるので、Mac版<a href="http://astah.change-vision.com/" target="_blank">astah</a>では初期ヒープサイズ(-Xms)、最大ヒープサイズ(-Xmx)のデフォルト値が設定されています。<br />
<br />
なお、Windows版astahについては公式サイトでFAQが公開されています。<br />
<blockquote class="tr_bq">
英語でastahを使用できますか<br />
<a href="http://astah.change-vision.com/ja/faq/faq-setup/astah-inenglish.html">http://astah.change-vision.com/ja/faq/faq-setup/astah-inenglish.html</a></blockquote>
</div>
</div>
shoitohttp://www.blogger.com/profile/01404360965246662555noreply@blogger.com0tag:blogger.com,1999:blog-5113336979627179162.post-41739198211467093632012-01-10T06:00:00.000+09:002013-08-16T01:28:44.983+09:00MicrojsでJavaScriptのソースコードリーディング<div class="p1"><b>Microjs CodeReading Bookmarkletとは</b></div><div class="p1"><a href="http://microjs.com/">http://microjs.com</a> にリストされているJavaScriptライブラリのソースコードリーディングを支援するブックマークレットです。Read/Unread状況、Readサイズ/合計コードサイズを把握できるので、ソースコードリーディングでちょっとした達成感を味わえます。ブックマークレットは <a href="http://let.hatelabo.jp/">http://let.hatelabo.jp/</a> を利用して公開しています。<br />
<div style="text-align: center;"><object style="height: 390px; width: 640px;"><param name="movie" value="http://www.youtube.com/v/Z1rG2dtrwJc?version=3&feature=player_detailpage"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/Z1rG2dtrwJc?version=3&feature=player_detailpage" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="360"></object></div>
<div class="p1"><b>Microjsとは</b>
<a href="http://microjs.com/" target="_blank">Microjs</a>は、数百バイト〜数キロバイトの小さなJavaScriptフレームワークやライブラリを集めて紹介しているサイトです。2012/01/09時点で154個、合計206.7kBのライブラリがリストされています。小さいものに限定されているので、短時間で読めるものがほとんどです。Backbone.js, Zepto, yepnope, Modernizrなど、JavaScript, CSS3, HTML5に興味のある方は一度は見聞きしたことがあるものが並んでると思います。
<b>インストール方法</b>
Hatena::Letの<a href="http://let.hatelabo.jp/shoito/let/gYC-xZiazbHnRw" target="_blank">ブックマークレット公開ページ</a>からブックマークレットをブックマークに追加します。
<a href="http://let.hatelabo.jp/shoito/let/gYC-xZiazbHnRw">http://let.hatelabo.jp/shoito/let/gYC-xZiazbHnRw</a></div><div class="p1"><div class="separator" style="clear: both; text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJy3BVA_5laFJ07cfVMaVnuBe2gUjeAkoPcGt5tbr36XuaZla4BPExLwbe6iMiI7oK7UyBDTmNFGr7uJ04IrTCbYoOP2IVM5eoZ2LIVl1DbYiB98bAxUd7M_MftyQxQrF8rA6gGsDFhGU/s1600/ss2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="232" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJy3BVA_5laFJ07cfVMaVnuBe2gUjeAkoPcGt5tbr36XuaZla4BPExLwbe6iMiI7oK7UyBDTmNFGr7uJ04IrTCbYoOP2IVM5eoZ2LIVl1DbYiB98bAxUd7M_MftyQxQrF8rA6gGsDFhGU/s640/ss2.png" width="640" /></a></div>
<b>使用方法</b>
<div style="text-align: left;">1. <a href="http://microjs.com/">http://microjs.com</a> にアクセスします。</div><div class="separator" style="clear: both; text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFfKA_3k5y6MJUzQX6eJAtVxMvENUmW1IaxR9jXxIm0jEPbk3dKNQ4donJI42OzVww4ebEkpa9WtO76DbyvuW2CwG4mEjDDEIo74pTqbzDYQB24Y4wJ__nXy3Oj7qwFnhjPr5xIMjbbGM/s1600/ss0.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="465" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFfKA_3k5y6MJUzQX6eJAtVxMvENUmW1IaxR9jXxIm0jEPbk3dKNQ4donJI42OzVww4ebEkpa9WtO76DbyvuW2CwG4mEjDDEIo74pTqbzDYQB24Y4wJ__nXy3Oj7qwFnhjPr5xIMjbbGM/s640/ss0.png" width="640" /></a></div><div class="separator" style="clear: both; text-align: left;">2. ブックマークをクリックし、ブックマークレットを実行します。</div> 実行すると下図のように、どのライブラリがRead/Unreadなのか、どの程度のコードを読んだのかが表示されます。
<div class="separator" style="clear: both; text-align: left;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNgMaK8QlkGtSywPFt9U-7hoj7Cu-xcCpLFiByDj6hZcTyo0t7ujyyzpOn7UOEuqkG0NQHCsH6Wk-j0zSZ1sCyleJ-Q72AqQpXbe-zyTAZAPkDokLFtTX54ijUybfe5nifJGZFDY-tGqk/s1600/ss1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="443" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNgMaK8QlkGtSywPFt9U-7hoj7Cu-xcCpLFiByDj6hZcTyo0t7ujyyzpOn7UOEuqkG0NQHCsH6Wk-j0zSZ1sCyleJ-Q72AqQpXbe-zyTAZAPkDokLFtTX54ijUybfe5nifJGZFDY-tGqk/s640/ss1.png" width="640" /></a></div><b>注意</b>
ソースコードリーディングの履歴はWeb Storageを利用してブラウザに保存していますので、別ブラウザ/別マシンを使用した際に履歴は引き継がれません。
<b>ソースコード</b>
<a href="https://github.com/shoito/bookmarklet/tree/master/microjs">https://github.com/shoito/bookmarklet/tree/master/microjs</a>
<div class="projects"><div data-repo="shoito/bookmarklet"></div></div><div style="clear:both;"></div>
<div class="p1"><b>フィードバック</b></div><div class="p1">感想、要望、不具合などありましたら <a href="http://twitter.com/shoito">@shoito</a> へツイートいただけると嬉しいです。</div></div></div><span class="fullpost"></span>shoitohttp://www.blogger.com/profile/01404360965246662555noreply@blogger.com0tag:blogger.com,1999:blog-5113336979627179162.post-78775493129527364782012-01-09T18:58:00.002+09:002013-08-16T01:29:55.095+09:00FreeMind Import for astah - astahプラグイン<div class="p1"><b>背景</b></div><div class="p1">これまで6年ほどマインドマップを描いていて、ツールは<a href="http://www.pluslink.jp/" target="_blank">MindManager</a>, <a href="http://mindp.kantetsu.com/" target="_blank">MiNDPiECE</a>, <a href="http://freemind.sourceforge.net/" target="_blank">FreeMind</a>, <a href="http://astah.change-vision.com/" target="_blank">astah</a>といろいろ使ってきてました。そのため、それぞれのツールで作ったファイルがあるんですが、全てのツールに互換性がある訳じゃなくて「あー、以前描いたマインドマップが見たいのになー。」ってことがありました。<br />
そんな訳で、まずは自分以外からも要望のあったFreeMind → astahを実現してみました。<br />
<br />
<div class="p1"><b>FreeMind Import for astahとは</b></div><div class="p1">ソフトウェア設計支援ツール <a href="http://astah.change-vision.com/">astah(旧JUDE)</a> <span style="background-color: white; color: #111111; font-family: 'Lucida Grande', 'Segoe UI', Ubuntu, sans-serif; text-align: left;">に、マインドマップ作成ツール </span><a href="http://freemind.sourceforge.net/" style="background-color: white; color: #1122cc; font-family: 'Lucida Grande', 'Segoe UI', Ubuntu, sans-serif; text-align: left;" target="_blank">FreeMind</a><span style="background-color: white; color: #111111; font-family: 'Lucida Grande', 'Segoe UI', Ubuntu, sans-serif; text-align: left;"> のファイル(.mm)をインポートするastahプラグインです。</span><a href="http://astah.change-vision.com/astah-uml.var" style="background-color: white; color: #1122cc; font-family: 'Lucida Grande', 'Segoe UI', Ubuntu, sans-serif; text-align: left;" target="_blank">astah UML</a><span style="background-color: white; color: #111111; font-family: 'Lucida Grande', 'Segoe UI', Ubuntu, sans-serif; text-align: left;">, </span><a href="http://astah.change-vision.com/astah-professional.var" style="background-color: white; color: #1122cc; font-family: 'Lucida Grande', 'Segoe UI', Ubuntu, sans-serif; text-align: left;" target="_blank">professional</a><span style="background-color: white; color: #111111; font-family: 'Lucida Grande', 'Segoe UI', Ubuntu, sans-serif; text-align: left;">の何れかにインストールして利用します。</span><br />
<div class="separator" style="clear: both; text-align: center;"><object style="height: 390px; width: 640px;"><param name="movie" value="http://www.youtube.com/v/242DjV5Q35k?version=3&feature=player_embedded"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/242DjV5Q35k?version=3&feature=player_embedded" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="360"></object></div><div style="text-align: left;">※このプラグインはastahのバージョン<b>6.5.1</b>以上で動作します。</div><div style="text-align: left;">※マインドマップを利用するため、astah communityでは利用できません。</div><div style="text-align: left;">※個人で作ったプロトタイプなので無保証でお願いします。
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://shoito.github.com/freemind-import-for-astah/images/freemind_ss.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="321" src="http://shoito.github.com/freemind-import-for-astah/images/freemind_ss.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><b>FreeMindのこんなマインドマップを↑</b></td></tr>
</tbody></table></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://shoito.github.com/freemind-import-for-astah/images/astah_ss.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="325" src="http://shoito.github.com/freemind-import-for-astah/images/astah_ss.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><b>↑astahにインポートするとこうなります</b></td></tr>
</tbody></table><b>FreeMindとは</b>
<blockquote class="tr_bq"><b><a href="http://freemind.sourceforge.net/" target="_blank">FreeMind</a></b>(フリーマインド)は、<a href="http://ja.wikipedia.org/wiki/%E3%83%91%E3%83%BC%E3%82%BD%E3%83%8A%E3%83%AB%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="パーソナルコンピュータ">PC</a>上で<a class="mw-redirect" href="http://ja.wikipedia.org/wiki/%E3%83%9E%E3%82%A4%E3%83%B3%E3%83%89%E3%83%9E%E3%83%83%E3%83%94%E3%83%B3%E3%82%B0" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; color: #0b0080;" title="マインドマッピング">マインドマッピング</a>と<a class="new" href="http://ja.wikipedia.org/w/index.php?title=%E3%83%8A%E3%83%AC%E3%83%83%E3%82%B8%E3%83%93%E3%83%AB%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0&action=edit&redlink=1" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; background-position: initial initial; background-repeat: initial initial; color: #a55858; text-decoration: none;" title="ナレッジビルディング(存在しないページ)">ナレッジビルディング</a>のための無料の<a href="http://ja.wikipedia.org/wiki/%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; background-position: initial initial; background-repeat: initial initial; color: #0b0080; text-decoration: none;" title="ソフトウェア">ソフトウェア</a>である。 </blockquote><blockquote class="tr_bq"><a href="http://ja.wikipedia.org/wiki/GNU_General_Public_License" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; color: #0b0080; text-decoration: none;" title="GNU General Public License">GPL</a>下で<a href="http://ja.wikipedia.org/wiki/%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; color: #0b0080; text-decoration: none;" title="ソースコード">ソースコード</a>が公開されている<a href="http://ja.wikipedia.org/wiki/%E3%82%AA%E3%83%BC%E3%83%97%E3%83%B3%E3%82%BD%E3%83%BC%E3%82%B9" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; color: #0b0080; text-decoration: none;" title="オープンソース">オープンソース</a>ソフトウェアである。 <a href="http://ja.wikipedia.org/wiki/Java" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; color: #0b0080; text-decoration: none;" title="Java">Java</a>で書かれたソースのほかに、<a href="http://ja.wikipedia.org/wiki/%E3%83%90%E3%82%A4%E3%83%8A%E3%83%AA" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; color: #0b0080; text-decoration: none;" title="バイナリ">バイナリ</a>形式で、<a href="http://ja.wikipedia.org/wiki/Microsoft_Windows" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; color: #0b0080; text-decoration: none;" title="Microsoft Windows">Microsoft Windows</a>版、<a href="http://ja.wikipedia.org/wiki/Mac_OS_X" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; color: #0b0080; text-decoration: none;" title="Mac OS X">Mac OS X</a>版、<a href="http://ja.wikipedia.org/wiki/Linux" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; color: #0b0080; text-decoration: none;" title="Linux">Linux</a> (<a href="http://ja.wikipedia.org/wiki/Debian" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; color: #0b0080; text-decoration: none;" title="Debian">Debian</a>、<a class="mw-redirect" href="http://ja.wikipedia.org/wiki/SuSE" style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; color: #0b0080; text-decoration: none;" title="SuSE">SuSE</a>) 版が公開されている 。</blockquote><blockquote class="tr_bq" style="text-align: right;"><a href="http://ja.wikipedia.org/wiki/FreeMind" target="_blank">FreeMind - Wikipedia</a>より引用</blockquote><b>プロジェクトページ</b>
インストール方法など詳細は下記プロジェクトページをご覧ください。
<h1 style="background-color: white; background-image: url(https://a248.e.akamai.net/assets.github.com/images/icons/public.png); background-position: 0px 50%; background-repeat: no-repeat no-repeat; color: #666666; font-family: helvetica, arial, freesans, clean, sans-serif; font-size: 20px; font-weight: normal; height: 28px; letter-spacing: -1px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 23px; padding-right: 0px; padding-top: 0px; text-shadow: rgb(255, 255, 255) 1px 1px 0px;"> <strong style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><a href="http://shoito.github.com/freemind-import-for-astah/" target="_blank">freemind-import-for-astah</a></strong><span style="background-color: transparent;"> </span></h1><div><div class="p1"><b>プラグイン開発について</b>
astahプラグイン開発チュートリアルとSDKが公開されているので、それをベースに開発しています。
<a href="http://astah.change-vision.com/ja/plugin-tutorial/">http://astah.change-vision.com/ja/plugin-tutorial/</a>
<b>
</b>
<b>FreeMindファイル(.mm)</b>
拡張子.mmのXMLファイルであり、<a href="http://freemind.cvs.sourceforge.net/viewvc/freemind/freemind/freemind.xsd?pathrev=fm_0_9_0_beta2&revision=1.1.2.4" target="_blank">XML Schema</a>が公開されています。
これをJAXBバインディングコンパイラ(xjc)にかけてJavaのモデルクラスを作っています。
<blockquote class="tr_bq">$ xjc src/main/resources/schema/freemind.xsd -p com.github.astah.mm2asta.model -d src/main/java</blockquote>これでFreeMindファイル(.mm)をastah側で読み込むベースは出来たので、あとはプラグイン側で、読み込んだマインドマップのツリー構造通りにastahのマインドマップAPIを使って、astah側のデータを作っています。この処理は<a href="https://github.com/shoito/freemind-import-for-astah/blob/master/src/main/java/com/github/astah/mm2asta/MmWalker.java" target="_blank">この辺</a>でやってます。
<b>フィードバック</b></div><div class="p1">感想、要望、不具合などありましたら <a href="http://twitter.com/shoito">@shoito</a> へツイートいただけると嬉しいです。</div></div></div></div><div class="projects"><div data-repo="shoito/freemind-import-for-astah"></div></div><div style="clear:both;"></div><span class="fullpost"></span>shoitohttp://www.blogger.com/profile/01404360965246662555noreply@blogger.com0tag:blogger.com,1999:blog-5113336979627179162.post-77517568888422715692011-12-20T01:00:00.000+09:002013-08-16T01:31:57.124+09:00Web Storage APIを別空間から使ってみる - HTML5 Adv<span class="fullpost"></span><br />
<div><br />
</div><div><br />
<div class="p1">12月20日の<a href="http://atnd.org/events/21987" target="_blank">HTML5 Advent Calendar</a>担当の@shoitoです。</div><div class="p2"><br />
</div><div class="p1">今回は、以前にも本ブログで軽く紹介したことがある、Web Storage APIをFlash側と共有する簡単な方法について紹介します。業務でHTML5(File APIやWeb Storage, Application Cache...)以外にも、Flash/Flexもまだ現役で使用中(主にメンテ)なので、その両方に関係するネタを扱うことにしました。</div><div class="p2"><br />
</div><div class="p1">ページの一部にFlashが埋め込まれているようなページで、HTML部分とFlash部分の共有ストレージ領域を設けられないかと思って、Web Storage APIに今回白羽の矢が立ちました。</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmW9tbFPMbmoHnpkqDB9fT9jf-ZN6UA32SsVC7EZ4wbZhFWIcVqP10wJwibSKBQVbQeiruH5Qvk1zMdO6XCq0BGpQRTg4unnnxYOY6ZeEZKvPupz1tENh9iSlsv8j0M-4q21Ynz24iTi0/s1600/wireframe.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="255" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmW9tbFPMbmoHnpkqDB9fT9jf-ZN6UA32SsVC7EZ4wbZhFWIcVqP10wJwibSKBQVbQeiruH5Qvk1zMdO6XCq0BGpQRTg4unnnxYOY6ZeEZKvPupz1tENh9iSlsv8j0M-4q21Ynz24iTi0/s400/wireframe.png" width="400" /></a></div><div class="p1"></div><div class="p1"></div><div class="p1"><br />
多くのブラウザで利用できるAPIであることが大事ですので、Web Storage APIについて確認してみると、IE6, 7以外のほとんどのブラウザで使えることがわかります。</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5wsSiIsXTH2B0O2vogG0oA6-1Kokd5j9ah7D8j7Wmx1OFqCPaQNsaXdTG9aiVP1f7NY_FcCwDGHwJdrwfLKLjzzAkTH2fB1n7yjzdRCHbii4TzCHaQGhMPQAjnoKDBNFrVPK3XLis7ZM/s1600/webstorage.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5wsSiIsXTH2B0O2vogG0oA6-1Kokd5j9ah7D8j7Wmx1OFqCPaQNsaXdTG9aiVP1f7NY_FcCwDGHwJdrwfLKLjzzAkTH2fB1n7yjzdRCHbii4TzCHaQGhMPQAjnoKDBNFrVPK3XLis7ZM/s400/webstorage.png" width="400" /></a></div><div class="p1"><br />
</div><div class="p1"></div><div class="p1">イメージ的には下記のようになりますが、Web Storage APIはもちろんJavaScript APIなので、ページ内のJavaScriptから簡単に扱えます。しかし、Flash側からWeb Storageのストレージ領域にアクセスするAPIがありません。そこでActionScriptでWeb Storage APIを実装します。青の矢印部分。</div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4FFDalytAtk_wVo63C6G8gZDm4vWRvdOABswCC8DFtbL9YToUZZEA8Oh8Ty0MLH43lqQr3z7ePnvQ5Dj_I5QnVAhMrRApD8YS9I7qV5uu3JX4UWX54vGJ5PY-qOTWe6dez1NocmkZkis/s1600/image.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4FFDalytAtk_wVo63C6G8gZDm4vWRvdOABswCC8DFtbL9YToUZZEA8Oh8Ty0MLH43lqQr3z7ePnvQ5Dj_I5QnVAhMrRApD8YS9I7qV5uu3JX4UWX54vGJ5PY-qOTWe6dez1NocmkZkis/s320/image.png" width="320" /></a></div><div class="p1"></div><div class="p1"><br />
</div><div class="p1">まず、ActionScriptのAPIを実装するために、W3Cで公開されている<a href="http://dev.w3.org/html5/webstorage/" target="_blank">Web Storage API仕様</a>を確認すると、引数、戻り値の方は基本的にvoidかDOMStringなので扱いやすそうです。</div><div class="p1">Web Storage API自体シンプルなので、メソッドの数も多くはありません。なお、Local StorageとSession Storageはインターフェースは同じで、スコープが違うだけです。</div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBtkvPJPPdpRWp_ZIKAQMjtyLs3XlNX-z67gwTqADmnk951mDGwdPj28w7CFdT4uLZI42nISJwqt3oilV5S0d_IP0RZ0wSft69UtFpOpMShLFXw4QuFfwW9ehSQWuatknUjgQPVX7a1nI/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2011-12-20+0.18.59.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBtkvPJPPdpRWp_ZIKAQMjtyLs3XlNX-z67gwTqADmnk951mDGwdPj28w7CFdT4uLZI42nISJwqt3oilV5S0d_IP0RZ0wSft69UtFpOpMShLFXw4QuFfwW9ehSQWuatknUjgQPVX7a1nI/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2011-12-20+0.18.59.png" /></a></div><div><div><br />
</div><div>次に、実装に用いる<a href="http://help.adobe.com/ja_JP/FlashPlatform/reference/actionscript/3/flash/external/ExternalInterface.html" target="_blank">flash.external.ExternalInterfaceクラス</a>のリファレンスに目を通すと下記のように説明されています。</div><div><blockquote class="tr_bq">ActionScript から、HTML ページに対して次のことを実行できます。<br />
<ul><li><b>任意の JavaScript 関数を呼び出す</b> </li>
<li>引数の数を名前と共に渡す </li>
<li>ブール(Boolean)、数値(Number)、ストリング(String)などの各種データ型を渡す </li>
<li><b>JavaScript 関数からの戻り値を受け取る</b> </li>
</ul></blockquote><blockquote class="tr_bq">HTML ページの JavaScript から、次のことを実行できます。<br />
<ul><li>ActionScript 関数を呼び出す</li>
<li>標準の関数呼び出しの表記法を使用して、引数を渡す</li>
<li>JavaScript 関数に値を戻す</li>
</ul></blockquote></div><div><div>注目すべき点を太字にしましたが、ExternalInterfaceを利用することで、ActionScriptからJavaScript APIを利用できることが分かります。下記のようなイメージになります。<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5mlQzA6QpIKUEe9xC1bYW7g2A0H2OrzewYrbquAltdxrZutksL6RzqwNNxnl4vFUhza7nhbvYIsBkXeNGqzjTQww1YMYMvrVJ3uNfmbhq_SYJtEHotOl27fze25MrBH1E5_dHVDdhEi0/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2011-12-19+22.16.29.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="236" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5mlQzA6QpIKUEe9xC1bYW7g2A0H2OrzewYrbquAltdxrZutksL6RzqwNNxnl4vFUhza7nhbvYIsBkXeNGqzjTQww1YMYMvrVJ3uNfmbhq_SYJtEHotOl27fze25MrBH1E5_dHVDdhEi0/s400/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2011-12-19+22.16.29.png" width="400" /></a></div><br />
</div><div>これに着目して、実装したActionScript APIが下記になります。</div><pre>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);
}
}
}</pre><div>ActionScriptに見慣れていない方には分かりにくいと思います。</div><div>どういうことをしているかと言うと、getItem()やsetItem()など各メソッドの中で、JavaScriptによるWeb Storage API実装を呼ぶようにしています(ラップしているだけ)。<br />
call()メソッドの第一引数にJavaScriptコードの文字列表現、第二引数に各Web Storage APIに渡す引数を指定しています。こうすることで、ExternalInterfaceを通して、JavaScript <---> ActionScript連携が実現できます。しかし、これだけだとWeb Storage APIのStorageイベントを扱うことができません。</div><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYFCKNRwGdLi7_1QTr9pfdq41eqoaTOouW_2M3TtJzShSKFJTNpkYnhgVGOgzxN5hKEpQAngx2Fd65W0NqheAvcG1u1AgkU_C58EpABcty13Ea04AVk68QVdLh2SJow8SiaMG-zTlHCuM/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2011-12-20+0.40.02.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYFCKNRwGdLi7_1QTr9pfdq41eqoaTOouW_2M3TtJzShSKFJTNpkYnhgVGOgzxN5hKEpQAngx2Fd65W0NqheAvcG1u1AgkU_C58EpABcty13Ea04AVk68QVdLh2SJow8SiaMG-zTlHCuM/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2011-12-20+0.40.02.png" /></a></div><div class="p1"></div><div class="p1"><br />
</div><div class="p1">そこで、addStorageEventListener()用のコールバックをJavaScript側に実装します。</div><pre>(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);
};
}
};
})();</pre></div><div class="p1">サンプルを作ったので下記で試せます。<br />
<a href="http://dl.dropbox.com/u/227786/code/flex/as3webstorage/as3localstorage.html">http://dl.dropbox.com/u/227786/code/flex/as3webstorage/as3localstorage.html</a></div><div class="p1">本当にWeb Storageが使われているかはデベロッパーツールなどを使って確認してください。</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDB85IMvqGJt5LA3uFHEBPX-aP8t6I_yWjDU4cSj3VqrINsbC_d6rVGT2H5_yFR1J3mN5j68UoyRPalMk2Hg9iWEf6yIFMxDvRX-JlUEcct1k1upNhbq-zigJ05md33biEwcytYsmBNpk/s1600/as-js.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="242" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDB85IMvqGJt5LA3uFHEBPX-aP8t6I_yWjDU4cSj3VqrINsbC_d6rVGT2H5_yFR1J3mN5j68UoyRPalMk2Hg9iWEf6yIFMxDvRX-JlUEcct1k1upNhbq-zigJ05md33biEwcytYsmBNpk/s400/as-js.png" width="400" /></a></div><br />
ExternalInterfaceでJavaScript <---> ActionScript間のデータ交換はXML形式で行われるので、オブジェクトによってはデシリアライズできないものもあります。<br />
そのため、シンプルなインターフェースなら今回のように実装することが可能なのですが、Indexed Database APIのような複雑なものだと難しそうです。<br />
<br />
あ、これって誰得?ActionScriptの話が多くない?という感じで終わってすいません。<br />
<a href="http://atnd.org/events/21987" target="_blank">HTML5 Advent Calendar 2011</a>はまだ続きますのでお楽しみに。<br />
<br />
関連記事<br />
<blockquote class="tr_bq">Flash + HTML 5 : Offline Flash Apps using DataStore API<br />
<span class="s1"><a href="http://blog.flexgeek.in/2010/05/flash-html-5-offline-flash-apps-using-datastore-api/">http://blog.flexgeek.in/2010/05/flash-html-5-offline-flash-apps-using-datastore-api/</a></span> </blockquote><blockquote class="tr_bq">HTML5 Web Storage APIをFlash/Flexから使う - as3webstorage<br />
<span class="s1"><a href="http://blog.air-life.net/2010/06/as3webstorage.html">http://blog.air-life.net/2010/06/as3webstorage.html</a></span> </blockquote><blockquote class="tr_bq">HTML5 Geolocation APIをFlash/Flexから使う - as3geolocation<br />
<span class="s1"><a href="http://blog.air-life.net/2010/06/as3geolocation.html">http://blog.air-life.net/2010/06/as3geolocation.html</a></span></blockquote></div></div><div></div><div class="p1"></div></div><br />
<div class="projects"><div data-repo="shoito/as3webstorage"></div><div data-repo="shoito/as3geolocation"></div></div>shoitohttp://www.blogger.com/profile/01404360965246662555noreply@blogger.com0tag:blogger.com,1999:blog-5113336979627179162.post-84035125716714937612011-12-15T01:40:00.000+09:002011-12-15T02:33:46.268+09:00JIRA 5.0、REST APIとREST API Browser<div class="p1">
<a href="http://atnd.org/events/22899" target="_blank">JIRA Advent Calendar</a>の12/15担当 <a href="http://twitter.com/shoito" target="_blank">@shoito</a> です。</div>
<div class="p2">
<br /></div>
<div class="p1">
今回は、フライング気味に<a href="http://www.atlassian.com/ja/software/jira/overview" target="_blank">JIRA</a> 5.0(12/15時点ではRC2)のREST APIとREST API Browser(RAB)について紹介します。<br />
<a href="http://d.hatena.ne.jp/showyou/20111214/1323880770" target="_blank">12/14</a>担当の<a href="http://twitter.com/showyou" target="_blank">@showyou</a>さんとREST APIネタで被っている気がしますが気にしませんw<br />
<br /></div>
<div class="p1">
みなさんはJIRAプラグインやJIRA連携ツールはご存知でしょうか?</div>
<div class="p1">
初耳という方はどんなものがあるのかAtlassian Plugin Exchangeをご覧ください。</div>
<div class="p3">
<span class="s1"><a href="https://plugins.atlassian.com/plugin/home">https://plugins.atlassian.com/plugin/home</a></span><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVVYklLjHz2DZjGsFN7lPCxf3D1WWd3KtP-bAB6mdSylrxeaLRn-cJIdwI1f0rfrhBsFSlIvI2JVLxY4jprTVQXCyOpIT9JYQ8txRqEDdGSsrB80_M7n_HK9oiGdrqh6bDQkd7KcAzWTM/s1600/plugin-exchange.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="238" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVVYklLjHz2DZjGsFN7lPCxf3D1WWd3KtP-bAB6mdSylrxeaLRn-cJIdwI1f0rfrhBsFSlIvI2JVLxY4jprTVQXCyOpIT9JYQ8txRqEDdGSsrB80_M7n_HK9oiGdrqh6bDQkd7KcAzWTM/s400/plugin-exchange.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Atlassian Plugin Exchange</td></tr>
</tbody></table>
</div>
<div class="p1">
<b>JIRAプラグイン</b></div>
<div class="p1">
JIRA以外にも、Confluence, FishEye, Bamboo, Crowd, CrucibleなどAtlassian製品のプラグインが1000以上あり、JIRAだけでも12/15時点で、395のプラグイン(または連携ツール)が公開されています。</div>
<div class="p1">
Atlassian製品のGreenHopperやBonfireもJIRAプラグイン(+ブラウザ拡張)ですので、Atlassian Plugin Exchangeで見つけることができます。</div>
<div class="p2">
<br /></div>
<div class="p1">
<b>JIRA連携ツール</b></div>
<div class="p1">
JIRAはAPIを公開してくれているので、他のツールと連携させることが可能です。</div>
<div class="p1">
SOAP、XML-RPC、REST APIと受け口は設けられていて、連携元の構成に合わせて選択できますが、今回はREST APIに焦点を絞って話を進めます。</div>
<div class="p1">
ちなみに、連携ツールとしてはEclipseやVisualStudioなどのIDEと連携する<a href="http://www.atlassian.com/software/ide-connectors/overview" target="_blank">Atlassian Connector</a>が私は思い浮かびます。</div>
<div class="p2">
<br /></div>
<div class="p1">
<b>REST APIを試す準備</b></div>
<div class="p1">
JIRA 5.0のREST APIを試すためには、まず<a href="https://developer.atlassian.com/display/HOME/Welcome" target="_blank">Atlassian SDK</a>をインストールします。</div>
<div class="p1">
Mac OS X環境でHomebrewを使っていれば、下記のコマンドでインストールできます。</div>
<div class="p1">
<blockquote class="tr_bq">
$ brew install atlassian-plugin-sdk</blockquote>
</div>
<div class="p1">
他の環境の方は<a href="https://developer.atlassian.com/display/HOME/Welcome" target="_blank">Atlassian Developers</a>からダウンロードし、PATH変数の設定などを行います。</div>
<div class="p3">
<a href="https://developer.atlassian.com/display/HOME/Welcome">https://developer.atlassian.com/display/HOME/Welcome</a><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsEeobIERhj1xMBOzGDX_RHfgMUPT6_YYjIdO5_KZHAqrhyphenhyphenXS8l_8xacs9fnJpbujfOnzXKDnwb-v6IpxFnxYcfWgoBsa-3821oOvEZmF9HL97i9AE5NLxw98Rt1ls7pGca-0Nr4owviU/s1600/atlassian-developers.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="247" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsEeobIERhj1xMBOzGDX_RHfgMUPT6_YYjIdO5_KZHAqrhyphenhyphenXS8l_8xacs9fnJpbujfOnzXKDnwb-v6IpxFnxYcfWgoBsa-3821oOvEZmF9HL97i9AE5NLxw98Rt1ls7pGca-0Nr4owviU/s400/atlassian-developers.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Atlassian Developers</td></tr>
</tbody></table>
</div>
<div class="p2">
</div>
<div class="p1">
この辺は<a href="https://developer.atlassian.com/display/DOCS/Installing+the+Atlassian+Plugin+SDK" target="_blank">Installing the Atlassian Plugin SDK</a>が参考になります。</div>
<div class="p3">
<a href="https://developer.atlassian.com/display/DOCS/Installing+the+Atlassian+Plugin+SDK">https://developer.atlassian.com/display/DOCS/Installing+the+Atlassian+Plugin+SDK</a></div>
<div class="p2">
<br /></div>
<div class="p1">
次に、JIRAプラグイン/連携ツール開発用のJIRAを立ち上げるために、プロジェクトを作ります。</div>
<div class="p1">
JIRA 5にするのかい?4にするのかい?と聞かれるので、JIRA 5を使うように1を選択しましょう。</div>
<div class="p1">
<blockquote class="tr_bq">
$atlas-create-jira-plugin<br />
<br />
<div class="p1">
<span style="font-size: x-small;">A new plugin structure is required for JIRA 5 plugins due to significant changes in the APIs.</span></div>
<div class="p1">
<span style="font-size: x-small;">Create a plugin for?</span></div>
<div class="p1">
<span style="font-size: x-small;">1) Shiny new JIRA 5</span></div>
<div class="p1">
<span style="font-size: x-small;">2) Regular 'ol JIRA 4 (or earlier)</span></div>
</blockquote>
</div>
<div class="p1">
mavenプロジェクトのgroupIdやartifactIdなどの入力を求められるので、適当に入力します。</div>
<div class="p1">
<blockquote class="tr_bq">
<div class="p1">
<span style="font-size: x-small;">Define value for groupId: : com.github.astah</span></div>
<div class="p1">
<span style="font-size: x-small;">Define value for artifactId: : jira-connector</span></div>
<div class="p1">
<span style="font-size: x-small;">Define value for version: 1.0-SNAPSHOT: :</span></div>
<div class="p1">
<span style="font-size: x-small;">Define value for package: com.github.astah: : com.github.astah.connector.jira</span></div>
<div class="p1">
<span style="font-size: x-small;">Confirm properties configuration:</span></div>
<div class="p1">
<span style="font-size: x-small;">groupId: com.github.astah</span></div>
<div class="p1">
<span style="font-size: x-small;">artifactId: jira-connector</span></div>
<div class="p1">
<span style="font-size: x-small;">version: 1.0-SNAPSHOT</span></div>
<div class="p1">
<span style="font-size: x-small;">package: com.github.astah.connector.jira</span></div>
</blockquote>
</div>
<div class="p1">
このままの状態で、atlas-run コマンドを実行してJIRAを起動すると5.0-beta1で起動してしまうので、pom.xmlのjira.versionを最新バージョンに変更します。</div>
<div class="p1">
REST APIは5.0 finalに向けてどんどん追加されていっていたので、beta1のままだと扱えないAPIがあるためです。<br />
<blockquote class="tr_bq">
[before]<br />
<jira.version>5.0-beta1</jira.version></blockquote>
<blockquote class="tr_bq">
[after]<br />
<jira.version>5.0-rc2</jira.version></blockquote>
</div>
<div class="p1">
pom.xmlを編集し終えたら、atlas-run コマンドを実行します。</div>
<div class="p1">
<blockquote class="tr_bq">
$ atlas-run</blockquote>
</div>
<div class="p1">
JIRAの実行に必要なライブラリが大量にmavenリポジトリからダウンロードされ、私の家の貧弱な回線では30分程度時間がかかったので、この間にランチやディナーにでも行ってください。</div>
<div class="p2">
<br /></div>
<div class="p1">
さぁ、これでJIRAのREST APIを試す環境はできましたが、このままではプロジェクトも課題もadmin以外のユーザーも存在しないので、適当なプロジェクトを作って、課題を幾つか登録しておくことをお勧めします。</div>
<div class="p1">
(準備でここまで...)</div>
<div class="p2">
<br /></div>
<div class="p1">
<b>REST API</b></div>
<div class="p1">
REST APIを使うことでプロジェクト、ユーザー、課題の検索や操作などが行えます。</div>
<div class="p1">
では、JIRA REST API Tutorials を見ながら幾つか試してみましょう。</div>
<div class="p3">
<span class="s1"><a href="https://developer.atlassian.com/display/JIRADEV/JIRA+REST+API+Tutorials">https://developer.atlassian.com/display/JIRADEV/JIRA+REST+API+Tutorials</a></span></div>
<div class="p2">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3A9RVqaORfE2SUss-QBPaztdH1t6JLDS36Mbtu5yAHYl0UphdejhmDvqiGKt54_9Hprlf9pHcZb1h3qTJxv3fi3iS-bLFfK9Vf5V_qR2hO1Mce23PxCfdNGN5f-rVm1D2SmSKh7KxbEA/s1600/rest-api-tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3A9RVqaORfE2SUss-QBPaztdH1t6JLDS36Mbtu5yAHYl0UphdejhmDvqiGKt54_9Hprlf9pHcZb1h3qTJxv3fi3iS-bLFfK9Vf5V_qR2hO1Mce23PxCfdNGN5f-rVm1D2SmSKh7KxbEA/s320/rest-api-tutorial.png" width="320" /></a></div>
<br />
下記の例では、初期状態で登録されているadminユーザー、パスワードadminでREST APIを読んでいます。</div>
<div class="p1">
<ul>
<li>課題JAC-1の詳細をJSON形式で取得</li>
</ul>
</div>
<div class="p3">
<blockquote class="tr_bq">
<span class="s2">$ curl -u admin:admin <a href="http://localhost:2990/jira/rest/api/2/issue/JAC-1"><span class="s1">http://localhost:2990/jira/rest/api/2/issue/</span>JAC-1</a></span></blockquote>
</div>
<div class="p1">
<ul>
<li>JIRAにあるプロジェクトの一覧をJSON形式で取得</li>
</ul>
</div>
<div class="p3">
<blockquote class="tr_bq">
<span class="s2">$ curl -u admin:admin <a href="http://localhost:2990/jira/rest/api/2/project/"><span class="s1">http://localhost:2990/jira/rest/api/2/</span>project/</a></span></blockquote>
</div>
<div class="p1">
<ul>
<li>adminユーザーにアサインされている課題の一覧をJSON形式で取得</li>
</ul>
</div>
<div class="p3">
<blockquote class="tr_bq">
<span class="s2">$ curl -u admin:admin <span class="s1"><a href="http://localhost:2990/jira/rest/api/2/search?jql=assignee=admin">http://localhost:2990/jira/rest/api/2/search?jql=assignee=admin</a></span></span></blockquote>
</div>
<div class="p1">
というように、これは一例ですがこれまでもREST APIを試すことが出来ました。</div>
<div class="p1">
しかし、curlコマンドやREST ConsoleよりもJIRAに特化して試しやすいツールがAtlassian SDK 3.6.2から登場しました。それがREST API Browserです。</div>
<div class="p2">
<br /></div>
<div class="p1">
<b>REST API Browser(RAB)</b></div>
<div class="p1">
Atlassian SDKに含まれるJIRAプラグイン。各種REST APIをブラウザ上から試すことができます。</div>
<div class="p3">
<span class="s1"><a href="http://localhost:2990/jira/plugins/servlet/restbrowser">http://localhost:2990/jira/plugins/servlet/restbrowser</a></span><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6AICKzP7pdcTNY2aiFN-PrTLuAP3pY5TXVfZqaqvK_FUafXDimhqq_3aW7SNb6ivP6FCXvRXhmlb8jTlYdj4Ps1rYcj03Nv0WYOstStAXEw_FcSblyrPwYMrAIXL4UlhbcNqWyOmqbGA/s1600/rab.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="283" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6AICKzP7pdcTNY2aiFN-PrTLuAP3pY5TXVfZqaqvK_FUafXDimhqq_3aW7SNb6ivP6FCXvRXhmlb8jTlYdj4Ps1rYcj03Nv0WYOstStAXEw_FcSblyrPwYMrAIXL4UlhbcNqWyOmqbGA/s400/rab.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">REST API Browser</td></tr>
</tbody></table>
</div>
<div class="p1">
何が便利かというと、まず各APIのパラメーターをイチイチ調べなくて良くなりました。</div>
<div class="p1">
各APIを試すためのフォームが設けられていて、そこにパラメーターの入力フィールドもあるため、このAPIのパラメーターはprojectIdと何を指定するんだっけ?issueId?fieldsだっけ?ということがなくなりました。</div>
<div class="p1">
レスポンスのJSONも当たり前のように整形されていてステキです。</div>
<div class="p2">
<br /></div>
<div class="p1">
まず上部から試したいAPIを選択します。</div>
<div class="p1">
ここでは、11番目くらいにあるAtlassian JIRA - Plugins - REST Plugin (/rest/api/2)を試しましょう。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ6SBE09cVzIQN_OTP8cQCLd8nc_plIllCj1mUSw21-9pn0TJZ_t0nG6Fx7ZiZ2UC1hX3UYR2_8K6hR7vGieIVvvHFbXNrC4wNURPy0qsW47jXaYlhXULYNLN7s54qRd9Pxxzlr7Ze0fk/s1600/rab-select-api.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ6SBE09cVzIQN_OTP8cQCLd8nc_plIllCj1mUSw21-9pn0TJZ_t0nG6Fx7ZiZ2UC1hX3UYR2_8K6hR7vGieIVvvHFbXNrC4wNURPy0qsW47jXaYlhXULYNLN7s54qRd9Pxxzlr7Ze0fk/s320/rab-select-api.png" width="254" /></a></div>
<br /></div>
<div class="p1">
次に、adminユーザーにアサインされている課題の一覧を取得してみます。</div>
<div class="p1">
/search を選択し、jql フォームに assignee=admin と入力し、Executeボタンを押下します。</div>
<div class="p1">
するとスクリーンショットにあるように、リクエスト、レスポンスヘッダ、レスポンスボディが確認できます。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBVSI6q4bOiyWneuHCs0ZGbOp0G-ilvCy7UwRDlUTF-mV451UDI46Hsa8J7GuLUO0zL4GnugusApl8-1FycYIrxzaE30bNNCzaUr58BwpEy11sbSjh3QAOvqwCLHFs8p64dhLBrrJVd7I/s1600/rab-search-ss.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBVSI6q4bOiyWneuHCs0ZGbOp0G-ilvCy7UwRDlUTF-mV451UDI46Hsa8J7GuLUO0zL4GnugusApl8-1FycYIrxzaE30bNNCzaUr58BwpEy11sbSjh3QAOvqwCLHFs8p64dhLBrrJVd7I/s400/rab-search-ss.png" width="386" /></a></div>
<br /></div>
<div class="p1">
ちなみに、選択できるカテゴリを数えてみたら34ありました。スゴいなー。</div>
<div class="p1">
<blockquote class="tr_bq">
Applinks Product Plugin<br />
Atlassian Developer Toolbox<br />
Atlassian Embedded Crowd - Administration Plugin<br />
Atlassian JIRA - Plugins - Admin Quick Navigation<br />
Atlassian JIRA - Plugins - Common AppLinks Based Issue Link Plugin<br />
Atlassian JIRA - Plugins - Confluence Link<br />
Atlassian JIRA - Plugins - Gadgets Plugin<br />
….</blockquote>
</div>
<div class="p1">
<b>まとめ</b></div>
<div class="p1">
準備のため長い前置きとREST APIとREST API Browserについて紹介しました。</div>
<div class="p1">
REST API Browserの登場のおかげで、連携ツールの開発が進めやすくなったと思います。</div>
<div class="p1">
是非、来年(?)正式リリース予定のJIRA 5.0のREST APIで遊んでみてください。</div>
<div class="p2">
<br /></div>
<div class="p1">
<b>注意</b></div>
<div class="p1">
atlas-runで起動したJIRAでは、JIRA_HOMEがtarget/jira/home ディレクトリに設定されているため、atlas-cleanコマンド(mvn clean)を実行するとキレイさっぱりと消えてしまいます。</div>
<div class="p1">
そもそも開発用ですので、適宜データをExportしておくか、消えるのを覚悟しておいてください。</div>
<div class="p2">
<br /></div>
<div class="p1">
次の担当は <a href="https://twitter.com/#!/literalice"><span class="s3">@literalice</span></a>さんです。お楽しみに!</div>
<div class="p1">
JIRA Advent Calendar (#<a href="http://twitter.com/search?q=%23jiraadvent"><span class="s4"><b>jiraadvent</b></span></a>) ではあと10人(9人?)の書き手が不足しているようなので、JIRAを既に使いこなしている方もまだまだこれからという方も立候補してみてはいかがでしょう。<br />
<br />
<b>最後に</b><br />
REST API周りでは <a href="http://twitter.com/kompiro" target="_blank">@kompiro</a>さんとの会話で気づいたことや存在を教えてもらったことが含まれています。<a href="http://twitter.com/kompiro" target="_blank">@kompiro</a>さん、ありがとうございます。</div>
<span class="fullpost"></span>shoitohttp://www.blogger.com/profile/01404360965246662555noreply@blogger.com0tag:blogger.com,1999:blog-5113336979627179162.post-22931699264635248932011-11-27T23:28:00.001+09:002013-08-16T01:33:07.198+09:00Backlog Connector for astah - astahプラグイン<div class="p1"><b>背景</b></div><div class="p1">Backlog Connector for astahは「<a href="http://blog.air-life.net/2011/11/cacoo-finder.html">Cacoo Finder - ブラウザ拡張</a>」と同様にMA7向けに、何か提供できるアプリ/サービスがないか考えてプライベートで開発したものです。<br />
しかし、MA7の締め切りには間に合わなかったので、残念ながら応募はできませんでした。</div><div class="p2"><br />
</div><div class="p1"><b>Backlog Connector for astahとは</b></div><div class="p1">ソフトウェア設計支援ツール <a href="http://astah.change-vision.com/">astah(旧JUDE)</a> から、Backlogの課題を確認/作成/編集ができるastahプラグインです。<a href="http://astah.change-vision.com/ja/product/astah-community.html" target="_blank">astah community</a>, <a href="http://astah.change-vision.com/ja/product/astah-uml.html" target="_blank">UML</a>, <a href="http://astah.change-vision.com/ja/product/astah-professional.html" target="_blank">professional</a>の何れかにインストールして利用します。なお、プラグインはastahのバージョン6.5以上でないと利用できません。<br />
ちなみに個人で作ったプロトタイプなので無保証でお願いします。<br />
<div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='640' height='360' src='https://www.youtube.com/embed/kh61BBOTyRg?feature=player_embedded' frameborder='0'></iframe></div>
ご存知ない方のために紹介しますが、<a href="http://www.backlog.jp/" target="_blank">Backlog</a>は、<a href="https://cacoo.com/" target="_blank">Cacoo</a>と同様にヌーラボが提供しているプロジェクト管理のためのサービスです。XML-RPCによる実装のAPIが公開されているので、astahプラグインからそのAPIをコールして利用しています。
<div class="separator" style="clear: both; text-align: center;"><a href="http://www.backlog.jp/" target="_blank"><img border="0" height="345" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE5UVot5DhOL7oytMciH_jQZ9Hb4Tat6VcLjhB3X-2hYztyMbP-rBXE2YhXR0FTaX5ASc897ei-ItqwmHstU-V9u-zoyH6ckVtHilIEB2_NN8qzlH8hsiaQqs0FlLITuhrbze_VobQO8M/s640/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2011-11-27+23.42.33.png" width="640" /></a></div>
</div><div><div class="p1"><b>プロジェクトページ</b>
<h1 style="background-color: white; background-image: url(https://a248.e.akamai.net/assets.github.com/images/icons/public.png); background-position: 0px 50%; background-repeat: no-repeat no-repeat; color: #666666; font-family: helvetica, arial, freesans, clean, sans-serif; font-size: 20px; font-weight: normal; height: 28px; letter-spacing: -1px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 23px; padding-right: 0px; padding-top: 0px; text-shadow: rgb(255, 255, 255) 1px 1px 0px;"> <strong style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><a href="http://shoito.github.com/backlog-connector-for-astah/" target="_blank">backlog-connector-for-astah</a></strong></h1><b>インストール</b></div><div class="p1">astahのインストールフォルダ/plugins に <a href="https://github.com/shoito/backlog-connector-for-astah/downloads" target="_blank">connector-backlog-x.x.x.jar</a> ファイルをコピーしてastahを再起動します。
<b>※astahバージョン6.5以上の</b><b>イ</b><b>ンストール</b>
この辺から各OS用のインストーラーをダウンロードして、実行します。
<a href="http://astah.change-vision.com/ja/product/astah-community.html">http://astah.change-vision.com/ja/product/astah-community.html</a>
</div><div class="p2"><div class="p1"><b>アンインストール</b></div><div class="p1">astahのインストールフォルダ/plugins から connector-backlog-x.x.x.jar ファイルを削除してastahを再起動します。</div><div class="p2"></div></div><div class="p3"></div><div class="p2">
</div><div class="p1"><b>使用方法</b>
プロトタイプレベルなので、Youtube動画をご覧いただければ十分です。
<a href="http://www.youtube.com/watch?v=kh61BBOTyRg">http://www.youtube.com/watch?v=kh61BBOTyRg</a></div></div><div>
</div><div><div class="p1"><b>フィードバック</b></div><div class="p1">感想、要望、不具合などありましたら <a href="http://twitter.com/shoito">@shoito</a> へツイートいただけると嬉しいです。</div></div>
<div class="projects"><div data-repo="shoito/backlog-connector-for-astah"></div></div><div style="clear:both;"></div>shoitohttp://www.blogger.com/profile/01404360965246662555noreply@blogger.com0tag:blogger.com,1999:blog-5113336979627179162.post-1840338465221222442011-11-01T00:49:00.000+09:002013-08-16T01:34:04.066+09:00astah Viewer Gadget - OpenSocial Gadget<div class="p1"><b>背景</b></div><div class="p1">こちらも「<a href="http://blog.air-life.net/2011/11/cacoo-finder.html">Cacoo Finder - ブラウザ拡張</a>」と同様にMA7向けに、何か提供できるアプリ/サービスが<span style="background-color: transparent;">ないか考えて開発したものです。</span></div><div class="projects"><div data-repo="shoito/astah-gadget"></div></div><div style="clear:both;"></div><br />
<div class="p1"><b>astah Viewer Gadgetとは</b></div><div class="p1"><a href="http://astah.change-vision.com/">astah(旧JUDE)製品</a>で作られた設計情報を見るためのOpenSocial Gadgetです。</div><div class="p1">astah Viewer Gadgetを使うことで、astahで描かれたUML、ER図、データフロー図、フローチャート、CRUD、要求図、マインドマップをOpenSocial対応インフラ上で見ることができます。</div><div class="p1"><a href="http://www.infoscoop.org/index.php/ja/infoscoop.html">infoScoop OpenSource</a>をターゲットにしていますが、OpenSocial Gadgetの仕様に沿って作っているため、infoScoop以外にも、iGoogleでもご利用いただけます。</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJXICVPW7uyts-0FNNM-DWwyOGVcaP9BeWGM6rMQT8LCSwkuUB_X2TGcCZqbWkbqk9fpmgjRvuxarmzWNQhCWFNy0bJ5RQmW6TvvkQW1pjMLvTGLtqicAmwyHuMWyPQIhv7FGJ8w_w9h8/s1600/igoogle.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="376" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJXICVPW7uyts-0FNNM-DWwyOGVcaP9BeWGM6rMQT8LCSwkuUB_X2TGcCZqbWkbqk9fpmgjRvuxarmzWNQhCWFNy0bJ5RQmW6TvvkQW1pjMLvTGLtqicAmwyHuMWyPQIhv7FGJ8w_w9h8/s640/igoogle.png" width="640" /></a></div><div class="p2"><br />
</div><div class="p2"><br />
</div><div class="p1"><b>インストール</b></div><div class="p1">各OpenSocialインフラ上でガジェットの追加メニューから、ガジェットのURLとして下記を指定します。</div><div class="p2"><br />
</div><div class="p1">Gadget URL</div><div class="p3"><span class="s1"><a href="http://f.air-life.net/apps/gadgets/astah/astah-gadget.xml">http://f.air-life.net/apps/gadgets/astah/astah-gadget.xml</a></span></div><div class="p2"><br />
</div><div class="p1"><b>使用方法</b></div><ol class="ol1"><li class="li1">astah ViewerをinfoScoopやiGoogleなどのガジェットとして追加する</li>
<li class="li1">astah(旧JUDE)製品で作られた.asta/.judeファイルをastah publishで公開する</li>
<li class="li1">ガジェット設定のastah URLに.asta/.judeファイルのURLを入力する<br />
[例: <a href="http://p.astah.net/a/dademo"><span class="s2">http://p.astah.net/a/dademo</span></a>]</li>
</ol><div class="p1"><b>フィードバック</b></div><div class="p1">感想、要望、不具合などありましたら <a href="http://twitter.com/shoito">@shoito</a> へツイートいただけると嬉しいです。</div><span class="fullpost"></span>shoitohttp://www.blogger.com/profile/01404360965246662555noreply@blogger.com0tag:blogger.com,1999:blog-5113336979627179162.post-62140748886110587202011-11-01T00:48:00.000+09:002013-08-16T01:34:41.452+09:00Cacoo Finder - ブラウザ拡張<b>背景</b><br />
毎年9月〜11月上旬にかけて開催されている<a href="http://ma7.mashupaward.jp/">Mashup Awards</a>ですが、今回で7回目(MA7)になります。<br />
応募条件は、MA応募対象になっている数百あるWeb API/プラットフォームを一つ以上使ったアプリ/サービスです。<br />
<a href="http://ma7.mashupaward.jp/outline?locale=ja">http://ma7.mashupaward.jp/outline?locale=ja</a><br />
<br />
数百あってどのAPIを使ったものかと考えていたところ、良く使わせてもらっているヌーラボの<a href="https://cacoo.com/">Cacoo</a>もAPIを提供していたので、<span style="background-color: transparent;">それを使用したブラウザ拡張を作りました。</span><br />
<br />
<b>Cacoo Finderとは</b><br />
Web上で図の作成&リアルタイムコラボレーションサービス<a href="https://cacoo.com/">Cacoo</a>をブラウザでより簡単に使える、”非公式”のブラウザ拡張です。<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvutlWzKlXXdLK_J_wZU9v_exOUqsECSyR1CaS5wjwfPmOsbxml07jUtOoBTUVY9VhwmFKjnsAbmfOKu_1zUnzZLDKHWMi9HqHl44RZLH-cuHVq4WJkIXuX81eCU1j12hjWWw6WwBj-0g/s1600/1280x800_22.18.05.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvutlWzKlXXdLK_J_wZU9v_exOUqsECSyR1CaS5wjwfPmOsbxml07jUtOoBTUVY9VhwmFKjnsAbmfOKu_1zUnzZLDKHWMi9HqHl44RZLH-cuHVq4WJkIXuX81eCU1j12hjWWw6WwBj-0g/s640/1280x800_22.18.05.png" width="640" /></a></div><br />
Cacoo Finderでは、以下の機能をご利用いただけます。<br />
<ul><li>Cacooで作った図の情報を確認<br />
</li>
<li>Cacooで作った図に簡単にアクセス<br />
</li>
<li>Cacooで新規に図の作成<br />
</li>
<li>図のコメントを確認/追加<br />
</li>
</ul><iframe allowfullscreen="" frameborder="0" height="360" src="https://www.youtube.com/embed/rJOx5dJdHJU?feature=player_embedded" style="background-color: transparent;" width="640"></iframe><br />
<br />
<b>ダウンロード</b><br />
<b>Google Chrome用</b><br />
<a href="https://chrome.google.com/webstore/detail/pcfedgjdgkacloiabdlghochjfmnalck?hl=ja">https://chrome.google.com/webstore/detail/pcfedgjdgkacloiabdlghochjfmnalck?hl=ja</a><br />
<br />
<b>Firefox用</b> <br />
<i style="background-color: transparent;">自動アップデート対応のため、一時的に非公開</i><br />
<br />
<b>Safari用</b><br />
<a href="http://dl.dropbox.com/u/227786/app/safari/CacooFinder/CacooFinder.safariextz">http://dl.dropbox.com/u/227786/app/safari/CacooFinder/CacooFinder.safariextz</a> <br />
<br />
<b>使用方法</b><br />
<ol><li>利用しているブラウザ用のファイルを上記URLからダウンロード/インストールします。<br />
</li>
<li>ブラウザにCacoo Finderのボタンが追加されているので、それをクリックします。<br />
</li>
<li>初回実行時には、CacooのAPIキー入力フォームが表示されるので、APIキーボタンをクリックして、CacooのAPIキーを生成/コピーします。<br />
</li>
<li>Cacoo FinderにCacooのAPIキーを設定すると、あなたの作成した図、または他のユーザーから共有されている図の一覧が表示されます。<br />
</li>
<li>図の一覧からは、素早く図を開く、各図のシートやコメントを確認する、コメントを書き込むなどの操作が可能です。<br />
</li>
</ol>※ CacooのAPIキーを再作成した場合は、Cacoo FinderでAPIキーの再設定を行う必要があります。 <br />
<br />
<b>ソースコード - GitHub</b><br />
<a href="https://github.com/shoito/cacoo-finder-chrome-extension">https://github.com/shoito/cacoo-finder-chrome-extension</a><br />
<div class="projects"><div data-repo="shoito/cacoo-finder-chrome-extension"></div></div><div style="clear:both;"></div><br />
<b>※2013/01/23追記</b><br />
ソースコードを公開していなかったことに気付いたので、CoffeeScript(JavaScript), LESS(CSS), Knockout.js(MVVM), Yeoman(Grunt)を利用して再構築し、GitHubに公開しました。<br />
<a href="http://blog.air-life.net/2013/01/cacoo-findercoffeescript-less-knockout.html">http://blog.air-life.net/2013/01/cacoo-findercoffeescript-less-knockout.html</a><br />
<br />
<b>フィードバック</b><br />
感想、要望、不具合などありましたら <a href="http://twitter.com/shoito">@shoito</a> へツイートいただけると嬉しいです。shoitohttp://www.blogger.com/profile/01404360965246662555noreply@blogger.com0tag:blogger.com,1999:blog-5113336979627179162.post-82500352516493297602011-06-12T21:27:00.012+09:002011-06-12T21:39:07.745+09:00私の福井県立図書館の利用法私は最寄り図書館の福井県立図書館に、隔週〜月イチくらいのペースで通っています。<br />
貸し出し期間が2週間なので、隔週で行くことが多いですね。<br />
<br />
<iframe width="300" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.jp/maps?ie=UTF8&q=%E7%A6%8F%E4%BA%95%E7%9C%8C%E7%AB%8B%E5%9B%B3%E6%9B%B8%E9%A4%A8&fb=1&gl=jp&hq=%E7%A6%8F%E4%BA%95%E7%9C%8C%E7%AB%8B%E5%9B%B3%E6%9B%B8%E9%A4%A8&hnear=0x5ff8bc2607d76567:0x54f3456c02784cd7,%E7%A6%8F%E4%BA%95%E7%9C%8C%E7%A6%8F%E4%BA%95%E5%B8%82%E5%92%8C%E7%94%B0%E6%9D%B1&cid=0,0,4622353241720687514&brcurrent=3,0x5ff8bc118219fac7:0xc43063159b39857d,0&ll=36.037058,136.242228&spn=0.005205,0.006437&z=16&iwloc=A&output=embed"></iframe><br />
<small><a href="http://maps.google.co.jp/maps?ie=UTF8&q=%E7%A6%8F%E4%BA%95%E7%9C%8C%E7%AB%8B%E5%9B%B3%E6%9B%B8%E9%A4%A8&fb=1&gl=jp&hq=%E7%A6%8F%E4%BA%95%E7%9C%8C%E7%AB%8B%E5%9B%B3%E6%9B%B8%E9%A4%A8&hnear=0x5ff8bc2607d76567:0x54f3456c02784cd7,%E7%A6%8F%E4%BA%95%E7%9C%8C%E7%A6%8F%E4%BA%95%E5%B8%82%E5%92%8C%E7%94%B0%E6%9D%B1&cid=0,0,4622353241720687514&brcurrent=3,0x5ff8bc118219fac7:0xc43063159b39857d,0&ll=36.037058,136.242228&spn=0.005205,0.006437&z=16&iwloc=A&source=embed" style="color:#0000FF;text-align:left">大きな地図で見る</a></small><br />
<br />
福井県立図書館に限らず、図書館には多くの本があり目的の本を見つけるのも一苦労ですし、いちいち図書館の検索システムで探すのも面倒だなと思ってました。<br />
<br />
そんな中、Amazonのページから最寄りの図書館の蔵書を”自動で”検索できる便利なブラウザ拡張<a href="http://libron.net/">Libron</a>の登場は、これぞ待ち望んでいたものでした。<br />
<a href="http://libron.net/">Libron</a>はChrome/Firefox/Safariに対応しているので、多くのユーザー環境で利用できます。<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgilQlN7nXeVOyUonhJ3-53hLawypN0nSwiwZgAyvEz4DkJAbxB_g5NYuxKmKX9PZXyea0Yr7eZIqm0I67TANZfXzSpoSo4RNAXzfBwRQfF9__aYV67Z8b44rzesYMFUtKWYI0PQ543oEo/s1600/libron.png" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="168" width="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgilQlN7nXeVOyUonhJ3-53hLawypN0nSwiwZgAyvEz4DkJAbxB_g5NYuxKmKX9PZXyea0Yr7eZIqm0I67TANZfXzSpoSo4RNAXzfBwRQfF9__aYV67Z8b44rzesYMFUtKWYI0PQ543oEo/s320/libron.png" /></a></div><br />
私の場合は、Chrome版の<a href="https://chrome.google.com/webstore/detail/fpfgglfemmnflnmjminpghmeiajcajoi">Libron</a>と、Userscript(実質1行)を合わせて利用しています。<br />
<br />
<b>Chrome拡張 <a href="https://chrome.google.com/webstore/detail/fpfgglfemmnflnmjminpghmeiajcajoi">Libron</a><br />
</b><a href="https://chrome.google.com/webstore/detail/fpfgglfemmnflnmjminpghmeiajcajoi">https://chrome.google.com/webstore/detail/fpfgglfemmnflnmjminpghmeiajcajoi</a><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKTzQyF7vyHejECi_hHMito5CXPwB2W0v-3SI-ONvIdOQbSSBiEPf3UQu93XyZR7jMI8J3QuLW_MMrkN0cV6sMzjeCzhuE_jZG7wYIMPOOHGgS5JiC_7RxJcmQkzGTKLVYBXPcFFihD-w/s1600/chromewebstore.png" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="126" width="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKTzQyF7vyHejECi_hHMito5CXPwB2W0v-3SI-ONvIdOQbSSBiEPf3UQu93XyZR7jMI8J3QuLW_MMrkN0cV6sMzjeCzhuE_jZG7wYIMPOOHGgS5JiC_7RxJcmQkzGTKLVYBXPcFFihD-w/s320/chromewebstore.png" /></a></div><br />
<b>Userscript</b><br />
<code><br />
// ==UserScript==<br />
// @name 福井県立図書館予約システム利用支援スクリプト<br />
// @namespace http://labs.shoito.me/userscripts/<br />
// @description 福井県立図書館予約システムで、資料を受け取る館に「県図書」を設定<br />
// @include https://www.library.pref.fukui.jp/cgi-bin/Sfkisyoc.sh<br />
// ==/UserScript==<br />
(function(){<br />
document.getElementsByName('yukn')[0].value='01';<br />
})();<br />
</code><br />
<br />
このUserscriptが何をしているかというと、@descriptionにも書いているように、資料を受け取る館に「県図書」を設定しているだけです。<br />
県立図書館のシステムで、この項目は「未選択」になっていて、いちいちマウスで「県図書」を選択しないと進めないので、私にとっては無意味な操作を繰り返さないといけなかったんです。<br />
ドロップダウンメニューのこの操作を省略したおかげで、図書館予約システムのボタンのクリック操作だけで済むようになってます。<br />
<br />
0. Amazonで気になる本を都度、欲しいものリストに追加しておく<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcMRfB02XGv8h5c0RJ19dyeDnftbnX3rWs_kKU55FgYEagdXUBDtKL5z-RDo9-O_by9g8fOcEPLFKu9pYDkiQtF5CeE6Wifx4ayzbHe9L1A6C8RUyIGzE1lffIIaaLPepxbJfKdkXIOIM/s1600/0.png" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="114" width="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcMRfB02XGv8h5c0RJ19dyeDnftbnX3rWs_kKU55FgYEagdXUBDtKL5z-RDo9-O_by9g8fOcEPLFKu9pYDkiQtF5CeE6Wifx4ayzbHe9L1A6C8RUyIGzE1lffIIaaLPepxbJfKdkXIOIM/s320/0.png" /></a></div><br />
1. Amazonの欲しいものリストページを開く<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZnZ3j11upjZeQm37U1fnWbJLDbYbY0L5PzHIgg0J6DEOuufOj5bVsoR2fZss673NEEZmV0bJw0FG2ETv_dUla54vEk9anb3AbPm-PjnKseYAf4TbTVJtM3vgdAmnAaWW0RQ9e-jdJVpM/s1600/1.png" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="222" width="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZnZ3j11upjZeQm37U1fnWbJLDbYbY0L5PzHIgg0J6DEOuufOj5bVsoR2fZss673NEEZmV0bJw0FG2ETv_dUla54vEk9anb3AbPm-PjnKseYAf4TbTVJtM3vgdAmnAaWW0RQ9e-jdJVpM/s320/1.png" /></a></div><br />
2. 目当ての本の「福井県立図書館で予約する」を選択する<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZvPzDYYPDecoHYF0KrG4E7O_hzwRowSvbKQlmx684HaLtmChExPvHdk66uHtxlIBO0uoA4E7RN0XnqnBf-FLotSOuL_KQ2W_Z2dGC0sOJKVmUy9vKEPFKclFCCs7Z5B2un5HjPj9meZk/s1600/2.png" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="156" width="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZvPzDYYPDecoHYF0KrG4E7O_hzwRowSvbKQlmx684HaLtmChExPvHdk66uHtxlIBO0uoA4E7RN0XnqnBf-FLotSOuL_KQ2W_Z2dGC0sOJKVmUy9vKEPFKclFCCs7Z5B2un5HjPj9meZk/s320/2.png" /></a></div><br />
3. 予約ボタンを選択する (ここから福井県立図書館の予約システム)<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyLU62S1lyHfbZRPa4qAHU2kOzGABCCiE577zm62aarW7dxrmOQ2m15wU2vFdpN2Vy0UwoEjhGvQm57b-pdLFFwRWwoE6UZg-tfx4d6fJ5F9bnZ0aSjXsJP6BA0Pvl-oQwBHjMOI8YLLI/s1600/3.png" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="237" width="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyLU62S1lyHfbZRPa4qAHU2kOzGABCCiE577zm62aarW7dxrmOQ2m15wU2vFdpN2Vy0UwoEjhGvQm57b-pdLFFwRWwoE6UZg-tfx4d6fJ5F9bnZ0aSjXsJP6BA0Pvl-oQwBHjMOI8YLLI/s320/3.png" /></a></div><br />
4. 利用カードの番号、パスワードの入力をする (ブラウザに記憶してあるので自動入力 - なんで毎回入力せにゃいかんのやろ)<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkHvszLyJsqzKm3T1PKuhD7hrr3gK2OeIOKP2Qv2t3VSfOW3RnGEqCZaScqzKGl79a2P097rum1B3BX_yWO1DrHn9ECPSQL41jAzmCcrBXNTlzMEZA_ME9VomYGUNB6LVDt6imd_rMRjc/s1600/4.png" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="150" width="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkHvszLyJsqzKm3T1PKuhD7hrr3gK2OeIOKP2Qv2t3VSfOW3RnGEqCZaScqzKGl79a2P097rum1B3BX_yWO1DrHn9ECPSQL41jAzmCcrBXNTlzMEZA_ME9VomYGUNB6LVDt6imd_rMRjc/s320/4.png" /></a></div><br />
5. 資料を受け取る館を選択して、予約ボタンを選択する (Userscriptが自動設定)<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI325lOm8pBp0tyAxMGmwdhGDEE33dEvh6GtSvHbgD46bh64s5WBJBXMMk3WtEIM8Ksnrec2LCnbCz3RhwQ5ujYwObAY87cCAZmTw7j6-3V79gzD_flWDK2MMU2WWp-VVoDl-qoxfeyjw/s1600/5.png" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="138" width="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI325lOm8pBp0tyAxMGmwdhGDEE33dEvh6GtSvHbgD46bh64s5WBJBXMMk3WtEIM8Ksnrec2LCnbCz3RhwQ5ujYwObAY87cCAZmTw7j6-3V79gzD_flWDK2MMU2WWp-VVoDl-qoxfeyjw/s320/5.png" /></a></div><br />
6. 2〜5を読みたい本の分だけ繰り返す<br />
<br />
以前はAmazonの欲しいものリストから本当に読みたいものだけを、図書館の検索システムで検索して予約していた<br />
んですが、Libronのおかげで簡単に図書館に本があることの確認もできるし、予約もできるようになりました。<br />
おかげで、今は図書館のカウンターへ行って予約した本を受け取るだけと楽になってます。<br />
<br />
Thanks Libron!shoitohttp://www.blogger.com/profile/01404360965246662555noreply@blogger.com0tag:blogger.com,1999:blog-5113336979627179162.post-10923639550179192372011-06-05T00:15:00.004+09:002011-06-09T10:17:08.234+09:00UPGRADE JAPAN!!で話してきた | HTML5時代の技術の恩恵を受けるには<div style="width:425px" id="__ss_8206966"><strong style="display:block;margin:12px 0 4px"><a href="http://www.slideshare.net/shoito/html5-8206966" title="HTML5時代の技術の恩恵を受けるには">HTML5時代の技術の恩恵を受けるには</a></strong> <iframe src="http://www.slideshare.net/slideshow/embed_code/8206966" width="425" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> <div style="padding:5px 0 12px">View more <a href="http://www.slideshare.net/">presentations</a> from <a href="http://www.slideshare.net/shoito">Sho Ito</a> </div></div>HTML5時代の技術、その恩恵を受けるにはどうすれば良いのか15分という短い時間ですが紹介させていただきました。<br />
難しい内容もあったかもしれませんが、聞いてくださった皆さんが少しでもHTML5に興味を持って、調べたり、実際に使うきっかけになると嬉しいです。<br />
<br />
HTML5やCSS3など、新しい技術を使おうにもInternet Explorer 6, 7, 8などの非モダンブラウザのことを考えると使用するのを躊躇してしまう現場もあると思います。<br />
そんな現場でもHTML5やCSS3の利用を支援してくれるライブラリ群(Polyfill)をいくつか紹介しました。<br />
<br />
<br />
※6/8(水)追記: セッションの内容を補完してくれる記事が本日公開されていました。<br />
<blockquote>HTML5&CSS3入門 with HTML5 パック 第6回 Graceful DegradationとPolyfill<br />
by 小山田 晃浩さん<br />
<a href="http://www.adobe.com/jp/joc/devnet/dreamweaver/articles/html5pack_css3_part6.html">http://www.adobe.com/jp/joc/devnet/dreamweaver/articles/html5pack_css3_part6.html</a></blockquote><br />
※6/9(木)追記: セッション中に省略したGraceful Degradation, Regressive Enhancement, Progressive Enhancementについての参考にどうぞ。<br />
<blockquote>第16回HTML5とか勉強会 Progressive Enhancement<br />
by 羽田野 太巳さん<br />
<a href="http://www.html5.jp/blog/?p=503">http://www.html5.jp/blog/?p=503</a></blockquote>shoitohttp://www.blogger.com/profile/01404360965246662555noreply@blogger.com0tag:blogger.com,1999:blog-5113336979627179162.post-80532109710159572252011-03-20T21:08:00.008+09:002011-03-20T21:11:00.851+09:00データ復旧のためのHDD取り扱いについて石巻市で津波の被害にあった関係者から「サーバーが海水に浸かってしまったのだが何とかHDDからデータを復旧したい。可能性があるのならどうしたら良いか。」という相談を受けるという機会があったので、少しだけ情報を共有しておく。<br />
<br />
相談者の利用しているサーバーはDell(デル株式会社)の物だったため、Dellにデータ復旧の件で電話したところ、Dellではそのようなサービスは行っておらず、株式会社ワイ・イー・データのオントラックというサービスを紹介された。<br />
<br />
データ復旧/復元サービス オントラック(株式会社ワイ・イー・データー)<br />
http://www.ontrack-japan.com/<br />
<br />
電話にてHDDドライブが海水に浸かってしまっている、泥がドライブ内部に混入している可能性もあることを伝え、対応方法を伺った。<br />
すると同様の問題に遭遇した人たちに向けて「水没ドライブ取り扱い」という案内を掲載してくれていたので紹介する。<br />
詳細はリンク先を参照していただきたい。<br />
<br />
<b>水没ドライブ取り扱い</b><br />
<a href="http://knowledge.ontrack-japan.com/guide/flood_drives.html">http://knowledge.ontrack-japan.com/guide/flood_drives.html</a><br />
<blockquote>近年発生した水害からの教訓より、洪水等で水没してしまったハードディスク・ドライブ(HDD、HD)等の媒体(メディア)からデータを復旧するにあたっての注意点をお知らせいたします。下記の注意点を守って頂く事でデータ復旧できる可能性が上がります。<br />
<b>一般的な注意点</b><br />
....<br />
<b>ハードディスク(HDD、HD)をお送りになるときの注意点</b><br />
....</blockquote><br />
現在、仙台市でデータ復旧サービスを提供している株式会社データサルベージコーポレーションが「仙台営業所への持込に限定」「データ容量が1GB以下」「障害のレベルが軽度、中度に分類されるもの」のように<b>かなり厳しい<a href="http://goo.gl/W09yH">条件</a></b>ではあるが3/25日まで無償で復旧してくれるらしい。<br />
被災地では、運送業者がまだ機能しておらず、自分で持って行くしか手段がない状態であるため、このように現地の営業所で受け付けてくれることは重要だと思う。<br />
<br />
<b>被災して読めなくなったHDDを無償で即日復旧、病院や学校のデータを優先</b><br />
<a href="http://itpro.nikkeibp.co.jp/article/NEWS/20110315/358368/">http://itpro.nikkeibp.co.jp/article/NEWS/20110315/358368/</a><br />
<br />
是非、被災地の法人/個人のためデータ復旧サービスを提供する企業には、費用の値引きを検討していただきたい。<br />
サーバーやPCはまだ買い替えれば済むが、データの価値はそれら以上に遥かに高いものなので。<br />
<span class="fullpost"></span>shoitohttp://www.blogger.com/profile/01404360965246662555noreply@blogger.com0tag:blogger.com,1999:blog-5113336979627179162.post-65881219797220363692011-03-01T00:18:00.015+09:002011-03-04T12:14:48.766+09:00福井でみんなで集まってサービス/ソフトウェアを作ってみませんか?[3/5, 3/12]<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHjeeIOs3HB5ph2dq35U0rxog3K1aTBx-9iIsE1Lz3C-W20KTkoCRTawPhf0PKBBa1PL-Lo1c3UyJhBuqey6ItLcGtTo5Np7gR4lwiQEwxaeXoMHCznPwAme5wL61Mg3gqE67FEeBMgpk/s1600/gaehackathon.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="159" width="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHjeeIOs3HB5ph2dq35U0rxog3K1aTBx-9iIsE1Lz3C-W20KTkoCRTawPhf0PKBBa1PL-Lo1c3UyJhBuqey6ItLcGtTo5Np7gR4lwiQEwxaeXoMHCznPwAme5wL61Mg3gqE67FEeBMgpk/s400/gaehackathon.jpg" /></a></div>2011年3月5日(土), 3月12(土)に<b>第2回Google Hackathon for GAE in 福井</b>が開催されます。なんで第2回かというと、2010年は2月にGoogle App Engine、4月にChrome拡張をテーマにGoogle Hackathonが行われており、無料で使えるクラウドプラットフォーム Google App Engine(GAE)をテーマにするのが2回目だからです。<br />
<br />
今回は3月12日のHackathon当日に、京都GTUG(Google Technology User Group)から<b>Google API Expertの山下さん</b>、<b>GoogleからGoogle App Engineを担当されている松尾さん</b>に来ていただきます。GAE/Python、GAE/Javaの先生がいるのでここぞとばかりに疑問をぶつけるチャンスかと思います。<br />
<br />
現在の申込者の統計(だいたい)としては、下記のようなデータとなっています。<br />
<b>GAE初心者:90%<br />
デザイナー:20%<br />
女性:10%</b><br />
<br />
「Hackathon?レベルの高い人たちの集まりかな?そんなの怖いわー。ついてけないよ。」という心配はありません。事前勉強会やIdeathonからHackathonまでの準備期間が十分にありますので <b>学生や初心者の方も安心</b>してご参加いただいております。 <br />
<br />
また、バックエンドはGoogle App Engine + 各種Webサービス、フロントエンドはPC/Mac、iPhone/Android/ガラケーというように組み合わせはいろいろ考えられますので、フロントエンドのデザイン/開発をしたい方の参加も強く願っています。<br />
是非、JavaScript , Objective-C , HTML5 , CSS3 など持っている知識を存分に活かしてください。 <br />
<br />
====== イベント案内 ======<br />
■名称<br />
第2回Google Hackathon for GAE in 福井<br />
■申し込み<br />
こちらのフォームからお申込みをお願いします。<br />
<a href="http://goo.gl/UMfRE"><b>http://goo.gl/UMfRE</b></a><br />
■日程<br />
2011年3月5日(土) 事前勉強会, Ideathon<br />
12日(土) Hackathon<br />
<br />
※Hackathonのみの参加は原則出来ません。Ideathonにもご参加下さい。<br />
難しいなという方はコチラへご相談ください -> gh.fukui at gmail.com<br />
■スケジュール<br />
3月5日(土)<br />
12:30 ~ 開場<br />
13:00 ~ 15:00 事前勉強会(<b>こちらは必須ではありません</b>)<br />
GAE/Java編 @shoito<br />
GAE/Python編 @rch850 <br />
15:00 ~ 18:00 Ideathon(<b>ここからの参加でOKです</b>)<br />
18:30 ~ 懇親会(ビアバッシュ)<br />
<br />
3月12日(土)<br />
09:30 ~ 開場<br />
10:00 ~ 18:00 Hackathon<br />
18:30 ~ 懇親会<br />
■会場<br />
めがね会館7階 株式会社jig.jp様 会議室<br />
・地図: → <a href="http://goo.gl/2rXe">http://goo.gl/2rXe</a><br />
・アクセス:JR鯖江駅から徒歩15分、鯖江ICから車で5分<br />
■定員<br />
最大30名(事前にお申し込みが必要です)<br />
■対象者<br />
プログラマー、デザイナー、Hackathonに興味がある方 (<b>入門者や学生の方も大歓迎</b>)<br />
■参加費<br />
一般1,000円、学生は無料<br />
※参加費は備品の準備、遠方よりご参加いただくスタッフへの交通費に割当てさせていただきます。<br />
■その他<br />
twitter公式タグは <a href="http://twitter.com/#!/search/%23ghfukui"><b>#ghfukui</b></a> です。<br />
<span class="fullpost"></span>shoitohttp://www.blogger.com/profile/01404360965246662555noreply@blogger.com0tag:blogger.com,1999:blog-5113336979627179162.post-49285633421775751362011-01-26T20:47:00.032+09:002011-01-26T21:00:43.499+09:00AWS Elastic Beanstalkを求めて、JAWS-UGの勉強会に行ってきた既に、ギークなご家庭では「新しいPC買ってよ。」でなく「今月はインスタンス3つまでよ。」とか、「あなた!今月インスタンス立ち上げ過ぎじゃない?MapReduceでいかがわしい画像をごにょごにょしてたんでしょ!」などという会話が交わされている思います。<br />
<br />
そんな、オフィスでも家庭でもクラウドは切っても切れない時代ですので「Japan AWS User Group (JAWS-UG) - Hokuriku(金沢)勉強会 第0回」に参加してきました。<br />
<a href="http://atnd.org/events/11854">http://atnd.org/events/11854</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://aws.amazon.com/jp/" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="79" width="189" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1P1URISphHHVLzMALCjzSkMZtdbFKiJoEspoTxnLGF7qyAGHkbZVMAu1LLRLpe2gZKWc5sch_HgvLRk32aeZWrEOwjxoVfhobrtBJxmmtkKV_aLaBt-LOpl-OgWbxgvIw5IU8L2eDKm8/s400/aws.png" /></a></div><br />
JAWS-UGはAWS(Amazon Web Services)の利用促進、情報共有のためのユーザーグループで、全国各地でイベントを開催しています。<br />
今回はAWSエバンジェリストの玉川憲さん(<a href="http://twitter.com/#!/kentamagawa">@KenTamagawa</a>)がいらっしゃるということと、先週、AWS Elastic Beanstalk(以降、Beanstalkと表記)という興味深いサービスが発表されたので、それを目的に参加しました。<br />
<br />
AWSの多くの情報を共有していただいのですが全部は書ききれないので、今回はBeanstalkについて共有します。<br />
これまでAmazonが提供していたEC2, S3のようなサービスはIaaSというタイプに分類(どこかの誰かが勝手に?)されていましたが、BeanstalkはPaaSに分類されるであろうサービスだと思います。<br />
<br />
Beanstalkを使用すると、私たちはJavaで開発したアーカイブ(warファイル)をアップロードするだけで良く、あとのEC2インスタンス、Elastic Load Balancing、Auto Scalingの作成/設定はAWS側で自動的に行われます。<br />
この辺のインフラ周りの作成/設定が面倒だったのですが、Beanstalkのおかげで解放されそうです。<br />
(SimpleDBやRDSまではその範疇でないので、完全に解放されるわけではなさそうですが)<br />
<br />
まだ試してないですが、Google App Engineのような運用の手軽さ、AWSの自由度が合わさった魅力的なサービスな気がしています。<br />
ちなみに、現在はJavaだけに対応しているのですが、今後、Rubyなど他の言語にも対応していくそうです。<br />
<br />
それと昨夜のイベント中、Amazon Simple Email Service(SES)という大量メール送信ができるサービスが発表されました。<br />
AWSのサービスブロックが着々と揃ってきた感じがしますね。<br />
<a href="http://aws.amazon.com/ses/">http://aws.amazon.com/ses/</a><br />
<br />
AWSには無料枠が設けられていますので、もしまだ使ったことがないという方は試してみてはどうでしょう?<br />
百聞は一見に如かずと言いますし。<br />
<a href="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">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</a><br />
<br />
※JAWS-UG: Japan Amazon Web Services User Group (ジョーズ・ユージー)<br />
<a href="http://jaws-ug.jp/">http://jaws-ug.jp/</a><br />
<br />
※AWS: Amazon Web Services(下記のサービス群)<br />
<a href="http://aws.amazon.com/jp/">http://aws.amazon.com/jp/</a><br />
<br />
※AWS Elastic Beanstalk<br />
<a href="http://aws.typepad.com/aws_japan/2011/01/introducing-amazon-beanstalk.html">http://aws.typepad.com/aws_japan/2011/01/introducing-amazon-beanstalk.html</a><br />
<span class="fullpost"></span>shoitohttp://www.blogger.com/profile/01404360965246662555noreply@blogger.com0