今イチオシのReact向けUIキットはchakra-uiだよというお話

agrinote insideで発表した内容をブログ向けにリライトしました。なのでブログっぽい口調ではありません

最初に紹介リンク

これね
Chakra-UI

昔から色々あるやつ

  • Bootstrap
    • jQueryだった時代にはコレで良かった
  • Material-ui
    • 部品としてはコレでいいけど、レイアウト的な要素が使いにくい
    • マテリアルっぽくなる

Typescript + React + StyledComponent(Emotion) が使いたい

👇
Smooth-ui

良かった。

  • Emotionなのでコレ入れておけば細かいデザインもできる
  • Styled Systemを取り入れている
    • 例えば、m={4}でマージン16pxを表現。mt={2}でマージン8pxを表現
      • この比率はデフォルト値であり、それすら変えられる
  • Typescript対応を有志がコミットしていた

でも

  • 作者がTypescript対応を諦めた。
  • Docsも壊れている

もう使い物になりません。



次の候補(2020年5月調べ)

Chakra-UI

GUI組み立てツールがあるのが良い

openchakra

  • 実は無いパーツとかもあったりはするのだが。。

本当はもっと楽したい

XDでプロトタイプ作ったらそれをReactとして出力したいけど、コンポーネントはこれらを使うとか。

プロダクトマネージャーカンファレンス2019の内容、個人まとめ

 

プロダクトマネージャーカンファレンス2019行ってきました!

 

すごい分量のまとめをしました。

ツイッターだと永続性がないので、参照されにくそうだし、アクセス解析できないので、ブログポストとしてリンクの形式を取ってます。

 

https://scrapbox.io/sakapun/pmconf2019

 

PdMとPjMの違いが明確になり、色々な手法を集中して学べてとても良かったです!

 

とある男性エンジニアのダイエット方法

とある男性エンジニアのダイエット方法

TL;DR

  • 男性用減量アプリの上級で筋トレしろ
  • MyFitnessPalを始めろ。思った以上にカロリー制限をしなきゃいけないことに気づけ
  • 体重を毎朝音声で記録しろ。音声アシスタント → ifttt → Fitbitアプリ
  • スマートウォッチと共に走れ。思ったより走らないとカロリー消費しないぞ

解説

体重を減らしたいと本気で思って調べていくと結局重要な要素は

  • カロリー制限
  • 運動
  • 生活習慣
  • 記録する

という解説にたどり着くのではないか。

結局、これらを実践したまでである。

筋トレ

男性用減量アプリの上級を初めて20日が過ぎた。

適度な量の筋トレを20分ぐらいでシュッとできて良い。

選んだ基準はGoogle Playで評価が高かった上のやつで男性をターゲットにしていたから。

上の方から良さそうなのを適当に選んだ。でも、これで十分すぎるぐらい良かった。

食事制限

MyFitnessPalはUNDER ARMOURの食事制限サポートアプリである。

他の健康アプリ連携を試していたなかでこれも入れることにしたのだが、初期設定で衝撃を受けた。

毎週0.5kgを落とす設定にすると、食べていい量が1500kcalと推定されたのだ。

かなり少なく思えるこの数値を知れたのが良かった。

今まで好きなように食べて痩せたいと思っていたけど、そんなに甘くないことを知った。

体重の記録

毎日入力するのがめんどくさい。

今はスマホと連動している体重計もあるので、お金に余裕があるならそういう機種を買えばよいだろう。

でも買わずに工夫でなんとかしたかったので、音声入力できるようにした。

毎日の入力がすごく簡単。

入力したらグラフ化もしたかったので、それができるアプリの中でFitbitを選んだ。

MyFitnessPalと連携できたのもポイント

走れ!

筋トレだけで運動が足りる?

いやいや、そんなことはない。

運動するのだ!

走れば痩せる!

けど、5km走っても30gしか脂肪が落ちないらしい。

少しずつでも走れば健康的になるし、痩せることに繋がる。

今は調子に乗って15km走ったら足が痛くなったから最初のうちはやりすぎ注意。

