WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

既存サイトのトレース ニュースリリース部分

PCレイアウト
f:id:yachin29:20170224015445p:plain


タブレット(959px〜641px)
f:id:yachin29:20170613105423p:plain



スマホ時(640px以下)
f:id:yachin29:20170613105452p:plain


このようなニュースリリース部分はレスポンシブを考えるとul要素を使ってコーディングする方が簡単に出来るので、多くの場合はul・liで組まれていますが、文章構造的にはdl要素を使う方が良いでしょう。
なので、今回はdl要素を使って実際にコーディングして行きます。

ポイント
  • ddがdtの下に回り込まないようにする
  • dtとddで行数が違う場合にレイアウトが崩れないようにする
  • dtとddの高さを1行目で合わせる


スマホ時のポイント
スマホ時になると最新記事3つ以外は隠れていて、「もっと見る」ボタンをクリックすると表示されるようにしてみましょう。
この際に最新記事3つ以外にクラス名をつけるやり方もありますが、それでは運用効率が非常に悪いので、擬似クラス(nth)を使えるようになりましょう。
さらに、これはjQueryだけで無く、プログラム全般に言えることですが、動きをつける際にはまず「何をしたら」、「何が」、「どうなる」という事をしっかりと明確にしましょう。
また、jQueryで要素を取得する際には「ツリー構造」と「ノード」の考え方をしっかりと理解する必要があります。

Traversingメソッドを利用

Traversingのメリット

トラバースを利用することで、イベントが発生した要素に関連した要素を操作する事ができます。ボタンが複数ある場合などは「this」を使う事になりますが、このトラバースを使えば操作したい要素を「this」から見てどういう関係性にある「要素」、という形で指定する事ができます。jQueryを使う上で非常に大事な考え方なので、しっかりと理解しましょう。



childrenメソッド
jQueryオブジェクトで指定した要素の「子」要素でセレクタにマッチする要素を選択します。子要素とは階層構造(入れ子構造)において直下にある要素のことです。
childrenメソッドを利用すれば「セレクタ:>(子要素)」と同じようなことが可能です。


parentメソッド
指定した要素の「親」要素を選択します。親要素とは階層構造(入れ子構造)において直上にある要素のことです。
名前が似ているparentsメソッドはparentメソッドと異なり「先祖」要素も選択します。

siblingsメソッド
指定した要素の兄弟要素(同じ階層の要素)を選択します。引数を設定しない場合はすべての兄弟要素を選択します。


f:id:yachin29:20170224130454p:plain

www.jquerystudy.info





文章構造

<div class="inner">
<div id="news">
<h2>ニュースリリース</h2>
<dl>
<dt>2017年6月12日</dt>
<dd><a href="#">「復興応援 キリン絆プロジェクト」熊本支援 阿蘇GIAHS(ジアス)ツーリズム推進協議会に支援金を助成</a></dd>
<dt>2017年6月9日</dt>
<dd><a href="#">国産最軽量のアルミ缶が「第41回木下賞」を受賞!</a></dd>
<dt>2017年6月9日</dt>
<dd><a href="#">「キリンウイスキー 富士山麓 ブレンデッド18年」が「アジアスター賞」、「ワールドスター賞」を、「キリン 生茶」525mlペットボトルが「アジアスター賞」を受賞!</a></dd>
<dt>2017年6月8日</dt>
<dd><a href="#">「ギュギュッと搾ったサングリア」新スタイル300ml小容量ボトル缶が販売好調</a></dd>
<dt>2017年6月8日</dt>
<dd><a href="#">「シャトー・メルシャン “調和を味わう”3本セット」をDRINXで数量限定発売</a></dd>
<dt>2017年6月7日</dt>
<dd><a href="#">「第4回 寿司×クラフトビールフェス」開催</a></dd>
<dt>2017年6月6日</dt>
<dd><a href="#">「キリンチューハイ ビターズ 皮ごと搾りはっさく<期間限定>」を新発売
</a></dd>
</dl>
</div>

<div id="new_info">
<h2>新着情報</h2>
<dl>
<dt>2017年6月13日</dt>
<dd><a href="#">「キリン 氷結®ストロング 塩グリーンレモン<期間限定>」を新発売!(6月13日発売)</a></dd>
<dt>2017年6月6日</dt>
<dd><a href="#">「47都道府県の一番搾り(栃木県・群馬県・埼玉県・千葉県・東京都・京都府・大阪府・奈良県・和歌山県・熊本県・宮崎県・鹿児島県・沖縄県)」を新発売!(6月6日発売)</a></dd>
<dt>2017年6月6日</dt>
<dd><a href="#">「47都道府県の一番搾り」新CMを公開!</a></dd>
<dt>2017年6月6日</dt>
<dd><a href="#">キリン食生活文化研究所 キリン食生活文化研究所のアンケート「ちょっと教えて」実施中!</a></dd>
<dt>2017年6月6日</dt>
<dd><a href="#">「キリン 午後の紅茶 ティー ウィズ ミルク」を新発売!(6月6日発売)</a></dd>
<dt>2017年6月6日</dt>
<dd><a href="#">「キリン 午後の紅茶」新CM『おいしい無糖「オール・マイ・ティー英語講座 ティー ウィズ ミルクぶら下がり」篇』を公開!</a></dd>
<dt>2017年6月6日</dt>
<dd><a href="#">「キリン 午後の紅茶」新CM『おいしい無糖「食事もオール・マイ・ティー ティー ウィズ ミルクぶら下がり」篇』を公開!</a></dd>
</dl>
</div>
</div>


