レッド ■ ワン: red-one

ペルソナ３影時間時計Flash版（DarknessTimeClock）を公開

2010-07-14T23:14:00.000+09:00

前回、SVG と Javascript でザックリと作成した正式名称不明な「影時間に移行するときに現れる時計」の再現の Flash 版とケータイ待受（Flash Lite 1.1）版を作成しましたので公開します。

PC向け

ケータイ向け

http://red-one.appspot.com/DarknessTimeClock4m.swf

ケータイ向けには、下のQRコードでアクセスください。

さて、次は Android アプリでしょうか？

Youtube でリピート再生するスクリプト repeat-play-script

2010-03-08T22:56:00.004+09:00

小ネタです。
　Youtube の動画をリピート再生するサイトやサービスはいくつかありますが、リピート再生のために別サイトに移動すると動画の再読み込みが発生することがあります。

　そこで、ページ遷移無しでリピート再生を可能にするスクリプトを作成しました。
　作成には以下の情報を参考にさせて頂きました。

スクリプト

javascript:(function(){_gel('movie_player').addEventListener("onStateChange","(function(newState){if(newState==0){_gel('movie_player').seekTo(0,true);}})");})()

　動画再生中に上記コードをアドレスバーに入力してください。
　スクリプトが適用され、現在再生している動画がリピート再生になります。
　ブックマークレットなどにすると便利かも（>>Youtube-repeat-play）。

技術後記

　内容としては、プレイヤの状態が再生終了になった場合、０秒にシークするだけ。
　IE7, Firefox3.6, Google Chrome で動作確認しております。
　その他のブラウザでも動作するはずです。

　リピート停止できない。リピート再生かどうか判断できない、など使い勝手の悪い部分はありますが（エラー処理もありません）、簡単にリピートさせるにはいいのではないでしょうか。

【P3P発売記念】ペルソナ３影時間の時計を再現

2009-11-07T23:01:00.001+09:00

『ペルソナ３ポータブル』公式サイト

　『ペルソナ３』及び『ペルソナ３ポータブル』劇中での「影時間に移行するときに現れる時計」を Web アプリとして再現してみました。
　劇中ではタルタロスに行く２～３秒しか表示されないビジュアルですが、非常に印象的でアプリで探していたのですが、なかったので自作しました。
　機能としては、通常のアナログ時計の機能のみです。

http://red-one.appspot.com/kagejikan_clock.svg

　ブラウザ上から上記 URL にアクセスするか、下記コードを利用してください。

<iframe src="http://red-one.appspot.com/kagejikan_clock.svg" />

動作について

　実装は、SVG + Javascript です。SVG は Illustrator で作成し、Javascript は手打ちで対応しました。
　動作確認は Firefox, Chrome で行いました。
　不具合等ありましたら連絡ください。

アイコン・セット - Gray_Panel

2009-07-20T22:35:00.002+09:00

個人用に作成したアイコンに＋αして公開します。
サイズは今のところ、32x32pxのみ。
需要があれば、他サイズや、更に＋αなどして順次公開していこうかと考えます。

以下から、閲覧及びダウンロード可能です。

/Gray_Panel_IconSet
/32x32
/gray_panel_iconset32x32.zip

Created by Akanasu (@live.jp)
ライセンスは一応、Creative Commonsに準ずるものとしますが、特に規定は定めません。個人の判断でダウンロードしてください。

Adobe Illustratorで作成しました。
Illustrator用の.aiファイルも以下に置きます。
色調整、サイズの調整などにお使いください。

http://files.getdropbox.com/u/714635/Images/notetype_icon.ai

ご意見・ご感想をお聞かせください。

CrunchPadについての続報

2009-04-16T00:51:00.003+09:00

CrunchPadの続報ということで前回に続いて動きを追ってみます。

（前回記事参照：レッド ■ ワン: red-one: CrunchPadは素晴らしいと思う）

しかし、今回の発表はリーク情報を受けてとなっている為、正式な発表ではなく詳細な仕様等は現時点では判明していません。
従って、自身も曖昧かつ希望的観測を持ってしか語ることができません。

外観について

　画像を見る限りではかなりの薄型化が実現されている模様。
厚さ3.3センチあったB版のどうにもモッサリした外観と比べ、メタリック仕様でよりスリムによりスタイリッシュなデザインになっているのでは？
これは普通に置いてあっても違和感はないですね。
というか縦置き・斜め置きに対応したスタンドが何気に秀逸。

ソフトについて

　OSはカスタム・メイドLinuxということで、100MBまでスリム化されています。
UIとなるブラウザはWebkitベースで決まりなのか……。
OSと相まってユーザのカスタマイズ性はほぼ無しと言えるでしょう。
自由にアプリの追加すら出来ないのではないかと危惧してしまいます。

ここまで

　デザインがこなれた感じになって安心しました。
加速度センサも装備されて無意味に高機能化しているなぁ、と。加速度センサより（ソフト）ボタン切替の方が良いと思うのだが。
正直、iPod touchとの住み分けを考えてしまうと、余り新規性も有用性も乏しいかな。
フルブラウザで大画面なのがユーザに優しいということくらいか。

今後、利用形態や利便性を考えると重さが重要なファクタになりそう。
現時点で言えることは、自分が買ったら本当にdrawr用マシンになることくらい。　専用クライアントでも作ってみようかしら。

しかし、Gizmodeのこの記事は酷くないか（TechCrunchがタッチタブレット端末を出したよ！ : Gizmodo Japan（ギズモード・ジャパン）, ガジェット情報満載ブログ）。『原文』とあるものとも全く違うし。

Blogger ブログの要約記事をトップページに表示するアイディア

2009-02-11T16:16:00.002+09:00

久々の Blogger ネタ、でもアイディアだけ。

テンプレートの変更を考えていまして、トップページの表示をなるべく簡素にしたいと思い、タイトル（と記事の要約）のみの表示へ変更する予定です。
記事の要約のみを表示して、「続きを読む」リンクなどを設置する方法は以前からあり、こちらで詳しく解説されています。

ただし、この方法は（今までのものを含め）全ての記事内容をそれ専用に編集しないとなりません。

そこで、アイデアというか思いつき。
Blogger ブログで配信しているフィードにはサマリィ（要約：この場合は最初の数百文字程度）だけを抜き出したものがあります。
詳しくは、こちらを。

clmemo@aka: Blogger Beta の各種フィードのまとめ

自分のブログを例に挙げれば、

http://redone-on.blogspot.com/feeds/posts/summary

なんですが。
このサマリィをブログのトップページに貼り付ければOKなのではないか、と。

思いつく方法・その１

Blogger には幸いにも登録フィードをブログに貼り付けるフィード・ウィジェットがあります。
これを用いてサマリィを表示すれば、と思ったのですがフィード・ウィジェットはデータをキャッシュに取っていて表示が更新されるのが（異様に）遅い。
折角記事を書いても、トップページの更新が１日と遅れる状況は避けるべき。

思いつく方法・その２

JSONフィードのコールバックを使う。

http://redone-on.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=AAA

AAAという関数で受け取って、記事タイトル、リンク、サマリィを表示する。
問題としては、Javascriptオフの環境ではトップページがまっさらになってしまうこと。

最善の方法としては、Bloggerチームがフィード・ウィジェットの登録フィードをユーザの任意のタイミングで更新にされるように改善してもらうのがよいのですが……。
なんとも、他人任せな解法。

この度、Akanasu と改めます

2009-01-29T21:54:00.002+09:00

この度、当ブログ筆者のHNを改めまして Akanasu （または、Akanasu.c）とします。
　以前から他サービスへの登録アカウント名などは Akanasu としてきて、ユーザ情報等も徐々に変更していたのですが、当ブログでの著者名もここでいい機会ですので一新したいと思います。

　変更に至った経緯としては、jyunというアカウント名が一般過ぎて取得しにくいこと。また、同名や似た名前の方が多いことなどが挙げられます。
　他には、元々本名を捩った名前で気恥ずかしいというのもある。
　まぁ、分不相応で飽きたと言えば手っ取り早い。

　因みに『あかなす』とは、

トマト
出典: フリー百科事典『ウィキペディア（Wikipedia）』

トマト（学名Solanum lycopersicum）は、ナス科ナス属の植物。赤茄子（あかなす）、蕃茄（ばんか）、小金瓜（こがねうり）などとも言う。多年生植物で、その果実は食用として利用される。トマトは、緑黄色野菜の一種である。

トマト - Wikipediaより。

　日本っぽく、かつ日本人名ぽくなく、自分に関係するものとして選びました。
「好きな料理は？」と聞かれて「トマト！」と即答するくらいトマト好きです。
（好きな料理が思い浮かばないのもアレですが）

　多少混乱をもたらすかもしれませんが、皆様よろしくお願いします。

CrunchPadは素晴らしいと思う

2009-01-25T21:39:00.002+09:00

Long Tail World のSatomi氏のこの記事から密かに動向を伺っていた２００ドル・タブレットPC。

Long Tail World: シニアのデジタルデバイド：Digital Divide of Seniors

プロトタイプだが、一応の動作をするものができたらしい。
通称『CrunchPad』と命名されているらしい。
全く素晴らしいプロダクトだ。

因みに、

重さ３ポンド≒１．３６[kg]、厚み１．３インチ≒３．３[cm]

である。

昨年中頃から始まった（らしい）プロジェクトも半年足らずでちゃんとした形にするバイタリティは見習うべきものがあります。
ただし、個人的に気になる点も多々あるのが実情。

残念な点

ブラウザ（UI）がWebkitベース。当初はFirefoxベースと謳っていた。Firefox（XUL）ベースならば、購入後もクライアント側でカスタマイズができる
厚さが1.3インチ≒3.3[cm]。３センチは厚い。動画を見た限りでは、実際手に取る分には持ちやすそうだが、鞄に入れて持ち運ぶにはスペースを取り過ぎる
タッチパネルIF。動画を見て推測するには、マルチタッチではない模様。マルチタッチでないと文字入力は（更に）辛くないかな。
恐らく、マルチタッチに対応していないから持ち手が画面に触れないようにフレームも幅広になっているのでは？
今後のアップデートに期待

素晴らしいプロダクトではあるが、現段階でのデヴァイスの印象としては本当にネット閲覧だけ、という感じ。例えば、ブログ記事（長文）を書くことすら想定していなさそう。

外出先でちょっとしたメモを取る……とは使えなさそう。　文章を入力するよりも手書きメモを取る使い方ができれば良いなぁ。

全体の印象としては、少し中途半端なできになってしまっていることに残念である。
# まあ、200，300ドルで購入できるなら即買いしますが……！
ユーザ層や使用場面などは、どういう風に設定しているのだろうか。
室内で使う？　外出先で使う？　ギークな青年が使う？　ガジェット好きなスーツ？　ネット初心者の年配の方？

何処に重点を置くかということが問題であって、必ずしも安価に固執する必要はないと思う。
# 安価であれば、それはそれで購買意欲にも繋がるが……
# 安価なのは十分条件であって、必要条件ではないでしょ。
まあ、これまで作るのに資金も余り掛かっていないと言っているので、試作もそんなに回数を重ねていないのでしょう。
これから本格的な練り直しとよりベターなプロダクトへの挑戦を試みて欲しい。

蛇足駄文

あと、ニーズとはあるものではなくて作るものではないのかな。
Apple の iPod 然り、iPhone 然り。
少なくとも CrunchPad はニーズを作ることができた（ブログ上のコメントなどで明白でしょ）。あとは提案するニーズに沿う物を作り出せるかどうかだと思う。
その自信がないなら、まず会社化は無理でしょう。

年末年始の悲交々

2009-01-19T22:20:00.000+09:00

年末年始と、誰かに呪われてるのではないかというくらいに立て続けに病気に掛かりまして、PCはおろかケータイのディスプレイを見ることすら気分が悪くてできない状態でした。
やっと、体調も元に戻ったので停止していたネット活動を再開したいと思います。
まずは、当ブログのデザインを作り直ししたいと思っていたので、その為の準備に取り掛かります。

Firefox の新規blankページをカスタマイズ

2008-12-16T01:08:00.003+09:00

カスタマイズと言ってもスタイルを適用するくらいですが。

できること

　背景色の変更や画像の表示ができます。
こちらのページ（FireFoxの空白ページを彩る「Dark Firefox」: DesignWorks）にあるようなものを全く一切の拡張機能なしで実現する方法を提案。
対応：　Fx2 ～
（画像表示に対応しているのは2.0からでした）
一部拡張機能と競合します。Speed Dial や Auto Dial などをインストールした状態では効果はありません。

ユーザスタイルシートの利用

　具体的なやり方については、Fxのユーザスタイルシートを使います。

サンプルコード

