223 Software

主に勉強したことなどを記録するログです。 最近はRuby, Railsなどが多め。

p4d - 223 Software

ハッカソンを開催しました

12/4(日)に僕の主催するP4D(デザイナー向けプログラム部)主催でデザイナーxエンジニアハッカソンを開催しました。

当日まで

11月の初旬から準備を始めました。11/6(日)にいつものフィヨルドオフィスに集まって当日の企画を練り、そこから参加者やスタッフの募集などをコツコツ行いました。

こういうイベントを行うときに一番気がかりなのが会場なのですが、今回もそのへんは @machida さんにおまかせして余裕で30人ほどが入れて無線LANもあるベンチャーカフェ様を借りられることになりました。

参加者集めも工夫しました。

このイベントの一番の特長はエンジニアとデザイナーをペアにして1日で動くものを作ってもらう、という点です。

エンジニアには1日でシステムを組み上げるという開発スキルだけではなく、(大体)初対面のデザイナーさんとコミュニケーションしながら、時にはレクチャーをしながら開発するというハイスキルが要求されてしまいます。このことから、今回エンジニアは広く告知をして希望者を集めることをせず身の回りの知り合いに協力を仰ぐという集め方をしました。

幸い僕の身の回りにはとても優秀なエンジニアの方ばかりでしたので、エンジニアの方は問題なく集まりました。

募集開始

やはりコラボレーションをスムーズに進めるにはGitの使えるデザイナーさんを優先して集めたい、という狙いがあり、まずは先日開催したWebデザイナーのためのGit勉強会に参加された方にgithub上でメッセージを送って参加を募りました。

しかし、残念ながらこれは全然反応がありませんでした。そもそも普段からgithubを使っている人以外はgithub上でメッセージを送られても気づかないおそれがあります。ということで急遽ATNDを立てて募集しました。

出足こそ悪かったもののなんとか9人のデザイナーさんが集まり、「デザイナーさんは来てくれるかな・・・」という一番の心配事は解消されました。

デザイナー、エンジニアともに9人の参加者が集まった時点で締め切ったのですが、欠席者が出ることを考えて念のためにサポートエンジニアとしてtwitterや社内で追加のエンジニアを募集しました。ありがたいことにすぐに4人の方に手を挙げていただいてあっという間にサポートスタッフまで集まりました。

当日

なんと欠席者0人。しかもほぼ全員が10時の時間通りに来ていただけました。嬉しかったです。

おかげで急遽ペアにサポートをつけなければならない事態にもならず、逆にサポートエンジニアで来ていただいた方にはあまりやることがなくなってしまって申し訳ない気持ちにもなりましたが、それでも準備から片付けまで色々手伝っていただきました。本当にありがとうございました。

会場が休日のため入退場に若干手間がかかり少し開始時刻を押してしまったりとバタバタしたものの、自己紹介と開発するネタの発表まで無事に終わらせてあとはひたすら開発でした。

このイベント、デザイナー側から見てもノートPCのみでデザインを仕上げなければならないというかなり厳しい制約が課せられ、また時間の制約から考えてHTML納品というのも考えにくく、狙い通りほとんどのペアがgithubを用いたコラボレーションを行っていました。

そして活発にペアでコミュニケーションをとっていたのも印象的でした。サービスの名称から細かい仕様まで、お互いに話し合いながら、それでも手を動かせる者同士ということもあり簡潔なディスカッションを繰り返しながらテンポよくどのペアも開発を進めていた印象です。ちゃんとspecまで書いていたペアがいることは驚きでした。

開発言語は全ペアがRuby+JavaScriptを使っていました。この事実だけで、いかに偏った空間かということがわかるかと思います。そしてなぜかこの日に限ってherokuの調子が悪く、全ペアに大打撃を与えていました。

自分のペア

主催者でありながら、ちゃっかり開発もしました。僕は@saucerjpさんと組んでwebsocketを使ったアプリを開発しました。当日のうちにコアな機能はほぼほぼできたのですが、正式リリースに向けてもうちょっと機能追加+調整を行いたいので詳細は後日。

発表LT

懇親会を兼ねて、ビールを片手に各ペアの発表を聞きました。

