タグ

html5とJavaScriptに関するy_makiのブックマーク (11)

  • WebSocketを使ってWebブラウザ間P2P通信をしてみた - いろいろな何か

    はじめに ブラウザ間でP2P通信が実現できれば、ブラウザ上で動作するP2Pアプリが作れて面白そうだなーと思ったのでWebSocketを使って実現してみました。仕組みについては以下で説明していきますが、私が実現した方法は限定的で実用性が低く色々と足りない部分もあるので、軽い気持ちで読んで頂けるとありがたいですw 仕組みの概要 なぜWebSocketを使うのか 従来、Webサーバとクライアント(Webブラウザ)間で非同期に通信するにはXHR(XMLHttpRequest)を用いてきました。基的にこのXHRは以下の図のように同一ドメインとしか通信できないという制約がありました。*1 しかし、WebSocketのthe Origin-based security modelでは異なるドメインとも通信することが可能になります。WebSocketプロトコルでは、サーバとクライアント間で接続を確立する

    WebSocketを使ってWebブラウザ間P2P通信をしてみた - いろいろな何か
  • ドラッグ&ドロップ-HTML5のAPI、および、関連仕様

    ■ドラッグ&ドロップとは ドラッグ&ドロップとは、ウェブページ内の要素やローカル環境に保存されたファイルなどのデータを、 マウスで引きずるように移動させて他の場所に置く操作のことです。 HTML5以前にも、mousedownやmouseupなどのイベントで実現することはできましたが、 HTML5ではドラッグ&ドロップ専用の新しいイベントや新しいメソッド・属性が追加されています。 ドラッグ&ドロップを理解するには、ドラッグ操作とドロップ操作を分けて考えると理解しやすいでしょう。 ドラッグ操作は要素などのデータをマウスでつかんで引きずるように動かすこと、 ドロップ操作はその動かしたデータをドロップ先の要素内に配置することです。 ■HTML側では、ドラッグする要素にdraggable属性を指定する HTML側では、ドラッグする要素にdraggable属性を指定します。 draggable属性の値

  • お前の血は何色だ!! 4

    おそらく、rsyslogは何かおかしい。 短時間に大量にログを書き込み続けると、CPU 100%になってシステムを巻き込んでクラッシュさせるような気がする。 これまで、3回ほど経験しました。 googleすると似たようなことを書いている人が何人かいる。 https://www.google.co.jp/search?q=rsyslog+bug+cpu もちろん、少数のログならば全く問題ない。 大量に書き込み続けなければこれも問題ない。 このバグを引き起こすには、大量のログを長期に渡って書き込み続ける必要があるようだ。 大量のログを書き込み続けると、CPU 100%になってシステムをクラッシュさせるloggerとはいったい・・・ これはloggerではなくただの時限爆弾だろう。 大量にログを出力するときは、rsyslogを使わないほうがいい。 rsyslogの設定でオフにしましょう。 そして

    お前の血は何色だ!! 4
  • http://onlineconsultant.jp/pukiwiki/?node.js%20node.js%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88%E3%82%92forever%E3%81%A7%E3%83%87%E3%83%BC%E3%83%A2%E3%83%B3%E5%8C%96%E3%81%99%E3%82%8B

    http://onlineconsultant.jp/pukiwiki/?node.js%20node.js%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88%E3%82%92forever%E3%81%A7%E3%83%87%E3%83%BC%E3%83%A2%E3%83%B3%E5%8C%96%E3%81%99%E3%82%8B
  • ソーシャルアプリのインフラはNode.jsが主役になるか~デブサミまとめレポート(ソーシャル&インフラ編) - @IT

    大人気ソーシャルアプリ「ドラコレ」のインフラ 最初に紹介するセッションは「大ヒットソーシャルアプリ「ドラゴンコレクション」の裏側 ~ 超高トラフィックを支えるアプリ・インフラの“明日から使えるテクニック”」。講演者は、コナミデジタルエンタテインメント ドラコレスタジオ マネージャー 廣田竜平氏だ。 「ドラゴンコレクション」(以下、ドラコレ)はコナミデジタルエンタテインメントが製作・運営しているソーシャルゲームである。同社の廣田氏による講演では、ドラコレを運用するインフラ技術について紹介された。 廣田氏によれば、ドラコレのHTTPリクエストはピーク時で1秒間に5けた台にのぼり、それを3けたの台数のサーバによって運用しているという。サーバ技術自体はCentOS+Apache+PHPMySQL(+memcached)という一般的なLAMP環境であり、複数のソフトウェアロードバランサとDNSラウ

  • node.jsで遊ぶ: 標準モジュール編

    Aug 11, 2010 最近、このブログが動いているサーバーの調子が悪くてよく落ちるので、落ち着かない感じの今日この頃です。さて、前回のインストール編に引き続いて、今回はnode.jsに標準搭載されているモジュールをいくつか使ったコードを書いて遊んでみたいと思います。 標準搭載されているモジュールを知るには、まずAPIを見てみるのが一番よいです。ここを見ればファイルの処理やHTTPやURL、DNSといった、いくつかの強力なモジュールの機能を知ることができます。なお、特定のモジュールを使う場合は、最初に必ずrequire()で特定のモジュールを呼び出す必要があります。 今回はまずsysモジュールから使ってみることにします。sysモジュールは標準的な出力機能を提供します。改行なしの文字列を出力するprintメソッドや、日付つきログを出力するlogメソッド、PerlのData::Dumperや

    node.jsで遊ぶ: 標準モジュール編
  • 外部のAPIを叩いてみる - memo log

    expressでクエリパラメータを取得して表示するところまでやったので、外部のAPIを叩いて、取得したデータを表示してみる。 APIはとりあえずatndAPIにした。 https://github.com/chris4403/nodejs-sample/commit/d2172cac3d25d02f9df0d6e6e22726fdbd3088f1 app.js // atnd events api app.get('/events', function(req, res){ var http = require('http'); var options = { host : 'api.atnd.org', port : 80, path : '/events/?format=json', }; var result = {}; http.get(options, function(res

    外部のAPIを叩いてみる - memo log
  • 『Xbox 360』用の人体コントローラー『キネクト』からWebGLへ!! | Html5 Collect

    『Xbox 360』用の人体コントローラー『キネクト』でキャプチャした人体の動きを、WebGLとしてブラウザ上で表現したデモが公開されていましたので、御報告致します。 kinect サイトを訪れると、青っぽいパーティクルの集合で表された動く人のシルエットが 表示されるかと思います。 この人体のシルエットこそ、『Xbox 360』用の人体コントローラー『キネクト』でキャプチャした 内容です。 ここまではっきりとキャプチャしてくれているんですね。 更に、そのキャプチャした内容を解析して、WebGLとして ここまでスムーズに表現出来るとは驚きです。 そのうちに、人体の動きをキャプチャしてブラウザを操作するなど、 ブラウザとのかかわり方の幅がとても広がっていく事でしょう。 このWebGLのデモでは、視点をマウスによって操作する事も可能です。 視点の操作は、寄りたい方向にマウスポインタをあわ

  • Chrome Experiments

    Chrome Experiments is a showcase of work by coders who are pushing the boundaries of web technology, creating beautiful, unique web experiences. You'll find helpful links throughout the site for creating your own experiments, and you can also explore resources like WebGL Globe and our workshop of tools.

    Chrome Experiments
  • 初心者にも分かる Node.js と WebSocket についての解釈まとめ

    解釈が間違っている点がある可能性が御座いますのでご了承くださいませ。記事の内容としては「Node.js なら他のサーバよりもこんなに簡単に WebSocket が扱える(ライブラリがある)」というような内容となっていますので、ご了承いただければと思います。 Node.js って何? Node.js についてよくわからず最初は以下のページを読んでました。 Node.jsに関する基礎や開発・チュートリアルのまとめ:phpspot開発日誌 例えば、ログイン中の2人がいて、1人がチャットのリクエストをしたとします。でもラグが30秒ほどあって、気付かずに閉じちゃうなんてことがなくなります。 メンバーAのブラウザがメンバーBのブラウザに直接プッシュするってことかと最初は思っていましたが違いました。この点について深く考えていくこととなります。 Node.js を使うと何ができるのか node.js を使

  • 第1回 WebSocket登場までの歴史 | gihyo.jp

    はじめに 初めまして。NTTアドバンステクノロジの金城と申します。幸運にも記事を執筆させていただけることになりました。WebSocketという新しいウェブの規格についての連載を、全4回の予定でお届けします。 用語統一について WebSocketは「WebSocket」「⁠WebSockets⁠」⁠、単語を切り離した「Web Socket」等、表記に揺れがあります。2009年12月22日のワーキングドラフトのタイトルは「The Web Sockets API」となっていますが、2010年4月26日のエディターズドラフトでは「The WebSocket API」となっています。この連載では、最新の仕様書に則り、用語を「WebSocket」で統一します。 HTML5とWebSocketの関係 WebSocketは、もともとHTML5の一機能として仕様の策定が進められていました。しかし、Web S

    第1回 WebSocket登場までの歴史 | gihyo.jp
  • 1