[[FrontPage]]

#article
**週報 [#aa9f48ac]
>[[三野宮定里]] (2015-11-02 (月) 15:44:46)~
~
【アーカイブビュアー】~
ミュージアムで試作品の展示を行った。~
・全体から詳細情報へたどっていくというモデルはありそう~
・シームレスアニメーションを使ったアニメーションを用いることで個々の情報を検索して見つけるというよりも情報の中を「探索している」という演出を行うことができそう~
・さわれば触るだけ理解が深まったとして、その過程を視覚化するのも面白そう。履歴を表示するなど。~

//
- はい、確認。 -- [[kazushi]] &new{2015-11-04 (水) 00:11:59};

#comment

**週報 [#td59ab9a]
>[[三野宮定里]] (2015-10-19 (月) 16:17:02)~
~
【アーカイブビュアー】~
前回のアドバイスを受け、資料ごとに画像のパスをあらかじめ登録するようにプログラムを変更した。~
具体的には。まず画像ひとつひとつのパスをデータベースに保存し、次に資料情報との対応づけを行うことで対応した。~
いくつかの資料情報は画像が無かったため、それらの資料を表示するときは[no-image]と表示することにした。~
~
次にシーボルト資料を題材としたアーカイブビュアーの制作を行った。~
現在Java(Processing)によるネイティブアプリの開発を目指しているが、~
開発速度の違いからdomを利用したwebアプリを開発し、プロトタイピングしていくことにした。~
~
これまでの一覧表示画面は資料を集合・解散するようなメタファの表現だった。~
今回はこれまでと違い、資料を並べて一覧するようなメタファの表現を行ってみた。~
たくさんの資料を並べ、google earthのようにカメラをよったり、近づけたりするようなイメージ。~
資料をシャッフルせず、俯瞰し一覧できるようにすることでデータベースの全体像を把握できるよう意図した。~

//
- はい、確認。 -- [[kazushi]] &new{2015-10-19 (月) 18:44:29};

#comment

**週報 [#wa0e21a9]
>[[三野宮]] (2015-10-12 (月) 15:30:14)~
~
【デジタルアーカイブビュアー】~
前回までに行き続き、画像のトリミング・リサイズを行った。~
画像の編集はまだ終わっていないが、先にデータベースの構築を行った（データベースには画像のパスを保存してアプリで使用するため、データベース構築後でも画像の編集は行える）。~
~
また前回までにDOMをjQueryで操作するようにアプリを設計すると、コーディングは早く行えるがアニメーション挙動が重たくなるという課題が上がった。~
そこで改めてProcessingを使用して制作することにした。Processingからデータベース（MySQL）の値を取得・更新するためにはPHPを使用する。そのため作業手順としてまずDOM版をつくり、データベース連携に必要なPHPプログラミングを行ってからProcessing版を制作することにした。~
~
データベースの構築と値の取得・更新を行うためのPHPプログラミング、それを確認するためのDOM版の制作まで終わった。~
これから先週記述したPHPプログラムを使ってProcessing版の作成を進める。~
~
【デザイン学会】~
11月21日（土）に開催される日本デザイン会秋季企画大会学生プロポジションに参加する。~
応募締切は10月31日（土）17:00まで。~

//
- はい、確認。 -- [[kazushi]] &new{2015-10-12 (月) 23:02:55};

#comment

**週報 [#vdadb946]
>[[三野宮定里]] (2015-10-05 (月) 15:24:01)~
~
【研究】~
[画像のトリミング、リサイズ]~
シーボルト資料の画像のトリミングとリサイズを進めた。トリミングは品質を保つ為に全て手作業で行っている。~
正方形にトリミングした画像はソフトウェアで使用する際少しでも軽くなるようにリサイズする。~
今回はラップトップで見たときの高さを基準にして800px*800pxでリサイズした。~
リサイズはProcessingで自動で行った。~
~
画像のトリミング・リサイズはまだ終わっていない。~
~
~
【シーボルトビュアー】~
新しいバージョンのビュアーの制作を始めた。~
今までのビュアーは「博物館に来た観覧車が使う道具」という設定でデザインしてきた。~
今回は「専門家が資料の整理のために使う道具」という視点でデザインをする。~
データベースの編集機能、専門家に気づきや発見を促すための閲覧画面の実装を目指してみる。~
~
現在は「ファイルメーカー」というソフトウェアを使ってデータベースが作られている。ファイルメーカーより使いやすかったり、気づきを促せるようなソフトウェアに仕上げるのがひとつの目標？~
~
画像資料のトリミングがまだ完了していないため（すごい数がある）、できているものからデータベースを制作し始めたところ。資料の情報もまだ一部しか持っていないため、持っているものから手をつけている。~
~
UIや機能はプロトタイピングを通しながら作り込んでいく。~

//

#comment

**週報 [#za1a5e5a]
>[[三野宮定里]] (2015-07-27 (月) 22:07:35)~
~
【テーマ審査会】~
テーマ審査会での他研究室の先生からのコメント~
・モノ単体ではなく複数の集まりの中に価値を作ろうとすることが面白い~
・触る度に新しい発見があると飽きないし、より面白くなるのでそういう工夫が欲しい~
~
【Proccessingマッピング】~
7/23日に「ロバの音楽座」の舞台でプロジェクションマッピングを行った。~
用意した動画の投影位置を調整できるソフトをProcessingで制作した。~
動画を遅延せずに再生するために、動画は30fps, H.264, 正方形ピクセルでエンコードした（3分ほどで72MB）。~
29.97にしないところがポイント。~
Processingのフレームレートは120に設定したが、30、60のときとどれだけ違いがあるかは検証していない。~
とりあえず遅延なく、フリーズもなく動いたので良かった。~
~
今後はキーフレーム設定など再生タイムごとに再生位置を変えることができるようにしていく。~

//
- はい、確認。 -- [[kazushi]] &new{2015-07-28 (火) 21:54:37};

#comment

**週報 [#t1c6c3b4]
>[[三野宮定里]] (2015-07-20 (月) 11:33:40)~
~
【シーボルト】~
フィードバック待ち。~
~
【アイヌ展】~
情報デザイン1の2年生の課題に取り組んだ。千島樺太交換条約によって千島アイヌ・樺太アイヌがそれぞれどのように移動してきたのかを図解したインフォグラフィクスを制作した。~
中央に時間軸を置き、左右対象に千島アイヌ・樺太アイヌの遷移をそれぞれ図解したレイアウトから、時間軸を左に置き、千島アイヌ・樺太アイヌの遷移を一つの図で図解するレイアウトへ変更中。~
今後はこれをベースにデジタルアーカイブビュアーの制作を行う。~
~
【シラバスマップアプリ】~
Processingによるプロトタイピングを行った。~
ノードを選択すると子ノードを広げていくようなアルゴリズムを作成した。~
ノードの関係性を管理するアルゴリズムはできたが、それらのノードを画面上に重ならずに配置するアルゴリズムができていない。今後は画面上にノードを適切に配置する部分のプログラムを作成していく。~

//
- はい、確認。 -- [[kazushi]] &new{2015-07-20 (月) 22:15:27};

#comment

**週報 [#m083a077]
>[[三野宮定里]] (2015-07-13 (月) 20:09:34)~
~
07/07 出席~
07/09 出席~
~
【シーボルト】~
別バージョンのアプリのデモを作成した。シーボルトが手書きで書いた資料の目録の画像から各資料を閲覧することができる。HTMLとJavaScriptを使った。ページめくりの演出を行うためにturn.jsというライブラリを使用した。画像の表示にはlightbox.jsを使用した。~
先生がこのデモを使ってプレゼンを行ってきた。現在先生からのフィードバック待ち。~
~
【研究計画書】~
大学院入試の願書を提出した。そのための研究計画書を書き終えた。~
~
【アメリカ旅】~
サンフランシスコへの飛行機のチケットをとった。~
9/6(Sun) -> 9/20(Sun)の期間で行ってくる。~

//

#comment

**週報 [#a9f886e0]
>[[三野宮定里]] (2015-07-05 (日) 22:08:47)~
~
6/29　出席~
~
【研究計画書】~
大学院入試試験のため研究計画書の第1版を書いてみた。先生のアドバイスをもらい第2版をつくる。デジタルアーカイブを作ることのどこが研究なのかをきちんと書く。~
~
【シーボルト】~
動きの表現をブラッシュアップするために、モーショングラフィクスの作例を調べた。~
まずライブラリーから『映像作家100人2014』という本を借りて総当たり的に映像作品をみて、そこから気になった映像作家の映像をインターネットで検索していった。~
~
中でも参考になったものを2つあげておく。~
・http://www.satoruhiga.com~
プリミティブな図形を使った映像がかっこよかった。イーズイン・イーズアウトを使うこと、要素を動かすタイミングをずらすこと、移動は素早く行うことあたりが特に真似できそうなポイントだった。~
~
・https://vimeo.com/hsgn~
プリミティブなオブジェクトの変形自体にもイーズイン・イーズアウトをすることで有機的な動きを演出しているところが真似できそうなポイントだった。~
~
今後はここから得た動きの演出のポイントを取り入れていく。~
~
~
【シーボルト2】~
別バージョンのアーカイブビュアーアプリの制作をはじめた。シーボルトが手書きで描いた目録の画像をベースに資料を表示していくタイプである。~
画像ごとにhtmlページを作成しアプリ開発を行っていく。~
~
【シーボルト発展】~
函館博物館でのアイヌ展でもインタラクティブビュアーが使えないかやってみる。画像データとエクセルデータがあるので、資料データと画像データの対応付けをしていく。対応付けが終われば、シーボルト１のアルゴリズムで動く予定。~
~
【シラバスマップアプリ】~
iFUNという未来大学のシラバスをデジタル化したアプリの開発を頼まれた。シラバスのデータをダイナミックなマップとして可視化、触れるようにしたアプリを作って欲しいということだった。~
これもダイナミック・インフォメーション・グラフィクスの出番だと考えたので引き受けることにした。~
~
アプリはHTML5のcanvasを使って実装していく。~
javascriptを直接書いていくよりもProcessing.jsを使っていったほうが早く開発できそうなのでProcessing.jsを使用していくことにした。~
シラバスのデジタルデータはデータベースとして既に用意されているらしいのだが、ローカルでデータを持っておいたほうが処理が早くなると考えたのでcsvファイルを作成することにした。~
情報アーキテクチャ学科の科目までデータを打ち込み終わった。~

//
- はい、確認。 -- [[kazushi]] &new{2015-07-07 (火) 09:19:30};

#comment

**週報 [#k4e25d8a]
>[[三野宮定里]] (2015-06-29 (月) 20:17:37)~
~
6/22　出席~
~
【シーボルト】~
これまでのまとめバージョンのデモを制作した。~
画面モードは3つ用意した。~
1.全体一覧~
2.カテゴリ一覧~
3.詳細表示モード~
~
1.全体一覧~
全体一覧モードでは数千件あるデータを無差別に表示する。各資料を小さいサムネイルでタイル状に並べ、なるべく多く表示することで、閲覧者に「資料が沢山あること」を伝え、かつそれらの全体像を眺めることができるようにした。~
~
画面の操作はタブレットを使用したスワイプによって行う。スワイプすることである部分から別の部分へ移動する。~
スワイプするとタイル状に並んだ資料が指を払った方向へ拡散し、反対側が同じ方向へ別の資料が集まってくるアニメーションが流れる。気持ちいい操作感の演出を行った。~
~
気になる資料を見つけた場合、タップすることでその資料と関連した資料が集まるカテゴリ一覧モードへ移行する。~
画面遷移時、選んだ資料が拡大しながら関連する資料が画面の周りから集まってくるアニメーションが流れる。選んだ資料を手元にたぐりよせる演出を行った。~
~
~
2.カテゴリ一覧~
ここでは無作為に並んでいた状態から一定のルールに基づいて表示される。選んだ資料が大きく表示され、その周りに関連する資料が小さく表示される。今回は同じ「材質」の資料が集まるようにした。~
ルールに則って関連する資料を並べることで、閲覧者に資料の見方を与えることを目指した。~
~
小さいサムネイルをタップすると、選択中の資料が拡大・縮小のアニメーションをしながら切り替わる。~
選択中の資料をタップすると、さらに拡大し詳細モードへと切り替わる。~
拡大・縮小のアニメーションを用いることで資料を手元にたぐりよせる演出を行った。~
~
スワイプすると画面中に並んでいる資料がスワイプした方向に流れながら全体一覧ページへと切り替わる。~
~
~
3.詳細表示モード~
ここでは選択した資料の詳細な情報を閲覧することができる。~
画像を大きく表示し、タイトルや材質といった資料として保存されている各情報をレイアウトした。~
スワイプすると画面中の資料がスワイプした方向に流れながら全体一覧ページへと切り替わる。~

//

#comment

**週報 [#b3e8814d]
>[[三野宮定里]] (2015-06-22 (月) 20:02:05)~
~
【シーボルト】~
スワイプ操作に対応させるため、タップを取得できるようにした。~
~
はじめにjavascriptが標準で用意しているマウスイベントを試した。~
mousedown:マウスを押したときに発生~
mousemove:マウスを動かしたときに発生~
mouseup:マウスを話したときに発生~
しかしマウスイベントではタップを取得できなかった。~
~
そこでタップを取得するため、jQueryが用意しているタッチイベントを利用した。~
touchstart : 指が画面に接触したときに発生~
touchmove : タッチしたまま指を動かしたとき＝スワイプしたときに発生~
touchend : 指を離した時に発生~
~
これらのイベントを利用することでタップを取得することができた。~
またこれらのタッチイベントはマウスでは反応しなかった。~
開発はマウス操作のコンピュータで進めるため、マウス操作でもタッチ操作と同じように動くようマウスイベント・タッチイベント両方のイベントをリスナーに登録した。~
~
【参考サイト】~
http://studio-key.com/711.html~
~
~
【AfterEffects講習】~
19日5に空カメラプロジェクトともえもえプロジェクトの3年生を対象にAfterEffects講習を行った。~
AfterEffectsの自習ができるようになるための基本を教えた。~
・動画ファイルをつくる上で最低限必要な基本用語（フレーム、FPS、コーデック、エンコード）、~
・AfterEffectsで動画を編集する上で最低限必要な基本用語（コンポジション、タイムライン、レイヤー、キーフレーム）、~
・AfterEffectsの基本的な操作（コンポジションの作成、素材の読み込み、レイヤー操作、タイムライン操作、
キーフレームアニメーションの方法）~
スライドをまとめ直してなるべく早くweb公開をする。~
ついでにHI演習の講義中に行ったwebコーディングの基本についてもスライドをまとめ直してweb公開したい。

//

#comment

**週報 [#c81efa4f]
>[[三野宮定里]] (2015-06-15 (月) 19:42:19)~
~
【シーボルト】~
タブレットでみるためにwebアプリ化をはじめた。~
~
Processingではcsvファイルを読み込んでノードを生成していた。~
データはこれから増える可能性があり、指定した範囲のデータのみを取り出してデータを持っていた方が動作が軽いと判断したので、webアプリ化のためにまずデータベースの構築を行った。~
データベースはMAMPを使ってローカル環境にMySQLを使用して用意した。~
Processingでcsvファイルを読み込み、クエリの実行文をテキストで出力した。出力したクエリはphpMyAdminで実行しデータベースを構築した。~
~
データベースからデータを取り出し、webブラウザ上に画像を表示するところまでできた。~
以下画面に表示するまでの手順。~
1.データベースからphpで値を取り出しdomオブジェクトの生成（各種値はclassの属性値に設定。imgのsrcにはデータベースにあらかじめ保存してあるパスを取得し設定。）~
2.生成したdomオブジェクトについてcssからposition:absoluteを設定~
3.JavaScriptからdomツリーを解析し、ノードの座標を管理するための配列を確保~
4.JavaScriptからcssのtop,leftを動的に管理~
5.jQueryのanimateメソッドを使ってアニメーションをする~
~
Processingでプロトタイピングした動きの実装までできなかったのでこれから行っていく。~
~
【参考書】~
『初めてのPHP,MySQL,JavaScript&CSS』O'REILLY, Robin Nixon(著)~
『JavaScript本格入門』山田祥寛(著)~
『jQuery本格入門』沖林正紀(著)~

//
- はい、確認。 -- [[kazushi]] &new{2015-06-16 (火) 12:55:26};
- はい、確認。 -- [[kazushi]] &new{2015-06-23 (火) 17:54:55};

#comment

**週報 [#z3ad6637]
>[[三野宮定里]] (2015-06-02 (火) 13:04:20)~
~
【シーボルト】~
シーボルトの手書きの資料をページをめくるエフェクトを使って資料を閲覧できるツールをつくる。デバイスはタブレット。~
webアプリにするならCSSとJSのエフェクト~
http://turnjs.com/docs/Main_Page~
iBookでも実現できそう~
http://gakublo.com/archives/6145~
~
~
[ずーーーっと困ってたバグをついに解決]~
PImageをimageで描画すればするほど、どんどんメモリを消費していき（表示する画像の数は増えていないのに）メモリオーバーになる現象が解決できないでいたがついに解決した！~
http://tomoyukim.hatenablog.com/entry/2014/03/15/230622~
原因はPImageの挙動にあった。~
PImageは他の型と異なりArrayListに格納するたびに新たにメモリを確保することがわかった。~
そのためArrayListにPImageを何度も格納していくごとにメモリを消費していきメモリオーバーになっていた。~
ArrayListに値を格納した後でg.removeCache()を行うことで解決できた。~
不用意にPImage及びPImageをプロパティとして持ったインスタンスをArrayListに追加しないようプログラムを書き換える必要性がでた。~
のでやります・・・



//
- はい、確認。 -- [[kazushi]] &new{2015-06-08 (月) 22:58:23};

#comment

**週報 [#ud689dab]
>[[三野宮定里]] (2015-05-26 (火) 22:24:13)~
~
【音声認識Juliusに挑戦】~
環境：Mac OS X Yosemite 10.10.2~
ここを参考にJuliusのインストールを行った。~
http://nero.blog.com/2012/11/02/macosx-「音声認識エンジン」julius-インストール/~
~
インストールは成功したがコマンド「julius」で実行できなかった。~
インストールしたときのログからファイル名をみてみると/usr/local/binの中に「julius.dSYM」というファイルを発見。~
「julius.dSYM」コマンドでjuliusを起動することができた。~
~
ただjuliusを使用するためにはディクテーション実行キットが必要なようなので実行キットをダウンロードした。~
今度は実行キットを実行するためにはportaudioというものをインストールしなければいけなくなったのでportaudioをダウンロードした。~
portaudioをインストールするためにはxcodeをインストールしなければいけなくなった。~
しかしSSDの空容量が1.1GBしかないので一旦ここまでにした。~
~
portaudioインストール参考サイト~
http://milanista224.blogspot.jp/2012/08/snow-leopardo-julius.html~
~
【はこだてアリーナサイン計画】~
アリーナサインのために画像をピクセルモザイク化するプログラムをProcessingで作成した。~
アルゴリズムは以下の通り~
・画像を読み込みPImageの作成~
・画像を2値化~
・ピクセル化~
・重心からの距離(三平方の定理で求める)を保存~
・重心からの距離をmap関数で1~3にする~
・randomGaussian関数を使ってノイズを加える~
・PDFで保存~
Illustratorから保存したPDFを開き、必要なサイズで印刷する。~
~
【情報ライブラリwebページ】~
「今月のA5棚」のページ更新を先月から頼まれてやっている。エクセルデータからHTMLで表を作って更新するのだが、手作業は大変なのでcsvファイルを読み込んでhtmlを書き出すプログラムをProcessingで作った。~
「そういうことができるのなら他にもやってほしいものがある」と次につながった。~
【稜線UI】~
インダストリアルクレイを使ってプロトタイプするための装置を作った。~
90mm*90mmの大きさで切り出したアクリルにクレイを塗る。~
その下に静電容量センサを仕込むことでタッチを認識することができた。~
~
【これまでやってきたことの言語化】~
これまでやってきたこと（UCD、学内サイネージ、不思議楽器WS、SORACAM）のプロセス、実現するために使った技術の振り返りを引きつづき行った。~
これまでやってきたことを並べて、共通することを見出し、図にする。~
今できること、やりたいこと、やらなければならないことを言語化する。~
~
【メモサイトの構築】~
Wordpressを使ってメモサイトを立ち上げた。~
記録を残すための道具も自分で作る。自分で管理できるのが良い。~
積極的に使っていきたい。~
http://sannomiya03.com

//

#comment

**週報 [#n952d6fb]
>[[三野宮定里]] (2015-05-25 (月) 23:45:04)~
~
【出欠】~
5/19（火）5限のみ出席~
~
【MyDiary】~
210*210レイアウト、A5版レイアウトも完成。最初のA4版と合わせて3種類のレイアウトができた。~
プログラムのほうのリファクタリングを行ったため改変が容易になった。~
二人でプログラムの改変するためファイルをDropboxで共有することにした。~
後輩たちに作ってみたいと沢山言われているのでワークショップを企画しようと思う。どんな方法がいいだろう。~
[前回からのアップデート]~
・フォントや色などカスタマイズするための変数をひとつのファイルにまとめ、設定を簡単に変えることができるようにした。~
・210*210版レイアウトの完成~
・A5版レイアウトの完成~
・exportするファイルをsvg、pdf、フォント埋め込みpdfの3種類から選択できるようになった~
・12ヶ月のフォントを月別に変えることができるようになった~
~
【アーカイブビュアー】~
進展なし~
~
【稜線UI】~
インタラクティブシステム通論の課題で稜線UI(仮)の制作を行っている。稜線UIとはなぞったらON-OFFが切り替わるボタンで、なんか新しい形をしたボタンを作ってる。講義の中ではインダストリアルクレイを使って造形のプロトタイプを行っているだけだが、先生からの極秘MISSIONで実際に動作するプロトタイプを制作することとなった。Arduino、LED、接触位置センサ、静電容量センサなどを買ってもらった。今週からプロトタイプ制作を開始する。~
~
【HI演習スライド制作】~
3年生の講義HI演習(5/28)で30分ほどwebコーディングの基礎を伝授することになった。HTML,CSSの基本的な書き方を伝授する。そのためスライドを作りはじめた。どうせならここ2年で学んだwebの世界を振り返るためにも知ってる知識を広げてみようと思う。三野宮が学んできたフロントエンドの世界を図解してみる。~
~
【バイオグラフィ作成】~
私は何者でどんなことをしているのか、何をしてきたのかを英語で書かなければいけなくなった。バイオグラフィというらしい。全然書けていない。~

//
- はい、確認。 -- [[kazushi]] &new{2015-05-26 (火) 09:14:34};

#comment

**週報 [#lf5b79f2]
>[[三野宮定里]] (2015-05-19 (火) 02:22:38)~
~
【出欠】~
4/19（火）出席~
~
【MyDiary】~
三野宮エディション完成。月別にフォントが変わるようにプログラムした。~
月初めにはフォントの解説をつけた。このレポートのほうが結構大変だった。~
フォントの歴史がわかった。~
~
【台湾WS】~
台湾WSが無事に終わった。~
The Best Vision賞をもらった。他の班が簡単・便利マシーンを提案している中、"買う"だけじゃない経験ができるスーパーにしたいみたいな提案ができた。ここに来てワークショップに参加してみて、いつの間にか「簡単・便利」というキーワードにめちゃめちゃ反応するようになっていたことに気がついた。どういうスーパーに行きたいか・したいかを考えた。自分たちの提案は（多分）クライアントのスーパーの人にとても褒められていたので良かった。~
~
科学館みたいなスーパー：野菜や果物の選び方がわかる展示物みたいなものが、商品の前に置いてある。例えば西瓜は叩いたときの音で良い悪いを判断する。西瓜売り場の前にその音が聴けるサンプルが置いてあって、西瓜を買う前にサンプルをノックして音を聴き、商品をノックしながら気に入ったものを選ぶことができるようなスーパー。台湾のスーパーは日本よりもものすごい種類の果物や魚が売っている。その分たくさんのことを学ぶことができるスーパーを提案した。~
~
産地を表示：--~
蔦屋みたいなスーパー：--~
~
英語は全然上手に話せなかったので筆談をたくさんした。図を書いてディスカッションを進めた。これがうまくいったので良かった。頑張れた。ディスカッションにばっちし参加できた。~
~
提案物に関してのディスカッションだけでなく、アイデアの出し方・考え方・大切にしていることなどのディスカッションをグループリーダーとできて良かった。~
~
あとは無事に帰函するだけ。~

//

#comment

**週報 [#p223b13b]
>[[三野宮]] (2015-04-30 (木) 19:48:53)~
~
【出欠】~
4/28(火）出席~
~
【MyDiary開発記録】~
[きっかけ]~
・「自分の欲しいものは自分でつくる」の流れから「手帳」に目をつけた~
・デザインとプログラミングを組み合わせて面白いことをしたい~
・女子二人がプログラミングにポジティブに挑戦できるお題になればいいなあ~
~
[step1 手帳デザイン]~
原田先生、おだし、あきちむがそれぞれオリジナル手帳をデザインした。~
~
[step2 Illustrator JavaScriptによる生成]
三野宮、八城が手帳デザインと平行してAdobe Illustratorでオブジェクトを自動生成するプログラムをJavaScriptで生成を進めた。~
Illustrator JSを使うことにした理由は、プログラムから描画したあとレイアウトの細かい調整をIllustratorから調整できるようにするためと、InDesignから面付けを行う為である。~
祭日などのデータは配列リテラルを使って直接JSに書き込み利用した。その配列リテラルはProcessingを使ってSVGファイルからデータを読み込み自動生成した。Illustrator JSでSVGファイルを直接読み込む方法が分からなかったためである。他にもIllustratorで動くJavaScriptでは関数をインスタンスとしてnewできないなど、ブラウザで動くJSとはやや挙動が異なるところがあった。~
JSプログラムは完成したものの、53ページ生成するのに、レンダリング?が7時間かかったため別の方法で手帳データを生成することにした。
~
[step3 ProcessingからPDFファイルの書き出し]~
~
[step4 ProcessingからSVGファイルの書き出し]~
~
[成果]~
・プログラミングによる印刷物デザインの可能性。様々なメディアをまたにかけるデザイナーになれそう。~
・人間中心設計の次は私達中心設計になりそうな直感。~
・~
//
- はい、確認。 -- [[kazushi]] &new{2015-05-11 (月) 21:51:52};

#comment

**週報 [#f17244bd]
>[[三野宮定里]] (2015-04-22 (水) 22:03:09)~
~
【出欠】~
4/21(火) 出席~
4/23(木) 出席~
~
【活動報告】
[スキル・目標・心配 in 青年センター]~
青年センターで今持っているスキル、達成したい目標、心配ごとのブレインストーミングを行った。自分のスキルを広げて俯瞰してみたところ、大体デザインとプログラミング、映像、チームマネジメント系の4つにグルーピングできた。~
目標についてはスキルアップと心構え系などがでてゴールの設定がまだはっきりできていなかった。~
心配ごとは、活動資金の調達が一番の心配だ。今持っているスキルを活かして活動資金を調達し、またスキルアップをしていくような循環をつくりたい。~
スキル、目標、心配は個人のものだけでなく研究室全員で共有し、今年のメンバーの傾向をみつけることを試みた。~
スキルはUnityや3D、プロジェクションマッピングといったものは自分にはない部分であった。~
目標は他のメンバーも自分と同様にふわふわした感じであったが、その傾向として実践してみる、モノをまずつくってみるといったところは共通した部分だというのが見えた。~
心配事は他のメンバーも活動資金に関することが多かった。活動資金調達は研究室としての課題であることがわかった。~
~
[サードプレイスとカレーキャラバンの話]~
木曜日はサードプレイスとカレーキャラバンについてのレクチャーを受けた。~
サードプレイスとは自宅・学校とは別の3つめの居心地のいい場所のことであり、そこでは知的で生産的で活発なおしゃべりが繰り広げられるような場所らしい。~
レクチャーを受けながら自分にとって「放課後の学校」はまさにサードプレイスだなと感じた。学校だけど。~
カレーキャラバンはカレーをみんなで食べるらしい。~
キーワードは「自分のほしいものは自分でつくる」、「自分が学ぶ環境は自分でつくる」。多分、自分にしか作れない自分の欲しいものがあるんじゃないかなぁと感じる。
~
[函館観光サイトの制作]~
函館観光の促進のための作戦として、観光ルートを自分で作るwebサービスを行いたいという話をうけた。~
~
参考~
徳島県観光サイト　じぶんで作るルートマップ　http://www.awanavi.jp/guidemap/~
~
上記サイトのようなサービスをイメージしているらしい。~
webデザインは経験があるので問題ないが、自分マップを作る部分はGoogle Maps API V3を使う必要がありそう。~
ということでGoogle Maps API V3の調査と練習を行った。~
そこで制作したデモページは以下である。~
http://kuwadate-hakodate.com/HakodateMap-Sample01/~
JavaScriptをゴリゴリ書いていくことになりそうなので、改めてJavaScriptの書き方やデザインパターンについて復習をする必要がありそう。~
でも結構やれんじゃん自分。先週までに行っていたPHPとデータベースを組み合わせれば人気順に観光名所を紹介するようなやり方もできそう。~
~
[『ゆっくり、いそげ』] ~
今週の必読書。まだ読み切っていないが、「消費型」と「贈与型」の違いについての考察が行われているようだ。デザインは「贈与型」モデルに近いんじゃないかという印象を受ける。読み進めたい。~
~
[デザイン勉強会：ヨハネス・イッテンの12色環]~
先週の水張りから今週は着彩を進めた。まずマージンをとり12色環の作図を行った。作図は定規とコンパスを使って行った。~
着彩は黄色から赤までを行った。アクリル絵具はどれくらい水で溶かせばいいのかがまだつかめていない。難しい。~
黄色には赤を少しまぜ、赤には黄色を少しまぜた。~
来週は青系を塗っていく。~
~
[屋台プロジェクト勉強会]~
屋台プロジェクトの勉強会を森町で行った。工場見学も行った。~
スギとトドマツを触ったがスギの白さが綺麗で好きだ。~
~
[webデザイン仕事]~
デザイン指摘とデザインカンプを納品した。仕事完了。~
~
[英語勉強]~
八城さんおすすめのwebアプリ、duolingoを進める。月(1月-12月)が英語で書けない。難しい。文法はForestを進めている。~
~
【今週の野望】~
・3月14日 映像表現・芸術科学フォーラムで発表する！~
八城さんに教えてもらった。システム系の人も多くいたらしい。DIGやれば映像表現の作品にもなる？~
・Arduino Cookingの完成度をあげていく。エンタメ的に面白いくせにちょっとづつプログラミングについてわかっていくような番組をつくる。女子にやらせるのもやりたいけど「3分クッキング」あらため「3ちゃんクッキング」とかやりたい。~
~
【今週の一言】~
実存論的観点からデザインをとらえると、きっと人間中心設計の人間は客観的観点から生まれるこの世にいないペルソナみたいなものじゃなくて、共現存在になっていきそうな感じがした。人間中心設計あらため、共現存在中心設計。~
でも最近放課後に八城さんとやってる「自分がほしい道具は自分でつくる」ムーブメント、そこからみんなも使える道具を作っていくようなやり方も別な手法としてありなんじゃないかとちょっとだけ感じている。共存在中心設計、的な？~
美馬のゆり先生の『未来の学びをデザインする』にある共同体としてのほにゃららというくだりもヒントになりそう。
//
- はい、確認。 -- [[kazushi]] &new{2015-04-27 (月) 17:44:50};

#comment

**週報 [#x3cc9d12]
>[[三野宮定里]] (2015-04-20 (月) 21:03:58)~
~
【出欠】~
4/14(火) 出席~
4/16(木) 出席~
~
4/14(火) 出席~
4/16(木) 出席~
~
【成果報告】~
ScratchWS~　
Scratchをやった。MacのOSをYosemiteにしてからnanoboardが反応しなくなった。Scratch、ドライバ共にインストールしなおしても反応しない。~→解決方法はまだ。~
~
Siebold Collection~
シーボルトコレクションで使用するビュアーの制作を進めた。画像ファイルをアニメーション表示するためのプロトタイプを作成した。次に各画像データの情報を表示するための仕組みをつくることが目標になった。~
そのためにPHPとMySQLの利用を考え、Processingとの連携を目指した。PHPとMySQLは触ったことがなかったので自主お題を通して習得することを行った。~
~
自主お題：ソースファイルのカード化~
PHPとMySQLとProcessingを連携させ、ファイルをサーバに保存し、サーバからデータを取得してファイル生成するシステムを制作した。~
はじめにPHPとMySQL習得のためドットインストールでの学習を行った。基本的な構文がわかった。ProcessingのloadString()メソッドとPHPのGETメソッドを組み合わせプロトタイプの制作を行った。Processingからデータベースのレコードの追加、削除、更新ができるようになった。~
~
お題の進捗~
ver.1 単体ファイルをデータベースへ保存、データベースから情報を取得しファイル生成が可能になった。~
ver.2 複数ファイルをひとつのカードにまとめることが可能になった。~
~
お題の課題~
・PHPのGETメソッドの文字列制限にひっかかる。長いソースファイルは保存できない。~
・テキストファイル以外は保存できない。画像データを使うソースファイルはカード化できない。~
~
~
【今週の野望！】~
・プログラムファイルのカード化が便利。コーディングばっかりやって楽しんでいるがちゃんとデザインしなければならない気しかしてない。今後に期待。~
~
・もえもえサイネージプロジェクトが正面玄関のサイネージに遠慮しているかもしれない。玄関のサイネージをはやく更新してプロジェクトよりすごいのをつくってどやってする。一年生にすごいって言ってもらえたのでまだまだ頑張れる。~
~
・空カメラプロジェクトはせっかくなので今年はツール開発を頑張りたい。今やってるビュアーとかサーバを応用すれば撮影データの管理とかを上手くやるソフトができると思う。~
~
・Peace Songのウェブアプリ化は難航中。HTML5のAudioタグのPlayメソッドがSafariだと実行までに時間がかかるのがネック。つらい。~
~
・モザイク処理するプログラムを作った。Captureと連携させるとドットアニメーションが作れる。おもしろそう。発展に期待。~
~
・ロバの音楽座プロジェクションマッピングソフトを制作している。動画をProcessingで再生、停止ができるようになった。再生位置をタイムラインで表示することもできた。あとはサイズと位置をタイムラインを使って操作できるようにする。あとなんとか実行ファイルにする。DVDとかメディアで渡せると親切。~
~
・英語を習得する。5月15~17
日に台湾ワークショップに参加する。6月6日にTOEIC IPを受ける。夏にSan FranciscoとAmsterdamへ旅にでるのが目標。Forestで文法の習得、Duolingoでプチテスト、速読英単語でリーディング、Huluでリスニングを特訓中。~
~
・表現の特訓を始めた。金曜午前はデザイン勉強の時間にした。まずは色を学ぶ。ヨハネス・イッテンの色相環をアクリル絵具で描く。今週は水張りをやった。~
また『きれいな欧文書体デザイン』を使ってフォントの勉強も始めた。今週はGaramondのレタリングをやった。来週はBodoniあたり。
~
・原田ラボウェブページをつくる。wordpressで構築する。いろいろログを残す。~
・ポートフォリオサイトをつくる。wordpressで構築する。いろいろログを残す。~
~
・後輩のためのweb勉強会をはじめる。HI演習の課題にポートフォリオサイトの制作があるのでこの課題を今から先にやっちゃう。Processingはいきなりなかなか頑張れないらしい。~
~
【今週の一言】~
プロへの次のステップは「頼まれ仕事をはやくこなす」こと。

//
- はい、確認 -- [[kazushi]] &new{2015-04-20 (月) 23:13:31};

#comment
トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS