4月29日に金沢で開催されたUX Kanazawa vol.2 に参加してきました。
今回は浅野 智先生を講師に迎えての講義とワークショップの構成ということで、とても楽しみでした。

最初の講義はUXやHCD（人間中心設計）についてのお話からスタート。
HCDプロセス計画についての図は見たことはあったのですが、それについての説明は初めて聴けたので勉強になりました。今回は時間の都合で細かいHCDの話は聴けなかったのが残念でしたので、ぜひ機会があれば聴いてみたいと思います。

講義の後はワークショップタイム。
「ゼリー」を題材としたオブザベーション（観察）のワークショップです。ゼリーを使うワークショップっていったいどんなことするのかあまり想像できなかったので、大変興味深かったです。

人はゼリーを食べるときにどのような行動をおこすのか。それを何人かでチームを組んで、食べる人（食べながらその時感じたことを発声する）、食べている様子を観察する人でわかれて観察を始めました。この時に、なるべく細かく行動を分けることが大事で、そうすることによって後で行う問題点の抽出を効果的に行うことができます。食べているときに何が起こったか、どういうことを思ったか、なぜそのようなことをしたのか？など、そういったところに問題解決のヒントがあるので、細かく観察し、アクションを見逃さないこととが重要だなと感じました。

そのあとは観察した結果をもとに、問題点を抽出し、問題を解決するようなゼリーのパッケージをチーム内で考え、ペルソナをつくり、その新しいパッケージを使うストーリーを表す4コママンガを作って、各チームごとに発表を行いました。

発表はとても緊張感あるものでしたね。
けっこう考え方やパッケージのアイデアがかぶったチームが多くて、僕たちのチームもかぶってしまったので、どうやってプレゼンしようかなとしばらく悩んで、考えた結果のプレゼンがあれですw いろんな意味でちょっとしたチャレンジでしたw 本質的なことをもっとうまいタイミングで言わないとダメですね。

講義でもワークショップでも思考の刺激になり、考えが浮かんできましたのでとてもいい経験だったと思います。また浅野先生の講義やワークショップを受けられる機会があればぜひ参加してみたいと思います。

懇親会では金沢の方たちと、今日やったこととか仕事のこととかプレゼンのこととかをいろいろ話しました。やっぱり懇親会で話せる深い話っていいですね。おもしろかったです。

という感じのUX Kanazawa Vol.2 でした。
いい体験でした。今後も継続的にされるということですので、また参加したいと思います。
主催のいちがみさん、お疲れ様でしたー。

5月12日にカウベル・コーポレーションさんの場所をお借りしてコワーキングイベントminamo jelly vol.4 を行います。

minamo jelly とはコワーキングのイベントです。
コワーキングとは、

作業スペースや打ち合わせ場所などを共有しつつ、各々が独立した仕事を行うワークスタイルです。企業のオフィスと違い、コワーキングで働く人たちは同一の法人・団体に所属していないこと、また、価値観を共有する参加者同士で「才能・技術・知識などの共有」が図れる特徴をもっています。

過去のminamo jelly の様子はこんな感じです。

今回はプレゼンテーションの勉強会も同時開催します。内容はまだ未定ですけど、いろんな人のプレゼンについての考えや効果的なテクニックを学ぶいい機会だと思います。なにか実際にプレゼンしてみて評価してもらうのもいいかもですね。興味のある人はぜひご参加ください。

参加申し込みはfacebook で行なっていますけど、facebook アカウントをお持ちで無い方も、もちろん参加可能です。お気軽にお越しください。

→お申し込み（facebook）

minamo jelly vol.4

日時：5月12日（土）
場所：カウベル・コーポレーション

タイムスケジュール
時間内は出入り自由、途中からの参加も可能です。

-10:30～
Jellyスタート！
参加者の集まり状況を見て自己紹介＆やることシェア

-10:40～
ワーキングタイム（もくもく）
各自が、自身の仕事を自由に行なう

-12:00～
ごはんタイム（もぐもぐ）
ランチタイム。買い出しに行くか、なにか食べに行きましょう。

-13:00～
プレゼン勉強会スタート
※詳細は決まり次第お知らせします。
なにかプレゼンについてプレゼンしたい人募集中です！

-18:30
撤収！

