18年の時を経て卒業制作アーカイブDiskを開く

学生時代を顧みる

インターンシップ受け入れ準備や面談を行うなかで、自分の学生時代は何してたっけな、と考えるようになりました。

卒業制作でつくったコンテンツやそれに関する中間成果物などをCD-Rに焼いて、記念としてチームメンバーに配ったことを思い出し、18年の時を経て中身を見てみることにしました。
ちょっとしたタイムカプセルみたいでドキドキしますね。

自分でも一体なにを詰め込んだか記憶があやふやです。

　

HMF2006とは

私は専門学校「HAL大阪」のマルチメディア学科2006年の卒業生です。
HALおよびMODEでは卒業前に卒業制作展「HAL-MODEフェスティバル」¹というのを毎年やっています。
大阪校の場合は大阪城ホールを貸し切ってイベントが開催されます。

このCD-Rにはそのときの写真や作ったコンテンツなどが格納されています。

卒業制作では何を作ったのか

HMFでは毎年テーマが与えられ、テーマに沿うかたちで企画を作り、展示用ブースの作成とシステムの構築を行います。
2006年のテーマは「音」で、私達のチームは「チクタク」という時計の音から日々の思い出をタイムカプセルとしてデジタル保存して、遡れるようにするというコンセプトでした。

18年ぶりのご対面

Diskの中身はこんな感じでした。

autorun.infでcontents/index.htmlを開く設定が書かれていました。
単なるチームメンバーへの記念品の割にはちゃんとディスクのラベルデザインからドライブ用のアイコンもつくっていて、当時の自分は芸が細かいなと関心します。

目次用コンテンツ

contents/index.htmlは開くと下記の画面が表示されました。

いかにも2006年らしい画面づくりですね。
当時こういうのが流行ってたなぁ。とても懐かしい。
そして良くも悪くも学生っぽいデザインです。

H439が私達のグループ番号でした。
ちゃんとサムネイルを押下すると大きな写真がみれるようになっていました。

デザインや各種資料も主要なものは目次ページから辿れるように。

当時の私の役割

当時の私のチームでの役割はシステムリーダーとして技術選定や、実現性の検証、開発の指示・進行管理、デザイン・UI作成でした。

企画書抜粋

30ページほどの企画書もCD-Rに保存されていたので、一部をここに転記します。
（今見ると意味がわからない部分なども多く、これはかなり恥ずかしい…）

テーマとなる音

チクタク

音の説明

夜、寝室で時計が時を刻む音

四段落ち

チクタク
→夜、寝室で時計が時を刻む音
→過ぎ去る時間へのあせり、年を重ねる不安
→昔の自分を振り返る、未来の自分をイメージする

問題点

時計が時を刻む音により、過ぎ去る時間へのあせり、年を重ねる不安を感じる。

問題点の原因

現代人の80％以上が年をとることに不安を感じている。
10年後の自分はどうなっているのか？などが想像し難く
また、年をおうごとに時間が経過するスピードが速く感じ、焦りを感じてしまう。

ソリューション名

自分タイムマシン

ソリューションの目的

現在の自分からアルバムを作成することができる。
過去の自分の姿を見ることで、今現在の自分のあり方を見つめなおし、未来の自分を想像することで今後の生き方や目標設定を具体的に行えるものとする。

ソリューションの目的を達成するための具体策

現在の自分を撮影し、日記形式のコメントを作成し、動画や画像と共にデータによるアルバムを作成する。
カメラつき携帯電話を使用し動画や画像を送信することによりいつでもどこでも現在の自分をアルバム化することが出来る。
過去のアルバムを閲覧する際、日付と画像を参照するため簡単に見たい過去を振り返ることが出来る。
スケジュール機能を使用することにより指定した未来の日時の自分へ、アルバム作成のために動画や画像・コメント作成を催促することができ、アルバム作成の内容充実を促すことができる。
また内容をアレンジし、印刷することにより自分だけのオリジナリティー溢れる紙面によるアルバム作成が可能である。
ネットワークでつながっている友人と共有可能な画像・動画を相互間で閲覧・送信可能である。

期待される効果

過去の自分を振り返り、思いにふける事で日ごろのストレスから開放される。
未来の自分を想像することで、今後の人生と向かい合うことができる。
過去から現在までの自分を客観的に見ることにより今後の人生の糧とすることができる。

全体コンセプト

斬新的、抽象的、幻想的、新しい

作品タイトル（擬音語で表現すること。）

チクタク

作品説明

自分自身の姿を過去から未来まで旅しよう。
過去の自分は今へ繋がり、未来の自分は目標設定の糧となる。

ソリューションの概要

