Narcist's way

Like design, programming. Love @denari01 .

[再]whywaita と久々に会って思ったこと。コミュニティの代替わりについて。

こんにちわいわいた。whywaita Advent Calendar 13日目です。

昨日の記事は下記。ドメイン強い。長い。 https://wiki.mma.club.uec.ac.jp/kurubushi/sonota/whywaita_advent_calendar_2017_12

コミュニティと代替わり

彼と会うとやっぱり dentoolt の話になるわけで。また僕はやっぱり kosen10s の話をついしてしまうわけで。そんなこんなでそれ系の話題をまとめます。

dentooltは電通大学の学生が主体となり運営するLT大会です。実は最近行けてなかったのですが、次は行きますね!

大学内コミュニティは、当然そのコミュニティをwrapする形で大学というコミュニティがあるわけで。そして大学はその性質上代替わりが発生します。つまりその子コミュニティであるdentooltにも代替わりが 強制的に あるわけです。

もちろん他のコミュニティにも代替わりが起こり得ますが、強制的に代替わりが起こるのは非常に潔い。

アメンバーのスタミナ問題

代替わりというのにはメリットもデメリットもありますが、一つ大きなメリットとして、 スタミナ問題 を比較的考えなくて良い形態になるなぁと。

一年で代替わりするのですから、「長いようで短い」ですし、あるコアメンバーAが息切れしてコミュニティのコアメンバーから外れたとしても次のBさんが出てくるのは、Aさんが楽だなぁと思います。コミュニティから見たメリットというより、メンバーの受けられる恩恵ですね。

ちなみにkosen10s には代替わりがありませんし、コアメンバーの息切れが起きないように、そもそも息切れするようなペースで走らないようにしてます。

魂引き継げるか問題

代替わりの話をすると外せないのがこの問題。要するに後輩が自分と同じように頑張ってくれるかという問題です。

スタミナ問題とは対照的にデメリットとなります。これが代替わりのあるコミュニティが終わりを迎える典型例かと。

本質的には同じコミュニティで活動をすることは全く大切ではありません。でも自分がその活動をするのには理由やポリシーがあるので、同じポリシーを持つ後輩をしっかり支えてあげることが大切だと最近よく思います。

whywaita が座長だったdentooltは、その後 → hogasくんと二代引き継がれましたがどうやら楽しくやってるみたいでした。各代でポリシーをうまく伝えあえたいいコミュニティなんだなと。

同じように技術的な活動に積極性を持って取り組める(whywaitaの)後輩が今後も出てくることを祈ります。

まだ書きたいことあるけどそれはkosen10s AC最終日に!

明日はそのhogasくんのggrks記事です!お楽しみに!

kosen10s.net をしっかり作りたかった(進捗ダメです)

本記事は #kosen10s Advent Calendar 三日目の記事です。

2日目のライブラリめっちゃ良い。マジで。この記事読む前にマジで読んでくれ。

リリース情報 工事のお知らせ

kosen10s.net をアップデート中です。

ティザー的に、Header部分だけリリースしました。笑

本当は工事中状態でのリリースは避けたかったのですが、残念ながら手が追いつかなかった(というか昨日と今日二日とも6時間寝坊した❤️)ので今日は前編ということで。後編はAdvent Calendarと関係なく今月のうちに書くことにします。

Webサイトを作る動機

そもそもなぜ #kosen10s のウェブサイトを作ろうと思ったかの話をします。kosen10sはclosedなコミュニティであり、外部に対する露出というのは正直あまり大事ではありません。そのためコミュニティ拡大のための努力は特に行うこともありませんでした。

しかし昨今、あまりにもこのコミュニティがclosedな見え方になってしまい、kosen10sに該当する方からも「招待を受けないと入れないコミュニティ」なのではないか? という遠慮に近い気持ちを感じ取りました。そんな事情を考えて、条件に該当する人に気軽にJoinしてもらうためのものが欲しくなり、Webサイトを整備することにしました。

