AIRLife.net

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

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

Microjs CodeReading Bookmarkletとは

http://microjs.com にリストされているJavaScriptライブラリのソースコードリーディングを支援するブックマークレットです。Read/Unread状況、Readサイズ/合計コードサイズを把握できるので、ソースコードリーディングでちょっとした達成感を味わえます。ブックマークレットは http://let.hatelabo.jp/ を利用して公開しています。

Microjsとは
Microjsは、数百バイト〜数キロバイトの小さなJavaScriptフレームワークやライブラリを集めて紹介しているサイトです。2012/01/09時点で154個、合計206.7kBのライブラリがリストされています。小さいものに限定されているので、短時間で読めるものがほとんどです。Backbone.js, Zepto, yepnope, Modernizrなど、JavaScript, CSS3, HTML5に興味のある方は一度は見聞きしたことがあるものが並んでると思います。

インストール方法
Hatena::Letのブックマークレット公開ページからブックマークレットをブックマークに追加します。
http://let.hatelabo.jp/shoito/let/gYC-xZiazbHnRw

使用方法

1. http://microjs.com にアクセスします。

2. ブックマークをクリックし、ブックマークレットを実行します。

実行すると下図のように、どのライブラリがRead/Unreadなのか、どの程度のコードを読んだのかが表示されます。

注意
ソースコードリーディングの履歴はWeb Storageを利用してブラウザに保存していますので、別ブラウザ/別マシンを使用した際に履歴は引き継がれません。

ソースコード
https://github.com/shoito/bookmarklet/tree/master/microjs

フィードバック

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

FreeMind Import for astah - astahプラグイン

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

背景

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

FreeMind Import for astahとは

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

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

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

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

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

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

FreeMindとは

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

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

FreeMind - Wikipediaより引用

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

freemind-import-for-astah

プラグイン開発について
astahプラグイン開発チュートリアルとSDKが公開されているので、それをベースに開発しています。
http://astah.change-vision.com/ja/plugin-tutorial/

FreeMindファイル(.mm)
拡張子.mmのXMLファイルであり、XML Schemaが公開されています。
これをJAXBバインディングコンパイラ(xjc)にかけてJavaのモデルクラスを作っています。

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

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

フィードバック

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

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

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

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

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

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

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

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

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

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

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

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

任意の JavaScript 関数を呼び出す

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

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

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

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

ActionScript 関数を呼び出す

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

JavaScript 関数に値を戻す

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

関連記事

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

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

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

JIRA 5.0、REST APIとREST API Browser

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

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

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

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

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

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

Atlassian Plugin Exchange

JIRAプラグイン

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

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

JIRA連携ツール

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

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

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

REST APIを試す準備

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

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

$ brew install atlassian-plugin-sdk

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

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

Atlassian Developers

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

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

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

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

$atlas-create-jira-plugin

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

Create a plugin for?

1) Shiny new JIRA 5

2) Regular 'ol JIRA 4 (or earlier)

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

Define value for groupId: : com.github.astah

Define value for artifactId: : jira-connector

Define value for version: 1.0-SNAPSHOT: :

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

Confirm properties configuration:

groupId: com.github.astah

artifactId: jira-connector

version: 1.0-SNAPSHOT

package: com.github.astah.connector.jira

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

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

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

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

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

$ atlas-run

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

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

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

REST API

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

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

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

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

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

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

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

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

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

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

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

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

REST API Browser(RAB)

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

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

REST API Browser

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

注意

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

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

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

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

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

Backlog Connector for astah - astahプラグイン

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

背景

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

Backlog Connector for astahとは

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

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

プロジェクトページ

backlog-connector-for-astah

インストール

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

※astahバージョン6.5以上のインストール
この辺から各OS用のインストーラーをダウンロードして、実行します。
http://astah.change-vision.com/ja/product/astah-community.html

アンインストール

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

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

フィードバック

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

astah Viewer Gadget - OpenSocial Gadget

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

背景

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

astah Viewer Gadgetとは

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

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

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

インストール

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

Gadget URL

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

使用方法

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

フィードバック

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

Cacoo Finder - ブラウザ拡張

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

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

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

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

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

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

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

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

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

使用方法

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

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

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

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

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

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

大きな地図で見る

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

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

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

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

Userscript



// ==UserScript==

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

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

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

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

// ==/UserScript==