スタイルシート

.inner {
  width:960px;
  margin:0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

#news {
  width:47%;
  float:left;
}
#new_info {
  width:47%;
  float:right;
}
#news h2, #new_info h2 {
  font-size:20px;
  padding: 20px 0 20px 10px;
  border-bottom: 1px solid #D8D8D8;
  box-sizing: border-box;
}

dl {
  overflow:hidden;
  margin:20px auto 0;
  line-height:2;
  font-size:12px;
}
dt {
  width:30%;
  float:left;
}
dt,dd {
  margin-bottom:14px;
}
dd {
  padding-left:30%;
  padding-bottom:10px;
  border-bottom:1px solid #CCC;
  background:url(dd_bg.gif) no-repeat 26% 6px;
}
dd a {
  color:#03C;
}
dd a:hover {
  text-decoration:underline;
}
@media screen and (max-width:959px) {
.inner {
  width:100%;
  margin:0 auto;
}

#news {
  width:100%;
  float: none;
  margin-bottom:40px;
}
#new_info {
  width:100%;
  float: none;
}

}

@media screen and (max-width:640px) {
.inner {
  padding: 0;
  margin:0 auto;
}
#news h2, #new_info h2 {
  font-size:16px;
  background: #D8D8D8;
  padding: 10px;
}
dt {
  width:100%;
  float:none;
  padding-left: 10px;
}
dt,dd {
  margin-bottom:10px;
  box-sizing: border-box;
}
dd {
  padding-left:20px;
  padding-bottom:10px;
  border-bottom:1px solid #CCC;
  background:url(dd_bg.gif) no-repeat 10px 6px;
}
}

今のトレンドを知る

物を作る上で、必ずしもその時々のトレンドを盲目的に取り入れれば万事OKという訳でないですが、選択肢の1つとして知っておく事はとても大事です。
特にポートフォリオなどに「ツカミ」として、最新のトレンドを取り入れる事で、面接などでアピール出来るので、場合によっては積極的に取り入れる事も必要です。
一言でトレンドと言っても、色の使い方からタイプグラフィー、レイアウト、アニメーションの動きなど、多岐に渡って語られている場合が多く、その全てを取り入れるのは不可能なので、まずは俯瞰的に眺めて、ポイント・ポイントで取り入れそうなものは取り入れていくようにしましょう。


特に最近のトレンドの1つである「分割、スプリットレイアウト」はポートフォリオにも向いているレイアウトでもあるので、ぜひ参考にしてみましょう。

f:id:yachin29:20170215112552p:plain


tympanus.net




2017年のトレンドまとめ

photoshopvip.net


photoshopvip.net


coliss.com

既存サイトのトレース キリン編

以前も言ったように既存のサイトをトレースする事は、非常に勉強になるので、積極的にやって行きましょう。



今回はキリンのサイトをトレースします。
こういったコンテンツの多いコーポレートサイトは細かい箇所の処理が多く、PCで見せる物とSPで見せる物を明確に分け、しっかりとしたUI・UX設計が必要になってきます。
今までの授業で学んだ事の全てが必要になって来るので、復習の意味も込めて作って行きましょう。


f:id:yachin29:20170210120838p:plain


www.kirin.co.jp





生徒の作例
模倣サイト|KIRIN

Unknown collation: 'utf8mb4_unicode_ci' のエラーの原因

WordPressを仮想サーバーからレンタルサーバー等にデータ移行(デプロイ)する際に

Unknown collation: 'utf8mb4_unicode_ci

というエラーが出る事があります。
これは仮想サーバーよりレンタルサーバーのデータベースのバージョンが低い場合に出る事があります。
「utf8mb4」というのは「utf8」の拡張版であり、今まで使われていた文字セットにさらに追加の文字セットが使えるようなります。
「utf8mb4」はバージョンが5.5.3以上のMySQLのデータベースで使用する事が出来ます。



問題は、WordPress 4.2からセキュリティー上の仕様でユーザーの許可なく、自動的にデータベースの文字コードを「utf8mb4」にしてしまうことです。例えば、5.5.3以上のMySQLのデータベースで、データベースを作成する際に、「utf8_general_ci」で作っても、新しいバージョンのwordpressと紐付けした際に、自動で「utf8mb4_unicode_ci」に書き換えられてしまいます。


その「utf8mb4_unicode_ci」に自動で書き換えられてしまった、データベースのデータを「utf8mb4」に対応していない古いデータベースにデータ移行しようとすると、冒頭のエラーが出てしまいます。



なので、仮想サーバーからエクスポートしたsqlファイルの中身に書かれている、
「utf8mb4_general_ci」「utf8_general_ci」
「utf8mb4」「utf8」テキストエディター等で置換する必要があります。


