開発・プログラミング」カテゴリーアーカイブ

Microsoftの新しい入力デバイス「Surface Dial」を自作Windowsアプリで使うには

開発担当の橋本孔明です。

昨年10月、Microsoftの発表会において、同社のフラグシップ タブレットPCとなるSurface Studioに加え、Surface Dialという新しい入力デバイスが発表されました。

オーディオ アンプのボリュームのような外観をしているSurface Dialは、主に回転入力を受け取って何らかのUI操作を行うためのデバイスですが、机の上に置いて使う通常の方式に加え、Surface Studio(およびシステム アップデートを行ったSurface BookとSurface Pro 4)の画面上に置いて使うことで、その位置に直接UI要素を表示し、直感的に操作できるというのが特徴です。

Microsoftのデモンストレーションでは、主にペイント系やベクター系のグラフィックス ツールと組み合わせ、ペンの太さや選択色といった操作コンテキストの切り替えに活用するストーリーが紹介されていました。

Surface Dialは、その名称や一部の紹介記事などにより、「対応するSurfaceシリーズと組み合わせないと使えない」という誤解をされている場合も見られるようですが、そのようなことはありません。Windows 10 Anniversary Update(バージョン1607)以降であれば他のコンピューターでも問題無く使用することができます。Surfaceシリーズ以外での制限事項は「画面上に置く」使い方ができないことだけです。

去る6月15日、Surface StudioとともにSurface Dialも日本での正規取り扱いが開始され、10,000円強という価格で国内でも入手できるようになりました。 続きを読む

カテゴリー: 開発・プログラミング | タグ: , , ,

64bit Windowsを前提とした32bitアプリケーション延命法 ~ LAAオプションで32bitアプリケーションのメモリ不足問題を解消

こんにちは。ウェブテクノロジの清水です。

Windowsアプリケーション開発者向けに、ちょっとしたTipsを紹介します。今回はVisual Studioの「LAAオプション」(LARGEADDRESSAWAREオプション、4GBオプション)という機能です。かなり便利な機能なのですが、知らない人も多いようです。

続きを読む

カテゴリー: 開発・プログラミング | タグ: , , | 2015/06/03 更新

Rubyを使って開発工数を短縮しよう

開発担当の佐藤Sです。

プログラマの皆さんに質問です。Rubyを使ったことはありますか?
プログラマであればRubyがどんなプログラミング言語なのか、知識としてはご存知のことと思います。ですが、非ウェブ系開発者だと、意外と使用経験のない方は多いのではないでしょうか。

続きを読む

カテゴリー: 開発・プログラミング | タグ: , | 2016/08/29 更新

Flash Playerのメモリ使用量を1/3に抑えるテクニック

ウェブテクノロジ開発部の西田です。

この記事では、主にモバイル機器向けFlashコンテンツを開発されている方々に向けて、Flash Playerでのメモリ使用量とSWFファイルのファイルサイズを抑える方法についてご紹介します。
同時に、Flashコンテンツに画像を組み込む際の注意点についても紹介します。

現在、日本で普及しているほとんどのフィーチャーフォン(いわゆるガラケー)にはFlash Liteが搭載されており、Androidでも2.2以降からはFlashが搭載されています。ソーシャルゲームをはじめ、グラフィカルでリッチなFlashコンテンツが日々増えてきていますが、それにともないSWFファイルのファイルサイズやFlash Playerのメモリ使用量が問題になってくることがしばしばあるのではないでしょうか。

1. Flash Playerのメモリ使用量が1/3になる!

まずは同じくらいのファイルサイズの画像(JPEG、PNG)を組み込んだSWFファイルを作成し、SWFファイルのファイルサイズとFlash Player(エミュレーター)のメモリ使用量にどれくらいの違いが出るかを比較してみました。
※画像はクリック・タップすると拡大されます。


  • JPEG
  • PNG-8 512x512 50KB
    PNG-8(透過なし)
  • PNG-8 512x512 alpha
    PNG-8(透過あり)