というのは建前で、数年前から「普通に欲しくね?」みたいな話は出ていて、Webサイトがないイケてないコミュニティという状況を脱するために作ろうと思いました。笑

デザイン

f:id:denari01:20171203233246j:plain

ファーストビュー

ファーストビューは何より「同い年ならでは」の要素が色濃く出るデザインとしました。

そもそも我々はコミュニティであり、人の集まりなのだから、ファーストビューはありのまま人が集まっている様子だと明快だなぁと考え、これまでのイベント開催時の写真を漁りました。

kosen10s っていうのはコミュニティでありながら、一人一人がシンプルに友人といえる間柄になりやすい、いわばお友達コミュニティです。この写真は #kosen10s LT 09の時の懇親会。打ち解けあってる友人同士が集まってこれからワイワイする様子が見て取れるような写真を選びました。撮ったのは e10dokup。いい写真です。

この写真に笑顔が写っています。テクい話ですが人の笑顔の写真を何かの紹介時に使うと人の脳は「この人はこれに関わったことで幸せなんだ!」と理解する、というデザイン心理学的な通説があります。そういった意味でもこの写真はいいですよね。みんないい顔!

10sの大切にする3つの「すき」

ファーストビューではデザインの心理学を活かして感覚に訴えかけました。次は伝えたいことをよく理解してもらうフェーズに入っていきます。

そして僕が考える、最も説明したいことがこのセクション。

そもそもぼくらはなぜ kosen10s の活動にコミットするのでしょう?世界をよくするわけでもなく、お金を稼ぐわけでもなく、名前を売るためでもない。シンプルに「すきだから」という動機だと自分は思います。

その核を説明しなければなりません。みんな kosen10s をなぜ好きなのでしょう?

そこで比較対象として、ぼくがもう1つ好きなコミュニティである kosenconf と比較をしてみます。

kosenconf との共通点

この二つの共通点は書いて字の通り「高専」です。高専界隈という言葉を使う人は一定数いると思いますが、両者とも高専界隈というべきコミュニティです。では高専界隈にいるコミュニティの何がいいのか。自分はほぼ間違いなく自分の「Tech」を語りあえるからだと思います。

Techという言葉を使いましたが、重要なのは工業技術やエンジニアリング、プログラミングの話だけではないこと。もちろんそういう要素もTechの一部だとおもいます。

しかし僕らが語る事ってそれだけではなくて。例えば話術、マネージメント術なんかもいわゆる技術。英語だと「テクニカル」というと自然かとおもいます。それも含めて、Technology + Technique で今回はTechという要素を一つ挙げています。

kosenconf との違い

対象的に残り二つは kosenconf との違いに目を向けています。

別にこの2つがkosenconfにはない!とは言いませんが、kosen10sの方がやっぱり持ち合わせてるのではないかと自分は思います。

一つは「わいわい」盛り上がることです。やはり境遇が似ていますし多くの話題でお互いの理解を得られることが多いです。高専で、しかもジェネレーションギャップがないので、そりゃ盛り上がりますとも。

もう一つは「ぶっちゃけ」素の自分を出すことです。kosen10sのSlackでは、大抵の発言に制限をかけていません。いわゆる公共の福祉系の発言(下ネタ・愚痴など)も一定の暗黙の了解の元認めています。

それは、お互いにコミュニケーションによる殴り合いがしたいのではなくて、双方のありのままを認め合うことを大切にしての措置です。恋バナもすれば愚痴も言う。インターネットにはかけないのに10sのみんなには言っても良いかな、という雰囲気を持つコミュニティになっています。

活動内容

上記の部分で心理的にも訴え自分たちの根本みたいな部分も伝えましたが、まだまだエモい要素ばかりだと思います。このあたりでほしいのは「具体性」かと思い、具体的なコンテンツを差し込みました。

kosen10s の中の人がそれぞれ好きなモノが並ぶこの活動内容は、これもまた僕らのコミュニティを理解してもらうのに大きく役立つコンテンツかと思います。


まとめ

