919speakersで発表したUiUIKit + HTML5を公開

盛岡で919speakersというLTイベントが行われたのですが、そこで僕が発表した「UiUIKit + HTML5」のファイル群をUPしました。

UiUIKitはCSS3 + xhtml1.0 で作られたiPhone用のサイトを作るためのライブラリですが、それをHTML5用にポーティングしました。元がAGPL3なので、公開したファイルもAGPL3です。

919spでは、このライブラリを使って、iPhone用案内ページも作りました。 http://919sp.migiue.jp/

考え方はxhtml版から構造的に大きな変更はせず、HTML5でのマークアップに合わせてCSSを調整しています。


iPhone UiUIKit-2.1 + HTML5

Download: UiUIKit-2.1-HTML5.zip

This is a HTML5 version. Original xhtml1.0 version is here. http://code.google.com/p/iphone-universal/

The UiUIKit + HTML5 it's a collection of HTML5 examples of what can be done with CSS3 and Safari's Webkit. With this framework you can:

Fast prototype any web app with ease. Make you're own app using different iPhone original interfaces.

The framework is based on 1 stylesheet and several HTML5 examples, also, it contains original artwork so you can edit them in Adobe Photoshop CS and adapt it to your projects. With this framework you can build:

Headers

  • Simple header
  • With back button
  • With back and action button
  • With pre title

Normal Lists

  • Simple list (standard iphone list)
  • Contact list (address book list example)
  • Icon list (settings list like with icons)
  • Content List (similar to youtube app list, ical and others)
  • Metal list (similar to Clock app)

Rounded Lists

  • Standard
  • With content

Plastic lists (App Store like)

  • Minibanners
  • Big banners examples

Information fields

  • Address book profile example

Image lists

  • Loading sprites example list
  • Image gallery

Chat interface example

  • Chat bubbles example
  • Master chat bubble psd file

Forms

  • Standard form in Apple interfaces
  • Error fields
  • Small JS inline to clear content on click (just a simple example)

Buttons

  • Buttons panel
  • Buttons examples

Best enjoyed on a real iPhone This iPhone UI Framework kit is licenced under GNU Affero General Public License (GNU AGPL 3)


Tour de France 2009に行ってきた(準備出発編)

何年か前からツール・ド・フランスを現地で見てみたいなぁ〜と思っていましたが、ついに今年、現地に行ってきました。

17stでマイヨジョーヌを着るコンタドール
(写真:マイヨジョーヌを着るコンタドール)

「ツール・ド・フランス」というのは世界最大の自転車ロードレースで、フランスを一周するようなコース、今年は約3460kmを23日間で走ります。日本ではサイクルロードレースの知名度は低いですが、ヨーロッパではサッカー並に人気のスポーツです。そんなレースを観戦に行ってきました。いゃーすごかった。ツールが世界最大の自転車レースと言われる所以が分かったような気がします。ただレースの開催規模が大きいというだけでなく、それを支える地域と人々、自転車に対する文化と歴史、それを少しでも垣間見ることが出来たと思います。

日本人が出場!そして活躍!これはとても凄い事!

また今年のツールは日本の自転車ロードレース界にとっても、新しい歴史が開かれた大会となりました。今回、「よし行こう!」と決めたら、日本人が二人も出場することが決まり、とても良いタイミングで行けました。日本人で出場したのは、Bbox Bouygues Telecom所属の新城幸也選手、SKIl SHIMANO所属の別府史之選手。

レース後半〜最終日のゴールを観戦する日程で行ったのですが、最終日にパリで待っていても日本人のゴールは見られないのではないか...という気持ちがちょっとだけありましたが、全くの杞憂に終わりました。二人とも無事に最後まで完走するだけでなく、各ステージですばらしい仕事をして活躍しました。そして最終日のシャンゼリゼ、フミが逃げる姿をこの目で見られるとは...

ということで、次回また自分が行くときのために、そして誰か次に行く人の参考になればと思ってまとめてみます。

BouyguesTelecomはフランスの通信会社です。日本で言えばSoftBank的なポジションなのかな?Bboxというのは、そのブイグテレコムが発売しているインターネットボックスらしいです。YahooBBのモデムみたいな感じなのだろうか?

SKILは工具とかを扱っている会社です。SHIMANOは自転車パーツでは世界トップシェアを誇る日本の会社です。シマノは釣り用品でも有名ですね。

今回の旅程

今回は仕事とかもいろいろと調整をして(ご協力いただいた皆さんありがとうございます)、ツール後半の16,17,18,19,21ステージを観戦する日程を組みました。大手旅行代理店もツール観戦ツアーを用意していたりしますが、今回の旅は全て自分で組み立てた個人旅行です。

自分一人で行くならば旅行代理店のツール観戦ツアーでも、車中泊で無計画のいきあたりばったりの旅でも良かったんだけど、今回は家族(妻と1歳10ヶ月の子供)を連れて行くので、全て個人手配をして計画を練りました。子供が自由にできるように、移動はほとんどレンタカー。

