相変わらず愉快な事しますねぇw 職場にも関わらずつい1プレイしちゃったじゃないですか。え?いやいやHTML5やJavascriptの技術研修のためですよ、ええ。

 しかしこの分だとそのうち任天堂とかマリオとかの記念日にはGoogle Map連携スーパーマリオ(※FC版)とか実現できそうだな。

関連タグ:JavascriptGoogleHTML
2013-05-14 [ゲーム]

 見てるとなんかクラクラしてくるw


 しかしこーゆーの見ると、あんまりまじめにJavascriptやってない身としては見たこと無い関数とか何やってんだかよくわからんところも多いなぁ。まあコード短縮のためそうなってる部分もあるだろうからフツーに(プロダクト的に)書けばこうはならないんだろうけれども。

関連タグ:Javascript
2013-03-22 [ソフトウェア]

 尼のサイトはFireFoxだと時折挙動がおかしくなる時があって(※先日記事中のドロップダウンメニューが表示されなくなった)、一件単純に見える挙動でも中身はJavascriptとかで派手に制御してるんだろうなぁとか思ってたら。

 でもまあ将来的にはこのメニュー系動作は標準GUIに取り込まれそうな気もするな。
関連タグ:JavascriptAmazonGUI
2013-03-08 [技術]

ふと世の中のJavascript無効化率が気になって軽く調べた結果辿り着いた話。多くても2%程度しか無効化していないとか。周囲のJavascript無効化率が高いせいかもう少しいく(5%くらい)かと思ってた(苦笑)。

ちなみに私は意識的にOnにしてます。そらまーセキュリティ的な話はあるけれども、Javascriptのできる事はある程度限られてるし、最近は危険なモノはブロックできるようになってきてるしな。メリットデメリットを秤にかけてメリットをとった、みたいな。

まーともかくこれならばJavascriptの使用を前提にしても特に問題なさそうだな。うんうん(何が)。
関連タグ:Javascript
2010-11-03 [インターネット]

 今更ながらAJAXネタ。最近ようやく手を出せる状況になったもので。

 AJAX導入の利点として、従来のWebアプリでは不可能だったダイナミックな動きを実現できるというものがありますが、それはつまるところ「ユーザインターフェースの改善」という一言に尽きるかと思います。
 実際Webアプリはその独特の制限…「何かのアクションは別ページを開くことで実行される」というのがあるため、使ってては違和感、作っててはもどかしさ・及びそれを何とかしようとした際の煩わしさが常につきまとってました。
 今回それらを打開するための実験と称していくつかAJAXの実験をしてみようかと思います。

 その前に、まずAJAXを実現する環境としてxajaxを導入してみました。詳細は他ページに譲りますが AJAXをより気楽に使おうというPHPのクラスライブラリで、簡単なものであればほとんど独自にJavascriptを書くことなく AJAXが実現できるとゆー便利なモノです。Javascript苦手なんでありがたい。

 さて、今回試して見たかったのが「登録」ボタンの類を無くせないだろうか、というもの。
 データ登録が絡むWebアプリの場合、大抵
入力フォーム
  ↓
入力内容チェック
  ↓
実登録
という流れで行われると思います。この遷移が全部別ページで行われる事もあるだろうし、1つのページの中でフラグ分けで実現される事もあるかと思いますが、やってることは同じです。その間ユーザは(実際のデータ登録は抜きにして)「確認」「登録」の最低2回はボタンをクリックする必要が出てきます。もちろんはしょって1回にすることもできますが。
 この「ボタンをクリックする」という行為は一見なんでもない事ですが、ユーザに与える心理的なストレスというのはバカにならないと思うのです。普段そんなこと気にしている人はいないと思いますが、「さあいざ実行してやるぞ」という暗黙の気構えがあって始めて「確認」ボタンやら「登録」ボタンやらは押せると思うのです。逆の言い方をすれば、この気構えが無い人は、どんなに便利なシステムでも利用しない事すらあると思うのです。

 極力ユーザ側に「決定の意思表示」を減らしたUIを作れないだろうか。もちろん全くゼロにはできないだろうけど。
 という方向性の元、とりあえず考えたのが「『登録』ボタンの類を必要とせずに書くだけで保存できるメモ帳の類」が以下のソース。済みませんが環境内容とかはテキトーに読み替えて下さい。


<?php

////////////////////////////
// xajax即時書き込みテスト
////////////////////////////