今回は kosen10s.net の改修理由と新デザインの流れ、それぞれに込めた想いをざっくばらんに書きました。

もっといい形でまとめられると、kosen10sのみんなにとっても、またコミュニティ外で支えてくださる皆さんにとっても良いものになるかと思いますので、また今月中(今週中?)に書きます。笑

あと、Vue.jsをもうちょっとシッカリ理解して完成を目指します …

明日はわいわいた!!!!!!!!!!!!!!!!

愛するinvisionの話

denari01 Advent Calendar 8日目は予定を変更して突然invisionの紹介です。

本当は左右盲の話をしようとしたんですよ??笑

社内向けに紹介を上げようとしたのですが、これ社内向けにするメリットが少ないのでせっかくならブログに書こうと思って。

下記の意見は僕の個人的な意見・見解であり、事実を書き記したものではありません。 もちろん全文が虚構とはいいませんが、そこをご了承ください。

invisionとはどんなソフトウェアなのか

フラー社でも、副業のHxSでもちょくちょく使っているデザインツール。

フラー社ではあるプロダクトのプロトタイプを社内に披露するときに用いました。

一つのツールでデザインが一通り片付くツール。提供機能は下記

  • プロトタイプ
  • 簡単なファイル共有(sketchファイル共有・フォントファイル共有)
  • 画面にコメントを付ける機能
  • デザインのバージョン管理
  • デザイン駆動のプロジェクト管理

この度上記四機能とは別に、zeplinのような「いろんな長さや色を見れるinspect機能」がリリースされていたので軽くまとめてみます。

今回リリースされた新機能「inspect」について

この機能は比較対象としてはzeplinが筆頭に挙げられます。

zeplinと比較して困りそうな点は下記

  • Styleguide機能に相当する機能がない
  • 多分画面にタグ付けとかできない
  • コメントを付けるときに一回inspectモードからコメントモードへの切り替えが必要
    • 画面下部のコメントマークをクリックしてからコメントが残せるように

逆にメリットは、もちろん他の機能がたくさんあることと下記。

  • 画面左部にデザインファイルのレイヤー構造がそっくりそのまま出てくる

しかしこのメリットは正直そこまで重要でもないので、今のところinspect機能を単体で見たときにzeplinとの優位性は特にないというのが個人的意見ですね。

他の機能の紹介

せっかくなので軽く他の機能もまとめる。

prototype

比較対象として僕が紹介したいのはprott。日本製ですがこれが間違いなく今一番アツいツール。

invisionの優位な点

  • prototypeを作る上で細かいところに手が届く。prottにはない機能が数個ある。
  • prototypeにコメントを残すことができる。

prottの優位な点

  • prototype作成画面のインターフェースが使いやすい。
    • 特に遷移先の画面を選ぶのがinvisionより楽。
  • prott上でプロトタイプ(ワイヤフレーム)を作成することが可能
  • スマホからpaper prototypeをアップロードしたりできる
  • プロトタイプを作ったら勝手に画面遷移図ができる。

prottの画面遷移図機能は本当に凄い。あとワイアとかの低レベルプロトタイプを作ってビジネスが加速しそうですね。

自分は最初からSketchで作っちゃってドンドン完成度を上げる派なので重宝しないですが、prottぐらい手軽ならこのこだわりを捨ててもいいかも。

対象的にprototypeの細かさで言えばinvisionに軍配が上がるのも事実。一長一短ですよね〜

comment

比較対象とかは無いですね。そういえばprottってコメント機能あるんだっけ…有無がわからないです。

zeplinとinvisionにはありますよね。

zeplinのコメントは色が変えられて最高ですね。

history

バージョン管理ですね。Universionとかが挙げられると想います。

実はUniversionを使ったことがなくて恐縮です。コメント機能がすげえリッチなのと見た目がリッチなのは特筆できるかと。

バージョン管理ができるのはホントにうれしいですね。ロジカルに詰めるときに必要になります。

タスク管理

invisionはスクリーンをアップロードするとそれが上のような画面のカードの一枚に変わります。

