Date and Time

Posted by muchag | MySQL |
初回投稿:2015-02-12 (木) 21:50:26 | 最終更新:2015-02-14 (土) 1:08:28

日付関数は便利~! 😎
MySQL の勉強は遅れてしまってるにゃ><

【環境】
MySQL:5.5.27, 5.5.38

MySQL:12.7 Date and Time Functions
 
DATE, TIME, DATETIME, TIMESTAMP, YEAR 型のフィールドに対して使える関数。

YEAR, MONTH, DAY, DAYNAME

YEAR(date):年だけ返す
MONTH(date):月だけ返す
DAY(date):日だけ返す
DAYNAME(date):曜日だけ返す
※ date は日付型のカラム名
 

  1. mysql> SELECT YEAR('1987-01-01');
  2.         -> 1987
  3.  
  4. mysql> SELECT MONTH('2008-02-03');
  5.         -> 2

これを hoge テーブルに使うと

  1. mysql> SELECT YEAR(date) as year, num FROM hoge;
year num
2014 3
2014 2
2015 6

これだと、だから? ってなっちゃうけど、集計を考えるとすぐわかる。
 

集計

年別の個数集計は、下記のように取れる。

  1. mysql> SELECT YEAR(date) as year, SUM(num) FROM hoge GROUP BY YEAR(date);
year num
2014 5
2015 6

素敵~♪
 

DATE_FORMAT

MySQL:DATE_FORMAT(date,format)
日付データをフォーマットして返す

  1. SELECT DISTINCT DATE_FORMAT( date, "%Y-%m" ) FROM table

これで date カラムのデータを YYYY-MM というフォーマットへ変換し
重複行を除いて取り出してくれる。

フォーマット指定方法については、マニュアル参照。
 

EXTRACT

MySQL:EXTRACT(unit FROM date)
EXTRACT():指定した部分だけ返す

YEAR なんかの複合型。

  1. mysql> SELECT EXTRACT(YEAR FROM '2009-07-02');
  2.        -> 2009
  3. mysql> SELECT EXTRACT(YEAR_MONTH FROM '2009-07-02 01:02:03');
  4.        -> 200907
  5. mysql> SELECT EXTRACT(DAY_MINUTE FROM '2009-07-02 01:02:03');
  6.        -> 20102
  7. mysql> SELECT EXTRACT(MICROSECOND
  8.     ->                FROM '2003-01-02 10:30:00.000123');
  9.         -> 123

これもすごい~!
 

参考サイト

FLATZ:MySQLの知っていると便利な構文(その2)
→2007年の記事なのに、検索の2番目に出てきた。すごいね~。ありがとうございます!

Posted by muchag | MySQL |
初回投稿:2015-02-12 (木) 21:50:26 | 最終更新:2015-02-14 (土) 1:08:28

定義済み定数

Posted by muchag | PHP |
初回投稿:2015-02-11 (水) 18:19:13 | 最終更新:2015-02-11 (水) 18:19:13


デバッグ時に、クラス名と行番号を表示できたらな~、と思い調べてみたら、なんとできそう♪

PHP マニュアル
自動的に定義される定数
定義済みの定数

これの「自動的に定義される定数」を利用してやってみたんだけど、うまくいかない。。。
なんでかしらね~。

Posted by muchag | PHP |
初回投稿:2015-02-11 (水) 18:19:13 | 最終更新:2015-02-11 (水) 18:19:13

prop メソッドと attr メソッドの違い

Posted by muchag | jQuery |
初回投稿:2015-02-11 (水) 18:10:45 | 最終更新:2016-09-20 (火) 22:39:41

わかりやすい解説を見つけた。

attrは、HTML属性を取得する、propはjavascriptでの属性を取得する。

true か falseはjavascriptでの属性。

Qiita:jqueryでチェックボックスにチェックを入れるにはpropを使え。

参考サイト

BuildINSIDER:要素のプロパティを取得/設定するには?(prop)

Posted by muchag | jQuery |
初回投稿:2015-02-11 (水) 18:10:45 | 最終更新:2016-09-20 (火) 22:39:41

要素の指定記法

Posted by muchag | jQuery |
初回投稿:2015-02-11 (水) 18:07:29 | 最終更新:2015-02-11 (水) 18:07:29

参考サイトのコードを、理解の浅いまま使い回してはまった。

