「firebug」を含む日記 RSS

はてなキーワード: firebugとは

2014-02-16

企業謝罪文について

企業がなにか不祥事を起こし、謝罪文会社サイトに掲載するというのは、昨今珍しくないどころか、むしろ記者会見を開くより当たり前となっている。

その謝罪文で、単なるテキストではなく、画像で作った文章が使われる事例がある。

これを「検索エンジンに引っかからないようにするための姑息な手段」とする意見があるけれど、実際にはそれとは違う理由で、画像を使う事もある。というのも、今どき企業不祥事など、新聞社サイトだって何年も残るし、その不祥事炎上まっただ中ならGoogle検索すれば、まず企業サイトよりも、その不祥事を報じた記事の方が上に出てくる時代である

不祥事を隠している段階ならともかく、公となり、謝罪文まで作った以上、企業側としては、むしろ謝罪文検索エンジントップの表示したいほどである企業がこの事件をどのように考えているのか、今後どのような対策を取るのかということは、マスコミというフィルターを通してよりも、ダイレクトに客に知らせたいというのが本音であるという企業は少なくない。企業の中には、わざわざテレビで「火災を起こす可能性があるので、○○という給湯器を探しています」というCMを流す事もあるのが、今どきの企業である

では、どうして企業側は、検索エンジンに引っかかりづらい画像謝罪文を載せるのか?

簡単に言うと、捏造対策。HTMLにただテキストを埋め込むだけだと、例えばFirebugなどを使って謝罪文をおちょくった文章に書き換えることが手軽にできる。それをスクリーンショットに取り、Twitterなどで公開して「ここの企業、こんな客をバカにすること言ってるぜ。なんて企業だ」と、さらなる炎上を狙うような人々に対する対策である。他の人から「元の謝罪文と違うじゃねーか」というツッコミが入っても、「さすがにやばいと思って差し替えたんだ。この企業は断りなく謝罪文差し替えるような腐った企業なんだ」という反論すら予想される。それに対する対策である

「いや、画像だって改ざんは可能だろ?」というのは、確かにその通り。しかし、画像での謝罪文だと、やはりテキストよりは改ざんは面倒だし、使用しているフォントも、よほど詳しい人じゃないと分からない。一部だけを書き換えると、フォントの違いが出てくるかもしれない。そういうのがあれば、企業側としては「ここのフォントが違う。これはこの人が改ざんしたんだ」という主張ができるようになる。全文を似たようなフォントで書き起こす、OCRソフトを使うという方法もあるだろうけど、さすがにそこまで手間をかける人は少ないだろうし、そこまで考えると謝罪文自体ネットで公表できなくなるので、そこまでは考えない。

PDFでも良いじゃん。そっちの方がGoogleとかにも引っかかるし」と言われれば、確かにその通り。それは企業の好みというか、単に普段からOfficeばかりで思いつかなかったとか、その程度の違い。

もちろん、「Googleにできるだけ引っかからないように」という目的で、画像にしてる企業もいるだろう。しかし、「改ざんしづらくする」という目的で、画像を使ってる企業もあるので、画像からといって即叩くのはやめてほしいものだ。叩くのは、不祥事のものと、その対応が十分かどうかで叩いて欲しい。

2013-03-22

プログラミング出来ない奴ちょっと来い

プログラミング出来る方法教える。


世の中「プログラミング言語」を説く本はごまんとあれど「プログラミング」を説く本やブログはあまりない。

いや実際に "ない" というのはかなり語弊があるかもしれない。

しかし、通常この種の説明している本に辿り着くまでには多くの時間必要だ。

普通の人は、多くの間違った方法を試し、その都度試行錯誤を重ね、プログラミング経験を経ることよって、重要概念を獲得するのだと思う。



例えば、「計算機プログラム構造解釈」や「実用 Common Lisp」、「コンピュータプログラミング概念技法モデル」などの書籍現実の問題に対し "プログラム" をどう書くかという問題に正面から取り組んでいる良書だ。



しかし、どれだけ”普通の”プログラマが上記のような書籍を読んでいるのだろうか。


そして、"普通プログラマ" がプログラミングを学ぶ書籍として、それらは果たして適切と言えるだろうか。

僕はそうは思わない。



というのも、多くの人は計算機科学を学び、効率のよいアルゴリズムデータ構造、美しい階層化・モジュール化されたプログラム、などを作るためにプログラミングするのではない。目の前の問題を解決するためにプログラミングを行うからだ。



それは自分の作りたいアプリだったり、

クライアントから発注されたプロジェクトだったり、

上司から頼まれた仕事だったり、

業務を効率化させるための Excel マクロだったり、

授業で出された宿題だったり、人それぞれだろう。



このような目の前の問題を解決したい人達が、わざわざ LispMozart など何の役に立つのか分からない言語を、根気よく勉強するのだろうか。(ちなみに、LispMozart は上記の書籍で実際に使われている言語である。)


目的現在の問題を解決することであって、

新しいプログラミング言語を学ぶことや、プログラミングの種々の概念を獲得することではない。



もちろんプログラミング言語を上達するためには一つでも多くの概念を会得する必要があるので、あるレベル以上を目指すのであればこれらの書籍を読むことや、抽象化を実現するための様々なツールを手にすることは必須だと思う。

純粋プログラミングを楽しんでいる人やハッカーを目指したい人はこのような文章を読むのではなく、ぜひ上記に挙げた本を実際に購入し、自分の手で動かして確かめてみることを勧める。プログラミングに対する考え方や姿勢が変わるのは間違いないと思う。



今回はそのような”純粋プログラミングを楽しんでいる人”に向けた文章でない。

