高橋文樹.com » Web制作

WordPressのテーマちょびっとカスタマイズ

高橋文樹 — Sat, 21 Aug 2010 01:31:13 +0000

縦書きっぽくしました

ずっと放置していたテーマファイルですが、ちょっとカスタマイズしました。トップページに縦書きを実装しようとしたんですが、面倒になって途中でやめました。

変更点はこんな感じです。

TopページにYoutubeとスライドショーを入れた。
色数を減らした。
Twitterは公式ウィジェットにした。
ポップアップをMultiBoxに変えた。最近オーバーレイのないポップアップがはやってますね。
右カラムにLast.fmのウィジェットを入れてみた。これって普段聞いている曲が出ちゃうので、かなり緊張感ありますね！　アニソンとか聞けない！

とまあ、いろいろあります。

ところで、今回テーマをカスタマイズしていて思ったのは、CSSとかJavascriptのキャッシュ問題が結構メンドイということです。

WordPressはデフォルトだとstyle.cssというファイルを必須とするため、なんとなくこれを読み込んでしまいますが、このファイルをそのままこんな感じで読み込んでしまうと、更新性が悪くなってしまいます。

" />

これまではstyle1.0.cssとかいうようにナンバリングすることで別のCSSを読み込ませて、ユーザにキャッシュさせない方法を取っていましたが、ちょこちょこ直す場合は結構面倒だと思っていた次第であります。

これはJavascriptも一緒です。リリースした直後にエラーが発覚した場合なんかは面倒ですよね。バグを直すのに精一杯で、なんとか修正したと思ったらお客さんから「直ってないんですけど」と言われて、「F5を押してみてください」というはめになったり。

そんなことを考えていたら、WordPressにはそこら辺を解消させる方法がありました。

wp_enqueue_styleとwp_enqueue_scriptです。

この2つの関数は依存関係の解消とバージョン管理を行いながら、cssとjsの読み込んでくれます。

こんな風に使います。

//テーマフォルダのfunctions.phpに以下のコードを書く
//バージョンの定義
define("MY_THEME_VERSION", "1.0");

//initアクションにフックをかける
function my_thmeme_init(){
	//管理画面じゃないかどうかを確認して、読み込み開始
	if(!is_admin()){
		add_action("wp_enqueue_scripts", "my_enqueue_script");
		add_action("wp_enqueue_styles", "my_enqueue_style");
	}
}
add_action("init", "my_theme_init");

//CSSを読み込む関数
function my_enqueue_style(){
	wp_enqueue_style(
		"my-theme",
		get_bloginfo("stylesheet_url"),
		array(),
		MY_THEME_VERSION   //ここでバージョンを指定,
		"screen"
	);
	global $is_winIE; //WordPressにはブラウザ判別用のグローバル関数もあります
	if($is_winIE){
		wp_enqueue_style(){
			"ie6",
			get_bloginfo("template_directory")."/js/ie6.css"
		}
	}
}

//JSを読み込む関数
function my_enqueue_script(){
	wp_enqueue_script(
		"my-script",
		get_bloginfo("template_directory")."/js/my.js",
		array("jquery"),  //依存関係にあるものを指定する
		MY_THEME_VERSION, //ここでバージョンを指定
		true              //trueにするとフッターに出力。falseでヘッダーに出力
	);
	if(is_singular()){ //この時点で条件タグが有効なので、ページごとに異なるJSを読み込むことも可能
		wp_enqueue_script(
			"my-single",
			get_bloginfo("template_directory")."/js/single.js",
			array("prototype"),
			MY_THEME_VERSION,
			true
		);
	}
}

とまあ、こんな感じで読み込んでくれます。

こうして登録されたCSSは、たとえばバージョン付きのURLで読み込まれます

バージョンが変わればURLも変わるので、ユーザのキャッシュには残らないというわけですね。

style.cssだけだと面倒ですが、大量のCSSとJSを利用しているテーマの場合、外部ファイルはこの方法で読み込んで、修正が終わったらfunctions.phpのMY_THEME_VERSIONの数値を変えるだけで済むので、わりと便利なんじゃないでしょうか。

僕はMooToolsをよく使うので、wp_register_scriptを使ってmootoolsというエイリアスを登録しています。wp_register_styleという関数もありますね。

登録さえしておけば、依存関係にあるファイルを読み込んだときに自動で読み込んでくれるというわけです。

あとは画像のキャッシュが残っていた場合ですが、これはファイル名を変更することで対処するしかないですね。

今回はめんどくさくてやらなかったので、右カラムとかカレンダーとかがおかしくなってるかもしれませんが、そんなときは何も言わずにF5キーを押してください。

gzipにするドロップレットも作った

最近はWebサイトのレスポンスについて云々されることが多いため、CSSやJSをgzipにしている人も多いかと思いますが、これが意外と面倒なので、ドラッグ＆ドロップで作れるドロップレットを作りました。

ドロップレットのダウンロード

Mac限定ですが、D＆Dしたファイルに.gzをつけたgzip圧縮ファイルを同じ階層に作ります。

