loopshoot.comラボ

loopshoot.com開発の記録

2011年12月4日
by tetsu
0 comments

150時間を超えるtalkを視聴管理できます。 | TED RANDOM

TED RANDOM は日本語の翻訳付きのTED talkをランダムに見ることができるサイトです。

ランダムで探したtalkを見た後は、水色のボタンを押して、見たことを記録してください。

このボタンを押すと、こんなグラフが出来上がっていきます。

上の画像にある通り、TED RANDOM は”探す”だけでなく、”記録”もできるサイトになっています。

また、この”記録”によって、ランダムに探すときに「まだ見ていないものだけ」に範囲を限定することもできます。

記録はTwitterのアカウントでできるようにしています。

TED には1000を超えるtalkがあり、日本語に翻訳されているものだけでも、600以上。
その合計時間は150時間を超えます。
記録無しには立ち向かえない、すごいボリュームだと思います。
TED RANDOMはこのボリュームに対応するために作ったサイトでもあります。

それではどうぞ→TED RANDOM 価値あるアイディアとの偶然の出会い


2011年12月3日
by tetsu
0 comments

英文読み上げAPIでリスニングも | WebTitleQuiz


英語学習サイトとして展開しているWebTitleQuizは、リスニングもできます。

目印はこのアイコン。

クリックするとタイトルと概要を別々に音声を流すことができます。

英語学習サイトとして、リスニングは欠かせない要素です。
毎日のニュースチェックにリスニングも混ぜていけば、きっといい成果につながると思います。
是非、再生してみてください。

しかし、残念ながら、この再生機能はiPhone,iPadでは使えません。

これは技術的な問題なのですが、Flashを使っている訳ではなく、
読み上げAPIに使っている Microsoft TranslatorSpeak Method が返す音声ファイルの形式にiPhone,iPad版Safariが対応していないからです。
(同じiOSでもiMac版なら使えます。)
他の読み上げAPIも探したのですが、今のところいいのはなく、手詰まり。
でも、なんとか解決したい。
引き続き打開策を考えていきたいです。

また、音声の再生にはHTML5のaudioタグを使っています。
これはすばらしい。
これが出る前までは、Flashやサウンドプレイヤーを呼び出したりしなければ、音声は扱えませんでしたが、
このaudioタグに音声ファイルを与えてしまえば一発で再生です。
感動でした。

それではリスニングもお楽しみください → WebTitleQuiz – 注目ニュースのタイトルを日本語に訳す英語学習サイト


2011年11月27日
by tetsu
0 comments

翻訳API Microsoft Translator を使ってリアルタイム翻訳 | WebTitleQuiz


英語学習サイトとして展開しているWebTitleQuizは、
上の画像のように、英単語をクリックすることで、単語の意味を調べることができます。

WebTitleQuizは「気軽さ」を追求したいので、このようなリアルタイム翻訳機能はなくてはならない機能の一つです。
少々わからない単語がある場合でも、この機能を使って、手軽に日本語回答に近づくことができます。

翻訳結果の情報は少ないので、英辞郎へのリンクを付けています。
英辞郎へ行けば、その単語の意味はじっくりと検討できると思います。

翻訳には、Microsoft Translator を使っています。

Google翻訳APIが終了されてしまうため、次に信用できそうなMicrosoftを選びました。
appIDの登録が必要なものの、実装自体はサンプルに従えばいいので、それほど難しいものではありません。
ただし、このサンプルがちょっと理解しがたい。
でもピュアjavascriptでクロスブラウザも考えられたコードとなっています。
コードはこちらから。

それではどうぞ リアルタイム翻訳を是非試してください →WebTitleQuiz


2011年11月26日
by tetsu
0 comments

WebTitleQuizはデザインにBootstrap, from Twitterを使っています


英語学習サイトとして展開しているWebTitleQuizは、デザインにBootstrap, from Twitterを使っています。

Bootstrap, from TwitterはTwitterが立ち上げた、サイトデザインに対するフレームワークです。

サイトを立ち上げるとき、デザインを1から考えるのは結構な作業ですが、
その苦労をBootstrap, from Twitterが担ってくれます。

デザインのルールを守れば、「それっぽい」サイトができますし、クロスブラウザの心配もありません。
デザインは凝りだすと、時間がいくらあっても足りません。
デザインのトレンドを追うのも大変です。
Bootstrap, from Twitterを使うことは、サイトを作る側にとって大幅な時間短縮になるのではないでしょうか。

