インターネットのスケッチ

Done is better than perfect.

VimでRustを書くための設定

VimでRustを書くための設定をする。
とりあえずプラグインいれるだけ。

概要

以下のプラグインを入れる。

github.com

github.com

プラグインマネージャーはVundleを使う。

github.com

手順

1.Vundleをインストールする

$ git clone https://github.com/VundleVim/Vundle.vim.git ~/.vim/bundle/Vundle.vim

.vimrc のトップに以下を追記

" Vundleの設定
set nocompatible
filetype off
set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()

Plugin 'VundleVim/Vundle.vim'

" 導入したいプラグインを以下に列挙
" Plugin '[Github Author]/[Github repo]' の形式で記入
" Git差分を左に表示
Plugin 'airblade/vim-gitgutter'

call vundle#end()
filetype plugin indent on

2.vim-racerにはRacerが必要なので、Racerを先にインストールする

github.com

$ rustup toolchain add nightly
$ cargo +nightly install racer

racer 2.1からnightlyのrustが必要とのこと。 nightlyは最新の開発版。 ちなみに今日時点のnightly最新バージョンは1.31.0で、rust安定バージョンは1.29.1だった。

3.rust.vimvim-racerのインストールコードを .vimrc に追記する

Plugin 'rust-lang/rust.vim'
Plugin 'racer-rust/vim-racer'

4.vimプラグインのインストール

  • vim を開いた状態で
:PluginInstall

または

  • ターミナル上で
$ vim +PluginInstall +qall

5.vim-racerの設定を .vimrc に追記

" vim-racerの設定
set hidden
let g:racer_cmd = '~/.cargo/bin/racer'
let g:racer_experimental_completer = 1

以上

参考

Rust入門 for Vimmer

Vim におけるプラグイン管理についてまとめてみた

rustup で Rust コンパイラーを簡単インストール

プラグインのREADMEドキュメント

APIを作るための勉強中

RailsでWebアプリ作るのが先月公開までいけたので、次はAPIの勉強をしている。

とりあえず今は『Real World HTTP』を読んでる。

実装例がGoで書かれてるけど、サーバーの立て方とログの見方をここにメモしておく。

package main

import (
    "fmt"
    "log"
    "net/http"
    "net/http/httputil"
)

func handler(w http.ResponseWriter, r *http.Request) {
    dump, err := httputil.DumpRequest(r, true)
    if err != nil {
        http.Error(w, fmt.Sprint(err), http.StatusInternalServerError)
        return
    }
    fmt.Println(string(dump))
    fmt.Fprintf(w, "<html><body>hello</body></html>\n")
}

func main() {
    var httpServer http.Server
    http.HandleFunc("/", handler)
    log.Println("start http listening :18888")
    httpServer.Addr = ":18888"
    log.Println(httpServer.ListenAndServe())
}

上のコードをserver.goというファイルに保存して、ターミナルで go run server.go を実行するとサーバーが立ち上がる。 あとはターミナルの別タブで各goファイルを go run して実行していけば、server.goを立ち上げた方の画面にログが出力されていく。

$ go run server.go
2018/08/15 16:06:15 start http listening :18888
POST / HTTP/1.1
Host: localhost:18888
Accept-Encoding: gzip
Content-Length: 12
Content-Type: text/palin
User-Agent: Go-http-client/1.1

...

画像アップローダー設置で参考にしたリンクまとめ

環境

  • Rails 5.2
  • CarrierWave 1.2.2
  • MiniMagick 4.8.0

本番環境への設定はまだ。開発環境のみ。

全般

Ruby on Rails チュートリアル:実例を使って Rails を学ぼう

Rails5とCarrierWaveを使って画像アップロード機能を作る - write ahead log

[Rails5] Carrierwave + S3 + CloudFrontで画像アップロードを実装する方法

CarrierWave

Rails CarrierWaveのファイル名を変更する方法 – KeruuWeb

CarrierWaveのファイル名変換(original_filename)の挙動 - 備忘録。

Carrierwaveで画像をリサイズする - 49hack

MiniMagick

RubyでImageMagick使うにはMiniMagickの方がよい - 動かざることバグの如し
→これ「tiff対応のimagemagickでないとダメらしい」のエラー出るかと思ったけど、普通にimagemagickをDockerfileに追加するだけで大丈夫だった。Dockerだからか?

Docker

Docker for MacでRails5, MySQLとVue.jsの開発環境を作る | mn-memo

GitHub

GitHub - carrierwaveuploader/carrierwave: Classier solution for file uploads for Rails, Sinatra and other Ruby web frameworks

GitHub - minimagick/minimagick: mini replacement for RMagick

その他

Ruby の private と protected 。歴史と使い分け

HerokuにRailsアプリの検証環境を立てる

開発中他の人に動作を確認してもらいたいときや、スマホ実機確認をするとき用に、Herokuに検証環境を作りました。

ちなみにステージング兼本番環境にはAWSを使う予定です。

環境

Herokuのアカウント新規登録

こちらから。 jp.heroku.com

Heroku CLIのインストール&SSHキーの登録

ターミナルなどでherokuコマンドを使えるようにCLIをインストールします。私はhomebrewで入れました。 devcenter.heroku.com

インストールできたらHerokuにログインして、SSHキーを登録します。

SSHキーの作成

$ ssh-keygen -t rsa -b 4096 -C "Herokuで使うメールアドレス"

キーの保存先はユーザーディレクトリの .ssh/id_heroku_rsa など パスフレーズも入力

Herokuにログインしてキー登録

$ heroku login

Enter your Heroku credentials:
Email: メールアドレス
Password: *************
Logged in as メールアドレス

$ heroku keys:add ~/.ssh/id_heroku_rsa.pub

heroku keys:add で引数を指定しなければデフォルトで ~/.ssh/id_rsa.pub か ~/.ssh/id_dsa.pub を探しに行くらしい。

アプリをHerokuにデプロイ

準備

アプリのディレクトリをどこかにまるごとコピーして以下のファイルを削除するか、ディレクト外に移動。

  • Dockerfile
  • docker-compose.yml
  • .git
  • .gitignore
  • .env

私はDockerで開発していてそのままHerokuに上げてもいいんですが、Dockerなしでデプロイする方法も知っておきたいので、今回はDocker関連のファイルは除去して上げました。

そしたらHerokuへのデプロイはgitを経由して行うので、 git init をしてもう一度gitの管理対象にします。

$ cd コピーしたアプリのディレクトリ
$ git init
$ git add .
$ git commit -m "feat: Initial commit"

デプロイ

コピーしたアプリのディレクトリにいる状態で、herokuコマンドでデプロイします。

// Herokuにアプリを作成する
$ heroku create アプリの名前

// デプロイ
$ git push heroku master

MySQLの設定

// MySQLを利用するためClearDBアドオンを入れる
$ heroku addons:create cleardb:ignite

Creating cleardb:ignite on ⬢ アプリ名... free
Created cleardb-cylindrical-85040 as CLEARDB_DATABASE_URL
Use heroku addons:docs cleardb to view documentation

// 設定確認
$ heroku config