こんな感じの.htaccessファイルをサーバに上げておけば、更新前にちょちょいと動かすだけで、いつでも小さいサイズのファイルになります。


   RewriteEngine on
   RewriteCond %{HTTP:Accept-Encoding} gzip
   RewriteCond %{REQUEST_FILENAME} \.js$
   RewriteCond %{REQUEST_FILENAME}\.gz -s
   RewriteRule .+ %{REQUEST_URI}.gz

   RewriteCond %{HTTP:Accept-Encoding} gzip
   RewriteCond %{REQUEST_FILENAME} \.css$
   RewriteCond %{REQUEST_FILENAME}¥.gz -s
   RewriteRule .+ %{REQUEST_URI}.gz


   ForceType text/javascript
   AddEncoding x-gzip .gz


   ForceType text/css
   AddEncoding x-gzip .gz

この.htaccessが合ってるかどうかわかりませんが、もう朝なので寝ます。

WordPressでrubyタグを挿入できるプラグイン作った

高橋文樹 — Thu, 19 Aug 2010 19:22:38 +0000

というわけで、WordPressでrubyタグを挿入できるプラグインを作りました。

WP-Yomiganaのダウンロード

たぶん動くんじゃないかと思います。名前はWP-Yomiganaです。

WP-Yomiganaの見栄え

見てくれはこんな感じ。TinyMCE Advancedとかと一緒に使っても多分大丈夫です。

動かなかったら教えて下さい。

rubyタグ挿入プラグインを作った理由

現在WordPressベースでワンソース・マルチユースを実現すべく、コンテンツを色んなフォーマットで書き出すものを作っています。これはその一環です。

なぜWordPressベースかというと、僕が使い慣れているために拡張が楽なのと、管理画面がついているからです。

自分でWebアプリ作ったりすると、管理画面を作るだけでものすごい工数がかかるので、あり物を使った方が楽だったりするんですね。

とはいえ、WordPressが採用しているwysiwygエディタTinyMCEっていうのは、やっぱり外国の人が作っているわけで、ルビとか心の底から興味なかったりします。

そこで、プラグインとして作った訳ですね。

今後の予定

いまのところ、rubyタグだけですが、今後は圏点とか縦中横とかもサポートしていきたいですね。

追記＠2010-08-21

GithubにWP-Yomiganaのリポジトリを作っておきました。Git便利ですね！

風と光と三十路の私と電子書籍とPHPとtextareaと改行

高橋文樹 — Tue, 18 May 2010 19:23:10 +0000

ハマったのでメモ。

データベースに正規表現と後方参照のリストを保存したいという得体の知れない欲求を抱いたのがそもそもの始まりでした。

たまたまテキスト置換が日常茶飯事に行われるCMSを作っていたからなんですが、要するに、こういう配列をですね、いっぱい作ってDBに突っ込んで、いつでも呼び出せるようにしておきたかったんですよ。

正規表現セットがですね、ほら、こう、あれですよ、なんかお店のメニューみたいにね。

$regs = array(
   "reg"     => array(
      "/^tel([0-9\-])+$/s"
      "/\n/"
   ),
   "backref" => array(
      "電話番号$1",
      "
"
   )
);
for($i = 0, $l = count($regs["reg"]); $i < $l; $i++){
   preg_replace($regs["reg"][$i], $regs["reg"][$i], $str);
}

ほら、これでどんなにたくさん正規表現を追加したって、なんの問題もないじゃないですか。

電子書籍とか作るとき、こういう方法でワンソース・マルチプラットフォームを実現しようと思ったんですよ。

いつもいつもDOMれるわけじゃないですからね。

で、問題は入力系です。

はじめはJavascriptとか使ってソータブルテーブルを作ったらね、いいと思ったんですよ。入力しやすいじゃないですか。

でもね、正直CMSのいいところって、ユーザを教育できるじゃないですか。今回は不特定多数に使われるCMSじゃなくて、業務用アプリだったんで、まあ、textareaでいいかなって思ったんですよ。

textareaを二つ用意して、改行が入るところでexplodeかまして分割すればほら素敵な配列のできあがり！　ってね。

でも問題はいつだってバックスラッシュじゃないですか。

正規表現って、バックスラッシュいっぱい入りますよね。あと、シングルクォートとか、HTMLにとってもDBにとってもアレゲなものがたくさん入りますよね。

というわけで、入力系・出力系ともにいろいろ気を付けますよ。

プレースホルダー使ったり、stripslashes使ったり。

でもまあ、ここまでは別に良かったんですよ。

当然CMSなんで、入力・出力・更新・削除があるじゃないですか。

困ったのは更新ですよ。

更新するからには、元のデータを一回出力して、ユーザがそれを修正できなきゃダメじゃないですか。

だから僕はこういう風に出力されたらいいなって思ったんですよ。

/^tel([0-9\-])+$/s
/\n/
電話番号$1
<br />

こうすれば、ユーザにとって入力したときと同じ結果が見えるので、更新もし易いですよね。

で、問題はtextarea内での改行ですよ。

