カテゴリー: 卒研メモ

　昨年度の卒業研究ではスマートフォンの加速度センサーを使って歩数を記録するWebアプリケーションを作成しました。これを応用して

• Google MapとGPSデータを連携し，地図上にウォーキング跡を表示
• 歩数，歩いた距離，体重を使って消費カロリーの自動計算

ぐらいは出来そうかなぁという感触を得ています。

　2018年度(か2019年度)より，特別プログラムの担当を外れて3年生の個別学生実験の担当に戻りますので，この機会に教材としてこのウォーキングアプリを使ってみようと計画中です。スマートフォンは受講する学生さん個人のものを使うことになりますが，持っていないという人向けに1台ぐらいはプリペイドsimを入れた安物スマホを用意する必要はありそうです。

　Webアプリケーション開発環境としては，管理の都合上，Linux (UbuntuかCentOS)をNFSクライアントとして利用し，自動的にホームディレクトリのpublic_html以下に置いたファイルは公開されるようにしようかなと。アップロードに関わるファイル名やパーミッショントラブルは避けたいところですので。

　あとはw3schoolsの解説などを見ながら，研究室独自の教材を膨らませつつ，適度なレベルのスマホ対応Webアプリに仕上げていければと考えています。今年中に目途をつけたいところです。つか，つけなければなりません。