=== アプリ名 Config Vars
CLEARDB_DATABASE_URL:     mysql://b2a3d6180457c6:be3c12f5@us-cdbr-iron-east-04.cleardb.net/heroku_b44817e2b39c626?reconnect=true
LANG:                     en_US.UTF-8
RACK_ENV:                 production
RAILS_ENV:                production
RAILS_LOG_TO_STDOUT:      enabled
RAILS_SERVE_STATIC_FILES: enabled
SECRET_KEY_BASE: ***

// RailsのGemの mysql2 に合わせてDBURLを追加 or 変更する。
$ heroku config:set DATABASE_URL=mysql2://b2a3d6180457c6:be3c12f5@us-cdbr-iron-east-04.cleardb.net/heroku_b44817e2b39c626?reconnect=true

Setting DATABASE_URL and restarting ⬢ アプリ名... done, v9
DATABASE_URL: mysql2://b2a3d6180457c6:be3c12f5@us-cdbr-iron-east-04.cleardb.net/heroku_b44817e2b39c626?reconnect=true

// 設定確認
$ heroku config

=== アプリ名 Config Vars
CLEARDB_DATABASE_URL:     mysql://b2a3d6180457c6:be3c12f5@us-cdbr-iron-east-04.cleardb.net/heroku_b44817e2b39c626?reconnect=true
DATABASE_URL:             mysql2://b2a3d6180457c6:be3c12f5@us-cdbr-iron-east-04.cleardb.net/heroku_b44817e2b39c626?reconnect=true
〜省略〜

ちなみにDATABASE_URLをセットするところで、「zsh: no matches found: DATABASE_URL=mysql2: 省略」というエラーが私は出ました。zshのエラーのようなので.zshrcに以下を追記したら通りました。

$ setopt nonomatch

// 変更を反映
$ source ~/.zshrc

shirusu-ni-tarazu.hatenablog.jp

環境変数の設定

環境変数はHerokuのサイトからか、コマンドで設定できます。
サイトからは アプリのダッシュボード>Settings>Config Vars
コマンドは以下

// heroku config:add 変数名="値" の形式
$ heroku config:add DB_NAME="DB名"
$ heroku config:add DB_USERNAME="DBユーザー名"
$ heroku config:add DB_PASSWORD="パスワード"

ここには書きませんが、ついでにベーシック認証の変数なども設定しました。

テーブルの作成

あとはマイグレーションをしてテーブルを作成するだけです。

$ heroku run rails db:migrate

作成できたらアクセスできるか確認します。
下のコマンドのWeb URLがアプリのURLです。ちゃんとアクセスできたらOKです。

// アプリの情報を見る
$ heroku apps:info
=== アプリ名
Addons:         cleardb:ignite
Auto Cert Mgmt: false
Dynos:          web: 1
Git URL:        https://git.heroku.com/アプリ名.git
Owner:          メールアドレス
Region:         us
Repo Size:      16 MB
Slug Size:      64 MB
Stack:          heroku-16
Web URL:        https://アプリ名.herokuapp.com/

まとめ

あとは機能の実装ができたら git add してHerokuにプッシュしていけば検証環境でサイトの動作をチェックできます。デプロイツールいれたい。


参考

ステージング環境とは?開発環境、検証環境との違いと役割 | WWWクリエイターズ

お前らのSSH Keysの作り方は間違っている - Qiita

Managing Your SSH Keys | Heroku Dev Center

Rails5 x MySQL を Herokuにデプロイする手順 | tackeyy.com

mysqlを使ったRailsアプリをHerokuにデプロイする流れ - Qiita

HerokuでMySQLを使おうとして詰まったところ - Qiita

Heroku データベースの管理(ClearDB アドオンによる MySQL の利用) - 君の瞳はまるでルビー - Ruby 関連まとめサイト

Herokuで本番環境の環境変数(config vars)を.envファイルで設定する - dackdive's blog

初めてのプライベート開発 その2

ローカル開発環境を作っていきます。

基本的には以前自分であげたこちらの記事に沿って、Dockerで立てます。

khanamoto.hatenablog.com

技術スタック

現時点での最新バージョンを使います。

MySQL 8.0は正式版が数日前にリリースされたばかりですが、出たばかりの技術に触れることに慣れるいい機会なので8.0を使ってみようと思います(開発中にどうしても行き詰まった場合や深刻な脆弱性が出てきたら5.7にするかもしれません…)。

Amazon RDSで使えるバージョンに合わせてMySQL 5.7にします。

それと本番ではサーバーにnginxを使うつもりですが、開発環境ではしばらくpumaを使っていく予定です。

Railsアプリ&DB新規作成

以下のファイルを作って、

.
├── Dockerfile
├── Gemfile
├── Gemfile.lock
├── docker-compose.yml
└── .env

$ docker-compose run web rails new . --force --database=mysql
$ docker-compose build
$ docker-compose run web rake db:create
を順に実行します。ファイルの中身など詳細は前掲の記事参照。

注意点はGemfileでrailsのバージョンを5.2にすること。

source 'https://rubygems.org'
gem 'rails', '~> 5.2'

もし古いバージョンで作成してバージョンアップしたいときは、コンテナとイメージを両方削除してからもう一度rails newしてください。
ちなみに-sオプションで既存ファイルをスキップするとGemfileもスキップされるので注意。

テーブル作成

新規にテーブルを作成するので、rails generate modelコマンドでモデルとマイグレーションファイルをあわせて生成します。すでに存在するテーブルの変更の場合はmigrationコマンドを使います。

モデルクラス新規作成

docker-compose run web rails generate model tag tag_name:string
docker-compose run web rails generate model film user:references title:string staff:string comment:text favorite_scene:text watch_day:date cinema:string film_image:binary
docker-compose run web rails generate model film_tag film:references tag:references
docker-compose run web rails generate model user user_name:string profile_name:string email:string password:string profile:text user_image:binary
docker-compose run web rails generate model comment film:references user:references body:text
docker-compose run web rails generate model like film:references user:references
docker-compose run web rails generate model contact user:references body:text
docker-compose run web rails generate model follow user:references follow:references

マイグレーションファイル編集

NOT NULLやユニークなど列制約をつけます。
ユニーク制約はエラーが出たときの発生箇所を特定しやすくするために、アプリケーション側(モデル)とDB側(マイグレーション)の両方で設定しました。

マイグレーション実行

マイグレーションファイルを実行し、テーブルを作成します。

$ docker-compose run web rails db:migrate

アソシエーション(関連付け)設定

あとから開発で変更するかもしれませんが、テーブル設計にもとづいてアソシエーションをモデルに書いておきます。

フロントエンド整備

SlimとBootstrapをgemに追加します。jquery-railsはbootstrapのために必要です。

gem 'slim-rails'
gem 'bootstrap'
gem 'jquery-rails'

そしてerbファイルはslimファイルに変更し、中身もslim記法に書き換えます。

さらにapp/assets/javascripts/application.jsに以下を追加

//= require jquery3
//= require popper
//= require bootstrap-sprockets

application.cssをapplication.scssに変更し、以下を追加。

@import "bootstrap"

まとめ

開発環境の準備ができたのでここから開発に入っていきます。
まずは会員登録とログインから実装していきます。ここがしっかりできればあとはフォロー以外はそんなに難しくないかなと思います。

フォローはたぶん一番の山場になりそう。

余談

MySQL 8.0を使った場合のmysql 認証エラー。一応将来のためのログとしてここに残しておきます。

