泳げないたいやきの日記

趣味でCSを勉強したことをまとめるノートです。誤字脱字や、誤った記事などがあればご教授いただますと幸いです。

MacにphpMyAdminをインストール

環境  

macOS Big Sur 11.4

MySQL 8.0.25

phpMyAdmin 5.1.1

 

1. phpMyAdminのインストール

ターミナルにて「brew install phpmyadmin」を入力します。

入力後、phpMyAdminのインストールが始まり、最後の方に

To enable phpMyAdmin in Apache, add the following to httpd.conf and

restart Apache:

    Alias /phpmyadmin /usr/local/share/phpmyadmin

    <Directory /usr/local/share/phpmyadmin/>

        Options Indexes FollowSymLinks MultiViews

        AllowOverride All

        <IfModule mod_authz_core.c>

            Require all granted

        </IfModule>

        <IfModule !mod_authz_core.c>

            Order allow,deny

            Allow from all

        </IfModule>

    </Directory>

Then open http://localhost/phpmyadmin

と表示されます。

 

2.  apache2のhttpd.confを編集

httpd.confファイル内に

 

Alias /phpmyadmin /usr/local/share/phpmyadmin

    <Directory /usr/local/share/phpmyadmin/>

        Options Indexes FollowSymLinks MultiViews

        AllowOverride All

        <IfModule mod_authz_core.c>

            Require all granted

        </IfModule>

        <IfModule !mod_authz_core.c>

            Order allow,deny

            Allow from all

        </IfModule>

    </Directory>

を追記して保存します。

 

3. apache2の再起動

httpd.confファイルに追記した後、apache2を再起動をしてブラウザで「localhost/phpmyadmin」と入力をし、phpMyAdminを使用しようと思ったが、下のような画面が出力されてしまい使用できませんでした。

f:id:OyogenaiTaiyak1:20210616073751p:plain

Index of phpMyAdmin

 

4.  再び、apache2の設定

他にも設定が必要なのだと思い試行錯誤していました。

 

/etc/apache2/内にあるhttpd.confファイル内の

「#LoadModule php7_module libexec/apache2/libphp7.so」を

「LoadModule php7_module libexec/apache2/libphp7.so」のようにコメントアウトを外し、保存しました。

 

その後、apache2を再起動し、もう一度ブラウザでブラウザで「localhost/phpmyadmin」をしたところ、phpMyAdminのログイン画面を出力する事ができました。

f:id:OyogenaiTaiyak1:20210616074329p:plain

phpMyAdminのログイン画面

 

MySQLのユーザ設定について(Mac)

環境

macOS Big Sur 11.4

MySQL 8.0.25

前提条件

MySQLをインストールし、起動している状態

・ローカルホストのユーザの作成

 

1.  ユーザの作成

MySQLのコマンド入力モードにて、

mysql>  CREATE USER 'pomupomu'@localhost IDENTIFIED BY 'testPassword';

と入力します。

pomupomu  : ユーザ名

testPassword : パスワード

 

入力後に、「Query OK, 0 rows affected 」と表示されたらユーザの作成は完了です。

 

2. ユーザの確認

MySQLのコマンド入力モードにて、

mysql>  SELECT user, host FROM mysql.user;」と入力します。

入力後に、

+------------------+-----------+

| user             | host      |

+------------------+-----------+

| mysql.infoschema | localhost |

| mysql.session    | localhost |

| mysql.sys        | localhost |

| pomupomu         | localhost |

| root             | localhost |

+------------------+-----------+

と表示されます。

無事に「pomupomu」の名前がある事を確認できました。

 

3. ユーザの削除

MySQLのコマンド入力モードにて、

mysql>  DROP USER pomupomu@'localhost';」と入力します。

 

※上記のコマンドで削除できるのですが、確認の為に「mysql> SELECT user, host FROM mysql.user;」と入力したところ、

+------------------+-----------+

| user             | host      |

+------------------+-----------+

| mysql.infoschema | localhost |

| mysql.session    | localhost |

| mysql.sys        | localhost |

| root             | localhost |

+------------------+-----------+

と表示され、「pomupomu」の名前が削除されていました。

 

