「連立一次方程式をガウスの消去法で解けるアプリ」コメント

 今日の「応用線形代数」でコメントを求められたので,ちょっと触ってみました。URLは公開していいのか分かりませんでしたので,ここでは紹介しません。スクショも同様。

 一言で言うと,1~5次元までの連立一次方程式をJavaScriptで解くWebアプリです。拡大係数行列を作って行の基本変形だけで最終結果までたどり着き,係数行列と拡大係数行列のランクをそれぞれ求め,一意解が得られない場合でも,無数の解が存在するのか,解が存在しないのかを示してくれます。「線形代数/演習」で解説した内容をしっかり把握されているようです。

 欲を言うとキリがないですが,表示についてはもう少し改善の余地があるかなと。MathJax使って行列やベクトルをきれいに表示できると教材としても使えそうですね。

 良くできていると思います。

 

CakePHPを学ぶ(1)

 本研究室ではもっぱらスクラッチからPHPとMySQLを使ってWebアプリを作成してきましたが,ボチボチMVC(Model-View-Control)思想に基づくPHPフレームワークにも取り組む必要が出てきた感じています。スクラッチビルドも悪くないですが,正直同じ教材を毎年使うのも飽きたので更新したいという事情も手伝っています。

 ということで昨年12月からCakePHPで遊んでみましたが,Tutorialは手っ取り早く勉強できてありがたいものの,作りたいWebアプリを自在に組み立てるのは思いのほか難儀で,Bakeが作った雛形から脱していない代物が多いのも頷けます。年寄なので,Visual Basicが流行った頃を思い出しますね。結局,作り込むためには地道なプログラミングをしないといかんと。

 ということで本日反省がてら作ったPowerPoint資料を上げておきます。

 ということで,

  1. ユーザ認証機能のカスタマイズ(任意のテーブル名でユーザ管理できるように)
  2. 全体的なデザインの変更とカスタマイズ
  3. Webサーバへのアップロード方法の模索(ユーザ単位のWebアプリとして外部公開したい)
  4. 第5章で制作する機能を全部盛り込んだサイトを構築

というところまで,今年度内に何とかしたいと考えています。ここに書いたメモを元に教材作成までできれば御の字ですね。

遠江総合高等学校:オープンデータとWebアプリケーション

「オープンデータとWebアプリケーション」
静岡理工科大学 情報学部 コンピュータシステム学科
幸谷 智紀(こうや とものり)

0.【宣伝】静岡理工科大学情報学部について
静岡理工科大学情報学部のWebページ

1.オープンデータとは?
「オープンデータ(Open Data)」とは,誰でも閲覧できる状態で広く公開されているデータのことです。今の時代はデータを扱う主体はコンピューターですので,オープンデータと言っても紙媒体ではなく,電子化されているもの,即ち,コンピューターが直接読み書きできるファイルの形式になっているものを指すことが殆どです。
電子化されたデータは,コンピューター同士が繋がっているインターネット(The Internet)の上でやり取りしやすい形式ですので,公開するにしても,インターネット上で誰しも読める状態になっている方が,読む方としても都合が良いわけです。インターネットでは様々なサービスが展開されていますが,現在ではWeb(World Wide Web)を通じたサービスが普通になっていますので,オープンデータもWeb上で,つまり,データを持っている会社,行政組織,個人,各種団体のWebページ(ホームページ)上に置き,誰でもブラウザを通じて読むことができるようにしています。こうしたオープンデータを活用したWeb上のサービス,いわゆるWebアプリケーションが様々な形で展開されています。

以下,オープンデータとは,Web上で誰でもブラウザから閲覧できるようになっている電子ファイル状態のデータである,と定義します。最近では,行政機関が積極的にデータを公開するようになっています。静岡県も積極的にオープンデータの活用を後押ししていますし,静岡県内の市,静岡市,浜松市では下記のところでオープンデータにアクセスできるようになっています。

オープンデータは,単なる公開情報という存在を超えるものです。コンピューターで利用しやすいファイルの形式になっているということは,そのままソフトウェアで加工できることになります。これをうまく活用することで,より便利なWebアプリケーションを作ることができます。

2.オープンデータをどのように活用するか?
ここでは,簡単なオープンデータの活用方法を具体例で示します。

皆さんは,「国民の祝日」,例えば正月,成人の日,建国記念日,春分の日,がどこでどのように決まっているか,ご存知ですか? 検索すればすぐに分かりますが,これは政府が法律に基づいて決めているもので,内閣府に解説ページがあります。ただ,これは情報を人間に見やすく表示しているだけで,余り使い勝手の良いものではありません。そこで,近年の国民の祝日を表計算ソフトで扱いやすい形式で公開しています。これが国民の祝日のオープンデータです。この形式であれば,表計算ソフトだけでなく,様々なソフトウェアに利用することができるようになります。例えば,下記の図は,FullcalendarというJavaScriptで構築されたスケジュール帳に,国民の祝日を上のURLからファイルを読み取り,自動的に挿入したものです(サンプル)。

但し,これはあまり使い勝手の良いものではありません。元々の国民の祝日ファイルは,単なるテキストファイルなので,データそのものを使いやすい形で形成し,流し込む処理が必要になります。例えば,上記のFullcalendarに取り込むためには,次のようなPHPスクリプト(プログラム)の手助けが必要です。

このように,直接データを取得して自動的に加工できるようになると,人間を介しての作業が不要になります。

こういうWeb技術を利用するプログラミングの詳細については,例えば本研究室の教材などを参照して下さい。

オープンデータの利用のためには,もう少し,利用者の立場に立って,使い勝手の良い形式で必要な分量のデータを受け取れるようにする必要があります。最悪な形式は,いわゆる「ネ申Excel(三重大学・奥村晴彦)」と呼ばれる,書類をそのまま表計算ソフトウェアで成形しただけのシロモノで,人間が手作業でチェックするには便利かもしれませんが,コンピューターにとっては最も加工の難しいものです。オープンデータは人間よりも,コンピューターにとって使い勝手の良いシンプルな形式であることが望まれます。

しかし,もっと使い勝手の良いオープンデータは,情報を加工したい側が欲しいデータだけをいつでも取得できるようになっているものです。そのためには,上記のFullcalendarに祝日データを渡すプログラムのように,オープンデータと利用者の間で仲介し,利用者の要求に応じた返答を返すような仕組みを作らなくてはなりません。これを実現しているのが,Web API (Application Programming Interface)と呼ばれるものです。

3.Web APIの実例
最も良く知られたweb APIは,GoogleやYahoo! Japan,Bingといった検索エンジンです。

どの検索エンジンも,URLの中に検索すべき単語を埋め込んであります。例えばGoogleの場合は

https://www.google.co.jp/#q=遠江総合高等学校

となっています。このように,ブラウザからアクセスする際に,利用者が欲しいデータの範囲(この場合は「遠江総合高等学校」を含むWebページの一覧)を指定することで,必要のないデータまで取り込むことがなくなります。

現在では様々なデータを,Web APIを通じて取り込むことができるようになっています。Google map(地図情報)やぐるなび(グルメ情報)なども,細かくデータを指定して取り込むことができるようになっています。

その他,下記のようなWeb APIもあります。

4.openBDを基盤とする書誌データの活用
オープンデータとWeb API活用の事例として,現在本研究室で取り組んでいるopenBDについて紹介します。
2017年初めに広く公開された本のオープンデータ化を進めるプロジェクトで,2017年6月現在では約90万件の本のデータが取得できます。今のところ,本のISBN番号一覧と,ISBN番号に紐づけされた書誌データ(表紙画像も含む)を取得できるWeb APIが提供されており,基本的にはユーザーがダウンロードして使用する全データを提供することを主目的としています。
本研究室でも,簡単なWebのインターフェースを提供しています。

openBD API

本一冊一冊ごとに異なるISBN番号が振られており,それが分かればその本のデータだけを入手することが可能です。しかし,普通本を買うときにISBN番号で指定することはありません。普通は,本のタイトル,著者名,出版社名,定価等で探すものです。

それを可能にするため,本研究室では全件検索ができるような仕組みを作り,公開しています。使い勝手はまだ改良の余地がありますが,これも改良されたopenBDのWeb API化の一つと言える仕事になっています。