ペースを測るのに家にスマートウォッチがあったので活用している。

ちなみに嫁のお下がりのGramin Foreathrete 230。

あるとないとでは全然違う。めっちゃ便利。

他のアプリで代用してもいいと思うが、走ってる最中にペースを見れるから重宝している。

体重が落ち始めるまで

脂肪が燃える体になるまで、なかなか体重の変化がみられなかった。

1週間~2週間は燃えないからそんなに変わることがないかもしれない。

一応、カロリー制限を気にした時点で、なるべく糖質を取らないようにも気を使うようになった。

あとから考えると大正解で、燃える体を作るには糖質をへらすこと、やはり重要だと思う。

ただし、そこまでストイックにやってるわけでなく、ご飯の量を減らしたり、プチ糖質制限ぐらいの気持ちで全然良いと思う

経過

走る量と運動する量が結構多いので、68kgから65kgの3kg減まで来た。

毎週1kgぐらい燃える体になってからはちゃんと落ちている。

アプリを駆使して痩せたという記録。

きちんと努力もしているけど、そういうアプリを見つけて活用できていることが今回のダイエットに繋がっていると確信している。

特に食事制限サポートアプリと筋トレはダイエットやるなら入れた方がいいぞ!

新潟バル街行ってきた & バル街アプリ作った

 
5/30(木)から6/5(水)まで新潟駅前で新潟 バル街が行なわれています。 
 
今はもう前売り券3500円が売っていないので、当日券4000円を買うと各お店でピンチョス(惣菜)とドリンクのサービスを5軒で受けることができます。 
 
結構このようなイベントはお得に飲めることが多く、知らない店にも行けるので買ってみました!
 
結果的に7件の店に行ってきたので、その評価を書いてみようと思います。

 

第1位 朱鯱 

六日町のクラフトビールライディーンビール」の IPAヴァイツェンが飲めるだけでもスゴイんですが、ピンチョスのすき焼きのクオリティがやばい。
 

f:id:sakapun:20190531181834j:plain

f:id:sakapun:20190531182349j:plain



 
どうみても人気が出る事が予測されたので、会社終わってダッシュで行きました(笑)
 
早い時間だったのまだ大丈夫でしたが、ホットな時間帯に行くとカウンターの8席しかバル街用の席がないので、断られる方も多いと思います。
 
クーポンももらえました

f:id:sakapun:20190531182637j:plain

 

第2位 Beer Trip Olive

クラフトビールでは定番の新潟で美味しいクラフトビールが飲めるお店です。
 
バル街のチケットで飲めるのは、胎内高原のヴァイツェンスワンレイクビールのアンバーエールということでした。十分なラインナップです。
 
そこに鳥の手羽先が付いてくるって言うんだから、めちゃくちゃお得です。
 
写真の撮影ここだけしていないのが残念、悔やまれる。 

 

第3位 Bar Chetta

一番最後に、もうお腹がいっぱいだしバーで美味しいお酒が飲みたいなということで訪れた、駅前楽天地にあるカウンター13席ほどの小さなバーです。
 
チケットではラム・トニックにグレープフルーツの果実が入ったソルクバーノといただきました。
 

f:id:sakapun:20190531210729j:plain

 
カレー豆のピンチョスはお腹が膨れるわけではないけど、お酒が美味しい。
 
隣の人が飲んでいたジンが美味しそうだったので追加で注文してしまいました。
 
めずらしいフランス産のジン「ソルジン」。ストレートでいただきましたがめっちゃ美味しかった。
 
いろんな決済手段が使えて楽天ペイでと言ったところ、初めて楽天ペイでの支払いということでしたが問題なく使えました。
 
楽天ペイは翌日入金らしく飲食店には強そうですが、利用自体は少ないみたいです。他の決済手段もいっぱいあるから敢えて使うのはレアだと思います。

 

携帯だとお店を探すのに不便だったのでアプリを作ってみた

 
とりあえずランキング3位まで書いて、残りは順位付けなしで紹介という形にしたいのですが、今回のバル街に向けてスマホだと情報収集が非常につらかったです。
 
