BETA

Railsオリジナルアプリケーションを作りたい!15

投稿日:2019-04-21
最終更新:2019-04-21

100DaysOfCode 47/100

今回やること

  • erb/Sassのリファクタリングと修正

→触っているうちに改善したい部分が山ほど出てきたので、今日はここに注力しました。

  • レスポンシブ対応

Sassの機能を活用

Rails側の機能実装を中心に進めていると、ついついerbやSassのコードがスピード重視で雑になってしまっていました。
今回はその負債を返済するため、mixinやパーシャルを活用してコードの整理を行いました。

しばらくやっていくうちに、一気にレスポンシブ対応も進めてしまった方が後が楽だと思い、こちらも進めました。

やったこと

  • ほぼ同じようなコードを書いている部分を一つにまとめる
  • viewportの設定を追加(説明は割愛)
  • 可変幅のwidthを設定するmixinの作成
  • メディアクエリmixinの作成

コンテンツ幅を自動的に伸縮する

@mixin responsive-width($width-minus: 0px) {  
  width: calc(100% - #{$width-minus});  
  max-width: $container-width;  
}  
.  
.  
.  
$container-width: 1024px;  

今回、こんなmixinを作ってみました。
これを使えば、「現在の画面幅 - 任意のpx」をwidthとして使用できるようになります。

max-widthにはPC表示を想定した変数$container-widthを渡しています。
もし最大幅を変えたくなったときは変数の値を変えるだけでいいので、あちこち変更せずに済むのがメリットです。

.content-container {  
  @include responsive-width(66px);  
  margin: 33px auto 0 auto;  
  background-color: #FFFFFF;  
.  
.  
.  

こちらは記事一覧や本文など、メインコンテンツを括るためのdivのクラスです。
responsive-width(66px);と指定すれば、widthは画面幅 - 66px(左右33pxづつ小さくなる)になります。

Chromeの開発者モードで確認してみましょう。
上から順に「通常表示(幅1920pxのデスクトップ)」、「iPad」、「iPhone X」表示です。



画面サイズに合わせて幅が変わっていることがわかります!
また、後述するメディアクエリを用いてスマートフォン表示のときだけは画面幅 - 20px(左右10pxづつ小さくなる)という設定に切り替わるようにしています。

我ながらけっこういい感じだと思ったり。

メディアクエリを使う

しかし、伸縮だけだとどうしても小さな画面に対応できない場面が出てきます。
特に複数の要素が横並びになっているレイアウトは、そのままだとグチャグチャな表示になってしまいます。

@mixin breakpoint($breakpoint) {  
  @media (max-width: $breakpoint) {  
    @content;  
  }  
}  
.  
.  
.  
$mobile-width: 700px;  

そこで特定の画面幅でブレイクポイントを設定し、画面幅がそれ以上/未満の場合で表示を変更します。
今回は$mobile-widthという変数を用意してブレイクポイントとして用いることにしました。

一旦700pxとしていますが、ここは迷いどころなので後で調整するかもしれません。

.content-container {  
@include responsive-width(66px);  
.  
.  
.  
  @include breakpoint($mobile-width) {  
    @include responsive-width(20px);  
  }  

さきほどの.content-containerクラスでの使用例です。
普段は画面幅 - 66px、画面幅が700px未満の場合は画面幅 - 20pxになります。便利!

@include breakpoint($mobile-width) {  
  display: none;  
}  

画面幅によって特定の要素を非表示/表示するテクニックも便利です。

これらを活用して、ヘッダーやサイト紹介の表示が切り替わるようにしてみました。



(ついでに、トップ部分にそれっぽい背景画像を追加してみました)

iPadの画面幅は768pxなので伸縮のみで対応し、
画面幅320pxのiPhone 5/SEは700pxを下回るのでメディアクエリが適用されます。

iPhoneのみ「ユーザー登録フォームが非表示」「ヘッダーがシンプル(ここは改良が必要)」です。
ちょっとしたこだわりとして、サイト紹介が画面全体に表示されるようにしています。

height100vhのようにvhという単位で設定すると、画面サイズに対する比率でサイズを指定できます)

終わりに

今回はRailsそっちのけでCSSのお話でした。
フロントエンド(といってもJSにはまだ触れていませんが……)は成果が見た目に現れるのでまた違った楽しさがありますね。

わからないことはひたすら検索→自分のアプリに落とし込んで実装する繰り返しでしたが、
必ず出てきた内容を理解してから使うようにしたので、経験が血肉となった実感があります!

それにしてもSassが便利です。むしろプレーンなCSSに戻れる気がしない。

今後の課題

  • JavaScriptがわからない

現状Progateレベルしか書いたことがないです……。
クリックで開閉するメニューなどを搭載したいので、jQueryなどを使って実装できるように勉強します。

次回以降やること

  • テスト
  • erb/Sassの編集とリファクタリング 達成!
  • レスポンシブ対応 ついでにほぼ達成!もう少し手直しが必要。
  • 認可

アプリケーションとして最低限の体裁が整ってきました。
今後はより強固で、きちんとした実装にしていきましょう!

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@tammcの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!