テキストボックスを100個配置して、共通のOption要素を1つ用意するだけで良いので、表示速度が格段に速まります。また、絞り込み検索の機能も付けているので、Option要素が多くなっても問題無く利用できると思います。

jquery.smSearchInputSelector.js

Inputタグのテキストボックスをセレクトボックスのような選択式の要素に変換します。

予め用意しておいた、選択要素の中の値しか入力できません。

テキストボックスに文字列を入力すると、絞り込み検索を行います。

• jquery.smSearchInputSelector.js
• jquery.smSearchInputSelector.min.js

Options

追記：「selected」と「addfontsize」を追加しました。

data属性

CSS

/*
 * 選択リストのスタイルシート
 * .jsSearchInputSelectorは「classes.selector」と同じにする
 */
.jsSearchInputSelector{}
.jsSearchInputSelector.dropdown{ display:none; position:absolute; top:0; left:0; background-color:#fff; box-shadow:0 2px 3px rgba(0,0,0,0.2); }
.jsSearchInputSelector.dropdown div{ border:1px solid #7f9db9; }
.jsSearchInputSelector.dropdown dl dt{ padding:4px; }
.jsSearchInputSelector.dropdown dl dt p{ line-height:1; border:1px solid #c9c9c9; }
.jsSearchInputSelector.dropdown dl dt p input{ padding:4px 1%; width:98%; font-size:14px; border:none; }
.jsSearchInputSelector.dropdown dl dd{}
.jsSearchInputSelector.dropdown div ul{ margin:0; padding:0; list-style:none; overflow:auto; }
.jsSearchInputSelector.dropdown div ul li{ padding:1px 3px; color:#000; line-height:1; cursor:default; user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; }
.jsSearchInputSelector.dropdown div ul li.selected{ color:#fff; background-color:#aaa; }
.jsSearchInputSelector.dropdown div ul li:hover{ color:#fff; background-color:#1e90ff; }

記述例（Javascript）

/*
 * value : 値
 * name : 選択リストに表示する名称
 * search : 検索に該当する文字列
 */
var obj = [
    {value:'', name:'', search:''},
    {value:1, name:'hoge1', search:'hoge1ほげ1ホゲ1'},
    {value:2, name:'hoge2', search:'hoge2ほげ2ホゲ2'},
    {value:3, name:'hoge3', search:'hoge3ほげ3ホゲ3'},
];

$(function(){
    $('.selector').smSearchInputSelector({
        uniquename : 'selector',
        selector : obj,
        selected : function (val) {
            console.log(val);
        }
    });
});

記述例（HTML）

<!-- value属性に初期値を入れる場合は「obj」の「name値」を入れる。 -->
<div><input class="selector" type="text" name="hogehoge[]" data-value="" value="" /></div>
<div><input class="selector" type="text" name="hogehoge[]" data-value="2" value="hoge2" /></div>
<div><input class="selector" type="text" name="hogehoge[]" data-value="" value="" /></div>

• PHP: fopen - Manual

ファイルに書き出し

$path = $_SERVER['DOCUMENT_ROOT'].'/hoge/file.txt';
$handle = fopen($path, 'a+');

$str = "文字列1,文字列2\n";
fwrite($handle, $str);

fclose($handle);

ファイルを読み込み

$path = $_SERVER['DOCUMENT_ROOT'].'/hoge/file.txt';
$handle = fopen($path, 'r');

$file = fread($handle, filesize($path));

fclose($handle);

$file = explode("\n", $file);
foreach ($file as $row) {
    $cols = explode(',', $row);
    echo trim($cols[0]).' : '.trim($cols[1]).'<br>';
}

/*
 * 出力結果
 * 文字列1 : 文字列2
*/

jquery.smTheadfixed.js

対応するテーブルは、theadタグとtbodyタグを使った単純なテーブルで、rowspanやcolspanを使わないテーブルを想定しています。

テーブルの横幅は、固定と可変どちらでも対応するようにしています。

• jquery.smTheadfixed.js
• jquery.smTheadfixed.min.js

Options

記述例

tableタグにクラス名を指定、theadタグとtbodyタグを使用する。

<script type="text/javascript">
//<![CDATA[
    $(function(){
        $('.jsTheadfixed').smTheadfixed();
    });
//]]>
</script>

<table class="jsTheadfixed">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>AAA</td>
            <td>2014-01-01</td>
        </tr>
        <tr>
            <td>2</td>
            <td>BBB</td>
            <td>2014-02-01</td>
        </tr>
        <tr>
            <td>3</td>
            <td>CCC</td>
            <td>2014-03-01</td>
        </tr>
    </tbody>
</table>

// クリックイベントを設定する
$('p').on('click', function(e){
    console.log(e.type);
});

// 複数のイベントを同時に設定する
$('p').on('mouseover mouseout', function(e){
    console.log(e.type);
});

// 関数を使用してイベントを設定する
$('p').on('click', eventhandler(1));
function eventhandler(n) {
    console.log(n);
    return function (e) {
        console.log(e.type);
    };
}

イベントを削除する

// クリックイベントを削除する
$('p').off('click');

// 全てのイベントを削除する
$('p').off();

前回の記事はこちら→使えそうなPHPのユーザー定義関数いろいろ

文字列を検索ワード用に変換

指定の文字列をSQLの検索文字用に変換する関数。

// 1:文字列
function strConvertSearch($str) {
    if (!$str) return $str;
    $str = urldecode($str);
    $str = trim($str);
    $str = stripslashes($str);
    $str = mb_convert_kana($str, "aKs");
    $str = preg_replace('/\s+/', ' ', $str);
    return $str;
}

文字列を指定数ごとに折り返す

指定の文字列をn文字数間隔で折り返す、または文字列を挿入する関数。

// 1:文字列, 2:間隔数, 3:挿入文字（配列指定）
function strSplitByWidth($str = '', $width = 30, $deco = array()) {
    if (!$str) return '';
    $strs = explode("\n", $str);
    $deco[0] = !empty($deco[0]) ? (!$this->isNullEmpty($deco[0]) ? $deco[0] : '') : '';
    $deco[1] = !empty($deco[1]) ? (!$this->isNullEmpty($deco[1]) ? $deco[1] : "\n") : "\n";
    $result   = '';
    $i = 0;
    foreach ($strs as $str) {
        $str = trim($str);
        if ($str) {
            $position = 0;
            while ($part = mb_strimwidth($str, $position, $width)) {
                $position += mb_strlen($part);
                $result .= ($i ? $deco[0] : ''). $part. $deco[1];
                $i ++;
            }
        } else {
            $result .= $deco[1];
        }
    }
    return $result;
}

配列を指定文字区切りの文字列にして空の場合はNULLを返す

implode関数と同じ処理。配列の中身が空の場合はnullを返す。

※isNullEmpty関数は「使えそうなPHPのユーザー定義関数いろいろ」に記載しています。

// 1:文字列, 2:配列
function implode_null($str = '', $arr = array()) {
    if (!$arr) return null;
    $arr = is_array($arr) ? $arr : array($arr);
    $result = '';
    foreach ($arr as $value) {
        if (isNullEmpty($value)) continue;
        $result .= ($result ? $str : ''). $value;
    }
    return $result ? $result : null;
}

共通の値を配列から除外する

配列の値を比較して、同じ値があれば削除する関数。

// 1:基準配列, 2:削除配列
function array_exclusion($arr = array(), $ex_arr = array()) {
    if (!$arr || !$ex_arr) return $arr;
    $result = array();
    foreach ($arr as $key => $name) {
        if (!in_array($name, $ex_arr)) $result[$key] = $name;
    }
    return $result;
}

Google Calendar API v3の日付を取得

Google Calendar API v3を利用する時に使用する日付を取得する。

Google Calendar API v3に関しては「Google Calendar API v3を利用して祝日を取得してみた」を参照してください。

// 1:日付（配列での複数指定可）
function getGoogleHolidayDate($date = null) {
    $date = $date ? $date : date('Y-m-01');
    $dates = is_array($date) ? $date : array($date);
    asort($dates);
    $i = 0;
    $result = array('start'=>'', 'end'=>'');
    foreach ($dates as $date) {
        $datetime = strtotime($date);
        if (!$i) $result['start'] = date('Y-m-d', $datetime). 'T00:00:00Z';
        if ($i == count($dates)-1) $result['end'] = date('Y-m-01', strtotime('1month', $datetime)). 'T00:00:00Z';
        $i ++;
    }
    return $result;
}

NULL値と空文字の判定

NULLと空文字の場合のみtrueを返す関数。

// 1:文字列
function isNullEmpty($str) {
    if ($str) return false;
    $result = true;
    if ($str === 0 || $str === '0') $result = false;
    return $result;
}

文字列を配列に分割する（マルチバイト対応）

転載元：マルチバイト文字列を１文字ずつ配列に格納｜適当に語ってみるﾃｽﾂ

// 1:文字列, 2:文字コード
function mbStringToArray($sStr, $sEnc = 'UTF-8') {
    $aRes = array();
    while ($iLen = mb_strlen($sStr, $sEnc)) {
        array_push($aRes, mb_substr($sStr, 0, 1, $sEnc));
        $sStr = mb_substr($sStr, 1, $iLen, $sEnc);
    }
    return $aRes;
}

既存の日付かどうかをチャックする

「2014-02-31」のような存在しない日付が指定された場合、その月の最終日を返す関数。

// 1:日付（YYYY-MM-DD）
function getExistDate($date = null) {
    if (!$date) return null;
    $result = null;
    $date_time = strtotime($date);
    if ($date == date('Y-m-d', $date_time)) {
        $result = $date;
    } else {
        $result = date('Y-m-t', strtotime('-1month', $date_time));
    }
    return $result;
}

移動距離の度数を取得

指定された座標からの移動距離を度数にして返す関数。

参考：なんとなく始めてみた、プログラマー雑記 » データベース内の緯度・経度を利用して半径500m以内を検索する方法

// 1:緯度, 2:経度, 3:距離（メートル）
function getGeoMoveDistance($lat = 0, $lng = 0, $move = 100) {
    $earth_radius = 6356752.314; // 地球極半径
    $onedegree_second = 360 * 60 * 60; // 1秒
    $onesecond_degree = 1 / 60 / 60; // 1秒あたりの度数
    $lat_circle = $earth_radius * 2 * M_PI; // 円周（緯度）
    $lng_circle = $earth_radius * cos($lat / 180 * M_PI) * (2 * M_PI); // 円周（経度）
    return array(
        'latitude'=>$onesecond_degree * ($move / ($lat_circle / $onedegree_second)),
        'longitude'=>$onesecond_degree * ($move / ($lng_circle / $onedegree_second)),
    );
}

<div id="hoge"></div><!--この中にspanタグを追加する-->

<script type="text/javascript">
//<![CDATA[
    $(function(){
        // 要素を作成
        var elm = $(document.createElement('span'));

        // 要素の内容を指定
        elm.html('SPANタグ');

        // 要素の属性を指定
        elm.attr({'data-number':1});

        // 要素を追加
        $('#hoge').append(elm);

        // イベントの設定
        elm.on('click', function(){
            console.log($(this).data('number'));
        });
    });
//]]>
</script>

document.createElementNS

SVGのオブジェクトを生成する場合は「document.createElementNS」を使って生成する。

var svgns = 'http://www.w3.org/2000/svg'; // SVGの名前空間
var svg = $(document.createElementNS(svgns, 'svg'));

svgタグはインライン要素

Firefoxだとインライン要素の場合、オブジェクトの横幅が上手く取得できないので、ブロック要素にして取得する。

var svgns = 'http://www.w3.org/2000/svg';
var svg = $(document.createElementNS(svgns, 'svg'));
svg.appendTo($('div#hoge')); // div#hogeにSVGタグを追加
svg.attr({width:'100%', height:100}); // SVGに幅と高さを指定
svg.css('display', 'block'); // ブロック要素に変更
console.log(svg.width());

参考サイト

• SVG入門 (全14回) - プログラミングならドットインストール
• SVG Textのtext-anchor属性をつかってみた。 | CreativeStyle
• svg要素の基本的な使い方まとめ
• document.createElementNSの使い道 - おおにしあきらの日記
• span要素に対して指定したwidthがFirefoxでは無視される - ish-openspaceの日記

レスポンシブデザインやリキッドデザインのサイトを想定して、横幅が可変するように設計しています。

一応、IETesterでIE7・IE8は確認しましたが、基本的にクロスブラウザを意識していないのでご注意ください。

HTML

<form action="/" name="search" method="get">
    <dl class="search">
        <dt><input type="text" name="search" value="" placeholder="Search" /></dt>
        <dd><button><span></span></button></dd>
    </dl>
</form>

CSS

dl.search{
    position:relative;
    background-color:#fff;
    border:1px solid #aaa;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    -o-border-radius:6px;
    -ms-border-radius:6px;
    border-radius:6px;
}
dl.search dt{
    margin-right:40px;
    padding:8px 0 8px 8px;
}
dl.search dt input{
    width:100%;
    height:24px;
    line-height:24px;
    background:none;
    border:none;
}
dl.search dd{
    position:absolute;
    top:0;
    right:0;
}
dl.search dd button{
    display:block;
    padding:10px;
    background:none;
    border:none;
}
dl.search dd button span{
    display:block;
    width:20px;
    height:20px;
    background:url('/images/search.png') no-repeat scroll 0 0;
}

HTML

属性の値を「'（シングルクォーテーション）」で囲む。

配列やオブジェクトの値で文字列を使用する場合は「"（ダブルクォーテーション）」で囲まないと、配列やオブジェクトが文字列として認識されてしまう。

<div id="arr" date-arr='[1, 2, "c"]'>
    配列の場合
</div>
<div id="obj" date-obj='{"a":1, "b":2, "c":"c"}'>
    オブジェクトの場合
</div>

JavaScript (jQuery)

var arr = $('#arr').data('arr');
var obj = $('#obj').data('obj');

console.log(arr[0]); // 出力：1
console.log(obj.c);  // 出力：c

1000ミリ秒

PHPでタイムスタンプを取得した場合は秒形式の値が返されるけど、JavaScriptの場合はミリ秒形式の値が返ってくる。

JavaScriptで時間を求める時は、「1秒 = 1000ミリ秒」の値を加えて計算する。

Date.parse()

日時の文字列を解析して、ミリ秒形式の値を返すメソッド。

ただし「2000-01-01 00:00:00」のように日付に「-」が使われている場合は、NaNを返すので、「2000/01/01 00:00:00」に置換してから利用する。

var datetime = '2000-01-01 12:30:00';
var datetime_parse = datetime.replace(/-/g, '/'); // ハイフンをスラッシュに置換する
datetime_parse = Date.parse(datetime_parse); // ミリ秒形式の値に変換

date.setTime()

Dateクラスのオブジェクトに、新たな時間を設定できるメソッド。

値を設定する場合は、setTime()の引数にミリ秒形式の値を設定して利用する。

var d = new Date();
var datetime = '2000-01-01 12:30:00';
var datetime_parse = datetime.replace(/-/g, '/');
datetime_parse = Date.parse(datetime_parse);
d.setTime(datetime_parse); // datetimeの時間を設定

指定日時から20時間後の値を求める

var d = new Date()
    , one_sec = 1000 // 1秒
    , one_min = one_sec * 60 // 1分
    , one_hour = one_min * 60 // 1時間
    , datetime = '2000-01-01 08:45:50'
    , datetime_a = datetime.replace(/-/g, '/')
    , datetime_parse = Date.parse(datetime_a)
    , datetime_20h = datetime_parse + (one_hour * 20);
d.setTime(datetime_20h);
console.log(d);
/*
出力結果 : Sun Jan 02 2000 04:45:50 GMT+0900 (東京 (標準時))
*/

時間の差を求める

var one_sec = 1000 // 1秒
    , one_min = one_sec * 60 // 1分
    , one_hour = one_min * 60 // 1時間
    , datetime_a = '2000-01-01 08:45:50'
    , datetime_b = '2000-01-01 16:33:30';
datetime_a = datetime_a.replace(/-/g, '/');
datetime_b = datetime_b.replace(/-/g, '/');

var diff = Date.parse(datetime_b) - Date.parse(datetime_a)
    , diff_h = Math.floor(diff / one_hour) // 時間
    , diff_m = Math.floor(diff % one_hour / one_min) // 分
    , diff_s = Math.floor(diff % one_min / one_sec); // 秒
console.log(diff_h + '時間' + diff_m + '分' + diff_s + '秒');
/*
出力結果 : 7時間47分40秒
*/

参考サイト

• CASE式のススメ

下記のような「item」テーブルが存在した場合の、CASE式を使ったSELECT文とUPDATE文のサンプルコードをメモ。

`price`の大きさに応じて変化する、`flag`カラムを追加したデータを取得するSQL

<?php
$sql = 'SELECT `id`,`name`,`price`,`ranking`,'
     . 'CASE'
     . ' WHEN `price` <= 10 THEN 1'
     . ' WHEN `price` > 10 AND `price` <= 100 THEN 2'
     . ' WHEN `price` > 100 AND `price` <= 1000 THEN 3'
     . ' WHEN `price` > 1000 AND `price` <= 10000 THEN 4'
     . ' WHEN `price` > 10000 THEN 5'
     . ' ELSE 0 END `flag` FROM `item`';
?>

特定のID以外の`ranking`に99を代入にして更新するSQL

<?php
$sql = 'UPDATE `item` SET'
     . ' `ranking` = CASE'
     . ' WHEN `id` = 1 THEN 1' // りんご
     . ' WHEN `id` = 6 THEN 2' // にぼし
     . ' WHEN `id` = 3 THEN 3' // ラッパ
     . ' WHEN `id` = 4 THEN 4' // パンダ
     . ' WHEN `id` = 7 THEN 5' // シリコン
     . ' ELSE 99 END'
     . ' WHERE `price` > 0';
?>

祝日を取得するなら、PEARのDate_Holidays_Japanを利用しても良かったんだけど、CakePHP内で利用するのが面倒そうだったので、Google Calendar APIを使ってみました。

まずは、Google Calendar APIを利用できるように下準備を

• Google APIs ConsoleでCalendar APIのステータスをONにする
• Google API keyを取得する
• 参考ページ（Googleカレンダーを使って祝日の情報を取得する - DoboWiki）

※参考ページでは、Google Calendar APIのバージョン2と3の取得方法が記載されているので、バージョン3を参考にしてください。

Google APIs Consoleで必要な設定を行ったら、お決まりのURLを入力すれば、JSONデータが返されるので取得完了です。

今回のサンプルコードは、PHPでの取得方法を記載しています。

<?php
// Google Calendar API v3 (Holiday)
$holiday_type = urlencode('ja.japanese#holiday@group.v.calendar.google.com');
$google_api_key = '{Google API Key}';
$time_min = date('Y-m-01'). 'T00:00:00Z'; // RFC3339形式
$time_max = date('Y-m-01', strtotime('1month')). 'T00:00:00Z';
$google_holiday_jp_url = 'https://www.googleapis.com/calendar/v3/calendars/'. $holiday_type. '/events'
    . '?key='. $google_api_key // Google API key
    . '&timeMin='. $time_min   // 取得開始日
    . '&timeMax='. $time_max   // 取得終了日（終了日の前日までしか取得しない）
    . '&maxResults=20'         // 取得数
    . '&orderBy=startTime'     // 並び順
    . '&singleEvents=true';    // ???

$result = file_get_contents($google_holiday_jp_url);
$result = json_decode($result);
if (!empty($result->items)) {
    foreach ($result->items as $value) {
        $title = (string) $value->summary;
        $date = (string) $value->start->date;
        $holidays[$date] = $title;
    }
}
?>

タイトルだけだと、いまいちピンとこないので、一から順番に説明を。

Smartyのテンプレート構文をDBに登録する

Smartyのテンプレート側で利用する、変数や関数を記入したテキストデータを登録しておく。

<?php
// 下記のようなテキストをDBに登録
$tplval1 = '私は{$result.name}です。<br />';
$tplval2 = '年齢は{$result.age|number_format}歳です。';
?>

テンプレートファイルを書き換える

変更可能なテンプレートファイルを用意して置いて、内容を上記のテキストデータに書き換える。

<?php
// ファイルデータを書き換える関数
function outputTmp($file, $filepath, $value) {
    $fp = fopen($url, "w+");
    $fw = fwrite($fp, $value);
    fclose($fp);
    return $file;
}
?>

fetch()でテンプレートを出力する

第3引数を指定しないと、前回と同じ内容のデータが返ってくる。

<?php
$smarty->assign("result", array( // Smarty変数定義
    'name' => 'HOGE',
    'age' => 9999,
));
$file = 'temp/output.tpl'; // TPLファイルの場所
$filepath = $_SERVER['DOCUMENT_ROOT']. '/templates/'. $file; // ファイルパス

echo '1. '. $smarty->fetch(outputTmp($file, $filepath, $tplval1), NULL, "name");
echo '2. '. $smarty->fetch(outputTmp($file, $filepath, $tplval2), NULL, "age");
/*
出力 : 1. 私はHOGEです。
出力 : 2. 年齢は9,999歳です。
*/
?>

テンプレートのテンプレートみたいになってるので、無意味な感じもしますが...。

まあ、ポジティブにみれば、FTPを使用せずに、Smartyの変数やら関数やらIF文やらが編集できるみたいな...。

注意

iPhone／iPad の場合は「input type=file」が対応してないので（正確にはSafariが、Opera Miniは対応している。）、別の方法を採るしかない。

追記：iOS 6から「input type=file」が対応されている。

enctype属性とMAX_FILE_SIZE

ファイルのアップロードをする場合は、formタグにenctype属性を指定しないと、ファイルデータが送信されない。

MAX_FILE_SIZEを指定しておくとサイズオーバーの時、早い段階で処理を中断してくれるので長時間の処理待ちを防ぐ事ができます。ただし、MAX_FILE_SIZEを指定してもPHP側の最大サイズが変わる事はありません。

<form action="/" method="post" id="upload" name="upload" enctype="multipart/form-data">
    <!-- 1024 = 1KB -->
    <input type="hidden" name="MAX_FILE_SIZE" value="1024" />
    <input type="file" name="upload_file" />
    <input type="submit" name="submit" value="Upload" />
</form>

送信されたデータを取得する

送信されたファイルデータは「$_FILES」に格納される。「$_POST」じゃないので注意。

<?php
$file = $_FILES['upload_file'];
$tmp_name = $file['tmp_name']; // 一時ファイルのパス
?>

ファイルデータを判別して画像リソースを取得する

<?php
$tmp_size = getimagesize($tmp_name); // 一時ファイルの情報を取得
$img = $extension = null;
switch ($tmp_size[2]) { // 画像の種類を判別
    case 1 : // GIF
        $img = imageCreateFromGIF($tmp_name);
        $extension = 'gif';
        break;
    case 2 : // JPEG
        $img = imageCreateFromJPEG($tmp_name);
        $extension = 'jpg';
        break;
    case 3 : // PNG
        $img = imageCreateFromPNG($tmp_name);
        $extension = 'png';
        break;
    default : break;
}
?>

保存時のファイル名を作成する

保存先に指定するディレクトリ（/upload）のパーミッションを「0744」または「0777」に変更しておく。

<?php
$save_dir = '/images/upload/';
$save_filename = date('YmdHis');
$save_basename = $save_filename. '.'. $extension;
$save_path = $_SERVER["DOCUMENT_ROOT"]. $save_dir. $save_basename;
while (file_exists($save_path)) { // 同名ファイルがあればファイル名を変更する
    $save_filename .= mt_rand(0, 9);
    $save_basename = $save_filename. '.'. $extension;
    $save_path = $_SERVER["DOCUMENT_ROOT"]. $save_dir. $save_basename;
}
?>

新しく画像データを作成する

アップロードされたファイルをそのまま保存したくないので、画像リソースを元に画像のサイズを変更したデータを作成します。

<?php
$img_size = getImageSize($img, 500); // 最大500pxの画像サイズ
$out = imageCreateTrueColor($img_size['w1'], $img_size['h1']); // 新しい画像データ

// 画像サイズを変更する関数
function getImageSize($img = null, $maxsize = 300) {
    if (!$img) return false;
    $w0 = $w1 = imageSx($img); // 画像リソースの幅
    $h0 = $h1 = imageSy($img); // 画像リソースの高さ
    if ($w0 > $maxsize) { // $maxsize以下の大きさに変更する
        $w1 = $maxsize;
        $h1 = (int) $h0 * ($maxsize / $w0);
    }
    if ($h1 > $maxsize) {
        $w1 = (int) $w1 * ($maxsize / $h1);
        $h1 = $maxsize;
    }

    return array(
        'w0'=>$w0, // 元画像の幅
        'h0'=>$h0, // 元画像の高さ
        'w1'=>$w1, // 保存画像の幅
        'h1'=>$h1, // 保存画像の高さ
    );
}
?>

新しい画像データにアップロードファイルの情報をコピーする

<?php
// 背景色を設定する
$color_white = imageColorAllocate($out, 255, 255, 255); // 色データを作成
imageFill($out, 0, 0, $color_white);

// $imgの画像情報を$outにコピーする
imageCopyResampled(
    $out, // コピー先
    $img, // コピー元
    0, 0, 0, 0, // 座標（コピー先:x, コピー先:y, コピー元:x, コピー元:y）
    $img_size['w1'], $img_size['h1'], $img_size['w0'], $img_size['h0'] // サイズ（コピー先:幅, コピー先:高さ, コピー元:幅, コピー元:高さ）
);
?>

新しい画像データを保存する

<?php
saveImage($out, $save_path, $extension);

// 画像を保存する関数
function saveImage($img = null, $file = null, $ext = null) {
    if (!$img || !$file || !$ext) return false;
    switch ($ext) {
        case "jpg" :
            $result = imageJPEG($img, $file);
            break;
        case "gif" :
            $result = imageGIF($img, $file);
            break;
        case "png" :
            $result = imagePNG($img, $file);
            break;
        default : return false; break;
    }
    chmod($file, 0644); // パーミッション変更
    return $result;
}
?>

Spreadsheet_Excel_Writer

• PEARライブラリなので有名
• BIFF5（Excel95）に対応
• BIFF8（Excel97～2003）は、パッチをすれば対応できるらしい

Excel_Reviser

• 日本の方が製作したので日本語対応（良）
• BIFF8（Excel97～2003）に対応
• PHP4.4.1以降 PHP5.1.1以降に対応

Flash記事ばっかりで、2、3年前の記事なので役に立つかどうか分からないけど、もったいないので...。

移植リスト

• スラローム？
• タイピングゲーム
• 形状記憶スライム
• お絵描き
• AIRをやってみよう
• 忘れやすい自分に対してのメモ - その 1（クロスドメイン）-
• SoundMixer.computeSpectrumの問題点
• サウンドイコライザ
• 波打つMC
• Soundの処理
• 色とりどりに（2）>>続き
• 色とりどりに（2）
• 花火
• 文字を順番に
• 色とりどりに
• オセロのクラス化
• ゴム？
• とりえずASクラスを使ってみる

• Google+ APIを使ってみた（下準備編）
• Google+ APIを使ってみた（PHP編）
• Google+ APIを使ってみた（JavaScript編）

今回の「JavaScript編」はSNS系のサイトによくある、下の方までスクロールしたら次の記事を読み込んで表示する処理をメモしておきます。

用意するモノと参考にしたモノ

• JSONデータ（前回書いた記事で作成した配列をJSON形式で出力）
• jQuery
• ボックス内をスクロールすると自動でコンテンツをロードするjQuery - かちびと. net（参考サイト）
• ボックス内をスクロールすると自動でコンテンツをロードするjQueryをちょっと変えてみた | QUOIT Blog（参考サイト）

HTML

HTML5でサポートされた、data属性を利用するコードに修正（2013/07/24）しました。

「data-nextpage」には、Google+ APIから取得できる”nextPageToken”を代入する。

「data-url」には、Google+ APIのデータを取得出来るURLを代入する。前回の記事で加工したデータを利用する。

<div id="googleplus" data-nextpage="" data-url="/ajax/googleplus.php">
    <!-- この中に記事を挿入していく -->
</div>

scrolloader.js

ページの残りが、一定の高さより下回ったら、$.ajax()で次のデータを取得するオブジェクト。

/*
 * スクロールで自動ロードをするオブジェクト
 */
var scrolloader = function (options) {
    var t = this;
    options = options ? options : {};

    t.isloader = false; // ロード判定
    t.iniload = options.iniload ? true : false; // 初期ロードの有無
    t.offset = !isNaN(options.offset) ? options.offset : 300; // ロードを行う基準値
    t.nextpage = '';
    t.url = '';
    t.target = options.target ? options.target : $('#scrolloader'); // データを追加するコンテンツ
    t.window = options.window ? options.window : $(window); // スクロールするコンテンツ
    t.document = options.document ? options.document : $(document); // スクロール内のコンテンツ
    t.customhtml = typeof options.customhtml == 'function' ? options.customhtml : null;

    t.initial();
};
scrolloader.prototype = {
    initial : function () { // 初期設定
        if (!this.target.size()) return false;
        if (this.iniload) this.load(true);
    },
    scroll : function () { // スクロール時の設定
        if (!this.target.size()) return false;
        if (this.offset > this.getRestHeight()) {
            this.load(false);
        }
    },
    load : function (init) { // データ読込
        var t = this;
        if (t.isloader) return false; // ロード判定がTRUEの場合は処理をしない
        var target = t.target;
        t.nextpage = target.data('nextpage');
        t.url = target.data('url');

        // "nextpage"が存在する場合と、"init"がTRUE場合のみ処理をする
        if (t.nextpage || init) {
            t.isloader = true; // ロード判定をTRUEにする
            $.ajax({
                type : 'post',
                dataType : 'json',
                url : t.url,
                data : {nextpage:encodeURIComponent(t.nextpage)},
                timeout : 10000,
                error : function () {
                    console.log('File Load Error.');
                },
                success : function (obj) {
                    var html = t.getHtml(obj.items);
                    if (html) {
                        target.append(html);
                        target.data('nextpage', obj.nextpage); // "nextpage"を更新
                        t.isloader = false; // ロード判定をFALSEにする
                    } else {
                        console.log('Data Error.');
                    }
                }
            });
        }
    },
    getHtml : function (data) { // HTML取得
        if (!data) return false;
        if (this.customhtml) return this.customhtml(data);
        var html = '';
        for (var i = 0; i < data.length; i++) {
            html += '<dl>\
                <dt>' + data[i].title + '</dt>\
                <dd>' + data[i].description + '</dd>\
                </dl>';
        }
        return html;
    },
    getRestHeight : function () { // ページの残りを取得
        var scroll = this.window.scrollTop(); // スクロールした距離
        var winH = this.window.height(); // ウィンドウ（表示領域）の高さ
        var docH = this.document.height(); // ページ（全体）の高さ
        return docH - (winH + scroll);
    }
};

scrolloader.jsを実行する

HTMLの読込完了時に”scrolloader”のオブジェクトを生成する。初期値を設定できるので、変更したい値がある場合は指定する。

スクロールイベント時に”scrolloader”のスクロール関数を実行させる。

/*
 * 読込完了時
 */
var sl = null;
$(function(){
    sl = new scrolloader({
        target : $('#googleplus'),
        iniload : true, // 初期ロード有り
        offset : 100, // 残りが100pxを下回ったら実行する
        customhtml : function (data) { // カスタムHTMLを設定
            var html = '';
            for (var i = 0; i < data.length; i++) {
                html += '<dl>\
                    <dt>' + data[i].item_title + '</dt>\
                    <dd>' + data[i].item_content + '</dd>\
                    </dl>';
            }
            return html;
        }
    });
});

/*
 * スクロール時
 */
$(window).scroll(function(){
    sl.scroll();
});

• Google+ APIを使ってみた（下準備編）
• Google+ APIを使ってみた（PHP編）
• Google+ APIを使ってみた（JavaScript編）

Google+に登録した共有記事を取得するには、特定のURLを打ち込めば「JSON形式」で返してくれるので、別にPHPを使わなくてもいいんだけど、項目数が多いので必要最低限の情報を取得して加工する事に。

Google+ APIの共有記事を取得するURL

リクエストしたデータに”nextPageToken”という値があるので、その値を”pageToken”に指定する事ができます。

<?php
// URLのパラメータ
$user_id = 'XXXXXXXXXXXXXXXXXXXXX'; // [必須] Google+のID（Google+のURLにある10桁以上の数値）
$max_result = 10; // 読込記事の数（初期値20、1～100まで指定可能）
$page_token = ''; // 読込記事の位置（指定しなかった場合は、最新記事から取得する）
$api_key = 'XXXXXXXXXXXXXXXXXXXXX'; // [必須] Google API key（Google apisで取得する）

$url = 'https://www.googleapis.com/plus/v1/people/'. $user_id. '/activities/public'
    . '?maxResults='. $max_result
    . '&pageToken='. $page_token
    . '&key='. $api_key;
?>

データの取得と加工

値をそのまま利用すると、オブジェクトとして認識される場合があるので、型キャストを行って文字列に変換しています。

<?php
// データ取得
$data = file_get_contents($url);
$data = json_decode($data); // オブジェクトに変換（PHP5.2以上で利用可）

// データ加工
$result = array('nextpage'=>'', 'items'=>array());
if (count($data->items)) {
    $result['nextpage'] = $data->nextPageToken; // 前の記事を読み込む時に使用する

    foreach ($data->items as $key => $value) {
        $result['items'][] = array(
            'url'          => (string) $value->url, // Google+個別記事のURL
            'actor_name'   => (string) $value->actor->displayName, // Google+登録者名
            'actor_url'    => (string) $value->actor->url, // // Google+登録者URL
            'actor_img'    => (string) $value->actor->image->url, // Google+登録者画像URL
            'item_url'     => (string) $value->object->url, // Google+個別記事のURL（urlと同じ?）
            'item_title'   => (string) $value->object->attachments[0]->displayName, // 記事タイトル
            'item_content' => (string) $value->object->attachments[0]->content, // 記事内容
            'item_link'    => (string) $value->object->attachments[0]->url, // 元記事URL
            'item_img'     => (string) $value->object->attachments[0]->fullImage->url, // 記事画像URL
            'item_img2'    => (string) $value->object->attachments[0]->image->url, // 記事画像(小)URL
            'datetime'     => date("Y-m-d H:i:s", strtotime($value->published)), // 登録日
        );
    }
}
?>

JSONデータとして出力

PHPでJSONデータを扱う場合は、PHPのバージョンを5.2以上にしておくと「json_encode」と「json_decode」が使えるので便利です。

PHP5.1以下の場合は、PEARの「Services_JSON」を利用してください。

<?php
// JSONのHTTPヘッダを指定して出力
header("Content-Type: text/javascript; charset=utf-8");
echo json_encode($result);
exit();
?>

• とあるサイトを作成中にチェックボックス・ラジオボタン・インプットイメージの横幅が、IE7だけ異常な事に気づく。
• IETesterのバグだと思い放置。
• サイト完成間近で、やっぱり気になるのでSpoon Browser Sandboxで確認してみるとIETesterと同じだった。
• 混じりっけ無しのinputタグだったので、CSSを検証してみる事に。
• 原因判明：dt input[size="20"]{width:200px;}
• ここの記述が原因で、横幅が異常だった。
• なんで？って感じだけど、試しにsizeの値を変えたら直った。
• 問題解決：dt input[size="18"]{width:200px;}

なぜこんな事が起こったのかは分からないけど、とりあえず次からは「input[size="20"]{}」は使わないでおこう。