(function(){

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

})();

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

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

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

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

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

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

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

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

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

Thanks Libron!

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

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

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

View more presentations from Sho Ito

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML5時代のWeb技術について勉強会をやります - 福井

2010-11-23T16:43:00.007+09:00

11/27(土) HTML5などなど次世代Web勉強会 in 福井

HTML5やCSS3、SVG、関連APIなどをテーマに「講演」や「自作サービス/アプリのデモ＆裏側を解説」というスタイルの勉強会を開催します。

Mozilla Japanのdynamis(@dynamitter)さんにFirefox4と次世代Web技術についてのお話、Firefox for Androidのデモをしていただけることになりました。
Firefox, ThunderbirdなどMozillaのソフトウェアにお世話になっている皆さん、日頃の感謝、要望などを直接お伝えできるチャンスです。

イベントのターゲットは初心者、開発者、デザイナー問わずになっておりますのでお気軽にご参加ください。
クリエイターに直接質問できる良い機会になると思います。

イベント受付ページ
http://kokucheese.com/event/index/5492/

日時： 2010年11月27日 13:30 - 17:30
定員： 30名
会場： 福井県鯖江市新横江2-3-4 めがね会館7F 株式会社jig.jp 会議室
最寄り駅： JR鯖江駅

[開催プログラム]
* 13:00 - 13:30 開場、準備
* 13:30 - 13:35 オープニング
* 13:40 - 14:30 Firefox4で見るHTML5時代のWeb技術 by Mozilla Japan @dynamitter
* 14:30 - 15:30 W3C総会レポート＆使おうSVG by @rch850
-- 休憩10分 --
* 15:30 - 17:20 サービス/アプリのデモ＆解説

デザイナーがつくるHTML5アプリ（仮） by @shirokuro331
利用技術: Canvas

Canvasでアニメーションしてみたよ（仮） by @taiju
利用技術: Canvas

twistmap(仮) by @mirutover
利用技術: WebSocket(socket.io), node.js

クイズアプリ(仮) by @tkmsm
利用技術: WebSocket, Scala

HTML5で始めるお気楽プログラミング(仮) by @aroma_black
利用技術: Web Storage, Offline Web Applications, CSS3, (Flask@Python), Widgets

Firefox for Android by Mozilla Japan dynamis(@dynamitter)

* 17:20 - 17:30 クロージング
* 18:00 - 20:00 懇親会 (秋吉鯖江店)

11/13-15にWeb Directions East 2010開催!

2010-10-22T23:45:00.002+09:00

Web Directions Eastというイベントをご存知でしょうか？
http://east.webdirections.org/2010/

jQueryの開発者John ResigやIntroducing HTML5の著者Bruce Lawsonなど、世界トップレベルの人間が集まりカンファレンスやワークショップが行われます。
毎年開催されているのですが、私は中々都合(日程や費用的に)がつかずに参加できておりません。
カンファレンスのタイムテーブルを見るとHTML5, CSS3, SVG, モバイルアプリ開発, クロスブラウザなど、惹かれるテーマでいっぱいです。

そんなことを考えていたところ、運営の方から以下のご案内を頂きました。
うまいこと誘惑してきますねw
あぁ、ホント行きたいなぁ。

＞＞『WDE 2010は、オバマ大統領を当選させた舞台裏に迫ります！』

オバマ大統領を当選させたデザイナーであるスコット・トーマス氏が来日し、
"Designing Obama"として印象的な青のカラーの選択、フォントの変更など、
デザインの本当の重要性や方法論・思考法ご紹介いただいます。

現在、大統領の活動でいろんな情報が飛び交っていますが、オバマ氏の
当選にまつわるWebデザインの活用においては多大なる貢献をしています。
オバマ氏当選の裏側を覗いてみてはいかがでしょうか？

＞＞『「電子書籍」「スマートフォン」「HTML5」もご紹介！』

今年のバズワードとしても注目されている「電子書籍」「スマートフォン」
「HTML５」はWDE２０１０でもご紹介いたします。

特に、電子書籍元年と言われる今年はいろいろなところで電子書籍の規格が生まれ、
情報が溢れ出回っていますが、世界標準規格であるePubについてW3Cからご紹介いただきます。

スマートフォンやHTML５については、日本では知られていない技術はもちろん
技術への取り組み・思考を伝授していただきます。世界トップから学ぶこの３日間は
技術者にとって特別な時間になる事でしょう。

