リモートインターン | 「怖いボタン」の押された状態の見た目を作る

今日は怖話の怖いボタンについて「怖いを押してある場合はそれとわかる見た目が欲しい」の作業をしました。

これを

8fa25729ceea79e94a296bf30a2557a2

こんな感じで。

9927d89925864bc9d0e04a3e0770e880

mixin用の_mixin.css.sassに書かれていたボタンのスタイルにvisitedの擬似クラスに押された感じのスタイルを追加。

既に押したかどうかの動きは他のhelper?(stories_helperかな。)かなんか触らないとつけられなさそうだったので とりあえず今日はここまで。 動きは誰にお願いすればよいのだろうか…。

リモートインターン | MIddleman 実践(2)

引き続きmiddlemanです。

HTML5 Boilerplate 4.0, Sass, Compass と レスポンシブレイアウト対応の Susyに対応しているAmicusを使ってみた。

以下手順。bundlerが入ってる状態からスタート。 ローカルにamicusをクローン

$ git clone http://github.com/nathos/amicus.git my_new_project

Gemfileをinstall

$ bundle install

サーバーを立ち上げる

$ middleman

グリッド表示されたレスポンシブなページが生成される。 レイアウトに関してはSusyの公式を参考に。 まだ掘り下げられてないので後日まとめたい。

AmicusはHamlで書かれていた。 Amicusにブログ付けようとしたが、middlemanのブログテンプレートはデフォルトでERbだったので、ERbをHamlに変換したかった。 ここで躓いて@machidaさんにhtml2hamlのサイトgemを教えていただいた。

$ html2haml [options] [INPUT] [OUTPUT]

でいけるので、今回は

$ html2haml -e blog.html.erb blog.html.haml

でERbからHamlにめでたくコンバートできた。

リモートインターン | MIddleman 実践(1)

引き続きMiddlemanの学習です。 リファレンスを読んでるだけだと頭に入ってこないので、実際にレイアウト組みながら学習することにしました。 今回作るサイトのテーマはチートシートです。 ざっくりphotoshopでデザインしたもの

スクリーンショット 2013-03-09 0.12.09

今日できるところまでコーディングしたもの

スクリーンショット 2013-03-09 0.10.46

ブログ機能を使ってタグをグローバルナビにしてタグ毎の記事一覧をサイドナビに表示したい。

前回躓いたけど解決した問題 sassを書いてもbuildしない限りはコンパイルされないのでcssの表示確認が面倒だな…と思ってたけどアセットヘルパで解決した。(躓いた理由は、リファレンス読書不足。) 例えばstyle.css.sassの場合、普通のhtmlだとstylesheetのリンクは下記のように書くけど

<link rel="stylesheet" href="stylesheets/style.css">

アセットヘルパを使う場合は下記のような記述で良い。

<%= stylesheet_link_tag 'style' %>

これならbuildせずともリロードでcssが反映されるので、LiveReloadの力も借りてsassファイル保存→即ブラウザ反映の確認ができる。とても捗る。

パーシャル ヘッダーのグローバルナビとサイドナビとフッターと記事の整形をして、パーシャルというのを使ってみた。 普段phpを触っているので、これがincludeにあたるところか…と思った。 header.erb、side.erb、footer.erbのようにファイルを命名する。 例えば下記のようなコードをfooter.erbとして保存。

<footer>
  Copyright 2013 hoge
</footer>

layout.erbで該当箇所に下記のように記述する。

<%= partial "footer" %>

ファイルの接頭にアンダースコアを入れるのは、sassで他のsassファイルをimportして結合したいときと似ていてしっくりきた。

この記事書いてるうちにまた少し調整した。

スクリーンショット 2013-03-09 1.46.48

タグの記事一覧はどうやってやろう…。見た目は詰まってる感じがあるので追々微調整する。

リモートインターン | MIddleman 事始め

今回はMiddlemanを学習していきました。

Middleman とは モダンな web 開発環境のすべてのショートカットやツールを使用して静的 web サイトを作成するためのコマンドラインツールです。(コピペ) 詳しくは下記参照 http://middlemanapp.com/ http://middleman-guides.e2esound.com/

以下、手順

1.middlemanをインストール

$ gem install middleman

2.プロジェクトのスケルトンを作成

$ middleman init [project-name]

生成されるプロジェクトツリー

