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というライブラリが使用されている)
マンガで分かる 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
これでできる！ クロスブラウザ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月に登場
【コラム】イマドキの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つは読み込みの待ち時間をごまかす効果があります。サムネイル画像をクリックしたら、大きな画像の読み込みを開始しつつユーザーにはアニメーションを見せておき、読み込みが完了したら画像を表示するといったテクニックは、ユーザーの体感的な早さを改善する効果があります。 また、状態の変化が段階的に起こることで、その変化がどの程度の変化なのか直感的にわかる効果があります。例えば、あるリンクをクリックしたときに同じページ
第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
WebSocketで目指せ“リアルタイムWeb”！第1回 node.jsの衝撃とWebSocketが拓く未来 - ＠IT
ご挨拶 こんにちは、ロンドンのNew Bambooという会社でWebエンジニアとして働いている@makoto_inoueです。ここのところ、PusherというWebSocketのクラウドサービスの開発に関わっています。今回から3回に渡ってWebSocketに関する短期連載を担当させていただきます。 私を含めたNew Bambooの面々（我々は自分たちのことをBambinoと呼んでいます）がWebSocketになぜ興味を持ったかということからはじまり、実際にクラウドサービスを始めるまでにいたったストーリーをお話ししたいと思います。そのストーリーを通じて、WebSocketが切り開く「リアルタイムWeb」な世界への可能性や技術的課題を皆さんと共有できればと思っています。
【レポート】高速なWebページはレンダリングが最初、次にJavaScript | エンタープライズ | マイコミジャーナル
Steve Souders - High Performance Web Sites より高速に動作するWebページを開発する方法として、Steve Souders氏が自身のブログにおいてRender first. JS second.という記事を公開している。高速に動作するWebページを作成するには、先にレンダリングを済ませて、そのあとでJavaScriptを実行するようにすることだと説明する内容になっている。Webページ開発におけるひとつの指針として参考になる。 Steve Souders氏はJavaScriptの遅延読み込みテクニックを広く紹介することになった人物としても有名。遅延読み込みのためのテクニックはほかにもあり、ユーザが大規模でかつ高速性が求められるサイトではすでに採用されていることが多いテクニックとなっている。こうしたテクニックを使っても、レンダリングが完了してからJav
これでできる！ クロスブラウザJavaScript入門 記事一覧 | gihyo.jp
運営元のロゴ Copyright © 2007-2025 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
【レポート】getElementsByTagName()がquerySelectorAll()より高速な理由 | エンタープライズ | マイコミジャーナル
Nicholas C. Zakas is a web software engineer who specializes in user interface design and implementation for web applications using JavaScript, Dynamic HTML, CSS, XML, and XSLT. JavaScriptのNoteListオブジェクトは特殊なオブジェクトだ。同じオブジェクトであるにもかかわらず、動的なオブジェクトと静的なオブジェクトという2種類の実装を持っている。この違いが性能に大きな差を与えている。このあたりの話がWhy is getElementsByTagName() faster that querySelectorAll()? - NCZOnlineにわかりやすくまとまっており参考になる。 JavaScript
JavaScript Guide - MDC
The JavaScript Guide shows you how to use JavaScript and gives an overview of the language. If you need exhaustive information about a language feature, have a look at the JavaScript reference. This Guide is divided into the following chapters. Introduction Overview: Introduction About this guide About JavaScript JavaScript and Java ECMAScript Tools What's next Grammar and types Overview: Grammar
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
連載インデックス「HTML5“とか”アプリ開発入門」 - ＠IT
