Hatena::ブログ(Diary)

生涯一マークアップエンジニアだっ!!

2010-02-10

iphone用サイトメモその1

デコード後の GIFPNGTIFFといった画像は、2Mbytesまで

デコード後のJPEG画像は、32Mbytesまで

アニメーションGIFは、2Mbytesまで

HTMLCSSJavaScriptといった各リソースファイルは、10Mbytesまで

JavaScriptの実行時間は、5秒まで

JavaScriptアロケーションは、10Mbytesまで

同時に開けるドキュメントは、8つまで

2010-01-14

HTMLコーダー100の質問に答えてみました。

ネットを徘徊してたら見つけたので、とりあえずやります。

こんなブログ名つけてるし。



1年齢は?

今年で30歳(三十路・・・・うう・・・)


2パソコン歴は?

高三ぐらいからですから、かれこれ12年ぐらいでしょうか。


3コーダー歴はどれくらいですか?

今の会社に入ってからなので3年。


4初めてwebを作ったのはいつですか?

20歳。大学の新聞サークルのホームページ


5コーダーになろうと思ったきっかけは?

どうやら俺はWebが好きらしいと気づいたのは26歳でした。


6コーディングは誰に/どこで習いましたか?

HTML/CSSは今の会社の先輩。

javascriptは独学


7web業界以外の友達・家族とコーディングの話をしますか?

しない。っていうかオカンとIE6のバグの話はできない。


8ご両親はインターネットユーザーですか?

かなり。還暦近いのに楽天で買い物してる。


9視力はいくつくらい?メガネ・コンタクトどちらですか?

裸眼2.0!!


10本はAmazonで買いますか?

当然。


11ネットショッピングをしますか?主に買うものは何ですか?

しょっちゅうする。本とか雑貨。でも万を超える買い物はあんまりしない。


12携帯サイトで買い物をしたことがありますか?

携帯はないなー。小さい画面で商品確認ができない。

iphoneだったら買っちゃうかも。


13お酒は強いですか?

嗜む程度です。


14休日の過ごし方を教えて下さい。

スタジオでドラム叩いてます。


15今、欲しいものは何ですか?

ドラムセットと、それを置ける家。


16平均睡眠時間を教えて下さい。

8時間ぐらい?


17平日の起床時間は何時ですか?

9時半w


18なにかスポーツをしていますか?

自分、文科系なもので。


19パソコンと関係ない趣味がありますか?

ドラムぐらいでしょうか。あと犬の散歩。


20コーディングに役立つ資格、パソコン関係の資格を持ってますか?

持ってない。のでこの4月の基本情報は受ける。


21昼と夜、どちらの方が仕事がはかどりますか?

15時〜20時ぐらいが最強。


22ブラインドタッチは教本通り10本の指を使いますか?

一応。


23眠い時の対処法はありますか?

トイレでうたた寝。


24息抜きについ見てしまうサイトはなんですか?

GIGAZINE痛いニュース


25他に息抜きにしていることがあったら教えて下さい。

やーネットサーフィン以外にないですね。


26仕事上で得意なことはありますか?それは何ですか?

うーん・・・・ないかも・・・


27仕事中にBGMは聞けますか?能率が上がるのはどんな音楽ですか?

ガンガン聴く。ハードロックがいいすね。最近はAC/DCがお気に入りです。


28作業パソコンはWin?Mac?

両方ありますがメインはWin


29作業パソコンはデスクトップ?ノート?

デスクトップ


30作業パソコンのマウスは標準マウスですか?

支給されたものがショボかったので、自前で用意したLogiCool


31マウスパッドは使っていますか?

使ってます。


32作業パソコンにAdobe製品は何が入っていますか?

Adobe Web Premium CS3。でも使いこなせてない・・・・


33作業パソコンはモニタは何インチですか?

何インチだろ?15かな。


34自宅にパソコン持ってますか?いくつありますか?

あります。ノートばっかり5台も。


35自宅に作業環境はある?

あります。でもそんな高スペックではないので、基本家ではやらない。


36会社と自宅、作業はどちらがはかどりますか?

会社。色んな意味で。


37自宅パソコンは家族と共用ですか?

自分専用。


38自宅パソコンはWin?Mac?

