まず、横並びのドロップダウンメニューを下記の手順で目指す。
予定通りに進まない場合は適宜方針を見直す。
縦並びおよびポップアップの手順はこれの成果を踏まえて改めて決める。
１．liを３階層にしてメニューで表記する文字列を記述する。
この時文字列の長さにはバラツキを持たせる。
２．cssでこの最上位階層だけ横並びに表示させる
３．それぞれの幅は表示文字列に合わせて自動的に決まるようにする。
あるいは任意の幅を指定する。
４．マウスが乗った時に色が変わり、子が表示されるように設定する。
この時、子は親の下に縦並びで表示されるが親に対してに少し右に寄る。
５．マウスを子に移動したらその色を変える設定をする
６．その子に更に子があれば表示する設定をする
この時、子は親の右側少し下から縦並びで表示される。
７．子の子にマウスが乗ったら色を変える設定をする
８．子や子の子がある場合はそれを知らせるマーク（＞など）を表示する
９．メニュー項目をクリックすると関数が呼ばれるように設定する
その関数は項目ごとに別の関数とする
１０．メニュー項目からマウスが外れると以前の表示に戻る
ドロップダウンメニューの要件をまとめてみる。
最終的には企画中の開発ツールを使って、
Webアプリケーションの仕様書から自動で生成することを考えているので
それを念頭に置いて考える。
・メニューでの表記とクリック時に呼び出す関数を定義したデータを用意する
・その表記に必要な幅を自動で設定するもしくはできなければ定義に含める
・その他並べ方や位置などその他の必要な項目も定義に含める
・定義に従ってhtmlやcssを静的または動的に生成する
ドロップダウンメニューそのものについては
・マウスをオーバーラップさせるだけで子項目が表示される
・子項目は兄弟は同じ幅とし最大の幅を必要とする子に合わせて適切な幅とする
・子項目がその子項目を持っている場合はそれを表す印を表示する
・フォーカスが当たっている親、子、孫・・・の項目はわかりやすく色を変える
今回の作業は、メインメニュー用に横並び、サイドメニュー用に縦並び、
ポップアップメニュー用に移動、開閉ができるものの３つを
静的ファイルとして作成するところまでとする。
よって自動生成の部分は実装しないが
メニューの定義を記したテキストファイルを作成した上で、
それに従って手でhtml、cssをコーディングすることにより
定義に過不足があれば修正しながら行う。
ほぼ目指した通りの３カラムレイアウトをfloatで実現できた。
Webアプリケーションとして利用するために
idやクラス名の付け方を工夫したりする必要はあるが
ここで区切りを付けて次に進むことにする。
（サイズ変更もまだ）
次はヘッダー部に置くメインメニュー、
サイドバーに置くサブメニュー、
自由な場所に表示できるポップアップメニューを実装する。
いずれも３階層程度のドロップダウンメニューとする。
３カラムレイアウトと違ってcssを使った単なる配置ではなく、
定義方法、イベントとの紐付け、動的な変更など
javascriptを含めて実装方法が重要になる。
ここを乗り越えればいよいよビジネスロジックに取り掛かれるので
それを楽しみに・・・。
今回作ろうとしている３カラムレイアウトはWebアプリケーションで使うものである。
そのために実現したいことを明らかにしておく。
固定の高さのヘッダーとフッターを備え、その間の領域を３カラムとする。
左右のカラムの幅は固定でウインドウの幅が変わると中央のカラムの幅が変わる。
フッターは常に表示されウインドウの高さが変わると３カラムの高さが変わる。
３つのカラムはそれぞれの表示内容に応じてスクロールバーを表示する。
なお、可能ならば左右のカラムの幅はマウス操作によって変更できるようにする。
これをfloatで実現を試み、困難ならflexやgridも視野に入れ、場合によってはjavascriptを使って実現する。
今後のおぼろげながらの予定を書いてみる。
目指すところは「夢」「幻」としか言えないものだが
それを追いかけながら楽しく仕事をしてきたし
これからもそれを活力として続けていく。
３カラムレイアウトの実装
メニューの実装
TODO機能の設計
TODO機能の実装
ブログ機能の設計
ブログ機能の実装
その他の機能の検討
追加する機能の設計
追加する機能の実装
全ての機能の仕様をテキスト化
テキスト化した仕様書からプログラムを自動生成するプログラムを検討
自動生成したプログラムを実行するためのフレームワークを検討
自動生成プログラムとフレームワークを並行実装
自動生成プログラムとフレームワークを使いながら改良
プログラミング教室用e-ラーニング機能を追加
はてなブログ連携機能を追加
プログラミング教室用教材の作成
プログラミング教室受講者募集
別言語のプログラムを生成できるように変更
仕様書から自動でプログラムを生成するまでをシステム化
自動生成システムを育て活用する同士を募集
it-mallとして収益化し継続できる仕組みを作る
「しっかり技術・知識を得た者が協力して従来の１０倍の効率で開発できる仕組み」
サンプルプログラムのダッシュボード画面を３カラムレイアウトにするため
最近の実装方法を調査した。
従来のfloatを使う方法もかなりヒットしてくるが
古い記事が日付を変えて残っているだけなのか
それなりのメリットがあるのかわからない。
比較的新しいと思っているgridやflexの記事も見かけるが
いまだにIE対応を心配した内容になっている。
古いだけなのか、今だにIEやそれぐらい古いブラウザにも
配慮しないといけない事情があるのか・・・。
確かにテレビなどに組み込まれたブラウザにまで対応しようとすると
そうなのかもしれない。
今回はサンプルでもありそんなに古い環境を考慮するつもりはない
また、カラムのI Dやクラスを適切に設定すれば
レイアウトの実現方法は部分的な変更で済ませられるはずだ。
行く行くはその辺りも取り上げてみたい。
ということで結局今回は特に理由もないがfloatを使う方向で進める。
ブラウザでindex.htmlをアクセスすると、
サーバーは外枠のタグとjavascriptのリンクとcssのリンクを記述したhtmlを送出し、
それを受け取ったブラウザはタグを表示しjavascriptとcssを要求し受け取って
そのjavascriptにしたがって画面名取得ＡＰＩを呼び出し
表示する画面の名前としてログイン画面を受け取る。
それに従ってログイン画面が表示される。
そのあと、
ログインＩＤとパスワードを入力してログインボタンをクリックされると
ログインＩＤとパスワードの値を取得しそれを持って認証ＡＰＩを呼び出す
バックエンドは評価しエラーならばエラーステータスとエラーメッセージを返す
ブラウザはエラーが返ってきたら、受け取ったエラーメッセージをログイン画面に表示
バックエンドが評価しOKならばセッション情報にユーザー権限などを記憶し
成功ステータスと次期画面名を返す。
ブラウザは成功ステータスを受け取ったら次画面名に沿ってその画面を表示
今のところログインの成功後はダッシュボード画面に固定で
ひとまずログアウトボタンだけの画面を表示する
ログアウトボタンがクリックされると
ログアウトAＰＩを呼び出し、バックエンドでログアウト処理をして
次画面名としてログイン画面が返ってくるので
それにしたがってログイン画面を表示する。
このような流れを実現するために
画面ブロック表示ロジック、部品表示ロジック
起動時イベント、各APIレスポンスイベント、ログインボタンクリックイベント、
ログアウトボタンクリックイベント
などを実装した。
これで、ログイン画面とダッシュボード画面を繰り返し表示できるようになった。
ここまでバックエンド主導のSAPフレームワークを意識しながら
自分でルールを決めながら進めたのでかなり時間が掛かり辛かったが
なかなか楽しい作業でもあった。
次からはダッシュボードの画面周りを実装していくことになる。
進めた途端にルールを大きく変更することになるかもしれないが
楽しみながらやっていこう。