5.おわりに
インターネットが当たり前になった今では,様々なデータを自由に取得でき,もっと便利に使うためのWeb APIの利用が盛んになっています。今後は,これらのオープンデータやWeb APIを通じてより高度なデータ解析を自動的に,例えばAIを使って行うことが普通になっていきます。
人間の側はもっと賢く,これらのオープンデータやWeb API,そしてその分析結果を使って高度な知を使いこなしていくことになります。プログラミングを行うだけでなく,それをより良い方向に生かす技術を,今後の大学生活で身につけて下さい。

PHP 5.6 security update終了

 WordPress用のセキュリティプラグインを提供しているWordfenceから,PHP 5.6セキュリティアップデート終了のアナウンスがありました。

 記事によれば,PHPの最新バージョンは7.2で,7.0のアップデートもあと一月で終了とのこと。一つのバージョン(Version x.x相当)につき3年のスパンでサポートしており,最初の2年が過ぎるとセキュリティアップデートのみ1年行ってサポート完全終了,という流れだそうです。

 で,慌てて自分の管理サーバも見ましたが,このblogのあるサーバはPHP 5.4という更に古い奴を使っており,もう一つの方も7.0系統でした。どちらもLinux distributionサイトからのアップデートが出ていないので,すぐにセキュリティの危機になるわけじゃありませんが,OSごとアップグレードしてやろうかという気分になってきましたが,そうなると,次のような手順でやりたいものです。

  1. バックアップ用のサーバを一台用意し,そちらを更新時の新しいOS環境にセッティングする
  2. 古いファイルを丸ごとバックアップ用サーバに移し,コンテンツがきちんと動くことを確認(特にWeb, MySQLサーバ)する。その後,現サーバマシンのDNS情報をバックアップ用サーバに書き換えておく
  3. 現サーバマシンに新しいOS環境を構築し,バックアップ用サーバからコンテンツを書き戻す
  4. きちんと動作することを確認したら,DNS情報を現サーバマシンに書き換え。

 現マシンのOS環境を毎書き換えるには時間がかかります(数時間程度)し,スッピンのOS環境を無法The Internet空間にさらし者にするのは避けるべきです。また,新しいOS環境構築の練習としてバックアップ用サーバを構築するのは役立ちます。使い終わったバックアップ用サーバの転用も考えていますので,初期投資として無駄になることはないでしょう。ちなみに,サーバ構築手順の解説は「ネコでもわかる!さくらのVPS講座」がお勧めです。

 ということで,来年3月ぐらいにはバックアップ用サーバを契約し,新年度に入る前にさっさと移行しようと計画しています。ま,見かけは変わらないでしょうが,本サーバの説明書きは大幅に変わりそうです。

Update or perish

 先週の「数値解析2」で,実習環境で使っているLinuxサーバのSamba(ネットワーク共有フォルダを提供するサーバソフト)に接続できない(「\\サーバIPアドレスが見つかりません」というエラーが出る)という現象が一部の受講生に出ました。不思議なのは,私やもう一人の受講生は普通に接続できること。接続できるグループとできないグループに分かれたことで,その時間内にはトラブルが解決できませんでした。TCP/IP接続には問題がないことは,Ping応答やTeraTerm接続ができることで確認済みです。

 後であれこれ検索してみたところ,実習用Linuxサーバの設定が古く(6年前に設定したまま放置状態),Windows 10 1709で無効化されたSMB 1.0プロトコルしか使えない状態になっていることが判明しました。Microsoftに言わせれば


SMBv1 のみをサポートする製品でこの問題を回避するには、製品の製造元に連絡し、SMBv2.02 以降のバージョンをサポートするソフトウェアまたはファームウェアの更新プログラムを依頼してください。

https://support.microsoft.com/ja-jp/help/4034314/smbv1-is-not-installed-by-default-in-windows

だそうで,ぐうの音も出ない正論です。

 ということで,Sambaの設定(/etc/samba/smb.conf)に”max protocol = SMB2″を追記して,SMB2接続ができるように変更しました。これで受講生全員が接続できるようになって一安心です。実際,PowerShellの管理者モードでGet-SmbConnectionコマンドを使うとSMB 2.0.2で接続されていることが確認できます。

