PHP版 YelpCampデモ

勉強をはじめてかなり時間が経ちましたので、何かWEBアプリを作成(複製?)してみようと思います。
このブログをはじめたころ最初の方でご紹介した、Udemyさんの以下の講座内に「YelpCamp」というWEBアプリがあります。

このアプリは、Node.jsとNPMというパッケージマネージャを使用していて、JavaScriptで作成されています。規模もなかなか大きいです。このアプリと講座からは非常にたくさんのWEB技術を勉強させていただきました。最初からアプリの仕様を考えるのは大変なので、今回はこのアプリをPHPで実装してみます。違う言語で実装することで、両方の理解度が一度に確認できます。

実装(移植)を行うにあたり、以下の講座でご説明されているPHP関連の知識がとても役に立ちました。

オリジナルの「YelpCamp」はNode.js (JavaScript)とMongoDBを使用していますが、PHP版ではデータベースにMySQLを使用していますので、MAMP等でも動作をご確認頂けます。こちらのリンクからPHP版のソースファイルをダウンロードできます。

出来るだけオリジナルのフォルダ構成や関数名が同じになる様に実装しましたので、実際の作成方法はUdemyさんの講座をご覧いただければ、どの様な処理を行っているか理解して頂けると思われます。

この記事では、ご興味のある方向けに「YelpCamp」の使い方と、拙作移植コードのインストール方法をご紹介いたします。

YelpCampの使い方

YelpCampは架空のキャンプ場登録サイトアプリです。トップ画面は以下の様になっていて、上部にあるナビゲーションバーからは「ホーム」、「キャンプ場(一覧)」、「ログイン」、「ユーザー登録」画面に移動できる様になっています。

キャンプ場(一覧)画面は以下の様になっています。ページの上部にMapboxというサイトの地図が表示されていて、各キャンプ場の所在地が示されています。その下にはカード形式でキャンプ場一覧が表示されています。近隣のキャンプ場は「クラスターマッピング」という機能によって、そのエリアに含まれるキャンプ場の数が表示されます。

マウスホイールや地図の右上にあるコントロールで拡大・縮小が出来ます。地図を拡大していくとクラスターマップが都度再計算されます。最終的に近隣のキャンプ場がなくなると、小さい青い丸で表示されます。この丸をクリックすると、キャンプ場の名称と20文字程度の説明文がポップアップ形式で表示されます。表示されたキャンプ場の名称をクリックすると、各キャンプ場の説明画面に遷移します。

各キャンプ場の説明画面は以下の様になっています。左側が画像付きの説明画面になっていて、右側に詳細な場所を示す地図が表示されます。画像が複数ある場合は「カルーセル」と呼ばれる機能によって、一定時間ごとに画像がスライド表示されます。

ユーザー登録またはログインを行うと、この画面以外にキャンプ場のレビューを見たり追加したりすることが出来ます。また、キャンプ場の新規追加も行える様になります。

ユーザー登録画面は以下の様になっています。登録には「ユーザー名」、「メールアドレス」と「パスワード」が必要です。普通のサイトではメールアドレスがユーザーIDになっていることが多いですが、本当のメールアドレスを入力されると困るので、移植版では「ユーザー名」をキャンプ場やレビューの管理用IDとして使用しています。そのため同じユーザー名は登録できません。(オリジナルのYelpCampではユーザーレコードに割り振られた「レコードID」をキーにしている様です。)　メールアドレスは「test@test」の様に文字列内に「@」が含まれていればメールアドレスとして認識されます。重複していても問題ありません。

ログイン時はメールアドレスは必要ありません。

入力された情報に不備がある場合は、スタイルシート(Bootstrap)を使用して警告表示される様になっています。

登録が完了すると画面の上部にメッセージが表示されます。ログインや何かエラーが起きた場合もこの位置に表示されます。また、ナビゲーションメニューも「ログイン」、「ユーザー登録」から「ログアウト」に変更されてセッションが維持されます。

ユーザー登録またはログインした状態でキャンプ場の説明画面に移動すると、レビューを閲覧したり投稿したり出来ます。自分が登録したキャンプ場であれば、編集や削除ができます。(キャンプ場を削除した場合は、関連するレビューも削除されます。)

自分が投稿したレビューであれば削除可能です。

ナビゲーションバーにある「新規登録」をクリックすると、キャンプ場の新規登録画面が表示されます。各項目を入力して「登録する」ボタンを押すと新しいキャンプ場情報が登録されます。画像がなくても登録できます。複数選択することも可能です。

登録が成功するとオリジナルのYelpCampでは、Cloudinary(クラウディナリ)という外部のサイトに画像を保存していますが、移植版では「uploads」というフォルダ内に直接画像ファイルを保存します。同時にキャンプ場の編集画面用にサムネイル画像も作成しますので、外部ソフト(Imagick)が必要になります。(なくても動作します。)　このソフトのインストール方法は後でご説明いたします。また、この時入力された場所情報からMapboxというサイトのAPIを使用して、「経度・緯度」情報を取得してデータベースに保存しています。このデータを元に地図上にマーカーを表示しています。

