Webアプリ構築特別補講・書き起こし

はい，それじゃあですね，国際情報演習の補講ですね．補講．というかですね，皆さんがWebアプリケーションを作れるようになろうというビデオの作成を今からします．資料はすでにもう公開してありますが，ちょっとその資料を見ながらやっていこうと思います．Webアプリ構築特別補講(1)から補講(4)まで用意してあります．ちょっと長くなるかもしれませんがじっくり勉強しましょう．

さて，そもそもの疑問点ですね．ブログラムの書き方を覚えただけではアプリやシステムを作れるようにはならない，という疑問ですね．それはなぜかということですが，どんなプログラムの書き方，まあ，ここで，プログラムの書き方というのは1年生のときにプログラミング基礎で，プログラミングとは何かというのを習いますよね．それだけではシステムを作れるようにならない．あるいは，アプリケーションを作ることができないと．

で，それはプログラムを書く，書けるようになるだけではなくてですね，色々と身につけなければならない知識というものが，やはり，あるいうわけです．で，そういったことを全部覚えないといけません．そういうことをすべて覚えるとですね，まぁそれなりのプログラム，ないし，アプリケーションやシステムを作れるようになると．

で，どうしたら作れるようになるかというのは，その総合的に色々勉強していただきたいということですが，今回はですね，そのなかでも，インターフェースというものに着目して，それを段階的に習得する道筋というものを考えてみたい，ということですね．なぜインターフェースなのか，それは私の専門がユーザーインタフェースだからです．

えっと，まあ，もう一度，整理しますね．プログラミング基礎でプログラミングを学んでも，アプリケーションやシステムを作れるようにはならない．それはなぜですか？ということです．いつも私が皆さんに提示している情報システムのモデルというところから考えてみたいと．

で，いつものですね，情報システムのモデルの，この簡単な図ですね．これを皆さんに示すときは，入力があって何かデータが入力されて，コンピューターの情報システムにデータが入力されますよ，と．その入力された情報を受け取ってコンピュータの中身は処理をします．さらにその処理をした結果が主力されて，大体一回で入力→処理→出力が終わるわけではなくて，それを見て人的機構，まあ人間側ですね，人間がフィードバックプロセスを経て，次の情報を入力して，まーこのサイクルを回していって，一連のセッションが行われるんだという説明を，もう私の講義やら何やら聴いてる人はですね，毎度おなじみのいつも話かというふうに思っていただければいいと思うんですが．

ここではちょっとカッコつけて，インプット，プロセス，アウトプット，フィードバックというふうに絵を描いてあります．これには意味があってですね，プログラミング基礎でやるところは，ちょっとこの，英語で書いているのは，まあ一連のですね，この今日お話しする中身は，海外で発表しようかなと思っているので，まあ英語で書いてあります．けれどもBasic Programming Course focuses on the knowledge only in this courseというふうに書いてありますね．つまり，プログラム基礎でやっているところっていうのは，この中身の部分ですね．どうやってデータを処理するのかと，ここの部分をこの部分に，こう，焦点を当ててやってるわけだと．

じゃあどうやってデータをインプットするのか？あるいはどうやってアウトプットしていくのか？フィードバックループをどうやって回すのかと．人間系まで詰めたところというのは，一切，ちょっとだけありますけどね．printf()とかね，あるいはscanf()に問題があるよ，とか．まあ，そんな話をちょっとするぐらいで，中心レイヤーのところが，この中身にフォーカスしてやっているからです．

ところが全体として，アプリを作らないといけない，あるいは，情報システムを作らなきゃいけないっていうのは，このインプットからアウトプット，さらにはフィードバック，このようなループをどうやって回していくのかというようなところまで考えないといけないので，プログラミング基礎を習っただけでは，アプリや情報システムを作ることができない，ということになるわけです．

で，まあ今の話がこのデータ入出力や各インターフェイスっていうところで，赤字で書いてありますが，プログラムの書き方の基本的なところは，プログラミング基礎で学びます．さらに他 に，じゃあシステム開発に必要な知識って何だろう？っていうのを考えてみると，もう，いっぱいあるわけですね．

他に身につけなければならないことは，適切かつ効率的なロジックの構築の仕方，あるいは，これはプログラム基礎でもちょっと触れますが，私のクラスでは触れてますけれども，計算誤差をいかに伝播させていかないかというような計算精度の話とか，文字コードの話とか，そういうコード体系をだいたいなんでいくかという話も，知っておく必要があります．

