オンラインポートフォリオの制作テンプレート

オンラインポートフォリオの制作にあたっては、下記URLからテンプレートをダウンロードして参考にしてください。テンプレートには、画像、動画、音声、Javaアプレット(Processigの作品) などのメディアを載せる実例も掲載されていますので、適宜参考にしてください。

オンラインポートフォリオのテンプレートをダウンロード (Zip形式、693KB)

今回制作するオンラインポートフォリオは、この授業だけでなく、入学から卒業制作まで制作してきた自身の作品を掲載する重要な記録となります。この授業の講評を終えた後も、更新を続けていくようにしましょう。また、将来的には、このポートフォリオをスタジオの選択や卒業制作の審査などの際に参考資料として提出することもあります。

オンラインポートフォリオに最低載せる内容

• 表紙 (index.html)：
  • 自己紹介：画像、簡単な経歴など自己アピールしたい内容を記述してください。
  • ブックマーク：(もしあれば)自分のWebページ、自身のブログなどへのリンク。自分の興味のある分野のWebページ、好きなアーティストのページなど。
• 実技系の授業で作成した作品を掲載
  • メディア芸術基礎(情報デッサン / メディアリテラシー)：情報デッサンで制作したデッサンの画像
  • イメージリテラシー：制作した映像作品
  • インタラクション：制作したProcessingの作品(Javaアプレット)
• 個人制作
  • 授業とは関係なく自分自身で制作した作品があれば、積極的にポートフォリオに追加してください
  • イラスト、映像、音楽、
• 1年生後期に追加する作品
  • サウンド&CGI：制作した音響作品、映像作品
  • クラフト&マテリアル：制作した作品(映像、写真)
• 2年生以降も制作した作品は全てオンラインポートフォリオに記録していく

メディアに応じた作品の掲載方法

1. 画像 (写真、イラストなど)

大きくわけて、2つの方法があります。

• Webサーバー内に画像を保存する方法：Webサーバーに画像を格納して、img要素を記述して画像を読み込む
• 写真共有のWebサービスを利用する方法：Picasa(http://picasaweb.google.com/)、Flickr(http://www.flickr.com/)

Webサーバー内に画像を保存する方法

• HTML内に、img要素を記述して写真や画像を読み込みます。
• 例) htmlファイルと同じ階層に「img」というフォルダを作成して、その中に「hoo.jpg」という画像を入れた場合

<img src="img/hoge.jpg" width="画像の幅" height="画像の高さ" alt="画像の説明" />

写真共有サービスを利用する場合 – Picasaウェブアルバムを利用した例

• もしGoogleアカウントを持っていない場合は、Googleのアカウントを作成する。- Googleアカウントの作成ページ
• Picasa ウェブアルバムのWebページにアクセス。作成したGoogleアカウントでログインする。

• 画像をアップロード
  • ヘッダーの右にある「アップロード」ボタンを押す
  • アルバムを選択、または新規に作成 – 写真は「アルバム」という単位で整理されます、授業毎にアルバムを分けたり、時系列にアルバムを作成したりと、適宜整理の方針を決めてアルバムを作成
  • 新規にアルバムを作成する際は、共有の設定を「一般公開」にするように注意
• ファイルのアップロード画面に遷移するので、画像を選択してアップロード

アップロードボタン

アルバムの選択

アップロード画面

• 写真へのリンクを取得
  • アルバムからWebに載せたい画像を選択する
  • 選択した写真の右側のメニューの「この写真へのリンク」を押して、リンクの設定を表示
  • 貼りつける画像のサイズを選択
  • 「画像を埋め込み」の欄に表示されているHTMLのタグをコピー
  • 制作するページのHTMLファイルにコピーしたタグをペーストする

画像を埋めこみコードの取得

画像を埋めこんだ例

送信者 Buzz

埋めこみコード

