2015-07-30

slimからJSの世界にデータをjsonで渡す

いまWebのフロントエンド開発において、JSで一部のHTMLを動的に構築することが増えてきた。 JSでデータからHTMLを構築する場合、そのデータの部分はやっぱりjsonの方が扱いやすい。

自分はRailsのテンプレートエンジンにslimを使っているので、slimでJSの世界にjsonを渡す方法を考えたので書いておく。

htmlのdata-attributeにjsonを渡す

こんな感じ。

div.data-getter data-getter=@value.to_json

javascript:
  var value = JSON.parse($('.data-getter').attr('data-getter'));

jsにデータ受け取り用のglobal変数を作って、そこに渡す

こんな感じ。

javascript:
  DataGetter = {};
  DataGetter.value = #{raw @value.to_json}

2015-07-01

Roswellで使ってみる

色んなプログラミング言語を遊びで触ることが多いのですが、Common Lispもやっています。

日本でCommon Lispとういうと八発白中というブログですが、そこで紹介されていたRoswellというプロダクトを使ってみました。

インストール

Mac OSならbrewでインストールできるらしい。

$ brew tap snmts/roswell
$ brew install roswell

処理系をインストール

ruby でいうrbenvのように処理系をバージョン指定してインストール可能らしい。とりあえずいまはバージョンどうでもいいので処理系のみ指定してインストールする。

$ ros install sbcl

Repl起動

ros run コマンドでreplが起動出来る。

$ ros run 
* (+ 1 2 3)

6

雑感