さらにはこのウェブアプリの講座の中ではちょっと触れますけれども，データの永続化，データベースを利用してため込んだデータをどうやって記録していくんだというような，その辺の知識も必要になってきます．

さらにはですね，実際のアプリケーションを作るときは，エラー処理や例外処理，あるいは情報セキュリティの対応ですね．ここ，すごく重要です．なぜならば，人間って，人間系っていうのは，もうエラーの塊なんですね．人間ってのは，まぁ一般ユーザーってのは何をするかようわからない．いかにそこをですねモデル化するか，ということがすごく重要になってくるわけですが，まぁ，今回はですね，このエラー処理や例外処理の話はスコープの外で，あまり触れませんけれども，ここも非常に重要です．

さらにはですね，一連のプロセスをどうやって回していくかです．どうやってやっていくか，開発の仕方ですね．そういった辺りはソフトウェア工学を，あるいは，その他，プロジェクトをどうマネジメントしていくのか，ああこれはプロジェクトマネジメントですね．

さらに，iTLですので，ここでは書いていませんが，リーガルイシューですね．つまり作ったアプリケーションが法的に問題ないのか？社会にサービスを提供しているときに法律とコンフリクトはないかどうか，整合性をどうやって取っていくのかという話．あるいは，最近ですとソフトウェア・エシックスというのかなあ，倫理的な問題ですね．パーソナルデータをどうやって取り扱うのかとか，そういった話も，ちゃんと考えないといけないよと．

まぁそこを考えるのがですね，大変．まあ，もうiTLを卒業ですね，という話になっちゃうので ，まあ，いろいろ考えないといけないということを，まずはここでは意識をしてください，ということです．

さて，で，さっきも申し上げたように，いま私の専門がユーザインターフェース的なことであるということもあるので，今回の，この，まずWebアプリを作りましょう，のためのですね，第1回ということで，インターフェイスの構築に関する基礎知識の習得ということを，考えていきます．

で，インターフェースというのは，先ほどの情報システムのモデルの中でですね，情報システムの中心部分，この黄色？オレンジ色の部分は機械的機構，コンピュータ，あるいは情報システムそのもの，ですけれども，そこに対して情報を入力する，あるいは，そこから情報が出力されるというところで，周りはこれ人間が関与しているわけです．人間というかユーザーですかね．

まあユーザーだけとは限らないかもしれない，いろんなケースがありますが，他のシステムと組み合わせて使うなんてときは，外側が他のシステムだったりすることもあります．いずれにしても，その中心，いま考えているこの黄色の部分ですね．黄色の部分のモジュールと，それ以外のユーザーないしは他のシステムとの接点部分は，これ，インターフェースというふうにいいます．

さて，このインターフェースをですね，どうやって開発していくのか？ということですが，ここではですね，レベル0からレベル4まで，段階的に考えていきましょう，ということを想定してみました．

レベル0はfunction．レベル1が，コマンドラインインターフェース（CLI）．レベル2はチャットボット，レベル3が，グラフィカルユーザーインターフェース（GUI）ですね．そしてレベル4，いきなりレベル4がWebアプリケーションになりますが，まぁレベル0からレベル4になるに従って，難しくなっていくというイメージですね．

じゃあ最初のレベル0，ファンクション，これなんだ？これも簡単ですねえ．関数ですね．関数で，数学では，y = f(x)なんていう書き方をしますけれども，これ，プログラミングもですね関数型プログラミングなんていうのはこの書き方でプログラムを書いていきます．手続き型でもですね，

Pythonで表現するとfunction定義っていうのは，function definitionは，defというキーワードで始まって，名前があって，inputたる引数があって，関数の中身でですね．まぁ，ここでは，スクエア，2乗ですね．引数で与えるインプットを二乗して，変数に入れて，で，そこの処理がプロセスに相当すると．そしてリターンはアウトプット．

これ非常にシンプルですね．インプットとプロセスとアウトプットが，それぞれ関数の引数，それからその中身，そして返り値というふうに対応する，これもう，これ以上簡単にならないというか．ここはですね，そのプログラミング基礎で皆さんが習うと関数の使い方とか，定義ですか．まあ，皆さんが習ったプログラム言語はCでありますが，ほぼ同じですね．Cでも関数定義があって．関数や変数に型があるかないかぐらいの違いなので．そんなに難しく考えることはないでしょう．

でこれが一番プリミティブなインプット→プロセス→アウトプットのモデルというふうに考えてください．

さて，今度はですね，レベル1ですね．CLI，コマンドラインインターフェースを考えます．