$ docker-compose run web rake db:create
Starting films-app_db_1 ... done
#<Mysql2::Error: Authentication plugin 'caching_sha2_password' cannot be loaded: /usr/lib/x86_64-linux-gnu/mariadb18/plugin/caching_sha2_password.so: cannot open shared object file: No such file or directory>
Couldn't create database for {"adapter"=>"mysql2", "encoding"=>"utf8", "pool"=>5, "username"=>"root", "password"=>"root", "host"=>"db", "database"=>"films_development"}, {:charset=>"utf8"}
(If you set the charset manually, make sure you have a matching collation)
Created database 'films_development'
#<Mysql2::Error: Authentication plugin 'caching_sha2_password' cannot be loaded: /usr/lib/x86_64-linux-gnu/mariadb18/plugin/caching_sha2_password.so: cannot open shared object file: No such file or directory>
Couldn't create database for {"adapter"=>"mysql2", "encoding"=>"utf8", "pool"=>5, "username"=>"root", "password"=>"root", "host"=>"db", "database"=>"films_test"}, {:charset=>"utf8"}
(If you set the charset manually, make sure you have a matching collation)
Created database 'films_test'

参考

MySQL 8.0正式版がリリース。性能が最大で2倍、JSONデータや地理情報などサポート。ロールによるユーザー権限の管理も可能に - Publickey

Docker で MySQL 8.0.4 を使う - Qiita

MySQL :: MySQL 8.0 Reference Manual :: 6.5.1.3 Caching SHA-2 Pluggable Authentication

Ruby on Rails 5.2正式版発表。Active Storageによるクラウドストレージ対応、Redisでのキャッシュ対応など - Publickey

マイグレーションファイル編集

Ruby - RailsでUserIDに一意制約を設けたい(121938)|teratail

Rails 複数のカラムに 一意制約 (ユニーク)を設ける - yamarkz's blog

Active Record バリデーション | Rails ガイド

初めてのプライベート開発 その1

仕事で途中からの開発に参加した経験はあるのですが、要件定義からの開発をしてみたくてプライベートでWebアプリ制作に挑戦しています。

4月初頭にrails newしたはいいものの、要件定義やDB設計を調べたり、仕事でバタバタしたりして間が空いてしまい、rubyrailsのコマンドを少し忘れているので、もう一度開発環境準備から始めてここに備忘録を残していきたいと思います。

ちなみにプロジェクトは要件定義も含めてすべてBacklogで管理しています。仕事でも使っていて使いやすいので。

要件定義

まず作りたいと思っているのは、見た映画を登録して管理できる、映画のアルバムみたいなアプリです。
で、それにフォローやいいねとかできて他の人とシェアできるといいなと。

そのうえで、ざっくりとどういう仕様にしたいかというのをリストアップしていきました。

必要な機能を考える

要件を出してアプリの方向性が固まってきたら、最低限必要な機能を洗い出します。
こんな感じになりました。

  • 会員登録
    • ユーザー名
    • メールアドレス
    • パスワード
  • ログイン
    • ユーザー名またはメールアドレス
    • パスワード
  • ユーザー情報編集
    • ユーザー名
    • アカウント名
    • メールアドレス
    • パスワード変更
    • 自己紹介文
    • アカウント削除
  • 見た映画管理
    • 作品登録
      • タイトル
      • 作品画像(自動or手動)
      • 監督、出演者など(手動)
      • コメント(公開or非公開)
      • 好きなシーン(公開or非公開)
      • タグ
      • 鑑賞した映画館
      • 鑑賞した日
    • 閲覧
    • 編集
    • 削除
  • タイムライン
    • フォローする
    • フォローした人の最新投稿を表示
      • 投稿者のアイコンとユーザー名
      • 作品画像
      • タイトル
      • コメント
        • コメントのやり取りでコミュニケーションができる
      • 何分前に投稿したか
      • いいね
  • 検索
    • キーワード検索
      • タイトル、監督など、コメント、好きなシーンからマッチ
    • タグ検索
  • お問い合わせ
  • プライバシーポリシー
  • 利用規約

ワイヤーフレーム作成

出した機能をもとにワイヤーフレームを作り、実際の画面のイメージを膨らませていきます。
これはBacklogを開発しているヌーラボのサービスである、Cacooを使いました。
Cacooって4,5年前に使った頃はかなり動作が重くて保存がしにくかったので使わなくなっていたんですが、久しぶりに触ってみたら結構改善されていました。
FlashからHTML5に移行したからかな。なにはともあれサクッと図を作るには重宝するサービスです。

PCとスマホ用のワイヤーフレームを作って、スマホはProttでリンクを貼ったときのページ遷移も確認してなるべくページに漏れがないように作っていきました。
Prottずっと使ってみたくて、初めて使ってみましたが、ページ漏れがないか確認するにはとても便利です。リンクのアニメーションも選べて動作も軽いので使いやすいです。

画面遷移図作成

ワイヤーフレームでページのイメージができたので、Railsのクラス名、アクション名を意識しながらURLパスを決めていきます。
こんな感じにしました。

f:id:khanamoto:20180426174749p:plain

デザイン

デザインは同僚のデザイナーにお願いしました。
開発と同時進行でページのデザインとロゴ作成をしてもらいます。

データベース設計

次はたぶん最初の肝になるデータベース(DB)の設計です。
DBの本を数冊読んだり、仕事の開発でDBからデータ取ってきたり、テーブル構造みたりしてたのでRDBMSの基本は理解できてましたが、1から設計となるとまた少し違いました。

論理設計

エンティティの抽出と定義をして、テーブル形式で表現していきます。
一通りできたら正規化をしてテーブルを分割します。
それができたらER図にして、リレーションにおかしいところや漏れがないか確認します。
こんな感じになりました。

f:id:khanamoto:20180426175653p:plain

物理設計

パフォーマンス等の詳しい部分は正直まだ時間がかかりそうなので、とりあえず以下を行いました。

  • データ型の決定
  • 制約条件の決定


ここまでで要件定義、画面設計、DB設計が一通りできたので、開発環境を整備して開発に入っていきます。
次回は開発環境について書こうと思います。


参考

初めての個人WEBサービスを作り始める前にやるべき設計

Ruby on Rails実践講座 - Twitterの簡易クローンを開発する - シラバス(Cyllabus)

STEP2-9.データベースを設計してみる / チームラボ オンラインスキルアップ課題

若手プログラマー必読!5分で理解できるER図の書き方5ステップ

XAMPPでサクッとWordPressローカル環境を立てる

社内のデザイナーがWordPressの勉強したいというので、ローカル環境の立て方教えました。いきなりDockerやVagrantは学習コストが高いので、手軽に開発環境を作れるXAMPPを使いました。
ということで自分の復習も兼ねて、XAMPPで一からWordPressのローカル環境を作る方法をここにまとめておきます。

Windows 10 中心での説明ですが、macOS の場合も併記しています。

予備知識

設定の説明に入る前にまずXAMPPがどういう仕組みで動いているのかを少し解説します。

XAMPPとは?

X - WindowsLinuxmacOSSolarisクロスプラットフォーム
A - ApacheのA
M - MySQLまたはMariaDBのM
P - PHPのP
P - PerlのP

Wikipediaより引用

