読者です 読者をやめる 読者になる 読者になる

Reactのハンズオン2回・3回をやってました

こんにちは、むろです。 1回目の記事からちょっと経ってしまったのですが、Reactのハンズオン2・3回を開催しました。

1回目の様子はこちらです。

f:id:murokaco:20161114124144j:plain

第2回 Reactハンズオン 初等部編 - connpass

第3回 Reactハンズオン 初等部編 - connpass

月1開催×3回を1セットにする予定で、当初決めたゴール

ハンズオンに2、3回参加することで「わたし、React チョットデキル」を名乗れることができるレベルの知識を習得できるとこまで。

は、わたし自身はWebデザイナーとしてコーディングしてくにはまあまあチョットデキルレベルまで理解できたのでは!と思ってます。

実際やったことまとめ

1回目

  • Facebookのいいねボタンを作りながら、Reactにおける component props を理解する

2回目

3回目

  • react-router を使ってSPAの概念とroutingについて理解する

です。 実際、ここからもう少し理解できていないと実務レベルには至らないと思うのですが、ここからの続きはいつか中級編としてやろうと思ってます。

当日の様子

あつこさんがtoggetterでまとめてくださってた。ありがたやーー( ˘ω˘)人

第2回 Reactハンズオン 初等部編 - Togetterまとめ

第3回 Reactハンズオン 初等部編 - Togetterまとめ

感想

  • 3回とも出席してくださったかたがいて嬉しかった。
  • 2回目開催直前にわたしのMBPがお亡くなりになられたので、当日はPCナシで参加した(途中何度か「ハンズオンとは…」となった)の、今年一番の意識の高さだった。
  • 2回目ハンズオン何やるかMTGを寝坊による欠席をかまし、おおき・もろみーさんに迷惑かけました。すみません。。
  • 当然当日も若干遅刻した。すみません。。

ありがとうございました

メンター(おおきさん・もろみーさん)、イベントページようのバナー作成(あつこさん)、会場提供(DogHuggy社きむらさん)、チューター( へるつくん、ようちゃんさん、さくにょんさん、ゆーたまさん、えるきちさん、背さん、なゆたそ、みさとさん、るみちゃん、ねもとさん ) みなさんのおかげでReactと仲良くなれそうです!ありがとうございました!!!!

今後のこと

また同じような内容で初級編を何回かやってみつつ、中級編(fluxとか…?)をやってみようかなと思ってます。

というわけで、会場提供、スポンサーになってくださる御社を募集しています!!!!!

UXデザイン勉強会を主催しました

こんにちは、むろです。先週またUXデザイン勉強会(フロントエンドエンジニア向け)を主催しました。 前回のReactハンズオンと2週連続で主催してて、意識の高さがだいぶキショイ感じですみません。

f:id:murokaco:20160816132715j:plain またまた麦わら帽子で猫背なのがわたしです。

やることになった経緯

かけこみ寺内で「UXってみんなどうしてるの(どうやって勉強してるの)」というのが話題にあがったり、UXの本の読書会やろう機運が高まってた時に id:kimuyu に富樫さんをご紹介いただいたのがきっかけです。

UXデザインの勉強会はいろいろ開催されてますが、「フロントエンドエンジニアとしてUXデザインにどう関わっていくか」をテーマにした勉強会は少ないように感じたので、あくまでフロントエンドエンジニア向けとして行いました。

今回はRectハンズオンの時と違って、わたしは参加者ではなく運営としてイベントに携わりました。

当日までにやったこと

富樫さんと id:kimuyu 、わたしの3人でMTGし、エンジニアとして開発に能動的に提案できるひとになるにはどうしたらいいのかをベースに富樫さんにカリキュラムを考えてもらうことにしました。

当初は「UXデザインとは…」を説明してもらってから何かしらのテーマをおいてワークショップにしようと考えてたのですが、富樫さんから「UXデザインとはどういうものか自体を自分から考え、意識できる姿勢を持たせないとだめだ」というありがたいご意見を頂いたので、UXデザインをテーマに参加者同士で経験を語りつつ一緒にどうしたらいいか考えていくというワークショップのスタイルをとることにして、全体の流れとテーマの粒度について相談し、後日富樫さんにスライドを作っていただきました。

