コケムスシェルター

アンテナサイト入門【PHP】

アンテナサイトを作ってみる。
→完成サンプル

『simplexml_load_file』でアンテナサイトを作る

まず、アンテナサイトの基本、RSSを読み込んで配信してみる。
外部RSSをPHPで取得するには、関数「simplexml_load_file」を使う。
※「simplexml_load_file」はサーバーのphp.ini設定で「allow_url_fopen」を有効にしないと使えないので注意

タイトル:よくわかるPHPの教科書

著者:たにぐち まこと

出版社:毎日コミュニケーションズ

発行日:2010-09-14

入門書『よくわかるPHPの教科書』のサンプルを参考に書く↓

<?php
$xml = simplexml_load_file('http://rss.fnn-news.com/fnn_news.xml');
echo "<ul>";   
foreach($xml->channel->item as $entry){
	$entrydate = date ( "Y.m.d",strtotime ( $entry->pubDate ) );
	echo "<li>$entrydate<a href='$entry->link'>$entry->title</a></li>";
}
echo "</ul>";
?>

これで日付と、リンク付きの記事タイトルがリスト表示される。
→テスト1

画像取得

文字だけではさみしいので、画像も表示してみる。
画像は、「preg_match」で取得↓

<?php
$xml = simplexml_load_file('http://rss.fnn-news.com/fnn_news.xml');

foreach($xml->channel->item as $entry){
echo "<article>"; 

//サイトリンク
$site_title = $xml->channel->title;
$site_link = $xml->channel->link;
$site_titlelink = "<a href='$site_link'>$site_title</a>";
echo $site_titlelink;

//日付
$date = date ( "Y.m.d",strtotime ( $entry->pubDate ) );
echo $date;

//記事リンク
$titlelink = "<a href='$entry->link'>$entry->title</a>";
echo $titlelink;

//画像
preg_match('/<img.*>/i', $entry->description, $entryimg);
echo $entryimg[0];

echo "</article>";

}
?>

→テスト3

『MagpieRSS』でアンテナサイトを作る

アンテナサイトを作るなら、複数のRSSを読み込み、日付順に並び替える必要がある。また表示速度を上げるためにキャッシュ機能も欲しい。
「simplexml_load_file」で複数読み込み、並び替えて、「cron」で定期更新して~云々。という方法もある。
が、今回はライブラリ(MagpieRSS)の力を借りる。

最終コード(15.06.21修正)↓

<?php

//RSS
$rssUrl=array(
'http://blog.livedoor.jp/news4vip2/index.rdf',//ニュー速クオリティ
'http://himasoku.com/index.rdf',//ひま速
'http://kanasoku.info/index.rdf',//カナ速
'http://workingnews.blog117.fc2.com/?xml',//働くモノニュース
'http://blog.livedoor.jp/dqnplus/index.rdf',//痛いニュース
'http://majikichi.com/index.rdf',//マジキチ速報
''
);

//MagpieRSS
require_once('../magpierss-0.72/rss_fetch.inc');//MagpieRSSロード※パス指定注意
define('MAGPIE_OUTPUT_ENCODING','UTF-8');//Encode
define('MAGPIE_CACHE_ON', false);//Cacheを残す時間

//配列編集
foreach ($rssUrl as $no => $rss_url) {
	$rss = @fetch_rss($rss_url);
	if ($rss != NULL) {
		for ($i=0; $i<count($rss->items); $i++) {
		$rss->items[$i]["site_title"] = $rss->channel["title"];
		$rss->items[$i]["site_link"] = $rss->channel["link"];
		}
	$rssItemsArray[] = $rss->items;
	}
}//--▲foreach--
$concatArray = array();
for($i=0;$i<count($rssItemsArray);$i++){
$concatArray = array_merge($concatArray,$rssItemsArray[$i]);}
foreach ($concatArray as $no => $values) {
 
//RSSの種類によって日付を取得
if($values['published']){$date = $values['published'];}//Atom1.0
elseif($values['dc']['date']){$date = $values['dc']['date'];}//RSS1.0
elseif($values['pubdate']){$date = $values['pubdate'];}//RSS2.0
$date=date("Y-m-d H:i:s",strtotime($date));//形式を揃える
 
//Filter
$nowtime = date("Y-m-d H:i:s",strtotime( "now" ));//現在時刻の取得
if($date > $nowtime){//未来記事の排除
}elseif(preg_match("/AD/", $values["title"])){//広告記事の排除
}elseif(preg_match("/PR/", $values["title"])){
}else{
 
//値の定義
$title=$values["title"];
$link=$values["link"];
$site_title=$values["site_title"];
$site_link=$values["site_link"];
 
//画像取得
$content=$values["content"]["encoded"];
preg_match('/<img.*>/i', $content, $img_all);
if(empty($img_all[0])) {
$content = $values['description'];
preg_match('/<img.*>/i', $content, $img_all);
}
preg_match('/http.*?(\.gif|\.png|\.jpg|\.jpeg$|\.bmp)/i', $img_all[0], $gazo);
if(empty($gazo[0])) {$gazo = "http://azaz.clouver.jp/antenna/noimage.png";}
else{$gazo = $gazo[0];}
 
//配列
$rssArray[]=array($date, $title, $link, $site_title, $site_link,$gazo);
}//--▲if--Filter--
}//--▲foreach--

