OPTPiX imesta」タグアーカイブ

スマートフォンアプリで、綺麗な画像を軽くして組み込む方法

ウェブテクノロジ開発部の山崎です。こんにちは。

今回は、スマートフォンアプリ(アンドロイド(Android)アプリ)と、iOSアプリ(iPhoneアプリ/iPadアプリ)で綺麗な画像を軽く扱いたい開発者の方のために、解決策をご紹介いたします。

※ 本エントリーはブログ掲載時点の情報をまとめたものです。将来的に仕様が変更になる可能性もあるのであらかじめご了承ください。

ファイルサイズの制限

さて、スマートフォンアプリでは、アプリケーションのファイルサイズに制限があります。「Android Market」ではアップロード可能なアプリの上限サイズが「50MBまで」と制限されていますし、

Android Market では50MBまで

Android Market では50MBまで

「App Store」では3G回線経由にてダウンロード可能なアプリの上限サイズは「20MBまで」と制限されています。

AppStoreでは20MBまで

AppStoreでは20MBまで

ちなみに、iOSでは、WiFi経由でダウンロード可能なアプリの上限サイズは2GBとのことです。

また、それぞれの端末のメモリストレージの量も現段階では「PCのように豊富にある」「湯水のように使える」とは言えない状況です。「Android Market」や「App Store」の制限もさることながら、アプリケーションは少しでも軽いほうがユーザーに喜ばれるのは確かです。

画像をキレイなまま軽く!

努力してソースコードを短くしてもアプリケーションのサイズが劇的に小さくなることはほとんど無いと言えるでしょう。

アプリケーションの中で大きくサイズを使っているのは「画像データ」なのです。

スマートフォンの画面の解像度は、昔のPCに匹敵するほど大きく(広く)なっています。最近は、WVGA:800×480以上の端末が増えています。この大きさの画像データを複数枚持つだけでアプリの容量はどんどん増えていきます。

画像の数を減らすことなく、アプリの容量を抑えようとして画像データを必要以上に圧縮すると画像内にモスキートノイズが増えてしまい、スマートフォンのキレイで広い画面のメリットを損なう結果になってしまいます。

画像は写真なのか、図表やイラストなのかをチェック!!

写真の画像はJPEG形式が最適です。キレイに小さく圧縮できます。しかし、図表やイラストの画像はJPEG形式で圧縮(保存)するとモスキートノイズだらけのひどい結果になります。

図表の画像を使う場合はPNG形式で圧縮(保存)してください。圧縮には減色で対応するとキレイな画像のまま軽くすることができます。

雑誌やパンフレットのように写真と図表や文字が混在しているような画像はあるか?

写真と図表が混在している画像は、JPEG形式?PNG形式?どちらで保存すればキレイなまま軽くできるでしょうか。

手間を惜しまないのであれば、写真の画像と図表の画像を分離するとよいでしょう。

次の図のように、写真の部分を切り出してJPEG形式で保存し、図表や文字の部分はPNG形式で保存します。そして、表示するときに1つの画像に見えるようにくっつけるわけです。

特にモスキートノイズの入りやすい文字周りはPNG形式で保存するとJPEG形式と同じバイトサイズにまで圧縮しても表示がクッキリとキレイになります。

しかし、この作業。技術や理論が理解できても実際にやってみるととても大変です。

特に、画像の枚数が多かったり、何度も改修がかかるような画像に対してこの作業を手でやるのは・・・コスト的にも品質的にも問題があります。

この作業を確実に全自動で計算&分割&保存してしまうのが「ハイブリッドフォーマット」で画像を保存できる「OPTPiX imesta 7 for Mobile & Social」です。

詳しくは「電子書籍・雑誌やコミックをキレイに!軽く!ハイブリッド画像作成ツール – OPTPiX imesta 7 for Mobile & Social」のページをご覧ください。

サンプルソースコードの提供

「・・・で、そのハイブリッド画像をアプリで表示するには、どうしたらいいの?」

アプリとして動作実績のあるアンドロイド(Android)アプリのサンプルソースコードと、iOSアプリ(iPhoneアプリ/iPadアプリ)のサンプルソースコードともにご用意しています。

「サンプルソースコードを参考にしたい」開発者の方はお問い合わせフォームからお問い合わせください。

カテゴリー: スマートフォン開発 | タグ: , , , , , , , , , , , , | 2018/08/01 更新

画像サイズの縮小に最適なソフト「OPTPiX imesta シリーズ」導入事例紹介

