🏠
🌡️ 📆 令和5年10月4日
情報処理概論 戻る 進む 講義スライド
情報処理概論 🏫 Web Class files syllabus 52210 * 情報機器の準備 ウェブ講義の接続
🔋 C1 伊藤智博（ITO Tomohiro)

ホームページの仕組みと応用 －受講成果を公開しよう－

講義スライド

なぜ公開するの？

デジタルトランスフォーメーション(DX)やデジタル教育を進める上で，ホームページを使いこなせるようになろう．

ホームページなんて，書いたことがない．HTML言語なんで，聞いたこともない．そんな悩みを持つ学生は少なくないでしょう．

この授業は，その学修過程を大切にしています．授業での気づきや，改善点，試行錯誤の過程も含めて，ホームページで公開して，社会の役に立てよう！

国立大学法人は，税金が使われています．教育基本法の第七条 や 学校教育法の第八十三条にもあるように， 「その成果を広く社会に提供することにより、社会の発展に寄与する」ためにも，受講成果を公開しよう．

第七条　大学は、学術の中心として、高い教養と専門的能力を培うとともに、深く真理を探究して新たな知見を創造し、これらの成果を広く社会に提供することにより、社会の発展に寄与するものとする。
2　大学については、自主性、自律性その他の大学における教育及び研究の特性が尊重されなければならない。

出典：教育基本法 第七条
第八十三条　大学は、学術の中心として、広く知識を授けるとともに、深く専門の学芸を教授研究し、知的、道徳的及び応用的能力を展開させることを目的とする。
②　大学は、その目的を実現するための教育研究を行い、その成果を広く社会に提供することにより、社会の発展に寄与するものとする。

出典: 学校教育法 第八十三条

ウェブページで代用できるものは代用しよう

対面教育 vs. サイバー大学(放送大学)

対面教育の価値は、何か？サイバー大学と放送大学の違いは？ 大学と高校までの違いはなにか？

E-ラーニングでできる教育は、ネット配信に任せればよい。 対面教育の価値、サイバー大学の価値、放送大学の価値を見直そう

表   1 .  情報の種類
ℹ️情報の分類例
イメージ 画像、アニメ、絵画、書（フォント）
音響 音楽、音声、自然音
文字 文字、文章、 文書、詩、レイアウト
身体 表情、身振り、ダンス
造形 デザイン、モデリング
空間 3D、仮想現実
触覚 手触り、風合い、点字
味覚、嗅覚 味、香り

情報は、人間に意思決定させ、行動を起こさせる何かです。 人間が行動を起こさなければ、それはただの データです。 情報には、人間が直接 認識できる情報と、 電子的方式、磁気的方式など人間が近くによって認識できない情報があります。 また、アナログ情報とデジタル情報があります。 記録 されているものと、そうでないものがあります。

ウェブサービスの準備とレンタルサーバ

表   2 .  サーバーの種類
種類 サービス プロトコルなど アプリなど 運用例など
メールサーバー メール ssl,pop,imap YZメール
インターネットサーバー ホームページ https,http Microsoft Server + IIS（Internet Information Services）
Apache（アパッチ）
 教育用公開ウェブサービス アプリ

組織内にサーバを使うかそれともレンタルサーバを借りるか？ 転送量（通信料）や電気代がかかる。 レンタルサーバの費用は主に転送量に依存する。 ファイルの移動はftpを使うことが多い。

そっくりさんの偽サイトを作ってクレジット番号やパスワードを盗みとるようなことは犯罪行為、 技術者倫理違反！ 使うときはそのサイトはホンモノか疑おう。 また自分で偽サイトを作ることは絶対にやめましょう！

ECサイトやネットショッピングのサイトはレンタルサーバを借りても作れる。 しかし、消費者からのアクセスが殺到するとサーバを守るために、下記に示すような「HTTP Error 503」を表示することがある。 レンタルサーバは、他の利用者と回線やサーバリソースを共有していることが多いため、利用者の公平性の観点からレンタルサーバ1台あたりのアクセス数に制限が設けているからである。 利用料金の高いサーバは、レンタルサーバのアクセス数や通信帯域を高めに設定されている。 しかし、数量限定の商品やコンサートチケットなど希少価値の高い商品の発売時刻前後では、利用者のアクセス数が一時的に増大することがある。 ビジネスとして、利用料金の高いレンタルサーバを契約することでランニングコストが増大し、利益を損なう可能性もある。 また、希少価値の高い商品にアクセスが殺到した場合、アクセスの成功率は、1%以下であることもしばし見うけられる。

Service Unavailable
HTTP Error 503. The service is unavailable.

関連情報

表   3 .  Webアプリに使われる 言語
言語 説明
マークアップ言語 ◇ html, xml, svg,mathML,css 例：test.html
クライアントサイド .NET（ドットネット）
JavaScrpt
VBscript
 例：BodeNyquist.asp
