ゼロから会社のHP作成してみて学んだこと

会社のHP作成をテンプレート等抜きでゼロから自分で作ってみて、

ドットインストールやProgateやTechAcademyだけでは学びきれなかったことを学びました。未来の自分のために覚書きしておきます。

・cssリセットを忘れずに行うこと。怠ると、違うブラウザやデバイスで見た時に、思わぬところに色がついちゃったりする。

・ヘッダーやフッターなど、どのページでも共通の部分は、事細かにidをつけて定義した方が良い。

(なぜそう思ったか) フッターに<table></table>で情報を書いていて、とあるページで、メインの中にも<table></table>を用いた時、フッターの微調整をするつもりでtableのcssを弄ったら、メインのtableの書式も変わってしまったから。出来る限り細かくidで指定しようと思いました。tableだけに留まらず、<p></p>なんかも、メインとは違うフォントサイズになることが多いので、idつけようっと。

・レスポンシブデザインにするべし

(なぜそう思ったか) レスポンシブデザインの真価は、どんなデバイスでも見栄えが良いということではなく、実装側の工数を最小限に抑えることにあるのだと今回身を持って体感しました。スマホサイトを別途作るということは、別のサイトをもう一個作ることと同じなのです...！作るのはそこまで大変じゃないのですが、実装後(リリース後)死ぬほど大変なんですよ。

例えば、「役員の写真を差し替えといて―」という状況になったときに、imgフォルダを2ついじらないといけなくなる。つまり、

/var/www/pc/img

/var/www/pc/sp/img (sp...スマホサイト用のディレクトリの意)

の２つをいじるということです。

「いやいや、/var/www/pc/imgだけ設置しておいて、スマホサイト用のhtmlやcssの相対パスを弄ればいいんでないの」

というご意見もあるかと思います。私もそう思ってました。

しかし、.htaccessで「PC以外のデバイスでアクセスした時に自動的にspディレクトリへリダイレクトする」という設定を行ったところ、相対パスで指定した部分が読み込めなくなるという事態に陥りました。具体的には、サーバーに上げた会社HPディレクトリにvim .htaccessで.htaccessファイルを作って、

.htaccess

RewriteEngine on

RewriteCond %{REQUEST_URI} !/sp/

RewriteCond %{HTTP_USER_AGENT} (iPod|iPhone|iPad|Android|Windows\ Phone)

RewriteRule ^(.*)$ sp/$1 [R]

RewriteBase /

RewriteCond %{REQUEST_URI} /sp/

RewriteCond %{HTTP_USER_AGENT} !(iPod|iPhone|iPad|Android|Windows\ Phone)

RewriteRule ^sp/(.*)$ $1 [R]

RewriteBase /

を作りました。

参考: htaccessによるデバイス振り分け - Qiita

これは私の推測ですが、

スマホ用HTMLさんとCSSさん「背景を取得しに、pcディレクトリ内のimgディレクトリ行って来まーす」

.htaccesさん「PC以外はspディレクトリに強制リダイレクトじゃ〜〜〜〜」

スマホ用HTMLさんとCSSさん「NOOOOOO !」

ということだと思います。つまり、PC以外はspディレクトリよりも上の階層のディレクトリへのアクセス権がないということです。

このめんどくささ、おわかりいただけたでしょうか。

次の仕事でHP作成するときはどのページも全部レスポンシブにします(´；ω；｀)

.htaccessと4時間くらい戦ったんですが、見事敗北しました。

どのページにも共通するようなファイルは一括で管理したいと思ったので、他の戦法を考えました。

そんな私の解決策は以下のとおりです。

(前提条件)

・会社HPのトップ、採用情報、企業情報はPC用とスマホ用の2種類のHTMLがある(例: index.htmlとindex-mob.html)

・その他のページはPC用とスマホ用で共通

(やりたいこと)

・トップ、採用情報、企業情報にアクセスしたときに、PC以外からのアクセスだったら、スマホ用のページに自動的に飛ばす

(やったこと)

・PC用HTMLにJavaScriptで呪文を書いた。

index.html

<!DOCTYPE html>

<head>

<title>株式会社XXXX</title>

if ((navigator.userAgent.indexOf('iPhone') > 0 &&

navigator.userAgent.indexOf('iPad') == -1) ||

navigator.userAgent.indexOf('iPod') > 0 ||

navigator.userAgent.indexOf('Android') > 0) { location.href =

'http://XXX/index-mob.html'; }

</script>

...

参考: リダイレクトだけじゃない！スマートフォンサイトを作ったら設定するべき3つのこと | Web制作会社スタイル

これで無事PC以外でのアクセスでは、スマホ用サイトへ自動的に飛ばすことができました。すごいよ、実装5秒で終わったよ。

JavaScript信者になりました。

勉強頑張ります！

Mi in progress

研究者ではなく、エンジニアになることを決意した人のブログ。

ゼロから会社のHP作成してみて学んだこと