マァ普通の人は簡単にamazonのを使っているのだろうが、e-hon信者としてはそのようなものは使いたくない、しかしe-honはブログパーツを準備していない…
　ので今まで掲載ページや画像のurlをコピペするなど手作り(?)でやっていたのだけれど、いい加減面倒になってくる(ヲイ)
　で、何気なく「e-hon ブログパーツ」でぐぐってみたら…出てきましたねぇ、書籍紹介ブログパーツ ヨメレバというのが。
　e-hon以外にも大抵の書籍通販はフォローされているようだ。難点はアフィリエイトに登録せにゃならん事で、しょうがないからこの為にしましたよ。
　では早速使ってみよう。

　作業が開始されたというニュースからはや数年が過ぎ、htmlが遂に15年振りに改訂された。
　と言っても、勧告されるには主要なブラウザがHTML5に対応済みになっていなければならないので、既にHTML5の世界に入り込んでいる…はずである。
　さて、今回はいろいろと大きな機能追加があったが、一方で文章構造を示す要素が洗練されたのも特徴である。ページ構成が今までdivタグに名前付けてやっていたのがそれぞれ意味付けされたタグができて(header.sectionなど)わかりやすくなっている。ときにこの日記はtdiaryを使っているのだが、HTML5への対応は進むのだろうか、期待して待て？

　前から使っていた部分もあったのだが、この日記のあちこちにCSS3による表現を取り入れてみた。…のだが。
　ネックはIEだと(特に7までは)CSS3への対応がイマイチなところ。結局かえって見づらくなってしまう感が。
　そこでたった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIEという技を使ってみた。
　…うまくいってる部分もあり、いかない部分もありとなかなか一筋縄にはいかなさそうだ。
　マ、実際のところこのページ見ているのはぱぱネットの皆様ぐらいなので、そこで使われているブラウザに対応していればいいだけの話ではある。

　Webのデザインを行う上で、守らなければならない約束事がいくつかある。その一つが「横スクロールさせない」である。
　文章を読むとき、縦スクロールであれば普通に下へ向かってスクロールバーを動かせば文章が読める。ところが横スクロールがあると1行読む度にスクロールバーを左右に動かさなければならなくなり非常に読みづらくなる。(最もそこまで行くと今度は1行の文字数の掟に引っかかってくる。人が読みやすい文字数は大体1行40文字前後なんだそうだ)そんな訳でどのページも普通は(どうしてもサイズの大きな画像を掲示するなどの特殊な事例を除いて)大体640～1024pxぐらいを想定し画面をデザインしてきた。
　ところがここに来て困った事態が生じた。言うまでもなくスマートフォンの爆発的普及である。こいつはかなり賢く(?)画面の横幅は320～480pxといったサイズなのだが、PC用画面を縮小して全体を表示してくれる。ところがそのままだと文字が小さすぎて読めない、さりとて拡大すると横スクロールを強いられる。さてどうしたものか、というのが前回までの話。
　で、くだんのぱぱポータル。まずはHPタイトルと内容を二列に分けて表示していたのを並列に変更、これでついでに今までtableタグをレイアウト用に使用するというよろしくない状態も解消できた。
　次にPC用では本体とサブの2カラムになっている画面、これをスマホではサブの方を本体の下にいわゆるカラム落ちするように画策。しかしここで引っかかる。単純に各カラムの幅調整だけで住むかと思ったがそうはいかなかった。
　ここでぐぐってみたところ、スマートフォンでも見やすい web ページを作るために media queries を使うという選択という話が。要は表示された画面の幅にそれぞれ合わせた形でcssでカラムと幅の設定を行おうというもの。ナルホド。
　これで解決…と思ったら、依然スマホでは2段カラム状態で表示されたorz。どうやら縮小することの方が優先されているようだ。
　さらにぐぐる。どうやら縮小表示させない呪文をヘッダ部分に入れとくといいようだ。参考にしたのはこちら。その他に画像を縮小する話も載っているので参考に
　そして…
　びゅーちふる(笑)
　ちなみにこの辺のテクニック、書かれた時期を見ると一昨年から最近にかけて、やはりスマホの普及に合わせて需要があったと言うことのようで。
　さて、この技、皆々様が同様に悩んでいるtdiaryの方でも使えるのだろうか。自分の日記は何故か幅調整だけでうまく行ってしまったので試していない(笑)

