プロフィール:
北海道札幌市のイメージナビ株式会社のエンジニアによるブログです。
実績紹介、技術情報などを不定期ですがポストしていきます。
よろしくお願いいたします!

HTMLでのSVGの利用について

Webで使用される画像形式のひとつにSVGというものがあります。このSVGとは何か、HTMLでどのように利用するのかを説明します。

 
SVG Logo

 
■SVGとは
SVG(Scalable Vector Graphics)とはAdobe Illustratorで作成したようなベクター形式の画像を表示する技術です。ベクター形式の画像はWeb上で一般的に使われているJPEGやPNGなどのビットマップ形式とは違い、画像を構成する点の座標位置が記録されているので、それらの座標位置の点と点を結ぶ線を演算して描画します。そのため拡大縮小しても画質が劣化しません。

例えば、ビットマップ形式の画像ではAppleのレティナディスプレイなど高解像度ディスプレイに対応させる場合、二倍サイズのJEPGやPNGの画像を用意し、実寸サイズに縮小表示する方法で画質の劣化を抑えていますが、SVGのベクター形式では解像度に依存しないためその必要はありません。

 

■SVGに対応しているブラウザ
・Internet Explorer 9以上
・Firefox 3.0以上
・Google Chrome 4.0以上
・Mac OS X Safari 3.2以上
・Opera 9.0以上
・iOS Safari 3.2以上
・Androidブラウザ 3.0以上

このようにPCやMacを始め、スマホやタブレットなどでも様々なブラウザに対応しています。SVG自体は1998年に開発され、2001年にSVG 1.0がW3C勧告として公開されましたが、当時はブラウザの対応が追いついていませんでした。特にInternet Explorer(IE)の対応が遅く、2011年登場のIE9までは非対応となっていました。最近になりようやくブラウザの対応が進んだこともあってHTML5と共に注目されるようになりました。

 

■SVGファイルの設置方法
画像ファイルと同じ扱いで<img src=”” />タグでSVGを読み込む方法が1つです。

 例:
 <img src=”images/logo.svg” alt=”ロゴ”>

 
他にはファイルではなく、SVGを<svg>~</svg>というタグで囲われたコードとして表記することも可能で、コードをHTMLの中にインラインで記述する方法もあります。

 例:
 <svg id=”line_logo” x=”0px” y=”0px” width=”800px”
  height=”220px” viewBox=”0 0 800 220″>
  <g class=”image”>
   <path d=”M73.994,147.974h23.329V73.988H73.994V147.974z
    M73.994,41.246V58.99h23.329V41.246H73.994z”/>
    :
   (省略)
    :
  </g>
   :
  (省略)
   :
 </svg>

 
■SVGファイルの中身
SVGファイルの中身はXMLをベースとしたものなのでコードをテキストエディタなどで直接編集することも可能で、画像エディタを介することなく配色やサイズなどを変更することができます。もちろんAdobe IllustratorなどのソフトでSVGファイルを出力することも可能です。

 

■様々なフィルター
ぼかしや色調の変更様々なフィルターが用意されています。CSSでも装飾でき、アニメーションなどを加えることも可能です。

 

■デモを作ってみました
いくつか簡単なデモを作ってみました。拡大縮小のデモでは実際にウインドウサイズを変えてみると画像の大きさが変わるにもかかわらず画質は劣化していないことが解ります。

拡大縮小

マップ

フィルター

アニメーション

※クリックすると別ウインドウで開きます
※IEでは表示が不完全になる場合があります

 

■問題点
上記デモのようなロゴマークやアイコンなど単純な形状であればコードの記述は少なく、処理を軽くすることもできますが、複雑なイラストではコードも膨大になり処理内容も大幅に増えてしまいます。環境によって読み込みや描画が遅れたりすることもあるので、ブラウザの描画エンジンの性能やデバイスの処理能力も必要になってきます。ですが、SVGが開発された当時よりもブラウザもデバイスも比べものにならないほど性能は向上していますし、今後も向上していくでしょうからさほど問題ではないのかもしれません。

