しがないプログラマーの備忘録: 6月 2013

2013年6月25日火曜日

GIMP2.8.4の起動方法

【目的】
GIMP2.8.4を起動します。

【準備】
１．「Gimp2.8.4のインストール方法」でGIMP2.8.4をインストールしておきます。

【手順１】
１．Windowsのスタートメニューから「GIMP 2」をクリック。

【手順２】
１．起動するのを待ちます。

【手順３】
１．以下の様に「GIMP」が起動すれば成功です。

以上です。

GIMP2.8.4のインストール方法

【目的】
GIMP2.8.4をダウンロードし、インストールします。

【手順１】
１．「Gimp2.8.4のダウンロード方法」の手順でダウンロードした「gimp-2.8.6-setup.exe」を実行。

【手順２】
１．「実行」ボタンをクリック。

【手順３】
１．「OK」ボタンをクリック。

【手順４】
１．「Install」ボタンをクリック。

【手順５】
１．インストールが完了するのを待ちます。

【手順６】
１．「Finish」ボタンをクリック。

以上です。

GIMP2.8.4のダウンロード方法

【目的】
GIMP2.8.4をダウンロードし、インストールします。

【手順１】
１．「GIMPのサイト」にアクセス。
２．「Downloads」をクリック。

【手順２】
１．「Download GIMP 2.8.4」をクリック。

【手順３】
１．ダウンロードが開始されるのを待ちます。

【手順４】
１．保存場所を選択。
２．「保存」ボタンをクリック。

以上です。

2013年6月24日月曜日

【目的】
Twitter Bootstrap2.3.1でボタンをトグル(ON/OFF)表示にし、ページ表示初期状態でトグル操作します。

【準備】
１．「Twitter Bootstrap2.3.1の使用方法」の手順の通り、Twitter Bootstrapを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    </head>
    <body>
        <button id="button1" type="button" class="btn" data-toggle="button">buttonタグ　ボタン</button>

        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script>
            $(document).ready(function(){
                var btn = $('#button1');
                btn.button('toggle');
            });
        </script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

ボタン(ラジオボタン操作)

【目的】
Twitter Bootstrap2.3.1でボタンをチェックボックス表示にし、トグル操作します。

【準備】
１．「Twitter Bootstrap2.3.1の使用方法」の手順の通り、Twitter Bootstrapを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    </head>
    <body>
        <div class="btn-group" data-toggle="buttons-radio">
            <button id="button1" type="button" class="btn">左</button>
            <button id="button2" type="button" class="btn">中央</button>
            <button id="button3" type="button" class="btn">右</button>
        </div>
        
        <br /><br />

        <button id="button1-toggle" type="button" class="btn">左トグル操作</button>
        <button id="button2-toggle" type="button" class="btn">中央トグル操作</button>
        <button id="button3-toggle" type="button" class="btn">右トグル操作</button>

        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script>
            $('#button1-toggle').click(function () {
                var btn = $('#button1');
                btn.button('toggle');
            })
            $('#button2-toggle').click(function () {
                var btn = $('#button2');
                btn.button('toggle');
            })
            $('#button3-toggle').click(function () {
                var btn = $('#button3');
                btn.button('toggle');
            })
        </script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

ボタン(チェックボックス操作)

<!DOCTYPE html>
<html>
    <head>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    </head>
    <body>
        <div class="btn-group" data-toggle="buttons-checkbox">
            <button id="button1" type="button" class="btn">左</button>
            <button id="button2" type="button" class="btn">中央</button>
            <button id="button3" type="button" class="btn">右</button>
        </div>

        <br /><br />

        <button id="button1-toggle" type="button" class="btn">左トグル操作</button>
        <button id="button2-toggle" type="button" class="btn">中央トグル操作</button>
        <button id="button3-toggle" type="button" class="btn">右トグル操作</button>

        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script>
            $('#button1-toggle').click(function () {
                var btn = $('#button1');
                btn.button('toggle');
            })
            $('#button2-toggle').click(function () {
                var btn = $('#button2');
                btn.button('toggle');
            })
            $('#button3-toggle').click(function () {
                var btn = $('#button3');
                btn.button('toggle');
            })
        </script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

ボタン(トグル操作)

【目的】
Twitter Bootstrap2.3.1でボタンをトグル(ON/OFF)表示にし、トグル操作します。

【準備】
１．「Twitter Bootstrap2.3.1の使用方法」の手順の通り、Twitter Bootstrapを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    </head>
    <body>
        <button id="button1" type="button" class="btn" data-toggle="button">buttonタグ　ボタン</button>
        
        <br /><br />
        
        <button id="button2" type="button" class="btn">トグル操作</button>

        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script>
            $('#button2').click(function () {
                var btn = $('#button1');
                btn.button('toggle');
            })
        </script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

