※この記事は専門学校の講義用に作成されたものです Node.js+expressでHTTPサーバを作成する第3段。今回は最終的にファイル処理について取り上げるのですが、その前に知っておかないとグローバル変数以上のハマりどころである「非同期処理」についても説明し…

※この記事は専門学校の講義用に作成されたものです Node.js+expressでHTTPサーバを作成する第2段。今回は「罠」にも「武器」にもなるポイントについてお話します。 PHPでサーバサイドを実装する際には、Webサーバとしての機能はApacheが受け持つパターンが多…

※この記事は専門学校の講義用に作成されたものです Node.jsでHTTPサーバを作成します。 以前からNode.jsはサーバを作るための言語であるという誤解している方が結構いらっしゃるのですが、標準モジュールだけでも非常に気軽にHTTPサーバをポンッと作成して立…

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

今回はServerless FrameworkでRESTfulAPIを介しS3からデータを取得したり保存したりします。 DynamoDBの回と同様に、プロジェクトの設定ファイルであるserverless.ymlにCloud Formationの書式でS3の設定からIAM周りまで一元管理できます。分かってくると楽し…

今回はServerless FrameworkでRESTfulAPIを介しDynamoDBを触ります。 プロジェクトの設定ファイルであるserverless.ymlにCloud Formationの書式でいろいろ定義できるのでテーブルの作成やIAM周りの設定もすべて一元管理できます。テキストファイルでほとんど…

Lambdaから外部のサーバとHTTPによる通信を行ってみます。 とは言っても特別な制約はありませんので基本的に自由行うことができますが、実行時間によって課金される点に注意が必要です。相手方のサーバからレスポンスが中々返って来ないとその時間分だけ課金…

AWSにServerless Frameworkを利用してRESTfulAPIを作成する際、クエリー文字列などの引数を取得する方法についてメモします。今回はAPI Gatewayのテンプレート関連の機能は使わず、Lambda側ですべて処理します。利用する言語はNode.jsです。

Quora回答シリーズです。 質問 JavaScriptのconstとletの使い分けについてですが、皆様はどのようにされていますか？ https://qr.ae/pNyMvh 8割くらいはconstで用が足りるんですよね。

小ネタです。 csv-writerモジュールを使うとJSON的なデータをCSV形式でかんたんに保存することができます。 // CSVにしたいデータ(オブジェクト) const data = [ {id:1, title:"吾輩は猫である", view:123}, {id:2, title:"坊っちゃん", view:456}, {id:3, t…

小ネタです。 JavaScriptのグローバルオブジェクトには様々なメソッドが最初から用意されています。例えば文字列を扱うStringには、検索置換するreplace()や一部を取り出すslice()などです。ここに自分で用意したオレオレなメソッドを追加することができます…

小ネタです。 結論から言うと、JSON.stringify()の第2引数にnull、第3引数に数値を指定することで人間がパッと見て分かるよう整形した文字列が返されます。 const data = [ { "season": "202004", "title": "乙女ゲームの破滅フラグしかない悪役令嬢に転生し…

AWSでRESTfulAPIをAPIGateway+Lambdaで作ろうとすると、ブラウザ上でGUIをいじくるわけですが操作感が独特で慣れるまでちょっとばかし辛いものがあります。そんな時に活躍してくれるのが「Serverless Framework」。YAMLをチョロっと書くだけでそのあたりの設…

前回作成したチャットに機能追加を行います。今回はユーザー名の入力に対応しつつ、Socket.ioサーバから送られてきた内容が自分自身が送ったものかを判定する機能を追加していきます。 次のデモ動画の通り最初に名前を入力、自分自身が発言すると文字色が青…

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

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

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

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

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

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

今回は音声ファイルを音量が徐々に上がっていく「フェードイン」する形で再生を開始、逆に音量が徐々に下がっていく「フェードアウト」し再生を終了することに挑戦してみます。 通常は以下のようにplay()で開始するわけですが、これだと音量MAXで始まってし…

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

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

HTML5で音声を再生するには単純にaudioタグを使うだけで実現できますが、今回はJavaScriptから再生や停止をコントロールしたいと思います。

Google Apps Scriptを利用して、GMailのメールを自動的に既読＆アーカイブします。 きっかけとしてはGoogleカレンダーから毎日送られてくる「本日の予定メール」なんですが、件名を見るだけで大体把握できてしまうためほとんど開かないんですよね。でも毎日…

みんな大好きGoogleAppsScriptで、2020年2月よりES2015以降のナウい構文が利用できるようになりました。 Historically, Apps Script has been powered by Mozilla's Rhino JavaScript interpreter. While Rhino provided a convenient way for Apps Script t…

Canvasを利用して簡単なパラパラアニメを作成してみます。 原理としては授業中にノートや教科書の端に描いた絵をパラパラとめくって動かしたのと同じ。Canvasに描画したあとに適当な時間待機後、Canvasをお掃除したあとに少しだけ動かした絵を描画…をひたす…

Canavsに三角形を描画します。 HTML5では四角形と円、線以外を描画する専用のメソッドは用意されていませんので、線を組み合わせることで三角形などのの図形を描くことができます。

Canavsに線を描画します。 ここでは純粋な直線と、曲線として円弧、ベジュ曲線を取り上げます。

Canavsに円を描画します。ここでは正円と、一部が欠けた円を取り上げます。