Aptana3再インストール

Aptana3をたまに起動すると、大体アップデートがあるので、
いつも通りアップデートしたら、起動時にエラーが出て立ち上がらなくなった。
(エラーログを見ろ、とダイアログが出て停止)

そのログを見ても今一つよく分からないので、
一旦アンインストールしてから再インストール。

これで再び起動するようになった。
日本語化設定以外は設定ファイルが残ってたのか、前の設定を引き継いでくれた。


※最新バージョン3.1.2


ウォールとアルバム投稿

PHP SDKでGraph APIを使ってウォールとアルバムへ投稿。

----------------------------------------------------------------------
$facebook -> setFileUploadSupport(true);

//text & thumbnail post
$post_id = $facebook -> api(
'/me/feed', 'post', array(
 'message' => $kekka,
 'link' => 'リンク先URL',
 'name' => 'リンク先の表記',
 'picture' => $photo,
));

//photo post
$post_id = $facebook -> api('/me/photos', 'post', array(
 'name' => $kekka_album,
 'source' => '@' . $photo_album,
));
----------------------------------------------------------------------
'POST'後の引数は変数代入でも可。


ウォールへ投稿。


アルバムへ画像投稿。


参考:

■api - Facebook開発者
https://developers.facebook.com/docs/reference/php/facebook-api/
※ウォール投稿 Post a link to a User's wall using the Graph API

■php - Upload photos to Facebook Album from an app - Stack Overflow
http://stackoverflow.com/questions/6247447/upload-photos-to-facebook-album-from-an-app

■Facebook Graph APIで画象をアルバムに投稿する | HAPPY*TRAP
http://www.happytrap.jp/blogs/2012/05/07/8893/


選択→判別→投稿

PHPでFacebookアプリ作成、前回の続き。
・必要なパーミッション指定、getLoginUrl()の引数array()で指定。
・前に作ったJS版のformからデータを受け取って判別→結果表示。
・その結果をGraph APIで投稿(テキストのみ)。
※サンドボックスモードにしてもアルバム画像は見れてしまう?確認。
・スマホ(Andoroid)で動作確認。
phpファイルは1つで全部ソース埋め込み。formのactionのリンク先""で自分を呼ぶ。

残り:
・シーン毎に表示(問題回答と結果表示と投稿完了を分ける、phpも分ける?)。
・診断→投稿を自動でなく、診断後に投稿するボタンを押して投稿に。
・結果をテキスト+画像で投稿(ウォールとアルバム)。
・iPhoneで動作確認、viewport設定入れる、html5に?(まだcanvas、CSS3未使用)。
・さらにその画像を合成したものに(GDを使う?)。
その先は相性のいい友達を表示等、Flash版でAPI通信してた各々を出来るところまで。


質問サンプルは適当に作成。


投稿画面。

スマホで動作確認。PCと同じ様に動作。


回答選択。


パーミッション設定。

参考:

■PHPスクリプト講座:echoとprintの違い -- そふぃのphp入門
http://nyx.pu1.net/reference/extra/echo_print.html
※echoは,で複数文字列指定可。
※printは変数に代入して出力可。
※echoの方が速い。

■初心者のプログラミング体験記 PHPの『 print 』と『echo』の違い。
http://torasukenote.blog120.fc2.com/blog-entry-23.html
※関数では無いので()は無くても可。


ログイン&GRAPH APIのデータ表示

PHP SDKを使ってログイン、Graph APIで自分のデータを表示まで。
Facebook開発者ページのサンプルが一番分かり易いのでそのまま使用。

・説明場所
開発者ページ→参考資料→SDK Reference(SDKs & Tools)
→PHP SDK→PHP SDK Overview

・訳
PHP SDK
このSDKは、貴方のPHPベースのウェブアプリケーションに、Facebook
プラットフォームを提供します。
このライブラリは、貴方のウェブサイトにFacebookログインとGRAPH API
サポートを付け加えるのに役立ちます。

PHP SDK Overview
PHP SDKはFacebookのサーバーサイドAPIの呼び出しに対し、
サーバーサイドの機能性の豊富なセットを提供します。
これらは、Graph API、FQL、古いAPIの全てを含みます。

貴方は、Facebook PHP SDKをGithubのこちらからダウンロード出来ます。

PHP SDKは、一般的にアプリのアドミニストレーターの操作として実行されますが、
現在のセッションのユーザーに代わって実行もされます。

