デジタルトランスフォーメーション(DX)やデジタル教育を進める上で，ホームページを使いこなせるようになろう．
ホームページなんて，書いたことがない．HTML言語なんで，聞いたこともない．そんな悩みを持つ学生は少なくないでしょう．
この授業は，その学修過程を大切にしています．授業での気づきや，改善点，試行錯誤の過程も含めて，ホームページで公開して，社会の役に立てよう！
国立大学法人は，税金が使われています．教育基本法の第七条 や 学校教育法の第八十三条にもあるように， 「その成果を広く社会に提供することにより、社会の発展に寄与する」ためにも，受講成果を公開しよう．
第七条 大学は、学術の中心として、高い教養と専門的能力を培うとともに、深く真理を探究して新たな知見を創造し、これらの成果を広く社会に提供することにより、社会の発展に寄与するものとする。 2 大学については、自主性、自律性その他の大学における教育及び研究の特性が尊重されなければならない。 出典：教育基本法 第七条
第八十三条 大学は、学術の中心として、広く知識を授けるとともに、深く専門の学芸を教授研究し、知的、道徳的及び応用的能力を展開させることを目的とする。 ② 大学は、その目的を実現するための教育研究を行い、その成果を広く社会に提供することにより、社会の発展に寄与するものとする。 出典: 学校教育法 第八十三条
社会に役立てようと在学中に書いた受講成果の公開はいつまでにしよう．サーバの補助記憶装置の容量も有限だしなぁ．でも，汗水たらして作成したウェブページが卒業と同時に消えるのはもったいない．学生間のリンクも切れるなぁ？
学生の成果物のウェブコンテンツは，この講義では入学してから13年以上経過したら，削除されることがあります．成果物は，各自でバックアップを保管するようにしてください． 13年間の保存期間を定めた理由は，JABEEなどにより，卒業後の学修成果物の保管義務が5年であることから，卒業後5年経過すれば削除してよい．しかし，下記の2点を勘案して，最大の在学期間の8年に学修成果物の保管の5年を加えた13年と定めた．
※成果物の公開は，情報処理概論の受講成果のみならず，他の教育活動における学修成果を卒業日まで行ってもよい．
対面教育の価値は、何か？サイバー大学と放送大学の違いは？ 大学と高校までの違いはなにか？
E-ラーニングでできる教育は、ネット配信に任せればよい。 対面教育の価値、サイバー大学の価値、放送大学の価値を見直そう
情報は、人間に意思決定させ、行動を起こさせる何かです。 人間が行動を起こさなければ、それはただの データです。 情報には、人間が直接 認識できる情報と、 電子的方式、磁気的方式など人間が近くによって認識できない情報があります。 また、アナログ情報とデジタル情報があります。 記録 されているものと、そうでないものがあります。
組織内にサーバを使うかそれともレンタルサーバを借りるか？ 転送量（通信料）や電気代がかかる。 レンタルサーバの費用は主に転送量に依存する。 ファイルの移動はftpを使うことが多い。
そっくりさんの偽サイトを作ってクレジット番号やパスワードを盗みとるようなことは犯罪行為、 技術者倫理違反！ 使うときはそのサイトはホンモノか疑おう。 また自分で偽サイトを作ることは絶対にやめましょう！
ECサイトやネットショッピングのサイトはレンタルサーバを借りても作れる。 しかし、消費者からのアクセスが殺到するとサーバを守るために、下記に示すような「HTTP Error 503」を表示することがある。 レンタルサーバは、他の利用者と回線やサーバリソースを共有していることが多いため、利用者の公平性の観点からレンタルサーバ1台あたりのアクセス数に制限が設けているからである。 利用料金の高いサーバは、レンタルサーバのアクセス数や通信帯域を高めに設定されている。 しかし、数量限定の商品やコンサートチケットなど希少価値の高い商品の発売時刻前後では、利用者のアクセス数が一時的に増大することがある。 ビジネスとして、利用料金の高いレンタルサーバを契約することでランニングコストが増大し、利益を損なう可能性もある。 また、希少価値の高い商品にアクセスが殺到した場合、アクセスの成功率は、1%以下であることもしばし見うけられる。
Service Unavailable HTTP Error 503. The service is unavailable.
Webブラウザ は、 ネットの 情報を閲覧する インストールアプリです 1 ) 。 ディスプレイに 文字を表示するだけでなく、画像をレンダリングしたり、 スピーカーを使って 動画や 音声 を再生したりします。 また、カメラやマイクを使って、 動画や 音声 を送信します。
アプリ には、 オペレーティングシステム (OS) 上で動く、インストールアプリと、 Webブラウザ 上で動く Webアプリがあります。
1993年に Webブラウザモザイク（Mosaic) から変遷を経て、ネットを普及させました（ 第4次産業革命 ）。 1995年にIEが登場。 1998年ごろは、IEとNetScape Navigatorがバトル。その後、IEが寡占状態。 2008年にGoogle がChromeを投入。 2020年にIEはサポート終了。
ファイルベースのシステムでは、コンパイラ言語は実行可能なファイルを生成し、 インタプリタ言語はそれを生成しないという違いがありました。 しかし、クラウドベースになって、実行ファイルそのものをクライアントにダウンロードしなくなり、 ジャストインコンパイルで実行結果だけを利用するようになると コンパイラ言語とインタプリタ言語の違いは、あまり本質的でなくなりました。
科学技術用の伝統的な言語としては、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*と続きます。 *
文字や絵画、楽譜などの 情報の記録媒体としてもっとも古くから使われているのは紙でしょう。 視覚によって情報を人が直接 認識できるうえ、 遅延もありません。
しかし、音声や動画といった情報を記録するようになり、人は、磁気的記録や電子的記録といった、直接認識できない方法での記録をするようになりました。
さらにデジタルコンピュータとインターネットを使って、大量のデータをクラウドにデジタル記録するようになりました。
インターネットを使ったコミニュケーションツールの多くはＨＴＴＰプロトコルを使っています。つまりホームページ、サイト、ＷＥＢなどです。
これらのコミニュケーションツールにはリアルタイムでのチャットや電子会議システム、ストリーミングなど、ダウンロード可能なコンテンツに分けられます。リアルタイムのコミニュケーションツールでも録画できる場合もありますが、その録画は著作物の複製にあたるので、著作者の権利を尊重してあげましょう。
任意のビット列
文字コードのみ
祇園精舎の鐘の声、諸行無常の響きあり。
沙羅双樹の花の色、盛者必衰の理ことわりをあらはわす。
おごれる人も久しからず、 唯春の夜の夢のごとし。
たけき者も遂にはほろびぬ、 偏ひとえに風の前の塵に同じ。
文字で、感情や思想を伝えるのが飛躍的に早くなりました。 数字で、量を伝えるのが飛躍的に早くなりました。
🔷 書道博物館＠東京都台東区
米沢高等工業学校本館の 保存教室 には、卒業生のノートが展示してある。 当時の授業は、先生が外国から持ち帰ったテキストを板書し、学生が書き写すというものだった。 国内では印刷されたテキストの入手は困難であっので、卒業生は自筆のノートが唯一の情報のよりどころであった。 だから、学生はあとで文字が読めなくて困るようなノートのとり方はしなかった。
物理量 の 記号 は， ラテン文字 または ギリシャ文字 の 1文字を用い，イタリック体（斜体）で印刷する。その内容を さらに明確にしたいときには，上つき添字または下つき添字（あるいは両方）に固有の意味をもたせて用い，さらに 場合に応じて，記号の直後に説明をカッコに入れて加える。 単位 の記号はローマン体（立体）で印刷する。物理量の 記号にも 単位 の記号にも，終わりにはピリオドをつけない 5 ) 6 ) 。 *
pythonの matplotlibでは、 TeXが使えます。ギリシャ文字は \+unicodeで指定します。
物理量 の 記号 は， ラテン文字 または ギリシャ文字 の 1文字を用い，イタリック体（斜体）で印刷する。その内容を さらに明確にしたいときには，上つき添字または下つき添字（あるいは両方）に固有の意味をもたせて用い，さらに 場合に応じて，記号の直後に説明をカッコに入れて加える。 単位 の記号はローマン体（立体）で印刷する。物理量の 記号にも 単位 の記号にも，終わりにはピリオドをつけない 7 ) 8 ) 。 *
（著作物の例示） 第十条 この法律にいう著作物を例示すると、おおむね次のとおりである。 一 小説、脚本、論文、講演その他の言語の著作物 二 音楽の著作物 三 舞踊又は無言劇の著作物 四 絵画、版画、彫刻その他の美術の著作物 五 建築の著作物 六 地図 又は学術的な性質を有する図面、図表、模型その他の図形の著作物 七 映画の著作物 八 写真の著作物 九 プログラムの著作物 著作権法より
（著作物の例示）
第十条 この法律にいう著作物を例示すると、おおむね次のとおりである。
思想又は感情は含まれていますか？ 単なるデータは、ダメです。 表現したモノです。考えているだけ、感じただけ、アイデアだけ、ではダメです。 創作的なので、模倣はだめです。もちろん 盗用は、もってのほかです。 工業製品等は、文芸、音楽、美術、学術ではないのでダメです。 工業製品等の知的財産権は、特許を申請して、政府の保護を受けます。
著作権は、 知的財産権 です。 著作権は、著作者に帰属します。 著作権のうち、著作財産権を、出版社に許諾することができます。 出版社が、 出版権 を設定した場合、出版社は、著作者を含む他の許諾に対する損害請求できます。 この場合、出版社による 排他的独占的著作財産権の占有となります。
ディジタル化した情報量の最小単位をビット(bit)といいます。1byte（バイト）=8bit（ビット）です。
２００３年、ヒトのゲノム はすべて解読されました。ゲノムとは、生物の遺伝情報をDNAの配列。 4種類の塩基（A，T，G，C）が、人間なら全部で30億個。４種類は２ビットで表されるから、ヒトゲノムの情報量は約750メガバイト。 ブルーレイディスクに録画する１０分ドラマの動画にも満たない情報量です。 そこに約２０，０００の遺伝子が含まれています。 つまり約750メガバイトに、２０，０００行からなるプログラムが記述されているというのがヒトという生き物。
たとえば4bitで色を表現するとしたら、24=16通りに表現できます。
でも2bitしかなかったら、22=4通りしか表現でません。
ディジタル化とはそういうことです。
アナログ信号をどのくらいの細かさでデジタル表現できるかを示す指標を分解能と言います 9 ) 。
ビット深度が低いと色 数が少なくなります。 ヒメシャラの花の 色 は、背景の色と区別がつかなくなります。 解像度（画素数）が低いと矩形（ブロック）になります。 ブロックノイズ は、解像度（画素数）の 量子化ノイズです。 ビット深度が低く、解像度（画素数）が低いほど、情報量も小さくなります。
白と黒との間には、無限の灰色がある。白黒をつけるということは、それを白か黒かの２色に限ってしまう。これが１ビットというデジタル情報の最小単位だ。仮に桁を増やして２ビットにする。白と黒との間に、薄い灰色と濃い灰色が加わり、４色になる。ビット深度を増やせば、色数も増える。４Ｋテレビの色のビット深度は、１０ビットだ。そのビット深度では、約１０億７３７４万色になる。それでも色数は有限で、無限ではない。４Ｋテレビと言っても、山際の夕焼け空の色に、不自然な境界が現れるのは、そのためだ。
絵画 は、人が筆で、キャンパスに描きました。 １９世紀に カメラと写真フィルムが発明されると、写真フィルムに記録されました。
デジカメによって、半導体メモリにデジタル記録できるようになりました。
デジタル情報として、半導体メモリや磁気ディスクなどの媒体に記録された 画像はディスプレイや印刷物として出力されます。 デジタル情報を電気信号し、光エネルギーを制御するとも言えます。
ほかの人のディスプレイと色の鮮やかさが同じかどうか見較べてみましょう。 また色覚には個性があります。 色覚異常を持つ方も、できれば積極的にコミュニケーションをとってディスプレイと色についての議論を交わしましょう。 ビット深度と解像度が上がれば、より鮮明になります。
特許の出願の 画像形式も指定されています。
HTMLでホームページを作るとき、画像を使うと表現力が高まります。 論文でも 図 や 表 を使うのはそのためです。
星型の座標は、座標（0.1）を１４４度５回座標回転した数列ですね。 表計算ソフトで計算するとあっと言う間です。 座標や回転、三角関数を忘れたときは、数学を思い出してください。
これで図形をイメージできる人はそれでいいのですが、 機械の助けを借りましょう。 機械が読み取れる、マシンリーダブルな形式にするのです。
色彩 は 色度座標で表現されます。 ディスプレイ（エネルギー化学）によるカラー表現は光の３原色（RGB）による加法混色です（無機工業化学）。
ロゴの色は、#00664dです。 －パレット
遺伝的な色覚の多様性に配慮してバリヤフリーにするには、 色彩だけに頼らず、明暗を併用するなどの方法があります。
余色の関係は、J.Griffithsによって提案されたカラーサークルによって、よく理解できる 。 12 ) 13 )
画像は大きくラスター形式とベクター形式に分類されます。 ラスター形式は、座標の明るさや色彩を指定する方法で、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 形式を htmlに直接記述した 山形大学 のロゴ です。
山形大学の スクールカラー ときわ色 （プロセスカラー3色を使用し，C(シアン)＝100％，M(マゼンタ)＝60％及びY(イエロー)＝70％を割合とする色）です。#00664dになります。 http://www.colordic.org/ #00664d
この場合、svg の中でimgをロードすることもできます。 htmlが長くなって、メンテナンス性が悪くなるので、aspなら サーバーサイドでincにまとめる方がいいかもしれません。
画像は最終的にラスライズされることになりますが、どの段階でタスタライズされるかということですね。
下の図は、ラスター形式(jpg)のライブカメラの映像にデータベース上のアノテーションデータを ベクター形式（svg）で組み合わせ、objectタグでhtmlに埋め込んだものです。
下の図は、手書きの画像をラスター形式(jpg)で読み込み、それに目盛りをベクター形式（svg）で組み合わせ、objectタグでhtmlに埋め込んだものです。
3次元（スリーディメンショナル）の座標データから、2次元の座標データへ透視変換とかパースペクティブとか言います。
立体を構成する面に対して光を追跡する方法をレイトレーシングと言います。 VRMLなどの3Dデータをビューアでラスタ画像にします。
音声をデジタル記録したものは、単なる音声 データの場合と、音声情報の場合があります。 音楽、朗読、講演など、音声情報であり、著作物です。
蓄音機では、レコード盤に音声がアナログ記録されました。 テープレコーダでは、磁気テープに音声がアナログ記録されました。 これらの記録は、再生装置がなければ、再生できません。
音声や音楽は、記録されてはじめて、アップロード、ダウンロード、配信ができるようになります。
CD音質は、44.1kHz、16bit。最近のPCは、192kHz, 24bit * *
音楽や音声の表現ファイルには, wave,mp3形式などがある． 楽譜の表現ファイルには、midやmmlなどがあります。
デジタル記録された音楽・音声を再生するには、 ＤＡＣ など、デジタル情報をアナログ信号に変換する装置と、 電気信号を力学エネルギーに変えるスピーカーなどの出力装置が必要です。
テレワークや電話に必須。
テキストを音声に変換したり、音声を表現するXMLが生まれた。
ワイヤレスメルチメディアとしてMiracast, Widi, Chromecastがある．
動画配信などインターネットラジオ，Youtube
HTML5 になって、 video要素が追加されて、Youtubeなどのサービスを使わなくても,mp4形式やmov形式のビデオファイルをウェブサーバのみで動作配信ができるようになった。
ウェブサービスとWWW
ブラウザーとURL
HTMLとハイパーリンク
1990年に文書記述言語SGMLから派生したHTMLによって文章と一緒に画像を表できるようになる．
1994年にはW3Cが発足されWWWに関するコンソーシアムが発足する． 2008年には，スマートフォンに対応したHTML5が間隔された．
HTTPとHTTPS
数式表現 MathML
下記の例を参考に書いてみよう↓
受講成果は，多くの方に活用してもらおう．学んだことを役立てよう！ やるんじゃなかったこと，失敗したことは，他の人が同じ間違いをしないという意味では，次の人の道しるべになるでしょう！
教育基本法の第七条にあるように，学習成果を広く社会に提供することにより、社会の発展に寄与することも目的としています．
（大学） 第七条 大学は、学術の中心として、高い教養と専門的能力を培うとともに、深く真理を探究して新たな知見を創造し、これらの成果を広く社会に提供することにより、社会の発展に寄与するものとする。 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\2024\tab12345
ファイルエクスプローラ(エクスプローラ)を起動して，\\yzdn\dfs\share6\www\Public\adgmp\2024 にアクセスしてください．(参考
前半の授業での成果をまとめ公開してください．公開ウェブサイトの画像を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>
0036 0033 0077 0088
ホームページに公開するとき amenity
🏠
ホームページの仕組みと応用 －受講成果を公開しよう－
