OPTPiX Labs」カテゴリーアーカイブ

オレオレ認証局の作り方~SSL証明書を無料で作る方法 on CentOS 5

ウェブテクノロジのサーバやネットワークのお守りをしている yone です。今後、社内で実際に使っているソフトウェア・設定・構成などの豆知識のご紹介をしていきたいと思っています。巷にある情報の再掲になりますが、実稼働事例の一つとしてご参考になれば幸いです。

1. お金のかかる証明書は要らない

HTTPS を使ったウェブサイトを立ち上げるとき、SSL サーバ証明書屋さんからサーバ証明書を購入するのが普通です。

ところが、会社内や特定のメンバー内だけで利用するサーバであれば、必ずしも証明書屋さんから証明書を購入する必要はないのです。

今回は、証明書屋さんから買わずに自前で証明書屋さんを作って自前で証明書を発行し、HTTPS サイトを立ち上げる方法をご紹介します。

その証明書の正式名称は、自己署名証明書ですが、本稿ではオレオレ証明書と表記することにします。(笑)
試しに、「オレオレ証明書」で検索してみてください。ジャーゴンとして、意外と広く使われているようです。

同様に、自前の証明書屋さんはオレオレ認証局と表記します。こちらも正式な名称ではありません。

2. SSL/TLS とはなんぞや

ウェブサイトの URL の先頭が、https:// となっている場合、SSL または TLS を利用しています。このときの主な特徴は下記のようになります。

  1. 暗号化
  2. サーバ認証
  3. 改竄検出

証明書屋さんへお金を払って証明書を買うのはなぜでしょうか。それは、2番目のサーバ認証のためです。このサーバは本物だぞと、証明書屋さんが太鼓判を押しているのです。

特定のメンバー内だけで使う場合、事前にオレオレ証明書を「この証明書は本物や!」と配布しておけば、証明書屋さんから購入したサーバ証明書と同様に使えちゃったりします。

不特定多数がアクセスするウェブサイトに使うのは不適切です。諦めて、証明書屋さんから購入しましょう。

3. オレオレ証明書を作ろう

certificate verify failed

サーバー証明書エラーの画面

実は CentOS 5 の場合、mod_ssl パッケージをインストールするとオレオレ証明書で稼動状態になります。が、そのままアクセスすると警告を表示してしまいます。

この難局に立ち向かう術は2つあります。

  1. サーバ証明書が正しいものだとし、PCに証明書を登録する
  2. 自前の認証局 (ルート CA) を用意し、その認証局がサーバ証明書を発行する。PC に自前の認証局を登録する

サーバの数が多くないのであれば前者でもよいのですが、いくつもいくつもある場合は認証局を作ってしまいましょう。認証局の登録を一回行えば、他の登録作業はなくなります。

4. ルート CA 構築

ここでは CentOS5 上で新規構築します。一度だけの実施です。下記は、exampleCA という名称で作成した例です。

# cd /etc/pki
# mkdir exampleCA
# cp tls/misc/CA exampleCA/
# cp tls/openssl.cnf exampleCA/
# echo 01 > exampleCA/crlnumber

/etc/pki/exampleCA/CA ファイルを修正します。

SSLEAY_CONFIG="-config /etc/pki/exampleCA/openssl.cnf"   ← 追加
DAYS="-days 365"        # 1 year
CADAYS="-days 1095"     # 3 years
REQ="openssl req $SSLEAY_CONFIG"
CA="openssl ca $SSLEAY_CONFIG"
VERIFY="openssl verify"
X509="openssl x509"

CATOP=/etc/pki/exampleCA   ← 修正
(中略)
-newca)
(中略)
    $CA -out ${CATOP}/$CACERT $CADAYS -batch \
        -extensions v3_ca \   ← 追加
        -keyfile ${CATOP}/private/$CAKEY -selfsign \
        -infiles ${CATOP}/$CAREQ

/etc/pki/exampleCA/openssl.cnf ファイルを修正します。

