月別アーカイブ: 2014年5月

jQuery：ウィンドウ内で画像の拡大表示をするプラグイン「Lightbox2」

Posted on by
返信

jQueryのプラグイン「Lightbox2」を使用したので設置方法を記載します。

Lightboxは画像やリンクなどをクリックした際に、
ウィンドウ内で画像を拡大表示することができるプラグインです。

「Lightbox2」

lightbox2_1

以前はLightboxを使用する場合、prototype.jsを使わなければいけなかった記憶がありますが、
今のバージョン（2.5以降）ではjQueryだけで設置できるようです。

prototypeとjQueryを共存させると動作がうまくいかないことがあり、
Lightboxをあまり使用していなかったのですが今後活用できそうです。

下記にjQueryのプラグイン「Lightbox2」を使用し、画像の拡大表示をさせた時の設置方法をメモします。

Lightboxのバージョンは「Lightbox v2.7.1」です。

■ Lightbox2の設置方法（使い方）

下記URLより、「Lightbox2」をダウンロードします。

http://lokeshdhakar.com/projects/lightbox2/

ダウンロードした「css」「js」「img」フォルダをサーバにアップロードします。

【共通で読み込むファイル】

jQueryと各ファイルを読み込みます。

<link rel="stylesheet" type="text/css" href="./css/lightbox.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript"  src="./js/lightbox.js"></script>

【HTML】

Lightbox2を使用する画像のリンクに「rel=”lightbox”」を記述します。

<a href="./image/sample.jpg" rel="lightbox"><img src="./image/thumb.jpg" /></a>

また、下記のように記述してもOKです。
aタグに「data-lightbox=”sample”」を追加しています
※「sample」は個別の値で設定します。

<a href="./image/sample.jpg" data-lightbox="sample"><img src="./image/thumb.jpg" /></a>

上記の設定をするだけで、Lightbox2を設置することができます。

■ Lightbox2で画像をグループ化する方法

複数の画像をグループ化して表示させたい場合があります。
下記のように記述するとグループ化することが可能です。

【HTML】

「rel=”lightbox[group]”」を記述します。

<a href="./image/sample1.jpg" rel="lightbox[group]"><img src="./image/thumb1.jpg" /></a>
<a href="./image/sample2.jpg" rel="lightbox[group]"><img src="./image/thumb2.jpg" /></a>
<a href="./image/sample3.jpg" rel="lightbox[group]"><img src="./image/thumb3.jpg" /></a>

または、下記のように記述します。
グループ化する場合「data-lightbox=”group”」の「group」を同じ値で設定します。

<a href="./image/sample1.jpg" data-lightbox="group"><img src="./image/thumb1.jpg" /></a>
<a href="./image/sample2.jpg" data-lightbox="group"><img src="./image/thumb2.jpg" /></a>
<a href="./image/sample3.jpg" data-lightbox="group"><img src="./image/thumb3.jpg" /></a>

■ キャプションを入れる場合

【HTML】

「title=”キャプション”」を記述します。

<a href="./image/sample.jpg" rel="lightbox" title="キャプション"><img src="./image/thumb.jpg" /></a>

または、下記のように記述します。

<a href="./image/sample.jpg" data-lightbox="sample" data-title="キャプション"><img src="./image/thumb.jpg" /></a>

とても簡単に設置することができるので、
拡大して表示したい画像がある場合などはおすすめです。

PHP：defineで定数の2重定義はエラーになる

Posted on by
返信

phpのdefineを使用し、定数を定義した時に同じ名前の定数を2重で定義するとエラーになります。

例えば下記のように、処理の中で同じ名前の定数を複数定義します。

define('TEST', 'テスト');

define('TEST', 'test');

echo TEST;

出力結果は1度目に定義した値が出力されます。

テスト

一度定義した定数は再定義することができないのです。

2重定義をすると、下記のようなエラーが返ってきます。

Constant TEST already defined

フレームワークなどを使用している場合、複数のファイルを読み込むことが多いので注意が必要です。
また、requireやincludeでファイルをインクルードしている場合も注意した方がいいと思います。

色々な箇所で定数を定義していると、2重定義をする可能性があるかもしれないので
定数を定義するファイルはなるべく一つにまとめた方がいいのかなと思います。

