HTML・XML

favicon.icoやapple-touch-icon.pngを作りたい時のベストな方法

ウェブサイトを作ったら必ずやっておきたのが、ファビコンの作成。
そして、スマートフォンでホームに保存する際に使われるapple-touch-icon。

解像度に合わせて複数のサイズの画像をアップするのがベストだが、Photoshopで作るにしても手間がかかることは確か。
そんな時は、画像をアップすると自動的にファビコンやapple-touch-iconを生成してくれるFavicon Generatorのサービスを利用するといい。

Googleで検索すると様々なサービスが存在するが、お薦めはこのサイト。

Multi Favicon Generator
http://favicon.miugle.info/ ピクチャ 3Multi Favicon Generatorなら、1枚のアイコン画像からfaviconはもちろんiPhone&Android向けの各種apple-touch-iconも一気に生成してくれる。

使い方も簡単。
512ピクセル×512ピクセルの画像を用意したら、サイトにアクセスしてアップ。
各種画像データが含まれる圧縮ファイルのが作成されるので、自分のPCにダウンロード。
圧縮ファイルを解凍すると以下のファイルがある。

apple-touch-icon-57×57.png
touch-icon-iphone-retina.png
apple-touch-icon-72×72.png
apple-touch-icon-114×114.png
apple-touch-icon-144×144.png
favicon_sample.txt
favicon.ico
touch-icon-ipad-retina.png
touch-icon-ipad.png

favicon_sample.txt以外のファイルをサイトのルート(index.htmlやindex.phpがある階層)にアップ。
faviconやapple-touch-iconの設定は、inex.html等をエディタで開きfavicon_sample.txtの中身を追加。

具体的には、スタイルシートを呼び出している場所

<link rel="stylesheet" href="style.css" />

やtitleタグの場所

<title>○○のホームページ</title>

の前後に

<link rel="apple-touch-icon" sizes="152x152" href="/touch-icon-ipad-retina.png">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="120x120" href="/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="76x76" href="/touch-icon-ipad.png">
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="shortcut" href="/favicon.ico" type="image/x-icon">

を追加する。

ローカルストレージで複数の値を保存したい時(JSON)

ローカルストレージで複数の値を保存したい時、最も簡単なのはそれぞれの名前で複数のデータを保存すること
例えば以下の方法。

Javascript

<script type="text/javascript">
//複数のローカルストレージに保存
function setConfig(){
var n = document.getElementById("na").value;
var t = document.getElementById("te").value;
var a = document.getElementById("ad").value;
localStorage.setItem('onamae',n);
localStorage.setItem('tel',t);
localStorage.setItem('address',a);
alert("保存しました");
}
</script>
上記の方法は、保存データがそれぞれ多い場合はそれでも構わないが、少ないデータで無駄に多種類のデータを保存するのは好ましい方法とは言えない。

ローカルストレージに複数の値を保存するにはいくつか方法があるが、今後の展開をふまえてJSON形式で保存する方法を紹介する。
そのまま使えるサンプルになっているから、適所にコピーして自由に改造して使ってもらいたい。

なお、今回も以下のサンプルではjqueryを使うことを前提としているから、まずはヘッダーでjqueryを読み込んでおくこと。

html

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
Javascript
<script type="text/javascript">
//ローカルストレージに保存
function setConfig(){
var n = document.getElementById("na").value;
var t = document.getElementById("te").value;
var a = document.getElementById("ad").value;
//保存データ
var datalist = {onamae:n,tel:t,address:a}
//ローカルストレージに保存
localStorage.setItem('config', JSON.stringify(datalist));
alert("保存しました");
}
//ローカルストレージを削除
function removeConfig(){
na.value = '';
te.value = '';
ad.value = '';
localStorage.clear();
alert("削除しました");
}
//ローカルストレージから取得
function getConfig(){
if(localStorage.getItem("config")){
var d = JSON.parse(localStorage.getItem("config"));
na.value = d.onamae;
te.value = d.tel;
ad.value = d.address;
}
}
//ページ読み込み時にローカルストレージから取得
$(document).ready(function(){
getConfig();
});
</script>
html
お名前<input type="text" id="na" />
電話番号<input type="text" id="te" />
住所<input type="text" id="ad" />
<button id="button" onclick="setConfig()">保存</button>
<button id="button" onclick="removeConfig()">すべて削除</button>