MacにMySQLをインストールについて

環境

macOS Big Sur 11.4

MySQL 8.0.25

 

1. mac内にMySQLが入っているかの確認

ターミナルにて「mysql  --version」を入力します。

「-bash : mysql: command not found」と表示されたので、

MySQLがインストールされていない事が確認できました。

 

2.  MySQLをインストール

Homebrewを使い、MySQLをインストールします。

(Homebrewのインストールについては、詳しく記事を書いている方がいるので割愛します。)

ターミナルにて「brew install mysql」と入力します。

インストール完了後に、再び「mysql  --version」をターミナルに入力すると、「mysql Ver 8.0.25」とバージョンが表示されました。

これで、インストールは完了です。

 

3. MySQLの起動

インストールが完了したら、MySQLを起動させます。

ターミナルにて「mysql.server start」と入力します。

MySQLが起動に成功すると「Starting MySQL .SUCCESS!」と表示されます。

 

4. MySQLにログイン

MySQLのインストール後、初めてのログインなので、初期設定の「root」ユーザでログインします。

ターミナルにて、「mysql -u root」と入力します。

ログインが成功すると「Welocom to the MySQL.    ・・・ mysql> 」と表示されます。

 

5. MySQLのコマンド入力モードの解除

MySQLのコマンドモードを解除したい時は、「mysql> exit;」と入力します。

その後、「Bye」と表示されたらコマンド入力モードは解除され、ターミナルに戻ります。

 

6. MySQLの停止

最後に、ターミナルにて「mysql.server stop」と入力します。

「Shutting down MySQL . SUCCESS!」と表示され、MySQLは停止します。

 

 

phpMyAdminにログインできない

環境

macOS Big Sur 11.4

MySQL 8.0.25

 ・PHP 7.3

 

1. phpMyAdminでの初めてのログイン

phpMyAdminにてログインをしたら、「MySQLサーバーにログインできません」、「mysqli::real_connect(): (HY000/2002): No such file or directory」というエラーが表示された。

f:id:OyogenaiTaiyak1:20210616174028p:plain

エラー2002

 

解決策

【phpMyAdmin】No such file or directory | ミーミルの泥泉

上記のURLの記事の方法を使用させていただき、

share/phpmyadmin/内のconfig.inc.phpファイルの一部分を変更しました。

$cfg['Servers'][$i]['host'] = 'localhost';

                 ↓

$cfg['Servers'][$i]['host'] = '127.0.0.1';

 

2. phpMyAdminでの2度目のログイン

127.0.0.1に変更してから再度ログインしたら次は、

「mysqli::real_connect(): The server requested authentication unknown to the client [chasing_sha2_password]」

「mysqli::real_connect(): (HY000/2054): The server requested authentication method unknown to the client」というエラーが表示されました。

f:id:OyogenaiTaiyak1:20210616174102p:plain

エラー2054

 

解決策

my.cnfに「default_authentication_plugin=mysql_native_password」を追記し、MySQLを再起動したところ、無事にログインできました。

※追記する場所は、どこでも良いみたいです。 

 

追記

MySQLの設定ファイルmy.cnfを探す方法

mysql --help | grep my.cnf」をターミナルに入力します。

入力すると「ordere of preference, my.cnf, $MYSQL_TCP_PORT,

/etc/my.cnf   /etc/mysql/my.cnf     /usr/local/etc/my.cnf    ~/.my.cnf」と

ファイルがある場所を表示してくれました。

 

参考文献

 

 

toaruhetare.net

qiita.com

動的なwebサイトを初めて作成した話

 作成しようと思った経緯

最近、生物学に興味が湧いたのでHTML+CSSPHPMySQLAWSで顕微鏡を使用して撮影した写真を文章と一緒に投稿が可能なブログのようなサイトを作ろうと思いました。

※主は、エンジニアではありません。

 

 

開発環境(1つ目)

macOS Big Sur 11.4

・Apache2.4

MySQL 8.0.25

 ・PHP 7.3

 

開発環境(2つ目)

centOS 7.6

・Apache2.4

MySQL 8.0.25

 ・PHP 7.3

 

本番環境

Amazon Linux2

・Apache2.4