今回はFirefoxを使ったんですが、textareに入っていたデータをPHPで受け取ると、改行部分が\r\nになってたんですね。

ぶっちゃけ蝶ラッキーって思いました。

正規表現を適用するDBのコンテンツデータは改行コードLFなんで、単純にexplode(“\r\n”, $_POST["reg"])しちゃえば配列が取れるじゃないですか。

ってことはですよ、ユーザに対して出力するときだって、implode(“\r\n”, $arr)ってやれば済むと思うじゃないですか。

ところがなんないんですよ。

/^tel([0-9\-])+$/s\r\n/\n/
電話番号$1\r\n<br />

なんか\r\nがそのまま出力されてるんですよ。あれーってなるじゃないですか。
で、僕はバックスラッシュがうまく処理されてないのかなって思って、こうやるわけですよ。


<?php echo $str; ?>

ところが全然ダメなんですね！　で、ググるじゃないですか。

そうすると、nl2br使えとか得意気にいってるページしかヒットしないんですよ。

途方にくれましたよ。

で、まさかと思ってこうやってみたわけです。

$str = implode("
", $reg));
?>
<?php echo $str; ?>

これでうまく行ったんですよ…

理由はまったくわかりません。でも、PHPってほんとかわいい奴だなって思いました。

正規表現クックブック

著者／訳者：Jan Goyvaerts, Steven Levithan

出版社：オライリージャパン( 2010-04-15 )

定価：￥ 4,410

大型本 ( 552 ページ )

ISBN-10 : 4873114500

ISBN-13 : 9784873114507

WordPressのテスト環境と本番環境を同期する時に使えるSQL文

高橋文樹 — Sun, 18 Apr 2010 19:11:34 +0000

WordPressに限らず、ブログやCMSを運営している人はローカル環境と本番環境を持っていたりすると思います。

で、大体サーバ上にあるデータをFTPでローカルに落として来て環境を反映させたりするのですが、DB内に記述されている画像ファイルやらリンクやらが書き変わってしまうのが困りもの。

たとえばhttp://example.jpで運営しているサイトのデータベースをローカルに落として来た時、画像がリンク切れを起こしたりするんですね。

これはとても困るので、いつもSQL文をデータベースに発行して書き換えたりするんですが、普段あんまりSQLを書かないので、すぐ忘れてしまいます。

phpMyAdminでSQLを発行するには「SQL」ボタンを押す

PHPerにはSQLを覚えていない人って結構多いんじゃないですかね。普段の開発ではそんなに書かなくてもなんとかなっちゃいますからね。

というわけで、とりあえず発行しておくといいSQLはこちらです。

http://example.jp でブログを運営している人が、 http://localhost の開発環境にデータを移す場面を想像して書いてみました。

phpMyAdminとかでデータベースを選択したら、「SQL」を押して発行するといいと思います。

UPDATE `wp_options` SET option_value = REPLACE(option_value, "http://example.jp","http://localhost");
UPDATE `wp_posts` SET post_content = REPLACE(post_content, "http://example.jp","http://localhost"), guid = REPLACE(guid, "http://example.jp","http://localhost");
UPDATE `wp_links` SET link_image = REPLACE(link_image, "http://example.jp","http://localhost"), link_url = REPLACE(link_url, "http://example.jp","http://localhost");

と、紹介しておきながらふと思ったんですが、これって簡単に書けそうですね。

書いてみました。

query($s);
	}
?>

上記のファイルをWordPressのルートフォルダに置いて、ブラウザからアクセスするとたぶん置換できると思います。

ただし、完全に思いつきで書いたので、ダメでも苦情はナシでお願いします。基本的にローカルの開発環境を想定していますので、サーバに上げたりして飛んでもないことが起きても知りませんよ。

ところで、最近WordPressでサイトを作っていて思うのは、管理画面をハードにカスタマイズする案件が面倒だなと思います。

ちょっと工夫すれば管理画面ジェネレータを作れそうな気がしてるんですが、需要はあるのかな。

あと、yumとかMacportみたいにプラグイン同士の依存を解決する仕組みも欲しいですね。「このプラグインはプラグインAがインストールされていなければ使用できません。インストールしますか？」みたいな。

破滅派も会社になるので、そういうサービスを提供することを考えておいた方がいいんでしょうか。うーむ。

MooShellでJavascriptのコードをブログに貼って自慢する方法

高橋文樹 — Sat, 06 Mar 2010 15:30:42 +0000

Javascritpのコード共有サービス MooShell

Flashにはカヤックさんが作ったwonderflというWebサービスがあって、自分の書いたコードを公開したり、他人の書いたコードをフォークすることができるというのは、Flasherならもちろん知ってると思います。

このWonderflのいいところは、コードを紹介するときに一々パブリッシュしなくてもYoutubeと同じ用な流儀で自分のブログに貼付けたりできることですね。

Javascrptの場合、ブログの投稿欄にscriptタグを書くことさえ許可されていれば、コードの紹介自体ができるんですが、ちょっと面倒です。

