Pythonの基本

1.概要
・Pythonはコンパイルを必要としない、インタプリタ言語でスクリプト文を直接実行する。
・文法の特徴はCやjavaような、ブロック構造に 「{ 」(中カッコ)を用いない、インデントでのブロック構造となっているため、誰が書いても似たようなソースとなり、可読性に優れている。
・インタラクティブモード(コマンドラインからpython3と打ち込んで、>>> のプロンプトで 1 行ごとに実行)と、スクリプトファイル(拡張子は.py)をコマンドライン(python3 test.py)又はシェルから実行する方法の2通りがある。
・Pythonには現在2.xと3.xのバージョンがあり、Python 2.xと3.xのプログラムには一部互換性がない。

2.開発環境の例
(1)pythonの統合開発環境
・PyCharm
 ジェットブレインズによって開発され、Pythonに特化した非常に強力な開発環境。
 PyCharm のインストール
 https://pleiades.io/help/pycharm/installation-guide.html

・PythonIDLE
 Pythonに標準で用意されている開発環境アプリケーション。付属していないときはインストールする。IDLEは「tkinter」というライブラリを使い、Pythonで実装されたプログラム。

・Eclipse
 Pleiades All in One ダウンロード
 https://mergedoc.osdn.jp/

・ATOM
 https://atom.io/

などがある

3.本稿の開発環境
(1)ホストOS
 Windows 10 Pro
(2)仮想環境(VirtualBox)
 ゲストOS:CentOs7(Red Hat 64-bit)

(3)pythonバージョン
 python3のインストール
# yum install python3

[root@localhost ~]# python3 –version
Python 3.6.8

起動
# python3
終了
>>> quit()

・sys.versionの情報
 Python インタプリタのバージョン番号の他、ビルド番号や使用コンパイラなどの情報を示す文字列
# python3
>>> import sys
>>> print(sys.version)

(4)PythonIDLE
 Python3 IDEのインストール
 # yum install python3-tools
 CentOsのディスクトップで端末を起動
 # idle3

(5)Pythonのパッケージ管理pip
# pip3 list –format=columns

(6)Pythonコマンドライン
 ・pythonスクリプト言語の実行
 > python sample.py
 ・-c コマンド オプションを利用して起動
  コマンド として渡された Python の文を実行
 ・-m <module-name>
  sys.path から指定されたモジュール名のモジュールを探し、その内容を__main__ モジュールとして実行する。

コマンドラインと環境https://docs.python.org/ja/3/using/cmdline.html

4.基本文法
4.1 算術演算子
 +, -, *, /, //(整数除算), %(余り), **(べき乗算)
4.2 変数
 1文字目に数字は使えない
4.3 比較演算子
 演算子    条件
 a < b   a は b より小さい  
 a <= b  a は b と等しいか小さい  
 a > b   a は b より大きい
 a >= b  a は b と等しいか大きい
 a == b  a と b は等しい
 a != b  a と b は等しくない
4.4 データ型
 数値型(整数、浮動小数点数、複素数)、文字列型、論理型、リスト型、辞書型、タブル型、集合型がある。
(1)数値型
  整数:1、浮動小数点数:1.5、複素数:1+8j
(2)文字列型
  シングルクオーテーション、又はダブルクォーテーションで囲む
  ”Hello”、’Hello’
  算術演算子(+)を使って文字列の連結ができる。
  算術演算子(*)を使って数字の回数分繰り返す。
(3)論理型
  True(真)、False(偽)の2種類
(4)リスト型
  まとめたいデータをカンマで区切り、[](大カッコ)でくくる。
  Test=[80,’算数’]
リスト型のメソッドが使え、データの追加、削除ができる。Test.append(‘合格’)とすると、Testは[80,’算数’,’合格’]となる。他にremove(削除)、sort(並び替え)のメソッドがある。

(5)辞書型
 見出し(キー)と対応するデータ(数値、文字列など)をペアでもつ。
 キーと対応するデータを:(コロン)でつなぎ、それぞれのペアを,(カンマ)で区切ったものを{}(中カッコ)でくくる。
 {見出し1:データ1,見出し2:データ2,・・・} 
  辞書型のメソッドが使え、全てのキーを表示(keys())、全てのデータを表示(values())がある。

(6)タブル型
 複数の要素から成るー組を表すときに使い、複数の要素を,(カンマ)で区切って()でくくったもの。
 (要素a,要素b,要素c,・・・)   
 リスト型との違いは、タブル型は定義したあと変更できないこと。 
 辞書型のキーとして複数の要素でキーを作るときは、タブル型でしか辞書型のキーとして使えないようになっている(リスト型ではキーは作れない)。

(7)集合型
 複数のデータを1つにまとめることができるデータ型。
 集合型では同じデータを持たないため、データの重複を削除したり、記号(A<=B,A>=B,A|B,A&B,A-B,A^B)を使ってデータを調べることができる。

4.5 条件分岐
 if (条件判定式):
 (字下げ)(処理内容)
 elif(条件判定式):
 (字下げ)(処理内容)
 else:
 (字下げ)(処理内容)
ex1.py

# i:int=int(input('i=?'))
i=int(input('i=?'))
if i > 0:
    print('正数')
elif i < 0:
    print('負数')
else:
    print('0')

print('end')

・コメントは先頭に#をつけるとその行の#以降がコメントとなる。
・pythonでは型宣言は不要。
 型宣言するときは、
 i:int=int(input(‘i=?’))
 のように行える。

・pythonでは,コードブロックを字下げで表すので、判定の:の後、字下げしないと”IndentationError: expected an indented block”のエラーとなる。

4.6 繰り返し
(1)while文
 while (条件式):
 (字下げ)(処理内容)
  :
ex2.py

i=0
while i<=10:
   print(i)
   i+=1

(2)for文
 for 変数 in オブジェクト:
 (字下げ)(実行する処理)
ex3.py

for i in range(5):
   print(i)

 数値の連番の反復には,rangeを使用。range(n) で,0,1,2, … , n-1 までの値。
 rangeは,(初期値, 終了値, 増加させる値)と書くことができる。

for i in range(1,10,2):
   print(i)

4.7 関数
 def func(引数, 引数):
 (処理内容)

def func(a, b):
   print('a=', a, 'b=', b,'a*b=',a*b)
func(1, 2)
func(1.5, 2)

4.8 例外処理
 try:
 // 処理
 except [例外]:
 // 例外発生時の処理
 else:
 // 例外が発生しなかった場合の処理
 finally:
 // 必ず実行される処理

def divide(x, y):
    try:
        result = x / y
    except ZeroDivisionError:
        print("ゼロ除算エラー")
    else:
        print("x/y=", result)
    finally:
        print("end")


divide(10,2)
divide(0,2)
divide(10,0)

4.9 クラス
(1)クラスの定義
 class クラス名():
 (字下げ)def__init__(self,引数,・・・):
   (字下げ)self.属性名=引数

class MyClass():
    def __init__(self, a, b):
        self.val1 = a
        self.val2 = b

mmyclass= MyClass("Hello!","world")
print(mmyclass.val1+" "+mmyclass.val2)

・selfはインスタンス自身を指し、基本的にはこの引数は必須
・コンストラクタの定義
 def __init__(self, a, b):
・インスタンスの生成
 インスタンス名=クラス名(引数,・・・)

(2)メソッドの定義
 def メソッド名(self):
 (字下げ)処理内容
ex7.py

class MyClass():
    def __init__(self, a, b):
        self.val1 = a
        self.val2 = b

    def out(self):
       print(self.val1+" "+self.val2)

mmyclass= MyClass("Hello!","world")
mmyclass.out()

・メソッドの実行
 インスタンス生成し、インスタンス名.メソッド名()で実行する

4.10 継承
 クラスの継承は、既存の他のクラスからメソッドや変数を受け継いで新しいクラスを作成できる。前者を「親クラス」、後者を「子クラス」という。
class 新規クラス名(継承したいクラス名):
(1)子クラスでメソッドを追加

class MyClass():
    def __init__(self, a, b):
        self.val1 = a
        self.val2 = b

    def out(self):
       print(self.val1+" "+self.val2)

class AdClass(MyClass):
    def out2(self):
       print(self.val1)

mmyclass= AdClass("Hello!","world")
mmyclass.out()
mmyclass.out2()

(2)親クラスのメソッドのオーバーライド
 インスタンスメソッドのオーバーライド 
ex9.py

class MyClass():
    def __init__(self, a, b):
        self.val1 = a
        self.val2 = b

    def out(self):
       print(self.val1+" "+self.val2)

class AdClass(MyClass):
    def out(self):
       print("子クラス:"+self.val1+" "+self.val2)

mmyclass= AdClass("Hello!","world")
mmyclass.out()

コンストラクタのオーバーライド
ex10.py

class MyClass():
    def __init__(self, a, b):
        self.val1 = a
        self.val2 = b

    def out(self):
       print(self.val1+" "+self.val2)

class AdClass(MyClass):
    def __init__(self, x):
        self.valx = x

    def out(self):
       print("子クラス:"+self.valx)

mmyclass= AdClass("good")
mmyclass.out()

5.ライブラリ
 import ライブラリ名(又はモジュール名)
 
 自作ライブラリ
 func_sum.py

def sum(x,y):
    z = x + y
    return z

ex11.py

import func_sum

if __name__ == '__main__':
    a = func_sum.sum(2,1)
    print(a)

6.ファイル読み書き

(1)ファイル出力
ex12.py

f=open('sample.txt', 'w')
f.write('Hello World!\nGood Bye!')
f.close()

# python3 ex12.pyで実行したあと、sample.txtを開く

(2)ファイル入力
ex13.py

f=open('sample.txt', 'r')
for line in f:
   print(line)
f.close()

7.外部ライブラリ
(1)ライブラリとは 
 モジュール(.pyファイル)の集まりをパッケージといい、パッケージをまとめたものをライブラリという。
 ライブラリには、Python環境をインストールした際に合わせてインストールされる標準ライブラリと、外部から読み込んで使える外部ライブラリがある。

(2)外部ライブラリの使い方
 pip(Pythonで書かれたパッケージソフトウェアをインストール・管理するためのパッケージ管理システム)を使い、ライブラリをインストールする。
・ライブラリのインストール
 $ pip install ライブラリ名
・モジュールでライブラリの使用
 import ライブラリ名
 ライブラリ名.関数名()

 ライブラリに別名を付けて使うとき、
import ライブラリ名 as 別名
別名.関数名()
・ライブラリから特定の関数をインポート
 from ライブラリ名 import 関数名
 関数名() 
 ※特定の関数だけをインポートした場合には関数を使う時、先頭のライブラリ名を省略することができる。

(3)ライブラリの種類
・標準ライブラリ
 https://docs.python.org/ja/3/library/index.html
・外部ライブラリ
 外部ライブラリの一覧は、PYPI(Python Package Index)のサイトで確認することができる。
 https://pypi.org/

(4)外部ライブラリのインストール
・インストール
 # pip3 install ライブラリ名

・外部ライブラリ一覧の表示
 # pip3 freeze

・外部ライブラリのアンインストール
 # pip3 uninstall ライブラリ名

・外部ライブラリの更新
 # pip3 install –upgrade ライブラリ名

・外部ライブラリに含まれる関数一覧
 #pip3 install Numpy
 #python3
 >>> import numpy
 >>> dir(numpy)

(5)外部ライブラリの例
・Numpy
 配列、行列など科学技術計算
・matplotlib
 データをグラフ化
・pandas
 データの統計量の表示やそのグラフ化
・sklearn
 比較的簡単な機械学習アルゴリズム
・OpenCV
 画像、データを処理するのに便利な様々な機能を備えたライブラリ

(参考文献)
・Python公式サイト
https://www.python.org/
・Python.jp プログラミング言語 Python情報サイト
https://www.python.jp/

end

javascriptの基本

目次


1.javascriptとは
ブラウザに実装されているスクリプト言語
リファレンス(MDN Web Docs)

https://developer.mozilla.org/ja/docs/Web/JavaScript

2.開発環境
 Windows10Pro(64bit)
(1)ブラウザ Google Chrome
(2)Node.js
node –version
v14.17.0
(3)エディッタ
  vscode

3.javascriptの実行
(1)ブラウザ(Chrome)のコンソールで実行
 デベロッパーツールの起動
 その他ツール>デベロッパーツールを選択、又は
 ブラウザの表示領域で「Ctrl」+「shift」+「I」(アイ)押下。

(2)Node.jsで実行

(3)HTMLに入れてブラウザで実行
sample1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
 <title>javacsript</title>
</head>
<body>
<script>
  console.log("hello");
</script>
</body>
</html>

(4)javascriptを外部ファイル化してHTMLから呼出しブラウザで実行
sample2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
 <title>javacsript</title>
</head>
<body>
<script src=”./sample2.js”></script>
</body>
</html>

sample2.js

console.log("hello");

4.javascriptの書き方
(1)文字コード
 Unicode
(2)大文字と小文字は区別される。原則、小文字を使う。
(3)トークンの区切り文字
 トークン(プログラムを構成する最小単位である字句のこと)の区切りは、半角スペース、又はタブを使う。全角スペースはHTML、CSSでは空白とみなされないため、javascriptでも使わないようにする。
(4)ステートメント
 ・ステートメント(文)はセミコロン「;」で終わる
 ・ステートメントを{}で囲んだものをブロック文、又は複合文といい、最後に「;」はつけない。
 ステートメントがない空文が「;」のみを記述する
 ・改行されたステートメントではセミコロンが自動挿入される場合があるが、改行の前後の関係で変わるため、ステートメントの最後には「;」を入れるようにする。
(5)コメント
 /*コメント文*/:任意の位置に挿入可
 //コメント文:行末に挿入可
(6)SCRIPTタグに対応していないWebブラウザ
 SCRIPTタグに対応していないWebブラウザでは、javacsriptの記述がそのまま表示されてしまうため、javacsriptの記述を「<!– javascript文 –>」の様にコメント文として処理する。
 また、SCRIPTタグに対応していない、又は無効となっているWebブラウザでjavascriptが使われていることを表示するためには「<NOSCRIPT>javascriptが使われています。Javascriptを有効にして下さい</NOSCRIPT>」の文を入れる。

5.イベントハンドラ
 どのタイミングでjavascriptを実行するかを指定するのがイベントハンドラで、下記のもの(一例)がある。
(1)onclick
 要素をクリックしたときにjavascriptを実行<IMG src=”sample3.png” onclick=”alert(‘ボタンがクリックされました’)”>
sample3.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
 <title>javacsript</title>
</head>
<body>
<IMG src="./sample3.png" onclick="alert('ボタンがクリックされました')">
</body>
</html>

(2)onmouseover,onmouseout
要素にマウスポインタが来た時、外れたときjavascriptを実行
<IMG src=”sample3.png” onmouseover=”alert(‘マウスポインタが来ました’)”> <IMG src=”sample3.png” onmouseout=”alert(‘マウスポインタが外れました’)”>
sample4.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
 <title>javacsript</title>
</head>
<body>
<IMG src="./sample3.png" onmouseover="alert('マウスポインタが来ました')">
</body>
</html>

sample5.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
 <title>javacsript</title>
</head>
<body>
<IMG src="./sample3.png" onmouseout="alert('マウスポインタが外れました’)">
</body>
</html>

(3)その他のイベントハンドラ
・onmousedown:マウスの左ボタンを押したとき
 ・onkeydown:キーを押したとき
・onload:ページ全体が読み込まれたとき
・onchange:フォームの内容が変更されたとき
・onsubmit:フォームのsubmitボタンを押したとき      フォーム送信時の入力チェックなどに使う

 

6.関数の基本
 関数とは一連の処理を1つの命令にまとめたもので、イベントハンドラなどから呼び出して使う。
(1)関数の定義 
 function 関数名(){・・・}
 この関数宣言の他に、
 ・関数式(関数リテラル)
 ・アロー関数
 がある。

(2)関数の呼出し
関数の呼出し方として、
 ・ボタンクリックなどのイベントハンドラから関数を呼び出す
 イベントハンドラ名=”関数名()”
 ・ソースが読み込まれたときに起動
などがある。

7.変数
(1)変数の宣言
 var 変数名;
 var 変数名,変数名,変数名;
(2)変数への数値の代入
 var 変数名;
変数名=値;
(3)変数への文字の代入
 var str;
str=”Hello”;
 シングルクオーテーション、又はダブルクォーテーションで囲む。
(4)グローバル変数とローカル変数
 関数の外で宣言した変数はグローバル変数でjavascript全体で利用でき、関数の中で宣言した変数はローカル変数で、その関数内でのみ利用できる。
(5)変数varについて
 varは変数宣言前でも代入可能(巻き上げ)で、再宣言も可能なため不具合を誘発する。再代入が必要なときはletを使う。同じ変数を再宣言すると警告が出る。
また、定数はconstを使う。

8.変数の演算
(1)演算子
  + , – , * , / , %
(2)インクリメントとデクリメント
変数名++
変数名–
(3)文字列の足し算
  var str = str + “Hello”

9.配列
 ・配列の宣言
  var 配列名 = new Array(変数の数);
配列にはデータ型に関係なく、数字、文字列を入れられる

var a=new Array(2);   
a[0]=5;
a[1]=”moji”;
console.log(a[0]);
console.log(a[1]);

・多次元配列
1次元配列の宣言したあと、その配列内の各要素(変数)に対して再度、配列 
 の宣言を行う。

var a=new Array(2);   
a[0]=new Array(3);
a[1]=new Array(3);
a[0][0]=1;
a[0][1]=2;
a[0][2]=3
a[1][0]=4;
a[1][1]=5;
a[1][2]=6
console.log(a[0][0]);
console.log(a[0][1]);
console.log(a[0][2]);
console.log(a[1][0]);
console.log(a[1][1]);
console.log(a[1][2]);

10.関数の引数
(1)数字
 onclick=”f(1)”
(2)文字
 onclick=”f(‘moji’)”
(3)複数の引数
 カンマ「,」で区切る

11.繰り返し処理
(1)基本構文
 for(変数の初期値;繰り返し条件;変数の変更){・・・}
 ・繰り返し条件
  比較演算子( == , != , > , < , >= , <= )で指定。
 ・変数の変更
  変数iとしたとき、i++(インクリメント)

var sum=0 ;
for(i=1;i<=3;i++){
    sum=sum+i;
console.log(i);
}

(2)多重ループ

var kaisu=0;
for(i=1;i<=3;i++){
    for(j=1;j<=2;j++){
        kaisu=kaisu+1;
        console.log("kaisu:"+kaisu);
    }
} 

(3)document.write()によるHTMLタグ出力
document.write()の命令の()内に表示する文字を「”」(ダブルクォーテーション)又は、「’」(シングルクオーテーション)で囲む
sample6.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
 <title>javacsript</title>
</head>
<body>
<script>
  var sum=0;
  for(i=1;i<=3;i++){
    sum=sum+i;
    document.write("<p>"+i+"のときのsum="+sum+"</p><BR>");
  }
</script>
</body>
</html>

12.条件分岐
(1)基本構文
if(条件式){・・・}
(2)2つの条件
 if(条件式){
(条件式成立時の処理)
}else{
 (条件式不成立時の処理)
}  

(3)3つ以上の分岐
 if(条件式1){
(条件式1成立時の処理)
}else if(条件式2){
 (条件式2成立時の処理)
}else{
 (以上の条件式不成立時の処理)
}
 ※上から順番に見ていき、条件が成立すれば以降は見ない。
  
(4)論理演算子 
 &&:AND
||:OR
!:NOT

(5)switch文
 switch(変数){
case 値1:
   (変数が値1のときの処理);
 break;
case 値2:
 (変数が値2のときの処理);
 break;
  default:
(上記以外の処理)
 }
 ・変数は数値、または文字の一致する場合の条件で分岐する。
・break文を入れないと以下の条件の処理が全て実行される。
 ・以上、以下の様な条件の指定は変数にtrueを使うことで可能。
 switch (true){
  case a>=5:
  console.log(‘aは5以上’);
  break;
 }

(6)while文
 while(条件式){・・・}
 条件式を満たす間のみ繰り返す。
 for文との違いは条件に使う変化する変数がなく、別に用意する必要がある。

13.break文とcontinue文
(1)break文
  繰り返し処理を強制終了する
(2)continue文
  繰り返し処理を中断し、繰り返し処理の先頭に戻る

14.関数の戻り値
 変数名=関数名(引数,引数,・・・);
 とし、関数の中でreturn文で返す。
sample7.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
 <title>javacsript</title>
<script>
  function add(a,b){
    return a+b;
  }
</script>
</head>
<body>
<script>
  var c =add(1,2);
  document.write("<p>"+"a+b="+c+"</p><BR>");
</script>
</body>
</html>

15.オブジェクトモデル
 Document Object Model (DOM) は HTML や XML 文書のためのプログラミングインターフェイスで、そのオブジェクト(HTML文書内の全ての要素)は文書を構成するHTMLのタグに対応している。
 このオブジェクトを通じて、javacsriptなどのプログラムから文書の操作ができるようになる。
 Javascriptでは以下のような階層構造でオブジェクトを管理している。

(1)オブジェクトの識別
 オフジェクトはdocument.image[0]のように、ページの中では添え字で識別する。また、name属性で識別することも可能。

(2)メソッド
 メソッドは各オブジェクトに対して処理を実行する。
 オブジェクト名.メソッド名(値);

(3)プロパティ
 プロパティは各オブジェクトがもっている設定値で、javascriptで変更することができる。
 オブジェクト名.プロパティ名=値;

16.ウインドウの操作
(1)新しいウインドウを開く
 window.open(“URL”,”ウインドウ名”,”属性”);
 主な属性
 属性名  値  内容
toolber yes/no ツールバーの表示
 loction yes/no URLのアドレス表示
status yes/no ウインドウ下部のステータスバーの表示
scrollbars yes/no スクロールバーの表示
 resizable yes/no ウインドウサイズの変更
(2)ウインドウを閉じる
 window.close();
(3)オブジェクトを変数に代入
 var 変数名=window.open(“URL”,”ウインドウ名”,”属性”);
 変数名.close();
とすることで、別のウインドウから他のウインドウを閉じることができる
(4)スクロール操作
 ページをスクロールする
 window.scrollTo(x座標,y座標)

17.文字色、背景色の操作
window.document.プロパティ名=”値”;
documentオブジェクトの主なプロパティ
  bgColor 背景色
  fgColor 文字色
  linkColor リンク文字色  
 
sample10.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
 <title>javacsript</title>
</head>
<body>
  <script type="text/javascript">
  document.write("このページの更新時間は"+document.lastModified+"です");
  </script>
</body>
</html>

18.画像の操作
(1)Imageオブジェクトのプロパティ
 src 表示する画像ファイル
 width 画像の横幅
height 画像の縦幅
border 枠線の太さ
name 画像の名前

sample11.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
 <title>javacsript</title>
</head>
<body>
  <IMG src="fig1.JPG" onclick="this.width=800">
</body>
</html>

上記でthisは自分自身を示すオブジェクト名
DOMで指定するときは下記のように指定する

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
 <title>javacsript</title>
</head>
<body>
  <IMG src="fig1.JPG" onclick="document.images[0].width=800">
</body>
</html>

name属性でオブジェクト指定するときは下記のように指定する。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
 <title>javacsript</title>
</head>
<body>
  <IMG src="fig1.JPG" name="fig1" onclick="document.fig1.width=800">
</body>
</html>

19.日付、時刻の操作
(1)ビルトインオブジェクトDate
 主なメソッド
 getFullYear() 年を取得
getMonth() 月を取得
getDate() 日を取得
getDay() 曜日を取得
 setFullYear() 年を指定
 など
 オブジェクトの作成は
var 変数名=new ビルトインオブジェク

sample12.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
 <title>javacsript</title>
</head>
<body>
  <script type="text/javascript">
  var now=new Date();
  document.write("今日は"+now.getFullYear()+"年"
  +now.getMonth()+"月"
  +now.getDate()+"日"
  +now.getDay()+"曜日"
  +"です");
  </script>
</body>
</html>

曜日は0-6で返され、0が日曜日、1が月曜日、・・・、5が金曜日。

20.フォームの操作
 Formオブジェクトは、HTMLの<FORM>~</FORM>に対応するオブジェクトで、forms[i]というオブジェクト名で指定する。
 また、<FORM>~</FORM>の中でINPUT、TEXTAREAタグなどの下位オブジェクトを指定するときは、forms[i].elements[j]で指定する。
 タグにname属性を付けて、name名でオブジェクトを指定することも可能。

21.URLと履歴の操作
(1)locationオブジェクト
プロパティ
href ページのURL
hostname ドメイン名
pathname ドメイン名以降のパス
protocol プロトコル

メソッド
 reload() ページの再読み込み
replace() 指定したURLへ移動
sample13.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
 <title>javacsript</title>
</head>
<body>
  <script type="text/javascript">
  document.write(location.href+"<BR>");
  document.write(location.hostname+"<BR>");
  document.write(location.pathname+"<BR>");
  document.write(location.protocol+"<BR>");
  </script>
</body>
</html>

XAMPPのControlパネルを開き、ApatchのCofigファイルhttpd.confに書いているDocumentRoot “C:/xampp/htdocs” に上記のhtmlファイルを置き、localhost/sample13.htmlに接続する

(2)historyオブジェクト
 メソッド
 back()  前のページに戻る
 forward()  後のページに進む
 
 <BUTTON onclick=”history.back()”>戻る </BUTTON>
 <BUTTON onclick=”location.reload()”>更新</BUTTON>
 <BUTTON onclick=”history.forward()”>進む</BUTTON>

22.Mathオブジェクト
 Mathオブジェクトはビルトインオブジェクトの1つで、下記のプロパティとメソッドがある。
 プロパティ
 PI :円周率
 SQRT2 : 2の平方根
 SQRT1_2 :1/2の平方根
 E :自然対数の底
 LOG10E :10を底とする自然対数
 LOG2E :2を底とする自然対数
 LN10 :eを底とする10の自然対数
 LN2 :eを底とする2の自然対数
 
 sample15.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
 <title>javacsript</title>
</head>
<body>
  <script type="text/javascript">
  document.write("PI:"+Math.PI+"<BR>");
  document.write("SQRT2:"+Math.SQRT2+"<BR>");
  document.write("SQRT1_2:"+Math.SQRT1_2+"<BR>");
  document.write("E:"+Math.E+"<BR>");
  document.write("LOG10E:"+Math.LOG10E+"<BR>");
  document.write("LOG2E:"+Math.LOG2E+"<BR>");
  document.write("LN10:"+Math.LN10+"<BR>");
  document.write("LN2:"+Math.LN2+"<BR>");
  </script>
</body>
</html>

メソッド(数値の処理)
 abs() 絶対値返す
 float() 小数点以下切り捨てた整数 
 ceil() 小数点以下切り上げた整数 
 round() 小数点以下四捨五入した整数 
 min() 小さいほうの数値
 max() 大きいほうの数値
 
 sample16.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
 <title>javacsript</title>
</head>
<body>
  <script type="text/javascript">
  document.write("abs(-1.5):"+Math.abs(-1.5)+"<BR>");
  document.write("floor(2.75):"+Math.floor(2.75)+"<BR>");
  document.write("ceil(2.75):"+Math.ceil(2.75)+"<BR>");
  document.write("round(5.5):"+Math.round(5.5)+"<BR>");
  document.write("min(1,7):"+Math.min(1,7)+"<BR>");
  document.write("max(1,7):"+Math.max(1,7)+"<BR>");
  </script>
</body>
</html>

 メソッド(べき乗、平方根、対数)
 pow(n,m)  nのm乗
 sqrt()  平方根
 log() 自然対数
 exp(n) 自然対数の底のn乗

sample17.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
 <title>javacsript</title>
</head>
<body>
  <script type="text/javascript">
  document.write("pow(2,3):"+Math.pow(2,3)+"<BR>");
  document.write("sqrt(2):"+Math.sqrt(2)+"<BR>");
  document.write("log(10):"+Math.log(10)+"<BR>");
  document.write("exp(3):"+Math.exp(3)+"<BR>");
  </script>
</body>
</html>

23.stringオブジェクト
 メソッド
 toLowerCase() 小文字に変換
 toUpperCase() 大文字に変換 
 charAt()  n番目の文字だけ抜き出す(nは0,1,・・・)
 
 sample18.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
 <title>javacsript</title>
</head>
<body>
  <script type="text/javascript">
  var mojiretu="Hello";
  document.write("小文字:"+mojiretu.toLowerCase()+"<BR>");
  document.write("大文字:"+mojiretu.toUpperCase()+"<BR>");
  document.write("n番目の文字:"+mojiretu.charAt(2)+"<BR>");
  </script>
</body>
</html>

24.時間間隔の処理
 setTimeout(‘処理’,時間)
 時間経過後に、処理を行う
 setTimeout(‘fig()’,5000)

 sample19.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
 <title>javacsript</title>
</head>
<body>
  <script type="text/javascript">
     function fig(){
       location.href="fig1.JPG";
     }
  </script>
  <BODY onload="setTimeout('fig()',5000)">
</body>
</html>

同じ処理を一定時間間隔で繰り返すとき、
ID名=setInterval(‘処理’,時間)
clearInterval(ID名)

25.クッキーの操作
クッキーはページを見た個別情報を各自のパソコンにテキストファイルとして保存できる仕組みのこと。
(1)クッキーから値を読み込むとき、
 変数名=document.cookie;
(2)クッキーに値を書き込むとき、
 document.cookie=値;
 また、クッキーの有効期限を値の最後に「;」で区切り、expires=(有効期限)で記述。有効期限はグリニッジ標準時で指定する。
 「属性名1=値1;属性名2=値2;属性名3=値3;・・・;expires=(有効期限);」
で複数の値をクッキーに保存することができる。 
 document.cookie = “mycookie=” + cookieValue+”;expires=”+extime;
 DateオブジェクトのtoGMTString()メソッドは、グリニッジ標準時に基づいて指定日時を文字列に変換する。

 sample20.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>cookie sample1</title>
</head>
<body>
  <input id="input1"value=""/><br>
  <button onclick="wCookie()">書込</button><br>
  <button onclick="rCookie()">読込</button><br>
  <button onclick="delCookie()">削除</button>

  <script type="text/javascript">
    // cookieの値を読み書きする要素
    var input1 = document.getElementById("input1");

    // 書き込み
    function wCookie() {
      var cookieValue = input1.value;
      var now=new Date();
      var ss=now.getSeconds();
      ss=30+ss;
      now.setSeconds(ss);
      var extime=now.toGMTString();
      document.cookie = "mycookie=" + cookieValue+";expires="+extime;
      document.write(document.cookie);
    }

    // 読み込み
    function rCookie() {
       document.write(document.cookie);
    }

    // 削除
    function delCookie() {
      document.cookie = "mycookie=; expires=0";
      document.write(document.cookie);
    }
  </script>
</body>
</html>

書込のあと、読込した

書込してから、30秒以上経過してから読込し、cookieは削除されている

(参考文献)
相澤祐介.(新)JavaScriptワークブック.カットシステム,2015年第2版
磯博.徹底マスターJavaScriptの教科書.SBC,2018年第3刷

The subject ends herewith.

jQueryの基本

1.概要
(1)jQueryとは
 jQueryはjavacsriptのライブラリで、ブラウザ間の仕様の差異を吸収してくれる。
 jQueryには1.x系、2.x系、3.x系(2016年-)の仕様がある。
 1.x系:Internet Explorer 8以前をサポート
 2.x系:1.xに対して軽量化(Internet Explorer 9以降をサポート)
 3.x系:2.xに対して再設計し処理の呼出しなどが異なる。
 .minは軽量化したファイル、.slimは一部の機能をカットした軽量版

 また、minityされたファイルが提供されている。jQueryのダウンロードファイルにuncompressed(非圧縮)とcompressed(圧縮)があり、compressed(圧縮)の方がファイルサイズが小さいが、エラーの内容も小さくなりわかりにくいため、開発時はuncompressed(非圧縮)を使い、リリース時はcompressed(圧縮)を使うことも可能。
 また、source map を使うことで、compressed(圧縮)を使いながら、uncompressed(非圧縮)のエラー表示紐ずけすることも可能。

(2)jQueryのダウンロード
https://jquery.com/

(3)jQueryを使うための準備
 jQueryを使うためにはページにjQueryを読み込む必要がある。
 jQueryをダウンロードしてオフラインで読み込む方法と、ダウンロードせずにオンラインで読み込む方法がある。
 また、jQueryのバージョンアップに伴い廃止された機能について、「jQuery migrate plugin」を使うことで、機能を復活させることができる。

 ①ダウンロードして読み込む場合
 jQueryを読み込ませたいHTMLファイルを作り、同じフォルダにダウンロードしたjquery-...min.jsを置く。
 HTMLの<head>内に
 <script src=”jquery-*.**.*.min.js”></script>
を記述する。

 ②オンラインでCDNを使って読み込む場合
 オフラインで使えるjQueryのCDN(コンテンツデリバリーネットワークの略)には、jQueryのCDNなどがあり、下記を記述する。
 //jQueryのCDN
 <script src=”https://code.jquery.com/jquery-3.5.1.min.js”>
 </script> 

2.jQueryの記述
(1)基本構文
 $(‘セレクタ’).メソッド
 $()はHTMLの要素をオブジェクト化してjQueryのもっている機能を使えるようにする。
 
(2)$(function(){・・・});
 HTMLは先頭から読み込まれて順に実行されるため、セレクタの宣言前にscript文を記述すると、そのscript文は実行されない。$(function(){・・・})の{}内にscript文を記述することで、ページ全体を読み込んでからscript文を実行することができる。
 $(function(){・・・})は、$(document).ready.function(){・・・})の略。