また、wp-config.php のデータベースの文字セットの設定(DB_CHARSET)が「utf8」のままであれば、SQL ファイル内の文字列置換だけでいけるようですが、

define(‘DB_CHARSET’, ‘utf8mb4’); 

になっている場合は

define(‘DB_CHARSET’, ‘utf8‘); 

に変更する必要があります。


それか、仮想サーバーのデータベースのデータをエクスポートする際に、

  1. 「エクスポート方法」を「詳細 – 可能なオプションをすべて表示」にチェックを入れる
  1. 「フォーマット特有のオプション」にて「他のデータベースシステムまたは古い MySQL サーバとの互換性:NONE」となっているところを「MYSQL40」に変更。
  1. で、他をいじらずにそのまま保存


もしくは、勝手にMySQLのルールをutf8からutf8mb4に変更させたくない場合は、wp-config.phpの中に「DO_NOT_UPGRADE_GLOBAL_TABLES」を記述するという方法もあります。

define('DO_NOT_UPGRADE_GLOBAL_TABLES', true);

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー





WordPressでサイトを制作する際に便利なチート集

WordPressで制作を進める際に、色々と引っかかってしまう一番の理由はやはりWordPress特有の「WordPressテンプレートタグ」の存在だと思います。暗記出来ればそれに越したことは無いですが、現実的にはそれも中々難しいので、カンニングペーパー的なまとめ集を上手く活用しましょう。


www.webcreatorbox.com


WordPressで困った時に役立つお助けコード8つ | Webクリエイターボックス


少しのコードで実装可能な20のWordPress小技集 | Webクリエイターボックス

WordpressをXAMPPからサーバーにデプロイする

授業ではXAMPP環境でWordPressの制作を進めましたが、ポートフォリオ等に載せる為にはWordPressのデータを別サーバーに移行する必要があります。
データ移行用のプラグインなどもありますが、ここでは手作業でデータの移行を行います。

WordPressサイト(XAMPP)のバックアップ
まずは旧サイトのデータのバックアップを取ります。バックアップはあくまでもバックアップなので、このバックアップデータは何があってもいじることの無いようにしましょう。
万が一何か問題があってもこのバックアップデータがあれば作業前の状態に戻すことが出来ますが、このバックアップデータをいじってしまうと、場合によってはwordpressが消えてしまうこともあります。

WordPressの移行に必要なデータ4つ

WordPressのダッシュボード上からエクスポートしたxmlファイル(投稿記事や固定ページのデータ)
データベースからエクスポートしたsqlファイル(データベース内のテーブルデータ)
オリジナルテーマを使っている場合はテーマフォルダーや画像が格納されているwp-contentのフォルダー
それと念のためにデータベース情報が記載されているconfigファイルもバックアップを取っておきましょう。



新しいWordPressサイトにインポート
バックアップを取ったデータを新しいWordPressサイトにインポートします。
注意が必要なのはアドレスが変わる時で、sqlデータの書き換えが必要になります。データベースの一部の情報はドメインに関わるもので、このまま放置しておくと、WordPressの管理画面や記事内の画像リンクなどが旧ドメインへリンクしたままになります。これらを修正するにはSQL文を利用します。

データベース内のURL書き換え例
古いサイトのURL http://localhost/wordpress
新しいサイトのURL http://yachin29.webcrow.jp/wrodpress

注意が必要なのはURLの最後に「/」が入っているとエラーになるので、必ず取ってください

UPDATE wp_options SET option_value = replace(option_value, '古いサイトのURL', '新しいサイトのURL') WHERE option_name = 'home' OR option_name = 'siteurl';
UPDATE wp_posts SET guid = replace(guid, '古いサイトのURL', '新しいサイトのURL');
UPDATE wp_posts SET post_content = replace(post_content, '古いサイトのURL', '新しいサイトのURL');
UPDATE wp_postmeta SET meta_value = replace(meta_value,'古いサイトのURL', '新しいサイトのURL');

実行後、wp_optionsなどのテーブルを表示させ、「siteurl」と「home」の値が新しい値になっているか確認して下さい。

このままではXAMPPで使用していたIDと新しいサイトで作ったIDが混在した状態になっているので、データベース内で新しく作られたIDを削除し、XAMPPで使用していたID名を新しいID名にSQL文で差し替えます。

update wp_users set user_login='新ユーザ名' where ID=1;


しかし、これだけではwidgetプラグインが正常に動作しなくなる場合があります。
理由はシリアライズというものにあります。
データベース内のURLはすべてシリアライズされていて番号と紐付けされます。URLを置き換えるだけだと、シリアライズの部分とURLの文字数の整合性がとれなくなって不具合がでる場合があります。

なので、widgetプラグインまで完全に再現したい場合は、シリアライズされたURLを完全に書き換える必要があります。

以下のスクリプトを使えば、シリアライズされたURLを完全に書き換える事が出来ます。
Database Search and Replace Script in PHP / Interconnect IT – WordPress Consultants, Web Development and Web Design


bge.jp