PCサイトと勝手が違ってややこしい。

アイコンの設定

[php]<link rel="apple-touch-icon-precomposed" href="icon.png" />[/php]
スマホのブックマークを登録するときのアイコンの設定。ファビコンみたいなん。
画像のサイズは［57pxx57px］

文字サイズ

[css]html {-webkit-text-size-adjust: 100%}[/css]
Chrome系の設定。そのままだとレイアウトが崩れることが多く、100％に設定しておくのが無難らしい。

スマホ用のCSS

共通の「style.css」とPC用の「style-pc.css」とスマホ用の「style-pc.css」を用意して、headに↓を書く。
デイスプレイの大きさでスマホを判断する。
[php]
<!–PC用CSS–>
<link rel="stylesheet" href="<?php bloginfo(‘template_url’); ?>/style-pc.css" type="text/css" media="all">
<!–スマホ用CSS–>
<link media="only screen and (max-device-width:480px)" href="<?php bloginfo(‘template_url’); ?>/style-s.css" type="text/css" rel="stylesheet"/>
<!– ▲ –>
[/php]

表示設定

[php]
<!– ▼ viewportの設定。画面拡大可 ▼ –>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
[/php]

ランダムで表示を変える。

[php]
<?php
$rndtxt[0] = ‘ランダム１’;
$rndtxt[1] = ‘ランダム２’;
$rndtxt[2] = ‘ランダム３’;
$length = count($rndtxt) – 1;
srand( (double)microtime()*1000000 );
$num=round( rand(0,$length) );
print("$rndtxt[$num]");
?>
[/php]
管理性を考えると外部ファイルとか使ったほうが良いのだろうけど、短いランダムなら。

オンクリックで広告を表示させる

能動的な動作があったほうが広告の注目度が上がる気がする。
[php]
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
[/php]
『filter:alpha(opacity=50);』
これはIE向けの指定。
“50”というのは透明度が“50%”ということ。
透過無しの状態“100%”を指定する際は「filter:alpha(opacity=100);」。
『-moz-opacity: 0.5;』
これはFirefox（Mozzila）向けの指定。
“0.5”というのは透明度が“50%”ということ。
透過無しの状態“100%”を指定する際は「-moz-opacity:1;」。
『opacity: 0.5;』
これはSafariやOpera向けの指定。
“0.5”というのは透明度が“50%”ということ。
透過無しの状態“100%”を指定する際は「opacity:1;」。
ホバーで透過率を0から100にする。

曜日毎に異なる広告を表示させる

参考：http://tenderfeel.xsrv.jp/php/318/
[php]
<?php
date_default_timezone_set( ‘Asia/Tokyo’ );
$week = date("w");
if($week==0){
print "日曜なら表示します";
}elseif($week>= 3){
print "火曜日以降なら表示します";
}
?>
[/php]

サイト下に広告を固定表示する【CSS】

position:fixedで画面に固定表示する事ができる。
下の例では左下30pxの位置に固定表示される。
[css]
.fixad {
position:fixed;
bottom:30px;
left:30px;
z-index:100;
}
[/css]

カテゴリー毎に表示させる広告を変える。【WordPress】

[php]
<?php
if ( in_category(‘1’)) {
$ad = ‘広告１’;
} elseif ( in_category(‘2’)) {
$ad = ‘広告２’;
} elseif ( in_category(‘3’)) {
$ad = ‘広告３’;
} else {
$ad = ‘広告５’;
}
?>
<?php echo $ad; ?>
[/php]

初記事／偶数記事／奇数記事毎に広告を変える【WordPress】

[php]
if (have_posts()) : while (have_posts()) : the_post(); $counter++;
if ($counter == 1) {
初記事広告
}elseif ($counter % 2 == 0) {
偶数記事広告
}else {
奇数記事（それ以外）
}
[/php]
カウンターを設置し、
カウンターが「1」なら初記事
「% 2」は割り算を表し、偶数なら余りが「0」になるので偶数記事
んで、その他が奇数記事になる。「1」指定でも同じ・

広告の強制クリック【JS】