現実の問題をプログラミングを用いて取り組んでいる人に向けて書いた文章だ。




そのような人の中で、なかなかプログラミングが上達しないという人に向けた文章である

もしプログラミング学習限界を感じているのであれば、プログラミング学習方法が間違っている可能性が高い。

そして残念なことに、初学者向けの書籍では、"プログラミング言語の文法" を説く本はあれど、"プログラミング学習方法や上達するための正しいスタンス" を説く本はほとんどない。




できるだけ多くの人にプログラムをする楽しみを知ってもらうためにも

より多くの人がより生産的にプログラムが出来るようになるためにも

そして特に、右も左も分からなかったプログラミングを始めたばかりの過去自分に対して、

効果的な学習方法プログラムする際の指針を書き記したいと思う。



それらは単に指針を示しているだけなので、

どんなプログラミング言語を使っていようとすぐに実践に移せるはずだ。

後はどれだけそれを実践に移し地道にプログラミングしていくだけである



正しい努力と、ちょっとしたコツさえ知っていれば驚く程生産性を挙げられるはずだと確信している。



プログラマレベルを以下の 3 つに分けてそれぞれについて説明していきたい。



1. 初心者レベル

プログラミング半年未満

・使えるプログラミング言語は一つだけ


ただし以下のことは出来ない。


・500行以上のコードが書けない

エラーが出た時の対処方法が分からない

写経は出来るが、自分プログラムが書けない



2. 中級者レベル

プログラミング半年 〜 3年

・1つ以上のプログラミング言語は使える

オブジェクト指向は理解している


ただし以下に当てはまる。


自分制作しているアプリケーション向けに "実用的なフレームワークライブラリ" を書けない

・1万行以上のコードだとスパゲッティコードになり、保守不能になる

・重複するコードが多く存在する

・適切なサブルーチン化できない



3. 上級者レベル

プログラミング歴 3 年以上

現実の問題に対して適切なデータ構造アルゴリズムを選択できる

抽象化について理解し、可変部分と不変部分を考慮した設計ができる


全てのプログラマはどれかのレベルに属するはずである

またそれぞれのレベルクリアするには明確な壁がある様に思う。

これらの壁を超えるにはどうすればよいかを説明する。


前置きが長くなったが、以下ではまず初級者レベルの人に向けた具体的なアドバイスをする。




初心者レベルの人に向けて


完全に初心者レベルの人はまずどのようにプログラミングを行えばよいのか分からない。一行も書けない。そのため、必然的に以下のような行動を取ると思う。


検索エンジンで似たプログラム検索コピーペーストする

・本に載っているプログラムをそのまま書き写す(いわゆる写経


上のような行動を行なっているだけでは、いつまで経っても自分プログラミングが出来るようにならない。

なぜなら上記のプロセスでは決定的に重要なことが学べないからだ。

それは、【プログラミング言語モデル】を自分の中に作ることである



プログラミング言語ルールの塊である

それは普通言語と同じように文法が存在し、そのしきたりに沿って記述しなければならない。

のしきたりを学べば書けるようになれる。非常に単純だ。



それなのに、なぜいつまで経っても書けないのか?



それは、”書き写す・コピーする” だけでは、そのしきたりが習得できないかである



特に最初のうちのプログラミングは頭を作業使う作業でなく、むしろ "体で覚える" 類のものである

それは例えば、日本語を話すことと似ている。

友達と会話する時、頭を使っているだろうか。

それは簡単な受け答えについては体が覚えているので、考えるより先に日本語が出てくるのではないだろうか。



プログラミングも同様に頭を使うのではなく、こうしたい時はこう書く、という反射神経を育てなければならない。



もちろん日本語話せるだけでは、ミーティングプレゼン出来ないのと同様に、文法が出来ただけではプログラミングが出来るとは言えない。しかし、文法が出来ないと "現実の問題に対処するソフトウェアを作る" というレベルには到底進めない。そのために、まずそのような文法の反射神経やパイプラインを頭の中に作る必要があるのだ。



それには以下の点を意識してプログラミングすればよい。



・"何をしたい時" に "どう書けば正しく動くか" というデータベースプログラミング言語モデル)を自分の中に作ること



このままでは抽象的すぎるので、このような "データベース" や "考える習慣" を自分の中に作るための具体的な指針を以下に挙げる。



1. エラーをたくさん出す

2. デバックの仕方を覚える

3. 小さく動かして確かめ

4. Google を使い倒す



まり、小さく動かして、エラーをいっぱい出し、デバッグを素早く行なって、分からないことは google などの検索エンジンで解決する。これが上達のコツである




これらについては以下で詳しく説明するとして、

まず最初初心者ありがちな間違いをいくつか列挙してする。




関数メソッドをたくさん覚えなければいけない


無理して覚えなくてよい。

プログラマは覚えることが星の数ほどあるので、メソッドなどはリファレンス片手に検索できればよい。

よく使うメソッドなどについては自然に覚えていくので、積極的に覚える必要はなし。それこそ、"体" で覚えるはずである

覚えられないメソッドについてはそもそもあまり使わないから覚えられないので、重要性は低く覚える必要はない。

しろ実現したい処理が既にメソッド関数として提供されていないか、調べる力の方が大事



エラーがいっぱい出てつらい


全く問題ない。

以下で述べるようにエラーとどう付き合うかが非常に重要



写経をしなければならない


教科書や本の中に書いてあることをそのままエディタで書き写し、実行することを写経という。

上記でも述べたように、これからまり無駄努力をしないことを願って言えば、

写経にはほとんど意味がないと思って取り組んだ方がいい。

