[3091] SHARPハッカソンに参加してきました

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■明日もデザインで食べていこう！［19］
第3回 SHARPハッカソンに参加してきました

秋葉秀樹
< https://bn.dgcr.com/archives/20110725140200.html
>
───────────────────────────────────
こんにちは、秋葉です。台風の影響なのか、ここ最近涼しかった関西ですが、今日からまた暑くなってきたように思えます。

さて、今回は東広島にあるSHARPさんの事業所、というか自然に囲まれたビルの一室で行われたAndroidアプリ開発イベント（ハッカソン）に2日間かけて行って参りました。

ハッカソンとは、開発をされているプログラマーさんが、限られた時間の中でアイデアを出しアプリを作るイベントなんですが、デザイナーには全く疎遠なイメージがあります（個々がどう思うかはさておき、一般的にそういった意識が多いのは事実です）。

しかし、今回はSHARPさんや運営に携わっているブリリアントサービスさんのアイデアで、デザイナーもハッカソンに入ってもらい、一緒にアプリを開発してみようという試みということで、参加させていただきました。

当日朝早く新幹線に乗って東広島駅へ、そこからみんなでタクシーに乗ってSHARPさんの施設に向かったわけですが、空気がうまい。ホント、いいところでした。

今回は、SHARPさんにはAndroid2011年夏モデル端末も用意していただき、5つのチームにそれぞれ色んな実機が貸し出されました。

チームで朝11時30分からアイデア出しを行い、どんなアプリを作るか話し合いが始まりました。ただここで重要だったな、と思うのが、メインとなるテーマを決定しようというところ。闇雲にどんなものを作るか考えると、メンバー4人なんですが、個々の考えも違うのでなかなかまとまりにくいパターンに陥るケースがよくあります。

今回はまず、「夏」というテーマに限定。
ここで色々出てきます。
海、山、キャンプ、水着、クラゲ、スイカ...

で、決まったのは、そうめん流し（流しそうめんという人もいる）。
さてさて、ここで面白い実験をしてそうめん流しアプリを作ろうということで、

・複数台の端末を縦に並べる。
・1番目のデバイスをタップしたら、そうめんが流される。
・2番目のデバイスに1番目のそうめんが流れてくる。
・3番目のデバイスに2番目で取りそこねたそうめんが流れてくる。
・3番目で取りそこねたら4番目のデバイスに...

といったように、流れてきたそうめんを取る（箸ですくう）ゲームなんですが、何台も実機をつなげられるところがポイントで、通信手段はBluetoothを使ったものです。

プログラムの仕組みとしては、最初の「親」となる実機の次の「子」が2番目になり、3番目の実機から見れば、2番目の実機が「親」となる認識方法で数珠つなぎが構成されます。

そうして、あるデバイスが「最後の子（つまり一番最後）」であると認識したら、画面の下に「受けザル」を表示して、最後でなかったら、そうめんを流す竹を上から下まで表示させるというものです。

下記の写真は同じメンバー「AndroidSDK開発のレシピ」の著者のgabuさん提供です。
【6台つなげてデモした写真】
< http://yfrog.com/gyc6dwqmj
>
【ちょっと拡大】
< http://yfrog.com/kgzyoycj
>

と、思ったら、gabuさんのブログ、その名も「gabuchanの日記」にてそのレポが紹介されています。
< http://d.hatena.ne.jp/gabuchan/20110724
>

そんなわけで、USTREAMでもその様子が公開されています。下記URLは、制作発表のものです。（僕の発表は30:30くらいからです）
< http://www.ustream.tv/recorded/16208815
>

僕が主にチームの発表をさせていただきました。普段はたまにソースコードも書きますが、「今回は一切ソースコードは書かず、デザインに専念します」と宣言した経緯もあって、チーム内、開発者3名、そしてデザイナーは僕1人という構成でした。

チーム名が「デラリアル」といいまして、「デラ」は名古屋弁で「超」とか「すごい」という意味です、つまり「超リアル」。まあ、リアルにそうめんが流れたらいいな、という想い......だったんでしょうね。

今回はAndroidのキャラクタ、ドロイドくんを、デラリアルにしました。スタートアップの画面で、活き活きとしたイメージの実写版（？）ドロイドくんが一生懸命そうめんをすくっている印象を与えたかったので（gabuさんのブログに画像が載ってます）。そんな楽しくワクワクさせるデザインというのは、とても大事です。

