訪問ありがとうございます、生きてます。

ブログを初めてから2回目の冬なんですけれども
最初の年も年末年始に更新が滞ったし
今年も、昨年末から更新が滞ってるし
とにかくまぁ冬に弱い感じ、夏生まれだからかしら
(年始は高熱で実際に床に伏せていたし)。

Webの事は色々やっているんだけど、
時間に追われ手持ちのカードの組み合わせや地道な作業で乗り切ろうとしたり
覚えたりあみ出したことが細か過ぎたり、
トライアンドエラーエラーエラーな感じで実を結ばなかったり、そんな毎日です。
賢くなりたい。

久しぶりに帰省

このブログに個人的な日記みたいな事を書くの変な感じ。
コンセプト揺らいでるんじゃないの、大丈夫か？

今年は久しぶりに実家に顔をだしにいったんだけど
家までの道のりに馬に遭遇しました。

人、馬、ポニー、子牛って隊列がほのぼのしてました。
近くに乗馬させる何かがあるのかな？寒川神社の祭事で使うやぶさめ用の馬かしら。

ちなみにgooglemapで場所をみるとここ。

大きな地図で見る
何気に後ろの家の、外階段の向きが変わっていたりする。なにこれすげぇ。
てかものそい田舎なのにこんな細道までストリートビューが有効だった、googleすげぇ。

新年の寒川といえば寒川神社

で、夜寒川神社にお参りしにいってたこ焼きを購入。

これは神門のねぶた。

ちなみに
ねぶた(NE BU TA)は青森で、
ねぷた(NE PU TA)は弘前[hirosaki]

人の形をしてるのが青森NEBUTAでラッセラー
扇形の燈篭に絵が書いてあるが弘前NEPUTA

と青森出身の父がおしえてくださいました。

拝殿

2011年のちろ(白)とさくら(キジトラ)

今年で何歳だろう。

さくらのシマシマがわかるようにしようとすると
ちろが白く飛んじゃうし

ちろのカタチがわかるようにしようとすると
さくらが黒く潰れちゃう
困ったふたり。

本年もよろしくお願いします

更新したりしなかったりとユルい感じですけどひとつよろしくです。
今年はhtml5とcss3が加速するのかな。

このサイトを参考にしてインストールしました。

さくらのレンタルサーバーで、php5-mysqli をつかえるようにする覚書。(PHP5.3.0をコンパイルして使う) – れいさ屋

上記サイトに書いてある順番そのまんま入力していくだけでphp5.3.3のインストールに成功した(※コンパイル時のコマンドでmysqlに関係するところを省略したけど)。
サイトが移転したようなので、消えないと思うけど念のため記事を一部引用させていただきます。

※php-5.3.0をphp-5.3.3に変更して使った

作業ディレクトリの作成

mkdir tmp
cd tmp

PHPをダウンロード・解凍

wget http://jp.php.net/get/php-5.3.0.tar.gz/from/this/mirror
tar zxvf php-5.3.0.tar.gz

* TABキーによる補完が利用できます

コンパイル

cd php-5.3.0
./configure --prefix=/home/ --with-config-file-path=/home//www/ --enable-force-cgi-redirect --enable-mbstring --enable-mbregex --enable-calendar --enable-pdo --with-pcre-dir=/usr/local --with-openssl=/usr --with-iconv=/usr/local --with-gd --with-zlib=/usr --with-jpeg-dir=/usr/local --with-png-dir=/usr/local --with-ttf --with-freetype-dir=/usr/local --with-mysql=/usr/local/mysql/5.1 --with-pdo-mysql=/usr/local/mysql/5.1 --with-mysqli=/usr/local/mysql/5.1/bin/mysql_config --enable-soap --with-curl --with-xsl=/usr/local --enable-dom --with-gettext=/usr/local --enable-exif

* の部分は、書き換えてください。
* ミソは、–with-mysqli=/usr/local/mysql/5.1/bin/mysql_config これです。

renice +20 -u
make
make install

使って見るには：

このままでは今回コンパイルしたPHPは、使われることはありません。

ドメインごとに、以下の手順をする必要があります。

