情報基礎 講義メモ(第4回)
先週出したウェブサイト作成の課題について(5月18日の11:50まで)
- 3ページ以上のウェブページからなるウェブサイトを5月18日の昼11:50までに完成させる。以下の条件を満足しなければならない。
- 3ページ以上(htmlファイルが3つ以上)で、トップページ(index.html)から子ページにきちんとリンクが張ってある。子ページからトップページへのリンクも張っておくこと。
- 気にいった(他人の)ウェブページ、3つ以上にリンクを張ること。それを、リスト構造にすること。
- 少なくとも合計で2枚 (先週は1枚以上と言ったが、2枚以上とする)、どこかのページに画像が入っていること。なお、5月11日までの課題で作成する2枚の画像を、同じページに入れるのが楽である。
- 締め切りより遅くなった場合
- 完成すれば、評点は遅れた分、ほんの少しずつ下がるが、評価はする。
- 間に合わなかった者は、完成した時点で
kiyoshi◎gscc.osaka-cu.ac.jp と k-nakano◎ex.media.osaka-cu.ac.jp
(◎ を 半角の @ で置き換えること)に完成したことを通知するメールを出すこと。遅れるほど、評点がわずかずつ悪くなっていくが、完成すれば評価はするので遅れても完成させること。
今日、学ぶこと
- 描画データ
- 色表現
- 演習(1) 来週の11:50まで
- ペイント、ドローと画像ファイル形式
- レイヤー
- 描画(ペイント)ツールの使い方(デモのみ) 「Kメニュー」→[情報処理教育システム] →[画像編集] →[GIMP]
- 作図(ドロー)ツールの使い方
- 演習(2) 来週の11:50まで
今日の予定
描画データ、色表現
演習(1) 来週の11:50まで＝スライド15
ペイント、ドローと画像ファイル形式、およびレイヤーの概念
描画(ペイント)ツールの使い方 (デモのみ)
描画ツール(ペイント)の使い方(1) デモのみ＝起動、終了とファイル新規作成
- 描画ツール「GIMP」(通常、ジンプと読む。ギンプと呼ぶ人が一部にいるらしい)
- GIMPは、画像加工(フォトレタッチ)機能等を有する多機能な画像処理ソフトウェアである。そのため、使い方がやや複雑である。Photoshopに似ているが、Photoshopよりややこしいらしい。GIMPの機能の一部を紹介する。
- GIMPの起動と終了
- 起動：
- 「Kメニュー」→[情報処理教育システム] →[画像編集] →[GIMP]
を選択。
- (注)はじめてGIMPを起動するときは、GIMPインストールウィンドウが開くので [インストール]をクリックする。
- 終了：
- メインウィンドウ(タイトルバーにThe GIMPと書かれている)のメニュー で、 [ファイル]→[終了] を選択。
- 新しい絵を描く準備
- メインウィンドウのメニューバーから[ファイル] →[新規...]を選択。
- 開いたウィンドウで画像のサイズを指定する( 400x300 くらいが適当)。
- 絵を描くためのキャンバスが開かれる。
- (注意！) メインウインドウにないメニューは、キャンバス上で右クリックすると表示される。
描画ツール(ペイント)の使い方(2) デモのみ＝絵の保存と既存データオープン
- 絵を保存する
- キャンパス上でマウスの右ボタンをクリック。
- 表示されたメニューから[ファイル] →[保存]を選択。
- 画像のデータ形式を指定する。拡張子(.xxx)で示す方法と、データ形式リストから選ぶ方式とがある(まず、データ形式リストから選ぶ方式をとってみる)。
- 初めて保存する場合は＝保存オプションで、ファイル形式を決定 → PNG(ピング)を選ぶ
- 一番下の[選択]ボックスにファイル名を指定。
- 拡張子はファイル形式に合わせて、自分でつける（拡張子は .png)
- 画像の保存形式には、いろいろある。
- [了解]ボタンを押すと、パラメータ設定のウインドウが表示される。
→最初はあまり気にせず了解。
- 一度ここでキャンバスを閉じよう(GIMPの終了ではない)。キャンバスの右上の「x」をクリック。
- 絵を開く
- メインウィンドウのメニューから[ファイル]→[開く]を選択。
- 新たに開いたウィンドウで目的のファイルを選択する。
- (注意！) 矩形選択、円形選択などの領域選択ツール（メインウインドウの上段にあるツール）では、絵を描くことはできないので注意。領域選択ツールは描く領域を限定するもので、選択してしまうと選択された部分以外ではいかなる絵も描くことはできない( 右クリック→選択→なし で選択をはずすようにする)。
描画ツール(ペイント)の使い方(3) デモのみ＝筆、消しゴムによる描画
- 鉛筆や絵筆で描く
- メインウィンドウで鉛筆(初期状態では2段目1番右)や絵筆のボタン(3段目 1番左)をクリック。
- キャンバスの上にマウスポインタを移動させるとポインタが鉛筆の形に変わる。
- マウスをドラッグすると線が描ける。
- ぼわっとした円の筆先を用いるとき、絵筆では効果がでるが鉛筆だと効果がでない。
- 注意 鉛筆、絵筆、消しゴム、エアブラシ、インクの太さ（形状）は、 [ブラシ]選択で決定される。
- (Tips!) [ブラシ]選択のウインドウを表示するには、キャンバス上で右クリック→[ダイアログ]→[ブラシ]
- 鉛筆、絵筆、エアブラシを順に試してみよう。
- 間違えたときは『アンドゥ』( Ctrl を押しながら Z ) 。数回分の指示を、近い方から順に取り消して元に戻すことができる。取り消しすぎたら、『リドゥ』
- キャンパス上でマウスの右ボタンをクリックし、[編集]→[アンドゥ] アンドゥのショートカットは、Ctrl＋Z 。
- 描く色を指定する
- メインウィンドウの一番左下に(初期状態では)黒と白の四角が重なっている部分がある。
- 黒い部分が絵筆などを使うときの色で，白い部分が消ゴムで消すときの色。
- 絵筆で描く色を変更するには黒い部分をクリック(『色選択』ウィンドウ が表示される)。
- 『色選択』ウィンドウで色を選択する。＝いくつもの指定の仕方がある。
- GIMP型：右のものさしが色相。左右が明度。上下が彩度(同じ明度でも下にいくほど色味が薄くなる)
- 水彩型：クリックすればするほど色が濃くなる。
- GTK型：色相は円周方向。半径方向で中心に近づくと彩度が落ちる(色味が薄くなる)。右のものさしで明度(円の中で、カーソルがあるところを出発点として真っ黒まで)。
- 三角型：色相は三角の1つの頂点で示す。他の頂点は、真っ黒と真っ白。
- 描いた絵を消す
- メインウィンドウの消しゴムボタン(3段目左から2つ目)をクリック。
- 形状は[ブラシ]選択で決定される。
- 全部消すのには、[編集]→[消去]
- これ以上、詳しく知りたい人、自分で操作して見たい人は、2005年前期 第3回の資料を参照のこと
描画ツール(ペイント)の使い方(4) ＝操作手法関連資料検索
- 資料の検索
- GIMPに関する資料がないか、検索してみよう。
- Mozzilaを起動。情報処理教育システムのトップページで、左側のメニューの上から20番目ぐらい、「便利なリンク集」をクリック。→上の方の「検索エンジン」をクリック。→上から4番目の「Google」をクリック。
- 時間の余裕のあるときに、いろいろな検索エンジンを用い、同じ検索項目で検索してみて、自分に合った検索エンジンを選ぶとよい。「Google」だと、ゴミ(役に立たない)サイトが引っ掛かる率が少ない。
- いろいろなキーワードや設定で検索してみる。
- 英文入力モードで「GIMP」(半角)と入力し、「Google検索」をクリックしてみよう。
- 「日本語のページを検索」のラジオボタン(丸いボタン)をオン(クリックして黒丸にする)にして、もう一度クリックしてみよう。
- 「GIMP」、スペース、「入門」と入力し、「日本語のページを検索」をオンにした状態で「Google検索」をクリックしてみよう。
作図(ドロー)ツールの使い方
演習(2) 来週の11:50まで＝スライド25、26
- StarSuite7図形描画、うまくいかない場合には、WindowsのPowerpointを用いて、以下の画像を作成する。
-
想像のものでも実在のものでもいいので、街路や、施設内の建物の配置や、部屋あるいは店のレイアウトや、鉄道あるいは道路の路線図や、古代・中世・異世界などの国や州の配置図などを、大枠を同じにし、その上のレイアウトを変えて2枚作る。
-
レイヤ[層]の機能を用いて、時点の異なる2種類の図、あるいは、現実と理想の2種類の図を作る (レイヤを用いるので、部屋の大きさ自体を変えて、現実と理想の図を作ることは基本的にできない)。
-
StarSuite7図形描画やPowerpointを用いて、きれいな曲線を描くのには、それなりの熟練が必要である。国や州の配置図、直線街路だけでない農漁村などの地図を時間内に作るのは、実は難しい。後で説明する部屋や店のレイアウト図などが、やはり楽である。
-
この課題で作成した画像を、5月18日提出のウェブサイトに入れる画像とするのが、楽である。もちろん、この画像作成のkadaiを済ませたあと、自分の好みで、StarSuite7図形描画やPowerpointやGIMPを用いて、2枚以上の画像を作成し、課題のウェブサイトに入れるのでも、かまわないが。
-
それでは、自宅や下宿の自室の家具のレイアウト図を作る。模様替えを想定して「現状」の図と「模様替え案」の図を作ってみよう。
- レイヤの機能をうまく使うと編集しやすい。ただし、レイヤを設けていると、エラーが起きることも多いので、エクスポートの際には、レイヤ設定を消すようにする。後述★★★を参照のこと。
- レイヤを設けるには、左下の四角形が重なったアイコンをクリックしてレイヤのモードにする → (上辺のメニューから)挿入 → レイヤ → (名前はわかりやすく、たとえば、「机_たんす_旧」、「小物_新」などにするとよい)
- 「レイアウト」レイヤに壁や仕切りなど動かないものを描く(「ロック」をすると、誤ってさわって動かすことがなくなる)。
- 新しいレイヤに机や冷蔵庫などの大物家具
- さらにその上のレイヤに小型テレビや電話などの小物
- 自宅、自室の様子を出すのが嫌な人もいると思う。架空の部屋でもいいし、前述した街路や架空の世界の地図でもいいし、「サークルの部室の現状と模様替え案」、「私が喫茶店を開くとしたら、資金300万円で最初に開いたときと5年後儲かったとき」などでもいい。ともかく同じ大きさの図を2枚作る。5月11日の11:50まで。
- public_html とは別にディレクトリ(フォルダー)を作って、その中で作業すること。
- ディレクトリの作り方。家のアイコンをクリックして、ホームディレクトリを開く → 白いところで右クリック → 新規作成 → ディレクトリ → (アルファベットで名前をつける)
- できあがったら、現状を「layout1.png」、模様替え後を「layout2.png」という名称で保存する(一部のレイヤを表示しないことで、現状と模様替え後の表示を切り替える)。
- 見えている姿(その前に、レイヤの表示、非表示を調節しておく)を画像ファイルとして保存するには、 ファイル → エクスポート → (ファイル書式を「PNG」、ファイル名を「layout1」などとする。PNGの圧縮レベルは「6」でよい)
- ★★★★★★★★★★★★★★★★★★★★★★★★
-
レイヤーが設定されていると、「エクスポート」(見えている絵の姿を、StarSuite7のデータファイルとは別の画像ファイルとして「吐き出す」こと)が、うまくいかないことが多いので、レイヤーの設定をなくし、2つのファイルを作ってそれぞれエクスポートすることにする。
-
ファイル → 開く あるいは、ファイルメニューを経由せずに、Ctrl＋O(オー)
先週作った ○○○○.sxd を開く。
ファイル → 名前を付けて保存 → たとえば、○○○○_shin_1.sxd として保存
もう一度 ファイル → 名前を付けて保存 → たとえば、○○○○_kyu_1.sxd として保存
-
kyu(旧)のファイルでは、いくつか作ったレイヤーのうち、
-
「△△△△_旧」の各レイヤーにおいて、レイヤーのタブをダブルクリック。「レイヤーの変更」のダイアログ(設定ウィンドウ)の中で、
□見える状態 の□をチェック(「v」が入るようにクリック)
□印刷可能 の□をチェック
□ロックする の□のチェックがされていない状態に → OKボタン
「柱や壁」のレイヤーも同様の設定にする。 → OKボタン
-
「△△△△_新」の各レイヤーにおいて、レイヤーのタブをダブルクリック。「レイヤーの変更」のダイアログ(設定ウィンドウ)の中で、
□見える状態 の□のチェックがされていない状態に(「v」が消えるようにクリック)
□印刷可能 の□のチェックがされていない状態に
□ロックする の□のチェックがされていない状態に → OKボタン
-
「柱と壁」、「△△△△_旧」、「△△△△_新」の設定変更が終わったら、レイヤーモードをはずす (左下の四角が2つ重なったアイコンが選ばれていない状態にする)。
-
ファイル → エクスポート
出てきた「エスクポート」のダイアログ(設定ウィンドウ)の中で、ファイル書式を「png」、ファイル名を「layout1」とする。 → 「エクスポート」ボタンをクリック → 圧縮率 6 で OK。
-
ファイル → 開く さっき保存した「○○○○_shin_1.sxd」を開く。「○○○○_kyu_1.sxd」を保存して閉じる。
-
shin(新)のファイルでは、いくつか作ったレイヤーのうち、
-
「△△△△_新」の各レイヤーにおいて、レイヤーのタブをダブルクリック。「レイヤーの変更」のダイアログ(設定ウィンドウ)の中で、
□見える状態 の□をチェック(「v」が入るようにクリック)
□印刷可能 の□をチェック
□ロックする の□のチェックがされていない状態に → OKボタン
「柱や壁」のレイヤーも同様の設定にする。 → OKボタン
-
「△△△△_旧」の各レイヤーにおいて、レイヤーのタブをダブルクリック。「レイヤーの変更」のダイアログ(設定ウィンドウ)の中で、
□見える状態 の□のチェックがされていない状態に(「v」が消えるようにクリック)
□印刷可能 の□のチェックがされていない状態に
□ロックする の□のチェックがされていない状態に → OKボタン
-
「柱と壁」、「△△△△_旧」、「△△△△_新」の設定変更が終わったら、レイヤーモードをはずす (左下の四角が2つ重なったアイコンが選ばれていない状態にする)。
-
ファイル → エクスポート
出てきた「エスクポート」のダイアログ(設定ウィンドウ)の中で、ファイル書式を「png」、ファイル名を「layout2」とする。 → 「エクスポート」ボタンをクリック → 圧縮率 6 で OK。
-
「layout1.png」と「layout2.png」を public_html にコピー。そのためには、「draw_○○」ディレクトリの中で、「layout1.png」のアイコンを右クリックし、コピー。
public_html のディレクトリの白いところを、右クリック → 貼り付け
- layout.html ( http://www.media.osaka-cu.ac.jp/~kiyoshi/info_edu/2007_first_half/layout.html ) を、以下の指示にしたがってダウンロードし、public_html に置くこと。
- layout.html を左クリックして表示させる。表示→ページのソース ソースファイルをコピーし、新たに開いた KWrite の白紙ページにペーストする。layout.html と名づけて public_html に保存する。
- あるいは
- layout.html を右クリックし、「リンク先を名前を付けて保存」を指示し、layout.html という名称で public_html に保存する。
WindowsのPowerpointの利用
上記の方法でうまくいかない学生については、WindowsのPowerpointの利用で乗り切ることにする。
Windowsを起動する
- Windowsの 起動方法:
- KDEパネルの左から6つ目ぐらいのアイコン(4色の旗のような、窓のようなものがはためいている)をクリックする。
- しばらくすると、Windowsのログイン画面が現れる(かなり時間が掛かる場合がある)。
入力欄のそばでクリックしないと、入力できる状態にならないようである。入力できる状態になったら、Linuxと同じ、ログイン名とパスワードを入力する。
- マウスカーソルが、飛び回って、居場所がわからなくなったりするので、入力する欄を切り替えるには「Tab」キー(アルファベットの「Q」の左)、「OK」ボタンのクリックの代わりに「Enter」キーを押す。
- 1〜2分で、Windowsのログイン後の画面が表示される(かなり時間が掛かる場合がある)。Windows の「My Document」の中に「PowerPoint」といった名称のディレクトリ(フォルダー)を設けておく。
「My Document」のウィンドウの中で、ファイル→新規作成→フォルダ
PowerPointの起動とファイル操作、表示
- PowerPointの起動
- 下記、ドラッグする(マウスのボタンを押し続けたまま、マウスを引きずる)手法と、メニューツリーの分岐点でクリックする(マウスのボタンを一度押したら手を離す)手法とがある。クリックの方が容易。
- (Windowsの窓の左下の)スタート→プログラム(→Microsoft Office)→PowerPoint
- ファイルメニュー
- できるだけショートカットキーを覚えること：【】で囲ったのは、覚えたほうがよいショートカット
- 「ファイル」 の下(「ファイル」というメニューを呼び出すには、【alt + f】)
- 新規作成 alt + f → n、【ctrl + n】
- 開く alt + f → o (既存ファイルを開く)、【ctrl + o】
- 上書き保存 alt + f → s、【ctrl + s】
.
- 名前を付けて保存 alt + f → a
- HTML形式で保存 alt + f → h (Webページ[いわゆるホームページ]用)
- 印刷 ctrl + p
真っ白いスライドを設ける
- 新規ファイルを開く
- 新規作成 【alt + f】 → n、【ctrl + n】
- 新規スライドを選ぶ
- 出てきたダイアログ(指定画面)で「新しいプレゼンテーション」
- Powerpointで、挿入 → 新しいスライド 右側の「スライドレイアウトの適用」で、たとえば、上から4段目の左側、「白紙」というレイアウトを選ぶ。
図形作成機能
- 画面下辺に図形作成関連のメニュー
- 線分、矢印線、長方形、楕円、横書きテキスト、縦書きテキスト
- ペンキ缶＝塗りつぶしの色、筆＝筆の色、線の太さ、線の種類、矢印の向き
- 図形の調整
- グループ化
- 順序＝図形の重なりの制御
- 配置、整列＝特定の線に図形の位置をそろえる、均等配置する
- 回転、鏡像反転
- オートシェイプ→基本図形
Powerpointで図を作成してウェブページから呼び出す
- ウェブページの中で、図を用いたい場合、Powerpointで作図した後、.png 形式で出力し、それをHTMLファイルで呼び出すのが便利である。Powerpointで作成した図の場合、コピーしたり、拡大縮小したり、左右反転や回転したりするのが容易である。また、基本的な図形パターンや修飾文字パターンがたくさん用意されている。
-
Powerpointで、挿入 → 新しいスライド 右側の「スライドレイアウトの適用」で、上から4段目の左側、「白紙」というレイアウトを選ぶ。もう一度、挿入 → 新しいスライド 右側の「スライドレイアウトの適用」で、上から4段目の左側、「白紙」というレイアウトを選ぶ。最初のスライドを模様替えの前、後のスライドを模様替えの後とする。
-
1枚目のスライドに、部屋の模様替えの図を描く。まず、柱と壁を作る。できたら、柱と壁の全部を選んでグループ化(図形の調整 → グループ化)する。グループ化した柱と壁を選び、編集→コピー 2枚目のスライド(今は真っ白)のどこかをクリックし、編集→ペースト。
-
1枚目のスライドに、机や椅子の図形を作って配置する。椅子などは、台形と楕円などを組み合わせて作り、グループ化する。グループ化した椅子をコピーしたりする。
机や椅子を全部選び、編集→コピー 2枚目のスライド(今は、柱と壁のみ存在)のどこかをクリックし、編集→ペースト。机や椅子の位置を動かす。
適当な名前(たとえば layout.ppt )でファイルを保存する。
-
まず1枚目のスライドを選んでいる状態で、ファイル → 名前を付けて保存 → ファイル保存のダイアログの中で、下の「ファイルの種類」欄で、.png 形式を選ぶ。ファイル名は、英数字とする。保存場所は、「My document」の中の「Powerpoint」とする。「保存」とすると、このファイル形式で出力(エクスポート)するのが、現在のスライドのみかスライド全部かと聞いてくるので、「現在のスライド」をクリックする。ファイル名は、layout1.png とする。
次に、2枚目のスライドを選んでいる状態で、同様の操作をする。ファイル名は、 layout2.png とする。
画像(「.png」)ファイルを移動
-
下図の「Powerpoint」の中にある画像ファイル、すなわち、layout1.pngとlayout2.pngを、「public_html」に移動する。Windowsの中で作業しても、Linuxの中で作業してもよいが、Linuxの中で作業する方が、わかりやすいであろう。
ディレクトリの構造
課題(来週の11:50まで)
- 演習(1)
- http://www.media.osaka-cu.ac.jp/~kiyoshi/info_edu/2007_first_half/nagata_picture.pdf のスライド15
- 演習(2)
- http://www.media.osaka-cu.ac.jp/~kiyoshi/info_edu/2007_first_half/nagata_picture.pdf のスライド25、26 をもとに発展させたもの。想像のものでも実在のものでもいいので、街路や、施設内の建物の配置や、部屋あるいは店のレイアウトや、鉄道あるいは道路の路線図や、古代・中世・異世界などの国や州の配置図などを、大枠を同じにし、その上のレイアウトを変えて2枚作る。Starsuit7図形描画か、それがうまく動かない場合には、Powerpointを用いる。
以上