またまた、クックパッドうぉっちのテンプレートを更新してみました。

このサイトを立ち上げる時に、一番悩んだのが、「料理の画像」でした。
クックパッドのレシピページには、必ずレシピ投稿者による料理画像が掲載されています。

珠玉レシピのまとめサイトとして、訪問者に求めるレシピを検索しやすいような構成を考えると、この料理画像を記事内に載せることが一番理想的だと思うのですが、その方法が直リンク以外に思い浮かびませんでした。

個人的に、他のサーバからの画像ファイルのみの直リンクをされるのは、めちゃくちゃ嫌いなので、その方法はありえないなぁ。と、考えると、結局辿りついた結論は、「料理画像を載せることができない」でした。

そんなこんなで、なんかいい方法ないかなぁ......と、考えているうちにいつの間にか2年の歳月が流れていたわけですが、なんとなく、いい感じの方法がみつかったので、即行で実装してみました。

それが、HeartRails という、ウェブサイトのサムネイル画像をつくってくれるサイトを利用する方法です。実は、HeartRails については、うちのサイトのリンクページとかで、かなり前から使っていました（なんで今まで気づかなかったんだ...orz）。

これだと、直リンクを使わずに、レシピのイメージを記事に載せられるので、いい感じです。

ただ、さすがに今までの記事（3000件以上）を修正するのは手間がかかりそうで、難しいですが......。

クックパッドうぉっちのHTMLテンプレートをいくつか修正したんですが、その際のちょいテクをメモ。

箇条書きっぽい文章を書くとき、１行が長くなって２行目に回り込んだ場合に、２行目の先頭を段落記号の後ろからはじめたい。って思うことがあります。

◆諦めたらそれまでだ。でも、君なら運命を変えられる。避けようのない滅びも、嘆きも、全て君が覆せばいい。その為の力が、君には備わっているんだから。だから、僕と契約して、魔法少女になってよ！

こんな感じのやつを……。

この場合、 ul と li による、リストを使って表現するのが一般的なのですが、リストだと段落記号に使える文字がかぎられるし、クックパッドうぉっちのように複数文字を段落記号にすることができません。
そこで、ぐぐって調べてみたところ、スタイルシートを使ってスマートに表現する方法がありました。

それが「text-indent」属性を使う方法です。この属性は、本来は１行目のインデントを行うためのもので、たとえば、text-indent:1em; とすると、

諦めたらそれまでだ。でも、君なら運命を変えられる。避けようのない滅びも、嘆きも、全て君が覆せばいい。その為の力が、君には備わっているんだから。だから、僕と契約して、魔法少女になってよ！

こんな感じで段落の最初の文字を字下げすることができます。

ただ、これだと１行目だけのインデントで、２行目以降のインデントにはなりません。
そこで、インデント幅の値にマイナスを設定します。たとえば、text-indent:-1em; とすると、

◆諦めたらそれまでだ。でも、君なら運命を変えられる。避けようのない滅びも、嘆きも、全て君が覆せばいい。その為の力が、君には備わっているんだから。だから、僕と契約して、魔法少女になってよ！

これで意図したとおり、２行目を字下げすることができました。

んが……まだ１つ問題が残っています。このままだと、文字の開始位置が本来の位置より左側にでてしまうので、padding をいれて修正します。

と、言うことで、text-indent:-1em;padding-left:1em; を設定したのが↓になります。

◆諦めたらそれまでだ。でも、君なら運命を変えられる。避けようのない滅びも、嘆きも、全て君が覆せばいい。その為の力が、君には備わっているんだから。だから、僕と契約して、魔法少女になってよ！

スタイルシートにマイナスの値を設定できるのは、意外と忘れがちになるんですよね。
でも、いろんな場面で使えそうなので、メモメモφ(- -*)

最後に、今晩はMBSでまどかマギカの最終話の放送日ですー☆

前回言ってた、ニコニコ１位でのサムネール画像を表示できたらなぁ。ってやつ。

