LIFULL Creators Blog

「株式会社LIFULL(ライフル)」の社員によるブログです。

ママデザイナーが在宅ワークしてみた。

f:id:homes_designers:20160906110313p:plain

こんにちは。
ホームズくんを描いたりしている"ママデザイナー"のモリです。
 

入社6年目。昨年出産をして、この4月に復職しました!
出産してもデザイナーとして働ける環境があることだけで、本当にありがたや、ありがたやですね。


そして、この夏。
3週間(週2日)在宅ワークしてみました!

 

在宅ワークをしてみて良かったこと、困ったことをお伝えします。

 

続きを読む

夏のアプリ容量ダイエット!WebPでスリムなアプリになろう!

f:id:homes_designers:20160818165410p:plain

 

こんにちは。
HOME'Sアプリのデザイナーのこばやしです。

 

Androidアプリを育てていくと、ひとつの課題に行き当たります。
アプリリソースサイズです。

 

機能追加、ダイナミックな画像表現などで、気づいたら「ゲームアプリ?」と思うほどリソースサイズが増えているかも…。
そんな時、ひょっとしたら劇的にスリム化できるかもしれない方法をご紹介します。
HOME'S Androidアプリでも実際にやった内容です。

====

Google deveroparsの記事「Google Play におけるアプリのダウンロード サイズの削減」に記載もあるWebPが今回紹介する内容です。
googledevjp.blogspot.jp

 

記事の一文に、

3. APK の構成要素のサイズを減らすことによる最適化: たとえば、JPEG ではなく WebP を使用するなど効率的なファイル形式を使ったり、未使用コードを削除するために Proguard を使用したりします。

とあります。

 

記事にもあるように、インストールする際にアプリサイズが大きいと通信量を気にしてしまい、それが要因で優れたアプリでもインストールされない、なんてこともあるかもしれません。
そこで今回、画像リソースをWebPに変換することでどのぐらいアプリリソースを削減できるのか。
そしてHOME'S Androidアプリにおいて、実際どのぐらいリソースを削減することができたのかをお話します。

webP(Weppy=ウェッピー)とは

Googleが開発した圧縮形式で、従来の形式よりもファイルサイズを小さくすることを目的としています。
Googleが持つVP8コーデックを用いたWebMという動画フォーマットをベースとしており、WebMの1フレームだけを切り出したものがWebPで、それをRIFFという軽量なコンテナに格納した形式になっています。
https://developers.google.com/speed/webp/


 

特長
  • 可逆 / 非可逆圧縮が可能
  • 透過 (アルファチャネル) が可能
  • 写真の圧縮にも向いている
  • アニメーションが可能

写真画像においても効果的に圧縮できるのが非常に強い特長だと思います。
※非可逆のWebPはAndroid OS 4.0以降でサポート、ロスレス圧縮のWebPは4.2.1以降でサポート


 

サポート
  • Chrome
  • Opera (12.0~)
  • Android Browser (4.2~)
  • Chrome for Android

JPEGやPNGといったメジャーな画像保存形式のようにはまだ普及しておらず、現段階だとかなり限定的に効果を発揮する形式だといえます。
http://caniuse.com/#feat=webp


 

ツール

公式のライブラリ、オーサリングツールなどで生成できます。

比較

アプリ内で実際に使用しているPNG画像、それをWebP化した画像で比較してみます。
※WebPは表示させるためにブラウザで表示したものを撮影しています。容量はWebPのものを記載


f:id:homes_designers:20160819123739p:plain
WebP 2.88KB


f:id:homes_designers:20160819123736p:plain
png 6.73KB


このポーズのホームズくん、可愛い。
小さめのイラストですが、およそ半分に削減できています。
見栄えも変わりありません。


次は写真、複雑なビットマップ画像で試してみます。


f:id:homes_designers:20160819123738p:plain
WebP 27.4KB


f:id:homes_designers:20160819123735p:plain
PNG 560KB

先程のイラストより高い圧縮率となりました。
肉眼ではほとんど区別つかないですが、およそ1/20のサイズに…これはスゴい。



実際にアプリで見てみます。
f:id:homes_designers:20160819123737p:plain
before

f:id:homes_designers:20160819123734p:plain
after


意図したとおりに表示されてます。
大丈夫そうです。



 

アプリで使っている画像をどんどん置き換えてみる

 

Android studioのAnalyze APKを使い、容量が大きい画像をWebPに変更してみました。

f:id:homes_designers:20160818173345p:plain


すると…

f:id:homes_designers:20160818165409p:plain


13.2MBから6.3MBとおよresの容量が半分に。
半分です。
※2016年8月時点

画像リソースはアプリ全体の半数以上を占めていましたが、WebPを用いることで簡単に削減すること成功ができました。
画像の品質は下げたくない、けれど容量を使いすぎるのも…という課題に対しても効果的です。
アプリの表示速度や低スペック端末への配慮としても、一役買ってくれそうです。

まとめ

f:id:homes_designers:20160818192259p:plain
可愛い名前なのにスゴいやつ!
iOS対応やブラウザの対応拡大が待ち遠しい。


実は以前にもWebPを試したことがありました。
しかし当時は挙動が安定していなく使用を断念しました。
最近は4.x系でもSVGをフルサポートするなど、Androidアプリ開発環境がグングン良くなっています。
そんな中で改めて試してみたWebPはAndroidアプリでリソースを削減する手段としてとてもおすすめです。
Android Appにおいて、かつサポートしているOSバージョンが4.1.x以上の場合はおすすめ」といえるのではないかと思います。


