ログイン画面表示

ログイン画面を表示するところまで進んだ。

まず画面を消去して、

フォームを画面の中央、上から少し下に表示。

そこにシステム名を表示し

ログインIDとパスワードの入力、

エラーメッセージ表示領域、

中止ボタン、ログインボタンを入れたボタン領域、

これらをjavascriptで実現。

今後も共通で使えそうな描画関数をライブラリとして分離し

cssも変更しやすい用にクラス設定した。

この実装方法は今後進むにつれて大きく変わっていくが、

常に自動プログラミングを意識して揃えていく。

ひとまず表示はできたので、

いよいよログインボタンをクリックされた後の動きの実装に移る。

フォームのイベントで決められた処理を実行し、

その結果によるイベントで次の処理を実行する。

この流れを実現するコントローラをどう実装するかが

難題であり楽しみでもある。

デバッグ用ポップアップウインドウ

サンプルプログラムの実装を進めるにあたって

デバッグ情報を表示するウインドウを用意することにした。

オブジェクトの内容を出力するにはコンソールの方が楽だけど

デベロッパーツールを開かなくても表示できるのは便利だ。

このウインドウは最上位に表示し移動できるようにする必要がある。

こう考えて実装しているとアプリケーションで普通に使う

ポップアップウインドウを同じ機能を持たせ共通にしたくなる。

そこをじっと堪えてデバッグ専用にしてサンプルの実装を急ぐこととする。

それでもライブラリを作る際の参考になるはず。

バックエンド主導で実装開始

ブラウザでindex.htmlをアクセスすることによりWebアプリが起動し

バックエンド主導で表示するページやその内容を決定されるように

実装を始めた。

当初、機能毎にバックエンドプログラムを分離する予定だったが

実装開始後、即座に方針転換することになったが

なんとかスタートできた。

これからも試行錯誤を繰り返しながら、

ミニマムサンプルアプリと言えるようなものにしていく。

バックエンド主導の構成を検討

バックエンド主導とした場合の実装方法を決めるため

ログイン画面を出し、ログインに成功して、

トップ画面が表示されるまでを机上で追った。

ブラウザがURLを叩いてからバックエンドが何を行い

ブラウザが何を行うか。

アプリケーションを構成する単位を機能、ページ、フェーズ、ブロック、パーツに分け

どう共通化し、どう生成し破棄するかを検討した。

そして、今回実現しようとする自動プログラミングの位置付けと流れを決めた。

まだまだ暫定的であり、頭の中で妄想したレベルだが方向性は決まった。

以後、実装を進め、行き詰まったら再度検討する。

バックエンドとフロントエンドの役割分担

Webアプリの起動時にトップ画面を表示する場合

それがログインが必要な画面の場合は

ログイン画面を表示し、認証に成功したら

トップ画面を表示することになる。

ここまでの流れをバックエンドとフロントエンドで

協調して実現することになるが、

そのやり方、考え方は何通りもある。

有名な種々のフレームワークで共通しているのか

それぞれ独自の考えがあるのか知らないが

自分なりに考えを整理して現時点でのベストチョイスを探す。

それが既存のフレームワークと同じになる可能性もあるし

思慮が不足していて危ない欠陥フレームワークになる可能性もある。

最後の最後はメジャーなフレームワークを採用することになるにしても

自分なりに考え自分で組み立ててみてこそ

そのフレームワークの仕組みが理解でき活用できると考える。

これは「車輪の再発明」とは違うと思っているが、

たとえそれであっても、自分には必要なことと確信している。

今回自分なりのフレームワークを作るに当たり

意識すべきことをリストアップしておく。

・後からの改善のためフレームワークを作る過程、仕組みを選ぶ過程を記録する。

・仕様書から自動プログラミングすることを前提とした作りにする。

・初心者がWebアプリの技術を習得できるようになるべく隠蔽しないようにする。

最後にバックエンドとフロントエンドの役割分担について

今回はバックエンドに主導権を持たせる方向にする。

フロントエンドは与えられた画面の表示とイベントによる表示の切り替えや

APIの呼び出しに留める。

認証状況による画面の決定やユーザのアクションによる画面の遷移、

そしてビジネスロジックなどは全てバックエンドで行う。

これは業務用Webアプリを前提にしており、セキュリティ対策に有利であり

過度に頻繁な画面遷移は無いのではと考えているから。

とりあえず、この方向で実装してみる。

業務用Webアプリケーション開発の学習に必要なものリスト

業務用Webアプリケーション開発の学習に必要なものをリストアップしてみる。

・パソコン

・テキストエディタ

・ターミナルソフト

・ファイル転送ソフト

・インターネット接続環境（常時接続が望ましい）

・公開用Webサーバ（VPS）

次に開発を始める前に学んでおくべき事をリストアップ

・プログラミングの基本

・インターネット通信の基本

・Webサーバ構築の基本

it-mallを「これらを用意し、学習を志す方」が「０から学べる場」としたい。

それを目指して、サンプルプログラムの開発と並行して、

このリストの精査と具体化を行なっていく。

サンプルアプリ作成 ルーター配置

起動時に何もしないapiを呼ぶだけのサンプルから少し進めた。

クライアントサイドおよびサーバーサイドそれぞれにコントローラ的なものを置いた。

まだコントローラと呼ぶかルーターと呼ぶべきか分からない。

今のところ後者が相応しい。

クライアントサイドでは起動時やAjaxのレスポンス受信時を含めた

各イベントに対して何を行うかを割り振る役割をさせるためのもの。

ただ、イベントの割り振りをここに集中させるかどうかもまだ未定。

サーバーサイドではapiを一点で受け、呼び出されたapiに応じて処理を割り振る。

今回はこれらのコントローラを使って、サンプルアプリが起動したら

セッション情報取得apiを呼び出し、サーバーではそのapiの要求に沿って

現在のセッション情報を返す。クライアントは帰ってきたセッション情報を

出力する。ここまでを実装した。

次回はログイン画面と認証apiと認証機能とトップ画面を実装予定。

これがほとんどのWebアプリ作りの土台、スタート地点になる。