タグ

ブックマーク / blog.ruedap.com (15)

  • Node.jsアプリをCoffeeScriptで記述する - アインシュタインの電話番号

    Node.jsでのHello worldを済ませて、expressコマンドでアプリの雛形を自動生成できるようになったので、自分がNode.jsに興味を持った当初の目的である以下について実行してみる。 普段自分がRubyで使っているSinatra+Slim+Sassと似たような開発環境を、Node.jsでもExpress(CoffeeScript)+Jade+Sassを使えば実現できるかも? 個人的には、上記の憶測がなかったらNode.jsをやってみようと思わなかったと言っても過言ではないので、できるだけ早い段階でこの組み合わせをやってみたくて、まずはCoffeeScriptを触ってみた。 Node.jsアプリの雛形を自動生成 まずはNode.jsアプリの雛形を自動生成する。-cオプションでCSSにはSassを使うことを指定する。HTMLはデフォルトでJadeが選ばれるので指定はなし。 $

    Node.jsアプリをCoffeeScriptで記述する - アインシュタインの電話番号
  • Node.jsアプリでCSSテンプレートにStylusを使う - アインシュタインの電話番号

    前回のつづき。Node.js(Express)で使えるSassは、1つ前の旧型のSassシンタックスで、現在最新のバージョン3形式での記述が出来なかったという話。これを改善する情報をいろいろ探し回った末、Stylusという新しいCSSテンプレートに出会ったぁ(ウルルン風に) 旧型Sass問題 Sassは、現在最新版のバージョン3でのシンタックスと、それ以前のシンタックスで微妙に書き方が違う。さらに、バージョン3からはSCSS形式も導入されたので、結構ややこしい。expressコマンドの-cオプションを使って、Sassを指定した場合に自動生成されるstyle.sassはこんな感じ。これは旧型のSassシンタックス。 body :padding 50px :font 14px "Lucida Grande", Helvetica, Arial, sans-serif a :color #00B

    Node.jsアプリでCSSテンプレートにStylusを使う - アインシュタインの電話番号
  • HerokuでNode.jsとExpressを使ってHello worldする - アインシュタインの電話番号

    普段自分はHeroku+Sinatra+Slim+SassでWebアプリを作っているんだけど、Node.jsやCoffeeScriptについてちょっと調べてたら、Herokuを使う前提で、Node.js(Express), Jade, Sassという組み合わせでCoffeeScriptで書けば、前述のSinatraアプリとほぼ同じような感覚で書けそうなことに気づいて、ぐっとNode.jsに興味が沸いた。 ということで、さっそくHerokuを使ってNode.jsアプリを作ってHello worldしてみた。今回の記事を最後まで行くと、これが出来上がる。ソースコードはGitHubに。 各種インストール この記事ではNode.jsとExpressだけを使ってHello worldする。今回はJadeやSass, CoffeScriptは出てこない。まず、Node.jsとExpressを使うのに必

    HerokuでNode.jsとExpressを使ってHello worldする - アインシュタインの電話番号
  • Sinatraを使ってInstagram APIのアクセストークンを取得する - アインシュタインの電話番号

    Instagram APIに関する日語情報は、現時点ではこのページが一番良くまとまっていて素晴らしい。ただ、アクセストークンを取得する具体的な例は載っていなかったので(記事を読む限りPHPを使って取ってるっぽい?)、自分が取得した方法を備忘録がてらにまとめてみた。Instagram公式のRubyAPIラッパーライブラリを使って、さらにSinatraで記述するととても簡単にOAuth認証できる例が載っているので、これを少し書き換えて、アクセストークンを表示するようにした。 Sinatraでアクセストークン取得 Instagram APIのページのManageから、アクセストークンを取得したいアプリを新規作成にして、「OAuth redirect_uri」に http://localhost:4567/oauth/callback と入れる。あとは、表示されている「Client ID」と「

    Sinatraを使ってInstagram APIのアクセストークンを取得する - アインシュタインの電話番号
  • Vimでunite.vimプラグインを使い始めて一週間 - アインシュタインの電話番号

    unite.vimには気付かなかったことや使い方が変わったところなどがちらほらあったので備忘録。以下要点。 「起動時にインサートモードで開始」はONにするべきだった インサートモードから<C-u><C-h>でunite.vimを終了できる <C-m>で一番上に表示されているパスを確定(補完)できる <C-w>を単語単位からパス単位で削除するように変更した 「起動時にインサートモードで開始」はONにするべきだった 初日の記事では「起動時にインサートモードで開始」はOFFのほうが使いやすそうとか書いたけど、他の人が結構ONにしている理由がなんとなくわかった。OFFのほうが良いと思った一番大きな理由は「インサートモードじゃリスト上をjkで移動できないじゃんJK」だったんだけど、ヘルプを読んでいたら、インサートモードでも多くの操作ができるようデフォルトでキーマッピングがされていた。この表はノーマル

    Vimでunite.vimプラグインを使い始めて一週間 - アインシュタインの電話番号
  • SinatraとSlimの組み合わせでPartialする - アインシュタインの電話番号

    SinatraでSlimというテンプレートエンジンを利用した場合にPartialする方法について。前からやりたかったんだけど、やり方がわからなくて、過去に自分で作ったWebアプリは結構HTMLコードを重複させていた。今回やっとやり方がわかったので、今後はちょっと重複を減らせるかも。Sinatraのバージョン1.1でパーシャル機能が追加されたようで、結構シンプルな方法で使える模様。昔(ver.1.1より前)はこの機能は無かったので、自分でヘルパーメソッドを定義する必要があったみたい。 Partial(パーシャル)とは PartialとはRailsにある機能で、通常のテンプレートファイルの中で使うさらに小さい単位のテンプレートファイル(とその展開方法)という感じかな? 似たような機能にlayout.slimと== yieldを使ったレイアウト機能があって、これは対象のテンプレートの外側を包み込

    SinatraとSlimの組み合わせでPartialする - アインシュタインの電話番号
  • Rubyでrbファイルをrequireするときはドットを打つと良さそう - アインシュタインの電話番号

    記事タイトルがヘタなので、何言ってるのか伝わらなさそうだけど…。最近、Ruby 1.8.7で作ったWebアプリをRuby 1.9.2に移行させていて、その過程でつまずいて知ったことについて。Ruby 1.9.2からは、ロードパスにカレントディレクトリが含まれなくなったので、それによって起こるエラーを回避するための方法として、requireするパスにカレントディレクトリを示すドットを打つと良さそうという話。 実例 以下は説明用に簡略化した実例。まず、hoge.rbがあるとする。中身はこんな感じ。 puts 'hoge!' 同じディレクトリにapp.rbがあるとする。中身はこんな感じ。 require 'hoge.rb' app.rbを実行すると、Ruby 1.8.7ではこう。期待通り。 $ ruby app.rb hoge! けど、Ruby 1.9.2ではロードパスにカレントディレクトリが含

    Rubyでrbファイルをrequireするときはドットを打つと良さそう - アインシュタインの電話番号
  • はてなスターカウンターのソースコードをGitHubに公開してみた - アインシュタインの電話番号

    はてなスターカウンターの公開から既に1ヶ月以上が経過しているので今更感はあるけれど、はてなスターカウンターのソースコードをGitHubに公開してみた。 今回もHeroku+Sinatra+Slim+Sass はてなスターカウンターのソースコードを公開しているリポジトリはこちら。 ruedap/hatenastar-counter - GitHub 今回も過去のものと同じで、Heroku, Sinatra, Slim, Sassの組み合わせで作っている。 自分の中ではこの組み合わせはほぼ鉄板となりつつあって、よほどの理由が無い限りはまずこのセットでどう作るかを考え始める。この前のHerokuの大規模障害によって、Heroku以外の代替プラットフォームを探したりしてみたけど、今のところHerokuより便利そうなのは見つけられていない。 また、WebフレームワークのSinatraも小さいアプリを

    はてなスターカウンターのソースコードをGitHubに公開してみた - アインシュタインの電話番号
  • SinatraからActiveRecord 3を使う(1) マイグレーション - アインシュタインの電話番号

    以前SinatraからDataMapperを使う記事を書いたけど、今回はSinatraのO/Rマッパー部分にActiveRecord 3を使ってみる。ActiveRecord 3自体の使い方については、この記事がすごくわかりやすかった。 Sinatraアプリに必要なファイルを用意する まずは、Sinatraアプリを実行するのに必要な最低限のファイル群(Gemfile, config.ru, app.rb)を作成する。今回は基的にすべてBundler経由で操作するので、システム側にBundlerのgemがインストールされている必要がある。 Gemfile 今回使用するgemはこんな感じ。とりあえずSinatraでActiveRecord 3を使う場合はactiverecordとsinatra-activerecordとsqlite3が必要で、今回使ったバージョンはそれぞれ、3.0.6、0.

    SinatraからActiveRecord 3を使う(1) マイグレーション - アインシュタインの電話番号
  • Google App EngineのJRubyでSinatraを使ってHello worldする - アインシュタインの電話番号

    Google App EngineのJRubyでSinatraを使って、Hello worldと表示するだけの準備~デプロイまでの最低限の流れをメモった。それでも結構長い工程になった。最終的にはTwitter Botとかを作りたいんだけど、けっこう難しそうだなあ。 とりあえず今回の工程の完成形はこれ。GAEアプリは初回起動にめっちゃ時間かかるので、誰もアクセスしていない状態だと、表示されるまでに数秒~数十秒かかることも。 JRubyのインストールとgemのセットアップ まずはRVMを使ってJRubyをインストールする。結構時間掛かる。今回使用するJRubyのバージョンは1.5.6。 $ rvm install jruby GAE用にgemsetを作る。 $ rvm gemset list gemsets for jruby-1.5.6 (found in /Users/ruedap/.rv

    Google App EngineのJRubyでSinatraを使ってHello worldする - アインシュタインの電話番号
  • HerokuでWebアプリ開発を始めるなら知っておきたいこと(6) ステージング環境 - アインシュタインの電話番号

    HerokuでWebアプリ開発を始めるなら知っておきたいこと」シリーズの第6回では、Herokuなら簡単に作れる動作チェック用のサイト「ステージング環境」について書きます。このシリーズのまとめページはこちら。 動作チェック用サイトを簡単に作れる これは前回の環境変数ENVの便利さと、第1回で紹介したHerokuの無料スペックの高さを掛け合わせた使い方ですが、Herokuアプリを作るなら断然オススメの方法です。 業界用語(?)ではステージング環境と言うのですが、サイト制作やアプリ制作に携わっている人ならほとんどがやったことのある番に近い状態で動作チェックするための環境のことです。Webアプリにおいて特にステージング環境と言った場合は、限りなく番に近いサイトのことを指します。 Herokuは、この“限りなく番に近い”動作チェック用の別サイトを構築するのにとても適しています。その主な理由

    HerokuでWebアプリ開発を始めるなら知っておきたいこと(6) ステージング環境 - アインシュタインの電話番号
  • PowをSinatraアプリで使う - アインシュタインの電話番号

    先日37signalsが公開したMac OS X専用の開発環境用RackサーバーPowについて、この記事の導入解説がわかりやすかったので自分もインストールして使ってみた。自分の場合、主にSinatraを使うので、Sinatraでサンプルを作って複数のアプリを同時に動かしてみた。 nvmのインストール Powを使用するにはNode.jsが必要になるので、Rubyで言うところのrvmに相当するバージョン管理ツールnvmを使ってNode.jsをインストールする。nvmのインストール方法はこちらの記事を参考にした。 $ git clone git://github.com/creationix/nvm.git ~/.node $ . ~/.node/nvm.sh $ nvm install v0.4.5 $ nvm use v0.4.5 $ node -v .bashrcに以下の一行を追加して、b

    PowをSinatraアプリで使う - アインシュタインの電話番号
  • HerokuのSinatraでTwitterにつぶやく - アインシュタインの電話番号

    過去記事をベースに、今回はHerokuのSinatraからTwitterに手動でつぶやく処理を書く。 RubyTwitterのOAuth認証に必要なトークンを取得する HerokuでSinatraを使ってHello worldする HerokuアプリをGitHubにもプッシュする HerokuGitHubの両方にプッシュする時の秘密にしたい値の扱い Google App Engineの時に失敗した、twitterライブラリを使用する。 結果的に今回はうまくいった。完成形はこれだけど、今回のはあまり公開に向いていない作りなので、アップしてあるツイート部分の処理はコメントアウトしてある。 app.rbを編集 app.rbを以下のように書き換える。ENVの値はこのやり方で作っておく。 require 'rubygems' require 'sinatra' require 'twitter'

    HerokuのSinatraでTwitterにつぶやく - アインシュタインの電話番号
  • ターミナルからMacVimを起動するときはタブで開く - アインシュタインの電話番号

    以前Vimperator用にmvimコマンドを入れたけど、これはMacVimの環境設定で「外部からファイルを開くときにはタブで開く」の設定にしておいても、mvimコマンドからだと新規ウィンドウで開いてしまう。すでにMacVimのウィンドウが開かれている場合はウィンドウが2個になる。これの解決方法について。 この動作はVimperatorからC-iで開く場合には、入力後にMacVimのウィンドウを閉じることでVimperator側に反映させるので新規ウィンドウの方が都合が良いんだけど、ターミナルから普通にコマンドラインで指定して開く場合はタブで開いてほしい。どうしたものかなと調べていたら、そのものズバリの解決方法を紹介してくれているページがあった。 単にmvimコマンドを使うと、実行ごとに新しいウインドウが開いてしまう。 せっかくタブ化できるんだから、タブで開きたい。 そういうときは、mvi

    ターミナルからMacVimを起動するときはタブで開く - アインシュタインの電話番号
  • Vimでファイラー兼ランチャーなunite.vimプラグインを使う - アインシュタインの電話番号

    ちょっと前から名前は見かけていたんだけど、何をするプラグインなのかよく分からなくて見送っていた。Twitterでもつぶやいたけど、もっと早く導入しておけば良かったと、ちょっと触ってみただけで思った。 unite.vim - Unite all sources : vim online どんなことができるかについては、作者さんが公開しているこのプレゼン資料がわかりやすい。このプラグインについてほとんど知らない自分が、前述のプレゼン資料を読んで、18ページ目に書かれている:Unite buffer file file_mruを実行してみて受けた印象は、 Vim用のコマンドラインランチャー(Windowsで言えばfenrir、Macで言えばQuicksilver)のようなもの ってかんじ。でも、色々なブログでの紹介を見ていると、ランチャー機能だけにとどまらずかなり広い操作をカバーしており、拡張性

    Vimでファイラー兼ランチャーなunite.vimプラグインを使う - アインシュタインの電話番号
  • 1