本日の「OPTPiX Labs Blog」では、画像サイズの縮小方法についてお伝えしたいと思います。

最近、スマートフォンがかなり市場に出回りスマートフォンのアプリが増えてきました。スマートフォンアプリ開発において、最近よく耳にするのが、アプリデータのサイズ縮小です。

スマートフォンアプリのアプリデータサイズを20MB以内に縮小することが、最終的なアプリの売れ行きに一役買うようです。

先月開催されたCEDEC の講演「忍者ロワイヤルの今までと今後」の中で当社の画像最適化ツール「OPTPiX imesta シリーズ」が特に画像サイズ縮小機能にフォーカスして紹介されました。

特にスマートフォン表示向けに画像サイズを縮小する際に有効というご紹介をいただきましたのでここではその内容をご紹介いたします。

こちらの講演での紹介内容のポイントは、画像サイズの軽量化です。

特にiPhone 向けのアプリケーションでは、アプリのサイズを「20MB以内」に抑えることが重要とされており、そのために、画像のインデックスカラー化、つまり「減色」を利用したとのことです。

忍者ロワイヤルでは、当社のOPTPiX imesta を利用していただくことで高品質な画像のままアプリケーションのサイズを「20MB 以内」に抑えることができたそうです。

特に「透過情報までインデックスカラーとして扱えるところ」が「ユニーク」だと紹介されました。

多くの画像サイズ縮小ソフトの中で、当社のOPTPiX imesta をご利用いただき画像品質を落とすことなく、画像サイズの縮小に効果を発揮したとのこと大変うれしく思います。

スマートフォン向けウェブサイトで採用した場合でも、画像サイズが縮小されるため表示の高速化、全体的な品質の向上が見込めます。

ぜひ無料トライアルサービスをご利用下さい。

OPTPiX imesta for Mobile &Socialの無料トライアルはこちら

なお、ご紹介したCEDECの講演「忍者ロワイヤルの今までと今後」の記事へのリンクはこちらです。

[4Gamer.net]「忍者ロワイヤルの今までと今後」

[Gigazine]「忍者ロワイヤルの今までと今後」

では、続いて”画像サイズの縮小”をテーマに次の事例を紹介します。

OPTPiX imesta 7 for Mobile &Social 導入事例

i-Mode黎明期から携帯コンテンツを手がけるA社様では携帯SNSコンテンツのアバターキャラクター、およびコンテンツ自体のフィーチャーフォン向け最適化に、長らくOPTPiX imesta 7 for Mobile & Socialをご利用いただいています。

ベースになるアバターキャラクターをある程度のまとまった単位で共通パレットを作成して減色。

加えて、アバターを彩るアイテムデータも同じく”OPTPiX imesta 7″の「共通パレット減色」を
使うことで、画像データのサイズを縮小化。

結果、コンテンツ全体のサイズと、データ転送量の節約に効果を発揮したとのこと。

また、同サービスのスマートフォン対応では、スマートフォンの高解像度化に合わせて大元となった画像データを再度リサイズ。

フルカラーが使える端末とは言えキャリアによっては3G回線がフルレートでないこともしばしば。

そこで、”OPTPiX imesta 7″の「アルファチャンネル対応減色」機能を使い、フルカラーと見分けがつかないクォリティの画像を用意し、無事にサービスを開始することができました。

3週間おきのアイテムリリースも、デザイナーの手を煩わせることなく誰でもマウスをクリックするだけで実行できるようプロジェクトのスリム化に成功。

およそ1人月のコストダウンにも貢献したとのことです。

なお、OPTPiX imesta for Mobile & Scoial は以下のページをご覧ください。

OPTPiX imesta for Mobile & Socialの詳細はこちら

OPTPiX imesta シリーズには姉妹製品もあります。当社の製品一覧は以下のページをご覧ください。

OPTPiX imesta シリーズの姉妹製品はこちら

カテゴリー: OPTPiX imesta | タグ: , , , , , , , , , , , , , | 2018/08/01 更新

スマートフォンに大事なのは「ピクセルサイズ」じゃなくて「ファイルサイズ」です

こんにちは、営業部の嶋です。

ついに、という感じで新しいiPhoneが発表されました。事前の予測では「iPhone5が出る!」という話でしたが蓋を開けてみれば「iPhone4S」という今のモデルのリファインモデル。発表後はAppleの株価も下げたりしたそうですが、リファインとはいえ「デュアルコアのCPU」「8メガピクセルの顔検出機能付きカメラ」「1080pのHDビデオ撮影」「64GBモデルの追加」など、リファインという言葉が果たして適切なのか、というくらいのパワーアップを遂げています。また、従来のソフトバンクからだけではなく、auからも発売されることで話題となりました。