また、IEの場合はIE9からSVGがサポートされているものの、まだ完全ではないようなので正しく表示されるかどうか注意する必要があります。今月末にリリース予定のWindows10に搭載される新しいブラウザ(Microsoft Edge)でどのような実装になるか興味深いところです。

 

■余談
当ブログのようにWordPressでSVGを使用する際は、WordPressのfunctions.phpファイルの修正かプラグインのインストールが必要になります。「Scalable Vector Graphics (SVG)」というプラグインを使う例が多いようですが、なぜかうまく動作しなかったため、今回は「SVG Spritemap Manager」というプラグインをインストールしました。これにより、WordPress管理画面のメディアからSVGファイルのアップロードと表示が可能になりました。

 

■まとめ
未だにIE8を最低限の対応環境としているサイトが多いので環境によっては積極的に使えない場合もありますが、今後はSVG非対応の古いブラウザは減少していき、IE9以降を最低限の対応環境とするサイトが増えるのではないかと思います。そうなればSVGを利用できる環境も増えていきますので、どんどん普及していくのではないかなと期待しています。

 

この記事に関するご感想、その他ご用命などございましたら、こちらよりお願いいたします。

前回はさくらのVPSをLinux環境で利用してみました。今回は他の使い方をしてみたいと思います。

■Windowsもインストール可能?
さくらのVPSでは標準のCentOSの他にカスタムOSのインストールが出来るようになっています。つまり、ISOイメージからブートしてOSをインストールすることが可能になっています。しかも仮想コンソール画面で起動時の画面も操作できるようになっています。ということはWindows系OSも頑張ればインストール出来るのではないか?と思って調べてみると、公式にはサポートしていないようですがWindowsもインストール可能なようです。そこで試しにWindows Server 2012 R2 64Bit版をインストールしてみました。

 

■インストール
OSインストール時にカスタムISOを選択すると、このようにISOイメージをアップロードする場所の指定がありますのでISOイメージをアップロードし、そこから起動します。

sakura_vps_15033101

ここで注意が必要なのは「VirtIOを有効にする」のチェックを外して無効にしないとインストール先のHDDが見えませんので、VirtIOを無効にしてインストールを開始します。

sakura_vps_15033103

インストールが始まると、あとは普通のWindowsのインストール画面になりますので画面の指示に従ってインストールを続けます。数分で無事にインストールが完了しました。

sakura_vps_15033104

 

■VirtIOでパフォーマンス向上
さくらのVPSはVirtIOに対応しています。VirtIOを有効にするとディスクやネットワークのパフォーマンスが大幅に向上するので是非使いたいところですが、そのままでは利用できません。有効にするにはVirtIOのドライバが必要となります。

・VirtIOドライバダウンロード
http://alt.fedoraproject.org/pub/alt/virtio-win/latest/images/

VirtIOドライバはWindowsには標準で組み込まれておりませんのでOSインストール時に読み込ませる必要がありますが、さくらのVPSコントロールパネルではOSインストール時にディスクイメージの入れ替えは出来ないため、このドライバをインストール出来ません。
そのため、VirtIOを有効にしたい場合はあらかじめVirtIOドライバを組み込んだOSインストールイメージを作成する必要があります。今回はドライバを組み込んだISOイメージを作成してインストールしました。

sakura_vps_15033102

インストールの途中でWindowsのインストール場所を選択する際に[ドライバーの読み込み]でVirtIOドライバを読み込ませます。そうするとインストール先のドライブが表示されるようになるので場所を選択し、後は普通にインストールを進めていくだけで問題なく完了します。

sakura_vps_2015033106

VirtIOを有効にした場合、デバイスマネージャーではこのような表示になります。

sakura_vps_15033105

 

■ベンチマーク
では実際にWindows環境でどの程度のパフォーマンスに差が出るのかベンチマークを取ってみました。VPSのスペックは3CPU、メモリ2GB、SSDが50GB、いわゆる2GBのSSDプランです。
 

[CrystalDiskMark 3.0.3]