[2017-01-26追記]
　GPSデータの利用はこちらのSyncerさんのやられていることで半分ぐらいは尽くされてる感じです。距離の計算，歩数の計算をプラスして，PHPをAjaxで呼び出して逐次データを保存する機構をつけると大体思ったものが作れそう。あとは受講生個々のデータを区別して保存できるようにしておけば大丈夫かな？(MySQLよりSQLiteの方が良さげ）。

　Let’s Encryptを利用して本サイトのHTTPS化を行ったことは既にここに書きましたが，その結果，https経由のアクセスが増えつつあります。GoogleのCrawlerは積極的にhttpsアクセスを拾うようにしているらしく，http:// のリンクでもhttps://でアクセスできるかどうか，自動的に確認しているようです。結果として本サーバのHTTPS通信が信頼に値するものであれば，検索結果に示されるのはhttpsの方を優先しているようなのです。

　ということで，アクセスログチェック魔の管理人はaccess_logだけでなくssl_access_logも逐次確認できるように細工を施しました。そこで見つけたのが次のURLへのアクセスです。

https://FQDN/.wellknown/assetlinks.json
https://FQDN/.wellknown/apple-app-site.association

アクセスしていたのはGoogleのCrawlerです。ハテこれは何？・・・でググってみたところ，AndroidアプリやiOSアプリのための専用立ち上げ情報格納ファイル(Google Digital Asset LinksとUniversal Link)であることが判明しました。

　どちらも似たような形式のJSONファイルになっており，これらのURLを踏むと自動的にサイトに仕込んだこのファイルにアクセスし，自動的に専用アプリが立ち上がるようになっているとのこと。なるほどねぇ，FacebookやTwitterもこれでアプリが立ち上がるんだなぁと納得しました。

　スマホアプリはWebアプリとネイティブアプリのどちらからでも使えるようにしておくのが定番になりつつあります。本研究室では専らWebアプリの開発を行っていますが，ユーザが付くような有用性の高いサービスを作った暁には専用アプリも立ち上げ，.wellknownディレクトリにこの二つのファイルを仕込んで利用してみて下さい。

　あまり知られていないようですが，今のPowerPointは自動録音・ポインタ動作の録画が可能になっています。メニューは下記のところにあります。

　PowerPoint 2016では「スライドショー」→「スライドショーの記録」→「先頭から録音開始」で，最初のスライドから切り替えのタイミング，レーザーポインタの動作（スライドショー時に右クリックして出す），自分の声をすべて記録しながら保存することができるようになっています。

　本学の卒業研究のプレゼンテーション時間は8分となっています。全ての説明が終わるまでどの程度の時間がかかるのかを確認しながら，この「スライドショーの記録」機能を使ってプレゼンテーションの練習をしてみて下さい。慣れるまで，自分の声入りPowerPointプレゼンを見るのはかなり恥ずかしいと感じるものですが，客観的に自分のプレゼンを見ることができ，時間も正確に測れるので，一番の勉強になります。頑張りましょう。

　「スライドショーの記録」がうまくいくようになったら，ライブで実際の発表会場を使ってプレゼンテーションを行い，練習を重ねて下さい。

　以前にも書きましたが，本研究室のこのサーバはLet’s Encryptを使って暗号化対応しています。従って，https://cs-tklab.na-inet.jp/ でアクセスしてもらうのが基本となっています。

　Webサーバの暗号化対応状況は，Let’s Encryptがお勧めのSSL Server Testで確認することができます。Appleがアプリの通信にTLS 1.2の暗号化を義務付けというニュースがあり，気になったのでテストしてみました。以下，このサーバに対して実行した結果を掲載しておきます。長いので三分割してあります。

　ランクはC。どうやらSSLv3を有効化しているせいでinsecureと判断されているようです。ということでこちらのサイトの設定を参考にしてApacheの設定を変え，SSLv3，RC4, DHは無効化して再度チャレンジしてみましたところ，A評価にアップしました。強制的にhttps接続をさせるとA+になるようですが，今のところそこまでは対応していません。

この結果，Internet Explorer 6 on Windows XP環境下では暗号化接続が出来なくなってしまいましたが，そんな環境を使っている方が悪いということで今後は無視します。ということで，暗号化が必須とされるサービスと連携する時にはhttpではなくhttpsを使って下さい。

　3年生は就職活動と卒業研究について考える時期になってきました。本研究室では例年こんな感じのスケジュールになりますので，予めお知らせしておきます。

　卒業研究については，今のところ殆どの方々は何らかのサービスを提供するWebアプリケーション開発を行う予定ですが，最近テーマが陳腐化して正直詰まんない訳です。毎年卒研を指導しているWeb使用歴二十数年の年寄りを満足させるのは難しいとは思いますが，単純な「スケジューラ」「掲示板」「日記帳」「料理レシピ管理」というテーマはそろそろ勘弁してほしいというのが偽らざる心境です。

　とはいえ，皆様方のように人生経験・Web経験が不足気味の方々に斬新なアイディアだけ求めるのは酷というもの。卒業研究の目的は，自主的な学習を行って自身の技量を高めることが第一の目的なので，アカデミックなお約束事を守って頂ければ何をやってもらってもいいわけです。とはいえ「それは世の中に既にあるものと何が違うの？」という疑問は，アプリケーション開発であれば必ず出てくるものなので，それに対して何らかの回答は用意しておく必要はある訳です。「なんとなく面白そうだし勉強にもなると思って作りました」という，「ああそうですか」で終わってしまう定型回答は最終手段として取っておくことにして，それなりに新規なところ，工夫したところ，既存サービスと比べて異なるところを，最初から提示しておくのが親切というものです。

閑話: ちなみに「スマホ対応」は当たり前なので，Bootstrapのような簡単にresponsive design化できるフレームワークを探して利用して下さい。もちろん独自実装responsiveでも可。

　ということで，当方が考える，「この辺の工夫があったらアピールできるのでは？」という項目を書き出してみることにします。大別すると「セキュリティ」「アミューズメント」「人工知能」の3つになります。このうちセキュリティ，人工知能については私もよく分かっていないので，勉強しながら何ができるかを探っていきたいところです。

1. セキュリティ・・・本研究室のWeb教材はセキュリティの観点が抜け落ちており，あまり頑健なシステムにはなっていないという弱点がある。その点を補強するWebアプリケーション開発，教材のブラッシュアップができないか？　あるいは，「頑健なパスワードを作る」アプリケーション開発なども良い。とっかかりはIPAやJPCERT等が良い。
2. アミューズメント・・・オープンキャンパス，大学祭で展示して遊んでもらうゲームをWebアプリとして構築する。
3. 人工知能・・・Deep Learningが大流行りの昨今，NVIDIA DIGITSなるWeb UI付きのツールが簡単にインストールできる。これをカスタマイズして別の用途に利用できるようにならないか？

　この3つのキーワードを含むようなテーマだと，少しは感心してもらえるのではないでしょうか？　通り一遍のありふれたWebアプリを作るだけでなく，何かこの3つに限らず独自に考えた題材が盛り込まれた卒業研究テーマをこの年末にでも考えておいて下さい。　

　まずjQueryの手助けなしに，JavaScriptでAjaxを使うためのXMLHttpRequest関数を直接呼び出してDrag&Dropファイルアップロード機能を実装してみました。

動作は下記のビデオを参照して下さい。

　使用したものは，file_api_upload.htmlとupload.phpです。

file_api_upload.html:

upload.php:

使用方法は下記の手順となります。

1. file_api_upload.htmlとupload.phpを同じディレクトリ（フォルダ）に入れておき(以下semiとします)，”upload_files”というアップロードファイル格納用ディレクトリも掘っておく。
2. File API使用可能なブラウザからhttp://localhost/semi/file_api_upload.htmlにアクセスし，DropエリアにファイルをDrag&Dropする
3. アップロードボタンを押すとアップロード開始。画像ファイルは自動的に表示される。

　これを改変して，Drag&Drop直後にアップロード開始となるバージョンも作ってみましょう。file_api_upload.htmlの改変のみで可能なはずです。実行例は下記の動画をご覧下さい。

　普段のレポート作成や卒論執筆時に，ブロックダイアグラムや流れ図を描く必要が出てきます。そんな時は，ビットマップでグラフィックスファイルを作るツール（ペイントなど）より，ドロー(draw)系のツールを使う方が，拡大縮小時のジャギーを減らすことができ，何かと便利です。日経トレンディに，Google Chromeから使える”draw.io”の紹介記事が載っていましたので，早速使ってみました。

　draw.ioはChromeから使うWebアプリと，Windowsのデスクトップアプリとして無料で使えるバージョンがそれぞれ用意されています。どちらもChromeの拡張機能（見つからなければ”draw.io”で検索)からインストールできます。

　画面構成やメニューはWebアプリ版でもデスクトップ版でも同じですが，前者はGoogle Driveへの保存に対応しています。後者は複雑な図をスムーズに編集したい時に便利でしょう。

　試しに，本研究室のWebプログラミング教材に掲載されている図をdraw.ioで書き直してみました。普通保存するとXML形式になりますが，PDFファイル，PNGファイル，SVGファイルの形にエクスポートすることも可能です。下記はPNGファイルに200%の倍率で書きだしたものです。

　WordやExcelの図作成ツールでも簡単なものは書けますが，複雑なブロックダイアグラムを作る用途には向いていません。便利に使えるドロー系のツールを併用するようにして下さい。