クライアントサイド言語、フロントエンド言語といいます。
サーバーサイド .NET（ドットネット）
Python（パイソン）+Django（ジャンゴ）
VBscript(asp)
JavaScript（+Node.js）
Ruby
PHP		 サーバーサイド言語、バックエンド言語といいます。 IISとPythonで、Webアプリを作れます。 * test.asp test.py
データベース SQL データベースでデータの取得、保存、更新、削除などを行う言語です。
11 05 情報処理概論 01. 卒業研究 test

プログラミング言語

表   4 .  プログラミング言語の種類
種類 分類 言語 特徴
インタプリタ Webアプリ JavaScript Webブラウザ上で動作（クライアントサイド）
vb script(vbs,vba,asp)
AI Webアプリ python （ パイソン ） 1 ) * データサイエンス * 、 マテリアルズインフォマティクス *、ＡＩ
教育 Scratch ビジュアルプログラミング
コンパイル OS C ポインタ、構造体
汎用 VB.NET オブジェクト指向（多重継承なし）
汎用 Kotlin アンドロイドアプリ向け
OS C++ オブジェクト指向
colab jupyter

ファイルベースのシステムでは、コンパイラ言語は実行可能なファイルを生成し、 インタプリタ言語はそれを生成しないという違いがありました。 しかし、クラウドベースになって、実行ファイルそのものをクライアントにダウンロードしなくなり、 ジャストインコンパイルで実行結果だけを利用するようになると コンパイラ言語とインタプリタ言語の違いは、あまり本質的でなくなりました。

科学技術用の伝統的な言語としては、FORTRANがあります。 FORTRAN系列の言語としては、BASIC、pythonがあります。 統計用言語としてRがあります。

アルゴリズム重視の伝統的な言語としてALGOLがあります。 ALGOLは、Pascal, C, C++, C#,java, javascript, typescript, Kotlinと進化してきました。 juliaはCに迫る計算速度を誇ります。

サーバーサイドで使われてきたPerlや Ruby もクラウドで利用できるようになってきました。

人工知能で伝統的な言語Lispは、F#、 Schemeもクラウドで利用できるようになってきました。

人気 プログラミング言語 は、java script、そしてpython*と続きます。 *

表   5 .  メディアの歴史
項目 注釈
郵便 文字 紙 配達
電信 文字 無線 通信
１９世紀 新聞 * * 文字 配達
電話 * 音声 アナログ 通信
1887 蓄音機 * 音声 のアナログ 記録
1880 写真フィルム 画像 のアナログ 記録
ラジオ 音声 のアナログ 放送
1953 テレビ 動画のアナログ 放送
1956 ＶＴＲ 動画のアナログ 記録
1960 カラーテレビ 動画のアナログ 放送
1971 ＦＤＤ * 文字 のデジタル記録
1977 ＬＤ 動画 のデジタル記録
1979 電子辞書 * 文字 のデジタル記録
1982 ＣＤ 音声 のデジタル記録
1990～ デジタルカメラ * 画像 のデジタル記録
1982 ＭＤ 音声 のデジタル記録
1995～ デジタルビデオ * 動画 のデジタル記録
1996 ＤＶＤ * 動画 のデジタル記録
1995 ＨＴＭＬ２．０ 文字 のデジタル配信
1999 ＨＤＤ録画機 動画 のデジタル記録
1999 Napstar 音声の配信
2000 Google検索 文字と画像の配信
2005 YouTube 動画 の配信
2011 デジタルテレビ 動画 のアナログ 放送終了
12.無機工業化学 05.情報処理概論 メディアに記録できる情報

文字や絵画、楽譜などの 情報の記録媒体としてもっとも古くから使われているのは紙でしょう。 視覚によって情報を人が直接 認識できるうえ、 遅延もありません。

しかし、音声や動画といった情報を記録するようになり、人は、磁気的記録や電子的記録といった、直接認識できない方法での記録をするようになりました。

さらにデジタルコンピュータとインターネットを使って、大量のデータをクラウドにデジタル記録するようになりました。

文字と文書の記録

◇ ＳＮＳとデジタルコミニュケーションツール

表   6 .  ◇ SNS
サービス説明アカウント連携
ライン (Line) 電話番号が必要、スマホをトークンとして、SMS認証
◇ フェイスブック (facebook) メールアドレスが必要
ツイッター (twitter) メールアドレスが必要
インスタグラム (instagram) メールアドレスが必要
スラック (slack) google, facebook, アップルＩＤ で連携可能
スナチャ (Snapchat) 消える系ＳＮＳの老舗
WebRTC Chat on SkyWay NTTの 消える系ＳＮＳ
消える系ＳＮＳとは、記録が残らないＳＮＳを指します。 ◇ ソーシャルアカウント

ホームページ