VirtIO 無効 VirtIO 有効
Sequential Read : 427.990 MB/s 1632.025 MB/s
Sequential Write : 409.387 MB/s 1082.281 MB/s
Random Read 512KB : 364.889 MB/s 1119.923 MB/s
Random Write 512KB : 398.414 MB/s 885.433 MB/s
Random Read 4KB (QD=1) : 13.755 MB/s [ 3358.1 IOPS] 20.419 MB/s [ 4985.0 IOPS]
Random Write 4KB (QD=1) : 14.549 MB/s [ 3552.0 IOPS] 21.482 MB/s [ 5244.6 IOPS]
Random Read 4KB (QD=32) : 16.381 MB/s [ 3999.2 IOPS] 56.377 MB/s [ 13763.9 IOPS]
Random Write 4KB (QD=32) : 18.570 MB/s [ 4533.7 IOPS] 53.137 MB/s [ 12973.0 IOPS]

* MB/s = 1,000,000 byte/s [SATA/300 = 300,000,000 byte/s]

 

さくらのVPSに限らず他のVPSやクラウドでもそうですが、KVMの仕様からエミュレートするチップセットはノースブリッジがIntel440FX、サウスブリッジが82371SB (PIIX3)という懐かしい組み合わせになるようです。ですが、このチップセットの性能(FSB:100MHz、メモリ:800MB/s、ストレージ:33MB/s)で頭打ちになることはないので特に気にする必要はないようです。ちなみにCPUだけはIntel Xeon E5-2650v2 2.6GHzとなっており、ホスト機のものがそのまま表示されています。

話を戻して、VirtIOが無効でもそこそこの性能は出ていますが、有効にすることでディスクのパフォーマンスが一気に上がりますので出来れば有効にして使いたいところです。今回は計測していませんがネットワークドライバもVirtIOに変えることでパフォーマンスが大幅に向上するようです。

 

■まとめ
サポート外ながらもさくらのVPSでWindowsを利用することが出来ました。クラウド系のサービスにはリモートデスクトップのサービスがありますが、月額だとそれなりの価格になってしまいます。OSのライセンスが必要になるものの、VPSにWindowsをインストールして低価格なリモートデスクトップとして使うのも面白いかもしれません。

※注)ハードウェアスペック、ベンチマークの結果は2015年3月に使用した時のものであり、これを保証するものではありません。また、Windows等の未サポートOSのインストールは自己責任でお願いいたします。

 

この記事に関するご感想、その他ご用命などございましたら、こちらよりお願いいたします。

AWSやAzureなどのクラウドサービスは柔軟に大規模な構成まで組めるのが魅力ですが、その反面サーバーが1台~数台だけ必要な場合には従量制であることもあって費用が割高になることがあります。かといって、共用レンタルサーバーでは費用は低く抑えられるものの、複数ユーザーとの共用環境になってしまうので自由な運用が出来ない、パフォーマンスに問題が出るなど不便な面が目立ちます。そこで、費用をそこそこに抑えつつ比較的自由な運用ができるVPSの出番となります。

 

■VPSとは
VPS(virtual private server)と呼ばれる仮想サーバーです。提供されているサービスにもよりますが、管理者権限はもちろんOSを再インストールすることも可能なサーバー環境で、オンプレミス環境や専用サーバーのような自由度の高い運用が可能になります。

今回は数あるVPSサービスの中から、さくらインターネットの「さくらのVPS」を利用してみました。

sakura_vps_20150202

 

■メリット
さくらのVPSのメリットはなんと言っても手ごろな料金とスペックではないでしょうか。AWSやAzureの同等インスタンスと比べて約1/2~1/3程度の料金です。最低プラン(1CPU、MEM:512MB、SSD:20GB)だと月額635円という低料金です。流石にこのスペックでは少々厳しい面もあるので上のプランを選ぶことが多いと思いますが、2つ上のプラン(3CPU、MEM:2GB、HDD:200GB or SSD:50GB)でも月額1,580円という非常にコストパフォーマンスのよい料金になっています。もちろん定額制なので後から稼働時間や転送量といった課金は発生しません。
VPSなので管理者権限もありますし、CentOS(5/6/7)を始め、Ubuntu(12.04/14.4)、FreeBSD9.3、Debian(6/7)、Fedora19など様々なOSをインストール出来るようになっています。
また、さくらのVPSはさくらのクラウドへのマイグレーションが可能となっていますので、将来的にVPSでは不足するような時にも安心かと思います。

 

