« 2006年12月 | トップページ | 2007年2月 »

2007年1月31日 (水)

Webページ制作プロジェクト(1)

情報Aの授業。1月19日の記事の続き。

この時期は前期入試や3年次の卒業テストなどが絡んで授業の進度が乱れる。私は比較的進んでいるクラスと最も遅れているクラスを受け持っている。遅れているクラスというのは、当然授業の合間が開いている訳なのでHTMLの基本の習熟度が浅くなりがちだ。カゼで休む生徒の対応も大変になってくる。早めのフォローが大切だ。

進んでいるクラスはすでに3時間目が終わり、3ページ目を完成させた。そろそろEditorの操作にも慣れ、タグのミスも自分で発見できるようになってきた。情報Aの選択者にはプログラミングの単元は無いが、タグ打ちの期間を長く取ることで、プログラミングの素養を養っていると考えている。

3時間目の後半には今まで作ったページの写真画像に対して、ALT属性を設定した。

1月23日の記事「盲学校の見学から・・・」に記述したように、盲学校のピクトグラムを用いて障害を持つ人たちの存在とそのための「Webのアクセシビリティ」の必要性を説いている。また、12月には様々な福祉施設を訪問して互いに情報交換をして知識/理解を深めている。

ALT属性を設定する利点として、

  1. リンクが切れた場合の表示
  2. マウスオーバーによるツールチップ表示
  3. 音声ブラウザでの読み上げ
を説明した。(テキストブラウザについては言及しなかった。)
最初の2つは実験しながら生徒も喜んでいたが、「音声ブラウザ」の説明時には、生徒の目が急に真剣になって静まる・・・・

「産業社会と人間」と「情報A/B」の連携によって、一度体験したことを繰り返し振り返り、深く掘り下げていく。「体験」を「経験」に昇華させていくことができる。この成果が表れてきているようだ。

さらに、Webページ作成が進んだところで、色覚特性の異常による画面(モノ)の見え方を体験させる。富士通アクセシビリティ・アシスタンスの Color Doctor を教員機にインストールして使う予定だが、何をどのように見せるか思案中である。aromaticKamさんの実験も大変参考になる。

今年の1年次がどんな作品を作り上げるか、楽しみである。

参考までに、情報Bの授業も間もなくWebページ作成の単元に入る。科学的な理解だけではなく、情報社会での人間的な付き合い方を学んで終わってほしい。
にほんブログ村 教育ブログ 高校教育へ

| | コメント (0) | トラックバック (0)

2007年1月30日 (火)

本当にあった恐ろしい話(2)

職場で常用しているXPのノートPC。先々週、SchoolAgreementのインストールキットが届いたので、Office2007TR2版から正規版に乗り換えようとした。上書きでインストールしようとすると、TR2版をアンインストールせよという指示が出た。

プログラムの追加と削除からOffice2007TR2をアンインストールした。その後、メールチェックをすると・・・・

続きを読む "本当にあった恐ろしい話(2)"

| | コメント (0) | トラックバック (0)

2007年1月29日 (月)

本当にあった恐ろしい話(1)

現在、VistaRC1+Office2007である作業をしている。職場にSchoolAgrementがあるので、Office2007はボリュームライセンスで正規版を使っている。VistaもBusiness、Enterpriseの正規版を学校で入手しているが、今の作業に支障が出るのはまずいので、これが終わるまではRC1のままで行く。VistaRC1は今年の6月1日まで有効だ。

さて、この作業をしている仲間がある実験を行った。日時の設定を変更したという・・・

続きを読む "本当にあった恐ろしい話(1)"

| | コメント (0) | トラックバック (0)

2007年1月28日 (日)

副教材編修会議(4)

1月14日に続き、都内の某出版社で標記の会議。今日が最終回。

全員の原稿がほぼ出そろい、全様が見えた。互いの分担で被っているもの、抜けているもの、移動した方がよいものを洗い出す。私は最終章なので、影響を受けることが多い。ページの調整に苦労しそうだ。

画像はVistaのAeroを切ってキャプチャすることになっていたが、私(ともう一人)はこれを忘れていた。全ての画像が撮りなおしになる。今週の半ばには完成して提出。厳しいがなんとかするしかない。

それよりも困るのはOffice2007にはまだ不具合があること。私の担当に関してはオブジェクトの複数選択が上手く行かないことが致命的。他の方の分担でも不具合が報告された。逐次リビジョンアップとパッチ対応していくのだろうが・・・

| | コメント (0) | トラックバック (0)

2007年1月27日 (土)

CG/映像プロデュース・マネジメント講座

デジハリ東京本校にて、標記の無料講座に参加

市ヶ谷からお茶の水に移動。19:00から2時間の講座。
何度も書いているが、こういう研修は視野を広げる為に本当に役に立つ。

講師はテレビ朝日CG担当部長の酒井陽寿氏。50名ほどの参加者、ほとんどがデジハリ生だろう。巨大スクリーンでの迫力ある映像を交えて、テレビ番組とCGについて分かりやすく説明していただいた。概要を記す。

■CGの変遷と日本テレビ界
時系列を追ってのトピックス紹介。代表的な映画をあげることでその時代のCG技術がわかる。酒井氏も一員として手掛けた技術の中で、2001年に水泳競技中継を商用番組に耐えるものにしたことが挙げられた。イアンソープの頃だ。「コース別に水面に国旗が映り、泳ぐ競技者とともに世界記録時の位置がラインで移動していく。」というもの。

■テレビでのCGの活用・用途
コンピュータと連動することでリアルタイムのテロップを流すことができる。代表として選挙速報番組。各党首の2頭身人形が画面に並び、当選者が出る度に人形がお辞儀をする。このCGを放映したときの視聴率はかなりのものだったという。その後、各テレビ局がしのぎを削っている。この7月の選挙に向かって、すでに打ち合わせが始まっているという。
アタックNO1やアストロ球団のように、実写+CGの番組。アタックNO1では、ボールなしでシャドウプレイの撮影を行って後でボールを合成している。アストロ球団も同じ、摩球に空振りする場面など、見ていて楽しかった。
今では、合成はありふれたものだ、細かい技術の進歩はコンピュータとソフトの進歩。
酒井氏が「動く絵葉書」と名付けている、ボード状のCGで手で持つことができるという技術。これは、061121のMaking of DEATH NOTEの記事にも書いたが、トラッキングという技術。実際には、ブルーバックにブルーの台があり、そこにブルーの板が立ててある。この板にマーキングがあって、アナウンサーはこの板を持って動かす。このマーキングの動きに追随してCGが貼りこまれるというもの。このトラッキング技術はFlameやAfterEffectなどのソフトで実現するが、テレビで生放送するためには相当な準備が必要だろう。

■番組制作のスケジュール
例えば19時からのニュース番組では、昼12時に集合し放映内容を決定。CG班は17時までに素材を納品するという。その他、サッカー中継に際してのスケジュールなどを伺った。

■その他の項目
テレビ局のCG人材と資質/テレビ局のCGの可能性/テレビ朝日のミッション

当然、テレビ朝日からは人材確保/デジハリからは受講生のモチベーションの高揚/受講生からは自分の未来さがし、これらが絡み合って成り立つ企画。私のような外部からの参加者は・・・受講の意欲を高められる。

実は来年度の課題研究でCGやVFXに興味を持っている生徒がおり、彼を支援するためにも予備知識を固めておく必要がある。
にほんブログ村 教育ブログ 高校教育へ

| | コメント (0) | トラックバック (0)

大学入試での教科「情報」採用と実施について

教育家庭新聞社主催の標記セミナーに参加(出張扱い)

会場は市ヶ谷、日本棋院隣の自動車会館ホール。定員90名の座席がほぼ満席、ほとんどが高校教員。都立高校の推薦入試日と重なったため、このようなセミナーでお目にかかる都高情研の先生方は不在。神奈川からは、発表者の田邉先生・小林先生の他、情報部会の委員3名、顔を存じている方が4名程。

昼まで横浜にいたので、遅刻して入る。
久保田裕・コンピュータ著作権協会専務理事の「インターネット時代の著作権教育」は最後の少ししか聞けなかったが、参加者を引き付けるおもしろそうな内容だった。(残念)

