HTML5

[JavaScript] 操作を一定時間しないとタイムアウト扱いにする

Webブラウザとサーバー間で常時、または一定間隔で通信を行っている場合、ユーザーが端末の前から長時間離れた際などに通信を停止したい場合があります。最新の情報をサーバからもらってきても使う人がいなければムダですからね。 サーバ負荷的な面で実装す…

[HTML5] ZipファイルのMIMEタイプがOSによって異なる件

最近のHTMLはファイル選択画面でファイル形式をこちらで指定した物以外は選択不可にできます。例えば次のコードではJPEGとPNG画像だけが選択可能になります。 <form> <input type="file" accept="image/jpeg,image/png"> </form> PCでZipファイルをサーバへアップロードするサービスを作っていたのですが、このaccept属性に…

[JavaScript] フォーム部品に値をセットする(まとめ)

前回に引き続きフォーム部品のまとめです。今回はプログラム側から値をセットしたり選択状態をコントロールするお話です。 前回のフォームに入力された値を取得したいという方は以下をどうぞ。 blog.katsubemakito.net

[JavaScript] フォーム部品の入力値を取得する(まとめ)

Webサービスを作る際に必ずと言ってよいほど利用するフォーム部品ですが、ユーザーに入力された値を取得する際にお恥ずかしながら自分でもたまにど忘れすることがあるのと、新旧の情報がごっちゃになっているため脳内の整理も兼ねてまとめておきます。 フォ…

[HTML5] 異なるオリジンのWebStorageの内容を取得する

WebStorage(localStorageとsessionStorage)は同一オリジン内のデータしか読み書きできません。名前空間を分けることでデータの衝突を防いだり、大切なデータを他のサイトから覗き見られることから守ってくれています。 しかしWebサービスを開発していると、…

[JavaScript] 数値がゾロ目か判定する

小ネタです。 指定された数値がゾロ目かどうかを判定する正規表現を試してみます。説明するまでも無いと思いますが「1111」「8888」など同じ数だけで構成された数値をゾロ目と言います。 結論から言うと以下の通り。 /** * ゾロ目判定 * * @param {number} n…

[HTML5] リンク先のファイルを超簡単にダウンロード指定する - download属性

なんとa要素にdownload属性を追加するだけで、ページ(ファイル)を表示するのではなく、Webブラウザにファイルを保存するかダイアログを表示させダウンロードを促すことが可能です。 <a href="foo.txt" download>foo</a> download属性にファイル名を指定すれば、デフォルトのファイル名として…

[JavaScript] オンライン・オフラインを判定する

小ネタです。 スマホを使いながら電車などで移動していると通信がプツプツ切れます。家でPCを使う場合と違って通信状況が安定しません。そんな時に活躍するのがブラウザがオンラインかどうかがわかる navigator.onLine です。 このプロパティを参照するだけ…

[JavaScript] 連想配列に forEach を使用する

小ネタです。 forEachは配列用のため、連想配列(ハッシュ)には通常使うことができません。そんなときにはObject.keys()を介すことで利用が可能になります。 const hash = { apple: 100, banana: 130, orange: 98 } const result = [ ] Object.keys(hash) .fo…

[JavaScript] 配列の値が条件を満たすか検証する - some(), every()

every()とsome()は配列内の要素をテストし、条件を満たしていれば最終的にtrue、満たしていなければfalseを返します。 /** * 偶数チェック */ const list = [1, 2, 3, 4, 5] const check = value => ((value % 2) === 0) // テストを行う const check1 = lis…

[JavaScript] 配列の全要素に処理を行い新しい配列を作成する - map()

map()を利用すると、元になった配列の要素を順番に処理していき新しい配列を生み出すことができます。mapは元になった配列を変更しません。 /** * 2乗する */ const list = [1, 2, 3, 4, 5] const newlist = list.map( value => value * value) // [1, 4, 9,…

[JavaScript] 配列からひとつの値を生成する - reduce()

reduce()は配列内の値を順番に処理していき、最終的に1つの値を生成することができます。 /** * 配列の値をすべて足す */ const list = [1, 2, 3, 4, 5] const sum = list.reduce( (prev, current) => prev + current ) // 15 console.log(sum) returnした値…

[JavaScript] 配列から特定の要素だけを取り出す - filter()

filter()は配列の要素を順番にテストしていきtrueが返された要素だけの新しい配列を返却します。 /** * 配列から偶数だけを取り出す */ const list = [1, 2, 3, 4, 5] const newlist = list.filter( value => ((value % 2) === 0) ) // [2, 4] console.log(n…

[HTML5] アドレスバーのURLを変更する - history.pushState()

SPA(Single Page Application)でWebページを開発している場合、ページの情報をJavaScriptで直接書き換えるたブラウザのアドレスバーに表示されているURLは常に同じです。これだとブラウザのバックボタン(戻るボタン)が利用できなかったり、ブックマークや外…

[HTML5] JavaScriptでtitleタグを変更する

小ネタです。 titleタグの内容を指定した文字列に変更する場合は2つの方法があります。 まずはdocument.titleプロパティに直接値を代入する方法。基本的にはこちらを利用します。 document.title = 'foo' 次にtitle以外の要素を変更するときと同様にquerySel…

[HTML5] 要素をフェードアウト/フェードインする

