jquery.tile.js (タイル状に配置)

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-02-08 (日) 17:12:49 | 最終更新:2015-02-12 (木) 10:53:20

jquery.tile.js
要素をタイル状に並べてくれるプラグイン。

説明サイト
URIN HACK:要素の高さを揃える超軽量なjQueryプラグイン jquery.tile.js

【環境】
jQuery:1.11.2, 2.1.3
jQuery UI:1.11.2
JS

jquery.tile.js
こちらからソースをコピペして

jquery.tile.js

を作成して配置。
 

HTML
JavaScript 部分
  1. <script src="jquery.tile.js"></script>
  2. <script type="text/javascript">
  3. $(function(){
  4.   $('.tile').tile();
  5. });
  6. </script>

4行目、titl メソッドの引数に数値を入れると、列数を指定できる。

というわけではなく、x列毎に同じ高さに揃える という指定らしく

  1. $('.tile').tile(4);

このように設定して、表示エリアを5列分取ったら、高さがずれたw

つまり、列数を指定するときは、表示幅もそれに合わせて指定する必要がある
 

要素部分
  1. <div class="tile">1</div>
  2. <div class="tile">2</div>
  3. <div class="tile">3</div>
  4. <div class="tile">4</div>
  5. <div class="tile">5</div>

綺麗に並んだ~♪
 

CSS

お好みに応じて設定。

  1. .tile {
  2.     border:1px solid #999;
  3.     background:#f0f0f0;
  4.     float:left;
  5.     width:130px;
  6.     margin:0 10px 10px 0;
  7. }

啓文社:[jQuery] タイル表示
CSS は、こちらのサイトの例をいただいてきた。
こちらのサイトのおかげで、このプラグインに出会うことができました~

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-02-08 (日) 17:12:49 | 最終更新:2015-02-12 (木) 10:53:20

Don’t Use jquery-latest.js

Posted by muchag | jQuery |
初回投稿:2015-02-08 (日) 12:57:12 | 最終更新:2015-02-08 (日) 12:58:14

jquery-latest.js へのリンクは止めましょ~、とのこと。

ちゃんとバージョンが記載されている .js ファイルにリンクしてね。

  1. <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <!-- だめよ~!だめだめ! -->
  2.  
  3. <script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script> <!-- こうしましょ! -->

jQuery:Don’t Use jquery-latest.js

Posted by muchag | jQuery |
初回投稿:2015-02-08 (日) 12:57:12 | 最終更新:2015-02-08 (日) 12:58:14

ナビゲーションメニューバー -> CSS MenuMaker

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-02-08 (日) 12:46:37 | 最終更新:2015-02-08 (日) 12:50:18

CSS MenuMaker は、シンプルでよかった~♪

同サイト内にカスタマイズ機能も付いていて
非常に便利♪

Posted by muchag | jQuery,Library & PlugIn & AddIn |
初回投稿:2015-02-08 (日) 12:46:37 | 最終更新:2015-02-08 (日) 12:50:18

文字列 -> 検索

Posted by muchag | JavaScript |
初回投稿:2015-02-08 (日) 12:35:00 | 最終更新:2015-02-08 (日) 12:43:46

文字列検索。

indexOf

呼び出す String オブジェクト 中で、指定された値が最初に現れたインデックスを返します。fromIndex から検索を始め、値が見つからない場合は -1 を返します。

indexOf(searchValue[,fromIndex])

MDN:String.prototype.indexOf()

searchValue
検索する値を表す文字列

fromIndex
呼び出す文字列内の検索を始めるための位置。0 とその文字列の長さの間にある整数を指定できます。デフォルトの値は 0 です。

利用例
  1. if ( $( this ).text().indexOf( 'abc' ) > -1 )

 

注意

indexOf メソッドは大文字と小文字を区別します。
 

lastIndexOf

呼び出す String オブジェクト中で、指定された値が最後に現れるインデックスを返します。値が見つけられない場合、-1 を返します。呼び出す文字列は、fromIndex から検索を始め、逆方向に検索されます。

lastIndexOf( searchValue [, fromIndex ])

MDN:String.prototype.lastIndexOf()

searchValue
検索する値を表す文字列。

fromIndex
呼び出す文字列内の検索を始めるための位置(左から右)。0 とその文字列の長さの間にある整数を指定できます。デフォルトの値は 0 です。
 

注意

indexOf メソッドは大文字と小文字を区別します。
 

match

正規表現 に対する 文字列 のマッチングの際に、そのマッチ結果を得るために使われます。

string.match(regexp)

MDN:String.prototype.match()