インターネットを使ったコミニュケーションツールの多くはＨＴＴＰプロトコルを使っています。つまりホームページ、サイト、ＷＥＢなどです。

これらのコミニュケーションツールにはリアルタイムでのチャットや電子会議システム、ストリーミングなど、ダウンロード可能なコンテンツに分けられます。リアルタイムのコミニュケーションツールでも録画できる場合もありますが、その録画は著作物の複製にあたるので、著作者の権利を尊重してあげましょう。

表   7 .  表現のためのファイル形式の例
表現
◇バイナリ形式

任意のビット列

◇テキスト形式

文字コードのみ

ネイティブ 圧縮テキスト テキスト ◇ XML
文書 doc docx ◇html,html5 xhtml
表計算 xls xlsx ◇csv
図形 ◇MWF,EMF vml ◇ svg
チャート UML
地図 ◇G-XML,GML
数式 マセマティカ ◇TEX ◇ MathML
化学式 SMILES CML
楽譜 MIDI MML MusicXML
3D VRML X3D
画像 (image) jpg,png
音楽 (audio) wav,mp3,wma
ビデオ (video) mp4,mov
アプリ exe,dll vb,js,asp
表   8 .  文字コード
文字セット 符号の規格 備考
英数字 ASCII * 7bit 1963 * 制定 (ABC...abc...123!)
英数カナ字 JIS 8bit 1969 * 制定 (ｱｲｳ...abc...123!)
世界の文字 *
日本語、中国語、韓国語 SHIFT-JIS 16bit（2byte） 「あいふ…がぎぐ…」
UTF-8 16bit
絵文字 UNICODE * 32bit、符号位置による文字合成含む。
05.情報処理概論 07.情報処理概論 絵文字 test
表   9 .  文字 と文書
レベル 種類 例
文字 漢字、カタカナ、ひらがな、英字、 ギリシャ文字 ⠟⣠⠳⠠ 😀
数字、 3.15159
点字、記号、 絵文字 （エモティコン） ⠟⣠⠳⠠ 😀 EMOJIALL 3.15159
単語 犬 サル きじ
文章 文法、 言語 、用例 本日は、晴天なり。
図表 表、グラフ、楽譜、回路図
文書 横書き、縦書き、段組み、レイアウト、文字サイズ、本文、見出し、図表

祇園精舎の鐘の声、諸行無常の響きあり。

沙羅双樹の花の色、盛者必衰の理ことわりをあらはわす。

おごれる人も久しからず、 唯春の夜の夢のごとし。

たけき者も遂にはほろびぬ、 偏ひとえに風の前の塵に同じ。

図　沙羅双樹の花の色
書籍・雑誌 右綴じ、左綴じ、背表紙、版大きさ、用紙 小説、論文、電子書籍、タテコミ
※Windows10から搭載のUDデジタル教科書体をフォント指定しています。 ピクトグラムは難しい

文字で、感情や思想を伝えるのが飛躍的に早くなりました。 数字で、量を伝えるのが飛躍的に早くなりました。

ギリシャ文字

表   10 .  ギリシャ文字
日本語 html
Α(アルファ) 、α(アルファ) Α(Alpha) 、α(alpha) α崩壊
Β(ベータ) 、β(ベータ) Β(Beta) 、β(beta) β崩壊
Γ(ガンマ) 、γ(ガンマ) Γ(Gamma) 、γ(gamma) Γ関数 、γ崩壊 、活量係数γ
Δ(デルタ) 、δ(デルタ) （⊿(デルタ)） Δ(Delta) 、δ(delta) 差分Δ
Ε(イプシロン) 、ε(イプシロン) Ε(Epsilon) 、ε(epsilon)
[数学]微少量、ε-δ論法
[統計]誤差
[電磁気] 誘電率ε
Ζ(ゼータ、ツェータ) 、ζ(ゼータ、ツェータ) Ζ(Zeta) 、ζ(zeta)
[制御] ダンピング係数
[電気化学]ゼータ電位
Η(イータ) 、η(イータ) Η(Eta) 、η(eta)
[物理] 粘性係数
[電気] 電力効率・電源効率など
[電気化学]過電圧
Θ(シータ) 、θ(シータ) Θ(Theta) 、θ(theta)
[数学] 角度
Ι(イオタ) 、ι(イオタ) Ι(Theta) 、ι(theta)
Κ(カッパ) 、κ(カッパ) Κ(Kappa) 、κ(kappa)
[電気化学] 導電率κ
[数学] 曲率
[物理] 比熱比
Λ(ラムダ) 、λ(ラムダ) Λ(Lambda) 、λ(lambda)
[電気化学] 当量導電率
[数学] 固有値λ
[プログラミング] ラムダ式
[物理] 波長λ ・弾性率・熱伝導率
Μ(ミュー) 、μ(ミュー) Μ(Mu) 、μ(mu)
[全般] 単位の接頭辞（マイクロ）
[化学]化学ポテンシャルμ
[統計] 母平均
[物理] 透磁率・摩擦係数・ずり弾性率・粘性係数
Ν(ニュー) 、ν(ニュー) Ν(Nu) 、ν(nu)
[電磁気] 周波数（振動数）
[物理] 動粘性係数
Ξ(グザイ、クシー) 、ξ(グザイ、クシー) Ξ(Xi) 、ξ(xi)
Ο(オミクロン) 、ο(オミクロン) Ο(Pi) 、ο(pi) ο株
Π(パイ) 、π(パイ) Π(Pi) 、π(pi) 総乗（総積）Π 円周率π 、π軌道（結合）
Ρ(ロー) 、ρ(ロー) Ρ(Rho) 、ρ(rho) 抵抗率ρ
Σ(シグマ) 、σ(シグマ) Σ(Sigma) 、σ(sigma) 、ς
[化学] σ軌道（結合）
[数学] 数列の和、総和Σ
[統計] 母標準偏差
[電気] 導電率
[物理] 応力・ポアソン比
Τ(タウ) 、τ(タウ) Τ(Tau) 、τ(tau)
[電気] [制御] 時定数
Φ(ファイ) 、φ(ファイ) Φ(Phi) 、φ(phi) 位相角 φ
Χ(カイ) 、χ(カイ) Χ(Chi) 、χ(chi) χ2分布
Ψ(プサイ、プシー) 、ψ(プサイ、プシー) Ψ(Psi) 、ψ(psi) 波動関数(Wave Function) ψ
Ω(オメガ) 、ω(オメガ) Ω(Omega) 、ω(omega) 電気抵抗の単位 Ω (オーム) 、角周波数ω
*