写経して書いた 10000 行のプログラムより、自分で考えて書いた 100 行のプログラムの方が遥かに意義がある。


なぜならば写経は "作業" だからだ。

そこに "言語モデル" や "思考" が伴わないと意味がない。

”思考” が伴わないとただの書き写す作業をしているだけだ。

自分の中に "モデル" が出来ていないので、いざ自分プログラミングしようと試みても、写経をしているだけでは全く書き出せないだろう。



写経はそもそもプログラミングに対するスタンスプロセスのもの勘違いさせる危険性をはらんでいるいる。

写経する場合、書き写しの間違いがなければプログラムは問題なく動く。

しかし実際のプログラムではコンパイルや実行するまで、そのプログラムが期待通りに動くかどうか、は絶対に分からない。

そして通常は一気に全てを書き上げるのではなく、まず小さなコア部分を書き、少しずつ他のコア以外の部分を書き上げながらプログラム完璧ものにしていく。

書き間違えさえなければ正しく動くと知っているプログラムを、上から一行ずつ書いていくプロセスとは正反対だ。



また、以下で述べるようにエラーが発生した場合デバッグ作業は非常に重要であるだが、そのための作法写経から学ぶことができない。

なぜならば、写経中にエラーが発生した場合教科書自分で書いたプログラム間違い探しをまず一番最初に行うからだ。これはプログラミングに関する作業ではなく、むしろ間違い探し絵本とにらめっこしているに近い内容である

それでは、デバッグ方法言語モデルを作るとても大切なプロセス経験できない。

ゆえにそのようにして完成したプログラムもおそらく正しく動きはするが、得られる経験値は驚くほど低いはずである



とは言え、いきなり自分で書けと言われても書けないと思うので、小さなプログラムを一旦は教科書通り写し、その後自分なりに改変していくのがよいと思う。この場合写経にはほとんどが意味がないと思った方がよい。"自分なりに改変する" というプロセスこそ意味がある。



さて初心者が陥りやすい部分については説明したので、

今度はどのように "言語モデル" を自分の中に作っていくかについて説明する。



1. エラーをたくさん出す

初心者エラーを出さない様にと慎重にプログラミングしようとしがちだ。

はっきり言うと、それは間違ったプログラミングスタイルだ。



特に最初のうちは、エラーをなるべく多く出した方がよい。

なぜならば、エラーを出すごとに、その言語の新しいルールを1つずつ学んでいくことになるからだ。



PHP で例えると、

printf の書式だとか

文末に付けるセミコロンだとか

function はネストできないとか

変数には $ を付けなければならないだとか

グローバル変数関数の中で使う場合は global 宣言するとか

などである



初心者のうちは一切上のようなルールは知らないはずだからエラーを全て踏むかもしれない。

例え今回作っていたプログラムエラーを踏まなかったとしても、回数をこなしていけばいくつかエラーに遭遇するだろう。



しかし、それでよいのだ。



エラーを修正することの繰り返しの中で、その言語モデル自分の中に出来てくる。

そのようなトライアンドエラーを繰り返えすことで、"言語モデル" は文字通り体の中に染み込み、プログラムだんだんと書ける様になっていく。



おそらくこれはは自転車に乗れるようになるプロセスと似たようなものだと思う。

誰しも最初は上手く走れずに転んでばかりいるけれど、何度も何度も転んで起き上がってを繰り返しているうちに少しずつ多くの距離をこげるようになっていくだろう。

そして最終定期には、難なく自転車を乗りこなせるようなっている。



プログラミング言語を学ぶ時も同じである

最初は何度やってもいろいろなエラーが出てくる。

それらのエラーを地道に1つずつ潰して間違いを訂正していくうちに、少しずつ多くの行数の複雑なプログラム書けるようになっていく。

そして最終的には、自由にプログラミング言語を使いこなせるようになっていることに気付くだろう。



自転車も本を読んだだけで乗れるようにはなれないのと同じで

プログラミング言語も本を読んだだけで出来るようになれると思わない方がよい。



それらはトライアンドエラーの繰り返しの中でしか得ることはできないし、誰かから教わる類のスキルでもない。


そして、プログラミングを行うからにはエラーとは一生付き合っていかなければならない。

早めにそれに気付いて受け入れる必要がある。



2. デバッグの仕方を覚える

さてエラー重要性については上で強調した。

実際にエラーに遭遇した時に大事なのはエラーに遭遇した時にいかにその原因を突き止めるかだ。


期待しない動作をした時のデバッグという。


まずいちばん基本的で一番重要デバック方法printf デバックである。これをまず出来るようにする。

怪しい変数をとにかく printf で出力し、変な値が入っていないかを確かめ方法である


僕が常々許せないと思っていることは、初学者向けの書籍にはデバッグ重要性やその具体的な方法論が非常に重要であるにも関わらず、それについては解説すらされていないことである


初心者からこそ、デバッグ方法論や開発環境をきちんと整えるべきである


ほとんどの言語処理系では、デバッグ作業を支援する機能提供している。


からなければ、"言語 デバッグ方法" でグーグル検索してみればよい。


例を挙げると、



C言語だったら、gdb

PHP だったら Xdebug

Ruby だったら pp モジュール

Schemegauche)だったら #?= デバッグ

javascript だったら firebug



言語はいわゆる"定石"と言われるデバッグ方法があるはずで、それらを検索し習得すること。

これは無益時間を過ごさないためにも本当に重要な要素なので、面倒くさがらずに開発環境を整えや方法論をマスターすること。




3 小さく動かして確かめ

最初の内は、基本的にプログラミングする時は小さな部品に別けてから1つずつ確かめながら作る習慣を付けるようにする。


