英語習慣を身につけるための機能をホームページに設置してみた

2023年2月26日

学習

t f B! P L
ずっと昔にブログで書いた、「One word English」をホームページで復活させました。 One word English 英語勉強のかたち もともとtwitterのbotシステムとして作ったんですが、この度、うちの会社のwebサイトでの機能に昇格させてみました。

以前の仕様と違うところ

前に構築した時は、webサーバーに英語と日本語の書いたcsvデータをおいて、phpでランダムで1個ずつtwitterにbotする形にしていたんですが、 今回は、GoogleBloggerの記事で1問ずつアップロードして、それをランダムで1問ずつホームページのガジェットとして表示をするようにしてみました。 ホームページを訪れる度(リロードする度)に、新しい問題が発生するという仕様変更です。 以前のバージョンでは、GoogleSpreadSheetで表組みで作ってそれをcsvにアップロードするという手間がかかるやり方だったのですが、今回のバージョンでは、英語と日本語が書かれた問題を1問ずつ、ブログを書き足す様に記事を書けばいいだけなので、とても問題追加が楽になりました。 ちなみに、どういった英語の問題が出題されるのかというと、海外旅行などに言った時や普段の日常の何気ない会話や、なかなか出てこない単語(個人的に)などを登録しているので、その日本語が表示されるので、英語で考えてみましょうというような感じです。

技術的仕様公開

今回は、GoogleBloggerのFeed機能を使って、jsonで取得をするだけという簡易な仕様だったんですが、難しかったのは、ランダム機能がFeed機能には備わっていないというところに課題がありました。 記事一覧から1つだけランダムで取得ができれば、非常に楽だったのですが、そうは問屋がおろしません。 そこでデータとにらめっこをして考えたのは、 取得できるJSONには、毎回必ず、記事リストの総数が表示されているので、その総数をlocalStorageにキャッシュしておいて、次回以降はその総数を元にランダム値を取得するような仕様にすることで、サイトに初めて訪れた時は、最新の1問が表示されて、それ移行は常にほぼ全体のランダムが表示できるようになります。 このGoogleBloggerのFeed機能は、取得記事が500記事という上限があり、それ以上になると対応できないため、普通にしていると2年弱ぐらいで上限に達してしまい、過去記事が表示されない(ランダム対象外になってしまう)という状態になってしまうので、それを避けるために考えた仕様です。 1日1問追加していく予定なので、2年弱という計算ですね。 そして、毎回500件もの件数を取得するなんて、とてもじゃないけど、データのやり取りで無駄が多いので、取得するのは、常に1記事だけにします。 GoogleBloggerのFeed仕様で"max-results"と"start-index"というクエリを使うことで実現できるんですね。 max-resultsは、取得する記事件数でこれを1にセットします。 start-indexは、検索する記事のoffset値になるので、これを総数に対してランダム値にするといいんです。 これで、start-indexで指定した位置の1つのみの記事取得が可能になります。 パケットがエコですね。 GoogleBloggerのFeedについての仕様を詳しく知りたい方は、以下のリファレンスページが参考になりますよ。 参考 : Google Developer リファレンス

あとがき

とりあえず、毎日(毎時でもいいですが)、英語に触れていたいと思う人は、是非ホームページにアクセスをして、お題にチャレンジしてみてください。 特に正解しても報酬があったり、お土産がもらえたりするモチベーションアップの施策は何もありませんが、継続出来る人はこのレベルでも十分楽しめると思いますよ。 One word English そうそう、こうした問題って、解答が1つだけじゃないので、自分で答えを作って、解答と違うものをみつけるというのも、英語の学習が捗るポイントだと思いますよ。 まあ、今回紹介したこの機能。自分が使いたくて作っただけなんですけどね。 気に入った方、どんどん使ってくださいませ。

このブログを検索

ブログ アーカイブ

QooQ