Topへ

開発ブログ(Blog)

bxSliderパラメータのまとめ

bxSliderという比較的メジャーなJqueryプラグインがありますが、そのパラメータをまとめてみました。

ご本家のURL:http://bxslider.com/
パラメータ 説明 デフォルト値
mode ‘horizontal’は水平移動、’vertical’は垂直移動, ‘fade’はフェード horizontal 'horizontal', 'vertical', 'fade'
speed スライドの遷移時間(単位はミリ秒) 500  
slideMargin サムネイル間の余白(単位はpx) 0  
startSlide 最初に表示するスライド番号(先頭は0) 0  
randomStart スライド表示をランダムに表示する false  
slideSelector スライドのセレクタを指定 '' 'div.slide'
infiniteLoop ループさせるか否か true  
hideControlOnEnd スライドが最後の時に、次へのリンクを消すか否か false  
easing イージングの設定※easingのプラグインが必要 null 'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'swing'
captions trueにすると、imgタグのtitleに設定したのが出ます。 false  
ticker 文字をスライドさせるか否か false  
tickerHover マウスをスライダーの上に置いたときにティッカーが一時停止します。注:この機能は、CSSのトランジションを使用している場合は動作しません! false  
adaptiveHeight スライドの高さが違う場合、それぞれ調節して合わせるかどうか false  
adaptiveHeightSpeed スライド高さ(ミリ秒)遷移時間。注:adaptiveHeight使用時のみ使用 500  
video すべてのスライドにビデオが含まれている場合は、これをtrueに設定してください。プラグインjquery.fitvids.jsが必要
詳細はhttp://fitvidsjs.com/を参照してください
false  
responsive 画面のサイズに合わせて自動調整する。注:固定幅のスライダーを使用する必要がある。 true  
useCSS 水平および垂直スライドアニメーションのために使用されます。 falseの場合、jQueryのanimate() が使用されます。 true  
preloadImages 「all」場合は、スライダーを開始する前に、すべての画像をプリロード。もし、スライダを開始する前に、最初に表示されるスライド内のイメージだけプリロードする場合「visible」を指定。(ヒント:すべてのスライドが同一の寸法であれば「visible」'を使用) ''visible' 'all', 'visible'
touchEnabled スワイプできるようにするか否か(スマートフォン) true  
swipeThreshold ピクセルの量。タッチスワイプ使用時は、スライドトランジションを実行するために超える必要がある。注:touchEnabled場合にのみ使用 50  
oneToOneTouch trueの場合、スワイプした時のイメージのスイッチの仕方を、指にひっつくように自在に動かす true  
preventDefaultSwipeX trueの場合、スワイプなどをx軸に沿って移動させない true  
preventDefaultSwipeY trueの場合、スワイプなどをy軸に沿って移動させない false  
<ページャ>      
パラメータ 説明 デフォルト値
pager ページャーの有無 true  
pagerType 「full」の場合は、ページャのリンクはスライドごとに生成されます。 「short」の場合、x/yのページャが使用されます(例:1/5)の場合 'full' 'full','short'
pagerShortSeparator pagerTypeを指定した場合:「short」の場合は、ペジャーは、区切り文字としてこの値を使用します ' / '  
pagerSelector 要素をページャに追加するために使用される。デフォルトでは、'bx-viewport'に追加されます ''  
pagerCustom 親要素は、ページャとして使用される。親要素は、各スライドに要素が含まれている必要があります null  
buildPager サムネイルページャーの指定 null  
<制御>      
パラメータ 説明 デフォルト値
controls 次へ、前へ等のコントロールの有無 true  
nextText 次へのテキスト 'Next'  
prevText 前へのテキスト 'Prev'  
nextSelector "次へ”矢印をカスタマイズするための記述 null  
prevSelectort "前へ”矢印をカスタマイズするための記述 null  
autoControls trueの場合、「スタート」/「停止」のコントロールが追加されます false  
startText 自動ボタンのテキスト 'Start'  
stopText ストップボタンのテキスト 'Stop'  
autoControlsCombine スライドショーのみを再生しているときは「停止」コントロールが表示されます false  
autoControlsSelector 自動制御する為の要素を指定 null jQuery selector
<自動制御>      
パラメータ 説明 デフォルト値
auto 自動スタート再生さるか否か false  
pause スライドの切り替えの間隔 4000  
autoStart 起動時に自動的にスライドショーを開始、falseの場合「スタート」コントロールがクリックされたときに、スライドショーが開始されます true  
autoDirection スライドショーの表示開始方向 'next' 'next','prev'
autoHover マウスをスライダーの上に置いたときにオートショーが一時停止します false  
autoDelay スライドショー開始前に指定時間(ミリ秒)遅延させる 0  
<カルーセル>      
パラメータ 説明 デフォルト値
minSlides 1スライドに表示するサムネイルの数 1  
maxSlides 1スライドに表示するサムネイルの最大数 1  
moveSlides 指定された値だけスライドします。 0  
slideWidth サムネイルの横幅(単位はpx) 0  

<メソッド>

getCurrentSlide (現在選択されているスライド番号を取得)
getSlideCount (スライドの総数を取得)

jqueryでチェックボックスをラジオボタンのように振る舞う方法

jqueryでチェックボックスをラジオボタンのように振る舞わせる方法

つい先日、jqueryの複数のバージョン使用していたwebアプリを整理していたところ、実装済の「チェックボックスをラジオボタンのように振る舞う処理」が誤動作するようになったため修正しました。その内容を掲載しておきます。
 
         $("input[id^='ALART_CHKBOX_']").on("click",function () {
             var flag = $(this).prop('checked');
             var reChecked = $(this).attr('checked'); //チェックされているチェックボックスを再度クリックした結果'undefined'が格納
             $("input[id^='ALART_CHKBOX_']").attr('checked', false);
             if (flag || typeof reChecked === "undefined") {
                 $(this).prop('checked', true);
             }
);
※checkboxやradioのチェック状態を調べる際にはattrではなくpropを使うのが良いとの記事を見かけ、調べたところ それぞれの実行結果の違いがあることがわかりました。 普通にチェックされている以外の項目を選択した場合はいいのですが、既にチェックされている項目を再度チェックするとflag=falseになり、reChecked=undefinedになります。 flgだけで判断するとチェックが外れてしまうことになりますので注意してください。
  チェックした時 チェックを外したとき
prop true false
attr checked undefined

<サンプル>

アラーム  
 

 

Microsoft SQL Serverの2008以前のバージョンを使用していて、webサーバーを運用されている場合の注意

2016412日にSQL Server 2005の延長サポートが終了します。(2008は2019年1月8日延長サポート終了)

SQL Serverの2008以前のバージョンですとweb Editionというものが存在していて、インターネットユーザ毎にCALを購入する必要のないエディションがあったのですが、2012以降はweb editionという考え方はなくなったようです(※ただしプロバイダ向けには存在している様子)。2012以上のstandardにバージョンを上げようとした場合、以下の選択肢しかないとのことです。
 
SQL Server 2014ライセンス価格
  ライセンス   Open Business Select Level A
選択肢1 コアライセンス ※購入単位は4コア単位なのでコアライセンスで購入する場合、667,000 円×2で1,334.000円が必要になる。 667,000 円
(2 コア パックの価格)
436,400 円
選択肢2 Standardのサーバー ライセンス   153,000 円 109,200 円
クライアント アクセス ライセンス (CAL) ユーザーあるいはデバイス数だけ必要
※認証処理にてログインする機能を提供する場合、そのユーザ数分必要になります。
  33,300 円 25,500 円

これだと、中小企業で多数の会員(認証が必要な)を持つwebサイトを運営している場合、かなりの負担増になると思われます。

そこで、いろいろ検討した結果をまとめました。
    メリット デメリット
選択肢1 SQL 2005をサポート切れのまま使い続ける 追加コストがかからない サポートがない以上、bugFixのupdateはなくなります。
選択肢2 SQL Server2014のExpressエディションに移行する 追加コストがかからない。 【機能制限がある】
主な制限
・dbのサイズが10GB
・利用可能なデータベースエンジンのインスタンス毎のメモリサイズが最大1GB
に限定されます。
・タスクスケジューラが利用できない。
※アクセス数の少ない小規模サイトなら問題なさそうです。
選択肢3 MySQLやProstgreSQLなど他のフリーのDBへ移行する 一回修正してしまえば、運用コストは低くなる。 プログラムのDBとのI/O部分の修正コストがかかる。
選択肢4 SQL Server Webエディションを利用できるVPSへ移行する 月額費用は発生するが、通常のライセンス契約するよりは安く抑えられる
※2015/4/8以降「さくらのVPS for Windows Server」でSQL ServerのWeb Editionだと4コアで初期費用:20,000円(税抜)月額2,400円で利用できます。
オンプレミス環境では利用できない

今後、別の方法が見つかった場合は追記していきます。