meta 要素の name 属性値 keywords の内容を、記事単体表示の場合には可変にしてみました。ある種実験的な試みなので、内容にはまったく影響ありません…('A`)

バグ発覚…直ちに修正…('A`) みっともない PHP エラーを御覧になった方、ごめんなさい…('A`)

この件で検索を行っても CSS を PHP のヒアドキュメントとして、記載する方法が見つからなかったのでメモとして記事にします

CSS を記載する方法としては style 要素の中に記述するか、link 要素の中にスタイルシートの URI を記載して UA に読み込ませると言う 2つの方法がありますが、今回、ここで記載するのは後者の方です。何故この様な事を考えたかと言うと、いい加減此処の超カオス気味のスタイルシートを何とかしたいと思った次第です

PHP の公式マニュアルによると PHP: 基本的な構文 - Manual たいていの場合、PHP は HTML ドキュメントの中に埋め込まれます と記載されています。たいていの場合？ では、別に HTML でなくてもいい訳です。参照先にその具体例が記載されています。そこで、まず行ったのが HTML の head 要素内の link 要素を以下の様に修正

<link rel="stylesheet" type="text/css" href="filename.php" media="all" />

スタイルシートを指定しているファイルのサフィックス部分が php になっている所がポイント。で、実際のスタイルシートファイル(.php) は以下の様に記述します

@charset "UTF-8";
<?php
  $color = 'pink';
  $background = 'green';
?>
body {
  color: <?php echo $color; ?>;
  background-color: <?php echo $background; ?>;
}

ブラウザをリロード行っても…真っ白けです。どぎつい配色になるはずなんですが、これはスタイルシートが適用されていないようです。つまり、UA がスタイルシートとして認識しなかったようです。そこで Proxomitron ¹ のログウィンドウを開いて、もう一度リロードを行います。案の定 PHP が HTTP レスポンスヘッダー Content-Type のメディアタイプに text/html として返しています。これが原因の様です。つまり、スタイルシートならばメディアタイプを text/css として返さなければならないのに UA に対して HTML 文書ファイルですよ。と、返してしまっている訳です。これは、PHP の設定 default_mimetype が text/html となっているので正常な動きです。そこで、スタイルシートファイル(.php) を以下の様に修正します

<?php header('Content-Type: text/css; charset=utf-8'); ?>
@charset "UTF-8";
<?php
  $color = 'pink';
  $background = 'green';
?>
body {
  color: <?php echo $color; ?>;
  background-color: <?php echo $background; ?>;
}

どうってことはありません。header 関数にてデフォルトのヘッダーを置き換えてやっているだけです。ブラウザを再度リロードするとスタイルシートが認識されました。本来ならば、ここで終了なんですが、link 要素のファイル名の指定が php となっているのがどうもかっこよくない。そこで、HTTP サーバーのアクセス制御ファイルを以下の様に記述します ²

<FilesMatch "filename\\.css">
  SetHandler application/x-httpd-php
</FilesMatch>

あとは、HTML の head 要素内の link 要素のファイル名指定部分の php を css に変更。実際のファイル名も css に変更。実際にブラウザをリロードしてアクセス制御ファイルが効いているか確認して終わりです

これには色々と応用が効きます。各 UA に対応させる為に UA のバグを逆用して苦労してスタイルシートの読込みの振り分けなどを行っている様ですが、PHP 変数の $_SERVER["HTTP_USER_AGENT"] で判定を行えばいいのです。³ 他には、色を容易に変更できる様に PHP の変数としておけば、変数の値を変更するだけで配色の変更が可能です。などなど…PHP コードが記述できるので、良いと思います ⁴

1. 私が常用している HTTP フィルタリングソフト。参照: Proxomitron-J
2. Apache HTTP Server の場合
3. $_SERVER["HTTP_USER_AGENT"] は UA によっては偽装できるので完全に振り分けることは不可能です
4. PHP が動かせて、なおかつ、HTTP サーバーアクセス制御ファイルが置けない環境じゃないと意味ありませんが…

またもや PHP でブログパーツなるものを作ってみました。サイドバーに表示されているお天気アイコンがそうです

いい加減、カオス気味の此処のスタイルシートを何とかしないと…('A`)

標準の table 要素で行うカレンダーは気に入らないので PHP で自作しました。表示フォントはちょっとオサレに Georgia を使っています。Windows, Mac の人もオッケーだと思います

話はチョット変わって、此処のブログシステムの事ですが、フッターに表示している様に WordPress ¹ を使用しています。先の記事で、記事の移行はあっさりと終ったと書きましたが、実はあの後に色々とありました…('A`)

1. 記事の中の div 要素がことごとく p 要素になってる！
   

   ところが phpMyAdmin ² にてデータベースの中身を除くと、ちゃんと div 要素としてデータに入っています…WordPress Japan のフォーラムを検索すると、こんな記事が…WordPress Japan :: トピックを表示 - 記事投稿でCSS....【エディタの不具合？仕様？】・・解決 と言う訳で、早速ダッシュボードのユーザー設定にて ビジュアルエディタを使用する のチェックを外して、この問題は解決

2. ピリオド(.)が 3つ連続してあると全角の 3点リーダー(…) に置き換わってしまう
   

   データベースの中は置き換わっていないので、表示する際のフィルターの問題でしょう。それにしても、此れは大きなお世話。この問題は解決していませんが、時間ある時に調べてみます

3. blockquote 要素の中に注意！
   

   この要素の中に以下の文字が入っていると、表示の際に勝手に別の文字に置き換わってしまいます

   1. シングルクォート(')
      全角っぽいシングルクォートに勝手に置き換わる
   2. ダブルクォート(")
      全角っぽいダブルクォートに勝手に置き換わる
4. phpMyAdmin のインポートしたデータに改行を入れた所が \r\n という文字列に置き換わっている
   

   これ、表示の際に復帰改行に変更しているんですが、文字コードで言うならば、0x0d 0x0a を出力している為、UA によっては br 要素と同じように復帰改行してしまう…

上記の 1番以外の問題は恐らく表示する際のフィルター問題でしょう。時間ある時にソースコードを追っかけて調べてみたいと思います。取り敢えず、今は文字参照やキャラクターエンティティを使用して回避しています。改行の問題も文章間に改行を入れないようにして回避しています。いずれも運用で回避できる問題ですが…

1. WordPress を使用しています。PHP で書かれているので、私にとっては改造が楽です
2. MySQL をブラウザで管理できるように PHP で書かれた MySQL 管理ツールです。多言語サポートしています。参照 »» phpMyAdmin | MySQL Database Administration Tool | www.phpmyadmin.net

本日、退院しました。色々と書きたいネタがあるので、整理しつつ順次更新していきたいと思います

11月 27日に手術がありました。無事終了。今年中に退院できるか微妙なところ

明日から入院なので、その為の準備でまともに更新できません

912T からの投稿テストです。入院している間は暇を持て余すと思うので…

ちょっと追記。携帯電話からの投稿は Web と メールという 2通りの方法があるんだな…モブログ? 何だろう？('A`)

手術する為、入院するするので 22日からは暫く更新できません。

関係ないけど Google AD 取得して設定したんだが、広告が表示されない…なんでだろう…まぁ、時間取れたら調べますかね

記事のネタには事書かないんですが、如何せん記事やそれに付随するリソースの作成する時間がとれません…('A`)
今週末は Apache2, PHP5 のバージョンアップと結構時間が取られました。この辺の事もおいおいと記事にしていこうかと思います

ここのブログに引っ越しして当日早々、間違ってテンプレートを公開してしまった…('A`) それも、2度も。 まぁ、それはともかく、テンプレートを公開するにあたって色々と情報を整理してまとめなければなりませんので、 項目別にまとめてみました

コンセプト

• XHTML 1.0 準拠
  目標としては w3.org の validate が通る事。これは既に通過しているので問題無し。 JUGEM 独自タグが生成する HTML はどうしようもないが…('A`)
• CSS 2.1 準拠
  目標としては w3.org の validate が通る事。これも既に通過しているので問題無いが、CSS では特に 2.0 や 2.1 を 意識したコーディングを行っていない。何故なら対応ブラウザがないから
  
• JavaScript に依存しない
  よくサイトを閲覧している時に感じるのが、ブラウザ側で JavaScript が有効でないと情報の閲覧がままならないという事。 JavaScript が有効ならばこういう事もできますよ。というのは別に構わないが、これを前提としたデザインはしない。 全てのサイト閲覧者が JavaScript を有効にしている訳ではないのだから
  
• 画像などの外部リソースは使用しない
  あくまでもテンプレート部分に置いて別リソースが必要となるようなデザインはしない。 とにかくブラウジングが軽く、素早く表示される事

特徴

• XHTML 1.0 準拠
• CSS 2.1 準拠
• JavaScript が無効でもデザインは基本的に変わらない
• 画像未使用(テンプレートのみ)
• 使用配色は 2色(アンカー、ハイパーリンク部分は除く) なので、配色変更が容易
• 相対単位を用いているので閲覧者は好みのフォントサイズで閲覧できます

文書(HTML) 構造

う～ん…こうして見ると、内容は違うのに全く同じスタイルを適用している所があるな…この辺は要検討です

後は、設定方法、免責事項を等を考えればいいですね…近日中に公開…できると、いいナァ…('A`)

ここの blog のテンプレートがようやく満足の行くレベルにまで編集終了した。 Another HTML-lint でチェックしながら編集してました。 おかげで valid XHTML1.0/CSS 2.1 のアイコン(右サイドバーの下に表示されてます) が使えるようになった。 JUGEM 独自コードの所はどうしようもないが…

ついでに Another HTML-lint を自宅サーバーでも動く様にインストール＆設定しました。 既にサーバーには apache2 と perl5.8 が入っていて稼働しているので、インストールと設定はあっけなく終了。 これで、ローカル環境でも Another HTML-lint が使えます

SoftBank 912T
メインメニュー

以前 に画面デコを作っている合間にさらっと、メインメニューを作ってみましたが、 設定している間により詳しい事が解ったので、前回の情報とまとめて書いておきます

• メインメニューはそれぞれ背景、アイコンの 2つのリソースで成り立っている
• 各アイコンのサイズは W80 x H78
• 背景画像のサイズは W240 x H312
• 背景にαチャンネル .png 画像を設定しても透過しない。白くなる
• アイコンは .png .gif 共に透過画像OK
• アイコンにαチャンネル .png 画像を設定できるが、912T で認識できるのは単色透過なので汚くなる
• 912T 本体で行うアイコンの切り取り処理時は背景が白くなるので、白色系のアイコンの切り出しは困難になる
• アイコンで指定した .gif 画像はアニメしない。最初の 1コマ目だけ表示
• プリインストールされているメニューファイル(.tmf) の仕様は公開されていないのでユーザーはカスタマイズできない

と、言うことなので、前回作ったメインメニューに改良を施してみました。 912T で 1つずつアイコンを切り出して使う事を前提にしています。切り出し処理の際は何故か背景が白くなります。 この白くなる背景色もユーザーは任意に選択する事ができず、固定されています。なので、アイコンは黒系で統一しています。 背景画像は適当なモノを用意して設定してください

右の 2つの画像はアイコンを切り出して使う事を前提にしています。透過画像なので、メインメニュー背景を好きなモノを設定できます。 Windows 風味の方は、256色 gif に変換しているので多少汚いです	メインメニュー用アイコン 1.02	メインメニュー用アイコン Windows 風味 1.00
右の画像は非透過画像なので、アイコンを切り出して使う事は考慮していませんが、 メニュー背景も真っ黒でも構わない場合はこの画像からアイコンを切り出して使う事もできます。 png画像なので、上記の Windows 風味アイコンよりは綺麗な画像となっています。		メインメニュー用背景 Windows 風味 1.00
一応、メニュー背景用画像も一枚試しに作ってみました		メインメニュー用背景

画像などのリソースも含めて、移行は全て完了。以前の所にはもう新規投稿はしません。ここ(JUGEM) はテンプレート編集がいいです。カスタマイズの幅が広いので、色々弄くってます。弄くってるうちに間違って、テンプレート公開しちゃったりしましたが…

テーマなんて機能も新しくできたみたいです。そのテーマ自信もユーザーが作れるらしいので、携帯電話のテーマがあったので、今までの携帯電話関係のコンテンツをそちらに設定して見ようかと思います

テンプレート編集において、html 内に JUGEM 独自のコードを書き加えることによって、様々な情報を html 内に入れることができます。バグもあるようですが…

今の所の不満は画像関係。1つ辺りの画像サイズが 100KB(有料プランだと 300KB) と少なめで、総容量もそんなに多くないのが難点。デフォルトのサムネイル画像もなんかしょぼい。その場合は、サムネイル用の画像をアップロードして使えばいいが、また、それで容量が取られるというのも…('A`)