maaash.jp

what I create

ブロック要素の中で滑らかスクロールする方法(javascript)2

昨日の ブロック要素の中で滑らかスクロールする方法(javascript) はつくってて楽しかった♪
Flashアプリとかつくる人にとっては当たり前な気がしますが。

usage:
http://slightlyblue.com/lab/t20060827/smoothscroll.js を読み込んで、
SmoothScroll.scrollTo( ‘target id’, ‘parent id’, options);
‘parent id’ はスクロールしようとしているブロック要素のid
‘target id’ は ‘parent id’ブロック内にあるスクロール目標(=スクロール後にブロックの一番上に表示させたい行)のid
options は { time : 500, unit : 50 } 等と指定する
options.time は スクロール完了までの時間
options.unit は スクロール完了までに何ms単位で細かくスクロールするか
映画のフレームレート:24fps(40ms/frame)が映像を滑らかに見せるぎりぎりのラインだと思うので、それくらいを目安に。

point1:
滑らかなスクロールは、
$(‘parent id’).scrollTop を options.unit 毎に更新することで実現します。
更新毎の移動量は、線形に漸減する方式になっています。

目標の距離に対して、options.time / options.unit 回に分けてスクロールするので、
目標の距離 / ( options.time / options.unit ) だけ一度に動かすと、速度変化は起きません。

線形に漸減させるためには、
一回の移動量 = 目標の距離 / ( options.time / options.unit ) * 2
x2すればいいのです。
この三角形を意識すれば簡単。

4分の1円形状に速度が落ちていったらかっこいいかな、なんて考えたりすると楽しい。。

point2:
もうひとつのポイントは、IE/Firefoxの違い
MSDN Home > 連載コラム > DHTML Dude > 配置と編集
HTML要素のサイズや位置を取得する
この辺りが詳しい。
offsetTopを使って、スクロールの目標を決めているのだけれど、
offsetTopがどこ基準のオフセットなのか、ブラウザ依存。
ここでは、’parent id’のwidth,heightを絶対値指定して、’parent id’ブロックをその内側にある’target id’のoffsetParentにしている。

もし万が一使うことがありそうだったらコメントいただけたらうれしいです。

StumbleUponとポジティブスパイラル

access_20060823.jpg
アクセスが 2日で 8倍 になったのでなにかな、と。
世界中から来てるし。

stumble_20060823.jpg

と思ったら、stumbleupon.com から、 Flickr Color Selectr へものすごいアクセスがありましたよ。

stumbleupon.com は、あるサイトを ‘ I like it ‘ と表明し、似た人の ‘ I like it ‘ サイトをお互いに紹介しあうことで、みんな上質なサイトに出会えてうれしくなれる、というサイト。
ちなみにstumble uponは英語で、偶然出会う、というような意味。素敵な偶然、というか必然ですね。

‘ I like it ‘ したサイトには、コメントを残すことができ、それを見た私はあまりにも素敵な多彩なお褒めの言葉に感動してついついstumbleuponにSignUpするとともに、良質なサイトをみなさまに御紹介することを心に誓ったのでした。
なんというポジティブスパイラル!!

感動した。
I live for this.

Firefoxな方ならaddon を追加すると、ツールバーが追加されて、いつでもStumble!(似た好みの人の’I like it’サイトを紹介してもらう)できます。

こんな、つくったものによって、ちょっと世界をよくできたら幸せですね。

メガスターⅡ@川崎とプラネタリウムの進化

メガスターII特別講座 メガスター通(つう)!? を観てきた。
planetarium_20060818.jpg
感動した。(手前の黒い箱に入ってるのがメガスターⅡ)

メガスター「通」というだけあって、星座(の形)の投影は無し、専門用語の解説も少なめ、とマニアックな展開。
従来のGM IIというプラネタリウムとメガスターⅡの差異、メガスターⅡとリアルの星空の差異、おまけに川崎青少年科学館のメガスターⅡと日本科学未来館等にある他のメガスターⅡとの差異、に注目した構成だった。

