2015年6月 – 端くれプログラマの備忘録

[MySQL] ランダムにレコードを取得する

2015年6月30日2015年8月28日 @84kure

RAND()を使う場合のパフォーマンス上の留意点など、参考サイト。

MySQLでSQLのみを使用してランダム取得を劇的に早くする方法 – 僕のススメ。
http://d.hatena.ne.jp/steel-plate/20110227/1298804869

MySQLでランダムにレコードをselectする。パフォーマンス対策３つ。 – mtomizの日記
http://d.hatena.ne.jp/mtomiz/20080125/1201277390

How does it feel?: MySQLからデータをサンプリングして取得する
http://itsneatlife.blogspot.com/2013/07/mysql.html

MySQL の RAND 関数の引数 – ngの日記
http://ngyuki.hatenablog.com/entry/20120614/p1

[MySQL] 比較対象のカラムは型を意識しなければならない

2015年6月29日2015年8月28日 @84kure

要注意。

//文字列として比較されてしまう
SELECT * FROM sales WHERE '2015-02-01' BETWEEN start_date AND end_date;

//キャストすることで日付として比較
SELECT * FROM sales WHERE CAST('2015-02-01' AS DATE) BETWEEN start_date AND end_date;

//文字列として比較されてしまう

SELECT * FROM sales WHERE '2015-02-01' BETWEEN start_date AND end_date;

//キャストすることで日付として比較

SELECT * FROM sales WHERE CAST('2015-02-01' AS DATE) BETWEEN start_date AND end_date;

参考サイト

MySQLの日付比較 – まつぼ x Web
http://matsu.teraren.com/blog/2010/07/27/mysql-date-string/

MySQL _ 日付期間比較
http://www45.atpages.jp/miztools/cake2.php/memo/mysql_date

[MySQL] XAMPPでMySQLのバージョンを調べる

2015年6月28日2015年8月28日 @84kure

phpMyAdminのHomeに明示されてる。

SQLクエリーでも取得できる。

SELECT version();
5.6.21

1 2	SELECT version(); 5.6.21

参考サイト

バージョンを調べる方法【MySQL】 – Programming Magic
http://www.programming-magic.com/20071001011822/

[ソフト] Performance-Analyser – ウェブページのパフォーマンスを解析

2015年6月27日2015年8月27日 @84kure

Performance-Analyserは、ウェブページのパフォーマンスを解析して可視化してくれるブックマークレット。Resource Timing API、Navigation Timing API、User-Timingを使っているので、それらをサポートしたブラウザでなければ動作しない。

セットアップ

ブックマークレット

javascript:(function(){var el=document.createElement('script');el.type='text/javascript';el.src='https://micmro.github.io/performance-bookmarklet/dist/performanceBookmarklet.min.js';el.onerror=function(){alert("Looks like the Content Security Policy directive is blocking the use of bookmarklets\n\nYou can copy and paste the content of:\n\n\"https://micmro.github.io/performance-bookmarklet/dist/performanceBookmarklet.min.js\"\n\ninto your console instead\n\n(link is in console already)");console.log("https://micmro.github.io/performance-bookmarklet/dist/performanceBookmarklet.min.js");};document.getElementsByTagName('body')[0].appendChild(el);})();

javascript:(function(){var el=document.createElement('script');el.type='text/javascript';el.src='https://micmro.github.io/performance-bookmarklet/dist/performanceBookmarklet.min.js';el.onerror=function(){alert("Looks like the Content Security Policy directive is blocking the use of bookmarklets\n\nYou can copy and paste the content of:\n\n\"https://micmro.github.io/performance-bookmarklet/dist/performanceBookmarklet.min.js\"\n\ninto your console instead\n\n(link is in console already)");console.log("https://micmro.github.io/performance-bookmarklet/dist/performanceBookmarklet.min.js");};document.getElementsByTagName('body')[0].appendChild(el);})();

Chromeエクステンション

