ASP.NETでiPhone向けWebアプリを作ってみる

iPhone買ったからには、自分でアプリを作ってみたいよね。

とは言うものの、ネイティブアプリを作ろうと思うと、Macを買わないといけないし、Objective-Cを学ばないといけないし、AppleNDA契約結ばないといけない。さらに、リリースには99ドル必要と、なかなか壁が高い。

そういうのは面倒なので、今回はWebアプリを作ってみることにした。

ちなみに、ASP.NETJavaScriptも未経験なので、かなり怪しい記述をしているかも。

環境

今回使った環境はこんな感じ。

プロジェクトの作成

Visual Studio 2008を起動し、ファイルメニューから[新規作成]→[Webサイト]を選択する。

テンプレートの中から[ASP.NET Webサイト]を選択し、保存場所を選択してOKを押す。

iUI

次に、iPhone的なUIを提供してくれるJavaScriptライブラリであるiUIを、下記のサイトからダウンロードしてくる。

ダウロードしたファイルを展開し、iuiディレクトリ配下にあるjs、css、pngファイルをプロジェクトに追加する。

ページの作成

次に、Default.aspxとDefault.aspx.csを以下のように記述する。

こうやってベタに書くのは、ASP.NET的にはよろしくないのかもしれないが。

  • Default.aspx
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Sample for iPhone</title>
    <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
    <style type="text/css" media="screen">@import "iui/iui.css";</style>
    <script type="application/x-javascript" src="iui/iui.js"></script>
</head>
<body>
  <div class="toolbar">
    <h1 id="pageTitle"></h1>
    <a id="backButton" class="button" href="#"></a>
  </div>
<%=ContentText%>
</body>
</html>
  • Default.aspx.cs
using System;
using System.Text;
using System.Web.Services;

public partial class _Default : System.Web.UI.Page 
{
    protected String ContentText
    {
        get;
        private set;
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        String[] names = {"Test1","Test2"};
        StringBuilder sb = new StringBuilder();

        sb.Append("  <ul id=\"main\" title=\"Sample\" selected=\"true\">\n");
        foreach (string name in names)
        {
            sb.Append("    <li><a href=\"#" + name + "\">" + name + "</a></li>\n");
        }
        sb.Append("  </ul>\n");

        foreach (string name in names)
        {
            sb.Append("  <ul id=\"" + name + "\" title=\"" + name + "\" class=\"panel\">");
            sb.Append("    <h2>" + name + "'s Name</h2>");
            sb.Append("    <fieldset>");
            sb.Append("      <div class=\"row\">");
            sb.Append("        " + name);
            sb.Append("      </div>");
            sb.Append("    </fieldset>");
            sb.Append("    <h2>" + name + "'s Setting</h2>");
            sb.Append("    <fieldset>");
            sb.Append("      <div class=\"row\">");
            sb.Append("        <label>Setting</label>");
            sb.Append("        <div class=\"toggle\" onclick=\"\" toggled=\"true\">");
            sb.Append("          <span class=\"thumb\"></span>");
            sb.Append("          <span class=\"toggleOn\">ON</span>");
            sb.Append("          <span class=\"toggleOff\">OFF</span>");
            sb.Append("        </div>");
            sb.Append("      </div>");
            sb.Append("    </fieldset>");
            sb.Append("  </ul>");
        }

        ContentText = sb.ToString();
    }
}

ここまでのものでも、それっぽいUIが表示される。

ページメソッド

続いて、ボタンの操作をしたらサーバ側で処理をしたいと思ったので、ページメソッドを追加してみる。

  • Default.aspx
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>Sample for iPhone</title>
  <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
  <style type="text/css" media="screen">@import "iui/iui.css";</style>
  <script type="application/x-javascript" src="iui/iui.js"></script>
  <script type="text/javascript">
    function Action(name){
      PageMethods.DoAction(name, SucceededCallback, FailedCallback, "context");
    }
    function SucceededCallback(result, userContext, methodName)
    {
      alert(result);
    }
    function FailedCallback(error, userContext, methodName)
    {
    }
    </script>