今後は他のサイトでも積極的に導入して聞きたいと思います。

技術的な話も少し。

CSSはgithubのURLから直接インポートしています。

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">

一回ダウンロードしてもいいのですが、githubからのインポートを推奨しているようだし、
サーバにfluxflexを使っているので、その方が伝送量を減らせていいかと思いました。
それでも、すべてをBootstrap, from Twitterのデザインに合わせるのは無理なので、独自のCSSで調整しています。

またlessの導入はやめときました。もうすこし勉強してからにします。


2011年11月23日
by tetsu
0 comments

WebTitleQuizはfluxflexで動いています。(レンタルサーバとの比較)


英語学習サイトとして展開しているWebTitleQuizは、fluxflexを使っています。

fluxflexは、TechCrunchにも紹介されたクラウド・ホスティング・サービスです。
(詳しくは紹介記事を)

perl,phpが使えて、DBもMySQLだし、価格も驚くほど安かったので使ってみることにしました。

fluxflexはGithubとの連携が強みですが、WebTitleQuizのような個人サイトの場合は、Githubに公開プロジェクトを持つようなことはしないので、ローカルのgitで連携しています。

今まで主にレンタルサーバで開発していましたが、
個人サイトを作る上で、レンタルサーバにくらべたfluxflexの利点は

  1. 導入が簡単(ほんとに数分でスタートできる)
  2. 安い (1ドル/月のStanderdプランで十分)
  3. サーバのリソースがわかる
  4. オートスケーリング(料金上がるのが怖いので、使ってないけど)

逆に気を付けたいのが、

  1. Gitの知識が必要(使えてるけどまだよくわからん)
  2. ファイルをダウンロードできない(9ドル/月プランならできるみたい)
  3. 伝送量を気にする必要がある(画像は別サーバだね)
  4. もちろんcronは使えない
  5. fluxflexが落ちたら、サイトも落ちる…

ホスティングにしろレンタルサーバにしろ、軽いサイトを作れなければ苦労だけが残ります。
そういう意味では、制限は多いほどいいのかも知れません。
WebTitleQuizはこれまでに作ったサイトに比べてもシンプルに作れているので、fluxflexを使って正解だったと思います。

よかったらどうぞー WebTitleQuiz


2011年11月20日
by tetsu
0 comments

WebTitleQuiz | はじめてのiPhone対応

遅ればせながら、WebTitleQuiz をiPhone対応しました。

ニュースを題材したサイトなので、モバイルと相性がいいです。
隙間時間を「英語」+「ニュースチェック」に使えるようになりました。

技術的な話も少し。

対応のためにやったことを簡単に。
iPhone対応にはいろいろと方法はありますが、WebTitleQuizの場合は、ページの構成がシンプルなので、
iPhone用のページを用意して、iPhoneからのアクセスをそっちに流すように設定しました。

まず、/m/ にiPhone用のディレクトリを作ったので、.htaccessの設定はこうなります。

RewriteCond %{HTTP_USER_AGENT} iPhone
RewriteRule ^$ /m/ [L]

さらには、iPhone用のページはページの幅をmeteタグで指定して、

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

幅320pxのデザインにしました。

また、ホーム画面に追加された時用の画像を一応用意しました。

<link rel="apple-touch-icon" href="/apple_touch_icon_wtq.png"/>

あと、テストはsafariのユーザーエージェント変更機能を使います。
さらに、google Analyticsはそのままでいいけど、adsenceはモバイル用に変更する必要がありますね。

loopshoot.comはモバイル対応の流れに遅れてしまいました。
これから他のサイトも急ピッチで対応を進めて行きます。

それではiPhoneからもどうぞ → WebTitleQuiz | 注目ニュースのタイトルを日本語に訳す英語学習サイト


2011年11月12日
by tetsu
0 comments

TED RANDOM 「tsuduketerへ記録する」ボタン追加

tsuduketerへの連携

TED RANDOM に新しい機能を追加しました。

TEDの視聴記録をtsutduketerに簡単できるようになりました。

上の画像にあるように、専用のボタンを押すと、tsutduketer向けの書式でツイートできるようになっています。

これを記録していくと、カレンダーになったり、
tsuduketerへの連携

視聴時間がグラフ化されたりします。
tsuduketerへの連携

