参考サイト

Posted by muchag | Spreadsheet | 2015-01-11 (日) 13:37:55

裏ワザ集

ferret:【ビジネスマン必見】Googleスプレッドシートの裏ワザ・アドオン・ショートカット16選

Spreadsheet | 2015-01-11 (日) 13:37:55 |

Slider Pro

Posted by muchag | jQuery,Library & PlugIn & AddIn | 2015-01-02 (金) 17:53:43

多機能スライドショー。
公式サイト
デモも同サイトにある。

【環境】
[jQuery] 1.11.0
[Slider Pro] 1.1.0
DL

公式TOP の中ほど下にある「Get the jQuery plugin」
または、GitHub の Slider Pro のプロジェクトページ から DL。
同 GitHub プロジェクトページにコマンドによる DL(インストール)手法も紹介されている。

 

セッティング
head
  1. <link rel="stylesheet" href="css/slider-pro.min.css" />

 

body
本体
  1. <div class="slider-pro" id="my-slider">
  2.     <div class="sp-slides">
  3.         <!-- Slide 1 -->
  4.         <div class="sp-slide">
  5.             <img class="sp-image" src="img/image1.jpg"/>
  6.         </div>
  7.  
  8.         <!-- Slide 2 -->
  9.         <div class="sp-slide">
  10.             <img class="sp-image" src="img/image2.jpg"/>
  11.         </div>
  12.  
  13.         <!-- Slide 3 -->
  14.         <div class="sp-slide">
  15.             <img class="sp-image" src="img/image3.jpg"/>
  16.         </div>
  17.     </div>
  18. </div>

 

実行

フッタ部分(body 最下部)へ記述。

  1. <script src="js/jquery-1.11.0.min.js"></script>
  2. <script src="js/jquery.sliderPro.min.js"></script>
  3. <script type="text/javascript">
  4.     // 実行部分
  5.     jQuery( document ).ready(function( $ ) {
  6.         $( '#my-slider' ).sliderPro();
  7.     });
  8.  
  9.     // JavaScript API。オプション(プロパティ)設定
  10.     $( '#my-slider' ).sliderPro({
  11.         width: 960,
  12.         height: 500,
  13.         arrows: true,
  14.         buttons: false,
  15.         waitForLayers: true,
  16.         fade: true,
  17.         autoplay: false,
  18.         autoScaleLayers: false
  19.     });
  20. </script>

オプション一覧
JavaScript API

オプション名 内容 デフォルト値
備考
width スライダーの横幅 500
px(数値のみ) か %(クォーテーションで括る)で指定。
height スライダーの高さ 300
px(数値のみ) か %(クォーテーションで括る)で指定。
responsive true
aspectRatio アスペクト比 -1
imageScaleMode 画像自動拡縮モード ‘cover’
‘cover’:スライド全体に合うようにリサイズ
‘contain’:画像全体がスライドの中に納まるように?
‘exact’:スライドのサイズに合わせる
‘none’:何もせず
centerImage true
autoHeight 高さの自動調節 false
スライドに合わせた高さの自動調節
startSlide 開始スライド番号 0
shuffle シャッフル false
orientation スライド方向 ‘horizontal’
‘horizontal’:水平方向
‘vertical’:垂直方向
buttons マーカーボタンの表示 true
スライド下部に表示される、現在地を示す、スライドを切り替えるボタンを表示する
keyboard キーボード操作 true
左右キー(← →)を有効にする
thumbnailWidth サムネイル幅 100
thumbnailHeight サムネイル高さ 80
thumbnailsPosition サムネイル配置場所 ‘bottom’
スライドの ‘top’, ‘bottom’, ‘right’ and ‘left’
thumbnailPointer アクティブマーカー false
アクティブなサムネイルにマーカーを付ける
thumbnailArrows false
fadeThumbnailArrows false
thumbnailTouchSwipe true

※まだまだいっぱいあるけど、力尽きた・・・
訳間違いも可能性大なので、公式サイト(JavaScript API) を参照のこと。
 

