授業ホームページ URL: http://www.FL.reitaku-u.ac.jp/~schiba/is/ 2008.09 情報科学 A 資料 授業の狙いと学習の方法/グラフィックデータの基本 担当 笹原・千葉 ポイント: • • • 外国語学部の「情報科学 A」の目的と学習方法について理解する。 コンピュータのなかでデータがどのように表現されているかについて基本的な知識を 身につける。 グラフィックソフト(Adobe Photoshop Elements)を使って,グラフィックデータの簡単 な加工をおこなってみる。 1.「マルチメディア」とは? • • • • コンピュータで扱うことのできるデータの種類は拡大している。 歴史的には,数字,文字の順に拡大してきた。 現在は,音声や静止画(写真・イラスト・図など),動画もコンピュータで扱えるように なってきている。 マルチメディアの利用範囲などを理解しておこう。 45 67 XyZ 89 あいうえお abcd 123 音声 写真 イラスト 漢字 数字 図 文字 動画 コンピュータ・リテ ラシーの範囲 マルチメディア 1.1 マルチメディアの特徴 メリット:豊かな表現力が得られる→よくわかる/説得力が増す デメリット:マルチメディアを使いこなすには・・・ ⇒ ⇒ 高性能のコンピュータが必要 「文字の入力・編集」だけのスキルでは不充分 • マルチメディアデータを扱うための基礎知識が必要(データ表現・ファ イルの種類など) • マルチメディアを扱うソフトやシステムの使い方を知らねばならない • 「表現する」 「他人に伝える」ノウハウが不可欠 麗澤大学 2007 年度 情報科学 A 資料 No.1 1.2 マルチメディアの利用例 マルチメディアの利用例 高度な利用例(この授業では予 定していないもの) • • • WWWページの作成 プレゼンテーション (Power Point) グラフィックデータの加工 (Paint/Picture Manager/Phoshop) • • 3D-CG の作成 動画の作成・編集・配信 サウンドデータの作成・編 集・配信 ゲームの制作 WWW アプリケーションの制 作/プログラミング (写真や図入りの文書作成:Word) 2.授業の狙いと注意事項 2.1 授業の目的 • • • マルチメディアデータを扱うための基礎知識を身につける ⇒ データの表現方法・ファイルの種類など マルチメディア利用に必要な機器やソフトの利用法を習得する ⇒ グラフィックソフト/テキストエディタ/ファイル転送ソフト/イメ ージスキャナ など 「表現する」 「他人に伝える」ために必要なルールやノウハウを学ぶ ⇒ 著作権・情報倫理の基礎 2.2 注意事項 • • • コンピュータ・リテラシーで教わったことを確実に理解しておくこと ⇒ 基礎はできていることを前提に説明する 大容量のデータのとり扱いに注意すること ⇒ データ保存用のネットワークドライブ (file_server の[user-id]) の 容量を確認すること 1 ⇒ 大切なデータは USB メモリや CD-RW ("CD rewritable"の略) などを使い, バックアップをとっておくこと 麗澤大学コンピュータシステム利用ガイドラインを厳守すること 2.3 授業の概要 1. グラフィックデータ利用の基本 データの表現/加工の基本,グラフィックデータ利用上の注意 2. Power Point を使ったプレゼンテーション プレゼンテーションの基本,プレゼンテーションのまとめかた 3. WWW ページの作成と公開 コンテンツ作成にあたっての注意,WWW ページの作成方法,WWW ページの公開方法 4. Excel による分析の応用 常に自分の頭で考え,必要な情報は自分で努力して手にいれること! 1 file_server の[user-id]の容量は,一人あたり 500MB である。 麗澤大学 2008 年度 情報科学 A 資料 No.1 2 3. グラフィックデータ加工の練習 • • • 写真や絵などのグラフィックデータ の加工ができる PhotoShop Elements というツールを使ってみよう。 PhotoShop Elements を使い,写真の 一部を切り取る「切り抜き」,「水彩画 のような雰囲気」にタッチを変更する 「フィルタ」,図形そのもののサイズ 「画像解像度」の変更,などの機能を 使ってみよう。 練習用の写真データがファイルサー バーの Kadai のなかに用意してある。 これを自分のネットワークドライブ 中にコピーして,練習しよう。 3.1 サンプルデータをネットワークドライブにコピーする • • ファイルサーバー「Kadai」のなかに「Info-Sci」というフォルダがある。このフォル ダのなかに, 「PHOTOSET」というフォルダがある。 このフォルダをネットワークドライブ(file_server の[user-id] (X:))にコピーする。 3.2 PhotoShop Elements を使って写真を切り抜く • • • • • • Microsoft Photo Editor を起動する。[スタート]ボタンから「プログラム」→「Adobe PhotoShop Elements 4.0」を選択する。 スタートアップメニューの「写真の編集と修正」を選択する (右図)。 メニューから「ファイル」-「開く」と選択し,file_server の [user-id] の「PHOTOSET」フォルダのなかにある,cast というファイルを選んで開く (同じ名前のファイルが 2 種類あるが,どちらを選んでもよい)。 カスタードタルトの写真が表示される。 この写真のなかの,タルトの部分だけを切り出してトリミングしてみよう。 トリミングの手順: 1. ウィンドウ右の「ツールボックス」の「選択」ツール (右図) をクリックする。 2. 切り抜きたい範囲を選択する。うまく行かなかったら,やり直す。 3. 「イメージ」メニューの「切り抜き」を選択する。 4. 「ファイル」メニューから「別名で保存」を選択し,file_server の [user-id] の 「PHOTOSET」フォルダのなかに「trimcast」という名前をつけて保存する。(単純 に「保存」を選択すると,オリジナルの画像が上書きされるので注意!) 「ファイ ル形式」は JPEG にし,画質は「高」にする (下図参照)。 ※ 画像操作の補足 Windows XP には「画像と FAX ビューア」と呼ば れるプレビューソフト(右図)があり,画像ファイル の種類によっては,アイコンをダブルクリックする と「画像と FAX ビューア」が起動することがある。 なお,画面の右下にある「編集用に画像を開く」ボ タンを使うと,ファイルの種類に対応した (「関連 付けられた」 ,§4.2.参照) アプリケーションで画像が 麗澤大学 2008 年度 情報科学 A 資料 No.1 3 開く。コンピュータによって,また画像ファイルの形式によって関連づけられているソフトは 異なる。この授業で使用する PhotoShop Elements が起動するとは限らない。 3.3 • • PhotoShop Elements を使って,写真のデータをいろいろ加工する PhotoShop Elements は,写真データを加工する高度な機能をもっている。例えば: • 画像のサイズを小さくする(「イメージ」→「サイズ変更」→「画像解像度」) • 写真全体をもっと明るくする/暗くする(「画質調整」→「ライティング」) • カラーの写真をモノクロ画像にしたり,セピア色にしたりする(「画質調整」→ 「カラー」→「色相・彩度」) • モノクロ:「彩度」スライダをマイナス方向に調整する • セピア調:「色彩の統一」をクリックし,「色相」スライダを調整する • ステンドグラス風や水彩画風にする(「フィルター」の各メニュー) • 面白い形に切り抜き:「ツールボックス」の「型抜き」ツールを使う (右図)。 切り抜き作業は Enter かオプションバーの「確定」ボタン (下図) で完了する。 などが可能。 各自,file_server の[user-id] の「PHOTOSET」フォルダのなかに ある写真データのなかから気に入ったものを選んで,さまざまな効 果を試し,元のファイル名とは異なる別名をつけて,file_server の[user-id] の「PHOTOSET」フォルダに保存してみよう (「ファイル」→「別名で保存」)。 保存形式は JPEG とし,画質は「高」にすること (§3.2 参照)。(単純に「保存」を選 択すると,オリジナルの画像が上書きされてしまうので注意!) 4. ファイルの大きさや種類を調べる • • パソコンで作成した文書,Excel で作成した表やグラフのデータ,写真やイラストなど のグラフィックデータなどは「ファイル」というカタマリを単位として,ハードディス ク,USB メモリや CD-ROM などのリムーバブルディスク,ネットワークドライブ等の二 次記憶装置に保存されている。 これまでファイルについては「名前」と「保存されている場所」だけを気にしてきたが, もうすこし詳しくファイルに関する情報を知る方法を説明する。 4.1 ファイルに関する情報を調べる • 二次記憶装置に保存されているファイルについては, 1. ファイルの種類 2. ファイルの大きさ(サイズ) 3. 正確なファイル名 を知っておきたい。これらについての知識がないと,ファイルを他人に渡したり,WWW ページを作成して公開するときなどに困ることになる。 • ファイルの「種類」と「サイズ」(1.と 2.)に関する情報は,次の手順でわかる。 • 「マイコンピュータ」でファイルのアイコンを画面に表示する。 • マウスポインタをアイコンにあわせる。 • マウスの右ボタンを押す。 • メニューがあらわれるので「プロパティ」を選択する (次ページ左下図)。 • ここで表示される画面にファイルに関する情報が表示される (次ページ右下図)。 • 「ファイルの種類」と「サイズ」2 を確認し「OK」をクリックする。 「サイズ」と「ディスク上のサイズ」の違いについては,以下の Web ページの記述が詳しい。 URL: http://arena.nikkeibp.co.jp/article/tec/winxp/20060615/117202/ (デジタ ル ARENA「ファイルサイズ表示の違いを知る」,日経 BP 社) 2 麗澤大学 2008 年度 情報科学 A 資料 No.1 4 ⇒ プロパティ画面には,他にも有用な情報が表示されているので確認しよ う。例えば,「アプリケーション」には,ファイルをダブルクリックする と起動するよう登録されているアプリケーションの名前が出ている。 ⇒ ファイルに関する情報は,他にもさまざまな方法で確認 できる。例えば,ファイルのアイコンにマウスをあてる とファイル情報が簡略化した形で表示される。また,「マ イコンピュータ」の「表示」ボタン(右図),またはメニ ューバーの「表示」から「詳細」を選択すると,同一フ ォルダにあるファイルのサイズや種類,更新日時の情報 を一度に見ることができる。 • 正確なファイル名(3.)は,次の手順で表示することができる。 • 「マイコンピュータ」のメニューバーから「ツール」→「フォルダオプショ ン」を選択し,「表示」タブを開く。 • 「詳細設定」にある「登録されているファイルの拡張子は表示しない」のチ ェックをはずし,「OK」をクリックする (左下図)。 • 「マイコンピュータ」のファイルアイコンの下に,より正確なファイルの名 前が表示される (右下図)。 ※ 麗澤大学 注意:大学のパソコンでは,この設定は Windows からログオフすると解除さ れてしまうので,ログオンするたびに行う必要がある。 2008 年度 情報科学 A 資料 No.1 5 4.2 ファイルに関する情報の意味 上で確認した3つのファイル情報は,何を表しているのであろうか。順番にみてみよう。 ●ファイルの種類 • • • • • • ファイルの種類は,テキストファイルとバイナリファイルにわけられる。 ⇒ テキストファイル:文字や記号のみで作成されているファイル(データを直 接人間が目でみても意味がわかる) 例: メモ帳で作成したテキストファイル,HTML ファイル (授業後半 で詳しく取り上げる) ⇒ バイナリファイル:人間が目でみても意味がわからない(パソコンにしか理 解できず,人間が直接見ても意味が分からない)データを含むファイル 例: 文書ファイル:Word で作成したファイル 表計算ソフトのファイル:エクセルで作成したファイル グラフィックデータ:写真や絵,図のファイル グラフィックデータの種類 ドローデータ ··········· 図を線画で書いたデータ(Word で作図したようなデータ) ビットマップデータ······ 細かな点の集まりで構成されたデータ(写真・イラスト) JPEG イメージ(ジェイペグファイル) (jpg)・・・ホームページに使える。 GIF イメージ(ジフファイル) (gif)・・・ホームページに使える。 BMP イメージ(ビットマップファイル) (bmp)・・・ホームページには利用不可。 PSD イメージ(PhotoShop 形式ファイル) (psd)・・・PhotoShop 専用形式。この形式で 保存しておくことで,加工した内容を PhotoShop で再度修正することができる。 ●ファイルの大きさ(サイズ) • ファイルの大きさは,「Byte(バイト)」という単位で表す。B と略記する。 ※ 1 バイトは英数字 1 文字分の容量。日本語 Shift JIS の全角文字(漢字やひらがな, 全角カタカナなど)は,1 文字で 2 バイトの大きさになる。 • 1 バイト = 8 ビット ※ bit (ビット)…情報の最小単位。0 か 1 のどちらかの状態を表す。b と略記する。 / 210 (1,024) KB = 1 MB (メ • 210 (1,024) Byte = 1 KB (キロバイト,kilobyte) 10 ガバイト,megabyte) / 2 (1,024) MB = 1 GB (ギガバイト,gigabyte) ※グラフィックデータは大きくなりがち→サイズの大きな画像ファイルを,電子メールで 他人に送ったり,WWW 上で公開するウェブページなどに表示させると迷惑になる。 ※例えば画像ファイルを電子メールの添付ファイルとして送る場合,一般にファイルのサイ ズが 100KB を超えるようならば,小さく切り抜くとか,モノクロ (グレースケール)にす るなどしてファイルサイズを小さくする配慮が必要。 ※大きなファイルは外部記憶装置(ディスク)の記憶容量を圧迫するので注意しよう。 • ネットワークドライブ (file_server の[user-id]) には一人 500MB まで保存可。 • 参考:パソコンのメモリ(内部記憶装置)は,32MB∼数 GB 程度。CD-ROM の最大容 量は,650MB ないし 700MB 程度。ハードディスクの容量は数 GB∼数百 GB。USB メモリは数十 MB∼数 GB 程度まで,さまざまな容量のものがある。 ※ディスクの空き容量を調べるには:「マイコンピュータ」のディスクのアイコンをマウス で選択し,マウスを右クリックして「プロパティ」を選択する。ただし,ネットワークド ライブは,ディスク全体の容量が出てしまうので,自分の領域の空き容量を調べるには情 報システムセンターが学内向けに公開している以下のツールでチェックする。 URL: http://www.reitaku-u.ac.jp/risc/link/tool.html ●ファイル名 • これまでも,ファイルには名前をつけて保存していた。しかし,このときつける名前だ けでは,ファイルの種類は特定できない。名前と種類を同時に表せる,より厳密なファ イル名の表記方法がある。このファイル名の表記方法を知っておこう。 麗澤大学 2008 年度 情報科学 A 資料 No.1 6 • • • • • 例えば,「PHOTOSET」フォルダにある cast という同じ名前のファイルには,厳密には cast.bmp と cast.jpg という異なるファイル名がついている (右下図)。 この厳密なファイル名の形式は,cast という名前と,「.(ピリオド)」以降の,jpg や bmp という「種類」を表す部分から構成される。 ピリオドより後ろの部分を「拡張子(かくちょうし)」と呼ぶ。同じ画像ファイルであ っても,拡張子が異なればデータの形式は全く違うので注意! 主なファイルの種類と拡張子の関係は次のとおり。(より詳しい拡張子のリストは『日 経パソコン用語事典』などを参照すること。) テキストファイル ·········· txt HTML ファイル ·············· htm (または html) JPEG ファイル ·············· jpg GIF ファイル ··············· gif ビットマップファイル ······ bmp PhotoShop 用画像ファイル ··· psd ワードの文書ファイル ······ doc エクセルのファイル ········ xls Windows では,拡張子はファイルの種類を明示するだけでなく,ファイルをどのアプリ ケーションで開くかを決定するのにも使われており,これを「関連付け」という。例え ば,Word 文書ファイルをダブルクリックすると Word が起動するのは,関連付けのおか げである。(なお,どの拡張子がどのアプリケーションに関連付けられているかは,パ ソコンにより異なる。) ※拡張子は通常各アプリケーションソフトが自動的につけてくれるので,ワードや Excel などのアプリケーションソフトを使っているだけならば,拡張子を意識する必要はない。 (このため,Windows では,ログオン直後の状態では,拡張子を省略したファイル名を表 示する設定になっている。) ※しかし,WWW ページを作成する場合のように,拡張子を含めて正確に名前をつけることが 必要になることがある (後日この授業で取り上げる)。 • ファイル名をつけるときには,次の点に注意すること。 ⇒ ファイル名は,半角文字の英数字(およびハイフン “-”,アンダーバー “_” など 一部の記号)を使用し,カタカナ,ひらがな,漢字などはむやみに使わないよ うにする。 ⇒ 拡張子と,拡張子の直前にあるピリオドは必ず半角になる。拡張子を自分で指 定する場合,間違って全角で入力しないよう注意すること。 ⇒ 一部の記号はファイル名に使えない。また,トラブルの元になることがあるの で,半角スペースの使用はできるだけ避けること。 5. 練習課題 5.1 • • • • 5.2 file_server の [user-id] (X ドライブ) の「PHOTOSET」フォルダのなかにあるファイル のなかから,好きなもの(ただし cast を除く)をひとつ以上選んで以下の作業をしなさい 写真のなかで強調したい部分だけを切り抜きなさい (手順は §3.2 を参照)。 切り抜いた結果を,もとのファイルとは別の名前をつけ,JPEG 形式,画質「高」で保 存しなさい (§3.2 参照)。 さらに効果を適用し,面白い画像に仕上げなさい (手順は §3.3 を参照)。 効果を適用した結果をさらに別の名前をつけ,JPEG 形式,画質「高」で保存しなさい。 切り抜き前, 切り抜き後, 効果適用後の 3 つのファイルについて,以下の図を参考に Excel で報告書を作成しなさい。 • 学部,専攻 (または学科),クラス名,氏名(ふりがな),学籍番号を必ず書くこと。 • 各ファイルについて,拡張子つきの正確なファイル名,種類,ファイルサイズ (と 麗澤大学 2008 年度 情報科学 A 資料 No.1 7 • その単位),ファイルの説明を書き出しなさい。 効果を適用した画像を Excel に挿入しなさい (「挿入」→「図」→「ファイルから」)。 挿入した画像の大きさは適当に縮めてよい。 5.3 自分のネットワークドライブ (file_server の [user-id]) の最大容量と,現時点での空き 容量がどのくらいあるかを調べ (6 ページ参照),Excel の表に追加しなさい。 5.4 報告書を印刷しなさい。データが A4 サイズの紙 1 枚に全て印刷されるよう「印刷プレ ビュー」で必ず確認すること。以下の点に注意すること: • Excel の画面上では正しく表示されていても,印刷時に文字の一部が隠れてしまうこと がある。「印刷プレビュー」で確認し,必要ならば Excel のワークシートに戻り,セル の幅を調整する。 • 表が 1 枚の紙に収まらないこともある。必要ならば「(ページ)設定」で調整する (下図 参照。「印刷の向き」を変えるか,「拡大縮小印刷」で印刷範囲を調整する)。 5.5 5.6 また,「表示」メニューの「改ページプレビュー」を選択すると印刷範囲をドラッグし て指定できる 報 告 書 は ISkadai1 と い う 名 前 で 自 分 の ネ ッ ト ワ ー ク ド ラ イ ブ (file_server の [user-id]) の適当な場所に保存しなさい。 印刷した報告書を提出しなさい。 (以上) 麗澤大学 2008 年度 情報科学 A 資料 No.1 8
© Copyright 2024 Paperzz