そうするとですね，コマンドラインインターフェースで，このレベルはプログラミング基礎でもですね．scanf()とかprintf()というようなものを使って，コマンドから何か，コマンドラインで情報を入力してそして，まあ標準入力と標準出力ですね，標準入力からデータを受け取って標準出力に書き出すということをやったはずです．

で，この例でいうとですね，まず先ほど定義したsquare()という2乗の関数がありますね．そしてそのスクエアを利用してさらにcli()という関数を定義しています．cli()関数はインプット「x =」とプロンプトを出して．

まず，インプットという関数，組み込み関数ですね．input()というPythonの組み込み関数を用いて，コマンドから情報を入力していると．そうすると入力されたものはまあこれ文字列で，オブジェクトなので，intに変換をしていてxには整数値として入ります．そして，その整数値を使ってですね，この場合y = square(x)というところが，まあ，プロセス処理そのものになるわけですね．で，アウトプットとしては，yの値ということで．

たとえば，こうした事例が出ていますが，5を入れると25．5かける5で25．9x9は81，16だったら256というふうに．これ2乗した値が出てきますね，というようなものになっています．ここでですね，黄色は定義，緑色は利用という状況を示しているということで，インプット，プロセス，アウトプットのそれぞれプログラムで，cliの中で定義がなされているというのはまあ見たとおりですね．さらに，コマンドラインで例えば16っていうインプットを入れるとには256ってことが出てくるというような利用状況を，この緑で示しています．

面白いのはこの定義する中でですね，実はy = square(x)というところで，上の定義を利用しているんですね．つまりこのcli関数の中で，さらにですね，関数を利用しているので，これ関数の入れ構造みたいになっていて，でxをインプットとして与えて，yにアウトプットが出てくる，これは上のsquare(x)の定義を利用しています．

そんな，チャイム鳴ってしまいました．えっと，ちょっとお構いなしにやっていきますね．

で，これはですねえ，コマンドラインで入力して，リード・エバル・プリントで，それをひたすら繰り返していくということでレップ・ループって通常いわれます．

リード，これはインプットに対応するもの，そしてエバリュエーション，エバるといいます，それプロセスね．そしてアウトプットとしてはプリントで，それを回していくので，まあまあ元のところにもどっていくよ，ということで，フィードバックの部分をループとして表現する所で，レップ・ループというふうに言うこともあります．まあ覚えておきましょう．

さて，次はレベル2ですね．レベル2は，これ，LINE botというものを考えます．with google  app scriptですね．で，これはもう細かな話はしていきませんが，LINEのデベロッパー登録をすると，このようなプログラムを作れる．まあLINEのプラットフォームを利用することができます．

たとえばですね，ここでですね，まぁJun botとか変なLINEボットがいますが，まぁ私の似顔絵のアイコンのLINEボットが入って，右側の緑の部分が，これ入力の部分ですね．「Hello Jun Bot」とかっていうと，Jun botはですね「You mentioned "hello Jun Bot," ok thank you」というふうに，まあ鸚鵡返しにレスポンスを返すわけです．そうするとですね，ま例えば「Hy, Jun Bot. Could you tell me what you are talking about？」というとJun bot ですね「You mentioned "Hy, Jun Bot. Could you tell me what you are talking about？," ok thank you」 というように，まあ，まったく鸚鵡返しに返してくるだけです．

オーケーサンキュー，ですねえ．でまぁこれ，たんにですね，メッセージをそのまま返すだけ っていう非常にシンプルな実装になっているので，こんな単純なものですけれども，まあこんなプログラムを作ってですね，そしてLINE Messaging apiを使って，アプリを登録すると，まぁこんなことが実現されます．これが今のチャットボットの簡単なプログラムです．

ここではですね，まあ説明は部分的にしかしませんが，doPost()っていう関数の中で，json.events[0].message.textっていう，この書き方でインプットされた中身をmessageに取り入れることが実はできるんですね．そして，ここに入ってきた入力に対して「You mentioned ... blah-blah-blah」みたいな感じで，そのままアウトプットを返していると．でそれをですね最後に ContentService.createTextOutput(...)っていうような，こんな書き方をして，ここでsetMimeType(...)っていうふうにやると，処理したものをLINEのプラットフォームに返してあげることができると．

まあ，それだけなんですね．つまり我々が，じゃあ何をやらなければいけないのか？というと，このプロセスの中ですね．ここは，もう単純に鸚鵡返ししてるだけなので，You mentioned ... っていう文字列にメッセージそのものをくっつけて，で改行を2つくっつけて ok thank youというのをくっつけて，返しているだけなので，これ鸚鵡返しになってるんだけど，まぁここでね，メッセージの中身に従って，AI使うとかね，いろんなやり方で重要な情報を，アウトプットしてあげる．