@-moz-document url("about:blank") {
html {}
body {
 margin: 0;
 width: 100%;
 height: 100%;
 background: #000000
  center no-repeat fixed;
 background-image: url(chrome://branding/content/icon64.png); /* For Fx2 */
}
x:-moz-broken,
body {
 background-image: url(./icon64.png); /* For Fx3 */
}
}

画像を配置する場合は、Fx3 ではchrome:// 以下にアクセスできない替わりにユーザスタイルシートからの相対パスが使えるので、＜Profileのディレクトリィ＞/chrome に画像をバンバン置きましょう。
Fx2 の場合は、相対パスが使えない替わりに chrome:// にアクセスできるので browser.jar の中に入れてしまいましょう。

表示サンプル

テキストを表示させる

　スタイルシートのみのカスタマイズですので、ページのコンテンツそのものは書き換えられないのですが、テキストを表示したい、というときは :before 擬似要素や :after 擬似要素を用いることでテキストの表示ができます。

@-moz-document url("about:blank") {
body {
 margin: 0;
 width: 100%;
 height: 100%;
 font-family: Verdana, Helvetica, sans-serif, Arial;
}
body:before {
 content: "about:blank";
 font-size: 140px;
 font-weight: bold;
 color: #ccccccc;
 cursor: default;
}
html:after {
 content: "Designed by Akanasu.c";
 display: block;
 height: 30px;
 margin-top: -50px;
 text-align: right;
 font-size: 30px;
 font-weight: bold;
 color: #555555;
 cursor: default;
}
}

表示サンプル

応用として

　html 要素と body 要素にそれぞれ別の背景画像を指定することでちょっと複雑な表現も可能です。

参考

イタリア旅行してきました

2008-11-29T22:45:00.000+09:00

もう、半月ほど前の話ですがイタリアへ旅行に行きました。

日程は２００８年１１月０３日～１０日（月）。１０日は飛行機移動だけだったので（現地９日夜に発、日本１０日夜着）、実質的に１週間・６泊８日旅行でした。
３０人程度の団体ツアー。割合は新婚が７割、定年（間際）夫婦が２割、その他１割といったところ。

行程はだいたい以下の通り。

ミラノ
ヴェネツィア（２泊）
フィレンツェ

オプションでピサ

ローマ（２泊）

オプションでカプリ島

４日５日は、イタリアでも珍しく雨、の予報でしたが丁度観光に回っているときには雨に降られず、なかなか良い天気でした。夜中には、雷雨が激しかったですが。
少々寒い気もしましたが、帰ってきた日本ほどではなかった。
１週間ネットの無い生活でしたけれど、移動移動の連続でそんなことを気にすることもなく。移動中はほとんど寝てたしね。
７日間で撮った写真は、４００枚以上。
ただ見直して見るとこれでも少ないと思う。落ち着いてアングルを決めて取れなかったから、余り良いショットが少ない、という結果。
おしい。
こういう遣り残しがあるから、また行きたいということになるのだろう。
内容としては、１週間に色々詰め込みすぎました。自由時間があっても何もできないよ、と話し合ったのですが、買い物をする時間も（決められた時間、場所以外）ない状態は良くはない。

飛行機のアップダウンと書類手続きがなければ、何度でも行きます。
定住してもいい。
長く住み着くには不便だと思うけれども。

横スクロールのサンプルページ

2008-09-29T00:54:00.002+09:00

Javascript で横スクロールするスクリプトのサンプルを以下に掲載．
CSS オン，Javascript オンの環境でアクセスしてください．

http://akanasu.googlepages.com/vscroll_sample.html

横スクロールするスクリプト～横長デザインの為に～

2008-09-01T00:46:00.007+09:00

追記 at 2008.Sep.04

Firefoxで Ctrl + PgDn(or PgUp)　時にタブ移動と共にスクロールしてしまう不具合修正．
その他に，

Shift, Ctrl, Altキー押下時の処理を追加．
Home, End キーに対応

上記対応のコード修正．　同様にソースファイルも修正しました．

追記 at 2008.Sep.02

修正ミスを修正．

Safariでスクロールイベントが動かない不具合

コードも修正．　ソースファイルも修正しました．

　実験的に横長デザインに変更しようかと思いまして，ユーザビリティを考慮して，まずマウススクロール時に横スクロールするスクリプトを実装してみました．

参考

JavaScriptでマウスホイールイベントを扱い、スクロールも停止する方法:phpspot開発日誌

マウスホイールで横スクロール


function handle(delta) {
 if (delta < 0) {
  // 下方向にまわした場合の処理
 } else {
  // 上方向にまわした場合の処理
 }
 window.scrollBy(-delta*120, 0);
}

/** Event handler for mouse wheel event.
 */
function wheel(event){
 var delta = 0;
 if (!event) { /* For IE. */
  event = window.event;
 }
 //Shiftキー Cｔｒｌキー押下時
 var altK = typeof event.modifiers == 'undefined' ? event.altKey : event.modifiers & event.ALT_MASK;
 var ctrlK = typeof event.modifiers == 'undefined' ? event.ctrlKey : event.modifiers & event.CONTROL_MASK;
 var shiftK = typeof event.modifiers == 'undefined' ? event.shiftKey : event.modifiers & event.SHIFT_MASK;
 if (shiftK|ctrlK) { return true; }

 // テキストボックス上では通常のスクロール動作
 var isTextArea = false;
 var target = event.target||event.srcElement;
 if (target && target.nodeName.match (/input|textarea/i) && target.type.match (/textarea/i)) {
  isTextArea = true;
 }
 if (isTextArea) {
  return true;
 }

 if (event.wheelDelta) { /* IE/Opera. */
  delta = event.wheelDelta/120;
  if (window.opera) { delta = -delta; }
 } else if (event.detail) { /* Mozilla case. */
  delta = -event.detail/3;
 }
 /** If delta is nonzero, handle it.
  * Basically, delta is now positive if wheel was scrolled up,
  * and negative, if wheel was scrolled down.
  */
 if (delta) {
  handle(delta);
 }
 if (event.preventDefault) { event.preventDefault(); }
 if (event.returnValue) { event.returnValue = false; }
 return false;
}

/** Initialization code. 
 * If you use your own event management code, change it as required.
 */
if (window.addEventListener) { window.addEventListener('DOMMouseScroll', wheel, false); }
//else if (window.attachEvent) { document.attachEvent('onmousewheel', wheel); }
window.onmousewheel = document.onmousewheel = wheel;

リンク先のコードをいくらか修正したものです．　修正箇所は一々説明しません．
あと，テキストボックス上では横スクロールしないようにしています．

PageDown, PageUp キー押下時に横スクロール


function KeyShirtcuts(event) {
 if (!event) { /* For IE. */
  event = window.event;
 }
 // Altキー　Ctrlキー押下時
 var altK = typeof event.modifiers == 'undefined' ? event.altKey : event.modifiers & event.ALT_MASK;
 var ctrlK = typeof event.modifiers == 'undefined' ? event.ctrlKey : event.modifiers & event.CONTROL_MASK;
 if (altK|ctrlK) { return true; }

 var isTextArea = false;
 var target = event.target||event.srcElement;
 if (target && target.nodeName.match (/input|textarea/i) && target.type.match (/textarea/i)) {
  isTextArea = true;
 }
 if (isTextArea) {
  return true;
 }
 switch (event.keyCode) {
 case 33 : //PgUp
  window.scrollBy(-document.documentElement.clientWidth, 0); break;
 case 34 : //PgDw
  window.scrollBy(document.documentElement.clientWidth, 0); break;
 "case 35 : //End
  window.scrollTo(window.scrollMaxX|document.body.scrollWidth, 0); break;
 case 36 : //Home
  window.scrollTo(0, 0); break;
 default: return true;
 }
 if (event.preventDefault) { event.preventDefault(); }
 if (event.returnValue) { event.returnValue = false; }
}
if (window.addEventListener) { window.addEventListener('keydown', KeyShirtcuts, false); }
else { document.attachEvent('onkeydown', KeyShirtcuts); }

IE では'keypress'イベントで PgDn, PgUp キーは拾ってくれないようなので'keydown'イベントで．
同様に，テキストボックスにフォーカスがあるときは横スクロールしないようにしています．

vscroll.js

　参考までに上記のスクリプトを纏めてファイル化したものを以下に置きます．

http://akanasu.googlepages.com/vscroll.js

補足

　Fx1.5-3.0, IE6, Opera, Safari3.0 at WinXP にて動作確認しております．
　ブログデザイン自体は記事毎に横並びにする予定ですが，実際に上記のコードを使用する場合は縦方向のスクロールが必要になった場合の考慮をする必要があります．
　基本，長文を読ませる（自分のような）ブログには向いてない．
　ちなみに，デザインはコチラを参考にする予定．　＞＞NonSociety: Julia

　ちなみの因みに，あくまで予定．

（本当の駄文）　　僕は

2008-07-05T02:34:00.001+09:00

ヒトより絵がうまくなりたい

誰よりも絵がうまくなりたい

美的感覚を研ぎ澄ませたい

どんなツールも使いこなしたい

むしろ　ツールなんて要らない

ボーナスも給料も残業代も要らない

ただ　本物の能力が欲しい

耳が聞こえなくなってもいい

二度と喋れなくなってもいい

色彩だけは失いたくない

CSS3： Target 擬似クラスを実装するスクリプト sfTarget.js を（勝手に）作り直し

2008-06-26T22:20:00.002+09:00

CSS3 の Target 擬似クラスというものを IE，Opera に実装するスクリプトです．
Target 擬似クラスについてはこちらを参考に．

Lucky bag::blog: CSS3 の target 疑似クラスで脚注を動的に表示する

# ざっくり説明しようと思ったら意外と難しかったので省きます．
# リンク先を見てちょ

CSS3 で定義されている Target擬似クラスは IE と Opera では実装されていません．　上記エントリィ内でも Javascript で実現するスクリプトが紹介されてますが，スクリプトが読みづらい＋意味不明な処理が多いので抜本的に作り直してみました．

sfTarget.js: IE，Opera に Target 擬似クラスを実装するスクリプト

JS ファイル

　コメントを削ったちょい軽量版です．

http://akanasu.googlepages.com/sftarget.js

HTML に埋め込む際は head 要素内に以下の１行を挿入してください．


<script type="text/javascript" src="http://akanasu.googlepages.com/sftarget.js"></script>

ソースコード


function sfTarget () {
 var cls = 'sftarget'; //クラス名
 if (document.location.hash) {
  var id = document.location.hash.substring(1);
  var elm= document.getElementById(id);
  if (elm) { elm.className += ' '+cls; }
 }
 for (var i=0; i < document.links.length; i++) {
  if (document.links[i].hash == '') { continue; }
  document.links[i].attachEvent('onclick', function (event) {
   //前Target要素からクラス削除
   if (document.location.hash) {
    var id = document.location.hash.substring(1);
    var elm= document.getElementById(id);
    if (elm) { elm.className = elm.className.replace(' '+cls, ''); }
   }
   //Traget要素にクラス追加
   var id = event.srcElement.hash.substring(1);
   var elm= document.getElementById(id);
   if (elm) { elm.className += ' '+cls; }
  });
 }
}
if (window.attachEvent) { window.attachEvent('onload', sfTarget); }

CSS 指定方法に関して

　因みに，CSS の指定方法としては


div.sftarget,
div:target {
 /* (IE?), Opera ではここのスタイル指定は無視されます */
 background: #0ff;
}

のようにグループ化して書けませんのでご注意ください．


div:target {
 background: #0ff;
}
div.sftarget {
 background: #0ff;
}

と，同じスタイルでも分けて記述しましょう．
理由としてはこちらの「説明」部分に詳しく説明されています．

Firefox 1.0, 1.5, 3.0 用の CSS ハック | ヨモツネット

:target が対応していないからですね．

リファレンス

記念日が一つ増えました

2008-06-10T22:48:00.001+09:00

本日，６月１０日は『時の記念日』らしいです．

時の記念日（日本）
「日本書紀」の天智天皇10年4月25日（新暦6月10日）の項に、「漏刻を新しき台に置く。始めて候時を打つ。鐘鼓を動す。」とあることから。
大正9年に制定。

6月10日 - Wikipedia より引用

本日，午前中に区役所へ行き婚姻届を提出してきました．

　これからの時を今から刻みはじめる

Processing Works#2 Cherry Blos.

2008-06-05T22:08:00.004+09:00

Processing.js 作品．
マウスイベントとJavascriptを使用した作品です．
マウスで線を描いてください．

Cherry Blos.


size(400, 400);
int cnt=0; //Counter
float trs(float s) {
 return 3.5*sqrt(s);
}
boolean fnc(float s, float r) {
 if (s<5) {
  return s+5 > r;
 }
 return  s*s*4/75+26/3 > r;
}
void setup() {
 background(230);
 strokeWeight(35);
 stroke(180, 120, 0, 80);
}
void mousePressed() {
 point(mouseX, mouseY);
}
void mouseDragged() {
 int dx=pmouseX-mouseX, dy=pmouseY-mouseY;
 float s=sqrt(dx*dx+dy*dy);
 s=trs(s);
 strokeWeight(35-s)
 line(pmouseX, pmouseY, mouseX, mouseY);

 float r=random(3,35);
 if (fnc(s, r)) {
  noStroke();
  fill(240, 180, 180, 180);
  ellipse(pmouseX+40-random(80), pmouseY+40-random(80), r, r);
 }
}
var btn=document.getElementById('button-09-clear');
if (btn) { btn.onclick=function () {setup();} }

レッド ■ ワン: red-one: Processing.js で１週間遊んでみた: Processing Works#1

Processing.js で１週間遊んでみた: Processing Works#1

2008-06-01T23:58:00.010+09:00

情報元:

ブラウザでお絵描きプログラミング！ Processing.js 登場！ - IT戦記

Processing.js がすごいのか Canvas タグがすごいのか，とりあえず遊んでみた．

random dot


int max=100;
Particle prt = new Particle[max];
size(200, 200);
frameRate(5);
int cnt, st;
void setup() {
 cnt=0;
 st =0;
 background(0);
 noStroke();
 prt[cnt] = new Particle();
 prt[cnt].paint();
}
void draw() {
 background(0);
 if (cnt < max) {
  cnt++;
  prt[cnt] = new Particle();
 } else if (st < prt.length) {
  prt[st].reset();
  st++;
 } else {
  st=0;
 }
 for (int i=st; i<cnt; i++) {
  prt[i].paint();
 }
 for (int i=0; i<st; i++) {
  prt[i].paint();
 }
}
class Particle {
 int x, y;
 int c;
 float dev;
 float al;
 float r;
 Particle() {
  dev=0.9;
  this.reset();
 }
 void reset() {
  al=100;
  x=(int)random(width);
  y=(int)random(height);
  c=(int)random(255);
  r=random(5, 60);
 }
 void paint() {
  if (8<al) {
   al-=dev;
  }
  fill(c, 255, 255, al);
  ellipse(x, y, r, r);
 }
}

イベント関係

　マウス位置の取得にはスクロール位置が考慮されていないので，修正する必要がある．
　ソースコードを読むと Canvas 上のマウス位置の取得には，event.clientX(or clientY)と[element].offsetLeft(or offsetTop)が使われているのだけれど，clientX は表示領域の XY 座標，offsetLeft は body のトップからの位置座標になるためスクロール量を別途加算します．

   p.mouseX += window.scrollX || document.body.scrollLeft || document.documentElement.scrollLeft;
   p.mouseY += window.scrollY || document.body.scrollTop || document.documentElement.scrollTop;

processing.jsファイルの１６１２行の次から上記２行を追加しよう．　ただし，スタイルシートでbody {margin:0; padding:0;}のように指定しないと IE6 で座標がずれてしまうことを確認したので注意．

Ball Shower, Dark - Stained Glassic -


size(200, 200);
//背景
background(120);
//noStroke();
strokeWeight(1);
stroke(0, 200);
for (int i=0; i<80; i++) {
 int r = random(5, 60), c = random(255);
 fill(random(255), 255, c, 100);
 ellipse(random(width), height-(c/255)*height, r, r);
}
strokeWeight(1);
for (int i=0; i<height; i++) {
 stroke(0, 255*i/height);
 line(0, i, width, i);
}

描画関係

テキスト表示は Fx.3 より対応．
Firefox は一応1.5から Canvas タグに対応とされていますが，Fx.1.5 ではイベント関係からなのか正常に動作しないスクリプトもあります．
現在，ellipse（円・楕円描画）には，楕円の幅と高さを指定できるのだが，幅と高さが同値でないと図形が描画されない．
つまり，円しか描画できない．
あと，IEでは円に枠線（stroke）を指定しても枠線は描画されない．
円弧（arc）の枠線に余計な線が付加される．

Ball Shower, Dark


size(200, 200);
//背景
background(120);
noStroke();
for (int i=0; i<80; i++) {
 int r = random(5, 60), c = random(255);
 fill(random(255), 255, c, 100);
 ellipse(random(width), height-(c/255)*height, r, r);
}
strokeWeight(1);
for (int i=0; i<height; i++) {
 stroke(0, 255*i/height);
 line(0, i, width, i);
}

不満点

グラデーションがない．地味にピクセルやラインで色を変えて描く方法しかない
切抜き，トリミング，描画範囲のマスク掛けなどがほしい

　最低でもこの２点がサポートされなければ，グラフィックアートを作るのは難しい……．

Rays Mix


size(200, 200);
//背景
background(120);
strokeWeight(1);
for (int i=0; i<height; i++) {
 stroke(0, 255*i/height);
 line(0, i, width, i);
}
CRay rays = new CRay[20];
for (int i=0; i<rays.length; i++) {
 rays[i] = new CRay(i);
 rays[i].paint();
}
class CRay {
 int a;
 int x0, y0, x1, y1;
 int r;
 int idx;
 CRay(int _i) {
  idx = _i;
  a = (int)random(6);
  r = random(1, 3);
  strokeWeight(r);
  switch (a) {
  case 0:
   x0=0;y0=random(height); x1=random(width);y1=0;break;
  case 1:
   x0=0;y0=random(height); x1=width;y1=random(height);break;
  case 2:
   x0=0;y0=random(height); x1=random(width);y1=height;break;
  case 3:
   x0=random(width);y0=0; x1=width;y1=random(height);break;
  case 4:
   x0=random(width);y0=0; x1=random(width);y1=height;break;
  case 5:
   x0=width;y0=random(height); x1=random(width);y1=height;break;
  }
 }
 void paint() {
  stroke(255, idx*5+50);
  line(x0, y0, x1, y1);
 }
}

補足・注意

　グラデーション描画は Canvas タグではサポートされているので，Canvas のデバイスコンテキストを取得するか，Processing.js を自分でいじるかすれば可能です．　けど，これって反則気味？

コメント投稿に確認用文字列 comment verification の入力を必須にしました

2008-04-26T21:00:00.001+09:00

最近，コメントスパムが多いので（一時的に）コメント投稿画面に verification （入力確認用の文字列・または音声）を表示するようにさせていただきました．
コメント投稿に一手間掛かってしまいますが，投稿時に表示される文字列を併せて入力してください．

従来通りユーザ登録等の制限はございません．
あくまで機械のボットと区別するためのものですので何方でも気軽にコメントを残してください．

以上です．

CTX - Screen Shot: スクリーンショット

2008-03-29T11:15:00.000+09:00

右クリックメニュー（コンテキストメニュー）にタブ関連の項目を追加する Firefox 拡張機能 CTX スクリーンショット

インストールすると右クリックメニューに「タブを閉じる」「右タブに移動」「他のタブを閉じる」「Firefox を再起動」が追加されます．

設定から表示する項目を選択可能です．

右クリックメニューにタブ関連の項目を追加する Firefox アドオン Context Tab Access Menus 0.1 Released

2008-03-26T01:30:00.003+09:00

HTML エリアの右クリックメニュー（コンテキストメニュー）に『タブを閉じる』『右タブに移動』などの項目を追加する Firefox Extension（拡張機能）．

　Firefox ブラウザにはタブブラウジングの様々なショートカットキーが用意されていますが，マウスのみで操作するときにはコンテキストメニューから色々操作できた方がいいと思い拡張機能 Context Tab Access Menus (CTX) を作りました．
　個人的にはマウスジェスチャよりも，分かりやすい，簡単，確実，初心者向けと考えています．

# 自分はマウスジェスチャ好きではないので．
# ネーミングセンス０です．

ダウンロード

　ダウンロードページは下記 URL から．

Context Tab Access Menus :: Firefox Add-ons

　現在，Firefox Add-ons アカウントをお持ちの方のみのダウンロードとなっています．
　テストユーザ，レヴュー記事を書いてくださる方を募集しています．

Firefox をダウンロード

開発版ダウンロード

　開発版は以下から．

Ctx.dev - Windows Live SkyDrive

　アカウントをお持ちでない方はこちらから最新版をダウンロードしてください．　ヴァージョンは同一のものとなっております．

ver. 0.1 で実装されている機能

タブを閉じる
ウィンドウを閉じる
右タブに移動
左タブに移動
右タブを閉じる
左タブを閉じる
右タブを閉じる
他のタブをすべて閉じる
Firefox を再起動

上記メニュー項目毎の表示・非表示の設定（ツール<アドオン　の「設定」から）
テキスト選択中のメニュー項目の非表示
テキストエリア上でのメニュー項目の非表示
複数タブが開けれているときのみタブ関連の項目の表示

ロケール

　以下の２種類のロケールを用意しております

en-US（英語）
ja-JP（日本語）

# 無償で英語の添削をしてくれる方，　他言語に精通している方募集中！

今後考えている実装

　ただし，今後も開発を進めていくかは……．

最近閉じたタブ（サブメニューに表示）
一つ前のタブに戻る
直前に開いたタブに移動
直前に開いたタブを閉じる

追加機能丸ごとサブメニュー化（設定で切替え）
他拡張機能の利用
ユーザが自由に項目を追加・削除できるようにする？（そういうの別にあったような……）

開発方針

　基本的に機能をゴリゴリ付け加えるのではなく，標準で用意されている関数などにアクセスするメニューを追加する．
　従って，Fx2.0 から追加された「最近閉じたタブ」メニューを追加する場合，それまでのヴァージョンには非対応になると思います．

　ソースは公開です．　上記 URL からダウンロードしたファイル（.xpi：ZIPファイルの拡張子を変更したもの）を解凍してください．
　技術情報は追って当ブログで公開していきます． - フィード

リファレンス

　開発に当たり大半のスクリプトは以下の情報を参考に致しました．
　というか，軽量マウスジェスチャのスクリプトを全て移植すればよかっただけのハナシ

Code snippets:Tabbed browser - MDC - Firefox のタブ関連全般
鳥獣保護区 | Firefox のタブ移動ショートカットキー - タブ移動など
SCRAPBLOG : [userChrome.js] 軽量マウスジェスチャで利用可能なスクリプト集
QuickRestart :: Firefox Add-ons - 再起動のスクリプト

テンプレ変更しました

2008-03-21T23:59:00.005+09:00

ブログデザイン変更．　ただ今，修正中．
数日中はデザインが不安定になるかもしれないですけど，お楽しみください．

デザインの段階からHTML構造を意識してしまうから無難なデザインになってしまう

COLORd Leaf : 名前を色に変換！

2008-01-17T23:48:00.000+09:00

名前→色変換してくれるだけのシンプルな Web アプリです．

Link: http://akanasu.googlepages.com/name2color.html

これは何？

　入力された文字列（単語，名前，地名，…）に対する色の RGB 値を表示します．
　RGB 値への変換は独自の変換規則に基づいて文字コード（列）を色情報に変換するものです．

使い方

　名前を入力して『変換！』ボタンを押してください．
　誰にも分からなかった自分の色が分かります．

　名前の他にも，思いついた単語を２，３語入力してみてください．　よく使う単語の意外な色を楽しみましょう．

注意

名前は４０文字まで
アルファベットの大文字・小文字は区別されません
半角/全角スペースは省略されます
名前等の入力された情報の公開，及び第三者への送信はされません
このアプリケーションは私個人がこのブログ上で公開するために作ったものです
意見や指摘事項などございましたらココにコメントしてください

動作環境

Windows XP 上のIE6-7, Firefox1.5-2.0, Opera9.0, Safari3.0 で動作確認しております
JavaScript オン / CSS オンの環境でご利用ください

後記

■ 2008年初投稿となりました．　ネタ自体は一ヶ月ほど前から作っていたものです．
　恐ろしいほどの遅筆ですが，本年もよろしくお願いします．

■ 『脳内メーカー』とか『ハートメーカー』などに触発されて，名前を色にしてくれるのってなかったな～と 100% 思いつきで作ってしまいました．
今は，勢い 30%・後悔 60%・不明 10% という感じ．

■ 中身は Javascript + CSS のみです．　変換アルゴリズムなども特別なことはしていません．　ソースを見れば全てがわかります（多分）．
　アルゴリズムは今後変わるかも？？

■ 最近作られた色なども一覧表示できるようにしようとも思ったけど，そこまで作り込めずにいる．
　似ている色（単語）の表示とかもしたいな～と思ったり．
やっぱある程度凝ったものを作るとすると，サーバサイドの作り込みも必要．　ZOHO API とか上手く利用できないかな～？

http://akanasu.googlepages.com/name2color.html

6 + 7 > 13 という考え方

2007-12-29T02:02:00.000+09:00

see also : MORI LOG ACADEMY: 納得がいかない足し算

桁が増えることを何故難しく感じるのだろうか。11や12も、8や9と同じく、1つの数字なのに。ただ、表記が2文字になっているだけのことである。数字を表記する方法の問題なのに、何故計算がややこしくなる（と感じる）のだろうか。…（中略）
　さて、5＋5＝10は、気持ち良く覚えられる。また、5＋6＝11もその恩恵によりまずまずだ。6＋6＝12も手が届く範囲というか、まだまだ人に優しい。ところが、6＋7＝13がいけない。一気に難しくなる。これが、桁を越える足し算における最初の難関といえるだろう。

MORI LOG ACADEMY より転載

　これを読んだとき，ふと懐かしさを覚えた．　小学一年生のときを思い出した．　記憶が掘り起こされたといってもいいかも．
　これと同じ疑問に陥ったことがある．　（まあ，一方的な共感でしかないのですけど）

　小学生のときの数字の認識としては（今でもそうかもだけど），1～10 を３分類していた．
つまり，

　1 ～ 3 ≒ 1　　（小さい）
　4 ～ 6 ≒ 5　　（中くらい）
　7 ～ 10 ≒ 10　（大きい）

と，頭の中で変換して数字の大小を理解していた．

とすると，命題の式＜6 + 7 = 13＞は，脳内ではこう変換される．

　約 5 + 約 10 = 約 10

と．
　すると，ここで疑問が生まれる．　約 5 と約 10 を合わせてなんで，約 10 なるんだ？

　『6』も『7』も中くらいには大きい値である．　瞬間的に直感として，２数を足すとより大きな値になりそうだと錯覚してしまう．
　しかし，導き出される『13』という答えでは数の印象が優先して，6 + 7 よりも小さい数字だと一瞬認識してしまう（『1』も『3』も小さい数であるため）．　一度感覚で認識した情報を計算で訂正（or 否定）する作業を施すこととなり，違和感が発生するのだろう．

# うーん，微妙に解には届いてないような気がしますが，勝手に自問自答しました．

　多分，9 や 8 では，-2, -1 をした方が速いということに気付く．
　つまり，7 だけが宙ぶらりんなのだ．

テーブルのセルをハイライトするCSS +α

2007-12-01T18:36:00.002+09:00

更新 at 2007 12 03

　サンプル２，３において IE6 でテーブルが崩れていたものを修正．
CSS コードの修正はありません．

マウスオーバしたテーブルの行・セルをハイライト表示

　CSS のみで，マウスオーバしたセルのスタイルを変更する方法を紹介したいと思います．

※ただし，IE6には対応していません．
※Firefox 1.5, 2.0 で動作確認しております．　IE7, Opera, Safari3.0(Win版) で動作確認しました．

HTML コード：

<table>
<thead> <tr><th> aaa </th><th> bbb </th><th> ccc </th><th> ddd </th></tr> </thead>
<tbody>
  <tr><td> a1 </td><td> b1 </td><td> c1 </td><td> d1 </td></tr>
  <tr><td> a2 </td><td> b2 </td><td> c2 </td><td> d2 </td></tr>
  <tr><td> a3 </td><td> b3 </td><td> c3 </td><td> d3 </td></tr>
  <tr><td> a4 </td><td> b4 </td><td> c4 </td><td> d4 </td></tr>
</tbody>
</table>

元となるHTMLソースコードは上記のような一般的なもの．　もとソースに手を加える必要はございません．

CSS コード：

/*  テーブルのスタイル  */

table, table * {
  border-collapse: collapse;
  border: 1px solid #ddd;  /* テーブルのボーダの色 */
}
th, td {
  width: 3em;
}
thead th {
  background: #69d;  /* 第一行目（項目名）のセルの色 */
}
  th:first-child {
    background: #88d;  /* 左上のセルの色 */
  }

td:first-child {
  background: #ccc;  /* 一列目のセルの色 */
  text-align: center;
}

tfoot td {
  background: #6d9;
}
  tfoot td:first-child {
    background: #8d8;
    text-align: center;
  }

/* マウスオーバしたセルのスタイル  */

tbody tr:hover td {
  background: #dff;  /* 列のハイライト色 */
}
tbody tr:hover td:first-child {
  background: #cdf;  /* 第一行目のハイライト色 */
}

tbody tr:hover td:hover {
  background: #acf;  /* セルのハイライト色 */
}

　上部はテーブル全体のスタイル指定，下部がハイライト部分のセル・行のスタイル指定になります．
色味等は好みで変えましょう（青字部分）．

以下が実際にスタイルを適用したテーブルのサンプルになります．

Table サンプル　１　マウスオーバ・ハイライト

aaa	bbb	ccc	ddd
a1	b1	c1	d1
a2	b2	c2	d2
a3	b3	c3	d3
a4	b4	c4	d4

縦の列（カラム）へのハイライトには対応していません．
なんとかしたい・・・．

テーブルの内容部分のみをスクロールする

　＋αの部分．
　テーブルが巨大になってしまった場合，第一列（ヘッド：項目名部分）を固定して，ボディ部分のみをスクロールさせる方法がある．
それを，HTML には全く手を加えず，CSS のみで表現する手法を提案．

使用する HTML コードは上記と同一．
特別なカスタマイズはいりません．
※ こちらは Firefox ブラウザにしか対応していません．

CSS コード：

tbody {
 height: 200px;
 overflow: auto;
}

tbody タグに高さを指定（例では200px）して，はみ出る部分はスクロールするようにする．

Table サンプル　２　スクロール/バグあり

aaa	bbb	ccc	ddd
aa	bb	cc	dd
a1	b1	c1	d1
a2	b2	c2	d2
a3	b3	c3	d3
a4	b4	c4	d4
a1	b1	c1	d1
a2	b2	c2	d2
a3	b3	c3	d3
a4	b4	c4	d4

　　※Firefox で見てみよう！

フッタも付けるとこのような感じ．

テーブルの内容部分のみをスクロールする　改良

　上記のコードの場合，table の高さの解釈により，無駄な枠線（ボーダ）が表示され，見苦しいものとなる．
この現象を回避する為に，CSS を一部書き換える．

CSS コード：

table {
 background: #ddd;
 border-spacing: 1px;
}
th, td {
 width: 3em;
 background: #fff;
}

border-collapse や border の指定は消します．　枠をボーダではなくて，セル間の空白で表現．
以下のようになります．

Table サンプル　３　スクロール/バグ修正

aaa	bbb	ccc	ddd
aa	bb	cc	dd
a1	b1	c1	d1
a2	b2	c2	d2
a3	b3	c3	d3
a4	b4	c4	d4
a1	b1	c1	d1
a2	b2	c2	d2
a3	b3	c3	d3
a4	b4	c4	d4

　　※Firefox で見てみよう！

横スクロールバーが出てきてしまうのは・・・見逃してください．

参考：web creators 2008年1月号目次»

--
１２月になりました．　やりたい事が増えてきた．

Firefox カスタマイズ３種（自分用） with Add-ons

2007-10-26T03:07:00.000+09:00

職場では基本 IE6 なのですが，やはり Firefox ブラウザを使いたいと思いまして，勝手に入れてます．
インストールするのは不味いので FirefoxPortable の方をフォルダに解凍してこっそりと．
しかし，Firefox では会社のネットワークが繋がらないらしい．
　User Agent Switcher を使って偽造しても駄目でした．　どんなフィルタかけてるのよ．

　仕方ないので，IE Tab を入れて，気分だけでも Firefox．　IE 表示するフィルタには"http://*"，"https://*"を追加．　タブブラウジングになるだけでもありがたい．

　しかしながら，デフォルトでの設定でいろいろ使い辛いところがあったので，設定変更してみました．
その備忘録としてここに書きます．　酷く限定的な情報ということは重々承知しています．

Firefox search-bar 検索時にタブで開くカスタマイズ

※注意 For Fx 2.0.*

Address-bar に"about:config"＜Enter＞と入力．
browser.search.openintab の項目を探す．
default で値が false になっていると思うので，ダブルクリックして true へ変更．
おわり

IE Tab をカスタマイズ

IE Tab アドオンにおいて，リンクスポットを『新しいウィンドウで開く』としたとき，タブをバックグラウンドで開くようにカスタマイズ．

Address-bar に"about:config"＜Enter＞と入力．
ietab.focustab の項目を探す．
default で値が true になっていると思うので，ダブルクリックして false へ変更．
おわり

ナビゲーションツールバーをスマートに

ディスプレイは17型でそれ程小さい訳ではないのですけど，ツールバーが丈取りすぎで圧迫感があるので下記のスタイルを適用させてボタン周りを省スペース化．

/* ナビバーをスマートにする */
toolbox toolbar#nav-bar {
}
toolbox toolbar .toolbarbutton-1,
toolbox toolbar .toolbarbutton-menubutton-button,
toolbox toolbar .toolbarbutton-menubutton-dropmarker {
    padding: 0 1px !important;
}

