今日はカフェオレを作ろうと思ったら牛乳が臭うのでシンクに流してみるとヨーグルト状になってました。
賞味期限まだ切れてないのに・・・
30周年で「白黒つけないキャンペーン」中のグリコのカフェオーレのサイトでミス・カフェオーレ風のオリジナルキャラクターが作れる「白黒つけないモンタージュ」を発見したので早速やってみました。
髪型とか目とかを選んで都道府県と名前を入れるとこんな感じのプロフィール用画像などが作れます。
イカス！
作ったキャラは都道府県で検索も出来るんですがダンスしながら出て来ます。
このサイトはフルFlashサイトですが楽しそうでいい感じです。
このブログパーツもいい感じです。
リスペクトしてるイラストレーターさんたちをつらつらと書いてみます。
調べてみるオフィシャルサイトが無いとかwikipediaに載ってない人がと結構いますね。
アランジアロンゾ
たまひよ、モリゾーとキッコロ、MBS「ちちんぷいぷい」のぷいぷいさんとか描いてる人
山崎あっこ
MBS「ちちんぷいぷい」で似顔絵イラストを描いてる人
木原庸佐
「ポンキッキーズ」のコニーちゃんを描いてる人、プレステのケロケロキングってゲームも出てます。
m＆k（丸山もも子＆鍬本良太郎）
「Qoo」とか「ビオレママ」とか「でこぼこフレンズ」とか「ぜんまいざむらい」を描いてる人
藤枝リュウジ
人形劇「ハッチポッチステーション」や「クインテット」のデザイナー
山本徹
ピクルスとか書いてるデジタル絵本作家
ちなみに2009年3月からピクルスブックが無料で見れるようになってます。
「キレイなアニメーションやな～外国の作品かな～」
ぐらいにしか思ってなかったやさいのようせいなんですがよく見たら動きがどうもCGっぽい。
でも筆の跡がある。手書きっぽい3DCGって事？
と思って調べてみると天野喜孝が絵を描いたらしい。天野喜孝といえばテレビゲームのファイナルファンタージーシリーズの絵を描いてる人だ。
ファイナルファンタージーの頃はファミコンで絵がしょぼくなってたけど、このアニメはイラストがそのまま動いてる様な感じだ。時代がようやく追いついたってやつかな。
（厳密に言うと絵本の絵柄とは雰囲気は違う）
IE6でSexyBookmarksの日本Ver.を確認したところ一瞬まともに表示するがすべてdeliciousのアイコンに変わってしまい、カーソルを合わせても動かない。
提供元でも同じだし他のサイトでも同じだった。
調べてみるとまずCSSがおかしかったIE6はhoverの擬似クラスはaタグにしか効かないはずなのにliにかけてる。とりあえずliタグの背景にアイコン画像を入れてたのをaタグの背景に変更する。
それでもIE6で動かないソースを見てみると
<!– Start Of Code Generated By WP Social Bookmark Menu 1.1.4 –>
<!–[if lt IE 7]> <script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js” type=”text/javascript”></script>
<![endif]–>
って怪しい記述が・・・
どうもGoogleが提供してるCSSやJavaScriptがIE6以下を気にしなくてもいいようにしてくれるライブラリらしい、さっきのliタグにhoverをかける為に付けたのだろうけどGoogleにアクセスする分微妙に遅くなるし、CSSはさっきIE6でも動くように直してしまったのでいらんと判断し、/wp-content/plugins/wp-social-bookmark-menuにある「wp-social-bookmark-menu.php」の257行目あたりの下記の記述を削除
echo "\n".'<!– Start Of Code Generated By WP Social Bookmark Menu ‘.vNum.’ –>’."\n".
‘<!–[if lt IE 7]>’."\n".
‘<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>’."\n".
‘<![endif]–>’."\n";
という事でめでたくIE6でも動く様になりました。
もちろんIE7・8、firefox3、Opera9、Safari3・4、GoogleCrome2でも動きました。
修正したCSSはココです。
豊富なプラグインが特徴のWordPressに移行したという事で色々プラグインを試してみた。
All in One SEO Pack
SEOに効くらしいプラグイン。
元々ブログってかなりSEOを意識した作りになってるし、正直、あまり効果は無いと思うけど一応入れてみた。
個人的にはWordPressのタイトルのセパレーターが「»」ってのが気に入らなかったので書き換えられたぐらいかな。
Popularity Contest
人気記事を表示するプラグイン。
右のウィジェットに入れてます。
これは以前から入れたかったのでいい感じ。
コメントやページビューなどを優先する項目を微調整して人気記事をランキング表示できます。
Simple Tags
タグ付けプラグイン。
そもそも、最近のWordPressにはタグ機能があるのでいらないんだけど、コレを導入すると「関連する記事」が付けられます。
これも以前から付けたかったのでいい感じ、ただ本体のタブ機能とかぶってるってのがスッキリしない。
WP Super Cache
キャッシュ機能を付けて高速化するプラグイン。
WordPressの一番の弱点は表示が遅いこと、これを解決するプラグインなんだけど、SafeMode（多くのレンタルサーバー適用されているサーバーを安全に運用するためのPHPのモード）だと動かすのが厄介で、なんとか、xrea,coreserverでのWP Super Cacheとかwp-super-cacheのインストール(ロリポップ)を参考に問題のあるエラーは表示しなくなったけど表示は遅いままキャッシュにもファイルは貯まっていない。
なんか入れると不安定になったとかいう人もいるのでとりあえず外して、DBを最適化してちょっとは速くしようと思ったのですが何の変化もありませんでした。
WP-PageNavi
ページを新しい記事、古い記事、だけじゃなくページ番号でリンクするプラグイン。
入れようと思ったけど、またテンプレート弄らなきゃいけないし、ブログだと新しい記事、古い記事だけで十分かなとか思って一回も使ってません。
あと、前回紹介した「SexyBookmarks」と自分で作った登録した広告をランダムに表示するプラグインを入れてます。
WordPressで生成されたソースを見てみるとRSSの記述が分かりにくい事になってる。
しかも、アドレスが変わってしまってる。
このブログをRSSリーダーで見てる人はいないだろうけどTechnorati (テクノラティ) なんかはRSSから情報を取ってる可能性があるのでアドレスが変わってしまうと今後参照してくれないかもしれない。
そこで、とりあえずRSSの記述はheader.phpに普通のhtmlで追記して、アドレスの方はWordPress Codex 日本語版を参考に.htaccessで飛ばそうとしたが自力ではうまく行かなかったので、[WordPress]MovableTypeから移行するときにRss/Atomフィードも転送するの記事の通りやると上手いこといった。
海外のブログは右にサイドバーがあるサイトが多くWEBデザイン系の人気のあるブログには大抵125×125pxのバナー画像が並んでる。
そこで、見た目だけ真似してバナーを並べてみた。
調べてみるとBuySellAdsの広告らしい。
BuySellAdsはブログユーザーと広告主をマッチングさせるサービスをしてる会社の様だ。
日本にもこれを真似たPitta!があるがバナーのデザインがしょぼいくサイズがまちまち。
しかも、以前は結構広告の予約が埋まっていたサイトも空席が目立つ。
前（MovableTypeの時）は簡単に設置できるAddClipsを使ってたんだけどカスタマイズができないのと、ポップアップするのがイヤで別のを探してたらSexyBookmarksの日本Ver.を発見！
WordPressの設定画面から設定をいじれるんで便利。
ソーシャルブックマークでは無いTwitterまである。
（英語版は前から知ってたんで日本のRSS用に改造してMyReleaseに入れてたりする）
ようやく、WordPressに移行しました。
MovavleType3からMovavleType4にしたときもデザインを変えなかったので、今回も前のデザインのまま作ってみたけど新しくなった感じがしないんでデザインを変更しました。
ゾウがいなくなると別のサイトみたいになるのでゾウ残しという事でサーカスっぽい感じにしてみました。
移行するにあたって別のフォルダを作って調整してから、フォルダ名を替えて本アップする流れにしようと別フォルダにインストールした。
インストールは簡単に終わってMovavleTypeの「システムメニュー」からブログをエキスポートで記事をファイルに書き出してWordPressの「ツール」の「インポート」から「Movable Type と TypePad」を選びファイルを指定すると簡単に移行できるんだけど落とし穴があった。
WordPressはMovavleTypeの「キーワード」をタグとして認識するらしい。
ググってみるとMovableType 4.23 から WordPress 2.7 へ移行しましたって記事に解決法が書いてあった。
ファイル名が変わるのも気になって他がこれも直してくれるらしい。
後はMovavleTypeの時は拡張子をphpにしてあったので「パーマリンク設定」で「カスタム機構」を選んで
/%year%/%monthnum%/%postname%.php
と書き換えたらほぼ同じアドレスになった。
WEBページに関しては書き出したり取り込んだり出来ないので一つ一つコピペしていった。
それでもMovableTypeの時は拡張子があったのにWordPressには拡張子が無い。
まあ、これは数が少ないから飛ばす方が楽かもしれない。
ちなみに携帯は利用者が殆どいないので未対応にしてます。
一昔前に一世風靡したGoogleサジェスト風のオートコンプリートの実験をしてみた。
オートコンプリートは以前から気になっていてオープンソースなAJAXを試したりしした事はあったんだけど日本語はIMEを通すので正常に動かなかった
「IMEを通すから仕方ないよな～」と納得して実際のサイトに使う事は無かったんだけど
ふと、「Googleのオートコンプリートって日本語もオートコンプリートしてるような・・・」と思って調べる事にした。
Googleのオートコンプリートはac.jsを見ればいいのだけれど難解すぎるのでパス。
検索してみると
Google サジェストの不思議
という記事を見つけた。keydownがダメなだけであってkeyupだとIMEの入力途中の文字も参照できるみたい。
そこで、ベースにするオープンソースなAJAXを探してみた。せっかくCS4になったのだからSpryを使っても良かったけど中身を弄る可能性が大きいので
jQueryでシンプルそうでキャッシュが付いてる「jquery.suggest」っていうのを使う事にした。
データはMyReleaseのキーワードを人気順に並べて使う事にした。
やってみたがIMEでつまづく、keyupにしてもkeydownにしてもダメ。
試しにIEでやってみたらいける。どうやら昔試した時もブラウザの問題で挙動がおかしかったのかもしれない。
調べてみると
tonextone.com/note/ – JavaScript の *.onkey* と IME の事情。その1
どうもブラウザに挙動が違うらしい。諦めかけてると次の記事に解決法が書いてあった。
tonextone.com/note/ – JavaScript の *.onkey* と IME の事情。その2
Googleさんはタイマーをしかけてたらしい。
という事でテスト終了。
日本語オートコンプリートテスト（公開終了）
（ライセンスを書いてないので書き換えていいのか分からないがjquery.suggestもjQuery autocompletersを元にしてるらしいんでいいんかな？）