参加費：500円

jig.jpさん主催ハッカソンの「エイプリルフール開発合宿」に参加してきました。
早くも今年2回目のハッカソンです。やっぱり超楽しかった。

会場となったのは福井県三国にある「ハウス アム メーア」さんです。
jig.jpさんがよく合宿で使用されてるそうなんですが、内装も外装もステキな雰囲気だし、音響も良かったので、いい感じで開発を楽しめました。料理、とても美味しかったです（=人=）

ランチ！

朝食！

今回のハッカソンは「リアルとITの融合」と「エイプリルフール」というテーマでサービスを作りました。
せっかくエイプリルフールだし、洒落っ気のある面白いもの作りたいなーと思って、アイデアを出しあいました。

アイデアソン！

アイデア出しの結果、作ろうとしたのは「リアル恋愛ゲームアプリ」です。
どういったものかというと、
「アプリとfacebookと連携して、facebookで友だちになってる異性を選んで、いろんなシーンにおいてのアプローチを伝えて、異性を攻略する」というものです。
エイプリールフールだからこそ許される（？）ものかなと思いますw

作るものが決まったら開発スタート。
当日の0:00までに開発終わって、エイプリールフールに公開するという目標に向かって作業に集中しました。

ガチ開発スタート！

僕はデザインを担当したので、まずはアプリの元となるモックをTwitter Bootstrap使って用意するところからはじめます。
その間に他のチームメイトはモックが来たらすぐ作業に取り掛かれるように準備を進めてくれました。
京大生の宮本さんはfacebookとの連携部分を、石川高専生の喜多さんはサーバーサイドのことを、同じく石川高専生の寺本さんはシナリオやプレゼンの用意をしてくれたり。
メンターとして参加してくれたjig.jpの宮前さんもアドバイスくれたりご飯運んでくれたりと、ナイスサポートありがとうございましたm(_ _ )m

モックを渡した後も、タイムリミットまでそれぞれの作業をもくもくと進めます。
僕はインターフェイスデザインしてコーディングしたり、プログラム組み終わったものに対してデザインあてたりしてました。
作業してる中でも、発生する問題に対してディスカッションして、即座に軌道修正して作業するという超スピード感溢れる開発状況でメチャクチャ楽しかったです。こういうのがハッカソンの楽しみのひとつなんだろうなと実感しました。

開発も後半になると「ｳｺﾞｲﾀｧｧｧｧｧｧ」とか「ﾔﾍﾞｪ….ﾔﾍﾞｪ….」とか聴こえて来るなど、なかなかカオスな状況になってきましたw
僕は後半1時間くらいには体力的に心折れてたのでPhotoshopは閉じて、CSSの調整に注力してましたw

というわけで0:00を迎え、開発時間は終了。プレゼンタイムに移ります。
各チーム、この短時間内でかなりクオリティ高いアプリを作ってきたのでびっくりしました。さすがです。

というわけで、結果発表。
残念ながら僕らのチームは優勝できませんでしたけど、まぁ楽しかったから良しとします（ポジティブ）

今回のチーム！ [photo by Taisuke Fukuno]

ハッカソン終了後はおつかれさまでしたパーティー！
またまたおいしい料理登場でみんなで盛り上がりました！いろいろと話しできたので楽しかったです。
それにしてもきたけーェ…
後半眠気もあって、あまり覚えてないのですが多分寝たのは4時くらい。次の日も早いのにw

という感じの開発合宿でした。
アイデア出しまくっていい感じに頭つかったし、好きなデザインできたし、お互いいい感じで刺激与え合えたと思うし、おいしい料理も食べられたし、総じて大満足なイベントでした。

参加者全員で！[photo by Taisuke Fukuno]

イベントのきっかけになった喜多さん、企画・運営してくれたjig.jpさんありがとうございましたー。
とても楽しかったです。また誘ってください！

いつか使うための準備。

JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
floatBox("#fixedArea", 1);
	function floatBox(ele, flag) {
		var box = $(ele);
		var fixed_box_offset = box.offset();
		var box_size = {"width": box.width(), "height":  box.height()};
		var footer_box_offset = $("#footer").offset();
		$(window).scroll(function() {
			var scroll_val = $(this).scrollTop();
			if(scroll_val > fixed_box_offset.top) {
				if(box.css("top") != 0) {
					box.css({
						"position": "fixed",
						"z-index": 999,
						"width": box_size.width,
						"height": box_size.height,
						"top": 0,
						"bottom": "auto"
					});
				}
				if(flag == 1) {
					if(scroll_val > (footer_box_offset.top - box_size.height)) {
						if(box.css("bottom") != 0) {
							box.css({
								"position": "absolute",
								"z-index": 999,
								"width": box_size.width,
								"height": box_size.height,
								"top": "auto",
								"bottom": 0
							});
						}
					}
				}
			} else {
				box.removeAttr("style");
			}
		});
	}
});
</script>

CSS

<style type="text/css">
#wrap{
	position: relative;
	width:900px;
	margin:0 auto;
}

#header{
	height:200px;
	margin-bottom:10px;
	padding:20px;
	background:#eee;
}

#container{
	margin-bottom:0px;
}

#main{
	float:left;
	width:660px;
	min-height:400px;
	padding:20px;
	background:#eee;
}

#side{
	position: relative;
	float:right;
	width:180px;
	min-height:440px;
	background:#eee;
}

#fixedArea{
	height:100px;
	background:#00bfff;
}

#fixedArea div{
	padding:20px;
	color:#fff;
}

#footer{
	padding-top:10px;
}

#footer div{
	height:600px;
	padding:20px;
	background:#eee;
}

.clearfix{
    overflow: hidden;
    *zoom: 1;
}
</style>

HTML

<div id="wrap">
	<div id="header">header</div>
	<div id="container" class="clearfix">
		<div id="main">main</div>
		<div id="side">
	  	<div id="fixedArea">
      	<div>side</div>
      </div>
	  </div>
	</div>
	<div id="footer">
  	<div>footer</div>
  </div>
</div>

via.jQuery – メニューをスクロールに付随させてみる

ちょっと自分が使いやすいように調整。

jQuery MobileのUIでATNDのイベントを何かキーワードを入れて検索するというものです。

ATND Search for Mobile

デザイン何もしてないので、パッと見ても何かまったくわからないものに仕上がっております。
せめてものごまかしでGoogle Web Fontを使ってます。

index.php（キーワード入力画面）

<div data-role="page" id="index" class="index" data-theme="d">
 <div data-role="header">
  <h1>ATND search for Mobile</h1>
 </div>
 <div data-role="content">
  <form action="mobile.php" method="get">
   <p id="keyword"><label for="basic">keyword:</label></p>
   <div id="searchArea">
    <input type="text" name="keyword" id="basic" data-mini="true" />
    <button type="submit" data-theme="a">Search</button>
   </div>
  </form>
 </div>
</div>

mobile.php（検索結果表示画面）

<?php
  $keyword = $_GET["keyword"];
  echo "キーワード：　".$keyword."<br />";
?>

<?php
$atndurl = "http://api.atnd.org/events/?keyword_or=$keyword&format=atom";
$atndrss = simplexml_load_file($atndurl);
?>

<div data-role="page" id="index" class="index" data-theme="d">
 <div data-role="header">
  <h1>ATND search for Mobile</h1>
  <a href="#" data-rel="back" data-inline="true" data-role="button" data-direction="reverse">back</a>
 </div>
 <div data-role="content">
   <ul id="nav" data-role="listview">
   	<?php foreach($atndrss->entry as $entry){
		echo "<li><a href='" . $entry->link->attributes()->href ."' target='_blank'>" . $entry->title . "</a></li>";
	}
	?>
   </ul>
 </div>
</div>

こんな感じです。
simpleXML関数使って、XML扱ってます。便利ですね。
jQueryMobile使うにはhead要素内にそれ用のCSSとJavaScript読み込ませてあげてください。

ファイルはこちら
https://github.com/shirokuro331/ATND-Search-for-Mobile

とりあえずババっと作った状態なので、機能的にもかなりしょぼい状態ですし、UI含めてもっとブラッシュアップしていきたいです。とりあえずは自分用にWeb API使ってなにか作るための練習って感じでございます。
他のAPIとかとも絡めていきたいなぁ。

4月7日に福井のWeb制作者向けコミュニティ WCAF の勉強会イベントWCAF vol.8 を開催します。

