takumaの「デザインはあれでアートはそれで」

「Googleのリアルタイム翻訳と音声読み上げと字幕挿入」

Ｔａｋｕｍａ　Ｓａｉｔｏｕ — 2009-11-24T22:54:08+09:00

翻訳サイトよく使います。
Youtubeもよく使います。
Takumaです。
　

【翻訳】
１ある言語で表された文章を他の言語に置き換えて表すこと。また、その文章。「原文を―する」
２符号やわかりにくい言葉、特殊な言葉などを一般的な言葉に直すこと。「技術用語を―して説明する」
３細胞質内にあるリボソーム上で、運搬RNA（リボ核酸）が、伝令RNAの遺伝情報としての塩基配列を読み取り、それに対応するアミノ酸を運んでたんぱく質に合成する過程。(by Yahoo！辞書)
　

先日、リアルタイム翻訳のサービスを紹介しました。

▼takumart.net：過去記事▼
「リアルタイムで打ちながら多国語翻訳」 | takumaの「デザインはあれでアートはそれで」in takumart.net

いやーすごいなーって、本当に思ったんですよ。そのときは。
お約束といえば、そうなんですが、Google先生がやってくれました。

■Google翻訳にリアルタイム翻訳や音声読み上げ機能■■■■■■■■■■■

●技術略式：(1)文字翻訳⇒(2)音声情報変換⇒(3)音声再生

▼ピックアップサイト▼
Google 翻訳

ということで、実際にやってみました。

●すごいポイント

(1)リアルタイムでテキストが自動翻訳される。
⇒「翻訳」ボタンをクリックしなくても、翻訳元のテキストを入力するとリアルタイムで翻訳がスタートするようになった。

(2)翻訳テキストの読み上げ機能(英語のみ)がついた。
⇒翻訳先(例えば、日本語⇒英語)が英語の場合、「スピーカーボタン」を押すと音声で読み上げられるようになった。

(3)翻訳結果のローマ字読みが表記されるようになった。
⇒英語以外の翻訳結果の場合、読み方をローマ字表記で表示させる「ローマ字表記を表示」ボタンが追加された。
※ヘブライ語、アラビア語、ペルシア語は対応していない。

という訳で、非常にリアルタイム且つ、インタラクティブになってきたGoogle翻訳。
スマートフォン(Google Android経由)で近い将来使えるようになって、翻訳精度が向上したら、海外旅行の強い味方になりそうだ。

■Google翻訳にリアルタイム翻訳や音声読み上げ機能■■■■■■■■■■■

●技術略式：(1)音声認識⇒(2)文字情報変換⇒(3)埋め込み表示

「YouTube」で，動画再生時に自動で字幕を付ける機能「Auto-caps（automatic captions）」を追加と発表したそうです。
まだまだ実装されている先は少ないようですが、そのうちのひとつをご紹介。

▼ピックアップサイト▼
YouTube - YouTube さんのチャンネル

そもそも、これまで字幕を表示するには、動画の投稿と同時に字幕を記述したファイルをアップロードしなければならなかった。
この方法では、YouTubeにある膨大な動画すべてに字幕を付けるのは困難と判断したらしい。

なので、機械生成(自動音声認識技術を利用)による方法も採用。

●すごいポイント

(1)人物がまだ話し終えていないセリフもあらかじめ表示する。
⇒映画みたいに、発言に対して翻訳テキストがおいついてない事はないそうだ。

(2)字幕は翻訳することもできる。
⇒約50の言語に対応しており日本語表示も可能。

(3)面倒な字幕ファイル作成の手間を軽減した。
⇒字幕のテキスト本文のみ(いままでは、時間コードも必用)で、字幕のタイミングを自動調整するようになった。

■活字情報と音声との相互関係の確立■■■■■■■■■■■■■■■■■■

これが、英語ベースのみとはいえサービス化された以上、今後は多国語化していくに違いない。
結局の所、「翻訳ライブラリ」の精度向上の問題に行き着くのだが、Google翻訳の音声読み上げ機能の発音精度には、びっくりした。

