情報処理B(長嶋)

    お知らせ(2/8)

    「課題」の提出期限となりましたので、皆さんの作品を評価して、成績付けを行いました。 作業が終了し、JohoB.htmlおよび関連データについては消去するも残すも自由となりましたので、お知らせします。

  • シラバス

  • 履修登録に関する告知 (2009.09.14)

  • 抽選結果の告知 (2009.09.29)

  • 受講者確定 (2009.10.06)
      		0721017		0921001		0921003		0921005		0921006
      		0921007		0921008		0921010		0921011		0921016
      		0921019		0921025		0921033		0921034		0921035
      		0921038		0921039		0921041		0921045		0922001
      		0922004		0922007		0922008		0922009		0922010
      		0922011		0922012		0922013		0922014		0922015
      		0922016		0922017		0922018		0922019		0922020
      		0922021		0922022		0922023		0922024		0922025
      		0922026		0922027		0922028		0922029		0922032
      		0922033		0923002		0923005		0923007		0923010
      		0923012		0923013		0923015		0923017		0923018
      		0923022		0923024		0923025		0923026		0923030
      

  • 話題メモ
    • 1週目(9/29)
      • (この日は受講登録受け付けのみ(^_^;))

    • 2週目(10/6)
      • 受講登録者の最終確定
      • 本日のメディアアート SUAC先輩の映像作品より
        • 竹田悠子「ごちそうリレー」
        • 山口翔「trip」
      • 講義のローカルルールについて
      • MAF2009について→CG作品を募集します(^_^)
      • 11/29のCGクリエイター検定に挑戦する人は来週までに申込んで下さい
      • ある先輩のお話(就職活動にWebテクニックが生きた(^_^))
        • 東堂のぞみ Web作品
        • 白坂愛 Web作品
        • 権平雄一 Flash作品
      • コンピュータの内部構造について
      • コンピュータとネットワークの関係について
      • 「SUAC内」(www.is.suac.ac.jp)と「SUAC外」(www.suac.ac.jp)の区別
      • 本日のキーワード
        • CPU
        • リソース
        • デバイス
        • メモリ
        • ストレージ
        • OS
        • アプリケーション
        • URL
        • IPアドレス、IPv4とIPv6
        • ドメインネーム
        • Webサーバ
        • プロキシサーバ
      • 講義の準備
        • デスクトップの3点セットを用意
          • マイコンピュータ(詳細表示)
          • ブラウザ(Firefox)
          • メモ帳
        • エクスプローラの設定
          • IEなどは絶対に開かないこと
          • 隠し事は災いの元(^_^;)
          • 全ての拡張子を表示する
      • 大事なお話
        • 「Windows+IE+Outlook+Word」な人はいつ死んでもおかしくない
        • インターネットには「匿名」は無い
        • イケナイ事をしてはいけない、というお話
        • 今後の講義の進め方、質問について

    • 3週目(10/13)
      • 本日のメディアアート SUAC先輩の映像作品より
        • 石川 アニメ初作品
        • 伊藤 作品(3回生)
        • 伴野 作品(3回生)
        • 平野 作品(3回生)
      • MAF2009について→CG作品を募集中(今週中)
      • 11/29のCGクリエイター検定に挑戦する人は明日までに申込んで下さい
      • 「ホームページ(ブラウザ上のコンテンツ)の基本はHTMLである」
      • HTMLとは(背景にある思想を理解しよう)
      • 「情報処理B」におけるHTMLと世間一般のHTMLとの関係について
        (参考)HTML要素(Wikipedia)
      • HTMLとその後に発展した技術との関係(この講義における扱い)
        • CGI
        • Java
        • Shockwave(Director)
        • Javascript
        • CSS
        • Flash
        • XML
        • 携帯モードHTML
        • ・・・
      • 共通「読み替え」ルール(1) : "Netscape" → "Firefox" として下さい
      • 共通「読み替え」ルール(2) : "Qドライブ" → "Rドライブ" として下さい
      • このテキストは1994年頃に作ったものです。
         ↓15年以上「上位互換」が続くHTMLの意義(文化)を考えてみよう
      • ホームページの作り方 Part1
        • 目標は「HTMLソースを読める」こと! (ツールで作るのは猿でも出来る)
        • 「HTMLのソースを読む」ということ
        • デフォルトのHTMLファイル名「index.html」「index.htm」
        • 上手いHPテクニックは「ページのソース」でイタダキ(^_^)
        • 「文字(コード)」に注意すること
        • 全角文字と半角文字、半角カタカナは常に厳禁 !!
        • ファイル名のピリオド以降を「拡張子」と言う
        • HPのHTMLソースはブラウザの「ページのソース」で必ず見える(秘密にできない)
        • デフォルトのHTMLファイル名「index.html」「index.htm」
        • タイトルは単なる題名でなく、ブックマークのリストとなるので重要
        • タイトルは「半角英数字」だけを使う、という習慣がお薦め
        • ファイル名には日本語厳禁(自分では見えてもサーバに置いたら見えなくなる)
        • ファイル名には「スペース」も厳禁(全角も半角も)
        • (半角英字で)大文字と小文字を区別する場合(Unixのファイル名/Java)と、しない場合(タグ、パソコンのみ)がある
        • 使用できる文字、使用してはイケナイ文字(Web自動翻訳の時代に向けて)
          • 全てにおいて 半角スペースは厳禁(スラッシュも)
          • 全てにおいて 「半角英数字」として使える記号は「-」と「_」だけ、と考えよう
          • ファイル名 半角英数字のみ 大文字小文字も区別する
          • ディレクトリ(フォルダ)名 半角英数字のみ 大文字小文字も区別する
          • URL 半角英数字のみ 大文字小文字も区別する
          • メイルアドレス 半角英数字のみ 大文字小文字は区別されない ハイフンで始まるのは禁止
        • BODYタグのオプション(1) 背景色とテキスト色、光の3原色、「色」と「光」
        • BODYタグのオプション(2) 背景色の16進数表現
      • 翌週までの宿題は以下です。
        • ここまでの内容を自分なりに理解して使えるように「復習」しておくこと
        • 自分なりの「背景色」「文字色」(16進表現)を捜してくること

    • 4週目(10/20)
      • 本日のメディアアート SUAC先輩の映像作品より
        • サイトウマリコ "POOR CLOWN"
        • クラゼミ英語学習アニメーション集
      • MAF2009について→CG作品を募集中(今週中)
      • ホームページの作り方 Part1 (続き)
        • BODYタグのオプション(3) 「Webセーフカラー」
        • BODYタグのオプション(4) 背景画像
        • 画像データについて
          • タテとヨコの比(アスペスト比)
          • 画面の解像度(VGA,SVGA,XGA,SXGA,...)
          • ホームページ上に見える画像は全てイタダキ可能。ただし著作権と肖像権を十分に考えること。
          • スクリーンショットは画素ごとにカラー値を持つ。BMP,PICT,RGB。
          • これをインターネットでは圧縮されたJPG(JPEG)かGIFに変換して利用する。(PNG)
          • 静止画データの使い分け : JPG
          • 静止画データの使い分け : GIF
          • 静止画データの使い分け : PNG
        • 背景画像は配色、コントラストなどに注意
        • 透明色指定により画像の後ろの背景色が見える
        • 背景をアニメーション画像にすれば騒然とした画面もできる(^_^;)
        • 「ルーブルのモナリザ」と「SUACのモナリザ」
      • 画像データ関係のお話
        • ローカルHTMLファイルからネット上の背景画像をURL指定するのはOK
        • デジカメの解像度設定に注意。ポスターやカレンダーでもないのに巨大なデータにするのは、 どうせ後で縮小するのでまったく無意味。
        • 賢いデジカメの選び方
        • ケータイからの画像利用
        • 「著作権フリー素材集」の活用
        • 焦点距離・絞り・被写界深度・シャッタースピード
        • 長嶋サイトの写真の素材集としての活用法
      • 翌週までの宿題は以下です。
        • ここまでの内容を自分なりに理解して使えるように「復習」しておくこと
        • 自分なりの「背景画像」+「文字色」を作る (タテヨコに繰り返し敷き詰めることを考慮する)

    • 5週目(10/27)
      • 本日のメディアアート SUAC4期生の作品より
        • 戸田 達矢 映像作品 ★要注意
        • 鈴木 絢 映像作品 → MAF2009展示作品に発展
        • 横山 早葉 (映像)インスタレーション作品
        • 松登 友樹 (サウンド)インスタレーション作品
        • 河原崎 徹 (サウンド)インスタレーション作品
        • 岡山 文香 インスタレーション作品 → MAF2009にて展示
        • 板垣 真美子 FLASH作品 → 1106 Webにあります
        • 権平 雄一 FLASH作品 → 1106 Webにあります
      • 来週11/3は祝日でお休みですので連絡です。碧風祭で「こんな企画をする」「こんな屋台を出す」「こんなライブをする」等の情報は長嶋までメイルして下さい。可能な限り、見に行きます(^_^)
      • MAF2009/文化庁メディア芸術祭について
        • 今年は文化庁があるので物凄くラッキーである
        • 来年からは六本木やリンツ(オーストリア)に行かないと見られないものが集結
        • プロが設置した展示機材/展示手法にも注目(予算=◇千万円)
        • 時間をやりくりして全ての展示を体験しまくろう
        • SUACの展示にも注目 (5ヶ月かけて制作した「ネジマキウォール」は5日間の展示のみで解体廃棄(;_;))
      • ホームページの作り方 Part1 (続き)
        • HTMLの考え方について(再考)
        • 水平線について
        • 水平線の長さを絶対値ドット数として指定することとパーセント指定することの意味
        • センタリング
        • 強制改行
        • 段落
        • 「強制改行」の連打
        • 「段落」の連打
        • HTMLの発想を強制停止させる「PRE」タグの使用には注意を
        • フォントサイズ
        • フォントカラー
        • 「見出し」は「フォントサイズ」+「段落」+「強調」
        • 強調(ボールド)
        • 「ブリンク」: HTMLに最初から備わっている「動的な表示」
        • いろいろな文字表現属性タグ
      • ホームページの作り方 Part2
        • 箇条書きについて
        • ブロック引用
        • インラインイメージ
        • 画像と文字、キャプションなど
        • リンク : HTMLの最大の本質
        • リンクカラーの設定(BODYタグで)
        • リンクカラーの設定(FONTタグで)
      • 翌週までの宿題は以下です。
        • ここまでの内容を自分なりに理解して使えるように「復習」しておくこと
        • 今後の教材として必要になるので、著作権/肖像権などの問題のない、「500*350ドット」程度の大きさのGIF画像またはJPG画像をRドライブに用意しておくこと(当日に携帯から送るのは禁止)

    • 6週目(11/10)
      • 本日のメディアアート 1期生の作品より「創作」について考える
        • 伊藤裕三郎
        • 内田涼子
        • 鈴木飛鳥
        • 鈴木未来
      • ホームページの作り方 Part2 (続き)
        • リンクカラーの設定(FONTタグで)
        • リンクボタン = 「リンク」+「インラインイメージ」
        • リンクボタンのBORDER
        • 「HTMLエンティティ化」について
        • 「隠しリンク」の例(1)        
        • ページ内リンク(Aタグのオプション)
        • メイルをいただく方法(注意点もあり!)
        • 「HTMLエンティティ化」について
        • 「隠しリンク」の例(2)      
        • ターゲットウインドウを開く
        • ダイナミックドキュメント
      • ターゲットウインドウの話
      • 「占い」サイトの自動生成
      • クリッカブルマップの実現手法のいろいろ(「HTMLからハミ出す技術」などについて 2)
        • CGIによる方法
        • Javaによる方法
        • JavaScriptによる方法
        • Flashによる方法
        • クライアントサイド・イメージマップによる方法
      • ホームページの作り方 Part3
      • イメージマップ(クリッカブルマップ)について
        • 実例 : 「今日の運勢」1106版 ←メイキング
        • クライアントサイド・イメージマップを作ろう
          • 画像を用意する
          • マップに使う座標をメモする
          • マップの定義
          • マップ画像の配置
      • 翌週までの宿題は以下です
        • 「クライアントサイド・イメージマップ」の手法による、オリジナルのイメージマップのあるホームページを作成して下さい
        • ここまでの内容を自分なりに理解して使えるように「復習」しておいて下さい

    • 7週目(11/17)
      • 本日のメディアアート SUAC先輩の映像作品より
        • 川野弘道 手書きアニメーション作品
        • 小出悠美香 "もちつもたれつ"
        •  ↑そのメイキング
        • 市川喜美子 Flash(サイト)作品
      • 先週の宿題「クライアントサイド・イメージマップ」のバグ(不具合)の理由について考察しよう
        • HTMLの思想の根幹は「人間は知的な中身に専念して」である
        • なので「タグのペア矛盾」など、初歩的なミスは大目に見て(ロバストに解釈して)くれる
        • 従来の「プログラミング」ではピリオド1つ抜けたミスで開発費10億円のミサイルが爆発した事もある
        • そんなHTMLでも対応できないミスが存在する !!
        • 「おかしい」と思ったらPCやHTMLやブラウザを疑うよりも自分のミスを疑うこと(確度99.95%)
        • 「クライアントサイド・イメージマップ」のバグの焦点は何か?? ※ ヒント「URL」
      • ホームページの作り方 Part3 (続き)
      • コメント
      • 強制非改行
      • 半角不等号を表示する特殊な方法
      • 上付き文字・下付き文字
      • ホームページの作り方 Part4
      • テーブル(作表)
      • フォーム(ユーザの入力を送信してもらう機能)
      • フレーム
      • 翌週までの宿題は以下です。
        • フレーム分割のあるホームページを作成して下さい
        • 分割された複数のフレームの中身が切り替わるようなリンク構造として下さい
        • ここまでの内容を自分なりに理解して使えるように「復習」しておいて下さい。

    • 8週目(11/24)
      • 本日のメディアアート FLASH/Shockwave
        • いろいろな古典的Flash
        • 先輩のWeb作品(コンテンツ)の例
      • 活躍する先輩のお話も少し・・・
      • 抜き打ちテスト
        • 過去に「宿題」としていた、オリジナルのイメージマップを見せて下さい
        • 過去に「宿題」としていた、オリジナルのフレーム分割を見せて下さい
        • 宿題をきちんとやっていた人は、それを2つ、画面に並べれば、もう完了です(^_^)
        • サボって宿題をやっていなかった人は慌てて教わって下さい(^_^;)
      • アクセスカウンタとサーバ統計
        • アクセスカウンタ/サーバ統計のメカニズムとCGI
        • 愚鈍なアクセスカウンタ
        • 賢いアクセスカウンタ
      • CGI(サーバ連携)を使わない、いろいろなコンテンツ (HTMLの拡張の歴史) のお話
        • テキスト PREタグ、PDF
        • 静止画 IMAGEタグ
        • Java APPLETタグ
        • OBJECTタグ
        • EMBEDタグ
        • サウンド
        • ミュージック(標準MIDIファイル)
        • ムービー(ダウンロード)
        • ムービー(ストリーミング)
        • FLASH(ダウンロード)
        • FLASH(ストリーミング)
        • Javaスクリプト
      • 翌週までの宿題は以下です。
        • 今日の「抜き打ちテスト」でドキッとした人は悔い改めて下さい(^_^;)
        • ここまでの内容を自分なりに理解して使えるように「復習」しておいて下さい。

    • 9週目(12/1)

    • 10週目(12/8)
      • 本日のメディアアート AniMusicより
        • Pipe Dream
        • Pipe Dream2 (メイキング)
          (メディア造形の学生は来年「サウンドデザイン」(必修)の中でAniMusicを全編観賞します)
      • サウンドとミュージックについて                    
        • 「コンピュータと音楽の世界」(長嶋他編著) → 図書館にあります(^_^)
        • 「コンピュータサウンドの世界」(長嶋洋一) → 図書館にあります(^_^)
        • コンピュータサウンド/コンピュータミュージック
        • MIDIの歴史
        • サウンドファイル *.wav/*.aiff/*.mp3
        • サウンドファイルの再生
        • 標準MIDIファイル *.mid
        • 標準MIDIファイルの再生
        • Cherryのマニュアルですが、このページに隠れている"cherry.zip"のURLを"cherry_m.zip"とするとゲットできます。判らなかったら聞いてください
        • Cherryによる打ち込み
        • チャンネル : 楽器ごとのパート
        • 音色も設定できる
        • ドラム(パーカッション)チャンネルだけは特別ルール
        • 「標準MIDIファイル(****.mid)形式」で保存 → Webで使える(^_^)
      • 次回までの宿題はありません。音楽関係のネタは最終課題でも出ません。イアホン持参も今週で終了です。

    • 11週目(12/15)
      • 本日のメディアアート インタラクティブアート
        • インスタレーション
        • パフォーマンス
        • ゲーム/アミューズメント
      • サウンドとミュージックについて 補遺                    
      • JavaScript講座 Part1(続)
      • JavaScript講座 Part2
      • JavaScriptリファレンス
      • 翌週までの宿題は以下です。
        • ここまでの内容を自分なりに理解して使えるように「復習」しておいて下さい。

    • 12週目(12/22)
      • 本日のメディアアート
        • メッセージ性の強いFLASH
        • インタラクティブFLASH
        • サウンド系FLASH
      • 「FLASHそのもの」をゲットする方法/ゲットさせない対策について
        • Flashコンテンツの見せ方の確認
        • 直接にSWFファイルを置かない理由
        • 方法(1) HTMLソースで「swf」を検索する
        • 対策(1) フレーム分割してソースに「swf」を載せない
        • 対策(2) Flashの参照を外部JavaScriptから行う
        • 方法(2) jsソースを参照して「swf」を検索する
        • 対策(3) Flashファイル名の文字列を分割して結合指定する("swf"が無い)
        • 方法(3) ブラウザの「このページのコンテンツ情報」を活用する
        • 方法(4) ブラウザのキャッシュを活用する
        • 対策(4) ストリーミングにする
        • 方法(5) FLVをダウンロードして希望のムービーに変換する
      • 情報処理Bのもう一つのテーマ「情報セキュリティ」「プライバシー保護」「著作権」について
      • 「特定のユーザだけに見せる」仕組み - パスワード制限
      • Webサイトに関するセキュリティのお話とデモ
        • 「古典的セキュリティ攻撃」デモ 6連発 
        • Web閲覧で外部に出ている情報について
          • IPとタイムスタンプ→違法行為は必ず追跡される
          • プロキシサーバ(串)について
          • ユーザの環境
          • 直前にアクセスしたサイトの情報
        • ブラクラ(Brouser Crasher)
          • ウイルス感染型
          • ハングアップ(無限ループ)型
          • ソシアル型(精神的被害)
          • 有料請求型(精神的被害+ 詐欺)
        • スパイウェア
          • 感染しても特には悪さをしない
          • 個人情報をこっそり流出させる
        • フィッシング
          • URL欄の詐称(ブラウザのバグを利用)
          • 個人の信用情報を入力させる
        • クッキー抜き
          • IPの詐称(ブラウザのバグを利用)
          • クッキー情報を取得
          • →成り済まし詐欺に利用
          • →プライバシーの流出
        • Webサイトのハッキング
          • ポートスキャン
          • システム侵入(サーバHTTPDのバグを利用)
          • アカウント情報を取得
          • →rootを取れれば何でもできる
      • 「プロファイリング」の危険性(犯罪ではない)
        • YAHOOの例
        • アマゾンの例
        • Google(Gmail)の例
        • mixiの例
      • 参考資料 : マルウェア (Wikipedia)
      • 参考資料 : ボットネット (Wikipedia)
      • このサイトで勉強してみよう

    • 13週目(1/12)
      • 本日のメディアアートは無し(^_^;)
      • 残りの「情報処理B」について
        • 1/19 あります 最終課題を出します
        • 1/26 補講はありません
        • 試験はありません
        • 2/2(火) 課題提出締切日 (課題についての質問対応日で、出席は取りません)
      • 「JavaScriptで外界と対話」のデモ(2010年1月10日に発表されたもの)
      • 本日のテーマ : 「オープンソース」の思想を理解しよう
      • 著作権について
      • クリエイティブ・コモンについて
        • Get Creative
        • Building on the Past
        • Reticulum Rex
        • CC Brazil
      • 「プログラミング」のお話
        板書しますので書き取って理解しましょう
        • C言語によるプログラミングの例 : XcodeでiPhoneアプリを作る
        • ビジュアル環境によるプログラミングの例 : Max5(MSP/jitter)
        • Javaのお話
          • Javaの特徴1 「プラットフォーム非依存」
          • Javaの特徴2 「インターネットに対応」
          • Javaの特徴3 「セキュリティに対応」
          • Javaの実現メカニズム
          • Javaの2種類のoutputと「アプレット」
          • Javaの活用法
        • プラットフォームと(Web)アプリケーションとの関係を理解しよう
          • 「ファイルを書き出せる」ことの意味は?
          • HTMLベース(Javascript)ではデータ保存できない
          • 唯一、Cookieを使うとデータをクライアント側に保存できる
          • Javaのサンドボックスモデル
          • Flashも基本的にJavaと同様の思想
          • iPhoneアプリはXcodeが保護
          • Javaアプレット+Javaスタンドアロンによる実現
          • マイクロソフトのActive-Xはウイルスの格好の餌食に
      • 大学1回生の「春休み」について ★重要★
      • 学内サーバへのFTP転送方法
        • 課題の提出のために、学内サーバへのFTP転送方法を身に付けておいて下さい。これが来週までの宿題です。
        • 学内アクセスonlyのサーバに、FTPについてのマニュアル(PDF)があります。 これです。 これに従って、前半の「FFFTP」の設定をして転送し、自分で確認してみて下さい。     
        • 学内ホームページトップからは、以下の2種類の方法でメニューをたどって、このマニュアルに行くことができます。
          >「SUAC-Netからのお知らせ」>「マニュアル」>「10.個人Webサイトの公開方法」
          >「SUAC-Netからのお知らせ」>「Q&A」>「個人Webについて」>「個人のWebサイトを学内の人に公開したいのですが?」

    • 14週目(1/19)
      • 本日のメディアアート FLASH 名?作集
      • 残りの「情報処理B」について
        • 1/26 補講はありません
        • 試験はありません
        • 2/2(火) 課題についての質問対応日(出席は取りません)
      • 「一般のフリーサーバにWeb領域を持つ」お話
        • アカウントはメイルアドレス(フリーメール以外)ごとに発行
        • DMと広告により「無料」となる
        • 個人情報に注意
        • セキュリティの視点に注意して実際にやってみよう
      • 課題について
        ※ 成績評価は出席を重視しますので、これまで欠席の多かった人はいくら課題で頑張っても無駄です (過去の出席状況についての問い合わせにはお答えできません。自分の胸に手を当てて思い出して下さい)
      • 授業アンケート (早めに終わります)
      • 学内サーバへのFTP転送方法
        • 学内アクセスonlyのサーバに、FTPについてのマニュアル(PDF)があります。 これです。 これに従って、前半の「FFFTP」の設定をして転送し、自分で確認してみて下さい。     
        • 学内ホームページトップからは、以下の2種類の方法でメニューをたどって、このマニュアルに行くことができます。
          >「SUAC-Netからのお知らせ」>「マニュアル」>「10.個人Webサイトの公開方法」
          >「SUAC-Netからのお知らせ」>「Q&A」>「個人Webについて」>「個人のWebサイトを学内の人に公開したいのですが?」

  • 講義テキスト/資料

  • リンク