blog.longfeed

14日のMorioka.as->lab(0x02)で発表したUI小物のソースを晒しておく。

コンセプトとしては、既存のWebアプリに簡単に追加できる画面上のメモ欄。マニュアルに赤ペンで書き込むように、画面の中に書込みできることを狙った。「MEM」ボタンでテキストエリアの文字をcookieに書き込むだけ。といってしまえばそれまでだけれど、間違いやすい操作や忘れやすいことを書いておけるのは便利じゃなかろうか、と思って作った。

零号機なので、現時点ではかなり怪しい（CSSの調整で多少マシになるかも。特にIE以外は調整必須）。試す場合は（いるのか？）自己責任で。

jquery.jsとjquery.cookie.jsに依存しているのでそれぞれ読み込み。で、以下のjsが今回の本体。headに書くなり、外部jsで読み込むなり。

//読み込み
function read_memo() {
  $('#MEMO').val($.cookie('memo1'));
}
//書き込み
function write_memo() {
  $.cookie('memo1', $('#MEMO').val(), { expires: 90 });
  read_memo();
}

//消去
function del_memo() {
  $('#MEMO').val('');
  $.cookie('memo1', null);
}

//ページロード時実行
$(function(){
  //初期データ読み込み
  read_memo();
  
  //onFocus-blurエフェクト
  $('#MEMO')
  .hover(function(){
    $(this).css('border-color', '#edd');
  }, function(){
    $(this).css('border-color', '#fff');  
  })
  .focus(function(){
    $(this).css('border-color', '#ddd');
  })
  .blur(function(){
    $(this).css('border-color', '#fff');
  });
});

//クリック時の動作
$(function(){
  $('#WRITE-MEMO').click(function(){
    write_memo();
  });
});

$(function(){
  $('#DEL-MEMO').click(function(){
    del_memo();
  });
});

メモを表示させたい場所に、htmlを埋め込む。リンクをjavascript:void(0)で書くのは好ましくないけれど、とりあえず。textareaのサイズは適宜調整されたし。

<div class="scribble">
<ul>
<li><a href="javascript:void(0)" id="WRITE-MEMO">MEM</a></li>
<li><a href="javascript:void(0)" id="DEL-MEMO">DEL</a></li>
</ul>
<textarea id="MEMO" cols="60" rows="2"></textarea>
</div>

CSSも、これをベースに調整してもらえれば。

.scribble {
    margin: 1em auto;
    width: 40em;
    overflow: hidden;
}
.scribble ul {
    list-style: none;
}
.scribble ul li {
    float: left;
}
.scribble ul li a {
    color: #e0e0e0;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    text-decoration: none;
    border: solid 1px #eee;
    padding: 2px;
    margin-right: 5px;
}
.scribble ul li a:hover {
    color: #999;
}

#MEMO {
    color: #c00;
    border: solid 1px #fff;
    font-weight: bold;
    overflow: hidden;
    width: 30em;
}

昨日14日、盛岡市産学官連携研究センター（コラボMIU）で開かれたMorioka.as->lab(0x02)に参加してきた。

今回は、大きく分けるとFlash編、JavaScript編、AIR編、PhisicalComputing編、プラスLightning Talk。「デザイナーとデベロッパーの中間の領域」を扱うMoroka.asらしいというか、いい意味でバラバラな発表で面白かった。中間だけど、幅は広いし奥も深い。

以下、個別の話題の感想。はてなユーザ率が異様に高い集団だったので、基本はてなIDで。

id:gonoverdrive

キーノートスピーチとして、Morioka.asの趣旨説明と、これまでの活動についてのお話。「作品を作るキッカケになる勉強会」という方針は、今回の盛況振りをみて大正解じゃないかと思う。実際、前回は発表したものの形のあるものとして出せなかったので、「今回こそ、なんか作って持ってかなきゃ！」って思ったもん。

gonさんからは、「FlashとWebプロモーションの親和性」というテーマで、事例紹介もあった。ライブラリの活用（Tweenerの紹介）や、スクリプトの設定をまとめておくなど、わりあいバタバタした進行になりがちな広告系の案件では、こういうところが大事になってくるんだなあ、と。

id:me_262

「そうだ、タイムラインとかActionScriptとか使ったりしていい感じにアニメーションを作ろうの巻」。Morioka.as周辺で、もっともクリエイター然としている人で、話だけ聞いててもさっぱり役に立たない（笑）。「神は細部に宿る」というか何というか。「Flash上でオーサリングしながら演出とかストーリーを考える」という驚愕の制作過程を聞く。なにかと「技術」が話題になりがちだが、アイデアやイマジネーションを実現する手段でしかないことに気づかされる。