以上をユーザスタイルシート Firefox's Application Data Folder/profile/chrome/userChrome.css へ追記する．

これと併せて，ブックマークツールバーのラベルも消して更にスマートに．

スタイル変更前　※ スクリーンショットは後日挿入します．
スタイル変更後　※ スクリーンショットは後日挿入します．

■ about:config で設定書き換えってのは今まで余りやってこなかったのですが，改めて試してみると通常の設定画面ではできない設定も簡単にできるので便利だな～と関心してしまいました．
　変数名（？）でも十分意味は理解できるしね．
■ 検索バーで検索したあと（Enterキーを押したあと）に，バーの中を空にする（キーワードを消す）方法を知っているヒトいませんか？
　いつまでも検索ワードが残っているのは格好悪い．

参照リンク - Firefox Add-on 関係

User Agent Switcher :
- User Agent Switcher
- User Agent Switcher :: Firefox Add-ons
IE Tab :
- IE Tab :: Firefox Add-ons

Firefox の LiveBookmark（フィード）を取得する方法

2007-10-25T00:30:00.000+09:00

Firefox の LiveBookmarkを取得する XUL スクリプト．
Feed Sidebar という拡張機能からの紛うこと無き転載です．

作者ページ：Feed Sidebar :: Now I Have a Blog Too
Feed Sidebar :: Firefox Add-ons

ヘッダ内で，

<script type="application/x-javascript" src="chrome://browser/content/bookmarks/bookmarks.js"></script>

をインクルードして，以下のコードを書いて下さい．

// Live Bookmark Class
function CLiveBookmark () {
    return this;
}
CLiveBookmark.prototype = {
    folders : [],
    livemarks : [],
    is_init : false,
    init : function () {
        if (!RDF) { initServices (); }
        if (!BMSVC) { initBMService (); }
        this.livemarks = [];
        this.is_init = true;
    },
    collect : function () {
        if (!this.is_init) { this.init (); }

        var root = RDF.GetResource ("NC:BookmarksRoot");
        var feedURLArc = RDF.GetResource ("http://home.netscape.com/NC-rdf#FeedURL");
        var urlArc = RDF.GetResource ("http://home.netscape.com/NC-rdf#URL");
        var nameArc = RDF.GetResource ("http://home.netscape.com/NC-rdf#Name");

        var folders = [ root ];

        while (folders.length > 0) {
            RDFC.Init(BMDS, folders.shift ());

            var elements = RDFC.GetElements ();

            while(elements.hasMoreElements ()) {
                var element = elements.getNext ();
                element.QueryInterface (Components.interfaces.nsIRDFResource);

                var type = BookmarksUtils.resolveType (element);

                if ((type == "Folder") || (type == "PersonalToolbarFolder")){
                    folders.push (element);
                } else if (type == 'Livemark') {
                    var res = RDF.GetResource (element.Value);
                    var target = BMDS.GetTarget (res, feedURLArc, true);

                    if (target) {
                        var feedURL = target.QueryInterface (kRDFLITIID).Value;

                        var target = BMDS.GetTarget (res, urlArc, true);

                        if (target) {
                            var siteURL = target.QueryInterface (kRDFLITIID).Value;
                        } else {
                            var siteURL = 'about:blank';
                        }
                        var target = BMDS.GetTarget (res, nameArc, true);
                        if (target) {
                            var feedName = target.QueryInterface (kRDFLITIID).Value;
                        } else {
                            var feedName = feedURL;
                        }
                        this.livemarks.push ({ "label" : feedName, "url" : feedURL, "link" : siteURL });
                    }
                }
            }
        }
    },
    getAll : function () {
        // 初期化して再取得
        this.init ();
        this.collect ();
        return this.livemarks;
    }
};

好きなところで new して get する．

var live = new CLiveBookmark ();
var list = live.getAll ();
for (var i in list) {
    alert (list[i].label + " + " + list[i].url + " + " + list[i].link);
}

ほぼ転載ですので，間違った情報や冗長な部分がある場合は指摘してください．
# というか教えて下さい！

一年前はこの手の情報は検索かければ直ぐ出てきたのですが，今は『ブックマーク』という単語が入ると，『ソーシャルブックマーク』や『はてブ』だらけ．
近年の SEO 対策の弊害を感じました．　通常の検索において誰かのブックマークページなんて，はっきり言ってインデックスされなくていいと思わない？

どうも，お久しぶりです．
更新再開していこうと思います．

自分の場合，ブログを更新するのにはパワーも時間も使うので，なるべく時間を掛けず記事をPost できるように訓練せねば．　従って，ある程度はこうした散発的な Post が続くと思います．
いや，ちゃんと気合入れて更新しますよ．

最近の色々残念な事； about Google APIs ＆ニコニコブックマーク

2007-06-22T01:19:00.000+09:00

最近（ちょっと前），Google Spreadsheets を Web アプリのデータベースとして利用できないかと考えてまして，API について調べているのですけど．

残念な事 for Google SpreadSheets API

　Spreadsheets （に限らず Google API で）はフィードの形式が JSON でも配信しているので，セルやリストの値の取得は本当に２，３行で書けるのですけど，セルへの値の書き込みが PUT リクエストで直接フィードの実体を渡さないとできないもよう．
　つまり，PHP, Java などサーバサイドプログラムを駆使しないと Spreadsheets の編集は自由にできない，ということ．
　XMLHttpRequest のクロスドメインの問題から Javascript だけでシートを制御するのは結構無理そう．
　まあ，セキュリティのことを考えれば当然？
　ちょっと残念．

残念な事 for ニコニコブックマーク

　多くのことは開発者ブログのコメントや設置された掲示板で匿名多数の方々が言ってますので，別の切り口から．

　ニコニコブックマーク（略称ニコブ）とは，指定した URL の Web ページの好きなところに皆（現時点ではニコ動アカウント保持者）でコメントを残せるというニワンゴの新たに始めたサービス．
　コメントの閲覧のみ全開放．

　技術的には，Web ページのキャプチャ画像を撮ってきて，画像（ページ）上の絶対座標へコメントを貼り付けるというもの，ということですが・・・
　キャプチャ画像という逃げに出たことが非常にがっかりでした．

　Web ページというものはクライアントのディスプレイ領域がそれぞれ異なるため，ある程度フレキシブルにできている．　フレキシブルに作られているページが多数存在する．
　そのため，あらゆる Web ページ上のいたるところにコメントを・・・と思うと，当たり前のことですが，コンテンツの折り返しなどで絶対座標にオブジェクトを置いておくことができない（クライアントの環境によっては見えなく隠れてしまったり，意図しない位置へ表示されたりしてしまう）．
　その問題に対して，今まで多くのツールでは明快な回答というものが示されてこなかった．

　ニワンゴでさえもそれに対して，キャプチャ画像という逃げに出たことが，非常にがっかりでした．

　またコンテンツに対するコメントとコンテンツ自身が切り離されてしまっていることが同系統のアプリに当てはまる問題にあるように思う．
# まあ，ソーシャルブックマークとはそういうものとも言えなくもないが．
# でもニコブってブックマークか？

■
蛇足

Firefox Developor's Conf. 2007 Summer

へ参加しました．　興味があったので．

日本では Firefox にいまいちメジャー感がないのがどうしてか分かったような気がした．　以上．

|days| Google セミナ第２回へ参加してきました

2007-05-30T23:48:00.000+09:00

Google Japan Blog: Google プロダクトセミナー第2回 @ Apple Store Ginza

