簡単に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のサンプルを組成するように追加しました。

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

学問的にどうだ！というのは、よく分からないので良く行くのブログやサイトから調べてみます。
（注：Windows XP でメイリオでサイズが１５の場合）

３０文字台のサイト
CNET Japanの記事では、 全角33文字（半角66文字）
ギズモード・ジャパンでは、 全角３４文字（半角６８文字）

４０文字台のサイト
JBpress（日本ビジネスプレス）では、 全角４０文字（半角８０文字）
はてなダイアリー日記では、 全角４２文字（半角８４文字）

５０文字台のサイト
NIKKEI NET（日経ネット）では、 全角５１文字（半角１０２文字）
Yahoo!ニュースでは、 全角５２文字（半角１０４文字）
WIRED VISIONでは、 ほぼ全角５２文字（半角１０４文字）
毎日jp（毎日新聞）では、 ほぼ全角５３文字（半角１０６文字）
asahi.com（朝日新聞社）では、 ほぼ全角５３文字（半角１０６文字）

現実的に文字数で判断するのは、ブラウザのフォントのサイズ指定や使うブラウザなどでも代わってくるので文字数で判断するのは良くないです。ホントは幅を何pxで指定してるのか？を調べると良かった。

基本的に文字数で制限するのは良くないけど、文字数で調べてしまったので、このまま話を進める(笑)

文章が多いニュース系のサイトは、一行の文字が多い。ブログだと文字の量が多くないので３０～４０文字前後の方がいいみたい。

サイズ的には、500から600pxあたりが落ち着く感じです。

調べたサイトが個人的な嗜好もあるし、サンプルにはならないかも知れませんが、参考になれば、幸いです。

間寛平 アースマラソンのプロジェクトでは、Webサービスを上手に使っています。

Googlemap 現在の位置やこれまでの道のりをマップで紹介

Flickr earthmarathon’s photostream ブログへの画像の投稿とFlickrのアルバム

YouTube – earthmarathon’s Channel 動画で紹介

多分衛星電話とかを使ってるんだろうけど、ヨットからも写真や動画をリアルタイムで送ってるので状況がリアルに伝わってきます。

今だから出来るようになった事けど、それを使いこなしているという良い例になると思います。

しかし、太平洋の海の様子とか半端ないですね。見渡しても自分だけという環境は想像出来ない・・・

寛平さん、無事到着おめでとうございます。まだまだ先は長いですが、頑張ってください。

昨日レンタルCDを借りて新しく音楽を入れて、聴いていたんだけどランダムに再生されてしまいシャッフル再生のまんまになってたので調べてみました。

Geniusの機能が有効になってる場合、iPhoneのiPod再生画面でアルバムワークをタッチするとGeniusバーが開きます。

このGeniusバーのシャッフル再生のアイコンを確認します。

シャッフル再生がオンの状態だと青色になっています。

この青くなったアイコンをタッチすると、白くなります。この状態がシャッフル再生がオフの状態で、曲の順に再生されるようになります。

Geniusバーは普段表示させていないので、盲点的な設定でした。

誰かの参考になりそうなのでアップしました。

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

現状の管理画面

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

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

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

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

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

ケーススタディの画面

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

モジュールの選択

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

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

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

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

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

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

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

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

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

表示させたい場所へテンプレートへ以下のコードを追加します。

記事の中で複数の画像を使っていても、1つの画像を表示します。このサイトでもサイドバーで利用しています。

<?php
query_posts(’showposts=10′);
if ( have_posts() ) : while ( have_posts() ) : the_post();
$files = get_children("post_parent=$id&post_type=attachment&post_mime_type=image");
if (!empty($files)){
$keys = array_keys($files);
$num=$keys[0];
$thumb=wp_get_attachment_thumb_url($num);
print ‘<a href="’ . clean_url(get_permalink()) . ‘" title="’ .the_title_attribute(‘echo=0′) . ‘"><img src="’ . clean_url($thumb) .’" width="80" height="80" alt="’ . the_title_attribute(‘echo=0′) . ‘" /></a>’ . "\n";
}
endwhile;else:
endif;
?>

query_posts()のshowposts値を変更すると表示する記事の件数を指定出来ます。

img srcの部分の画像のサイズは、利用しているWordPressの設定で変わるので、お使いの環境に合わせて変更してください。

追記

Yuriko.Net さんよりご指摘いただいたので、書いていたこの部分を

print "<a href=\"".get_permalink()."\" title=\"$post->post_title\"><img src=\"$thumb\" width=\"80\" height=\"80\" alt=\"$post->post_title\" /></a>\n";

と変更いたしました。

print ‘<a href="’ . clean_url(get_permalink()) . ‘" title="’ .the_title_attribute(‘echo=0′) . ‘"><img src="’ . clean_url($thumb) .’" width="80" height="80" alt="’ . the_title_attribute(‘echo=0′) . ‘" /></a>’ . "\n";

確かにHTMLエスケープしてませんでした。ありがとうございました。

ベースとなったテーマはこちらからダウンロード出来ます。
Amazing Grace（ダウンロード先）

Amazing Graceの作者は、ヨーロッパ在住のソフトウェアエンジニアです。

Vladimir Prelovac氏は、WordPressのセキュリティやSEOについてなども書かれています。

以前のテーマは、Web制作会社っぽいさを狙っていたのですが、所詮は個人であり会社っぽくするには無理がありました。体裁ばかりを目指して伝えたいことを伝えきれていないと思ったからです。

海外は、クリエイターやアーティストがこうしたサイトを持って活動しているので、方向的に見習っていく感じで、いろんなことを伝えて行けたらと思います。