2013-08-29

Favicon 作成

写真など、ディティールの多いものをFavicon化するにはPhotoshopで下準備する。

ハイコンにしてアンシャープマスクをきつめにかける
彩度をかなり上げる
小さいパーツは大きく描きなおす
48px×48pxサイズにし、jpgで保存

マルチジェネレーター
http://ao-system.net/favicon/index.php

小画像(16x16) 、中画像(32x32) 、大画像(48x48）の３サイズで保存してくれる。
「.ico」という拡張子で保存される。

<link rel="shortcut icon" href="http://サーバー名/パス/ファイル名.ico" type="image/vnd.microsoft.icon">
<link rel="icon" href="http://サーバー名/パス/ファイル名.ico" type="image/vnd.microsoft.icon">

相対パスじゃなくて、絶対パスで記述する。
これをヘッダー内に記述する。

2013-08-28

for文・if文・Math/Dateオブジェクト

課題

Q05　ブラウザがページを読み込む度に画像がランダムに変更するよう記述しなさい。

<script>
var img;
img = new Array();
img[0] = ' img/imgA.png ';
img[1] = ' img/imgB.png ';
img[2] = ' img/imgC.png ';
img[3] = ' img/imgD.png ';
img[4] = ' img/imgE.png ';
n = Math.floor( Math.random()*img.length );
document.write( '<p><img src="' + img[n] + '"></p>' );
</script>

Q04　夜・朝・昼・夕によって画像が変化するよう記述しなさい。
image placeholder
空のイメージ置き場として上記のURLからimgリンクを利用する。

<body>
<p><img src="http://placehold.it/350x150" id="change"></p>
<script>
var today;
var hour;
today = new Date();
hour = today.getHours();

if(hour <= 6){
   document.images['change'].src='img/q03_img04.png';
}else if (hour <= 12){
   document.images['change'].src='img/q03_img01.png';
}else if (hour <= 18){
   document.images['change'].src='img/q03_img02.png';
}else if (hour <= 24){
   document.images['change'].src='img/q03_img03.png';
}
</script>
</body>

Q03　ランダムに表示するように記述しなさい（確率の割合は適宜）

<script>
var rnd = Math.random();

if (rnd <= 0.33) {
  var msg = '今日はラッキーデー！';
} else if (rnd <= 0.66) {
  var msg = 'ボチボチ頑張っていきましょう〜';
} else {
  var msg = '思わぬ落とし穴にご注意を…';
}
document.write(msg);
</script>

Q02　数値を入力してもらい合否（70以上合格）の判定をする記述をしなさい。
簡単な値の振り分け（条件演算子：三項演算子）

<script>
var point;
point = prompt();
  alert(point >= 70 ? '合格':'不合格');
</script>

Q01　警告ダイアログボックスに、「１」「２」「３」という数字を順に表示するように「for文」で記述しなさい。

<script>
for(var i = 1; i <=3; i++){
	alert(i);
}
</script>

2013-08-28

クロスフェード

JavaScript jQuery

Brand Spanking New
Javascript / CSS Crossfader
ここからjsファイルとサンプルhtmlをダウンロードして利用する。

<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">
<head>
  <title>CSS crossfader script</title>
<style type="text/css">
body, div, p {
    margin: 0;
    padding: 0;
  }
#container {
  width: 144px;
  margin: 20px auto;
}
</style>

<script type="text/javascript" src="js/bsn.Crossfader.js"></script>
</head>
<body>
<div id="container">
<div class="box" id="cf1">
<p><img src="img/q04_imgA.png" width="144" height="144" alt=""></p>
</div><!--/.box-->
<div class="box" id="cf2">
<p><img src="img/q04_imgB.png" width="144" height="144" alt=""></p>
</div><!--/.box-->
<div class="box" id="cf3">
<p><img src="img/q04_imgC.png" width="144" height="144" alt=""></p>
</div><!--/.box-->
</div><!--#container-->
<script type="text/javascript">
var cf = new Crossfader(new Array('cf1', 'cf2', 'cf3'),1000, 3000);
</script>
</body>
</html>

2013-08-23

Flash - アルゴリズムの構築

FLASH

先生の解説ブログ