Webアプリケーションの実行に必要なソフトウェアをまとめたパッケージのことです。言葉としてはLAMPLinux, Apache, MySQL, PHP)のほうが有名だと思いますが、XAMPPもLAMP環境と同じことができます。

ちなみに最新のXAMPPのデータベースはMySQLを改良して作られたMariaDBというものをパッケージングしています。ですが、表示はほとんどMySQLと同じです(コマンドもmysql)。

XAMPPの仕組み

WordPressはWebアプリケーションです。

Webアプリケーション(以下アプリ)を動かすために必要なのは、ブラウザ、サーバー、データベースです。
アプリのプログラムはサーバーに配置します。そしてWebページを表示するときは、ブラウザ(クライアントとも言います)がサーバーに実行してほしいファイルをリクエストし、サーバーは必要なデータをデータベースから取得し、サーバーからブラウザに結果がレスポンスされます。
クライアントclient(お客)とサーバーserver(給仕人)という名前からよく例えられるのは、レストランでのお客さんとウェイターの関係ですね。お客さんが料理を要求(リクエスト)し、ウェイターが料理を運ぶ(レスポンス)という関係です。

XAMPPの中のApacheがサーバー、MariaDBがデータベース、PHPがアプリのプログラムの役割をします。これらは自分のPCの中(ローカル)に設置するので、特別な設定をしない限り自分のPCからしかアクセスできません。そしてブラウザでローカルアドレスを指定することで、ローカル環境のサーバーやデータベースにアクセスして、自分のPC内だけでアプリを動作させることができます。

このようにして自分のPCの中だけでWordPressなどの動作環境を作ることができるのがXAMPPです。

XAMPPでWordPressローカル環境を立てる

ではローカル環境を作っていきましょう(開発環境を作ったりすることをエンジニアは「立てる」とも言います)。

1.XAMPPのインストール

Windowsの場合

まず下記から各OS向けXAMPPのインストーラーをダウンロードします。Windows版は32bit版しかありませんが、64bitのマシンでも使えるので大丈夫です。

XAMPP Installers and Downloads for Apache Friends

PHPバージョンは特に気にしなくていいのなら最新の7.2.2を選択します。古いバージョンが必要なら下記からダウンロードしてください。

Download XAMPP

次に、ダウンロードしたインストーラー(xampp-win32-7.2.2-0-VC15-installer.exe)を実行してセットアップをします。

途中 Select Components というダイアログでインストールする構成ファイルを選択できますが、今回はWordPress環境を作るため FileZilla FTP Server、Mercury Mail Server、Tomcat は使わないと思うので、チェックを外しても大丈夫です。

f:id:khanamoto:20180308122156j:plain

インストールする場所も基本的にデフォルトの C:\xampp でいいです。途中でWindows Defenderなどの警告が出ますが、問題ないので「アクセスを許可する」などを押して進めます。

セットアップが完了すると、XAMPPのコントロールパネル(管理画面)を立ち上げるかのチェックボックスがあります。とりあえず立ち上げてみましょう。英語とドイツ語どっちで設定するか聞いてきますが、好きな方を選んで下さい。

f:id:khanamoto:20180308123327j:plain

上のような画面が立ち上がればOKです。一旦閉じましょう。

macの場合

macの場合はトップページからダウンロードすると XAMPP-VM という仮想マシンをインストールすることになり初心者には使いづらいので、その他のバージョンから「7.2.2 / PHP 7.2.2」をダウンロードしてください。そうすると従来のネイティブ・インストーラーがダウンロードできます。「XAMPP-VM / PHP 7.2.2」じゃないです。

Download XAMPP

セットアップはWindowsとだいたい同じですが、Select Componentsのときは注意してください。
XAMPP Core Files と XAMPP Developer Files の両方にチェックを入れます。そうしないと、必要なファイルがダウンロードできずにApacheなどの起動ができなくなります。

f:id:khanamoto:20180308191736j:plain

セットアップができたら、macでも管理画面を起動してみます。

アプリケーションフォルダの中にXAMPPというフォルダができているので、その中の「manager-osx.app」を実行してください。管理者権限のパスワードを求められたら入力してOKです。

起動できたら、「Manage Servers」タグのMySQLApacheをStartして緑になれば成功です。

2.WordPressのダウンロード

次は下記からWordPressのソースファイルをダウンロードします。これも問題なければ最新版でいいです。

日本語 « ダウンロード — WordPress

ダウンロードしたフォルダを解凍すると wordpress というフォルダが展開されます。中身は下記のような構成です。

f:id:khanamoto:20180308123908j:plain

3.XAMPPでWordPressを起動してみる

XAMPPでWordPressを起動するための設定をしていきます。

  • xamppフォルダにwordpressファイルを配置

インストールしたXAMPPファイルは C:\xampp (mac: アプリケーションフォルダ直下)にあると思うので、そこに移動します。
その中に「htdocs」というフォルダがあるので、htdocs配下にダウンロードしたwordpressフォルダを配置します。
配置した後のパスで言うと C:\xampp\htdocs\wordpressmac: /Applications/XAMPP/xamppfiles/htdocs/wordpress)ですね。

配置できたら、 C:\xampp の中の xampp-control.exe (mac: /Applications/XAMPP/manager-osx.app)を起動します。これがXAMPPコントロールパネルの実行ファイルです。
起動するとさっきみたコントロールパネルが立ち上がります。
そしたらApacheMySQLをstartします。下記のようにApacheMySQLの部分が緑色になれば、ApacheMySQLの起動に成功しています。もし黄色になっていると失敗しているということなので、トラブルシューティングなどを参考に問題を解決してみてください。

ApacheMySQLの起動に成功したら、ブラウザで localhost/wordpress127.0.0.1/wordpress にアクセスします(パスの「wordpress」部分は C:\xampp\htdocs\ 配下に設置したWordPressのフォルダ名なので、もしフォルダ名を wp など好きなものに変えている場合は、パスも wp などに変えて localhost/wp などにしてください)。

localhostというのは今自分が使っているコンピュータのことを指します。これを指定することでブラウザからXAMPPのサーバーにアクセスします。その後に /wordpress とパスを指定すると、xamppのサーバーはルート(htdocs)のwordpressフォルダを探し、ブラウザに返すことでWordPressの画面がブラウザで表示されるようになります。
127.0.0.1は自分自身を指すIPアドレスであり、「ローカル・ループバック・アドレス」などと呼ばれます。localhostというのは127.0.0.1の別名のようなものだと考えてください。ちなみに127.0.0.1IPv4という規格でのアドレスであり、IPv6アドレスでは「::1」になります。
というわけで、以下に出てくるブラウザのアドレスに入力する localhost127.0.0.1 でもアクセスできます。

さてうまくアクセスできると、下記のようにWordPressのセットアップ画面が表示されます。

f:id:khanamoto:20180308132255j:plain

ここで冒頭の文章を読んでください。

作業を始める前にデータベースに関するいくつかの情報が必要となります。以下の項目を準備してください。

セットアップにはデータベースの情報が必要になるので、WordPressのセットアップに進む前に、学習用のデータベース(以下DB)を用意します。

DBとはブログ記事や画像などWordPressで入力して保存するデータを格納しておく場所のことです。DBにデータを格納することで、いろいろなデータの検索や抽出、表示などができるようになります。つまり、上で言われていることはそのデータの置き場所を先に作ってね、ということです。