物理量の記号は，ラテン文字またはギリシャ文字の 1文字を用い，イタリック体（斜体）で印刷する。その内容を さらに明確にしたいときには，上つき添字または下つき添字（あるいは両方）に固有の意味をもたせて用い，さらに 場合に応じて，記号の直後に説明をカッコに入れて加える。単位の記号はローマン体（立体）で印刷する。物理量の 記号にも単位の記号にも，終わりにはピリオドをつけない 2 ) 。

◇マルチメディア表現

著作物

表   11 .  著作物 *
分類
文芸 小説、脚本、 論文 、 講演 その他の言語の著作物。 編集の創作性がある場合、編集著作物として保護されます。新聞，雑誌，百科事典等。 講演 は、言語の著作物として保護され口述権が保護されます。 映画の著作物は、固定されることが求められますが、 講演は、口述のみで保護されます。
学術 地図 又は学術的な性質を有する図面、 図表、 模型その他の 図形の著作物
美術 絵画、版画、彫刻
写真 写真。 記録された画像は、著作物です。
建築 建築
音楽 楽譜、演奏。 記録された 音声は、著作物です。
舞踊又は無言劇の著作物 舞踊又は無言劇の著作物
映画 映画の著作物。 映画の著作物は、固定（記録）されることが求められます。 動画は、映画の著作物です。
プログラム プログラム の著作物
03.技術者倫理 01.化学英語Ⅱ 05.情報処理概論 参考文献 出版物

    （著作物の例示）

    第十条　この法律にいう著作物を例示すると、おおむね次のとおりである。

  • 一　小説、脚本、論文、講演その他の言語の著作物
  • 二　音楽の著作物
  • 三　舞踊又は無言劇の著作物
  • 四　絵画、版画、彫刻その他の美術の著作物
  • 五　建築の著作物
  • 六　地図 又は学術的な性質を有する図面、図表、模型その他の図形の著作物
  • 七　映画の著作物
  • 八　写真の著作物
  • 九　プログラムの著作物
著作権法より

思想又は感情は含まれていますか？ 単なるデータは、ダメです。 表現したモノです。考えているだけ、感じただけ、アイデアだけ、ではダメです。 創作的なので、模倣はだめです。もちろん 盗用は、もってのほかです。 工業製品等は、文芸、音楽、美術、学術ではないのでダメです。 工業製品等の知的財産権は、特許を申請して、政府の保護を受けます。

著作権は、 知的財産権 です。 著作権は、著作者に帰属します。 著作権のうち、著作財産権を、出版社に許諾することができます。 出版社が、 出版権 を設定した場合、出版社は、著作者を含む他の許諾に対する損害請求できます。 この場合、出版社による 排他的独占的著作財産権の占有となります。

表面技術協会の例

表現とファイル

表   12 .  メディアに記録できる情報
情報アナログ記録デジタル記録
文字 紙 FD,ASCII,UTF-8
画像 銀塩写真 jpg,png
音声 レコード(SP,LP)、磁気テープ mp3,wav
動画 映画フィルム、ビデオテープ(NTSC) mp4,mov
05. 情報処理概論

情報量