今回のゴール

フロントエンドエンジニアとして開発段階でUXを主観に持ちつつ、能動的に意見を述べる・提案できるちからを持つひとの育成、なのかな…(揺らぎ)

PM、デザイナー、エンジニアが建設的に意見を出しあいながらワイヤーひくぐらいの感覚になるべきだよねーっていうのが富樫さんとのMTGでたどり着いた意見です。

当日の様子

初対面同士でチームを組まされてどこまで自分の話しをできるのか…というのが懸念点としてあったので、

  • チーム構成(3人で1チームです)として、チームに1人は 会話をリードできそうなひと を置くようにする
  • 会場に入ってきた方にゆるく声をかける(普段お仕事なにされてるんすかーぐらいの感じで…)

とかの働きかけをしました(主催ヅラ)。

みんながUXデザインについて学んでいる間に、わたしはカクヤスの注文フローのUXを確認したり、会場の電気を点けたり消したり(電源スイッチのUXの確認)していました。

主催やってみた感想

  • 今回も参加希望者30人に対して当日の参加者10人強だった。当日キャンセルぐぬぬ

得た知見

  • 主催者はどんなに体調が万全に不良だったとしても当日キャンセルできない(運営複数人で回す体制づくりが必要)

今後の予定

次回は9/24に開催の予定です。ご都合あえばご参加ください(当日キャンセルゆるさんぞ)

Reactハンズオンを主催しました

こんにちは、むろです。 先日、Reactハンズオンという勉強会を開催しました。 f:id:murokaco:20160808192301j:plain

やることになった経緯

「デザイナーだから…」を言い訳にしてReact書かない(具体的に言うと、JSXは書くけどpropsとかstateとかはエンジニアさんにお任せする)という仕事スタイルに限界を感じていたタイミングで、実務でReact経験があって教えてくれそうなひと( おおきさん・もろみーさん )を見つけることが出来たからです。

「わたしにReact教えてください。あ、ていうかせっかくなのでついでに他にも教わりたい人を呼びましょうか、20人ぐらい。」

という感じです。

当日までにやったこと

あくまで、わたしも生徒の気持ちなので当日まではあえて予習していかないようにしていました。

なので、準備はイベントを実施するためのいろいろです。 これまで勉強会は参加するサイドだったのでどんなものを準備したらいいのかわからなくて大変でした。

運営の準備いろいろ

ゴールを決める

どういう人を対象に、どこまで教えるかをきめました。

  • どういう人: Webデザイナー(html , css はかける、つまりわたしぐらい)
  • どこまで教えるか: ハンズオンに2、3回参加することで「わたし、React チョットデキル」を名乗れることができるレベルの知識を習得できるとこまで。

あと、

  • 「チョットデキル」をどこまで設定するか
  • どういう構成で理解してってもらうか

とかはメンターの2人と相談してきめました(具体的には flux どうする?開発環境の説明どこまでする?とかとか)。

開催場所を探す

生徒20人、メンター2人、チューター5人、スタッフ2人を収容できる場所として、いつももくもく会でお借りしてる CyberAgentVentures東京オフィス さんをお借りしました。

\きむらさん、いつもありがとー/

運営を手伝ってくれるひとを探す

  • メンター: 2人
  • チューター: 5人ぐらい
  • スタッフ: 2人(受付、懇親会のあれこれを手配してくれる人)

を、もくもく会のSlackや各SNSで募ったり、個人的に「この人ならReactの簡単な質問に答えられるのでは」というひとにお願いしました。

チューターは生徒4人に対して1人の想定です。

具体的な流れを決める

メンターの2人と、どちらがどこまで説明するかの役割を決めたりとかで計2回ぐらいMTGしました。 その時の様子がこちらです。

出会い系で出会うのもなかなか大変なようです。

当日の様子

こんな感じでした。

