Laravelチュートリアル改 をしたった@大人プログラミング部

アプリ画面例1:light Englishモード http://dodo.teffs.net/

今プラスさんの大人プログラミング部(もくもく会)で、hypertextcandy.com さんのチュートリアル『入門 Laravelチュートリアル』(1)から(11)を行いました。

とても分かりやすいチュートリアルに感謝しかありません。

チュートリアルの結果を発表するにあたり、アプリに手を加えましたのでその内容をご紹介します。

改:チュートリアルアプリからの変更内容

アプリ画面例2: dark ひらがな モード
  • 画面色をマテリアルデザインを意識したものに変更(アプリ画面例1)- 季節的にミカンとリンゴ( Orange & Green Apple)をイメージ。柿と緑茶かも?!渋い。
  • 言語切り替え機能付加 – 日本語 にほんご English – にほんご(ひらがな)は簡単な言葉&和語にこだわってみました。
  • ダークモード切り替え機能付加(アプリ画面例2) – cssファイルの切り替えで対応。 🌄 🌙絵文字も使ってみました。
  • フォルダ編集、削除機能の付加 – 基本機能なので追加しました。
  • タスク削除機能の付加 – 基本機能なので追加しました。
  • フォルダ数、タスク数の制限機能の付加 – 基本機能なので追加。上限に達すると作成ボタンが表示されなくなるだけです。
  • メイン画面のボタン配置変更 – フォルダやタスクの作成ボタンの位置をパネル上部から下部に変更しました。本格的なアプリとするなら、UIデザインは検討の余地が大いにあると思います。
  • 公開用デモ版対応
    デモアカウントのみログイン可能としました。
    編集やメール送信の制限のため、注意書き追加と送信ボタンを無効化しました。
  • flatpickrの日英言語対応とダークモード対応 – なりゆき上の変更です。
  • 専用urlに割当て – Heroku のサブドメインでも良かったのですが、簡単に行えるとのことなのでやってみました。teffs.jp はネームサーバーの設定変更が行えず、取得済であった teffs.net のサブドメインとしました。 http://dodo.teffs.net/

技術ポイント

今回のチュートリアルで学んだことを羅列します。(順不同)

  • Laravel – ウェブアプリケーション・フレームワークの概要が分かりました。
  • PHP class – クラスを使ったPHPプログラミングは初めてでした。
  • Docker – Laradock導入により触りました。
  • Composer – 同上。
  • Laradock – 簡単かと思ったら、意外に手間取りました
  • File/Directory permissions – 基礎ですよね。分かっていたんですが、この手のことでこれ以上悩みたくありません。
  • Bootstrap – CSSのフレームワーク。良くできています。cdn版を使っています。
  • Bootflat – Bootstrapの補助的フレームワーク。良くできています。cdn版を使っています。
  • Flatpickr – カレンダー形式での日付選択ライブラリ。日本語にも対応しています。
  • Material.io – 春にAndroidの勉強をした甲斐がありました。
  • git – ようやく使えるようになりました。
  • Heroku – サービスの公開が簡単。素敵なサービスです。
  • Mailtrap.io – デバッグ用 smtpサービス。
  • Sendgrid – smtpサービス。
  • Sublime Text – テキストエディタ。ATOMに乗り換え予定。
  • mysql – 開発環境用DB。Version 8.0以降は認証方式が異なるのでひと手間かかります。
  • phpMyAdmin – mysql管理用アプリ。
  • postgreSQL – 公開サーバー(Heroku)のデータベースは postgreSQLです。
  • SQL lite – チュートリアル中でちょっとだけ使いました。これはこれで良し。
  • Qiita.com – 掲載されている記事には何度となくお世話になりました。
  • DEV.to – 多言語対応の時に見つけたサイト。世界の広さが実感できます。
  • GitHub.com – 実はまだ使いこなせていません。
  • 設計手順 – チュートリアルではザーッと流していましたが、設計って非常に大事です。設計がきちんとされていると実装作業が捗りますね。
  • 記録のとり方 – 最初は Google Keepにメモっていましたが、開発環境に専用ディレクトリを用意し、そこにテキストメモを貯めていくことにしました。

心残り

  • cssフレームワークのBURMAも触ってみたかった。
  • SNSアカウントでのログイン機能も実装してみたかった。
  • PWA化してみたかった。
  • 画像のアップロード機能も実装してみたかった。
  • 本格アプリ化してみたかった。(設計からやらねばいけません。)

公式 Quick Overview の場合 Laradock on Ubuntu @大人プログラミング部

(情報交錯しがちですが、メモ用として要点のみ)

公式 Quick Overview の場合

Laradock 公式のQuick Overviewを実行してみました。

1. Introduction – Laradock
https://laradock.io/introduction/#quick-overview

こんな感じで書いてあります。とても簡単そうです!

#
Let’s see how easy it is to setup our demo stack PHP, NGINX, MySQL, Redis and Composer:
1 - Clone Laradock inside your PHP project:
git clone https://github.com/Laradock/laradock.git
2 - Enter the laradock folder and rename env-example to .env.
cp env-example .env
3 - Run your containers:
docker-compose up -d nginx mysql phpmyadmin redis workspace 
4 - Open your project’s .env file and set the following:
DB_HOST=mysql
REDIS_HOST=redis
QUEUE_HOST=beanstalkd

上に書いてある通りに実行した後、ブラウザから localhostにアクセスすると
404 Not Found
nginx
が表示されます。

localhost:8080 はOKです。phpMyAdminが表示されます。

状況としては、プロジェクトを作って設定すればOKらしいです。

Laradockが上手く動かなくて困った話 – Qiita
https://qiita.com/skmt719/items/a296d81150fd7319e71a

ということで、workspaceコンテナに入って、プロジェクトを作成します。プロジェクト名は testApp です。

~/lara/laradock$ docker-compose exec workspace bash
root@4dd42b7b4aa8:/var/www# ls
laradock
root@4dd42b7b4aa8:/var/www# composer create-project laravel/laravel testApp