TEDは強制されたり、モチベーションを作って見るようなものではないですが、
記録することで、どのくらいのペースでTEDを見ているかわかるのはいいですね。

よろしかったらどうぞ → TED RANDOM


2011年10月16日
by tetsu
0 comments

価値あるアイディアとの偶然の出会い – TED RANDOM  リリース!


新しいサイトのリリースをお知らせします。

今、私が意識的に時間を割いていることが、TEDのプレゼンを見ることです。
TEDのプレゼンが、どれも素晴らしいことがわかってくると、見るプレゼンを探すこと自体が面倒になってきました。
そこで考えたのが、この「TED RANDOM」というサイトです。
このサイトは、TEDのプレゼンをランダムに3つ選びます。
現在のところは日本語に翻訳された約700のプレゼンが対象です。
ランダムでいいんです。むしろ、ランダムにして、偶然の出会いを楽しみたいと考えました。

実際に使ってみると、「偶然の出会い」は予想していた以上に素晴らしいものでした。
見るものを検索することは、現代では当たり前のことになっています。
もちろん、検索できることは素晴らしい。
しかし、TEDのようなどれも素晴らしいコンテンツを前にすると、それは情報を制限することにもつながります。
検索は無意識のうちに、自分の興味のある情報しか手に入れられない状況を作り出す行為でもあることを忘れてはいけません。

「TED RANDOM」を使うときには、是非、興味が無いと感じたものこそ優先的に選んでみてほしいと思います。
それが、自分の知識の枠を破って、新しい視点を手にする方法だと思います。
このサイトにはそんな想いを込めました。

それでは、偶然の出会いを楽しんでください。
よかったらどうぞ → TED RANDOM


2011年9月18日
by tetsu
0 comments

注目ニュースのタイトルを日本語に訳す英語学習サイト WebTitleQuiz リリース!


新しいサイトのリリースをお知らせします。
サイト名は「WebTitleQuiz」。
注目ニュースのタイトルを日本語に訳す英語学習サイトです。
誰でも一度は、ニュースを使って英語を勉強しようと思ったことがあるのではないでしょうか。

しかし、この勉強の一番の問題は、日本語訳を確認できないことです。
私も何度も挑戦しましたが、日本語訳がないと、自分の英語力が向上する実感が得にくく、どうしても面白くありません。

そこで、WebTitleQuizを作りました。
WebTitleQuizは、注目ニュースの英文とその日本語訳を同じページに表示します。
つまり、プロの日本語訳を確認できるのです。

データは以下の4サイトから取得しています。

それぞれの日本語サイトのデータと繋げることで、日本語訳を表示できるようにしています。

どう訳すかは、人それぞれですので、表示される日本語訳はあくまでも、ひとつの回答例と位置づけています。

目指したのは、面白くて、気軽な英語学習サイトです。

あなたならどう訳す? ぜひ試してみてください。

それではどうぞ → WebTitleQuiz 注目ニュースのタイトルを日本語に訳す英語学習サイト


2011年6月19日
by tetsu
0 comments

SoccerHacker サッカーハッカー リニューアル!


SoccerHacker をリニューアルしました。
このサイトの前身は、同じ名前の[SoccerHacker][loopshoot Suggest Search]という2つのサイトです。
過去の経緯はいろいろとありますが、
新しいSoccerHackerが何ができるのか、もう一度整理したいと思います。

SoccerHackerは、日本人サッカーファンのための、サッカーコンテンツ検索サイトです。
以下の3つの特徴を持っています。
1.日本語を英語に自動変換するため、英語圏のコンテンツが検索できます。

2.動画、画像に加え、ツイートやフォーメーション、プレーエリア、ニュースなど様々な検索ができます。




3.独自のフォーメーションにより、チームメイトや所属チームも知ることができます。

すこしマニアックに見えるかも知れませんが、
ターゲットユーザーはむしろ、サッカー入門者で、国内サッカーだけでなく海外サッカーへ目を向けるきっかけとなるサイトになれればと思っています。
また、今回のリニューアルでは、ソーシャル機能にも力を入れました。
いろいろ調べる中で、ソーシャルへの時代の方向転換も感じたし、facebookのソーシャルプラグインの威力もわかってきました。
SoccerHackerのファンページはこちらです。
ソーシャル機能はこれからうまく使っていきたいと思います。
それでは、新しくなったSoccerHackerをお試しください → SoccerHacker 海外サッカー動画・画像日本語検索