WordPressのURLをサブドメインからメインドメインに変更する方法
サブドメインの方がいいと思ってサブドメインにWPをインストールして進めていたけど、
「あ、やっぱりメインドメイン表示にしたい！」
ってなること、ありますよね笑
私もそんな経験をしたので、その時にメインドメインに変更した手順を書いていこうと思います＾＾
『一般』の変更
WPのダッシュボードにある『設定』→『一般』の
『サイトアドレス(URL)』がサブドメインになっていると思うので、
メインドメインに変更する。
※『WordPressアドレス(URL)』の方にもサブドメインが記述されていると思いますが、そちらは変更しないでくださいね。
FTPソフトを使ってindex.phpを編集
FTPソフトでWPをインストールしているサブディレクトリの階層までいき、
その階層にあるindex.phpファイルをPCのデスクトップかどこかにダウンロードする。
ダウンロードしたファイルをテキストエディタで開き、
require( dirname( __FILE__ ) . '/wp-blog-header.php' );
という記述があると思うので、それを
require( dirname( __FILE__ ) . '/サブディレクトリ名/wp-blog-header.php' );
に変更し、保存する。
保存したら、FTPソフトでメインディレクトリの階層までいき、編集したファイルをアップロードをします。
たとえば、https://exam.comというドメインだったとしたら、
今の状態だとサブディレクトリにWPを入れていると思うので、
https://sub.exam.comとかみたいなURLになっていると思います。
なので、メインディレクトリの階層というのは、/exam.com/public_htmlの中に今のファイルを入れます！
メインディレクトリ内にある.htaccessを編集
メインディレクトリの階層の中に.htaccessというファイルがあれば、
それをPCのデスクトップかどこかにダウンロードする。
※もしメインディレクトリの.htaccessファイルがなければ、サブディレクトリの階層のなかにある.htaccessファイルをダウンロードしてください。
ダウンロードしたファイルをまたテキストエディタで開き、以下の以下のコードを追加します。
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /サブディレクトリ名/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /サブディレクトリ名/index.php [L]
</IfModule>
# END WordPress編集したら保存し、メインディレクトリ内に戻します(上書き)。
301リダイレクト処理をする
次は、サブディレクトリの階層内にある.htaccessファイルを編集するので、ダウンロードします。
そして、以下の301リダイレクト処理を記述します。
もともとファイル内に#BEGIN WordPressという記述があると思うので、それより上に記述します。
RewriteEngine On
RewriteCond %{http_host} ^サブディレクトリ名.メインドメイン名.com
RewriteCond %{REQUEST_URI} !^(.*)?wp-login\.php
RewriteCond %{REQUEST_URI} !^(.*)?wp-admin
RewriteCond %{REQUEST_URI} !\.css$
RewriteCond %{REQUEST_URI} !\.js$
RewriteCond %{REQUEST_URI} !\.jpg$
RewriteCond %{REQUEST_URI} !\.gif$
RewriteCond %{REQUEST_URI} !\.png$
RewriteRule ^(.*) https://メインドメイン名.com/$1 [R=301,L]『サブディレクトリ名.メインドメイン名.com』のところは、https://sub.exam.comというサブドメインだったら、
『sub.exam.com』を入れます。
『https://メインドメイン名.com』のところは、今から変更したいドメインを入れます。
RewriteCond %{REQUEST_URI} !〜の記述は、逆にリダイレクトさせたくないものを入れています。
WPの管理画面とかは、リダイレクトしてしまったら入れなくなってしまうので、
RewriteCond %{REQUEST_URI} !^(.*)?wp-login\.php
RewriteCond %{REQUEST_URI} !^(.*)?wp-adminというように書いて、リダイレクトさせないようにしています。
編集できたら、サブディレクトリの階層にファイルを戻します(上書き)。
railsアプリをherokuでデプロイする方法
今回は、ruby on railsアプリをherokuで簡単にデプロイする手順を書いていこうと思います＾＾
ちなみに作成したrailsアプリのDBは、MySQLです。
あと、アプリはすでに完成している前提で、GitHub Desktopを使ってリモートリポジトリにもアプリを上げている状態で行います。
(※リモートリポジトリはherokuを使うのに全く関係ありませんが、
私がherokuでデプロイするとなったときに『リモートリポジトリを作成してるしてないって関係するのかな？？』と疑問を持ったので...笑
結果リモートリポジトリはあってもなくても関係はありません！)
ではでは、進めていきたいと思います。
railsアプリ内でherokuにあげるための準備をする
すでに出来上がっているアプリをherokuにあげるための準備をしていきます。
Gemfileの設定変更
railsアプリには最初から、
gem 'mysql2', '>= 0.3.18', '< 0.6.0'
というような記述があると思います。
(※バージョンの部分は人によって違うかもしれません。)
この部分をまず、コメントアウトにします。
そして、group :development, :test do ~ endの中に以下のように記述します。
group :development, :test do gem 'mysql2', '>= 0.3.18', '< 0.6.0' end
そして、あともう一つ。
どこでもいいのですが、分かりやすいようにGemfileの一番下に以下も記述します。
group :production do gem 'pg' end
これは何をしているかというと、環境ごとのDBの変更をしています。
ローカルで開発していた時は、DBとしてMySQLをしようしていました。
しかしherokuでは、PostgreSQL(pg)というDBがすでにインストールされているので、
それに合うように変更しているのです！
上記のコードを詳しく説明すると、
開発環境(development)とテスト環境(test)ではMySQLを使い、
本番環境(production)ではpgを使う設定にしています。
この変更が終わったら、必ずbundle installをしましょう。
ですが、production環境にインストールするgemはローカル環境でインストールする必要はないので、以下のようにbundle installしましょう。
$ bundle install --without production
これで、group :production以外のgemをインストールすることができます。
これは--without productionというオプションをつけているだけなのですが、
このオプションは一度すればその後bundle installする時はしなくても勝手にproductionを無視してくれるので、一回だけすればOK！
ちゃんと--without productionが適応されているかの確認は、
railsアプリ内の.bundle/configが以下のようになっていたらちゃんとできています。
BUNDLE_WITHOUT: "production"
config/database.ymlの設定
次にdatabase.ymlの設定を行います。
productionのところを以下のようにすればOK。
production: <<: *default adapter: postgresql encoding: unicode pool: 5
config/environments/production.rbの設定
railsは本番環境でのプリコンパイルがデフォルトでオフになっています。
ですので、以下のように設定を変更しましょう。
config.assets.compile = false
を
config.assets.compile = true
に変更。
bin以下のファイル設定
binフォルダの中に数個ファイルがあると思います。
その全てのファイルの一番上に
#!/usr/bin/env ruby
というような記述があると思います。
もしこの記述が
#!/usr/bin/env ruby 2.3.1
といった風にバージョンが指定されていたら、そのバージョンの記述を削除しましょう。
削除すると全てのファイルの一番上の記述が以下のようになると思います。
#!/usr/bin/env ruby
これでOKです！
herokuの登録
次にherokuへの登録を行います。
以下のURLから行ってください。
https://signup.heroku.com/login
手順としては
①必要事項を記入してアカウント作成。
②メールが送られてくるので、メール内のURLを開く。
③パスワードを設定する。
これでアカウントが作成されました！
herokuを自分のPCと紐付ける
アカウント作成ができたら、herokuをPCと紐付ける必要があります。
今回はMacの環境での紐付け方を紹介します。
cliのダウンロード
https://devcenter.heroku.com/articles/heroku-cli
上記のURLに入って、macOSのところを見ましょう。
$ brew tap heroku/brew && brew install heroku
と書かれていると思います。
これをターミナルのホームディレクトリに打ち込みます。
これで必要なcliをダウンロードできます。
$ heroku --version
と打って、
>>heroku/7.0.47 darwin-x64 node-v10.1.0
というようなherokuのバージョンが表示されたら、インストールができています。
PCからherokuにログイン
ターミナルのホームディレクトリで以下のように打ち込みます。
$ heroku login
すると、emailとpasswordの入力を求められるので、herokuに登録したものを打ち込みます。
入力が完了できたら、紐付けは完了です！
herokuアプリの作成
herokuアプリの作成を行っていきます。
ターミナルで以下のように打ちましょう。
$ cd 作成したアプリ名 $ heroku create 好きなアプリ名
まず、herokuアプリを作成するために該当の作成したアプリのディレクトリまでおります。
そして、heroku createでアプリの名前をつけます。
『好きなアプリ名』のところはアプリのURLになるものなので、好きな名前をつけましょう。
ちなみにアンダーバーとかは使用できません。
入力してenterを押し、アプリのURLらしきものが出てきたら作成できています！
Name is already taken...と出たら、すでにその名前を誰かに使用されてしまっているので、
違う名前で再度行いましょう。
herokuにデプロイ
いよいよ、herokuへデプロイです！
$ git push heroku master
これだけでデプロイができちゃいます。
最後の方にURLが生成されているので、コピーしておきましょう！
このデプロイの中で、bundle installやら、プリコンパイルやらができています。
しかし、これで終わりではありません。
最後に本番環境でマイグレーションしましょう。
$ heroku run rails db:migrate
これで完了です！
表示されていたURLをブラウザに打ち込めば、サイトが表示されていると思います！
基本はこの流れでデプロイできるのですが、
最後のデプロイとマイグレーションのときに私はエラーが発生しました。
すぐに解決できたエラーでしたが、そのエラーの解決方法はまた違う記事で書きたいと思います！
お疲れさまでした＾＾
Githubからセキュリティ警告メールが届いた時の対処法
ふとメールボックスを開くと、
Githubからsecurity系のメールが届いていた。
内心すごく不安になりながら、内容を見てみると
こんな中身でした。
どうやら該当のリポジトリにセキュリティ脆弱性があるみたい...。
今回の場合、mini_magickというgemのバージョンが4.9.4より下のものがインストールされているため、セキュリティ上よくないので、
mini_magickのバージョンを4.9.4以上にしてくださいとのこと。
なので、素直にあまり深く考えずターミナルで
$ bundle update
だけをしました。
あとは何もしていません。
これだけで、mini_magickのバージョンは4.9.5にアップデートされました＾＾
このまま、リモートのリポジトリにpushしてマージすれば、警告はなくなりました！
解決！
jQueryを使ってuserAgent判定を行う方法
知り合いから
『自分で作ったリファラページに貼っているリンク先を、ユーザーのデバイスがPCだったらPC用ページに。モバイル・タブレットだったらモバイル用ページのリンク先に飛ぶようにして欲しい』
という依頼を受けたので、やってみました。
が、何しろ私userAgent判定をしたことがなかったもので、userAgentなるものさえもよくわかっていませんでした...笑
そんな
『userAgentなんて知らん。でもやり方知りたい！』
という私と同じような気持ちを抱いている方に、jQueryでuserAgent判定を行う方法を今回は書いていきたいと思います＾＾
userAgentとは？
userAgentがそもそもなんなのかから説明しますね。
ユーザーがサイトを訪れる時って必ず、
「PCからアクセスしています」とか「Chromeからアクセスしています」といったどのような環境からアクセスしているかの情報が送られます。
その、ユーザーがどのような環境でアクセスしているのかという情報のことをuserAgentといいます。
ユーザーの環境情報をjQueryで取得して、その環境によって分岐することができるのです！
では今回は、スマホかタブレットかPCかといった環境情報でリンク先を分岐させてみたいと思います。
HTML
<!--ここではスマホ用リンクを貼っています--> <a class="url_a" href="https://example.com/sp/">リンクです</a>
jQuery
$(function () { // ユーザーのuserAgent情報取得 var ua = navigator.userAgent; // 環境によって分岐 if (ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) { // スマホ用コード $('.url_a').attr("href", "https://example.com/sp/"); } else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) { // タブレット用コード $('.url_a').attr("href", "https://example.com/tb/"); } else { // PC用コード $('.url_a').attr("href", "https://example.com/pc/"); } })
これで、ユーザーがアクセスしてきたデバイス環境によって、aタグのリンク先が勝手に変更されるようになります。
今回のこのやり方は簡単にいうと、もともとhtmlで記述したaタグのリンク先をjQueryのattrで変更しているという感じです。
navigator.userAgentだけでユーザーの環境情報が取得できるとは簡単ですね！
ちなみに今回はaタグで飛んだ先がリファラで、このリファラではページにきて１秒後にまた違うリンク先に飛ぶようにしていて、
そのリファラ内に書かれたリンクをuserAgent判定するという依頼だったので、困りました笑
なぜかというと、リファラページに記述してある、
「１秒でまた違うリンク先に飛ぶ」という記述がmeta refreshでリダイレクトする書き方になっていたからです。
『え、metaタグか...。metaタグってjQueryで書き換えられるの？したことないぜ...。』
と一瞬焦りましたが、metaタグもhtmlタグですもんね。
上と基本同じコードでセレクタを変えるだけで普通に書き換えることができました！
よ、よかった〜笑
モーダルウィンドウの実装が簡単にできる「Modaal」の使い方
モーダルウィンドウを簡単に作りたいと思ったので、
めちゃ簡単におしゃれなモーダルウィンドウが作れる『Modaal』を使用してみました。
手順は以下です＾＾
必要なファイルをダウンロードする
以下のリンクからファイルをダウンロードします。
以下のページの「Clone or download」という緑色のボタンを押し、
「Download ZIP」からダウンロードをする。
リンク：https://github.com/humaan/Modaal
ダウンロードをするとたくさんファイルが出てきますが、使用するものは
・modaal.min.css
・modaal.min.js
の二つです！
headからファイルを読み込む
ダウンロードしたファイルを適当なディレクトリに入れます。
そのファイルをheadで以下のように読み込みます。
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="modaal.min.css"> <script src="modaal.min.js"></script> </head>
ここで、jQuery本体も読み込んでいなければ、読み込みましょう。
Realm導入後、『import RealmSwift』と記述するとエラーが出るときの対処法
以前書いたRealm導入の記事後、Xcode内で『import Realm』と記述すると
エラーが出たので、そのエラーを解決する方法を書いておきます＾＾
エラーを解決する方法は以下の手順です。
手順
① 開いているXcodeを一旦閉じ、ターミナルを開いて該当のプロジェクトディレクトリまでおります。
$ cd プロジェクト名
② 以下を順番にターミナルで打っていきます。
③ Xcodeで該当のプロジェクトを開き、optionを押しながらメニューバーにある『Product』→『Clean Build Folder...』と押します。
④ そうするとエラー文が変わると思うので、再度Xcodeを閉じ、ターミナルで該当のプロジェクトディレクトリで、以下を打つ。
$ rm -rf ~/Library/Developer/Xcode/DerivedData
⑤ もう一度Xcodeで該当のプロジェクトを開き、メニューバーの『Product』→『Build』を押します。
⑥ Xcodeが少しの間動くと動くと思うので、少しだけ待っていましょう...。
⑦ エラーが解消されていると思います！
これでRealmが使えます＾＾
swiftで作ったプロジェクトにRealmデータベースを導入する方法
iOSアプリを作成する時に、簡単に導入できると言われている
Realmデータベース導入に手間取ったので備忘録として。
Realmデータベース使用の準備
① CocoaPodsをインストールする。
(Realmをインストールするのに必要です。)
【手順】
・ターミナルのホームディレクトリで以下を入力してEnter。
$ sudo gem install cocoapods
・パスワードを入力しろと出るので、Macのパスワードを入力してEnter。
・一旦、ターミナルを再起動する。
・インストールしたCocoaPodsのバージョンを確認する。
$ pod --version
$ pod setup
$ pod setup
ここでバージョンの表示がされたら、正常にインストールされています＾＾
※ここまでは最初の１回だけすればOK！
※ここから先は、プロジェクト制作ごとにする作業です。
Realmデータベース導入
② Xcodeで新規プロジェクトを制作する。
③ Xcodeでプロジェクトを一旦閉じ、ターミナルで該当のプロジェクトディレクトリまでおりて、pod initする。
$ cd ~
$ cd プロジェクト名
$ pod init
$ cd プロジェクト名
$ pod init
④ ③で作成されたPodfileを開く。
$ vi Podfile
⑤ iを押して、入力モードに切り替えたら、一番下のendの上に以下追加。
pod 'RealmSwift'
⑦ esc→shift+z→shift+zでviを閉じる。
⑧ ターミナルでそのまま以下を入力してEnter。
$ pod install
⑨ 上記作業が終われば、今まで開いていた.xcodeprojファイルの方ではなく、新しく作成された.xcworkspaceファイルの方を開く。
⑩ Realmフレームワークを２つ追加する。
【手順】
・プロジェクトファイルを開いたら、左側にあるファイル一覧のいちばん上にある、プロジェクト名フォルダを開く。
・TARGETS→Generalの順に押す。
・『Linked Frame works ...』のプラスマークを押し、Realmと名前をついたフレームが２つあると思うので、その２つのフレームを追加する。
これで導入は完了です！