参加してきましたー．
今の研修先が銀座に比較的近いので，仕事終わりに寄りました．

まあ，若干１時間のセミナですからはじめから期待していなかったので，内容に関しては正直ふーんという風に聞いていました．
それでもまあ雨の中，大勢のヒトが集まりましたね．　入場開始の更に１０分前でも行列が出来てました．　内容的にも技術的な話は余りなかったので女性の参加者も多数でした．　やっぱり，皆自分のブログを持っているような方々が集まったようです．

Ｑ＆Ａで２番目に質問をされた方が結構コアなことを聞いてくれたので，それでやっと場が締まった感じでした．　ＧＪ！　と心の中で親指立ててました．

一般ユーザ向けというには少しコアなヒト達が集まってしまったのではないかな，と思いました．

--
次回第３回の開催は，２００７年６月２１日だそうです．　木曜日です．　興味のあるヒトは参加してみては？　無料です．

|mobile| days| 内容のない話ばかり

2007-05-25T02:44:00.000+09:00

不定期更新が続き色々棚上げして放りっぱなしですが，駄日記的に書きます．

■
今日は PM9:52 に寮食を食べて PM11:44 にこの Post を書き始める．
最近は余り頭がアウトプットするモードにない感じです．　コーディングなんかも進めてない．

やっていた事といえば，何故 m○xi が Web2.0 的でないのか駄目なのかを考えたり，アイコンのデザインを考えたり，ニ○ニコでスク○イド，プラネ○ス，リ○ァイアスを，You○ube で PV を見漁る日々でした．

■
さて，ここ数日のニューズでアツイのはモバイル関係でしょうね．　DoCoMo 2.0（← なんだコレ）に続き各社もこぞって夏モデルを情報開示してきました．　ドコモ以外はオーソドックスなモデルで攻める感じでしょうか．
　そんな中で一番注目なのは矢張り X02HT（ソフトバンク・モバイル）．　やっと日本でも一般向けにストレート型スマートフォンが出てきてくれました（ソフトバンクですけど）．

ITmedia Keywords：X02HT

　使っている姿がカッコいいかどうかは別として，あの愚直なまでに無骨なデザインがナイスですね～
やっぱり，スライド式なんて臭い物に蓋的な考えなんて邪道っスよ．

■
　それにしても，テレビのある生活は不健康的・・・というか情報過多で非効率的だと思うようになってきた．　今，何も考えずに点けっぱで垂れ流しにしているのだけれど，雑多で不必要な情報が溢れ過ぎているような気がする．
　ユーザの好みや要求を学習して有益な情報のみを自動でピックアップする機能とかもうそろそろできてもいいのではないかな？　それとも Web が TV を全て代替えするようになるのかな～？

|PC| idea| JSWS| JavaScript仮想ウィンドウシステムver.0.1.20070503

2007-05-11T01:14:00.000+09:00

本日の動向

ネットに繋がりました．

今，もう一年以上前ノートPCを使っているのですが，USB キーボードも入手！
これで膝の上が熱重たくなることもなくなりました．
持つべきものは良き隣人ですな～

前回からの進捗

仮想ウィンドウシステムをちょろちょろ進めました．

内部動作を変えました．　ウィンドウをリサイズ可能に．　センタリング配置などの設定をウィンドウ作成時に可能に．

window_system.html

ver 0.1.20070416 / post

アイデアなどなど

なんとなく，これを作ったきっかけなどについて語ってみたいと思います．
　これを作ったきっかけは映画『交渉人・真下正義』で真下さんが使ってたパソコンの検索システム（OS?）がかなり良く見えたので．

（実際はあんなUIのソフトウェア，OS なんてないよな～）

と思いつつ．

（今の OS のウィンドウシステム，ウィンドウの挙動なんて十年・二十年以上前から代わってないよな～）

と技術の停滞感を感じていました．
　Vista や Web 2.0 と呼ばれる Web アプリなどトレンドとなる UI のデザインなどは日々洗練されてきていますが，ユーザの操作方法・いわゆるユーザ体験には劇的な変化は少ないのではないか，と思い始めるようになりました．

ユーザはアイも変わらずマウスでカーソル操作をしているし，ウィンドウはユーザの操作に対する反応しかしないし．

そこで，何か新しい操作感のするウィンドウシステムを・・・ということで，簡単な試作として JavaScript で基本的な挙動を再現してみました．

ただ，もう JavaScript + HTML の限界を感じているので（主に描画面） Flash, ActionScript, Flex へ移行してみようと思っています．　先ずは勉強ですが．

蛇足・最近のデザイン彼是

Web2.0のデザインの特徴として透過色やグラデーション，曲線（円・カーブ），影がメインとしてありますが，最近では何処もかしこもグラデーションなので，全体としてみた感じがぼやけて目が疲れてしまう．　パステル調なども同じく．
自分としては，ツートンカラー，同系色の濃淡二色のコントラストが好きだな，というだけのハナシ．
グラデーションなんかは背景などの目立たないところで一箇所使う程度が良しだと実感した．

|JS | Web| JavaScript版仮想ウィンドウシステム

2007-04-15T23:27:00.001+09:00

思い立ってウィンドウシステム作ってみました．
JavaScript で．

開発環境は Firefox 1.5.* ~ 2.0.* / WinXP
スタイルは Fx で最低限にしか対応させていないので，IE系では表示が崩れます．

window_system.html

これが，この一週間の成果です・・・．
簡単な複数ウィンドウ操作までしか実装していません．

これからこれでどうする？とか明確な目的はありませんが，まだまだやり切れていないので，これからも実装を続けます．

Windows の一通りの動作は実現できるようにしたい．　簡単なアプリケーションとか．

|days| 日常

2007-04-08T23:48:00.000+09:00

既に新生活が始まって１週間が経ちました．
　一週間をこんなに長く感じたのは久々（初めて？）かもしれません．　物忘れ激しいので曖昧です．

　今は新人研修中ですね．　研修中は定時（１８時前）に帰れるのですが，寮から研修先まで移動が１時間なので，寮に着くころには普通に８時です．　風呂が０時までであり，夕食などもろもろ引くと自由な時間は２時間程度．　夜更かしして４時間と言ったところでしょうか．
　ネット環境も今のところ申し込んでないので，ありません．　クリエイティブな活動は今のところ停止中ですね．
　残業のない新人研修中なのに・・・．
　まず，パソコンに触っている時間が格段に減った．　このままパソコンなしの生活に慣れてしまったらいかんと危惧している次第であります．

　取り合えず，寮のネットに申し込もうと思います．　一日２時間，ネット活動・コーディングに従事したい．

|days|祖父の言葉

2007-03-29T01:48:00.001+09:00

４日ほど前から実家に来ています．
　新しい住処（寮）への入寮日が４月１日ですので，しばらく地元に戻り療養しています．

　今日は方々に挨拶回り．　お墓参りも行きました．

「若いうちの苦労は苦労じゃない」（亡くなった祖父の口癖だったらしい）

「いつ死ぬかわからない」

「目標を持つ」

もし，人生において二つの選択肢があるなら苦労するほう苦労する方を選びなさい．　家持つのも，結婚するのも，独立するのも，若くて力のあるうちにやれば乗り越えられないものはない．

　人生において，いつ今の生活が分断されるかわからない．　そういうことを考えたとき，自分は酷く投げやりになってしまう．　日々目標を持ち，悔いのない一日を過ごすことを考える，そういうことが必要なのかもしれない．

　取り敢えず身近な目標として，週一くらいのペースでブログを書く．
　日々成長できるように，情報配信・世界へのアウトプットを行いたいと思います．　自分を腐らせないために

|blog|Utils| 被リンク元を表示する方法，と自己リンクを除外する手法の提案

2007-02-28T23:37:00.000+09:00

Blogger の機能のバックリンク（Backlinks）はトラックバック機能のないブログにおいて投稿した記事へのリンク元を参照できる結構機構的にも面白い方法です．　スパムにも強い！
しかしながら，新着バックリンクの通知機能というものがありません．

そこで，新着リンクだけでもチェックできるようにする Tips を紹介したいと思います．
必要なのは３つのサービス．

　上記のサービスは全て無料です．（一部ユーザ登録必要）

　基本的な考え方は，

Blog Search で"link:"検索演算子を用いて自分のブログへリンクしているブログ記事を検索する
検索結果のフィードを取得する
フィードを利用する　>>
- RSS リーダなどに登録する
- ブログに貼り付ける（Blogger のフィードウィジェットを利用する or Feed2JSを利用する）
リンク元をチェックしてほくそ笑む

です．

具体的な設置方法

ブログの被リンク元を参照するフィードは，以下のように Blog Search 経由で取得します．

http://search.blogger.com/blogsearch_feeds?q=link:your.blog.domain/&hl=ja&scoring=d&ui=blg&ie=utf-8&num=20&output=atom

赤字の部分を自分のブログURL に変えてください．
取り敢えず，RSS リーダ用のために表示件数を20件にしておきます．
緑字はアウトプットするフィードのタイプです．　Feed2JS のサービスを利用してブログなどに貼り付ける場合は rss と書き換えてもらうことで文字化けを回避できます．

　Blogger ユーザならば，上記のフィードURL を自分のブログのフィードウィジェットとして貼り付けることができます．
　旧 Blogger ユーザやユーザ以外の方でも，上記の URL を自分が利用している RSS リーダに登録するとか，Feed2JSというサービスを利用する方法でチェック or 貼り付けることができます．

注意：　これは，Weblogs.com へ更新Ping を送信しているブログだけが，その更新情報をキャッチされて参照可能になります．　従って，Weblogs.com へ更新 Ping を送信していないブログはチェックされません．
注意２：　このリンクリストは JavaScript による動的表示なので，ブログのアクセスアップなどには繋がりません．

発展 ~ 自己リンクを除外

　自己リンクを多用しているブログなどでは，自分が自分のブログの記事を参照する結果ばかり出てきて，他人からのリンクのチェックができない．

　そこで，この被リンクリストから自己リンクを除外する方法を紹介．

　最も簡単な方法として，Feed Rinse を利用してフィードをフィルタリングしたいと思います．

※ Feed Rinse とは..
　登録したフィードに特定のキーワードでフィルタリングを掛ける Web サービス．

このサイトではRSSを特定のタグやキーワード、サイト名でフィルタリングしてくれて、その結果のRSSを返してくれる。

via. メールからRSSへ (Feed Rinse.com) | 100SHIKI.COM

残念ながら，Feed Rinse には記事urlやドメインでのフィルタリングは（現在）できないため，著者名（Author）で分類することとします．

1) まず，アカウントを作ります．
ユーザ登録（E-mailアドレス）が必要ですが，無料で直ぐ作成できるので，スッパリ作ってしまいましょう．

2) アカウントを作って，次の画面に移行できたら，フィードを登録しましょう．
フィードは上記のコードです．

3) 登録したフィードにフィルタ(filter)を作ります．
[Modify filter] ボタン（若しくは [Set up rules]）を押して，Author で自分のユーザ名を除くようにフィルタを掛けます．
もし，似たユーザ名のヒトがいる場合は，フィルタを追加してもっと絞り込みましょう．
※ 日本語には対応していないようです．　フィード内容が日本語でも構わないけれど，フィルタの条件に日本語は使えないようです．

Channel とかありますが，今は関係ないです．

4) フィルタを作ったら，フィードアイコン（）をクリック．　リンク先のアドレスを，RSS リーダや上記にある方法でブログに貼り付け，更新チェックをしましょう．

最後に

　長くなりましたが，以上は『自分でコードを書かない』『お金を掛けない』方法で，Backlinks をチェックする方法がないかなを思いまして，試しながら実現させました．
少し工数が多いですので，フツーにやりたいヒトは，クリボウさんの力を借りましょう．

|days| 修論発表

2007-02-16T00:55:00.000+09:00

日付変わって今日は修論発表の日です．

どうしてこんなにも緊張感がないのだろう．

いや，緊張感じゃないな．　実感がないんだ．　これで大学組織ともお別れなんだ，という実感が．

朝一の発表なので，発表自体よりも寝過ごすことの方が心配です．

前日，ほぼ貫徹ですからね．

残り睡眠時間は６時間といったところか．

じゃあ　さようなら．

|Web| 日本語版Gmail アップデート

2007-02-03T06:34:00.000+09:00

今，Gmail にアクセスしてよく見てみたら，インタフェースがプチ進化していた．

　このとき英語版のみのアップデートで１１月でした．
　日本語版でも５つの新機能全てが対応しているかは調べてませんが，気付いたのが２月始めで，英語版とは大体２，３ヶ月のズレといったところでしょうか．

　インタフェースは非常にすっきりした感じを受けました．　多分配色とかの問題なんでしょうけど・・・

　携帯の CHTML 版にもアクセスしてみましたが，こちらはログイン画面だけでした（DoCoMo端末）．
　クッキーを有効にして下さいってさ．

|Blogger|template| ページタイプによる Widget 操作の注意点

2007-01-29T21:09:00.000+09:00

フィードウィジェットは他ブログサービスなどでは見掛けない，特徴的な機能の一つと思います．
【”最新のコメント”を追加する方法】などを見ても面白い使い方ができそう．

　しかしながら，テンプレ編集（Expand 表示）で Blogger 独自のタグ群を見つめているとき，ウィジェットタグ<b:widget>...</b:widget>内で特異な ID 指定がされていることに気づきます．
　つまり，ブログの動的HTML生成時にウィジェット部分の (x)HTML を吐き出したあと， JavaScript でその ID のコンテンツの書き換えを行っているということでしょうか？

だから何なの・・・？

ウィジェットを記事単独ページで非表示にするために，

<b:includable id='main'>
  <b:if cond='data:blog.pageType != "item"'>

　<!-- コンテンツ -->

  </b:if>
</b:includable>

とする手法がありますが，これだと<ul/>タグに指定されている ID をページ構成時に消してしまいます．

これは不味い

この ID が削除されたことは，Blogger の方は知りません．従って，単独ページの構成時に Blogger の JavaScript が存在しない ID を参照してしまい JavaScript エラーが発生します．

　他の大部分のウィジェットでは，あまりウィジェットタグ内で ID 指定などされていないようですが，フィードウィジェットに関しては非表示にした場合，ID 参照エラーが起こり，その時点で Script がストップしてしまいます．
従って，記事単独ページにおいて Script がストップしてしまい，同様の JavaScript で実現されるバックリンクが表示されない，というの現象があります．

じゃあ，どうすればいいの

特定のページで非表示にしない

非表示にしたい場合は以下のようにする


<b:includable id='main'>
  <b:if cond='data:blog.pageType != "item"'>
    <h2><data:title/></h2>
  </b:if>
    <div class='widget-content'>
    <ul expr:id='data:widget.instanceId + "_feedItemListDisplay"'>

  <b:if cond='data:blog.pageType != "item"'>
      <!-- ループ -->
  </b:if>
    </ul>
    <b:include name='quickedit'/>
    </div>
  </b:includable>

青字：　ID 指定の部分．　コンテンツのラッパ部分は残す．
タイトルとアイテムのみ除去

なんか面倒ねー・・・

これは，Blogger のバグだと考えられます．　そもそも Blogger ブログは CSS エラーも多い！
Blogger ヘルプのレイアウト用ウィジェット要素タグ欄を見ると，<b:widget/>タグにはページタイプによる表示／非表示を指定する属性が定義されている模様（typePage）．
但し，現在実装されていません．（at 2007/01/29.）

恐らく，将来的にはページエレメントの編集画面などで，正式にページの種類による表示非表示の指定ができるようになると思います．
・・・そうなることを待ちましょう．

|Blogger|template| Blogger の Label を TagCloud 化

2007-01-19T11:31:00.000+09:00

ようやく旧 Blogger を抜け出すことができました．
そこで，テンプレートも新しくし，心機一転．　はじめさせていただきます．

templete by Envy inc.

Envy Inc.: テンプレート配布開始

# 素晴らしいテンプレートをありがとうです．

-- ここからは Blogger バナシ

　果てさて，新 Blogger になって提供されるようになった Label 機能（カテゴリ，タグ）ですが，Blogger には貼り付けたラベルの一覧を表示する方法がリスティングしかありません．

今回はこれを TagCloud 表示化するようにテンプレートカスタマイズしてみました．

Label 一覧を TagCloud 化

これはテンプレートを直接書き換えるので，テンプレートのバックアップを行ってから自己責任でお願いします．

それでは．

Blogger のダッシュボードからテンプレートのHTML編集画面へ移る
ウィジットのテンプレートを Expand 表示にする
widget タグの type='Label' とあるものを探す．
例：　<b:widget id='Label1' locked='false' title='Labels' type='Label'>
※　もしなければ，ラベル一覧のエレメントをページに追加していないので，先ずページ要素を追加する

<b:widget ...> ~ </b:widget> まで，タグで囲まれた所を以下のコードに置き換える（コピー＆ペースト）