regexp
正規表現オブジェクト (RegExp) 。RegExp オブジェクトではないオブジェクト obj が渡された場合、new RegExp(obj) による RegExp オブジェクトへの暗黙的な変換が行われます。

Posted by muchag | JavaScript |
初回投稿:2015-02-08 (日) 12:35:00 | 最終更新:2015-02-08 (日) 12:43:46

文字列 -> 検索

Posted by muchag | jQuery |
初回投稿:2015-02-08 (日) 12:16:52 | 最終更新:2015-02-08 (日) 12:37:18

文字列検索。

【環境】
[jQuery] 1.11.2
  1. if ( $( this ).is(":contains('hoge')") )

 
JavaScript 自体の検索メソッド

Posted by muchag | jQuery |
初回投稿:2015-02-08 (日) 12:16:52 | 最終更新:2015-02-08 (日) 12:37:18

デバッグ -> $_SERVER の値が変

Posted by muchag | Eclipse,PHP |
初回投稿:2015-02-05 (木) 15:16:42 | 最終更新:2015-02-05 (木) 15:16:42

$_SEVER[‘HTTP_HOST’] の値が取れていなくて、うへ~!ってなった。

症状

どうしてどうして? となり、var_dump をしてみたら、確かに取れていない。
でも、よく見ると何か変・・・。

どうやら、デバッグだと挙動が変わる様子。

ブラウザからアクセスしたら、ちゃんと $_SEVER[‘HTTP_HOST’] の値を取れていた。
そういうことか~!

ってことは、デバッグ用のコードを追加しなきゃ・・・ね・・・

Posted by muchag | Eclipse,PHP |
初回投稿:2015-02-05 (木) 15:16:42 | 最終更新:2015-02-05 (木) 15:16:42

Xdebug 再び!

Posted by muchag | Eclipse,PHP,XAMPP |
初回投稿:2015-02-05 (木) 0:45:53 | 最終更新:2016-01-07 (木) 16:15:28

前回とは違って、Pleiades に Xdebug が標準装備されたそうなので、リトライしてみる。
ただし、前回同様 Pleiades 同梱の XAMPP ではなくて、別途導入した XAMPP を利用。

前回記事
デバッグ XDebug 編
XDebug の導入
XDebug の導入の試行錯誤

【環境】
[Eclipse] 4.4
[OS] Windows7 SP1 64bit
[XAMPP for Windows] 1.8.1
[ php] 5.4.7
php.ini
(xampp)\php\php.ini

の必要箇所をコメントアウトから復帰。
2085行目の値を 1 に。

  1. [XDebug]
  2. zend_extension = "(xampp)\php\ext\php_xdebug.dll"
  3. ;xdebug.profiler_append = 0
  4. xdebug.profiler_enable = 1
  5. ;xdebug.profiler_enable_trigger = 0
  6. ;xdebug.profiler_output_dir = "(xampp)\tmp"
  7. ;xdebug.profiler_output_name = "cachegrind.out.%t-%s"
  8. xdebug.remote_enable = 1
  9. ;xdebug.remote_handler = "dbgp"
  10. ;xdebug.remote_host = "127.0.0.1"
  11. ;xdebug.trace_output_dir = "(xampp)\tmp"

※あちこちいじっているため、行番号は不確か。
 

Eclipse 設定
デバッグ環境の確認
[ウィンドウ]-[設定] [PHP]-[デバッグ] Pleiades を導入している場合は、普通は恐らく確認するだけ。

私の場合は、単体 XAMPP を利用するのでちょいと設定が必要。
 

PHP 実行可能ファイルの追加

上記 [デバッグ] ダイアログで [PHP 実行可能ファイル…] というリンクからでもいける。

  1. [ウィンドウ]-[設定]
    1. [PHP]-[PHP 実行可能ファイル]
      1. [追加]
      2. New PHP Executable
        1. 名前:任意
        2. 実行可能ファイル・パス:[参照] から、利用したい php.exe ファイルを選択する
        3. PHP ini ファイル(オプション):実行可能ファイルを選択したら、同階層の php.ini ファイルが自動入力された
          他のものを利用したいときは、別途指定できるみたい
        4. SAPI タイプ:利用したい php に合わせる *1
        5. [次へ]
      3. Debugger Settings
        1. デバッガー:XDebug
        2. その他の設定は不明につきデフォルト
        3. [完了]
    2. [OK]

