『教育とITで企業の経営を革新』
駿台グループのITラーニング専門企業 SATT （エスエイティーティー） が明日をサポートします。

開発部だより　第65回

政府のIT戦略本部は「i-Japan戦略2015」を7月6日に決定、7月16日に公表しました。
[概要]
http://www.kantei.go.jp/jp/singi/it2/kettei/090706gaiyou.pdf
[本文]
http://www.kantei.go.jp/jp/singi/it2/kettei/090706honbun.pdf


この戦略には実現可能で具体的な目標が書かれていると感じました。

「i-Japan戦略2015」の将来ビジョンには、「i」を含んだ以下のような２つのキーワードが盛り込まれています。

『Digital Inclusion』　(デジタルインクルージョン)
　　−デジタル技術がまるで「空気」や「水」のように人々に受け入れられる社会の実現
『Digital Innovation』　(デジタルイノベーション)
　　−個人、経済社会がデジタル技術の改革により、新たな価値を創造、革新に取り組める社会の実現

さらに戦略の柱として、
・電子政府・電子自治体分野、医療・健康分野、教育・人材分野の３つに対し重点をおくこと
・デジタル技術の有効利用による産業の活性化、新産業の育成
・デジタル基盤整備として、超高速ブロードバンド基盤の構築、情報セキュリティの確立、使いやすい機器の普及等

を掲げています。
３つの重点分野のうちの１つである「教育・人材分野」の中に
「あらゆる分野におけるデジタル活用の進展を支え、成長を促進」
「先進的なネットワークを活用した遠隔教育やコンテンツを活用した授業・学習支援」
という目標があります。eラーニング産業はこのあたりに関わりがありそうです。

戦略ビジョンにあるキーワードの『Digital Inclusion』が実現していけば、eラーニングの利用を「空気」や「水」のように自然に感じることのできるラーニングシステム・教材コンテンツの需要が高まっていくでしょう。

こういったところに目を向けていくと、これまで以上に「ユーザビリティ(使いやすさ)」を意識し、eラーニング教材の開発・研究を進めていくことが必要だと思います。

開発部だより　第64回

　eラーニングと映像、eラーニングで使用する映像を作成するために役に立つ知識・技術について紹介していきます。

　2011年7月24日のアナログ放送終了、高精細度デジタル放送への完全移行とテレビ放送では横長の画面が完全に標準になる日も近づいてきました。ソフトの制作では縦横比（横縦比）16：9としているものも多くなっています。この横長画面への移行の流れ、eラーニングを含むPCで観る動画にも及ぶものでしょうか。今回は画面のアスペクト比について考えます。

　画面が横長になることの利点は、人間の視野に近くなることで臨場感を高く感じるということが一番でしょう。大画面テレビや映画館のスクリーンがその例ですが、一方その条件を外れた場合はその効果はあまり発揮されないことになります。
　現在eラーニングで使用される映像は、大画面で臨場感を伴ってみるものよりも、情報として提示される静止画の延長のような用途が多いと思います。早くも結論が出てしまいますが、このような用途ではテレビの風潮にあわせてワイド画面にこだわる必要はありません。

　ただ問題なのは撮影する機材の方です。現在、一般的に入手できるビデオカメラは4：3、16：9を切り替えて録画できるタイプがほとんどですが、これが今後テレビに合わせて4：3の撮影機能が省かれていく可能性もあります。そうなると4：3での制作が困難になり、長期間で制作する連続コンテンツ等では、現在から16：9をすすめるべきかも知れません。

　なおコンテンツによっては、静止画と動画をレイアウトとして同じもののように扱うこともあります。そこで静止画について見てみますと、現在一般的に入手・使用されるデジタルスチルカメラで撮影した画像のアスペクト比は通常4：3、従来のテレビと同じです。（ただし動画撮影機能で録画した映像は16：9だったりするので紛らわしい）
こうなると、どちらかをどちらかに合わせて加工するか、または異なるアスペクト比の混在を許してもらうしかありません。