<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>

    <ul style='font-size:100%; padding:0; text-align:justify;'>
    <b:loop values='data:labels' var='label'>

      <li style='list-style:none; display:inline; margin:0 4px 0 0;'>

        <b:if cond='data:label.count >= 200'>
          &lt;span class='posts-200' style="font-size: 250%;"&gt;

        <b:else/><b:if cond='data:label.count >= 150'>
          &lt;span class='posts-100' style="font-size: 230%;"&gt;

        <b:else/><b:if cond='data:label.count >= 100'>
          &lt;span class='posts-100' style="font-size: 200%;"&gt;

        <b:else/><b:if cond='data:label.count >= 70'>
          &lt;span class='posts-50' style="font-size: 170%;"&gt;

        <b:else/><b:if cond='data:label.count >= 50'>
          &lt;span class='posts-50' style="font-size: 150%;"&gt;

        <b:else/><b:if cond='data:label.count >= 30'>
          &lt;span class='posts-30' style="font-size: 140%;"&gt;

        <b:else/><b:if cond='data:label.count >= 20'>
          &lt;span class='posts-20' style="font-size: 130%;"&gt;

        <b:else/><b:if cond='data:label.count >= 15'>
          &lt;span class='posts-10' 1style="font-size: 120%;"&gt;

        <b:else/><b:if cond='data:label.count >= 10'>
          &lt;span class='posts-10' style="font-size: 110%;"&gt;

        <b:else/><b:if cond='data:label.count >= 8'>
          &lt;span class='posts-1' style="font-size: 100%;"&gt;

        <b:else/><b:if cond='data:label.count >= 5'>
          &lt;span class='posts-1' style="font-size: 85%;"&gt;

        <b:else/><b:if cond='data:label.count >= 3'>
          &lt;span class='posts-1' style="font-size: 75%;"&gt;

        <b:else/><b:if cond='data:label.count > 0'>
          &lt;span class='posts-1' style="font-size: 65%;"&gt;

        <b:else/>
          &lt;span class='posts-0' style="font-size: 50%;"&gt;

        </b:if></b:if>
        </b:if></b:if>
        </b:if></b:if>
        </b:if></b:if>
        </b:if></b:if>
        </b:if></b:if>
        </b:if>


        <b:if cond='data:blog.url == data:label.url'>
          <data:label.name/>

        <b:else/>
          <a expr:href='data:label.url' expr:title='data:label.count + " posts: " + data:label.name'><data:label.name/></a>

        </b:if>

      &lt;/span&gt;

      </li>
    </b:loop>
    </ul>

    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

少し長くて冗長かもしれませんが，内容自体は非常に単純なので読んで理解するのも難しくはありません．
if-then ルールが長いですが，自分の好みに合わせて更にカスタマイズしてください．

保存

で終了となります．　再構築の必要がないので，ブログを更新して表示して見てください．

今回のミソは `<span >`

　因みに <span となっているのはタイプミスではありません．

　新 Blogger の if-else タグ文は，その中でもコンテンツがきちんと閉じてなければなりません．
つまり，<タグ> と </閉じタグ> の組が必ず同じ if 文内になくてはなりません．

今回のように，条件文が多かったり細かく表示を変えたかったりしたい場合などでは，とても冗長になり記述量が増えてしまいます．
しかしながら，（現在の Blogger では）上記のように記述することで if 文コンテンツ内の HTML タグを閉じずにまた正式なタグとして適応させることが出来ます．

注意点

　今回の実装方法は，もしかしたら Blogger のバグを利用したものかもしれません．　将来は仕様が変更されるかもしれませんし，実現できなくなるかもしれません．
　また，< でエスケープしたとしても，構築したブログではタグとして認識されるので，閉じタグなどをきちんと自分で文法チェックしてください．
以上のことを留意してテンプレートに組み込んでください．

スタイルを少し変えたい・・・？

　投稿数自体が少なくてタグ全体の文字が小さくて見えない・・・，というときは以下のようにスタイルを指定して文字の大きさを変えてください．
&kt;head> の中の <style> タグで，

<style>
...

.Label .widget-content ul {
  font-size: 130%! important;
}
...
<style>

他にも，投稿数毎にクラスを割り当てているので，それを利用してより見やすいように調整できます．
例えば，50件以上のものをより強調したい


.Label .posts-50,
.Label .posts-100,
.Label .posts-200 {
  font-size: 150%! important;
  font-weight: bold;
}

投稿数の少ないものをより小さくしたい


.Label .posts-1 {
  font-size: 80%! important;
}

など指定できます．　投稿数が増えると共にかえていきましょう．

その他

その他にも，Label の表示形式を工夫する方法としては以下のエントリもあります．　こちらも参考に．

Blogger Beta Tips: ラベルをメニューのように使う

追記 at 2007年02月28日

ul タグのスタイルに text-align: justify; を指定して表示を均等割り付けにしました．

[Firefox / Extension / Dwin]_ Web世界の片隅で哀を叫ぶ

2007-01-18T03:21:00.000+09:00

うゎあーーーん

XUL Apps > Split Browser - outsider reflex

一年以上前からちまちま作っていた Firefox 拡張機能と同じものを作られたー．
しかも，自分のより全然，出来がいい．　しかもしかも，こんな大手さんに．

作り出す前に一応ちょこっと調べたのに，そのときは欲しい機能の拡張機能が見当たらなくて，いっちょ作ろうと思ったのになー．
調べてみたら，前ヴァージョンのはもう2003年に公開しているじゃないの．　やんなるわ，マッタク

いっそ，開発をストップして要望だけ丸投げしようかな～（ｳｿ）

使ってみての感想

■ 機能
この拡張機能は Firefox ブラウザの HTML 表示領域を無限に分割していくというものです．
複数の Web ページを見比べたり，別ページをブラウジングしながら別ページで調べものをしたり，・・・ということに使える．

■ 特徴
現在表示しているページ，タブ，リンク先を分割表示可．　分割した先でも普通にブラウジングが行える．　但し，タブ機能はなし．
分割数の制限なし．　（メモリの許す限り）思う存分分割できる．　もちろん，ディスプレイサイズも広くなくてはあまり意味はないけれども．

■ 不満点
無限に分割できるのが特徴ですけど，どうも・やっぱり無駄げ．
二つか三つ表示までで十分です．
分割した先でもタブブラウジングができて，分割ウィンドウの表示非表示を切り替えられればよし，なのにな．

・・・と，いうかそんなの機能のものを自分が作ってましたです．　まだまだ不十分だけど，もうちょっといい感じになったら公開しようかな．
いろいろソースなど見て参考にさせていただきます．

--

※ 2007年初の書き込みが愚痴になってしまってすいません．　今年もこれからもより精進したいと思います．
本年もどうぞよろしくお願いします．

Firefox / Extension / Dwin

[Web / blog]_ レッド ■ ワンのブラウザ・シェア　Dec. 2006版

2006-12-30T23:50:00.001+09:00

clmemo@aka: clmemo@aka のブラウザ・シェア (2006/12)

・・・と　いうことで，このブログへアクセスしてきたユーザの調査した結果も示してみます．

Internet Explorer: 46.88%
Mozilla Firefox: 43.75%
Opera: 6.25%
Safari: 3.13%

Google Analytics (2006年12月分)

　Google Analytics をこのブログに組み込んでからちょくちょく観察はしていたのですが思ったより Firefox ユーザが多い．（そして思ったより Opera ユーザが少なかった）
因みに OS のシェアは，

Windows: 78.13%
Macintosh: 14.06%
Linux: 6.25%
UNIX: 1.56%

Google Analytics (2006年12月分)

でした．

　で，2006年を通しての結果は以下のようになります．

Internet Explorer: 49.21%
Mozilla Firefox: 39.35%
Safari: 6.14%
Opera: 2.98%
Netscape: 1.21%

・・・他 1% 未満

Google Analytics (2006年6月設置より2006年12月まで)

（今年も）頻繁に更新できませんでしたけれど，皆様飽きずに見に来て頂いてありがとうございました．
恐らく，これが今年最後の Post になるでしょう．
良いお年を

# New Blogger（旧：Blogger Beta）へ現在移行できないみたいね．
# 今年中にこのブログも移行してしまおうと思っていたのにな．

番外編: 2006年12月のモダンブラウザ・シェア

IE 7.0: 13.33% (IE 100%とした場合)
Firefox 2.0 + 2.0.0.1: 57.14 + 10.71% (Firefox 100%とした場合)

IE7 よ，もうちょっとがんばろう

Web / blog

[Web / mail / idea]_ 今後，Webアプリを作るにあたって参考になりそうな Tips・２

2006-12-25T20:15:00.000+09:00

受信したメールを処理する方法

.forward というファイルを UNIX のメールサーバのホームディレクトリに置くとそこに書かれている mail address 宛にメールを転送できる。

例： .forward


****@gmail.com
*******@kaisya.co.jp
#own-account@own-server.com

#自アドレス　とすることで、受信したメールを自サーバに残しておける（ループなし）。

これを利用して

|exec /home/user/script

と記述すると、メール受信時に /home/user/ にある script を実行できる（らしい；　未確認）。

メールの内容に対して処理したい場合は，標準入力経由でヘッダ情報・メール本文が入力されるので

/home/user/script


#!/usr/local/bin/perl
while (){
# 処理
}

として処理を書けばメールの内容を処理できる．

これを応用して・・・

前回の Post で紹介した Perl ベースのフィード生成スクリプトと組み合わせれば受信メールからタイトル・本文抜き出してフィードとして公開ってこともできるかも．

# やる意味があるのかどうなのか・・・少し判断つかなかったので，投げてみる．

Web / mail / idea

[Web / feed / idea]_ 今後，Webアプリを作るにあたって参考になりそうな Tips

2006-12-13T20:31:00.000+09:00

借りていたサーバが一時閉鎖ということで，独自サーバで，色々とやろうとしていたことができなくなったわけで．
　まあ，お金と時間を稼げるようになったら，サーバ借りようかな．

　で，アイデアとして今まで持っていて，今後Web（サーバ or クライアント）使ってWebアプリでもやろうかって時に使えそうな技術的 Tips を．
　主に，Web上からの転載ですが，ばらばらに散らばった情報を一つに集めようかというい試み（らしい）．

サーバサイドで RSS フィード生成

Kawa.net xp: [Perl] XML::FeedPP - RSS・RDF・Atomフィードの解析・生成・変換・結合 http://www.kawa.net/works/perl/feedpp/feedpp.html

　スクリプト言語 Perl でフィードを扱うためのモジュール．　サーバへのインストールタイプ．　・・・であるけれども，それ単体(FeedPP.pm, TreePP.pm)でもピュアPerl なのでインストール不要で使える．
使い方は簡単．

./file.cgi
./XML/FeedPP.pm
./XML/TreePP.pm

呼び出す CGI ファイルに対して上記のように二つの PM ファイルを置き，
file.cgiで

use strict;

use XML::FeedPP;

と書くだけ．
　読み込むファイル名（URL），保存先ファイルなど指定してローカルに保存することも，別サーバから取得（及びパーズ）することもできるし，タイトル，リンクURL，など指定して独自フィードを作成することも可能．
　サンプルやもっと詳しい使い方はリンク先にあるので，興味のある方は見てみてください．

これを使って・・・

　Feed2JS（指定URLのフィードを読み込んでJavascriptコードを吐く）なんかの機能はこれで作れると思うし，フィードを利用してなんか Web アプリを作るのに使えそうなモジュールかな．

何かいいアイデアがあったら考えてみよう（結構投げやり）

Web / feed / idea

[days]_ 突然ですが・２

2006-11-07T07:40:00.000+09:00

祖父が亡くなりました．　先日（２００６年１１月３日）．
シンガポールから帰った翌日でした．　葬儀やなんかは８日，９日にやります．

もうね，シンガポールでのことなんて吹っ飛びましたね．

days

[days]_ 突然ですが

2006-10-29T09:42:00.000+09:00

シンガポール　行ってきます、今から。
旅行ではないです。　大学の研究関連です。　帰ってくるのは11月02日の朝になります。
短めでしょ？
一応、ノートPC も持って行くので、滞在先のホテルがネット接続できるなら（余裕があれば）ブログも更新したいと思います。
# これは願望

days

[Firefox]_ Firefox 2.0 update

2006-10-26T00:33:00.000+09:00

Firefox ver. 2.0 リリースされたようですけど，RC版　1.5どちらからも自動アップデートされないみたいね．
なぁ～んだ，ということでダウンロードしてインストールしました．

ところで，beta 版のが Program Files 中に残ってしまっているのだけれどもどうしたらよい？
削除で再インストールしかないか

Firefox

[blog / css / Design]_ red_one さようなら / サイトデザインあれこれ

2006-09-26T00:23:00.000+09:00

去年からホスティングさせて頂いていたサーバが最近何かよく落ちてるなぁ、と思ったらサービスを停止してしまいやがった。

ので、blogspot に待避。　将来またレンタルサーバに手を出すかは分かりませんが、しばらくはここでやります。
新しい URL はコチラ．

http://redone-on.blogspot.com/

で、新装開店ついでにテンプレートも温めていたものに変えました。　テーマは白黒・赤です。
初めて来られた方には違和感ないかも知れませんが，昔はコレ → です。

テンプレ変えた、だけじゃ味気ないので、ブログデザインに関して参考にしたところ、記事などを振り返ってみたいと思います。

２カラム → 可変レイアウト → １カラムへ

考えてみれば今回変える前にもデザイン変えているんですけど、余り post にする余裕がなかったので、そこから振り返ります。
まず、３カラムはどうしてもしたくなくて、サイドバーを右側一本にしたかった。

「全体の横幅はウィンドウサイズに合わせて可変で，サイドバーを固定長で右に置く」

ということをテーマにして、始めは一人で四苦八苦していたのだけれど，どうにも出来なくて。
ここのサイトのスタイルシートによる崩れない　2カラム　3カラム・レイアウトを参考にしました。
目から鱗もので、これから CSS を勉強したいヒト、悩んでいるヒトたちにｵｽｽﾒです！

Previous Postsを何とかする

Blogger ブログは記事を過去へさかのぼるのが分かりにくい（Bloggerに限らずほとんどがそう）。　ですので、デザインでだけでも過去記事が参照しやすいようにしようと試みました。
参考にしたのはこれ。
Lucky bag::blog: リモートロールオーバーを CSS だけでやってみる

リモートロールオーバを利用して、過去記事のリストとそれに対応したボタン画像なりなんなりを横に並べ、現在記事からの過去記事への参照を見やすくした・・・つもり。
元ネタからはかなり改造しました。
まず、リストの１つ１つに連番でIDを割り当てることができないので（多分；Blogger のテンプレート編集では）、タグの入れ子の数をどんどん増やし、CSS で入れ子の数分ずらす大きさを大きくしていするようにした。

目次？設置

clmemo@aka: 記事目次をトップページの頭につけてみた |Blogger| 様からアイデアを頂き、ページ冒頭に目次っぽく更新リストをつけた。
最初は Blog Search の検索結果を使っていたのだけれど、最近文字化けや機能不全がおおく、rss を使うことにした。
Blogger が提供しだした RSS は最近作成されたものではなく、最近更新されたもの順にならんでいるらしいので、コレ一本でいいやと思いました。　Feed2JS で貼り付ける。

また、クリボウの Blogger Tips: アーカイブページに投稿一覧リストを様からもアイデアをパクリ、月毎のアーカイブページではその月の Post の一覧を更新リストの変わりに載せています。

かなり尻切れトンボですけど、書いてて疲れてきたのでここで一時筆を置きます。
補足など後日いたしたいと思いますので、よろしく～
それでは、新ブログ投稿１回目を終わります。

blog / css / Design

[blog]_ 金魚

2006-09-06T00:54:00.000+09:00

結構思い通りの金魚のイラストが手に入ったので、本格的にこのブログのデザインを変えます。
Ryu-Kin
↑ 他ブログのテンプレートですが、画像だけ加工して利用させて頂きます。

JUGEM ブログのテンプレートですが、こうして色々見ると創作意欲を刺激されます！
それでは　おやすみ！

blog

[Blogger]_ 新 Blogger テスト / 雑感 / 注意点

2006-09-04T18:23:00.000+09:00

えっと、現在利用させていただいている Blogger ブログが、新機能追加のため beta が公開された、というのは以前書きました。

で、色々書き散らしはしたものの~~浮気心~~もとい、探究心からから、新 Blogger でブログを作りました。　→ http://redone-ex.blogspot.com/
※ テスト用ブログです
後にアカウント統合できると何処かで書かれていたしNE。

そして本題。

beta プログラムが公開されて半月余り。
数々の不具合も徐々に解消され、また、要望なりの機能追加もあったり、利用してみて新しく分かったことなどあったので、極一部ですが私自身が個人的に気になったことをまとめてみたいと思います。

beta でここが変わった
■
navbar（で合ってるのかな？　このブログの上部についてるBloggerのバーね）の SEARCH THIS BLOG が変わった。　以前は、キーワードを入力して検索！ってやると、Blog Search の検索結果のページに飛んでいたのね。
でもそれが、beta 版ブログでは（Labelの表示のように）ブログページ上で検索結果が表示されるようになった。

■
古いテンプレートにおけるの Previous Posts が Recent Posts に。
# これは結構個人的に痛い変更点です。

改善点
■
Label の日本語に対応した（via. 静岡散歩: BloggerBeta　Labelが機能）。

■
SEO 最適化・・・が図られたとは言い難いですが、テンプレートの
<meta name="robots" content="NOINDEX,NOFOLLOW" />　のタグが消されました。

■
新テンプレートの HTML 編集が可能に。
しかし、以前のものとはガラッと変わってます。

beta を利用していないヒトのためにテンプレートファイルを掲載します。　編集画面の　(X)HTML テンプレートはこちら → Templete: Minima
Expand Widget Templates ってチェックボックスをオンにするとコチラ → Templete: Minima(Expand) （実際は XML 形式ね）

基本は Section での区分けに Widget と呼ばれるブロック単位での組み合わせ、更には Widget の編集になりそうね。

通常モードでは、Widget の配置替え程度にしか使えないから、見た目の印象を変える（フォントの変更や２カラム→３カラムにする）のであれば十分そうだけど、細かいHTML（例えば、Post のフッタにリンクスポットを追加するなど）の編集は Widget の編集は必須になりそう。

個人的には、ブログの記事 Posts の部分が

<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>

の一行で済まされていたことには愕然としました。
Ex～　とすると、いろいろ出てきますが、ちょっと理解するには骨が折れそう。

将来的には、Widget の編集用の画面とか、API が公開されて独自のWidgetを作るってことも想定されているのかな。
# 個人的には、セクション単位で表示非表示のオン／オフができたらよかったな～
# トップページに表示されるものとアーカイブページ、パーマリンクのページなどで表示されるものを変えたいとき、どうするんだろう。

注意
■
今度の HTML 編集では、 タグが生成されるページでは消されてしまう。　これは、beta を利用して作成されたブログのソースを見れば分かると思います。　コメントが一切なくなっていることに。

なぜ、これが注意かというと、Javascript などを HTML に埋め込むための <script> タグにおいて、そのタグに対応していないブラウザのために、

<script type="text/javascript">
<!--
　
// スクリプト・コード
　
// -->
</script>