MySQL 8.0.25

PHP 7.3

 

 

 

作成中の記録

1日目(macbookを使用)

mackeynoteを使用して、サイトの大まかな構成を作成しました。

いろいろな機能が欲しいな〜と思いつつも、とりあえずシンプルに動くものを最初に作ろうと思い、構成はシンプルにしました。

f:id:OyogenaiTaiyak1:20210722160936p:plain

簡単な構成図

 

2日目(macbookを使用)

HTMLとCSSで、インデックスや投稿したい文と写真が表示できるページの作成をしました。

 

3日目(macbookを使用)

投稿した文と写真を表示するページのレイアウトが好みではなかったので、試行錯誤していました。

以前に登山中に撮影した写真をヒーローイメージにしたら見栄えがよくなりました。

(登山中に写真を撮っていた過去の自分に感謝です。)

掲示板を作成するにはPHPMySQLが必要なのですが、両方とも使用した事がないのでオライリーの「初めてのPHPMySQLJavaScriptCSS」を購入しました。

 

4日目(centOS7を使用)

掲示板の文章を保存するのにDBが必要だが、MySQLとはなんぞやという感じなので、オライリーの「初めてのPHPMySQLJavaScriptCSS」を読みつつ、centOS7にLAMP環境を構築しました。

 

 

5日目(centOS7を使用)

PHPMySQLの接続を行う練習をしました。

 

PHPのフォームが文字化けで表示されてしまった

MySQL文字コードをutf8にして、

PHPphp.iniのmbstringsもutf8にしたが文字化けが直りませんでした。

最終的な文字化けの対処は、meta charset ute-8を設定した事で直りました。

 

7〜10日目(centOS7を使用)

グレイコードさんのサイトを見ながら、掲示板の作り方を練習しながら学びました。

ここでは、centOS7にLAMP環境を構築して練習していました。 

phpMyAdminのインストールに少し躓きましたが、ファイルをインストールして、unzipで解凍し、/var/www/htmlにphpMyAdminのファイルを移動したら起動できました。

 

11日目(macbookを使用)

macOSApacheMySQLPHPをインストールしました。

インストール時につまづいた箇所を別のハテナの記事に書きました。

 

12〜20日目(macbookを使用) 

7〜10日目にグレイコードさんのサイトで学んだ事を参考にし、PHPMySQLを自身のサイトに実装しました。

macOSの環境に実装していく事に少し手間取りましたが無事に実装できました。

 

 

21日目

デザインの本を読みながらCSSを使い、サイトのデザインを変更しました。

本を読んでいるとwebサイトの配色は3〜4色が扱いやすく、さらに見やすくて良いと書いてあったので、自然をイメージしやすい緑色や茶色をベースとした配色にしました。

現時点の配色では多様な色覚に配慮できていないので、今後改善する際には配慮をした配色にしたいと考えています。

デザインの本を一冊読んでみましたが、レイアウト・色・書体・画像について知らない事が多くあり、とても奥が深いと感じました。

 

22日目(macbookを使用)

Sketchの使い方の本を読みながらデザインツールであるSketchを使い、サイトに使う画像を作成しました。

f:id:OyogenaiTaiyak1:20210724204544j:plain

Sketchで作成したアイコン1

f:id:OyogenaiTaiyak1:20210724204620j:plain

Sketchで作成したアイコン2


 

23〜25日目(Amazon Linux2を使用)

AWSのEC2を使用したことがなかったので、EC2インスタンスの作成の方法・ターミナルの使用方法・コマンド操作の方法などの基本的な事をEC2を動かしながら学びました。

学んだ後に実際に本番環境用のEC2インスタンスを作成し、LAMP環境を構築し、gitからwebサイトのファイルをクローンしました。

 

26、27日目

EC2上に構築したwebサイトを公開しようとしたが、AWSLinuxのセキュリティについて不安だったので、Linuxの本を何冊か読んだり、AWSのドキュメントを読みながらセキュリティのレベルを向上させました。

 

28日目

AWSのRoute53を使用し、ドメイン名を取得しました。

相場がわからないので高いのか安いのかは不明ですが、1年のドメイン使用料は12ドルでした。

 

