「JavaScriptと性能についての本当の話」をしよう。ダグラス・クロックフォード氏
JSONの発見者でJavScript界の重鎮であるYahoo!のダグラス・クロックフォード（Douglas Crockford）氏。米オライリーが主催するイベント「Velocity 2011」で、セッション「JavaScript & Metaperformance」を行いました。 いまWebブラウザ間でJavaScriptエンジンの性能競争が行われていますが、その影響とこの先の展望について語っています。JavaScriptプログラマなら必見の内容を、公開されたビデオを基に紹介しましょう。 JavaScript & Metaperformance これから、JavaScriptと性能についての本当の話をしよう。 JavaScriptはみなさんご存じかな？ いまや世界で最もポピュラーになったプログラミング言語だ。 JavaScriptは、Javaからシンタックスを、Schemeからファーストク
[JS]Flashでもない、HTML5でもない、タイムラインベースの複雑なアニメーションを作成できるスクリプト -Mashi | コリス
ぱっと見た瞬間「Flashだな」と思ってしまったくらいの、Flashで実装したような複雑なアニメーションやムービーを作成できるスクリプトを紹介します。 使用するのはHTML, CSS, JavaScriptで、こういったものにありがちなHTML5, Canvas, CSS3には頼っていません。jQueryなど他のスクリプトにも依存していません。 ※CSS3のエフェクトなどオプションとして利用が可能です。 Mashiの主な特徴 スタンダードなHTML, CSS, JavaScriptでFlashのようなムービー、アニメーションを作成できます。(X)HTMLコンテンツに設置が簡単にできます。 41KB/13KB(CDN+GZip)と非常に軽量で、オブジェクト指向、モジュール式です。 基本的な利用では、追加のプラグインは必要ありません。 IE6をはじめ、すべての主要なブラウザをサポートしています
JavaScriptのいろいろなコーディングルールをまとめてみた
JavaScriptの書き方はJavaScript自体がある程度自由なためいろいろな書き方ができますが、一貫性を持って書いた方がバグなども発生しにくくなるため、コーディングルールを定めておくのはよいことだと思います(特に複数人の開発の場合) 有名な企業やライブラリはコーディングルールも公開している事が多いので適当にまとめてみました JavaScript style guide – MDC Docs Mozilla/Firefox向けのものなので、一部ECMAScriptの範囲を超えたものも含まれています。 多くの人が見ていると思うので、見たことない人は一度読んでみるといいです。 jscsにこのコーディングルールをチェックするプリセットが用意されています。 Google JavaScript Style Guide Google JavaScript Style Guide 和訳 — Goo
JavaScriptエラー時にエラーを分かりやすく通知してくれるChrome拡張「JavaScript Errors Notifier」:phpspot開発日誌
JavaScriptエラー時にエラーを分かりやすく通知してくれるChrome拡張「JavaScript Errors Notifier」 2011年05月10日- JavaScript Errors Notifier - Chrome ウェブストア JavaScriptエラー時にエラーを分かりやすく通知してくれるChrome拡張「JavaScript Errors Notifier」 エラーがあった場合に、アドレスバーの星アイコンのとなりに次のように通知してくれます。 アイコンをクリックすれば具体的なエラー内容が分かるという物。 赤のアイコンでエラー検知が分かりやすくていいですね。 通常の状態ではエラーがあろうと、デベロッパーツール等でコンソールを開いてない限り気づくことは出来ませんが、これは開発者は必須のツールかもしれませんね。 関連エントリ PHPのエラーなんかをブラウザで確認できるC
今、知っておきたいJavaScript
Webブラウザとテキストエディタさえあれば、プログラミングして実行できるシンプルで手軽な言語――。それがJavaScriptが初めて登場してからしばらくの間、多くの人が抱いた印象でした。しかし、Ajaxの登場に伴う第2のブーム以降、ハードルが高くなったように感じられます。 その大きな理由の一つが、DOM（Document Object Model）に基づくJavaScriptプログラミングでしょう。DOMは、HTMLやXMLを構成する各要素に対して、プログラムからアクセスして内部の情報を取得・変更したり、機能を利用したりするためのAPI（Application Programming Interface）です。DOMを使うことによって、WebページをリロードせずにWebページを部分的に書き換えたり、HTMLドキュメントの構造を動的に変えたりといったことが可能になります。 DOMは便利な仕組
新JavaScript例文辞典
このページはJavaScriptの例文／サンプルを掲載しています。なお、対象としているのは基本的にWeb標準ブラウザ (Firefox, Safari, Google Chrome, Operaなど) としているため標準仕様から外れているInternet Explorer 6～8では動作しないものがあります。Internet Explorer 8より前のバージョンに関しては以前のJavaScript例文辞典を参照してください。このサイトではInternet Explorer 8以降には、ある程度対応しています。IE9からはCanvasなどHTML5関連APIにも対応しています。 iPhone/iPadおよびAndroid 4もHTML5に対応しています。ただし、Android 2.xに搭載されている標準ブラウザでは対応していないAPIが多いため、ほとんど動作しません。 カテゴリ内のページの
間違いだらけの「かんたんログイン」実装法
今回は、そのかんたんログインの問題点について説明します。 「契約者固有ID」を用いるかんたんログイン かんたんログインとは、携帯電話の「契約者固有ID」を用いたログイン手法です。 第1回で説明したように、携帯電話のブラウザのリクエストヘッダには契約者固有IDと呼ばれるIDを付けることができます。契約者固有IDは、携帯電話事業者によって詳細は異なりますが、すべての携帯電話事業者が対応しています。 図1は、NTTドコモの携帯電話がサポートしている契約者固有IDである「iモードID」がサーバに送信される様子です。この情報は、ユーザーがそれと意識することなく送信されます。携帯電話のかんたんログインとは、契約者固有IDのみを用いて認証を行い、ログイン機能を実現することです。 かんたんログインは、ベーシック認証のようにIDとパスワードを管理する必要もなく、Cookieのように対応する端末を考慮する手間
サーバサイドJavaScriptの本命「node.js」の基礎知識
本稿では、Node.jsの特徴や動作原理に触れ、サンプルや役に立つパッケージ、活用事例などを紹介したいと思います。 主なサーバサイドJavaScript Node.jsに触れる前に、予備知識として他のサーバサイドJavaScriptにも触れておきます。Node.js含め、サーバサイドJavaScriptには、主に以下のようなプロジェクトがあります。 サーバサイドJavaScripの標準仕様「CommonJS」とは サーバサイドJavaScriptには、「CommonJS」と呼ばれる標準化が策定されています。標準化というと難しい感じがしますが、要はサーバサイドでJavaScriptを実行するのに何が必要かを仕様として、定義しているドキュメントのことです（例えば、「ログが必要だよね」など）。 Node.jsは、このCommonJSに則って開発されています。現段階であれば、CommonJSの仕様
HTMLで文字詰めするタイポグラフィー用JS | fladdict
HTMLのテキストに対して、文字詰めを行えるスクリプト FLAutoKerningクラスを作ってみた。サンプルはこちら。zipも。 スクリプト内に任意のカーニングペアを定義することによって、ブログのタイトル等のテキストに字詰めを行ってくれるスクリプトです。なんか探しても見つからなかったので自分でやってみた。いちおう朗文堂の新宿私塾に行ったわけだし、僕もなんか成果物作らんとなぁ。。。的に。 実行はとても簡単。jQueryと一緒にhtmlにロードして、 FLAutoKerning.process($(‘h1′)); FLAutoKerning.process($(‘h2′)); FLAutoKerning.process($(‘h3′)); といった具合に、適用したhtml要素を一括していしてやるだけ。カーニング情報の定義も、FLAutoKerningクラスの頭に、下のようにem単位で定義する
innerTextとinnerHTML
※このドキュメントは長くは残りませんので、必要であればハードディスクに保存してください。 オブジェクト まず、JavaScriptの根幹である「オブジェクト」について、少し触れておきます。JavaScriptは「オブジェクト指向型言語」ですから、仕組みから学ぶ時はオブジェクトの理解が必須なのです。 この言語は、ほとんどのものがオブジェクトです。なにがなんでもオブジェクトです。windowとかdocumentなどおなじみのやつを始めとして、変数も配列もオブジェクトですし、メソッドや自作の関数もオブジェクトなら、HTMLまでもオブジェクト（ドキュメントオブジェクトモデル＝DOM）となります。 オブジェクトは基本的に「操作されるもの」で、ただ存在するだけです。ただし、例外として、メソッドと関数は「操作するもの」です。（機能を持ったオブジェクト、ということです） オブジェクトは、メソッドや関数、プ
イヌでもわかるJavaScript講座
このJavaScript講座はプログラミング知識がない人もサンプルをただ埋め込めば使えるように作られています。ステップの段階で少しずつJavaScriptを説明していきますので、各ステップの内容がすべて把握できなくても、あとでわかってくると思います。えっ？と思う個所があっても、それはそのステップの趣旨ではないところですので、その個所はどこかのステップで説明します。深く考え込まずに、各ステップを適当にすすめていってください。 なお、本講座のサンプルを使ってＨＴＭＬファイルがぶっ壊れたり、マシンから煙や火が出ても一切責任を負いません。バックアップはこまめにしましょう。(^^; また、サンプルを無断で使用することを禁じるわけがありません。勝手に許可無く使ってください。
node.js とは何か - I am bad at math
期せずして久々の更新になってしまった。ブログを書く気がなくなったとかそういうのではなくてただ単に忙しかっただけ。その間、まぁ仕事が予期せぬ方向から炎上してみたり、事故をもらって愛車が全損したり（フロントガラスが全面熱線入りなんていう変なオプションなどを諸々付けていたからお気に入りだったのに）と決して良いことばかりで忙しかったわけではないけどね！ で、今回は node.js のお話。異様な盛り上がりを見せているものの、じゃぁそれっていったい何かというと「JavaScriptを用いたNon-blocking I/O環境」という非常にシンプルなものだ。 その根底には「うまくスケールできること」と「動作が速いこと」という理念が見受けられる。 まず「うまくスケールできること（多量のアクセスを捌けること）」を解決するにあたり、まずはスレッドモデルか、イベントループかという問題があった。そこで auth
JavaScript入門
JavaScript は Web サイトに動的な機能を追加するためのプログラミング言語です。 1995 年に米国の Netscape 社によって開発され、現在では Web 開発に欠かせない技術の一つとなっています。 JavaScript は Web ブラウザ上で直接動作するスクリプト言語であり、ボタンのクリックイベントやアニメーション、フォームの入力チェックなど、インタラクティブな機能を実装するのに利用できます。 JavaScript はブラウザさえあればすぐにプログラムを書いて実行できます。 Web ページの作成において、 HTML や CSS と組み合わせて利用されることも多いです。また、Node.js などを利用することでサーバーサイドの開発も可能となり、 JavaScript はフロントエンドからバックエンドまで幅広い用途で活用されています。 JavaScript は、オブジェクト
コピーライト（copyright）の西暦を自動表示するJavaScript｜もしもde願いが叶うなら♪ ドロップシッピング奮闘記
© Paylessimages,Inc. 気付けば9月も終わりに近づき、今年も残り約3か月 暑い夏が終わったかと思ったら、年末モード、早いですね… 細々とサイトやブログを増やしていますが、 ズボラな私は考えた、、、 「コピーライト（copyright）の西暦を自動で表示させよう」と そのやり方はわりと簡単で、JavaScriptを記述します。 下記を表示させたい所に入れると、西暦が自動表示されます。 例： <script type="text/javascript">document.write(new Date().getFullYear());</script>
JavaScriptから簡単に使えるFlashビデオプレイヤー「Flowplayer」:phpspot開発日誌
Flowplayer - Flash Video Player for the Web JavaScriptから簡単に使えるFlashビデオプレイヤー「Flowplayer」。 FlashビデオプレイヤーをJavaScriptから再生、停止させたりすることが簡単にできちゃいます。 使い方は無茶苦茶簡単です。 // id="player" の div に動画を埋め込みます。"my-video.flv"を再生します $f("player", "flowplayer.swf", "my-video.flv"); // プレイヤーのバージョンを得ることもできます $f("player").getVersion(); // 再生の制御をすることもできます $f(0).play(); // 停止の制御をすることも可能 $f().stop(); FlowPlayerのAPIリファレンス 動画をとって f
JavaScriptでコントロールもできるFLVプレイヤー「Jaris FLV Player」:phpspot開発日誌
Flash Video Player | Jaris FLV Player JavaScriptでコントロールもできるFLVプレイヤー「Jaris FLV Player」。 フルスクリーン、ボリュームコントロール、動画シークなどの基本プレイヤー機能を備え、YoutubeのAPIサポートや、独自ロゴ表示、JavaScriptインタフェース、キーボードショートカットを持つプレイヤーです。 キーボードショートカットは、spaceで停止/再生、UPキーでボリュームUP、DOWNキーでボリュームDOWN、Fでフルスクリーンモード等、使いやすい割り当てがされています。 デザインは若干クセのあるものですが、多機能なので１つの選択肢として知っておいてもよさそうです。 オープンソースでSubversion 公開されていますが、ソースは通常のFlaファイルではなく、haxe と flashdevelop によ
HTML5のcanvasタグで描くグラフ描画ライブラリ「AwesomeChartJS」:phpspot開発日誌
AwesomeChartJS HTML5のcanvasタグで描くグラフ描画ライブラリ「AwesomeChartJS」 データは配列で定義してdrawするだけです。描画コードは次のように美しい。 var mychart = new AwesomeChart('canvas1'); mychart.title = "Product Sales - 2010"; mychart.data = [1532, 3251, 3460, 1180, 6543]; mychart.labels = ["Desktops", "Laptops", "Netbooks", "Tablets", "Smartphones"]; mychart.draw(); IEではフォールバックされていないため動作しませんがiPhoneなどのcanvasタグ対応ブラウザをターゲットとするなら便利に使えそう 関連エントリ Ja
innerHTML = "" まとめ - latest log
HTML5をサポートしていないIE6〜IE8で、node.innerHTML = " ..."; のように HTML5 で追加された新要素含んだ文字列を innerHTML に与えると、次のいずれかの条件が成立した場合に親子関係の崩れたサブツリーを生成してしまいます。 innerHTML の前に document.createElement() が実行されていない node が DOM Tree に参加していない(オンザフライ) これらを回避するには、IE6〜IE8で以下のようします。 document.createElement("section"); // HTML5 Shiv function build(fragment) { // @param HTMLDocumentFragmentString: "<nav>...</nav>" // @return DocumentFrag
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JSLinux
https://jp.techcrunch.com/2011/03/01/20110228ajax-org-debuts-development-as-a-service-platform-for-javascript-html5/