早く、日常的に利用できるようになって、私の語学力の無さをフォローして欲しいと切に願う、今日この頃です。

■参考記事■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

Google翻訳にリアルタイム翻訳や音声読み上げ機能 - ITmedia エンタープライズ

GoogleがYouTube動画に自動で字幕，日本語への翻訳も可能に - ニュース：ITpro

■P.S:今日の気になったサイト■■■■■■■■■■■■■■■■■■■■■

▼ピックアップサイト▼
顔の慣用句コンテンツ集「八百一彦」

●んで、一言

すごく、分かりやすいコンテンツ。
例えば、「目を丸くする」という言葉をクリックすると、上の顔の目が「丸くなる」・・・正直気持ち悪い。

というのが、たくさんあるコンテンツ。
楽しいｗ

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

「ブラウザOS Google Chrome OSがついに公開！！」

Ｔａｋｕｍａ　Ｓａｉｔｏｕ — 2009-11-20T20:29:05+09:00

ブラウザOSって覚えてます？
Google Chrome OSですよ！！
Takumaです。
　

【ウェブブラウザ】
ウェブブラウザ（インターネットブラウザ、WWWブラウザ）とは、World Wide Webの利用に供するブラウザであって、ユーザーエージェントである。具体的には、ウェブページをディスプレイやプリンターに出力したり、ハイパーリンクをたどったりするなどの機能がある。単にブラウザ (browser) と呼ばれることも多い。(by ウィキペディア)
　

▼takumart.net：過去記事▼
「Google Chrome OSについてのまとめ」 | takumaの「デザインはあれでアートはそれで」in takumart.net
にて、「名前/利用料金言語/技術概要/対象ハード/公開予定」や「対象ハードの近年の傾向」と「Appleとのユーザーの係わり合い」についてまとめて。。。

「ビル・ゲイツが語るGoogle Chrome OS」 | takumaの「デザインはあれでアートはそれで」in takumart.net
にて、「ビル・ゲイツの当時のChrome OSに対するコメント」と「ブラウザという単語の表現対象の不明確化」について記事にしてた。。。

「ブラウザOS Google Chrome OS」がとうとう公開されましたね。
(※携帯電話向けOS「Android」とは別のプロジェクト / Chrome自体とも紛らわしいが厳密に言うと別物)

Windowsのようなあらゆるハードとニーズに対応するというより、ネットブック等のハード向けで、ブラウジングに特化したOSという「Chrome OS」。
いろいろ情報が飛び交っているのでまとめてみようかと。

■ブラウザOSでも、どんな特徴があるの？■■■■■■■■■■■■■■■■

(●インターフェース-1) Google Chrome(ブラウザ)と基本インターフェースは、さほど変わらない。
(●インターフェース-2) ブラウザの中に「パネル」と呼ばれる小さなウィンドウが設けられている。
(●インターフェース-3) 専用のボタンを押すとWEBアプリケーションへのアクセスする。
(●インターフェース-4) ブラウジングしながら各アプリケーションへのアクセスが行なえる。

(●連携サービス/アプリ-1) 既存のGoogleのツール(Google Talk：チャット/Google Docs：メモ帳)等との親和性が伺える。
(●連携サービス/アプリ-2) 既存のGoogleのサービス(Googleブック検索)等との親和性が伺える。
(●連携サービス/アプリ-3) 音楽(プレイーヤー実装)等のマルチメディア要素も想定されている。
(●連携サービス/アプリ-4) 外部のネットサービスも利用できる。(ExcelファイルもWindows Liveサービスで編集可能)
(●連携サービス/アプリ-5) PDFファイル等も、既存のGoogleサービス(Google Docs)経由で閲覧できる。

(●ハード連携-1)ハードとの連携も考慮されている(SDメモリカード上のファイルの展開)

