Moodleへのモバイルモードの追加

Moodleへのモバイルモードの追加

- Tatsuya Shirai の投稿
返信数: 25

 W-ZERO3,iPod,PSP,携帯電話などの小型携帯端末(以下モバイル機器)に搭載されたWebブラウザを使ってMoodleサイトにアクセス可能であることを確認しました.W-ZERO3 (WS003SH)はUnicodeフォントの不足により一部の文字が表示できないものの,ほぼ実用的な利用に耐えられると判断しました.

 モバイル機器の欠点として画面の狭さが挙がられます.標準のMoodleではコース内のページを表示した際に,上下のヘッダーとフッターの間は左・中央・右の三つのコラムから構成されています.これを全て同時に表示すると(たとえばカレンダーなどが配置されていると)奇妙に縦長な表示になってしまい,とても使いにくい.それ以外の欠点として,通信速度が遅い,通信が途絶しやすい,という点も挙げられます.

 Moodle1.9向けに,実験的にモバイルモードという機能を追加してみました.プロトタイプ完成から1週間ほど改良を続けて,どうやら狙い通りの機能が実現できたようですので報告します.モバイルモードの機能を以下に列記します.

  • コース内の3つのコラム(左,中央,右)のいずれか一つ,あるいは全てのコラムの表示を選択可能とする.(簡単にボタンで切り替え可能です):実装済み
  • コース内のトピックスのセクション内のリソースをトピックスごとに展開/閉じるを可能とする:未実装.ただしどこを改良すれば良いかは実験・確認済み.
  • モバイルモードではユーザの顔写真画像を一切,表示しない(画像数を減らして転送速度/量を削減する).:実装済み
  • モバイルモードではページヘッダー部のナビメニューを表示しない.:実装済み.
  • いつでもどこでも簡単にモバイルモードをOn/Offできる切り替えボタン.:実装済み.

 開発したモバイルモードは,Moodleの全機能をモバイル機器から使えることを前提として加えた改良です.機能が限られる訳ではありません.修正箇所も,得られるメリットに比べて非常に少ない修正のみで実装できました.

 モバイルモードのOn/Offはいつでもフッター部に追加したボタンを押すことで切り替え可能ですが,トップページへのアクセス方法によって強制的にモバイルモードでログインすることもできます.
 moodle/index.php?mobile=on あるいは moodle/mobile/index.php
 moodle/my/index.php?mobile=on あるいは moodle/mobile_my/index.php

 以下,順次,書き込んでいきます.


 新しくモバイル用のテーマを作成することでも実現できそうな機能ですが,普段,使用しているテーマそのままで利用できるのもメリットと云えばメリットでしょうか.

 モバイルモードのOn/Off,どのコラムを表示するのか,といった設定はクッキーを使ってクライアント側に情報を保存します.当初,$_SESSION変数を使用して試みたのですが,コースを移動すると$_SESSION変数は初期化されてしまうらしいこと,モバイル機器ですので頻繁に通信途絶してしまうこと,この2点によりクッキーを使う方法で書き直しました.

評点平均:有益(Useful) (1)
Tatsuya Shirai への返信

Re: Moodleへのモバイルモードの追加

- Haruhiko Okumura の投稿
わぁ,ありがとうございます!
HTTP_USER_AGENTを見れば携帯かどうかわかるはずで,それでデフォルトの表示を選ぶということも可能ですが,どうでしょう?
Haruhiko Okumura への返信

Re: Moodleへのモバイルモードの追加

- Tatsuya Shirai の投稿

 自動選択は考えていませんでした.なるほど.

 ユーザーの情報としてではなく,端末側にクッキーでモバイルモードOnなどの情報を残します(30日間)ので,それでいいかな?と考えていました.

Tatsuya Shirai への返信

Re: Moodleへのモバイルモードの追加

- Takahiro Kagoya の投稿

す、すごいです! これは、日本のMoodle利用者(というか私自身の)長年の夢実現へのさらなる第一歩かも。

もちろんご存じかと思いますが、Moodle for Mobileというモジュールがすでに開発されており、1.9への対応も最近アナウンスされていたので、利用を検討しているところでした。

http://moodle.org/mod/data/view.php?d=13&rid=876

携帯電話(i-Mode等)での利用には、表示容量の問題、画像形式などに関連していろいろ制限があるので、利用できるアクティビティが限定されるのも仕方ないのかもしれませんが、やはり、フォーラムや課題(オンラインテキスト)や小テスト(記述式問題など)も頻繁に利用するので、PCとシームレスに利用できると、学生への利用がますます広がります。