Performance-Analyser – Chrome ウェブストア
https://chrome.google.com/webstore/detail/performance-analyser/djgfmlohefpomchfabngccpbaflcahjf

使い方

ページのロードが終わったら、ブックマークレットかエクステンションのアイコンをクリックすることで解析結果が表示される。ウェブページのチューンアップのためのツールとして便利そう。

参考サイト

micmro/performance-bookmarklet
https://github.com/micmro/performance-bookmarklet

[ソフト] PerfMap – ウェブページのロード時間をヒートマップ化

2015年6月26日2015年8月27日 @84kure

PerfMapは、ウェブページのロード時間をヒートマップ化してくれるブックマークレット。Resource Timing APIを使っているので、それをサポートしたブラウザでなければ動作しない。

セットアップ

ブックマークレット

javascript:(function(){var el=document.createElement('script');el.src='https://zeman.github.io/perfmap/perfmap.js';document.body.appendChild(el);})();

1	javascript:(function(){var el=document.createElement('script');el.src='https://zeman.github.io/perfmap/perfmap.js';document.body.appendChild(el);})();

Chromeエクステンション

Perfmap – Chrome Web Store
https://chrome.google.com/webstore/detail/perfmap/hgpnhiajcdppfbogcpfdgcceepgkhdmk?hl=en&gl=GB

使い方

ページのロードが終わったら、ブックマークレットかエクステンションのアイコンをクリックすることでヒートマップが表示される。

ヒートマップに示される色とms値は、画像のロードが完了した時間を示している。すなわち、ユーザが画像を目にするまでの時間。そして、カッコ内の数字は画像のロードだけに要した時間を示している。

ページ下端の凡例はページ全体のロード時間を示している。ヒートマップ上をマウスでポイントすると、その画像がロードされたタイミングを凡例上にインジケータで示してくれる。

ページのロード時間はブラウザ組み込みの開発者向けツールなどを使っても知ることができるけど、ヒートマップとして可視化されると、どの要素がボトルネックになっているのか一目瞭然だ。ウェブページのチューンアップのためのツールとして便利に使えそう。

参考サイト

zeman/perfmap
https://github.com/zeman/perfmap

[Webサービス] PageSpeed Insights – ページの表示時間を採点

2015年6月25日2015年8月26日 @84kure

PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/

PageSpeed Insights について | PageSpeed Insights | Google Developers
https://developers.google.com/speed/docs/insights/about?hl=ja

[jQuery] AjaxでJSONデータを読み込む

2015年6月24日2015年8月26日 @84kure

サンプル

サーバーから最新のドル円レートをJSON形式で取得して、フロントエンドのUS$価格にJPY換算価格を付記する。

フロントエンド

<script>
$(function() {
    $.ajax({
        url: 'currency.php',
        type: 'POST',
        dataType: 'json',
        contentType: 'application/json',
    }).done(function(data) {
        var rate = data.USD;
        $(".price").each(function() {
           var usd = $(this).attr('data-value');
           var jpy = Math.floor(usd * rate);
           $('.jpy', this).text('(円換算 ' + jpy + '円)');
        })
    }).fail(function(data) {
        console.log('failed');
    });
});
</script>
        
<h1>Prices</h1>
<ul>
    <li class="price" data-value="19.99">$19.99 <span class="jpy"></span></li>
    <li class="price" data-value="29.99">$29.99 <span class="jpy"></span></li>
    <li class="price" data-value="39.99">$39.99 <span class="jpy"></span></li>
    <li class="price" data-value="49.99">$49.99 <span class="jpy"></span></li>
</ul>

