うかべん実況隊 - 横浜#3

2009年3月15日（日）に、横浜市でうかべんが開催されたので、行って来ました。
今回はライトニングトーク枠でSP登録されているので、数日前から落ち着かない日々を過ごしていましたが、
結局、当日の朝までプレゼンを作成しながらの上京に。（遅いです）
というわけで今回も内容をリアルタイムまとめ実況しました。
時間的にまとめきれなかった箇所もあるので、各スピーカー様の資料をあわせてご覧下さい。


（とか考えながらのったり準備してたら）
キャー始まっちゃった！今回も行くようかべん横浜実況中継（ぽろりもあるよ）


長くなったので本文はリンクから。

C.Ponapalt様 『ゴーストレシピ#4』

今回は主にバルーンの話。ただ文字を表示させるだけが能じゃないんです。

  • バルーン内に画像を埋め込む方法「\_b[...]」
  • リソースデータの読み出しまでできる！Windowsの標準アイコンを描画する例
    • \_b["%SystemRoot%\system32\shell32.dll.-137"]
  • クイックセッション \_q
  • フォント変更 \f[hoge]
    • （color,bold,height,name,italic,underline,strike,sub,sup...）
    • \f[default]で元に戻る
  • \C （文頭につける）前の内容に追記する。
  • \_l[x,y] 文字表示位置変更
  • \c 文字を消す。文字単位・行単位の表示もOK
  • これらを使うと……
    • ゴースト「乱読にしき」のバーコード番号入力インタフェース
    • バルーン内でアスキーアートをアニメーションできる
  • \q（選択肢タグ）と\_a（アンカータグ）の使い分け
    • \q はユーザが選択しないといけない（固まる！）
    • \_a はユーザが選択しなくてもいい
    • →使い分けに注意！
  • \__q：\_aのような挙動をする選択肢タグ。自動改行もあるよ
  • まだ実現していない機能
    • 可変サイズバルーン
    • バルーン複数表示
    • フラッシュとか貼り付けたい
    • →84年ほど待てば実装されるかもしれません（2093年3月15日までに実装）

（質疑応答）

  • 縦書きバルーンは？→提案済み。力ずくで表示することはできる。
  • 最後の一文字・一行だけじゃなくて任意の文字を指定したい
  • \fの色指定でカラーコードは？
  • バルーンのサイズをSHIORI側から取得は？→プロパティシステムで可能

（感想）
バルーンいじりは「レチハルカ」の写真表示ほかでいろいろ試していますが、「乱読にしき」の入力インタフェースとアニメーション表示は正直言って私のツボです。ああいうの大好き。裏で走ってる膨大なアニメーションスクリプトにも好感度ＵＰ！です。ぜひうちもやってみたい。
ただ、後のさとーさんのColorsデモでも感じたことですが、「洗練された」インタフェースは高度なデザイン能力が要求されますね。
MacのAquaとか最初に作った人は凄いと思うんだ。

Fine Lagusaz様 『使いやすいサイト・見やすいサイトってなんぞや』