公式のホームページから見れる情報はPDFが一番見やすいですが、ダウンロードして開いて拡大してスライドしたり、辛い。
 
再度PDFを開くのがめんどくさい、お気に入りに入れておけない。 という情報収集の課題がありました。 
 
わりと新潟の飲食のイベントって毎回こういう感じの情報提供です。 
 
そこで情報の閲覧が視認しやすくなるものは何かできないかと思い、この前知ったGlideというツールで情報検索ツールを作ってみちゃいました。
 
 
Google スプレッドシートをデータ元としてめちゃめちゃ簡単にアプリが作れます!(PWAです)
 
データを抽出するのが、ちょっと大変でしたが一時間程度でこのレベルのアプリができるのヤバイ。
 

その他行った店レポート 

てっぱん海鮮屋 Umi 

 
とろっとろの牛すじ煮込みを食べれます。わりとあっさりな味付けでした。
 

f:id:sakapun:20190530191720j:plain

 
飲み放題のメニューからドリンクは選ぶことにあり、生ビールは選べないので日本酒をいただきました。
 
カウンターのみがバル街用らしかったのですが、木曜日に行ったのでテーブル席を使わせてくれました。
 

居酒屋かもくら 

 
バル街関係なしに鳥の半身揚げ半額440円という看板を見つけて、ノリの良いお兄さんに呼び込まれてしまい入店。
 
中に入ってバル街の対象のお店だとわかり、チケットでお刺身とビールをいただきました。
 

f:id:sakapun:20190531200548j:plain

 
お刺身だから本当は日本酒が飲みたかったけど、半身揚げがあるということで風味爽快ニシテにしました。半身揚げというよりはぶつ切り唐揚げですね。
 

f:id:sakapun:20190531202033j:plain

 
めっちゃお腹いっぱいになって良かったけど、半身揚げの半額は昨日までということでもうやっていないみたいです。 

 

肉バル あべじ

元ランタンルージュの場所にできたお店です。
 
パテ・ド・カンパーニュが食べたいという連れの要望から行ってみました。
 
生ビールはキリンビール系のクラフトビールを頼むことができて、よなよなエールの生ビールやIPAを飲むことができます。
 

f:id:sakapun:20190530200451j:plain

 
それよりオープン記念の肉コースやばくないですか??
 
 

ぎっちょ 

前回のバル街では150人前出て品切れになったらしい馬肉のなめろう
 
選べるドリンクは 飲み放題メニューだったので、日本酒の朝日山 百寿杯にしました。
 
出てきたなめろうの大きさがちょっと小さくてどう撮っても写真映えがしなかったです。
 

f:id:sakapun:20190531193438j:plain

行けなかったお店シリーズ 

 
居酒屋げらげら 
 
金曜夜ということでげらげらは予約で貸切らしく入れませんでした。せっかくバル街開催時間見て行ったのに、それならお店の前に看板でも貼っといてもらいたいものです 。
 
 
居酒屋五十八
 
7時からのお客さんでテーブルが全部埋まっているということで諦めました。
 
店長は立ち飲みだったらいいよとまで言ってくれたのですが、さすがにそれをする勇気はなかった。
 
魚のなめろうめっちゃ食べたかった 。
 

 

総評 

いろんな店に行けるのがバル街の魅力で今回も色んな店を知ることができて楽しめました。 
 
ただしやはり金曜土曜に行くのは、行きたいお店が満席である率が高く、かなり難易度が高いので他の日にゆっくりと行けることをお勧めします。
 
5枚のクーポン全部使うとお腹がいっぱいになりすぎてやばいと思うので みんなどうやって使ってるんでしょうかね。
 
Glideで作ったアプリ、結構便利だと思うのでぜひ使ってみてください。
 
 

JAWS UG 新潟 第4回勉強会が開催されました

 
5月26日土曜日にJAWS UG 新潟支部 第4回勉強会が開催されました。
 
私の所属しているウォーターセルが会場となり1階を解放して勉強会を行いました。
 
 

f:id:sakapun:20190525130056j:plain



