WCAN 2010 Summer ライトニングトークのフォロー

iPadで楽しくWebアプリのフォロー

先週末に開催されたWCAN 2010 Summerでライトニングトークに参加した際の、フォローアップ記事です。当日は、みなさまご静聴いただき、ありがとうございました。

話した内容は、iPadとWebアプリについて。主旨としては「政治ったーの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 )

公式：http://jqtouch.com/

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から安定した環境でやりたいですね...。次回もよろしくお願いします！

---