ネットワーク検索CLOSE大手外資系ITコンサルティングファームに所属するこじろうのブログです。IT、コンサル、サッカーに関する情報を発信していきます。Webアプリ作成~詳細解説こんにちは、こじろうです。Webアプリのサンプルプログラムを提供しました。サンプルプログラムの内容を解説したいと思います。このWebサイトでは、商品を選んで購入することができます。内容説明に入っていきます。最低限の機能だけ搭載している。プログラミングスクールへ通う前に何を作りたいか「思考」してほしいこのWebサイトでは、商品を選んで購入することができます。アプリケーションの要件(何ができるのか、作った目的は?)を改めて言葉にすると“利用者(ユーザ)が欲しい商品を選んで、販売者が購入依頼をすることができる”です。この、システムやアプリケーションができることを言葉にすることを要件定義と言います。参考:【文系SE】プロジェクトマネジメント~何を管理するのか~いわゆるオンラインショッピングは「商品を選ぶ」ー「選択する」ー「カートに入れる」ー「購入予定の商品を確認する」ー「お届け先を設定する」ー「支払い方法を選ぶ」ー「入力内容を全て確認する」という機能を備えています。Amazonや楽天といったとかがいい例ですし、あのような業界の先頭を走っている企業のサイトはもっと充実しています。内容説明に入っていきます。最低限の機能だけ搭載している。このサンプルWebアプリができることをツラツラと書いていきます。WebアプリケーションサンプルプログラムにはAmazonや楽天に比べて足りていない部分が多々、見受けられます。今回はあくまでサンプルなので、プログラムというものがどういうものなのかみなさんに理解いただけれ良く、なくてもアプリケーションが動く機能は敢えて要件・設計から外しました。※是非、元ネタの記事も一緒に見ながら読んで頂くことをおススメします。Webアプリ作成方法伝授!ユーザ(お客さん)は商品に一覧を見ることができるサンプルプログラムを動かして最初に登場したこの画面、覚えていらっしゃるでしょうか?商品のリストが表示されていますよね。1の機能はここで実現されているのですが、ファイル名でいうと「itemlist(.html)」になります。(フォルダの階層だと、Shoppingcartーhtmlーitemlist.html)このitemlistをメモ帳で開くと、確かに「空も飛べるはず」や「ロビンソン」といった文言が書いてありますよね。ユーザは商品を選択することができるその中でも特に<form~、<input~、この2つの文字で始まる行に注目してください。この「form~」の部分が、Webサイトにアクセスしている人からの入力を受け付ける役目を果たしていて、「Input~」がどんな形式で情報を受け取るか指定しているのです。「input~」の後ろに「type=”checkbox”」って書いてありますよね?ここをもし”textbox”にしたら、チェックボックスではなくテキストボックスが表示されますし、”radio”と書いたらラジオボタンになります。■「type=”radiobutton”」にした場合さて、なぜ僕はこのユーザからの入力をチェックボックスで記載したと思いますか?それは、「ユーザに存在しない商品名を入力されると困る」&「同時に複数商品の注文には対応したい」からです。テキストボックスって、ユーザが好きな文字を入力出来ちゃいますよね?でも、このPythonサンプルアプリケーションにおいて、商品は3つだけなんです。「スピッツだったら、シングルじゃなくてアルバムが欲しい」って言われても、ないのです。入力をラジオボタンにしてしまうと、一度に一つの商品しか選択できません。できればたくさん売りたいので、一度に複数の商品を注文してくれた嬉しい。考えると、あらかじめ販売できる商品を提示しておいて、それを選んでもらう「チェックボックス」での作成が一番良い、と考えたのです。ユーザは入力内容を確認しながら配送先を自分で入力することができるユーザは最初の画面で欲しい商品を選択して「購入」ボタンを押すと、選択した商品と金額が表示され、配送先の住所と宛名、連絡先を入力する画面が表示されます。「入力内容が表示される機能」ですが、ファイル名でいうと「address_input(.py)」に書かれています。この2行によって、最初の商品一覧画面で選択した商品情報を取得することができるのです。振り返ってみるのですが、1で登場したitemlistの<form~の中で、実はこのaddress_input.pyが指定されているのです。<form~とcgi.Fieldstorageのコンビネーションで、画面から入力された情報を元に別の画面に表示したり、計算したりすることができるのです。※formやcgi.FieldStorageの正確な理解は、まだ必要ありません。”画面から入力した情報を操作したり別の画面へ出したかったら、<form~とcgiが必要なんだな~”くらいに覚えておいてもらえれば十分です。続いて「配送先を入力する」機能ですが、こちらも「address_input(.py)」に記載されております。Amazonや楽天もこんな感じでサイト構築しているの?そうです。彼らはより多くのお客様により高度なサービスを提供するため、より複雑な記載をしています。一方で、この記事で触れてきたように要件を定めて機能を設計し、実装(プログラミング)していくという作業は同じです。プログラミングスクールへ通う前に何を作りたいか「思考」してほしいプログラミング=難しい文字列をタイピングすることと考えている方がものすごく多いように感じる最近ですが、僕が考えるプログラミングとは、「思考する」ことであって、タイピングじゃないんです。「考えた結果、タイピングしない」とういのも、立派なプログラミングだと思っています。この記事の途中でも、「なんで僕がこういう書き方をしたと思いますか?」という問いかけがあったと思うのですが、その項に書かれていた逡巡や検討したことそれ自体がプログラミングなんです。プログラミングスクールの内容は、途中でできた「画面の入力内容を取得するにはformとcgiです!」とか、「ラジオボタン使いたかったら”radio”って書いてください」といった、いわゆるHowの情報しかくれないんです。実際のシステム開発現場やビジネスでプログラミングをやるとなると、一番重要なのは「どんな機能を実現したいのか?」「そしてそれはなぜ必要なのか?」といった、WhatやWhyの部分なんです。これを身に付けるには、語学やスポーツ、楽器の演奏と同じで、何度も訓練して「慣れる」(それも一度覚えたことを忘れる前に短期間で)ことが必要なんですが、プログラミングスクールってその辺のタイムマネジメントはやってくれないんですよね。その上、聞きなれな”How”の情報ばかりもてんこ盛りにしてくるので、受講者はキャパオーバー。自力で一から目的のシステムを作ろうとすると途中で思考停止になってしまう、というパターンがものすごく多いです。ならないよう、出きるだけ少ない情報量で、「Webアプリ作りたかったら、まずはこれだけおさえておけば大丈夫」という情報を記載したつもりです。みなさまに明るいプログラミングライフが訪れることを、願っております。それでは、Tchau◎こじろう※冒頭の画像はmattさん@イラストACからの提供になります。【文系SE】プログラミングスクールは合宿がオススメこの記事を書いた人kojirou21Consultant大手外資系ITコンサルティングファームに所属するささきこじろうと申します。1986年生まれです。新卒で某電力系SEになるも東日本大震災等で所属部署を追われ、かねてから興味のあった鍼灸、サッカー、サーフィン全て楽しめるブラジルへ。現在は帰国しておりますが、現在もブラジルでの生活を目指し、自らのスキルと研鑽を磨いております。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。最近のコメントkojirou21Consultant大手外資系ITコンサルティングファームに所属するささきこじろうと申します。1986年生まれです。新卒で某電力系SEになるも東日本大震災等で所属部署を追われ、かねてから興味のあった鍼灸、サッカー、サーフィン全て楽しめるブラジルへ。現在は帰国しておりますが、現在もブラジルでの生活を目指し、自らのスキルと研鑽を磨いております。本当にブロガーさんやアフィリエイターさんのためになる日本一のテーマにしたいと思っていますので、些細なことでも気が付いたのであればご報告いただけると幸いです。