今回の白井先生のパッチは携帯電話のフルブラウザ(NetFront,Opera,Safari等)に限定されるものでしょうか?勢いにまかせてi-ModeやEzWeb,Yahooケータイへの対応もぜひ.... 笑顔
私個人は、Windows Mobileを積んだX01HTのユーザなのですが、学生はさすがに持っているものはいません。 
たしかWZERO3は、WillcomがHappy Campusとかいうキャンペーン(?)をしていて安く導入できるかもしれません。でも携帯電話利用をやめて、あるいはそれに加えてWZERO3で...というのはなかなか難しいかなと。iPhoneが日本で広まる頃には、携帯専用ブラウザを意識しなくてよくなるのかもしれませんが...
それと、Jigを学生に利用してもらうことも検討中ですが、Moodle for Mobileのようなサクサク感も必要かな...と迷っています。

携帯電話の動作確認は、DoCoMoだと、
http://www.nttdocomo.co.jp/service/imode/make/content/html/tool2/
こういったソフトで確認できるようです。

ちょっとMoodleではないですが、CMSとして有名なXOOPSでも携帯電話対応は多い要望でこんなのが出ています。

 http://xmobile.ishinomaki.cc/modules/mydownloads/singlefile.php?cid=1&lid=5

ブログで有名なMovable Typeでは、こんな感じで対応が。

http://www.hazama.nu/pukiwiki/index.php?MT4i

勝手なことばかり書いてすみません。「言うは易く行うは難し」だとは思うのですが。

Takahiro Kagoya への返信

Re: Moodleへのモバイルモードの追加

- Tatsuya Shirai の投稿

 Moodle for Mobile とオリジナルのMoodleの間を埋めるものという位置づけです.

 私の携帯電話は第2世代(2.5?)ですので,ログイン画面までしか表示されません青あざ. クッキーの保存ができない,という警告も出ていますので無理でしょう...多くの学生も似たり寄ったりの状況ではないでしょうか.それよりも通信費用のことを考えると,携帯電話で学生が積極的にアクセスしてくるものかどうか.
 なんとか学内に無線LANのキャンパスネットワークを広げる原動力になってくれないか,という願いです.無線LAN対応機器ならば通信費用は考えなくて良いですからね.

 確かに,フルブラウザー搭載の携帯電話でどこまでいけるか,には興味があります.でもなかなか自分の携帯電話を買い換えるほどのゆとりは無く...W-ZERO3もお願いして学校から借りている物です.

 ご紹介いただいた iモードHTMLシミュレータIIですが,うまく動きません...
 URLを入力して,マニュアルにあるようにEnterキーを押しているのですが画面が変化しません(デフォルトのトップメニューも表示されない).

#2週間ほど前に秋葉原に立ち寄った際にはイーモバイルさんが随分とキャンペーンを頑張っていましたね.

Tatsuya Shirai への返信

Re: Moodleへのモバイルモードの追加

- Tatsuya Shirai の投稿

 iモードHTMLシミュレータIIですが,動きました.頭のhttp://を省いてはいけないのですね.ケアレスミスでした.

 実行してみたのですが,やはり私の携帯電話(Vodafone,現SoftBank)と同じく,クッキーの保存ができないからダメである,というMoodleのエラーメッセージが表示されてログインできませんでした.やはり携帯電話搭載の(PCフルブラウザではない)ブラウザでは,もっと手を入れないとログインすら出来なさそうですね.

#さすがにそこまでは現状では考えるゆとりがありませんね!

Tatsuya Shirai への返信

Re: Moodleへのモバイルモードの追加

- Haruhiko Okumura の投稿
本当の携帯ブラウザについては,今年度中にとてもいいのが出るという話を聞いているのですが,そろそろ今年度も終わりに近づき,心配しています。携帯用には,Moodleのコードの改良ではなく,機能を大幅に制約した上で最初から書き直さないと,まともに動かないようです。
Haruhiko Okumura への返信

Re: Moodleへのモバイルモードの追加

- Haruhiko Okumura の投稿
どうやれば完全な判断ができるか,いろいろ調べて,うちのサーバのログでだいたいの順序関係も調べました。次のコードで多分漏れがないだろうと思います。

$x = $_SERVER['HTTP_USER_AGENT'];
$keitai = (strstr($x, "DoCoMo") || strstr($x, "UP.Browser") || strstr($x, "Vodafone") || strstr($x, "SoftBank") || strstr($x, "J-PHONE") || strstr($x, "MOT-") || strstr($x, "WILLCOM") || strstr($x, "DDIPOCKET") || strstr($x, "KDDI"));

Haruhiko Okumura への返信

Re: Moodleへのモバイルモードの追加

- Haruhiko Okumura の投稿
すいません,上に書いたのは携帯ブラウザでした。
フルブラウザはもっとややこしいですね。^^;
たとえば私のアドエスは次のようでした:
Mozilla/4.0 (compatible; MSIE 6.0; Windows CE; SHARP/WS011SH; PPC; 480x800) Opera 8.7 [ja]

Haruhiko Okumura への返信

Re: Moodleへのモバイルモードの追加

- Tatsuya Shirai の投稿

 J-PHONEやDDI-POCKETまで居るのですねウインク
 Windows CEあたりがキーワードでしょうか.

 PSPやiPodなどはWindows CEではないでしょうし.やはりここは学内の研究プロジェクトに申請して,PSPとiPodとNintendoDSを買ってみようかな?  この3つでOKになれば,かなり多くの学生が利用可能になります.

