CSSやHTML、JavaScript等で、似たような挙動をするタグや方法で何が違うのかを解説する・「this vs that」
こえのブログでのPWA ~ PWA編 ~ / PWA Night Vol.4
PWA Night vol.4 ～PWAのミライや活用方法をみんなで考えよう～の資料です。 https://pwanight.connpass.com/event/128434/
JavaScriptでデッドロックを作ってみた
いきなりですが、皆さんは排他制御をご存知でしょうか。排他制御は並列コンピューティングにおける概念であり、複数のプロセスが資源を共有して使用する際に、複数のプロセスが同時に資源を使用している状況（競合）が発生しないように制御する手法です。（この分野にはあまり詳しくないのでまさかり等は歓迎します）。 排他制御の一手法としてロックが知られています。この手法では、ある資源を使用するためにはまずその資源のロックを取得する必要があります。そして、資源を使い終わったらロックを解放します。あるプロセスがロックを取得している間は、別のプロセスは同じロックを取得することができません。よって、ロックを取得できたときのみ資源を使用するようにプログラムを書くことによって、資源に対する競合を防ぐことができます。 典型的には、使用したい資源が他のプロセスに使用されている場合、その資源のロックが解放されるまで待つことにな
iPhone/AndroidのWebアプリで位置情報（GPS）が分かる
iPhone/AndroidのWebアプリで位置情報（GPS）が分かる JavaScriptとFirebaseでリアルタイムに位置情報を共有しよう（3） 「ポケモンGO」の大ヒットで、位置情報を利用したゲームが盛り上がりましたが、位置情報をゲームでしか使わないのは実にもったいないものです。最近では、大抵の人がスマートフォンを持っていますし、会社側で支給する場合でも、格安SIMを活用すれば維持コストも低いものです。そうであれば、これを営業活動や現場管理に活用できれば便利です。そこで、今回は、HTML5/JavaScriptから、スマートフォンのGPSを利用する方法を紹介します。 HTML5/JavaScriptでできること さて、スマートフォンのネイティブアプリの開発も手軽になっていますが、Webブラウザーから利用する「Webアプリ」は、開発が簡単なのが良い点です。Webサイトを公開するのと
初心者でも音楽アプリが作れる！Web Audio APIを簡略化したJSライブラリ「Tone.js」でピアノ鍵盤を作ってみよう！ - paiza times
どうも、まさとらん（@0310lan）です。 今回は、Web Audio APIの実装で面倒な処理をすべて簡略化し、誰でも音楽プログラミングを楽しむことが可能なJavaScriptライブラリのご紹介です。 わずか数行のコードでゼロから「音」を作り出し、メロディを奏でたりエフェクトをかけたりシーケンスを組み立てたり…など、本格的なWebアプリも作れるポテンシャルを秘めていますよ！ 【 Tone.js 】 （多彩なサンプル事例はコチラから確認できます） ■必要なファイルを準備しよう！ 今回は、簡単なサンプルデモを実際に作りながら「Tone.js」の基本的な使い方をご紹介していこうと思います。 作るのは、簡易的な「ピアノの鍵盤」です！ 「Tone.js」を使うと、わずかなコードで「音」を生成して発音させることが出来るので、「鍵盤」のモチーフは初めての学習にちょうど良いと思います。 さて、このサン
描画面を回転させる-HTML5編
描画面を回転させる命令文 文字や画像を回転させる命令は以下のものです。 context.rotate(回転角度) 描画面を回転させます。回転角度はラジアンで指定。 前にも出てきたラジアンです。πが180°だったので、π/2が90°、 π/3が60°ということになります。 文字を回転させる では、以下のスクリプトで、文字を45°回転させてみましょう。 <canvas id="cv1" width="360" height="240"></canvas> <script> var ctx = document.getElementById("cv1").getContext("2d"); ctx.font = "normal 40px Arial"; ctx.textBaseline = "bottom"; ctx.fillStyle = "red"; ctx.fillText("JavaSc
[JavaScript]HTML5 Form Validationの制御と注意事項
概要 HTML5から支援しているForm Validation、皆さんご存知ですよね。 非常に便利ですし、自分もHTML5に感謝しています。👏 サーバでは常にデータを検証するべきですが、追加のデータ検証をWebページ自身で行うことにも多くの利点があります。ユーザがフォームに入力している間にデータを検証することで、ユーザは何らかのミスをしたことを直ちに知ることができます。これはユーザが HTTP のレスポンスを待つ時間を減らし、またサーバで誤ったフォーム入力を扱うことがないようにします。 詳しい内容は以下の記事をご参考してください。 🔗[JavaScript]HTML5 Form Validation しかし、ドンー (OA O; ) ブラウザー別にメッセージが統一されず、実際の案件には、デメリットになっちゃったんです。 やっぱりHTML5 Form Validationに完全に依存され
![[JavaScript]HTML5 Form Validationの制御と注意事項](https://cdn-ak-scissors.b.st-hatena.com/image/square/baeceb09ad56f9e68c0289e5c7e70c331687d51c/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCSmF2YVNjcmlwdCU1REhUTUw1JTIwRm9ybSUyMFZhbGlkYXRpb24lRTMlODElQUUlRTUlODglQjYlRTUlQkUlQTElRTMlODElQTglRTYlQjMlQTglRTYlODQlOEYlRTQlQkElOEIlRTklQTAlODUmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTAyNjQxYzAxODM4NTVhOTQ1Mjg0NWQxMjBjOWM2MDhj%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwbGVlZG9oeXVuZy1kYmEmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWIxYmE3M2ZkOGY5YmFlOWU5MzU5ZDBhNmFhNGI5Mzc1%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dc22fd01cb6b1217171bd24d5597cea7e)
[67]「mediagroup属性」でメディア要素を同期させよう
[67]「mediagroup属性」でメディア要素を同期させよう 最終更新日：2019年01月30日 （初回投稿日：2014年01月17日） mediagroup属性は、HTML5.1で削除されました。 現在どのブラウザも実装していませんのでご注意ください。 この記事とサンプルファイルでは、今でも一応使える「mediagroup.js」を併用していますので、その部分を中心に残しておきます。（2019年1月記） メディア要素（<video> と <audio>）の共通の属性 mediagroup属性は、「メディア要素どうしを同期」ができる属性です。 「mediagroup.js」を併用したほうがいいみたい 「mediagroup属性」は、Chrome が対応しています。（2014年1月） ただし、「mediagroup.js」という JavaScript を併用すると、Firefox, Sa
![[67]「mediagroup属性」でメディア要素を同期させよう](https://cdn-ak-scissors.b.st-hatena.com/image/square/b3ffdfc0ad903f2a7e260635cdff27784f68307a/height=288;version=1;width=512/https%3A%2F%2Fblog-imgs-62.fc2.com%2Fh%2Fo%2Fn%2Fhonttoni%2F131026-1.jpg)
HTML5/Javascriptの画像処理ライブラリまとめ
HTML5(Canvus)、Javascript向けの画像処理ライブラリについてまとめたので紹介します。 続きを読む
HTML5Experts.jp
今年6月にJavaScriptの標準仕様であるECMAScript 2015（ECMAScript 6）が承認され、いよいよ次世代のJavaScript 開発が現実のものとなりつつあります。本特集では、このECMAScript 2015をテーマに、新しいJavaScriptの仕様を広く紹介しつつ、実践的な開発環境の構築や、個々の仕様の詳細解説を取り上げます。
HTML5 CanvasにJavaScriptでリアルタイムに動画を描画。透過レイヤで動画の重ね合わせなど、新たな表現が可能なPC／モバイル対応コーデック「H2MD」［PR］
Webの表現力は、文字の大きさや色を中心に修飾していた時代から美しいグラフィックやアニメーションの活用へと進み、いまでは大きな動画も積極的に取り入れた、豊かな表現力と情報量を備えるWebが数多く見られるようになりました。 最近では広告や解説動画といった例だけでなく、背景いっぱいに動画を使うといった例もあります。モバイルでもゲームやソーシャルメディアなどを中心に積極的に動画を用いた表現が増えています。 GIFやH.264に足りないもの こうした動画表現を実現する技術には複数の選択肢がありますが、モバイルとWebサイトの両方での対応を考えると、GIFアニメーションかH.264のいずれかを選択するのが一般的でしょう。しかしGIFアニメーションは色数が256色と限られ圧縮率も低いため、小さなサイズで数秒程度といった最小限の動画再生にしか向きませんし、音声との同期も困難です。一方、H.264は高精細
HTML5 Push Notifications - HTML5×Pusherで通知を表示 MOONGIFT
チャットやコミュニティサイトをはじめ、Webサイトを訪れているユーザに通知を投げたいと思うケースは多々あります。HTML5のデスクトップ通知を使う手もありますが、サポートしていないブラウザもあります。 そこで試してみたいのがHTML5 Push Notificationsです。サイトの訪問中にしか使えませんが、サーバサイドでも簡単に使えるデスクトップ通知ツールです。 HTML5 Push Notificationsの使い方 送信例。左側の画面で書いた文字が両方の画面に通知として表示されています。 文字を変えれば通知も変更できます。 HTML5 Push Notificationsはサーバサイドからも通知を送信できます。例えばPHPの場合、次のようなコードでできます。 $app_key = 'YOUR_APP_KEY'; $app_secret = 'YOUR_APP_SECRET'; $a
Web Componentsを構成する4つの仕様 ー Web Components基礎編
我々Web開発者がWeb Componentsという言葉を耳にしてから、もう2年程経ったでしょうか。Web Componentsが変えるWeb開発の未来という記事に、「今のWeb開発がどのような課題を抱えているか、それをWeb Componentsがどう解決するか」を書きました。これを踏まえて、本連載ではWeb Componentsの仕様から実装、PolymerやX-TagといったWeb Componentsを支えるライブラリなどの周辺知識まで解説していきます。 Web Componentsを支える4つの仕様 連載第1回目となる本記事では、Web Componentsを支える4つの仕様について解説します。Web Componentsは以下の4つの独立した仕様から構成されます。 Custom Elements – 独自のカスタム要素をユーザーが定義することを可能にする Shadow DOM
JavaScriptプログラミング講座【フルスクリーンについて】
// ------------------------------------------------------------ // フルスクリーン表示が可能か調べる関数 // ------------------------------------------------------------ function DocumentIsEnabledFullscreen(document_obj){ return ( document_obj.fullscreenEnabled || document_obj.webkitFullscreenEnabled || document_obj.mozFullScreenEnabled || document_obj.msFullscreenEnabled || false ); } // ----------------------------
Web Messaging API を使ってみる - Qiita
目的 HTML5 に Web Messaging API というのがある。サーバを介さずブラウザ間で通信ができるインターフェイスが提供されている。 調査がてら把握したことを整理。 概要と用途 Web Messaging API はブラウザの任意のドキュメント間での通信をサポートするインターフェイス。現在、postMessage と MessageChannel という API が用意されている。どちらも任意の window オブジェクト同士で、任意のタイミングでデータの受送信をさせることが可能。 よく使われる用途として、iframe で別ドメインのコンテンツを読み込み、そのドメインと通信させる。 例えば、Facebook のいいねボタンは、 iframe で facebook.com のドメインを埋め込み通信させ、その中の cookie の値を取得してそのブラウザが保持するユーザ情報を表示
Fabric.js·Canvasで2Dオブジェクトを自在に描画/操作 MOONGIFT
HTML5の新機能であるCanvasですが、HTMLとは随分使い勝手が違うためになかなか手出ししづらいのではないでしょうか。2D/3Dのどちらも扱えますが、3Dになるとさらに敷居が高くなりますので、まずは2Dから入るのが良さそうです。 Canvas内で2Dオブジェクトを描くのに使えるライブラリがFabric.jsです。Fabric.jsを使ってCanvasを積極的に使ってみましょう。 Fabric.jsの使い方 デモです。様々な描画が行われています。 SVGを描くこともできます。キャッシュ機能を使うと多くのオブジェクトもスムーズに動かせます。 影をつけるデモです。アニメーションもします。 データをJSONで出力できます。 こちらはSVGでの出力結果。 Fabric.jsでは文字や画像の描画、マウスイベント、アニメーション、オブジェクトのグルーピング、マウスによる変形など様々な操作ができるよ
Webデザイン初心者でも手軽に使えるダイアログ／通知ライブラリALERTIFY.js
Webデザイン初心者でも手軽に使えるダイアログ／通知ライブラリALERTIFY.js：HTML5アプリ作ろうぜ！（12）（1/2 ページ） ダイアログ／アラート／Notification（通知）を見栄え良く簡単に使用できるJavaScriptライブラリ「ALERTIFY.js」の概要と基本的な使い方をサンプルを交えて紹介します。 最近はやりのHTML5、JavaScriptライブラリ、CSS3、API、またそれらを組み合わせたサンプルアプリを解説していく本連載「HTML5アプリ作ろうぜ！」。今回紹介するライブラリは「ALERTIFY.js」です。 ALERTIFY.jsとは 「ALERTIFY.js」は見栄えの良いダイアログ／アラート／Notification（通知）を簡単に使用できるライブラリです。短時間で既存のWebサイト／WebアプリのHTMLに記述できるのも魅力です。また、コントロ
[CSS]動画を背景として表示させ、オーバーレイでコンテンツを配置するテクニック
動画をブラウザいっぱいに背景として表示させ、その上にコンテンツをオーバーレイで配置するテクニックを紹介します。 HTML5 Video 実装 HTML 現在、動画ファイルは二つのフォーマットを用意するのがよいでしょう。WebMはGoogleが推奨するものでChrome, Firefox, Operaでネイティブにサポートされています。 <video autoplay loop poster="polina.jpg" id="bgvid"> <source src="polina.webm" type="video/webm"> <source src="polina.mp4" type="video/mp4"> </video> オーバーレイで表示するコンテンツは、通常通りの実装です。 <div class="overlay"> コンテンツ </div> CSS まずは、動画をフルスクリー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
購入済み動画一覧に検索機能を実装する際に使用したIndexedDBの話 - DMM inside
非依存なHTML5オーディオプレーヤー・「Amplitude.js」
