卒研メモ: Googleで関数グラフ描画

Googleの関数グラフ描画機能を初めて知らされたTweet

 年のせいか,新しい物事をキャッチする能力が落ちているようで,Google検索に関数グラフ描画機能が付いたことも知りませんでした。単位変換や電卓機能があるのは知っていたのですが,こういう機能までつけてくるとは,さすがGoogle,コンピュータリソースが有り余ってますね。

 1変数関数だけでなく,2変数関数のグラフも描けるようです。ちなみにz = x^2 + y^2をググってみると,下記のようになります。

x^3 – exp(x) = 0という方程式を解く時には,y = x^3 – exp(x)のグラフを描画し,x軸との交点付近を拡大して

x = 1.58718・・・ぐらいかなぁというアタリを付けることも簡単ですね。今後色々活用してみたいところです。

卒研メモ:CakePHP勉強中

 前々から,サーバサイドのWebプログラミングにフレームワークを使った方がいいというサジェスチョンを受けてたので,今年の情報セミナー2・事由政策の時間にCakePHPのTutorialを読みながら勉強しています。これを取り上げたのは下記のスライドに書いた理由に加えて,最初からBootstrapを組み込んであること。次の教材のアップデートでは最初から解説しておこうと思ってたところなので,親和性の高い内容にできそうだと判断しました。

CakePHPの簡単な紹介スライド

 ということで,本日段階でCRUDシステム部分は完成しました。次はBakeを使って認証システムを構築する所。Bakeなしでもできますが,使った方が圧倒的に楽なようなので,体験しておけという方針と理解しました。

 50の手習いですが,年内にTutorial終わらせて,ファイルアップロード処理を付けて,3月ごろまでには教材のアップデートに取り掛かりたいですね。

[卒研メモ] DPZとconcrete5

 愛読している老舗オモシロ系Webサイト,デイリーポータルZ(略称:DPZ)がリニューアルしました。@niftyが富士通から切り離されても存続し,その後ほどなく,サイト,というより,編集部員ごと切り売りされるというあたり,信用されているブランドの強みを感じさせます。

 とはいえ,「老舗」ならではの弱みというものもあります。システム的に古いものを継続してメンテナンスしていかねばならず,HTML & CSSの改良だけで済むならデザイナーに発注すれば済む話ですが,CMSと一体化したサイトとなると,バックエンドのDB構造から考え直さないとリニューアルもままならないことになります。現状のWordPress, MovableType, NetCommonsといった,バージョンアップが頻繁な(NetCommonsはイマイチですが)CMSなら,ほぼ自動的にアップデートできますが,DPZは@nifty時代に作った独自のCMSで動いていたらしく,長らくリニューアルができずにいたようです。

 今回のDPZのリニューアルで使ったのはconcrete5という,割と新顔のCMSで,私もその存在を知りませんでした。ちょろっと検索して見た限りでは,PHP+MySQL環境で動作する,プログラミングいらずでWYSIWYGカスタマイズできることがウリのようです。とはいえ,少し複雑なことをしようとすると有償のプラグインが必要になるところは,逆にビジネス的にも有用なのかなという安心感も与えてくれますね。

 本研究室の卒研はWebプログラミングですが,この手のCMSで有用なコンセプトを持った独自サイトを構築するというテーマでもO.K.です。できればプラグインを自作するところまで到達してほしいものですが,どこまで標準的な機能だけで構築できて,どこから先は独自プラグインが必要になるのかという見極めぐらいはつけて頂きたく,卒研テーマ設定の際はこの点を考えておいて下さい。

卒研メモ:Apache Cordova on iMac


左からAndroid, iOS, browserのCordova実行画面

 学内研究費でiMacを購入したので,早速Apache Cordova開発環境を整備しました。Android, iOS, browserの3つがそろい踏みしているのを見ると感無量(大げさ)。Android StudioのAVDとXcode(macosの開発環境)付属のiOSシミュレータを使って実行しています。

まっさらのiMac

 今のところ,3年生の実験で使用する環境はWindowsメインで続けますが,希望があればiOSの実行も体験してもらえばと考えています。次年度からは実習時間が短くなるので,そんな暇ないかもしれませんが。

 環境整備方法はほぼここにある通りでいいようですが,ビルド時には新しいXcodeの方式ではなく,旧式指定を”cordova emulate ios –buildFlag=”-UseModernBuildSystem=0″のように行う必要があるようです。次のCordovaのバージョンアップで対応するかな?

 あとはボチボチ実験資料の手直しをしながら,結果報告原稿をまとめることにします。

