2013-03-28

Media Queri（メディアクエリ）

iPhone

・mediaqueri

・スクリーンサイズに応じて、CSSを使い分ける。
・この幅以下はこっち、更にこの幅以下はこっちとなっていく
・スタイルシートは増えるけど、JavaScriptで振り分けする必要はない。

2013-03-28

レスポンシブWebデザイン

iPhone

画面の横幅に合わせてデザインを変化させることにより、多様なデバイスに対応するというWebページの制作手法です。

・ゼロから始めるレスポンシブWebデザイン入門

2013-03-18

iPhone 設計ポイント

iPhone

ページサイズ

・ページサイズは横幅320pxを基準に設計
・デスクトップ･･･740〜960px前後で想定して設計するのか一般的
・iPhone･･･横320px × 縦480px
　　　　　　向きをかえると横480px × 縦320px
・iPhoneは通常縦表示のときの横幅320pxを基準にしてページ設計する

画像サイズ

・画像のサイズも横幅320pxまで
・サイトの幅が320pxなので、画像サイズも横幅320px以内に収める
■ファイル形式の制限

ファイルの種類	制限
GIF,PNG,TIFF	3メガピクセル（width×height≦1024px×1024px×3）
JPEG	32メガピクセルまで
HTML,CSS,JavaScriptなど個別のファイル	10メガピクセルまで

・ファイルサイズだけでなく、大きさ（ピクセル数）が制限の対象になるので要注意！
・ファイルサイズを小さくすれば、それだけページ表示速度が向上する

文字サイズ

・文字サイズ（font-size）は、デスクトップよりもやや大きめの14px〜16pxが読みやすい

行間

・文字サイズの1.4(140%)〜1.6(160%)倍程度で指定
・文字量が多きときなどは、font-size:14px, line-height: 1.4;程度に調整して、スクロールする手間を減らすこともできる。。。

ページの左右の余白

・コンテンツの左右の余白に10px程度あける
・窮屈感･･･スペースを空けると窮屈にも見えず丁度いいバランスになる
・きれいに見せる

ナビゲーションリンク

・ボタンやリスト型のリンクの場合、縦幅を44px前後にするとタップしやすくなるとされている
・ページによっては大きすぎることもあるので、縦幅をやや小さくしたり、リンクの周囲の余白を広げたりするのもよい

ページの余白や、ナビゲーションリンクの高さについての情報

・Appleの「iPhoneヒューマンインターフェスガイドライン」を参考に。。
・アプリケーション開発者の資料だけど、webページのレイアウトの参考にもなる。。。

2013-03-07

「おみくじ」を作る

PHP

おみくじ結果：大吉 ← この大吉の部分を変える

・沢山あるものから１つ選んで出す

1.index.htmlを作成

・ディレクトリーの確認
・「…/index.html」が表示されればOK！

2.index.phpにファイル名を変更

・この「index.html」を「index.php」にファイル名の変更をする

・「…/index.php」が表示されればOK！

<?php
  echo 'test';

レンタルサーバの危険

PHPが使えると言っておきながら
手続きをしないと使えないサーバもある！
なので、一番先に、PHPが動くのか動作確認を必ずする事！

3.phpを書く

・まずは自分のやりたい事を書く ⇒ コメント

<?php

  // おみくじ箱を用意する
  // おみくじを引く
  // おみくじの結果を表示する

インデント

・タブ派…2タブ / 4タブ
・スペース派…2スぺ / 4スペ
どの方法でも良いが「インデント」は必ずつけること

<?php

  // おみくじ箱を用意する
  $fortunes = array(
    '大吉',
    '中吉',
    '小吉',
    '末吉',
    '小凶',
    '凶',
    '大凶',
  );
var_dump( $fortunes );

  // おみくじを引く
  // おみくじの結果を表示する

・大吉から大凶までが配列です
array(7) { [0]=> string(6) "大吉" [1]=> string(6) "中吉" [2]=> string(6) "小吉" [3]=> string(6) "末吉" [4]=> string(6) "小凶" [5]=> string(3) "凶" [6]=> string(6) "大凶" }
と表示される
demo

var_dump

・デバックプリント
・インデントなしで書く
・ある程度、確認ができたら消す

■書式

var_dump = ( 変数 );

＜配列を指定した場合＞
インデックス数と添字、及びキーとインデックスを示す形式で出力

＜オブジェクトを指定＞
オブジェクト内部の変数やそれぞれの変数に関する情報も出力

4.乱数

<?php

  // おみくじ箱を用意する
  $fortunes = array(
    '大吉',
    '中吉',
    '小吉',
    '末吉',
    '小凶',
    '凶',
    '大凶',
  );

  // おみくじを引く
	  $i = mt_rand(1,6);
var_dump($i);

  // おみくじの結果を表示する