defined()関数を使用すれば、すでに定数が存在するかわかるので、
下記の方法で2重定義を防ぐことが可能です。

■ 2重定義を防ぐ方法

defined()はすでに定数が存在するか調べることができる関数です。
指定した値が定数で定義させている場合は「true」、定義されていない場合は「false」を返します。

なので、定義されていない場合に定数をセットするようにすればOKです。

if (!defined('TEST')) {
	define('TEST', 'テスト');
}

PHP：PHPで明日、昨日、来月、先月などの日付取得

Posted on by
2

PHPで日付を取得して処理をすることはよくあります。

現在の日付を取得するのはdate()関数を使用すればいいのですが、
「明日」「昨日」「来月」「先月」などの日付を取得する場合は、
strtotime()関数やmktime()関数を使用します。

忘れてしまうことが多いので、下記にメモします。

■ PHPで日付取得（明日、昨日、来月、先月）

※出力結果は2014年5月9日の場合

【今日の場合】

date('Y-m-d');

「出力結果」

2014-05-09

【明日の場合】

// strtotime()を使用した場合
date('Y-m-d', strtotime('+1 day'));

// mktime()を使用した場合
date('Y-m-d', mktime(0, 0, 0, date('n'), date('j') + 1, date('Y')));

「出力結果」

2014-05-10

【昨日の場合】

// strtotime()を使用した場合
date('Y-m-d', strtotime('-1 day'));

// mktime()を使用した場合
date('Y-m-d', mktime(0, 0, 0, date('n'), date('j') - 1, date('Y')));

「出力結果」

2014-05-08

【来月の場合】

// strtotime()を使用した場合
//date('Y-m', strtotime('+1 month'));
date('Y-m', strtotime(date('Y-m-1') . '+1 month'));

// mktime()を使用した場合
//date('Y-m', mktime(0, 0, 0, date('n') + 1, date('j'), date('Y')));
date('Y-m', mktime(0, 0, 0, date('n') + 1, 1, date('Y')));

「出力結果」

2014-06

【先月の場合】

// strtotime()を使用した場合
//date('Y-m', strtotime('-1 month'));
date('Y-m', strtotime(date('Y-m-1') . '-1 month'));

// mktime()を使用した場合
//date('Y-m', mktime(0, 0, 0, date('n') - 1, date('j'), date('Y')));
date('Y-m', mktime(0, 0, 0, date('n') - 1, 1, date('Y')));

「出力結果」

2014-04

※来月と先月の月の取得を訂正しました。

■ strtotime()関数のフォーマット

下記にstrtotime()関数でよく使用するフォーマットをメモします。
※「+1」の数値は取得したい値に変更できます。

フォーマット 内容
now 現在のタイムスタンプを取得
today 今日のタイムスタンプを取得
tomorrow 明日のタイムスタンプを取得
yesterday 昨日のタイムスタンプを取得
+1 day 1日後のタイムスタンプを取得
+1 week 1週間後のタイムスタンプを取得
+1 month 1ヵ月後のタイムスタンプを取得
+1 year 1年後のタイムスタンプを取得
+1 hour 1時間後のタイムスタンプを取得
+1 minute 1分後のタイムスタンプを取得
+1 second 1秒後のタイムスタンプを取得

上記以外にも色々な使い方があります。
フォーマットは複数組み合わせることも可能です。

jQuery：画像のスライドショーをするプラグイン「FlexSlider 2」

Posted on by
9

jQueryで画像のスライドショーを実装できるプラグインは色々ありますが、
今回「FlexSlider 2」を使用してみたので、設定方法をメモします。

「FlexSlider 2」

FlexSlider2_1

スライドショーさせる画像を用意し、jQueryで指定すれば
簡単に画像のスライドショーを実現することができます

下記にjQueryのプラグイン「FlexSlider 2」を使用して、
複数の画像をスライドショーさせた時の方法をメモします。

■ 「FlexSlider 2」を使用したスライドショーの使用方法

※下記、基本的な設定方法です。

下記URLより、「FlexSlider 2」をダウンロードします。

http://flexslider.woothemes.com/

【読み込むファイル】

jQueryと各ファイルを読み込みます。

<link rel="stylesheet" type="text/css" href="./flexslider.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript"  src="./jquery.flexslider.js"></script>

