WebRTCによるビデオチャットサービスの開発 - Qiita
はじめに Webで使えるビデオチャットサービスを開発しましたので、システム構成や使用したフレームワークやサービス、開発のポイントなどまとめてみました。 (去年にはQiitaの投稿を作っていたのですが、下書き保存したまま忘れて今頃の投稿になってしました。。) 月々のランニングコストは1000円以内、開発工数は1人月以内で作成しています。 WebRTCが出てきたおかげで、かなり容易にビデオチャットサービスが開発できるようになっていますので、よければ参考にしてください。 開発のポイント、コードだけでなく、開発の動機から、システム構成を決める為、開発前後に行ったビデオチャット関連の技術調査なども載せています。必要最小限の事だけ把握したい方はその辺りは読み飛ばしてください。 開発ビデオチャットサービス: ビデオチャッターズ (http://videochatters.net/) 開発動機 5～6年ぐ
Web Components で共通ヘッダーをつくってみた - GMOインターネットグループ グループ研究開発本部
フロントエンド系の技術調査やサーバサイドアプリケーションの開発を担当している D.M. です。今回は Google I/O 等で話題になっている Web Components を取り上げたいと思います。簡単に言うと HTML の再利用性を高めるための HTML の新仕様です。 Web Components 4要素 Shadow DOM ページ内で他の CSS が干渉できない領域を作り出すことができます。これによりページとコンポーネントの CSS が互いに干渉してしまう問題を解決できます。 Templates JS が操作する HTML を JS から分離して Tempalte タグとして定義することで JS から利用しやすい形にすることができます。このタグを利用することで HTML が JS のソース内に混在してしまう問題や、 HTML 内の JS が誤作動する問題を抑制します。 Cust
SkyWay ― WebRTCを簡単＆柔軟に使えるプラットフォーム
WebRTCは、ブラウザや専用アプリ同士でリアルタイムに映像、音声、データを送受信できる画期的な新技術です。SkyWayを使えば、サーバを準備することなく簡単に、WebRTCを使ったアプリが開発できます。
「HTML5日本コミュニティグループ」をW3Cが設立。参加者募集中！
W3Cが「HTML5 Japanese Community Group」を設立し、参加者を募集しています。 W3CのHTML5日本コミュニティグループが設立されました！参加者募集中： http://t.co/Tw1mnTfNJy #w3ccommunity — W3C (@w3c) 2015, 1月 15 W3Cは2009年12月に、HTML5について日本語で議論するW3Cのグループ「HTML5 Japanese Interest Group」を設立していましたが期限が切れ、それと入れ替わるように今回「HTML5 Japanese Community Group」の設立となっています。 「HTML5 Japanese Community Group」の共同議長である村上真雄氏に、メールで設立の経緯などをうかがいました。 W3C HTML5 Japanese Interest Groupを引
WebRTCでキャスしよう！片方向リアルタイム映像配信を作ろう
こんにちは！がねこまさしです。「WebRTCを使ってみよう」シリーズの最新話をお送りします。今回は、簡易的な放送局を作ってみましょう。 片方向配信の特徴 WebRTCを使った音声通話、ビデオチャットのサンプルには、双方向のものが多く見られます。ライブラリもそれを前提とした作りのモノが多いようです。なので今回は、片方向配信を実際に動かしてみましょう。 片方向配信には、双方向通信とは異なる特徴があります。 視聴側はカメラやマイクといった機器が不要なので、参加のハードルが下がる Peer-to-Peerでもフルメッシュ構造にはならないので、より多くの人が同時に利用できる 特に同時接続数はは双方向では4～5人が実用範囲なのに対し、片方向では10～30人程度に対して1つのPCから配信できます。ちょっとした仲間内のイベントや、社内イベントであれば、十分にカバーできるのではないでしょうか？（社内で動かせ
［速報］HTML5、ついにW3Cの勧告となる
W3Cが発表したプレスリリース（日本語）の冒頭を引用します。 2014年10月28日(アメリカ)： ワールド・ワイド・ウェブ・コンソーシアム(W3C)は、ウェブページやウェブアプリケーションを構築する際に使用されるフォーマットHTMLの第5版であるHTML5を勧告として公開し、オープン・ウェブ・プラットフォームの礎を築きました。HTML5は、アプリケーション開発者やアプリケーション産業がこの先何年に渡って信頼するに足る、アプリケーション開発のための機能を提供します。HTML5は今や幅広いデバイスで、そして世界中のユーザが利用可能であり、かつ豊富な機能を持つアプリケーションの開発コストを削減します。 W3Cディレクターを務めるティム・バーナーズ＝リーは、「ビデオやオーディオをブラウザ上で見たり、ブラウザ上で通話をすることは、今や当然の事として受け止められている」と述べています。「写真や店舗の
あなたにWebSocketは必要ないかも | POSTD
(訳注：2015/8/4、いただいた翻訳フィードバックを元に記事を修正いたしました。) 本題に入る前に強調しておきます。WebSocketは優れた通信プロトコルです。実際私はこの RFC6455 を、 Fanout のサービスで使っている( Zurl や Pushpin といったパーツで採用しています。Fanoutではまた、 Primus （異なるリアルタイムフレームワーク間での通信を可能とするラッパー）を利用し、 XMPP-FTWインターフェース を介したWebSocket通信をサポートしています。 しかしながら私はこれまで、多くの広く普及しているアプリケーションにかなりの時間を費やし、おかげでRESTやメッセージングパターンについては多少なりとも理解が深まってきた今、実はWebSocketを実装した典型的なWebアプリケーション（もしくはWebSocketライクな抽象化レイヤ）の大部分
オランダのゲーム・デベロッパBoosterMediaがヤフーと提携——ネイティブアプリ全盛の中、HTML5にこだわる理由とは?（インタビュー） - BRIDGE（ブリッジ）テクノロジー＆スタートアップ情報
オランダのゲーム・デベロッパBoosterMediaがヤフーと提携——ネイティブアプリ全盛の中、HTML5にこだわる理由とは?（インタビュー） BoosterMedia CEO Laurens Rutten 氏（右）と、 日本市場 Business Development Manager に就任した菊池奈那氏。（左） 昨年以降、モバイルゲーム業界では、トレンドがネイティブアプリ化へ向かっているのは疑う余地の無い事実だろう。数々リリースされているグロースハッキング・ツールが、ネイティブアプリへの導入を前提としたものであることを考えれば、この考察はおそらく間違いない。 そんな中、今月初めにオランダのBoosterMediaがヤフーとの提携を発表、無料カジュアルゲーム11タイトルの配信を開始した。興味深いのは、彼らのゲームタイトルの多くがネイティブアプリではなく、HTML5 を使ったモバイルゲー
壁を越えろ！WebRTCでNAT/Firewallを越えて通信しよう
こんにちは！がねこまさしです。前回は複数人の同時通話まで実現しました。社内で使うには十分なレベルです。 しかし本格的な企業ユースとなると、まだまだ障害があります。会社と家、自社と別の会社さんなど、実際に通信しようとするとNATやFirewallといった壁が立ちはだかります。 NATを越えよう NATの役割は NAT(+IPマスカレード)は企業だけでなく、一般家庭でも使われています。ブロードバンドルーターやWiFiルーターでは、1つのグローバルIPアドレスを、複数のPCやデバイスで共有することができます。このとき、NATには2つの役割があります。 インターネットにつながったグローバルなIPアドレスと、家庭内/社内のローカルなネットワークでのIPアドレスの変換 複数のPC/デバイスが同時に通信できるように、ポートマッピングによるポート変換 WebRTCでNAT越しに通信すること考えてみましょう
年賀状2014.psd
あけましておめでとうございます！ 昨年度も、お世話になり、どうもありがとうございました。 2013年のカヤックは、組織改革を行った「回復の年」でした。 2014年は、ゲーム事業とその周辺を「攻める年」にします。 今年も、面白法人カヤックをどうぞよろしくお願いいたします。 今年は、デザイナーの方にとってはおなじみのソフトである Photoshopをモチーフにした少し変わったサイトをつくりました。 2014年が、みなさんにとって面白い年になりますように。
ネットワークのないところでも使え、サクサク動く。これからのWebゲームアプリが備えるべき機能とは「HTML5 Conference 2013」
ネットワークのないところでも使え、サクサク動く。これからのWebゲームアプリが備えるべき機能とは「HTML5 Conference 2013」 馬場 美由紀（HTML5 Experts.jp編集部） 今後モバイルWebアプリはどこを目指すのか──。このヒントが得られたのが、DeNA小原隆郎氏の「地下鉄 x サクサク x これからのWebゲームアプリが備えるべき8つの機能」というセッション。 小原氏は昨年秋にDeNAに入社。「@uupaaというネームは知っている人もいるかもしれないが、ほとんどこのような場所に出ることがない。今日会えた人はラッキーだと思う」という前置きをしてセッションは始まった。 SPAでページをまたがった音楽の再生が可能に 同セッションは検証は必要ながらも、小原氏自身が気になっているWebアプリの技術的なトピックスを紹介するというもの。 まず最初に取り上げたのはネイティブに
Navigation Timing APIでサイトパフォーマンスを調査 (1/4)
Webサイトの制作では、ページデータの読み込み時間が問題になることがあります。ページが表示されるまでに時間がかかると、ユーザーのストレスが増加し、場合によってはユーザーが離れてしまう場合もあります。すばやく表示されるWebサイトであれば、ユーザーも使いやすいはずです。また、Googleはページの表示速度を検索結果の順位算出に使っていると明らかにしています（Googleの発表）。 ページの読み込み速度はJavaScriptで計測できます。ところが、JavaScriptではHTMLファイルが読み込まれHTMLの解釈が始まった段階からしか計測できず、どの処理に時間がかかっているのか、詳細な処理時間を把握できません。 そこで登場したのが、「Navigation Timing API」です。Navigation Timing APIは、DNSの処理時間や、HTTPリクエスト／レスポンス時間など、HT
HTML5モバイルアプリUIフレームワーク「Onsen UI」、アシアルがOSSとして公開
アシアルは2013年9月12日、HTML5ベースのモバイルアプリ用UIフレームワーク「Onsen UI」をオープンソースソフトウエア（OSS）として公開した。Onsen UIは、Angular.jsとTopcoatの2つのオープンソースソフトウエアをベースに、モバイルアプリ開発に特化したナビゲーション機能とUIコンポーネントを追加したフレームワーク。 Onsen UIは、画面遷移や画面遷移時のアニメーションの設定ができる「ナビゲーション機能」を備える。また画面のUIコンポーネントを用意する。CSSを使ってデザインをカスタマイズすることも可能。 Apacheライセンスで配布する。ソースコードはGitHubから入手できる。
cocos2d-html5エンジンが凄い件 - tsuge development page
cocos2dっていうiPhoneでは有名なゲームエンジンがあるんだけど、それのHTML5版でcocos2d-html5ってのがある。 http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Cocos2d-html5 これ、ちょっとまともに調べてみたけどかなり凄い。 凄いんだけどいまいちZyngaの日本での頑張りが足らないのか記事が少ないので、ちょっと紹介する。 ダウンロードとか とりあえず自分で触ってみるわって人は、上のリンクからCocos2d-html5-v何がしの最新版リンクをクリックしてダウンロードすればいい。 この記事時点ではCocos2d-html5-v2.1.4が最新。 サンプルゲームはpixi.js辺りに比べるといまいちだけど、個別の機能を確認するのはcocos2d-html5のテストプログラムが使える。 http://www.c
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術
http://clockmaker.jp/blog/2014/01/away3d-typescript-fire/
HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説
WebRTCでのビデオチャットを体験できる『Multi-Party WebRTC Demo』 | 100SHIKI
https://jp.techcrunch.com/2013/06/05/20130604google-will-soon-launch-google-web-designer-a-free-html5-development-tool-for-creating-web-apps-sites-and-ads/
ネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについて
