2006年9月30日

プロとして恥ずかしくないJavascriptの大原則

表題の本（プロとして恥ずかしくないJavascriptの大原則）買いました

ここ半年ほどJavascriptが世間一般的に熱いですね。
最近GUCCIのサイトも全体に渡ってjavascriptでもっさり動くサイトにリニューアルされましたし、すっかりDHTMLやAjaxは定番技術として定着しました。

という事で当blogにものjavascriptの波がやってきました。
とりあえずprototype.jsとoverLIBというライブラリを使用してちょろい感じのスクリプト組んで、
はてブのブックマークレットあたりにはっつけてみました

• 個別ページ｜
• コメント(0)｜
• トラックバック(0)

2006年9月29日

最近よく見るRootsのCS【飲スピレーション】

最近缶コーヒーRootsのCMが怖くて仕方ないです、
初めて見たときは何のCMかわかんなくてと戸惑いましたが、かなりアーティスティックです。
気になりすぎてつい「飲スピレーション」で検索してみました。

Roots PLAY! 飲スピレーション
ロード重いですけど結構すごいですね！

しかし最近CMでも街の広告でも「飲スピレーションで検索してください」のようにネットで検索する事を促す広告が増えました。

検索のテキストボックス部分のインターフェイスは人間の直感にも組み込まれてしまったという事でしょうか

• 個別ページ｜
• コメント(0)｜
• トラックバック(0)

2006年9月27日

早起き生活はじめます。

今IT業界（世間一般かも）では睡眠が見直されています。

快適な睡眠は快適に仕事をするエネルギーに変換されますよね
僕の場合入社以来遅刻した日の方が多いかもしれないような状態なのでホントスッパリと朝おきれるようになりたいものです

そんなこんなで僕もこちらの「早起き生活」でグラフをつけて睡眠を見直そうかと思ったのですが大概起きる時間一緒で代わり映えしないですねorz

Powered by 早起き生活

とりあえず、僕の知っている睡眠知識（最近ざっとよんだ記事を脳内でシャッフルしているので間違っているかもしれません）

• 寝る前は明るいものを見ない方がいい


• テレビ、パソコンは明るいものの部類


• コーヒーは夕方からもう飲むな


• 目覚ましは一個の方がいい


• 休みの日寝すぎるのはよくない


• 寝不足は食欲増進してデブになる


• 昼15分寝ると効率があがる

• 個別ページ｜
• コメント(0)｜
• トラックバック(0)

2006年9月25日

emで相対指定するとＩEでフォントサイズ最小にすると蟻みたいになる件について

mixiのとある場所にて表題のような件について話合う場を拝見しました。

実は僕も昔同じ内容で悩んだことがあります。
%（パーセント）指定をすれば解決する問題なのかもしれませんが、
その時どうしても僕はemを使うのがカッコイイと思っていたので（笑）どうやったらemで指定できるかと試行錯誤の結果以下のような方法で一応は可能にしました。

CSSのベースフォントサイズ指定部分

body {
	text-align:center;/* box centering */
	font: normal 160% "ＭＳ Ｐゴシック",
　　　　 "ヒラギノ角ゴ Pro W3", HiraKakuPro-W3, 
　　　　　　Osaka, verdana, arial, sans-serif;
	margin: 0px;
	padding: 0px;
	background: #FFF;
}

/* general params
--------------------*/
h1, h2, h3, h4, h5, h6,
div, p, pre, ul, ol, dl, dt, dd,
address, form, blockquote{
	padding: 0;/* margin&padding reset */
	line-height: 140%;/* base line height */
	text-align: left;
	display: block;
	margin: 0px;
	font-size:small;
}

要するにですが、

• bodyにフォントサイズ160%を指定
• 各要素にフォントサイズsmallを指定
• 1em（ベースフォントサイズ）=12px相当のサイズになります

やはり相対値はブラウザ毎に解釈が違うのでその差を埋めるには多少のステップを踏まなければいけないようです。

ちなみにIEの独自CSSプロパティにZOOMというものがあります、
使い道はあまり思いつきませんがこちらを利用することもできるにはできます。
以下がサンプルです↓（※注　押すと極端に見にくくなりますが更新すると直ります）

body{ zoom: 1.2 ;}（IEのみフォントサイズを120%にします）
body{ zoom: 0.8 ;}(IEのみフォントサイズを80%にします)

そして以下補足説明です。

em

emは大文字のＭの高さを基準にした１文字の大きさで1emがどのくらいかという基準サイズは相対的に決定されます。

px

モニター画面上の１ピクセルを意味し、一応相対値です。現行IEではpxでフォントサイズを指定すると一切サイズが変更できなくなるというバグがあります。

• 個別ページ｜
• コメント(0)｜
• トラックバック(0)

2006年9月24日

Movable Type コンテストにエントリーしてみた

少し前の事ではありますがMovableTypeコンテスト2006にエントリーしてみました。
このブログもデザインが6割完成ぐらいでとまってしまっているのでこれを機にもうちょっと推敲するやる気を出したいと思います。

エントリーページはこちら
エントリーNo.151 「STOPN' LISTEN」

今思えばコメントが適当過ぎるかもしれませんがよろしくお願いします、サイドにバナーもはっておきました。

MovableTypeって何？っていう方もいらっしゃると思いますので説明を引用しておきます。

＜世界基準のブログ・ソフトウェア＞
Movable Type（ムーバブル・タイプ）は、高い拡張性とカスタマイズ機能を備えた、世界標準のブログ・ソフトウェアです。そのカスタマイズ性の高さから、ブログ構築ツールとしてだけでなく、手軽なCMSとしても注目を集めています。Movable Typeは2001年の登場以来、世界中の個人・企業ユーザーのブログシステム、ウェブコンテンツの管理システムとして採用されています。