アプリはデザインによって売れ行きが変わるということを、色々とアプリを作られた方から聞きます。僕の周りにはWebデザイナーというデザイナー職の方が多いのですが、どうもこういったデザインの目的には着目されにくいな、と感じています。

人間中心としたWebサイトの設計、ユーザエクスペリエンスなど、セミナーでは色々取り上げられます。それはとても大事なのですが、アプリの開発という分野のみならず、デザインで人を「おおっ」と驚かせることが必要な場面だってあるわけだし、そういった表現で人の心を動かせるデザインが売上につながるのであれば、そこに全力を注げるデザイナーでありたい、だってそれで僕はお金をもらって仕事してるわけだし。

概ねデザインは好評でしたが、今回、実はこだわった目的は「リアル」ではなく、ただひとつ。それは......「これを見た人が有料でも買いたくなるアイコンとスタートアップのデザイン」。これにつきます。

もちろん、自分に自信があって言ってるわけではありません。本当に売れているアプリやインターフェイスのデザインを見ると、自分のは、まだまだ作っては疑い、作っては疑い、の繰り返しだと思ってやみません。自分のチカラというのは、いつになっても色んな意味で完成しません。常にまだまだな状態だな、ということを改めて気づきました。

さて、まとめ。ハッカソンですが、名前の印象からどうしても僕らデザイナーさんは敬遠しがちです。そういう意味では、大変意義のあるイベントだったと思います。開発者の方とのやり取りが学べるいい機会だったわけですが、いざ始まると時間が足りず、自分の作業だけで精一杯なことがあります。そこの反省はきちんとしたいですね。

例えば、アイデアに対し、自分の出せる引き出しの少なさが原因じゃなかったか？　デザインのトライアンドエラーを繰り返す際、仕方がない（やってみないと本当にわからない）ケースと、事前に察知して余計なトライは回避できるケースもあると考えています。両方ともとっさの判断が要求されるとき、人は経験によって乗り越えられる場合と、無駄足を踏んでしまう場合があります。

僕はこの仕事を20年やってきた今でも、デザイナーとしてのエラーを経験して、少しでも効率の良いワークフローを実現できるようになりたいと考えています（効率、というのは、よくあるツールに頼るとかそんなのではありません。もっと自分の脳を鍛えるという意味に近い）。

今の自分の実力を色々と再認識できた2日間でした。SHARPの方、Androidの会の方、参加されたみなさん、勉強になりました。ありがとうございました！！

【あきば・ひでき】
hidetaro7@gmail.com
< http://www.akibahideki.com/blog/
>

テクニカルディレクター・デザイナー。DTP黎明期からグラフィックデザインを学び、東京都営団地下鉄など交通広告を多数手がける。同時に音楽活動も活発に行い、西日本半全国ツアーなどを展開、某専門学校のテーマソングを作詞作曲、編曲から楽器全てを演奏してレコーディングするなど、マルチなクリエイティブ活動も。最近では東京と大阪の教育施設などで講師業をも務める。
HTML CSS JavaScript Flash ActionScript 3DCG Movie DTP GraphicDesign...多種スキルを持つ。Web標準技術だけに執着せず、全てのメディアで説得力のある表現にチカラを注ぎたい、そんな仕事をしたい。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■クリエイター手抜きプロジェクト［284］Adobe InDesign CS3/CS4/CS5編
Bridgeで選択したファイルをInDesignに配置する

古籏一浩
< https://bn.dgcr.com/archives/20110725140300.html
>
───────────────────────────────────
Adobe Bridgeのウィンドウで選択した画像ファイルを、自動的にInDesignに配置するスクリプトです。なお、スクリプトはBridgeやInDesignから実行するのではなく、ESTK上から実行してください。実行する際のターゲットアプリケーション名はBridgeになります。

以下のスクリプトは、Bridge CS3のウィンドウで選択された画像ファイルをInDesign CS3に配置するものです。実行する前に、あらかじめ画像やテキストファイルを貼り付けるドキュメントを用意しておく必要があります。貼り付けられる画像は、現在開かれているInDesignの最前面のウィンドウの開いているページ（アクティブページ）になります。


