inFablic | Fablic, inc. Developer's Blog.

フリマアプリ フリル (FRIL) を運営する Fablic の公式開発者ブログです。Fablic のデザイナー・エンジニア・ディレクターが情報発信していきます。

フリルのiOSアプリ開発におけるエンジニアとデザイナーの作業分担について

こちらはFablic Advent Calendar 2016の記事です。

こんにちは。FablicのiOSエンジニア、shobyです。

iOSエンジニアの皆さんは、デザイナーとどういった形で仕事を進めているでしょうか。

iOSアプリの開発はWebの開発と異なり、UIとロジックを完全に分離することが困難なため、エンジニアとデザイナーの責任範囲が曖昧です。 どこまでエンジニアが担当し、どこまでをデザイナーが担当するかは悩みが多いと思います。

現在、フリルのiOSアプリ開発は、デザイナーがSketchでデザインし、エンジニアがSketchファイルを見ながらUIを実装する方式で進めています。

フリルではこの方式を取り入れることで、デザイナーにStoryboard上でのUI調整を任せていた時期に比べ、開発速度が向上するメリットが得られました。

この記事では、フリルのiOSアプリ開発における、エンジニアとデザイナーの作業分担を、どのように行ってきたかお話しします。

続きを読む

芯を通すリブランディング -デザインに入るまで- (@wariemon)

f:id:wariemon:20161214114759p:plain

こんにちは。Fablicのデザイナーのわりえもん (@wariemon) です。
この記事は Fablic Advent Calender 2016 の記事です。
 
フリルのリブランディングを担当した際に、新規のブランドつくりと違うチェックポイントが存在することに気づきました。
その上でリブランディングにおいて、非常に重要な「デザインに入るまでのプロセス」についてお話させていただきます。
 
 

Elasticsearchの1系から2系への移行

サーバサイドエンジニアの@sinamon129です。

FRILのサーバサイド開発・インフラ・チューニング・検索・運用など幅広くやらせていただいております。

9月に、全文検索サーバとして使っているElasticsearchを1.7.2から2.3.5へ移行をしました*1*2。現在、2.4系で運用しています*3。また、2系へupdateしたので、シングルクラスタだとMarvelがProduction環境でも無料で使えるということで、導入しました。

*1:翌日2.4.0が前日に出ていたことに気づいて泣きたい気持ちになりました。その後2.4.1にアップデートしました。

*2:年始に今年何やりたい?って言われた時にElasticsearchのupdateと言っていたぐらいには念願でしたw

*3:5系がでてしまったので、またバージョンアップします

続きを読む

Fablicの効果検証を支えているGoogleスプレッドシートのお気に入り便利機能5つ

こんにちは。 こちらはFablic Advent Calendar 2016 9日目の記事です。

Fablicでデザイナー兼マネージャーをしている@yuki930です。

フリルのAndroid版のUI/UX担当→Web版のPO兼UI/UX担当を経て、 今は購入全体を見ているチームのデザイナー兼マネージャーをしております。

Fablicのデザイナーは、定性的なユーザーの何気ない声をヒントにし、定量的な大量のデータから執念深くユーザーの行動を分析をしていき、その上で今どこに問題があるのか、どう解決することができるかを日々考えながら仕事をしています。

そのあたりについての詳細はこちらの記事をぜひ御覧ください。

定性と定量の間で考える http://in.fablic.co.jp/entry/2016/12/05/193334

UIデザインのKPI設定 http://keisuke.tsukayoshi.com/blog/3161

今回は、これらで上げられている調査や効果検証の際に活用しているGoogleスプレッドシートについて、いくつかのおすすめ便利機能をご紹介したいと思います。

続きを読む

FablicでのRedash導入事例

プロダクトマネージャー兼エンジニアのid:ninjinkunです。この記事はFablic Advent Calendar 2016のエントリーです。

Fablicでは今年の9月頃からOSSのBIツールであるRedashを導入して、誰でもSQLを叩ける環境を整備しました。以下、運用してわかったRedashの良い点、悪い点、課題などについて述べていきます。

