[Web] Webページ上でオンライン/オフライン状態を知る、ネットワークの変化に気付く - YoheiM .NET
こんにちは、@yoheiMuneです。 最近知った驚いた機能で、なんとJavaScriptでネットワーク状態を把握する機能があります。 今日はその紹介をブログを書きたいと思います。 現在のネットワーク状態をJavaScriptで知る なんと、以下の１行で現在のネットワーク状態が、オンラインかオフラインかを知ることが出来ます。 var isOnline = navigator.onLine; こんな簡単にできる事を知ってビックリしました。onLineプロパティを使えるか否かも考慮して、以下のようなコードを書くと、 現在のネットワーク状態を知ることが出来ます。 if (navigator.onLine === true) { alert("current network status is online"); } else if (navigator.onLine === false) { a
![[Web] Webページ上でオンライン/オフライン状態を知る、ネットワークの変化に気付く - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/2cc5747ae72ce23305ad10c40e244a5ff6bd3427/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F139.png)
web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
HTML［input要素］ローカル日時の入力欄を表す - TAG index
各属性の概要は、上記表のリンク先をご覧ください。（input要素のページにリンクしています） どの部品タイプにどの属性を指定できるかは、下記の対応表で確認することができます。 属性と部品タイプの対応表 この部品タイプの特徴 ローカル日時を入力するための入力欄です。 （実際の表示例） この部品タイプに対応しているブラウザでは、日付はカレンダーで、時間は上下のスライドによって入力することができます。 value属性（初期値）を指定しない場合は次のように表示されます。（ブラウザにより表示内容は異なります） （実際の表示例） 日時の書式 入力する日時、およびvalue属性、min属性、max属性の値は、次の書式で記述する必要があります。 YYYY-MM-DDThh:mm:ss 2022-05-21T20:40:30 年は4桁、月・日と時・分・秒は各2桁で入力します。（時間は24時間表記） 年月日と
Making Fullscreen Experiences
We have the ability to easily make immersive fullscreen websites and applications, but like anything on the web there are a couple of ways to do it. This is especially important now that more browsers are supporting an "installed web app" experience which launch fullscreen. Getting your app or site fullscreen #There are several ways that a user or developer can get a web app fullscreen. Request th
HTML5 Audio Output Patching
I was wondering if there is a way to control audio output device patching in HTML5/JavaScript? Like, if the user wanted to have one sound in my web app to go out of one audio device, and another sound out of a different audio device. I know the user can set the default output device on their computer, but for the web app I'm working on, I would like them to be able to send individual sounds to ind
【HTML5】METAタグ等のHTML4との違い - TASK NOTES
仕事ではHTML4とHTML5の両方を使っていますが、よくmetaタグの記述法とか変わっている所がわからなくなります。まだ他にもありますが基本的にどのHTMLにも入ってくるであろうものをまとめてみました。 DOCTYPEの指定 HTML4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> かなりシンプルになりました。 HTML5 <!DOCTYPE html> 文字エンコーディングの指定 HTML4 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> HTML5でも上記の記述で問題ないですがcharset属性を使用すれば短くする事が可能です。 HTML5
SEO嫌いにお送りするSEO策。これでもうSEOについてしばらく考えなくて良いぜ！！ - Qiita
SEO好きですか？私は嫌いです。そんな事に取り組むよりも仕組みやコンテンツの改善に取り組みたいです。今回はそんなSEO嫌いにお送りする、SEO対策集です。やってられないSEOは１日で終わらせてもっと生産的な仕事に集中しましょう！ まずは結論から 下記をテンプレートにしていただければ良いです。google検索表示もfacebook表示も上手くいきます。twittercardの表示だけは公式サイト（日本語）より申請がいるのでそれだけしておきましょう。 <title>Qiita - プログラマの技術情報共有サービス</title> <meta content="Qiita - XXX" name="title"> <meta content="ブログ記事詳細. 120字以内を心がけよう。その中でも最初の４０字は大事。" name="description"> <meta content='キーワ
HTML5 is a W3C Recommendation
The HTML Working Group today published HTML5 as W3C Recommendation. This specification defines the fifth major revision of the Hypertext Markup Language (HTML), the format used to build Web pages and applications, and the cornerstone of the Open Web Platform. "Today we think nothing of watching video and audio natively in the browser, and nothing of running a browser on a phone," said Tim Berners-
［速報］HTML5、ついにW3Cの勧告となる
W3Cが発表したプレスリリース（日本語）の冒頭を引用します。 2014年10月28日(アメリカ)： ワールド・ワイド・ウェブ・コンソーシアム(W3C)は、ウェブページやウェブアプリケーションを構築する際に使用されるフォーマットHTMLの第5版であるHTML5を勧告として公開し、オープン・ウェブ・プラットフォームの礎を築きました。HTML5は、アプリケーション開発者やアプリケーション産業がこの先何年に渡って信頼するに足る、アプリケーション開発のための機能を提供します。HTML5は今や幅広いデバイスで、そして世界中のユーザが利用可能であり、かつ豊富な機能を持つアプリケーションの開発コストを削減します。 W3Cディレクターを務めるティム・バーナーズ＝リーは、「ビデオやオーディオをブラウザ上で見たり、ブラウザ上で通話をすることは、今や当然の事として受け止められている」と述べています。「写真や店舗の
実はずっとWebRTCをウォッチしていたので大局的な話を書いた - 鈴木うどんの横須賀おもしろ生活
WebRTCについての話を社内勉強会でしてきたを見て、自分も何かを書いてみようかと思った。使い方やAPIの詳細について書かれた記事は多いが、大局的な話題を書いた記事はあまり見かけないので、そのような観点から公知になっている情報を中心に書いていこうと思う。 する話 僕のWebRTCの解釈 既存の通信技術との違い WebRTCのシグナリングの特徴点 今のWebRTCの情報源 今のWebRTCの妥当な使い道 しない話 VoIPデバイスとの相互接続のしかた 効果的な使い方 効果的なコード とても長い本文 WebRTCとは何かといえば、たとえばHTML5周辺技術であるとか様々な見方があるが、僕はテレフォニーの世界感をWebブラウザ上に移殖したフレームワークだと認識している。WebRTCは、サーバとクライアントからなる三角形構造あるいは台形構造を構成する。 それらは、かつてのIP電話のプロトコルである
Web Audio APIについて（３）「音楽データを可視化する」 - ハードコイルド・ワンダーランド
最近、Device関連のHTML5 APIが盛り上がっています。 この記事はWeb Audio APIに関する記事の続きです。 頑張ると、色々とスゴいコトもできてしまうWeb Audio API。 最終的にHTML5 Advent Calendar向けにまとめますので、まとめて読みたい方は12/7までお待ちください。 とりあえずデモ 一番簡単な「音楽データを可視化する」デモです。 startボタンを押すとSVG girl themeが流れます 流れている音楽のTimeDomainDataがcanvas上にリアルタイムで描画されます。 これはなに？ RealTimeAnalyserNodeを使って収集した音楽データのTimeDomainDataをcanvas上に描画しています。 RealTimeAnalyserNodeはAudioContextから生成するオブジェクトですので、 例によってA
Audio Visualization with Web Audio, Canvas and the Soundcloud API
Audio visualization Update 05/02/14 - This demo got featured on Google’s Chrome Experiments website! This has generated a lot more interest (as in hundreds of views per day rather than one or two per week) so hopefully we will see some improvements from the community via the GitHub repo - I’ve already had a first pull request adding some very cool new functionality! Update May 2015 - As of latest
Web Music Documentation
Web Music とは, Web (ブラウザ) をプラットフォームにした音楽アプリケーション, あるいは, そのような Web アプリケーションを実装するために必要となる, クライアントサイドの JavaScript API の総称です. これは, 一般的な技術用語ではなく, ある種の技術マーケティング的な造語です. 具体的には, 以下のような, クライアントサイド JavaScript API の総称です. Web Audio API HTMLMediaElement (HTMLAudioElement) WebRTC Web MIDI API WebCodecs API Web Audio API, HTMLMediaElement, WebRTC に関しては, 本サイト制作開始時点の 2023 年時点で W3C recommendation となっており, モダンブラウザであれば利
web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
タッチデバイスを指で快適に操作させるために
タッチデバイスのUIの特徴とその癖から、HTML5のWebアプリでUXを実現するポイント、Webでのタッチイベント仕様を見てみよう。 前編のタッチUXを実現する7つのポイントでは、タッチデバイスの特徴と、その上でタッチUXを実現する7つのポイントについて説明しました。後編では、そのようなUXを実現するためにWebアプリでのタッチ仕様や、実装のポイント、今後の動向など、より技術的な面から解説します。 W3Cによるタッチイベントの標準化 Webアプリケーション向けのタッチイベント仕様はW3Cによって標準化が進められていて、執筆時（2012/10/20 現在）の段階で、勧告候補となっています（最新のものはW3Cの明示する「Touch Events version 1」を確認してください）。まだ仕様は確定していませんが、最新のiOS、Androidのブラウザでほぼ仕様通りのものが使用できます。タッ
bestvpn.org
Drag & drop not supported, but you can still upload via this input field: File API & FileReader API not supported XHR2's FormData is not supported XHR2's upload progress isn't supported Upload progress: 0 Drag an image from your desktop on to the drop zone above to see the browser both render the preview, but also upload automatically to this server.
壁を越えろ！WebRTCでNAT/Firewallを越えて通信しよう
こんにちは！がねこまさしです。前回は複数人の同時通話まで実現しました。社内で使うには十分なレベルです。 しかし本格的な企業ユースとなると、まだまだ障害があります。会社と家、自社と別の会社さんなど、実際に通信しようとするとNATやFirewallといった壁が立ちはだかります。 NATを越えよう NATの役割は NAT(+IPマスカレード)は企業だけでなく、一般家庭でも使われています。ブロードバンドルーターやWiFiルーターでは、1つのグローバルIPアドレスを、複数のPCやデバイスで共有することができます。このとき、NATには2つの役割があります。 インターネットにつながったグローバルなIPアドレスと、家庭内/社内のローカルなネットワークでのIPアドレスの変換 複数のPC/デバイスが同時に通信できるように、ポートマッピングによるポート変換 WebRTCでNAT越しに通信すること考えてみましょう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
241543 - chromium - An open-source project to help move the web forward. - Monorail
visualize mediastream which is coming from a remote peer connection
AudioContext: createMediaElementSource() method - Web APIs | MDN