環境構築｜ミトラボ https://mito-lab.com フリーランスWebデザイナーの実験と備忘録 Thu, 02 Sep 2021 04:11:08 +0000 ja hourly 1 https://wordpress.org/?v=5.6.17 https://mito-lab.com/wp-content/uploads/2019/11/cropped-fav_mitolab2.0-1-32x32.jpg 環境構築｜ミトラボ https://mito-lab.com 32 32 【わかりやすく解説】PHPを使ってローカル環境のMAMPからメールを送信するための設定方法 https://mito-lab.com/mamp-email/ https://mito-lab.com/mamp-email/#respond Thu, 02 Sep 2021 04:11:08 +0000 https://mito-lab.com/?p=3066 こんにちは、mito(@mito_works)です。

PHPを使って制作をしている中で、お問い合わせフォームを作りたいということ、よくあると思います。

momo
momo
設定をしないとローカル環境からはメール送信の確認はできないよ！
mito
mito
設定ファイルをいじると、ローカル環境からでもメール送信テストが可能になります。

今回は、ローカル環境からメールを送信するための設定方法を確認します。

環境の確認

使うツール、サービス

  • Mac
  • MAMP
  • Gmail
  • Postfix

 

momo
momo
Postfixとはメールを転送するソフトウェアのことだよ！Macではデフォルトでインストールされているよ！
mito
mito
今回はこのPostfixの設定を変えることでローカルのMAMPからでもメール送信可能にしていきます。

設定手順

MAMPを止める

MAMPが立ち上がっている場合はMAMPをStopしてください。

Gmailのアプリパスワードを取得する

momo
momo
アプリパスワードとは、安全性の低いアプリやデバイスにGoogleアカウントへアクセスを許可する16桁のパスコードだよ！
mito
mito
つまりGmailはメールを送信する際に認証が必要になるということです。
  • STEP1
    ブラウザでGoogleアカウント管理を開く
  • STEP2
    左のタブのセキュリティーをクリックし、アプリパスワードをクリック
  • STEP3
    アプリパスワードを生成するアプリとデバイスを選択し、生成ボタンクリック
  • STEP4
    生成されたアプリパスワードをコピー

    ※閉じてしまうとパスワードは再表示されないので、開きっぱなしをオススメします。

    万が一画面を閉じた場合は、アプリパスワードを一回削除してもう一回作り直しましょう。

momo
momo
アプリパスワードが使えないエラーが出る人は、アカウントの2段階認証を行なっていないことが原因だと思うのでまずは2段階認証の設定をしてね！

Postfixの設定にgmail情報を追加する

修正ファイルは、以下のファイルパスにあるファイルです。

/private/etc/postfix/main.cf
  • STEP1
    ファイダーからフォルダ移動で開く

    ファイダーで、移動＞フォルダへ移動し、表示されたウィンドウに/private/etc/postfix/と入力

     

  • STEP2
    main.cfを開き以下のコードをファイルの最後に付け足し、ファイルを上書き
    # Gmail on MAMP
#
myorigin = gmail.com
myhostname = smtp.gmail.com
relayhost = [smtp.gmail.com]:587
smtp_sasl_auth_enable = yes
smtp_sasl_password_maps = hash:/private/etc/postfix/アプリパスワード
smtp_sasl_security_options = noanonymous
smtp_sasl_mechanism_filter = plain
inet_protocols = all
smtp_use_tls = yes
smtp_tls_security_level = encrypt
tls_random_source = dev:/dev/urandom

    hash:/private/etc/postfix/アプリパスワード

    ↑ここには先ほど取得したアプリパスワードを入れます。（余白は不要です。）

    mito
    mito
    アクセス権を変更しなければ上書きできないと思うので、フォルダ名、ファイル名それぞれ右クリックし、「情報を見る」からダイアログ右下の鍵アイコンをクリック。「共有とアクセス権」の「読み出しのみ」を「読み/書き」に変更しましょう。