4.データベースを用意する

ApacheMySQLを起動したまま、ブラウザで localhost にアクセスします。
するとXAMPPのダッシュボード画面が表示されます。そしてグロナビの一番右にある「phpMyAdmin」をクリックします。

そして下記のようにphpMyAdminの管理画面が表示されたらDBを作成していきます。

f:id:khanamoto:20180308141036j:plain

4-1.MySQL接続の照合順序の設定

phpMyAdminトップページの一般設定で、サーバー接続の照合順序を「utf8_general_ci」にする。

照合順序とは、「簡単に言うと文字列の比較方法の指定」のことで、「文字コード言語名比較法」という指定方法で、並び順に一致するものを比較します。
ここは正直明確にはわかってないのでまた調べたいと思う。

4-2.DB新規作成

グロナビの「データベース」か、サイドメニューの上にある「New」をクリックします。
デフォルトでいくつかDBがありますが、特に気にしないでそのままにしておきます。下記を入力してDBを新規作成してください。

「データベース名」:好きなDB名(英語始まりの小文字、スネークケースにしましょう。)
照合順序:utf8_general_ci

名前が決められなかったら wordpress とでもしてください。

できたら上にあるパンくずリストの「サーバ: 127.0.0.1 »」をクリックしてトップページに戻り、「データベース」をクリックして、自分で作成したDBが設定通りにできているか確認してください。
下記のようになっていたらOKです。

f:id:khanamoto:20180308144745j:plain

4-3.DBのrootのパスワードを設定

XAMPPのDBにはデフォルトでrootという特権ユーザー名が設定されていますが、パスワードは空になっています。
ローカル環境ですが、セキュリティ対策のためにrootにパスワードを設定しておきましょう。

DBのrootユーザーのパスワード設定

Windowsの場合

これはコマンドプロンプトで設定します。コマンドプロンプトを起動したら、以下のコマンドを順に叩いて設定します。
説明用のコメントは書かないでいいです。

# mysqlの実行ファイルの場所までディレクトリ移動
cd C:\xampp\mysql\bin

# パスワード設定をする(コマンドを叩くとパスワードの入力を2回求められるので入力)
mysqladmin -u root password
macの場合

macはターミナルで設定します。
必ずサーバーとDBを起動させた状態で行ってください。でないと下記のようなエラーが出ます。
「error: 'Can't connect to local MySQL server through socket '/Applications/XAMPP/xamppfiles/var/mysql/mysql.sock' (2 "No such file or directory")'」

cd /Applications/XAMPP/xamppfiles/bin

mysqladmin -u root password

phpMyAdminにも設定

このままだとphpMyAdminにアクセスしたとき下記のようにエラーになるので、phpMyAdminにもrootユーザーのパスワードを認識させる必要があります。

f:id:khanamoto:20180308153332j:plain

C:\xampp\phpMyAdmin\config.inc.phpファイル(mac: /Applications/XAMPP/xamppfiles/phpmyadmin/config.inc.php) をテキストエディタで開き、「$cfg['Servers'][$i]['password']」で検索し、さっきコマンドプロンプトで設定したrootユーザーのパスワードを書いて保存します。

$cfg['Servers'][$i]['password'] = 'rootユーザーのパスワード';

これでDBの用意はできたので、改めて localhost/wordpress にアクセスします。

5.WordPressセットアップ

DB設定

「さぁ、始めましょう」ボタンで移動したら以下のように設定します。

データベース名:自分で作ったDB名
ユーザー名:root(デフォルトのまま)
パスワード:さっき設定したrootユーザーのパスワード
データベースのホスト名:localhost(デフォルトのまま)
テーブル接頭辞:wp_(デフォルトのまま)

できたら「送信」ボタンを押して、「インストール実行」してください。

WordPress設定

ここではDBではなく、WordPressのユーザー名などを設定します。
最低限以下は設定してください。ミスっても後で変えられます。

サイトのタイトル:好きに
ユーザー名:好きに
パスワード:好きに

入力できたら「WordPressをインストール」ボタンを押してください。

成功画面が出たら、設定したWordPressのユーザー名とパスワードでログインしてみます。

ログインできました!

f:id:khanamoto:20180308155620j:plain

6.PHPの設定

最後に言語や標準時の設定などを日本語環境にするために、PHPファイルをいくつか編集します。

C:\xampp\php\php.iniファイル(mac: /Applications/XAMPP/xamppfiles/etc/php.ini)を開いて、以下のように編集します。

date.timezone=Europe/Berlin
↓
date.timezone=Asia/Tokyo
  • マルチバイト
;mbstring.language = Japanese
↓
mbstring.language = Japanese
;mbstring.internal_encoding =
↓
mbstring.internal_encoding = UTF-8
  • エラー表示レベル
error_reporting=E_ALL & ~E_DEPRECATED & ~E_STRICT
↓
; E_NOTICE(注意メッセージ)以外の全てのエラーを表示する
error_reporting=E_ALL & ~E_NOTICE

以上の設定ができたらApacheを再起動してください。
そして localhost にアクセスし、グロナビの「PHPInfo」から変更内容が反映されているか確認します。
例えばタイムゾーンを確認すると、 Asia/Tokyo になっていればOKです。

f:id:khanamoto:20180308172434j:plain

まとめ

お疲れ様でした。以上でXAMPPを使ったWordPressローカル環境の構築は終わりです。

開発環境1つにしても、Webの基礎知識がいろいろ必要なので、いい復習になりました。

あとは問題が起きたときなど、都度調べて学習していってください。

トラブルシューティング

Apacheが起動できない

XAMPPではApacheを起動するためポートの80番を使っています。ですが、他のアプリケーションでも80番を使っていると起動できません。なので他のアプリケーションかXAMPPのポート番号を変える必要があります。
例えばよくあるのが、Skypeで「ポート80と443を使用」している場合です。その場合はSkypeの接続設定を変えてみてください。

XAMPPのポート番号を変える場合は下記を参考にしてください。

XAMPPでインストールしたApacheが起動しないとき | PHPプログラミングの教科書 [php1st.com]

ApacheMySQLのファイルを編集したのに、変更内容が反映されない

コントロールパネルでStop→Startをして再起動してみてください。起動時にしか読み込まれないファイルがあるので、その場合は再起動が必要です。

参考

予備知識

Webアプリケーションの仕組み

レンタルサーバーとは?契約からできることを初心者にもわかりやすく解説します | カゴヤのサーバー研究室

XAMPP for OS Xからかなり変わったXAMPP-VM for OS X のメモ - uzullaがブログ

サーバー

今更聞けない!Webサーバーの仕組みと構築方法

ローカルホストとは - IT用語辞典

localhost - Wikipedia

ローカル・ループバック・アドレス(127.0.0.1)とは?:Tech TIPS - @IT

データベース

XAMPPを使ってWordPress用にローカル環境構築する方法【初心者向け】 | TechAcademyマガジン

MySQLのCollationを理解するためにまとめてみた。 - 6VOX

MySQL :: MySQL 5.6 リファレンスマニュアル :: 10.1.2 MySQL での文字セットと照合順序

MySQLでデータベース作成する「CREATE DATABASE」 | UX MILK

最新のXAMPPでのMySQLのパスワードの変更方法などについて | ゆうそうとITブログ

mysqlが起動できない - Qiita