サムネイル付
  1. <div class="slider-pro" id="my-slider">
  2.     <div class="sp-slides">
  3.         <!-- Slide 1 -->
  4.         <div class="sp-slide">
  5.             <img class="sp-image" src="img/image1.jpg"/>
  6.         </div>
  7.  
  8.         <!-- Slide 2 -->
  9.         <div class="sp-slide">
  10.             <img class="sp-image" src="img/image2.jpg"/>
  11.         </div>
  12.  
  13.         <!-- Slide 3 -->
  14.         <div class="sp-slide">
  15.             <img class="sp-image" src="img/image3.jpg"/>
  16.         </div>
  17.     </div>
  18.  
  19.     <!-- サムネイル部分 -->
  20.     <div class="sp-thumbnails">
  21.         <img class="sp-thumbnail" src="img/thumbnail/image1.jpg"/>
  22.         <img class="sp-thumbnail" src="img/thumbnail/image2.jpg"/>
  23.         <img class="sp-thumbnail" src="img/thumbnail/image3.jpg"/>
  24.     </div>
  25. </div>

 
次はオプション。
関係がありそうなもののデフォルト値を並べてみた。

  1. <script type="text/javascript">
  2.     $( '#my-slider' ).sliderPro({
  3.         thumbnailWidth: 100,
  4.         thumbnailHeight: 80,
  5.         thumbnailsPosition: 'bottom',
  6.         thumbnailPointer: false,
  7.         thumbnailArrows: false,
  8.         fadeThumbnailArrows: true,
  9.         thumbnailTouchSwipe: true
  10.     });
  11. </script>

 

参考元サイト

coliss:[JS]スライダーのスクリプトを探しているなら絶対チェックした方がいいスクリプト -Slider Pro
Gimmick log:万能スライダー Slider Pro の使い方
→具体例がたくさんあって、参考になる
STERFIELD:クールでカッコイイいろんな機能満載のスライダー「Slider Pro」jqueryプラグイン
→オプションの説明がある

jQuery,Library & PlugIn & AddIn | 2015-01-02 (金) 17:53:43 |

blueberry

Posted by muchag | jQuery,Library & PlugIn & AddIn | 2015-01-02 (金) 14:55:51

画像を準備するだけで簡単だった♪

【環境】
[jQuery] 1.6.1
DL

公式サイト から DL。
デモも同サイトTOPにある。
 

セッティング
head
  1. <link rel="stylesheet" href="css/blueberry.css" />
  2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  3. <script src="js/jquery.blueberry.js"></script>

 

body
本体
  1. <div class="blueberry">
  2.     <ul class="slides">
  3.         <li><img src="img/slide1.jpg" /></li>
  4.         <li><img src="img/slide2.jpg" /></li>
  5.         <li><img src="img/slide3.jpg" /></li>
  6.         <li><img src="img/slide4.jpg" /></li>
  7.     </ul>
  8. </div>

上記だけ記載すれば、blueberry 側でオプションを自動でくっつけてくれ
実際のコードは下記のように出力される。

  1. <div class="blueberry">
  2.     <ul class="slides">
  3.         <li><img src="img/slide1.jpg" /></li>
  4.         <li><img src="img/slide2.jpg" /></li>
  5.         <li><img src="img/slide3.jpg" /></li>
  6.         <li><img src="img/slide4.jpg" /></li>
  7.     </ul>
  8. <!-- Optional, see options below -->
  9.     <ul class="pager">
  10.         <li><a href="#"><span></span></a></li>
  11.         <li><a href="#"><span></span></a></li>
  12.         <li><a href="#"><span></span></a></li>
  13.         <li><a href="#"><span></span></a></li>
  14.     </ul>
  15. <!-- Optional, see options below -->
  16. </div>

 

実行
  1. <script>
  2.     $(window).load(function() {
  3.         $('.blueberry').blueberry();
  4.     });    
  5. </script>

 

CSS

スライドショーのサイズは親エレメントに依存するので
下記のような設定は任意。

  1. .blueberry { max-width: 960px; }

 

jquery.blueberry.js
  1. var defaults = {
  2.     interval: 5000,
  3.     duration: 500,
  4.     lineheight: 1,
  5.     height: 'auto', //reserved
  6.     hoverpause: false,
  7.     pager: true,
  8.     nav: true, //reserved
  9.     keynav: true
  10. }

 

