nkjmkzk.net

powered by Kazuki Nakajima

Archive for the ‘jquery’ tag

ドラッグ・ドロップでソートした並び順を永続化する方法 (jQuery UI Sortable + Force.com)

Webサイトをデザインをしていると、しばしばコンポーネントの表示順を変更する機能がほしくなることがあります。そしてそういう操作はドラッグ・ドロップが直感的です。

現代ではjQuery UIのSortableを利用することで、ドラッグ・ドロップで表示順をグリグリ変更するインターフェースは夕食の献立を考えながらでも作成できてしまいます。

jQuery UI Sortableデモ

下記はそのサンプルコードのミニマム版。jQueryおよびjQuery UIのライブラリは読み込んでいる前提です。

<script type="text/javascript">
$(document).ready(function(){
    $("#container").sortable();
});
</script>

<div id="container">
    <div id="box1">box1</div>
    <div id="box2">box2</div>
    <div id="box3">box3</div>
</div>

ただし、表示順を変更するのが一過性の設定ではなく、永続化する必要があればもう少しがんばる必要があります。ただしこれもそう難しい話しではありません。

例えば前述の例で、box1〜3はデータベース内のboxテーブルに格納されたレコードだとします。このWebページにアクセスする度にそれらのレコードが取得され、画面に表示されるという仕組みであると仮定します。データベースはForce.comであるとしておきましょう。

まずboxテーブルに表示順を示すsort_orderなるフィールドを追加しておきます。

このフィールドに数値を保存し、それを元にソートをおこなう、というわけです。

jQuery UI Sortableでコンポーネントの並び替えをおこなった際に、全boxレコードのsort_orderフィールドを適切な数値で更新すれば並び順を永続化することができます。

$(“#container”).sortable()でハンドラーを登録する際に、下記のようにオプションを渡してあげます。

$("#container").sortable({
    update: function(event, ui){
        var box_ids = $(this).sortable('toArray');
        myClass.sort_box(
            box_ids,
            function(event,result){},
            {escape:true}
        );
    }
});

すると並び替えがおこなわれた際にオプションで設定した処理を実行することができます。この処理部分に上記のmyClass.sort_box()ようにJavascript Remoting等を用いてデータベースを更新してあげるのです。

$(this).sortable(‘toArray’)を実行すると、並び変えられたboxのid値が、並び替えた状態の順序で配列化され、box_idsに格納されます。それを引数としてJavascript RemotingでApexコードに渡します。

最初にHTMLを生成する際、このid値にForce.comでの各boxレコードIdをセットしておくと便利です。受け側のApexコードではこのレコードIdを使ってレコードを特定し、sort_orderフィールドに順に値をセットしていきます。

下記は受け側のApexコードのサンプルです。Javascript Remotingのメソッドを定義しています。

@remoteAction
public static void sort_box(list<id> box_ids){
    list<box__c> boxes = [select id, sort_order__c from box__c];
    integer sort_order = 1;
    for (id box_id : box_ids){
        for (box__c box : boxes){
            if(box.id == box_id){
                box.sort_order__c = sort_order;
            }
        }
        sort_order++;
    }
    update boxes;
}

box_idsで渡されたレコードIdをもとに、boxレコードをデータベースから取り出す。そして渡されたbox_idsの配列順通り、boxレコードのsort_orderフィールドに1から番号をインクリメントしながら割り振ってレコードを更新すれば並び順の永続化が完了します。

Enjoy Sorting :)

without comments

Written by 中嶋 一樹

12月 18th, 2012 at 3:38 pm

Posted in Uncategorized

Tagged with , ,

モーダル・ダイアログ「jquery.confirm(改)」

私はVisualforceでしばしば<apex:actionFunction>やJavascript Remotingを使ってApexコードを実行します。その処理内容は往々にして標準コントローラではまかなえない、アプリケーション依存の少し複雑な処理です。

そんなとき、確認、経過、結果を表示するため、あるいは処理中にユーザーの操作をブロックするためにモーダル・ダイアログを多用しています。

こちらのデモはレコードの削除操作をユーザーに確認し、その後削除処理中の経過を表示&ユーザーの操作をブロックし、削除結果を表示するモーダル・ダイアログです。

このモーダル・ダイアログはこちらで紹介されているjquery.confirmをベースに、画像を使用せず、activity-indicatorを組み合わせ処理中のインジケーターを表示できるようにしたりといったカスタマイズをおこなっています。

ダウンロードはこちらから。
https://github.com/nkjm/jquery.confirm-and-status

index.htmlファイルがサンプルの実装になっています。

<html>
<head>
    <link rel="stylesheet" href="jquery.confirm.css"></link>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.activity-indicator-1.0.0.js"></script>
    <script type="text/javascript" src="jquery.confirm.js"></script>