続いて、プロジェクト名に合わせて laradockディレクトリの .env を変更します。

APP_CODE_PATH_HOST=../testApp/
#変更前
#APP_CODE_PATH_HOST=../

docker-compose を再起動し、 ブラウザで localhost 再表示すると、下記エラーが表示されました。

/var/www/
UnexpectedValueException
The stream or file "/var/www/storage/logs/laravel-2019-09-28.log" could not be opened: failed to open stream: Permission denied
http://localhost/
Hide solutions
Database name seems incorrect
You're using the default database name laravel. This database does not exist.
Edit the .env file and use the correct database name in the DB_DATABASE key
READ MORE
Database: Getting Started docs

ディレクトリの権限設定をします。

ディレクトリ storage, bootstrap/cache のオーナーと権限を変更しましょう Laradock on Ubuntu @大人プログラミング部 – teffs
https://teffs.jp/2019/10/chown-chmod-storage-bootstrap-cache-laradock-on-ubuntu/

ブラウザの localhost 表示はOKです。

続いて、 localhost:8080 で、mysqlに接続…… の前にmysql のバージョンが latestなので、認証方式変更ですね。

MySQL 8.0以降は、ユーザ認証方式を変更しましょう Laradock on Ubuntu @大人プログラミング部 – teffs
https://teffs.jp/2019/10/mysql-8-0-mysql-native-password-laradock-on-ubuntu/

ブラウザの localhost:8080 で、mysql – defaultに接続できました。

ここまでで開発環境としては動くようになったので、hypertextcandyさんのチュートリアルを行ってみます。

入門Laravelチュートリアル (1) イントロダクションと環境構築 | Hypertext Candy
https://www.hypertextcandy.com/laravel-tutorial-introduction

入門Laravelチュートリアル (2) ToDoアプリケーションの設計 | Hypertext Candy
https://www.hypertextcandy.com/laravel-tutorial-todo-app-design

入門Laravelチュートリアル (3) ToDoアプリのフォルダ一覧表示機能を作る | Hypertext Candy
https://www.hypertextcandy.com/laravel-tutorial-todo-app-list-folders/

チュートリアル3 のHello world の表示までは無事OKです。

workspaceコンテナ内で migration 生成します。

root@067f2585e287:/var/www# php artisan make:migration create_folders_table --create=folders
Created Migration: 2019_10_05_015106_create_folders_table

database/migrations に作られた Schema::createメソッド中の $table->increments() が $table->bigIncrements()になっている以外はチュートリアルの通りです。

migrationを実行すると、エラーが発生しました。dbスキーマが laravelになっているようです。

root@067f2585e287:/var/www# php artisan migrate

   Illuminate\Database\QueryException  : SQLSTATE[HY000] [2002] Connection refused (SQL: select * from information_schema.tables where table_schema = laravel and table_name = migrations and table_type = 'BASE TABLE')

  at /var/www/vendor/laravel/framework/src/Illuminate/Database/Connection.php:665
    661|         // If an exception occurs when attempting to run a query, we'll format the error
    662|         // message to include the bindings with SQL, which will make this exception a
    663|         // lot more helpful to the developer instead of just the database's errors.
    664|         catch (Exception $e) {
  > 665|             throw new QueryException(
    666|                 $query, $this->prepareBindings($bindings), $e
    667|             );
    668|         }
    669| 

  Exception trace:

  1   PDOException::("SQLSTATE[HY000] [2002] Connection refused")
      /var/www/vendor/laravel/framework/src/Illuminate/Database/Connectors/Connector.php:70

  2   PDO::__construct("mysql:host=127.0.0.1;port=3306;dbname=laravel", "root", "", [])
      /var/www/vendor/laravel/framework/src/Illuminate/Database/Connectors/Connector.php:70

  Please use the argument -v to see more details.
root@067f2585e287:/var/www# 

原因を調査すると、プロジェクトtestApp内 の .env の設定に問題がある様子です。

DB_DATABASE, DB_USERNAME, DB_PASSWORD の設定値を修正します。Quick Overviewといえ、ここも設定しないといけないんですね。

修正前
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=

修正後
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=default
DB_USERNAME=default
DB_PASSWORD=secret

migration を実行しますが、再びNG。DB_HOSTの値が不味いようです。

root@067f2585e287:/var/www# php artisan migrate

   Illuminate\Database\QueryException  : SQLSTATE[HY000] [2002] Connection refused (SQL: select * from information_schema.tables where table_schema = default and table_name = migrations and table_type = 'BASE TABLE')

  at /var/www/vendor/laravel/framework/src/Illuminate/Database/Connection.php:665
    661|         // If an exception occurs when attempting to run a query, we'll format the error
    662|         // message to include the bindings with SQL, which will make this exception a
    663|         // lot more helpful to the developer instead of just the database's errors.
    664|         catch (Exception $e) {
  > 665|             throw new QueryException(
    666|                 $query, $this->prepareBindings($bindings), $e
    667|             );
    668|         }
    669| 

  Exception trace:

  1   PDOException::("SQLSTATE[HY000] [2002] Connection refused")
      /var/www/vendor/laravel/framework/src/Illuminate/Database/Connectors/Connector.php:70

  2   PDO::__construct("mysql:host=127.0.0.1;port=3306;dbname=default", "default", "secret", [])
      /var/www/vendor/laravel/framework/src/Illuminate/Database/Connectors/Connector.php:70

  Please use the argument -v to see more details.
root@067f2585e287:/var/www# 

まず、mysqlコンテナに入って、ipアドレスを調査。この環境では、172.23.0.2 です。

~/lara/laradock$ docker-compose exec mysql bash
root@52340d840f63:/# hostname -i
172.23.0.2

再び testApp/.env の DB_HOST を修正します。(注:後日再度修正しました)