とコメントアウトする習慣があるのだけれど、新 Blogger ではコード部分もろとも消されてしまいます。
Help にも特に記述されてなかったように記憶しますが・・・。
従って、ケータイの i-mode などの HTML ヴューワで見ると CSS コードや Javascript コードが丸見えで大変なことになります。

もともとそういう向けに作られてないとは思いますが、上位互換しかもたないソフトウェアは・・・。

！　追記
(x)html ページに CSS や script コードを内臓するときは、

<[!CDATE[ /* code */ ]]>

という CDATA セクションで囲みましょう。
これが新しい XML の仕様です。
# でもそんなこと知らないよねって話。

その他、雑感
■
新ダッシュボードがごちゃごちゃで一見すると分かりにくい。
前のに慣れてしまっていた所為でもあるのかな。　もうなれたけど。

■
Dynamic serving について。
Post 後や設定変更後の再構築がないことでこんなに感じが変わるとは。　考えてみれば色々工夫して Javascript をふんだんに使うよりもページ表示もスムーズだしストレスなくすむ。

追記at 2006.09.06
■
いま見てみたら、Label の表示するアドレスが変わってた。　フォルダ形式（？）になっていた。
前の検索形式の方がよかったのに、Google っぽくて。 ?label=○○|▲▲　て具合に拡張できるのではと思ってたのに。

Blogger

[days / game / psp]_ PSP 買ったお

2006-08-31T22:36:00.000+09:00

Webにアウトプットがないと死んでいるらしい（via. ARTIFACT ―人工事実― : ネットでのアウトプットが少なくなった人の存在感）。　あなおそろしや。
えー・・・。　なかなかはっちゃけて文章を書く気にならなかったので、書いてなかったわけで。
では前 Post から約１５日のまとめを。

■
PSP 買ったお

とうとう誘惑に負けてしまいました。　しかも LocoRoco得得パック（黒）・・・。
さらにモンスターハンターポータブルを買いました。

LocoRoco 楽しい。

モンスターハンターポータブルは草食竜が可哀想・・・。　と思ってたら反撃された　ｶﾞﾋﾞｰﾝ
でも今一、竜やモンスターを殺していく意義が分からんなあ。　単なるお使い？　ロマンが感じられない。

■
金魚死んだ・・・。　殺してしまった。

■
Blogger Beta について

こちらも浮気して、作ってしまいました。こちら http://redone-ex.blogspot.com/
テスト用のブログになります。

via. Long Tail World のコメント

新 Blogger では、RSS とか Atom とかの site feed （サイトの更新情報，要約）をブログページへの貼り付け機能もデフォルトでサポートされる。
　で、早速試してみたりしたけど、どうもそのページを見たとき（構成されたとき）に、外部の feed を毎回読み込みに行っているのではなさそう。
　多分、１日に何回か（１回？）登録した feed を更新してサーバ上に貯めているのではないかな？　そのお陰でページ自体の表示は速いけど、ページ上に feed が反映されるのが遅い。
下手すると半日、１日近く反映されないことになってしまう。

ブログに寄せられたコメントの feed も提供されるようですが、ブログページに貼り付けるよりは RSS リーダとかに登録してチェックした方がよさそう。

via. クリボウの Blogger Tips: Blogger Beta でもテンプレートの HTML 編集が可能に

これを受けまして、早速ちょっといじってみた。　今までと大分違いますし、ちょっと注意が必要なところがあるので、これについては Post として後述します。　これは約束。

人間の思考はノンフィクション（認識）とフィクション（幻想）の入り混じった混沌なのだと思いました。

days / game / psp

[Blogger]_ Blogger → Blogger in beta

2006-08-16T01:04:00.000+09:00

現在私が利用させていただいているブログサービス Blogger のはなし。
# 例によって、一部のヒトには全くの無関係な話です。読み飛ばしてもらっても結構です。

現在、利用させていただいているブログサービス（今見ているページね）は Blogger というものなんですが、それが大々的にアップデートされるという話。>> Blogger in beta

感想。
　　「これで Blogger も『並』のブログサービスになっちゃっうのか～」

+++

はっきり言うと落胆である。　悪夢である。

このアップデートで実装されると発表されている点のなかで主なもの。

Dynamic Serving [動的ページ生成]
Access Control [アクセス制限/公開レベルの設定]
Labels [Postへのラベル付け/カテゴリ表示]

　このなかで、１番目と３番目は、今や実装されていないブログサービスはない（Blogger以外で）。　　Access Control も SNS が大流行の今の時期、　わざわざブログでまで、公開／非公開をする意味がまるで分からん！　内輪ねたなら SNS で書け。　そもそもブログやインターネットの特性上、公開されないネットワークとリソースが存在すること自体、「インターネットの可能性」を狭めることになるんでない？

・・・これではっきり分かるでしょう。
ほとんどの機能は別のブログサービスでは実現済みのものである。

アップデートと言っても、今更・・・（溜め息）なものばかり。　こんな機能が使いたかったら、もうとっくの昔に別サービスに移ってるっちゅうねん　~~アホ！！~~（失礼・・・m(_ _)m）

　Blogger を Blogger たらしめたもの・・・。　それは静的ページ生成，FTP送信　にあると自分は考えます。

　FTP送信機能をつけ、あらゆるWebサーバマシン上で動作することを想定し、サーバに負荷を掛けない静的なページ構成。
従って、TrackBack　（- PING送受信機能を必要とするCGIサーバが必要となる）　もカテゴリ　（- おそらくDataBaseを使わな、まともなものは出来ないだろう）　もない。　だからこそ，それらを克服しようと様々な他 Web アプリケーションと組み合わせ、Javascript や CSS の知識を磨き、愛着を持って自分のブログを世に出すことができたのではないでしょうか？

こういう感情は一種の選民思想っぽくて、なんか書いてて自分でも嫌になってきたけど、Blogger には困難があった。　他では当たり前に提供されていて、ただありあわせのもので構築されたブログ。　そんなモノとは異なり、Blogger では当たり前に提供されるものなんてない。　一つの機能を実現するためにこんなことができないか？　このツールは使えないか？　なぜダメなのか？
　一つずつ探し、考え、答えを出すこと、実現することが自分としては楽しかった。　Blogger ブログを楽しめた最大の理由だと思います。

・・・タブンここで私がこんな発言したって、もはや公表されたニューズは実現されるでしょう。　ただの一人の Blogger を愛するものの戯言として言わずにはいれなかったことを書きました。

　駄文・長文でしたが読んでくださってありがとうございました。　おやすみなさい。

# 今、新しいテンプレート作ってるんだけど，新しいBloggerではどうなるのかな？

Blogger

[blog / days]_ ちょこっと更新

2006-08-12T20:23:00.000+09:00

時間的余裕がないことを言い訳にブログを置き去りにすることもなんなので、適当に近況報告＋メモ　みたいな感じで。

■
前回の更新からしたこと　（ブログ，Web，技術関係篇）

ブログテンプレート（主にcss）を変更しました。　・・・が、また別のアイデアが出てきたので、まとまったらまた変更する予定。

ブログねた・・・は結構書きたいこと溜まってるんですけど、文章にするのが億劫。
・・・作文は昔から苦手だったなーと思い返しています。

Firefox 拡張機能で新たに作りたいねたができたので、それについてちまちま作ってます。

研究・・・進んでません。

■
前回の更新からしたこと　（日常篇）

今更ながら、森博嗣にハマル。　後輩の影響＋お陰。　タブン数週間前から、『すべてがFになる』から読んで、本日『詩的私的ジャック』読み終わりました。　面白い・・・かった。
今日、これから『封印再度』を読む・・・だろう。
人生とは持ちつ持たれつやね。

英語の原稿を書き上げた。　的とー英語。

普通自動車免許取得のために自動車学校へ通い始める２日目。
初めて自動車を運転した。　バイクとは違いすぎる。　手と足の感覚が全然。
道路で走っている方全てを尊敬しようと思った。

研究・・・やらなきゃ。

■
なんかメモ

Windows Live のパーソナライズド・ホームをもう結構使っている。　つい最近も、アップデートされて Firefox で各記事が格納されてしまう不具合？仕様？悪意？が治された。　フォントなどもIE表示と近くなっている、と思う。
終了時のscriptエラーもなくなって、使い勝手がよくなったと思う。
あと、ロゴのbeta表示が強調された気が・・・。

IEにもブックマークツールバーがあることを知る。

淋しい。

blog / days

[days / books]_ おかしな二人　岡嶋二人盛衰記　を買った / 読書に対する持論について

2006-07-25T21:09:00.000+09:00

立ち寄った本屋で岡嶋二人と井上夢人の特集が組まれて、十数の書籍が本屋の一角に平積みにされていた。
そして、それぞれに対して３行４行のメッセージが添えられていた。　ご丁寧にも。
丁度、このブログでも最近話題に上げたばかりであり、奇妙な符合を感じざるを得なかった。

なぜ、この時期？　なぜ、岡島二人？

・・・・・・
岡嶋二人とは、文字通り二名の作家による合作における作品時のペンネームである。
（もう、だいぶ前にコンビ解消して）井上夢人はその一人、つまり半分である。

・・・という知識はまあ、チョット調べればすぐ分かることで、実際私はこ岡嶋二人先生の作品は（井上夢人先生のも含めて）「クラインの壷」しか読んだことは無い。
「おかしな二人　岡嶋二人盛衰記」は井上夢人名義の自叙伝(?)である。
作品の草案段階でのアイデアや二人（及び編集者）を交えたやり取りなどが記されている。

なぜ、この本を買ってしまったのか・・・？　多分自分は岡嶋二人とその作品について知りたいと思ったのだろう。

-+-+-+-

「小説を読む」というのはものすごく労力と時間のいる作業である（少なくとも私にとっては）。
とても「片手間」では読むことはできない。
本を手に取り３時間、小さい文字を凝視して、その風景をイメージし、更に文字を追って行く。

私にとって、読書は趣味にならない。　趣味にはある程度の反復性を伴うものと思う。
私の場合、一度手に付けた書物は一気に何時間も夜通しで読んでしまうもので、そして、本にはどんなものであれ結末（＝終わり）がある。
一度読んでしまった本はそこで終わる。　確かに、読み返したくなることはあるが、その感覚が起こるのは何ヶ月・何週間単位である。
一冊の本を集中して読み、読み終えてしまう。　私にとって読書は非常に反復性の低い行為である。（故に趣味とはなりえない）

話が脱線してしまった・・・。
つまり、一冊の本に、その本を読むために物凄い体力・想像力・気力・集中力を傾けるので、その他が疎かになってしまうのである。
なので、新しい本を読む、という行為に対してかなり慎重になって（しまって）いる。
一度始めたら止められない、故に本を買う/読むことを億劫に感じる。

# また脱線してる？
つまり、小説一冊にも『失敗』したいくないの。　決して高くはない賃金と高い労働力、時間を掛けるだけに見合うだけの本が欲しいのだー！
なんか偉そう・・・

-+-+-+-

ですので、この「おかしな二人」をパラ読みして、次に読む作品を選びたいと思います。

夢人.com
99人の最終電車

days / books

[days]_ 昨日の今日

2006-07-10T04:42:00.000+09:00

昨日は今日があることなど想像すら出来ず　今日は昨日のことを遠い過去のように思う。

昨日のことを忘れない。　今日を大事にする。
これは誓い。
# 偶には私心を書いてみようかと。　忘れっぽいタチなのでログに残します
たといどんな未来であろうとも

２００６年７月８，９日

days

[Web / tools]_ マクパペット / maku puppet

2006-07-04T22:03:00.000+09:00

Webページに自由に貼れるキャラクターを作成するツール？　サイト？　サービス？
　Web上でキャラクタの髪型とか服装とかを選んで生成されたコードをページに貼り付けるだけ。
　作ったものは自由に配布ok（商用利用も可）という太っ腹さです。

早速作って見たのはこちら↓

ユニセックスな感じ？

マクパペット
開発元 - コールドブレス有限会社

Web / tools

[Blogger / profile]_ About this blog

2006-07-03T04:38:00.000+09:00

サイト情報 / Site Information:

Title:	レッド ■ ワン
URL:	http://redone-on.blogspot.com/
Author:	Jyun.
Since:	Oct. 2005 -
Site feed:	新着情報\|

favicon: 無し
Powered by Google Blogger

　コメント，リンクはご自由に．　バナーは御座いません（今のところ）．
　サイト内の情報も引用程度ならば個人の裁量で行って下さって結構です．　メールやコメントなど残して下さると個人的にうれしいです^^．
　トラックバックは受け付けておりません．

最適化 / Modification to

　このサイトは，Firefox 1.5.x (Geckoエンジン 1.8)上での Javascript, CSS, 画像表示をオンで最適化しております．
　また，Windows 2000, XP プラットフォームでの IE 6.x / Mozilla Firefox 1.x.x / Opera 8.x において動作確認しております．

　スタイルの崩れや，HTML, Javascript等のエラー情報がありましたらご連絡下さると嬉しいです．

自己紹介 / About Me

Handle:	Jyun. ときどき Shield だったり盾だったり
Birth:	Winter of 1982.
other space:	あかなす Jyun.'s Photos
E-mail:	sky10days [at] gmail [dot] com

My Friends

ウチワモメ

My Favarites

Google Analytics

Blogger / profile

[Blogger / util]_ 小ねた投稿時の改行キャンセル

2006-06-29T16:57:00.000+09:00

ブログで Post を投稿するときにBloggerでは（他でも）デフォルトで改行を <br> に変換されてしまいます。

これ自体はよいのですが、コードを載せたりHTMLタグから書いたりというときに、ちょっと厄介・・・。
# 厄介になるとします

簡単な方法思いついたので以下に記します。

... text end.<!--
-->Text start ...

以上。

スクリーンショット　投稿画面＋投稿記事:

# よくよく考えると全然実用性ないなあ・・・というのは内緒

Blogger / util

[Firefox / Extension / css / cbmt]_ customBMT 0.1

2006-06-29T00:25:00.000+09:00

Firefox ネタを．　Firefox ブラウザにはブックマークツールバーと呼ばれるものがあり，お気に入りのブックマークをツールバー内に格納することができるのですね。

コレによってブラウジングしながらのブックマークが容易であるやブックマークしたサイトへ素早く移動できるなど特徴があります。

　しかし、アイコンとテキスト（ラベル）が横に並ぶので幅とってしまう・・・

他の皆はどう使っているのか…

　よくココとかココとかココでも、faviconだけ表示して見栄えを華やかにされている方をよく見るのですが。
皆さんどうしているのでしょう？　ブックマーク時にラベルを手作業で消すのは面倒ではないけれども、ラベルのテキストを復活するのに面倒でない？
# ツールバーからフォルダへ移動、なんてことしないのかな？

自分でカスタマイズ

　折角のカスタマイズ性の高い Mozilla Firefox ですので、スクリプト（・・・とは言わないか）を組んでみました。

　まずプロファイルを探し、ユーザスタイルシートというものを探します。
Windows: [各ユーザのフォルダ]/Application Data/Mozilla/Firefox/Profiles/***/chrome/userChrome.css

ユーザスタイルシートに数行書き加えるだけでラベルを簡単に消せるので Firefox ユーザの皆さんは試して見てください。　　[見る]

#personal-bookmarks toolbarbutton > label {
    display: none !important;
}

で、これだけではだだラベルが消されるだけですので、
フォルダのラベルも消されてしまいホントに何が何だか分からなくなるのでその対処 + もう少し見栄えをよくしたいと思います。

#personal-bookmarks toolbarbutton[tooltip = 'btTooltip'] > label {
    display: none !important;
}
#personal-bookmarks toolbarbutton[tooltip = 'btTooltip'] {
    margin-right: 2px !important;
    display: block !important;
}
#personal-bookmarks toolbarbutton[tooltip = 'btTooltip'] > image {
    margin-right: 0px !important;
}
 
#bookmarks-ptf { padding-left:0px !important; }

# フォルダかページかを判断するのに [tooltip = 'btTooltip'] でマウスオーバ時のツールチップの形式で判別しているのですが、何かもっと良い方法があったら情報求む。

新規タブボタン，ブックマークボタンとブックマークツールバー：

ブラウザのボタンなどと並べるとどこからがブックマークかもう分からない。

更に拡張機能 / Extension を作成

　拡張機能も作ってみました（コチラが本命）。

Firefox ユーザの方　プロファイルの場所が分からない方は以下をクリックして拡張機能をインストールしてみてください。

customBMT 0.1

　オプションの設定など全くありません。　機能を解除したい場合は拡張機能をアンインストールしてやってください。
　他拡張機能や環境との競合などあったら善処したいと思います。
　Windows環境でしか試していないので動作報告や感想などコメントしてください^^

[Web / tools / links]_ faviconを作成 at Sunday, January 08, 2006

Firefox / Extension / css / cbmt

[days]_ 遅咲きの桜

2006-06-27T20:24:00.000+09:00

『就活終わりました』キャンペーン実施中。
期間中、知人のブログ・Webページに就職先が決まった旨を書き込みする運動。
期間未定。

そして、これからは研究に身を入れ、ブログ・Webページ関連にも力を入れることをここに誓います。

days

[books]_ クラインの壷

2006-06-21T20:17:00.000+09:00

数学の話・・・ではありません。

岡嶋二人著『クラインの壷』

後輩と本の話をする機会があり、この本を薦めました。

怖い話です。　ホラーではありません。　ジャンル分けをするならばミステリー / サスペンスの部類に入る筈です。
　怖さも、ハリウッド的なものではなく、純和風な怖さ。
　常に生温かい空気に包まれているような、払っても払いきれない、払う術がない不自然な感覚に包まれます。

-+-+-+-

　『クラインの壷』とは、私が中学生の頃（1995～1997年???）にNHKの夕方のドラマで放送されたのを毎週見ていたのが出会いでした。

そして衝撃のラスト。
いやー、子供ながらに思ったね。　NHKで放送していい話じゃないだろ～　、て。
# 無用なネタばれはしませんが、当時の健全な精神はその時、完全に蝕まれました

ただ今思うことは、『NHK再放送しないかなー』　と　読み終わったあと塞ぎ込んでいる後輩を見てシメシメと思っています。

