WEBサイト制作の勉強

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

タッチアイコンの設定方法

f:id:yachin29:20151111202701j:plain

スマートフォンの場合、PCのようにブラウザーから検索してWebサイトに行くよりも、ホーム画面に登録してあるアプリからワンタッチでWebサイトなりWebサービスを利用するケースがほとんどです。
なので、スマートフォンサイトを制作する場合には必ずスマートフォンのホーム画面に登録出来る「タッチアイコン」をPCサイトでのファビコンと同様に作っておく必要があります。
「タッチアイコン」を設定せずにスマホサイトをホーム画面に登録すると、サイト全体のキャプチャー画像が仮の「タッチアイコン」としてホーム画面に設置されてしまい、一見何のサイトか解らないので必ず「タッチアイコン」を設定しましょう。


ポイント

  • 作成するタッチアイコン画像の拡張子は「.png
  • 画像に角丸等の処理はせず正方形で作る(ホーム画面に登録する際に自動で角丸等の処理が行われます)
  • 画像サイズは192px X 192px で書き出し出す(2015年11月現在)
IOSサファリの場合

タッチアイコンは各デバイス毎に大きさが細かく指定されています。
各デバイスのタッチアイコンの大きさ
f:id:yachin29:20151111205107j:plain


各デバイスに最適な大きなのタッチアイコンをそれぞれ用意する場合もありますが、

  • 各デバイスの推奨サイズに一致する大きさのアイコンがない場合は、推奨サイズよりも大きいアイコンの中で最小のアイコンが適用される。
  • 推奨サイズよりも大きいアイコンがない場合は記述してある最大のアイコンが適用される。

という仕様を踏まえると、IOSだけで考えるとタッチアイコンは1番大きい180px X 180pxサイズのみで問題ありません。

細かい仕様は以下の公式ガイドラインの通りです

developer.apple.com

Chrome for Android

Chrome for Androidの場合、公式ガイドラインでは192px X 192pxを推奨しています。

Chrome for Android公式ガイドライン
Add to Homescreen - Google Chrome

Android標準ブラウザ

Android標準ブラウザの場合、仕様が携帯端末によってバラバラで「これでOK」という物が無いので、なんとなくで対応。


それぞれのブラウザーの仕様を見比べた結果、
192px X 192pxサイズのタッチアイコンを1つだけ
用意するのがベストです。



タッチアイコンの設定方法

192px X 192pxで書き出したpng画像をHTMLファイルで設定します。
タッチアイコンはファビコンの時と同様、index.htmlファイルと同じ階層に裸で置いて下さい。
古いブラウザーへの対応も考えると記述はもっと多くなってしますが、現状では「iOS Safari and Chrome」と「 Android標準ブラウザ(一部)」の2つで十分です。

全てのページでタッチアイコンを表示させたい場合、全てのページにタッチアイコンを表示させる為の記述が必要になります。また、一部のAndroidではタッチアイコン画像のパスを絶対パスにしなければ表示されない場合があります。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タッチアイコンを設定する</title>
<link rel="stylesheet" href="css/style.css">

<!-- iOS Safari and Chrome -->
<link rel="apple-touch-icon" sizes="192x192" href="touch-icon.png">

<!-- Android標準ブラウザ(一部) -->
<link rel="shortcut icon" href="http://〇〇〇〇.com/touch-icon.png">
</head>

以上です。


参考ブログ
itexp.hateblo.jp




タッチアイコンに任意のタイトルを表示させる

「タッチアイコン」をホーム画面に登録すると、デフォルトの設定ではページタイトルの中身がタッチアイコンの下に表示されます。ただ文字数に制限(半角11文字{全角6文字}まで)があり場合によっては文字が見切れてしまうのでタッチアイコン用のタイトルをページタイトルとは別に設定しましょう。

<meta name="apple-mobile-web-app-title" content="タッチアイコン用のタイトル">

をタイトルタグの下に追加します。


<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タッチアイコンを設定する</title>
<meta name="apple-mobile-web-app-title" content="タッチアイコン用のタイトル">
<link rel="stylesheet" href="css/style.css">

<!-- iOS Safari and Chrome -->
<link rel="apple-touch-icon" sizes="192x192" href="touch-icon.png">

<!-- Android標準ブラウザ(一部) -->
<link rel="shortcut icon" href="touch-icon.png">
</head>

タッチアイコンをホーム画面に追加する