　スマホからアクセスすると、画面が全体的に縮小されてしまい、文字が見づらい(というか見えない)ので、スマホにも対応した画面構成にしようとしたのだが…。
　最初に作ったのが随分前になるので、ソースを今見ると、例えば非推奨タグ(html5では遂に廃止される)fontタグやcenterタグを使っていたりと、不都合な部分が多々ある。これらも一気に解消…といきたいのだが、ここで問題になるのが携帯のimodeだと、上記タグは認識するがcssはまるで認識してくれないという仕様。
　要はパソコン用.スマホ用.携帯用と3種類作ってアクセスしてきたキャリアで振り分ければいいのだが、そこまで準備するのは大変だ。
　結局は最大公約数的なものに落ち着くだろうが、しばらく試行錯誤が続く。

　あいあん氏が新刊netのブログパーツについて悩んでいるようだ。
　検証してみたが、tDiary中にパーツを置いてIEで表示させた際に起こる特有の現象のようだ。これはブログパーツ側で対応してもらうしかないような。
　むしろ鯖神様も苦慮していたようだがスマートフォンで表示した際のレイアウトの壊れの方が深刻なようだ。
　原因は単純にカラムを構成しているdivタグのwidthプロパティがパーセントで指定されているからのようだ。
　ナビゲーション部分のdivタグだけでもピクセルで幅指定すれば、floatプロパティの特性からメイン部分の後に段落ちして表示されるようになると思う。
　（逆にパーセント指定だとどこまでも画面の幅に合わせて細長くなっていく）
　かといってメイン部分もピクセル幅指定すると、今度は全体が縮小表示されてしまうか、拡大すれば一行読む度に横スクロールさせないといけなくなるのでこれまた問題。どのブラウザでも理想的な表示をさせるにはそれなりにcssの技術を駆使する必要がありそうだ。
　（正直IEだけかなり特殊な挙動を示すので、これさえまともならそこまで苦労の必要はないのだが…）
　今までもディスプレイの高解像度化などに対応するようしてきたが、今後も新たな媒体が出現する度に対応していかねばならないのかな。

　長い事日記用の地図表示として重宝してきたALPSLABが、今年の3月で閉鎖されてしまいました。こりゃ代わりをどうしようかと思案していたところ、能力を持った方が同じように何とかせにゃと考えてくれたようで、tDiary用のプラグインとして、google地図使用のgoogle_map.rbとYahoo!地図使用のyahoo_map.rbというのが開発されていました。
　そこで鯖神様にプラグインを導入してもらいました(毎度お手数掛けます)。
　双方試してみたのですが、googleの方は多機能なのですが携帯では地図を見る事が出来ない、Yahoo!はその逆。
　結局、基本はgoogle、それとは別に携帯用にYahoo!へのリンクを設置する事にしました。
　で、そうなると入力が面倒になるので…

　Accessで緯度経度だけコピペすればコードを吐き出す仕組みを作った。
　以前javascriptでやってみたけど、考えてみたらtDiaryに直接組み込めないんだったら何で作ってもいいんだよな。気付かなかったよ…。
　で、こうなる↓
ここに地図携帯用地図

　いままでこの日記で地図を掲載する際にはALPSLABを利用してました。デザインもアルプス社の地図と同じでマウスのホイールで簡単に拡大縮小できたりとなかなか使い勝手がよいものです。で、久々に使おうとしたのですが…

　　サービス終了ってなんじゃーーーっ!!

　正直、ひょっとしたらこんな日が来るのではとも思いつつ、地図大手のアルプス社がサービスやめたら本気で地図会社終了じゃないかと思って、まさかそんなことはと考えて使っていたのですが…。
　これはもうweb関連のサービスはグーグル一択って事なのかのぅ。