PowerShellでSMBバージョンを確認

 古くからSambaやNASを使っていたり,Windows 8以下から10にアップデートしたマシンはSMB 1.0が最初から有効になっているので,問題なく接続できたのはそれが理由でしょう。あるいはWindows Updateをサボっているか,です。

 ICT技術はすさまじい勢いで進化しており,セキュリティ確保のための基盤ソフトウェアやネットワークの更新も頻繁に行われます。更新に伴う不都合が起きた時には,古い環境をそのまま維持するのではなく,Microsoftが主張するように,新しい環境に適応していく方向でトラブル対処を行うようにしましょう。”Update or perish”(アップデートせよ,できなきゃ滅びよ)はICTの世界で生きていく技術者が肝に銘じておくべき格言です。

PCケースファンの交換

 本研究室のデスクトップマシンは大概古ぼけたPCケースに収まっています。既に3世代以上更新を重ねているものも少なくありません。見かけは古いですが,中身はマザーボードごと新品に入れ替えつつ,大事に使っています。

 私がメインに使っているマシンも,最初はIntel Core 2 Quadプロセッサの入ったシステムでしたが,今はCore i7になっています。10年以上使っていることになりますね。さすがにケースファンは軸のグリスが固まってしまっているせいか,全く動かなくなっていました。そのままでも使えますが,夏場の動作が心配ですので,付け替えることにしました。緑色に発行する120mmタイプ。

 LEDに電力使われるのも癪なので,発光しないものを探したのですが見つかりませんでしたので,仕方なくこれにしました。まぁ,起動していることが後ろから見ても分かるというのはメリットなんでしょうが,派手に見せて何かいいことがあるのかなと,年寄としては不満であります。

 光物といえば,マザーボードもGPUボードも,光らないものを見つけるのが面倒なほど,LED付きのものが当たり前になってますね。このマシンも既にそうなっています。

 透明アクリル板付きのケースにして,PCショップの店頭に並べておくのにはふさわしいのかもしれませんが,純然たる仕事用マシンとしては無駄以外の何物でもありません。光らない地味なマシンを追究していきたいところですが,現状難しいとなると,本研究室の卒研用マシンも全部光物になる日も近そうです。

日経新聞電子版の普及

 2018年1月18日現在,日経新聞電子版の会員総数は3,843,506だそうです。そのうち有料版の購読者数は558,900,紙版を購読していない純粋な電子有料版購読者数は345,743とのこと。私もこの仲間です。新聞紙不要派。

 ざっとグラフにしてみると,電子版購読者数のうち,大半は無料で見れられる範囲のみで満足しているようで,有料購読者のうち電子版だけ読んでいるのは1/10程度ですね。ただ,月々の購読価格は紙版と変わらないので,配送印刷紙代諸経費を考えると,大変利益率の高そうな購読者層ということになります。紙版を併用して読んでいる人より多いというのも最近のメディア状況を犯得していると言えそうですね。

 

 グラフにしてみると一目瞭然ですが,きちんとした情報を得るためにはそれなりの対価を払わないとダメという時代になったと言えそうです。

[模擬講義] コンピュータの計算は正しくない!

オープンキャンパス模擬講義

「コンピュータの計算は正しくない!」

静岡理工科大学 情報学部
コンピュータシステム学科
幸谷 智紀(こうや とものり)


1.「数」とは?

 現在のICT社会で使用される「データ(data)」は例外なく全て「数」を表現したものです。小学校では自然数,分数(有理数),小数を,中学校では負の数と整数を,高校では無理数を習いますが,それらの数を総称して「実数(real number)」と呼びます。実数を幾何学的に表現する時には直線=数直線を使用します。全ての数は,この数直線上のどこかに「点(point)」として存在しています。

 自然数,整数,有理数は全て分数として表現できる数です。下記の図に示す通り,分数は無数に存在します。

 ちょっと脱線しますが,下記のような問題はご存知でしょうか?

 解答については検索して調べて頂ければ何らかの手かがりが得られるでしょうが,実際の分数の計算はこのようにしてはいけませんね。どのように計算できるのか,ちょっと試してみましょう。

