読者です 読者をやめる 読者になる 読者になる

求職者支援訓練webサイト制作科1月クラス

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科1月クラスの授業解説ブログです。

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

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

Faviconの設定

web制作

favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したものである。

モダンブラウザーでは通常のPNGやGIF形式でも表示出来ますが、IEでは今のところ「.icoファイル」でないと表示出来ないので、PNGなどで作った画像を「.ico」ファイルにジェネレーターなどで変換しましょう。
Photoshopからそのまま「.icoファイル」に書き出せるプラグインなどもありますが、「.icoファイル」の特性であるマルチアイコン化(複数のサイズの画像を1つのicoファイルで持つ事が出来る)をするには、やはりネット上にあるジェネレーターを使うのが便利です。


ネット上にはfaviconジェネレーターは沢山ありますが、ここでは下記のジェネレーターを使います。
http://ico.bradleygill.com/index.php
qfor.info - 


faviconのサイズですが、基本的には16px×16pxですが、OSやデバイスによって様々ですべてに対応させるとなるときりが無くなってしまうので、今回は

の3種類のみに限定します。



Webサイトに必要なfaviconが21個になっていた - IT探検記


肝心の記述ですがIEのバージョンによって多少変わってきますが、
今のところIE10以下にも対応させるには以下の記述がベターだと思います。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Faviconを表示させる</title>
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.ico"/>
<link rel="apple-touch-icon" href="touch-icon.png" />
</head>

また、icoファイルは他のデータと比べるとキャッシュが強い傾向があるので、新しいfaviconに変えたのに反映されない時などは、ブラウザーのキャッシュをクリアしてみて下さい。



favicon.ico はlink要素で明示的に指定するべきか | 富永日記帳

広告を非表示にする

Javascript 演習問題

JavaScript

Javascript演習問題


サムネール(5個)にマウスを乗せたとき、メイン画像が変化するように記述しなさい。(画像、記述方法は自由)


今日の西暦年月日曜日(〜年〜月〜日〜曜日)を表示させなさい。


現在の時刻を(〜時〜分〜秒)を表示させなさい。



入力された値が5の倍数かどうかを判別する記述をボタンを押したときに表示させなさい。


1〜100までの合計を、DOMの記述を使ってボタンを押したときに表示させなさい。


円とドルの換算表を1-50(5ドル単位)の範囲で表示させなさい。(1ドルレート:103円)


おみくじを配列を使って作りなさい。


おみくじをDOMのdocumentオブジェクトを使って作りなさい。

広告を非表示にする

画像の可変方法

レスポンシブデザイン

画像をレスポンシブに対応(可変)にするには2つの方法があります。
img要素の場合はフルードイメージ化(max-width:100%)
background画像の場合はbackground-sizeを指定します。

この2つの方法をしっかりと覚えていれば、画像をレスポンシブに対応(可変)させる事が出来るのでしっかりと覚えましょう。

@charset "utf-8";
/* CSS Document */

html,body,p {
  margin:0;
  padding:0;
}
img {
  vertical-align:bottom;
}

body {
  background:#666666;
}
#container {
  width:1000px;
  margin:0 auto;
}
header {
  width:1000px;
  height:350px;
  background:url(img/header.png) no-repeat;
}
#content {
  width:1000px;
  background:#FFF;
  overflow:hidden;
}
p {
  width:480px;
  float:left;
  margin:10px;
}
@media screen and (max-width:999px) {
#container {
  width:100%;
}
header {
  width:100%;
  height:0;
  padding-bottom:35%;
  background:url(img/header.png) no-repeat left top/cover;
}
#content {
  width:100%;
}
p {
  width:48%;
  margin:1%;
}
img {
  max-width:100%;/*フルードイメージ*/
}
}
@media screen and (max-width:500px){
p {
  width:98%;
  float:none;
}
}
広告を非表示にする

jQueryとは

jQuery

jQuery(ジェイクエリー)とは、ウェブブラウザー用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月にリリースした。様々な場面で活用されており、JavaScriptライブラリのスタンダードと呼ぶ者もいる

f:id:yachin29:20160425030539j:plain
https://jquery.com/



jQueryの特徴

jQueryの使い方

jQueryを使用する際には、まずjQuery本体をダウンロード、もしくはCDN(Content Delivery Network)を使い、HTMLファイルにリンクさせる必要があります。
jQuery本体はバージョンが1系と2系に分類されていて、2系は1系に比べIE8以前のサポートを除いたことでより軽量化を図っています。(※なので2系を使っているWEBサイトはIE8未満ではjQueryは動きません)

本体をダウンロードして使う場合

上記のjQuery公式サイトからダウンロードしましょう。jQueryはバージョンにより動かないメソッドがあるのでバージョンコントロールが必要です。

古いjQueryのバージョンはこちらからダウンロード出来ます
https://code.jquery.com/jquery/code.jquery.com


また、公式サイトからダウンロードする際に「compressed」と「uncompressed」の2種類のファイルが用意されています。

  • compressed~……改行などを除去してファイルサイズを抑えたファイル
  • uncompressed~……圧縮前の元ファイル。構造が見やすいがファイルサイズは大きい

通常、jQuery本体の記述を触る事はほとんど無いので、ファイルにサイズの軽い「compressed」版を使用しましょう。

本体をCDNで使う場合

