【gulp】リモートのマシンでLiveReload【livereload】

livereloadはフロントエンド開発に大変便利ですが、リモートのマシンのchromeのlivereloadプラグインを使うと、「Could not connect to LiveRealod server. Please make sure that a compatible LiveReload server is running.」とでて動きません。

ローカルのchromeのlivereloadプラグインでは何の問題もないのに、リモートからだと動きませんでした。「ファイルのURLへのアクセスを許可する」にチェックを入れても無駄でした。

そこで、RemoteLiveReloadというプラグインを見つけて、入れてみたところあっさり動きました。こちら↓です。

https://chrome.google.com/webstore/detail/remotelivereload/jlppknnillhjgiengoigajegdpieppei?hl=en-GB


ちなみにそのときにgulpの設定は、

$ cat gulpfile.js 
var gulp = require('gulp');
var livereload = require('gulp-livereload');

gulp.task('watch', function(){ 
	livereload.listen();
	gulp.watch('src/**/*').on('change', livereload.changed);
});

gulp.task("default", ["watch"]);

でした。

おぼろげながら、普通のlivereloadプラグインでもリモートから動いた記憶があるのですが今回は普通のliverealodプラグインでは動かず、RemoteLiveReloadプラグインに救われました。

Git を使ってみた

最近、コードを書いていてバージョン管理の必要性を感じてきました。プロジェクト名の後ろに日付を付けて管理していますが馬鹿みたいです。どこかの通信社では、Git で記事管理をしているそうです。世界的ですもんね、乗るしかない、このビッグウェーブに。

「当初、Git っていろんな用語があって訳分からん、検索してみて出てきたページを読んでもさっぱり…」という感じて手が出ませんでしたが、実際に動かしてみると何となく分かってきたし少なくとも使えるようにはなったので、理解する前にとりあえずやってみるといいと思います。

というわけでやってみました。Git についてあまり理解していないのでおかしなことを書いているかも知れません。

GitHub は嫌いではないのですが、自分でサーバーを持っているので、それを使おうと思います。

>せっかちな人のための git 入門 – git をインストールし、共同で開発できる環境を整えるまで
>http://blog.champierre.com/670


したことは、↑ほとんどこれをなぞったような感じです。

まず、自宅鯖(debian)に Git をインストールして、リモートレポジトリを作ります。

自宅鯖の操作↓

cat /etc/debian_version
6.0.5

aptitude install git
↑git をインストール

mkdir -p  /var/git/myapp.git
↑リモートレポジトリ用のディレクトリを作ります。
-p は、parent の意味(たぶん…)で、/var/ 以下の git ディレクトリと
myapp.git ディレクトリをふたつ一気に作ります。

cd /var/git/myapp.git/
↑そのディレクトリに移動します。

git --bare init
↑初期化します。git のレポジトリとして登録する感じです
(注: 適当に書きました)

次に、手持ちの MacBook (以下、MB1と表記)での操作↓
sudo port install git-core
↑ macports でインストールします。
git は git-core って名前みたいです(2012年9月8日においては)。

cd
↑ ホームに戻ります

mkdir myapp
↑ git で管理したいディレクトリを作ります

cd myapp

git init
↑ ローカルレポジトリを作成しているみたいです。

echo "Hello, Git." > hello_git.txt
↑ Hello, Git. と書かれたファイル(hello_git.txt)を作ってみました。
これを他のマシンでも取り扱えるようにしたいわけです。

git add .
↑ ディレクトリ内の全てを add します。
具体的にどこに add しているのか僕にはよくわかりません。
.git ディレクトリにされているのでしょうか。
インデックスに登録するイメージでしょうかね…?

git commit -m "first commiting"
↑ コミットします。一体何をコミットしているのでしょう。
そもそもコミットってなんでしょう。
さっきの add とまとめたらいいのではとか思ってしまいます。

git push ssh://yoshi/var/git/myapp.git master
↑ 先ほど作ったdebian鯖にアップロードします。push = アップロードって意味らしいです。
なんでわざわざ push なんて言葉を使うのでしょう。upload でいいじゃん…。さて、次の文字、
「ssh://yoshi/var/git/myapp.git」ですが、私は ~/.ssh/config で、
yoshi という名前で自分の鯖に入れるようになっています("ssh yoshi" で接続できる)、
それを活用しました。
秘密鍵を使い分けたい人なんかはこういうのが便利かと思います。省略記法を使わないなら、
"ssh://root@192.168.0.200:34522/var/git/myapp.git" と書けばいいと思います。
ここでの鍵の指定方は知りません。最後の、masterってのは、
デフォルトの開発ブランチを意味していて、
ブランチとはアクティブな開発ラインをさすみたいです。
ちなみに、ssh://yoshi/var/git/myapp.git と打つのはだるいので、
git remote add origin ssh://yoshi/var/git/myapp.git
として、
git push origin master
とすることも可能です。origin = ssh://yoshi/var/git/myapp.git であり、
つまりはエイリアスのようです。

さて、これ↑で MB1 で作ったデータを、remote の debian 鯖に反映させることができました。
次は、この debian 鯖のデータを他のマシンで引っ張ってくることが必要です。
MacBookProを用意します(以下MB2と表記)。

MB2での操作↓
cd
↑ ユーザーディレクトリに戻ります。

git clone ssh://yoshi/var/git/myapp.git
↑リモートのdebian鯖からデータを取って来ます。myapp というディレクトリが作成されます。
ちなみにこの MB2 でも MB1 同様に、/.ssh/config を書いていますので 
ssh://yoshi/var/git/myapp.git のような記述をしています。
そうでない場合は、先の MB1 の項目を参照してください。

