Sketchのもくもく・もぐもぐ会をやった

Sketchのもくもく・もぐもぐ会をやった

@atsuco氏と、Sketch上達したいねという話しになってもくもく会をやりました。

参加者(運営除く)が当日キャンセルなどでまさかの0人だった。

草生えた。けれど、これもあとになったらいい思い出(といっても記事を書いた今まだ開催中なので傷は癒えてません)。

f:id:murokaco:20180527175528p:plain

けど、3人でキャッキャしながらもくもく・もぐもぐしました。 ちなみに私はSketchは業務で使ってるけどプラグインなどはほとんど入れていない状態だったので プラグインをガンガン入れて使ってみる、というのをひたすら(食べながら)やりました。

おいしかったです!

入れたSketchプラグイン

*chain: 色を置換する

** https://lalomrtnz.github.io/Chain/

  • sketch-palettes: カラーパレットを共有保存、読み込み

** https://github.com/andrewfiorillo/sketch-palettes

  • paddy: グループレイヤーのpaddingや空白を調整

** https://medium.com/sketch-app-sources/paddy-buttons-a-really-simple-solution-to-a-problem-we-all-have-with-those-little-rascals-ca0eceee1766

  • Social Artboards: 各SNS用のアートボードを一括作成

** https://github.com/herrhelms/social-artboards-sketch

  • craft

** https://www.invisionapp.com/craft

  • 今回はいれない(画像作るときにあると便利そうだけど特に今必要な感じでもない)

http://sureskumar.com/looper/ https://github.com/avadhbsd/IconFlower

入れたけどアンインストールしたSketchプラグイン

  • Measure

** http://utom.design/measure/

その他、Sketchの学び

  • Make Grid 、Share Styleの存在(Sketchにもともとある機能だけど知らなかった…)

第2回には、参加者がいるといいなーと思います。

開発環境構築の必要なし!思い立ったら1分で React + Material-UI を使う手順

お久しぶりです、むろです。 最近仕事で React 案件が増えてきたので、コードでプロトタイプを作る時にあると嬉しいライブラリの Material UI を使ってみることにしました。 というわけで、使うまでの手順をまとめます。

codesandbox と Material-UI を使う

npmとかよくわからない…いちから勉強する時間ない…けどちょっとだけ React を書いてみたい(Material-UI 使ってみたい)…という、 めんどくさがりなんだけど好奇心は旺盛な、私とあなたのための情報です。

codesandbox とは

オンラインで使える開発環境(サンドボックス)です。

codesandbox

Material-UI とは

Googleのデザインガイドライン(マテリアルデザイン)にそったデザインコンポーネントが揃ったライブラリです。 Material-UI

これを使うだけでマテリアルデザインなUIが簡単に実装できてしまいます! 丸美屋の麻婆豆腐の素みたいなやつです。

codesandboxの使い方

Sandbox(react)を作成する

右上のナビ Creat sandboxReact f:id:murokaco:20180331190305p:plain (Topページ左下のボタンがReactなら、そこから作成でも。テキストが Anguler になっている場合だと Anguler の Sandbox を作ることになるので注意です)

Sandbox で Material UI を使えるようにする

f:id:murokaco:20180331190314p:plain

左下の DependenciesAdd Dependencie を押下。 f:id:murokaco:20180331190329p:plain

出てきたポップアップに material-ui を入力して、出てきた @material-ui/core を選択する。 f:id:murokaco:20180523211544p:plain

これでMaterial UI を使えるようになりました!

表示してみる

index.js を、Material UI の Usage にならって書き換える f:id:murokaco:20180523215236p:plain

(真ん中の列にコード、左側の列にブラウザでの表示がでます)

簡単ですが、以上です! あとは ドキュメントを参考にしながら色を変えたり大きさを変えたりして楽しみましょう٩( 'ω' )و

React導入事例のイベントを開催しました。

frontend-temple.connpass.com

 

