Hatena::ブログ(Diary)

PARAGRAPHS

 

2016-12-06

自分がたのしく英語を話す練習をするための仕組みを作ってみた (hugo-recital の紹介)

NIFTY Advent Calendar 2016 の 6 日目の記事です。

昨日は@winterwind26 さん俺たちのSwift 3はまだ始まったばかりだ! - ObjCからSwift 3へ移行するときのTipsでした。

What's that?

Hugo という静的サイトジェネレーターを使って、自分がたのしく英語を話す練習をするための仕組みを作ってみました。

スティーブ・ジョブズのスピーチ動画で試せるのでよかったら使ってみてください。(iPhone でも閲覧できます。)

経緯とか

  • 英語、読み書きはある程度できるけど喋るのがとにかくむずかしいので、口に出して英語を話す練習をしたい
  • 練習したい気持ちはあるんだけど、仕事が忙しくなってきたりすると時間がとれなくてオンライン英会話とかは続かなかった
    • 自分の好きなこと (技術系プレゼン動画・好きな音楽等) で練習すれば気軽に続けられるのではないか?
  • 下の動画で紹介されていた勉強の仕方をやってみたい
    • 英語の映画を漠然と流し見るのではなく、1 シーンずつ繰り返し観て自分の口で再生できるまで練習するというメソッド
    • 地道な方法だけど自然に英語が話せるようになりそうでよさそう
    • やってみようとしたけど、繰り返し練習するために同じ場面へ巻き戻すのが異様にめんどくさい
    • 頭出しを自動化したい

D

使い方

Hugo のテーマとして作ってあるので、普通に Hugo のサイトを作るような感覚で使えます。

## 新しい hugo サイトの作成
hugo new site use-hugo-recital

## 作成されたサイトのディレクトリに移動
cd use-hugo-recital/

## hugo-recital テーマのインストール
git clone https://github.com/tily/hugo-recital.git themes/hugo-recital

## このサイトで hugo-recital テーマを使う設定を書く
vi config.toml ## theme = "hugo-recital" という行を追加

## test.md という記事の作成
hugo new test.md

## 作成された test.md を編集していく
vi content/test.md

y(=youtube), t(=timing), w(=word) という 3 つのショートコード (○○記法みたいなやつ) を使って教材を作っていくことになります。

ミニマムな例としてはこんな感じに書くと、

+++
draft = false
title = "test"
date = "2016-12-05T13:08:11+09:00"

+++

* {{<t "00:22.0">}} Thank you.
* {{<t "00:27.5">}} I am honored to be with you today for your commencement

{{<y VyzqHFdzBKg>}}

こんな感じになります。

モバイル対応について

基本的には bootstrap さえ使っていれば、head タグの中に、

<meta name="viewport" content="width=device-width">

と書けばだいたい Mobile Safari でもそれっぽく表示されます。

ちょっとがんばったポイントとしては、今まで Mobile Safari では YouTube の動画を埋め込んでも再生が開始されるとプレイヤーが全画面表示になってしまって、JavaScript から再生/停止等のプレイヤー API を操作することができなかったのですが、iOS 10 から video タグに playsinline という属性が追加されて、前述操作が可能になったので使ってみました。playsinline 便利。

ある程度使ってみた感触

この仕組みを使って何度も聞いては自分の口で再現しようとするうちに、2179 単語分ぐらいを発音はともかくオリジナルと同じリズムで言えるようになりました。

何度も練習していくと、たとえば、

  • monkey の o の発音は ʌ で、日本語の「あ」に近いとされているけど、実は日本語の「あ」よりは少し口をすぼめている感じがするな
  • f/v はこうやってちゃんと歯を唇にあてて発音するとそれっぽくなるんだな

みたいな感じで、自然に自分なりの英語の発音の仕方が身についていくようになっていておもしろいです。

まとめ

技術的にそこまで新しいことはやってないし、UI 的にもいろいろイマイチなんだけど、作りっぱなしではなく、ちゃんと自分の役に立つものを作れた感じがしてよかったです。

改善点としては、タイミングを入力するのが異様にめんどくさいので、もう少し自動化したりしたいです。あと、ユーザーのメイン操作が「長押し」となっていて、ずっと押していないと再生され続けないのは負担が大きいので、クリックだけで繰り返し再生できるような UI を考えてみたい。

以上、明日は@goya813 さんが何か書くみたいです。お楽しみに〜!

2014-09-21

prgrphs.tokyo の使い方

この記事では、to に影響を受け作成したブログツール prgrphs.tokyo の使い方について説明します。

ユーザー登録・ログイン

左上に admin という隠しリンクがあるので、これをクリックすると画面下部にナビゲーションメニューが出ます。