id:shidho

「Webでスタンプラリーやろうぜ！」。自分のはてなブックマークのRSSからキーワードで判定して、関連するサイトをブックマークしていたらスタンプが表示される、というもの。ブラウザの履歴を取得するのはアレなわけだが、それこそ新はてなブックマークのキャンペーンなんかに使ったら面白いんじゃないかと思った。

LTでは、Google Language APIを使って、ブログの記事タイトルから英語のファイル名を自動生成するサービスを。前にも見ていたが、最初の例文から生成されたファイル名がかなりいい感じで感心。

sasahira

自分の発表については、後ほど別記事で。

id:oiyan

「JavaScriptでバリデート&Ajax」が本来のタイトルなのだけれど、「やる夫がAjaxに挑戦し大変だったようです」ということで。JavaScriptの話であると同時にユーザビリティについて考えさせられる話だった。「やっぱり設計重要。超重要。」の中には、ビジネスロジック的要素と、UIデザイン的要素と、実装の要素が絡み合う。それぞれの専門家が協働できればよいけれど、なかなかそうもいかないんだよなあ。あ、Ajaxセキュリティの表紙は「これはコラ（ージュ）だろ？」だと思いました！

id:stdic

「AIR入門以前編」。AIRにはノータッチだったので、手をつけるための方法を紹介してもらってありがたかった。プレゼンテーションスライド自体がAIRアプリで、スムーズスクロールとかかっこよかったし、AptanaとかEclipseでの作業を見せてもらったり。本人は謙遜していたものの、見てるほうとしてはすげー感があった。

id:yuichi_katahira

「AIR入門以前編を受けて」ということで、ローカルファイル（SQLite）へのアクセス、httpでの通信、Red5（オープンソースのFlashストリーミングサーバ）＋Ruby on Rails＋AIRの組み合わせでUSTREAM風ストリーミング＋チャットを。AIRの可能性を垣間見ることができてよかった。それに、参加していた美術科の学生さん達に、デザインじゃないWebの世界（と、Macの使い方）を見てもらえてよかったんじゃないかと思う。

suzuryo

GAINERを使って、100Vの電気機器のON/OFFやパラメトリックスピーカーを接続して合成音声を読み上げさせたり。LTでは、GAINERのスイッチでTwitterに投稿してみたり。完全に新しいおもちゃを手に入れて大喜び状態なわけだが、この楽しさが作品作りの原点だよなあ。「ソリッドステート・リレー」をおすすめするなら、ちゃんとメリットを教えて下さいよー（無接点リレーだったのか）。

id:happy_ryo

LT3本立て（関係ないが「SF映画2本立て（Science Fiction/Double Feature）」は名曲）。勉強会の楽しさと、自重はダークサイドの話と、おなじみNetBeansの紹介。殆どの参加者は勉強会に積極的に参加して、何度も発表している人たちなわけで、主に学生さんに向けてのメッセージということになるだろう。Morioka.asとIWDDのメンバーは、デザイナーでもエンジニアの人たちの話題がある程度通じるけれど、学生さんたちにうまく伝わってくれているといいなあ。

全体を振り返って

内心では、Morioka.as->lab(0x02)は大成功だったんじゃないかと思っている。開催時間の問題とかは、次に別の方法を試してみればいいわけで（後で気づいたけれど、gonさんが主催と進行と発表を兼ねるんじゃなくて、分担すればよかった）。「内心」としたのは、次回以降で発表してくれる人が増えたら、ほんとに成功という意味で。やたらと楽しそうな発表者たちを見たら、たぶんそうなってくれるんじゃないかな。

IWDDミーティング#28に、久しぶりに参加してきた。今回は「サーバー特集」。

自社サーバーの『あるある』

ぉぃゃｎさんによる「やる夫が自社サーバーを構築するようです」。社内ニートのやる夫、NE出身の社長（だったかな？）がやらない夫、という設定が絶妙で大笑いさせてもらった。

といっても、中味はとても勉強になる話で、回線の選び方、機器構成、セキュリティ、電源や配線周りなどなど。特に「○○（メーカー）の○○（製品）で○○○（トラブルの内容）を○回経験している」といった話は、なかなか聞けるものではないです。

レンタルサーバの『あるある』

HIDさんの進行で、事前のアンケートをもとに『あるある』じゃなくて「鯖のから騒ぎ」。トピックに合わせて、参加者が経験談を話していく形式で、これも面白かった。

1990年代半ばの懐かしい（今となっては恥ずかしい）話から、これからの話まで。同じトピックでも、人によって切り口はさまざま。参加者の得意分野がバラけている、IWDDのいいところじゃないかと思う。