取得したアプリパスワードを記述するためのファイル作成

  • STEP1
    新規ファイルを作成する

    /private/etc/postfix/ の直下に新規ファイルを作成します。

    ターミナルを立ち上げ、(「アプリケーション」→「ユーティリティ」→「ターミナル」)以下を入力します。

    sudo vim /private/etc/postfix/アプリパスワード

     

    momo
    momo
    アプリパスワードは先ほど生成したパスワードだよ！
  • STEP2
    新規ファイルの中身を編集

    iキーでINSERTモードにし、

    [smtp.gmail.com]:587 メールアドレス@gmail.com:アプリパスワード

    こちらをコピペで入れます。メールアドレスは受信したいメールアドレス。アプリパスワードは生成したパスワードにおきかえます。

  • STEP2
    編集を完了し、閉じる

    Enterキーを押し、wqを押して終了します。

    mito
    mito
    /private/etc/postfix/にアプリパスワード名でファイルができています。
  • STEP2
    データベース作成

    ターミナルを起動します。

    sudo postmap /private/etc/postfix/アプリパスワード

    以下を実行します。

    mito
    mito
    /private/etc/postfix/にアプリパスワード名.dbというファイルができています。
momo
momo
ここまででPostfixの設定は終わりだよ

テストメールの送信

きちんと設定ができたか確認します。

ターミナルから、以下を実行します。

date | mail -s test 受信したいアドレス@gmail.com

送信日時が書かれたメールが届いたら設定はOKです。

momo
momo
お疲れ様でした〜。
]]> https://mito-lab.com/mamp-email/feed/ 0 MacにWindows10をインストール｜BootCampのやり方解説 https://mito-lab.com/windows10-bootcamp/ https://mito-lab.com/windows10-bootcamp/#respond Wed, 22 Apr 2020 02:31:02 +0000 https://mito-lab.com/?p=2250 こんにちは、mito(@mito_works)です。

今回は、MacにWindows10をインストールする方法を解説します。

mito
mito
開発環境の構築のため、Windowsが必要になり、もう一台買うか・・と悩んでいたところこの方法を見つけたので早速試してみました。
momo
momo
Macの中にWindow環境を作れるのでPCは1台。お値段も「Windows10（オンラインコード版）」の1万7926円のみ！

Macを使っているけれどWindow環境も必要になった方にオススメの記事です。

mito
mito
私の使っているPCはこちらです！
Webデザインが勉強から仕事へ推移して、PCを買い換えました。【レビュー】MacBook Pro 15-inch,2019 「Webデザインの勉強を始めるにあたってパソコンはどういうものがいいですか？」と質問されることが増えました。 We...

それでは設定方法を解説していきます。

Macのスペック確認

Apple公式ページに、Mac に Windows 10 をインストールするために必要なものとして、以下が書かれていました。

  • MacBook (2015 年以降に発売されたモデル)
  • MacBook Air (2012 年以降に発売されたモデル)
  • MacBook Pro (2012 年以降に発売されたモデル)
  • Mac mini (2012 年以降に発売されたモデル)
  • iMac (2012 年以降に発売されたモデル)1
  • iMac Pro (すべてのモデル)
  • Mac Pro (2013 年以降に発売されたモデル)

 

Mac の起動ディスクに 64 GB 以上の空き領域。

  • Mac に最低 64 GB の空き領域があればインストールできますが、128 GB 以上の空き領域を確保しておけば、快適に利用できます。Windows の自動アップデートには、それ以上の容量が必要になります。
  • iMac Pro または Mac Pro のメモリ (RAM) が 128 GB 以上の場合、Mac の搭載メモリと同量以上の空き領域が起動ディスクに必要です。2

 

＼Boot Camp アシスタントで Mac に Windows 10 をインストールする／

 

mito
mito
まず自分のMac環境にWindowsをダウンロードできるかどうか調べます。

Windowsを用意

Amazonで「Microsoft Windows 10 Home Anniversary Update適用 32bit/64bit 日本語版 (最新) |オンラインコード版」を購入

 


mito
mito
すぐ使いたかったのでオンラインコード版にしました。

必要なのは、プロダクトキーのみ、USBやDVDの用意は不要でした。

