関連記事
【開発実況シリーズ】Web日報登録システムを作る「#4 プロジェクト環境構築編」
2020.12.06
2021.03.14
【開発実況シリーズ】Web日報登録システムを作る「#5 UI作成編」
この記事の動画版はこちら（画像クリックでYoutubeに飛びます）
チャンネル登録お願いします！
今回は、開発実況シリーズ「Web日報登録システム」の第5回ということで、前回の続きを進めていきたいと思います。
前回までは
まずは、Todoリストを確認しておきましょう。
前回は、プロジェクト基礎環境の構築が完了しました。
プロジェクトフォルダを作成して、ApacheのVirtualHost設定を行い、開発用URLでアクセス出来るところまで確認しましたね。
今回は、UI作成を進めていきましょう！
UI作成では、実際にユーザーが触る「画面」をHTMLとCSSを使って作っていきます。
この段階では、まだ機能は実装せず、あくまで静的な画面だけを作成していきます。
設計フェーズで作った画面設計の通りに、各画面をHTMLとCSSで作成し、画面内のボタンやリンクが押されたら次の画面を表示するという画面遷移までを作成する作業工程ですね。
その後、機能開発フェーズにて、各画面にPHPで機能を付け加えていくという流れになります。
それでは各画面のUIを作っていきましょう！
UI作成
WebアプリのUIを作る際は、HTMLとCSSでゼロから作っても良いのですが、僕は大抵「Bootstrap」を使用します。
Bootstrapを使えば、ゼロから作るよりも手軽でスピーディにUIを作成することが出来て便利です。
Bootstrapについては、詳しくはこちらの動画もご覧ください。
今回も、UIはBootstrapを使って作っていきます。
まずは、Bootstrapのスターターテンプレートを設置します。
言語を「日本語」に設定して
僕は、テーマの色などを自分用にカスタマイズしたBootstrapを使っていますので、CDN版ではなく、そちらを参照させます。
まずは、社員側のログイン画面から作っていきましょう。
サンプルからフォームパーツを一式設置します。
不要な部分を削除して、画面設計通りの表示内容に書き換えていきます。
画面の背景色や枠線を付けていきます。
細かい調整は、オリジナルのCSSを追加して書いていきます。
はい、こんな感じですね。
アプリのロゴも簡単に作っておいたので、設置しておきましょう。
タイトルも変更して
これでログイン画面は完成です。
ボタンをクリックしたら、次の画面に遷移するように設定しておきます。
あとはインデントを整えて、他の画面はこれを雛形として使っていきましょう。
次は、社員側の日報登録画面です。
まずは裏側の月別リスト画面から作っていきます。
不要なパーツを削除して、代わりにプルダウンリストと
テーブルを設置します。
表示内容を画面設計通りに変更して
アイコンは、fontawesomeを使用します。
枠線や余白を調整していきます。
OKですね。
続いて、日報登録用のモーダルを設置していきます。
モーダルは、最終的にはプログラムで表示制御を行いますが、現段階では表示確認用のボタンを設置しておきましょう。
モーダルのパーツを配置していきます。
タイトルを変更し、レイアウト用のグリッドを配置。
打刻ボタン付きの入力ボックスを配置。
テキストエリアを配置。
日付の表示エリアも配置します。
こんな感じですね。
UI設計の時よりも、少し見やすく調整しています。
これで、社員側の画面は完成です。
続いて、管理者側ですが、管理者側の画面は、ほぼ社員側のコピーで行けるので、ログイン画面をコピーして背景色を変更すればOKです。
月別リストも同じですね。
コピーして背景色を変更。
管理者側には打刻ボタンはいらないので削除しておきます。
これでOKですね。
最後に、管理者側の社員一覧画面を作ります。
これは、月別リストとほぼ同じ形なので、月別リストをコピーして不要部分を削除し、内容を変更していきます。
これでOKです。
各画面のリンクをつないでいきましょう。
これで、UIが完成しました。
次回予告
最後にTodoを確認しておきましょう！
今回で、アプリのUIが完成したので、次はここに、PHPで実際の機能を付けていく、と言う流れになります。
次回は、ユーザー側の機能から実装を進めていきましょう！
徳田 啓（トクタ ケイ）
Webプログラマー暦20年。自分で使うツールは、基本的に1人でゼロから自作。オールマイティなプログラミングの知識とスキルを学べる「フルスタックエンジニア マスター講座」を開講中。生徒さん1人1人に合わせてしっかりサポートしていきます！
プログラミングの実践的なノウハウを発信中！
ぜひフォローしておいてください。
ぜひフォローしておいてください。
