『ステートフルJavaScript』――JavaScriptを堅牢に築くパーツの世界：晴読雨読＠エンジニアライフ：エンジニアライフ
ステートフルJavaScript ――MVCアーキテクチャに基づくWebアプリケーションの状態管理 Alex MacCaw （著）、 牧野 聡（(翻訳） オライリージャパン 2012年6月 ISBN-10: 487311554X ISBN-13:978-4873115542 2940円（税込） ■JavaScriptを堅牢に扱いやすくするための本 JavaScript関連の本を読むときに気を付けなければならないこと。「この本は、どの立ち位置なのか？」「何が言いたいのか？」を知ること。 これらをきちんと理解して読まないと、とんでもない回り道をするはめになる。サーバサイドからクライアントサイドまで、JavaScriptがカバーする範囲は幅広いからだ。 さて、本書の立ち位置はというと、カルーセルやアコーディオンのような、見た目を変化させるjQueryプラグインの紹介は一切ない。ユーザーインターフ
JavaScriptテストの基礎知識と使えるフレームワーク6選
今注目のJavaScriptテストフレームワーク6選 ここでは、実際に今後の連載で取り上げるフレームワークを簡単に紹介します。以下のように、組み合わせたり単独で使ったりする方法もあります。 【1】Phantomjs＋【2】Jasmine 「Phantomjs」はWebKitをヘッドレス化してJavaScriptのAPIを利用できるようにしたツールです。コマンドラインからDOMやCSSといった通常ブラウザで扱えるものは一通り操作可能で、SVGやCanvasも利用できます。またjQueryなどのライブラリも利用可能です。
JavaScript の配列と連想配列の違い - IT戦記
id:cheesepie:20070131:1170172709 最近は、こういう風に JavaScript を勉強する人が増えていてとても嬉しいです ＾＾ id:cheesepie さん頑張ってください！ で、ちょっと配列と連想配列の使いかたが違うようなので、エントリーを書こうと思いました。おせっかいだったらすみません＞＜ ！ やっぱり、このへんが JavaScript の難しいところのひとつなのだろうか。 ということで、 JavaScript の配列と連想配列の違い いってみよおー 連想配列とは JavaScript では連想配列は一番シンプルなオブジェクトのことである。つまり、すべてのオブジェクトは連想配列である。 以下のすべての連想配列はまったく同じものである。 // 1 var obj = { hoge: 'hoge' }; // 2 var obj = { 'hoge': 'h
Happy Elements Labs: websocket + HTML5(canvas)でのゲーム開発(ボンバーマン風)
はじめに エンジニアの@ryooo321です。 よろしくお願いします。 Happy Elements株式会社では勉強会が活発に行われており、 その中の1つに「1.5時間で○○を作る」エンジニア向けワークショップがあります。(毎週開催@京都) ※ ○○は毎週かわり、設計/実装方法などは自由です。 今回はワークショップ2回(計3時間)で作成したボンバーマン風ゲームの紹介を通して、 他人とリアルタイムで遊べるゲームの可能性を感じていただければと思います。 ※ 技術的にはwebsocket、canvasを利用 ※ ライブラリ/ツールとしてNode.js、CreateJS、socket.io、coffeescriptを利用 ※ 急いで作ったのでほとんどリファクタリングされていませんmm また、おまけとして サーバーサイドでのcanvas描画とwebsocketでのバイナリメッセージについて 試してみ
HTML5のcanvas機能で綺麗なグラフが作れる！「Flotr2」を試してみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
HTML5のcanvas機能を使用してグラフが作成出来るライブラリ、「Flotr2」がとても素敵だったので試してみました。グラフは円グラフ・棒グラフ・折れ線グラフなど様々な形での表現が可能です。 使用方法 使用するときのルールは以下の通りです。 「flotr2.min.js」を読み込む グラフを表示するdivのID名を決めて、ソースを書き換える（デモでは「#graph」） 上記IDにwidth、heightを設定する あとはサンプルのソースの数値や項目名など書き換えればOK。 デモ 表現出来るグラフが紹介しきれないくらいたくさんあるので、汎用性のある折れ線グラフ、レーダーチャート、円グラフを試してみました。 折れ線グラフ デモページはこちら <br /> <!DOCTYPE html><br /> <html lang="ja" dir="ltr"><br /> <head><br />
Jasmineでテスティング | feedforce Engineers' blog
今年の RubyKaigi 2010で、 Sarah Meiさんによる JasmineというJavaScriptのテスティングフレームワークの紹介発表がありました(発表時はRCでしたが、先日(2010年9月14日)に無事バージョン1.0がリリースされています)。 今回はこの Jasmine を紹介したいと思います。 特徴 Jasmineは以下のような特徴を持ったテスティングフレームワークです。 JavaScript自身でJavaScriptをテスト可能 RSpec風の記述が行える スタンドアローン版とRubyGem版 JavaScript自身でJavaScriptをテスト可能 テスト用に専用の言語・フォーマットを使う必要はありません。 RSpec風の記述が行える 全体の構造は、RSpecのユーザーにはお馴染のdescribe や it という記法で記述します。 Rubyのブロックほど簡潔に
いろんなJavaScript MVCフレームワークで作られた同一のToDoアプリで違いを学ぶ「TodoMVC」
JavaScriptでMVCの構造を持つアプリケーションを開発するためのフレームワークが10種類以上登場し、この分野が盛り上がっていることは、以前の記事「JavaScript MVCフレームワークはすでに十種類以上、その比較や最新情報などのまとめ」で紹介しました。 その各種JavaScript MVCフレームワークの違いを学ぼうというのが、Webサイト「TodoMVC」です。 ToDoMVCでは、AngularJSやBackbone.js、Ember.js、Spine.jsなど主要なMVCフレームワークを用いて開発したToDoアプリをまとめて公開しています。 開発されたToDoアプリはほぼ同一の外観や機能を備えています。これにより、それぞれのソースコードを見ることによって、各MVCフレームワークがどのようなコーディングスタイルを用いているのか、どのような機能を提供しているのか、といった違い
JavaScript MVCフレームワークはすでに十種類以上、その比較や最新情報などのまとめ
グーグルが開発したJavaScript MVCフレームワーク「AngularJS」を紹介した1つ前の記事の反応が予想以上に大きく、1日たたずにブックマークが500以上もつきました。 本記事では、AngularJS以外にもすでにたくさん存在するJavaScript MVCフレームワークに関する情報をまとめて紹介したいと思います。 JavaScript MVCフレームワークの比較記事 既存のJavaScript MVCフレームワークを比較した記事が「The Top 10 Javascript MVC Frameworks Reviewed」です。Top10と書いてありますが、12種類のフレームワークの比較です。これは公開当時は10種類だったものが、その後11種類になり、今回のAngularJSの公開で12種類になったためです。 上記のような比較表を載せた上で、12種類すべての利点と欠点を説明し
勢いで始めてみるNode.js Webアプリ開発（1/2） - ＠IT
特集：Windows開発者のためのNode.js入門 勢いで始めてみるNode.js Webアプリ開発 デジタルアドバンテージ 一色 政彦 2012/06/15 いまはやりのNode.jsを使い、とにかく早くWebアプリを作って、とにかく早くクラウドで公開したい！ そんな勢いだけでNode.jsプログラミングを始めてみた。実際に数時間でそれなりの機能を持つサイトが作成できたので、皆さんにその方法を紹介しよう。 ■Node.jsによるWebアプリのクラウド＆ローカル環境構築 ●Windows開発者だけど、「Node.js」って何？ 「Node.js」とは何か？ 「.js」という部分から想像が付くように、これはサーバサイドで動作するJavaScript実行環境で、そのエンジンにはGoogle Chromeと同じ「V8エンジン」が使われている。最大の特徴は、Webサイトなどで大量の同時接続を高速
なぜそこまでやった、開発者コミュニティの異種格闘技「超エンジニアミーティング」エンジニア100連発、日本Rubyの会、java-ja
会場は、さまざまな企画のブースが並ぶ一角。しかもすぐ隣の「超軽音部」のバンド演奏が流れてくるという、実に混沌とした空間だ。会場の壁にはニコニコ動画のような「字幕」が投影されている。すぐ隣ではバンド演奏があり、定時には「時報」のアナウンスが流れ講演をかき消すという、難条件のもとでの勉強会である。 しかし、四方から這い寄る混沌をものともせず、開発者コミュニティはそれぞれの精鋭を差し向けて、圧倒的な才能の無駄遣いぶりを披露。さながら“異種格闘技”のような世界と化していた。 五十嵐氏の基調講演「デザインのためのインタフェース」 基調講演は、 五十嵐健夫氏（東京大学大学院情報理工学系研究科コンピュータ科学専攻 教授／JST ERATO 五十嵐プロジェクト研究総括）による「デザインのためのインタフェース」。五十嵐氏は、研究成果を次々と鮮やかなデモンストレーションで見せていった。 五十嵐氏は、まず、普通
CoffeeScriptベストプラクティス集 Node.jsアプリケーション編（1）
イベント駆動型のプログラムをきれいに作る JavaScriptのプログラムは、イベント駆動型で非同期な構造が基本となります。他のプログラミング言語で一般的な「同期型」の関数では、例えばネットワーク経由でデータを読み込む場合、データを読み込む関数を実行するとその読み込みが完了するまでプログラムの実行は止まったままになります。 それに対して、「非同期型」の関数を使うとデータの読み込みが完了するまで他の処理を実行でき、読み込みが完了した後で特定の関数を呼び出してもらうことができます。身近な例に例えると、メールを送信して相手からの返信が来るまで何もせずに待つのが同期型関数だとすれば、非同期型関数は返信を待つ間に他の仕事をこなすことができます。 Webアプリケーションはネットワーク通信部分に最も時間がかかる場合が多いため、その待ち時間に他の処理をこなせば、ただ待っているよりも遥かに効率よく多くの処理
Cuepoint.jsでさくっと字幕付ムービーをつくろうぜ！
Cuepoint.jsでさくっと字幕付ムービーをつくろうぜ！：HTML5アプリ作ろうぜ！（2）（1/2 ページ） 「HTML5・Javascriotライブラリ・CSS3・API」の紹介、またそれらを組み合わせた「sampleアプリケーションの紹介と解説」を厳選し紹介する連載の2回目です。 「Cuepoint.js」は、HTML5のVIDEOタグをうまく利用しつつ、ムービーに簡単に字幕を付けるライブラリです。 ムービーファイルはMPEG4、クイックタイム、Flashなど、ムービーに文章や説明を挿入を考えると、専用ソフトが必要となるのが当たり前で、文字を挿入したり説明文を入れるだけでも大変な作業となっていました。 しかし、「Cuepoint.js」 を利用すると、いとも簡単にムービーと連携した“文章・説明文”を表示させたり、リアルタイムに文章を編集したりもできます。 Cuepoint.jsとは
IE10で動くHTML5アプリ実装例 「Node.jsとSocket.IOを使用したリアルタイムアプリ」
はじめに Internet Explorer 10（以下、IE10）では、HTML5や関連APIの実装が大きく進みますが、中でもWebSocketに対応することはアプリケーション開発者にとって非常に重要です。 WebSocketは、HTTPリクエストで確立した接続を「繋ぎっぱなし」にすることで、サーバとクライアントの双方向で効率的な通信を実現する技術です。WebSocketは新しい通信プロトコルです（RFC）が、HTTPと同じポート番号を使用するためファイアウォールを越えやすいのと、JavaScript APIに関する仕様もあらかじめ用意されており、Webアプリケーションとの親和性が非常に高いのも特徴です。 WebSocketは、IE10だけではなくGoogle Chrome、Firefox、Safariと言ったブラウザでもサポートされています(Operaでは、デフォルトで無効にされていま
Yahoo!がJavaScriptのフレームワーク「Mojito」をオープンソースで公開。同一のJavaScriptコードが、サーバ、ブラウザどちらでも実行可能
Yahoo!がJavaScriptのフレームワーク「Mojito」をオープンソースで公開。同一のJavaScriptコードが、サーバ、ブラウザどちらでも実行可能 Webアプリケーションのためのコードを1つだけ書けば、それがPC上でそのままローカルアプリケーションとなり、Node.jsのサーバへ持っていけばWebブラウザからWebアプリケーションとして利用でき、さらにモバイルデバイスからアクセスすれば、そのデバイスに最適な表示が行われる。米Yahoo!が4月1日にオープンソースとして公開した「Mojito」（モヒート）は、JavaScriptで書かれたアプリケーションフレームワークです。 Mojitoは昨年11月にYahoo!が開発中であることを明らかにし、今年の第1四半期にオープンソースとして公開予定としていました。 米Yahoo!がJavaScriptフレームワーク「Mojito」と、N
大規模UIをJavaScriptで実現するためのテクニック、サイボウズkintone開発の現場から。デブサミ2012
大規模UIをJavaScriptで実現するためのテクニック、サイボウズkintone開発の現場から。デブサミ2012 7万行規模のJavaScriptプログラムで構築されたユーザーインターフェイス。そのプログラミングで使われたテクニックとはどういうものか。 2月16日、17日の2日間、都内で開催されたイベント「デベロッパーズサミット2012」（デブサミ2012）で、サイボウズ株式会社 開発部 若原祥正氏、生駒浩隆氏が講演「kintoneの表と裏～大規模JavaScript開発と非構造データベース」を行いました。 講演では前半に大規模JavaScriptのテクニック、後半でスキーマレスデータベース構築の仕組みが解説されましたが、この記事では資料が公開された前半のJavaScriptのテクニックについて、ダイジェストで紹介します。 7万行のコード、フレームワークはClosure Library
ソーシャルアプリのインフラはNode.jsが主役になるか～デブサミまとめレポート（ソーシャル＆インフラ編） - ＠IT
ソーシャルアプリのインフラは Node.jsが主役になるか デブサミまとめレポート（ソーシャル＆インフラ編） 有限会社オングス 杉山貴章、後藤大地 2012/2/21 2月16～17日の2日間、東京の目黒雅叙園にて開発者の祭典「Developers Summit 2012」が開催された。「デブサミ」の愛称で知られる同イベントは、2002年より年1回のペースで開催され、今年で10回目を迎えた。 2日間で行われた並列5トラック、全68セッションのうち、ここではソーシャルゲームや大規模Webサービスを支えるインフラ技術やクラウドに関連したセッションをいくつかピックアップして、その様子をレポートする。また、スマホアプリ開発編は、以下の記事を参照してほしい。
iOSとAndroidに最適化したJavaScriptフレームワーク「jqMobi」登場。jQuery Mobileより小さくて高速
iOSとAndroidに最適化したJavaScriptフレームワーク「jqMobi」登場。jQuery Mobileより小さくて高速 jQuery Mobileと同様に、HTML5のマークアップでモバイルアプリケーション開発を実現するオープンソースのJavaScriptフレームワーク「jqMobi」のβ版が公開されています。 jqMobiのコンセプトは、jQueryとjQuery Mobileの機能のサブセットを、iOSとAndroid向けに最適化したものといえるでしょう。 すでにjQueryやjQuery Mobile、あるいはSencha Touchなど、さまざまなモバイル向けHTML5/JavaScriptフレームワークが登場する中で、jqMobiの特徴はどこにあるのか、ブログで次のように説明しています。 jQuery - still focuses on the desktop.
JavaScript開発にalertを使っている人必見！ログ出力ライブラリ「Blackbird」 | Web活メモ帳
JavaScriptでログを表示するのに使えるライブラリ「Blackbird」のご紹介。 出力したいメッセージを指定するだけできれいに整形して表示してくれます。 例えば、以下のようなJavaScriptを実行してみます。 log.debug( 'this is a debug message' ); log.info( 'this is an info message' ); log.warn( 'this is a warning message' ); log.error( 'this is an error message' ); ↑すると、こんな感じで素敵に表示してくれちゃいます。 アイコンと色で視覚的にメッセージを区別することができるので、後から見分けるのも簡単です。 使い方 使い方は簡単で、ファイルをダウンロードした後、headタグ内でJSとCSSを読み込むだけでOKです。 <
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
humble software development - flotr
YOLPで挑戦～「マクドナルドはどこだ」アプリをHTML5で作る！