■デメリット
さくらのVPSでは契約時にスペックを決めると後から変更はできません。どうしても変更したい場合は新たなVPSを契約して移行するか、さくらのクラウドへ移行することになります。
ただし、本契約の前に2週間のお試し期間がありますので、その間にスペックが足りるかどうかは十分検証できるのではと思います。お試し期間中は若干の制限があり、メール送信用のポートが閉じられていたりネットワークに帯域制限がかけられていますので注意が必要です。

 

■実際に使ってみました
早速さくらのVPSの2GBプラン(HDD)をお試し期間に利用してみました。
ブラウザ上でコントロールパネルからVPSサーバーの起動停止や設定を行うことができ、コンソール画面も開くことが出来ます。また、CPU使用状況、トラフィック、ディスクI/O状況のグラフを見ることも可能です。

sakura_vps20150201

 

まずは試しに自社内のVMWareESXi4.0上で稼働している仮想サーバーの1台をVPSへ移設してみました。
移行元の環境は小規模なeコマースサーバーを想定したもので、CentOS、MySQL、Apache、EC-CUBEとなっています。移行とはいいましたがVMWareESXiのイメージをそのままインポートすることは出来ませんので、VPSサーバーにMySQL、Apache、EC-CUBEをインストールし、そこに設定とデータをコピーしました。よくあるサーバー移行作業のような感じです。OSは最初から標準のCentOS6 64bitが入っていますのでそのまま使用しました。

結果は…当たり前といえば当たり前ですが、従来環境と遜色なく普通に利用できました。

sakura_vps20150203

 

VPSホストのハードウェアスペックについては公表されていませんが、/proc/cpuinfoを覗いてみるとCPUはXeon E5-2640 2.5GHzとなっていました。ホスト機のCPUがそのまま表示されているようです。スペック的には全く問題ありません。

※HDDプランの場合
[root@tk2-xxx-xxxxx ~]# cat /proc/cpuinfo | grep “processor\|model name\|MHz”
processor : 0
model name : Intel(R) Xeon(R) CPU E5-2640 0 @ 2.50GHz
cpu MHz : 2499.998
processor : 1
model name : Intel(R) Xeon(R) CPU E5-2640 0 @ 2.50GHz
cpu MHz : 2499.998
processor : 2
model name : Intel(R) Xeon(R) CPU E5-2640 0 @ 2.50GHz
cpu MHz : 2499.998

 

懸念していたディスクのI/O性能も十分過ぎるので、ここがボトルネックになるようなことも無さそうです。

※HDDプランの場合(5回連続で実行した結果を抜粋)
[root@tk2-xxx-xxxxx ~]# hdparm -t /dev/vda
/dev/vda:
Timing buffered disk reads: 1362 MB in 3.00 seconds = 453.60 MB/sec
Timing buffered disk reads: 1418 MB in 3.00 seconds = 472.39 MB/sec
Timing buffered disk reads: 1404 MB in 3.00 seconds = 467.27 MB/sec
Timing buffered disk reads: 1422 MB in 3.00 seconds = 473.81 MB/sec
Timing buffered disk reads: 1406 MB in 3.00 seconds = 468.64 MB/sec

 

HDDだけではなくSSDプランもあります。もしI/O性能が必要な場合は最初からSSDプランを選ぶと良いでしょう。

