Sublime Text 導入メモ 4

新しく追加したプラグイン

DocBlockr … /** と入力したあと、TabキーでJSDocsの記法のコメントが入れられる

→ “jsdocs_extend_double_slash”: false にしないと、
//でコメントアウトした後の日本語の確定で、文字が消える問題有り

 

SCSS … SCSS用のSyntax

・SCSS Snippets … SCSS用のSnippets (Snippetsとは?)

 

Compass … Compassをコンパイルする ※rvm環境でハマリポイントあり

 

CofeeCompile … CoffeeScriptをコンパイルする ※Macのcoffee, npmのパス(/usr/local/bin)を設定する必要あり。
control + shift + C で選択した部分を簡易的にコンパイルして確認できる。

 

Emmet … Zen-Codingの新バージョン

 

削除したプラグイン

Zen-Coding

 

Emmetは日本語の変換の確定時に問題があったので、

Preferences => Settings – User に以下の設定を書き込む。

{
  // tabでの展開の上書きしない for Emmet
  "disable_tab_abbreviations": true,
  // 改行でのフォーマットをしない(日本語変換の確定のため) for Emmet
  "disable_formatted_linebreak": true
}

参考: 第0回 Sublime Text 2 勉強会 で Emmet について話してきた – techlog

 

"tab_completion": false

にした方が良い感じ?

続きがあります。
Sublime Text 3

~/.bashrc が読まれていない問題

たぶん、このエントリーでrvmをインストールしたんだけれど、
Macを再起動すると、rvmコマンドが使えなくなって、ruby -v しても1.8系に戻ってしまう。

 

./bashrc が読まれていなかったみたいで、ターミナルから

$ source ~/.bashrc

をすれば、パスが通って解決するけど、毎回はめんどうなので、
~/.bash_profile から ~/.bashrc を読み込もう、という設定をする。

 

~/.bash_profileに、

if [ -f ~/.bashrc ] ; then
. ~/.bashrc
fi

を書き込む。

 

参考:
とあるプログラマーの覚書 OSXでのbashrcの設定
bashの設定ファイルの読み込みが複雑すぎて混乱する – ぱせらんメモ

WordPress on EC2

EC2上にインストールしたWordpressにダッシュボードから
プラグインをインストールする時に、エラーが出た。解決法は、

wp-config.php に

define('FS_METHOD', 'direct');

を追加。理由は以下らしい。

デフォルトの設定だとブラウザからプラグインやテーマをインストールする際に
ファイルのオーナーが、スクリプトを実行するオーナーと同じかどうかチェックするために、
『要求されたアクションを実行するには、WordPress が Web サーバーにアクセスする必要があります。
次に進むには FTP の接続情報を入力してください。接続情報が思い出せない場合は、
ホスティング担当者に問い合わせてください。』というエラーが表示される。

EC2 に WordPress をインストールする | 猫科のぶろぐ

wp-content/upgrade
wp-content/themes
wp-content/plugins
wp-content/plugins
のパーミッションは707か777あたり (最後の7が重要)

github はじめ方

すでにあるレポジトリから引っ張る

# git clone git@github.com:td-inc/hoge.git

ローカルのレポジトリをgithubで使えるようにする

# git init
# git remote add origin git@github.com:td-inc/hoge.git

EC2でEBSをマウントして使う

1. AWSにログインして、EC2のダッシュボードを開く。

2. 左のナビゲーションの ELASTIC BOOK STORE → Volumes を開く。

3. Create Volume して、右クリックして、インスタンスにAttachする。

4. /dev/sdf/ にマウントされる。

 

ここからデータのコピーと、シンボリックリンクで参照する作業
(すでにMySQL、Apacheがインストール済みで、新しくマウントしたEBSにデータを移動する)

# Setup EBS and FS
sudo mkfs.ext4 /dev/sdf
echo "/dev/sdf /mnt ext4 defaults,noatime 0 0" | sudo tee -a /etc/fstab
sudo mount /mnt
sudo mkdir -p /mnt/www/
sudo cp -r /var/www/html /mnt/www
sudo mv /var/www/html /var/www/html.bak
sudo ln -s /mnt/www/html /var/www/html
sudo mkdir -p /mnt/lib/
sudo cp -r /var/lib/mysql/ /mnt/lib
sudo mv /var/lib/mysql/ /var/lib/mysql.bak
sudo ln -s /mnt/lib/mysql/ /var/lib/mysql
sudo chown mysql:mysql -R /mnt/lib/mysql

# damon start
sudo /etc/init.d/httpd start
sudo /etc/init.d/mysqld start

参考: EC2: Amazon LinuxにWordPressを急ぎで入れる (その2) – was memo

 

– その他メモ

ルートユーザーに切り替える

# sudo su

MySQLにパスワードを入力して入る

# mysql -u root -p

 

これでマイクロのインスタンスの8GBの他に、
EBSによる40GB(とりあえずhetemlと同じ程度の容量)を確保。

Windows 8 + IE10

Win8のIE10を使うと、開発者ツールでIE9〜7の表示モードを切り替えてデバッグできて、
インスペクタも動作する。 変なエラーも出ないのでIE Testerを使うよりもだいぶ良さそう。

ただし、Windows8は超使い慣れないので、
Classic Shellというアプリをインストールして、スタートボタンを復活。
(スタートボタンのグラフィックをWindows純正風にすることも出来るようですが、省略。)

参考: Windows 8にClassic Shellをインストールしてみました。 – Microsoft Officeのリボンのカスタマイズ情報が満載 – 初心者備忘録

 

それと、MacのUSキーボードをうまく使うために、
いつも通り、AppkeK ProのVMWare ver (v 3.1.5b1)をインストールして、
最低限、LhaplusとAvastとEmeditorを入れて、セットアップ完了。

 

MAMPでバーチャルホストの設定 (2種類)

よく忘れるので整理。

 

ポート番号を割り当てて使う方法

/Applications/MAMP/conf/apache/httpd.conf
を編集する。 例えば8001番を割り当てる場合、

40-50行目付近に # Listen: から始まるブロックがあって、

Listen 8888

という記述があるので、その下に、

Listen 8001

と追記。

もう少し下に、# ‘Main’ server configuration から始まるブロックがあるので、そこに続けて

<virtualhost *:8001>
DocumentRoot    "/Users/sohei_kitada/Dropbox/works/project/ルートにしたフォルダへのパス"
</virtualhost>

を記述する。

 

MAMPのポート設定は初期値の、Apache: 8888, MySQL: 8889 を使用する。

 

 

・ドメインを割り当てて使う方法:

/Applications/MAMP/conf/apache/httpd.conf
の中の

# Virtual hosts
# Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

の2行目 Include の行のコメントアウトを外す

# Virtual hosts
Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

/Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

<VirtualHost *:80>
ServerName    local.○○.com
DocumentRoot    "/Users/sohei_kitada/Dropbox/works/project/ルートにしたフォルダへのパス"
</VirtualHost>

という風に記述。

 

MAMPのポート設定は「標準ポートに設定」して、Apache: 80, MySQL: 3306 を使用する。

 

最後にhostsを開いて、

127.0.0.1    local.○○.com

と書き足す。hosterというアプリが便利です。

 

 

#
それと、VMWare上のWindowsから、MacのMAMPへアクセスは、

Windowsでipconfigをして、DefaultGatewayを調べて、
hostsファイル(C:\WINDOWS\system32\drivers\etc\hosts)に

12.34.56.78 local.○○.com

という感じに設定すれば、アクセス出来るようになる。

 

 

参考にしたサイト
MAMPを使ってローカルで複数サイトのバーチャルホストを設定&イントラ環境や仮想環境からもそのサイトを確認する設定方法 | THE HAM MEDIA BLOG
MAMPに複数のドメイン「バーチャルホスト」を設定する方法 | ネットを便利に活用するTips ネットビジネスラボ
VMware Fusion上のWindowsブラウザからMacのMAMPを参照しブラウザチェックする方法 | [k]id 

Sublime Text 導入メモ 3

今週新たに追加したプラグイン

・SFTP
ファイルを保存時に自動的にFTPでサーバーにアップロードできるようになる。
サーバーで動作検証したいプログラムを書く時に役立った。

・Browser Refresh
Command + Shift + R でブラウザをリロードできる。
何かのプラグインとショートカットキーがぶつかっていたので、
Command + Option + Rに変更した。

 

(続きがあります)

Sublime Text 導入メモ 4

hetemlでpjax

定例mtgをしていても、バスに乗っていても、話題はpjaxなので、
pjaxを勉強し直したまとめ。

 

 クライアントサイド

・pjaxをするには、jQueryと、jQueryのpjaxライブラリを使う。

サーバーサイド

・環境はhetemlサーバー
・hetemlのサーバーはApacheなので、PHP (5.3.16)を使う。
・PHP5.4未満なので、getallheaders関数が使えない。

 

最初に読み込むページ (open)

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>pjax test</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="jquery-1.8.2.min.js"><\/script>')</script>
    <script src="jquery.pjax.js"></script>
    <script type="text/javascript">
            $(function($){
                //時刻を出力
                $('#time').text(new Date().getTime());
                //pjaxのサポート状況を出力
                $('#pjax-support').text($.support.pjax ? 'true' : 'false');
                //リンクの動作
                $('a.pjax').click(function(e){
                    e.preventDefault();
                    $.pjax({
                        url: $(this).attr('href'),
                        container: '#content'
                    })
                });
            });
        </script>
</head>
<body>
    <div id="main">
        <h1>
            pjax test
        </h1>
        <p>
            time: <span id="time"></span><br/>
            pjax-support: <span id="pjax-support"></span>
        </p>
        <div>
            <ul>
                <li><a href="./index.php" class="pjax">top</a></li>
                <li><a href="./page1.php" class="pjax">page 1</a></li>
                <li><a href="./page2.php" class="pjax">page 2</a></li>
                <li><a href="./page3.php" class="pjax">page 3</a></li>
            </ul>
        </div>
        <div id="content">
            hello world.
        </div>
    </div>
</body>
</html>

 

あとから読み込むページ

<?php
$pjax = $_GET['_pjax'];
if (!$pjax) { ?>

<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>page 1</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="jquery-1.8.2.min.js"><\/script>')</script>
        <script src="jquery.pjax.js"></script>
        <script type="text/javascript">
            $(function($){
                //時刻を出力
                $('#time').text(new Date().getTime());
                //pjaxのサポート状況を出力
                $('#pjax-support').text($.support.pjax ? 'true' : 'false');
                //リンクの動作
                $('a.pjax').click(function(e){
                    e.preventDefault();
                    $.pjax({
                        url: $(this).attr('href'),
                        container: '#content'
                    })
                });
            });
        </script>
    </head>
    <body>
        <div id="main">
            <h1>
                page 1
            </h1>
            <p>
                time: <span id="time"></span><br/>
                pjax-support: <span id="pjax-support"></span>
            </p>
            <div>
                <ul>
                    <li><a href="./index.php" class="pjax">top</a></li>
                    <li><a href="./page1.php" class="pjax">page 1</a></li>
                    <li><a href="./page2.php" class="pjax">page 2</a></li>
                    <li><a href="./page3.php" class="pjax">page 3</a></li>
                </ul>
            </div>
<?php } ?>

            <div id="content">

                this is page 1.

            </div>

<?php if (!$pjax) { ?>
        </div>
    </body>
</html>
<?php } ?>

 

2行目の処理は、
getallheaders() が使える環境では

$header = getallheaders();
$pjax = !empty($header['X-PJAX']) && ($header['X-PJAX'] == "true");

としたい。

$pjaxがtrueの時は、if分で色々除外されて、
49-53行目だけがレスポンスとして返る。
受け取った側は、 #content を、新しい #content に置き換える。

 

参考: PHPでpjaxる – 私の昆布

 

ソース一式ダウンロード

Sublime Text 導入メモ 2

Sublime Text の設定をDropbox経由で複数のマシンで同期する方法。
これで家と会社で同じ環境をつくれる。

 

(Sublime Textが起動していない状態で作業する)

1. ~/Library/Application Support/Sublime Text 2 へ移動する

$ cd ~/Library/Application\ Support/Sublime\ Text\ 2/

2. Installed Packages, Packages, Pristine Packages をDropboxの管理下に移動。
(例: appdata/sublime/ に置く)

$ mv Installed\ Packages ~/Dropbox/appdata/sublime/
$ mv Packages ~/Dropbox/appdata/sublime/
$ mv Pristine\ Packages ~/Dropbox/appdata/sublime/</blockquote>
<strong>3. Dropbox内へ移動したフォルダへのシンボリックリンクをつくる</strong>
<blockquote>$ ln -s ~/Dropbox/appdata/sublime/Installed\ Packages ./Installed\ Packages
$ ln -s ~/Dropbox/appdata/sublime/Packages ./Packages
$ ln -s ~/Dropbox/appdata/sublime/Pristine\ Packages ./Pristine\ Packages

 

おわり。

 

参考: misfoc.us • Syncing Sublime Text 2 Settings via Dropbox に書いてあるのと同じ内容です。

 

(続きがあります)

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