簡単にEラーンニングを利用してみたいという要望から、Web上で簡単に作れる仕組みや操作性を求めたため若干時間がかかってしまいました。基本構成よりもユーザーインタフェースに時間がかかっています。

動画ファイルまたは、スライドの画像と音声を複数組み合わせて、講座を作って行きます。
スライドで画像を表示して音声ファイルで説明文を読んだり、動画を再生したりすることでEラーンニングとして利用しています。

本格的ではありませんが、Eラーンニングの敷居が低くなると思います。また、ノートパソコンでローカルにXOOPS Cubeをインストールして、プレゼンなどにも利用出来ます。（DELLのネットブックでも十分利用できます。）

XOOPS Cube Legacy専用です。
対応言語は、UTF-8日本語版のみですが、英語に対応する予定です。

詳しくは、こちらをご覧下さい。

講座の構成や、動画・音声・画像の組み合わせと再生順序の入れ替えなどの作業を１つの画面で行えるようにAjaxを使っています。これにより、思考を妨げることなく簡単に編集が出来るようになりました。

最近買った、デモ用にDELLのInspirom mini 9のSDカード上にローカルサーバを作りXOOPSをインストールしたもので走らせてみました。

遅いCPUでも、FLVの動画の再生もコマ落ちもなく再生されました。ミニノートがあれば、ミニノートにプロジェクターをつないでちょっとした講習会にも使えると思います。

最近のSDカードやUSBメモリーは、スピードも速くなりメモリ容量も大きくなったので、サーバにも頼らずにEラーニングを構築できると思います。

ELMMは、多くの教育関係の方へ使ってもらいたいモジュールの一つになります。オープンソースで近日公開の予定です。

お楽しみに

移植といっても、流用したのがタブ入力とテーブル構成だけでそれ以外は新規に作ったので移植版といえるのか？は疑問です。

機能として、タグの絞込みをもっと簡単にしたくてこんな感じの画面になりました。

現在、blog＋jqueryでタグを絞り込んだ状態です。選択したタグは、赤になります。

タグの横にある[+]をクリックすると、絞込みになります。たとえば、デザインをクリックすると、blog＋jquery＋デザインで絞込みを行います。

また、絞り込んだタグの赤いタグをクリックすると絞込みの解除になります。この場合、blogをクリックするとjqueryのついたデータを取り出してくれます。

ちょっとしたキーワードをいくつか指定するだけで、ブックマークしたサイトが取り出せるようになりました。

また、データの修正を簡単に行うために、インライン編集やAjaxを使った削除を追加しています。

メモ欄は、インラインで編集が可能です。

Ajaxによるデータの削除もOK

こういった感じで、データを良く変更する場合は、Ajaxを使った修正が出来ると管理も楽になります。

デザイン的には、こんな感じでアップロードディレクトリの中の画像や動画を管理画面からチェック出来るモジュールです。

機能的には、SWFUploadというフラッシュを使った複数ファイルのアップロードに対応して、コンテンツ向けの画像や動画を楽にアップロードできると思います。

ただ、フラッシュを使ったアップロードには、セキュリティ的に甘いのでIPアドレスによる制限をかけて使ってもらう方向で、htaccessのサンプルを組成するように追加しました。

今月末、もしくは７月初めにリリースしたいと思います。

まずは、現状の管理画面を見てみよう。ここでは、ディストロビューションのUNMGのキャプチャーです。
XOOPS Cube Legacyでも見た目は変わりません。この画像では、互換モジュールを選択しています。

現状の管理画面

左側へ各モジュールのメニューがあり、選択したモジュールによっては、モジュールのメニューが選びにくい位置になってしまういます。

上記の例では、上から３つめを選択してるので、３つめにモジュールのメニューが表示されています。下の方のモジュールを選択するとスクロールしなくては、モジュールのメニューを選択出来ない為に使いづらい。

