Scriptを利用して、GMailのメールを自動的に既読&アーカイブします。きっかけとしてはGoogleカレンダーから毎日送られてくる「本日の予定メール」なんですが、件名を見るだけで大体把握できてしまうためほとんど開かないんですよね。すると未読メールがどんどんたまっていくの気持ち悪い...が自分で定期的にアーカイブするのは面倒。いうわけで自動化することにしたというわけです。V8ランタイムを有効にし最新のECMAScriptを動かすみんな大好きGoogleAppsScriptで、2020年2月よりES2015以降のナウい構文が利用できるようになりました。OverviewこれまではMozilla製のランタイムRhinoが裏側で動いており、ES5までの構文に対応していました。JavaScriptが劇的に進化したのはES2015(ES6)からです。現代においてES5までの構文しか使えないのはやはり辛い。classはもちろんconstやletもES2015からなのです。そんな折に満を持してGoogle謹製V8ランタイムの登場と相成ったというわけです。これで最新のECMAScriptが動作します。CanvasでアニメーションCanvasを利用して簡単なパラパラアニメを作成してみます。原理としては授業中にノートや教科書の端に描いた絵をパラパラとめくって動かしたのと同じ。Canvasに描画したあとに適当な時間待機後、Canvasをお掃除したあとに少しだけ動かした絵を描画...をひたすら繰り返すという物です。これを実現するには大雑把に2つの方法がありまして、それぞれとりあげます。三角形Canavsに三角形を描画します。HTML5では四角形と円、線以外を描画する専用のメソッドは用意されていませんので、線を組み合わせることで三角形などのの図形を描くことができます。直線・曲線Canavsに線を描画します。ここでは純粋な直線と、曲線として円弧、ベジュ曲線を取り上げます。円Canavsに円を描画します。ここでは正円と、一部が欠けた円を取り上げます。Canvasにテキストを描くCanvasにテキストを描画します。フォントや色なども自由に指定できます。キーボードからの入力を取得する今回はJavaScriptでキーボードの何らかのキーが押されたら、そのキーコードを取得する処理を取り上げます。keyupのいずれかのイベント処理で引数として渡されるオブジェクトのe.keyCodeを参照するだけです。e.keyCode;});ここで注意すべき点としては、例えば「A」キーを押したらAという文字列が入ってくるわけではなく、キー毎に割り当てられた数字が入っている点です。「A」キーなら整数の65ですね。カメラのフロントとリアを切り替えるスマホなどでカメラを操作する際に、リアとフロントのカメラをJavaScriptで切り替える簡単なサンプルです。カメラをJSで操作しフォトフレーム付き写真を撮影する以前、JavaScriptでカメラを操作し写真を撮影するサンプルコードを作成しましたが、今回はそこにフォトフレームを合成してみたいと思います。プリクラやスマホアプリでよくある見かけるやつですね。撮影した画像をダウンロードすることもできます。Math.random()よりセキュアな乱数を生成するJavaScriptで乱数を利用したい場合はMath.random()を使うことがほとんどだと思いますが、内部のロジック的に暗号などセキュアな用途には向いていないとされています。Node.jsでは標準モジュールであるcryptoを利用することでこの問題を解決することができます。サンプルコード結論から言うと具体的なコードは以下になります。getSecureRandom()関数を実行する度にランダムな整数を取得できます。QRコードリーダーを作成する今回はHTML5の機能を利用した「QRコードリーダー」を作成します。以前作ったJavaScriptによるカメラを操作するコードに、QRコードを読み取ってくれる便利ライブラリをくっつけただけのお手軽版。PCやスマホに付いているカメラの映像を0.3秒毎にチェックし、QRコードが見つかったらQRに埋め込まれている情報を表示してくれます。見つかったQRコードの場所も簡単にマーキングする機能も付けてみました。続きを読む2019.06.21JavaScript/CSSをコマンドラインでminifyするJavaScriptやCSSには人間が読みやすいよう、改行やスペースを設けたり、パット見て何に利用するかわかりやすい変数名をつけるわけですが、これは対人間用であってそれを実行する機械にとっては邪魔でしかありません。変数は1文字あれば十分ですし、改行やスペースなどのいわゆる「ホワイトキャラクター」はそもそも不要です。そんなときに利用するのがminify。webpackなどを利用していれば、最終的な出力時に自動的にやってくれますが、手元で個別のファイルに対して実行したいときがありますよね。今回はwebpackも内部で採用しているUglifyJSと、CleanCSSのCLIツールを利用して、JavaScript/CSSのminifyを行ってみます。カメラをJSで操作し写真を撮影するHTML5ではPCやスマホのデバイスの機能をJavaScriptから直接利用することができるようになりました。今回はカメラを操作し、デジカメのような要領で静止画を撮影する簡単なサンプルを作ってみたいと思います。カメラの映像が向かって左側に写り続け、良いタイミングで下にある「シャッター」ボタンをクリックすると、右側に撮影した静止画が表示されます。ボタンをクリックするとシャッター音も再生されます。QRコードを生成する今回はNode.js上で簡単にQRコードが生成できるnode-qrcodeを利用し、動的にQRコードを生成してみたいと思います。GitHub.GitHubQRコード自体は非常に便利ですよね。2次元バーコードよりも情報量が増やせるため様々な用途に利用できます。ブログをメールで購読メールアドレスを記入して購読すれば、更新をメールで受信できます。