両方ある。が、Macロートル


39自宅パソコンのメーカーは何ですか?

・EeePC901

・Let's Note CF-T2

DELL Insprion

・Let's Note(型番失念)

ibook G4


40自宅パソコンはデスクトップ?ノート?

すべてノート。


41打ち合わせのメモは手描きとテキストどちらがいいですか?

テキスト。字汚いもので・・・・


42スケジュール管理は何でしてますか?(手帳・アプリケーション・webツール・モバイルなど)

iphoneのカレンダー。


43メーラーは何を使ってますか?

gmailyahooメール


44RSSリーダーは何を使ってますか?

Googleリーダー


45好きなポータルサイトはどこですか?

Yahoo!かなあ。ニュースとか読みやすいし。


46ブックマークは何で管理していますか?

はてなブックマーク。主要なところはURL覚えてますが。


47不得意だけど使わねばならない技術はありますか?

ASP。全然好きになれないけど、業務上使わざるを得ない。


48web系の雑誌を購読していますか?

定期購読はしてないけど、発売されたら一通りは立ち読みでチェックしてる。


49webの参考書は何冊くらい持っていますか?

20冊ちょっとかな・・・


50お薦めの参考書があったら教えて下さい。

オライリーのHead Rushシリーズはオヌヌメ。ただ高い!ページ数のわりに高い!


51参考にしているおすすめサイトがあったら教えて下さい。

参考にしてるというか、ここはなんかよく見てる。アイデアに刺激を受ける感じ。

革新的発明と製品情報

http://www.j-tokkyo.com/


52コーディングに使ってる、便利なツールを教えてください。

IE6で表示確認するのに、VirtualPCで環境を作るのはオススメです。

IETesterはcookieとかが再現できないので。


53コードにコメントはつけてますか?

会社の規約に基づいてつけてます。

でもHTMLのコメントはソースで見れるので要注意。


54制作過程で、どの作業が一番好きですか?(コーディング、画像作成、検証、打ち合わせ)?

そりゃコーディングだろ!!


55画像切り出しに使うソフトはなんですか?

PhotoshopFireworks。提供される素材によりけり。


56webデザインに使うソフトはなんですか?

デザインやらんもんで分からんちん。


57検証対象ブラウザは何個ありますか?

SafariChromeIE6IE7IE8OperaFirefox

7種類かな。


58一から新規制作とリニューアル、どちらが好きですか?

新規制作。リニューアルは自由がきかない。


59定期運用と新規制作、どちらが好きですか?

新規製作。運用とか重要なんだろうけど・・・的な。


60テーブルコーディング業務はありますか?

ほとんどない。テーブルで組まれてるサイトのリニューアルとかきたら、組み直す。


61新規制作の割合はどれくらいですか?

50%ぐらい?


62iPhoneサイトのコーディングをしたことはありますか?

ないー。やりたい。


63よく使うJavaScriptがあったら教えて下さい。

ライブラリってことかしら。jqueryはよく使います。


64携帯サイトのコーディング業務をしていますか?

してます。


65FLASHはどのくらいできますか?

まったくできませぬ。


66いま興味がある技術はありますか?

javascriptHTML5。あとLinuxにも興味がある。


67自分の書いたコードは美しい?

自分基準では美しいです。


68ソーステンプレートを作っていますか?

作ってます。


69単語登録にタグを登録していますか?

してません。


70HTML5、早く実務で使いたい?

使いたいですねえ。


71CSS3、早く実務で使いたい?

使いたいですねえ。使いたいですねえ。


72コーディングで伸ばしたい技術は?

javascriptリファレンスを見なくてもオブジェクトを把握できるようになりたい。


73コーディング以外で伸ばしたい技術はありますか?

ネットワークの知識。


74職場にコーダー専門職は何人いますか?兼務は何人ですか?

私含めて4人。全員兼務。


75職場のコーダー男女比はどのくらい?

1:1


76勤務時間は何時から何時までですか?

10時〜19時


77通勤時間はどのくらいですか?

自転車で15分


78月の残業時間は最高何時間でしたか?

50時間ちょっとぐらいかと。


79現在の仕事環境で良いところはどんなところですか?