最初、定員数を25人にしてたのですが、定員いっぱいになった後もちょこちょこお問い合わせいただいていたので会場を変えて定員枠を拡大しました。
なのでみなさん来てくださいw

今回は「デザイナー視点のプログラミング入門」「デザイナーによるフォントについての話」「Webサイトパフォーマンス向上について」のメインセッション3つと、「Webクリエーターと電子書籍について」「Windows Phoneについて」とあとひとつ何かのライトニングトーク3つという構成になっています。

自分でイベント開いといて言うのもなんですが、どのセッションもWeb制作に携わる人として興味深いテーマだと思いますので、かなり充実したイベントになるんじゃないかと思ってます。

今回のスピーカーの方はみなさん北陸の方です。同じ地域で働いている人の話が聴けるので、もしかしたら自分の中に落とし込みやすいかもしれませんね。

来週の土曜日ですが、ご都合よろしい方はぜひご参加ください。
イベントの詳細は下記リンクからどうぞ。

WCAF VOL.8

最初何も表示されてないけど、ちょっと待ったらふわっとコンテンツが順番にfadeで表示されるやつをしたかったの巻。

まずhead要素内にjQueryを読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" charset="utf-8"></script>

次にhead要素内でも外部ファイルでもいいので、下記を読み込みます。

$(window).load(function() {
  $("#container .left, #container .right").hide();
    $("#container .left").delay(300).fadeTo('slow',1,function(){
  	$("#container .right").delay(100).fadeTo('slow',1);
    })
});

HTMLは下記のような感じ。CSSは省略。

<div id="header">
    <p>header</p>
</div>
<div id="container">
    <div class="left">
	    <p>content A</p>
    </div>
    <div class="right">
	    <p>content B</p>
    </div>
</div>

「content A」というテキストが表示された後、「content B」というテキストが表示されます。あらやだ簡単！

時間差でコンテンツを表示 – jsdo.it – share JavaScript, HTML5 and CSS

先日、HTML5 & JavaScript Hackathon 2012 in Fukuiというハッカソンを行ったわけですが、開催するにあたっていろいろとやりとりとか準備しましたので、今後のハッカソンのための忘備録としてブログ書きます。

そもそも今回の開催の経緯

