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

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

１．概要

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

２．「高性能計算」研究室とは？

　現在の科学技術計算に欠かすことのできないのが，コンピュータ上で現象を再現するコンピュータシミュレーション技術です。このコンピュータシミュレーションの信頼性を高め，かつ，効率的に実行するためには，計算のための理論的枠組み，計算を効率よく行うためのアルゴリズム，そして堅牢かつ高性能なコンピュータが欠かせません。このようなコンピュータシミュレーションを下支えする学問分野を「高性能計算（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で計算するには

と入力すると

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

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

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

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

３．Webアプリの仕組み

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

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

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

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

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

Apache
IIS (Microsoft)
NGiNX

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

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

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

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

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

アンケートフォーム（HTMLのみ）

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

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

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

４．グラフ作成機能付き関数表作成アプリ「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機能を使って表示させる方法があります。それぞれ作成してありますのでためしに様々な関数（多項式，三角関数，対数，指数等）を使って関数のグラフと数表を表示させてみてください。

数式入力＋PHPグラフ出力　（PHPlot使用）
数式入力＋Canvasグラフ出力　（jqPlot使用）

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

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

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

　関数式を入力する際は四則演算，関数は下記のように表記します。これらを組み合わせ，変数名は必ず「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)

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

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

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

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

５．最後に

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

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

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

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

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

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

にまとめてあります。

参考URL

日	月	火	水	木	金	土
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

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

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

関連

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

共有:

関連