.htaccess

すずりょさんによる.htaccessというかApacheの解説。…なぜかMac上のVMWareにCentOSをインストールするところから始まった。そして、時間内にApacheのインストールが終わらないという（笑）。VMを使ったテスト環境作りは、1コマ取って、あるいはワークショップ形式で取り上げても面白いと思った。

メインはhttpd.confの設定項目の解説。Webデザイナーレベルでは、直接httpd.confを編集しないにせよ、概要は把握しておきたいところ。Apache2.2のmod_proxyを協力にプッシュしていたけれど、自分の場合は使う機会がないかなあ。

IT系の勉強会でよくいわれる「飲み会重要」という言葉には、個人的にちょっとした反発心もあって。お酒の会が苦手な人もいるし、遅い時間だと都合が合わない人もいる。「重要」な部分のうち、本編に組み入れることができるところもあるんじゃないか。今回のミーティングでは、それがちょっとできていたような気がした。小規模なコミュニティで、お互いの信頼関係がある程度構築されていることも、理由のひとつではあるとは思うけれど。

きょう行われたIWDDミーティング#24について、感想など。

Railsと赤魔導士のすすめ

片平裕市さん from Rails勉強会＠東北。前半はRuby on Railsの概要説明と、簡単なアプリケーション作成のデモ。噛み砕いて説明していただいたので、何が起きているかはなんとなく理解した（つもり）。まとめとしてRailsのよいところ、ダメなところを何点かあげていたけれど、「エンタープライズとWeb制作の間」に向いている、という話が印象に残った。

後半は「とある赤魔導士の苦悩 - the cycles of activity」からインスパイアされたお話。スキルの「組み合わせでオンリーワン」を目指す、それも一人じゃなくて別の人と組んで実現すればいい、と。そのためのコミュニティであり情報発信が大事、というお話だったかと思う。Rails勉強会＠東北、東北デベロッパーズコミュニティ、今回はIWDDと、積極的に行動する片平さんの言葉は説得力がある。

# 「東北Webサミット」というイベントがあるらしいけど、
# 片平さんみたいな人たちが集まるのが「サミット」なんじゃないかなあ。

ライカか、それ以外か / さよならライカ

猫ポン太さんの、かなり変わったライカ自慢（笑）。ライカを撮るためにライカとレンズを買う話は最高だった。惜しげもなく触らせてくれて、空シャッターもガンガン切らせてくれて感謝しております。癒された。

すずりょ氏は、カメラ・オブスクーラの話からRAWデータの現像デモまで。彼の作品だという8×10のポートレートが美しかった。癒された。

Railsとライカ。IT系の勉強会としては珍しい組み合わせで、本当に面白かった。ただ、スタートが遅れたり、予定していた話題が一つなくなったりと、フリーというよりグダグダな面も。次回で2周年を迎えることだし、運営方法について再考が必要な時期なのかもしれないと思った。

6月14日に開催されたIWDDミーティング#23の参加報告。

Visual Web Developer 2008 Express EditionでJavaScriptのデバッグをしてみる

中島浩司さんによる、Visual Web Developer 2008 Express EditionをHTML+CSS+JavaScriptオーサリングツールとして使ってみよう、というお話。HTMLはDreameweaverか秀丸、CSSはTopStyle Liteで今のところ乗り換えの必要性は感じていないけれど、デザインビューのレンダリングエンジンがMS製ってのは、よく考えるとすごいかもしれない。JavaScriptで、変数の型を見てメソッドを補完するところにも感心。これで無償配布だからなあ。とりあえずインストールしてみたので、後でいじってみる。

オープンUI設計をしてみる

WDHA（Web Designers & Developers Hub Aomori）から神修司さんと古川勝也さん。神さんの発表は、視線移動の観点から見たデータ表示方法のパターン研究といったらいいだろうか。UIの設計で、視線移動が重要な一部分であることは間違いないと思うので、勉強になった。が、超ハードな内容に対して例示画像があまりにも面白すぎです！

古川さんは、制作中のバブルマップを用いたToDo管理ツールについてプレゼンテーション。UIの面白さもさることながら、ToDo管理についてのディスカッションが白熱。皆さんのタスク管理の方法や体験談を聞いて、参考になったり胸が痛くなったり。ちなみに、古川さんのブログ CalmTech -Mind Dump- おすすめです。

サイトリニューアルのワークショップ