前々から@shoito さんと「またそろそろハッカソンの季節ですねー、したいっすねー。」みたいなことを話してたわけなんですが、1月の半ばくらいにtwitterでも「ハッカソンしたい((└(:3」┌)┘))」と書いたところ@mirutover さんと@rch850 さんも反応してくれたので、そのまま「もう日程決めてやっちゃいましょう！」というノリでやることにしました。
ノリって大事！( ｰ`дｰ´)

運営メンバーとのやりとり

前述の3人と僕を含めた4人で、facebookのグループ作ってそこで日程とか役割分担とか準備物とか、いろいろ決めなくちゃいけないことを相談していきました。
決めなくちゃいけないことを投稿していって、それについてメンバーと相談できたのでfacebookグループはかなり便利だなと実感しました。

イベント当日までに決めなくちゃいけないこと

ざざっと書くと、

ハッカソンのテーマ

ここで言うテーマとはGoogle App EngineやGoogle Chrome拡張などの技術とかのことです。そのテーマについてのアプリやサービスを開発していくことになります。
テーマに興味のある人が参加してくれるので、テーマによって参加人数に大きく影響すると思います。
今回はデザイナーさんにもたくさん参加してもらいたかったので、テーマを「HTML5 & JavaScript」としました。

会場

参加者全員が入れて、チームに分かれて開発できるくらいの広さがあるといいですね。
毎回株式会社jig.jpさんに協力していただいて、じゅうぶんなスペースを確保した会場をご提供いただいております。本当にありがとうございますm(_ _ )m

設備について

下記のものを用意。

・Wi-Fi環境
Web系ハッカソンなので必須です。参加人数をカバーできるくらいのやつが理想。

・プロジェクター
ハッカソンで出来上がったものを発表してもらうために必要です。

・電源タップ
参加者全員をフォローできるだけのコンセントがあると理想です。

これらもjig.jpさんにご協力いただきましたm(_ _ )mm(_ _ )mm(_ _ )m

イベントスケジュール

どのようなスケジュールでイベントを進行していくかを決めます。
今回やったのは、下記のようなスケジュールです。

Ideathon （2月25日）

09:00 会場設営
　・机並べたり、Wi-Fi進行をホワイトボードに書いたり
09:30 開場・受付開始
　・用意しておいた名簿で、参加受付します
10:00 開始
　・イベント概要説明
　・共同編集に使えるツール/サービスの紹介、デモ
　・チーム分け
10:30 Ideathon
　・グループに分かれて、作りたいアプリケーション/サービスのアイデアを出し合います。
12:30 発表
　・グループ毎にアイデアを発表して頂きます。
13:00 終了
　・引き続き話しあうチームもいます

Hackathon （3月4日）

09:00 会場設営
　・机並べたり、進行をホワイトボードに書いたり
09:30 開場・受付開始
10:00 開始
　・Ideathonで決めたグループ毎に、自由に開発します。
17:00 発表
　・開発したものを発表して頂きます。
18:00 終了
18:30〜 懇親会

テーマによってはチーム分けの前にテーマについての勉強会とかあると、テーマについての知識が乏しくても安心して参加できますね。

アイデアのカテゴリーを考えておく

参加者同士でチームを組んでもらいますので、自分が作ろうと考えてきたアプリ/サービスを、イメージに近いカテゴリごとに分かれてもらいます。
今回は「social」「mobile」「media(video,music)」「clip,curation」「food」「other」とい6つのカテゴリに分かれてもらいました。

そのほか用意する小物たち

・紙
アイデアをまとめたり、発表するときに使います。今回はA1サイズを各チーム分用意

・マッキー（ペン）
参加者には筆記用具を持ってきてもらいましたが、発表するときとかに字を目立たせたいときとかに使えます。

・ネームプレート
初対面の人とチーム組むこともあると思いますので、自分の名前がわかるように名刺を入れられるネームプレート的なものがあると良いです。

懇親会の場所

せっかく貴重な休みの日を使って長い時間を共にして開発したわけなので、やっぱり打ち上げしたいじゃないですかw
「ハッカソンおつかれー！」って言いながら食べる焼き鳥は最高です＞＜
今回なんと懇親会参加率100%という偉業を達成しましたw

参加申し込みの受付方法

気軽に申し込みしてもらいたいと考え、今回はATNDを使いました。
他にもこくちーずやGoogle DocsのフォームなどでもOKです。

気楽に申し込みしていただいたのは良かったのですが、参加者の方へリマインダーメール送るときとか、各自つくりたいサービスのアイデアを考えといてもらうということが周知出来なかったことが反省点です。そこらへんをしっかりとATNDページにも記載しておくべきでした。

イベントの告知

基本的にtwitterとfacebookで告知していきました。あとはブログ書いたり。
RTやシェアしていただいて、情報拡散にご協力いただいた皆様ありがとうございました m(_ _ )m

お問い合わせについて

告知にSNS使ったので、そこから質問とかは受け付けてました。
SNSでつながってない人でも問い合わせできるように、告知ページなどにメールアドレスを記載しておくと良いですね。

当日お知らせしたこと

写真撮影して、ネットで公開しても問題ないかの確認
イベント中写真撮影とかもすると思いますが、写真をネットとかに公開するのはNGという人もいますので、参加者全員にそこらへんの確認はとっておいたほうが良いです。

チーム内でのドキュメントやファイルの共有について
2週に分けてイベント行いますので、その間にもいろいろと仕様についての話し合いとかファイルのやり取りが発生します。そのためのツールとしてGoogle Docsのデモを@rch850さんにしてもらいました。
GoogleDocsにサービスのアイデアや役割分担などを書いたりして情報共有に使えます。

ノベルティの準備

各チームで作ったものを最終的に発表してもらうわけなのですが、競い合いながらつくったほうが楽しいので、優勝チームになにか賞品とかを渡したいところですね。あと、参加者の人にもなにかあると良いです。
今回は産業支援センターさんにノベルティをご提供いただきました。ありがとうございますm(_ _ )m

最終発表の様子を生放送

発表の様子をUSTなどでライブ配信して、SNS上でもコメントいただいたりすると面白かったりします。

ざざっと書きましたけど、とりあえずこんな感じです。またなにか思い出したら随時追記していきます。
もし「こうしたほうがいいよー」っていうアドバイスありましたら@shirokuro331 までいただけると嬉しいですm(.. )m

3月24日に株式会社オールコネクトさんのスペースをお借りしてコワーキングイベントの「minamo jelly vol.2」を開催しました。
ご参加いただきましたみなさまありがとうございました m(_ _ )m

前回のminamo jelly vol.1の時も書きましたが、コワーキングとは

コワーキングとは、作業スペースや打ち合わせ場所などを共有しつつ、各々が独立した仕事を行うワークスタイルです。企業のオフィスと違い、コワーキングで働く人たちは同一の法人・団体に所属していないこと、また、価値観を共有する参加者同士で「才能・技術・知識などの共有」が図れる特徴をもっています。

という感じのものです。
福井でもこういう活動があったら楽しいかなと思って、3月から単発のコワーキングイベント「Jelly」を始めました。

今回のminamo jellyのために、オールコネクトさんのデザイナーリーダー澤田氏がステキなコワーキングスペースを用意してくれました。シャレオツ！

そしてなんと特別に、Googleさんから頂いたというノベルティまでご用意してくれました！
超いいひと！

というわけで各自作業スタート。

僕がこの日やったことは、数日前から管理画面につながらないという現象が起きているWordPressの復旧作業を行いました。
旧サーバーからデータをエクスポートして、新しいサーバーに移行するという作業を行ったのですが、うまいこと記事データが移行できてない感じで(´・ω・｀)ｼｮﾎﾞｰﾝ としてたのですが、ふと横を見ると洋書の翻訳作業に集中する@kompiro さんがいらっしゃったので、相談してみるとサクっと解決してくれました。
さすがスーパーエンジニアの@kompiro さま！僕が数日悩んで解決できなかったことをモノの数分で解決してくれました。
最上級のお礼としてブラックサンダーを2つ程贈呈させていただきました。（-人-）

あとはcompass について調べたり、作ってる途中のWebアプリについて相談したりと、とても有意義な時間を過ごすことができました。

他の方も、HTML5 & JavaScript Hackathon の開発の続きを行なっていたり、Webデザインやチラシのデザインを行なっていたりと、それぞれのペースで作業に集中されているようでした。
時々「◯◯さんの会社ではこういう時、どうしてます？」的な話が飛び交ってたりしてて、とてもいい感じなコワーキング空間でしたね。楽しかったです。

ご参加いただいた方から差し入れいただきました。

油屋さん、ありがとうございましたー（＞人＜）

次回「minamo jelly vol.3」は4月13日の13:00から、福井駅前のスペースおいちさんで開催します。
いつもとは違う場所と違う人と働いてみるのも刺激があってなにか新しい気づきがあるかもしれません。こういったコワーキングというワークスタイルに興味のある人はぜひ一度体験してみてください。

facebookユーザーの方はこちら
https://www.facebook.com/events/373013319388246/

facebookユーザーでない方はこちら（こくちーず）
http://kokucheese.com/event/index/32066/

お申し込み無しでも気軽にお越しくださいませー。

とあるAPI使ってて、xmlの属性の値を取ってきたくて調べたのでメモ。

<entry>
    <link type="text/html" href="http://atnd.org/events/26881" rel="alternate"/>
    <title>Hamamatsu.rb #14</title>
</entry>

上記のようなXMLの場合、titleの要素の値を表示したい場合、

<?php
$url = "（XMLファイルへのパス）";
$rss = simplexml_load_file($url);
?>

<?php foreach($rss->entry as $entry){
  echo "<p>" . $entry->link->attributes()->href. "</p>";
}
?>

と記述すれば表示されます。
ですがこの書き方ですと、要素の値は取得して表示できますが、属性の値は取得できません。

属性の値を取得したい時は

<?php
$url = "（XMLファイルへのパス）";
$rss = simplexml_load_file($url);
?>

<?php foreach($rss->entry as $entry){
  echo "<p>" . $entry->link->attributes()->href. "</p>";
}
?>

のように、取得したい属性の要素の後に「->attributes()->（属性名）」のように記述すればとって来れます。

SimpleXMLでも複雑なXMLのデータを扱えます。