PR

 最近は、インターネットを使った商取引が広く行われるようになりました。このような状況を反映して、一橋大学の「eコマースプログラミング論」という授業では、インターネットのショッピングサイトを作成する体験を通して商用サイトの裏側の仕組みを学習しています。 eコマースサイトの仕組みには多くの学生が興味を持っているようで、商学部の授業にも関わらず、他の学部からも多くの学生が受講してくれました。

 今回の授業では、学生にとって身近な題材として、オンラインのショッピングサイトを作成してもらいました。自分がオンラインの商店主になったつもりで、魅力的なお店のサイトを作成するのが目的です。授業では、最初にオンラインサイトを構成する「画面(HTML)」「機能(PHP/Aroe)」「データベース(SQL)」という3つの要素を順に説明し、プログラム例で確認しながら理解を深めました。

 続いて、簡単なオンライン書店を題材に、「商品の検索」「ショッピングカート(買い物かご)の管理」「売り上げの記録」といった基本的な処理を学びました。そして学んだ知識を活用して、思い思いのショッピングサイトを作ってもらいました。ここでは、いくつかの作品を紹介したいと思います。

1.デザインにこだわった作品

 オンラインのサイトでは、実際のお店と同様に、通りかかった人に「入ってみたい」「買ってみたい」と思ってもらえるように、親しみやすい雰囲気やわかりやすい画面デザインが大切です。本物のショッピングサイトと見間違うような作品もありました。

学生が作ったサイト例1

2.機能にこだわった作品

 オンラインのサイトでは、実際のお店と違い、店員さんがお客さんに合わせたきめ細かな説明をすることができません。そこで、売れ筋の商品を書店で平積みする代わりに画面の先頭ページで表示したり、お客さんごとのお勧め商品を表示する工夫をした作品もありました。

学生が作ったサイト例2

3.商品にこだわった作品

 多くの学生は例題と同じ本屋のサイトを作りましたが、自分の興味に合わせて、釣具屋、テニスラケット屋、自転車屋などの専門店を作ってくれた学生もいました。また、自分の出身地の物産品を紹介するページを作ってくれた学生もいて、商品の品揃えで個性を出してくれました。

学生が作ったサイト例3

4.他のサイトを分析する作品

 ある学生は「他のサイトを分析するサイト」を作りました。これは、同級生のショッピングサイトを企業に見立てて、株式投資をするオンラインサイトです。ユーザーが「このお店は売り上げが伸びそう」と思って投資をすると、その店の売り上げを他の店と比較して、株価の上下に反映します。 他のサイトにオンライン投資を行うこの作品は、他の学生が「商品を売る」サイトを作っていたのに対し、異色を放っていました。

学生が作ったサイト例4

学生が学んだこと

 授業の様子と、受講した学生たちの感想を紹介します。オンラインのショッピングサイトを作ってみることで、普段使っているWebサイトの仕組みを実感できた学生が多かったようです。eコマースというオンラインの商行為が、どのような技術で実現されているかを学ぶ授業を行うことができました。

38_class1.jpg38_class2.jpg

「この授業を通して、私はアマゾンのような「商業用サイト」の仕組みについて以前と比べかなりわかるようになりました。以前は何気なくパソコンを開いてネットをしていましたが、今では閲覧しているネットのページがどのように組まれているかにも自然と注意を払うようになりました。」

「この授業でデーターベースの有用性を初めて知ることができました。以前は具体的なイメージがわかないことが多かったのですが、この授業で具体像がつかめました。また、商品の見せ方や検索システム、さらにはジャンルといった様々なシステムが複雑に組み合わせって商用サイトが構成されているということは、作る立場になってみてその難しさを実感しました。」

「身近なeコマースサイトのつくりについて学べたことがよい体験でした。検索、検索結果、購入履歴、買い物カゴ、からサイト全体のデザインまで、ソフトを使ってプログラミングしてゆくという基本姿勢のようなものが身についたので、今後もし新しいソフトや言語を使う機会があっても、以前より対応できると思います。」

プロフェッショナルの講演も

 この授業は商学部の授業ということもあり、受講した学生の多くは、インターネットを使った商用サイトを自分たちが将来関わりを持つ可能性があるビジネスのひとつとして考えていたようです。実際この授業は人気が高く、教室の端末の台数で決まる定員の倍以上の受講希望があり、抽選などで選ぶ必要がありました。

 授業の進め方としては、少し工夫をしてみました。この授業は前回までの「コンピュータを学ぶ」授業とは違い、「実用になるオンラインサイトを学ぶ」ための授業だからです。

 2005年度の授業では、相互評価を取り入れました。学生たちに他の学生作品を5個ずつ見てもらい、よい点と改良したほうがよい点を作者にフィードバックしました。同級生に見てもらうことで、「他人に見てもらうサイトを作っている」という、いちばん大切な点に気付いた学生が多かったようです。また、同級生の優れた作品を見て発奮したり、同級生からの率直なコメントを参考にして改良する姿が見られました。

 2006年度の授業では、社会で活躍している一流のプロの方3人を招き、授業の中で講演してもらう機会を作りました。

