KPTツールFURIKAERIをデザインする

先日、マネーフォワードのエンジニアブログに「おもてなしの心でコードを書こう」という、振り返りのKPTツールを題材にした記事を書きました。その記事を書くために作ったKPTツールはFURIKAERIと名づけました。今回はその続き、まさかの会社ブログと個人ブログのコラボレート。実は木曜の深夜〜金曜早朝にハッカソンしてKPTツールを作り、会社で記事にし、週末にデザインを当てて今回の記事にしております。何を目指しているのか。

質素なFURIKAERI

デザインのない状態がこれです。質素ですね。質素ですがKPTをするための最低限の機能は揃っております。この状態は、ppworks/furikaeri/tree/v1.0.2で参照頂けます。

$ git clone git@github.com:ppworks/furikaeri.git
$ git checkout v1.0.2

お化粧しましょう

まずは、Eric Meyer’s “Reset CSS” 2.0 | CSS Resetあたりを当てようかなと思います。

せっかくなので、CSSをbowerで管理したいと思います(( ⁰⊖⁰)/)

参考にするのは手前味噌ですがこの記事、「railsでもbowerでasset管理しつつherokuにもdeployする方法」

node.jsがまだ入れていない場合はインストールします。

$ brew upgrade node

railsからbowerを扱うには、42dev/bower-railsが便利です。Gemfileに追加しましょう。

$ vim Gemfile

gem 'bower-rails'

を追加。Bowerfileなどを生成します。

$ rails g bower_rails:initialize

Bowerfileを開いてassetを追加

cssやjsライブラリを追加する際は、ここの繰り返しになります。

$ vim Bowerfile

asset 'reset-css'

$ rake bower:install

railsに最初から追加されているjquery-railsを消して、bowerで管理しましょう。

$ vim Gemfile

gem 'jquery-rails'                                                                                                                           

を消します。

$ vim Bowerfile

asset 'jqury-ujs'
asset 'componets-font-awesome'

を追加。ついでに Font Awesomeも。その他パッケージは、Bower - Searchから検索出来ます。

$ rake bower:install

準備おーけい。

適当にデザイン

なんか適当に、nu boardで描くとはかどります。

CANSAY nu board (ヌーボード) A4判 NGA402FN08

KPTといえば、こんな感じで左にKP，右にTだ！てなわけで雑に設計しました。

を書いてhamlで書いていきます。全体のソースコードは、ppworks/furikaeri/tree/v1.1.1で参照頂けます。

$ git clone git@github.com:ppworks/furikaeri.git
$ git checkout v1.0.2

