WEBサイト制作の勉強

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

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

今のトレンドを知る

物を作る上で、必ずしもその時々のトレンドを盲目的に取り入れれば万事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

レスポンシブデザイン 模擬試験

見本画像

PCレイアウトは960px固定で2カラム。liは130pxで固定。content画像は100%の大きさで使用する。navとfooterの幅は100%。
f:id:yachin29:20160204010627j:plain



タブレットはフルードレイアウトで縮小。liは130pxで固定。
f:id:yachin29:20160204010652j:plain



スマホはフルードレイアウトで1カラム。li幅は3等分
f:id:yachin29:20160204010707j:plain


ブレイクポイントは

  • 960px以上
  • 959px~768px
  • 767px以下

sidebar内のh2にgoogleFontsを使用すること


素材データ
http://yachin29.com/09-test.zip


作例
index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Pickupstream</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
</head>

<body>

<header>
<div class="inner">
<div id="site">
<h1>PickupStream</h1>
</div>
</div>
<nav id="header_nav">
<ul id="main_nav">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</header> <!-- #header -->


<p id="keyVisual"><img src="img/header.jpg" alt="夜景画像"></p>
<div class="inner">
<div id="content">
<section>
<h2>海岸のデコレーション</h2>
<p>海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風、強い日差しなどの影響で、大きく育つものは見当たりません。その多くは小さく、地を這って伸びています。</p>
<p id="plant"><img src="img/plant.jpg" alt="海浜植物"></p>
<p>こうした植物は「海浜植物」と呼ばれ、砂をかぶって埋もれても、茎が伸びてまた葉を出す仕組みになっています。</p>
<p>ところどころに顔を出す緑色の小さな葉っぱは、海岸をかわいくデコレーションしてくれます。海への道中で踏んづけてしまう前に、足元にあるものを観察してみるのもおもしろいですよ。</p>
</section>
</div>

<div id="sidebar">
<nav class="menu">
<h2>Main Menu</h2>
<ul>
<li><a href="#">山と森林</a></li>
<li><a href="#">海と海岸</a></li>
<li><a href="#">都市と建築</a></li>
<li><a href="#">地上と地下</a></li>
</ul>
</nav>
<div class="ad">
<p><img src="img/ad2.jpg" alt="広告"></p>
</div>
</div><!-- #sidebar -->
</div><!-- #inner -->

<!-- ### フッター ### -->
<footer>
<div class="inner">
<p id="footer_title">Pickupstream</p>
<p><small>Copyright &copy; Pickupstream, all rights reserved.</small></p>
</div>
</footer>

</body>
</html>