貴方は、SDKの初期化に必要なAPP ID(App Dashboard─開発者ページの
自分のアプリ画面─から取得出来る)が必要になります。

PHP SDKは、アプリのサーバーサイドとクライアントサイドの両方に渡って、
シームレスなセッション管理を支援するために、JavaScript SDKと
一体になって動かすことも出来ます。

・ファイル場所
必要なファイル一式をGitHubからダウンロード。
■facebook/php-sdk GitHub
https://github.com/facebook/php-sdk

・使い方
src/base_facebook.php
src/facebook.php
src/fb_ca_chain_bundle.crt
examples/example.php
をダウンロード。

example.phpを編集。
・facebook.phpにパスを通す(例:require 'facebook.php');
・'appId'と'secret'に自分のアプリの値を入れる。


ブラウザで自分の顔アイコンとデータが表示されればOK。
GitHubの同じ所にある、with_js_sdk.phpでも可。

参考:

■PHP SDK Overview - Facebook開発者
https://developers.facebook.com/docs/reference/php/

■php-sdk/examples/example.php at master facebook/php-sdk GitHub
https://github.com/facebook/php-sdk/blob/master/examples/example.php

■PHP: print_r - Manual
http://php.net/manual/ja/function.print-r.php


PHPの絵本

Facebookアプリのテストで、サーバーサイドでPHPを使用。
(クライアント側では出来ない処理、サーバー側でやった方がスマートな処理が多い)
4年前に少しやったので、復習から。

目処はログイン・パーミッション、form経由でデータ受け取って
(クライアント側はhtml+Javascript)
それに応じた処理→結果表示、ウォール投稿位まで。

また、JavaScriptでFacebookの顔アイコンを読み込んでcanvasに表示しても、
それを合成(診断結果画像として生成)後にPOSTするとsecurity errorが
出るが、サーバー側でやれば(同ドメインなので)大丈夫そう。

復習用として「PHPの絵本(アンク)」を使用。

テスト環境はXAMPP、入力はEmEditor。必要ならPHP用のIDEも探す。

●PHPを始める前に

・クライアント→サーバー送信
GET、OSの環境変数に保存、文字数制限有、アドレスバーに表示、パラメーター直接指定可。
POST、標準入力(キーボード入力と同じ)で受け取る、文字数制限無し、
アドレスバーに非表示、パラメーター直接指定不可。

・HTMLに埋め込むタイプのスクリプトをサーバーサイドスクリプトと言う。
(他にJSP、ASP他、特徴としてCGIより負担が少ない)

・文字コードの設定はc:¥xampp¥php¥php.iniファイルのmbstringで行う。
※本はEUC-JPだけど、UTF-8を使用(BOM無しにしないと化ける)。

●●1章 基本的なプログラム
・Hello!World表示OK。echoでなくprint使用。
・HTMLのタグはOKなので省略。
・htmlのformから送られたデータはスーパーグローバル変数の(1つ)$_POSTで受け取る。
(サンプルでテキストボックス入力→受け取って表示OK)

●●2章 変数と配列
・型指定無し。宣言無し。
・数値型、論理型、文字列、配列、連想配列、スーパーグローバル変数等。
・配列のインデックス(キー)は添字(そえじ)とも言う。
・書き方
$a = 2;

変数の中身を出力(trace)するのは、var_dump()関数。
$a = 100;
$b = 2.2;
$c = true;
$d = NULL;
$e = "PHPの絵本";
var_dump($a);//int(100)
var_dump($b);//float(2.2)
var_dump($c);//bool(true)
var_dump($d);//NULL
var_dump($e);//string(12) "PHPの絵本"

文字として$を使いたい時は¥でエスケープ。
print "¥$a = $a";//$a = 100


・int:整数(integer、インテジャー)、小数点以下無し、-2,147,483,645〜2,147,483,645
・float:浮動小数点(float叉はdouble)、およそ-1.8*10^308〜1.8*10~308
・bool:論理型(boolean)、真偽、true/false
・NULL:NULL型、値を持たない(undefinedは無し?)

文字列1(string)
””の中に変数を書くとその値に変換、’’の中では文字列として扱われる。
エスケープシーケンス…¥(エスケープ文字を付けたもの)、
¥n(改行)、¥¥(¥表示)、¥"(”表示)、¥'('表示)¥xNN(16進数表記の1文字)等。
’’内で使えるのは¥'と¥¥のみ。
ヒアドキュメント…長い文字列を簡潔に表示出来る。<<<で開始、ラベルで挟む。
<?php
$a = <<< EOD
 Hello
 World!<br>¥n