先週、また React.js の勉強会やりました。 今回はハンズオンではなく Misoca さんの導入事例を聞こうって感じのやつで、ユーザー参加型じゃないのは初です。

 

前回のブログの記事見てると flux とか考えてたようですが、結局今回は主に Redux についてになりました。

  Misoca の 松本さんから「勉強会の会場として弥生さんを借りられるかもです」というお話しをいただき、ご紹介いただきました。

これまでの会場は、もくもく会に参加してくださった方や知り合いの方からご提供いただいてたんですが、今回はご紹介経由なので「いっけなーい!忘れてた☆ミ」が出来ないので気を使ってたわりには「あー、そういえば考えてなかったー…」ってことが多かったです。弥生株式会社の星さん・中山さん並びにお手伝いしてくれたみなさんご迷惑おかけしました囧rz

というわけで、個人的メモ

 

こちらから確認する事項

有無によってこちらの必要物が変わるもの

  • Wi-Fi、電源が利用可能かどうか
  • プロジェクター、マイクが借りられるかどうか
  • 飲食可能かどうか(アルコールはOKなのか)  

集合・解散時間、スタッフの人数に関わるもの

  • 会場設営準備に必要なものは何か(どのぐらいかかるか)
  • 開始・終了可能な時刻
  • ビルの入り方について(セキュリティカードが必要なのか・立ち会う人員の必要性)
  • 受付を設置するスペースがあるかどうか  

こちらから事前に伝えるべきもの

  • イベントのテーマ
  • 過去のイベント実績
  • イベントの開始・終了時間と、スタッフの集合・解散時間
  • 参加予定人数(今回はイベントページで40人募集してたけど、キャンセル見込みで着地30人前後の予定だった、とか)
  • スタッフの人数とどこまでやる予定でいるのか(会場設営・後片付け、受付はこちらでやります、とか)
  • こちらから準備するもの(懇親会用の紙コップ・箸・ゴミ袋とか、HDMIにつなぐやつとか)
  • 当日連絡がつく携帯番号

結構漏れが多かったので次回から気をつけようと思います。

感想

よかったこと

  • これまでやってたハンズオン(初心者向け)に参加して下さった方が今回のにも参加してくれていた  - 中には仕事で React.js を使っている方もいた!
  • 懇親会参加枠を設けたら、これまでとくらべて参加率が増えた!やったね!
  • 開催直前に司会役を押し付けることができた(takanorip いつも無茶ぶりを受け止めてくれてありがとう)
  • ピザの到着が遅くなるという不測の事態に、適当にテーマを見つけながらディスカッションすることが出来る、merotan・takanorip・erukiti・khrtz の機転の良さがあってよかった(わたしにはない)

残念だったこと

  • 懇親会の手配が終わった段階で懇親会参加キャンセルが出た。。(受付時にキャンセルしても返金できませんって言うべきだった)
  • 会場提供枠LT中に帰っちゃう人がいた(LTのタイミングを中盤にするのがいいのかな)
  • わたしが懇親会の手配を担当してしまったので、開催中ほとんどそれに追われてしまって全体が見れてなかった。
  • LT枠で参加してくれた nabepon さんとお話しできなかった…

最後に

会場をご提供くださった弥生株式会社さま(星さま、中山さま)(会場だけでなく、弥生水やお菓子のご提供もありがとうございました!!!)、 お手伝いしてくれた merotan, takanorip, erukiti, khrz, lkjsdjaf 、弥生さんとお繋くださった松本さん、みなさんのおかげで今回も楽しくイベントできました。ありがとうございました!!!!

Reactの勉強会、何回かやってきてようやくコツがつかめてきた感じなので、これからもテーマを変えつつやっていきたいなと思ってます。

というわけで、これからも会場ご提供くださる御社とお手伝いしてくれるあなたの善意をお待ちしております!!!

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、ご質問ありがとーーー( ˘ω˘)人