■じゃ、動いてるところを見てみましょう！！■■■■■■■■■■■■■■

公式サイトでは、そのデモと解説ムービーを見ることが出来ます。

▼ピックアップサイト▼
Chromium Blog: Hello, open source developers. Would you like to help build an operating system for web users?

●Chromium OS Fast Boot(早い起動について)

●Google Chrome OS UI Concept Video(UIのコンセプトビデオ)

●Chromium OS Security(セキュリティについて)

●Chromium OS & Open Source(オープンソース)について

個人的には、やはり「Google Chrome OS UI Concept Video(UIのコンセプトビデオ)」が気になりましたね。

■マイクロソフトもブラウザOS作っているんですよ■■■■■■■■■■■■

度々、複数の環境依存に頼るクラウド的なアプリケーション＆ソフトサービスには、そのアクセス領域の中でのセキュリティやダウン時のリスクが言及されています。
でも、今更ながらGoogleが狙ってきた戦略が繋がった感じで、改めてすごいですね。

ちなみに、マイクロソフトもブラウザOSについて研究しています。

▼takumart.net：過去記事▼
「マイクロソフトのブラウザOS、Gazelleってあるのね」 | takumaの「デザインはあれでアートはそれで」in takumart.net

Gazelle（ガゼル、ガゼール）は、マイクロソフトが研究開発中のウェブブラウザであり、それを稼働させるためのオペレーティングシステム環境です。
「Google Chrome OS」と同じ「ブラウザベースのOS：ブラウザOS」で、発表も先立ったのに印象がうすいです。

しかしながら、GoogleほどブラウザOS上での完結度を狙っていないそうなので、立ち居地が難しいですよね。

今後のWEB設計も大分かわってくるなーと思った今日この頃です。

■参考記事■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

Googleの独自OS「Google Chrome OS」をスクリーンショットで徹底解説 - GIGAZINE

［速報］グーグルが「Chrome OS」ついに公開！ソースコード含む詳細を明らかに－ Publickey

公開は1年後：Google、Chrome OSを初披露――コードをオープンソースで公開 - ITmedia エンタープライズ

■P.S:今日の気になったサイト■■■■■■■■■■■■■■■■■■■■■

▼ピックアップサイト▼
Put on a Panto

●んで、一言

イギリスのソフトドリンクブランド「ロビンソン」のキャンペーンサイト。パントマイム
あなたがシンデレラ、白雪姫アラジン、ピーター・パンのストーリーから、自身のパントマイムや観客のリアクション等を反映できる感じのコンテンツ。
そして、パントマイムポスターを作ってくださいと書いてありますね。。

それにしても、アニメーションがやたらよく出来ているわ～

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

「Googleの画像検索結果がホイール状にグルーピング：Google Image Swirl」

Ｔａｋｕｍａ　Ｓａｉｔｏｕ — 2009-11-19T00:00:00+09:00

Googleが新しい検索結果表示を発表しました。
まだラボなので実験中という位置づけですが。
Takumaです。
　

【Swirl】
1 ぐるぐる回ること、回転, 渦巻き。
2 （髪の）巻き毛；（帽子の）巻き飾り；渦巻き線［形］。
3 混乱；（船・魚などが作る）小さな渦。(Yahoo！辞書)
　

今回は、Googleの画像検索の新しいインターフェースとそれを支える最新技術についてです。
知っている限りつなげてみました。

▼takumart.net：過去記事▼
「情報のあり方を考え直すタイミングとgoogle：前半」 | takumaの「デザインはあれでアートはそれで」in takumart.net
にて、紹介をしました「ワンダーホイール」。これは、キーワードの関連性をホイール状に並べるというインターフェースです。

これの画像版がこのたびラボでリリースされたとの事です。

▼ピックアップサイト▼
top

■どういうプロセスを経て出力されているのか？■■■■■■■■■■■■■

現行のGoogleの画像検索は、キーワードが基になって抽出されています。
しかも、クローリングされたものの中から該当してものは、一元的に表示します。