で、実はJavascriptにもWonderflみたいなサービスがあって、それがMooShellです。

元々はJavascriptライブラリであるMooToolsのコードを共有するためのものですが、Javascriptであれば動くので、なんだっていいと思います。

書いたコードのページをリンクで共有することもできますし、こんな風に自分のブログに貼ることもできます。（右上の再生ボタンでコード実行）

どうです、インターフェースがかっこいいでしょ！

MooShellの使い方

使い方は簡単です。

まずはMooShellにアクセスします。
ChangeSettingタブをクリックして、TitleとDescriptionを設定します。
もし他のライブラリなどを使っているなら、Add Resourceに追加。この場合、リソースはどっかのサーバに上げておく必要があります。WordPressならアップロードしてそのURLを貼れば簡単ですね。
Choose Versionタブをクリックして、MooToolsのバージョンを選びます。プラグインも使いたいなら選ぶことができます。
Ajaxを使うなら、エンドポイントも提供されています。サンプルを見た方がわかりやすいでしょう。
ページ左下にあるiframeタグを使ってブログに貼付けます（WordPressのビジュアルエディタはiframeを消去するので注意！）

というわけで、簡単にですが紹介してみました。

ブログでJavascriptを紹介するのって、実行コードと説明用コードサンプルを書かないといけないので、面倒くさくてやりませんでしたが、これからは簡単にできそうです。

ちなみに、jQueryを使いたい方は、Google Ajax Libraries APIを使うといいんじゃないでしょうか。

No related posts.

Flashの低帯域ユーザ体験を再現するための低速サーバ構築 on Mac OS X

高橋文樹 — Fri, 19 Feb 2010 16:23:34 +0000

他人に教える用です。あんまり面白くはないです。

低速サーバを構築する目的

読み込みが速すぎて検証できないよ..

会社のお仕事でFLVをプログレッシブダウンロードで読み込んで再生するFlashプレイヤーを作ったのですが、回線が速すぎて、下記の2つを検証できませんでした。

ファイル読み込みが完了していない時点まで再生が進んだ場合
せっかちなユーザーがシークバーを読み込みの完了していない部分まで引っ張ってしまった場合

本当はYoutubeみたいに途中から再生するやつを作りたかったんですが、面倒くさそうなんで後日。なにやらPHPで動画を切り出して渡すらしい。（参考：‘Streaming ‘ flv via PHP, take two）

なにはともあれ、低帯域の環境を再現する必要があったわけです。

thttpdに出会うまで

会社ではFlash CS3をMac OS X 10.5.8で使ってます。

Flashに低速環境を再現するモードがあった気がしたんですが、見つけられず。Device Centralにもそういう機能はなし。

WindowsだとNEGIESというソフトがあるようなんですが、Macだったので、ダメ。

さらに付け加えると、いちいちFTPしたくないので、Flashでパブリッシュしたらすぐ確認できるようなローカル環境が望ましい。リモート・サーバに上げるとかは無し。

で、探してみると、こんなエントリーが。

thttpdには、設定ファイル「thttpd.throttle」で、ファイルの拡張子毎に使用する帯域を設定できるというとても便利な機能がある。(Flashのテスト用に)低速に振舞うWebサーバを建てる

これで決まり。

thttpdをインストールしてから動くまで

一応、環境はこんな感じです。完全自己責任でお願いします。

Mac OS X 10.5.8
MacPortsにていろいろインストール済み
makeしてインストールしたものはほとんどない（気がする）

さて、本家thttpdのサイトを見てみると、./configureしてmakeしてとか書いてある。MacPortsにないかなと探したけどなかった。

しかし、さらにググると、Mac OS Xにもパッチをあてれば入るらしいということが判明。

いわれたとおりにパッチを当ててからのインストールを試みる。デフォルトでは/usr/local/sbinにインストールされるとのこと。

ルートユーザになってない人は先頭にsudoを追加してください。

mkdir /usr/local/src #とりあえずダウンロード用のフォルダを作る。
cd /usr/local/src #移動
wget http://www.acme.com/software/thttpd/thttpd-2.25b.tar.gz #ダウンロード
gunzip thttpd-2.25b.tar.gz #解凍
tar xpf thttpd-2.25b.tar
cd thttpd-2.25b #フォルダ内に移動
wget http://do.homeunix.org/pub/thttpd-macosx.patch #パッチをダウンロード
patch thttpd.c > thttpd-macosx.patch #パッチを適用

これでインストールできるはずだったんですが、./configureでエラー！

ググった情報を参考にしてとりあえずmakeまで終える。

./configure --host=darwin
make

ここまではオッケー。しかし、make installでまた失敗。

手動でインストールした猛者もいるようですが、makeの仕方・仕組みがわからないので別の方法を探す。

これはbinというユーザーが存在しないため。Mac OS X 10.5でbinユーザーを作成する

な・る・ほ・ど〜。では、binを作成。

sudo dscl . create /Groups/bin
sudo dscl . create /Users/bin

これでいいのか？

sudo make install

できたー！

