プログラミング初学者によるWebアプリ開発の概要と流れ

プログラミング

こんにちは。

プログラミング歴4ヶ月半の初学者が2020年3月~4月の約1ヶ月間でPHPというプログラミング言語でオリジナルWebアプリ『Visualish – 画像で覚える新感覚英語アプリ』を開発したので、その開発の概要について備忘録として綴っていきたいと思います。

Contents

『Visualish-画像で覚える新感覚英語アプリ』ってどんなアプリ？

『Visualish-画像で覚える新感覚英語アプリ』は、その名の通り、英単語を画像で覚えるためのアプリです。英単語と画像やイメージを結びつけることで、①脳に定着しやすくする②英単語がスッと聞こえる・スッと出てくるようになります。

遊び方は簡単で、英単語に合った画像を選ぶと結果ページで「正解」または、「不正解」が表示され、その英単語と複数の画像やイメージを結びつけて記憶するといった楽しみながら英単語を覚える学習アプリになっています。

現在(2020年4月9日)、計90単語の弱小英語アプリですが、毎週単語・カテゴリを追加していく予定なので楽しみにしていてください。

↓↓デモはこちら

 

開発の概要と流れ

開発は、ローカル環境(Mac OS なのでLamp環境と言って良いのかわからない! )を用意して、ざっくりと以下の流れで行いました。

  1. ローカル環境構築 (PHP、MySQL、Apache)
  2. 著作権フリー画像サイト pixabay の公式APIを使用して、画像をダウンロード
  3. Google Cloud Text-to-Speech を使用して、音声ファイルを作成
  4. DB作成と画像ファイル、音声ファイルをDBに登録
  5. 問題と結果取得の処理を記述
  6. デザインの調整
  7. エックスサーバーで公開

↑の流れに沿って、困難だったことを中心に残していきます。

なお、プログラミングを真剣に勉強し始めて4ヶ月半なので、間違っていることもあるかもしれないので、ご了承ください。ご指摘いただけたら幸いです。

ローカル環境構築 (PHP、MySQL、Apache)

まず、何から始めて良いかわかりませんでしたが、とりあえず、ローカル環境を用意することから始めるという答えに行き着き、構築を始めました。

画像を使うので、DBと紐づける必要があるな、Webアプリなので、Webサーバーが必要だな、こういう理由でMySQLとApacheが必要であるという判断に至りました。

まず、PHPですが、Mac (Catalina バージョン 10.15.3)にデフォルトでインストールされているPHPを使用することにしました。目的とするWebアプリケーションによっては、必要なライブラリが入っているかどうかが気になるところだと思いますが、今回の開発では、最初に必要ならライブラリなどはあまりよく分からなかったので、とりあえずデフォルトのPHPを使用しました。フレームワークを用いたりするのなら、恐らくPHPのインストールから始めるのではないかと思います。

また、MySQLについてですが、【Mac版】MySQLとphpMyAdminのインストール方法と設定手順 を参考にHomebrewでインストールしました。

次に、phpMyAdminのインストールと構築ですが、ここでハマりました。phpMyAdminをブラウザで表示するためにApacheというWebサーバーを使用しますが、Apacheは、PHPと同様Macにデフォルトでインストールされているものを使用しました。

結果的に、手探りローカル開発環境構築（Mac+homebrew+ruby+Rails+apach+phpMyAdmin）  の記事通りにやればphpMyAdminにログインすることができ、解決しました。

いろいろなconfファイル(設定ファイル)、

例えば、

MySQL : my.conf ← 場所 /usr/local/etc/my.cnf

phpMyAdmin : config.inc.php ← 場所 /usr/local/share/phpmyadmin/config.inc.php

Apache : httpd.conf ← 場所 /private/etc/apache2/httpd.conf

などが出てきて、場所と何の設定ファイルか混乱するので、一つ一つ丁寧に整理して、自分が今なんのファイルをいじっているのか意識しながら、設定していくことをお勧めします。

 

著作権フリー画像サイト pixabay の公式APIを使用して、画像をダウンロード

次に、著作権フリー画像サイトpixabayの公式APIを使用して、画像をダウンロードしました。

最初はAPIの使い方もわかりませんでしたが、公式ページhttps://pixabay.com/api/docs/をしっかり読むこととググることで、画像を自動ダウンロードできるようになりました。

コードはこちら↓ 詳しい説明はしませんが、あらかじめダウンロードしたい単語を配列$word_arrに貯めておいて、単語毎に画像のwebformatURL(目的とする画像のURL)を返り値とするという処理になっています。

