star field

まったり もふもふ な 日常。
Ajax と PHP で入力補完
仕事でちょっとつまずいたから、メモメモ。

◎入力補完を作成する

テキストボックスに文字が入力されると、DBに登録されているワードと比較して
似たものを候補として出力する、というプログラム。
もちろんリアルタイムで出力されるやつです。

:HTML:
<form id="frm" name="frm">
 <input type="text" name="txt" onkeyup="funcAjax(this.frm)" />
 <div id="disp"></div>
</form>


:jQuery:
function funcAjax(str) {
 .ajax({
  type: "POST",
  url: "disp.php",
  data: str,
  success: function(res){
   $("#disp").html(res);
  }
 });
}


:PHP(disp.php):
$dispary ←こいつにDBから引っ張ってきたデータが入ってるとして
出力形式はセレクトボックスが良い!
ってわけで、最初はこう書いてた。
$disp = "<select name='hoge'>";
forech( $dispary as $key => $value ) {
 $disp = $disp."<option value='".$value."' onClick='funcSel'>".$value."</option>";
}
$disp = $disp."</select>";

結果は、ブラウザに予想通りの表示がされるものの
onClick が firefox 以外のブラウザで動作しない!
なんでよ…。

ググっても出てこないし、アレコレ試したけど動かず。

で、最終的にはコレで解決。
$disp = "<select name='hoge' onChange='funcSel'>";
forech( $dispary as $key => $value ) {
 $disp = $disp."<option value='".$value."'>".$value."</option>";
}
$disp = $disp."</select>";

onClick はダメだけど onChange なら動きました。
どーゆーこっちゃ。

--------------------------

訂正:onClick について
リファレンス見直しました。
onClick は option に指定できないやん。あれー。
どうもお騒がせしました。。。
プログラム系 / comments(2)
flashのマスク
扁桃腺がまたもや腫れました。

こんばんは。

数年前から腫れやすくなったように思います。
学校の友人に、あまりに腫れが酷くて手術した子がいますが…。
取っちゃえば楽みたいですねー。
10日間入院するだけで取れるらしいので、考えてもいいかも。。。


◎flashの今更なこと

ダイナミックテキストにマスクをかけたら表示されない…。
なんでだーって悩んでたら、どうやら仕様みたいですね。
知らなかった;;

ASでマスクをかけたらOKのようです。
解決ー。


節々が痛い…これは熱が出るかも。。
プログラム系 / comments(0)
MYSQLでdecode?
以下のようなデータがDBに入っていたとします。

idroomName
00001sw
00002sd
00003td


この roomName の sw や sd を一覧で表示する時に、日本語に直しますよね?
色々やり方はありますが、SQL文で無理矢理やってしまいたいなーと思いまして。

oracle だと decode関数というありがた〜い関数があるので、

SELECT id , DECODE( roomName , 'sw' , 'シングルスイート' , 'sd' , 'シングルデラックス' , 'ダブルデラックス' ) AS room from roomTable;

DECODE( 対象フィールド名 , '条件1' , '変換1' , '条件2' , '変換2' , 'それ以外の変換3' )

って書けるけど、mysqlだと decode がなくて困った。
困ったから調べた。

■変換したいデータが YES or NO でいけるなら IF文。

select id , IF( roomName , 'シングル' , 'デラックス' ) AS room from roomTable;

IF( 対象フィールド名 , 'TRUEの場合' , 'FALSEの場合' )

■複数ある場合は case文。

select id , CASE roomName WHEN 'sw' THEN 'シングルスイート' WHEN 'sd' THEN 'シングルデラックス' ELSE 'ダブルデラックス' END room from roomTable;

CASE 対象フィールド名
  WHEN '条件1' THEN '変換1'
  WHEN '条件2' THEN '変換2'
  ELSE 'それ以外の変換3'
END 取り出す時の名前

IF はわからんでもないけど、case を sql文に入れる違和感…。苦笑
昨日の ASP.NET の課題でお世話になりました。
プログラム系 / comments(3)
ASP.NETのぽすとばっく
if (!Page.IsPostBack){
 msg.Text = "ここに処理を書いてなかったから、セッションの中身が消えてたんだ・・・";
}

退避させた社員IDがどこに消えたかと思えば・・・null値で上書きしてただけだったorz

初歩的過ぎる痛恨のミス・・・。
ASP.NET の課題のブラッシュアップをしようとしたら、こいつのせいで3時間も浪費したYO。