分数の計算フォーム

 実数にはもう一つ,分数としては表現できない「無理数(irrational number)」があります。有名なものとしては円周率\pi = 3.1415...や平方根\sqrt{2} = 1.4142...があります。これも実数の一種なので,数直線上の点として実在しています。

 有理数(分数)を小数で表現すると,次のように必ず同じ数のパターンが繰り返し出てきます。

\[\begin{split}
\frac{1}{2} &= 0.50000\cdots = 0.5\dot{0} \\
\frac{1}{3} &= 0.33333\cdots = 0.\dot{3}
\end{split}\]

 無理数では同じパターンの数の羅列が永久に続くことはありません。ちょっと計算してみましょう。

Try! MPFR

 従って,実数を一言で表現すると「循環したりしなかったりする)無限桁の小数として表わすことのできる数」ということになります。何故無限桁が必要になるのかは,微分積分(数学II, III)に登場する「極限」というものと深い関係がありますが,それは大学に入ってからじっくり考えてみて下さい。

 現在の科学技術では実数を土台とする計算が不可欠です。そしてほとんどの計算はコンピューターの中で行います。では,次にコンピューターの中身について見ていくことにしましょう。

2.コンピュータの仕組みと「データ」

 今のコンピューターの筐体とぱかっと開けると,マザーボードと呼ばれるデジタル回路基板の上に様々な集積回路が載っていることが分かります。下記は本研究室で故障したマシンのマザーボードの写真です。

 マザーボードの上に乗っている集積回路のうち,重要なものがCPU(Central Processing Unit)とメモリ(RAM)です。コンピューターで行われる処理は,全てのデータが「数」として表現されてメモリに格納され,処理内容に応じてメモリ内のデータが読み出されて処理され,またメモリに書き戻されます。

 このCPUとメモリとのやり取りに要する時間,CPU内の処理(計算)に要する時間が短ければ短いほど,コンピューターの性能が高いと言えます。とても高速な処理が可能になっていますが,困ったことに,メモリの大きさは有限で,処理時間も短いとはいえゼロにはなりません。「無限の長さを持つ実数」をそのままコンピューターのメモリに格納することは不可能ですし,仮にできたとしても,無限の長さの処理時間を要することになります。「無限大(∞)」とは果てのないことを意味し,それ故に完ぺきな数学,特に微分積分のような解析学という体系が成り立つわけですが,これではコンピューターには実数の計算が出来ないことになってしまいます。

3.「誤差」を含まざるを得ない科学技術計算

 仕方がないので,コンピューターの中では無限桁の小数を適当な長さに切って,有限桁の小数(=有理数の一種)として扱うことにします。この適当長さに切る操作のことを「丸め(Round-off)」と呼び,丸めに伴って起きる元の正しい値(真値)とのズレを「誤差(error)」と呼びます。

 この丸めに伴う誤差を,関数グラフアプリを使ってみていくことにしましょう。

MPFRgraph

コンピューターは計算が高速なので,いくらでも長い桁の計算ができそうですが,長くなればなるほど計算時間はかかるようになりますし,科学技術開発競争を世界中で行っている昨今,あまり誤差ばかり気にして長い桁の計算ばかりすることは難しいのが現状です。従って,最近のAIの中核技術であるDeep Learningではなるべく短い桁の小数で計算しようとしています。

 しかし,いくら計算が速くても,途中で誤差が拡大されて,不正確な値しか出てこないようでは困ります。一般には,丸める桁数を長くすれば誤差も小さくできるわけですが,とてもたちの悪い問題があることは良く知られていて,いくら桁を長く取っても足りなくなるということもあります。

5.誤差評価付き計算の例

 性質の良くない問題の例として,「複雑系(Chaos system)」というものがあります。一番シンプルなものとして,ロジスティック写像で定義される次のような数列x_0, x_1, ..., x_i, x_{i+1}, ...の生成問題を取り上げましょう。

 出発値x_0 = 0.7501として,次の式の右辺を計算して次のx_1を導出します。