表1. JPEG/PNGのメモリ使用量・SWFファイルサイズの比較

フォーマット JPEG PNG-8(透過なし) PNG-8(透過あり)
画像サイズ 512×512pixel 512×512pixel 512×512pixel
画像ファイルサイズ 50,843 byte 51,503 byte 51,771 byte
SWFファイルサイズ 50,937 byte 49,743 byte 49,933 byte
メモリ使用量 1,202KB 388 KB 388 KB
  • 計測環境:Flash Lite3.0 色深度:32bit ディスプレイサイズ:240×320
  • このページで表示している画像は実際に使った画像を縮小して表示しています。各画像のリンク先が、この実験で使用した元画像です。

図1. JPEG/PNGのメモリ使用量・SWFファイルサイズの比較グラフ

 JPEG/PNGのメモリ使用量・SWFファイルサイズの比較グラフ

同程度のファイルサイズの画像を使用しても、PNGでは劇的にメモリ使用量が抑えられていることがわかります
だったらすべての画像をPNGにすればいいの? というとそういうわけにもいきません。
では、どのような場合にPNGを使えば良いのかを考えていきましょう。

2. まずは画像フォーマットのおさらいから

Flashやインターネットなどでは主にJPEG、GIF、PNGといった画像フォーマットが使われています。
ここでは、それぞれの画像フォーマットについておさらいをしておきましょう。

表2. JPEG、GIF、PNGの特徴

JPEG

GIF

PNG-8

PNG-24

PNG-32

圧縮方式

不可逆圧縮
(画像劣化あり)

可逆圧縮

可逆圧縮

可逆圧縮
(画像劣化なし)

可逆圧縮
(画像劣化なし)

色数

1677万色
(24bit)

1677万色中
256(8bit)

1677万色中
256(8bit)

1677万色
(24bit)

1677万色
(24bit)

透過
(アルファ)

不可

可能
(透明1色のみ)

可能
(アルファチャンネル)

不可

可能
(アルファチャンネル)

アニメーション

不可

可能

不可

不可

不可

 

それぞれの画像フォーマットの長所と短所も簡単にまとめておきましょう。

 

表3. JPEG、GIF、PNGの長所と短所

JPEG 長所 – 写真画像の圧縮に向いている
– 圧縮率が可変なので、低圧縮(高画質)から高圧縮(低画質)まで、用途によって選べる
短所 – 線画、アニメ調、ロゴ、画面キャプチャのような画像の圧縮には向いていない
– 非可逆圧縮のため、圧縮率を高くすると画質が劣化する
– 透過やアニメーションはできない
– 画像をメモリに展開したとき、1ピクセルあたり3バイト使用する(メモリ使用量大)
GIF 長所 – 線画、アニメ調、ロゴ、画面キャプチャのような画像の圧縮に向いている
– アニメーションができる
– 透明色が使える
– 画像をメモリに展開したとき、1ピクセルあたり1バイト使用する(メモリ使用量小)
短所 – 256色までしか表現できない
PNG 長所 – 線画、アニメ調、ロゴ、画面キャプチャのような画像の圧縮に向いている
– PNG-24/32(フルカラー)では、圧縮しても画像が劣化しない
– PNG-8(インデックスカラー…256色、16色など)にもPNG-24/32(フルカラー)にも対応できる(インデックスカラーに減色する際の品質によって結果が大きく左右されますが、「OPTPiX imésta」を使えば高品質の減色が可能です)
– アルファチャンネルを持つことができ、半透明の表現が可能
– PNG-8(インデックスカラー)の場合、画像をメモリに展開したとき、1ピクセルあたり1バイト使用する(メモリ使用量小)
短所 – PNG-24/32(フルカラー)ではJPEGよりもファイルサイズが大きくなる
– PNG-24/32(フルカラー)の場合、画像をメモリに展開したとき、1ピクセルあたり3バイト/4バイト使用する(メモリ使用量大)
– アニメーションできない

一般的には、写真などはJPEG、画像自体でアニメーションさせたいときはGIF、ロゴやボタンなどはGIFかPNGフォーマットが適しています。

