最近の更新

2013年6月25日火曜日

GIMP2.8.4の起動方法

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



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



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




【手順2】
1.起動するのを待ちます。




【手順3】
1.以下の様に「GIMP」が起動すれば成功です。
































以上です。

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

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



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




【手順2】
1.「実行」ボタンをクリック。




【手順3】
1.「OK」ボタンをクリック。




【手順4】
1.「Install」ボタンをクリック。




【手順5】
1.インストールが完了するのを待ちます。




【手順6】
1.「Finish」ボタンをクリック。






























以上です。

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

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



【手順1】
1.「GIMPのサイト」にアクセス。
2.「Downloads」をクリック。




【手順2】
1.「Download GIMP 2.8.4」をクリック。




【手順3】
1.ダウンロードが開始されるのを待ちます。




【手順4】
1.保存場所を選択。
2.「保存」ボタンをクリック。




























以上です。

2013年6月24日月曜日

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

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



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



【手順1】
1.HTMLファイル「index.html」(任意)を作成。
2.「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>



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

































以上です。

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

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



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



【手順1】
1.HTMLファイル「index.html」(任意)を作成。
2.「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>



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




































以上です。

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

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



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



【手順1】
1.HTMLファイル「index.html」(任意)を作成。
2.「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>



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




































以上です。

ボタン(トグル操作)

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



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



【手順1】
1.HTMLファイル「index.html」(任意)を作成。
2.「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>



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



































以上です。

2013年6月20日木曜日

ボタン(ラジオボタン)

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



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



【手順1】
1.HTMLファイル「index.html」(任意)を作成。
2.「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>



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






































以上です。

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

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



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



【手順1】
1.HTMLファイル「index.html」(任意)を作成。
2.「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>



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






































以上です。

ボタン(トグル)

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



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



【手順1】
1.HTMLファイル「index.html」(任意)を作成。
2.「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>




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





































以上です。

ボタン(状態遷移)

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



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



【手順1】
1.HTMLファイル「index.html」(任意)を作成。
2.「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>



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







































以上です。

2013年6月14日金曜日

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

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



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




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


























以上です。

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

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



【手順】
1.「jQuery1.8.1のダウンロード方法」の手順で、jQuery1.8.1をダウンロードしておきます。
2.「028-SyncTableCellHeightJQuery.html」というファイルを作成。
3.「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;">テーブル1-1</td>
                        </tr>
                        <tr>
                            <td style="border:solid 1px black; height:200px;">テーブル1-2</td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td>
                <table id="table2">
                    <tbody>
                        <tr>
                            <td style="border:solid 1px black; height:200px;">テーブル2-1</td>
                        </tr>
                        <tr>
                            <td style="border:solid 1px black; height:100px;">テーブル2-2</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </table>
    <input id="button1" type="button" value="sync">
</body>
</html>

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














































以上です。

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

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



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




【手順2】
1.プロジェクトが起動するのを待ちます。




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






























以上です。

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

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



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




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




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




【手順4】
1.「サーバー」は「GlassFish Server」を選択。
2.「Java EEバージョン」は「Java EE7 Web」を選択。
3.「次」ボタンをクリック。




【手順5】
1.フレームワークは「JavaServer Faces」を選択。
2.「終了」ボタンをクリック。




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




以上です。

NetBeans IDE 7.3.1(Zip版)にGlassFish Server4.0を設定する方法

【目的】
Javaの開発環境であるNetBeans IDE7.3.1にGlassFish Server4.0をインストールし設定します。
※バージョン7.3.1はJavaEE7に対応したバージョンになります。



【手順1】
1.「NetBeans IDE 7.3.1(Zip版)の起動方法」でNetBeans IDE 7.3.1を起動しておきます。
2.メニューから「ツール」⇒「サーバー」を選択。




【手順2】
1.「サーバー」を選択。
2.「サーバーの追加」ボタンをクリック。




【手順3】
1.「GlassFish Server」を選択。
2.「次」ボタンをクリック。




【手順4】
1.インストール場所に「C:\NB7.3.1\GlassFish4.0」と入力。
2.「ライセンス契約」を確認。
3.「今すぐダウンロード」ボタンをクリック。




【手順5】
1.「GlassFish Server 4.0」を選択。
2.「OK」ボタンをクリック。




【手順6】
1.「GlassFish Server 4.0」がダウンロードされます。
2.「次」ボタンをクリック。




【手順7】
1.以下のウィンドウが表示された場合は「アクセスを許可する」ボタンをクリック。




【手順8】
1.「終了」ボタンをクリック。




【手順9】
1.「閉じる」ボタンをクリック。




【手順10】
1.左の「サービス」のタブに「サーバー」⇒「GlassFish Server」が表示されれば成功です。


























以上です。

関連記事