右のほうにいる麦わら帽子の猫背がわたし。 f:id:murokaco:20160808201027p:plain

↑あつこさんの写真を拝借しました( ˘ω˘)人

f:id:murokaco:20160808201110j:plain

わたしが理解できている様子

開発環境を構築してReactをローカルで動かすことができた

hoverしてる状態を state に保持させてcssで見た目を操作する

props に値をいれとく、クリックで state を変更する

上記を

Home · front-temple/react-handson_vol01 Wiki · GitHub

↑を参照しつつ、メンターの2人に一行ずつ説明してもらいながら実際に写経していく、というのをやりました。

参加してみた感想

props とか state とかよくわからないなあ」から「隣にいる人に props について説明できる」ようになってて、昨日までのわたしとは違うぜ!という感じがあった。良かった。

主催やってみた感想

  • 参加希望者がmaxで60人もいたのに当日キャンセルなどで実際の参加者は10人ぐらいだった。悲しい。
  • 想定していた時間通りにはじめられて、時間通りに終わることができた。良かった。
  • デザイナーを主な対象にしていたはずだったんだけど、実際参加した方8割はエンジニアさんだった。何故だ。

以上です。運営をお手伝いしてくださったみなさん、ありがとうございましたーーー( ˘ω˘)人 =3

次回もがんばるぞ。

追記

参加希望者がmaxで60人もいたのに当日キャンセルなどで実際の参加者は10人ぐらいだった。悲しい。

こちらの募集人数としては20人だったので、50人がキャンセルしたのではなく、 実質の当日キャンセルは10人ぐらいいたという意味です。 まぎらわしくてすみません囧

SVG Sprite を svgeez で

こんにちは、むろです。

最近ようやく業務で SVG を扱えるようになってきたので SVG をSprite化してくれる svgeez というgemを使ってみました。 次に使うときに忘れないようにメモ。

svgを用意する

svgeezはsvgo(svgの不要な部分をいい感じに削除したりなんだりで軽くしてくれるやつです)を使ったbuildもしてくれるみたい(なんというジェントル)なので、 SVGイラレから何も考えずに吐き出したものを使ってみます。

ちなみに今回わたしが用意したのは f:id:murokaco:20160704133751p:plain こんな感じのやつです。

SVGの中身はこちら。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
     y="0px" width="140px" height="140px" viewBox="0 0 140 140" style="enable-background:new 0 0 140 140;" xml:space="preserve">
<polygon style="fill:#7BD3FF;stroke:#00537C;stroke-width:10;stroke-miterlimit:10;" points="112.076,103.874 78.432,95.029 
    52.073,117.729 50.089,82.999 20.354,64.944 52.771,52.325 60.754,18.466 82.773,45.397 117.441,42.526 98.632,71.79 "/>
</svg>

人様の前に出すには恥ずかしい内容(特にid="レイヤー_1")なのは目を伏せて。

gemをいれる

Gemfileに以下を記述します

gem 'svgeez'

このあと黒い画面でbundle install をターン!

SVGSpriteをBuildしてみる

assets配下に先ほど作ったSVGをおきます。 (今回わたしはapp/assets/images/icons/SVGを置いて、 app/assets/images/icons.svg にSpriteを作ってみます)

黒い画面で下記のコマンドをターン!

bundle exec svgeez build --source app/assets/images/icons  --destination app/assets/images/icons.svg --with-svgo

すると、app/assets/images/icons.svg にSpriteが生成されます。やったね!

実際に表示してみる

body内に下記を記述する

= raw Rails.application.assets.find_asset('icons.svg')

※slimで書いてます。

SVGを表示したいところに下記を記述する

svg
  use xlink:href="#icons-star"

どんなやつができるのか

<svg id="icons" style="display: none;" version="1.1"><symbol id="icons-star" viewBox="0 0 140 140">
<polygon style="fill:#7BD3FF;stroke:#00537C;stroke-width:10;stroke-miterlimit:10;" points="112.076,103.874 78.432,95.029 
    52.073,117.729 50.089,82.999 20.354,64.944 52.771,52.325 60.754,18.466 82.773,45.397 117.441,42.526 98.632,71.79 "/>