ディジタル化した情報量の最小単位をビット(bit)といいます。1byte（バイト）=8bit（ビット）です。

２００３年、ヒトのゲノム はすべて解読されました。ゲノムとは、生物の遺伝情報をDNAの配列。 4種類の塩基（A，T，G，C）が、人間なら全部で30億個。４種類は２ビットで表されるから、ヒトゲノムの情報量は約750メガバイト。 ブルーレイディスクに録画する１０分ドラマの動画にも満たない情報量です。 そこに約２０，０００の遺伝子が含まれています。 つまり約750メガバイトに、２０，０００行からなるプログラムが記述されているというのがヒトという生き物。

たとえば4bitで色を表現するとしたら、24=16通りに表現できます。

A T G C A T G C A T G C A T G C

でも2bitしかなかったら、22=4通りしか表現でません。

A T G C A T G C A T G C A T G C

ディジタル化とはそういうことです。

ＡＤ・ＤＡ変換の精度

図 127
©K.Tachibana
表   13 .  ＡＤ変換 ・ ＤＡ変換 の ビット深度と 分解能
フルスケール例/V ビット深度 ステップ 分解能/mV コメント
0-5V 8 256 19 初期のデジタルビデオ
0-10V 12 4096 2 初期のアナログ計測
0-20V 16 65536 0.3 ＣＤオーディオ
0-20V 24 16777216 0.0011 スマホ、ＰＣサウンド

アナログ信号をどのくらいの細かさでデジタル表現できるかを示す指標を分解能と言います 3 ) 。

ビット深度と解像度

白と黒との間には、無限の灰色がある。白黒をつけるということは、それを白か黒かの２色に限ってしまう。これが１ビットというデジタル情報の最小単位だ。仮に桁を増やして２ビットにする。白と黒との間に、薄い灰色と濃い灰色が加わり、４色になる。ビット深度を増やせば、色数も増える。４Ｋテレビの色のビット深度は、１０ビットだ。そのビット深度では、約１０億７３７４万色になる。それでも色数は有限で、無限ではない。４Ｋテレビと言っても、山際の夕焼け空の色に、不自然な境界が現れるのは、そのためだ。

◇ 画像の記録-image-

画像の記録

絵画 は、人が筆で、キャンパスに描きました。 １９世紀に カメラと写真フィルムが発明されると、写真フィルムに記録されました。

デジカメによって、半導体メモリにデジタル記録できるようになりました。

デジタル情報として、半導体メモリや磁気ディスクなどの媒体に記録された 画像はディスプレイや印刷物として出力されます。 デジタル情報を電気信号し、光エネルギーを制御するとも言えます。

表   14 .  画像 表現のための ファイル形式の例
形式 デバイス 圧縮 備考
bmp
jpg スマホ、 PC 不可逆圧縮 写真
png スマホ、 PC 可逆圧縮 イラスト、図形
05.情報処理概論 記録メディアの歴史
図   2 .  この赤いバラの花は、赤く見えますか？

ほかの人のディスプレイと色の鮮やかさが同じかどうか見較べてみましょう。 また色覚には個性があります。 色覚異常を持つ方も、できれば積極的にコミュニケーションをとってディスプレイと色についての議論を交わしましょう。 ビット深度と解像度が上がれば、より鮮明になります。

特許の出願の 画像形式も指定されています。

HTMLでホームページを作るとき、画像を使うと表現力が高まります。 論文でも 図 や 表 を使うのはそのためです。

図形

星型の座標は、座標（0.1）を１４４度５回座標回転した数列ですね。 表計算ソフトで計算するとあっと言う間です。 座標や回転、三角関数を忘れたときは、数学を思い出してください。

100 0 158 180 4 69 195 69 41 180

これで図形をイメージできる人はそれでいいのですが、 機械の助けを借りましょう。 機械が読み取れる、マシンリーダブルな形式にするのです。

図 星型

色彩

表   15 .  色
種類 RGB HSB /HSL CMYK
概念 加法混色 光源色 色相環 通信 減法混色 物体色（表面色、透過色）
蛍光色、金属光沢を除く
表現 Red ff0000
green 00ff00
blue 0000ff
 cyan 00ffff
magenta ff00ff
yellow ffff00
用途 ディスプレイ HTML、CSS、 SVG 通信 印刷 プリンター、カメラ
ジャンル エネルギー 情報 材料
図形 配色 12 無機工業化学 05 情報処理概論 色度座標 スペクトル

色彩 は 色度座標で表現されます。 ディスプレイ（エネルギー化学）によるカラー表現は光の３原色（RGB）による加法混色です（無機工業化学）。

ロゴの色は、#00664dです。 －パレット

遺伝的な色覚の多様性に配慮してバリヤフリーにするには、 色彩だけに頼らず、明暗を併用するなどの方法があります。

図 194
©K.Tachibana

