カテゴリー別アーカイブ: html

マークアッパー的 Jade 入門 21 の手引き

Jade Logo

Jade は, JavaScript 製のテンプレートエンジンで HTML を効率的に生成するための記法です。Haml の影響を受けています。関係としては, Haml > Jade > Slim といったように影響を受けているため, それぞれ似通った機能を持っています。

Haml と Slim の同様の記事があるのでどうせなら Jade もあれば比較できるのかな? ということで書いてみます。

Jade は実務で使用したことがないので誤りがある可能性があります。一通りドキュメントは確認していますが誤りがあればご指摘いただけるとありがたい。

※ ターミナルでコマンド実行を記述する場合$ command のように頭に $ をつけて記述しています。

目次

続きを読む

マークアッパー的 Slim 入門21の手引き

slim-kanban

元ネタ: マークアッパー的 Haml入門21の手引き

Slim は Ruby 製のテンプレートエンジンで HTML を効率的に生成するための記法です。JadeHaml の影響を受けています。

元ネタのブログ記事が良さげな感じだったので Slim 版を試しに書いてみることにしました。Haml にあって Slim に無い機能もありますが, そのまま当て込んで書いています。いわゆるSlimの入門記事です。Slimの書き方〜といった記事もあまりないのでご参考までに。

※ ターミナルでコマンド実行を記述する場合 $ command のように頭に $ をつけて記述しています。

目次

続きを読む

速習テンプレートSlim(HTML作成編)

テンプレートエンジンSlimを使ってスマートにHTMLを作成する

昨日うちの事務所で開催したagatsuma.survive#02の中でSlimの説明が思ったよりも好評だったので改めてまとめてみます。

このエントリでは Slimを使ってHTMLを作成する ことだけを目的としているため、動的にSlimでゴニョゴニョするような話は出て来ません。HTMLの代替にSlimを使う、といった主旨の内容です。プログラムの話も出て来ませんが、残念ながらコマンドラインを少し使います。

Slim とは?

  • 拡張子は .slim
  • view の構文を本質的な部品まで減らすことを目指したテンプレート言語
  • Ruby製のテンプレートエンジン
  • 高速, 軽量
  • インデント重要

用途

  • Railsプロジェクトのテンプレート
  • Sinatra(Padorino)のテンプレート
  • HTMLの代替(個人的には)

SlimでHTMLを作成するメリット

  • タイプ数が減る
  • HTML に比べ見通しが良い
  • 実はそんなに難しくない

続きを読む

Gunma.web#12に参加しました

12回目を迎えた群馬で開催されるそっち系の人向け勉強会Gunma.web#12に参加しました。個別の発表については_shimizuさんのブログ記事 Gunmaweb #12に参加してきました。 | GUNMA GIS GEEK に詳しいです。

今回の発表

群馬に戻ってきてからの発表内容はアップロードが憚られるものが多かったので、久しぶりの資料公開になります。昨年の11月から取り組んでいる静的サイトの作り方のお話をさせていただきました。

昨年の春くらいからJIS X 8341-3 およびみんなの公共サイト運用モデルの調査、実装検討からもう1歩進んで、より確実により早くより簡単にHTMLを生成する方法を探して、こんな環境に辿り着きました。群馬に戻ってきてからのHTMLまわりの検討については、この辺りで一旦お休みの予定です。

反省点

この発表については、中身がテンプレートエンジンSlimの話と静的サイト生成ツールmiddlemanの話の2つをくっつけたものになります。5分の発表であればどちらかに絞って話すべきだったと感じました。内容が多い上に浅かった感じで。まだまだ精進したいですね。

その他

Middlemanはコマンドラインからコマンドを叩かないと使えないツールです。だがしかし!今日中の人が「ターゲットはコマンドライン使わない人たちだから、Macのアプリじきに出すよ」と書いていたのでこうご期待です。(日本語化しといてよかった

RubyのテンプレートエンジンSlimのREADMEを日本語化

HTMLとCSSを捨てたい2013

今年の抱負の1つにHTMLとCSSを捨てるを掲げたい、そんな毎日ですこんにちわ。

さて、昨年10月末時点で静的サイトを作るに辺りMiddlemanを使う方向でアレコレやっていたんですが、やはり自分1人だけできてもいろいろ不都合があります。

(自分だけできても仕事量減らないじゃん、どうせなら一緒に仕事する人にも使って欲しいじゃん)

「英語苦手なんですよね」と言われるのを見越して

そこで、特にテンプレートに採用したいSlimのREADMEを日本語化しました。いつものことですが、日本語じゃないからできない!と言われるのがナンダカナーナンダカナーと思っているので、どうだ日本語だぞお願いします!

slim/README_ja.md at README_ja · yterajima/slim · GitHub

元のREADMEの中で何だか見慣れないイディオムやら何やらが登場して結構手こずりました。現状でこの辺りが限界なのでpushしました。何かあればお知らせいただけると幸いです(Issueで

Sassについては昨日今日辺りから en-ja OSS の皆さんが日本語化されるようなのでとても助かります。

時間作ってデザイナさん向けのチュートリアルを作ってドキュメント化しておこうかな…(agatsuma.survive用)