loopshoot.comラボ

loopshoot.com開発の記録

2012年3月16日
by tetsu
0 comments

since 2011.3.11 大震災から1年あなたはどれだけ走ることができましたか? | jogmemo

先週の日曜で、東日本大震災からちょうど一年が経ちました。
この1年間でjogmemoには105,221.9kmのジョギングが記録されました。

距離は人それぞれなので、数字に意味はありません。

しかし、この1年間を振り返る意味では、自分のジョギングの記録を見直すことは意味のあることだと思います。
この1年間何を思って、何をしてきかたをジョギングの記録が思い出させくれるかもしれません。

各ユーザーごとに1年間の走行距離をグラフで見ることができるようにしました。

3.11からもう1週間が過ぎようとしていますが、もうしばらくこのページは残しておきたいと思います。

それではどうぞ → Since 2011.3.11


2012年3月15日
by tetsu
0 comments

カレンダーで視聴管理できます | TED RANDOM


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

ランダムで見れることを一番の売りにしていますが、TEDの視聴記録を残せることが裏に隠した最大の売りです。
どれだけTEDを習慣的に見ているか、カレンダー形式なら一目瞭然です。

jogmemotsuduketerでも欠かせないコンテンツである「カレンダー」
ついに、TED RANDOM にも実装しました。

カレンダー上の1日のスペースは小さいので、写真と時間だけの表示にして、
マウスを当てると、タイトルと概要が表示されるようにしました。

カレンダーのデザインは線を極力なくしてシンプルに。

TEDには日本語字幕があるものだけでも750の動画があります。
毎日1つ見ても2年はかかります。
ゆっくり、焦らず、カレンダーを埋めていくのが正しいTEDの楽しみ方だと思います。

それではどうぞ → TED RANDOM カレンダーページ


2012年3月15日
by tetsu
0 comments

やっぱり書こう

開発をしても、それをこのブログに書くのがどうしても後回しになってしまいます。
Twitterでいいや、Facebookでいいや、と考えてしまいますが、やっぱりそれは違うんだと思う。

自分の言葉でしっかりを書くこと。
SNSはそれを広めるために使えばいい。

やっぱり書きます。

書くことはいっぱ溜まっています。少しでも時間を見つけて書いていきますよ。


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の導入はやめときました。もうすこし勉強してからにします。