自由なところ。自由すぎて怖い。


80デザイナなど他の仕事とコーディングを兼務してますか?

サーバーサイドのプログラミングと兼務。


81職場は服装自由ですか?何か規則はありますか?

自由。


82休日出社や徹夜作業はありますか?

時と場合により発生するが、頻繁にはない。


83プライベートでサイト/ブログを持ってますか?

持ってます。ここ。


84プライベートでドメインを持っている。

前に持ってましたが使わないので更新しませんでした。


85プライベートでサーバーを持っている。借りている。

さくらサーバー借りてます。意外に便利。


86CSS Niteには何回行きましたか?

行ったことない。


87地方のCSS Nite行ったことありますか?

だから行ったことないって。


88尊敬するwebクリエイターがいたら教えて下さい。

元ミラクル・リナックスの、よしおかひろたかさん

「生涯“プログラマ”宣言」はシビれた


89旅行に行く時パソコンを持っていきますか?持っていきたいですか?

持っていかないですね。iphoneあるし。


90好奇心を満たす面白い仕事を無償でやったことがありますか?どんな仕事でしたか?

仕事ではないが、業務の空き時間を使ってくだらないアプリは作ったことある。


91ディレクターなどキャリアチェンジを考えてますか?一生コーダーを貫きますか?

一生コーダーがいいなあ。


92特定のパートナー(彼女・彼氏・夫・妻)がいますか?相手は同業者ですか?

妻がいます。彼女はITとは無関係。


93パートナーは同業者がいい?別の職種がいい?

別の職種の方が視野が広がるから、その方がいい。


94コーダーをやっててよかったなあと思うときは?

作り上げて納品したらすごい達成感ある。


95何年後/何歳までコーダーをやるつもりですか?

できるまで。


96次の締め切りはいつですか?

明日。だが7割方終わっている!


97コーダー以外だったらどんな職に就きたいですか?

考えられねえ


98よいコーダーの条件を3つあげてください。

・自分が考える「美しいコード」の基準を明確に持っていること。

メンテナンスのことを考えてコードを書けること。

・謙虚であること。


9910年後、あなたは何をしてると思いますか?

分からない。が、コードを書くことを続けていたい。


100コーダーとしての自分を100点満点で評価してください。

30点。世の中もっとすごい人なんて腐るほどいる。まだまだだー。



今日のお疲れ!BGM♪

Paradise City/Guns'N Roses

min-heightをクロスブラウザで対応させる方法

が、ここに載ってた。

http://blog.creamu.com/mt/2008/03/cssminheighteasiest_crossbrows.html


■min-height

.foo {
min-height:100px;
height: auto !important;
height: 100px;
}

■min-width

.bar {
min-width:100px;
width: auto !important;
width: 100px;
}

やってみたら確かにいけたんだけど、理屈が分からない。

IE6にあるバグとしてimportant属性を設定したプロパティが、

同一セレクタ内に複数あると無視されるってのはあるんだけど、

.hoge{
 height:100px; !important
 height:200px;
}
→IE6の場合は、height:200pxが優先される。

だとしても、それだったら単純にheight:100pxになっちゃうんじゃね?と

思うんだが。これは仕様書レベルまで行かないとダメかな・・・



今日のやるぜ!BGM♪

Kashmir/Led Zeppelin

2009-07-02

focusが当たったらinputのボーダーを変えるやつをライブラリっぽく

してみた。



/*-----------------------------------------------------------------------
Object名:inputBorder
機能概要:focusされたinput要素のボーダーを変更する
引数  :(1)focusCss(配列)		focus時のCSS設定
       [0]ボーダー太さ
       [1]ボーダータイプ
       [2]ボーダーカラー
    :(2)blurCss(配列)		blur時のCSS設定
       [0]ボーダー太さ
       [1]ボーダータイプ
       [2]ボーダーカラー
戻り値 :
備考  :
-----------------------------------------------------------------------*/

//コンストラクタ
var inputBorder = function(param){
	this.inpList = document.getElementsByTagName('input');
	this.focusCss = param.focusCss;
	this.blurCss = param.blurCss;
	this.eveBind();
}