例えば，メッセージ，例えばxで，x掛けるx，スクエアを計算するとして「you entered five and I return twenty-five as square of five」とかね．まあまあどうでもいいんですけど，そういうようなプログラムを作ってあげると．

で，ここで重要なのはインプットとアウトプットが抽象化されているので，これもう，プロセスに注力するだけでいいということで，インプットとアウトプットのところを我々はプログラマーはあんまり考慮する必要がないということです．えとですね，まぁ，今の話ですね，in-msgが，json.event[0]なんとかっていうところが入ってきてfunc()でリターンメッセージをつくって，それを'message': ['text' : out_msg]というところに放り込んで返してあげればいいということで．

こうやって抽象化するとですねぇ，ここで実際，処理っていうのはこのfunc(in-msg)この部分ですね．この部分を考えればいいだけなんですね．ということで，実はこれレベルが2となっていますが，今まで見てきたレベル1あるいはレベル0とそれほど大差ないわけですね，

で，問題はですね 使うようにするまでの設定の部分ですね，つまりこのラインデベロッパー登録をしてメッセージapiを使って云々という話とか，googleアップスクリプトでどうやってやりますかーみたいな所ですね，ここの条件が，準備するのはちょっと大変だと．で，それさえできてしまえばですね，あとは定型なので，もうここをごちゃごちゃっと書いていくだけでいい．で，そうするとここで図にして見せているような，インプット，アウトプットのインターフェースはこれLINEが提供してくれるので，コマンドラインで与えるとか，あるいはプログラミングの関数自体に引数で渡して返り値が戻ってくるっていうのとインターフェイスとしては大差ないわけですね．

なので，これ少し難しいように見えるけれども，レベル2になる，ということです．

さあどんどん行きましょう．レベル3ですね．レベル3は，これは去年，2021年の3年生のゼミのときに少し，1回使っていろいろやったというような記憶がありますけれども，これGUIのアプリケーションです．

で，プラットフォームはHTMLとJavaScriptとCSSを使って，シングルページアプリケーションとして作ったもののはずで，これどんなアプリだったかっていうと，ムービーをドラッグ&ドロップで並べ替えることができて，で順番に並べ替えてプレイボタンを押すと，その順番の通りこのムービーが流れますよ，みたいな，そんな単純なアプリだったと思います．

これはですね，ある，ちょっとしたリクエストがあって作ったものですけれども，この辺の GUI，ユーザーのインプット，ここでユーザーのインプットは何かっていうと，ちょっと考えてみてください．

このときにユーザーのインプットって何になりますか？なにになるでしょうかわかりますか？ここでドラッグ&ドロップで，それぞれムービー1からムービー4まで順番を入れ替える，これ一つのインプットになりますね，それから，プレイボタンを押す，これもインプットになりますね．じゃあ，アウトプットは何でしょうか？アウトプットはドラッグ＆ドロップに従って順番が変わるよってのは，これ一つのアウトプットだけれども，プレイボタン押したらその通りに順番でビデオが流れると，これも，アウトプットになるわけですね．

で，そういうようなものを実現するために，どんな知識が必要かというと，これモダンなGUIプログラム必に要な知識としては，基本的なところはWINPというアイディアですね，考え方．ウィンドウ・アイコン・メニュー・ポインタ，そういったものでグラフィカルインターフェースは作られているということ．

それからウィジェットという考え方ですね．ディスプレイ・コンポーネンツ，ウィジェットっていうのは，例えば，この一つ一つのサムネイルが，このオーダーっていうカラムに含まれていて，さらにそれが一つのウィンドウの中に入っている．リザルトというカラム，ちょっと大きいですけれども，その大きなカラムの中に，このムービーのペインが入っていて，さらにプレイボタンが入っている，こういうですね，実はそれぞれ一つ一つが部品になっているということ．

それからそういった部品っていうのは必ずですね，階層構造を持っていて，入れ子になっているんだというような概念ですね．そういったものをこれディスプレイ・コンポーネンツあるいはウィジェットというふうに言いますが，そういったものの考え方．

それからですねページトランジション，この例ではページというものがないので，一つのページの中に収まっている，つまりシングルページアプリケーション，というものですけれども．通常はですね，まあ例えば何かどうかな，ボタンを押すとスクリーン全体が変わるとか，そういうようなページ遷移，ページトランジションというものが発生します．