3.セレクタ
(1)IDセレクタ
 <script>
  $(‘#名前’)
 </script>
 <要素名 id=”名前”>・・・</要素名>

(2)クラスセレクタ
  <script>
  $(‘#名前’)
 </script>
 <要素名 class=”名前”>・・・</要素名>
 複数の要素をまとめて扱える

(3)タイプセレクタ
 <script>
  $(‘div’)
 </script>
 <要素名>・・・</要素名>
 全てのdiv要素をまとめて扱えるが単独で使用する場面は少なく、子孫セレクタなど、他のセレクタと合わせて使用する。

(4)セレクタの中からセレクタを探す
 セレクタをオブジェクト化して、findメソッドでセレクタを探して、オブジェクト化する。
 var 変数=$(‘セレクタ’);
 変数.find(‘セレクタ’);

4.メソッド
(1)css
 スタイルの変更を行う
 jQueryObject.css(‘プロパティ名’,’値’);

(2)show/hide
 要素の表示・非表示を変更する
 jQueryObject.show();
 jQueryObject.hide();

(3)width/height
 要素の幅・高さを指定する
 jQueryObject.width(幅);
 jQueryObject.higth(高さ);

(4)fadeIn/fadeOut
 フェードインアニメーションとフェードアウトアニメーションを行う

(5)slidedown/slideUp
 スライドアニメーションを行う

(6)animate
 animate(プロパティ名,値)
 カスタムアニメーションを行うためのメソッド

(7)text/html
 要素の内容を書き換える

(8)empty
 要素の中身を空っぽにする

(9)attr
 要素の属性値を変更する
 attr(‘属性名’,変更後の値)

(10)val
 値を変更する
 jQueryObject.val(‘変更後の値’);

(11)addClass/removeClass
 要素のclass属性値を操作するためのメソッドで、addClassはクラスを追加、removeClassはクラスを削除する

(12)append/appendTo
 要素を動かすためのメソッド

(13)remove
 要素を丸ごと削除するメソッド

(14)click
 要素をクリックしたときに発生
 jQueryObject.click(イベントハンドラ);

(15)mouseenter/mouseleave
 mouseenterはマウスがのったとき、mouseleaveはマウスがおりたときに発生
 jQueryObject.mouseenter(イベントハンドラ);
 jQueryObject.mouseleave(イベントハンドラ);

(16)hover
 mouseenterとmouseleaveの両方を設定できる
 jQueryObject.hover(mouseenterのイベントハンドラ
,mouseleaveのイベントハンドラ);

(17)focus/blue
 フォーカスが当たったとき、外れたときに起こるイベント
 jQueryObject.focus(イベントハンドラ);
 jQueryObject.blue(イベントハンドラ);

(18)each
 jQueryObject.each(function(){・・・});
 jQueryObjectに対して{}内の処理を行う

5.$()によるオブジェクト化
(1)$(‘セレクタ’)
  セレクタをオブジェクト化して、メソッドが使えるようにする

(2)$(function(){})
ページ読み込み完了時に実行されるコードを予約する

(3)$(DOM要素)
 $(this)のthisは変数で、DOM要素が入る
 <div id=div1>・・・</div> 
 <script>
  var div=document.getElementById(‘div1’)
 <script>
 ここで、document.getElementById(‘div1’)は要素を取得し、div1というid属性値が付けられたdiv要素であり、jQurryの$(‘セレクタ’)と同じ働きをする。この要素をDOM要素という。

(参考書籍)
 「WebデザイナーのためのjQuery入門」技術評論社

The end

Android開発の基本

1.プロジェクトの作成
(1)AndroidStudioでプロジェクトを作成
  Android開発環境構築を参照
(2)プロジェクトフォルダ
 Projectツールウインドウで下記など、フォルダの見え方を変更できる

 ・Androidビュー:開発の必要なファイルのみを表示

 ・Projectビュー:エクスプローラーに表示されるファイルに近い表示


(3)Androidビューのフォルダの内容
 ・manifests
アプリの実行に必要な設定を記述する「AndroidManifests.xml」ファイルが格納されている。
 ・java
  Androidアプリの開発では、アプリの画面構成を.xmlファイルに、処理を.javaファイルに記述する。このうち、処理をする.javaファイルを格納する。
 ・res
上記のアプリの画面構成の.xmlファイルなどを格納する。
resフォルダ内のサブフォルダとして、
drawble:画像を格納
layout:画面構成に関わる.xmlファイルを格納
mipmap:アプリのアイコンを格納
values:アプリで表示する固定文字列(strings.xml)、画面のスタイル(styles.xml)、色構成(colors.xml)の.xmlファイルを格納する。

2.Androidアプリの開発手順
 Androidアプリはレイアウトファイル(.xmlファイル)とアクティビティファイル(.javaファイル)のペアで成り立っている。
 ①プロジェクトの作成
 ②strings.xmlファイルに表示文字列を記述
 ③レイアウトXMLファイルに画面構成を記述
 ④アクティビティなどの.javaファイルに処理を記述
 ⑤アプリを起動して、AVD(Android Virtual Device)などで動作確認する
の順で作成する。

3.ビューの作成
ビューの作成には、レイアウトとビューを使う。
・レイアウト:画面部品の配置を決める
・ビュー:画面部品そのもの
(1)レイアウト
 主に使うレイアウトとして、
 :画面部品を縦、横方向に並べて配置
 :画面部品を相対的に配置

(2)ビュー部品
 :文字列の表示
 :テキストボックス
 :ボタン
 :ラジオボタン
 :チェックボックス
 :ドロップダウンリスト
 :リスト表示
 :スライダー
 :レート値を表現
 :ON/OFFを表現できるスイッチ (3)画面部品で使う主な属性
 ①android:id
  アクティビティ内の画面部品を使うときのidを設定する  
android:id=”@+id/(名前)”  
 ②android:text
画面部品が表示されるとき、strings.xmlファイルに記述する文字列と紐づける名前を設定する
android:id=”@string/(名前)” 
 ③android:layout_width/height
  部品の幅と高さを設定する
 ④android:layout_margin/padding
部品の外側の余白と内側の余白を設定する

4.レイアウトの実装
(1)テキストビューとテキストボックス

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#A1A9BA"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tvLabelInput"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="5dp"
        android:background="#ffffff"
        android:text="@string/tv_msg"
        android:textSize="25sp"/>

    <EditText
        android:id="@+id/etInput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="25dp"
        android:layout_marginTop="5dp"
        android:background="#ffffff"
        android:inputType="text"/>
</LinearLayout>

strings.xml

<resources>
    <string name="app_name">画面部品サンプル</string>
    <string name="tv_msg">お名前を入力してください。</string>
</resources>

(2)チェックボタン

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#A1A9BA"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#df7401"
        android:orientation="horizontal">

        <CheckBox
            android:id="@+id/cbDrink"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="25dp"
            android:background="#ffffff"
            android:text="@string/cb_apple"/>

        <CheckBox
            android:id="@+id/cbFood"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#ffffff"
            android:text="@string/cb_orange"/>
    </LinearLayout>
</LinearLayout>

strings.xml

<resources>
    <string name="app_name">画面部品サンプル</string>
    <string name="cb_apple">apple</string>
    <string name="cb_orange">orange</string>
</resources>

(3)ラジオボタン

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#A1A9BA"
    android:orientation="vertical">
    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="10dp"
        android:background="#df7401"
        android:orientation="horizontal"
        android:paddingBottom="10dp"
        android:paddingTop="10dp">

        <RadioButton
            android:id="@+id/rbMale"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="25dp"
            android:layout_marginRight="25dp"
            android:background="#ffffff"
            android:text="@string/rb_male"/>

        <RadioButton
            android:id="@+id/rbFemale"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#ffffff"
            android:text="@string/rb_female"/>
    </RadioGroup>
  </LinearLayout>

strings.xml

<resources>
    <string name="app_name">画面部品サンプル</string>
    <string name="rb_male">男</string>
    <string name="rb_female">女</string>
</resources>

(4)ドロップダウンリスト

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#A1A9BA"
    android:orientation="vertical">

    <Spinner
        android:id="@+id/spCurryList"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:entries="@array/sp_list"
        android:paddingBottom="5dp"
        android:paddingTop="5dp"/>

    <Button
        android:id="@+id/btSave"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/bt_save"/>

  </LinearLayout>

strings.xml

<resources>
    <string name="app_name">画面部品サンプル</string>
    <string-array name="sp_list">
        <item>算数</item>
        <item>理科</item>
        <item>国語</item>
        <item>社会</item>
        <item>英語</item>
        <item>図工</item>
        <item>家庭</item>
    </string-array>
    <string name="bt_save">保存</string>
</resources>

(5)リストビュー

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#A1A9BA"
    android:orientation="vertical">

    <ListView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#ffffff"
        android:entries="@array/lv_colorlist"/>
  </LinearLayout>

strings.xml

<resources>
    <string name="app_name">画面部品サンプル</string>
    <string-array name="lv_colorlist">
        <item>ホワイト</item>
        <item>レッド</item>
        <item>ホワイト</item>
        <item>イエロー</item>
        <item>グリーン</item>
        <item>ブルー</item>
        <item>ブラック</item>
    </string-array>
</resources>

CSSの基本

1.CSSとは
(1)CSS(Cascading Style Sheets)
 HTML文書に装飾、レイアウトをほどこすための言語。
(2)CSSをHTMLに組み込む方法
 次の3つの方法がある。
 ①インライン
HTMLのタグの中に直接、style属性でCSSを記述。
<タグ style=”プロパティ:値;”>~</タグ>
<h1 style=”color:#FF0000″>見出し1</h1>
 メンテが煩雑になるため、原則テスト時以外は使用しない
②内部参照
HTMLのhead内部にCSSを書き込む方法
<style>
  セレクタ{プロパティ:値;}
</style>
head要素の中に記述したCSSはそのHTMLページでしか使えない。
③外部参照
CSSファイルを作成し、HTMLとリンクさせる方法。
HTMLのタグ内部にタグを記述し、CSSファイルとリンクさせる。
<head>
  <link rel=”stylesheet” href=”ファイルパス” type=”text/css” /></head>
rel属性:HTMLファイルからみたCSSファイルの関係
href属性:参照するCSSファイルの場所とファイル名を指定
type属性:参照するファイル形式を指定、省略可
複数のHTMLのレイアウトを統一でき、メンテナンスの効率良い。

 

(3)CSSの記述方法
 ・記述方法
  セレクタ{プロパティ:値;
       プロパティ:値;
        :
      }
「;」で区切り、複数のプロパティを設定できる。
 (例)body{font-size:12px}
 ・複数のセレクタに適用(複合セレクタ)
  セレクタ,セレクタ,セレクタ,・・・{プロパティ:値;・・・}
  「,」で区切り、複数のセレクタに適用できる。

 ・セレクタ(id属性、class属性)
 セレクタとしてタグの要素名の他、id属性、class属性をセレクタとして使うことができる。
 idをクラスとして使うときは、id属性名の前に「#」を付ける。
 ※id属性はソースコード上の場所を1箇所特定するためのもので同じページの中で使えるid属性名は1つのみ。
 classをクラスとして使うときは、class属性名の前に「.」を付ける。
※class属性はスタイルを分類するためのもので同じ名前を使いまわしできる。
HTML
<p id=”nav”>
CSS
#nav{color:#ff0000}

HTML
<p class=”cl1″>
CSS
.cl1{color:#ff0000}

・セレクタ(子孫要素、要素とid、class属性の組み合わせ)
子孫要素名をセレクタとするとき、要素名を半角スペースで区切る
また、要素名とid属性、class属性の組み合わせも半角スペースで区切る
HTML
<ul>
  <li> </li>
  <p id=”san”>  </p>
</ul>  
CSS
 ul li{color:#ff0000}
 u1 #san{color:#ff0000} 

2.プロパティの使い方
(1)collor
 RGB値で設定 #ff0000
 16種類の色の名前で設定 rgb(255,0,0)
(2)単位
相対単位
 px:モニターの画素(ピクセル)を1とする単位
 %:パーセントで割合を指定
 em:大文字Mの高さ(=フォントサイズ)を1とする単位
 ex:小文字xの高さを1とする単位
絶対単位
 pt(ポイント)、pc(バイカ)、mm、cm、in(インチ)
(3)border、margin、padding
 要素自身の内余白はpadding、隣り合う別の要素との間隔はmarginを使う

(4)背景画像を設定
 Body{
   background-image:url(img/test.png) ・・・背景画像設定
   background-repeat:repeat-x ・・・横方向の繰り返し
   background-repeat:repeat-y ・・・縦方向の繰り返し
}

(5)複数のプロパティを1行で記述するショートハンド
   border-color:#ff0000;
   border-width:1px;
   border-style:solid;
ショートハンドで記述すると
border:#ff0000 1px solid;
 順番は任意、但し、プロパティが持つ全ての値を設定する

3.レイアウト
 ここでは、グリッドレイアウトとフレックスボックスについて扱う。
(1)グリッドレイアウト
グリッドは、列と行を定義する水平線と垂直線の集合が交差したもので、要素をグリッド上の行と列の中に配置することができる。
 使用する主なCSSプロパティ
 ・分割ラインの作成で使用
  ・display: grid ・・・グリッドコンテナー化する
  ・grid-template-columns  ・・・垂直方向の分割ラインを作成する
  ・grid-template-rows ・・・水平方向の分割ラインを作成する
 ・要素の配置
  ・grid-column ・・・要素を縦線の番号でカラムを指定 
  ・grid-row ・・・要素を横線の番号でカラムを指定
  ・gap ・・・セル間隔を指定

(例1)
 グリッドコンテナを作成する
 sample1.html

<html>
<head>
	<style>
		#container {
		    display: grid; /* グリッドレイアウト */
		}
        #itemA{background-color:#00FF00;}
        #itemB{background-color:#00FFFF;}
        #itemC{background-color:#FFFF00;}
    </style>
</head>
<body>
	<div id="container"> <!-- コンテナ -->
	    <div id="itemA">アイテム1</div> <!-- アイテム -->
	    <div id="itemB">アイテム2</div> <!-- アイテム -->
	    <div id="itemC">アイテム3</div> <!-- アイテム -->
</div>
</body>
</html>

 #container {
    display: grid;
}
 ”container”属性の中の要素(id属性のitemA、itemB、itemC)がグリッドコンテナの要素となる

(例2)グリッドコンテナの縦線と横線で囲まれるセルを作成する
 sample3.html

<html>
<head>
	<style>
	.grid-parent {
	    display: grid;
	    grid-template-columns: 1fr 1fr 1fr;
	    grid-template-rows: 100px 100px;
	    gap: 10px;
	}

	.child1, .child2, .child3, .child4, .child5, .child6 {
	    background-color: #00ff00;
	    border: dotted 1px #000;
	}
	</style>
</head>
<body>
	<div class="grid-parent">
	    <div class="child1">アイテム1</div>
	    <div class="child2">アイテム2</div>
	    <div class="child3">アイテム3</div>
	    <div class="child4">アイテム4</div>
	    <div class="child5">アイテム5</div>
	    <div class="child6">アイテム6</div>
	</div>
</body>
</html>

class属性の.grid-parentのグリッドコンテナー化して、そのクラス属性の中の要素をグリッド要素にする
 .grid-parent {
  display: grid;
     :
  }
 grid-template-columns および grid-template-rowsプロパティを使用してグリッド上に行と列を定義する。グリッドトラックは、グリッド上の任意の2本の線の間にあるセルのこと。
 垂直方向の分割ラインを作成する
 grid-template-columns: 1fr 1fr 1fr;
fr 単位はグリッドコンテナー内の利用可能な空間の分数 (a fraction) を表し、ここでは3等分する。
 水平方向の分割ラインを作成する
 grid-template-rows: 100px 100px;

(例3)グリッド線に対するアイテム領域を設定する
 sample4.html

<html>
<head>
	<style>
	.grid-parent {
	    display: grid;
	    grid-template-columns: 1fr 1fr 1fr;
	    grid-template-rows: 100px 100px;
	    gap: 10px;
	}

	.child1 ,.child2 ,.child3{
	    background-color: #00ff00;
	    border: dotted 1px #000;
	}
	.child1 {
	    grid-column: 1/2;
        grid-row: 1/1;
	}
	.child2 {
	    grid-column: 2/5;
        grid-row: 1/3;
	}
	.child3 {
	    grid-column: 1/2;
        grid-row: 2/3;
	}
	</style>
</head>
<body>
	<div class="grid-parent">
	    <div class="child1">アイテム1</div>
	    <div class="child2">アイテム2</div>
	    <div class="child3">アイテム3</div>
	</div>
</body>
</html>

グリッド列の線 1 から始まる番号でカラム(縦の線)と行(横の線)を設定する
 アイテム1は、
  grid-column: 1/2; ・・・1番から2番までの列 
grid-row: 1/1; ・・・1番の行のみ

(参考)
MDN Web Docs グリッドレイアウトの基本概念https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

(2)フレックスボックス
 フレックスボックスは、一次元のレイアウトモデルであり、基本的には「行」か「列」のいずれかの方向のみのレイアウトとなる。

 使用する主なCSSプロパティ
 ・分割ラインの作成で使用
  ・ display: flex; ・・・flexコンテナー化する
  ・flex-direction:値; ・・・flexコンテナの主軸の方向を設定する
   row (デフォルト) ・・・左から右へ(ltr)水平方向に配置
   row-reverse ・・・rowの逆、右から左へ(rtl)水平方向配置
   column ・・・上から下へ垂直方向に配置
   column-reverse ・・・columnと逆、下から上へ垂直方向に配置
(例1)横方向に配置
sample2.html

<html>
<head>
	<style>
		#container {
		    display: flex; /* フレックスボックス */
		}
        #itemA{margin:5px;background-color:#00FF00;}
        #itemB{margin:5px;background-color:#00FFFF;}
        #itemC{margin:5px;background-color:#FFFF00;}
    </style>
</head>
<body>
	<div id="container"> <!-- コンテナ -->
	    <div id="itemA">アイテム1</div> <!-- アイテム -->
	    <div id="itemB">アイテム2</div> <!-- アイテム -->
	    <div id="itemC">アイテム3</div> <!-- アイテム -->
</div>
</body>
</html>

(例2)縦方向に配置
sample5.html

<html>
<head>
	<style>
		#container {
		    display: flex; /* フレックスボックス */
		    flex-direction:column; /* 縦方向に配置 */
		}
        #itemA{margin:5px;background-color:#00FF00;}
        #itemB{margin:5px;background-color:#00FFFF;}
        #itemC{margin:5px;background-color:#FFFF00;}
    </style>
