ホーム画面を作る #05
さて、今回はホーム画面のレイアウトを作っていきます。
カレンダー表記を作成する
前回は先にHTML部分を書き、その後にCSSで整えるという方式を取りました。その際、大まかなパーツ配置を先に決めておかないと、HMTLのタグ付け(主にdiv要素)に多くの修正箇所が生まれるとわかりました。故に今回は、CSSとHTMLを並行しつつ、先にパーツ配置を決める方式でいきます。
このような形で、どこに何を配置するのか、わかりやすく色付けしておきます。
中央の黄色枠にはカレンダー。その上に年月の表記。下部の赤枠には美少女キャラクター。青枠には吹き出し。
それらを適切に配置していくと、以下のようになります。
カレンダーはHTMLのtabel要素で作成しました。後ほど、年月の左右の矢印でカレンダーを切り替えられる仕様にしていきます。
美少女キャラクターの画像はまだ用意できていないため、とりあえずということで僕の写真を使っておきます。「こんなもの見ていられない。はやく画像を用意せねば……」と、己を鼓舞する役割を果たせているので良しとしましょう。
カレンダーが少し殺風景なので、それらしく整えましょう。また、上部のヘッダーには、ページを切り替えるためのアイコンを配置していきます。
いい感じになりました。カレンダーには、日記を書いた日に丸印がつくようにします。また、今日の日付は黄色く強調されるようにもしました。
プレビュー表記を作成する
さて、カレンダー部分は完成しましたので、次はプレビュー表記を作成します。プレビュー表記とは、つけた日記をざっと見ることのできる表記のことです。そう、まさに下のような感じです。
PC用に表示を変える
メディアクエリを用いて、PCで表示した際に適したレイアウトを作っていきましょう。
・ヘッダーのアイコンを右に寄せた
・月を切り替える矢印を中央に寄せた
・吹き出しの位置を微調整し、文字を少し大きめにした
主に以上の調整を行いました。配置を少し変えるだけでしたので、大きな苦労はありませんでした。
ほぼ全てのページに同じレイアウトを使いまわせるため、残りのページはかなり楽に作れるはずです。
自分の立ち絵をずっと見てるのがとても辛いので、急いで作り上げたいと思います。
それでは、今回はこの辺りで。
ランディングページを作る #04
前回設計したワイヤーフレームを基に、サイトの頭となるランディングページをマークアップしていきます。
HTML部分を作る
さて、作るべきモノは決まっているので、ここは簡単です。必要そうな部品をちょいちょいと書いていきます。
特徴２が二つあるという地味なミスは見なかったことにしましょう。
CSSでスタイリングする
それでは、CSSでスタイリングを行っていきます。
ざっとこのような感じになりました。
ヘッダ部分の背景には、幸せの象徴とも呼べるクローバーの画像(フリー素材)を設定し、ボタンをそれらしくスタイリング。特徴説明も含め、中央配置を主体とした画面構成となっております。
褒められる + ポジティブで「ほめティブ日記」という、我ながら破壊的なセンスのタイトルも設定しました。開発中にもっと良さそうなものを思いついたら、差し替えます。普通に。
・幸福を謳っているのに背景が暗い
・仮とはいえ、モニカの画像ではあまりにもしっくりこない
という理由から、画像を差し替えます。
ちょっとだけフリーゲームのタイトル画面っぽいですが、いい感じです。さらに、特徴説明の文章も設定しました。
この文章を書いている最中に、「自分は一体何様なんだ？」と我に返る場面もありましたが、気を大きく保ちます。誰かの心に刺さってくれるのなら、嬉しいです。
ちなみに、○○には、このアプリの要となる美少女の名前が入ります。現在未定ということです。
さて、あとは「ログイン」及び「新規登録」ボタンを押した時に、入力フォームのモーダルウインドウが現れるようにします。
jQueryを使用し、動きのあるウィンドウを作成しました。ボタンを押すとシュインという感じでウィンドウが拡大して現れます。
あとは、PCからアクセスした際に適切な画面構成となるよう、メディアクエリを書いていきましょう。
配置を少し変えただけなので、特別難しいことはありませんでした。
さて、これにてランディングページのスタイリングは、一時完成となります。特徴説明の部分が少し寂しい感じがしますね。後ほど、画像を差し替える際、デザインの追加を検討します。
次回は、ログイン直後に表示されるホーム画面の作成を行います。
設計をしっかりとする・後編 #03
前回の記事にて申し上げた通り、ワイヤーフレーム設計をこの記事に記載していきます。スマホとPCで表示が変わる仕様です。
トップページ
スマホ版
PC版
簡単な機能紹介と共に、ログイン及びサインアップ画面へと誘導します。ログイン及びサインアップは、ボタンをクリックした時に現れる、以下のようなモーダルウィンドウ内にて行えます。
ホーム画面
スマホ版
PC版
左上の「表示切替」をクリックすることで、カレンダーモードとプレビューモードを切り替えられます。カレンダーモードでは、画面上部にカレンダーが表示され、日付クリックで日記を閲覧できます。プレビューモードでは、日付ごとに日記がプレビューされており、クリックで詳細を閲覧できます。
また、右上の「日記を書く」とクリックすると、その日の日記を書く画面へと変遷します。
日記の閲覧・編集
スマホ版
PC版
右上の「編集」をクリックすることで、レイアウトをほぼそのままに、編集画面へと移行します。
マイページ
スマホ版
PC版
様々な記録を閲覧できます。「ユーザー名」と「女の子からの呼び方」は、その欄をクリックすることで編集ができます。
ワイヤーフレーム設計は以上となります。こちらもCacooというサイトツールを使用して作成しました。本当に手軽で扱いやすいです。
次回からはいよいよ、このワイヤーフレームを基に、マークアップを行っていきます。
ちなみに以下は、以前にチャットサイトを作った時に手描きで製作したワイヤーフレームです。
前回はこちら↓
設計をしっかりとする・前編 #02
要件定義、サイトマップ作成、ワイヤーフレーム作成、データベース設計をやっていきます。
実は、Webアプリを作るのは初めてではなく、簡易的なチャットサイトの開発に取り組んだ経験があります。その際は己の創作欲求に従って無計画に開発を突き進めました。そのため、後半になってから、追加すべき要素や修正点が数多く見つかり、多大な労力を費やすこととなりました。
その経験を踏まえ、今回の日記アプリ開発では、実際のWebアプリ開発工程を模倣することとします。
要件定義
必要な機能等を定義します。
他にも実装してみたい機能はいくつかありますが、最初に詰め込みすぎても効率がよろしくないので、ひとまずはこれらの機能で作り上げることとします。
サイトマップ
ページの相関関係を図示します。
想像以上に単純でした。ホームページのようにページが沢山あるわけではないので、当然といえば当然ですね。
ワイヤーフレーム
ワイヤーフレームは画像数が多いので、次回の記事にて定義します。
データベース設計
データベースの設計にはER図という手法を用いることを知り、ER図の描き方を不完全ながらも頭に叩き込みました。気合を入れてER図の作成に取り掛かったわけですが
単純すぎて驚愕しました。
以前に作ったチャットサイトでは10個近くのテーブルを作ったので、あまりの単純さに驚きを隠せません。とはいえ、完成後の機能の追加に伴ってテーブルが増えることもあるでしょう。
各ページで女の子が発するセリフはデータベースに登録し、日記閲覧画面や編集画面ごとに分類します。さらに限定的な検索をかけるときにキーを使用します。
なお、これらの図の作成にはCacooというサイトツールを使用しました。初めて使用しましたが、直感的に操作が可能で、非常に扱いやすかったです。今後もアプリ開発の際には、Cacooを使っていこうと思います。
それでは、今回はこのあたりで。
前回の記事↓
美少女が褒めてくれる日記をPHPで作る #01 - Jao's Blog
美少女が褒めてくれる日記をPHPで作る #01
プログラミング歴半年の初心者が、勉強の一環として、日記アプリの開発に挑戦します。
皆さんは「ポジティブ日記」なるものをご存知でしょうか？
ポジティブ日記とは、その日嬉しかったことや楽しかったことのみを記録する日記のことです。ポジティブ日記をつけることによって、日常の幸せに目を向ける能力が養われ、幸福度が高まります。箇条書きで一日三行でも、「天気が良かった」「お昼ご飯が美味しかった」等の些細なことでも、十分に効果があると言われております。
しかしながら、日記を毎日つける、というのは大変なことです。皆さんの中にも、日記をつけ始めたものの三日坊主で終わってしまった、という方がいらっしゃるのではないでしょうか？
どうすれば、継続的に日記をつけられるのかと、私は考えました。考えに考え抜いた末、一つの結論に行き着いたのです。
美少女に褒めてもらおう
上の画像のように、日記を書くたびに可愛い女の子が褒めてくれれば、毎日の日記が劇的に楽しくなること請け合いです。只でさえ幸福度の高まるポジティブ日記に加え、美少女からの承認が加わるわけですから、それはもう究極に幸せな毎日が送れることでしょう。
この日記の開発過程を、今後もこのブログにて記していきたいと思います。 よろしくお願いいたします。
