こんにちは。今日はスケジュールの都合で、徹夜で実験のmartinです。徹夜してるとお腹すくなぁ。

　さて、前回に続き、カレンダーねたで。前回は、テーブルレスカレンダーということで、OL要素を用いたカレンダーを紹介しましたが、かといってTABLE要素を用いたカレンダーを疎かにするわけではありません。現状、ppBlogでは、テーブルタイプのカレンダーは、大きくボックス型とライン型とがあります。更に、ボックス型には、セレクトボックスを付けるタイプと、そうでないタイプの2種類がありますが、次バージョンでは、カレンダーの種類がぐっと増えて、6種類になりそうです。前回、ちらっと触れましたが、大きな変更点は、曜日の並びを自由に指定出来るようになったことと、後、言語の指定が出来るようになったことです。言語といっても、英語か日本語のインターフェイスか、というだけですが。デフォルトでは、日曜日が週の始まりで日本語表示となります。

　ppBlogが生成するカレンダーのソースを改めて見てみると、すっきりしない点があったり、XHTMLの書式となじんでなかったりする点があったので、PHPのカレンダーのプログラム(calendar.inc.php)を見直して大幅に書き換え、はき出すソースも従来のものと若干変わりました。

---

　カレンダーの種類は、従来通り、template.phpで指定出来ますが、およそ以下のような書式になります。

# カレンダーのタイプ (1～4はTABLE要素使用。5, 6はOL要素使用)
# [ 0:非表示，1:ボックス型，2:月日セレクター付ボックス型，3:ライン型，4:ライン型 + セレクター，
#                    5:リスト要素仕様, 6:リスト要素仕様 + セレクター]
$_CALENDAR_TYPE = 2; 
$_CALENDAR_LANG = 1;  #  [ 0:英語，1:日本語 ]
$_CALENDAR_START = 0; #  [ 0:日曜開始，1:月曜開始，2:火曜開始，etc. ]

　$_CALENDAR_LANGと$_CALENDAR_STARTという変数が新たに加わりますが、この指定は必須ではありません。

　実際の出力のイメージは、リンク先で掴めると思います。なるべく構造をシンプルにすることで、特にCSSハックを使うこともなく、各ブラウザでほぼ同じ見栄えになっていると思います。

　http://p2b.jp/demo/calendar.html

　こんばんは。常々、既成概念にとらわれない生き方をしようと思っているけど、それを実践するのはなかなか難しいなと思っているmartinです。

　さて、ppBlogでは現状、大まかに3種類のカレンダーを指定できますが、その内2種類は、TABLEタグを用いたものです。まぁ、よく見るカレンダーの構造を見ると、TABLEタグを使って表みたく作成というのは自然な流れでしょう。web界隈の最前線は追っていないので、ちょっと知るのが遅かった気もしますが、カレンダーの中には、TABLE要素を使わずに、UL要素やOL要素などのリスト要素を用いてカレンダーを生成する試みもあるようです。

　Tableless Calendar In Use

　A Semantic List-Based CSS Calendar

　一口にリスト要素を使うといっても、色々な記述があり、紹介しているサイト毎に違っています。で、未だに無視できない数のユーザーの方々がIE6を使っていると思うのですが、少なくとも上記２つのサイトは、IE6で見ると微妙に表示が崩れてしまいます（IE6,7に見られるバグで、hasLayoutをもった要素のOL要素の番号付けが無視されるというものは、有効な解決法がなく致命的）。なので、自分なりに、どのブラウザで見ても同じような見栄えになるようにと色々試した結果、以下のやつが現時点での最適解かなというのに辿りついたので、ppBlogにも採用するついでに紹介しておこうと思います。

　TABLE要素の代わりにOL要素(Ordered List)を使います。日付は時系列なものですから、順序付きリストを用いるのが良いでしょう。このテーブルレスカレンダーの特徴として挙げられるのは、ひとつのHTMLの記述で、3種類の全く違った見栄え（ボックス型・水平型・垂直型）にすることが可能ということです。この見栄えの制御には、CSSを使いますが、かなりシンプルな記述で済みます。また、IE6にも対応となると、色々ややこしいCSSハックを駆使しがちですが、CSSハックは全く必要ありません。

