Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
138 lines (109 sloc) 4.71 KB

勤怠アプリ

ニフティクラウド モバイルバックエンド(Nifty Cloud Mobile Backend)とMoncaを用いて、次のような勤怠アプリを作ります。

2016-10-08 11 29 52

  • 画面に現在時刻が表示されている
  • 「出勤」を押すと出勤時間を記録する
  • 「退勤」を押すと退勤時間を記録する
  • 画面いは今日の出勤時間と退勤時間が表示あれている
  • 「履歴へ」を押すと別画面でこれまでの履歴を表示する

今回は、次のことを学びます。

  • ニフティクラウド モバイルバックエンドを用いたデータの書き込み・読み込み
  • Onsen UIの導入
  • JavaScriptの分割
  • イベントベースのプログラムの組み立て方

プロジェクトを作成します。 「新規プロジェクトの作成」から、「Onsen UI」→「Onsen UI V2 JS Minimum」を選択します

2016-10-08 11 38 26

まずはHTMLを書いてしまいます。 index.htmlに下記を入力してください。

<body>
    <ons-navigator id="navigator" page='page1'></ons-navigator>
    <ons-template id='page1'>
        <ons-page>
            <ons-toolbar>
                <div class='center'>勤怠アプリ</div>
            </ons-toolbar>
            <div>
                <p>現在の日時</p>
                <p id='date_display'>現在の日付が入ります</p>
                <p id="time_display">現在の時間が入ります</p>
            </div>
            <div>
                <ons-button id="in-button">出勤</ons-button>
                <ons-button id="out-button">退勤</ons-button>
            </div>
            <div>
                <table>
                    <thead>
                        <tr>
                            <th>出勤時刻</th>
                            <th>退勤時刻</th>
                        </tr>    
                    </thead>
                    <tbody>
                        <tr>
                            <td id='today_in'></td>
                            <td id='today_out'></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div>
                <ons-button id="push-button">履歴へ</ons-button>
            </div>
        </ons-page>
    </ons-template>
    
    <ons-template id="page2">
        <ons-page>
            <ons-toolbar>
                <div class="left"><ons-back-button>戻る</ons-back-button></div>
                <div class="center">履歴</div>
            </ons-toolbar>
            
            <p>履歴ページ</p>
            <div>
                <table>
                    <thead>
                        <tr>
                            <th>日付</th>
                            <th>時間</th>
                            <th>出勤/退勤</th>
                        </tr>    
                    </thead>
                    <tbody id='all_history'>
                    </tbody>
                </table>
            </div>
        </ons-page>
    </ons-template>
</body>

「履歴へ」を押したらページを遷移するようにします。ここからJavaScriptを書いていきますが、下記のようにutil.js, event.js, app.jsの3つのJavaScriptファイルを作ってください。

  • util.js・・・アプリのロジックの部品となる関数を書く
  • event.js・・・ボタンをクリックしたときのイベントのロジックを書く
  • app.js・・・アプリのロジックをまとめて起動する部分を書く

まず、index.html内のheadタグ内にあるScriptタグは、下記のように書き換えます。もともとあったscriptタグは削除してください(分割してこれら3つのファイルの中に書いていきます)。

    <script src='js/util.js'></script>
    <script src='js/event.js'></script>
    <script src='js/app.js'></script>

app.js内に下記のように書きます。

ons.ready(function() {
    console.log("Onsen UI is ready!");
    registerPageTransitionEvent();
});

event.js内に下記のように書きます。

function registerPageTransitionEvent() {
    var push_button = document.getElementById('push-button');
    var navigator = document.getElementById('navigator');
    push_button.onclick = function(){
        navigator.pushPage('page2');
        showAllHistory();
    };
}

ここまで書いたらアプリを実行してみましょう。「履歴へ」ボタンを押すと別画面に遷移するようになっています。