さて、本家マニュアルにある通り、/etc/thttpd.confを編集しようとするが….存在しない！　ここで絶望のズンドコにたたき落とされる。

ここで諦めず、Spotlightで検索。ダウンロードしたソースファイルの中に発見！　これをコピーして使います。

cp /usr/local/src/thttpd-2.25b/contrib/redhat-rpm/thttpd.conf /etc/thttpd.conf

中身を編集。

# This section overrides defaults
dir=/path/to/document_root
nochroot
user=<ユーザー名>
#default=nobody
logfile=/Users/<ユーザー名>/Library/Logs/thttpd.log
pidfile=/Users/<ユーザー名>/Library/run/thttpd.pid
# This section _documents_ defaults in effect
port=8080
# nosymlink# default = !chroot
# novhost
# nocgipat
throttles=/etc/thttpd.throttles
# host=0.0.0.0
charset=utf-8

で、重要なのは13行目で指定したthrottlesファイル。これが帯域速度を制限するための設定ファイルです。これを作成します。

sudo vi /etc/thttpd.throttles #ファイルを作成
#Configuration File for thttpd
**.flv  5000 #limit FLV files to 1/30 fo T1 #これでflvの拡張子が5000バイト/秒でしか読み込まれない

これで準備オーケー！　起動します。

cd /usr/local/sbin/thttpd -C /etc/thttpd.conf #面倒くさかったらパスを通してください。

http://localhost:8080 にアクセス！　サーバー動いた！　でも画面が真っ黒！

Firebug先生に聞いてみたところ、どうやらFlash埋込み用のJavascriptをHTMLとして解釈しているっぽいです。

ApacheでいうところのAdd type text/javascript が必要っぽい。しかし、ここはHTMLにJavascriptを直書きすることにして回避。

見よ、この圧倒的な遅さ！

で、ようやっと動きました。いやー、プログレスバーが圧倒的に置き去りにできるようになりました。

ところで、このthttpdははじめっからデーモンで動いているっぽいです。

止め方がわかんなかったので、アクティビティモニタでthttpdを選択して「プロセス終了」終了。これで当初の目的は果たせました。

thttpdを使ってみての感想

やっぱりApacheほどは設定が細かくないし、CGIも激遅っぽいのでアレですが、throlltesだけでも使うメリットはありますね。

設定できる機能は他にもいろいろあるみたいなので、あとはマニュアル参照してください。

最近はiPhoneをはじめとする3G端末でもガンガンPCサイト見るので（iPhoneはFlashダメだけど）、帯域のパフォーマンス確認は必要です。

Docomo for PCとか、潰れかけのWillcomとかも3Gですしね。

あと、これからはGoogle先生もサイトのスピードを評価するらしいので、いろんなところで役に立つかも。

というわけで、終わり。

Flex SDK 4のアップデートで色々エラー

高橋文樹 — Sat, 06 Feb 2010 13:49:46 +0000

困りました困りました！　あまりにも困ったので、この苦しみを二度と繰り返さないために書いておきます。

1.Flex SDKをアップデート

現在、Flash Builder β2でアプリケーションを作成しているのですが、TextLayoutFrameworkで背景色の指定にバグありとの記述を見つけたので、急遽Flex SDKをアップデートすることにしました。

要するに、Flash Builder β2に元々入っていたSDKを4.0.0.10485から最新の安定版リリースである4.0.0.13875へ上げたわけですね。

Adobe Open SourceのダウンロードページからSDKをダウンロードして解凍、Flash Builderのフォルダ（今回はWin XPだったのでC:\Program Files\Adobe\Adobe Flash Builder Beta 2\sdks）にコピー。

プロジェクト＞プロパティ＞Flex コンパイラーとパネルを開き、「Flex SDKの設定…」をクリックします。

で、「追加」で新しいSDKを選び、それをデフォルトに設定しました。

2.mx名前空間で名前解決できてないっぽい

アップデートといってもマイナーバージョンの変更だからそのまま動くかと思いきや、いきなりエラー！

でエラー" src="http://takahashifumiki.com/wp-content/uploads/2010/02/implementation-error-300x261.jpg" alt="Textひとつ置けないというのか！" width="300" height="261" />

Textひとつ置けないというのか！

パッケージエクスプローラーに赤い×がぽちぽちついています。しかも、新規プロジェクトを作成直後にいきなりエラーを起こしたりと、すごいヤンチャぶり。

最初のエラーはTextコンポーネントを置いただけで起きました。をコンポーネントの実装に解決できませんでしたというエラーメッセージ。

nsってもしかしてnamespaceの略？

名前空間が変更になったのかと思ってコードヒントを出してみると、これまでだったのが、になってる。なにこれ。

入力すると一応動きますが、すべてのmxタグを変更するのはなんかイヤ。

色々ググった結果、Flexにはこれまでもこういう悲しい歴史があったとか、なかったとかいうことがわかりました。

とりあえず現状を確認するため、設定ファイルを確認してみることに。

Flexの設定ファイル。はじめて開いた。

