投稿日: 投稿者: プロデル

プロデルで始める日本語プログラミング言語入門(#20)ウェブアプリを作ろう

今回は、プロデルでウェブアプリを作る方法を説明します。

ウェブアプリとは、ウェブブラウザを通じて機能を提供するアプリのことです。世の中にはブログやSNS、掲示板、ショッピングサイトなど多種多様なウェブアプリがあります。

プロデルには、ウェブアプリを作るために必要な機能が用意されています。今回はフォーム処理やセッション管理、それに関連するデータベース、ビューとロジックの分離など、ウェブアプリ開発の実践的な話も、簡単にご紹介します。

プロデルでウェブアプリを作るには

GUIではウィンドウにボタンやテキストボックスを貼り付けて画面を構成していましたが、ウェブアプリではHTMLを使って画面を作ります。HTMLとはブラウザに表示するページを表現する言語です。

ウェブアプリとは

ウェブアプリとは、インターネット上でウェブブラウザを通じて利用するアプリを指します。SNSやショッピングサイトなど、サーバと常に通信して様々な情報を登録したり取得したりするタイプのアプリに使われます。

プロデルでHTMLを出力するプログラムを作ります。操作や状況、記録されたデータに応じて出力する内容を変えてHTMLを出力します。

プロデルウェブサーバ

プロデルウェブサーバとは、ウェブサーバ上で動作するプロデルの実行環境です。プロデルでウェブアプリを作るためのプログラムです。

プロデルウェブサーバは、常駐しているアプリですので、通知アイコンから操作できます。

プロデルでウェブアプリを作る

プロデルデザイナで次のようなプログラムを作って実行してみます。

ウェブアプリは、ウェブブラウザで画面を表示しますので、HTMLを作ります。次のような最低限必要な部分のみを書いたHTMLを出力してみます。

プロデルでは「※ウェブアプリ」というプリプロセッサを冒頭に書くとウェブアプリとして認識されて、ウェブサーバが起動します。

web.rdr

※ウェブアプリ
応答として「<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>プロデルのページ</title>
</head>
<body>
	<p>こんにちは</p>
</body>
</html>
」を送る

プロデルデザイナ上で実行すると、プロデルウェブサーバが起動して、続けてブラウザが開きます。次のようなページが表示されます。

プロデルプログラムで実行した結果をHTMLへ出力するには「応答」グローバル変数を使います。「応答」変数は、「応答」種類のオブジェクトで、プロデルウェブサーバ上でプログラムを実行した時に利用できる変数です。

「応答」変数を使って、結果を出力したり、クライアント(閲覧者のウェブブラウザ)に送信するヘッダ情報などを指定できます。

なお、別のプログラムを開きたい場合などは、通知バーでプロデルウェブサーバのアイコンを右クリックして「閉じる」を選び、サーバを一度終了してから、プロデルデザイナで実行してください。

フォームを使う

ウェブページにあるテキストボックスやラジオボタンなどをフォームと呼びます。フォームは、HTMLの<form>タグや<input>タグなどを使います。ページ上のテキストボックスに入力した内容を送信すると、その内容をページ上に表示するプログラムを作ってみます。

フォームから送信した内容をプログラムで受け取るには「引数を取得する」手順を使います。「引数を取得する」手順では、取得したいフォーム内のフィールド名を指定します。フィールド名は、inputタグのname属性で指定する名前を指定します。

post.rdr

※ウェブアプリ
要求から「message」という引数を取得して値とする

応答として「<!DOCTYPE html>
<html lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<form method="POST">
	<input type="text" name="message">
	<input type="submit" value=" 送信 ">
</form>
<hr>
[値]
</body>
</html>
」を送る

実行すると、フォームが表示されます。テキストボックスにメッセージを入力して[送信]ボタンをクリックします。そうすると、ページの末尾に入力した内容が表示されます。

セッションを扱う

ウェブアプリでは、同時に複数のタブで開いたり、複数のユーザが同時にアクセスすることがあります。それぞれのタブやユーザだけの状態や情報を、別々に扱えるように、それぞれを「セッション」という単位で情報を管理しています。

セッションには、辞書のように、キーと値の対応で情報を格納できます。情報の読み書きには「応答としてセッション項目へ設定する」手順と、「要求からセッション項目を取得」手順を使います。この情報はプロデルウェブサーバで記憶しています。

応答として《キー》というセッション項目へ《値》を設定する
要求から《キー》というセッション項目を取得する

次のプログラムは、フォームに入力したメッセージをセッションに記憶する例です。メッセージを入力して[保存]をクリックすると、ページを更新しても、そのメッセージが記憶されます。他のブラウザからアクセスすると、別々のメッセージが記憶されます。

session.rdr

※ウェブアプリ
要求から「message」という引数を取得してメッセージとする
メッセージが「」でなければ
	応答として「メッセージ」というセッション項目へメッセージを設定する
でなければ
	要求から「メッセージ」というセッション項目を取得してメッセージとする
そして

応答として「<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
</head>
<body>
<form method="POST">
	<input type="text" name="message" value="[メッセージ]">
	<input type="submit" value=" 保存 ">
</form>
<a href="./">再表示</a>
</body>
</html>」を送る

セッションには次の注意点があります。

  • 格納できるキーは、文字列,数値です。これら以外の値やオブジェクトは格納できません。
  • セッションは一定期間で消えてしまいます。ブラウザを閉じたりCookieを削除したりすることで、値を取り出せなくなります。

掲示板を作る

次に、ウェブアプリとして定番の掲示板を作ってみます。

投稿フォームに、名前と本文を入力して、メッセージを投稿できるアプリです。

まずHTMLでは、フォームに入力するためのフィールドを作ります。nameとmessageは投稿内容として「データ」配列に格納します。また、送信ボタンをbtn_submitという名前に指定して置き、ボタンをクリックしたかどうかを判定するために使います。

投稿するボタンをクリックした時に{時刻,名前,メッセージ}の順に配列へ格納します。

bbs.rdr

※ウェブアプリ
データファイルは「bbs.dat」
データファイルというファイルが存在すれば
	データファイルから「UTF8」で読み込んで配列化してデータとする
そうでなければ
	データは{}
そして
説明は「お名前とメッセージを入れて下さい」
要求から「btn_submit」という引数を取得して送信ボタンとする
送信ボタンが無でなければ
	要求から「message」という引数を取得してメッセージとする
	要求から「name」という引数を取得して、お名前とする
	メッセージの文字数が0でなければ
		データに{時刻,お名前,メッセージ}を加える
		データの内容をデータファイルへ「UTF8」で保存する
	そうでなければ
		説明は「メッセージを入れて下さい」
	そして
そして

本文は「」
データのすべての投稿についてそれぞれ繰り返す
	投稿すべてをHTML形式へ変換して変換後とする
	変換後(3)で改行を「<br>」に置換して変換後(3)とする
	本文は「<p>時刻:[変換後(1)]　名前:[変換後(2)]さん</p><p>[変換後(3)]</p><hr>」&改行&本文
そして

応答として「<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>掲示板</title>
</head>
<body>
<p>[説明]</p>
<form method="POST">
	<p>お名前：<input type="text" name="name" value="[お名前]"></p>
	<p>メッセージ：<br>
	<textarea name="message" rows="5" cols="40"></textarea>
	<p><input type="submit" name="btn_submit" value=" 投稿する "></p>
</form>
<hr>
[本文]
</body>
</html>
」を送る

ログインページを作る

今度は、ウェブアプリに必須なログインページを作ってみます。ユーザは最初にアカウントを登録して、登録したアカウントでログインするというアプリです。アカウントはデータベース(SQLite)で管理します。アカウントを登録すれば、各ユーザの情報をデータベースに記憶できます。

データベースには「ユーザ一覧」というテーブルを使います。「ユーザ一覧」テーブルには次のようなカラムを持つテーブルを作ります。

SQLiteを使ったデータベースを使い方は、(#16)データベース入門で紹介していますのでぜひご覧ください。

パスワードのハッシュ化

テーブルの「パスワード」には、パスワードそのもの(平文)ではなく、ハッシュ値を保存します。ハッシュ値は、平文からハッシュ計算した呪文(暗号の一種)です。ハッシュ計算では、同じ文字列からは同じ呪文を作れますが、呪文からもとに文字列を作ることはほぼ不可能です。

パスワードをそのまま平文で保存すると、もしデータベース情報が外部に漏洩した時のリスクになります。情報が洩れてもパスワードが使われないように、パスワードをハッシュ値として格納して元のパスワードが本人以外に分からないようにします。ハッシュ計算には「SHA512ハッシュ値を計算する」手順を使います。

HTMLへ出力する時のサニタイズ(エスケープ処理)

HTMLは、文字列でページの構成を記述します。HTMLには、タグという< >などの特別な意味を持つ記号があります。プロデルでHTMLへ出力する時に、変数などに格納した文字列に、これらの特別な記号が含まれていると、ページが意図せず壊れて表示されたり、悪意を持った利用者が悪質な細工をしたりする可能性があります。

それを防止するために、特別な記号を通常の文字として扱うように文字列をサニタイズ(エスケープ処理)する必要があります。サニタイズでは、< >などの特別な記号が&gt;, &lt;などの本来の記号を表すための表記に変換します。サニタイズするには「HTML形式へ変換する」手順を使います。

ログイン処理とセッション管理

ログインは、ユーザIDとパスワードを入力します。[ログイン]ボタンをクリックした時に、データベースからユーザIDとパスワードと合致するレコードを探します。ユーザIDとパスワードのどちらも合致するレコードが見つかった時だけログイン処理します。

レコードが見つかった時には、セッションに「ログインユーザID」と「ログインニックネーム」を記憶します。「ログインユーザID」が記憶されている時は、ログイン中であることが分かります。ログイン中の時には、ログイン後のページを表示するようにします。

ログアウトする時は、セッションをクリアします。セッションをクリアすると「ログインユーザID」と「ログインニックネーム」が消えるため、最初のログインページに戻します。

login.rdr (全ソースコード)

※ウェブアプリ
データベースというSQLiteデータベースを作る
データベースのデータソースを「data.db」に変える
データベースに接続する
[データベースから「SELECT COUNT(*) FROM sqlite_master WHERE type='table'」を取得したもの](1)(1)が0なら
	「CREATE TABLE ユーザ一覧 (ID TEXT PRIMARY KEY, ニックネーム TEXT, パスワード TEXT);」をデータベースで実行する
そして

情報メッセージは「」
要求から「btn_register」という引数を取得して送信ボタンとする
送信ボタンが無でなければ
	要求から「userid」という引数を取得してユーザIDとする
	要求から「nickname」という引数を取得してニックネームとする
	要求から「password」という引数を取得してパスワードとする
	ユーザIDの文字数が0かつパスワードの文字数が0でなければ
		パスワードから「UTF8」でSHA512ハッシュ値を計算してハッシュとする
		クエリは「INSERT INTO ユーザ一覧 (ID,ニックネーム,パスワード) VALUES (?,?,?)」
		パラメータは｛ユーザID,ニックネーム,ハッシュ｝
		クエリをパラメータとしてデータベースで実行する
		情報メッセージは「登録しました」
	そうでなければ
		情報メッセージは「ユーザIDまたはパスワードを入れて下さい」
	そして
そして
要求から「btn_login」という引数を取得して送信ボタンとする
送信ボタンが無でなければ
	要求から「userid」という引数を取得してユーザIDとする
	要求から「password」という引数を取得してパスワードとする
	ユーザIDの文字数が0かつパスワードの文字数が0でなければ
		パスワードから「UTF8」でSHA512ハッシュ値を計算してハッシュとする
		クエリは「SELECT ID, ニックネーム FROM ユーザ一覧 WHERE ID=? AND パスワード=?」
		パラメータは｛ユーザID,ハッシュ｝
		データベースからクエリをパラメータとして取得して、ユーザとする
		ユーザの個数が0より大きければ
			応答として「ログインユーザID」というセッション項目へユーザ(1)(1)を設定する
			応答として「ログインニックネーム」というセッション項目へユーザ(1)(2)を設定する
			情報メッセージは「ログインしました」
		そうでなければ
			情報メッセージは「ログインに失敗しました」
		そして
	そうでなければ
		情報メッセージは「ユーザIDまたはパスワードを入れて下さい」
	そして
そして
要求から「mode」という引数を取得してモードとする
モードが「logout」なら
	応答としてセッション項目をクリアする
	応答として「?」へリダイレクトする
そして

要求から「ログインユーザID」というセッション項目を取得してログインユーザIDとする
要求から「ログインニックネーム」というセッション項目を取得してログインニックネームとする

応答として「<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>ログイン</title>
</head>
<body>」を送る
情報メッセージの文字数が0より大きければ応答として「<p>[情報メッセージ]</p>」を送る
ログインユーザIDが無なら
	応答として「<h1>ログイン</h1>
<form method="POST">
	<p>ユーザID: <input type="text" name="userid" value=""></p>
	<p>パスワード: <input type="password" name="password" value=""></p>
	<input type="submit" name="btn_login" value="ログイン">
</form>
<hr>
<h2>アカウント登録</h2>
<form method="POST">
	<p>ユーザID: <input type="text" name="userid" value=""></p>
	<p>パスワード: <input type="password" name="password" value=""></p>
	<p>ハンドルネーム: <input type="text" name="nickname" value=""></p>
	<input type="submit" name="btn_register" value="登録">
</form>」を送る
そうでなければ
	応答として「<p>[ログインニックネームをHTML形式へ変換したもの]さん、こんにちは</p>
<p><a href="?mode=logout">ログアウトする</a></p>」を送る
そして
応答として「</body>
</html>」を送る

login.rdrをブラウザで開き、まず下部の「アカウント登録」にて、ユーザID、パスワード、ハンドルネームを入力して[登録]します。その後、上部のログインフォームに、登録したユーザIDとパスワードを入力して[ログイン]します。

ログインすると、ハンドルネームと共に「ログアウト」リンクが表示されます。

つぶやきを投稿するSNSを作る

さらに今度は、会員制の短文ブログサービス「P」を作ってみます。アカウント登録したユーザは、つぶやきを「プイート」すると、その投稿をログインしている他の参加者が見られるアプリです。投稿には、いいねを付けることもできます。

データベースには、3つのテーブル「ユーザ一覧」「プイート一覧」「いいね一覧」を作ります。

「P」アプリのアカウント登録部分とログイン部分は、先ほどのログインページとほぼ同じです。ただ、データベースの読み書きにできるだけ「データ表」を使ってみます。例えば基本的な操作にはデータ表を使い、複雑な操作にはSQLを使うなど、必要に合わせた使い分けることもできます。SQLを使ってデータベースを操作する場合は、SQLインジェクション対策として、フォームの入力内容が直接SQLに入らないように必ずバインド変数を使って、利用者側でSQLを書き換えられないようにしてください。

p.rdr (全ソースコード)

「P」アプリのプログラムは、次の通りです。シンプルなデザインですが基本的な機能なら160行ほどで作れます。

プログラム中にはSQLやHTMLが含まれます。読み書き操作をSQLで書いたり、最低限のHTMLを出力するように作っています。これらの部分の意味を完全に理解するためには、それらの関する知識も必要ですが、ここでは大きな動きだけを理解できれば大丈夫です。

またプログラム中にコメントは書きませんでしたが、その分、プログラムの一部を役割ごとに手順で整理して、分かりやすくしてみました。手順にまとめることでコメントのような役割を持たせることができるのは日本語プログラミング言語の良さです。

※ウェブアプリ
データベースというSQLiteデータベースを作る
データベースのデータソースを「pwitter.db」に変える
データベースに接続する
[データベースから「SELECT COUNT(*) FROM sqlite_master WHERE type='table'」を取得したもの](1)(1)が0なら
	「CREATE TABLE ユーザ一覧 (ID TEXT PRIMARY KEY, ニックネーム TEXT, パスワード TEXT);」をデータベースで実行する
	「CREATE TABLE プイート一覧 (ID INTEGER PRIMARY KEY AUTOINCREMENT, ユーザID TEXT REFERENCES ユーザ一覧(ID), テキスト TEXT, 投稿日時 DATETIME);」をデータベースで実行する
	「CREATE TABLE いいね一覧 (ユーザID TEXT REFERENCES ユーザ一覧(ID), プイートID INTEGER REFERENCES プイート一覧(ID), UNIQUE (ユーザID, プイートID));」をデータベースで実行する
そして
ユーザ一覧テーブルというデータ表を作る
ユーザ一覧テーブルの名前は「ユーザ一覧」
データベースからユーザ一覧テーブルへ取得する

プイート一覧テーブルというデータ表を作る
プイート一覧テーブルの名前は「プイート一覧」
データベースからプイート一覧テーブルへ取得する

情報メッセージは「」
要求から「btn_register」という引数を取得して登録ボタンとする
要求から「btn_login」という引数を取得してログインボタンとする
要求から「mode」という引数を取得してモードとする
登録ボタンが無でなければ
	アカウントを登録する
他でログインボタンが無でなければ
	ログインする
他でモードが「logout」なら
	応答としてセッション項目をクリアする
	応答として「?」へリダイレクトする
そして

要求から「ログインユーザID」というセッション項目を取得してログインユーザIDとする
要求から「ログインニックネーム」というセッション項目を取得してログインニックネームとする

ログインユーザIDが無でなければ
	要求から「btn_pweet」という引数を取得して投稿ボタンとする
	投稿ボタンが無でなければ
		プイートする
	他でモードが「like」なら
		いいねする
	そして
	いいねをカウントする

	本文を組み立てる
そして

応答として「<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>P</title>
</head>
<body>」を送る
情報メッセージの文字数が0より大きければ応答として「<p>[情報メッセージ]</p>」を送る
ログインユーザIDが無なら
	応答として「<h1>Pログイン</h1>
<form method="POST">
	<p>ユーザID: <input type="text" name="userid" value=""></p>
	<p>パスワード: <input type="password" name="password" value=""></p>
	<input type="submit" name="btn_login" value="ログイン">
</form>
<hr>
<h2>Pアカウント登録</h2>
<form method="POST">
	<p>ユーザID: <input type="text" name="userid" value=""></p>
	<p>パスワード: <input type="password" name="password" value=""></p>
	<p>ハンドルネーム: <input type="text" name="nickname" value=""></p>
	<input type="submit" name="btn_register" value="登録">
</form>」を送る
そうでなければ
	応答として「<h1>短文ブログ"P"</h1>
<p><a href="?mode=logout">[ログインニックネームをHTML形式へ変換したもの]さん。ログアウトする</a></p>
<form method="POST">
	<p><input type="text" name="message" value="" placeholder="どうしてる?">
	<input type="submit" name="btn_pweet" value=" 投稿する "></p>
</form>
<hr>
[本文]
」を送る
そして
応答として「</body>
</html>」を送る

プイートする手順
	要求から「message」という引数を取得してメッセージとする
	メッセージの文字数が0でなければ
		プイート一覧テーブルに｛「ユーザID」=ログインユーザID,「テキスト」=メッセージ,「投稿日時」=今｝を追加する
		データベースでプイート一覧テーブルを更新する
		プイート一覧テーブルをクリアする
		データベースからプイート一覧テーブルへ取得する
		情報メッセージは「投稿しました」
	そして
終わり

本文を組み立てる手順
	本文は「」
	プイート一覧テーブルの一覧のすべての投稿についてそれぞれ繰り返す
		投稿すべてをHTML形式へ変換して変換後とする
		変換後(3)で改行を「<br>」に置換して変換後(3)とする
		本文は「<h4 id="p[投稿(1)]">[変換後(2)]さん　<small>[変換後(4)]</small></h4><p>[変換後(3)]</p>
<p><a href="?mode=like&amp;pweetid=[投稿(1)]#p[投稿(1)]">[いいねカウント辞書(投稿(1))]いいね</a></p>
<hr>」&改行&本文
	そして
終わり

ログインする手順
	要求から「userid」という引数を取得してユーザIDとする
	要求から「password」という引数を取得してパスワードとする
	ユーザIDの文字数が0かつパスワードの文字数が0でなければ
		パスワードから「UTF8」でSHA512ハッシュ値を計算してハッシュとする
		クエリは「SELECT ID, ニックネーム FROM ユーザ一覧 WHERE ID=? AND パスワード=?」
		パラメータは｛ユーザID,ハッシュ｝
		データベースからクエリをパラメータとして取得して、ユーザとする
		ユーザの個数が0より大きければ
			応答として「ログインユーザID」というセッション項目へユーザ(1)(1)を設定する
			応答として「ログインニックネーム」というセッション項目へユーザ(1)(2)を設定する
			情報メッセージは「ログインしました」
		そうでなければ
			情報メッセージは「ログインに失敗しました」
		そして
	そうでなければ
		情報メッセージは「ユーザIDまたはパスワードを入れて下さい」
	そして
終わり

アカウントを登録する手順
	要求から「userid」という引数を取得してユーザIDとする
	要求から「nickname」という引数を取得してニックネームとする
	要求から「password」という引数を取得してパスワードとする
	ユーザIDの文字数が0かつパスワードの文字数が0でなければ
		ニックネームの文字数が0ならニックネームは、ユーザID
		パスワードから「UTF8」でSHA512ハッシュ値を計算してハッシュとする
		ユーザ一覧テーブルに｛「ID」=ユーザID,「ニックネーム」=ニックネーム,「パスワード」=ハッシュ｝を追加する
		データベースでユーザ一覧テーブルを更新する
		情報メッセージは「登録しました」
	そうでなければ
		情報メッセージは「ユーザIDまたはパスワードを入れて下さい」
	そして
終わり
いいねする手順
	要求から「pweetid」という引数を取得してプイートIDとする
	クエリは「SELECT プイートID FROM いいね一覧 WHERE ユーザID=? AND プイートID=?」
	パラメータは｛ログインユーザID,プイートID｝
	データベースからクエリをパラメータとして取得して、いいねレコードとする
	いいねレコードの個数が0なら
		クエリは「INSERT INTO いいね一覧 (ユーザID,プイートID) VALUES (?,?)」
	そうでなければ
		クエリは「DELETE FROM いいね一覧 WHERE ユーザID=? AND プイートID=?」
	そして
	クエリをパラメータとしてデータベースで実行する
	応答として「?」へリダイレクトする
終わり
いいねをカウントする手順
	クエリは「SELECT プイートID, COUNT(ユーザID) FROM いいね一覧 GROUP BY プイートID」
	データベースからクエリを取得して、いいね一覧とする
	いいねカウント辞書という辞書を作る
	いいね一覧のすべての項目についてそれぞれ繰り返す
		いいねカウント辞書(項目(1))は、項目(2)
	そして
終わり

ウェブアプリのテンプレートを使う

プロデルでウェブアプリを作ると、HTMLのビュー部分と、プロデルプログラムのロジック部分が混在してるソースコードになります。

PSPT(プロデル サーバページテンプレート)というひな形を使うと、ビューとロジックが混在しないようにHTMLとプログラムを別々のファイルで管理できます。また、ヘッダーやフッターなどレイアウトの共通部分と、ページごとに変化する本文部分とで、別々のファイルにも分けられます。PSPTは、プロデルのサンプルフォルダに用意されています。

PSPTでビューとロジックを整理すると、ウェブアプリが作りやすくなりますのでご活用ください。

index.rdr

最初に表示するアプリのメインプログラムです。ここにはロジックを書きます。このファイルでページ単位で種類を定義しておきます。種類では、HTML部分を表すテンプレートファイルやコンテントファイルを設定します。さらに例えばデータベース操作などを記述して結果を変数に設定しておきます。

// プロデル サーバページテンプレート(PSPT) //
※ウェブアプリ
「pspt.rdr」を参照する
トップページを表示する

トップページとは
	ページを継承する
	はじめの手順
		テンプレートファイルは「layout.pspt」
		「タイトル」として「テンプレートのテスト」を設定する
		「コンテントファイル」として「index.pspt」を設定する
		「果物一覧」として｛「りんご」,「なし」,「バナナ」｝を設定する
	終わり
終わり

テンプレート\layout.pspt

.psptファイルにはビューを記述します。layout.psptではページの共通の土台となるレイアウトをHTMLとして書いておきます。.psptファイルは、プロデルの文字列式と同じように、インライン展開した式を指定できます。事前に変数を設定しておくことで、指定した式の部分が、変数の値や式の評価結果で表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title>[タイトル]</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
	<a class="navbar-brand" href="#">[タイトル]</a>
</nav>
<main role="main" class="container">
[コンテントファイルを展開する]
</main>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

テンプレート\index.pspt

同じくトップページの本文部分のビューを記述します。「展開する」手順を使うことでロジックで設定した配列の内容を、簡単に列挙して出力できます。

	<h1>[タイトル]</h1>
	<p>果物屋さんへようこそ！</p>

	<h2>果物一覧</h2>
	<table class="table table-bordered">
	 [果物一覧のすべての「果物」を『<tr><td>[果物]</td></tr>』へ展開したもの]
	</table>

このように、PSPTを使ってロジックとビューを別々に管理できますので、ぜひご活用ください。

ウェブアプリを公開するには

プロデルデザイナで実行したウェブアプリは、自分のPCでのみアクセスできます。開発したウェブアプリを、スマホなどのデバイスや他の利用者から利用できるようにするには、ウェブサーバ上にウェブアプリを公開(デプロイ)する必要があります。

公開するウェブサーバにプロデルウェブサーバをインストールしてサービスとして起動しておくことで、プロデルのウェブアプリを公開できます。サーバ構築の知識が必要ですが、CentOSなどのLinux系のOSでもプロデルのウェブアプリが動作しますので、気軽に始められます。

ウェブサーバは、自分でサーバを構築して公開する方法や、VPSやクラウドサービスを契約してウェブサーバを公開する方法があります。

前者の場合、例えばRaspberry Piなどの小型コンピュータでもプロデルのウェブアプリを動作させて、自宅内や組織内で使うだけのウェブアプリの活用に使えます。

後者の場合、有償のサービスがほとんどですが、格安で400円/月程度で利用できます。なお、さらに格安なブログ専用のサービスや、共有サーバのサービスでは、プロデルウェブサーバがインストールできないためご注意ください。

まとめ

今回はプロデルでウェブアプリを作る方法をご紹介しました。プロデルにはデータベースアクセスやJSON形式などWebアプリに必須な機能が一通りそろっています。ぜひプロデルを使って日本語でウェブアプリを作ってみてください！

関連ページ

※当ブログの記事の著作権はゆうとにあります。プロデルに関係が無い目的で、文章や図表,プログラムを複製, 改変, 移植して掲載することを堅く禁止します

  • いいね (0)
  • 続編を読みたい (0)
こんな記事もあります