Chrome Life

Chrome OS, Chrome Web Store などChrome関連の話題、Google+などの新しいGoogleサービス、HTML5, JavaScript, CSS3によるWebアプリ開発、ChromeBook、MacBook Air、クラウドの活用方法などを紹介

ホーム > Chrome > HTML5+WebGLで医学・解剖学が学べる!3D人体解剖図ウェブアプリ「BIODIGITAL HUMAN」

HTML5+WebGLで医学・解剖学が学べる!3D人体解剖図ウェブアプリ「BIODIGITAL HUMAN」

私たち人間の体はとても複雑で神秘的な造りをしています。

医学が進歩しても、いまだに解明できていない病気も多くあります。

そんな不思議のベールにつつまれた人体ですが、最新のWebテクノロジーを使って医学・解剖学の分野で理解を深めるためのツールが登場してきています。

今回ご紹介するのは、HTML5とWebGLのウェブ標準技術を使った人体解剖図のChromeウェブアプリ「BIODIGITAL HUMAN」です。

BIODIGITAL HUMAN」は、詳細な医療の説明と組み合わせて人間の構造を3Dで学ぶことができる教育ツールです。

Googleからも同じような3Dの人体解剖図ツール「Google Body Browser」がラボで登場しましたが、Google Mapの人体解剖図版といったレベルでしかありませんでした。

BIODIGITAL HUMANは、人体解剖図が見れるだけでなく、臓器1つ1つの詳細な説明や、関連する病気・症状など医学的に必要な知識が学べるようになっています。

それでは、実際に使い方を見て行きましょう。

3D人体解剖図ウェブアプリ「BIODIGITAL HUMAN」

BIODIGITAL HUMAN」をChromeウェブストアからインストールします。

起動すると、ブラウザ環境のチェックが行われます。

HTML5やWebGLが使える環境でグラフィックカードが対応していればYES!と表示されます。
筆者のMacBook Airでも問題なく使えました。

性別を選ぶと、3Dデータのローディングが始まります。(ネットワークの環境によっては多少時間がかかります)
起動すると3Dの人体図が表示されます。

画面下にあるツールバーで、回転や移動、拡大・縮小などの操作が行えます。
スナップショットボタンを押すと表示しているモデルを画像としてダウンロードすることが可能です。

臓器や血管、筋肉などはレイヤーに分かれており、細かくレイヤー毎にON/OFFすることが可能です。

筋肉までのレイヤーをONにするとこのようになります。

ツールバーでX線表示モードに切り替えることもできます。

左側のタブでCONDITIONSを選ぶと、臓器の動きをシミュレーションすることができます。
心臓が音とともにリアルに動きます。
正常時の心臓と不整脈の心臓と比較することが可能です。

調べたい部位をマウスで選択すると、その部位の説明が表示されます。
例えば甲状腺を選んだ場合、関連する病気として甲状腺癌の説明が表示されます。

説明は全て英語ですが、医学を学ぶ人は英語ができると思うので問題ないですよねw

是非、BIODIGITAL HUMANのデモムービーもチェックしてみてください。

YouTube Preview Image

まとめ

HTML5やWebGLの技術を使ったものといえば、ゲームなどのエンターテイメント要素が注目されてしまいますが、今まで専用のソフトや高額な機材が無いと学ぶことができなかった教育現場の方が有効活用できるのかもしれません。

BIODIGITAL HUMAN」のような医学の進歩に貢献するようなツールがもっともっと増えるといいですね。

それにしても、ブラウザさえあれば何でもできちゃう世界になりつつありますねw

それでは、また!

【キーボード派のプログラマーにオススメ】
コマンドラインをこよなく愛する人のために、Chromeで最強のコマンド環境を構築する方法をまとめたので是非、チェックしてみてください。
これはすごい!Chromeで最強のコマンド環境を構築する方法「gleeBox+Quix」

【HTML5で新しくサイトを作る人にオススメ】
「HTML KickStart」を使えば、ベースとなる要素が整備されているので、スクラッチでサイトを素早く作ることができますよ。是非チェックしてみてください。
人と違うデザインのサイトをスクラッチで作るならHTML KickStartをベースにするといいですよ!

【誰でも簡単にChromeテーマが作れちゃう!】
Chromeウェブストアに公開しなくても手軽にテーマが作れるアプリケーションです。こちらもあわせてチェックしてみてください。
これはすごい!思い出の写真からChromeオリジナルテーマが作成できる「My Chrome Theme」

【HTML5製プレゼンテーションツール】
jQueryベースで使いやすいプレゼンテーションライブラリーを見つけました!こちらもあわせてチェックしてみてください。
いろんな用途で使える!柔軟性の高いHTML5プレゼンテーションライブラリー「Presenteer.js」

【マウスで銀はがしを体験できるプラグイン】
こちらはユニークはjQueryプラインです。用途としては、ブラウザ上で簡単なスクラッチくじを実現したい場合や、宝探しゲームのようなものや、レア画像を削って見せていくなどに使えそうですよw
スクラッチ宝くじのような削ると見えてくるjQueryプラグイン「wScratchPad」

【おすすめのオンライン画像加工アプリ】
HTML5のCanvasを使った実用的なグラフィックツールをまとめました。こちらもあわせてチェックしてみてください。
HTML5で作られた驚異のフォトエディターまとめ

【デモやプレゼンでブラウザからSSH接続したい時に使える!】
ChromeからSSHサーバーにセキュアな接続ができるエクステンションです。内部的にはネイティブクライアントを使っているので安心して使えそうなので、こちらもチェックしてみてください。
これはすごい!ChromeがSSHクライアントになるエクステンション「Secure Shell」

【3Dグラフィックスの現場で使えるサービス】
ファイルをアップロードするだけで3Dモデルの共有ができるサービスです。様々な3Dファイルフォーマットに対応しているので、こちらもあわせてチェックしてみてください。
3Dモデルが簡単に共有できるWebGLを使った3Dモデルビューア「3dfile.io」

【画期的な3Dモデルテクノロジー】
顔写真をアップロードするだけで簡単に3Dで動く顔が生成できる技術です。デモが用意されているので是非試してみてください。
これはすごい!一枚の顔写真から自分の顔の3Dモデルが作れるサービス「Vizago」

人体解剖学、生理学に関するオススメ書籍

タグ: , , , , ,

新着記事

この記事の読者におすすめの記事

このブログを購読しませんか?

RSSリーダーを使うと、このブログの更新情報がすぐに入手できるようになります。
このブログのRSSをRSSリーダーに登録すれば、更新されるたびに記事の本文を読むことができます。

Twitterでもこのブログの更新情報や筆者が見つけた情報をつぶやいていますので、@opakenをフォローしていただけるとうれしいです。

Facebookのファンページも用意しています。こちらでも更新情報を配信しています。「いいね!」をクリックしてもらうだけで購読できます。