Rails+React with webpacker ~Herokuにデプロイ~

ここまでで簡単ですが

  • twitter認証 + タイムライン表示
  • postgresqlでデータベース構築
  • devise認証
  • Rails と React 間でaxiosで通信

できたので, いったんHerokuにデプロイできるかやってみました. ので, そのメモです.

 

 

dotenv-railsの導入

herokuにデプロイするにあたり, config/secrets.yml もアップロードしないといけません. ですが, 今までここにTwitterAPI Keyとか載せていたのでどうにかしないとなということになりました.

そこでdotenv-rails環境変数を扱うことにしました.

github.com

 これを使うと, .envファイルに環境変数を書くだけで勝手にrailsのファイルから呼び出せます. ですが, ここでバージョンの問題が発生したのでそのメモ.

 

Gemfileに

group :development, :test do
gem 'dotenv-rails'
end

として docker-compose run --rm web bundle install すると自分の環境だとdotenv-rails(0.7.0)が入りました. で, 仕様通りに使っても環境変数が呼び出せないと.

色々調べていくうちに, バージョンの問題が浮上しました.

github.com

というわけで, dotenv-railsを2018年8月現在で最新のバージョン2.5.0を指定して入れ直すことにしました.

 

dockerでのGemのアンインストールとGemfile.lockの更新は以下の感じです.

$ docker-compose run --rm web bundle exec gem uninstall dotenv-rails
$ docker-compose run --rm web bundle update
$ docker-compose build

したあとで, Gemfileを以下に書き換えて

group :development, :test do
gem 'dotenv-rails', '~> 2.5.0'
end
$ docker-compose run --rm web bundle install
$ docker-compose build
// 一緒にコンテナ立ち上げるなら
// $docker-compose up -d --build

するとdotenv-railsが使えるようになります.

 

herokuにデプロイ

.gitignoreの設定

dotenv-railsを使って秘匿情報を切り分けましたが, デフォルトでは.envファイルが.gitignoreに書いてないので書きます. ついでにHerokuに上げる必要のないDockerfileとdocker-compose.ymlも載せときます.

 

Herokuにデプロイ

webpackerのデプロイに関する項目を読むと, Heroku側がいい感じにやってくれそうなので, 特別な設定なくいけます.

Heroku

Heroku installs Yarn and node by default if you deploy a Rails app with Webpacker so all you would need to do:

heroku create shiny-webpacker-app
heroku addons:create heroku-postgresql:hobby-dev
git push heroku master

github.com

 で, webpack使っているので恐らくasset pipline使わない関係で, config/environments/production.rbの config.assets.compile = false  にしないと警告出ます.

そしたらもう

$ cd 作業ディレクトリ
$ git init
$ git add -A
$ git commit -m "heroku"
$ heroku login
$ heroku create my-app
$ git push heroku master

で行けるかなと思ったのですがいくつかつまずいたのでメモ.

app/javascript/imagesに画像がなくてコンパイルエラー

webpackerのエントリポイントのファイルで require.context('images', true, /\.(png|jpg|jpeg|svg)$/) にしているのに画像がないため怒られました. 何でもいいのでこの拡張子の画像を入れておきましょう.

起動のコマンドがおかしなことになってた

今回develop環境ではforemanを使っていました. で, Procfileを書いてたんですが, ProcfileがあるとHerokuはここに書いてあるコマンドでアプリを起動させるみたいです. デフォルトだと bundle exec rails s -p $PORT -e $RAILS_ENV で起動するみたいなので, Procfileの中身を以下に書き換えます.

web: bundle exec rails s -p $PORT -e $RAILS_ENV

※ あまりよくわかっていないのですが, たとえProcfileを.gitignoreしたとしてもProcfileの中身が読み込まれます. なので, Herokuに上げる際は必ず書き換えたほうがいいでしょう.

※ もっと良いやり方あると思う...

config/environments/production.rb にdeviseメール認証の記述をしていない