自分がファシリテータを担当。IWDD公式サイトのリニューアルに向け、アイデアを出し合って、KJ法（参照：KJ法 - Wikipedia）を使ってまとめ、トップページの簡易なワイヤーフレームを作る、という流れ。ペーパープロトタイピング用の道具も準備していったのだけれど、ホワイトボード上でワイヤーフレームを作成してもらった。私から見た感じでは、実際に使えるアイデアがたくさん出ていたように思った。仕様書が上から降りてきて自分のパートだけこなすのではなく、初期段階からデザイナーもエンジニアも一緒にディスカッションしながら形を考えていく。そういう制作スタイルの体験としてやってみたのだが、どうだったろう？

今回はRails勉強会＠東北の皆さんが地震の影響で参加できなかったのが残念。次の機会にはぜひ。自分でRailsを動かしてから話を聞けるようにしておこうと思う。

DESIGN IT! w/LOVEの棚橋弘季さんによる「ペルソナ作って、それからどうするの? ユーザー中心デザインで作るWebサイト」を読み終えたので、感想。

とにかく情報量が膨大で、ひとつひとつ理解しながら読むのは早々にあきらめた。頻繁に挿入される引用部の、原典が持っている情報まで含めると大変なことになる（そのへんはブログで補間されている）。

というわけで流し読み的になってしまったのだけれど、「ユーザー中心デザイン」の解説書であると同時に、棚橋さんの経験からくるパーソナルな本でもあると思った。で、この本をテキストにしてそのままやってみるといった本でもない（だいたい、そのままやれる制作現場は、すでにかなりの基礎体力があるはず）。自分にとっては、今すぐ役に立つ部分もあるけれど、どちらかというとこの先の自分に役に立ってくれるといいな、という本。多分、これから何度も読み返すことになるだろう。

この本を読んだ人は、おそらく「デザイン」（あるいはWebデザイン）という言葉を再定義することになる。そして、自分の仕事を「デザイン」し直すところがスタートなんだと思う。

DESIGN IT! w/LOVEの棚橋弘季さんの本「ペルソナ作って、それからどうするの? ユーザー中心デザインで作るWebサイト」。ご本人は どうやら分類分けがむずかしい本を書いてしまった と書いていたけれど、「Webサイト設計のためのペルソナ手法の教科書」と「ハイパフォーマンスWebサイト」の間に並んでいた。やるな、ジュンク堂盛岡店。

いま第1章まで読み終わったところ。感想は最後まで読んでからあらためて書くが、おそらく多くのWebデザイナーから反発を受けるか、あるいは無視されるんじゃないかと思った。逆に非Webデザイナーから歓迎されるんじゃないだろうか。「Webデザイン」の本として、それくらいおもしろい。

5月30日、Morioka.as->lab(0x01)に参加したので報告。

JavaScript入門してみ(ようとし)た[0]

自分の発表。JavaScriptの勉強を始めようと、ネットであれこれ入門記事を漁ってみたときの感想などを話した。自分としては、書籍で概略をつかんでから、やりたいことを（ネットで補強しつつ）何か作るのが合っているようだ。

誰も触れない、NetBeansのJavaScript対応（予告）

happy_ryoさん。「JavaScriptも書ける」と無理やり話をつなげて、ひたすらNetBeansについて熱く語る会。次はaptanaやFirebugと比較してくれると嬉しいかも、と思った。関係ないけど、Happy Hacking Keyboardを持ち歩いてるのに感動した（笑）。

ActionScript3でRSSを読むために

shidhoさん。指定したフィードを読み込んで、黒板を模した外観に手書き風フォントで表示。AS3だけでなくXMLやサーバサイドスクリプト、フォントの扱いなど、総合格闘技だな、これ。でも、今おもしろいものを作ろうとすることは、こういうことなんだろうなあ。

CS3とAS3でつくるMP3 player

gonoverdriveさん。2つのMP3ファイルを組み合わせて新しい音をマッシュアップして遊ぶウェブサービス「Duopodder」の経過報告。制作中なればこその、ソース中の大量のコメントにぐっときた。最終的には2台ならべてDJっぽく遊べるそうだけど、同時にいっぱい開いてHIFANAみたいなことやれたら面白いなー、と妄想した。

GAINER + 雨降り警報機 = ○はち外出センサー
Flash + H264 +ハイビジョン

suzuryoさんのお題は2つ。水を感知するセンサーをGAINERに繋いで、FLASHを動かすということらしいのだが…人が話をしてるときにハンダ付けしてんじゃねえよ！人の事務所の電気ムダに使いやがって！いまセンサー濡らすためにhappy_ryoさんのお茶に指つっこんだ！しかもGAINER不調で動かないとか何しに来たんだよ！…ハンダごての電気代分だけDisらせていただきました。こんなにグダグダだったのに、本人はやたらと楽しそうだったのが羨ましくもある。H264の方は、ぜんぜん気にしてなかったんだけど、これからは当たり前になっていくんだろうな、と思った。

