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

開発部だより　第67回

このブログでも何度かご紹介させていただいておりますが、SATTは東京ビッグサイトで行われた「e-Learning WORLD 2009」に参加。
私ベル子は3日間とも、現場に立っておりました〜０＾o＾０
今回は、手前味噌てんこ盛りの感想に少しお付き合いください。


白色や青系のブースが続く会場を、奥に進んで見えてくるのは弊社の濃ゆーい茶色の空間。
どっしり感重視の横の木目、カーペットは赤。モニターがズラリで、大モニターからは笑えるプロモーションが・・。
これは、どう見ても目立ちました。



イメージは、個人的には、セレブの隠れ家パークハイア●トホテル！
ファッションショーも行われるあの有名なボールルームのマルチスクリーン前で、歩みを止めたかのような気分です（大げさ）。
当の私は、早速バックヤードで着替えて、コンシェルジュの コスプレ 姿です。

黒のベスト、ワイン色のロングエプロンと同色のタイ、自慢の黒縁メガネまでかけて接客に立ったのですが、なんでしょうこの居心地のよさ。
レセプション業界出身のベル子の血は抑えようもなく、お客様と目が合うだけで、「お呼びでっ。」と心の中で片ヒザを付いています。


期間中、「どうしてそういう衣装なの？」と嬉しいご質問をいただけること十数回。
「ハイ、コンセプトは「ラーニングコンシェルジュ」でございまして」とお答えすると、お客さまは続けて「ああそう。ウチでは・・」とお悩みや現状などを打ち明けてくださることもありました。
熱心な教育関係の方は、ご自身で、イチからeラーニング教材を制作・配信されているとのこと。頭が下がる思いです。
こうしたことをお聞かせいただける機会のない開発部のベル子ゆえ、感動でした。お話くださったお一人お一人に感謝しております。

おかげさまで期間中は大盛況だった上、展示しているサービスも幅広く、これだけモニターをご用意してもお客様にプレゼンをお見せしきれないこともありました。


社員がこぞって出演した、ツッコミどころ満載のプロモビデオの横に立ちながら・・。
ここでずっとeラーニングの露店（？）をやっていたい、そんな気にもなったベル子でございます。
またお会いできることを願って。
ありがとうございました０＾o＾０

開発部だより　第66回

8/5（水）からの e-Learning WORLD 2009で、SATTの「Attain +」（アテイン プラス：コードネーム）と、「smart QUTE」（スマート キュート）がついに公開されます！！
「Attain +」は、SATTの新開発LMSで、今までの「Attain3」とは全く異なるテイストとロジックを取り入れています。
「smart QUTE」は、「interaction Maker PRO」をさらに使い易く、洗練されたデザインでお届けしています。
まだ、SATTサイトにも載っていない「Attain +」と「smart QUTE」！ぜひ、e-Learning Worldで、ご覧ください☆

【Attain +】

（画像をクリックすると拡大します）



【smart QUTE】

（画像をクリックすると拡大します）




【Attain + の特徴】
・Mac OS Xに対応。
・Adobe Flexで作成したリッチなUI。
・データの検索、抽出がリロード無しで高速に。

【smart QUTE の特徴】
・画像のみでなく、音声やFlashファイル、Flashビデオの表示が可能に。
・使い慣れたExcelで、問題の出題や設定が可能。
・ロゴの変更や追加で使用社専用のデザインに。

それでは、東京ビッグサイトでお待ちしています！！
（途中、ゆりかもめでガンダムが見れるはず☆）

開発部だより　第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へ登録。

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

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