</symbol></svg>

こんなんでした。 見られてだいぶ恥ずかしい部分(xml宣言とかイラレがgenerateしてるとかidがレイヤー_1とか)がごっそり消えててありがたやーーー( ˘ω˘)人

気をつける点

  • 書き忘れてたけど、Railsです。
  • symbolに謎のprefixがつく(今回のは icons- )

ぐらいです。以上です。

追記

質問で、

= raw Rails.application.assets.find_asset('icons.svg')

は何を吐き出すのかと聞かれたのですが、確認したらインラインsvgでした(objectやimageタグではない)。 asachun、ご質問ありがとーーー( ˘ω˘)人

もくもく会に自ら駆け込んでいる日々

以前のブログで書いたもくもく会、地味ながら続いていて次で8回目です。

「むろのかけこみ寺、どっちかというとむろが駆け込んでいるサイドだ」と揶揄されても 「そうですね…」としか言えないぐらい、自分自身がとても助けられています。

f:id:murokaco:20160417205151p:plain

フロントエンドを謳いながら質問内容がGit(というかGithub)なのは気にしないで!!!

cなんとかeさんいつもありがとうございますーーーー( ˘ω˘)人

たまに、レベル高そうと言われることがあるのですが、主催がこのレベルなのでお気軽にどうぞご参加ください。 Slackはこちらから。

Misocaさんのアンバサダーになっていました

f:id:murokaco:20160222164023j:plain

どうも、murokaco です。 タイトルのままなんですが、少し前から請求書作成サービス「Misoca(ミソカ)」さんの アンバサダー をやらせていただいてます。

というのを、弥生株式会社による株式会社Misocaの全株式取得についてという発表に便乗(…?)して書いてみます。 (Misocaさん、この度はおめでとうございました!!)

Misoca とは

オンラインで見積書・納品書・請求書が作成、送付(メール、FAX、郵送)できてしまうサービスです。

フリーランスになった時、machidaさんから「請求書作るのにちょう便利なサービスなんですよ」と教えて頂いたのがキッカケで、それからずっとちょう便利なので使い続けています。

エクセルでテンプレートを作成、毎月コピーしてpdfにしたりなんかして、それをコンビニでプリントアウトして切手貼って…なんて時代を知らずに生きてこれたのはMisocaさん(と存在を教えてくださったmachidaさん)のおかげです( ˘ω˘)人

アンバサダーとは

  • 英語で「大使」の意味です。

Misocaさんの「アンバサダーなんです」って言う時は「大使なんです」といっても伝わりづらい(で、大使って何?みたいになる)ので、「社外の広報役のようなものをやらせてもらってます」と説明してます。

なぜわたしがアンバサダーになれたのかは不明なんですが、Misocaは本当に大好きなサービスだったので、お声がけ頂いた時はとても嬉しかったです。 微力ながら、Misocaさんのサービスについて周りに宣伝していっています。

アンバサダーって具体的に何してるの(何ができるの)?

Misocaアンバサダー専用(?)の名刺や付箋、ステッカーなどをくばる権利を得られる

名刺・ステッカーはともかく、付箋はシャインの方も配る権利がない(本当かどうかはわからないですが)とのことなので、配るときに「国内でも数人しか配ることが出来ないものをお配りします」という体で配っています。

名刺もスケスケでオシャレなので、自慢しつつサービスを説明しつつ配っています(忙しい)。 たまに「わたしも使ってるー」という方から「良いサービスだよね〜」って言われるときは中の人でもないのに嬉しいきもちになります( ˘ω˘)♪

Misocaの未実装機能を先行公開してもらえる

守秘義務下なのでどんな機能なのかは口外できませんが、実装前の機能をこっそり使わせてもらえます。

便利になっていくMisocaを事前に知ることができる特別感!

Misocaへの要望を中の人に直接お伝えする機会をもらえる

実際、こちらの要望がどこまで受け入れてもらえるかについては内容次第だと思いますが、 広報の方や、開発の方とオンラインMTGやアンバサダーMeetUpで「こうなったらいいなー」というお話しをしたりしています。