divに「id=text」「style=display:none;」をかけて、
「style=display:block;」の発生トリガーを広告クリックに指定する。
つまり「広告をクリックしないと次には進ませないぞ☆」
ってやり方。めったに見かけないけど、こないだ遭遇した。アカウント停止ならないんだろうか？

スマホとPCで広告を分ける【PHP】

[php]
<?php
$ua=$_SERVER[‘HTTP_USER_AGENT’];
$browser = ((strpos($ua,’iPhone’)!==false)||(strpos($ua,’iPod’)!==false)||(strpos($ua,’Android’)!==false));
if ($browser == true){include ‘ad-s.php’ ; }//スマホ用広告
else{ include ‘ad-pc.php’ ; }//PC用広告
?>
[/php]
「iPhone」か「iPod」か「Android」なら、スマホ用広告の「ad-s.php」を表示し、
それ以外なら、PC用広告の「ad-pc.php」を表示する。

AmazonWebサービス（Product Advertising API）に入門する。

目標

キーワードなどに連動して、人気のランキングを出力するブログパーツを作る。
→サンプルサイト

まず

http://www.ajaxtower.jp/ecs/を見ながら、勉強と下準備。
amazonAPIを利用するには、
・Amazonアソシエイト・プログラムへの参加
・Access Key ID
・Secret Access Keyの取得
が必要。
アソシエイトは参加済みなので、API参加し、IDとKEYを取得。
手順に従い、リクエストコードを取得↓
[html]
http://ecs.amazonaws.jp/onca/xml? Service=AWSECommerceService
&AWSAccessKeyId=[AccessKeyId]
&AssociateTag=[AssociateID]
&Operation=ItemSearch
&SearchIndex=Books
&Title=HarryPotter
&Version=2009-07-01
&Timestamp=2012-11-13T10%3A38%3A55.000Z
&Signature=QhXHRaqbahhbyDIHwL4hWDi9WHJNlbwALLQJ2OQNVmY%3D
[/html]
これをurlに入れると、XMLで出力される。タイムスタンプと署名は毎回取得しなければいけないらしく、そこんとこが厄介そう。
最終目標としては、amazonのリンクを作ってくれる、ウェブサービスを提供したい。

Services_Amazon

PEARのライブラリ『Services_Amazon』ならAmazon APIを簡単に使えるらしい。
ので、下記サイトを参考に作ってみた。
PEARの導入参考：http://blue-spiral.matrix.jp/20110528-pear-in-sakura.html
PHP処理プログラムコード初心者向け参考：http://nplll.com/archives/2011/06/_pearservices_amazon.php
PHP処理プログラムコード参考：http://or2.to/2012/04/service-amazon-2.html
入力フォーム参考：「Amazones」（http://aokobe.sakura.ne.jp/php/amazones.php）

最終コード