\[ x_{i+1} := 4x_i (1 – x_i) \]

これで実数列\{x_i\}^{100}_{i=1}を,下記のCプログラム

を用いてIEEE754単精度(約7桁)及び倍精度(約15桁)で計算した結果は次のようになります。

同じ値になる名図ですが,x_{20}あたりでもう単精度の値は最初の一桁目しか合っていません。x_{30}以降はもう全く違う数です。

 このような場合はもっと桁数を増やして計算する必要があります。50桁計算すると下記のようになります。

100桁計算すると,

となり,大分同じ数に近づいてきたことが分かります。

 このように,丸めによる誤差の影響が大きく出る「悪条件問題」というものが,科学技術計算にはたまに出てきます。計算途中で誤差がどの程度は行っているのかを自動的に調べる「区間演算(interval arithmetic)」という技術もありますが,このような悪条件問題の場合は大した役には立たず,結局桁数を多くしないとまともな値を得ることはできません。下記の例は,MPFIと呼ばれる多倍長計算を区間演算に利用できるソフトウェアを使ったロジスティック写像の掲載例です。一応,プログラムもつけておきましょう。

6.まとめ

 以上,まとめますと

  1. 実数は無限桁の小数として表現される数である。
  2. コンピューターのメモリは有限なので,無限桁の実数を格納することはできず,丸めて短い有限桁に収めなければならない。
  3. 丸めに伴う誤差が甚大な影響を及ぼす「悪条件問題」というものが存在する。
  4. 悪条件問題を解決するには桁を増やして対処するしかない。しかしこれは計算時間を要する解決策である。

となります。「高性能計算研究室」ではこのように長い桁の計算,多倍長計算を用いて様々な悪条件問題の解決に取り組んでいます。

大学見学会「高性能計算研究室」

高性能計算とWebアプリケーション

静岡理工科大学 コンピュータシステム学科 幸谷こうや 智紀とものり

1.概要

 データの入出力をWeb経由で行うためのソフトウェアの開発,すなわち「Webプログラミング」の事例をいくつか紹介します。関数の計算式を入力することでグラフや数表を自動的に出力するアプリケーションや特別プログラムの製作物を体験して頂く予定です。

2.「高性能計算」研究室とは?

 現在の科学技術計算に欠かすことのできないのが,コンピュータ上で現象を再現するコンピュータシミュレーション技術です。このコンピュータシミュレーションの信頼性を高め,かつ,効率的に実行するためには,計算のための理論的枠組み,計算を効率よく行うためのアルゴリズム,そして堅牢かつ高性能なコンピュータが欠かせません。このようなコンピュータシミュレーションを下支えする学問分野を「高性能計算(High  Performance Computing, HPC)」と呼びます。詳細はこちらの記事をご覧ください。

 本学の「高性能計算研究室」はその中でも特に,ソフトウェアを使ってシミュレーションの信頼性を効率的に上げるための研究を行っています。具体的には「多倍長数値計算(Multiple Precision Numerical Computation)」の研究が中心となります。現在のコンピュータが直接処理できるのは10進数で約16桁程度の有限桁小数ですが,どんな数も

$$ \frac{1}{3} \Longrightarrow 0.333333333333333 $$

と有限桁表現する必要があり,これを「丸め(rounding)」と呼びますが,この丸めによって生じる誤差が拡大することによって正しく計算されない「悪条件問題」というものがあり,シミュレーションの信頼性を損ねる一因となっています。それを防ぐ方法の一つとして,ソフトウェア的に桁数を増やして計算の精度を上げる,即ち,誤差を減らす手法が提案されており,それを「多倍長計算」と呼んでいます。

 多倍長計算の例として,単純なWebアプリケーションですが実行してみましょう。

Try MPFR!

 例えば,円周率\(\pi = 3.1415\cdots \)を10進約1000桁=2進約3321bitsで計算するには

try_mpfr_pi_3321

と入力すると

try_mpfr_pi_3321_result