開発環境では

config.action_mailer.default_url_options = { host: '127.0.0.1', port: 3000 }
config.action_mailer.delivery_method = :smtp
config.action_mailer.smtp_settings = {
:enable_starttls_auto => true,
:address => 'smtp.gmail.com',
:port => 587,
:domain => 'smtp.gmail.com',
:user_name => '*********@gmail.com',
:password => ENV["GMAIL_PASS"],
:authentication => 'login'
}

を書いていたのですが, 単純にデプロイ側にこれを書いていなかったのでエラー吐かれました. なので, hostをデプロイ環境に合わせて

config.action_mailer.default_url_options = { host: 'my-app.herokuapp.com' }
config.action_mailer.delivery_method = :smtp
config.action_mailer.smtp_settings = {
:enable_starttls_auto => true,
:address => 'smtp.gmail.com',
:port => 587,
:domain => 'smtp.gmail.com',
:user_name => '*********@gmail.com',
:password => ENV["GMAIL_PASS"],
:authentication => 'login'
}

を記述します.

twitterのコールバックURLが開発環境の時のまま

twitter developmentの登録したアプリのところで, CallbackURLに

https://my-app.herokuapp.com/auth/twitter/callback

を追加しておけば動きました.

 

以上が無事済んだら

$ git add -u
$ git commit -m "heroku v2"
$ git push heroku master

// データベース構築
$ heroku run rake db:migrate

// 各種環境変数設定
$ heroku config:set ENV_NAME="..."

// アプリ起動
$ heroku open

// ログを見たいときは
$ heroku logs -t

// データベースの情報取得
$ heroku config | grep DATABASE_URL
▽以下のような順番で出力されます.
postgres://(User)***:(Pass)***@(Host)***:(Port)***/(Database)***

でOKです. データベース情報は, PG Commander の設定に入れてやれば接続できます.

 

これから

今後もデプロイでつまずきそうなので, 気をつけながらやっていきたいです.

 

※ 追記

ちなみにdockerでもデプロイできるみたいなので, 余力があればやろうかな.

devcenter.heroku.com

 

Rails+React axiosで通信 ~CSRFトークンの設定~

前回RailsとReact間でaxiosを使ってajax通信をしたのですが, GETメソッドは特別な設定なくできました. しかし, POST(GET以外)は設定しないと動かなかったのでそのメモです.

dai7igarashi.hatenablog.com

 

 

CSRFとは

CSRFとは Cross-Site Request Forgeries の略で, ユーザの意図しない動作をさせる攻撃です.

情報処理推進機構:情報セキュリティ:脆弱性関連情報の取扱い:知っていますか?脆弱性 (ぜいじゃくせい)/3. CSRF (クロスサイト・リクエスト・フォージェリ)

 例えば, AさんがあるSNSにログイン中に悪意のあるサイトを見たとします. そして悪意のあるサイトの罠が仕掛けられたリンクをクリックすると, あたかもAさんがリクエストを出したように, 悪意のあるサイトからログイン中のSNSにリクエストが飛びます. すると例えばアカウントを削除されたりなんなり, 色々悪用されてしまうと言ったことが起こります. これがCSRFです.

 

RailsCSRF対策

RailsにはCSRF対策が施されていて, 悪意のあるサイトからのリクエストか, 自分のプログラムからのリクエストか判別できるような仕組みが用意されています. Railsでは, GETリクエストはそこまで破壊的な処理がなされないと考えているのか, 対策なくaxiosで通信できるのですが, POST, PUT, DELETEでは致命的なダメージを与えると考えているらしく, CSRFトークンと呼ばれるパスワードみたいなものの設定が必須になっています.

Rails側で用意されているヘルパーメソッド(form_forとか)にはデフォルトでこのCSRFトークンが設定されているので気にせずPOSTとかできてましたが, フロントエンドとサーバーサイドを分けて通信する場合には意識しなければなりません.

