ざくにく定食: 12月 2010

2010年12月29日水曜日

HTML5とjQuery基本

毎回忘れてググってるので俺用まとめ。

以下の記事とか参考に。

HTML4から変化したHTML5のマークアップここが違う！サンプルで見るHTML5（2）
http://codezine.jp/article/detail/5600

40分で覚える！jQuery速習講座
http://ascii.jp/elem/000/000/498/498710/

HTML5のマークアップは以下のように。

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>タイトル</title>
	<style>/* CSS */</style>
	<script>/* JavaScriptコード */</script>
	</head>
	<body>

	</body>
	</html>

view raw HTML5.html hosted with ❤ by GitHub

jQueryを使おうと思った場合はこう。

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>タイトル</title>
	<script src="jquery-1.4.4.js"></script>
	<p id="first">変更前</p>
	<script>
	$(function(){
	$("p#first").html("<strong>変更後</strong>");
	});
	</script>
	</head>
	<body>

	</body>
	</html>

view raw jQuery.html hosted with ❤ by GitHub

jquery-1.4.4.js の部分を http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js に変えるとjQueryをダウンロードしたりしなくても使える。

2010年12月21日火曜日

書こうと思ったら以下の記事が最高にまとまってたので書くことなかった。

TeXShop - Mac OS X 10.6 Snow Leopard に TeX/LaTeX を導入
http://idita.blog11.fc2.com/blog-entry-185.html

僕は以前にもなんか色々やったりMacPortsでpTeX入れたりとか寄り道していたけど、たぶんこれ(↑)をやるだけでちゃんと動く。というかそれ以外しなくていい。

テスト用のHello Worldだけ書いておくと

	\documentclass[12pt]{jarticle}
	\begin{document}

	\title{タイトル}
	\author{テスト}
	\date{\today}
	\maketitle

	\LaTeX
	とか使いたくないです。

	\end{document}

view raw hello.tex hosted with ❤ by GitHub

をTeXShopに書いて「タイプセット」をクリックして、しばらくしてPDFが生成されればちゃんとできてます。

できなかったらドンマイなので頑張ってください。

2010年12月4日土曜日

SinatraでSlimを使う

前々回、前回ときて、今度はSlimをSinatraで使う。

まずインストール

gem install slim

SinatraにSlimが搭載されるのは次のリリースかららしいので、以下が必要。

require 'slim'

module Sinatra
  module Templates
   def slim(template, options={}, locals={})
   render :slim, template, options, locals
   end
  end
end

で、中身。

helloslim.rb

	# -- coding: utf-8 --

	require 'rubygems'
	require 'sinatra'
	require 'haml'
	require 'slim'

	module Sinatra
	module Templates
	def slim(template, options={}, locals={})
	render :slim, template, options, locals
	end
	end
	end

	helpers do
	include Rack::Utils; alias_method :h, :escape_html
	end

	get '/' do
	slim :index
	end

	post '/hello' do
	slim :hello
	end

view raw helloslim.rb hosted with ❤ by GitHub

views/layout.slim

	html
	body
	h1 Hello World
	== yield

view raw layout.slim hosted with ❤ by GitHub

views/index.slim

	p あなたの名前は？
	form action="/hello" method="POST"
	input type="text" name="name"
	input type="submit" value="送信"

view raw index.slim hosted with ❤ by GitHub

views/hello.slim

	p こんにちは、#{h params[:name]}さん！
	a href='/' 戻る

view raw hello.slim hosted with ❤ by GitHub

sassも使えるらしい。

SinatraでHamlを別ファイルに書く

前回書いたhello_haml.rbのビュー部分を別ファイルに書く。

本体となるhello.rbと、viewsフォルダに分ける。

viewsフォルダの中には
layout.haml
index.haml
hello.haml

それぞれ以下のように書いてやればいい。

hello.rb

	# -- coding: utf-8 --

	require 'rubygems'
	require 'sinatra'
	require 'haml'

	helpers do
	include Rack::Utils; alias_method :h, :escape_html
	end

	get '/' do
	haml :index
	end

	post '/hello' do
	haml :hello
	end

view raw hello.rb hosted with ❤ by GitHub

views/layout.haml

	%html
	%body
	%h1 Hello World
	= yield

view raw layout.haml hosted with ❤ by GitHub

views/index.haml

	%p あなたの名前は？
	%form{:action=>"/hello", :method=>"POST"}
	%input{:type=>"text", :name=>"name"}
	%input{:type=>"submit", :value=>"送信"}

view raw index.haml hosted with ❤ by GitHub

views/hello.haml

	%p== こんにちは、#{h params[:name]}さん！
	%a{:href=> "/"} 戻る

view raw hello.haml hosted with ❤ by GitHub

前回のhello_haml.rbを含む全体をまとめたものとをgithubに上げておいた。
https://github.com/zakuni/hellohaml

Sinatra,erbのHello WorldをHamlを使って書き直す

Slimというよさげなものが出てきて、是非とも流行ってほしいところですが、Sinatraに搭載されるのは次のリリースかららしいですし、僕はまずHamlをSinatraで使うのも覚束ないので、練習がてらに、

ここ↓に載ってるSinatraとerbを使ってのHello Worldのerb部分をHamlで書き直してみた。
http://gihyo.jp/dev/serial/01/ruby/0009?page=2

これが元のコード

	require 'rubygems'
	require 'sinatra'

	helpers do
	include Rack::Utils; alias_method :h, :escape_html
	end

	template :layout do
	"<html><body><h1>Hello World</h1><%= yield %></body></html>"
	end

	get '/' do
	erb %{
	<p>あなたの名前は？</p>
	<form action='/hello' method='POST'>
	<input type='text' name='name'>
	<input type='submit' value='送信'>
	</form>
	}
	end

	post '/hello' do
	erb %{
	<p>こんにちは，<%= h params[:name] %>さん！</p>
	<a href='/'>戻る</a>
	}
	end

view raw hello_erb.rb hosted with ❤ by GitHub

そしてこれがHamlを使って書き直したもの。

	# -- coding: utf-8 --
	require 'rubygems'
	require 'sinatra'
	require 'haml'

	helpers do
	include Rack::Utils; alias_method :h, :escape_html
	end

	template :layout do "
	%html
	%body
	%h1 Hello World
	=yield
	"
	end

	get '/' do
	haml '
	%p あなたの名前は？
	%form{:action=>"/hello", :method=>"POST"}
	%input{:type=>"text", :name=>"name"}
	%input{:type=>"submit", :value=>"送信"}
	'
	end

	post '/hello' do
	haml '
	%p== こんにちは、#{h params[:name]}さん！
	%a{:href=> "/"} 戻る
	'
	end

view raw hello_haml.rb hosted with ❤ by GitHub

「template :layout」には、htmlタグとかみたいな、各ページに共通する、まさにテンプレ部分を書くらしい。
ページによって無効にしたいときは、「haml :layout => false」してやればいいようだ。
ちなみに各タグに¥nとかの改行コードをつけてやれば、erbみたいに1行で書くこともできるけど、やってみたら気持ち悪い&見辛かった、のでこういう風にした。

インデントは全体的にちょっと気持ち悪いけど、Hamlはインデントに意味を持たせてるから下手にいじるとエラーが出ちゃう。
SinatraでHamlを使うときは、きちんと別ファイルを作ってやるとかしたほうがよさげなのかな。

追記:
別ファイルに作ってやった
http://zakuni.blogspot.com/2010/12/sinatrahaml.html

ページ