主宰：幸谷智紀
卒研ネタになりそうな情報メモ。最近だとWebプログラミング関連の情報が多い。
無事採択されたようなので，短い発表ですがcode4lib Japan 2018に参加してきます。
何度かここで取り上げたopenBDに検索機能を付加するAPIの実装の話になります。10分プレゼンだと，システムの解説，応用事例の紹介をしたらお終いになりそうなので，どこかでちゃんと文章としてまとめたものが必要ですね。来年度の紀要かな？
8月中にシステムのブラッシュアップをしておかなければいけませんが，HTTPS化は済ませましたので，少し楽になりました。サーバやプログラムの管理は，盆栽同様，日々のチマチマした世話が重要ですね。
Apache Cordovaの教材ですが，新たに「じゃんけんゲーム」を課題として追加し，説明をちまちまと改良して一段落しました。実際にコンピュータシステム実験で取り組んでもらうと，課題４で躓いて課題５まで完成するのが難しくなる，というのが本学の平均的なコンピュータシステム学科３年生のWebプログラミングスキルのようです。世間的にはどうなんでしょうか？
さて，次の「Webプログラミング開発入門」はフレームワーク(Framework)に基づいた教材作成がテーマになるわけですが，あまり手を広げすぎると収拾がつかなくなるので，
で使える範囲のものにとどめておく予定です。Java ServletとかRuby on Railsとか.NET Coreは他の方にお任せしておくことにしましょう。もちろん，自力でやってみるのなら，卒研テーマとしてはO.K.です。その代わり，途中で挫折しても手助けできないことはご承知おき下さい。多分，別テーマに乗り換えてもらうことになります。
サーバサイドのフレームワーク
通り一遍のCRUDアプリを作るにしても，サーバーサイドのフレームワークは結構道具立てが大変なので，それぞれ１章分ぐらいになっちゃいそうですねぇ。
クライアントサイドのJavaScript-based SPAフレームワーク
上記３つのクライアントサイドのフレームワークは，全てNode.js環境下でSPAを作るためのものなので，まとめて一章分ぐらいでいいような。Cordovaの章に１節ずつ追加する程度かなと。
以下，Google Tread調べを載せておきます。すっかりWordPressの天下になっちゃいましたねぇ。インストールも操作感もお手軽ですからね。
Google Trend調べ
前から興味があったので，JavaScriptでの多倍長計算をまじめに考えてみました。数値計算用のライブラリとしては既にmath.jsってのがあって，ここではDecimal.js(10進多倍長演算）を使ってのBigNumberオブジェクトが使えるようです。で，これより速い多倍長計算ができないかな？ということです。
定番としては，既存FP数を組み合わせて多倍長化するMulti-digits(Muti-term)方式で実装すれば，そこそこ早くできるだろうという予測は容易いのですが，データ型テキトーなJavaScriptでは倍精度型を二つ組み合わせて作るということもそう簡単ではなかったりします。とはいえ，今ではFloat64Arrayという，データ型宣言ができる機構がありますので，そろそろMulti-digits多倍長のJS版ができるかなと。今のところググっても実装したものはなさそうなので，やっても無駄という可能性もあります。ま，失敗報告でもいいかなと。
あとは，どのぐらい既存の高速化テクニックがJavaScriptで可能なのか？というテーマを追究したいところです。色々調べてみたところ，Emscriptenが大分使いやすくなってきているようで，C/C++ソースをJavaScriptにコンパイル（変換？）できるようになっており，さらにWebAssemblyというLISPのようなS型スタック機構を備えたアセンブラっぽいものもW3Cのドラフト（JavaScript APIとWeb APIもある）になっています。一応，FirefoxとChromeでは使えるっぽい。128bitのSIMD命令の実装例もありました。
以上のあらましは日本語記事（１，２，３，４）で大体掴めます。
ただ，このレベルになると今後きちんと実用化されるのかどうか，そのうち放置プレイとなるのか，世間のニーズ次第ということになります。WebAssemblyに熱心なのはMozilla開発陣だけで，日本語記事を執筆された方もその一員なんですよね。
しかしながら，どう頑張ってもネイティブ環境下以上の高速化はJavaScriptでは無理ですから，まずは使いやすくてそこそこ速いという程度で納めておくのが吉かなと。
ボツボツ，現実逃避がてら遊んでみることにしましょう。
今朝がたのPC Watchの記事で，ゼロ幅文字を埋め込んでコピペ元を特定するという，原始的な電子透かしテクニックが紹介されてました。
文書の流出元も一発特定、文書にゼロ幅文字でユーザー名を埋め込む手法が海外で話題に【やじうまWatch】 https://t.co/ydOS5vPo5q pic.twitter.com/NPObEZlXcw
— INTERNET Watch (@internet_watch) 2018年4月10日
ネタ元は，こちらのMedium記事ですが，こちらの方，Reactでサンプルコードを書いているんですね。
最近はWeb業界もすっかりFrameworkばやりで，作り込んだUIはAngularやReactのようなJavaScript frameworkで構築するのが普通になっています。当方も，頭が古いせいもあって未だにきっちりObject Orientedなframeworkの世界に馴染んでいませんが，本年の卒研ではN君がAngularを活用して楽天APIのUIを作り始めています。
本研究室のサーバサイド中心のPHPプログラミング教材は，ちょっと時代遅れっぽいところが目立つようになりました（昨年度出来たばっかりなのに！）。ユーザサイドはSPAでかっこよく作り込み，サーバとのやり取りはAJAXで済ませてしまう，という方式もキッチリ解説する必要がありますねぇ。つか，最初から全部やり直さないとダメっぽい。
とはいえ，HTML, CSSが怪しい人たちにJavaScriptでDOMの概念を理解してもらうのはなかなか困難です。ボチボチ下から積み上げるボトムアップ軽視では限界で，最初からOOP的チュートリアルを作っちゃって，トップダウン的にframeworkに慣れてもらうというのが良い時代なのかもしれません。
つーことで，賽の河原のごとく，作った教材をもう一度再構築すべく，本年度後半はつらつら考えつつ「Webプログラミング開発入門 Version 2」を作っていきたいところです。幸い，Apache Cordovaの実験を行うにあたり，Node.jsの環境はばっちり構築できてますんで，導入は容易いかと。
情報処理学会でも発表する予定になっているK君の卒研テーマは，Tweetの内容を正負の感情値で分析するというものです。やっていることはこちらの方がPythonで実装されているものをPHP+MySQLでやっている感じですが，K君の実装は，特定個人の感情を時系列でグラフ表示できるWebアプリとして使えるもので，下記のように表示されます（トランプ大統領のグラフ）。
上記の記事で紹介されているYahoo! Japanの分析ツールはもっとこれを大規模に行っており，「世間一般の雰囲気」（あくまでTwitterの中だけの話ですが）が分かるようになってます。下記の図は「安倍首相」で検索した結果です。
これで雰囲気が分かるかなぁ・・・というところですが，何か事が起きた時に分析してみないと良く分からんですね。
K君のツールはもう少しブラッシュアップして，本研究室内のアプリとしてお披露目したいところです。
IPAでは，事由に利用できる美しい標準文字TTFをリリースしており，この1月に戸籍で使われている文字を収めたIPAmj明朝フォントをリリースしました。自体の確認のためにはインストールする必要があり，数文字だけ字体の確認をしたい場合は面倒です。
そこで，以前作った春秋フォント表示スクリプトをちょっと改造して，IPAmj明朝フォントの書体確認ページを作ってみました。UCSコード表記か，文字列入力すると，このフォントから文字を読み出してグラフィックスとして表示できます。
時間があったらPDFに埋め込むようにしてみようかしらん。
情報セミナー２の自由制作のテーマとして，Google Cloud Vision APIを使った画像認識ツールの製作を行ってくれたのがK君です。基本有料ですが，1,000回/月までは無料で使えるとのこと。
東海道五十三次の袋井宿の画像を解析してみると，「水辺」「旅行」「木」「空」「イラスト」「アート」等の単語が出てきます。残念ながら地名までは特定できていませんが，画像認識ツールとしては相当優秀ですね。
結果はJSON形式で取得できるので，無料で使える範囲で他のサービスとの組み合わせができると面白そうです。
毎年この時期は3年生の情報セミナー２の時間を利用して好きなものを作るようにしています。本年度は懸案だったopenBDの検索用API(openBD Search API)の実装を行ってみました。処理の流れを図示したものが下記になります。
⓪～⑥までの処理内容を書き出してみます。
⓪ openBD.jpから全書誌情報をダウンロードします。こちらのPythonスクリプトを土台として，MySQLに書誌情報を突っ込むように改良しました(Thanks Aくん)。
① ユーザからの検索要求を受け付けるWebフォームは，API gatewayにPOST(GETでもいいはず)できる仕様であれば言語は問いません。サンプルとして，JavaScriptからXMLHttpRequest関数を使って実装してみました。
② API gatewayに検索情報をPOSTします。この際，Webフォームを設置してあるサーバのドメイン向けに発行したAPIキーも一緒に送付する必要があります。
③ API gatewayでは，受診したAPIキーをRefererと合わせて認証し，通った場合のみ検索を実行します。
④ MySQLサーバで検索され，マッチしたデータはAPI gatewayに送られます。
⑤ 検索データをJSON形式に加工してWebサーバに送付します。
⑥ JSONデータをどのように表示するかはWebサーバ側で決めます。
検索結果をJSON形式にした理由は，元々のopenBDの書誌情報がJSONで記述されているからです。今のところ混ぜて使う予定はありませんが，「検索機能付きopenbd.jpもどき」のようなものを作る際には楽になるかと。
ちょっとトラブったのは，XMLHttpRequest関数が，デフォルトでは別ドメインへのアクセスを許容していないという仕様の問題。API gateway側で”Access-Control-Allow-Origin: アクセス許可ドメイン”をHTTPヘッダに追記すればよいとのことなので，JSON検索結果を返す直前に発行するようにしました。これで別ドメインからのアクセスがAJAXで可能になりました（その分，セキュリティホールを増やしているとも言える）。
その他，APIキー発行システムを作ったり，大本のPHPスクリプトがバレないようにApacheのエイリアスを設定したりして，何とか今風のWeb APIっぽく実装出来たハズです。外部公開も可能な状態ではありますが，サーバの付加やopenBDの今後を見ながら考えていくことにしたいところです。つか，これ単独だと大して面白くないんで，SNS APIを通じて世評と組み合わせられるような仕組みに使えればいいかなぁと夢想中。
来年度の３年生向け実験講座のテーマを決めなきゃいかん時期になりました。久しぶりなのでOS環境から作る必要があり，３月下旬～４月上旬はこれにかかりきりになりそうな感じです。
ということで，色々調べた結果，枯れた技術を使うのが安全なので，テーマとしては「Apache Cordovaを用いたハイブリッドアプリ開発」になりそうです。まだ作ったことないけど。他の先生方とテーマが被ることもなさそうです。
参考文献は色々探すと，これなんか良さげなので，一冊入手しました。Webに転載されている分だけでも参考になります。とはいえ，何を作るかまでは本には書いてありませんので，いろいろ考えなきゃいかん訳です。２～３回の実習でできる範囲に留めておかなきゃいけません。この辺の塩梅が難しいところ。
まぁ，チマチマ触りながらテーマを考えていきます。
MySQL化に引き続き，検索の高速化を行ってみました。手っ取り早く，著者フィールドをindex化した結果，かなりの高速化ができることを確認しました。
検索ワードを「高橋留美子」でやってみた結果です。index化前は
でしたが，index化後は
となり，1.69秒→0.00257秒で爆速となりました。このぐらいだとほぼWeb通信の遅延しか感じません。
とはいえ，index化できるフィールドには限りがあり，出版社名，タイトル名まで一篇にはindex化できません。ということで，メインの書籍テーブルではタイトル名でindex化しておき，著者名，出版社名はそれぞれ個別にテーブルを作っておくことにしてはどうかと思案中です。これができると，ようやく最終目的である「openBD APIに著者名，タイトル名，出版社名の検索機能を追加する」ことができるようになります。予定では
となればいいかなぁ。マシンリソースが決定的に不足してますんで，API keyはPOSTで渡すようにして制限掛ける予定です。今月中にできればまぁ情報処理学会で話すぐらいは出来るでしょう。
ちなみに，メイン書籍テーブルまるごとのMEMORYエンジン化は無理でした。メインメモリを山ほど積んだ，openDBの本家が展開しているような贅沢クラウド環境でないと厳しいですねぇ。
フィールドを制限してテーブルサイズを小さくすると入ることは入りますが，1/4ぐらいの検索速度に留まりましたんで，index化の方が桁違いに速いことが分かります。