RapberryPi B+ セットアップメモ

  • 2014.12.01

先日秋葉原でIntel Edisonの他にRaspberryPi B+ も買ったのでbotサーバーでもつくろうと思っている。

とりあえずセットアップしたことをメモっていく。

環境

  • Raspberry Pi B+
  • Raspbian

初期設定

起動したらいきなり初期設定が立ち上がっている場合もある。

初期設定画面が出なかったらログインして初期設定を行う

user: pi
pass: raspberry

初期設定を行うには‘raspi-config'を実行する

% raspi-config

SSHの設定でつまずいた件

'raspi-config’ でSSHを設定する際に、'Initial ssh key generation still running. Please wait and try again.’ というエラーメッセージに遭遇。 下記の対応をすることで解決されるんだけど、非常にめんどくさすぎる。

% sudo rm /var/log/regen_ssh_keys.log
% sudo rm /etc/ssh/ssh_host*
% sudo ssh-keygen -A

不要なファイルを削除する

bot用途で使おうと思っているのでGUI系のソースとかは要らないので片っ端から削除していく。 削除したファイルは下記の通り。シェルスクリプトにして実行するとラクになる。

#!/bin/sh

sudo apt-get autoremove -y scratch
sudo apt-get autoremove -y midori
sudo apt-get autoremove -y omxplayer
sudo apt-get autoremove -y galculator
sudo apt-get autoremove -y xpdf
sudo apt-get autoremove -y dillo
sudo apt-get autoremove -y debian-reference-common
sudo apt-get autoremove -y netsurf-common
sudo apt-get autoremove -y netsurf-gtk
sudo apt-get autoremove -y x11-common
sudo apt-get autoremove -y python*
sudo apt-get autoremove -y lxde-icon-theme
sudo apt-get autoremove -y psmisc
sudo apt-get autoremove -y idle-python3.2
sudo apt-get autoremove -y python
sudo apt-get autoremove -y python3
sudo apt-get autoremove -y python2.7
sudo apt-get autoremove -y python2.7-minimal
sudo apt-get autoremove -y lxde-common
sudo apt-get autoremove -y lxdeterminal
sudo apt-get autoremove -y hicolor-icon-theme 
sudo apt-get autoremove -y xarchiver
sudo apt-get autoremove -y libpoppler19
sudo apt-get autoremove -y ed
sudo apt-get autoremove -y lxsession
sudo apt-get autoremove -y lxappearance
sudo apt-get autoremove -y lxpolkit
sudo apt-get autoremove -y lxrandr
sudo apt-get autoremove -y lxsession-edit
sudo apt-get autoremove -y lxshortcut
sudo apt-get autoremove -y lxtask
sudo apt-get autoremove -y lxterminal
sudo apt-get autoremove -y xauth
sudo apt-get autoremove -y samba-common
sudo apt-get autoremove -y fontconfig
sudo apt-get autoremove -y fontconfig-config
sudo apt-get autoremove -y fonts-freefont-ttf
sudo apt-get autoremove -y dbus-x11
sudo apt-get autoremove -y desktop-base
sudo apt-get autoremove -y desktop-file-utils
sudo apt-get autoremove -y libxmuu1
sudo apt-get autoremove -y
sudo apt-get -y clean

