求人情報：東京ガスiネット株式会社

　東京ガスの，情報処理を主とする関連会社で，本社は浜松町の貿易センタービルにあります。マイナビ，もしくは，会社Webページからエントリーできるようですので，興味のある方はぜひともチャレンジしてみて下さい。

IMG_20170331_0001

2017年3月22日

更新情報：QRコード

　Twitterで指摘されるまで気が付きませんでしたので，早速このサイト用のQRコード画像ファイルを作りました。これからちょくちょく使うことにします。

2017年3月22日2023年5月26日

高性能計算と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

2017年3月21日

求人票新着：フォーラムエイト

　CG, VR, シミュレーションを行っている東京の技術系企業です。営業職の募集もあるそうです。

IMG_20170321_0001

2017年3月17日

求人票新着：ヤマハモーターエレクトロニクス

　皆さんよくご存じのヤマハ関連企業です。応募には大学推薦が必要になりますので，興味のある人はキャリア支援課に相談してみて下さい。

IMG_20170317_0002

2017年3月8日

卒研メモ: TensorFlowをインストール

　インストールするだけならWindows用のバイナリパッケージが一番お手軽ですが，リモートアクセス可能なマルチユーザー環境で使いたいので，Ubuntu環境に突っ込んでみました。

　大まかな使い方としては

TeraTermからSSH接続する
“source /tfactivate”で開始(Virtualenv環境)
“python3 スクリプト名”で実行
“deactivate”で終了

となります。Sambaでフォルダ共有も可能ですので，Pythonスクリプトの編集はWindowsからでも可能です。

　ということで，GTX 1080が入ったマシンで実行してみました。

いちいちCPUやGPUのWarningがうるさいので，次のように”TF_CPP_MIN_LOG_LEVEL=2”を環境変数に登録しておくとwarningの出力が抑えられるようです。

　ということで，一応GPU対応のTensorFlowが入ったという報告でした。

2017年3月6日2017年3月6日

求人票新着：テクノプロ

　東京の企業ですが，全国に拠点があるので中部地方でも仕事ができるようです。自由応募と推薦があるので，推薦を希望する人はキャリア支援課に相談して下さい。

テクノプロ求人票(PDF)

2017年3月3日2017年3月3日

卒研メモ：文章の推敲

　就活が本格化し，今後はESをたくさん書く機会が出てくることでしょう。その際に気を付けて頂きたいのは，皆さん方の文章力です。ハッキリ言って，皆さんの書く文章の大半はダメです。日本語になっていない文章を書く人もかなり見受けられます。「どうダメなのか？」と疑問に思う人も多いでしょうが，多分，就職してから数年してふと自分の卒論を開いてみれば，おのずと分かることでしょうが，それでは遅いので，一例として，皆さんの先輩が書いた文章と，私が推敲した文章をここに提示しておきます。

　これはPHPについて解説した短い文章です。オリジナルは下記の通りです。

　これを読んだ私は頭を抱えました。で，書き直したものが下記のものになります。

　名文ではありませんし，まだ直し足りない気もしていますが，ずいぶん「マシ」になったことは認めて頂けますでしょうか？　どこがどう変わったかは皆さん方で読み取って下さい。

　文章を上手に書くコツはそんなにたくさんありません。大体次の3項目で尽くせます。

センテンス（「。」で区切る一文）はなるべく短く書く。「短い」とは，主語を見失わずに述語と繋ぎ合わせることができる程度のこと。
硬い文章をたくさん読む。小説ならラノベで良し。新聞なら無料記事で良いので毎日欠かさず空き時間にYahooニュースや日経新聞ぐらいは目を通すこと。定型的な文章をたくさん読むとコツが掴みやすい。読み慣れたら記事の「構造」にも目を向けるとステップアップできる。
自分で書いた文章を人に読んでもらって意図が伝わっているか確認すること。厳しい意見ばかり聞くと萎えるので，友達やSNSで反応を見る程度でもよい。伝わってないなと思ったら文章を直す（推敲する）習慣もつけよう。

　まともな会社はその人の「地力」を見ようとします。それは，その人の書いた文章を読むことであらかた分かります。最初に例示したような文章を読んだ面接官の感想はどうだったのか，ちょっと聞いてみたい気がしています。
　ということで，皆様方は，硬い文章をどしどし読み，長い文章は要約文を書いてみたり，それを誰かに読んでもらって感想を聞いたりして下さい。私は毎年，卒論を書く時期にこれを強制的に卒研生にやってもらっていますが，その時期ではちょっと遅いなといつも感じてしまいます。ESをたくさん書くこれからの時期，自分の書いた文章が客観的にみてどうなのか？，ということをいつも気にかけて下さい。