【ハウツー】jQuery on iPhone - jQTouchを使ったWebアプリ開発 (5) Hello, jQTouch! - フォームとAjax処理 | エンタープライズ

【ハウツー】

jQuery on iPhone - jQTouchを使ったWebアプリ開発

5 Hello, jQTouch! - フォームとAjax処理

富田宏昭　 [2009/09/08]

印刷

先頭
前へ
- 1
- 2
- 3
- 4
- 5
- ／5

最後にフォームとAjax処理に触れておこう。とはいってもフォームもAjax処理も、ふつうのWebアプリケーションを実装する場合とほとんど変わらない。

hello_jqtouch_3.html

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />

    <title>jQTouch Form&amp;Ajax</title>

    <style type="text/css" media="screen">@import "../../jqtouch/jqtouch.min.css";</style>
    <style type="text/css" media="screen">@import "../../themes/jqt/theme.min.css";</style>
    <script src="../../jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        $.jQTouch();
    </script>
    <style type="text/css" media="screen">
        body.fullscreen #home .info {
            display: none;
        }
        #about {
            padding: 100px 10px 40px;
            text-shadow: rgba(255, 255, 255, 0.3) 0px -1px 0;
            font-size: 13px;
            text-align: center;
            background: #161618;
        }
        #about p {
            margin-bottom: 8px;
        }
        #about a {
            color: #fff;
            font-weight: bold;
            text-decoration: none;
        }
    </style>
</head>
<body>

    <form action="post.php" method="POST">
        <ul class="form">
            <li><input type="text" name="text" placeholder="Text" /></li>
            <li><textarea name="textarea" style="height:60px">Textarea</textarea></li>
            <li>Toggle <span class="toggle"><input name="toggle" value="on" type="checkbox" /></span></li>
            <li>
                <select name="select">
                    <optgroup label="optgroup_1">
                        <option value="1-1">1-1</option>
                        <option value="1-2">1-2</option>
                    </optgroup>
                    <optgroup label="optgroup_2">
                        <option value="2-1">2-1</option>
                        <option value="2-2">2-2</option>
                    </optgroup>
                </select>
            </li>
            <li><input type="password" name="password" value="pass" /></li>
            <li><input type="checkbox" name="checkbox" value="check" checked="checked" title="checkbox" /></li>
            <li><input type="radio" name="radio" value="radio" title="radio" checked /></li>
        </ul>
        <a style="margin:0 10px 10px 10px;color:rgba(0,0,0,.9)" href="#" class="submit whiteButton">Submit</a>
    </form>

</body>
</html>

post.php

<div>
    <div class="toolbar">
        <h1>$_POST</h1>
        <a href="#" class="button back">Back</a>
    </div>
    <pre style="margin:10px"><?php
    function htmlspecialchars_array($string)
    {
        if (is_array($string))
        {
            return array_map('htmlspecialchars_array', $string);
        }
        else
        {
            return htmlspecialchars($string, ENT_QUOTES, 'UTF-8');
        }
    }
    var_dump(htmlspecialchars_array($_POST));
    ?></pre>
</div>

iPhone特有のトグルは<span class="toggle"><input type="checkbox" /></span>で表現する。hellojqtouch3.htmlで入力した内容をpost.phpにポストし、var_dumpでポスト内容を表示している。実際にiPhoneで表示してみよう。


iPhoneでhello_jqtouch_3.htmlにアクセス、フォームが表示された。トグルもネイティブアプリケーションのように動作する	<select><option>にはあらかじめoptgroupを設定しておくことで、使いやすさが向上する

Submitボタンをタップすると、横スライド表示とともにpost.phpの実行結果が表示される

動画

iPhoneyでhello_jqtouch_3.htmlにアクセス。ページの移動なくフォーム内容が送信されていることがわかる

jQTouchの基本機能やスタイル、フォームの使い方をひととおり紹介した。あとはこれらを自由自在に組み合わせれば、簡単にiPhone向けのWebアプリケーションが構築できるようになるだろう。最初から綺麗なテーマがそろっている、jQueryベースでJavaScriptプログラミングができる点もうれしいところだ。まだまだベータ版という位置づけではあるものの、完成度はかなり高い。jQueryをメインで使用している/これからiPhone向けのWebアプリケーションを作ってみようかと考えているデベロッパは成果物のデモと一緒にぜひチェックしておきたい。