ユーザビリティ関するお話。
プロジェクタに嫌われるFineさんカワイソス（´・ω・）

  • Webサイトのユーザビリティ＝目的のゴーストの見つけやすさ、障がいの有無にかかわらず利用しやすいか？ が基本
    • それだけではなく、アクセシビリティの考えも含んでいる
    • アクセシビリティ＝「Webを利用するすべての人が、年齢や身体的制約、利用環境等に関係なく、Webで提供されている情報に問題なくアクセスし、コンテンツや機能を利用できること」（Webアクセシビリティとは？／基礎知識 infoaxia）
    • ブラウザ、OSの違いによっても問題が生じないようにすること。
    • サイトが見やすくなると、ゴーストを広める助けになるかも。（目的）
  • 具体的にどうすればいいのか→「やってもやらなくてもいい」程度
    • (1) サイトの目的を決める ex) ゴーストを公開したい、小説を…絵を…
    • (2) スプラッシュページ（玄関、入り口ページ）をなくそう。1クリック余計な手間が生じる！（もちろん必要な場合は必要ですよ。18禁ページとか）
      • 注）うかべんのページにもスプラッシュページあります
    • (3) 小さな画面のパソコンにも配慮を！ 800×600でもメニューなどの重要な項目が見えると望ましい。ブラウザがいつもフルスクリーンとも限らない。
    • (4) リキッドレイアウトを使おう！ リキッドレイアウトとは横幅にかかわらずブラウザの横幅に依存して表示されるレイアウト。反対語はソリッドレイアウト。悪い例：yahoo（テーブルタグ＋横幅fix）
      • 注）うかべんのページはソリッドレイアウトです
    • (5) リンク、未読リンク、訪問済みリンクの色や修飾はわかりやすいように。リンクでない文字にリンクと同じ色や修飾を設定しない。（これほんとにまぎらわしいです）
    • (6) ユーザにわかりやすい言葉で。難解な専門用語や省略語、頭文字はできるだけ使わない。サイトの想定ユーザ層に合わせよう。
    • (7) 大きなファイルへのリンクには情報を。ファイルの種類、サイズ、ほかに必要なプログラムやファイル（Adobe Readerなど）へのリンクも付加する。アイコンもつけると親切？
    • (8) 56kモデムで10秒待たずに表示されるかどうかが最低ラインという基準がある。商業サイトでは3秒、5秒ルールということも。→最初のindexページが10秒で表示できればうれしい。細分化されたページはそれに限らない
    • (9) 各ページのナビゲーションは統一しよう。ユーザが戸惑わないように。
    • (10) 2〜3クリック以内ですべてのデータにアクセスできるのが望ましい。
    • (11) 文字と背景のコントラストを高くする。白＋黒、青＋黄色など。背景色を明るくしすぎると目が疲れる。
    • (12) ユーザの現在位置がわかるようにナビゲーションをつけるとよい。
    • (13) 重要な項目はページの一番上に。ブラウザは最初に一番上を表示するので。一番左上はとくに大事な場所で、もっとも重要なリンクを「目立つように少しだけ」配置するとよい。
    • (14) 機種依存文字は使用しない。 (金)ゴースト配布 とか意味がわかりませんよね！
    • (15) サムネイル（小さな画像）を使用しよう。ウェブサイトを軽くする効果もあるし、ひとつのページにより多くの画像を載せられる。
    • (16) 完成してからページにリンクしよう。世の中のUNDER CONSTRUCTIONという単語があなたを怒らせます。
  • とりあげたのはほんの一部。自分のサイトが見やすいかどうか考えるきっかけになれば幸い。
  • 質疑応答
    • リンクを目立たせるのはいいが、ほかのリンクとかけ離れたデザインをさせるとユーザが広告（バナー）と誤認して視線を向けなくなるので注意。
    • スプラッシュページの使い方。更新履歴などを書いておけばスプラッシュページがあってもいいんじゃないか？→有意な情報が書いてあったらもはやスプラッシュぺージではないのでは？
    • サイトトップをブログにしてしまうのはどうか？→ブログがメインのサイトだとありかも。

休憩10分

（超押しまくりです）

ライトニングトーク（1） 神鳴様 『おーとちょいす』

  • ランダムトークに選択肢を仕込むとき、タイムアウトが発生すると→OnChoiceTimeoutイベント発生、「無視された〜」とかへこんでしまう。
  • ならデフォルト選択肢を決めて、自動で選択させるといいんじゃない？ という発想。
    • タイムアウト時にデフォルト項目が自動で選択される
    • デフォルト項目をユーザが決めることができる
  • 「ジャンプ元ラベル情報」を参照し、トークを呼び出した元に戻る仕組み。（里々）
    • ※ラベルはuniqueな名前でなくてはいけない。

ライトニングトーク（2） しらたま様 『自作SAORIの紹介』

  • SAORIって？＝ベースウェアに依存せずに機能を追加する仕組み。DLL。
  • しらたま様自作SAORIの紹介。filewatch.dll、imgctl.saori.dll etc
  • filewatch.dll
    • ファイルやフォルダの更新をSSTP NOTIFYで通知。OnBootあたりでsaoriを呼び出して使用。
  • imgctl_saori.dll
    • 画像処理ライブラリ imgctl.dllのラッパ。
  • ssparser_saori.dll
  • call_func.dll
    • stdcallな任意のdll関数を呼び出し可能。メモリ操作も可能。これがあればなんでもできちゃう
    • dllから関数を読み込んでメモリ領域を確保して関数を確保して出力。
  • SAORIネタ募集中！納期3日〜1ヶ月！

ライトニングトーク（3） ヒノハル 『AYAでクイズを作ろう（ry』

忘れてください

