残り人生を見える化するアプリ「Lifetime Calendar」

ここしばらく非常に多忙な状態が続いていました。忙しいと、あっという間に月日が流れていく感覚があり、気がつけば5月も終わりです。このままでは1ヶ月後に「今年ももう半分過ぎた」などと言っているに違いありません。忙しくなってくると、一週間の仕事の疲れがたまって土日を無為に過ごすことも多くなり、人生無駄にしている感がつのる一方です。

さて、少し前から、Twitterでのタイムライン上で「@foobar は12345日生きた。人生あと17655日しかない。今日は有意義だったか?」といった感じのTweetが定期的に見られるようになりました。これは30thouというサービスからのTweetで、人生は30000日と仮定して、今まで何日生きて、あと何日残っているかというのを数字で意識させるようにして、一日一日を有意義に生きるようにしよう、という趣旨のメッセージのようです。

これを見て、興味深いと感じると同時に、「日数の数字だけでなく、もっとビジュアル的な表現はできないかな」と思いました。いわゆる「見える化」というやつでしょうか。で、ぱっと思いついたのが、1年(12ヶ月)分のカレンダーを3×4の形で並べたものを、さらに一生分(例えば80年分)並べるというものです。

百聞は一見にしかず、というわけで、さくっとWebアプリとして実装してみました。HTML5のcanvas要素を使用したので、サポートしていないブラウザでは動きません(端的にはIE8)。ご了承ください。

Lifetime Calendar (実際の表示例)

しかし、こうやって改めて可視化してみると、一日が一個の長方形に相当するとして、一生全体でたったこれだけしかないのかという気持ちになりますね……。

スクリーンショット

カレンダー内の文字は、自前で5×5ピクセルの英数字フォントをでっち上げて描画しています。現状、canvas要素におけるテキスト描画はいまいち怪しいので……。また、「Save As ...」のボタンを押すと、カレンダーをPNG画像として保存できます。

生年月日の入力には、jQuery UIの「Datepicker」を使っています。「PLEASE ENTER YOUR BIRTH DATE」のメッセージは、わざわざcanvas要素で描画する必要はなかったのですが、せっかく自前でフォントを作ったので使ってみました。妙な雰囲気になったかも。

studylog(スタログ)でiKnow!の学習時間を入力するためのブックマークレット・その2

以前、「studylog(スタログ)」でiKnow!の学習時間を入力するためのブックマークレットを作成しましたが(参照)、数日前からstudylog側の学習時間入力画面のHTMLが変わったため、使えなくなってしまっていました。まずは取り急ぎ修正しました。

studylog(スタログ)でiKnow!の学習時間を入力するためのブックマークレット

注意点(前回の記事と同様です)

