当サイト(ブログ含む) のドメインを変更しました。2019/02 までは自動転送されますが、それ以降は旧ドメインではアクセスできなくなります

本ブログの新アドレスは blog.alphaziel.info となります

2018/08/28(火) 追記

DNS 逆引きでホスト名が不明な IP ドレスはアクセス拒否するよう設定致しました。該当する方は DNS サーバー設定確認をお願いします。そもそも、既にこのページ自体が見れないから、この告知は意味を成しませんね (・ω<) てへぺろ

I changed the domain of this site (including blog). Until 2019/02 will be forwarded automatically, but after that it will be inaccessible in the old domain

The new address of this blog will be blog.alphaziel.info

2018/08/28 (Tue) Additional NOTICE

We decided to deny IP dress whose host name is unknown by DNS reverse lookup. Please check the DNS server setting if applicable. In the first place, since this page itself can not be seen already, this announcement does not make sense (· ω <) Tohpeiro

JUGEMお知らせブログ | 独自タグ一部変更のお知らせ に記載されている様に、私の左斜め下を行くような改悪です。何故この様な事を行うのか理解も納得できない…既存の独自タグを変更せずに独自タグを加えるという事なら理解も納得もできるが、もっとも重要である記事本文に置き換えられる ¹ 独自タグを変更するとは…('A`) ²

幸い、私のテンプレートではレイアウトが崩れる事はなかったのですが…³ テンプレート制作者、ブログ利用者、またそのブログ利用者もテンプレートを改造して利用している方などの影響を及ぼす範囲、またレイアウトが崩れていないかなどの各作業に取られる時間的コスト等を考える事はできなかったのでしょうか？

1. 因みにこの独自タグ、記事の続きがあると空のアンカー要素が記事本文の後ろに勝手に加えられます。てすとのたいとる を参照。HTML ソースを見れば解ります
2. この件に関しては既にサポート側に問い合わせているが、どの様な返答が来るか…
3. 全ての記事を確認はしていません

コード実行結果画像 ¹

某掲示板のスレにやっつけで、矩形だけでレーティングの設定を行う Panels UI の TF を挙げたんですが、その時に書いた TF のコードをもっと汎用的にしてみました

線描画のみなので、画像などのリソースは必要ありません。…が、下記のコードを見てお解りの様に美しくないです。² TF はループインストラクションがないので、どうしてもこうなってしまいます。あとは、レートの設定を行う事はできるんですが、該当のタグを消す事はできません

1. // Global
2. // padding (ボタン間の隙間)
3. $puts(m.p, 1)
4. // start at position (左上隅の描画開始位置 m.l=左 m.t=上)
5. $puts(m.l, 15)
6. $puts(m.t, 15)
7. // 矩形の幅 (ボタンの幅)
8. $puts(w, 20)
9. // 矩形の高さ (ボタンの高さ)
10. $puts(h, 5)
11. // 通常表示時の線の色
12. $puts(c.n, 212121)
13. // レイティングが設定されていた時のボタン全体の色
14. $puts(c.o, 212121)
15. // マウスポインターをボタン上に重ねた時のボタンの枠線の色
16. $puts(c.h, 808080)
17. // PerTrack
18. $rectabs(0, 0, %_width%, %_height%, $c(220,220,220), null)
19. $select(%rating%,
20.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*4}+{$get(m.p)*4}), $get(w), $get(h), $get(c.o), null),
21.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*4}+{$get(m.p)*4}), $get(w), $get(h), $get(c.o), null)
22.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*3}+{$get(m.p)*3}), $get(w), $get(h), $get(c.o), null),
23.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*4}+{$get(m.p)*4}), $get(w), $get(h), $get(c.o), null)
24.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*3}+{$get(m.p)*3}), $get(w), $get(h), $get(c.o), null)
25.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*2}+{$get(m.p)*2}), $get(w), $get(h), $get(c.o), null),
26.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*4}+{$get(m.p)*4}), $get(w), $get(h), $get(c.o), null)
27.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*3}+{$get(m.p)*3}), $get(w), $get(h), $get(c.o), null)
28.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*2}+{$get(m.p)*2}), $get(w), $get(h), $get(c.o), null)
29.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*1}+{$get(m.p)*1}), $get(w), $get(h), $get(c.o), null),
30.   $rectabs($get(m.l), $eval($get(m.t)), $get(w), $get(h), $get(c.o), null)
31.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*4}+{$get(m.p)*4}), $get(w), $get(h), $get(c.o), null)
32.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*3}+{$get(m.p)*3}), $get(w), $get(h), $get(c.o), null)
33.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*2}+{$get(m.p)*2}), $get(w), $get(h), $get(c.o), null)
34.   $rectabs($get(m.l), $eval($get(m.t)+{$get(h)*1}+{$get(m.p)*1}), $get(w), $get(h), $get(c.o), null)
35. )
36. $textbutton($get(m.l), $get(m.t), $get(w), $get(h),
37.   $rectabs(0, 0, $get(w), $get(h), null, $get(c.n)),
38.   $rectabs(0, 0, $get(w), $get(h), null, $get(c.h)), 'Custom Info/Rate 5', tooltip, 'rate 5')
39. $textbutton($get(m.l), $eval($get(m.t)+{$get(h)*1}+{$get(m.p)*1}), $get(w), $get(h),
40.   $rectabs(0, 0, $get(w), $get(h), null, $get(c.n)),
41.   $rectabs(0, 0, $get(w), $get(h), null, $get(c.h)), 'Custom Info/Rate 4', tooltip, 'rate 4')
42. $textbutton($get(m.l), $eval($get(m.t)+{$get(h)*2}+{$get(m.p)*2}), $get(w), $get(h),
43.   $rectabs(0, 0, $get(w), $get(h), null, $get(c.n)),
44.   $rectabs(0, 0, $get(w), $get(h), null, $get(c.h)), 'Custom Info/Rate 3', tooltip, 'rate 3')
45. $textbutton($get(m.l), $eval($get(m.t)+{$get(h)*3}+{$get(m.p)*3}), $get(w), $get(h),
46.   $rectabs(0, 0, $get(w), $get(h), null, $get(c.n)),
47.   $rectabs(0, 0, $get(w), $get(h), null, $get(c.h)), 'Custom Info/Rate 2', tooltip, 'rate 2')
48. $textbutton($get(m.l), $eval($get(m.t)+{$get(h)*4}+{$get(m.p)*4}), $get(w), $get(h),
49.   $rectabs(0, 0, $get(w), $get(h), null, $get(c.n)),
50.   $rectabs(0, 0, $get(w), $get(h), null, $get(c.h)), 'Custom Info/Rate 1', tooltip, 'rate 1')