3. ではモバイル機器向けのFlashでは何を使う?

それぞれの画像フォーマットには得意・不得意があるので、画像の使用用途や目的に応じて適切な画像フォーマットを選択する必要があります。
実際にFlash内に画像を組み込み、SWFファイルのメモリ使用量とファイルサイズを見てみましょう。

 

表4. 各画像フォーマット毎のSWFファイルサイズ・メモリ使用量の比較

JPEG 512x512 70% GIF 512x512 256color
フォーマット JPEG(画質 70) フォーマット GIF
画像サイズ 512×512pixel 画像サイズ 512×512pixel
画像ファイルサイズ 23,455 byte 画像ファイルサイズ 55,901 byte
SWFファイルサイズ 23,549 byte SWFファイルサイズ 49,743 byte
メモリ使用量 1,129KB メモリ使用量 388 KB

 

PNG 512x512 fullcolor PNG 512x512 256color
フォーマット PNG-24 フォーマット PNG-8
画像サイズ 512×512pixel 画像サイズ 512×512pixel
画像ファイルサイズ 142,427 byte 画像ファイルサイズ 51,503 byte
SWFファイルサイズ 165,015 byte SWFファイルサイズ 49,743 byte
メモリ使用量 1,267KB メモリ使用量 388 KB
  • 計測環境 Flash Lite3.0 色深度:32bit ディスプレイサイズ:240×320
  • 表示している画像は実際に使った画像を縮小しています。各画像のリンク先が、この実験で使用した元画像です。

画素数が大きくフルカラーで扱いたい画像の場合は、圧縮率を調整できるJPEGを使うとSWFファイルのサイズを抑えることができます。しかしながら、アニメ調の画像では、やはり画質が劣化してしまいメモリ使用量も大きくなります。

フルカラーにこだわらなくてもよい場合は、GIFかPNG-8を使えばメモリ使用量とSWFファイルサイズを抑えることができます。ただし、この場合は減色する際の品質が重要となってきます。「OPTPiX imésta」を使えば高い品質で減色することが可能です。

また、GIFでは単色での透過しかできずFlash内でそのままGIFアニメーションを使うこともできないため、色数を256色まで制限できる場合は、メモリ使用量とSWFファイルサイズを抑え、綺麗に透過させるにはPNG-8が有効です。

 

4. 画像圧縮設定にご注意を!

画像フォーマットや画質を適切に選択していても、Adobe Flash CSにPNGやGIFなどの画像を組み込んだ際に、自動的にJPEG圧縮されてしまうことがあります。ついつい陥りやすい問題ですので注意が必要です。

画像のプロパティ

 

Adobe Flash CSの「ライブラリ」からアイテムを選択し画像のプロパティを確認してみましょう。
大きな画像の場合、圧縮の項目が「写真画質(JPEG)」に設定されることがあります。
この場合、PNGやGIFを組み込もうとしてもJPEG圧縮されてしまい、画質が劣化した画像が表示されてしまいます。
せっかくターゲットに合わせて調整した綺麗な画像が、いつの間にか劣化して表示されてしまうということは不本意です。しかも、メモリ使用量も増加してしまいます。

画像のプロパティ

圧縮の項目を「劣化なし(PNG/GIF)」とした場合、PNGやGIFはJPEG圧縮されなくなり、ターゲットに合わせて調整した画像が意図通りに表示されるようになります。また、メモリ使用量も前述した通りに抑えることができます。

 

表5. 圧縮設定によるメモリ使用量SWFファイルサイズの比較

元画像のフォーマット PNG-8 PNG-8
元画像ファイルサイズ 51,503 byte 51,503 byte
画像サイズ 512×512pixel 512×512pixel
圧縮設定 写真画質(JPEG) 劣化なし(PNG/GIF)
SWFファイルサイズ 29,899 byte 49,743 byte
メモリ使用量 1,140 KB 388 KB
  • 計測環境 Flash Lite3.0 色深度:32bit ディスプレイサイズ:240×320

 