　では早速、カレンダーを生成するHTMLソースを見てみましょう。以下のような感じです。

 <div id="calendar">
  <ol class="wheader">
   <li>S</li>
   <li>M</li>
   <li>T</li>
   <li>W</li>
   <li>T</li>
   <li>F</li>
   <li>S</li>
  </ol>
  <ol class="weekday">
   <li class="blank"> </li>
   <li class="blank"> </li>
   <li class="blank"> </li>
   <li class="daySubmit" title="エイプリルフール">1</li>
   <li>2</li>
   <li>3</li>
   <li class="Sat">4</li>
   <li class="Sun">5</li>
   <li>6</li>
   <li>7</li>
   <li>8</li>
   <li>9</li>
   <li>10</li>
   <li class="Sat">11</li>
   <li class="Sun">12</li>
   <li>13</li>
   <li>14</li>
   <li>15</li>
   <li>16</li>
   <li>17</li>
   <li class="Sat">18</li>
   <li class="Sun">19</li>
   <li>20</li>
   <li>21</li>
   <li>22</li>
   <li>23</li>
   <li>24</li>
   <li class="Sat">25</li>
   <li class="Sun">26</li>
   <li>27</li>
   <li>28</li>
   <li class="Holiday" title="みどりの日">29</li>
   <li>30</li>
   <li class="blank"> </li>
   <li class="blank"> </li>
  </ol>
 </div>

　例として今年４月のカレンダーをあげます。曜日を表す部分(日月火水木金土)と、日にちの部分を分けて、それぞれOL要素でグルーピングしていて、各にwheaderとweekdayというクラス名を与えています。ppBlogでは、記事を書いた日付には、daySubmitというクラス名が与えられます。

　まず、通常の、よく見るボックスタイプですが、これは以下のようなCSSで実現できます。

#calendar * {
  margin: 0; padding: 0; /* まずは、マージンやらのリセット */
}
#calendar ol {
  list-style: none; /* 順序付きリストの番号を非表示に */
  width: 220px;  /* この横幅指定が一番のポイント */
}
#calendar li {
  float: left; /* これもポイント */
  border: solid 1px #aaa;
  width: 18px; height: 18px;
  margin: 2px;
  padding: 3px;
  text-align: center;
  line-height: 18px;
  font: 600 14px Trebuchet MS;
}
#calendar ol.wheader li {
  background: #c69;
  color: snow;
}

/* その他 ppBlog用のオプション */
li.daySubmit { background-color : #feff7d; }
li.Sun { color: red; }
li.Sat { color : blue; }
li.Holiday { color : orange; }
li.Today { font-weight: 900; }
li.blank { border: solid 1px #ddd !important; background: #f5f5f9; }

　ポイントは、OL要素に具体的に横幅を指定して、かつ、LI要素を左寄せにすることです。指定した幅に達すると自動的に下に流れ込みます。となると、水平タイプにするのは簡単で、幅を指定しなければ良いわけです。その際に、曜日の部分や、空白のリスト要素はあえて表示させる必要はないので、以下のような記述になります。

#calendar ol {
  width: auto; /* 幅を指定しない！ */
}
#calendar ol.wheader, #calendar ol.weekday li.blank {
  display: none; /* 非表示に */
}

　最後に、垂直タイプですが、これも簡単で、従来、OL要素は縦に展開するものです。それを上ふたつではフロート指定で横方向に伸ばしたので、そのフロート指定をしなければ、自ずから縦になります。明示するなら以下のような感じです。

#calendar ol.wheader, #calendar ol.weekday li.blank {
  display: none; /* 非表示に */
}
#calendar ol.weekday li {
  float: none; /* フロートの解除 */
}

　それでは、実際のデモを見てみましょう。

　

Tableless Calendarのデモ

　ボタンをクリックすれば、その場でひとつのカレンダーが３通りに切り替わります（最後にスタイルを適応させないボタンも付けました。OL要素のデフォルトの動作が確認できます）。JavaScriptで制御しているのですが、動的スタイルシートの適応は、動的スタイルシートの作成 で紹介した手法を用いています。

　個人的に、このOL要素を用いたカレンダー表示というのは、お気に入りなので、近くバージョンアップ予定のppBlogに組み込んでいます。後、現状、ボックスタイプでは、週の初めは日曜日ですが、これを任意の曜日を指定できようにしています。

CSS  

---

フォーラムであがっていたモブログに関してのカスタマイズチェック。例によってモブログが使えない環境にいるので、Gmailから疑似モブログ。

