Loading...

htmlコーディング 小棹制作所

この記事がよく読まれてます

tumblrでの企画など、お手伝いします
  • fullPage.js ページスクロールで紙芝居のように魅せるWebページが作れるjQueryプラグイン (37,927Views)
  • 初代から大幅にパワーアップして帰ってきた! Owl Carousel 2の紹介とかんたんな設置方法 (19,377Views)
  • 多分一番簡単!ドロワーメニューを実装するためのjQueryプラグイン「drawer」 (18,869Views)
  • [メモ]Macのメールアプリで自動転送(もしくはリダイレクト)設定をする方法 (16,908Views)
  • tumblrのオリジナルテーマ作成入門 tumblrの独自タグを理解しよう (16,154Views)
  • wow.jsとanimate.cssを組み合わせると、かんたんに、かっこいい動きがあるWebページを作れます。 (15,998Views)
  • スマートフォンサイトでよく見る横からニョキッと出現するスライドメニューの実装なら「Sidr」で (15,591Views)
  • 国産のtumblrポートフォリオ用テーマ “Illustfolio2″ がすごくいい! (11,969Views)
  • ミュージシャン・バンド・アーティスト用Webサイト作成のためのTumblrテーマを作ったので配布します (11,321Views)
  • シンプルだから機能もデザインもかんたんにカスタマイズできるjQueryのカルーセルプラグイン “Owl Carousel” (11,307Views)
  • さくっとヘッダー固定のhtmlテーブルが作れるjQueryプラグイン「Fixed Header Table」 (11,303Views)
  • 企業ホームページっぽいレイアウトのTumblrのテーマを作ったので無料配布します (10,757Views)
  • 翻訳機能をWebサイトに埋め込む方法 (10,642Views)
  • Twitter Bootstrapが3にアップグレードして、さらに使いやすくなった (10,335Views)
  • tumblrのオリジナルテーマをゼロから作るのは心が折れるので、スターターテーマを使おう (9,956Views)
  • Twitter Bootstrapの基礎 Twitter Bootstrapってなに? からモーダルウィンドウ作成まで (8,923Views)
  • 細かいカスタマイズができるCSSフレームワーク、”Gumby FRAMEWORK” (6,899Views)
  • Twitter BootstrapベースのWordPress無料テーマ “Roots” (6,614Views)
  • tumblrのテーマに無限スクロール機能を追加する方法 (6,198Views)
  • 【Featherlight.js】テキストをライトボックスに表示できるjQueryプラグイン【jQueryプラグイン】 (6,197Views)
  • 超シンプルなスライダー機能実装プラグイン「Super Simpe Slider」設置で学ぶ、jQueryプラグイン設置入門

    2015年05月20日(水)
    2175Views

    この記事は執筆から1年以上経過しており、情報が古い可能性があります。

    その名の通りシンプルさが売りのjQueryスライダープラグイン「Super Simple Slider」。この記事では当プラグインの導入を通して、汎用的なjQueryプラグインの設置方法を解説します。

    はじめに

    Super Simpe Sliderはシンプルさが売りのjQueryスライダープラグインです。
    今回の記事では、jQueryプラグイン導入初心者の方に向けて、Super Simple Sliderをサンプルに、一般的なjQueryプラグインの導入方法をレクチャーします。

    Super Simple Slider 公式サイト
    Super. Simple. Slider.
    articleExplanationImage 52894

    jQueryプラグイン導入の3ステップ

    一般的なjQueryプラグインの導入手順はどれもほぼ同一で、以下の3ステップに分けられます。

    • ステップ1 必要なファイルをhtmlファイルに読み込ませる
    • ステップ2 htmlに必要な要素を記述する
    • ステップ3 オプションを記述する

    以下から、この3つのステップをひとつずつ解説します。

    ステップ1 必要なファイルをダウンロードして、htmlファイルに読み込ませる

    必要ファイルのダウンロード

    導入したいjQueryプラグインをみつけたら、まずは、該当プラグイン配布サイトから、プラグインファイルをダウンロードできるボタンもしくはリンクを探します。

    Super Simple Sliderでは、公式ページのナビゲーション部分に、「DOWNLOAD」ボタンがあり、ここをクリックすると、zipファイルのダウンロードが開始されます。

    公式サイト Super. Simple. Slider.
    articleExplanationImage 53179

    必要ファイルの移動

    ダウンロードしたzipを解凍します。

    解凍後、現れたファイルの中身のうち必要なファイルを制作中サイトのフォルダーへ移動します。
    必要なファイルについては、ほとんどの場合、プラグイン配布サイトに解説があります。

    Super Simple Sliderでは、フォルダー内にある「SSS」フォルダー一式を移動させるように記述されています。

    必要ファイルのhtmlファイルへの読み込み

    まずは、サンプルのコードを記載します。

    <html>
    
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="sss/sss.min.js"></script>
    <link rel="stylesheet" href="sss/sss.css" type="text/css" media="all">
    </head>
    
    <body>
    ~~
    </body>
    </html>
    

    htmlファイル<head>~</head>のなかにに、必要なファイルの読み込ませる記述をしています。
    Super Simple Sliderにおいては、下記のように、jQuery, the sss.js file and the sss.css fileを読み込ませるように、との記述があるので、それに従います。

    articleExplanationImage 53990

    サンプルコードでは、4~6行目が該当します。

    ファイル読み込みのコードを書く場所は、配布サイトで特別な指示がない限りこの<head>から</head>に囲まれた部分が無難です。

    多くのプラグインの配布元にあるサンプルコードでは、ファイルへのパスが仮のものになっていますので、ここは自分のサイトのディレクトリー構造に合わせてパスを書き換えます。

    jQuery本体ファイルについて

    jQuery本体ファイルは、jQueryプラグイン導入に必ず必要なファイルです。
    このファイルの読み込みは、jQuery公式サイトから、ファイルをダウンロードするか、上記サンプルにあるコードを使うことで、外部から読み込むことも可能です。

    読み込む順番について

    jQuery本体と、jQueryプラグインの順番は、かならずjQuery本体が先にくるように記述します。
    逆にすると動きません。

    また、プラグインを複数使用する場合でも、jQuery本体の読み込みは1度するだけで大丈夫です。

    ステップ2 htmlにプラグインの動作に必要な要素を記述する

    たとえば、スライダーを作成する場合、必要となる要素はスライドさせる画像です。

    jQueryプラグインでは、要素の書き方についてもプラグインごとに指定がある場合が多くあります。

    Super Simple Sliderでは、配布ページ内にて、下記の記述方法を指定しています。

    <div class="slider">
        <img src="images/image1.jpg" />
        <img src="images/image2.jpg" />
        <img src="images/image3.jpg" />
    <div><img src="images/image4.jpg" /><span class="caption">This one has a caption</span></div>
    </div>
    

    スライドさせる画像を並べ、外側を<div class=”slider”>~<div>で囲っています。
    当プラグインで、普通のコードと比べ少し特殊なのは、外側を囲うdivにsliderというクラス名をつけている、ということくらいです。

    クラス名をつける、ということは続けて解説する「ステップ3 オプションを記述する」に関係があります。

    ステップ3 オプションを記述する

    最後に、オプションを記述します。
    ここでは、「どの要素を動かすのか」「どのように動かすのか」という設定をします。
    以下、Super Simple Sliderでのオプションのコードを記載します。

    まずはオプションを何も指定していないコード

    <script>
    jQuery(function($) {
    $('.slider').sss();
    });
    </script>
    

    オプションをなにも設定しないと、プラグインで用意された初期設定がそのまま適用されます。

    続いてオプションを指定したコード

    <script>
    $('.slider').sss({
    slideShow : true, 
    startOn : 0, 
    transition : 400,
    speed : 3500,
    showNav : true
    });
    </script>
    

    Super Simple Sliderでは、自動アニメーションの有無や、スピード、ナビボタンの有無などのオプションを選択できます。

    オプションの記述方法についても、プラグインによって多少の違いはあれど、基本的にはどれも上記の形式を採用しています。

    オプションを記述する箇所

    オプションの記述箇所は、htmlファイル内の「その1 必要なファイルをhtmlファイルに読み込ませる」でプラグイン.jsファイルの読み込みを記述した下になります。
    Super Simple Sliderでは、sss.min.jsの下です。

    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="sss/sss.min.js"></script>
    <link rel="stylesheet" href="sss/sss.css" type="text/css" media="all">
    
    <script>
    jQuery(function($) {
    $('.slider').sss();
    });
    </script>
    </head>
    

    コード解説

    $(‘.slider’)というコードで、「htmlに必要な要素を記述する」の項目で記載したクラス名「.slider」を記述します。
    これで、「どの要素を動かすのか」を明確にします。
    「sliderという名前のクラスで囲ったなかの画像をスライダーにしますよ」という宣言です。

    つづいて「どのように動かすのか」を設定します。
    項目が用意されていて、そこにあらかじめ決められた値や数字を入力していきます。
    値の詳細はプラグイン配布サイトに記述があります。

    Super Simple Sliderにおいては、ページ内「OPTIONS」という項目にコードを書いて解説しています。

    全体のコード

    おわりに、Super Simple Sliderの実装に必要最低限のhtmlコードを記述します。

    <html>
        <head>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
            <script src="sss/sss.min.js"></script>
            <link rel="stylesheet" href="sss/sss.css" type="text/css" media="all">
    
            <script>
                jQuery(function($) {
                $('.slider').sss();
                });
            </script>
        </head>
        <body>
            <div class="slider">
                <img src="images/image1.jpg" />
                <img src="images/image2.jpg" />
                <img src="images/image3.jpg" />
            </div>
        </body>
    </html>
    

    まとめ

    一般的なjQueryプラグインについてはここまで解説した3ステップで、実装が可能です。 必要ファイルをhtmlファイルに読み込む、html要素を配布サイトのサンプルを元に書き込む、最後に「どの要素」を「どのように動かすのか」を記述する、です。

    おわりに

    この記事はあなたのお役にたてましたか?
    もしよろしければ・・・

    この記事をみんなに教える?


    筆者に何か教える?

    たとえば、 小棹制作所はこんなこと↓を知りたがっているようです。

    feedlyでブログを購読する?

    follow us in feedly

    筆者にメーッセージを送る?

    なんでもご自由に書いて送ってください。
    ご質問等返信を希望の場合は、メールアドレス等返信先の記載をお忘れなく。

    チェックを入れて送信してください

    Copyright (C) 2012 小棹制作所.
    All rights reserved.