2020年 3月 の投稿一覧

はじめてのSocket.io #1 「リアルタイムなチャットを作る」

Node.jsのキラーソフトの一つとも言われて久しいSocket.ioを使ってリアルタイム通信を行います。コツさえ分かれば非常に簡単に開発できてしまうのでプロトタイプや小規模なプロジェクトにオススメ。

今回は以下の動画のように複数のクライアント間でリアルタイムに通信が行える簡易チャットをHTML+JavaScriptで作成してみます。

続きを読む

恐怖のメール「Google AdSense: お支払いが正常に処理されませんでした」

このブログは主にAdSenseの収益で運営してまして、サーバ代や専門書代などに充てさせもらってます。まぁそれで消える程度の売上なんですが年間で見るとバカにできないわけです。そんなところに届いたのがGoogleからのこんなメール。

お支払いが正常に処理されませんでした

2020年3月23日に、お客様の Google AdSense アカウントにお送りした金額が正常に処理されませんでした。理由について銀行からの説明はありませんでした。お取引先の銀行に詳細をお問い合わせください。お取引先の銀行か金融機関にお問い合わせのうえ、この問題を解決してください。

( ゚д゚)ファッ!?

一瞬何が起こったのか様々なことが脳裏をよぎりましたw これまで何度も振り込みがあった銀行口座なので入力間違いという可能性はない。もしや銀行口座を悪い人にどうかされちゃったのだろうか…とか銀行から違法な取引だと思われてる!?とか朝っぱらから脳みそフル回転でした。
続きを読む

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

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

サーバ側はPHPで実装しますが、考え方は他の言語でも流用できるのではないかと思います。
続きを読む

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

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

続きを読む

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

以前取り上げた通り、音声ファイルを再生したり止めるだけであれば<audio>タグとJavaScriptの組み合わせで簡単に実現できるのですが、一歩踏み込んだことをしようと思うと様々な罠が襲いかかりもだえ苦しむことになりますw 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を採用する必要があります。

続きを読む