ラスター形式とベクター形式

画像は大きくラスター形式とベクター形式に分類されます。 ラスター形式は、座標の明るさや色彩を指定する方法で、htmlではjpg形式やpng形式が使われます。一時期gif形式も使われましたが、パテントの問題で今はあまり使われていません。 画像は一般に情報量が多くなりがちなので、情報を圧縮します。 jpg形式は不可逆圧縮で、写真などの自然画像に、pngは可逆圧縮でイラストなどによく使います。

ラスターファイルの例

印刷原稿では、ラスター形式とベクター形式とをを組み合わせたeps形式を使います。特に文字フォントやロゴマークでラスター形式を使うと、文字の縁にギザギザ（ジャギー）が目立ちます。 eps形式を印刷にはpsプリンタを使います。

山形大学のロゴマークは aiファイル（illustrator CS2）、JPEGファイル、PNGファイルなどで提供されています。 ロゴマークの使用には申請などが必要なことがあります。

山形大学のスクールカラーは、ときわ色（プロセスカラー3色を使用し，C(シアン)＝100％，M(マゼンタ)＝60％及びY(イエロー)＝70％を割合とする色）です。 ２４ビットカラーでは、#00664dになります。

２４ビットカラーに透明度8ビット加えた ３２ビットカラーもよく使われます。 最近では１０ビットカラー（３０ビットカラー）とHDRを組みわせたデジタル表現が普及してきました。

svg形式

表   16 .  SVG （ XML）の要素と属性
要素 属性
svg viewBoxで、ワールド座標系を設定します。 width, heightで、html内のboxを設定しますが、 レスポンシブデザインの場合は、省略するのがおすすめです。
g
symbol
clipPath idを設定して、クリッピング領域を設定します。 ネストすることもできます。 その場合、fill-ruleを設定します。
polygon pointsでワールド座標系の座標を設定します。 fillでRGBを設定します。 styleで設定もできます。
05 情報処理概論 XML-SVG SVG 図形 グラフ

svg形式をhtmlに直接記述した場合

10月のプレミアムフライデーのロゴ

ラスター形式とベクター形式を組み合わせた場合

画像は最終的にラスライズされることになりますが、どの段階でタスタライズされるかということですね。

下の図は、ラスター形式(jpg)のライブカメラの映像にデータベース上のアノテーションデータを ベクター形式（svg）で組み合わせ、objectタグでhtmlに埋め込んだものです。

図 Fig. ３３０１の南東側から見たライブ映像

下の図は、手書きの画像をラスター形式(jpg)で読み込み、それに目盛りをベクター形式（svg）で組み合わせ、objectタグでhtmlに埋め込んだものです。

図 サイクリックボルタモグラム https://edu.yz.yamagata-u.ac.jp/Public/54299/Common/Chart/borutamo.asp

3次元コンピュータグラフィックス（3DCG）

3次元（スリーディメンショナル）の座標データから、2次元の座標データへ透視変換とかパースペクティブとか言います。

立体を構成する面に対して光を追跡する方法をレイトレーシングと言います。 VRMLなどの3Dデータをビューアでラスタ画像にします。

図 128
©
図 185
©K.Tachibana
jsmolを使って表現した粘土

VR(全天球画像)

アトラスVR 3-3301全天球画像

◇ 音声（音楽）の記録と配信－audio－

音声をデジタル記録したものは、単なる音声 データの場合と、音声情報の場合があります。 音楽、朗読、講演など、音声情報であり、著作物です。

表   17 .  楽器と楽譜の歴史
形式デバイス
🎵 リュート
チェンバロ
1750 ◇ 古典（バロック）
ギター
🎵 🚂 ピアノ
1820 ◇ ロマン
エレキギター
1973アナログ音源電子ピアノ
1981FM音源電子ピアノ *
1983MIDI * *
1988 カラオケＢＯＸ *
1989DTMミュージくんFM音源 *
1988
1991 mp3
1992 サウンドブラスター * 16bit 44.1KHzのPCM音源
1993 通信カラオケ *
1999 ＤＶＤオーディオ * 24bit 192KHzのPCM音源
2007VOCALOID2　初音ミク *
2015 MusicXML *
オタマトーン
12.無機工業化学 07.技術者倫理 記録メディアの歴史

蓄音機では、レコード盤に音声がアナログ記録されました。 テープレコーダでは、磁気テープに音声がアナログ記録されました。 これらの記録は、再生装置がなければ、再生できません。

記録メディア
表   18 .  🎵音声（音楽） 表現を 記録するのためのファイル形式の例
種別 形式 デバイス
非圧縮 wav PC
可逆圧縮 flac
wma PC
MQA *
非可逆圧縮 mp3 スマホ
05 情報処理概論 0728 記録メディアの歴史 各種音声形式 🎵 米沢高等工業学校校歌 🔊 スピーカー