cd myapp
↑ myapp に移動します。

ls -all
↑ きちんとデータを取ってこれたか確認してください。できているはずです。

echo "Hey, Git" > heygit.txt
↑ こちらでもデータを作ってみます。

git add .
git commit -m "added heygit.txt"
git push ssh://yoshi/var/git/myapp.git master
↑この操作は MB1 と同じですので詳細は書きません。

さて、↑の操作で、Debian 鯖の レポジトリをコピーして、
さらに編集してコミットして Debian 鯖に反映させました。
次に、先の MB1 に戻って、最新データを反映させてみましょう。

MB1 での操作↓
git pull ssh://yoshi/var/git/myapp.git master
↑先程は、git push ssh://yoshi/var/git/myapp.git master としましたが、
今度は pull です。引っ張ってくるって感じですかね。push と pull なわけです。
ちなみに、やはり"git remote add origin ssh://yoshi/var/git/myapp.git" を打って、
origin = ssh://yoshi/var/git/myapp.git な状態にしておいた方が良いかと思います。
git pull origin master って書けますので。さて、このコマンド後、先ほど MB2 で作った、
heygit.txt が反映されているはずです。

ls -all
↑ 確認してみましょう。

ひとまず以上です。まだ Git 使い始めて1時間の人間なのであまり良く分かっていませんが、備忘録+チートシート的に書いておきました。

ToDo:
– コメントの見方を調べる
– 日付と時刻ごとの表示のさせ方を調べる
– add がよく分からないので調べる
– 複数人で使うときはどうすればいいのか調べる(特にssh周りとか…。複数人皆がgit鯖にsshで入れる状態にしているってわけじゃない気がするのだがどうなのでしょう)
– 個々人開発の場合の一般的な Git サーバーの構成について調べる(バックアップも兼ねてここに置いておいてね、的なサーバーを用意するとして、具体的にどう管理するのか。それぞれユーザーを作って、そのユーザーディレクトリに好き勝手置いてもらえばいいのか)
– その他書き加える

Mac OS Mountain Lion で、FireFox 14.01 をフルスクリーンにするとアドレスとブックマークのバーが隠れてしまって使いにくい件の部分的な解決

表題の通りで困っておりました。フルスクリーンはコンテンツに没頭できて良い感じだが、FireFox だとアドレスバーとブックマークツールバーが隠れるので使いにくい。かと言って他のブラウザーには慣れていないので移行は出来ない。

いろいろと検索して調べていたらこんなのを発見↓

Mountain Lion + Full Screen = Roomy Bookmarks Toolbar disappears
http://support.mozilla.org/ja/questions/933132


これによると、アドレスバーに関しては、firefox のアドレスバーで、「about:config」として、「browser.fullscreen.autohide」をfalse にすればアドレスバーはフルスクリーンにしても消えなくなる。が、ブックマークツールバーは依然残ったままであり、上のフォーラムでもどうしたらいいの><という阿鼻叫喚状態である。

あれこれ探してみると、↓を発見。

ツールバーにマウスが乗ったときだけブックマークツールバーを表示するようにして回避
http://blog.mkuma.oops.jp/?eid=914404/


なるほどその手があったのか。使わせていただきました。

→が、微妙に使い勝手が悪い。ブックマークツールバーが出てくるときに描画画面がにゅるっと下に下げられるので厳しい。うーん、フルスクリーンで false に設定したのにブックマークツールバーが隠れるのはバグだって話もあるので、Mozilla の対応を待つ他ないか…。それか他のブラウザに移行するか、である。

【随時更新】Mac の自分用キーバインドの設定【常に最新】

追記@2012年8月13日月曜日
まだ書きかけ/(^o^)\です

鳥頭なのですぐに忘れる。というわけで Mac の 開発環境について書いておく。常に最新にしておく予定。

はじめに書いた日:
– 2012年8月13日

Mountain Lion (10.8) 用

用意するソフト:
– KeyRemap4Macbook-7.8.0 http://pqrs.org/macosx/keyremap4macbook/index.html.ja
↑ キーバインドをいじくるソフト。デフォルトでかなりのキーバインドがあって便利。このソフトを使って、かな+asdf…jkl;で数字を、かな+qwey…uiopでカーソルキーを使えるようにしたりしている。極めて安定していて素晴らしい。Win だと似たようなソフトに AutoHotKey というものがあるが、誤動作することがしばしばあってよろしくない。

– PCKeyboardHack-8.0.0 http://pqrs.org/macosx/keyremap4macbook/pckeyboardhack.html.ja
↑ KeyRemap4MacBook のアペンドみたいなもの。主に Caps Lock を設定することができる。個人的には Caps Lock は「-/=」を割り当てている。すごく楽。

– DrasticInputSourceStatus http://pqrs.org/macosx/DrasticInputSourceStatus/index.html.ja
↑ IME の状態により、メニューバー付近の色を変えるソフト。

– WordService http://www.devontechnologies.com/download/products.html ← ここの WordService ってところからダウンロード
↑ タイムスタンプを可能にするソフト。私は普段、「2012年8月13日」や「20:42」などの入力を多用するので。反映方法は、ルートドライブ(/ってやつ)の Library に Services というフォルダを作り、上記のリンクから落としてきた WordService.service を置く。 “ライブラリ” 下に、”Services”(Service ではない!Servicesである) フォルダを作成する。そして再起動して、以下に貼る画像のように設定する。

使い方、設定方法:

– KeyRemap4Macbook-7.8.0
private.xml を以下のようにする。

書いていて疲れた!書きかけとしておく!!!/(^o^)\