CodeIQ MAGAZINECodeIQ MAGAZINE

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

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

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

「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

■関連記事

製品データの活用方法を考える!WebGLで3DCG描画する「きゃん家!」技術解説(3)#5jcup... 製品データの活用方法を考える 第1回、第2回で紹介してきた通り、「きゃん家!」は「HTML5 Japan Cup(以下5jCup)」の花王賞を狙って開発したWebアプリです。賞のテーマである「花王製品カタログサイトを徹底的にリ・デザインしてください!」に沿って次世代型3DCGカタログを作り上げまし...
3DモデルをWebGLで描画する「きゃん家!」技術解説(2)──外部3Dデータの読み込み・描画処理 ... 3DきゃんちをWebGLで描画する モデルデータ(PMXファイル)を読み込む jThreeの松田光秀です。 前回は「きゃん家!」の特徴や、音声合成、開発の舞台裏などを中心にレポートしました。 次世代型3DCGカタログ「きゃん家!」 3DきゃんちモデルはMMD(MikuMikuDance)で使...
WebGLで3DCG描画!jThreeを活用した次世代型カタログ「きゃん家!」技術解説(1) #5j... 「きゃん家!」のチーム発足から応募まで jThreeの松田光秀です。 今回ご縁があり、「チームきゃん家!」に参加することになりました。 この連載では「きゃん家!」開発の裏側について解説していきたいと思います。 「きゃん家!」は「HTML5 Japan Cup(以下5jCup)」の花王賞を狙って開...
GUIでアプリケーションが作れるNovius OSで効率的な開発 #PHP... 「アプリケーション作成」ウィザードとは 「アプリケーション作成」ウィザードとは、Novius OSに標準同梱されているアプリケーションです。管理画面からアプリケーションの雛形を作ることができます。開発を効率化するツールとして役立ちます。 このウィザードを使ってアプリケーションの雛形を作ると、 ...
クイックソートとバブルソートを比較してみよう #PHP... クイックソートとバブルソート ソートの方法には様々な方法があります。よく知られているものには、クイックソートやバブルソートなどがあります。ほかにもソート方法がありますが、ここではこの2つを紹介します。尚、今回は要素の値は全て異なる前提とします。 バブルソート バブルソートは、一番小さい(or大...
Webサイト発注の指標にもなるconcrete5のポイント機能「Karma」とは? #concret... concrete5とは? concrete5とは、CMS(conctents management system)と呼ばれる、Webサイトをブラウザから更新できるようにするソフトウェアのことです。アメリカ、オレゴン州ポートランドで開発されていますが、英語だけでなく様々な言語に対応しています。日本語...

今週のPickUPレポート

新着記事

週間ランキング

CodeIQとは

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

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

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