EOD;
print "$a";
?>
[]で文字列の中(※この場合配列の中では無い)にアクセス
$str = 'cat';
$first = $str[0];
$third = $str[2];
print "$first¥n";//c
print "$third";
//t

型変換
型は変数に代入で自動的に決まる。
$a = '1';//string
$a = 1;
//int

型キャスト(型変換)
型名を()で囲ったものを変数の前に置く
$a = 1;
print "$a";//1
$a = $a + 0.5;
print "$a";//1.5
$b = (int)$a;//整数にcast
print "$b";//1

strval(ストリングバリュー)()関数でスカラー型(論理型or数値型or文字列)の
変数を文字列に変換出来る。
//■strval
$a = true;//string
$b = 1234;//int
$str1 = strval($a);
//文字列に変換
$str2 = strval($b);//文字列に変換
print "$str1";//1
print "$str2";//1234

配列array();
添え字を使って値と関連づけて設定可。
$a = array(0=>1, 1=>2, 2=>3);
異なった配列を1つにまとめてOK。
$a =array('ねこ', 100);//string int
配列の参照。代入
$a = array(1,2,3);
print $a[0];//1
print "<br>";
$a[0] = "One";
$a[1] = "Two";
$a[2] = "Three";
print $a[0];//One
print"<br>";
print $a[1];//Two
print"<br>";
print $a[2];//Three
print"<br>";

連想配列(添え字に文字列)
$a = array('dog'=>'いぬ', 'cat'=>'ねこ');
print $a['dog'];//いぬ
print "<br>";
print $a['cat'];//ねこ

配列の利用
配列の破棄(unset()関数を使う)、配列名指定で全体or個別要素指定
//■配列の破棄
$a = array("a","b","c");
print $a[1];//b
print "<br>";
unset($a[1]);
print $a[1];//Notice: Undefined offset:〜
print "<br>";

配列の差を取得する。
ある配列にあって、他の配列に無い要素を取り出すには、array_diff()関数を使う。
$a = array(1,2,3);
$b = array(1,3,4);
$c = array_diff($a, $b);//配列aに有って、bには無い(aの要素)
//print $c[0];//Undefined offset: 0
print $c[1];
//2…a[1]<赤>添え字は保持される。
print "<br>";

配列の要素を追加する。
array_push()関数を使う。
//■配列の要素を追加する
$a = array(1,2,3);
array_push($a, 4, 5);//配列aの末尾に4と5を追加。
//添字0,1,2,3,4、値1,2,3,4,5
$b = array('A'=>1, 'B'=>2, 'C'=>3);
array_push($b, 4, 5);//添え字が文字列に追加の場合は添字0スタート。
//添字A,B,C,0,1、値1,2,3,4,5

リファレンス(参照)
変数のリファレンスを作ると、元の変数とリファレンスは同等のものとして扱われる。
(参照渡しと値渡し)
$a = 1;
$b = $a;
$a = 3;
print "¥$aの値は $a, ¥$bの値は $b<br>¥n";//$aの値は 3, $bの値は 1
$b = &$a;//リファレンス
$a = 5;
print "¥$aの値は $a, ¥$bの値は $b<br>¥n";//$aの値は 5, $bの値は 5
$b = 100;
print "¥$aの値は $a, ¥$bの値は $b<br>¥n";//$aの値は 100, $bの値は 100
//(双方向で影響受ける)

定数、defineで設定、一度値を設定すると変更不可。
define("DEF_COLOR", "Blue");//定数名、定数値
定義済み定数
__LINE__
__FILE__
__FUNCTION__
__CLASS__
__METHOD__

=>
は代入、->はオブジェクト(クラス)のメソッドやフィールド変数を
参照するための演算子。
//■定数
$line = __LINE__;
print "$line<br>¥n";//112

定義済みの定数
・スーパーグローバル変数
自動的に定義され、プログラムのどこからでも参照可。
スーパーグローバル変数は連想配列なので、キー:値で取得。
$GLOBALS
$_SERVER
$_GET
$_POST
$_COOKIE
$_FILES
$_ENV
$_REQUEST
$_SESSION
print "サーバーのドメイン名は¥"".$_SERVER['HTTP_HOST']."¥"です。<br>¥n";
//サーバーのドメイン名は"localhost"です。

