こんな記事もありますTweet今日は、プロデルWebサーバを使ってメッセンジャーアプリを作ってみます。メッセンジャーアプリとは特定の相手と文章をやりとりするためのソフトです。代表的な物には、LINEのチャットやTwitterのDM、Skypeや、かつてのMSNメッセンジャーなどがあります。今回と次回の全2回で、メッセージをやりとりするためのWebアプリ(サーバ側)とデスクトップアプリ(クライアント側)の両方をプロデルで作ってみようと思います。記事投稿当時から1.6.957までで開発版よりも古いバージョンの簡易Webサーバが配布されており、掲載しているプログラムがそのままでは動作しない状態だったことがわかりました。問題は1.6.958で修正済みです。構成を考えるメッセンジャーアプリは、Webアプリ(サーバ側)とデスクトップアプリ(クライアント側)に分けて作ることにします。やりとりするメッセージは、すべてサーバ側のデータベースに格納します。クライアント側では自分に届いたメッセージを表示したり、指定した相手にメッセージを送ったりします。プロデル簡易Webサーバプロデル簡易Webサーバは、プロデルのプログラムが実行できる簡易的なWebサーバです。HTMLやCSS、画像を送ることに加えて、プロデルのプログラムを開くと実行された結果を送れます。簡易Webサーバを使うと、プロデルでWebアプリを作ることができます。CGI版を使うことで、ApacheやNginxでもプロデルを動かせます。CentOSなどのLinuxでも動作しますのでVPSなどで公開することもできます。プロデルでWebアプリを作るにはでは早速、プロデル簡易Webサーバを使ったWebアプリを作ってみましょう。簡易Webサーバは、スタートボタンから起動できます。起動すると、管理画面が表示されます。管理画面で、公開フォルダをマイドキュメントなどのプロデルのプログラムを置くフォルダに変えておきます。簡単なWebアプリを作ってましょう。設定した公開フォルダに「post.rdr」という名前で、次のプログラムを保存します。入力してページを開きます。ページを開くと、このプログラムがWebサーバ上で実行されて、結果がページとして表示されます。簡易Webサーバではアクセスするプロデルプログラムの文字コードがHTMLと一致している必要があります。このブログではHTMLで文字コードとしてUTF-8を指定していますので、.rdrファイルもUTF-8形式で保存して下さい。プロデルデザイナでは、ステータスバーの右下で切り替えることができます。このページでは、テキストボックスと送信ボタンが表示されます。テキストボックスに文字を入力して送信ボタンをクリックすると、入力した文字が表示されます。※Edgeではセキュリティ強化のために、自分のPCにサーバがある場合、正しいアドレスを指定してもページが表示できない設定になっています。表示されない場合には、アドレスバーに「about:flags」と入力して設定ページには「localhostループバックを許可する」にチェックしてください。Webアプリを作るために必要な機能プロデルでWebアプリを作る時には、「要求」種類と「応答」種類を使います。プロデルWebサーバでプログラムを実行すると、その時に限りプログラムの中で「要求」変数と「応答」変数が使えるようになります。「要求」変数には、Webブラウザ(クライアント側)から送られてきたリクエストの内容が格納されています。要求の内容には、フォームに入力したフィールドの内容やクエリ引数の情報、アクセスしたWebブラウザの情報(ヘッダ)が格納されています。今回使う「要求」種類の手順は、次の2つです。フィールド値はフォームに入力された内容で、クエリ引数はアドレスに付加された内容です。要求から【フィールド名】というフィールド値を得たもの要求から【引数名】というクエリ引数を得たもの一方「応答」変数には、Webブラウザへ送るレスポンスの内容を設定します。表示するページのHTMLやクッキー情報などのヘッダを設定できます。今回使う「応答」種類の手順は、次のとおりです。応答として【内容】を送る「送る」手順の【内容】には、Webブラウザに送るHTMLを指定します。「post.rdr」では、「要求」種類の「フィールド値を得る」手順で入力された文字列を取得して、「応答」種類の「送る」手順でHTMLと共に、入力された文字列をWebブラウザへ送信します。SQLiteを利用するメッセンジャーWebアプリでは、メッセージをデータベースで管理します。SQLiteといった主要なデータベースエンジンへアクセスするための種類が用意されています。今回は、その中でもSQLiteというデータベースを使います。SQLiteは、ファイル形式のSQL系データベースです。別途データベースサーバをインストールしたり設定したりする必要が無く、手短にデータベースを扱えます。プロデルでは、「SQLiteデータベース」種類を使ってSQLiteデータベースへアクセスできます。データベースには「メッセージ」という名前のテーブルにメッセージを格納します。このテーブルには、1件のレコードにつき、次のような4つのフィールドを持たせることにします。プロデルでこのテーブルにレコードを挿入して、その内容を取得するプログラムを作ってみます。簡単なWebページは作りましたが、それはひとまず置いておいて、テーブルを操作するだけのプログラムを別に作っておきましょう。一つのプログラムの中でいろいろな事をすると、何か問題があった時に混乱します。最初はやりたいこと別にプログラムを分けて作ることをおすすめします。DESC」」をデータ表として取得してデータとするSQLiteから切断するデータの行一覧すべてを辞書化して報告する「SQLiteデータベース」種類では主に次の手順を使います。【SQL文】を【バインド値】としてSQLiteで実行するSQLiteから【SQL文】をデータ表として取得してデータとするSQLiteでは、データベースの操作にSQL文を使います。SQL文を通してテーブルに対して、行を挿入(INSERT)したり取得(SELECT)したりします。テーブルのレコード(行)を挿入・変更するには、「実行する」手順を使います。この手順は、結果を伴わないSQL文の時に使います。格納したレコードの内容を取得したい時には、「データ表として取得する」手順を使います。取得した内容は、「データ表」種類のオブジェクトとして格納されていて、一行ずつ取り出したり、二次元配列で取得したりできます。データベースは、「database.db」というファイル名で保存することにします。初回などdatabase.dbが存在しないときはCREATE文でテーブルを作るようにしておきます。「実行する」手順では、クエリ文字列とバインド配列の2つを指定します。上記のプログラムの「//レコードを追加する」部分では、クエリ文字列の「?」とバインド値の要素が対になって指定されています。これをバインド変数といいます。実行する際には、クエリ文字列の「?」の部分が配列の要素の内容に順番に置き換わって実行されます。SQLiteで実際に実行されるSQL文は、次のようになります。12:01:05')少しわかりにくい書き方ですが、このようにバインド変数を使うことでSQL文が意図せず改ざんされるSQLインジェクションを防止することができ、より安全なWebアプリになります。メッセンジャーWebアプリを作るでは、実際にメッセンジャーWebアプリ(messenger.rdr)を作ってみましょう。このWebアプリで必要なのは次の機能です。現在日時を新しいレコードとしてテーブルに挿入するSQLiteのデータベースの「メッセージ」テーブルから「名前」または「相手」が「私の名前」のメッセージを取得するWebブラウザでフォームのボタンをクリックすると、フィールドに入力された値がWebサーバに送信されます。この時のフォーム上のフィールド名は次のように対応しています。※なお仕組みが簡単になるように[ログイン]ボタンだけGETメソッドしています。このようにすることでURLクエリ引数として扱われるようになります1.メッセージを挿入するメッセージが送信されたかどうかは、「要求」の「mode」フィールド値が「write」になっているかどうかで判断します。【私の名前】は、[要求から「myname」というクエリ引数を得たもの]処理モードは、[要求から「mode」というフィールド値を得たもの]もし私の名前が無または私の名前が「」なら説明は、「ログインしてください。HH:mm:ss」に整えたもの]}クエリをバインド値としてSQLiteで実行するそうでなければ説明は、「相手とメッセージを入れて下さい」もし終わりそうでなければ説明は、「相手とメッセージを入れて送信ボタンをクリックして下さい」もし終わり先ほどの2つのプログラム例を組み合わせて、「フィールド値を得たもの」で取得したフォームの入力内容を、レコードとしてテーブルへ挿入します。2.メッセージを取得してWebページとして出力する次にSQLiteの「取得する」手順でメッセージを取得します。取得したメッセージは、「データ表」の「行一覧」で一行ずつ取り出します。その際に、行の内容を「辞書化」することで、一つ一つのメッセージの送信者と相手、本文を取り出しやすいようにします。[投稿の「本文」]」を加える繰り返し終わりWebブラウザに表示するページは、HTMLとして出力します。HTMLの文法も理解しないといけませんので、今回はシンプルなHTMLだけを送信することにします。]で囲うことで、その変数の内容をページに表示させることができます。value="送信する"></form><hr>[結果を「<br>」で繋げたもの]</body></html>」を送るWebアプリ完成!これでメッセンジャーWebアプリが出来上がりました。「http://localhost/messenger.rdr」などと入力してWebアプリを開きます。自分の名前を入力して[ログイン]ボタンをクリックします。「相手」「メッセージ」欄へ内容を入力して[送信する]ボタンをクリックします。すると、ページにメッセージが表示されます。メッセージを変えたり、ログインする名前や送り先の相手を変えたり、複数のブラウザでアクセスしたりして、投稿したメッセージが表示されることをテストしてみて下さい。メッセンジャーWebアプリ(messenger.rdr)のプログラム全文は、次の通りです。【私の名前】は、[要求から「myname」というクエリ引数を得たもの]//レコードを追加する処理モードは、[要求から「mode」というフィールド値を得たもの]もし私の名前が無または私の名前が「」なら説明は、「ログインしてください。value="送信する"></form><hr>[結果を「<br>」で繋げたもの]</body></html>」を送るWebAPI化する完成したメッセージWebアプリは、Webブラウザを通してメッセージを送信したり閲覧したりできます。これだけでも十分遊べますが、次回に向けて、デスクトップアプリからも利用できるようにします。WebアプリをWebAPI化して「メッセンジャーAPI」として改良しておきましょう。WebAPIとはサーバが提供する機能に、クライアントからアクセスするためのインタフェイスのことです。次回のデスクトップアプリでは、APIを通じてメッセージを送信したり受信したりします。WebAPIでは、サーバとクライアントとの通信に、HTMLの代わりにJSON形式を使います。Notation)は、JavaScriptで利用することを想定したデータ形式ですがWebAPIでは標準的な形式の一つになっています。プロデルでは、「JSON形式」種類を利用すると、辞書からJSONデータを生成したり、逆にJSONデータから辞書します。メッセンジャーAPIでは、次のような機能を用意します。指定した日時(クライアントが最後に受信した日時)以降に送信されたメッセージを取得するContentTypeを「application/json」に設定して、メッセージ内容をJSON形式で送る「api.rdr」という名前でメッセンジャーAPIのプログラムを作ります。TEXT);」」を実行するもし終わり【私の名前】は、[要求から「myname」というクエリ引数を得たもの]処理モードは、[要求から「mode」というフィールド値を得たもの]もし私の名前が無または私の名前が「」なら「ログインしてください。続くapi.rdrの冒頭は、必要な値がない時にエラーを発生されている点が異なりますが、ほぼmessenger.rdrと同じです。次の「//レコードを取得する」部分では、updateというフィールドが指定されているときに、指定された日時以降のメッセージだけを取得するようにSQLの「WHERE」句を指定しています。」などとアクセスすると、JSONの内容をツリー構造で確認できます。まとめ今回は、プロデル簡易Webサーバを使って、プロデルでメッセンジャーWebアプリを作ってみました。Webアプリの作り方やSQLiteの取り扱いなど内容が多岐にわたりましたが、Webアプリで典型的な構成をプロデルで実現しました。プログラミング言語やアプリの種類に寄らず多くのWebアプリがこの構成で作られていますので、これを改良して色々なWebアプリが作れると思います。SQLやHTMLについては、説明できませんでしたが、ネットで調べるとたくさんの解説記事が載っています。よかったらそちらも参考にしてプログラムをよりカッコよく改良して欲しいと思います。次回は、クライアント編として、WebAPI化したWebアプリを使ってメッセンジャーデスクトップアプリを作ってみます。コメントをキャンセルコメントを投稿するにはログインしてください。826件閲覧リンクプロデルトップ筆者プロフィールご質問は掲示板へお願いしますブログ記事に関連する機能のご質問や不具合は、公式掲示板にてお願いします。