</head>
<body>
	<div id="container"> <!-- コンテナ -->
	    <div id="itemA">アイテム1</div> <!-- アイテム -->
	    <div id="itemB">アイテム2</div> <!-- アイテム -->
	    <div id="itemC">アイテム3</div> <!-- アイテム -->
</div>
</body>
</html>

(参考)
フレックスボックスの基本概念
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox


The end

HTMLの基本

1.HTMLとは
(1)HTML
 HTMLはHyperText Markup Languageの略。
 ハイパーテキストは独立して存在するドキュメント間で参照を設定できる構造をもつ。
 マークアップ言語はドキュメントの構造や修飾のためのタグというテキストを挿入して記述する。
(2)HTMLとXHTMLの違い
 XHTMLはXMLをベースにHTMLを再構築したもの。
 XHTML(Extensible HyperText Markup Languageの略)は、
 ・タグは必ず終了タグ”/”で閉じる、
 ・要素をあらわすタグは小文字で表記しなければならない
などの決まりがある。
(3)規格の変化
 SGML→HTML HTMLはもともと文書を保管・閲覧するための言語として開発
  |→XML データを保管するための言語として開発 
   →XHTML(W3C 2000-2018年) HTMLをXMLに適合するように定義しなおしたもの
    →HTML5(WHATWG 2004策定、W3C 2007策定2014-2021年勧告)
   XHTMLの仕様も取り入れたもの
   →HTML Living Standard(WHATWG 2011 – )
    HTML5のWHATWGとW3Cの仕様を統一