html5の機能、ローカルストレージを使いたい時

html5のローカルストレージはとても簡単に使えて便利。わざわざ仕組みを解説するより、なるべく単純でそのまま使えるサンプルを記載しておくから、コピーして必要な箇所を変更して使ってもらいたい。
PCから試す時はGoogleのChrome等、html5に対応したブラウザを使うこと。下のサンプルの場合、好きな名前を入力して保存ボタンをクリックした後、リロードしたり別のページを読み込んだ後に戻るとデータが保存されていることが確認できる。

なお、以下のサンプルではjqueryを使うことを前提としているから、まずはヘッダーでjqueryを読み込んでおくこと。

html

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

ローカルストレージは同じ名前で空の内容を上書きすることで見かけ上削除された状態には出来るが、完全に削除したいと思うユーザーもいるから、削除ボタンのサンプルも一緒に載せておく。

Javascript

<script type="text/javascript">
//ローカルストレージに保存
function setConfig(){
var na = document.getElementById("na").value;
localStorage.setItem('name',na);
alert("保存しました");
}
//ローカルストレージを削除
function removeConfig(){
na.value = '';
localStorage.clear();
alert("削除しました");
}
//ローカルストレージから取得
function getConfig(){
config_na = localStorage.getItem('name');
na.value = config_na;
}
//ページ読み込み時にローカルストレージから取得してテキストボックスに表示
$(document).ready(function(){
getConfig();
});
</script>

html

お名前<input type="text" id="na" />
<button id="button" onclick="setConfig()">保存</button>
<button id="button" onclick="removeConfig()">すべて削除</button>

なお、スマートフォンなどHTML5に対応している可能性が高い環境はこれだけで良いが、PC環境の場合は、まだローカルストレージに対応していないブラウザでアクセスされることが多いだろう。
そんな時は下のようなサンプルで、アラートを出すか、サンプルを参考に条件分けをして処理を分岐するといい。

Javascript

if(typeof localStorage == 'undefined'){alert("ローカルストレージが使えません");}

 

Javascript複数のセレクトメニュー(プルダウンメニュー)どちらかが変更されたらGETで送信したい時

表示の絞り込み等で複数のセレクトメニューを使用している時、送信ボタンをクリックしなくてもセレクトメニューに変更があった時点で送信してくれると便利な場合がある。

ちなみにセレクトメニュー(プルダウンメニュー)が1個の場合は

Javascript

function navi(c){
var class = c.options[c.selectedIndex].value;
location.href = '?c=' + class;
}

HTML

<form method="get" action="" name="form">
<select name="class" onChange="navi(this)" id="class-items">
<option value="0">全クラス表示</option>
<option value="1">1組</option>
<option value="2">2組</option>
</select>
</form>

上記ではクラスのプルダウンを変更すると同ページにGETで引数が付いた状態でジャンプする。

例 http://www.digital-gate.com/?c=3

セレクトメニュー(プルダウンメニュー)が2個の場合は

Javascript

function multipleNavi(obj){
var class = document.form.class.value;
var group = document.form.group.value;
location.href = '?c=' + class + '&g=' + group;
}

HTML

<form method="get" action="" name="form">
<select name="class" onChange="multipleNavi()" id="class-items">
<option value="0">全クラス表示</option>
<option value="1">1組</option>
<option value="2">2組</option>
</select>
<select name="group" onChange="multipleNavi()" id="group-items">
<option value="0">全グループ表示</option>
<option value="1">グループ1</option>
<option value="2">グループ2</option>
</select>
</form>

上記ではクラスまたはグループいずれかのプルダウンを変更すると同ページにGETで両方の引数が付いた状態でジャンプする。

例 http://www.digital-gate.com/?c=2&g=1

ランダム文字列生成スクリプト(JavaScript版)


指定した文字種と文字数で、ランダムな文字列が作成できます。

基本はローマ字小文字(a-z)追加したい文字種があればチェックします。

ローマ字大文字(A-Z)
数字(0-9)
ハイフン「-」
アンダーバー「_」

そのままコピペで使えるJavaScriptとhtmlは以下

