コンピュータ概論 2025
芸術学部|前期 水曜4限 15号館1F 15102
汎用シート|CommentScreen
第12回 Web開発
はじめに
現代社会における情報の発信と共有の大半は、WebサイトやWebアプリケーションによって実現されています。Webコンテンツは、どのような方法で開発されているのか、その概要を2回に渡って概説します。
様々な開発環境
- 一般的なコーディング HTML+CSS
- ノーコード開発 GoogleSite, Jimdo, Wix・・・
Web制作のワークフロー
- サイトマップ
- ワイヤーフレーム
- ローカル環境でのコーディング
- サーバーへのアップロード
静的サイトと動的サイト
HTML+CSS+JavaScript+PHP
- HTML
- CSS
- JavaScript(クライアントサイド)
- PHP(サーバーサイド)
Webサイト開発
- Webサイト = ひとつのフォルダ
- HTML + CSS の基本構造と考え方
- 参考:https://www.csszengarden.com/pages/alldesigns/
掲載されているサンプルサイトは、すべて同一のHTMLで書かれています。CSSの差し替えのみで様々なレイアウトが可能になることがわかります。
第11回 プログラミングと開発環境2
今最も注目度の高い言語は JavaScript ですが、これについては、次回以降の Web開発 の中で触れるので、今回は、簡単に導入体験が可能な Processing から解説をはじめます。
事例1|Processing
デザイナー・アーティストのためのプログラミング言語
- Processingについて , Processing/Sample
- p5.jsについて, p5.js/Sample
- GenerativeArt プログラムが作り出す造形
事例2|Python
AI開発の定番、多くの人が学んでいる汎用言語
付記:3DCGのプログラミング
- Processing
- Python
- PyOpenGL:定番の3DCGライブラリ Google:PyOpengl とは
- Matplotlib mplot3dモジュール:3D表示に対応してたライブラリ
- numpy-stl:3Dプリンタ用のデータ生成ができるライブラリ
- その他:Blender Python(Pythonスクリプトでモデル生成可能)
第10回 プログラミングと開発環境
はじめに
- 大学院生の実験へのご協力のお願い
芸術研究科|諸琳/デザイン特別研究
前回の補足
- 今、なぜデータベースの考え方が必要なのか
組織の規模が大きくなると、事務処理を目視で行うことは困難になります。あらゆる情報を、独立性の高いテーブル(表)に分解して、処理内容に応じて、表同士を関係づけて必要なリストを作成することが求められます。
GoogleImage:リレーショナルデータベース
- 書棚からDBへ
従来のように「書類をバインダーに綴じて棚に整理する」という発想ではなく、「書類に関連するカテゴリー名やタグを付けて保管しておけば、あとはシステムが自動的に引き出してくれる」、つまり「ツリー状の枠組みで物事を片付ける必要はく、情報にマーキングだけしておいて、あとは機械に探させればいい」という発想の転換をすることで、情報の管理は非常に楽になります。
- 今日のプロジェクトベースの組織では、DBの利用が必須となります。2次元の紙に描ける「組織図」(ツリー構造)では、管理に限界があります。
>Semi-lattice
様々なプログラミング言語
- Python, JavaScript, PHP, Java, C, C++・・・・
- コンパイラとインタプリタ
- ネイティブアプリとWebアプリ
様々な開発環境
意見交換
プログラミング教育について思うこと・・
あなた自身の経験の有無、すべての人に必須? いつから学ぶ? 何が得られる?
汎用シート
関数 y =f(x) について
プログラムを理解するための基本概念である「関数」について・・
例えば、 \(y=2x+1\) というのは「入力データを2倍して1加えたものを出力する」、 \(z=x+2y\) というのは「入力データx に 入力データyの2倍を加えたものを出力する」という意味です。
ソフトウエア開発の世界では プログラム ≒ 関数 です。あらゆるプログラムは「何らかの入力に対して、一定の処理を行なって、結果を出力する」という形で、記述されます。
参考:Function
同様の関係表現
入力(input)と出力(output)の関係は、話し手の専門分野によって表現が異なりますが、以下の組み合わせ、基本的にすべて同じことです。
- 入力 出力 ・・コンピュータ
- 独立変数 従属変数 ・・統計・データサイエンス
- 説明変数 目的変数 ・・統計・データサイエンス
- 特徴量 ラベル ・・データサイエンス
- データ ターゲット ・・データサイエンス
- 条件 反応 ・・実験
入力(input)と出力(output)をデバイスの視点で語ると・・
- センサー アクチュエータ ・・機械工学
- 目・耳 手・足・声帯 ・・人間工学
- 感覚神経 運動神経 ・・神経科学
機械と生物の大きな違いは、フィードバックループのあり方。生物の場合、出力器官からのフィードバックが常に働いています。
第9回 データとデータベース
はじめに
- 前回オンライン体験について
データとは
データベースの仕組み
- リレーショナルデータベース
- SQL
意見交換
- カレンダーの書き込み・日記・写真の整理・コレクションの整理など、日頃から整理しているデータについて教えて下さい。紙媒体・電子媒体など、方法は何でも構いません。
- 汎用シート
第8回|オンライン体験
今回は、自宅のオンライン環境の動作確認を前提に、オンラインで実施します。
日時:5月28日(水)17:30 - (通常とは開始時刻が異なります)
ご参加ありがとうございました。授業・参加者の動作確認、終了しました。
接続情報
Zoom ミーティングに参加する
ミーティング ID: 829 5388 9829
パスコード: 178821
はじめに
- 参加者全員に、カメラ・音声・画面共有の動作確認を行なっていただきます。可能であれば、画面共有確認用に「学籍番号・氏名」を大きく書いたものを事前にご用意下さい(WORD, Illustrator, メモ帳など何でも可)。
接続時の配慮事項
- 会議は基本的にメンバーのみの参加が前提です。ご家族の方も含め、関係外の方が画面・音声を視聴しないよう、閲覧環境を準備して下さい。
- デフォルトの設定では、カメラオンの状態で室内の様子も映ります。必要に応じて、事前に背景をぼかすなどの対応をご準備ください。
- 公共のスペースを利用される場合は、会議の音声が外部に漏れないよう、イヤホン等をご準備下さい。
演習
- 参加者氏名(必要に応じて変更)
- リアクション動作
- マイク(音質・ハウリングの有無)
- カメラ(画質・背景処理)
- 画面共有(特定のウインドウのみ)
- チャットの活用(個別対象者との会話・全員へ・・の区別)
第7回|ネットワーク
はじめに|レポート提出について
- テーマ:デジタルテクノロジーと社会
デジタル技術(コンピュータ)によって社会は今後どのように変わるか。また、そのメリットとデメリットなど、自由な切り口であなた自身の考え・未来の展望などを語って下さい。 - 提出形式:A4サイズ 3ページ以内(PDF形式で提出)
25AX001.pdf ← この形式のファイル名にして添付して下さい。
- 提出先:inoue.ko ※ ip.kyusan-u.ac.jp (※ → @)
- 期 限:7月9日(水)授業最終(予定)日
オンライン授業体験について
次回第8回を以下のとおりオンラインで開催します。
- 日時:5月28日(水)17:30 - (通常授業の5限の時間帯)
- 個々の事情を鑑み「全員出席扱い」とします。
- 代休:7月16日(水)つまり、他の授業より1週間早く終了
- 参考:第1Q 試験時間割
- Zoom接続情報:当日、このページに記載します。
参加時は、ご自身の表示名を「氏名(学籍番号)」に変更して下さい。 - その準備として、以下のページで概要を説明します。
Zoomミーティング
ネットワーク技術について
- ネットワークの基礎
- 様々な接続プロトコル HTTP, HTTPS, FTP, SSH, NTP・・
- 通信相手を特定するIPアドレス 133.17.XX.XXX
参考:九産大個人領域(中央会館PC)へのアクセス|学内ネットワークのみ
大学が用意している個人領域には、以下の方法で接続できます。
- 基盤センターのWebサイトにアクセス
https://www.cnc.kyusan-u.ac.jp/ - 左サイドメニューの Proself をクリック
- K'sLifeと同じID,PW でログイン
九産大個人領域への FTP接続|学内ネットワークのみ
また、FTPクライアントソフトを使ってアクセスする場合は、以下の情報を利用することで、ファイルの操作が可能になります。
- 接続サーバー名 → www.kyusan-u.ac.jp
- 接続方法 → sftp または scp
- ユーザID → K'sLifeで用いているもの
- パスワード → K'sLifeで用いているもの
FTPクライアントで接続後、WWW-KSU という名称のフォルダ内に index.html 他のファイルを置くことで(学内のネットワークからの閲覧に限られますが)Webサイトの設置の練習をすることも可能です。
http://www.kyusan-u.ac.jp/~ (あなたのユーザID)
というアドレスで閲覧可能です。
例えば、ドキュメントルート(WWW-KSU)直下に SampleSite というフォルダを置いて、その直下に index.html を置いた場合は、以下の形式のURLで、サイトにアクセス可能(例は 学籍番号 24ax001 の場合)。つまり、フォルダの数だけ Webサイトを設置することができます。
http://www.kyusan-u.ac.jp/~k24ax001/SampleSite/
第6回 コンピュータの基本構造と論理回路
入力・処理(記憶)・出力
- 入力デバイス
- CPU・GPU
- 記憶デバイス
- 出力デバイス
2進数と論理回路
第5回|様々なアプリケーションの活用
アプリケーションについて
- ネイティブアプリケーションとWebアプリケーション
- Webアプリにおけるフロントエンドとバックエンド
- プロプライエタリとオープンソース
Officeツール
- ドキュメント作成(Word)
- スプレッドシート(Excel)
- スライド(プレゼンテーション)(PowerPoint)
グラフィックツール
- 2Dラスターグラフィック(Photoshop, GIMP)
- 2Dベクターグラフィックス(Illustrator, Inkscape)
- DTP(InDesign, Scribus)
- 3DCG(Blender)
- 映像編集(Premier, AfterEffect, OpenShot)
ソフトウエア開発ツール
> 第10回 の授業で紹介します。
- ローカル開発環境
- リモート開発環境
- リポジトリ
コンピュータとネットワークに関する留意事項
- ユーザーアカウントの管理(ID・パスワードの保管)
- セキュリティー対策
- スマホアプリ活用上の留意点
- AI活用上の留意点
- 著作権・肖像権 vs コピーレフト
- クリエイティブコモンズとパブリックドメイン
- SNS上での発言について
- 写真画像の扱いとExif情報
意見交換
- スマホのアプリで「役立つもの・面白いもの」を紹介して下さい。
そのアプリの紹介記事へのリンクもあわせて記載をお願いします。
汎用シート
第4回 インターネットの活用2
はじめに
- iCloud のリスクについて(再掲)
- iCloud と iCloudドライブ は別物・・という認識が必要です。
iCloud(初期5GB)内に、写真、連絡先等、iCloudドライブ・・です。 - 大前提として、iCloud同期の仕組みを理解する必要があります。
- 写真をたくさん撮ると、すぐに iCloud の初期容量 5GB を超えます。
- iCloudドライブでデスクトップと書類が「同期」状態になっているる場合も、すぐに 5GBを超えてしまいます。
- 課金なしで利用すべく同期を外すときは・・
手順を間違うとすべての場所からデータが消失する可能性があるので、安全のために、データを他の場所へコピーするか、外付けドライブを購入するなどして、データを確実にバックアップして下さい。 - データが消えてしまった場合・・
デスクトップ(フォルダ)がリセット(空白)された場合でも、ホームディレクトリに「デスクトップ(アーカイブ)」という名前のフォルダができている可能性があるので、まずそれをチェックして下さい。
どこにもデータが見当たらない場合でも、すぐに対応すれば復元ツールなので、復元可能な場合があります > Google:iCloud 復元 - ネットの情報を見るときは、OSのバージョンが自分のものと同じか確認しましょう。設定画面の仕様が異なる場合があります。
- iCloud と iCloudドライブ は別物・・という認識が必要です。
- オンラインツール活用体験について
- コンピュータ概論の第8回をオンライン(Zoom)で開催します。
- 候補:5月28日(水)15:40 - (個々の事情を鑑み「全員出席扱い」)
- 代休:7月16日(水)つまり、他の授業より1週間早く終了
メールの活用について(前回 説明できなかった内容)
- e-mail の送受信を行う方法(大きく2種類)
- Webメール: Outlook(本学学生標準)、Gmail、 YahooMail
- メーラー(メールクライアント):Outlook(Local)、 Thunderbird
- 送信先:宛先、CC(Carbon Copy)、BCC(Blind Carbon Copy)
- 件 名:要件をわかりやすく
- 本 文:相手の氏名、自身(送信者)の氏名をお忘れなく
- 添付ファイル:推奨:2MB以下、最大:10〜25MB
- 署 名:自身の氏名・所属・連絡先
- メールの送信者名に注意(ニックネーム等は非推奨)
- 詐欺メール対策
- スパムメールフィルタを使う(多くのケースで実装されています)
- 送信メールアドレスを疑う(偽装できるので注意)
受信メールボックス上で表示される差出人のメールアドレスは、仕様上「ヘッダFrom」という部分に記載されているアドレスですが、ヘッダFromはメールの仕様上、実際の送信者とは異なるものに改ざんすることが可能です。本当の送信元を特定するには、メールのソースを見て「エンベロープFrom」を確認する必要があります。
参考:Google:ヘッダーfrom エンベロープfrom - 不用意にリンクをクリックしない
- 不用意に添付ファイルを開かない(実行しない)
グループウエアの活用について
すでに様々な授業で利用されているかと思いますが、大学で用意されているTeams の実際の動作を改めて体験的に確認します。
- Teams コンピュータ概論 ← 2025年度入学生
- Teams コンピュータ概論 ← 2024年度以前入学生
- 今回はスマホでの体験が中心になるかと思いますが、自宅のPCにもインストールしておくことを推奨します。
クラウドドライブの活用について
大学に用意された OneDriveにも同様の機能がありますが、ここでは受講生の大半が個人所有する Googleアカウントを利用した GoogleDrive を紹介します。
- データの保存
- データの共有
意見交換
今回は時間の都合により、書き込み事項はありません。
書き込み可能なスプレッドシートのリンクを掲載して下さい。
汎用シート
第3回 インターネットの活用
WWW
WWW(World Wide Web)は、ネットワーク同志をつなぐ、蜘蛛の巣状のネットワークで、主にHTMLによるハイパーテキストが送受信されるシステムです。もともとは、大学や研究所などの個々のネットワーク同士が同一の規約(プロトコル)にしたがって、自律分散的に勝手に手をつないだもので、全体を管理する中央集権的な組織があるわけではありません。
どこかが断線しても、別の経路で目的のコンピュータにつながる仕組みになっているので、非常に安定した信頼性の高い仕組みといえます。しかし逆に言えば、一旦情報が流出すると、誰にも止めることができません。発信前に十分な注意が必要です。
画像出典:https://commons.wikimedia.org/wiki/File:Protocole_HTTP_TCP-IP_Passerelle_Routage.svg
Webはクライアント・サーバモデルに基づくシステムで、クライアント側の視点でみると、以下のように動作します。
- 1) ブラウザにURL(アドレス)を入力、あるいはリンクをクリックする
- 2) URLがDNSというデータベースによってIPアドレスに変換される
- 3) IPアドレスに対応するサーバにHTTPというプロトコルで接続される
- 4) HTMLで書かれたページが画像などとともに、要求元に送信される
- 5) 受け取ったデータはブラウザによって画面上に描き出される
ブラウザの活用
ブラウザとは Webサイトを閲覧するためのアプリケーションです。SNSや様々なクラウドシステムが日常的なものになった今日、最も使用頻度の高いソフトウエアといえるでしょう。
- ブラウザでできること
- Webサイトの閲覧 / 各種ファイルのダウンロード
- 画像(.jpg)、動画(.mp4)、音声(.mp3)等の再生
- オンラインストレージ上でのファイル管理
- 文書、スプレッドシート、スライド、楽曲等の作成・共同編集・保存
- 参考:世界のブラウザのシェア
メールの活用について
- e-mail の送受信を行う方法(大きく2種類)
- Webメール: Outlook(本学学生標準)、Gmail、 YahooMail
- メーラー(メールクライアント):Outlook(Local)、 Thunderbird
- 送信先:宛先、CC(Carbon Copy)、BCC(Blind Carbon Copy)
- 件 名:要件をわかりやすく
- 本 文:相手の氏名、自身(送信者)の氏名をお忘れなく
- 添付ファイル:推奨:2MB以下、最大:10〜25MB
- 署 名:自身の氏名・所属・連絡先
- メールの送信者名に注意(ニックネーム等は非推奨)
- 詐欺メール対策
- スパムメールフィルタを使う(多くのケースで実装されています)
- 送信メールアドレスを疑う(偽装できるので注意)
受信メールボックス上で表示される差出人のメールアドレスは、仕様上「ヘッダFrom」という部分に記載されているアドレスですが、ヘッダFromはメールの仕様上、実際の送信者とは異なるものに改ざんすることが可能です。本当の送信元を特定するには、メールのソースを見て「エンベロープFrom」を確認する必要があります。
参考:Google:ヘッダーfrom エンベロープfrom - 不用意にリンクをクリックしない
- 不用意に添付ファイルを開かない(実行しない)
意見交換
- インターネットを利用していてヒヤリとしたことを教えて下さい。様々なリスクがあることを皆で共有したいと思います。
汎用シート
- 参考:自身のIPアドレスの確認
確認くん:https://www.ugtop.com/spill.shtml
第2回 デジタルデータの活用
はじめに
- iPhone、Macユーザの方の iCloud 利用について
- 同期とは、サーバーストレージを含む複数のデバイス間で、データを一元的に最新の状態に保つ仕組みのことを言います。例えば、同期されているファイルを Macで修正更新すると、自動的に iCloud内のデータも更新され、iPhone にあるファイルも更新される・・という仕組みです。
- きちんとした知識と技術がないと課金せざるを得ない状況になる・・多くの方がハマっているようです。参考情報
- 利便性の向上とリスクについて
テクノロジーの進歩による利便性の向上は、それを上回る破壊的リスクを生み出します。技術への依存は大きなリスクを伴うと考えて下さい。
- その他参考:本学芸学の学生さんは、Adobeを自宅のPCでも利用できます。
https://www.cnc.kyusan-u.ac.jp/pdf/user-guide/adobecc_student.pdf
デジタルデータの基本単位
- ビット:bit :Binary Digit > 2進数(0, 1) 1桁分の情報量
- バイト:1Byte = 8bit > 2進数8桁分の情報量
\(2^8 = 256\) 通り > 英数1文字分の文字コードに対応
参考:文字コード表
- 単位の接頭辞:
\(\times 10^3\) :K(キロ), M(メガ), G(ギガ), T(テラ), P(ペタ)
\(\times 10^{-3}\) :mm(ミリ), μ(マイクロ), n(ナノ), p(ピコ), f(フェムト)
参考:SI接頭語
実際のソフトウエアを使いながら紹介します。
バイナリデータ
01の羅列として記録されたデータで、人間には読めない(コンピュータにしか理解できない)データです。実行可能なアプリケーション、特定のアプリケーションに依存したデータ、画像データなどが、この形式で記録されています。
テキストデータ
コンピュータが扱うファイルの中で、最もシンプルなのが、プレーンテキストといわれるもので、数字や文字が1〜3バイトのコードとして羅列されたものです。一般に拡張子 .txt をつけて保存しますが、例えば、CSV形式のデータや、Webページの記述に用いるHTML(.html)・CSS(.css)・JavaScript(.js)や、データを列挙した CSV(.csv)も、基本的には .txt で保存したものと同じプレーンテキストファイルです。プレーンテキストは、テキストエディタをはじめ、様々なアプリケーションソフトウエアで開くことができます。ASCIIデータと呼ばれることもあります。
ラスターデータ
ベクターデータ
3DCGが扱うデータ
例えば、Blenderのシーンデータ(.blend)などは、様々な種類のデータの複合パッケージとなっています。
- ポリゴンメッシュ:多角形を構成する(一般に三角形の)座標点と結線情報を列挙したデータ
- カーブ:端店と制御点を元に、方程式で曲線を補完する形式のデータ
- マテリアル:材質をシミュレートするために、拡散反射・鏡面反射・透明度・屈折率などのパラメータを列挙したデータ
- アクション:オブジェクトの動きの情報をまとめたデータ
動画データ
動画ファイルには、画像、音声、字幕などのデータが含まれています。例えば、MP4は、コンテナボックスの中に複数のボックスをもつ木構造で、以下のような情報が格納されています。
- ftyp:ファイルの先頭に書かれるファイルタイプの明記
- moov:全てのメタデータを含むコンテナ。動画・音声トラックのヘッダ情報やコンテンツの内容のメタ記述、時刻情報などが含まれます。
- mdat:トラックのメディアデータ本体のコンテナ。ファイル中のmdatボックスの数は任意で、動画と音声、動画のみ、音声のみ、あるいは複数種のトラックを同時に含む・・など、任意のトラック構成を持つことができます。
意見交換
データの情報量(B, KB, MB, GB・・)について、日頃どの程度意識していますか? また、意識しているとすれば、それはどんなケースですか?
第1回 ガイダンス
はじめに
- 当科目の目的・趣旨について
- 単位認定について
- 毎回の簡易投稿とレポート課題によって認定します。
- レポート課題は、第8回で提示 > 第14回の日を締切
- 授業の進め方について
基礎的事項の確認
- スマホとPCの違い
- ハードとソフト、アナログとデジタル
- ハードウエア, OS, アプリケーション
- ディレクトリ構成
- ファイルの管理・拡張子
- 各種デバイス(キーボード、マウス、USBメモリ・・・)
- コンピュータの歴史・現在・未来
基礎的知識の確認
日常生活におけるデジタル機器の使用に関わる受講生の皆さんの現状を確認させて下さい。以下、無記名の調査です(単位認定とは無関係です)。
- 調査フォーム:https://forms.gle/KuteMiUJYSKsZDtu9
> 受付終了しました。ご協力ありがとうございました。
- 参考情報
意見交換
身近にあるコンピュータではない機器・モノの具体例を挙げて下さい。コンピュータについて議論するには、はじめに「コンピュータではないもの」を確認する必要があります。視点を対象世界の外部に置くことが大切です。
- [[汎用シート>]]
APPENDIX
大学入学前の ICT関連教育について概観します。
小学校におけるプログラミング教育
2020年から「プログラミング教育」が必修化されていますが、プログラミングという科目が新設されるわけではなく、算数・社会・理科・音楽などの各科目の授業内に組み込まれる形で行われます。プログラミング言語の習得というより、「論理的思考力を身につけること」にその目的があります。以下、事例。
- 算数:ビジュアル言語(Scratch)などを使用した図形描画
- 社会:地域の情報をコンピュータを活用して整理する
- 理科:身近にある電気・電子的ツールの性質について学ぶ
- 音楽:コンピュータを使った自動演奏、楽曲制作
中学校におけるプログラミング教育
中学校では2012年時点の学習指導要領で「技術・家庭科」のカリキュラムに「プログラムによる計測・制御」が位置付けられていましたが、2021年からはより具体的な内容のプログラミング教育が「技術」の授業などに組み込まれるかたちで実施されています。中学校でのプログラミング教育の目的は「IT社会を生き抜く力を身につけること」とされています。小学校と同様に具体的な授業内容は各中学校で異なります。以下、事例。
- ネットワークを活用した情報の交換・共有
- オフィスツールを用いた文書作成・表計算・プレゼンテーション
- コンピュータを用いた動画コンテンツの制作(グループワーク)
- 画像認識AI、画像生成AI等の活用体験
高等学校における情報教育
高等学校には「数学」や「理科」と同様に、2003年度から「情報」という教科が設けられています。2021年までは、高校の情報科において「情報の科学」という科目を選択すればプログラミングを学べる・・という形でしたが、2022年から「情報Ⅰ」と「情報Ⅱ」が追加され、「情報Ⅰ」は必修、2024年度の大学入学共通テストにも出題されるようになりました。以下、科目の構成概要です。
- 高校 情報Ⅰ(必修)
- 1)情報社会の問題解決
- 2)コミュニケーションと情報デザイン
- 3)コンピュータとプログラミング
- 4)情報通信ネットワークとデータの活用
- 高校 情報Ⅱ(選択)
- 1)情報社会の進展と情報技術
- 2)コミュニケーションとコンテンツ
- 3)情報とデータサイエンス
- 4)情報システムとプログラミング
- 5)情報と情報技術を活用した問題発見・解決の探究
Society 5.0 (創造社会)おいては、誰もがデジタルデータやAIを使いこなす必要があり、その前提として、コンピュータや情報通信ネットワークの仕組みを理解する(Society 4.0(情報社会))とともに、それらを安全・適切に使うための情報セキュリティ、情報モラルの教育が必要・・とされています。