<table style="width:auto;"><tr><td><a href="http://picasaweb.google.com/lh/photo/wMEkwxtiGZRCFpmm2VLeicAS8prLNGVgqURFiaHAmos?feat=embedwebsite"><img src="http://lh4.ggpht.com/_S9tCNvdm3tU/S3OYDHcg9eI/AAAAAAAACuY/nzvPJH3MxaQ/s800/new_portrait.jpeg" /></a></td></tr><tr><td style="font-family:arial,sans-serif; font-size:11px; text-align:right">送信者 <a href="http://picasaweb.google.com/tadokoro/Buzz?authkey=Gv1sRgCJbzqu3dksHo-gE&feat=embedwebsite">Buzz</a></td></tr></table>

2. 動画 (記録映像、映像作品、アニメーションなど)

• 動画ファイルは動画共有サービスを利用すると便利
  • YouTube (http://www.youtube.com/)
  • Vimeo (http://www.vimeo.com/)

YouTubeに動画をアップする場合

• 動画のアップロード
  • YouTubeにGoogleアカウントでログインする (右上のリンク)
  • 検索欄の右にある「アップロード」を選択
  • アップロード終了後、サーバ側で画像の圧縮処理が始まる

アップロードへのリンク

• 動画を埋め込む
  • アップロードした動画の圧縮が終わったら、埋め込みコードを取得して、動画を貼りつける
  • ログインした後の画面の右上にあるアカウント名のメニューから「マイ動画」を選択
  • 埋め込みたい動画を選択
  • 動画の画面から「埋めこみコード」ボタンを押す
  • 動画のサイズ、インターフェイスの色などを設定
  • 埋め込みコードをコピーして、動画を埋めこみたいHTMLページにペーストする

マイ動画

埋め込みコードボタン

埋め込みコードの取得

動画を埋めこんだ例

埋めこみコード

<object width="560" height="340"><param name="movie" value="http://www.youtube.com/v/bEpXUEvT4g0&hl=ja_JP&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/bEpXUEvT4g0&hl=ja_JP&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object>

3. 音 (音楽・音響作品など)

音作品もWebサービスを利用すると便利

SoundCloudを利用する

• SoundCloud (http://soundcloud.com/) – サウンドを共有することのできるWebサービス
• ユーザー登録する
  • まずは「Sign Up」ボタンを押して、ユーザ登録をする
  • 必要事項を記入して登録する

Sound Cloud、サインアップ

ユーザー登録画面

• サウンドファイルのアップロード
  • ヘッダーのメニューの右にある「Upload & Send」ボタンを押す
  • ファイルを選択画面に遷移、「Coose File」ボタンを押してディスク上のサウンドファイルを選択
  • アップロードが開始されると、詳細な情報を設定する画面に遷移する、記入できる項目に情報を記述
  • 共有の設定 – 3. Who is this track for? の設定は「Public (available for everyone)」にすること
  • 全ての設定が完了したら、「Save Track」ボタンを押してトラックを保存

Upload ∧ Sendボタン

オーディオファイルの選択

Track infoの記入

共有の設定

• サウンドの共有
  • 保存したトラックの波形が表示される
  • 左上にある「Share」ボタンを押す
  • 表示される画面の「The embed code for the player」の下にあるHTMLコードをコピー
  • サウンドを貼りつけたいHTMLファイルの中にコピーしたHTMLコードをペースト

アップロードされたトラック

共有コードの取得

サウンドを埋めこんだ例

SC Test by tadokoro

埋めこみコード

<object height="81" width="100%"> <param name="movie" value="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fsoundcloud.com%2Ftadokoro%2Fsc-test"></param> <param name="allowscriptaccess" value="always"></param> <embed allowscriptaccess="always" height="81" src="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fsoundcloud.com%2Ftadokoro%2Fsc-test" type="application/x-shockwave-flash" width="100%"></embed> </object>  <span><a href="http://soundcloud.com/tadokoro/sc-test">SC Test</a> by <a href="http://soundcloud.com/tadokoro">tadokoro</a></span>