ウエ紙様 『順路のない物語――差別化・重み付け・描写のゴースト作成』

  • ストーリー、キャラクターの作り方について
    • 作品の方向性を事前に決めて、計画的にゴーストを作ろう＝独自の世界設定を作ったり、ゴーストの各キャラが独特の過去を持っているようなゴーストに向いている話。
  • ゴーストの制作工程
    • 前準備、差別化、重み付け、描写
    • 前準備＝作りたいゴーストの分析、何がおもしろいかをあきらかにする
    • 差別化＝作品に触れるきっかけを作るために作品の第一印象を差別化（キャッチコピー）
    • 重み付け＝「描写」に説得力を持たせるために迫真性のある情報を提供（リアリティ）
    • 描写＝ゴーストのおもしろい部分、作者がそのゴーストに惹かれる部分を描き出す
  • 作品のコアを定義する
    • 作品の方向性が論理的に決まるので、完成まで迷うことがない
    • ゴーストが完成する可能性が上がる
    • 作品に不要なものがはっきりする（スリム化）
    • （結果的に）ゴーストがより早く完成する
    • コアをいかに描写するかの手法を作成前から考えることができる
    • （結果的に）ゴーストがおもしろくなるかもしれない（may）
  • 前準備＝このゴーストの何が面白い？＝頭の中にあるものを明文化する。
    • (1) 作りたいゴーストのイメージが浮かぶ
    • (2) (1)の中で、自分がもっとも惹かれるものが何かについて考えをまとめる
    • (3) (2)に自分がどのように惹きつけられているか、普遍的な感情で表現できるまで考える
    • (4) (2)(3)を明文化し、作品のコアとして定義する
  • 実際にやってみた。ゴースト「電話ちゃん」
    • (1) ユーザと電話でしか会話できないゴーストがいたら面白そう！
    • (2) いや、普通よりユーザができることが減っただかえでつまらないのでは？
    • (3) どうして自分はこのゴーストが面白いと思ったんだろう？
    • (4) どうやら自分は「電話でしうか会話できない」シチュエーションが面白い？
    • 電話でしか会話できないが、本当はユーザと直接会話したいというジレンマが面白い？→「会いたいのに会えない」という寂しさ、焦りなどの感情をコアに！
    • この手法に凝り固まってはいけない。ちょっと横道にそれたり
  • 差別化＝作品の個性を強調し、それを明快に記述することで作品に興味を持ってもらう。
    • いわゆるつかみ。ゴーストの配布ページと初回起動の中で、差別化の工程を完結させる必要ある。
    • (1) 作品のイメージからもっとも個性的な要素を抽出する。
    • (2) (1)の要素を端的に表現する文章などを考え、配布ページに記述する。
    • (3) (2)と並列的に視覚的にわかりやすく作品を表現する（シェルのスクリーンショット）
    • (4) 初回起動時のトークで、(2)の記述を具体的に説明する。（ルール説明）
  • 実例「電話ちゃん」配布ページの例
  • 実例「電話ちゃん」初回起動の例　　　（爆笑）
    • 配布ページでは意味不明なくらいに簡潔に事情を説明→電話をかける理由に興味をひかせる
    • 初回起動で作品世界の中で何が起こっているかを説明→危ないゴーストキャラクターを表現
    • 配布ページで端的にわかりやすくゴーストの個性を表現し、初回起動でそれを補う説明を。
  • 重み付け
    • (1) ゴーストの設定を作る。
    • (2) ユーザがゴーストに感情移入してもらうことを目的としてランダムトークを30個ほど書く。（トークのすべてを覚えることが難しくなるぎりぎりのライン）
  • 何を書けば感情移入できる？
  • 最低限の設定＝前準備や差別的の段階で決定されたことがゴーストの世界で起こっている理由を決めよう
    • 「電話をかけざるを得ない」「直接は会えない」＝「どこかから出られない事情」
    • シェルはファンタジー風だが電話はある。現実世界準拠？
    • →そういう趣味かそういう特殊な力がある？→「魔法の儀式に失敗して、ある部屋に閉じ込められた魔術師」というのはどうだろう？
  • 重み付けの実例
  • ランダムトークの実例
    • 生活の具体的なディテール（ごはんどうしてるの）
    • 作品上の系統だった魔術知識
    • 寂しさや不便な生活などについて、電話ちゃんの愚痴
    • 何かをしゃべる時には、キャラにもそれをしゃべりたいと思った理由がある
    • 言いたくないことについては嘘をつくかも？
    • 逆にキャラにとって知ってて当然のことならトークは断片的になるかもしれない。（ex.まゆらのレゲーネタ） わかる人にだけわかるという切り捨ても大事。断片的なものの方が興味を引くこともある。
  • 描写＝前準備で決めたコアを表現する。
    • できればユーザには十分にゴーストに対して感情移入してからコア描写の部分を見てほしい。
    • 初回起動の次のランダムトークで好きと言われるのと、イベント経過してから好きと言われるのは狙いが違う。
    • (1) 起動時間条件等で制限する→ストーリーの流れを作りやすいが、実際に書くのは大変
    • (2) ごく普通の会話としても不自然ではないトークにコア描写の意味を持たせる→コスト的には楽だが、ユーザが感情乳しないうちに見ることも多く、効果にゆらぎがある。
  • イベント化の例
    • 3回目の起動でイベントが起きる→その後はユーザへの対応が変わる（甘えモードに入る）
  • ランダムトークで表現する例
    • コア部分（魔術師であること、部屋に閉じ込められていること）は喋らないが、トークの裏を読むことでユーザもその部分に触れることができる。（寂しさの感情や内心がトークに滲んでいる）
  • まとめ＝どうすればユーザがコアの魅力となる部分に共感してくれるか考える。