shindolog.hatenablog.com

 

上記サイトによると, 

   検証を通すには「authenticity_token をフォームに埋め込んでおく」

 「X-CSRF-Token をリクエストヘッダーに設定しておく」

らしいです.

で, 今回の場合どうするかというと, rails-ujsというajax通信をよしなに行ってくれるライブラリのcsrfトークンを取得する機能を使って解決します. 具体的には, 

import React from 'react';
import axios from 'axios';
import { csrfToken } from 'rails-ujs';

class MyApp extends React.Component {
constructor(props) {
super(props);

// この記述だけでaxiosでpostが行える.
axios.defaults.headers.common['X-CSRF-Token'] = csrfToken();
}


func1() {
axios.post('/post_url', {
name: 'Tom',
text: 'Hello World!'
})
.then(response => {
console.log(response.data);
})
.catch(err => {
console.log(err);
});
}

これで送れます. コントローラ側ではparamsにjson形式で入っています. 詳しくはbinding.pryすればわかります.

tech.medpeer.co.jp

 

今後

データベース構築かな....... 以外と一番考えなきゃいけないとこな気がします.

dockerでpry-railsを使う(デバッグ)

paramsとかみたいなーって思ったとき, dockerだと普通にpry-rails使ってbinding.pryできなかったのでそのメモです.

 

 

docker-compose で pry-rails を使う

https://stackoverflow.com/questions/35211638/how-to-debug-a-rails-app-in-docker-with-pry

 

上記の記事を参考にしました. 

# バックグラウンドで動かす
$ docker-compose up -d
$ docker ps
railsが動いてるコンテナのNAMESをみる
$ docker attach コンテナNAMES

すると, 一見何も変化がないんですが, binding.pryのとこに来るとpryしたときの, いつもの感じのコンソール画面になります. で, コンソールには表示されないんですがキーボードを打ってEnterを押すとみれます.

ちなみに抜けるときは exit で. 

Rails+React with webpacker twiiter認証してタイムライン表示

TwitterでOmniAuthやってみたのでメモしておきます.

 

Twitter認証とタイムライン表示

下記サイトを参考にしました.

reviewlog.info 

導入したgemは

 

基本的に上記サイトの通りでやりました. omniauth入れておくと, auth/twitterにリンク飛ぶとよく見るtwitter認証画面に飛びます. で, 認証するとcallbackで指定したリンクに飛ぶと...

 

つまったこととしては, twitter development(https://developer.twitter.com/)サイトのアプリ登録のとこですね. 

 

アプリ登録する際, CallbackURLを設定しますが, 上記サイト通りのルーティングだとhttp://127.0.0.1:3000/auth/twitter/callbackにしないといけません. localhostは拒否られます.

で, localで作業するとき,localhost:3000とかするとコールバックしたときにエラー吐かれるので, 最初からhttp://127.0.0.1:3000にアクセスしないといけませんでした.

 

今後

twitterプロフィール画像とかも取得したいと思います. あとdeviseとも連携させたいな.

 

追記

client = Twitter::REST::Client.new do |config|
config.consumer_key = Rails.application.secrets.twitter_consumer_key
config.consumer_secret = Rails.application.secrets.twitter_consumer_secret
config.access_token = session[:oauth_token]
config.access_token_secret = session[:oauth_token_secret]
end

した場合, ユーザの基本的な情報は,

client.user.********

の********に下記サイトのやつを引っ張ってくれば良い.

GET account/verify_credentials — Twitter Developers

 (ex.) id なら client.user.id

Rails+React with webpacker データベースをReactでいじる

前回まででReactをRailsで使う環境は整いました.

でも, Reactでデータベースの値をどうやって参照すればいいのかつまづいたのでメモしておきます.

 

 

ルーティングとコントローラ設定, axiosでReactと通信

webpackerのファイルの構成は割愛します. 自分は app -> javascript 配下に

  • packs : webpackerのデフォルトのエントリポイント
  • javascripts : Reactのコンポーネント( jsx )
  • stylesheets : css

のような感じで置きました.

そして docker-compose run --rm web rails g controller home でhomeコントローラ作成しました.

そして, app/config/routes.rb を以下のように設定.

Rails.application.routes.draw do
# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
root 'home#index'
get 'axios_get' => 'home#getting'
end

こうすることで, Reactコンポーネントからaxiosで /axios_get にアクセスするとhomeコントローラのgettingメソッドが呼ばれる. なのでgettingメソッドのから値を返してやれば良い. homeコントローラは以下.

class HomeController < ApplicationController

def index
@todos = Todo.all
# app/viwes/home/index.html.erbを表示.
# だけど今後は表示を全てReactコンポーネント化する予定なので不要.
render template: 'home/index', layout: 'application'
end

def getting
@todos = Todo.all
render json: @todos, layout:'application'
end

end

ここではTodoというモデル(todosテーブル)を作ってデータベースの値を引っ張ってきています. で, 返り値はjson形式です. 

(一応layout指定してますが, 無くても勝手に読んでくれる???)

 

最後にReact側で

import React from 'react';
import axios from 'axios';

class MyApp extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
this.hundleClick = this.hundleClick.bind(this);
}

hundleClick() {
let num = this.state.count + 1;
this.setState({count: num});

axios.get('axios_get')
.then(response => {
console.log(response.data);
})
.catch(err => {
console.log(err);
});
}

render() {
return(
<div>
<p className="MyApp-count">Count : {this.state.count}</p>
<button type="button" className="btn btn-primary" onClick= {this.hundleClick}>Button!</button>
</div>
);
}

}

