2013/07/15

「Booom」というjQueryプラグインを使って集中線を画像に追加してみました。

集中線を画像に追加できる「Booom」というjQueryプラグインがあります。画像を用意するだけで、簡単に「漫画カメラ」で撮影したような集中線を書き込むことが出来ます。

集中線を追加するjQueryプラグイン「Booom」がバージョンアップ
http://stackstock.net/archives/2252/


いくつかの写真に集中線を入れてみました。

「Booom」を使って集中線を画像に追加
http://www.vivo-win.com/booom/

集中線の中心をパラメータで指定できるようなので、画像の真ん中を外れた位置に集中したいものがあっても、使えるようです。 

2013/07/08

rootsでのherokuへのdeployが上手く動作しません。

「rootsは、jade、stylus、coffeescriptをデフォルトのスタックとして構成されています。」の続きです。

rootsでは、herokuへのdeployがコマンドひとつで出来ます。herokuのアカウントを作成して、herokuへログイン出来ることを確認してから、deployしてみたのですが、エラーが出て上手く行きません。


Heroku | Cloud Application Platform
https://www.heroku.com/‎

herokuにログイン出来ることを確認
$ heroku login
Enter your Heroku credentials.
Email: ariki1068@gmail.com 
Password (typing will be hidden): 
Authentication successful. 
rootsのコマンド deployでherokuへアップ出来るはずなのですが、出来ません。
$ roots deploy

/usr/local/lib/node_modules/roots/lib/commands/deploy.js:27
  if (opts.length > 0) { name = opts[0] }
      ^
ReferenceError: opts is not defined
    at Object._deploy (/usr/local/lib/node_modules/roots/lib/commands/deploy.js:27:7)
    at /usr/local/lib/node_modules/roots/bin/roots:24:57
    at module.exports (/usr/local/lib/node_modules/roots/lib/config_parser.js:115:3)
    at Object. (/usr/local/lib/node_modules/roots/bin/roots:24:5)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)
    at startup (node.js:119:16)
    at node.js:901:3
エラーの出ている箇所を直せば良いことなのか、そもそも上手くインストールが出来ていないのか、不具合の原因特定が出来ません。何を見れば良いのでしょうか?

2013/07/07

rootsは、jade、stylus、coffeescriptをデフォルトのスタックとして構成されています。

「サイト構築のための枠組みを用意してくれる「roots」を試してみました。」 の続きです。

rootsは、jade、stylus、coffeescriptをデフォルトのスタックとして構成されています。

jadeは、htmlのテンプレートエンジン
stylusは、cssのテンプレートエンジン
coffeescriptは、JavaScriptのコードを生成するためのコンパクトなスクリプト言語

jade
http://jade-lang.com/

stylus
http://learnboost.github.io/stylus/

coffeescript
http://coffeescript.org/

どれにも共通しているのは、少ないタイプ数で実現したい内容を表現できること。そのソースをコンパイルすることで、html、css、JavaScriptを生成します。

どれも、タグの記載の冗長な部分を不要としていたり、変数が利用できたりと、プログラミングをする際に便利な機能が用意されています。

rootsでは、jade、stylus、coffeescriptの各ソースを修正して、保存すると、自動的にコンパイルされてブラウザに表示されている画面に反映されます。

テンプレート言語を使用して、ウェブサイトを作成する際の、ソースを変更保存して、コンパイル、ブラウザをリロードして確認という作業が一瞬で出来ます。

実際のソースで確認してみます。

example > views > index.jade
の最後に、下記の2行を追加します。
p hello world
.box
example > assets > css > master.styl にboxクラスの指定を追加します。
.box
  size: 30px
  border: 1px solid 
上記のファイルを保存すると、自動でコンパイルされます。index.jadeはindex.htmlに、master.stylはmaster.cssにコンパイルされ、ブラウザには、その結果が自動でリロードされます。



2013/07/03

サイト構築のための枠組みを用意してくれる「roots」を試してみました。

rootsというツールがあります。