Tatsuya Shirai への返信

Re: Moodleへのモバイルモードの追加

- Haruhiko Okumura の投稿
> J-PHONEやDDI-POCKETまで居るのですね.

さきほど調べたら,次のようになっていました:

DoCoMo 17703
UP.Browser 10066
Vodafone 182
SoftBank 154
J-PHONE 5
MOT- 3
WILLCOM 25
DDIPOCKET 1
KDDI 10403
KDDIがあってUP.Browserがないもの 340
UP.BrowserがあってKDDIがないもの 4

私のサーバ全体です。
Haruhiko Okumura への返信

Re: Moodleへのモバイルモードの追加

- Tatsuya Shirai の投稿

 UP.Browserとは何だろうと調べてみたのですが,Openwave Systems社のブラウザのことなのですね.
http://www.openwave.com/us/worldwide/japanese/index.htm

 VodafoneとSoftBankとJ-PHONEが少ないことから考えると,

http://www.futomi.com/lecture/env_var/http_user_agent.html

こちらの情報の段階ではauとTu-Kaのみが採用していたブラウザをSoftbank携帯も採用した,ということなのでしょうか.

http://www.openwave.com/us/newsletter/2007/autumn/softbank.htm

Tatsuya Shirai への返信

Re: Moodleへのモバイルモードの追加

- Haruhiko Okumura の投稿
auは互換性からずっとUP.Browserの名前を使い続け,
ソフトバンクはJ-PHONE→Vodafone→SoftBank
のはずなのですが,なんでこんなに少ないのでしょうね。
三重県の特殊性?

Tatsuya Shirai への返信

Re: Moodleへのモバイルモードの追加

- Haruhiko Okumura の投稿
アドエスの類は "Windows CE" でいいんでしょうね。

Wii, DS, PS3, PSP, iPod, iPhone を含めるには:

Nintendo
Nitro
PlayStation
PLAYSTATION
iPod
iPhone

Tatsuya Shirai への返信

Re: Moodleへのモバイルモードの追加

- Tatsuya Shirai の投稿
 まずはメインの機能であるコース内の3つのコラムを選択(あるいは全て表示)する機能の画面イメージです.  この例では画面下の「モバイルモードに切り替える」(既にモバイルモードの場合は「モバイルモードを無効にする」)を押していますが,moodle/mobile/index.phpでアクセスすればこの作業は不要です.  左上の図のように通常の状態(文字が読みやすいようにWS003SHのOpera,画面拡大125%)ではカレンダーが途中で折り返してしまい,役に立っていませんし,真ん中のコラムも細長くなってしまっています.  モバイルモードに入りますと,ヘッダーの下に4個のボタンが追加されます.PCで見ると小さいボタンですが,モバイル機器で見ると丁度良い大きさです.  「← Left」「Middle」「Right→」「ALL」  いずれかを押すと,瞬時にクッキーを書き込み,画面をリロードします.  コースを移動してもこの設定は覚えていますし,ログアウトしても覚えています.再びログインすればMiddleを選択していたならば,モバイルモードかつMiddleが表示されます. (なお,mooodle/mobile/index.phpからアクセスした場合は初期化します.パニック防止のためです)
添付 ColumnSelect.jpg
Tatsuya Shirai への返信

Re: Moodleへのモバイルモードの追加

- Tatsuya Shirai の投稿

 こちらがユーザー画像の表示抑制機能とナビメニューの表示抑制機能です.

 画像のダウンロード待ちが少し緩和されます.
 ナビメニューが表示されないことでヘッダー部がスッキリとします.

 ナビメニューはモバイル環境だからこそ必要な機能かも知れませんね.
 (私は使わないですけれど)
 この機能は代わりに,セクション表示の選択機能(未実装)で代用した方がアクセスがし易いかな?と考えています.

添付 ImageAndNavimenu.jpg
Tatsuya Shirai への返信

Re: Moodleへのモバイルモードの追加

- Tatsuya Shirai の投稿

 では,パッチその1です.

 これはMoodleにモバイルモードを付加するためのものです.モバイルモードをOn/Offするには,

  1. 画面下に表示される切り替えスイッチを押す.
  2. moodle/mobile/index.php あるいは moodle/mobile_my/index.phpにアクセスしてログインする.(これはモバイルOnかつ設定を初期化)
  3. moodle/index.php?mobile=on,moodle/index.php?mobile=off,あるいはmoodle/my/index.php?mobile=on,moodle/my/index.php?mobile=offにアクセスしてログインする.(これはモバイルOn/Off可能)

