Loading...
Node.jsがどうして注目されているのか、もしくはどうして他のサーバサイドJavaScriptはスルーされているのか - id:anatooのブログ
サーバサイドJavaScriptにはNode.js以前にもいくつかの実装がある。ちょっと前に注目されかけたものだと、現在はAppcelerater社に買収されたAptana社が出していたJaxerなどがあるが、きちんと調べるとRingoJsやnarwhalやv8cgiなど選択肢の一つとして数えられるサーバサイドJavaScript実装がいくつかある。ただ、これらはNode.jsのように注目を浴びているわけではない。 Node.jsとこれらの既存のサーバサイドJavaScriptの違いは、他のサーバサイドJSの動作モデルが既存のサーバサイドのものと変わらないのに対して、Node.jsの場合はそうではないから。具体的には、HTTPコネクションのハンドリング戦略が違っていて、既存の動作モデルが1コネクションに対して1プロセス/スレッド消費するのに対して、Node.jsの場合は非同期I/Oを用いて
グーグル製のJavaScript MVCフレームワーク「AngularJS」、正式版が公開 − Publickey
グーグルは、JavaScriptでMVCアーキテクチャのアプリケーション開発をする際に便利な機能を備えたライブラリ「AngularJS 1.0」のリリースをブログで発表しました。 MVCアーキテクチャとは、ソフトウェアがデータモデル（Model）の部分とユーザーインターフェイスの部分（View）、そしてビューとモデルのあいだで制御する部分（Controller）に分離された構造のことを指します。 これらが分離されているとプログラムの見通しがよくなり変更にも対応しやすく、テストも容易になるため、何種類ものユーザーインターフェイスと複雑なロジックなどから構成される大規模なアプリケーションではMVCアーキテクチャの採用が望ましいものと考えられています。 しかしWebアプリケーションをMVCアーキテクチャで実現しようとすると、ビューの役割を果たすHTMLのコードの中に、どうしても複雑なJavaSc
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種類すべての利点と欠点を説明し
Ember.js - A framework for ambitious web developers
A framework for ambitious web developers. Ember.js is a productive, battle-tested JavaScript framework for building modern web applications. It includes everything you need to build rich UIs that work on any device. Read the Tutorial Build with the teams that never stop shipping. Some of the best development teams in the world have been iterating on their products for years with Ember. With scalab
シンプルで見やすいガントチャートを描けるjQueryプラグイン・jQuery.Gantt - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 シンプルで見やすいガントチャート を描画できるjQueryのプラグイン。 以前見かけてから放置していたので 少し触って見ました。使う機会は 個人的には多くありませんけど、 覚えて置いて損はしないかと。 この手のはよく見かけますけど、今日のプラグインは個人的に使いやすい印象だったのでメモ。 こういうやつ。 サンプル作ったので宜しければご覧下さい。 Sample コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> <script src="jquery.fn.gantt.js"></script
クライアントワークでよくお世話になっているjQueryプラグインいろいろ
私が仕事で Web制作をする時に、よく利用させてもらっている jQuery のプラグインをまとめてみました。ライセンスは MIT、GPL のものばかりです。デザイン、レイアウト的に汎用性のあるものになっています。また、IE 特有のバグ（透過PNGの黒ずみなど）対策についても少し触れてみました。 Webサイトを作る時に、何かとお世話になっている jQuery のプラグイン。HTML と CSS だけでは表現できないことも、Javascript を使うことでいろいろできるようになりますよね！インターネットを見ていると、本当にたくさんの jQuery のプラグインが公開されています。feed を読んでいても、1日一個くらいは新しい jQuery のプラグインに出会います。どれを使ったらいいか迷うくらい … 。 今回は、そんな数ある jQuery のプラグインの中から、 私がクライアントワーク（仕
JSX - a faster, safer, easier JavaScript
JSX is a statically-typed, object-oriented programming language designed to run on modern web browsers. Being developed at DeNA as a research project, the language has following characteristics. faster JSX performs optimization while compiling the source code to JavaScript. The generated code runs faster than an equivalent code written directly in JavaScript. The gain may vary, but even the optimi
Webベースのダイナミックでクールなプレゼンテーションを実装する為のJavaScriptフレームワーク・Mosho - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 Web上でプレゼンする為のJavaScript フレームワーク、Moshoのご紹介です。 impress.jsライクなダイナミックな 動きのプレゼンテーションをHTMLで 実装する事が可能です。シンプルで 良かったのでお勧め。 この手のは色々出ていますので探せばいくらでも見つかると思いますが、MoshoはjQueryやmootoolsなどのライブラリに依存しないスクリプトですので覚えておいて損は無いかも。 よくあるプレゼンのやつ。HTML5/CSS3/JavaScriptで作ります。サイズは非圧縮版で15KBほど。 以下にサンプル用意しました。矢印キーで操作します。 Sample data属性で指定する スライドごとの動きはimpress.js同様、カスタムデータ属
DeNA製。高速、安全、習得容易なJavaScript代替言語·JSX MOONGIFT
JSXはDeNAの開発したJavaScript代替えのプログラミング言語です。 JavaScriptの冗長的な書き方は嫌だ、もっと楽に書きたいと考えた人が生み出した代替え言語がCoffeeScriptです。そんなCoffeeScriptに似たJavaScript代替え言語がJSXです。DeNA社の生み出した魅力的なプログラミング言語になります。 デモです。左側がJSXのコード、右側はJavaScriptに変換されたコードです。 log関数はconsole.logに出力されます。 静的な型チェックも行われています。 こんな感じで文字列を与えるとエラーになります。 インタフェースもサポートしています。 ちゃんとエラーになります。 変数の宣言も強制されます。 デモです。シューティングゲームです。 花火のデモです。 Box2Dのデモです。落下するのみで動かせません。 JSXの特徴は大きく分けて3つ
どこまでも自由に情報をまとめる·Meshcraft MOONGIFT
Meshcraftは自由度の高いコンセプトマップエディターです。 Webはとても自由度が高いです。しかしHTMLという枠の中で行動を迫られます（FlashやJavaアプレットもありますが）。しかしそうした枠を超えてとにかく自由に情報を蓄積していけるソフトウェアがMeshcraftです。 トップページです。色々な枠やテキストが浮かんでいます。これらは自由に動かしたり編集したりできます。マウスで全体の視点を動かすこともできます。 登録フォームです。下の部分が大きくなるのはなかなか気持ちいい感覚です。 こんな感じで情報を結びつけることもできます。 新しい項目を追加します。左クリックで追加されます。 項目を追加した後、ドラッグで線を引きます。これでリレーションができます。 互いの関係性を明記します。 枠付きの他、ラベルも追加できます。 Meshcraftはコンセプトマップエディターという名称になっ
JavaScriptにもMedia Queryを·Javascript onMediaQuery MOONGIFT
Javascript onMediaQueryはMedia Queryライクな振り分けをJavaScriptで実現するライブラリです。 CSS3ではMedia Queryという仕組みがあります。これはデバイスの画面幅や高さ、色などをキーにして専用のスタイルを適用する技術です。そして同様のメディアによる振り分けをJavaScriptにも提供するのがJavascript onMediaQueryです。 こちらはデスクトップの場合。 こちらはiPhoneの場合。画面幅を調整すればメッセージが変わります。 実際のコードです。contextによる指定で実行される関数が変わります。 Javascript onMediaQueryは画面幅を常に監視しているようで、Webブラウザウィンドウの大きさを変えるとメッセージが切り替わるようになっています。スマートフォンかタブレットかによる区別ではなく、画面幅に応
レガシーなブラウザにも高度なグラフィックを。JavaScriptによるOpenGL実装·JSGL MOONGIFT
JSGLはJavaScriptによるOpenGL実装です。 HTML5の新機能の一つにWebGLがあります。しかしまだまだ最近のWebブラウザでしか実装されていない機能になります。そこでWebGLに対応していないWebブラウザに対して3Dモデリングを行うライブラリがJSGLです。JavaScriptを使ってOpenGLを実装しています。 デモです。オブジェクトが回転しています。FPSはかなり高い数値が出ています。 実装サンプルです。コードはかなり分かりやすいのではないでしょうか。 JSGLには多彩なAPIが作られており、細かくモデリングができるようになっています。元々はJSOS向けのグラフィックスAPIとして開発されているとのことです。 JSGLはJavaScript製、MIT Licenseのオープンソース・ソフトウェアになります。 MOONGIFTはこう見る JSGLのAPIはWebG
HTML5の味見しちゃうよ（2）- ＠IT
HTML5の味見しちゃうよ（2） Meteorでチャットアプリを作ってしまったよ シーエー・モバイル 市川 未吏 2012/6/5 味見部中に、Meteorでチャットを作ってしまった参加者の方もいらっしゃいました。これなら私でもすぐできそう！ 味見しながらチャット作っちゃいました Web先端技術味見部#2のテーマはMeteorです。さてさて、Meteorって何でしょう、ということでまずは本家のサイトを見てみます。 どうやら、JavaScriptだけでイケてるWebアプリケーションが作れるよってことらしいです。紹介動画を見ると、簡単にインストールして始められること、サーバへの変更がリアルタイムでブラウザへ反映されることなどが分かります。そして、とにかくものすごくスピーディーにアプリケーションが作れそうな雰囲気。実際、今回の味見部中に、Meteorでチャットを作ってしまった参加者の方もいらっし
JavaScriptオブジェクト用問い合わせ言語·SpahQL MOONGIFT
SpahQLはJavaScriptオブジェクトのデータ抽出に使えるクエリライブラリです。 WebアプリケーションではデータをJSONで利用するのが一般的です。データが大量にあるのであれば、そこから欲しいデータだけを抽出する仕組みが必要になるでしょう。JavaScriptでそれを可能にするのがSpahQLです。 例です。hash1というキーに対応したデータを取り出しています。 ネストして調べられます。 配列、ハッシュどちらにも使えます。 配列の場合は0などとキー指定もできます。 配列でサイズが1以上のものをピックアップしています。 データは抽出するだけでなく、プロパティを使ってサイズやデータの種別を調べることもできます。さらに正規表現を絡めてマッチするか否かをチェックするといった機能もあります。node.js、Webブラウザどちらでも使えるライブラリになっています。 SpahQLはJavaS
【第29回 HTML5とか勉強会レポート】 次のモバイルアプリはどのフレームワークで作る？
【第29回 HTML5とか勉強会レポート】 次のモバイルアプリはどのフレームワークで作る？：D89クリップ（43）（1/2 ページ） スマートフォンアプリの開発を容易にするJavaScriptのフレームワークが続々と増えている。それぞれの良さや仕組み、何がどこまでできるのかを徹底解剖する 大人気JavaScriptフレームワーク集合！ 2012年5月16日、ヒカリエのディー・エヌ・エー新オフィスの会議室にて『第29回HTML5とか勉強会』が開催されました。HTML5とか勉強会とは、HTML5に関心のあるエンジニアやコーダー、デザイナー向けの勉強会です。今回のテーマはJavaScriptモバイルフレームワーク。会場は超満員でテーマへの関心の高さがうかがわれました。 Titanium MobileやPhoneGapなどのフレームワークが続々と登場してきたことで、iOSアプリやAndroidアプ
レガシーなWebブラウザでもリアルタイムコミュニケーション·Firehose MOONGIFT
FirehoseはWebSocketsを使わないリアルタイム通信ライブラリです。 Webベースのリアルタイムコラボレーションを実現させるためにはWebSocketsを使うのが手軽ですが、レガシーなWebブラウザでは使えません。そこでロングポーリングを手軽に実装できるのがFirehoseです。 サーバを起動しました。 クライアントから接続しています。 別なクライアントからデータを送信します。 データを得ました。ここで一旦接続は切れます。 Firehoseのデフォルトの動作ではデータを受け取ったタイミングで一旦接続が切れるようになっています。別途用意されているRackアプリケーション用のJavaScriptライブラリを使うと、接続が切れても自動的に再接続を開始します（その間にデータがポストされているとすぐに受け取ります）。Firehoseはレガシーなブラウザや接続が持続的でない環境下でもリアル
こんなやり方が…プラグインなしでWebブラウザ上でJavaを実行する·DoppioVM MOONGIFT
DoppioVMはCoffeeScriptで作られたJavaVMです。Webブラウザ上でJavaコードをコンパイルしたり実行できます。 Webブラウザ上で実行できるJavaと言えばアプレットになりますがプラグインが嫌われる現在、あまり実行される機会も多くありません。そこでJavaScript上で動作するJavaVM、DoppioVMが開発されました。 Webブラウザ上にコンソールが表示されています。 javacもあります。 実際にコンパイルして実行もさせられます。 DoppioVMはCoffeeScriptで書かれたJavaVMとなっています。そのためJavaプラグインなしでWeb上でJavaを実行できます。コンパイルして中間コードも生成されるので、かなり本格的と言えるでしょう。String、Pattern、HashMapなどがサポートされており、全てのJavaのコードが実行できる訳ではあ
JavaScriptで処理を同期的に行いたいと考えている人向け·JSDeferred MOONGIFT
JSDeferredはJavaScriptの非同期処理を扱うライブラリです。 JavaScriptの魅力は非同期処理にあると思いますが、これまでのコーディングスタイルと異なるのでやりづらいと感じる人も多いのではないでしょうか。そこでJavaScriptで同期処理的な実行を可能にするライブラリJSDeferredを使ってみましょう。 サンプルコードです。wait(3)で3秒間処理を停止しています。 サンプルのコードです。 ステップ実行のデモコードです。クリックアクションを受けて処理が実行されます。 Beforeです。ネストが深くなって非常に見づらい、汚いコードです。 Afterです。パラレルを使って平行にデータを読み込みつつ、全てが終わった段階でresultsに結果をまとめて次のメソッドを実行しています。 JSDeferredを使わずに書いている場合に比べて、コードがとても見やすいのが分かる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://design-spice.com/2012/06/13/responsive-web-design-image/