29日目

作成したwebサイトをHTTPS化をしたかったので、AWSのRoute53・AmazonCertificateManager・ElasticLoadBalancerを使用しました。

無事にwebサイトをHTTPS化できたので、ここでひとまず完成とします。

 

完成

HTML+CSSPHPMySQLAWSを使用して作成したサイトの画像です。

f:id:OyogenaiTaiyak1:20210722173835p:plain

作成したwebサイト



 

感想

今までLAMP環境を使用した動的サイトを作成した事がなく、様々な箇所でつまづいてしまい大変でしたが、webサイトを公開できて嬉しいです。

(上手い下手に関わらず、とりあえず最後まで完成させようという精神状態でした。)

普段、日常で使用しているwebサイトが多くの時間や人員、技術、知識の上で成り立っているという事を改めて実感しました。

 

 

 

 

参考図書

  • 初めてのPHPMySQLJavaScriptCSS - 著Robin Nixon
  • AWSではじめるLinux入門ガイド - 著トレノケート株式会社山下光洋
  • パーフェクトPHP - 著小川雄大/柄沢聡太郎/橋口誠
  • CSSグリッドで作るHTML5&CSS3レッスンブック - 著エビスコ
  • UIデザイナーのためのSketch入門&実践ガイド - 著吉竹遼
  • いちばんよくわかるWebデザインの基本きちんと入門 - 著伊藤庄平
  • centOS7で作るネットワークサーバ構築ガイド - 著サーバ構築研究会
  • 標準テキストcentOS7構築・運用・管理パーフェクトガイド - 著有限会社ナレッジデザイン大竹龍史/市来秀男/山本道子/山崎佳子

 

 参考文献 

Linuxについて

qiita.com

qiita.com

Apacheについて

www.rem-system.com

 

MySQLについて

dev.mysql.com

 

www.dbonline.jp

 

qiita.com

 

note.com

 

onoredekaiketsu.com

 

 PHPについて

qiita.com

 

gpaim.com

 

www.bnote.net

 

EC2について

AWS(EC2)を立ち上げてPHPを動かす話 - Qiita

 

qiita.com

 

 

qiita.com

 

qiita.com

aws.amazon.com

qiita.com

 

itneko.com

 

miyabi-lab.space

 

docs.aws.amazon.com

 

n2p.co.jp

 

qiita.com

 

www.acrovision.jp

 

qiita.com

 

セキュリティについて

dev.classmethod.jp

 

www.ipa.go.jp


aws.amazon.com

 

www.early2home.com

 

HTTPS化について 

dev.classmethod.jp

 

dev.classmethod.jp

 

qiita.com

 

最後に

大勢の方のブログや文献や書籍を読ませていただくことで作成する事ができました。

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

 

なでしこのインストール(Mac)

初めに

日本語で書くことができる「なでしこ3(HTML5/JS)」という言語があることを知り、触れてみたいと思い、「なでしこ3(HTML5/JS)」の実行環境を整えてみました。

この記事では実行環境を整える手順や、つまずいた箇所を書いていきたいと思います。 

 

環境 

PC:MacBook Pro

OS:macOS Big Sur 11.1

CLT:1103.0.32.59

 

実行環境を整える手順

1:Homebrewをインストールする。

 様々な方がHomebrewの記事を詳しく書いているので省略させていただきます。

2:Homebrewを使って、Nodebrewをインストールする。

ターミナルに

brew install nodebrew」

と入力する。

Nodebrewのインストールでつまずいた箇所

問題点

Nodebrewのインストール中に、

    Error: Your CLT does not support macOS 11.

    It is either outdated or was modified.

    Please update your CLT or delete it if no updates are available.

    Update them from Software Update in System Preferences or run:

      softwareupdate --all --install --force

 

    If that doesn't show you an update run:

      sudo rm -rf /Library/Developer/CommandLineTools

      sudo xcode-select --install

   訳:CLTをアップデートしてね(誤っていたらすいません)

というエラーが表示された。

 

解決策

 エラーを解決するために

「sudo rm -rf /Library/Developer/CommandLineTools」

「sudo xcode-select --install」