東京農工大の辰己丈夫助教授、専修大学の竹村憲郎教授から入試科目採用大学として30分づつ報告。辰己助教授からは「本大学情報工学科のカリキュラムに耐えられる基礎体力を測定するために、情報の試験は必要。情報を使った入試には、専門家を目指すための入試と専門家でない人のための入試がある。」、竹村教授からは「情報関係の学科を先駆的に創ってきた流れから試験を実施した。高校においては情報科専任教諭の採用を期待し、我々はその教員育成が役割。」というキーワードを拾えた。

昨年の情報で受けた受検者数についてはけして芳しいものではなかったようだ。東京農工大が●名、専修大学では合格者数○名。その○名がどう育つかは内外でも気になるところだ。

慶応義塾湘南藤沢中高等部の田邉則彦先生からは、「これからの教科情報授業への視点」として、小・中・高でインターネットを利用した国際交流が行われるが、本質は変わらないことを行っている。この情報教育の同時性を乗り越える発想で、体系化が望まれる。また、『知の共有』と題して、「知らないこと」が恥ずかしいのではなく、「知ろうとしないこと」が恥ずかしい、ということを伝えたい。という意見。(全く同感です)

パネルディスカッションでは、
高校現場を代表して神奈川大学付属中高の小林道夫先生から、「入試科目として生き残るためには、■情報関係学部に入学する生徒の情報能力を試すのは当たりまえ。■大学から「数学」「英語」と同様に「情報」が出来る生徒が欲しいというメッセージは?■塾が認知していない。・・・」という意見。

慶応義塾大学の大岩元教授からは、「UNESCOが発展途上国支援のために情報教育を勧めている。インドやアイルランドのように国を挙げた教育が成功している国もある。日本は・・・?。プログラミングが情報教育の中核。」という意見。

パネルディスカッションと会場からの意見は、田邉先生の名司会で盛り上げられた。

■セミナーの趣旨以外で得たこと。
1.神奈川の情報部会研究大会(5月25日予定)で、県内に拠点を置く情報入試を行った大学からの事例報告とパネルディスカッションの企画担当をしている。お招きする予定の専修大学竹村教授と連絡を取れたこと。
2.N出版社の方とセミナー実施の相談ができたこと。
3.ブログ繋がりの、Y○○○○n氏と面識ができたこと。
にほんブログ村 教育ブログ 高校教育へ

| | コメント (2) | トラックバック (1)

デジハリ070127

DTPアートディレクターコース専攻 (第9回) 授業メモ

本日からDreamweaver8を使ったWeb制作を習う。
普段、教材を作成するために、フリーソフトのMKEditorとDreamweaverMX2004を使っている。学校の情報A・Bの授業でもMKEditorでタグを書かせている。一部の応用的な科目ではDreamveaverを使っているが、もっと活用したいものだ。DW8ではCSSに関する機能も充実したというのでこれも楽しみである。

【午前前半の授業】
ソースのMETAタグとSEO対策の説明。DWではフォントセットにShiftJISが設定される。・・・

マージンの説明。色つきのテーブルを書き、IE6/NN7.1/FireFox1.5で、デフォルトのマージンの違いを確認。
topmargin(bottommargin)/leftmargin(rightmargin)はNN7.0以下では対応しない。marginheight/marginwidhはIEは対応しない。そこで、HTMLでマージンを設定する場合、この4つの属性を全てbodyタグに記述すること。

リンクの色の設定とターゲットの説明。実験のため、訪問済みの色を戻す。履歴をクリア/Cookieの削除。

【午前後半の授業】
リスト各種の説明。DISKマークはIEとNN/FFで微妙に違う。ローマ数字はMACでは使えない。
定義リストのCOMPACT属性はテーブルでそろえるより便利そうだが、ブラウザによって異なる。

その他、Pタグ、コメントアウトなど。

【午後の授業】
早退させていただく。午後からDWに入るそうだ。

■午後の早退は、市ヶ谷で情報の入試に関するセミナーに参加するため。

| | コメント (0) | トラックバック (0)

2007年1月26日 (金)

大学生の授業見学

情報の教職課程の学生の見学日程が決まった

横浜国立大学の情報の教職課程を取っている学生は、今年で3回目の訪問になる。担当教授が本校の学校評議員でもあり、本校が開校した年から教育実習生の受け入れやインターンシップの受け入れなどの連携を行っている。さらに関東学院大学からも学生の授業見学を受け入れる運びだ。2月は高校入試と卒業準備で受け入れられる日程が限られている。大学側との調整がようやく済んだ。

例年、大学の試験が終わった2月中に行っている。大学では授業の一環として、学生を引率してくる。情報の教員を目指すとは言っても、高校時代には情報の授業を受けていない者ばかり。自分が高校の頃の施設や高校生のスキルを想像してくる学生もいる。総合学科であるので、多くの科目を設置しており、大学でやっている内容と同レベルの科目もある。また、選択する生徒も目標をもっているのでスキルも高い。教員になった初年度から教えられないと困るので、早い内から現場の様子を知ってもらいたい。

今回の訪問者には、「情報A」「情報B」の他に、「アルゴリズム」「図形と画像の処理」「Webプログラミング」「情報処理技術」「DTP入門」の科目を案内する。そして、授業準備や評価活動などの説明を含めて懇談会を行う。課題として、感想と今後の抱負を、私と大学の教授あてに同報メールで送ってもらう。過去2年の学生からのメールは財産である。

この授業見学は次世代の情報教員の育成のために行っている。授業への負担は大きいが、学生の意欲と資質の向上に繋がればと期待している。

■個人でも授業見学に興味をお持ちの学生・教職担当者は、可能な範囲で対応させていただきます。学校あてに連絡をおねがいします。
にほんブログ村 教育ブログ 高校教育へ

| | コメント (0) | トラックバック (0)

2007年1月25日 (木)

Ajax特別セミナーより

昨日の記事の補足

講師の須田超一氏がAjaxを含むWeb制作を勉強する人のためのポータルサイトを制作中。今後コンテンツを充実させていくと言い、紹介してくださった。

その他、講義の中で紹介のあった参考サイトを自分のメモを兼ねて記します。

●Ajaxという言葉の誕生
◇Ajax:A New Approach to Web Applications
http://www.adaptivepath.com/publications/essays/archives/000385.php
翻訳:http://antipop.zapto.org/docs/translations/ajax.html

●Ajaxが使われているサイト
◇Google Map: http://maps.google.com/
◇Google Suggest: http://www.google.co.jp/webhp?complete=1&hl=ja
◇SCOTTSCHILLER.COM: http://www.scottschiller.com/
◇STSRT.COM: http://start.com/
◇Google Calender

●ライブラリー入手サイト
◇prototype.js: http://www.prototypejs.org/
◇script.acul.ou: http://script.aculo.us/
 ☆デモ: http://wiki.script.aculo.us/scriptaculous/show/Demos
◇Rico: http://openrico.org/rico/home.page
 ☆デモ: http://openrico.org/rico/demos.page
◇Dojo: http://dojotoolkit.org/
 ☆デモ: サイトの See it in action のカテゴリにある
◇Yahoo UI Library: http://developer.yahoo.com/yui/
 ☆デモ: http://developer.yahoo.com/yui/examples/

●郵便番号データダウンロード
◇ゆうびんホームページ: http://www.post.japanpost.jp/zipcode/download.html

●JavaScript&Ajax
◇JavaScript DOMリファレンス:http://www.openspc2.org/JavaScript/JavaScript_DOM/index.html
◇Ajaxload.info(お勧め): http://www.ajaxload.info/
◇GoogleMapリファレンス: http://www.openspc2.org/Google/Maps/
XML=>JSON変換
◇XML.OvjTree: http://www.kawa.net/works/js/xml/objtree.html
◇JKL.ParseXML: http://www.kawa.net/works/js/jkl/parsexml.html

ちなみに、お勧めと言われたAjaxload.infoはダウンロード中を示すGIFアニメをブラウザ上で簡単に設計し、GIF画像としてダウンロードできる。Web制作の授業でも使えそうだ。

| | コメント (0) | トラックバック (0)

2007年1月24日 (水)

Ajax特別セミナー

デジハリ渋谷校の無料セミナーに参加

渋谷駅ハチ公前交差点の人込みをかき分けて駆け込む。19:30~21:30の標記セミナーに参加するためだ。