さらに重要なのは，イベントドリブンプログラミングという概念で，イベント駆動型プログラミング．ユーザーが操作するとですね，さまざまなイベントが発生します．さまざまなイベントって何かというと，ドラッグ&ドロップして配置を入れ替えましたっていうようなイベントとか，えっとこの例ではないけれども，スクロールバーなんかがついていてスクロールバーをぐりぐりやると上に行ったり下に行ったりしますとかね．あるいはこのプレイボタンを押した，プレイボタンを押すとここでプレイボタンが押されたというイベントが発生すると．

で，イベンドドリブンプログラミングっていうのは，そういったですね，イベントが行われたら，イベントが生じたらですね，それぞれのイベントに対してどういう反応をするのかっていうことをプログラミングしていくんだと．ドラッグ＆ドロップでこのサムネイルを入れ替えたら，その時はonDragReleaseEndっていうようなイベントが発生，まあドラッグがこう行われてマウスボタンが離されたときですね，その瞬間にドラグ&ドロップの後の処理をどういう風にするのかということを記述するとか．

あるいはこれclickListenerFunction = function() {...}となってますけども，なんとかイベントが発生したら，どのファンクションを実施するよっていうようなルールで結びつけるような，addEventListenerというメソッドを使ったりとクリックリスナーにこういうfunctionを設定したりというようなことをやりますけれども，そうすると，この例えばこのプレイボタンからクリックイベントが発生したらこのファンクションなんとかね，とか，このファンクションを実行してくださいとか，まあそういうような書き方をするわけです．今日はですね，このGUIのこのアプリについては説明はしませんが，これは解説した記事を書いているのでぜひそっちも参考にしてください．

えっとですね，そしてGUIプログラミングっていうのは，レベル3なので若干ややこしいと．で，なぜややこしいかというと，これ，見てわかるとおりですね，グラフィックインターフェイスの中で，どこからどこまでがインプットで，どこからどこまでがアウトプットっていうのが，これ判然としないわけですね．つまり画面上で情報を入力して，画面上で情報が出てくるということで，インプットとアウトプットがこれ判然一体になっている．このへんが若干わかりにくい．

それからGUIはやっぱりあのCLIほど簡単じゃなくて，まあこの環境を整備するところがやや面倒で，ウィジェットを用意するとか，そういった準備の行動っていうものが必要になってきます．さらにプログラミング方法がGUIの環境によってだいぶ違います．この例はHTMLと JavaScript，CSS，つまりWebアプリのフロント側のパーツですね，それで全部実現できていますが，これがiOSのネイティブアプリを作りますとかね，まあ，あのMacでもWindowsでもいいんですけど，そういうネイティブアプリを作りますとなると，それ専用のプログラミング環境でwidgetライブラリーなんかを使ってやるとかね，そういうようなところも設定がやや面倒くさかったりします．

一方でですね，えっとオブジェクト指向の考え方と非常に相性がいいんですね．つまりこの辺の部品一つ一つがオブジェクトなので，さらにですね階層構造を持っているってことで，これhas-a構造をそのまま埋め込むことができるんですね．

さらにですね，それぞれの部品は大きな基本的な部品のサブクラスであるというような考え方にも非常に親和性が高くてですね，has-aも目で見えるわ，is-a構造も目で見えるわっていうことで，オブジェクト指向の考え方を，このGUIのプログラミングで習うというのは，非常に自然です．なのでオブジェクト指向よくわからないなあという人はGUIプログラミングにチャレンジしてみると「ああなるほどそういうことかぁ」っていうふうにね，わかるかと思います．

あとはまあ，この繰り返しなりますけど，イベントドリブンの概念ですね．これがあの通常のですね，というかプログラミング基礎でやったような，いわゆる構造化プログラミングですね，連結・分岐・反復・呼出し，コンカティネーション・セレクション・イテレーション・インヴォケーション，ね．その4つの組み合わせでプログラムが記述されるというような，構造化プログラミングに慣れているとですね，いきなりこうイベントがポッと発生したとき，そこにすぐ対応するメソッドが呼ばれるというような，イベントドリブンの考え方はちょっと発想の転換がやっぱり必要ですね．

構造化プログラミングは基本的には上から順番にやってきますから，まあ連結の考え方で上から順番に実行されるというのは基本的になってきますので．ただ，インヴォケーションのね，呼出しとイベント駆動の関数呼び出しはほぼ同じなので，まあちゃんととわかればね，そんなに大した違いはないわけですけれども．そこの発想の転換が必要になるというところが，少し難しいかなというふうに思います．