その理由は簡単で、人間は正確無比に物事を進めるのは苦手な一方で、プログラミングでは正確無比に物事を進めることを要求されるからである。そのため、大きなプログラムを一度も実行せずに作成し、一気に確かめようとするとまず間違いなく正しく動作しない。


そして厄介なことに、大きなプログラムを作ってしまうとどこに問題があるのか切り分けすることが困難になるので、ますますデバックが難しくなってしまう。


そのためまず小さく作って小さく確かめ部品を組み合わせてプログラムを作っていくことが大事になる。


一般的に言って、どんなに熟練したプログラマーであろうとも、一つのミスもせずに一定以上の大きさのソフトウェアを作り上げることは不可能である。そのため、ミスエラーはある程度発生することを前提に、少し作っては実行して確かめる、というサイクルをたくさん回す習慣を付ける。


ソフトウェアは一行書き上げた瞬間から指数関数的に複雑性が増大し、気付いた時にはどうにもならなくなっていることも多い。そういう時は思い切って一から作り直すという選択肢検討してみるべきだ。


"Small is Beautiful"


これは非常に有名な unix (という OS)の設計理念である

unix開発者は様々な失敗経験から、このようなソフトウェア開発のベストプラクティスを学んだに違いない。


まだプログラミング経験の浅い人も、これから偉大な開発者経験から学ぶことができるはずである。"Small is Beautiful"。小さく作って動かすこと。




4 Google を使い倒す

先ほどから何度も書いてあるように、プログラミングする上ではエラーとの付き合い方が非常に重要になってくる。


おそらく何らかの上手くいかない場合は何らかのエラーメッセージが出るはずだ。

原因がどうしても分からない場合は、エラーの文章をそのままコピーして検索してみる。そうすると、おそらくエラーの原因と対策方法などが表示されるので、それを足がかりに再度挑戦する。






現実プログラミングは、どんなにスキルが伸びようとも、いつも上手くいかないことばかりだ。それこそ、何をしてもエラーが出てくるし、何をしても上手く動作しない。だから僕は初心者のうちで一番大事能力とは、実は "忍耐力" だろうと少しばかり思っている。


でも悩んでるのはあなただけではなく、おそらく全てのプログラマーが通ってきて道だ。


そして、自分の思い通りに動くプログラムを見た時程うれしいものはない。

ぜひ初心者の人はこれを読んで少しでもプログラミングが出来るようになればと思っている。







2013-03-04

はてなブログテーマ投稿があらゆる意味プロ向けすぎて萎え

テーマストアが公開されたので、週末の時間を使ってちょっと作ってみたんだけど、想像以上に手間がかかったのでまだ完成してない。

手引きに「オリジナルテーマ作成は、CSSの知識がある方を対象にしています。」なんて逃げを打ってるけどさ。プロ向けにしたってちょっと投げっぱなしじゃないの?

以下、萎えリスト

スタイル仕様が公開されていない

そのため、気合いで解析する必要がある。保守するプログラム設計書もコメントもないなんて常識だよねー、的な? まあ頑張ってFirebugするわけですが、当然、解析できるのはCSS構造までであり、そのスタイル意図などはわかるはずもないわけで。もしかしてアレですか。Webデザイナであればフィーリングで伝わるようなレベルの問題なんでしょうか。私のような卑しいSIerエンジニアWeb業界転職してから出直した方がいいのでしょうか。

テストの仕組みが提供されていない

テスト用に別ブログ自分で開設し(!)、自分であらゆる表示パターンを網羅するテストページを作成(!!)し、カスタムCSS記述しては保存、各種確認URLを開いて回る、ということを公式に求める始末。なんではてな様のテーマ作成コスト削減にそんな苦労をしてまで貢献しないといかんのですか。ちなみに手引きで紹介されているサンプルエントリーでは何かと不十分。脚注とかないし。シンタックスハイライトじゃないPREないし。コメントとかスターとか自分でつけないとだし。複数ページないとPagerでてこないし。つーか、はてなの公式テーマとか作ったときに使ったテストHTMLテストケースを公開してくれればいいんでないの。・・・あるよね?

この前のトップページデザイン変更もそうだけど((自分場合、横方向の視線移動を求められるようになったのが苦痛で仕方が無い))。使う人のこと、基本的にあんまり考えてないよね、はてな。とにかく、はやりの技術デザインを使ってみたいんだろうね。それがユーザーにとっていいかどうかは二の次なんだろうね。個人の趣味じゃないんだからさ。ねえ。お願いしますよ。こんなんで月980円(だっけ?)もとろうだなんてどうかしてるよ。

公式でも投稿でもいいかはてなダイアリー並にテーマがたくさん使えるようになるのはいつなんでしょう。




あと全然別の話だけどついでに文句書いておくと、スマホはてブWebはなんでわざわざAjaxでPager実装しているの? だって最新ホットエントリー一覧なんて、前のページのコンテンツ保持しておく必要性も薄いじゃない。何が困るって、次ページ読み込み中(■がくるくるしてる状態)に電波切れると(地下鉄とかね)、ボタン押せなくなってるから電波復帰してもどうにもならなくなるのよね。リロードすると1ページ目に戻るし。普通にリンクで次ページ遷移じゃダメなの?

2012-09-26

【2012超まとめ】確実にWEBサービスを作りたい人へ【中編】

前編はこちら

http://anond.hatelabo.jp/20120926165407



ステップ6:MySQL(10時間)

会員情報や文章などのコンテンツを保存しておくデータべース、MySQLを調べます

