この記事はTUT Advent Calendar 2016 3日目の記事です。
たくのこ と申します。 Twitter: @takunokko
今年度の春に木更津高専(NITKC)から、豊橋技術科学大学(TuT)に編入してきた3系(情報・知能工学系)の学生です。
趣味はカメラと珈琲とプログラミング。最近は課題やレポートに追われながらも大学で始めたバドミントンが楽しくて仕方がない日々を送っています。
Advent Calendarに参加したいな〜と思いながらも、テスト期間ってこともあり、ちょっと気が引けてたのですが、12/2になっても12/3の参加者が決まっていなかったので、これはチャンスと思って勢いで入ってみました!
この記事では、TuTの休講・補講情報を見やすくするために自分が作ったアプリを紹介していきたいと思います。
Android版: TuT休講・補講Viewer
ブラウザ版: TuT 休講・補講 for Browser
Chromeプラグイン: TuT休講・補講Viewer
ついでに… 宿舎の布団リースを利用している人向けに、友達追加するとシーツ交換日をLINEでお知らせしてくれる何かも作ったので、よろしければどうそ^^
LINE: [TuT 寮 布団bot] https://line.me/R/ti/p/%40kth0880x
※これらは、アプリはバグなどにより正常に情報が表示されない可能性があります。利用の際は自己責任で使用してください。
はじめに
2日目の813さんの記事「休講・補講情報を見やすくする」とものすごく似ている気がしますが…自分もTuT休講情報を見やすくするための何かを編入学以来、約半年間いろいろ作ってきました。みんな考えることは同じなんですね〜w
最初にChrome版を5月?にリリースし、その後10月中旬にAndroid版、11月半ばには試験的にブラウザ版と公開してきました。
これらのアプリは、基本的にTuTの休講・補講情報のページからデータを取得してきて、設定した学年・学科により情報の絞り込み、また自分には不必要な科目の非表示機能がついています。
しかし…!
11月28日。大学で利用されているDreamCampusが更新されまして…。休講・補講ページがずいぶん使いやすくなりましたね〜(白目
現在のページはとりあえず、こちらです(12/3現在) => https://www.ead.tut.ac.jp/board/main.aspx
以前のページでは、登録されているすべての情報が日付順に表示されるだけで、表示されているほぼすべての情報が自分には関係のないものでした。
それに比べ、今回の更新でアクセスした日から1日ずつの表示といった感じに変わりました。
前日の813さんの記事でも書かれているように…。何がすごいって、全部改行で書かれてたり、すべてのコンテンツが<form></form>の中に書かれていたり…クリックするとPOSTでデータを送って…(たぶん)1日分の情報しか取得できない仕様
大学のページには、Web版とモバイル版の2種類の異なるURLが示されているのに、現在ではどちらも同じページに飛ばされるのが気になりますが…
(今後大学側がいい感じに実装してくれるのかもしれない。)
見事に、これまで作ってきたアプリが全滅です。ここまで作ってきたアプリが公開して1ヶ月で使えなくなるのはさすがに悲しい…。
ってなわけで、このまませっかく作ったアプリが使えなくなるのは悲しいので、現状のシステムでも作成したアプリを動作させるようにと頑張ってみました。
システム概要
Androidアプリ版についてのアプリを例に仕様をざっくり紹介してみようと思います。
以前のシステム
ざっくりこんな感じです。(ざっくりしすぎ。
スマホアプリで更新操作がされると、大学の休講・補講ページに問い合わせて、ページを取得。ページの中からデータを取り出して、自分の設定した条件によって絞り込んで表示します。
新しいシステム
A -> B -> C の流れを日中は(いまのところ)1時間間隔で行い、外部サーバーの情報を更新します。
① -> ② -> ③の流れは、ユーザがデータを更新した際の流れになります。
新しいシステムでは、大学のHPが休講・補講情報を1日分しか表示してくれません。30日分のデータを取得したい場合には、各ユーザーが更新するごとに30回のアクセスを行う必要があるので効率的とはいえず、また無駄な通信が発生するのでユーザーにも負荷がかかります。(もちろんサーバーにも
そこで、大学のHPから定期的に外部のサーバーに情報を取得させ、ユーザーはその外部のサーバーにアクセスすることによってまとめた情報を取得するシステムとしました。
現在は、外部サーバーが日中は1時間に1度、その日から30日後までのデータを取得して、以前のサイトの形式に合わせたデータを作成しています。
外部サーバーに設置するhtmlファイルは、以前の大学休講・補講ページで利用されていたものと必要な部分については同じHTMLタグやidを利用したため、アプリ側はでURLを書き換えるだけで今までのシステムを引き継ぐことができます。このサイトの仕様は、自分の使いたいように適当に更新すると思うので、デベロッパーの方々にはこのサイトからの情報はオススメしません。できればしないでください><
各アプリの実装について
Android版、ブラウザ版、Chrome版、基本的にすべてHTML+CSS+JSで開発しています。
細かい実装について説明しても面白くない(自分も理解しきれてなくて説明できないw)感じなんで、概要とか特徴を紹介してみようと思います。
Android版
Android版の開発は“Apache Cordova”を利用しています。これは、モバイルアプリをHTML+CSS+JSで作成し、それをAndroid、iOS,WindowsPhone向けに出力できる開発環境です。
もともとは、Cordovaを内部的に利用しているMonacaというブラウザ上で動作する開発環境を利用していたのですが、無料プランでのビルド回数の制限や、サードパーティー製プラグインの導入ができないなどの制限から途中からCordovaに移植しました。(簡単なアプリを作る際や、有料プランを使う余裕がある場合はすごい有用で便利なツールだと思います!
[特徴]
- WebViewにCrossWalkというものを利用しています。
これは、Intelが開発したWebViewで標準のHTMLを利用したハイブリッドアプリでは、OS標準のWebViewを利用するのに対し、CrossWalkを利用するとアプリ内にWebViewを内包することができます。
何が嬉しいかって、Android4.4以前の端末とそれ移行の端末でWebViewの仕様変更があり、同じコードでは一部動作しなかった機能(ajax関連のほげほげ)がCrossWalkを利用することで、何も気にせずに使えるようになりました。 - 通知機能
ローカル通知プラグインを導入し、授業の変更がある日の前日や当日に通知によってそれをお知らせする機能を実装しました。
ブラウザ版では実装できない機能ですね〜
ブラウザ版
Android版を公開すると、ありがたいことに紹介した方々から「使いやすい!」「便利になった!」と言ってもらえました。しかし、それと同時に「iPhoneにも対応してくださいよ〜」との意見を沢山いただきました。もともとCordovaはマルチプラットフォーム向けの開発環境なので、ちょちょいっとiPhone版のアプリもリリースできます。
ですが…iOSアプリ開発者になるためのApple Developer登録には毎年8000円〜10000円ほどかかるらしいです。自分がiPhoneを使ってるわけでもないのに、そんなことはできない…。
そこで、アプリとしてではなく、ブラウザからアクセスできれば便利なんじゃないか!?と思ってブラウザに移植してみました。
[特徴]
- YQLを利用した情報の取得
あるページAから(内部的に)他のページBにアクセスする際には、”クロスサイトスクリプティング“という攻撃を防ぐために基本的にはできないようになっています。
これを許可するためには、ページBにそれを許可するための記述などが必要になります。Androidアプリ版ではページAがアプリとなるため、この問題は発生しませんでした。
そこで、この問題を解決したのがYQL(Yahoo Query Language)というサービス。Yahooさんが提供してくれているもので、他のwebサイトの情報をSLQっぽい言語で記述して取得できるといったものです。
これを利用してつくられたjquery.xdomainajax.jsを利用してデータを取得しました。(アクセスするたびにYahooさんのサーバーを経由してるのかな。。みんながこれを使っても大丈夫なのだろうか…w - FireFox未対応…
アプリの実装で、取得したデータから自分の設定した学年や学科で絞り込みを行う際に、データを一時的にWebSQLを用いてデータベースに格納します。なので、プライベートブラウザなど、ストレージが利用できない環境ではこのアプリは動作しません。
さらに、FireFoxさんはWeb SQLに対応しないと言っています。参照: HTML5 IndexedDB, Web SQL Database and browser wars – Stack Overflow
他の手法でなんとかなりそうな気もしますが…(たぶん対応しません^^ - GitHub Pagesで公開
ソースコード、GitHubに上がってます(Web版だからいくらでも見れるけど…。
https://github.com/takunoko/TuT_LecCan_for_Browser
これに、github pagesという、リポジトリをWebサイトとして公開し、URLを独自のものに付け替えて利用しています。
元のURLは(https://takunoko.github.io/TuT_LecCan_for_Browser)です。アクセスするとリダイレクトされて、現在のURLに移動します。
Chromeプラグイン版
TuTの休講・補講ページが見づらいと思って、入学早々に作ったのがChromeプラグイン版の休講・補講Viewerです。もともとは、大学の休講情報サイトにアクセスした際に、自分に関係のない情報を非表示にするだけの機能でした。
今でも、Chromeプラグイン[TuT休講・補講Viewer]を導入した状態で、大学サイトから取得してきた外部サーバー(http://ie.takunoko.com/www/LecCan_list.html)にアクセスすると、自分の設定した情報で絞り込んでくれます。(このサイトは近いうちに変更する気がするので、いつまで使えるのか…。
以前は上の画像のように、いい感じに表示されていました。さらに、ブラウザに表示されているプラグインのアイコンから、特定の日の休講情報などを取得できてちょっと便利な感じでした。
それでも、Chromeのプラグインというと、ちょっとマニアックな感じがあって、利用者が少なかったですね〜 今でも一部のコアなユーザーが利用してくれています!ありがたや〜
Chromeプラグイン版を作ったのがすべての始まり…。これを作ってから約半年(ずいぶんサボったけど)。いろいろなものに派生してきました。
サーバーサイド
現在、大学の情報を持ってきてまとめているサーバーのプログラムもちょっと紹介。
- Ubuntu Server 16.04 LTS (仮想マシン)
- Python3 + Selenium + PhantomJS
- Python3
プログラミング言語です。やりたいことがパパッと簡単にかけてお気に入りです^^ - Selenium
Webブラウザを自動で操作する何か。例えば、
「あるページにアクセスし、ここにパスワードを入力してログインボタンを押す。」
みたいなことができます。なにか作業を自動化したいときに便利です。そして面白いです。
以前、ブログでも紹介したことがありました。Python+SeleniumでTwitterにログインしてみる - PhantomJS
仮想ブラウザ。Seleniumで操作するブラウザです。GUIの環境などでは、FireFoxやChromeを選択するとSeleniumが自動でいろいろやってくれるのを見れて面白いのですが、情報を取得してくるサーバーにはGUIは不要なのでHeadlessブラウザのPhantomJSを利用しました。見た目にはブラウザが見えませんが、スクリーンショットなどを保存することができます。
- Python3
以前にもちょっとPythonをもちいたWebスクレイピングをしたことがあったので、意外と手早く(1晩徹夜)作ることができました^^
以前の記事: python+seleniumでTwitterにログインしてみる
深夜テンションで作成したプログラムなので、ちょっと貼るのは避けようと思いますが…。内部的に
- 仮想ブラウザで現在の休講情報ページにアクセス
- formタグに入っている文字列(ページに表示されているすべての内容)を取得
- 取得したデータを改行区切りで分割、科目名や教員名などを取り出す
- 保存
- [>>]ボタンをクリックし、翌日のデータに進む。2に戻る。
- 2〜5を30回(30日分)繰り返す。
- 取得したデータをそれっぽく出力。
このプログラムをcron(ジョブを自動実行するためのデーモンプロセス)で定期的に実行しています。
こんな感じで24時間稼働しているサーバーが大学の情報を取得し日々更新しています。
まとめ
さて、完結に記事を書くつもりだったのですが、まとまりの無い・たいして面白くもない文書を長々と書いてしまいました。(汗
高専の時代から「なければ作る!」と言われながらいろいろなものを作ってきましたが、最近はやっと少しは実用的なものが作れるようになってきた気がします。
やっぱり、ものづくりは楽しい^^
これからも「なければ作る!」精神でいろいろなものを作っていけたらと思います。
明日は naruhodo2015 さんの「5mmくらいわかる競馬講座~国庫から出金~(CC他」です。正直競馬は全然わからないですが、5mmくらい知っておきたいので期待しています!
また、今後のTuT Advent Calendar 2016の内容にも期待したいと思います!
ここまで読んでくださりありがとうございましたm(_ _)m