商品検索できるECサイトの作成

本当にMojoliciousとPerlを使うと、ビジネスのスタートアップに必要な機能と開発効率を満たせるの?

まず最初に、ECサイトと呼ばれる、商品を登録、商品一覧を表示、商品の検索ができる簡単なWebアプリケーションを一緒に作ってみませんか?

お手持ちのWindowsかMac OSを使って、MojoliciousとPerlを使った商品検索アプリの開発体験ができます。

最初にWebアプリケーションが立ち上がるまでの所要時間は、30分～1時間程度です。

簡単なECサイトを作ってみましょう。商品の登録、情報の更新、削除、商品の検索ができるサイトを作ります。ECサイトの作成は、他の種類のWebサイトを作成する場合でも応用が利きます。

あなたの身の回りにあるものを写真にとって、あなた専用のWebショップができちゃいます。どんなショッピングサイトができるかな。

ECサイトをさっそく作り始めてみましょう。商品検索のためのWebサイトを開発環境で立ち上げて、表示するところまでを、このページで解説します。

WindowsでのWeb開発環境を構築、あるいはmacOSでWeb開発環境を構築していることが前提です。

Windowsの場合は、msys2を立ち上げてください。macOSの場合は、ターミナルを立ち上げてください。

Webアプリケーションのひな型作成

まず最初にECサイトを作り始めるときの最初の作業は、Webアプリケーションのひな型を作成することです。Mojoliciousには、ひな型を作成するためのコマンドが用意されています。

Webアプリケーションの名前は、次の規則にそって作りましょう。先頭が大文字のアルファベット、二文字目以降は小文字です。Mojoliciousスタートアップでは「わたしのお店」を意味する「Myshop」という名前にしたいと思います。

Webアプリケーションのひな型を作成するには、以下のコマンドを使用します。名前の部分は、自分で決めることができます。

コマンドラインから以下のコマンドを実行して、Enterキーを押してみてください。

# Webアプリケーションのひな型を「Myshop」という名前で作成
mojo generate app Myshop

以下のように生成されたディレクトリとファイルが出力されます。

  [mkdir] /home/kimoto/labo/tmp/myshop/script
  [write] /home/kimoto/labo/tmp/myshop/script/myshop
  [chmod] /home/kimoto/labo/tmp/myshop/script/myshop 744
  [mkdir] /home/kimoto/labo/tmp/myshop/lib
  [write] /home/kimoto/labo/tmp/myshop/lib/Myshop.pm
  [exist] /home/kimoto/labo/tmp/myshop
  [write] /home/kimoto/labo/tmp/myshop/myshop.conf
  [mkdir] /home/kimoto/labo/tmp/myshop/lib/Myshop/Controller
  [write] /home/kimoto/labo/tmp/myshop/lib/Myshop/Controller/Example.pm
  [mkdir] /home/kimoto/labo/tmp/myshop/t
  [write] /home/kimoto/labo/tmp/myshop/t/basic.t
  [mkdir] /home/kimoto/labo/tmp/myshop/public
  [write] /home/kimoto/labo/tmp/myshop/public/index.html
  [mkdir] /home/kimoto/labo/tmp/myshop/templates/layouts
  [write] /home/kimoto/labo/tmp/myshop/templates/layouts/default.html.ep
  [mkdir] /home/kimoto/labo/tmp/myshop/templates/example
  [write] /home/kimoto/labo/tmp/myshop/templates/example/welcome.html.ep

Webアプリケーション名は、先頭が大文字でしたがディレクトリ名は「myshop」のように小文字になっていることに注意してください。

Webアプリケーションの立ち上げ

Webアプリケーションをさっそく立ち上げてみましょう。

まず最初に、Webアプリケーションのディレクトリ「myshop」に移動します。

cd myshop

ここでlsコマンドをを使って、ファイルを表示してみましょう。-lオプションを使用すると、詳細表示になります。

ls -l

次のように表示されます。

drwxrwxr-x 3 kimoto kimoto 4096 Nov 21 08:21 lib
-rw-rw-r-- 1 kimoto kimoto   62 Nov 21 08:21 myshop.conf
drwxrwxr-x 2 kimoto kimoto 4096 Nov 21 08:21 public
drwxrwxr-x 2 kimoto kimoto 4096 Nov 21 08:21 script
drwxrwxr-x 2 kimoto kimoto 4096 Nov 21 08:21 t
drwxrwxr-x 4 kimoto kimoto 4096 Nov 21 08:21 templates

それぞれのディレクトリとファイルについて簡単に解説しておきます。

lib - モジュールのディレクトリ

libの中には、Webアプリケーションを構成するPerlのモジュールを格納するのに利用します。モジュールとは、プログラムを構成する部品のことです。

myshop.conf - 設定ファイル

myshop.confは、Webアプリケーションの設定ファイルです。

public - 公開ファイル

publicには、画像やCSSやJavaScriptなど、静的なファイルを格納するのに利用します。

script

Webアプリケーションを起動するためのPerlのスクリプトが格納されています。

t

「t」はWebアプリケーションの試験を格納するためのディレクトリです。

templates

「templates」は、Webアプリケーションのテンプレートファイルを格納するのに利用します。ブラウザから見える画面を変更するには、この中のファイルを修正します。

Webアプリケーションの起動

Webアプリケーションを起動してみましょう。Webアプリケーションを起動するにはMojoliciousの「morbo」コマンドを使用します。morboの引数には、scriptディレクトリの中に格納されている、Webアプリケーションの起動スクリプトを指定します。

morbo script/myshop

次のように表示され、Webアプリケーションが起動します。

Server available at http://127.0.0.1:3000

IEやChromeやFirefoxやSafariを立ち上げて、URLの欄に、上で表示されたURLを入力してEnterを押してみましょう。左クリックで、ドラッグすることで、コマンドライン上の文字をコピーできます。

画面に以下の文字が表示されるとWebアプリケーションの立ち上げが成功しています。

Welcome to the Mojolicious real-time web framework!

おめでとうございます。これであなたも、Web開発のスタートラインに立ちました!

ここから、商品の画像を追加したりして、ECサイトを成長させていきます。

Perl Webアプリ開発入門