※SSDプランの場合(5回連続で実行した結果を抜粋)
[root@tk2-xxx-xxxxx ~]# hdparm -t /dev/vda
/dev/vda:
Timing buffered disk reads: 2466 MB in 3.00 seconds = 821.75 MB/sec
Timing buffered disk reads: 2650 MB in 3.00 seconds = 883.15 MB/sec
Timing buffered disk reads: 2638 MB in 3.00 seconds = 879.30 MB/sec
Timing buffered disk reads: 2634 MB in 3.00 seconds = 877.81 MB/sec
Timing buffered disk reads: 2590 MB in 3.00 seconds = 863.02 MB/sec

 

ちなみにSSDプランのcpuinfoはこうなっていました。CPUは一世代新しいXeon E5-2650v2 2.6GHzでした。

※SSDプランの場合
[root@tk2-xxx-xxxxx ~]# cat /proc/cpuinfo | grep “processor\|model name\|MHz”
processor : 0
model name : Intel(R) Xeon(R) CPU E5-2650 v2 @ 2.60GHz
cpu MHz : 2599.998
processor : 1
model name : Intel(R) Xeon(R) CPU E5-2650 v2 @ 2.60GHz
cpu MHz : 2599.998
processor : 2
model name : Intel(R) Xeon(R) CPU E5-2650 v2 @ 2.60GHz
cpu MHz : 2599.998

※注)料金やハードウェアスペック、ベンチマークの結果は2015年2月に使用した時のものであり、これを保証するものではありません。

 

あと、VPSにはファイアウォール機能がありませんので、OS側でしっかりと対策を取ることが必要です。例えばsshはポート番号を変更の上、IPアドレス制限や鍵認証などを併用するとよいでしょう。

安定性については長期的に使用してみないことには解りませんが、試した範囲ではレスポンスが悪くなったり、応答が無くなったりといったことはなく、ごく普通に安定している印象を受けました。

 

■バックアップ
クラウドではインスタンスのスナップショットやディスクイメージを簡単に作ることが出来るので万が一の時に備えることも容易ですが、残念ながらVPSにはその機能はありません。バックアップはオンプレミス環境同様の対策を取る必要があります。さくらのVPS利用者の中でよく使われているMondoRescueでディスクイメージを作成する方法や、試したことはありませんがDropbox、AmazonS3にバックアップしている例などもあるようです。
今回はcronとscpを用いて必要なディレクトリを別サーバーに保存するという単純な方法をとりました。効率は良くありませんが最低限のバックアップは取れるかと思います。

 

■まとめ
APIを用いてサーバーを操作したり負荷に応じて動的にサーバを上げたり落としたり…というようなクラウドならではの使い方はVPSでは出来ませんが、1台~数台のサーバーで賄えるサービスを展開する場合には有力な選択肢になるのではないでしょうか。ちょっとしたテスト環境として使うのもいいかもしれません。
今回は試していませんが、VPSでもローカルネットワークを構成して複数台でスケールアウトするような凝った構成ももちろん可能です。

こういったサーバーのサービスにはレンタルサーバー、VPS、クラウドなど様々なサービスがありますので、状況に応じて最適な選択をするのがポイントとなりそうです。

 

この記事に関するご感想、その他ご用命などございましたら、こちらよりお願いいたします。

先日、ソリューションサービスのサイトをリニューアルしました。

従来のサイトは何年も前に作成したサイトで、そこにコンテンツを継ぎ足していったためパッと見は情報量が豊富な感じに見えていましたが、内容的に古い情報が残っていたり、コンテンツが整理されていない部分があったり、内容が重複していたりと全体的に整理が必要なものになっていました。そのためアピールしたいことも不明瞭になっていました。

そこでデザインを一新し、コンテンツも大幅に整理しました。

 

20150115_before 20150115_after

 

今まではいくつも羅列していたコンテンツを大きく3つのカテゴリ(webソリューション、モバイルソリューション、検索ソリューション)に分類したことにより、シンプルで見通しが良くなり、アピールポイントも明確になりました。そしてメンテナンス性も高くなったのではと思います。

まだまだ改善点はあると思いますので、そういった点は少しずつ改修していき、今後はエンジニアブログやコーポレートサイトにも手を加えて全体的な統一感を持たせていければと考えています。

今後ともデータクラフトのソリューションサービスをよろしくお願いいたします。

 

