JavaScriptベースのWebプログラミング教材

 ここんとこ,急速にWebプログラミングの主役が,伝統的なサーバサイドの言語よりもJavaScriptベースのnode.jsに移ってきた感があります。Java(Servlet), PHP, C#等々,未だこれら既存のサーバサイド言語で作られたアプリケーションは現役ですから,まだまだ使用されていくのは間違いありませんが,面白いこと・新しいことをやろうとすると,JavaScriptの情報が多数引掛かかるようになってきていることは間違いありません。
 私みたいな年寄だと,JavaScriptというとどうしてもクライアントサイド,要はブラウザで動く,インタラクティブな動作のサポートをするコードを書くものと考えてしまいます。しかし,HTMLがDOMの塊として捉える時代ににあり,ネイティブアプリと同様の,自在に動的なWebアプリが作れる時代で,React, Vue, Angularといったフロントエンドのフレームワークが花盛りであり,それらをベースとした,node.jsと強調できるバックエンドのフレームワークも実用になっている昨今,そういう思想は相当古いと言わざるを得ません。JITに基づく高速なV8がブラウザだけでなく,サーバサイドでも利用され,パフォーマンスも著しく改善されたことが普及した一番の理由でしょう。

 ということで,伝統的に使ってきたWebプログラミングの教材も,そろそろ全面的にJavaScriptベースのものが必要だなという認識に至りました。とはいえ,文法やオブジェクトの解説だけの無味乾燥なものを作っても仕方ないので,XAMPP + node.jsの環境をWindows上に作って

  • MySQL + node.jsによるCRUDアプリ
  • WebRTC

なんかはどうかなと。CRUDは定番なのでいいとして,問題はWebRTC。全部やると死にそうなので,手っ取り早く,Googleの教材をお手本に勉強がてらサンプルコードの一部で遊んで見る程度のところで留める予定です。簡単なZoomもどきのアプリも,ブラウザの機能を使うだけでできちゃう時代ってのを象徴する代物ですからねぇ。

 にしても,分かりやすい教材が増えたのはありがたい限りです。短い記事はともかく,重量級の

なんてのは常に参照しておりまする。

オンライン卒業式挨拶

[注釈] コロナウイルス騒動のあおりで中止となった卒業式・手交式の代わりにSkype for Business上で開催されたのが「情報学部オンライン卒業式」です。詳細は本学blog記事をご覧下さい。本件はNHKローカルニュースや静岡新聞で扱って頂きました。

2019年度 静岡理工科大学 情報学部 オンライン卒業式
情報学部長 幸谷 智紀
2020年3月14日(土)

 情報学部4年生の皆様,ご卒業おめでとうございます。本来のリアル卒業式では本学の体育館で2時間ほど,起立したり座ったりしながら耐え忍ぶ必要があるわけですが,本日はオンラインですので皆さん気楽な場所でお聞き頂いていることと思います。一生に一度のハレの行事がオンラインで行われるという異常事態ではありますが,せいぜい楽しんでいただければと思います。まず,このような場をご準備いただいた情報学部の諸先生方には情報学部長として感謝申し上げます。

 さて,本来はここから当方の50年に渡る人生経験に基づく蘊蓄を10分程度は語るべきところ,ギガの持ちが悪い人もいるでしょうから,下記のスライドに基づいて,本日このオンライン卒業式ができるようになったインターネットの歴史を振り返り,最後に一言だけ申し上げることに致します。

 本学の4年間(+αの人もいるでしょうが)の経験が,皆様の人生にどのように役立つかは分かりませんが,無為な時間も勉学の時間も等しく「楽しかった」と思える日が遠からず訪れます。年を取れば分かります。毎年皆様をお迎えする「ホームカミングデー」を大学祭期間中に設けていますので,是非,「楽しかった」日々を語るべく,訪れてみて下さい。

 ご卒業おめでとうございます。今後は大学院生として社会人として頑張って下さい。

以上

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

 今日の「応用線形代数」でコメントを求められたので,ちょっと触ってみました。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スクリプト(プログラム)の手助けが必要です。

<?php
	// holiday.php: J国民の祝日を日本政府サイトから取得する
	// Copyright (c) 2017 Tomonori Kouya

	// 初期設定&データベースオープン
	require "database.php";

	// URL
	$holiday_url = 'http://www8.cao.go.jp/chosei/shukujitsu/syukujitsu.csv';
	$holiday_url_charset = 'SJIS-win';

	// validate_date
	// https://stackoverflow.com/questions/19271381/correctly-determine-if-date-string-is-a-valid-date-in-that-format
	function validate_date($date)
	{
		$d = DateTime::createFromFormat('Y-m-d', $date);
		return $d && $d->format('Y-m-d') === $date;
	}

	// http://php.net/manual/ja/function.str-getcsv.php
	$array = array_map('str_getcsv', file($holiday_url));

	// 休日配列化
	$holiday_array = array();
	foreach($array as $index => $tmp_array)
	{
		if(validate_date($tmp_array[0]))
		{
			//echo $tmp_array[0] . ' -> ' . mb_convert_encoding($tmp_array[1], 'UTF-8', $holiday_url_charset) . "\n";
			$title = mb_convert_encoding($tmp_array[1], 'UTF-8', $holiday_url_charset);
			$holiday = new Event([
				//'id'     => $index,
				'title'  => $title,
				'allDay' => true,
				'start'  => $tmp_array[0],
				'end'    => $tmp_array[0],
			], $default_timezone);
			$holiday_array[] = $holiday->toArray();
		}
			//echo $holiday_array[0] . ' -> ' . mb_convert_encoding($holiday_array[1], 'UTF-8', $holiday_url_charset) . "\n";
	}

	// JSON形式で送り込み
	echo json_encode($holiday_array);

?>

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

こういう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程度ですね。ただ,月々の購読価格は紙版と変わらないので,配送印刷紙代諸経費を考えると,大変利益率の高そうな購読者層ということになります。紙版を併用して読んでいる人より多いというのも最近のメディア状況を犯得していると言えそうですね。

 

Chart by Visualizer

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