</head>
<body>
  <div class="toolbar">
    <h1 id="pageTitle"></h1>
    <a id="backButton" class="button" href="#"></a>
  </div>
<%=ContentText%>

<form id="form1" runat="server">
  <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />
</form>

</body>
</html>
  • Default.aspx.cs
using System;
using System.Text;
using System.Web.Services;

public partial class _Default : System.Web.UI.Page 
{
    protected String ContentText
    {
        get;
        private set;
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        String[] names = {"Test1","Test2"};
        StringBuilder sb = new StringBuilder();

        sb.Append("  <ul id=\"main\" title=\"Sample\" selected=\"true\">\n");
        foreach (string name in names)
        {
            sb.Append("    <li><a href=\"#" + name + "\">" + name + "</a></li>\n");
        }
        sb.Append("  </ul>\n");


        foreach (string name in names)
        {
            sb.Append("  <ul id=\"" + name + "\" title=\"" + name + "\" class=\"panel\">\n");
            sb.Append("    <h2>" + name + "'s Name</h2>\n");
            sb.Append("    <fieldset>\n");
            sb.Append("      <div class=\"row\">\n");
            sb.Append("        " + name + "\n");
            sb.Append("      </div>\n");
            sb.Append("    </fieldset>\n");
            sb.Append("    <h2>" + name + "'s Setting</h2>\n");
            sb.Append("    <fieldset>\n");
            sb.Append("      <div class=\"row\">\n");
            sb.Append("        <label>Setting</label>\n");
            sb.Append("        <div class=\"toggle\" name=\"" + name + "_toggle\" onclick=\"Action('" + name + "')\" toggled=\"false\">\n");
            sb.Append("          <span class=\"thumb\"></span>\n");
            sb.Append("          <span class=\"toggleOn\">ON</span>\n");
            sb.Append("          <span class=\"toggleOff\">OFF</span>\n");
            sb.Append("        </div>\n");
            sb.Append("      </div>\n");
            sb.Append("    </fieldset>\n");
            sb.Append("  </ul>\n");
        }

        ContentText = sb.ToString();
    }

    [WebMethod]
    public static String DoAction(String name)
    {
        return name + ":OK";
    }
}

iPhoneから見てみる

以上でアプリが出来たので、iPhoneSafariから確認してみる。

IISの設定

「コントロールパネル」から「プログラム」→「Windows機能の有効化または無効化」を選択する。

[Internet Information Services]にチェックを入れる。

追加で以下の項目にもチェック。

  • [Web 管理ツール]→[IIS 6 と互換性のある管理]→[IIS メタベースおよび IIS 6 構成との互換性]
  • [World Wide Web サービス]→[アプリケーション開発機能]→[ASP]
  • [World Wide Web サービス]→[アプリケーション開発機能]→[ASP.NET]
  • [World Wide Web サービス]→[セキュリティ]→[Windows 認証]

次に、%windir%\system32\inetsrv\config\applicationHost.config を開いて、以下の設定をDenyからAllowに変更する。

 :
<section name="handlers" overrideModeDefault="Deny" />
 :
<section name="modules" allowDefinition="MachineToApplication" overrideModeDefault="Deny" />
 :

続いて、コントロールパネルの[管理ツール]から[インターネット インフォメーション サービス (IIS) マネージャ]を起動する。

公開したいページの[ディレクトリの参照]を選択し、[有効にする]をクリックする。

Webサイトの発行

Visual Studio 2008のビルドメニューから[Webサイトの発行]を選択する。このとき、ターゲットの場所は、[...]ボタンを押して、[ローカルIIS]を選択する。

iPhone

iPhoneSafariから、アドレスを指定して見てみるとこんな感じになる。



参考書籍

とりあえず、簡単なWebアプリを作ってはみたものの、分からないことが多すぎる。

書籍を買ってきたので、勉強しよっと。


Microsoft ASP.NET AJAX入門 (マイクロソフト公式解説書)

Microsoft ASP.NET AJAX入門 (マイクロソフト公式解説書)


初めてのJavaScript

初めてのJavaScript