こんな感じ。

(Step.1)事前にクローリングされたサイトから画像と周辺のテキストやALT情報を保管。
　↓
(Step.2)ユーザーの検索キーワードに関連性の強い物を(過去の閲覧情報等もおそらく考慮)選定
　↓
(Step.3)大量に検索結果ページに吐き出す。

しかし、「Google Image Swirl」のすごいところは、その関連付けとビジュアル化にあると思います。
特に違うのは、「Step.2」以降。

(Step.1)事前にクローリングされたサイトから画像と周辺のテキストやALT情報を保管。
　↓
(Step.2)各画像の属性情報を紐付けて、詳細にその画像の内容を推理する。
　↓
(Step.3)ユーザーの検索キーワードに関連性の強い物を属性情報の強弱から判断してグルーピング
　↓
(Step.4)グルーピング結果を表層はFlashのインターフェースに吐き出す。
　↓
(Step.5)グルーピングのひとつを選択させて、その中の画像の関連性を含めて、中身を提示してくれる。

一件、手順が多くなっているが、現行の「山ほどの検索結果画像から」目的の画像を探す手間をだいぶ自動処理してくれている。
つまりは、人間が判断していた領域を簡単に行なった上で提示してくれていると考えられる。

しかし、このナビゲーションで気になったのは
・一度に提示できる画像数がまだすくない。
・関連性を判断している属性情報の関連性ロジックの精度が不十分だと逆に障害になりかねない。
という点。

一つ目はまだ実験段階なので実装する際には調整されるに違いない。
二つ目については、以下のような技術でクリアしようとしている。

ちなみに、この「属性情報の関連性ロジック」だが、表ベースにするとこんな形でも提示されている。
「Google Squaredがとうとう公開」 | takumaの「デザインはあれでアートはそれで」in takumart.net

加えて、画像自体の整合認識も行なっている。
「googleが世界の名所を見分けちゃいます」 | takumaの「デザインはあれでアートはそれで」in takumart.net

画像の周辺情報だけでなく、関連付けや画像自体の内容まで、理解し始めているのだ。

■熾烈になる画像検索のBingとGoogleのアプローチ合戦■■■■■■■■■■

というように画像検索に対して、そのニーズにたいするアプローチを幾つも施策とロジックで提示してきているGoogle。

▼takumart.net：過去記事▼
「Googleのイメージ検索がかわった」 | takumaの「デザインはあれでアートはそれで」in takumart.net

よりシンプルに。合理的にという側面をアプローチしてきたGoogleに対して、
次世代的なライバル検索サイトであるBingも一歩先にシルバーライトで先手を打っていた経緯がある。

▼takumart.net：過去記事▼
「bingとGoogleの次世代画像検索アプローチ」 | takumaの「デザインはあれでアートはそれで」in takumart.net

これらが、今後正式リリースとなりどれがメインで、どれがサブになるか。
今後のWEBサービスのデザインにおいて非常に興味があるジャンルです。

■参考記事■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

米グーグル、画像検索の新サービス「Image Swirl」を実験公開　国際ニュース : AFPBB News

Google、画像検索の結果をホイール状に表示する「Image Swirl」 - ITmedia News

■P.S:今日の気になったサイト■■■■■■■■■■■■■■■■■■■■■

▼ピックアップサイト▼
TOYO KITCHEN STYLE｜トーヨーキッチン&リビング株式会社

●んで、一言

トーヨーキッチンのスタイリッシュシステムキッチンのブランドサイト。
正直、キッチンとは思えないデザインと景観をしています。他にもリビング等もありますが。

写真がカッコイイ感じであるので、フルFlashではないもののビジュアルがうまく使われているデザインです。
比較的、紙にちかいレイアウトを非Flashでやっているので個人的には好きなサイトです。

画像の斜め切り配置かー。今度、マージンがいかせるサイトのデザインする時はやってみよっと。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

「作品を追加しました」

