Private content!This content has been marked as private by the uploader.

大規模UIをJavaScriptで実現するためのテクニック、サイボウズkintone開発の現場から。デブサミ2012 7万行規模のJavaScriptプログラムで構築されたユーザーインターフェイス。そのプログラミングで使われたテクニックとはどういうものか。 2月16日、17日の2日間、都内で開催されたイベント「デベロッパーズサミット2012」(デブサミ2012)で、サイボウズ株式会社 開発部 若原祥正氏、生駒浩隆氏が講演「kintoneの表と裏~大規模JavaScript開発と非構造データベース」を行いました。 講演では前半に大規模JavaScriptのテクニック、後半でスキーマレスデータベース構築の仕組みが解説されましたが、この記事では資料が公開された前半のJavaScriptのテクニックについて、ダイジェストで紹介します。 7万行のコード、フレームワークはClosure Library
本稿では、Node.jsの特徴や動作原理に触れ、サンプルや役に立つパッケージ、活用事例などを紹介したいと思います。 主なサーバサイドJavaScript Node.jsに触れる前に、予備知識として他のサーバサイドJavaScriptにも触れておきます。Node.js含め、サーバサイドJavaScriptには、主に以下のようなプロジェクトがあります。 サーバサイドJavaScripの標準仕様「CommonJS」とは サーバサイドJavaScriptには、「CommonJS」と呼ばれる標準化が策定されています。標準化というと難しい感じがしますが、要はサーバサイドでJavaScriptを実行するのに何が必要かを仕様として、定義しているドキュメントのことです(例えば、「ログが必要だよね」など)。 Node.jsは、このCommonJSに則って開発されています。現段階であれば、CommonJSの仕様
はじめに jQuery UIは、ドラッグアンドドロップ、カレンダー、スライダーなどを始め、さまざまなユーザインターフェースを簡単に実装することができるようになるjQueryのライブラリです。ユーザインターフェースに関係する機能がたくさん含まれたjQueryのプラグインと思ってもらえばわかりやすいかと思います。 jQuery UIはたくさんの機能を提供するので、機能が全部入ったスクリプトのファイルはかなりの容量になります(現時点での最新版である1.8.14の圧縮版で約210KB)。すべての機能を使うということはほとんどないので、jQuery UIは使用する機能だけ選択してダウンロードできるカスタムダウンロードを提供しています。 http://jqueryui.com/download 今回jsdo.itで使うサンプルのコードは全部入りのjQuery UIを使いますが、実際に使う場合はカス
SWFObject JavaScript API ドキュメンテーション SWFObject 2は、JavaScript実装者がSWFObject内部関数を再利用でき、SWFの出力やFlash Playerの情報にアクセスするための完全なツールセットとしてAPIを含んでいる。 swfobject.registerObject(objectIdStr, swfVersionStr, xiSwfUrlStr) Flashコンテンツと標準準拠のマークアップで書かれた代替コンテンツを埋め込み、マークアップ単体では解決できない問題をJavaScriptで解決する(静的パブリッシングと呼ぶ)。 このメソッドは"How to embed Flash Player content using SWFObject static publishing"で解説されている。 swfobject.getObject
さて、まず「ローカル Web アプリ」ってなんぞっていう話ですが、Web ベースの技術で作られブラウザからサーバにアクセスして利用するものの、いったんロードが完了したら、それ以降はネットワーク接続不要で動作する Web アプリ、といった概念を表した造語です。 iPhone の App Store を経由することなく配布が可能なので、アプリの内容について一切の制限がなく、また、最近のライブラリの進歩やモバイルパフォーマンスの向上により、ものによってはネイティブアプリと遜色ないレベルのものも作れるようになってきました。 先日、1 Click Config (閉鎖済) (解説記事) を作って公開しましたが、これがまさにローカル Web アプリとして動作しています。 ここで使われている技術の各論についてはそれぞれ詳しく書いたサイトがあるのですが、これらの技術をひとまとめに紹介しているサイトが見当た
新しいチャリを手に入れたら歯車や金属のバーを眺めてニヤニヤするようになったminamiです。 11/3にjQueryの最新バージョン1.7がリリースされました。大小さまざまな機能追加がされましたが、その中でもかなり大きな「.on()」「.off()」というイベントAPIが追加されましたが、今までのイベントAPIとどう違うのかいまいちわからなかったので調べてみました。 「.on()」「.off()」の使いどころ jQueryには今までのバージョンにも、「.bind()」「.live()」「.delegate()」といったイベントAPIがありました。今回追加された「.on()」「.off()」はそれら3つの機能をカバーしたメソッドになります。 「.bind()」「.live()」「.delegate()」については今後も利用できますが、「.on()」「.off()」の使用が推奨されていくようで
毎年、昨年の〇倍の花粉が飛散!などというボジョレーの売り言葉かよというニュースが流れています。 花粉症歴は5年ぐらいとまだそんなに長くはないのですが、去年は本当に症状がひどく ・ 寝ていると鼻水が出てきて起きる ・ そしてそこからくしゃみ連発で眠れなくなる ・ 朝起きたら目やにで目が開かない ・ 薬で頭がぼーっとして仕事にならない ・ そんな毎日が1か月ぐらい続きめっちゃ憂鬱 という日々を過ごしていて、本当に根治治療でも開始しようかと悩んでいたりもしたんですが(結局しなかったですけど)、さすがに今年はシーズンが始まる前に病院に行ってみました。 正直、それまでの自分はまず花粉症であるということを認めたくない派であり、症状も1か月ぐらいの間だから何とか我慢して乗り切れればいいと思ってましたし、病院に行ってもそもそも薬による根治は難しいことから貰えるものは市販のものとあんまり変わらないのではと思
追記いくつか誤植を修正しました。 Cluster API へのリンク Ruby のようなフルスタックにうんざりしているんだ => Rails のような~ Node 関連で良く聞かれる質問を集めて見ました。 この記事を通して Node について持っていた疑問を解消し、Node の良いところも、「ちょっとなぁ。。」なところも合わせて、きちんと理解する助けになればと思います。 そもそも "Node" なの? "Node.js" じゃないの?当初は "Node.js" と呼ばれていましたが、「正式名称は "Node" である。ただし曖昧さが出る場合は "Node.js" と表記しても良い」という旨の記述が本家の Wiki にあります。 What is the correct capitalization of Node.js? 日本のコミュニティもこれに合わせて Node と記述するようにしている
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 気になったので備忘録的に触って見ました。 ハードウェアアクセラレーターを使った CSS3の新機能を実装出来るjsライブラリ・ Alice.jsです。と、分かったような事を 書きましたが、まだちょっと勉強不足で いろいろ調査中です。ので内容にはあまり 期待しないで下さい。 アクセラレーターに関しては以下の記事がわかり易いです。 iOSのアクセラレーターが使えるCSS3 このアクセラレーターを使って高度なビジュアルエフェクトの生成をちょいと簡略化しよう、という意図で作られたライブラリみたいです。 サンプルを見たほうが早いと思いますので以下でChromeかiOSにてご覧下さい。6つ用意しました。 Sample01・Toss Sample02・Wobble Sample03
久保田です。最近KnockoutJSというJavaScriptフレームワークを勉強しています。 KnouckoutJSはjQueryの上に構築されているフレームワークです。jQueryのみ使うのと比べてKnockoutJSを利用すると、ウェブページ上のインタラクションを圧倒的に簡単に記述できます。この記事では、簡単にKnockoutJSの概要を説明し、KnockoutJSを用いたデモを紹介します。 このフレームワークの特徴としてあるのは、HTML内に宣言的な記述を埋め込むことでインタラクションが実装できることです。HTML5のカスタム属性(data*属性)を用いて、その要素に関する処理を宣言してきます。裏側の処理は、JavaScriptでViewModelを定義し、そこにビューが必要とする値を管理します。 例えば、あるチェックボックスにチェックを入れると下の要素がトグルする簡単な例は、以下
やっとでました、Google+ API!これで今回のGDDもおもしろくなりそう! APIを使用してできることはまだ情報の取得だけだけど、大体どんな感じのAPIになるかは想像できるし、Java、PHP、Python、Rubyのライブラリが既に存在するのも素晴らしい。(本音を言えばRuby版なんかは自分で作ってみたかった気もするけど・・・) とりあえずドキュメントのトップページを訳してみました。 http://developers.google.com/+/api/ Google+ API Goolge+ APIはGoogle+のためのプログラミングインターフェースです。このAPIを利用するとアプリケーションやウェブサイトをGoogle+と統合できます。これによってユーザーはあなたのアプリケーション内でGoogle+の機能を最大限に利用して相互に繋がることができます。 注: Google+ A
How to Use jQuery’s ajax() Function for Asynchronous HTTP Requests
kyo_ago @kyo_ago サーバAPIのレスポンスはlocal proxyで確認する。ブラウザの開発ツールだとFlashの通信は見えないし、画像の読み込みに偽装した通信もパッと見わからない。local proxyで「APIっぽいURL」を見てれば大抵通信内容は分かる #js_read 2011-09-07 17:19:10 kyo_ago @kyo_ago 難しそうなことをやってる部分は大抵そこまで気にしなくていい。それよりライブラリのAPIを呼んでる部分、ブラウザのAPIを呼んでる部分、サーバのAPIを呼んでる部分を中心に確認する #js_read 2011-09-07 17:17:55
最近、twitter クライアントを Firefox 拡張機能として作ったりしているのですが、twitter では認証方式として OAuth が採用されているため、JavaScript で OAuth 認証を行う必要があります。 ここでは、JavaScript の OAuth ライブラリを用いて OAuth 認証を行う方法を説明します。 OAuth 自体の詳しい説明などは OAuth の公式サイト をご覧ください。 OAuth ライブラリの入手 Google code に OAuth 関連ライブラリのプロジェクトサイト があります。 ここで、John Kristian さん作の JavaScript 用のライブラリも公開されています。 JavaScript 用 oauth ライブラリ Revision 1249 の段階では、ライブラリとして使用するのに必要なファイルは以下の 2 つのファイ
Ajaxやタブ切替には必須かも?ブラウザの「戻る」「進む」を有効にするjQueryのhashchangeプラグイン Ajaxやタブクリックなどのイベントでもブラウザの「戻る」「進む」を有効にすることができるjQueryのhashchange eventというプラグインを紹介します。同じような効果を得られるスクリプトより断然使いやすいのでおすすめです。 使い方はとても簡単で windowにhashchangeイベントをbindするだけです。 $(window) .hashchange(function() { Hoge(location.hash.replace('#', '')); }); // ハッシュフラグメントが変わったときにHoge()を実行する $(window).hashchange(); // Windowロード時に実行できる Ben Alman » jQuery hashc
概要 このjQueryプラグインは、ハッシュフラグメントパラメーターの追加や削除・解析を行うためのプラグインです。 非同期通信系の画面を作る際に威力を発揮するプラグインなんです。 Google Ajax Crawlerに対応したりする為には結構必須のプラグインだったり。 Google Ajax Crawlerに関しては以下のリンクを参照。 Getting Started – Making AJAX Applications Crawlable – Google Code SEOにも強いクローラブルなAJAXコンテンツを作成するために :: 5509 対応ブラウザ 以下のブラウザに対応するように実装されています。 Internet Explorer 6.0以上 Firefox 3.0以上 Google Chrome Safari ダウンロード 当ライブラリはgithubで管理していますので、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く