ですが、これから普及していくであろう新しい規格のため、考慮すべき点もあります。
「WebPとは」のところで記載してある、サポート範囲と特長のAndroid OSバージョンによる制約を改めて確認し、上手に利用してみてください。

新卒が紹介する「ネクストデザイナー」の1日。

 

f:id:homes_designers:20160817114537p:plain

 はじめまして!新卒入社1年目のミーコです。

初めてデザイナーズブログを書きます!よろしくお願いいたします。

今回は「ネクストのデザイナーってどんな人がいて、どんなことしてるんだろう?」や「新卒のデザイナーってなにするの?」というような就活セミナーや面接では聞けないであろう情報も含め、新卒1年目から見たネクストデザイナーの1日をモリモリ紹介いたします!

続きを読む

mruby + ngx_mrubyでアプリケーションを実装するという選択肢

はじめまして、技術基盤部の相原(kaihar4)です!

今回は、アプリケーションのクラウドサービスへの移行の一環で、 Amazon S3から取得した画像URLを含むファイルを元に、そのURLの外部画像を取得して返す機能mrubyで書き直してAWSに移行した話をしていきたいと思います。

この機能は元々モノリシックなアプリケーションの一機能として動いていたもので、これを切り出してAWSに移行するというのが今回私に与えられたミッションでした。 このアプリケーションは歴史が長く、その間ほとんどメンテナンスされていませんでした。 ディストリビューションは古くPHPのバージョンも4系、したがってそのまま持っていくという選択肢はなく、AWS上に新規にインスタンスを構築することになります。 弊社にはAPI部分をPHPからRubyに移行する方針があるということもあり、Amazon Linux上にRubyで書き直したこの機能を移行するというのが妥当な線でした。 しかしアプリケーションの性質上Unicornはプロセスモデル的に適さないですし、そもそもこれだけの機能のためにアプリケーションサーバを用意するということにも違和感がありました。

そこであがってきたのが、mrubyでこの機能を実装しngx_mrubyで動かすという選択肢です。 mrubyであればRubyと(ほぼ)同じシンタックスで実装することができ、それをngx_mrubyで動かすことでウェブサーバがそのままアプリケーションサーバとして振舞うことができます。 開発者を多く確保できるmrubyと弊社での運用実績があるnginx、これらを使う旨を運用チームへ相談の末、このプランで行くことに決まりました。

このように置き換わるイメージです。 元々キャッシュをするように作られていなかったので、この機会にRedisによるキャッシュも入れました。 f:id:nextdeveloper:20160810122507p:plain ロゴ: Amazon S3, redis

ここからはmrubyngx_mrubyについてと、いかにこれらでこの機能を実装したかについて書いていきます。 本エントリを通してmruby + ngx_mrubyでアプリケーションを実装するという選択肢の現実味を感じていただければと思います。

続きを読む

本当に賃貸?!噂の超オシャレな賃貸マンション・ロイヤルアネックスに潜入!!HOME'Sデザイナーが感じたこと

f:id:homes_designers:20160711172547j:plain

こんにちは!新卒入社2年目デザイナーのカンバラとタカラベです。

2人とも、HOME'Sのサイト改修やノベルティの制作などをしております。デザインテクニックと合わせて、不動産業界の動向も日々勉強の毎日です!

そんな中、DIYに詳しい先輩デザイナーにお誘いいただいて、人気に火がついていると噂の『カスタマイズ賃貸』で最先端をいく賃貸マンション「ロイヤルアネックス」にご訪問させていただきました。

続きを読む

FIT 2016(情報科学技術フォーラム)@富山にて登壇・出展します

こんにちは、リッテルラボラトリーの清田です。

来たる9月7日(水)〜9日(金)に富山大学で開催される第15回情報科学技術フォーラム(FIT 2016)のイベント企画にて、リッテルラボラトリーの石田・清田が登壇することになりました。

あわせて、ネクストとしてブース出展も行います。

多くの方々のお越しをお待ちしております!

続きを読む

Zipkinを導入してみた(PHP編)

こんにちは。技術基盤部の磯野です。 先日に引き続きZipkinです。 今回は PHP + Symfony で動いている Webアプリケーションへのトレーサーの導入です。

前回の記事 → Zipkinを導入してみた(サーバー編)

  • 構成
  • 処理の流れ
  • 処理の流れを追跡するためのリクエストヘッダ
  • fluentdの設定
  • PHP(Symfony)側の実装
    • クライアントライブラリ
      • Hoopak
      • Apache Thrift
    • ソースコード
      • DI用設定ファイル(抜粋)
      • イベントリスナクラス
      • サービスコンテナクラス(イベントリスナにDIする用)
      • 足りない機能を補充するためのラッパークラス
      • WebAPI呼び出しのロギング追加
  • 出力

構成

PHPは非同期に処理ができないので直接Zipkinサーバーにに投げるのではなくローカルのfluentdを利用してできるだけ短時間で処理が終わるようにしています。

f:id:nextdeveloper:20160704145103p:plain 画像のアプリケーション・フレームワーク → Zipkin Symfony2 Fluentd Sinatra

続きを読む