var fileList = app.document.selections;
for(var i=0; i<fileList.length; i++){
myBTalk(fileList[i].path);
}

function myBTalk(filename){
var scriptcode = 'var fPath = "'+filename+'";';
scriptcode += 'var imgObj = app.layoutWindows[0].activePage.textFrames.add();';
scriptcode += 'imgObj.contentType = ContentType.graphicType;';
scriptcode += 'imgObj.place(new File(fPath));';
scriptcode += 'imgObj.fit(FitOptions.frameToContent);';
//$.writeln(scriptcode);
var btObj = new BridgeTalk;
btObj.body = scriptcode;
btObj.target = "indesign-5";
btObj.send();
}


特定の拡張子を持つファイルだけを貼り付けたい場合には、以下のようにします。最初の1行の拡張子を変更、追加することで任意の拡張子を持つ画像ファイルを配置することができます。


var ext = [".jpg", ".png", ".gif"]; // 拡張子
var fileList = app.document.selections;
for(var i=0; i<fileList.length; i++){
for(var j=0; j<ext.length; j++){
if (fileList[i].path.indexOf(ext[j]) > -1){
myBTalk(fileList[i].path);
}
}
}

function myBTalk(filename){
var scriptcode = 'var fPath = "'+filename+'";';
scriptcode += 'var imgObj = app.layoutWindows[0].activePage.textFrames.add();';
scriptcode += 'imgObj.contentType = ContentType.graphicType;';
scriptcode += 'imgObj.place(new File(fPath));';
scriptcode += 'imgObj.fit(FitOptions.frameToContent);';
//$.writeln(scriptcode);
var btObj = new BridgeTalk;
btObj.body = scriptcode;
btObj.target = "indesign-5";
btObj.send();
}


InDesign CS3でなくCS4で実行する場合は以下のようにしてください。

btObj.target = "indesign-6";

InDesign CS5の場合は以下のように変更してください。

btObj.target = "indesign-7";

InDesign CS5.5は持っていないので、動作確認していません。
多分btObj.target = "indesign-8";
と指定すれば動くのではないかと思います。


【古籏一浩】openspc@alpha.ocn.ne.jp
< http://www.openspc2.org/
>

とりあえず2台あるMac ProにLionとLion Server入れてみました。Spacesのかわりに登場したMission Control。新しく仮想デスクトップ作成する方法が、あれでは分からない。最初からボタンは表示しておいてもらわないと......。

アナログTVだったので停波。長野県でも近くの筑北村は、村がアナログ波を送信するみたいで、チューナーとかいらない様子。見る側はアナログでも不便じゃないんだけど。逆にデジタルにすると不便なのでアナログでお願いしたいところ。

で、結局デジタルからアナログに変換するチューナーを取り付けました。アナログ時代よりもきれいに映る。ということは、無理して地デジTVとか買わなくても問題ないみたい。ただ信号入力がL1になってしまったので、アナログのHDDレコーダーも録画する番組を厳選せねば。で、厳選したら続きが気になる3番組だけだった。テレビ番組がこんなにも不要になっていたとは......。

・Mac OS X Lion使い方辞典
< http://www.openspc2.org/reibun/MacOSX/Lion/
>

・毎度おなじみASCII.jpの連載。HTML5+NimbleKitでiPhoneアプリ作り第7回
「NimbleKitでiPhone用動画アプリを自作しよう」
< http://ascii.jp/elem/000/000/616/616065/
>

・Google API Expertが解説する HTML5逆引きリファレンス【発売中!!】
< http://www.amazon.co.jp/dp/4844330349
>

・iPhone/iPad × HTML5アプリ制作
< http://www.amazon.co.jp/dp/4797362618
>

・ハイビジョン映像素材集【こつこつ追加してます】
< http://www.openspc2.org/HDTV/
>

・Adobe Illustrator CS3 + JavaScript 自動化サンプル集
< http://www.openspc2.org/book/PDF/Adobe_Illustrator_CS3_JavaScript_Book/
>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■ローマでMANGA［41］
無理やりMANGA作品制作作戦

midori
< https://bn.dgcr.com/archives/20110725140100.html
>
───────────────────────────────────
学校は今夏休みなので、その他の話題です。

●そこそこ進む「MangaBook（仮タイトル）」

