ファイルからデータを読み込んで、内部データにデータを設定する処理をプログラミングしてみます。
開発環境(IDE)は、eclipseを使用します。
1、データファイル
以下のようなデータファイルを作成して、eclipseのプロジェクト直下に保存(ファイル名をinput.datとします)します。
7
-3, 5
-2, -2
-1, -3
0, -1
1, 1
2, 4
3, 5
※1行目がデータ総数、x,yのデータで7個定義
プログラムソース内で外部変数で、ファイル名を定義します。
char fname[] = "input.dat";
2、インクルードファイル
ライブラリ関数(count,printf,atof,strtok)を使用する為、以下のファイルをincludeします。
#include <iostream> // for cout
#include <stdio.h> // for printf()
#include <stdlib.h> // for atof
#include <string.h> // for strtok
3、ファイルの読み込み
ファイルを読み込んで、変数x,yに登録します。
関数の引数x,yは、ポインタの参照を定義します。
ポインタの参照とすることで、関数内でx,yの変更した値が、関数を出てからも、設定した値が保持されたままとなります。
※ただし、関数でてからnewしたx,yの開放(delete)を忘れないようにします
int main()
{
double* x = 0;
double* y = 0;
read_xy(x, y);
if ( x != 0 ) delete x;
if ( y != 0 ) delete y;
retun 0;
}
ポインタ定義では、NULL(=0)定義を忘れないこと!
void Calc::read_xy(double*& x, double*& y)
{
FILE* fp;
char data[256];
int num = 0;
int iy = 0 ;
int ix = 0;
char *tp;
if ((fp = fopen(fname, "r")) == NULL)
{
printf(" Failure of open file. file name is %s. end of program......\n", fname);
//exit(1);
return ;
}
if (fp!=NULL)
{
while (fgets(data, 256, fp) != 0)
{
ix = 0;
if (iy == 0)
{
num = atoi(data);
x = new double[num];
y = new double[num];
} else {
for (int tc=0;;ix++) {
tp=strtok((tc++==0)?data:NULL, ", "); /* divide data in "," and " "*/
if (tp!=NULL)
{
double dval = atof(tp);
if ( ix == 0 )
{
x[iy-1] = dval;
} else {
y[iy-1] = dval;
}
ix++ ;
}
else
{
ix = 0 ;
break;
}
}
}
iy++;
}
}
fclose (fp);
}
【参考URL】
http://www.cplusplus.com/reference/cstring/strtok/?kw=strtok
http://www9.plala.or.jp/sgwr-t/lib/strtok.html
2015年9月26日土曜日
2015年9月23日水曜日
【C++の勉強(5)】EclipseでC++開発環境構築及び、簡単な使い方の説明
C++を勉強するにも、開発環境が必要となります。
開発環境は統合開発環境 (IDE) というツールを使います。
よく使われるツールにVisualStudioやNetBeansなどありますが、今回はEclipseを使うことにします。
ツールを使うことで、プログラミング⇒ビルドでプログラム作成⇒エラーがないかのデバッグ作業
の一連の作業ができます。
1、インストール
(1)JREのインストール
JREをインストールします。(Windows64bit版(x64)をクリック)
http://java.com/ja/download/manual.jsp
<参考URL>http://d.hatena.ne.jp/frosten/20091026/1256584183
(2)Eclipse
Eclipseをインストールします。
http://mergedoc.sourceforge.jp/index.html#/pleiades_distros4.2.html
上記サイトからC/C++版のEclipse IDE for C/C++ Developers(64bitのFull Edition)をダウンロードします。
ダウンロードしたものを解凍します。
解凍したフォルダ(pleiades)内にあるeclipse.exeをダブルクリックするとEclipseが起動できます。
※Eclipse インストール開始時に、「Java SE Development Kit」のインストールが済んでいること.
C:\Program Files\Java\jdk1.7.0 のようなディレクトリがあれば,インストール済み.
(3)コンパイラ(g++)
cygwinをインストールします。
<参考URL>http://cs.txstate.edu/labs/tutorials/tut_docs/Installing%20Eclipse%20C++.pdf
※簡単に説明すると、
http://www.cygwin.com/
上記サイトの「Install Cygwin」のメニューをクリックして、コンテンツ内のsetup.exeを実行します。
詳細は次の順に行ってください。
1.Installing and Updating Cygwin for 64-bit versions of Windowsにあるsetup-x86_64をダウンロード
2.C:\にcygwin64フォルダを作成し、その下にsetup-x86_64.exeを配置
3.念のため、setup-x86_64.exeを右クリックして管理者として実行。
4.次へ
5.Install from Internetを選択して次へ
6.次へ
7.次へ
8.Direct Connectionを選択して次へ(proxy必須環境の人は、Use Internet Explorer...を選択)
9.サイトを選択(私は、http://ftp.jaist.ac.jpを愛用)
http://cygwion.mirrors.hobby.comでもよい
10.次へ
11.「Select Packages」の画面では、以下のパッケージを必ず選択してください。
(その他はデフォルト)
・install packages・・・・Develを選択して、以下をSkipをクリックして、Skipしないようにする
Base:cygwin 1.5.24-2
Devel:gcc 3.4.4-3 (gcc-g++: compiler)
make 3.81-1 (make:The GNU version of the "make" utility)
gdb 20041228-3 (gdb:The GNU debugger)
binutils 20060817-1
gettext-devel 0.15-1
doxygen 1.5.1
12.完了クリック
尚、C:\cygwin64\bin\cygwin1.dll を C:\Windows\System32 にコピーしておくこと
(4) Wiondows設定
スタート→コントロールパネル→システムとセキュリティ→システムを選んで、
コンピュータ→プロパティ→システムの詳細設定→環境変数を選択。
ユーザの環境変数Pathを「%Path%;C:\cygwin64\bin」に設定。
(5) Eclipseの設定
●作業対象の選択
■ Eclipse 4.2 の場合の実行例
「Juno - http://download.eclipse.org/releases/juno」を選択. その後しばらく待つ。
■ Eclipse 3.7 での実行例
「Indigo - http://download.eclipse.org/releases/indigo」を選択. その後しばらく待つ。
●「プログラミング言語」の展開
いろいろなグループが表示される. 「プログラミング言語」の左横の三角形をクリックして展開
■ Eclipse 4.2 の場合の実行例
●C/C++ 開発ツールの選択
「C/C++ Development Tools」を選択し,下の方にある「次へ」をクリック.
■ Eclipse 4.2 の場合の実行例
●インストール詳細の確認
このままでよいので, 「次へ」をクリック.
■ Eclipse 4.2 の場合の実行例
・CDTのインストール
eclipseを起動して、ヘルプ→新規のソフトウェアのインストール→追加で以下を追加する
名前 CDT
ロケーション http://download.eclipse.org/releases/juno
次に、プログラミング言語→C/C++開発ツールを選択して、「次へ」をクリックして、完了させます
(6) C/C++の設定
「ウィンドウ」メニューから「設定」画面表示
左サイドに新たにC/C++というメニューを選択して、「新規CDTプロジェクト」「Makefileプロジェクト」で表示された画面のバイナリー・パーサーの中から以下の3つをチェック
・Elfパーサー
・PE Windowsパーサー
・Cygwin PEパーサー
※実行時に、「起動に失敗しました。バイナリーが見つかりません」が表示されたら、以下ためしてみる
「ウィンドウ」メニュー「設定」の「C/C++」「ビルド」「環境」画面から「追加」ボタンで新規変数追加(名前=path,値=C:\cygwin64\bin)
2、C++開発環境設定及び便利な使い方
参考URL:http://monoist.atmarkit.co.jp/mn/articles/0709/26/news119.html
(1) コンパイルの設定
プロジェクトを選択した状態で、右クリックメニューの[プロパティ]を選択します。
[C/C++ビルド]の項目を見ると、プロジェクトのタイプで指定した「実行可能ファイル(Gnu Windows版)」に対応したデフォルトのビルドオプションが設定されていることが分かります
(2) 検索機能(これは必要ないか?)
メニューの[検索]-[C/C++]を選択することで、C/C++の構成要素に特化した検索を行うことが可能ですまた、エディタから直接検索ができます。エディタ上からキーワードを選択した後に、右クリックメニューの[参照]-[プロジェクト]を選択すると、選択したキーワードを参照している個所が一覧で表示されます。同様に[宣言を開く]を選択するとキーワードの宣言個所にジャンプします。
(3) ビルド
[コンソール]ビューをクリックしてアクティブにします。
その後プロジェクトを選択した状態で、[プロジェクト]-[クリーン]を選択します。
[問題]ビューを開くと、ソースコードの問題がエラーとして表示されています。エラーをダブルクリックすることで、ソースコードの該当個所へジャンプします。
※ビルドする前に、ファイルの保存を行ってください(メニューの「ファイル」「全て保管」を選択)
(4) デバッグ構成の作成
メニューの[実行]-[構成およびデバッグ]を選択します。
[構成およびデバッグ]画面が開くので、[C/C++ ローカル・アプリケーション]を右クリックして、[新規]ボタンをクリックします。CDTが自動で実行形式ファイルを検索して、デフォルトのデバッグ構成を作成します。
(5) コメント化、コメント解除
[コメント化したい行を複数選択して、[Ctrl]+[/]キーを押すと一括でコメント化することができます。また、[Ctrl]+[\]キーを押すとコメントを解除できます。
(6) [デバッグ]ビューでの実行制御
[デバッグ]ビューに表示されている各種のボタンを使って、ステップ実行などの実行制御を行うことができます
再開 (F8) : gdbを再開する。F8でブレイクポイントまで移動する
(今ブレークポイントで止まっているプログラムを次のブレークボタンまで進める)
中断 (S) : プログラムを止める
停止 (Cntrl+F2)
ステップイン (F5) :ステップ実行をする。一行ずつプログラムを進めることができる。
(メッソドの中に入る)
ステップオーバー (F6) :関数単位で実行する。
関数の頭でステップオーバーすると、関数内にはいらずに次の処理へすすむ。
ステップリターン(F7) :現在の関数がreturnするまでを実行する。
(メソッドからReturnする)
起動 (F11) : gdbを起動する
※Ecllpseのデバッグウインドウの画面上部に表示される下画像が実行制御するためのアイコンです
※Terminate(Ctrl+F2)で、デバッガを終了できます
実行制御のツールバー
(7) ブレークポイント
ブレークポイントを設定するには、ブレークポイントを設定したい行をエディタに表示してから、その行の左端部分をダブルクリックします。
設定したブレークポイントは、[ブレークポイント]ビューに表示されます。
[ブレークポイント]ビューでは、ブレークポイントを一時的に無効にしたり、ブレークポイントへ条件を付加したりといったさまざまな操作が可能です。
(8) ウオッチポイント
あるメモリー領域へのアクセスが発生する場合に、プログラムを停止する機能を“ウオッチポイント”と呼びます。
ウオッチポイントを設定するには、[ブレークポイント]ビューにて、右クリックメニューの[監視ポイントの追加]を選択します。
[監視ポイントの追加]ウィンドウが表示されるので、ウオッチポイントを設定したいグローバル変数の名前を入力し、read/writeのアクセス条件を設定します。
3、その他
(1) ショートカットキー
・Ctrl + Shirt + G
メソッド名とかクラス名とかにカーソルがあった状態でこれを実行すると、そのメソッドやクラスを利用してる他の場所の一覧を検索できる
・Ctrl + H
検索ダイアログ表示
・Ctrl + M
View の最大化/普通化のトグル
・Ctrl + O
エディタ上で実行するとメソッドなどのアウトラインが表示されて絞り込んで jump することができる
・Ctrl + T
インタフェースのメソッド名とかで実行すると、そのメソッドを実装している実装クラスの一覧などが表示できる
・Shiht+Alt+Sしてでてくるダイアログ
settter/getter出力のダイアログを出してくれる
・Ctrl+J(とCtrl+K)
教えてもらったんだけど、エディタ内とかでインクリメンタルサーチができる。すばらしい
・Ctrl+Shiht+O
・Orgarnize Import(自動でクラス探して import してくれる) のショートカットなんだけど、セーブ時に自動でやってくれる設定にしてるのであんまり使わない
選択した状態で Alt+↑ , ↓
選択した行にあるコードを移動できる。TODO これは動き見せたほうがいいかも。
・Ctrl+D, Ctr+Shift+D
一行削除、カーソルから行末まで削除
・Ctrl+I
選択行をインデント
・Ctrl+S
基本すぎて書くの忘れてた。セーブ
・Alt+Shift+Q
Ctrl+3 とかで package exploerer view に移動する代わりに、よくつかいそうな view ならこれでポップさせた後に、Package なら P をうてば移動できる
Terminate(Ctrl+F2)
開発環境は統合開発環境 (IDE) というツールを使います。
よく使われるツールにVisualStudioやNetBeansなどありますが、今回はEclipseを使うことにします。
ツールを使うことで、プログラミング⇒ビルドでプログラム作成⇒エラーがないかのデバッグ作業
の一連の作業ができます。
1、インストール
(1)JREのインストール
JREをインストールします。(Windows64bit版(x64)をクリック)
http://java.com/ja/download/manual.jsp
<参考URL>http://d.hatena.ne.jp/frosten/20091026/1256584183
(2)Eclipse
Eclipseをインストールします。
http://mergedoc.sourceforge.jp/index.html#/pleiades_distros4.2.html
上記サイトからC/C++版のEclipse IDE for C/C++ Developers(64bitのFull Edition)をダウンロードします。
ダウンロードしたものを解凍します。
解凍したフォルダ(pleiades)内にあるeclipse.exeをダブルクリックするとEclipseが起動できます。
※Eclipse インストール開始時に、「Java SE Development Kit」のインストールが済んでいること.
C:\Program Files\Java\jdk1.7.0 のようなディレクトリがあれば,インストール済み.
(3)コンパイラ(g++)
cygwinをインストールします。
<参考URL>http://cs.txstate.edu/labs/tutorials/tut_docs/Installing%20Eclipse%20C++.pdf
※簡単に説明すると、
http://www.cygwin.com/
上記サイトの「Install Cygwin」のメニューをクリックして、コンテンツ内のsetup.exeを実行します。
詳細は次の順に行ってください。
1.Installing and Updating Cygwin for 64-bit versions of Windowsにあるsetup-x86_64をダウンロード
2.C:\にcygwin64フォルダを作成し、その下にsetup-x86_64.exeを配置
3.念のため、setup-x86_64.exeを右クリックして管理者として実行。
4.次へ
5.Install from Internetを選択して次へ
6.次へ
7.次へ
8.Direct Connectionを選択して次へ(proxy必須環境の人は、Use Internet Explorer...を選択)
9.サイトを選択(私は、http://ftp.jaist.ac.jpを愛用)
http://cygwion.mirrors.hobby.comでもよい
10.次へ
11.「Select Packages」の画面では、以下のパッケージを必ず選択してください。
(その他はデフォルト)
・install packages・・・・Develを選択して、以下をSkipをクリックして、Skipしないようにする
Base:cygwin 1.5.24-2
Devel:gcc 3.4.4-3 (gcc-g++: compiler)
make 3.81-1 (make:The GNU version of the "make" utility)
gdb 20041228-3 (gdb:The GNU debugger)
binutils 20060817-1
gettext-devel 0.15-1
doxygen 1.5.1
12.完了クリック
尚、C:\cygwin64\bin\cygwin1.dll を C:\Windows\System32 にコピーしておくこと
(4) Wiondows設定
スタート→コントロールパネル→システムとセキュリティ→システムを選んで、
コンピュータ→プロパティ→システムの詳細設定→環境変数を選択。
ユーザの環境変数Pathを「%Path%;C:\cygwin64\bin」に設定。
(5) Eclipseの設定
●作業対象の選択
■ Eclipse 4.2 の場合の実行例
「Juno - http://download.eclipse.org/releases/juno」を選択. その後しばらく待つ。
■ Eclipse 3.7 での実行例
「Indigo - http://download.eclipse.org/releases/indigo」を選択. その後しばらく待つ。
●「プログラミング言語」の展開
いろいろなグループが表示される. 「プログラミング言語」の左横の三角形をクリックして展開
■ Eclipse 4.2 の場合の実行例
●C/C++ 開発ツールの選択
「C/C++ Development Tools」を選択し,下の方にある「次へ」をクリック.
■ Eclipse 4.2 の場合の実行例
●インストール詳細の確認
このままでよいので, 「次へ」をクリック.
■ Eclipse 4.2 の場合の実行例
・CDTのインストール
eclipseを起動して、ヘルプ→新規のソフトウェアのインストール→追加で以下を追加する
名前 CDT
ロケーション http://download.eclipse.org/releases/juno
次に、プログラミング言語→C/C++開発ツールを選択して、「次へ」をクリックして、完了させます
(6) C/C++の設定
「ウィンドウ」メニューから「設定」画面表示
左サイドに新たにC/C++というメニューを選択して、「新規CDTプロジェクト」「Makefileプロジェクト」で表示された画面のバイナリー・パーサーの中から以下の3つをチェック
・Elfパーサー
・PE Windowsパーサー
・Cygwin PEパーサー
※実行時に、「起動に失敗しました。バイナリーが見つかりません」が表示されたら、以下ためしてみる
「ウィンドウ」メニュー「設定」の「C/C++」「ビルド」「環境」画面から「追加」ボタンで新規変数追加(名前=path,値=C:\cygwin64\bin)
2、C++開発環境設定及び便利な使い方
参考URL:http://monoist.atmarkit.co.jp/mn/articles/0709/26/news119.html
(1) コンパイルの設定
プロジェクトを選択した状態で、右クリックメニューの[プロパティ]を選択します。
[C/C++ビルド]の項目を見ると、プロジェクトのタイプで指定した「実行可能ファイル(Gnu Windows版)」に対応したデフォルトのビルドオプションが設定されていることが分かります
(2) 検索機能(これは必要ないか?)
メニューの[検索]-[C/C++]を選択することで、C/C++の構成要素に特化した検索を行うことが可能ですまた、エディタから直接検索ができます。エディタ上からキーワードを選択した後に、右クリックメニューの[参照]-[プロジェクト]を選択すると、選択したキーワードを参照している個所が一覧で表示されます。同様に[宣言を開く]を選択するとキーワードの宣言個所にジャンプします。
(3) ビルド
[コンソール]ビューをクリックしてアクティブにします。
その後プロジェクトを選択した状態で、[プロジェクト]-[クリーン]を選択します。
[問題]ビューを開くと、ソースコードの問題がエラーとして表示されています。エラーをダブルクリックすることで、ソースコードの該当個所へジャンプします。
※ビルドする前に、ファイルの保存を行ってください(メニューの「ファイル」「全て保管」を選択)
(4) デバッグ構成の作成
メニューの[実行]-[構成およびデバッグ]を選択します。
[構成およびデバッグ]画面が開くので、[C/C++ ローカル・アプリケーション]を右クリックして、[新規]ボタンをクリックします。CDTが自動で実行形式ファイルを検索して、デフォルトのデバッグ構成を作成します。
(5) コメント化、コメント解除
[コメント化したい行を複数選択して、[Ctrl]+[/]キーを押すと一括でコメント化することができます。また、[Ctrl]+[\]キーを押すとコメントを解除できます。
(6) [デバッグ]ビューでの実行制御
[デバッグ]ビューに表示されている各種のボタンを使って、ステップ実行などの実行制御を行うことができます
再開 (F8) : gdbを再開する。F8でブレイクポイントまで移動する
(今ブレークポイントで止まっているプログラムを次のブレークボタンまで進める)
中断 (S) : プログラムを止める
停止 (Cntrl+F2)
ステップイン (F5) :ステップ実行をする。一行ずつプログラムを進めることができる。
(メッソドの中に入る)
ステップオーバー (F6) :関数単位で実行する。
関数の頭でステップオーバーすると、関数内にはいらずに次の処理へすすむ。
ステップリターン(F7) :現在の関数がreturnするまでを実行する。
(メソッドからReturnする)
起動 (F11) : gdbを起動する
※Ecllpseのデバッグウインドウの画面上部に表示される下画像が実行制御するためのアイコンです
※Terminate(Ctrl+F2)で、デバッガを終了できます
実行制御のツールバー
(7) ブレークポイント
ブレークポイントを設定するには、ブレークポイントを設定したい行をエディタに表示してから、その行の左端部分をダブルクリックします。
設定したブレークポイントは、[ブレークポイント]ビューに表示されます。
[ブレークポイント]ビューでは、ブレークポイントを一時的に無効にしたり、ブレークポイントへ条件を付加したりといったさまざまな操作が可能です。
(8) ウオッチポイント
あるメモリー領域へのアクセスが発生する場合に、プログラムを停止する機能を“ウオッチポイント”と呼びます。
ウオッチポイントを設定するには、[ブレークポイント]ビューにて、右クリックメニューの[監視ポイントの追加]を選択します。
[監視ポイントの追加]ウィンドウが表示されるので、ウオッチポイントを設定したいグローバル変数の名前を入力し、read/writeのアクセス条件を設定します。
3、その他
(1) ショートカットキー
・Ctrl + Shirt + G
メソッド名とかクラス名とかにカーソルがあった状態でこれを実行すると、そのメソッドやクラスを利用してる他の場所の一覧を検索できる
・Ctrl + H
検索ダイアログ表示
・Ctrl + M
View の最大化/普通化のトグル
・Ctrl + O
エディタ上で実行するとメソッドなどのアウトラインが表示されて絞り込んで jump することができる
・Ctrl + T
インタフェースのメソッド名とかで実行すると、そのメソッドを実装している実装クラスの一覧などが表示できる
・Shiht+Alt+Sしてでてくるダイアログ
settter/getter出力のダイアログを出してくれる
・Ctrl+J(とCtrl+K)
教えてもらったんだけど、エディタ内とかでインクリメンタルサーチができる。すばらしい
・Ctrl+Shiht+O
・Orgarnize Import(自動でクラス探して import してくれる) のショートカットなんだけど、セーブ時に自動でやってくれる設定にしてるのであんまり使わない
選択した状態で Alt+↑ , ↓
選択した行にあるコードを移動できる。TODO これは動き見せたほうがいいかも。
・Ctrl+D, Ctr+Shift+D
一行削除、カーソルから行末まで削除
・Ctrl+I
選択行をインデント
・Ctrl+S
基本すぎて書くの忘れてた。セーブ
・Alt+Shift+Q
Ctrl+3 とかで package exploerer view に移動する代わりに、よくつかいそうな view ならこれでポップさせた後に、Package なら P をうてば移動できる
Terminate(Ctrl+F2)
2015年9月13日日曜日
【JavaScript開発環境構築】NetBeansでHTML5+JavaScript+CSSの開発を行う
ネットでHTML5+JavaScript+CSSでの開発環境を調べてみたところ、NetBeansの評判が良いので、実際インストールして、試してみました。
HTML5で開発するには、大変便利で、無料ですので、是非使ってみてください。
1、開発環境構築
NetBeansは、無料で利用できるIDE(統合開発環境)です。
(1)Java SE Development Kit 8インストール
下URLをクリックして、Java EEの列のダウンロードをクリックして、インストールします
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
※x86 パッケージが 32 ビット版用、x64 パッケージが 64 ビット版
(2)NetBeans 8.0 インストール
下URLをクリックして、HTML5/Javascriptのダウンロードをクリックして、インストールします
https://netbeans.org/downloads/
(3) NetBeans Connector拡張機能をインストール
ChromeブラウザのNetBeans Connector拡張機能をインストールします。
プロジェクト作成して、初めて実行するときに、次のようなダイアログが表示されますので、インストールします。
・Chrome Webストアへ移動をクリック
・CHROMEに追加をクリック
・拡張機能を追加をクリック
※以下のURLでもインストール手順が記載されています。
ChromeブラウザのNetBeans Connector拡張機能をインストール
https://netbeans.org/kb/docs/webclient/html5-gettingstarted_ja.html
2、プロジェクト作成
・NetBeansを立ち上げる
・メイン・メニューで「ファイル」→「新規プロジェクト」
・新規プロジェクト・ウィザードで、「HTML5」カテゴリを選択、「既存のソースを利用するHTML5アプリケーション」を選択
・サイトルート及びプロジェクト名を入力
次へを押して、プロジェクトを作成完了する。
作成したプロジェクトにHTMLファイルを追加する
※必要に応じて、JavaScriptファイルを追加する
・ サイトルート選択して、右クリックメニューでHTMLファイルを選択して、ファイル名を必要に応じて
変更する
・ツールバーで「実行」ボタンをクリックする(F6)
3、デバッグ
(1) プログラム実行及びデバッグ
サイトルート選択して、右クリックメニューでJavaScriptファイルを選択して、JavaScriptファイルを作成しておきましょう。
作成したファイルをscript.jsとします。
・「プロジェクト」ウィンドウで、「script.js」をダブルクリックし、エディタでそのファイルを開きます。
・左マージンをクリックして、script.jsに行ブレークポイントを配置します。
※ 「ウィンドウ」→「デバッグ」→「ブレークポイント」を選択して「ブレークポイント」ウィンドウを開き、プロジェクトで設定したブレークポイントを表示できます。
・ツールバーの「実行」ボタンをクリックして、プロジェクトを再度実行します。
・script.js内の変数の上にカーソルを移動し、変数に関するツールチップ情報を表示します。
ツールチップをクリックしてツールチップを展開し、変数と値のリストを表示します。
※・「ウィンドウ」→「デバッグ」→「変数」を選択して、「変数」ウィンドウにリストを表示することもできます。
・ツールバーの手順ボタンを使用して、JavaScript関数をステップ実行するか、「続行」ボタン(F5)をクリックしてアプリケーションを再開します。
(2) ライブプレビュー
NetBeans上でコードを変更して保存をおこなうことで、自動的にGoogle Chromeで表示されている画面が更新されます。エディタで保存して、ウィンドウを切り替えて、更新ボタンをクリックして、エディタに戻って修正して・・といった一連の作業は、ライブプレビューで軽減が図れます。
(3) 入力の自動補完機能
HTMLファイルにて、何も入力していない状態でCtrl + Spaceキーを押した場合、フォームや特定のHTMLを自動で生成するためのサブメニューが表示されます。
JavaScriptファイルやCSSファイルでも、 Ctrl + Spaceキーを押すと、補完候補とヘルプが表示されます。
【参考URL】
https://netbeans.org/kb/docs/webclient/html5-js-support_ja.html
http://stocker.jp/diary/netbeans/
http://urashita.com/archives/1066
https://ja.netbeans.org/
http://news.mynavi.jp/column/ide/150/
https://netbeans.org/kb/docs/java/quickstart_ja.html#setup
http://www.oki-osk.jp/esc/netbeans/netbeans01.html
https://netbeans.org/features/html5/index_ja.html
http://celtislab.net/archives/20130308/netbeans-html5%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB%E3%82%84%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F%EF%BC%91/
http://news.mynavi.jp/column/wc/005/
http://kobold.wiki.fc2.com/wiki/%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83%2FNetbeans%2F%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%2FHTML5%20HelloWorld
HTML5で開発するには、大変便利で、無料ですので、是非使ってみてください。
1、開発環境構築
NetBeansは、無料で利用できるIDE(統合開発環境)です。
(1)Java SE Development Kit 8インストール
下URLをクリックして、Java EEの列のダウンロードをクリックして、インストールします
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
※x86 パッケージが 32 ビット版用、x64 パッケージが 64 ビット版
(2)NetBeans 8.0 インストール
下URLをクリックして、HTML5/Javascriptのダウンロードをクリックして、インストールします
https://netbeans.org/downloads/
(3) NetBeans Connector拡張機能をインストール
ChromeブラウザのNetBeans Connector拡張機能をインストールします。
プロジェクト作成して、初めて実行するときに、次のようなダイアログが表示されますので、インストールします。
・Chrome Webストアへ移動をクリック
・CHROMEに追加をクリック
・拡張機能を追加をクリック
※以下のURLでもインストール手順が記載されています。
ChromeブラウザのNetBeans Connector拡張機能をインストール
https://netbeans.org/kb/docs/webclient/html5-gettingstarted_ja.html
2、プロジェクト作成
・NetBeansを立ち上げる
・メイン・メニューで「ファイル」→「新規プロジェクト」
・新規プロジェクト・ウィザードで、「HTML5」カテゴリを選択、「既存のソースを利用するHTML5アプリケーション」を選択
・サイトルート及びプロジェクト名を入力
次へを押して、プロジェクトを作成完了する。
作成したプロジェクトにHTMLファイルを追加する
※必要に応じて、JavaScriptファイルを追加する
・ サイトルート選択して、右クリックメニューでHTMLファイルを選択して、ファイル名を必要に応じて
変更する
・ツールバーで「実行」ボタンをクリックする(F6)
3、デバッグ
(1) プログラム実行及びデバッグ
サイトルート選択して、右クリックメニューでJavaScriptファイルを選択して、JavaScriptファイルを作成しておきましょう。
作成したファイルをscript.jsとします。
・「プロジェクト」ウィンドウで、「script.js」をダブルクリックし、エディタでそのファイルを開きます。
・左マージンをクリックして、script.jsに行ブレークポイントを配置します。
※ 「ウィンドウ」→「デバッグ」→「ブレークポイント」を選択して「ブレークポイント」ウィンドウを開き、プロジェクトで設定したブレークポイントを表示できます。
・ツールバーの「実行」ボタンをクリックして、プロジェクトを再度実行します。
・script.js内の変数の上にカーソルを移動し、変数に関するツールチップ情報を表示します。
ツールチップをクリックしてツールチップを展開し、変数と値のリストを表示します。
※・「ウィンドウ」→「デバッグ」→「変数」を選択して、「変数」ウィンドウにリストを表示することもできます。
・ツールバーの手順ボタンを使用して、JavaScript関数をステップ実行するか、「続行」ボタン(F5)をクリックしてアプリケーションを再開します。
(2) ライブプレビュー
NetBeans上でコードを変更して保存をおこなうことで、自動的にGoogle Chromeで表示されている画面が更新されます。エディタで保存して、ウィンドウを切り替えて、更新ボタンをクリックして、エディタに戻って修正して・・といった一連の作業は、ライブプレビューで軽減が図れます。
(3) 入力の自動補完機能
HTMLファイルにて、何も入力していない状態でCtrl + Spaceキーを押した場合、フォームや特定のHTMLを自動で生成するためのサブメニューが表示されます。
JavaScriptファイルやCSSファイルでも、 Ctrl + Spaceキーを押すと、補完候補とヘルプが表示されます。
【参考URL】
https://netbeans.org/kb/docs/webclient/html5-js-support_ja.html
http://stocker.jp/diary/netbeans/
http://urashita.com/archives/1066
https://ja.netbeans.org/
http://news.mynavi.jp/column/ide/150/
https://netbeans.org/kb/docs/java/quickstart_ja.html#setup
http://www.oki-osk.jp/esc/netbeans/netbeans01.html
https://netbeans.org/features/html5/index_ja.html
http://celtislab.net/archives/20130308/netbeans-html5%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB%E3%82%84%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F%EF%BC%91/
http://news.mynavi.jp/column/wc/005/
http://kobold.wiki.fc2.com/wiki/%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83%2FNetbeans%2F%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%2FHTML5%20HelloWorld
2015年9月7日月曜日
【JavaScript開発】jQueryをつかってみよう
1、jQueryのダウンロード
http://jquery.com/download/
からダウンロードする。
jQuery には、圧縮版の Compressed と、非圧縮版の Uncompressed があって、一般的には読み込みの早い圧縮版を使います。
圧縮版は改行などが排除されていて、ファイル名が jquery-1.11.3min.js のように min がついています。
※2.1.4ダウンロードする場合は、 Internet Explorer 6, 7, or 8.はサポートしていません
使用するには、headタグ内に以下のように記述する。
<head>
(中略)
<script type="text/javascript" src="ライブラリをアップロードした場所/jquery-1.8.2.min.js"></script>
(中略)
</head>
ダウンロードしなくても CDN(Contents Delivery Network)、コンテンツデリバリーネットワークを使う方法もあります。
htmlファイルに以下のタグを記載します。
(ただし、ネットワークにつながっていないと、使えないので注意)
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
※jqueryのサイトでは、"http:"がぬけているので、忘れないように!。
2、jQueryを使ってみる
(1)基本形
$(function(){
$("A").B()
});
Aをセレクトといい、Bをメソッドといいます(AをBする)。
例:
・$(“#hoge”) ・・・・ idセレクタ
・$(“.hogehoge”) ・・・・・クラスセレクタ
・$(“li a”) ・・・・・・ 子孫セレクタ
・$(“p.hoge, p.hogehoge”) ・・・・・ グループセレクタ
・$(“.hogehoge”) ・・・・・クラスセレクタ
・$(“li a”) ・・・・・・ 子孫セレクタ
・$(“p.hoge, p.hogehoge”) ・・・・・ グループセレクタ
------- p要素の色を赤にする --------------------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<title>jquery study</title>
<meta charset="utf-8">
</head>
<body>
<p>jquery study</p>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
$('p').css('color','red');
});
</script>
</body>
</html>
<html lang="ja">
<head>
<title>jquery study</title>
<meta charset="utf-8">
</head>
<body>
<p>jquery study</p>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
$('p').css('color','red');
});
</script>
</body>
</html>
----------------------------------------------------------
(2) イベントメソッド
セレクタを「クリックした時」や「hoverした時」など、記述する
$(function(){
$("A").B(function{
$("C").D()
});
});
AをBしたときに、CをDする
<イベント一覧>
例:hoge2Aをクリックしたときに、色を緑にする
$(function(){
$(".hoge2A").click(function(){
$(this).css("background-color","green")
});
});
$(".hoge2A").click(function(){
$(this).css("background-color","green")
});
});
(3)エフェクトメソッド
要素を隠すなど、アニメーションなどに使用します。
例:hoge2Aをクリックしたときに、2秒かけて要素がフェードアウトする
$(function(){
$(".hoge2A").click(function(){
$(this).fadeOut(2000)
});
});
$(".hoge2A").click(function(){
$(this).fadeOut(2000)
});
});
例:hoge2Aをマウスオーバーしたときに赤にして、マウスアウトしたときに緑にする
$(function(){
$(".hoge2A").hover(
//マウスオーバー時の処理
function(){
$(".red").css("background","red")
},
//マウスアウト時の処理
function(){
$(".red").css("background","green")
});
});
$(".hoge2A").hover(
//マウスオーバー時の処理
function(){
$(".red").css("background","red")
},
//マウスアウト時の処理
function(){
$(".red").css("background","green")
});
});
(4) フィルタ
要素内で複数要素から指定要素を取得する。
$("#sub > li").css("color","red"); ・・・・・id(sub)内のリスト要素の色を赤にする
フィルタの例:
$(“li:first”) ・・・・ 一番始めの要素
$(“li:last”) ・・・・ 一番最後の要素
$(“li:even”) ・・・・ 偶数番目の要素
$(“li:odd”) ・・・・ 奇数番目の要素
$(“li:last”) ・・・・ 一番最後の要素
$(“li:even”) ・・・・ 偶数番目の要素
$(“li:odd”) ・・・・ 奇数番目の要素
(5) CSS、Attributes(属性)
CSS、Attributes のメソッドは、CSS や属性を取得、変更することができるメソッドです。
例:
・カラーを取得
$("#navi a").css("color");
・カラーを取得
$("#navi a").css("color");
・#navi 内にあるリンク(a)の色を、赤にする
$("#navi a").css("color", "red");
・複数指定の場合
$("#navi a").css({"color": "red", "text-decoration": "none" });
(6) メソッドチェーン
jQuery のメソッドは、ドット(.)でつなげて、複数指定することができます。
例えば、同じ要素にふたつのメソッドを使いたいとき、別々に書かずに、一度に書く事ができます。
例:ボタンクリックしたときに、 色を緑にして、メッセージ表示する
$("button").click(function () {
$("div").css("background-color","green").text("buttonがクリックされました");
});
$("div").css("background-color","green").text("buttonがクリックされました");
});
まだ、いろいろ覚える事はありますが、上記の内容を覚えて、後は、少しづつ覚えていきましょう。
【参考URL】
2015年9月3日木曜日
【C++の勉強(4)】参照呼出しと参照パラメータと、関数テンプレート
C++の勉強4回目です。
1、参照呼出しと参照パラメータ
関数に値を送る場合の
・値渡し
・参照渡し
・ポインタ渡し
の違いについて理解しましょう。
参照パラメータは対応する引数のエイリアス(別名)といいます。
使い方は、関数の引数で次のようにします。
void setValue(double p); // 値渡し
void setValue(double &p); // 参照渡し
void setValue(double *p); // ポインタ渡し
実際に、値渡しと参照しで行ってみます。
main()
{
int x=2, z=4;
printf( "x = %d", sequareByValue(x) );
printf( "z = %d", sequareByReference(z) );}
int sequareByValue(int a)
{
return a *= a ; // 呼び出し側の引数は変更されない
}
int sequareByReference(int &a)
{
return a *= a ; // 呼び出し側の引数は変更される
}
----------- 出力 -------------------------------
x = 4
x = 2
z = 16
z = 16
------------------------------------------
参照渡しの場合は、値が変更されていることが確認できました。
2、 関数テンプレート
プログラムでは、内部処理は同じだがデータ型が異なる関数が頻繁に出てきます。
その時に、テンプレートを使うと便利です。
20
2.104
------------------------------------------
テンプレートについては、参考URLを一読をすると、もっと詳しくかいてありますので、理解できると
思います。
【参考URL】
http://homepage2.nifty.com/well/Template.html
1、参照呼出しと参照パラメータ
関数に値を送る場合の
・値渡し
・参照渡し
・ポインタ渡し
の違いについて理解しましょう。
参照パラメータは対応する引数のエイリアス(別名)といいます。
使い方は、関数の引数で次のようにします。
void setValue(double p); // 値渡し
void setValue(double &p); // 参照渡し
void setValue(double *p); // ポインタ渡し
実際に、値渡しと参照しで行ってみます。
main()
{
int x=2, z=4;
printf( "x = %d", sequareByValue(x) );
printf( "z = %d", sequareByReference(z) );}
int sequareByValue(int a)
{
return a *= a ; // 呼び出し側の引数は変更されない
}
int sequareByReference(int &a)
{
return a *= a ; // 呼び出し側の引数は変更される
}
----------- 出力 -------------------------------
x = 4
x = 2
z = 16
z = 16
------------------------------------------
参照渡しの場合は、値が変更されていることが確認できました。
2、 関数テンプレート
プログラムでは、内部処理は同じだがデータ型が異なる関数が頻繁に出てきます。
その時に、テンプレートを使うと便利です。
template <class X> void myfunc(X data) { cout << data * 2 << '\n'; }
myfunc(10);
myfunc(1.052);
----------- 出力 -------------------------------
20
2.104
------------------------------------------
テンプレートについては、参考URLを一読をすると、もっと詳しくかいてありますので、理解できると
思います。
【参考URL】
http://homepage2.nifty.com/well/Template.html
2015年9月2日水曜日
【もう一度、英語をやり直そう】英会話日記(9/2)~電話の英会話
先週の英会話の復習です。
電話でよく使う表現を覚えて、電話英会話ができるようになりましょう。
まず電話を受けたときは「会社名と自分の名前を答えて」、挨拶します。
Hello, TA Corp, Takayuki speaking. // TA会社のたかゆきが話しています
電話にて、相手の話が聞き取れなかったときは、次のように言います。
Sorry, I didn't catch that. // 「聞き取れませんでした」
代わりに電話を出たときは、次のように言います。
I'll pass it on. // (誰々さんに)伝えときます
相手に「おかけになりましたか?」と聞くときは、
I got a missed call from you?
といいます。
ここで使っている missed call は不在着信とも使えます。
その他よく使う電話表現:
You've got the wrong number. // 間違い電話です
The line's engaged. = The line's busy // 話し中です
The line's gone dead. // 壊れた
The phone's not working = The phone's out of order. // 故障中
I'll give you a ring. = I'll give you a call = I'll call you. // 電話します
I'll call you back = I'll return your call. // かけ直します
I can't get through // 繋がらない
I'll put you through. = I'll connect you. // 繋げます
I'll get it. = I'll answer it. (発音は I'll geddit ) // 私がでます
pick up the phone vs hang up the phone // 電話がとる vs 電話をきる
電話でよく使う表現を覚えて、電話英会話ができるようになりましょう。
まず電話を受けたときは「会社名と自分の名前を答えて」、挨拶します。
Hello, TA Corp, Takayuki speaking. // TA会社のたかゆきが話しています
電話にて、相手の話が聞き取れなかったときは、次のように言います。
Sorry, I didn't catch that. // 「聞き取れませんでした」
代わりに電話を出たときは、次のように言います。
I'll pass it on. // (誰々さんに)伝えときます
相手に「おかけになりましたか?」と聞くときは、
I got a missed call from you?
といいます。
ここで使っている missed call は不在着信とも使えます。
その他よく使う電話表現:
You've got the wrong number. // 間違い電話です
The line's engaged. = The line's busy // 話し中です
The line's gone dead. // 壊れた
The phone's not working = The phone's out of order. // 故障中
I'll give you a ring. = I'll give you a call = I'll call you. // 電話します
I'll call you back = I'll return your call. // かけ直します
I can't get through // 繋がらない
I'll put you through. = I'll connect you. // 繋げます
I'll get it. = I'll answer it. (発音は I'll geddit ) // 私がでます
pick up the phone vs hang up the phone // 電話がとる vs 電話をきる
登録:
投稿 (Atom)