weblio英単語帳のデータをCSV形式にして出力するブックマークレット

weblio英単語帳のデータをCSVデータにするブックマークレット

weblioという辞書サイトにて「weblio語彙力診断」というクイズ形式の実力診断テストがあり、時折やっています。また、このサイトには「英単語帳」というサービスがあり、前述のテストにて不正解だった単語をクリックひとつですべて登録することができます(要ユーザー登録)。

しかし、この語彙力診断テスト、正解するたびにどんどん難易度の高い単語が出てくるので、テストをするたびに常に不正解の単語がいくつか出てくることになり、その度に単語帳に登録していくと単語がたまる一方。むろん、不正解した単語をきっちり覚えこんで単語帳から削除すればいいのですが、英単語というのはそんなに簡単に覚えられるものではありません。できれば、この不正解単語リストを他の学習システムに持って行きたいところです。

しかし、このweblio英単語帳のサービス、新たな機能がどんどん追加されているのはいいのですが、単語帳データのエクスポート機能というのは今までサポートされていませんでした。で、先日「登録単語のエクスポート」という機能が追加されたので試してみたのですが、本当に「単語」だけが並んでいるリストで、ちょっと使い物になりません。

そういうわけで、画面に表示されている単語帳のデータをCSVデータにして、画面上部のテキストボックス内に表示するブックマークレットを作ってみました。表示されたCSVデータを全選択→コピーして、メモ帳などにペーストして、拡張子をcsvとしてセーブすれば、Excelなどのソフトで扱うことができます。

本当は、CSVデータを元にiKnow!のカスタムコースを作る仕組みを作りたいのですが、こちらはおいおい進めていきます。

余談

当初はPerlスクリプトにて、WWW::MechanizeとWeb::Scraperを使った形で実装していたのですが、Perlスクリプトという形態では使えるユーザーが限られてしまうのと、weblio英単語帳にアクセスするためには「ログイン」が必要なことを考えて、ブックマークレットという方式に移行しました。前者の問題は「PAR (Parl Archiving Toolkit)」とかを使えば何とかなりそうですが、後者の問題がちょっと面倒です。

技術的には、Mechanizeではログイン処理も普通にサポートしていますし、実際にweblio英単語帳にログインする処理も簡単に実装できたのですが、ログインにあたっては当然「パスワード入力」が必要で、そこがやっかい。得体のしれないPerlスクリプト(あるいはそれをコンパイルした実行ファイル)に、ユーザーIDとパスワードを入力したい人はいないよなー、ということで、ブックマークレットで逃げることにしました。

Google Chromeの音声入力機能を英語学習に応用できないか?

音声入力で遊ぶ

遅ればせながら、Google Chrome 11から音声入力機能が追加されていたことを知りました。バージョン番号を言われても、Chromeの場合はあまりバージョンを意識することはないかと思いますが、普通は自動アップデートされているため、ほとんどのChromeでサポートされているはずです。

使い方は簡単で、以下のように、従来のテキストボックス(input要素)に"x-webkit-speech"を追加するだけです(HTML5の本来の仕様では"speech"だけでいいみたいですが、現状のChromeでは"x-webkit-"のプレフィックスが必要みたいです)。また、lang属性で明確に言語を指定しておくと、認識精度が向上します。

English: <input type="text" lang="en" speech x-webkit-speech>
日本語: <input type="text" lang="ja" speech x-webkit-speech>

Google Chromeを使っていてマイクを持っている方は、以下のテキストボックスで実際に音声入力を試してみることができます。右端のマイクアイコンをクリックすると音声入力待ちの状態になりますので、マイクで何かしゃべってみてください。

English:

日本語:

英語学習への応用

こういう面白いものが簡単に使えるとなると、これを応用して英語学習に活用できないものかと考えてしまうわけです。ぱっと思いついたのは、いわゆる「瞬間英作文」のトレーニングを、マイク入力をからめてインタラクティブ性のあるアプリっぽく仕立てることで、退屈さを少しでも紛らわせることができないものかと考えました。具体的にはこんな感じです。「回答」の欄に音声で英文を入力すると、「正解」の欄に正しい英文が表示されるはずです。

問題:

回答:

正解:

しかしながら、実際にやってみると分かるかと思いますが、(少なくとも私の発音では)認識精度に難があり、機械的に正解かどうかを判断させるのはとても無理そうです。仮にアプリ仕立てにするとして、正解/不正解の判断は人間側にやらせるほうが無難そうです。

また、現状のChromeのつくりでは、音声入力を開始する際にはいちいちマイクアイコンをクリックする必要があり、トレーニングをテンポよく進めることができないのではないかという懸念もあります。このあたりは、一度プロトタイプを作ってみないことには判断できないかなあ……。

残り人生を見える化するアプリ「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さんにソースコードを修正していただいて、こっそり動くようになっています。一応お知らせまで。

ブックマークレット中に「% (剰余)」を使ってはまる

先日作成したブックマークレットの動作確認中に、一点だけ意味不明な動作に悩まされました。

すでにタイトルでネタバレしていますが、ブックマークレット中に「% (剰余)」の記号を使った際に、その箇所が「URLエンコードされた文字」と解釈されてしまい、Google Chromeからさんざん「Uncaught SyntaxError: Unexpected token ILLEGAL」と怒られてしまいました。時間の計算をする際に「60で割った余り」が必要になったため「min % 60」という計算をしている箇所があったのですが、ブックマークレットにした際にコード全体の空白を除去したため、「%60」という「URLエンコードされた“`”(アクセント記号)」という意味になってしまったという次第です。

二度と同じ罠にはまらないように、備忘のため記しておきます。皆さんもお気をつけください。

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コードも載せておきます。