　結論が出たようで出ていないアスペクト比の問題ですが、eラーニングで動画を使用する場合はそのような状態はしばらく続くと思われます。もっともPCでは画像や映像の表示サイズを自由に設定することすらできるので、制作に当たっては綿密な調整と応変に対応が必要でしょう。

開発部だより　第63回

４ヶ月ぶりにこんにちは。開発部リーダーです。
毎日じめじめした日が続いていますが、皆様体調崩していませんか？
私は、うちのエアコンのドライ運転が何気に寒くて、若干風邪気味です
早く梅雨明けしてほしいものですね。

さて、夏のイベントとしてすっかり定着した感のある「e-Learning WORLD 2009」の開催まで、後一ヶ月となりました。
今年はエスエイティーティーも参加いたします。

出展内容は、今年３月から発売を開始しましたsmart PREO（スマート プレオ）はもちろん、eラーニングコンテンツの最新事例も紹介する予定です。
他にも、「e-Learning WORLD 2009」で新発表される隠し玉もある・・・かも？
（というか、今作ってます間に合うかなぁ〜？）

「e-Learning WORLD 2009」ご来場の際は是非エスエイティーティーブースにお立ち寄りくださいね

開発部だより　第62回

　eラーニングと映像、eラーニングで映像を使用するのに役に立つ知識・技術について紹介していきたいと思います。今回は画面効果について考えていきます。

　画面効果、映像視覚効果など言い方はさまざまありますが、今回は普通に録画した状態に何らかの表示的加工をするものを対照として進めます。画面効果の種類を大まかに分けると次のようになります。

・ビデオフィルター
　映像の全体、または一部に加える効果です。わかりやすい例を始めに挙げれば、色があせたように色彩を調整する「フイルム効果」などがあります。eラーニング教材では画面をセピアにするような必要はあまりないと思いますが、暗い画面を明るめに調整したり、輪郭シャープにしたりする加工（補正）はよく使用されるでしょう。

・キーイング
　特定の色だけを取り除く「クロマキー」、明るさの情報から特定部分を抜き出す「ルミナンスキー」などがあり、撮影画面から人物だけを抜き出すような使用方法が主です。
以前はキーを使用するとどこか未来的な雰囲気が漂いそれだけで面白かったものですが、最近はごく当たり前に使用されるようになり、より効果的な使用が求められています。Flash等の表現に自由が利くeラーニングコンテンツでは動画プレイヤーの枠にとらわれずキャラクターを自由に配置することが可能なため、これを用いて色々な表現方法が考えられます。

・画面分割、PinP
　2画面を同時に表示したり、子画面を表示（Picture in Pictuire）する効果です。
二つの画面を同時に表示できるため説明を行うに向いている表現方法ですが、これらは基本的にテレビのように一画面中での表示が前提ですので、eラーニングのように映像以外の情報も同時に表示できる場合はこれ以外の表現も多く考えられます。
例えば、子画面に表示すべき写真を画像ファイルにして同時に表示させる等です。

・トランジション
　カットとカットを繋ぐときの切り替え効果です。単純なものから複雑なものまで、ビデオ編集ソフトを購入すると色々なプリセットがついています。このトランジション、特別な面白さを要求されるような場合を除いては使用しないか使用しても基本的なものにととめるべきでしょう。
また、どのような意図で使用するかしっかり考えないといけませんので、プリセットで簡単に設定できる割には使いどころが難しいものです。

　これら編集時に加える画面効果について述べましたが、最近のビデオ編集ソフトではこれら大抵のことができるようになっています。
画面効果は特殊な効果づくりはもとより、映像の補正・修正に力を発揮するものですので、実際に編集を行う人のみでなく指示や依頼をする側の方もどのようなことが可能なのか頭中で整理できていればお役に立つと思います。

開発部だより　第61回

こんにちは。
縁日のあんず飴ではチョコレート入りがお気に入りの開発部Blackです。
そうです、水飴にあんずやすももではなく、チョコレートがくるまっているのです。

さて、今回はFlash上での画像の取り扱いについてご紹介します。

