JavaScript追加機能ができました

このページに記載されている「CSS」「JavaScript」等は、あくまでも記述例となっております。ご利用するPCサイトによって変更しないといけない場合があります。
そのため、このまま使用しサイトに異常が出た場合は、サポートは対象外となりますので、予めご了承の上ご利用いただけますようお願いいたします。

shutto変換完了後に実行するJavaScriptを編集画面から設定できるようになりました。

この記事の目次

• 1. こんなことができます
• 2. 設定方法
• 3. 利用可能なライブラリ
• 4. shutto API
• 5. 使用例

1. こんなことができます

• JSライブラリを使うことができるため、スライドショーなど動きのある要素を追加できます。
• 変換元であるPCサイトでフォームなどをJavaScriptで制御している場合、同じ制御内容をshutto上で追加することで再現できます。
  ※PCページで利用しているJavaScriptがそのまま動作することは少ないため、記述するにはJavaScriptの知識が必要です。

2. 設定方法

編集画面左のスマホレイアウト画面下部にあるナビゲーションから「ページ」をクリックし、現れた編集メニューのJavaScript欄に実行したいコードを入力してください。

3. 利用可能なライブラリ

変換元ページで読み込んでいる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);