</head>
<body>
    <script>
        function do_status(){
            $.confirm.status({
                'title' : 'Processing',
                'message' : 'Please wait for a while...'
            });
        }

        function do_alert(){
            $.confirm.alert({
                'title' : 'Completed',
                'message' : 'Transaction has been finished.',
                'color' : '#888888',
                'button_label' : 'Close'
            });
        }

        function do_confirm(){
            $.confirm({
                'title' : 'Deleting "object"',
                'message' : 'Are you sure?',
                'button_yes_label' : 'Yes',
                'button_no_label' : 'No',
                'processing_title' : 'Processing',
                'processing_message' : 'Please wait for a while...',
                'action' : function(){
                    alert('add delete process here');
                }
            });
        }
    </script>
    <div id="container">
        <div>
            <button type="submit" onclick="do_status()">status</button>
        </div>
        <div>
            <button type="submit" onclick="do_alert()">alert</button>
        </div>
        <div>
            <button type="submit" onclick="do_confirm()">confirm</button>
        </div>
    </div>
</body>
</html>

エンジョイ。

without comments

Written by 中嶋 一樹

10月 12th, 2012 at 2:51 pm

Posted in Uncategorized

Tagged with ,

JavaScriptからForce.com REST APIへアクセス

*このエントリーは「外部のphpからREST APIでForce.comにアクセスすためのOAuth Toolkit」の続きです。

JavaScriptからForce.com REST APIを使うにはForce.com JavaScript REST API Toolkitを使うのが近道です。今回は前回の外部php環境にこのToolkitを組み込んでみます。

本来はブラウザにダウンロードされたJavaScriptから直接リソースサーバ(Force.comでAPIを受けつけてデータアクセスを提供しているサーバ)にRESTアクセスできれば良いのですが、ブラウザのセキュリティ上そのままでは実行できません。ひとつの解はphp実行環境をプロキシとして利用することです。この形態であれば問題なくAPIにアクセスすることができます。

Force.com JavaScript REST API Toolkitではこの形態をサポートするためのproxy.phpを提供しています。これはphp実行環境に置いておけばそれだけでプロキシとして動作してくれるというなんとも便利なシロモノです。

まずはこのファイルをGithubからダウンロードしてドキュメントルート直下に配置します。

$ export DOCUMENT_ROOT='/srv/nginx/html/test'

[なんらかの方法でproxy.phpをダウンロード]

$ ls ${DOCUMENT_ROOT}/
proxy.php

次にToolkitの本体であるforcetk.jsをダウンロードして同じくドキュメントルート直下に配置します。

[なんらかの方法でforcetk.jsをダウンロード]

$ ls ${DOCUMENT_ROOT}/
forcetk.js
proxy.php

次にHTMLを生成してその中でforcetk.jsを読み込みます。また、forcetk.jsはjQueryを使用しているためjQueryも同様に読み込ませます。そして今回はAccountレコードを作成するJavaScriptを実装します。これらのHTML生成からJavaScriptライブラリの読み込み、Accountレコード作成処理までをindex.phpの中に記述していきます。(OAuthによる認証部分は実装されているものとします)

$ vi ${DOCUMENT_ROOT}/index.php
<?php
session_start();
if (!isset($_SESSION['access_token']) || !isset($_SESSION['instance_url'])) {
    $_SESSION['oauth_return'] = $_SERVER['PHP_SELF'];
    header( 'Location: oauth/oauth.php' );
}
?>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
</head>
<body>
<div id='account_form'>
    <input type='text' name='account_name' />
    <input type='button' value='create new account' />
</div>

<!--jQueryをロード-->
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>

<!--forcetk.jsをロード-->
<script src="forcetk.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        var $client_id = "[あなたのConsumer ID]";
        var $proxy_url = "https://[あなたのWebサーバ]/proxy.php?mode=native";

        // REST APIアクセスを抽象化するWrapperを初期化
        var client = new forcetk.Client($client_id, null, $proxy_url);

        // セッション情報をセット
        client.setSessionToken('<?php echo $_SESSION["access_token"]; ?>', null, '<?php echo $_SESSION["instance_url"]; ?>');

        $('#account_form :button').click(function(){
            var $account_name = $('#account_form :text').attr('value');

            // createメソッドでAccountレコードを作成。第一引数はオブジェクト名。第二引数はフィールド。第三引数は成功時のコールバック。第四引数はエラー時のコールバック。
            client.create(
                "Account", 
                {"Name":$account_name}, 
                function(response){ alert('Success!'); }, 
                function(jqXHR){ alert(jqXHR.responseText); }
            );
        });
    });
</script>
</body>
</html>

ブラウザでWebサーバにアクセスし、フォームにAccountの名前を入力してボタンを押せばAjaxでAccount Recordの作成が実行されます。成功すればアラートウィンドが開き”Success!”と表示されるはずです。

Force.comの組織にログインして実際にAccountが作成されているか確認してみてください。

このToolkitの詳細なリファレンスに関してはドキュメントは見当たらなかったのですが、forcetk.jsを覗けば大体見当はつくと思います。

without comments

Written by 中嶋 一樹