（質疑応答）

  • 配布サイト等で小説を配布して、ゴーストはその従として配布されるのか？→そうではない。
  • 「電話ちゃん」なのに姿が見えてていいのか？→ユーザからは見えているが、電話ちゃんは見えていないと思っている、というトークを入れるといいかも？
  • どこまで設定を決めている？→後付のこともある
  • スリーサイズとかはコアになり得るのか？→そういうゴーストもあるだろう。背の低いことのコンプレックスとか。

（感想）列車の何がすきで何が魅力的かいまだに説明できない私。話を聞いていていろいろ抜けている点を認識してしまいました。しょんぼり（´・ω・）でも道しるべになりそうです。

ないんないん様 『ウカガカ動画\e』

ウカガカを広める手段としての動画について。「伺か」をいかにお外に広めるか。

  • 「伺か」の定義＝デスクトップマスコットの形式をとっているソフトやキャラクター、およびそれに関係するすべての技術、ソフト、その他を指す。
  • 「お外」＝ニコニコ動画のこと
  • ニコニコ動画での伺かの今。伺かタグの再生数、コメント数、マイリスト数
    • 再生数ランク＝1位「任意ラヂヲ第0回」、2位「発目肉」、3位「KAITOとミク」
    • コメ数ランク＝1位「【KAITOとミク】デスクトップでお喋りするよ【セクハラもしてみた】」（CMN追加シェル）、2位＆3位「伺かのゴーストいくつ知ってますか」
    • マイリスト数ランク＝1位「任意ラヂオ第0回」
  • 伺かの知名度が低い訳ではない！
  • その他のゴースト動画
    • 「久遠の闇姫」ノベルゴースト。NikoPedia唯一エントリゴースト。
    • 「コードギアスキャラによる伺か入門動画」
    • 「サトウ　Ｍさんのシェル講座」
  • どんなのがある？
    • ニコニコユーザ的には、デスクトップマスコット＝「伺か？」
    • ゴーストの実演動画が最多。歌を歌わせる、喋らせる etc.
    • 二時創作は多いが、伺か発祥のゴーストを題材にした動画も存在（最萌、ウカガカーニバル etc.）
  • 「伺か」と「動画」の相性について…考えられる動画の種類（仮）
    • ゴーストを実際に動作させる動画（現在の主流、実演）
      • ○作るのが楽。
      • ×向き不向きの傾向が強い。物語系ゴーストは難しい？ ネタバレ
    • 機能系ゴースト向け？落とす前に魅せるPVとして
      • インタフェースで魅せる。見た目キャッチー。
    • 伺か界隈キャラの漫画のような動画（手書きMAD）→最も有望？
      • 知名度が必要？「空とあるゅう先生」「見耳」「イクサイス・ゼロ」「さくら」
  • 動画を介して何をアピールする？
    • ex) colors動画、見た目もコア技術もとてもキャッチー。

（アドリブまとめタイム＆質疑応答）

  • ゴーストマスターの許可を得て動画を作ってみたい。
  • ニコニコ生放送でうかべん生中継？→1枠30分。厳しいかも？
  • 今後も動画の可能性を追求していきたい。

