なんかいろいろメモ。

PHP

preg_match

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

<img width="200" src="https://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">