[ CA_default ]
dir             = /etc/pki/exampleCA    # Where everything is kept   ← 修正
(中略)
[ req_distinguished_name ]
countryName                    = Country Name (2 letter code)
countryName_default            = JP   ←修正
countryName_min                = 2
countryName_max                = 2

stateOrProvinceName            = State or Province Name (full name)
stateOrProvinceName_default    = Tokyo   ←修正

localityName                   = Locality Name (eg, city)
localityName_default           = Toshima-ku   ←修正

0.organizationName             = Organization Name (eg, company)
0.organizationName_default     = Example Corp.   ←修正
(中略)
[ usr_cert ]
basicConstraints=CA:FALSE
keyUsage = digitalSignature, keyEncipherment   ←追加
extendedKeyUsage = serverAuth   ←追加
# nsComment                    = "OpenSSL Generated Certificate"   ←コメントアウト
subjectKeyIdentifier=hash
authorityKeyIdentifier=keyid,issuer
(中略)
[ v3_ca ]
keyUsage = cRLSign, keyCertSign   ←コメント削除

秘密鍵・公開鍵・自己署名証明書を生成します。

# cd /etc/pki/exampleCA
# ./CA -newca
mkdir: cannot create directory `/etc/pki/exampleCA': File exists
CA certificate filename (or enter to create)
(そのままEnter)
Making CA certificate ...
Generating a 1024 bit RSA private key
...++++++
...........++++++
writing new private key to '/etc/pki/exampleCA/private/./cakey.pem'
Enter PEM pass phrase:CAパスフレーズを入力
Verifying - Enter PEM pass phrase:CAパスフレーズを入力
-----
You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.
-----
Country Name (2 letter code) [JP]:
State or Province Name (full name) [Tokyo]:
Locality Name (eg, city) [Toshima-ku]:
Organization Name (eg, company) [Example Corp.]:
Organizational Unit Name (eg, section) []:
Common Name (eg, your name or your server's hostname) []:example CA
Email Address []:

Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []:
An optional company name []:
Using configuration from /etc/pki/exampleCA/openssl.cnf
Enter pass phrase for /etc/pki/exampleCA/private/./cakey.pem:CAパスフレーズを入力
Check that the request matches the signature
Signature ok
Certificate Details:
        Serial Number: 0 (0x0)
        Validity
            Not Before: Aug  1 10:34:25 2007 GMT
            Not After : Jul 31 10:34:25 2010 GMT
        Subject:
            countryName               = JP
            stateOrProvinceName       = Tokyo
            organizationName          = Example Corp.
            commonName                = example CA
        X509v3 extensions:
            X509v3 Subject Key Identifier:
                xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx
            X509v3 Authority Key Identifier:
                keyid:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx
                DirName:/C=JP/ST=Tokyo/O=Example Corp./CN=Example CA
                serial:00

            X509v3 Basic Constraints:
                CA:TRUE
            X509v3 Key Usage:
                Certificate Sign, CRL Sign
Certificate is to be certified until Jul 31 10:34:25 2010 GMT (1095 days)

Write out database with 1 new entries
Data Base Updated
# mv careq.pem certs/00.pem
# openssl ca -config openssl.cnf -gencrl -out crl.pem

これで準備完了です。

ルート CA ファイル
説明 ファイル名
CA 証明書 cacert.pem, newcerts/00.pem
CA 秘密鍵 private/cakey.pem
CA 証明書発行要求 certs/00.pem

5. サーバ証明書を発行

ではさっそく、サーバ証明書を作ってみます。https://www.example.jp/ 用の証明書の発行例です。

# cd /etc/pki/exampleCA
# ./CA -newreq
Generating a 1024 bit RSA private key
.........++++++
...........................++++++
writing new private key to 'newreq.pem'
Enter PEM pass phrase:パスフレーズを入力
Verifying - Enter PEM pass phrase:パスフレーズを入力
-----
You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.
-----
Country Name (2 letter code) [JP]:
State or Province Name (full name) [Tokyo]:
Locality Name (eg, city) [Toshima-ku]:
Organization Name (eg, company) [Example Corp.]:
Organizational Unit Name (eg, section) []:
Common Name (eg, YOUR name) []:www.example.jp
Email Address []:

Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []:
An optional company name []:
Request is in newreq.pem, private key is in newkey.pem

# ./CA -sign
Using configuration from /etc/pki/exampleCA/openssl.cnf
Enter pass phrase for /etc/pki/exampleCA/private/cakey.pem:CAパスフレーズを入力
Check that the request matches the signature
Signature ok
Certificate Details:
        Serial Number: 3 (0x3)
(中略)
Certificate is to be certified until Sep 30 07:12:47 2005 GMT (365 days)
Sign the certificate? [y/n]:y

1 out of 1 certificate requests certified, commit? [y/n]y
Write out database with 1 new entries
Data Base Updated
Certificate:
    Data:
        Version: 3 (0x2)
(中略)
Signed certificate is in newcert.pem
# ls newcerts
01.pem  02.pem  03.pem  (←一番大きな値のファイルを探す)
# mv newreq.pem certs/03.pem (←探したファイル名を入れる)
# mv newkey.pem private/03.pem (←探したファイル名を入れる)
# rm newcert.pem
# openssl x509 -in newcerts/03.pem -out www.crt
# openssl rsa -in private/03.pem -out www.key
Enter pass phrase for private/03.pem:パスフレーズを入力

これで、www.example.jp の SSL サーバ証明書ができました。

サーバ証明書ファイル
mod_ssl ディレクティブ ファイル
SSLCertificateFile www.crt
SSLCertificateKeyFile www.key

6. PC へオレオレ認証局証明書をインポート

このまま https://www.example.jp/ へアクセスしても、証明書エラーになってしまいます。
今回構築したルート CA を信頼すると、その CA が署名した www.example.jp も正しい証明書と認識するようになります。

Internet Explorer へ登録する方法を紹介します。Mozilla Firefox 等の場合は、それぞれのソフトウェア内で証明書を登録してください。

  1. コントロールパネル の インターネットオプション を開きます
    • Internet Explorer から、ツール – インターネットオプション を選択しても同じです
  2. コンテンツ タブを開きます
  3. [証明書] ボタンを押下します
  4. [インポート(I)…] ボタンを押下します。ウィザード画面になります。
  5. インポートするファイル名は、cacert.pem の拡張子を .crt へ変えたものです
    • インポートする証明書ファイルは、なるべく安全な手段でコピーしてください
  6. 証明書ストアは、信頼されたルート証明機関 へ登録
  7. セキュリティ警告が表示されたら、よぉく読んでインストールします
    • 警告にあるように大きな効力を持たせるので、十分注意
  8. インポートが成功すると、信頼されたルート証明機関タブを見ると VeriSign などに混じり、Example CA も表示されています。
信頼されたルート証明機関

信頼されたルート証明機関

これでめでたく、https://www.example.jp/ を警告なしに表示することができます。

7. さらなる証明書の力の証明

オレオレ認証局が力を発揮するのは、HTTPS だけではありません。私のところでは下記の用途で使っています。

  1. ウェブサーバ証明書 (HTTPS)
  2. メイルサーバ証明書 (SMTPS, IMAPS, POP3S)
  3. クライアント証明書
    • ウェブ
    • Subversion

SSL あるところ、ほとんどのところで活躍できます。

カテゴリー: サーバー管理 | タグ: , , , | 2020/06/16 更新

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

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

今回は、スマートフォンアプリ(アンドロイド(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アプリ)のサンプルソースコードともにご用意しています。

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

カテゴリー: スマートフォン開発 | タグ: , , , , , , , , , , , , | 2020/06/16 更新

複数の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の類のエラーが発生します。

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

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

RGB565, RGB555形式の組み込み機器用画像の正しい作成方法(1)

ウェブテクノロジで、組み込み分野の営業を担当している(こともある)小高です。

組み込み機器を開発されているお客様、特にデザイン部門の方とやりとりしていると、しばしばいただく質問があります。「ソフト開発部門から、組み込み機器に内蔵する画像を作るときに使っても良いRGB値の一覧を渡されたけれど、どうやって画像を作ればいいですか?」というものです。

この記事では、「組み込み機器向け画像で、特定のRGB値しか使えない理由」の解説を中心に、組み込み機器向け画像を作るときの注意点とその解決方法についても軽く触れています。

デザイナーさんがこれらを理解していれば、ソフト開発者とのコミュニケーションで、デザインサイドの意向をよりスムーズに伝えられるようになるはずです。この記事が、美しいGUI表現を実現するための一助となれば幸いです。


1. まずはおさらいから

組み込み機器のディスプレイでは、コスト等の制約のために、RGB565形式やRGB555形式などの表示デバイスが良く使われます(以下では、説明を簡単にするために、RGB555の場合を例にとります)。

一方、機器に組み込む画像は、RGB888形式のPC(Macintosh含む)で制作していると思います。

PCで通常使われているRGB888形式では、RGB各チャネルを8bitで表現しています。28=256 なので、0~255;16進数で00h~FFhの値で256階調を表現しています。RGB値0は黒、255は一番明るい赤、または緑、または青です。

組み込み機器で使われるRGB555形式では、RGB各チャネルを5bit, 5bit 5bitで表現しています。25=32なので、0~31;16進数で00h~1Fhの値で32階調を表現しています。RGB値0は黒、31は一番明るい赤、または緑、または青です。

グラフ1: 8bit=256階調と5bit=32階調

グラフ1: 8bit=256階調と5bit=32階調

RGB888の画像をRGB555表示の機器で使用する場合は、RGB値の下位3bitを切り捨てた値を使うことになります(RGB565であれば、RとBの下位3bit、Gの下位2bitを切り捨てます)。

表1: RGB8bit値をRGB5bit値に変換

表1: RGB8bit値をRGB5bit値に変換


2. 落とし穴に注意

ところが、階調が違うということには落とし穴があるのです。RGB888環境で作った画像を実機にそのまま持っていくと、こんな現象が起こります(画像1)。

画像の中央に、同心円状のバンディング(マッハバンド)が生じていて、美しくありません。また、同じ明るさの色が使えるわけではないので、全体の色調も微妙に変化しています。


元画像

RGB888環境で作った画像をRGB555の実機で表示した場合

実機に画像データを組み込んでから初めてこのような現象に気づくと、大きな手戻りが発生して、開発工程に悪影響が生じてしまいます。

画面デザインの際は、あらかじめPC上でなるべく実機に近い条件でプレビューしておくことで「こんなはずじゃなかった」を防ぐことができます。


3. RGB565(RGB555)をPC上でプレビューする

OPTPiX imésta X-MP を使うと、PC上でRGB565(RGB555)の実機で表示した状態をシミュレート表示することができます。

画像2: OPTPiX iméstaで組み込み機器上の表示をシミュレートする方法

画像2: OPTPiX iméstaで組み込み機器上の表示をシミュレートする方法

OPTPiX imésta X-MP で画像を読み込み、「イメージ(I)」→「イメージ変換(W)…」で上記ダイアログが出ます。

実機のRGB形式に合わせて、RGB565, RGB555などを選択します。レンダリング処理は「誤差拡散なし(O)」、「RGB値を正規化する(@)」をONにして、[OK]を押します。

すると、画像のRGB値を全て5bit階調(32階調)に変換します(RGB565の場合は、Gの値のみ6bit階調(64階調))。

このため、RGB565, RGB555などの機器で表示した状態をPC上でシミュレート表示することができるわけです。

画像1, 画像2では、同心円状のバンディング(マッハバンド)が出ていますが、OPTPiX imésta X-MP を使うと、バンディングを抑制することができます。抑制する方法と仕組みについては、OPTPiX imésta 7 for Amusement & Embeddedのページに詳しく記載していますので、ぜひご覧ください。

ところで、画像2のダイアログに「RGB値を正規化する(@)」というチェックボックスがありますが、これが、組み込み機器向け画像で特定のRGB値しか使えない理由の鍵を握っています。


4. 組み込み機器向け画像で、特定のRGB値しか使えない理由~正規化とは

第3節では、「RGB値を正規化する(@)」をONにしてプレビューすると書きました。それでは、OFFにするとどうなるのでしょうか。ONにして変換した画像と、OFFにして変換した画像比べてみます。


正規化なし

正規化あり

微妙に、ではありますが、明るさが変化していることがおわかりになると思います。

正規化ONと正規化OFFでは、RGB値には次のような違いがあります。

表2: 5bit階調のRGB値を、PCで表示するときのRGB値一覧(正規化なし、あり)

表2: 5bit階調のRGB値を、PCで表示するときのRGB値一覧(正規化なし、あり)

第3節の後半に「画像のRGB値を全て5bit階調(32階調)に変換します」と書きましたが、PC上で画像をハンドリングしている間は、RGB値として表1にあるような0~31の範囲を使うのではなく、表2のような値に変換します。RGB値が0~31の画像をPCに表示しても、真っ暗でなにが表示されているのかわからなくなってしまうからです。

普通に考えれば、32階調に変換するのであれば、表2のなかの「正規化なし」のRGB値を使えば良さそうです。ところが、この表をよく見ると、最大輝度を表す最後の行の値が、F8(248)になっています。つまり、最大輝度がFF(255)ではなくなってしまうのです。「正規化あり」では、最大輝度が8bit階調の時と同じFF(255)になっています。これが、画像3の明度の違いの原因です。正規化を行うと、最大輝度を256階調の場合と同じに揃えるために、全体的に、均等に、値をシフトします。

さて、ソフト開発部門から渡された「使っても良いRGB値の一覧」は、表2の「正規化あり」「正規化なし」のどちらかの場合がほとんどのはずです。渡された値の一覧表を見て、OPTPiX iméstaの設定を行えば大丈夫です。

実は、正規化にはもう一つ方式があって値が少し異なるのですが、それはまた後日、このブログで紹介しようと思っています。

もう一つの正規化方式を、「RGB565, RGB555形式の組み込み機器用画像の正しい作成方法(2)」でご紹介しましたので、そちらもあわせてご覧下さい。

5. 実は、組み込み機器向け画像で特定のRGB値しか使えない、わけではありません

実機に画像を組み込むとき、最終的にはRGB値として表1の値が使われます。つまり、正規化は、してもしなくても、実機での表示結果には変化がありません。実は、ハードウェア的に特定のRGB値しか使えないというわけではないのです。正規化は、PC上で画像をハンドリングするときの利便性(色再現性の向上)のために行う処理なのですが、ハードウェア寄りの話のため、ソフト開発者の方でも、そのあたりを詳しく把握できていない場合が多いようです。

以上、デザイナーさんにとっては若干ややこしいお話で恐縮ですが、ご理解いただけましたでしょうか。

わかりにくい点などありましたら、コメント欄でご指摘いただければ幸いです。

2012年4月5日加筆

続きのエントリーを公開しました。下記のリンクからどうぞ。

RGB565, RGB555形式の組み込み機器用画像の正しい作成方法(2)

カテゴリー: 画像形式 | タグ: , | 2020/06/16 更新

モノクロ(白黒)電子書籍(eBook)の容量を小さくする方法

こんにちは。開発部の山崎です。

今回は、モノクロ(白黒)画像と電子書籍(特にPDF)の関係の話を書いてみたいと思います。
内容は少し濃いかも・・・でも、普通の人でも理解できるようにがんばって書いていきます。

さて、コミックス(マンガ)などを電子書籍にするとき、やはり少しでも
キレイに!そして少しでも軽く!(容量を小さく!)したいものです。

特にコミックスなどのモノクロが中心のコンテンツを電子書籍化する際に、
キレイで!軽い!電子書籍に仕上げるポイントについて書いていきます。

ポイントは3つあります。

  1. グレースケール化で小さく!軽く!
  2. 減色で小さく!軽く!
  3. 電子書籍(PDF)も小さく!軽く!

ポイント1:グレースケール化で小さく!軽く!

スキャン画像やDTP出力など、一般的な画像ファイルは、特に指定をしない限り
フルカラーフォーマットになっている場合が多く、特に、色の無い、
白黒とグレーしか使っていない画像なのにフルカラーで保存されているケースがあります
(スキャナによってはグレースケールに変換(モノクロ化)して出力する機能がついている
場合もあります)。

カラーを使っていないのにフルカラーの画像として保存すると、
必要以上に大きなサイズの画像ファイルになります。

フルカラーの情報を保存するにはモノクロの情報を保存するよりも3倍のデータ量を使います。
理論的にはフルカラーの画像をグレースケール化するだけで画像の容量が3分の1になるということです。
このことは、JPEG画像であっても(YUV→Y)、PNG画像であっても(RGB→Y)同じと言えます。
圧縮率を変えなくても、保存のオプションを変えるだけでファイルを小さくできるのです。

(一般的に、JPEGの圧縮オプションは90とか80とか圧縮しますが、
ここではJPEGもPNGも圧縮率は変えずに保存時のモードをフルカラーからグレースケールに
変えたときの変化を見てみます。圧縮に関しては、ポイント2で触れます)

たとえば、以下の画像はJPEGファイルですが、圧縮オプションは100でほぼ無圧縮で
グレースケールのオプションのみON/OFFしてみました。

ファイル フルカラー(KB) グレースケール(KB) 割合(%)
プリングルス
子供っぽい日常より)
254 248 96.9%
通販サイト
酔った!買った!少し後悔・・・より)
299 293 98.0%
凛子
ラブプラスな日々より)
314 309 98.4%

 

・・・失礼しました。
約98%と、思ったほど変化がありませんでした。
2~3%くらいの違いしかありませんね。

JPEG画像の圧縮アルゴリズムの場合、モノクロ画像はUVの値がすべて0になるので、
フルカラーであってもうまく圧縮されているということなのでしょう。

では、気を取り直してPNG画像ではどうでしょうか。

フルカラーのPNG画像では、RGB値を圧縮して保存します。
グレースケールでは、圧縮前のデータ量が1/3になりますから、
そのままファイルサイズに関係するはずです。

 

ファイル名 フルカラー(KB) グレースケール(KB) 割合(%)
プリングルス 353 155 43.9%
通販サイト 408 190 46.6%
凛子 428 194 45.3%

 

1/3にはなりませんでしたが、半分以下にはなっているようです。

(圧縮後のファイルサイズが1/3にならない理由は、PNGでは圧縮を行うからです。
フルカラーフォーマットにモノクロ画像を保存するという、無駄の多いフォーマットのほうが
圧縮率が上がるためです。
それでも、PNG圧縮で無駄を省くよりグレースケール化して無駄を省くほうが効果的だと言うことが
わかります)

グレースケール画像のファイルサイズ一覧

グレースケール画像のファイルサイズ一覧

ここで、着目してほしいポイントは、
モノクロ画像の場合は、特にPNG画像は、
フルカラー画像よりもグレースケールで保存したほうが小さく(軽く)保存されている

という点です。
覚えておいてください。

ポイント2:減色で小さく!軽く!優れた減色エンジンでより小さく!

「グレースケールな画像に減色?」「減色する意味があるの?」という話をときどき聞きますが、
意味はあります!

なぜなら、グレースケールな画像であっても、他の画像と同じように
使用している色の頻度は偏っているからです。

簡単に解説すると、一般的なグレースケールの画像は、
白色の付近と黒色の付近に色の利用頻度が集中していて、
中間色であるグレーの利用頻度は少ないのです。

たとえば、数学的に四捨五入するなどして、等間隔に近い色に割り振ってしまうと、
この色の利用頻度が無視されてしまうため、ガタガタした階段状の画像になり、
元画像からの乖離が激しくなってしまいます。

ここはやはり、色の利用頻度を意識した「減色機能」を使うべきです。
減色といえば「OPTPiX imestaシリーズ」の出番です。

グレースケールの画像であれば16色程度に減色しても、
元の品質と見た目には変わらないレベルを維持したまま、ファイルサイズを小さくできます。

上の解説で使用した画像を、Photoshopと、OPTPiX imesta でそれぞれ16色に減色した時の
画像ファイルのバイトサイズとPSNR値を書いておきます。

ファイル名 Photoshop (KB) OPTPiX imesta (KB)
プリングルス 88.5 80.9
通販サイト 101 94.4
凛子 105 99.9
ファイルサイズの比較

ファイルサイズの比較

 

ファイル名 Photoshop PSNR(db) OPTPiX imesta PSNR(db)
プリングルス 43.2 43.7
通販サイト 38.8 42.2
凛子 41.1 42.7
PSNR値の比較

PSNR値の比較

圧縮率(バイトサイズ)とPSNR値共に OPTPiX imesta のほうがよい結果が出ています。

ここでのポイントは、グレースケールであっても減色すればさらにファイルサイズが小さくなること。
そして、減色性能はツール(エンジン)によって異なる!ことを理解しておいてください。

ポイント3:電子書籍(PDF)も小さく!軽く!

あまり知られていない話なのですが、PDFファイルの中の画像形式は、
JPEGとZIPの2種類の形式が存在します。
特に意識しないと画像はすべてJPEGとして扱われるので、
PDFファイルの中にはJPEG画像しか入らないと思っている人もいるかもしれません。

ZIP形式の画像とは耳慣れない形式だと思いますが、PNG画像はZIP形式(zlib)で圧縮されていますので、
PNG画像がほぼそのまま入ると考えてもらってよいと思います。
(具体的なフォーマットは異なります)

PDFのZIP形式はPNGとほぼ同じ形式ですので、画像の圧縮率もPNGのときとほぼ同じになります。

また、減色した画像をそのままPDFに入れれば、その画像のサイズがほぼそのままPDFのサイズに
等しくなるため、PDF内の画像をキレイなままさらに小さくできるのです。

以下に、OPTPiX imesta 7 for Mobile & Social で同じサイズになるように画像を圧縮した2つのPDF、

1, JPEG画像を圧縮して作製したPDFと、

2, PNG画像を減色して作製したPDFを

比較してみます。

PDFの画質比較

PDFの画質比較

同じようなファイルサイズのPDFなのに、ノイズの量にあきらかに違いがあります。
(クリックすると拡大画像が見られます。)
以下のURLに入れておきますので、ぜひPDFファイルをダウンロードして表示して
比較してみてください。
グレースケールテスト画像JPEG版PDF(116KB)
グレースケールテスト画像PNG版PDF(111KB)

モノクロ電子書籍の容量を小さくする方法のまとめ

グレースケール(モノクロ)画像の容量を小さくする方法に関して、ポイントをまとめると

1 : グレースケール化で小さく!軽く!

JPEG画像、PNG画像共に、グレースケールに適した保存モードがある。
JPEGでは2~3%。PNGでは半分以下に小さくできる。

2 : 減色で小さく!軽く!

PNG画像は、グレースケール(モノクロ)画像であっても、
減色機能でさらに小さく圧縮できる。

画像の圧縮率や品質は、減色エンジンに依存する。

3 : 電子書籍(PDF)も小さく!軽く!

PDF内の画像もグレースケールに相当するインデックスカラーが扱える
ZIP形式が存在する。

ZIP形式はノイズが入らないので、画像によっては、
JPEG画像よりもキレイに小さく(軽く)作ることができる。

 

ちなみに、上のPDFをこの品質でこのサイズまでに小さくしたツールは「電子書籍・雑誌やコミックをキレイに!軽く!ハイブリッド画像作成ツール – OPTPiX imesta 7 for Mobile & Social」です。

ぜひ一度、使ってみてください。
よろしくお願いいたします。

 

カテゴリー: 画像減色 | タグ: , , , | 2020/06/16 更新