なお、接続しているのは本番データから個人情報を抜いた分析専用slaveです。他にも時系列のデータが入っている別の分析DBや、BigQueryも接続されています。

f:id:ninjinkun:20161206195338p:plain

続きを読む

Picasso にパッチを当てた話

こんにちは。Androidエンジニアの黒川(@hydrakecat)です。

この記事は、Fablic Advent Calendar 2016 のエントリーです。

本日は、Androidのライブラリにパッチを当てた話をしたいと思います。先日、Picassoという画像ライブラリのバグにより、弊社のフリルで一部のユーザーさんに問題が発生しました。この記事では、その問題を解決するために、なぜパッチを当てることにしたのか、どのように行ったのか、どういう問題があったのか、という話をいたします。

続きを読む

Before UI Design - 定性と定量の間で考える

こんにちは、Fablicでデザイナー兼プロダクトマネージャーをしている @takejune です。最近は筋トレに励んでいます。

先日、弊社で運営しているフリル(FRIL)がGoogle PLAYの2016年ベストアプリに選ばれ、ベストデザイン賞を獲得しました🎉

Material Designに対応し、Androidユーザーにとっての使いやすさを考えてきたことが受賞に繋がったと思っています。

f:id:infablic:20161205101928p:plain

このように、近年ではプラットフォーマーのデザインガイドラインが充実し、ユーザーにとって易しいUIをつくることが容易になってきました。 また、プロトタイピングの一般化によって試行錯誤のサイクルを回すことも容易になりました。 そのため、いわゆるUIデザインに掛かる時間が短くなっているように思います。

そんな中で、Fablicのデザインプロセスがどのように変化しているのかをお伝えします。

続きを読む

Drekkarを使ってAndroid WebViewのJavascriptブリッジ処理をEvent Bus風に書く

こんにちはFablic エンジニアの@cutmailです。

この記事は、Fablic Advent Calendar 2016 1日目のエントリーです。

2016年もあと1か月で終わってしまいますが、いかがお過ごしでしょうか。

アプリ開発をする際に、一般的にUIを全てネイティブコードで作ることはユーザー体験的には良くなりそうですが、 どうしても一部をWebViewにしなければならないなどのケースってありますよね。

WebViewからHTMLやURLを指定して、そのHTML内で処理が完結すれば良いのですが、 Android JavaとHTML内のJavascriptで相互に呼び出しを行いたいみたいなケースもあると思います。

弊社のアプリフリルでも一部の画面をWebViewを使って作っていたりします。

AndroidのWebViewクラスではaddJavascriptInterfaceメソッドを使うことで、任意のJavascriptのインターフェースを定義できます。

そして実際に、JavaからJavascriptのメソッドを呼ぶ、JavascriptからJavaのメソッドを呼ぶ処理はこういう感じで書くことができます。

続きを読む

フリルのロゴができるまで

f:id:wariemon:20161026091235p:plain

こんにちは。Fablicのデザイナーのわりえもん (@wariemon) です。
 
2016年10月に、フリル(FRIL)のロゴ・アプリアイコンのリニューアルをしました。
もうみなさんのお手元のアプリも新しいものに変わっているころかと思います。

 

今回、新しいフリルのロゴを作るに至ったきっかけから、新しいロゴになるまでの流れ・思いなどを、お話しさせていただきます。
続きを読む

「Fashion Tech meetup #3」を開催しました

f:id:invent:20160929174726p:plain

こんにちは。エンジニアのcutmailです。

先日、GMO Yoursさんにて、Fashion Tech meetupというイベントを開催しました!

このイベントは、Fashion x Technology をテーマにしており、MERYを運営する株式会社peroliさんと、iQONを運営する株式会社VASILYさんと共同で開催させていただきました。

弊社からは、pompoponakamuuuがWeb版フリルにReactを導入した話や、アプリのプッシュ通知をいかにオフにされないようにするかという話をしました。

続きを読む