IOS Safari」の場合

ブラウザーでWebサイトを表示し、「アクション」アイコンから「ホーム画面に追加」をタップします。

f:id:yachin29:20151112095231p:plain
「アクション」アイコンをタップ


f:id:yachin29:20151112095243p:plain
「ホーム画面に追加」をタップ


Androidの場合

Androidの場合、機種によって方法が全く違うので、以下のサイトを参考にして下さい。
promo.search.yahoo.co.jp

.htaccessの作成

.htaccessファイル」を使った自動振り分け

スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分ける機能」を作ってみましょう。この授業では「.htaccessファイル」を使って、サーバ側で自動振り分けする方法をやってみます。

まずは「.htaccessファイル」を作成します。この際、ローカルサイドで「.htaccessファイル」を作成すると、不可視ファイルの設定などで問題が起こりやすいので、一旦「htaccess.txtファイル」として作成し、サーバー側にアップロードしたのちに、「.htaccessファイル」にリネームする方法でやってみます。


今回の自動振り分けは

  1. ウェブサーバが「Apache
  2. 設定ファイル「.htaccess」の設置が許可されている
  3. mod_rewriteモジュールが利用可能

の条件が必要です。


授業ではxdomainかwebcrowを使います。
www.xdomain.ne.jp


.htaccessの記述内容

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^$ /pc/sp/ [R,L]

Header set Vary User-Agent
</IfModule>
2行目
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]

HTTP_USER_AGENT」は、アクセス端末の種類を示します。
最後にある [NC] という記述は、「大文字・小文字を区別しない」という意味の指示です実際にユーザエージェント名に含まれる文字列が「android」でも「ANDROID」でも、同じだとみなされます。



3行目
RewriteCond %{QUERY_STRING} !mode=pc

URLの末尾に「?mode=pc」という文字列が付いていた場合には、スマートフォン用ページに移動させない(リダイレクトしない)ようにする記述です。なお、「mode=pc」という文字列は何でも構いません。「pc-site」や「show-pc-edition」など、何でも好きな文字列を指定できます。


4行目
RewriteRule ^$ /pc/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/pc/sp/">


最後にスマートフォンサイト用の「index.htmlファイル」に「PC版を表示」などのボタンを作り、「.htaccessファイル」が有効になっていても、スマートフォンでPCのデータを表示出来るようにしましょう。

<a href="http://○○○○○/pc/?mode=pc">PC版を表示</a>
広告を非表示にする

jQuery.3 では .loadは廃止

2016年6月に「jQuery.3.x」バージョンがリリースされ、現在では、最新版のv3.2.1がリリースされています。
jQuery.2.x」バージョンから「jQuery.3.x」バージョンへの大きな変更として、 .load .unload .error のイベントが廃止されました。
中でもよく使われる「 .load() 」イベントは「jQuery.3.x」バージョンでも使用出来る代わりの記述方法をしっかりと覚えておきましょう。

jQuery.2.x」バージョンまでの書き方
/*  load  */
$(window).load(function(){
  //実行内容
})
jQuery.3.x」バージョンまでの書き方
$(window).on('load',function(){
  //実行内容
});