の3つの方法を用意しました.でも実は2と3はほぼ同じです.2で何をしているかというと,単に3をmobile=onでリダイレクトしているだけですウインク

 技術的には,クッキーを設定し,かつ画面をリロードするためにJavaScriptを追加してある程度のことです(moodle/mobile/mobile_cookie.js).ゼロから勉強したので随分と苦労しました.

 必須の変更は,lib/javascript.phpとlib/weblib.phpの修正とmobile/mobile_cookie.jsとmobile/lib.phpの追加です.2,3のログイン方法を使わないならばindex.php,my/index.phpの修正とmobile/index.php,mobile_my/index.phpの追加は必要ありません.

 まだMoodle1.8は確認していませんが,多分,ほぼ同じ修正でOKだと思います.


lib/javascript.php:赤い行を追加

<script type="text/javascript" src="<?php echo $CFG->httpswwwroot ?>/lib/javascript-static.js"></script>
<script type="text/javascript" src="<?php echo $CFG->httpswwwroot ?>/lib/javascript-mod.php"></script>
<script type="text/javascript" src="<?php echo $CFG->httpswwwroot ?>/lib/overlib/overlib.js"></script>
<script type="text/javascript" src="<?php echo $CFG->httpswwwroot ?>/lib/overlib/overlib_cssstyle.js"></script>
<script type="text/javascript" src="<?php echo $CFG->httpswwwroot ?>/lib/cookies.js"></script>
<script type="text/javascript" src="<?php echo $CFG->httpswwwroot ?>/lib/ufo.js"></script>
<script type="text/javascript" src="<?php echo $CFG->httpswwwroot ?>/mobile/mobile_cookie.js"></script>

<script type="text/javascript" defer="defer">

weblib.php

 モバイルモードのOn/Off用のボタンをフッターに追加
(a) 46行近辺

/// We are going to uses filterlib functions here
require_once("$CFG->libdir/filterlib.php");

require_once("$CFG->libdir/ajax/ajaxlib.php");

//  ここから追加
require_once("$CFG->dirroot/mobile/lib.php");
// ここまで追加
/// Constants

(b) function print_footer(), 2894行近辺

     } else {
        $course = get_site();  // Set course as site course by default
        $homelink = '<div class="homelink"><a '.$CFG->frametarget.' href="'.$CFG->wwwroot.'/">'.get_string('home').'</a></div>';
        $home  = false;
    }
// ここから追加
    $homelink .= '<div><input type="button" value="モバイルモード';
    $homelink .= (is_mobile_on()) ? 'を無効にする"' : 'に切り替える"';
    $homelink .= "'  onclick='";
    if (is_mobile_on()) {
        $homelink .= 'mobile_cookie_kill_and_reload("on");';
    } else {
        $homelink .= 'mobile_cookie_set_and_reload("on", "on");';
    }
    $homelink .= "'></div>";
// ここまで追加
/// Set up some other navigation links (passed from print_header by ugly hack)
    $menu        = isset($THEME->menu) ? str_replace('navmenu', 'navmenufooter', $THEME->menu) : '';
    $title       = isset($THEME->title) ? $THEME->title : '';
    $button      = isset($THEME->button) ? $THEME->button : '';
    $heading     = isset($THEME->heading) ? $THEME->heading : '';
    $navigation  = isset($THEME->navigation) ? $THEME->navigation : '';
    $navmenulist = isset($THEME->navmenulist) ? $THEME->navmenulist : '';

mobile/mobile_cookie.js
mobileフォルダを作成し,その中にmobile_cookie.jsというファイルを新規作成する.

 // クッキーの設定と画面のリロード(クッキーの有効期限は30日)
function mobile_cookie_set_and_reload(name, value) {
    var mbc = new cookie("mobile_" + name, value, 30, "/", "", "");
    mbc.set();
    window.location.reload();
}
// クッキーの削除と画面のリロード
function mobile_cookie_kill_and_reload(name) {
    var mbc = new cookie("mobile_" + name, "", "", "/", "", "");
    mbc.kill();
    window.location.reload();
}

mobile/lib.php
mobileフォルダ内にlib.phpというファイルを新規作成する.

<?php
// (Shirai054): モバイルモード機能の追加 (2008/03/20)

    // モバイル端末向けのクッキーを設定する.
    function mobile_cookie($name, $value = false) {
//      $_SESSION["mobile_$name"] = $value;
        return setcookie("mobile_$name", $value, time()+60*60*24*30, "/", $CFG->wwwroot);
    }

    // モバイル端末向けの設定(クッキー)を初期化する.
    function mobile_on() {
        $status =  mobile_cookie('on', 'on');
        $status &= mobile_cookie('courseViewColumn', 'middle');
        return $status;
    }

    // モバイル端末向けの設定(クッキー)を削除する.
    function mobile_off() {
        $status =  mobile_cookie('on');
        $status &= mobile_cookie('courseViewColumn');
        return $status;
    }

    // モバイルモードがOnかOffか (戻り値: true / false)
    function is_mobile_on() {
        return (isset($_COOKIE['mobile_on']) && $_COOKIE['mobile_on'] == 'on');
    }

    // コースで表示するカラムを返す (戻り値: 'left', 'middle', 'right', 'all' or false)
    function courseViewColumn() {
        if (isset($_COOKIE['mobile_courseViewColumn'])) return ($_COOKIE['mobile_courseViewColumn']);
        return false;
    }