音声や音楽は、記録されてはじめて、アップロード、ダウンロード、配信ができるようになります。

CD音質は、44.1kHz、16bit。最近のPCは、192kHz, 24bit * *

音楽や音声の表現ファイルには, wave,mp3形式などがある． 楽譜の表現ファイルには、midやmmlなどがあります。

デジタル記録された音楽・音声を再生するには、 ＤＡＣ など、デジタル情報をアナログ信号に変換する装置と、 電気信号を力学エネルギーに変えるスピーカーなどの出力装置が必要です。

表   19 .  🔊 スピーカー とヘッドホン ( 出力装置 )
項目圧電スピーカーダイナミックスピーカー
発音材料 圧電体 （ セラミックス） 磁性体（金属）
用途 スマホ、ＰＣ スマートスピーカー
歴史 昭和(戦後) 平成（スマホ）、昭和（イヤホン）
13 無機工業化学 q.99 13 情報処理概論 08 工業技術概論 🎵オーディオファイル形式 🎵米沢高等工業学校校歌 工業技術概論
🔊
図   7 .  【音声テスト】 米沢高等工業学校校歌

テレワークや電話に必須。

交流の大きさと周波数（正弦波の振幅）

波形と音色

図 正弦波（サイン波）
図 矩形波
図 のこぎり波（鋸歯状波）
https://www.bearaudiotool.com/jp/midi-to-mp3
https://noike.info/~kenzi/cgi-bin/smf2mp3/

テキストを音声に変換したり、音声を表現するXMLが生まれた。

音声合成マークアップ言語 (SSML)

ワイヤレス画像通信とインターネットラジオ

ワイヤレスメルチメディアとしてMiracast, Widi, Chromecastがある．

◇ 動画の記録-video-

ビデオ・動画
表   20 .  表現のためのファイル形式の例
形式デバイス
mp4 スマホ
mov スマホ
05.情報処理概論 記録メディアの歴史

動画配信などインターネットラジオ，Youtube

HTML5 になって、 video要素が追加されて、Youtubeなどのサービスを使わなくても,mp4形式やmov形式のビデオファイルをウェブサーバのみで動作配信ができるようになった。

図 電池の内部抵抗と電圧降下

SNSとブログ

インターネットサービスとマルチメディア

ウェブサービスとWWW

ブラウザーとURL

HTML言語とHTTP

HTMLとハイパーリンク

HTMLの歴史

1990年に文書記述言語SGMLから派生したHTMLによって文章と一緒に画像を表できるようになる．

1994年にはW3Cが発足されWWWに関するコンソーシアムが発足する． 2008年には，スマートフォンに対応したHTML5が間隔された．

HTTPとHTTPS

数式表現　MathML

実際にHTMLをメモ帳で書いてみよう

下記の例を参考に書いてみよう↓

演習：受講成果のホームページへの公開

？ 学んだ成果をＷｅｂサーバーで発信しよう

受講成果は，多くの方に活用してもらおう．学んだことを役立てよう！ やるんじゃなかったこと，失敗したことは，他の人が同じ間違いをしないという意味では，次の人の道しるべになるでしょう！

教育基本法の第七条にあるように，学習成果を広く社会に提供することにより、社会の発展に寄与することも目的としています．

（大学）
第七条　大学は、学術の中心として、高い教養と専門的能力を培うとともに、深く真理を探究して新たな知見を創造し、これらの成果を広く社会に提供することにより、社会の発展に寄与するものとする。
2　大学については、自主性、自律性その他の大学における教育及び研究の特性が尊重されなければならない。

引用元：教育基本法

本学の教育用公開ウェブサービスを使用して，受講成果をホームページとしてまとめます．

時間割コードは"adgmp"とします．この時間割コードは，複数科目の課題を同一フォルダーで共有するためのものです．主に，情報処理概論，無機工業化学， 化学実験Iでの科目で共有して使います．

課題へのエントリー

新型コロナウィルスの影響のため、オンライン授業のため、課題エントリーは不要です。

https://a.yamagata-u.ac.jp/amenity/Syllabus/LectureHistoryEntryQR.aspx

にアクセス