.click() から
.on('click',function() になったのと同じイメージです。


以上を踏まえて、3.xバージョンでも動くように書き換えましょう。

$(function() {

if($(window).width() > 767){ 
$(function() {
  $('#container').css('display','none');
  $('#loader').fadeIn(2000);
});

$(window).on('load',function () { //全ての読み込みが完了したら実行
  $('#loader-bg').delay(3000).slideUp(400);
  $('#container').css('display', 'block');
});

//5秒たったら強制的に実行
$(function(){
  setTimeout(stopload(),5000);
});
function stopload(){
  $('#loader-bg').delay(3000).slideUp(400);
  $('#container').css('display','block');
};

}else {
 $('#loader-bg').css('display','none');
 $('#loader img').css('display','block');
};
});
CDNに接続できない場合の代替策

なかなかないとは思いますが、万が一CDNがダウンしてしまった場合の代替策として、フォールバックという方法があります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- CDNが使えない場合は自サーバーに置いたjQueryファイルを読み込む -->
<script>
window.jQuery || document.write(‘<script src="js/jquery-3.2.1.min.js"><\/script>’);
</script>

SVGを使ったアニメーション

carlphilippebrenner.com

tympanus.net

gardenstudio.com.br


SVGとは?

SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。
ベクター画像は画像をビットマップ形式ではなく、線や面などの図形の集合体として扱うため、見る環境に応じて最適な表示が可能となる。
SVGではアニメーション機能などもサポートしており、Flashで行えるような簡単なインタラクティブコンテンツの作成が可能となっている。
SVGファイルはAdobe社のIllustratorに代表される画像編集アプリケーションで扱うことができるほか、HTMLとの連携を意識して、Webブラウザでも対応が進められている。
ちなみに、SVGXMLベースで策定された言語のため、テキスト形式のファイルで画像を表現するという珍しい形態を取っている。


developer.mozilla.org

SVGに対応しているブラウザー


blog.codecamp.jp

今回の授業ではSVGを単独で使用するだけでなく、HTMLファイルの中に記述し、css3アニメーションを併用します。
こうする事でブラウザー上で色々な表現方法が可能になります。
※ただしIEOperaは、全てのSVG要素でCSSアニメーションを受け入れないという問題があります。

変化させる方法は主に以下の3つがあります。

CSSプロパティ(transitionやanimation)を使う→簡単だけどIE未対応
setTimeout()を使う→IEも動くけど面倒
JavaScriptライブラリを使う→簡単&IEでも動くけどサイズが膨大
それぞれ、長所・短所があるので、状況に応じて使い分けると良いかと思います(ちなみにjQuerySVGの要素を扱えないので使えません)。


SVGのパスは、以下のようなプロパティを使って、スタイルを指定出来ます。

stroke:線の色
stroke-width:線の太さ
fill:塗りつぶしの色
stroke-dasharray:破線の間隔
stroke-dashoffset:破線の開始位置


今回は破線のプロパティである、stroke-dasharraystroke-dashoffsetを使い、線を引くアニメーションを作成します。


jakearchibald.com



また、今回新たに出てきた「animation-fill-mode」プロパティもしっかり覚えましょう。
none(初期値)

キーフレームで指定されたスタイルは、アニメーションの前後には適用されません。

forwards

アニメーションの実行後にキーフレームの最後の指定が適用されます。

backwards

アニメーションの実行後、即座にキーフレームの最初のスタイル指定を適用します。

both

forwards と backwards の両方が適用されます。アニメーション実行前には backwards が、実行後には forwards があると考えると分かりやすいと思います。





参考サイト
SVGのアニメーションで線を引く方法まとめ(IEへの対応も)|2.IDEA


www.webprofessional.jp

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>全面レイアウトその2</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>

<body>
<div id="container">
<div class="top t_left">
<div class="cap">
<h2>From Our Archives</h2>
<p class="description">モードのハイライトをプレイバック!<br>VOGUE JAPAN撮りおろしのアーカイブビジュアル集。</p>
<p class="more"><a href="#">view more ></a></p>
</div><!-- /.cap -->
</div>
<div class="top t_right"></div>
<div class="bottom b_left"></div>
<div class="bottom b_center"></div>
<div class="bottom b_right"></div>
</div>
<div id="loader-bg">
</div>
<div id="loader">
<svg>
省略
</svg>
</div>
</body>
</html>

星空メッセンジャーササキユウタ

星空メッセンジャー ササキユウタ

星空メッセンジャーササキユウタの星に関する活動と旅の履歴をご覧いただくWebサイトです。星空解説や星空ガイドの活動履歴や、世界一周の旅で撮影した星景写真がご覧いただけます。


f:id:yachin29:20170618214907p:plain

http://yuta-sasaki.com/

ローディング中にアニメーション画面を表示させる

liginc.co.jp


photoshopvip.net


uxmilk.jp


最近は、トップページに全画面サイズの画像や動画を表示させているサイトも珍しくありません。アイキャッチとしては非常に有効ですが、どうしてもデータサイズが大きくなり、表示に時間がかかってしまいます。また、テキストだけが先に表示され、一瞬ですがレイアウトが崩れてしまったりしてしまいます。

もちろん1番良いのは画像や動画のデータを出来る限り軽くする事ですが、場合によっては、サイトのデータが読み込まれるまでローディング画像を擬似的に用意する事でユーザーがストレスを感じ難くしてあげるなどの方法もあります。
本来はgifアニメなどでローディング画像を作るのが一般的ですが、今回はCSS3のアニメーションを使って、動きのある画像を見せる事でよりストレスの軽減を図ります。
すべての動きをCSS3のアニメーションで動かす事も一応出来ますが、jQueryと使い分ける事で、よりスムーズに表示させましょう。






イメージとしては、読み込み中はメインコンテンツの上に目隠し用のレイヤーを表示し、全ての読み込みが完了したタイミングで目隠しを非表示にする、というイメージです。

CSS3でやる事

ローディングアニメの動き

jQUeryでやる事

ローディング画像のレイヤーの表示・非表示のコントロール



目隠し用のローディング画像があるレイヤー(#containerの外)

<body>


<div id="container">
  メインコンテンツ
</div>

<div id="loader-bg">
<div id="loader">
<img src="ローディング画像">
</div>
</div>
</body>
jQueryでの「ready」と「load」と違いを理解する

両方ともjQueryを呼び出す為のものですが、呼び出すタイミングが微妙に違います。

「ready」はロードされて操作が可能になったタイミングで実行するという意味です。
「load」はロードされて画像などの関連データの読み込みが全て完了したら実行します。


css

#loader-bg {
width: 100%;
height: 100vh;
background: #000000;
position:fixed;
top:0;
left: 0;
}
#loader {
width: 160px;
height: 160px;
background: #E16163;
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
display:none;
}
$(function(){
  $('#container').css('display','none');
  $('#loader').fadeIn(400);
});
$(window).load(function () { //全ての読み込みが完了したら実行
  $('#loader-bg').delay(3000).slideUp(400);
  $('#loader').delay(2000).fadeOut(1000);
  $('#container').css('display', 'block');
});