この記事に関するご感想、その他ご用命などございましたら、こちらよりお願いいたします。

弊社ではスマホアプリとして「RingRingTone」を販売しております。今回はそのRingRingToneをご紹介したいと思います。

 

■RingRingToneとは
iPhone用の着信音アプリです。5つのカテゴリ(おもしろ、ベル・アラーム、ネイチャー、ワンフレーズ、ミュージック)からなる760種類以上もの着信音が収録されています。iPhoneに入っている音楽(非DRMのみ)からオリジナルの着信音を作成する機能もあります。AppStoreでの最高ランキングは2014年3月に記録した、エンターテインメント:3位/有料総合:55位でした。

 

201412171 App_Store_Badge_EN

 

■主な特徴
・着信音作成機能
iPhone内の音楽ファイル(※非DRM)を読み込み、開始時間、長さ、フェードイン・フェードアウトを好みに調整して、着信音を作ることができます。

 

201412172

 

・音ファイル
素材を得意とする弊社が保有している大量の音ライブラリから着信音に使えるスタンダードなものから、ちょっと異色なものまで、バラエティーに富んだサウンドを760点以上収録しました。

rrt_sc_1_1   rrt_sc_1_2   rrt_sc_1_3

 

・操作性
メイン画面からカテゴリを選択して戻る、スワイプすると一つ前に選択していたカテゴリが表示される、などの操作感について開発中にミーティングで何度も話し合い、不満や要望についてはできるだけカバーしてUIを作りこみました。

 

・言語切替
RingRingToneは日本語・英語で使用できます。言語設定を日本語以外にすると英語の表記に変更されます。
201412172          201412172

 

・手作りの操作説明動画
データクラフトスタッフによる操作説明の動画は英語版もあり、海外の方にもご利用いただけるようになっています。

rrt_movie01  rrt_movie03  rrt_movie02

 

・モスキート音
モスキート音(高周波数の音)を年代別に収録しました。メインメニュー画面をよく見ると蚊のアイコンが…。
※モスキート音は聞こえる方には「とても不快な音」として聴こえますので、長時間や大音量、公衆でのご使用には特にご注意ください。
201412172       rrt_mosquite_2

 

■開発秘話
RingRingTone以前にiOSのアプリケーションは既に作成していたのですが、それらはwebベースのアプリケーションであったため、Objective-Cでの実装はほとんどありませんでした。RingRingToneは音の再生や着信音の編集など、Objective-Cネイティブでなければ実現できないため、実装の経験を積むための貴重な機会になりました。実装方法については未経験に等しいものでしたので、打ち合わせで機能や要望が出てくる度にどのように実装できるか調査してリリースを繰り返す…そんな試行錯誤の連続でした。特に着信音作成機能は最後の最後まで苦労して調整した機能でした。Appleのドキュメントはもちろん確認していましたが、日本語の情報が少なく、海外の情報やドキュメント類まで探しまわりようやく実装できた機能です。

アプリとしては小規模なものですが、iOSの機能としてはTabViewをメインにTableViewやWebViewなど、UIとして基本的なものを押さえており、開発者としては次のアプリケーションを作成するためのステップになりました。作りとしては甘いところがあったにせよ、バージョンアップをはかり隙の少ないアプリになったかと思います。

また、英訳の他、収録する着信音を調整、変換する作業は音にこだわりのある専任のスタッフが担当しましたが、760種以上という量だけにかなり大変な作業でした。

 

■まとめ
AppStoreのエンターテイメントカテゴリ内で20~100位前後を上下しているものの、リリースから2年程経過しており息の長い商品となっています。動作環境はiOS5以降で対応機種はiPhone4以降、もちろん最新のiPhone6でも動作しますので是非ご利用ください。

現在は要望の多いAndroid版も検討中です。iOS版にどれだけ近づけられるのか、またAndroidならではの要素を取り入れたアプリケーションを作成したいと考えています。ご期待ください。

 

RingRingToneに関するお問い合わせ、その他ご用命などございましたら、こちらよりお願いいたします。