GitHubでPermission denied (publickey).って言われる

複数の専用鍵が必要になったのでメモ

SSH key を作成

http://help.github.com/mac-set-up-git/
ファイル名を git_id_rsa とでもしておく

configに登録

$ cat >> ~/.ssh/config
Host github.com
User git
Hostname github.com
IdentityFile ~/.ssh/git_id_rsa

公開鍵を登録

https://github.com/account/ssh

環境変わるとssh/configを忘れがちなので気をつけたい。

TextMateでJSLintするとnodeがないよって怒られる

Textmateで構文チェック(JSLint)をするBundleが便利そうなので入れてみたのですが

javascript-tools.tmbundle
https://github.com/subtleGradient/javascript-tools.tmbundle

どうやらnodeを使っているらしく、初期では /usr/bin や、/bin などを参照に行っています。
ここで見つからない場合、こんなエラーがでてしまいます。

私の環境では /usr/local/bin にnodeを置いていたので、このパスをTextMateに登録する必要がありました。

Preferencesで設定

TextMate > Preferences > Advanced > Shell Variables

どこにnode入れたっけ?という場合は、ターミナルに "which node" で聞くと教えてくれます。
パスは : で区切ります。

無事に起動しました。
READMEにまんま書いてあるのを気づかず四苦八苦したのはいい思い出です。

JSでワンライナーテンプレート

どちらかというとTipsの類ですけれども。
JSコード上に、HTMLがあちこちにあるとどうしてもメンテしにくいので、
ファイルの分かりやすい場所に下記みたいなコードを用意しておきます。

var LIST = "<li><span title='No.=NUM='>Menu =NUM=</span></li>";

これを雛形として

for (var i=0; i<5; i++)
{
	$(LIST.replace(/=NUM=/g, i)).appendTo("ul");
}

ループなんかで処理したりして

<ul>
	<li><span title="No.0">Menu 0</span></li>
	<li><span title="No.1">Menu 1</span></li>
	<li><span title="No.2">Menu 2</span></li>
	<li><span title="No.3">Menu 3</span></li>
	<li><span title="No.4">Menu 4</span></li>
</ul>

こんなのが出力されます。
※みやすくなるよう整形してます

超単純ですが見た目すっきりするし、メンテしやすいので気に入ってます。
テンプレートエンジン使うほどじゃないなーって場面でよく使ってます。

Lionにデフォルトで入ってるGitのアップデート方法がよく分からなかった

Mac book air 買ったんですけれども、デフォルトでGit入ってて、便利になったもんやなーと思ってたらバージョンが 1.7.5.4 だったので、じゃあアップデートしようかなと思ったけど方法がよく分からなかったというお話です。

LionのGitは /usr/bin/ にあるんですけど、一応こちらは残しておきたいので、Homebrewでインストールしたほうを使うことにしました。

brew install したGitは、そのままだとデフォルトが優先されてしまうので読み込み順を変えます。

.bash_profile に

export PATH=/usr/local/bin:$PATH

と加えて

$ git --version
>git version 1.7.7.3

おk。

SCSSの3つのコメントスタイル

SCSSはコンパイル時に出力スタイルのオプションをつけることで、出力を制御できます。
これはコメントの出力にも影響があるので、違いをまとめてみました。

基本的には

単一行コメントはすべて取り除かれ、複数行は圧縮指定(--style compressed)しないかぎりは出力されます。

公式にサポートされているコメントスタイル

//単一行コメント

/*
 * 複数行コメント
 */

これに加えて、どのオプションでも削除されないコメント行も指定できます。
ライセンス表記などに向いてるので、ライブラリをインポートする場合に最適だと思います。

/*!
 * エスケープされる複数行コメント
 */

ただしドキュメントには記載がなかったので将来にわたって使用できる方法か分かりません。
(執筆時のSassのバージョンは 3.1.10)

出力スタイルの指定

次のSCSSを基本に各オプションで出力した違いを紹介します。

style.scss
/*!
 * !を含んだ複数行コメント
 */
/*
 * 複数行のコメント
 */
body {
	// 単一行コメント
	color: black;
	
	a {
		color: green;
	}
}

これをそれぞれのオプションで出力してみます。
出力スタイルは --style に nested, expanded, compact, compressed の4つがあります。

nested

scss --style nested style.scss style.css

入れ子構造で出力されます。--styleをつけない場合のデフォルトになります。
単一行コメントは削除され、複数行コメントは残ります。