・例: www.example.com (/home//www/example.com/)でつかえるようにする場合

mkdir /home//www/example.com/cgi-bin
cp /home//bin/php-cgi /home//www/example.com/cgi-bin/php5.cgi

このようにしてphp-cgiをコピーしたら、~/example.com/ディレクトリ上に、.htaccessを作成します。

内容は、

Action php5-script /cgi-bin/php5.cgi
AddHandler php5-script .php .php5

こんな感じにします。すると、.php拡張子にアクセスを試みた場合、/cgi-bin/php5.cgiでphpコードが実行されるわけです。ちなみに、デフォルトでmysqliは有効になっています。特に設定は弄る必要ないです。
(推奨)php.iniの設定

mbstring.language = Japanese
mbstring.internal_encoding = UTF-8
mbstring.http_input = auto
;mbstring.http_output = UTF-8
mbstring.detect_order = auto

date.timezone = Asia/Tokyo

コイツは、.htaccessと同じディレクトリに設置しましょう。
おわりに

* mysqliに限らず、その他組み込まれていないモジュールについても、この方法でつかえるようにすることができます。詳しくは、php公式サイトあたりをご覧ください。

php.iniの設定のdate.timezone = Asia/Tokyo、これ大事ぽかった。

なんでphp5.3.3をインストールしたかったか、事の経緯

iPhoneのユーザー辞書用にファイルを変換するサイト(ココとかこことか)はphpで作ってて、sqliteをいじったり作成したりするのにPDOクラス(php5.1以降で対応)やらSQLite3クラス(php5.3以降で対応)やらを使ってる。

動作テストはローカルのxamppでやってた(phpのバージョンは5.3.1みたい)。
なのでPDOクラスもSQLite3クラスも問題なく使えてた。

だがしかし、残念な事に作成したphpを実際に走らせるこのサーバーのphpは5.2.13(CGI版)だった(さくらインターネットのスタンダードプラン)。
つまり本サーバーではSQLite3クラスが使えない。

そんな最初に気づいておかなきゃいけない大事な事も気にかけずに、よみと単語の.txtを.sqliteに変換して追加したり作成するphpを作ってローカルでテストして問題なさそうだったので、本サーバーにアップしたらあたりまえのように動かない。

せっかく作ったプログラムがこのままだと使えない。
なのでSQLite3クラスを使えるようにする方法を探す。

PECLのSQLite3拡張モジュールを使えば大丈夫？

PECL :: Package :: sqlite3 :: download

さくらインターネットのスタンダードプランのサーバーにPECLをインストールさせるには、どうもautoheaderとautoconfを弄らないと使えないみたいなんだけど、うちの頭が悪すぎた為にうまいこと設定が出来ずインストール出来なかった。

参考 / さくらインターネットにPECLをインストール [dozo dokuwiki.php]

なので、php自体を5.3以上にしてしまえ！と思ったわけです。

乱雑モックアップは、勉強したり試したりしながらその過程やメモを書いてたりするので、投稿に「続編」がしばしば発生する。
続編の扱いをどうしたらいいのかなーというのはずっと考えていて、いまだ結論がでない。

今のところ続きがある場合は、別エントリーとしてポストしてきた。
古い記事を更新しても「最近の投稿」に表示されないから。

といった流れの中、WordPressで再更新（アップデート）した過去記事も最新記事に含ませるカスタマイズ法 – かちびと.netを読んだ。
そしてウィジェットを探してみたら見つけたのが更新した投稿とページのウィジェット→Recently Updated Pages — 病的溺愛シンドローム。

これはディ・モールト、ディ・モールト。
さっそくWordPress › Recently Updated Pages « WordPress PluginsとWordPress › Recently Updated Posts « WordPress Pluginsをダウンロードしてみた。

(ページの更新情報を上げる必要もないから)先にRecently Updated Postsの方を有効にしてみると、んーこれはまだ微妙かも、日付の扱いが。

次にRecently Updated Pagesを有効にしてみる、設定はこんな感じ。

投稿日が表示されるのではなく、最終更新日が表示されるようだから日付は非表示でもいいかなぁ。

問題は誤字脱字を見つけて内容以外を修正した投稿も上がってしまう事かな、と。
age/sage機能があればいいのに。

[追記 / 20100610]
Include blog Posts in the list:(投稿もリストアップする)にチェックを入れると、htmlが酷い事になってた。
ナニが原因なのかわからないけどリンクを < /a> で閉じたり、ちゃんと閉じてるとこもあるのに、なんでだろ?
チェックを外せばおかしなhtmlを吐き出さないけど、ページしか拾ってくれないし意味がない。
弱った。

続きを分ける事の良い部分

注)うちの所感です。

• 1つのエントリーが長くならない(分割してても無駄に長くなってるけど)
• どこが更新した部分か判りやすい
• 更新分が最新の投稿になる

関係ない所まで読み込む必要がない。

反対に悪いところは

• 前後のエントリーを参照しないと判らない事がある
• 検索でやってきて、古い方の投稿を最初に見た人は何回かリンクをクリックしなきゃならない

関係する部分が点在しちゃうと面倒。

Recently Updated Pagesがあれば
(要点をちゃんとまとめられていたらば)追加の情報は別エントリーに分けずとも同じエントリー内に足していった方が良いのではなかろうか?と思うんだけど
あーでもこれやっぱりモノによるんだろうなぁ。ん～。

IE8(以外のIEは見てないけど)でjQuery lazy load pluginがオブジェクトでサポートされていないプロパティまたはメソッドです。と言われる。

jQuery(document).ready(function($){
  if (navigator.platform == "iPad") return;
  jQuery("img").lazyload({
    effect:"fadeIn",
    placeholder: "http://blog.sakurachiro.com/wp-content/plugins/jquery-image-lazy-loading/images/grey.gif"
  });
});

こっちも、オブジェクトでサポートされていないプロパティまたはメソッドです。ですって。

$('textarea.resizable:not(.processed)').TextAreaResizer();