windows10 ダウンロード

注文履歴の「ダウンロードライブラリへ」へ遷移し、指示に従い、ダウンロードを開始します。

mito
mito
windows10、64bitをダウンロードしました。

ダウンロードフォルダにダウンロードされていることを確認。

momo
momo
ダウンロードは完了だよ！

BootCampアシスタント起動

BootCampアシスタントを起動し、Window環境を作っていきます。

BootCampアシスタント.appを起動する

ファインダー＞アプリケーション＞ユーティリティフォルダを開きます。

BootCampアシスタント.appをダブルクリック

mito
mito
以下、画面メッセージに従い進めていきます！

Windows パーティションを作成する

ISOイメージは先ほどダウンロードしたisoが設定されていることを確認

Windowsの容量をこの設定で決めます。

momo
momo
この容量は後から変更はできないよ！
mito
mito
今回、簡単な開発環境を作りたかったので少し大きめの容量として80GBを設定しました。

Appleサポートセンターの方に問い合わせたところ、Windowsの容量を増やすと、Macの動作が重くなるということはないそうです。ただ、Macに保存できる容量が減るということでした。

パーティション決定後「インストール」を押すとインストールが開始されます。

mito
mito
30~40分かかるので気長に待ちましょう。

インストール後は自動で再起動されます。

Windowsのインストールと初期設定

Windowsの初期設定

再起動後はWindowの画面となっています。

mito
mito
当たり前ですが、待ち時間のマークもWinマーク！

画面に従い、言語やキーボードなどの設定をしていきます。

プロダクトキーの入力

momo
momo
このタイミングで購入時のプロダクトコードが必要になるよ！

Windowのインストール

プロダクトキーを入力後、インストールが開始されます。

しばらく待つと….

mito
mito
なんとびっくり！Windows環境の完成です！

デフォルトで「ようこそBoot Campインストラーへ」が立ち上がっていると思いますが、何もせず×で閉じてください。

（閉じずにインストールしてしまったところ、Windowsが動かなくなってしましました）

 MacとWinの切り替え方法

一昔前は、Boot Campから切り替えができていたそうですが、2020年現在は電源を切る、または再起動でしか切り替えができません。

  • STEP1

    option または (alt) ⌥を押し続けた状態で、再起動か電源を切る操作を行う

  • STEP2

    Win、Macの選択画面が立ち上がるので、どちらかを選択

  • STEP3
    ネットワークの情報を入れて、再度ダブルクリックすると立ち上がります。

Windowsのアンインストール(おまけ)

BootCampアシスタント.appを立ち上げます。

画面の指示に従い、「次へ」を押し、以下の画面で「復元」を押します。

momo
momo
これで、Windows環境は削除されます。うまくいかない場合は、この方法でアンインストールし、再度インストールを試してみてね！プロダクトキーは何度も使えるよ！
]]> https://mito-lab.com/windows10-bootcamp/feed/ 0 エックスサーバーでサブドメインを設定｜WordPressを複数設置する方法 https://mito-lab.com/xserver-subdomain/ https://mito-lab.com/xserver-subdomain/#respond Sun, 19 Apr 2020 21:45:26 +0000 https://mito-lab.com/?p=2221 こんにちは、mito(@mito_works)です。

サブドメインを使うと、レンタルサーバー内に複数のワードプレスを作ることができます。

momo
momo
エックスサーバーの場合は無料で無制限！
mito
mito
私は、お仕事で新規のWordPress構築を請負った際のテスト環境として作ってみました。
momo
momo
ワードプレスのブログを複数持ちたい人などにも参考になる記事だよ！

サブドメインとは

「○○○.com」の前に文字列を挿入し、「△△△.○○○.com」のようにしてドメインを区分けするドメインのことです。

mito
mito
ドメインを用途や目的別に分割して利用する際に使われます
momo
momo
メリットは、一つの独自ドメインで済むのでコストがかからないことだよ。
エックスサーバー公式サイトへ

 