前回、元MANGAセミナーの参加者であるアレッサンドラに声をかけたが、どうしても抜け出せない用事ができて、アポに来られなくなった話をした。
< https://bn.dgcr.com/archives/20110617140100.html
>

その後、無事に会うことができ、MangaBook参加に双手をあげて賛成。頼んだ絵をサクサクと描いてくれて、たちまち原稿が3枚上がった。
例えば......

依頼のラフ画
< http://p.tl/39Mj
>

アレッサンドラの鉛筆下書き
< http://p.tl/xKiu
>

アレッサンドラのペン入れ画
< http://p.tl/us7b
>

アレッサンドラにお願いする号は、フキダシの位置の重要性を語る。イタリアでは、状況を追っていく方式なので、人物や背景が大事。だからフキダシは絵の邪魔にならないところへ入れる。

MANGAは、キャラの感情を描くから、フキダシの位置は大事。フキダシの位置が顔に近ければ、カットが変わって、キャラの「映像」に切り替わった途端にしゃべることになるし、顔から遠かったりセリフが二つに分かれたりすると、ゆっくり言っていることになる。フキダシを話しだすタイミングや、ゆっくり話してるのか、速く話してるのかによって示す感情が変わってくる。という、ヨーロッパマンガにはない表現法を、例をたくさん出して解説するつもり。

マウロ君に作画を頼んでいる「ラフのキャラの性格を読み込んで物語を作る」号は、他の仕事（マンガ制作とは関係ない仕事）が忙しいらしく、なかなか進まない。

私も文を書かないといけないので、マウロのせいで先に進めないというわけではないけれど、マウロの1号、アレサンドラの2号に続いて3号をマウロに頼まないほうがいいか......と思ってしまう。仕事の早さって、仕事を依頼する側に立つと、どんなに大切な要素なのか、しみじみわかってしまう。

早く軌道に乗り、編集長であり校長の案である英語版、iPad版と進んで、MANGA構築法が広まって、ヨーロッパ産のMANGAが出てくる発端になるといいな、とワクワクしている。夢は大きく！

●デアゴの「宿題」

もう一つの仕事、デ・アゴスティーニの「MANGA＆ANIME」のサイトで、6月に宿題を出した。1月と3月に、それぞれ女性キャラと男性キャラを考える宿題を出したが、今回はそのキャラを使って（宿題に参加しなかった人は、新たに作る）原稿を一枚作る。

シチュエーションを説明し、条件として
◯コマ数は最高6コマ
◯主人公を男キャラか女キャラに決め、その感情がわかるように描く
と、MANGA構築で原稿を作るのに慣れてない若者にはちょっと難しいかな、と思う条件を出した。

さらに、この後の宿題をやっていくと、4ページのショートショートができる仕組みにした。無理やりMANGA作品制作作戦だ。

7月後半と8月全般で、優秀作品4編を1編づつ、良い所、直したほうが良いところを解説していく。15編集まり、そこそこ見られる作品がちゃんと4編あった。最優秀に選んだものは、よく考えられていて、僅かな直しでぐっと良くなるものだった。
< http://p.tl/cg4k
>

オリジナル原稿では、読者の視線が無駄に右往左往して、焦点がややぼけてしまう。フキダシやト書きが、あまりにもきれいに散らばり過ぎて、視点がまんべんなくさまよってしまうのだ。
< http://p.tl/nLxc
>

そこで、いらないト書きを捨て、フキダシの位置をずらし、アップ時の視線を読者に向けることで、焦点をはっきりさせる、というお直しをした。
< http://p.tl/DKgW
>

2位と3位は、ジーーッと見ると、シチュエーションを読んで、そのまま6コマに振り当てたのだな、とわかってきた。そして、感覚的にコマの大きさを変え、アップを使い、結果としてちゃんと要求したものを提供していた（多少の直しは必要だけど）。
< http://p.tl/mYmu
>
< http://p.tl/dfLw
>

感覚でMANGA構築法を使ったのなら、こんなに嬉しいことはない。レイアウトをしてみて、なんかイマイチだなー、と思ったときに、フキダシと顔の距離だとか、空間の取り方の理屈を使えば、大いに助けになると思う。

「MangaBook」が世に出て、こうした助けになるといいなぁ。そして、新しいマンガがボチボチ出始めるのだ......。いつか。