この後のWebアプリも，基本的にはリクエスト・レスポンス型の，クライアントからのリクエストに応じて何がしかのサービスを行って，レスポンスとして返すというようなパターンを基本としますので，Webアプリも基本的にはイベントドリブンだというふうに考えて構わないと思います．

はい，そして最後のですね，レベル4がこれ，Webアプリケーションです．

一般的なアプリケーションっていうのは，みなさん手元のスマートフォンだったりパソコンなりですね，そういった手元のデバイスで動きます．そこにあるCPUでデータ処理がなされると．ところがですねWebアプリのこれ，基本的にはネットワークが繋がってないといけません．ネットワークでつながっていて，中心的な処理は，向こうのね，ネットワークの向こう側のサーバー上で動作すると．

で，さらにWebアプリというのは，ユーザーインターフェイスとして手前のWebブラウザを使っているので，まぁだいたいですね，最近はどのデバイスでもブラウザは標準で入っていますから，インストールする必要はありません．アプリケーションをインストールしている必要はないと．さらにアプリケーションも，サーバー側で勝手にアップデートしちゃうので，サーバー， サービス提供がですね，非常に具合がいい．

皆さんもね，TwitterとかFacebookとか，ああいうSNS，毎日のように使ってるかもしれません．Facebookは，まあおっさんのメディアだから，あんまり皆さん使ってないかなあ．まあInstagramとかね，あのそういったものを使っていると思いますけれども，ある日アクセスしたら，なんかインターフェイスがちょっと変わったとか，たとえば，なんだっけTwitterのボタンの色がね，白から黒に変わってたとか，なんかいろんなことがあって，そのためにおおーっとかなんかどよめきが起こってたみたいですけど，そういったように勝手にサーバー側で変えちゃえるので，サービス提供側にとっては非常に都合がいいわけですね．

さらにまあ，クライアント環境もですね，モバイルデバイス，スマートフォンからタブレットから，パソコンからなんだかんだ，まあいろんなものに対応可能というような工夫も最近ではなされていますよ，ということですね．

はい，今の違いの話です．一般のアプリケーションは手元で動作します．処理の主体とユーザーインターフェイスの提供が同じデバイスで行われます．それに対してWebアプリケーションは，サーバー側で動作するのでユーザーインターフェースは手元のデバイスが提供します．そして インプットがネットワーク越しに飛んでいって，処理の主体でプロセスが行われて，アウトプットしてレスポンスが返ってくる，そういう動作をするという違いがありますね．

はい，で，まぁ基本的にはですね，こういう処理のシステムのことを，CSシステム，クライアント・サーバーシステムというふうに言います．クライアントサーバシステムね．で，クライアントっていうのはユーザーが処理をするユーザインタフェースに対応していて，そしてサーバー側で実際のデータ処理や計算を行います．

で，さっきの話ですね．えっと順番とては，1番，リクエストが送信される，と．で2番が実際のデータ処理や計算が行われて，3番としてレスポンスとして返答が返って来て，それをクライアント側で描画してアウトプットとして人間に提示するということですね．

まぁ，クライアントの部分ね，Webブラウザの部分も，これのインプットアウトプットも渾然一体としてるってのはGUIと同じ問題を抱えていますけれども，まぁその辺はちょっと目を瞑ってもらうとすると，わりときれいに，リクエストがインプットに対応，そして実際の処理がプロセスに対応，そしてレスポンスが返ってくるというところ，アウトプットに対応しているということで，情報システムのモデルとの整合性もそれなりに取れているということがわかると思います．

問題はですね，これ次にあったかなあー，えっとですね，Webアプリ，シンプルなWebアプリの話があって，ちょっと待ってくださいね，処理は，資料がないな，じゃあ口頭で補足します．問題はですね，基本的には「行って来い」で1回で終わってしまうという問題を抱えているというのは頭に入れておいて下さい．つまり，リクエスト・レスポンス型の通信，リクエストがあって，実際のデータ処理や計算が行われてレスポンスが返ってくる，以上終わり！ですね．

つまり，情報システムもモデルで言うところのこと，ダーっと戻るとですね，ダーッと戻ってここですね，リクエストが送られて，プロセスが行われて，レスポンスとしてアウトプットは返ってくると，で，ここでおしまいです．この後のフィードバックで，次にインプットに戻していくところ，ここが，実はですねえ，単純なクライアントサーバモデルには欠如していると．フィードバックループで回す，4番がないわけですね．