?>

index.php

    if (get_moodle_cookie() == '') {
        set_moodle_cookie('nobody');   // To help search for cookies on login page
    }

    if (!empty($USER->id)) {
        add_to_log(SITEID, 'course', 'view', 'view.php?id='.SITEID, SITEID);
    }

    if (empty($CFG->langmenu)) {
        $langmenu = '';
    } else {
        $currlang = current_language();
        $langs = get_list_of_languages();
        $langlabel = get_accesshide(get_string('language'));
        $langmenu = popup_form($CFG->wwwroot .'/index.php?lang=', $langs, 'chooselang', $currlang, '', '', '', true, 'self', $langlabel);
    }

// ここから追加
    switch (optional_param("mobile", false, PARAM_RAW)) {
        case 'on':
            require_once("$CFG->dirroot/mobile/lib.php");
            mobile_on();
            break;
        case 'off':
            require_once("$CFG->dirroot/mobile/lib.php");
            mobile_off();
            break;
        default:
            break;
    }
// ここまで追加
    $PAGE       = page_create_object(PAGE_COURSE_VIEW, SITEID);
    $pageblocks = blocks_setup($PAGE);
    $editing    = $PAGE->user_is_editing();

my/index.php

     if (isguest()) {
        $wwwroot = $CFG->wwwroot.'/login/index.php';
        if (!empty($CFG->loginhttps)) {
            $wwwroot = str_replace('http:','https:', $wwwroot);
        }

        print_header($mymoodlestr);
        notice_yesno(get_string('noguest', 'my').'<br /><br />'.get_string('liketologin'),
                     $wwwroot, $CFG->wwwroot);
        print_footer();
        die();
    }


    $edit        = optional_param('edit', -1, PARAM_BOOL);
    $blockaction = optional_param('blockaction', '', PARAM_ALPHA);

// ここから追加
    switch (optional_param("mobile", false, PARAM_RAW)) {
        case 'on':
            require_once("$CFG->dirroot/mobile/lib.php");
            mobile_on();
            break;
        case 'off':
            require_once("$CFG->dirroot/mobile/lib.php");
            mobile_off();
            break;
        default:
            break;
    }
// ここまで追加
    $PAGE = page_create_instance($USER->id);

    $pageblocks = blocks_setup($PAGE,BLOCKS_PINNED_BOTH);

mobile/index.php
以下の内容のファイルをindex.phpとして作成する.

<?php
    header("HTTP/1.1 301 Moved Permanently");
    header("Location: ../index.php?mobile=on");
?>

mobile_my/index.php
mobile_myフォルダを作成し,以下の内容のファイルをindex.phpとして作成する.

<?php
    header("HTTP/1.1 301 Moved Permanently");
    header("Location: ../my/index.php?mobile=on");
?>


修正および新規作成したファイルをZIP書庫として添付します.

Tatsuya Shirai への返信

Re: Moodleへのモバイルモードの追加

- Tatsuya Shirai の投稿

 おっとっと,lib/weblib.phpの(b)の修正箇所の中に,

  $homelink .= "'  Xonclick='";

とありますが,これは

  $homelink .= "'  Xonclick='";

です.貼り付け時にXが紛れ込んでしまいました.


むむ?どうしてもXonclickになってしまう.これはHTMLエディタ(本家含めて)のバグか??? Xは無しです.

Tatsuya Shirai への返信

Re: Moodleへのモバイルモードの追加

- Tatsuya Shirai の投稿

 次いで,これがコースのどのコラムを表示するのかを選択できるようにするための修正箇所です.

 これは,course/view.phpとcourse/format/topics/format.phpに修正します.なお,現在はトピックス形式のコース表示にのみ適用していますが,それ以外のフォーマットの表示にも対応するためには,socialやweeksなどのformat.phpにも同様の修正を行う必要があるでしょう.

course/view.php

 (a) 10行近辺

    require_once('../config.php');
    require_once('lib.php');
    require_once($CFG->libdir.'/blocklib.php');
    require_once($CFG->libdir.'/ajax/ajaxlib.php');
    require_once($CFG->dirroot.'/mod/forum/lib.php');
//  ここから追加
    require_once("$CFG->dirroot/mobile/lib.php");
// ここまで追加

(b) 192行近辺

    $CFG->blocksdrag = $useajax;   // this will add a new class to the header so we can style differently


    $PAGE->print_header(get_string('course').': %fullname%', NULL, '', $bodytags);