定員20名程度の部屋に約30名がイスを寄せ合って座っている。講師は有限会社グローバルイーネットワーク代表取締役須田超一氏。既に秋葉原校では開校している「Ajaxマスター講座」の講師でもある。渋谷校での開講に向けて、授業概要の説明会を兼ねている。

まずはAjaxとはどのようなものかという説明から入る。XMLHttpRequestという非同期通信のための技術を利用して、ブラウザ画面の書き換えをともなわず、任意のタイミングでWebサーバと通信を行うことができる。事例として定番のGoogleマップ/Googleサジェスト/Googleカレンダー、その他Ajaxが使われているサイトをいくつか紹介する。

次に、ブラウザとXMLHttpRequestの仲介をしてくれるライブラリの説明。複雑なJavaScriptが書けなくても、数行の記述でさまざまな機能を組み込むことができることのデモンストレーション。Google/Amazon/はてな等のAPIを組み込む方法のさわり(授業の核の部分はさすがにおしえない)。DOM制御などの概念を説明。

休憩後、ゆうびんホームページより郵便番号データをダウンロードできることの説明。(ただし、10万件以上あるのでExcelでは開けない)これをデータベースとして、GoogleMapのAPIと先読み入力(Googleサジェストの類)を組み合わせて、マッシュアップした練習サイトを紹介。デジハリのサーバのRSSも利用して、デジハリ各校のボタンをクリックすると、その地点のGoogleMapに吹き出しで住所と開校講座一覧が表示されるというもの。このようなものを授業で作りながら、様々なAPIをアイディア次第でマッシュアップする力を育てるという。

当然、データベースやサーバサイドのプログラミングの技術が必要だが、ある程度まではライブラリの活用で行けるという。
受講対象者は

  • デジハリのWeb/Java総合Proコース修了レベルの方
  • インタラクティブなWeb制作スキルを学びたい方
  • Web2.0に対応できるエンジニアを目指す方
ということで、2時間×24回の授業。受講料は、一般299,250円、在校生220,500円也。

【2月13日追記】この日の内容補足は、翌日の記事で紹介します。実習編のAjax体験セミナーの記事はこちら。【以上】

ちなみに、本校のK藤先生とT田先生の「Webプログラミング」の授業でもAPIを利用したWebページ作りに取り組んでいる。技術のネタ本もずい分出ているが、授業で使うには環境設定に骨がおれそうだ。K藤先生もAPIキーが通るときと通らないときがあると悩んでいた。

次の無料体験は、今週土曜の19:00~21:00、お茶の水デジハリ東京本校の『CG/映像プロデュース・マネジメント講座テレビ編』。
同日午後の教育家庭新聞社主催
「第5回IT活用セミナー、大学入試での教科「情報」採用と実施について」
の会場が市ヶ谷だから、ちょうど良い。

| | コメント (0) | トラックバック (0)

2007年1月23日 (火)

盲学校の見学から…

WebアクセシビリティはCSSの普及が追い風になって、話題に上ることが多い。
今年度の神奈川県情報部会の活動の中でも、5月の研究大会では株式会社UDITの関根千佳氏の講演「情報のユニバーサルデザインは21世紀のキーワード」、6月の研究会では、横浜市立盲学校における「ICTを活用した自律支援学習プログラムの見学」を行ってきた。AromaticKamさんのブログにも報告されている。

これらのテーマを扱った背景として、神奈川県情報部会の部会長の勤務校が福祉コースをもち、手話を使っていること。同部会ネットワーク委員長が横浜市立盲学校の先生達と共に、学校にネットワークを整備するボランティア活動を行っていたことが影響しているのだろう。

個人的には、後者の盲学校の現場見学から衝撃的なインパクトを受けた。
「盲」「準盲」「弱視」という定義も知らずに参加した自分が恥ずかしく思えた。点字の図書をスラスラ読む10代の生徒、PCの画面に数文字しか表示できないくらいに拡大して本を読む大人。音声ブラウザにたよってコンピュータの学習をしている高校生。ぶつからないように右側通行で廊下をあるき、点字で教室を確認する小学生。みんな「生きたい」という後姿をみせてくれた。健常者よりもはるかに少ない情報を必死で探して暮らしているのだ。最寄といってもかなりある駅まで、白杖をつきながら点字ブロックや音付き信号を頼りに帰っていくのだろう。「放置自転車などにぶつからないで」と祈ってしまう。

この見学は、ちょうど情報Aの授業でシャノンのコミュニケーションモデルを説明した後。田中洋先生がアップしてくださったスライドを利用して、ピクトグラムを使った情報伝達の実習をしていたときだった。単元を延長して、盲学校内の施設に掲示されているピクトグラムを紹介し、さらに「ユニバーサルデザイン」まで話を拡大した。

6月の内容だが、授業展開を紹介させていただく。

「ある学校のピクトグラム」というタイトルでスライドを作った。
「県内のある公立学校で使われているピクトグラムを見せるから、それが何の教室か、またこれはどの様な学校かを考えてください。」という前ふりで、分かりやすいものから順に見せていく。
図書室/更衣室/コンピュータ室など、はじめのうちはすぐ正解が出るが、作業学習室や自立活動室あたりからヒントが必要になる。さらに、按摩実習室・マッサージ実習室・鍼灸実習室となると頭をひねりながら1つ2つの正解がでる。ではどんな学校なんだろう?・・・
Pictgram8
というストーリーで、

  • 同年代でも障害とたたかって生きている人がいること。
  • 健常者以外の方々にこそわかり易いピクトグラムが求められていること。
  • そのニーズに応える為にバリアフリー/ユニバーサルデザイン/Webアクセシビリティの考えが必要なこと。
の認識に発展させていった。

自作したピクトグラムを「ユニバーサルデザイン/バリアフリー」という観点から考察してレポートにまとめさせた。いつものように、Web形式でも提出させて相互閲覧を行った。

12月に総合学科必履修科目「産業社会と人間」で福祉施設訪問を行う。この事前学習としても価値があった。
私個人に対しては、色の勉強のために色彩検定2級の受検を決定づけた。

■授業の資料「ある学校のピクトグラム」の電子データはこちらからどうぞ。
PDF(186KB) / WindowsのみPPT(1,059KB)

ぜひ、機会を見つけて盲学校/聾学校/養護学校を見学されることを勧めます。情報の授業での説得力が違ってきます。
にほんブログ村 教育ブログ 高校教育へ

| | コメント (4) | トラックバック (2)

2007年1月22日 (月)

富士通アクセシビリティ・アシスタンス

昨日/一昨日の記事の続き。富士通アクセシビリティ・アシスタンスのサイトから3つのツールをダウンロードして使ってみた。これらの機能をレポートする。

■WebInspector
ファイルを指定またはURLをペーストすると、富士通アクセシビリティ指針70項目のうち、優先度が高くHTMLソースからチェック可能な25項目をチェックして結果を表示する。サイトを構成するソース毎に問題点の指摘とその解説がなされる。画面のキャプチャは取りきれないので省略するが、下の2つのツールとは違った面からWeb制作を強力に支援してくれるツールである。
このWebInspectorは神奈川県の県立高校のWebページ作成担当者に推奨されているソフトでもある。

■Color Doctor
ファイルを指定、または、URLをペーストすると、左ウィンドウにオリジナルのWebページ、右ウィンドウには変換フィルタを通したページが表示される。(クリックで原寸表示)
Colordoctor
変換フィルタは、グレースケール/第一色覚(赤)/第二色覚(緑)/第三色覚(青)の4種類。これらを切り替えるとリアルタイムで表示される。
図は、1月7日の記事の一部に フィルタ第一色覚/第二色覚/第三色覚 を通したもの。
 ○オリジナル
Colordoctor_original
 ○第一色覚(赤)
Colordoctor_red
 ○第二色覚(緑)
Colordoctor_green
 ○第三色覚(青)
Colordoctor_blue

■ColorSelector
数値で指定またはスポイトで抽出した背景色と文字色の組み合わせで見やすさを判定する。白内障や色覚障害の人にとって見やすいかどうかをアンテナの本数で表す。3本:最適/2本:良好ではない/1本:どうにか見える程度、という判定。一方の色を固定して、他方の色を抽出するためにブラウザ上でスポイトを移動するとリアルタイムに判定評価が変化する。
このColorSelectorは、昨日紹介したカラーコントラストアナライザーと似た機能である。
Colorselector