CDN(Content Delivery Network)とは、ネットワーク経由でコンテンツを提供するサービスで、jQuery本体をダウンロードする事無くネットワーク上にあるjQuery本体を使用する方法です。
CDNを使用する場合のメリットは、他のサイトでも同じCDNのjQuery本体を使用している場合、ユーザーがそのサイトを先に閲覧してればブラウザにキャッシュされるのでjQueryを読み込む必要が無い。つまり、使うサイトが多いほど事前にキャッシュされてる可能性が上がります。
CDNの場合、一見メリットだらけのように見えますが、CDN元でシステムトラブルがあったり、ネットワークが不安定な所では動かないので注意が必要です。またCDNの場合は、Minified(改行が除かれた圧縮版)を使用しましょう。


CDNはjQueryの公式サイト以外にもGoogleMicrosoftにも用意されています。


developers.google.com


https://www.asp.net/ajax/cdn#jQuery_Releases_on_the_CDN_0www.asp.net



記述方法

HTMLファイルは上から順番に読み込まれるという原則から、jQueryを使用する際は必ずjQuery本体を最初に記述しましょう。

jQuery本体をダウンロードしている場合

<head>
 ・・・
<script src="js/jquery-1.11.0.min.js"></script>
</head>

もしくは

<body>
 ・・・
<script src="js/jquery-1.11.0.min.js"></script>
</body>
CDNの場合
<head>
 ・・・
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>

基本形

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="js/jquery-1.11.0.min.js"></script>
<script>
  //jQueryを利用したコード
</script>
</head>
<body>
</body>
</html>


CDNを使用する場合、万が一ネットワークが不安定になった時の事も考えて、バックアップ用にダウンロードしたjQueryと両方を記述する方法もあります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="jquery-1.11.0.min.js"><\/script>');</script>
</script>
</head>
<body>
</body>
</html>
広告を非表示にする

DOMを使ったおみくじ

JavaScript

今まで、色々なパターンのJavaScriptを使っておみくじを作ってきましたが、今回はDOMのdocumentオブジェクトを使ったパターンをやってみましょう。

documentオブジェクト

documentオブジェクトとは、HTMLで表現されているコンテンツをすべて保持しているオブジェクトです。
単純に説明すれば、Windowオブジェクトがブラウザそのものだったのに対し、documentオブジェクトはアクセスしているWebサイトそのものと言ってでしょう。

documentオブジェクトを使うことでより多くの事を感覚的に行うことが出来ます。またjQueryとも考え方が非常に似ているので、しっかりと覚えておきましょう。

DOMでのオブジェクトの使い方

JavaScript

Windowオブジェクト

Windowオブジェクトは、ブラウザーが持っている情報をそのまま持っています。ブラウザーの様々な情報を確認・取得する事が出来ます。
早速確認してみましょう。

<script>
console.log(window);
</script>

documentオブジェクト

documentオブジェクトとは、HTMLで表現されているコンテンツをすべて保持しているオブジェクトです。


DOMの操作

getElementById(id)

DOMで各要素を動かす場合、まず要素を取得しなければいけません。取得には、要素取得のメソッド「getElementById(id)」を使います。

<body>
<h1 id="title">DOMの練習</h1>
<p id="one">テキスト1</p>
<p id="two">テキスト2</p>
<script>
var h1 = document.getElementById('title');
console.log(h1);
</script>
</body>
要素内のテキストの取得、変更

要素の中のテキストのみをコントロールしたい場合は、「textContentプロパティ」を使います。

テキストの取得
<script>
var h1 = document.getElementById('title');
console.log(h1);

var title = h1.textContent;
console.log(title);
</script>
テキストの変更
<script>
var h1 = document.getElementById('title');
h1.textContent = "タイトルを変更";
</script>

要素を書き換える

innerHTMLというプロパティを使うと指定した要素ごと書き換わります。

<script>
var p1 = document.getElementById('one');
  p1.innerHTML = '<h2>中見出し</h2>';
</script>

要素やテキストを作成する

新しく要素を生成する場合は、「createElement(tag_type);」や「createTextNode(text);」を使います。

createElement(tag_type)
新しく要素(タグ)を生成する


createTextNode(text)
新しくテキストを生成する

しかし、これだけでは要素が生成されません。新しい要素を正しい文章構造を持ってブラウザで表示させるためには、既存の要素のどれかを親要素に指定し、子要素として追加する必要があります。新しい要素の場所を明確にして、DOMのツリー構造に正しく組みこまなければいけないわけです。
このツリー構造というのはjQueryにも共通する必要に大切な考え方なので、しっかりと理解しましょう。


特定の親要素の下に子要素を追加するためのメソッドがappendChild(element); です。
append(追加する)

今回はbodyタグの中に直接新しいpタグを生成したいので、pタグにとって親要素はbodyです。なのでbodyに対して「appendChild」を指定します。

<script>
var p = document.createElement('p');
var text = document.createTextNode('テキスト3');
document.body.appendChild(p).appendChild(text);
</script>

画像の差し替え

<body>
<p><img id="image" src="img/01.png" alt="昼間の画像"></p>
<script>
//ファイルが読み込まれたタイミング
window.onload = function() {
  var image = document.getElementById('image');
  image.src = 'img/02.png';
  image.alt = '夕方の画像';
};
</script>
</body>