タグ

HTML5に関するnaga_sawaのブックマーク (99)

  • HTML5のLocal Storageを使ってはいけない(翻訳)|TechRacho by BPS株式会社

    概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Randall Degges - Please Stop Using Local Storage 原文公開日: 2018/01/26 著者: Randall Degges 日語タイトルは内容に即したものにしました。 画像は元記事からの引用です。 初版公開: 2019/10/19 追記更新: 2024/04/05 -- リンク情報を記事末尾に移動しました 気で申し上げます。local storageを使わないでください。 local storageにセッション情報を保存する開発者がこれほど多い理由について、私にはさっぱり見当がつきません。しかしどんな理由であれ、その手法は地上から消えてなくなってもらう必要がありますが、明らかに手に負えなくなりつつあります。 私は毎日のように、重要なユーザー情報をlocal storageに保存す

    HTML5のLocal Storageを使ってはいけない(翻訳)|TechRacho by BPS株式会社
    naga_sawa
    naga_sawa 2020/05/10
    localStorageのスコープが同一オリジンか否かだけでしか区切られてないのでXSSもさることながら3rdライブラリ多用するようになった昨今では機微情報には使えないという話/制限設定できたらなぁ
  • ブラウザで(WebUSBもActiveXも使わずに)FeliCaリーダーを読み込む - Qiita

    他の投稿はこちら Webアプリの限界を超える方法 Webアプリの限界を超える方法(セキュリティ編) ブラウザでブラウザを操作してスクレイピングを行う Webブラウザでシリアル通信を行う ブラウザでICカードを読み込む場合、IEでActiveXを使用し、FeliCaリーダーに接続する方法が一般的です。 また最近では、WebUSBでFeliCaリーダーに接続する方法も出てきました。 今回は、WebUSBもActiveXも使用せずに、ブラウザからFeliCaリーダーに接続する方法を紹介します。 概要 構成は以下の通りです。 FeliCaリーダーを読み込むネイティブアプリを作成する ネイティブアプリ上でWebSocketサーバーを立ち上げる ブラウザからネイティブアプリのWebSocketサーバーにローカルホスト接続する ネイティブアプリでFeliCaリーダーからICカードを読み込み、WebSoc

    ブラウザで(WebUSBもActiveXも使わずに)FeliCaリーダーを読み込む - Qiita
    naga_sawa
    naga_sawa 2020/05/09
    ICカードリーダーを触るローカルサーバを使うことでブラウザからICカードにアクセスする/汎用というより特定用途向けとして、アプリ起動→ブラウザで特定サイトを開くみたいなユースケースが合いそう
  • Webアプリの限界を超える方法 - Qiita

    他の投稿はこちら Webアプリの限界を超える方法(セキュリティ編) ブラウザで(WebUSBもActiveXも使わずに)FeliCaリーダーを読み込む ブラウザでブラウザを操作してスクレイピングを行う Webブラウザでシリアル通信を行う Webアプリの限界 経験豊富なwebプログラマなら、Webでは実現困難な機能を知っているでしょう。 ローカルの特定のパスに存在するファイルを自動的にアップロードしたい、 ブラウザからクローラーを起動して情報収集したい、などなど。 Webをよく知らない顧客や、技術不足のSEがそんな機能を開発しろと言い出します。 あなたは「セキュリティ上の理由から、ブラウザでそんなことは出来ない」と断ってきたことでしょう。 それ実現できます。そう、WebSocketならね。 WebSocket WebSocketがどのようにWebアプリの限界を突破するか、説明しましょう。 W

    Webアプリの限界を超える方法 - Qiita
    naga_sawa
    naga_sawa 2018/03/22
    ローカルアプリ前提/ブラウザとローカルアプリをWebSocketで橋渡しすると色々できそう
  • サーバからクライアントに送信する技術 - WebSocketを中心に - Qiita

    Webでのプッシュ技術 HTTPはクライアント(ブラウザ)からリクエストしてサーバからレスポンスが返る一問一答型のプロトコルなので、基的にはサーバ側からブラウザに新着情報をリアルタイムで通知(プッシュ)できるようにはできていません。 しかしそれでもプッシュをしたいという場合にどうするかという話が出てきます。やり方には以下のようなものがあります。 ポーリング クライアントからサーバに定期的に新着を問い合わせるようにします。 最も原始的かつ確実なやり方。欠点は、最大でポーリング間隔の分だけ通知が遅延しうることです。 ロングポーリング(“COMET”) ポーリングなのですが、問い合わせを受けたサーバは新着情報がなければレスポンスを返すのをしばらく保留します。 そのあいだに新着情報が発生すれば即座にレスポンスを返しますし、一定時間経過したら何もなかったとレスポンスを返しましょう。 飛び交う通信内

    サーバからクライアントに送信する技術 - WebSocketを中心に - Qiita
    naga_sawa
    naga_sawa 2016/08/25
    経路上のプロキシ・フィルターが対応してくれない問題とWebSocketそのものの問題とこなれてないライブラリの問題と
  • 初心者でもほぼ無料でHTML5/CSS3を勉強できるコンテンツ9選 - paiza times

    Photo by slavik_V こんにちは。谷口がお送りします。 Webの仕事を目指している人やプログラミング初心者、さらにはブログをやっている人など、HTMLCSSを習得したい人は多いと思います。特に最初は「Webサイトを作ってみたいけどどうしたらいいんだろう……」「自分のブログを豪華にしてみたいんだけど、HTMLっていまいちよく分からない……」など、さまざまな悩みがあるのではないでしょうか。 HTMLとは、Webページを作成する時に使用されるマークアップ言語の一つです。 マークアップ言語とは、プログラミング言語と違い「タグ」を使って、「ここからここまでが見出しです」「ここからここまでが一つの段落です」等といった印をつける言語です。基的にプログラミング言語のような「入力値を取得し計算処理をする」「条件を満たすまで処理を繰り返す」といった処理や計算はできません。 CSSは、Webペ

    初心者でもほぼ無料でHTML5/CSS3を勉強できるコンテンツ9選 - paiza times
    naga_sawa
    naga_sawa 2016/04/13
    HTML/CSS3 自習用サイトやらサービスやらまとめ
  • お疲れさまXMLHttpRequest、こんにちはfetch - Qiita

    Service Workersでプッシュ通知を受信できるようになったわけですが([1]: GCM)([2]: Web Push)、Chromeではバージョン48まではGCMで通知だけができるようになっただけで、メッセージ体は通知を受けてからService Workerでサーバから改めて受け取るような実装をする必要があったりします。 ここで、Service Workersでは、XMLHttpRequestが使えません。その代わり、XMLHttpRequest (以下、XHR)に代わるWHATWGの仕様としてFetch APIがあり、Service WorkersではこのFetch APIを使うことになっていますので、その使い方を簡単に紹介します。 Fetch API自体は、Service Workers専用のものではなく、メインスレッドでもXHRの代わりに使うことが可能です。現時点で実装し

    お疲れさまXMLHttpRequest、こんにちはfetch - Qiita
    naga_sawa
    naga_sawa 2015/11/30
    XMLHttpRequest を置き換えそうな Fetch API
  • HTML5/Javascriptの画像処理ライブラリまとめ

    HTML5(Canvus)、Javascript向けの画像処理ライブラリについてまとめたので紹介します。 続きを読む

    HTML5/Javascriptの画像処理ライブラリまとめ
    naga_sawa
    naga_sawa 2015/11/12
    だいたいOpenCVを意識してる模様
  • WebRTCセキュリティレポート · A Study of WebRTC Security

    WebRTCセキュリティレポート あらまし WebRTC(Web Real-Time Communication)は、Webアプリケーション技術の昨今のトレンドの一つだ。WebRTCを利用すると、プラグイン無しで、また他の条件も無しでリアルタイムコミュニケーションを実現できる。だが、そのオープンソースとして性質から、WebRTCを採用しようとする人がセキュリティ上の不安を覚えることもあるだろう。レポートはWebRTCのセキュリティについて明らかにし、他の技術と比較してWebRTCのセキュリティが優れていることを解説する。 1. 導入 WebRTCはオープンソースのWebベースの技術であり、ユーザがリアルタイムメディア通信を、プラグイン無しで実現可能な技術だ。適切なブラウザを利用すれば、ウェブサイトをブラウズするだけで、他者に発信して通話することができる。 WebRTCの主なユースケースは

    WebRTCセキュリティレポート · A Study of WebRTC Security
    naga_sawa
    naga_sawa 2015/08/07
    WebRTCの規格で考慮されているセキュリティ対策について
  • WebRTCによるビデオチャットサービスの開発 - Qiita

    はじめに Webで使えるビデオチャットサービスを開発しましたので、システム構成や使用したフレームワークやサービス、開発のポイントなどまとめてみました。 (去年にはQiitaの投稿を作っていたのですが、下書き保存したまま忘れて今頃の投稿になってしました。。) 月々のランニングコストは1000円以内、開発工数は1人月以内で作成しています。 WebRTCが出てきたおかげで、かなり容易にビデオチャットサービスが開発できるようになっていますので、よければ参考にしてください。 開発のポイント、コードだけでなく、開発の動機から、システム構成を決める為、開発前後に行ったビデオチャット関連の技術調査なども載せています。必要最小限の事だけ把握したい方はその辺りは読み飛ばしてください。 開発ビデオチャットサービス: ビデオチャッターズ (http://videochatters.net/) 開発動機 5~6年ぐ

    WebRTCによるビデオチャットサービスの開発 - Qiita
  • WebRTC入門+最新動向

    第15回 HTML5+JS 勉強会� / WebRTC入門+最新動向� / ~格的な普及が始まる前にマスターしておこう~

    WebRTC入門+最新動向
  • MMD on WebGL

    naga_sawa
    naga_sawa 2015/02/18
    CPUが熱くなるな
  • 超簡単に3DCGできるJavaScriptライブラリ作った - aike’s blog

    ブラウザでWebGLが使えるようになって3DCGプログラミングはずいぶん身近なものになりました。と書いてるそばから違和感を感じるくらい生のWebGLをJavaScriptで書くのは敷居が高かったりします。できなくはないけど前提となる知識がかなり必要な感じ。 three.jsが登場したときは、これで普通に3DCGができるということで一気にひろまりました。とはいえ、それでもまだやることは多く、画面に四角い箱を表示する場合以下のようなプログラムを書くことになります。 ・シーンを作成 ・ライトを作成、位置と向きを設定、シーンに追加 ・カメラを作成、位置と向きを設定、シーンに追加 ・マテリアルを作成、色を指定 ・BoxGeometryを作成、サイズを指定 ・メッシュを作成、位置と向きを設定、シーンに追加 ・レンダラーを作成 ・レンダリングループ処理 これらのひとつでも間違えたりパラメーターが適切でな

    超簡単に3DCGできるJavaScriptライブラリ作った - aike’s blog
    naga_sawa
    naga_sawa 2015/02/07
    three.jsのラッパーライブラリ
  • 1meetingの裏側 | さくらのナレッジ

    こんにちは。 福岡でグルー株式会社というスタートアップをやっている迫田(さこだ)です。 先日公開された第一回目の記事では、主に簡単な会社紹介と弊社でのさくらのクラウドの使い方をご紹介させて頂きましたが、皆様ご覧頂きましたでしょうか?まだの方は是非ともご覧くださいね! さて、先日「1meeting(ワンミーティング)」というウェブブラウザのみでビデオチャットが簡単に出来るサービスをリリースしました。今回はこのサービスの裏側で何をやっているのか、技術的な部分をご紹介したいと思います。 1meetingとは まずはこの1meetingというサービスですが、専用ソフトのインストール不要、プラグイン等のインストール不要、ユーザー登録、ログインも不要、とにかく簡単にインスタントなビデオチャットが始められるサービスとしてリリースしました。 また、相手端末との接続がP2Pになっているため、中間のサーバを経

    1meetingの裏側 | さくらのナレッジ
    naga_sawa
    naga_sawa 2015/01/12
    WebRTC チャットシステム 1meeting
  • Unity WebGL x WebSocket で複数クライアント間の大量のオブジェクトを簡単に同期できる仕組みを作ってみた - 凹みTips

    はじめに まだ実験中なのですが、Unity WebGL x WebSocket で大量のクライアント間で大量のオブジェクトを同期できる仕組みを作っています。UNET や Photon によって近いうちに対応されると思うのですが、現状では使えないのと、制限なく扱えたりチューニング次第で速く出来る可能性があるので作ってみようと思いました。 昨日、技術デモを公開しまして、最大で同時に 30 〜 40 人ほどの方に同時に遊んでもらいました。皆様ありがとうございました!200 オブジェクトくらいならフレーム落ちすること無くサクサク動いたと思うので、現状の仕組みや知見などを備忘録も兼ねて共有できればと思います。 開発環境 Mac OS X 10.10.1 Unity 5.0.0b18 デモ いつ止めるかは未定ですが、以下から遊ぶことが出来ます。 hecom.in - このウェブサイトは販売用です! -

    Unity WebGL x WebSocket で複数クライアント間の大量のオブジェクトを簡単に同期できる仕組みを作ってみた - 凹みTips
  • WebRTCにて(S)RTCPが必要な理由

    This post is a No.12 article of WebRTC Advent Calendar 2014 この記事は、WebRTC 2014 アドベントカレンダーの12日目の記事です。 TL;DR RTCPで通信状況(統計情報)を送受信側で伝え合って、音声・映像の品質にフィードバック 特にWebRTCでは、RTCPを暗号化したSRTCPを利用 はじめに WebRTC Meetup Tokyo #3で、WebRTCを支えているプロトコルについて、簡単なLTをしました。 LTの中でDTLS、RTP、SCTPについて喋ったのですが、LTという時間の都合上、説明を端折ったところがあるので、記事ではその補足をします。 ちなみに、資料は以下にあります: RTPは再送を諦めているだけじゃない Slide27枚目で、パケットロスが起きた場合の対応として、「再送をGiveUp」すると説明

    naga_sawa
    naga_sawa 2014/12/15
    WebRTC の裏側で動いているL4プロトコル
  • HTML5日本語訳

    This Version: https://www.w3.org/TR/2018/SPSD-html5-20180327/ Latest Published Version: http://www.w3.org/TR/html5/ Latest Version of HTML: http://www.w3.org/TR/html/ Latest Editor's Draft of HTML: http://www.w3.org/html/wg/drafts/html/master/ Previous Version: http://www.w3.org/TR/2014/REC-html5-20141028/ Previous Recommendation: http://www.w3.org/TR/1999/REC-html401-19991224/ Editors: WHATWG: Ia

    naga_sawa
    naga_sawa 2014/10/31
    HTML5勧告日本語版
  • [速報]HTML5、ついにW3Cの勧告となる

    W3Cが発表したプレスリリース(日語)の冒頭を引用します。 2014年10月28日(アメリカ): ワールド・ワイド・ウェブ・コンソーシアム(W3C)は、ウェブページやウェブアプリケーションを構築する際に使用されるフォーマットHTMLの第5版であるHTML5を勧告として公開し、オープン・ウェブ・プラットフォームの礎を築きました。HTML5は、アプリケーション開発者やアプリケーション産業がこの先何年に渡って信頼するに足る、アプリケーション開発のための機能を提供します。HTML5は今や幅広いデバイスで、そして世界中のユーザが利用可能であり、かつ豊富な機能を持つアプリケーションの開発コストを削減します。 W3Cディレクターを務めるティム・バーナーズ=リーは、「ビデオやオーディオをブラウザ上で見たり、ブラウザ上で通話をすることは、今や当然の事として受け止められている」と述べています。「写真や店舗の

    [速報]HTML5、ついにW3Cの勧告となる
    naga_sawa
    naga_sawa 2014/10/29
    (まだ各ブラウザ先行実装状態だったのか…)
  • WebRTCにおけるNAT越えの課題へのアプローチ - 鈴木うどんの横須賀おもしろ生活

    WebRTCにおけるNAT越えの課題へのアプローチ - Qiita に移転しました。

    WebRTCにおけるNAT越えの課題へのアプローチ - 鈴木うどんの横須賀おもしろ生活
    naga_sawa
    naga_sawa 2014/10/22
    NAT越えには色々と泥臭い手が多数使われている/いろいろ使わないと実用的にならんのよね
  • WebRTCの技術解説 公開版

    第1回NTT-WEST学生向けアプリ開発コンテスト(WebRTC)の勉強会資料です。 ※コンテスト情報はFacebookページよりご覧ください! https://www.facebook.com/nttw.w.con

    WebRTCの技術解説 公開版
    naga_sawa
    naga_sawa 2014/09/26
    WebRTC の解説
  • WebRTC で動く Chord DHT の実装 webrtc-chord を公開しました - 研究会

    概要 分散ハッシュテーブルの実装の一つである Chord を WebRTC を用いて実装しました。 tsujio/webrtc-chord - GitHub Chord とは Chord は分散ハッシュテーブル (DHT: Distributed Hash Table) の実装の一つです。 分散ハッシュテーブルはその名の通りハッシュテーブルを分散して管理するものであり、P2P においては例えばファイル共有ソフトで「あるファイルを提供しているノードはどれか」といった情報をピア間で分散管理し高速に検索できるようにする用途で利用されています。 Chord の解説としては以下のスライドが分かりやすいです。 ChordアルゴリズムによるDHT入門 webrtc-chord その分散ハッシュテーブルの実装の一つである Chord を、Web ブラウザー間で P2P 通信を行う機能を持つ WebRTC

    WebRTC で動く Chord DHT の実装 webrtc-chord を公開しました - 研究会
    naga_sawa
    naga_sawa 2014/09/26
    ブラウザで Chord 実装できる時代になったか/PHPスクリプト置くだけで Chord ってのがあった気がする/orz-DHT か