コケムスシェルター

スマホサイト

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

アイコンの設定

<link rel="apple-touch-icon-precomposed" href="icon.png" />

スマホのブックマークを登録するときのアイコンの設定。ファビコンみたいなん。
画像のサイズは[57pxx57px]

文字サイズ

html {-webkit-text-size-adjust: 100%}

Chrome系の設定。そのままだとレイアウトが崩れることが多く、100%に設定しておくのが無難らしい。

スマホ用のCSS

共通の「style.css」とPC用の「style-pc.css」とスマホ用の「style-pc.css」を用意して、headに↓を書く。
デイスプレイの大きさでスマホを判断する。

<!--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"/>
<!-- ▲ -->

表示設定

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

広告の表示方法【PHP】【CSS】

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

<?php
$rndtxt[0] = 'ランダム1';
$rndtxt[1] = 'ランダム2';
$rndtxt[2] = 'ランダム3';
$length = count($rndtxt) - 1;
srand( (double)microtime()*1000000 );
$num=round( rand(0,$length) );
print("$rndtxt[$num]");
?>

管理性を考えると外部ファイルとか使ったほうが良いのだろうけど、短いランダムなら。

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

能動的な動作があったほうが広告の注目度が上がる気がする。

	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;

『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
date_default_timezone_set( 'Asia/Tokyo' );
$week = date("w");

    if($week==0){
      print "日曜なら表示します";
    }elseif($week>= 3){
      print "火曜日以降なら表示します";
    }

    ?>

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

position:fixedで画面に固定表示する事ができる。
下の例では左下30pxの位置に固定表示される。

.fixad {
	position:fixed;
	bottom:30px;
	left:30px;
	z-index:100;
}

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

   <?php
if ( in_category('1')) {
$ad = '広告1';
} elseif ( in_category('2')) {
$ad = '広告2';
} elseif ( in_category('3')) {
$ad = '広告3';
} else {
$ad = '広告5';
}
	?>

<?php echo $ad; ?>

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

if (have_posts()) : while (have_posts()) : the_post(); $counter++;

if ($counter == 1) {
初記事広告
}elseif ($counter % 2 == 0) {
偶数記事広告
}else {
奇数記事(それ以外)
}

カウンターを設置し、
カウンターが「1」なら初記事
「% 2」は割り算を表し、偶数なら余りが「0」になるので偶数記事
んで、その他が奇数記事になる。「1」指定でも同じ・

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

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

スマホとPCで広告を分ける【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用広告
?>

「iPhone」か「iPod」か「Android」なら、スマホ用広告の「ad-s.php」を表示し、
それ以外なら、PC用広告の「ad-pc.php」を表示する。

AmazonWebサービス入門【PHP】

AmazonWebサービス(Product Advertising API)に入門する。

目標

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

まず

http://www.ajaxtower.jp/ecs/を見ながら、勉強と下準備。
amazonAPIを利用するには、
・Amazonアソシエイト・プログラムへの参加
・Access Key ID
・Secret Access Keyの取得
が必要。
アソシエイトは参加済みなので、API参加し、IDとKEYを取得。

手順に従い、リクエストコードを取得↓

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

これを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

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

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\")";
?>

検索エンジンで検索されないようにする【HTML】

私を探さないでください。

<meta name="robots" content="noindex,follow" />

メタタグで設定する。
「このページは検索されません。このページからのリンク先ページは検索されます。」の意。

結構効く↓
「3,000」くらいあった検索アクセスも約10日でほぼ「0」に。

スタイル確認

h1

h2

h3

h4

h5
h6
【テーブルの例】
列-A 列-B 列-C
行-1 A1 B1 C1-C2
行-2 A2 B2
行-3 A3 A3-B3

引用

入門書

勉強するにあたって買った本。
情報はいくらでもネットに流れているけれども、はじめはちゃんとした本買った方が良い。
体系立ててあり、理解が早い。

よくわかるPHPの教科書
よくわかるPHPの教科書 たにぐち まこと

毎日コミュニケーションズ 2010-09-14
売り上げランキング : 5613

Amazonで詳しく見る by G-Tools

よくわかるJavaScriptの教科書
よくわかるJavaScriptの教科書 たにぐち まこと

マイナビ 2012-03-24
売り上げランキング : 70756

Amazonで詳しく見る by G-Tools

本格ビジネスサイトを作りながら学ぶ WordPressの教科書
本格ビジネスサイトを作りながら学ぶ WordPressの教科書 プライム・ストラテジー株式会社

ソフトバンククリエイティブ 2012-03-30
売り上げランキング : 1127

Amazonで詳しく見る by G-Tools

3 / 3123