エリゴノミスタイル

WEB関係の記事多めです

【第五回】プログラミング初心者がアプリ作ります。ネットに晒しながら。。【データベース作成・設定】

f:id:xaochanx:20180619023550j:plain

制作中アプリ → 「オトペタ

このブログの概要
aochan-blogs.hatenablog.com

前回
aochan-blogs.hatenablog.com

前回はまがいなりにもラフデザインなど出来たので、今日からは本格的な開発を行っていきます。

エラーの連続で中々前に進まないと思うけど、その様子もこのブログで追っていければと思います。はい。

たしか前々回でCakePHP3をサーバー上にインストールして下の初期画面が表示されたのが進捗としては最新だったかと。

f:id:xaochanx:20180618234313p:plain

左下の赤くなっているのがデータベースと接続できていませんよっていうエラーです。

そりゃそうだ。作ってないもんデータベース。

というわけでデータベースを作成していきます。

前にも見せましたがこんな感じでデータベース作っていきます。

f:id:xaochanx:20180614021029j:plain


phpmyadminからデータベースとテーブルを作成します。

xserver経緯でphpmyadminにデータベースを作成する方法はこちらから。ありがたや(´;ω;`)
www.xserver.ne.jp

phpmyadminでテーブルを作成する方法はこちらから。ありがたやありがたや(´;ω;`)
www.dbonline.jp


データベースは、このサイトの名前が「オトペタ」なので、「otopetadb」とします。
ただ、xserverでデータベースを作成する際は必ず先頭にユーザー名が入るので実際は「(ユーザー名)_otopetadb」となります。

次にテーブルを3種類作成。
Users」「Musics」「Discs」の3つを作成。

カラムはそれぞれ以下のように設定。

「Users」
f:id:xaochanx:20180619010915p:plain

id : 登録した順番
name : ユーザー名
password : パスワード

「Musics」
f:id:xaochanx:20180619012033p:plain

id : 登録した順番
users_id : 楽曲を登録したユーザーのid(これでユーザーと楽曲を紐づける)
discs_id : 楽曲に登録したジャケット画像のid(これでジャケット画像と楽曲を紐づける)
title : 楽曲のタイトル
music_url : YouTubeへのURL(クリックしたらYouTubeへ飛べるようにしたいので)
artist_name : アーティスト名

「Discs」
f:id:xaochanx:20180619012509p:plain

id : 登録した順番
jacket_type : ジャケット画像のタイプ
jacket_url : ジャケット画像が格納されているURL

とりあえずこんな感じでテーブルを作成しました。

CakePHPにはテーブル同士の結びつきをカラムの命名規則を守れば自動で設定してくれる機能が備わっています。
それが先ほどの「Musics」テーブルで登場した「users_id」と「discs_id」です。
「(参照したいテーブル名)_ (紐づけたい相手側のカラム名)」で表現します。