Flashの新バージョンが出る度に、いろんな機能が強化されています。
例えば、ムービークリップやテキストに影がつけられるようになったり、ぼかすことができたり。
今までFlash上でそのような表現をするには、一度画像編集ソフト等で効果を付けてから、その画像を読み込んで使っていました。
そのような手順を必要とせず、Flash上で用意したシンボルを簡単に加工できるのは、大変便利です。
※フィルタ効果が使えるのは、Flash8以降です。

しかし、そんなFlashでもビットマップ画像（bmp、jpg、gif、png 等々）が苦手なようです。
読み込む画像や位置により、画像がつぶれてしまうのです。
「配置位置が小数点になっている」のが主な発生する要因だと思います。
座標がXX.0の位置だとつぶれません。
（ごく稀につぶれることもあるような気がしますが…気まぐれ？）
これを避けるための手順が、「画像の周りに上下2pxずつ余白を入れる」というものです。

以下にサンプル画像を用意しました。
…余白あり。
…余白なし。

で、実際Flashに取り込んでキャプチャしたものがこちらです。

左側が余白あり、右側は余白なし。
余白なしの、.0ではない位置に配置した方がつぶれてしまっています。

つぶれの心配がないベクターデータを使うことが一番安全ではありますが、画面キャプチャや写真等、ビットマップ画像を使わざるを得ない時もあります。
必要な画像分のサイズ調整が必要となりますが、キレイな仕上がりのためにはこんな一手間も加えられていたりするのです。
（透明なことが多いため見えない場合が殆どですが…）

開発部だより　第60回

　eラーニングと映像、前回に引き続きeラーニングで使用する映像を作成するために役に立つ知識・技術について紹介していきたいと思います。今回は前回に引き続き音声について考えていきます。

　前回は主に撮影時における音声記録について述べましたが、映像コンテンツにて使用される音声は映像と同時録音の現場音のほかに次のようなものがあります。

・ナレーション
　主に説明・進行のために映像に被せるようにして再生される人間の声です。通常は映像にあわせて後から録音を行いますのでアフターレコーディング（通称アフレコ）とも言います。ちなみにアニメーションや洋画等の音声吹き替えはアテレコとも言いますが、広い意味ではアフレコです。
eラーニングコンテンツでは特にナレーションの比重が大きいようです。文字のみが画面に表示され、ただ読むのは味気ないですし、ナレーションに頼らず説明を行おうとすると長時間にわたるドラマ仕立てが必要になり手間がかかります。ナレーションによる説明は人の話を聴いているのとほぼ同じですので、これを基調にすれば理解されやすい無難なコンテンツが作成しやすいのです。

・BGM
　バックグラウンドミュージック、裏で流れるような音楽です。基本的にこれがメインになることは特にeラーニングコンテンツでは稀ですが、ドラマ等では雰囲気作りに大いに貢献しますのでそうのようなコンテンツでは必要でしょう。
　ただ、このBGMを選曲するのは意外に難しいもので、音楽著作権協会に管理委託されているような音楽を使用する場合はそれなりの費用が必要ですし、著作権フリーとされる音楽でもそれば収められているCD等自体はもちろんタダではありません。むしろ著作権フリーの音楽が収められたCDは一般の音楽CDに比べて高価ですし、外部に依頼する制作などでもそれを使用すればの使用料金を計上されます。
　なおBGMは必要ならば自分でつくることも可能です。ある程度の長さの音楽を繰り返して再生するループ音楽を作成するようなソフトウェアもありますので、多くBGMを用意しなければならない場合や希望のジャンルやテンポの音楽が見つからない場合は考えに入れても良いでしょう。

・SE
　効果音（Sound Effect）です。一般的には音楽以外の音声演出のことを言います。正解・不正解を表現する「ピンポン」「ブブー」や時間の経過を表す時計の進む音など、eラーニングコンテンツではBGMよりも使用するケースは多いようです。

その他では「ジングル」と呼ばれる短めの音楽等もあります。
これらの音声は、現場で録音されるものとは違い制作者が意図的に加えるものです。音が映像に及ぼす影響が大きいことは以前にも述べましたとおり、制作者は使用[する／しない]の段階から明確な理由意思を持ってその利用を決定する必要があるでしょう。

次回はまた映像に戻って、画面効果というものについて考えていきたいと思います。