ドラマ知っている人いないかな？　まだ会ったことがないや。

私の人生を名実共に変えた（狂わせた）一冊。

books

[blog / Blogger / tools]_ RSS アイコン 2.0

2006-06-14T20:08:00.000+09:00

RSS とはサイトの概要や要約を意味して、多くの blog では記事の全文若しくは一部を RSS として公開し更新情報や最新情報を他人がチェックし易くした、という技術背景があります。

　Blogger でも最近 RSS 2.0 が配信されるようになりました。

クリボウの Blogger Tips: Blogger に RSS 追加

詳細はまだ分かりませんが、以前より Blogger で配信されていた Atomフィードは、トップページの posts のみでしたが、今回の RSSフィードは全 posts の全文が掲載されているようです。

Feed2JS などのサービス（後述・・・予定;）は Atom を利用すると不具合があったので RSS を利用してみてはイカが？

そこで本題！（やっと）
　サイトフィードへ Webページからリンクを張ってるんだけどなんかいいアイコンないかな～と思っていていいのを見つけたので紹介したいと思います。

RSS アイコン 2.0 http://rssicon20.com/

site feed のアイコンをその説明ページ付で設置できるサービス。　登録不要で説明ページには各種RSSリーダへの登録用リンクスポットも用意してくれるので地味にいいサービスかな？

Exsample:

新着情報

blog / Blogger / tools

[Web / tools]_ Google Analytics：アクセス解析ツール

2006-06-13T16:25:00.000+09:00

Google から無償で提供されているアクセス解析サービス Google Analytics の招待メールが届いたので登録して見ました。

そう、あれはもう去年辺りからLOVEコールをしていたのではないだろうか・・・。
まさに初めて出会ったその日から～である。

その半年掛り（以上の）コイがやっとのこと昨日成就したのでした。

・・・
でも実際、Google Analytics のサービスは企業とか個人販売，アフィリエイト（広告収入）向けのアクセス解析・統計ツールっぽいです。
個人のサイト，ブログレベルでは高性能過ぎて使えない（使いこなせない）らしいですわ。

ですので、同じく Google が買収した Measure Map の方がブログに特化していて使い勝手がよいというので、こちらにも登録申請は出していたのですが・・・
（それがGoogle Analyticsと同じころ）
こちらは何年越しのコイになるのでしょうか？

兎に角、何とか使ってみたいと思います。
みんなの目に触れられるサイト運営を目指すと誓った今日この頃。

Web / tools

[Travel / Kyoto]_ 京都へ行ってきました

2006-05-25T19:04:00.000+09:00

土日（月）を使っての２泊３日強行スケジュールで行ってきました．
最近は　『就活で東京』＝『鈍行で移動』　の生活でしたので，新幹線の速さを知りました．
新幹線って・・・めちゃくちゃ速いのな～！！

巡った場所は清水寺と銀閣寺．　二日目に昼まで寝てしまっていたのが痛かった
けどまあ，自分としては目的の銀閣寺に行くことができましたし，旨いものも食べれたのでよかったです．

写真↑は清水の舞台からの風景．　京都を一望です．

でも久々に研究とか就職とか忘れて，二日間楽しく過ごせました．
また４年後行きます．

Travel / Kyoto

[mobile]_ SONY ウォークマンケータイ徒然

2006-05-24T21:02:00.000+09:00

夏商戦！　ということでどのキャリアも一気にケータイの新機種を発表して来ました．
IT系ニュースも一面ケータイ話だけです・・・~~（面白みの無い）~~．
そしてDOCOMOユーザの自分としてもどうしても気になるのがソニー．
ウォークマンケータイ．

携帯電話と音楽を一緒に持っていくのがどうしても面倒くさい．重い．　と感じる自分としては常日頃からケータイで音楽・・・いや，ケータイで何でもできるようになればな～と思ってました．

音楽といえばソニー（らしい）ですし，ソニーからいつ DOCOMO でウォークマンケータイを出してくれるのかと待ちわびてみましたが・・・防水?
# au では以前から出していましたね．　今回も変な形（シャトルキー付）のウォークマンケータイが出ます．

どうやらソニーさんはDOCOMOで音楽ケータイを出すつもりはないらしいです

mobile

[Blogger / util]_ 次の20件

2006-03-15T20:18:00.000+09:00

前Postの追記・補足という感じになります．また，長くなりそうだったので別にしました．

　終わりの方で最新20件から次の20件へ～　とかいう風に書いたのですが，　従来の方法では対応していませんでした．

ですので，僭越ながらクリボウ氏の category.js のコードを少しいじりまして，『次の20件』（ついでに『前の20件』）の表示機能を付加しました．

考え方

　Google Blog Search では検索結果をRSSやAtomフィードでの配信を行っているのですが，　実は検索結果アドレスの ?[以下～]&start=20&output=atom とすれば検索結果の20件目からが表示されます．
つまり "次の○○件" のサイトフィードも取得できるのです．

　以上を踏まえ， category.js を変更．

やったこと

変更点/追加機能は以下

~~20件~~10件毎表示するように category.js を変更
カテゴリを表示するページ（url）の環境変数から startの値を設定できるようにした
startの値+~~20件~~10件目からを表示する自ページへのリンクスポット"次の○件"を生成
[蛇足機能] "前の○件"へのリンクスポットも生成
[蛇足の蛇足機能] それ以上前へ戻れないときの非リンク化
リンクスポットにもクラスを設定
（.next-results / .prev-results）

となっております．
■ 未実装項目
　次の20件がなくても"次の20件"へ移動できてしまったり，　Firefox1.5 で動作確認しましたが，IE, Opera と Firefox 1.0x では見た目が異なったりと不具合がまだ・・・．

: Firefox 1.5 での表示例

ツラツラ書き綴りましたが，　基本的に元の形を踏襲しているので，利用形態は変わりません．

-+-+-+-+-+-+-

　コードは category.js．
　クリボウ氏のものをダウンロードして使っている方は上書きして（バックアップを取ることを進めます）そのままご利用いただけます．

若しくは，コチラのコードをカテゴリ表示用の Post （<script type="text/javascript" charset="UTF-8" src="http://[url]/category.js"></script> の部分）
に上書きコピー＆ペーストしてください．

<script type="text/javascript"><!--
function getParams() {
    index = location.href.indexOf("?");
    var params = new Array();
    if (index != -1) {
        var pairs = location.href.substring(index + 1).split("&");
        for (var i=0; i<pairs.length; i++) {
            nameVal = pairs[i].split("=");
            params[nameVal[0]] = nameVal[1];
        }
    }
    return params;
}
params = getParams();
if (params["url"]) {
    var url = params["url"];
    var tag = escape(params["tag"]);
    var s = params["start"];
    if (!s) { s = 0; }
    var num = 10;
    var svr = "http://www.incsub.org/feed2js/feed2js.php";
    var src = "?src=http%3A%2F%2Fsearch.blogger.com%2Fblogsearch_feeds%3Fq%3Dblogurl%253A" + url + "%2B" + tag + "%26scoring%3Dd%26num%3D" + num + "%26start%3D" + s + "%26output%3Drss&num=" + num + "&desc=200&date=y&utf=y&css=category";
    document.writeln("<script type='text/javascript' charset='UTF-8' src='" + svr + src + "'></script>");
 
    var env = "?url=" + url + "&tag=" + tag + "&start=";
    var str = "&lt;&lt;前の" + num + "件";
    var n = Number(s) - num;
    if (n >= 0) { str = "<a href=\"" + env + n + "\" title='Previus'>" + str + "</a>"; }
    document.write("\n<div class='prev-results'>" + str + "</div>");
 
    n = Number(s) + num;
    str = "次の" + num + "件&gt;&gt";
    str = "<a href=\"" + env + n + "\" title='Next'>" + str + "</a>";
    document.write("<div class='next-results'>" + str + "</div>")
}//-->
</script>

・num は一回の表示件数．　デフォルトでは10件です．
・str は "次の○件" とかのリンクスポットになります．　サイトの体裁などに併せて好きに変更してみて下さい．

　以上で上手く行くハズです．

間違いや不具合などございましたら，ご連絡下さい．　こちらで検証して解決するようにします．
また，今後もコードのアップデート等をこのブログで公開していきます．

　その他，意見などありましたらゼヒ是非コメント下さい．

[Blogger / util]_ カテゴリ設置 posted at 2006/03/13.
クリボウの Blogger Tips: Blogger でも Category
クリボウの Blogger Tips: カテゴリ用の URL を作成する
clmemo@aka: Blogger にカテゴリー
Pappmaskin Diar�Techblog: Blogger Categories

Web / util

[Blogger / util]_ カテゴリ設置

2006-03-13T19:22:00.000+09:00

クリボウ氏の BloggerでもCategory を参考にカテゴリを（やっと）設置しました．
やっと，と書いたのは，クリボウ氏でも取り上げられているのが去年の11月末であるようにかなり前から知っていました．知っていてやれてなかったからです．

理由は唯一つ．

Blog Searchに引っかからない　から

　まず，Bloggerは完全な静的Webページ生成ですので，カテゴリ分けなんかの機能は大変難しい，というコトがあります．　標準でサポートされていません．

　クリボウ氏とその更に元にされたBlogger Categoriesは同GoogleのサービスGoogle Blog Searchを利用する方式で，
あるキーワードに対するサイト内検索の結果（のフィード）をそのカテゴリの一覧としてJavascriptで表示する方法です．

（実際には，HTMLページでサイトフィードを見られるようにRSSやAtomフィードをJavascriptに変換する別サービスFeed2JSを内部で使っています．　かなり大掛かり・・・）

・・・　詰まりは，Blog Search にインデックスされないと全く利用できなく，やむなく諸々準備だけはして見送っていたのです．

　しかし，ｲﾂﾏﾃﾞ（5ヶ月･･･!）経ってもサイト内検索結果が得られない

　googleのblogスペースではなく，ftpで他サーバにhtmlファイルをアップロードしているのでインデックスされるのに時間がかかるのかな――とある程度は覚悟しておりましたが・・・

　5ヶ月経っても『マッチするものがありません』．　仕様がないのでここ数日色々Blog Searchで遊んでみました．すると自分のPostもそこにはある・・・．

-+-+-+-

Blog Search（及び，Google検索サービス）では検索演算子と呼ばれるものが利用できますが．
　少し試してみると

・blogurl:[自分のblogの完全URL]　ではマッチする結果がない
・blogurl:[blogのURLの一部分（キーワード）]（自分の場合は"~red_one"）　だと自ブログの記事を出してくれました．

#やはりβ版なだけあって，不具合が多々あるのか．
まあ，なので後者でカテゴリサーチを利用できるっぽい，　と分かり昨日あれこれ設置していました．

　ただし，検索ロボットが収集した検索結果ですのでゴミが少なからずあります．

　他サイトのインデックス，削除したPostだったり，Postの固定リンクurl（＝タイトル）が変わって古いインデックスが残っていたり，と．
あと，検索順が一貫していないのも問題かな．

　なかなか直ぐには解決しそうにない問題なので，多少のことは多めに見てやってください^^;

ここからは [蛇足]

　さて，カテゴリ表示するために検索用のリンクスポットを作らなければならないのですが，　これが一々面倒くさい．
　アンカータグの構成は以下のよう，

<a href="http://[カテゴリ一覧表示ページのurl]?url=[ブログurl]&tag=[カテゴリ名]" >[カテゴリ名]</a>

と非常に長い．
　リンクスポットに title属性を付けたり，キーワードに intitle:演算子を付けるなどした場合，更に長くなる．

　自分は各Postにカテゴリを設定する（つもりでいた）ので，これを１つPostを書く度に書かなくてはならない．　複数カテゴリがある場合は何個も何回も．　非常に面倒なのでJavascriptを組んでみた．

まず， <h4 class="post-category">[ keywords ]</h4> とう感じにカテゴリをPostの適当なところに書く（毎回，これは仕様がない）．
複数カテゴリがある場合は keyword を " / " で区切る．

Javascriptでページ読み込み時にこれを分解してキーワード毎のアンカーを挿入するスクリプトです．

function ktg ()
{
    this.target = "カテゴリ一覧表示ページのurl";
    this.loc = "ブログurl（の一部でもいいっぽい）";
    this.opt = "intitle:";
    this.tag = "h4";
    this.cname = "post-category";
 
    this.ank = function (_tok) {
        var href = this.target + "?url=" + this.loc + "&tag=" + this.opt + _tok;
        var titl = "'category search, \"" + _tok + "\"'";
        var doc = "<a href=\"" + href + "\" title=" + titl + " >" + _tok + "</a>";
        return doc;
    }
    this.make = function (_url, _loc) {
        if (_url) { this.target = _url; }
        if (_loc) { this.loc = _loc; }
 
        var doc = document.getElementsByTagName(this.tag);
        for (var i=0; i < doc.length; i++) {
            if (doc[i].className != this.cname) { break; }
 
            var tok = doc[i].innerHTML.split(' ');
            doc[i].innerHTML = "category: [ ";
            for (var j=1; j < tok.length-1; j+=2) {
 
                doc[i].innerHTML += this.ank (tok[j]);
                if (j+1 < tok.length-1) { doc[i].innerHTML += " / "; }
            }
            doc[i].innerHTML += " ]";
        }
    }
    return this;
}
var ka = new ktg();

・赤とオレンジの部分に関しては自分のブログの環境に合わせて適宜変更してください．
・緑の部分は好みで変更願いまふ．
後は， <body onLoad="ka.make();"> とすればo.k.

：Javascriptなし

：Javascriptでリンクスポット化

　また，大まかなカテゴリはサイドバーにリスト表示しているけど，これもJavascript．　カテゴリは後々増えていく可能性があるので，増やすたんびにブログを再構築するのでは非効率的．
　ですので，Javascriptファイルを外部ファイルとして切り離し，　そのソースコードを変更するだけでよくした．
#これはBlogger単体だけでやってる人には，ちっと意味ないか・・・orz

トリアエズ，自分の例を示します．

function ktg ()
{
    this.list = new Array('blog','Blogger','Web','illust','days'); //カテゴリのリスト
 
    // 省略
 
    this.show = function () {
        document.write("<ul id=\"category_show\">");
        for (var i=0; i < this.list.length; i ++) {
            document.write("<li>[ " + this.ank(this.list[i]) + " ]</li>");
        }
        document.write("</ul>");
    }
 
    // 省略
 
    return this;
}
var ka = new ktg();

先程のコードに埋め込む感じで以上を追加します．　テンプレートの方は，

<head>
<!-- head要素内 -->
<script type="text/javascript" src="http://[ファイルまでのパス/ファイル名]"></script> //外部JSファイルの読み込み
</head>
 
<!-- 省略 -->
 
<div id="sidebar">
    <!-- sidebar内 -->
 
    <h2 class="sidebar-title">Categories</h2>
        <script type="text/javascript"><!--
    ka.show();
    //-->
    </script>
 
<!-- 省略 -->
</div>

というくらいかな．
　カテゴリリストの階層化など，今後考える余地はまだありそう．

：カテゴリリスト表示例

　少しプログラムを書けるくらいの知識があれば，内容も分かると思うので個人でもカスタマイズしてください．

　・・・長っ！

――最近，履歴書みたいな文章しか書いてないから，　崩した長文を目一杯書いてしまった．
予想以上に長くなってしまいましたが　あんま参考になっていないのは重々承知です．読んで頂いてありがとうございます．　　[閉じる]

　このカテゴリーを応用して，キーワードを空にしたカテゴリサーチすれば，　全Postが参照できるのではないのか？
と思いやってみました． [ｺﾁﾗ]　　　右・サイドバーにも設置→

　検索結果が時系列順でキチンと表示されるなら，ｹｯｺｳいいかも．　最新20件から次の20件・・・とかいう感じにページを進めることができるのでは．
何気にすごいぞ　Blogger Categories．

Blogger / util

[days]_ ３月の始め（の次の日）

2006-03-02T15:41:00.000+09:00

昨日のことを書きます．

就活からの帰りの電車で小学生（＋先生）の集団に会いました．　恐らく一クラス丸々．
どうも上野動物園からの遠足（？）帰りだったらしい．
賑やかで賑やかで，もう苦笑しかできませんでした．　自分の小学生時代てこんなだったかな～　と一時間近く考えさせられました．

の前に，小学生の電車での集団移動はいかがなものでしょうか？
　ねえ，先生方．

-+-+-+-+-+-+-
アレだね．張り切るのもいいけど他人のことが見れないのは醜いね

days

[days]_ ２月の終わり

2006-02-28T20:28:00.000+09:00

しまった．
今月１つしかpost書いてない．

しかも，書いたネタが　ウン●　についてだなんて．
一ヶ月近くトップページに　ウン●　という文字が飾られていたなんて．
笑えない冗談だ・・・全く．

２月も終わりですよ．
実生活で前半だらだら過ごしてまった分，後半が怒涛のように過ぎ去ってます．
というか，年明けてからの記憶があまり無い．

ああ，何もしていなかったんだな・・・自分　と消え去りそうな意識で再確認される今日この頃です．

今は就活始めております．　まだ会社訪問・セミナーの段階です．
ここに取り立てて書くようなこともなく，あまり就活日誌みたいにする気も無いのですが放置するわけにもいきませんので，　何かしら思ったことをちょくちょく記していきます．

そうですね，　今日一番驚いたのは，コンビニでメイドさんが買い物していたことですかね．

やはり秋葉原，あなどりがたし

days

[illust / books / links]_ ウン…

2006-02-09T23:28:00.000+09:00

最近でもないけど
少し前に買った本があります．

　　　『死にカタログ』

※ 自殺マニュアルではありません．

　大人たばこ養成講座のイラストなどで有名な，なんとも形容しがたい絵を描く寄藤文平氏の著書です．
　名前は知らなくても，イラストは何処かしらで見たことあるヒトも多いでしょう．

　その寄藤文平さんの著書であり，独特のイラストと共に様々な死生観（宗教観）が垣間見られます．

　ｵｽｽﾒ．　買うときはそれなりにドキドキしますが・・・．
#自殺志願者じゃないのに