しかし、端末そのものは大幅にパワーアップしているものの、通信回線は従来の3G回線のインフラを利用することになります。

スマートフォン用サイトにPCサイトの画像を流用しているコンテンツはかなりありますが、PC用の画像はファイルサイズが大きい物も多く、いざページを見ようと思うと表示されるまでに結構時間がかかってしまうこともあります。将来的には携帯電話のデータ通信が従量課金制になってしまうかもしれない、という話もあって、携帯電話やスマートフォン向けのサイトには、専用の画像というものをきちんと用意してコンテンツ展開を図りたいという声もよく耳にします。

「でも、携帯用サイトの画像を別で作るとなると色々手間もかかるし、そもそもファイルサイズを小さくしたら画質が悪くなっちゃうでしょ?」

そこで役立つソフトウェアが、OPTPiX imesta 7 for Mobile & Socialです。

OPTPiX imesta 7 for Mobile & Socialには携帯電話の機種毎に最適な画像を出力するための「機器情報」が登録されています。この情報はインターネット経由でアップデートされ、携帯電話やスマートフォンに最適な画像を簡単操作で出力することができます。

また、自分で任意の画像サイズやファイルサイズを指定し、機器情報として登録することもできるので、「960×640ピクセル」で「200KB以内のJPEG」で出力、とか「320×200ピクセル」で「256色のGIF」というように画像のピクセルサイズやファイルサイズ、色数など細かな指定をしてその指定範囲に収まる画像を自動生成する、ということも可能です。

例えば下の2枚の画像。いずれもピクセルサイズは同じPNGファイルですが、左はオリジナル、右は「256KB以内に収める」という設定で色数を減らしたものです。
クリックするとそれぞれ別の窓で表示されますので、比較してみてください。

686×960 24bit(フルカラー) 835KB 686×960 237色 249KB

いかがでしょうか?ファイルサイズを約70%削減したにも関わらずほとんど変わらない品質の画像を実現しています。これがOPTPiX imestaシリーズが長年培ってきた減色技術です。

この機能を活用することで、高品質のまま、スマートフォン向けや携帯電話向けサイトの全体の容量を抑えることが可能になります。また、転送するデータが少ないということは、サイトそのものが軽い、ということでもあります。サクサク見られるサイトはユーザーのコンバージョンの向上にも繋がります。

OPTPiX imestaはすぐに使える1ヶ月フルトライアルをご用意しております。上記の減色はあくまで一例です。サクサク見られるスマートフォンサイトの構築に、OPTPiX imesta 7 for Mobile & Socialを是非ご活用ください。

OPTPiX imesta 7 for Mobile & Social 製品ページ
OPTPiX imesta 7 for Mobile &ampl Social トライアルフォーム

カテゴリー: OPTPiX imesta | タグ: , , , , , , , | 2018/12/06 更新

OPTPiX iMageStudio 6 for Mobile Contentsがバージョンアップします!

こんにちは、ソリューション営業部の嶋です。

続々と出てくる携帯の新機種情報。今年の春くらいからでしょうか、リリースされる端末はAndroid端末が中心となり、気が付けばフィーチャーフォンのラインナップのほうが少なくなっている状態に。コンテンツを提供する側も大急ぎでスマートフォン対応を進めているのではないでしょうか。

とはいえ、スマートフォンはフィーチャーフォンとは勝手が違います。特にアプリの開発にあたっては全く別物と言ってもいいくらいです。画像のファイルサイズに悩まされたり、画像処理の関係で十分な処理速度が得られなかったり……。

そんな、スマートフォンならではのお悩みを解決すべく、OPTPiX iMageStudio 6 for Mobile Contentsがバージョンアップ。新たに「OPTPiX imesta 7 for Mobile & Social」と名称も変わり、スマートフォン向けのサイト製作や、スマートフォンアプリ開発に効果的な機能を搭載しました。

アルファチャンネル付き画像の減色に対応

OPTPiX imesta 7 for Mobile Contents アルファチャンネル対応減色
半透明の画像には必須の「アルファチャンネル」ですが、フルカラーのアルファチャンネル付き画像はとかくファイルサイズが大きくなりがち。OPTPiX imesta for Mobile & Socialではこのアルファチャンネル付き画像の減色に対応、美しい画像を維持しつつファイルサイズを最大1/4程度まで小さくすることができます。