lazyloadの、このjQueryの書き方なんなんだろう?
$(function(){じゃないのかな?コンフリクトをさけて?
jq_img_lazy_load.phpの一番下

add_action('wp_head', 'jquery_lazy_load_headers', 5);
add_action('wp_head', 'jquery_lazy_load_ready', 12);

あとadd_actionの書式というか引数

<?php add_action( フックするアクション名, 呼び出す関数名, 関数の重要度(デフォルト値10、例えば5に設定すると早く実行され、12に設定すると遅く実行), 関数の引数の数 ); ?> 

Firefoxでも動いてない気がする is not a functionて何だ?

エラー: jQuery("img").lazyload is not a function
ソースファイル: http://blog.sakurachiro.com/
行: 110

<?php wp_head(); ?>の位置ってどこがいいんだろう

自分で指定したcssやjsの後なのか?今は前に入ってる。

Head Cleanerのreadme.txt
テーマ内の特定の記述を整形対象外にしたい場合は `header.php` を修正する必要があります。
具体的には、整形対象外にしたい部分を `<?php wp_head(); ?>` より下に記述してください。

ゆっくりと… » “CSSは上、scriptは下” を簡単に – Head Cleaner 使い方のコツ

また例えば1つのプラグイン中で整形の対象と対象外とを分けて設定したい場合には、新たなフィルタを定義して「有効なフィルタ」リストに加えましょう。例えば
1 function add_inline_css() {
2 // 対象外とするコードを出力
3 …
4 }
5 add_action(‘wp_head’, ‘add_inline_css’);
などを該当プラグインのコードに追加すればリストにあわられますので、チェックを入れればOKです。

ｆｍｆｍ

現在は、textarearesizer関係とtinyscroll(scrollsmoothly.jsに変えた)を<?php wp_head(); ?>の上に置いた

現在のhead cleanerの設定メモ

でチェックついてる所

1. <head> 内の JavaScript を、フッタ領域に移動
2. IEコンディショナルタグを削除
3. メタタグ “canonical” を追加

有効なフィルタ、対象外

1. CommentFormQuicktags::add_head

<head> 部で有効な JavaScript、フッタに移動

1. http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2
2. http://blog.sakurachiro.com/wp-content/plugins/wordpress-comment-images/js/comment-images.js?ver=1.4
3. http://blog.sakurachiro.com/wp-content/plugins/swfobj/swfobject.js
4. http://blog.sakurachiro.com/wp-includes/js/jquery/jquery.js?ver=1.3.2
5. http://blog.sakurachiro.com/wp-content/themes/test/js/jquery.js
6. http://blog.sakurachiro.com/wp-content/themes/test/js/scrollsmoothly.js
7. http://letskillie6.googlecode.com/svn/trunk/letskillie6.ja.pack.js

gzip転送

YSlowで24ファイルもgzip転送されてないけど?と注意された
サーバー側かphpで処理が出来るらしい、gzipを簡単にやってくれるプラグインを探す。

WordPress › gzip « Tags « WordPress Plugins
星5個のを適当にいれてみる。
WordPress › WP HTTP Compression « WordPress Plugins

設定画面もなくプラグインを有効にするだけみたい。うさんくさいナー

lintでhtmlをチェックすると
>select> の属性 `onChange` は小文字で書かなければなりません。と言われるが
sidebar.phpではonchangeになってる。どこが勝手に書き換えてるんだ?
ウォジェットは使ってない。
とかいってる間に勝手になおった。

それがどんな勘違いだったかというとそりゃもう酷い話で、
まず、本文のwidthが480pxの所へ画像を2枚横並びで入れようとした。
その時画像のmarginを10pxとして考えて、横幅235pxでサムネイルを作った(235px*2(画像2枚)+10px(margin)=480px)。

けれども実際は両方の画像に右marginがつく為、本当のところmarginは2倍。
さらに画像には1pxのborderがついてたので1画像につき+2px、合わせて4px。
もう全然無理。

そこでサムネイルを小さく作り直せばいいのに、先日のie-css3.jsを思い出してE:nth-last-child(n)を使って2個目(最後)の画像のmarginを消してしまおう!となんか良い事を閃いた気になる。

そしてE:nth-last-child(n)とE:nth-last-of-type(n)の練習をしてから、いざ乱雑モックアップのcssをよく見てみると画像周りのmarginは10pxじゃなくて1emだった。

6pxしか余裕がないところに1emもmarginがあったら右側のmarginを削除しても段落ちするし、marginを5pxくらいにすると狭すぎるしで、結局今回はサムネイルのサイズを変更するのが一番簡単な修正方法でした。

前置きが長くなったけど、:nth-last-child(n)や:nth-last-of-type(n)の均等配置

乱雑モックアップ｜nth-last-childなどで均等配置テスト
html

<h1>E:nth-last-child(n)</h1>
<div id="content" class="lastchild">
  <div class="main">メイン画像</div>
  <div class="sub">
    <p>サブコンテンツ<br />
      サブコンテンツ<br />
      サブコンテンツ</p>
  </div>
  <div class="sub">
    <p>サブコンテンツ<br />
      サブコンテンツ<br />
      サブコンテンツ</p>
  </div>
  <div class="sub">
    <p>サブコンテンツ<br />
      サブコンテンツ<br />
      サブコンテンツ</p>
  </div>
</div>

css

body {
  font-size:80%;
}

p {
  padding:10px;
  margin:0;
}

#content {
  width:380px;
  padding:10px 10px 0 10px;
  border:1px solid SteelBlue;
}

.main {
  width:380px;
  text-align:center;
  line-height:234px;
  color:black;
  background:LightSkyBlue;
  margin-bottom:10px;
  height:234px;
}

.sub {
  width:120px;
  margin:0 10px 10px 0;
  background:aliceBlue;
  float:left;
}

#content:after{
  content:"";
  display:block;
  clear:both;
}

/* ここでmargin0 */
.lastchild .sub:nth-last-child(1){
margin-right:0;
}

以前書いたこれ -> 横並びにしたリストを（手動だけど）簡単に均等配置ぽく見せるは、marginを左にとる必要があって今回はダメで。
marginを右にとる方法を使うにしても今回は親要素が一個たりないからダメなはず(たぶん)。

こちらもあーだこーだやってます-> E:nth-last-child(n)とE:nth-last-of-type(n)で均等配置

それにしてもこんな使い方よりもっと別な何かで協力に威力を発揮するんじゃないだろうかって思うんだけどその何かが思いつかない。勿体無い。

ところで、

WordPressで画像を挿入する時に、[配置]で左を選ぶとimgのclassにalignleftが付与される(右ならalignright)。
そして、うちのcssだと

<p><img style="float:left"></p>
<p><img style="float:left"></p>
<p><img style="float:left"></p>

なんて風に画像が並ぶと階段の様にズレてします。

理由はたぶんpの中のimgのfloatが解除されずに、次のpの中のimgがfloatで回り込んでくるから高さがおかしくなっちゃうんだと思ってるんだけど、本当のところどうなんだろう?