環境変数
OSが持っているOSの環境情報。
$_ENV$_SERVERで参照出来る。
$_SERVER['HTTP_REFERER'];//直前のURL
$_SERVER['HTTP_USER_AGENT'];//ブラウザ情報他
phpinfo()関数を利用すると、実行しているサーバー環境の変数を参照出来る。


●●3章 演算子
算術演算子、+、-、*、/、%
代入演算子、=
複合演算子、+=、-=、*=、/=、%=
インクリメント演算子、++
デクリメント演算子、--
前置(++$a)は変数の参照より先に、
$b = $a = 1;
$b = ++$a;
print "$b<br>¥n";//2
後置($a++)は変数の参照より後に演算が行われる
$b = $a = 1;
$b = $a++;
print "$b<br>¥n";//1
文字列のインクリメント(半角のみ、デクリメントは無し)
$b = "A";
$b = ++$b;
print "$b<br>¥n";//B
※"z"→"aa"

比較演算子、==、===(型も同じ)、<、>、<=、>=、!=、<>、!==
(値が等しくない叉は型が異なるのどちらか叉は両方)
式自体を条件式に使用可。
$a = 10;
$b = 20;
print '$a < $b:'+ ($a < $b);//0
print '$a > $b:'+print ($a > $b);//1

配列演算子
・配列の結合、+で結合、左側の配列に右側の配列の要素を追加、
但し同じ添字の要素は上書きされない。

//配列の結合
$d = array(1, 2);
$e = array(3, 4, 5);
$f = $d + $e;
print "$f<br>¥n";//Array
print "$f[0]<br>¥n";//1
print "$f[1]<br>¥n";//2
print "$f[2]<br>¥n";//5

・配列の演算、
==、同等、「要素ペア」が等しい
===、同一、「要素ペア」と「型」と「並び順」が等しい
!=、等しくない、
<>、等しくない
!==、同一でない
※1と"1"では値(要素)は等しいとみなされる。型は違う。

・その他の演算子

論理演算子
&&(かつ)、||(または)、!(否定=〜ではない)。
and(かつ)。or(または)。not(否定=〜ではない)。

複雑な条件式
(50 <= $a) && ($a < 100);//$aは50以上100未満
条件付き実行
条件式 ||(or)処理 … 条件式がtrueなら処理を行わずfalseなら行う。
条件式 &&(and)処理 … 条件式がtrueなら処理を行い、falseなら行わない。
$a = 4;
($a < 10) || (print "¥$aは10以上¥n");
($a < 10) && (print "¥$aは10未満¥n");//$aは10未満

三項演算子
(条件式)? true時処理 : false時処理
$b = 1;
$a = ($b < 15) ? 10 : 20;
print "$a<br>¥n";
//10

エラー制御演算子
@を関数の前に付けると、エラーや警告を無視する(何も表示しない)。

文字列演算子
.を使うと、文字列を連結出来る。
$str = 'Hello' . " " . "World";
print "$str<br>¥n";//Hello World

