MeteorでSemantic UI始めました

メジャーなフレームワークっぽいけど、がっつりフロントエンドな人間ではないので、bizreachさんの勉強会に参加して初めてその存在を知りました。

d-cube.connpass.com

「Semantic UI」 f:id:mktktmr:20160123042357p:plain f:id:mktktmr:20160123042415p:plain

なにこれ超カッコいい（小並感）

さっそく触ってみることにするが、せっかくなんで先日勉強したMeteor上で使ってみる。

mktktmr.hatenablog.jp

まずはMereorプロジェクトの作成

$ meteor create sample-semantic-ui
Created a new Meteor app in 'sample-semantic-ui'.

To run your new app:                          
  cd sample-semantic-ui                       
  meteor                                      
                                              
If you are new to Meteor, try some of the learning resources here:
  https://www.meteor.com/learn

$ cd sample-semantic-ui

Semantic謹製Meteorパッケージがあるので、インストールする

The trusted source for JavaScript packages, Meteor resources and tools | Atmosphere

semantic:uiの他にも、LESSコンパイル時にベンダープレフィックスを追加してくれるless-autoprefixerとjqueryもインストールしておく

パッケージのインストール

$ meteor add semantic:ui flemay:less-autoprefixer jquery
jquery without a version constraint has already been added.
                                              
Changes to your project's package version selections:
                                              
flemay:less-autoprefixer  added, version 1.2.0
semantic:ui               added, version 2.1.7
semantic:ui-data          added, version 2.1.7

                                              
semantic:ui: Official Semantic UI Integration for Meteor
flemay:less-autoprefixer: The dynamic stylesheet language + Autoprefixer
$ cd sample-semantic-ui

「custom.semantic.json」の作成

client/lib/semantic-ui/custom.semantic.jsonが推奨構成らしいので、その通り作成する

$ mkdir -p client/lib/semantic-ui/
$ touch client/lib/semantic-ui/custom.semantic.json #※！空ファイルで

ディレクトリ/ファイル群の生成

「custom.semantic.json」を作った上でMeteorを起動すると。。。

$ meteor
[[[[[ ~/Documents/src/JavaScript/Meteor/sample-semantic-ui ]]]]]

=> Started proxy.                             
=> Started MongoDB.                           
=> Started your app.                          

=> App running at: http://localhost:3000/
=> Client modified -- refreshing

「custom.semantic.json」と同じ階層に以下のようなファイルやディレクトリが生成される

$ ls -la
total 40
drwxr-xr-x  10 makoto  staff   340  1 23 04:11 .
drwxr-xr-x   3 makoto  staff   102  1 23 04:02 ..
-rw-r--r--   1 makoto  staff  1518  1 23 04:11 .custom.semantic.json
-rw-r--r--   1 makoto  staff  1518  1 23 04:08 custom.semantic.json
drwxr-xr-x   8 makoto  staff   272  1 23 04:11 definitions
-rw-r--r--   1 makoto  staff  4052  1 23 04:11 semantic.less
drwxr-xr-x   7 makoto  staff   238  1 23 04:11 site
-rw-r--r--   1 makoto  staff  2561  1 23 04:11 theme.config.import.less
-rw-r--r--   1 makoto  staff  1654  1 23 04:11 theme.import.less
drwxr-xr-x   3 makoto  staff   102  1 23 04:11 themes

また、「custom.semantic.json」自身も更新されている

{ 
  "definitions": { 
    "accordion": true, 
    "ad": true,
    "api": true,
〜〜〜　中略　〜〜〜
    "table": true, 
    "transition": true, 
    "visibility": true, 
    "visit": true 
}, 
  "themes": { 
    "amazon": false, 
    "basic": false, 
    "bookish": false, 
〜〜〜　中略　〜〜〜
    "rtl": false, 
    "striped": false, 
    "timeline": false, 
    "twitter": false 
  } 
}

ここまでで、SemanticUIのインストールは完了。

試しにHTMLにSemanticのスタイルを当ててみる

/sample-semantic-ui.html

<head>
<!-- 中略 -->
<template name="hello">
  <button class="ui primary button">Click Me</button> <!-- buttonタグにクラス追加 -->
  <p>You've pressed the button {{counter}} times.</p>
</template>