エックスサーバーでサブドメインを設定する方法

  • STEP1

    エックスサーバーのサーバーパネルを開き、「ドメイン ＞ サブドメイン設定」をクリックします。

  • STEP2

    サブドメインを設定するドメインを選択します。
    初期ドメインにはサブドメインを設定することができないので、必ず既に登録済みの独自ドメインを選択してください。

  • STEP3

    「サブドメイン設定の追加」タブをクリックして、設定したいサブドメインを入力します。
    「無料独自SSLを利用する」にチェックを入れて、「サブドメイン設定の追加（確認）」をクリックします。

  • STEP4
    「追加」をクリックし、反映を確認できたら完了です。

サブドメイン設定は完了です。

momo
momo
サブドメイン設定は追加後、サーバーに設定が反映され利用可能になるまで最大で1時間程度かかるよ！
mito
mito
気長に待ちましょう！

エックスサーバーのサブドメインにWordPressを設定する方法

続いて、作成したサブドメインにWordPressをインストールする方法です。

momo
momo
エックスサーバーであれば、サブドメインでも「WordPress簡単インストール機能」が利用できるので簡単だよ！
  • STEP1
    エックスサーバーのサーバーパネルの「WordPress ＞ WordPress簡単インストール」をクリックします。

  • STEP2
    先ほどサブドメインを設定したドメインの「選択する」をクリックします。

  • STEP3

    「WordPressのインストール」タブを選択。

    momo
    momo
    「インストールURL」は必ず「先ほど登録したサブドメイン」をプルダウンの中から選択してね！
    mito
    mito
    間違って独自どめいんを選択すると、既存のWordPressを上書きしてしまうので気をつけてください！

    入力が終わったら「確認画面へ進む」をクリックします。

  • STEP4
    内容を確認し、「インストール（確定）」をクリックします。

momo
momo
サブドメインのURLにアクセスすると、WordPressのサイトが表示されるよ！

サイトにアクセス制限をつける(おまけ)

公開前のテスト環境に利用する場合、アクセス制限をつけておくとID、PW(BASIC認証)を知っている人しかアクセスできないので便利です。

mito
mito
エックスサーバの場合、指定のフォルダに対してIDとパスワードを用いてアクセス制限をかけることができます。
  • STEP1
    エックスサーバーのサーバーパネルの「アクセス制限」をクリックします。

  • STEP2

    指定フォルダのアクセス制限を「ON」→「確定」を押します。

  • STEP3
    アクセス制限を追加するとフォルダ名の横に鍵マークが追加されます。該当行の「ユーザー設置」リンクをクリックし、IDとPWを設定します。

先ほどと同じように、サブドメインのURLにアクセスすると、認証画面が表示され、IDとPWを入力するとWordPressのサイト画面が表示されるようになります。



]]> https://mito-lab.com/xserver-subdomain/feed/ 0 【初心者にオススメ！】たった3分でLocal by Flywheelを使ってローカルにWordPress開発環境を作る方法 https://mito-lab.com/wordpress-localbyflywheel/ https://mito-lab.com/wordpress-localbyflywheel/#respond Mon, 23 Mar 2020 03:15:44 +0000 https://mito-lab.com/?p=2180 こんにちは、mito(@mito_works)です。

wordpressで直接本番環境を触るのは怖い。。
でもローカルに開発環境を作るのは時間がかかる。。

mito
mito
少しの修正の場合はローカルに開発環境を作るかどうか迷いますよね

前回の記事内容でもそれなりに簡単にローカルに開発環境を作れるのですが、さらに簡単に開発環境を作る方法を試したので備忘録としてまとめます。

簡単！ローカル環境のMAMPで複数のWordPressサイトを管理するこんにちは。mito（@mito_works）です。 WordPressでWeb制作を行う際にまずローカル環境で制作しますよね？ ...
momo
momo
前回の方法だとDBやMySQLを意識しないといけなかったけれど今回は、全く意識せずとも環境ができちゃうよ！
mito
mito
「DBの設定がよくわからない」「PHPやサーバーを意識したくない。。」という人にオススメです。

 

Local by Flywheel のダウンロード