尾野寛明氏

 1人目は有限会社エコカレッジ会長の尾野寛明さんです。一橋大学の1年生のときに専門書の古書店を起業し、インターネットを利用して安定した業績を上げるまで成長させました。実は、2005年度にはこの授業を受講してくれています。現在は一橋大学の大学院生として、地方の町おこしの研究に取り組んでいるそうです。学部生時代の起業経験と現在の生活など、自分の夢と社会のためにやろうとしていることを熱く語っていただきました。

伊東美沙貴氏

 2人目は、AISHA代表の伊東美沙貴さんです。20代にしてすでに200社以上のWebサイトを手がけたという、プロフェッショナルのWebプロデューサーです。企業サイトやショッピングサイトでは、個々のページのデザインに加え、全体のページ構成やユーザーから見た画面遷移が重要になります。そのあたりのノウハウを、実際に構築したサイトの実例を交えて解説していただきました。

青野晴成氏

 3人目は、株式会社IAFコンサルティング社長の青野晴成さんです。企業の財務データなどから経営分析を行うコンサルタントとして、事業で成功するために必要な企業経営のノウハウを解説していただきました。

 3人とも多忙な方々なのですが、快く講演を引き受けてくださり、 感謝しています。学生の感想を紹介します。やはり第一線で活躍しているゲストの話は参考になる部分が多かったようです。

 「インパクトのあるゲストスピーカーの人たちもとても印象に残りました。特に私たちの年齢層に近かった二人のゲストさんからはよい刺激を得られたと思います。それはこの授業に限らず、色々な局面で私を勇気付けてくれるものになっています。」

授業内容を少しご紹介

 授業で扱った内容を、簡単に紹介しておきましょう。授業の前半では、インターネットのWebサイトの仕組みを学びました。Webサイトは、大きく「 画面(HTML)」「機能(開発言語)」「データベース(SQL)」という構成で作られています。授業の後半では、これらの知識を活かして学生たちが独自のショッピングサイトを作成しました。

 画面はWebページ(いわゆる「ホームページ」)で、ユーザーに見える部分です。この部分はHTMLで記述され、専門のデザイナーが画面デザインを設計することが多いです。授業では復習を兼ねて一通りの書き方を練習しましたが、基本的には授業前の予備知識として自分で学習しておいてもらう内容です。複数のページを共通のデザインで統一するために、CSSというスタイルシートの利用も紹介しました。

 機能は実行されるプログラムで、その内容によってそのサイトの動作が決まります。単純なWebページは画面を表示するだけですが、画面のボタンやリンクをクリックしたときに、裏側でプログラムが実行されることで、商品検索などの動作を行うことができます。

 データベースは商品や顧客などの情報を効率よく管理するための専用のソフトウエアです。オンラインの商店では商品や販売記録などが大量になるため、データベースを使って情報を効率よく管理する必要があります。データベースからデータを読み書きするためには、一般にSQLと呼ばれる専用の言語を使います。

 2005年度の授業では、開発言語にPHPを、データベースにPostgreSQLを使いました。PHPはHTMLの中にプログラムを比較的簡潔な形で書くことができ、Javaなどと並んで世界中でよく使われています。そのままでは使いづらいところがあったので、授業ではPHPエディターとSQLエディターというツールを用意しました。

 PHPエディターはオンラインのテキストエディターで、Webブラウザーからサーバー上のプログラムを編集します。これを使うことで、「手元のPCで作成したプログラムをサーバーに転送してから動作確認」という手間をなくすことができました。もうひとつはSQLエディターで、Webブラウザからサーバー上のデータベースにSQLでアクセスします。これを使うことで、データベース中の値を手軽に確認できるようになりました。

PHPエディター

SQLエディター

 2006年度の授業では、開発言語にAroeを使いました。Aroeは一橋大学の長慎也さんが開発しているプログラミング言語です。Webブラウザーの中でプログラムを書いて実行します。画面の左には画面をデザインするHTMLの記述欄と動作を記述するプログラム欄があります。実行すると、右側に画面が現れて動作を確認できます。

Aroeの開発画面

 以上、4回にわたり、私が一橋大学で行っているコンピューターの授業を紹介しました。情報基礎の授業では、大学生活ですべての学生に必要になる基礎知識を扱いました。計算機概論の授業では、プログラム作品を作る体験を通して、ソフトウエアの基礎を学びました。eコマースプログラミング論の授業では、ショッピングサイトを作る体験を通して、オンラインサイトの仕組みを学びました。

 受講した学生の感想を見ると、「ソフトウエアやWebサイトの仕組みがわかった」「もっと勉強していきたい」という意欲を感じている人が多かったようです。自分で学んでいくための基礎力は身に付きましたので、さらに深めていってくれることを期待したいと思います。