【JS】

クラスを指定し「flexslider」を使用します。

<script type="text/javascript">
$(function() {
    $('.flexslider').flexslider({
        animation: "slide",
        slideshowSpeed: 5000
    });
});
</script>

画像をスライドさせる為に「animation: “slide”」を指定します。
animationは「slide」と「fade」で設定することが可能です。

スライドショーのスピード（間隔）を「slideshowSpeed: 5000」で設定しています。

他にも設定は色々あります。
ページ下部に一部記載します。

【HTML】

スライドショーをさせる要素に「class=”flexslider”」を記述します。

<div class="flexslider">
    <ul class="slides">
        <li>
            <a href="https://www.google.co.jp/"><img src="./img/sample1.jpg" /></a>
        </li>
        <li>
            <img src="./img/sample2.jpg" />
            <p>キャプション</p>
        </li>
        <li>
            <img src="./img/sample3.jpg" />
        </li>
        <li>
            <img src="./img/sample4.jpg" />
        </li>
    </ul>
</div>

画像にリンクを貼る場合は、画像にaタグを指定すればリンクを貼ることが可能です。
また、キャプションを付ける場合はimgタグの箇所にpタグで指定します。

上記の設定をするだけでスライドショーを行えます。
スタイルがデフォルトの状態なので、デザインを変更する場合はCSSで調整します。

他にも色々なカスタマイズをすることが可能です。

オプション 内容
animation スライドの種類を設定します。「fade」か「slide」で指定します。
direction スライドの方向を設定します。横の場合「horizontal」、縦の場合「vertical」で指定します。
reverse 逆方向にスライドさせる場合は「true」を指定します。
animationLoop スライドをループさせるかを設定します。ループさせない場合は「false」を指定します。
slideshow 自動でスライドショーを行うかを設定します。手動にする場合は「false」を指定します。
slideshowSpeed スライドショーのスピード（間隔）を設定します。
animationSpeed アニメーションのスピードを設定します。
randomize ランダムでスライドショーをさせる場合は「true」で設定します。
controlNav ページャーを表示するかを設定します。表示しない場合は「false」を指定します。
directionNav 次へと前へのナビゲーションを表示するかを設定します。表示しない場合は「false」を指定します。
prevText 前へナビゲーションのテキストを指定します。
nextText 次へナビゲーションのテキストを指定します。

※上記は一部のオプションです。

他にも色々なオプションがあるので、様々なカスタマイズができそうです。
ぜひ、試してみてください。

SNS：Pocket（ポケット）ボタンの設置方法

Posted on by
返信

WEB上の記事や動画などを後で読む（後で見る）ことができる「Pocket」というサービスがあります。

「Pocket」

Pocket_1

使用してみると読みたい記事を今すぐではなく、時間がある時にあとで読むことができるので結構便利です。

アドオンやアプリなどもあります。

最近ではブログ等で「Pocket」ボタンを設置しているのを見ることが多くなってきました。

そのPocketボタンを設置した時の方法をご紹介します。

長い文章を書くブログなどでは、今は読めないけど後で読みたいという方がいると思うので、
ブログにPocketボタン設置しておいた方がいいと思います。

Pocketの利用者もどんどん増えてきているようなのでオススメです。

■ Pocket（ポケット）ボタンの設置方法

下記のURLにアクセスします。

http://getpocket.com/publisher/button

「Pocket Button」作成画面が表示されるので、使用したいポケットボタンのスタイルを選択します。

Pocket_2

選択すると設置するコードが表示されるので、コードをコピーします。

Pocket_3

下記がコピーしたコードになります。

<a data-pocket-label="pocket" data-pocket-count="vertical" data-lang="en"></a>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>

後はコピーしたコードをポケットボタンを設置したい箇所に貼り付けるだけでOKです。

WordPressで各記事に設置する場合は「data-save-url=”<?php the_permalink();?>”」を追加するようです。
下記のようにコードを変えるみたいですね。

<a data-pocket-label="pocket" data-pocket-count="vertical" data-lang="en" data-save-url="<?php the_permalink();?>"></a>

「Pocket」は本当に便利なサービスで使用する人も多いと思うので、
WordPress等のブログ運営をしている方は設置した方がいいと思います。