原因を探すために問題を再現できるシンプルなhtmlを作って試してるんだけどmarginで階段を作ることが出来ない。
paddingだと簡単に階段になるのに。

WordPressのshadowbox JSを使っている、が
グループ化されてないので連続して表示させられてない。
ちょっとエッチな画像のreblogが多いので恥ずかしい。

次の作業

shadowboxでグループ化
プラグインの管理画面の作り方を調べて作る / 入力するのはidと読み込み件数くらい。

そのうちやる

記事の詳細画面に入った時のnextボタンをアンカーから次の記事へのリンクになるようにしたいなぁ。

どんな理由かというと、
wptheme=grungeのsidebar(メニュー部分)がposition:fixedだったってのと、吐き出されるhtmlがこんな感じで

<li id="mycategoryorder-3" class="widget widget_mycategoryorder"><span>カテゴリー</span><ul>
<li><a href="#" title="web に含まれる投稿をすべて表示">web</a> (57)</li>
<li><a href="#" title="tips に含まれる投稿をすべて表示">tips</a> (8)</li>
<li><a href="#" title="javascript に含まれる投稿をすべて表示">javascript</a> (22)</li>

aのクリック範囲をメニュー部分いっぱいまで広げようとdisplay:blockさせると投稿数が下に追い出されてしまう
そうすると縦に伸びて、ブラウザのheightを飛び出し、選択できなくなる。

投稿数をタグで囲めたら

liにposition:relative;
投稿数にposition:absolute;を追加して
クリック範囲をできるだけ稼ぎながら、投稿数を表示できるので解決出来そう。

だけどもそんな設定はない。

wp_list_categoriesでフック

wordpress.orgのフォーラムで質問したらフックを使うといいよとヒントをいただけたので
フックっちゅーのを調べて、functionに追加してみところ、いい感じになってたんだけど。

あれから一ヶ月、今はwp_list_categoriesでフックが効いてないみたい。
my category orderの中を見てもwp_list_categoriesを呼んでるからフックは有効だと思うんだけど
なにか勘違いしてるんだろうか…

あれ、デフォルトのカテゴリーウィジェットにもフックが効いてないわ。なんだこれ

文字コード！？

functions.phpの文字コードがshift-jisになってた、utf-8に変更してアップしたらフックが効いた。
文字コードが問題だったの？
なんでshift-jisに変更されてたのか？
なんなんかなぁ

カテゴリーなど特定の文字が重なる。
categoryに変更すると重ならない。
CSSが問題なのか？と調べてみてもよくわからん。

で、もしやとエクステンションをかたっぱしから無効にしたら

正常に表示された。

ん～どれが問題だったんだろう。
特定するの面倒くさいな。

あーmy category orderが調子悪いのか。どうしたものか。
Depth: -1で解決出来そう。よかった。

って、class名がwidget_categoriesからwidget_mycategoryorderに変わってる。

さくらインターネット｜サーバーコントロールパネル » データベースの設定
データベースと管理ツールのところにあるロゴをクリックしてphpMyAdminにログイン

WordPressのdbを選んでオーバーヘッドがあったら、tableの下側にある「オーバーヘッドのあるテーブルを確認してください」をクリック、自動的にチェックが入るので、その右のプルダウンから最適化を選択すると実行される。

1つのサービスで何個もIDとpasswordがあると、どれがどこのかわからなくなるねぇ、softbankも面倒だもんね。

問題
検索すると最近の投稿が表示されなくなってた(吐き出されてない)。

試し
最初にtestで気づいて、テーマに問題があるのかな？と
sidebar.phpを編集したり、search.phpを削除したり(search.phpが無いと、index.phpが適用される)
[最近の投稿]はウィジェットにあるのでウィジェット内の位置を変更したり。
search.phpに

<?php the_widget('WP_Widget_Recent_Posts'); ?>

を直接記述してみたり(ウィジェットの記述みたいだから挙動が同じになるのも納得ですけど)。

どれも検索すると[最近の投稿]が消える。

はたしてテーマだけの問題なのだろうか？

ここでようやくtest以外のテーマで検索してみると、他3つのどのテーマも[最近の投稿]が消える。
あらあらまぁまぁ。

Search Everythingの設定を見直してみる

on/offしながらチェックしていくと、[最近の投稿]が消えない時もあった。

yesにしても大丈夫だったもの

• 承認済みコメントのみを検索:
• すべての下書きを検索:
• すべてのメディア (アップロードファイル) を検索:
  (投稿タイプが “attachment” のもの)
• すべての投稿者を検索:
• 検索キーワードをハイライト:

それ以外を検索対象に含めると消えた。
テーマとの相性が悪いのかなぁ。

色々削ったけどロゴっぽくならない。
でもまぁ花が可愛いと思うのだよ。

ビックリマンの名前の下のヒラヒラしたような(古い地図なんかに出てきそうな)部分の簡単な作り方ないかな。
あとそれの名称が知りたい。帯？

乱雑な様をデザインとして形にしようと試みた結果がnormal(現grunge)で、これが最初に出来たデザイン。
普段やらない方法をあえて使って構築しようと決めて

• 背景画像を3層にして%配置、ブラウザのサイズによって重なり具合が変わる、同じものなどないのだ
• position:fixedを使って乱れない事で逆に全体を乱す様を表現
• ie7以下を対象から外す、商用だと出来なかったのと自分用メモなのでieは必要なかった

他にも色々やったけども、そんな感じで作った。

しかし自分の為用のメモブログなのに、自分が見づらいよコレ、という結果に。
そこでもうひとつのデザインsimpleを作成。
縛りは、画像を使わない、あと自分が見やすいように工夫する。

そしてデザインが二つになり、選択できるようにと方法を探すと
テーマを切り替えてcookieに保存するプラグインと
cssを切り替えてcookieに保存するjQueryを発見。