<?php
//APIを叩いてwebformatURLを取得し、URLを作成する関数
function createURL($word_arr){
	$per_page_num = 15;
	$API_key = 'APIキー';
	$base_url = 'https://pixabay.com/api/?key=' . $API_key;
	$option = '&image_type=photo&orientation=horizontal&per_page=' . $per_page_num;
	$img_url_arr = [];
	foreach ($word_arr as $word) {
		$pixabay_json_url = $base_url . '&q=' . $word . $option;
		echo $pixabay_json_url . "\n";
		$pixabay_json_data = file_get_contents($pixabay_json_url);
		$pixabay_arr = json_decode($pixabay_json_data, true);
		$actual_img_num = $pixabay_arr['totalHits'];
		if ($actual_img_num == 0) {
			echo '検索結果は0でした';
			break;
		} elseif ($actual_img_num < $per_page_num) {
			echo '検索結果は' . $per_page_num . '未満でした';
			for ($i = 0; $i < $actual_img_num; $i++) {
				$img_url_arr[$word][] = $pixabay_arr['hits'][$i]['webformatURL'];
			}
		} elseif ($actual_img_num >= $per_page_num) {
			echo '検索結果は' . $per_page_num . '以上でした';
			for ($i = 0; $i < $per_page_num; $i++) {
				$img_url_arr[$word][] = $pixabay_arr['hits'][$i]['webformatURL'];
			}
		}
	}
	return $img_url_arr;
}
?>

 

「著作権フリー画像サイトpixabayの公式APIを使用して、画像をダウンロードする」という処理において、imgフォルダのパーミッションについてハマりました。

ドキュメントルート (公開フォルダ)にフォルダがあって、インターネットを介してサーバーへアクセスしているときは、apache(_www)ユーザとして、そのフォルダやファイルを読み書きするということを知りませんでした。

パーミッションやファイルの所有者に関しても、普段から意識することが大事だなぁと思いました。

ちなみにパーミッションや所有者などは、

ls -l

で調べることができます。

 

Google Cloud Text-to-Speech を使用して、音声ファイルを作成

今回、英単語の音声ファイルは、Google Cloud Text-to-Speech を使用して作成しました。これは、テキストを読み上げてくれる音声変換サービスで、機械学習を利用して、自然な発音の音声を合成してくれます。

このGoogle Cloud Text-to-Speechを利用して、音声ファイルを作成しようと思った矢先、ここでもCloud SDK のインストールに手間がかかりました。(恐らく僕だけじゃないと思いますがww)

Linuxの知識ってマジで大切だと思いました。

結局、参考サイト↓↓をあさりにあさって、何とかインストールしました。

[GCP]macにCloud SDKをインストールした

pyenv 環境で Google Cloud SDK をインストールする

GCPのgcloudコマンドをインストールする

 

エックスサーバーで公開

ブログでエックスサーバー と契約していたので、今回Webアプリにおいてもエックスサーバーで公開しました。

公開までにやったこととして、ほぼWebサービスをXserverで公開する方法 の通りにしました。

しかし、ここでもssh接続、scpでのソースコードのアップロードに引っかかりました。エックスサーバーには「WebFTP」というファイルマネージャーがあるのですが、大量の画像ファイルや音声ファイルをサーバーにアップロードするときには、ちょっとしんどいので、ssh接続、scpでのアップロードが必要でした。

基本的にエックスサーバーにファイルをアップロードする｜ssh, scpを使う方法 をみて進めていったのですが、

ssh ユーザ名@ホスト名 -p 10022

でやってもうまくいきませんでした。

結局、↓のように丁寧にオプション(-l ユーザ名, -i 公開鍵ファイル, -p ポート番号)で指定するとエックスサーバに接続することができました。

ssh -l ユーザ名 -i 公開鍵ファイル サーバーID.xsrv.jp -p 10022

エックスサーバーにssh接続する方法（ターミナル利用）

が参考になりました。

scpでのファイルのアップロードに関しても、

さくらサーバーからXserverにscpでサーバー間でファイル転送

を参考に、↓でいけました。

scp -i ~/.ssh/公開鍵ファイル -P 10022 移動ファイル サーバーID@サーバーID.xsrv.jp: 移動先パス

 

以上ざっくりとした説明でしたが、誰かの参考になれば幸いです!!

Webアプリ開発にあたっての動機や疑問、苦労話、心情の変化、これからの展望に関しては、↓で綴っています!

[nlink url=”https://japanese-engineer.org/1month-web-application-development”]

 

ご指摘等ある方は、コメント欄の方までよろしくお願いします。

ありがとうございました。

コメント

  1. プログラミング初学者が1ヶ月間の自作Webアプリ開発で感じたこと より:
    2020年4月9日 6:18 PM

    […] プログラミング初学者によるWebアプリ開発の概要と流れ こんにちは。 プログラミング歴4ヶ月半の初学者が2020年3月~4月の約1ヶ月間でPHPというプログラミング言語でオリジナルWebアプ […]

    返信