sudo rm -rf /home/pi/python_games
sudo rm -rf /home/pi/Desktop
sudo rm -rv /usr/share/wallpapers/
sudo rm -rf /usr/share/sounds/
sudo rm -rv /usr/share/icons/*
sudo rm -rv /opt/vc/src/*
sudo rm -rv /opt/*
sudo rm -rv /usr/share/icons/*
sudo rm -rv /usr/games/
sudo rm -rv /usr/share/squeak/
sudo rm -rv /usr/share/themes
sudo rm -rv /usr/share/kde4
sudo rm -rv /usr/share/images/*
sudo rm -rf /opt/vc/src/*
sudo rm -rf /usr/share/icons/*
sudo rm -rf /usr/share/squeak/
sudo rm -rf /usr/share/themes
sudo rm -rf /usr/share/kde4
sudo rm -rf /usr/share/images/*

パッケージを更新する

% sudo apt-get autoremove
% sudo apt-get update
% sudo apt-get dist-upgrade

必要に応じてパッケージをインストールする

vim

% sudo apt-get install vim

zsh

% sudo apt-get install zsh
% chsh -s `which zsh`

oh-my-zsh

% curl -L http://install.ohmyz.sh | sh

ruby with rbenv

rbenv

% git clone https://github.com/sstephenson/rbenv.git ~/.rbenv
% echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.zshrc
% echo 'eval "$(rbenv init -)"' >> ~/.zshrc
% source .zshrc

ruby-build

% git clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build

rubyはインストールするバージョンを確認してからインストールする

% rbenv install --list
% rbenv install 2.1.5
% rbenv global 2.1.5

Rubyのbuildは2時間半かかった…。

MacでGNU版のコマンドをhomebrewでインストールする

  • 2014.11.19

LinuxだとGNU系なので特に意識せず使えるっぽいのですが、MacはUnixなのでインストールする必要があります。

$ brew install coreutils

これで使えるようになります。

ただし、コマンドの前に g をつけなくてはいけないのでaliasとかで置き換えると良いかもしれません。

dateの場合はこんな風に使えます。

$ gdate -d '-1 days' +%Y/%m/%d

2014/11/18

g つけるのやっぱり不便だなー。

GitHub Pages Legacy IP Desprecation

  • 2014.11.16

このブログはmiddlemanを使ってGitHub Pagesで無料運用しているのですが、deployしてたら警告メールがGitHubから届くようになっていて、あまり中身を気にしないでいました。

で、久しぶりにdeployしたらGitHub Pagesに反映されなくなりこんなメールが届きました。

The page build failed with the following error:

The custom domain for your GitHub Pages site is pointed at an outdated IP address. You must take immediate corrective action to ensure that your site remains available after December 1st, 2014. Additional details can be found at https://github.com/blog/1917-github-pages-legacy-ip-deprecation. For more information, see https://help.github.com/articles/setting-up-a-custom-domain-with-github-pages.

If you have any questions please contact us at https://github.com/contact.

DNSで設定してるIPアドレスが古いから新しいのにしろということみたいです。

詳細はここをみてみると、

Don’t have the GitHub Pages Gem?

If you’re on a Mac or Linux machine, simply paste this command into a terminal window, replacing your-domain.com with, your site’s domain. dig your-domain.com | grep -E ’(207.97.227.245|204.232.175.78|199.27.73.133)’ || echo “OK”. If you see the word “OK”, you’re all set. On a Windows machine, you’ll want to run nslookup your-domain.com and ensure that the output does not include any of the deprecated IP addresses (207.97.227.XXX, 204.232.175.XX, or 199.27.73.XXX).

207.97.227.245|204.232.175.78|199.27.73.133

これらのIPアドレスは古いから書き換えろってことですね。で、どれに書き換えれば良いかというと、これまたここに書いてあります。リンクが多少わかりずらいです。

199.27.76.133

これに書き換えれば大丈夫です。ずっと放置してしまっている方は急いで書き換えましょう。

Intel Edison 秋葉原の秋月電子通商で衝動買いレビュー

  • 2014.11.16

土曜日にフラッと秋葉原にArduino買いに行ったらIntelのEdisonが売っていたので買ってしまったのでレビューしてみたいと思います。

Intel Edison Breakout Board Kit

とりあえず写真撮ったのではってくよー。

パッケージ

開封!

CPUみたい。CPUよりもちっちゃい。

with Breakout Board

Edison と Breakout Board を固定するためのネジも同梱されています。

めっちゃちいさい!

Breakout Board に挿してみた。

とりあえず触ってみる

EdisonのJ3ポートにマイクロUSBでmacに接続します。

Terminalを立ち上げてEdisonがmac側でシリアルポートとして認識するので下記コマンドを入力します。

% screen /dev/cu.usbserial-A903BTIZ 115200 -L

この状態では特に何も表示されません。J16ポートが電源なのでマイクロUSBケーブルを電源に繋ぎます。 macなどに繋いでUSBから電源供給しても良いですが不安定になるらしいので電源から直接供給が良いらしいです。

電源が入るとコンソールが走ってログイン画面がでてきます。

起動ログを見る

root/root でログインできます。

Linuxなので一般的なLinuxコマンドは使えるみたいです。viが使えたのが嬉しい!vimにしたい!

バージョンの確認をしてみる

root@edison:~# less /etc/version

edison-weekly_build_56_2014-08-20_15-54-05

shutdownしてみる

Linuxなのでshutdownももちろん可能です。shutdownコマンドでshutdownできます。

root@edison:~# shutdown -h now

shutdownコマンドを叩くとコンソールが走ってshutdownします。

shutdownログを見る

公式のGetting Startedを見てみる

https://communities.intel.com/community/makers/edison/getting-started

Intel Edison for Arduino を使った例で書かれています。LEDを光らせるのとWiFiのつなぎ方が載ってますね。

公式のSoftware   Documentationを見てみる

https://communities.intel.com/community/makers/edison/documentation

ドキュメント一式まとまっている。わからないことがあればここ見ればなんとかなりそうですね。

ファームウェアをアップデートする

J16ポートにマイクロUSBケーブルを挿してmacにつなぎます。 これでEdisonがストレージとして認識されます。

最新のファームウェアはここからダウンロードできます。 Edison - Software Downloads

ファームウェアの更新の仕方はここを参考にします。ちなみにmacです。 Flashing Edison (wired) - Mac

認識したEdisonのフォーマットがFAT16なのでFAT32にフォーマットします。 フォーマットが完了したらダウンロードしたデータを全部Edisonにいれます。

入れ終わったらJ3ポートにmacをつなぎ、J16ポートに電源をつなぎ直します。

Edisonが起動したらrootログインして、下記のコマンドをたたきます。

root@edison:~# reboot ota

これでファームウェアのアップデートがはじまります。

Poky (Yocto Project Reference Distro) 1.6 edison ttyMFD2

edison login:

こんな感じで終わるとアップデート完了です。

全部のログをみたい方はgistにはったのでみてください。

versionを確認してみます。

root@edison:~# less /etc/version

edison-rel1-maint-weekly_build_16_2014-10-14_14-56-19

これで無事アップデートが完了!

configure_edisonでWi-Fiを設定する

configure_edison コマンドで初期設定をします。

  • デバイス名
  • ログインパスワード設定
  • Wi-Fiの設定

これらの設定が順番に行われます。

root@edison:~# configure_edison --setup

デバイス名

Configure Edison: Device Name

Give this Edison a unique name.
This will be used for the access point SSID and mDNS address.
Make it at least five characters long (leave empty to skip):

ログインパスワード設定

Configure Edison: Device Password

Enter a new password (leave empty to abort)
This will be used to connect to the access point and login to the device.
Password:

Wi-Fi

First-time root password setup complete. Enabling SSH on WiFi interface.
Do you want to set up wifi? [Y or N]:

Configure Edison: WiFi Connection

Scanning: 1 seconds leftt

0 :     Rescan for networks
1 :     Manually input a hidden SSID
2 :     FON_FREE_INTERNET
3 :     ...

Enter 0 to rescan for networks.
Enter 1 to input a hidden network SSID.
Enter a number between 2 to 10 to choose one of the listed network SSIDs:

Wi-Fiが設定できればネット接続もできます!

すべての設定が完了するとブラウザから確認できます。

ユーザーをつくってSSH接続する

ここまでできたらSSH接続とかしたいですよね。追加してみましょう。

root@funny_edison:~# useradd funnythingz

パスワードも設定します。

root@funny_edison:~# passwd funnythingz
Changing password for funnythingz
Enter the new password (minimum of 5 characters)
Please use a combination of upper and lower case letters and numbers.
New password:
Re-enter new password:
passwd: password changed.

ユーザーを作成できたらSSH接続してみましょう。

$ ssh funnythingz@192.168.0.7
funnythingz@192.168.0.7's password:
-sh: mesg: not found
funny_edison:~$

ログインできました!

ネットに繋がっているか確認してみましょう。

funny_edison:~$ nslookup google.co.jp
Server:    192.168.0.1
Address 1: 192.168.0.1

Name:      google.co.jp
Address 1: 173.194.117.183 nrt04s10-in-f23.1e100.net
Address 2: 173.194.117.191 nrt04s10-in-f31.1e100.net
Address 3: 173.194.117.184 nrt04s10-in-f24.1e100.net
Address 4: 173.194.117.175 nrt04s10-in-f15.1e100.net
Address 5: 2404:6800:4004:807::100f nrt04s06-in-x0f.1e100.net

googleも参照できました!良い感じですね!

切手サイズのコンピュータでここまでできちゃうと夢ひろがりまくりんぐですね! また何かしたらレビューします。

Meteorで簡単なWebサービスつくってみた

  • 2014.09.01

Meteorで何かちょっとしたWebサービスをつくってみたいと去年から思ってたけど結局つくっておらず、いい加減何かつくりたいと思い、前々からスケジュール調整サービスつくりたいと思っていたのでようやくつくってみました。

http://boon.meteor.com/

Meteorとは?

Meteorについてはここらへんがくわしいです。

今回つかったMeteorパッケージ

僕はTypeScriptとSCSSが好きなのでMeteorでもがっつり使いたいと思いこんな感じのパッケージをいれました。

v0.9.0対応版です。

% meteor add iron:router
% meteor add fourseven:scss
% meteor add orefalo:typescript-compiler
% meteor add handlebars
% meteor add underscore
% meteor add mizzao:bootstrap-3

ちなみにMeteorパッケージはここで探せます。

atmospherejs.com

iron:router

Routerです。Meteorではデファクトスタンダードな存在。

fourseven:scss

SCSS派には必須です。*.scss使えるようになります。

orefalo:typescript-compiler

Meteorで*.tsが使えるようになります。ちょっとクセがあり、Template系の書き方がトリッキーになります。

ちなみにdefinitionsファイルを読み込まなくてはいけません。

% meteor add orefalo:typescript-libs

でインストールできます。更新頻度があまり高くないので個別に*.d.tsを持ってくるほうがいいかもしれません。

こんな感じに*.tsの中でdefinitionsファイルを読み込みます。TypeScriptユーザーにはお馴染みですね。

///<reference path="../definitions/lib.d.ts"/>
///<reference path="../definitions/meteor.d.ts"/>
///<reference path="../definitions/underscore.d.ts"/>
///<reference path="../definitions/jquery.d.ts"/>
///<reference path="../definitions/ironrouter.d.ts"/>
///<reference path="../definitions/bootstrap.datepicker.d.ts"/>
///<reference path="../definitions/bootstrap.d.ts"/>

///<reference path="../interface/collections.d.ts"/>

JS

Template.hoge.helpers({...});
Template.hoge.events({...});
Template.hoge.ahya = function() {return 'ahya'}

TS

Template['hoge'].helpers({...});
Template['hoge'].events({...});
Template['hoge']['ahya'] = function() {return 'ahya'}

となります。

Meteor.Collectionもinterfaceを書かなきゃいけないです。

JS

UsersCollection = new Meteor.Collection("users");

TS

interface IUsersCollection {
    _id?: string;
    name: string;
}

declare var UsersCollection: Meteor.Collection<IUsersCollection>;

UsersCollection = new Meteor.Collection("users");

こんな感じです。

handlebars

言わずとしれた有名なテンプレートエンジンです。Meteorのデフォルトは[Spacebars](http://docs.meteor.com/#livehtmltemplates)というhandlebarsにインスパイアされてつくられたものだそうです。僕は普通にhandlebars使いたいのでいれました。

underscore

こちらも超絶便利ですね!underscoreなしではいきていけません。

mizzao:bootstrap-3

デザインは全部bootstrap3に任せちゃいました。bootstrap便利です!

Meteorで開発してみて思ったこと

Meteorのいいところ

超簡単!初心者がフルスタックで何かWebアプリつくりたいっていうときにいいかもしれません。
HTML/CSS/JavaScript だけではじめられるのもいいところです。

最近やっとv0.9.0.1まであがってMeteoriteも統合されてパッケージ検索サイトのatmospherejs.comっていうのもできたし環境がそろってきた感があります。

Meteorの難しいと思われるところ

とは言えまだプレビュー版なのでアップデートが激しいです。日本人のコミュニティも少ないですし盛り上がってない感がつらいです。 なのでハマったら自分でひたすら追って調べるしかありません。特にMeteorパッケージあたりを追うのはけっこう大変かも。

(iron-routerとかMeteorがv0.9.0にメジャーアップデートする前にv0.9.0対応版出して動かなくなったりしましたしおすし。)

とりあえず簡単だから楽しい

とは言え簡単で楽しいので開発入門としてWebアプリとかWebサービスつくるには良いと思います。

今回つくったソースはこちら

github.com/funnythingz/meteor-boon

gomを使ってGoのパッケージをGemfileライクに管理して使う

  • 2014.08.09

Goを書く上でいろんなパッケージをインストールすることってあると思います。
で、go get hogehogeを毎回手動でインストールするのもツライですよね。僕はツライです。

便利なものありました。gomです。bundlerのGo版ってところです。
世の中には便利なものがたくさんあります。便利なものはどんどん使いましょう。

セットアップ

$GOPATHが設定されている前提ですすめていきます。

% go get github.com/mattn/gom

Gomfileをつくる

gomを使うにはgemと同様にGomfileをつくります。

% gom gen gomfile

すると ./Gomfile が生成されます。 中身は下記のように書いてみます。

gom 'github.com/go-martini/martini'
gom 'github.com/martini-contrib/render'

gom 'github.com/coopernurse/gorp'
group :test do
  gom 'github.com/mattn/go-sqlite3'
end

gom 'github.com/gorilla/websocket'

gomでインストール

Gomfileができたら早速インストールしてみましょう。

% gom install

すると _vendor というディレクトリができてパッケージがインストールされます。

groupごとのインストール

group管理もできます。例えばgroup :testの場合、

% gom -test install

でインストールされます。とても簡単です。

gomでインストールされたものを使う

gom コマンドを使うことで _vendor にインストールされたものを使えます。

% gom run main.go

Martiniの場合はginとか使ってWeb Serverを立ち上げてlive reloadできます。

ginの使い方は通常は

% gin

で使いますが、gomでインストールしたパッケージを使いたい場合は

% gom exec gin

で使うことができます。

gomでテストを走らせる

これも簡単です。

% gom test -v

でテストを走らせることができます。

gom便利!

といった感じで便利すぎるのでどんどん使っていきましょう!

GoのフレームワークのMartiniで簡単なDEMOをつくってみた

  • 2014.08.06

こんにちは!funnythingzです。夏です暑いです。

とある友人の紹介でGoが熱いという話を聞きましてそんなに興味なかったのですがGoをはじめてみました。

RevelってのとMartiniが良い感じらしいので両方試してようと思ったのですが、Martiniの方が推されていたのでMartiniを試してみることにしてみました。

MartiniはRubyのSinatraみたいな感じらしいですが、martini-contribrenderbindingといったcontribが公開されているのでこれらを必要に応じてインストールすることで便利になるようです。

とりあえずGoもWebFrameworkも初心者でよくわかりませんがシンプルなDEMOをつくってみます。

つくるもの

  • とりあえずルーティングさせたい。
  • テンプレートエンジンでレンダリングしたい。

材料

ディレクトリ構成

├── app.go   ... ルーティングの処理をします
├── index.go ... Indexをレンダリングします
├── about.go ... Aboutをレンダリングします
└── templates
    ├── about.tmpl  ... Aboutのテンプレートです
    ├── index.tmpl  ... Indexのテンプレートです
    └── layout.tmpl ... 全体レイアウトテンプレートです

セットアップ

go getコマンドでmartinimartini-contrib/renderをインストールします。

% go get github.com/go-martini/martini
% go get github.com/martini-contrib/render

ルーティング

Martiniの根幹でもあるルーティングの処理を書いています。

  • Get / … Index
  • Get /about … About
  • Get その他 … Indexにリダイレクト

こんな感じのルーティングにします。

app.go

package main

import(
    "github.com/go-martini/martini"
    "github.com/martini-contrib/render"
)

func main() {

    m := martini.Classic()

    m.Use(render.Renderer(render.Options{
        Directory: "templates",
        Layout: "layout",
        Extensions: []string{".tmpl"},
        Charset: "utf-8",
    }))

    m.NotFound(func (r render.Render){
        r.Redirect("/")
    })

    m.Get("/", IndexRender)
    m.Get("/about", AboutRender)

    m.Run()

}

テンプレートレイアウト

共通部分のテンプレートレイアウトを用意します。Twitter Bootstrap3を使います。 Bootstrap超便利!

{{yield}}にIndexとAboutテンプレートがレンダリングされたものが入ります。

templates/layout.tmpl

<!Doctype html><html lang="ja"><head><meta charset="utf-8">
<title>{{.Title}}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0, maximum-scale=10">
<link href="//bootswatch.com/readable/bootstrap.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//underscorejs.org/underscore.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>

  <nav class="navbar navbar-default" role="navigation">
    <div class="container">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">Martini Demo</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="/about">About me</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </div>
  </nav>

  {{yield}}

  <footer>
    <div class="container">
      <p class="text-center">&copy; hogeyan</p>
    </div>
  </footer>

</body></html>

Indexページのレンダリング処理

レンダリング処理を書きます。github.com/martini-contrib/renderを使います。

IndexViewModelというViewModelをつくってそれをIndexRenderに渡してレンダリングします。

index.go

package main

import(
    "github.com/martini-contrib/render"
)

type IndexViewModel struct {
    Title string
    Description string
}

func IndexRender(r render.Render) {

    viewModel := IndexViewModel{
        "Martini Demo",
        "Description",
    }

    r.HTML(200, "index", viewModel)
}

templates/index.tmpl

<div class="jumbotron">
  <div class="container">

    <h1>{{.Title}}</h1>
    <p class="lead">{{.Description}}</p>

  </div>
</div>

Aboutページのレンダリング処理

Indexページと同様に処理します。

about.go

package main

import(
    "github.com/martini-contrib/render"
)

type Profile struct {
    Name string
    Skill []string
}

type AboutViewModel struct {
    Title string
    Profile Profile
}

func AboutRender(r render.Render) {

    skill := []string{"TypeScript", "Sass/Compass", "Go"}

    profile := Profile{
        "hogeyan",
        skill,
    }

    viewModel := AboutViewModel{
        "About me",
        profile,
    }

    r.HTML(200, "about", viewModel)
}

templates/about.tmpl

<div class="container">

  <h1>{{.Title}}</h1>

  <dl>
    <dt>Name:</dt>
    <dd>{{.Profile.Name}}</dd>
  </dl>

  <dl>
    <dt>Skill:</dt>
    {{range .Profile.Skill}}
    <dd>{{.}}</dd>
    {{end}}
  </dl>

</div>

動かしてみる

codegangsta/gin

ginを使って起動させることで、毎回go run *.goってやる必要もなくなるのと自動更新してくれるのでめちゃくちゃ楽になります。早速使ってみましょう。

gin をインストールする。

% go get github.com/codegangsta/gin

つかってみる

ginコマンドを実行するだけです。簡単です!

% gin

GitHubにもソースを置いておきました。

github.com/funnythingz/martini-demo/tree/master/render

twitter bootstrap-sassをcompassで使うまでのお話

  • 2014.07.29

CSSの設計とかもうやりたくないって思うことってありますよね。すでに世の中にはtwiiter bootstrapやらYUI pureやら優秀なUI-Kitがたくさんあります。今さらオレオレ設計するなんて嫌になっちゃいます。僕はもうすでに嫌です。

そんな感じで案件にbootstrapを使ってみたいけど導入がよくわからんってことで導入までを書いてみます。

Gemfileをつくる

Sass/Compass/bootstrap はgemでインストールします。そのgemをまとめてインストールするためにGemfileをつくります。

エディタで./Gemfileを新規で開きます。

% vim Gemfile

中身はこんな感じです。

source 'https://rubygems.org'

gem 'sass'
gem 'compass'
gem 'bootstrap-sass'

bundlerセットアップ

Gemfileができたらbundle installコマンドでインストールします。このコマンドはgemをまとめてインストールしてくれます。 bundle installを使えるようにするためにbundlerをインストールしましょう。

% gem install bundler --no-rdoc --no-ri

bundle installgemをインストールする

bundlerがインストールされたらbundle installしてみましょう。

% bundle install

これでまとめてインストールされます。

Compassプロジェクトをbootstrapが使える状態で初期化する

Compassプロジェクトをbootstrapが使える状態で初期化してみましょう。

% compass create . -r bootstrap-sass --using bootstrap --css-dir css --images-dir imgs --javascripts-dir js

Compassプロジェクトが初期化されました。こんなディレクトリになってると思います。

Gemfile
Gemfile.lock
config.rb
css
js
sass

scssファイルをコンパイルしてみる

Compassコマンドでscssファイルをコンパイルしてみましょう。

% compass compile

コンパイルが通れば環境の完成です!

scssを編集してみる

あとはガシガシscssを書いてみましょう。追記だったりオーバーライドであればsass/styles.scssを編集すればおkです。

% vim sass/styles.scss

単純なbootstrapのカスタマイズであればsass/_bootstrap-variables.scssを編集しましょう。

% vim sass/_bootstrap-variables.scss

編集したあとはコンパイルしてみましょう。

% compass compile

コンパイルが通れば完成です!これでCompassでbootstrapが使えるようになりましたね!

お疲れ様でした!

Railsのlink_toのブロック構文

  • 2014.07.27

こんにちは!funnythingzです。

swiftとかgoとか最近流行ってますね!プログラミング楽しいです(^q^

最近Railsを始めたのですが、Rails凄いです。破壊力半端ないです。

それはさておき、link_toってのがあるのですが、生成される要素の中にDOMを入れたいことがあります。

link_to

普通に書くとこんな感じでViewに埋め込みます。

<%= link_to "コメント削除", [comment.article, comment], method: :delete, data: { confirm: 'Are you sure?' } %>

しかしこれだと<span class="icon remove"></span>みたいにDOMをそのまま入れると文字列としてエスケープされて出力されてしまいます。

そこでブロック構文を使います。

<%= link_to [comment.article, comment], method: :delete, data: { confirm: 'Are you sure?' } do %>
    <span class="icon remove"></span>
<% end %>

このようにブロック構文を用いることでDOMを扱えます。

覚えることはいっぱいあるけどいろいろ便利だぞRails!

Effective Sass というスライドを書いてみた

  • 2014.07.18

お仕事でSass/Compassをよく書くのでなんとなくまとめてみた。