本日/昨日のツールを紹介していただいたデジハリの岡田先生にこの場を借りてお礼を申し上げます。

| | コメント (0) | トラックバック (1)

2007年1月21日 (日)

Web Accessibility Toolbar

昨日の記事の続き。さっそくInfoaxiaのサイトからダウンロードして使ってみたので、使い勝手をレポートする。

同サイトには『オーストラリアの視覚障害者団体が設立したNPOのAISが開発したツールバーです。1人でも多くの人に使ってもらうことで、Webアクセシビリティの重要性に気づいてもらいたいという開発者の思いから、最もシェアの高いWindows版IEのツールバーとして開発されました。』と解説されている。
また、アクセシビリティに関する記事や用語集もあるので、Web制作の知識を深めることができる。

実験してみて、予想以上の機能に驚いた。
アクセシビリティの検証ができるだけでなく、Web制作の協力な支援ツールである。

CSSのメニュー一覧
HTML/CSSのメニューからは、CSS有効/無効という定番機能の他、「div要素の順序と外枠を表示」でサイト内の構造が一目で分かる機能。CSSを使ったWebページを学習するとき、協力な支援ツールになるだろう。
ちなみに、私はCSSの有効/無効切り替えには「ス切りボ」というツールを使っている。「ス切りボ」はツールバーに組み込まれるがスペースを取らないのが嬉しい。

シミュレーションのメニュー一覧
これは「シミュレーション」のメニュー。「第一色覚特性」とは、赤と緑が識別できない色覚特性だが、このユーザーからの見え方をシミュレーションする機能などアクセシビリティを検証することに役立つ。
また、ウィンドウのサイズを 640x480/800x600/1024x768および任意サイズに変更する機能は レイアウトを重視したWebページ開発を支援してくれる。

当ブログの色の一覧「画像」のメニューからは、このようにCSSで使用している色の一覧を表示する機能や、画像を代替テキスト表示に切り替える機能などがある。
特に、新規ウィンドウに使用している画像とその情報の一覧を表示してくれる機能は、複雑なページを制作する際に役に立ちそうだ。

色のメニュー
特にWebアクセシビリティの機能として気になったものは、Infoaxiaのサイトからダウンロードして組み込める「カラーコントラストアナライザー(CCA)」。特に、Web ページ上のテキストの判読性および画像上の文字の判読性を判断するのに役立つツールだ。

拡大鏡で色をピックアップこのように、自動拡大表示から前景色と背景色をピックアップすると、色覚特性ごとの見え方と結果を表示する。色相差と明度差の両方の基準値をクリアーしていないと×マーク。
次のような2つの表示モードがある。(クリックすると原寸表示)

カラーコントラストアナライザーの判定例1カラーコントラストアナライザーの判定例2

ちなみに、上の左の結果は当ブログのタイトル部分の判定であり、コントラスト不足であることが判る。タイトルとサイドバーのブルー/ブログの背景のグレーで校舎の色を表現しており、メインの部分でもないので当面変更はしない。
タイトル部には白地も混在しているので、ブログタイトルと説明文の可読性が悪い。「明らかに改善の必要がある」ことを認識しているが、あえて事例として残しておきたい。

明日は「富士通アクセシビリティ・アシスタンス」のツール群をレポートする。

| | コメント (0) | トラックバック (1)

2007年1月20日 (土)

デジハリ070120+アクセシビリティ

DTPアートディレクターコース専攻 (第8回) 授業メモ(ライブバージョン)

DTPのコースだが、WEB関係の授業にはいる。
DTPだけでは業界に出ても通用しないのでWEB関係の技術も身につけるため。前回のFireworksから始まって、計5回の授業を行う。本日はHTMLの基本なので余裕はありそうだ。休み時間ごとにアップしていく。

午前の前半:DTDの意味とHTMLの構造
TeraPadを使ってDTDの記述と基本タグの練習。bodyタグとfontタグの属性、色について。

午前の後半:アクセシビリティを絡めた文字の強調など
文字の強調にはemタグ、さらなる強調はstrongタグを使う(通常は斜体と太字)。見た目は同じ効果のiタグとbタグは使わないように。音声ブラウザの種類にもよるが、設定した単語を音で強調してくれる機能は、em/strongでしか得られない。
hrタグとtableタグの実習とブラウザによる見栄えの違いの説明。WEB制作を仕事にするならば、WindowsとMacで各ブラウザのバージョン毎のチェックが必要。

昼休みに質問:高校の授業でアクセシビリティを実習させたいが。。
回答:音声ブラウザは高価。富士通アクセシビリティ・アシスタンスに3種のフリーのツールがある。

WebInspector(ウェブインスペクター)
ウェブサイトが高齢者や視覚に障害のある方にも読みやすいかを診断する
ColorSelector(カラーセレクター)
アクセシビリティの高い背景色と文字色の組み合わせを、リアルタイムに確認することができる、開発者の為の支援ツール
ColorDoctor(カラードクター)
仕事や生活の中で利用するウェブサイトや動画、プレゼンテーション資料で色のアクセシビリティをチェックするためのツール
さらに、Webアクセシビリティを理解し実践するためのポータルサイトInfoaxiaを紹介していただいた。ブラウザを使って、Webページのアクセシビリティをチェックしたり、シミュレーションしたりすることができる「WebAccessibilityToolbar」というツールをダウンロードできる。

午後の前半:テーブルのセルの結合と枠の幅/余白の設定・背景色に馴染んだタイトル画像
たった1時間でこれだけの内容を教えるとは!
3x3のテーブルを作り、rowspan/colspanで結合する実習。borderの値でエンボスのような枠線を付けるのは流行らない。マットな枠線を設定する。属性の説明を受けながら、tableの属性にbgcolor="#666666" border="0" cellspacing="1" cellpadding="5"、trの属性にbgcolor="#cccccc"を設定。10分間、自由なテーブルを作成。
次にウェブセーフカラーを背景色にしたHTMLを作成。ホトショで、同じ色を背景にしたタイトル画像を作成。文字には適当な効果をつける。イメージ>トリミングで切り取って、Web用に保存。HTMLに配置。

午後の後半:背景画像の応用と、ボタンにリンクの設定。
マットにHTMLの背景色を設定した透過GIF。左からグラデーションを付けた2500x1pxの背景画像。
画像格納用のフォルダ名は「images」か「img」。前者はアプリケーションで作業するのに便利(デフォルト名)。後者は手書きで作業するのに便利。
画像にリンクを貼る場合は、imgタグにborder="0"を設定して、リンクの枠線を消す。

内容が多くて結構つかれた。HTML初めての人は居残って質問している。

さて、これから近くの情報科学専門学校に寄ってみよう。
基本情報技術者対策講座に参加している生徒の様子を見に。
にほんブログ村 教育ブログ 高校教育へ


| | コメント (0) | トラックバック (1)

2007年1月19日 (金)

Webページ制作プロジェクト(0)

情報Aの授業でWebページの制作が始まる

1月からはWebページ制作実習の中で総合的な知識・技術・マナーを身につけていく。
総合学科高校としてスタートして3年目。例年どおりの単元であるが、生徒のスキルアップに伴い、要求するレベルも高くなる。エディタでHTMLのタグを打たせて、3階層、計10ページを超すサイトを構築していく。いくつかの規定のページを制作しながら、HTMLの基礎を理解し、最終的には自由テーマのページを含めて完成する。CSSは科目「Webプログラミング」で専門に扱うので、当面HTMLでいく。

1期生から始めているが、作ったサイトは校内のWebサーバに置き、3年間自由に閲覧することができる。当然、先輩たちの作品も見ているので、目は肥えている。公開することがどういうことかを実体験するので、記述のマナーや写真の扱いなども理解していく。メディアリテラシーを自ずと身につけていく。

情報の授業は「生」のものを扱うことが大切、そして作品は公開が前提というスタンスである。いよいよ科目の目標の集大成の段階にはいる。

最初の規定ページは、総合学科の原則必履修科目「産業社会と人間」の各単元から、実習における写真を選び、その説明を加えていく「1年間の振り返り」のページ。4月の「宿泊研修」、5月の「社会人講話」、10月の「事業所見学・ジョブシャドウ」、12月の「福祉施設訪問」の4単元について、自分が関わった内容の写真を選択して、トリミング・リサイズし、必要ならばぼかしを入れる。左に写真・右に説明というようにテーブルを使って整形していく。

