scrapbox-pomodoro

→scrapbox-pomodoro-2

ポモドーロタイマーをPageMenuに追加するUserScriptyosider

date-fnsを使ってみた

機能

workとbreakのポモドーロを交互に繰り返す

work, breakが終わったら通知する

最初に許可が必要

Notification.requestPermission()で許可を要求する

doneFirefoxから使おうとすると、通知の許可設定はユーザー生成の短期的なイベントハンドラー内部からしか要求されません。というエラーが出る

workが終わったら今日のページに記録する

2021-03-31 16:31:15

時間を変更できるようにした

s/format/lightFormat

2021-03-14 05:45:50 勝手にいじったtakker

thxyosider

getという手があるのか～

クラスのメンバ変数を設定する

Notification.requestPermission()をconstructorとthis.stopで2回やってる?のはなぜでしょうか？

constructorで呼び出された requestPermission() の実行が完了する前に stop() を呼び出された場合に備えたものですtakker

requestPermission() は非同期で呼び出しているので、実行完了を待たずに stop() が呼び出される場合があります

……なら constructor で呼び出す必要ないかtakker

stopするときに突然求められるのも変な気がするようなyosider

PageMenuのonClickで許可を求めるようにしてみたyosider

awaitすることはできるんだろうか

しなくても実際上は困らないか

workPeriodとかの定数って外に出したほうがいいんですかね？

クラスのメンバ変数にしておいたほうがglobal汚染しなくていいかなと思ったんですが

moduleでカプセル化してあるので、global汚染の心配はありませんtakker

export const workPeriod と指定したとしても、import側で import {workPeriod} from ... と書いて明示的に呼び出さない限り、import側からアクセスすることは出来ません

そうだったのか。。yosider

ESModuleは安全で便利なのですtakker

References

モジュール, 導入

モジュールの通常のスクリプトの間のその他の違い | JavaScript モジュール - JavaScript | MDN

JavaScriptにおけるモジュール機構や、モジュールバンドラーについて | 楽しいだけで十分です

TODO

done自分でボタンを押して止めたときは通知いらない、時間切れのときだけ通知出すようにする

通知はstopWork, stopBreakそれぞれで出すようにすると実装できそう

2021/3/14 21:21 doneyosider

記録先のページを開いたときに、そのタブにフォーカスしないようにする？

通知をクリックしたらScrapboxにフォーカスするようにする

同じScrapbox projectを開いているすべてのタブから同じインスタンスを参照する

さすがに無理か？

データだけならlocal storage経由で同期できます

なるほど…クリックしたらそれを取ってきて同期するとかかなyosider

一時停止機能を追加する？

ポモドーロテクニックの型が崩れそうtakker

Eugene Schwartzの33分33秒に対応させたい

import.js

(async () => {

const {Pomodoro} = await import('/api/code/programming-notes/scrapbox-pomodoro/script.js');

new Pomodoro({workPeriod: 5 * 1000, breakPeriod: 1 * 1000});

})();

動的importは何がいいんだっけyosider

開発コンソールに貼り付けてそのまま実行できるtakker

なるほど!yosider

/yosider-scriptsは今privateにしてるので他の人では動かないような…yosider

もちろん動かないゾtakker

/programming-notesにコピペすればよさそう

script.js

import { addMilliseconds, lightFormat } from '../date-fns.min.js/script.js';

const title = 'Pomodoro Timer';

const image = 'https://gyazo.com/978797f03cb0112a0a4cafdf02dcdde8/raw';

const notificationOptions = { body: `With 🍅 by ${title}`, icon: image };

