2014-01-19

サーバーサイドでSassをコンパイルして、CSSが更新されたタイミングでブラウザをリロードして欲しい話

Webサイト構築(HTML+CSS+PHP+JS)ってだいたいローカル開発環境作って、サーバーにアップすると思うんだけど、結局サーバーサイドでも色々いじるハメになることが多い。

なので、サーバーサイドのファイル更新を監視して、ブラウザをオートリロードさせたいのだけれど、Codaの場合、エディタで保存してすぐリロードを走らせるので、サーバー側のSassのコンパイルが追いついていない訳です。

やりたいのは、サーバーサイドでSassがコンパイルされて、CSSが更新されたタイミングでブラウザをリロードして欲しい。ってことで、Chrome拡張のLivePageってのを使うことにしました。

Chrome ウェブストア - LivePage

インストールして、アイコンを押すと勝手に監視をスタートしてくれるので、仕組みはよくわからないけど、とりあえずこれで満足しました。

CodekitやGruntでなんとかできないかなぁと悪戦苦闘した割には一瞬で解決してしまいました。

2014-01-19

MAMP PROの複数のバーチャルホスト設定をDropboxで共有する

MAMP PROの複数のバーチャルホストはいくつも設定しておけて便利なんだけど、普段から複数のMacを使っている関係で、設定を同期しておきたかった。

最初はこいつ(httpd.conf)をシンボリックリンク同期しておけばよいと踏んでいたのだけど、やってみてもさっぱり同期されない。。。

理由はhttpd.confはsettings.plistを元に毎回発行されているらしい。なので、Dropboxにsettings.plistを置いておいて、両方のMacのsettings.plistをシンボリックリンクに置き換えればよいってことですな。

ハマりましたが、解決しました。

/Users/saku/Library/Application Support/appsolute/MAMP PRO/settings.plist

2014-01-11

RDSにphpMyAdminを入れる方法が分からないのでSequel Proを使ってみた

素人プログラム

経緯

最初はレンタルサーバーで使い慣れたphpMyAdminを使おうと思っていましたが、インストール方法がよくわからないので(いやがんばったんだけど...)、RDSにEC2経由でSequel Proにアクセスすることにしました。

RDSには直接アクセスはできないので、EC2経由で接続するような設定をするようです。

詳細はここがわかりやすいです。

【Mac, MySQL】Sequel ProでSSHでつないだサーバーの先にあるDBを見に行く。 ~AWSとか~ - 記すに足らず。

参考

- MySQLホスト : xxxxx.rds.amazonaws.com
- ユーザー名 : ()
- パスワード : ()
- データベース : (データベース名)
- SSHホスト : (EC2のEndpoint)
- SSHユーザー : ec2-user
- SSH鍵 : (pemファイル)

2014-01-05

へたれすぎてjQueryのDOM操作でハマる

素人プログラム

jQueryを勉強中なんですが、よくあるタブUIを実現しようと思ったら、Clickイベントの$(this)をちゃんと使わないせいでハマりました。

$(this)を使わずに、タブを1個設置して「わーいできた」と思っていたら、2個目のタブを設置したときに、タブをクリックするたびに、触ってないもう一方のタブのclass="selected"がはずれて消えてしまうというへたれ。

No...

// 修正前
$(function(){
    $('.tabs').each(function(){
        $('ul.tab>li:nth-child(1)').children('a').addClass('selected');
        $('ul.panel>li:not(:nth-child(1))').hide();
        $('ul.tab li a').click(function(){
            $('ul.tab li a.selected').removeClass('selected');
            $(this).addClass('selected');
            $('ul.panel>li').hide();
            $($(this).attr('href')).show();
            return false;
        });
    });
});

// 修正後
$(function(){
    $('.tabs').each(function(){
        $('ul.tab>li:nth-child(1)').children('a').addClass('selected');
        $('ul.panel>li:not(:nth-child(1))').hide();
        $('ul.tab li a').click(function(){
            $(this).parents('ul').find('.selected').removeClass('selected');
            $(this).addClass('selected');
            $(this).parents('.tabs').find('ul.panel').children('li').hide();
            $($(this).attr('href')).show();
            return false;
        });
    });

});