これがまたどのペアも完成度が高い!デザインがきちんと入るとこんなにもレベルが高くなるんだなぁと感心しました。

成果物はwikiのOutputのページでも見られますし、きっとさらに完成度をあげて正式リリースされることと思います。各々のサービスについての詳細はそのときに発表されると思います。

まとめ

自分で言ってしまうのもアレですが、想像以上にいいイベントにできたと思います。これも準備段階から協力していただいたスタッフのみなさん、サポートエンジニアの方々、会場を提供していただいたベンチャーカフェ様、そして当日惜しみなくそのスキルを発揮していただいた参加者のみなさんのおかげです。

本当に開催して良かったと思います。またこういったイベントを開催していきたいと思いますので、今回惜しくも参加できなかった方もぜひ次回を楽しみにお待ちいただければ幸いです。

これをきっかけに毎月のP4Dの活動もますます盛り上げていきたいと思います。どうぞよろしくお願いします。

第3回デザイナー向けプログラム部

開催してきました!

まとめは前回同様、GitHubのwikiにまとめましたのでご覧ください。

https://github.com/prog4designer/meetups/wiki/第3回

はじめての欧文書体 - 欧文書体の種類と歴史について

セリフ / サンセリフとありますが、その歴史の長さには大きな違いがあることを初めて知り、驚きました。
またTimes RomanやHelveticaとか、なんとなく使っていましたがそれぞれの書体にもやはり開発された背景や歴史、そして性格(見出し向きとか本文向きとか)があり、それぞれを知ることでWebのコンテンツにも活かせるのかな、と感じました。

同じ書体でも間隔や太さを変えるだけでも全然違う書体に見えるところも意外でした。

次回以降には実際にWebデザインに活かす方法なども話していただけるようで、そちらも楽しみです。

WebデザイナーのためのWeb(HTTP)入門

急遽資料を作っていただき、お話していただきました。

内容はHTTPの基礎を理解する、ということでしたがsinatraでその場で簡単なアプリを書いて、そのアプリに対してブラウザではなくtelnetコマンドを使って黒い画面でブラウザの行っている動作を再現する、というなかなか硬派な内容でした。

そこから派生してRESTfulやrailsの思想などの話にも話題が広がったり、とプログラマーから見ても大変興味深い内容でした。

今日お話しいただいたHTTPについてをもっと詳しく知りたい場合は以下の書籍が最適かと思います。

ライブコードレビュー

既にJSをバリバリと使っている@saucerjpさんですが、2本ほどJSで書いたプログラムを持ってきていただき、それをスクリーンに移しながらみんなで意見を出し合う、というコードレビューを行いました。

モジュール化に関しては一応プログラマとして色々アイディアを出させていただきましたが、そもそも今後の再利用性を始めからきちんと考えて組もう、という考えにご自分で至るあたりがすごいと思いました。

コードレビューの中ではJSの var self = this; のイディオムについてや、call(), apply()メソッドについての話、CoffeeScriptについての話までに発展して盛り上がりました。

次回以降の話

来月中旬 or 下旬に30人規模のハッカソンを企画しています。興味のある方はぜひGoogleグループの方に参加していただけると幸いです。

また1〜3回まで開催してみて、ここまでは開発環境構築やWebアプリの仕組みなどのWeb開発に必須の内容を発表メインの形式で活動を行ってきましたが、そろそろ実際に手を動かすような活動をもっと取り入れていきたいと考えています。
次回の第4回からは、例えばチャットを作る、掲示板を作る、twitter連携サービスを作る、といった簡単なテーマを設けて、少しずつ実践的なプログラミングをステップアップで学んでいける内容にしてみようかと思います。

なかなか全員のニーズを満たす活動というのは難しいですが、少しずつ内容を充実させてエンジニア・デザイナをつなぐ架け橋として機能する活動というかコミュニティを作れるように頑張りたいと思います。

WebデザイナーのためのGit勉強会を開催しました

WebデザイナーのためのGit勉強会を9/11に開催しました。
既に1週間が経ってしまいましたが、エントリーにまとめておこうとおもいます。

この勉強会の目的

