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の勉強ログ入力画面に変更があったりすると、動かなくなる可能性大です。
• 始まったばかりのサービスですし、ユーザー側の要求に合わせてどんどん変わっていくということは大いに考えられます。

なお、ブックマークレットは本質的に危険なものだと考えているので、処理の内容を説明する意味も含めて、ブックマークレット化する前の元ネタのJavaScriptコードも載せておきます。studylogのサイトでもjQuery(1.5.1)を使っていたので、ブックマークレットを作るのは非常に楽でした。

オリジナルのJavaScript

var uid = '' || window.prompt('iKnow! ID:', 'en45');
                        // smart.fmのユーザーID
var date = $('#input_form input[name=date]').val();
                        // studylogで何月何日の勉強ログを入力しようとしているか
if (date) {
    $.get('http://api.smart.fm/users/' + uid + '/study_results/iknow.json', function(data) {
                        // smart.fm APIを使って、iKnow!の学習時間を取得する
        $.each(data.study_results, function(i, item) {
            if (date === item.date) {
                var min = item.seconds / 60;    // その日の総学習時間(分)
                var hh = Math.floor(min / 60);  // 「時間」と「分」に分ける(hh時間mm分)
                var mm = (Math.floor(min % (60) / 5) * 5) || ((hh === 0 && min > 0) ? 5 : 0);
                $('div.main_text_book > div.main_text_book_thumb > img[alt]').filter(function() {
                        // 「iKnow」または「smart.fm」の文字列を含む画像を探す
                    return ($(this).attr('alt').search(/iKnow|smart\.fm/i) >= 0);
                }).parent().parent().
                        // img要素の2つ上に戻って、「時間」「分」を入力するフォーム部品を探す
                    find('select[name^=timeperday_hour_]').val(((hh < 10) ? "0" : "") + hh).end().
                    find('select[name^=timeperday_minute_]').val(((mm < 10) ? "0" : "") + mm);
                return false;   // フォームに「時間」「分」を設定し、処理を完了する
            }
        });
    }, 'jsonp');
}

ブックマークレットのHTMLソース

<a href="javascript:(function(){var uid=''||window.prompt('iKnow! ID:','en45');var date=$('#input_form input[name=date]').val();if(date){$.get('http://api.smart.fm/users/'+uid+'/study_results/iknow.json',function(data){$.each(data.study_results,function(i,item){if(date===item.date){var min=item.seconds/60;var hh=Math.floor(min/60);var mm=(Math.floor(min%(60)/5)*5)||((hh===0&&min>0)?5:0);$('div.main_text_book>div.main_text_book_thumb>img[alt]').filter(function(){return($(this).attr('alt').search(/iKnow|smart\.fm/i)>=0);}).parent().parent().find('select[name^=timeperday_hour_]').val(((hh<10)?Ɔ':'')+hh).end().find('select[name^=timeperday_minute_]').val(((mm<10)?Ɔ':'')+mm);return false;}});},'jsonp');}})()">studylog(スタログ)でiKnow!の学習時間を入力するためのブックマークレット</a>