キャンプ場の編集画面は以下の様になっています。新規作成画面とあまり変わりませんが、すでに登録されている画像が縮小表示されていています。画像を削除したい場合は右隣のチェックボックスをチェックして更新すると削除されます。

YelpCampの使い方の説明は以上です。

YelpCampのインストール方法

実際にご自身で試されたい場合は、以下の方法を参考にしてインストールしてください。WSL2でも動作しますが、今回はWindows上のMAMPで動作する様に設定していきます。MAMPが既に起動している前提でご説明します。(MAMPがC:\MAMPと異なるフォルダにインストールされている場合は、フォルダ名を適宜読み替えてください。)

こちらのリンクからPHPのソースファイルをダウンロードして、「C:\MAMP\htdocs」に保存して展開します。(Chromeブラウザでダウンロードした場合は警告が出るかもしれませんが、何とかダウンロードしてください。)

次にデータベースを作成します。エクスプローラーを起動して、上部のパス入力欄に「C:\MAMP\bin\mysql\bin」と入力してenterキーを押します。そのまま同じ入力欄に「cmd」と入力してenterキーを押して、Windowsのコマンドプロンプトを表示させます。

表示されたウィンドウに「mysql -uroot -proot」と入力して、MySQLのコマンドプロンプトを表示させます。

C:\MAMP\bin\mysql\bin>mysql -uroot -proot
mysql: [Warning] Using a password on the command line interface can be insecure.
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 3
Server version: 5.7.24 MySQL Community Server (GPL)

Copyright (c) 2000, 2018, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql>

先ほど展開したフォルダ内にある、「create-database.sql」と「create-user.sql」というファイルをエディタで開きます。それぞれファイルの内容をすべて選択コピーして、Windowsのコマンドプロンプト上でマウスを右クリックするか、Ctl + Vキーを押してコピーした内容を貼り付けます。どちらから先に行っても大丈夫です。

以上で基本的なセットアップは完了です。ブラウザを開いてURL欄に「http://localhost/YelpCampPhpDemo/」と入力するとYelpCampアプリが表示されます。ユーザー登録やキャンプ場作成がすでに実行可能になっています。

キャンプ場修正時のサムネイル作成と地図を表示するには、「Imagick」というソフトのインストールと、「Mapbox」のユーザー登録が必要です。どちらも無料で使用できますが、Mapboxは25,000回/月まで無料という制限があります。

Imagickのインストールは、こちらのサイト様で詳しくご説明されています。(Windowsには同名の「convert」という異なる機能のコマンドがあるため、現在のWindows用のImagickコマンドは「magick」に変更されている様です。移植版YelpCampではmagickコマンドを使用しています。)　WSL2を使用する場合は「sudo apt install imagemagick」と入力してインストールして下さい。

Mapboxの登録方法とアクセストークン(APIを使用する場合に必要です。)の確認方法は、こちらのサイト様で詳しくご説明されています。

Mapboxのアクセストークンが取得できましたら、インストールフォルダ内にある「config.php」ファイルを開きます。設定ファイルの一番最後にある上画像の位置に取得したアクセストークン(‘pk.’で始まる文字列)を貼り付けます。WSL2を使用する場合は、1つ上にある定数(IS_WINDOWS)を「false」に設定してください。

以上でインストールはすべて終了です。初期状態ではキャンプ場が1つも登録されていないので、ブラウザのURL欄に「http://localhost/YelpCampPhpDemo/seeds」と入力するとダミーデータを50件程作成します。初期データのユーザーは「test」になっていますので、同名のユーザーを作成するとすぐにすべての機能を使用できます。

インストールフォルダ名を変更したい場合は、インストールフォルダ内にある「.htaccess」ファイルの以下の部分を変更したフォルダ名に合わせて修正してください。

ダミーデータ作成時にオリジナルの画像を表示したい場合は、インストールフォルダ内に「assets」というフォルダを作成して「001.png」～「101.png」という名称で画像ファイルを保存しておくとランダムに画像を選択してくれます。png以外または001～101以外の画像を選択したい場合は、「seeds/index.php」ファイル内の45と46行目あたりを修正してください。

まだ何も説明コメントを追加していませんが、Xdebug等で動作を確認してみたい場合はインストールフォルダ内にある、「index.php」ファイルの55行目辺りにブレークポイントを設定しておくと、毎回必ずこの部分を通りますのでステップ実行等で動作を追いかけることができます。

その他

今回は勉強のために、パッケージ(ミドルウェア)を一切使用せずに実装してみました。Composerの様なパッケージマネージャやフレームワークを使用すれば、もっと簡単に短時間で実装可能と思われます。

実装できていないこと

オリジナルのYelpCampでは、データベースの保存やAPI問い合わせを非同期処理(Async/Await)と呼ばれる手法で実行しています。移植版ではこれらの処理を同期的に実行していますので、各処理に時間がかかります。また、コメントが無いのでPHPStanなどの静的解析ツールも使用できません。これらの機能を実装するにはパッケージマネージャ(Composer)ソフトのインストールが必要です。

以上です。よろしかったらお試しください。