【日　　程】：11月13～15日
【会　　場】：野村コンファレンスプラザ日本橋
【参加料金】：49,000円（カンファレンス／ワークショップ一律、税別）
【URL】： http://east.webdirections.org/2010/

その他、スピーカー情報。

▼　ジョナサン・スターク (Jonathan Stark)
http://east.webdirections.org/blog/2010/10/12/jonathan_stark/

▼　ブルース・ローソン：（Bruce Lawson）
http://east.webdirections.org/blog/2010/09/28/bruce-lawson/

▼　ステファニー・サリバン・ルイス：(Stephanie (Sullivan) Rewis)
http://east.webdirections.org/blog/2010/10/05/stephanie_sullivan/

[10/16] 次世代ブラウザと次世代Web技術 - Mozilla勉強会＠名古屋へ行くよ

2010-10-10T15:09:00.003+09:00

今週末、10/16(土)に名古屋で開催されるMozilla勉強会へ行きます。
Firefox 4でサポートされる機能の解説/デモ、モバイル版Firefox(Fennec)について開発側の裏話が聴けるようなので楽しみにしています。。

私も1枠頂いているので、HTML5や関連API、最近の動向、おまけにFlashとHTML5関連APIの連携についてお話しますよ。
名古屋近辺の方で都合の良い方、是非会場でお会いしましょう。

Mozilla 勉強会@名古屋

日時: 2010年10月16日(土) 15:00〜18:00
テーマ: 次世代ブラウザと次世代 Web 技術
会場: AP名古屋.名駅 J ルーム
定員: 20名
参加費: 無料
懇親会費: 2000円 (懇親会に参加される方のみ)
Twitter ハッシュタグ #modest

今回は「次世代ブラウザと次世代 Web 技術」というテーマで、最新のブラウザや HTML5, CSS3 などを始めとした Web 標準技術についての勉強会を開催します。
ご参加いただける方は ATND にてご登録ください。

スケジュール

14:30 – 15:00: 開場、準備
15:00 – 15:10: Opening
15:10 – 15:50: Attractive HTML5 〜開発者の視点から〜
15:50 – 16:30: Firefox 4 と次世代 Web 技術
—– 休憩 10 分間 —–
16:40 – 17:20: Firefox for Android Internals
17:25 – 17:50: Lightning Talk (募集中)
17:50 – 18:00: フリーディスカッション
—– 撤収、移動 30分 —–
18:30〜20:30: 懇親会

[9/11] Flex meets Progression - Flex勉強会第121回＠福井

2010-09-10T12:41:00.000+09:00

Flex勉強会全国ツアーも終了し、一段落したところでFlex勉強会を福井で開催します。
今回はFlexだけではなく、FlashフレームワークであるProgressionも扱う形になります。

私は「Flex meets HTML5 Family」と題して、Flex/FlashとHTML5関連APIの連携について話をさせていただきます。
気軽にご参加ください。

セッション
・Flex meets MovableType by @morishita_surf
・Flex meets Designer by @haruiruka
・Flex meets HTML5 Family by @shoito
・ないしょ: by @itsuki_kosen
・Progressionのススメ　～みんなで手軽にFlash始めちゃおっ。～ by @shirokuro331

-----
目的：北陸をもっともっと盛り上げていきましょう！
対象者：デベロッパー＆デザイナー
　　　Flex/AIR, Progression, ActionScirpt初心者
定員：20名程度

日時：09月11日(土) 14:30～
　　　　　　受付：14:00～
場所：(株)サーフボード 1階会議室
住所：〒910-0842 福井県福井市開発2丁目614
最寄駅：えちぜん鉄道勝山永平寺線「越前開発駅」徒歩5分
地図：http://www.surfboard.jp/profile/map_fukui.asp

参加費：無料
参加方法：ATNDで参加登録お願いします
http://atnd.org/events/7277

「.fukui vol.2 -続・JavaScriptの巻-」をやりますよ

2010-08-10T23:21:00.006+09:00

隔週くらいで適当に集まって、手を動かす勉強会みたいなのをしたいね、という流れで「.fukui(ドットフクイ)」というイベントをやっています。
vol.1(8/4), vol.2(8/18)はまずはJavaScriptをテーマに各々がカチカチとやります。
ちなみに私はSencha Touch(Ext JS)を使ったアプリを勉強がてら作っていますよ。
開発者だけじゃなくて、デザイナーの人も参加しているので、困ったときは頼りにしています。