$(function() {

$.ajax({

url: 'currency.php',

type: 'POST',

dataType: 'json',

contentType: 'application/json',

}).done(function(data) {

var rate = data.USD;

$(".price").each(function() {

var usd = $(this).attr('data-value');

var jpy = Math.floor(usd * rate);

$('.jpy', this).text('(円換算 ' + jpy + '円)');

})

}).fail(function(data) {

console.log('failed');

});

</script>

<h1>Prices</h1>

<ul>

</ul>

currency.php

<?php

$usd = function(); //ドル円レートを取得

$array = array('USD' => $rate);
echo json_encode($array);

?>

<?php

$usd = function(); //ドル円レートを取得

$array = array('USD' => $rate);

echo json_encode($array);

参考サイト

Ajax – jQuery 入門
http://jquery.keicode.com/basics/ajax.php

jQueryを使ったAjaxに関するサンプル集
http://alphasis.info/jquery-api/gyakubiki/ajax/

jQuery.ajax() | jQuery API Documentation
http://api.jquery.com/jquery.ajax/

jQuery.ajax(options) – jQuery 日本語リファレンス
http://semooh.jp/jquery/api/ajax/jQuery.ajax/options/

[jQuery] thisの子要素を取得する

2015年6月23日2015年8月26日 @84kure

$("foo",this)
$(this).children("foo")
$(this).find("foo")

$("foo",this)

$(this).children("foo")

$(this).find("foo")

サンプル

<script>
$(function() {
    $(".item").click(function() {
        $('.notify',this).text(' was clicked!');
    });
});
</script>
        
<div class="item">Item1 <span class="notify"></span></div>
<div class="item">Item2 <span class="notify"></span></div>
<div class="item">Item3 <span class="notify"></span></div>

$(function() {

$(".item").click(function() {

$('.notify',this).text(' was clicked!');

});

</script>

参考サイト

jQueryでthisの子要素を取得するやり方いろいろ | Base Views
http://baseviews.com/program/jquery-get-child-elements-of-this.html

【jQuery】 $(this)の親要素、子要素、隣接要素を指定する | WEB制作ブログ
https://www.markernet.co.jp/blog/2014/08/22/post-2493/

[JavsScript] 数字を3桁ずつカンマで区切って表示する

2015年6月22日2015年8月26日 @84kure

正規表現を使えば簡単らしい。正規表現不勉強の僕には理解が困難だけど(汗

String( num ).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,' );

1	String( num ).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,' );

JavaScriptで数値を桁区切り (カンマ区切り) にする方法
http://so-zou.jp/web-app/tech/programming/javascript/grammar/data-type/string/comma-formatting.htm

参考サイト

正規表現の構文
https://msdn.microsoft.com/ja-jp/library/Cc392020.aspx

JavaScript – 数値をカンマ区切りにする – Qiita
http://qiita.com/zawascript/items/922b5db574ef2b126069

[JavaScript] 基本メモ: 数値の丸め、切捨て、切り上げ

2015年6月21日2015年8月26日 @84kure

整数化する

var a = Math.round(3.1415);  //丸め (=3)
var c = Math.floor(3.1415);  //切捨て (=3)
var b = Math.ceil(3.1415);   //切り上げ (=4)

var a = Math.round(3.1415); //丸め (=3)

var c = Math.floor(3.1415); //切捨て (=3)

var b = Math.ceil(3.1415); //切り上げ (=4)

小数点以下2桁にする

var a = Math.round(3.1415 * 100) / 100;  //丸め (=3.14)
var a = Math.floor(3.1415 * 100) / 100;  //切捨て (=3.14)
var a = Math.ceil(3.1415 * 100) / 100;   //切り上げ (=3.15)

var a = Math.round(3.1415 * 100) / 100; //丸め (=3.14)

var a = Math.floor(3.1415 * 100) / 100; //切捨て (=3.14)

var a = Math.ceil(3.1415 * 100) / 100; //切り上げ (=3.15)

少数点の精度に関する参考サイト

javascriptの小数点端数処理についていったん整理する | yosiopp
http://yosiopp.net/archives/1096

JavaScriptによる小数計算の誤差を無くす : アシアルブログ
http://blog.asial.co.jp/1191