開発部だより　第59回

こんにちは！
SATTのレクリエーション【recreation】担当 たっくんです。
※宴会部長は別にいます（笑）
いろいろな部署間をバッサバッサと飛び回り、レクリエーションの輪を広げるように、日々努めております

今回は、Flexで開発を始めた頃、有ると便利だな〜
・・・って言うか、この簡単なサンプルが欲しかったんだよな〜
って思った物を、ご紹介します。


Flexでデータベース（以後 DBと略す）と連携したシステムやサイトを作成する時に、誰もがぶつかる壁
『接続設定とデータのやり取りの仕方』。

初心者の頃は、本当にただDBからテーブルの内容を抽出してきて、それを画面に表示するだけの単純なサンプルが欲しいんです が、なかなか見つからなかった記憶があります。

そこで今回は、ColdFusionを用いて、FlexでDBからデータを抽出するまでの単純なサンプルをご紹介します。

完成品イメージ

読み込みボタンをクリックすると、DBからデータを抽出して、画面上のデータグリッドに表示されます。

準備

まずは、サンプルデータを仕込みます。
■DB（今回は、MySQLを使ってます。）
・テープル構造

・入力したデータ


■ColdFusionのデータソース設定


■Flexのプロジェクト
・プロジェクト作成時の設定（今回はテストサーバーに直接作成）



・フォルダ構成

サンプルソース

実際のサンプルコードを下記に載せておきますので、参考にしてみてください。

cfcソースコード(sampleCFC.cfc)

<cfcomponent>
  <!-------------------------------->
  <!--- ユーザーの情報を取得する --->
  <!-------------------------------->
  <cffunction name="getUserInfo" access="remote" returntype="query">
    <cfquery name="qGetUserInfo" datasource="sample">
      SELECT *
      FROM user_master
    </cfquery>
    <cfreturn qGetUserInfo>
  </cffunction>
</cfcomponent>


mxmlソースコード(index.mxml)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
  <mx:Script>
    <![CDATA[
      import mx.controls.Alert;
      import mx.collections.ArrayCollection;
      import mx.rpc.events.ResultEvent;
      import mx.rpc.events.FaultEvent;
      
      [Bindable]
      private var userInfo:ArrayCollection;
      
      //ボタンをクリックした時に呼び出される関数
      private function loadUserInfo():void{
        // CFCの関数を呼び出す
        myService.getUserInfo();
      }
      
      //DBから値を受け取る関数
      private function getUserInfoResult( event:ResultEvent ):void{
        // クエリー結果をArrayCollectionに入れる
        userInfo = event.result as ArrayCollection;
      }
      //DBアクセス失敗時（共通）
      private function showMessageFault(event:FaultEvent):void {
        Alert.show(event.fault.message);    
      }
    ]]>
  </mx:Script>
  <!--        -->
  <!-- CF関数 -->
  <!--        -->
  <mx:RemoteObject id="myService" destination="ColdFusion"
    source="takkunSample.cfc.sampleCFC"
    fault="showMessageFault(event)">
    <mx:method name="getUserInfo" result="getUserInfoResult( event )"/>
  </mx:RemoteObject>
  <mx:DataGrid dataProvider="{userInfo}" width="300">
    <mx:columns>
      <mx:DataGridColumn headerText="ID" dataField="user_id"/>
      <mx:DataGridColumn headerText="姓" dataField="last_name"/>
      <mx:DataGridColumn headerText="名" dataField="first_name"/>
      <mx:DataGridColumn headerText="性別" dataField="sex"/>
    </mx:columns>
  </mx:DataGrid>
  <mx:Button label="読み込み" click="loadUserInfo()"/>
</mx:Application>


これで、DBから情報を取得する単純なサンプルが完成です。
このサンプルを元に、いろいろな条件で情報を抽出したり、Flexで画面インターフェースを作成してみてください。

もっと詳しくFlexとサーバーデータのやり取りを知りたい方は、m-Schoolでやっている 『Flex 3 and LiveCycle Data Services: Integrating with Data and Messaging』 を受ける事をお勧めします。
自分も参加したけど、ちょうど知りたい事が分かって、大変開発の助けになりました。
ただ、この講座を受けるなら、少し業務でFlexをやってからの方が、より深く理解できるのでき、自分の業務に活かせると思います