色々とぐぐってみたら、はてなダイアリーでそれらしき機能のJavaScriptが見つかったので、それを基に望んでいた機能を盛り込んで、さっそく実装してみました。

function linkthumb(){
 var img = document.createElement('img');
 img.onmouseout = function(){
  img.style.display='none';
 };
 img.style.position = 'absolute';
 img.style.cursor   = 'pointer';
 img.style.display  = 'none';
 document.body.appendChild(img);
 var d = document.getElementsByTagName('div');
 for (var j = 0 ; j < d.length ; j++){
  if (d[j].className != 'inbody') continue;
  var a = d[j].getElementsByTagName('a');
  for (var i = 0 ; i < a.length ; i++){
   if (!a[i].href.match(/^http:\/\/www\.nicovideo\.jp\/watch\//)) continue;
   a[i].onmouseover=function(e){
    var link  = this.rel;
    var slink = this.href;
    var thumb = 'http://tn-skr.smilevideo.jp/smile?i='+link;
    img.onmouseover=function(){
     img.src=thumb;
     img.style.display='block';
    };
    img.onclick = function(){
     location.href=slink;
    };
    if(document.all){
     img.style.left = document.documentElement.scrollLeft + window.event.clientX + "px";
     img.style.top  = document.documentElement.scrollTop  + window.event.clientY + "px";
    }else{
     img.style.left = e.pageX + "px";
     img.style.top  = e.pageY + "px";
    }
    img.src = thumb;
    img.style.display = 'block';
   };
   a[i].onmouseout = img.onmouseout;
  }
 }
}
if(window.addEventListener){
 window.addEventListener('load',linkthumb,false);
} else if(window.attachEvent){
 window.attachEvent('onload',linkthumb);
} else {
 window.onload=linkthumb;
}

◆一覧表表示欄のニコニコ動画へのリンクにマウスをポイントした時だけ、対象の動画のサムネール画像を表示させるようにしています。

ポイントは、リンク先のURLと、サムネール画像のURLが異なるため、aタグのrel属性にサムネール画像URLの情報を持たせています。

これだと、ニコニコ動画のサイトへもそんなに負荷もかからなくて、いい感じじゃないですか？

HTML（XHTML）と、CSS の文法チェックを行ってくれる、XHTML-CSS Validator というサイトがあったので、ちょっくら挑戦してみました。
ニコニコアーカイブや、FLV2MP3などの、比較的最近につくったページはまったく問題なかったのですが、このブログも１点エラーが出ていますねぇ。トップページは果てしなくエラーが出そうで怖いのでやっていません (汗

ここ最近に作りこんだページ関しては、Another HTML-lint gateway で最低９９点は（Google のアドセンス…ソースコードの改変は利用規約により不可…を貼ると、どうしてもマイナス１点になってしまう）出せるようようにチェックして公開していたのですが、これはCSSまではチェックできないので、いくつかアラが残っていました。

先日宣言した通り、FLV2iPod の大容量ファイル対応が終わったので、今年最後の仕事として、トップページを XHTML に書き直していこうかと思います。とりあえず、XHTML-CSS Validator と、Another HTML-lint gateway の両方でエラーなしを目指して！！
（問題は角丸の部分なんだよなぁ・・・）

いやね、以前ニコニコ動画のダウンロード方法に関するアンケートを置いていた時に、思いもよらず色々な意見がもらえたので、ご意見箱みたいなものが欲しいなぁ。と、思っていたのですよー。

ちなみに、このWeb拍手は、えぬぱすどっとねっとさんから、お持ち帰りしてきたものです。
実際に設置しているものは、初音ミク（はちゅねみく）バージョンと、鏡音リン（かぐぁみねリン）バージョンがランダムで表示されるようになっています。

で、さっそくいろんな意見を頂戴して、もうマジ感動もんです。
いやぁ、今まで他人から「神」とか言われたことなかったから、この嬉しさをどう表現したら良いものやら。

まだまだ（仮）状態のサービスなので、はやく正式サービスにできるよう、これからも改良してきますので、みなさんも、いろいろと生のご意見お聞かせくださいです。

余談ですが、一人で259回も拍手して行った人とかもいました (笑

さてさて、ニコニコ動画のランキングデータを毎日保存しているニコニコアーカイブのページですが、ただ単に取得したデータを保存しているだけでは面白くないので、少しばかりオリジナル要素を加えてみました。

って言っても、「再生数」「コメント数」「マイリスト登録数」の各ランキングデータから統計をとって、総合ランキングを作ってみただけなんですが……。

ただ、今回の機能追加は、ちょっとばかしPerlの技術力アップになったので（内容は後日メモを書きます）それなりには、意味があったかなぁ。と思ってます。

はやくYahooの検索エンジンに登録されないかなぁ… （ボソっ

-----
関連エントリー：
◆ニコニコアーカイブ作成中
◆CSS における、margin: auto; の罠

ギヤッ。Whoopi さんに指摘されて気づいたのですが、ニコニコアーカイブのページ、IE6で表示させると中身が全部左寄せに表示されていたみたいです。

りぐの場合、IE7か、FireFoxでページの確認を行っていたので、全然気づかなかった……。

んで、原因を調べてみると、どうやらCSSでブロック要素のセンタリングに「margin-left: auto; margin-right:auto」ってのを使っていたのですが、IE6のバグ？で、auto が使えないとかorz

↑のサイトに書かれている、「text-align: center;」を使って、昨日なんとか対応させました。

うーむ。XHTMLは初挑戦なんですが、まだまだ知らないことばかりですね・・・。

ニコニコ動画のプレミアムアカウント購入を記念して、NICO NICO ARCHIVE なるページをつくってます。
※7月1日のサービスインに向けて、現在進行形 (汗

概要はニコニコ動画のランキングデータを毎日アーカイブさせること。
（サンプルで作った6月26日付けの再生数トップ２０のページ）
今はサンプルなので、全て手書きでHTMLを書きましたが、最終的にはperlで自動で書き出すようにすることが目標。

今回は、この前のブログのようにノリで…とかではなく、かなりまじめに作りこんでます。
Linux, perl, HTML(XHTML), CSS ,Google Ads ... 今現在のりぐの持てる全ての知識と技術を詰め込みました。

久しぶりに睡眠時間を削ってでもやりたいことができた今日この頃。今週末が山場ッス。

今のトップページをリニューアルしたのが、2006年の春頃だったかなぁ。

既に「Web2.0っぽいデザイン」って言葉を使うのも恥ずかしくなってきた今日この頃ですが、当時はWeb2.0という言葉がものすごく流行っていて、はてブのホットエントリーにWeb2.0という単語が出てこないことがないぐらいだったわけで、もちろん、りぐも少なからずWeb2.0的デザインを意識して作ったわけです。

角丸やグラデーションとか、透明感のあるガラス調の素材であったり、淡い色使い。それから、影を用いた立体化などなど。まぁ、そんなちょこっとした簡単なところだけ。

ただ……一つだけ挫折した箇所がありました。

それは、段組を「TABLE」タグを使って実現しているということ。言うまでも無く、TABLEタグはHTML的には表を構成するためのもので、段組の枠組みのためにTABLEタグを使うことは正しくないとされているのです。
でもね、やっぱりね、簡単なのでTABLEタグを使ってしまうわけですよ・・・orz

とは言え、分かんないままほったらかすのも性に合わないので、今回、知り合いの子がサイトをリニュして、構成を全面的に改めたいと言ってきたことを理由に挑戦してみました。CSSによる段組を！！

でね、これがやってみると…思っていたより意外と簡単。
わけあってここからリンクを貼れないので実際に見てもらうことができないのですが、要はDIVなどで定義したブロック要素にCSSのfloat属性を使って、簡単に右や左に回りこませることができるんですね。

参考にさせてもらったサイト：
http://desperadoes.biz/style/dan/
http://www.geocities.jp/multi_column/

やってみると、全然簡単なことなのに、なんで今までやってみなかったのかと、ちょっと自己嫌悪。

それはさておき、そんなこんなで次の目標は『今のTOPページをXHTML+CSSでWeb2.0的デザインに書き直す』ことに決まりました。

まぁ、ホームページ作成は仕事とはまったく関係なく趣味でやってるようなもんなんで、のんびりやってるので、いつになるかは分かりませんが… (汗

多くの同人系のイラストサイトってのは、サイト構成として、「同人に興味ない人はお帰りください」とか、「作者とは一切関係ありません」的な注意事項の書かれた、入り口ページページがあって、それからサイトメニューのあるトップページにつながるという構成になっているじゃないですか？

りぐの知り合いのサイトも、まさにその形になっているわけなんですが、最近ちょっとした問題が……。

トップページが重たい！！

いやはや。さすがイラストサイトだけはあって、トップイラストとかは、結構こだわっているわけなんですよ。そのためあって、トップイラストのファイルサイズが100kByte を超えていたりすることもあり、それが原因でトップページが重たくなるという問題が・・・。
んで、どうすっかなぁ。と悩んでいました。

手っ取り早いのは、画像の圧縮率をあげれば、もちろんサイズは落とすことができるのですが、せっかくのこだわりイラストなんで、できるかぎり圧縮率は低いほうがいいじゃないですか。

んで、結局どうしたかというと、ここのエントリーでも書いていた、CSSを使った画像のプリロードを試してみました。
方法としては、入り口ページを読み込んだときに一緒にトップページ用のイラストも読み込むようにして、実際にトップページを開いた時は、キャッシュから画像を読み込ませるという方法。

HTMLには、img タグで対象の画像を指定して↓
<div id="preload"><img src="img/bg.jpg" width="1" height="1"></div>

CSS上で、対象のIDの画像は表示させない設定を行う。↓
#preload {
display: none;
visibility: hidden;
}

これがねー、自分で言うのもなんですが、体感的にもかなり早くなったので、大満足。
これはお勧めですー。

次、４つ目行ってみよう。

今度は、最近みつけた便利なブックマークレット。ブックマークレットというのは、簡単なJavaScriptとかをお気に入り（の中のリンク）に登録して、それをクリックすることで現在開いているページに対して、なんらかのアクションを行うというもの。

例えば、「現在のページを英日翻訳サイトに渡す」とか、「再生中のようつべ動画をファイルに保存する」とか、「現在のページをはてブに登録する」など。ちなみにりぐが一番使っているのは、「あとで」サービスのブックマークレット。

そんな感じで、つくりこみさえすれば、かゆいところに手が届く感じの便利なものなんですが、そんなブックーマックレットがJavaScript::Bookmarkletさんのところで、かなりたくさん公開されています。

その中でも特にお気に入り…てか、もはやなくてはならないのが、ページ上の指定したパーツをクリック一つで消してくれる「消す！」
ウェブページの印刷をしたときに、「あー、真ん中にあるこの広告さえなければ１枚に収まるのに！！」って思いをしたことありませんか？　そんな時に、この消す！を使っていらない広告などのパーツを消してから印刷をかければいいんですよー。

まじ便利なので、かなりお勧めですー。

今日は意味もなくたくさん日記を書いてみる。
まずはサイト作成の方面から。

入力フォームを使ったCGIを((φ(．．。)カキカキするときに、多くの場合に考慮しなければならないのが、フォーム内容のチェック。「必須項目が抜けていないか」「フォーマットが正しいか」などの内容から、「不正なコードが入力されていないか」といった内容まで、その種類は色々と。

んで、そのチェックをCGI(サーバ)側で行うことはもちろんなんですが、送信前にクライアント側でチェックを行えば、不要なトラフィックを軽減することができ、またエラーによる「せっかく入力したデータ」のロストといったリスクも減らせて便利なんですよ。
なので、親切な入力フォームとかでは、サーバ側でのチェックとクライアント側でのチェックの２重チェックになっていることが多いのですが、クライアント側でのチェックで便利そうなスクリプトがあったのでメモメモ。

それが、フォームの入力エラーを吹き出しで教えてくれる JavaScript。

ぱっとみたときにすぐわかるのがいいですねー。こんど自分のやつにも取り入れてみよっと。

このページのテンプレートを、今回のプチ改装で、実はかなりいじくりました。今回はその作業メモ。

１．オリジナルテンプレートは tokyobuddha さんのところのPale White ３カラム版を利用。

２．カレンダーを Kinarie&May さんのところの横型flashカレンダーに変更

ここまでは今までにやってたとこです。

３．ブログツールの導入 とりあえず、フィードメーター と、テクノラティのツールを導入

４．最下部にコピーライトの挿入 いやまぁ、一応ここはブログという一コンテンツなんで、本家サイトへのリンクがないのもどうかと思いまして…。

５．カウンタの導入 めんどくさいので、本家サイトのをそのまま利用。一応アクセス制限はかけているので、同一訪問者が何回も回せなくなっているので、まぁ問題ないっしょ。

６．メインページのエントリー表示にコメントを表示するようにテンプレを変更。 せっかくもらったコメントなんで、アーカイブページだけに表示させてたらもったいないっしょ。

７．エントリー，月別，カテゴリアーカイブページ、全件アーカイブページの３カラム化 オリジナルテンプレだと、これらのアーカイブページは全部２カラムでサイドメニューがなかったので、全てメインページに併せて３カラム化させました。

８．サイドメニューなどのモジュール化 アーカイブページをメインページに併せて３カラム化させると、メインページを編集した時に毎回全部のテンプレを編集しなければならなくなるので、モジュール化させてテンプレから参照させる形に変更。

９．ブログ更新チェッカーの導入 左上にある「Favorite Blogchecker」のことです。これは語ると長くなりそうなんでまた後日まとめます。

１０．Another HTML-lint でHTMLの構文確認 とりあえず、どのページも９０点以上出せるようにがんばりました。

ざっとこんな感じです。なんか無意味にMovableTypeのオリジナルタグに詳しくなってしまった。。。

普段、ブラウザは Sleipnir 、もしくはサイトの表示確認のために Firefox しか使っていないので、今まで全然気づかなかったんですが、少し前（今年の4月ぐらい？）のマイクロソフトのIE更新パッチを適用すると、ＩＥでFLASHを表示させる場合「このコントロールをアクティブ化するにはクリックして下さい。」とのメッセージがでて、直接アクションが行えなくなっていたみたいですね。

詳しくは調べてないんでわかんないですが、どっかの会社が「自社の特許侵害だ！」とマイクロソフトにいちゃもんつけたせいで、ＩＥの仕様が変更されたらしいです。
※4月の話なんで、これを読んで「何を今更？」って人のほうが多いのかな…orz

とは言え、このブログでもカレンダーの表示にめっちゃFLASHを使っているわけで、しかもそのカレンダーがクリックして使うことが前提のFLASHとなると、うちのアクセス解析でブラウザシェア６割を超えている(ロボットを詳細に除外すれば８割超える？)IEを無視するわけにもいかないので、アドビのサイトに書かれている方法で対応をとってみました。

なんのことはなく、HTMLに直接記述していたFLASHを呼び出す「EMBED」と「OBJECT」のタグを外部JavaScriptファイルに書けばよいということだったので、サクっと対応しときました。

まぁね、うちのサイトの場合はいいんですよ。自分のサーバでやってるんで外部ファイルを参照させたきゃ、その外部ファイルをサーバに置けばいいだけなんで。
問題なんはjugemとかのブログサービスですな。画像ファイルはアップできても、その他のファイルはサーバにアップできないみたいなんで、結局JavaScriptファイルはエアリス君に設置して読み出している今日この頃。

あー、鬱陶しい。いつぞやのＧＩＦ特許と同じで、金儲けのためにゃユーザの使い勝手が２の次という、その根性が気に食わんな。まったく。
そんなことしても、一時的に金が儲かったとして、残るのは悪名だけだっつーの。ユニ○スなんて今や・・・。

いろんなサイトを見ていると、ある言葉にマウスカーソルをポイントしたときに、ヘルプみたいに、言葉の説明とかがでてくるページがあるじゃないですか？　形とか色とかが凝ってたりして、すんごくかっこいいなぁと思うのがあったりして、いつかは取り入れてみようと思っていたんですが、phpspot開発日誌さんのサイトで、簡単に導入できて、しかも角丸かつ、半透明で見た目かっこいいスクリプトを紹介されていたので、メモメモ。
Bubble Tooltipsというものなんですが、設定は簡単で、バルーン用画像ファイルとCSSファイル、それからJavaScriptファイルを設置して、JavaScriptファイルを読み込ませるだけ。CSSのロードはJavaScriptの内部でやってくれているので、特にきにしなくてもいいようです。
んで、使うときは、表示させたい文章をタグのtitle属性に記述するだけ。すんごく簡単。今度使ってみよっと。

この休み中にメインページをリニュすべく、Javaスクリプトを使わないCSSのみでの角丸化の方法をおさらいしていたところ、ちょうど色々な方法をまとめられていたページがあったので、さっそく保存させてもらいました。

たくさんの方法を紹介されているんですが、今のトップページにおける、水色・黄色・桃色・緑色のグラデーション背景は気に入っているので、３番・４番・５番の「背景画像をループ」を使って、背景画像を横にのみループさせるように「x-repeat」を指定すれば、思い描いたとおりの表示ができたので、満足満足。

後は・・・textareaをなんとかしてCSSだけで角丸化させたいなぁ。この前のNiceformsをJavaスクリプトを使わない形に改造できれば言うことなしなんだが。

REGWORKSのプログラム（CGI）を色々とテストで使ってくれている（もしかしたら使わせている…かもしれない）同人系イラストファンサイトがあるのですが、イラストサイトって、当たり前ですがサイトのメインはイラストになるわけで、HTMLだけのページより、ロードするのに時間がかかるんですよね。しかも大きなサイズのイラストになってくると、完全に待ち時間ができてしまう。

どうしたものかと、あれやこれやと探ってみたら、画像をプリロードさせる方法が見つかった。なるほど、次に表示させる（であろう）画像を事前にダウンロードさせといて、実際に表示させるときはキャッシュから表示させるため、高速に表示できるってわけか。
ただなぁ、どこもその方法をJavaScripで実装してんのよねぇ。今でこそ、Ajaxだなんだと騒がれているけど、やっぱりJavaScriptの暗黒時代にパソコンのいろはを学んだ者として、どこか抵抗があるのよね・・・。

そんなかで、キラリと光ったのが、CSSによる画像のプリロード。なるほど、たしかに非表示にさせることができるじゃん。しかもけっこうスマートに実装できるし！　このアイデアもらいっす。

＃　どーでもいいけど、↑のサイトのデザインはちとビビッた。
＃　あれ、俺自動ログイン設定してなかったけどなぁ。と確かめてしまったではないか！！

百聞は一見にしかず。とりあえず、観てみてくださいな。
phpspot開発日誌さんによりますと、上記のサイトで配布されているＣＳＳとJAVAスクリプトのファイルを読み込む定義を書くだけで、ただのフォームが一瞬にしてかっちょいいフォームに変身してしまうとのこと。

最近、この手のクリエイティブなネタが多すぎて、消化しきれずついていけていないのが現状。なんともはがゆいですなぁ。

CSS Showcaseというサイト。うひゃー、こりゃすげーわ。
なんつーか、宝の山？　ひとつひとつ、じっくり仕組みを解析してぇー。
けど時間ねぇんだよなぁ。

lightbox関連のデータを集めていたとき、とてつもなく恐ろしいサイトに遭遇。
stu nicholls | CSS PLaY | cross browser multi page photo gallery というサイトなんですが、書いてあることは英語なんでさっぱり意味不明でも、やってることのすごさはわかります。何がすごいって、このサイト、JavaScript を使ってないんですよ。つまり、ＨＴＭＬとＣＳＳだけで、lightboxを実現してしまっているんです。これには本気で感動です。今度中身をじっくり見てみよっと。
ちなみに、このページを解説してあるページもありました。