docker-compose.ymlのトップレベルに書くvolumesについて

名前付きvolume

docker-compose.ymlの書き方について調べていると、以下のような設定がたまにあります。

version: "3.2"
services:
  web:
    image: nginx:alpine
    volumes:
      - type: volume
        source: mydata
        target: /data
        volume:
          nocopy: true
      - type: bind
        source: ./static
        target: /opt/app/static

  db:
    image: postgres:latest
    volumes:
      - "/var/run/postgres/postgres.sock:/var/run/postgres/postgres.sock"
      - "dbdata:/var/lib/postgresql/data"

volumes:
  mydata:
  dbdata:

今回疑問に思ったのは、一番下にある volumes はどういう役割があるのか、ということです。 servicesの中にあるvolumesは普通に見るけど、外にあるvolumesって何だろうと。

これはトップレベルに定義するvolumesで、「名前付きvolume」と言うらしいです。 なるほど、一番上の階層はトップレベルっていうんですね。

そして名前付きvolumeは単体のサービス内だけでなく、複数のサービス(例えばwebとdb)内のvolumesから参照できるようです。

ちなみに

サービスにはコンテナがアタッチされるため、サービスの実態はコンテナです。

データの永続化について

名前付きvolumeを使うと、 docker-compose down や docker-compose prune とかでコンテナを削除したらDBのデータも消えるっぽい?

この方式は各サービスのvolume:ではホスト側はボリュームの名称を指定するのでいちいちディレクトリパスを書かずに済むのですが、dockerコマンドでボリュームを削除するとホスト側のディレクトリごと削除されてしまう

トップレベルに書かないで、サービスごとに書けば問題ないみたいだが、また機会があれば検証してみようと思います。

とりあえず今は名前付きvolumeは使わないで進めてみます。

参考

Compose file version 3 reference | Docker Documentation

さわって理解するDocker入門 第4回 | オブジェクトの広場
→「volumes - volume(データの永続化領域)の定義」のところ

Docker Composeのトップレベルvolumesでホストのディレクトリをマウントする

Docker for Macを使ってRuby on Rails開発環境を構築する | mediba Creator × Engineer Blog

Docker for MacでRails/MySQLの開発環境を作る

環境

プロジェクトを定義する

プロジェクトディレクトリを作成し、以下のファイルを全て同じ階層に置きます。

.
├── Dockerfile
├── Gemfile
├── Gemfile.lock
├── docker-compose.yml
└── .env

以下は各ファイルの内容です。 空のGemfile.lockも作っておきましょう。

Dockerfile

# Rubyの公式コンテナ(Docker イメージ、実行環境、命令の標準セットを含む)を使う
FROM ruby:2.5.0

# RubyイメージはDebianイメージをベースにしているため、apt-getを使い依存関係をインストールする
RUN apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs

# /lib/railbook を作業用ディレクトリに設定する
# 以下のRUN,CMD,ENTRYPOINT,COPY,ADDコマンドはこのディレクトリ配下で実行される
RUN mkdir /railbook # --- 訂正前 --- RUN mkdir /lib/railbook
WORKDIR /railbook # --- 訂正前 --- WORKDIR /lib/railbook

# Gemfile をコピーして bundle install する
COPY Gemfile /railbook/Gemfile # --- 訂正前 --- ADD Gemfile /lib/railbook/Gemfile
COPY Gemfile.lock /railbook/Gemfile.lock # --- 訂正前 --- ADD Gemfile.lock /lib/railbook/Gemfile.lock
RUN bundle install

COPY . /railbook # --- 訂正前 --- ADD . /lib/railbook

Gemfile

source 'https://rubygems.org'

gem 'rails', '5.1.5'

docker-compose.yml

version: '3'
services:
  db:
    image: mysql:5.7
    ports:
      - "3306:3306"
    env_file: .env # 環境設定はパスワードなども含むため、.envにして同階層に配置し、外部ファイルから読み込む
    volumes:
      - ./db/mysql:/var/lib/mysql:cached

  web:
    build: .
    depends_on:
      - db
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    ports:
      - "3000:3000"
    volumes:
      - .:/railbook:cached # --- 訂正前 --- - ./lib/railbook:/lib/railbook:cached

.env

MYSQL_USER=任意のユーザー名
MYSQL_ROOT_PASSWORD=任意のパスワード

プロジェクトを構築する

まず新規アプリを作成します。

$ docker-compose run web rails new . --force --database=mysql
Creating network "railsintro_default" with the default driver
Creating railsintro_db_1 ... done
Building web
3e731ddb7fc9: Pull complete
47cafa6a79d0: Pull complete
79fcf5a213c7: Pull complete
68e99216b7ad: Pull complete
4822563608bb: Pull complete
9d614f26bec1: Pull complete
1c758cfc0888: Pull complete
8a4fbc3666ca: Pull complete
Digest: sha256:ed5fc221d5d03d89e1f8c1f7780b98bc708e68b4d8dba73594d017e999156619
Status: Downloaded newer image for ruby:2.5.0
 ---> bae0455cb2b9
Step 2/8 : RUN apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs
 ---> Running in e553e712bc3f
Reading package lists...
Building dependency tree...
Reading state information...
libpq-dev is already the newest version (9.6.6-0+deb9u1).
The following additional packages will be installed:
  dpkg-dev fakeroot libalgorithm-diff-perl libalgorithm-diff-xs-perl
  libalgorithm-merge-perl libfakeroot libuv1
Suggested packages:
  debian-keyring
The following NEW packages will be installed:
  build-essential dpkg-dev fakeroot libalgorithm-diff-perl
  libalgorithm-diff-xs-perl libalgorithm-merge-perl libfakeroot libuv1 nodejs
0 upgraded, 9 newly installed, 0 to remove and 20 not upgraded.
Need to get 5328 kB of archives.
After this operation, 17.0 MB of additional disk space will be used.
Get:1 http://deb.debian.org/debian stretch/main amd64 dpkg-dev all 1.18.24 [1592 kB]
Get:2 http://deb.debian.org/debian stretch/main amd64 build-essential amd64 12.3 [7346 B]

〜中略〜

WARNING: Image for service web was built because it did not already exist. To rebuild this image you must use `docker-compose build` or `docker-compose up --build`.
/lib/railbook/Gemfile not found

以上で土台となるスケルトン(骨組み)が作成できました。そしてイメージを再構築する必要があるので、buildコマンドを叩きます。

$ docker-compose build
db uses an image, skipping
Building web
Step 1/8 : FROM ruby:2.5.0
 ---> bae0455cb2b9
Step 2/8 : RUN apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs
 ---> Using cache
 ---> 26f1748c3d95
Step 3/8 : RUN mkdir /lib/railbook
 ---> Using cache
 ---> c7beaa0e6aa0
Step 4/8 : WORKDIR /lib/railbook
 ---> Using cache
 ---> 5484205f8d5c
Step 5/8 : ADD Gemfile /lib/railbook/Gemfile
 ---> Using cache
 ---> 910e85a15616
Step 6/8 : ADD Gemfile.lock /lib/railbook/Gemfile.lock
 ---> Using cache
 ---> 4ba7b0021eea
Step 7/8 : RUN bundle install
 ---> Using cache
 ---> 948e06ccc33c
Step 8/8 : ADD . /lib/railbook
 ---> c1881c2864b8
