JavaScript

2020.02.16

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

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

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

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

2020.02.14

[GAS] V8ランタイムを有効にし最新のECMAScriptを動かす

みんな大好き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 to execute developer scripts, it also tied Apps Script to a specific JavaScript version (ES5). Apps Script developers can’t use more modern JavaScript syntax and features in scripts using the Rhino runtime.
V8 Runtime Overview

これまではMozilla製のランタイムRhinoが裏側で動いており、ES5までの構文に対応していました。JavaScriptが劇的に進化したのはES2015(ES6)からです。現代においてES5までの構文しか使えないのはやはり辛い。classはもちろんconstやletもES2015からなのです。

GASは非常に便利なのですが、Node.jsでコードを書き慣れてくるに従ってこの点がほんと苦痛で仕方なかったｗそんな折に満を持してGoogle謹製V8ランタイムの登場と相成ったというわけです。これで最新のECMAScriptが動作します。
続きを読む

2019.09.05

[HTML5] Canvasでアニメーション

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

これを実現するには大雑把に2つの方法がありまして、それぞれとりあげます。
続きを読む

2019.09.04

[HTML5] Canvasに図形を描く – 三角形

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

2019.09.04

[HTML5] Canvasに図形を描く – 直線・曲線

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

2019.09.03

[HTML5] Canvasに図形を描く – 円

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

2019.09.02

[HTML5] Canvasにテキストを描く

Canvasにテキストを描画します。フォントや色なども自由に指定できます。

2019.09.01

[JavaScript] キーボードからの入力を取得する

今回はJavaScriptでキーボードの何らかのキーが押されたら、そのキーコードを取得する処理を取り上げます。

解説

キーコードを取得

結論から言うと以下のようにkeypress, keydown, keyupのいずれかのイベント処理で引数として渡されるオブジェクトのe.keyCodeを参照するだけです。

window.addEventListener("keydown", (e)=>{
  const keycd = e.keyCode;
});

ここで注意すべき点としては、例えば「A」キーを押したらAという文字列が入ってくるわけではなく、キー毎に割り当てられた数字が入っている点です。「A」キーなら整数の65ですね。

2019.08.11

[HTML5] カメラのフロントとリアを切り替える

スマホなどでカメラを操作する際に、リアとフロントのカメラをJavaScriptで切り替える簡単なサンプルです。

2019.07.29

[HTML5] カメラをJSで操作しフォトフレーム付き写真を撮影する

以前、JavaScriptでカメラを操作し写真を撮影するサンプルコードを作成しましたが、今回はそこにフォトフレームを合成してみたいと思います。

プリクラやスマホアプリでよくある見かけるやつですね。撮影した画像をダウンロードすることもできます。
続きを読む

2019.07.14

[Node.js] Math.random()よりセキュアな乱数を生成する

JavaScriptで乱数を利用したい場合はMath.random()を使うことがほとんどだと思いますが、内部のロジック的に暗号などセキュアな用途には向いていないとされています。Node.jsでは標準モジュールであるcryptoを利用することでこの問題を解決することができます。

サンプルコード

結論から言うと具体的なコードは以下になります。getSecureRandom()関数を実行する度にランダムな整数を取得できます。

const Crypto = require("crypto");

function getSecureRandom(){
  const buff = Crypto.randomBytes(8);  // バイナリで8byteのランダムな値を生成
  const hex  = buff.toString("hex");   // 16進数の文字列に変換

  return ( parseInt(hex,16) );         // integerに変換して返却
}

2019.06.22

[HTML5] QRコードリーダーを作成する

今回はHTML5の機能を利用した「QRコードリーダー」を作成します。
以前作ったJavaScriptによるカメラを操作するコードに、QRコードを読み取ってくれる便利ライブラリをくっつけただけのお手軽版。

PCやスマホに付いているカメラの映像を0.3秒毎にチェックし、QRコードが見つかったらQRに埋め込まれている情報を表示してくれます。見つかったQRコードの場所も簡単にマーキングする機能も付けてみました。

2019.06.21

JavaScript/CSSをコマンドラインでminifyする

JavaScriptやCSSには人間が読みやすいよう、改行やスペースを設けたり、パット見て何に利用するかわかりやすい変数名をつけるわけですが、これは対人間用であってそれを実行する機械にとっては邪魔でしかありません。変数は1文字あれば十分ですし、改行やスペースなどのいわゆる「ホワイトキャラクター」はそもそも不要です。

そんなときに利用するのがminify。
webpackなどを利用していれば、最終的な出力時に自動的にやってくれますが、手元で個別のファイルに対して実行したいときがありますよね。今回はwebpackも内部で採用しているUglifyJSと、CleanCSSのCLIツールを利用して、JavaScript/CSSのminifyを行ってみます。