[8/4] .fukui vol.1 -JavaScriptの巻-
http://atnd.org/events/6652

[8/18] .fukui vol.2 -続・JavaScriptの巻-
http://atnd.org/events/6981

以下、ATNDより抜粋

毎日のように新しい技術と情報が飛び込んでくるWeb業界。
・勉強しないとまずいなーとおもいつつ、なかなか時間がつくれない。
・1人で勉強してると、いろんな誘惑に負けてイマイチ技術習得に身が入らない。
・同じことを勉強している人と情報交換して、スキルを高めたい。

そんなふうにお考えの方。
みんなで同じ場所に集まってプチ合宿形式で技術を身に付けませんか。

基本的には毎回勉強するテーマを決めて開催しようと思いますが、何を勉強するのかはお任せします。
例えばHTML5がテーマだけど、ちょっとjQueryのことも調べてみよう、というのもOKです。
今回のテーマは「JavaScript」です。

誰かがスピーカーとして話すタイプではなく、手を動かす（何かを作る）タイプの勉強会です。
ゆるいけど、切磋琢磨する。そんな感じで勉強会をしていければいいかなと思います。
よろしくお願いします。

.fukui（ドットフクイ）とは・・・
福井クラスタが集まって勉強する会です。
クラスタとcssのclass(.)をかけてます（わかりにくい？
プロパティはHTML5やjQuery、JavaScriptなど様々です。好きなスタイルで勉強しましょう。

HTML5Rocksでロックな写経会 in 福井 - 7/14(水)

2010-07-08T22:32:00.006+09:00

7/14(水)にHTML5Rocksでロックな写経会 in 福井を開催します。

HTML5RocksのPLAYGROUNDを写経(実際にコードを入力)して、HTML, JavaScript API, CSSの新たな部分の理解を深めようと思います。
分からない部分が出てきたら、参加者同士で教えあいましょう。
下記のATNDから参加登録をして、気軽にご参加ください。

HTML5Rocksでロックな写経会 in 福井
http://atnd.org/events/6184
日時 : 2010/07/14 19:00～
定員 : 10 人
会場 : 株式会社サーフボード 1階会議室（福井県福井市開発2丁目614）
参加費: 無料

ソロでやるも良し、ペアでキャッキャウフフやるも良し、そこは自由です。
先月開催されたjsdo.itをいじる会で扱ったjsdo.itを使うのもありですね。
個人的にはCSS周りに弱いので、まずはCSSのパートからやろうかと思ってます。

HTML5Rocks PLAYGROUND
http://playground.html5rocks.com/

※写経とは
仏教において経典を書き写すこと。経文の真髄を会得する大切な行法のこと。
何かを学ぶ初期段階には良い方法だと思います。

東京へは頻繁に行けない！北陸(福井、石川、富山)に住んでいても、HTML5や関連APIの勉強、情報共有をしていきたい人たちのコミュニティとして、Google GroupにHTML5-FITを作っています。
興味をお持ちの方、ぜひご参加ください。

HTML5-FIT
http://groups.google.com/group/html5-fit

Flex User Goupが勉強会全国ツアーを11都市で開催中

2010-06-13T22:07:00.004+09:00

Flex User Goup(FxUG)では全国各地で開催していた勉強会が通算100回を超えました。
現在、通算100回を記念して、Adobe Systemsと一緒に全国行脚に出ています。

通常の勉強会とは趣向を変えて、地域を越えて、Flash/Flex/RIA好き/アルファギークの仲間達が交流し、情報交換できるようなプログラムにしています。

名古屋を皮切りに、札幌、京都、金沢、広島、仙台、熊本、沖縄、福岡、大阪、東京と全国11都市を巡ります。
是非、この機会に最寄りの会場で開催される全国ツアーに参加しませんか？

Flex User Group Japan Tour 2010
http://tour.fxug.net/2010/

金沢 - 6/19(Sat)
http://tour.fxug.net/2010/kanazawa/

広島 - 6/27(Sat)
http://tour.fxug.net/2010/hiroshima/

Adobe MAX 2010 in Los Angelesツアーに無料招待してくれるのプレゼントがあるみたいです。
全国ツアーイベントへの参加者数を考えると確率は高そうですね。

