あけましておめでとうございます

あけましておめでとうございます。
ウェブテクノロジ代表の小高です。

年々、世の中の変化が加速しているように感じています。

そのような環境においても、ウェブテクノロジは変化する時代のニーズに応え、デジタルコンテンツ制作者を支援するため、高品質化と制作効率向上のためのソリューションを提供してまいります。

2012年は、PlayStation® Vita、Nintendo® 3DS 向けツールはもちろんのこと、スマートフォン、ソーシャル系アプリ、そして電子書籍制作者向けソリューションに注力します。

弊社既成ソリューションのカスタマイズを発展させた、提案型の受託開発も強化していきます。

本年も、日々の業務を通じ、微力ながらもよりよい社会を創るために価値を提供し続けてまいります。

株式会社ウェブテクノロジ
株式会社ウェブテクノロジ・コム
代表取締役 小高輝真

2012年年賀状

カテゴリー: ウェブテクノロジ | タグ: , , , , , , | 2011/12/29 更新

“SpriteStudio”が”Unity3D”と、に加えて”CoronaSDK”とも連携しちゃいましたよ、みたいな2011年末。

いよいよ年の瀬。”師走”という言葉の由来については周知の事・・・なので敢えて語りませんが、何しろもう数々のお問い合わせに対して『とりあえず』返答するばかりの日々。大変申し訳ございません。

・・・ってお詫びから始まった本年最後のブログ投稿。ソリューション営業部の浅井でございます。

さて本年は実に激動だったワケなんですが、悲しい事件はさておきまして、今年の嬉しい話題としては”ニンテンドー3DS”と”PlayStation® Vita”! 個人的にも両機種を大購入、時代はスマートフォン、なんて言われていますがゲーム専用機の世代交代ってのは実にワクワクするイベント。”ニンテンドー3DS”は週販で50万台突破と勢いに乗り、また”PlayStation®Vita”も話題のタイトルがどんどこ登場予定と期待大。(というかTwitter連携出来る”みんなといっしょ”が楽しすぎるんですがありがとう南治さん!)

と、言うことでリマインド的な意味合いも込めちゃうんですが、弊社製品”OPTPiX imesta 7″も両機種それぞれに対応した“OPTPiX imesta 7 for Nintendo 3DS”および“OPTPiX imesta 7 for PlayStaion®Vita”を無事に発売。両機種ともに専用のテクスチャフォーマットに対応、ホントに圧縮してあるの? みたいなハイクオリティなテクスチャを制作出来るスグレモノツール、に仕上がっておりますのでこの機会にお問い合わせください。

 

で。

本題に入るんですが弊社製品“SpriteStudio”にとっても大変実りある一年でした。まず話題にしなくてはいけないのは本年夏の”CEDEC2011″で参考出展しました”SpriteStudio for Unity”。

SpriteStudio+Unity3D

 ”SpriteStudio”で作成した2Dアニメーションデータを”Unity3D”にインポートすることで、日本が世界に誇れる2Dアニメーションを”Unity3D”を経由してマルチパブリッシュ! こちらのアセットについては現在最後のチューニングフェーズに入っておりまして、年明け早々に”SpriteStudioPlayer for Unity3D”という「正式名称」で”in Store Now”! 今風に言うならば”インストアなう”! ・・・を予定しております。

 

でで。

話題のゲームエンジン、と申しますと実はもう一つ、最近話題なのが”CoronaSDK”。

ansca_log

米ansca社の”CoronaSDK”は、Flashを開発したアドビ社のエンジニアの方々が開発した、”Lua”スクリプトベースで”iOS”や”Android”にもパブリッシュ出来る、これまたデザイナーさんマターでゲームが開発できる素敵SDKなんであります。インディーズデベロッパーが盛んな北米では、既に10万人のユーザーがいるそうなのですが、日本国内ではまだまだ・・・と、思っていたら早速”CoronaSDK”のユーザーさんから”SpriteStudio”と連携して使います、というお話がッ!

聞くところによりますとこの”CoronaSDK”、スプライトアニメーションを編集するツールが付属しているものの、アニメーションの始点と終点を指定してその間を補間する、”補間アニメーション”には非対応とか。なるほどー、じゃあ”SpriteStudio”で作った補間アニメーションを持ってこれると便利ですねぇ、なんて軽口を叩いたらアラヤダなんと、”SpriteStudioの出力データ→CoronaSDKのアニメーションデータ”へと変換するツールをご提供いただきました! ありがとうございます~。

 

ということで、”SpriteStudio”については従来のコマ方式・補間方式の2Dアニメーション作成ツールかつ汎用性重視の”.xml”出力の機能をそのままに、”Unity3D”に加え”CoronaSDK”とも連携できるようになりますよー、という話題。実はこれ以外にもゴニョゴニョとした連携先・事例がありまして、順次ご報告していきたいッ! でもその話は来年ッ! みたいな。

ご期待、ください。

っていうかお問い合わせ、ください。

カテゴリー: OPTPiX SpriteStudio | タグ: , , , , | 2016/08/25 更新

田中圭一のゲームっぽい日常 袈裟を着て仕事する毎日

節電と防寒のために購入した「膝掛け」には便利な「肩紐」がついていました。

このおかげで、立って移動する場合でも膝掛けが体にくっついてきます。

・・・が、しかし、この形はどう見ても「袈裟」です。

そんなわけで最近は、徳の高い僧侶になった気分で仕事しています。

カテゴリー: 田中圭一のゲームっぽい日常 | タグ: | 2016/08/25 更新

オレオレ認証局の作り方~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 あるところ、ほとんどのところで活躍できます。

カテゴリー: サーバー管理 | タグ: , , , | 2016/08/25 更新

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

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

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

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

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