Successfully built c1881c2864b8
Successfully tagged railsintro_web:latest

データベースに接続…と思ったら

config/database.ymlを書き換え…config/database.ymlがない! どこで間違えたのか調べます。 Dockerfileとかで指定した /lib/railbook がなんか怪しい気がしますね。

一旦、コンテナとイメージを削除してbuildからやり直してみます。

$ docker container rm CONTAINER ID

$ docker image rm IMAGE ID

とりあえずDockerfileとdocker-compose.ymlを公式と同じ書き方にしてbuildしてみると、ルートにappなどのディレクトリが自動でたくさん作成され、config/database.ymlも作成されました。 build中にターミナルで表示されるメッセージも後半部分が違っています。

そこでエラーメッセージをよく確認すると、最初にdocker-compose runしたときの最後のエラーメッセージに原因が書いてありました。

/lib/railbook/Gemfile not found

つまりdocker-compose.ymlのwebのvolumesの指定がおかしかったのです。 volumesのホスト側はGemfileと同じ階層を指定しなければいけなかったようです。

    volumes:
      - ./lib/railbook:/lib/railbook:cached

この箇所を以下のように修正します。

    volumes:
      - .:/railbook:cached

ついでにDockerfileのADDコマンドをCOPYコマンドに変えておきます。 Dockerfile のベストプラクティス — Docker-docs-ja 1.9.0b ドキュメント

修正箇所は最初に記載したコードに記しておきました。

そして再び、 docker-compose run web rails new . --force --database=mysql を叩きます。 今度はうまくいきました。

改めてデータベースに接続

config/database.ymlの username とpassword をdocker-compose.ymlのdbサービスで設定したものに書き換えます。


ここから追記 2018-4-27

database.ymlには username とpassword の他に、hostをdocker-composeで定義したDBのサービス名にしないといけません。dbとwebでコンテナをわけているので、hostをdbにしないと「/var/run/mysqld/mysqld.sock' (2 "No such file or directory")」のようなソケットエラーが出ます。

database.yml(抜粋)

〜中略〜

default: &default
  adapter: mysql2
  encoding: utf8
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: 任意のユーザー名
  password: 任意のパスワード
  host: db

development:
  <<: *default
  database: films_development

〜中略〜

追記終わり


起動します。

$ docker-compose up

起動を確認できたら、一旦 Ctrl-C で停止します。 最後にデータベースを作成します。

$ docker-compose run web rake db:create

バックグラウンドで再起動します。

$ docker-compose up -d

ページが表示されるか確認する

ブラウザで http://localhost:3000 に接続して、Railsのウェルカムページ「Yay! You’re on Rails!」の画面が表示されればOKです。

感想

慣れてないと色々調べるのに時間はかかるが、一度設定ファイル作れば起動は楽になります。なんだかんだ不明点を調べるのに1日かかりましたが。 今度は今話題のKubernetesも試してみようと思います。

主な参考資料

クイックスタート・ガイド:Docker Compose と Rails — Docker-docs-ja 17.06.Beta ドキュメント

Quickstart: Compose and Rails | Docker Documentation
英語版のほうがversionなど新しかったので、基本的な書き方はこちらに沿って行いました。

[Rails] DockerでRails + MySQLの開発環境をつくる手順 - Qiita

Rails with docker-composeで'/tmp/mysql.sock'がねえよと怒られたとき - Qiita

RailsプロジェクトのDocker導入手順 | 酒と涙とRubyとRailsと

Docker & Rails: Running a Rails Development Environment in Docker | Codeship | via @codeship

Cookpad Inc. · GitHub

NeovimでGo言語の開発環境作ってみた

blog.craftz.dog

こういうかっこいいエディター作りたいなと思って、上の記事の設定を取り入れつつ、適当にしていたVimの設定を見直してみた(普段はVSCode使ってた)。

環境はmacなので、Windowsでは検証してない。
あと最終的な設定内容はこちらを参照。GitHub - khanamoto/dotfiles

ざっくり環境

Neovimの導入

のっけからVimでなくNeovim(以下nvim)に乗り換える。
元々Vim+NeoBundleを使ってたけど、調べてみるとVimはNeovimが、NeoBundleはdein.vimがモダンみたいなので。

  • homebrewでneovimをインストール
$ brew update
$ brew upgrade
$ brew install neovim
  • ~/.config/nvimディレクトリを作成して、その中にinit.vimファイルを作る(~/.config/nvim/init.vim)。これがVimの.vimrcに当たる。nvim起動時に読み込まれる。 まずは基本設定
"---------------------
" 文字
"---------------------
" 読み込み時の文字コード
set encoding=utf-8
" Vim Script内でマルチバイトを使う場合
scriptencoding utf-8
" 保存時の文字コード
set fileencoding=utf-8
" 読み込み時の文字コードの自動判別. 左側が優先される
set fileencodings=ucs-boms,utf-8,euc-jp,cp932
" 改行コードの自動判別. 左側が優先される
set fileformats=unix,dos,mac

"---------------------
" 行
"---------------------
" 行数表示
set number
" 折り返し
set wrap

"---------------------
" インデント(Go向け)
"---------------------
set noexpandtab
set tabstop=4
set shiftwidth=4
set autoindent

"---------------------
" 作らない系
"---------------------
"スワップファイルを作らない
set noswapfile
"バックアップファイルを作らない
set nobackup
"undoファイルを作らない
set noundofile

"---------------------
" その他
"---------------------
" クリップボードの共有
set clipboard=unnamed
" イントロダクション非表示
set shortmess+=I

dein.vimの導入

  • deinをインストールするためにinit.vimに以下を追記。
"---------------------
" dein
"---------------------
" プラグインが実際にインストールされるディレクトリ
let s:dein_dir = expand('~/.cache/dein')
" dein.vim 本体
let s:dein_repo_dir = s:dein_dir . '/repos/github.com/Shougo/dein.vim'

" dein.vim がなければ github から落としてくる
if !isdirectory(s:dein_repo_dir)
  execute '!git clone https://github.com/Shougo/dein.vim' s:dein_repo_dir
endif
execute 'set runtimepath^=' . s:dein_repo_dir

" 設定開始
if dein#load_state(s:dein_dir)
  call dein#begin(s:dein_dir)

  " プラグインリストを収めた TOML ファイル
  " 予め TOML ファイルを用意しておく
  let s:toml      = s:dein_dir . '/.dein.toml'
  let s:lazy_toml = s:dein_dir . '/.dein_lazy.toml'

  " TOML を読み込み、キャッシュしておく
  call dein#load_toml(s:toml,      {'lazy': 0})
  call dein#load_toml(s:lazy_toml, {'lazy': 1})

  " 設定終了
  call dein#end()
  call dein#save_state()
endif

" もし、未インストールものものがあったらインストール
if dein#check_install()
  call dein#install()
endif
  • さらに~/.cache/dein直下に.dein.tomlファイルと.dein_lazy.tomlファイルを作りそれぞれ以下を記述(dein.tomlとdein_lazy.tomlの先頭のドットはつけなくてもOK。僕は設定系をドットファイルでまとめて管理しているのでドットファイルにしています)。

.dein.toml

[[plugins]]
repo = 'Shougo/dein.vim'

.dein_lazy.toml

