タグ

ブックマーク / html5experts.jp (8)

  • Firebaseで作る簡単リアルタイムウェブアプリケーション(前編)

    Firebaseは2014年10月にGoogleに買収されたことで一躍有名になったBaaS(Backend as a Service)です。記事ではちょっとしたリアルタイムウェブアプリケーションを作りながらFirebaseの機能を紹介します。 Firebaseとは Firebaseはデータストレージ、ユーザー管理などアプリケーションのバックエンドとして必要となる機能をサービスを提供することで、アプリケーション開発者がクライアントサイドの開発に集中できるようにしてくれるBaaS(Backend as a Service)の一種です。 2014年10月にGoogleに買収され、Google Cloud PlatformGCP)の一員となりました。この買収によりGCPにはPaaS(Platform as a Service)としてGoogle App Engine、IaaS(Infrastr

    Firebaseで作る簡単リアルタイムウェブアプリケーション(前編)
    johnmayer
    johnmayer 2016/07/22
  • ビデオチャット&テキストチャット作成チュートリアル!WebRTCを簡単&柔軟に使える「SkyWay」を使ってみよう

    ビデオチャット&テキストチャット作成チュートリアル!WebRTCを簡単&柔軟に使える「SkyWay」を使ってみよう 桂健太(HTML5 Experts.jp編集部) WebRTCを簡単に利用するためのプラットフォームSkyWayをご存知ですか?連載では、WebRTCを簡単に利用するためのプラットフォームSkyWayについて、基的なチュートリアルから、各種ライブラリの紹介までしていきます。 連載第1回目である今回は、まず、WebRTCの基的な説明をした後に、実際にSkyWayを使って、ビデオチャットの作成とデータチャンネルを使ったチャットの作成をしていきます。 WebRTCとは WebRTCとは、ブラウザやアプリ間でビデオや音声、データのやり取りをP2P(Peer to Peer)で行うことを可能にする規格です。 従来のビデオチャットは互換性のない独自技術で実装されていましたが、Web

    ビデオチャット&テキストチャット作成チュートリアル!WebRTCを簡単&柔軟に使える「SkyWay」を使ってみよう
  • SkyWay MultiPartyを使ってグループチャットを作ろう

    SkyWay MultiPartyを使ってグループチャットを作ろう 間 咲来(NTTコミュニケーションズ) 連載2回目の今回は、7月28日にリリースされたライブラリ、SkyWay MultiPartyのチュートリアルをお届けします。 SkyWay MultiPartyは、一言で言うと多人数によるビデオ・テキストチャットを『簡単に』作るためのライブラリです。 ライブラリを使用することで、グループビデオチャットやテキストチャットを、 ほんの20行程度のJavaScriptコードで実装をすることができます。 サンプルコードを用意していますので、手元で実行しながら進めてみましょう。 10行ビデオチャット 以下のスクリーンショットをご覧ください。 まずはこのような複数人が参加できるビデオチャットシステムを、10行程度のJavaScriptコードで実装してみましょう。 サンプルコードを以下に記載し

    SkyWay MultiPartyを使ってグループチャットを作ろう
  • WebGLとWebSocketによる3Dオンラインレースゲーム「JS-Racing」の全て!(前編)

    WebGLとWebSocketによる3Dオンラインレースゲーム「JS-Racing」の全て!(前編) 西田慎吾(株式会社アイ・エム・ジェイ) 今回はHTML5JapanCup2014にてWebGL賞と優秀賞を受賞したオンラインレースゲーム、JS-Racingの技術解説を書かせていただきます。 このコンテンツはWebGLの3D表現を活かした3Dレースゲームです。 また、WebSocketを使用しサーバを介して、複数のクライアントでの同時走行が可能なオンラインゲームになっています。同時に、ソケット通信時に発行されるソケットIDをPCとスマートフォンで共有することで、スマートフォンからPC上の車を操作することも可能です。 クライアントサイドの使用技術 クライアントサイドの構築において、目的・用途に応じて使用した言語やライブラリに関して解説します。 TypeScriptによるクラス設計 クライアン

    WebGLとWebSocketによる3Dオンラインレースゲーム「JS-Racing」の全て!(前編)
    johnmayer
    johnmayer 2016/02/26
  • WebGLとWebSocketによる3Dオンラインレースゲーム「JS-Racing」の全て!(後編)

    WebGLとWebSocketによる3Dオンラインレースゲーム「JS-Racing」の全て!(後編) 西田慎吾(株式会社アイ・エム・ジェイ) WebGLとWebSocketによる3Dオンラインレースゲーム「JS-Racing」の全て!(後編) 前回に引き続きHTML5 Japan Cup 2014にてWebGL賞と優秀賞をいただいたオンラインレースゲーム、JS-Racingの技術解説をさせていただきます。 サーバサイドの使用技術 サーバサイドの技術としてNode.jsを使用しています。Node.jsはサーバーサイドで動作するJavaScriptで、ノンブロッキングI/Oというモデルを採用しています。非同期処理でデータベースへのアクセスとWebページの表示を別々に行ってくれるので、ストレスなく大量のページの表示が出来ます。また、Socket.ioというライブラリを扱うことで、WebSocke

    WebGLとWebSocketによる3Dオンラインレースゲーム「JS-Racing」の全て!(後編)
    johnmayer
    johnmayer 2016/02/26
  • 『現実世界をWeb化する』「Physical Web」そして「Eddystone」について詳しく聞いてきた!

    『現実世界をWeb化する』「Physical Web」そして「Eddystone」について詳しく聞いてきた! 白石 俊平(HTML5 Experts.jp編集長) 読者の皆様、「Physical Web」って知っていますか? 昨年10月、Googleが発表したIoT技術で、iBeaconなどのBluetooth Low Energyを活用した技術と、Web技術者にとっては馴染みの深いURL (URI)を組み合わせた技術です。 IoTに関心のあるWeb技術者であればスルーは許されない「Physical Web」について、詳しい人(株式会社リクルートテクノロジーITソリューション統括部 アドバンスドテクノロジーラボ 加藤亮さん)に詳しく聞いてきました! ▲株式会社リクルートテクノロジーITソリューション統括部 アドバンスドテクノロジーラボ 加藤亮さん 編集部より注意 このインタビューの

    『現実世界をWeb化する』「Physical Web」そして「Eddystone」について詳しく聞いてきた!
    johnmayer
    johnmayer 2015/07/23
  • JavaからHTML5ヘ。業務システムの開発におけるWeb技術の変化と適応事例

    JavaからHTML5ヘ。業務システムの開発におけるWeb技術の変化と適応事例 佐川 夫美雄(Ashiras, inc.) フロント開発の現場では、Java中心の開発から、HTMLCSSJavaScript中心の開発にかわりつつあります。今回は具体的な事例をもとに、実装アーキテクチャや開発インフラに、どのような変化が起きているかレポートします。 はじめに HTML5が2014年に正式勧告されることを受け、フロント業務アプリケーションに影響を与えています。より多くのことがHTMLCSSでできるようになり、現場レベルでは開発スタイルそのものの見直しも行われています。実際、私が担当しているプロジェクトではJava中心の開発からHTMLCSSJavaScript中心の開発へと開発環境を変えています。具体的に何をどのように変更しているのかを、私が担当しているプロジェクトの内容に沿ってご説明

    JavaからHTML5ヘ。業務システムの開発におけるWeb技術の変化と適応事例
    johnmayer
    johnmayer 2013/11/07
  • 初心者でも絶対わかる、WebGLプログラミング<基礎知識編>

    HTML5に関連する技術のひとつに、WebGLがあります。WebGLは、ブラウザー上で3DCGプログラミングを実現できる技術です。今回のレポートでは、WebGLプログラミングの基礎知識についてご紹介します。 WebGLって? WebGLでどんなことができるのか──百聞は一見にしかず。まずは例を見てみましょう。demo内のスライダー部分をドラッグすることでカメラの位置などを任意に変更できますので、リアルタイムでレンダリングされていることがわかるでしょう。 (invalid jsdo.it code) このように、ブラウザー上でプラグインに頼ることなく、なめらかな表面、自然な影、高FPSでのリアルタイムレンダリング(アニメーション)など、まるで最近の家庭用ゲーム機にも匹敵する高度な3DCG表現ができるわけです。 WebGLは2013年10月現在、Chrome、Firefox、Operaで標準対

    初心者でも絶対わかる、WebGLプログラミング<基礎知識編>
    johnmayer
    johnmayer 2013/10/16
  • 1