そこで検討した結果、基本のphpは変えずにcssだけで見た目を変更するcss zen garden方式(なつかしい)で行くことにする。

そうこうしてると、「Webデザイナーなのにデザインしてないじゃないか？」と知人から突っ込みが入る。
なに言ってますのん、むっちゃくちゃデザインしてるちゅーの、導線とか。
「素人からみると、目立つ画像を加工して配置してないとデザインしてないのと同じ」と切り捨てられる。
えー、あー…

という流れで3個目デザインを作る。
意味のないキャッチ画像など、花は華でも枯れた花だという意味で、ツタを絡ませてみたのが、x-ran-zatsu(現dying-flower)。
IE6にも対応した(simpleも対応してるけど敢えて表示させてない)。
酷い言い様だけども、それなりに考えてちゃんと作ったつもり、
その上でタイトルとカテゴリなんかの並び等細かい修正をした為、新しいテーマとして作る。

するとどうだろうデザインとコーティングであわせて1日とちょっとで出来た。
wpに慣れてきたのか、新しいテーマで過去に囚われずに出来たのがよかったのか、両方か
あとは流用するところは流用したのも大きいですけど。

枯れた花だけどまだ死んではいないよ、と言いたくなって
漢字の乱雑を動脈と静脈の色を意識して奥に配置したりしてみると、
ヘッダ画像をランダムで表示したくなったので、以前のエントリーで書いたようにphpを追加する。

一応完成したけれど以下の画像のような困った状態になってしまった。

x-ran-zatsu(現dying-flower)からsimpleとnormal(現grunge)を直接選べなくなったのと、
ran-zatsuとx-ran-zatsuの変更はプラグインを使っていて、ウィジェットはサイドバーにしか置けなかったので
デザインを変更する場所があっちにもこっちにある状態になった、これは良くない、ぜんぜん良くない。

なのでまた考える

1. 2つになったテーマを1つにしてcssで3つのデザインを分けるか(最初の方式)
2. simpleとnormal(現grunge)を分解してそれぞれのテーマに変更、3つのテーマにしてテーマの変更でデザインを分けるか

cookieの挙動がなんだかおかしくなってきたのと、使うjsを切り替えたくなったり、無理にieを弾かなくてもいい時もあるのと、サイドバーを追加してウィジェットをカテゴリーなどど分けて使えるように出来たので
テーマ自体を切り替える方法にチェンジする。
simpleとnormal(現grunge)を分解する事になるんだけど、簡単かと思っていたら結構手間が掛かった、でもまぁ出来た。
もうnormalではなくなってしまったので新しい名前をつけることにした、グランジだ。
x-ran-zatsuも最初の意味に戻す。

そして下記の画像みたいになった。

テーマの追加が簡単になると、別のデザインもしたくなってしまうんだけど
これで問題が無くなったわけじゃないのが悲しいところ
テーマを切り替えると、indexに戻ってしまうのです。

ポートフォリオを見ていても、テーマを変更するとindexに。
これはどうしたらいいのかな、 常に今見ているurlをどっかに保存してテーマを変更するときに参照させたりする？出来る？わかんない。

とりあえずそういう事で、見た目はあんまり変わってないけど全面リニューアルなんですよ。

そして先ほどiPhoneのWordPressアプリ記事を書き終えてから、
そういえば過去の記事にappリンクアドレスを調べる方法ないかな？というのがあったので
そこを探してきてコピー方法の記事へのリンクを張って、動作確認していたら
なんだこれ、重すぎる。
最近そこはかとなく重いもっさり気味な気もしていたけど、確実に重い。

プラグインが悪いのか、サーバーが悪いのか原因を分ける為に
すべてのプラグインを停止してみると、ローカルのファイルにアクセスしてるのか？ってくらい高速になった。

えーなにこれ…どうしよう

続く。

http://site24x7.com/web-page-analyzer.htmlで測定してみた結果

プラグイン全部off

色々on

pagenaviの表示件数を変更

ひとつづつonしていって感じたのは
何かひとつ有効にするといきなりガクンと数値が悪くなる事。
でも体感はその数値ほどじゃなかったりもする。

これでいいわけないよなぁ

うまくいかないといっても、htmlに使えば動くんだけど、wordpress（php）で読み込むと画像が消えてしまう。

これがその時書いたjavascriptで
読み込んだ時のミリ秒が奇数か偶数かで分岐させて、#headerの背景を差し替える。
phpで使う場合jsの読み込ませる場所が違うのかな？

window.onload=function(){
	headsw();
}

function headsw(){
var dt = new Date();
ms=dt.getMilliseconds();
//console.log("ms:"+ms);
if(ms%2==0){
document.getElementById("header").style.backgroundImage="url(img/common/header.jpg)"

}else{
document.getElementById('header').style.backgroundImage='url(img/common/header-2.jpg)'
}
}

関係ないけどキーボードの調子がすこぶる悪い。
文字側のenter（テンキー側のは反応する）やc,v,F7あたりが反応したり、しなかったり、延々と一文字が入力され続けたり。

さて、粘ってみたけど、うまい解決法も閃かないので別の方法を考える事にした。
せっかくwordpressでphpを使っているのだから、phpで出来ないかね？と辞書を片手にシコシコ書いてみたら、とりあえず動くだけというものだけど、出来たので手順を晒してみます。

まず画像を表示させてみる

test-sw.phpという名前のファイルを作成して以下を記述

<?php
header('Content-Type: image/jpeg');
readfile("img/common/header-2.jpg");
?>

やった、localhostから確認するとheader-2.jpgが表示された。

次にこのphpをcssに読み込ませてみる。
css/test-css.css

#header{
	background:url(../test-sw.php) no-repeat;
	border:1px solid #f33;
	height:400px;
	width:400px;
}

test表示用のphpを作ってtest-css.cssを読み込ませる。
test-oya.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>

<link href="css/test-css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header">head</div>
</body>
</html>

やった、#headerの背景にheader-2.jpgが表示された。

背景画像を表示させる事は出来たので
次は、画像の選び方を考える。

ランダムに切り替えたい背景画像だけを集めたフォルダを作って、そのフォルダ内にある画像を配列に入れられないか？
これが出来れば、いちいちtest-sw.phpを変更する必要がなくて、背景画像を集めたフォルダに画像をぶっこめば済むようになる。

辞書を引くと、opendir()とreadfir()でディレクトリ操作ができるそうだ。
test-sw.phpに追加

$dn=opendir(img/header);
while($file=readdir($dn)){
	echo "ファイル名：$file<br>";
}
closedir($dn);

出力結果例

ファイル名：.
ファイル名：..
ファイル名：header-2.jpg
ファイル名：header-3.jpg
ファイル名：header-4.jpg
ファイル名：header-5.jpg
ファイル名：header-6.jpg
ファイル名：header.jpg

ん？
ファイル名：.
ファイル名：..
？
なんだこれ。

よくわからないのであとで調べるとして今はif文で弾いとく、
ついでにマジックナンバー的なフォルダ階層を潰して、抜き出したファイル名を配列に入れる。

test-sw.phpを変更

$headimgdir='img/header';

$dn=opendir($headimgdir);
while($file=readdir($dn)){
	if($file!='.' && $file!='..'){
		$files[]=$file;
	}
}
closedir($dn);

これで画像が入った配列が完成。
ここからランダムにピックアップさせる方法を調べる。

php4～で「array_rand(配列);」というものがあった、配列のインデックスをランダムに取得できるらしい。
これを使ってみる。
test-sw.phpを変更

$imgnum= array_rand($files);
$imgpath=$files[$imgnum];
header('Content-Type: image/jpeg');
readfile($headimgdir.'/'.$imgpath);

readfileはフォルダ階層と配列からの値に変更。

最終的なtest-sw.php

<?php
$headimgdir='img/header';

$dn=opendir($headimgdir);
while($file=readdir($dn)){
	if($file!='.' && $file!='..'){
		$files[]=$file;
	}
}
closedir($dn);

$imgnum= array_rand($files);
$imgpath=$files[$imgnum];
header('Content-Type: image/jpeg');
readfile($headimgdir.'/'.$imgpath);

?>

完成。

normalと、simpleを使い分ける時に見つけたんだけど、テーマの切り替えがjQueryより重かったために、放置されていたプラグイン。
新しいデザインを作成したので試してみる。

デザイン変更のx-ran-zatsuクリックで指し換わるけど最初失敗してんじゃないの？と不安になるくらい重いかもしれないです。

暗い背景に明るい文字を乗せるのは難しいなぁ

[追記｜20091003_21:10]

theme-switcher-reloaded.php 146行目のliが現在選択してるテーマのタグのようなので

<li>'.$display.'</li>'."\n";

classを追加した

<li class="nowd">'.$display.'</li>'."\n";

さくらインターネットのスタンダードプランはデータベースが1つしか使えないので
他にblogやりたくなっても出来ないなーと思ってがっかりしていたのですが
どうも勘違いだったようで、wp-config.phpの$table_prefixを変更すれば複数設置も夢じゃないって話を発見しました(リンク修正しました)。

具体的には wp-config.php の $table_prefix の値を書き換えて、ブログごとに別の値を指定してやれば良いです。
例：
ブログ「ABC」で使用する wp-config.php の記述。→ $table_prefix = ‘wp_ABC_’;
ブログ「DEF」で使用する wp-config.php の記述。→ $table_prefix = ‘wp_DEF_’;

これを参考に、とりあえず「やる・やらない」は別にして試しに複数設置してみよう、と何も考えずにwp-config.phpを編集（失敗1）してアップロードし

それから「/wp-admin/」にアクセスするとインストール画面になるので、適当な名前を付けてインストールしました（失敗2）。

何を思ったかインストール先は、http://blog.sakurachiro.com/だった為に乱雑モックアップは今インストールしたばかりのデタラメなタイトルのblogに上書きされてしまったああッ！！！

$table_prefixを別にしたから、データが残ってるんじゃないか？と考え
さくらインターネットのサーバーコントロールパネルにログインして、MySQLを覗いてみる。

よかった残ってた、とりあえず新しく追加した空っぽのtableを削除してwpの管理画面にログインすると
見慣れた乱雑モックアップのダッシュボードが表示されたッ！
投稿数も同じ、サイトを表示させてみると、ちゃんと復旧された。

かのように見えただけで、後続のページやカテゴリー、検索、とりあえずindexと下書き保存されたもの以外googleの画面になってた。

この理由が分からなくて困った、困った。

バックアップしていたデータをインポートしてみたけど、状況は変わらずにindex以外表示されない。
でもデータはあるんだから、表示されないということは単純にリンク切れなんじゃないか？と推測する。
DBを覗いてみるとpostsには?p=29みたいなアドレスが付いてる。
これあれだ、設定 – パーマリンク設定のデフォルトだ。

こうなる前は「月と投稿名」を選択してたから、それに変更してみると、パスが通るようになってindex以外も表示されました。

結論

wp-config.php の $table_prefixを増やして、WordPressを誤って上書きインストールし
記事データがあるのにパスが通らなくなったら、パーマリンク設定を見直してみる。

ん～なんだろうなコレ。。。

とりあえず原因の切り分けをしなくちゃ始まらないので、問題を再現出来る最小の構成を探ってみよう。