DB_CONNECTION=mysql
DB_HOST=172.23.0.2
DB_PORT=3306
DB_DATABASE=default
DB_USERNAME=default
DB_PASSWORD=secret

migration を実行します。通りました!

~/lara/laradock$ docker-compose exec workspace bash
root@067f2585e287:/var/www# php artisan migrate
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table (0.89 seconds)
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table (0.94 seconds)
Migrating: 2019_08_19_000000_create_failed_jobs_table
Migrated:  2019_08_19_000000_create_failed_jobs_table (0.48 seconds)
Migrating: 2019_10_05_015106_create_folders_table
Migrated:  2019_10_05_015106_create_folders_table (0.52 seconds)
root@067f2585e287:/var/www# 

ブラウザから localhost:8080 を開いて、phpMyAdminで default databasesに folderテーブルができていることを確認できました。

公式 Quick Overview はとても簡単そうで、 “enjoy!”とか書いてありまして、設定不要で動くのかと思いきや、それなりの設定が必要でした。

たっぷり enjoy してしまいました!

※追記 2019年10月14日

MySQLコンテナの ip アドレスがいつの間にか変わってしまったので、 testApp/.env の DB_HOST を mysql に修正しました。

DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=default
DB_USERNAME=default
DB_PASSWORD=secret

ディレクトリ storage, bootstrap/cache のオーナーと権限を変更しましょう Laradock on Ubuntu @大人プログラミング部

こんにちは。山崎代三です。今回も要点だけの記述です。

ディレクトリ storage, bootstrap/cache のオーナーと権限を変更しましょう

理由:ディレクトリの権限を設定しないと、Laradockが動かないため。正確に言えば、webアプリケーション(php)からの書き込み操作ができないため。

この設定が必要なのは、たぶん、Linux 環境だけです。ネットの情報が少ないのは、Windows 環境や Mac 環境 では問題にならないからでしょう。そして、Linuxを使う人には常識なんでしょうね……。

設定方法は簡単です。Laradock プロジェクトのソースディレクトリにて、chown と chmod を実行するだけです。

~/laratuto/src$ sudo chown -R $USER:www-data storage
~/laratuto/src$ sudo chown -R $USER:www-data bootstrap/cache
~/laratuto/src$ chmod -R 775 storage
~/laratuto/src$ chmod -R 775 bootstrap/cache

ちなみに、これをやらないとどうなるのか……。

docker-compose 起動状態で、localhost をブラウザで表示すると、こんなエラーが表示されます。

UnexpectedValueException
The stream or file "/var/www/storage/logs/laravel-2019-09-21.log" could not be opened: failed to open stream: Permission denied

参考サイト

php – How to fix Error: laravel.log could not be opened? – Stack Overflow
https://stackoverflow.com/questions/23411520/how-to-fix-error-laravel-log-could-not-be-opened

MySQL 8.0以降は、ユーザ認証方式を変更しましょう Laradock on Ubuntu @大人プログラミング部

(こんばんは。前回の投稿から間が空いてしまったので、要点だけ書きますね。)

MySQL 8.0以降は、ユーザ認証方式を mysql_native_password に変更しましょう 

理由:mysql 8.0以降はユーザ認証の方式がcaching_sha2_password に変わったが、現行のphp 7.3.9 ではその認証方式がサポートされていないため。

まずは、workspaceコンテナに接続して、PHPバージョン確認します。

$ docker-compose exec workspace bash
 root@dee160787a84:/var/www# php -v
 PHP 7.3.9-1+ubuntu16.04.1+deb.sury.org+1 (cli) (built: Sep  2 2019 12:54:04) ( NTS )
 Copyright (c) 1997-2018 The PHP Group
 Zend Engine v3.3.9, Copyright (c) 1998-2018 Zend Technologies
     with Zend OPcache v7.3.9-1+ubuntu16.04.1+deb.sury.org+1, Copyright (c) 1999-2018, by Zend Technologies
 root@dee160787a84:/var/www# exit
 exit

MySQLコンテナに接続し、rootでログインします。

$ docker-compose exec mysql bash
root@403e510891bb:/# mysql -u root -p
Enter password:
Welcome to the MySQL monitor. Commands end with ; or \g.
Your MySQL connection id is 8
Server version: 8.0.17 MySQL Community Server - GPL

Copyright (c) 2000, 2019, 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 DATABASE(設定用DB)に入り、ユーザの認証方法を変更します。

mysql> use mysql
Reading table information for completion of table and column names
You can turn off this feature to get a quicker startup with -A

Database changed

mysql> select user, host, plugin from user;
+------------------+-----------+-----------------------+
| user | host | plugin |
+------------------+-----------+-----------------------+
| default | % | caching_sha2_password |
| root | % | caching_sha2_password |
| mysql.infoschema | localhost | caching_sha2_password |
| mysql.session | localhost | caching_sha2_password |
| mysql.sys | localhost | caching_sha2_password |
| root | localhost | caching_sha2_password |
+------------------+-----------+-----------------------+
6 rows in set (0.00 sec)

mysql> alter user 'default'@'%' identified with mysql_native_password by 'secret';
Query OK, 0 rows affected (0.11 sec)

mysql> select user, host, plugin from user;
+------------------+-----------+-----------------------+
| user | host | plugin |
+------------------+-----------+-----------------------+
| default | % | mysql_native_password |
| root | % | caching_sha2_password |
| mysql.infoschema | localhost | caching_sha2_password |
| mysql.session | localhost | caching_sha2_password |
| mysql.sys | localhost | caching_sha2_password |
| root | localhost | caching_sha2_password |
+------------------+-----------+-----------------------+
6 rows in set (0.00 sec)

mysql> exit
Bye

mysql に default user でログイン(パスワードは先程設定した “secret”)して、default DATABASEを確認できたらOKです。

root@403e510891bb:/# mysql -u default -p
Enter password:
Welcome to the MySQL monitor. Commands end with ; or \g.
Your MySQL connection id is 9
Server version: 8.0.17 MySQL Community Server - GPL

