WordPressで構築したモバイル対応サイトで、携帯からお問い合わせするときに中高生などの若いユーザーが半角カナで文字入力する事が多いらしい。フォームからのメールが化けるとの事で対応策を探してみたのだけど、結局下記の方法で解決。functions.phpにフィルターフックを追加して、強制的に全ての半角カナ文字を全角カナに変換する方法にしました。もっとスマートな方法がありそうな気もするけど・・・。
mb_convert_kana()の第2引数（”K”の部分）は変換オプションなので、変換したい種類を変えたい場合はこちらを参考に。今回は半角カナ文字を全角カナに変えるオプションを使った。
functions.php
function my_content_filter($content) {
return mb_convert_kana($content, "K");
}
add_filter('wpcf7_mail_tag_replaced', my_content_filter, 9);
PHPの正規表現を使うときにいつもネット上を探すのでメモ。
■文字列からimgタグを抜き出す正規表現
preg_match ("/<img(.+?)>/", $str, $matches);
■文字列からURLを抜き出す正規表現
preg_match("/http:\/\/[a-z0-9\/\-_\.]+/i", $str, $matches);
$matches変数に配列として代入される。imgタグやURLが複数ある場合は$matches[1]で2番目を取得する感じ。
WordPressのループ内で$postオブジェクトの中身を取り出すときにいつもプロパティ名が分からなくなるのでメモ。日付を取得したい場合は$post->post_dateで取り出す。
ID
post_author
post_date
post_date_gmt
post_content
post_title
post_excerpt
post_status
comment_status
ping_status
post_password
post_name
to_ping
pinged
post_modified
post_modified_gmt
post_content_filtered
post_parent
guid
menu_order
post_type
post_mime_type
comment_count
filter
ティザーサイト等で良く使われる「オープンまであと何日」みたいなカウントダウンを作ってみる。Flashだけで作るとローカルタイムに依存するので、ユーザーに時計を進められるとネタばれすることも。たまに見かけるけど。上のデモはアクセスした日から常に1ヶ月先をカウントダウンします。残りゼロになっても、何も起きませんよ。
サーバーから時間を取得した後にFlash側で経過時間を足して、目的の時間から差分を取ることでどのPCから見てもカウントダウンの時刻を同期することができる。
カウンタークラスにしてみた。ドキュメントクラスでは下記のように使います。
package
{
import flash.display.Sprite;
import flash.text.TextField;
import info.five.net.Counter;
import info.five.events.CountEvent;
/**
* ...
* @author 5ive
*/
public class Main extends Sprite
{
public function Main():void
{
var d:Date = new Date();
var ctr:Counter = new Counter(d.fullYear, d.month + 2, d.date);
ctr.getServerTime("servertime.php");
ctr.addEventListener(Counter.CHANGE, onChange);
ctr.addEventListener(Counter.FINISH, onFinish);
}
private function onFinish(e:CountEvent):void
{
trace("finish!");
}
private function onChange(e:CountEvent):void
{
countText.text = e.day + "d " + e.hour + "h " + e.minute + "m " + e.second + "s " + e.milisecond + "ms";
}
}
}
new Counter()の引数でカウントさせたい未来の日付と時間を渡す。getServerTime()メソッドでPHPへのパスを渡す。後はCHANGEとFINISHイベントをリスナーに登録して時間が流れるのを待つだけ。
Counter.as
package info.five.net
{
import flash.display.Sprite;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.net.URLVariables;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.events.EventDispatcher;
import flash.utils.getTimer;
import info.five.events.CountEvent;
/**
* ...
* @author 5ive
*/
public class Counter extends EventDispatcher
{
public static const CHANGE:String = "change";
public static const FINISH:String = "finish";
private var _loader:URLLoader;
private var _serverTime:Number;
private var _swfTime:Number;
private var _futureDate:Date;
private var _sp:Sprite;
public function Counter(year:uint, month:uint, day:uint, hour:uint = 0, monuites:uint = 0, second:uint = 0, milisecond:uint = 0):void
{
_sp = new Sprite();
_futureDate = new Date(year, month - 1, day, hour, monuites, second, milisecond);
}
//------------------------------
// サーバーへの問い合わせ
//------------------------------
public function getServerTime(url:String):void
{
//-----[キャッシュ対策]
var date:Date = new Date();
url += "?t=" + date.getTime();
//-----[サーバーの時間取得]
_loader = new URLLoader();
_loader.addEventListener(Event.COMPLETE, onComplete);
_loader.addEventListener(IOErrorEvent.IO_ERROR, onError);
_loader.load(new URLRequest(url));
}
//------------------------------
// IOErrorEvent
//------------------------------
private function onError(e:IOErrorEvent):void
{
trace("error=" + e.text);
}
//------------------------------
// サーバーの時間取得
//------------------------------
private function onComplete(e:Event):void
{
var urlVariables:URLVariables = new URLVariables(_loader.data);
_serverTime = Number(urlVariables.returnValue);
_swfTime = getTimer();
//-----[URLLoaderの削除]
_loader.removeEventListener(Event.COMPLETE, onComplete);
_loader.removeEventListener(IOErrorEvent.IO_ERROR, onError);
_loader.data = null;
_loader = null;
//-----[タイマーの開始]
if (_futureDate.getTime() < _serverTime)
{
trace("[error]:カウントする日付が過去を指定しています。");
}
else
{
if (_sp != null) _sp.addEventListener(Event.ENTER_FRAME, onTicks);
}
}
//------------------------------
// タイマーの更新
//------------------------------
private function onTicks(e:Event):void
{
var passage:Number = _serverTime + (getTimer() - _swfTime);
var diff:Number = _futureDate.getTime() - passage;
var day:* = Math.floor(diff / (24 * 60 * 60 * 1000));
var total:* = Math.floor(diff / (60 * 60 * 1000));
var hour:* = total - (day * 24);
var minute:* = Math.floor(diff / (60 * 1000)) - (total * 60);
var second:* = Math.ceil(diff / 1000) - ((minute * 60) + (total * 60 * 60)) - 1;
var milisecond:String = diff.toString().substr(diff.toString().length - 3, 3);
//-----[2桁で表示]
day = String(day + 100).substr(1, 2);
hour = String(hour + 100).substr(1, 2);
minute = String(minute + 100).substr(1, 2);
second = String(second + 100).substr(1, 2);
//-----[イベントクラスに値を格納]
var ce:CountEvent = new CountEvent(CountEvent.CHANGE);
if (diff > 100)
{
ce.day = day;
ce.hour = hour;
ce.minute = minute;
ce.second = second;
ce.milisecond = milisecond;
dispatchEvent(ce);
}
else
{
ce.day = "00";
ce.hour = "00";
ce.minute = "00";
ce.second = "00";
ce.milisecond = "000";
dispatchEvent(ce);
dispatchEvent(new CountEvent(CountEvent.FINISH));
kill();
}
}
//------------------------------
// データの破棄
//------------------------------
public function kill():void
{
_sp.removeEventListener(Event.ENTER_FRAME, onTicks);
_sp = null;
}
}
}
Counterクラスではサーバータイムを取得した瞬間にENTER_FRAMEを発動。そこからFlash内での経過ミリ秒を加算していき、目的の時間との差分を計算してCountEventクラスに各時間を格納させる。そのイベントをドキュメントクラスに返して時間を取得させる。
CountEvent.as
package info.five.events
{
import flash.events.Event;
public class CountEvent extends Event
{
public static const CHANGE:String = "change";
public static const FINISH:String = "finish";
public var day:String;
public var hour:String;
public var minute:String;
public var second:String;
public var milisecond:String;
//------------------------------
// コンストラクタ
//------------------------------
public function CountEvent(type:String, bubbles:Boolean = false, cancelable:Boolean = false):void
{
super(type, bubbles, cancelable);
}
//------------------------------
// クローン
//------------------------------
public override function clone():Event
{
return new CountEvent(type, bubbles, cancelable);
}
}
}
CountEventクラスには「day」、「hour」、「minute」、「second」、「milisecond」プロパティが用意されているので、ドキュメントクラス側で必要に応じて取得して表示させて下さい。
serverttime.php
<?php
$stamp = microtime();
$ary = split(" ", $stamp);
echo "returnValue=".(string)$ary[1].(string)(int)($ary[0] * 1000);
?>
最後にサーバーに置くPHP。Flash側のgetTimer()のミリ秒と、PHP側のmicrotime()のミリ秒で桁が違うので、桁合わせのためにちょっとだけごにょごにょしてます。microtime()でミリ秒を取得すると小数点付きで分割して計算されるので、一度文字列にしてFlash側に合わせるように変換かけてます。
WordPressでフィードを配信したくない時にコアファイル弄るとすぐ出来るんだけど、アップグレードした時にメンテが面倒になるのでこの方法はできればやりたくない。調べてたら使っているテーマフォルダにfunctions.phpをアップする事で無事解決できた。
functions.php
<?php
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'feed_links_extra', 3);
?>
WPのヘッダーにwp_head()を入れている場合に、上記の記述でメインのフィードとページ等のコメントフィードへのリンクを削除することができる。
Flashネタをエントリーするのは久々だなー。先日の福岡てら子で発表した内容ですが、WordPressからProgressionで使うPRMLというXMLを出力する方法。PRMLの詳しい説明は本家リファレンスを参照して下さい。これを使うことにより、WordPressからProgressionにダイレクトにシーンを生成出来るようになる。今回はWordPressのカテゴリーをシーンに見立てて出力しているので、親、子、孫、曾孫といった深い階層のシーン構造も簡単に作ることができる。下記のPHPをWPがインストールされているサーバーのテーマフォルダにアップします。次にWPのメニューからページを新規で追加して、タイトルに「prml」と入力し、右サイドバーの属性のテンプレートから「prml」を選択。この状態でページを公開すると、タイトルの下にパーマリンクが表示されるので、このURLにアクセスすると現在のカテゴリー構造を維持したままのPRMLが出力されるようになる。こんな感じ。
prml.php
<?php /*
Template Name: prml
*/ ?>
<?php
header('Content-Type: text/xml; charset='.get_option('blog_charset'), true);
//-----[PRMLのヘッダー生成]
$title = get_option('blogname');
$header .= '<?xml version="1.0" encoding="'.get_option('blog_charset').'"?'.'>';
$header .= '<prml version="2.0.0" type="text/prml">';
$header .= '<scene name="index" cls="myproject.IndexScene" title="'.$title.'">';
//-----[WPから全階層のカテゴリー取得]
$str = wp_list_categories('orderby=id&echo=0&hide_empty=0&use_desc_for_title=0&title_li=');
$str = strip_tags($str, '<li>');
//-----[PRML形式に変換]
$category = strip_tags($str, '');
$category = str_replace(array("\r\n","\r","\n"), '', $category);
$category = preg_replace('/\s+/', ' ', $category);
$category = ltrim($category);
$category = split(' ', $category);
for($i=0; $i<count($category); $i++)
{
$str = str_replace(">".$category[$i]."\n", $i.">", $str);
}
$str = preg_replace('/"(.*?)"/', '', $str);
$str = str_replace('li', 'scene', $str);
for($i=0; $i<count($category); $i++)
{
$str = str_replace('class='.$i, 'name="'.$category[$i].'" cls="myproject.'.ucfirst($category[$i]).'Scene" title="'.$title." | ".$category[$i].'"', $str);
}
//-----[PRMLとして出力]
echo $header.$str.'</scene></prml>';
?>
このPHPでやっていることはwp_list_categories()で取得したリストタグ付きカテゴリーを力技でPRML形式のXMLに変換してるだけ。ソースを見てもらえば苦笑いできると思います。ｗ
ここではシーン構造のみをPRMLとして出力してるけど、Progressionの各ページ内にWPから画像を読み込んだり、テキストを流し込む場合は個別にXMLを作ったほうが管理しやすいと思う。その場合は以前エントリーしたこの記事が役立つと思います。
今回参考にさせて頂いたのはMotuLogさんのエントリー。ありがとうございます！またflabakaさんは自分とは違ったアプローチでWordPressやMovableTypeとProgressionを連携させる方法をエントリーされてます。
■参考サイト
・MotuLogさん Progression(3.1.52) 動的にシーンを作成する
・flabakaさん ProgressionとWordPressの連携
リサイズしてシャープなし
リサイズしてシャープあり
PHPで画像にシャープをかける方法。imageconvolution()関数がPHP5対応なので注意する事。中身は畳み込み配列を使って調整しているだけ。リサイズをプログラムに任せると、ゆるい画像になるのでシャープをかけることで引き締まる。サムネイルを作るときには一手間かけてやること。
sharp.php5
$img = imagecreatefromjpeg("toco-toucan.jpg");
$matrix = array(array(-1, -1, -1), array(-1, 16, -1), array(-1, -1, -1));
imageconvolution($img, $matrix, 8, 0);
imagejpeg($img, "toco-toucan_sharp.jpg", 100);
//-----[メモリの解放]
imagedestroy($img);
WordPressとかのPHPから動的生成されたxmlをjQueryを使って読み込むときにワナがあるので注意が必要。Flashでは普通に読み込めたので気付かなかったけど、動的生成のxmlをjQueryで読み込むとエラーになる。調べたらPHPから出力されるxmlのヘッダーのContent-Typeをtext/xmlに設定していないことが原因だった。なのでヘッダーを書き換えてやるとうまく読み込めるようになる。
WordPressでxmlを出力する場合は最初にこれを入れること。
header('Content-Type: text/xml; charset='.get_option('blog_charset'), true);
テーブル作る時にフィールドの設定を細かく行うSQL文の書き方。「auto_increment」は自動的に連番を振ってくれる。「primary key」はテーブル内で重複しないフィールドに設定する。
$sql = "CREATE TABLE tableName".
"(".
"key INT(8) auto_increment primary key,".
"field1 VARCHAR(50),".
"field2 VARCHAR(50),".
")";
mysql_query($sql);
デフォルトのRSS配信とは別にページ機能を使ってxmlを出力する事が出来たのね。今まで気付かなかったのでメモ。
まずはページ用PHPの冒頭でTemplate Nameを設定する。今回の場合は「newsXML」とする。このPHPを、現在使用しているテーマフォルダにアップする。次にWordPressの管理メニューからページをクリック。タイトルを「newsXML」として、下の方にあるページテンプレートを「デフォルトテンプレート」から「newsXML」にする（page-newsXML.phpをアップしていないと、ページテンプレートというオプションが出てこないので注意）。公開ボタンを押下してから再度newsXMLの管理ページを開くと、タイトルの下にパーマリンクのURLが記載されるので、このアドレスにアクセスするとxmlが動的生成されるようになる。
Flashから必要な分だけWordPressでページを作っておいて、個別のxmlを吐き出せば管理が楽になりますよと。ちなみに下のPHPだとカテゴリーが「news」のエントリーの最新5件だけを出力する仕様にしてます。用途に合わせてquery_posts()の引数を変えてやればなんでも出せる。
page-newsXML.php
<?php header('Content-Type: text/xml; charset='.get_option('blog_charset'), true); ?>
<?php /*
Template Name: newsXML
*/ ?>
<?php echo '<?xml version="1.0" encoding="'.get_option('blog_charset').'"?'.'>'; ?>
<root>
<?php query_posts("posts_per_page=5&category_name='news'"); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<item>
<pubdate><?php echo get_post_time('Y-m-d H:i:s', true); ?></pubdate>
<?php the_category_rss(); ?>
<description><![CDATA[<?php the_excerpt_rss(); ?>]]></description>
</item>
<?php endwhile; endif; ?>
</root>