という結果が得られます。答えが出力されているテキストボックス左下のところをドラッグすると拡大することができます。

 本研究室では,この多倍長計算を効率的に行うために,たくさんのパソコンをネットワークで繋いだPCクラスタを作ってきました。その際培われたネットワークのノウハウを生かし,Webアプリケーションを開発するようになり,現在は

  • 多倍長数値計算とその応用 = 高性能計算(HPC)
  • Webアプリケーションとの連携
  • 数学ソフトウェアの教育利用 → 中間的

にも勤しんでいます。ここで紹介する「MPFRgraph」はHPCとしての多倍長数値計算を広報する目的で構築されたものです。

3.Webアプリの仕組み

 ここで,Webアプリケーション(Web application),略して「Webアプリ」の構造を見ていくことにしましょう。先ほど紹介した「Try MPFR!」も一種のWebアプリです。これはもともと多倍長数値計算の土台を提供しているMPFRというライブラリ(沢山の機能を詰め込んだソフトウェアの素)を使って作った「mpfr_gexpr」という「ネイティブアプリ(native application)」をWeb経由で扱えるようにしたものです。

native_application_mpfr_gexpr

 ネイティブアプリは,パソコン(ハードウェア)を扱うための基本ソフトウェア(オペレーティングシステム, OS)の機能を利用して構築されたスタンドアローンタイプ(コンピュータ上で完結)のソフトウェアです。ハードウェア,OS,ネイティブアプリの関係性は,下記のようなレイヤー(層)で表現されます。

native_application

 これに対し,Webアプリは「Web (うぇぶ)」というインターネット上のサービスを土台としたアプリケーションで,「ブラウザ」と「サーバ」という,それぞれネットワーク上の独立したマシン上で協調して動作するものになっています。これらをレイヤー図で示すと下記のようになります。

web_application

 今のコンピュータは複数のプログラムを同時並行的に使用することができるので,ブラウザもサーバも同一マシンで動かすことは可能ですが,基本的にはインターネット上の独立したマシンでそれぞれ動くように作られています。ブラウザは今この記事をご覧になっている皆さんが直接目にしているソフトウェアです。代表的なブラウザとしては

があります。ちなみに,タブレットやスマートフォンではAndroid(Google)がChrome,iOSがSafariの利用が多いようです。Webサーバとしては

の利用が多いようです(参照: NetCraft Web server servey)。

 Webアプリの開発は,このようなブラウザとサーバの連携を前提にしてソフトウェア構築をする必要があります。そのためには次のようなコンピュータ言語(ソフトウェアを記述するための開発言語)が使用されます。

  1. HTML (HyperText Markup Language) ・・・ 静的Webページの構造を決める言語です。タグというもので括って文書構造を決定していきます。 → サンプル(注意:ビデオと音声が流れます)
  2. CSS (Cascading Style Sheet) ・・・ 静的Webページのデザイン(視覚効果)を決める言語です。
  3. JavaScript ・・・主としてブラウザ上で動作することの多いインタプリタ言語(一行単位で逐次解釈・実行される)です。
  4. PHP・・・主としてサーバ上で動作することの多いインタプリタ言語です。サーバ上のデータベースとの連携のためにも頻繁に利用されます。

 上記のうち,HTML, CSS, JavaScriptは一つの「HTMLファイル」(もしくは同等のもの)にまとめてサーバ側に保管され,24時間いつでもインターネット上のクライアントマシンのブラウザからアクセスできるようになっています。サーバ側はHTMLファイルの内容を送り出しているだけです。それがブラウザに届いて初めてレンダリング(画面構築)が行われ,皆さんが現在目にしているような画面として表示されているわけです(下記参照)。

web_application_process

 従って,ブラウザからユーザが入力したデータを受け取るには,サーバ側にもその仕組みが必要になります。ブラウザにデータ入力のためのインターフェースを作るためにはHTMLでフォーム(form)を記述することで可能になります。例としてアンケートフォームを示します。

