ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめまして、Yahoo!きっず開発担当です。 昨年Yahoo!きっずにてブラウザオンラインゲーム「おしゃべりリバーシ」をリリースしました。 ※おしゃべりリバーシは2015年10月をもってサービス終了しました。ご利用いただきまして、ありがとうございました。 このゲームは、通信対戦部分の通信プロトコルWebSocketを採用し、サーバミドルウェアにNode.js＋Socket.IOを採用しました。この結果、ブラウザゲームでありながらマルチデバイスでの対戦を実現しました。 今回は、Node.js＋Socket.IOによるWebSocketサーバのシステム構築方法について考慮すべきポイントを、「おしゃべりリバーシ」の実例を紹介しながら説
解釈が間違っている点がある可能性が御座いますのでご了承くださいませ。記事の内容としては「Node.js なら他のサーバよりもこんなに簡単に WebSocket が扱える(ライブラリがある)」というような内容となっていますので、ご了承いただければと思います。 Node.js って何？ Node.js についてよくわからず最初は以下のページを読んでました。 Node.jsに関する基礎や開発・チュートリアルのまとめ:phpspot開発日誌 例えば、ログイン中の2人がいて、1人がチャットのリクエストをしたとします。でもラグが30秒ほどあって、気付かずに閉じちゃうなんてことがなくなります。 メンバーAのブラウザがメンバーBのブラウザに直接プッシュするってことかと最初は思っていましたが違いました。この点について深く考えていくこととなります。 Node.js を使うと何ができるのか node.js を使
デブサミ2017「グランブルーファンタジーを支えるインフラの技術」講演メモ #devsumi - 元RX-7乗りの適当な日々
CAを離れて1年半。最近はどんな感じか知りたかったので聞いてきました。面白かったです。 グランブルーファンタジーを支えるインフラの技術 (株)Cygames 佐藤太志 氏 グランブルーファンタジーについて 特徴 スマホのRPG ブラウザゲーム 協力プレイ、マルチプレイ システム規模 登録ユーザ数1400万人 月間300億PV 100万query/sec 8万req/sec トラフィック12Gbps (CDN除く) システム構成 LBはBIG-IP CDNはAkamai HTTP/WebSocketがフロントインターフェース Web: Apache + mod_php + mysqli Node: Node.js + twemproxy DB: MySQL + MHA オンプレミス、仮想化環境は使っていない ネットワーク通信量が非常に多い 低レイテンシを求められている ハイパフォーマンスを実
AWS公式の無料EラーニングでAPI Gateway REST APIを網羅的に学ぶ | DevelopersIO
Amazon API Gateway について紹介し、API を作成してデプロイする方法を学習していただける無料デジタルコース Amazon API Gateway for Serverless Applications (Japanese) - 75min をローンチしました? 認定インストラクターが日本語でスタジオ収録していますので是非！https://t.co/emJoRhImIH pic.twitter.com/3zEnTb6WI8 — Wataru Nishimura (@kuwablo) January 27, 2021 上記で紹介されているAPI Gatewayを学べるEラーニングを受講したのでレポートします。 Amazon API Gateway for Serverless Applications (Japanese) 良かったこと 体系的に学べる API Gatewa
AndroidやBlackberry用にテザリングアプリを販売しているTether.comが、 JailBreakしていないiPhone用でも利用できるWebアプリを発表しました。 Tether Relaunches iPhone Version | Tether 実際に動かしている公式動画は以下のとおり。 このアプリはHTML5のWebSocket APIを利用し、 iPhoneとPCをアドホック接続する仕様のため、 Appleによる干渉を受けず利用する事ができます。 今までのiPhone用テザリングアプリはJailBreak用であったり、 マーケットに公開されたのちAppleに削除されたりしましたが、 今回はWebアプリのためそのような心配はありません。 またWebアプリであるためにSafariが使える3GのiOS端末であれば、 SoftBank版でもau版でも利用でき、iPadの3G
長い記事なので、先に結論だけ書いておきます。WebSocketのバイナリメッセージ機能は、これまでのインターネットのあり方をひっくり返します。「そんなの知ってるよ」という方もいるとは思います。僕も理屈では分かってたつもりだけど、実際にアプリを作ってみて、具体的にそれを感じることができたので、ちょっと長いですがどういうことなのか説明してみます。 WebSocketとは # WebSocketは、HTML5関連の中でも特に注目を集めている技術の一つです。通常のHTTP通信であればクライアントからのリクエストなしにサーバーは応答しませんが、WebSocketを使うことでクライアントとサーバーの間で双方向の通信が可能となります。これを利用することで、今後様々なリアルタイム性の高いサービスを構築することが可能になるでしょう。 そんなWebSocketですが、これまで波乱の道を歩んできました。数年前か
はじめまして！ 技術部2年目のsugyanと申します。 初めてtech.kayac.comに投稿します！ 先日自分のブログで書いた記事が思いのほか好評だったので、これについてもう少し詳しく書いてみようと思います。 node.js+socket.ioを使ったライブコーディングwebアプリを作ってる - すぎゃーんメモ node.jsについて 最近話題の、サーバーサイドJavaScript「node.js」。みなさん触ってみてますか？ 「Google V8 JavaScript Engineによるイベント駆動の…」と、どんなものかは知っているものの実際には触っていない、という人がまだ多いような気がします。 僕も昨年の12月くらいにようやく触ってみた という程度なのですが、意外にお手軽で簡単に使えるし面白いので、 「JavaScriptはまだニガテで ＞＜」というヒトでも安心して始められるのでは
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
自分が良い Design Docs(Software Design Document)を書くために、読んだ/参考になったリソース集 一覧 Design Docs とは Design Docs at Google デザインドック(Design Doc)について デザインドックで学ぶデザインドック 残業も減らせる!? 上級エンジニアになるための Design Doc 超入門 「Design Doc」って何なのか？ What Is A Design Doc In Software Engineering? (full example) What is a Design Doc: Software Engineering Best Practice #1 https://github.com/kaiinui/note/blob/master/Design--Designdoc.md Googleの
NewsPicksのエンジニア採用サイトです。さまざまな強みを持つエンジニアが、自分たちの個性を活かし、未来を創るための挑戦をしてる自由な環境で、一緒に世の中をおもしろくしてみませんか？
ついにRFCに登場！Webサーバとの双方向通信を実現する「WebSocket」 - builder
次世代のWebアプリケーションの中核を担う技術として「HTML5」に注目が集まっているが、それと並んで期待されている技術に「WebSocket」がある。 IETFとW3Cによって仕様の策定が進められており、最初の提案以来幾度もの改訂を経て、2011年12月11日にそのプロトコル仕様がRFCのProposed Standard（RFC 6455）となった。 AjaxからComet、そしてWebSocketへ WebSocketはウェブサーバとブラウザが直接コネクションを張って双方向通信するための技術規格である。HTTPとは異なる独自の軽量プロトコルによって通信を行うため、オーバーヘッドが小さく、長時間に渡って通信する場合でもHTTPコネクションを占有する必要がないというメリットがある。 WebSocketが生まれた背景には、サーバとブラウザがもっとリアルタイムに通信して情報の配信や更新を行え
大量接続に耐えるWebSocketアプリケーションサーバ構築のコツ - pixiv inside [archive]
WebSocketの扱うサービスでは、長時間のコネクション、再接続処理、プロキシ、ロードバランサなど、インフラの面で多くの問題を抱えがちです。弊社のサービス「pixiv」の9周年企画でも、この問題に直面しました。 実際にそこで構築したインフラの事例をもとに、本運用に使えるWebSocketサーバの構成について、pixivインフラ部の南川からご紹介します。 * 9周年企画 “黒歴史”をロケットで宇宙に飛ばす pixiv黒歴史 そもそも WebSocket とは？ WebSocketはTCP上で動く双方向通信のための通信規格です。 Webページの読み込みで行われているような、クライアントがサーバにデータを要求し、サーバはクライアントにレスポンスを返すというHTTPの通信ルールとは違います。サーバと長時間コネクションを確立し、Socketのようにデータのやり取りを行います。そして、コネクションを
![大量接続に耐えるWebSocketアプリケーションサーバ構築のコツ - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/95f08ea3414673bb0131022fbc9dc354bb7483ba/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fd%2Fdevpixiv%2F20161129%2F20161129204837.png)
HTTPといえばHTML/CSS/JavaScriptや画像などの小さめの限りがあるデータを手に入れるためによく使われている印象がある。REST APIのようなHTTPを使ったAPIでも限りのあるデータがリクエストとレスポンスになる印象が強い。
Meteor
Meteor.js is an open source platform for building Web, Mobile, and Desktop applications.
Dev fest 2020 taiwan how to debug microservices on kubernetes as a pros (ht...
今、Node.jsに起きてることを語る上で、io.jsは避けて通れない話題でしょう。 今回のNode.js アドベントカレンダー 2014の締めを飾るために、このio.jsについて僕が知っている限りの事をまとめて書くことにします。 io.jsを知り、今後"Node"がどうなっていくのかを皆で一緒に考えていきましょう。 またこの一連のio.jsのfork騒動はOSSという特殊なプロジェクトをどう進めていくのがハッピーなのかを知る一つの教材だと思います。 OSSに関わっている皆さん、今回も長いですが、最後まで読んでもらえると幸いです。 io.js とは何か Node.jsのForkです。次のNode.jsの安定版になる、v0.12をForkしています。「アイ・オー ジェイエス」と読みます。名前の由来は木星にある四番目に大きな衛星の名前から取られました。*1 Nodeを使っている人のことをnod
結婚式でLINE Message APIを使った写真共有サービスを作った話 - tomoima525's blog
先日結婚式を挙げました。式中ご参列いただいた方と簡単に写真を共有したいなと思い、そういうマイクロサービスを作ってみました。ここではどのように実装していったのかを記憶が薄れぬうちに書いていこうと思います。 着想と仕様 自分が結婚式に参列する時、写真を撮るものの、主賓に送りそびれることがよくあって、だったらそのままさくさく送れたら楽じゃんねーと思っていました。で送りっぱなしだとグルーブ感がないので、出来たらその場でシェア出来たらよいかもと考えていました。それを踏まえて仕様としては、 その場でサクサク送れる 送った写真をリアルタイムに共有できる ことを目指しました。 全体構成 全体構成は以下のようになっています。 LINE Message APIを使ってLINEのチャンネルを参列者に登録してもらい、そこから写真を投稿してもらいます。webhookを介して画像データをサーバーに渡し、CDNに保存し
(訳注：2015/8/4、いただいた翻訳フィードバックを元に記事を修正いたしました。) 本題に入る前に強調しておきます。WebSocketは優れた通信プロトコルです。実際私はこの RFC6455 を、 Fanout のサービスで使っている( Zurl や Pushpin といったパーツで採用しています。Fanoutではまた、 Primus （異なるリアルタイムフレームワーク間での通信を可能とするラッパー）を利用し、 XMPP-FTWインターフェース を介したWebSocket通信をサポートしています。 しかしながら私はこれまで、多くの広く普及しているアプリケーションにかなりの時間を費やし、おかげでRESTやメッセージングパターンについては多少なりとも理解が深まってきた今、実はWebSocketを実装した典型的なWebアプリケーション（もしくはWebSocketライクな抽象化レイヤ）の大部分
第1回NTT-WEST学生向けアプリ開発コンテスト（WebRTC）の勉強会資料です。 ※コンテスト情報はFacebookページよりご覧ください！ https://www.facebook.com/nttw.w.con
Twitterで「なんかやばそうな本が出るぞ！！！」みたいな事を言っていたら、それが偶然拾われて、献本して頂く流れになりました。オライリーさん、ありがとうございます。 とりあえずざっと全体を流し読みした（と言っても3時間弱は読んだ）ので、書評っぽいことを書いておく。 ハイパフォーマンス ブラウザネットワーキング ―ネットワークアプリケーションのためのパフォーマンス最適化posted with amazlet at 14.05.10Ilya Grigorik オライリージャパン 売り上げランキング: 4,747 Amazon.co.jpで詳細を見る 読むべき人間 以下に該当する人間に対しては必読に値する本だと思う。 HTTPを扱うアプリケーション*1のアーキテクチャを設計する人間 Webサーバ等のHTTPに関連するインフラを担当する人間 HTTP 2.0、WebSocket、Server-S
Proximity APIでWi-Fi Direct通信 - デバイスとITの架け橋 - Site Home - MSDN Blogs
In Visual Studio 2022 17.10 Preview 2, we’ve introduced some UX updates and usability improvements to the Connection Manager. With these updates we provide a more seamless experience when connecting to remote systems and/or debugging failed connections. Please install the latest Preview to try it out. Read on to learn what the Connection ...
NHK紅白の Android/iPhone アプリが .NET/Xamarin 製だったということ - Qiita
新年あけましておめでとうございます。 今年も Xamarin 推しで参ります、よろしくお願いします。 2013年大晦日の紅白歌合戦、NHK が iPhone/Android 用のアプリを配信していました。 紅白アプリ｜第64回NHK紅白歌合戦 紅白で「イェーガー！」と叫ぶために曲を見逃さないiPhoneアプリ、NHK紅白 なんとこのアプリ、Xamarin 製だったとのこと。 紅白あんまり興味なかったのでノーチェックでしたわー。 紅白アプリXamarinなんか — ゆたか (@tmyt) 2013, 12月 17 iPhoneの紅白アプリ、MvvmCross使ってるってことは、Xamarinで作ってるってこと？！ pic.twitter.com/cTWPz2cp9E — 菊池紘 (@kikuchy) 2013, 12月 31 このツイートを RT した後、ソッコーで Android 版を入れ
ゲーマーなら誰しも「なんかロード時間が長いなぁー」や「表示が遅くなるんだけど……」といった、ゲームの挙動がおかしくなる経験をしたことがあるはず。 そうした不快感を減らすために、製作陣は日夜、血の涙を流すほど（おおげさ？）の努力を重ねているわけだが、その苦労はなかなか一般人のわれわれに見えてこない。 そこでぜひ読んで欲しいのが本記事だ。ソフト開発エンジンUnity（ユニティ）の開発者向けイベント“Unite 2015 Tokyo”にて、スマホ向けRPG『白猫プロジェクト』で実施したパフォーマンス調整について、コロプラの技術者が具体例を交えて語った。 その要点をまとめたレポート記事をお届けしていく。
若者のプロトコル離れが叫ばれて久しいが、最近プロトコルは非常にホットな分野である。 目まぐるしく進化するWebに合わせ、プロトコルの世界も着実に進化している。 今までブラウザでは出来なかった事が出来るようになり、Webサービスをより安全に使えるようになった。 そしてWebのパフォーマンスを大きく改善するためにHTTP2.0も議論されている。 Webを支えるプロトコルとして、大きく分けて３つに分けられるかと思う（私の勝手なイメージ、正確な図ではありません） Webアプリケーション ブラウザが今まで出来なかったことを出来るようにしたり、Webアプリケーションの認証・認可などの機能を提供するプロトコルなど。JSやサーバサイドプログラミングで利用したりする。 WebSocket (http://tools.ietf.org/html/rfc6455) ブラウザとWebサーバの間でソケット通信を行う
In Visual Studio 2022 17.10 Preview 2, we’ve introduced some UX updates and usability improvements to the Connection Manager. With these updates we provide a more seamless experience when connecting to remote systems and/or debugging failed connections. Please install the latest Preview to try it out. Read on to learn what the Connection ...
Smashing Magazine » Blog Archive » Cheat Sheet Round-Up: Ajax, CSS, LaTeX, Ruby…
AJAX calls do not cover updates from the server, which are needed for the modern real-time and collaborative web. PubSub (as in “publish and subscribe”) is an established messaging pattern that achieves this. In this article, Alexander Gödde will look at precisely how PubSub solves the updating problem, and he’ll look at one particular solution (the WAMP protocol) that integrates both the calling
Code Life
noto's blog
DockerとWebSocketを使って、vimの設定をブラウザで即体感できるサービスを作った - Goldstine研究所
2014年の秋から@mogulla3と定期的にインフラ関連技術の勉強会をやってきましたが、 インプットの勉強会だけでは飽き足らず、いつしかサービスを作る中でインフラ関連技術を駆使し勉強したいと思うように… そして、普段使っているVimを題材に、 vimの設定をブラウザ上で即体感できるサービス Vim::Factory を開発しました。 本記事はVim::Factoryの簡単な紹介と技術的な仕組みについて記述しています。 Vim::Factoryはこちら。 http://vimfactory.com/ 1. Vim::Factoryについて 1-1. Vim::Factoryってなに？？ Vim::Factoryは、選択したVimの設定を、ブラウザ上で「即体感」できるサービスです。 数多くあり複雑なVimの設定を容易にし、お気に入りのVim探しをサポートすることを目指しています。 1-2.
はじめに 非同期プログラミングと呼んでいるのは、ノンブロッキングIOと select, poll, epoll, kqueue のようなIO多重化を利用したネットワークアプリケーションを書くことです。 node.js で websocket 使ったチャットを書くとかそういうのです。 「他の多くの言語」とは、 Python (asyncio), node.js, C# などを想定しています。 Erlang や GHC なんかは Go に近いかも知れません。 async / await がない言語では、「コールバック地獄」や「deferred地獄」のような問題もありますがこの記事では扱っていません。 async / await のメリットを解説した他の記事を参照してください。 あとこの記事は主にランタイムに関する部分を扱っているので、「それは言語じゃなくて処理系の問題だ！」等の頓珍漢な揚げ足取
25. メディア接続 // メディアに関する設定 var constraint = { audio: true, video: true }; navigator.webkitGetUserMedia( constraint, successCallback, errorCallback ); constraint: audio: マイクを使うかどうか video: カメラを使うかどうか successCallback: メディア接続成功時のコールバック errorCallback: メディア接続失敗時のコールバック
intro なんだかんだ WebSocket を使ってるのに、 WebSocket サーバを自分で書いたことが無かったので、RFC も落ち着いてきたここらで、仕様を読みながら実装してみようと思いました。 "WebSocket サーバ 実装" とかでググると、 Socket.IO とか pywebsocket で WebSocket アプリ作って、「WebSocket サーバを実装」みたいなタイトルになってることが多いみたいですが、 (Apache に PHP で HelloWorld して、「HTTP サーバ実装しました」とは言わないよね。) この記事では、 WebSocket プロトコルをしゃべるサーバ自体を実装します。 といっても、全部やるのはちょっと大変だったので、基本的なテキストメッセージのやりとりの部分だけやって、エコーサーバができるところまでやりました。 完成版のソースは以下で
Troubleshooting ASP.NET5 Website in IIS - MSDN Blogs
In Visual Studio 2022 17.10 Preview 2, we’ve introduced some UX updates and usability improvements to the Connection Manager. With these updates we provide a more seamless experience when connecting to remote systems and/or debugging failed connections. Please install the latest Preview to try it out. Read on to learn what the Connection ...
Gmail
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
HTMXとは HTMXは、JavaScript を記述せずに、Ajax通信や高度なUXを実現できるライブラリ。 軽量 で 高速 で、既存のサーバーサイドのフレームワークとシームレスなやり取りができる。また、AJAX通信の発火、フォームの送信処理、DOMの更新などを既存のHTML要素を拡張するだけで可能とする。WebSocketやSSEにも対応しているので、チャットアプリなどにも適している。 2023 JavaScript Rising Starsでは、 フロントエンド・フレームワーク部門で見事2位に輝いた！(一位はReact、全部門だとshadcn/ui) 似たような機能として、Ruby on RailsのHotWireがあるらしい。 2024年はHTMXがくると言われているぐらい世界で騒がれているのだが、あまり日本では流行っていない。以下はGoogleトレンドで調べた結果である。 アメリ
疑似個人情報データ生成サービス
疑似個人情報とは、主にアプリケーションの開発／試験の際のテストデータとしての使用を目的とした架空の個人情報データです。 個人情報保護法の施行により、本物の個人情報を目的外であるテストデータとして使用することはできなくなっています。 また個人情報の漏洩が社会問題となっている今、「本物の個人情報」をテストデータのように別目的で使用することは、 情報漏洩の危険性が高まるだけでなく、企業としてのモラルも問われます。 このページは無料で、この擬似個人情報を生成することができる実験的サービスです。 生成したデータの商用利用も可能です。 下の「生成を開始する」ボタンを押して、条件を入力していくだけで簡単に個人情報データの生成を行うことができます。 作成したデータはMicrosoft Excel、CSVなどの形式でダウンロードすることができます。
2017/02/16 Developers Summit 2017
『Programming Windows 8 Apps』 の第1章を翻訳しました - Windows 開発統括部 Blog - Site Home - MSDN Blogs
In Visual Studio 2022 17.10 Preview 2, we’ve introduced some UX updates and usability improvements to the Connection Manager. With these updates we provide a more seamless experience when connecting to remote systems and/or debugging failed connections. Please install the latest Preview to try it out. Read on to learn what the Connection ...
Visual Studio Code - NEW FEATURES: 13 Big Debugging Updates (Rich Object Hover, Conditional Breakpoints, Node.js, Mono, & More!) - User Ed - The blog of Ed Price, Customer Program Manager - Site Home - MSDN Blogs
In Visual Studio 2022 17.10 Preview 2, we’ve introduced some UX updates and usability improvements to the Connection Manager. With these updates we provide a more seamless experience when connecting to remote systems and/or debugging failed connections. Please install the latest Preview to try it out. Read on to learn what the Connection ...
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Node.js＋Socket.IOで作る、通信対戦ができるHTML5ゲームシステムの作り方
初心者にも分かる Node.js と WebSocket についての解釈まとめ
JailBreakせずに全てのiPhoneでテザリング出来るWebアプリが登場「Tether for iOS」
WebSocket のバイナリメッセージを試したら、ウェブの未来が垣間見えた
node.jsはじめました - KAYAC engineers' blog
can I use... Support tables for HTML5, CSS3, etc
【メモ】良いDesign Docs(Software Design Document)を書くためのリソース集
Slack のインフラはどのように進化してきたか？
SSH接続をWebブラウザの純粋なHTTP上で実現する - nwtgck / Ryo Ota
JavaScript最新動向 〜WebSocket編〜
io.jsについて知っていること - from scratch
あなたにWebSocketは必要ないかも | POSTD
WebRTCの技術解説 公開版
ハイパフォーマンス ブラウザネットワーキング、読むべき本だった - terurouメモ
HTML5ベースのリモートデスクトップソフト「ThinVNC」v1.0が公開、正式版に
Unity技術者は必読！ 3,200万ダウンロードの『白猫プロジェクト』を支える“最適化”
Webを支えるプロトコル - ASnoKaze blog
monoe's blog - Site Home - MSDN Blogs
Go が他の多くの言語での非同期プログラミングよりも優れている理由 - Qiita
WebブラウザでP2Pを実現する、WebRTCのAPIと周辺技術
WebSocket サーバの実装とプロトコル解説 - Block Rockin’ Codes
もうjsなんていらない！世界で流行っているHTMXについてまとめてみた - Qiita
グランブルーファンタジーを支えるインフラの技術
【HTTP2.0最新動向】第1回：HTTP/2.0の策定、ついに始まる