JavaScriptで苦悩

苦悩する日々

MeSHのフレームワークには、今のところユーザ管理機能はありません。ユーザ管理などは他のシステムに任せて、コアな部分だけを実装する予定だからです。とは言っても、そろそろ何らかのシステムと連携して実践したいところです。そう思ってたら、棚からぼた餅が落ちてきました。なんと、大学にLMSが（試験的に）導入されました。元々大学にはとあるプロジェクトがあって、当時はLMSが動作していたのですが、現在は停止しております。プロジェクトの中心にいた私が言うので間違いないです。停止しています。

自前でLMSを立ち上げるなど考えていたのですが、ユーザ管理の手間はいかんともしがたいものがあります。どうしたものかと思っていたところに、タイミング良くLMSが導入されたので、さっそく認証情報をもらうことにします。とは言っても、ユーザ情報の入っているデータベースに接続するとか、セッション情報を貰ってくるなんてことは、どう考えても許可が下りるとは思えません。色々考えた結果、LMSにHTMLの教材をアップロードして、そこでスクリプトを動かして強引に外部ページにリンクしてしまえ！と言うことに決め、さっそく慣れないJavaScriptと格闘しました。苦悩の始まりです。

簡単・・・じゃ無い

まずはLMSにHTML教材もどきをアップロードして、何ができて何ができないか確認します。その結果、LMSが作成したページ内にiframeで表示されることが分かりました。面倒なので、LMSが作成したページを「親」、iframe内のページを「子」と呼びます。親にはユーザ名が表示されているので、この情報を取ってきて、Formに入れて、MeSHのサーバにSubmitすれば、少なくともユーザ名を取得できます。本当は学生番号のようなユニークな情報があれば良いのですが、親のソースをいくら探してもそのような情報はありません。邪道なことをおこなうので仕方ないと考えつつ、氏名がliタグに囲われているのが救いでした。とりあえず、同姓同名がいたらそのときに悩むことにして、まずは技術確認を行います。

子では、割と自由がききました。JavaScriptも使えますし、JQueryを読み込むこともできます。とりあえず、ブラウザ（Google Chrome）のJavaScriptコンソールで一行一行実行しながら試そうとしたとき・・・「ん？iframeの親の情報ってどうやって取得するんだ？」と言うJavaScript初心者の検索の旅が始まりました。結局、金曜日の23:00～翌3:00、土曜日の21:00～翌3:00までやって、なんとか親のliタグの情報を取得することができましたが、ページに埋め込むとエラーで止まってしまいました。仕方ないのでJavaScriptが得意な学生にメールでデバッグの要請をしたら、ものすごい初心者的なバグ（と言うか考え違い）を指摘されました。我ながら「おぃおぃ、こんなのが分からなかったのかい？」と問いかけたくなるレベルでした。

やっとプログラムの話

そんなこんなで、やっとこさ完成したのが以下のソースコードです。生のJavaScriptとJQueryのコードが混在しているあたりが初心者丸出しです。はい、JavaScriptは初心者です。やってることは、parent.document.getElementsByTagNameを使って、親のフレームの特定のタグ（ここではli）に書かれた内容を取得し、その内容をid="username"の入力欄に入れ、新しいウィンドウを開いて、formをsubmitするだけです。まぁ、ちゃんと使うためには、textタグじゃなくてhiddenタグを使うとか、画面デザインを考えるなど、やることは沢山あります。また、Webサーバxxx.xxx.xxxでは、HTTP_REFERERをチェックすることもセキュリティ上必要だと思ってます。でも、とりあえず動作確認のためなので、これで良しとします。



以下、上のソース内のJavaScript部分の抜粋です。

var name1=parent.document.getElementsByTagName('li')[0].firstChild.nodeValue;
$('#username').val(name1);
window.open('about:blank', 'starting');
var f=document.starting; f.action='http://xxx.xxx.xxx/';
f.method='post'; f.target='starting';
f.submit()

ツイート