// ここから追加
    if (is_mobile_on()) {
        $colSelHead   = '<input type="button" Xonclick='."'".'mobile_cookie_set_and_reload("courseViewColumn", ';
        $colSelLeft   = $colSelHead.'"left")'  ."'".' value="&nbsp;← Left&nbsp;" />';
        $colSelMiddle = $colSelHead.'"middle")'."'".' value="&nbsp;Middle&nbsp;" />';
        $colSelRight  = $colSelHead.'"right")' ."'".' value="&nbsp;Right →&nbsp;" />';
        $colSelALL    = $colSelHead.'"all")'   ."'".' value="&nbsp;ALL&nbsp;" />';
        echo $colSelLeft."&nbsp;".$colSelMiddle."&nbsp;".$colSelRight."&nbsp;".$colSelALL;
    }
// ここまで追加
    // Course wrapper start.
    echo '<div class="course-content">';

course/format/topics/format.php

 (a) 11行近辺

    require_once($CFG->libdir.'/ajax/ajaxlib.php');
// ここから追加
    require_once("$CFG->dirroot/mobile/lib.php");
// ここまで追加
  
    $topic = optional_param('topic', -1, PARAM_INT);

(b) 78行近辺

/// Layout the whole page as three big columns.
    echo '<table id="layout-table" cellspacing="0" summary="'.get_string('layouttable').'"><tr>';

/// The left column ...
//  $lt = (empty($THEME->layouttable)) ? array('left', 'middle', 'right') : $THEME->layouttable;
// ここから追加
    if (empty($THEME->layouttable)) {
        if (is_mobile_on()) {
            switch (courseViewColumn()) {
                case 'left':    $lt = array('left');   break;
                case 'right':   $lt = array('right');  break;
                case 'middle':  $lt = array('middle'); break;
                case 'all':
                default:        $lt = array('left', 'middle', 'right');
            }
        } else $lt = array('left', 'middle', 'right');
    } else {
        $lt = $THEME->layouttable;
    }