横に動かす

onClipEvent (load) {
	speed = 5;//移動速度
}
onClipEvent (enterFrame) {
	this._x += speed;
}

加速させる（オブジェクト自体に記述）

onClipEvent (load) {
	speed = 0;//初めは静止の0
	accel = 1;//加速度を１に設定
}
onClipEvent (enterFrame) {
	speed += accel;//速度に加速度を足す
	this._x += speed;//Ｘ座標に速度を足す
}

変数の型をグローバル変数で書く（タイムラインに記述）

var speed:Number;
var accel:Number;

this.onLoad = function(){
	speed = 0;//初めは静止の0
	accel = 1;//加速度を１に設定
}
cat_mc.onEnterFrame = function(){
	speed += accel;//速度に加速度を足す
	cat_mc._x += speed;//インスタンスのＸ座標に速度を足す
	trace(speed);
}

フラッシュをHTML5に変換できる

Google Swiffy
https://www.google.com/doubleclick/studio/swiffy/

2013-08-23

タブパネル

jQuery

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タブパネル</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
body, div, ul, li {
  margin:0;
  padding:0;
}
ul {
  list-style: none;
}
body {
  font-size: 16px;
  font-family:
    "Hiragino Kaku Gothic ProN",  Meiryo, sans-serif;
    color: #545454;
}
#container {
  width: 500px;
  margin: 50px auto;
}
ul.tab li{
  float: left;
  width: 100px;
  height: 40px;
}
ul.tab li a {
  background: url(img/tab.jpg) no-repeat;
  display: block;
  outline: none;
  color: #365A7E;
  text-align: center;
  line-height: 40px;
}
ul.tab li a.selected {
  background: url(img/tab_selected.jpg) no-repeat;
  text-decoration: none;
  color: #C06;
  cursor: default;
}
ul.panel {
  clear: both;
  border: 1px solid #aab7c8;
  border-top: none;
}
ul.panel li {
  padding: 20px;
  text-indent: 1em;
}
</style>
</head>
<body>
<div id="container">
<ul class="tab">
<li><a href="#tab1" class="selected">JavaScript</a></li>
<li><a href="#tab2">CSS</a></li>
<li><a href="#tab3">HTML</a></li>
<li><a href="#tab4">jQuery</a></li>
<li><a href="#tab5">XHTML</a></li>
</ul>
<ul class="panel">
<li id="tab1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse congue elit eu mauris sollicitudin dictum. Phasellus nec felis ut arcu placerat tincidunt. Vestibulum luctus mauris ac ante molestie eleifend. Quisque dapibus nulla ac purus volutpat posuere a quis nisl. Nam condimentum purus vitae nibh feugiat imperdiet. Cras purus mi, egestas vitae imperdiet volutpat, suscipit nec odio. Maecenas elementum aliquam metus nec ultrices. Suspendisse potenti. Praesent lobortis gravida massa in volutpat. Nunc id mauris id orci congue malesuada. Aliquam vel mauris risus, sit amet laoreet sapien. Maecenas varius gravida purus vel pharetra. Sed quis leo id mi laoreet accumsan. Vestibulum ac mauris purus, nec rutrum sem. Sed euismod magna a lacus consectetur in mattis quam suscipit. Phasellus nec enim libero. Donec sit amet justo diam. In hac habitasse platea dictumst. Sed nibh libero, iaculis eget aliquet eu, rhoncus nec ligula. 
</li>
<li id="tab2">
Nam cursus molestie erat, a sodales erat sollicitudin ut. Maecenas nec urna mi, eu congue turpis. Duis vitae volutpat lorem. Ut vulputate tempor elit, vitae iaculis elit sollicitudin at. Ut gravida fermentum tempor. Mauris metus ante, volutpat et porta a, malesuada vel purus. In lobortis ullamcorper lorem eu malesuada. Nullam sollicitudin, urna eu euismod suscipit, eros sapien adipiscing arcu, sit amet ultricies lacus elit sed urna. Nam scelerisque, nulla eu mollis elementum, ipsum tortor ullamcorper felis, eget laoreet diam turpis dignissim metus. In eget lectus sit amet mi pretium pellentesque varius vitae augue. Integer mattis, elit nec adipiscing rhoncus, elit tellus congue sapien, et auctor mi nisi in purus. Curabitur commodo, neque sed ornare porta, purus magna rhoncus eros, quis consectetur ipsum erat ac mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce sed turpis tortor, quis euismod enim. Integer faucibus venenatis egestas. Etiam eu metus et sem bibendum fermentum. Sed dui ante, sollicitudin at tincidunt at, pretium sit amet diam. Nunc porttitor tristique est sed pulvinar. Fusce eu ligula vitae orci venenatis sagittis sed quis ipsum. 
</li>
<li id="tab3">
Pellentesque in metus leo. Praesent porta, dolor nec mattis ullamcorper, velit purus mollis enim, nec tincidunt magna massa ornare elit. In ipsum enim, pellentesque vitae gravida ultrices, aliquet nec ante. Mauris sed nunc ut ligula dictum convallis vel et nunc. Aenean eget enim vitae nulla lacinia consequat. Quisque blandit, ante vel sodales sollicitudin, neque ante elementum leo, ut consequat dui risus ut purus. Vestibulum viverra lacus at felis dignissim bibendum. Maecenas interdum nisl eu metus porta luctus. Suspendisse nulla neque, ultricies nec facilisis nec, mollis id sapien. Donec nec quam et felis pulvinar fringilla a non orci. Maecenas tincidunt magna a sem faucibus eu interdum magna aliquam. Suspendisse a diam lorem, nec malesuada sapien. Nam a scelerisque velit. Integer commodo malesuada odio, sit amet rutrum ante viverra ut. In egestas, arcu id pretium tempus, ligula nibh interdum enim, non bibendum velit felis sed augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent augue eros, posuere pharetra pharetra eu, feugiat eu velit. 
</li>
<li id="tab4">
Vestibulum a quam scelerisque odio ultricies mollis eget a leo. Morbi dictum, velit lobortis hendrerit tincidunt, lacus nisl rhoncus felis, commodo sollicitudin magna augue non est. Nunc in felis quis purus dignissim blandit vel ut erat. In hac habitasse platea dictumst. Nullam euismod auctor rhoncus. Proin et sem ac neque placerat vulputate. Nullam consequat purus eget libero posuere pulvinar. Aenean luctus luctus leo nec vehicula. Praesent eleifend nibh sed neque vestibulum hendrerit. Nulla suscipit vehicula sem, quis congue ligula gravida vel. Aliquam risus urna, pretium eget porttitor hendrerit, gravida at libero. Curabitur nec luctus risus. Etiam ullamcorper fringilla nisl hendrerit convallis. Duis in nibh tellus. Donec porta nibh id purus mollis sodales. Nam eget libero vel metus congue ultricies ut vitae nibh. Sed ac justo ac eros luctus ullamcorper ut tincidunt nibh. Fusce dapibus bibendum urna, id tempor turpis sodales sed. Nam dui purus, posuere vel placerat eu, posuere non magna. 
</li>
<li id="tab5">
Vestibulum consequat consequat aliquet. Aenean ut nunc dolor, vel dictum mauris. Proin neque eros, tincidunt at faucibus a, dapibus sit amet tellus. Etiam rutrum pharetra risus porta ullamcorper. Nunc convallis orci at massa suscipit porta. Sed interdum suscipit dui, eu sodales odio fermentum vitae. Nunc vitae dui metus, a laoreet ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed eu mauris mi, non blandit tortor. Ut fringilla cursus justo id porta. Sed in nibh nulla. Aenean consectetur arcu vel eros facilisis ac luctus lectus placerat. Fusce risus dui, adipiscing ut tempus non, malesuada quis velit. 
</li>
</ul>
</div>
<script>
$(function(){
  $('ul.panel li:not('   +   $('ul.tab li a.selected').attr('href')   +   ')').hide()
  $('ul.tab li a').click(function(){
    $('ul.tab li a').removeClass('selected');
  $(this).addClass('selected');
  $('ul.panel li').hide();
  $($(this).attr('href')).show();
  return false;
  });
});
</script>