CommonLispを始めるときに処理系をインストールするのは結構面倒だったので、こういうツールはありがたいです。 (まあ、いうほどLisp書いてないけど・・

2015-06-04

windows7でvagrant ssh コマンドが使えるようにする

はじめに

windows7でvagrantを使うの続きの記事です。

もしvagrantのインストールがまだであればwindows7でvagrantを使うを試してみて下さい。

vagrant sshとは

vagrant sshとは、vagrantで立ち上げた仮想環境にsshで簡単にログインできるコマンドです。しかしWindowsではデフォルトでsshクライアントが入っていないため、このコマンドが使用出来ません。

このままでは辛いので、どうにかしてwindowsでもvagrant sshが使えるようにします。

mingw-getをインストールする

Windows上でGNU/Linuxのコマンドラインツールを使えるようにしたMinGWというものがあります。 mingw-getとはMinGWのパッケージ管理ツールのようなもので、これを使ってsshをインストールして使えるようにします。

mingw-getはここからmingw-get-setup.exeをダウンロードして、そのファイルを実行するとインストールが開始します。

MinGW Minimalist GNU for Windows Browse Installer at SourceForge.net.png

インストールの手順は、ここも説明に従って行えば問題ないです。

インストールが完了するとMinGW Install Managerが起動されます。

スクリーンショット 2015-06-02 18.03.41.png

MinGW用にPathを通す

MinGWでインストールされるコマンドなども環境変数Pathを通さないと実行できません。なにも変更せずにインストールしていればC:\MinGW\binにコマンドをインストールされるのでこのパスをユーザー環境変数Pathに設定してください。

MinGWを使って基本ソフトウェアをインストールする

MinGWを使ったインストール方法はこのブログの詳しく乗っているので、このブログの「パッケージのインストール：GUI編」を参考にしてください。

MinGWでsshクライアントをインストールする

MinGW Install Managerを開いて右側にあるMSYSをクリックするとMSYSのパッケージがリストで表示されます。その中にmsys-opensshとmsys-opensslというパッケージがあるのでそれらにチェックをいれます。

その後、左上メニューのInstallation->Apply Changesをクリックするとインストールが開始されます。

注意点

MSYSのパッケージはデフォルトだとC:\MinGW\msys\1.0\binにインストールされます。ここにもPathを通さないとコマンドが実行できないので、ユーザー環境変数PathにC:\MinGW\msys\1.0\binを追記してください。

vagrant sshを試す

sshのインストールが完了しましたら、コマンドプロンプトを立ち上げ、Vagrantiflleがあるディレクトリに移動します。そこでvagrant upでvagrantを起動し、vagrant sshコマンドを実行します。

そこでエラーが発生せずに仮想環境の中にログインできたら成功です。

スクリーンショット 2015-06-02 18.44.17.png

さいごに

vagrant ではrsyncコマンドも使うのでsshと同じ要領でrsyncコマンドをインストールしておいた方がいいです。ちなみにsshと同じようにMSYSにパッケージが入っています。

参考URL

Windows7にmingw-getでMSYSのsshとrsyncをインストールする

2015-06-04

windows7でvagrantを使う

はじめに

現在行っているプロジェクトで最初は自分一人エンジニアで開発を行っており開発環境にVagrantを利用していたのですが、この度マークアップと連携する段階に入り、いままで自分のMacにvagrantで開発環境を作って開発してきたので、その環境をマークアップのwindowsで再現するためにwindowsでvagrantを使う方法を調査したのでまとめおきたいと思います。

vagrantとは

vagrantとは仮想環境の起動、Stop、削除をコマンドラインで簡単に操作でき、かつその仮想環境の設定(os、ネットワーク、メモリ割り当てなど)をVagrantfileという一つファイルで行なう事が出来るツールです。

このVagrantfileを共有することが簡単に仮想環境を構築できること、他の人と同じ開発環境を簡単に再現できることが魅力で使われているツールです。

vagrantについての説明はよりわかりやすい説明がされているブログがあるので、ここでの説明は省略します。

インストール手順

vagrant インストール

まず公式サイトからダウロードします。Windowsを選択して、ダウロードして下さい。

インストールしたファイルをダブルクリックして、あとは説明に従えば上手く行きます。

VirtualBoxをインストール

vagrantで利用する仮想環境を作るためにはなんらかの仮想化ツールが必要です。ここでは自分も使っているVirtualBoxを利用するのでインストールします。

公式サイトのダウロードページにある「VirtualBox 4.3.28 for Windows hosts -> x86/amd64」を選択してダウロードして下さい。

スクリーンショット 2015 06 02 15.46.05.png

ダウンロードしたファイルをクリックしたらインストールが始まります。ここも説明どおり進めていけば問題ありません。

VirtualBoxのパスをユーザー環境変数Pathに設定する

vagrantがVirtualBoxを使用するためにユーザー環境変数PathにVirtualBoxのパスを設定する必要があります。特別に変更せずに進めていれば、C:\Program Files\Oracle\VirtualBoxにインストールされているはずなので確認して下さい。

VirtualBoxをインストールしたパスが確認できれば、それを環境変数に設定します。

環境変数の設定するにはWindowボタン->Computer->System properties -> Change settingsとを辿ると以下の設定画面を表示させます。(画像は英語になっているので日本語に読みかえて下さい。)

スクリーンショット 2015-06-02 16.29.28.png

画面の下にある「Environment Variables」ボタンをクリックすると環境変数設定画面に入ります。

環境変数の設定画面には上部の「ユーザー環境変数(User variables for ユーザー名)」と下部の「システム環境変数(System variables)」があります。

ユーザー環境変数のPathに先ほど確認したVirtualBoxのPathを追加したのですが、もしすでにPathがあればすでに書かれている値の後に追記してください。もしなければNewボタンをクリックして、新規に作成します。

スクリーンショット 2015-06-02 16.32.16.png

vagrantで仮想環境を立ち上げる

インストール&設定が上手くいったか確認するため、vagrantを使ってみる。

好きなディレクトリに移動して、以下のコマンドを実行してください。

$ vagrant init hashicorp/precise32

成功するとVagrantfileが作成されます。そのVagrantfileで定義された仮想環境を立ち上げるには以下のコマンドを実行します。

$ vagrant up

上手くいけば指定された仮想環境のboxのインストールから立ち上げまで行ってくれます。

注意点

もしvagrant upしたときにエラーが発生し、「VirtualBoxがインストールされていない」というエラーメッセージが表示された場合まだ環境変数Pathがコマンドプロンプトに反映されていないのが原因かもしれません。一度コマンドプロンプトを再起動させると上手くいくかもしれないので試してみて下さい。(自分はWindows自体を再起動したけど。。)

課題

vagrantで立ち上げた仮想環境にsshで簡単にログインできるコマンドでvagrant sshというのがありますが、Windowsだとデフォルトでsshクライアントが入っておらず使えない。。

このvagrant sshを使えるようにするのは別記事にまとめましたのでそちらを参考にして下さい。

2015-05-23

生のHTMLを書くことが辛くなってきた。

自分はWebアプリケーションエンジニアで、１年程前まではサーバーサイドをPHPで書いていたのでその延長でHTMLを書くことには特に何も思うことはありませんでした。

ただこの一年ぐらいはサーバーサイドにRubyonRailsを採用してSlimというテンプレートエンジンを使っています。 SlimというのはHTMLをもっと簡易的にかけるツールで、例えば以下のようなHTMLを

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Sample File</title>
  </head>
  <body class="sample">
    <div id="contents">
      <h1>Sample File</h1>
      <img alt="yterajima" src="http://www.e2esound.com/images/yterajima.jpg" />
      <p>テキストテキストテキスト</p>
      <p>テキストテキストテキスト
        テキストテキストテキスト</p>
    </div>
  </body>
</html>

以下のように簡易記法でかけます。

doctype html
html
  head
    meta charset="utf-8"
    title Sample File
  body.sample
    #contents
      h1 Sample File

      img src="http://www.e2esound.com/images/yterajima.jpg" alt="yterajima"

      p テキストテキストテキスト

      p
        | テキストテキストテキスト
          テキストテキストテキスト

もし興味があれば、slimの詳しい説明は公式サイトや速習テンプレートSlim(HTML作成編)を見ていただけるとよくわかるので参考にしてみてください。

一度Slimのようなテンプレートエンジンを使うと、書くコードが格段に減りますし、コードが減るので効率、可読性、メンテナンス性も格段に上がります。その恩恵を受けると、生でHTMLが辛くなってくるんですよねーー。

2015-04-02

フロントエンド開発にRailsアプリでもnodeのエコシステムを使うという選択

はじめに

RailsではデファルトでAsset Pipelineという機能により、SassやaltJs(CoffeeScriptやTypeScript)のコンパイルやファイルの結合、圧縮を行ってくれる機能があります。なので通常はバックエンドをRailsで開発する場合はフロントエンドもRailsに沿って開発を行います。

最近自分がメイン開発者(というかほぼ一人?)として新Webサービス開発プロジェクトが始まり、バックエンドのフレームワークはRailsを使うことにしたのですが、様々な検討の結果フロントエンドはRailsのエコシステムではなく、nodeのエコシステムを使うことを選択しました。

振り返ったときにこの選択が正解だったのかどうかを確認するためにも、ここでなぜこの選択をおこなったのかをまとめておきたいと思います。

依存性の管理にnpmを使いたい

フロントエンド開発を生産的に行うに、当然様々なライブラリを扱います。

そのライブラリを管理するのに一番ベタな方法はライブラリのソースをダウンロードしてライブラリ用ディレクトリに設置することです。

そこから少し進化したのが、Bowerというパッケージ管理ツールのbower.jsonにアプリが依存しているライブラリを明記してインストールするようになりました。

ただ最近ではnodeが提供している標準のパッケージ管理システム npmを、そのままフロントエンドJavaScriptの依存性管理にも使えるようにするbrowserifyというツールも使用されるようになっています。このbrowserifyが優れもので、サーバサイドのnodeでライブラリを使用するときに行うrequire('module名')をフロントエンドJavaScriptの世界でも使えるようにしてくれます。

var react = require('react')

あくまで私の観測範囲ですが、フロントエンドに関する記事やライブラリのREADMEなどを見ているとフロントエンドJavaScriptの世界での依存管理でもnpmを使うことが前提となっていく感じがしていて、それが出来ないがために何かを行うときに無駄にハマってしまう予感がしています。

他チーム、他プロジェクトへノウハウの共有がしやすい

フロントエンド開発は高度化、複雑化しており、上記にあげた依存性の管理の他にもSassやAltJSのコンパイルや圧縮、結合、ライブラリの選定や設計など様々な問題を解決しなければなりません。これらをRailsエコシステムにのった方法で解決しても、その知識は他のフレームワークを利用したプロジェクトやチームと共有できません。

うちの会社で行われる開発でRailsを選択するのは私がメンバーに入るときぐらいで、他の場合はCakePHPやほとんどバックエンドが必要ないWebサイトの制作が大多数を占めています。

自分が学んだ知識を他のチームとお互いに共有したり、また他のチームの開発に入った時に自分がスムーズにヘルプできるようにし、会社全体でのフロントエンド開発の生産性を高めるためにもフロントエンド開発ではnodeのエコシステムに乗るべきだと判断しました。

おわりに

今回のプロジェクトではサービスの企画立案から、開発に関わる技術選択、実際の開発まですべてに関わることができるのですが、あらためて「どの技術を選択するか」を考えることの難しさと面白さを感じました。

良い技術選択を行えば、開発者のモチベーションアップや生産性アップにもつながれば、その逆に陥ることもあります。

今回意識したのは「１年後の当たり前になっているか」ということで、1年後はいま以上にフロントエンド開発のnode前提は加速すると予測し、この選択を行いました。

この選択によって、このブログにフロントエンド界隈のポストが増えてくると思います^^*

2015-03-26

chefに疲れたあなたにはItamaeがおすすめ！

chef使うのめんどくさくないですか？

私はいままでサーバーの設定を自動化するためのツールにchefを使っていました。最初chefを使い始めた時は、いままで手作業でやっていたことがコード化・自動化できるので「お、便利ー！chef最高！」という感じだったのですが、だんだん使っていくうちにchefが高機能が故に自分の用途としては使うのが辛くなってきました。

そもそも自分はchef soloしか使わない

chef は基本的にはchef-server - chef-client という構成で、設定を自動で行いたいサーバーに対してchef-clientをインストールします。そして対象のサーバーの設定をコード化したrecipeを保持するchef-serverとchef-clientが通信して対象サーバーにrecipeを適応します。

このchef-serverを立てずにchef-clientだけでサーバーの設定を自動化するchef-soloという機能があり、それは自分の手元のマシンからSSH経由でchef-clientにrecipeを送信・適応させるのですが自分の場合はそもそもこれしか使っていません。

管理しているサーバーが何十台もあって常に稼働している場合はchef-serverがあって自動でrecipeを適応させる機能も価値があるかもしれないですが、自分の場合は管理対象のサーバーがそもそも多くないからです。

覚えることが多過ぎる

一つのサーバーの設定を管理するchefのレポジトリを作るためにchefだけでなくなく、コミュニティが作ったrecipeの依存管理をするBerkshelf、chef-soloを使うためのコマンドラインツールknife-soloなど、なんだかんだで必要なツールを覚えるために結構な学習コストがかかります。

最近はchef-soloではなく、chef-zeroだと言い出している

自分はそもそもchef-soloしか使っていないのに、そのchef-soloが終わりchef-zeroを使って欲しいそうです。

詳しい内容は以下のブログを参照してください。

From Solo to Zero: Migrating to Chef Client Local Mode | Chef Blog

いまからまた新しいchef-zeroとかのプラクティスを学ぶのが辛いです。。。

もっとシンプルなツールが欲しい！

chefは大規模にサーバーを管理している人にとっては学習コストに見合うメリットがあるツールなはずだけど、自分にとってオーバースペック過ぎました。もっと単純に、ホストマシンでコマンド実行したら対象サーバーにrecipeを適応するだけの、シンプルなツールが欲しいと思って調査し始めました。

Itamaeはシンプルで使いやすい！

ItamaeはchefのようなDSLで、よりシンプルな機能だけを実装したツールです。

たとえば、以下のようにhttpdをインストールするrecipeを作成します。

package 'httpd' do
  action :install
end

このrecipeを対象サーバーに適応するには以下のコマンドを実行します。

$ itamae ssh -h 192.168.10.10 -p 22 -u user -i /path/to/private_key recipe.rb

オプションが多いですが、やっていることは明白で-h で対象サーバーのホストを指定し、-pでポートを指定、-uで接続ユーザーを指定、-i で秘密鍵を指定、最後に適応させるrecipeファイルを指定します。

chefのようにnodeによって値を変えたい場合は、以下のように-jオプションで利用するjsonファイルを指定すればいいだけです。

$ itamae ssh -j node.json -h 192.168.10.10 -p 22 -u user -i /path/to/private_key recipe.rb

ちゃんと知りたい場合はGithub レポジトリのwikiを見れば、推奨されるベストプラクティスから使い方までちゃんと記載されていますし、量も少ないのですぐに使えるレベルまで学習できます。

自分のようなchefに疲れた人にとって、itamaeはchefで学んだ知識もある程度活かせ、かつ簡単に使えるベストなツールです！

さらに嬉しいのはchefは対象サーバーにruby + chefをインストールしないといけないですが、itamaeはその必要もないのです。

もし他にもchefに疲れた人がいらっしゃれば、ぜひitamaeをオススメします。