会場、ウォーターセルについて

 
私は前職時代からAWSが大好きであり、現職のウォーターセルでもインフラ担当としてAWSを使うとメリットのある部分に積極的に活用したいと思っております。
 
そのためJAWSへの参加も積極的であり、第一回の懇親会から弊社を会場に使えないかという代表の@kasacchifulさんと相談はしていました。
 
そして、今回ついに場所を提供することができました!
 
15人ほどの人が十分に入れスペースと無料のネットワークを提供することができて会場としては十分な機能を果たしていたと思います 。
 
会場の設営に尽力してくれた@kam1nchuさんありがとう!
 
 

今回はEC2、Lightsailがテーマ

 
前回のハンズオンはS3についてでしたが、今回はサーバの位置づけであるEC2とLightsailがテーマのハンズオンが行われました。
 
ハンズオンの中身はWordPressAWSで動かすことに焦点を当てて、LightsailとEC2で 構成を作ってみるというものでした。
 
LightsailでのWordPressの構築は、非常に簡単で30分ほどのセッションですぐにできてしまいました。
 
めちゃ楽!
 
会社で@kam1nchu が実装している所を横で見ていましたが、本当にLightsailはお手軽で楽ですね!
 
比較的最近のAWSサービス感を強く感じました。
 

 

ストロングスタイルのEC2ハンズオン 

 
しかしEC2を使ってのハンズオンはとたんにハードルが上がりました。
 
AWS黎明期からの伝統的なEC2の操作を使って、基本に忠実なEC2での構築を行いました。
 
VPCでネットワークを切ってという部分もやりましたが、VPC周りは今でも難しいと思います。
 
参加者の人もきっと「???」な状態だったかもしれませんが、資料がしっかりしていたので皆さんコピペでなんとかついてきていたようでした。
 
サポート見逃している人がいたらすいません。
 
VPCの他にも、非常にいろんなAWS用語や要素が飛び交って、難しいハンズオンだったと思います。
 
ハンズオンとしての内容があまりにも濃いためにほとんどの人がツイートできずに、必死に資料を追ってひたすら自分のマシンに打ち込んで、動かしていました。
 
 

 EC2の利用用途についてのセッション

 
ハンズオンが無事に終わった後、わたしの発表を行いました。
 
S3のときにも利用用途を説明したので、EC2のハンズオンを受けに来ているという参加者の層を意識してEC2の利用用途はどんなものがあるかというのを紹介しようとしました。
 
しかし、現状EC2から他のサービスからサーバレスやDockerに乗り代わっているトレンドを感じているので、それを紹介しようという発表になりました。
 
ちょっと過剰にEC2をディスったかな~とも思う気もするのですが、計算資源以外のEC2は魅力が少なくなっているように思うんですよね。
 
朝、@kasacchifulさんに聞いてみても、機械学習リソースかな~という反応だったし、あながち間違ってないかなと思っていますが、批判はありましたら教えてください。
 
もちろん、なんでもできる!というのはわかっているのですが、大抵のものはサーバレスなものに置き換えれると思っていますし、ちょっと高度なものはDockerでという流れはあるかなと思います。
 
どなたかの計算資源でEC2をがっつり使っていて最高だぜ!という内容の発表を聞きたいです。
 
 

LTしながら懇親会

 
懇親会はウォーターセル会場近くの白まるという居酒屋で懇親会を行いました。
 
なんと8人からの人数でお店を貸し切ることができて(!?)、プロジェクターを使うことができます!!!
 
なので技術勉強会でLTをしながら親睦を深めれるお店なのです。
 

f:id:sakapun:20190528002109p:plain

日本酒も僕が大好きな真稜 至を日本酒の飲み放題として入れて頂いて、大満足の懇親会でした。
 
なおほぼ全員がLTのネタを持ってきていて、LTをしていました!
 
 

まとめと来月の告知

 
今回はいつも以上に弊社の会場を貸したり懇親会の予約を受け持ったりとコアメンバーとしての機能を果たせたかなと思います。
 