W3C:World Wide Web Consortium
World Wide Webで使用される各種技術(HTTP、CSS、DOMなど)の標準化を推進する為に設立された標準化団体
WHATWG:Web Hypertext Application Technology Working Group
  HTMLと関連技術の開発をするためのコミュニティ
(4)HTML5 と HTML Living Standardの違い
  HTML5に対して仕様が追加されている
 「HTML(WHATWG Living Standard)」の日本語訳
  https://momdo.github.io/html/

2.HTMLの基本構造
2.1 タグ
(1)タグ
 ドキュメントの見出し、段落などの構造の意味づけをタグ(「<」と「>」)記号を使って記述。
 開始タグと終了タグで指示を与えたいテキストを囲む
 タグとテキストを合わせた全体を要素という。
 タグは半角、小文字で記述。
(2)タグの属性
 タグの要素に追加する設定を属性といい、要素の種類によって異なる。
 <要素名 属性=”値”>の形式で記述する。

2.2 ドキュメントの基本構造
(1)全体の構造

<html>
<head>
<title>タイトル</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>  
<meta name="description" content="(紹介文)"/>  
<meta name="keywords" content="キーワード1","キーワード2",
・・・/>
</head>
<body>
(ボディ部)
</body>
</html>

(2)ヘッダのタグ
・<title>~</title>タグ
 ブラウザのウインドウのタイトル文字列として表示。