僕の場合、設定ファイルはC:\Program Files\Adobe\Adobe Flash Builder Beta 2\sdks\4.0.0.13875\frameworks\flex-config.xmlにありました。

これを確認すると、やっぱり名前空間のURIが変わってます。

デフォルトのアプリケーションコンポーネントは下記のようなコードがMain.mxmlに書かれるので、mxのURIはlibrary://ns.adobe.com/flex/haloのはずなんですが。

設定ファイルによると、名前空間mxのURIはlibrary://ns.adobe.com/flex/mxとなっています。

これを変更してみると、名前空間の参照エラー、コードヒントともに直りました

というわけで、アプリケーションやコンポーネントを作成するときはmxの名前空間をちょろっとだけ変えます。

xmlns:mx="library://ns.adobe.com/flex/mx" //haloをmxに

なんでhaloがボツになったのかはわかりません。ガンダムに出てくるからでしょうか。

3.コンパイル時にランタイムエラー

さて、これで直ったわいと左うちわでデバッグしてみたところ、いきなりランタイムエラー！　バカー！

VerifyError: Error #1014: クラス spark.skins::SparkSkin が見つかりませんというメッセージが出ました。

Adobe Open SourceのDLページ

また見つかんねーのかよ、と思ったところ、この対処法はダウンロードページに書いてありました。

spark.skin.swcがRSLであるため起きるエラーだとか。ビルド番号13079から起きるようになったらしいです。

なんのこっちゃわかりませんが、公式リリースには直るとのこと。応急処置だけやっておきます。

用語が統一できてないぞ！

プロジェクト＞プロパティ＞Flex ビルドパスを選択し、「フレームワークのリンク」項目を「SDKのデフォルトを使用する（ランタイム共有ライブラリ）」から「コードにマージされます」に変更する。

同じ選択肢で「ですます」調と「である」調が混在しているのは、β版ならではでしょうか。

ともかく、これでランタイムエラーも消え、これまで通りに動くようになりました。

4.雑感

AdobeはFlexの名前の付け方にそうとう苦慮している。Flash Professional, Flash Catalyst, Flash Builder, Flex Builder, Flex SDKと、もう何が何だかわからない。Spark、halo、mx、fxも、スキンの名前なのかコンポーネントの名前なのか、「俺がお前でお前が俺で」みたいな状況です。
毎回プロジェクトのデフォルトファイルを書き換えるのは面倒臭い。設定方法を知っている人がいたら教えて下さい。
ProgressionとFlexのどっちで作ったらいいか、まだまだ悩みはつきない。

追記＠2010/02/07

この後、インテリセンス（コードヒント）でflashパッケージがすべて出てこなくなる現象に遭遇。

ググったところ、Flex intellisense forgets flash.*という記事に遭遇して、言われたとおりにしたら直りました。

プロジェクト＞プロパティ＞Flex ビルドパスを選択して、ライブラリパスのタブを選択。

ビルドパスライブラリにplayerglobal.swcを追加。このファイル自体はC:\Program Files\Adobe\Adobe Flash Builder Beta 2\sdks\4.0.0.13875\frameworks\libs\playerにありました。

うーん、すでにここへのライブラリパスを通ってるっぽいんだけどなあ、と不思議に思っていたところ、理由が判明。

ランタイムエラーを消すために「フレームワークのリンク」を「ランタイム共有ライブラリ（RSL）の使用」から「コードにマージされます」に変更しましたが、これが原因だったっぽいです。

RSLってのはAdobeのヘルプにありましたが、要するにFlash Playerで使い回す共有のライブラリ（まさにflash.*パッケージ）を埋め込まずに、使い回すことです。

このライブラリはFlash Playerがはじめて使われるときにダウンロードされ、半永続的にキャッシュされるらしいです。それを使い回すので、個々のswfファイルが軽くなるというわけですね。

「コードにマージされます」というのは、RSLを使わずにすべてのライブラリをswfに埋め込むこと。

ってことは、僕がこのページで書いたとおりにすると、swfが重くなることになります。普段は埋め込まないflashパッケージを全部埋め込んでるんだから…

どうやら、リリースビルドの時はplayerglobal.swcへのライブラリパスを外す必要がありそうです。

WordPressとFlashでブログ縦書き化計画(10)

高橋文樹 — Sat, 30 Jan 2010 20:13:22 +0000

このエントリーをずっと書いていなかったので、何もやっていないと思われたらアレだなと書いてみます。

現在、WordPressとFlashで縦書きを実装するのはすでにできていて、それにルビと改ページを挿入することはできました。

あとはクオリティに目をつぶれば、公開できる段階まで来ました。

当初のリリースに併せて実装したかった機能は少額決済なんですが、選択肢があんまりないですね。

イプシロンなどのクレジットカード決済も安くなったのですが、百式情報によると、1000円以下だととたんに審査が厳しくなるとのこと。

法人化すれば済むのかと思っていましたが、そうでもないみたいですね。

唯一の選択肢としてあるのが、日本での普及率がイマイチなPaypal。