export class Pomodoro {

constructor({workPeriod, breakPeriod} = {}) {

scrapbox.PageMenu.addMenu({title, image, onClick: () => Pomodoro.requestPermission()});

this.menu = scrapbox.PageMenu(title);

//Pomodoro.requestPermission();

ここでFunction.prototype.bind()を使っている理由は何でしょうか？takker

JavaScriptのthisの中身は呼ばれ方によって変わる#e0ea7fということなら、 () => this.stopBreak() の方がわかりやすいと思います

個人差あり

好みの領域かも

そうしたいんですがどこをどう変えればいいのかわからないですyosider

this.start() を使っているところを変えればいいですtakker

scrapbox-pomodoro#361ced

scrapbox-pomodoro#361cf1

diff

-this.start(workPeriod, this.stopWork);

+this.start(workPeriod, () => this.stopWork());

なるほど！yosider

やっていることはscrapbox-pomodoro#361d0bと同じです

this.reset() を constructor() に吸収しましたtakker

constructor() 以外で使っていなさそうだったので

あ、そういえばstopしたときにresetすればいいと思って分けたのにreset使うの忘れてた…yosider

でも実際はstopにも2種類あってresetって感じじゃなくなったな

script.js

//this.stopBreak = this.stopBreak.bind(this);

//this.stopWork = this.stopWork.bind(this);

this.isRunning = false;

this.isWorkPeriod = false;

this.intervalID = undefined;

this.startTime = undefined;

this.endTime = undefined;

this.timeoutID = undefined;

this.workPeriod = workPeriod ?? 25 * 60 * 1000;

this.breakPeriod = breakPeriod ?? 5 * 60 * 1000;

this.setItems(this.startWorkButton);

}

// 定数の設定

get startWorkButton() { return { title: '\uf04b︎ Start Work', onClick: () => this.startWork() };}

get stopWorkButton() { return { title: '\uf04d Stop Work', onClick: () => this.stopWork() };}

get startBreakButton() { return { title: '\uf0f4 Start Break ', onClick: () => this.startBreak() };}

get stopBreakButton() { return { title: '\uf04d Stop Break', onClick: () => this.stopBreak() };}

get timerDisplay() { return { title: '--:--', onClick: () => { } };}

setItems(...items) {

this.menu.removeAllItems();

items.forEach(i => this.menu.addItem(i));

}

start(period, callback) {

this.isRunning = true;

this.startTime = new Date();

this.endTime = addMilliseconds(this.startTime, period);

this.intervalID = setInterval(() => callback(), period);

this.setUpdateTimerLoop();

}

startWork() {

this.start(this.workPeriod, () => this.stopWork('ポモドーロが完了しました。'));

this.setItems(this.timerDisplay, this.stopWorkButton);

}

startBreak() {

this.start(this.breakPeriod, () => this.stopBreak('休憩時間が終了しました。'));

this.setItems(this.timerDisplay, this.stopBreakButton);

}

stop(msg='') {

this.isRunning = false;

clearTimeout(this.timeoutID);

clearInterval(this.intervalID);

}

stopWork(msg='') {

this.stop();

this.setItems(this.startBreakButton);

if (msg) new Notification(msg, notificationOptions);

const endTime = new Date();

const page = `/${scrapbox.Project.name}/${encodeURIComponent(lightFormat(endTime, 'yyyy/M/d'))}`;

const log = `${lightFormat(this.startTime, 'HH:mm')} -> ${lightFormat(endTime, 'HH:mm')}: [${scrapbox.Page.title}]\n`;

window.open(`${page}?body=${encodeURIComponent(log)}`);

}

stopBreak(msg='') {

this.stop();

this.setItems(this.startWorkButton);

if (msg) new Notification(msg, notificationOptions);

}

setUpdateTimerLoop() {

if (!this.isRunning) return;

FIXME: itemの0番目に時計があるとする はcommit messageでしょうか？takker

単に後でなんとかしようというメモをしただけですyosider

残り時間を表示しているitemのタイトルを変更したい

タイトルを関数で生成しているので、itemの位置をtitleから特定できない気がするのですが、なんかいい方法ありますかね？

setUpdateTimerLoop() を実行する段階で、 item[0] に時計があるのは確定しているので、このままでいいと思いますtakker

addItemの順番が保証されているのか気になったけど、まあされているかyosider

script.js

this.menu.menus.get(title).items[0].title = lightFormat(this.endTime - new Date(), 'mm:ss'); // itemの0番目に時計があるとする

this.menu.emitChange();

this.timeoutID = setTimeout(() => this.setUpdateTimerLoop(), 1000);

}

static requestPermission() {

if (Notification.permission === 'granted') return;

if (Notification.permission === 'denied') throw Error('Permission denied.');

// UI操作を通じて許可申請を出す

const a = document.createElement('a');

a.onclick = async () => {

const state = await Notification.requestPermission();

if (state !== 'granted') throw Error('Permission denied.');

};

document.body.appendChild(a);

a.click();

a.remove();

}

}

JavaScript

MDN