この勉強会は僕の主催するデザイナー向けプログラム部のメンバーが中心となって、Gitを使えるデザイナーを増やそう!との目的で企画したものです。

7月に参加したハッカソン(詳しくはプログラマとデザイナでハッカソンした話)の際に感じたのですが、お互いにGit, GitHubが使えるだけで格段にコラボレーションがやりやすくなります。近々行いたいと思っているデザイナーとエンジニアを一堂に集めたハッカソンにあたってはやはりGitが使えるデザイナーを集めたいという狙いもあり、今回の勉強会のきっかけとなっています。

準備

9/4に都合のついたメンバーで集まって、当日の内容や手順についての打ち合わせを行いました。
14時頃〜19時過ぎの長丁場となりましたが、いいミーティングができたと思います。10名を超える規模の勉強会を企画したのは初めてでしたが、こういう準備が重要だなぁと感じると同時に、休日にもかかわらずに協力してくださるみなさんには本当に感謝したいと思います。

当日の様子

ざっくり分けると4部構成で行いました。

まずは@machidaさんによる、デザイナー視点から見たGit, GitHubを使うことのメリットのお話。資料はこちら -> Github勉強会

ここから先はひたすらハンズオンでした。準備編ではGitHubのアカウントを持っていない人を対象に、アカウントの取得からSSHキーの登録などを行いました。既に設定済みの方もいらっしゃったので、そこはGit関連の書籍や情報の調べ方などを提示しつつ・・・。資料 -> WebデザイナーのためのGit勉強会 〜準備編〜

その際に紹介した書籍は以下の3冊です。

入門Gitは2冊ありますが、@monoookiさんから白い方が入門者向けには易しいとの情報をいただきました。黒い方はGitのメンテナの方が書かれているので、より深く理解したい方向けでしょうか。

あとはオンラインで読めるProGitも紹介させて頂きました。

次は基本操作編と題して、主に一人でGitを使うために必須のコマンドの練習やリポジトリをGitHubにpushするところまでを行いました。資料 -> WebデザイナーのためのGit勉強会 〜基本操作編〜

最後は応用編として、各グループごとにエンジニアを配置してのグループ作業としました。全員共通の作業は以下のとおり。(グループリーダーを引き受けてくださった、@jishihaさん、@tyabeさん、@shu_0115さん、@u1tnkさん、@saucerjpさん、ありがとうございました。)資料 -> WebデザイナーのためのGit勉強会 〜応用編〜

  1. prog4designer/p4d-gitを中央のリポジトリとし、それを各自のアカウントにfork
  2. forkしたリポジトリを各自のローカルにclone
  3. 変更を加えて(今回は自己紹介をindex.htmlに書きこんでもらいました)push
  4. Pull Request

この内容ができれば、もうオープンソースのソフトウェアへデザイナーとして参加することが十分可能だと考えています。

そして当日は全参加者がここまでできましたので、一気に20名以上もオープンソースへ貢献できるデザイナーが増えたと言っても過言ではありません!(キリッ

グループによっては、ブランチの話までできたようです。

今後について

今回、Gitの特長といえるブランチの使い方にまではあまり踏み込むことができませんでした。Pull Requestをするにしても、ブランチを切って作業する方が通常のやり方だと思いますのでこれはフォローしたいと思っています。

あとは今回定員オーバーとなってしまい参加できなかった方がいらっしゃいます。これに関してはフィヨルドさんにて後日もう一回今回の内容を行うことが決定していますので、近々ご連絡できると思います。

そして@machidaさんのスライドにもあったデザイナー、エンジニアを一堂に集めたハッカソンですがまだ日程は未定ですがぜひ行いたいと思います。

これらに興味のあるデザイナーの方、または協力してくださるエンジニアの方はぜひデザイナー向けプログラム部をチェックして下さい。GoogleグループLingrでイベントの打ち合わせをしたりしていますので、お気軽にご参加下さい。

最後に

会場を提供してくださったZynga Japan様、もろもろの調整や連絡などを引き受けてくださった@machidaさん、そして協力してくださったたくさんの方々、当日参加してくださった方々に感謝したいと思います。
ありがとうございました。

今後も色々とイベントごともやってみたいと思っていますので、またお世話になりますがよろしくお願いいたします!