t-hom’s diary

主にVBAネタを扱っているブログです。

サイトをスマホ対応させたので参考にした書籍2点を紹介

昨年末から今日にかけてVBAネタを書きながらもRuby on RailsやCSS3、JQueryスマホサイトデザインなどWeb系の技術をコツコツ勉強してきた。

その甲斐あって、本日ついに、念願のスマホ対応完了!
f:id:t-hom:20170123180818p:plain
(あ、Railsは関係ないけど。)

ちなみに780px以上の画面で見るとほぼ以前と変わらないデザイン。
f:id:t-hom:20170123180949p:plain

サイトはこちら↓
http://www.thom.jp/

まあサイトの方はブログの1%にも満たないアクセスなので、たぶん需要は無いけど、ようやく時流に乗れた感じで嬉しい。

主に参考にした書籍はこちらの2点。

スマートフォンサイト制作入門 〔レスポンシブ・ウェブデザイン対応〕

スマートフォンサイト制作入門 〔レスポンシブ・ウェブデザイン対応〕

CSS3&jQueryで作る スマートフォンサイトUI図鑑 (WEB PROFESSIONAL)

CSS3&jQueryで作る スマートフォンサイトUI図鑑 (WEB PROFESSIONAL)

前者は実際にサンプルサイトを作りながらスマホサイトの基本的なコーディングについて学べる。また作ったスマホサイトをレスポンシブ化する(つまりPCなどの大画面へ対応させる)方法についても書かれているので今回のスマホ対応にあたり必要な知識はだいたいこの書籍から得たといって良い。

後者はスマホサイトでよく見かけるユーザーインターフェースを集めたカタログで、購入者は商用・非商用を問わず自分のサイトへ自由にコードを流用して良いらしい。

実際の作業工程としては、まずスマホを前提にCSSをデザインしなおして、それからCSSのメディアクエリ機能を使って画面の横幅が768pxを超えたときのCSSを元のスマホのスタイルを上書きする形で書き換えていく。それで徐々に元のサイトのデザインに近づけていった。

そう、PCサイトをちょこっといじってスマホ版を作るという訳にはいかないのだ。これがモバイルファーストってことか?ちがうのか?そのへん詳しくないので説明は他のサイト様に譲る。

要するに今回やったのはスマホ対応というより、サイトをスマホ前提で作り直した後にPCなどの大画面で見たときに元のデザインに近くなるように対応したということ。

さて、スマホ対応自体は前述の2冊で十分なんだけれど、前提としてHTML5とCSS2※までの知識が必要になる。
※CSS3は書籍の中である程度学べるので。

少なくとも以下の記事で書いた「近代」くらいまでの知識は持っておきたい。
thom.hateblo.jp

HTML4+CSSの知識があれば、あとは以下の記事で紹介した書籍で簡単にバージョンアップできる。
thom.hateblo.jp

私もなんだかんだ言ってHTML5化したのは1年ちょっと前の話。
thom.hateblo.jp

この時につけたHTMLとCSS3のValidアイコンは今回外した。。というか単に面倒でまだ付けてないだけ。

あとそうだ。元のサイトではメニューをJavaScriptに描かせていた↓けど、今回はPHPで外部ファイルから読み込むように変更した。
thom.hateblo.jp
なんだけっきょくPHPかよ。と言われそうだけれど、まあWordPressのことを考えるとちょっと外部ファイル読み込むくらい大した処理じゃないよね。
※当初はクライアントの処理能力が上がっているのでJSがベターだと信じていた。

今後やりたいこと

まずCSSが汚いのでなんとかしたい。
CSSにはCSS設計という専門分野があり、OOCSS(オブジェクト指向CSS)やSMACSS(Scalable and Modular Architecture for CSS)、BEM(Block、Element、Modifier)などの思想が研究されているらしい。

それを知ったのはこの書籍。

最強のCSS設計 チーム開発を成功に導くケーススタディ

最強のCSS設計 チーム開発を成功に導くケーススタディ

ただ上記はケーススタディ本なのでこれだけで学んでいくのは難しいように感じた。
(買ってしまったんだけれど。)

そして書店で見たところ一からCSS設計を学習するにはこれが良さげ。

(これも買ってしまった。)

どちらもまだ未了なので今のところ評価は保留。ただCSSは放っておくと後からどんどん追加して最終的に訳が分からなくなるのでこれをなんとかする術があるならぜひ身に着けたい。

あとはブートストラップも興味あり。

Bootstrapファーストガイド―CSS設計の手間を大幅に削減!

Bootstrapファーストガイド―CSS設計の手間を大幅に削減!

(これはまだ買ってない。)

これはTwitter社が開発したCSSフレームワークで、あらかじめデザインされた既成品のボタンやUIパーツをHTMLに適用していくだけでいとも簡単にモダンで格好いいサイトができあがる(らしい)。
まあ、デザインがありきたりになってしまうのが難点だとか。

あとはもうすこしJQueryをきっちり学びたい気もするけど、まぁフロントエンド技術はこんなところ。

バックエンドは引き続きRuby on Railsの学習を進めようかどうか迷っている。だいたい読み終えたんだけど、ややデプロイに難があって。。

というのも今借りてるロリポップレンタルサーバーじゃRailsは動かない。
Herokuというホスティングサービスで簡単にデプロイできるらしいけど、こちらは無料プランでは24H稼働できなくなったとのこと。あとはVPSを借りるか。。環境構築が面倒くさそう。

こうなったらもうMVCフレームワークの基礎はRailsでしっかり学びつつも、実際に何か作るのはCakePHPでいこうかと。Cakeはロリポップでも動く。というかMySQL(MariaDB)とPHPが動けば多分どこでもいける。

というわけで長々と書いてしまったけれど、とりあえずスマホ対応までは終わったので、次はフロントエンドはCSS設計・バックエンドはRailsかCakeをちまちまと勉強していこうかなというところ。

当ブログは、amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、 Amazonアソシエイト・プログラムの参加者です。