＜高い先進性：　トラックバックは、Movable Typeが生みの親＞
2001年にアメリカで登場してから早5年。Movable Typeはブログ・ソフトウェアとしては老舗の部類に入ります。今では広く認知され、ブログの代表的機能であるトラックバックは、もともとMovable Typeが世界で初めて搭載した機能です。「オープンで先進的」をモットーに、Movable Typeはこれからも進化を続けます。

＜主な特長＞
・個人の日記から、企業のウェブサイト構築やCMSツールとして幅広く使うことができます。
・従来のウェブサイトより、ランニングコストを大幅に抑えることができます。
・HTMLの詳しい知識がなくても、更新・管理がカンタンにできます。
・ＨＴＭＬ文書とレイアウトを定義するＣＳＳファイルが、切り離された構造で記述されるため、
検索エンジンに認識されやすく、ＳＥＯ対策に適しています。

• 個別ページ｜
• コメント(0)｜
• トラックバック(0)

2006年9月24日

ページング部分をＣＳＳでflickr風にデザイン

さきほど知人から以下のような依頼があり、
ちょこちょこっと久々にDreamweaverをいじったのでコードを書きとめておきます。

依頼内容とは、
ＨＴＭＬ側のコードはただのリストタグが現在使われているが無愛想なのでflickr風に装飾してくれとの依頼。
ちなみにflickrのソースは一切見てませんので多分同じものではないと思います。

ただリストタグがこんな風に↓装飾できます。

• 1
• 2
• 3
• 4
• 5
• 6
• 7

では以下がコード

HTMLソース

<ul id="sample-paging">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li>3</li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
</ul>

こちらはなんの変哲もない普通のリストタグです。

CSSソース

ul#sample-paging:after{/*for modern browser*/
    content:".";
    display: block;
    height:0px;
    clear:both;
    visibility:hidden;
}
* html ul#sample-paging{
    /*\*/height:1%;/*for WinIE*/
    display:inline-table;/*for MacIE*/
}
ul#sample-paging li{
	float:left;
	text-align:center;
	height:1.25em;
	width:1.25em;
	margin:0 0.25em 0 0;
	border:solid 1px #CCC;
}
ul#sample-paging li a{
	text-decoration:none;
	color:#3300CC;
	display:block;
	height:1.25em;
	width:1.25em;
	background:#EAEAEA;
}
ul#sample-paging li a:hover{
	color:#C00;
	background:#FFF;
}

ＣＳＳはちょっと長め、もうちょっと短くしようと思えばできますがトラブルを避けるため回りくどくなっています。

内容としては、

• 擬似要素を使用したハックでリストタグのフロートをクリア
• リストタグの横縦幅を規定したものがリンクを張っていない部分の設定
• アンカー部分に同じ縦横幅を設定することによって背景色を変える事ができるように
• ホバーの設定はお好みで
• 個別ページ｜
• コメント(3)｜
• トラックバック(0)

2006年9月20日

スクリプトアート

最近突発でFlashの案件が入ってきてかなりひさびさにActionscriptを弄びました。
これがまた楽しい事この上ないです。

いつも制約の多いＨＴＭＬばかりいじっているので自由度が高いFlashにFlash熱が再燃です。

そして某有名クリエイターの方のソースをちょこちょこっといじってスクリプトで描画するアートを作って一人癒されていました。
変数を変えるだけでぜんぜんちがう模様になるので万華鏡感覚で癒し系です。

気づいたら2時間たってました。

• 個別ページ｜
• コメント(0)｜
• トラックバック(0)

2006年9月19日

コピペで使えるFlash内に外部XMLデータを取得

最近Flash熱再燃なんですが
外部XMLファイルを読み込んで利用することができるコードをメモ
パスをかえるだけでどんなＸＭＬでも読み込めますよ！

//XMLが読み込める呪文
XML.prototype.ignoreWhite = true;//余白対策
System.useCodepage = true;
theXML = new XML();//XMLオブジェクトを作る
theXML.load("./ここにパスを指定.xml");//xmlファイルを読み込む
theXML.onLoad = XMLLoaded;//イベントハンドラ指定

function XMLLoaded() {

　　　//ここに処理を記述

      //とりあえずルートぐらいはとっておくよ

　　　var root = theXML.firstChild;

}

• 個別ページ｜
• コメント(0)｜
• トラックバック(0)

2006年9月15日

まる。てん.てん・＝ほし★

サイドバーにいれようとしたらうまくマージン調整できなかったので
エントリーに張ってみるテスト

• 個別ページ｜
• コメント(0)｜
• トラックバック(0)

2006年9月 8日

気になるめぞん一刻のキャスト

今日ひょんなことから家の前に建っているマンションの2階に住む大学生とひとことふたこと挨拶しました、
なんでも友達と女二人で家賃を折半して住んでいる芸大生だったか音大生だそうです。

こういう近所の若い女性とひょんな事で知り合うというシチュエーションは男性なら物凄くテンションがあがりますよね

ところで来年辺りだそうですがめぞん一刻が連ドラ化するそうですね。
僕もこれから前のマンションの住人とめぞん一刻的なエピソードがないかと期待してしまいます。

めぞん一刻ドラマ版の主役は伊藤美咲さんだそうですが
他のキャストも気になるところです

俺が予想する連ドラめぞん一刻キャスト

音無響子 - 伊藤美咲
五代裕作 - 劇団ひとり
一の瀬花枝 - 三輪明宏
四谷さん - 高倉健
六本木朱美 - 及川奈央
惣一郎さん - いぬ

だったらいいんですけどね

• 個別ページ｜
• コメント(0)｜
• トラックバック(0)