HOME 教育状況公表 令和4年1月23日
情報処理概論 戻る 進む 講義スライド
情報処理概論 WebClass files syllabus 52210 C1 情報機器の準備 ウェブ講義の接続
伊藤智博(ITO Tomohiro) 、神保雄次(JINBO Yuji)

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

講義スライド

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

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

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

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

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

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

  1 サーバーの種類
種類 サービス プロトコルなど アプリなど 運用例など
メールサーバー メール ssl,pop,imap YZメール
インターネットサーバー ホームページ https,http Microsoft IIS 教育用公開ウェブサービス
04, 05.情報処理概論

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

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

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

Service Unavailable
HTTP Error 503. The service is unavailable.

関連情報


Webアプリに使われる言語
言語説明
クライアントサイド html, css, javascrpt クライアントサイド言語、フロントエンド言語
サーバーサイド .NET VBscript(asp) JavaScript(Node.js) Ruby Python PHP サーバーサイド言語、バックエンド言語といいます
データベース SQL データベースでデータの取得、保存、更新、削除などを行う言語です。
情報処理概論 卒業研究

  2 メディアの歴史
1887
項目 注釈
郵便 文字 紙 配達
電信 文字 無線 通信
19世紀 新聞 * * 文字 配達
電話 * 音声 アナログ 通信
蓄音機 * 音声 のアナログ 記録
1880 写真フィルム 画像 のアナログ 記録
ラジオ 音声 のアナログ 放送
1953 テレビ 動画のアナログ 放送
1956 VTR 動画のアナログ 記録
1960 カラーテレビ 動画のアナログ 放送
1971 FDD * 文字 のデジタル記録
1977 LD 動画 のデジタル記録
1979 電子辞書 * 文字 のデジタル記録
1982 CD 音声 のデジタル記録
1990~ デジタルカメラ * 画像 のデジタル記録
1982 MD 音声 のデジタル記録
1995~ デジタルビデオ * 動画 のデジタル記録
1996 DVD * 動画 のデジタル記録
1995 HTML2.0 文字 のデジタル配信
1999 HDD録画機 動画 のデジタル記録
1999 Napstar 音声の配信
2000 Google検索 文字と画像の配信
2005 YouTube 動画の配信
2011 デジタルテレビ 動画のアナログ 放送終了
12.無機工業化学 05.情報処理概論 メディアに記録できる情報

文字と文書の記録

SNSとデジタルコミニュケーションツール

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

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

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

任意のビット列

テキスト形式

文字コードのみ

ネイティブ 圧縮テキスト テキスト XML
文書 doc docx html,html5 xhtml
表計算 xls xlsx csv
図形 MWF,EMF vml svg
数式 マセマティカ TEX MathML
化学式 SMILES CML
楽譜 MIDI MML MusicXML
3D VRML X3D
画像 jpg,png
音楽 wav,mp3,wma
ビデオ mp4,mov
05.情報処理概論 07.情報処理概論

  3 文字コード
文字セット 符号の規格 備考
英数字 ASCII * 7bit 1963 * 制定 (ABC...abc...123!)
英数カナ字 JIS 8bit 1969 * 制定 (アイウ...abc...123!)
世界の文字 *
日本語、中国語、韓国語 SHIFT-JIS 16bit(2byte) 「あいふ…がぎぐ…」
UTF-8 16bit
絵文字 UNICODE * 32bit、符号位置による文字合成含む。
05.情報処理概論 07.情報処理概論 絵文字
  4 文字 と文書
レベル 種類
文字 漢字、カタカナ、ひらがな、英字、ギリシャ文字 ⠟⣠⠳⠠ 😀
数字 3.15159
点字、記号、 絵文字エモティコン ⠟⣠⠳⠠ 😀 EMOJIALL 3.15159
単語 犬 サル きじ
文章 文法、 言語 、用例 本日は、晴天なり。
図表 表、グラフ、楽譜、回路図
文書 横書き、縦書き、段組み、レイアウト、文字サイズ、本文、見出し、図表

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

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

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

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

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

マルチメディア表現


著作物

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

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

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


表現とファイル

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

情報量

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

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

たとえば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

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


AD・DA変換の精度

127
量子化ノイズ
©K.Tachibana
👁‍🗨 https://edu.yz.yamagata-u.ac.jp/Public/56307/_14/Quantization.asp