画像を二つ付けてみる。ひとつは、先頭に持って来て、右よりの指定。もうひとつは、記事の最後に持って来てセンタリングの指定。

ちなみに1枚目の写真は、昨年のエッフェル塔。昨年は、フランスがEUの議長国だったので、ブルーカラー。今は従来のオレンジ色に戻っている。2枚目は、ユーロディズニー。パリ郊外にある。ディズニーランドは日本では行ったことがなかったので、これが初。この日は常に気温零度前後、雪もちらついてものすごく寒かったけど、急降下系のアトラクションは良かった。

　ppBlogバージョン1.7.7から採用している機能のひとつに、コメント通知のメールからダイレクトでログイン出来てコメント返信できるというのがあります。その際に、リンクのURLに付加する文字列が今いちランダムになっていないので、ちょっとアルゴリズムの見直しをしてみました。時限性を持たせるために、UNIXのタイムスタンプから生成したハッシュをリンクのURLに付加しているのですが、タイムスタンプをチェックしたいので、復元可能なものであることが必要です（一方向で良ければ、sha1関数 を使えば良いけどニーズに合わない）。

　単純に、UNIXのタイムスタンプをppBlogで用意している暗号化関数my_encrypt()に通すと、タイムスタンプの性質上、最後数桁しか変化せず、それに対応して生成されたハッシュも下数桁しか変化しません。まぁ、これはmy_encrypt()の性能の問題なんですが、この部分はそんな高性能でなくてよいし、過去の資産との互換性も考えると my_encrypt()はいじりたくないです。

$unix_time1 = 1234560000; // 10桁のUNIXタイムスタンプ
$unix_time2 = 1234567890; // 上と下4桁が違うだけ
echo my_encrypt($unix_time1); // 結果は、VwoLV1MOAwhVBg
echo my_encrypt($unix_time2); // 結果は、VwoLV1MOBABcBg

こんな感じでえらく似通った文字列になる　なので、このタイムスタンプを逆順にして更に基数変換すればよいかなと。逆順にすれば、大きく数値が変動します。そこで、文字列を逆順にする関数はないかstr_reverseという関数名で探してみましたがなさそうです。なので、

$unix_time_reverse = join("", array_reverse(preg_split("//", time())));

という力技で暫くローカルのテスト環境で動かしていたんですが、いやきっとあるはずだと、もう一度マニュアルを探してみたらありました。

$unix_time_reverse = strrev(time());

strrev という名前でしたか･･･。

　実は、単に逆順にしただけでは、my_encrypt()のアルゴリズムからしてそう大きな変化は望めないので、更に base_convert() 関数を利用して10進数から2進数に変換します。decbin でも行けるかなと思ったんですが、扱える最大の数が10 進数の4294967295とのことで、これは使えない。

$unix_time_binary = base_convert(strrev(time()), 10, 2); // 10進数を2進数に変換

　これで最初に挙げた例だと、

$encoded1 = my_encrypt(base_convert(strrev("1234560000"), 10, 2));
 // 結果は、VwgIUlcJAglUBgEJU1RUUgdRVAk
$encoded2 =  my_encrypt(base_convert(strrev("1234567890"), 10, 2));
 // 結果は、VwkJU1cIAglVBwEJU1VVUgZRVQgJVgIEVFcGAwhT
$encoded3 =  my_encrypt(base_convert(strrev("1235064688"), 10, 2)); // 別の例
 // 結果は、VwgIU1YJAwhVBgAJUlRUUgZQVAgIVgMFVVYHAwhSUAdWCQ

まぁ、最初に比べるとだいぶマシかなと思います。さて、この復元ですが、逆の操作をするだけです。

$decoded = strrev(sprintf("%010s", base_convert(my_decrypt($encoded1), 2, 10)));
 // この場合は、1234560000 を返す

これで、元の10桁のタイムスタンプを取得できます。ひとつ注意する点は、順序を逆にした文字列を戻す際に、元のタイムスタンプによっては逆順にした文字列の先頭がゼロになる場合があるということです（上の例だと反転した0000654321は654321と解釈される）。なので、sprintf 関数を用いて、ゼロで10桁になるように埋め合わせをしておきます。

sprintf("%010s", "654321"); // この結果は、0000654321

　実際の実装(?)としては、これらとsha1関数を組み合わせたりして、長い文字列を生成してます。

携帯を試せる環境にいないのでGmailから。という文字列を打ったと想定して。