・<meta>タグ
ドキュメントに関する情報の設定
連絡先、制作者、文字コードの指定
<meta naem=”reply-to” content=”連絡先”/>
<meta name=”author” content=”制作者”/>
<meta http-equiv=”Content-Type” content=”text/html;charset=文字コード “/> 
 
検索エンジン対応の設定
 キーワード(name=”keywords”)と紹介文(name=”description”)
  検索サイトに登録し、検索でヒットしたとき、タイトルと紹介文が表示される。検索の拒否は、 
  <meta name=”robots” content=”index,follow”/>

(3)ボディのタグ
・<p>~</p>タグ
 段落を設定
・<hn>~</hn>タグ n=1,2,・・・,6
 見出しを設定
・<br>タグ
 改行する
 文書中の改行は無視され、1文字分のスペースとして扱われるため、改行は<br>を入れる。
 <br>は空要素で、HTMLでは終了タグは不要、但し、XHTMLでは
 <br />として、”/”でタグを閉じる必要がある。
・<strong>~</strong>
 文字の強調
・<hr>
 水平線
・<adress>~</adress>
 連絡先情報の記述
・<ul>~</ul> <li>~</li>
 順序不同リストで、箇条書き項目を設定しリストの先頭に黒丸●が付く
・<ol>~</ol>
 序列リストで、段落番号付きの箇条書きを設定