サイトでは、次のように紹介されています。「roots is a toolbox for building simple, beautiful, and efficient products for the web.」シンプルで、美しく、効率的なサイト構築のためのツールボックス(フレームワーク、サイトジェネレータ)といったところでしょうか。


roots | where it all begins
http://roots.cx/

まず、Mac OS X 10.7.5 にインストールしてみます。

node.jsが入っていなかったので、http://nodejs.org/download/ より
node-v0.10.12.pkg をダウンロードしてインストール。

node.jsのインストール完了後のメッセージ
Node was installed at
   /usr/local/bin/node

npm was installed at
   /usr/local/bin/npm

Make sure that /usr/local/bin is in your $PATH.
rootsをインストールします。
$ sudo npm install roots -g 
roots用のディレクトリを作成して、サンプルサイトを作成します。作成したexampleディレクトリに入って、roots watchを叩くと、サーバが起動して、該当ページがブラウザで表示されます。
$ mkdir roots_cx
$ cd roots_cx/
$ roots new example

new project created at /example

$ cd example/
$ ls
app.coffee assets  readme.md views

$ roots watch
compiling... done!
server started on port 1111

次に CentOS にインストールしてみます。

インストールコマンドを叩いても、インストールが出来ませんでした。
$ sudo npm install roots -g
npm http GET https://registry.npmjs.org/roots
npm http 200 https://registry.npmjs.org/roots

npm ERR! Error: No compatible version found: roots
npm ERR! No valid targets found.
npm ERR! Perhaps not compatible with your version of node?
npm ERR!     at installTargetsError (/usr/local/lib/node_modules/npm/lib/cache.js:488:10)
npm ERR!     at next_ (/usr/local/lib/node_modules/npm/lib/cache.js:438:17)
npm ERR!     at next (/usr/local/lib/node_modules/npm/lib/cache.js:415:44)
npm ERR!     at /usr/local/lib/node_modules/npm/lib/cache.js:408:5
npm ERR!     at saved (/usr/local/lib/node_modules/npm/lib/utils/npm-registry-client/get.js:147:7)
npm ERR!     at Object.oncomplete (/usr/local/lib/node_modules/npm/node_modules/graceful-fs/graceful-fs.js:231:7)
npm ERR! You may report this log at:
npm ERR!     
npm ERR! or email it to:
npm ERR!     
npm ERR! 
npm ERR! System Linux 2.6.32-71.el6.i686
npm ERR! command "node" "/usr/local/bin/npm" "install" "roots" "-g"
npm ERR! cwd /home/ariki
npm ERR! node -v v0.6.10
npm ERR! npm -v 1.1.0-3
npm ERR! message No compatible version found: roots
npm ERR! message No valid targets found.
npm ERR! message Perhaps not compatible with your version of node?
npm ERR! 
npm ERR! Additional logging details can be found in:
npm ERR!     /home/ariki/npm-debug.log
npm not ok
node.jsのバージョンが古いのが問題のようです。node.jsの最新版を入れます。元々、ソースから入れていたので、ソースで入れます。
$ wget http://nodejs.org/dist/v0.10.12/node-v0.10.12.tar.gz
$ tar vxzf node-v0.10.12.tar.gz
$ cd node-v0.10.12
$ ./configure
$ make
$ sudo make install

$ node -v
v0.10.12
再度インストールコマンドを叩くと、今度はインストール出来ました。Macの時と同様にroots用のディレクトリを作成して、サンプルサイトを作成します。
$ mkdir roots_cx
$ cd roots_cx/
$ roots new example

new project created at /example

You should install git ASAP.
Check out http://git-scm.com/ for a quick and easy download

$ cd example/
$ roots watch
compiling... done!
server started on port 1111
同様に、ページが表示されました。

サイトを構築する際の決まりきった作業を効率化できるツールが沢山あるようです。しばらく調べてみたいと思います。

次のrootsに関する記事「rootsは、jade、stylus、coffeescriptをデフォルトのスタックとして構成されています。」 に続きます。

人気の投稿 (過去 30 日間)