Copyright (c) 2000, 2019, 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> show databases;
+--------------------+
| Database |
+--------------------+
| default |
| information_schema |
+--------------------+
2 rows in set (0.00 sec)

mysql> use default
Database changed
mysql> show tables;
Empty set (0.01 sec)

mysql> exit
Bye
root@403e510891bb:/# exit
exit

ちなみに、認証方式が caching_sha2_password のままだとシンタックスエラーが出ます。

mysql> show tables in default;
ERROR 1064 (42000): You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'default' at line 1

ブラウザで http://localhost:8080 から phpMyAdminを表示させ、mysql, default, secretでログインして、mysqlの内容を表示させることができれば成功です。

MySQL沼にハマったの巻@大人プログラミング部

こんばんは。山崎 代三です。

つい先程アムレスのオンラインストア向けのブログを書き終わったばかりですが、休む間もなく、こちらを書きます。

本日の大人プログラミング部での目標は、
1. Sublime text のインストール
2. Laradock インストールの続き
3. 公式チュートリアルアプリを作る
でした。

Sublime textは Ubuntu の GUIインストーラーから難なくインストールできました。GUIっていいですね。

『Laradockインストールの続き』

まずは、.env ファイルのDB設定変更。

↓こうなっている部分を

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=

↓こうするらしいです。

DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=default
DB_USERNAME=default
DB_PASSWORD=secret

で、docker-compose 起動

$ docker-compose up -d nginx mysql phpmyadmin

状況確認します。

$ docker ps --format "table {{.Names}}"
NAMES
laradocklaratuto_nginx_1
laradocklaratuto_php-fpm_1
laradocklaratuto_workspace_1
laradocklaratuto_phpmyadmin_1
laradocklaratuto_docker-in-docker_1
laradocklaratuto_mysql_1

workspaceコンテナに接続して Laravel artisan も確認します。

$ docker-compose exec workspace bash
# php artisan --version
Laravel Framework 6.0.1
# exit

ええやん!

トラブル – mysql のテーブルが見えない

続いて mysqlコンテナに接続して defaultデータベースのテーブルを見ることにします。

$ docker-compose exec mysql bash
# mysql --version
mysql  Ver 8.0.17 for Linux on x86_64 (MySQL Community Server - GPL)
# mysql -u default -p
Enter password: 
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 8
Server version: 8.0.17 MySQL Community Server - GPL
Copyright (c) 2000, 2019, 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 ターミナルでドキドキします。

mysql> SHOW DATABASES;
+--------------------+
| Database |
+--------------------+
| default |
| information_schema |
+--------------------+
2 rows in set (0.03 sec)

ここまでは良かった……。

mysql> SHOW TABLES FROM default;
ERROR 1064 (42000): You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'default' at line 1

omg! シンタックスエラー!!!

ちなみに、

SHOW TABLES FROM information_schema;

は、まったく問題なく表示できます。

mysql> SHOW TABLES FROM information_schema;
+---------------------------------------+
| Tables_in_information_schema          |
+---------------------------------------+
| CHARACTER_SETS                        |
| CHECK_CONSTRAINTS                     |
| COLLATIONS                            |
| COLLATION_CHARACTER_SET_APPLICABILITY |
| COLUMNS                               |
| COLUMN_PRIVILEGES                     |
| COLUMN_STATISTICS                     |
| ENGINES                               |
| EVENTS                                |
| FILES                                 | 
(中略)
| TRIGGERS                              |
| USER_PRIVILEGES                       |
| VIEWS                                 |
| VIEW_ROUTINE_USAGE                    |
| VIEW_TABLE_USAGE                      |
+---------------------------------------+
67 rows in set (0.03 sec)

mysql> \q
Bye
# exit

では、ブラウザで、phpMyAdmin表示確認してみましょう。

http://localhost:8080

phpMyAdmin画面を表示しますが、何やら mysqlに接続できません。こんなエラーが表示されます。

mysqli_real_connect(): The server requested authentication method unknown to the client [caching_sha2_password]
mysqli_real_connect(): (HY000/2054): The server requested authentication method unknown to the client

mysqlモニターで接続できないんだから、そりゃそうだ。

対策その1 – mysqlを再ビルド

まずは一旦 docker-composeを停止

$ docker-compose stop
Stopping laradocklaratuto_nginx_1 ... done
Stopping laradocklaratuto_php-fpm_1 ... done
Stopping laradocklaratuto_workspace_1 ... done
Stopping laradocklaratuto_phpmyadmin_1 ... done
Stopping laradocklaratuto_docker-in-docker_1 ... done
Stopping laradocklaratuto_mysql_1 ... done

docker-compose の状況確認

docker-compose ps
               Name                              Command                State     Ports
---------------------------------------------------------------------------------------
laradocklaratuto_docker-in-docker_1   dockerd-entrypoint.sh            Exit 0          
laradocklaratuto_mysql_1              docker-entrypoint.sh mysqld      Exit 0          
laradocklaratuto_nginx_1              /bin/bash /opt/startup.sh        Exit 137        
laradocklaratuto_php-fpm_1            docker-php-entrypoint php-fpm    Exit 0          
laradocklaratuto_phpmyadmin_1         /docker-entrypoint.sh apac ...   Exit 0          
laradocklaratuto_workspace_1          /sbin/my_init                    Exit 0

ということで、mysql を再ビルド

$ docker-compose build mysql
Building mysql
Step 1/9 : ARG MYSQL_VERSION=latest
Step 2/9 : FROM mysql:${MYSQL_VERSION}
 ---> 62a9f311b99c
Step 3/9 : LABEL maintainer="Mahmoud Zalt <mahmoud@zalt.me>"
 ---> Using cache
 ---> 5058417d301b
Step 4/9 : ARG TZ=UTC
 ---> Using cache
 ---> 8ebb90e16795
Step 5/9 : ENV TZ ${TZ}
 ---> Using cache
 ---> 95f61388e8ed
