タグ

templateengineとwebに関するcu39のブックマーク (8)

  • SlimかHamlか、Rails Rumbleで使われたGem

    Slim Railsのテンプレートでは、ERBにするかHamlにするかという選択になるのが一般的ですが、比較的新しいSlimという、Hamlに似た優れたテンプレートがあります。 まだまだ十分に知られていないようなので、もっと普及させるべく、紹介したいと思います。 まずは見てみましょう。Slimはこんな感じ。 http://slim-lang.com/ Hamlはこんな感じになります。 http://haml.ursm.jp/ 一見してわかるように、SlimはHamlによく似た、インデントによってHTML構造を表すテンプレート言語です。 一番の違いはタグに%(パーセント)がつかないこと。 行の先頭はタグの扱われるため、%をつける必要がありません。 その代わり、先頭にテキストを書く場合は |(パイプ)が必要です。 細かい文法の違いがあり、後発であることからSlimのほうが少し洗練されているよう

  • 昨今の自分用Webアプリケーションひな形 - naoyaのはてなダイアリー

    ちょっと jQuery と簡単なサーバサイドの処理を組み合わせた処理を試しに書いてみよう・・・なんて時に、いちいち jQuery を取ってきて HTML を書いて script タグを書いてロードして sinatra 立ち上げて云々・・・というのが毎度面倒なので、ひな形になるアプリケーションを作った。 https://github.com/naoya/boilerplate ひとまず sinatra でサーバーサイドを書き、HTML は slim で、CSS は sass 。JavaScript は CoffeeScriptで書くにあたって jQuery、underscore、Backbone をロードしてある、というような構成にしてあります。 まあ、この類のことは人それぞれ自分なりにカスタマイズしてやっていると思いますが、どういうコンポーネントで構成しているかを、備忘録も兼ねてちょっと紹

    昨今の自分用Webアプリケーションひな形 - naoyaのはてなダイアリー
  • CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞

    CSSを拡張するためのメタ言語として、代表的なものに「SCSS(Sass)」と「LESS」があります。今回、導入を検討するにあたり、両者を比較しました。 結果的には、「SCSS(Sass)」を導入することにしましたが、特に「SCSS(Sass)」を選択する決め手となった点に重点を置きつつ、両者の違いをまとめまてみました。 はじめに Webサイト、Webアプリケーションが大規模になるにつれて、CSSの設計・管理にもリソースを割かれるようになります。CSSのモジュール化、コンポーネント化による再利用性を考えたとき、現状のCSSを取り巻く状況は十分とは言えません。 一つの選択肢としてあがるのが「Blueprint」や「960 Glid System」等のCSSフレームワークの利用ですが、その再利用性と構造・表現の分離度はトレードオフです。 そこで、CSSの利点を活かしつつ、再利用性を高めるために

  • Sass、そしてSassy CSS (SCSS)

    CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass (主にSCSS)の良さを解説する。 CSSフレームワーク Sass Sassy CSS aka SCSS SCSSCSSフレームワーク 2カラムレイアウトの作成 clearfixやReset CSSの組み込み カラム幅の変更 カラムの入れ替え SCSSで完結することの意義 まとめ 最後に CSSフレームワーク 960.gsやBlueprint、BlueTripなどCSSフレームワークと呼ばれるものは色々ある。フレームワークと名乗るだけのことはあって、それらの生産性はとても高い。テンプレートで適切にクラス名やIDを埋め込むだけなので、複雑怪奇なCSSコーディングを意識することなく誰でも簡潔にきれいなカラム・レイアウトを作成できる。 HTML 4

  • Sass to CSS

    // Variable Definitions $page-width: 800px; $sidebar-width: 200px; $primary-color: #eeeeee; // Global Attributes body { font: { family: sans-serif; size: 30em; weight: bold; }; } // Scoped Styles #contents { width: $page-width; #sidebar { float: right; width: $sidebar-width; } #main { width: $page-width - $sidebar-width; background: $primary-color; h2 { color: blue; } } } #footer { height: 200px;

  • Smartyの利用 | PHP Labo

    Smartyとは Smartyは、PHP用のテンプレートエンジンです。これを利用すると、ロジックとデザインを分離して管理することができます。 一つのPHPファイルにロジックとデザインの両方を書いて作成することも可能ですが、分離することでプログラムの見通しが良くなります。また、プログラマーとデザイナーの分業など、複数の人が制作に関わる場合、特に威力を発揮します。 Smartyの利用方法 Smartyを利用するには、公式サイトからダウンロードしたファイルを、PHPから読み込める場所に設置します。その後、PHPプログラムから require_once 'libs/Smarty.class.php'; のように Smarty.class.php を読み込めばOKです。(Smarty.class.php がSmartyの体です。) 公式サイト Smartyの詳細な解説は、以下の公式ページに記載され

    cu39
    cu39 2011/01/05
    簡要な概説。
  • Smarty - PHPで利用するテンプレートエンジン

    SmartyはPHPで利用できるテンプレートエンジンです。Smartyを使うことで画面デザインとプログラム部分を分けて開発することが容易となります。ここではSmartyのインストールと実際の利用方法について確認していきます。 ダウンロード インストール php.iniへの設定追加

  • PHP とテンプレートエンジン (Smarty/patTemplate)

    PHPでは、HTMLページ内に<?php ?>タグで括る事によって、 HTML(デザイン部分)とプログラム(ロジック部分)を同一ページに記述できます。しかし、同じファイル内にデザイン部分とロジック部分を記述するとメンテナンスが非常に困難となります。Java でも JSP で同じような問題が発生し、JSP 2.0 でカスタムタグの導入により ロジック部を分離することができ、Struts というフレームワークまで生まれました。 PHP では、Template Engine という技術によってデザイン部分とロジック部分を分離させメンテナンスを向上させることができるようになりました。このことで、デザイナーとプログラマーが同時に作業を行えるようにもなりました。この Template Engine は、それほど作るのに難しくはありません。しかし、自分で創って自分でメンテナンスしていくのは大変というので

  • 1