・<dl>~</dl> <dt>~</dt> <dd>~</dd>
 定義リストで、用語と用語をセットにしたリスト形式を定義する
・タグと要素、属性と値
 <要素名 属性=”値”>
  <body bgcolor=”#ff0000″>
  色指定は先頭に”#”を付け、RGBの各2桁の数字を組み合わせて表現する

3.画像の挿入とリンク設定
(1)画像の挿入  
  <img src=”test.jpg” width=”200px” height=”300px” alt=”サンプル” />
  alt属性:代替テキストの設定

(2)リンクの設定
  <a href=”リンク先のURL”>
  リンク先のURLの指定は、相対パスと絶対パス(URLによる指定)がある
(3)アンカー(リンクを張るための名前)
 <a href=”#test1″>テスト画像</a>

  <a name=”test1″ id=”test1″>テスト画像は・・</a>
 アンカーにリンクさせるためには”#”のあとにアンカー名を指定
 <a href=”#アンカー名”>
 アンカー名は古いブラウザ(name属性)とXHTML(id属性)の両方に対応するように両方に同じアンカー名を記述する

4.その他のタグ
・テーブル<table>タグ
 1行2列のテーブル
 <table border=”1″ width=”300″ height=”150″>
  <tr>     ・・・行の定義
  <td></td> ・・・セルの定義
  <td></td>
  </tr>
  </table>

・フォーム<form>タグ
 <form action=”入力内容の送信先” name=”フォームの識別名” method=”送信方法post又はget”>
<input type=”text” name=”t1″ value=”sample” size=”10″ maxlength=”15″>
 name:コントロールを識別するための名前
 value:デフォルトで入力枠に表示するテキストを設定
 size:入力枠の幅を文字数で指定
 maxlength:入力可能な最大文字数を指定
</form>

 他に、
・チェックボックス <input type=”checkbox”> ・・・
・ラジオボタン <input type=”radio”> ・・・
・ファイルアップロード <input type=”file”> ・・・
・ドロップダウンメニュー
   <select name=”名前”> <option>~</option> ・・・  
   </select> 
 がある。

The end

C++言語

C言語に対して、C++で追加になった機能を中心に記載します。

1.動作環境(サンプルの実行環境)
・VirtualBoxのCentOs7マシン
・CentOsのバージョン
# cat /etc/redhat-release
CentOS Linux release 7.9.2009 (Core)
・コンパイラのバージョン

【c++コンパイラ】
 ・パッケージ一覧
yum list | grep gcc-c++

・インストール
yum -y install gcc-c++

 ・バージョン確認
g++ –version

g++ (GCC) 4.8.5 20150623 (Red Hat 4.8.5-44)
Copyright (C) 2015 Free Software Foundation, Inc.
This is free software; see the source for copying conditions. There is NO
warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
・インストール済みのgcc-c++パッケージ
# rpm -q gcc-c++
gcc-c++-4.8.5-44.el7.x86_64
g++ オプション
-Wall: g++ に 詳細なWarning を出力
-o file: 出力先をfileに指定
-v: コンパイルの各ステージで実行されるコマンドを表示する
-c: コンパイルのみ行い、リンクは行なわない
-S: コンパイルが終ったところで処理を中断する
-std:C++の規格を指定 g++ -std=c++11 main.cpp

(3)言語規格
C++は、C言語にオブジェクト指向プログラミングをはじめとする様々なプログラミングをサポートするための改良が加えられたもので仕様
・C++11『プログラミング言語 C++ のISO標準 ISO/IEC 14882:2011』
・C++14『プログラミング言語 C++ のISO標準 ISO/IEC 14882:2014』
・C++17『プログラミング言語C++の国際規格ISO/IEC 14882:2017』
・MISRA C++
 英国The Motor Industry Software Reliability Association(MISRA)によって定められた、C++言語のコーディングガイドライン。

2.C++プログラムのサンプル
2.1 サンプル1
 main()関数で構造体のメンバに値を設定して、値を出力する関数を呼んで表示するプログラム。1つのソースファイルに実装する場合と、2つのファイルに分けて実装する場合の2パターンについて作成する。
(1)1つのファイル(main1.cppのみ)で実装する場合

CからC++で変更した点
①ネームスペース(using namespace)の追加
②C++では文字列リテラルは const char[] 型として扱われてchar* 変数には文字列リテラルは代入できないため、string型を使用
③printf関数はchar*型を引数に取り、そのままではstring型の変数使えないため、coutオブジェクトを使う
④使用する入出力オブジェクトに合わせてインクルードするヘッダファイルを変更。
C++ではのように”.hファイル”でない識別子を使ってヘッダファイルに対応づけする仕様があるが、iostream.hのヘッダファイルも用意されている。

main1.cpp

#include <iostream>

using namespace std;

typedef struct _Person{  //構造体宣言
    string name;
    int age;
}Person;

void send(Person mperson);//プロトタイプ宣言


int main(){
    Person man1;
    man1.name="satou";
    man1.age=20;
    send(man1);
    return 0;	
}

void send(Person mperson){
   cout<<"name:"<<mperson.name<<endl;
   cout<<"age:"<<mperson.age<<endl;
}

(2)2つのファイル(main2.cpp,member.cpp)で実装する場合

main2.cpp

#include "member.h"

using namespace std;
int main(){
    Person man1;
    man1.name="satou";
    man1.age=20;
    send(man1);
    return 0;
}

member.h

#include <string>

using namespace std;

typedef struct _Person{  //構造体宣言
    string name;
    int age;
}Person;

void send(Person mperson);//プロトタイプ宣言


member.cpp

#include <iostream>
#include "member.h"

using namespace std;

void send(Person mperson){
   cout << "name:" << mperson.name << endl;
   cout << "age:" << mperson.age << endl;
   //return 0;
}


(解説)
coutオブジェクトはこの関数内でのみ使用するため、標準ライブラリのインクルード文はヘッダファイルに入れない。
自分のヘッダファイルを読み込み、コンパイル時にチェックできるようにする。

(3)前記(2)の関数呼出しをクラスの関数に変更する

 C++はCの構造体を発展させたもので、ヘッダファイルでクラスの型を宣言して、クラスのメンバ関数、コンストラクタはソースファイルに実装する。

Member3.h

#include <string>
using namespace std;

class Member{
    private:
        string name;
        int age;

