1. /
  2. 2020年

2020年 の投稿一覧

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

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

続きを読む

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

以前取り上げた通り、音声ファイルを再生したり止めるだけであれば<audio>タグとJavaScriptの組み合わせで簡単に実現できるのですが、一歩踏み込んだことをしようと思うと様々な罠が襲いかかりもだえ苦しむことになりますｗ WebAudioAPIを使えばあらゆることが自由自在に出来ますがこいつは学習コストが半端なく使い始めるにはそれ相応の覚悟がいります。

というわけで、若干凝ったことをしたいがWebAudioAPIは避けて通りたい場合には迷うことなく便利ライブラリを使うのがオススメ。今回はこの手の用途ではお約束な「howler.js」を利用します。
続きを読む

[HTML5] 音声をフェードイン・フェードアウトする – audioタグ編

今回は音声ファイルを音量が徐々に上がっていく「フェードイン」する形で再生を開始、逆に音量が徐々に下がっていく「フェードアウト」し再生を終了することに挑戦してみます。

通常は以下のようにplay()で開始するわけですが、これだと音量MAXで始まってしまうため唐突感が生まれてしまう場合があります。停止する際にpause()を実行する場合も同様です。それぞれ「カットイン」「カットアウト」と呼ばれますが、意図したものであればもちろんこれで問題はありません。

<audio id="bgm" src="xxx.mp3" preload></audio>

<script>
  document.querySelector("#bgm").play():   // 唐突に再生される(カットイン)
  document.querySelector("#bgm").pause():  // 唐突に止まる(カットアウト)
</script>

SE(効果音)やジングルなんかはカットインがほとんどですが、しんみりした雰囲気をBGMで出したい場合はフェードイン/フェードアウトを多用することになりますね。

※ご注意※
この方法はiPhoneやiPadなどiOSのWebブラウザでは利用できません。もし対応する場合にはWebAudioAPIを採用する必要があります。

続きを読む

[Quora] AWSやGCPなどのデータセンターが東京や大阪に集中するのはなぜ？

Quora回答シリーズです。

質問

MS、AWS、Google、オラクルなどのプラットフォーマーが大阪へリージョンを立てていますが、何故大阪と東京なのでしょうか？もう少し地方の方が土地代も安いし、災害にも強い場所があると思うのですが。
https://qr.ae/pXtqlk

地方に建てる事例もあるのですが、確かに巷で話題のクラウドは概ね東京や大阪に集中してますよね。

続きを読む

[HTML5] Canvasを画像に変換しサーバへ送信する

Canvasに描画した内容を画像としてサーバへ送信し、そのままサーバに保存してみます。

今回は入力したテキストがそのままCanvasに描画される簡単なサンプルを用意しました。文字色と背景色もおまけで変更できます。もう少し頑張るとバナー画像ジェネレーターとか作れそうですね。

サーバ側のプログラムはPHPを採用していますが、他の言語でも似たような処理になります。
続きを読む

[HTML5] 音声ファイルの事前ダウンロード – audioタグ編

前回はaudioタグをJavaScriptで操作しましたが、事前にダウンロードが完了した状態で再生を開始することができませんでした。例えばボタンをクリックした瞬間に鳴らす場合にラグが発生したり、再生途中で停止(ダウンロード待ち)する恐れがあります。今回はダウンロードが完了しないと音声が再生できないような処理を追加します。

この手の処理はWebAudioAPIを用いたサンプルがネット上には転がっていますが、単にダウンロードされたことを検知したいだけで利用するには気が重いというか正直などころ面倒なので、前回同様audioタグを活かす方向で作成します。
続きを読む

[Quora] 体内に埋め込むデバイスってどうなの？

Quora回答シリーズです。

質問

体内に埋め込むタイプのチップや機器「インプランタブル（埋め込み型）」デバイスをどう思いますか？身体的にも時間の自由を必要以上に奪うスマホに不自由を感じているからです。
https://qr.ae/T64UiL

現代では抵抗のある人の方が多いのだろうけど、数十年後にはみんな当たり前のようにやってる気がするんですよね。
続きを読む

[GAS] Gmailで一定期間経過したメールを自動で既読＆アーカイブ

Google Apps Scriptを利用して、GMailのメールを自動的に既読＆アーカイブします。

きっかけとしてはGoogleカレンダーから毎日送られてくる「本日の予定メール」なんですが、件名を見るだけで大体把握できてしまうためほとんど開かないんですよね。でも毎日送って欲しい。すると未読メールがどんどんたまっていくの気持ち悪い…が自分で定期的にアーカイブするのは面倒。というわけで自動化することにしたというわけです。

我ながら怠惰すぎるｗ
続きを読む