Adobe Systems提供の参加者プレゼント
http://goo.gl/FWEI

HTML5 Geolocation APIをFlash/Flexから使う - as3geolocation

2010-06-09T08:50:00.010+09:00

前回の記事のas3webstorageに続き、Geolocation APIをFlash/Flexから利用できるようなシンプルなユーティリティを作ったので、それをGoogle Code Hostingで公開しました。

as3geolocation
http://code.google.com/p/as3geolocation/

サンプルはこちらになります。HTML5 Geolocation APIをサポートしているChromeやFirefoxなどから確認してください。
Geolocation APIのサンプル

作りとしては、as3webstorageと同様にActionScriptのExternalInterfaceクラスを利用して、Geolocation API(JavaScript)をラップしてActionScriptから呼んでる"だけ"です。

※Safari5でGeolocation APIが実装されてるのですが、as3geolocationではExternalInterfaceとの絡みで上手く動いてません...orz
※Geolocation APIはHTML5仕様には含まれてません。

HTML5 Web Storage APIをFlash/Flexから使う - as3webstorage

2010-06-03T21:48:00.016+09:00

以前、Web Storage APIをFlash/Flexから利用できるようなシンプルなユーティリティを作っていたので、それをGoogle Code Hostingで公開しました。

as3webstorage
http://code.google.com/p/as3webstorage/

6/2(水)に開催した「HTML5、おまけにiPadをネタにワイワイガヤガヤ in 福井」でタネ明かししたやつです。
サンプルはこちらになります。ストレージに格納されてるかどうかはChromeブラウザのデベロッパーツールなどから確認してください。
LocalStorageのサンプル
SessionStorageのサンプル

作りとしては、ActionScriptのExternalInterfaceクラスを利用して、Web Storage API(JavaScript)をラップしてActionScriptから呼んでる"だけ"です。
LocalStorageクラスとSessionStorageクラスしかなくて、そんだけ？っていう感じのユーティリティになってます。

先日公開された「Web SQL DatabaseをFlashから使う」という海外のブログ記事を見たのが公開のキッカケになりました。
=> Flash + HTML 5 : Offline Flash Apps using DataStore API

HTML5 vs Flashっていう視点で一部では見られてるけど、Flash/FlexとHTML5の両方に興味があって追っている私としては、別にFlashとHTML5を無理にvsな関係で捉えなくてもイイんじゃないかなと思っています。

HTML5関連API(HTML5仕様ではないJavaScript API群)については、完全にではありませんがFlash(ActionScript)からも利用できますしね。
ちなみに、FlexのHistoryManagerやディープリンキング(パーマリンク)はActionScriptとJavaScriptとが密に連携して実現していますよ。

HTML5関連APIにはWeb Storage API, Geolocation API, Indexed database API, ....と多々あります。
HTML5について詳しくは↓この辺で一緒に学びませんか？
html5-developers-jp
html5-fit

※Web Storage APIはHTML5仕様には含まれてません。

※2010/06/18 追記 - MOONGIFTで紹介していただきました。感謝。
ActionScript3向けのWebストレージライブラリ「as3webstorage」
http://www.moongift.jp/2010/06/as3webstorage/

Python-FIT 0回目勉強会に参加してきた

2010-05-08T23:56:00.004+09:00

Python-FIT 0回目
http://atnd.org/events/4352

Pythonの勉強会って、実は需要があったんだけど北陸では行われていなかったようで、今回0回目がPython-FIT(Fukui, Ishikawa, ToyamaのPythonグループ)主催で行われました。

メモ程度に...
Python-FITでは初めての勉強会開催なので、参加者で顔合わせ＆自己紹介。
みんなOpy好き。
次回以降、どんなことを勉強会でやっていきたいのかを皆で雑談。
とりあえずPython初心者が多いという事でPythonチュートリアルを眺める。

@aroma_blackからPython Challengeの紹介。
何をやりたいかのアンケートでは読書会、コードリーディングが人気。
コードリーディングが圧倒的割合。

セッション開始...
@rch850からDjangoの紹介。
@rch850はテストを書くためにPythonを使っている。

Django-nonrelっていうnon-relational(NoSQL)データベース向けのDjangoもあるらしい。
NoSQL=BigTableとかリレーショナルDB以外の総称。

