でザイナーらしからぬ

でなりの雑記。ツイッターで済ませたくないこと書くとこ。

kosen10s LT 13 来てほしい…!!

f:id:denari01:20181015192220p:plain

ブログを久しぶりに書いています。 ナルシストを自称しなくなって2年近く経ったのでブログの名前変えました。

Q.さて前の名前は何だったでしょう。

kosen10s LT 13 来てほしい!

僕のことを知っている人ならご存知の方が圧倒的に多いと思いますが…

kosen10sとは、2010年に高専へ入学したOB・OGからなるコミュニティです。 普段の活動内容は Slack を使ったオンラインでの雑談・Tech雑談・お悩み相談です。

kosen10sの公式サイトはこちらから

kosen10sは現在ではSlack登録者が70名超・アクティブなユーザーが20〜30人ほどいる、立派なコミュニティです。 その70人の参加者を集めるきっかけになってきたのが、今回開催する「kosen10s LT」です。

多くのメンバーが kosen10s LT に来て「なんだこいつらおもしろ」って言って定着してくれてます。なんだこいつら。

また、過去12回毎回ハズレ無しで面白く、終わる頃には笑いすぎ + 情報が頭に入りすぎて疲れます。なんだこいつら。

なので、このブログを読んでいる方々にもぜひ、kosen10s LTへ参加してもらって、僕らの新しい・いい友だちになってほしいなと!

そこで、かるーく kosen10s LT について書こうかなと思います!

LTってどんなトークが聞けるの?

LT形式というのはLightning Talkの略。10分前後※のプレゼンテーションで好きなことを話すというイベントのことを指します。

kosen10s LTでは全体的に下記のような話が多いですね〜

  • プログラミング・電子工作あたりの技術にかんするお話
  • お仕事楽しい的なお話・転職のお話
  • オレの好きなもん紹介して何が悪いんじゃ? 的な話
    • 好きなものの種類に関しては多種多様。アニメからコーヒーまで
  • ギャグ枠
  • 個人的な悩みについてディスカッションする話
  • ここでしか聞けないたのしいはなし (意味深)

上記のようなトークでも、上記以外のトークでも、本当にウェルカム。とにかく喋りたいことを喋る感じのスタンスでイベントづくりをしています。

おしゃべりクソイベントにしていきたい。

※ kosen10s LTでは、LTといいつつ時間制限を儲けていません。 過去に30分話したやつがいます。 それがまた面白かったので今でも時間制限をつけてません。笑

どんなヒトが参加するの?

メインになるのは情報系ですが、情報系に限らず来てくれてます。マジで情報系以外も来てほしいんじゃ… ※ 情報系のヒトもちゃんと来てほしい。いつも来てくれてマジありがとうなお前ら…

普段はダーツやったり、麻雀やったり、飲みに行ったり。最近だとリアル脱出ゲームにもちょくちょく行ったり。

Slack上ではマジで普通の雑談と、恋バナは基本 燃える 白熱するのと、オタクトークは基本的には優しいオタクが多くて徳を分け合える雰囲気がある感じです。

普通に高専卒の23,4歳が、会話を、イベントを、楽しんでる感じです。

まとめ

kosen10s LTは高専2010年入学のOB・OGなら誰でも参加できる楽しいおしゃべりクソイベントです。ぜひとも皆さんのご参加お待ちしてます!

イベント参加登録はこちらから!!!!

kosen10s.connpass.com

[再]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で動くスライドを作るためのライブラリ的なものを作成しようかと思います。