htaccessを使った動的配信
「.htaccessファイル」を使った動的配信
動的な配信 | 検索セントラル | Google Developers
スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分ける機能」を作ってみましょう。この授業では「.htaccessファイル」を使って、サーバ側で自動振り分けする方法をやってみます。
まずは「.htaccessファイル」を作成します。この際、ローカルサイドで「.htaccessファイル」を作成すると、不可視ファイルの設定などで問題が起こりやすいので、一旦「htaccess.txtファイル」として作成し、サーバー側にアップロードしたのちに、「.htaccessファイル」にリネームする方法でやってみます。
今回の自動振り分けは
- ウェブサーバが「Apache」
- 設定ファイル「.htaccess」の設置が許可されている
- mod_rewriteモジュールが利用可能
の条件が必要です。
.htaccessの記述内容
<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile) [NC] RewriteCond %{QUERY_STRING} !mode=pc RewriteRule ^$ /cat/sp/ [R,L] Header set Vary User-Agent </IfModule>
まずはmod_rewriteモジュールが有効な時のみに処理するように分岐させます。
<IfModule mod_rewrite.c> </IfModule>
次にmod_rewriteモジュールを起動させます。
RewriteEngine On
次にRewriteCondを使って、どういう条件でリダイレクトの処理をするかを指定します。
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]
HTTP_USER_AGENT」は、アクセス端末の種類を示します。
最後にある [NC] という記述は、「大文字・小文字を区別しない」という意味の指示です実際にユーザエージェント名に含まれる文字列が「android」でも「ANDROID」でも、同じだとみなされます。 つまり、"A-Z" と "a-z" は区別しない。
RewriteCond %{QUERY_STRING} !mode=pc
URLの末尾に「?mode=pc」という文字列が付いていた場合には、スマートフォン用ページに移動させない(リダイレクトしない)ようにする記述です。なお、「mode=pc」という文字列は何でも構いません。「pc-site」や「show-pc-edition」など、何でも好きな文字列を指定できます。
4行目
RewriteRule ^$ /cat/sp/ [R,L]
RewriteRuleを使うことで、指定した規則に沿ってURLを書き換えられます。ここでは、リダイレクトするために利用しています。フラグとして、[R,L] を指定しています。「R」は「リダイレクトする」という意味で、ここでは必ず必要です。「L」は書き換え規則の最終行であることを示しています(これ以降のRewriteRuleは無視されます。ここでは省略しても問題ありません)。
今回の場合は、この .htaccessファイルを設置した場所が http://www.example.com/pc/ だとすると、
スマートフォンでアクセスすると http://www.example.com/pc/sp/ へ移動。
スマートフォン以外でアクセスすると http://www.example.com/pc/ のまま。
スマートフォンでアクセスしても、URLが http://www.example.com/pc/?mode=pc であれば移動しない。
自分のドメインでトップページを表示させたい場合(http://www.example.com)
4行目を以下のように直し、トップページ(PC用のindex.html)と同じ階層にアップロードする。
RewriteRule ^$ /sp/ [R,L]
スマートフォンでアクセスすると http://www.example.com/sp/ へ移動。
スマートフォン以外でアクセスすると http://www.example.com/ のまま。
スマートフォンでアクセスしても、URLが http://www.example.com/?mode=pc であれば移動しない
スマートフォンサイト用データの「index.htmlファイル」のhead内に貼り付ける
rel=”canonicalという属性を使用して、ページの評価やインデックスはデスクトップ用URLに統一するための正規化処理をしましょう。そうすることでミラーサイトのような重複コンテンツ扱いになることを防ぎます。
<link rel="canonical" href="http://○○○○○.com/pc/">
次にPCサイト用データの「index.htmlファイル」のhead内に貼り付ける
rel=”alternate”という属性を使用して、Googlebotにスマートフォン用ページが別で存在することを伝える処理をします。そうするとスマートフォン向けの代替コンテンツがGooglebotに認識され、スマートフォン用ページが別で存在することを伝えることができます。
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://○○○○○.com/cat/sp/">
最後にスマートフォンサイト用の「index.htmlファイル」に「PC版を表示」などのボタンを作り、「.htaccessファイル」が有効になっていても、スマートフォンでPCのデータを表示出来るようにしましょう。
<a href="http://○○○○○/pc/?mode=pc">PC版を表示</a>
ページネーションの導入が簡単に出来る「paginathing.js」
ページネーション(pagination)とは、日本語でページ割りという意味で、Web制作においては、検索結果一覧など、内容の多いページを複数のWebページに分割し、各ページへのリンクを並べてアクセスしやすくするために設置します。
BootstrapCSS
今回のプラグインはcssファイルを使用せずに「BootstrapCSS」というフレームワークを使用しています。ただしフレームワークは必要無いcssまで記述されているので注意が必要です。
bootstrap CDN
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
html
<ul class="list-group"> <li class="list-group-item"> <div class="box"> コンテンツ1 </div> </li> <li class="list-group-item"> <div class="box"> コンテンツ2 </div> </li> <li class="list-group-item"> <div class="box"> コンテンツ3 </div> </li> <li class="list-group-item"> <div class="box"> コンテンツ4 </div> </li> </ul>
$(function(){ $('.list-group').paginathing({ perPage: 4, containerClass: 'panel-footer' }) });
sassの便利な機能を使う
入れ子(ネスト)にできる
style.scss
header { width: 100%; height: 100px; background: #B6E3F4; >h1 { text-align: center; } }
style.css
header { width: 100%; height: 100px; background: #B6E3F4; } header > h1 { text-align: center; }
メデイアクエリーもネストで記述する事で、見通しが良くなります。
style.scss
body { background: #F00; @media (max-width:640px) { background: #000; } }
style.css
body { background: #F00; } @media (max-width: 640px) { body { background: #000; } }
擬似クラスの場合
style.scss
a{ display: block; text-align: center; line-height: 50px; color: #FFF; &:hover{ background-color: gainsboro; color: #222; } }
style.css
.g-nav ul li a { display: block; text-align: center; line-height: 50px; color: #FFF; } .g-nav ul li a:hover { background-color: gainsboro; color: #222; }
擬似要素の場合
style.scss
a{ display: block; text-align: center; line-height: 50px; color: #FFF; &::before{ display: block; content: ""; } }
変数が使える
style.scss
$point-pc: 1240px; $point-tablet: 959px; $point-lsp: 767px; $point-sp: 575px;
関数で繰り返し等の処理が出来る
style.scss
@for $i from 1 through 8 { $width: percentage(1 / $i); .col#{$i} { width: $width; } }
style.css
.col1 { width: 100%; } .col2 { width: 50%; } .col3 { width: 33.33333%; } .col4 { width: 25%; } .col5 { width: 20%; } .col6 { width: 16.66667%; } .col7 { width: 14.28571%; } .col8 { width: 12.5%; }
@mixinと@include を使ってスタイルを定義して、後で呼び出せる
PCファーストの場合
style.scss
//PCファースト $point-spc: 1239px; $point-tablet: 959px; $point-lsp: 767px; $point-sp: 575px; @mixin spc { @media (max-width:$point-spc) { @content; } } @mixin tablet { @media (max-width:$point-tablet) { @content; } } @mixin lsp { @media (max-width:$point-lsp) { @content; } } @mixin sp { @media (max-width:$point-sp) { @content; } } body { background: #ccc; } @include spc { body{ background: #cf619e; } } body{ @include tablet { background: #f00; } } body{ @include lsp { background: #0F0; } } body{ @include sp { background: #00F; } }
style.css
body { background: #ccc; } @media (max-width: 1239px) { body { background: #cf619e; } } @media (max-width: 959px) { body { background: #f00; } } @media (max-width: 767px) { body { background: #0F0; } } @media (max-width: 575px) { body { background: #00F; } }
モバイルファーストの場合
//spファーストの場合 $point-lsp: 576px; $point-tablet: 768px; $point-spc: 960px; $point-pc: 1240px; @mixin lsp { @media (min-width:$point-lsp) { @content; } } @mixin tablet { @media (min-width:$point-tablet) { @content; } } @mixin spc { @media (min-width:$point-spc) { @content; } } @mixin pc { @media (min-width:$point-pc) { @content; } }
自身のスキルを丁寧に説明する
自身のスキルを他者に説明する事は、そのスキルを身に付けるのと同じくらい重要であり、意味のある事です。
「htmlとcssが出来ます」だけでは無く、この6ヶ月で具体的にどういう事を学んだか、どういう事が出来るようになったか、をしっかりと説明しましょう。
html5
htmlの授業ではhtml5を中心に学習しました。HTMLはマークアップ言語であり文書構造(アウトライン)を示す物です。html5ではheader要素やnav要素といった新しい要素を使用する事で、より明確に文書構造を示すことができるようになりました。また、h1~h6を使用し、適切な見出しの設定も行いました。これらはW3Cの仕様に準拠した形で記述しています。
また以下の項目も学びました。
- picture要素を使い、画面解像度や画面幅、画像形式等に基づいて、開発者が任意の画像を出し分ける「アートディレクション」が可能。
- video要素やaudio要素を使用することで、動画データや音声データをシンプルに扱う事が出来る。
- フォーム関連の新しい属性を使う事で、今までJavaScript等で行う事が一般的だった入力補助や入力チェックなどの機能を簡単に導入でき、短い作業時間でユーザーにとっても解り易いフォームを作る事が出来る。
- HTML APIを使う事で様々は事が出来るようになります。授業ではHistory APIを使用して、ページ毎にユニークなタイトルやh1要素を指定出来る無限スクロールを作成しました。
css3
cssの授業ではcss3を中心に学びました。css3を使う事で今までビットマップ画像でしか表現出来なかった事がベクター形式であるcssで表現出来るようになりました。この事で、どんな解像度にも対応出来るマルチデバイス対応が容易になりました。
flexboxやgridレイアウト
今まではfloatやpositionを使ったレイアウトが一般的でしたが、マルチデバイスに対応させる為に煩雑な対応が必要でした。この新しいレイアウト方法を使用する事で、マルチデバイスに対応でき、かつ自由なレイアウトが容易に出来るようになりました。
ビットマップ画像の表示
フルードイメージやobject-fitを使用する事で、画像のアスペクト比に囚われない自由な画像表示が可能になります。
カスタムプロパティを使用したデザイン設計
メインカラーや余白の基準値などを予め変数として保存しておき、必要なところで使用する
SVG
SVG画像を使用する事で、拡大縮小に強く、どのような解像度のデバイスにも対応出来ます。またSVG画像はXML形式で記述されている為CSSで簡単に操作が出来、CSS3のアニメーション機能とも相性が良く、webサイトに簡単にマイクロインタラクションを導入する事が出来ます。
さらに、Ajaxを使う事でhtmlファイルにインラインで挿入した冗長なSVGアニメーションの記述を外部ファイル化し、htmlファイルをシンプルにする事が出来ます。
Javascript/jQuery
- DOMの操作
- if文、for文
- ランダムを使ったおみくじ
- Ajaxでのファイル操作
- clcikイベントやscrollイベントの設定
- css3のアニメーション機能と連動(ハイブリッドアニメーション)
- 様々なライブラリーを利用
PHP/Wordpress
- xampp/mampを使った仮想サーバーの構築
- get/postを使ったデータ通信
- データベースとの接続およびデータの挿入や検索
- includeを使ったテンプレート化
- sessionを使ったデータ保存
- バーチャルホストを設定して、ルートパスを有効にする
- wpのオリジナルテーマの作成
- wpを本番環境にデプロイする
photoshop
- アートボードを使用して、カンプやバナーを複数サイズ展開させる
- アセット機能を使った画像書き出し
- 調整フィルターを使用した画像補正
- フィルター機能を使用した画像作成
SASS
ポートフォリオの制作
- ポートフォリオ制作でまず自身が把握する事は中に入れるコンテンツの分量です。今までの授業で作ったデータをもう一度見直し、手直しする物は手直して、ポートフォリに掲載する物を決めましょう。
- 次にwebのポートフォリオを何で作るかを決めましょう。選択肢としては、htmlとcssで制作するか、wordpressを使って作るか、またテンプレートを上手く使う事も視野に入れておきましょう。
- ポートフォリオ自体の仕様が決まってきたら、次に中に入れるコンテンツの見せ方を考えてみましょう。もちろん色々な見せ方がありますが、授業でやった「作品のサムネイル」→「作品の詳細ページ」→「自身で制作した作品」という順に見せていく方法は有効な方法の1つです。また、ディレクター志望の場合、photoshop、illustratorだけで無く、パワーポイントやエクセルといったoffice系のソフトを使ってポートフォリオを作っても良いと思います。
- 次にポートフォリオ全体のデザインイメージとファーストビューのデザインを決めていきましょう。既存のサイトなどを参考にツカミのあるファーストビューを作ってみましょう。また面接等で「なぜこのファーストビューにしたのか?」と質問された時に答えられるように答えを準備しておきましょう。
要件定義書の提出
要件定義とは、Web サイトやアプリケーションなどの開発初期段階において、発注者と受注者の情報共有のために、実装すべき機能や満たずべき性能を第3者でも分かるように明確化しておく作業のことです。
要件定義は、Web サイトやアプリ開発において非常に重要な役割を担っていて、要件定義のでき次第で開発の成功が左右されるとも言われています。
一般的に要件定義の主導権は受注側(開発側)のディレクターが担い、要件定義にどこまでこだわり、どこで完成とするか、判断する必要があります。でき上がった要件定義は、要件定義書として発行し、受発注間で管理します。
事前に要件定義をしっかり作って置く事で、クライアントに安心感を与える事も出来るので、必ず最初の顔合わせの前に自身でまとめておきましょう。
要件定義で明確にしたいポイント
デザイン部分
- メインターゲット
- おおまかなデザインコンセプト
- コーポレートカラーの有無
- 出版物や販促物などの有無
- 画像・文章の確認
- 参考にしたいサイト
などをクライアントとミーティングを重ねて、明確にします。特に費用が発生するものは費用感もこちらで把握し、クライアントに提示しましょう。