@aroma_blackからPythonでDDDとSphinxの紹介。
DDDの解説本はPython Testingが唯一ではないだろうか by @aroma_black
DDD is not Domain Driven Development。
DDDの解説 => doctest&unittestの比較紹介 => doctestのデモ。

@yuuichiroからのWSGIの紹介
WSGI=Web Server Gateway Interface
WebサーバーとWebアプリケーション/フレームワーク間の統一的なインターフェース定義。
telnetでサーバーに接続してGETww
termtter - http://termtter.org/

セッションはここまでで、最後に次回はPythonチュートリアルを読み進めるということで、サテライトでどう実施するか検討。
私の方から仕事の朝会で実際に行っているMikogo+Skype音声通話を紹介。
みんなでMikogoを繋げて画面共有を確認。

メインの懇親会へ！
懇親会では、 @yuuitiro と最北端は最先端Talkをたっぷりとさせていただきました。
丸山先生の面白話が聞けて、すんごく楽しい時間でした。

最後に、福井で勉強会を開催する際には結構な割合で、(株)jig.jpと(株)サーフボードから支援いただいています。
振り返ってみるとGoogle Hackathon、FxUG、HTML5-FIT、Python-FITなどなど、いつもお世話になっているなと。
この2社のコミュニティへの貢献は大きいなーと感謝しています。
これからも是非よろしくお願いします。

Chrome拡張Hackathonやりませんか？

2010-04-13T00:43:00.006+09:00

前回、Chrome Extensions with HTML5作ってみよう会のご案内をしましたが、
京都GTUGと連携して、Google Chrome ExtensionsのGoogle Hackathonを
4/17(土), 4/24(土)に福井県鯖江市の(株)jig.jp様にて、開催することになりました。

4/17に、Chrome Extensionsの解説と数名のグループに分かれて、
4/24に作るもののアイデアを考え(Ideathon)、そして4/24には
グループ毎に丸一日かけて実際の開発(Hackathon)をして頂きます。

Google Hackathonを1/31, 2/7にも開催したのですが、その時と同様に、
Google API Expertの山下大介氏をお迎えします。
さらに今回はGoogleの方にもご参加いただけるかもしれません。

優勝チームには全員にGoogleからTシャツなどのステキなグッズを
お贈りしますので優勝目指してがんばってください。

技術的な心配をされる方もいるかもしれませんが、事前勉強会や
IdeathonからHackathonまでの準備期間が十分にありますので
学生や初心者の方も安心してご参加いただけます。

ちなみに、前回のGoogle Hackathonでは、参加者の大半がGoolge App Engine未経験者でした。

=================================================================
『Google Hackathon for Chrome Extensions in 福井』 4/17(土) ＆ 4/24(土)
　詳細情報：http://goo.gl/5XQp
　お申込み：http://goo.gl/NgRf
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
■イベント概要
Google Chrome Extensionsをテーマに有志が集って、実際にみんなで手を
動かしてChrome Extensionsを作るイベントです。

Chrome Extensions初心者向けの勉強会もIdeathonの同日に開催しますので、
学生や初心者の方も安心してご参加いただけます。
ご友人、同僚を誘って是非ご参加ください。

『Chrome Extensionsって何ですか？』
Google Chrome(Chromium)ブラウザを拡張できる機能、Firefoxのアドオンに
相当するものです。

Chromeでは、一般的なWebサイトと同様にJavaScript/HTML/CSSを用いて
拡張機能を開発することができます。

また、ChromeがサポートしてるHTML5/CSS3の機能、また関連APIを使うことも
可能です。

現在、2000個以上の拡張機能がGoogleのギャラリーで公開されています。
https://chrome.google.com/extensions/

■日時：
　4/17(土)15:00～18:00 - Ideathon
　4/24(土)10:00～18:00 - Hackathon
　※4/17のIdeathon、4/24のHackathon、両日の参加が原則必要です。
　※4/17 13:00～14:30にはChrome Extensions初心者向けの勉強会が開催されます。

■定員：最大30名（事前登録制）

■参加費：一般：1500円、学生：無料
　※備品、遠方よりご参加いただくスタッフへの交通費に割当させていただきます。
　※ランチ代は各自ご負担となります（出前又は弁当等）。

■会場：めがね会館7F 株式会社jig.jp様会議室
■主催・運営：京都GTUG、北陸エンジニアグループ、FITEA
■会場協力：株式会社jig.jp 様
=================================================================