Ｔａｋｕｍａ　Ｓａｉｔｏｕ — 2009-11-18T06:47:16+09:00
秋から冬へに移る昨今、
写真を撮って来ました。
Takumaです。
　

【彼岸花】
ヒガンバナ科の多年草。土手や田の畦に生える。秋の彼岸のころ、高さ約30センチの花茎を伸ばし、長い雄しべ・雌しべをもつ赤い6弁花を数個輪状につける。花の後、線形の葉が出て越冬する。有毒植物であるが、鱗茎(りんけい)を外用薬とする。曼珠沙華(まんじゅしゃげ)。死人花(しびとばな)。捨て子花。石蒜(せきさん)。天蓋花(てんがいばな)。天涯花。幽霊花。かみそりばな。《季秋》 (by Yahoo！辞書)

というわけでして、写真を結構撮ってた秋でした。
その中から作品として気に入ったものを3つアップしました。

▼takumart.net：Photo Works▼
takumart.net - Takuma saitou Art works ＞ Photo Works

・「彼岸華」
・「虹花柱」
・「朧」

冬も、ひきこもりにならないように、写真撮影に出かけなきゃｗ

■P.S:今日の気になったサイト■■■■■■■■■■■■■■■■

▼ピックアップサイト▼
全日本バーベタイム選手権

●んで、一言
verbatimというメディアの日本上陸のキャンペーンサイト。
なぜか、漢字や英語の意味を選択するクイズを行うと、その結果によって初期値が違うモンスター(メディアモンスター)が授けられる。ランキングシステムや対戦(必殺技等以外はAIでの対戦)を行う事でモンスターの能力値が上がるというシステム。

ちなみに、おいらのはコレ。

強く育てると「ボス」という一群と対戦できるのだが、異常に強い。
10回以上やって勝ったけどね！！！！

PS2ソフトの「らくがき王国」を思い出したが、こんなのがWEBでできるようになったんですよね～

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

「画像サムネイルを並べるRandom Image Plugin(for WordPress)」

Ｔａｋｕｍａ　Ｓａｉｔｏｕ — 2009-11-16T06:03:47+09:00
ブログ記事に画像を挿入したりします。
サムネイル一覧作ってないの思い出しました。
Takumaです。
　

【サムネイル】
画像や文書のファイルを縮小表示したもの。多数のファイルを一覧表示する際に使われる。」(by Yahoo！辞書)

　

というわけで、久しぶりにworepressの改造です。

▼takumart.net：過去記事▼
「ユーザーヒートとページ内導線解析」 | takumaの「デザインはあれでアートはそれで」in takumart.net

にて、このブログのヒートマップ検証をしたわけですが、3カラムタイプのいちばん右。
このカラム中盤の注目率が下がっていました。

・セカンドページ以降で「最新記事」へ回遊ができていない。
・下部のブログパーツにアテンションを奪われている。
・テキストベースで構成されたエリアは本文でない限り読み飛ばされる。

というのが、複数の検証結果から改めて見えてきました。

■この中盤領域に新しいアテンションを■■■■■■■■■■■■

というわけで、この「魔の右カラム中盤(←命名ｗ)」に回遊窓口＆アテンションを作り、下部のブログパーツ領域に行く前にピックアップできないものか。

というわけで、最新記事との絡みで「最新画像」を表示することにしてみました。

いろいろと、調べてみたのですがカラム表示で管理画面から適切な調整ができる下記のwordpressプラグインを選択しました。

▼ピックアップサイト▼
Random Image Plugin for WordPress - Justinsomnia

■大まかな手順は以下のとおり■■■■■■■■■■■■■■■■

●導入(プラグインダウンロードからテンプレート改造＆プラグイン可動)

(Step.1) 上記公式サイトからプラグインファイルをダウンロードして解凍。

(Step.2)「randomimage.php」をwp-content/pluginsにアップロード。

(Step.3) プラグインを有効。

