4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

日本語プログラミング言語でWebアプリを作ろう☆

Posted at

皆さんのプログラミングのルーツは何ですか?
私は「日本語プログラミング言語 ひまわり( https://kujirahand.com/himawari/ )」です。

2023年ももうすぐ終わりですね。年末は実家に帰る人も多いのではないでしょうか。そういうわけで、私のプログラミング人生における実家のような存在 ひまわりを使って、簡単なWebアプリを作ってみました(無理やりすぎる導入)

ひまわりとは??

「himawari.jpg」を、画像表示。文字色は、オレンジ色「ひまわりだよ」と、表示。と表示されたエディタとひまわりの画像が表示された実行結果画面
ひまわりの開発環境

ひまわりとは、日本語を使ってプログラムを書くことができる「日本語プログラミング言語」というジャンルに属する言語です。似たような言語には他に「なでしこ」「プロデル」などがあります。

日本語プログラミング言語というと、なんとなく「初学者向け」という感じがして、勉強用の言語みたいなイメージを持たれがちですが、ひまわりは「誰でも簡単に仕事や定型処理を効率化できるプログラムが書ける言語」みたいなコンセプトだったかと思います。
(作者のコメントはhttps://kujirahand.com/himawari/hima-book/index.htm 等に書いてあります)

Win32向けのデスクトップアプリケーションを手軽に開発できる素晴らしい言語です。

注意
ひまわりは既に開発終了した言語で、HiDPI環境に対応していない、HTTPS通信に対応していない等、2023年現在も引き続き使用するには不便な部分があります。そもそも対応OSはWindows98~Vistaまでで、Windows7すら正式対応していません。

ひまわりでWebアプリを作ってみよう

先に示した通り、ひまわりはWindowsのデスクトップアプリを作るための言語なので、HTTPサーバーを動かしたり、リクエストをパースしたりするような便利な機能はありません。使えそうなのは簡単な文字列処理機能とTCP/IP通信の関連機能くらいです。

HTTP通信ができるようにする

早速、超簡易的なWebサーバーを立ててみましょう。

TCPポート=10001
TCPサーバー起動
受信ラベルに、TCPサーバー受信処理設定
待機

*受信ラベル
// TCP送信元: IPアドレス,HOST名
// TCP文字列: 通信内容(今回だと、HTTPリクエスト内容)
TCP送信元を、「,」で、区切る
クライアントは、それ#0

「{クライアント}から{TCP文字列#0}の要求」を、表示

レスポンスは、「HTTP/1.1 200 OK
Content-Type: text/plain

{今}にリクエストを処理しました」
クライアントへ、レスポンスを、TCPサーバー送信
クライアントを、TCPサーバーから切断。
待機

「それ」というのはひまわりの一時変数で、命令の計算結果が保管されます。例えば、以下のような感じですね。

「今日の元気は?」を、「元気\nまあまあ」の、ボタンで選択 // 元気 or まあまあ のいずれかを選択するダイアログが出てくる
それを、表示 // 押した結果が画面に表示される

めちゃくちゃ日本語なので、なんとなく流れは分かりやすいのではないでしょうか?

動かしてみると、こんな感じになります。

image.png

ルーティング

次にルーティングの実装をしてみましょう。
HTTPリクエストの1行目は、以下のようになっています。

{メソッド} {ルート} {プロトコル}
// 例: "GET / HTTP/1.1"

なので、1行目の真ん中の値を見れば、クライアントの要求しているページが分かります。
これを使って、要求のルーティングを行ってみましょう。

// TCP文字列 = HTTPリクエスト
TCP文字列#0を、「 」で、区切る
リクエスト内容は、それ // e.g. ["GET", "/", "HTTP/1.1"]のような配列

リクエスト内容#0で、条件分岐
「GET」の時、リクエスト内容#1を、GETルーティング
その他の時、それは、404

それで、条件分岐
404の時、ホストへ、『<html><body>404 Not Found</body></html>』を、404で、レスポンス送信
その他の時、ホストへ、それを、200で、レスポンス送信


待機

*GETルーティング(?を)
引数取得

それで、条件分岐
「/」の時、(
	トップページ取得 // 「それ」にトップページのHTMLが返されるラベル
    戻る
)
その他の時、(
	それは、404
    戻る
)

戻る

これで、「/」にアクセスした時はトップページを、それ以外にアクセスしたときは404を返すようになりました。
ひとまずGETリクエストは基本こんな感じで捌けるようになりましたね。

注意
これだけだと、URLにクエリパラメータ等がついた場合等に正常なルーティングが出来なくなりますが、今回は記事が冗長になってしまうため割愛します。

POSTに対応させる

Webアプリと名乗るからには双方向のコミュニケーションができた方が良いですね。ですので、ブラウザからのPOSTリクエストに対応させましょう。

新しいリクエストの分岐を追加します。先のコードのリクエスト内容#0で、条件分岐の下に以下を追加します。

// TCP文字列 = HTTPリクエスト
// リクエスト内容: ["POST", "/", "HTTP/1.1"]のような配列

「POST」の時、(
    TCP文字列の、行数
    それは、それ-1
    リクエスト内容#1を、TCP文字列#それと、POSTルーティング
)

TCP文字列#それはHTTPレスポンスボディを参照しています。

リクエスト内容#1(ルートパス)とTCP文字列#それ(レスポンスボディ)を引数にしてPOSTルーティング ラベルを呼び出していますね。

次にPOSTルーティングラベルを実装して行きましょう。

*POSTルーティング(?を、?と)
引数取得

ルートは、それ#0
それ#1を、「--url-input」で、NKF変換。 // nkf(Network Kanji Filter)を使ってURLをデコードする
それの、「=」を、「,」に、置換
それを、「&」で、区切る
内容は、それ

// XSS対策
内容で、「<」の、出現回数。
もし、それが、1以上ならば、(
	それは、「使用不可な文字が含まれています」
    戻る
)

ルートで、条件分岐
「/」の時、(
	内容を、投稿処理 // DBに内容が保存され、投稿完了画面が「それ」に格納されるラベル
    戻る
)
その他の時、(
	それは、404
    戻る
)

戻る

以下の部分がちょっと分かりづらいので補足します。

それ#1を、「--url-input」で、NKF変換。 // nkf(Network Kanji Filter)を使ってURLをデコードする
それの、「=」を、「,」に、置換
それを、「&」で、区切る
内容は、それ

これは力技でクエリパラメータを2次元配列(内容)に格納する処理です。

注意
POST内容に,=が含まれていた場合は正常に動作しなくなると思うので、本当はもっと良いアプローチをするべきです。

name=avaice&message=helloのような文字列を

name,avaice
message,hello

のように書き換えています。

補足

ひまわりでは、2次元配列は以下のような文字列として表現されます。

変数:Foods
みかん,100
うなぎ,1500
アジフライ,150

Foods#1#2なら「150」といった感じです。ちょっと紛らわしいのは、インデックスの指定がJavaScriptやC言語と逆でArray[横][縦]の向きであることです。

これでGET, POSTどちらも行えるようになりましたね。

実際に完成したデモ

上記のようにWebサーバーを実装して、簡単な掲示板を作ってみました。

himabbs.gif

ソースコードは以下にあります。

ぱっと見日本語で書かれたWebアプリとは思えないですね!?

ちなみにこれは自宅サーバーでデプロイしているのですが、OSがUbuntuなのでWineを使ってサーバーを動かしていますw

image.png

おわりに

今回は「日本語プログラミング言語でWebアプリを作ろう」ということで面白半分で掲示板を作ってみました。

しかし、ひまわりのような日本語プログラミング言語が真に輝くのは定型的な文章整形処理(一意なフォーマットで渡された文字列から、文章を生成する・・のような)や自動化処理(マウスやキーボードを自動操作する)といった場面です。

ひまわりはサポートは既に終わっているので使用は自己責任ですが、「なでしこ」や「プロデル」等ほかの言語は今でも活発に開発が続けられています。この機会に是非触れてみてはいかがでしょうか!?

4
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?