　昨日の車内でマァいろいろと雑談していたんですが、その中でhtmlの話をちと解説しようかと。
　そもそもhtmlとは(と、大上段に構えて話せるほどの知識もないですが)研究論文などをどのようなコンピュータ環境でも読め、さらにリンクを用いて自由に結びつけ拡張できるようにと開発されたものです。ここで注意するのはhtmlは文書構造を機械(コンピューター)でも理解分析できる為に作られており、現在あるHPのように様々な視覚表現を表示させることは目的とされてなかったことです。
　ところが、90年代後半あたりからNNとIEとのいわゆるブラウザ戦争が始まります。この前後あたりから、それぞれが表現力を競うために独自のタグを作っていきました。例えば<font>タグなどです。しかしこれらは直接文書構造を示すものではなく、いわゆる表現を示すものでした。
　現在ではhtmlは構造を示し、表現についてはcssを使用するようになっています。html4.0ではfontタグなどは非推奨要素となっており、来年には策定される予定のhtml5では廃止されています。
　で、具体的にはどういうことかというと、
「ともりん先生は2008年にJR全線完全乗車を達成した」という文章を、「JR全線完全乗車」を強調したいと思い、文字を赤字にしようとした場合、fontタグを用いれば
　　ともりん先生は2008年に<font color="red">JR全線完全乗車</font>を達成した
　と表記します。しかしこれだとJR全線完全乗車の部分は強調されたのかただ単に目立たせたいのか逆に目立たせたくないのか(少なくとも機械は)理解できません。
　htmlにおいて強調を意味するタグはemまたはstrongです。強調の意味を持たせた上で赤字で表現するならばcssを使用し、
　　ともりん先生は2008年に<em style="color:red;font-weight:normal;font-style:normal;">JR全線完全乗車</em>を達成した
　となります。
　両方を並べてみましょう
　　ともりん先生は2008年にJR全線完全乗車を達成した
　　ともりん先生は2008年にJR全線完全乗車を達成した
　どちらも同じ表示になりますが、htmlとしての意味合いは全く違うというのが理解してもらえたかと思います。
　ちなみに協調などではなく、単純に文字色を変えたいときにはspanタグを用います。spanタグ自体には特に文書構造上の意味はなく、文書内の「ここからここまで」を示している、といった理解でいいと思います。上記htmlのemをspanに置き換えた形になります。
　ちなみにhtml5では文書構造がより明確に表現できるようになります。
　HPのレイアウトでみると、以前はtableタグで組んだりしましたが、これは本来表を示すタグであり、現在はdivタグが使われています。しかしこれもspanタグと同じく範囲を表わすだけであり、これがhtml5ではheaderやfooder、sectionといったタグができることで各部分が持つ意味合いを構造的に明確にすることが可能になります。　ついでに、これは直接htmlにかかわる話ではないですが。
　文章を書き表す際、一行を何文字にすればいいか。通常は40文字前後と言われています。これは目の動きに合わせたものなのですが、HPでも同じでデザイン上文字を小さくするのであれば横方向の幅を狭めるなどで一行が長くなりすぎないように措置を取る必要があります。
　個人的にはデザイン重視であまり文字サイズを小さくするのはどうかな～とも思います。ユーザー側で文字サイズを変えられるようにフォントサイズを絶対値でなく相対値にしておくのも忘れないように。　

　るぅ嬢が自分の住む街のことをまだよく知らないようなので、googleアースを使って市内をご案内。ついでに鯖神様の家やともりん先生の家などを上空から散策…
　ここに写っているの本人でないかい？

css3先取り

　ご存知の方も多いかと思いますが、現在のweb標準であるhtml4.0とcss2、この規格を、来年を目途にそれぞれhtml5、css3へとヴァージョンアップする作業が現在続いております。
　で、折角なのでcss3をちょっと先取りしてみました。
　フォクすけの3.5とかで見ると、右側のメニューのボックスの角が丸くなっているとかタイトルの文字が影付きになっているとかがわかるかと思います。今まではこういう事する為にはわざわざ画像を準備しなければいけなかったんだよな?、便利になったもんだ。
　これとは別に、右側メニューに料理カテゴリのプルダウンメニューも付けてみました。近いうち駅弁とか撮影地も準備していくつもり。
　で、この、ぱ先生ご謹製のカテゴリタグですけど、プルダウンメニューの中に同じ項目が２つ並んで出てきたりする現象が見受けられますんで、お暇なときがありましたら修正いただければと思います。

　ともりん先生と同様にネットラピュタが新サーバに移行するのに伴ってメーラーの設定を行ったりしたんですが…
　何故か設定ページへトップページから飛べなかったり、一方でトップページから飛べるメーラー設定ページは今だ従前のままだったり、ドメイン名変更なしとうたいつつ実は変わっているし、設定直後には何故か送信できても受信が出来なかったりと、どうもサービスが成っていないような。
　正直ぱぱサーバのある今、止めてもいいのだけれどメールアドレスを変えられないというジレンマが。
　そうそう、ともりん先生がスパムメールが減っていないとお嘆きでしたが、今度からスパムメールはタイトルに”[spam]”と入るようになりましたので、メーラーで「迷惑メールフォルダ」とか適当なフォルダを作って受信時に自動でそちらに振り分けるようにしております。

