Closure Kitchenこのサービスは以下のオープンソースソフトウェアや画像等を使用して開発しました。作者の方々に感謝いたします。 Closure Library Code Mirror FAMFAMFAM SILK ICONS
【コラム】イマドキのIDE事情 (97) JavaScriptライブラリClosure Libraryを手軽に試せる"Closure Kitchen" | エンタープライズ | マイコミジャーナル
Closure Libraryとは? Closure LibraryはGoogle製の JavaScriptライブラリでリッチなUIコンポーネントやライブラリ、さらにはClosure Compilerによる最適化や統合されたテスティングフレームワークなどJavaScriptでの開発を総合的に支援するものだ。 このClosure LibraryをWebブラウザだけで手軽に試せるのがClosure Kitchenだ。Closure KitchenはGoogle App Engine上に構築されたサービスで、Webブラウザ上でJavaScriptコードを入力し、Closure Libraryの動作を確認することができる。 なお、Closure Kitchen自身もClosure Libraryを使用して開発されている(ただし、エディタ部分のみCodeMirrorというライブラリが使用されている)
Google Chromeに搭載の「Crankshaft」--高速化された新JavaScriptエンジン
「Google Chrome」の最新のテストバージョンには、さらに高速になったJavaScriptエンジンが搭載されている。JavaScriptエンジンは、ウェブベースのプログラムを実行するためのブラウザコンポーネントとして重要性が高まってきている。 その結果、ページの読み込み速度が高速化し、ウェブアプリケーションがさらに強力になる。また、ブラウザのパフォーマンスをめぐって、Microsoftの「Internet Explorer（IE）」やMozilla Foundationの「Firefox」、Appleの「Safari」、そして「Opera」との新たな戦いが始まる。 Chromeのブラウザエンジン「V8」は、「Crankshaft」と呼ばれるバージョン3へとアップグレードされようとしている。Googleによると、V8は適応的コンパイルと呼ばれる技術を用いており、これによってJavaS
マンガで分かる JavaScriptプログラミング講座
はじめに 「マンガでわかるJavaScript」は、難しそうに思えるプログラムを、簡単そうに見えるマンガで解説するという初心者向けの入門講座です。 架空の高校生たちに教える形式で、プログラムの基礎から応用を、解説していきます。一通りのマンガを読めば、かなり実践的なところまで、プログラムを書けるようにしていきます。 （マンガは、左上から右下へと読みます） プログラムというと、けっこう大変そうに思えますが、この講座のテーマは「面倒くさいことを楽にする」です。面倒臭がりで、手抜き大好きの女子高生を主人公にして、楽しくプログラムを学んでいくことにします。 主な対象読者は「これからプログラムを学んでみたい人」「Webの世界に関わっていてJavaScriptを学んでみたい人」「昔JavaScriptを触っていたけど最新のトレンドが分からないので改めて学んでみたい人」などです。初心者だけでなく、Webデ
Socket.IO: the cross-browser WebSocket for realtime apps.
Socket.IOBidirectional and low-latency communication for every platform PerformantIn most cases, the connection will be established with WebSocket, providing a low-overhead communication channel between the server and the client. ReliableRest assured! In case the WebSocket connection is not possible, it will fall back to HTTP long-polling. And if the connection is lost, the client will automatical
WebSocket and Socket.IO
My favorite web technology is quickly becoming the WebSocket API. WebSocket provides a welcomed alternative to the AJAX technologies we've been making use of over the past few years. This new API provides a method to push messages from client to server efficiently and with a simple syntax. Let's take a look at the HTML5 WebSocket API: its use on the client side, server side, and an outstanding wra
【レポート】適切なJSONか調べるためのJSON Schemaを試す | エンタープライズ | マイコミジャーナル
JSON Schema is a JSON based format for defining the structure of JSON data. 22日(米国時間)、JSON Schemaの4つ目にして最新のドラフト版がIETFにおいて公開された。わかりやすいサンプルと実装系はJSON Schemaにまとまっている。JSON Schemaの基本となるアイディアと実装は2008年には登場していたが、最初のドラフトが公開されたのは1年ほど前となる2009年12月。最初のドラフトが公開されてから1年が経過したことになる。 JSONはJavaScriptで評価するだけでオブジェクトとして利用できる手軽さから、JavaScriptにおけるデータ交換用のフォーマットとして広く普及している。可読性がありフォーマットそのものが簡単ということもあり高い支持を得ている。JSON SchemaはこのJSO
【レポート】セキュリティを強化する10のFirefoxエクステンション | エンタープライズ | マイコミジャーナル
Firefox web browser - Faster, more secure & customizable Firefoxにインストールするだけで簡単にHTTPセッションハイジャックを実行できるエクステンションFiresheepが登場してから、こうした問題に対応するためのエクステンションがよく話題にあがるようになってきた。すでにMozillaがブログを通じてアドバイスを掲載しているが、Mozillaが報告しているエクステンションや方法以外にも、セキュリティを強化するためのエクステンションはいくつもある。 Top 10 Firefox Add-ons to Make Browsing Safe, Secure and Private Once Again - Tech Drive-inにおいて、そうした場合に活用できるFirefoxエクステンションが10紹介されており参考になる。紹介さ
これでできる！ クロスブラウザJavaScript入門：第19回 CSSOM View Module解説｜gihyo.jp … 技術評論社
こんにちは、前々回、前回とアニメーションのお話でしたが、今回はアニメーションにも関連してくるCSSOM View Moduleという新しい仕様（2010年11月時点でWorking Draft）のお話です。 クロスブラウザの連載で草稿段階の仕様について触れることに不思議に思われるかもしれませんが、このCSSOM View Moduleは既存のブラウザの実装をベースとして、その細かな違いを吸収して一つの標準仕様としてまとめあげることを目標として策定が進められています。つまり、この仕様を学ぶことで、「現在の実装がどうなっているのか」、「将来的にどういった実装になる予定なのか」ということを知ることができます。当然、今後大きな変更がある可能性はありますが、現状を整理するうえで重要な仕様なので詳しく見ていきたいと思います。 CSSOM View Moduleとは まず、CSSOMとは、CSS
JavaScript入門講座
今日の内容 JavaScriptを勉強し始めくらいの人を対象にしたJavaScript入門講座的なもの 文法とかは調べればわかるのでふれません 一人で勉強してもわからなそうな概念などを重点的に説明します ライブコーディングするのでJavaScriptってこんな感じて作るんだなーというのがわかってもらえればと アジェンダ JavaScriptを勉強する前に JavaScriptの基礎知識 ライブコーディング part1 jQueryの基礎知識 ライブコーディング part2
【インタビュー】デバイスに最適化されたWebアプリを届けたい - jQuery開発者John Resig氏 (1) どんなWebサイトのデザインにもマッチすることが重要 | エンタープライズ | マイコミジャーナル
世界でもっとも使われているJavaScriptフレームワークのひとつにjQueryがある。シンプルさやサポートするブラウザとプラットフォームの多さもさることながら、高速さ、使いやすいライセンス、プラグインによる拡張性の高さなどもあって、WebサイトやWebアプリケーションを開発する場合には欠かせない存在になりつつある。 今回、さまざまなイベントに参加するために日本と上海を訪れているjQueryの開発者、John Resig氏にインタビューする機会を得た。次期jQuery 1.5や現在開発が進められているjQuery Mobileについてお話を伺った。活発化するモバイルWebにjQueryがどういった視点をもって臨み、開発しているかをわかりやすく教えてもらった。 忙しいスケジュールの合間を縫って小誌のインタビューに応えてくれたJohn Resig氏 jQuery 1.5は2011年1月に登場
WebSocketでWebは変わる？ 大胆予想！
WebSocketアプリの事例 ここまでこの連載を読んでくださった読者の皆さんは、すでにWebSocketをどう利用すればいいかの十分な知識を得たことと思います。世の中にはすでにWebSocketを用いた様々なアプリが出てきています。ここではその中のいくつかを紹介したいと思います。 ここで紹介する事例は、すべてオープンソースで、ソースコードはGitHub上にあります。試しに触れてみるだけでなく、実際にソースコードを読んでみるのも良い勉強になるでしょう。
【コラム】イマドキのIDE事情 (94) 最強のJavaScript IDE「WebStorm」を試してみる | エンタープライズ | マイコミジャーナル
JavaScriptのIDE事情とWebStorm Ajaxの普及と共にJavaScript向けのIDEとしてAptanaや、EclipseのJSDTなどさまざまなものが登場してきた。こしかし、「これが決定版」と呼べるIDEは存在しなかったのが実情だ。 WebStormはIntelliJ IDEAでお馴染みのJetBrains社が提供するJavaScript向けのIDEで、他のJavaScript向けIDEと比べ、非常に優秀なコード解析機能や補完機能を備えており、現在存在するJavaScript向けIDEの中では頭一つ抜けた存在といえる。有償の製品ではあるものの、45日間は無料で使用が可能だ。また、オープンソース開発者には無償でライセンスが提供されている。 図1 WebStormのスプラッシュスクリーン 優秀なコード解析・補完機能 JavaScriptは柔軟な記述が可能なため、IDEによっ
Firefoxの新JavaScriptエンジン、ChromeとSafariのレベルへ到達 | エンタープライズ | マイコミジャーナル
Firefox web browser - Faster, more secure & customizable MozillaはFirefoxのJavaScript実行処理性能を引き上げる開発に取り組んでいる。従来のTraceMonkeyの改善に加え、新しいJITエンジンとしてJaegerMonkeyを導入。2つの異なる側面を有するJITエンジンを組み合わせることで、さらに高速化を実現することを狙っている。 SpiderMonkey - FirefoxのコアJavaScriptインタプリタ TraceMonkey - 特定パスを一気に高速化するJIT JaegerMonkey - 浅く広く高速化を実現するJIT Chrome開発版とSafari開発版(Webkit開発版)のJavaScriptエンジンとの性能比較がARE WE FAST YET?で随時アップデートされて表示されているが、
第18回 アニメーションの実用 | gihyo.jp
こんにちは、太田です。前回はアニメーションの基礎を学びました。今回はその基礎を実際に役立てるところを学んでいきます。 アニメーションを用いる場面と効果 さて、前回学んだようなアニメーションは、すなわち「状態の変化を見せる」ものでした。ある状態から次の状態へと時間をかけて変化させる処理を実装したものです。 なぜこういったアニメーションを行うのか、それには主に2つの理由・効果があります。 まず1つは読み込みの待ち時間をごまかす効果があります。サムネイル画像をクリックしたら、大きな画像の読み込みを開始しつつユーザーにはアニメーションを見せておき、読み込みが完了したら画像を表示するといったテクニックは、ユーザーの体感的な早さを改善する効果があります。 また、状態の変化が段階的に起こることで、その変化がどの程度の変化なのか直感的にわかる効果があります。例えば、あるリンクをクリックしたときに同じページ
【レビュー】JavaScriptコーディング、プチテクニック「コンマビフォア」 | エンタープライズ | マイコミジャーナル
A Web Design Community curated by Chris Coyier. Commas Before - CSS-TricksにおいてJavaScriptコーディングにおけるちょっとしたティップスが紹介されている。一般的に採用されているコーディングスタイルとは異なっているのでトリッキーな表記に見えるが、こういう発想でコーディングすることもあるということで参考になる。似たようなコードに出会ったときに、なぜこのようなコーディングが実施されているのか理解する上で役に立つ。 JSON表記をする場合、次のような記述を採用するのが一般的だ。区切りのコンマは各行の最後に記述する。 var article = { channel: 'enterprise', subchannel: 'javascript', type: 'news' } この記述方法で犯しがちなミスは、次のように最
HTML/CSS/JavaScriptでFirefoxをつくる開発研究、開始 | エンタープライズ | マイコミジャーナル
Mozilla Labs - Laboratories are where science and creativity meet to develop, research, and explore new ideas. FirefoxのUIは基本的にXULとXPCOMで構築されている。Firefoxアドオンやエクステンションで設定ダイアログなどのUIを提供しようとすれば、必然的にこうした技術を採用することになる。直接C/C++のコーディングを実施するのと比較して、XULとXPCOMは効率のいい開発を実現してくれる。 しかしChromeの登場で状況が変わった。ChromeエクステンションはXULやXPCOMを利用せず、HTML/CSS/JavaScriptのみで同様の機能を実現する。依然としてXULとXPCOMの方がより強力な機能を実装できるが、HTML/CSS/JavaScriptを使っ
第17回 アニメーションの基礎 | gihyo.jp
こんにちは、太田です。3回ほどJavaScriptの基礎的な内容が続いたので、今回はグラフィカルなアニメーションについて解説します。グラフィカルなJavaScriptというと、難しい・応用的なイメージがあるかもしれませんが、JavaScriptでのアニメーションとはすなわちCSSを段階的に操作するということで、そのポイントを抑えれば中身は単純なものです。 アニメーションの前提知識 HTMLにおける通常のアニメーションを構成するのは、「特定の要素」に対して、「そのCSSプロパティ」を「ある時点からある時点まで」の時間の中で、「ある値からある値に操作」する、といった要素です。 特定の要素と、CSSプロパティについては問題ないと思います。問題となるのは「時間と値の操作」です。 まず、単純にインクリメントするだけというサンプルを見てみましょう。 良くないアニメーション var y = 0;
第16回 JavaScriptのthisとcall | gihyo.jp
こんにちは、太田です。前々回、前回とJavaScriptにおける継承について学習しました。今回はそれに深く関わるthisについて学んでいきます。 JavaScriptのthisはややクセのある動作をするように思えるかもしれませんが、仕組みをしっかり把握すれば実に簡単です。特に重要なのは次の2点です。 thisが何を指すかは関数の呼び出し方で決定する thisは関数スコープに存在する特殊な変数である インスタンスとしてのthis では、まずはコンストラクタ内でのインスタンスとしてのthisを見てみましょう。 コンストラクタとthis function A(name){ this.name = name; } A.prototype.getThis=function(){ return this; }; var a = new A('aaa'); console.log(a); console
第21回 jQueryでAJAX入門：Google AJAX Feed APIを利用したRSSの読み込みとプラグインへの組み込み | gihyo.jp
Google AJAX Feed APIを使って取得したデータをjQueryを使ってページ内に表示させる 以上をふまえて、第18回で作成したサンプルデータを書き換えてみましょう。 $.ajax()で取得していた部分をfeed.load()に置き換えてその後の処理もGoogle AJAX Feed APIにあわせて書き換えています。 // Feed APIのロード google.load('feeds', '1'); jQuery(function($){ // ロードしたRSSを表示するブロック var rssBlock = $('#rss').append('<ul/>'); // Feedインスタンスの生成 var feed = new google.feeds.Feed('http://rss.rssad.jp/rss/gihyo/design/feed/rss2'); // Fee
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