11月 7th, 2011 at 6:14 am

Posted in Uncategorized

Tagged with , , , ,

jQuery Mobileことはじめ – Force.comで試してみるjQuery Mobile

先日、9月29日にjQuery Mobile 1.0 RC1がリリースされました。

jQueryといえば今やFlashを凌ぐインストール数を誇ると言われているJavaScriptのライブラリ。そのjQueryをベースとしてjQueryモバイル端末向けに最適化されたライブラリがjQuery Mobileです。

Key FeaturesのページにjQuery Mobileの特徴がリストアップされていますが、一言で言えばjQuery Mobileのハートは「メジャーなモバイル端末をほぼ全てサポートし、異なる端末間の挙動の差異を吸収してくれる」というところでしょう。

Objective Cで書いたネイティブiPhoneアプリは当然ながらAndroid端末ではそのまま動かすことはできませんが、jQuery Mobileで書いたWebアプリケーションであればどのようなモバイル端末からも即座に利用でき、さらに通常のWebページではなくモバイル端末での操作に最適化されたネイティブアプリに近いインターフェースを提供してくれます。

  • Objective Cとかを知らなくてもネイティブっぽいモバイルアプリが書ける
  • 端末ごとのクセはjQueryにお任せ

素晴らしいじゃないですか。早速動かしてみましょう。

JavaScriptは純粋なWebサーバさえあれば走らせることができるのが良いところ。なのでWebサーバがある人はそこでindex.htmlでも作成してコーディングをスタートできます。

とはいえ手頃なWebサーバが手元にない、という人はこの機会にForce.comを利用してみましょう。

Force.comは一言でいえばアプリケーション開発、稼働、配信プラットフォームです。企業向けのアプリケーションに用いられることが多いですが、技術的には何にでも使えます。そして今回のようにjQueryベースのWebアプリケーションをホストさせることも簡単にできます。Developer Editionという無償で利用できるエディションがあるのでまずはこちらのページからサインアップしてアカウントを作成します。

 

UsernameはEmail形式である必要がありますが、有効なEmailである必要はありません。若干意味がわかりませんが、そこはかとなく「nkjm.kzk@jquerymobile.dev」とかそんな感じでOKです。(Email Addressは本当のEmailを入れてください)

サインナップするとすぐにWelcomeメールが届くのでそのメールにあるリンクから新しいパスワードを設定しつつログインします。

画面右上に自身の名前が表示されたプルダウンメニューがありますのでそこから「設定」を選択します。

 

左のサイドメニューから「開発」=>「ページ」をクリックし、「Visualforceページ」中の「新規」をクリックします。

 

表示ラベルと名前には「jquerymobile」等適当な名前を入力し、Visualforce Markupにこちらのコードをペタッと張り付けます。

 

このフォームに書いた内容がまさにHTMLで出力されることになります。HTML, CSS, JavaScriptといった一般的なマークアップでそのままコーディングできるのに加え、Apexというforce.com専用のマークアップを利用することができます。サンプルコードでは<apex:page>タグおよび<apex:ouputText>タグがありますが、それ以外は通常のHTMLであり、その中にごくシンプルなjQuery Mobileの要素を入れこんであります。すべて埋めたら「保存」をクリックしてページを保存します。

次に左のサイドメニューから「開発」=>「サイト」をクリックします。このページでWebサーバの設定を行うわけです。といってもごくシンプルな設定のみです。はじめにドメイン名を指定します。適当に取得可能なものを設定してください。

 

ドメイン名が登録できたら「新規」をクリックしてこのドメイン名にアクセスすると表示されるサイトを作成します。

 

ここでは適当なサイトの名前を設定し、「有効」にチェックをいれてこのサイトをアクセス可能な状態にし、「有効なサイトのホームページ」に先ほど作成したページを指定します。

 

これで完了です。

指定したURLにアクセスしてみましょう。こちらの環境ではhttp://nkjm-jquerymobile-developer-edition.na12.force.comですね。

こんなサイトが表示されればOKです。

 

PCのブラウザで確認できたらiPhone, iPad, Androidなどのモバイル端末で是非挙動を見てみてください。Webアプリなのにネイティブに近いインターフェースであることが実感できると思います。

iOSでは端末のオリエンテーション(縦横)を変えたときにうまく表示幅があわなくなるマイナーな不具合があるようですが、次期バージョンでFixされるとのことなので心配なさそうです。

そんなこんなで気になるjQuery Mobileですが、近々で正式版が出るようですので引き続き要チェックですね。

また、こんな感じでForce.comをWebアプリの開発環境として利用することもできます。今回はブラウザ上でコードを入力しましたが、Force.com IDEという統合開発環境も提供されており、Force.comのクラウドとローカル環境を同期しながらより効率的に開発作業を行うことも可能です。そちらも是非。

without comments

Written by 中嶋 一樹

10月 9th, 2011 at 7:28 pm

Posted in Uncategorized

Tagged with , ,