PCサイトをドラッグ&ドロップでスマホ対応!

  • ログイン
  • ユーザ登録

shutto変換データの本番サイトへの反映手順

2016年6月17日 | 森下 奈緒

シェアする

shutto編集画面でレイアウト変換が終わったら、本番サイトに反映させましょう。ここではshutto編集データを本番サイトへ反映させるための手順をご説明します。

1. 変換用JavaScriptファイルをダウンロードする

shutto編集画面でレイアウト編集作業が終わったら、shutto変換を呼び出すためのJavaScriptファイルをshutto管理画面からダウンロードします。「JavaScriptファイルをダウンロード」をクリックすると、ローカルに「smp.js」というJavaScriptファイルが保存されます。
※タブレットの変換を行う場合は、左側のサイト設定にある「対応端末設定」を変更した後に、JavaScriptファイルをダウンロードしてください。

 

2.PCサイト設置WEBサーバーに変換用JavaScriptファイルをアップロードする

1でダウンロードしたshutto変換用JavaScriptファイル「smp.js」を、FTPソフトなどでPCサイト設置WEBサーバーの任意の場所にアップします。WEBサーバーをご自身で管理しておらずファイルをアップロード出来ない方は、管理者に依頼してください。
※添付画像の例では、ルート(最上位の)ディレクトリに「js」というディレクトリを設置し、shutto変換用JavaScriptファイルを入れています。お客様の環境によって、設置ディレクトリを変えてください。

PCサイト設置Webサーバに変換用JavaScriptファイル「smp.js」をアップできない場合

Webサーバにダウンロードした「smp.js」をアップロードすることができない場合、shutto.comを直接参照する埋め込みタグ型で対応することもできます。ただし、制限事項がございますのでご理解のうえご利用ください。

shutto.com直接参照型埋め込みタグ

<script type=”text/javascript” src=”//shutto.com/embed/(アカウント名)/convert.js”></script>

上記形式のタグを、HTMLファイルの<head>内に挿入します。

▼制限事項

shutto ASPサーバーが万が一ダウンしてしまった場合、最大で10分ほど、ページにアクセスしても何も表示されない状態になります。この制限についてご理解の上、直接参照型タグをご利用ください。
※ダウンロード型タグでは、障害時はPCページを表示します。

 

3.PCサイトのHTMLファイルに変換用JavaScriptファイルを読み込むタグを挿入する

PCサイト設置Webサーバにアップロードした「smp.js」を読み込むタグを、PCサイトのHTMLファイル<head>タグ内に埋め込みます。スマートフォン変換をしたい全てのページに同じようにタグを埋め込みます。

PCサイト

HTMLファイル

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="開発の手間ナシでかんたん導入!" />
<link rel="shortcut icon" href="http://www.submit.ne.jp/lib/images/favicon.ico">
<script type="text/javascript" src="common/js/rollover.js"></script>
<script type="text/javascript" src="/js/smp.js"></script>
</head>

※ルート(最上位の)ディレクトリに「js」というディレクトリを設置し、shutto変換用JavaScriptファイル「smp.js」を入れた場合の例です。他のディレクトリに格納した場合は、適宜記述を修正してください。

 

4.完成(確認する)

スマートフォンデバイスで本番サイトを閲覧すると、shuttoで変換したレイアウトデータが表示されるようになります。※マスター版でタブレット変換を行った場合は、タブレットで本番サイトを閲覧するとタブレット用のレイアウトが表示されます。

 

本番サイトに反映されない場合の対処法

設定内容が本番サイトに反映されない場合は、何らかの設定方法が間違っています。こちらをご確認ください。

スマホ向け表示
株式会社イー・エージェンシー

〒100-0006 東京都千代田区有楽町1-9-4 蚕糸会館4階