データベースは他にもPostgreSQLSQLiteなどが有名ですが、やはり王道勉強します。

MySQLCakePHPや、ステップ4のWordPress他、よく使いますので把握しておきましょう。

基礎からのMySQ

http://www.amazon.co.jp/%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E3%81%AEMySQL-%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E3%81%AE%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E%E3%81%AE%E7%A8%AE%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E8%A5%BF%E6%B2%A2-%E5%A4%A2%E8%B7%AF/dp/4797344385/ref=sr_1_1?s=books&ie=UTF8&qid=1348063628&sr=1-1

今はまだ関係ありませんが、余裕があればこれも読むといいです。

MySQLによるタフなサイトの作り方

http://www.amazon.co.jp/MySQL%E3%81%AB%E3%82%88%E3%82%8B%E3%82%BF%E3%83%95%E3%81%AA%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9-%E4%BD%90%E8%97%A4-%E7%9C%9F%E4%BA%BA/dp/4797353937/ref=sr_1_1?s=books&ie=UTF8&qid=1348063787&sr=1-1


操作コマンドラインを覚えていく方向で、始めはブラウザ操作できるphpMyAdminを使ってOKです。

ストレージエンジンはとりあえずInnoDBで。


ステップ7:休憩(10時間)

技術調査はこの位にして、これからは実際にWebサイトを作っていきます

ここまで来ると何となくWebサイトがどんな仕組みで動いてるかが分かってくるので、

ステップ0でイメージした作りたいサイトがどんな技術で実現出来るか調べます

冒頭の「完全に一致」の中の人のようにスクレイピングしたり、

TwitterGoogleYahooAmazonなどのAPIを使ってサテライトサイトを作っても良いと思います

が、高度な事をするとはまりやすいので、ある程度やって無理だったらあきらめて次回にまわしましょう。

まずは何か一つ完成させる事のほうが大切です。

それから開発効率UPのため、Chromeプラグインを入れましょう。

説明はそれぞれのリンク先を見て下さい。

CSSViewer

https://chrome.google.com/webstore/detail/ggfgijbpiheegefliciemofobhmofgce

Firebug Lite for Google Chrome

https://chrome.google.com/webstore/detail/bmagokdooijbeehmkpknfglimnifench

View Selection Source

https://chrome.google.com/webstore/detail/fbhgckgfljgjkkfngcoeajbgndkeoaaj

Pendule

https://chrome.google.com/webstore/detail/gbkffbkamcejhkcaocmkdeiiccpmjfdi

BuiltWith Technology Profiler

https://chrome.google.com/webstore/detail/dapjbgnjinbpoindlpdmhochffioedbn

iPSim

https://chrome.google.com/webstore/detail/gcligifbhamdimemnemmlkffkpmflehh

Color Picker

https://chrome.google.com/webstore/detail/ohcpnigalekghcmgcdcenkpelffpdolg

CSS Tester

https://chrome.google.com/webstore/detail/pjncppaiejjkcjlcgegcbmhgkflhenfp

MeasureIt

https://chrome.google.com/webstore/detail/pokhcahijjfkdccinalifdifljglhclm


あとはFireFoxにはFireBugデバッグ定番らしいです。

https://addons.mozilla.org/ja/firefox/addon/firebug/


それから、空いた時間無料プログラミング動画サイトドットインストール」を見ておくと

ここまでの知識が定着すると思います

ドットインストール

http://dotinstall.com/



ステップ8:ドメインを取る(10時間)

ステップ7で作りたいサイトイメージ出来てきたら、ドメインを取りましょう。

サーバーさくら場合ドメインさくらで取得すると楽ですが、もっと安いところもあります

希望するドメインが空いているか調べて取得、空いていなければ他のドメインを考えます

さくらドメイン取得

http://www.sakura.ne.jp/domain/

ムームードメイン

http://muumuu-domain.com/

バリュードメイン

http://www.value-domain.com/

定番の.com、.net、.orgは誰が見ても親しみがあるし安いので、できればこの3種類のどれかにしたい所ですが、

一般的な言葉はほぼ埋まっているので、その場合.jp等にしても良いでしょう。

日本語ドメイン(www.日本.netみたいな)は流行っていないですが、

自分サイト名が「○○○.com」のような名前場合は一緒に取得して、アルファベットドメインリダイレクトしましょう。

ChromeユーザーURL欄で検索する時、「○○○.com」のように後ろに.xxxが付いているとそのURLに直接アクセスしてしまい、

 検索にならないので、アクセス機会損失を防ぐため。)

僕はバリュードメインで取得して、サーバーさくらレンタルサーバーしました。

その際の親切な設定方法の解説はこちら。

VALUE DOMAIN で取得したドメインさくらレンタルサーバで使う

http://nekohacks.com/wordpress/domain/value-domain/


ステップ9:サイトの基礎部分の開発(100時間)

実際にサイトを開発していきます

どんなサイトで、どんな機能があって、どんなページがあるかノートに書き出して行きます

初めにデータベースのテーブルやレコード構造を考えて、

次にメインとなる機能プログラムして行きます

サイトの基本的なレイアウトCSSで組みながら、デザインイメージもしておきましょう。

ここではデザインはまだやりません。

先にデザインを作っても、プログラムを進めていく過程で変更がでたりする為です。

