このページに記載されている「CSS」「JavaScript」等は、あくまでも記述例となっております。ご利用するPCサイトによって変更しないといけない場合があります。
そのため、このまま使用しサイトに異常が出た場合は、サポートは対象外となりますので、予めご了承の上ご利用いただけますようお願いいたします。
shutto変換完了後に実行するJavaScriptを編集画面から設定できるようになりました。
この記事の目次
1. こんなことができます
- JSライブラリを使うことができるため、スライドショーなど動きのある要素を追加できます。
- 変換元であるPCサイトでフォームなどをJavaScriptで制御している場合、同じ制御内容をshutto上で追加することで再現できます。
※PCページで利用しているJavaScriptがそのまま動作することは少ないため、記述するにはJavaScriptの知識が必要です。
2. 設定方法
編集画面左のスマホレイアウト画面下部にあるナビゲーションから「ページ」をクリックし、現れた編集メニューのJavaScript欄に実行したいコードを入力してください。
3. 利用可能なライブラリ
変換元ページで読み込んでいるJavaScriptライブラリはそのまま利用できます。
- scriptタグに書かれたJavaScriptはそのまま実行されます。
- 抽出するHTML要素に直接書かれたイベントハンドラ(onclickなど)は、変換時に除去されます。
* イベントハンドラを残す設定ができるようになりました。(2012年11月7日更新) - ページのロード完了とshuttoの変換完了のタイミングは状況により前後します。そのため、変換後に変換元ページのHTML構造に依存しているJavaScriptが実行されると、意図通り動作しないことがあります。確実に変換後に実行するには、shuttoのJavaScript設定からコードを入力してください。
それに加えて、shutto上で書かれたJavaScriptではjQuery互換ライブラリの Zepto.js が window.Zepto から利用できます。(window.$ にはエクスポートせず、変換元ページの状態を保ちます。)
また、以下のshutto APIが利用可能です。使い方は使用例を参照してください。
4. shutto API
__shutto.body
shutto変換される前のbodyのDOMエレメント。
__shutto.require(url1, [url2, ...], handler)
外部JavaScript、CSSの読み込みを行う関数
url
: ロードしたいJavaScriptまたはCSSのURL。URLの末尾が”.css”の時はCSS、それ以外はJavaScriptとしてロードします。handler
(オプション): 全てのスクリプトの読み込みが完了した時に実行されるコールバック関数。
5. 使用例
外部ライブラリを利用した画像スライドショー
http://shutto.com/view/1R7ToLN
HTML (テキスト要素のHTML入力を使用しています)
<div class="flexslider">
<ul class="slides">
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg" />
</li>
<li>
<img src="http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg" />
</li>
</ul>
</div>
JavaScript
__shutto.require(
'//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js',
'http://flexslider.woothemes.com/js/jquery.flexslider.js',
'http://flexslider.woothemes.com/css/flexslider.css',
function() {
$('.flexslider').flexslider({
animation: "slide"
})
}
);
サムネイル画像クリックで詳細を表示
http://shutto.com/view/mjYMwOJ
JavaScript
(function($) {
var thumbnails = $('#detail-image').closest('.shutto-component-group').find('img:not(#detail-image)');
thumbnails.bind('click', function() {
var site = getSite(this.src);
$('#detail-title').text(site.title);
$('#detail-title').attr('src', site.entry_url);
$('#detail-url').text(site.url);
$('#detail-image').attr('src', this.src);
thumbnails.css('border-color', 'transparent');
$(this).css('border-color', '#6af');
});
// 変換前のbodyから、指定したsrcのimgを含む事例の情報を取得して返す
function getSite(src) {
var images = $(__shutto.body).find('#case_box').first().find('img');
for (var i = 0, image; image = images[i]; i++)
if (image.src == src) {
var box = $($(image).parents()[2]);
return {
title: box.find('.tx_grey').text(),
url: box.find('.mb20').text(),
entry_url: box.find('a').attr('href')
};
}
}
})(Zepto);