参考記事はこちらから。ありがたや(´;ω;`)
www.sejuku.net


そろそろ眠くなってきたがもうひと踏ん張り。

さて、これでデータベースの作成がひとまず完了したので、これをCakePHP3に紐づけます。

app/config/app.php を開いて以下の記述を見つけます。

'Datasources' => [
        'default' => [
            'className' => 'Cake\Database\Connection',
            'driver' => 'Cake\Database\Driver\Mysql',
            'persistent' => false,
            'host' => 'localhost',
            /*
             * CakePHP will use the default DB port based on the driver selected
             * MySQL on MAMP uses port 8889, MAMP users will want to uncomment
             * the following line and set the port accordingly
             */
            //'port' => 'non_standard_port_number',
            'username' => 'my_app',
            'password' => 'secret',
            'database' => 'my_app',
            /*
             * You do not need to set this flag to use full utf-8 encoding (internal default since CakePHP 3.6).
             */
            //'encoding' => 'utf8mb4',
            'timezone' => 'UTC',
            'flags' => [],
            'cacheMetadata' => true,
            'log' => false,

このコードの次の部分を変更して保存します。

/* 'host' => 'localhost' , 部分 */
'host' => 'xserverで指定されているホスト名',

/*  'username' => 'my_app',  部分 */
 'username' => 'データベース作成をしたユーザー名',

/*  'password' => 'secret', 部分 */
 'password' => 'ユーザー名に紐づいているパスワード',

/*   'database' => 'my_app', 部分 */
 'database' => '作成したデータベース名',

/*   'timezone' => 'UTC', 部分 */
 'timezone' => '+09:00',

上記の設定が完了したら次はapp/config/bootstrap.php を開いて以下の個所を変更します。

date_default_timezone_set(Configure::read('App.defaultTimezone'));

これを

date_default_timezone_set('Asia/Tokyo');

最後のはぶっちゃけるとデータベースの接続とは直接的には関係ないみたいですが、時間に関する設定なのでしょうか?
ドットインストールさんがこうしなさいといってました。(笑)
実際この最後の設定をしなくてもデータベース接続できてませんというエラーは消えます。

なんか怖いのでいつもこのタイミングで設定しています。
ドットインストールさんがこうしなさいといってたので!

設定が終わってもう一度URLにアクセスすると冒頭にあったエラーは消えてなんかよさげな雰囲気出てます。

f:id:xaochanx:20180619020131p:plain

てことで今日はここまでー!
はい!おやすみなさい!

【第四回】プログラミング初心者がネットに作りかけWEBアプリを晒しながら音楽サービスを開発するよ!

f:id:xaochanx:20180618021021j:plain

制作中WEBアプリ:オトペタ
このブログの概要
aochan-blogs.hatenablog.com

前回(第三回)
aochan-blogs.hatenablog.com

今回は、開発的には一歩たりとも進んでいませんが、
サイトのラフ画像やロゴ、サイトで使用するジャケットを作成。

サイトを作成するにあたって全体像がないとやりづらいなと感じたので、
まずはその把握を。

【サイトの全体像】
f:id:xaochanx:20180618014131j:plain

開発を進めていくにつれて、追加したい機能とかももきっと出てくるので、
確定ではないけども、とりあえずは上のような感じで考えています。

今作ろうとしているWEBアプリでは、ユーザーが楽曲登録を行う際に設定するジャケット画像は、サイト側で用意したものを使用してもらいます。
(ユーザーが自由に画像を設定できてしまうと著作権に引っかかりそうな画像を設定してしまう恐れがあるため)

全体像を決めた後は、そのジャケット画像の作成に着手。
とりあえず5種類作成しました。

今後もどんどん増やしていきたいけどしばらくはこの5種類で進めます。

【ジャケ1】
f:id:xaochanx:20180618015000j:plain

【ジャケ2】
f:id:xaochanx:20180618015124j:plain

【ジャケ3】
f:id:xaochanx:20180618015146j:plain

【ジャケ4】
f:id:xaochanx:20180618015206j:plain

【ジャケ5】
f:id:xaochanx:20180618015224j:plain

誰か僕にデザインのセンスをくれ!と声を大にして叫びたい仕上がりですが、ないもんはしょうがない。これでいきます。

ジャケット画像ができたので、次はロゴの作成。
以下のような感じになりました。

【ロゴ】
f:id:xaochanx:20180618015456j:plain

オリジナルはこんな感じ。
これを背景の色などによって、テキスト部分を白にしたりなど適宜変更して使用していきます。

ここまで作って最低限のパーツはそろったので、サイトのメイン部分のラフデザインを作っていきます。
最近はモバイルファーストなんて言葉がよく言われてますので、
スマホ表示用のラフデザインから作成しました。

個人的にこのWEBアプリのメイン部分はユーザーが投稿した楽曲の一覧ページだと思ったのでその部分のラフデザインを作成。
こんな感じになりました。

スマホ表示--ラフデザイン】
(通常時)
f:id:xaochanx:20180618020057j:plain


(楽曲再生時)
f:id:xaochanx:20180618020407j:plain


スマホで見た時にこんな感じになればなと。
メイン部分を作成しとけば後はなんとかなるだろうと。
あとは、開発していく中で必要になったら都度ラフデザインを作成していきます。

パソコン表示時用のものも作成した方がいいのでしょうが、ちょっと気力がございません!
スマホ表示時のパーツを使って組み合わせていきます。

ほんとに毎回牛歩並みの進み具合だけれど今日はこの辺で!

【第三回】初心者がWEBアプリを公開しつつ作成するよ!

f:id:xaochanx:20180614030516j:plain

制作中のWEBアプリ → 「おとぺた」
サイトURL → http://otopeta.com

概要はこちらから
aochan-blogs.hatenablog.com


前回は取得したドメインに対してネームサーバーの設定までして力尽きました。

aochan-blogs.hatenablog.com

今回はCakePHPをインストールしていきます。

こちらの記事を参考にインストールしました。ありがたや。
prog.bged.info

何気にはまったのはインストールする前にルートディレクトリを空にしておかなくちゃいけない点。
ルートディレクトリを空にした状態で以下の通りに進めていきます。

①コンポーザーを取り込む

 $curl -s https://getcomposer.org/installer | /usr/bin/php7.1 
$php composer.phar


②composer.pharがルートディレクトリに作成されたのを確認したら、
composer.json のファイルを新規に作成し、ファイル内に以下を記述する。

{
"require": {
"monolog/monolog": "1.0.*"
}
}


③compserのインストールとアップデートを行う

$ /usr/bin/php7.1 composer.phar install
$ /usr/bin/php7.1 composer.phar update


④CakePHP3をインストールする

$ /usr/bin/php7.1 composer.phar create-project --prefer-dist cakephp/app

これでCakePHP3がインストールできました。
appフォルダが新たに作成されていることをしっかり確認。

だけどもこのままURLにアクセスしても403エラーが表示されます。

そこでルートディレクトリに.htaccessを新規に作成し、作成したファイルに以下の内容を記述します。

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{REQUEST_URI} !/app
RewriteRule ^(.*)$ app/$1 [L]
</IfModule>

恐らくですが、.htaccessに上記の記述をしないと、URLにアクセスした際サーバーはルートディレクトリのindexファイルを参照しようとします。
ですが、冒頭でルートディレクトリはいったん空にしたので、参照するデータがありませんよってことで403エラーが表示されるのだと思います。
なので、URLにアクセスした際はappフォルダ内を参照してくださいっていうことを.htaccessに記載することで、サーバー側へ指示しているのだと思います。

.htaccessを作成後に再度アクセスすると下の画面が表示されます。
めでたしめでたし。

f:id:xaochanx:20180614013436p:plain


ですが、まだデータベースとの接続が出来ていないので、
Databaseの項目のところで「CakePHP is NOT able to connect to the database.」とエラーが表示されてます。

ので、データベースを作成してCakePHPと接続していきます。

データベースは以下のようなイメージで作成していきたいと思います。

f:id:xaochanx:20180614021029j:plain

DiscテーブルはCDのジャケット画像を扱うテーブルですが、
これについては当初、ユーザーが自由に画像を設定して表示できるようにしようかなと考えていました。
なので、Musicテーブル内の情報として扱おうと思っていたのですが、
もし本当のCDのジャケット画像を使用したとしたら著作権的には大丈夫なのかなという不安がありました。

そこで、ジャケット画像についてはテンプレートを数種類用意してその中から設定してもらおうということにしました。

こっちの方が見た目にも統一感が出て良いんじゃないかと。おしゃれなんじゃないかと。

そんな理由がありまして、別途Discテーブルを作成してそこに設定可能なジャケット画像の情報を格納しようかなと。

まあそんな感じです。

牛歩並みの進行具合ですが今日はここまで。

制作中のWEBアプリ → 「おとぺた」
途中経過 → http://otopeta.com

プログラミング初心者がCakePHP3でWEBアプリをつくるよ!【第二回】

f:id:xaochanx:20180613023521j:plain

 

サイトURL:http://otopeta.com

 

昨日に引き続きアプリ作成の続き。

概要はこちら↓

aochan-blogs.hatenablog.com

よくあるWEBアプリ制作の経過ブログみたいな感じだけど、ネット環境に作りかけのアプリさらしつつのスタイルでお送りします。

 

昨日は、ドメイン取得までいきましたので、今日はCakePHPをインストールできるとこまでいけたらなと。

 

てことで、取得したドメインotopeta.com」とエックスサーバーを紐づけます。

流れとしては、

  1. エックスサーバー側にドメインを追加
  2. エックスサーバーのネームサーバーをドメイン側に設定

となります。

まずは「エックスサーバー側にドメインを追加」します。

エックスサーバーのサーバーパネルへログインし「ドメイン設定」をクリック。

f:id:xaochanx:20180613010217p:plain

 

ドメイン設定の画面に入ります。

ドメイン設定の追加」タブをクリックして画面をドメイン追加画面に切り替えて、取得した「otopeta.com」を追加します。

ドメイン設定の追加をクリックして完了です。

ここは(確認)と(確定)で二回クリック必要なので注意。

 

f:id:xaochanx:20180613010558p:plain

エックスサーバー側の設定はこれでOK。

 

次はドメイン側にエックスサーバーで使いますよーっていう設定しま

 

やり方としては、エックスサーバーで指定されているネームサーバーをドメインに設定すればOKみたいです。

そのネームサーバーは、サーバーパネルから確認できるけど、エックスサーバーであるなら全部同じらしい。

ので、次回以降いちいちサーバーパネルを開かなくてもいいように下に用意しましたん。

ネームサーバー1 ns1.xserver.jp
ネームサーバー2 ns2.xserver.jp
ネームサーバー3 ns3.xserver.jp
ネームサーバー4 ns4.xserver.jp
ネームサーバー5 ns5.xserver.jp

 

これをドメインに紐づければよしとな。

早速実践。

 

今回はムームードメインで取得したので、まずはログイン。

すると画面上に登録したメールアドレスが表示されているのでそこにカーソルをもっていきます。コントロールパネルが出ましたね?さあクリック。

 

するとムームードメインで取得したドメイン一覧が表示されますので、ネームサーバーを紐づけたいドメインをクリックします。

 

下のようなコントロールパネルが開きます。

「ネームサーバー設定変更」をクリックしましょう。

f:id:xaochanx:20180613003747p:plain

クリックする場所を親切心で分かりやすくしました。

かえって見づらくとかはなってない。大丈夫。

 

クリックするとネームサーバー設定変更画面にいくので、使用するネームサーバーの設定で「GMOペパボ以外 のネームサーバを使用するを選択してあげます。

するとネームサーバーを入れる項目が出てくるので、先ほどの「ns1.xserver.jp」~「ns5.xserver.jp」を入れます。

 

出来上がりはこんな感じ。

f:id:xaochanx:20180613005436p:plain

ここまで出来たら変更完了ボタンを押して終了です。

あとは設定が反映されるまで茶でもしばいて気長に待ちましょう。

 

結構時間かかります。

 

今回の場合は、30分ぐらいかかりました。

 

設定が反映された直後はこんな感じ。

f:id:xaochanx:20180613011822p:plain

ドメインは反映されたので次はCakePHP3をインストールするぜい。

 

実はこのアプリを作る前にもポートフォリオ作成する際にCakePHP3つかったので、SSHの接続環境やらFTPは準備済み。

 

その辺のところは別の機会にやり方をまとめたいです。

 

ちなみにSSH接続には「TeraTerm」を、FTPには「Cyberduck」を使ってますの。

とりあえず参考記事をぺたっとな。

 

TeraTermの使い方

 

www.amamoba.com

 

Cyberduckの使い方

techacademy.jp

 

Cyberduckのアヒルさんかわいいよね。まじ癒し。

 

そして前回CakePHP3をインストールしたら古いバージョンと古いPHPが設定されてしまって苦労したので今回はちゃんと入れたい。

 

だがしかし時刻は夜中の2時半で吾輩は眠いので今日はここまでにします。

 

f:id:xaochanx:20180613013802p:plain

さすがにこの画面のままは嫌なので、僕の好きな色にかえて寝ますおやすみ。

 

まだ荒れ放題の雑草まみれって感じだけど、URL貼っておきます。

サイトURL:http://otopeta.com

 

 

プログラミング初心者がCakePHP3でWEBアプリをつくるよ!【第一回】

f:id:xaochanx:20180612024920j:plain

 

なぜだかブログを始めてみたくなってはてなブログへ登録をしたはいいものの、

何書こう?から早くも1週間経過。

 

今回が記念すべき初投稿となるのだけども、お題というか書くテーマは「WEBアプリの制作過程の晒上げ」にしようと思う。

 

だけど、ローカル環境でアプリを開発して、その過程をブログで報告!というのはなんだかありきたりな感じがする。

 

というわけで、ローカル環境での開発というステップは飛ばして、

いきなり本番環境で開発します。

それでその過程をここで晒上げようかなと。

 

完成していないアプリはもちろんネット上で放置プレイなので、アクセスすれば未完成のものが見れます。触れます。悪いことはしないでね・・・

家が完成するまでの過程を生の状態で見れるのはなんか楽しそうだなと。笑

 

今回のこの企画(?)を始めようと思った理由はもう一つあって、

僕はプログラミング初心者なのですが、コードを書いてるとまあわからんことだらけなわけです。

で当然ググるわけですが出てきた記事もまあよくわからない。笑

 

原因としては僕の頭と技術力がぱっぱらぱーなことも大いにあるのですが、記事を書いた人にとっては当たり前すぎて省略したことが初心者の僕にとっては当たり前じゃないことが多く、なんでそうなった!?みたいな現象が頻発することも関係していると思うんです。

 

数学のテストとかで途中式で計算過程ちょいちょい飛ばすことありますよね?

採点する先生はもちろん数学の知識があるから通じるけど、習いたての人が見るとどうしてそうなった!?ってなると思うんです。

 

それがプログラミングの学習でもおきているのかなと。

 

プログラミング初心者の僕がアプリを作りながら右往左往してなんとか解決した過程なんかも全部さらしてアプリ自体もネット上で触れるようにしておけば、

 

一番わかりやすい実験材料になるのではないだろうか?と考えたからっていうのがもう一つの理由です。

 

僕みたいなプログラミング初心者の方に何かお役に立てればなと。

 

思ったわけです。

 

というわけで!早速始めよう!

 

作りたいWEBアプリはもう決まってて、何かというとこれ↓

f:id:xaochanx:20180612011358j:plain

わあ素敵

 

これ言われてもっていうレベルの画力ですが、CDのジャケットが並べられていてそれにカーソルを合わせると曲が流れる。みたいなことやりたいんです。

 

カーソル合わせたらジャケットからCDがこんにちは(^ω^)します。

 

f:id:xaochanx:20180612012059j:plain

 

こんにちはしたCDの中(上の写真の斜線部分)では、PVなどの動画が流れます。

 

クリックするとYouTubeに飛びます。

 

iTunesStoreやAmazonのリンクも設置して、該当の曲が収録されてるアルバム買えちゃいます。(ごり押し)

 

てことがしたい!

 

で、一番最初にあった写真のページはユーザーごとに割り当てらていていいね!とかコメントとか残せてSNS的なことしたい!

 

てのは、いきなりやるにはレベルが高すぎると感じたので、最後のSNS的要素はなしにして、とりあえず投稿できるのは僕だけとします。

それでも完成できるかどうかヒジョ―に不安ですが、

僕の好きなバンドをみんなにごり押しするWEBサイトを目指して頑張るお(^ω^)

 

てことで、後には引けない状況にするためにまずはムームードメインドメイン取ります。

 

muumuu-domain.com

 

何にしようかしら。

 

うーーーーん。

 

うーーん。

 

(^ω^)

 

 

 

 

 

というわけで、サイト名は「オトペタ」になりました。

 

30分悩んでこのネーミングセンスにはさすがに絶望ですが、仕方がない。

 

ドメイン取ります。

 

otopetaで検索して、

f:id:xaochanx:20180612015415p:plain

 

いっぱい出てきた。

今回はせっかくなので.comで取得します。

 

f:id:xaochanx:20180612020328p:plain

カートに追加選んで、

進んでいくと設定画面が出てくるので下の画像のように設定して、お支払情報を入れればOKです。

 

f:id:xaochanx:20180612020754p:plain

購入ボタンを押すと次の画面で、「ドメインと一緒にいかがですか?」とほかのCMSのインストールを促されますが華麗にスルーして「次のステップへ」を押すと購入確定画面にたどり着くので、利用規約にチェック入れて取得のボタンを押します。

 

可愛らしい熊さんが出てきてドメイン取得の手続きを行ってくれます。

 

・・・・・・・・・

 

・・・・・・

 

・・・

 

 

f:id:xaochanx:20180612021431p:plain

 

「otopeta.com」ゲットだぜ!!

 

取得してから気づきましたが、ネームサーバーの設定がムームDNSのままです。

エックスサーバーで使うのに。。

 

なのでこの後は、ネームサーバーの設定をエックスサーバーで使用するためのものに変更します。

 

変更後は開発するための環境を揃えた後、実際に開発していきます。

 

今日はもう眠すぎるのでここまで!

 

最後に今回の開発環境(予定)を記して終わります。

 

サーバー:エックスサーバー

フレームワーク:CakePHP3.6

PHP7(?)

MySQL:バージョン謎