非常に良いですね。タスクはどうしても企画・デザイン・・・とトップダウンに降ってくるものなので実際作成したスクリーンがカードになるアイディアは非常に合理的。

逆に言えばそこは弱点ではありますね。何でもかんでもinvisionでタスク管理できるわけではないです。

小規模チームでなんでもかんでも管理をやりたいならtrello。デザインに関するタスクだけを管理するならinvisionがいいのではないでしょうか。

まとめ

デザインをboostさせてくれるinvisionというツールは非常に素晴らしいですね。多機能のオールインワンツールの印象が強かったです。

適材適所にツールを使い分けるのも大切ですが、これを機会にinvisionを導入してデザイン以外のツールをさまよう時間を減らすのももいいかもしれません。

アイキャッチ画像がないのは時間がなかったからです。またこの記事は手直しするかも。

JSを使わずにブラウザ上で動くスライドを作る

この記事は「今年お世話になったCSS Advent Calendar」4日目の記事です。

3日目 : 今年お世話になったCSS Advent Calendar 2016 - Adventar
明日は登録者が今のところいないので登録しましょう。

CSSのGradientまわりは良い機能ですよね。クソみたいな画像リソースが減る最高の機能だと思います。


さて、突然ですがこちらを御覧ください。

f:id:denari01:20161204204637g:plain

こちらは、最近ではよく見るようになった、ブラウザ上で動くスライド資料になります。 しかしこちらのスライドは普通ではありません。

通常のブラウザ上のスライドは、JavaScriptでキー入力をハンドリングして次のページを表示していますよね。 しかしこちらのスライドではページ遷移にJavaScriptを使っていません。 JavaScriptがオフでも使えるブラウザ上スライド資料なのです。

実際の資料が下記リンク。まずはWebページをクリックして、キーボードの[tabキー]を押すと多分動きます。(変な設定とかプラグインが入ったブラウザだとダメかも??僕のChromeでしか動作検証していない)

http://denari.link/css_slide/
(数ヶ月前に行われた社内勉強会向けの資料のため、内容が一部変なものもあります。)

ちなみにこういう風に、スライドの端に(スクロールバーではない)白い枠線がついているスライドの場合は[Enterキー]を打鍵することで別タブにてリンクを開けるハズです。 f:id:denari01:20161204205814p:plain

ソースコードはこちら(docsがbuild後のファイル、srcがbuild前のファイルです。)

github.com

(お気づきの方もいるかもしれませんがソースコードを掲載している部分はJSが当たっています。そこはもう勘弁してください…笑)


動作原理

普通のブラウザ上で、[tab]キーを押すと、こういうふうな挙動でページ内のリンク(aタグ)を辿っていけますよね。

f:id:denari01:20161204204713g:plain

これを応用しています。

上記画面上で青くフォーカスされているaタグには :focus 擬似クラスが適用されます。

それを利用し、aタグの子要素として各スライドの1ページずつを作成して、:focusが付いたaタグの子要素のみを opacity: 0 に。他を opacity: 1 にしています。

スライドの1ページのテンプレはpugのmixinにして作成・管理しやすくしています。


感想

いや、本当にメリットがない。

時間をムダにするだけなので、普通にJS使えるブラウザ使ってください。くれぐれも真似しないように。

僕はもうちょっとだけ時間をムダにして、CSSで動くスライドを作るためのライブラリ的なものを作成しようかと思います。

準高専生、whywaitaとの出合い

f:id:denari01:20161203223000p:plain

この記事は whywaita Advent Calenar、あらため masawada 被害者の会 Advent Calendar の3日目の記事です。そう、masawadaさんは僕とwhywaitaくんの一つ上の年の電通大卒、今をときめくはてなのエンジニアなのですが…彼もまた、masawada Advent Calendarを毎年作っているのです。

それだけでなく彼は…

f:id:denari01:20161202162910p:plain

一人で全完する予定で居るようです

がんばれwhywaita!masawada先輩をみならって全完していこうな!!


