WEB系メモ

Googleに嫌われないためのSEO対策

PageSpeed Insights

修正が必要:画像を最適化する
→無視。しゃーない。でかい画像使いたいときもある。
修正が必要:ブラウザのキャッシュを活用する
「.htaccess」でキャッシュ設定。
※メモ帳で編集するには保存形式「ANSI」

# ブラウザのキャッシュを有効
<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 15 days"
ExpiresByType image/gif "access plus 10 days"
ExpiresByType image/jpg "access plus 10 days"
ExpiresByType image/jpeg "access plus 10 days"
ExpiresByType image/png "access plus 10 days"
ExpiresByType application/x-javascript "access plus 10 days"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType text/js "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
</ifModule>

修正が必要:スクロールせずに見えるコンテンツのレンダリングをブロック
→無視。しゃーない。

モバイルフレンドリーテスト

とりあえずviewpointをdevicewidthにすればOK

<meta name="viewport"content="width=device-width,user-scalable=yes" >

レンタルサーバー

レンタルサーバー選びは難しい。迷って決めても使い始めると小さい後悔がいろいろ湧いてくるもの。
個人的に気になる条件は、
・容量
・転送量制限
・レスポンス速度
・cron可否
・価格
容量は、画像サイトとか自動投稿サイトとかやるなら最重要な要素。
転送量(=PV)制限は、転送量が多くなってしまうブログパーツでは最重要。まぁ普通のサイトではなかなか上限来ないので気にしなくてもよいだろう。
レスポンス速度は、海外より国内サーバーの方が速い印象。
cronは、サーバーのプランによって10分毎とか5個までとか微妙な制限があるので使いたい場合は要確認。
価格は、低価格だと機能制限されてたり、容量が少なかったり。用途に応じたグレードを選ぶのが吉。

今まで使ったレンタルサーバーの感想

一般なら「ネットオウル」、アダルトなら「FUTOKA」が総合力高い。
機能性(特に転送量)重視なら「FC2」がオススメ。