メニューのログインっぽいアイコンをクリックすると Twitter 認証のページに飛びます。

なお、もう一度隠しリンクをクリックすると、ナビゲーションメニューを消せます。

見る/書く

REST っぽい URL 設計なので、基本はアドレスバーURL を手打ちすることで操作してください。

ユーザーページ http://prgrphs.tokyo/${ユーザー名}
段落新規作成ページ http://prgrphs.tokyo/${ユーザー名}/new
段落個別ページ http://prgrphs.tokyo/${ユーザー名}/${パラグラフID}
段落編集ページ http://prgrphs.tokyo/${ユーザー名}/${パラグラフID}/edit
  • ユーザーページで段落のパーマリンク (>) に 1.5 秒マウスオーバーすると、編集ページへのリンクに変化します
  • 段落新規作成および編集ページで publish のチェックを外すと、プライベートな記事を書くことができます
スマートフォン

ユーザーページで各段落を左にスワイプすると、その段落のパーマリンクへ遷移します。

各段落のページで左にスワイプすると、段落の編集ページへ遷移します。

キャプチャ機能

段落の作成・編集を行うと、自動的に段落のキャプチャが撮影されます (少しタイムラグがあります)。

キャプチャされた画像は http://prgrphs.tokyo/${ユーザー名}/${パラグラフID}.png で取得できます。

※この機能はリソースおよびオブジェクトストレージの領域を圧迫するため、将来的に一部ユーザーのみへの提供、または有料化する可能性があります。

フィード/IFTTT 連携

IFTTT で段落のキャプチャ画像を URL つきで twitter へポストする例:

エクセルダウンロード機能

http://prgrphs.tokyo/${ユーザー名}.xlsx でエクセル形式のファイルとしてユーザーの全段落をダウンロードできます。

自分のページの場合には created_at カラムにも情報が入ります。

使う上で知っておいたほうがよい仕組み

その他

20150214 追記

2014-08-09

常に 1 つ前の段落しか読めないマルコフ連鎖のようなリレー小説投稿サイト、R E L A Y R

R E L A Y R

ソース: tily/relayr

漠然と前から作りたいと思っていて 14 日間の片想い を作ったときにどんな風にしたいか分かってきたので作ってみた。

  • リレー小説だけど常に 1 つ前の段落を読みながら続きを書くしかない
  • ただし登場人物の一覧だけはいつでも登録したり参照したりすることができる
  • 小説を書きはじめるときに指定した段落数に達するまで全文は読めない

「親以外の参加者は全体像がわからない、進行状況もわからないという曖昧模糊とした状態におかれるので、」 (メールでリレー小説 index) そのほうがおもしろいんじゃないかな。子供しかおらず全体像がわからない。どうでもいいけどサイト名は Yes ではなく Relayer3 から。

(中略)

最近 bootstrap 3 が使いやすくて好きになってきたのもあって、wiki とか tropy とか darekagakaku みたいなシンプルで仕組みがおもしろい Web アプリケーションを作るのにはまっていたんだけど、そろそろ飽きてきたので何か別のものを作りたい。

2014-07-26

SlideShare の複数スライドから新しいスライドを作れるやつを作った (弘前市の写真つき)

SLIDE MIX

ソース: tily/slide-mix

人のパワポコピペして自分のパワポを作るみたいな、仕事で普通にやっていることをウェブでもできるといいなと思って作ってみました。

こんな感じの SlideShare のスライド内個別ページの URL を入力していくと、

http://www.slideshare.net/xiangshiqin/slide-share-3257592/5
http://www.slideshare.net/benschwarz/sinatra-rack-and-middleware-1509268/82
http://www.slideshare.net/justlaputa/lt-reveal-js/24
http://www.slideshare.net/AkshayMathur7/coffee-script-32261774/13
http://www.slideshare.net/paramisoft/haml-32848604/11
http://www.slideshare.net/andrefaria/introduction-to-underscorejs/90
http://www.slideshare.net/jeresig/jquery-internals-cool-stuff-presentation/37
http://www.slideshare.net/mongodb/using-mongodb-asatickdatabaseaug2013/34
http://www.slideshare.net/bbayou/redis-8021392/41
http://www.slideshare.net/ayumin/heroku-inside/45
http://www.slideshare.net/ronreiter/bootstrap-26583904/32

こんな感じで入力したページが順番に表示される新しいスライドを作成することができます。

このウェブサービスを作るのに利用した技術に感謝するスライドを作ってみたので例として貼っておきます。

SlideShare にあまり負荷をかけないようにサーバーサイドでキャッシュしたりクライアントサイドで全部ではなく少しずつ取得するようにしたり一応していますが、問題があれば @tily までご連絡ください。

URL をいい感じに埋め込むノウハウが溜まってきている気がする。