　そこに日記があるから…かどうかは知らないけれど(笑)どうも人は分類すべきものがあると分類したくなる動物のようである。　それはともかく、実際のところ、例えばこの日記なら「駅弁の記事が読みたい」「この店の別の時の記事も読みたい」といったある程度まとまったテーマの記事をまとめて読みたい時のためのもの、といったところででしょう。　そして、こういった要求に対応するために大抵の日記ソフトにはカテゴリ分類、あるいはタグの機能が付いているのである、と。　さて、このカテゴリとタグ、どう違うのかといえば…　カテゴリは予め決められた大まかな枠、タグはその記事ごとに決められるキーワードみたいなもの、というのが私の印象。　イメージとしては学術論文などで論文の最後に示されているキーワードがタグ、その論文の載っている雑誌のジャンルがカテゴリなのかと。キーワードの使われる数が学会でのテーマの流行り廃りの指標になるので、これを視覚的に捉えられるタグクラウドに意味が出てくると(かえって判りづらくなったか？)　さて、その視点でtDiaryのカテゴリ機能を見ると…記事ごとにいくらでも設定できるとこから、実はこれはカテゴリというよりはタグではないかいなと。　そして、タグ機能として開発してもらいましたぱ先生のsancプラグイン、実はこちらの方がカテゴリ機能を担わせるにふさわしいのではないのかな、と。　なので、そんな使い方をしてみようかと思います。　という訳で…
　お願いぱ先生
　以下のプラグイン追加をお願いします。

category_to_tag.rb
category.rbやblog-category.rb向けに入力されたカテゴリを、タグに見立てて各エントリの末尾にリストアップする。
contribに含まれています。

category_to_tagcloud category プラグインを利用した タグクラウド 表示プラグイン
http://www.smallstyle.com/20060523.html

ついでにこちらも

netabare.rb
ネタバレ隠しプラグイン
http://www.shinonon.dyndns.org/diary/20030828.html

<%=netabare 'あら？？Wikiスタイルが解除されてる？'%>
template.rb
tDiaryでテンプレートを使えるようにするプラグイン
http://itoshi.tv/d/~date=20041123#p02
バグ連絡
　写真アップロードですが、本文に追加をクリックするとタグが本文一番最後に表示され、さらにその後にそれまで入力した文章が追加されるというバグが出てます。
こんなこといいな、できたらいいな
　写真は「本文左側に追加」「本文右側に追加」と２種類
　それと一緒に説明文を入力する欄
　文章を打って改行する時、Shift+Enterでbrタグ自動挿入
使い方の確認
　sancタグは記入の後、タグDB更新要請をクリックすればその時点で更新されるのでしょうか。
　また後から追加や変更や削除をした場合の挙動はどうなるでしょう。

　前にも書きましたが、プロバイダの契約更新などいろいろありまして、現在のページの改装などを考えています。コンセプトはさよならネットラピュタ(笑)とftpを使わずに更新できる作りにしてしまおうというもの。
　中心はやはりこの日記の部分になるかと。というかいっそここをトップにしてしまおうかと。
　で、この日記はnickyというcgiを使用しているのですが、次回リリースでの複数画像アップロードがアナウンスされていますのでそれを待って、と考えています。（ただそれがいつになるかちと不透明…）ついでに過去の日記の記事も移そうかなと。
　しかし、以前コメントスパムの攻撃を受けてファイル名をhogehogeにしたりしたのですが、おそらくこれをnickyに戻さないとならないかと(今も動作に不安定な面がある)。しかしそうなるとまたスパム攻撃が起こるのか…鯖神様、どんなもんでしょう？
　他の部分では駅弁とか撮影地ガイドをデータベースcgiにしてしまおうかと。リレーショナルデータベースを構築したかったんですがそうなるとmySQLとかになってしまいそうなのでさすがにそれはきつい。で、いろいろ探してDatabaseFactoryというのを見つけてきました。
　イラストは最近描いていないのですが(汗)レイアウト変更して普通にhtmlで記述しようかな。
　掲示板は引っ越すべきか、ぱぱサーバダウン時の避難場所にもなっているので悩みどころ。
　後は大胆にリストラ(笑)
　では期待して待て(誰も待ってないって) ¹

　私が契約しているプロバイダのネットラピュタから年間契約更新のお知らせが来ました。
　　…が、
　正直、今ネットへの接続は家で契約している有線経由、HPも多くをぱぱサーバに依存し、外出時の更新なども今では携帯のフルブラウザ機能で事足りる…。
　かれこれもう10年くらい契約しているのですが、今となっては使っているのはメール(それもスパムばっかり)とHPの一部だけとなりまして、そろそろ内容を見直さないといかんかな～、と。
　一番安い契約に変更しよっと。