5. Flashの今後について

Adobeがモバイルブラウザー向けFlash Playerの開発を終了する、との報道もあり今後の動向が気になるところですが、実際のところ、まだフィーチャーフォンは多く使われており、Android機でもFlash Playerを搭載している機種がほとんどです。コンテンツを提供する業界でも、フィーチャーフォンユーザー向けのコンテンツを充実させる方向で進んでいるようです。

今回ご紹介した方法を参考に、軽くて快適なFlashコンテンツ作成の一助になれば幸いです。

カテゴリー: 開発・プログラミング | タグ: , , , , | 2016/08/25 更新

複数のMacでiPhone(iOS)アプリの開発を行うときの注意点

ウェブテクノロジ開発部の遠藤です。

先日、Unityを用いたiPhone(以下、iOS)アプリの開発環境を構築する機会がありまして、その過程でちょっとしたトラブルが起こりました。

1. 証明書をきちんと入れたのに認識されない!

その問題とは、1つのライセンスを用いて複数のMacでiOSアプリの開発環境を構築する際に発生するものです。
今回の記事では、この問題の解決方法についてご紹介したいと思います。

2. Xcode のインストール~証明書のインストール

iOSアプリのビルド環境を構築し、iOS実機上で動作検証するにはMacにXcodeをインストールしたあとに、証明書のインストールや認証などいくつかのステップが必要になります。

これらのステップに関する情報は既にネット上で簡単に見つけることができますのでここでは割愛します。

さて、一通りセットアップを終えたところで、いざビルドを試みると、

Xcode could not find a valid private key /
certificate pair for this profile in your keychain.

というエラーが発生しました。

オーガナイザで見たプロビジョニングのStatusには

Valid signing identity not found

とあります。

上記のエラーについて、ネット上でよく書かれているのが、デフォルトのキーチェーンが「ログイン」になっていないため、というものです。

この点については私の環境では問題ありませんでした。

3. 既存の証明書を2台目以降のMacにダウンロードして入れると…

あれこれ悩んでいたところ、問題は私が利用した証明書が、別のMac上で既に作成済みだったものであり、それをAppleの開発サイト経由でダウンロードして取り込んでいたために秘密鍵が含まれておらず、正しく認証することができなかった、ということのようです。

つまり1つのライセンス(Certificate)を用いて複数台のMacで開発を行う場合は、最初に認証したMac上にある秘密鍵が必要になる、ということでした。

このための手順は、“iPhone 証明書 複数台 Mac” といったキーワードで検索すれば先人の方々のお知恵を拝借できるので、ここも割愛させて頂きます。

そのお知恵を借りて早速「iPhone Developer: 名 姓 (HOGEHOGE)」という秘密鍵を一台目のMacから書き出し、2台目のMacに取り込んで見ましたが…

私の環境ではそれでも足りず…

4. 「iPhone Distribution: 会社名」も必要です

結果として、

iPhone Developer: 名 姓 (HOGEHOGE)
iPhone Distribution: 会社名

という2つの証明書ファイルを書き出して、取り込む必要がありました。

※「iPhone Distribution: 会社名」については個人で開発されている方には必要がないものかもしれません。

[ 正しく動作する証明書の例 ]

証明書に関する問題については以上です。

5. Unity からパブリッシュしたプロジェクトでのエラー

iOSアプリに関連してUnityプロジェクトに関しても少々触れたいと思います。

近年話題のマルチプラットフォームのゲームエンジンであるUnity 上でアプリを作成し、iOS 向けにパブリッシュする際にも、設定が正しくないと似たようなエラーが発生します。

「Player Settings…」の「Company Name, Product Name, Bundle Identifier」あたりの内容が、iOS の開発者ページで申請したものと合致していないと、Code Sign errorの類のエラーが発生します。

初めて環境を構築される方は、このあたりもチェックされるとよいと思います。

カテゴリー: 開発・プログラミング | タグ: , , , | 2016/08/25 更新