H30
コンピュータ基礎
H30ものづくり入門
鹿児島大学大学院 理工学研究科
渕田孝康
http://f-server.ibe.kagoshima-u.ac.jp/~fuchida/mono
H30
コンピュータとは？
• 形態の違い
• スーパーコンピュータ（スパコン） • パーソナルコンピュータ（PC） • デスクトップ型、ノート型、ラックマウント型（サーバー）、タブレット型 • スマートフォン（スマホ） • ケータイ（ガラケー・フューチャーフォン） • ゲーム機 • 組み込み型（自動車、エアコン、冷蔵庫、テレビ、洗濯機、掃除機・・・）• 構成要素
• ハードウェア • CPU、メモリ、ハードディスク、SSD、キーボード、マウス、カメラ、プリンタ、・・・ • ソフトウェア • OS、BIOS、ミドルウェア、アプリケーション、開発環境、・・・H30
パソコンのハードウェアの構成
• 中央処理装置（
CPU
）
• 制御装置 • 演算装置• 記憶装置
• メモリ（メインメモリ、キャッシュメモリ） • 補助記憶装置（ハードディスク、SSD）• 入出力装置（I/O）
• 入力装置（キーボード、マウス、カメラなど） • 出力装置（ディスプレイ、プリンタなど） アド レ スバス データ バス アドレスバスで番 地を指定し、デー タバスでデータを やり取りするH30
コンピュータはなぜ
使える
のか？
• いろいろなアプリがあるから！
• 仕事で使う • ワード、エクセル、パワーポイント • 情報を知る • インターネットブラウザ（IE、Chrome、FireFox、Safariなど） • さまざまなサイト、掲示板 • 人とつながる • ライン、フェイスブック、Twitter • 遊ぶ • ゲーム、オンライン対戦 • 音楽や映画 • ミュージックプレイヤー、動画再生アプリ • 本や雑誌、新聞、漫画を読む • Kindle、電子雑誌、ネット新聞、Comicsアプリ• でも、なぜいろいろなアプリがあるの？
• 普通の機械は目的のことしかできない • コンピュータの動作原理を知ろう！H30
コンピュータの動作原理
• 現代のデジタルコンピュータは電気で動く。
• 計算する、とは？
• 3+7=10 （十進数）・・・0～9の十種類の数字が必要 • 11+111=1010 （二進数）・・・実は0と1の二種類でも同じことが可能• 電気で動く、とは？
• 1 → 電圧が高い状態（＝オン状態） • 0 → 電圧が低い状態（＝オフ状態）、で表す。 • トランジスタという電子的なスイッチで切り替える。 • 論理ゲートを構成し、計算する。 紙テープ 南部博士 （マジンガーZより）H30
NOTゲート
• 「反転」ゲート
• 入力の反対を出力する。X
NOT
0
1
1
0
Xがオン（1） →NOTはオフ（0） Xがオフ（0） →NOTはオン（1） 真理値表 電子化 トランジスタ： 電子的にオン・オフできる スイッチ SWオン（＝出力はオフ） SWオフ（＝出力はオン）H30
ANDゲート、ORゲート
• 「かつ」ゲート
• 両方1のときだけ、1• 「または」ゲート
• どちらかだけでも1なら、1X1 X2 AND OR
0
0
0
0
1
0
0
1
0
1
0
1
1
1
1
1
AND,OR,NOTがあればすべての計算が可能H30
半加算器（Half Adder）
• 1桁の、2つの二進数を足す回路
• 足し算の基本 • この回路をたくさん並べると大きな数を足す ことができる。A B Sum Carry
0 0
0
0
1 0
1
0
2 0
2
0
:
:
:
:
3 7
0
1
3 8
1
1
:
:
:
:
9 9
8
1
A B Sum Carry
0 0
0
0
1 0
1
0
0 1
1
0
1 1
0
1
十進数の場合 二進数の場合 こういうのを数万～数億個も集めて、 1つのチップにパッケージ化したものがLSIH30
CPU内部構造
• Z８０ CPU
演算装置
H30
Logisimで作成したCPU
番 地 命 令 二進数 ニモニッ ク 00 0d 00001101 load 5 01 1e 00011110 add 6 02 17 00010111 store 7 03 38 00111000 stop 0 1. 5番地のデータを ACCに入れよ 2. 6番地のデータを ACCに足せ 3. ACCのデータを7番 地に入れよ 4. 停止せよ プログラムH30
プログラム内蔵型コンピュータ
• メモリに命令とデータを両方格納する方式
• 別名、「ノイマン型コンピュータ」 • 1945年 ジョン・フォン・ノイマンが提唱• 現在のコンピュータのほぼ全部がこの方式
データ1 データ2 データ3 データN 計算 結果 ・ ・ ・ 固定 記憶装置 命令1 データ1 命令2 結果1 データ2 結果2 ・ ・ ・ 制御 装置 記憶装置 単なる計算機 情報処理装置 演算装置 • 記憶装置に命 令とデータを混 在させて格納 • 制御装置によっ て命令を読む • 命令によって処 理が変化 プ ロ グ ラ ム （ALU）H30
情報処理装置としてのコンピュータ
• 単なる計算機ではない
• 「入力」を「処理」して「出力」するシステム• プログラムを書き替えることで、いろいろな目的に使用できる
• アプリケーションプログラム（アプリ） ハードウェア BIOS オペレーティングシステム（OS） ミドルウェア アプリケーション 入力 出力 処理H30
機械語
• CPUが直接実行できるプログラム
• メモリに格納されている二進数のデータ • 人間にとっては意味不明の数字列 • これで直接プログラムを書くことは難しい• 人間にわかりやすくしたい
• 意味のあるコードを命令に割り振る • ニーモニック（アセンブラ） • でも、わかりにくい 00111110 00010011 10110111 00101000 01110110 3E 13 C6 28 76 LD A,13H ADD A,28H HALT 二進数 十六進数 ニーモニック 命令1 データ1 命令2 結果1 データ2 結果2 ・ ・ ・ 制御 装置 記憶装置 演算装置 （ALU） 命令 データ ア セ ン ブ ルH30
高級言語
• より人間にわかりやすく
• FORTRAN • COBOL • BASIC • SmallTalk • Lisp • PASCAL • C • C++ • Java • PHP • Python • Javascript • ・・・ int main(){ int s=0,k=1; do{ s+=k; k++; }while(k<10); printf(“%d”,s); return 0; } S=0 K=1 3 S=S+K K=K+1 IF K<10 GOTO 3 PRINT S END FORTRAN 10 COMPUTE S=0 20 COMPUTE K=1 30 ADD K TO S GIVING S 40 ADD 1 TO K GIVING K50 IF K IS LESS THAN 10 THEN 30 60 PRINT S 70 END COBOL C 00111110 00010011 10110111 00101000 01110110 わかりやすい？
H30
高級言語プログラムの実行
• インタープリタ方式
• 命令を一つ一つ、機械語に翻訳しつつ実行する • 利点： • ソースコードがすぐ読める • 気軽に使える、修正が簡単 • 欠点： • 実行速度が（コンパイラ方式と比較して）遅い • 実行するために、インタープリタシステムが必要• コンパイラ方式
• 全部のプログラムを機械語に翻訳してから実行する • 利点： • 高速（CPUが直接実行できる） • 欠点： • ソースコードは見えない • 全体が完成していないと実行できない どちらも、 機械語への 翻訳が必要 CPUで実行でき るのは機械語 だけH30
最近の動向
• コンピュータの高速化、大容量化
• 実行時（JIT: Just In Time）コンパイラの高性能化 • インタープリタ方式でも十分な性能が得られる
• インターネットの普及
• ネットワーク機能の利用 • クラウドサービスの利用• スマートフォンの普及
• スマホアプリの開発 • さまざまなデバイス（センサー）の活用HTML5
Scratch
H30
HTML5
• HTML + Javascript + CSS
• ウェブブラウザ上で本格アプリ
• ブラウザがあれば、どの環境でも実行できる • Windows, Mac, Linux, Android, iOS など関係なし
• 例：
• Google Map, Google Earth • Yahoo地図
• 飛行機、JR、宿泊などの予約サイト • ウェブメール
• Googleドキュメント、スプレッドシート、スライド
H30
HTML5の構成要素
• HTML
• アプリの「構造」を記述する • ウェブアプリが動作するための土台となる • 拡張子が .html• Javascript
• アプリの「動き」を記述する • 「ボタンを押したら色が変わる」など • 拡張子が .js• CSS
• アプリの「見た目」を記述する • 「ここの文字は赤色で大きく」など • 拡張子が .css 見出し 本文 箇条書き クリックH30
index.html
<!doctype html> <html> <head> <title>HTML5</title><script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="my.js"></script> <link rel="stylesheet" href="my.css">
</head> <body> <h1>ようこそHTML5へ！</h1> <p>本日のメニュー</p> <ul> <li>HTMLとは</li> <li>Javascriptでインタラクティブ</li> <li>CSSで見栄えをよくしよう</li> </ul>
<input type="button" id="bt" value="変更"/> </body>
</html>
index.html
H30
my.js, my.css
$(function(){ $('#bt').click(function(){ $('li').toggleClass("red"); }); }); .red { color:red; } my.js my.css ボタンが押されたときの動作を定義 見た目（ここでは色）を定義 $(‘#bt’)がクリックされたら、 $(‘li’)のクラス”red”を トグルする クラス”red”の色は赤であるH30
クラウドの利用
• インターネット上に準備されているサービス
• Google Cloud API
• Google MAP, Storage, Google Platform, Google Drive
• Microsoft Azure
• OneDrive, Virtual Machines, Database
• Amazon Web Services • Dropbox
• Javascriptの
Ajax
を利用
• 非同期でサーバと通信する • ページを読み直さずに更新可能 位置情報 地図データH30
Scratch
• MIT（マサチューセッツ工科大学）のメディアラボが開発
• 主に子供向けのビジュアルプログラミング環境
• ブラウザ内で開発から実行まで
• インターネット接続が必要• ブロック
を接続してプログラミング
• 動きのあるプログラム（ゲームなど）を簡単に作れる
• 全世界で1000万以上の作品が作られている
Scratchの プログラムH30
興味があれば・・・
• Scratchのページで “fuchida” で検索
もっと学びたければ、http://www.ics.kagoshima-u.ac.jp/edu/のオープン キャンパス2016、2015もあります。
H30