Step 6/9 : RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone && chown -R mysql:root /var/lib/mysql/
 ---> Using cache
 ---> aa0dfc41ec7d
Step 7/9 : COPY my.cnf /etc/mysql/conf.d/my.cnf
 ---> Using cache
 ---> dab3a71488b5
Step 8/9 : CMD ["mysqld"]
 ---> Using cache
 ---> 101902f85ce6
Step 9/9 : EXPOSE 3306
 ---> Using cache
 ---> 92e28e715cea
Successfully built 92e28e715cea
Successfully tagged laradocklaratuto_mysql:latest

なんかキャッシュが効いている感じですけど……とりあえず、docker-compose を再起動します。

$ docker-compose up -d nginx mysql phpmyadmin
Starting laradocklaratuto_docker-in-docker_1 ... 
Starting laradocklaratuto_docker-in-docker_1
Starting laradocklaratuto_mysql_1 ... 
Starting laradocklaratuto_docker-in-docker_1 ... done
Starting laradocklaratuto_workspace_1 ... 
Starting laradocklaratuto_mysql_1 ... done
Starting laradocklaratuto_phpmyadmin_1 ... 
Starting laradocklaratuto_workspace_1 ... done
Starting laradocklaratuto_php-fpm_1 ... 
Starting laradocklaratuto_php-fpm_1 ... done
Starting laradocklaratuto_nginx_1 ... 
Starting laradocklaratuto_nginx_1 ... done

mysqlコンテナに接続し、mysqlモニターに入りまして〜

$ docker-compose exec mysql bash
# mysql -u default -p
Enter password: 
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 8
Server version: 8.0.17 MySQL Community Server - GPL
Copyright (c) 2000, 2019, 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.

DB確認 – OK!

mysql> SHOW DATABASES;
+--------------------+
| Database           |
+--------------------+
| default            |
| information_schema |
+--------------------+
2 rows in set (0.03 sec)

defaultテーブルが見られない、またシンタックスエラー!

mysql> SHOW TABLES FROM default;
ERROR 1064 (42000): You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'default' at line 1
mysql> \q
Bye
# exit

キャッシュが効いた状態だったのが、あかんかったんですかね〜?

次に進みましょう!

対策2 – キャッシュを使わずに mysql を再ビルド

mysql を –no-cache でリビルドすればええねんな〜!

ちゅーことで、docker-compose を停止

$ docker-compose stop
Stopping laradocklaratuto_nginx_1            ... done
Stopping laradocklaratuto_php-fpm_1          ... done
Stopping laradocklaratuto_workspace_1        ... done
Stopping laradocklaratuto_phpmyadmin_1       ... done
Stopping laradocklaratuto_docker-in-docker_1 ... done
Stopping laradocklaratuto_mysql_1            ... done

–no-cacheでビルド

$ docker-compose build --no-cache mysql
Building mysql
Step 1/9 : ARG MYSQL_VERSION=latest
Step 2/9 : FROM mysql:${MYSQL_VERSION}
 ---> 62a9f311b99c
Step 3/9 : LABEL maintainer="Mahmoud Zalt <mahmoud@zalt.me>"
 ---> Running in 71a61e56788b
Removing intermediate container 71a61e56788b
 ---> 40aecf17e159
Step 4/9 : ARG TZ=UTC
 ---> Running in 964d476c105f
Removing intermediate container 964d476c105f
 ---> e6717c7e9850
Step 5/9 : ENV TZ ${TZ}
 ---> Running in 029696b05e93
Removing intermediate container 029696b05e93
 ---> 23645640fdf8
Step 6/9 : RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone && chown -R mysql:root /var/lib/mysql/
 ---> Running in f6a9e640a719
Removing intermediate container f6a9e640a719
 ---> 84372d2738b3
Step 7/9 : COPY my.cnf /etc/mysql/conf.d/my.cnf
 ---> a3271c2f9b4d
Step 8/9 : CMD ["mysqld"]
 ---> Running in cd3ba1d7e53f
Removing intermediate container cd3ba1d7e53f
 ---> 2fe7ca3c4f0d
Step 9/9 : EXPOSE 3306
 ---> Running in 790c9197039d
Removing intermediate container 790c9197039d
 ---> 2fdb99b2b437
Successfully built 2fdb99b2b437
Successfully tagged laradocklaratuto_mysql:latest

キャッシュを使わずリビルドできたようです。

ということで、先程と同じことを行いました。(途中省略して、mysqlモニターのみ)

mysql> SHOW TABLES FROM default;
ERROR 1064 (42000): You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'default' at line 1
mysql> \q
Bye
# exit               

いつもいつも、シンタックス・エラーって何やねん!綴りはあってんで〜!

それにしても開発環境を構築できないとは……。

もしかしてノートパソコンの充電が切れてたから、何かファイルが壊れたかな?

mysql リムーブ

mysqlだけ、入れ直すということを決め、コンテナとイメージを削除しました。ターミナル履歴のコピーを取り忘れたので、コマンドだけ記述します。

mysql コンテナ削除

$ docker rm e802567fac63

mysql イメージ削除

$ docker rmi 2fdb99b2b437D

ということで、本日は時間となりました。

まとめ

なかなか思い通りには行きませんが、仕事に直接関係無いこともあり、余裕をもってあれこれ試せるのは良いですね。

今回の参加者は、Nさん、Mさん、初参加のWさん、そして私でした。

今回の参考サイト

初心者がLaradockでLaravelを開発するための準備の仕方をまとめるよ | 東京上野のWeb制作会社LIG
https://liginc.co.jp/465420

テーブルの一覧を表示する – MySQL 逆引きリファレンス
http://mysql.javarou.com/dat/000393.html

データベースの一覧を表示する – MySQL 逆引きリファレンス
http://mysql.javarou.com/dat/000418.html

mysqlコマンド関連:MySQL 逆引きリファレンス
http://mysql.javarou.com/category/173.html