基本的に「自分が作ったものを発表する会」なので、面白かったし刺激を受けた。今回はスクリプトを出せなかったので、次回は何かを。UIの小物系スクリプトが自分のテーマになりそう。

p.s. 終了間際に合流したnorikoさん、お土産ありがとうございました！

とても後悔している。

Perl-users.jp - 日本のPerlユーザのためのハブサイトから始まった*-users.jp祭り。様々な言語やツールなどのハブサイトがどんどん立ち上がっている（参照：*-users.jp - おちゃめクールの周回遅れブログ）。

とにかく動き出すことを最優先したのだろうから、サイトの作り込みはこれから進んでいくんだろう。Perl-users.jpやAS-users.jpのように、デザインされたロゴができたところもあるけれど、今のところは素の(X)HTMLだけのサイトが多い。

それで、だ。

vim-users.jp - 日本の Vim ユーザのためのハブサイト

誰か CSS とか ロゴとかレイアウトとかお願いします

emacs-users.jp - 日本の Emacs ユーザのためのハブサイト

誰か CSS とか ロゴとかレイアウトとか頼むｗ

Webデザイナーの出番なわけです。日ごろ恩恵を受けてばっかのOSS（や他の）コミュニティに貢献するチャンスなわけですよ。

で、冒頭で書いた「後悔」というのは、こういうときに役立つはずのwd-wd.orgを、ほぼ放置状態にしてしまっていたこと。Django0.97が正式リリースされたら手を入れていこうなんて考えてた私がバカでした。

ということで、すでに担当者が決まって作業中のところ以外は、vim-users.jpやemacs-users.jpのように、デザインを募集していることを明言するといいと思います。うちのサイト（wd-wd.org）見てる人は少ないと思うんで。

Python-users.jpでデザイナー募集してたら手を上げてみようと思ってたんだけどな。日本Pythonユーザ会（PyJUG）のサイトがしっかりしてるから、こっちはあまり力を入れないのかな。vimにはたまにお世話になるといっても、つい矢印キーでカーソル移動する人間なので、ちょっと恐縮してしまう（emacs系は30分も経たずに投げ出した）。いずれにせよ、コミットするなら自分が普段使ってたり興味があったりするところへ、と思う。

# デザイナー募集の情報が流れてきたとしても、
# そこにモチベーションがわくかどうか。
# そういう意味で、wd-wd.orgのコンセプトは再考の余地ありか。

「例え話」って、理解しやすくなったり別の視点から見ることができたりする（時に新たな誤解の原因になることもあるけれど）。gonoverdriveさんの、Web制作を音楽に例えた話。

譜面と聴音とコラボレーションとか、多分音楽から学んだ事についてWeb制作にも適用出来る気がしたので書いてみる - GP通信annex

Web制作とジャムセッション

Web制作の現場にある例えばワイヤーフレーム的なものは、要するに譜面みたいなものなのだとおもう。で、これって色んな役回りの人たちと協業する場合は必要なものなんだとおもうんだけど、どうなんだろ？思いとか、ゴール（=アウトプットするプロダクション）のイメージを共有できればそういったロジカルな設計図などなくてもきっとうまくいくはず。そんな気がする。

「アウトプットするプロダクション」は、音楽の方だとレコーディングされた楽曲ということになるか。その制作過程で、スタジオに入ってセッションしながら曲を仕上げていくなんてことは、音楽の世界では当たり前に行われているわけで。アジャイルとかなんとか、特別な言葉を持ち出さなくても。あるパートのミュージシャンによる演奏に触発されて、別のパートの演奏もどんどん変わっていき、ゴールに近づいていく世界。

で、レコードなりCDなり（配信なり）の形で世に出た後に、ライブでその曲が演奏される場合。観客の反応でさらに形が変わっていく。CD出たときにはいまいちっぽかった曲が、ツアーが終わるときにはすごい名曲に生まれ変わってたり。

「ライブをやるためにCDを作る」的な発言をするミュージシャンも少なくない（パッと思いついたのが氣志團っつーのがアレですが）。Web制作ってこれに近いんじゃないかなあ。公開して閲覧者に見てもらってからが本番みたいな。

COULDの長谷川恭久さんと、F's GarageのF-shinさんとの対談（PodCast:Inflame Casting: IC #125 May 22 2008）でも、そのあたりが重要なテーマの一つとして取り上げられていた。約1時間のボリュームですが、Web業界関係者は聴くべき。