「Local by Flywheel」を使っていきます。

公式のダウンロードページへ

「FREE DOWNLOAD!」ボタンをクリック。

まずははじめにOSを選択肢(今回はmacで実施)、その他必要な情報を入力していきます。

入力後、「GET IT NOW」を押すとダウンロードが開始します。

Local by Flywheel のインストール

ダウンロードしたdmgファイルを起動し、Applicationsフォルダにドラック＆ドロップで移動させます。

 

画面が立ち上がります。

mito
mito
チュートリアルがまず立ち上がるので、右上の✖ボタンを押すと以下のような画面になります。

Local by Flywheel の設定

ローカルに作成したいPHPのバージョン、MySQLのバージョンなどの環境設定を行っていきます。

サイトを作る

「CREATE NEW SITE」をクリック。

以下のような画面になるので、サイト名を入力し、「CONTINUE」をクリック

momo
momo
サイト名は日本語以外だよ！
mito
mito
ちなみに詳細設定はデフォルトのままです。

PHP、MySQLバージョン設定

PHPのバージョン、MySQLのバージョンを選択。（本番環境に合わせるのがいいかと思います）

ただ、あまりカスタマイズしないのであれば「Preferred」でも大丈夫です。

 

WordPressの管理画面用のユーザー名、パスワード設定

WordPressの管理画面にログインするためのユーザー名とパスワードの設置をします。

momo
momo
ローカル環境なのであまり複雑に考えずにわかりやすい設定で良いと思うよ！

「CONTINUE」を押すと設定が開始します。

momo
momo
完成です！

実態のフォルダ確認

momo
momo
ちなみに実態は以下の場所にあることが確認できるよ！

Macintosh HD/ユーザー/mito/Local Sites/businesss

Macでより上のフォルダ階層にアクセスしたい場合はcommand+↑で表示できます。

 

]]> https://mito-lab.com/wordpress-localbyflywheel/feed/ 0 【FileZilla】530 Login incorrectでログインできないときの対処法 https://mito-lab.com/filezilla-530erro/ https://mito-lab.com/filezilla-530erro/#respond Thu, 31 Oct 2019 15:09:32 +0000 https://mito-lab.com/?p=1436 こんにちは、mito（@mito_works）です！

今回は、FileZillaを使ってサーバーアクセスしようとした際に530エラー！！

mito
mito
どのような方法で接続できたか備忘録として書きます。

目的

WordPressのステージング環境構築をするために、本番サーバーへFileZillaから接続してファイルをダウンロードしたい。

問題

530 Login incorrectエラーで接続を拒否されてしまう。

試したこと＆確認したこと

契約プランの確認

契約プラン上、FTPで接続できない場合があるようです。
FTP接続無制限であることを確認しました。

ログイン情報の確認（意図しない改行や空白が入っていないか）

530 Login incorrectエラーのほとんどの原因はログイン情報(IDやらパスワードやら)の入力ミスだそうです。

momo
momo
入力情報に間違いがないか、改行や空白を含めて確認しよう！

DNSのキャッシュクリア

それでもダメなら・・ということでDNSのキャッシュをクリアしました。

OS X で DNS キャッシュをリセットする
WindowsのDNSキャッシュをクリアする方法

mito
mito
それでも上手くいきませんでした。。

IP制限を確認する

海外のIPアドレスの場合はFTP接続を制限するなどという設定ができるようなので確認しました。

mito
mito
国内IPとして認識されるはずなのでこれも原因ではなさそうです。

IPアドレスから割当国を調べる

別の回線で接続する

何らかの原因で接続過多になっていることを考え、別の回線(ポケットwifi)で繋ぎましたがダメでした。

今回の解決方法

クイック接続を試すと接続できました。

momo
momo
1つのツールに固執せず、Cyberduckなど他のFTPソフトを試すという方法もあるね！
mito
mito
実際、別のサーバーに接続する際にFileZillaでは接続できず、Cyberduckなら接続できるということがありました。
Cyberduck
]]> https://mito-lab.com/filezilla-530erro/feed/ 0