とりあえず、パソコンで電子決済できればよしとして、Paypalが日本の携帯電話に対応するのを気長に待つとします。

なんか本腰入れて参入するみたいですしね。

で、今回の本題なんですが、WordPressとFlashのTextLayoutFrameworkを組み合わせてブログを書いている方を発見しました。

組版が美しいデザインです

佐賀一郎さんという方で、macromarionetteというのが件のブログです。相当ハイクオリティですね。

経歴を拝見するに、デザインの専門家でいらっしゃるみたいなので、むべなるかな、という感じです。

これはぜひ見習いたいですね。

はじめはFlexで作られていたようですが、このブログはProgressionで作っているみたいです。

やっぱデザイン得意な形はFlash Professionalの方がやりやすいんでしょうか。

というわけで、2月中には破滅派に縦書きを実装して、その後、iPhone対応・携帯対応を急ぎたいと思います。

WordPressクラックされちゃった記念、2.8.4にアップデート

高橋文樹 — Sun, 13 Sep 2009 14:21:13 +0000

WordPress公式ブログでも盛んに喧伝されていましたが、WordPress2.8.4以前に致命的な脆弱性が見つかったとのことです。

管理者アカウントを勝手に作られる
パーマリンク構造を勝手に変更されてスパムリンクを仕込まれる
最悪の場合、サイト全体を削除される

詳しくは公式ブログをご覧頂ければわかるので割愛しますが、実際に乗っ取られた経験談でも書きたいと思います。

1.WordPress2.6.5は9月、静かに死んでいった

これは栗ね。クラッカーの画像なかった

乗っ取られたのは僕が複数運営しているWordPressの一つです。

他のサイトはすぐに2.8.4にしていたのですが、このサイトだけ激しくカスタマイズした上、新規ユーザ登録できるようにして他の使い方をしていたので、ちょっと面倒で後回しにしていたんですね。

兆候が出たのは9月の初旬。

それまでは滅多にユーザ登録などこなかったのですが、9月初旬だけで5人。これはおかしいなと管理画面を覗いてみました。

パーマリンクがデフォルトの「?p=123」に戻っています。「ぬかったわ！」と一括、早速ユーザ画面を見てみると、gmailアカウントで不審なユーザが3名。

「WordPress + メールアドレス」で検索をかけると、海外のつぶやきがヒット。

Andrianq running with pulvillarrac@gmail.com tried unsuccessfuls hack on 2 WordPress sites… must turn off user registration…
@bradyjfrey

他のアカウントも検索してみたら、またまたブログが2件ヒット。

WordPress users, if you have seen the Gmail address: Pulvillarrac@gmail.com in your subscribers, you may want to disable or ban the account. This is the person who registered on my roomies blog through the back door.
Technical Tidbits

And this is exactly what happened to AC, 7 new users have registered to AC’s WP in the last few days, something that was strange to me, here are their emails:
janson206@Safe-mail.net
pulvillarrac@gmail.com
bugbeemershonyhe@gmail.com
obierebelominepyb@gmail.com
naomyrotenford@gmail.com
ArabCrunch and WordPress Under Attack

結構大きめのニュースサイトでもやられてしまったようですね。ポイントは「新規ユーザの登録を許可しているかどうか」のようです。

これら3ユーザは管理画面から削除。

それだけでは安心できなくて、データベースを覗いてみると…メールアカウントを登録していない管理者ユーザが二名追加されていました….orz

これは管理画面に現れないため、DBから直接削除しました。

そして、サーバ上の全ファイルを削除して、新規にWordPress2.8.4をインストール。ただし、DBの隅から隅まで見た訳でもないので、しばらく当該サイトを閉鎖して、一から作り直したいと思います。

2.あったんだかなかったんだかわかんない実害

今回のクラッキングでは、下記のような症状が出るとのことでした。

パーマリンクやRSSに見慣れない文字列がある。
例：http://example.com/category/%&({${eval(base64_decode($_SERVER[HTTP_REFERER]))}}|.+)&%/
特徴：eval, base64_decode が含まれている

管理画面のユーザーに見慣れないユーザーの登録がある

コリス

取り急ぎパーマリンクを確認してみると、デフォルトに戻っていました。

攻撃方法としては、パーマリンクを変更してスパムリンクに変えちゃうというものだと思うのですが、なんかミスったんですかね？

スパムリンクは見つかりませんでした。

たしか、パーマリンクを変更したとき、.htaccessへの書き換え権限がないとダメだったような気がするんですが、たまたま利用しているサーバのPHPがモジュール版からCGI版へ移行した時期だったので、apacheからは.htaccessのアクセス権限がなかったのですが、それが不幸中の幸いだったんでしょうか。

取り急ぎ、施した対策を書いておきます。

不正なユーザをWordpressの管理画面から消去
管理画面で確認できない不正な管理者をDBから直接消去
デフォルトに変更されていたパーマリンクを元に戻す
管理者パスワード、FTPパスワード、DBパスワードを変更
ファイルの変更日時がユーザ登録日より新しいファイルを検索→なかった
サーバのファイルを全削除
保存してあったローカルコピーをアップロード
WordPressを2.8.4にアップデート