• カメラで撮影した（動画・静止画）データと、日記形式の文章をこのシステムに登録し、PCから年表のように閲覧することができます。登録されたデータはWeb上のサーバに保存されます。
• 登録されたデータには音楽を付けたり、背景画像を変えるなどの編集が可能で、閲覧画面をユニークなものにすることができます。また、流行した音楽を登録することにより、過去の写真を見かえしたときに当時を思い出すことができます。
• インタフェースとしてはPC以外に、カメラ付き携帯電話を使用し、メール機能でコメントと添付した写メールを送信する事により、いつでも・どこでも現在の自分を年表に登録する事ができます。
• 携帯電話から、メールで登録するときには音楽・背景画像は選択できないので、年表閲覧時に編集してもらいます。
• 登録したデータを閲覧する際は、年表のように日付ごとに一覧できるので、見たいデータを簡単に振り返ることが出来ます。
• 表示画面には撮影した画像・コメントを表示し、BGMに選択した音楽を流して、より明確に当時の状況や感情、雰囲気を思い出してもらうことができます。
• ネットワークでつながっている友人とグループを作り、年表を共有することで、お互いの思い出も共有でき、コミュニケーションの手助けになります。また、相互間でデータの閲覧・送受信が可能です。
• 作成したデータに未来の日付を指定することにより、デジタルタイムカプセルを作成することができます。作成したデジタルタイムカプセルは指定した日付まで閲覧することができません。また、忘れても大丈夫なように指定日になると自動的にユーザに通知され、閲覧可能になります。
• このシステムで自分の年表を作ることにより、昔の自分の姿と今（未来）の自分の姿を見比べる事ができ、思い出と共にこれからの生活を新しい気持ちではじめる事ができます。

システムコンセプト

ブースコンセプト

全体のブースイメージ

• 「時間とタイムマシン」をテーマに、来場者に時間の流れを感じさせるブースデザインにします。

チクタクという音を表現するために…

• 秒にあわせて回転するギアをモチーフとしたオブジェクトを、中央最上部に設置します。
• 時計をかたどったオブジェクトを入り口の両脇に設置します。
• 床面には、全体に大きな時計をイメージしたオブジェクトを設置し、その上を歩けるようにします。

集客率を上げるために…

• 来場者にシステムを紹介するため、中央上部にプロモーション用ディスプレイを設置します。また、待っている時間を退屈させない効果もあります。
• 操作性を高めるために、面倒なマウス操作の代わりとなるボタンを設置します。
• 各モニタ上部に設置した照明から、光を照射します。
• 視認性を高め、閉鎖的なイメージを払拭させるために、椅子を見通しの良いものにします。

安全性の確保

• 床面の上を歩かせるため、床のオブジェクトの上にアクリル板を置き、強度を上げます。
• 中央のディスプレイは、落下の危険性があるため、後部のオブジェクト部分に固定します。

ブースイメージ図

ブース模型

システム構成図

システムの特徴

携帯端末の使用（ユビキタス機能）

• 携帯電話を使うことにより、いつでも・どこでも好きなときに日記を登録できます（ユビキタス機能）。
• 来場者が他のブースを体験中でも、携帯電話で写真を撮り、そのデータを日記としてその場ですぐに登録することが可能で、より多くの人にシステムを利用してもらえます。
• また、ブース混雑時に備え、携帯からも日記の簡易版を閲覧することができます。

ブースからの日記の閲覧

• 閲覧画面は内容を年表のように表示させることにより、時の流れを演出します。
• 簡易ボタンで年表画面を操作でき、来場者の操作性を向上することができます。
• また、登録された写真データを、スライドショーのように過去から未来の順に閲覧することができ、タイムマシンによる時の流れを演出します。

タイムカプセル機能

• タイムカプセル機能により、友達との思い出を未来に登録することができます。
• 登録した内容は設定した日付になるまで閲覧できず、閲覧日がくるとメールで通知してくれます。

登録機能

• 好きな日付に日記を登録することができます。
• 例えば、自分の生まれたころの写真データを生まれた年に登録したりすることにより、年表の過去の部分を充実させることができます。これによりタイムマシンで過去に戻ったような感覚を演出します。
• また、未来に目標となる日記を登録することにより、自分自身の人生設計をたてることができます。

グループ機能

• 他のユーザとグループ化することにより、年表を共有することができます。
• グループ機能により個人の意見を主張する場が増え、他人に自分の年表を見せることができます。
• また、友達同士でひとつの年表を作成し、思い出を共有することができます。
• 以上のことからコミュニケーションを促進することができます。

利用技術

開発言語

サーバーサイドはPHP 4.0でシステムを構築する。
また、これを使ってXMLデータの入出力、GDによる画像編集（リサイズ等）プログラムも実装する。

画面表現

クライアント側で入力の支援、ユーザビリティの向上、ビジュアル表現などにJavaScriptも利用する。
各画面はHTMLとCSSを用い、HTMLではデザイン定義を行わず文書構造表現のみとして、デザイン定義はCCSファイルとして分離することにより、高速化とメンテナンス性の向上をはかる。

データベース

MySQLを利用する。
MySQLの操作はコマンドラインからの操作のほか、PHPのSQL操作アプリケーションphpMyAdminからも行い、作業効率を向上させる。

デザインテンプレート

今回、ロジックとデザインを分離し、作業効率の向上の為、デザインテンプレートエンジン（Smarty 2.6.10）を利用する。

PEAR