次の規定ページは「情報Aの作品集」と題して、今までにWord・Excelなどで作成してきた文書をWebページ形式で保存し、これらにリンクを貼る。最低5つの作品があり、統合していく中で1年間の授業を振り返る。

次の規定ページは「プレゼンテーションの振り返り」。ホールでプレゼンした際のビデオからキャプチャした画像と、伝えたかったこと・反省点などの記述で構成する。ここからは、ページレイアウトも自由になる。

次の規定ページは「選択科目の紹介」。毎週木曜の午後2時間は全年次が合同の選択科目。この科目の紹介および短期集中講座の紹介を行う。総合学科の多様な科目の内容を共有するために作る。

いよいよ自由テーマの「マイページ」。12月中から予告してあり、テーマを設定して記事の構想と画像の準備を進めさせている。

最後に自己紹介・編集後記のページを加えて完成となる。
完成直前には、グループ内で「マイページ」のプレゼンと相互評価。完成後は、クラス内での閲覧と相互評価を行う。

情報Bではあまり時間が割けないので、もうすこしコンパクトな形のサイトを作成する。こちらはシミュレーションのキャプチャ画像などを組み込んだものになる(予定)。

サイトのフォルダごと提出させて、1年次全員分を統合する。クラスごとに個人のトップページへのリンク集・選択科目ごとにまとめて「選択科目の紹介」ページへの直接リンク集・「マイページ」のテーマからの直接リンク集を作る。

制作上の様子は逐次報告していきたい。
にほんブログ村 教育ブログ 高校教育へ


| | コメント (0) | トラックバック (0)

2007年1月18日 (木)

プレゼンの追加指導

12月6日の「プレゼンの総括」の続き

情報の授業12時間に渡ったプレゼンプロジェクトの結果、各クラスからの推薦者を全国プレゼンテーションコンテストに応募する予定であった。残念ながら、今年度はコンテストが中止になったので、代案を考えていた。結局、来年度の応募用のプレゼンに仕上げてビデオ録画することになった。

該当の6名には、冬休み直前に予告してあった。まず、今週は3名に対し、3分用のプレゼンを5分用に膨らませる作業を行った。まず、校外の方に分かるように、「事業所見学」という行事の趣旨を説明することを追加した。そして、事業所見学の報告だけではなく、自分が学んだことや提案などを明確に盛り込むように指導した。手直ししたものに指導を重ねていく。

そして、本日いよいよ録画。プレゼンを1分程度始めたあたりでミスが続出。交互に録画するが、3名全員が完了するまで2時間近くかかった。担当する教員もヘトヘトになってしまうが、その苦労は必ず報われる。

この指導の中で、トップレベルのプレゼン能力を持った生徒たちがさらにパワーアップする。また、彼らは発表の機会は多いので、年次の生徒への波及効果も見込まれる。撮ったビデオは、次年度の授業の教材にもさせてもらう。 ・・という訳である。
にほんブログ村 教育ブログ 高校教育へ

| | コメント (0) | トラックバック (0)

2007年1月17日 (水)

校内教育ネットワーク

PC教室5部屋/図書室など3部屋のPC/各教室のジャックを結ぶ教育用ネットワーク。
事例として、本校の設定を紹介させていただきます。

昨日の記事のように、教育用ネットワークは教育委員会ネットワークでインターネットに接続しているが、公務LANとは切り分けられている。本校では「清陵ネットワーク」と呼び、移動プロファイルとホームリダイレクトによって、どこでも同じ環境で作業することができる。総合学科の特徴という訳ではないが、多数の科目が、複数の場所で、授業時間以外にもPCを活用するために役立っている。

ネットワークドライブとして「配布用フォルダ」と「提出用フォルダ」を設定している。

「配布用フォルダ」には、科目ごとのフォルダが切られていて、選択者のみアクセス権(読み込み/実行)が設定されている。つまり、選択していない科目のフォルダには入れない。授業での配布データは、ここからマイドキュメントにコピーさせる。

「提出用フォルダ」にも科目ごとのフォルダが切られていて、選択者のみアクセス権(書き込み)が設定されている。生徒は、ファイル名の先頭に個別の4桁の番号をつけたデータを、ここに提出する。一度提出すると削除できないので、その場合は教員に削除を依頼する。また、他人の提出物を開いたり取り出したりすることはできない。

本校では、あえてアクセスフリーの「共有フォルダ」は設けていないので、生徒どうしがネットワーク上でデータの交換をすることはできない。(メディアに記録すれば可能だが)
もちろん、教員の権限では「配布用フォルダ」も「提出用フォルダ」もフルアクセスなので、必要な場合は教員がデータの移動を仲介する。

ID/ パスワードの発行と、フォルダのアクセス権設定という年度更新には非常に手間がかかる。しかし、セキュリティやネットワークモラルを体験をもって教えることができる。
にほんブログ村 教育ブログ 高校教育へ

| | コメント (0) | トラックバック (0)

2007年1月16日 (火)

教育委員会ネットワーク

神奈川県立高校が教育委員会ネットワークとして一元管理されて3年目。

県立高校で接続する全てのPCが、付与されるクラスAのIPアドレスとMACアドレスによって、3つのVLANに切り分けられている。登録外のPCが接続されたり、不審なアクセスがあると、県サイドで検知されて問い合わせが入る。

本校では、2つのVLANを使用している。
1つは生徒用の教育LAN。PC教室や図書室、自習室、ガイダンスルームなど、生徒が扱うPCが接続されている。このネットワークは、県のサーバによるフィルタリングが厳しく、閲覧できないサイトも多い。ブログは全て閲覧できない。当初は見れないサイトがあると苦情が出たが、最近ではセキュリティ教育が浸透してきたからか、苦情の声は聞かなくなった。本校では8か所のPCを開放しているので、管理上、このシステムの恩恵を受けている。
また、校内の措置として移動プロファイルとホームリダイレクトを設定している。生徒はどのPCからログインしても、同じ環境で作業が可能。さらにノートPCが27台、各教室に教育LANのジャックがあるので、接続すればPC教室と同環境。学習環境としては大学に近いだろう。

もう1つは教員用の公務LAN。教員の過半数が各自のPCを申請し、IPアドレスを設定して接続している。生徒LANよりはフィルタリングは緩い。例えば生徒LANと違って、ブログの閲覧は可能であるが、記事を書いたり、コメントを書いたりすることはできない。YahooIDでログインはできてカレンダーは使えるが、メール/ブリーフケースは使えない。私用で使う隙どころか、自分の机に座る時間もない状態なので、苦にはならない。

別途、閉じたLANがあり、こちらでは単位制支援システムが出欠から調査書までを管理している。県立の単位制高校は同じシステムが入っている。
また、事務関係のLANもあり、今年度から人事・給与システムが動いている。出張や休暇の入力を行う。

とにかく、この3年間で業務が一気にネットワーク化された。便利になった反面、台帳管理やプリンタ関係/セキュリティ対策関係など、管理の仕事が担当の数名に重くのしかかってくる。
にほんブログ村 教育ブログ 高校教育へ

| | コメント (4) | トラックバック (0)

2007年1月15日 (月)

教育公務員の副業

神奈川における教員の副業の申請

この分野はあまり詳しくはないのだが、ここ数年は頻繁に申請書を書いている。
例えば教科書や副教材の執筆/セミナーの講師/検定の監督/検定の作問委員/県が主催する公開講座の講師などを行う際には、事前に申請をし、許可を受けていなければならない。これは公務員として当然と考えるが、以前は確かに甘かった。県立高校の教員であった俵万智さんの「サラダ記念日」を事例としていたころだ。

私は2種類の様式で、教育長あてに申請を行っている。
これらの申請文面と記入項目を示すが、当然のことなので職務上の秘密事項ではない。(1)は県立高校公開講座講師、(2)は先日のような副業の場合に用いる。

(1)職務専念義務免除(兼職等)承認申請書
次の通り職務に専念する義務の特例に関する条例第2条(教育公務員特例法第21条第1項)の規定に基づき、職務専念義務の免除(兼職等)の承認を申請します。
・就こうとする業務の属する団体について
 団体の名称/所在地/事業の内容/事業形態の種別
・就こうとする業務について
 職名/勤務の態様/勤務時間/収入額/兼業の期間/職務内容と責任の程度