それでは
(^^)/""

開発部だより　第58回

みなさまこんにちは。
未だに、DVDドライブが壊れたハードディスクレコーダーをだましだまし使い続けているという、往生際のわるい、開発部（チ）でございます。

本日は、制作現場での「やっちまったー！」というお話をお届けします。もちろん自分自身の反省の意味もこめて…。

現在、開発部（チ）は、企業様の社内教育向け教材のプロジェクトにディレクション兼教材制作担当として携わっています。
その教材は、「解説教材」と「テスト教材」の2種類あって、開発部（チ）は、そのうちの「テスト教材」の方を担当しています。

開発はFlashで行い、サーバ上のLMS（※LearningManagementSystem　学習管理システム）へ登録したものをインターネット（もしくはイントラネット）を介して学習していただくという形。

教材の作り方はいろいろな方法があると思いますが、今回は、

（１）　LMSへ登録した時の動きを想定しながら、大体の動きをローカルデスクトップ上で制作
　　　　↓
（２）　LMSへ登録
　　　　↓
（３）　登録した教材の動きを確認しながら、履歴関係や細かな部分を微調整

という段取りで行くことにしました。

（１）では、「ローカルデスクトップで動かした時の疑似的な処理（ローカル動作モード）」と「本当にLMSへ登録した時の処理（LMS動作モード）」の2通りの動作モードを用意し、切り替えられるようにしました。（※ここが今回のお話のミソ。）

だいたいの動きがOKになったので、（２）のLMS登録を行い、いよいよ（３）のLMSでの動作確認＆微調整へ。

ここで問題発生！
何度動かしてみても、履歴が全く記録されません。
その他の処理はうまく行っている感じなのに…。

原因を探るべく、画面上に変数の値をずらずらっと表示させてみたり、マニフェストファイルを再度確認してみたり…。

おっかしいなぁ〜、あっているよなぁ〜。

そこで、ふと基本に戻って、動作モードを確認してみると…、

うわー、やっちまったー！！
「ローカル動作モード」のままになっとる！　

ローカル動作モードの時には、履歴送信の処理が不要のため、履歴送信の部分をそっくり抜いてあったのです。
それじゃ、履歴が送られないのも道理。

内心は大・大・大狼狽だったのですが、余りに恥ずかしすぎる失敗なので、まわりのスタッフに悟られないよう、そっと「LMS 動作モード」へ変更し、再度LMSへ登録。

今度は履歴も大丈夫な様です。ホッ。
しかし、早めに気づいて良かったー。あぁ、恥ずかしい…。

自分が仕掛けた穴にまんまとハマるなんて、下手なロードランナーやボンバーマンみたいです。
油断大敵ですね。

開発部だより　第57回

　eラーニングと映像、前回に引き続きeラーニングで使用する映像を作成するために役に立つ知識・技術について紹介していきたいと思います。今回はPC動画に使われる音声について考えていきます。

　例えば家庭用のビデオカメラで撮影を行えば、ほぼ必ずと言って良いほど音声も同時に録音されます。映像と音声は本来違う技術ですが、映像を取り扱う場合は通常音声とセットで考えなければいけません。

　映像に対する音声の重要度は高く、教室で行う授業をビデオで録画してeラーニングコンテンツとして配信する場合は、映像よりも音声の方が大事である場合もあります。そうでなくても音声のない映像は長時間観続けるのはつらいものです。例えば稼動している機械を撮影した場合、録音されている音がその機械の出す騒音だけでもそれがなければ味気なく、あれば以外に退屈しないものです。

　このように映像との組み合わせとして、とても重要な音声ですが、撮影の段階ではあまり重要と思われないことも多いようです。私もコンテンツの開発を行う中で映像の編集と同時に、音声について「もっと聴きやすいように加工してほしい」という要望をよく受けます。では、音声を上手に録るコツはあるのでしょうか？