<script type="text/javascript" language="JavaScript">
function Generat(){
var result = '';
var source ='abcdefghijklmnopqrstuvwxyz';
if(document.generator.c1.checked){source +='ABCDEFGHIJKLMNOPQRSTUVWXYZ';}
if(document.generator.c2.checked){source +='0123456789';}
if(document.generator.c3.checked){source +='-';}
if(document.generator.c4.checked){source +='_';}
var len = document.generator.c5.options[document.generator.c5.selectedIndex].value; 
for(var i=0; i<len; i++) {result += source.charAt( Math.floor( Math.random() * source.length));}
alert(result);
return result;
}
</script>
<form name="generator">
<input type="checkbox" name="c1" checked>ローマ字大文字(A-Z)<br>
<input type="checkbox" name="c2" checked>数字(0-9)<br>
<input type="checkbox" name="c3">ハイフン「-」<br>
<input type="checkbox" name="c4">アンダーバー「_」<br>
<select name="c5">
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
<option value="10">10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value="15">15
<option value="16">16
<option value="17">17
<option value="18">18
<option value="19">19
<option value="20">20
<option value="21">21
<option value="22">22
<option value="23">23
<option value="24">24
<option value="25">25
<option value="26">26
<option value="27">27
<option value="28">28
<option value="29">29
<option value="30">30
<option value="31">31
<option value="32">32
<option value="33">33
<option value="34">34
<option value="35">35
<option value="36">36
<option value="37">37
<option value="38">38
<option value="39">39
<option value="40">40
<option value="41">41
<option value="42">42
<option value="43">43
<option value="44">44
<option value="45">45
<option value="46">46
<option value="47">47
<option value="48">48
<option value="49">49
<option value="50">50
<option value="51">51
<option value="52">52
<option value="53">53
<option value="54">54
<option value="55">55
<option value="56">56
<option value="57">57
<option value="58">58
<option value="59">59
<option value="60">60
<option value="61">61
<option value="62">62
<option value="63">63
<option value="64">64
</select> 文字<br>
<input value="作成" onclick="Generat()" type="button"><br>
</form>

jquery.validateでチェックボックスを必須項目にしたい時

jquery validateを使ったチェックにおいて通常の「input type=”text”」では自由に必須項目(required)の設定は簡単だが、複数選択が可能なチェックボックスにおいて必須項目の設定をしたい場合、同じやり方ではうまくいかない。サイトによってはjquery validateで「チェックボックスの必須項目は設定出来ない」と書いてあるところもあるが、チェックボックスの必須項目設定も可能。

テキストボックスでの必須項目設定とエラー表示は

<input type="text" size=50 name="name" class="required">
name:{required: "お名前を入力してください"},

のようにする。

チェックボックスの場合

例えば以下のようなフォームにおいてjquery validateを使ったチェックを行い、いずれか1つを選択することを条件にしたい時、

<input type="checkbox" name="lesson[]" value="1">1回目<br>
<input type="checkbox" name="lesson[]" value="2">2回目<br>
<input type="checkbox" name="lesson[]" value="3">3回目<br>
<input type="checkbox" name="lesson[]" value="4">4回目<br>

テキストボックスの時と同じようにしてnameであるlesson[]等を記載し

lesson[]:{required: "レッスンを選択してください"},

のようにするとエラーとなり失敗する。
[]を使う時は「’」「”」で囲み

'lesson[]':{required: "受講希望日を選択してください"},

とすれば良い。

htmlとjavascriptのサンプルは以下

JAVASCRIPT・HTML

(function(){
var rules = {
'lesson[]': {required: true}
};
var messages = {
'lesson[]':{required: "受講希望日を選択してください"}
};
$(function(){
$('#form').validate({
rules: rules,
messages: messages,
errorPlacement: function(error, element){
if (element.attr("name") == "lesson" ) error.insertAfter("#lesson_err");
}
});
});
})();
<input type="checkbox" name="lesson[]" value="1">1回目<br>
<input type="checkbox" name="lesson[]" value="2">2回目<br>
<input type="checkbox" name="lesson[]" value="3">3回目<br>
<input type="checkbox" name="lesson[]" value="4">4回目<br>
<div id="lesson_err"></div>

何もチェックしなかった場合「lesson_err」の位置に「受講希望日を選択してください」が表示される。

HTTPステータスコードについて