スマートフォンの機種情報も配信開始

iPhone4、GALAXY S、Xperia Arcなどのスマートフォンに最適な画像を自動で出力できる機種情報の配信もスタート。アプリだけでなく、スマートフォン向けサイトの製作の効率がアップします。

端末自身のスペックも高く、メモリも豊富にあるため「フルカラーの画像をそのまま使っても大丈夫」と思われがちなスマートフォン。でも、PCと同じようにサイトやアプリを作っていませんか?

Webコンテンツも、アプリも、ファイルサイズの大きな画像をそのまま使ってしまうと、「もっさり」してしまいます。コンバージョンやアプリの評価にだって、影響が出てきます。

画像の最適化で3G回線でも快適なサイトを。
どんな端末でもサクサク動くアプリを。

OPTPiX imesta 7 for Mobile & Socialではすべての機能を1ヶ月間お試しいただけるフルトライアルもご用意しています。詳細はOPTPiX imesta 7 for Mobile & Socialのページをご覧ください。

カテゴリー: OPTPiX imesta | タグ: , | 2018/07/03 更新

CEDEC2011、ご来場ありがとーございました!

腰と足とその存在が痛い。ソリューション営業部の浅井でございます。
9/6~9/8までゲーム業界関係者の聖地”パシフィコ横浜”にて開催されました素敵な祭典『CEDEC』の件。お陰様で無事に、しかも大盛況のうちに出展終了、いたしました。

今回のテーマは話題の次世代ゲーム機”PlayStation® Vita”、また新たなプラットフォームとして注目を浴びるスマートフォン。この2つに狙いを定めまして、弊社の画像最適化プロダクトの新製品『OPTPiX imesta 7 for PlayStation® Vita”、および2Dアニメーション作成ツール 『SpriteStudio』、更に今話題のゲーム開発ミドルウェア”Unity”上に『SpriteStudio』で作成したアニメーションデータを取り込んじゃうアセット『SpriteStudio for Unity(仮称)』を展示。

SpriteStudioの採用事例に興味津々なお客様

・・・したんですが、ご来場いただくお客様の注目をかっさらったのは『SpriteStudio for Unity(仮称)』!
同じく弊社製品の『コミPo!』のキャラクター、”コミポちゃん”をデモ用素材として動かしていたせいなのか、足を止めてくださるお客様が多数。曰く、

『このドット絵がここまでなめらかに動くの?』
『このアニメーションの構造は?』
『スマートフォン実機に出力した時のファイルサイズは? 重たくない?』

などなど・・・ご安心くださいッ! 何しろこれからチューニングしますッ!

みたいな。
あとシャツの襟を強烈に立てた外人さんがお越しになって弊社ブース前に座り込んで”SpriteStudio for Unity(仮称)”について熱く質問してくるのでアラヤダどちら様かしらー、とか思ったらなんと”Unity”のCEO! いやはや弊社ブースに語学が堪能な者がおらず、しどろもどろに対応することになり大変恐縮・・・でしたが、その襟同様にかなりハイテンションにお褒めいただきました。

ともあれ、これまで多くのユーザー様各社に頂戴しました”採用事例”、こちらを展示していたお陰で『SpriteStudio』が如何に汎用的なアニメーションデータを作れるツールなのか、そしてミドルウェアだけでなくいろいろな開発環境に対して親和性の高いツールであるコトを多くの方々に知ってもらえる良い機会になったのは確か。ちょうど今回のCEDEC2011会場では、『SpriteStudio』をダイーブお安く購入できる限定割引チラシを配布していたこともあって、皆様『ひとまず試したい』と思っていただけたのが何よりの幸い。
改めて弊社一同、気を引き締めて機能強化だとか改善、新製品開発に打ち込むことで、ゲーム業界が『より楽に』素晴らしいゲームを作ることに集中できるよう、がんばっていく所存でございます。

ということで弊社ブースだけでなく、CEDEC2011に起こし下さいました方々、本当にありがとうございました。

ところでニコニコ生放送にうっかり出演したりしていい感じに生き恥を晒したワケですが。

 

ニコ生に出演してみた

ニコ生に出演してみた。ついでに”OPTPiX imesta 7”で16色に減色してみた。

っていうかね、髪型についてのどーのこーのなコメントがね、なんか気になったっつー。

カテゴリー: イベント | タグ: , , , , , , , , , | 2018/12/06 更新