【JavaScript】 アドエス編 (その3) 簡単なAjaxアプリ
2007.10.04 Author: たわばがに
久々のアドエス（ Advanced/W-ZERO3[es] ）上での JavaScript ネタです。
今回は簡単な Ajax アプリの実験をしてみます。
ということで、ガリガリとサンプルを作ってみました。
今回は prototype.js と scriptaculous.js の2つをモジュールで使用しました。
(これ使えば簡単だから)
「ドラッグ＆ドロップで画面に表示されている文字列のリストをグリグリ入れ替える（入れ替えた結果はサーバサイドに渡して保存）」
というお手軽なものです。
なお、都合により、サーバサイドのスクリプトはお見せできません。
が、目的はあくまでアドエスでAjaxアプリが動くかどうか、なので、無問題。（のはず）
以下が実験結果。
例によっていつもの3ブラウザで確認しています。
【InternetExplorer Mobile】
全く動かず。
【Opera Mobile】
微妙だけど、何とか動作。リストをぐりぐり動かすと、リストが崩れた状態になってしまう。
【LunaScape Mobile】
全く動かず。
ということで、Opera Mobile 以外は全滅という結果になりました。
そして何より、ドラッグ＆ドロップという操作自体、
アドエスのブラウザ上でやらせるのは微妙(というより無茶)な気がしました。
(操作自体にも微妙なコツがいりましたし)
単純なボタンやリンクのクリックをイベントのキーとしたAjaxアプリであれば
使い道があるかもしれませんね。
名古屋のWebシステム開発・ネットワーク構築会社 コネクティボへ
今回は簡単な Ajax アプリの実験をしてみます。
ということで、ガリガリとサンプルを作ってみました。
今回は prototype.js と scriptaculous.js の2つをモジュールで使用しました。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script type="text/javascript">
<!--
function updateSortable() {
// Ajaxオブジェクト生成
new Ajax.Updater('obj',
'list.php?mode=update',
{onComplete:function() {
Sortable.create('data_list',
{dropOnEmpty:true,
containment:['data_list'],
constraint:false,
onUpdate:function(){updateSortable();}}) },
parameters:Sortable.serialize('data_list'),
evalScripts:true,
asynchronous:true});
}
//-->
</script>
</head>
<body onLoad="Sortable.create('data_list',
{dropOnEmpty:true,
containment:['data_list','saved'],
constraint:false,
onUpdate:function(){updateSortable();}})">
<div id="obj" style="width:450px; padding:5px; border:1px solid #000000; background-color:#ccffff;">
<ul id="data_list" type="circle">
<!-- PHPで出力 / ここから -->
<li style="padding:5px; cursor:hand;" id="d_1">ドラッグ＆ドロップで</li>
<li style="padding:5px; cursor:hand;" id="d_2">入れ替えできる</li>
<li style="padding:5px; cursor:hand;" id="d_3">リストですよ</li>
<li style="padding:5px; cursor:hand;" id="d_4">ライブラリ使うと</li>
<li style="padding:5px; cursor:hand;" id="d_5">簡単なんです</li>
<!-- PHPで出力 / ここまで -->
</ul>
</div>
</body>
</html>
で、これは何をするスクリプトかというと、「ドラッグ＆ドロップで画面に表示されている文字列のリストをグリグリ入れ替える（入れ替えた結果はサーバサイドに渡して保存）」
というお手軽なものです。
なお、都合により、サーバサイドのスクリプトはお見せできません。
が、目的はあくまでアドエスでAjaxアプリが動くかどうか、なので、無問題。（のはず）
以下が実験結果。
例によっていつもの3ブラウザで確認しています。
【InternetExplorer Mobile】
全く動かず。
【Opera Mobile】
微妙だけど、何とか動作。リストをぐりぐり動かすと、リストが崩れた状態になってしまう。
【LunaScape Mobile】
全く動かず。
ということで、Opera Mobile 以外は全滅という結果になりました。
そして何より、ドラッグ＆ドロップという操作自体、
アドエスのブラウザ上でやらせるのは微妙(というより無茶)な気がしました。
(操作自体にも微妙なコツがいりましたし)
単純なボタンやリンクのクリックをイベントのキーとしたAjaxアプリであれば
使い道があるかもしれませんね。
名古屋のWebシステム開発・ネットワーク構築会社 コネクティボへ