『HTTPステータスコード』はRFC2616等によって定められた3桁の数字からなるコードで、このコードを理解するとサイトの問題点を知ることができる場合がある。
例としてデジタルゲートが運営する某サイトの、ある日のレスポンスコードは以下の通り

コード 比率
Code 200 – OK 82.23% 3951
Code 206 – Partial Content 0.04% 2
Code 301 – Moved Permanently 0.06% 3
Code 302 – Found 8.12% 390
Code 304 – Not Modified 7.58% 364
Code 403 – Forbidden 0.23% 11
Code 404 – Not Found 0.87% 42
Code 500 – Internal Server Error 0.87% 42

表中の各コードに関する説明

Code 200 – OK 82.23% 3951
200 OK
ページが正しく表示された場合はこのステータスコードを返していることが多い。

Code 206 – Partial Content 0.04% 2
206 Partial Content
部分的GETリクエストを受けた場合に返される。

Code 301 – Moved Permanently 0.06% 3
301 Moved Permanently
Location: ヘッダに移動先のURLが示されている場合や、URLの末尾に/を付けずディレクトリにアクセスした場合に返される。

Code 302 – Found 8.12% 390
302 Found
以前はリクエストしたリソースが別のURLにあり、そのURLには存在していない場合のステータスコードであったが、今は302はFoundとして使われている。

Code 304 – Not Modified 7.58% 364
304 Not Modified
リソースが更新されていない場合に返される。

Code 403 – Forbidden 0.23% 11
403 Forbidden
アクセス拒否や処理出来ない場合に返される。

Code 404 – Not Found 0.87% 42
404 Not Found
アクセス権がない場合やリソースが見つからない場合に返される。

Code 500 – Internal Server Error 0.87% 42
500 Internal Server Error
CGIの文法エラー等、サーバ内部にエラーが発生した場合に返される。

例えば上記のデータにおいてCode 500やCode 403、Code 404が大量にある場合は、その原因を調べる必要がある。

iPhone対応サイトの作り方(その3)

iPhone専用のページを用意して対応する方法

iPhoneからのアクセスの場合、iPhone用ページにリダイレクトする

■構成しているページがPHPの場合(.php)

$hua = $_SERVER[“HTTP_USER_AGENT”];

if(ereg(“iPhone”,$hua)){

header(“Location: http://digital-gate.com/i/”);

}


iPhone対応サイトの作り方(その2)

同じページでレイアウトのみを変更して対応する方法

iPhoneからのアクセスの場合、iPhone用CSSに自動的に切り替える

■構成しているページがhtmlの場合

javascriptを使ってスタイルシート(CSS)を切り替える方法

if(navigator.userAgent.indexOf(‘iPhone’) != -1){

document.write(‘<link rel=”stylesheet” type=”text/css” href=”./css/iphone.css”>’);

}else {

document.write(‘<link rel=”stylesheet” type=”text/css” href=”./css/pc.css”>’);

}

■構成しているページがPHPの場合(.php)

※ユーザーエージェントを取得

$is_iphone = strpos($_SERVER[‘HTTP_USER_AGENT’],”iPhone”);

または

$hua = $_SERVER[“HTTP_USER_AGENT”];

if(ereg(“iPhone”,$hua)){$is_iphone = 1;}

※iPhoneなら、iPhone用のスタイルシートを出力

if($is_iphone){

$css = ‘<link rel=”stylesheet” type=”text/css” href=”./css/iphone.css”/>’;

}else{

$css = ‘<link rel=”stylesheet” type=”text/css” href=”./css/pc.css” />’;

}

なお、いずれの場合も、PCでのアクセス用のコンテンツや広告等、iPhoneでは不要なものは、

その部分を

<div class=”for-pc”>PC用アフィリエイトコード等</div>

としておき、

iPhone用のスタイルシートに

.for-pc{display:none;}

としておくことで、無駄な表示を減らすことが可能。



iPhone対応サイトの作り方(その1)

同じページ、レイアウトも変更せず対応する方法

iPhoneでPC向けページを表示させた場合、デフォルトで横幅980pxを想定して表示するようになっている。

つまり、少し前に作られた横幅が750px等のサイトの場合、左右に無駄な余白ができ、さらに表示が小さくなる。

そういった場合、以下のメタタグを入れることにより、無駄な余白を無くすことが可能。

※サイトの左右が750pxの場合

<meta name=”viewport” content=”width = 750″ />