参考元サイト

coliss:[JS]実装は簡単、機能は最小限、Responsiveデザイン対応の超シンプルなスライダーのスクリプト -Blueberry

jQuery,Library & PlugIn & AddIn | 2015-01-02 (金) 14:55:51 |

シンボリック リンク

Posted by muchag | Windows,コマンドプロンプト | 2015-01-01 (木) 15:09:53

長らくプロジェクトディレクトリと作業ディレクトリを分けていて、面倒だな~と思っていた。
今日、突然、「そうだ! シンボリック リンク を張ればいいんでないかしら」と思った。(遅

【環境】
[Windows] 7 Home SP1

グーグル先生に質問をしてみたところ

  • ハードリンク
  • ソフトリンク
    • ジャンクション
    • シンボリック リンク

という種類があるとのこと。

Windows では mklink というコマンドを使うらしい。

1回読んだだけでは、ピンとはこなかったけど
一応ちこっとだけ書き込み。
後々追記。
 

ハードリンク

1つの実態に複数のパスを登録するもの。
1つ目はもちろんデフォルトのパス。
その他に疑似パスを Windows へ登録しておくものみたい。

同一ボリューム上のファイルにのみ有効。
 

ソフトリンク
ジャンクション

同一PC上のフォルダにのみ有効。
 

シンボリック リンク

この機能が実装されたのはWindows Vista/Windows Server 2008以降。
管理者権限 で実行すること。

  1. // ファイルの場合
  2. $ mklink リンク ターゲット
  3.  
  4. // フォルダの場合
  5. $ mklink /D リンク ターゲット

※リンク=虚体、ターゲット=実体

注意点

リンク側を、先に Windows 上で作成してしまうとエラーになる。
ファイルを先に作るようなことはないかもしれないけど、フォルダも作っておいてはいけない。

 

スペース文字

パスを記述する際に、Program Files など、半角スペースの入ったディレクトリ名やらファイル名があると、コマンド実行時にエラーになる。
その時は、パスを “”(ダブルクォーテーション)で括ってやれば OK !

Linux 風

参考サイトを読む限り、下記で上手くいくと思ったんだけど
残念ながら、ダメ だった。。。

寧ろ、Windows 書式のままで読み込んだ。
ん~、前の時は、Windows 書式だとダメだった気がするんだけどな~。

サーバーOS:Linux
ローカルOS:Windows
というときに、パスの書式が異なるので困ることがある。

そういうときは、シンボリックリンクを利用して、Windows 書式を Linux 書式に変換することができる。
便利~♪

  1. // OK
  2. # mklink /d hoge C:\hoge
  3.  
  4. // NG
  5. # mklink /d hoge/moge C:\hoge

但し、/(スラッシュ)は使えないので、対象ディレクトリに名前を付けるイメージ。

参考サイト

+++ 上野メモ帳 +++:WindowsだけどLinux風のパスを使いたい(2010-10-20)

参考元サイト

Windowsでシンボリックリンクを作る
@IT:シンボリック・リンクとジャンクションとハードリンクの違い
 

2015-01-23 追記
削除
  1. // ファイルの場合(未検証)
  2. $ del リンク
  3.  
  4. // フォルダの場合
  5. $ rmdir リンク

※リンク=虚体

でも、普通にGUIで削除してよいらしい。。。(未検証)

Windows,コマンドプロンプト | 2015-01-01 (木) 15:09:53 |

Windows Index

Posted by muchag | Windows | 2015-01-01 (木) 14:04:27

丸っきりの書きかけ項目は Not found になる。

Tips
  1. CLI
    1. コマンドプロンプト
    2. シンボリック リンク
    3. ディレクトリ構成をツリー状で取得
  2. リストア
    1. PC のリストア
    2. アプリのリストア 2015-01-28
  3. フォント
    1. 等幅メイリオ
  4. その他
    1. C ドライブの掃除
    2. VPN
    3. Windows10 の画面明るさ調整
参考

その他各参考サイトについては、各エントリーにて。

Windows | 2015-01-01 (木) 14:04:27 |
« 前ページへ