タグ

ブックマーク / mindcat.hatenadiary.org (9)

  • JavaScriptの文字列を反転する10の方法とそのパフォーマンス - 風と宇宙とプログラム

    はじめに JavaScriptで文字列を反転する10の方法を(無理矢理?)思いついたので、ちょっと簡単に紹介したい。また、それぞれについて、各ブラウザでパフォーマンスを測定してみたので、その結果も合わせて載せる。 文字列のStringオブジェクトには、部分切り出し(substring, slice)や置換(replace)、連結(concat)など豊富な機能があるのに、反転(reverse)機能はない。Arrayのreverseはあるのに、Stringのreverseがないのはどうしてなのだろうか。 各ブラウザとそのバージョンは以下の通り: Chrome Firefox Opera Safari IE 13.0.782.112 m 6.0 11.50 5.1(7534.50) 8.0.7600.16335 rev01: C言語的発想 空の配列を作って、そこに元の文字列の後ろから1文字つづ入

    JavaScriptの文字列を反転する10の方法とそのパフォーマンス - 風と宇宙とプログラム
    raimon49
    raimon49 2011/08/22
    06以降がどんどんマニアックになってて面白い。Chromeの得手不得手や、各ブラウザで+オペレータが賢くなってることが良く分かる。自分では03までしか思い付かないけど…。
  • HTML5 videoでリアルタイム顔認識 - 風と宇宙とプログラム

    以前、、ビデオのリアルタイムなヒストグラム表示を作ってみたが、思ったより高速だったので、もっと処理の重いものをやったらどうだろうと思い、JavaScriptで書かれた顔認識ソフトを利用して、ビデオに対してどのくらい可能なのかを試してみた。 JavaScriptによる顔認識ソフトは以下のものを利用。 Face Detection in JavaScript via HTML5 Canvas | Badass JavaScript 中身を見ると、canvasにdrawImage()した画像をgetImageData()でピクセル情報を取得している。その際、モノクロ画像に変換してから認識している。また、動的にcanvasオブジェクトを生成してオリジナルの部分的な領域を抽出している。その先はちょっとブラックボックス。 で、ビデオのヒストグラム表示でやったときと同じように、ビデオを一旦canvasに

    HTML5 videoでリアルタイム顔認識 - 風と宇宙とプログラム
  • HTML5 LogoをCanvasで描いてみた - 風と宇宙とプログラム

    かっこ良いんだか悪いんだか、ちょっとわからないけど、HTML5のロゴができたということなので、ちょっと遊んでみた。CCライセンスで提供されている。SVGデータもあるので、中身を見たところ、これならすぐにCavnasでも描けそうだと思い立ったので、帰宅電車の中でコードを書いてみた(はい、お気楽モードです)。 polygonは下記のように頂点の並びpointsと塗りつぶす色を指定しているだけ。 <polygon fill="hsl(13, 77%, 52%)" points="107.644,470.877 74.633,100.62 437.367,100.62 404.321,470.819 255.778,512 "/> pointsを正規表現でパースするのが実装が簡単。一度に全部分解するのもいいけど、gオプションで有効なlastIndex機構を使って前から順番にパースする。以下のような

    HTML5 LogoをCanvasで描いてみた - 風と宇宙とプログラム
    raimon49
    raimon49 2011/01/23
    SVGのpathからCanvas
  • Java回顧録 〜独白: 僕は全ての事をJavaから学んだ〜 - 風と宇宙とプログラム

    先日Javaのコードを3年振りくらいで書いてみたら、無性にJavaについて振り返ってみたくなった。Javaの誕生当時をリアルタイムで経験した僕にとってJavaは感慨深いものであり、多くのことをJavaから学び、僕を成長させてくれた原点でもある。 僕とJavaとの関わりはJavaがまだOakと呼ばれていた頃から始まる。1994年の暮れの頃だったと思う。Oakで書かれたWebブラウザはWebRunnerと呼ばれていて、両者はほとんど一体だった。会社の上長からこれを使って携帯情報端末機器を開発することになったから、秘密裏に調査しておくようにと突然指示された。後になって知ったことだが、Oakは家電などの組込み系を想定して開発されたもので、当時Sunは日の多くのメーカに呼びかけてOak を普及させようとしていたようだ。 その頃のインターネット事情というのは、Mozilla(Netscape)が登場

    Java回顧録 〜独白: 僕は全ての事をJavaから学んだ〜 - 風と宇宙とプログラム
    raimon49
    raimon49 2010/12/06
    J2EE前夜におけるJavaが持っていた先進さ
  • HTML5 Canvasのブラウザによって異なる微妙な振る舞いについてまとめてみた。 - 風と宇宙とプログラム

    はじめに CanvasはHTML5とは切り離された独立した仕様(HTML Canvas 2D Context)になっているようですが、現状のブラウザ上でのCanvasのについて、普段はあまり気にしない微妙な振る舞いについて調べた結果をまとめてみました。 調べたブラウザの各バージョンは以下の通りです。 Firefox Chrome Safari Opera 3.6.8 6.0.490.1 dev 5.0.1 10.61 線を描く (lineTo) ただの直線を描くだけのlineToですが、その単純なものにも、恐らく、多くの人が普段は気にしないような問題があります。それは座標値とアンチエリアスです。詳しく見る前に、実際の結果を示しましょう。下記のイメージ中に描かれている線は、いずれも線幅(lineWidth)が1の線です。 (左から、Firefox, Chrome, Safari, Opera

  • JavaScriptのメソッドコールの仕組みを深く理解する (参照型とは?) - 風と宇宙とプログラム

    はじめに JavaScriptでは関数もオブジェクトです。このことはよく理解されていると思います。関数とメソッドとの明確な違いはなく、どちらも関数オブジェクトである、というところまではよいのですが、関数コールとメソッドコールの違い、あるいはその仕組みは正確に理解されているでしょうか。先日、職場の後輩に問題を出したところ正確に答えられえなかったので、いまさら?と思われるかも知れませんが、関数コールの仕組みを解説します。 関数とメソッド JavaScriptでは関数とメソッドには質的な違いはありません。オブジェクトのプロパティとして定義される関数を便宜的にメソッドと呼んでいるだけです。parseInt()などのグローバル関数もグローバルオブジェクトのプロパティであり、関数の中でローカルに定義した関数も概念的にはActivation Objectのプロパティなので基的には全ての関数はメソッド

    JavaScriptのメソッドコールの仕組みを深く理解する (参照型とは?) - 風と宇宙とプログラム
    raimon49
    raimon49 2010/03/24
    obj.func()の評価順。obj.funcの評価結果である参照型から関数オブジェクトを取り出してthisを束縛している。
  • 驚きいっぱいのJavaScript? - 風と宇宙とプログラム

    言語やインタフェースの設計には「驚き最小の原則」というのがある。まつもとさん人はそんなこと言っていないようだが、かつて、Rubyはその原則に沿った言語と言われていた。一方、JavaScriptはそれに反する言語と未だに見なされているようだ。多くの場合、よく理解していないのが原因である。理解した上でも、やっぱりおかしいよ、というのもあるかも知れないが、じゃ、その場合どう定義したらよいんだ、というのはいろいろ難しい問題がある。 wtfjs(http://wtfjs.com/)にはJavaScriptのそんな「変な挙動」が集められている。wtfなんてタイトルをつけているくらいなので、あまり真面目に見る必要はないのかも知れないけれど、主なものについて古い順から軽く解説してみた。ちなみに、wtfはWhat The F*ckの略。 typeof NaN === 'number' // true In

    驚きいっぱいのJavaScript? - 風と宇宙とプログラム
    raimon49
    raimon49 2010/03/01
    不思議と言われる挙動を仕様に照らして解説。勉強になる。
  • JavaScriptのswitch文の速度はブラウザの違いでこんなにも差があった。 - 風と宇宙とプログラム

    はじめに JavaScriptswitch文は、CやJavaと異なりcaseのところに任意の式が書けるため、実行時にcaseの式も評価されるので基的にはif-else文の並びと類似のものになります。つまり、caseの数に応じてパフォーマンスも低下すると予想されます。当にそうなのか確認してみました。 測定した各ブラウザのバージョンは以下の通りです。 Firefox Chrome Safari Opera IE 3.5.6 4.0.249.30 4.0.4 (531.21.10) 10.10 8.0.6001 caseが数値リテラルの場合 パフォーマンスを測定するテストコードは下記のような簡単なものです。caseが1000個あるswitch文を10万回繰り返して実行したときの時間を測定しました。perf_test()関数の引数vに与える値に応じてcaseの条件で一致する場所が変わります。

    JavaScriptのswitch文の速度はブラウザの違いでこんなにも差があった。 - 風と宇宙とプログラム
    raimon49
    raimon49 2009/12/14
    Chrome, Opera, IE→if と同様の式評価。事前に条件をハッシュに仕込んでおくと速いとよく言われてるのはこの辺なのかな。
  • FAQ形式によるJavaScriptの本質がわかる超入門 - 風と宇宙とプログラム

    はじめに JavaScriptは簡単な言語のようでいて、実は奥が深く、初心者にとってなかなかその質がわかりにくい言語です。ここでは、JavaScriptの言語的エッセンスを理解できるようなものをFAQ形式で書いてみました。ご意見や誤り等を指摘してもらえたら嬉しいです。 なお、JavaScriptの標準化であるECMAScriptは、今年末にEdition 5 がリリースされる予定です。このFAQは、現在のバージョンであるEdition 3をベースにしています。 ECMAScriptって何ですか? ECMAはEuropean Computer Manufacturer Association(欧州電子計算機工業会)の略で、標準化団体です。NetscapeのJavaScriptMicrosoftのJScriptをベースに、純粋なプログラム言語部分を抽出したものをECMAで標準化したスクリプ

    FAQ形式によるJavaScriptの本質がわかる超入門 - 風と宇宙とプログラム
  • 1