クラックの手法などの詳細はゆっくり…して…イってネ！「現在進行中の WordPress に対する攻撃の詳細と再現」に詳しかったです。

まあ、どっちみち一度クラックされちゃったので、サイトは閉鎖ですわ、閉鎖。

というわけで、とんだ9月初旬のアップデートでした。古いバージョンのまま放置してはいけませんね…

TextlayoutFrameworkやFlash.text.engineで埋め込みOpenTypeフォントを使う方法

高橋文樹 — Fri, 21 Aug 2009 10:02:38 +0000

最近気づいたにもかかわらず、日本語情報でこれだというのがないので、書いておきます。

わりと詳しいのはまつにおまかせさんのエントリーですが、その補足という感じです。

CFFフォントとは

Web上で日本語縦書きレイアウトを作る方法として有力なのがTextlayoutframeworkとFlash.text.engineなのですが、この2つは従来通りのやり方で埋め込みフォントを使うことができません。

というのは、TLFやFTEはよりよい文字表現を実現するためなのかなんなのか、CFFというフォーマットを採用しているようです。これにより、アンチエイリアス処理なんかがきれいになるようなんですが、詳細はよくわかりません。

実際にFlex4 Gumboのリファレンスを見てみると、FTEのFontLookupクラスはDEVICEとEMBEDDED_CFF定数しか持っていません。EMBEDDEDというのはないんですね。

FTEを拡張して作られているTLFもしかりです。

普通のTextfieldはembedFontをtrueにすれば埋め込みフォントを使えました。

単にプロパティが異なるだけなら問題ないのですが、困るのはCFFでのFontクラス作成がちょっと難しいということです。普通にFlash IDEとかで作っても認識してくれません。

よくやる方法としては、フォントを埋め込んだswfを作成して、それを外部から読み込み、内部で定義されているFontクラスを引っこ抜くというものだと思うのですが、これがCFFで埋め込まれていないとダメなんですね。

CFFでのフォント埋め込み方法

簡単に言うと、以下の流れです。FlexならMXML上で直接埋め込むこともできるのですが、Flash IDE(Flash Professionalのこと)で開発している人はそうもいかないと思うので、下記のやり方を覚えるのがいいと思います。

1.Flash Builder βかFlex SDK4 Gumboをダウンロード

Flash Builderは必須ではありません。要するに、Flex SDK 4以上を使いたいのです。

Flex SDK 3.*系だと、フォントをCFFでトランスコードするCFFFontManagerが入っていません。（多分）

Flex Builderを買う予定がないという方は我慢してSDKを使った方がいいと思います。以下、Flex SDKを前提に話を進めます。

2.フォントファイルのコピー

作業用フォルダ（この場合はHiraginoMincho）にOpenTypeフォントファイルをコピーします。Windowsなら「コントロールパネル＞フォント」フォルダに入ってます。

3.クラスの作成

プロジェクトのメインファイル（HiraginoMincho.~~mxml~~as）を作成し、下記のドキュメントクラスを定義します。

package {
   import flash.display.*;
   public class HiraginoMincho extends Sprite{
      [Embed(source="フォントファイルへのパス", fontName="HiraginoMincho", cff="true")]
      public static var font:Class;
      public function Mincho() {
      }
   }
}

4.コマンドラインでフォルダまで移動してコンパイル。

cd /path/to/working/directory/HiraginoMincho
mxmlc HiraginoMincho.mxml

5.別のswfで読み込んで使う

できあがったswfを読み込めば使うことができます。やり方は元エントリーに詳しいです。

フォント名が「クラス名_埋め込みClass変数」に変わるのでご注意。この例ではHiraginoMincho_fontになります。

注意点

Flex自体はデバイスフォントを埋め込むことができますが、CFFFontManagerはデバイスフォントを受け付けないようです。

したがって、フォントファイル自体をコピーしてEmbedタグのsource属性で指定することになります。

また、ヘルプを見るとこんなことが書いてあります。

To get the system font name in Windows, install the Font properties extension. Then right-click the font’s file in Windows Explorer and select the Names tab. Use the value under Font Family Name as the systemFont value.
Adobe Flex4 help – Using embedded fonts

「Windowsでデバイスフォント名を知りたい場合はフォントプロパティ拡張機能を使え」ということらしいのですが、これがすぐにわからなかったので、リンクを貼っておきます。

Microsoft Typography – Font properties extension, version 2.30

Microsoft Typographyなんてサイトがあったんですね。MSはまったくフォントに興味がないと思っていました。

というわけで、以上です。

追記

なんか環境を変えたら上手く行かなかったので、上手くいったソースを追記しておきます。

package{
   import flash.display.Sprite;
   public class main extends Sprite
   {
      [Embed(source="assets/ipamp.otf", fontName="IPAMincho", embedAsCFF="true")] //←ここが変わった
      public static var IPAMincho:Class;
      public function main()
      {
      }
   }
}

Embedの属性名が変わったのかな？