読者です 読者をやめる 読者になる 読者になる

てくすた

ピクスタ株式会社のエンジニア・デザイナーがつづるよもやまテクニカルブログです

デザイナーが新規サービスを立ち上げる際にやったこと「Slim」導入

こんにちは、ピクスタデザイナーのogawaです。

今回は新規サービスfotowa (フォトワ)開発時に導入したSlimについてお話したいと思います。

はじめに

PIXTAではこれまでERBを使用していましたが、fotowaでは一から開発できる良い機会だったのでSlimを試してみました。 新しいことへの取り組みを歓迎する社風がありチャレンジがしやすく、分からないことはエンジニアさんにすぐ相談できる体制もあり、Slim導入もスムーズに進めることが出来ました。

fotowa (フォトワ)の紹介

写真を撮って欲しいユーザーと、写真のスキルを持つフォトグラファーを繫ぎ、予約から写真データ納品まで一貫して提供するマッチングサービスです。

作品例を見てフォトグラファーを選び、好きな時間と場所で撮影してもらうことができます。

fotowa.com

Slimとは

Ruby製のテンプレートエンジンで、HTMLを効率的かつシンプルに生成するための記法です。 インデントでHTMLファイル内の構造を構築します。

メリット

  • 記述量が減りコードの可読性がよくなる
  • erbよりもレンダリングが速い
  • 学習コストがあまりかからない

躓きそうな点

  • Slimは半角スペースを2個あけて下の階層のタグを書いていきます。通常のHTML同様にインデントとスペースに注意が必要です。
  • ほんの少しターミナルを使う

Slimのインストール

Gemfileに以下を記述。

gem "slim-rails"

ターミナルを立ちあげ、bundleでインストール。

bundle install

タグの書き方

Slimでは<、>、<%、%>、閉じタグは不要になります。

doctype html
html
  head
    title タイトル
  body
    h1 マークアップ例

このSlimから生成されたhtmlが下記のコードになります。

<!DOCTYPE html>
<html>
  <head>
    <title>タイトル</title>
  </head>
  <body>
    <h1>
      マークアップ例
    </h1>
  </body>
</html>

テキスト

テキストはタグの後に半角スペースをおいて記述します。

p テキスト
<p>
      テキスト
</p>

複数行あるテキストは|(パイプ)の後に書きます。

p
  |
    テキストテキスト
    テキストテキスト
<p>
      テキストテキスト
      テキストテキスト
</p>

idとclass

#.を使用してIDとクラスを指定します。

タグ名を省略するとデフォルトでdivタグになります。

#slim
  .aaa.bbb
<div id="slim">
  <div class="aaa bbb">
  </div>
</div>

コメント

コメントにはスラッシュを使います。

p
    / この行は表示されません。
      この行も表示されません。
    /! HTMLコメントとして表示されます。
<p><!--HTMLコメントとして表示されます。--></p>

※Rubyの記述などSlimの詳しい書き方はこちらを参考にしてみてください。

変換ツール

変換ツールを使いながら練習をすると分かりやすいと思います。

HTML2slim

まとめ

新規サービスの開発ということもありスケジュールはタイトでしたが、タグの書き方で紹介したように記法もシンプルなので、学習コストもほとんどかからず導入することができました。 見た目スッキリ、閉じタグ書き忘れが無くなる、erbよりもレンダリングが速いというメリットがあるので、今後PIXTA側の新規ページや部分テンプレートにもSlim導入していきたいと思います。

デザイナー募集

ピクスタでは運用だけでなくアクセス解析やサイト改善にもコミットしていきたいデザイナーを募集中です! www.wantedly.com

『fotowa』のアシスタント募集

新規事業の出張撮影サービス『fotowa』でもアシスタント募集中です! www.wantedly.com

ミニマムリリースを意識したiOSアプリ開発

こんにちは、ピクスタデザイナーのid:espernyankoです。
今回はiOSアプリ開発について、デザイナー視点からお話しさせていただければと思います。
開発全体の流れについて興味を持たれた方は、前回前々回の記事も合わせてご覧下さい。

はじめに

ピクスタでは今回が初めてのiOSアプリ開発となるため、アプリをリリースすることによってどの程度ユーザの利便性を向上できるか未知数でした。
また、リリースまでの期限やリソースも限られていたため、いきなり大規模な開発を行うよりもまずはミニマムでリリースを行い、効率よくPDCAサイクルを回していくことが重要だと考えました。

ミニマムで開発するために行ったこと

アプリの機能をシンプルにする

ユーザが直感的に操作しやすいアプリを目指して機能を絞りました。
機能が複雑になるとユーザが操作に迷う可能性があるため、ファーストリリースではコアターゲットの大半が使う機能だけを盛り込んでいます。
主な機能は、素材の「検索」と「検討中リスト」へ保存の2つになります。
アプリを立ち上げてすぐに検索ができるよう、各スクリーンの全てのヘッダには検索窓も設置しました。

推奨環境の選定をアクセス解析から判断する

ピクスタのモバイルユーザの動作環境はiOS8が大多数を占めています。(iOS7は約13%)

f:id:espernyanko:20160427193840j:plain:w500

古いバージョンにどこまで対応するか悩ましいところではありますが、今回は開発スピードと引き換えにiOS7以下のユーザに対応しない選択を行いました。 iOSはバージョンアップが早く公式サポートが切れるスパンも短いため、柔軟に取捨選択を行うことでより効率的な開発ができると判断しました。

画像をPDFで管理する

アプリ開発において、デザイナーとエンジニアの工数を地味に圧迫するのが画像の書き出し&登録です。
アプリ内で使用する画像やアイコンは通常、PNGで書き出しする必要があるのですが、端末ごとにスケールが違うため、これまでの開発では@1x 、@2x、 @3xとそれぞれのサイズで書き出しが必要でした。
しかし今回、推奨環境をiOS8以上としたことでベクター画像(PDF)で管理できるようになり、PNGで何種類も書き出す必要がなくなったため大幅に工数を削減することができました。
* Xcode6からAutoLayoutとベクター画像(PDF)を組み合わせることにより1つのファイルで対応できるようになりました。

f:id:espernyanko:20160427193745j:plain

UIKitを積極的に使用する

各部品のデザインもこだわりたいところではありましたが、ミニマムで開発するために新たなテンプレートは作らずUIKitを使用しました。
UIKitのテンプレートを踏襲することでデザイナー・エンジニア双方の工数削減になることはもちろん、デフォルトのUIはユーザにとっても馴染みがあるため、直感的な操作性を保てるメリットがあります。

FontAwesomeKit(ウェブフォント)を利用する

Cocoapodsを導入しFontAwesomeKitの設定を行いました。
ウェブフォントを利用することで、エンジニアだけで作業を進められる部分が多くなりました。
ピクスタのPCサイトでは既にFontAwesomeを使用していたため、アイコンを統一することで既存ユーザが馴染みやすい利点もあります。

まとめ

Assets Catalogへの登録までデザイナーで行いましたが、全体的に工数削減ができたお陰で他の開発と並行して作業を進めることができました。
作業時間の短縮により設計にかける時間も多くとれるので、アプリ開発においてミニマムリリースを意識することは大きなメリットがあると感じました。

おまけ

デザインのアイデア出しに使える時間も増えました。

f:id:espernyanko:20160427193752j:plain:w500

最終的にどんなアプリになったのか、実際にインストールして触ってみていただけると幸いです。

デザイナー募集

ピクスタでは運用だけでなくアクセス解析やサイト改善にもコミットしていきたいデザイナーを募集中です! www.wantedly.com