2013年6月20日木曜日

ボタン(ラジオボタン)

【目的】
Twitter Bootstrap2.3.1でボタンをラジオボタン表示にします。

【準備】
１．「Twitter Bootstrap2.3.1の使用方法」の手順の通り、Twitter Bootstrapを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    </head>
    <body>
        <div class="btn-group" data-toggle="buttons-radio">
            <a href="#" class="btn">左(aタグ　ボタン)</a>
            <a href="#" class="btn">中央(aタグ　ボタン)</a>
            <a href="#" class="btn">右(aタグ　ボタン)</a>
        </div>

        <br /><br />

        <div class="btn-group" data-toggle="buttons-radio">
            <button type="button" class="btn">左(buttonタグ　ボタン)</button>
            <button type="button" class="btn">中央(buttonタグ　ボタン)</button>
            <button type="button" class="btn">右(buttonタグ　ボタン)</button>
        </div>

        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

ボタン(チェックボックス)

【目的】
Twitter Bootstrap2.3.1でボタンをチェックボックス表示にします。

【準備】
１．「Twitter Bootstrap2.3.1の使用方法」の手順の通り、Twitter Bootstrapを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    </head>
    <body>
        <div class="btn-group" data-toggle="buttons-checkbox">
            <a href="#" class="btn">左(aタグ　ボタン)</a>
            <a href="#" class="btn">中央(aタグ　ボタン)</a>
            <a href="#" class="btn">右(aタグ　ボタン)</a>
        </div>

        <br /><br />

        <div class="btn-group" data-toggle="buttons-checkbox">
            <button type="button" class="btn">左(buttonタグ　ボタン)</button>
            <button type="button" class="btn">中央(buttonタグ　ボタン)</button>
            <button type="button" class="btn">右(buttonタグ　ボタン)</button>
        </div>

        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

ボタン(トグル)

【目的】
Twitter Bootstrap2.3.1でボタンをトグル(ON/OFF)表示にします。

【準備】
１．「Twitter Bootstrap2.3.1の使用方法」の手順の通り、Twitter Bootstrapを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    </head>
    <body>
        <a href="#" class="btn" data-toggle="button">aタグ　ボタン</a>
        <button type="button" class="btn" data-toggle="button">buttonタグ　ボタン</button>

        
        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

ボタン(状態遷移)

【目的】
Twitter Bootstrap2.3.1でボタンの状態遷移を設定します。

【準備】
１．「Twitter Bootstrap2.3.1の使用方法」の手順の通り、Twitter Bootstrapを配置しておきます。

【手順１】
１．HTMLファイル「index.html」(任意)を作成。
２．「index.html」を以下の様に入力。

<!DOCTYPE html>
<html>
    <head>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    </head>
    <body>
        <a href="#" id="button1" class="btn" data-loading-text="読込中...">aタグ　ボタン</a>
        <button type="button" id="button2" class="btn" data-loading-text="読込中...">buttonタグ　ボタン</button>

        
        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script>
            $('#button1').click(function () {
                var btn = $(this)
                btn.button('loading')
                setTimeout(function () {
                    btn.button('reset')
                }, 3000)
            })
            $('#button2').click(function () {
                var btn = $(this)
                btn.button('loading')
                setTimeout(function () {
                    btn.button('reset')
                }, 3000)
            })
        </script>
    </body>
</html>

【手順２】
１．ブラウザで「index.html」を開き、以下の様に表示されれば成功です。

以上です。

2013年6月14日金曜日

Webアプリケーション(JavaEE7)のGlassFish Serverの停止方法

【目的】
NetBeans IDE 7.3.1でWebアプリケーション(JavaEE7)で実行したGlassFish Serverを停止します。

【手順１】
１．「Webアプリケーション(JavaEE7)のプロジェクトの実行方法(NetBeans IDE 7.3.1)」でWebアプリケーションを実行しておきます。
２．出力ウィンドウの「GlassFish Server」のタブを開きます。
３．左の「サーバーを停止」アイコンをクリックします。

【手順２】
１．以下の様にGlassFishサーバーがシャットダウンされれば成功です。

以上です。

2つのテーブルの行の高さを揃える方法

【目的】
jQueryで、2つのテーブルの行の高さを揃えます。。

