移行ツールの利用 - ヘルプ - Spritebox.IO

Spritebox.IO

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

無料プランの機能を使う方法

無料プランはSpritebox.IOに登録しているかどうかに関わらずすべての人が利用できる機能を揃えています。

無料プランにはSpritebox.IOの無料プランや有料プランで生成したSprite画像をあなたの既存Webサイトなどですぐに利用するための移行ツールが含まれています。

移行ツールを利用するにはこちらのページにアクセスし、ページの右側(スマホなど画面が小さい機器では下側)に以下のようなフォームが表示されます。

最初は「SPRITE画像生成」タブが選択され「Sprite画像の無料生成」用のフォームが表示されていると思いますが、「移行ツール」タブをクリックすると上図のフォームが表示されます。

「移行ツール」機能

CSS Sprite手法を既存のWebサイトに導入するには、既存HTMLファイルをSprite画像用に変更しなくてはいけません。

  • img要素をSpritebox.IOで生成したCSS class名付きのdiv要素に置き換える
  • 元々cssのbackground属性で指定していた画像を、Spritebox.IOで生成したCSSを適用する形に変更する

といった作業です。

「移行ツール」では、この「img要素をSpritebox.IOで生成したCSS class名付きのdiv要素に置き換える」作業を自動化できます。

対象のHTMLファイル単体か、複数のHTMLファイルを含んだZIPファイルをアップロードします。

複数のHTMLファイルを含んだZIPファイルにはルートにspritebox_migration.ymlという名前の設定ファイルを含めなくてはいけません。

  1. 「HTML/各種テンプレート/ZIPファイル」フィールドをクリックして対象となるファイルを指定してください
    5個まで指定でき、各ファイルのサイズは1Mバイトまでです
  2. 指定したファイルが問題なければ「実行」ボタンがクリックできる状態になるのでクリックしてください。処理が開始され、完了し次第結果ファイルがZIP形式ファイルにまとめられてダウンロードされます
    「実行」ボタンがクリックできる状態にならない場合は、指定されたファイルになにか問題がある場合です、選択しているファイルの個数・サイズ・フォーマットをチェックして条件に合うようにしてください

実行の結果以下のような変換が行われていますので、ダウンロードされたファイルの内容を確認してみてください。

この変換処理は、有料プラン利用開始後にも利用できますし、利用する機会も多いはずです。使い方を理解し上手く活用してみてください。

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

↓(置換実行!)

移行ツールでまとめてファイルをアップロードする方法

複数の対象ファイルをアップロートしたい場合はそれらをZIPファイルにまとめてアップロード可能です。
ただし、ZIPファイルのルートにはspritebox_migration.ymlというYML形式のファイルを含めなくてはなりません。

例えば以下の様な形です。

含められるファイル数に制限はありませんが、対象ファイルが増えるほど処理には時間がかかりますし、1度の変換処理には適度な数を指定してください。

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

spritebox_migration.ymlの記述方法

spritebox_migration.ymlには変換処理の設定をYML形式で記述します。
spritebox_migration.ymlが含まれていないZIPファイルは処理対象からはずれてしまいますのでお気をつけ下さい。

例を示します。

「ext」は必ず1つ指定してください。複数のファイル拡張子を変換したい場合は処理を複数回にわけて行ってください。

「exclude」は除外対象がなければ指定しなくてもいいですが、以下のように「空」指定してください。

done ヘルプ done 登録とアカウント削除 登録について アカウントの削除について done 登録後の準備 ログイン プロフィール設定 ルートパス名の設定 利用プランのサブスクライブ done 無料プラン Sprite画像の無料生成 移行ツールの利用 done Web制作プラン Sprite画像の生成 Sprite画像の編集 Sprite画像の削除 サンプルページの確認 Sprite画像の利用 ダウンロードして利用 ルートパスの変更 利用プランの変更・停止
Spritebox.IOについて 無料プランについて Web制作プランについて DevOpsプランについて Spritebox.BIZについて 料金 ニュース ヘルプ FAQ 利用規約 プライバシーポリシー お問い合わせ 運営者について