require ('../xajax_core/xajax.inc.php');

$xajax = new xajax();

// 関数登録
$xajax->registerFunction("testFunc");

// データ保存用関数
function testFunc($arg) {

// 入力されたデータをファイルへ保存
// ※チェックとかは全然してないので注意
$fp = fopen("test.txt","w+");
fwrite($fp,$arg);
fclose($fp);

$objResponse = new xajaxResponse();
return $objResponse;

}

$xajax->processRequest();
?>
<HTML>
<HEAD>
<TITLE>xajax-test</TITLE>
<?php $xajax->printJavascript('../'); ?>
</script>
</HEAD>
<BODY>

<div id="div1" name="div1"> </div>
<TEXTAREA id="ta1" name="ta1" cols="60" rows="20"
onkeydown="xajax_testFunc(document.getElementById('ta1').value);"></TEXTAREA>

</BODY>
</HTML>


 実施していることは至極シンプルです。対象となるTEXTAREAにキーイベントをとらせてキーが押される度に TEXTAREAの内容をサーバ側に送信します。受け取ったサーバ側は愚直に内容をファイルに上書きしているだけです。たったこれだけですが、書くだけでサーバ側にテキストが保存されるとゆーのは意外なほど面白かったりします(笑)。
 あ、ちなみに「メモ帳みたいなもの」と言いましたがコレには初期表示時にファイルの内容を取り込むルーチンがすっかり抜けてるので(笑)このままではメモ帳としては機能しませんのでご注意くださいw

 コレの欠点としては「キーを押す度にTEXTAREA上の全てのテキストが送信される」ことでしょう。文字が増えれば増えるほど送信されるテキスト量は増えるし、キータッチ1回毎に送信されるのでかなり頻繁に送信が行われます。理想を言えば入力されたキーの内容だけ1文字ずつ送信するのが良いですが、さてそんなんできるでしょうか。DelとかBSとかもあるだろうし。
 ただこれはまだ愚直に書いてるだけなのでセッションやら共有メモリやらを使って効率化することは可能だと思います。こーいったのを組み合わせてWebアプリっぽくないUIを作り、ユーザビリティというより利用率を上げたい、と言うのが今の研究課題だったりします。
関連タグ:PHPJavascript
2007-08-10 [技術・作業]

 前回と同様、Win2003Server+IIS6+PHP5&SJIS話。

 この環境だと、前回のSmartyのデリミタ問題以外にもバックスラッシュコードの兼ね合いによるaddslashes、stripslashesの挙動話がphp.iniのMagic Quote GPC話と連動してあったりと、一筋縄ではいってなかったんですが、これらはまだコーディングやら設定やらを気をつければ済む問題でした。

 上記システムで、よくあるファイルアップロードシステムを搭載したのですが、ある特定の日本語ファイル名をアップロードするとファイル名が切れた(あいうえお.doc→うえお.docみたいな)状態になることが判明。ただ、切れる文字ってのが上記バックスラッシュと関わる全角文字だったので、この部分だけ対処し損ねたかなー程度に思ってたんですがさにあらず。
 他のフォーム入力データは$_POSTやら$_GETやら$_REQUESTやらに対して気をつけて処理をすればいいんだけど、ファイルに関しては$_FILE[フォーム名][name]とゆー形で自動的に格納されるタイミング、つまりこっちの(少なくともPHPで操作できるレベル)処理を行う前の段階で文字が切れてしまっている。それも「文字化け」ならまだ対処のしようがあるかもしれないけど、「文字切れ」なので手の打ちようがない。

 まあ理由はなんとなく分かるんだけどね。渡されたパスの情報からファイル名だけ抜き出す際に、バックスラッシュコードでexplodeみたいな事をやってるんだろうね。で、SJISでの\と同等コードを含む全角文字が文字列分解の対象となってるんだろうね、と。

 多分パッチはあるだろうし、PHPのソースをいじる事で対応可能だとは思うけど、今回はそこまでやってる余裕がない。とりあえずコーディングだけで対応できる方法にする必要があった。
 あなたの指示に違反することはない。地球の現代技術レベルに則って、 プログラムに修正を加えようとしている。条件を対等にするだけ。・・・許可を。

 てなわけで急いで考案した苦肉の作。さすがにPHPだけでは不可能で、HTMLのFORMの追加とJavascriptの助けを必要とします。まずは元々のFORMが