【手順】
１．「jQuery1.8.1のダウンロード方法」の手順で、jQuery1.8.1をダウンロードしておきます。
２．「028-SyncTableCellHeightJQuery.html」というファイルを作成。
３．「028-SyncTableCellHeightJQuery.html」を以下の様に入力。

<html>
<head>
    <script type="text/javascript" src="./jquery-1.8.1.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $("#button1").click(function(){
            var table1Lines = $("#table1 tbody").children();
            var table2Lines = $("#table2 tbody").children();

            for(var i=0; i < table1Lines.length; i++) {
                var line1 = table1Lines.eq(i);
                var line2 = table2Lines.eq(i);
                if ($(line1).height() > $(line2).height()) {
                    $(line2).height($(line1).height());
                } else {
                    $(line1).height($(line2).height());
                }
            }
        })
    })
    </script>
</head>
<body>
    <table>
        <tr>
            <td>
                <table id="table1">
                    <tbody>
                        <tr>
                            <td style="border:solid 1px black; height:100px;">テーブル１－１</td>
                        </tr>
                        <tr>
                            <td style="border:solid 1px black; height:200px;">テーブル１－２</td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td>
                <table id="table2">
                    <tbody>
                        <tr>
                            <td style="border:solid 1px black; height:200px;">テーブル２－１</td>
                        </tr>
                        <tr>
                            <td style="border:solid 1px black; height:100px;">テーブル２－２</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </table>
    <input id="button1" type="button" value="sync">
</body>
</html>

４．ダウンロードした「jquery-1.8.1.min.js」と「028-SyncTableCellHeightJQuery.html」を同一ディレクトリに配置します。
５．「028-SyncTableCellHeightJQuery.html」をブラウザで開きます。
６．以下の様に表示されれば成功です。

以上です。

Webアプリケーション(JavaEE7)のプロジェクトの実行方法(NetBeans IDE 7.3.1)

【目的】
NetBeans IDE 7.3.1でWebアプリケーション(JavaEE7)のプロジェクトを実行します。

【手順１】
１．「Webアプリケーション(JavaEE7)のプロジェクトの作成方法(NetBeans IDE 7.3.1)」でWebアプリケーションを作成しておきます。
２．起動したいプロジェクトを選択し、右クリックから「実行」を選択。

【手順２】
１．プロジェクトが起動するのを待ちます。

【手順３】
１．以下の様にブラウザが自動的に起動し、プロジェクトが表示されれば成功です。

以上です。

Webアプリケーション(JavaEE7)のプロジェクトの作成方法(NetBeans IDE 7.3.1)

【目的】
NetBeans IDE 7.3.1でWebアプリケーション(JavaEE7)のプロジェクトを作成します。

【手順１】
１．「NetBeans IDE 7.3.1(Zip版)にGlassFish Server4.0を設定する方法」でNetBeans IDE 7.3.1にGlassFish Server4.0を設定しておきます。
２．メニューから「ファイル」⇒「新規プロジェクト」を選択。

【手順２】
１．「Java Web」⇒「Webアプリケーション」を選択。
２．「次」ボタンをクリック。

【手順３】
１．プロジェクト名に「JavaEE7WebApplicationSample001」と入力。
２．プロジェクトの場所に「C:\NB7.3.1\netbeans\NetBeansProjects」と入力。
３．「次」ボタンをクリック。

【手順４】
１．「サーバー」は「GlassFish Server」を選択。
２．「Java EEバージョン」は「Java EE7 Web」を選択。
３．「次」ボタンをクリック。

【手順５】
１．フレームワークは「JavaServer Faces」を選択。
２．「終了」ボタンをクリック。

【手順６】
１．以下の様にプロジェクトが作成されていれば成功です。

以上です。

しがないプログラマーの備忘録

ページ

最近の更新

2013年6月25日火曜日

GIMP2.8.4の起動方法

GIMP2.8.4のインストール方法

GIMP2.8.4のダウンロード方法

2013年6月24日月曜日

ボタン(トグル初期状態)

ボタン(ラジオボタン操作)

ボタン(チェックボックス操作)

ボタン(トグル操作)

2013年6月20日木曜日

ボタン(ラジオボタン)

ボタン(チェックボックス)

ボタン(トグル)

ボタン(状態遷移)

2013年6月14日金曜日

Webアプリケーション(JavaEE7)のGlassFish Serverの停止方法

2つのテーブルの行の高さを揃える方法

Webアプリケーション(JavaEE7)のプロジェクトの実行方法(NetBeans IDE 7.3.1)

Webアプリケーション(JavaEE7)のプロジェクトの作成方法(NetBeans IDE 7.3.1)

関連記事