アンケートフォーム(HTMLのみ)

 しかし,フォームを作っただけではサーバにデータは届きません。そのための受け皿として,PHPで記述されたプログラム,PHPスクリプトを作り,フォームと連携させる必要があります。上記のアンケートフォームにPHPスクリプトを連携させたものを下記に示します。

  1. アンケートフォーム(PHP連携:GETメソッド)
  2. アンケートフォーム(PHP連携:POSTメソッド)

 先に述べた,「Try MPFR!」もこれと同じ仕組みを使ってユーザからの情報「桁数(bits数)」と「数式(formula)」をサーバ側に伝えています。サーバ側ではそれをネイティブアプリである式パーサ「mpfr_gexpr」に与えて実行し,その結果をブラウザに送り込んでいます。

 この仕組みを拡張して関数の数表とグラフを同時に記述できるようにしたものが「MPFRgraph」です。

4.グラフ作成機能付き関数表作成アプリ「MPFRgraph」

 多倍長計算のためにはMPFRのような特殊なライブラリが必要ですので,Webアプリとしてネイティブアプリ多倍長精度式パーサmpfr_gexprを使って外部とのやりとりと連携させていました。しかしこの式パーサは数式に則って値の計算を行うことしかできません。多倍長計算のデモンストレーションとしては,様々な関数が使えることと,実際に関数 \(y = f(x) \) の右辺式を与えて,独立変数\(x\)を区間 \([\alpha, \beta]\)内で動かし,どのような値を取り,どのようなグラフになるのかを示すことが望ましいことになります。

 従って,区間\( [\alpha, \beta]\)と分割数\(n\),そして\(f(x)\)が\(x\)を含む数式として与えられていれば,分割された小区間幅を\( h = (\beta – \alpha) / n \)として与え,分点\(x_0, x_1, …, x_n\)を

\[ x_0 = \alpha,\ x_1 = x_0 + h,\ …,\ x_{n-1} = x_0 + (n-1) h,\ x_n = \beta \]

として与えることで,関数の値\(f(x_i)\) \( (i = 0, 1, …, n)\)とセットで

\[ (x_0, f(x_0)),  (x_1, f(x_1)), …, (x_n, f(x_n)) \]

をmpfr_gexprの機能を使うことだけで計算することができるようになります。こうして下記のように,グラフと数表を同時に出力できるようになりました。

 グラフについては,サーバ側でグラフィックスファイルととして表示させる方法と,ブラウザ側でHTML5のCanvas機能を使って表示させる方法があります。それぞれ作成してありますのでためしに様々な関数(多項式,三角関数,対数,指数等)を使って関数のグラフと数表を表示させてみてください。

 使い方はどれも同じです。例えば

\[ y = \sin x^2 + \exp(\cos x),\ x \in [0, 10],\ \mbox{分割数: }\ n = 10 \]

の場合は下記のように入力します。

input_example

 関数式を入力する際は四則演算,関数は下記のように表記します。これらを組み合わせ,変数名は必ず「x」として正しい数式を入力して下さい。

  • 加算:\( x + 3 \) → x + 3
  • 減算:\( x – 3 \) → x – 3
  • 乗算:\( 3x \) → 3 * x
  • 除算:\( \frac{x}{3} \) → x / 3
  • 平方根:\( \sqrt{x} \) → sqrt(x)
  • 三角関数: \( \sin x,\ \cos x,\ \tan x \) → sin(x), cos(x), tan(x)
  • 指数関数: \( e^x = \exp(x) \) → exp(x)
  • 自然対数: \( \log(x) \) → log(x)

 これらのアプリケーションの一連の処理の流れを示したものが下記の図になります。

 詳細は煩雑になりますので省略しますが

  1. 関数のグラフ描画するための関数値の計算は,CanvasバージョンではJavaScriptが担っている
  2. 多倍長精度の計算はサーバ側でしか実行できないので,関数表は全てサーバ側のmpfr_gexprが計算したものを使用している

という役割分担がなされています。

5.最後に

 高性能計算研究室ではほかにもいくつかのWebアプリや,Webプログラミング開発のための教材も公開しています。

幸谷研究室@静岡理工科大学

 また,「Webデザイン特別プログラム」では,過去の受講生の作品を公開しています。

Webデザイン特別プログラム

 24時間いつでも閲覧できますので,興味がありましたら色々見ていって下さい。特に優秀な作品は

Webデザイン特別プログラム優秀作品集

にまとめてあります。

参考URL