int(3)
と表示される
・引数をあたえる
・１〜６まで
・リロードする度に、（）内の数字が変わる
demo

■・2個重ねると・・・。

<?php

  // おみくじ箱を用意する
  $fortunes = array(
    '大吉',
    '中吉',
    '小吉',
    '末吉',
    '小凶',
    '凶',
    '大凶',
  );

  // おみくじを引く
  $i = mt_rand(1,6);
var_dump($i);
  $i = mt_rand(1,6);
var_dump($i);

  // おみくじの結果を表示する

int(6) int(2)
と表示される
demo
・2個表示され、違う結果が表示される

5.配列のアクセスの仕方

<?php

  // おみくじ箱を用意する
  $fortunes = array(
    '大吉',
    '中吉',
    '小吉',
    '末吉',
    '小凶',
    '凶',
    '大凶',
  );

  // おみくじを引く
  $i = mt_rand(1,6);
var_dump( $fortunes[0] );

  // おみくじの結果を表示する

string(6) "大吉"
と表示される
demo
・[0]にアクセスしている
・添え字を変えて確認してみよー
　↓
　[3]にすると、末吉になる。。

var_dump( $fortunes[0] );

[ ]…配列の中から1つはき出して

配列の中の[0]番目をください。。。
といことなので
「string(6) "大吉"」
と表示される

■こんな書き方もある

<?php

  // おみくじ箱を用意する
  $fortunes = array(
    0 => '大吉',
    1 => '中吉',
    2 => '小吉',
    3 => '末吉',
    4 => '小凶',
    5 => '凶',
    6 => '大凶',
  );

  // おみくじを引く
  $i = mt_rand(1,6);
var_dump( $fortunes[0] );

  // おみくじの結果を表示する

string(6) "大吉"
と表示される
demo
・でも、めんどくさいのでこのような書き方はしない
・添え字の番号

■ランダムに表示させる

<?php

  // おみくじ箱を用意する
  $fortunes = array(
    '大吉',
    '中吉',
    '小吉',
    '末吉',
    '小凶',
    '凶',
    '大凶',
  );

  // おみくじを引く
  $i = mt_rand(0,6);
var_dump( $fortunes[$i] );

  // おみくじの結果を表示する

string(6) "小吉"
と表示される
demo
・リロードする度に表示内容が変わる
・配列（0,1,2,3,4,5,6）の中からランダムに表示される

var_dump( $fortunes[$i] );

var_dump( $fortunes[0] );
を
var_dump( $fortunes[$i]);
にすると。。。
↓
$i = mt_rand(0,6);
なので
0〜6までの配列をランダムにはき出すことが出来る

6.おみくじの結果を表示させる

・phpとHTMLを1ファイルに書く
・「?>」の終了タグを書くこと
・「?＞＜!DOCTYPE HTML＞」と1行に書く。改行しないこと！

<?php

  // おみくじ箱を用意する
  $fortunes = array(
    '大吉',
    '中吉',
    '小吉',
    '末吉',
    '小凶',
    '凶',
    '大凶',
  );

  // おみくじを引く
  $i = mt_rand(0,6);
var_dump($i);
  $kuji = $fortunes[$i];
var_dump( $kuji );

  // おみくじの結果を表示する
?><!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>おみくじ</title>
</head>
<body>
おみくじ結果：「ここに結果」
</body>
</html>

int(2) string(6) "小吉" おみくじ結果：「ここに結果」
と表示される
・リロードする度に結果内容が変わる
demo

■「ここに結果」のところに、phpを書く

<?php

  // おみくじ箱を用意する
  $fortunes = array(
    '大吉',
    '中吉',
    '小吉',
    '末吉',
    '小凶',
    '凶',
    '大凶',
  );

  // おみくじを引く
  $i = mt_rand(0,6);
  $kuji = $fortunes[$i];

  // おみくじの結果を表示する
?><!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>おみくじ</title>
</head>
<body>
おみくじ結果：<?php echo $kuji; ?>
</body>
</html>

おみくじ結果：末吉
と表示される
・リロードする度に結果内容が変わる
demo

7.おみくじを1つ増やす⇒一ヶ所の修正で行いたい

・プログラムは常に「追加と修正」がある
・DRY（Don't repeat yourself）

<?php

  // おみくじ箱を用意する
  $fortunes = array(
    '大吉',
    '中吉',
    '小吉',
    '末吉',
    '小凶',
    '凶',
    '大凶',
  );

  // おみくじを引く
  $i = mt_rand(0, count($fortunes) - 1);
  $kuji = $fortunes[$i];

  // おみくじの結果を表示する
?><!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>おみくじ</title>
</head>

<body>
おみくじ結果：<?php echo $kuji; ?>
</body>
</html>

おみくじ結果：末吉
と表示される
・リロードする度に結果内容が変わる
demo