(でもあんまり後回しにしても、見た目がチープなせいでモチベーションが下がったりするので、次のステップでやります

あと、ここで気をつけたいのは、あくまでメインとなる機能の開発を優先することです。

「あったほうが良いな」程度の機能は後回しにします。

外堀から埋めていくとそこでモチベーションが尽きてしまったり、

メインの機能を実装してみたら外堀の修正が発生してしまったりするためです。

始めると分からない事がどんどん出てくると思うので、本を読み返したりGoogle先生検索しながら進めて行きます

なかなか進まなくて検索8割、コーディング2割くらいの進め方になると思いますが、それでOKです。

長い暗闇を抜けると、少しづつ視界が開けてきます

メインの機能がなんとなく出来たら次に進みます


ステップ10:サイトデザイン(30時間)

メインの機能何となくできたら、デザインをやります

鉛筆殴り書きで良いので紙に描いてみます

いきなり慣れないCGソフト上でデザインすると、

いじっているだけでモチベーションを使い切ってしまったりするので危険です。

CGソフトは色々ありますが、おすすめフォトショ(Photoshop)です。

WebサイトデザインFireworksなども有名ですが、学習コストがかかるので、

Webサイトにもそれ以外にも使えて一番つぶしが効くフォトショップでOKです。

今年からクラウド契約が始まり、今なら1ヶ月8000円、年間契約なら1ヶ月5000円で

Adobeソフトが全部使い放題です。

Adobe Creative Cloud

http://www.adobe.com/jp/products/creativecloud.html

お勧めの本はこれ

10日でおぼえるPhotoshop入門教室

http://www.amazon.co.jp/10%E6%97%A5%E3%81%A7%E3%81%8A%E3%81%BC%E3%81%88%E3%82%8BPhotoshop%E5%85%A5%E9%96%80%E6%95%99%E5%AE%A4-CS2-CS%E5%AF%BE%E5%BF%9C-%E4%BA%95%E4%B8%8A-%E3%81%AE%E3%81%8D%E3%81%82/dp/4798111953/ref=sr_1_1?s=books&ie=UTF8&qid=1348498454&sr=1-1

基本操作を覚えたらWeb情報を収集します。

PHOTOSHOP VIPさんが親切です

http://photoshopvip.net/

から全部自分で作らなくても、素材サイトからダウンロードして加工するなどして手間を省きます

PCスマホ携帯(ガラケー)全部に対応するのは大変なので、

初めはそのサービスを最も使うだろうと思われるどれか1つに絞ります

初めに作る際のお勧めPCサイトです。

PCサイトならスマホでも最低限アクセスはできるし、携帯は縮小傾向なので優先度低、

スマホ画面サイズがまちまちでタブレット端末が目下発展中、AndroidブラウザがたくさんあるがChromeに統一されていくかも、

混沌とした状況なのでお勧めしません。

複数デバイスへの対応リリース後でも遅くありませんが、

対応する際はCSSを切り替えてレスポンシブレイアウトにするのがお勧めです。


その他、困ったらTwitter社が公開しているブートストラップを使うのもお勧めです。

ブートストラップcssフレームワークで、簡単にシャレ乙なデザインに仕上がります

超便利!Twitter BootstrapでさくさくWeb開発

http://blog.asial.co.jp/887

どうしても自分イケてるデザインが出来ないと思ったら、友だちに頼んだり、SNSコミュで募集したり、

デザイン系の大学専門学校掲示板にビラを貼らせてもらったりしましょう。制作費が出せればランサーズで募ってもいいかも。

Lancers - 仕事フリーランス発注できるクラウドソーシングサービス

http://www.lancers.jp/

僕はたまたまフォトショップの使用経験があったので、ここにかけた時間は30時間ではなく5時間程です(トータル275時間で開発)。



後編はこちら

http://anond.hatelabo.jp/20120926165920

2012-01-27

[] Firebugログ上限に達しました。

エラーメッセージFirebugログ上限に達しました。n 件表示されませんでした。」

about:configextensions.firebug.console.logLimitを増やす。

既定値は500件。

2009-10-04

グーグルマップ壁紙にしてみる

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などで拾ってください。

2009-04-10

twitterログインして自分のページを開く。

そして Firebugコピペして実行する。

function confirm(x){return true;} setInterval(function(){$('.del').each(function(){$(this).click()});$('.more').click();}, 10000);

もりもりつぶやきが消えてゆくはず。

2008-09-03

http://anond.hatelabo.jp/20080902220310

寝る前にいくつか返信。

http://anond.hatelabo.jp/20080902220835]

たぶんそうだと思う。

http://anond.hatelabo.jp/20080902221735]

でもほら、ダイアリーの立ち上げ当時は似たようなもんじゃないかと。

でも、ダイアリー以外のブログ日記のことも考えると、本文中に書くということの意味もあると思う。

http://anond.hatelabo.jp/20080902224129]

同様の意見としてb:id:hatayasanとかb:id:ululunとかb:id:nakano87とかb:id:te2uとかね。元記事にチェックボックス案もmetaを使う前提でチェックが off なら head に件の meta を入れるって書いてあるのになぁ。リテラシーって大事だ。

そっちの仕様は別にいいの。自社サービスの機能を使うのにmetaを本文に書かせるのがダメ

b:id:masayc 技術力を期待してはてな使ってる人ってどれくらいいるんだろうね?俺は、日本”語”でweb2.0ごっこしたいだけで、もし英語が達者ならdiggdelicious使うけどな。

日本語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 りますよね。

b:id:casm とりあえずブクマ。月収100万の詳細希望(まて

ごめん、年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-08-10

Firefoxテキストブラウザ化するcss作った【黒画面】【コンソール】

2008.9.28 12:53 追記



★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★



★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★







_________________ここから下は古い情報▼__________________________________________________






今、自分のブログスクラッチしているので、こちらで。→2008/9/28 スクラッチ完了!BLACK-OUT.CSS公式ページ

作りました

【black-out.css

2008.9.13 23:30 追記

2008.8.10 22:29 追記

エントリは、下記の方におすすめ情報でございます。

  1. Firefoxユーザーである(※他ブラウザでもいけます。が、当エントリでは導入方法を紹介していません。追記したbookmarkletだとoperasafariなどのブラウザでもすぐにお試しできます)
  2. Firefoxのアドオン「stylish」を入れている。もしくは必要なら入れてもいいって人。
  3. mixiPCで使っている場合)右に出てくる鬱陶しいバナーうんざりしていたり、日記コミュにしか興味がない人。
  4. お気に入りのブログが、情報源の質には満足しているが左右のアフィリが鬱陶しい点を残念に思ってる人
  5. コンソール(CUI)が好きな人、シンプルなのが好きな人、ぶっちゃけ文字以外用がないのに飾りの画像とかWEBにいらねーよと思ってる人
  6. カラム、2カラムレイアウトのせいで、目線が左右に移動しないといけないのがイラっとくる人、コードは上から下だけでいいだろって思っている人
  7. リンクテキスト探しがきらいな人、どこがリンクがすぐに知りたい人
  8. 背景色が明るいのが目が疲れる人、壁紙も黒にしちゃってるような人、長時間ネットまくりなんで目が疲れにくいのがいい人
  9. サイトによって極端に読みにくいサイズや色のテキストがあることに普段からイラっときている人

要は、LynxのようなシンプルWeb世界がなればいいのになと思っている方。

そして、どんなサイトでも目線は左右に動かしたくない!スクロールは上下だけで済ませたい!

と、強く考えておられる方むけの情報です。



何を作ったの?

私はテキストブラウザLynxを時々使っているのですが、これでサイトを見るとシンプルに見れるのですごく良いんですよね。

ただ、LynxFlashとか画像が見れないし、マウスが使えないのはいざって時にちょっと不便。

で、Firefoxテキストブラウザ化できないかなあと、ふと思いまして、思いつきで作ってしまいました。

私めもwebデザイナーやっとるんですが、上記のように、昨今のwebデザインなんて普段はなくていいって思っている奴でして。

仕事じゃ3カラムサイトとか作りますが自分はそんなん好きじゃないです。色がサイトごとに違うってのも理解できない。


必要なのは情報であってデザイナーデザインなんてどうでもいいんですよ。

だから2chシンプル画面とか大好きです。


そんな訳で、どんなサイトでもテキストブラウザ状態で閲覧できるFirefox用の拡張cssを作りました(やっつけだけど)。

ただ、ニュースサイト画像が見れないと困る時もあるので、普段は小さなサムネイルで、カーソルを合わせた時だけ大きく表示されるようにしています。


@このcssはコンセプト実証モデルです。思いつきで作ってるのでちょっと問題もあります。フィードバックとか意見など頂けると嬉しいかも。

@将来的には、グリモンjsも組み合わせてもっとコンソールのような感覚ブラウジングできるようにしたい

@(参考用)私のよく見るサイト・・・ニコ動wikipediaスラッシュドットジャパン、2nn.jp2ch)、mixiはてなホッテントリに上がっているブログ各種