コマンドラインから MySQL に接続する – MySQL 逆引きリファレンス
http://mysql.javarou.com/dat/000389.html

【Docker】MySQL8.0系を使う時に発生する問題について – websandbag ブログ
https://blog.websandbag.com/entry/2018/05/17/121730

docker-compose コマンドまとめ – Qiita
https://qiita.com/wasanx25/items/d47caf37b79e855af95f#rm

初心者向けdocker-composeコマンド逆引き – Qiita
https://qiita.com/okyk/items/a374ddb3f853d1688820

docker-compose up vs docker-compose up –build vs docker-compose build –no-cache – Stack Overflow
https://stackoverflow.com/questions/39988844/docker-compose-up-vs-docker-compose-up-build-vs-docker-compose-build-no-cach/39988980

docker-composeでbuildする時にcacheを使わない – Qiita
https://qiita.com/setouchi/items/e01557ae4647b8e3b1bc

docker-composeでbuildする時にcacheを使わない – 塩焼きブログ
https://sioyaki.com/entry/2016/06/16/095357

LaradockのMySQLに接続できなくてはまった話 – Qiita
https://qiita.com/dnrsm/items/4bd078c17bb0d6888647

【2019年2月】Laradockの初期環境設定方法 – Qiita
https://qiita.com/don-bu-rakko/items/0297280553e99aa6d7b8

Dockerイメージとコンテナの削除方法 – Qiita
https://qiita.com/tifa2chan/items/e9aa408244687a63a0ae

あとがき

帰りの車の中で、今回の沼にはまった原因を考えていた時、システムの破損によるシンタックスエラーというよりは、mysqlのバージョン指定 or セキュリティ設定に問題があるのではないかと思い当たりました。

mysqlはバージョン 8.0だとセキュリティが厳しいので、設定にひと工夫が必要みたいです。

改めて、今回の環境構築の参考サイトを見てみると、mysqlのバージョンを 5.7に指定して環境構築していました orz。

8.0で突っ張るか、5.7に日和るか……ちょっと悩みます。勉強のためには 8.0が良いんでしょうけど。

私の息子も Laradock での環境構築を行っています。私より後に始めたのに、すでにアプリを作り始めています。遥かに先に……。

Laradock インストールの巻@大人プログラミング部

こんにちは。山崎 代三です。

「ブログは熱い内に書け!」

ということで、大人プログラミング参加後、一息ついてブログを書いています。

本日の大人プログラミング部@今プラス、自ら設定したお題は、『Laravel 公式チュートリアル 基本のタスク管理アプリ? を動かす』みたいな感じでした。

が、実際に作業を初めて気づきました。

否、先週から気づいていました。

Laravelをローカル環境にインストールせんと、開発効率が悪くてたまらん。

先週までは、レンタルサーバーにインストールしたLaravelで勉強していたのですが、ソースコードのエディットがターミナルから edit を叩いてチマチマと非常に面倒だったんです。

ということで、本日は作業が始まるやいなやお題を変更し、『ローカル環境にLaradockインストール』としました。(参加者のみなさま、すみません)

基本的には、こちらの記事を見ながらインストールを進めていきました。

初心者がLaradockでLaravelを開発するための準備の仕方をまとめるよ | 東京上野のWeb制作会社LIG
https://liginc.co.jp/465420

トラブル1 docker-compose でエラー

$ docker-compose up -d nginx mysql phpmyadmin

まず、これでエラー発生。

ERROR: Couldn't connect to Docker daemon at http+docker://localunixsocket - is it running?
If it's at a non-standard location, specify the URL with the DOCKER_HOST environment variable.

調べます。調べますったら!

どうもグループ設定があかんらしいので、下記記事を見て対処しました。(PC再起動もしました。)

Ubuntu18.04.1でDockerとdocker-composeをインストールする方法 | Awesome Blog
https://awesome-linus.com/2019/03/22/ubuntu-docker-docker-compose-install/#toc_id_7

トラブル2 docker-compose でエラー再び

気を取り直して実行

$ docker-compose up -d nginx mysql phpmyadmin

動きました!

動きましたがエラー発生しました!

Building workspace
Step 1/219 : ARG LARADOCK_PHP_VERSION
Step 2/219 : FROM laradock/workspace:2.5-${LARADOCK_PHP_VERSION}
ERROR: Service 'workspace' failed to build: manifest for laradock/workspace:2.5-5.7 not found

調べます!調べます!

どうも php のバージョンと、workspace が絡んでいるエラーらしい。(ちなみに docker のことは、薄ぼんやりと『環境構築のパーツセット』的に思っている以外、ほとんど知りません。)

phpのバージョンが古いことが原因かも?

ということで、下記記事を発見。

workspace base image not found · Issue #1616 · laradock/laradock · GitHub
https://github.com/laradock/laradock/issues/1616

.env の PHP_VERSION を 5.6 から 7.2 に変更 しまて再び docker-compose 実行。

$ docker-compose up -d nginx mysql phpmyadmin

動き出しましたやん。

が、終わらへん。

暇なので、下記記事を熟読~。

基本のタスクリスト 5.2 Laravel
https://readouble.com/laravel/5.2/ja/quickstart.html

docker-compose の終了まで、たっぷり 45分かかりました。(そんなものでしょうか?)

その後は、dockerコンテナの起動確認、そして workspaceコンテナにて、Laravelのインストール。

そしたら、あっという間の二時間が経過しておりました。

反省

2時間でできることは限られるのですが、一週間ごとの忘れかけた頃に作業を行うことで、脳への定着が図れるのではないかと期待しています。

遭遇するトラブルも多いですが、調べると解決策が見つかることが多いですね。

今日『基本のタスクリスト 5.2 Laravel 』を見て気づいたのは、Laravel の viewクラスには、phpコードを直接記述しなくても良いことです。

phpプログラミングの際に、phpコードと html の混在を大きなストレスに感じていましたので、これはノンストレス。非常にありがたいですね。