解決策として、モジュールのリストをドロップダウンで選択が可能にしてみました。

モジュールを選択するメニューをFree CSS Drop-Down Menu Frameworkを使っています。

このテーマでは、上記同様に互換モジュールを表示していて、左側には、互換モジュールのメニューのみが表示されています。モジュールの管理メニューは左上に固定というわけです。

ケーススタディの画面

次に、モジュールのリストをドロップダウンで選択中の画面を紹介します。

モジュールの選択

上部のメニューから、モジュールをクリックするとモジュールのリストがドロップダウンされモジュールを選択するとそのモジュールの管理画面へと切り替わります。

これにより、モジュールの管理メニューが常に左の上へ表示され、操作により統一感が出て、管理画面の操作が楽になります。

また、あるモジュールだけユーザーに管理させたいという場合に「管理者」と「管理者以外」で、上部メニューの表示も切り替えています。

管理者・・・DASHBOARDとFILE MANAGER ・STATISTICSというリンクが表示される。
管理者以外でモジュールの管理権限がある場合・・・モジュールだけが表示される。

管理者以外の管理画面の表示

と管理画面のテーマを考えてみましたが、現実的に利用するモジュールが多いとブラウザよりもドロップダウンメニューが長くなり実用的ではありません。

この管理画面のテーマとして、こちらからダウンロードが出来ます。

ケーススタディとして、モジュールの選択をドロップダウンが再現できるファイルのみで構成しているので、実際に運用には使えません。

管理画面のテーマをなんとかしたいと思ってる方の参考になれば幸いです。

XOOPS本家の方では、FCKeditorはXOOPS本体の/class/xoopseditor/ の中にあり基本コンポーネントとして使えるようになっています。

XOOPS Cube LegacyでもFCKeditorの2.6にバージョンアップして、便 利なプラグインを使うことでXOOPS Cube Legacyにおけるコンテンツ作成の幅が広がることが分かったので紹介します。

FCKeditorの2.6で大幅に違うのはインターフェースの変更で、lightboxみたいに同じ画面上にウィンドウが開くようになりました。

組み込み方法は、続きをどうぞ

FCKeditorを2.6にして使う方法を紹介します。

1. 準備としてXOOPS用 FCKeditorを入手。
2. XOOPS用 FCKeditorのFCKeditorのバージョンは、2.3.2になるので、FCKeditorは、2.6をダウンロード。
3. XOOPS用 FCKeditorをインストール。
4. FCKeditor 2.6 のコンポーネントをコピー
   FCKeditorの2.6から、/common/fckeditor/editor/filemanager/ 以外を上書きします。
5. FCKeditorの設定を行う
   /common/fckeditor/fckconfig.js の 290行目あたり以降にある各設定をXOOPS用 FCKeditorの設定に書き換えます。
   FCKConfig.LinkBrowserURL = FCKConfig.BasePath + ‘filemanager/browser/default/browser.html?Connector=connectors/’ + _FileBrowserLanguage + ‘/connector.’ + _FileBrowserExtension ;
   FCKConfig.ImageBrowserURL = FCKConfig.BasePath + ‘filemanager/browser/default/browser.html?Type=Image&Connector=connectors/’ + _FileBrowserLanguage + ‘/connector.’ + _FileBrowserExtension ;
   FCKConfig.FlashBrowserURL = FCKConfig.BasePath + ‘filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/’ + _FileBrowserLanguage + ‘/connector.’ + _FileBrowserExtension ;
6. 完了

ブラウザのキャッシュが有効になっていると変更しても画面が変わらないことがあるので、ブラウザをいったん終了して、編集画面へどうぞ。FireFoxの場合で、Web Developer Toolbarを導入している場合は、キャッシュの無効化を行うと反映されます。

関連URL

XOOPS用 FCKeditor GIJOEのXOOPS用 FCKeditorのページ

FCKeditor FCKeditorの公式サイト（英語）