デザイナーもそろそろVimっていいんじゃない？

 

こんにちわ。デザイナーのヒロシです。

「Vim」というエディターをご存知でしょうか？
エンジニアさんがよく使ってる印象がある「高機能」「爆速」で有名なエディターです。
ただ使い方が独特で慣れるまでに時間がかかることで有名です。

 

私も元々はSublime Txt等のエディターを使っていたのですが、GUIが利用できない場面が増えてきてVimに手を出し始めました。

 

Vimはターミナル上で起動するエディターなので、一度覚えてしまえばgitの更新やリモートファイルへのアップロード、リモートサーバへのアクセス〜編集まで、ターミナル上でそのまま作業を続けることができます。

 

要するに作業環境はターミナルだけで良くなるわけです。

 

私もVimにある程度慣れてきたらすごい快適に感じるようになりました。

 

最近ではVagrantなどの仮想環境内での作業、gulpやSassのインストールなどでデザイナーでもターミナルを利用する機会が多くなってきました。
これを機にvimに乗り換えてみてもいいんじゃないでしょうか。

 

ということで本記事では、Vimの良さと利用方法を少しばかり語りたいなぁと思います。

 

Vimを使うメリットとデメリット

 

メリット
・リファレンスが膨大（ググればすぐに記事が見つかります）
・プラグインが豊富なので、自分好みにカスタマイズできる
・設定は使い回しできるので、どんな環境でもすぐに再現できる
（新しいサーバ環境でもエンジニアさんが大概Vim入れてます）
・UNIX（LINUX）コマンドにも慣れることができる

 

デメリット
・操作になれるまでに1ヶ月ぐらいは見ておいた方が良い
・CUI環境での利用を前提としたエディターなので、キーボードのみで操作するためマウスで広範囲のコピペなどができない
・設定やプラグインのインストールの作法に若干慣れが必要

 

個人的に特に便利だと思うのが、設定です！
設定は「vimrc」というファイルを作成して、その中に記述するのですが、一度設定ができてしまえば、どんな環境でも「vimrc」ファイルを作成して、内容をコピペするだけ！
これだけでいつもと同じ使い勝手を再現できます。

 

まずはUNIXコマンドのおさらい

 

cd ディレクトリの移動
ls ディレクトリ内のファイル一覧
pwd 現在のディレクトリのパスを表示
mkdir フォルダーの作成
~ ホームディレクトリに移動

最低限これぐらいで問題ないかなと思います。

 

Vimの起動方法

macだと初めからVimがインストールされているので、デスクトップにHTMLを作成するなら

cd ~/DeskTop/でディレクトリを移動して

vim hoge.html
これだけでOK。
homebrewで管理したい方はこちらを参考にするといいかも。
http://qiita.com/one-a/items/5039dd266b90e18a4242

 

Vimの3つのモード

 

 Normal Mode  コマンド入力モード
 Insert Mode  テキスト入力モード
 Visual Mode  テキスト選択モード

 

Vimで一番戸惑うのは、この3つのモードの存在ですかね。
起動するとまずは「Normal Mode」で始まります。

 

この状態では、テキストの編集はできません。
できることは「カーソルの移動」「テキストのコピペ」「他モードへの移行」「検索」「保存／終了」などを行います。
テキストを編集したら常にこのモードに戻ります。

 