実行演算子
`バッククォート(SHIFT+@)で文字列を挟むと、シェルコマンド(OSが持つ命令)や
外部プログラムを実行し、その表示結果を出す。
$output = `time/T`;
print "$output";//15:13
print "<pre>".$output."</pre>";//15:13

演算の優先度
本参照。

数学関数
absceilfloorround他。必要に応じて参照。

複雑な論理演算
うるう年の算出例。


■4章 制御文
if、if〜else、if〜elseif〜else、if文のネスト。
for、ループ、二重ループ。

foreach文は配列の要素の数だけ繰り返す。
$season = array('spr'=>'春', 'sum'=>'夏', 'aut'=>'秋', 'win'=>'冬');
foreach($season as $key => $a){
 print "$key は $a<br>¥n";
}
//配列の要素をキー:値で取り出し
//spr は 春
//sum は 夏
//aut は 秋
//win は 冬

while…ある条件が成り立っている(真の)間繰り返し。
※forとの違いは、カウンタが無い、主に繰り返し回数が不明なものに実行。
do〜while…ある条件が成り立っている(真の)間繰り返し(条件を下に置く)
ので、最低一回は実行。
$s = $i= 0;
do{
 ++$i;
 $s += $i;
 print "$i";
 print "の時、";
 print "$s<br>";
}while($i < 10);
print "1から";
print "$i";
print "までの和は$s";
//1の時、1
//2の時、3
//3の時、6
//4の時、10
//5の時、15
//6の時、21
//7の時、28
//8の時、36
//9の時、45
//10の時、55
//1から10までの和は55
※whileは無限ループになりやすいので注意。

break…中断し一番近いブロックの終わりへ飛ぶ。
continue…中断し一番近いループの始まりに飛ぶ。

switch文
switch〜case〜default。

□サンプルプログラム
自動販売機にお金を投入(htmlのフォームで金額入力)。分かり易い。

php側で受け取り、判別処理→結果表示。
※while文でお釣りを硬貨の種類毎に分けて枚数表示する方法(考え方)。
例:1000円投入→送信→結果
>ありがとうございました。お釣りは880円です。

>硬貨の枚数は次の通りです。
>500円玉1枚
>100円玉3枚
>50円玉1枚
>10円玉3枚

breakとcontinueの階層指定
break 2;
continue 3;
で階層をまたぐ事が可能。


参考:

■PHPの絵本(株)アンク著
http://www.amazon.co.jp/dp/479811264X
>復習用として読むと分かり易いと思います
>他言語を使用していた方には理解できる本だと思います

■PHPの絵本 正誤表:SEShop.com
http://www.seshop.com/book/errata/7671/list
※サンプルCDやダウンロードは無し。

■PHP: PHP マニュアル - Manual
http://php.net/manual/ja/index.php

■PHPの日本語設定|PHP入門以前
http://www26.tok2.com/home/phpbeginner/japanease_php.html
>「php.ini」をテキストエディタで開き、編集を行います。

■PHPの文字化けを本気で解決する - ぎじゅっやさん
http://hain.jp/index.php/tech-j/2007/02/13/%EF%BC%B0%EF%BC%A8%EF%BC%B0%E3%81%AE%E6%96%87%E5%AD%97%E5%8C%96%E3%81%91

■PHP: スーパーグローバル - Manual
http://php.net/manual/ja/language.variables.superglobals.php
>これは、スクリプト全体を通してすべてのスコープで使用可能な変数のことです。
>関数やメソッドの内部からアクセスする際にも global $variable;
>などとする必要はありません。
※$_SERVER、$_POST、$_COOKIE、$_SESSION他

■「=&gt;」「-&gt;」の意味 - PHPプロ!Q&amp;A掲示板
http://www.phppro.jp/qa/536
>ソース中の「=>」「->」はどのような役割を果たしているのでしょうか?


10日でおぼえるFacebookアプリ開発入門教室

『10日でおぼえるFacebookアプリ開発入門教室』
翔泳社、多田智史・岩崎雅也著

http://www.amazon.co.jp/dp/479812513X

1章のJavaScript(SDK)でおみくじアプリを作るところまで。


JavaScript Test Consoleを使い(使い方から書いてある)、そこにある
Examplesをチュートリアル的に動かしていく。

Graph API Explorerの使い方も書いてあるので親切。
(Graph API Explorerを使えば各種データが引っ張れるというのは
ネット上で分かっても、中々実際の手順まで細かく書いて無いので)

JavaScript Test Consoleで確認用にLog.infoを使うというのは初めて知った。
(それまではconsole.logでFirebug上で確認)
また、FQLの使い方に関しても分量が多い。OGPの設定も細かく載っている。

スマホ用はiPhone用がxcode+Objective-C、Andorid用がeclipse+Javaなので、
ある程度知識がある人向けな感じ。

OPEN GRAPH対応アプリの作成について書かれてるのも今後役立ちそう。

2章のPHPが全部データベース絡み(PHP+MySQL)なのでどうするか。
自分の場合、仕事でサーバー側構築する事が無いので(フロントエンド側担当)、
そこまでやっても時間が勿体無いので、その分別途JavaScriptをやるか。
(スマホ版はこの本に出てるネイティブでなく、HTML5+JS版で作るので)


参考:

■10日でおぼえるFacebookアプリ開発入門教室
- 多田智史/岩崎雅也/翔泳社:SEShop.com
http://www.seshop.com/product/detail/14184/
※立ち読み、目次、他。

■10日でおぼえるFacebookアプリ開発入門教室 正誤表:SEShop.com
http://www.seshop.com/book/errata/14184/list
※5/12時点では無し。

■翔泳社『10日でおぼえるシリーズ』:ダウンロード
http://www.shoeisha.com/book/hp/10days/
※レッスン用ファイル。


『ハイパフォーマンスWebサイト』

米Yahoo!のフロントエンドのパフォーマンス専門担当者の方が書いた本。



参考になりそうなところ。

●A
パフォーマンスの重要性
ユーザーの待ち時間の80%はブラウザへの転送とブラウザでの描画に
費やされているので、バックエンド側の高速化だけでは効果が出ない。
(さらにその中でhtmlファイルに掛かる時間は10〜20%で、残りは画像等の
ダウンロードや、JavaScriptファイル、CSSファイルの読み込み・解析)

●B
HTTPの概要
HTTP/1.1が現在一番多く使われている。
ブラウザ→HTTPリクエスト
サーバー→HTTPレスポンス

●1章
httpリクエストを減らす。
・複数枚画像のボタンのナビ→1枚画像のイメージマップを使う。
・CSSスプライト

↑こういう1枚絵の中から、使うパーツ毎にCSSで座標を指定して表示。
・インライン画像(img src="data:image/gif;base64;R04uihGJAsd0ha〜")※不要
CSSスプライトは更新修正の手間を考えると使いづらい。
(1からコーディングを何年もしてないので最近の例は詳しくないが、
自分では使った事無い、jQueryのライブラリでは見た)

●2章
Content Delivery Network(例:Akamai)を使う。
サポートページのサンプルがCDNを使わない方が
速かったので???と思ったが、章の最後に理由も書いてあった。
FacebookもAkamai使用(swfの中からも指定している)。

●3章
Expiresヘッダを設定。
ブラウザのキャッシュを使う。
(サーバーからある日時までキャッシュを使うように指定)
yahoo!の訪問者のキャッシュにデータを持っているユーザーの割合、
キャッシュがある状態でもページ参照する割合。
↑最適化のターゲット層(数が多い)。

頻繁に更新されるものはキャッシュの対象にしない。
(例:ニュースサイト上で使われる画像)
Cash-Control…サーバーとクライアントの時刻が同期して無くても可。

●4章
コンポーネントの圧縮。
gzip(GNU ZIP)を使ってHTTPレスポンスを圧縮。
(その他にコメントを削る、URLを短くする)

サーバーはファイルタイプにより圧縮するかしないか決定する。

●5章
CSSを先頭に置く。
プログレッシブ・レンダリング。
スタイルを最上部と最下部に置いた時のテスト。
CSSはhead内に置く。

●6章
スクリプトは最後に置く。
JavaScriptを読み込んでいる時は並列ダウンロードが中断される。

●7章
CSS Expressionの使用を控える
※IE8以降対応して無いので省略。
※2008/10/16 - CSS Expressions のサポート終了について
http://msdn.microsoft.com/ja-jp/ie/dd253083

●8章
.jsと.cssの外部ファイル化。
ページビューが多ければ多いほど、
外部ファイル(キャッシュされる)の方が速くなる。
外部化する事により再利用性が高まる。
(自分のブラウザに設定している)ホームページは
インラインの方がよい。その理由x3。
その他の手法:
・onLoadイベントによるダウンロード。
・クッキーにより2回目以降は外部ファイルを使う。

●9章
DNSルックアップを減らす。
ブラウザがホスト名からIPアドレスを引くのに時間が掛かる。
(DNSに問い合わせた時に返されるDNSレコードには、TTL:Time-to-Live値が含まれる)
Keep-Aliveの使用によって、DNS問い合わせ数は少なくなる。

●10章
JavaScriptを縮小化する。
縮小化…コードから不要な文字を除去する事でサイズを削減。
コメント・スペース・改行・タブも削除。
難読化…縮小化+コード改変(変数・関数名短くする)、リバースエンジニアリング困難化。
※それぞれを行うツールがある。
難読化はバグ・エラーが出る可能性に注意。

●11章
リダイレクトを避ける。
リダイレクトはページ表示を遅くする(リダイレクトが完了するまでは何も行われない)。
リダイレクトの中でもっとも使用頻度の高いステータスコードは301と302.


リダイレクトの代替策として、
・末尾スラッシュ(/)を省略しない。
(ホストネーム直後の末尾スラッシュは無くてもリダイレクトされない)
リダイレクトが使われる理由の
1.内部トラフィックの追跡は→Referを使う。
2.外部トラフィックの追跡は→ビーコンを使う。
3.覚えやすい短縮URL→現在twitter等で普通に使われてる?


●12章
スクリプトを重複させない。
1つのサイトに同じJavaScriptファイルを読み込ませない。
(複数人が1つのhtmlの更新修正に関わるとミスで↑になりやすい)
防ぐ例として、スクリプト管理モジュール(PHP)を使う等。

●13章
ETagの設定を変更する。
ETag(エンティティタグ)はキャッシュされているコンポーネントの有効性を検証するもの。
色々問題あるので使い込めるので無ければ使わない。※不要

●14章
Ajaxをキャッシュ可能にする。
SSLプロトコルを使えば、データの機密性が
守られる上、Ajaxのレスポンスがキャッシュされる。

●15章
米国トップ10サイトの分析。
2007年当時の米トップ10サイトの分析。
ページ容量、応答時間、性能測定ツールYSlowでの評価等。


参考:

■ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール
Steve Souders著
http://www.amazon.co.jp/dp/487311361X

■ハイパフォーマンスWebサイト サポートページ
- 目次 - マーリンアームズ株式会社
http://www.marlin-arms.com/support/hpws/
※正誤表、本に出てくるサンプル、紹介文等。

■Webサイトの高速化 ルール7 CSSのExpression()は使わない!
(Yahoo! developer netoworkより翻訳) | 株式会社インターオフィス
http://www.inter-office.co.jp/contents/187/

■JavaScript ファイルサイズ縮小化ツールJSMinを使う
http://setupwin.blog109.fc2.com/blog-entry-37.html
※コマンドプロンプト使用。

■Amazon.co.jp: 続・ハイパフォーマンスWebサイト
―ウェブ高速化のベストプラクティス
http://www.amazon.co.jp/dp/4873114462
※続編、2010年発売。


色の名前事典

■『色の名前事典』、主婦の友社、福田邦夫著


http://www.amazon.co.jp/dp/4072309583

色の名前が日本・外国それぞれの伝統的名前で紹介されている。
またCMYKでカラーコードも載っている。

どの国・時代で使われたとか、何の動・植物から来てるとか、由来の文章が詳細で面白い。

例:
紅梅色
シュリンプ・ピンク…海老から。
カーマイン
メイズ
緋色…「緋色の研究」の。原題はA Study in Scarlet。
黄丹
香色…枕草子に出てくる。
フォーン
グレージュ
バーガンディ…有名。バーガンディーレッドとかDECとか。
蒸栗色
ミモザ
老竹色
ミント
浅葱色
サルヴィアブルー
瑠璃色
桔梗色
菖蒲色
パティ
灰汁色

※本に出ている色を再現、参考用なので注意(CMYKの正確な値は本を参照)。


Vermilion


Sunflower(向日葵色)


Lime Green(Linden Green)


乳白色


藤色


Salvia Blue


瑠璃色


江戸紫


ブラウザ旧版各種

検証用に古いブラウザが必要になるので入所場所をメモ。
IEは6、7とマイクロソフトから1050円でCD買っていたけど、
今は公式サイトでフル版がダウンロード出来る。




参考:

■ブラウザ別旧バージョンのダウンロードリンクまとめ!
Firefox5登場でFirefox4がダウンロード不可に | Chrome Life
http://www.chrome-life.com/catchup/699/
※約1年前の記事なので「Firefox5登場」とある。1年で7つも上がった事に。

■Firefox
↑上記リンク先のFTPから可能。

■Internet Explorerのダウンロード - Microsoft Windows
http://windows.microsoft.com/ja-JP/internet-explorer/downloads/ie
※IE9、8、7がダウンロード可。64bit版も。

■Google Chrome の旧バージョン単体オフラインインストーラを入手する方法
 - [ぴ](2010-06-12)
http://pmakino.jp/tdiary/20100612.html
※最新版は18。


Modernizr.js(アナログ時計サンプル 04)

Modernizr.js


html5(の特定機能)に対応しているかどうかを判別するJavaScriptのライブラリ。
canvas要素は!theCanvas、!theCanvas.getContextを使って判別出来るが、
これを使えばcanvas要素以外も使用可能かどうかの判別が出来る。

if(Modernizr.canvas){
 //canvas使用可能時の処理
}else{
 //canvas使用不可時の処理
}

これでcanvasが使えるブラウザ/使えないブラウザを判別して、
それぞれに合わせた処理が実行出来る。

以前に作成したアナログ時計に適用。

http://hot.whitesnow.jp/test/120503/clock05.html

修正箇所
・canvasが使える時はアナログ時計、使えない時は簡易的なデジタル時計を表示。
・それぞれ表示する時に不要な要素はjQueryのremove()で削除。
・canvas使用時に背景画像を毎回読み込み→CSSのbackground-imageで1回表示。

参考:

■Mmodernizr
http://modernizr.com/
※ver2.5.3(※2012年5月1日現在)

■Modernizerを用いたHTML5Webサイトの構築
http://www.slideshare.net/HiroakiWakamatsu/modernizerhtml5web
>Modernizrは元々CSS3の機能検出、現在はHTML5のAPIも+補足機能
>サポートブラウザが多彩
>タッチイベントが使えるか否か、使えるaudioのタイプ(ogg, mp4等)取得
>Polyfill(古いブラウザ機能補完用ライブラリ、IEでCSS3の角丸他)
↓経由。
■Progressive Enhancement
http://www.html5.jp/workshop/16th_html5_study_meeting/progressive_enhancement.pdf
Graceful Degradation
>デグレードして代替機能を提供(上位を基準)
>少なくとも最低限の昨日を提供(下位には必要最低限)

Progressive Enhancement
>必要最小限の機能を用意(下位を基準)
>UAの能力に応じて機能を拡張(上位には+してリッチな体験)

>CSSとJSは控えめ(Unobtrusive:アンオブトルーシヴ)であるべき

■O'Reilly Japan - HTML5 Canvas
http://www.oreilly.co.jp/books/9784873115276/
※p9-10

■めざましTech - Modernizr で HTML5 の使用が楽に
http://my.opera.com/MezamashiTech/blog/modernizr-html5
>上記のコードを利用して簡単なデモを作りました:HTML5 対応を判断する事例
※html5に対応していればスライダー、してなければプルダウンメニューで表示。

■HTML5の対応状況を判別するライブラリ「Modernizr」。
【インターネット・アカデミー スタッフブログ】
http://voices.internetacademy.jp/bohr/boston/2011/12/html5modernizr.html
>そこで今回、ご紹介したいのが「Modernizr」というJavaScriptライブラリです。
>HTML5やCSS3の各新要素やAPI、プロパティなどにブラウザが対応しているかどうかを
>判別する役割を担ってくれます。つまりHTML5に対応している場合にはHTML5の新要素を、
>対応していない場合には新要素を使わない、
>といった場合分けをしてコンテンツを作成することができます。

■JavaScriptでデジタル時計を表示するプログラムを書いてみた
 - プログラマーkkの勉強/成長ブログ@ライブレボリューション
http://d.hatena.ne.jp/kiyo560808/20090201/1233508877
>これで、フォーム内の値に現在時刻が表示されるようになる。

■基本的なアニメーション - MDN
https://developer.mozilla.org/ja/Canvas_tutorial/Basic_animations
>おそらく最も大きな制限は、一度図形が描画されると、その状態のままでいるということです。
>もしそれを動かす必要があれば、それ以前に描かれたすべてを再描画する必要があります。
>複雑なフレームを再描画するには多くの時間がかかり、
>パフォーマンスはそれを実行しているコンピュータの速度に大きく依存します。
※アナログ時計のスマートな書き方。

■modernizer.js、ie9.js、html5.js…どれも似た機能を持つスクリプトですが、
HTML5でコーディングする際はどれを使っていますか?
>その理由と、他にも良いものがあれば教えて下さい。 - W3Q
http://w3q.jp/t/1187
※他にも似たようなライブラリがある。

■これでできる! クロスブラウザJavaScript入門:
第5回 JavaScriptの基礎知識#2:クロージャ編|gihyo.jp … 技術評論社
http://gihyo.jp/dev/serial/01/crossbrowser-javascript/0005
>さて,クロージャの前に確認しておくべき基本事項があります。
>それは,JavaScriptでは関数を入れ子にできる,という点です。
>ある関数の中に別の関数を定義することができます。
>基本中の基本ですが,これがクロージャにおいてもっとも重要です。



東北関東大震災義援金
 

calendar

S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  
<< May 2012 >>

selected entries

categories

archives

recent comment

  • デスクトップパンダQQ
    shun1ok
  • デスクトップパンダQQ
    熊猫
  • GIF保存対応
    shun1ok
  • GIF保存対応
    ひろゆき
  • ジグソーパズルとFlash for Andoroid2.2 13
    shun1ok
  • ジグソーパズルとFlash for Andoroid2.2 13
    shun1ok
  • ジグソーパズルとFlash for Andoroid2.2 13
    ひろゆき

profile

書いた記事数:355 最後に更新した日:2012/05/18

search this site.

others