HOME
教育状況公表
令和3年10月19日
HOME
教育状況公表
令和3年10月19日
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 | データベースでデータの取得、保存、更新、削除などを行う言語です。 |
インターネットを使ったコミニュケーションツールの多くはＨＴＴＰプロトコルを使っています。つまりホームページ、サイト、ＷＥＢなどです。
これらのコミニュケーションツールにはリアルタイムでのチャットや電子会議システム、ストリーミングなど、ダウンロード可能なコンテンツに分けられます。リアルタイムのコミニュケーションツールでも録画できる場合もありますが、その録画は著作物の複製にあたるので、著作者の権利を尊重してあげましょう。
| 表現 | ||||
|---|---|---|---|---|
| ◇バイナリ形式
任意のビット列 |
◇テキスト形式
文字コードのみ |
|||
| ネイティブ | 圧縮テキスト | テキスト | ＸＭＬ | |
| 文書 | 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 | |||
| レベル | 種類 | 例 | ||
|---|---|---|---|---|
| 文字 | 漢字、カタカナ、ひらがな、英字、数字、ギリシャ文字、点字、記号、 絵文字 | ⠟⣠⠳⠠ 😀 EMOJIALL | ||
| 単語 | 犬 サル きじ | |||
| 文章 | 文法、 言語 、用例 | 本日は、晴天なり。 | ||
| 文書 | 横書き、縦書き、段組み、レイアウト、文字サイズ、本文、見出し、図表 |
祇園精舎の鐘の声、諸行無常の響きあり。 沙羅双樹の花の色、盛者必衰の理をあらはす。 おごれる人も久しからず、 唯春の夜の夢のごとし。 たけき者も遂にはほろびぬ、 偏に風の前の塵に同じ。 
|
||
| 書籍・雑誌 | 右綴じ、左綴じ、背表紙、版大きさ、用紙 | 小説、論文、電子書籍、タテコミ |
ディジタル化した情報量の最小単位をビット(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データをビューアでラスタ画像にします。
音楽表現ファイル, 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\2020\tab12345
ファイルエクスプローラ(エクスプローラ)を起動して，\\yzdn\dfs\share6\www\Public\adgmp\2020 にアクセスしてください．(参考
前半の授業での成果をまとめ公開してください．公開ウェブサイトの画像を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>
SSLの仕組み