実力が高いからこそできること。
双眼鏡で、天の川を構成する星々の細かさを観たり、
普通のプラネタリウム番組?では取り上げないような、メガスターでさえ肉眼ではほとんど見えないような、M(メシエ[wikipedia])いくつ、と名のつく球状星雲や散開星雲の再現性を確かめたり。

よくプラネタリウムで、スバルはいくつの星からできているか?って聞かれて5個だ6個だって答えるクイズがあるけれど、、メガスターで観ると無数に星はあって。
星の細かさ、それによる天の川や細かな星雲の美しさ、ため息ものでした。

だが、好意でか終わりがけに天体望遠鏡でダブルダブルアルビレオを観たり、リアルの星空を双眼鏡で観て思った。
メガスターもまだまだだなーって。

解説員の方も話していたが、メガスターⅡは、まだ星の明るさをバックライトを通す穴の大きさで決めている。明るい星を映すためには大きな穴を明けるのだ。
だがリアルの星空では、明るい星は暗い星と同じ大きさ(点)のまま、明るいのだ(たいてい)。
メガスターを観てひとしきり感動した後、少し明るい川崎の空の星を観て、その綺麗さに再度感動してしまった!

そうなると、プラネタリウムの進化について考えちゃいます。
進化の方向としては、正等路線として、小さくても明るい星を映せるようにしたいだろう。そうすると星雲や天の川の表現力がさらに増す。
つまり、星の光量と大きさを独立に制御したい。

ひとつのアプローチとして、TVの方式がある。
液晶素材(やプラズマやEL他平面TVを実現する素材)を使えば、画素単位で明るさを黒~白まで変化させられる。プラネタリウム内面全体を平面TVにすればよい。
星雲を表現するためには高い解像度が必要とされるが、ドームを大きくして観客との距離をとれれば(コストは高くなるが)敷き詰めるディスプレイの解像度は下げられる。
コスト次第で実現できそうな気が!

もうひとつ、
いまのプラネタリウムの構造に似たイメージで、発光体を覆っている膜に穴を明けて星を形成するところを、膜を削る(透過率の低い膜の厚さを薄くする)ことで星を形成するようにしては?
膜は、もともとの厚さでは光が完全に遮られていて、星のあるところでは、星の明るさと膜を削る深さが比例するようにする。
うまい素材が思いつかないけれど…

こうやって、違う業界のイノベーションを目の当たりにすると、頭がリフレッシュされるようでうれしい。
話は戻って。川崎青少年科学館は空いていてメガスター見学にかなりおすすめです。お台場のあれは大変混んでいるので。
ぜひ。

岩手~秋田(小岩井牧場,乳頭温泉,竿燈祭,象潟の牡蠣,川原毛大湯滝)

週末に岩手~秋田へ小旅行。
2泊2日のみ、でできることって意外と多いです。

<a href=“http://slightlyblue.com/blog/photo/akita/01.jpg” title=“1/21

盛岡着1泊
朝レンタカーを借りて小岩井牧場へ

木陰で集まってメー

しかしソフトクリームがコクがあっておいしかった!

” rel=”lightbox[akita]”> 1/21 盛岡着1泊 朝レンタカーを借りて小岩井牧場へ 木陰で集まってメー しかしソフトクリームがコクがあっておいしかった! 2/21 車を走らせ乳頭温泉へ。 3/21 鮮やか。 4/21 夏なので空いてる乳頭温泉。 5/21 あったまった後は小川に足をつけて涼む。 6/21 シンプル。 7/21 8/21 涼しい~ 9/21 夜は竿燈祭り! 10/21 上からの眺めおすすめです。 穴場を自力で見つけてください。 竿燈祭は、もっと音の力を引き出すと盛り上がると思うのです。 11/21 朝から象潟(きさがた)の牡蠣。 旬です! ねむの丘が有名な観光客のよる直売所のようだけれど、 なにげに少し走ったとこにある金浦町物産センター の方が質、大きさ/値段で勝っていたような。 牡蠣は、珍しく小さいころ苦手で大人(?)になり克服した食べ物。 一番おいしいところで食べたかったんだ。 12/21 走ってたら見かけた風車 13/21 きっとその機能美がいつも私をひきつける ギリシャ&ドイツ写真@2003秋:ミコノス島、ドイツの風車 14/21 道沿いに見つけた名水 15/21 川原毛大湯滝へ 16/21 滝へ降りて行く道中 見かける川の色が緑! 17/21 温泉が空から降ってくる。 18/21 19/21 20/21 川原毛大湯滝。 少し行きにくいけれど、行くべし!
21/21

