カテゴリー
SugiBlog Webエンジニアのためのお役立ちTips

jQueryプラグインでスライドショー「Slider Pro」

スライドショーを実装してくれるプラグインです。
IEでも動作し、レスポンシブにも対応しています。

JavaScriptライブラリをダウンロード
jQuery
Slider Pro

まずjQueryは必須です。

<script src="./jquery-1.9.1.min.js"></script>

次にSlider ProのスタイルシートやJSファイルを読み込みます。

<link rel="stylesheet" type="text/css" href="./slider-pro-master/dist/css/slider-pro.min.css" media="screen">
<link rel="stylesheet" type="text/css" href="./slider-pro-master/dist/css/examples.css" media="screen">

<script type="text/javascript" src="./slider-pro-master/dist/js/jquery.sliderPro.min.js"></script>

HTMLを記述します。

<div id="mySlider" class="mySlider slider-pro">

    <div class="sp-slides">

        <div class="sp-slide">

            <img class="sp-image" src="./slider-pro-master/src/css/images/blank.gif" data-src="[画像パス]" data-small="[サムネイル画像パス]">

            <p class="sp-layer sp-white sp-padding" data-horizontal="0" data-vertical="0" data-show-transition="left" data-show-delay="400">
                表示したいキャプション
            </p>

        </div>

    </div>

    <div class="sp-thumbnails">
        <img class="sp-thumbnail" src="[サムネイル画像パス]">
    </div>

</div>

キャプション部分のクラスとパラメーター

クラス
sp-layer キャプションを表示
sp-white 白背景に黒文字
sp-padding 10pxのパディングを設定
パラメーター
data-horizontal 水平固定位置を指定。数値、もしくはパーセンテージ。
data-vertical 垂直固定位置を指定。数値、もしくはパーセンテージ。
data-show-transition スライドの方向。(left, right, up, down)
data-show-delay 自動再生のスライド切り替え時間。単位:10ミリ秒

続きを読む…»

8,348 views

Exif情報を編集する

スマートフォンやデジカメで撮影した写真にはどの方向(縦か横)で撮影されたか、という情報も格納されています。
画像方向(Orientation)というデータです。

画像を扱うプログラムを組んでいて、画像方向を編集する必要があったのでメモしておきます。

using System.Drawing;

string imgFile = "読み込むファイル";
string saveFile = "保存先ファイル";

//画像を読み込む
Bitmap bmp = new Bitmap(imgFile);

for (int i = 0; i < bmp.PropertyItems.Length; i++)
{
    Imaging.PropertyItem pi = bmp.PropertyItems[i];

    //Exif情報から画像方向を取得
    if (pi.Id == 0x0112)
    {
        //値を変更。強制的に横向きとする
        pi.Value = System.Text.Encoding.ASCII.GetBytes("1\0");
        pi.Len = pi.Value.Length;

        //設定する
        bmp.SetPropertyItem(pi);

        //目的の値が見つかればループを抜ける
        break;
    }
}

//保存する
bmp.Save(saveFile, Imaging.ImageFormat.Jpeg);

//後処理
bmp.Dispose();

Exif情報のタグID等は以下URLを参照してください。
http://www.sno.phy.queensu.ca/~phil/exiftool/TagNames/EXIF.html

6,314 views

Excel 罫線等の定数まとめ【Access】

AccessからExcelを操作し、罫線等を設定する場合、私自身もいつも定数の値が何だったかいちいち調べているので、備忘録も兼ねて書いておきます。

まずは全体の流れ

Dim ws

Dim xlApp      As Object
Dim xlBook     As Object
Dim xlSheet    As Object
Dim FileName   As String

Set ws = CreateObject("WScript.Shell")

FileName = ws.SpecialFolders("Desktop") & "\雛形.xlsx"

Set xlApp = CreateObject("Excel.Application")
Set xlBook = xlApp.Workbooks.Open(FileName)
Set xlSheet = xlBook.WorkSheets(1)

With xlSheet
    'このブロック内に書いていきます
End With

'保存
xlBook.Save

xlBook.Close

xlApp.Application.Quit

Set xlSheet = Nothing
Set xlBook = Nothing
Set xlApp = Nothing

罫線を引く

.Range("A1:I1").Borders.LineStyle = 1
.Range("A1:I1").Borders(8).LineStyle = -4118
.Range("A1:I1").Borders(11).LineStyle = -4115
.Range("A1:I1").Borders(11).Weight = 1

続きを読む…»

17,801 views

呼吸を合わせる。そして最高のステージへ…。

前回はライヴでの音作りについて書きました。
今回はライヴで「呼吸を合わせる」ことについて書きたいと思います。

ライヴではよくグルーヴ感と言いますが、具体的にどういうことでしょうか?
メンバーのノリも良く、息もピッタリで生まれる一体感、これがグルーヴです。
ライヴではこれがあるととても気持ちいいです。

そしてこのグルーヴ、毎回出すって結構難しくないですか?
メンバーのメンタルやコンディションなどにより、出たり出なかったりしますよね。
でも、なるべく毎回出したいですよね?

そんな風に思ったらどうすればいいか?それは「呼吸を合わせる」ことです。
先ほども出てきましたが、息がピッタリということですね。

そして、具体的にどうすれば良いかと言いますと、 続きを読む…»

1,146 views

CSSだけでボタン装飾を作るサンプル

画像を使わずにそれっぽく見せる方法

HTML

<div id="sample_button_wrapper">
    <div id="sample_button_body">
        <a href="#">Sample Button</a>
    </div>
</div>

CSS

div#sample_button_wrapper {
    border-radius: 7px;
    background: #f5f5f5;
    border: 1px solid #ccc;
    display: inline-block;
    padding-bottom: 3px;
    box-shadow: 0 2px 3px #ccc;
}

div#sample_button_body {
    background: #fff;
    border-radius: 7px;
}

div#sample_button_body a {
    color: #333;
    text-decoration: none;
    display: block;
    padding: 8px 15px 5px 15px;
}

表示例)

色を付けたパターン

HTML

<div id="sample_button_wrapper2">
    <div id="sample_button_body2">
        <a href="#">Sample Button 2</a>
    </div>
</div>

CSS

div#sample_button_wrapper2 {
    border-radius: 7px;
    background: #006699;
    display: inline-block;
    padding-bottom: 5px;
    box-shadow: 0 2px 3px #999;
}
div#sample_button_body2 {
    background: #0099cc;
    border-radius: 7px;
}
div#sample_button_body2 a {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 8px 15px 4px 15px;
}

表示例)

1,781 views