指定したHTMLの要素を徐々に表示する「フェードイン」と、徐々に非表示にする「フェードアウト」をJavaScriptで実装します。 www.youtube.com ここでは大きく2種類の方法を取り上げます。 HTML5から登場したWeb Animation APIを利用したものと、はるか以前か…

[JavaScript] 文字列中の絵文字だけをHTML Entityへ変換する

Webブラウザ上で文字列中に含まれたUnicodeの絵文字だけをHTMLEntityへ変換します。 const text = '🍣がうまい😁!'; // 対象の文字列 const result = emoji2HTMLEntity(text); // 変換 console.log(result); 以下のような実行結果になります。 例えばすでに存在…

[HTML5] WebWorkerで並列処理を行う - 共有ワーカー編

前回はWebWorkerの中でも最もシンプルに並列処理を扱うことができる「専用ワーカー (Dedicated Worker)」について取り上げました。今回はiframeや他のウィンドウ(タブ)などから起動中のWorkerを利用することのできる「共有ワーカー(Shared Worker)」について…

[HTML5] WebWorkerで並列処理を行う - 専用ワーカー編

JavaScriptは非同期処理だから、複数同時に処理してるんでしょ?……と思っていた時期がありましたw JavaScriptの非同期処理とは時間のかかる処理の待ち時間で他のことをやってしまおうという物で、雑に言うなら実行する順番をコントロールする仕組みのことで…

[JavaScript] Bowser 2.xでOSやブラウザを判定する

Webブラウザの状況が目まぐるしく変わっている昨今、常にすべてのブラウザへ対応出来るとは限りませんよね。というか現実的に出来ませんw そこで対応しているブラウザかどうかをチェックするわけですが、この手の判定は陳腐化してしまう恐れがあるため、事…

[HTML5] IndexedDBに画像ファイルを保存する - Dexie.js

IndexedDBは様々なデータ型に対応しておりblobも例外ではありません。つまり画像ファイルなどバイナリ形式の保存が可能というわけです。IndexedDBへ格納しておけば例えオフライン状態であっても好きなときに取り出して利用することができます。 単純にサーバ…

[HTML5] IndexedDBでデータの保存や読み込みを行う - Dexie.js編

JavaScriptがブラウザ内にデータを保存する場合、ちょっとした物であればWebStorageが簡単に使えて便利なのですが、この子は5〜10Mbyte程度の容量しかありません。また純粋なKVSであるがためにそれ以上のことはもちろんできません。 そんな時に利用するのがI…

[HTML5] WebStorageにデータの保存や読み込みを行う

ブラウザの内部にデータを保存する方法として、これまではCookieが使われてきましたがこれは主にサーバとのやり取りで利用する物。そこでJavaScriptから手軽に扱えるデータの保存領域としてHTML5ではWebStorageが登場しました。 今回はこのWebStorageの基本…

[初心者] 最近のJavaScriptの文法をおさらいする

※この記事は専門学校の講義用に書いたものです JavaScriptはもともとWebブラウザの上で動作するちょっとした処理を行うために登場しました。その後JavaScritの重要性が高まるにつれ、最近の言語に搭載されている機能が無いことに開発者の不満が募ります。そ…

[HTML5] Fetch API でファイルをアップロードする

正直、ファイルのアップロードは考慮すべきことが多すぎてあまり関わりたくないのですが、そうも行かないのが世の定めw 今回はFetchAPIを利用してサクッとファイルをアップする手法についてまとめます。 サーバ側はPHPで実装しますが、考え方は他の言語でも…

[HTML5] Fetch API で GET/POST で通信する

Ajaxによる通信は長きに渡りXMLHttpRequest(XHR)で書かれていましたが、HTML5からFetchAPIが実装されずいぶんとシンプルに記述することが可能になりました。今回は基本的な使い方についてまとめておきたいと思います。

[HTML5] 音声の発生源をステレオで調整する - howler.js編

映画などの映像作品やゲームでは、左で発生した音は左側のスピーカーから、右側の音は右側のスピーカーから強く出力した方が臨場感が増すため日常的に利用されています。HTML5ではWebAudioAPIを簡単に扱えるHowler.jsで手軽に実現することができます。

[HTML5] 複数の音声ファイルを1つにまとめる AudioSprite - howler.js編

複数の画像を1枚にまとめるCSSスプライトはかなり前から利用されていますが、今回はその音声ファイル版である「AudioSprite」を作成してみます。 音声ファイルの作成にはNode.jsのモジュール「audiosprite」を、再生には「Howler.js」を利用します。

[HTML5] 音声再生中に再生時間を表示する – howler.js編

WebAudioAPIを簡単に扱えるHowler.jsにはtimeupdateイベントがありません。もし再生時間に合わせて何らかの処理を行う場合には自分でがんばる必要があります。今回はsetInterval()を使ってかんたんな実装を行ってみます。

[HTML5] 音声ファイルをJSで再生/停止する - howler.js編

以前取り上げた通り、音声ファイルを再生したり止めるだけであればタグとJavaScriptの組み合わせで簡単に実現できるのですが、一歩踏み込んだことをしようと思うと様々な罠が襲いかかりもだえ苦しむことになりますw WebAudioAPIを使えばあらゆることが自由…