• studylogでは「参考書」としてiKnow!の学習時間を管理することになりますが、参考書のテキスト名には「iKnow」(または「smart.fm」)の文字列を入れておいてください。
• これを元に、自動入力するフォーム部品を探します。
• studylogでは勉強時間を「5分単位」で入力するようになっているため、iKnow!での学習時間は5分単位で切り捨てした時間が設定されます。
• ただし、「0分より上、かつ、5分未満」の場合のみ「5分」として扱います。
• このブックマークレットでは、studylogの画面上のフォームに学習時間を設定することしか行いません。学習時間の送信は行いません(自分でボタンを押して送信してください)。
• ブックマークレットの冒頭に「javascript:(function(){var uid=''||～」という感じで「uid」という変数を定義していますが、ここに自分のiKnow!のIDを入れてください(「var uid='en45'」のように)。
• そうしないと、ブックマークレット実行時に毎回自分のIDを入力しないといけなくなります。

Smart.fm Study Log Saver ～ 学習時間記録取得ツール

smart.fm終了まであと2日しかないタイミングなのに、この期に及んで何をやっているんだという感じですが、これまでのsmart.fmでの学習時間の生データをCSVファイルで取得する「Smart.fm Study Log Saver」というアプリをでっち上げました。Excelなどに取り込んで、好きに料理してください。

今までやってきたiKnow!アプリケーションの日々の学習時間については、新サイトのiKnow!にて学習履歴を見ることができます。しかし、新サイトのiKnow!ではDictationとBrainspeedがなくなってしまうため、これらの学習記録も見ることができなくなってしまいます。そういうわけで、睡眠時間を数時間ほど削って作ってみました。Dictationのスキルレベルの変動をExcelでグラフにプロットして見たりすると、けっこう面白いかもしれません。

ただし、smart.fmのサーバに残っている学習記録は2009年11月までのようで、そこより前のデータは取得できません。その点ご注意ください。

また、2月半ば頃から動かなくなってしまっていた「Smart.fm List Converter」ですが、先日raffaelさんにソースコードを修正していただいて、こっそり動くようになっています。一応お知らせまで。

Smart.fm Memento Maker ～ 日記一括ダウンロードツール

smart.fmの日記(と画像)を一括ダウンロードするアプリ「Smart.fm Memento Maker」を作成しました。ようやく正式公開できるレベルになりました。

使い方は簡単で、smart.fmのIDを入力して「Save」ボタンを押して、あとは(気長に)待つだけです。処理の完了後「Download」ボタンを押せば、日記と画像の入ったzipファイルをダウンロードできます(もしボタンを押してもダウンロードできない場合、ボタンの左側のリンクを右クリックして「名前を付けて保存」を選んでください)。

日記はHTMLファイルで保存されますが、このHTMLファイルをそのまま開いても、レイアウトなどは崩れてしまうのでご了承ください。あくまで保存できるのは中身(文章)だけです。日記についたコメントもそのままでは見ることはできませんが、別ファイル(「(最大6桁の数字)_comment.html」みたいな名前のファイル)に保存されているので、そちらのファイルを見てください。ちなみに、取得できるのは公開設定にしてある日記だけです。

また、ダウンロードしたzipファイルの中には「mt_log.txt」というすべての日記とコメントの文面が収められたテキストファイルも入っています。このファイルは「Movable Type形式 (MT形式)」というもので、これを使ってsmart.fmの日記を他のブログにインポート(引越し)することができます。世の中にはブログサービスがたくさんありますが、いくつかのブログサービスでは「MT形式でのインポート」というのをサポートしています。試しに、私の日記をSeesarブログ にインポートしてみましたので、どんな感じか参考にしてください(後ほど削除します)。

ただし、画像についてはおそらくは自動で移行できないと思いますので、ダウンロードしたzipファイルの中の画像ファイルを移行先のブログサービスにアップロードして、個々の日記の画像のURLを差し替える作業が必要になるかと思います。上の例ではブログ中の画像も正常に表示されているように見えますが、これは画像ファイルの場所として直接smart.fmのサーバ内の画像を指定しているためで、後日smart.fmのサーバが停止した後はブログ中の画像が見えなくなってしまいます(本来はSeesarブログのサーバに画像をアップロードし直す必要があります)。

smart.fm終了まで時間がありませんが、ご活用ください。

studylog(スタログ)でiKnow!の学習時間を入力するためのブックマークレット

「studylog(スタログ)」というウェブサービスに登録してみました。毎日の勉強時間を記録するようにして達成感を得られるようにしてモチベーションアップを図り、勉強を継続できる正のフィードバックを形成する、という趣旨のサービスです。いまどきのウェブサービスらしく、ソーシャルな要素もあるようです。私の勉強記録はこちらになります。<http://studylog.jp/en45masao/>

私の場合、iKnow!やsmart.fmといったウェブサイトでの英語学習や、Nintendo DSソフトでの英語学習はそれなりに継続できているのですが、書籍での勉強がどうも苦手で、なかなか継続できません。英検準1級二次試験に向けて「瞬間英作文」の本を買ったのですが、時折思い立ったときに取り組んでみたりはしているものの、定期的に続いているとはとても言えない状態です。そういう中、Twitterのタイムラインでこのサイトの情報を得て、渡りに船とばかりに登録した次第です。

まだ登録したばかりでろくに触ってもいないので感想も何もないのですが、早くも「毎日勉強時間を記録するのはけっこう面倒かも」と思い始めています。これはブラウザから入力するUI部分が問題というわけではなく、学習する際に勉強時間を把握する――勉強の前後でいちいち開始時刻と終了時刻を記録して勉強時間を計算する――のが(個人的には)面倒に感じるということです。まあ、それはそれで計画的に勉強をするためのいい仕組みになるかもしれません。そもそも5分刻みでの入力になるので適当な入力でも構わないと思いますし。

とはいえ、私はこのstudylogでiKnow!(smart.fm)での学習時間も管理しようとしているのですが、このサイトでの学習時間はAPIを使って簡単に取得できるため、ここくらいは自動化したいところです。というわけで、studylogの勉強ログ入力画面にて、iKnow!(smart.fm)での学習時間を簡単に入力するためのブックマークレットを作ってみました。

studylog(スタログ)でiKnow!の学習時間を入力するためのブックマークレット

注意点

• studylogでは「参考書」としてiKnow!(smart.fm)の学習時間を管理することになりますが、参考書のテキスト名には「iKnow」または「smart.fm」の文字列を入れておいてください。
• これを元に、自動入力するフォーム部品を探します。
• studylogでは勉強時間を「5分単位」で入力するようになっているため、iKnow!(smart.fm)での学習時間は5分単位で切り捨てした時間が設定されます。
• ただし、「0分より上、かつ、5分未満」の場合のみ「5分」として扱います。
• このブックマークレットでは、studylogの画面上のフォームに学習時間を設定することしか行いません。学習時間の送信は行いません(自分でボタンを押して送信してください)。
• ブックマークレットの冒頭に「javascript:(function(){var uid=''||～」という感じで「uid」という変数を定義していますが、ここに自分のiKnow!(smart.fm)のIDを入れてください(「var uid='en45'」のように)。
• そうしないと、ブックマークレット実行時に毎回自分のIDを入力しないといけなくなります。
• 学習時間取得のためにsmart.fm APIを使っているのですが、smart.fmは3月いっぱいでサービス終了となるため、その後は使えなくなります(何か別の手を考えないと……)。
• studylogの勉強ログ入力画面に変更があったりすると、動かなくなる可能性大です。
• 始まったばかりのサービスですし、ユーザー側の要求に合わせてどんどん変わっていくということは大いに考えられます。

smart.fmの「もっと見る」をすべて展開するブックマークレット

smart.fmの「もっと見る」をすべて展開するブックマークレット

背景

smart.fmのサイトでは、ウォールや日記にてコメントを残すことができますが、コメントの数が多くなると一定数以降のコメントは折りたたまれて、残りは「もっと見る」というリンクを辿らないと表示されません。特に、ウォールのコメント(Shout)については、初期の頃からのコメントがずっと残っているので、過去のものをすべて読もうとすると何度も何度も「もっと見る」をクリックすることを強いられます。

smart.fm終了にあたり、こういったコメントなどによるユーザー間の交流の記録も失われてしまうわけで、せめてローカルに保存しておきたいところです。当初はAPIを使って何とかしようと思ったのですが、一筋縄にはいかないようで、次善の策としてFirefoxの拡張機能「ScrapBook」を使って、ブラウザに表示されている内容をごっそり保存するのが手っ取り早いと思います。しかし、表示されている内容しか保存できないため、ScrapBookで保存する前には、「もっと読む」をすべてクリックしてコメント内容を展開する必要があります。

そこで、手でいちいちクリックする代わりに、「もっと見る」リンクを自動で探して展開するブックマークレットを作ってみた次第です。

使い方

登録・起動は一般的なブックマークレットと同様です(この説明で分かる方だけが使ってください)。

ブックマークレットを起動すると、smart.fmの画面上の「もっと見る」リンクが次々に展開されていきます。けっこう時間がかかるので、処理中は画面左上に「ローディングアイコン」を表示するようにしました(中央の数字は画面上の「もっと見る」リンクの数です)。クリックすると処理を途中で中断します。

技術的な話

私が普段JavaScriptを書く際には「jQuery」を使っています(Webアプリを作る際は「jQuery UI」も)。正直なところ、すでにこれなしではJavaScriptでプログラムを書ける気がしません。そもそも、JavaScriptを使い始めたのがごく最近で、JavaScriptを初めてからすぐにjQueryを使うようになったので、「素のJavaScript」だけでプログラムを書いた経験がほとんどありません。

とはいえ、ブックマークレットを書くという局面では、jQueryを使うのは牛刀な感じがしてきます。ブックマークレットで外部ライブラリをロードするというのも大げさに感じます。

しかしながら、すでにjQueryを使っているサイトのページに対してブックマークレットを適用するのであれば話は別です。smart.fmではjQuery(1.3.2)を使っているので、smart.fmのサイトで使うブックマークレットならば、普通にjQueryを使えるわけです。

jQueryさえあれば、「もっと見る」リンクをすべてクリックするなんてことはお茶の子さいさいです。ブックマークレットはあまり長くしすぎるとブラウザ側でブックマークとして扱えなくなってしまうのですが、jQueryを使うとコードが非常にコンパクトにまとまります。ローディングアイコンを出してみたり、途中でキャンセルできるようにしたりしましたが、トータルで500文字以下に抑えられました。

危険性

しかし、ブックマークレットを作ってみて実感しましたが、ブックマークレットというものは本質的に危険な仕組みです。特に今回のように「クリック」操作を伴う場合、クリックする対象を間違えて選択してしまうと大変なことになりかねません(プログラムミスがあって、誤って「クリック」の対象を「削除ボタン」にしてしまったとすると……)。

普通に作っていても危険なのだとすると、故意にユーザーに危害を与えるべく悪意を持って開発すれば、いくらでもユーザーに損害を与えることができてしまうわけです。例えば、画面内のすべての「コメント送信」ボタンを「クリック」することも可能ですし、事前に画面内のすべてのテキストボックスに「f*ck you」みたいな文字列を設定しておくことも朝飯前なわけです。

むろん私にはそのような意図は毛頭ありませんが、どこの馬の骨とも知れない人間が提供しているブックマークレットを使うということがいかに危険なことであるか、リスクを認識した上で、自己責任で利用するようお願いします。これはこのブックマークレットに限った話ではなく、一般的な話です。

(このブックマークレットはsmart.fmユーザー向けのものであるため、本来この記事はsmart.fmの日記にて書くべきなのですが、(ギークではない一般の人が多い)smart.fmのユーザー層に「非公式のブックマークレットを安易に使う習慣」が広まってしまうことを懸念して、smart.fmの日記では公開していません)

処理の内容を説明する意味も含めて、ブックマークレット化する前の元ネタのJavaScriptコードも載せておきます。