Spritebox.IOについて - Spritebox.IO

Spritebox.IO

登録
コンソール ログオフ ニュース
menu
登録処理が完了いたしました。Spritebox.IOをお楽しみください。
close
Sprite画像の本格運用をはじめるには以下が必要になります。
close
登録 コンソール ログオフ ニュース

Spirtebox.IOとは

Spritebox.IOは、CSS Sprite手法をWebサイト・Webアプリ・スマホアプリなどで利用するためのオンラインサービスです。

無料でも利用できますので、まずはお気軽にお試しください。
本格的に利用されたい場合は有料プランをサブスクライブし、Spritebox.IOの機能を十分に活用してみてください。

CSS Sprite手法を導入するメリット

CSS Sprite(CSSスプライト)手法とは、以下のように複数の画像を1つの画像にまとめた画像を用意し(この例では3枚の画像を縦にならべて1枚の画像にしています)、CSSのbackgoundプロパティを利用することでまとめた大きな画像から対象画像のみを表示する。。というHTML+CSS手法です。

これを使うことで以下のようなメリットがあります。

  • Webサーバーへの負担を軽減できる
  • サイト(Webアプリなど含む)の最適化・高速化が実現できる

以下の例を見てみてください。

これはSpritebox.IOのトップページのページロード時にロードされる画像の一覧です。

6個の画像がロードされるので、Webサーバーには6回のリクエストが送信され、6回のレスポンスがあったことを示しています。

データの転送量は、全部で1204.8Kバイトとなっています。

これは同様のページの一部の画像にCSS Sprite手法を適用した場合の一覧です。

home1.jpg / home2.jpg / home3.jpgをsphome.jpgというCSS Sprite画像にまとめました。

このことで元々6回のリクエストをWebサーバーに送り6回のレスポンスを受けていたページが4回のリクエスト・4回のレスポンスで済むようになりました。

データ転送量も、1204.8Kバイトだったのが445.8Kバイトに削減できました。

1ページのロードでリクエスト数を約65%に、転送量を約37%にできたわけです。

Webサーバーに対する負担がかなり減らすことができることがご理解いただけると思います。
データ転送量に課金されるAWS EC2などでサーバーを運用している場合、ランニングコストに大きくヒットするケースがありますので、是非CSS Sprite手法の導入を検討していみてはいかがでしょうか?
導入時にはSpritebox.IOが大きくあなたをお助けできると思います。

Spritebox.IOを利用するメリット

CSS Sprite手法のメリットをご理解いただいたところで、その導入にSpritebox.IOが如何に便利かをご説明したいと思います。

一般にCSS Sprite手法を導入するには以下の手順を踏まなければなりません。

  • まとめる画像を選ぶ(Webサイトであれば多くの場合、1ページ単位で1CSS Sprite画像となるようにまとめます)
  • 各CSS Sprite画像を作る(Photoshopなどで複数画像を1画像にまとめる)
  • 各CSS Sprite画像をサイト上で使うためのCSSファイルをそれぞれ作る(CSS3の知識が必要)
  • 各ページのHTMLにCSS Sprite画像を埋め込む

そして、ページの更新や変更時には、、、

  • 該当ページのCSS Sprite画像を編集する(Photoshopなどで編集)
  • 該当ページのCSSファイルを編集する
  • 該当ページのHTMLファイルを編集する

という作業が必要になります。
この作業の単調さや大変さでCSS Sprite画像の導入に二の足を踏んでこられた方も多いのではないでしょうか?

しかし、Spritebox.IOでは、上記手順リストの青文字の項目をSpritebox.IO上での簡単なマウス操作のみの作業に置き換えることができます

1つのWebサイトでも、CSS Sprite手法を導入する作業には多くの人手(コスト)がかかります。

これを軽減できる、、、それがSpritebox.IOを利用するメリットです。

CSS Sprite画像+CSS自動生成

Spritebox.IOでは、簡単にCSS Sprite画像とそれを利用するためのCSSファイルを自動生成できます。

以下のような指定された画像ソースを1つにまとめたSprite画像と、それらをサイズ可変で利用可能なCSSファイルが生成されます。
(この例はSpritebox.IOのトップページ用のSprite画像です)

これらは、ファイルとしてダウンロードできますので、自由にご自身のWebサーバにアップロードしてあなたのWebサイトで利用できます(含められる画像数は無料プランでは5個まで、有料プランでは20個までとなります)。

また、有料プランではこれらをクラウドホスティングしますので、ダウンロード・アップロードの手間が省け、即座にあなたのWebサイトで利用できます。

移行ツール

既存のWebサイトもCSS Sprite画像対応して、サイトの配信を効率化したくなるはずです。

しかし、既存サイトをCSS Sprite画像対応に変更する作業はなかなか大きなものです。
サイトの規模が大きければ大きいほどコストが高くなってしまいます。

この作業を自動化し簡単に行えるツールを無料プランの一機能として提供します(有料プランをサブスクライブしていても、していなくても利用可能です)。

既存サイトのHTMLファイルや、各種テンプレートエンジン用テンプレートファイルをアップロードすることで、imgタグ要素をSpritebox.IOで生成できるCSS Sprite+CSSを使う形に置換しダウンロード可能にします。

↓(置換実行!)

置換後は、該当のSprite画像とCSSファイルを生成し、該当のHTMLで読み込むだけで移行が完了できます(CSSファイル内のbackground-imageなどによる通常画像URL指定の置換には対応していません)。

大規模なサイトの移行については、移行代行サービスも用意していますのでお気軽にお問い合わせください

運用までサポート

有料プランのホスティング機能を利用すると、生成したSprite画像およびCSSファイルの管理・運用がワンタッチになりますので人為ミスによる間違いなどが減りますし、あなたのサイトを高いクオリティで簡単に運用できます。

ホスティングはAmzon Web ServiceのS3ストレージを用います。
S3はシンプルで耐久性のあるストレージサービスですので、あなたのSprite画像+CSSファイルを安定的に提供してくれます。
アクセスにはhttpとhttpsが利用できます。

Spritebox.IOの有料サービスではSpritebox.IOの用意したS3アカウントをご利用いただきますが、もしあなた自身のS3アカウントを利用して運用したい場合はSpritebox.BIZの導入をご検討ください。

システム開発での利用

Spritebox.IOでは各機能を利用するためのAPIを用意していますので、継続的インテグレーション(CI)・継続的デリバリー(CD)の中にCSS Sprite画像+CSSファイルの生成を組み込むことが可能です。

開発者主導のシステム開発などでは、開発効率を向上させるために様々な開発手法が考えられ実践されています。

Spritebox.IOは世界中の全てのシステム開発プロジェクトにもご協力したいと考えており、DevOpsプランを用意させていただきます(現在鋭意準備中です。リリースまで少々お待ちください)。

DevOpsプランではAPIと、DevOpsな開発ストリームの中に簡単にSpritebox.IOを組み込むことを可能にするためにモジュールバンドラWebpack用のプラグインをご利用いただけます。

Spritebox.IOについて 無料プランについて Web制作プランについて DevOpsプランについて Spritebox.BIZについて 料金 ニュース ヘルプ FAQ 利用規約 プライバシーポリシー お問い合わせ 運営者について