で，そうするとWebアプリとしては，でも，困っちゃうわけですね．つまり情報システムのモデルってのは，そのフィードバックループを回して次のリクエストを送る，そして次の処理を行って，どんどんこの処理の精度を上げていって最終的にソリューションに至るというですね，そこが重要になってくるので，このフィードバックをどうやって回していくのか，次のセッションにどうやってつなげていくのか，っていうところは，実はWebアプリの課題の一つではあります．

色々それに対していろんな解決策が提示されているので，そこはまぁおいおい見ていくとして，まあそういうですね，根本的な課題を抱えているということは頭の中に入れておいてください．

さて，これはですね，Flaskを使った非常に一番シンプルなWebアプリですね．実際のFlaskを使ってやっていくというような話は，2番，3番，4番でWebアプリを作っていきましょうねというところに話が続いていきますので，まあこれは，そのアプリケーションの内容のね，どういうプログラムがどういう意味を持ってるのかっていうようなあたりはまたおいおい見ていくとして．

インプットとしてこのhello?name=Junっていうのが，これ，inputになります．でそして，それを処理して，ハローなんとかっていうメッセージを作りますよ，それがプロセスですね．でリターンして戻していくと，これがアウトプットの定義になっていて，実際の利用はこのURLのところアドレスバーに「hello?name=ホゲホゲ」っていうようなものを入力して，サーバに送る，まあこれ，ローカルで動いていますのでネットワークがなくてもローカルで処理がされますけど．127.0.0.1っていう，ローカルホスト，自分自身です，ローカル側のサーバーで処理をされて，でHello, Junていうアウトプット，メッセージが出てきて，それが表示されるっていうのは非常にシンプルですね．

ここがですね，まぁWebアプリの課題を先にお話をしておくと，インプットをどうやって渡していくのかというのがまあやや複雑です．今みたいなアドレスバーに，そのまま書いてしまうっていうのはいかにも乱暴で，実際のアプリだとそんなふうな処理を一般ユーザーに求めるのは ちょっと酷ですね．なのでここはですね，HTTPのプロトコルをきちんと理解して，GETとは何ぞやとかPOSTとは何ぞやみたいなところ，若干，まあ精通する必要ないと思いますけれども，そういうようなプロトコルでクライアントとサーバーがお話をしているのかというあたりは知っている必要があります．

でここの渡し方もですね，パスパラメーターとか，クエリパラメーターとか，リクエストパラメータとか，いくつか種類があるので，そういったものを学んでいく必要があるでしょう．

それからですね，ルーティングという概念，これ基本的にWebアプリでは基本的な概念で，ここも学んでおく必要があるでしょう．さらにはですねWebアプリは，これネットで公開して入力を受け付けますので，これ確実にですね，セキュリティ，情報セキュリティのイロハを知っている必要があります．さもないとですね，ネットを介して悪意ある第三者にアクセスされてシステムを壊されてしまう可能性があります．なのでここも基本的なところを学んでおく必要があります．

困ったことにですねアウトプットのアプローチもやや複雑です．それはなぜかというとアウトプットとしてHTMLの画面を返してあげないといけないんだけれども，そこの画面生成にはCSS のデザインがどうだとかですね，テンプレートを用意してどうやって使っていくのかとか，そういうような知識が必要になってきます．

で，そうするとですね，やっぱりその，レベル3のGUIのプログラミングも1回体験しておくというのは非常に重要で，それを応用することができますので，若干，まあ順番に本当はやっていくといいと思いますけど，今回はねWebアプリを作ってみましょうということで，レベル3をすっ飛ばしてやっていますが，まあそんな感じで学んでいくといいと思います．

あと，ああ，これさっきの話ですね．HTTPの根本的な課題とその対応が複雑である，つまり， HTTPの根本的な課題っていうのは，まあHTTPの根本的な課題というよりは，クライアントサーバモデルの根本的な課題ですけども，こういう形の通信モデルであるということで，そのために，セッション管理などの仕組みが後付で作られていると．じゃあどういうふうに作られているのかというと，まあcookieを使うとか，AJAXを使うとか，まぁ，いろいろなやり方があります．

で，そういうのはですね，個々の技術を一つ一つ覚えてくのでもいいんですけども，実際にはですね，そういうのがドーンとねえっと一通りセットされているようなフレームワークと呼ばれるものを使っていきます．まあ，さっきのFlaskなんかもね，実はシンプルな，マイクロフレームワークっていうのかな，軽量フレームワークというかな，簡単にそのWebアプリを作れるフレームワークとして提供されていますが，そういったものを使っていくんだ，ということを覚えておいてください．