・n-1
にして、項目が追加されても、修正箇所は１箇所にする
$i = mt_rand(0,6);
↓
$i = mt_rand(0, count($fortunes) - 1);

2013-03-07

PHPのプログラム

PHP

クライアントから
安く早くあげて
修正・追加ないから・・・。
とはいっても、
修正・追加の依頼なんでない！

修正と変更の強いコーディングが必要！

これから作成するプログラム

・おみくじ
・BMI（体脂肪率）
・mail form
・IDとPASS で loginする

ローカルとリモートを使って開発をする

・XAMMP
・LAMP
　 ↓
　Linux / Apache / MySQL / PhP

よくあるミス

・変わらない。。。
・動かない。。。
・アタフタ。。。アタフタ。。。
　↓
リモート側のファイルを修正していると思っていたら、
ローカル側のファイルを修正していた。。。
アップロードされてない。。。

2013-03-06

JavaScriptを使うときに知っておきたい68の冴えたやり方

Webのあしあと

Effective JavaScript
JavaScriptを使うときに知っておきたい68の冴えたやり方

著者/訳者	David Herman／著　吉川邦夫／監訳
出版社名	翔泳社
発行年月	2013年02月
サイズ	201P 23cm
価格	本体3,200円＋税

2013-03-06

配列（Array）

PHP

・配列（Array）は、プログラミングにおけるデータ構造の一つ
・同じ型のデータを連続的に並べたデータ形式
・各データをその配列の要素といい、それらは添字(インデックス)で識別される

表示させる

<?php
$a = ('hoge','fuga','foo');

print('a[0]→' . $a[0] . '<br>');
print('a[1]→' . $a[1] . '<br>');
print('a[2]→' . $a[2] . '<br>');

var_dump($a);

a[0]→hoge
a[1]→fuga
a[2]→foo
array(3) { [0]=> string(4) "hoge" [1]=> string(4) "fuga" [2]=> string(3) "foo" }
と表示される
demo

・文字列同士は「.（ドット）」でつなぐ
・コンピューターは一番目を「0」2番目を「1」となるので、「01234･･･」と配列番号ができる

一個ずつとりだす

<?php

$a = array(
  'hoge' => 'hogehoge',
  'fuga' => 'fugafuga',
  'foo' => 'bar'
);

print('a[hoge]→' . $a['hoge'] . '<br>');
print('a[fuga]→' . $a['fuga'] . '<br>');
print('a[foo]→' . $a['foo'] . '<br>');

var_dump($a);

a[hoge]→hogehoge
a[fuga]→fugafuga
a[foo]→bar
array(3) { ["hoge"]=> string(8) "hogehoge" ["fuga"]=> string(8) "fugafuga" ["foo"]=> string(3) "bar" }
と表示される
demo

ループで取り出す

<?php

$a = array(
  'hoge' => 'hogehoge',
  'fuga' => 'fugafuga',
  'foo' => 'bar'
);

print('a[hoge]→' . $a['hoge'] . '<br>');
print('a[fuga]→' . $a['fuga'] . '<br>');
print('a[foo]→' . $a['foo'] . '<br>');

  // foreachを使って同じように表示してみる
foreach( $a as $key => $row ) {
	
  // 列の要素を一個ずつ、keyに値とvalueの値を
  // 表示する
  print('key =' . $key . 'value =' . $row . '<br>');
}

var_dump($a);

a[hoge]→hogehoge
a[fuga]→fugafuga
a[foo]→bar
key =hogevalue =hogehoge
key =fugavalue =fugafuga
key =foovalue =bar
array(3) { ["hoge"]=> string(8) "hogehoge" ["fuga"]=> string(8) "fugafuga" ["foo"]=> string(3) "bar" }
と表示される
demo

表示のされ方をそろえる

<?php

$a = array(
  'hoge' => 'hogehoge',
  'fuga' => 'fugafuga',
  'foo' => 'bar'
);

print('a[hoge]→' . $a['hoge'] . '<br>');
print('a[fuga]→' . $a['fuga'] . '<br>');
print('a[foo]→' . $a['foo'] . '<br>');


// foreachを使って同じように表示してみる
foreach( $a as $key => $row ) {
	
  // 列の要素を一個ずつ、keyに値とvalueの値を
  // 表示する
  //print('key =' . $key . 'value =' . $row . '<br>');
  print('a[' . $key .']→' . $row . '<br>');
}

var_dump($a);

a[hoge]→hogehoge
a[fuga]→fugafuga
a[foo]→bar
a[hoge]→hogehoge
a[fuga]→fugafuga
a[foo]→bar
array(3) { ["hoge"]=> string(8) "hogehoge" ["fuga"]=> string(8) "fugafuga" ["foo"]=> string(3) "bar" }
と表示される
demo