CLEカレンダーの解析とGoogleカレンダーへのインポート

@prprhyt

自己紹介

•prprhyt

•所属 : 通信ネットワーク工学科 (5BJT)

情報通信研究プロジェクト

放送研究会

日本Androidの会 学生部

•Loves:HTML5 Android Windows

今日のお話

CLE(キャンパスライフエンジン)の週間スケジュールを指定期間分解析/抽出してGoogleカレンダー用CSVを生成するブックマークレットを作った時のお話

ブックマークレットって何

ブックマークレット (Bookmarklet)  とは、

ユーザーがウェブブラウザのブックマークなどから起動し、ウェブブラウザで簡単な処理を行う簡易的なプログラムのことである

Wikipedia  ブックマークレットより引用

動機

•とりあえず何か学内向けのサービスを作りたかった

•@hotu_taがスクレイピングをしているのを見て楽しそうだった

CLE

これだ!

そして作った

cle_analysis

cle_analysis+

Googleカレンダー

のメリットって何？

メリット１ 予定の確認のためにCLEにログインする必要がなくなる

メリット2 瞬時に手持ちの多くの端末で大学の予定を同期できる

メリット3 予定管理の一元化

大学の予定プライベートの予定

同一プラットフォーム上で管理ラク×2  !

デメリットって無いの？

デメリットはありま～す

デメリット 過剰なアクセスによるCLEサーバーダウンのリスク

cle_analysis

現時点での対策

対策１ 回避可能な重複データの取得はしない

未取得時にデータを得るために投げるデータ

詳細情報取得済みの講義IDを格納したオブジェクト

取得許可の判定を受ける講義ID

データ取得済みならオブジェクトからデータを渡す

対策２(仮)指定可能期間の制限

cle_analysis利用のまとめ

•メリット1. CLEログインなしでスムーズな予定管理2. Googleカレンダーの恩恵で多数の端末で同期可能

3. 予定管理の一元化でラクラク管理

•リスク回避のためにご利用は計画的に！

本題おまけ

どうやって作ったの？

開発環境

•使用言語 Javascript

•エディタ SublimeText3

•解析 Google Chrome

まず、ChromeでCLEを解析

１．要素の検証

適当な要素を右クリック→”要素の検証”で調査 関数発見！

２．関数の場所を探る

クリックで関数の場所へとべる

３．関数の中身を読む

処理の詳細を掴むまで１～３を繰り返す。

その後は？

大体のロジックを考える

ダイアログを表示

ユーザによる取得期間の入力、キャンパスの選択等

1週間分のカレンダーのHTMLを取得

1週間分のデータの先頭から末尾まで

科目ごとの詳細  データを取得

開始-­‐終了期間まで

結果を一旦変数へ  保存

詳細を未取得

NO

YES

CSV形式で出力

そして実装

テスト

•動作の確認

→指定期間抽出しているか等、期待通り動作をするか

• Chromeの他にFirefox、IEで動作するか確認

→Chrome、FirefoxはWindows版、Mac版で確認

完成

苦労した点

l当然ながらCLEの技術資料がない。

→手探り

l当初はアドレスバーに張り付けるタイプを考えていたので

字数を削るのが大変だった。

→外部ファイル化することで解決

まとめ

lブックマークレット作るのは楽しい！

lサイトの解析で学ぶことも多かった。lAjax、ブックマークレット作成の実践 etc…

l課題l 休講、教室変更等の情報がリアルタイムで取得できない→サーバー立ててスクレイピングする？lCLEの仕様変更毎にメンテナスする必要があるl自作ダイアログにしたらソースが肥大化(およそ２倍)→もっとダイエットさせるべき

ご清聴ありがとうございました！

SourceCode:Github prprhyt/cle_analysis

http://iconhoihoi.oops.jp/素材サイト