(Step.4)「」と表示させたいテンプレートファイルの街頭箇所にソースを挿入して本番環境にアップ。

※takumaの場合は、右カラムのphpファイルに挿入しました。

そして、細かい設定をwordpressの管理画面から行います。

●設定(基本機能実装後の表示内容微調整)

(Step.4) wordpress管理画面にログイン。

(Step.5) [各種設定]＞[Random Image]のタブを開く。

(Step.6)以下、表示項目を調整して適正化す。。

(Step.7)「Update Opthions」ボタンをクリックして反映。

(a)Include images from WordPress posts? / Pages?
「アクティブのページ：posts」もしくは「固定のページ：page」のどこから画像を抽出するかを選択できます。
⇒「最新画像」なので「posts」のみをチェックしました。

(b)Sort Images Randomly?
抽出するサムネイルが対象先から「ランダム」もしくは「最新記事から順番」に表示されるかを決める。チェックを入れるとランダム。
⇒「最新画像」なのでチェックをはずしました。

(c)How many images to display?
抽出表示するサムネイル点数の数を決めることができます。
⇒二段組みにしたかったので「10」にしました。

(d)HTML Template
各抽出されたサムネイルにセット(1ブロック)で表示する要素指定が行えます。
「%1が記事タイトル、%2が画像、%3がalt」ですが、1と3に関しては文章が長いとサムネイルが見づらくなるので注意です。
⇒「%2」だけで初回は表示することにしました。

(e)HTML between images
複数のサムネイル間のHTML要素指定です。デフォルトでは改行タグが入っています。
⇒特に必要ないのでカラにしました。

(f)Optional attributes for ＜img＞ tags
画像サムネイルに対する指定。画像のサイズや各画像サムネイルにひもづくCSS指定を行えます。
⇒画像サイズと画像周りのマージン調整指定をしました。

(g)Limit by categories/tags
画像抽出対象となるカテゴリの指定。チェックしたカテゴリのみを表示しますが、チェックなしの場合は全対象となります。
⇒チェックなしで全対象

(h)String to match in the ＜img＞ class
「記事側で指定したclass指定」と「この設定で指定したclass指定」が合致した際にのみ表示されるようにする指定項目。
⇒個別指定が必要ないため空欄

(i)Regex to match against the ＜img＞ src
画像のファイル名を指定して表示する場合の指定項目。JPGやGIFやPNGが指定できるが、項目入力すると他の拡張子ファイルが表示されない。
⇒個別指定が必要ないため空欄

という感じで、簡単に表示されました。
実作業時間としては15分程度でした。各項目の意味を探すのに若干手間取りましたがｗ
さて、ヒートマップの結果はどうなるやら。ドキドキですな。

■参考サイト■■■■■■■■■■■■■■■■■■■■■■■■

・記事の画像をサイドバーなどにランダム表示するプラグイン[WP] - ミblog : レビューや日常など
・WordPressプラグイン『Random Image plugin』を使って過去記事を掘り起こす。 - HAAYA
・記事やページ内の画像をランダムに表示してくれるプラグイン | Tips Community
・WordPressの記事画像のサムネイルをランダムに表示するプラグインRandom Image | 無料で使える情報探す「おぼえがき」

■P.S:今日の気になったサイト■■■■■■■■■■■■■■■■

▼ピックアップサイト▼
HOW TO MAKE WONDER CHRISTMAS - イセタンワンダークリスマス 2009

●んで、一言

Flash絵本のようなコンテンツ。
世界のどこかにある「ワンダーエデン」を舞台に、クリスマスシーズンで大忙しの様子をファンタジックかつシュールテイストのイラストで展開していきます。
(作家は、クラウス・ハーパニエミ氏だそうです。)

次回は11月25日とのことで、12月16日に準備が進められているパーティー会場が公開になるそうです。

クリスマスシーズンのキャンペーン系がこれからも多くなりますね。
こういう、ストーリーのあるコンテンツは楽しみですね。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■