 
|
はてなキーワード: Firebugとは
ニートだけどHTMLコーダーになりたいから100の質問に答えてみる！
クレジット→h t t p : / / a k b d . i n f o / ? p =1 1 7 2
19才。
7年くらい。
0年。
HTML組むのが好きだから。
高1の情報の授業が最初。それからとほほとかTAGindexで基礎的なこと勉強して、Web標準の教科書、TheWebKANZAKI…と進展してった。
兄と少し。
いいえ。メールができる程度。
左右どっちかが1.3、左右どっちかが0.3、メガネ・コンタクトなし。
Amazonで買うか、近くの書店で探すか。楽天や紀伊国屋では買わない。
する。本、お菓子。
多分ない。
父に似てアルコールに弱い（肌が赤くなる）けど、母に似て酔わない。
毎日が休日だから平日も土日も祝日も過ごし方は変わらないけど、音楽聴いたりドラマ流したりしながら常にパソコンの前に座ってる。
お金。
早くて4時、遅くて12時。
してない。
サーティファイのWebクリエイター検定上級っていうの持ってるだけ。極めて簡単な検定。
夜。
いいえ。右手の小指と親指は使ってない。左手の親指はスペース担当、中指がR・E・Wの列を担当して、薬指がAとZ、小指はShiftだったり。
寝る。シャワー浴びる。
寝る。コーヒー飲む。
まだよくわからない。
聞く。日本語の歌詞じゃない曲。洋楽とか、クラシックとか。日本語の歌詞だと歌詞が気になっちゃう、歌っちゃう。
Win。
標準マウスってなに。LogicoolのMX518って書いてあるやつか、Microsoftのマウス腱鞘炎防止マウスみたいなやつ。
使ってない。
WebPremiumCS4。
知らない。
ある。
知らない。多分自宅。
いいえ。
Win。
コントロールパネル→システムにはAMD Athlon(tm) 64 X2 Dual Core Processor 5000+ 2.60GHz 3.00GB RAMって書いてある。よくわからない。作ってもらった。
デスクトップ1つ、ノート1つ。使ってるのは基本的にデスクトップ。
テキスト。
してない。
ポータルサイト？Yahoo!かな。ニュースと辞書と翻訳とメールしか使わないけど。
Firefoxにブックマークツールバーにどんどん追加してってそろそろ整理しないとまずいかなと思ってるところ。ソーシャルブックマークは使いこなせなかった。
してない。
13冊。
TheWebKANZAKI、WWWWATCH、Forest.Kの徒然日記、W3G、Metaphaseの公式サイト、Web標準Blog、WebDesigner Depot、MicroformatsWiki。
何だろう。使ってるのはDreamWeaver、サクラエディタ、Firebug。
あまりつけない。
普段はWinXPのIE8、IE7スタンドアローン、IE6スタンドアローン、Firefox3、Opera10、Safari4、Chrome1。必要に応じてWinVistaやWin7のIE8、IETester、Opera、Safari、Chrome。Macでは確認してないなぁ。
新規制作のはず。
新規製作だと思う。
知らない。ない。
知らない。
ない。
ない。
知らない。
AdobeFrashの基本的な使い方が分かるくらい。ActionScriptはほんのちょっと。
PHPがんばってる。
自分としては美しいと思うけど、他の人に見せたらだいたいが汚いって言う。
作ってる。
してない。
使いたくなくはないけど、使いたいとも思わない。
使いたくなくはないけど、使いたいとも思わない。
PHP。
知らない。
知らない。
知らない。
知らない。
知らない。
知らない。
知らない。
知らない。
知らない。
持ってる。
持ってる。
借りてる。
0回。
ない。
TheWebKANZAKIの神崎さん、WWWWATCHの加藤さん、ヨモツネットの小山田さん。
行かない。持って行きたい。
多分。
いない。
どちらでもいい。
ない。
分からない。
知らない。
いろんな閲覧環境のことを考えてる、いろんな技術のことを考えてる、なぜそう組んだかをちゃんと説明できる
想像できない。
40点。
10/18 改訂
なお、取得した画像の著作権はグーグル他各社が保持しています。
ご利用は計画的に私的範囲でどうぞご利用ください。
#!/usr/bin/perl use strict; use warnings; use Getopt::Long; use LWP::UserAgent; use GD; my $cmdline = join(" ", $0, @ARGV); my $usage = "usage: $0 -sx=116423 -sy=51603 -ex=116426 -ey=51605 -dx=4 -dy=3 -z=17 -size=300 -get=30 -dir=cache -output=output.jpg -nodebug"; my ($sx, $sy) = (0, 0); my ($ex, $ey) = (0, 0); my ($dx, $dy) = (4, 3); my $z = 17; my $size = 300; my $get = 30; my $dir = "cache"; my $output = "output.jpg"; my $debug = 0; GetOptions("sx=i" => \$sx, "sy=i" => \$sy, "ex=i" => \$ex, "ey=i" => \$ey, "dx=i" => \$dx, "dy=i" => \$dy, "z=i" => \$z, "size=i" => \$size, "get=i" => $get, "dir=s" => \$dir, "output=s" => \$output, "debug!" => \$debug) or die "$usage\nDied"; if ($ex == 0) { $ex = $sx + $dx; } else { $ex++; $dx = $ex - $sx; } if ($ey == 0) { $ey = $sy + $dy; } else { $ey++; $dy = $ey - $sy; } $sx>0 and $dx>0 and $sy>0 and $dy>0 and $z>0 and $dir and $output or die "$usage\nBad arguments"; $dx*$dy > $size and die "Getting too large."; $debug and print "debug: mkdir $dir\n"; mkdir $dir; -d $dir or die "can't make dir $dir: $!"; my $base = sprintf("http://khm%d.google.co.jp/kh/v=46&z=%d", int(rand(4)), $z); my $ua = LWP::UserAgent->new; printf "now get %d images...\n", $dx*$dy; for (my $x=$sx; $x < $ex; $x++) { for (my $y=$sy; $y < $ey; $y++) { my $file = sprintf("%s/%02dz%06dx%06d.jpg", $dir, $z, $x, $y); $debug and print "debug: check of $file\n"; -s $file and next; --$get < 0 and last; my $req = HTTP::Request->new(GET=>+"$base&x=$x&y=$y"); $debug and print "debug: fetch from ".$req->uri."\n"; my $res = $ua->request($req); unless ($res->is_success) { print "fail fetch from $file: ", $res->status_line, "\n"; next; } if (open(my $fh, ">", $file)) { $debug and print "debug: write of $file\n"; binmode $fh; print $fh $res->content; close $fh; } else { print "fail open in $file: $!\n"; } } } $get < 0 and print "reach the getting limit, skip after all.\n"; printf "creating %dX%d image...\n", 256*$dx, 256*$dy; my $image = new GD::Image(256*$dx, 256*$dy); for (my $x=$sx; $x < $ex; $x++) { for (my $y=$sy; $y < $ey; $y++) { my $file = sprintf("%s/%02dz%06dx%06d.jpg", $dir, $z, $x, $y); $debug and print "debug: check of $file\n"; -s $file or next; $debug and print "debug: read of $file\n"; my $part = GD::Image->newFromJpeg($file); $debug and print "debug: image copy\n"; $image->copy($part, 256*($x-$sx), 256*($y-$sy), 0, 0, 256, 256); } } #$image->string(gdSmallFont, 0, 0, $cmdline, $image->colorAllocate(255, 255, 255)); open(my $fh, ">", $output) or die "fail open $output: $!"; $debug and print "debug: write of $output\n"; binmode $fh; print $fh $image->jpeg(); close $fh;
例えば秋葉原とか
perl gmwall.pl -sx=116423 -sy=51603 -ex=116427 -ey=51606
駅だけとか
perl gmwall.pl -sx=465701 -sy=206420 -ex=465705 -ey=206423 -z=19
使う数値はfirebugなどで拾ってください。
寝る前にいくつか返信。
http://anond.hatelabo.jp/20080902220835]
たぶんそうだと思う。
http://anond.hatelabo.jp/20080902221735]
でもほら、ダイアリーの立ち上げ当時は似たようなもんじゃないかと。
同様の意見としてb:id:hatayasanとかb:id:ululunとかb:id:nakano87とかb:id:te2uとかね。元記事にチェックボックス案もmetaを使う前提でチェックが off なら head に件の meta を入れる
って書いてあるのになぁ。リテラシーって大事だ。
そっちの仕様は別にいいの。自社サービスの機能を使うのにmetaを本文に書かせるのがダメ。
b:id:masayc 技術力を期待してはてな使ってる人ってどれくらいいるんだろうね？俺は、日本”語”でweb2.0ごっこしたいだけで、もし英語が達者ならdiggとdelicious使うけどな。
日本語のWeb2.0ごっこなら、私が唯一中期間使った例で申し訳ないけどドリコムブログの方が優れてた。使ってたの数年前だけど(今はWP)。例えばデザイン編集画面で、ブログの2or3カラムレイアウトに表示する要素をDnDで並べ替えたりとか。DHTMLすげーって感じ。
はてなはWeb2.0の特徴の一つと言われてるマッシュアップとかがろくにできない。はてなのデータを外で使うための機能は多いけど、外のサービスとかをはてなに持ち込めない。Blogパーツ、裏技使わないと自由に貼れないでしょ？
2.0っぽさではてなよりも劣ってるサービスってあんま無いんじゃなかろうかと。むしろ往年のWeb日記の仕様を引きずってるし、メジャーバージョンは1。Web1.9。
b:id:xevra 技術的には指摘の通りだろう。だが経営的にはこれが正解。なぜなら一覧非表示機能を希望し、文句言ってくる人は0.01%程度。この程度のものにリソースは割けない。完璧を求めるのは趣味の領域。jkonは正しい。
今は一覧非表示機能に限った話してないんだけど。上の方のアレもそうだけど、非表示絡みでコメしてる人は何故かピントが合わない。
例えばブログモード使ってる人ってけっこう多いけど、彼らは絶対に記事毎に編集やコメント管理できた方が便利。トラバ先を記憶する機能ってそんなに開発リソース必要ですか。大した事無い機能変更にもがっつりリソースを割かないと改善できないのが問題。
まぁでも確かに、現在のはてダの低い技術ポテンシャルという前提の下では、jkonは正しいね。
b:id:ghostbass なんだって？？テーブルの変更なんか必要ないけど？
そうなんですか。考えてみます。思いつかなかったら勉強してみます。Boromさんの案が正解かも。
b:id:EvilGood おそらくそうなんだろうけど、小手先回避なんだろうとは思うが、さきざきサーバーの処理能力が上がって、すべて記法解析でやった方が速度出る日が来そうなんだよな。はてなはXMLDBとか検討してるんだろうか？
はてなが未来を見据えてそういう拡張をしてきたのか、という点はさておき、すべてを記法でやろうとすると記事の編集時の可読性が下がります。本文にmetaとか記事見出しなのに何故か本文にあるとかトラバ送ったかどうか解らないとか。
ユーザーの快適性とか開発の柔軟性とかを犠牲にしてまで、未来の鯖速度を追求するというのはなかなかどうも、説得されないです。
さらに追記。
b:id:skicco はてな記法でごまかしてくれたおかげで、他のブログサービスではできない重複したカテゴリへの登録ができてる。これが可能なのってはてダくらいじゃね？
最近のブログサービスは知らないですけど、WordPressではできます。ところでカテゴリってリストから選べないと Typo りますよね。
ごめん、年1000万の間違いだったかも。倍近く違うじゃん。malaさんが入社したてのころにどっかでこういうの書いてた。うるおぼえ。
b:id:kana-kana_ceo 「普通なら、日記の編集フォームに一つ『ブクマページでブコメを表示する』というチェックボックスを付ける。チェックが off なら head に件の meta を入れる」← なんで、非表示がデフォなんだろう？
一人くらい勘違いする人がいるとは思ってた。非表示がデフォなんて書いてない。デフォでチェックが on にしてあればおk。
チェックボックスのラベルは肯定文で書くのが UI の Tips。「非」表示は否定語。
b:id:al001 "少なくとも"技術力の問題では無いと思うが。面倒とかそういうのであれば分かるけど。 / チェックボックスでオンオフ出来るだけで良いなら、DB弄らずともJavaScriptだけで出来る。
まず後半。またまたご冗談を。クライアントサイドの解決法じゃ meta が body の下にある事は変わらなかろうて。パース後に動かすつもり？
そういや手元で試してみたら、 Firebug でソースを見ると body 内の meta も head の下にあったものとしてパースされるね。
前半は、他の人も同様の事言ってますね。要するに費用対効果の話。
でも、面倒
=費用が高くついてるのはシステムの出来が悪いから。スパゲッティーを紐解きたくないんでしょう。
ブコメ非表示みたいなおそらくほとんど使われないような機能だけがこうやって糞仕様存置されてるってんなら、経営判断って意見も説得力がありますね。
★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★
★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★
_________________ここから下は古い情報▼__________________________________________________
今、自分のブログをスクラッチしているので、こちらで。→2008/9/28 スクラッチ完了！BLACK-OUT.CSS公式ページ
作りました
要は、LynxのようなシンプルWebに世界がなればいいのになと思っている方。
そして、どんなサイトでも目線は左右に動かしたくない！スクロールは上下だけで済ませたい！
と、強く考えておられる方むけの情報です。
私はテキストブラウザのLynxを時々使っているのですが、これでサイトを見るとシンプルに見れるのですごく良いんですよね。
ただ、LynxはFlashとか画像が見れないし、マウスが使えないのはいざって時にちょっと不便。
で、Firefoxをテキストブラウザ化できないかなあと、ふと思いまして、思いつきで作ってしまいました。
私めもwebデザイナーやっとるんですが、上記のように、昨今のwebデザインなんて普段はなくていいって思っている奴でして。
仕事じゃ3カラムのサイトとか作りますが自分はそんなん好きじゃないです。色がサイトごとに違うってのも理解できない。
必要なのは情報であってデザイナーのデザインなんてどうでもいいんですよ。
そんな訳で、どんなサイトでもテキストブラウザ状態で閲覧できるFirefox用の拡張cssを作りました（やっつけだけど）。
ただ、ニュースサイトで画像が見れないと困る時もあるので、普段は小さなサムネイルで、カーソルを合わせた時だけ大きく表示されるようにしています。
＠このcssはコンセプト実証モデルです。思いつきで作ってるのでちょっと問題もあります。フィードバックとか意見など頂けると嬉しいかも。
＠将来的には、グリモンでjsも組み合わせてもっとコンソールのような感覚でブラウジングできるようにしたい
＠（参考用）私のよく見るサイト・・・ニコ動、wikipedia、スラッシュドットジャパン、2nn.jp（2ch）、mixi、はてなでホッテントリに上がっているブログ各種
ちなみに、こんなん使うな、既にこんないいのあるわいってのをご存知の方は教えてくれると嬉しいです。
それなりに探したのだけど、見当たらなくて・・・だから自作したので。
/* * ---------------------------- * black-out.css * author zamamin.com * build 2008.8.09 15:03 * version 0.0.31 * fix @namespaceを書いてなかったので追加 * ---------------------------- * */ @namespace url(http://www.w3.org/1999/xhtml); /* 全てのエレメントをリセット */ body,body * { background-image:none !important; background-color:#000 !important; border-color:#333 !important; text-decoration:none !important; color:#aaa !important; /*<- テキスト色 */ font-size:16px !important; /*<- 文字サイズ */ font-weight:normal !important; padding:0.15em !important; margin:0 !important; line-height:1.25em !important; text-align:left !important; text-indent:0 !important; font-family:Arial,Helvetica,Verdana,'ヒラギノ角ゴPro W3','Hiragino Kaku Gothic Pro',Osaka,'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif !important; float:none !important; clear:both !important; position:relative !important; width:auto !important; height:auto !important; } body { background-color:#000 !important; padding:0.5em !important; } body * p, body * div, body * h1, body * h2, body * h3, body * h4, body * h5, body * h6{ margin-bottom:0.3em !important; float:left !important; clear:both !important; } /* リンク色 */ body * a, body * a *{ color:#a50 !important; } /* アクセス済みのリンク色 */ body * a:visited{ color:#a50 !important; } /* カーソルを合わせた時のリンク色 */ body * a:hover, body * a:hover *{ color:#0aa !important; background-color:#609 !important; } /* 画像は普段は小さくサムネイル表示。鬱陶しいので薄く表示 */ body * img{ opacity:0.3 !important; height:15px !important; width:15px !important; } /* 画像はマウスカーソルもっていけば原寸サイズになる */ body * img:hover{ opacity:0.9 !important; height:auto !important; width:auto !important; } button, input, select, option, textarea{ color:#f00 !important; padding:0.05em !important; height:auto !important; } /* テーブルのスタイル */ table{ border:none; } table td, table th{ border:none; border-right:1px dashed #999 !important; border-bottom:1px dashed #999 !important; } /* for 2ch（暫定） */ body * dt{ font-weight:bold !important; } /* 二コ動 */ embed#flvplayer{ height:540px !important; width:952px !important; }
ほんとにもう最高。
楽したい人間+ハマり性な人間には、こーゆーカスタマイズがしがし出来るツールが最高なのよ。
エディタならvim。emacsでもいいけど、あんまり詳しくない。
他のツールはカスタマイズ性で見劣りする。
こだわりのない人間にはどんなツールでもオッケーなんだろうね。
オレはこだわるところはこだわる。
ちょっとした不便に気づかないか気づいても甘受してしまうような人間と、今はクリアできなくともなんとか今後の課題にしたいと考える人間。
そこの違いだね。
どっちが得かというのはわからんけどね。
優劣とか損得の問題じゃなく、ただオレはそういう人種だってこと。
追記
vimperatorrcねえ。特筆すべき点はないけど、あえて一部抜粋すれば、こんな感じ。
inoremap <C-1> <Esc>1gt inoremap <C-2> <Esc>2gt inoremap <C-3> <Esc>3gt inoremap <C-4> <Esc>4gt inoremap <C-5> <Esc>5gt inoremap <C-6> <Esc>6gt inoremap <C-7> <Esc>7gt inoremap <C-8> <Esc>8gt inoremap <C-9> <Esc>9gt noremap <BS> H noremap <S-BS> L noremap ,b <Esc>:bmarks -tags= noremap u :o<Space> " ldrc+ldrでoで:open出来ない問題を解決
" wildoptions=auto時に一瞬補完が表示されてウザいmapがある - Dis Communication - 符号無し " http://unsigned.g.hatena.ne.jp/Trapezoid/20080620/1213961754 javascript <<EOM [ [',a',':dialog addbookmark'], [',c',':viewSBMComments -t h'], [',C',':viewSBMComments -t hdl'], [',d',':pindownload'], [',ld',':set ldrc'], [',p',':mb clear-pin'], [',q',':toggleldrc'], [',R',':so ~/_vimperatorrc'], [',r',':res'], [',v',':!vim ~/_vimperatorrc'], ['\\s',':scrapbook'], ['\\S',':scrap'], ['\\f',':firebug'], ['\\d',':dialog downloads'], ['\\p',':tabopen chrome://browser/content/places/places.xul'], ['!',':set invum'], ['B',':ls!'], ['\\a',':addons'], ['\\e',':errorconsole'], ['\\F',':firebugwindow'], ['\\d',':dialog downloads'], ['\\g',':oepnGMpanel'], ['\\G',':toggleGM'], ['e',':note'], ['<F11>',':fullscreen'], ['\\P',':placesnewwin'], ['\\H',':historynewwin'], ['<C-j>',':togglebookmarksidebar'], ['<C-k>',':togglehistorysidebar'], ['<C-l>',':addtoldr'], ['<C-S-Right>',':removerighttabs'], ['<C-S-Tab>',':previousfirebugtab'], [',o',':openselectedlinks'], [',3',':copy titleAndURL'], [',ig',':imageGet'], [',io',':imageOpen'], ['w',':submit'], [',lo',':logout'], // nicontroller.js [',ni',':nicoinfo'], [',np',':nicopause'], [',nm',':nicomute'], [',nv',':nicommentvisible'], [',nz',':nicosize'], [',ns',':nicoseek'], ].forEach(function([key,command]){ liberator.mappings.addUserMap([liberator.modes.NORMAL], [key], "User defined mapping", function () { liberator.execute(command); }, {rhs: key, noremap: true}); }); EOM javascript <<EOM [ ['<C-j>',':togglebookmarksidebar'], ['<C-k>',':togglehistorysidebar'], ].forEach(function([key,command]){ liberator.mappings.addUserMap([liberator.modes.INSERT], [key], "User defined mapping", function () { liberator.execute(command); }, {rhs: key, noremap: true}); }); EOM
javascript <<EOM // nicontroller.js plugin // [N]- // N 秒前にシークする。 // 指定なしの場合 10 秒前。 liberator.mappings.addUserMap( [liberator.modes.NORMAL], ['-'], 'seek by count backward', function(count) { if(count === -1) count = 10; liberator.execute(':nicoseek! ' + '-' + count); }, { flags: liberator.Mappings.flags.COUNT } ); // [N]+ // N 秒後にシークする。 // 指定なしの場合 10 秒後。 liberator.mappings.addUserMap( [liberator.modes.NORMAL], ['+'], 'seek by count forward', function(count) { if(count === -1) count = 10; liberator.execute(':nicoseek! ' + count); }, { flags: liberator.Mappings.flags.COUNT } ); EOM
Vimperatorで;bでリンクを新しいバックグラウンドのタブに開くようにする。
http://anond.hatelabo.jp/20080709195527
も俺の仕業なんだけど、これvimperator本体に実装してくれないかな。
気になる点・これからの課題
窓の杜 - 【NEWS】Firefox 3のスマートロケーションバーに対応した「XUL/Migemo」
http://www.forest.impress.co.jp/article/2008/07/07/xulmigemo0105.html
余談
Index of /
http://vimperator.driftaway.org/
に上がるのはたいてい朝の07:30になっているので、いつからかチェックするのが朝の習慣になった。
javascriptで存在するほとんどのオブジェクトの実体はハッシュだよ。
var arr = [0,1,2,3];
とかをみると配列(人によってはリスト)に見えると思う。でも実際は違うんだ。
これは
var has = {0:0,1:1,2:2,3:3};
と基本的には等価なんだ。ただちょっと束縛されているメソッド(インターフェイス)が違うだけ。
ためしに
arr[4] = 4; arr['x'] = 'string'; arr[-1] = -1;
としてみよう。
Firebugで確認してみると[0, 1, 2, undefined, 4]というような値がかえってくるよ。
でもarr[-1]やarr['x']の値は保存されてないのかな？そんなことはないちゃんとアクセスできるんだ。
それどころかarr.xで'string'がかえってくるんだ。
別の例を見てみよう。
var fx = function(){}; fx[0] = 'somestring';
こうするとfx[0]に'somestring'が束縛される。
つまりfunctionも一つのハッシュだったんだ。
これでほとんどのものがハッシュだということが解ってくれたかな？
ハッシュじゃないのは文字列とか数字とかそいういシンプルなものだけなんだ。
ハッシュへはhash[name]でアクセスすることが出来る。
それ以外にもnameが演算子や空白を含まなくて頭が数字でない場合はhash.nameでアクセスできるんだ。
これでhash[name]が関数だったらhash.name(args)とできるよ。まるでメソッドみたいだね。
関数には名前を付けなくても使用可能だよ。
function(x){return x+x}(2); -> 4
関数宣言の書き方って次見たいの覚えてる人が多いんじゃないかな？
function funcname(args){ do something};
でもこれはsystax sugerだってことを知ってほしい。
上でも使ってるんだけど。
var funcname = function(args){ do something};
と等価になる。もちろんどちらの書き方でもかまわないよ。
ただ、(無名)関数を宣言してそれをfuncnameに束縛しているっていうことを理解しておくと便利だよ。
javascriptはレキシカルスコープを採用してるんだ。
レキシカルスコープなんていうと難しく感じるかもしれないけど、結構単純なんだ。
var x = 'global';
var fx1 = function(){return x};
var fx2 = function(){var x = 'local';return x}
これの実行結果は以下になるよ。
fx1() -> 'global' fx2() -> 'local' fx1() -> 'global'
fx2の変数xはほかの場所に影響しないんだ。これは関数の中と外ではスコープが違うからなんだ。
でも以下のような場合に注意してほしいな。
var x = 'global'; var fx1 = function(){return x}; var fx2 = function(){x = 'local';return x}
fx1() -> 'global' fx2() -> 'local' fx1() -> 'local'
fx2は自分のスコープに変数xがないからその外側スコープに探しに出かけたんだ。
つまり宣言文varはそのスコープに新しい名前を登場させる機能なんだよ。
別の場合を見てみようね。
var x = 'global'; var fx1 = function(){ var x = 'local'; return function(){return x} }; var fx2 = fx1();
x -> 'global' fx2() -> 'local'
この例だとfx2()の値がlocalになってるね。
なぜなら外側スコープっていうのは関数を評価した場所じゃなくて、関数を定義した場所の外側なんだ。
一つ上の例では実際に関数を返り値にしているね。
var fx1 = function(){ var x = 0; return function(){ x = x+1; return x; } }; var fx2 = fx1(); var fx3 = fx1();
fx2() -> 1 fx2() -> 2 fx2() -> 3 fx3() -> 1 fx3() -> 2
fx2とfx3の値が違うのはそれぞれ別の関数が作られるからだよ。
こんな風に関数が状態を持つことも出来るんだ。クロージャーとよんだりするよ。
関数がハッシュを使って複数の関数を返すとこんなことも出来るよ。
var fx = function(){ var x = 0; return { 'up':function(){ x = x+1; return x; }, 'down':function(){ x = x-1; return x; } } }; var obj = fx();
obj.up(); -> 1 obj.up(); -> 2 obj.down(); -> 1 obj.down(); -> 0
thisという機能があるよう。ちょっとだけつかってみるね。
var x = 0; var add = function(n){this.x = this.x + n; return this.x}; var mul = function(n){this.x = this.x * n; return this.x}; var obj = {'x':0,'do':add};
add(1); -> 1 add(1); -> 2 mul(2); -> 4 obj.do(); -> 1 obj.do(); -> 2 obj.do = mul; obj.do(); -> 4
thisは評価された場所によって値がかわるよ。
objの中にいるときはobj.xを扱うし、グローバルにいるときはグローバルのxを扱うんだ。
http://anond.hatelabo.jp/20070620200618を改訂してみたよ。
このぶんしょうがjavascriptを覚える上の一助になるとうれしいんだ。
あとここでつかってるハッシュは伝統的な意味。連想配列のことね。
突っ込みも大歓迎だよ。
javascriptで存在するほとんどのオブジェクトの実体はハッシュだよ。
var arr = [0,1,2,3];
とかをみると配列(人によってはリスト)に見えると思う。でも実際は違うんだ。
これは
var has = {0:0,1:1,2:2,3:3};
と基本的には等価なんだ。ただちょっと束縛されているメソッド(インターフェイス)が違うだけ。
ためしに
arr[4] = 4; arr['x'] = 'string'; arr[-1] = -1;
としてみよう。
Firebugで確認してみると[0, 1, 2, undefined, 4]というような値がかえってくるよ。
でもarr[-1]やarr['x']の値は保存されてないのかな？そんなことはないちゃんとアクセスできるんだ。
それどころかarr.xで'string'がかえってくるんだ。
別の例を見てみよう。
var fx = function(){}; fx[0] = 'somestring';
こうするとfx[0]に'somestring'が束縛される。
つまりfunctionも一つのハッシュだったんだ。
これでほとんどのものがハッシュだということが解ってくれたかな？
ハッシュじゃないのは文字列とか数字とかそいういシンプルなものだけなんだ。
ハッシュへはhash[name]でアクセスすることが出来る。
それ以外にもnameが演算子や空白を含まなくて頭が数字でない場合はhash.nameでアクセスできるんだ。
これでhash[name]が関数だったらhash.name(args)とできるよ。まるでメソッドみたいだね。
javascriptはレキシカルスコープを採用してるんだ。
var x = 'global';
var fx1 = function(){return x};
var fx2 = function(){var x = 'local';return x}
これの実行結果は以下になるよ。
fx1() -> 'global'
fx2() -> 'local'
fx1() -> 'global'
fx2の変数xはほかの場所に影響しないんだ。これは関数の中と外ではスコープが違うからなんだ。
でも以下のような場合に注意してほしい。
var x = 'global';
var fx1 = function(){return x};
var fx2 = function(){x = 'local';return x}
fx1() -> 'global'
fx2() -> 'local'
fx1() -> 'local'
fx2は自分のスコープに変数xがないからその外側スコープに探しに出かけたんだ。結果fx
つまり宣言文varはそのスコープに新しい名前を登場させる機能なんだよ。
関数宣言の書き方って次見たいの覚えてる人が多いんじゃないかな？
function funcname(args){ do something};
でもこれはsystax sugerだってことを知ってほしい。
上でも使ってるんだけど。
var funcname = function(args){ do something};
と等価になる。もちろんどちらの書き方でもかまわないよ。
関数は返り値として関数はハッシュを指定できるよ。次のハッシュを返す関数を見てみよう。
var fx = function(){ var x = 0; return { 'x':x, 'add1':function(y){this.x = this.x+y;return this.x}, 'add2':function(y){x = x+y;return x} } } var obj = fx();
実行結果を見てみよう
obj.x -> 0 obj.add1(0) -> 0 obj.add1(0) -> 0 obj.x -> 0 obj.add1(1) -> 1 obj.add1(0) -> 0 obj.x -> 1 obj.x -> 1 obj.add1(0) -> 1 obj.add1(2) -> 2 obj.x -> 1
となる。
add1はthis.xにたいして演算をしている。つまり返された値が変化しているんだ。
add2は関数fxに閉じ込められた値に対して演算している。つまりこれらは別の値なんだ。
とここまでかいたら疲れた。
読んでくれた人ありがとう
ちゃんとまとめてなかったし、自分のブログに描いても見てくれる人はいないから増田に書いてみたよ。
ほかの言語や技術についても同じような解説が欲しかったら何らかの方法で言及してくれるとうれしいな。
ここまではてブが300突破してるみたいだけどいま、自分のブログへリンクを張ったら増田に書く意味がなくなるんじゃないかと思うんだ。
やらないけど。
こんなのもかいてみたよ、増田で。 http://anond.hatelabo.jp/20070621153600
JavaScriptなんでどうでしょうか。
べつにAJAXを書くとかそういう訳じゃなく、
「7時ですよ。朝早くからお疲れ様です(^^)」って時代のやつ。
ある程度HTMLの知識が必要になってくるけど、
変数の宣言とかその辺に関してはだいぶ緩いし
ファイルを扱うのはややこしいけど
文字列の入出力はフォームで簡単にできるし
とりあえずフローチャートを書きさえすれば
あとはわりと何も考えなくても使えるっつー点で
プログラミングに慣れるのに向いてると思います。
慣れておくと後々楽だと思います。
追記：タイトル改訂しました。こんどこそ大丈夫かな…？
【コラム】そろそろきっちりJavaScript 第1回 "Firebug"の導入〜関数リテラルとは? (MYCOMジャーナル)
多彩な演出効果をカンタンに導入できる事で脚光を浴びたprototype.jsの登場を皮切りに
のっけから間違ってて読む気なくす。冒頭くらいちゃんと調べて書こうよ。prototype.jsのどこを読めば多彩な演出効果なんて出てくるんだ。使ったことないだろ。多彩な演出効果はたぶんprototype.jsベースのScript.aculo.usのことだ。prototype.jsが流行ったのはいろいろあるけど、主としてAjax.*の存在が大きい。
function mtof(x) { return x*3.2808399 }
mtof(3)
;書こうよ。そりゃなくても動くけど、初学者向けの解説としてはダメだろう。タイトルも「きっちり」なんだし、Rubyで;ないのとは意味が違う。思わぬところでハマったりするよたぶん試したことないけど。
ちなみに仕様的には、「セミコロンを補完可能なら補完する」なので、補完不可なら補完できずエラー、そもそも補完ってことはセミコロンついてるのが正規の状態って意味だろう。何にしろ;なしで改行してるの見ると気持ち悪い。
*{ margin : 0 }はもう古い！？ | Emotional Web
はてなブックマーク - *{ margin : 0 }はもう古い！？ | Emotional Web
はてなが酷い。
base.cssとかcommon.cssとかを書いて読み込ませるのは、何のためだったか考えてみよう。古い新しいの問題じゃないと気づくだろうか。少なくとも、レンダリング時間なんて完全に後付けだと洞察できるはずだ（あなたたちはjs大好きだよね）。
さて、真っ新なとこからCSS書いてくとき、どんなデザインにしろほぼ毎回指定する要素が出てくる。a img{border:none;}とかhtml,body{margin:0; padding:0;}とかだ。それなら始めにa img{border:none;}とかを羅列したファイルを用意しておけば、余計な手間が省けるじゃないか。たぶん根本の動機はこんなとこだろう。
それがいつの間にかデフォルトで適用されるスタイルをキャンセルするっていう方向へ迷走し、*{margin:0; padding:0;}なんて表現が生まれた。この指定は言うまでもなく有害で、著名なのはフォームのボタンが縮こまったり、liのネストが判別できないなどの副作用が生まれる。あまりにもすべてがキャンセルされるため、わざわざひとつずつ要素のスタイルを定義しなければならなくなって、ファイルサイズは増え可読性は下がり、冒頭で言うようにレンダリングにも時間が掛かるようになる。FireBugがない時代、この要素のスタイルはどのファイルのどの部分で指定されてるのか調べるのは本当に大変だった。*.cssをgrepしたとしても、単にul li{}とか書かれてるのがカスケーディングしてたらお手上げ。
これらのデメリットを認識したとき、はて*{margin:0; padding:0;}のメリットはなんだろうと考える。あ、特にないよね。じゃあやめよ。←いまここ
こんなのは実際にCSSを書いてたら気づくことだ。海外とか時代とか関係ない。元記事の趣旨は「*{margin:0;}は古い」じゃなくて「どんなCSSが効率的か Part2」だ。レンダリング重いから*{margin:0;}やめようなんてコピペ脳丸出しじゃ、いつまで経っても効率的なCSSなんぞ書けんよ。
＊原理主義者が「（例えば数十年後にリリースされた）UAがどんなスタイルを適用するかわからないので、最初にリセットするのは永続性完全性の観点から意味がある」と言うけども、未知のUA（というかデフォルトスタイル）まで考えてCSSを書くのはあまりに大変だ。それに、そんなことになれば、たぶん、compat.user.cssみたいなのが流行るはず。デフォルトスタイルに頼った表現がしょせん実装依存なのは認めるけど、ちょっと非現実的すぎるので、考慮から外させてもらう。俺はいま実務の話をしたいんだ。
で、元記事では、じゃあどんなCSSがいいのかって点がついで程度にしか触れられていないので、俺なりに考えてみた。
これは外せない。aの中のimgにborder付けたいってほうがイレギュラーなので、わざわざa.logo img{border:1px solid #333;}なんて書き直すのも苦にならない。例外には手作業でもって対応すべき。
ほとんどの場合、隙間を空けたいよりも隙間を空けたくない。キャンパスはフルに使いたい。
印刷時にはそうでもないので、@media print {body{padding:1cm;}}なんてのがあってもいいけど、それはまた別の話。あとそういうのは印刷するユーザー側で指定すべきだとも思う。理想論だけど。
lang="ja"な文章において斜体は不要。どうせあなたはemとかaddressとかにfont-style:normal;付けるんだから。
preやcodeがsans-serifだとイラっと来ますよね。
やられるとイラっとくるもの。個人的。
俺はページをメイリオやヒラギノやM+ FONTやVLゴシックで見たいんだよ！ お前の趣味を押しつけんな！ あと最後に一般名（sans-serifとか）くらい書け！
でもpre.2ch-ascii-art{font-family: "MS Pゴシック";}なんてのはやさしさが溢れていてとても好ましいと思う。部分的にfont-family指定するのは別にいいけど、全体のデフォルトフォントをいじられるのは不愉快でしかない。
まあ仕方ないのはわかる。解決法も知らない。けどホイールでスクロールしてるとき興味のないサンプルコードで引っかかるのはとてもムカつくんだ。俺は君のサイトが崩れてるかどうかより、いつも通りのスクロールに関心がある。
pre以外にグラフィック目的でoverflow:auto;を指定するのは論外。
「CSSは個々人のスタイルを反映してるということでしかないんじゃないの」
「そうですね」