かなり昔に書いたコードは、php と html, css, javascript が混在していて、カオス状態でした……。

次回は、今日の続きを終わらせて、『基本のタスクリスト』を動かしたいです。

また、大人プログラミング部に参加してきました!

こんにちは。山崎 代三です。

暑いのでしょうか、涼しいのでしょうか、湿度が高いことは確かなようです。

8月31日も今プラスさんの『大人プログラミング部』に参加してきました。

今回やったことは前回の続きで、phpunit を使ったテストプログラムの入力と確認です。

プログラムの入力は、ATOM とか PHP Stormとか使うと早いんでしょうけど、環境構築が面倒なので レンタルサーバーにssh接続したターミナル画面から edit で手打ちしています。

タイプミスや設定ミスによる想定外のトラブルがあり、それらのトラブルへの対処がとても良い経験となっています。

今回は、参考記事サイトの URLバリデーション時のテスト で止まってしまいました。書いてある通りに エラートラップ(try catch)してくれないのです。いろいろ調べるとエラートラップでのバリデーションテストは一般的では無い感じ……。

参考記事(外部サイト):

はじめてのLaravelアプリケーションガイド

大人プログラミング部@今プラスさん に参加!

こんにちは。山崎代三です。

昨8月17日は、地元、滋賀県湖南市のコワーキングスペース 今プラス さんが主催された、『大人プログラミング部』に参加してきました。(カバーイメージの『大人プ部』は私が勝手に短縮しました!)

大人プログラミング部は、何をする集まりかと言うと、いわゆる『モクモク会』でして、みんなで集まり2時間 勝手にプログラミングの勉強をするというものです。

ただ、集まりの始まりと終わりに、其々の目標や予定や進捗状況を発表し合うことで、モチベーションの維持を図ります。

到着するなり、「自己紹介、長期目標、今日の予定を書いてください〜」と言われ、長期目標なんかまったく考えていなかった私は、勢い余って『Laravelを極める』と書いてしまったのでした。

大丈夫やろか?

実はこの日のために数日前から、「アプリ?ウェブサービス?地域情報?」とまぁ、いろいろイロイロ悩みました。

が、自分のモチベーションが強く上がる要素を見つけることができず……。

「とりあえず、経験の長い PHP だったら何とかなるかな〜?」「じゃあ、やった事が無い『フレームワーク』とかやってみるか!」「Laravelとかいいよね〜」「だよね。語感がフランス語っぽいし(笑)」(独り会話です。)

語感はともかく、今、PHP のフレームワークを勉強するとなったら、Laravel 一択みたいです。

という流れで、 下記の記事などを参考に、サーバーへのインストールからチュートリアルの途中まで済ませて出席しました。

参考記事(外部サイト):

さくらのレンタルサーバーにLaravelインストールする方法

はじめてのLaravelアプリケーションガイド

そして当日、どこまでできたかと言いますと、『はじめての……』のテストプログラムの作成直前までです。

次回以降は、テストプログラムの作成、Laravel公式のチュートリアル、キャッシュ操作、という感じで進めていきたいと思ってます。

滋賀県では、IT系、プログラミング系の集まりが皆無でちょっと寂しい思いをしていました。

こういうことを、やりたかったんです。

中野さんに感謝!

あと、いっしょにモクモクしてくれる人も募集してます。

今プラス 大人プログラミング部

『脱Excel』のソフトな痛みを感じた Japan IT Week 春 後期

楽譜の通信販売店アムレスの店長、そして teffs.jp でSE的お仕事を始めようとしている 山崎 代三です。

令和10連休GW明けの 5月8日、 東京ビッグサイト(青海棟、西展示棟、会議棟)で行われた、『Japan IT Week春 後期』に行ってきました!

そもそも Me は何しに東京へ

今回の目的は、お仕事的には二つあります。

一つは、『楽譜の通信販売店アムレス』に利用できそうなサービスの調査。

そしてもう一つは、この事業(teffs.jp)を行うための市場調査です。

Japan IT Week 春 後期 とは

『Japan IT Week 春 後期』とは、リード エグジビジョン ジャパン株式会社さんが主催されている、ビジネス(商談)目的のIT関連の展示会です。

ITに関するビジネスが複数のテーマに分けてブース配置されています。(よくもこんなに多くのカテゴリーがあるものだと関心します。)

  • ビッグデータ活用 展
  • クラウド コンピューティングEXPO
  • ソフトウェア&アプリ開発 展
  • AI・業務自動化 展
  • 情報セキュリティEXPO
  • データストレージEXPO
  • データセンター展
  • Web&デジタルマーケティングEXPO
  • 店舗ITソリューション展
  • モバイル活用展
  • 通販ソリューション展

そして、展示と同時に、特別講演も開催されています。

今回は、データセンター展 以外はほぼすべてのブースを見て回りました。

また、特別講演は『ソフトウェア開発の未来』ということで2名の方の講演を聴いてきました。

成果

大規模な展示会の見学は昨秋の『楽器フェア』以来でしたが、業界で働いている人に接することができますし、その業界を俯瞰できるので、モチベーションの維持には良いですね。

偶然、地元滋賀県内の知人にも会えました。お勤め先がブース出展されていました。

『楽譜の通信販売店アムレス』で利用させていただけそうなサービスは見つけられなかったのですが、いくつかサービス改善のアイデアを得ることができました。(ビジネス目的の展示会なのに申し訳ないです。)

心に残ったキーワード

EXCEL, RPA, AI, 自動化, 働き方改革, チャットボット, メール

感想

全体的に日本の会社が多かった印象です。欧米系の大手をほとんど見なかったのが意外でした。(Salesf○rceさんとか、ありませんでしたね……。)

モバイル活用展に『端末・周辺機器ゾーン』というのがありまして、そこは中国企業ばかりが密集しておりました。

諸外国のパビリオンブースもありましたが、南米系やインド系の企業は出ていなかったような気がします。