export default MyApp;

みたいに書けばコンソールのログにデータベースの値がJSONで入ってます.

 

※ 初歩的ですが, Reactのクラス名は大文字英字で始めないとエラーになります(一回やった笑)

 

これから

次はデータの取り扱い方を詳しく見ていこうかなと. あとpostもしようかなと.

docker-composeコマンドメモ~Rails5.1 + webpacker~

前回までとは違う話ですが, 開発環境をdockerで作ろうとしています.

今回はRailsでwebpackerを使ってReactを動かしたいので, その環境構築の自分なりのメモです. 

いまいちdockerのイメージとコンテナの違いが, あとdocker-composeのbuild, run, upの違いがわからないので整理しようかと思います. (間違っていたら教えていただけると幸いです(涙))

 

 

Dockerでイメージ作成からコンテナ起動まで

Dockerfileでビルドするイメージ作成

やりたいことはこんな感じ.

onoxeve.com

で, Dockerの公式にもRails+Postgresのがあったので, そちらを主な参考にしてみる.

docs.docker.com

 

Dockerfileはコンテナが起動時の参考にする環境である"イメージ"を作成するものと認識.  このイメージを作成してdocker imagesでimageが表示される様にすることを"build"と認識.

 

・Dockerfile

# Ruby2.5.1のイメージをベースとして取得
FROM ruby:2.5.1
# ruby:2.5.1が取得したイメージ[buildpack-deps:stretch]の元が[debian:stretch]なので, aptコマンドを使用する
# インデックスファイルの更新とパッケージのダウンロード
# -q : 進行状況非表示, -y : 全てyesを自動回答
RUN apt-get update -q && apt-get install -y build-essential libpq-dev
# nodesourceのapiから情報をget -> bashコマンドで読み込んだファイルを実行
RUN curl -sL https://deb.nodesource.com/setup_10.x | bash
# バージョンを指定したnodejsのインストールを実行
RUN apt-get install -y nodejs
# yarnのstabelバージョンをインストール
RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
RUN echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
RUN apt-get update && apt-get install yarn
# コンテナ内での作業フォルダ作成と作業ディレクトリへの移動(指定)
RUN mkdir /web_container
WORKDIR /web_container
# ホストからコンテナ側へファイルのコピー(事前にホスト側で作成しておく)
COPY Gemfile /web_container/Gemfile
COPY Gemfile.lock /web_container/Gemfile.lock
# コンテナ内でGemfileのインストール&更新
RUN bundle install
# ホストの作業ディレクトリ内を全てコンテナ側にコピー
COPY . /web_container