昨日の記事をまねたクソジョークはさておき、今日はwhywaita所感を述べましょう。初めてwhywaitaに会ったのは2015/12/18の金曜日。電気通信大学構内で会いました。その日は高専カンファレンス1日前。そんなときに意気揚々とこちらに近づいてくる奴、一見して感じました。

f:id:denari01:20161203223002p:plain

聞いてみれば在学生とのことでした、それにしては id:marin72_com と仲がよく、あと何故か凄い親近感を得ました。

その日はなんか、適当に挨拶して、あと初対面なのに雑用を押し付けた事を覚えています。あの時の僕は冴えてた。笑 (ほんとうにあのときありがとう)

翌日、高専カンファレンスが開催されました。僕は運営でバタバタしていましたが、彼も企画に参加してくれてたのかな??

バタバタが一通り終わったのは懇親会でした。最初に声を欠けてくれたのは全然whywaitaというわけではなく、hogasくん( id:hogashi )という、whywaitaの後輩がやってきてくれました。

彼はなんだか僕のことをちょっと目をつけてくれてたらしく、割とすぐに話しかけてくれました。hogasくんに声をかけられたのは人生でも指折りでの嬉しさがありましたね。hogasくんもうすぐで20じゃね?飲みに行かねえと。

そうこうしてなんとなくhogasくんと話をし、また別の人と話をすると、今度はいつのまにやら電通大オタク集団に単騎乗り込みしてました。その集団はめっちゃオタクしていました。さっきまでめっちゃいい子に見えたhogasくんもこころなしかオタクに見えます。sukukyonはオタクでしかない。

そこに追々来たのがwhywaita。その時思いました。

f:id:denari01:20161203223005p:plain

聞いてみれば在学生とのことでした、たしかにsukukyonくんhogasくんなどの在学生とも仲よさげに話しています。

翌日、僕は朝からプレゼンで登壇していました。彼は僕と同じ時間帯で別の部屋にて登壇していたみたいです。彼はプレゼン中で僕の発表を紹介してくれてたみたいでした。それを知ったのは数ヶ月もあとの話でしたが、1年経ってしまうまえにこの場をかりてお礼します。本当にありがとう。


イベントはつつがなく終了しました。あの時会ったオタクたちとはまあSNSでたま〜に話す感じでした。whywaitaはオタクなのにアイコンがいいカンジで今でも時々びっくりします。

ある日、彼が主催するイベントである dentoo.lt (電通大関係者がLTをするLT会)があって、興味があってお邪魔させてもらいました。開会前、会場ではAdvent Calendar通り魔のmasawadaさんがDJっぽいことを軽くしていました。そして開会すると司会っぽい人が登壇します。その時僕は思いました。

f:id:denari01:20161203223028p:plain

聞いてみれば在学生とのことでした、でもdentoo.ltの主催が高専生なわけないじゃんね。

そして彼は登壇します。インフラやネットワーク周りの話をしている彼を見て僕はこれを思いました。

f:id:denari01:20161203223029p:plain

そして僕は彼のことを今でも「準高専生」と形容しています。いや、だって高専生じゃんこんなもん。高専以外にこんな生き物居ねえ。

つい先日、敬意を表して僕が主催のkosen10s LT#5 に参加をしてもらいました。何よりも彼が興味を持ってくれていたためです。

参加者と楽しそうに話をし、また登壇時も楽しそうにしてくれていて、呼んでよかったと思いました。周囲の反応もみんな仲良くしており、 kosen10sというコミュニティが、限定的なコミュニティであることの大きなデメリットを確認するまでに至りました。

彼は高専生ではないのだけれど、優秀で気さくで、あととてもいい人です。何故か常に笑顔だしね。そんな彼とは、今後もぜひ仲良くさせてもらいたいなあって、おもいました。

(今日の記事エモいね。笑)

最後に、kosen10s LT#5 に来てくれたときに彼に抱いた一番大きな感想を書くことで締めます。

f:id:denari01:20161203223030p:plain