とエラーに記述してあるコマンドをターミナルに入力しました。

入力を行うと、CLTの削除とインストールが始まります。

完了するとnodebrewが無事にインストールできました。

 

因みにCLTのバージョンは、

変更前のバージョン:1103.0.32.59

変更後のバージョン:12.3.0.0.1.1607026830

と変更されました。

 

確認のために

「nodebrew --version」

を入力した所、バージョンが正しく表示されました。

 

 

3:Node.jsのインストールを行う。

ターミナルに

「nodebrew install-binary stable」

と入力する。

入力するとNode.jsの安定版が手に入ります。

他にも、Node.jsの特定のバージョンや、最新版をインストールする方法があるらしいです。

 

Node.jsのインストールでつまずいた箇所:その1 

問題点

Warning: Failed to create the file 

という警告が表示されました。

 

解決策

解決するために

「mkdir -p ~/.nodebrew/src」

とターミナルに入力を行い、ファイルを作成しました。

再び、

「nodebrew install-binary stable」

と入力すると、Installed succesfullyと表示されたので、インストールが完了しました。

 

Node.jsのインストールでつまずいた箇所:その2

問題点

Node.jsのインストール後に

「node -v」

を入力し、Node.jsのバージョンを確認しようとした。

しかし、node: command not foundと表示され、バージョンが表示されませんでした。

 

解決策

解決するために

「nodebrew use stable」

と入力する。

上記のように入力する事で、使用するNode.jsのバージョンを決定する事ができる。

無事に「node -v」でNode.jsのバージョンが表示する事ができました。 

4:なでしこをインストールする。

ターミナルで、

「npm install -g nadesiko3」

と入力する。

5:なでしこを使う。

なでしこをインストール後、ターミナルで、

「nako3edit」

と入力する。

入力後に、ブラウザ上にエディタが表示される。

 

無事に「こんにちは 世界」と表示することができました。

f:id:OyogenaiTaiyak1:20210124164953p:plain

Hello World

 

最後に

今回、初めてNode.jsや「なでしこ」の実行環境を整えました。

つまずいた箇所も多々ありましたが無事に解決できてよかったです。

 

参考文献 

github.com

www.webdesignleaves.com

qiita.com

Sketchを学割で使おう

始めに

Webサイトで使用する画像をSketchを使って作成しようと思いました。

 

学割で購入までの手順

1.Sketchのホームページに入る

 

2.Pricingを押す。

 

3.Pricing内の中部にあるEducation Discountを押す。

f:id:OyogenaiTaiyak1:20201202150248p:plain

Education discount

 

4.Student/Teacher/Staffを選択すると、7つの入力項目があるので入力する。

  • Your full name:ローマ字で名前を入力
  • Your email address:大学のメールアドレスを入力しました。
  • Educational institution:大学の名前を英語で入力しました。
  • Country
  • Course you're enrolled in:学科名を英語で入力しました。
  • Proof of student:学生証の写真を添付する。

  • Addtional comments:備考欄

 

※私は、コロナウイルスの影響で学生証をまだ受けとっておらず入学教科書の写真をProof of studentに添付して申し込みをしましたが、後に「学生証の写真を送って欲しい」というメールが届きました。

そこで、私はコロナウイルスの影響で大学の方に行けずにまだ学生証を受け取っていないという事と、使用しているアドレスが大学のアドレスという事を拙い英文で書き、大学の学生管理システム上にある学生カルテの写真を添付してメールをしたところ承認をしてもらう事ができ、無事に学割のクーポンコードを手に入れる事ができました。(Sketchさん本当にありがとうございます。)

 

5.承認されると学割のクーポンコードがメールで届く。

 

6.Sketchのソフトウェアを起動すると料金支払いの画面が出てくるので、その画面内にある「クーポンコードの更新」という欄に学割のクーポンコードを入力する。

f:id:OyogenaiTaiyak1:20201202150321p:plain

料金支払い画面

 

7.料金を支払い後、ライセンスキーがメールで届き、Sketchのソフトウェアにキーを入力する事でSketchを使う事ができる。

 

 

最後に

 少し戸惑った場所もありますが、無事に学割の値段でSketchを使えてよかったです。