といっても、わたしはいまのMisocaに特に不足を感じていないので、言うとしても「ずっと変わらないでいて」的な、何かの歌詞みたいなことしか言ってなかったりします。

Misoca のユーザーとしてMisocaの好きなとこ

UIがシンプルでわかりやすい

毎月機能が追加・刷新されてるので、それに伴ってUIもごちゃついてくるのが普通のはずなのに、MisocaはいつまでたってもシンプルでわかりやすいUIを保ったままです。 ヘルプを見なくても使えるサービスって素晴らしい!!!!

出先でも請求書が作成・送付できる

フリーランスで主に常駐するスタイルなので、他社から請求書に関して問い合わせがきてもすぐに出先から確認・作成・送付できます。ありがたや〜

ちょっと不安になるぐらい安い

下手すると「今月もまた無料で使えてしまった…」となるぐらい、Misocaの料金体系はフリーランスに優しいです。

中の人に美味しいものを食べ続けていて欲しいサイドとしては申し訳ない気持ちになるぐらいです。

さいごに

ちょう便利なMisocaはこちらです。

app.misoca.jp

フロントエンドのもくもく会をはじめてみた

f:id:murokaco:20160128141045p:plain

フロントエンドかけこみ寺というコミュニティでもくもく会をやってくことになり、 1/27に第1回をおこないました!!!!

きっかけ

ひとりでJSもくもく読んだり書いたりしてるだけだと寂しいのと、 他人の目がないと自分に甘えちゃって何も進まない自堕落な性格なので 「どこかもくもく会に参加したいなー」とツイートしたところ、 dkimura に「やるならうちのオフィス貸しますよ〜」とお声がけいただいた(ありがたや〜)のがきっかけです。

結局、もくもく会参加を飛び越えていきなり運営することになり、不安要素だらけなのですが 継続できるようにがんばりたいです。

目的

わたし自身と、参加してくださってるみなさんの技術力(主にフロントエンド力)の向上です。

技術をフロントエンドに限定していますが、参加されてる方の職種は絞らないつもりです。

主な活動

Slackでの交流を主として、隔週水曜にもくもく会を開催しています。

Slackでは、個々でチャンネルを作って分報を流すというのをやっています。

何気ないつぶやきに誰かが反応(助言)してくれて、嬉しいし問題解決も出来て良い感じです。

f:id:murokaco:20160128142300p:plain

あさちゅん、いつも色々教えてくれてありがとうーーーーーーーー( ˘ω˘)人

Slackだけの参加も大歓迎なので、ご興味あれば是非ご参加ください!

https://frontend-temple-slack-invite.herokuapp.com/

どうでもいいけど名前の由来

もくもく会用のSlackに参加してくれた方と第0回として飲み会をやったときに もくもく会に何を求めて参加するかを聞いたところ

「何か困ったことがあった時に聞きにいけるところが欲しい。かけこみ寺的な!」

「わかる!そういうところ欲しい!フロントエンドで!」

「かけこみ寺いいね」

「名前それで行こう!」

「ちょっとダサい感じが逆にいいね」

となり、フロントエンドかけこみ寺というちょっとダサい名前になりました。

翌日、「昨日は勢いで名前決めちゃったけど冷静になってみると凄いダサイ名前…!!!!」ってなりました。

お酒ってほんと恐ろしい。

第1回の感想と反省

  • 電車を乗り間違えて遅刻した
  • 事前準備をdkimuraに頼りすぎた
  • 自己紹介用リポジトリを用意したのはいいけど手順書を作ってなかったせいで主にGit講習会やってた感じになった
  • 身内しか集まらないかな…と思っていたけどconnpass, dots 経由で存在を知り、参加してくださった方がいた(嬉しい)
  • 場所をご提供くださったフィードフォースさんのブランディング(とリクルーティング)への貢献度が低い感じした…
  • 終わった後の飲み会のこと考えてなかった
  • お酒一杯だけで終わるはずがなかった