記事概要

「JavaScript　Webアプリ入門」（※１）（※２）辺りのキーワードで検索されるだろう「ボタン配置や押された時の動作ってどう実装すればよいんだろう？」の問いに対して、私だったら「こうアプローチすると分り易いな」って話。

先ずは、クライアント側だけで動作が完結するスタンドアロン型から作ってみる。Webサーバー側の実装不要（置き場、としてだけ利用）。

なお、最近はAngularJSなどが主流らしいが、（私は）「先ずはjQueryが分からんと、AngularJS へ踏み出せないよ」ってスタンス。なので、この記事はjQueryベース。

Webアプリの作成方針

div要素でボタンなどのコントロールをレイアウト。
レイアウトしたdiv要素に対して、jQueryのclick()メソッドなどを用いて、機能を実装。
設定を含む保存先（Windowsアプリで言うところの初期化ファイル等）には、cookieを利用。

div要素でレイアウト

Webアプリでのレイアウトの基本はdiv要素で行う。
スタイルシートのfluot属性を使って、<div style="float: left;">で横に並べる（行の終わりに<div style="float: none; clear: both;">で解除を忘れずに）。縦はそのまま<div>を並べればOK。

ここで、ボタンクリックなどでアクションさせたいdiv要素に対しては、id属性を付属させるのを忘れずに。

jQueryのid属性のセレクタ経由で、div要素に対するクリックアクションなど実装

必ずしもid属性である必要は無いが、「基本はid属性のセレクタ使う」と考えたほうが楽。
以下のように「～のボタンが押されたら×××」って感じにコーディングする。
C言語＋WinAIPによるWindows GUIアプリでの、「窓プロシージャ―にてWM_COMMAND捉まえてボタンクリック応答を組む」のと同じ。

bind_action.js

// 全コピーボタン
$("#id_copy_all").click(function(){
    input_text.select();
    document.execCommand('copy');
});

データの保存先としてはcookieを利用

オプション設定値のみならず、例えば下記のサンプルコードに「内容を保存」ボタンを付ける場合も、保存先としてcookieを使えばOK（※３）。1キーあたり4KBまで保存可能（※４）。jquery.cookie.jsを使えば読み書き楽々（※５）。

サンプルコード

具体例として「文字数カウントとクリップボードへのコピー機能付きメモ帳」を書いてみると、以下のようなコードになる。Chrome 47で動作確認。

（見た目については、この後にCssとアイコン画像その他で整えるのがよい）

notepad_standalone.html

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
    <title>メモ帳</title>

    <meta charset="UTF-8" />
    <meta name="viewport" id="id_viewport" content="width=device-width" >

    <meta http-equiv="Content-Style-Type" content="text/css">
    <style type="text/css">
        .a-click-replaced {
            text-decoration: none;
            border: none;
        }
        .img-option-icon {
            width: 24px;
            height: 24px;
        }     

        .div-float {
            float: left;
        }
        .div-float-end {
            float: none;
            clear: both;
        }
    </style>

    <meta http-equiv="Content-Script-Type" content="text/javascript; charset=UTF-8" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

    <script language="JavaScript">
    <!--
        $(document).ready(function(){
            var input_text = $("#id_notes");
            var noticeAndFadeout = function( str ){
                $("#id_user_notice").text( str );
                window.setTimeout( function(){ $("#id_user_notice").text(""); }, 5000 );
            };
            var span_length_of_text = $("#id_string_length");


            // 変更が発生したら文字数カウント。
            input_text.bind( "input" ,function(){
                span_length_of_text.text( input_text.val().length )
            });

            // テキスト消去ボタン
            $("#id_clear_text").click(function(){
                input_text.val("");
                span_length_of_text.text( "0" ); // 文字数を明示的にゼロ表示。
                noticeAndFadeout("メモを削除しました。");
            });

            // 全コピーボタン
            $("#id_copy_all").click(function(){
                input_text.select();
                document.execCommand('copy');
                noticeAndFadeout("クリップボードへコピーしました。");
            });

        });
    // -->
    </script>
</head>
<body>


<div class="base-area">
    <div style="width:100%;">
        <div class="div-float" style="margin-right: -80px; width:100%;">
            <form>
            <!-- テキストエリアにmarginが効かない（涙） -->
            <textarea id="id_notes" rows="14" cols="32" style="width: 75%;"></textarea>
            </form>
        </div>
        <div class="div-float" style="width:60px; padding: 10px; font-size:smaller;">
            <div id="id_copy_all">
                <a href="javascript:void(0);" class="a-click-replaced   button">
                <!-- img タグなどでアイコンを適当に配置
                    <img class="img-option-icon" src="./icon_copy.png"><br>
                 -->
                <span>全コピー</span>
                </a>
            </div>
            <br>
            <div id="id_clear_text">
                <a href="javascript:void(0);" class="a-click-replaced">
                <span>消去</span>
                </a>
            </div>
            <br>
        </div>
        <div class="div-float-end"></div>
    </div>
    <div style="font-size: smaller;">
        合計文字数： <span id="id_string_length"></span>
    </div>
    <div>
        <span id="id_user_notice" style="font-size: smaller; background-color: #ffffaa;"></span> &nbsp;
    </div>

    <hr width="100%"></hr>
    <div style="color: #777777; font-size: smaller;">
        Javascript+CookieON Recommended (Operations: Chrome 47-) <br>
    </div>
</div>

</body>
</html>

注釈ほか

※１：「C言語　Windowsアプリ入門」等の検索ワードのJavaScript版イメージ。
　　　Webアプリ開発の入り口において「これだ！」ってのにイマイチ辿り付けなかったので。

※２：「Webアプリ」は、「Webブラウザ上で動作するアプリ」の意味。
　　　Android / iOS / Windows に依存せずに、ブラウザさえあれば動くアプリ♪
　　　（…そうはいいつつも、Chromeブラウザ前提、になりがちだけれど）
　　　最初はスタンドアロンを前提。サーバ側との連携はその後の機能拡張扱い。

※３：もちろん、本来はサーバー側にDB準備して行うべきだが、あくまで「最初の一歩として」はcookieで良いと思う。

※４：RFC 2109 で「最低でも4KBをサポートすること」と書かれている。
　　　https://www.ietf.org/rfc/rfc2109.txt

at least 4096 bytes per cookie

　　　実際、2012年時点で既に4KB以上がサポートされているっぽい。
　　　「最新ブラウザのクッキーの制限(数,サイズ)を調べてみた（2012）」
　　　http://d.hatena.ne.jp/hosikiti/20120720/1342750879

※５：jquery.cookie.js は「cookieを手軽に扱えるようになるjQueryのプラグイン」。
　　　「jquery.cookie.jsの使用方法メモ」などを参照のこと。
　　　http://cly7796.net/wp/javascript/plugin-jquery-cookie/

Webアプリの作り方（スタンドアロン、jQueryベース）