[[plugins]] # TOMLのシンタックスハイライト
repo  = 'cespare/vim-toml'
on_ft = 'toml'

[[plugins]] # ステータス行を見やすく
repo = 'itchyny/lightline.vim'

追記した後、

$ nvim

とiTerm2でたたくと ~/.cache/deinのreposディレクトリ配下にdein.vimと関連プラグインがインストールされる。

作り込み

ここから冒頭の記事の設定を作り込んでいく。

  • tmuxをhomebrewで入れる。tmuxの使い方は他の方の記事を見てください。
$ brew install tmux

セッションの確認
$ tmux ls 
  • nvimの画面分割・ファイラ・エラー表示設定追加

init.vim

"---------------------
" vim側の画面分割
"---------------------
" 画面分割
nmap ss :split<Return><C-w>w
nmap sv :vsplit<Return><C-w>w
" 画面移動
nmap <Space> <C-w>w
map s<left> <C-w>h
map s<up> <C-w>k
map s<down> <C-w>j
map s<right> <C-w>l
map sh <C-w>h
map sk <C-w>k
map sj <C-w>j
map sl <C-w>l
" 画面リサイズ
nmap <C-w><left> <C-w><
nmap <C-w><right> <C-w>>
nmap <C-w><up> <C-w>+
nmap <C-w><down> <C-w>-

"---------------------
" vimfilerの設定(ファイル表示)
"---------------------
nmap sf :VimFilerBufferDir<Return>
nmap sF :VimFilerExplorer -find<Return>
nmap sb :Unite buffer<Return>
let g:vimfiler_as_default_explorer = 1
let g:vimfiler_safe_mode_by_default = 0
let g:vimfiler_enable_auto_cd = 0
let g:vimfiler_tree_leaf_icon = ''
let g:vimfiler_tree_opened_icon = '▾'
let g:vimfiler_tree_closed_icon = '▸'
let g:vimfiler_marked_file_icon = '✓'

"---------------------
" aleの設定(Lintエラー)
"---------------------
nmap <silent> <C-k> <Plug>(ale_previous_wrap)
nmap <silent> <C-j> <Plug>(ale_next_wrap)

.dein.toml

[[plugins]] # Unite.vimが依存
repo = 'Shougo/vimproc.vim'
build = 'make'

[[plugins]] # vimfilerが依存
repo   = 'Shougo/unite.vim'

[[plugins]] # VSCodeっぽいファイラ(後継としてdefx.nvimが開発中)
repo = 'Shougo/vimfiler'

.dein_lazy.toml

[[plugins]] # VSCodeっぽい非同期のエラー表示
repo = 'w0rp/ale'

詳しい使い方は冒頭の記事を参照してもらうとして、必要なプラグインについて補足。

ファイラの設定でvimfilerプラグインを入れているが、これを動かすためにvimproc.vimとunite.vimが必要(unite.vimの後継でより高速なdenite.nvimもあるが、vimfilerと組み合わせられないので、今回はunite.vimを使う)。
vimproc.vimはインストールしたあとにビルドが必要だが、.dein.tomlに以下を書いてもなぜかビルドできなかった。

build = 'make'

もしくは

hook_post_source = '''
  call dein#add('Shougo/vimproc.vim', {'build': 'make'})
'''

ビルドしないでファイラを開くと、例えば「:sf」とたたいたときこんなエラーが出る。 f:id:khanamoto:20171217193323j:plain

結局調べても原因がわからなかったので、Makefileのあるところまで移動して手動でビルドした。

$ cd ~/.cache/dein/repos/github.com/Shougo/vimproc.vim
$ make

そうすると ~/.cache/dein/repos/github.com/Shougo/vimproc.vim/lib にvimproc_mac.soが作られて、ビルドできていることが確認でき、エラーも消える。

ちなみにvimfilerの後継としてdefx.nvimというプラグインが開発中らしい。

Go周り

あとはGoの環境作り。以下追記。

.dein_lazy.toml

[[plugins]] # goコマンド補完
repo = 'fatih/vim-go'
on_ft = 'go'

[[plugins]] # vim-go代替
repo = 'zchee/nvim-go'
build = 'make'
on_ft = 'go'

[[plugins]] # コード補完
repo = 'Shougo/deoplete.nvim'
# プラグインが dein.vim によって追加されたとき実行
hook_add = 'let g:deoplete#enable_at_startup = 1'

[[plugins]] # コード補完(Golang用)
repo = 'zchee/deoplete-go'
on_ft = 'go'

コード補完はdeoplete.nvimだけでもできるが、Goでより詳しい補完をするためにdeoplete-goを入れる。deoplete-goを入れるには、以下が必要。gocodeはgo getで入れた。

Neovim and neovim/python-client
deoplete.nvim
gocode

vim-go入れたけどなぜか動かない(「エディタのコマンドではありません: GoFmt」って出る)ので、nvim-go入れた。

最終的にこんな見た目に。 f:id:khanamoto:20171217192735j:plain

おまけ

macの標準キーバインディングだとコロンとセミコロンが同じキーで、コロンを打つときにShiftをおさないといけない。しかしこれだとnvimでExコマンド打ったりするときに不便なので、コロンとセミコロンのキーバインディングを入れ替える。

詳しくはこちらを参照。 qiita.com

まとめ

開発環境は調べてみると結構大変なことが多い。ハマりどころで意外と情報がなかったり、調べても調べても解決法がわからなかったり。今回は丸2日位かかった。
それでも出来上がるとエディターをいじるのが楽しくなる。これでより気持ちよくプログラミングできようになると思う。

参考

Neovim+dein

neovim 入門1 - replicityの日記

NeoVim と dein.vim を使ってみる! - Qiita

NeoBundle から dein.vim に乗り換えたら爆速だった話 - Qiita

Vim入門(1): Vimのプラグインを管理するdein.vimの使い方 | Simplie Post

[dein.vim] hook の便利な使い方 - Qiita

初心者向け vimrcの設定方法 - Qiita

VSCodeっぽい開発環境

vim + tmuxでVSCodeっぽい開発環境を作る – 週休7日で働きたい

tmuxの使い方 - Qiita

[Vim] シンプルなファイラー「Vaffle」をつくりました | ここぽんのーと

unite.vimより高速なdenite.nvimを使う - Qiita

Vimメモ : ALE(Asynchronous Lint Engine)で非同期コードチェック - もた日記

vim流tmuxチュートリアル - Qiita

[tmux] 端末起動時に自動で新規セッションを作成 or 既存セッションにアタッチ - Qiita

Vim のカスタマイズ 〜キー割り当て変更方法〜 - Vim のブログ

Denite Compatibility · Issue #380 · Shougo/vimfiler.vim · GitHub
補足:ここで「vimfilerはdenite.vimと一緒に使えるのか?」という質問が出ているが、作者のShougoさんが、vimfilerを拡張してdenite.vimに対応させるのは難しいからvimfilerの後継としてdefx.nvimを作ってると回答している。だからvimfilerを使いたいならunite.vimを使ってくれと。

Go周り

【Go × Vim】 VimでGoを書く - 2015 Spring - Qiita

NeovimでGo言語を快適に書きたい - whileD'iary

VimでGoの開発環境を設定する方法のまとめ - Qiita

おまけ

macOS Sierraでコロンとセミコロンを入れ替える - Qiita