Appleがマルチプロセス対応のWebKit2を発表

2010-04-12T22:45:00.006+09:00

既に、レンダリングエンジンにWebKitを使ったChromeブラウザはマルチプロセスな作りになっていて、タブ毎、Chrome拡張毎にプロセスが分かれています。
そのため、何れかのタブ、Chrome拡張に問題が起こって落ちることがあってもブラウザ全体が落ちる事は少ないようです。
(ChromeにはStable, Beta, Devとチャンネルが分かれていて、Devチャンネルだと落ちることもたまにあります)

で、WebKitを中心的に開発しているAppleが提供するSafariですが、こちらはまだマルチプロセスではありませんでした。
今回発表されたWebKit2を組み込んだSafari 5?の登場(リリース日不明)によって、Safariもマルチプロセスへと変わっていくのでしょうね。
HTML5やCSS3対応が注目されていますがこの辺の動向も重要です。

WebKit2とWebKitでは一部APIに互換性がないらしいので、Chromeと同様、WebKitを組み込んでいるプロダクトも切り替えは慎重に行う必要がありそうです。

WebKitを組み込んだプロダクトとしては、Safari(iPhone/Mac/Windows), Adobe AIR, Google Chrome...(WebKitを使用するソフトウェア)というように多くあります。
各プロダクトの中の人はこれから大変そうですね。

WebKit2の概要はWebKitのTracで紹介されています。
http://trac.webkit.org/wiki/WebKit2

Mac WebKit, WebKit2, Chromium WebKitのプロセスアーキテクチャが図解されており、APIレイヤーがそれぞれどこで分かれているかなどが読み取れます。

http://journal.mycom.co.jp/news/2010/04/12/051/index.html

ReverseIt! - Chrome Extensionsを作りました

2010-04-08T21:48:00.014+09:00

今日の昼休みに @mitukiiiのこのつぶやきを見たのをきっかけに、ランチ前の時間を使ってChrome Extensions、ReverseIt!を作ってみました。
昨夜、Chrome Extensions with HTML5作ろう会 in 福井を開催したので、復習がてらちょうど良かったです。

ReverseIt!を試してみようという奇特な方はChromeブラウザから以下のリンクをクリックして、Chrome拡張(Extensions)をダウンロードしてください。

ダウンロード： http://f.air-life.net/crx/ReverseIt.crx

インストールされるとアドレスバーの右側に以下のような青い四角に"R"と描かれたボタンが追加されます。

後は、適当なWebページを開いてポチっとそのボタンを押していただくと、ページが反転します。...それだけです。

しょーもないChrome Extensionsを作りましたが、4/17(土), 4/24(土)に「Google Hackathon for Chrome Extensions in 福井」が開催されるので、そこではもっとまともなモノを作ります。一緒にChrome Extensionsを作りませんか？
Chrome ExtensionsはChromeブラウザで扱えるHTML5(関連)やCSS3の機能も使えるので楽しめますよ。

Google Hackathon for Chrome Extensions in 福井 - 4/17, 4/24(土)
http://groups.google.co.jp/group/hokuriku_engineer/web/ghfukui-vol02

ネタ元

ギズモードのデザイナーが語る！エイプリルフールの裏側
http://www.gizmodo.jp/2010/04/post_6958.html

！ルーフルリプイエは日今
http://www.gizmodo.jp/2010/04/april.html

ソースコード
ざっくり説明すると、“R”ボタンを押されたときにGIZMODEで紹介されていた反転用のCSSを現在開いているページに適用するだけです。
manifest.json

{
   "background_page": "background.html",
   "browser_action": {
      "default_icon": "icon48.png",
      "default_title": "ReverseIt!"
   },
   "icons": { "48": "icon48.png",
          "128": "icon128.png" },
   "description": "GIZMODEの2010年エイプリルフールネタを現在開いてるページに適用する。 http://www.gizmodo.jp/2010/04/post_6958.html",
   "name": "ReverseIt!",
   "permissions": [ "tabs", "http://*/*", "https://*/*" ],
   "version": "0.2"
}

background.html

<html>
<head>
<script>
 chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.insertCSS(tab.id, {file:"reverse.css"}, null);
 });
</script>
</head>
</html>

reverse.css

body{
 -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
}

icon48.png, icon128.png