ビット深度と解像度

👁‍🗨 https://edu.yz.yamagata-u.ac.jp/Public/52210/_05/QuantizationImage.asp

  7 AD変換 DA変換 ビット深度分解能
範囲例/V ビット深度 ステップ 分解能/mV コメント
0-5V 8 256 19 初期のデジタルビデオ
0-10V 12 4096 2 初期のアナログ計測
0-20V 16 65536 0.3 CDオーディオ
0-20V 24 16777216 0.0011 スマホ、PCサウンド
13.情報処理概論 1217 1210

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


画像の記録-image-

画像の記録

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

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

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

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

隣の人のディスプレイと色の鮮やかさが同じかどうか見てみよう。


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

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


図形

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

100 0 158 180 4 69 195 69 41 180

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

星型

色彩

種類 RGB HSB /HSL CMYK
表現 Red ff0000
green 00ff00
blue 0000ff
cyan 00ffff
magenta ff00ff
yellow ffff00
概念 光源色 通信 物体色(表面色、透過色)
蛍光色、金属光沢を除く
用途 ディスプレイ 通信 印刷、プリンター、カメラ
ジャンル エネルギー 情報 材料

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

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

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


R G B 加法混色
12.無機工業化学

C M Y K 減法混色
12.無機工業化学

色相環
12.無機工業化学
https://www.i-ryo.com/entry/2019/02/24/211711

194
黒体放射
©K.Tachibana
https://edu.yz.yamagata-u.ac.jp/Public/56307/_01/BlackBodyRadiation.asp

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

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

ラスターファイルの例

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

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

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

24ビットカラーに透明度8ビット加えた 32ビットカラーもよく使われます。 最近では10ビットカラー(30ビットカラー)とHDRを組みわせたデジタル表現が普及してきました。

山形大学 のロゴマーク
VIDM ロゴマーク取扱規程 商標登録 ロゴマークについて
1月のプレミアムフライデーのロゴ

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

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

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

Fig. 3301の南東側から見たライブ映像

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

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

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

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

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

128
立方体(canvas)
©
https://edu.yz.yamagata-u.ac.jp/Public/54299/Common/Drawing/canvas.asp
185
粘土シート
©K.Tachibana
https://edu.yz.yamagata-u.ac.jp/Public/54299/Common/3D/3D.asp
jsmolを使って表現した粘土

VR(全天球画像)

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

音声の記録


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

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

  10 表現のためのファイル形式の例
形式デバイス
mp3 スマホ
wav PC
wma PC
05.情報処理概論 記録メディアの歴史 各種音声形式

音楽表現ファイル, wave, midi, mp3形式などがある.

米沢高等工業学校校歌

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

  11 スピーカー ( 出力装置 )
項目圧電スピーカーダイナミックスピーカー
発音材料 圧電体 セラミックス 磁性体(金属)
用途 スマホ、PC スマートスピーカー
歴史 昭和(戦後) 平成(スマホ)、昭和(イヤホン)
13.無機工業化学 13.情報処理概論

音の大きさと周波数

84
交流の大きさと周波数(正弦波の振幅)
©K. Tachibana
https://edu.yz.yamagata-u.ac.jp/Public/56307/_14/Amplitude.asp

波形と音色

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

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

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

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

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


動画の記録-video-

ビデオ・動画
  12 表現のためのファイル形式の例
形式デバイス
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をメモ帳で書いてみよう

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

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

✏ 課外報告書 Web Class

学んだ成果をWebサーバーで発信しよう

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

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

課題へのエントリー

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

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

にアクセス

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

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

例)\\yzdn\dfs\share6\www\Public\adgmp\2021\tab12345

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

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

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

また、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>
    

関連リンク


QRコード
https://edu.yz.yamagata-u.ac.jp/Public/52210/52210_05.asp


このマークはこのページで 著作権が明示されない部分について付けられたものです。

山形大学 データベースアメニティ研究所
〒992-8510 山形県米沢市城南4丁目3-16
3号館(物質化学工学科棟) 3-3301
准教授 伊藤智博
0238-26-3573
http://amenity.yz.yamagata-u.ac.jp/

Copyright ©1996- 2022 Databese Amenity Laboratory of Virtual Research Institute,  Yamagata University All Rights Reserved.