/*
 * !を含んだ複数行コメント
 */
/*
 * 複数行のコメント
 */
body {
  color: black; }
  body a {
    color: green; }
expanded

scss --style expanded style.scss style.css

一般的な記述方式に近いスタイルです。
単一行コメントは削除され、複数行コメントは残ります。

/*
 * !を含んだ複数行コメント
 */
/*
 * 複数行のコメント
 */
body {
  color: black;
}
body a {
  color: green;
}
compact

scss --style compact style.scss style.css

セレクタとプロパティを一行にまとめます。
単一行コメントは削除され、複数行コメントは残りますが一行になります。

/*
 * !を含んだ複数行コメント
 */
/* 複数行のコメント */
body { color: black; }
body a { color: green; }
compressed

scss --style compressed style.scss style.css

改行と空白、単一行と複数行のコメントも削除されます。

/*
 * !を含んだ複数行コメント
 */body{color:black}body a{color:green}

こんな感じで使い分けてます

/*! ライセンス関係 */
/* ルールセットの見出し、またはデバッグ時の助けになるような情報 */
// 通常のコメント、またはコメントアウト

チームでの開発時は nested や expanded でコメントを共有し、リリース時には compressed でライセンス以外を削除、といった使い方にいいんじゃないででしょうか。

SCSSとLESSのどちらを導入するか迷って、SCSSに決めたポイント

SCSSとLESSのどちらを導入するかけっこう悩んだ時のまとめです。
最終的にはSCSSを選択しましたが、導入の参考になれば幸いです。


ちにみに、SCSSとLESSとは

再利用できるスタイル定義や変数など、CSSを効率的にコーディングできるように拡張されたメタ言語です。
どちらも、CSSをベースにした独自の記法でもってコーディングしそれをコンパイラCSSに展開するというものです。

LESS
SCSS

動作環境や使用などの詳しい比較はこちらが参考になります
http://dxd8.com/archives/217/

Sass ≠ SCSS
SCSSを調べていると、Sassという単語も目にすると思います。

使い始めた当初はごっちゃになってたのですが
もともとはSassというプロジェクトが存在し、そこから派生したのが SCSSらしいです。

Sassも同じコンセプトのCSS拡張言語ですが、
たとえば {}ではなく、インデントでプロパティを記述したり、セミコロンが不要だったりとシンタックスCSSとは異なります。

ここではSCSSを取り上げています。

よく使う機能

通常のCSSへ感じている不満を解消してくれる次の3つはとても重宝しています。

特にミックスインと変数はコードの再利用性を促すので似たようなコードが発生しやすいCSSを抑制してくれます。
コーディング規約だけに頼らずに管理面を強化できるので複数人での制作時に力を発揮するのではないでしょうか。

上記の機能であれば、SCSSとLESSどちらにもあります。

SCSSには、さらに条件分岐やループがあったりと、よりスクリプトっぽく書けますが、あまり高機能だとちょっと本末転倒な気もするので私は使ってません。

サンプルコード

.scss
//------------------------------------------------------------------------------
//  SCSS
//------------------------------------------------------------------------------
//ではじまるコメントは除去される

//変数
$line_color: #000;

//ミックスイン
//引数に初期値が使える
@mixin box($line: #444) {
	margin: 10px;
	padding: 8px;
	border: 1px solid $line;
}

/**
 * box style
 */
div {
	//ミックスインの呼び出し
	@include box();
}

/**
 * Article section
 */
#Article {
	//セレクタのネスト
	div {
		@include box($line_color);
	}
}

[追記] 2011/12/3
windows環境だと日本語がWindows-31Jとかエラーが〜云々って書いたのですが、これよくよく考えたらフォント指定で困りますね。普段Macで作業してたので気付かなかったんですけれども、partialに日本語を含んでいるとコンパイル時に必ずコケます。コンパイル対象としているファイルに記述をまとめて回避してますけど、もっといい対策方法はあるのでしょうか...

.less
//------------------------------------------------------------------------------
//  LESS
//------------------------------------------------------------------------------
//ではじまるコメントは除去される

//変数
@line_color: #000;

//ミックスイン
//引数に初期値が使える
.box(@line: #444) {
	margin: 10px;
	padding: 8px;
	border: 1px solid @line;
}

/**
 * box style
 */
div {
	//ミックスインの呼び出し
	.box();
}

/**
 * Article section
 */