そして実は特別講演『ソフトウェア開発の未来』にとても期待していたのですが、あまり未来を感じることができませんでした。

展示会での Excel 連呼(「今 Excel で行っている作業が云々」≒脱Excel)が聞こえるにつれ、「IT化はまだそこだったのか」との思いが頭を過りました。

付属調査 ノベルティグッズナンバーワンは?

ペンに始まる文具、スナック菓子、スマホスタンド、団扇、布袋など、ノベルティグッズの配布攻勢がもの凄いですね。

ノベルティグッズを配布している会社の割合は、楽器フェアよりも明らかに多いです。

入場してすぐは、コンパニオンの女性に微笑みかけられながら「どうぞ〜」と差し出されたグッズや資料を、「はいはい〜」とか言いながら (&ニマニマしながら) 受け取っていたのですが、これでは余計な資料やセールスが増えるだけだと反省し、基本的に気になったサービスの資料だけを受け取るようにしました。

ノベルティグッズを受け取った瞬間、会話も無しに名札のバーコードをスキャンされたり……。ちょっと恐いですね(笑)。

私はいただきませんでしたが、私が見た中で一番高そうなノベルティは、S○Yさんのドリンクボトルでした。S○Yさんは東京駅での広告も大々的ですね。(これ以上はえげつないので自粛。)

まとめ

あれだけ Excel が連呼されているということは、まだまだ IT 化の余地があるということですから、teffs.jp のお仕事的には安心材料ではあります。

来年の1月に『Japan IT Week 関西』が開かれるらしいので、もしかしたら行くかも知れません。

リンク集

Japan IT Week 春 – すでに2020年の案内に切り替わっています。仕事が早い!
Japan IT Week 関西 – 関西ならではのサービスを見つけられるでしょうか?!
スタジオ・ウミさん – 滋賀県に開発拠点あり。Drupal 専門。
楽譜の通信販売店アムレス – 弊社の EC サイトです。

初心者に優しい Kansai WordPress Meetup@京都

画像はイメージです

スタスタ、ドキドキ。

この年齢(55)でも、初参加・初対面の人ばかりのイベント参加にはドキドキするんです。

だいたいにおいて、場所が京都の烏丸四条の町家にあるコワーキングスペース。Google Mapがあるにしても京都独自の住所表記法の上ったり下ったり……たどり着けるんやろか……。

一緒に京都に来た妻と娘とマンガミュージアムの辺りで別れ、なるべく大股でスタスタと早歩きしまして、案の定、GoogleMapさんのピンポイント位置は建物からずれておりましたが、なんとか、開催時刻までに着座できました。

会場である『コワーキングスペース 京創舎』さんのイベントスペースは満席で、とても良い感じでイベントが始まりました。(そしてこの記事を書いている今に思う、写真を撮っておけば良かった……。)

そもそも Me は何しに京都へ?

2012年までは WordPress version 3 でアムレスのブログサイトを運営していたんです。

その後、ECシステム変更のためそのブログサイトを閉鎖し、ECシステムのブログプラグインを使い始めたのですが、イマイチ使いづらい。(プラグインの更新をサボっていたことも原因の一つです。)

今年になってやはり ブログサイトがある方が良いのではないかと思いたち、Blogger で立ち上げたんです。

で、このサイト teffs.jp を作るために 4月に WordPressを触ったのですが……。やはり WordPress は Blogger よりも使い勝手が良い。

Web 周辺の仕事を始めたら WordPress を避けて通るわけにはあかんな〜。これはもう少し WordPress を勉強せなあかんな〜。

と思っていたら、いつの間にやら WordPress のダッシュボードに、京都で開催されるイベントの案内が出てきているではありませんか!

(ダッシュボードのイベント案内でこのイベントを知った方が何名もいらっしゃいました。)

ということで、連休の最中ではありますが 2019年5月5日(日)、CMSで現在シェア No.1(6割!)と言われている WordPress の現状を探るために MeetUp が開催された京都まで行きましたんです。

それでは、イベントの概要をご紹介〜。

自己紹介タイム

後から遅れて参加された方も数名いらっしゃいましたが、とりあえずこの時点の参加者はコーディネイターさんや私を含めて20名。この20名で、簡単な自己紹介タイムがありました。

WordPressでのサイト構築をお仕事にされている方、仕事用のウェブサイトを WordPressで構築している方など、いろいろな立場の人がいらっしゃいました。

地域的には京都、大阪の人が多かったです。あとは神戸。滋賀からは私を含め2名!

トークセッション

#1 進め!テーマ作成の道

by Hさん(Web Creator)

初心者の人が WordPressのテーマ作成のために何をどうしたらええんかな、という、今の私の状況にドンピシャのお話でした。

キーワードメモ:flywheel, WordPress Codex, functions.php, Theme Check プラグイン, テーマユニットテスト(ダミーデータ生成), 英語, スプラトゥーン

#2 WooCommerce のテーマカスタマイズ

by Tさん(WooCommerce コアコントリビューター)

コアコントリビューターさん&ECサイト構築歴が長い、ということで、テーマのカスタマイズ以外にもいろいろなお話を伺えました。

キーワード:公式推奨方法と非推奨方法, YouTubeにチュートリアル, セキュリティ, コアアップデート, プラグインの信頼性, 保守契約, ステージング, 商品点数, WooCommerce MeetUp, 英語, 東京集中

交流会

トークセッション後の交流会では参加者の一部と直接お話ができました。和気あいあいとして良い雰囲気だったと思います。

WordPress 初心者さんが多いのであまり専門用語が飛び混じらず、会話に入りやすかったのも助かりました。

今回お話ができなかった方とは、次回以降にぜひお願いいたします。

まとめとお礼

トークセッション開始前に全員の自己紹介があったのは助かりました。また、イベント全体を通して初心者への配慮が随所に感じられました。

イベント運営者のお二人とトークセッションをされたお二人に感謝いたします。

リンク集