</body>
</html>

パネル内を外部ファイルにして読み込む方法。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タブパネル</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
body, div, ul, li {
  margin:0;
  padding:0;
}
ul {
  list-style: none;
}
body {
  font-size: 16px;
  font-family:
    "Hiragino Kaku Gothic ProN",  Meiryo, sans-serif;
    color: #545454;
}
#container {
  width: 500px;
  margin: 50px auto;
}
ul.tab li{
  float: left;
  width: 100px;
  height: 40px;
}
ul.tab li a {
  background: url(img/tab.jpg) no-repeat;
  display: block;
  outline: none;
  color: #365A7E;
  text-align: center;
  line-height: 40px;
}
ul.tab li a.selected {
  background: url(img/tab_selected.jpg) no-repeat;
  text-decoration: none;
  color: #C06;
  cursor: default;
}
p.panel {
  clear: both;
  border: 1px solid #aab7c8;
  border-top: none;
  padding: 20px;
  text-indent: 1em;
}
</style>
</head>
<body>
<div id="container">
<ul class="tab">
<li><a href="linkText_01.txt" class="selected">JavaScript</a></li>
<li><a href="linkText_02.html">CSS</a></li>
<li><a href="linkText_03.txt">HTML</a></li>
<li><a href="linkText_04.txt">jQuery</a></li>
<li><a href="linkText_05.txt">XHTML</a></li>
</ul>
<p class="panel"></p>
</div>
<script>
$(function(){
  $('p.panel').load($('ul.tab li a.selected').attr('href'));
  $('ul.tab li a').click(function(){
    $('ul.tab li a').removeClass('selected');
    $(this).addClass('selected');
    $('p.panel').load($(this).attr('href'));
    return false;
  });
});
</script>
</body>
</html>