first-middleman
├── .bundle/
│   └── config
├── .gitignore
├── Gemfile
├── Gemfile.lock
├── config.rb
└── source/
    ├── images/
    │   ├── background.png
    │   └── middleman.png
    ├── index.html.erb
    ├── javascripts/
    │   └── all.js
    ├── layouts/
    │   └── layout.erb
    └── stylesheets/
        ├── all.css
        └── normalize.css

3.サーバーの起動

$ cd [project-name]
$ middleman server

middleman単独でもいける。

$ middleman

4.ブラウザでhttp://0.0.0.0:4567へアクセス
middleman
こんな感じに表示される。

5.ビルド

$ cd [project-name]
$ middleman build

ビルド後のproject-tree

first-middleman
├── .bundle/
│ └── config
├── .gitignore
├── Gemfile
├── Gemfile.lock
├── build/
│ ├── images/
│ │ ├── background.png
│ │ └── middleman.png
│ ├── index.html
│ ├── javascripts/
│ │ └── all.js
│ └── stylesheets/
│     ├── all.css
│     └── normalize.css
├── config.rb
└── source/
    ├── images/
    │ ├── background.png
    │ └── middleman.png
    ├── index.html.erb
    ├── javascripts/
    │ └── all.js
    ├── layouts/
    │ └── layout.erb
    └── stylesheets/
        ├── all.css
        └── normalize.css

一度buildしてserver起動している状態で、source内のファイルの変更は即適用されるようだ。

middlemanでブログを作る方法

1.Gemfileでgemを指定して

gem "middleman-blog", "~>3.1.1"

bundle installする。

$ bundle install

若しくは、単独でgem install

$ gem install middleman-blog

次に, config.rb で拡張を有効化する。

activate :blog do |blog|
  # ブログ機能のオプションを設定
end

2.initするときに最初っからブログテンプレートをつけてしまう。

$ middleman init [project-name] --template=blog

生成されるブログはこんな感じ。

ブログの記事について source直下に、下記のような名前でマークダウン形式のファイルが生成される。 /source/2012-01-01-example-article.html.markdown ファイルの置き場が気持ち悪い場合は、config.rbの下記の箇所のコメントアウトを外す。

# blog.prefix = "blog"

/source/blog/のようにsourceの下にblogのディレクトリを作って、先ほどのマークダウンのファイルを格納するだけでいい。

Compass & Sass について middleman initするだけでcompassもsassもインストールされる。 気をつけるのはsassファイルの置き場と拡張子だけ。 /source/stylesheets/の下にstyle.css.sassのようなファイル名で配置してあげると良い。 compass使う場合も、sassファイルの先頭で@import compassを宣言するのみなので、通常通り。

LiveReload LiveReloadは便利なやつ。css編集して保存するとブラウザで変更箇所がオートリロードしてくれるので素敵。(sassで書いた場合はbuildしないと駄目だけど。→リンクヘルパー使えばいけるか?後ほど検証します。→検証しました。) blogの時と同様に、Gemfileでgemを指定してbundle installする。

gem "middleman-livereload", "~>3.0.1"
$ bundle install

config.rbで下記を記述し有効化する。

activate :livereload

あとはブラウザにLiveReloadのextentionを入れておけばOK。 最後に、サーバーを再起動してブラウザを見ながらエディタでcssなどを編集してLiveReloadを体感する。

今日はここまで。長くなったので記事分割した方が良かった気がする。 一番よくわかってないerb周りのことは後回しにしてしまったので、次回そのあたりを学習します。

リモートインターン | 怖話コミックのバナーを作る

作業週の記録です。 今回は怖話に新しく漫画投稿の機能がつく予定なので、投稿募集のバナーを4点作りました。

以下、手順(@machidaさんに書いていただいたものコピペ…)

$ git branch XXXX でブランチを作成
$ git checkout XXXX そのブランチに移動
作業が完了したら
$ git add . 新しく作ったファイルをバージョン管理に追加
$ git commit -a -m"バナー追加" 作業をコミット
$ git push origin XXXX githubにブランチをアップ
github から Pull Request を送る

初プルリク…! 無事マージされて@komagataさんからミサワコメントをいただきました。

ミサワ

リリースが楽しみです。

 

2013.03.07追記:こんな感じになりました。

IMG_1808