はい後はですね，ちょっと追加の話ですね．アプリケーションの構成のモデルとしてMVCモデルってのがあって，これは多くのWebアプリフレームワークで使われているので，これもですね，きちんと理解しておくとよいでしょう．

MVCモデルっていうのは，アプリケーションをモデル・ビュー・コントローラという3つのパーツに分けて考えるときれいにできますよっていう考え方ですね．もうこれだいぶ古いです．半世紀前ですね．1970年代にゼロックスのPARCね，ゼロックスのパロアルト研究所，パロアルト・リサーチセンターで，Dynabookって，ダイナブックてね，東芝のパソコンでも Dynabookってありましたけど，それより前にアラン・ケイっていう，パーソナルコンピュータの父とか何かいわれることもありますが，彼がですね開発したSmalltalkと呼ばれるシステムでまず実装されて提唱されたモデルですね．まあそういったものもちょっと理解しているとよいでしょう．

MVCモデルそのものについては，ここでは時間もないのでちょっとばします，はい，えーまぁ飛ばしますと言いつつちょっとだけね．MVCモデルを使うと何が嬉しいのかという話で，データモデル設計と，ビュー設計と，コントローラー設定っての分けましょう，と．

どうやって分けるかっていうことですが，データのモデルは，これシステムの根幹をなすのでデータのモデルの設計，具体的にはデータベースのテーブルをどういうふうにするかですね．そういったところっていうのは，そんなにですね，こう未来永劫あんまり変わらないんですね．まぁちょっとずつレコードを足していきましょうとか，カラムを足していきましょうとか，これはもう要らないのでカラムを削りましょうとかね．まぁそのぐらいの変更があるぐらいで，きっちりこう定義して，きっちり定義してしまえば，割とこう，長持ちを持ちするんですね．なのでえっとデータモデル設計を，まずしっかりしましょうと．

で，じゃあそれをどうやって見せていくのか，そこがビューの設計ですね．ユーザインターフェースの画面とかはこれ得意な人に任せちゃえばいいでしょ．デザインが得意な人に，じゃあそこを任せます．

コントローラーの設計っていうのは，まあこれはですね，そんなに変更を加える必要はないんですね．多くのアプリで，クライアントからのリクエストを受け付けて，ロジックのところに回して，でロジックの処理の結果を受け取って，HTTPとしてレスポンスとして返す，この手順ですね．ここはもうどんなWebアプリでも一緒なので，その手順自体はそんなに変更する必要がないと．ただ，細かなところでちょっとずつ変えていかないといけない．どのデータにアクセスしないとだめだなみたいなところは少し変えないといけないんでそこだけいじればいいですよというのが，まあ，コントローラー設計の部分ですね．

はい，ということで，最後に，まずカッコ1を，これで終わりにしますが，最後に気をつけないといけないところはですね，ええ，ここですね．Practical Programming must take error handling into account!ということで，ここの部分ですね．エラーが起きたときにどうするの？エラーログ見ましょう．

実はアウトプット，standard out の他に standard error，標準エラー出力ですね，そこに，いろんな情報を出してですね，エラーが起こったとき，不測の事態が起こったときに，どういうふうに対応するんだ？これフィードバックもちゃんと回して，もう1回，正しいデータを入れさせるとかね，まあ，そういうところをしっかり考えないといけません．ただし今回はそれはちょっと考えてないので，ここは一つの課題として残されているということは気ををつけましょう．

はい，えー，ということで，まず1回目を終えますが，インターフェイスに着目して，システムにおけるその重要性を段階的に理解する道筋というものを，ちょっと考えてみました．で，レベル0ね，関数定義の部分のシンプルなテイからスタートして，実際にはWebアプリとして具体的かつ現実的なアプリケーションってのはどうあるべきかというところまできました．

で，今回ですね，非常にざっくりと，もうこれ何分，話をしているかな？今，えっとですね，何分になるのかな？ちょっとわかんないけど，もう30分以上，話をしてますかねえ，だいぶ長くなりましたけれど．まず今回ね，具体的なプログラミングの実装については，まぁ最初のね，スクエアとか何か考えましたけれども，後のほうはもう全部，具体的なコードみたいな話はしなかったので，それぞれの段階，レベル1，レベル2，レベル3，レベル4の段階で，より皆さんの興味を引くような，面白いものの事例を提示できると，これ教育的な効果があるのかなというふうに考えています．

はい，その辺はみなさん，また一緒に考えていきましょう．はい，それではですねえ，特別講習第1回目を終わります．