Pleasanterでスクリプトを書いているときに日付や時刻を思い通りに操作したい時があります。そんな時にJavaScript標準で用意されているDateがあるのですが、やりたいことを実現するために少し長いコードを書かなければいけなかったりするため、やや使いにくさを感じています。

Pleasanterでも普段使い慣れているものを使いたいので、備忘録も兼ねて使い方をまとめてみました。

Day.jsとは

軽量で使いやすいJavaScriptの日付操作ライブラリです。Dateと同じような役割ですが、よくやるようなユースケースが関数化されているため、短いコードで簡単に使うことできます。

day.js.org

例: 日付のフォーマット

先に実際にDay.jsを使うとどれくらい日付の操作が楽になるのか見てみましょう。

Dateを使って実際にYYYY/MM/DD形式の日付を取得しようとするとこれくらいのコードを書く必要があります。

const date = new Date();
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');

const formattedDate = `${year}/${month}/${day}`;
console.log(formattedDate);

Day.jsを使うとこれくらい短くできます。

const date = dayjs();
const formattedDate = date.format("YYYY/MM/DD");
console.log(formattedDate);

便利ではあるのですが、使えるようにするためには一手間準備が必要になります。

使い方

Node.jsなどで使用する時にはNPMを使ってインストールします。今回はブラウザで直接呼び出して使用する必要があります。使用するツールによっては、ぶらうざーからの呼び出しに対応しているか事前に確認が必要です。Day.jsはサポートされているので使えます。

Browser · Day.js

Day.jsスクリプトの読み込み

最初にPleasanterでDay.jsのスクリプトファイルを読み込む必要があります。通常このスクリプトはHTMLファイルのHeader領域に記述されます。

Pleasanterでは、管理 > テーブルの管理 > HTMLから新規作成画面を開き、タイトルは適当に入力しつつ、挿入位置はHead bottomを選択して次のスクリプトを貼り付けます。最後に作成ボタンを押して反映します。

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>

Day.jsを使ってみる

新規作成画面でデフォルトで1週間後が設定されている完了日を当日に変更することをやってみましょう。(当日を設定するだけであれば、他にもっといいやり方があるかもしれませんが)

先ほどサンプルで表示した内容をほぼそのまま用いて、最後にPleasanterの標準スクリプトを実行して入力項目に設定します。

const today = dayjs();
const formattedDate = today.format("YYYY/MM/DD");

$p.set($p.getControl("CompletionTime"), formattedDate);

スクリプトの入力が終わったら、作成して反映します。

変更前

変更後

無事にDay.jsを使って日付操作をすることができました。今回はすごく単純な操作なのであまり必要性の実感は湧きにくいですが、日付の比較や日数や時刻計算など様々なことができますので、気になった方はドキュメントを眺めてみてください。

例：翌日の日付

JavaScriptのコードだけの紹介ですが、明日の日付を取得したい時は、add()を使って日付の計算をすることで取得できます。昨日や1ヶ月前などの引き算も可能です。

const today = dayjs(); // 2024/10/09
const tomorrow = today.add(1, "day");
const formattedDate = tomorrow.format("YYYY/MM/DD");
console.log(formattedDate); // 2024/10/10

地域や言語の設定

冒頭では触れてこなかったのですが、ロケールの設定をすることで曜日表示などを日本語化できます。最初に登録した拡張HTMLのところに次の1行を追加します。

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/locale/ja.js"></script>

それぞれのスクリプトで次のコードを最初に1回だけ呼び出してください。

dayjs.locale('ja');

これで日本語化対応もできて自由な形式で日付を作ることができるようになりました。

おわりに

外部ファイルをうまく活用しながらスクリプトを書くことでより楽に実装することができるようになります。しかし、今回のようにURLから外部スクリプトを呼び出しすぎると全体的にUIが重くなってしまうこともあるので注意してください。

今回はURLで呼び出していましたが、キャッシュするようにファイルを取得してWebサーバーに直接腹持ちする方法もあります。Pleasanterで静的なリソースファイルをアップロードして保持する方法があれば、そちらを活用した方がパフォーマンス的にはいいかもしれませんね。まだ、この辺りは勉強不足でそういった仕組みがあるのかないのか分からず適当なことと言ってますが、もしあれば、別記事でまとめようと思います。