　これはとても難しい問題ですが、基本的には「雑音そのものを抑制する」か「マイクの位置や種類で工夫する」ことで対策を行います。
「雑音そのものを抑制する」とは、窓を閉めて環境音を遮断したり、エアコンを止めるなどして録音されそうな余計な音を締め出すことです。

こう言っては簡単ですが、実際のところ撮影が主目的でないものを録音する場合、例えば教室の授業を撮影するなどの場合に雑音を遮断するというのはほぼ不可能に近いことです。「窓を閉める」はともかく、受講者に咳をするなとか、椅子を引いたりして音を出すななど望んでも詮無いものです。

　そこで、もうひとつの方法「マイクの位置や種類で工夫する」となるのですが、これはできるだけ録りたい音の近くにマイクをもっていき、録りたい音を雑音よりも圧倒的音量で録音することになります。ただこれにも多く問題が有ります。先ほどと同じ教室の授業の場合、講師の声を録音するとしてピンマイクを装着してもらうのか、2名以上話をする人がいればそれだけのマイクを用意するのか、その他の受講者が意見を言うような場合はどうするのかなどです。

　これだけの話でも音声をきれいに録音することは難しいことであると理解いただけると思います。もちろん撮影を生業としている業者ならマイクや音声ミクサーなど必要な機材を持っていますし扱いも心得ています。ですが、そのような外部の人間にお願いするほどの予算がない場合等は、内部の人間が家庭用ビデオカメラで録るしかないことも多いと思います。

　基本的には、ビデオカメラ1台で手軽な分だけ音声の質を犠牲にするか、あるいは外付けのマイク等を用意して手間のかかる分だけきれいな音で取れるように努力するのかです。実際のところは予算と手間とクオリティを秤にかけて最適なやり方を選ぶしかなく、手軽で簡単、高クオリティとはいかず悩みどころです。

　なおビデオ編集では、PCベースのシステムを使用することにより音声レベルの調整やBGMの挿入など、以前に比べ手間を少なく良質な仕上げができるようになりました。さらに音声の編集用ソフトでは雑音とされる波形パターンを分析して除去できるようなものもあります。現場で質の良い録音を行うことを考えるのももちろん重要ですが、実際にコンテンツになったときのものを考え、編集や制作全体を考えたバランス感覚を持つこともカメラ（録音）を任された者には必要なことなのでしょう。

　次回も引き続き、音声についてに考えていきます。

開発部だより　第56回

こんにちは！

チャーハンの味付けにガラスープが欠かせない burnercrew です。

blogのコメント欄の認証等に使われているCAPTCHA画像ですが、ColdFusionでもVersion.8から簡単に生成できるようになりました。

今回は、CAPTCHA画像の生成を仕方、および実際に生成したCAPTCHA画像をご紹介したいと思います。

まずは生成の仕方ですが、cfimageタグを使用して以下の様に記述します。

<cfimage
action = "captcha"
height="生成する画像の高さ(単位はピクセル)"
width="生成する画像の幅(単位はピクセル)"
text = "CAPTCHA内に表示するテキスト"
/>

実際に生成してみましょう。

<cfimage
action = "captcha"
height="100"
text = "TEST"
width="200"
/>


これでは、ちょっと簡単すぎますね。

そこで属性 difficulty を追加します。
difficulty は
・low
・medium
・high
と、生成される画像のテキストの複雑さを３段階で指定することができます。

では、difficultyに"high"を指定して生成してみます。

<cfimage
action = "captcha"
height="100"
text = "TEST"
width="200"
difficulty = "high"
/>


今度はかなり複雑になりましたね。
*difficultyを指定しない場合、デフォルトでdifficulty="low"として生成されます。


いかかでしたでしょうか。

このように簡単にCAPTCHA画像を生成することができます。

最後になりますが、ColdFusionのヘルプを見るとtext属性には「読みやすいように大文字を使用してください。」との記述がありました。
大文字、小文字で、どの程度可読性が違うのか、生成してみた画像を掲載しておきます。


(画像をクリックしていただくと別ウィンドウで拡大表示します。)

CAPTCHA画像生成時のご参考になればと思います。

ではまた＾−＾