HTML5やらjQueryやらで「Rashita’s DashBoard」を作りました

作業の効率化のため、というお題目でダッシュボードを作りました。

screenshot

環境はHTML5 + JavaScript。つまり、単なるWebページです。でも、案外いろいろできちゃうものです。

あと、後方支援として、

jQuery
Bootstrap
Font Awesome
SB Admin 2

を使わせていただきました。大いに助かりました。

ダッシュボードの機能

ee090a7662c73a88fa4c46fd3938ac4c

Headarには各種クラウドツールへのリンクがあります。まあ、頻繁にクリックするのはTwitterですけれども。ちなみにGoogle+のアイコンが二つあるのは、自分のページと、「21世紀の知的生産の技術」の両方へのアクセスを確保しているからです。

Sidebarはツール系へのリンク。別の自作のツールへのリンクや、WorkFowlyなどへのリンクがまとまっています。

Maincolumnは、「作業」するときに必要なリンク集。各種ブログのダッシュボードや、メルマガ管理画面へのリンクがまとまっています。KDPページとかも頻繁に確認するので必須ですね。

Footnoteは、進行中プロジェクトの概況がまとめられています。

基本的にはブラウザにこのページを常時表示させておき、ここ経由で作業を開始する形になっています。あっちこっち探し回る必要がなく、タスクのワンストップステーションとして機能してくれれば理想です。

connection with Evernote

基本的にはただのリンク集なのですが、多少手の込んだことも実装されています。

一つは、テンプレート。sidebarに「テンプレート」という項目があり、それをクリックすると記事の雛形が表示されるようになっているのですが、このデータをEvernoteから持ってきています。詳しく書くと、Evernoteの「テンプレ」というタグが付いたノートの内容を表示しているのです。

※クリックすると
screenshot

※テンプレートが表示される
screenshot

つまり、Evernote上でそのテンプレタグが付いたノートを修正すれば、このページで表示されるテンプレの内容も修正される、ということですね。これは手作業ではなく、スクリプトによる自動作業なので、テンプレタグが付いたノートが新しく作成されれば、その内容も取り込まれます。

同様に、Footnoteの内容もEvernoteのノートから持ってきています。具体的には、プロジェクトノートブックにある、▼MITタグが付いたノートの、頭の部分だけを抜粋してノート表示している、という形です、こちらもEvernoteのノートを修正すれば、ダッシュボードのFootnoteも表示変更されます(タイムラグはありますが)。

※この部分は
screenshot

※このノートからやってきている
screenshot

今のところはFootnoteの形に留まっていますが、将来的にはEvernoteのプロジェクトノートブックにあるノートの内容を良い感じに表示して、一覧できるようにできればベストソリューションかな、というイメージがあります。なかなか実装は大変そうですが。

どうやって作っているのか?

このページの作成は、AppleScriptで行っています。

雛形になるhtmlファイルをあらかじめ作成しておき、そこでスクリプトを起動すると、Evernoteから情報を読み取って、その情報をおおもとのhtmlに追加した形で、新規にhtmlファイルを作成する、という流れになっています。で、そのスクリプトが自動的かつ定期的に実行される形です。

さすがにそれを解説し始めると、エントリーが膨大な量になるので今回は割愛。

MacのEvernoteはAppleScriptに対応しているので、結構いろいろなことができちゃいます。

さいごに

まあ、うたがいなくマニアックですし、そもそも私が使いやすいようにカスタマイズしてあるので汎用性は著しく低いページです。

が、それはそれとしてEvernoteのノートの内容をこうやって利用するというのも、面白いかなと感じる今日この頃です。

タグ:

コメントを残す