#Article {
	//セレクタのネスト
	div {
		.box(@line_color);
	}
}
コンパイル後のCSS
/**
 * box style
 */
div {
  margin: 10px;
  padding: 8px;
  border: 1px solid #444444;
}
/**
 * Article section
 */
#Article div {
  margin: 10px;
  padding: 8px;
  border: 1px solid #000000;
}

コンパイル後のものは整形してますがだいたい同じもの出力されます。
※SCSSは #000 を black とかにしてしまうので好みの分かれるとこかも
※どちらもminifyが用意されてます

@mixinや@includeといったディレクティブのない、LESS記法のほうが通常のCSSに近いので学習コストも低く、また .クラス名セレクタをミックスイン定義としても利用できるので既存プロジェクトからの移行や、普段から使用しているライブラリの流用を想定しているのならLESSがよさそうです。

コンパイラ

どちらもコマンドラインから使えます。
SCSSはRubyで動作するので、gem install sass でインストールできます。

コンパイルは次のコマンドで行います。

$ scss styles.scss styles.css

--watch オプションをつけると .scss ファイルが更新されたら即CSSコンパイルする、ファイル監視が実行されます。

$ scss --watch styles.scss styles.css

いっぽうLESSはコンパイラがjsで実装されています。
なので動的に処理するのであれば、.lessファイルとless.jsを読みこむだけです。

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

環境を問わず開発が行えるのでこれは強みです。
とはいえ実際に運用するなら、CSSコンパイルしたほうが無難だとは思います。

コマンドラインからコンパイルする場合はnodeが必要なのでwindowsだとちょっと面倒かもしれません。
MacにはGUIアプリの LESS.app があります。
プロジェクトフォルダをアプリにドロップすると自動的に.lessを検出してファイル監視を開始するで手軽でよいのではないでしょうか。

総合的には

作業環境がMac(で統一されているの)なら、導入コスト的にはLESSがおすすめです。

ただし個人的にLESSの導入がネックだった点は、ミックスインと同名のスタイル定義ができてしまうことです。

コンパイル前のLESS
.box() {
	border: 1px solid #000;
}

.box {
	border: 1px solid #f00;
}

div.section {
	.box;
}
コンパイル後のCSS
.box {
	border: 1px solid #f00;
}
div.section {
	border: 1px solid #000;
	border: 1px solid #f00;
}

.box() {} と、.box {} が共存しています。

これをメリットととるかデメリットととるかは運用次第だと思いますが、複数人で作業していると意図しないスタイルの上書きが起きる可能性もあり、そういった問題を回避することを導入目的としているので、この点が非常におしいです。

今回は、ディレクティブで宣言を明示できるSCSSに軍配があがりました。

まとめ

どちらを導入するにせよ、効率化は期待できるので、既存のコーディング規約などと照らしあわせて選択してみるとよいのではないでしょうか。

しばらく運用してみて、やっぱLESSだよ!となったらまたまとめたいと思います。

Twitterボット作成手順

今更感満載ですが、PHPの勉強がてらTwitterボットをつくってみたときのメモが出てきたので、キャプチャとりなおしてまとめました。
全体的な手順としては、こんな感じです。

  • ボット用のTwitterアカウントの取得
  • APIキーの取得
  • 決まった文言をツイートする仕組みをコーディング
  • これを定期的に処理するcronを設定する

日曜コーディングにちょうどいいボリュームじゃないでしょうか。

アカウントの取得

まずはボット用のツイッターアカウントを取得します。
http://twitter.com/

アカウントの作成にはメールアドレスを用意する必要がありますが
Gmailのアカウントを持っていたら、エイリアスを使うのがおすすめです。

エイリアスというのは、アカウント名と任意の文字列を+記号で連結した
[Gmailアカウント]+[好きな文字列]@gmail.com という形式で
特別な設定なしにアドレスを増やせて、受信は既存アカウントでそのまま行えます。

yourname@gmail.com というアドレスならば
yourname+twitter_bot@gmail.com という感じで作成できるわけです。

こうしておけば、Gmailのフィルタで、ボットに関するメールを抽出できたりと管理上も便利です。
これでもってアカウントを作成してTwitterから認証メールがきたら、APIキーを取得します。

APIキー(OAuth)の取得

https://dev.twitter.com/apps/

ボットのアカウントでログインして [Create a new application]ボタンで作成画面に移動します。

"My applications"の各項目を埋めていきます。

Name

アプリケーション名(ツイートの「○○から」の部分)