文字列 -> 検索(部分一致
こちらの記事を書いているときに、問題が起きた
 

現象
  1. <div id="test">
  2.     <button id="hoge_1"></button>
  3.     <button id="hoge_2"></button>
  4. </div>
  1. // 反応しない
  2. $("button [id *= 'hoge_']").hide();
  3.  
  4. // 反応する
  5. $("#test [id *= 'hoge_']").hide();

 

解決

よく見てみれば当たり前のことで
CSS と同じだから、スペースがあると 別の DOM 要素 と判定される。

  1. $("button[id *= 'hoge_']").hide();

これで想定通りに動作した。

Posted by muchag | jQuery |
初回投稿:2015-02-11 (水) 18:07:29 | 最終更新:2015-02-11 (水) 18:07:29

ページの読込

Posted by muchag | jQuery |
初回投稿:2015-02-11 (水) 16:34:22 | 最終更新:2017-01-04 (水) 10:45:14

参考サイトをメモ。

書式

Ajax(Low-Level Interface)
1.8 からこの書式。

  1. $.ajax({
  2.  
  3.     url: 'test.php'
  4. })
  5. .done(function(data, status, xhr) {
  6.  
  7.     // 通信成功時の処理
  8. })
  9. .fail(function(xhr, status, error) {
  10.  
  11.     // 通信失敗時の処理
  12. }).always(function(arg1, status, arg2) {
  13.  
  14.     // 通信完了時の処理
  15. });
  1. $.ajax({
  2.  
  3.     url: 'test.php',
  4.     type: 'POST',
  5.     timeout: 10000
  6. })
  7. .done(function(data, status, xhr) {
  8.  
  9.     $('#result').html(data);
  10. })
  11. .fail(function(xhr, status, error) {
  12.  
  13.     $('#log').append('xhr.status = ' + xhr.status + '<br />');          // 例: 404
  14.     $('#log').append('xhr.statusText = ' + xhr.statusText + '<br />');  // 例: Not Found
  15.     $('#log').append('status = ' + status + '<br />');                  // 例: error
  16.     $('#log').append('error = ' + error + '<br />');                    // 例: Not Found
  17. });
返却値の利用
  1. $.ajax({
  2.  
  3.     url: 'test.php'
  4. })
  5. .done(function(data, status, xhr) {
  6.  
  7.     // これで JSON Object として扱える
  8.     var response = $.parseJSON(data);
  9. })
  10. .fail(function(xhr, status, error) {
  11.  
  12.     // 通信失敗時の処理
  13. })
  14. .always(function(arg1, status, arg2) {
  15.  
  16.     // 通信完了時の処理
  17. });
参考サイト

とほほのWWW入門:jQuery入門 Ajax
→いつもいつもお世話になっております!

Crunchtimer:[jQuery] Ajaxの.loadと.post(.get)の違いについて

Designup:jQueryでAjax 画面遷移なしでデータを読み込む方法
→現在のページの指定箇所へ読み込む方法が載っている

Posted by muchag | jQuery |
初回投稿:2015-02-11 (水) 16:34:22 | 最終更新:2017-01-04 (水) 10:45:14

フォームデータの送信

Posted by muchag | jQuery |
初回投稿:2015-02-11 (水) 16:31:51 | 最終更新:2015-02-11 (水) 16:31:51

参考サイトだけ残しておく。

参考サイト

小粋空間:jQueryでフォームデータを送信する方法のまとめ
小粋空間:jQueryでajax()の重複実行を回避する方法

Posted by muchag | jQuery |
初回投稿:2015-02-11 (水) 16:31:51 | 最終更新:2015-02-11 (水) 16:31:51

ジェネレーター

Posted by muchag | Tool |
初回投稿:2015-02-11 (水) 16:02:04 | 最終更新:2016-04-17 (日) 21:57:54
Now Loading

Now Loading 用の GIF アニメーション画像のジェネレーター。

gif-loadLoader Generator

LOADING.IO

Posted by muchag | Tool |
初回投稿:2015-02-11 (水) 16:02:04 | 最終更新:2016-04-17 (日) 21:57:54

jquery.pjax.js (defunkt 版)

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-02-11 (水) 15:20:23 | 最終更新:2015-02-18 (水) 15:29:09

AjaxpushState を組み合わせた技術らしい。

【環境】
jQuery:2.1.3
pjax(defunkt):1.9.4
概要
差し替え機能

とあるページの指定部分を別ページの指定部分を差し替える。
玉突き式。
 

URL 変更機能

別ページの URL へ切り替える。
 

効能

ページの一部だけ差し替えたいときは、レンダリングの手間が削減される。
 

インストール

GitHub:defunkt/jquery-pjax から DL して配置。

falsandtru 版 と呼ばれる別バージョンもあるそうなので

jquery.pjax.defunkt.js

とリネームして配置。
 

使い方
ライブラリの読込
  1. <script src="jquery.min.js"></script>
  2. <script src="jquery.pjax.defunkt.js"></script>

 

ファイルの配置
index.html
  1. <body>
  2.     <div>pjax before.</div>
  3.  
  4.     <div id="container">
  5.         <div><button>pjax before.</button></div>
  6.     </div>
  7.  
  8.     <script type="text/javascript">
  9.     $( document ).ready( function() {
  10.  
  11.         $( 'button' ).click( function() {
  12.  
  13.             $.pjax({
  14.                 url: 'pjax_test.php';
  15.                 container: '#container',
  16.                 fragment:  '#container_new'
  17.             });
  18.         });
  19.     });
  20.     </script>
  21. </body>

 

pjax_test.html
  1. <body>
  2.     <div>pjax after.</div>
  3.  
  4.     <div id="container_new">
  5.  
  6.         <div>pjax after. Good Job!</div>
  7.  
  8.     </div>
  9. </body>

 

結果

これで試すと、container の外にある
pjax before.
の部分はそのままで、container の中だけ切り替わる。
 

連続

ところが、1度の差し替えは上述でできたものの、
連続差し替えは上手くいかなかった。
 
そこで1枚のページで差し替えるタイプにしたら、連続して動作した。

index.php
  1. <body>
  2.     <div id="container">
  3.         <div id="test">
  4.             <button id="hoge_1">pjax</button>
  5.             <button id="hoge_2"><?php echo ( empty( $_GET&#91;'value'&#93; ) ) ? 1 : $_GET&#91;'value'&#93; + 1; ?></button>
  6.         </div>
  7.     </div>
  8.  
  9.     <script type="text/javascript">
  10.     $( document ).ready( function() {
  11.         $( 'button' ).click( function() {
  12.             $.pjax({
  13.                 url: 'index.php?value=' + $( '#hoge_2' ).text(),
  14.                 container: '#container',
  15.                 fragment:  '#container_new'
  16.             });
  17.         });
  18.     });
  19.     </script>
  20. </body>

ただし、

  1. container: '#container',
  2. fragment: '#container'

ここを同じ名前にすると1回でストップ。連続ならず。
おっかしいなぁ。動いたときもあったんだけどな~。。。
 
同じページを読み込んでいるんだから
#content は存在しても、#content_new なんて存在しないのにね。
未解決事件。 😯

解決?

やっぱり気持ち悪くて後日試したところ
同じ名前の箇所を差し替えるには fragment は、いらないみたい。

  1. container: '#container',

これでちゃんと動く。
 

オプション、イベント

オプションイベント を見てやってみましょう。
 

開始時処理
  1.  
  2. $(document).on('pjax:send', function(e) {
  3.     $('body').append("<div id='loading'>処理中</div>");
  4. });

 

終了時処理
  1. $(document).on('pjax:complete', function(e,data) {
  2.     $("#loading").remove();
  3. });

これでローディング画面を表示できることはわかったけど、引数とかは現在理解できていない。
またの機会に!
 

フォームの値の受け渡し

フォームの値の受け渡し 参照。
 

注意

ブラウザバックとかの挙動への対処が必要ね~。
 

参考サイト

RakSul:はじめての「pjax」
Qiita:pushStateとAjaxの組み合わせpjax
→CSS シグネチャ対策やブラウザバック対策のほか、コメントにも対策の話が出ている。
Cubix:defunkt版pjaxの説明

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-02-11 (水) 15:20:23 | 最終更新:2015-02-18 (水) 15:29:09

参考サイト

Posted by muchag | Selenium |
初回投稿:2015-02-11 (水) 14:02:10 | 最終更新:2015-02-11 (水) 14:02:10

参考サイト集。

参考サイト

Qiita:全国のSeleniumer必読

Posted by muchag | Selenium |
初回投稿:2015-02-11 (水) 14:02:10 | 最終更新:2015-02-11 (水) 14:02:10

優先順位

Posted by muchag | CSS |
初回投稿:2015-02-11 (水) 13:50:44 | 最終更新:2015-02-11 (水) 13:50:44


計算式を発見!

優先順位
記述場所

タグの Style 属性 > .html ファイルに直書きの CSS > 外部 CSS ファイル

指定はどんどん上書きされていくから
要は、読み込む順序の問題である。
 

固有度

また、アプローチの仕方が異なって被る指定があった場合は
より固有度の高い指定が優先される。

id > class > タグ

  1. <div id="hoge" class="moge">無茶な爺!</div>
  1. div {
  2.     color: #ff0000;
  3. }
  4.  
  5. #hoge {
  6.     color: #00ff00;
  7. }
  8.  
  9. .moge {
  10.     color: #0000ff;
  11. }

この場合、「無茶な爺!」という文字は、緑文字になる。
 

計算式

という風にザックリとイメージをしていたけど、計算式なるものを発見したので、メモ。
Qiita:CSSセレクタの優先順位の計算方法

Posted by muchag | CSS |
初回投稿:2015-02-11 (水) 13:50:44 | 最終更新:2015-02-11 (水) 13:50:44
« 前ページへ次ページへ »