12月 25
時間の処理には、trick7さんのTeraClockを使わせてもらいました。
キモは、
(TextArea).verticalScrollPosition = (TextArea).maxVerticalScrollPosition
だけです。
デバッグ用に、TextAreaに変数とかを表示させたいときに、スクロールバーが付いてこないと非常に見づらいので、上の１行を追加すると便利です。
Actionscript:
-
package
-
{
-
import fl.controls.Button;
-
import fl.controls.TextArea;
-
import flash.display.MovieClip;
-
import flash.events.*;
-
-
import com.trick7.utils.TeraClock;
-
/**
-
* ...
-
* @author IRONHEARTS
-
*/
-
public class Main extends MovieClip
-
{
-
private var _ta1:TextArea;
-
private var _ta2:TextArea;
-
private var _reset:Button;
-
private var _tc:TeraClock;
-
-
public function Main():void
-
{
-
addEventListener(Event.ADDED_TO_STAGE, init);
-
}
-
-
private function init(e:Event = null):void
-
{
-
removeEventListener(Event.ADDED_TO_STAGE, init);
-
-
_ta1 = TextArea(getChildByName("ta1"));
-
_ta2 = TextArea(getChildByName("ta2"));
-
_reset = Button(getChildByName("reset"));
-
-
_reset.addEventListener(MouseEvent.CLICK, resetHandler);
-
-
_tc = new TeraClock;
-
-
_tc.addEventListener(TeraClock.SECONDS_CHANGED, secListener);
-
-
}
-
private function resetHandler(e:MouseEvent):void
-
{
-
_ta1.text = _ta2.text = "";
-
}
-
private function secListener(e:Event):void
-
{
-
var s:String = _tc.hours2 + ":" + _tc.minutes2 + ":" + _tc.seconds;
-
-
_ta1.text += s + "\n";
-
_ta2.text += s + "\n";
-
-
_ta2.verticalScrollPosition = _ta2.maxVerticalScrollPosition;
-
}
-
}
-
}
ソース必要な人はドウゾつtascroll.fla,Main.as
Popularity: 7% [?]
written by ANN
10月 30
リスト並び替えのインターフェースを、ドラッグ＆ドロップでやりたいと思ったので、jQuery UI Sortableを使って練習してみる。
ただ、リストが大量にある場合や、初心者には、このオペレーションは難しいような気がする。だから、最終的には、それぞれのリストの↑↓のアイコンを付けて、直前・直後に移動できるようにしたい…が、まだそのやり方はよく分からない。
とりあえず普通にドラッグして入れ替えるサンプル。
簡単にできて面白いね。
Popularity: 6% [?]
written by ANN
7月 30
日付・時刻の整合性をチェックしたい
とあるサイトにて、日付・時刻の値をチェックする処理が必要となる。日付・時刻の入力には、先のエントリーの実務で使える・使ったjQueryプラグイン5選にも書いた、DatePickerとClockPickを使っている。
これらのインターフェースを用いて値を入力する場合、必ず正しい日付が入るので、極端なところ、値の整合性をチェックする必要はない。しかし、このインターフェースと同時に、手動による入力を認めている場合、入力ミス等でおかしな値を入力される場合がある。たとえば…
- ２００９，７，３０ → 全角文字
- 2009--10-23 → ハイフンが多い
- 2009-2-29 → 閏年じゃないから29日は無い
- 10/2 → 西暦が足りない
- 2009-13-1 → 13月は無い
などなど。
そこでまず、既存のプラグイン等で、日付の整合性をチェックするものが無いか探したのだが・・日付単体でチェックするものを見つけることができなかった。そこで…
>>>>>続きを読む
Popularity: 21% [?]
written by ANN
7月 29
phpにはstrip_tagsという、タグを取り除く関数があるが、特定のタグに挟まれた部分をごっそり削除したい場合、これは該当しない。PEARを探してみたけど、それっぽいのを発見できず。しょうがないので正規表現で書いてみる。（むしろ備忘録）
具体的にどういう時に使うかというと、PHPからの出力時に、
- <style>～</style>タグの中身を全部削除したい
- <script>～</script>タグの中身を全部削除したい
- コメント用の独自タグを、出力時にタグの中身もろとも削除したい。
などなど。テンプレートHTMLの編集時には必要だけど、最終的な出力時にはいらないタグとか。
また、RSSなど、出力先によっては、本文中に含まれるscriptタグが不要な場合などに。
>>>>>続きを読む
Popularity: 21% [?]
written by ANN
7月 28
最近のとある案件で実際に使ってみたjQueryプラグインを５つ紹介します。
それぞれに主観で「実用性」「楽しさ」「難易度」を評点（５点満点）してみたので、参考までにドウゾ。
それぞれにサンプルを付けています。
サンプルのソースを見たい方は、該当部分のiframeからソースを見てください。
>>>>>続きを読む
Popularity: 20% [?]
written by ANN
4月 16
phpで画像処理する定番といえば、組み込みのGD(PHP: GD - Manual)が定番なのだけれど、どうも処理元の画像が大きいと、非常に処理が重たい気がする。
とある画像データベースサイトでは、デジカメで撮影した画像を大量にアップロード・リサイズする必要があり、GDで処理していたのだが、最近のデジカメは１ファイルが12～15Mバイトもめずらしくなく、コレを何十枚と処理していくと、結局、apacheさんの負荷およびCPUの負荷がハンパなく、すぐにLoad avgが急上昇してしまう。
なんとか改善できないかと考えて、サーバがMac(OS X)だから、sipsコマンド【Scriptable Image Processing System（スクリプト可能イメージ処理システム）】が使えないかと考えた。変換処理をコマンドに任せることでapache(httpd)の負荷も減らせるかもしれないし。
- sips 公式テクニカルノート Technical Note TN2035: ColorSync on Mac OS X
- SIPS コマンド - 画像をコマンドラインで - その１ （リサイズ / 回転 / 反転 など） --- --- 脳みその中身-
試しにいくつかリサイズしてみたところ、体感的にはPHP/GDのリサイズより早い気がした。
気がしただけでは面白くないので、実際に簡単なサンプルを作ってベンチマークをとってみた。
つまり、SIPS vs GDである。
>>>>>続きを読む
Popularity: 19% [?]
written by ANN
4月 14
PHPでプログラムの処理速度を調べたりするのに、xdebugを使ったりするのもよいけど、手軽で簡単なのものに、PEARのbenchmarkというのがあります。
benchmarkそのものが入ってない場合は、
$ pear install Benchmark
でOK.（必要に応じてsudoで）
使い方はググればすぐサンプルがでるが、だいたいこんな感じ。
PHP:
-
require_once 'Benchmark/Timer.php';
-
-
$t = new Benchmark_Timer();
-
$t->start ();
-
$t->setMarker( 't1' );
-
for($i=0;$i<10000;$i++){
-
// 処理
-
}
-
$t->setMarker('m2');
-
$t->stop();
-
$t->display ();
これを、ブラウザ上から実行すると、HTMLのtableにフォーマットされた結果が表示される。
↓こんな感じ
| |
time index |
ex time |
% |
| Start |
1239674031.65831000 |
- |
0.00% |
| m1 |
1239674031.65838100 |
0.000071 |
0.59% |
| m2 |
1239674031.67032200 |
0.011941 |
99.03% |
| Stop |
1239674031.67036800 |
0.000046 |
0.38% |
| total |
- |
0.012058 |
100.00% |
で、今日のTipsとして、普通にBenchmark_Timer::display()を使うと、画面上に結果が表示されてしまうので、結果を表示せずに取得する方法。
簡単。Benchmark_Timer::getOutput()もしくは、Benchmark_Timer::getProfiling()を、displayの替わりに使えばOK。
getOutput()は、上記tableと同様のHTMLコードを取得できる。
getProfiling()は、上記tableと同様のデータを連想配列として取得できる。
↓こんな感じ
PHP:
-
-
(
-
-
(
-
[name] => Start
-
[time] =>
1239674550.
91492500
-
[diff] => -
-
[total] => -
-
)
-
-
(
-
[name] => m1
-
[time] =>
1239674550.
91499700
-
[diff] => 0.000072
-
[total] => 0.000072
-
)
-
-
(
-
[name] => m2
-
[time] =>
1239674550.
92797600
-
[diff] => 0.012979
-
[total] => 0.013051
-
)
-
-
(
-
[name] => Stop
-
[time] =>
1239674550.
92806900
-
[diff] => 0.000093
-
[total] => 0.013144
-
)
-
)
なぜかPear/Benchmarkにはドキュメントが無くて、ソースを読むしかないので、Benchmark使えなねー！と思ってる人がいるかもしれないので書いてみました。
…と思ったら、結構getOutput,getProfilingの解説してるページがあった(///
重複してるだけでなく、こちらにはそれ以上の情報が無いのが辛いが、せっかくなので公開。
Popularity: 17% [?]
written by ANN
2月 25
今回も結構レアなケースだろうから、あんまり役には立たないかもしれないけど、小規模・低予算のサイトの場合、案外ありそうな気もするのと、備忘録として。
前書き
ウェブサイトを構築する場合、最近はほとんどUTFを使う場合が多い。jQueryその他マッシュアップAPI、OSSなどを用いる場合、UTFのほうが便利。（むしろUTF前提で作られてるものが多い）
新規に構築する場合で、MySQL4.1～であれば、何も考えずにHTML,PHP側もUTFにしておけば混乱は少ない。
しかし、MySQL3.xの頃から稼働しているサイトの場合、DBやHTML,PHPがEUCであることも多く、コレをすべてUTFに移行するのは、恐ろしく手間が掛かる。（ハイリスク・ローリターン）
しかし、MySQL3.0,4.0系から、4.1～へアップグレードすると、ほぼ間違いなく文字化けするようになり、この文字化けが回避できず、せっかくMySQLが複数エンコーディングをサポートしているにも関わらず、サーバ側・クライアント側をEUCガチガチに固定して運用してしまうケースも多々あると思う。(恥ずかしながら僕がそうです）
だがそれでは前述のAjaxや最新のOSS(WordPressとか)などUTF8を前提としている機能が使えないというデメリットがある。
１つのホスト内でのVirtualHostで、あるサイトはEUCを、あるサイトはUTF8を使うようにMySQLで設定できないか、というのが今回のテーマである。
>>>>>続きを読む
Popularity: 22% [?]
written by ANN
2月 18
一般的なフォームのチェックボックスは、
と、いう感じ。これを、チェックした時に、checkboxの背景オブジェクトの色を変えることで、どこがチェックされたかわかりやすくするjQueryを使ったスクリプトを紹介。（まぁ、紹介するほどでもないけど）
JavaScriptコード
JavaScript:
-
$(document).ready(function(){
-
-
$("input[@type='checkbox']").click(function(){
-
var chk = $(this).attr('checked');
-
-
if(chk == true){
-
$(this).parent().css("background-color","pink");
-
}else{
-
$(this).parent().css("background-color","white");
-
}
-
return true;
-
});
-
});
動作サンプル
解説
まぁ、解説するまでもないと思うけど…$("input[@type='checkbox']")というのは、checkbox全体に対してという指示。checkboxにclassを付けて、それを指定してもいいけど、数が増えると面倒なので。
で、checkbox全体にclickで、そのオブジェクトの属性[checkec]がtrueだったら、そのcheckboxの親のエレメントの背景を変更。$(this).parent().css("background-color","pink");
もっと簡単・スマートなやり方もあると思うけど、あんまりトリッキーに書くのは好きじゃないのでこんな感じで充分。
これだけでも、だいぶユーザビリティが向上したフォームになると思います。
なお、jQueryについては、
jQuery 関連記事まとめ - Cyokodog::Diary
をみれば、ほぼ網羅できるんじゃないですかね。すばらしい。多謝ですね。
あと、コリスさんところで、よくプラグインのまとめをしてくれてます。
[JS]jQueryのプラグイン33+1選 -2008年10月 | コリス
formのバリデーションに関しては、
Really Easy Field Validation
これがかなり使い勝手がよくて好きなんだけど、prototype.jsなんだよねー。
Popularity: 25% [?]
written by ANN
8月 19
某サイトにて、WordPressを使ったサイトを構築。
画像のアップロード・使用は問題ないが、PDFをアップロードした場合に、PDFファイルのクリックは、別ウィンドウにしたいという話が持ち上がる。
対処法としては、WordPressのアップロード～エディタへの貼付け部分のスクリプトを修正して、ファイルの種類がPDFだったら、"_blank"属性を付けて貼付け、もしくは、その部分をハックするプラグインを書くか・・と思ったが、とても面倒そうなので、JavaScriptを使って表面的にやることにした。
できたコードはこんな感じ。つまり、Aタグを全部なめて、リンク先文字列が*.pdfだったら、アンカーのtargetを_blankにするだけ。あとはこれを外部ファイルにして、WordPressのヘッダのテンプレ部分で読み込めばOKかな。onLoadで処理するのが好ましいから、EventObserveとかでやったらいいんじゃないかな。
HTML部分
HTML:
-
-
<li><a href="foo.html">リンク
</a></li>
-
<li><a href="hoge.pdf">PDF
</a></li>
-
<li><a href="fuga.doc">Doc
</a></li>
-
</ul>
JavaScript部分
JavaScript:
-
var elem = $$('a');
-
for (var i = 0; i <elem.length; i ++) {
-
var str = elem[i].href;
-
if(elem[i].href.match(/pdf$/i)){
-
// マッチした
-
elem[i].target = "_blank";
-
}else{
-
// マッチしない
-
}
-
}
※要 prototype.js
Popularity: 20% [?]
written by ANN