Description

10文字以上の説明文。

Website

アプリケーションの説明ページのURL

Callback URL

登録後に転送するURLを設定しますが、今回は使用しないので空欄。

規約の内容を確認して問題なければ、[Create your Twitter application]で登録を完了させます。

アプリケーションページが作成されたら、まずは画面上部の[Settings]タブを開きます。
ツイートの投稿を行うのでApplication Typeから、"Read and Write"を選びます。

設定内容を[Update this Twitter application's settings]ボタンで更新します。

もといたタブ[Details]に戻って、OAuth settingsの項目にあるAccess levelが "Read and Write"になっているのを確認したら、
Consumer keyConsumer secretを控えます。

続いて、最下部にある[Create my access token]ボタンでアクセストークンを発行します。

トークンキーがすぐに表示されない場合がありますが、リロードするかしばらくしてからアクセスすると表示されてると思います。
正常に Access TokenAccess Token Secretが表示されたら、これも控えます。

次の4つがそろったら、ツイッター上での作業は終了です。

  • Consumer key
  • Consumer secret
  • Access Token
  • Access Token Secret

コーディング

「ファイルを実行するごとに、ツイートする」というがスクリプトの大まかな流れです。
スクリプトからツイートさせるには、OAuth認証を行うのですが、これはライブラリにまかせます。

おそらく一番手軽に使えるのが、これだと思います。
https://github.com/abraham/twitteroauth

このライブラリに、先ほど取得した4つのキーを渡して、リクエストメソッドを実行すると
認証からTwitter APIに投げるとこまでやってくれます。便利!

OAuthライブラリを利用する Botクラスファイルと、このクラスを使用する app.php とにファイルを分けます。

ファイル構成はこんな感じに。

OAuth.phpOAuth	ライブラリ
TwitterOAuth.php	ライブラリ
Bot.php			ツイート処理を行うボットクラス
app.php			定期実行させるファイル

勉強もかねて無駄にクラス化された Botクラスがこちら。

Bot.php

<?php
class Bot
{
    /**
     * @var TwitterOAuth
     */
    private $_api;
    
    /**
     * 初期化
     *
     * @param type $twitterOAuth OAuthクラス
     */
    function __construct($twitterOAuth)
    {
        $this->_api = $twitterOAuth;
    }
    
    /**
     * ツイートを投稿
     *
     * @param string $tweetText ツイートテキスト
     * @param string $print 結果の出力
     */
    public function postTweet($tweetText, $print = true)
    {
        $result = $this->_api->OAuthRequest(
            "http://api.twitter.com/1/statuses/update.xml",
            "POST",
            array("status"=>$tweetText)
        );
        
        if ($print)
        {
                print_r($result);
        }
    }
}
?>

app.php

<?php
require_once("Bot.php");
require_once("twitteroauth.php");

$consumer_key = "控えておいた Consumer key";
$consumer_secret = "控えておいた Consumer secret";
$access_token = "控えておいた Access Token";
$access_token_secret = "控えておいた Access Token Secret";

$bot = new Bot(
    new TwitterOAuth($consumer_key, $consumer_secret, $access_token, $access_token_secret)
);

//時刻をつぶやかせる
$bot->postTweet(date("Y/m/d H:i:s"));
?>

"控えておいた〜〜" となっている箇所には、取得したAPIキーを適宜記入してください。

Mac環境であれば ターミナルで実行して動作を確認します。
cdでファイルのあるディレクトリまで移動したら次のコマンドで実行します。

$ php app.php

問題なければ、ボットアカウントのTLに時刻がツイートされてると思います。

定期処理

正常に動いたら、これを cron で定期実行させます。

私は、さくらを使ってるのでその設定例。
さくらのコントロールパネルの"CRONの設定"を開き、新規項目を追加します。
サーバーに配置した実行ファイルが app.php ならば、こんな感じなります。

コマンド:

cd /home/[アカウント]/www/[ボットまでのディレクトリ]/; /usr/local/bin/php app.php

完了通知が不要だったら末尾に " 1> /dev/null" オプションをつけます。
続いて実行間隔の設定。

月:*
日:*
時:*
分:0,15,30,45

この設定だと、15分おきに実行されるはずです。

サンプルコードのものは、ほんと最小限の機能ですので、
たとえばランダムなテキストをポストさせたり、リプライに反応させるなど
ボット機能を拡充させていくといいんじゃないでしょうか。