ちなみに、こんなん使うな、既にこんないいのあるわいってのをご存知の方は教えてくれると嬉しいです。

それなりに探したのだけど、見当たらなくて・・・だから自作したので。




導入方法について

  1. Firefoxのアドオン「stylish」をインストールします。→ https://addons.mozilla.org/ja/firefox/addon/2108
  2. インストール後、stylishの管理画面を開きます。(Firefoxウィンドウの右下にあるメモ帳っぽいアイコン右クリックスタイルの管理)
  3. スタイルの管理」で「書く」を選択、タイトルはblack-outとかテキトーに入れてください。で、下記のコードを貼付けて保存してください。
  4. どんなサイトでも同じデザイン(コンソールのような画面)になります。なお、いつでもstylishdのメニューでcssの有効/無効は切り替えられますのでご安心を。
  5. テストとして、wikipediaを見てみられると雰囲気が掴めると思います。


/*
 * ----------------------------
 * 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,'MS Pゴシック',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;
}




既知の問題点というか仕様



update

2008-07-18

vimperator最高

ほんとにもう最高。

楽したい人間+ハマり性な人間には、こーゆーカスタマイズがしがし出来るツールが最高なのよ。

オレ流ブラウザ環境整備できるのももうタマラン。


エディタならvimemacsでもいいけど、あんまり詳しくない。

他のツールはカスタマイズ性で見劣りする。


こだわりのない人間にはどんなツールでもオッケーなんだろうね。

オレはこだわるところはこだわる。

ちょっとした不便に気づかないか気づいても甘受してしまうような人間と、今はクリアできなくともなんとか今後の課題にしたいと考える人間。

そこの違いだね。

どっちが得かというのはわからんけどね。

優劣とか損得の問題じゃなく、ただオレはそういう人種だってこと。




追記

ブクマありがとう

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本体に実装してくれないかな。


気になる点・これからの課題

窓の杜 - 【NEWSFirefox 3のスマートロケーションバーに対応した「XUL/Migemo

http://www.forest.impress.co.jp/article/2008/07/07/xulmigemo0105.html



余談

Index of /

http://vimperator.driftaway.org/

に上がるのはたいてい朝の07:30になっているので、いつからかチェックするのが朝の習慣になった。

2008-03-04

http://anond.hatelabo.jp/20080304160729

言いたいことはわかったような気がするが、どれかしらのブラウザは通さなくちゃできんと思うお。

デバッグ目的なら Firebug とかがいいと思うお。

2007-06-22

javascriptを理解するためのたった2つの大切なこと:改

9割ぐらいはハッシュ

何がハッシュなのか

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に束縛しているっていうことを理解しておくと便利だよ。


スコープ closure

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のはなし。

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を覚える上の一助になるとうれしいんだ。

あとここでつかってるハッシュ伝統的な意味連想配列のことね。

突っ込みも大歓迎だよ。

2007-06-20

javascriptを理解するためのたった2つの大切なこと

9割ぐらいはハッシュ

何がハッシュなのか

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};

等価になる。もちろんどちらの書き方でもかまわないよ。

ハッシュを返す関数関数を返す関数。closureとthis

関数は返り値として関数ハッシュを指定できるよ。次のハッシュを返す関数を見てみよう。

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

2007-05-24

http://anond.hatelabo.jp/20070524000131

JavaScriptなんでどうでしょうか。

べつにAJAXを書くとかそういう訳じゃなく、

「7時ですよ。朝早くからお疲れ様です(^^)」って時代のやつ。


ある程度HTMLの知識が必要になってくるけど、

変数の宣言とかその辺に関してはだいぶ緩いし

FireBugとか使えばデバッグなんかもできるし

ファイルを扱うのはややこしいけど

文字列の入出力はフォームで簡単にできるし

コンパイルいらなくてブラウザメモ帳でできるし


とりあえずフローチャートを書きさえすれば

あとはわりと何も考えなくても使えるっつー点で

プログラミングに慣れるのに向いてると思います。


VBとかRubyなんかよりも構文自体がCに近いので

慣れておくと後々楽だと思います。


追記:タイトル改訂しました。こんどこそ大丈夫かな…?

2007-02-28

【コラム】そろそろきっちり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で;ないのとは意味が違う。思わぬところでハマったりするよたぶん試したことないけど。

ちなみに仕様的には、「セミコロンを補完可能なら補完する」なので、補完不可なら補完できずエラー、そもそも補完ってことはセミコロンついてるのが正規の状態って意味だろう。何にしろ;なしで改行してるの見ると気持ち悪い。

2007-02-22

実装ではなく趣旨を理解しよう

*{ 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がない時代、この要素のスタイルはどのファイルのどの部分で指定されてるのか調べるのは本当に大変だった。*.cssgrepしたとしても、単にul li{}とか書かれてるのがカスケーディングしてたらお手上げ。

これらのデメリット認識したとき、はて*{margin:0; padding:0;}のメリットはなんだろうと考える。あ、特にないよね。じゃあやめよ。←いまここ

こんなのは実際にCSSを書いてたら気づくことだ。海外とか時代とか関係ない。元記事の趣旨は「*{margin:0;}は古い」じゃなくて「どんなCSSが効率的か Part2」だ。レンダリング重いから*{margin:0;}やめようなんてコピペ脳丸出しじゃ、いつまで経っても効率的なCSSなんぞ書けんよ。

 

原理主義者が「(例えば数十年後にリリースされた)UAがどんなスタイルを適用するかわからないので、最初にリセットするのは永続性完全性の観点から意味がある」と言うけども、未知のUA(というかデフォルトスタイル)まで考えてCSSを書くのはあまりに大変だ。それに、そんなことになれば、たぶん、compat.user.cssみたいなのが流行るはず。デフォルトスタイルに頼った表現がしょせん実装依存なのは認めるけど、ちょっと非現実的すぎるので、考慮から外させてもらう。俺はいま実務の話をしたいんだ。

 

じゃあどんなのがいいんだよ

で、元記事では、じゃあどんなCSSがいいのかって点がついで程度にしか触れられていないので、俺なりに考えてみた。

a img{border:none;}

これは外せない。aの中のimgにborder付けたいってほうがイレギュラーなので、わざわざa.logo img{border:1px solid #333;}なんて書き直すのも苦にならない。例外には手作業でもって対応すべき。

html,body{margin:0; padding:0;}

ほとんどの場合、隙間を空けたいよりも隙間を空けたくない。キャンパスはフルに使いたい。

印刷時にはそうでもないので、@media print {body{padding:1cm;}}なんてのがあってもいいけど、それはまた別の話。あとそういうのは印刷するユーザー側で指定すべきだとも思う。理想論だけど。

*{font-style:normal;}

lang="ja"な文章において斜体は不要。どうせあなたはemとかaddressとかにfont-style:normal;付けるんだから。

pre,code{font-family:monospace; white-space:pre;}

preやcodeがsans-serifだとイラっと来ますよね。

これは絶対やるな

やられるとイラっとくるもの。個人的。

body{font-family: "MS Pゴシック";}など

俺はページをメイリオヒラギノやM+ FONTやVLゴシックで見たいんだよ! お前の趣味押しつけんな! あと最後に一般名(sans-serifとか)くらい書け!

でもpre.2ch-ascii-art{font-family: "MS Pゴシック";}なんてのはやさしさが溢れていてとても好ましいと思う。部分的にfont-family指定するのは別にいいけど、全体のデフォルトフォントをいじられるのは不愉快でしかない。

pre{overflow:auto;/* or scroll */}

まあ仕方ないのはわかる。解決法も知らない。けどホイールスクロールしてるとき興味のないサンプルコードで引っかかるのはとてもムカつくんだ。俺は君のサイトが崩れてるかどうかより、いつも通りのスクロールに関心がある。

pre以外にグラフィック目的overflow:auto;を指定するのは論外。

まとめ。そうねえ。

CSSは個々人のスタイルを反映してるということでしかないんじゃないの」

「そうですね」

 
ログイン ユーザー登録
ようこそ ゲスト さん