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

  • ログイン
  • ユーザ登録

JavaScript追加機能ができました

2012年10月2日 | 森下 奈緒

シェアする

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

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

この記事の目次

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

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

2. 設定方法

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

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

変換元ページで読み込んでいるJavaScriptライブラリはそのまま利用できます。

変換元ページの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);
スマホ向け表示
株式会社イー・エージェンシー

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