    public:
        void send();//プロトタイプ宣言
        Member(string name,int age);//コンストラクタ
};

 ヘッダのクラス宣言はブロック文ではないため、}の後に”;”を忘れずにつける。

Member3.cpp

#include <iostream>
#include "Member3.h"

using namespace std;

//関数の実装
void Member::send(){
   cout << "name:" << name << endl;
   cout << "age:" << age << endl;
}

//コンストラクタの実装
Member::Member(string name,int age){
    this->name=name;
    this->age=age;
}

main3.cpp

#include "Member3.h"
#include <string>
using namespace std;
int main(){
    Member m_member("satou",20);
    m_member.send();
    return 0;
}

2.2 サンプル2
 複数人の健康診断データを構造体の配列として扱い、BMIを計算する関数の引数について、値渡しと構造体変数のポインタ渡しについて作成する。
(1)値渡しで実装

bmi.h

#include <string>
using namespace std;

//健康診断データ構造体
struct HealthCheck{
    string name;
    double height;
    double weight;
    double bmi;
};

//BMI関数プロトタイプ宣言
double getBmi(double height,double weight);


bmi.cpp

#include "bmi.h"

double getBmi(double height,double weight){
    double bmi;
    double mHeight;
    int i;
    mHeight=height/100;
    bmi=weight/mHeight/mHeight;
    return bmi;
}

main4.cpp

#include <iostream>
#include "bmi.h"
using namespace std;

int main(){

    const int DATA_NUM=3;
    HealthCheck people[DATA_NUM]={
        {"yamada",180,70,0},
        {"suzuki",175,65,0},
        {"satou",170,63,0}
    };

    int i;
    for(i=0;i<DATA_NUM;i++){
        people[i].bmi=getBmi(people[i].height,people[i].weight);
        cout << people[i].name << "さんのBMIは" << people[i].bmi  << endl;
    
    }
    return 0;
}

(2)ポインタ渡し

bmi1.h

#include <string>
using namespace std;

//健康診断データ構造体
struct HealthCheck{
    string name;
    double height;
    double weight;
    double bmi;
};

//BMI関数プロトタイプ宣言
double getBmi(const HealthCheck *phc);

bmi1.cpp

#include "bmi1.h"

double getBmi(const HealthCheck *phc){
    double bmi;
    double mHeight;
    int i;
    mHeight=phc->height/100;
    return phc->weight/mHeight/mHeight;
}

main5.cpp

#include <iostream>
#include "bmi1.h"
using namespace std;

int main(){

    const int DATA_NUM=3;
    HealthCheck people[DATA_NUM]={
        {"yamada",180,70,0},
        {"suzuki",175,65,0},
        {"satou",170,63,0}
    };

    int i;
    for(i=0;i<DATA_NUM;i++){
        people[i].bmi=getBmi(&people[i]);
        cout << people[i].name << "さんのBMIは" << people[i].bmi  << endl;

    }
    return 0;
}

3.文法
ここではCに対して、C++で追加された機能を主に記載します。
3.1 データ型
(1)データ型
  bool型が追加された

(2)リテラル(直定数)
 リテラルを書けるのはデータ型で定義されたもののみ。
 整数定数 int=5
 実数定数 double=3.14, double=3.0e-10, double=3.14F、
 文字定数 char=’A’ ,char=’\n’(改行),char=’\t’(タブ)
 文字列定数 const char=”Hello\n”,const char=”あいうえお”
   C++ではconst char *とする。文字列はstring(クラス)を使う。

3.2 コンソール入出力
 C++では、cin、coutのオブジェクトが追加されている。
 キーボードから入力された値を変数に格納するときは、
  std::cin >> 変数 >> std::endl
 また、変数に格納された値を画面に出力するときは、
  std::cout << 変数 ここで、>>、<<はデータの入出力を行う演算子です。
 endlは改行を出力し、データの書式設定を行うもので、入出力マニュピレータという。

3.3 クラス
 C++のクラスはCの構造体を拡張したもので、クラスの宣言は、
 class クラス名 {
  private:
   メンバ変数の宣言;
       :
  public:
   メンバ関数のプロトタイプ宣言;
       :
   コンストラクタのプロトタイプ宣言;

}(オブジェクトの変数);

 オブジェクトの変数は省略できる。
 外部からアクセスするにはpublicキーワードをつける。メンバ変数は通常publicにしないで、メンバ変数の値の書き込みと読み出しは、関数(セッター/ゲッター)を通して行う。
 publicのメンバのアクセス方法は構造体と同様、クラス型変数名.メンバ名でアクセスできる。
 クラス宣言はヘッダファイルで行い、メンバ関数の実装はソースファイルで行う。
 関数を実装するとき、どのクラスの関数か明示するため、スコープ解決演算子( :: ) を用いてクラスと関数名を指定する。

3.4 コンストラクタ
 クラス名と同じ名前の関数であり戻り値を持たない。オブジェクト生成時に呼び出され、オブジェクトの初期化を行う。
 コンストラクタ関数は引数を受け取ることができ、オブジェクトのメンバ変数のの初期化を行うことができる。
 また、コンストラクタは引数の数、型が異なる複数の関数をオーバーロードして宣言できる。

3.5 スコープ 
 ローカルスコープとグローバルスコープ 
 ローカル変数との重複名称のとき、メンバ変数であることを明示したいとき
 メンバ関数では スコープ解決演算子を用いてクラスを指定します
  クラス名::メンバ変数;
  グローバル変数を関数内で明示するには グローバルスコープ解決演算  子 ( :: ) を使用。
 ::変数;
で表す。

3.6 オブジェクトの配列
 クラスのオブジェクトの配列の生成は、
  クラス名 配列名[]();
 又は、
  クラス名 配列名[]=new クラス名();
 ここで、クラス名()は、クラスのメンバ関数でコンストラクタのこと。
 で生成し、メンバのアクセスは、
  配列名.メンバ名
で行う。

サンプル main6.cpp
 クラスのオブジェクトの配列の生成はクラス名 配列名[]();
 クラスのオブジェクト配列のメンバ変数の初期化を行います。ここではメンバ変数もpublicとして、main()関数から、配列名.メンバ変数でアクセスします。

#include <string>
#include <iostream>
# define MEMBER_MAX 10

using namespace std;

class Member{
    public:
        string name;
        int age;
    public:
        void send();
        //コンストラクタ
        Member(string name,int age);
        Member();
};

int main(){
    //オブジェクト配列生成
    Member m_member[MEMBER_MAX];
    //初期化
    for(int i=0;i<MEMBER_MAX;i++){
        m_member[i].name="";
        m_member[i].age=0;
    }
    //読み出し
    for(int i=0;i<MEMBER_MAX;i++){
        m_member[i].send();
    }
    return 0;
}

//クラスの実装
Member::Member(string name,int age){
    this->name=name;
    this->age=age;
    }
Member::Member(){
    }

void Member::send(){
   cout << "name:" << name << endl;
   cout << "age:" << age << endl;
}


サンプル main7.cpp
 前記と同様、クラスのオブジェクト配列のメンバ変数の初期化を行います。ここではメンバ変数をprivateとして、データをセットするset()関数を作り、main()からは配列名.メンバ関数でアクセスします。

#include <string>
#include <iostream>
#define MEMBER_MAX 10

using namespace std;

class Member{
    private:
        string name;
        int age;
    public:
        void set(string name,int age);
        void send();
        //コンストラクタ
        Member(string name,int age);
        Member();
};

int main(){
    //オブジェクト配列生成
    Member m_member[MEMBER_MAX];
    //初期化
    for(int i=0;i<MEMBER_MAX;i++){
        m_member[i].set("",0);
    }
    //読み出し
    for(int i=0;i<MEMBER_MAX;i++){
        m_member[i].send();
    }
    return 0;
}

//クラスの実装
Member::Member(string name,int age){
    this->name=name;
    this->age=age;
    }
Member::Member(){
    }

void Member::send(){
   cout << "name:" << name << endl;
   cout << "age:" << age << endl;
}

void Member::set(string name,int age){
    this->name=name;
    this->age=age;
}

サンプル main8.cpp
 クラスのオブジェクトをコンストラクを使って生成とメンバ変数の初期化を行う。

#include <string>
#include <iostream>
#define MEMBER_MAX 10

using namespace std;

class Member{
    public:
        string name;
        int age;
    public:
        void send();
        //コンストラクタ
        Member(string name,int age);
        Member();
};

int main(){
    //オブジェクト生成と初期化
    Member m_member("",0);
 
    //読み出し
    
    m_member.send();
    return 0;
}

//クラスの実装
Member::Member(string name,int age){
    this->name=name;
    this->age=age;
    }
Member::Member(){
    }

void Member::send(){
   cout << "name:" << name << endl;
   cout << "age:" << age << endl;
}


サンプル main9.cpp
 クラスのオブジェクト配列をコンストラクを使って生成とメンバ変数の初期化を行う。

#include <string>
#include <iostream>
#define MEMBER_MAX  5

using namespace std;

class Member{
    public:
        string name;
        int age;
    public:
        void send();
        //コンストラクタ
        Member(string name,int age);
        Member();
};

int main(){
    //オブジェクト生成と初期化
    Member m_member[MEMBER_MAX]={
        Member ("yama",10),
        Member ("suzu",20),
        Member ("iwa",25),
        Member ("ueno",30),
        Member ("satou",50)
       };
     //読み出し
    for(int i=0;i<MEMBER_MAX;i++){
        m_member[i].send();
    }   
    return 0;
}

//クラスの実装
Member::Member(string name,int age){
    this->name=name;
    this->age=age;
    }
Member::Member(){
    }

void Member::send(){
   cout << "name:" << name << endl;
   cout << "age:" << age << endl;
}

3.7 オブジェクトのライフサイクル
 オブジェクトの生成と破棄について考えます。
 クラスのオブジェクトは変数と同様、関数の外で宣言されたグローバルオブジェクトと関数の中で宣言されたローカルオブジェクトがある。
 オブジェクトが生成させるときコンストラクタが呼び出され、オブジェクトが破棄されるときデストラクが呼び出されるため、コンストラクタとデストラクタの呼出しタイミングを調べて、オブジェクトの生成と破棄のタイミングを調べる。

#include <string>
#include <iostream>

using namespace std;

class Member{
    public:
        string name;
    public:
        //コンストラクタ
        Member(string name);
        Member();
        ~Member();
};

void sub();

Member m_member_globalobj("グローバルオブジェクト");

int main(){
    cout << "main関数が呼び出された" << endl;
    sub();//1回目の呼出し        
    sub();//2回目の呼出し 
    return 0;
}

