Sublime Text 導入メモ 1

Sublime Text が身の回りに流行り始めたので
Flasherあがりのフロント実装野郎としての設定項目をメモ。
弊社メンバーは真似してください。

1. Sumlime Text 2 > Setting – User の内容:

{
"auto_indent": true,
"color_scheme": "Packages/Color Scheme - Default/Cobalt.tmTheme",
"font_face": "Menlo",
"font_size": 12,
"ignored_packages":
[
"Vintage"
],
"line_padding_top": 2,
"smart_indent": true,
"tab_size": 4,
"translate_tabs_to_spaces": true,
"trim_trailing_white_space_on_save": true,
"word_wrap": true
}

説明: フォントの指定と、タブは半角スペ×4に変換です。

 

2. プラグイン:

(1) View > Show Console (control + `) して、

import urllib2,os; pf=’Package Control.sublime-package’; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),’wb’).write(urllib2.urlopen(‘http://sublime.wbond.net/’+pf.replace(‘ ‘,’%20′)).read()); print ‘Please restart Sublime Text to finish installation’

を入力して、Package Controllをインストール。

(2)  command + shift + P → 「install」と打つ → Package Controll: Install Package と補完される → Enter

(3) 以下のプラグインをインストール。

HTML5
HTML5サポート

Tag
選択したHTMLを「control + option + f」でフォーマット 

AutoFileName
ファイル名、パス補完

Bracket Highlighter
閉じタグハイライト 

CSS Snippets
CSSのスニペット

LESS
LESSのコードをハイライト

jQuery
jQuery補完

CoffeeScript
CoffeeScript補完

WordPress
Wordpressのコード補完

ZenCoding
Espresso時代からおなじみのZenCoding

Prefixr
「control + command + x」でベンダープレフィックスを追加してくれる 

SublimeCodeIntel
何かが賢くなる 

Side Bar Enhancements
サイドバーが強化されるらしい

Trailing Spaces
行頭、行末の不要なスペース、タブをハイライト。
ファイル保存時に勝手に消してくれる(几帳面)

 

3. 細かい設定

Sublime Text 2で、rubyのインデントだけ変更する #SublimeText2 – Qiita

を参考に、
JS, CSSのインデントを2文字にしてみる。

(1) .jsのファイルを開く

(2) Sumlime Text 2 > Preferences > Settings – More > Syntax Specific – User を選択

(3) 開いた javaScript.sublime-settings に以下を記入

{
"tab_size": 2,
"translate_tabs_to_spaces": true
}

 

(4) .cssのファイルを開く

(5) Sumlime Text 2 > Preferences > Settings – More > Syntax Specific – User を選択

(6) 開いた CSS.sublime-settings に以下を記入

{
"tab_size": 2,
"translate_tabs_to_spaces": true
}

 

*
「Google HTML/CSS Style Guide」を適当に和訳してみた | REFLECTDESIGN

Google JavaScript Style Guide 和訳 — Google JavaScript Style Guide 和訳
を読むと、2文字が良いんだとか。

 

4. 手に馴染ませる

ショートカットキーは

爆速エディタSublime Text 2ショートカット一覧 | DECONCEPTER
を参考に。

zen-codingのショートカットキーは
Post-that: sublime text 2 で zen-codingを使う際のコマンド一覧
を参考に。

EspressoとFlex Builderで出来たことはだいたい出来そう。

 

さいごに、

Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ | Mnemoniqs Web Designer Blog
爆速エディタSublime Text 2ショートカット一覧 | DECONCEPTER
Sublime Text 2 | Public Draft | Just writing down what I’ve found
”恋に落ちるエディタ”「Sublime Text」 完全入門ガイド! | デザイナーブログ | 株式会社LIG

あたりを読みながら導入しました。

 

(続きがあります)

Sublime Text 導入メモ 2
Sublime Text 導入メモ 3
Sublime Text 導入メモ 4

update

会社のWorksをアップデートしました。

– cakes
– band

EC2の環境に、PHP MongoDB Driverをインストール

▽ ローカルの開発環境

PHP MongoDB Driver をインストール。

参考: https://github.com/mongodb/mongo-php-driver/blob/master/README.md

まずzipをダウンロードして、解凍。
解凍したディレクトリにターミナルでcdして、

$ phpize
$ ./configure
$ make
$ sudo make install

出来たmodules/mongo.soを、
/Applications/MAMP/bin/php/php5.3.6/lib/php/extensions/no-debug-non-zts-20090626 へ移動。

/Applications/MAMP/bin/php/php5.3.6/conf/php.ini を編集。
extension= が沢山書かれている場所に、 extension=mongo.so を追記

phpinfo して、mongoDBが入っていれば完了!
(要Apacheの再起動)

※ MAMP 2.0.5で作業。2.1系でトラブル発生中。(12/7/10頃)

▽ EC2でMongo

参考: http://blog.genies-ag.jp/2011/08/amazon-ec2-amazon-linux-apachephp.html
参考: http://web.j-q.co.jp/?p=124
参考: http://www.if-not-true-then-false.com/2010/install-php-mongodb-mongo-driver-on-linux-mac-os-x-windows-unix-bsd/

# sudo vi /etc/yum.repos.d/10gen.repo
[10gen]
name=10gen Repository
baseurl=http://downloads-distro.mongodb.org/repo/redhat/os/x86_64
gpgcheck=0

を記入

# yum search mongo
# yum install mongo-10gen.x86_64

PEARインストール
参考: http://stackoverflow.com/questions/8636538/does-aws-provides-pear-package-manager-installation-from-repository

# wget http://pear.php.net/go-pear.phar
# php go-pear.phar

PECLインストール (ローカルとほぼ同じ手順)
参考: https://groups.google.com/forum/?fromgroups#!topic/mongodb-user/9be1bpaNvVU

# wget http://pecl.php.net/get/mongo-1.2.10.tgz
# tar xvf mongo-1.2.10.tgz
# ./configure (エラー出た)
# sudo yum install gcc (参考: http://www.linuxforums.org/forum/applications/41118-how-install-gcc.html)
# ./configure (出来た)
# make (エラー出た)
# sudo yum install make
# make (出来た)
# sudo make install
Installing shared extensions: /usr/lib64/php/modules/

MONGOのドライバーをインストール
http://www.if-not-true-then-false.com/2010/install-php-mongodb-mongo-driver-on-linux-mac-os-x-windows-unix-bsd/

# sudo pecl install mongo

「You should add “extension=mongo.so” to php.ini」 って出た!

/etc/php.ini のそれっぽい場所に、

extension_dir = "/usr/lib64/php/modules/"
extension=mongo.so

を記入。

phpinfo してmongoDBが無事に入っていれば完了!

AWSのSecurity Groupの設定で、27017を開けたら、
PHPからも無事に書き込み出来ました。PHPの書き方はまた次回。

[追記]
さらに、http://d.hatena.ne.jp/akuwano/20120130/1327884845
を見てデータベースにパスワードをかけておいた方が良いかも。

こう書くとサーバー起動時にmongodを実行できるはず

# sudo chkconfig --add mongod
# sudo chkconfig mongod on

さくらのVPSを借りてgitのレポジトリを置いて、EC2からgit pull。

▽ EC2サーバー上で公開鍵を作成

# cd ~/.ssh
# scp id_rsa.pub さくらのユーザー名@さくらのアドレス: (←コロン重要)

▽ さくらのVPSサーバーで、authorized_keysに追記

# cat id_rsa.pub >> ~/.ssh/authorized_keys

※ authorized_keysに内容を直接書き足しても良い。

▽ EC2サーバーからさくらのVPSサーバーへ接続テスト

# ssh td-inc@49.212.170.189

▽ EC2上から、git cloneして、データを落とす

# sudo git clone ssh://さくらのユーザー名@さくらのアドレス/var/git/レポジトリ名

▽ httpd.confにバーチャルホストの設定を追加

# sudo vi /etc/httpd/conf/httpd.conf
ServerName fes.mu
DocumentRoot /var/www/fes.mu

apache再起動

sudo service httpd restart

▽ 次回以降、差分をダウンロードする時は、

# sudo git pull ssh://さくらのユーザー名@さくらのアドレス/var/git/レポジトリ名

[追記]
↑ パーミッションを775とかにして、”ec2-user”をownerのグループに追加しておけば、
sudo は不要になる。

グループに追加

# usermod -G wheel ec2-user

パーミッション、所有者の変更

# sudo chmod 775 ○○○
# sudo chown root:wheel ○○○

さくらのVPSを借りてgitのレポジトリを置く (2)

▽ さくら

参考: http://randd.kwappa.net/2010/12/10/190

$ sudo wget http://packages.sw.be/rpmforge-release/rpmforge-release-0.5.2-2.el5.rf.x86_64.rpm
$ sudo rpm -ivh rpmforge-release-0.5.2-2.el5.rf.x86_64.rpm
$ sudo yum install git

参考: http://kasahi.blogspot.jp/2011/07/vpsgitmac.html

$ sudo mkdir /var/git
$ sudo chmod 775 /var/git
$ sudo chown root:wheel /var/git
$ sudo cd /var/git
$ sudo mkdir demo.git
$ sudo chmod 775 demo.git
$ sudo chown root:wheel demo.git
$ sudo cd demo.git

↑ /var/git 以下のオーナーが、gitで使うアカウントでないと、後のpushで失敗した

git init --bare --shared
Initialized empty shared Git repository in /var/git/demo.git/

▽ Mac
Towerを使っているので、gitはすでに入っている。

Add Remote Repositoryで、

ssh://ユーザー名@さくらのアドレス/var/git/demo.git

を追加。

とりあえずコミットのテストをするなら、

$ git add *
$ git commit -am "ログのメッセージ"
$ git push ユーザー名@さくらのアドレス:/var/git/fes.mu master

あたりを使う。

さくらのVPSを借りてgitのレポジトリを置く (1)

まずはSSHのログイン周りの整備まで。

参考: http://blog.hybridism.com/?p=140

▽ さくらのVPS上での作業

ユーザーを追加、パスワードを設定、wheelグループに追加。

$ adduser 追加するユーザー名
$ passwd 追加するユーザー名
$ usermod -G wheel 追加するユーザー名
$ visudo

%root ALL=(ALL) ALL の近くに、
%ユーザー名 ALL=(ALL) ALL
を追記して、sudoを許可。

$ vi /etc/ssh/sshd_config

で、

PermitRootLogin no

に変更して、SSH接続でrootに直接ログインすることを禁止。
:wq

sshdを再起動

$ /etc/init.d/sshd restart

▽ Macのターミナルでの作業

id_rsaの作成

$ cd ~/.ssh
$ ssh-keygen -t rsa

SCPでファイルを転送

$ scp id_rsa.pub ユーザー名@さくらのVPSのIPアドレス: (←コロン重要)

sshでログイン

$ ssh ユーザー名@さくらのVPSのIPアドレス

▽ さくらのVPS上での作業

~に.sshというフォルダを作ってパーミッションを700にする。

$ mkdir .ssh
$ chmod 700 .ssh

.sshに公開鍵を移動

$ mv id_rsa.pub .ssh/

authorized_keysというファイルを作成して公開鍵を書き込む
(鍵認証の有効化とパスワード認証の無効化)

$ touch authorized_keys
$ cat id_rsa.pub >> authorized_keys
$ chmod 600 authorized_keys

再びsshd_configを編集

$ sudo vi /etc/ssh/sshd_config
RSAAuthentication yes
PubkeyAuthentication yes
AuthorizedKeysFile %h/.ssh/authorized_keys
 
PasswordAuthentication no

:wq

再びsshdを再起動

$ sudo /etc/init.d/sshd restart

次回以降のログインは、

$ ssh ユーザー名@さくらのVPSのIPアドレス -i .ssh/id_rsa -p 22

になる

▽ Macのターミナルでの作業
最後にMacのターミナルからのログインを簡単にするために、.ssh/configに

Host sakura
    HostName さくらのVPSのIPアドレス
    User ユーザー名
    IdentityFile ~/.ssh/id_rsa

と書き込んでおく。すると、

$ ssh sakura

でログイン出来る。

Amazon EC2 Webサーバーを立ち上げてHello World

▽ Apacheのインストール

# sudo yum install httpd

▽ Apacheを起動

# sudo /etc/init.d/httpd start
httpd を起動中: [ OK ]

EC2 Management Consoleで確認できるPublic DNSをブラウザに入力すると、
Apacheの初期ページが出ます。

▽ index.htmlファイルをつくる

# sudo vi /var/www/html/index.html

編集したら、
:w
:q

再びブラウザでアクセスすると、このページが見られる。

番外編

▽ 時計をあわせる

# date
2012年 6月 30日 土曜日 12:36:11 UTC (時計がUTC)
# sudo cp /usr/share/zoneinfo/Japan /etc/localtime
# date
2012年 6月 30日 土曜日 21:36:50 JST (時計がJSTになった)

▽ PHPのインストール

# sudo yum install php

▽ Apacheが自動的に起動するように

# sudo chkconfig httpd on
# sudo chkconfig --list httpd

Amazon EC2 インスタンスを作ってSSHでログイン

調べて書いといて!ってお願いしたので、
だいたいここに書いてある通り。GJ。

http://ikezawa-ayaka.blogspot.jp/2012/06/mongodbamazonec2.html

お好みの設定でインスタンスをつくって、startする。

EC2 Management Consoleの”Instance”で起動したいインスタンスを選んで”Start”。
次に”Connect”を押して、”Connect with a standalone SSH Client”を選ぶ。

Exampleってとこにある通り、

$ ssh -i XXXX.pem ec2-user@XX.XX.XXX.XXX

(↑ローカルに保存したKeyPairへのパスと、サーバーのアドレス)
をMacのターミナルから実行。

※ .pemファイルはパーミッションを600にしておくこと。

これでサーバーに入れた。

       __|  __|_  )
       _|  (     /   Amazon Linux AMI
      ___|\___|___|

インスタンス終了時の覚書

AWS

マネージメントコントローラにある似たような2つのメニュー。

Stop・・・・・・サーバの一時停止。物理サーバで言うところのshutdown
Terminate・・・インスタンスの永久破棄。物理サーバで言うと筐体廃棄

http://tsubo3.wordpress.com/2011/07/02/aws-ec2%E3%81%A7%E3%81%AEstop%E3%81%A8terminate%E3%81%AE%E9%81%95%E3%81%84/

[追記]
▽ SCP (Transmit)でのログイン

▽「ssh ec2」で入れるようにする
$ vi ~/.ssh/config して、

Host fes.mu
HostName XXX.XXX.XXX.XXX
User ec2-user
IdentityFile ~/.ssh/XXXX.pem

を追記

Mongo DBで最初の実験

DBの一覧

> show dbs
local	(empty)

DBの作成(データを入れると作成される)

> use mydb

試しにデータ追加

> db.addressbook.save({'name':'sohei'})

追加したデータを確認

> db.addressbook.find();
{ "_id" : ObjectId("4feed99e86eaec42be0c7e77"), "name" : "sohei" }

もう一度DBの一覧

> show dbs
local	(empty)
mydb	0.203125GB (←DBが出来た)

追加したデータを消す

> db.addressbook.drop()
true

データが削除出来たか確認

> db.addressbook.find();

(何も表示されなければOK)

DBを削除

> db.dropDatabase()
{ "dropped" : "mydb", "ok" : 1 }

DBが削除出来たか確認

> show dbs
local	(empty)

これで最初の状態に戻ってテスト終了。

参考: http://mitsukuni.org/wiki/MongoDB/#b0459381

Mongo DBをOS Xで使う

▽ インストール
参考 : http://codedehitokoto.blogspot.jp/2012/01/nodemongodb.html

$ curl -O http://fastdl.mongodb.org/osx/mongodb-osx-x86_64-2.0.2.tgz
$ tar -xzvf mongodb-osx-x86_64-2.0.2.tgz
$ sudo mv mongodb-osx-x86_64-2.0.2/bin/* /usr/local/bin/
$ rm -fr mongodb-osx-x86_64-2.0.2 mongodb-osx-x86_64-2.0.2.tgz

▽ データ保存用のディレクトリ作成
参考: http://jp.docs.mongodb.org/manual/tutorial/install-mongodb-on-os-x/

$ sudo mkdir -p /data/db
$ sudo chown `id -u` /data/db

▽ データベースの起動

$ mongod

▽ データベースに入る
(別のターミナルから)

$ mongo

この後データの出し入れと、Amazon EC2で使う方法の勉強。
主にPHPで開発する予定。