//配列設定
$num = 50;//最大件数
if(count($rssArray)>$num){$count=$num;}else{$count=count($rssArray);}//取得件数優先
rsort($rssArray);//並び替え

//HTML整形
for ($i=0; $i<$count; $i++) {
$date=date("m/d H:i",strtotime($rssArray[$i][0]));
$title=$rssArray[$i][1];
$link=$rssArray[$i][2];
$site_title=$rssArray[$i][3];
$site_link=$rssArray[$i][4];
$gazo=$rssArray[$i][5];
	$datelink = "<div class='date'>$date</div>";
	$gazolink = "<a target='_blank' href='$link'><div class='trim'><img src='$gazo' /></div></a>";
	$titlelink = "<div class='title'><a href='$link'>$title</a></div>";
	$site_titlelink = "<div class='site_title'><a href='$site_link'>$date - [$site_title]</a></div>";
	echo "<article>$gazolink$titlelink$site_titlelink</article>";
}//--▲for--
?>

→完成サンプル

プログラムコード補足

基本は「5分で作れるアンテナサイト!RSSを取得して更新順に表示させてみた。(http://wcb.jp)」を参考に。
追加機能は、画像の取得、未来記事の削除。

未来記事の削除

未来記事は、日付でフィルター↓

//Filter
$nowtime = date("Y-m-d H:i:s",strtotime( "now" ));//現在時刻の取得
if($date > $nowtime){}

画像取得

「if」と「preg_match」多用で処理しているが、…軽量化の余地ありそう。
1.<content>内からを探す→画像取得OK
↓見つからない時
2.<description>内から<img>を探す→画像取得OK
↓見つからない時
3.「noimage.png」を表示

//画像取得
$content=$values["content"]["encoded"];
preg_match('/<img.*>/i', $content, $img_all);
if(empty($img_all[0])) {
$content = $values['description'];
preg_match('/<img.*>/i', $content, $img_all);
}
preg_match('/http.*?(\.gif|\.png|\.jpg|\.jpeg$|\.bmp)/i', $img_all[0], $gazo);
if(empty($gazo[0])) {$gazo = "http://azaz.clouver.jp/antenna/noimage.png";}
else{$gazo = $gazo[0];}

キャッシュ設定

MagpieRSSの初期設定では3600秒(=60分=1時間)。キャッシュは、好きな数字に変更可↓

define('MAGPIE_CACHE_AGE','1800');//cacheを1800秒記録
define('MAGPIE_CACHE_ON', false);//cacheを残さない

その他

補足・注意点

・当記事で紹介しているプログラムは、phpが動作する環境が必要です。
・『MagpieRSS』も公式サイト(http://sourceforge.net/projects/magpierss/files/)から入手してください。最新バージョンは『magpierss-0.72』です。(2013年現在)
・アメーバブログなど、アクセスを制限しているサイトの画像表示はできません。
・Atomの画像取得には未対応。

参考・関連リンク

アンテナサイト作成[BABEL]
MagpieRSSを利用すると、RSSの作成が簡単に行える[はじめてのWordPressまとめ]
MagpieRSSとMixItUpを使ってレスポンシブなアンテナサイトをつくってみた。その1[うぇぶ屋がとんだ]

WordPressメモ【WordPress】

ワードプレスの設定

記事削除

投稿一覧の画面は初期設定は20件。選択するともっと増やせる。一括削除するときは便利。

ピンバック

WordPress同士でリンクを張ったときに勝手にコメント?トラックバック?されてしまう。
これをピンバックと言うらしい。ピンバックを送信しないようにしたい場合は、[設定>ディスカッション]から『投稿中からリンクしたすべてのブログへの通知を試みる』のチェックを外すとOK。

関数・PHPの設定

ページ設定

ワードプレスは、headerやfooterを分離しておくと管理が楽。
カテゴリー毎にテンプレートを買えることも出来る。
<シングルページの時のみ「シングル」と表示する。>

if(is_single()){
print<<<EOF
シングル
EOF;
}

<カテゴリー4の時にcontent-30を表示する>

if ( in_category('4')) {
get_template_part( 'content','30' );
}
<?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?>

ファビコン設定

<link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/favicon.ico" />

テンプレートトップまでのリンクは↓で呼び出せる。

<?php bloginfo('template_url'); ?>

トップページのURLを取得したい

<?php echo home_url(); ?>

テンプレートタグ/wp title

ヘッドのtitle記述について。
https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/wp_title

スラッグ

スラッグの表示は、パーマリンク設定で基本以外(カスタム)を選択。

便利なプラグイン

「Akismet」
スパムコメントを排除してくれる。

「Contact Form 7」
問い合わせフォーム。

「Exec-PHP」
投稿にphpを使う。
プロフィール更新でエラー回避。
脆弱かもしれない。

「Google XML Sitemaps」
サイトマップを作ってくれる。多分。

「WP-PageNavi」
ページ制御。

「WP Multibyte Patch」
マルチバイト対応。

「SyntaxHighlighter Evolved」
phpやCSSのコードを綺麗に表示してくれる。

「WordPress Popular Posts」
ページの閲覧数で人気記事がランキング表示できる。
サムネイルを表示したい場合には、「Auto Post Thumbnail」を導入しておくと記事内の画像をサムネイル化してくれて便利。

「Search Meter」
サイト内検索のキーワードを取得することができるプラグイン。

「FeedWordPress」
RSSから記事の自動投稿を行える。

「Delete Duplicate Posts」
重複記事を削除できる(自動可)
PHP5.3.3まで

「Bulk Delete」
カテゴリー毎記事削除など割と細かい設定可能。

「WP-DBManager」
一括削除ができる。

「3.8」が便利な場合がある。
WordPressのバージョンをダウングレードする方法(http://wp.myafi.net/downgrade/)

プログラムメモ

なんかいろいろメモ。

PHP

preg_match

目的:RSSから画像を取得したい。
画像は例えば↓のようなコードである。

<img width="200" src="http://hytool.org/test.png?fit=AAA" alt="test" height="300" border="0"/>

これを「preg_match」を使って取り出す。
preg_matchは、「/~/」の中に正規表現を書く。

URLを取得する

まず、元データ(RSS)からimgタグを取得する。

preg_match('/<img.*?>/i', $元データ, $img取得);

次に、URLを取得する。(上記で取得したimgタグからURLを抜き出す。)

preg_match('/http.*?(\.gif|\.png|\.jpg|\.jpeg$|\.bmp)/i', $img取得, $url取得);

※preg_match()は配列で返ってくる。

【エラーメモ】

→IMGタグ内に複数URLがある場合はエラー。サイトごとに特殊設定するか、拡張子で後方一致させれば対応可能。

→画像URLに複数の拡張子が含まれる場合。複数あるうちの最後のJPGを取得すれば回避可能。

まぁレアケースなので無視してる。

正規表現メモ

「.*?」ワイルドカード的なもの「.」が任意の一文字。「*」が0回以上の繰り返し「?」が直前文字の0回以上の繰り返し。例えば「.*?あ」で後方一致。はじめに出てくる「あ」までを指定できる。
「[]」は、どちらかに一致。例えば[\'”]ならばシングルクォーテーションかダブルクオーテーションかに一致の意味。
「()」はグループ化。例えば(gif|png)ならば「gif」か「png」に一致の意味。
「[^ABC]」はA、B、Cのいずれでもない任意の1文字。(※行頭指示ではない。)
「i」は大文字と小文字の区別をしないの意。「preg_match」の最後に付け足す。

変数を表示する

echo($phpcode);
print_r($phpcode);
var_dump($phpcode);

ダブル/シングルクォーテーションの違い

ダブルクォーテーション、シングルクォーテーションの違いは
・ダブルクォーテーション・・・ 文字列中の変数を変数値に置換する
・シングルクォーテーション・・・ 文字列中の変数を変数値に置換しない

[シングル]の方が処理が早くて、[ダブル]の方が高機能。
特段理由のない場合は処理の早い[シングル]を使う↓

echo('<a target="_blank" href="'.$link.'">'.$title.'</a>');

[ダブル]も便利。接続子が必要なく書きやすい↓

echo("<a target='_blank' href='$link'>$title</a>");

$_SERVER

HTTP_REFERER

if(preg_match("/dtiblog/",$_SERVER[ 'HTTP_REFERER' ])){
$output = mb_convert_encoding($output, "eucjp", "auto");
};

ブログパーツで使ったコード。リンク元のアドレスを取得できる。
リンク元(プログパーツ設置先)のアドレスに”dtiblog”が含まれるなら、”eucjp”にエンコードする。

REQUEST_URI

if($_SERVER['REQUEST_URI'] =="/ファイル名.php"){}

現在のアドレスを取得できる。現在位置にclass「current」を付与したい場合に使用(もっと汎用性のあるコードもあるだろうけど、とりあえずこれで)

<a class="menu<?php if($_SERVER&#91;'REQUEST_URI'&#93; == '/cat1.php'){echo ' current';} ?>" href="cat1.php">cat1</a>
<a class="menu<?php if($_SERVER&#91;'REQUEST_URI'&#93; == '/cat2.php'){echo ' current';} ?>" href="cat2.php">cat2</a>

トップページをランダムで変える【PHP】

「mt_rand()」でランダムな数字を生成し、「header()」でファイルを読み込む。

<?php
$random = mt_rand(0,2);
if($random == 0) {
	header('Location:cat1.php');
} else if($random == 1) {
	header('Location:cat2.php');
} else {
	header('Location:cat3.php');
}
?>

strtotime

アンテナサイトの日付ソート機能にエラー発見。
サイトごとに日付の書き方が異なるが、それを統一する関数が「strtotime()」
ただし、対応できない書式の日付も存在する。それにあたってしまったらしい。

Sat, 15 Jun 2013 10:30:00 0

最後の「 0」がどうにも具合が悪いらしい。
サイトは「WordPress」の基本機能でRSS配信してるっぽいが、何をどういじったらそんな特殊な日付が出るのか不明である。

Sat, 15 Jun 2013 10:30:00 +0000

とかだとうまくいくんだが。「+0000」の省略形なのかな?
個別で対処したが、汎用の方法がわからん。

関数つくる

繰り返し記述していた関数をひとつにまとめてみる。

function 関数名 (引数) {
処理
}

ってのが関数の基本形。
基本形に倣って↓

<?php
function rss($rss){
	$xml = simplexml_load_file($rss, 'SimpleXMLElement', LIBXML_NOCDATA);
	$count = 0;
	foreach($xml->channel->item as $item){
		$day = date ( "m.d.H.i",strtotime ( $item->pubDate ) );
  		$link = $item ->link;
		$title = $item ->title;
		$val =  "<tr><td class='day'>$day</td><td class='title'><a href=\"$link\" target=\"_blank\">$title</a></td></tr>";
			echo  $val;
 		$count++;
		if ($count > 5){break;}
	}
}
?>

「rss」という名前の関数に、rssを読み込む処理を書いておく。
んで、変数「$rss」を定義して、関数「rss」を実行。↓

<?php $rss = 'http://newsonjapan.com/rss/top.xml';?>
<?php rss($rss); ?>

絶対パスを調べる【PHP】

echo __FILE__;

HTML エンティティに変換【PHP】

$title = htmlspecialchars("$title", ENT_QUOTES, 'UTF-8');

特殊文字を HTML エンティティに変換する。書式にうるさい「XML」を作成するときに使える。

http://php.net/manual/ja/function.htmlspecialchars.php

http://okwave.jp/qa/q2399976.html

一言掲示板【PHP】

短いコードで掲示板を作成可能。
「phpファイル」と、書き込み用の「message.txt」を用意する。

<?php
if (isset($_POST['message'])) {
$message = $_POST['message'];
$now     = date('m/d');
$post_data = "$message ($now)\n";
$read_data = file_get_contents('message.txt');
file_put_contents('message.txt', $post_data . $read_data);
}
?>

<div class = "bbs">
<form action="" method="post">
メッセージ:<br />
<input type="text" name="message" size="30" value="" /><br />
<input type="submit" value="投稿する" /><br />
</form>
<?php
$fp = fopen('message.txt', 'r');
while ($line = fgets($fp)) {
  echo '<p>' . htmlspecialchars($line, ENT_QUOTES) . "</p>\n";
}
fclose($fp);
?>
</div>

【PHP】存在するページ(URL)か確認

http://ysklog.net/php/1670.html
重いが。

getimagesize

画像の情報を取得する関数。
0 画像の幅
1 画像の高さ
2 画像の種類を示すフラグ(詳しくはここへ)
3 画像の幅と高さ
bits ビット/ピクセル
channels チャンネル数
mime 画像のMIMEタイプ
とかがわかる。
超有能な関数だがクソ重い。リアルタイムでの処理とか、多ファイルの処理には向かない。

// 画像情報を取得する @を付与しエラー無視
list($getWidth, $getHeight ) = @getimagesize($元データ);
if (($getWidth==1) && ($getHeight==1)){print '1ピクセルの画像';}

指定フォルダ内の画像ファイルを取得して表示【PHP】

http://ijbk.deci.jp/?p=783を参考に。

<?php
function readimg($imgFolder){
$imgList = scandir($imgFolder);
$count = count($imgList);
for($i = 0; $i < $count; $i++){
  $file = pathinfo($imgList[$i]);
  $fileName = $file["basename"];
  $fileExtension = $file["extension"];
  if($fileExtension == ('png')){
    echo '<img src="' .$imgFolder.$fileName . '">';
  }
}
}
?>
<?php
$imgFolder = 'img/フォルダ名/';
readimg($imgFolder); ?>
?>

使用画像はpngのみ指定。

$imgFolder = 'img/'.get_the_ID().'/';
$imgFolder = the_title( 'img/' , '/' , false );

IDあるいはタイトルで、参照フォルダを指定。

配列の宣言方法、配列数分ループさせる方法

配列数分ループして値を取り出す方法
http://www.24w.jp/study_contents.php?bid=php&iid=php&sid=array&cid=001

foreachを指定した回数のみ実行する

http://hacknote.jp/archives/4063/
$i++で処理しようかと思ったけど、array_sliceで処理した方が良さげ。

画像の保存と整形

「画像判定→保存→リサイズ」
を行いたかったが、失敗。一度に処理したいファイルが多すぎてタイムアウトする。同時10画像くらいまでなら動く↓

//getimagesize関数で画像情報を取得する
list($img_width, $img_height, $mime_type, $attr) = getimagesize($gazo);
//list関数の第3引数にはgetimagesize関数で取得した画像のMIMEタイプが格納されているので条件分岐で拡張子を決定する
switch($mime_type){
    //jpegの場合
    case IMAGETYPE_JPEG:
        //拡張子の設定
        $img_e = "jpg";
        break;
    //pngの場合
    case IMAGETYPE_PNG:
    //拡張子の設定
        $img_e = "png";
        break;
    //gifの場合
    case IMAGETYPE_GIF:
        //拡張子の設定
        $img_e = "gif";
        break;
}

//保存する
$imgdata = file_get_contents($gazo);
	if (!empty($cat)){
	file_put_contents("保存先/img_$i.$img_e",$imgdata);
	}else{
	file_put_contents("保存先/img_$i.$img_e",$imgdata);
	}

//jpgのみw=300リサイズ
	if($img_e == "jpg"){
	$file1 = "保存先/img_$i.$img_e";
	$file2 = $file1;//画像保存先
	$in = ImageCreateFromJPEG($file1);//元画像ファイル読み込み
	$size = GetImageSize($file1);//元画像サイズ取得
	$width = 300;//生成する画像サイズ(横)
	$rate = $size[0] / $width;//圧縮比
	$height = $size[1] /  $rate;//リサイズ後縦幅
	$out = ImageCreateTrueColor($width, $height);//画像生成
	ImageCopyResampled($out, $in, 0, 0, 0, 0, $width,$height, $size[0], $size[1]);//サイズ変更・コピー
	ImageJPEG($out, $file2);//画像保存
	$gazo = "保存先/img_$i.jpg";
}

配列の保存と取り出し

//dat形式で保存
file_put_contents("保存先", serialize($concatArray));
//dat形式とりだし
$rssArray = unserialize(file_get_contents("保存先"));

スクレイピング

前から興味あったので少し触る。
「Simple HTML DOM Parser」使ってみた、取得は簡単。ただノイズ処理がめんどくい。当然APIとかXMLのほうが扱いやすい。

PHP Simple HTML DOM Parserを使ったWebスクレイピング入門(http://qiita.com/esehara@github/items/db231c99f8076aabdfb2)

include "simple_html_dom.php";
$html = file_get_html('http://XXXXXX');

foreach ($html->find('article') as $entry) {
	$title = $entry->find("h2", 0)->plaintext;
	$link = $entry->find("a", 0)->href;
	$img = $entry->find("img", 0)->src;

上ので、article毎にh2タグ、Aタグ、IMGタグの情報を取得できる。
サイトのトップページのスクレイピングが可能。
find()の使い勝手が良い。
クラス指定したい場合は↓みたいに書く(クラス=contentのdivタグ)

find('div[class=content]') 

回数指定もできる↓(2番めに見つかるliタグ)

find("li", 2)->href;

転送

サイト移転とかで飛ばす方法メモ。

PHPで

<?php
header('Location:新しいアドレス');
?>

ほとんどタイムブランクをおかずに、転送できる。
・利用者のストレス軽減◎

メタタグで

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"><title>ジャンプ</title>
<meta http-equiv="refresh" content="10;URL=新しいアドレス">
</head>
<body>
10秒後にジャンプします。<br>
</body>
</html>

転送までの時間を設定することができる。
・相互リンクサイトなどへの広報性◎

JavaScript

JavaScript

タイルデザイン

タイルデザインを実装しようとしてみた。失敗してやめたけど。
「Minigrid」を使えば簡単。クラス「cards」でくくった中のクラス「card」が勝手にタイル表示される↓

<script>
var grid = new Minigrid({
  container: '.cards',
  item: '.card',
  gutter: 6
});
grid.mount();
</script>

ただ、これだと問題あり。
画像の大きさの読み込みが完了する前にJSが動いてしまうので、大きさがバグる。
で、読み込んだ後に実行することにした↓

<script>
window.onload = function () {
var grid = new Minigrid({
  container: '.cards',
  item: '.card',
  gutter: 6
});
grid.mount();
};
</script>

バグらなくはなったが、しかし思いのほか遅い。
調べるとタイル表示は、スクロールで画像を読み込んでいくプログラムと併用することが多いっぽい。たぶんこの辺のことを考慮してだろうと思う。で、結局別にそこまでしてタイルじゃなくてもいいやと思ったのでやめる。
参考:【JavaScript】カード型レイアウトを簡単に実装できる[Minigrid]の使い方(http://on-ze.com/archives/5234)

jQuery

画像がない時の処理

<script>
$(document).ready(function() {
	//画像が見つからないときにエラーイベント発生
	$('img').error(function() {
		//置換処理
		$(this).attr({
			src: '/noimage.png',
		});
	});
});
</script>

HTML

form

selectで、選択後すぐに移動する

「onchange=”submit()”」というのを使うと選択後すぐに値を渡してくれる。

  <form>
    <select name="ネーム" onchange="submit()">
<option value="1">選択1</option>
<option value="2">選択2</option>
<option value="3">選択3</option>
<option value="4">選択4</option>
    </select>
  </form>

valueの表示を隠す。

「input type=”hidden”」を使う。

<form action="">
<input type="hidden" name="ネーム" value="入力したい値">
<input type="submit" value="表示したい値">
</form>

選択肢を記憶する

session_start();
if (isset($_POST['id'])) {
	$_SESSION['session_id'] = $_POST['id'];//セッション
	setcookie('cookie_id', $_POST['id'], time() + 60 * 60 * 24 * 14);//Cookie
}
...

...
if (isset($_SESSION['session_id'])) {
	$id = $_SESSION['session_id'];
}elseif (isset($_COOKIE['cookie_id'])) {
	$id = $_COOKIE['cookie_id'];
} else {
	$id = 'azoo-22';
}

selectを連動プルダウンさせる

http://d.hatena.ne.jp/Mars/20071109を参考。
詳しくはしらない。

CSS

カラムの読み込み順優先順位

カラムの読み込み順を調整した

今までは普通に左から記述。float:leftで並列していた。
左のサイドバーが重いので、中央から読み込ませたい。

<float:left 横幅:メインコンテンツ+左サイドバー>
<float:rightメインコンテンツ>
<float:left左サイドバー>
<float:right右サイドバー>
にすると中央から読みこむ。

横幅指定するのは、メインコンテンツが読み終わるまでは、メインコンテンツは左寄せになって、読み込み後に中央に飛びチカチカしてしまうので、横幅指定することで、はじめから中央に配置することができる。

画像の下に謎の隙間

画像の下に謎の隙間ができるのを防ぐには(http://allabout.co.jp/gm/gc/23889/3/)
が参考になった。
ベースラインに合わせていると発生する隙間だったらしい。解決策↓

img { vertical-align: text-bottom; }

スマホサイト

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