2013-08-21

Mathオブジェクトのメソッド

JavaScript

最大値を戻すメソッドmax

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Mathオブジェクト メソッドmax</title>
</head>
<body>
<script>
var num1 = 10;
var num2 = 15;
var num3 = 16;
document.write(' <h1> ', Math.max(num1, num2, num3), ' </h1> ');
document.write(' <h1> ', Math.min(num1, num2, num3), ' </h1> ');
</script>
</body>
</html>

randomメソッド（おみくじ）

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Mathオブジェクト randomメソッド</title>
</head>

<body>
<script>
var random = Math.random();
document.write( random );
</script>
<script>
var random = Math.random();

if(random < 0.33){
	document.write( '<h1>', '大吉', '</h1>' );
	}else if(random < 0.66){
	document.write( '<h1>', '吉', '</h1>' )
	}else{
	document.write( '<h1>', '凶', '</h1>' );}
</script>
</body>
</html>

乱数を整数表示

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Mathオブジェクト 乱数を整数表示</title>
</head>
<body>
<script>
MAX = 10;
var num;
for (var i=0; i < 10; i++){
	num = Math.floor(Math.random() * MAX);
	document.write( num, '<br>' );
}
</script>
</body>
</html>

イメージをランダムに表示

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>イメージをランダムに表示</title>
</head>
<style>
body {;
	text-align: center;
}
</style>
</head>
<body>
<h1>今日のイメージ</h1>
<script>
numOfImg = 4;
var num;
num = Math.floor( Math.random() * numOfImg )
document.write('<img src="img/photo', num, '.jpg">');
</script>
</body>
</html>

2013-08-20

日時時刻曜日の表示

JavaScript

<script>
var now, heisei, thDate;
var days = new Array( '日', '月', '火', '水', '木', '金', '土' );
now = new Date();
heisei = now.getFullYear() - 1988;
theDay = days[now.getDay()];
theDate = '平成' + heisei + '年' + (now.getMonth() +1) + '月' + now.getDate() + '日' + '（' + theDay + '）';

document.write('<h1>', theDate, '</h1>');
</script>

favicon

favicon作成サイト
http://www.favikon.com/

オススメ本

現場で役立つjQueryデザインパーツライブラリ

作者: 矢野みち子,KLEE,Atelier*Spoon,棧敷友香子,錦織幸知
出版社/メーカー: エムディエヌコーポレーション
発売日: 2013/06/25
メディア: 単行本
この商品を含むブログ (5件) を見る