稲庭うどんでしめ!

リアルハートの写真

20余年のこれまでの人生で最高の写真は、
偶然の産物でもある PepsiAngel だと思っています。

が、それに匹敵するヤツを発見!!

heart_20060803.jpg
Flickr Blog の The Blink of an Eye 経由

Flickr Blogやかわいいサイト等写真ベースのブログをいくつかRSSリーダー(Livedoor Reader)に登録して普段使いのフォルダに入れておくと、ちょっとした癒しになっておすすめです。

ホーキング博士と人類次の100年

Yahoo! Answers(米国Yahooの教えてグーみたいなやつ)に、本物のDr. Stephen Hawkingが質問を投げています。というか回答を得てResolve(解決)してしまっています。

質問は、

“How can the human race survive the next hundred years?”
“In a world that is in chaos politically, socially and environmentally, how can the human race sustain another 100 years? “

人類は次の100年をどうやって生き延びられるか? 政治的、社会的、環境面での混沌にあって、さらに100年人類はどう耐えられるのか?

初日1日だけで15000もの回答があり、現時点で25000超の回答が返って来ています。
この反響の多さ!
一瞬でも25000もの人(重複無ければ..)が一瞬でも人類の現状と未来に想いをはせたなら、彼のこの質問が少し人類を救ったのかもしれません。
Knowledge Basedっていうの?、こういうシステムの可能性を感じた気がします。

私も知人の代弁をしておきました。
“get small.” と。
まー文字通り受け取ればあほかと(いやどうかな)。
でも深読みすればするほどおいしさが出てくる回答です。

さて、実はホーキング博士はひとつの回答を選び出して”Best Answer”を決めて回答を締め切って(Resoved!!!)しています。
本当に、いつまでも締め切らないで欲しかったと思いますが。

ちょっとショックだったので回答の一部を引用してみましょう。

Of course, the speed that everything progresses at has increased. Will we be able to adapt in time? Perhaps not for a lot of us, but consider that in the 14th century, the Black Death wiped out over a third of Europe’s population. Yet Europe survived and prospered. We may again have a catastophe that has similarly devestating effects, but I feel confident that after the catastrophe, humankind will prosper.

Why do I place this faith in humanity? Because I must. Without the belief that we will continue to grow and overcome the pains of social chaos as we mature as a species, we might as well not have any faith at all. I’m not talking religion (although that may or may not be a part in its current forms), but simply the same belief that we will survive just as much as the sun will rise the next day.

簡単な訳:
もちろん、進歩のスピードは加速しているから。我々はそのうち適応できるようになるだろうか?全員とは言えないだろう、だが考えてもごらん、14世紀には黒死病がヨーロッパの人口の1/3を消し去ったではないか。だがヨーロッパは生き残り、発展した。それに近い途方にくれるような大惨事があるかもしれないが、私は人類が生き延びることに自信がある。
なぜ私は人類をこんなに信じているのか?信じなければならないからだ。種として成熟するに伴う社会的な混沌による痛みを克服できると信じなければ、なにも信じることなどできないだろう。(現状の形式であるにしろ無いにしろ、)宗教の話ではなく、明日太陽が昇るだろうと信じるに似て、単純に信じるのである。
訳者追加:引用文、訳ともに原文の一部である。論点と思われたところを引用している。ちなみに回答の最後から。

なぜホーキングはこの回答を選んでResolvedにしたのだろうか??
他の建設的ないろいろな意見ではなく。
なんら対策になっていないような回答を。