さとー様 『Inside Colors』

  • COLORSとは？
    • COLORS＝きせかえ＋ぬりえ。デスクトップで簡単にキャラクターをデザインでき、さらにデスクトップマスコットにできる。
  • 開発の拝見
    • 「CMNがよりEB（Eternal Beauty、ユーザの理想像）に近くなるようにシェルをユーザに合わせたい」→現状：追加シェル、理想：着せ替えでオンラインで
    • →別ゴースト化。
  • COLORSのGUI
    • シェルにツールバーを実装し、OnMouseHoverでバルーン表示。バルーンにボタンが並ぶ。
    • ユーザビリティを考慮。作業それぞれに特徴的な色をメニューに配置。
    • 色選択インタフェースはWindows 標準GUI以外にも色履歴パレットを作れる
    • さまざまな表情を作成できる。アイテム数によってページング実施。
    • パーツの追加時に多量のファイルを与える必要がある。ツールチップで解説を補足、作成可能になるまで作成リンクを非メニュー化。
    • WindowsのGUIと連携動作して、ゴーストのトークフォルダが表示できる（辞書作成サポート）
    • COLORSインタフェースを隠して通常のゴーストとして使用することも可能
  • COLORSの目標
    • キャラクタの外見・色を自由に変更できる
    • 外見パーツを追加できる
    • 主要な感情を表現できる
    • トークを自由に追加・変更ができる
    • 作ったキャラクターがCOLORSから独立できる
    • ゴーストとして簡潔している
  • シェルの仕事は？（要求仕様）
    • SurfaceID＝10000以上！（現在100000以上）
    • 着せ替えカテゴリごとにSurfaceIDを1000ずらして割り当てる（千の位以上がカテゴリ配分）
      • ex.) インナー2カテゴリ＝37,000〜、インナー2装飾カテゴリ＝38,000〜
    • 着せ替えパーツのSurface IDとAnimation IDを同一にしている
    • シェル切り替えに対応する（実は）
  • ゴーストの仕事は？
    • surfaces.txt、descript.txtを動的変更する
    • シェル画像の色を変更する
    • 画像ファイルをシェルフォルダ内にコピー&リネームする
    • トークをファイルごとに追加できる
    • 着せ替え結果を構成し画像ファイルに出力する
    • （将来）シェル及びゴーストとして出力
  • バルーンの仕事は？
    • 通常のゴースト同様にトークを表示
    • 画像部品を貼り付けたGUIを表示
  • まとめ（画像）
さとー様担当箇所の話。
  • パーツ追加機能
    • ユーザからパーツのSurface IDを得て分類、surfaces.txt等に反映
      • 色替えなし、色替えあり、一部色替えあり、ツートンカラー色替えあり、肌色含む、目、眉…
    • パーツ種類によって挿入すべきテキストが違う
  • surfaces.txtのパーサを作れば？→そんな簡単な話ではなかった
    • コメント文を埋め込み、挿入の目印とした。
    • surfaceXXXXを数字の昇順に並べ、シーケンシャルサーチできるようにした
    • 1回だけアンドゥできるように（今使ってる着せ替えパーツが消えたら大変なので警告）
  • 自動化
    • 複数のパーツ追加を専用スクリプトで一括処理できる機能をつけた（written by かわり）
    • 手動追加の手間が省ける
    • TSV形式のShift_JISテキスト。
    • 作業時間：2時間→15秒
  • 近日中にやること
    • シェルファイルを出力できるように
    • 着せ替え・色設定の状態をセーブする機能
    • 着せ替えとトークを組み合わせ、ゴーストとして出力（華和梨ゴースト倍増計画）
    • GUIをわかりやすし
    • 初期パーツを増量
  • 長期的にやること
    • COLORS Widgetとの連携（デスクトップでもブラウザでも同一ゴーストを！）
    • Silverlight上で動作。
    • エディタ「豊水」のファイルの管理、エントリ管理（変数管理）etc.
    • コミュニティサイトの充実（スナップショットギャラリー（季節）、追加パーツ倉庫、COLORS製シェル・ゴーストを紹介する場 etc.）


（質疑応答）

  • うにゅういないよね？→伺か上で実装しているが必ずしも伺か上に限ったものではない。デスクトップキャラクターを作りたい人向け。拡張は可能。
  • シェルを出力するのがウリのようだが、あえてそれをゴースト上でやる理由は？
    • ゴーストを作りたいと思う人が少なくとも使えるものはゴースト
    • 「キャラクタ何とか機」でもシェル化・ゴースト化の手間が残る→その手間すら省くのが目標
    • ソフトウェア開発では、ツールで手間を省くと開発コストが1/3くらいになる
  • 一部を変更することはできるか？→そういう要望があることを把握した。
  • トークの追加はエディタを使わないとできないのか？→そんなことはない。（トーク追加は30秒ぐらいで出来た）
  • さくらスクリプトは必要か？→現状必要。里々レベルの簡単さを目指したい。

ディスカッション 『大改造！伺的ビフォーアフター Season1』

  • ぽな様「Fineさん何かない？！」
  • Fine様「配布データにghostフォルダ以下入れ忘れた！シェルだけ立った」
  • ぽな様「以上！」


（時間切れにつき終了）


各エントリの感想についてはのちほど。