[追記：20090925_20:00]
あー#midgroundを消すと#wrapの中に#menuが配置される、弱ったな。

[追記：20090925_20:15]
#midgroundのposition:fixed;関係を消したら#wrapから飛び出さなくなった。
あれーでもこれ背景を3枚重ねるのに必要で設定したはずなんだけど、どこかでまた別の不具合がでそうなのに、おかしいところは見当たらない。

あるぇ？？

最新の1件以外の投稿をタイトルのみ表示に変更

simpleデザイン側のカテゴリーなどの表示をfloat化

normalデザイン側のcssスイッチの位置変更
normalデザイン側のサイドメニューをアコーディオン式に変更

タイトルのみの表示の方が、見やすいと思って頑張って改造したけど、そうでもないかな、、、？
とりあえずしばらくこのまま運用。

indexかサイドバーに、最新のつぶやきを一個だけ表示する位でいいんだけどなぁ
それかカテゴリーTwitterにはポストされていくけどindexなどの一覧には一切表示させないとか。

そしたらこれを見つけた、
Twitter REST API Method: statuses user_timeline
上記をエキサイト様翻訳

（関係ないけどtimelineはスケジュールって訳すのね）

URL:
http://twitter.com/statuses/user_timeline.format
Formats:
xml, json, rss, atom

Example: http://twitter.com/statuses/user_timeline/12345.xml

これよくわからない、どっちだ

• http://twitter.com/statuses/user_timeline.xml ?
• http://twitter.com/statuses/user_timeline/12345.xml ?

試してみると、どっちも自分の発言ログが見れた。

ただ上はidも入力しないで見れるってのがそもそもおかしい、ついったにログインしてるユーザーのuser_timelineが表示されてるだけなのかな。
idはひとつしか持ってないので確認できないから下の http://twitter.com/statuses/user_timeline/12345.xml をつかってみる。

翔泳社のPHP辞典（written by NAOKI NISHIZAWA）を参考に。

<?php
$xml=simplexml_load_file("http://twitter.com/statuses/user_timeline/ユーザー名.xml");
echo $xml->status[0]->text;
?>

どう？

macはサブディスプレイの方にphotoshopとかdreamweaverとか置けないのかしら

お！

わかりづらくなってきたなーと感じたのでいざ改造してみようとしたら、これが結構思い通りにいかなかったというお話。

色々失敗したのだけれど、とりあえずそれはおいておいて。

まず検索。
カテゴリー一覧のページはarchive.phpを優先的に呼び出すらしいので
index.phpをベースにarchive.phpを作成。

• the_title(); で、記事のタイトル
• the_content(); で、記事の本文

今回は各記事のタイトルだけほしいのでthe_title();を使う。

1.なるべく1ページにまとめて表示させたいので、デフォルトの1ページに表示させる記事数を以下の記述で無効にさせる。

query_posts($query_string."&showposts=-1");

<?php query_posts($query_string."&showposts=-1"); if (have_posts()) : while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a>
<?php endwhile; endif; ?>

2.どのカテゴリーを吐き出してるかわかりやすくしたいので以下を追加

<?php single_cat_title(); ?>

ついでにh2でくるんでおく

<h2><?php single_cat_title(); ?></h2>
<?php query_posts($query_string."&showposts=-1"); if (have_posts()) : while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a>
<?php endwhile; endif; ?>

3.カテゴリー内の記事の数を表示させたい、ここでハマる。
以下ごり押しで

//記事の数をカウント
<?php query_posts($query_string."&showposts=-1"); if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php $mk_count++; ?>
<?php endwhile;endif; ?>
//吐き出す
<?php echo $mk_count; ?>

//記事の数をカウント
<?php query_posts($query_string."&showposts=-1"); if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php $mk_count++; ?>
<?php endwhile;endif; ?>

<h2><?php single_cat_title(); ?> <span>( <?php echo $mk_count; ?> )</span></h2>
<?php query_posts($query_string."&showposts=-1"); if (have_posts()) : while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a>
<?php endwhile; endif; ?>

記事を格納してる配列がどこか（何か）わかれば、それのlengthを参照して簡単にカテゴリ内記事数がわかりそうなんだけど、、、

4.次は

• 投稿日時「the_time()」
• カテゴリが複数にまたがってる時があるのでカテゴリ表示「the_category(‘, ‘);」
• あと最後に編集した時間（よく追記するので）「the_modified_date();」

を表示させる。

<?php query_posts($query_string."&showposts=-1"); if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php $mk_count++; ?>
<?php endwhile;endif; ?>

<h2><?php single_cat_title(); ?> <span>( <?php echo $mk_count; ?> )</span></h2>
<?php query_posts($query_string."&showposts=-1"); if (have_posts()) : while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a>
//記事の情報
初回:<?php the_time('Y年n月j日') ?>/
最終更新:<?php the_modified_date('Y年n月j日') ?>/
<?php the_category(', '); ?>

<?php endwhile; endif; ?>

5.これで欲しい情報はそろったので
あとは適当にマークアップして、cssで見た目を整えてみる。

以下カテゴリーの数を取り出すのに失敗した方法

<?php $cat = get_the_category(); $cat = $cat[0]; {
	wp_list_categories("include=$cat->cat_ID&show_count=1&title_li=&style=none&echo=0");
} ?>

get_the_category()でカテゴリのIDを取得して
wp_list_categoriesのincludeにぶち込む
wp_list_categoriesそのままだとliに包まれたり、カテゴリ名を表示されるので
show_count=1&title_li=&style=none&echo=0で色々解除

でもbrだけがどうしてもついてきちゃう。
wp-includesのclasses.phpを編集すればそれもどうにかなるみたいだけど
そこに手を加えたくないのでこの案はボツにしました。

normalとshimpleをそれぞれ調整

