SmartBrainでUserAgentを利用したモバイル端末設定

SmartBrain(Ver:1.13.6)で教材を登録するとき、PC用、iPhone用、Andloid用の3パターンの起動ファイルを選択することが可能です。このとき、以下のHTMLファイルを用意し、iPhone用、Andloid用の起動ファイルをこのHTMLに設定することで、モバイル端末全般に動画教材を配信することが可能です。

SmartBrain管理画面>教材管理:起動ファイル設定

このHTMLはJavaScriptでUserAgentを判定し、適切な動画に誘導するものです。アクセスさせたい端末のUserAgentを調べ、適切な動画を用意することが必須になります。(iPhone、Andloid対応動画の作り方はこちらを参照

<html>
<head>
<script>
// <[CDATA[
var API;
var startTime;
function init(){
startTime = new Date().getTime();
var win;
for(win = window;win.API==null && win.parent!=null && win.parent!=win; win = win.parent);
API = win.API;
API.LMSInitialize(“”);
}
function exit(){
var diff;
diff = new Date().getTime()-startTime;
s=(diff – diff % 1000)/1000;
m=(s-s%60)/60;
h=(m-m%60)/60;
s=s-m*60;
m=m-h*60;
if(h<10)h=”0″+h;
if(m<10)m=”0″+m;
if(s<10)s=”0″+s;
API.LMSSetValue(“cmi.core.session_time”,h+”:”+m+”:”+s);
API.LMSFinish(“”);
}
// ]]>
</script>
<meta http-equiv=”Content-Type” content=”text /html; charset=UTF-8″ />
</head>
<body leftmargin=”0″ topmargin=”0″ onload=”init()” onunload=”exit()” style=”min-height:374px”>
<script type=”text/javascript”>
var strUA = navigator.userAgent.toLowerCase();
if(strUA.indexOf(“android”)!=-1){document.write(‘<a href=”http://****.mp4″ target=”_blank”>Click to Start Video</a>’);}else
if(strUA.indexOf(“iphone”)!=-1){document.write(‘<embed src=”http://****.mp4″ width=”100%” height=”100%” AUTOSTART=true>’);}else
if(strUA.indexOf(“ipad”)!=-1){document.write(‘<embed src=”http://****.mp4″ width=”100%” height=”100%” AUTOSTART=true>’);}else
if(strUA.indexOf(“msiemobile”)!=-1){document.write(‘<a href=”http://****.mp4″ target=”_blank”>Click to Start Video</a>’);}else
if(strUA.indexOf(“blackberry”)!=-1){document.write(‘<a href=”http://****.mp4″ target=”_blank”>Click to Start Video</a>’);}else
{ document.write(‘<embed src=”http://****.mp4″ width=”100%” height=”100%” AUTOSTART=true>’); }
</script>
</body>
</html>

<html><head><script>// <[CDATA[var API;var startTime;function init(){ startTime = new Date().getTime(); var win; for(win = window;win.API==null && win.parent!=null && win.parent!=win; win = win.parent); API = win.API; API.LMSInitialize(“”);}function exit(){ var diff; diff = new Date().getTime()-startTime; s=(diff – diff % 1000)/1000; m=(s-s%60)/60; h=(m-m%60)/60; s=s-m*60; m=m-h*60; if(h<10)h=”0″+h; if(m<10)m=”0″+m; if(s<10)s=”0″+s; API.LMSSetValue(“cmi.core.session_time”,h+”:”+m+”:”+s); API.LMSFinish(“”);}// ]]></script><meta http-equiv=”Content-Type” content=”text /html; charset=UTF-8″ /></head><body leftmargin=”0″ topmargin=”0″ onload=”init()” onunload=”exit()” style=”min-height:374px”><script type=”text/javascript”>var strUA = navigator.userAgent.toLowerCase();if(strUA.indexOf(“android”)!=-1){document.write(‘<a href=”http://****.mp4″ target=”_blank”>Click to Start Video</a>’);}elseif(strUA.indexOf(“iphone”)!=-1){document.write(‘<embed src=”http://****.mp4″ width=”100%” height=”100%” AUTOSTART=true>’);}elseif(strUA.indexOf(“ipad”)!=-1){document.write(‘<embed src=”http://****.mp4″ width=”100%” height=”100%” AUTOSTART=true>’);}elseif(strUA.indexOf(“msiemobile”)!=-1){document.write(‘<a href=”http://****.mp4″ target=”_blank”>Click to Start Video</a>’);}elseif(strUA.indexOf(“blackberry”)!=-1){document.write(‘<a href=”http://****.mp4″ target=”_blank”>Click to Start Video</a>’);}else { document.write(‘<embed src=”http://****.mp4″ width=”100%” height=”100%” AUTOSTART=true>’); }</script></body></html>

UserAgentを利用することで、幅広いモバイル対応が可能ですので、これを元に様々な応用が可能です。ぜひ試してみてください!

SmartBrainは20ユーザまで無料な学習管理システムLMSです。生涯教育や趣味などご自由にお使いください!

Facebookページもよろしくお願いします

CATEGORIES eラーニング, コンテンツの作り方, 北海道ラボby.t2 Comments2010.12.28
記事の投稿者
 

Facebook comments:

コメントをどうぞ

Eメールアドレスは公開されません。

Trackback URL

管理者の承認後に表示します。無関係な内容や、リンクだけで意見や感想のないものは承認しません。

  • 製品・サービス
    PC、iPhone対応のeラーニングシステム。20名まで無料でASPサービスを利用できます
    PC、iPhone対応のeラーニング学習管理システム(LMS)【SmartBrain】
    http://smartbrain.info/
    PC、iPhone対応のeラーニングシステム。ユーザ数無制限のASPコースをご用意。


    eラーニングポータルサイト【elearning.co.jp】
    http://elearning.co.jp/
    eラーニング専門企業(株)キバンインターナショナルの製品を紹介しています。


    コンテンツビジネス支援パック
    http://contentsbank.jp/

    Ustream配信、動画コンテンツ制作、セミナーにご利用いただけるレンタルスタジオ
    Ustreamレンタルスタジオ「パンダスタジオ」
    http://pandastudio.tv/

    eラーニング専門企業(株)キバンインターナショナルのスタッフが、eラーニングに関する情報・最新事情をBlogでご紹介。月50本程度の情報発信を行っています。
    ブログ「blog.eラーニング.co.jp」
    http://blog.elearning.co.jp/

  • アーカイブ
  • カテゴリー
  • Amazon
  • タグ