CodeIQ MAGAZINECodeIQ MAGAZINE

使いやすさ抜群!「Novius OS」で複数ページのフォームを作る #php #jQuery

2014.01.14 Category:技術コラム Tag: , ,

  • 6
  • このエントリーをはてなブックマークに追加
main

「Novius OS」はフランスで開発されたソフトウェアですが、日本語対応もあり、使いやすいウェブサイトを構築することが可能です。

今回は、Novius OSに同梱されているフォームアプリケーションについてご紹介します。
by 馬場美由紀 (CodeIQ中の人)

FuelPHP, jQueryUI, Wijmoを使ったCMS「Novius OS」

Novius OSは、FuelPHP・jQueryUI・Wijmoを使ったCMS(コンテンツ管理システム) です。フランスで開発がスタートしたソフトウェアですが、githubフォーラムで開発が進められており、様々な人が参加し、様々なアイデアが議論されています。

現在のバージョンはChibaで、日本の都市名を冠することから分かるように、日本語に対応(日本語ロケール同梱)しており、日本語でも使えるようになっています。設計はシンプルですがユーザーインターフェースにこだわった作りになっています。

今回は、Novius OSに同梱されているフォームアプリケーション(サンプルはこちらで確認できます)について紹介します。

複数ページに分割されるフォームが作成でき、上の画像のようにプログレスバーも表示されます。郵便番号を入力すると住所が補完されます。しかし真骨頂はこれからです。


画像の上の方に、入力済みのデータが表示されていますね。全部入力した後に確認画面で確認、というフォームはよく見かけます。しかしNovius OSのフォームは、複数ページの各ステップにおいて入力済みデータを確認することができます。試しにこのフォームを入力してみると、使いやすさが実感できるでしょう。

この部分は、jQueryを用いて実装されています。

==  https://gist.github.com/felixgilles/7369512 より引用  ==
==  AGPL ver.3.0 or later  ==
jQuery(function($) {
    $('#form_submit').ready(function(){
        $('.page_break').prepend('<dl class="check_before_send"></dl>');
    });
    $('.page_break_next').click(function(){
        var page = $('.page_break:visible').next();

        // clear data when going to new page.
        // (without this, data will be duplicated at page 3 or later.)
        page.find('dl.check_before_send>dt').remove();
        page.find('dl.check_before_send>dd').remove();

        // For not apply row css at first display
        page.find('dl.check_before_send').addClass('row');

        // get form data
        var fields = $("form").serializeArray();
        // (for multiple choice)
        // if 2 or more choices are checked, we will get the same formtitle with different values.
        var formtitle_before = '';
        var fieldvalue_before = '';
        var prevPages = page.prevAll();
        jQuery.each(fields, function(i, field){
            // exclude form_captcha
            if (field.name !== 'form_captcha') {
                var input = $('[name="'+field.name+'"]');

                if (!prevPages.find(input).length) {
                    return;
                }

                var formtitle = input.attr('title');
                var formtype = input.attr('type');
                // exclude hidden attribute data, and empty field
                if (formtype !== 'hidden' && field.value) {
                    // compare formtitle of this field and the formtitle of the previous field.
                    //  if formtitle is different, new dt-dd.
                    if (formtitle_before != formtitle) {
                        page.find(".check_before_send").append('<dt class="columns six"></dt><dd class="columns six"></dd>');
                        // the easist way of escaping before inserting is using text() method.
                        page.find(".check_before_send").find("dt:last").text(formtitle);
                        page.find(".check_before_send").find("dd:last").text(field.value);
                    } else {
                        //  if formtitle is same, concatenates field.value.
                        //  (for multiple choice)
                        field.value = fieldvalue_before + ', ' + field.value;
                        page.find(".check_before_send").find("dd:last").text(field.value);
                    }
                // (for multiple choice)
                formtitle_before = formtitle;
                fieldvalue_before = field.value;
                }
            }
        });
    });
});

「次ページ」ボタンをクリックする度に書き換え処理を行うことで、複数ページの各ステップにおいて入力済みデータを実現しています。

Novius OSを使うと、このようにウェブサイトの訪問者にとって使いやすいウェブサイトを構築することができます。日本語対応しているCMSなので、日本向けのウェブサイトでも使ってみてはいかがでしょうか。

執筆者プロフィール 水野 史土
レスキューワーク株式会社(WordPressサイト/テーマ/プラグインの診断および障害復旧サービス)の代表取締役。WordPressおよびNovius OSのコアコード貢献者。
twitter: @ounziw
ブログ: http://www.rescuework.jp/blog.html

  • 6
  • このエントリーをはてなブックマークに追加

■この記事を書いた人

avatar

馬場美由紀 (CodeIQ中の人)

エンジニアの勉強会やイベントレポート担当。技術やキャリアに関するエンジニア向けお役立ち情報もお伝えしていきます。面白い情報があったら教えてね!酔ったら記憶なくす記憶飛部所属。Twitter:@miyaq

■関連記事

今週のPickUPレポート

新着記事

週間ランキング

CodeIQとは

CodeIQ(コードアイキュー)とは、自分の実力を知りたいITエンジニア向けの、実務スキル評価サービスです。

CodeIQご利用にあたって
関連サイト
codeiq

リクルートグループサイトへ