初めましてこんにちは。たんぽぽグループの大形尚弘と申します。好きな言語は Dart です。どうぞよろしくお願いします。 さてもう昨年のことになりますが、私個人のブログにて、 Dmitry A. Soshnikov さんの JavaScript. The Core. という記事を翻訳させていただきましたところ、予想以上の反響をいただきました。 JavaScript の実装部分、例えば今なら HTML5 の色とりどりな API といったキラキラした部分だけでなく、 ECMAScript の仕様そのものに興味のある方が、こんなにいたなんて！ と、いうわけで、日本では、先日上梓されました『パーフェクト JavaScript 』でのみ触れられているような、 ECMAScript の言語仕様そのものについて、同じく Dmitry さんが書かれた ECMAScript3 および 5 に関する詳細記事シリ
2011年12月16日15:00 カテゴリLightweight Languages javascript - そろそろECMAScript 5を使いたい少なくとも3つの理由 下準備も終わったので、本blogで扱うJavaScriptは、特に断りのない限りECMAScript 5を前提にしていくことにします。 0. どのブラウザーで使えるの? 以下で確認できます。 ECMAScript 5 compatibility table ざっといろいろ試してみると… IEは9以上以降かつStandard Modeなら使える Safari 5はFunction.prototype.bindのみ使えない - 5.1.4より[native code] iOS5も同様 Android 2.3ではさらに加えてObject.sealなどObjectをロックする機能が使えない というわけで、もう使いはじめてもい
sink.jsはWeb Audio APIを使ったWebベースの音声出力ライブラリです。 HTML5のAPIの一つにWeb Audio APIがあります。まだ対応ブラウザは多くないのですが、Webブラウザ上でダイナミックに音声を出力できる仕組みは新しい可能性を感じさせます。そのためのライブラリとしてsink.jsを紹介します。 デモです。ビープ音が鳴り響きます。 実装方法です。コールバックを使った面白い記述方式になっています。 デモ動画です。何パターンからの音声があります。 sink.jsはFirefox4以降、Google Chromeなどで使えるWeb Audio APIを利用しています。デモではノイズやビープ音が多いですが、実装方式によっては細かくこだわった音声をながせるはずです。バッファーサイズやサンプルレートが可変となっています。 sink.jsはJavaScript製のソフトウ
JITはJavaScriptを使ったデータビジュアル化ライブラリです。 JavaScriptを使ってWeb上でデータを多彩にビジュアル化するライブラリがJavaScript InfoVis Toolkit（JIT）です。その多彩な表現をご覧ください。 積み上げのエリアグラフです。表示の際にはアニメーションが実行されます。 実際のコードです。 棒の積み上げグラフです。 横向き、2Dのグラフです。 関連グラフです。マウスで動かせます。 マウスオーバーで説明が表示されます。 こんなグラフもあります。 星形。格好いいです。 カスタマイズにも多様に対応しています。 容量の表示などによく利用されるツリーマップです。 こちらもパターンが色々用意されています。 グラフを組み合わせたパターンです。 こんな表現も可能です。 派生していくアニメーションが格好いいです。 円グラフです。アニメーションやマウス操作に
JS BinはWebブラウザ上でJavaScriptとHTMLコードを編集しつつ、その結果をプレビューできるエディターです。 JavaScriptは単体で使うというよりもHTMLと組み合わせて使うことのが多いかと思います。そんな時にWebブラウザ上でコードを試しためし実行できるのがJS Binです。 デフォルトの表示です。左側がJavaScript、右側がHTMLとなっています。 レンダー表示です。先ほどのJavaScriptとHTMLを合わせて実行した結果です。 右側にリアルタイムプレビューを追加しました。JavaScriptを修正すると即座にプレビューに反映されます。 HTMLにJavaScriptライブラリを追加できます。 jQueryを追加した場合です。HTMLソースにscriptタグが追加されています。もちろんJavaScript側もjQueryの関数が使えるようになります。 保
Google+チームに所属するエンジニアのMark Knichel氏が、Google+の高速性を実現するためにどのようなテクニックを使ったのかについて、Google+のページで解説しています。 (1) Mark Knichel - Google+ - Hi everyone! I’m an engineer on the Google+ infrastructure… 最新のWebサービスでどのようなJavaScriptのテクニックが使われているのかを垣間見ることができる説明になっていますので、見出しを中心に紹介しましょう。 1) We <3 Closure 私たちはClosureが大好きだ（<3は横向きのハートマーク） Closure（クロージャ）とは、オライリーの書籍「初めてのJavaScript」の解説を借りれば、関数の「入れ子（nesting）」です。（追記、このクロージャじゃなく
この記事はMichael Woloszynowicz氏のブログWeb 2.0 Development And Business Lessonsの記事"You Don't Know JavaScript"を翻訳したものです。本人の許可を得て公開します。原文は2011年4月16日にポストされました。私自身のJavaScriptの学習が浅く、誤訳の指摘等はコメントを下さると助かります。 原文は以下のURLから。 http://www.w2lessons.com/2011/04/you-dont-know-javascript.html 去年ぐらいから、いらいらする現象が目に留まるようになった。プログラマが、少ししか触っていない技術でありながら、それで履歴書を脚色するパターンに何度も出会った。多くの言語で起こることではあるが、最も冒涜を受けている言語がJavaScriptだ。 あなたは自分が知らな
Moment.js - A lightweight javascript date library JavaScriptでの日付の処理が超便利になる「Moment.js」 以下にできることをまとめてみます 文字列からパースして日付オブジェクトを生成 UNIXのタイムスタンプから日付オブジェクトを生成 「Dec 25, 1995」みたいな文字列から日付オブジェクトを生成 日付オブジェクトに時間を簡単に を加算・減算 指定日時からの経過時間を取得 オブジェクトをベースにフォーマットして出力する moment(date).format("dddd, MMMM Do YYYY, h:mm:ss a"); phpにもdateという関数やstrtotimeという関数があったりしますが、そういう便利機能をJSでも使うことが出来るようなものです。 日付をヘビーに使うようなプロダクトで使えそうですね。 サイ
連載目次 近年のWebアプリケーションでは、画像ファイルやテキスト・ファイル、Officeファイルのアップロードやダウンロードのやり取りが行われることが多くなってきている（例えば、Twitter上での画像ファイル共有やGoogleドキュメントでのOfficeファイルのアップロードなどがそれだ）。 HTML5では、ファイル操作に関するAPIとして「File API」が定義されたことで、ローカルのファイルをブラウザ上で直接、取り扱うことが可能となった。これによって、Webとローカルの違いをアプリケーションで意識しなければならない局面も少なくなる。 現在、File APIは以下の3種類の仕様が策定されている。
こんにちは。すぎゃーん(@sugyan)です。 先日、Nakamap APIを公開しましたが、今回はそれをJavaScriptから使うためのライブラリを用意してみましたので紹介させていただきます。 使い方 <script type="text/javascript"http://developer.nakamap.com/js/nakamap.js"></script> とscriptを読み込むことで使用できます。 access_tokenが既に取得できていれば、 var client = new Nakamap.Client({ token: '*********' }); /* REST API */ client.get('/me', function (result) { console.log(result); }); /* Streaming API */ client.lis
coffee-worldはディレクトリを監視してCoffeeScriptからHTML/CSS/JavaScriptを生成するソフトウェアです。 最近、JavaScriptを素のままで書くことが減ってきています。CoffeeScriptから変換した方がコーディング量も少なく、かつ可読性の高いコードが書けるようになってきました。そんなCoffeeScriptは既にJavaScriptだけの壁を越えて動き始めています。そんな人にお勧めなのがcoffee-worldです。 インストールはnpmからできます。コマンドにしないといけないので実際には-gをつけます。 コード例。これはCoffeeScriptでCSSを生成するccssフォーマットです。 後はcoffee-worldを起動すると現在のディレクトリまたはパスを指定してそのパス以下のファイルをコンパイルしてくれるようになります。 CoffeeS
ScriptCoverはGoogle製のJavaScriptカバレッジテストツールです。任意のWebサイトに対してテストできます。 Googleが開発したJavaScriptのカバレッジツールがScriptCoverです。Google Chrome機能拡張としてインストールすることで任意のWebサイトにおけるJavaScriptカバレッジ率が分かります。 インストールしたところです。パッケージは提供されていないようなので自分でコンパイルしてインストールする必要があります。 任意のWebページを見るとこうやってカバレッジ率が出ます。 クリックすると分析開始です。しばらく待ちます。 完了しました。JavaScriptなので実行状況によってカバレッジ率も変化するようです。 さらに詳細なスクリプト単位でのカバレッジ率も見られます。 See full coverage reportをクリックするとス
実用的なオプションを備えた、フェードのアニメーションで切り替わる画像ギャラリーを実装するjQueryのプラグインを紹介します。 操作方法は自動・手動の2つです。 左下のアイコンで再生・停止、左右の矢印アイコンで画像を前後に切り替えます。 Rhinofaderの実装 HTML 画像はリスト要素で実装します。 <ul id="slideshow"> <li><img src="images/001.jpg" alt="" /></li> <li><img src="images/002.jpg" alt="" /></li> <li><img src="images/003.jpg" alt="" /></li> <li><img src="images/004.jpg" alt="" /></li> <li><img src="images/005.jpg" alt="" /></li> <
Tutorial demos さまざまな基本となるアニメーションのユニット集。 [ad#ad-2] jsMorphの実装 外部ファイル 当スクリプトを外部ファイルとして指定します。 <script src="js/jsMorph_min.js" type="text/javascript"></script> JavaScript jsMorphの基本書式です。 var myMorph = jsMorph( Object obj, // HTML element, Array of elements or elementCollection that are rendered Object prop, // css properties of end position [Object params], // parameters that influence the motion (dur
個人的にお勧めしているjsfiddleですが、せっかくなのでちゃんと記事にして普及活動をしてみようかなと思います。jQueryのコードを気軽に試す、などにも最適です。 全部は書ききれないのでざっくりと、程度です。一応基本的な部分だけ・・jsdo.itでいいじゃんとか言われそうな空気満々ですが、いいならこんな記事書きませんのでお察し頂ければ幸いです。 jsfiddleとは、その場でjsコードを実行、動作テストできるツールで、人気のjsライブラリのjQueryの公式サイトでもバグを伝えるときはjsfiddleを使用して動作を見せるように薦められます。 When You Report A link to a reduced, working demo/test case that will never move (jsFiddle is good for this). （意訳：バグを報告するとき
jQuery Timelinr [ad#ad-2] Timelinrのデモ Timelinrの実装 Timelinrのデモ デモでは、水平レイアウト、垂直レイアウト、オートプレイの3種類があります。 スライドのアニメーションもかっこいいですが、パネル表示時のズームもいいですね。 デモ：オートプレイ [ad#ad-2] Timelinrの実装 HTML 時間とパネルをそれぞれリスト要素で実装し、divで内包します。 「#timele, #dates, #issues」はデフォルトの設定です。 <div id="timeline"> <ul id="dates"> <li><a href="#">date1</a></li> <li><a href="#">date2</a></li> </ul> <ul id="issues"> <li id="date1"> <p>Lorem ipsum.
jsUML2はJavaScript、Canvasタグを使ってUMLを描画するソフトウェアです。 2000年くらいの登場以降、一気に花開くかと思ったUMLですが、エンタープライズの開発くらいでしか聞かれなくなってしまいました。設計段階で全てを表すのはなかなか難しいですが、多数の人たちが開発に関わるならば現状システムをUMLで表してみたりするのは面白いかも知れません。そんなUMLをWebブラウザ上に描けるのがjsUML2です. jsUML2のデモです。実際にオブジェクトを自分で描けるようになっています。こちらはユースケース図。左側のオブジェクトをクリックして選択し、キャンバスの任意の場所をクリックして配置します。コネクションの場合は二つのオブジェクトをクリックすると自動的にラインが描画されます。 クラス図です。 メソッド、プロパティの追加も簡単です。 コンポーネント図です。 シーケンス図です。
ShareJSはリアルタイムコラボレーション機能を任意のWebアプリケーションに追加するソフトウェアです。 Webアプリケーションの醍醐味と言えばコラボレーションにあります。チャットのようなシンプルなものもあれば、一つのファイルを複数人で編集したりするのも面白いです。今回紹介するShareJSはその基盤になり得るソフトウェアになります。 こちらはテキストを複数人で同時に編集できるデモです。行番号があるタイプになります。 こちらは行番号がないタイプ。データはリアルタイムに反映されます。 リードオンリーの表示。編集できません。 Markdownでの表記にも対応しています。 WebベースのIDE、Aceと一緒に組み込んだ例。シンタックスエラーが格好いいです。 リアルタイムプレビューのデモ。リードオンリーと編集を同時に組み合わせています。 ヘッダもなくシンプルなデザインにも適用。 ゲームにももちろ
幅：480pxで表示 [ad#ad-2] 実装 HTML 各パネルはリスト要素で実装します。 リスト要素を内包するdiv要素のidとclassに「st-accordion」を付与します。 <div id="st-accordion" class="st-accordion"> <ul> <li> <a href="#"> Item Title <span class="st-arrow">Open or Close</span> </a> <div class="st-content"> <p>Some content</p> </div> </li> <li> ... </li> </ul> </div> スクリプトのオプション スクリプトのオプションでは、アニメーションの種類、スピードなどが設定できます。 $.Accordion.defaults = { // index of ope
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