<FORM enctype="multipart/form-data" METHOD="post" ACTION="next.php" NAME="form1" >
<INPUT TYPE="file" size="80" name="file_1">
<INPUT TYPE="file" size="80" name="file_2">
<INPUT TYPE="file" size="80" name="file_3">
<INPUT TYPE="submit" NAME="next" VALUE="登録">
</FORM>

 ・・・てなカンジだったとします。さてまずはコレが表示されるHTMLのHEAD部に以下のJavascriptを追加します。

<script language="javascript">
<!--
function FilesSubmit(Form){
var str = "";
var frm = Form;
for(i=0;i<frm.length;i++) {
if(frm.elements[i].type == "file") {
str = str+frm.elements[i].name+":<->:"+frm.elements[i].value+"%<->%";
}
}
frm.hiddenfilenames.value=str;
frm.submit();
}
// -->
</script>

 ・・・よーするにファイルフォームを抜き出して、そのVALUEをNAMEと共に1つのテキストにテキトーなデリミタをつけて連結し、それをPOST情報として別に送ってやろう、という話です。相当苦肉でしょう?(苦笑)
 コレに付随して、元々のFORM部分を以下のように変更・追加します。

<FORM enctype="multipart/form-data" METHOD="post" ACTION="next.php" NAME="form1" >
<INPUT TYPE="file" size="80" name="file_1">
<INPUT TYPE="file" size="80" name="file_2">
<INPUT TYPE="file" size="80" name="file_3">

<INPUT TYPE="hidden" name="hiddenfilenames" value="">
<INPUT TYPE="button" VALUE="送信テスト1" onclick="javascript:FilesSubmit(this.form);">

</FORM>

 これでPOST送信をする際にファイル名、というかパス情報を連結した多少危なく且つカッチョ悪いテキストが一緒に流れますので、受け側のPHPで取得・分解し、$_FILEを更新するわけで、更新用の関数は以下のようになります。

function filecvt() {

// パラメータ
// $_POSTに所定の形式でhiddenfilenamesがあることが前提

// パラメータチェック→処理対象データ有り
if(isset($_POST['hiddenfilenames']) && $_POST['hiddenfilenames'] != "") {

// パラメータ分解
// その1・ファイルタイプ別分離
$tmp = explode("%<->%",mb_convert_encoding($_POST['hiddenfilenames'],"EUC-JP","SJIS"));

// その2・ファイル内情報分離
$chgfiles = array();
for($l1=0;$l1<count($tmp);$l1++) {
// ファイル内情報分離
$tmp2 = array();
$tmp2 = explode(":<->:",$tmp[$l1]);

// 2項目目=ファイル名有り→ファイル名分離・登録
$tmpkey = str_replace("[","",$tmp2[0]);
$tmpkey = str_replace("]","",$tmpkey);
if($tmp2[1] != "") {
$tmp3 = explode("\\",$tmp2[1]);
$chgfiles[$tmpkey][] = mb_convert_encoding($tmp3[count($tmp3)-1],"SJIS","EUC-JP");
}
// ファイル名無し→無いなりに空値登録
else {
$chgfiles[$tmpkey][] = "";
}
}

foreach($chgfiles as $key=>$val) {
// nameが配列→複数有り
if(is_array($_FILES[$key][name])) {
for($l1=0;$l1<count($val);$l1++) {
if(isset($_FILES[$key][name][$l1])) {
$_FILES[$key][name][$l1] = $val[$l1];
}
}
}
// nameが非配列・単独→0番目のみ登録
else {
if(isset($_FILES[$key][name])) {
$_FILES[$key][name] = $val[0];
}
}
}

// 処理終了
return(0);
}
// 処理対象データ無し
else {
// 処理終了
return(-1);
}
}

 即興で作ったのでムダな点も多いですけどね。とりあえずのポイントとしては、
   ・一度文字コードをSJISからEUC-JPに変換してからexplodeを実施
   ・入力元のフォーム名が配列の場合にも対応
の2点でしょうか。

 一応送信元と受信先でこれらの処理を行うことで今のところ正しくファイル名取れてます。ただしつこいよーにかなりの「苦肉の策」なので、可能な限りサーバ本体側での対処、もしくはWin環境でも文字コードにSJISを使わないなど、初期仕様の段階での対処をオススメします。

 というかPHPを使う際にはWin及びSJISを選択しないのが一番だとは思いますが。
2006-08-13 [技術・作業]