チャットApp(ルートページを作る)

今回はルートページ、つまりindex.htmlに当たる最初に訪れるページを作ります。

アトミックデザイン

それで今回はアトミックデザインに挑戦してみようと思います。本来ページの構成などは、ワイヤーフレームなどで外観を書き出し、それを元に作っていくと思うのですが(デザイン部分はよくわかりませんので間違っていたら申し訳ない)、アトミックデザインはまずボタンなどの部品から作成し、それを組み合わせてページを構成していきます。これによりサイトの統一感が出ます。また、部品は使い回しが出来るので、作ってしまえば後から楽が出来ます。今回は後者の理由で挑戦してみます。

初めてやるし、書籍で勉強したわけでも無く理念をネットの記事で見ただけなので実際のやり方とは違うかもしれません。ご了承ください。

以下のようにatomディレクトリにファイルを構成します。

他にもいくつかありますが、前回までで作ったものと、後から説明するものです。それぞれの部品をルートページに表示するとこんな感じです。containerDivは影を付けています。また、マテリアルUIを使用しています。react-responsiveを使用し、スマホとPCで文字の大きさも変わるようにしています。

デベロッパーツールなどを使用して、画面のサイズを変えても崩れず、想定通りの挙動をすることを確認したら、いよいよルートページを作っていきます。

言い忘れていましたが、吹き出しのDivは上手く出来なかったので作りませんでした。計画のワイヤーフレームには書いていましたが、このアプリを作る目的からは重要では無いので、作らないことにします。

ルートページの作成

ルートページはアプリの説明と「登録・ログイン」へ飛ぶボタンをおくだけなので、タイトルのデザインを少しお洒落にしようと思います。iPadnにベクタネーターというアプリを入れていたので、それを使ってタイトルロゴを作ろうと思います。

‎Vectornator X: Vector Design

といっても単純に文字を書いただけです。

これをsvg形式で出力し、logo.tsxから読み込みコンポーネント化します。svgは初めて扱うので表示するだけでも苦労しましたが、CSSで色つけなども出来るのでサイトのオシャレ度が格段に上がります。それで出来上がったページがいかになります。

これをgithubにあげます。プレビューも確認しましたが、大丈夫そうなので、masterにマージして終了です。今回は書いたコードの量が多すぎるので、詳しくはgithubを見てください。

次回から、ユーザーの登録・ログイン機能を実装していこうと思います。