カテゴリー: 卒研メモ

　自分で使いやすいように，前回作成したPHPスクリプトを直してみました。変更点は以下の通り。

• jQuery Mobileによるスマホ対応(jQuery Mobileっていいのかしらね？)
• GETメソッドに対応。こんな感じでリンク張っていいよん。重くなったら止めるけど。
• とりあえず使いそうなJSON部分をピックアップ

　お気に入りの本を2冊ばかりリンク張っておきますね。

1. 伊理正夫先生の名著「数値計算の常識」
2. 奥村晴彦先生のR本

　Webアプリを作っていてもどかしいのは，PCにもスマホにもブラウザさえあれば対応できるのに，豊かな周辺機器をダイレクトに利用できないことです。ブラウザからクライアントマシンの機能をそのまま扱えるとなれば大変なセキュリティホールになっちゃいますから当然ではあるのですが，スマホのように様々なセンサーに加えて高精度のカメラやマイクまで付いているのにそれが利用できないのは大変な損失です。

　ということで，ボチボチNativeアプリを作りたいなと思ってはいるのですが，AndroidにしろiOSにしろ，それしか作れない専用の開発ツールを使う気には到底なれません(Java嫌いだし)。まぁ趣味ならいいんですけど，現状，ネットを使わないNativeアプリなんてものは意味がないので，それならいっそのことWebアプリと共存できるものがいいなと。幸い，Webアプリの開発環境(HTML5, JavaScript)はそのまま利用しながらNative化できるツールが出揃ってきたようなので，そろそろ卒研の次のステージとして，Webアプリをそのまま専用Nativeアプリにできるものを作れればいいなと夢想し始めました。

　調べてみると，ApacheのCordovaがなかなか良さそうな感じです。PhoneGapという名前でAdobeが商用ツールを抱えており，それのフリー版という位置づけのようです。開発実績は，2年前の記事でも割とあるようなので，試してみる価値はありそうですね。但し，ベースがnode.jsなので，何をするにもJavaScriptに慣れ親しまないとダメそうです。この辺も教材がいるなぁ。

　つーことで，自由製作で作ったWebアプリのネイティブ化，誰か試してみませんか？

　前回に続き，4月までにopenBDで新刊情報を取り出せないかと，イロイロ遊び始めました。ということで飽きないうちはこちらに気が付いた点をチマチマ書いていくことにします。

　新刊をチェックするためには出版日を取り出す必要があります。ということでsummaryのpubdateをざっと眺めてみました。昨日現在で約79万件のISBNコードからsummaryが取り出せましたが，たまに全くsummaryがないものもあるようです。

　ということでpubdateの書式ってどうなっているのかなと眺めてみると，これが千差万別，中には「25 cm-01」という明らかに間違っているだろというものもあり，書誌データのフリーダムさを楽しんでおります。

　書式を類別すると

• 西暦半角4桁-月(1～2桁)-日(1～2桁)
• 西暦半角4桁-月(1～2桁)
• 西暦半角4桁-
• 西暦半角4桁
• 西暦半角4桁月(2桁)日(2桁)
• 西暦半角4桁/月(2桁)/日(2桁)
• c西暦半角4桁-月(1～2桁)-日(1～2桁)
• c西暦半角4桁-月(1～2桁)
• [西暦半角4桁]-月(1～2桁)
• [c西暦半角4桁]-月(1～2桁)
• [西暦半角4桁]

あたりで大体尽くされている感があります。cや[]が付くのは何でかしら？

　イレギュラーなものとしては，コピペすると

• 1985, c1978-01
• 1982-1983, c1975-c1979
• -01（年がない)
• c1981(1983 printing)-01
• [2003], c2004-01
• c2012 [i-e- 2011]
• 1988 [i-e- 1998]
• 1982 [printing]-01
• U-S- G-P-O-] , 1998
• [20–], c2007
• １９９４．４（全角使うな！）
• 2014-5 (第2刷)
• 2003-10(3刷)
• 1935-7(第3刷:1993-6)
• 1958 2刷-01
• 大正11-12
• 昭和5-01
• 昭和23 5刷-01
• 平成4 (1992)-01
• なし

ですね。和暦は昭和が大多数で，平成は1件のみでした。この辺はチマチマ例外処理するか無視するしかないかな？

　あと，ちゃんと2017年1月の書誌データも追記されているのが分かったのが良かったです。新着情報取り出しも継続していけるかしらん？

　

　日本の出版情報をオープンに入手できるopenBDなるプロジェクトが開始されたようです(Internet Watch記事)。書誌データをJSON形式で取得できるAPIが公開されていましたので，早速PHPスクリプトを作ってみました。

　上記の画面は私の著作のISBN番号(978-4-627-84881-8)を使ってsummary部分のみ出力したものです。表紙画像が入手できるのはありがたいですね。もっと詳しいデータが欲しければonixオブジェクトを見ればいいようです。

　PHPのスクリプトはこんな感じです↓。

　図書館アプリみたいなものを作りたい人はぜひともこのopenBD APIを利用してみて下さい。Amazonより余計なデータがない分いいかも。

　昨年度の卒業研究ではスマートフォンの加速度センサーを使って歩数を記録する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の改変のみで可能なはずです。実行例は下記の動画をご覧下さい。