これがイメージをビルドするベースのファイルになる.

 

docker-compose.yml作成

従来ではコンテナ間通信で"network"とか"--link"とかしてたのを簡単にするものと認識.

・docker-compose.yml

version: '3'
services:
db:
# postgresqlをvrsion10でインストール
image: postgres:10
environment:
POSTGRES_USER: user
POSTGRES_PASSWORD: pass
POSTGRES_DB: my_db
volumes:
# 作業ディレクトリ:コンテナ内でデータのマウント
- ./tmp/db:/var/lib/postgresql/data
# PG Commanderから接続するためにポート変更
ports:
- '5433:5432'
container_name: "my_db"
web:
# 作業ディレクトリ内のDockerfileをビルド
build: .
# ポートの3000番を利用. localhost以外のIPアドレスからアクセス可能な様に0.0.0.0にバインド
command: bundle exec rails s -p 3000 -b '0.0.0.0'
volumes:
- .:/web_container
container_name: "my_web"
ports:
- "3000:3000"
depends_on:
- db

あとは

 ・Gemfile

source 'https://rubygems.org'
gem 'rails', '5.1.2'

と, 空のGemfile.lockを用意して終了.

 

イメージのビルドとコンテナ操作

docker-compose run --rm web rails new . --force --database=postgresql --webpack=react

を実行. これの中身を解説していく.

 

別のDockerの公式(Quickstart: Compose and Django | Docker Documentation)をみると,

Create the Django project by running the docker-compose run command as follows.

 sudo docker-compose run web django-admin.py startproject composeexample .

This instructs Compose to run django-admin.py startproject composeexample in a container, using the web service’s image and configuration. Because the web image doesn’t exist yet, Compose builds it from the current directory, as specified by the build: . line in docker-compose.yml.

Once the web service image is built, Compose runs it and executes the django-admin.py startprojectcommand in the container. This command instructs Django to create a set of files and directories representing a Django project.

 とある. つまり run service名 コマンド で, service名のイメージから立ち上げられた(立ち上げられる予定の)コンテナ内でコマンドが実行される. しかし, run実行時点ではwebコンテナはおろか, webコンテナの起動ベースとなるイメージがビルドされていないので, docker-compose.ymlの build: . で, まずDockerfileを読み込んでイメージのビルドが行われると認識.

ちなみにここではrunされたservice: webの依存関係として depends_on: dbとなっているので, まずdbのイメージがビルドされる. それはimage: postgres:10であり, dockerhubからpullされる. postgresのコンテナはdocker-compose upしなくてもこのコマンドだけで起動状態を保っている. 調べきれていないが, databaseはrunでイメージのビルドからコンテナ起動まで出来るっぽい??

で, service: webのイメージがビルドされたらrails new .... 以降のコマンドが実行される. 

--rm : runで一時的にコンテナに入ると中間コンテナと呼ばれるコンテナが出来るっぽくて, そのままにしておくとコンテナの数が増えていくっぽい. ので--rmで中間コンテナを削除すれば, docker-compose upでコンテナを作成しても, 諸々インストールされたコンテナが1つ起動するだけで済む??

rails new . : カレントディレクトリでrails newする??

