[アプリ] 単語読解支援サービス、シッテタンを作った

このエントリーをはてなブックマークに追加

英語論文を読んでいるとき、いちいちわからない単語にぶち当たって一向に進まないので、シッテタンというWebサービスを作りました。

シッテタンは、知ってる英単語を登録することで、英文を読む前に大体その文章が読めるかを把握できるようにする、英文読解支援サービスです。コピペを多用するのでスマホ向けでなく、PC向けのサイトです。

シッテタンのサイトに行く

開発の徒然は以下のread moreから。

背景

単語が分からなくて英語が嫌いになった

わたしの本業は一応研究者なんですが、ぶっちゃけあんまり英語論文読んじゃいません。困ったものです。

でまあ、たまには英語論文でも読もうかと引っぱり出したら、これが全然読めない。単語がわからないんですね。しょうがないので単語帳でも作って勉強でもしようと思ったわけです。真面目ですね。

そうしたら、ひたすら単語帳と論文を往復する作業になってしまいました。何しろわからない単語だらけ。そのうち、わからない単語にぶち当たることが苦痛になってきて、論文読むのが嫌になってしまいました。

知らない単語を予測可能にすればいい!

思うに、英語読解が苦痛になる理由はだいたい、突然知らない単語にぶち当たることなんじゃないんでしょうか。知らない単語に会うとそこで読解が止まってしまいますが、でも知らない単語は予測不能です。それはもう、突然通り魔に襲われるくらい理不尽なことです。嫌になってもしょうがないですよね。という風に言い訳して、結局論文読むのは辞めたわけです。

そのとき、このサービスネタを考え付きました。そうだ、知らない単語を予測可能にすればいいじゃないか、って。そのアイデアに夢中になって、大体一か月弱くらいでこのサービスを作りました。作るばっかりに熱中して、いまだにその論文も読んでいないんですけどね。

サービスの副作用

実際どんなサービスかというのはリンク先を見てもらったらいいと思います。サービス内容は省略して、サービスを自分で使ってみて思ったことをちょっと書いてみます。

英語を読むのが苦痛じゃなくなった

さて、自分用にこのサービス作って、自分で多少サービスを使ってみた結果、わたしはある発見をしました。英語の文章を読むのがあまり苦痛ではなくなったんです。びっくりですね。どっかの英語の学習商品みたいですが、ほんとの話です。

その理由は、このサービスを使って英文を読んだら、読めなくとも決して徒労にはならないからじゃないかとわたしは推測しています。(超自画自賛ですが、もう少しご勘弁ください。)

何かを学ぶとき、モチベーションを維持することが大事です。そして、そのモチベーションを維持するのには徒労に終わらないことが一番大事だと思うのです。

徒労感を減らすこと

英文を読むときって大抵、調子のって難しい英文読んだり、洋書を買ったりして、結局全然意味わからなくて挫折したりしますよね?普通、英文の内容が分からないとき、「わからなかった」という記憶しか残りません。でもそこで、「ここがわからないことがわかった」というようにマーキングできたらどうでしょう。なんにせよ一歩前進はしたので、全くの徒労じゃなくなるわけです。心が少し楽になりますね。

何かを学習するとき、徒労感を極力減らすことが大事なんじゃないでしょうか。英単語をやみくもに学んでも、実際に自分で今後読まない単語なら、学んでも意味のないことです。実際に必要なことをすることと、そこで駄目だったことをもいっかいリトライするまでの時間を短くすると、たぶんモチベーションが続くんでしょう。

と、このサービスを使ってみて思いました。皆さんも学習系のサービスを作るとき、「徒労感を減らす」ことにフォーカスを当ててみると案外いいかもしれません。

使った技術

話は変わってエンジニア的な話を少々。

今回、サーバサイドはなんとなくPHPにチャレンジしたくてPurePHP + MySQLを使ってます。認証はOpauthで。
クライアントサイドはたくさんライブラリ使ってます。備忘録がてら列挙。

  • Haxe
  • Tooltipstar
    • 単語のツールチップ表示を実現。一要素に複数のツールチップができるのは良い。
  • Intro.js
    • 実際のサイト上で動くチュートリアルを簡単作成。かっこいい。
  • Transit
    • jQueryではできないtransform系のアニメーションを実現。
  • Odometer
    • スロットマシンのようなくるくる回る表示を実現。こういうの知ると使いまくりたくなってクドくなるのは仕方ないよね。
  • rangeslider.js
    • インプットスライダーを実現。タッチパネルにもきれいに対応してるのは珍しい。
  • DataTables
    • 並び替えもできるテーブルを表示。

あと定番どころのjQueryとかBootstrapとか。Sassにも初挑戦でしたが、便利ですねコレ。FlashDevelopでCompassをどう使っていいかは結局よくわかんなかったですが。

サイトデザイン

今回もデザインは自分で行いました。デザインセンスが微妙なのがよくわかりますね。ほんとにこれ、どうやったらいいの…?

デザイン考えてた時のサイト案資料が出てきたので貼っときます。今考えたらストイックなサービスなんだからクールな感じにしときゃよかった。

design

終わりに

徒労感について発見があったので書きたかっただけの記事ですが、サービス内容は結構気に入ってます。デザインは結構アレだったりしますが。

この記事読んでる人はまあ多分まずいないと思いますが、もしよかったらサービスの感想などばしばし書いてくれたら喜びます。

このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。* が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">