と、少し感情的になるくらいいまいちな回答に見えたのは、
そうすることでこの質問を深く印象付けるため、と願いたいけれど。

そんなホーキング博士が未来を語る本、読みがいあります(ぇ

ホーキング、未来を語る

ホーキング、未来を語る

<p class="amazlet-powered-date" style="font-size: 7pt; margin-top: 5px; font-family: verdana; line-height: 120%">
  posted with <a href="http://www.amazlet.com/browse/ASIN/479733634X/masaishere-22" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.amazlet.com/browse/ASIN/479733634X/masaishere-22']);" title="ホーキング、未来を語る" target="_blank">amazlet</a> on 06.08.03
</p>

<p class="amazlet-detail">
  スティーヴン・ホーキング 佐藤 勝彦<br /> ソフトバンククリエイティブ (2006/06/29)
</p>

<p class="amazlet-link" style="margin-top: 5px">
  <a href="http://www.amazon.co.jp/exec/obidos/ASIN/479733634X/masaishere-22/ref=nosim/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.amazon.co.jp/exec/obidos/ASIN/479733634X/masaishere-22/ref=nosim/']);" title="amazletlink" name="amazletlink" target="_blank">Amazon.co.jp で詳細を見る</a>
</p>

B.F.R. Download

Becky! 用の Feed Reader plugin をつくっています。

V1.08betaのダウンロードはこちらから。
V1.07のダウンロードはこちらから。

v1.07 → v1.08 は、パーサーが落ちる不具合修正と、一部読めないATOMフィードがあったのを読めるように修正いたしました。
評価ができていないのでbetaとしておきます。

–追記
2004/06/26 : v1.01 にVUPしました。
2004/10/10 : v1.02 にVUPしました。
2004/11/19 : v1.03 にVUPしました。お待たせした方、すみませんでした….
2004/11/28 : v1.04 にVUPしました。
2004/12/12 : v1.05 にVUPしました。
2005/03/21 : v1.06 にVUPしました。
2005/08/27 : v1.07 にVUPしました。
2006/08/02 : v1.08betaにVUPしました。
2007/08/31 : ダウンロードできなくしました。LivedoorReader使いましょうb

factio Blog Parts Generator beta

factio Blog Parts Generator beta
factio ブログ パーツ ジェネレーター ベータ

つくりました。

↓こういうものがお手軽につくれるツールです。

 

taptap Tシャツ

by slightlyblue

タップTシャツ。

価格: 2,625円(税125円)

AD by slightlyblue

  • factioの商品ページの縮小版をBlogに貼り付けるためのツールです
  • 黒点線の内側(点線を含まない)までが本ブログパーツのhtmlコードで表現されています
  • htmlコードをコピーし、ブログのサイドバー等にはりつけてください
  • htmlコードは自由に編集して使っていただいてokです
  • “AD by slightlyblue”は残しておいていただけるとうれしいです
  • 写真や商品説明文の転載許可はデザイナーさんから得てくださいね
  • factio officialが登場するまでのbetaです

工夫としては、
マウスオーバー時の画像拡大(縮小表示→等倍表示)を行わせるjavascriptも生成してブログパーツに含めていること、かな。

実装としては、
factioサイトをGETして、HTML::TokeParserで解析して(Lolipopインストール済だったから….)、JSONでブラウザに返して、Lyase_viewテンプレート[javascriptテンプレートエンジンまとめ][inforno::埋め込みjavascriptを実装してみました。]でレンダリングしてます。

factioデザイナーの方、ファンの方、どうぞお使いください。
ちなみにslightlyblueデザインのTシャツは、このブログパーツでスタイルを変更しなかった場合に限り転載可とします。

少年時代と口コミ

子から大人になり、なにかを忘れたとすれば、それはこの本に書いてあることだっただろう。
そんな本でした。

ちょっと長いけど印象に残ったところを引用

「みんな大人になったように見えるかもしれませんよ」と、彼女はつづけた。「だけどそれは見せかけなの。時間がこしらえた粘土細工にすぎないの。男も女も、心のずっと深いところではいぜんとして子供なんです。大人たちも飛んだり跳ねたりして遊びまわりたいと思っているのだけれど、重い粘土のせいどそれができないの。世の中が押し付けてくるいろんな束縛をふるい落としてしまいたい、腕時計をはずし、ネクタイを取り、日曜日用の靴なんか脱いで、裸になって川の淵で泳いでみたい、たとえ一日だけでもいいから、と思っているの。」

そうに違いない。
夏に読むべき1冊にふさわしい。

少年時代〈上〉
少年時代〈上〉
posted with amazlet on 06.07.30
ロバート マキャモン Robert McCammon 二宮 磬
ソニーマガジンズ (2005/07)
売り上げランキング: 17,570
おすすめ度の平均: 5

5 子供の頃、世界が今とは全然違って見えていた頃へ

    <p>
      本やCDはもうamazonでしか買わなくなった。<br /> そして必ず口コミの評判を見て、買うようになった。ネットで簡単になったからね。<br /> そして買った本と、口コミとをペアでメモするようにしている。リピーターになるための備え。
    </p>

    <p>
      今回は、↓ここが口コミの出典でした。<br /> <a href="http://q.hatena.ne.jp/1142426391" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://q.hatena.ne.jp/1142426391']);">人力検索はてな &#8211; 高校生になります。本が大好きなのですが、この本をもっと早く読んでればよかった!!!と後悔した&#8230;</a>
    </p>

    <p>
      それ以外にもはてなはよく使います。<br /> <a href="http://b.hatena.ne.jp/yto/5%e5%86%8a%e6%9c%ac/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://b.hatena.ne.jp/yto/5%e5%86%8a%e6%9c%ac/']);">はてなブックマーク &#8211; ブックマークたつを / 5冊本</a><br /> <a href="http://q.hatena.ne.jp/1089166041" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://q.hatena.ne.jp/1089166041']);">ハードSFとバカミステリが好きです。こんな私におすすめの本を紹介してください。</a><br /> <a href="http://news19.2ch.net/test/read.cgi/news/1127918810/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://news19.2ch.net/test/read.cgi/news/1127918810/']);">ピアノだけなのに神な曲教えて</a>
    </p>

快適キーボード生活とカナル型イヤホン生活

一人暮らしなもので、こじんまりと直径65cmの丸テーブル上で生活が成り立つようにしている。
19inchディスプレイ、ステレオスピーカー、キーボード、書類、iPod、本や手紙を置いていると、どうしても食事時にパスタのソースを本に飛ばしたりしてしまう。

そこで小さいキーボードを試していたのだが、このたびHHKLiteを購入し。
keyboard_20060720.jpg
上の方のヤツです。

今まで使ってたのはキーピッチが小さすぎてコロンとカッコ閉じの押し間違いとかが無視できないストレスに…
HHKLite。漆黒、深いキータッチ、スペースを無駄無く利用した感じ、なかなかよさげ。

さて、週末プログラミング加速していきましょうか!

隣には、Etymotic Research ER-6I カナル型イヤホン。
周囲の音が聴こえないと、こんなにも音がきびきびしてるなんて。
感動。

なにげに携帯音楽プレイヤーずっと使ってる人にはわかるおすすめはこの白いクリップ。
iPodも白いイヤホンケーブルが長ったらしくて引っかかるので、胸辺りにクリップがあると便利ですよね。
歩行中に車に轢かれないように、だけは気を付けましょう。

Happy Hacking Keyboard Lite2 USB JP 黒

Happy Hacking Keyboard Lite2 USB JP 黒

<p class="amazlet-powered-date" style="font-size: 7pt; margin-top: 5px; font-family: verdana; line-height: 120%">
  posted with <a href="http://www.amazlet.com/browse/ASIN/B00008B61F/masaishere-22" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.amazlet.com/browse/ASIN/B00008B61F/masaishere-22']);" title="Happy Hacking Keyboard Lite2 USB JP 黒" target="_blank">amazlet</a> on 06.07.20
</p>

<p class="amazlet-detail">
  PFU<br /> 売り上げランキング: 1,004
</p>

<p class="amazlet-review" style="margin-top: 10px; margin-bottom: 10px">
  <p class="amazlet-review-average" style="margin-bottom: 5px">
    おすすめ度の平均: <img src="https://images-jp.amazon.com/images/G/09/x-locale/common/customer-reviews/stars-3-5.gif" alt="3.56" />
  </p>

  <p>
    <img src="https://images-jp.amazon.com/images/G/09/x-locale/common/customer-reviews/stars-4-0.gif" alt="4" /> JPでも黒でも、なかなか<br /> <img src="https://images-jp.amazon.com/images/G/09/x-locale/common/customer-reviews/stars-4-0.gif" alt="4" /> Macintoshで使うと全然違和感ありません<br /> <img src="https://images-jp.amazon.com/images/G/09/x-locale/common/customer-reviews/stars-5-0.gif" alt="5" /> 使う人を選ぶキーボード
  </p>

  <p class="amazlet-link" style="margin-top: 5px">
    <a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00008B61F/masaishere-22/ref=nosim/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.amazon.co.jp/exec/obidos/ASIN/B00008B61F/masaishere-22/ref=nosim/']);" title="amazletlink" name="amazletlink" target="_blank">Amazon.co.jp で詳細を見る</a>
  </p>

  <p class="amazlet-box" style="margin-bottom: 0px">
    <p class="amazlet-image" style="float: left">
      <a href="http://www.amazon.co.jp/exec/obidos/ASIN/B000BFVI2I/masaishere-22/ref=nosim/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.amazon.co.jp/exec/obidos/ASIN/B000BFVI2I/masaishere-22/ref=nosim/']);" title="amazletlink" name="amazletlink" target="_blank"><img src="https://images-jp.amazon.com/images/P/B000BFVI2I.09.MZZZZZZZ.jpg" alt="Etymotic Research ER-6I カナル型イヤホン" style="border: medium none " /></a>
    </p>

    <p class="amazlet-info" style="float: left; margin-left: 15px; line-height: 120%">
      <p class="amazlet-name" style="margin-bottom: 10px; line-height: 120%">
        <a href="http://www.amazon.co.jp/exec/obidos/ASIN/B000BFVI2I/masaishere-22/ref=nosim/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.amazon.co.jp/exec/obidos/ASIN/B000BFVI2I/masaishere-22/ref=nosim/']);" title="amazletlink" name="amazletlink" target="_blank">Etymotic Research ER-6I カナル型イヤホン</a>
      </p>

      <p class="amazlet-powered-date" style="font-size: 7pt; margin-top: 5px; font-family: verdana; line-height: 120%">
        posted with <a href="http://www.amazlet.com/browse/ASIN/B000BFVI2I/masaishere-22" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.amazlet.com/browse/ASIN/B000BFVI2I/masaishere-22']);" title="Etymotic Research ER-6I カナル型イヤホン" target="_blank">amazlet</a> on 06.07.20
      </p>

      <p class="amazlet-detail">
        Etymotic Research (2005/09/20)<br /> 売り上げランキング: 1,011
      </p>

      <p class="amazlet-review" style="margin-top: 10px; margin-bottom: 10px">
        <p class="amazlet-review-average" style="margin-bottom: 5px">
          おすすめ度の平均: <img src="https://images-jp.amazon.com/images/G/09/x-locale/common/customer-reviews/stars-5-0.gif" alt="5" />
        </p>

        <p>
          <img src="https://images-jp.amazon.com/images/G/09/x-locale/common/customer-reviews/stars-5-0.gif" alt="5" /> E2Cにもアル面では勝るかな
        </p>

        <p class="amazlet-link" style="margin-top: 5px">
          <a href="http://www.amazon.co.jp/exec/obidos/ASIN/B000BFVI2I/masaishere-22/ref=nosim/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.amazon.co.jp/exec/obidos/ASIN/B000BFVI2I/masaishere-22/ref=nosim/']);" title="amazletlink" name="amazletlink" target="_blank">Amazon.co.jp で詳細を見る</a>
        </p>