//クラスの実装
Member::Member(string name){
    cout << name << "のコンストラクタが呼び出された" << endl;
    this->name=name;
}

Member::Member(){
    cout << this->name << "のコンストラクタが呼び出された" << endl;
}

Member::~Member(){
     cout << this->name << "のデストラクタが呼び出された" << endl;
}

void sub(){
    cout << "sub()が呼び出された" << endl;
    //ローカルオブジェクトを宣言
    Member m_member_localobj("ローカルオブジェクト");
    cout << "sub関数終了" << endl;
}

VirtualBoxのインストール

Windows10ProにOracleVM VirtualBoxをインストールする

1.仮想化について
 仮想化には、コンピュータのハードウエアリソース(CPU、メモリ、ディスクなどリソース)を共用し、ホストOSとは別に複数のOS(ゲストOS)を動作させるハイパーバイザー型仮想化と、ホストOSのカーネルを共用して動作させるコンテナ型仮想化があります。
 ハイパーバイザー型仮想化のソフトには、オラクルの「Virtualbox」、VMware 社の「VMware」、マイクロソフトの「Hyper-V」などがあり、ホストOSのアプリケーションとしてこれらの仮想化ソフトが稼働し、更に仮想化ソフトの上で別のOS(このOSをゲストOSと呼ぶ)を稼働させる方法です。
 一方、ハイパーバイザー型仮想化に対して、コンテナ型仮想化ではコンテナにはOSは含まれておらず、各コンテナはホストOSのカーネルを共有して使用し、コンテナはホストOS上で分離された1つのプロセスとして動作します。
 仮想化ソフト上で、ゲストOSを動かすか、ホストOSのカーネルを共用する点がハイパーバイザ型仮想化とコンテナ型仮想化との違いといえ、各々メリット、デメリットがあります。

ハイパーバイザー型仮想化とコンテナ型仮想化の比較

ハイパーバイザー型コンテナ型
仮想マシン(又はコンテナ)の起動時間ゲストOSの起動の時間を必要とする。ホストOSのカーネルを共用するため、OSの起動時間を必要としない。
リソースの有効活用複数のOSでリソースを分け合って使うため、オーバーヘッドが大きい。OSのカーネルを共用して、アプリレベルで分離を行うため、オーバーヘッドが小さい。
OSの混在Windows、Linux,Ubuntuなど異なるOSの仮想マシンの作成が可能。ホストOSのカーネルを共用するため、アプリケーションはLinuxの上で実行。
仮想マシン(又はコンテナ)のネットワーク物理マシンと同様のネットワーク構成で扱える。仮想化ソフト独自のネットワーク構成に従う必要がある。
可搬性仮想マシン毎にOS、ライブラリなどの環境を管理する必要がある。環境を含めてパッケージ化できる仕組みがあり、サーバ間の移行が容易。

2.OracleVM VirtualBoxのインストール
(1)VirtualBoxのダウンロード
https://www.virtualbox.org/

(2)ダウンロードしたインストーラ(VirtualBox-6.1.26-145957-Win.exe)を起動

今回はカスタマイズは行わず、初期設定のまま、「Next >」で次へ進む

インストールオプションの設定を行う(デフォルトのまま)

「Install」をクリックしてインストールを開始する

チェックをオンにしておくと、インストーラの終了後にVirtualBoxが起動する

前のバージョンのVirtualBoxで作成した仮想マシンが引き継がれた。

centos7の仮想マシンを起動

the end of a sentence

Android開発環境構築

目次

Windows10ProにAndroid Studioをインストールし、AVDの作成とアプリの実行を行います。

1.インストール
(1)Android Studioをダウンロードします。

https://developer.android.com/studio

Download optionsを選択

本稿ではexeファイルでインストールします。
ダウンロードしたプログラム

ハッシュ値を確認します。
コマンドプロンプトを起動し、certutil -hashfileコマンドを実行します。
certutil -hashfile (exeファイルがあるフォルダのパス)\(ファイル名) SHA256
ダウンロードページに記載されているSHA-256 checksumと一致することを確認します。

(2)Android Studioのインストール
ダウンロードしたパッケージ
android-studio-2020.3.1.22-windows.exe
をダブルクルックします。

既にインストールされていたAndroid Studioはアンインストールしましたが、前回の設定情報が引き継がれ、既設のプロジェクト画面が表示されました。

ファイル>「Close Project」でプロジェクトを閉じます。

2.プロジェクトの作成

「New Project」を選択します。

作成するアプリのテンプレートを選択します。

アクティビティの名前とAPIを選択します。APIはアプリが
動作する最小のAPIレベルを選択します。

 デフォルトのアクティビティとレイアウト画面が入ったプロジェクトのフォルダが作成されます。

3.AVD(Android Virtual Device)の作成
 赤枠のアイコンを選択してAVDマネージャーを起動します。

 現在、作成済のデバイス一覧が表示されます。

 新しいデバイスを作成します。
 ここではPhone Nexus5X API27のデバイスを追加します。
 ハードウェアPhone Nexus5X を選択します。

 システムイメージはAPI27を選択します。

 名前を付けます。

 API27のデバイスが追加されました。
 赤枠のボタンを選択してAPI27のデバイスを起動します。

 起動に時間がかかり警告が出ますが、”Wait”を選択して待ちます。

 AVDが起動して、端末が表示されます。

4.アプリの実行
 実行ボタン”▶”を選択するとデバイスにアプリが転送され実行されます。
 デフォルトのアプリが”HelloAndroid”と表示します。

 ■(赤色)ボタンを選択してアプリを終了します。
 端末にインストールされたアプリ(赤枠)

 アプリが実行された画面

The end

Eclipseによるjava開発環境構築

目次

1.Eclipseについて
 Eclipseはいろいろな言語の統合開発環境(エディタやコンパイラをまとめて提供する)。また、PleiadesはEclipseを日本語化するプラグインで、Eclipse 本体と日本語化を行うPleiadesプラグインおよびプログラミング言語別に便利なプラグインをまとめた「Pleiades All in One」がある。「Pleiades All in One」には”Full Edition” と”Standard Edition”があり”Full Edition”ではEclipse 実行用のJavaが付属しているため、Java(JDK、またはJRE)のインストールや環境変数の設定は不要。
 本項では、「Pleiades All in One」の「Full Edition」を使用します。

2.Pleiadesのインストール
 本稿の環境はWindows 10 Pro 64bit
(1)パッケージをダウンロード
下記のダウンロードサイトからパッケージをダウンロードします。
https://mergedoc.osdn.jp/

ダウンロードしたパッケージのハッシュ値の確認を行います。
コマンドプロンプトを起動し、下記のコマンドを入力して、上記のハッシュ値が一致することを確認します。
certutil -hashfile [ ファイルパス + ファイル名 ] MD5

> certutil-hashfile C:\・・・\pleiades-2020-12-java-win-64bit-jre_20201222.zip MD5

(2)ダウンロードしたパッケージの展開

「eclipse.exe」を起動します。「eclipse.exe」のショートカットをディスクトップやタスクバーなどに置きます。

起動するとワークスペースをおく場所を選択する画面が表示されます。

「起動」すると下記の画面構成となりました。「×」でいったん、画面を削除して改めて表示させることにします。

ウィンドウ>ビューの表示のメニューから「プロジェクトエクスプローラー」、「コンソール」を各々選択して表示します。

3.javaプロジェクトの作成
3.1 プロジェクトフォルダの作成
”プロジェクトエクスプローラー”の画面で、「javaプロジェクトの作成」を選択します。この画面は、ワークスペースに1つもプロジェクトがないときに表示され、他にプロジェクトがあるときは、ファイル>新規>javaプロジェクトで作成します。

EclipseでJava9以上からモジュールパスが導入され、Javaプロジェクト作成時にmodule-info.javaを作成するか否か問われます。モジュールは、パッケージを束ねるための単位でモジュールを利用することで配下のパッケージに対するアクセス権限をより細かに設定できるようになります。下記のようにビルド・パスはモジュールパスとクラスパスに区分されています。

今回はライブラリjarはクラスパスに追加することとし、module-info.javaファイルは作成しないことにします。

3.2 パッケージの作成

パッケージを作成するフォルダを選択し右クリックメニュー>新規>パッケージを選択します。

パッケージ名を入力して「完了」

3.3 クラスファイルの作成
パッケージフォルダを選択し右クリックメニュー>新規>クラスを選択します。

パッケージを作成しないでクラスファイルを作成したときは、プロジェクト名でパッケージが作成されます。

4.既にあるプロジェクトのインポート
ファイル>ファイル・システムからプロジェクトを開きます。

「ディレクトリー」を選択して、取り込むプロジェクトフォルダを選択し、「完了」

インポートするプロジェクトを選択します。

取り込んだプロジェクトに「×」印があるとき、ウィンドウ>ビューの表示>問題を選択し、原因を調べます。

上記の「×」は構成中だったと思われ、時間経過で×は消えました。

5.サーバの作成
ビューの表示>その他を選択し、「ビューの表示」を表示します。

サーバ>サーバを選択します。

サブウィンドウに「サーバ」画面が表示されます。

「・・・・・サーバを作成・・・」を選択し「新規サーバ」の画面を表示します。

Tomcatサーバのタイプを選択すると、インストール先のフォルダを選択する画面が表示されます。Pleiadesの「Full Edition」にはTomcatサーバも入っているため、この画面は出ません。
 Tomcatサーバのインストール先を入力します。

ライセンス画面で”同意”を選択して「完了」するとインストールできます。

6.アプリケーションの実行
リソース(アプリケーション)をサーバで実行するとき、予めサーバにリソースを登録して実行する方法と個々のリソースでサーバを選択する方法があります。
(1)予めサーバにリソースを登録して実行する方法
該当のTomcatサーバを選択して右クリックメニュー>「追加および除去」

”使用可能”のリソースを選択して「追加」します。
(削除は”構成済み”のリソースを選択して「除去」します)

追加すると、”構成済み”に追加したリソースが表示されます。

(2)サーバの実行

該当するTomcatサーバを選択して、実行ボタン押下します。

サーバが起動し、Tomcatサーバの”構成済み”に登録したアプリに接続できます。

また、個々のリソースを選択し右クリックメニュー>実行>サーバでも実行できます。

前記でサーバの「追加および除去」でこのリソースを設定していないときはサーバを選択する画面が出るのでサーバを選択し「完了」でサーバが起動します。

まとめ
 久しぶりにEclipseを起動すると操作に惑わされるため、よく使う操作を中心にまとめて見ました。逐次、新しい操作が出てきたら追加したいと思います。

The end