GitHubでPermission denied (publickey).って言われる
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}
SCSSとLESSのどちらを導入するか迷って、SCSSに決めたポイント
SCSSとLESSのどちらを導入するかけっこう悩んだ時のまとめです。
最終的にはSCSSを選択しましたが、導入の参考になれば幸いです。
ちにみに、SCSSとLESSとは
再利用できるスタイル定義や変数など、CSSを効率的にコーディングできるように拡張されたメタ言語です。
どちらも、CSSをベースにした独自の記法でもってコーディングしそれをコンパイラでCSSに展開するというものです。
動作環境や使用などの詳しい比較はこちらが参考になります
http://dxd8.com/archives/217/
よく使う機能
通常の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; }
まとめ
どちらを導入するにせよ、効率化は期待できるので、既存のコーディング規約などと照らしあわせて選択してみるとよいのではないでしょうか。
しばらく運用してみて、やっぱLESSだよ!となったらまたまとめたいと思います。
Twitterボット作成手順
今更感満載ですが、PHPの勉強がてらTwitterボットをつくってみたときのメモが出てきたので、キャプチャとりなおしてまとめました。
全体的な手順としては、こんな感じです。
日曜コーディングにちょうどいいボリュームじゃないでしょうか。
アカウントの取得
まずはボット用のツイッターアカウントを取得します。
http://twitter.com/
アカウントの作成にはメールアドレスを用意する必要がありますが
Gmailのアカウントを持っていたら、エイリアスを使うのがおすすめです。
エイリアスというのは、アカウント名と任意の文字列を+記号で連結した
[Gmailアカウント]+[好きな文字列]@gmail.com という形式で
特別な設定なしにアドレスを増やせて、受信は既存アカウントでそのまま行えます。
yourname@gmail.com というアドレスならば
yourname+twitter_bot@gmail.com という感じで作成できるわけです。
こうしておけば、Gmailのフィルタで、ボットに関するメールを抽出できたりと管理上も便利です。
これでもってアカウントを作成してTwitterから認証メールがきたら、APIキーを取得します。
APIキー(OAuth)の取得
ボットのアカウントでログインして [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 keyとConsumer secretを控えます。
続いて、最下部にある[Create my access token]ボタンでアクセストークンを発行します。
トークンキーがすぐに表示されない場合がありますが、リロードするかしばらくしてからアクセスすると表示されてると思います。
正常に Access TokenとAccess Token Secretが表示されたら、これも控えます。
次の4つがそろったら、ツイッター上での作業は終了です。
コーディング
「ファイルを実行するごとに、ツイートする」というがスクリプトの大まかな流れです。
スクリプトからツイートさせるには、OAuth認証を行うのですが、これはライブラリにまかせます。
おそらく一番手軽に使えるのが、これだと思います。
https://github.com/abraham/twitteroauth
このライブラリに、先ほど取得した4つのキーを渡して、リクエストメソッドを実行すると
認証からTwitter APIに投げるとこまでやってくれます。便利!
OAuthライブラリを利用する Botクラスファイルと、このクラスを使用する app.php とにファイルを分けます。
ファイル構成はこんな感じに。
OAuth.phpOAuth ライブラリ TwitterOAuth.php ライブラリ Bot.php ツイート処理を行うボットクラス app.php 定期実行させるファイル
勉強もかねて無駄にクラス化された Botクラスがこちら。
<?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分おきに実行されるはずです。
サンプルコードのものは、ほんと最小限の機能ですので、
たとえばランダムなテキストをポストさせたり、リプライに反応させるなど
ボット機能を拡充させていくといいんじゃないでしょうか。