ボタンの表示順は上から 5, 4, 3…1 と 5段階に表示しています。基本的に太字部分の変数を適切な値に変更を行う事によって動作します。$textbutton() のパラメーター command はメニューを呼び出していますが、これも適切な値に変更します

ボタンの並び順は縦方向ですが、$textbutton() や $rectabs() の座標パラメーターを変更する事で横方向にボタンを描画させる事もできます

1. 掲載しているスクリーンショットの鏃の様なものは私が普段使用しているマウスカーソルです。ツールチップテキストが IrfanView のスクリーンショット機能で撮れていません…('A`)
2. $textbutton() や $rectabs() を $imagebutton(), $imageabs() に変更しても、そんなに変わりません。TF とはこんなもんです

WWW ブラウザを Firefox 2 に変更してからブックマークなどで favicon.ico が表示される様になったのですが、自分のブログにも favicon.ico を設置したいと思いましたが、以下に示す様な JUGEM 側の制約があるので、ちょっと考えてみました

• サーバーにアップできるのはフォームから入力する記事とテンプレート、それと画像ファイル
• アップできる画像ファイルは PNG, JPEG, GIF の 3つの形式のみ

この件で検索すると、かなりの対策案がヒットするのですが、どれも同じような対策案ばかりで捻りがありません。結局のところ、他のレンタルサーバーを借りてそこを参照するという方法ばかり…実際の所、どの様な仕組みで UA は favicon.ico を読み込んでいるのか？ 多分以下のような方法だと思うが…

• ドメインのルートディレクトリから favicon.ico を取得
• HTML の link 要素の href 属性の値から favicon.ico を取得

読み込む順番などは調べてないので解りません…('A`)

HTML に記述する場合は以下の様に head 要素の直接の子要素として記述します。XHTML の場合は以下の様に記述します

<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico の URI" />

HTML の場合は以下の様に記述します

<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico の URI">

rel 属性の値は icon, shortcut icon どちらでもいい様です

ん？ href 属性の値は URI…URI だから URL も含んでるよな…んじゃぁ URL スキームだと何でもいいんじゃないか？だったら data: スキーム ¹ でも表示できなければオカシイんじゃないか？

そう思い、早速、適当に用意したアイコンを URL エンコード して HTML ヘッダの link 要素を以下の様に追加して記述

<link rel="icon" type="image/vnd.microsoft.icon" href="data:image/vnd.microsoft.icon,%00%00%00…(長ったらしいので省略)" />

CTRL + R を押してブラウザをリロード…

favicon.ico の例 ('A`)

ちょッ…コレ…ほんとに表示されたよ…('A`) このままではアレ <sup>2</sup> なんで表示できる事が確認できたので、取り敢えず削除しました。現在はまともなアイコンが表示されているはずです。以上の方法だと HTML に埋め込める事ができ、サーバーに対しても接続リクエストが増えないので良いと思います…が！しかし、困った事に IE は URL の data: スキームを理解しないので表示されません…('A`) 今の所、私が検索して調べてみたり、やってみて解った事を纏めてみました

• link 要素の rel 属性は shortcut icon よりも icon と記述したほうが良いらしい ³
• link 要素の type 属性に指定する MIME タイプは image/x-icon よりも IANA に登録されている image/vnd.microsoft.icon の方が良いらしい ³
• link 要素の href 属性の値のファイル名は favicon.ico でなくてもよい ³
• Firefox では ICO 形式に加えて PNG, GIF 形式も表示できるらしい ³
• IE は URL の data: スキームを解釈しない
• Opera (9.25 で確認しました) は URL の data: スキーム中の MIME タイプを image/x-icon としなければ表示しない

記事を書いている最中、確認作業なんかも行いながら気付いたんですが、最初に書いた JUGEM の制約もクリアできそうな感じですね…めんどくさくなってやってませんが…('A`) その内、暇を見つけて確認作業を行いたいなと思ってます…その前に favicon.ico の表示自体をやめそうですが…('A`)

もともと、この機能に関しては IE は一番最初に実装したのにも関わらず、現在の所は機能、実装においては Firefox 2 が最も良いという皮肉な事になっている様です…

1. RFC2397 を参照 (私的和訳らしい…)
2. 私のサイトにはこの様なファンシーかつキュートなアイコンは似合わないと思います…('A`)
3. Favicon - Wikipedia を参照

Firefox 2.0.0.11

Opera 9.25

Internet Explorer 6

前回の記事で述べたように WWW ブラウザ の乗り換えと並行して、此処のテンプレートを新規で作成し直しました。何度か本サイトを訪問して頂いた方は気が付いたかもしれませんが…先日までは公式テンプレートを改造したものを使用していたのですが、レイアウトや文書構造を見直してみると、一から作った方がいいと思い、現在のテンプレートを作成しました。テンプレートの仕様はこのサイトの仕様にもなります。仕様は以下のようになっています

• 文字エンコードは EUC-JP ¹
  本来ならば、一般的な UTF-8 (Unicode) で記述したいのですが JUGEM の仕様上できない様です…
• 文書型定義 (DTD) は XHTML1.0 Transitional DTD
  とてもじゃないが XHTML1.0 Strict DTD では lint ² が通らない。サイトの機能上、必要な要素や属性が廃止されている為 Strict よりは要素やその属性の使用が緩和されている Transitional となっています
• 視覚 UA を対象にした CSS はレベル 3 まで使用
  視覚効果を狙っただけのものなので、内容自体には差違はありません。現在 Working Draft ³ の段階ですが CSS は試験的にレベル 3 も使用しています

  ---

• サポートしている UA
  サポートしている UA は Firefox 2, Opera 9, IE6 辺り ⁴ です。他の WWW ブラウザでは試していません。基本的に確認作業は Firefox 2 で行い、Opera 9, IE6 と順に確認しています。CSS の実装状況が絶望的な IE についはレイアウトが致命的に崩れない限りは切り捨てていきます
• CSS において使用している単位
  使用している単位は全て相対単位を使用しているので WWW ブラウザのウィンドウのサイズを変更してもみっともなく水平スクロールバーが現れたりする事はないはずです ⁵
• JUGEM の仕様上、発生してしまう lint のエラー
  JUGEM のブログは HTML テンプレート内に記述した独自タグを動的に置き換えて生成しています。その生成する内容に lint でエラーが発生する要素の記述がある為、これは避けようができません ⁶

  ---

• 2 カラム構成
  2 カラム構成でもご覧の様に記事が左カラム、メニュー、広告などは右カラムになっているので、記事主体の構成となっています
• Javascript に依存していない
  レイアイト、内容表示を行うにあたって Javascript に依存していないので Javascript を無効にしていてもブラウジングできます
• 外部リソース未使用
  テンプレート部分において画像などの別リソースが必要となるようなデザインはしていないので、ブラウジングが軽く、素早く表示される事を念頭に作成

大雑把なレイアウトはこんな感じ…

• ヘッダー
  ブログ名、ブログの概要、水平カレンダーなどのヘッダー部分
• 左右のカラムをラッピングするブロック要素
  • 左カラム
    ページナビゲーション、記事本体、コメント記入、トラックバック
  • 右カラム
    各種メニュー、広告
• フッター
  ブログ全体でのページナビゲーション、コピーライト、サムライト表示

如何に今まで使っていたテンプレートがやっつけ作業の改造ものだという事が今回の作業で解りました…('A`) テンプレートで使用している CSS などは今後記事にしていきたいと思います

1. IANA character-sets を参照
2. Another HTML-lint gateway を参照
   lint とは糸屑、埃などという意味。つまり HTML の埃をチェックします
3. CSS 3 - W3C Working Draft を参照
4. 掲載しているスクリーンショットが各ブラウザでの結果です。ダウンロードリンクは右カラム recommends の各種ボタンからジャンプできます
5. border 関係のプロパティなど、ごく限られた部分で px 単位を使用しています
   CSS の仕様だと px は相対だと記述されていますが、この単位は出力先依存です。参考: CSSの単位
   あと IE でウィンドウサイズの横幅を縮めていくと右のカラムがあっさりと下に落ちてしまいます…('A`) これは IE の挙動がオカシイので私のせいではありません
6. この件に関しては運営サポート側に要望として挙げているのですが…('A`)

Firefox 2.0.0.11

今まで使っていた IE コンポーネントブラウザからオサラバし、Firefox 2 へ移行しました。移行の最大の要因はやはり CSS の実装状況。コレに尽きます。IE は最もシェアがある WWW ブラウザなのに、最も CSS の実装状況が乏しいという状況に堪えられなくなったのと、本格的に此処のブログのテンプレートをなんとかしようと思い、テンプレートの編集と並行して移行作業も行いました。この記事はその時のメモとして書き残しておくものです

インストールはいたって楽でした。IE のキャッシュやクッキー、ページ閲覧履歴、ブックマークなどを勝手に取り込んでくれます。ただ、私の場合は Sleipnir 1.66 という IE コンポーネントブラウザを使っていたのでExtension Favorites Editor 1.12 を使って Sleipnir のブックマークをエクスポートし、Firefox 2 のブックマーク管理からインポートしました。これで、大まかな移行作業は終わり、如何に今まで以上に使い勝手を良くするかが課題です…

検索して調べみると user.js と userChrome.css で大体の所はカスタマイズできる様です。前者は主にオプションダイアログではできないディープな部分の設定で、後者は UI のカスタマイズを行います。私は実は Firefox を使うのは全く初めてというわけではなかったので、これらのファイルはテキストエディタを使用して編集しました。GUI にてこれらのファイルを編集する Add-ons もあるらしいです。user.js と userChrome.css はファイル名のプレフィクスからも解るように、Javascript と CSS ファイルです。ただ、user.js の関数名や変数名、userChrome.css のクラス名等は独自なので、これらの名称や内容の意味などの情報を得るには Knowledge Base - MozillaZine Knowledge Base や DOM Inspector などを使って調べます。DOM Inspector は Firefox に同梱していて、カスタムインストールでインストールする事により、選択インストールできます

カスタマイズ情報や Tips などはおいおい記事にしていきたいと思います