2016年05月03日
高専カンファレンス lol
前回の高専カンファレンス100 in 東京に続いて、関西地方で大規模な高専カンファレンスをするとのことで、これは行くしかないだろう、ちょうどゴールデンウィークもあるし。ということで、いい感じに弊社にインターンシップでいらっしゃっていた実行委員のやましーさんから飛行機がいいと聞いて飛行機で行くことにしました。
発表申し込み
実際のところ、発表する、できることなんて何も思いつかず、「参加して皆の発表聞きに行くだけかな〜」と考えていました。(やましーさんからめちゃくちゃ「うなすけさん発表しないんですか」と詰められている)
そしたら、僕のスポンサーのとある方からこういうtweetがありました。
そんなわけで、カップル専用アプリについての発表と、実際に触ってもらえるようブース発表も申し込んだところ、ブースの方は選考を通過しました。
まさか、と思いました。
当日
発表
研究の話とか、教育の話がある一方、地名の由来、コンクリート、はたまたライブドメイン取得などアツい発表がたくさんありました。ひとつひとつを取り上げて感想を述べることはしませんが、僕はここで発表しなくてよかった……と思います。
ブース
想像以上に引かれてヘコむ。
やったことといえば、カップル専用アプリの中で有名と思われるものを選択し、まとめた資料を展示。また、それらアプリをインストールした端末を2台設置して自由に触ってもらうということです。
感想の大半が「LINEじゃん」だったので、そうだね〜〜〜〜〜〜〜〜〜そうだよね〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜という気持ちで、言うなれば罰ゲームでした。なんならブース発表者用の名札も貰っていなかったので疎外感でした。みんなカップル専用アプリにもっと興味を持っていいと思います。
懇親会
スポンサーでいらっしゃっていたGitHubの方2人のうち、1人は見るからに外国の方でした。あまり話しかけられてもいない様子で1人で座っておられたので、勇気を出して話しかけたところなんと日本語が話せる方でびっくりでした。その方はテクニカルサポートをしていて、リモートで働いているとのことでした。やはり問い合わせもメールベースにできるとサポートの方もリモート業務ができていいですね。弊社ではどうしても電話による問い合わせの必要があるのでできないのですが。
で、GitHubの方2人のうち、もう一方はなんとdiceさんで、「やべえRebuild.fmのあのdiceさんが目の前にいるやべぇ」みたいになりました。
diceさんもGitHubパーカーを着ていたのですが、GitHub「の」パーカーはあまり気に入ってないらしく、TMIXかユニクロで迷ったところ、生地がわからないのでユニクロにしたとのことでした。ということでショールームを紹介させていただいたところ、いらしてもらえるとのことで、ヤッターという感じです。よかったですね。
よくなかったこと
ちょっと批判ぽくなって申し訳ないのですが、よくなかったと僕が感じたことを1つだけ挙げさせていただきます。
サブスクリーンなのですが、1つ1つのツイートを色の円の中に入れてぽわぽわさせるという仕組み、大変綺麗で、さぞ実装には苦労したことかと思います。しかし……しかし、中央前から3列目に座っていた僕でさえ、ツイートの中身を読むことはできませんでした。そういう意味で、運営側の自己満足になってしまったかな……と感じます。
ツイートは読みやすいように普通に上から下へ流して、その背景にツイート数に応じてぽわぽわを増やしていく、とかにしても良かったかな、と思います。
2016-05-04 追記
とのことです。なるほどなるほど。
感想
今回のカンファは、スポンサーを積極的に募集したこともあるのか、チロルチョコだったり、GitHubステッカーやlolのステッカー、Tシャツなど、さまざまな仕掛けが用意されており、高専カンファレンスの新たな形を示すことができたのではないかなと個人的に思います。
次は茨城ですね！!
2016年04月24日
60% keyboard
どうにも僕はテンキーもカーソルキーもファンクションキーもない、いわゆる60% layout keyboardというものが好きで、これまでにはTEX Yodaなんかを買っています。
その時からMassdropのMechanical keyboards communityを購読しているのですが、よさ気なキーボードを見つけたので買いました。
KC60 Mechanical Keyboard
KC60 Mechanical Keyboard - Massdrop
Programmable layersと銘打ってるだけのことはあり、キー配列はもちろんのこと、layerを複数作成することができます。(たぶん10 layersまで)
そのうえ、キーの組み合わせでマウスカーソルの移動も可能なほど、カスタマイズは幅広くできます。
how to customize
上記2サイトが参考になります。僕はubuntuでファームウェアの書き込みを行いました。その際、scriptはsudoで実行しないと書き込みができませんでした。
2016-05-03 追記
2016年03月13日
つくりかた記事リスト
あまりにもはしょりすぎていた
あとは、あなたが好きなようにslimを書き、scssを書き、ページを作っていくだけです。
と前回書きましたが、あまりにもはしょりすぎている感じがあるので、どういう風に僕がn0h0.comを書いていったかを説明します。
以下、前回の続きとしてslimとscssで書いていきます。
画像を置く
middlemanでは、source/images以下に置いた画像を、
= image_tag "source/images以下のpath"
で参照することができます。例えばsource/images/n0h0.pngというファイルは、
と書くことで、
<img src="/images/n0h0.png" />
になります。
真ん中に置く
次に、この画像を画面の上下左右中央に配置したいと思います。
さて、block要素に対して、次のようなstyleを適用すると、その要素は親要素の上下左右から中央に配置されます。
.element {
position: absolute;
width: 100px;
height: 100px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
※このとき、親要素にはposition: relative;があたっているとよい
参照
ところで、<img>要素はinline-block要素なので、このように書いてやります。
.element {
display: block;
position: absolute;
width: 100px;
height: 100px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
n0h0.comでは、<img>に対して直接このstyleをあてています。これは、ページ内(body以下)には<img>しか存在しないのでいいかなと思ってのことです。ですが、出来る限りclassを付与して、そのclassに対してstyleをあてるべきでしょう。
画像を回す
さて、のほ君のアイコンを回したくなりましたね？そこで、CSSアニメーションを使います。
参照
画像の要素に対して、次のようなプロパティを指定します。
.element {
display: block;
position: absolute;
width: 100px;
height: 100px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
// ここから下が追加したプロパティ
animation: spin 10s linear infinite;
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
}
これで永遠に回り続けるのほ君が完成しました。
CSSフレームワークを使う
さて、ここまではCSSを全ていちから書いてきましたが、場合によってはCSSフレームワークを使うと便利な場合があります。定番のところでは、bootstrapを使ってレスポンシブなwebページを作成したりでしょうか。
有名どころのCSSフレームワークを以下に挙げます。
bootstrapのインストール
例として、おそらく一番有名である？bootstrapのインストール方法について解説します。
<head>のどこかにこの行を追加すれば完了です。(これはslimの書き方ではないことに注意してください)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
CSSフレームワークの使い方については、今回は触れません。
次回予告
次回こそ、ドメインを取ることと、サーバーを借りてssh接続するところまでやりたいと思います。
2016年03月05日
STEERS ローンチいたしました
2016年3月3日、Web上でTシャツを販売して利益を得ることができるサービス、STEERSがローンチしました。めでたいですね。
unasuke.com のスポンサーになってほしい！！！
さて、unasuke.comはドメインの維持費もありますし、VPS上に構築しているのでサーバー費用もかかります。
とはいえ、広告は僕が嫌いなので置きません(amazonのアソシエイトくらいは置いてます)。ですが何かしら見返りは欲しいとは思います。すこし。
なので、STEERSでこんなTシャツを作りました。
I am sponsor of the … | オリジナルTシャツ販売 STEERS（ステアーズ）
詳細は上のリンクを読んで欲しいのですが、このTシャツを買って、僕を支援していただいた方の名前を、https://unasuke.com/sponsor (まだない)に掲載します。 あとめっちゃ感謝します。
現状STEERSでは自分のTシャツを買ってくれた人がわからないので、Tシャツを買ってくれたら、そのTシャツと買ったあなたが一緒に写っている写真を僕に何らかの方法で送ってください。
特に読んで役に立つような記事を書いているわけではないのですが、応援していただける物好きな方はどうぞよろしくお願いします。
買ってくれたらすごい勢いで静的サイトのつくりかたの記事の続きとか書きます。デザインも改善します。スマホ対応が秒です。
ご注意
STEERSのシステム上、5枚の注文が集まらなければ実際に支払いが行われることはありません。「どうせ5人も買わないだろうから予約しよう」的なチキンレースも可能です。
また、販売期間が大体7日間ですが、その後、5人の予約が入れば発注されます。
2016年02月29日
福井技術者のつどいも5回目
いつのまにやらもう5回目の開催となりました。東京に就職してからは、数回の開催を遠くから眺めているだけの存在でした。
今回はちょっと個人的な成果もあったので、久々に参加してみようかと思い、足を伸ばしてみた感じです。
思うこと
特に今回は、なのか、僕が久々に参加したからそう感じるだけで前からなのかはわからないですが、参加者に学生が少ないと感じました。
こういう催しは参加者が情報技術に関心のある人に偏りがち、という問題があるにせよ、福井県には情報技術関連の学科がないわけではありません。
もちろん福井大学には情報メディア工学科があります。会場のjig.jpさんがある鯖江市には福井高専があります。
高専生は、この時期は進級のこと、就職活動のことがあるとはいえ、基本的には何もない時期ですし、福井大学生は春休みの真っ最中です。
友人のつてで前日に興味のある人は来てみてねと誘ってみましたが音沙汰はなく、物理学科の友人が来てくれたのみでした。
(とはいえ、前日に言うのも悪いですが)
まあ、福井大学にはまだ繋がりがあるだけいいですが、問題は福井高専です。
後輩の猫神くんも卒業し、のほ君が最上級生になる今年。僕は、それより下の後輩に対する繋がりが全く無いのです。
IT研の様子もわからないし、頼る宛は先生方、ということになるのでしょうか。
とにかく、合う合わないがあるにせよ、一度は来てほしい、一度は発表してほしい。と思ってしまうのは主催を経験している僕のわがままでしょうか。
配信
今回、僕は個人機材を持ち込んで配信させていただきました。
配信しての感想ですが、カメラの置き場所をもうちょっと前にしたら一番後ろの通路を塞がずに済んだのかなと感じました。それがどれくらい障害だったかはわからないですけれども。
あと欲を言うなら、マイクの入力を拾いたいです。
まとめ
第6回があるとして、その時は福井大学生、福井高専生の参加者が増えていることを願います。
2016年02月28日
はじめに
これからの一連の記事は、2016年2月27日に行われた福井技術者の集い その5での僕の発表した内容を、加筆ならびに修正し、よりわかりやすくまとめ直したものとなります。
つくりかた記事リスト
静的Webサイトとは
これから作成する静的Webサイトとは、twitterやfacebookなどのような、アクセスに応じて配信するファイルが変化するようなものではなく、このブログのように、決まったhtml、css、JavaScriptのファイルを返す単純なWebサイトのことを指します。
静的Webサイトを作る道具
さて、静的Webサイトをつくるのに必要な道具は、極論を言ってしまえばテキストエディタ以外に必要ありません。
しかし、htmlの手書きは、閉じタグを忘れたりすることもあります。cssの手書きは、デザインによってはベンダープレフィックス(webブラウザによって異なるスタイルの書き分け)などを全て書き並べる必要が出てくることもあるでしょう。
デザインのうえでの共通部分(ヘッダーやフッターなど)も、全てコピーアンドペーストするのでしょうか？
そこで、静的Webサイトを作ってくれるツールを使って、作っていきます。
静的Webサイトジェネレーター
静的Webサイトを作ってくれるツールのことを、「静的Webサイトジェネレーター」と呼びます。
Top Open-Source Static Site Generators - StaticGenに主要な静的Webサイトジェネレーターが載っていますが、とにかく量が多いです。
一体どれを選べばよいのでしょう。
今回は、このブログでも使っているmiddlemanを使用します。
採用の理由としては、
などです。
同じくRubyで書かれている静的Webサイトジェネレーターにjekyllがあります。こちらはGitHub pagesという簡単に静的Webサイトを作成できるGitHub上のサービスで採用されているツールです。
middlemanで静的Webサイトをつくる
Rubyの環境構築
middlemanはRubyで書かれているので、PCにRubyの実行環境がない場合は、環境を整えてやる必要があります。
Rubyの開発環境構築は、OSごとに書くとそれだけで記事が一つ出来上がるので、ここでは解説サイトへのリンクを掲載するのみに留めます。
middlemanをインストールする
middlemanのインストールには、gemというツールを使います。gemは、Rubyに標準で組み込まれているライブラリをインストールするコマンドです。
以下のコマンドを実行することで、gemを使用したmiddlemanのインストールが行われます。
インストールはこれで終わりです。
middlemanの初期化
さて、middlemanでは、各種ファイルの置き場所が決まっています。それらの準備をmiddlemanにしてもらうために、以下のコマンドを実行します。(例えば今回作るWebサイトの名前を、hogesiteとします。)
$ middleman init hogesite
このコマンドの実行により、今いるディレクトリにhogesiteというディレクトリができ、その中にsourceなどの幾つかのディレクトリができているはずです。
さて、これからはこのhogesiteディレクトリで作業をしていくので、ターミナル上でもcdしておきましょう。
$ cd hogesite
$ pwd
/home/user/src/hogesite #pathはどうでもよくて、大事なのはカレントディレクトリがhogesiteであるということです
gitなどのバージョン管理システムを使用している場合、この段階で一旦コミット等状態の保存をしておくと良いでしょう。
middlemanの設定
middlemanは標準ではhtmlテンプレートエンジン(htmlを生成するためのファイルの形式)にerbを使用します。しかし、erbはほとんどhtmlのようなものです。また、cssも素のcssを書く必要があります。
htmlテンプレートエンジンにはslimを、altCSSにはscssを使います。これも、僕の個人的な趣味による選択です。
さて、slimとscssを使いたいのですが、そのためにはmiddlemanをインストールした時のように、外部ライブラリのインストールが必要となります。いちいちgem installしても良いのですが、それだとこのプロジェクトにはどの外部ライブラリが必要なのか？という情報がわからなくなってしまいます。
そこで、bundlerを使用します。Bundlerは、あるプロジェクトの依存関係の記述、またライブラリ間の依存関係の解決を行ってくれる、これもRubyのライブラリです。
以下のコマンドを実行して、bundlerに依存関係を指定するためのファイル、Gemfileを生成します。
$ gem install bundler #すでに入っている場合もあります
$ bundle init #コマンドの名前がbundlerでないことに注意してください
すると、次のようなGemfileが出来上がっていると思います。
# A sample Gemfile
source "https://rubygems.org"
# gem "rails"
これをひとまず以下のように書き換えます。
source "https://rubygems.org"
gem "middleman"
gem "middleman-livereload"
gem "slim"
gem "sass"
(middleman-livereloadはあると便利、という理由で追加しました)
そして、以下のコマンドを実行します。
これによって、bundlerがGemfileから必要な外部ライブラリを読み取り、ライブラリの間で依存関係を解決してインストールを行い、実際にインストールされたライブラリの情報をGemfile.lockに書き込みます。
そしたら、次のような設定をconfig.rbに記述します。先頭でも末尾でも構いません。
set :slim, { format: :html, pretty: :false }
set :sass, { style: :expanded, syntax: :scss }
この設定の意味は、slimの場合はここ、sassの場合はここ(英語)を参照してください。
ページを作っていく
さて、実際にページを作っていきたいのですが、その前にmiddlemanが最初に生成したerbをslimに変換してしまいます。
以下のコマンドを実行して、erb2slimというgemをインストールします。(Gemfileに記述する必要はありません。なぜなら、erbをslimに変換するためだけに使うからです。)
初期状態ではindex.html.erbとlayouts/layout.erbがerbファイルとして存在するはずなので、以下のコマンドで変換してしまいます。(-dオプションでerbファイルを削除しています)
$ erb2slim index.html.erb index.html.slim -d
$ erb2slim layouts/layout.erb layouts/layout.slim -d
あとは、あなたが好きなようにslimを書き、scssを書き、ページを作っていくだけです。
slimの記法は、日本語による解説がここにあります。
scssの記法は、英語による解説がここにあります。(SassとSCSSを切り替えて表示することができます)
参考までに、僕がmiddlemanを使って作成した静的Webページのコードを以下に掲載します。
確認しつつ書いていく
さて、素晴らしいwebページを書いている途中に、「これって、ブラウザではどんなふうに見えるのだろう？」と思うことはあるはずです。そんな時は、以下のコマンドを実行してみてください。
$ bundle exec middleman server
このコマンドを実行し、ブラウザでhttp://localhost:4567にアクセスすると、実際にどのようなページになるのかをブラウザで確認することができます。(Ctrl+Cで終了します)
また、middleman-livereloadをインストールした場合は、config.rbのどこかに次の設定を書いておけば、bundle exec middleman serverを実行中にファイルを編集すると、自動的にブラウザが再読込してくれて便利です。
configure :development do
activate :livereload
end
htmlに書き出す
作業も終わり、公開できるものが出来上がったとします。そしたら、次のコマンドを実行します。
$ bundle exec middleman build
このコマンドにより、html、css、JavaScriptが生成されます。このフォルダ以下のファイル群をサーバーに置いて、アクセスできるようにすれば静的Webサイトの出来上がりです。それはまた以降の記事で解説していきます。
公式ドキュメント
middlemanの公式ドキュメント(日本語)は以下のURLにあります。わからないことができたら都度見に行くと良いでしょう。
Middleman: インストール
次回予告
次回は、ドメインを取ることと、サーバーを借りてssh接続するところまでやりたいと思います。
2016年01月24日
このブログはオープンソースです。
特に主張などはしていませんが、このブログはunasuke/blogにて生成に関する部分や画像など、全てのコードを公開しています。
middlemanとh2oとVPSによるブログ構築にも書いたように、middlemanを使ってhtmlなどの生成をしています。
まだまだデザインの面でもいろいろしたいことはあり、外見が未完成ではあります。
Pull Requestが飛んできた。
というわけで、こういうPull Requestが飛んできました。
ライセンスが決まってなかった。
その場でPull Requestをmergeしてもよかったといえばよかったのですが、生憎とこのブログにはライセンスを定めていませんでした。その状態で他人からのPull Requestを取り込んでしまうのはあまりに危険と言える(？)でしょう。
というわけで、このブログはMIT LICENSEの元で公開することになりました。 Add license(MIT) · unasuke/blog@d418f1b
merge it
無事しました。
このブログはプルリク募集中！
ではないです。
この記事にあるように、バグ修正とかは大歓迎ですが、見た目が大きく変わる変更や、新規記事の追加(！)はしてほしくないので……募集はしていません。
まあでもなんかあったらプルリクお待ちしております。
2016年01月19日
2016年初サバゲ
インターネット界隈の人たちで交流サバゲをする - 良いあそなすちゃん に、参加しました。
追加装備
今回の参加にあたって、BDUなどを買いました。全部挙げると、ブーツ、BDU上下、スカーフ、ベルトですね。計16000円ほどでした。
ゲームルール
フラッグ戦、殲滅戦、人狼、昭和VS平成、サドンデスをやりました。
人狼
ゲーム開始前に1人1枚トランプをめくり、10以上なら狼、それ以外は村人とし、ゲーム終了時点で村人が生き残っていれば村人の勝ち、村人が全滅したら狼の勝ちというルールのゲームを行いました。
あまり銃弾の打ち合いはなく、銃声が聞こえると「えっなにこわいこわいこわいこわいこわいどっちどっち」とオロオロする感じで進んでいきました。後ろから撃たれました。
昭和VS平成
文字通り、昭和生まれさんチームと平成生まれさんチームに分かれて殲滅戦です。ただし、各チームに2人スパイがいて、ゲーム開始から2分後にスパイがコソコソと活動しだすというルールがありました。平成生まれさんチームは1敗2分けで、「財力だ」とか「経験の差」と悔しがりました。昭和つよい。
感想
もっと良い装備がほしいという物欲が刺激される非常に良くない最高の催しでした。
2015年12月27日
発端
やりたかったこと
当日
とりあえず集合した後、おにやんまに行って美味しいうどんを食べました。ちくわ天最高。
道すがら、近くに温泉があることが判明し、高まっていました。
道中で酒を大量に買い込み、会話がハイコンテクストであること、本名に「ゆ」が含まれるのが2人いた事から、ゆゆ式を見ないとダメという話になりつつ(伏線)やままハウスに到着しました。
なぜかやままハウスについた途端、言の葉の庭をNetflixで視聴し始めた結果、「金麦とチョコレートが食べたい」という気持ちになりました。金麦もチョコレートも買ってこなかったので、買いに行くことにしました。
買いに行く前に、ありたそさんが昨日クラブから直接大学、それからハッカソン参加ということで風呂に入りたいということになり、まず温泉に行きました。
温泉に行き、おもむろに僕らはサイゼリヤに行きました。なぜでしょう。全く覚えてません。
サイゼリヤでは、サイゼ飲みを極める！ コスパ最強イタリアンバルとしての『サイゼリヤ』初級～中級～上級編 ｜ ガジェット通信を参考にしながらとにかく頭の悪い会話をしました。
そして帰りに金麦、チョコレートを買い、僕、やままさんがゆゆ式を見たことがないのでゆゆ式を借りようとしたら、DVDの1巻、2巻がなく、代わりに僕が見たことがないアイドルマスターシンデレラガールズのアニメを1期分借りて帰りました。
上映会の幕開け
赤城みりあちゃんが登場した瞬間泣き出した人がいたり。
ニュージェネがバックで踊るシーンで僕以外全員泣き出したり。
新卒採用の話になったり。
飛び出した発言
- 「渋谷凛は全てをわかっている」
- 「渋谷凛は最高」
- 「母性」
- 「俺も初めてのdeployは緊張した」
- 「アイドルマスターシンデレラガールズはマネジメント」
- 「竹内P」
- 「だって黒沢ともよじゃん……」(泣いてる)
- 「杏はわかっていてデリゲートした」
- 「一番成長したのは竹内P」
- 「新卒採用は社会貢献」
- 「笑顔！！！！！！！！！」
- 「若さの勢いが大事」
- 「俺のおたく棒舐めんなよ！！！！！！最悪！！！！！！！」
- 「おたく汁が染みこんだおたく棒舐めた俺を尊敬してほしい」
- 「完全に日本酒」
成果
2015年12月23日
高専カンファレンス 100 in 東京
2015年12月19日、20日の2日間、電気通信大学で開催された高専カンファレンス 100 in 東京の運営に、副実行委員長として参加しました。
実行委員長であるところのなっちゃんの夢これをご覧になられた方はわかるかと思いますが、LINEで捕まった人間です。
会場ではウェイ系でしたが、ブログはしっとり系でいきます。
何してたどんな人か
- 副実行委員長業
- アイスブレイク担当
- 社会人
- カンファ参加7回目
- 運営スタッフ2回目
当日までの準備で言えば、ミーティングの議事録はもっぱら僕が担当していました。また、スタッフ間のコミュニケーションにはSlackを使用したのですが、そのSlackの準備をしました。公式wikiの更新も、ある時期までは僕が行っていました。副実行委員長らしい仕事といえばそれくらいです。
アイスブレイク担当としては、どのような企画を行うかの決定、タイムテーブル作成、当日説明用スライド作成、台本作成、部屋割り作成、当日の司会を行いました。
当日行ったアイスブレイク以外の仕事は、1日目はクロージングトーク、2日目は複数トラック発表の補佐、基調講演・LTの司会と銅鑼です。
つらつらと思い出
夢これの発表中にあったあのLINEのやり取りは、6月10日でした。そこから6ヶ月かけて様々な準備をしてきました。まずは、とりあえず目標としていた新春カンファレンスの実行委員長のひとり、RooandQooさんにアタックして新春カンファレンスの記録を頂きました。そのあとでスタッフを集め始めたりと、いろいろ動き始めました。
キックオフミーティングは8月11日に行われました。それから6回のミーティングをして、当日を迎えたわけです。
言い出しっぺのなっちゃんは強い信念というか、目標というか、思想を持っていました。おびなたさんに話してもらいたいというのもそうですし、アイスブレイクで打ち解けてもらいたいというのもそうです。僕はそのような思想を持ちあわせていない代わりに、その意見が実現可能であるか、困難であれば何から解決していくか、などの相談役として方向修正をするという役目でした。ごく初期は。スタッフが増えていくにつれ、そういった僕の役目は消失していきました。
例えば今回は電気通信大学で開催しましたが、手っ取り早く広い場所を借りる(回線も用意する)ならある企業のスペースを使わせてもらったほうがいいのではないかと思っていました。また2日間開催も当初は反対していました。
そこで「いや、電通大でやりたい」「2日間開催したい」という委員長の強い意志には何度も感心というか、尊敬というか、力を感じました。そしてそれは間違っていなかったと思います。
共有Dropboxのファイル更新通知のたびに上がってくる素晴らしいデザインを見るたび、カンファが形になっていくように感じられ、焦り、緊張、期待が大きくなっていくのを感じました。
アイスブレイクについて
僕がメインとなって担当したアイスブレイクの話をしていこうと思います。
アイスブレイクは、様々な事情(後述)により、本格的に動き始めたのは11月25日頃です。この時点で開催1ヶ月を切っています。絶対に真似しないでください。
実行委員長が「200人参加申請なかったらカンファ行かない」という旨の発言を前日にしていました。この時期(11月終盤)の参加者登録は確か150人程度で、僕はまさか200人もいかないだろうと思いつつも、アイスブレイクで許容できる人数の上限を200人としました。
結果的に参加申し込みは200を超え、1日目の参加者も141人と、まさかこうなるとは、という感じでした。
その後、アイスブレイク班(なっちゃん、僕、くりむぞんさん)のみでミーティングを重ね、最終的にアイスブレイクの全体が決定したのは12月9日(開催10日前)、当日使用する全ての物品の用意が完了したのは12月19日(開催当日)でした。絶対に真似しないでください。
目標としたこと
僕がアイスブレイクで目標としたのは、「なるべく多くの人と、がいいけど、最低1人、できれば2人の人と打ち解けてもらうことを目指す」ということです。
大きな開催となり、全国津々浦々から人が集まります。高専カンファレンス100の懇親を支える技術 - Labo Memoにある全国高専マップには、日本の北から南まで付箋が貼られています。
となると、twitterでフォローしてるけど会ったことがない人、twitterで見たことはあるけど会話はしたことがない人、初対面の人、などなど、コミュニケーションを行うのに壁を超えなければいけない人がたくさん居ます。
その壁を取り除き、顔とアカウント名を一致させたり、新たなフォロワーを増やしたりする、打ち解け合いのお手伝いをしたかったのです。
そして必ずやりたかったことは、「ものをつくる」ことです。その場で初めて会う人とも、「共にひとつのものを作り上げる」という体験を共有できれば、きっと壁はなくなるでしょう。それに、話をして「はい、終わり」では、あまりにも寂しすぎます。
そのためにどうするべきかというのは、短い時間ながらも様々な案を出しあい、これはどうか、これで本当に会話が広がるのか、と何度も検討を重ねました。そもそも200人全員で何かをするのは無理があるのはわかりきったことですが、それを4つの部屋に分けるとして、その部屋の中ではどうするのか。50人で何かをするのか。その50人も分けるのか。分けた後、最後に合わさるのか。様々なパターンが存在しました。その中のどれを選択すれば、参加者間の壁は無くなるのか。かつ、時間、空間、予算の釣り合いが取れるのはどこか。
それらのアイデアと、制約の中で生まれたアイスブレイクが、当日みなさんの体験したものとなります。
結果
僕の担当した202教室では、参加者同士の話し声、笑い声が絶えないよい雰囲気、望んでいた雰囲気を作り出すことができました。
前述の通り、アイスブレイクの物品の用意が完了したのが当日早朝だったということもあり、各部屋の司会、補佐それぞれには事前にスライドと台本を読んでもらうという、リハーサル全く無しのぶっつけ本番で挑んでもらうことになってしまいました。その結果として、最強人間を作ることができなかった部屋もありました。
冒頭でSNSを禁止したこともあり、アイスブレイク中の感想はあまりtwitterからは拾うことができませんでした。それでもアイスブレイク終了後、「楽しかった」というツイートがいくつかあり、とても嬉しかったです。
スタッフルームに帰ってきた後も、他のスタッフから良かったという言葉を聞くたびに、くずおれるかと思いました。
司会業ですが、僕は完全に経験で殴ったようなもので、他の部屋の様子がまったく予想できませんでしたが、感想ツイートからはうまくいったようです。ありがとうございました。
アイスブレイクの成果物(伝説巻物、最強人間)は、懇親会の会場に掲示しました。懇親会の最中は僕は完全にテンションがおかしくなってしまい、それらを掲示したことへの反応を伺うのをすっかり忘れていました。どうだったでしょうか。他の部屋、チームの伝説や最強は、思いもよらないものがいくつもあって、とても面白かったです。
裏話
アイスブレイクについて
ところで、このカンファのスタッフは17名とwikiには書いてあります。しかし、こまめにwikiをチェックしていた方がいれば覚えていらっしゃるかもしれませんが、実はもう1人スタッフがいた時期があります。mktakuya君です。
当初はmktakuya君がアイスブレイクの企画担当でしたが、どうしても当日に来ることができなくなってしまい、やむなくアイスブレイクの担当を僕へと移すことになりました。これがアイスブレイクの準備開始が遅れた原因です。
彼がアイスブレイクの担当であれば、また違った高専カンファになっていたことでしょう。
アイスブレイクの部屋割り
200.times do
puts "#{%w(101 102 201 202).sample} #{%w(A B C D).sample} #{%w(1 2 3 4).sample}"
end
値はそのまま採用したわけではなく、各部屋、各グループの人数が均等になるよう調整しました。
コミュニケーションツールについて
スタッフ間のコミュニケーションツールとして採用したのはSlackですが、初期にはidobataも検討していました。Slackを採用した理由、idobataを採用しなかった理由は特に覚えていないので、どちらを使ってもコミュニケーションには支障がなかったと思います。
ミーティングについて
アイスブレイク担当者のみで行った小規模なミーティングを除く、全てのミーティングは計7回行われましたが、その全てがピクシブ株式会社で行われました。ピクシブ株式会社様、ありがとうございます。
スタッフパーカーについて
スタッフパーカーは、TMIXで発注しました。とは言え、これについてはスポンサードしていただいたわけではなく、希望者各自が自腹で購入するという形式になっています。
テーマについて
今回のテーマは「Dreaming」ですが、案の中に「new daybreak」というものがありました。僕はこれが好きです。(言葉の響きが好きなだけで、テーマにしたかったわけではないです)
開催前日について
湯河原温泉「おんやど恵」の足湯フログラミングは開発合宿の新しいスタンダードになる - スパイスな人生
開催前日の18日まで、TMIXの開発合宿に参加していました。合宿中、僕がアイスブレイクの準備を行っている横であそなすさんがサブスクリーンをもりもり開発していくという、ある意味高専カンファレンス合宿とも言える時間が存在しました。
会議室が24時間使えるというのは本当にありがたかったです。
18日は宿泊用の荷物を持って移動を繰り返し、泊める約束をした肉好き君を迎えに行ったりして、前日の時点で脚がつらかったですが、1日目で崩壊しました。
歩数
ご確認ください。
2日目はとにかく脚がつらかったです。体調で言うなら、1日目のアイスブレイクでやらかしたのか、ずっと喉が痛くて、1日目の帰りに龍角散のど飴を買ってずっと舐め続けるという緊急対応をしました。2日目には90%くらい回復していました。
まとめ
とにかく、高専カンファレンス100 in 東京は終わりました。皆さんには楽しんでいただけたようで、こちらも嬉しいです。
参加者の皆様、お忙しい中お越しいただき、ありがとうございます。発表者の皆様、素敵で、面白い発表をありがとうございます。
スタッフの皆さん。個人の都合もあることでしょうが、そのような貴重な時間を、高専カンファの成功のために費やしていただき、ありがとうございます。素敵なデザインも、快適な回線も、打ち解け会えたアイスブレイクも、楽しい様々な発表も、目移りする複数トラック発表も、横で盛り上げるサブスクリーンも、しっかりしたtwitterアカウントの運用も、当日用意する様々な物品も、それら全てをまとめ上げ、高専カンファレンスを成功へと導いてくれたリーダーシップも、心から感謝しています。
「最初から3桁のナンバリングにしていてよかった」という意見がありますが、「最初に4桁のナンバリングにしておけばよかった」と嘆く日がいつか来るかもしれませんね。