パリとジュネーブとシャモニーの位置関係

16ステージから観戦するスケジュールを組みましたが、これは移動のしやすさも考えています。16ステージからはいわゆる「アルプス」の山々を走るルートですが、16,17,18ステージはそれほどお互いに離れていなくて、1カ所を拠点にすれば各ステージを見て回れそうだったので、中間地点のChamonix-MontBlanc(シャモニー・モンブラン)を第1拠点にすることにしました。

一番心配なのは子供の体調なので、ゆとりのあるスケジュールを組みましたが、レースは常に200kmくらいずつ移動していくので、レースを見るには追わなければなりません。本当は20ステージのモンバントゥーも見たいのだけど、さすがにルート的に厳しいので、20ステージは見ずに、21ステージのパリに先回りしました。

各日のメインイベントは以下の通り。

  • 7/18 日本出国 / 機内泊
  • 7/19 EU入国 / ジュネーブへ移動 / ジュネーブ観光 / ジュネーブ泊
  • 7/20 レンタカー借りる / シャモニーへ移動 / シャモニー泊
  • 7/21 16st観戦 / シャモニー泊
  • 7/22 17st観戦 / シャモニー泊
  • 7/23 18st観戦 / アヌシーへ移動 / アヌシー泊
  • 7/24 19st観戦 / リヨンへ移動 / レンタカー返す / リヨン泊
  • 7/25 リヨンからTGVでパリへ移動 / パリ観光 / パリ泊
  • 7/26 21st観戦 / パリ泊
  • 7/27 パリ観光 / パリ泊
  • 7/28 レンタカー借りる / モンサンミッシェルへ移動 / モンサンミッシェル泊
  • 7/29 CDG空港へ移動 / レンタカー返す / EU出国 / 機内泊
  • 7/30 日本帰国

ちなみに日程の組み立ては、いつも仕事でプランニングに使うOmni Planを使いました。各タスクを並べていけば、スケジュールの矛盾点の発見や再調整も簡単にでき、進捗状況も確認できたりとても便利なソフトです。Microsoft Projectみたいなプロジェクト管理に使うMac用のソフトです。

オムニプランで日程の組み立て

フランスでiPhoneを使う

期間中は全く仕事をしない訳にもいかないので、今回はMacBookの他に、iPhone3GSも持って行きました。iPhoneを海外で使うのは初めてでしたが、パケット通信をしなければ(データローミングは高額請求になる)、海外ローミングで普通に使えます。電話とWiFi端末としてそれほど困ることもなく使えました。普通に日本から仕事の電話も(深夜だけど)かかってきますし、こちらからもかけられます。ただ、iPhoneでは電話帳に登録してるままではかけられないので、電話帳を編集して頭に +81 を付けるか、手動でダイアルする必要があります。MacBookの方はホテルのWiFi等に接続して事務所にVPNを張ってしまえば、日本にいるときとほぼ同じ環境で仕事が出来ました。

フランスでのiPhoneのキャリア選択画面
(フランスでソフトバンク契約のiPhoneを使う)

iPhoneの通信キャリアは「自動」にしておけば、その時に条件の良いキャリアが自動選択されるようです。OrangeはNTTドコモ、SFRはKDDIな感じだと思います。どのキャリアでも電話はつながるようです。ここでは応援の意味も含めて、新城選手の所属チームのブイグテレコムを手動選択してみましたが、ブイグテレコムの電波エリアは狭いようで、すぐに圏外になったりします。通常は「自動」にしておけば良いです。

空港にはコンセントがたくさんあった
(パリの空港にはサービスコンセントがたくさんあった)

飛行機はエールフランス

AF277

第1拠点にするシャモニーモンブランに行くには、日本からパリで降りて移動するよりも、スイスのジュネーブに降りた方がシャモニーへ近いので、まずはジュネーブ行きの航空券を取りました。結果的にはパリでトランジットするのですが、購入した航空券は

  • 行き:AF277 / 成田→シャルルドゴール
  • 乗継:AF1642 / シャルルドゴール→ジュネーブ
  • 帰り:AF278 / シャルルドゴール→成田

というエールフランスを使ったオープンジョーのチケットです。航空券の仕組みが難しくてイマイチ理解できていないですが、もう少しうまくやれば格安な航空券もあるのかも? でもパリまでは12時間のフライトで、さらに乗り換えするので、子供の体力も考えて最短のフライトを選択しました。

1ヶ月前以上の予約FIXなので、正規料金の半額くらいに値引きがされていたようです。さらに燃料サーチャージが7/1から値下がりするというニュースを見ていたので、購入は7/1にしました。

AF277の機内食
(Beef with sesame miso sauce, steamed rice を選んだら牛丼だった)

幼児の飛行機について