トップページにデモ用のプロジェクトを置いて、そのページは各プロジェクトを同じように扱いたかったので、app/views/pages/top.html.hamlとapp/views/projects.show.html.hamlからapp/views/projects/_project.html.hamlのパーシャルを読む構造にしてみました。 `

= render('projects/project', project: @project)

app/views/projects/_project.html.hamlの中身はこんな。

.project
  %h1.project__title
    = project.name
    %small
      = link_to new_project_path, class: 'project__new-link' do
        = t('.new_project_link')

.issues
  .issue__kpt.issue__keep
    %h2.issue__heading Keep
    = render('issues/issues', issues: project.issues, status: :keep)
    = render('issues/form', project: project, status: :keep)

  .issue__kpt.issue__problem
    %h2.issue__heading Problem
    = render('issues/issues', issues: project.issues, status: :problem)
    = render('issues/form', project: project, status: :problem)

  .issue__kpt.issue__try
    %h2.issue__heading Try
    = render('issues/issues', issues: project.issues, status: :try)
    = render('issues/form', project: project, status: :try)

更に読み込んでいるパーシャルはこちら。モデルごとに分けておくと管理しやすいです。

app/views/issues/_issues.html.haml

%ul{class: "issue__list #{status}"}
  = content_tag_for(:li, issues.with_status(status).order(:id)) do |issue|
    = render('issues/issue', issue: issue)

app/views/issues/_issue.html.haml

= issue.title
= link_to(url_for([issue.project, issue]), method: :delete, class: 'delete-link') do
  %i.issue__remove-button.fa.fa-trash

app/views/issues/_form.html.haml

.issue.issue__form.hidden
  = form_for([project, Issue.new], html: {id: "new_#{status}_issue_form"}) do |f|
    = f.text_field(:title, class: 'issue__form__title', placeholder: 'issue', autocomplete: 'off')
    = f.hidden_field(:status, value: status)
    = f.submit
%i.issue__add-button.fa.fa-plus-circle

CSSは、BEM. Block, Element, Modifierに沿って書きました。Sass: Syntactically Awesome Style SheetsのSCCS記法です。

.project {
  margin: $margin-half $margin;
}

.project__title {
  font-size: 25px;
  color: #777777;
  margin-bottom: $margin;
}

.project__new-link{
  float: right;
  font-size: 14px;
}

.new_project {
  width: 50%;
  input[type=text] {
    padding: 5px 10px 5px 10px;
    font-size: 30px;
    border: none;
    &:focus {
      outline: none;
    }
  }
  input[type=submit] {
    display: none;
  }
}

.issues {
  position: relative;
  margin: $margin-half $margin;
  height: 100%;
}

.issue__kpt {
  box-sizing: border-box;
  top: 0;
  width: 50%;
  margin: 0 0 $margin-half 0;
}

.issue__keep {
  padding: $margin-quarter $margin-half $margin 0;
  position: relative;
  border-bottom: solid $border-color 1px;
}

.issue__problem {
  padding: $margin-quarter $margin-half $margin 0;
  position: relative;
}

.issue__try {
  position: absolute;
  right: 0;
  min-height: 100%;
  padding: $margin-quarter 0 $margin-quarter $margin-half;
  border-left: solid $border-color 1px;
}

.issue__heading {
  font-size: 20px;
  color: #c1c1c1;
}

.issue__list {
  min-height: $margin-half;
}

.issue {
  &:first-child {
    margin-top: $margin-half;
  }
  cursor: move;
  font-size: 14px;
  margin-bottom: $margin-quarter;
  padding: $margin-quarter;
  border-radius: 5px;
  background-color: $issue-bgcolor;
}

.issue__remove-button {
  @include button;
  float: right;
  font-size: 20px;
  @include transition-duration(0.2s);
  color: darken($issue-bgcolor, 5);
  .hover, &:hover {
    color: $remove-color;
  }
}

.issue__add-button {
  @include button;
  float: right;
  font-size: 40px;
  color: darken($add-color, 5);
  .hover, &:hover {
    color: $add-color;
  }
}

.issue__form {
  @include balloon-bottom(10px, #ffffff, 10px);
  position: relative;
  form {
    position: relative;
    input[type=text] {
      width: 100%;
      font-size: 22px;
      border: none;
      color: #aaaaaa;
      &:focus {
        outline: none;
      }
    }
    input[type=submit] {
      display: none;
    }
  }
}

そんで、出来たのがこれ。

割りと気に入っております。実はこれに更にリアルタイム同期を付けたバージョンをお試し運用中です（まだ上手く動かないかも。。。）。ちょいと調整したらリアルタイム同期に関してはまた別途記事にするかもしれませんが、予告した記事は大抵書きませんよね:p

CSS設計で参考にしたのが以下です。素晴らしい本です。CSSを書く人必読です。

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

今回の記事のデザインはgithubにて、pull requestを出してある状態です。Design:p by ppworks · Pull Request #5 · ppworks/furikaeri

よろしければ、お気軽にコメント下さい。ツッコミも大歓迎です。githubについては以下の本を読むとpull requestの楽しさが分かりますのでぜひぜひ。

Web制作者のためのGitHubの教科書 チームの効率を最大化する共同開発ツール