またウォーターセルの1階を会場にして勉強会を開いていきたいなと思いますので、何かアイデアなどがありましたらお声がけください。 
 
 
来月の下旬にNDS第60回が開催され、JAWS-UG長岡が開催されます。
 
 
 
といっても、県内外のJAWS-UGの発表があるみたいです。 
 
私の発表枠で参加予定であり「AWS をできるだけ紹介する」というハードな内容で登壇予定なので、良い発表ができるよう今から準備を頑張りたいと思います(^-^;

 

「プロジェクト テーマパーク」開催レポート

このブログは、Backlogによるイベント開催してレポートを書いたらボードゲームでプロジェクト管理が学べる「プロジェクト テーマパーク」というゲームがもらえるという企画の開催レポートです。
 
 

応募~開催前

 
会社で使っているプロジェクト管理ツールであるBacklogで上記企画をやっていることを知り、ゲームが欲しいなぁと思っていました。
 
そんなときに、新潟でマネジメントやディレクターが学ぶための勉強会の場「新潟デルタ」が開催されるというので、参加申し込みをしてさらにいい機会なので開場までの時間で今回の試遊企画を考えてみました。
 
当初、近くの別の場所で考えていたのですが、ツイッターで開催を呟いたところ、新潟デルタの主催者の@mityさんに開場までの時間ならタダで使っていいよ!という申し出をいただいたので、本会場の前座イベントということで場所をお借りすることができました。
 
場所を提供していただいた新潟デルタ様、ゲームを提供してくれたBacklog様、ありがとうございます。
 
 

当日

 
参加者は私を入れて4名ということで、このゲームをプレイする3〜5名内に収まりちょうど良かったと思います。
 
途中で、広告とか告知がめんどくさくなって初回のツイートと、新潟デルタ様のメール広告に頼ってしまったのは反省ポイントなので次の企画には活かしたいところです。。
 
 
プレイは11時から12時半までの1時間半で2回行えました。
 
私はこの試遊会の前に会社のメンバーと一度ゲームをプレイしていたために、ある程度ゲームのコツとゲームの大事なルールを把握していました。
 
その事前遊戯では、ルールをあまり見ないで覚えながらやろうとして、よくわからずにゲームをやってしまい、失敗したなと思ったことがありました。
 
 
今回、経験者としては私一人だったので、説明を結構詳細にしました。
 
ちゃんとルールを説明したほうが進行はスムーズになり気持ちよくプレイできるのですが、どちらかというとみんながわからない状態からやるほうが理想だと思ってます。
 
プロジェクトマネジメントにおいて常にプロジェクトをわかりやすく説明してくれる立場の人がいるとは限りません。
 
なので、初回はあまり説明せずにコツも説明を控えてやってもらおうと思ったのですが、初対面という場もあるし結構詳細に説明してしまいました。。
 
 
1回戦
 
マイペース、新人、鉄人、トラブルメーカーという中々ヤバメの役割が割り振られました。
 
出だしは不運に見舞われ、やっぱこのメンツじゃきついよなぁと思っていたんです。
 
途中で新人(私)が何時でも青ダイスを使ってもいいというチート状態を発動してしまったため、ガンガン建設を進め結局は2枚残しの勝利条件となりました。
 
しかし、参加者のみなさんがかなり安全な見積もりをしたことも偶然クリアできたわけではないかなと言う感想です。
 

f:id:sakapun:20190514224032j:image
 
 
 
2回戦
 
無口、マネージャー、鉄人、完璧主義の4人でした。
 
割といける組み合わせだと思う。
 
無口は初回遊戯には配るカードに含めないほうが良いかもしれませんね…。見積もりが醍醐味のこのゲームでこの役割はちょっとかわいそうだと思います。
 
今回の遊戯では、みなさんのマネージャーの使い方が上手かった!
 
やる気をばらまくだけばら撒いて、建設には参加せずとも建設が進む。
 
これがマネージャーのうまい使い方なのかと関心しましたね。
 
「マネージャーは業務半分にしないと潰れる。周りをみて、手を動かすな」というのは、前職での教えで受けた教えですが、それが非常に効果的でした。
 
そんなこんなで、2回戦も2枚残しの勝利条件達成となりました。
 

f:id:sakapun:20190514224047j:image
 
 

ゲームを終えて

 
参加した皆さん楽しかったと言ってくれました。
 
購入したいけど売ってないんですかね?という声もありましたが現在は売ってないんですよね…。
 
時間がなくて、しっかりとした感想戦ができなかったことが悔やまれます。。。
 
もっと振り返りで学びを得たかったなと思います。
 
 

次回開催などについて

 
ゲームを持っていますので、やりたい方がいたら声かけてください。
 
もしくは会社において置くのでやりたい人がいたらウォーターセル社に遊びに来てください(要事前連絡)。
 
そのうち公開募集をするかもしれませんが、今はまだ未定です。
 
 

以下、ネタバレ( 実践して学べること) を含みます

 
この「プロジェクト・テーマパーク」を通して学べることを私なりに言語化してみると、
 
  • 前もって情報を収集すれば、それだけ勝利しやすくなる。
  • むしろ条件がないと何が勝利かわからない
  • 50%のリスクは危険、66%でも危険。安全に倒せ
  • 見積もり達成は本当に大事。安全に倒せ
 
などでしょうか。
 
 
全部建設するのは完全勝利であって、ちょっと残っても良いっていうルールなんですよね。
 
ちゃんと読めばわかることなんですが、初回はルール読まずに全部にやってしまい、無理な日程で計画でゲームをしてしまったので、むずかったんです。。
 
ちゃんとしたルールを把握した後はだいぶ安全にプロジェクトを進められるようになったので、最初の情報収集は重要な要素だと思います。
 
まさに「敵を知り、己を知れば百戦危うからず」だと思います。
 
ルールを知り、コツを知ればそれなりにクリアに近くなると思います。
 

ぜひ、やってみたい方はお気軽に声をかけてみてください

「UXが良い」とは何かについて考えるチャンスがあった

最近「UX デザインの教科書」という本を読んでいるので、所々で見かける「UX」と言う言説について 敏感になっている。

 
特に下記のような表現をよく聞く。
 
 
 
UXが良い 
 
 
 
この言葉について、正しい場合もあるのだが、おそらく間違った意味で使っているだろうということで非常に気になっている。
 
ちなみに今日聞いたのはこのTwitterの発言
 

 

 

 

「この製品はUXがいい」

 
これは明らかに間違ったUXの捉え方である。
 
製品には性質としてのUXは存在しないからだ。
 
UXというのはユーザーエクスペリエンス(ユーザー体験)という名詞であり、性質を指し示す言葉ではない。
 
 
では正しい捉え方をしている表現はどのようなものだろうか。
 
UXはあくまでも個人の体験である。
 
 
「この製品のユーザビリティが良いために、結果として私のUXが良かった」
 
 
という表現であれば適切に思える。
 
 
 
 
これ、UX良いなー 
 
この言葉だけだと一応どちらにも聞こえるのだが、UXを性質として話している人の方が多いんじゃないかなと感じる。
 
実際にはUXが良いと思う裏には何か良いUXを発生させる性質が存在しているはずだ。
 
 
 
こんな小さな言葉尻どっちでもええやんって思う人も多いかもしれない。 
 
私が今「UXのデザインの教科書」という本を読んでいて、それによってインプットした知識なので特別に気になっているのだろう。
 
 
 
ちょっと前にはAIという表現の使われ方がすごい気になった時がある。
 
単なる条件分岐に見えるこれをAIと呼んでいいのか。と最初は思っていた。
 
だが最近では、人間の入力に応じて機械が何かレコメンドしてくれればAIと呼んでいいというビジネスワードで気にならなくなってしまった。
 
たしかあの時は機械学習をやってみたいと意気込んでいた時期なので、専門性を目指すときにはそういう小さな言葉の使い方が気になるようになるんだなということだろう。
 
 
 
その意味では、今ちゃんとUXデザインについて学んでいる意識を持てているということで、良い傾向なのかなと思った。
 
UXは性質ではなく、名詞です。
 

 

UXデザインの教科書

UXデザインの教科書