inputBorder.prototype.eveBind = function(){
	for(i in this.inpList)(function(node,obj){
		var tarNode = node;
		if(tarNode.type == 'text' || tarNode.type == 'password'){
			tarNode.addEventListener ? tarNode.addEventListener('focus',function(){obj.changeBorder(tarNode,obj.focusCss);},false):
			tarNode.attachEvent('onfocus',function(){obj.changeBorder(tarNode,obj.focusCss);});
			tarNode.addEventListener ? tarNode.addEventListener('blur',function(){obj.changeBorder(tarNode,obj.blurCss);},false):
			tarNode.attachEvent('onblur',function(){obj.changeBorder(tarNode,obj.blurCss);});
		}
	})(this.inpList[i],this)
}

inputBorder.prototype.changeBorder = function(node,borderType){
	node.style.borderWidth = borderType[0];
	node.style.borderStyle = borderType[1];
	node.style.borderColor = borderType[2];
}



なんかこう、っぽくなることを目指した。


今日のやるぜ!BGM♪

One By One/Foo fighters

2009-06-11

フォーカスがあたったらinput type="text"のボーダーを変える

こないだコリスさんの所で見かけたので作ってみた


var inputList = document.getElementsByTagName('input');
for(i in inputList){
	if(inputList[i].type == 'text'){
		inputList[i].onfocus = function(){changeBorder(this,'dotted');}
		inputList[i].onblur = function(){changeBorder(this,'solid');}
	}
}

var changeBorder = function(obj,borderType){
	obj.style.borderStyle = borderType;
}


もすこし綺麗に書き直します。

取り急ぎ。


★6/12追記★

prototypeを使って懸命に書き換えました。

初めてのgreasemonkeyです。


var inputBorder = function(param){
	this.inpList = document.getElementsByTagName('input');
	this.focusCss = param.focusCss;
	this.blurCss = param.blurCss;
	this.eveBind();
}

inputBorder.prototype.eveBind = function(){
	for(i in this.inpList)(function(node,obj){
		var tarNode = node;
		if(tarNode.type == 'text'){
			tarNode.addEventListener ? tarNode.addEventListener('focus',function(){obj.changeBorder(tarNode,obj.focusCss);},false):
			tarNode.attachEvent('onfocus',function(){tarInp.changeBorder(tarNode,obj.focusCss);});
			tarNode.addEventListener ? tarNode.addEventListener('blur',function(){obj.changeBorder(tarNode,obj.blurCss);},false):
			tarNode.attachEvent('onblur',function(){tarInp.changeBorder(tarNode,obj.blurCss);});
		}
	})(this.inpList[i],this)
}

inputBorder.prototype.changeBorder = function(node,borderType){
	node.style.border = borderType;
}

new inputBorder({
	focusCss:'1px solid #f00',
	blurCss:'1px solid #666'
});

どうやったらもっとキレイに書けるかなあ・・・・・

自分の未熟さが歯がゆい。



今日のお疲れ!BGM♪第二弾

針の山/人間椅子

2009-02-20

開発用ブラウザはFirebugの呪縛から逃れられない

タイトルがジョジョのサブタイトルっぽい件は置いといて。


Lunascape、タブブラウザ「Lunascape5.0」rc2を提供開始

http://v.japan.cnet.com/news/article/story/0,2000067548,20388357,00.htm?ref=rss


ついに候補版まできたかー、と思って開発用ブラウザ乗換えを検討したんだけど、やっぱり無理だった。

理由はFirebug。HTMLCSSjavascriptのフロント系エンジニア(造語)にとって、Firebugは便利すぎる。

Firebug上でちょこちょこjsとかCSSを直したりとか。デバッグにも威力を発揮するし。

なので、Firebugの代替品となるものがないと、ブラウザ乗り換えは難しい。


3種類のレンダリングエンジンが搭載されているLunascapeが、Firefoxのアドオンに対応してくれれば

言うことない。俺は即座に乗り換える。欲を言えばoperaのエンジンも積んで欲しいけど、

OperaはわりかしWeb標準なので、FXが見れていれば大概ちゃんと見える。


大いなる期待を込めて、Lunascapeへの乗り換えは見送ることにした。



今日のお疲れ!BGM♪

ヒラヒラヒラク秘密ノ扉/チャットモンチー