しかし、このままではスマホ時にスクリプトが適応されていない為、ずっとカバーがかかったままになってしまいます。
なので、if文に767px以下では「$('#loader-bg').css('display','none');」が適用されるようにスクリプトを追加しましょう。

CSS3によるアニメーション・animation

CSS3によるアニメーションは大きく分けて、トランジション(transition)とアニメーション(animation)の2つに別ける事が出来ます。

CSS3におけるトランジション(transition)とアニメーション(animation)の違い


「transition」

  • 動かすために:hoverなどのきっかけが必要
  • トランジションでは実行後に元のプロパティ値に戻る
  • 比較的簡単な記述で動かす事が可能


「animation」

  • transitionより細かい設定が可能
  • 記述が複雑
  • 「@keyframes」の記述が必要

http://caniuse.com/などのサイトでブラウザサポート状況を確認する。

animation関連プロパティ

animation-name 必須

@keyframes で定義した名前を指定します。これを指定していないとアニメーションは実行されません。

animation-duration 必須

一回分のアニメーションを実行する時間の長さを指定します。

animation-timing-function

アニメーションのタイミングや進め方を指定します。
ease(初期値)
ease-in
ease-out
ease-in-out
linear

weboook.blog22.fc2.com


animation-delay

要素が読み込まれてからアニメーションがいつ始まるかを指定します。初期値の 0 だとただちに実行されます。

animation-iteration-count (初期値は1)

アニメーションを繰り返す回数を数字で指定します。無限ループにするには infinite を指定。

animation-direction

アニメーションを繰り返す方向を指定します。

normal … 通常の方向で再生(初期値)
alternate … 奇数回で通常・偶数回で反対方向に再生(行って帰って行って帰って…という具合)
reverse … 逆方向に再生
alternate-reverse … alternate の逆方向に再生

animation-fill-mode

アニメーションの再生前後の状態を指定します。
none(初期値)
forwards … 再生後、最後のキーフレームの状態を保持
backwards … 再生前、最初のキーフレームの状態を適用
both … forwards と backwards の両方を適用



背景色が移り変わるアニメーション

body {
  background-color: #0CC;
  animation: bg-color 10s linear infinite;
  -webkit-animation: bg-color 10s linear infinite;
}
@-webkit-keyframes bg-color {
  0% { background-color: #0CC; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #0CC; }
}
@keyframes bg-color {
  0% { background-color: #0CC; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #e74c3c; }
}

参考サイト

CSS3でアニメーション!transitionとanimationまとめ(サンプル付き) – フラップイズム



CSS3アニメーションに挑戦!色が移り変わる背景を実装しよう | Webクリエイターボックス


www.nxworld.net




背景にグラデーションを掛けたアニメーション

f:id:yachin29:20151002002549j:plain


便利なジェネレーション

www.gradient-animator.com




SVGによるアニメーション

postd.cc

jakearchibald.com