// ここまで追加
    foreach ($lt as $column) {
        switch ($column) {
            case 'left':

Tatsuya Shirai への返信

Re: Moodleへのモバイルモードの追加

- Tatsuya Shirai の投稿

 これで取り敢えずは最後です.

 顔写真の画像を表示させないための修正と,ナビメニューを表示させないための修正です.

修正はどちらもlib/weblib.phpです.

モバイルモード時にユーザの顔写真を一切表示しない
function print_user_picture(), 4416行近辺

    if ($picture) {  // Print custom user picture
        if ($CFG->slasharguments) {        // Use this method if possible for better caching
            $src =  $wwwroot .'/user/pix.php/'. $user->id .'/'. $file .'.jpg';
        } else {
            $src =  $wwwroot .'/user/pix.php?file=/'. $user->id .'/'. $file .'.jpg';
        }
    } else {         // Print default user pictures (use theme version if available)
        $class .= " defaultuserpic";
        $src =  "$CFG->pixpath/u/$file.png";
    }
    $imagealt = '';
    if ($alttext) {
        if (!empty($user->imagealt)) {
            $imagealt = $user->imagealt;
        } else {
            $imagealt = get_string('pictureof','',fullname($user));
        }
    }

//  $output .= '<img class="'.$class.'" src="'.$src.'" alt="'.s($imagealt).'" />';
// ここから追加
    if (is_mobile_on()) $output .= '非表示';
        else            $output .= '<img class="'.$class.'" src="'.$src.'" alt="'.s($imagealt).'" />';
// ここまで追加
    if ($link) {
        $output .= '</a>';
    }

    if ($return) {
        return $output;
    } else {
        echo $output;
    }
}

モバイルモード時にナビメニューを表示しない
function navmenu(), 5262行近辺

function navmenu($course, $cm=NULL, $targetwindow='self') {

// ここから挿入
    if (is_mobile_on()) return '';
// ここまで挿入
    global $CFG, $THEME, $USER;

    if (empty($THEME->navmenuwidth)) {
        $width = 50;
    } else {
        $width = $THEME->navmenuwidth;
    }

Tatsuya Shirai への返信

Re: Moodleへのモバイルモードの追加

- Tatsuya Shirai の投稿

 lib/weblib.phpは他の修正箇所に添付したので省略します.

 なお,新規作成したファイルを除き,添付したファイルは今回の改良とは異なる改良点も含んでいますので,そのままコピーして使うのは止めて下さい.オリジナルのMoodle1.9とのソースの差分を取って,どこに手を加えたのか(Shirai054からShirai057というコメントを付してあります)を確認するためにのみご使用下さい.

 あと,スミマセン,course/format/topics/format.phpの一部に意味の無いデバッグ用のコードが2箇所ほど残っていました.

// (Shirai054): ここから追加
        if (!$_SESSION['mobile'])
// (Shirai054): ここまで追加

こういうコードです.これは残りのセクションを展開するか否かの選択機能のデバッグ用です.無視してください.

Tatsuya Shirai への返信

Re: Moodleへのモバイルモードの追加

- Tatsuya Shirai の投稿

 何気なくmoodle/index.phpを眺めていたら,course/format/topics/format.phpと全く同じコードでフロントページもコラムを選択して表示していることに気付きましたウインク
 という訳で,急遽,パッチを追加します.この修正をmoodle/index.phpに加え,さらにmoodle/mobile/lib.phpを添付の物に変更すれば,フロントページもコラムを選択可能になります.これでログインした後は全てモバイルモードとなりますね!

 実はいまデスクトップPCでモバイルモードを使っています.3つのカラムを表示させると画面を再構成してカクカクと書き直したりするので,それを待つよりも心理的な負担が少ないですね.意外な効果です.

 なお,フォーラムへの投稿で一部コードが,Xonclickとなっていますが,これはoclick(半角)です.Xが頭に付くのは仕様上の問題だそうです.

moodle/index.php

(a) 冒頭, 36行近辺

    if (!file_exists('./config.php')) {
        header('Location: install.php');
        die;
    }

    require_once('config.php');
    require_once($CFG->dirroot .'/course/lib.php');
    require_once($CFG->dirroot .'/lib/blocklib.php');
// ここから追加
    require_once("$CFG->dirroot/mobile/lib.php");
// ここまで追加

    if (empty($SITE)) {
        redirect($CFG->wwwroot .'/'. $CFG->admin .'/index.php');
    }

(b) 132行近辺

    $PAGE       = page_create_object(PAGE_COURSE_VIEW, SITEID);
    $pageblocks = blocks_setup($PAGE);
    $editing    = $PAGE->user_is_editing();
    $preferred_width_left  = bounded_number(BLOCK_L_MIN_WIDTH, blocks_preferred_width($pageblocks[BLOCK_POS_LEFT]),
                                            BLOCK_L_MAX_WIDTH);
    $preferred_width_right = bounded_number(BLOCK_R_MIN_WIDTH, blocks_preferred_width($pageblocks[BLOCK_POS_RIGHT]),
                                            BLOCK_R_MAX_WIDTH);
    print_header($SITE->fullname, $SITE->fullname, 'home', '',
                 '<meta name="description" content="'. s(strip_tags($SITE->summary)) .'" />',
                 true, '', user_login_string($SITE).$langmenu);
// ここから追加
    if (is_mobile_on()) {
        $colSelHead   = '<input type="button" Xonclick='."'".'mobile_cookie_set_and_reload("frontpageViewColumn", ';
        $colSelLeft   = $colSelHead.'"left")'  ."'".' value="&nbsp;← Left&nbsp;" />';
        $colSelMiddle = $colSelHead.'"middle")'."'".' value="&nbsp;Middle&nbsp;" />';
        $colSelRight  = $colSelHead.'"right")' ."'".' value="&nbsp;Right →&nbsp;" />';
        $colSelALL    = $colSelHead.'"all")'   ."'".' value="&nbsp;ALL&nbsp;" />';
        echo $colSelLeft."&nbsp;".$colSelMiddle."&nbsp;".$colSelRight."&nbsp;".$colSelALL;
    }
// ここまで追加

?>

(c) 150行近辺

<table id="layout-table" summary="layout">
  <tr>
  <?php
//  $lt = (empty($THEME->layouttable)) ? array('left', 'middle', 'right') : $THEME->layouttable;
// ここから追加
    if (empty($THEME->layouttable)) {
        if (is_mobile_on()) {
            switch (frontpageViewColumn()) {
                case 'left':    $lt = array('left');   break;
                case 'right':   $lt = array('right');  break;
                case 'middle':  $lt = array('middle'); break;
                case 'all':
                default:        $lt = array('left', 'middle', 'right');
            }
        } else $lt = array('left', 'middle', 'right');
    } else {
        $lt = $THEME->layouttable;
    }
// ここまで追加
    foreach ($lt as $column) {
        switch ($column) {
            case 'left':

Tatsuya Shirai への返信

Re: Moodleへのモバイルモードの追加

- Tatsuya Shirai の投稿

 なお,フロントページとコースとでは,使用するクッキーの名前を変えてあります.
 したがって,フロントページでは右コラムを選択していたのに,コースに入ると中央コラムが表示される,ということになります.意図的です.逆に,コースの中で右コラムを選択した状態でログアウトして,次にログインした時に予想外の右コラムが表示されてビックリする,よりも,フロントページは常に真ん中しか使わない,あるいはフロントページだけは3つのコラムを全て表示したいと云うユーザさんの方が多いだろうと考えた次第です.

Tatsuya Shirai への返信

Re: Moodleへのモバイルモードの追加

- Tatsuya Shirai の投稿

 モバイルモードを搭載したfs_moodle2.1(Moodle1.8.4+とMoodle1.9+)を公開しました.

 モバイルモードに関する変更箇所は,Moodle1.8.4+もMoodle1.9+と完全に同じでした.
 今回,改良を行った箇所のコードに関しては,Moodleのオリジナルのコードが(テーマへの対応を考えた結果だと思うのですが)非常に手の入れやすい,うまい作りになっていたので助かりました.

http://www.suzuka-ct.ac.jp/mech/moodle/mod/resource/view.php?id=331

Tatsuya Shirai への返信

Re: Moodleへのモバイルモードの追加

- Tatsuya Shirai の投稿

 チョコチョコと小出しでスミマセン.
 じっくり煮詰めたつもりでしたが,少しずつ考えが変わってきました.
 ログイン方法です.

 moodle/mobile や moodle/mobile_myへアクセスすることで,モバイルモードとしてログインできる,という考えは当初は面白いように感じていたのですが,徐々にそれほど魅力的ではなくなって来ました.誰もがフロントページからログインする訳では無いですよね.moodle/index.php?mobile=on といったパラメータ渡しでindex.phpにアクセスする仕組みは悪く無いと思うので,こちらは残すつもりです.

 そこでどう考えを変えたかと言うと,添付した図のように,ログイン画面に”モバイルモードでログインする”というチェックボックスを設ける,という結論に落ち着きました.コースへ直接アクセスした場合もrequire_login()で,多分,この画面が表示されると思います.モバイルモードがどうか,これは各クラアント端末にクッキーで情報を残しているので,あまり意識しないでも良いようにしたいと思います.

 あ,もちろん,クッキーの値を調べて,以前にログインしたのがモバイルモードならば最初からチェックボックスはOnにしていますので,モバイル機器から常にモバイルモードでログインするのならば何も考えずにログインできるはずです.

添付 loginCheckbox.jpg
Tatsuya Shirai への返信

Re: Moodleへのモバイルモードの追加

- Tatsuya Shirai の投稿

 login/index.phpとmobile/mobile_cookie.jsとmobile/lib.phpに修正を行います.ログイン時にクッキーがOnだった場合は(ログインするしないに関わらず)クッキーの有効期限を30日間延長するために再書き込みする修正も同時に行います.

login/index.php

(a) 冒頭

     require_once("../config.php");
// ここから追加
    require_once("$CFG->dirroot/mobile/lib.php");
    if (is_mobile_on()) mobile_refresh();
// ここまで追加
    // check if major upgrade needed - also present in /index.php
    if ((int)$CFG->version < 2006101100) { //1.7 or older
        @require_logout();
        redirect("$CFG->wwwroot/$CFG->admin/");
    }

(b) 299行近辺

    if (!empty($CFG->registerauth) or is_enabled_auth('none') or !empty($CFG->auth_instructions)) {
        $show_instructions = true;
    } else {
        $show_instructions = false;
    }

    print_header("$site->fullname: $loginsite", $site->fullname, $navigation, $focus,
                 '', true, '<div class="langmenu">'.$langmenu.'</div>');
// ここから追加
    $mbform = '<p align="center"><form name="mobile_on"><input type="checkbox" name="ch" XonClick="checkbox_mobile_on()" ';
    if (is_mobile_on()) $mbform .= 'checked';
    $mbform .= '> モバイルモードでログインする<br/></form></p>';
    echo $mbform;
// ここまで追加

    include("index_form.html");

    print_footer();


?>

mobile/mobile_cookie.js

// クッキーの設定と画面のリロード(クッキーの有効期限は30日)
function mobile_cookie_set_and_reload(name, value) {
    var mbc = new cookie("mobile_" + name, value, 30, "/", "", "");
    mbc.set();
    window.location.reload();
}
// クッキーの削除と画面のリロード
function mobile_cookie_kill_and_reload(name) {
    var mbc = new cookie("mobile_" + name, "", "", "/", "", "");
    mbc.kill();
    window.location.reload();
}
// チェックボックスを調べてクッキー(mobile_on)の値を変更する
function checkbox_mobile_on() {
    var mbc = new cookie("mobile_on", "off", 30, "/", "", "");
    if (document.mobile_on.elements[0].checked == true) {
        mbc.changeVal("on");
    } else {
        mbc.changeVal("off");
    }
}

mobile/lib.php

    // モバイル端末向けの設定(クッキー)を削除する.
    function mobile_off() {
        $status =  mobile_cookie('on');
        $status &= mobile_cookie('courseViewColumn');
        $status &= mobile_cookie('frontpageViewColumn');
        return $status;
    }

// ここから追加
    // モバイル端末向けの設定(クッキー)を更新する.
    // クッキーの更新に失敗した時のみfalse,それ以外はtrueを返す
    function mobile_refresh() {
        if (is_mobile_on()) {
            $status =  mobile_cookie('on', 'on');
            $status &= mobile_cookie('courseViewColumn', courseViewColumn());
            $status &= mobile_cookie('frontpageViewColumn', frontpageViewColumn());
            return $status;
        }
        return true;
    }
// ここまで追加

    // モバイルモードがOnかOffか (戻り値: true / false)
    function is_mobile_on() {
        return (isset($_COOKIE['mobile_on']) && $_COOKIE['mobile_on'] == 'on');
    }


(注意) XonClickはonClickです.