WCAN 2010 Summer ライトニングトークのフォロー
Posted: Updated:
iPadで楽しくWebアプリのフォロー
先週末に開催されたWCAN 2010 Summerでライトニングトークに参加した際の、フォローアップ記事です。当日は、みなさまご静聴いただき、ありがとうございました。
話した内容は、iPadとWebアプリについて。主旨としては「政治ったーのiPad専用Webアプリ作ったよ」という事と、「iPad専用ならWebアプリでさえも今の知識で十分作れて、新しいことも出来てワクワクするよ」という流れでした。
当日のスライド
現物スライドは、実装の都合上、Safari5またはiPadでご覧くださいませ。Slide Shareにアップロードした分は、スクリーンショットを頑張ってKeynoteに貼り付けるという地道な家内制手工業で...。
今回のiPadを使ったプレゼンテーションの詳細は、LTの本旨とは関係ないので別途「iPadでHTMLプレゼン! +副産物の煎茶スライド」に情報をまとめてます。
政治ったーについて
- 政治ったー ( オフィシャル )
- 政治ったーつくりました。TwitterとかiPadとか特盛よ。 ( ウェブ開発 ) :: ハブろぐ
- iPadなんて怖くない! Webサイトと大差ないWebアプリの調理 ( ウェブ開発 ) :: ハブろぐ
- 政治ったー ウェブサービス新規制作 | 制作事例紹介 | アップルップル
このあたりのURLに、政治ったーとiPad専用Webアプリ的な情報が載っています。ご興味の対象に合わせて、適当にご覧くださいませ。
当日紹介したライブラリ1: jQTouch ( MIT License )
Webサイト風にHTMLを書いて、JSを実装して、というワークフローで作るならこちらがオススメ。
jQueryプラグインとして動作します。touchstart〜touchendみたいな処理を、tapイベントとして自動で管理してくれるので、下のような感じの書き方でタップイベントを定義できます。ラクチン。
$(this).bind('tap', function () { // my function });
他にもたくさん機能があるみたいですが、使い切れてないです。全部の機能を使わないにしても、viewportとかfullscreen(web-app)も、自動でイイ感じにしてくれるので、こういうフレームワークを使うと、何かとラクに構築できますね。
解説は、「jQuery on iPhone - jQTouchを使ったWebアプリ開発 | マイコミジャーナル」が詳しいので、そちらに丸投げで。
当日紹介したライブラリ2: Sencha Touch ( GPL v3 License )
公式:http://www.extjs.co.jp/products/touch/
カッチリした開発フレームワークなので、JQTouchよりは敷居が高い印象です。その分、操作感も見栄えもネイティブAppのようにリッチな表現です。
当日使ったスライドのような表示は、下記のようなスクリプトで作れます。作法が分かれば簡単です。その他の感動的なデモは、Sencha Touch公式のデモページでも体験できます。
Ext.setup({ tabletStartupScreen: 'tablet_startup.png', phoneStartupScreen: 'phone_startup.png', icon: 'icon.png', glossOnIcon: false, onReady: function() { var carousel = new Ext.Carousel({ ui: 'light', // ( dark | light ) direction: 'horizontal', // ( vertical | horizontal ) defaults: { cls: 'card' }, items: [{ title: 'Panel1', html: '<h1>1枚目</h1>' }, { title: 'Panel2', html: '<h1>2枚目</h1>' } }); var ui = new Ext.Panel({ fullscreen: true, layout: 'card', ui: 'dark', items: [carousel] }); } });
ありがとうございました
というところで、ライトニングトークには、また機会があれば参加したいと思っています。次はMacから安定した環境でやりたいですね...。次回もよろしくお願いします!