HOME
教育状況公表
令和4年1月23日
HOME
教育状況公表
令和4年1月23日
files
syllabus
52210
C1
情報機器の準備
ウェブ講義の接続
ホームページの仕組みと応用 －受講成果を公開しよう－
対面教育の価値は、何か？サイバー大学と放送大学の違いは？ 大学と高校までの違いはなにか？
E-ラーニングでできる教育は、ネット配信に任せればよい。 対面教育の価値、サイバー大学の価値、放送大学の価値を見直そう
| 分類 | 例 | ||
|---|---|---|---|
| イメージ | 画像、アニメ、絵画、書（フォント） | ||
| 音響 | 音楽、音声、自然音 | ||
| 文字 | 文字、文章、 文書、詩、レイアウト | ||
| 身体 | 表情、身振り、ダンス | ||
| 造形 | デザイン、モデリング | ||
| 空間 | 3D、仮想現実 | ||
| 触覚 | 手触り、風合い、点字 | ||
| 味覚、嗅覚 | 味、香り |
| 種類 | サービス | プロトコルなど | アプリなど | 運用例など | |
|---|---|---|---|---|---|
| メールサーバー | メール | ssl,pop,imap | YZメール | ||
| インターネットサーバー | ホームページ | https,http | Microsoft IIS | 教育用公開ウェブサービス |
組織内にサーバを使うかそれともレンタルサーバを借りるか？ 転送量（通信料）や電気代がかかる。 レンタルサーバの費用は主に転送量に依存する。 ファイルの移動はftpを使うことが多い。
そっくりさんの偽サイトを作ってクレジット番号やパスワードを盗みとるようなことは犯罪行為、 技術者倫理違反！ 使うときはそのサイトはホンモノか疑おう。 また自分で偽サイトを作ることは絶対にやめましょう！
ECサイトやネットショッピングのサイトはレンタルサーバを借りても作れる。 しかし、消費者からのアクセスが殺到するとサーバを守るために、下記に示すような「HTTP Error 503」を表示することがある。 レンタルサーバは、他の利用者と回線やサーバリソースを共有していることが多いため、利用者の公平性の観点からレンタルサーバ1台あたりのアクセス数に制限が設けているからである。 利用料金の高いサーバは、レンタルサーバのアクセス数や通信帯域を高めに設定されている。 しかし、数量限定の商品やコンサートチケットなど希少価値の高い商品の発売時刻前後では、利用者のアクセス数が一時的に増大することがある。 ビジネスとして、利用料金の高いレンタルサーバを契約することでランニングコストが増大し、利益を損なう可能性もある。 また、希少価値の高い商品にアクセスが殺到した場合、アクセスの成功率は、1%以下であることもしばし見うけられる。
Service Unavailable
HTTP Error 503. The service is unavailable.
| 言語 | 説明 | ||
|---|---|---|---|
| クライアントサイド | ◇ html, css, javascrpt | クライアントサイド言語、フロントエンド言語 | |
| サーバーサイド | .NET VBscript(asp) JavaScript（Node.js） Ruby Python PHP | サーバーサイド言語、バックエンド言語といいます | |
| データベース | SQL | データベースでデータの取得、保存、更新、削除などを行う言語です。 |
| 項目 | 注釈 | |
|---|---|---|
| 郵便 | 文字 紙 配達 | |
| 電信 | 文字 無線 通信 | |
| １９世紀 新聞 * * | 文字 配達 | |
| 電話 * | 音声 アナログ 通信 | |
| 蓄音機 * | 音声 のアナログ 記録 | |
| 1880 写真フィルム | 画像 のアナログ 記録 | |
| ラジオ | 音声 のアナログ 放送 | |
| 1953 テレビ | 動画のアナログ 放送 | |
| 1956 ＶＴＲ | 動画のアナログ 記録 | |
| 1960 カラーテレビ | 動画のアナログ 放送 | |
| 1971 ＦＤＤ * | 文字 のデジタル記録 | |
| 1977 ＬＤ | 動画 のデジタル記録 | |
| 1979 電子辞書 * | 文字 のデジタル記録 | |
| 1982 ＣＤ | 音声 のデジタル記録 | |
| 1990～ デジタルカメラ * | 画像 のデジタル記録 | |
| 1982 ＭＤ | 音声 のデジタル記録 | |
| 1995～ デジタルビデオ * | 動画 のデジタル記録 | |
| 1996 ＤＶＤ * | 動画 のデジタル記録 | |
| 1995 ＨＴＭＬ２．０ | 文字 のデジタル配信 | |
| 1999 ＨＤＤ録画機 | 動画 のデジタル記録 | |
| 1999 Napstar | 音声の配信 | |
| 2000 Google検索 | 文字と画像の配信 | |
| 2005 YouTube | 動画の配信 | |
| 2011 デジタルテレビ | 動画のアナログ 放送終了 | |
インターネットを使ったコミニュケーションツールの多くはＨＴＴＰプロトコルを使っています。つまりホームページ、サイト、ＷＥＢなどです。
これらのコミニュケーションツールにはリアルタイムでのチャットや電子会議システム、ストリーミングなど、ダウンロード可能なコンテンツに分けられます。リアルタイムのコミニュケーションツールでも録画できる場合もありますが、その録画は著作物の複製にあたるので、著作者の権利を尊重してあげましょう。
| 表現 | ||||
|---|---|---|---|---|
| ◇バイナリ形式
任意のビット列 |
◇テキスト形式
文字コードのみ |
|||
| ネイティブ | 圧縮テキスト | テキスト | ＸＭＬ | |
| 文書 | 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 | |||
| 文字セット | 符号の規格 | 備考 | ||
|---|---|---|---|---|
| 英数字 | ASCII * | 7bit 1963 * 制定 (ABC...abc...123!) | ||
| 英数カナ字 | JIS |
8bit
1969
*
制定
(ｱｲｳ...abc...123!) 世界の文字 * |
||
| 日本語、中国語、韓国語 | SHIFT-JIS | 16bit（2byte） 「あいふ…がぎぐ…」 | ||
| UTF-8 | 16bit | |||
| 絵文字 | UNICODE * | 32bit、符号位置による文字合成含む。 |
| レベル | 種類 | 例 | ||
|---|---|---|---|---|
| 文字 | 漢字、カタカナ、ひらがな、英字、ギリシャ文字 | ⠟⣠⠳⠠ 😀 | ||
| 数字、 | 3.15159 | |||
| 点字、記号、 絵文字 （エモティコン） | ⠟⣠⠳⠠ 😀 EMOJIALL 3.15159 | |||
| 単語 | 犬 サル きじ | |||
| 文章 | 文法、 言語 、用例 | 本日は、晴天なり。 | ||
| 図表 | 表、グラフ、楽譜、回路図 | |||
| 文書 | 横書き、縦書き、段組み、レイアウト、文字サイズ、本文、見出し、図表 |
祇園精舎の鐘の声、諸行無常の響きあり。 沙羅双樹の花の色、盛者必衰の理をあらはす。 おごれる人も久しからず、 唯春の夜の夢のごとし。 たけき者も遂にはほろびぬ、 偏に風の前の塵に同じ。 
|
||
| 書籍・雑誌 | 右綴じ、左綴じ、背表紙、版大きさ、用紙 | 小説、論文、電子書籍、タテコミ |
| 分類 | |
|---|---|
| 文芸 | 小説、脚本、 論文 、講演その他の言語の著作物。 編集の創作性がある場合、編集著作物として保護されます。新聞，雑誌，百科事典等。 講演は、言語の著作物として保護され口述権が保護されます。 映画の著作物は、固定されることが求められますが、講演は、口述のみで保護されます。 |
| 学術 | 地図又は学術的な性質を有する図面、 図表、 模型その他の 図形の著作物 |
| 美術 | 絵画、版画、彫刻 |
| 写真 | 写真 |
| 建築 | 建築 |
| 音楽 | 楽譜、演奏 |
| 舞踊又は無言劇の著作物 | |
| 映画 | 映画の著作物。 映画の著作物は、固定（記録）されることが求められます |
| プログラム | プログラムの著作物 |
思想又は感情は含まれていますか？ 単なるデータは、ダメです。 表現したモノです。考えているだけ、感じただけ、アイデアだけ、ではダメです。 創作的なので、模倣はだめです。もちろん盗用は、もってのほかです。 工業製品等は、文芸、音楽、美術、学術ではないのでダメです。
著作権は、 知的財産権 です。 著作権は、著作者に帰属します。 著作権のうち、著作財産権を、出版社に許諾することができます。 出版社が、 出版権 を設定した場合、出版社は、著作者を含む他の許諾に対する損害請求できます。 この場合、出版社による 排他的独占的著作財産権の占有となります。
| 情報 | アナログ記録 | デジタル記録 | |
|---|---|---|---|
| 文字 | 紙 | FD,ASCII,UTF-8 | |
| 画像 | 銀塩写真 | jpg,png | |
| 音声 | レコード(SP,LP)、磁気テープ | mp3,wav | |
| 動画 | 映画フィルム、ビデオテープ(NTSC) | mp4,mov |
ディジタル化した情報量の最小単位をビット(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ディジタル化とはそういうことです。
白と黒との間には、無限の灰色がある。白黒をつけるということは、それを白か黒かの２色に限ってしまう。これが１ビットというデジタル情報の最小単位だ。仮に桁を増やして２ビットにする。白と黒との間に、薄い灰色と濃い灰色が加わり、４色になる。ビット深度を増やせば、色数も増える。４Ｋテレビの色のビット深度は、１０ビットだ。そのビット深度では、約１０億７３７４万色になる。それでも色数は有限で、無限ではない。４Ｋテレビと言っても、山際の夕焼け空の色に、不自然な境界が現れるのは、そのためだ。
絵画は、人が筆で、キャンパスに描きました。 カメラと写真フィルムが発明されると、写真フィルムに記録されました。
デジカメによって、半導体メモリにデジタル記録できるようになりました。
デジタル情報として、半導体メモリや磁気ディスクなどの媒体に記録された 画像はディスプレイや印刷物として出力されます。 デジタル情報を電気信号し、光エネルギーを制御するとも言えます。
隣の人のディスプレイと色の鮮やかさが同じかどうか見てみよう。
HTMLでホームページを作るとき、画像を使うと表現力が高まります。 論文でも 図 や 表 を使うのはそのためです。
星型の座標は、座標（0.1）を１４４度５回座標回転した数列ですね。 表計算ソフトで計算するとあっと言う間です。 座標や回転、三角関数を忘れたときは、数学を思い出してください。
これで図形をイメージできる人はそれでいいのですが、 機械の助けを借りましょう。 機械が読み取れる、マシンリーダブルな形式にするのです。
| 種類 | RGB | HSB /HSL | CMYK |
|---|---|---|---|
| 表現 |
Red
ff0000 green 00ff00 blue 0000ff |
cyan
00ffff magenta ff00ff yellow ffff00 |
|
| 概念 | 光源色 | 通信 | 物体色（表面色、透過色）
蛍光色、金属光沢を除く |
| 用途 | ディスプレイ | 通信 | 印刷、プリンター、カメラ |
| ジャンル | エネルギー | 情報 | 材料 |
色彩 は 色度座標で表現されます。 ディスプレイ（エネルギー化学）によるカラー表現は光の３原色（RGB）による加法混色です（無機工業化学）。
遺伝的な色覚の多様性に配慮してバリヤフリーにするには、 色彩だけに頼らず、明暗を併用するなどの方法があります。
画像は大きくラスター形式とベクター形式に分類されます。 ラスター形式は、座標の明るさや色彩を指定する方法で、htmlではjpg形式やpng形式が使われます。一時期gif形式も使われましたが、パテントの問題で今はあまり使われていません。 画像は一般に情報量が多くなりがちなので、情報を圧縮します。 jpg形式は不可逆圧縮で、写真などの自然画像に、pngは可逆圧縮でイラストなどによく使います。
印刷原稿では、ラスター形式とベクター形式とをを組み合わせたeps形式を使います。特に文字フォントやロゴマークでラスター形式を使うと、文字の縁にギザギザ（ジャギー）が目立ちます。 eps形式を印刷にはpsプリンタを使います。
山形大学のロゴマークは aiファイル（illustrator CS2）、JPEGファイル、PNGファイルなどで提供されています。 ロゴマークの使用には申請などが必要なことがあります。
山形大学のスクールカラーは、ときわ色（プロセスカラー3色を使用し，C(シアン)＝100％，M(マゼンタ)＝60％及びY(イエロー)＝70％を割合とする色）です。 ２４ビットカラーでは、#00664dになります。
２４ビットカラーに透明度8ビット加えた ３２ビットカラーもよく使われます。 最近では１０ビットカラー（３０ビットカラー）とHDRを組みわせたデジタル表現が普及してきました。
画像は最終的にラスライズされることになりますが、どの段階でタスタライズされるかということですね。
下の図は、ラスター形式(jpg)のライブカメラの映像にデータベース上のアノテーションデータを ベクター形式（svg）で組み合わせ、objectタグでhtmlに埋め込んだものです。
下の図は、手書きの画像をラスター形式(jpg)で読み込み、それに目盛りをベクター形式（svg）で組み合わせ、objectタグでhtmlに埋め込んだものです。
3次元（スリーディメンショナル）の座標データから、2次元の座標データへ透視変換とかパースペクティブとか言います。
立体を構成する面に対して光を追跡する方法をレイトレーシングと言います。 VRMLなどの3Dデータをビューアでラスタ画像にします。
| 形式 | デバイス | ||
|---|---|---|---|
| ギター | |||
| ピアノ | |||
| エレキギター | |||
| 1973 | アナログ音源電子ピアノ | ||
| 1981 | FM音源電子ピアノ * | ||
| 1983 | MIDI * * | ||
| 1988 | カラオケＢＯＸ * | ||
| 1989 | DTMミュージくんFM音源 * | ||
| 1988 | |||
| 1991 | mp3 | ||
| 1992 | サウンドブラスター * 16bit 44.1KHzのPCM音源 | ||
| 1993 | 通信カラオケ * | ||
| 1999 | ＤＶＤオーディオ * 24bit 192KHzのPCM音源 | ||
| 2007 | VOCALOID2 初音ミク * | ||
| 2015 | MusicXML * | ||
| オタマトーン | |||
蓄音機では、レコード盤に音声がアナログ記録されました。 テープレコーダでは、磁気テープに音声がアナログ記録されました。 これらの記録は、再生装置がなければ、再生できません。
音楽表現ファイル, wave, midi, mp3形式などがある．
音楽・音声を再生するにはスピーカーなどの出力装置が必要です。 記録されたデジタル情報を、 ＤＡ変換 して、電気信号に変えて、電気エネルギーとし、それを力学エネルギーに変えます。
| 項目 | 圧電スピーカー | ダイナミックスピーカー | ||
|---|---|---|---|---|
| 発音材料 | 圧電体 （ セラミックス） | 磁性体（金属） | ||
| 用途 | スマホ、ＰＣ | スマートスピーカー | ||
| 歴史 | 昭和(戦後) | 平成（スマホ）、昭和（イヤホン） |
テキストを音声に変換したり、音声を表現するXMLが生まれた。
ワイヤレスメルチメディアとしてMiracast, Widi, Chromecastがある．
動画配信などインターネットラジオ，Youtube
HTML5 になって、 video要素が追加されて、Youtubeなどのサービスを使わなくても,mp4形式やmov形式のビデオファイルをウェブサーバのみで動作配信ができるようになった。
ウェブサービスとWWW
ブラウザーとURL
HTMLとハイパーリンク
1990年に文書記述言語SGMLから派生したHTMLによって文章と一緒に画像を表できるようになる．
1994年にはW3Cが発足されWWWに関するコンソーシアムが発足する． 2008年には，スマートフォンに対応したHTML5が間隔された．
HTTPとHTTPS
数式表現 MathML
下記の例を参考に書いてみよう↓
本学の教育用公開ウェブサービスを使用して，受講成果をホームページとしてまとめます．
時間割コードは"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ファイルを更新してください。詳細は 自宅からＦＴＰＳを使ってアップロードする場合 をご覧ください。
また、WindowsでのFTPSに対応したソフトのインストール方法は、こちらをご覧ください。 Mac版は、Googleなどの検索エンジンで検索して、インストールしてください。
全体の完成度を高めるために，ご近所さんとリンクを貼ろう
ご近所さんの作成したホームページにリンクを貼ってください．
受講生のウェブページへのリンクから，動作確認をしてください．
安全なウェブサイトの作り方, IPA, https://www.ipa.go.jp/security/vuln/websecurity.html
HTMLの文字化けの対処方法は，検索エンジンで調べてみよう. 漢字コードをhtmlファイルの <head>要素内にmetaタグを使って記述しましょう．
<head>
<meta charset="utf-8"/>
</head>