課題提出フォルダ(学術情報基盤センター実習室向け）

\\yzdn\dfs\share6\www\Public\adgmp\(入学年)\(ユーザー名）です．

例）\\yzdn\dfs\share6\www\Public\adgmp\2022\tab12345

ファイルエクスプローラ(エクスプローラ)を起動して，\\yzdn\dfs\share6\www\Public\adgmp\2022　にアクセスしてください．(参考

前半の授業での成果をまとめ公開してください．公開ウェブサイトの画像をWebClassに提出してください．

新型コロナウィルスのため、自宅からFTPSを使ってファイルをHTMLファイルを更新してください。詳細は 自宅からＦＴＰＳを使ってアップロードする場合 をご覧ください。

また、WindowsでのFTPSに対応したソフトのインストール方法は、こちらをご覧ください。 Mac版は、Googleなどの検索エンジンで検索して、インストールしてください。

相互リンク

全体の完成度を高めるために，ご近所さんとリンクを貼ろう

ご近所さんの作成したホームページにリンクを貼ってください．

受講生のウェブページへのリンク

受講生のウェブページへのリンクから，動作確認をしてください．

学生の受講成果の公開ページ一覧

2019年　受講生

2020年　受講生

関連

安全なウェブサイトの作り方, IPA, https://www.ipa.go.jp/security/vuln/websecurity.html

HTMLの文字化けの対処方法は，検索エンジンで調べてみよう. 漢字コードをhtmlファイルの <head>要素内にmetaタグを使って記述しましょう． 

<head>
   <meta charset="utf-8"/>
</head>

関連リンク

  1. ◇ 情報機器の購入からリサイクルまで～Chrome bookに至る歴史～
    • 情報機器の発展の 歴史 エニアックからChrome bookまで
    • Chrome book、スマートフォンとネットワーク
    • パソコン とその周辺機器
    • 情報機器の購入とリサイクル
  2. ◇ データ通信技術からスマートグリッドまで～ライフラインとインターネット～
    • IP電話、光電話、携帯電話、通信キャリア、回線、プロバイダ
    • 山形大学の無線ＬＡＮ
    • テレワークと遠隔授業
    • SIMフリー、データローミング

      0036　0033 0077 0088

    • 電力自由化とスマートメーター
    • プロバイダの選択と契約まで－未成年の契約－
    • 情報技術とコミュニケーション－電信、電話、メール、ＳＮＳ，電子会議システム、電子書籍、電子出版－
    • 関連講義：直交とウォルシュ関数、偶と奇関数, 数学＜桑名先生
  3. ◇ 検索エンジンから特許電子出願まで～ＤＮＡ配列は特許になるか？～
    • 検索エンジン
    • 知的財産権と情報
    • 特許検索、電子出願
    • 著作権－音楽、画像、肖像権－
    • 論文検索－情報と出版－論文代行はあり？
  4. ◇ 個人認証から電子決済まで～フィンテックとセキュリティ～
    • 個人特定ツールとしての電子メールと携帯電話番号
    • 住民基本台帳とマイナンバー
    • インターネットバンキング
    • 電子マネーとクレジットカード、ネットショッピング
    • フィンテック－資産管理アプリと家計簿アプリ－
    • 確定申告
    • 関連講義：行列と整数論, 数学＜桑名先生
  5. ◇ ホームページの仕組みと応用－受講成果を公開しよう－

    ホームページに公開するとき amenity

    • フィッシング詐欺、サイト証明
    • レンタルサーバーの使い方
    • ◇ マルチメディア表現 （音楽・写真・グラフィックス）
    • e-ラーニング、履修登録、出席管理
    • ブログ、ＳＮＳ
    • HTML
    • xml
  6. ◇ 化学式ワープロと分子軌道計算～量子力学もコンピュータで解こう～
    • 点群と空間群－結晶構造
    • 分子軌道とＨＯＭＯ、ＬＵＭＯ、電子密度
    • 反応経路探索
    • 関連講義：直交系と行列変換, 数学＜桑名先生
  7. テキストファイルを変換しよう～spread sheetとjava script～
    • クラウドとファイル
    • プログラム言語 としてのjava script
    • 開発プラットフォームとしてのhtml5
  8. 3D-CADを使った分子模型作成～計算結果を3Dプリンターへ～
    • ＣＡＤとＣＡＭ
    • ３Ｄ－ＣＡＤ
    • ラピッドプロトタイピング，３Ｄ－プリンタ
  9. 演算処理と数式処理～微分方程式はコンピュータで解こう～
    • 数式処理ソフト、 マセマティカ
    • 関連講義：微分方程式の組み立てと境界条件, 数学と化学数学＜桑名先生
  10. 汎用非線形有限要素法によるCAE～工業の現場で使われるシミュレーション～
  11. オペレーティングシステムとデータベース～ビッグデータと機械学習～ ～
  12. サプライチェーンマネジメントと電子マニフェスト～薬品や材料の調達・管理～
  13. スマホアプリを作ってみよう～Javaとセンサ～
  14. ワープロと機械翻訳～多国語長文ドキュメント作成～
    • ライセンスとアカウント
    • 機械翻訳
    • ドキュメンテーション
    • アウトラインプロセッサとしてのワープロ
  15. 受講ノートの仕上げと提出
QRコード
〒992-8510 山形県米沢市城南4丁目3-16
３号館（物質化学工学科棟） 3-3301
准教授 伊藤智博
0238-26-3573
Copyright ©1996- 2023 Databese Amenity Laboratory of Virtual Research Institute,  Yamagata University All Rights Reserved.