こんにちは。
ホームズくんを描いたりしている"ママデザイナー"のモリです。
入社6年目。昨年出産をして、この4月に復職しました!
出産してもデザイナーとして働ける環境があることだけで、本当にありがたや、ありがたやですね。
そして、この夏。
3週間(週2日)在宅ワークしてみました!
在宅ワークをしてみて良かったこと、困ったことをお伝えします。
続きを読む
こんにちは。
ホームズくんを描いたりしている"ママデザイナー"のモリです。
入社6年目。昨年出産をして、この4月に復職しました!
出産してもデザイナーとして働ける環境があることだけで、本当にありがたや、ありがたやですね。
そして、この夏。
3週間(週2日)在宅ワークしてみました!
在宅ワークをしてみて良かったこと、困ったことをお伝えします。
続きを読む
こんにちは。
HOME'Sアプリのデザイナーのこばやしです。
Androidアプリを育てていくと、ひとつの課題に行き当たります。
アプリリソースサイズです。
機能追加、ダイナミックな画像表現などで、気づいたら「ゲームアプリ?」と思うほどリソースサイズが増えているかも…。
そんな時、ひょっとしたら劇的にスリム化できるかもしれない方法をご紹介します。
HOME'S Androidアプリでも実際にやった内容です。
====
Google deveroparsの記事「Google Play におけるアプリのダウンロード サイズの削減」に記載もあるWebPが今回紹介する内容です。
googledevjp.blogspot.jp
記事の一文に、
3. APK の構成要素のサイズを減らすことによる最適化: たとえば、JPEG ではなく WebP を使用するなど効率的なファイル形式を使ったり、未使用コードを削除するために Proguard を使用したりします。
とあります。
記事にもあるように、インストールする際にアプリサイズが大きいと通信量を気にしてしまい、それが要因で優れたアプリでもインストールされない、なんてこともあるかもしれません。
そこで今回、画像リソースをWebPに変換することでどのぐらいアプリリソースを削減できるのか。
そしてHOME'S Androidアプリにおいて、実際どのぐらいリソースを削減することができたのかをお話します。
Googleが開発した圧縮形式で、従来の形式よりもファイルサイズを小さくすることを目的としています。
Googleが持つVP8コーデックを用いたWebMという動画フォーマットをベースとしており、WebMの1フレームだけを切り出したものがWebPで、それをRIFFという軽量なコンテナに格納した形式になっています。
https://developers.google.com/speed/webp/
写真画像においても効果的に圧縮できるのが非常に強い特長だと思います。
※非可逆のWebPはAndroid OS 4.0以降でサポート、ロスレス圧縮のWebPは4.2.1以降でサポート
JPEGやPNGといったメジャーな画像保存形式のようにはまだ普及しておらず、現段階だとかなり限定的に効果を発揮する形式だといえます。
http://caniuse.com/#feat=webp
アプリ内で実際に使用しているPNG画像、それをWebP化した画像で比較してみます。
※WebPは表示させるためにブラウザで表示したものを撮影しています。容量はWebPのものを記載
WebP 2.88KB
png 6.73KB
このポーズのホームズくん、可愛い。
小さめのイラストですが、およそ半分に削減できています。
見栄えも変わりありません。
次は写真、複雑なビットマップ画像で試してみます。
WebP 27.4KB
PNG 560KB
先程のイラストより高い圧縮率となりました。
肉眼ではほとんど区別つかないですが、およそ1/20のサイズに…これはスゴい。
実際にアプリで見てみます。
before
after
意図したとおりに表示されてます。
大丈夫そうです。
Android studioのAnalyze APKを使い、容量が大きい画像をWebPに変更してみました。
すると…
13.2MBから6.3MBとおよresの容量が半分に。
半分です。
※2016年8月時点
画像リソースはアプリ全体の半数以上を占めていましたが、WebPを用いることで簡単に削減すること成功ができました。
画像の品質は下げたくない、けれど容量を使いすぎるのも…という課題に対しても効果的です。
アプリの表示速度や低スペック端末への配慮としても、一役買ってくれそうです。
可愛い名前なのにスゴいやつ!
iOS対応やブラウザの対応拡大が待ち遠しい。
実は以前にもWebPを試したことがありました。
しかし当時は挙動が安定していなく使用を断念しました。
最近は4.x系でもSVGをフルサポートするなど、Androidアプリ開発環境がグングン良くなっています。
そんな中で改めて試してみたWebPはAndroidアプリでリソースを削減する手段としてとてもおすすめです。
「Android Appにおいて、かつサポートしているOSバージョンが4.1.x以上の場合はおすすめ」といえるのではないかと思います。
ですが、これから普及していくであろう新しい規格のため、考慮すべき点もあります。
「WebPとは」のところで記載してある、サポート範囲と特長のAndroid OSバージョンによる制約を改めて確認し、上手に利用してみてください。
はじめまして!新卒入社1年目のミーコです。
初めてデザイナーズブログを書きます!よろしくお願いいたします。
今回は「ネクストのデザイナーってどんな人がいて、どんなことしてるんだろう?」や「新卒のデザイナーってなにするの?」というような就活セミナーや面接では聞けないであろう情報も含め、新卒1年目から見たネクストデザイナーの1日をモリモリ紹介いたします!
続きを読むはじめまして、技術基盤部の相原(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によるキャッシュも入れました。 ロゴ: Amazon S3, redis
ここからはmrubyとngx_mrubyについてと、いかにこれらでこの機能を実装したかについて書いていきます。 本エントリを通してmruby + ngx_mrubyでアプリケーションを実装するという選択肢の現実味を感じていただければと思います。
続きを読むこんにちは、リッテルラボラトリーの清田です。
来たる9月7日(水)〜9日(金)に富山大学で開催される第15回情報科学技術フォーラム(FIT 2016)のイベント企画にて、リッテルラボラトリーの石田・清田が登壇することになりました。
あわせて、ネクストとしてブース出展も行います。
多くの方々のお越しをお待ちしております!
続きを読むこんにちは。技術基盤部の磯野です。 先日に引き続きZipkinです。 今回は PHP + Symfony で動いている Webアプリケーションへのトレーサーの導入です。
前回の記事 → Zipkinを導入してみた(サーバー編)
PHPは非同期に処理ができないので直接Zipkinサーバーにに投げるのではなくローカルのfluentdを利用してできるだけ短時間で処理が終わるようにしています。
画像のアプリケーション・フレームワーク → Zipkin Symfony2 Fluentd Sinatra
続きを読む