rista’s blog

株式会社リスタの技術?ブログ

MacBook Pro 13inchの持ち運び電源にMacBook用の29W 電源アダプタを買ってみた

Android開発始めたらMacBook Airが重すぎたのでMacBook Pro 13incに買い替えた@mikedaです。
vimmerなのにESCキーが無くいのめちゃくちゃ辛いです。(Ctrl + [でがんばってます)

MacBook Proの電源でかい

MacBook Proに買ってまず思ったのは『電源でけぇな。持ち運び辛いよ・・・』でした。
※24/365でPC持ち歩くので

買い替えにともなって今まで使っていた会社用、持ち運び用の電源も泣く泣く買い換えることになったのですが、調べてみるとMacBookの電源はこの3つがあるようです。

それぞれ『MacBook』、『13インチMacBook Pro』、『15インチMacBook Pro』と組み合わせると最も優れた充電パフォーマンスを発揮します、と記載されていますが、61Wのはデカくて高いし、持ち運び用は29Wでいけるんじゃないかな。

ということで持ち運び用には29Wを買ってみました

f:id:mikeda:20170627080420j:plain

61Wと比べると圧倒的に小さい!!!

充電してみると

普通に使えました。

f:id:mikeda:20170627090456p:plain

61Wと比べると時間がかかっているのかもしれませんが、そんな急いで充電したいということがないので特に気になっていません。
すごく熱くなるとかもないです。

まとめ

けっこう常識でわざわざ書くようなことじゃないのかもですが、MacBook Pro 13incの持ち運び用電源に29Wのやつを買ったら『安い・小さい・軽い』で非常に良かったです、という話でした。

武蔵小山で求人張り紙を集めてきた

白内障で左目がぜんぜん見えなくなった@mikedaです。

先日リリースした街の求人張り紙投稿アプリで、所用で立ち寄った武蔵小山の求人張り紙を集めてきました。

f:id:mikeda:20170622211217p:plain

途中で役所よってご飯食べたりしながら2時間で40件。
合計4000ポイントで、1ポイント1円のAmazonギフト券と交換できるので・・・
うーん、ポイント設定をミスっているかもしれない。

とある土曜日のこと

というわけで免許更新といっしょに免許の住所を変更をするため、武蔵小山に住民票の写しを取りに行ったのですが、そのついでに求人張り紙集めをしてきました。

武蔵小山到着

さっそく改札出てすぐのファミリーマートで最初の1件GETです。

f:id:mikeda:20170622115054p:plain

そして武蔵小山サービスコーナーで住民票の写しを⊂(゚Д゚⊂≡<ゲトズサー

f:id:mikeda:20170620183629j:plain

駅の周りをブラブラ

無事に目的達成して、本格的に張り紙集めに入ります。 まずはそのまま駅の周りをブラブラ。

お昼ごはん食べるところを探しながら求人張り紙を集めます。

商店街に移動してお昼ごはん

駅前に戻って商店街に入ります。

良さげなつけ麺やさんをみかけたので、お昼はつけ麺にしました。

f:id:mikeda:20170617124652j:plain

健康に気を使って野菜盛りつきです。
しかし前日の晩御飯もつけ麺だったので、そもそもなんかダメな気がします。
自分は武蔵小山の隣の不動前に住んでるんですが、薫風ってお店のつけ麺がすごく美味しいんですよね・・・

本格的に商店街に突入

さてお腹も膨れたので、本格的に商店街に突入です。

このあたりで蓮舫議員とすれ違いました。
別の議員の応援に来ていたようです。
けっこう小柄なんだな、と思いつつ政治のことはよくわかんないので気にせず張り紙集めを続けます。

街の洋食屋さん的なお店に行列が。今度いってみよう。

f:id:mikeda:20170622205938p:plain

路上立ち食いの焼き鳥屋さん!!!
野外で昼間っから焼き鳥とビール。最高そう。

f:id:mikeda:20170622210019p:plain

天ぷら屋さんのランチに行列ができてました。気になる。

f:id:mikeda:20170622210606p:plain

携帯の充電切れ。そして

ここで携帯の充電が切れました。
休憩がてら携帯を充電しようと、さっきみかけたドトール 武蔵小山店 に入ります。

f:id:mikeda:20170622210034p:plain

ところが・・・

(´・ω・`)

この日の成果

武蔵小山の張り紙マップは最終的にこうなりました。

f:id:mikeda:20170622211308p:plain

商店街の奥まで行ききれていないですね。
まだけっこうありそうでした。

個人の投稿数は135件になりました。投稿数ランキング8位です。

f:id:mikeda:20170622211245p:plain

mikedaの張り紙投稿一覧

実は1つ上が社員の彼女で、絶対追い抜いてやる!と思いつつなかなか追いつけない・・・

まとめ

武蔵小山で散歩がてら求人張り紙集めをしたらポイントが貯まりすぎた。
ポイント設定を見直す必要があるかも。

Railsにscss-lintを導入し、CSSに秩序を与えました

エンジニアの望月(@c5meru)です。
弊社では、先日CSSの実装パターンを統一しましたが、さらなる秩序を与えるためにscss-lintを導入いたしました。

Railsでscss-lintを導入するのはとっても簡単です。

# Gemfile

source 'https://rubygems.org'

group :development, :test do
  gem 'scss_lint', require: false
end

こんな風にGemfileに1行追記しまして、

$ bundle install

をします。

あとは

$ bundle exec scss-lint (必要であればファイル名を指定)

で動かすことが可能ですが、細かい設定をするために、プロジェクトルートに.scss-lint.ymlを作成して、設定内容を書いていきます。
弊社で使っている.scss-lint.ymlはこんな感じです。

# .scss-lint.yml

scss_files: "app/assets/stylesheets/mobile/modules/**"

linters:
  MergeableSelector:
    force_nesting: false

  NameFormat:
    enabled: false

  PropertySortOrder:
    order:
      - position
      - top
      - right
      - bottom
      - left
      - display
      - float
      - margin
      - margin-top
      - margin-right
      - margin-bottom
      - margin-left
      - padding
      - padding-top
      - padding-right
      - padding-bottom
      - padding-left

  PropertyUnits:
    global: ['em', 'rem', '%']
    properties:
      border: ['px']
      border-radius: ['%', 'px']
      border-width: ['rem', 'px']
      line-height: ['rem']
      margin: ['em', 'rem']
      padding: ['em', 'rem']
      width: ['em', 'rem', '%', 'px']
      height: ['em', 'rem']
      top: ['rem', '%', 'px']
      right: ['rem', '%', 'px']
      bottom: ['rem', '%', 'px']
      left: ['rem', '%', 'px']

  SelectorFormat:
    enabled: false

  UrlFormat:
    enabled: false

  VariableForProperty:
    enabled: true
    properties:
      - color
      - font

  VendorPrefix:
    enabled: false

  QualifyingElement:
    enabled: false

1行目は、Lintを行うファイル・ディレクトリです。
弊社は現在CSSの移行中なので、新しい方のSCSSファイルのみチェックされるようにしています。

2行目以降が、オプションの追加や、ルールの除外です。
こちらのルールについて、いくつかご紹介します。

PropertySortOrder

プロパティの順番を指定します。

# .scss-lint.yml

PropertySortOrder:
    order:
      - position
      - display
      - float

この設定ですと、

// styles.scss

.hoge {
    position: relative;
    float: left;
    display: block;
}

だとエラーになるので

// styles.scss

.hoge {
    position: relative;
    display: block;
    float: left;
}

と書きましょう、というルールになります。

PropertyUnits

プロパティの単位を指定します。

# .scss-lint.yml

PropertyUnits:
    global: ['em', 'rem', '%']
    properties:
      border: ['%', 'px']
      margin: ['em', 'rem']
      padding: ['em', 'rem']

この設定ですと、

// styles.scss

.hoge {
    width: 140px;
    padding: 14px;
}

だとエラーになるので

// styles.scss

.hoge {
    width: 10rem;
    padding: 1rem;
}

と書きましょう、というルールになります。

SelectorFormat

セレクタのフォーマットが揃っているかチェックしてくれます。スネークケースか、キャメルケースか、というフォーマットですね。

弊社はBootstrapと一部併用していたり、オリジナルのCSSはスネークケースで書かれていたりするので、ここを揃えようとするとかなり大変だったりします。
そのため以下のようにして、このチェックはオフにしています。

# .scss-lint.yml

SelectorFormat:
  enabled: false

VariableForProperty

プロパティが変数になっているかどうかチェックしてくれます。

# .scss-lint.yml

VariableForProperty:
  enabled: true
  properties:
    - color
    - font

この設定ですと、

// styles.scss

.hoge {
    color: #ffffff;
    font-size: 12px;
}

だとエラーになるので、どこかで変数を定義してあげて、

// styles.scss

$white = #ffffff;
$font_size_sm: 12px;

.hoge {
    color: $white;
    font-size: $font_size_sm;
}

と書きましょう、というルールになります。

以上が、簡単な、scss-lintの使い方です。

ルールがきちんと決まっていたり、変数化されていて毎回チェックがされれば、明日の自分がルールを忘れていても安心ですね。
特にCSSは秩序を保つのがなかなか難しいのですが、弊社ではコンポーネントごとにファイルを分けたり、今回のようにscss-lintを導入したりして、管理しています。
このscss-lintは rubocophaml-lintなどと一緒にCIで自動実行され、エラーがあればSlackやメールで、開発者に通知されるようになっています。

CSSの見通しが良くなってきたので、前の記事にもありますように、JavaScriptの管理をなんとかしたいなぁ、と思う今日このごろです。


ということで、弊社では引き続き採用活動中です! どんな会社かということも含めて興味を持ったら、ぜひぜひ以下をクリックしてみてくださいね(`・ω・´)

www.wantedly.com

街の求人張り紙を投稿・共有するiPhoneアプリを作りました

3年前に友達の結婚式のビンゴで当てたディズニーペアチケットを最近やっと使った@mikedaです。

最近こういうiPhoneアプリをリリースしました。

街の求人張り紙を投稿してポイントをGETできるアプリ

主な機能

求人張り紙を投稿してポイントをGETする

街の求人張り紙を撮影して投稿できます。投稿すると100ポイントもらえます。

f:id:mikeda:20170613105950j:plain

過去に投稿された張り紙は1ヶ月たつと更新できます。更新すると50ポイントもらえます。

投稿した張り紙はしばらくするとJOBLISTに掲載されます。

f:id:mikeda:20170613111217p:plain

※裏ではスタッフが手動で画像からデータを起こしています。

ためたポイントをAmazonギフト券と交換する

ポイントは1ポイント1円ぶんのAmazonギフト券と交換できます。

f:id:mikeda:20170613110019j:plain

※裏では@mikedaが心をこめてギフトコードを記載したメールを手動送信しています。

目的

『全てのアルバイト情報を網羅する』ためです。

儲かるの?

ここではたぶん儲けないです。

サービス名

個人的には『ハリガミハンター』にしたかったのですが、最終的に『JOBLISTアプリ』になりました。

アプリはどうやって作ったのか

Swift3で、RxSwiftを使ってMVVMベースで開発しました。

まず試しに自分(iOS開発未経験)でデモアプリを使ってみて、やっぱ全部自分で実装する辛そうだったので、外部の開発者にお願いすることにしました。

開発者はこういう経緯でみつけました。

f:id:mikeda:20170613111337p:plain

大平さん渡辺さんさん、ありがとうございました!

APIはどうやって作ったのか

railsで開発しました。 JOBLISTのコードベースで、Mountable Engineとして実装されています。

Rails.application.routes.draw do
  mount Api::Engine, constraints: { subdomain: 'api' }

  # ...
end

実装についてはいろいろオシャレなgemを検討したものの、アプリAPI開発は初めてだったこともあり、最終的には使い慣れた普通のコントローラ&ビュー(jbuilder)で実装しました。
ドキュメントはautodocでspecから自動生成しています。

Android版は作らないのか

作ります!すぐ作りたいです!!
だれか手伝ってくれませんか!
初期実装とリリース作業だけでもお願いできればあとは自分が引継ぎます。

Google、KotlinをAndroidアプリ開発言語に選定

ということもあり、Swiftと近い感覚で書けそうなので、出来ればKotlinで実装したいなと思ってます。
いい人みつからなければ泣きながら自分で勉強・開発するかも(´・ω・`)

まとめ

街の求人張り紙を投稿・共有するiPhoneアプリを作りました。
機能もUIもまだまだこれから。どんどんブラッシュアップしていきたいと思ってます。

Android版もなる早でリリースします。
というわけでiOSAndroidエンジニア絶賛募集中です!

Rails 5.1, Ruby 2.4にアップデートしました

最近iOSアプリエンジニアに転向ぎみの@mikedaです。

JOBLISTで使っているrubyrailsのバージョンがRuby 2.3.1、Rails 4.2.6とけっこう古くなっていたので、最近、エイヤとアップデートしました。

やったこととか対応したエラーなどをざっとメモっておきます。

作業は以下のように少しずつ進めました。

  1. Rails 4.2.6 -> 4.2.8。合わせて全体的にgemのバージョンアップ
  2. Rails 4.2.8 -> 5.0.3
  3. Ruby 2.3.0 -> 2.4.1
  4. Rails 5.0.3 -> 5.1.1

Rails 4.2.6 -> 4.2.8

まずはrailsを4系の最新版にアップデート。
合わせて全体的にgemのバージョンアップしました。

bundle update

# Gemfile
# gem 'rails', '4.2.8'

bundle update rails

エラー対応など

railsは特に問題なく動きましたが、他のgemがいろいろおかしくなったので調整しました。

rubocop、haml-lint

追加された新しいルールについて取捨選択&調整しました。
rubocopはauto-correctオプションでだいたい自動修正できるんですが、haml-lintは全部手動なのでけっこう辛かったです。

jquery-ui-rails

requireするパスがかわっていたので修正しました。

# Sprockets::FileNotFound - couldn't find file 'jquery-ui/dialog' with type 'application/javascript':

# app/assets/javascripts/application.js
-//= require jquery-ui/sortable
+//= require jquery-ui/widgets/sortable

CarrierWave

CarrierWave::Storage::Fogがが明示的にrequireしないと見つからなくなっていました。

# uninitialized constant CarrierWave::Storage::Fog (NameError)

# config/initializers/carrierwave.rb
+ require 'carrierwave/storage/abstract'
+ require 'carrierwave/storage/file'
+ require 'carrierwave/storage/fog'

set_content_typeは不要になったらしいので削除しました。

# uninitialized constant CarrierWave::MimeTypes

# 各種Uploader
- process :set_content_type

slack-notifier

channelの指定のしかたがちょっと変わってました。

# NameError: undefined local variable or method `channel' for main:Object

- notifier = Slack::Notifier.new ENV['SLACK_WEBHOOK_URL']
- notifier.channel = channel
+ notifier = Slack::Notifier.new ENV['SLACK_WEBHOOK_URL'], channel: channel

draper

sourceメソッドは無くなったようです。

  def latitude
 -   source.latitude.to_f
 +   object.latitude.to_f
  end

Rails 4.2.8 -> 5.0.3

Railsを5.0にアップデートしました。
Rails アップグレードガイドなど見ながら以下の手順で作業しました。

  • bundle update rails
  • rails app:update
  • エラー修正、deplicated対応

bundle update rails

bundle update railsをがんばって成功させます。

railtiesの依存関係でコケるものが多いです。

Bundler could not find compatible versions for gem "railties":
  In Gemfile:
    rspec-rails was resolved to 3.6.0, which depends on
      railties (>= 3.0)

コケたものは基本的にはいっしょにバージョンアップしてやります。

bundle update rails rspec-rails

しかしそもそもgemが更新されてないものもあります。

f:id:mikeda:20170611185730p:plain

https://rubygems.org などで検索して最新版が対応してないものは諦めて、使わないようにするか、パッチ作ります。

rails app:update

実行すると各種コンフィグが上書きされるのでdiff見ながら調整します。

明示的に調整していたもの以外のデフォルト値変更は基本的に全て適用しました。

新しい項目で調整したものはこのあたりです。

# config/application.rb
+ config.active_record.time_zone_aware_types = %i[datetime time]

# config/environments/production.rb
# これをtrueにしないとproductionでautoloadがきかなくなっていた
+ config.enable_dependency_loading = true

# DEPRECATION WARNING: `config.serve_static_files` is deprecated and will be removed in Rails 5.1.
# Please use `config.public_file_server.enabled = false` instead.
# config/environments/xxx.rb
-  config.serve_static_files = ENV['RAILS_SERVE_STATIC_FILES'].present?
+  config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?

エラー修正、deplicated対応

あとはテスト通るまでエラーを修正していきます。
deplicated対応はパッと出来そうなものだけいっしょに対応して、あとは別対応にしたり5.1アップデート時にまわしたりしました。

record_tag_helper

div_for、content_tag_forはrecord_tag_helperというgemに分離されたようです。

# NoMethodError - The `div_for` method has been removed from Rails. To continue using it, add the `record_tag_helper` gem to your Gemfile:              
#  gem 'record_tag_helper', '~> 1.0' 

# Gemfile
+gem 'record_tag_helper'

年月日がhiddenでそのまま渡せなくなった

パラメータを確認すると文字列として認識されています。

"birthday"=>"{1=>2017, 2=>5, 3=>22}"

記述を調整するとちゃんと渡せました。

- = f.hidden_field :birthday
+ = hidden_field_tag "entry[birthday]", @entry.birthday

render text

render :textが非推奨になったようです。 S3に保存したHTMLをそのまま表示するというへんな箇所を修正。

- render text: html
+ render html: html.html_safe

uniq -> distinct

ActiveRecord::Relationのuniqはdistinctになりました。

# DEPRECATION WARNING: uniq is deprecated and will be removed from Rails 5.1 (use distinct instead).

- .uniq
+ .distinct

where_valuesが使えなくなった

複雑なOR条件などで使っていたwhere_valuesが使えなくなっていました。
rails 5で追加されたorを使うように書き換えました。

ApplicationRecord

各種モデルはActiveRecord::BaseではなくApplicationRecordを継承するようにとのこと。
rails app:updateでは自動作成されませんでしたがせっかくなので手動で対応しておきます。

class ApplicationRecord < ActiveRecord::Base
  self.abstract_class = true
end
- class City < ActiveRecord::Base
+ class City < ApplicationRecord

sql_mode: TRADITIONAL

group byしたカラムをselectで使っていないものがエラーになるようになりました。
そもそもSQLなおすべきですが、いったん設定調整してエラーにならないようにしました。

# ActiveRecord::StatementInvalid - Mysql2::Error: Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column 'joblist_devlopment.jobs.id' which is not functionally dependent on columns in GROUP BY clause; this is incompatible with sql_mode=only_full_group_by: ...

# config/database.yml
+  variables:
+    sql_mode: TRADITIONAL

enumのカラムから数値を取り出す方法が変わった

こういうモデルがあった時に、

class Job
  enum status: %i[draft published]
end

以前はオブジェクトにカラム名を指定した[]アクセスをすると数値が取り出せていましたが、

> job[:status]
=> 1

Rails 5からは文字列を返すようになりました。

> job[:status]
=> "published"

数値を取り出すには以下のどちらかの方法が必要です。

> job.status_before_type_cast
=> 1
> Job.statuses[job.status]
=> 1

request specのdeplication warning

引数の渡し方がキーワード引数になったようです。

# DEPRECATION WARNING: ActionDispatch::IntegrationTest
# HTTP request methods will accept only the following
# keyword arguments in future Rails versions:                                                       
# params, headers, env, xhr, as

- get url, params, headers
+ get url, params: params, headers: headers

alias_method_chainがdeplicated

Module#prepend使うように修正しました。

バージョンアップできないgemを削除

jquery-cookie-rails, readmorejs-railsrails 5に対応してませんでした。
直接ファイルを設置してgemを使わないように調整しました。

JSライブラリをgem化したものはどんどん動かなくなっているし、ファイル直接おくのもけっこうつらいので、npm的な仕組みに移行したいです。

riby 2.3.0 -> ruby 2.4

rubyをバージョンアップします。

今までサーバ上ではUbuntu 16.04の標準パッケージのrubyを使っていたので、rbenvを使うようにしました。
これは今回の話とはあまり関係がないので割愛します。

細かいところでいくつか問題がおこったので調整しました。

Ubuntu 16.04のtzinfo

WerckerのCIで使っているUbuntu 16.04のdockerイメージをビルドし直すと、タイムゾーンを日本語に設定するところで、

FROM ubuntu:16.04
RUN cp /usr/share/zoneinfo/Asia/Tokyo /etc/localtime && \
    echo 'Asia/Tokyo' > /etc/timezone && date

以下のエラーが出るようになってました。

cp: cannot stat '/usr/share/zoneinfo/Asia/Tokyo': No such file or directory

いつのまにかUbuntu 16.04のイメージでタイムゾーンファイルがデフォルトでインストールされなくなっていたのかな?

tzinfoをインストールするようにしました。

FROM ubuntu:16.04
RUN apt-get update && \
    apt-get install -y tzinfo ...
RUN cp /usr/share/zoneinfo/Asia/Tokyo /etc/localtime && \
    echo 'Asia/Tokyo' > /etc/timezone && date

別のちゃんとした方法があるかも。

seory -> meta-tags

SEO用のメタタグ設定にseoryというgemを使っていたのですが、こういうエラーが出るようになってました。

FATAL -- : ActionView::Template::Error (wrong argument type PrefecturesController (expected Regexp)):

ruby2.4で追加されたmatch?メソッドの影響でこのあたりの挙動がおかしくなっているっぽいですが、

https://github.com/esminc/seory/blob/master/lib/seory/condition.rb#L13

メンテされてなさそうなのでmeta-tagsに移行しました。

Rails 5.0.3 -> 5.1.1

基本的な手順は5.0へのアップデート時と同じです。

app:update後の対応箇所だけいくつかあげておきます。

redis-session-store

動かなくなっていました・・・ メンテ止まってそうなので他のgemに移行したいところですが、いったんこのissueを参考にパッチあてたレポジトリを作成して5.1に対応しました。

# Gemfile
- gem 'redis-session-store'
+ gem 'redis-session-store', github: 'rista-inc/redis-session-store' # rails 5.1対応用のfork

belongs_to optional: true

5系からデフォルトでbelongs_toのカラムはrequiredになっていたので、このタイミングで対応しました。

Rails.application.config.active_record.belongs_to_required_by_default = true

今まで明示的にrequiredなどを記載していなかったので、requiredではないところにだけoptional: trueを追加しました。

- belongs_to :company
+ belongs_to :company, optional: true

validate false

belongs_toの件で、一部のデータ作成順序を考慮していないテストデータ作成バッチでvalidateがコケるようになってしまったので、一時的にvalidate無効化しました。

- photo.save!
+ photo.save!(validate: false)

- City.import(batch)
+ City.import(batch, validate: false)

i18nのrequiredエラー

同じくbelongs_toの件で、エラー時のメッセージが無かったので追加しました。

# config/locales/ja.yml
+ required: を入力してください

f:id:mikeda:20170611185824p:plain

f:id:mikeda:20170611185832p:plain

rails sがこける

--bind 0.0.0.0つけるとコケる。

air:joblist mikeda$ bin/rails s --bind 0.0.0.0
/Users/mikeda/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/thor-0.19.4/lib/thor/base.rb:484:in `handle_argument_error': ERROR: "rails server" was called with arguments ["0.0.0.0"] (Thor::InvocationError)
Usage: "rails server [puma, thin etc] [options]"

いつのまにか動かなくなっていたけどまだそんなに困ってないので未対応。
対応したら追記します。

gem listen

# これなんかデフォルトで有効になった以下の設定で必要っぽい
# config.file_watcher = ActiveSupport::EventedFileUpdateChecker
# developmentだけなのであんまちゃんと調べてない

# Gemfile
+ gem 'listen'

まとめ

というわけでrubyrailsをアップデートしました。

特に大きな問題は起こりませんでしたが、まとめてやるのやっぱしんどいので、もっとこまめにアップデートするようにします。
あとjsライブラリのバージョン管理をなんとかしよう。

CSSの実装がバラバラになりがちなので、よくある実装パターンをesaにまとめておくようにした話

こんにちは!エンジニアの辻(@dim0627)です!

すっかり春めいてきましたね。皆さんいかがお過ごしですか。 僕は勇者ヨシヒコのシーズン3がAmazon Prime Videoで公開されたせいで寝不足気味です。

さて、今回はHTML/CSSについての話をちょっとだけしようと思います。

HTML/CSSのコーディングにおけるベンチャーあるある

HTML/CSSは比較的勉強を始めやすい分野だと思うんですが、 長く破綻しづらい考え抜かれた設計をするのはなかなか難しかったりします。

例えば、HTML/CSSを書いたことがある人なら、だいたいはこんな悩みを経験したことがあるのではないでしょうか?

  • 要素を横並びにするときはfloat?table?absolute?どれを使えばいいの?
  • 縦横中央揃えにするときはtable-cell + vetical-align?padding?line-height?どれがいいの?
  • clearfixはclear: both?overflow: hidden?

とりあえず思い通りのデザインを実現するだけなら簡単です。

しかし、行き当たりばったりの実装をしてしまうと、似たパーツでもあっちこっちで異なる実装になってしまうことが少なくありません。

スタイルガイドを導入/作成するコストはかけられない

僕がリスタに入社したとき、とりあえずスタイルガイドを作るかーと思って色々調査をしたりしました。

まあスタイルガイドはパーツを一元管理するのが目的だったのでバラバラな実装がまとまるわけではないのですが、コードを俯瞰できると少しは統一に役に立つ部分もあるかと思います。

が、事業のフェーズとしてコストをかけるべきか、運用する上で足かせにならないかという点から一度見送ることにしました。

今後もHTMLはガンガン更新がかかる予定でしたし、ある程度デザイン的に強固になってからでもいいだろうと。

ちなみにそのときに検討していたツールはhologramです。

弊社のJOBLISTはRailsで構築しているので、Rubyで統一できるのがよかったのと、CSSからドキュメントのHTMLを吐き出すことしかしないシンプルさに魅力を感じました。

スタイルガイドのツールって、結構余計なことをするツールが多いんですよね。

よくあるCSSの実装パターンをesaにまとめるようにした

というわけで、折衷案として弊社ではよくあるHTML/CSSの実装パターンをesaにまとめるようにしました。

f:id:dim0627:20170412104116p:plain

実現したいパーツに対してCSSの実装パターンが複数ある場合、 パーツの些細な違いに応じて適切な実装パターンがあるものです。

なのでまとめる際には、どういったときにどういった実装をすればいいのか、までをまとめるようにしています。

f:id:dim0627:20170412104328p:plain

CSSの統率が少しは取れるようになった

これをやりはじめて、実装がバラバラだったCSSが一気にきれいになるわけじゃないですが、 少なくとも状況が悪化するのを防げてると思います。

また、改修時にリファクタリングもかねて実装をあわせる基準ができたので、少しずつよくなっている実感もあります。

コーディングが楽になった

これまでは各自の趣味に任せた実装でしたが、基準ができたので特に何も考えずにそれに従えばよくなりました。

自分の趣味と違う実装方針だと少し抵抗があるかもしれませんが、それもすぐ慣れると思ってます。

レビューが楽になった

組織によってはCSS/HTMLのレビューをしないところもありますが、弊社ではできるだけCSS/HTMLもレビューするようにしています。

その際に「もっとこうした方がいいよ」っていう実装例を書いていたのが、esaのページのURLを書けばよくなったのでレビューは楽になりました。 esaになければ追加のリクエストを出せばいいので。

しかしあくまで暫定的な対応なので、将来的にはちゃんとUI/UXレベルでコミットしてくれる人がいて、 実装面でもスタイルガイドに近いドキュメントが管理できる体制が作れるといいなと思ってます。

というわけで弊社では絶賛採用活動中です! 興味を持ってくれた方は@mikedaまたは@dim0627までご連絡ください!