子供(1歳10ヶ月)の分の航空券については、「座席を利用しない2歳以下の幼児(INFANT/インファント)」が国際線に搭乗する場合は、大人料金の10%で乗れるみたいです。ただし「座席を利用しない」なので、基本的にはずっと大人の膝の上が席になります。偶然にも隣の席が空いていれば、そこに座らせることもできると思いますが、基本的には起きているときも寝ているときも機内食の時も、ずっと大人の膝の上です。

今回は幼児としてINFANTを使いましたが、行きの飛行機は満席だったので、12時間ずっと交代で膝の上に座らせていました。大人も子供もかなり疲れますが、騒がずによく眠っていてくれたので助かりました。iPhoneに入れておいたペネロペとかアンパンマンとかトーマスの動画も役立ちます。iPhoneは「機内モード」があるので、機内でiPod Touchとして使うことができます。また、行きの飛行機は、いわゆる「スクリーン前席」にしてもらえたので、少しは足下に空間の余裕があって助かりました。スクリーン前席では幼児向けにバシネットというのが使えて、簡易ベビーベッドみたいなのを設置できるのですが、うちの子は10kgを越えていたので2歳未満でも利用できませんでした。

幼児向けのINFANT
(座席番号を表示する部分がINFとなったチケット)

帰りの飛行機は席が空いていたので融通してくれて3席を使うことができました。ちなみに大人料金の33〜50%を支払うと、幼児料金ではなくて小児料金となり、席が確保できるようです。予算に余裕があれば席を確保することをオススメします。

また、日本からベビーカーを持って行って、移動中はできるだけ乗せておくことにしました。自分で歩くこともできるので、ベビーカーは無くてもどうにかなりそうですが、荷物もたくさんあるし、抱っこしなくても寝せておけるので、基本はベビーカーに乗せて押して歩きます。走り回って迷子になっても大変なので、折りたたみできるベビーカーを持って行くことをオススメします。空港でも搭乗の直前まで使うことができて、何かと安心です。国際線では(機体が大きいので?)手荷物として、機内の荷物室に預かってくれてタラップまでベビーカーで行けました。パリからジュネーブへの乗り換えEU便は、(機体が小さいので?)チェックインカウンターで預け荷物にしないとダメでした。

アルファ米とおかずを機内で食べる

大人の食事はパンとパスタでどうにでもなるのですが、うちの子供がアレルギーで卵と小麦粉と牛乳を食べないようにしているので、子供の食事は日本から米(お湯を入れると炊きたてのご飯になるアルファ米)とレトルトの赤ちゃん食を30食分くらい持って行って、足りない分は現地のスーパーで食材を調達したりしました。飛行機の中ではお湯をもらって、アルファ米をふやかしたり。


iTrail + TrailRunner が面白い

雪も溶けたので久しぶりに自転車に乗ったら、体がかなり退化していた...

約40kmの距離を平均20km/hで2時間軽く流す程度。これでもかなりきつい。絞らねば!

iPhoneでiTrailsというGPSトラッキングアプリを動かしながらログを取ってみた。ちなみにiTrailは岩手Mac友の会白石さんが日本語訳をしています。

田舎の山の方を走っているので、電波の入らないところはGPSデータを取りこぼしているけど、なかなかの精度でトラッキングできている。

iTrailだけでもGoogleMapにマッピングしたり、高度グラフを作成したり、GoogleEarthでインポートできるKMLに書き出したりできるけど、取得したデータをTrailRunnerというソフトに流し込むと、一連の行程を再生したり、各ポイントの詳細データが分かったりしてさらに面白い。

今回は自転車で使ってみたけど、たぶん車でもバイクでも問題なく使えると思う。途中で電話の着信が入っていたけど、それでも問題なくトラッキングは続いていた。電池の減りは少し早いけど、アプリが落ちない限りうまく動きそう。

スクリーンキャストの配信方法のテストもしてみる。一番上に表示されてるのは、自サバでのFlash+F4Vファイル。最新のFlashPlayerでないと再生できないと思う。2番目はFlickr、3番目はVimeo。一番下はQuickTime。スクリーンキャストの作成はScreenFlow。

Flash + F4V 自サバ

Flickr

Vimeo

QuickTime


ねこび〜んプレゼンタイマー(iPhone)

ねこび〜んプレゼンタイマー動画

id:happy_ryoが東京に行くので送別会を開いたのですが、私からのプレゼントとして、iPhone用のねこび〜んプレゼンタイマーを送りました。 しかしid:happy_ryoがiPhone持ってない(>_<)

今のところ私の実機で実際に動いています。デモムービーもFlash+H.264で作ってみました。

これからも東京でたくさんLTをするであろうid:happy_ryoには必需品ですね。

SpecialThanks

プレゼンタイマ (Takuya Murakami) (BSD License) http://iphone.tmurakam.org/presentationTimer/index-j.html

ねこび〜ん (カネウチカズコ) (CC-BY-SA) http://ja.netbeans.org/nekobean/