Webブラウザとサーバー間で常時、または一定間隔で通信を行っている場合、ユーザーが端末の前から長時間離れた際などに通信を停止したい場合があります。最新の情報をサーバからもらってきても使う人がいなければムダですからね。
サーバ負荷的な面で実装するケースが多い印象ですが、スマホアプリの「クラッシュ・オブ・クラン」では無操作状態が続くと強制的にアプリを再起動せよと表示されます。このゲームの場合はログイン状態のときは他プレイヤーが攻め込めないというルールがあるため、それを悪用されないためだと思われます。
というわけで、今回は何らかの事情で一定の時間ユーザーが何も操作を行わなかったかどうかをクライアント側(Webブラウザ)でかんたんに判定できる方法を試してみます。
続きを読む
AWS S3を単なるストレージとして使う際には問題とならないのですが、S3をWebサーバとして使う場合はファイルのMIMEタイプ(Content-type)を正しく指定しておかないとWebブラウザからダウンロードを求められるなど意図した通り動いてくれないことがあります。
この指定方法はシンプルでS3.putObjectを実行する際のパラメーターとして渡すだけ。
const params = {
Bucket: 's3.example.com',
Key: 'foo.html',
Body: await fs.readFile('foo.html'),
ContentType: 'text/html'
}
await S3.putObject(params).promise()
このときに予めMIMEタイプがすべて判明していれば良いのですが、不特定多数の種類のファイルを扱うような場合にはファイル名から拡張子を取り出して判定して……といった処理が必要になります。難しくは無いけどゼロから書くのは正直めんどくさいｗ
そこで今回はNode.js版のAWS SDKを用いてこのMIMEタイプを自動で判定する方法をまとめます。
※ちなみにCLIから使う場合はawsコマンド（が内部で使っているPythonのライブラリ）が自動的に判定してくれています。
続きを読む
AWS LambdaはRESTful APIの開発時だけではなく、特定のイベントをトリガーとして処理を行うことができます。今回はServerlessFrameworkを利用し、S3に新しくオブジェクトが追加された際に関数を起動するところまでをまとめます。
続きを読む
前回に引き続きフォーム部品のまとめです。今回はプログラム側から値をセットしたり選択状態をコントロールするお話です。
前回のフォームに入力された値を取得したいという方は以下をどうぞ。
Webサービスを作る際に必ずと言ってよいほど利用するフォーム部品ですが、ユーザーに入力された値を取得する際にお恥ずかしながら自分でもたまにど忘れすることがあるのと、新旧の情報がごっちゃになっているため脳内の整理も兼ねてまとめておきます。
フォーム部品に値をセットしたり、選択状態をコントロールしたい場合は以下をどうぞ。
ユーザー登録やログインなどで不安になるのが「ボット」の存在です。
検索エンジンのクローラーなど悪意の無いものであればよいのですが、機械的に大量のユーザーを作成されたり、悪意のある人が第三者のアカウントをゲットしようとプログラムを組んで攻めてくる可能性が有名なサービスになればなるほど高くなります。知名度の低いサービスであっても決済情報が保存されているような場合は狙われることもあるでしょう。
そんな心配に比較的かんたんに立ち向かえるのがGoogle社が提供する「reCAPTCHA」です。「私はロボットではありません」のチェックボックスを見かけたことがある方も多いと思いますが、最新版のv3ではこのチェックも不要になり導入のハードルが非常に下がりました。
今回はこのreCAPTCHAをログインする仕組みに導入するという設定でまとめていきます。
続きを読む
WebStorage(localStorageとsessionStorage)は同一オリジン内のデータしか読み書きできません。名前空間を分けることでデータの衝突を防いだり、大切なデータを他のサイトから覗き見られることから守ってくれています。
しかしWebサービスを開発していると、サブドメイン間などでWebStorage内のデータを共有したいことがあります。そんなときに使うのが window.postMessage。指定したオリジンにだけWebStorage内のデータを渡したり、逆にデータを受け取ってWebStorage内に保存するといったドメインをまたいでの通信が可能になります。
※同一オリジンとは「スキーム(http)」「ホスト(example.com)」「ポート番号(443)」のすべてが同じ場合を言います。詳しくはこちらをどうぞ
CloudFrontで参照しているオリジンをLambda@Edgeで変更してみます。
今回はhttp://foo.example.comでアクセスされたら、CloudFrontがオリジンhttp://example.com/foo/へリクエストする設定をします。
正直なところあまり需要は無いと思いますがｗ この設定が生きてくるのは大量に同様の設定をしなければならない時ですね。設定が必要なドメインが2〜3個であればCloudFront側でディストリビューションを必要なだけ作成する方がわかりやすいです。
というわけで先ほどの例の「foo」の部分はどのような文字列が来ても対応可能なよう設定していきます。
続きを読む
小ネタです。
指定された数値がゾロ目かどうかを判定する正規表現を試してみます。説明するまでも無いと思いますが「1111」「8888」など同じ数だけで構成された数値をゾロ目と言います。
結論から言うと以下の通り。
/**
* ゾロ目判定
*
* @param {number} num
* @returns {boolean}
*/
function isZorome(num){
return String(num).match(/^([0-9])\1+$/) !== null
}
正規表現の\1はキャプチャグループと呼ばれ、直前のグループがマッチした場合にそれを参照することができます。+は直前のパターンを1個以上繰り返すことを意味するため、/^([0-9])\1+$/とすることで最初の数値が最初から最後まで連続していることを示すことができます。
実際に実行すると以下のような結果になります。
console.log( isZorome(12345) ) // false
console.log( isZorome(11111) ) // true
console.log( isZorome("12345") ) // false
console.log( isZorome("11111") ) // true
console.log( isZorome("abcde") ) // false
console.log( isZorome("aaaaa") ) // false
例えば数値のみのパスワード(暗証番号)として入力された数値がゾロ目だったら警告を出すといった用途に使えるかもしれませんね。
split()で1桁ずつの数字にばらした配列に変換し、everyでチェックします。
function isZorome(value){
const num = String(value).split('')
return(
(! isNaN(num[0])) && (num.every(v => v === num[0]))
)
}
お好みの方法でどうぞ。
CloudFrontのオリジンにS3を利用する場合、大きく2つのパターンがあります。
前者はS3側で割と色々と設定できるのですが問題は後者です。一般的なWebサーバのように「example.com/hoge/」にアクセスしたら「example.com/hoge/index.html」を返して欲しかったりするわけですが、この機能は自分でコードを書いて用意する必要があるのです。正直面倒くさいｗ
というわけでCloudFrontを制御するLambda@Edgeを準備していきます。
続きを読む
S3をWebサーバ代わりに使っている方も多いと思いますが、開発中のページや社内だけで閲覧したい場合など簡易的なアクセス制限をかけたい場合がありますよね。以前はEC2の安いインスンスを用意することもありましたが、Lambda@Edgeが登場してからはS3とCloudFrontだけで完結することができます。
というわけで今回はCloudFrontを使ってBASIC認証をかける方法をまとめます。
続きを読む
Node.jsの代表的なO/RMであるSequelizeの第五弾。
これまで以下のような内容を取り上げてきました。
今回はここまでの情報の整理も兼ねて、簡単なToDoアプリを作ってみようと思います。
続きを読む
Node.jsの代表的なO/RMであるSequelizeの第四弾。
第1回ではインストールから基本的な利用方法、第2回ではSELECT文の使い方、第3回ではトランザクションを取り上げました。
今回は「マイグレーション」のお話です。
Sequelizeから提供されているCLIツールを利用すると、モデルの内容をコマンド一発でMySQLへ反映することができます。最初の1回目だけではなく運用開始後に差分を反映することもできます。他のフレームワークなどでも見かけますよね。Ruby on Railsで初めてこの手のツールを触ったときは感動したものですｗ
Node.jsの代表的なO/RMであるSequelizeの第三弾。
第1回ではインストールから基本的な利用方法、第2回ではSELECT文の使い方を取り上げました。今回はINSERTやUPDATEなど更新系の処理に欠かせない「トランザクション」です。
Node.jsの代表的なO/RMであるSequelizeの第二弾。
前回はインストールから基本的な利用方法までを取り上げました。今回はSELECT文にまつわるトピックスを取り上げていきます。
Sequelizeに限った話ではないですが、WHERE句の条件が複雑になってくると「これSQL書いた方が早くね？」という気持ちになりますねｗ
続きを読む