--force : ファイルが存在していれば上書きする. GemfileとかGemfile.lockのことかなぁ...?(railsコマンド(rails) - - Railsドキュメント

 

以上でmy_webコンテナ(docker-compose.ymlに記したコンテナ名)内ではrailsアプリの環境が出来上がっているはず.

この時点では,docker ps -aしてもNAMES: my_webは無い. docker imagesするとREPOSITORY: my_webはある.

 

次いで以下を参考にデータベースの接続設定を行う.

Connect the database

config/database.yml with the following:

default: &default
  adapter: postgresql
  encoding: unicode
  host: db
  username: user
  password:
  pool: 5

development:
  <<: *default
  database: myapp_development


test:
  <<: *default
  database: myapp_test

 

イメージのリビルド

 さっきの処理でGemfileに変更が生じたっぽいので, Gemfile.lockを更新する必要があり, その場合my_webコンテナが利用するイメージのリビルドが必要になる. 今後Gemfileの更新があった場合は, 

docker-compose run --rm web bundle install

docker-compose up -d --build

をすれば良い模様. 2つめのコマンドを実行すると, service: webのbuildが呼ばれ, Dockerfileが呼び出される. Dockerfileは以前と変更がないコマンドが現れるまでの処理を飛ばしてくれるので, ここでは COPY Gemfile /web_container/Gemfile 以降が実行される. その後service: webのコンテナをデタッチモード(バックエンド)で起動してくれる.

 

$ docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
my_web latest ********* 2 minutes ago 1.22GB
<none> <none> ********* 2 hours ago 1.05GB

$ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
******** my_web "bundle exec rails s…" 2 minutes ago Up 2 minutes 0.0.0.0:3000->3000/tcp my_web

と, 謎の<none>イメージができている. コンテナはmy_webイメージを元に起動されているので, noneイメージは不要だと思われるので消す. イメージのリビルドが行われると前のイメージが<none>になって新しいイメージが作成されるのか??? 

docker rmi -f IMAGE IDでイメージ削除.

 

で, 最後にデータベースを作成すれば完了.

docker-compose run --rm web rake db:create

 

これでlocalhost:3000にアクセスすれば一応動く. パソコンを再起動するとコンテナは終了しているので(restart: alwaysしてないため), docker-compose.ymlのあるディレクトリに移動して, docker-compose up -dをすれば良い.

 

データベース接続

postgresデータベースの中身を見たかったので, ちょっとメモしておきます.

# コンテナに入る
$ docker exec -it データベースのコンテナID bash

# データベースに接続
/# psql --username=user --dbname=my_db

# データベース一覧表示
my_db=# \l

# 抜ける
ctrl P Q

となる. 

 

GUIツールであるPG Commanderでの接続方法は以下です.

Nickname: 好きな名前で良い

# dockerの場合, HostはdockerコンテナのIPではないらしい
Host: 127.0.0.1

# Portはdocker-compose.ymlで指定したやつ
Port: 5433

User: POSTGRES_USERで指定したやつ
Pass: POSTGRES_PASSWORDで指定したやつ
Database: POSTGRES_DBで指定したやつ

localに別のpostgresがあった場合, PG Commanderで接続するとブッキングするっぽかったので, docker-compose.ymlでホスト側はポート番号5433で, dockerコンテナのデータベース(ポート5432)に接続できる様に変えました.

 

まとめ

ひとまず環境構築はできたみたいなので, 次はyarnとかwebpackerの使い方, es6でReactコンポーネント作るあたりまでやります.

WordPressでテーマから作成したメモ

前回から色々試行錯誤していたのですが, ひと段落(?)したのでメモを残しておきます.

 

前回の記事はこちら.

dai7igarashi.hatenablog.com

 

 

テーマから作成

作ったサイトはこちらです. 

YouTube編集教室YES | 小学生向け!夏のイベント開催中!

( ↑ よくあるご質問のデザインは友達です)

WordPressには素敵なテーマがたくさんありましたが, どうも手を加えようとすると難しい部分がありました. なので自分でテーマから作成しました.

 

最低限必要なファイル

今回のデザインとしてはフロントページ があって基本はそこでランディング, 予約フォームや一部のページだけルーティングって感じです. これを実現するために以下のファイルを作成しました.

  • index.php : 必須
  • style.css : 必須
  • header.php : ヘッダー記述用
  • nav.php : ナビゲーションバー用
  • front-page.php : ホームのページ用
  • page.php : 個別ページの内容表示用
  • footer.php : フッター用
  • function.php : 外部ファイルの読み込みなど用

nav.php以外はwordpress側がファイル名を自動で認識して役割や表示の優先順位を決めてくれます. nav.phpは今回自分で作ったファイルです. 自作のphpファイルは<?php get_template_part('nav'); ?>のように記述すれば読み込めます.

 

各ファイルの基本の記述

具体的なコンテンツ部分を除いた記述は以下のようになりました.

テーマ作成に関して, こちらの記事を参考にさせていただきました.

plusers.net

 

index.php
<!-- header.phpを呼び出し -->
<?php get_header(); ?>

<!-- bootstrap4を使用したのでcontainer指定しとく -->
<div class="container">

<!-- 自作のnav.phpを呼び出し -->
<?php get_template_part( 'nav' ); ?>

</div>
<!-- footer.phpを呼び出し -->
<?php get_footer(); ?>

 

style.php
@charset "utf-8";

/*
Theme Name: myTheme ←必須
Author: hogehoge taro
*/

 

header.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- レスポンシブルデザインに対応させる -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- header.phpを呼び出し -->
<?php wp_head(); ?>
</head>
<!-- wordpressが読み込みファイルを扱いやすいようにしてる? -->
<body <?php body_class(); ?>>
固定のナビゲーションバー
wordpressに共通して言えることはないので割愛
front-page.php
<?php get_header(); ?>

<!-- コンテンツ -->

<?php get_template_part( 'nav' ); ?>

<!-- コンテンツ -->

<?php get_footer(); ?>
page.php
<?php get_header(); ?>

<div class="container">
<?php get_template_part( 'nav' ); ?>

<!-- データベースに保存された固定ページの内容を取得 -->
<!-- ※投稿と違っていくつものコンテンツを取ってこなのでwhileは不要かも... -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; endif; ?>
</div>

<?php get_footer(); ?>
footer.php
<footer>
<div class="copyright">
<p class="text-center">copyright ©<?php bloginfo( 'name' ); ?> All Rights Reserved.</p>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>
function.php
<?php

add_theme_support( 'title-tag' );
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
add_theme_support( 'automatic-feed-links' );
add_theme_support( 'post-thumbnails' );

function my_scripts() {
// wp標準のjQueryは使用しない
wp_deregister_script('jquery');
wp_enqueue_script('jq', "https://code.jquery.com/jquery-3.3.1.min.js");
wp_enqueue_script('boot', get_template_directory_uri() . '/bootstrap-4.1.3-dist/js/bootstrap.min.js', array('jq'));
.
.
.
読み込みたいjsファイル
}

function my_style() {
wp_enqueue_style('style', get_stylesheet_uri());
wp_enqueue_style('boot', get_template_directory_uri() . '/bootstrap-4.1.3-dist/css/bootstrap.min.css');
.
.
.
読み込みたいjsファイル
}

add_action('wp_enqueue_scripts', 'my_scripts');
add_action('wp_enqueue_scripts', 'my_style');

register_nav_menu( 'header-nav', ' ヘッダーナビゲーション ' );
register_nav_menu( 'footer-nav', ' フッターナビゲーション ' );

 

気づいたこと

wordpress関係ありませんが, bootstrap4のグリッドレイアウトでレスポンシブデザインを考えるのが難しかった(というか出来ていないのでは...).

font-sizeを動的に変えるやり方についてあまり理解できていないですね.

 

具体的には, 指定したrowとcolの"box"にぴったり文字が収まるようにできていないです. つまり"box"がfont-sizeによって動的に変化してしまっている(はみ出してる)感じです.

これから

bootstrapとcssの勉強ですね............

あとは綺麗なhtmlの書き方ですね.....