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

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

講義スライド

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

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

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

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

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

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

組織内にサーバを使うかそれともレンタルサーバを借りるか? 転送量(通信料)や電気代がかかる。 レンタルサーバの費用は主に転送量に依存する。 ファイルの移動は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 データベースでデータの取得、保存、更新、削除などを行う言語です。
情報処理概論 卒業研究

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

文字と文書
レベル 種類
文字 漢字、カタカナ、ひらがな、英字、数字、ギリシャ文字、記号
単語 犬 サル きじ
文章 文法、言語、用例 本日は、晴天なり。
文書 横書き、縦書き、段組み、レイアウト、文字サイズ、本文、見出し、図表

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

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

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

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

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

マルチメディア表現

情報量

ディジタル化した情報量の最小単位をビット(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

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


静止画像

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

図 この赤いバラの花は、赤く見えますか?

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


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

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 ロゴマーク取扱規程 商標登録 ロゴマークについて
8月のプレミアムフライデーのロゴ

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

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

下の図は、ラスター形式(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全天球画像

音楽・音声

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

米沢高等工業学校校歌

音の大きさと周波数

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がある.

動画配信などインターネットラジオ,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\2020\tab12345

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

前半の授業での成果をまとめ公開してください.公開ウェブサイトの画像を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

SSLの仕組み

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

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

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