家族からのメールだけチェックするChrome拡張(Gmail)

chrome拡張 生活

せっかくプログラミングを学んだので、自分の生活を補助するものを作ってみることにしました。はじめに断っておくと、コードの再利用性も考慮していませんし、APIを正確に理解して書いているわけではありません。ともかく最速で作ってみて、使用感を体感するのが目的です。

背景を箇条書きすると次のようになります。ぼくの連絡手段はgmailのみで、PCしか持っていません。ずっとgmailを開いておいても良いですが、他のメールの通知が来たときも通知が来て煩わしいです。家族からメールが来た時、毎回連絡がつかないのは少し罪悪感があります。

背景

  • 家族からのメールだけをチェックしたい
  • あまりChrome Extension APIをしらない
  • 最速で作って使用感を味わいたい

やったこと

1)dotinstallの次の動画を見る


この動画を見て、ローカルに作ったchrome拡張をchromeに読み込む方法を理解します。

2)"Google Mail Checker"を公式ページのSamplesからダウンロードする

ここから"Google Mail Checker"をダウンロードします。解凍して、1)で見た動画の通りにして動くことを確認します(メールチェックの頻度はbackground.jsの116行目あたりのdelay(分)で調節すると動作確認が楽になります)。

3)家族からのメールにはfamilyラベルを付けるように設定する。

フィルタ機能で設定できます。フィルタの条件は"OR"で接続できます。例えば

 from:(mother@docomo.ne.jp OR mother@gmail.com OR father@offiece.com OR brother@gmail.com)

などとすれば、家族全員のメールアドレスを1つのフィルタでカバーできます。これで家族からメールが来た全てのメールの件数は"https://mail.google.com/mail/feed/atom/family"から取得できます。

4)background.jsでfamilyラベルの未読件数をチェックするように変更する

getFeedUrl()の40行目

 return getGmailUrl() + "feed/atom?zx=" + encodeURIComponent(getInstanceId());

を

 return getGmailUrl() + "feed/atom/family?zx=" + encodeURIComponent(getInstanceId());

に変更するだけです。これで、拡張をリロードすればokです。

作図ツール(webアプリ)を公開

ローンチ

url: http://lularandcompass-nnabeyang.dotcloud.com/
ユーザーが作図した図を記録することができます。記録した図は修正して上書きできますが、削除することは出来ません。ただしリストに表示されるのは最新10件だけです。下の動画中で作図した3件がこれを書いている現在、記録されています。図のロードはリストから選択して行います。どうでも良いことですが、urlの"lular"の部分は"ruler"とすべきでした。今後のアップデートで修正すると思います。

デモ画面

lac.js: SAVE & LOAD

lac.js 開発

作図ツールの試作をしてます。設計の詳細は次のページで見ることができます。
http://w.livedoor.jp/compass-ruler/d/lac.js
今回はプログラミングに依らずに作図した図をSAVEし、LOADする機能を書きました。不安定なので、動画中ではいくつかSAVEに失敗しています。SAVE機能にはFile System APIを使っているのでchromeでしか動作しません。次はlocal fileではなく、web socketを使ってサーバーサイドに図のデータを送ることを考えています。動画中のアプリは http://goo.gl/x9J92 から試すことが出来ます。

動画

アプリ

2012-12-25に描いた図(lac.js)

lac.js 開発

lac.jsのテストのために現実的な問題の図を描いています。今日は、内心、外心の関数を作りました。はじめはコンパスとものさしを使った作図を意識して作りましたが、内心は処理が重いので、ベクトル解析による公式を使うことにしました。外心や他の関数もベクトル解析の公式に切り替えようと思っています。

スライド1

スライド2

作図手順をスライドで表示(lac.js)

lac.js

作図される過程をスライドで確認できるものを作りました。このスライドは、手で一枚一枚指定しているわけではなくて、最終的な図のJavaScriptを用意するだけで、あとはプログラムが自動的に依存関係を調べて作っています。たとえば動画のJavaScriptコードは次のようになります。

slide("stage", function() {
var a = createPoint(230, 50, "A");
var b = createPoint(80, 300, "B");
var c = createPoint(350, 350, "C");

var m_ab = middlePoint(a, b, "D");
var m_bc = middlePoint(b, c, "E");
var m_ca = middlePoint(c, a, "F");

var l1 = createLine(m_ab, c);
var l2 = createLine(m_bc, a);
createLine(m_ca, b);
var g = cap(l1, l2)[0];
g.name = "G";
createLineSegment(a, b);
createLineSegment(b, c);
createLineSegment(c, a);
});

スライド

デモ動画


作図ツールcal.js(其ノ拾)

cal.jsをもっとインタラクティブに

cal.js 開発

動画では、角の頂点とその対辺の中点を結んだ3つの直線が常に1点で交わることを確認しています。これは中学の時に習った重心ですね。動的な作図ツールがあれば、このような手書きでは確認不能なことが分かります。

それに加えて、cal.jsはヒントを出すことで線分、角、三角形の合同を理解すること、作図問題の自動採点もできることも目指しています。

cal.jsをインタラクティブに

cal.js 開発

cal.jsを下の動画のように動的に点を動かせるならば、辺の比や、直角、平行など不変な性質を見つけやすくできるかもしれません。これは手でやるよりずっと効率的なので、真っ先に実装すべきなのかもしれません。ただ、処理が重くなりそうだったり、大幅な書き換えがあるので、バグがこわいです。でも実装してみようと思います。この機能以外はhttp://goo.gl/oH1lQ で遊べるのでよろしくお願いします。

デモ動画