-+-+-+-

　ほんとはね，同氏が絵を描いた本『ウンココロ』が欲しかったのですけどもね

うん，　ウンココロ．

実際，手に取ったところで，自分のこころの中の何かがブレーキを掛けまして，
僕にはまだまだ手の出ないものでした．　はい・・・

＜参照site＞
- Bunpei Ginza http://www.bunpei.com/

illust / books / links

[blog]_ blogへの第ニ歩

2006-01-18T19:14:00.000+09:00

[blog]_ blogへの第一歩　より　その続き

　えーと，何を書けばよかったのかな？
　ああ，そうそう．

　ブログを始めようと思いレンタルサーバ探し・・・　第二歩と銘打っているけど，かなりの確率で後退している？感が否めないが，それはそれ．気は心ってなもんで．
# これ書かないと先進まないしねー

　まあ自分用のメモと，これから探すヒトの為に書き残してみます．

　自分の基準・条件としては以下．

自宅サーバでない（安全性・信頼性も気になるところだけど，個人の気まぐれや環境の変化でサービスが停止してしまう恐れがある方が気に掛かる）
無料である　（･･･この際，別にココにこだわらなくて良いかとも思ったのですけれどね）
お金を払いたくない，ということよりは銀行振込や手続きなどが面倒かとおもっただけ．
広告が無い．　または，小さい or バナーである．　最低限，自動広告でない（広告の所為でデザインが損なわれるのはｲﾔ!　外観を損なわないバナーならいいのだけれど，自動挿入なんて他人任せなのは論外・問題外）
movable type が乗る（容量30MB以上，データベース有り，Jcode対応ってくらいかな）
ホスト名にもちょっとこだわってみる

　自分でも　どうだろう・・・？　とも思ったが妥協は許されんだろう，　と決意したのでありました．

　そこで，此度の候補に上がったのは XREA （会社経営(？)）と AG.NET （Webデータベース系の会社が提供する無料Webスペース）， PF-X.NET （自宅サーバ）などとあったのだが，
･･･ここまで探している段階でめんどくさくなり，

そしてまた，ココで文章書くのもめんどくさくなり

（省略して）新たにWebスペースを借りるのはやめるのでした．

･･･つづく

blog

[Photo / Science / links]_ Hubbleの宇宙

2006-01-13T14:02:00.000+09:00

もっとも鮮明なオリオン星雲　ハッブル宇宙望遠鏡 :from Yahoo!ニュース

昨日のYahoo!ニュースで取り上げられて知ったこの記事．
　高感度カメラを用いて星雲を捕らえたもので，　地上にいるヒトの目では見えないものは，　実際はこのようになっているのだなー，　と思い知らされるような気もした．

綺麗なようで不気味．

で，ちょこっと調べてみたら，　このハッブルさん（の名前の付いた宇宙望遠鏡）はこれまでも様々な星の様々な写真を撮って来ていたそうで，
どれも思いもよらない星々の一面をまざまざと見せつけられます．
　オススメはこれ

事実は想像よりも奇なり，　だな～

＜参照site＞
- Hubble Heritage http://heritage.stsci.edu/
- ハッブル宇宙望遠鏡がとらえた宇宙の姿 http://th.nao.ac.jp/openhouse/1999/hst/index_hst.htm
- HubbleSite - NewsCenter http://hubblesite.org/

Photo / Science / links

[Web / tools / links]_ faviconを作成

2006-01-08T23:38:00.000+09:00

自分のサイトを改めて見てみて，何か華がないな・・・と思い， favicon を作って見ました．

　favicon とは favorites icon [お気に入りのアイコン] というものでページをお気に入りに登録などした時などに表示されるアイコンです．

　　　

　●　作り方は以下
16x16 又は 24x24 [bit]サイズの *.icoファイルを作ります．

　icoファイルの作成には，『@icon変換(- towofu's soft)』などを使ってみる．　bmp画像などを.icoファイルに変換します．
あと，GIFアニメ画像ファイルも favicon に出来るらしい・・・試してないので未確認ですが．

そして，favicon を適応させたいWebページと同フォルダに "favicon.ico" という名前でupすればok.
ブラウザ側でWebページを閲覧したときに自動的に読み込んでくれます．
　親ディレクトリ [フォルダのこと] を再帰的に探すらしいので，　ルートディレクトリ（？）に一つ置いておけば，　特にページ毎・ディレクトリ毎に変える必要のない人はokです．　しかし，ブラウザによって挙動がことなることがあるので，　きちんとhtmlの head 内に書いておく．

　以下を記述することでページ毎にどのfaviconを適用するか明示します．

<link rel="shortcut icon" href="http://[own-site-url]/favicon.ico" />

赤には，自分のサイトの url をイレル

↓こんな感じ．

■ Mozilla Firefoxでの感じ

イカが(´∀｀)？

＜参照site＞
- Favicon Japan!! http://www.favicon.jp/
- towofu's soft http://www.towofu.net/soft/

Web / tools / links

[Web]_ ちょっとした危機

2006-01-06T08:18:00.000+09:00

数日前からIEでこのサイトのコンテンツ『籠の中の連結』が見れなくなっていた．
firefoxでは見れていたのに･･･．

　アレッ？　と思う

しかし，まあイイや（どうせ誰も見に来ないもんな～）と半ば自虐的に１週間放置する．

しかれど，待てど暮らせど見えはしない（当たり前だ）．　IEでもソースは見れるため，htmlファイルのダウンロードは行っている．　サーバサイドの問題ではない．

　ブログの設定を見てみる･･･　　異常なし．
　テンプレートとかいじり過ぎたかな･･･？　と元のテンプレートをコピペ→ 更新　　直らない．
　htmlの構文規則違反でもしてたかな･･･？　と投稿記事を調べ再更新　　直らず．

どうも特定のページだけ表示されないぽい

　ブログの更新中にエラーでも起こっていたのかな･･･？　もう一度ブログ全体を再構築してみる．　　白紙のまま．

　そもそもhtmlはちゃんと読み込んでいる（と思われる）のだから設定とかの問題なのか･･･．　それ以前に，firefoxではちゃんと表示できてたし･･･．ソースが読まれているのに全く何も表示されないのもおかしい･･･

　そう言えば！　ブラウザの設定が異なる文字コードだとページ全体が表示されなくなることがあるってどこかで見たな．

メニューの『表示』で文字コードを見てみる．　案の定，"日本語(シフト JIS)"にチェックマークが．　"Unicode(UTF-8)"をチェックする．
画像が読み込まれ，真っ赤なページが表示された．

　はあ～，無事解決

どうも文字コードの自動判別が上手く行われていなかったらしい（ちゃんとメタには書いていたのに，オカシイネ）．
　常に特定のページだけ判別がされなかったのも納得いかない　･･･　

と，いうことを夜通しやってみたり･･･．

ということで，皆様．　リンク先のページが白紙だからといって，すぐ『戻る』ボタンを押すのはやめてね．
『戻る』の前に『表示』→『エンコード』　だっ．

　~~結局これってブラウザ側の問題だったワケ？　ﾊｧ~~
[PostScript]↓ at 2006/01/17.

更に少し調べてみて，
metaタグに

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

とUTF-8コードを指定していても，それ以前にタイトルなどで日本語が入っていると誤認識されてしまう・・・というコトラシイ

<title>red-one / 籠の中の連結</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

↓　修正

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>red-one / 籠の中の連結</title>

結局，テンプレートの問題でした・・・と早々に気付かなかった自分の問題か

＜参考site＞
- a coward 参考post http://a-coward.blogspot.com/

Web

[days]_ 謹賀新年

2006-01-02T23:38:00.000+09:00

明けて二日目ございます．

更新遅い・詰まらない・タメにならない

と，ｲｲﾄｺなしのこのブログ．
　それでも見に来て下さいました多少の人たちに感謝感謝．

　また，自分から年賀状，年賀メールを出すことをしない人間なので，代わりにここで感謝の意を述べたいと思います.

　去年一年世話になった人たち，友人，そしてまだ見ぬ人たちに，一年ありがとうございました．今自分が在るのは貴方たちのおかげです．そして，今年もこれからもずっとよろしくお願い致します．

　これからは，心を入れ替え　たらたらとブログも更新して生きたいと願いますので
今後とも，宜しくお願い致します．

　　　　｜賀正｜

days

[PC]_ PCのある生活

2005-12-27T23:16:00.000+09:00

来ました．　届きました．

苦節 ○ 年．

SOTEC WM351L

PCのある生活・・・９万円．

　ノートパソコンです．　今まで持っていたのは，そう･･･３年前（多分）．レポート書く用に約２万（中古）で買ったものでした･･･．

しかし，それとももうオサラバ（ﾁｮｯﾄｶﾅｼｹﾚﾄﾞ）．　もう起動時に変な音聞くこともなし，FDでデータ遣り取りすることもなし．
いやー，快適快適．

５年保障？　・・・軽く断りました．
ネット接続サービス？　・・・軽く無視しました．

・・・（軽く壊れ中）

・・・どんなPCかは，リンク先をたどれば分かると思いますが，
ここでも簡単に説明を．

CPU: Celeron M 1.50 GHz　（これは，まあまあ）
HD: 40 GByte　（もとの数GByteﾉｰﾊﾟｿに比べれば）
ディスプレイ: 12.1型　（B5版程度．愛用の大きめシザーバックにﾑﾘﾔﾘ入る！）
ディスプレイ２: 輝き液晶　（美しい・・・）
ドライブ: DVD-RAM　（正直DVD-ROM程度まででよかったが．安く手に入ったので）
３種類のメモリーカードスロット搭載　（これも惹かれた理由）
そして価格がなんと，９万円！

買ってよかったス．

　実際使ってみての感想としては，

音静か
ディスプレイは思っていたより狭くない
ポインティング・デバイスは使いづらい，かなり　他のﾉｰﾊﾟｿよりも
キーボードはCtrlキーが小さい．Ctrlキーはｹｯｺｳ重宝するのでこれはマズイなぁ．その他にもキータッチ全体の感触は余り良くないかも

操作面で慣れるのにまだまだ掛かりそうですけど，それよりも機能や静音は魅力的．
　重量2kg強で抱えて移動するにはﾁｮｯﾄ難儀ですけど・・・
　取り敢えずマウス買おー

　因みに，WM351Lはネット販売終了し，在庫もかなり少ないので展示品で見つけたら買いかも

PC

[blog]_ ブログ始動（？）

2005-12-23T16:05:00.000+09:00

スタイルシートをいじり，テンプレートを改造して大体・なんとなく見た目ヨサ気になってきたので公開して，ブログも書いていきたいと思いますた．　ハイ

　これまでも，色々書こうとしました．色々ありました．前エントリでも，三日坊主にならないようにわざわざ『つづく』と明記したわけですし．
　しかし，蓋を開ければメンド臭が押し寄せ，学生の身分である自分には他に優先されるものがあり，　あーだこーだと ”何もしていない間” にこんなにまで時が経っていました．

･･･でもまー，ゼミ発表とか終わりましたし，研究はたったりら～と進めて行けそうなので，
そろそろ余裕な今日この頃（ｼｭｳｶﾂってな～に？△？　ｳﾏｲ？）．　もう少し真面目にブログを書こうかなとようやく思い立ちました．

　そうそう，上部メニューに「籠の中の連結」を作成．　これは，お気に入りのサイトやよく行くサイトの紹介などをエントリとして，公開ブックマークしたブログスペース．取り合えずは，以前から別ページに書いていたリンク集を移行して，ちょくちょく更新していきます．　コチラもどうぞよろ．

とりとめのない感じですけれども，此処で一区切りを打ちます．次エントリからはちゃんと考えるぞっと．

　#飲みの席は楽しいけど，五月蝿いのは嫌い．自分の話ばかりするのもｷﾗｲ　そう思う．

blog

[blog]_ blogへの第一歩

2005-10-24T02:02:00.000+09:00

まずは簡単な動機から．

　自分はつい先日から無料のWebスペースを借りて（ココから）5MBながらほそぼそと作っていたわけですけど，
なんとなく~~詰まらな~~･･･忙しくなり頻繁に更新できなかったり，
ネットに接続するのを自粛して学業に専心したりとする生活でした．

　今現在も楽になったというわけではないのですが，もっと簡単に更新できるようにブログにすることに決めたのでした，　とさ．

　ブログを設置するにあたって（もう，はじめからレンタルブログにする気ない）一番最初に考えたのは Movable type（以下MT）．　周りでもMTを使っているヒトが多いですし，自サーバを持っているならカスタム性に優れている（といわれる）MTを導入するのがよろしいかと思って．

しかし，MTは無償ライセンス取得したソースなどだけでも6MB越え．
Webスペース容量5MB…．

更に，書いた記事のログなども含めると25MBくらいの容量はないとならないらしく，　だめじゃん　うらーーー！
　　　と，激しく狂った挙句，新たなWebスペースを借りればいいかとレンタルサーバ探しを（再び）始めるのでした･･･．

･･･　つ　づ　く

blog

[blog / Blogger]_ TEST

2005-10-22T00:03:00.000+09:00

色々悩みましたが Blogger を使って現在持っているWebスペースにFTP送信してブログをやることにしました．
これはテスト用書き込み．
いずれちゃんとした記事を書きます．

やること多くて大変だ

aaa	bbb	ccc	ddd
aa	bb	cc	dd
a1	b1	c1	d1
a2	b2	c2	d2
a3	b3	c3	d3
a4	b4	c4	d4
a1	b1	c1	d1
a2	b2	c2	d2
a3	b3	c3	d3
a4	b4	c4	d4

aaa	bbb	ccc	ddd
aa	bb	cc	dd
a1	b1	c1	d1
a2	b2	c2	d2
a3	b3	c3	d3
a4	b4	c4	d4
a1	b1	c1	d1
a2	b2	c2	d2
a3	b3	c3	d3
a4	b4	c4	d4

aaa	bbb	ccc	ddd
aa	bb	cc	dd
a1	b1	c1	d1
a2	b2	c2	d2
a3	b3	c3	d3
a4	b4	c4	d4
a1	b1	c1	d1
a2	b2	c2	d2
a3	b3	c3	d3
a4	b4	c4	d4

aaa	bbb	ccc	ddd
aa	bb	cc	dd
a1	b1	c1	d1
a2	b2	c2	d2
a3	b3	c3	d3
a4	b4	c4	d4
a1	b1	c1	d1
a2	b2	c2	d2
a3	b3	c3	d3
a4	b4	c4	d4

レッド ■ ワン: red-one

ペルソナ３影時間時計Flash版（DarknessTimeClock）を公開

PC向け

ケータイ向け

Youtube でリピート再生するスクリプト repeat-play-script

スクリプト

技術後記

【P3P発売記念】ペルソナ３影時間の時計を再現

動作について

アイコン・セット - Gray_Panel

CrunchPadについての続報

外観について

ソフトについて

ここまで

Blogger ブログの要約記事をトップページに表示するアイディア

思いつく方法・その１

思いつく方法・その２

この度、Akanasu と改めます

CrunchPadは素晴らしいと思う

残念な点

蛇足駄文

年末年始の悲交々

Firefox の新規blankページをカスタマイズ

できること

ユーザスタイルシートの利用

サンプルコード

表示サンプル

テキストを表示させる

表示サンプル

応用として

参考

イタリア旅行してきました

横スクロールのサンプルページ

横スクロールするスクリプト ～横長デザインの為に～

追記 at 2008.Sep.04

追記 at 2008.Sep.02

マウスホイールで横スクロール

PageDown, PageUp キー押下時に横スクロール

vscroll.js

補足

（本当の駄文） 僕は

CSS3： Target 擬似クラスを実装するスクリプト sfTarget.js を（勝手に）作り直し

sfTarget.js: IE，Opera に Target 擬似クラスを実装するスクリプト

JS ファイル

ソースコード

CSS 指定方法に関して

リファレンス

記念日が一つ増えました

Processing Works#2 Cherry Blos.

Processing.js で１週間遊んでみた: Processing Works#1

イベント関係

描画関係

不満点

補足・注意

コメント投稿に確認用文字列 comment verification の入力を必須にしました

CTX - Screen Shot: スクリーンショット

右クリックメニューにタブ関連の項目を追加する Firefox アドオン Context Tab Access Menus 0.1 Released

ダウンロード

Firefox をダウンロード

開発版ダウンロード

ver. 0.1 で実装されている機能

ロケール

今後考えている実装

開発方針

リファレンス

テンプレ変更しました

COLORd Leaf : 名前を色に変換！

これは何？

使い方

注意

動作環境

後記

6 + 7 > 13 という考え方

テーブルのセルをハイライトするCSS +α

更新 at 2007 12 03

マウスオーバしたテーブルの行・セルをハイライト表示

Table サンプル １ マウスオーバ・ハイライト

テーブルの内容部分のみをスクロールする

Table サンプル ２ スクロール/バグあり

テーブルの内容部分のみをスクロールする 改良

横スクロールするスクリプト～横長デザインの為に～

（本当の駄文）　　僕は

Table サンプル　１　マウスオーバ・ハイライト

Table サンプル　２　スクロール/バグあり

テーブルの内容部分のみをスクロールする　改良

Table サンプル　３　スクロール/バグ修正

最近の色々残念な事； about Google APIs ＆ニコニコブックマーク

|JS | Web| JavaScript版仮想ウィンドウシステム

今回のミソは `<span >`

[Web / blog]_ レッド ■ ワンのブラウザ・シェア　Dec. 2006版

aaa	bbb	ccc	ddd
aa	bb	cc	dd
a1	b1	c1	d1
a2	b2	c2	d2
a3	b3	c3	d3
a4	b4	c4	d4
a1	b1	c1	d1
a2	b2	c2	d2
a3	b3	c3	d3
a4	b4	c4	d4

aaa	bbb	ccc	ddd
aa	bb	cc	dd
a1	b1	c1	d1
a2	b2	c2	d2
a3	b3	c3	d3
a4	b4	c4	d4
a1	b1	c1	d1
a2	b2	c2	d2
a3	b3	c3	d3
a4	b4	c4	d4