*1:SAPI タイプは、CLI 版か、CGI 版か、ということらしい。
下記コマンドにて確認できる。

  1. >(xampp)\php\php.exe --version
  2. PHP 5.4.7 (cli) (built: Sep 12 2012 23:48:31)
  3. Copyright (c) 1997-2012 The PHP Group
  4. Zend Engine v2.4.0, Copyright (c) 1998-2012 Zend Technologies
  5.     with Xdebug v2.2.1, Copyright (c) 2002-2012, by Derick Rethans
PHP サーバーの追加

必要に応じて
[ウィンドウ]-[設定] [PHP]-[サーバー] からサーバーの追加。

Default PHP Web Server についても、Debugger の設定が必要。
[Default PHP Web Server] を選択
[編集] [デバッガー] タブ
上記「PHP 実行可能ファイルの追加」の「Debugger Settings」参照
[完了]  

デバッグ環境の設定

追加後、改めて
[ウィンドウ]-[設定] [PHP]-[デバッグ] から
先ほど追加したものを選択。

「最初の行でブレーク」のチェックを外す。
 

include_path

Eclipse では、上記 [PHP 実行可能ファイル] で php.ini の場所を設定したにも拘らず
include_path を上書きするらしく、設定しないと include_path が無視される。

そこで改めてプロジェクト毎にインクルードパスを設定してやる必要がある。
[プロジェクトを右クリック]-[インクルード・パス]-[インクルード・パスの構成] [外部ソース・フォルダの追加] からインクルードしたいディレクトリを指定する。

2015-12-17 追記 ここから

XDebug の導入 には、起動構成について書いたけど
こちらで書くのを忘れてる。。。

基本的な進め方は、上記の前回記事を参照。

ただ、今回 Eclipse をアップデートしたせいか、前のやり方ではできなかった。
というか、バグってるかも?

【環境】
Eclipse: Mars.1 (4.5.1)
かも
[実行]-[実行構成] 構成の作成、管理、および実行
[PHP Web アプリケーション]-[新規の起動構成] ここで、ファイルの [参照] に行くと、
「ファイルの選択」というダイアログが出るものの
ファイルリストが出てこない。。。

手動入力

なので、ファイル欄は、手動で設定。
/(スラッシュ)で始めて、プロジェクトルートから index.php までのフルパスを入力。
例)/projectA/web/index.php

別の追加の仕方

実行時に読みにいくファイル、大概は index.php でしょう。

このコンテキストメニューから
[デバッグ]-[PHP Web アプリケーション]

これで、新規起動構成を自動生成して
ダイアログを開いてくれる。
便利!

stack overflow:Debug PHP on Eclipse MARS with XDebug: error: file does not exist

2015-12-17 追記 ここまで

 

デバッグ開始!
ブレークポイントの設定

止めたい行番号をダブルクリックすることで、ブレークポイントの OnOff をできる。
 

開始

ツールバーの虫(Bug)ボタンをクリックすればデバッグ開始。
 

方法の選択

2015-02-05_EclipseDebugStart_1初回デバッグ時に、方法を聞かれる。

 
2015-02-05_EclipseDebugStart_2[PHP CLI アプリケーション] を選択してやると、
[説明] 欄に「Debug PHP Executable」と表示されるので
[OK] 。

2015-12-17 追記 ここから

そういえば、昔、こんな記事を書いた記憶が。。。

今になってみれば
PHP CLI アプリケーション:コマンドラインで動かす
PHP Web アプリケーション:Web サイト
なので、[PHP Web アプリケーション] を選択するべきだった、とは思えるけど
それでも、よくわかっていない。

コマンドラインで動かす PHP って、どんなのだろう。。。

2015-12-17 追記 ここまで
2016-01-06 追記 ここから

上記設定を全部済ませたのに、デバッグを開始しても
デバッグパースペクティブのデバッグタブに何も現れない。
ブレークポイントも効かない。

サイトの表示はされる。
ただし、URL に XDEBUG_SESSION_START というパラメータが付いていない。

悩んでみたけど、設定を確認して戻ってくると
ちゃんとデバッグできた。

こんなこともあるのね~。

2016-01-06 追記 ここまで

 

パースペクティブの切り替え

初回ブレークポイント使用時にパースペクティブの切り替え確認ダイアログが出るので
[常にこの設定を使用する] にチェックを入れて [はい] 。
  

参考サイト

Web 制作・運用 Tips アーカイブ:Eclipse+XdebugによるPHPのデバッグ方法

Posted by muchag | Eclipse,PHP,XAMPP |
初回投稿:2015-02-05 (木) 0:45:53 | 最終更新:2016-01-07 (木) 16:15:28

シングルトン

Posted by muchag | PHP,デザインパターン |
初回投稿:2015-02-04 (水) 14:15:38 | 最終更新:2015-02-04 (水) 23:09:59