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

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

サーバ負荷的な面で実装するケースが多い印象ですが、スマホアプリの「クラッシュ・オブ・クラン」では無操作状態が続くと強制的にアプリを再起動せよと表示されます。このゲームの場合はログイン状態のときは他プレイヤーが攻め込めないというルールがあるため、それを悪用されないためだと思われます。

というわけで、今回は何らかの事情で一定の時間ユーザーが何も操作を行わなかったかどうかをクライアント側(Webブラウザ)でかんたんに判定できる方法を試してみます。

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

最近のHTMLはファイル選択画面でファイル形式をこちらで指定した物以外は選択不可にできます。例えば次のコードではJPEGとPNG画像だけが選択可能になります。

<form>
  <input type="file" accept="image/jpeg,image/png">
</form>

PCでZipファイルをサーバへアップロードするサービスを作っていたのですが、このaccept属性によって制限を付けると特定の環境でZipファイルが指定できない現象が発生し困ったことに。久しぶりにブラウザでZipファイルを扱ったので混乱したのですが、そういえば環境によってZipのMIMEタイプが違うのでした。

というわけで割と最近のOSとブラウザ毎にZipファイルのMIMEがどのようになっているか調査します。

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

前回に引き続きフォーム部品のまとめです。今回はプログラム側から値をセットしたり選択状態をコントロールするお話です。

前回のフォームに入力された値を取得したいという方は以下をどうぞ。 blog.katsubemakito.net

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

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

フォーム部品に値をセットしたり、選択状態をコントロールしたい場合は以下をどうぞ。 blog.katsubemakito.net

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

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

しかしWebサービスを開発していると、サブドメイン間などでWebStorage内のデータを共有したいことがあります。そんなときに使うのが window.postMessage。指定したオリジンにだけWebStorage内のデータを渡したり、逆にデータを受け取ってWebStorage内に保存するといったドメインをまたいでの通信が可能になります。

※同一オリジンとは「スキーム(http)」「ホスト(example.com)」「ポート番号(443)」のすべてが同じ場合を言います。詳しくはこちらをどうぞ

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

小ネタです。

指定された数値がゾロ目かどうかを判定する正規表現を試してみます。説明するまでも無いと思いますが「1111」「8888」など同じ数だけで構成された数値をゾロ目と言います。

結論から言うと以下の通り。

/**
 * ゾロ目判定
 *
 * @param {number} num
 * @returns {boolean}
 */
function isZorome(num){
  return String(num).match(/^([0-9])\1+$/) !== null
}

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

なんとa要素にdownload属性を追加するだけで、ページ(ファイル)を表示するのではなく、Webブラウザにファイルを保存するかダイアログを表示させダウンロードを促すことが可能です。

<a href="foo.txt" download>foo</a>

download属性にファイル名を指定すれば、デフォルトのファイル名として利用できます。

<a href="foo.txt" download="bar.txt">foo</a>

以下から実際にお試しいただけます。

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

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

このプロパティを参照するだけでブラウザがネットワークに接続しているかチェックすることができるというわけです。

if( navigator.onLine ){
  console.log('オンライン')
}
else {
  console.log('オフライン')
}

WebStorageなどと組み合わせ、オフラインであればローカルにデータを一時的に保存し、オンラインになったら同期をするといった処理が実現できます。