卒研メモ:code4lib Japan 2018参加

 無事採択されたようなので,短い発表ですがcode4lib Japan 2018に参加してきます。

 何度かここで取り上げたopenBDに検索機能を付加するAPIの実装の話になります。10分プレゼンだと,システムの解説,応用事例の紹介をしたらお終いになりそうなので,どこかでちゃんと文章としてまとめたものが必要ですね。来年度の紀要かな?

 8月中にシステムのブラッシュアップをしておかなければいけませんが,HTTPS化は済ませましたので,少し楽になりました。サーバやプログラムの管理は,盆栽同様,日々のチマチマした世話が重要ですね。

卒研メモ:Webプログラミングフレームワークまとめ

 Apache Cordovaの教材ですが,新たに「じゃんけんゲーム」を課題として追加し,説明をちまちまと改良して一段落しました。実際にコンピュータシステム実験で取り組んでもらうと,課題4で躓いて課題5まで完成するのが難しくなる,というのが本学の平均的なコンピュータシステム学科3年生のWebプログラミングスキルのようです。世間的にはどうなんでしょうか?

 さて,次の「Webプログラミング開発入門」はフレームワーク(Framework)に基づいた教材作成がテーマになるわけですが,あまり手を広げすぎると収拾がつかなくなるので,

  • サーバサイドはPHP7 + MariaDB(MySQL) or SQLite3
  • クライアントサイドはHTML5 + CSS + JavaScript

で使える範囲のものにとどめておく予定です。Java ServletとかRuby on Railsとか.NET Coreは他の方にお任せしておくことにしましょう。もちろん,自力でやってみるのなら,卒研テーマとしてはO.K.です。その代わり,途中で挫折しても手助けできないことはご承知おき下さい。多分,別テーマに乗り換えてもらうことになります。

サーバサイドのフレームワーク

 通り一遍のCRUDアプリを作るにしても,サーバーサイドのフレームワークは結構道具立てが大変なので,それぞれ1章分ぐらいになっちゃいそうですねぇ。

クライアントサイドのJavaScript-based SPAフレームワーク

 上記3つのクライアントサイドのフレームワークは,全てNode.js環境下でSPAを作るためのものなので,まとめて一章分ぐらいでいいような。Cordovaの章に1節ずつ追加する程度かなと。

 以下,Google Tread調べを載せておきます。すっかりWordPressの天下になっちゃいましたねぇ。インストールも操作感もお手軽ですからね。

Google Trend調べ

  • PHP vs. JavaScript vs. Java vs. Ruby
  • CakePHP vs. Laravel
  • WordPress vs. NetCommons vs. XOOPS(WordPress圧勝・・・)

卒研メモ:JavaScriptで多倍長計算

 前から興味があったので,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 APIWeb APIもある)になっています。一応,FirefoxとChromeでは使えるっぽい。128bitのSIMD命令の実装例もありました。

 以上のあらましは日本語記事()で大体掴めます。

 ただ,このレベルになると今後きちんと実用化されるのかどうか,そのうち放置プレイとなるのか,世間のニーズ次第ということになります。WebAssemblyに熱心なのはMozilla開発陣だけで,日本語記事を執筆された方もその一員なんですよね。

 しかしながら,どう頑張ってもネイティブ環境下以上の高速化はJavaScriptでは無理ですから,まずは使いやすくてそこそこ速いという程度で納めておくのが吉かなと。

 ボツボツ,現実逃避がてら遊んでみることにしましょう。

卒研メモ:SPA時代にふさわしいフレームワークとは?

 今朝がたのPC Watchの記事で,ゼロ幅文字を埋め込んでコピペ元を特定するという,原始的な電子透かしテクニックが紹介されてました。

 ネタ元は,こちらのMedium記事ですが,こちらの方,Reactでサンプルコードを書いているんですね。

 最近はWeb業界もすっかりFrameworkばやりで,作り込んだUIはAngularReactのような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の環境はばっちり構築できてますんで,導入は容易いかと。

卒研メモ:Tweetの感情分析

 情報処理学会でも発表する予定になっているK君の卒研テーマは,Tweetの内容を正負の感情値で分析するというものです。やっていることはこちらの方がPythonで実装されているものをPHP+MySQLでやっている感じですが,K君の実装は,特定個人の感情を時系列でグラフ表示できるWebアプリとして使えるもので,下記のように表示されます(トランプ大統領のグラフ)。

 上記の記事で紹介されているYahoo! Japanの分析ツールはもっとこれを大規模に行っており,「世間一般の雰囲気」(あくまでTwitterの中だけの話ですが)が分かるようになってます。下記の図は「安倍首相」で検索した結果です。

 これで雰囲気が分かるかなぁ・・・というところですが,何か事が起きた時に分析してみないと良く分からんですね。

 K君のツールはもう少しブラッシュアップして,本研究室内のアプリとしてお披露目したいところです。