移植性の高いシステムを構築するために、クラスライブラリPEARを利用する。

モバイル用システム

携帯電話を対応としたシステムを構築する際、基本的には画面サイズと最大ページサイズ、タグやその他制限（CSS、JavaScript、Flash等）を考える以外は基本的にはパソコンとかわりがないが、セッション管理の部分だけは特殊な方法（SIDの送信）が必要。
各キャリア対応を考え、それぞれの開発ドキュメントの閲覧し独自タグや絵文字の処理方法を習得する必要がある。

開発環境

開発用ソフトウェア

●サーバー：
Apache 又は HTTPD
●OS:
Windows XP professional
●グラフィックエディタ：
Macromedia Fireworkｓ MX
Adobe Illustrator CS
Adobe Photoshop 6.0
●テキストエディタ
Ez-html 6.87
EmEditor 3.38
●WEBオーサリング
Macromedia Dreamweaver MX
Macromedia Flash MX
●SQL操作
phpMyAdmin 2.6.4-rc1
●パッケージソフト
Foxserv 3.0
●ドキュメント作成
Microsoft office 2003

開発用ハードウェア

●サーバースペック：
Intel Pentium4 2.4GHz 
●メモリ：
512MB 

WEBサーバー

●サーバースペック：
Intel Pentium4 2GHz 
●メモリ：
1024MB 
●サーバーＯＳ：
Redhat Linux 
●ウェブサーバー：
Apache 
●メールサーバー：
Qmail 
●ＦＴＰサーバー：
Proftpd 
●バックボーン：
快速・余裕の国内バックボーン回線 
●サーバー所在地：
東京　※大手データセンター収容

システムシナリオ

実際の来場者にはQRコード、URL、ブース場所などを書いているチラシをアリーナに入るための入り口である階段付近で配布し、場所やシステムの内容を知ってもらう。

チラシを受け取らなかった方は歯車のオブジェを見て、又はブース全体が時計になっていることに興味を持ってもらい実際に足を運んでもらう。

ブースに来た来場者全員が実際にブースの中でシステムを操作できないので待ち時間の間に来場者個人の携帯電話でも簡単な内容を閲覧可能であることを伝える。

携帯電話で簡単な内容を閲覧することができるので混んでいるアリーナで携帯電話を触るのではなく、客席などで暇つぶし程度の感覚でシステムの内容を知っていただくことが出来る。

来場者個人の携帯電話を使用し、QRコード読み込みまたは、URL入力、メール送信によってシステムに自分の既存の画像、動画を送信する。
携帯電話による画像・動画送信の際、来場者個人のファイルが簡単にシステム上で簡単に検索できる様に入力してもらう。

実際のシステムを操作では、来場者個人の携帯電話で送信したファイルを検索し閲覧、または既存のファイルを閲覧することができる。

記事やタイトルの編集や、背景BGMとなる音楽を設定する。

個人で設定した内容を来場者の携帯電話で簡単に閲覧できるようにする。

タイムマシンの設定のため、未来に開封するファイルやメッセージを入力する。

タイムマシンで設定した日時にメッセージが届き、ファイルがパソコンまたは携帯電話で閲覧可能になる。

過去の自分を振り返り、思いにふける事で日ごろのストレスから開放される。

その他の中間成果物

装飾の検討

サイドに取り付ける写真パネルも色々なカラーバリエーションを提示。
このあたりは私のほうで担当しました。

やたらとクオリティの高い音声ガイダンス

チームメンバーのコネをつかって、外部に依頼した音声ガイダンス。
いま聞くと卒業制作の割にクオリティが高くて笑ってしまいます。

ここまで準備しておいたのに、本番当日はスピーカーを設置するスペースが確保できず、うまく活用できなかったような気がします。

発表当日の様子

大切な思い出、美しいままで残っていますか？

前述の音声ガイダンスで、「大切な思い出、美しいままで残っていますか？」と問われたとき、18年の時間を経てなんだかものすごく刺さるものがありました。

このCD-Rがまさに当時目指していたタイムカプセルだったのです。

資料やプログラムコードなどの途中成果物を見ると、荒削りな部分や不完全なところを感じるものの、当時は一生懸命工夫したり考えたりしていたのだなと思いました。
正解がわからないなりにも試行錯誤した経験が今に活きているのかもしれません。

$\tiny{残念ながら入賞は逃したものの、みんな頑張ったのでお祝い}$

18年の時を経て

卒業制作メンバーは1チームあたり8名前後でしたが、統括リーダー、ブースリーダーともう1名は今でも交流があります。
去年は有馬温泉におじさん4人で行きました。

そのうちの1名が弊社、株式会社add moreの代表取締役社長です。
卒業制作をきっかけに交流を持つようになりましたが、お互い別々のキャリアを歩んだあと今は同じ会社の仲間として働いています。

当時、別チームだったものの、お互いのリソースやナレッジを共有して協業していた同級生が、今もお仕事の取引先だったりします。

人生いろいろとわからないものですね。

1. 現在は未来創造展という名前に変わったようです。 ↩