chromeで各記事のページ（なんて名前かわからない）に行くと、表示できない記事があったりしたので原因を探ってみる。
どうもcssファイルの読み込み方と記事の内容がうまいこといかなかったようなので、
media=”screen,tvでimport.cssを読み込んでから@import “cssファイル.css”;でcssを読み込むのを止めた。
そうしたらchromeの読み込みがずいぶん速くなった気がした。

simpleがだんだんsimpleじゃなくなってきたんじゃないかってのが悩み。もっとほかに悩むことがあるけど。

テンプレを別々にしようかな、どう考えてもそっちのほうがキッチリできる。

引用符

その際OPERA9あたりでblockquoteがボロボロだったと知る（スクロールした先のblockquoteが一部しか表示されなかったり）。

ただOPERA10にしたら問題なくなった。
OPERAの解釈が悪かったのかOPERA9.x以外の解釈が悪いのかどっちだろう。

reset.cssでcssをリセットした後、基本的なセットアップ用のcss（setup.css）を作ってみた。
しかしあんまり流用する設定もなかったので削除した。
その時のコピペのミスでなんかおかしくなった。

bloginfoでdescription吐き出した、無いほうがスッキリしてていいかな。

IE8でShadowbox JS（画像をポップアップさせるやつ）が機能してなかった、いつからだろう。
今確認したらIE7は8と同じ挙動で、IE6はポップアップはするけど、拡大画像が表示されず。

もうちょっとがんばって確認したら、ページの一番上に拡大画像が表示されていた（IE7-8）
公式サイト？の動作デモも同じ挙動だ…

IE7互換モードにすれば動作する、みたいなblogの記事があったけれど
このblog、IE7以下はモノクロで表示されるようにしてあるのでそれも使えず。
IE8は最近対応に入れたけど、やっぱり以前と同じくIE全部外そうかな。

とりあえず放置。

参考｜IE7互換モードで動かすmetaタグ

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

そこで、ちょうど前回のエントリーで動く背景を作った事だし、自分のサイトでも使いましょうと思い立ちデジカメでとった動画を加工。

先日高円寺の阿波踊りがあったことだし阿波の動画をflv化してswfにMCとして読み込む
さくらちろって屋号なのに阿波の背景もどうかな？と思いうちのさくらとチロの動画もflv化してswfに読み込む。

せっかくだからもうちょっと動画を増やしてランダムで表示させたくなる。
最初javascriptでランダムにswfを読み込むようにしようかと考えていたけど、Flash側で制御した方が適してるし楽チンなんじゃないかって事でASを書く

loader.swf

//読み込むswfのリスト
var swf_list:Array = [
"dummy.swf",
"dummy.swf",
"dummy.swf",
"dummy.swf",
"dummy.swf"
];

//外部swfロード処理
var loader_obj:Loader=new Loader();
var loadFile = Math.floor(Math.random() * swf_list.length);
trace(swf_list[loadFile]);
var swf_url:URLRequest = new URLRequest(swf_list[loadFile]);
loader_obj.load(swf_url);

stage.addChild(loader_obj);

デモ｜さくらちろ
外部swfのリストを外部xmlにすれば更新が楽になるんだろうけど、そこまでしなくてもいいかなと。

今回の躓いた所
loader.swfから見た読み込むswfへのパスではなく
loader.swfを呼び出してるhtmlからswfへのパスじゃないと通らない

stage.addChild(loader_obj);してなくて、表示がされなかったり。

jquery+jquery.cookie.jsでcssを変更させてcookieに保存させるやつの挙動がおかしかった
（コンディショナルコメントでie8はcssを読み込むようにしていたのに、reset.css以外を読み込んでなかった、cssチェンジャーも機能してなかった、operaも同様だった、ie7以下はcssを読み込まないようにしてある）
原因を調べて修正
（@importではなく変更するcssは直接読み込むようにした、ついでにコンディショナルコメントを変更し
ie6用のcss（ie6.css）を追加作成、ie独自のfilterでgrayを設定、css変更のリンク非表示、代わりに各モダンブラウザのダウンロードページへのリンク追加。
ie7でtitle下の:before 擬似要素が効いてないようなのでie6-7用のcss（oldIE.css）に変更、ie7もさようなら。

見た目やリンク色微調整

operaでpagenaviの部分が段崩れを起こしていた、未修正。

どこかよそ様のblogで参考になる記事など発見した際、それに絡めた記事を書くときトラックバックを使うという認識でいいのかしら。
よそ様のblogのトラックバックURLを自分のblogでどうするんだろう？
と、ここまで書いたらこの画面の下の方にトラックバック送信/トラックバック送信先:[ ]というブロックがあった。
今度やってみよう。

RSSはどうすんだろう、自分が使わないからメリットや必要性がわからない( ´･＿･｀)

SyntaxHighlighterでソースがはみ出てた
normalデザインの時Firefoxではただはみ出すだけで特に気にならなかったけど
googleブラウザだと横スクロールが発生して、背景がおかしなことになってたので、
スクロールバーが出るように設定を変える。横幅が狭すぎるんだよね。
管理画面のSyntaxHighlighterの設定からチェックボックで変更できる。

pagenaviのデザインを変更、やや丸くした。

IE7以前にcssを適用させない方法ってどんなのがあるんだろう。

それじゃ困る時が来るのかねぇ

こうゆうエントリーのカテゴリーはなんだ？

独り言？

1. 左のメニューがposition:fixed;なので、項目が増えるとアクセス不能なメニューが発生する
2. 作ってる本人が見ても根本的に文字が読みづらい。

どうしようかな、解決策が思いつかない。

1. site24x7.com
2. WebWait（動作しなかった）（safariだと動いた・・・）

どれくらい信用できるんだこれ？