vimコマンドでコードを貼り付けした際に起こるズレ

Terminalでvimコマンドを使ってテキストエディタ上のソースコードをそのままコピペをした際にインデントが右にズレてしまった。
そこで解決策を書きました！

まず普通にコードをコピペした場合

input[type="text"]
{
          width: 30%;
            border: 1px solid #ccc;
              border-radius: 4px;
                padding: 6px 12px;
                  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
                    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
                      font-size: 14px;
                        line-height: 1.428571429;
                          color: #555;
}

input[type="submit"]
{
          margin-top: 30px;
            width: 30%;
              border: 1px solid #5cb85c;
                border-radius: 4px;
                  padding: 12px;
                    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
                      font-size: 14px;
                        line-height: 1.428571429;
                          color: white;
                            background-color: #5cb85c;
}

select
{
          display: block;
            width: 30%;
              height: 34px;
                padding: 6px 12px;
                  font-size: 14px;
                    line-height: 1.428571429;
                      color: #555;
                        background-color: #fff;
                          border: 1px solid #ccc;
                            border-radius: 4px;
}

↑こんな風になってしまう

その対処法として
:set paste
を貼り付ける！


:set pasteした場合

input[type="text"]
{
  width: 30%;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 6px 12px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555;
}

input[type="submit"]
{
  margin-top: 30px;
  width: 30%;
  border: 1px solid #5cb85c;
  border-radius: 4px;
  padding: 12px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  font-size: 14px;
  line-height: 1.428571429;
  color: white;
  background-color: #5cb85c;
}

select
{
  display: block;
  width: 30%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
}

↑綺麗に貼り付けしてくれる


作業手順

  1. テキストエディタでコードをコピペする。
  2. terminalで貼り付けたいファイルを編集するためにvimで開く
  3. はじめに閲覧モードで:set pasteを打ち込む
  4. 通常通りcommand + vでファイル上にコピペする


これで綺麗に貼り付けできたと思います＼(^o^)／
参考にしたサイト→http://cameong.hatenablog.com/entry/20120805/1344146992

MacにVagrantを入れてサーバーを構築する

サーバーを自分で構築したいと思い勉強したのでそれをアウトプットさせていただきます。わからない知識も多いのでそれも書き加えていきたいと思います！

 
目標は

１．サーバーを構築
２．Webサーバーを構築
３．アプリケーション（PHP）をインストール
 
ここまでやります＼(^o^)／

 

 

 

MacにVirtualBoxを自動作成・管理ツールとして使えるVagrantをインストールしよう


 そもそもLinuxって何？
Linuxというのはコンピューターを動かすためのソフトウェアであるOSの一種のことです。パソコン自体がコンピューターを動かしていると最初は勘違いしていたのですが、パソコンは入れ物であってその中にWindowsというソフト、Macというソフトが入っているんですね！だからパソコンが壊れた時にパソコン自体が壊れたのではなくてパソコンにinstallされたOSが壊れているということなんですね！脱線してしまったｗ
そしてLinuxはハードディスクやメモリーなど、コンピューターの資源管理を行なっている中核的な役割をするカーネルなので、LinuxにOSの動作に必要なライブラリーやソフトウェアをまとめたディストリビューションを追加する必要があります。これからでてくるCentOSがディストリビューションのこと！

 
VirtualBoxとは
使用しているPC上に仮想的なPCを作成し、別の OS をインストール・実行できるフリーの PC 仮想化ソフトのことです。
 

Vagrantとは
今までWebアプリケーションの開発、テスト、本番運用などを環境構築するため仮想マシンを起動し、OS、WebサーバやPHP、Rubyなどをインストールし、ChefやPuppetなどでアプリケーションをデプロイするといった操作が必要でした。それはとても大変なのでテンプレート化してすぐに構築できるようにしたのがこのVagrantなのです！！

 


1. それではVagrantをダウンロードし、インストールしましょう♬

Mac OS X にインストールする手順
[http://weblabo.oscasierra.net/install-vagrant-onto-macosx/]

ちゃんとインストールされているか確認するために

$ vagrant -v

Vagrant 1.8.1


2. これができたら、次はVirtualBoxをインストール
http://download.virtualbox.org/virtualbox/4.3.10/VirtualBox-4.3.10-93012-OSX.dmg
↑押したらダウンロードできるよ！


3. CentOSのダウンロード
今回はCentOS6.4のバージョンをダウンロードしました！

$ Vagrant box add Centos 64 http://developer.nrel.gov/downloads/vagrant-boxes/CentOS-6.4-x86_64-v20130427.box

↑ちょっと時間かかる(´・ω・｀)

CentOSって何？
サーバー構築のためのOSの一つで、実用的なディストリビューションを開発するために作られました。なので、CentOSは、カーネル（オペレーティングシステムの最も重要な役割である、 ハードウェア と アプリケーションソフト の管理と制御を担う）を元に一からディストリビューション（配布物）というわけではなく、商用のRedHatEnterpriseLiunx(RHEL)のクローンなのです。


4. 仮想マシンVagrantを作成

$ mkdir -p ~/Vagrant/CentOS64 #ディレクトリ作成
$ cd ~/Vagrant/CentOS64 #CentOSに移動
$ vagrant init centos64 #初期化
$ ls #Vagrantfileがあるか確認

↑VagrantfileにはVagrantの設定情報が記述されてる

$ vagrant status #起動しているか確認

↑CentOS64のディレクトリで確認しないとエラーが起こるよ！


5. ローカルIPを使用して内部向けのIPを設定

$vim Vagrantfile
# config.vm.network :private_network, ip: "192.168.33.10" ←この行のコメントアウトを削除する

$vagrant reload #変更したからVagrantをリロード

webブラウザで192.168.33.10のIPでアクセスして、つながっているか確認してみてください！

$ ping 192.168.33.10 #ネットワーク疎通を確認

↑止めたい場合は「Control + C」


6. 仮想マシンに接続

$ vagrant ssh #接続〜
Last login: Tue Apr 12 14:36:42 2016 from 10.0.2.2
Welcome to your Vagrant-built virtual machine.
[vagrant@localhost ~]$

↑これが出れば成功！！


まとめ
どうでしたでしょうか。
今回やった手順としては、Vagrantインストール→Vatualboxインストール→CentOSダウンロード→Vagrant作成→ネットワークの作成→仮想マシンに接続

サーバーを構築する際に概念を理解してから作ると手順が踏みやすかったのでは無いでしょうか。それでも初心者の方にはわからない知識・概念が多いと思います。
なるべくこの場で済ませるようにしていますがわからない場合こちらのサイトがおすすめです。↓
「サーバーってなに？」～初心者でもよくわかる！VPSによるWebサーバー構築講座(1) - さくらのナレッジ