私のばかばかばかー( ノД`)シクシク…
プログラム系 / comments(4)
フォルダ内の画像を検索
◎PHPでフォルダ内の画像を表示したい。
glob関数って便利ですよね。
私も随分とお世話になっている関数です。


◆とりあえず探してみる。
ファイル名がわかっていれば、直接指定できます。

$imgpath = "img/00001.png";// 画像のパス
if ( glob($imgpath) ){
echo "あったぞー";
}

これで 00001.png があるかどうかがわかります。
私はこれを使って何がしたかったかと言うと、画像の縦横サイズが知りたかったわけなんです。

ついでなので、サイズの取得の仕方。

$imgpath = "img/00001.png";// 画像のパス
if ( glob($imgpath) ){
// サイズ取得
list($wid, $hei, $type, $attr) = getimagesize($imgpath);
}

↑↑を見ればわかると思うけど、getimagesize関数の引数は4つあります。
$wid ・・・ 横幅
$hei ・・・ 縦幅
$type ・・・ IMAGETYPE定数 (←jpg とか gif とか・・・)
$attr ・・・ width="" height="" (←HTMLのimgタグにそのまま貼れる)

$attr の使い方は↓↓

<img src="img/00001.png" <?php echo $attr; ?> />

リサイズするなら $wid と $hei を使って縦横比を維持しつつ縮小とかできるよね。

これを使えばユーザが登録した画像からサムネイルを生成しなくても
簡易版サムネイルが作れるー!!
とか会社でやってました・・・。


◆拡張子を複数指定。
2つ目の引数にGLOB_BRACEを指定することで、複数の拡張子を指定することができます。
便利だー。

$imgpathPng = "img/*.png";// PNG画像のパス
$imgpathJpg = "img/*.jpg";// JPG画像のパス
foreach ( glob( "{$imgpathPng , $imgpathJpg}", GLOB_BRACE) as $filename ) {
echo "<img src='" . $filename . "' />";
}

こんな感じで書けます。

ちょうど今、HFのプログラムで使ってるからまとめてみました。
プログラム系 / comments(0)
IE6の透過png
◎IE6の透過PNG処理。
コーダーにとっては、結構鬼門じゃないでしょうか。
世の中に配布されているライブラリを色々と使ってみたので、ここらでまとめてみました。

◆iepngfix.js
よく使われているライブラリだと思われます。
私が使った中では、最もバグが少なかったです。

- 使い方 -
1.ダウンロードした iepngfix.js を適当なフォルダに入れます。
2.透過したいPNG画像があるページの<head>タグ内に以下を記述。

<script type="text/javascript" src="iepngfix.js" charset="utf-8"></script>


3.透過PNGを背景として使っているクラスやIDを指定しているCSSに以下を記述。

_behavior: expression(IEPNGFIX.fix(this));


アンダーバーを書くことで、IE6のみに適応されます。

- バグとその対応 -
『指定した画像が伸びる』というバグが最も出やすいですが、その対処法↓↓
 ・画像にピッタリサイズの width と height を指定する。
 ・positionを使わない。
 ・spanを使って文字を画像に置き換えている場合 span{ display:none; } にする。

- 未解決バグ -
透過PNGの上にテキストリンクを設置するとクリックできないことがあります。
色々な方の記事などを見ても原因不明なので、これが起きてしまった場合は透過を
諦めています。

◆unitpngfix.js
とても軽いライブラリですが・・・軽いなりにバグもありました。

- 使い方 -
1.ダウンロードした unitpngfix.js と clear.gif を同じフォルダに入れる。
2.unitpngfix.js の1行目で指定してある clear.gif のパスが正しいか確認する。
3.透過したいPNG画像があるページの<head>タグ内に以下を記述。

<script type="text/javascript" src="unitpngfix.js" charset="utf-8"></script>


clear.gif というのは、1px四方の透過gifです。
これでPNG画像の透過部分を置き換えているみたい。

- 未解決バグ -
とにかくデザインが崩れてしまいました。
どうにも直しようがなかったので、使用は見送りに。

◆ie7.js
我らがGoogle様のライブラリ。
IE6 の表示を IE7 に近づけようというもの。
透過PNGの対応に加え、
{position: fixed; } {a:hover} {max-width} {min-width}
この辺りの解釈も可能って話です。

- 使い方 -
<head>タグ内に以下を記述。

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/xx.x/IE7.js" type="text/javascript"></script>
<![endif]-->


- 未解決バグ -
透過PNGについては、iepngfix.js のようなバグが出ました。
{ position:fixed; } は動きますが、その他の要素が動かなかったり・・・。
結構不安定な感じです。
ただ、このライブラリは Google Code から直リンクなので、自動アップデートされます。
バグも徐々に対応されていくんじゃないかしら。


◆感想。
結局のところ、iepngfix.js が無難ではないかと。笑

現在アチコチで IE6 廃止に向けて動いてる感じなので、近い将来 IE6 の対応はしなくても
良くなるんじゃないかな。
Google先生のところの Youtube でも IE6 のサポートは打ち切られるみたいだし。
開発側としては、IE6廃止大賛成。
プログラム系 / comments(4)
連番の変数をforで処理
◎PHP

for( $i = 0; $i < 3; $i ++ ){
${"hen$i"} = "変数".$i;
}

これで

$hen0 = 変数0
$hen1 = 変数1
$hen2 = 変数2

となる。
今更使ったよぅ。
プログラム系 / comments(0)
page top
1 / 1 pages

CALENDAR
Sun Mon Tue Wed Thu Fri Sat
 123456
78910111213
14151617181920
21222324252627
28293031   
<< May 2017 >>
PROFILE
CATEGORIES
RECENT COMMENTS
LINKS
RSS/ATOM
Search this site.
SPONSORED LINKS
about me