【みどり】midorigo@mac.com

言いたいことはたくさんあるけど、まとまらない。以下のURLの国会中継動画をぜひ見てほしい。このテキストが掲載される頃には、なにか良い方向に進展があることを祈りつつ（一部のマスコミしか報道していないというのも怒りを呼ぶ）

7月21日参議員予算委員会山谷えり子　「民主党裏の顔は北朝鮮」1/5
< >

7月21日参議員予算委員会　山谷えり子「外国人献金問題」1/3
< >

西田昌司「菅直人の4つの大罪」
< >

イタリア語の単語を覚えられます！というメルマガだしてます。
< http://archive.mag2.com/0000075559/index.html
>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記（7/11）

・昨日も今日も比較的涼しい。先週の火曜日から異常に涼しい夏が続いている。いまだセミの声が聞こえない。一週間前、大阪のクリエイターに聞いたら、「こちらのクマさんも静かです。去年の三分の一以下ですね」とのこと。長野の古籏さんは昨日現在、「夏なのに静かだと思ったら、こちらもまったくセミひとつ鳴いてない状態です。ちなみに、山の上まで行ってもあまり虫がいなくて静かです」という。去年の猛暑は過酷だったが、こんな夏でいいのか。心配になる。「寒さの夏はおろおろ歩き」の感覚である。小学生の報告によれば、きのう高層階でセミを見たという。高層階の通路には、風に飛ばされてきたセミをはじめカナブンやカミキリ、コガネムシの仲間がよく転がっている。みんな生きている。昆虫採集にはいちばん適した場所かもしれない。たった今（9:03）ミンミンゼミの健気な声を聞いた！　感激。しかし、それより早く鳴き始めるはずのニイニイゼミやアブラゼミはどうしたんだ。／地デジ移行。昨日の朝刊のテレビ欄では、テレビ朝日が10から5へ、テレビ東京が12から7へ、NHK3が2へチャンネル移動しているではないか。従来設定でも番組は見られるが、番組表とは違ってくるので、混乱を避けるため渋々チューナのチャンネル割当を変更した。勝手なことをしてくれるわ。近所の路上に大型アナログテレビが2台捨てられていた。荒川土手にも、朝になったらテレビがいくつもゴロゴロ、という風景が見られるかもしれない。困ったものである。（柴田）

・この土日に東広島に行って来た。「第3回シャープ　ハッカソン／シャープ最新スマートフォンを使ったAndroidアプリの開発」に、うちのメンバー5人がデザイナーとして招待を受けたのだ。ハッカソンという言葉自体知ったのは半年前ぐらい。10年以上前からあるらしいのに。「Hack」と「Marathon」を組み合わせた言葉で、皆で集まり開発し最後にプレゼンして楽しむお祭りなのだそう。メンバーで行くしと気楽に考え、忙しさにかまけて、前日までこのイベントで何をするのかすら調べていなかった。Android端末を持っておらず、触ったのは数度。慌てて夕方に書店で書籍を2冊購入し、新幹線の中で斜め読み。冷や汗をかきながら会場に到着。最前列しか空いてなくて座ったら、結局その席でグループ分けが行われ、開発開始。ほんと無知で良かった。知ってたら怖くて参加できなかったと思う。懇親会で、参加者はAndroid開発の有名人ばかりだと聞いた。招待デザイナーの中には矢野りんさんまでいらしてたよ。デザイナーとイラストレーターの違いは、あまり知られていないような気がした。デザイナーがキャラクターを描けるとは限らない。高校の文化祭で、なんとかっぽいキャラ（いちおうオリジナルキャラ）描いて売ったら、結構売れたことはある。でもそれはプロのイラストレーターとはクオリティが違うのだよ。人前で出せるわけないじゃないかと大量の汗。続く。／と書いた後に秋葉さんのテキストを読んだ。Ustはずっと残るのかな......（汗）。初日座っていた席が先にとられていた。なぜ席替え？　と思ったのだが、映像を見て理解した。（hammer.mule）
< https://sh-dev.sharp.co.jp/release/20110701_a.html
>
第3回シャープ　ハッカソン＠東広島
< http://www.ustream.tv/recorded/16182220
>
オリエンテーションの様子
< http://www.masahiko.info/it/archives/000958.html
>
ハッカソンとは