・兼職等を必要とする理由
・兼職等が現職遂行に与える影響その他参考事項
・承認に関する校長の意見

(2)営利企業等の従事許可(等)申請書
地方公務員法第38条第1項(及び職務に専念する義務の特例に関する条例第2条)の規定に基づき、次のとおり営利企業等従事の許可(及び職務専念義務の免除の承認)を申請します。
・就こうとする業務の属する団体について
 団体の名称/団体の種別/所在地/団体の事業の内容
・就こうとする業務について
 職名等/従事期間/勤務の態様/勤務日/勤務時間/収入/職務内容と責任の程度
・従事を必要とする理由
・従事が現職遂行に与える影響その他参考事項

(1)(2)とも管理職から教育長に提出し、許可(等)通知書を受ける必要がある。

出版社からの仕事の場合は、個人あてと校長あての依頼書をいただいて添付している。キチンとした手続きが事故を防止するだけでなく、安心して仕事に取り組むことができる。

タイミングよく、能城さんのブログにも教員の副業に関する記事がある。
にほんブログ村 教育ブログ 高校教育へ

| | コメント (1)

2007年1月14日 (日)

副教材編修会議(3)

12月16日に続き、都内の某出版社で標記の会議。今日は一日がかりだった。

まだ未完成だが私の担当する章の草案を提出。
他の執筆者にとっては未開の分野なので、興味津津に見ていただいた。前の章と重なるネタがあり、その部分は作り直し。また、操作手順などの細かい部分での手直しも多い。しかし、このような作業から学ぶことは多く、苦労した以上に為になっている。

他県の執筆者の学校では、未履修問題を解決するために来年度からは毎日50分×7時間だそうだ。また、チャイムを前後1分ずらして休み時間は実質8分という事例(生徒は知らない)も聞いた。

授業時間の確保について個人的には賛成だが、まずは短期集中講座できっちり36時間の授業を推進していく。
にほんブログ村 教育ブログ 高校教育へ

| | コメント (0) | トラックバック (0)

2007年1月13日 (土)

デジハリ070113

DTPアートディレクターコース専攻 (第7回) 授業メモ(ライブバージョン)

授業開始30分前に登校。
スタッフがあわただしく掃除をしている。一室では、オールナイトで作品制作をしている3Dグラフィックスの受講生が10名弱。10時の授業開始ぎりぎりまで頑張っている。特に3D系はソフトとハイスペックPC、そして集中して作業する時間の確保が必要。互いに刺激しながら学習を進める環境は充実している。

4時間×6回分でイラレ(Illustrator)とホトショ(Photoshop)を終えた。今日はFireworksの予定。
さらに次回からはDreamweaverの予定だが、これらのソフトの連携は効率的なWeb制作には必須。Flashはオプションとして有効。体験した演習本の中ではWorksCorporation社のWebサイト制作トータルマスターブックはおススメである。MX2004対応だが、旧マクロメディア製品を扱いながら、Adobe製品との連携も記述されている。Web制作現場の作業工程を体験できる。

さて、午前の授業が始まる。今日は休憩時間を利用して記録する。

午前の授業(前半1時間)
すでに、イラレとホトショを使えるので、Fireworksのツール一通りは1時間で説明される。イイトコ取りのソフトで、こんなに簡単に効果がついていいのという感じ。さすがWeb用、テキストのアンチエイリアスの設定ができるのは便利だ。画像上の小さな文字にアンチエイリアスがつくと可読性が落ちるからだ。(イラレはできない)

午前の授業(後半1時間)
画像処理やテキストの扱いの説明。イラレとホトショの機能を大方備えているし、操作もいたって簡単だが、Web用に特化しているので機能は甘い。特にDTPで必須のCMYKモードは扱えない。

午後の授業(前半1時間)
FireworksでGIFアニメを作成する。ホトショ+ImageReady/イラレよりも簡単にできる。ただし、SWFでの書き出しはできない。今は、バナーでもGIFアニメからFlashアニメに移行しているのだが。(同じマクロメディアのFLASHでやれということか)
1作目は、テキストを5フレームほど複製し、位置と色を変える。イメージプレビューで形式をアニメーションGIFにして書き出す。
2作目は、図形を(グラフィック)シンボル化して、インスタンスを配置。
3作目は、図形を(アニメーション)シンボル化して、フレーム数を5、その他の数値を設定。フレーム数の追加確認が出るのでOK。画面上に出るバーのスタートとゴール位置を調整して完成。他の図形も加えて、GIFアニメで書き出す。

午後の授業(後半1時間)
シンボルからインスタンス2つを配置し、2つを選択して、修正>シンボル>インスタンスのトゥイーン。ここでフレームの分配をするか、後で透明度や位置を個別に変えてからフレームに分配するか、この違いを理解する。
お決まりのボタン(アップ/オーバー/ダウン/オーバーダウン/ヒット)の作成。

今日も内容が濃く、FireworksやWeb制作の経験が無い方には厳しそうだ。
授業終了後、1時間は授業担当とTAが残っている。消化できなかったことはこの時間にリカバリーする。

2月10日までの課題の説明があった。黒に映えるビジュアルデザインの制作。

| | コメント (0) | トラックバック (0)

2007年1月12日 (金)

「探究」の論文締め切り

3年次の「探求(卒論にあたるテーマ研究の科目)」の論文提出日だった

「探求」とは総合学科高校の課題研究の科目で、本校独自の名称である。1年前に研究テーマを決め、4月から本格的に研究活動にはいる。夏休みにはフィールドワーク。9月に中間報告。12月に各グループ内で研究発表、そして代表者14名による年次発表が行われた。その後、論文にまとめる作業をしていた。2400字以上のWordデータを指定のフォルダに提出する。

毎週金曜の午後がその時間で、今日が最後の授業で論文の締め切り日になっている。冬休み中も学校で作業する生徒が多かったが、今週の放課後はPC教室が連日満員だった。図書室や自習室のPCを含めて160台を超すが、一杯のため、自宅のPCで作業をしてくる生徒がいる。これらの生徒がFDやUSBメモリでデータを持ってくるので、ウィルスチェックの作業だけでも大変であった。その上、読めないFDもあって苦労した。

ほとんどの生徒が提出できたようである。
私は情報科として、1年次から情報機器を活用した学習環境/発表環境の充実をサポートしてきたので、探究の主担当者と互いの苦労をねぎらった。

1期生として、常に初めての教育活動を行ってきたこの年次の方々には本当に頭が下がる。あとは卒業式を残すのみ、よい式になることを期待している。

早くも2年次の次期主担当者がアンケートを計画している。もちろん次年度の授業運営に備えるためだ。私も情報科学系列からの担当者として参加させていただくつもりである。
にほんブログ村 教育ブログ 高校教育へ

| | コメント (0) | トラックバック (0)

2007年1月11日 (木)

生徒写真のWeb掲載について

生徒の写真をWEBに公開するにあたって、許諾確認作業を進めた

何回か記事にしてきた総合学科合同WEB。総合学科高校を幅広く県民の方に理解してもらうために、生徒委員と専門学校のボランティア学生とのコラボレーションで作成しているサイトである。現在、県内11の総合学科高校ごとに「目で見る総合学科(仮称)」という新コンテンツを作成している。この締め切りが迫る。

本校では生徒委員の活躍でほぼ完成した。アップの前に生徒の写った写真の許諾を得る必要がある。「活き活きとした学校生活」を伝えるために、表情が見える写真が多い。

まず、写っている本人からの許諾確認を行う。1年次は情報の授業中に校内ネットワークで確認。これからWEBページ作りの単元なので、いいタイミングである。2・3年次はロッカールームに全ページをプリントアウトしたものを掲示。いずれも閲覧期間中に都合の悪い写真があれば申し出てもらう。希望に合わせて修正したり、写真を差し替えたりする。

同時に、保護者あてに「写真の使用の目的」などを説明する文書を配布。特に保護者の許諾が必要であろう写真は、写真を付けた許諾願いを配布して諾否の判断を仰ぐ。これらの手続きは県のガイドラインを満たすように注意を払う。

生徒の写真掲載について、自治体のガイドラインによって厳しさが異なる。Y須賀市の総合学科では生徒の写真はまず無理だそうだ。
にほんブログ村 教育ブログ 高校教育へ

| | コメント (0) | トラックバック (0)

2007年1月10日 (水)

情報部会と鶴見総合高校