次に「Insert Mode」。「Normal Mode」でカーソルを移動し、「a」または「i」キーでテキストを編集することができます。
編集が終了したら「ESC」または「ctrl + [」などで解除できます。

 

最後に「Visual Mode」。こちらはテキストを選択するモードになります。
単語単位ぐらいであればマウスで選択範囲を作ってコピーできますが、一行コピーや範囲選択などで利用します。
（※マウスで範囲選択をすると行番号や不可視文字など不必要なテキストも含まれてしまいます）

 

使い方は「Normal Mode」でカーソルを移動し、「v」キーを押下します。あとはカーソルを移動すれば選択範囲が広がります。また「V」キー（shift + v）なら行単位で範囲が広がります。

 

戸惑うのはカーソルの動かし方

 

 h  カーソルを左に移動
 j  カーソルを下に移動
 k  カーソルを上に移動
 l  カーソルを右に移動

 

こちらに慣れた方が打ち込むスピードは速くなると思いますが、私は十字キーを使ってます(*´Д`)
ぶっちゃけ十字キーでも問題ないようにも思ったり。。好きに使っていいんじゃないでしょうかw

 

最後に、保存と画面の終了の仕方を

「Normal Mode」で「:」を押下すると、画面最下段にコマンドが表示されます。
この状態で「w」キーで保存。「q」で終了。「q!」で強制終了です。
同時に使うこともできます。「wq」なら保存して終了になります。簡単ですね！

最低限これぐらいを理解すれば、そこまで戸惑うことなくvimを操作できるかなと思います。

 

Vimのコマンドのおさらい

 

※コマンドはNormal Modeで使います

 i  カーソルの場所でInsert Modeに切り替え
 a カーソルの場所から1文字後ろでInsert Modeに切り替え
 x  カーソルの場所の文字を削除
 v  Visual Mode（範囲選択モード）に切り替え
 V  Visual Modeに切り替え、行単位で範囲作成
 :w  ファイルの保存
 :q  ファイルの終了（ファイルを閉じる）
 :q!  ファイルの強制終了（保存せずにファイルを閉じる）

 

他に良く使うコマンド

y  コピー
yy  1行コピー
dd  1行削除
p  ペースト
u  アンドゥ（操作を1つ戻す）
r  リドゥ（操作を1つ進める）
gg  ページの先頭に移動
G  ページの最後尾に移動
ctrl + u  ページを上にスクロールする
ctrl + d  ページを下にスクロールする
/hoge  文字列検索（「/」を入力後文字列を入力）
/hoge の後に n  文字列検索後、次の候補に移動
/hoge の後に N  文字列検索後、前の候補に移動

 

注意する点は、コピー／ペースト、アンドゥ／リドゥぐらいでしょうか。

 

始めは何もしないと行番号がなかったり、バックスペースが効かなかったりするので、また次の機会に設定について詳しくご紹介できればと思います。

 

詳しく紹介されている記事は豊富にあるので、一度見てもらえればよりVimのことが理解できると思います。
http://qiita.com/JpnLavender/items/fabcc79b4ab0d52e1f6d

 

エディターは使い慣れたものが一番だとは思いますが、Vimという選択肢も悪くないですよ♪

大人になってからの勉強

こんにちわ。
リエです。
 
まだまだ暑い日が続きますが、朝晩は少し涼しくなってきましたね。
夏の終わりを感じさみしくなっています。
 
そんなリエですが、『20代のうちにやりたいことリスト』というものを作っています。
世界制服したいとかそんな大したことは書いていなくて、○○の資格を取るとかそんな感じの内容です。
 
勉強が得意！勉強はお友達♡とかはこの先一生言うことのないほど勉強が苦手なわたしですが、自身のスキルアップのために取りたい資格があるのです。
お仕事への理解も深まりますしね。
 
でも偉そうに言いましたが、社会人になると勉強する時間を作るのって中々大変。
プライベートの時間にどう盛り込むかが悩ましいところ。
やっぱりプライベートは遊びたいし。。（小声）

 
日々のメリハリ大事よね！ということで、試験日の1.2ヶ月前からだいたい週4〜5日で1日1時間〜2時間程度勉強するやり方が自分に向いているとわかりました。
遊びも盛り込みつつ無理ない程度で。
根詰めてやると嫌になりますしね。。
 
大人になると勉強って誰かに強制されることではなく、あくまで自分の意志での勉強になるかと思います（例外もあるとは思いますが；）
自分の意思な分モチベーションの作り方ってとても難しく感じます。
でもわからなかったことがわかると楽しくて、さらに資格が取れるととても嬉しい！
そこが一つの区切りにもなりますしね。
 
弊社には「資格取得制度」があるので、この制度を使って資格取得しているメンバーがいます(*´ω｀*)
※資格取得報奨金制度とは※
社員のスキルアップのため、会社が認める資格を習得した社員に対し、合格した試験の受験費用並びに報奨金を支払う制度のこと。
 
会社にそういった制度があるのはとてもありがたいです。
引き続き頑張ります(●´ϖ`●)

WordPress開発快適化計画 ~ Wordmoveの簡単導入とメリット・デメリット ~

早く冬が来ないかなとソワソワしているノリフミです。

前回、VCCW on WP-CLIにてWordPressの使い方を紹介しました。

WordPress開発快適化計画 ~ VCCW on WP-CLIを使ってみた ~

Wordmoveを使用してみて、Wordmoveだけでは割と限界があることに気づいてしまいました。

今回はもっと簡単にWordmoveを導入する方法と運用に当たってのメリット・デメリットをご紹介します。

※ 当記事では、Vagrantをインストール済みで、サーバーでWordmoveを公開しており、そのサーバーへssh接続できるものとして話を進めます。

目次

  1. Wordmoveの現状
  2. 今回の妄想
  3. Vagrantで環境構築
  4. Gitの設定
  5. Wordmoveの設定
  6. Wordmoveの使い方
  7. まとめ

Wordmoveの現状

コマンド

init (wordmoveの設定ファイルであるMovefileを生成)

pull (指定環境を元に同期する)
push (実行環境を元に同期する)

-w, [–wordpress], [–no-wordpress]
-u, [–uploads], [–no-uploads]
-t, [–themes], [–no-themes]
-p, [–plugins], [–no-plugins]
-m, [–mu-plugins], [–no-mu-plugins]
-l, [–languages], [–no-languages]

機能フォルダ単位を同期するオプション

-d, [–db], [–no-db]

DBを同期するオプション

-e, [–environment=ENVIRONMENT]

同期環境を複数設定した際に環境を指定するオプション

[–all], [–no-all]

文字通り全てを同期するオプション

メリット

  • ローカル、サーバー間などの別環境のファイルからDBまで簡単に同期できる
  • 同期コマンド(pull,push)にオプションをつけると機能フォルダ別に同期できる
  • 複数環境も設定ファイルに定義しておくと-eオプションで簡単に同期できる
  • 同期時にDBのバックアップがとられる

デメリット

  • ファイル単位の同期はできず、機能フォルダ単位でしか同期できない
  • ファイルの差分は無視される(恐らく更新日時の新しいものが同期される)
  • 差分が無視されて同期されるため、古いファイルは消滅する
  • 間違えてpullやpushしたら取り返しがつかない

今回の妄想

wordmoveとgitを使った管理を表した画像

Wordmoveは複数人開発の際、上記デメリットの点を引き起こしがちです。
今回の妄想ではWordmoveの役目は主にDBの同期とし、ソース管理はgitに任せます。

 

Wordmoveで管理する項目

  • アップロード系の変更 ( -u )
  • プラグイン系の変更 ( -p )
  • language系の変更 ( -l )
  • WordPress自体のバージョンアップ ( –all )
  • その他DBの変更 ( -d )

テーマ以下は基本的にDBに影響を与えないため、git管理とします。

 

作業の基本的な流れ

  • ローカルに環境構築
  • ローカルで作業を進める
  • stagingに作業分を同期し、テストする
  • productionに作業分を同期し、確認する
  • gitにcommitする

複数人開発時、上記工程後の他メンバーは

Vagrantで環境構築

＃ 適当なフォルダを生成
mkdir wordpress
cd wordpress

# Vagrantfileを生成し設定する
vim Vagrantfile

# nginx設定ファイルを生成
vim nginx.conf

# 設定したipとドメインをhostsに追記
sudo sh -c 'echo "192.168.33.123 example.com" >> /etc/hosts'

# 設定問題なければVagrant起動
vagrant up

…

….

…..

ここ割と長いですが、最後まで無事終了すれば環境構築完了です。

 

ブラウザからアクセス後、サイト情報を入力し初期設定を完了させてください。

上記構成だと

サイトURL : http://example.com
mysqlユーザー : root
rootユーザーパスワード : root
mysqlデータベース : wordpress

になります。

Gitの設定

初回登録の場合

# Git管理を始める
git init

# 全てをGitに登録する
git add --all

# 確定させる。適宜mオプションでコメント設定
git commit -m 'wordpress install'

# 初めてのpushなので先にRepositoryの場所を決める
git remote add origin GITURL

# branchを設定してpushを実行する
git push -u origin master

決まり文句ですね。

既存Repository使用の場合

# srcディレクトリ削除
rm -rf src
# Repositoryをsrcの名前でclone
git clone GITURL src

 

※ GITURLは適宜Gitの対象RepositoryのURLに変更してご利用ください

Wordmoveの設定


# Wordmove設定ファイル修正
vim src/Movefile

コメントがある箇所と、local部も調整した場合は適宜設定してください。

※ local + 1環境(productionのみなど)の場合、wordmove push or pull時にeオプションにて同期先環境を選択する必要はなくなります。

Wordmoveの使い方

Vagrant内にWordmoveをインストールしているため、Vagrant内のドキュメントルートまで移動する必要があります。

# Vagrant内に接続
vagrant ssh
# ドキュメントルートまで移動
cd /vagrant/src

使用例1（プラグインをインストールし、テーマ以下の調整を行なった場合）

  • 改修者がstagingに同期し確認後、productionへ反映、最後にgitに反映
    wordmove push -e staging -dpt
    wordmove push -e production -dpt
    git commit & push
  • 他メンバーがデータ同期
    wordmove pull -e production -dp
    git pull

使用例2（ブログ引っ越しにて過去記事の画像付きインポートを行なった場合）

  • 改修者がstagingに同期し確認後、productionへ反映
    wordmove push -e staging -du
    wordmove push -e production -du
  • 他メンバーがデータ同期
    wordmove pull -e production -du

その他コマンドについては、上記をご参考ください。

まとめ

これだけ長々と書きましたが、、、
一人の場合はWordmoveだけで管理し、キリのいいところでgitに反映すれば問題ないと思います。

複数人の場合はWordmoveを使った際に、予期せぬ消滅が多々あるので、DB関連の同期のみにしたほうがいいですよ！

というお話でした。

最後までご覧いただきありがとうございました！

夏っぽいことといえばの○○

こんにちわ。
リエです。
 
少し前（でもないか）NintendoSwitchを手に入れたわたしですが、

話題のNintendoのアレをゲットしました


 
スプラトゥーン2を予約し発売日にゲットしていましたが、ずっと手付かずのまま放置していました。
最近やっと遊ぶようになったのですが、楽しい＆難しいです(^q^)
1日1レベル上げるのを目標に頑張っています。
 
でもゲームばっかりせず夏っぽいこともちゃんとやっています。
それは浴衣を着ること。
 
ずっと祖母が母親に作った浴衣を受け継ぎ大事に着ていたのですが、うん十年前のものだったのでそろそろ新調してもいいんじゃない？となり、気に入ったものを見つけれたということで新調しました。
浴衣が好きで毎年夏は着ています。（でも着付けはできないのでそこはプロにお任せ／(^o^)＼）
年に数回、しかも夏にしか着れないので浴衣ってちょっと特別ですよね。
 
浴衣を見たときに帯締めも一目惚れしたものがあり、一緒に新調したのですが、これ何結びかわかりますか？（アップ失礼します）

加賀の伝統工芸「加賀水引」です。
 
伝統工芸のものを身につけることで、さらに身が引き締まります。
もう今年は着る機会はないと思うので、また来年着るときまで大事に保管したいと思います。

Ubuntuに最新のnginxをインストール

時々しかしないので忘れてしまう備忘録シリーズ

Ubuntuへ最新のnginxのインストール

PGPキーを追加

$ curl -s https://nginx.org/keys/nginx_signing.key | sudo apt-key add –

リポジトリ追加

$ sudo sh -c “cat << EOS >> /etc/apt/sources.list.d/nginx.list
deb http://nginx.org/packages/mainline/ubuntu/ `lsb_release -cs` nginx
deb-src http://nginx.org/packages/mainline/ubuntu/ `lsb_release -cs` nginx
EOS
“

nginxインストール

$ sudo apt-get update && sudo apt-get install nginx

 

インストールされたバージョンやオプションを確認

$ nginx -V 2>&1 | sed ‘s/ –/\n –/g’

nginx version: nginx/1.13.4
built by gcc 5.4.0 20160609 (Ubuntu 5.4.0-6ubuntu1~16.04.4)
built with OpenSSL 1.0.2g 1 Mar 2016
TLS SNI support enabled
configure arguments:
–prefix=/etc/nginx
–sbin-path=/usr/sbin/nginx
–modules-path=/usr/lib/nginx/modules
–conf-path=/etc/nginx/nginx.conf
–error-log-path=/var/log/nginx/error.log
–http-log-path=/var/log/nginx/access.log
–pid-path=/var/run/nginx.pid
–lock-path=/var/run/nginx.lock
–http-client-body-temp-path=/var/cache/nginx/client_temp
–http-proxy-temp-path=/var/cache/nginx/proxy_temp
–http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp
–http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp
–http-scgi-temp-path=/var/cache/nginx/scgi_temp
–user=nginx
–group=nginx
–with-compat
–with-file-aio
–with-threads
–with-http_addition_module
–with-http_auth_request_module
–with-http_dav_module
–with-http_flv_module
–with-http_gunzip_module
–with-http_gzip_static_module
–with-http_mp4_module
–with-http_random_index_module
–with-http_realip_module
–with-http_secure_link_module
–with-http_slice_module
–with-http_ssl_module
–with-http_stub_status_module
–with-http_sub_module
–with-http_v2_module
–with-mail
–with-mail_ssl_module
–with-stream
–with-stream_realip_module
–with-stream_ssl_module
–with-stream_ssl_preread_module
–with-cc-opt=’-g -O2 -fstack-protector-strong -Wformat -Werror=format-security -Wp,-D_FORTIFY_SOURCE=2 -fPIC’
–with-ld-opt=’-Wl,-Bsymbolic-functions -Wl,-z,relro -Wl,-z,now -Wl,–as-needed -pie’

$ dpkg -s nginx

Package: nginx
Status: install ok installed
Priority: optional
Section: httpd
Installed-Size: 2771
Maintainer: Sergey Budnevitch <sb@nginx.com>
Architecture: amd64
Version: 1.13.4-1~xenial
Provides: httpd
Depends: libc6 (>= 2.14), libpcre3, libssl1.0.0 (>= 1.0.2~beta3), zlib1g (>= 1:1.1.4), lsb-base (>= 3.0-6), adduser
Conffiles:
/etc/default/nginx e2b1ae0f31c6d03d3305ef526b0ba3b5
/etc/default/nginx-debug 719f6f9981039a05a64c201a4b1db19f
/etc/init.d/nginx 7224be660d7c280a775bd6eca2547df4
/etc/init.d/nginx-debug 57e8f64b4f464fc13701c6b22240ac10
/etc/logrotate.d/nginx a4da44b03e39926b999329061770362b
/etc/nginx/conf.d/default.conf 411a0b28ff9b21a1cd94a6cb2ae2217d
/etc/nginx/fastcgi_params 4729c30112ca3071f4650479707993ad
/etc/nginx/koi-utf 3e338aca6a53a5420fc791b5ef86f64c
/etc/nginx/koi-win bfa0b80381fed2b1dfcf617b0ba204ec
/etc/nginx/mime.types bd837e7b34f5c9b8d89957d0527f0d44
/etc/nginx/nginx.conf f7984934bd6cab883e1f33d5129834bb
/etc/nginx/scgi_params df8c71e25e0356ffc539742f08fddfff
/etc/nginx/uwsgi_params 88ac833ee8ea60904a8b3063fde791de
/etc/nginx/win-utf 3749ffe19bedd842eb87e83d544e5ce6
Description: high performance web server
nginx [engine x] is an HTTP and reverse proxy server, as well as
a mail proxy server.
Homepage: http://nginx.org

インストールされたファイル一覧表示

$ dpkg -L nginx

/.
/etc
/etc/nginx
/etc/nginx/uwsgi_params
/etc/nginx/mime.types
/etc/nginx/win-utf
/etc/nginx/scgi_params
/etc/nginx/fastcgi_params
/etc/nginx/koi-win
/etc/nginx/koi-utf
/etc/nginx/nginx.conf
/etc/nginx/conf.d
/etc/nginx/conf.d/default.conf
/etc/default
/etc/default/nginx
/etc/default/nginx-debug
/etc/init.d
/etc/init.d/nginx
/etc/init.d/nginx-debug
/etc/logrotate.d
/etc/logrotate.d/nginx
/usr
/usr/lib
/usr/lib/nginx
/usr/lib/nginx/modules
/usr/sbin
/usr/sbin/nginx
/usr/sbin/nginx-debug
/usr/share
/usr/share/nginx
/usr/share/nginx/html
/usr/share/nginx/html/50x.html
/usr/share/nginx/html/index.html
/usr/share/man
/usr/share/man/man8
/usr/share/man/man8/nginx.8.gz
/usr/share/doc
/usr/share/doc/nginx
/usr/share/doc/nginx/CHANGES.ru.gz
/usr/share/doc/nginx/README
/usr/share/doc/nginx/changelog.Debian.gz
/usr/share/doc/nginx/changelog.gz
/usr/share/doc/nginx/copyright
/usr/share/lintian
/usr/share/lintian/overrides
/usr/share/lintian/overrides/nginx
/var
/var/cache
/var/cache/nginx
/var/log
/var/log/nginx
/etc/nginx/modules

起動

$ sudo service nginx start

停止

$ sudo service nginx stop

状態確認

$ sudo service nginx status