[php]
<?php
set_include_path(get_include_path() . PATH_SEPARATOR . ‘絶対パス’);
require_once(‘Services/Amazon.php’); // インクルードファイル
header("Content-type: application/x-javascript");//js
$amazon = new Services_Amazon(‘XXXXXX’, ‘XXXXXX’, ‘XXXXXX-22’);// 『Services_Amazon』の定形
$amazon->setBaseUrl(‘http://ecs.amazonaws.jp/onca/xml’); // 検索範囲：日本のamazon
$category = $_GET[‘category’];//JavaScriptで飛ばしてくる変数。
$param = $_GET[‘param’];
$key = $_GET[‘key’];
$id = $_GET[‘id’];
$number = $_GET[‘number’];
$select = $_GET[‘select’];
$sort_select = $_GET[‘sort_select’];
if(!empty($key)){//もしキーワードがあれば検索。
$result = $amazon->ItemSearch($category, array(‘Keywords’ => $key, ‘ResponseGroup’ => ‘ItemAttributes, Images’));
}
elseif($sort_select == ‘daterank’){//もしキーワードが空ならリリース日順。
$result = $amazon->ItemSearch($category, array(‘BrowseNode’ => $param, ‘Sort’ => ‘daterank’, ‘ResponseGroup’ => ‘ItemAttributes, Images’));
}
elseif(empty($key)){//もしキーワードが空ならランキング。
$result = $amazon->ItemSearch($category, array(‘BrowseNode’ => $param, ‘Sort’ => ‘salesrank’, ‘ResponseGroup’ => ‘ItemAttributes, Images’));
}
for( $i = 0; $i < $number; $i++ ){
$asin = $result[‘Item’][$i][‘ASIN’];
$gazolink = "<div class=’azimg’><a target=’_blank’ href=http://www.amazon.co.jp/exec/obidos/ASIN/".$asin."/".$id."/ref=nosim/><img src=’".$result[‘Item’][$i][‘LargeImage’][‘URL’]."’></a></div>";
$titlelink = "<div class=’aztitle’><a target=’_blank’ href=http://www.amazon.co.jp/exec/obidos/ASIN/".$asin."/".$id."/ref=nosim/>".$result[‘Item’][$i][‘ItemAttributes’][‘Title’]."</a></div>";
if ($result[‘Item’][$i][‘ItemAttributes’][‘Title’] == "") {break;}//タイトルが空白なら、繰り返しがBREAK。
//▼//$selectで表示方法を分岐。
if($select == ‘txt’){//テキストだけ
$mix = "<div class=’az’>".$titlelink."</div>";
}elseif($select == ‘img’){//画像だけ
$mix = "<div class=’az’>".$gazolink."</div>";
}else{//全部
$mix = "<div class=’az’>".$gazolink.$titlelink."</div>";
}
//▲//
$output = $output.$mix;//ループさせるための自己読み込み
}
echo "document.write(\"$output\")";
?>
[/php]

楽天ウェブサービスに入門する。
出力は「xml」と「json」が選べるらしいが、親しみのある「xml」をつかおう。
例によって、simplexmlで読もうとするが失敗。
うーん？わからん。
公式ページによると、SDKによるデータ取得がオススメらしい。
「SDK」とは、Software Development Kitの略で、その中の「Rakuten Web Service SDK for PHP」は、PHPアプリケーションから 楽天が提供しているAPIに、簡単にアクセスすることができる。（※PHP5.2.3以上）
つまりは、PHPライブラリの一種。
PHPのバージョンが心配だったが、PHP5.2.3以上。ミニバードやるじゃん。
見本通り書き呼び出し成功。
ただし、どうも楽天ウェブサービスでは大きい画像が取得できないらしい。
64×64の[smallImage]か128×128の[mediumImage]かの二択。悲しすぎる。
最後にブログパーツ化して、完成。

最終コード

[php]
<?php
header("Content-type: application/x-javascript");//js
$id = $_GET[‘id’];//JavaScriptで飛ばしてくる変数。
$number = $_GET[‘number’];
$select = $_GET[‘select’];
$key = $_GET[‘key’];
require_once dirname(__FILE__).’/sdk/autoload.php’;//sdkをリクエスト
$client = new RakutenRws_Client();
$client->setApplicationId(‘XXXXXXXX’);
$client->setAffiliateId($id);
if(empty($id)){//もしIDが空なら、XXXXXXXX
$client->setAffiliateId(‘XXXXXXXX’);
}
$response = $client->execute(‘ItemSearch’, array(
‘keyword’ => $key,
‘hits’ => $number
));
//var_dump($response);
if ($response->isOk()) {
// レスポンスを foreach でアクセスできます
foreach ($response as $item) {
$gazolink = "<a target=’_blank’ href=".$item[‘affiliateUrl’]."><img src=".$item[‘mediumImageUrl’]."></a>";
$titlelink = "<div class=’aztitle’><a target=’_blank’ href=".$item[‘affiliateUrl’].">".$item[‘itemName’]."</a></div>";
//▼//$selectで表示方法を分岐。
if($select == ‘txt’){//テキストだけ
$mix = "<div class=’az’>".$titlelink."</div>";
}elseif($select == ‘img’){//画像だけ
$mix = "<div class=’az’>".$gazolink."</div>";
}else{//全部
$mix = "<div class=’az’>".$gazolink."<br>".$titlelink."</div>";
}
//▲//
$output = $output.$mix;//ループさせるための自己読み込み
}
}
echo "document.write(\"$output\")";
?>
[/php]