分掌会議後、情報部会の会合に向かう

神奈川総合高校にて、新しい部会委員を迎えての情報教育委員会。
新入生テストの問題および、1年終了時に行う「完成テスト」の試行問題の検討などが議題。

これには間に合わなかったが、その後に引き続き行われた合同委員会の途中から参加する。

8月24日、この学校を会場に開催する関東大会の打ち合わせが議題の一つ。仕事の内容を大きく3つに分け、それぞれを主幹する委員会を決める。私は夏休み中のほぼ全てが授業のため、在宅でできる「リーフレット作成」の仕事を引き受けた。昨年度の埼玉大会のそれがとてもよくできていたのでプレッシャーを感じる。

明日の教材準備があるので、会議後の新年会は遠慮させていただいた。
しかし、普段より早い時間なので(18時30分)家の近くにある鶴見総合高校に立ち寄る。一緒に免許講習会に通ったA先生を訪ねた、コンピュータ教室の更新や通信制WGの情報交換をおこなった。

鶴見総合高校では、ウィルス対策ソフトをかいくぐって侵入するスパイウェアが検出されるという事例を聞いた。S快というハードディスク復元ソフトをいれているが、ウィルス対策ソフトのフォルダはメンテナンス外であり、ここが狙われるようだ。ウィルス対策ソフトを破壊する恐れもあるので、同じ環境の本校も心配になった。幸い、スパイウェアの検出が表示されていないが、そのような兆候には気をつけたい。

| | コメント (0) | トラックバック (0)

2007年1月 9日 (火)

負の二進数

「ビット列を反転して1を加える」と二進数の正負が逆転する。

この理屈(アルゴリズム)が分からないまま使っている学生はいないだろうか?
負の数に対しても同じことをしたら正の数になるのか? という学生もいそう。
負の数を正の数に変換するときは、1を引くの? これもいそう。
理解の仕方の問題である。

例えば、A=00101010 の正負を逆転した数を知りたいとする。

Aに加えて、11111111となる数は?
・・・11010101 つまりAのビット列を反転した数。

では、さらに1を加えたら?
100000000だが、オーバーフローして、00000000 すなわち0になる。

ということは、A=00101010 に対して、
「ビット列を反転した上に1を加えた数」を加えると0になるということ。

だから、Aに対して「ビット列を反転して1を加えた数」はAの正負を逆転した数である。
この話の最初で設定したAは正であろうが、負であろうが理屈は同じである。
(授業では、符号ビットの話をするが、ここでは省略)


昨日のブログの内容もこれと同じである。
RGBは加法混色だから、
ある色に対して加えたら白になる色は?・・・補色である
あるビット列に加えて111・・・1になるビット列は?・・・反転したビット列である

さすが、hohhohさんはすぐに気がついてくれました。

実際に、画像処理ソフトで反転した画像の同じ座標の色はビット列の反転です。
フリーソフトIlfanViewでも簡単に実験できます。
画像をクリックするとその点の色情報がタイトルバーに表示されるので、
適当な画像をネガポジ変換して確認すればよいのです。
このソフト一つでかなりの事を教えることができます。本校の授業では重宝しています。


さらに発展させると、
二進数Aから二進数Bを引くということは、
二進数Aに、二進数Bの正負を逆転した数を加えるということ。
つまり、Aに「Bのビット列を逆転して1を加えた数」を加えるということ。

色においては、
ある色のレイヤーに補色のレイヤーを重ねて、その補色のレイヤーの不透明度を50%にする。
下のレイヤーが50%だけ透けてみえる。つまり、両方のレイヤーが50%づつの色で重なる。
数値で考えると、それぞれの色のビット列の半分どうしの和。つまり111111…1の半分。
白と黒の中間値の50%グレーになる。

「もとの色が何であっても、一面グレーになる。」
この理屈。昨日のエンボス加工の実験をしてから説明するとバッチリだ。
にほんブログ村 教育ブログ 高校教育へ

| | コメント (3) | トラックバック (0)

2007年1月 8日 (月)

「エンボス加工のアルゴリズム」と「情報デザイン」

5日の研修会で紹介する予定だったネタ。情報BでもOKです。

定時制の前任校では社会人聴講生を受け入れながら実施していた情報A。PeintiamII(200MHz)メモリ16MBのWindows95マシンだったが、全日制と共有なので片身の狭い思いをしながら使っていた。

画像処理検定2級の勉強をしていた当時、高価なPhotoshopなど手がでなかった。得た知識を試したかったので、UNIXから移植のフリーソフトGIMPを使っていた。小さな画像なら結構動いた。

平成14年の情報Aで行った「エンボス加工」と「昼の景色を夜景に変える」というネタは今でも「図形と画像の処理」の授業で使っている。
Himawari
エンボス加工の手順とそのアルゴリズムは簡単だ。

(1)画像の複製
写真をPhotoshopに読み込み、背景レイヤーをコピーする。
(2)上のレイヤーの階調を反転
色調補正のメニューにある。RGB情報のビット列が全て反転し、その色は元の色の物理補色になる。
(3)上のレイヤーの不透明度を下げる
だんだん下のレイヤーが透けて見えてくると同時に色は無彩色になってくる。
(4)不透明度50%でストップ
この時、上下のレイヤーの色情報が重なり合って、一面がグレーになる。反転したビット列との合計は11111・・・111で白を表すが、平均なので値はその半分、色は50%グレーになる。RGBそれぞれのビット列が右に論理シフトして、0111・・0111・・0111・・になる。
(5)上のレイヤーを数ピクセルだけ移動する
色合いが急に変わるエッジの部分は、ずれたことで50%グレーと異なった色になる。色が単調だった部分は50%グレーに近い色のまま。これがエンボス化された画像になる。

というように、コンピュータが裏で行っているビット列操作を考察しながら教えることができる。もちろん、エンボス加工というフィルターも用意されており、最適なアルゴリズムを用いているだろう。

とにかく、画像処理ソフトに用意されている各種のフィルターは、アルゴリズムのバッチ処理なのである。画像処理も画像描画もコンピュータの内部ではビット列操作であり、そのアルゴリズムを考えることは正に「情報デザイン」であろう。

新カリキュラムにはこのようなアプローチを期待している。
にほんブログ村 教育ブログ 高校教育へ

| | コメント (5) | トラックバック (1)

2007年1月 7日 (日)

葉欄

「はらん」または「ばらん」と読む

昨晩は隣の実家で第2回の新年会。近くに住む父親の兄弟が集まった。

メインの料理はもう何十年も変わらない母親手作りの握り寿司。
マグロの握りに敷かれている葉欄が話題になった。
Haran
今では本物の葉欄が使われているのを見ないという話題であった。現在では刺身にはシソの葉というイメージだが、昔は葉欄だったという。写真は庭に生えている葉欄の葉に、包丁で切りこみを入れたものである。小さい頃、防腐効果があるといっておにぎりを包んでもらったことを覚えている。

いずれにせよ、深い緑色が使われている理由は「マグロの赤身を鮮やかに見せるため」ということは定説である。せっかくなので、実際に色を配置して実験した。
Taihi4
4つの大きな正方形の中には同じ赤色の正方形を置いた。すぐできるのは、コンピュータの便利なところだ。
赤の心理補色は緑である。左の2つは「補色対比」により、彩度が増して見える。一番左は、地色の暗い緑による「明度対比」で明るさも増して見える。
右の2つは、赤に色相が近い色であり「彩度対比」の効果は少ないものの、地色が暗い赤の場合は「明度対比」によって明るさが増して見える。

「色情報」が互いに影響する効果はまだまだある。
「対比」と逆の「同化」の効果を利用しているものの代表例に、みかんのネットがある。
まだ黄色い未熟なみかんも、細くこまかい赤色のネットの色に同化して完熟のおいしい色に見える。これが緑のネットだともっと未熟に見えてしまう。
枝豆やオクラが緑色のネットに入っているのも同じ効果である。

色彩検定の本にも載っていて、読むとなるほどと思うが、実際に作画して体験することが大切だと考える。
にほんブログ村 教育ブログ 高校教育へ

| | コメント (3) | トラックバック (0)

2007年1月 6日 (土)

デジハリ070106

DTPアートディレクターコース専攻 (第6回) 授業メモ