ネットオウル(http://www.netowl.jp/service/)


[国内][アダルト不可][専用管理画面]
個人的に好きな会社。初めて借りたレンタルサーバー。
初めてのレンサバ選びで迷ったらここでいいんじゃないかと思う。価格が良心的で一番安いミニバードは月額250円。アクセス解析とか管理画面が見やすいのも好印象。
※現在[クローバー]使用中。

FUTOKA(https://www.futoka.jp/)


[国内][アダルト可][専用管理画面]
アダルト可のレンタルサーバー。
価格はアダルト可にしては安い月額2000円。
初めてのレンサバ(アダルトサイト用)ならここで間違いない。

FC2レンタルサーバー(https://rentalserver.fc2.com/)


[海外][アダルト可][Plesk管理]
転送量制限が無くて安心。ブログパーツとか転送量が多いサイトに向いてる。
また、数少ないアダルト可のサーバーでもある。有名さに惹かれて契約したが問題なく使用できてる。
欠点はレスポンスの遅さ。国内サーバーに比べると若干反応が遅い。
月額価格は、一般1500円、アダルト3500円。
※現在[一般][アダルト]使用中

さくらのレンタルサーバー‎(http://www.sakura.ne.jp/)


[国内][アダルト不可][専用管理画面]
有名どころで安心。東証1部上場企業。
使い心地は特に不満なし。

フレンドサーバー(http://www.friend-server.com/)

[海外][アダルト可][Plesk管理]

[海外][アダルト可]
とにかく安い。ベーシックプラン(転送量300GB)で480円(月額)。
値段的には初心者向きだがPleskの管理画面が若干とっつきにくい。初期設定さえ乗り越えれば、コストパフォーマンスは最高。

個人的メモ

◆サーバー移転時の注意
FUTOKAはドメイン追加時に自動でDNS設定される。
→サーバー移転の際はドメイン削除かDNS削除が必要。
◆cronコマンドパス
ネットオウル:/usr/bin/php5.3 /home/サーバーID/ドメイン名/public_html/実行.php
FC2:/usr/bin/php /var/www/vhosts/契約名/httpdocs(追加ドメイン名)/実行.php

WEBと広告

タイトル:いちばんやさしいアドテクの教本 人気講師が教える進化するWeb広告の運用法

著者:西井 敏恭,高瀬 大輔,佐藤 洋介,平野 裕亮,上村 崇

出版社:インプレス

発行日:2015-11-12

AppleがiOS9でアドブロック機能を導入したことで、WEB広告の在り方が話題になっている。
広告ブロックを正当化する「アド割れ厨」たちの話(http://anond.hatelabo.jp/20150919145704)
「広告とか邪魔だから消すしwww」と言いながら無料ではてブを使う馬鹿はゴミとしか言い様がないね(http://kyoumoe.hatenablog.com/entry/20150919/1442671034)
「アド割れ厨」……とは新しい。
確かに記事の指摘も一理ある。現行のWEBサービスでは[サービス無料+広告収入]で収益を得ている場合も多い。そこから広告収入が失われれば、残るのは無料サービスのみである。人は対価なしに働けない。既存のビジネスモデルは崩壊する。
で、この記事では法律を作れと言っている。
ソフトウェア、音楽、映画の割れ(無断複製)は数年前に法制化(違法化)された。ではアド割れ(広告回避)も法制化するべきなのか?既存のビジネスモデルを守るために有効な手段だとは思うが、倫理的な賛同が得られるか微妙だし、法律技術的にも難しそうな気がする。
まぁ、なんというか全体的に今さら感が強い。ポップアップ広告はGoogle(chrome)でもデフォルトで回避されるし、既にADBLOCKを入れているユーザーも多い。

2次画像エログ運営

DMMサンプル提携してみた。

DMM.comとサンプル提携すると、成年コミックの単行本や雑誌の1話がブログ等で利用できるようになる。
違法サイトの撲滅と、アフィリエイト拡大のために、最近力を入れて勧誘しているらしい。
サンプル画像の使用方法については、

①サイト内で直接URLにリンクしファイルをダウンロードさせるやり方・・・OK
②サンプル画像をDLいただきサイト内で連続で貼って使用するやり方・・・OK
③アップロードサイトへの投稿・・・NG
また、ご使用時には「タイトル」「作家名」「DMMへのリンク」の設置をお願いいたします。

とのこと。結構自由に使える。
面白そうなのでDMMと契約して、新規サイトを作ってみた。
分類するなら「2次画像サイト」。類似区分は「商業誌レビューサイト」「同人誌・商業誌割れサイト」とか。一般に著作権侵害が横行する界隈での合法サイトは珍しい存在だとは思うが、はたして存在価値を見出せるのか。
利点:健全なサイトなので、検索除外、サイト削除、アフィリエイト規約違反等のペナルティを受けない。
欠点:DMMからのzip配信が月1回程度なので、サイトの更新頻度が保てない。

運営方針

更新:月2回くらい。
広告:DMMアフィリエイト(記事マッチ)
集客方法:検索アクセス
ブックマークアクセス:軽視
検索アクセス(SEO):重視

運営記録

運営期間1年を超えた。それにつけても2次元の女の子は可愛い。
アフィ的なサイトの特徴は、コンテンツがDMM提供ということもあってDMM広告との親和性が高い。広告クリック率(コンバージョン)は15~20%くらい。1PV当たりの収益は0.1円以上の超高収益サイト。コンテンツが広告に結びつくのはすごく良い。
しかしも、アクセスが伸びない。原因は、「更新頻度が低いのと、コンテンツの魅力不足でブックマークがつかない。」「作家名、作品名では競合が多く、検索アクセスの収集が困難。」辺りだろうか。

アクセス数 合計収益推移(月間)

001

運営記録(15/04/19)

サイト運営2年目を迎える。
画像系エログやってる人ってマゾいよなー。更新めんどくさ過ぎ。ってな感じでほぼ放置。大体月1記事更新くらい。PV・収益は綺麗に右肩下がり。現状で月PVは1万くらい。月収益は200円くらい。まぁドメイン代くらいは回収できてるしいいかな。低い志で継続運営。
002

運営記録(15/08/27)

運営終了。2年半運営してきたが消してしまった。収益作業コストが割に合わないし、画像がサーバーを圧迫してきたってのも止める一因。更新頑張れば月1万円くらいには持っていけるけど、正直しんどい。情熱に欠ける。
反省を込めて2次画像エログ運営のアドバイスを2点書き留める。
・毎日更新
・真面目にSEOに取り組む
……あとメンタル面では2次画像エログは趣味色が強くないと継続は厳しい。小銭稼ぎたい目的なら断然動画エログの方が良い。

AmazonWebサービス入門2【PHP】

久々にウェブで遊ぶ。
前回は、自動更新型のランキングブログパーツを作った(→AmazonWebサービス入門
今回は、G-ToolsみたいなHTMLを出力するタイプのウェブサービスを作る。

G-Tools

4812496500 日本の軍艦 120艦艇 (竹書房文庫)
歴史博学倶楽部
竹書房 2013-08-09

by G-Tools

作ったやつ

タイトル:艦隊これくしょん -艦これ- アンソロジーコミック 横須賀鎮守府編(1) (ファミ通クリアコミックス)

著者:コミッククリア編集部

出版社:エンターブレイン

発行日:2013-09-14

ぱぁんぱかぱーん!!劣化コピーの完成。
プログラムは前のんをほぼ流用。変更点は
・ブログパーツではないので1枚のPHP上で処理を完結。
・$KeyをURLエンコードしなくて良い。(するとバグった。)
・画像サイズは「LargeImage」から「MediumImage」に変更。middleじゃなかった。と思ったけどLargeに戻す。
追加した要素は著者、出版社、発行日↓

		$Author = $result['Item'][$i]['ItemAttributes']['Author'];
		$Author = implode(",",$Author);
		$Publisher = $result['Item'][$i]['ItemAttributes']['Publisher'];
		$PublicationDate = $result['Item'][$i]['ItemAttributes']['PublicationDate'];

「Author」は配列で出てくるので、[0]で指定したり、implode()しないとダメだった。
スタイルはHTMLではなく、CSSで処理。

table {
	border:1px solid #ddd;
	margin:10px;
	padding:5px;
	width:100%;
}
th {}
td {}
table img {
	max-width:200px;
}

ちゃんと作るなら、
・書籍以外にも対応
・画像とか要素に掛ける場合の処理
・文字コード変換機能
・情報の取捨選択機能
とか欲しい。
実装予定はないけど。

アンテナサイト入門【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>";
?>

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

画像取得

文字だけではさみしいので、画像も表示してみる。
画像は、「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>";
}
?>

『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」
スパムコメントを排除してくれる。
「Exec-PHP」
投稿にphpを使う。
プロフィール更新でエラー回避。
脆弱かもしれない。
「Google XML Sitemaps」
サイトマップを作ってくれる。多分。
「WP-PageNavi」
ページ制御。
「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/)

設定メモ

WordPressのテーマをアップデートさせない方法(https://blog.cntlog.net/archives/3205)
CSSの記述を下記に書き換える。
Version: 10000.0

ワードプレスで複数サイズの画像が勝手に生成されるのを停止する方法(https://zigstyle.jp/wordpress-autoresize-stop)
メディア設定とオプションからも変更する。
https://自分のドメイン名/wp-admin/options.php

プログラムメモ

なんかいろいろメモ。

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">

広告の表示方法【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」を表示する。