本日から、正規のDTPクラスに参加。10名ほどの受講者に講師1名、TAが2名。
隣に座った男性から、私のブログを見つけたと言われてビックリ。うかつなことは書けない。

暮れまでは土曜の公開講座を担当していたので、火・金夜のWEBクラスに振り替えていた。DTPの画像処理はWEBより高いクオリティを求めるので、授業の厳しさは予想していた。ノートを取る余裕もない。操作を間違えるときつい。WEBクラスでは出番がなかったTAが、ひっきりなしに呼ばれている。私も何度もお世話になった。

午前中の授業では、冬休みの宿題の確認。全員の作品を相互で閲覧する。何でもよいから6点の画像処理をしてくるという課題。私は年賀状用に補正した画像と、金属・水面・爆発の素材を提出した。
Kadai3
この3作は、昨日の委員会で授業の小ネタとして他の教員に示した。

人物画像の顔色の修正。
特殊な方法で顔の部分を選択して、明るさを調整。さらに目の周辺の明るさとコントラストを上げ、周囲となじませる。もう一枚の写真との色合いを合わせる。

午後は写真の切り抜き。
羽毛のある洋服を抽出の機能を利用して切り抜く。できたアラへの対処方法を学ぶ。羽毛の隙間の余分な部分は、不透明度を落とした消しゴムで。抜けてしまった穴の部分は、ヒストリーブラシで復元する。

イラレで段組をつくる方法のひとつ。
長方形を描き、テキスト内文字ツールでテキストボックスにして文字を入力。書式>エリア内オプションで段組みを設定する。

オブジェクトの文字の回りこみ。
オブジェクトとテキストボックスを選択して、オブジェクト>テキストの回りこみ。

授業後、全員が残ってもくもくと復習している。
私はブログに記録を残すことで復習にかえる。


| | コメント (0) | トラックバック (1)

2007年1月 5日 (金)

情報デザインの研修会

午前中、本校にて標記の研修会が開催された

講師に東京工科大学メディア学部の若林尚樹教授を招く。昨年11月の「情報デザイン教育の高大教育連携プロジェクト」に同席した際に、神奈川の情報科教員との接点を持ちたいという意向を伺っていた。今後の教育内容として情報デザインには特に関心を持っていたので、私からもお願いした次第である。本日は教材開発委員会が1日設定されていたが、この午前の部をいただいてそれが実現した。

参加人数は若林先生を含めて19名。内訳は神奈川の教員9名、東京都の教員4名、情報の教員を目指す大学院生2名。この分野のカリキュラムと検定を担い、若林先生が監修のWebデザインを出版するCG-ARTS協会の方が3名。CG-ARTSからは「Webデザイン」「入門Webデザイン」とそれぞれに対応する検定試験2級・3級の問題を献本していただいた。

まず、若林先生から大学における「情報デザイン」の授業実践について、カリキュラム編成と絡めて説明をいただいた。授業にはテキストを使わず、全てWEBでの資料を用意するという。大変分かりやすい説明であり、「説明」も「情報デザイン」であると実感した。内容は11月18日の記事と重複するが、さらに「デザインの能力のうち、論理的な部分が7割、天性のセンスが3割。教員は、その論理的な部分を指導する。」という説明があった。これは共感した。絵のセンスがない私がDTPの授業で情報デザインを教えている立場そのものを表しているからだ。

元が数学や理科が多い情報科の教員は、デザインを教えるというと構えてしまう。この一歩を踏み出せない方々に、かつてそうであった私からも伝えたい。

デザインには正解が無いが、セオリーはある。このセオリーを説明することと、全生徒の作品を並べて講評を加えることで、生徒の能力は自然と高まっていく。セオリーは多くの書籍から学ぶことができる。また、講評も最初はハッタリでよい、自身を持って言い切ることが大切。講評は繰り返すうちにだんだん説得力のあるものになってくる。

休憩の後、CG-ARTS協会からテキストと検定のカリキュラムの説明をいただく。

さらに、高浜高校のM先生、都立新宿山吹高校のT先生の授業実践の紹介。実践の内容は濃く、FlashやIllustratorを活用していた。一通り参加者全員から今後の展望や、実践事例の紹介が行われ、若林先生より講評をいただいた。

私としては、大学・高校・出版社の相互で有意義な情報交換の場になったと思う。もちろん、教員を目指す学生にとっては、未知の分野として勉強になったはずである。次の機会には具体的なテーマをあげて、さらに深い情報交換を進めたい。

午後の教材開発委員会でも各委員から実践報告があった。私が紹介した授業の小ネタは、日をあらためて紹介する。
にほんブログ村 教育ブログ 高校教育へ

| | コメント (1) | トラックバック (3)

2007年1月 4日 (木)

仕事初め

まず良いことから始まった。

年末にWebでCG検定の結果が公開された。11月26日に、3名の生徒がCGエンジニア検定の3級を受験している。私は団体受験会場のIDとパスワードを入力すれば結果を知ることができる。しかし、そのIDとパスワードは校内で保管されているため、年末年始の間、結果を知りたくてウズウズしていた。勤務に就くとすぐに検定のサイトで確認した。やった!3名とも合格だ。

ブログでの報告を忘れていたが、他の記事で忙しかったからだ。11月12日に11名が色彩検定3級にチャレンジして、その結果が12月中旬に届いた。結果は全員合格とはいかなかったが、9名が合格。一般の合格率よりも高いと思われる。合格に喜ぶ生徒と握手、教師の冥利に尽きる瞬間だ。CG検定3級も色彩検定3級も合格者が申請すると1単位が認定される。合格した生徒は間違いなく35時間以上の勉強をしているはずだ。

私は、神奈川県情報部会の情報教育委員会に属しており、技能審査(資格・検定)の単位認定について担当している。情報に関する技能審査にも様々な分野があるが、技能審査のカリキュラムによってそれぞれの分野ごとに体系化が進んでいると考える。何かを学ぼうというならば、そのように体系化されたカリキュラムを利用すると良い。これは、私自身が検定にチャレンジしながら知識を身につけてきた経験から思うことだ。

情報という教科は「親学問がなく、体系化されていない」という言葉を聞くが、分野ごとには体系化されつつある。今後、全ての分野に精通する人材が多く出てくれば、全体を整理してくれると考える。 その昔、「医術」だったのが体系化されて「医学」になったように。 私が注目している「情報デザイン」という分野も、数年後には体系化されるのではと考えている。

さて、その「情報デザイン」はどうなるか。明日の情報部会の研修会に期待している。

にほんブログ村 教育ブログ 高校教育へ

| | コメント (2)

2007年1月 1日 (月)

今年の初心 0701

明けましておめでとうございます

試行ではじめたつもりでしたが、予想以上に多くの方がこのブログを訪れていただきました。皆様のおかげで、適度な緊張感から充実した年を終えることができました。行政の方からの(私的な)励ましもいただきまして、神奈川の教育への責任感を感じています。 ありがとうございました、本年もよろしくお願いいたします。

いろいろな意味で、今年は私の情報教育活動の節目となります。例えば、短期集中講座と情報科教員育成の実践研究。 8月に神奈川で開催される、情報部会関東大会。 技能審査を活用した自主的な学習意欲の育成。 通信制の新タイプ校のカリキュラム作成の作業。 そして県内初の民間人校長の勤務校が、県からも県民からも期待される総合学科として成功するための教育実践。 総合学科全体が輝ける連携活動の開発。 などなど、ここに書けないものもあります。

そういう中で一番の課題は、将来の情報科を支える後継者の育成です。私自身が未熟なままですが、それだけに大学で教育を受けてくる新採用教員には期待を抱いています。何ができるかというと、教員を目指す学生が、その志を達成することができるように励まし、資質を向上する機会を作ることです。大学の先生方にもお願いすることもありますし、他の教員の手助けが必要なこともあります。

幸い、県内県外の方々とのネットワークができてきました。思いを同じくする方々とも知り合えました。情報の科目の宝庫である総合学科で得た知識/技術を提供しながら、自分に足りないものを得ていくことができそうです。

ブログの紹介文のように、「情報科の教員を目指す大学生、大学の教職課程の担当の方に現場の様子を紹介する」ことを常に意識しながら今年も頑張ろうと思います。

ご指導、ご鞭撻よろしくお願いいたします。
にほんブログ村 教育ブログ 高校教育へ

| | コメント (6)

« 2006年12月 | トップページ | 2007年2月 »