{"pageProps":{"bread_crumbs":[{"name":"トピック一覧","href":"/topics","as":"/topics"},{"name":"イベント報告","href":"/topics/[topic]","as":"/topics/[object Object]"}],"topic":{"id":"qyq-p49fyxj4","createdAt":"2021-04-11T08:00:02.719Z","updatedAt":"2021-04-11T08:00:02.719Z","publishedAt":"2021-04-11T08:00:02.719Z","revisedAt":"2021-04-11T08:00:02.719Z","name":"イベント報告","posts":[],"path_name":"event-report"},"posts":[{"id":"9p_4c8cgyonl","createdAt":"2021-04-11T14:51:48.689Z","updatedAt":"2021-04-11T14:51:48.689Z","publishedAt":"2021-04-11T14:51:48.689Z","revisedAt":"2021-04-11T14:51:48.689Z","title":"MixLeap 勉強会 Study ＃64に参加したぜ","description":"こんにちは、よしでぶです。\nMixLeapの勉強会に参加しましたので報告します！今日のタイトルは『MixLeap Live Study ＃35 - 「フロントエンドのテスト効率化」』です！","body":"

MixLeap Live Study ＃64 - 「フロントエンドのテスト効率化」 に参加

史 宇華さん「Yahoo! JAPANトップページの E2E テスト導入の話」

ヤフーのトップページの開発を担当される
トップページのスマホ版の話
機能確認にはコストがかかる
理由：

ってことで、機能確認のコスト削減のためにE2Eテストを導入した！
課題

つまり、陳腐化しがち
陳腐化させないために

結果、継続できるE2Eテストを実現できるんじゃないかと考察される
質問も多く来ていて、たくさんの視聴者さんの興味を引いてました^^

三宮 肇さん「アクセシビリティ検証の自動化と、カラーコントラスト問題について」

サービス横断デザインシステムの開発が主務
全社のWebフロントエンド技術の推進もされる
サービス横断システム「Riff」というものがある
スタイルガイドに則って作られたUIライブラリを提供している。

Riffでアクセシビリティテストを導入している話。
アクセシビリティテストを実施できるOSSの導入

カラーコントラストテストを行ってる、現状課題が多いらしい。。。
W3Cが定めるアクセシビリティのガイドラインがあり、4.5:1を満たさなければならない

宇城 毅犠さん 「フロントエンド開発初学者が自動テストで試行錯誤した話」

学生の時はWebフロントエンド開発の経験はなかった
0の状態からフロントエンドの技術を身につけていったか
そこからテストをどうやって学んできたか
スキル習得のためにやったこと

  1. 入門書を一通りなぞる：「なんとなくわかった」
  2. ペアプロ：着眼点や考え方を学ぶ
  3. データフローを理解する（インプットからアウトプットまでのデータの流れを理解する）

テスト自動化の話
初めてのユニットテスト
最初はユニットテストの意味がわからなかったが、実際にやってみて

ってことがわかった。
結果、自分の書いたコードの質が向上！
リソースが足りない時もユニットテストを書くべき？
→明確な答えはないが、書くのは厳しそう。
ユニットテストの捉え方

テストに対して感じたこと・考えていること

ユニットテストの捉え方に共感する視聴者が多くみられたのが印象的でした！

パネルトーク

事前に参加者から募ったフロントエンドのテストに関する質問・課題を抜粋してトークテーマにした。

エンジニアのフロントエンドテストに対する捉え方

社内の雰囲気的にはテストは大事にしてる
フロントエンドはユーザが一番先に触るところなので不安な点が多いが、テストがあると安心する
個人的に、t-wadaさんのテストの話は良い
コードの質を上がるし、実装の質もアップする気がする

フロントエンドのテストの価値について

プロダクト開発において、長期的な視点に立った時に、長期的にユーザに価値を提供するって考えたら良いと思う
最初はチーム内で普及してなかったが、ペアプロなどの活動を通してテストの知見を共有するという方法をとったことがある

テストを手動でやるか/自動化するか問題

自動化のデメリットはコスト、仕様変更とか、確かに存在する
各サービスで絶対に落としてはいけないところはどこだろうって考えてコアなところからテストを自動化していくって判断基準が良いかも
テストは投資に近いですよねー
初期コストと運用時にかかるコストがあり、運用時にかかるコストが低い方が良いとは思う。長期的なスパンを考えると良いかも

フロントエンドテストの技術選定

ビジュアルリグレッションテスト（reg-suit）がおすすめ
Storybook
自分もむしろ教えて欲しいw
playwrightは本当におすすめ！

","thumbnail":{"url":"https://images.microcms-assets.io/assets/7fa9f8975e7845759f5c8de646af32af/0b7bcd5fe9254e2abbb4a65b7e4a98a6/about.png","height":630,"width":1200},"topics":[{"id":"qyq-p49fyxj4","createdAt":"2021-04-11T08:00:02.719Z","updatedAt":"2021-04-11T08:00:02.719Z","publishedAt":"2021-04-11T08:00:02.719Z","revisedAt":"2021-04-11T08:00:02.719Z","name":"イベント報告","posts":[],"path_name":"event-report"},{"id":"7g0_p4_2n4x","createdAt":"2021-04-11T08:01:16.410Z","updatedAt":"2021-04-11T08:01:16.410Z","publishedAt":"2021-04-11T08:01:16.410Z","revisedAt":"2021-04-11T08:01:16.410Z","name":"フロントエンド","posts":[],"path_name":"frontend"}],"category":{"id":"6tg5du2jx","createdAt":"2021-04-11T07:55:46.137Z","updatedAt":"2021-04-11T07:55:57.125Z","publishedAt":"2021-04-11T07:55:57.125Z","revisedAt":"2021-04-11T07:55:57.125Z","name":"Web開発","path_name":"web-develop","logo":{"url":"https://images.microcms-assets.io/assets/7fa9f8975e7845759f5c8de646af32af/90ef5ba6a28045f8a80261a594973d43/web_develop.svg","height":85,"width":111},"description":"プログラミングや開発設計、フロントエンドやバックエンド、データベースやネットワークのインフラ等、分野問わず私が経験したWeb開発の話を発信していきます。","posts":[]}},{"id":"vm8fe4jvdq","createdAt":"2021-04-11T14:50:31.346Z","updatedAt":"2021-04-11T14:50:31.346Z","publishedAt":"2021-04-11T14:50:31.346Z","revisedAt":"2021-04-11T14:50:31.346Z","title":"おうち de LT大会 ＃2 に参加したよ","description":"こんにちは、よしでぶです。\n株式会社ビヨンドが主催のLT会に参加しましたので報告します！テーマは「リモートワーク環境を極めた者たち」です。","body":"

おうち de LT大会 ＃2【ビヨンド勉強会 ＃31】に参加しました。
Zoomのウェビナー機能を使ったイベント。
テーマは「リモートワーク環境を極めた者たち」
リモート環境をとことん突き詰めた猛者たちのLTを聞くことができました。

萬代 陽一さん「妻『あんた最近部屋から出てけーへんようになったなぁ』と言われる仕事部屋ができるまで」

@chaotic_pg
奥さんに「最近部屋から出なくなったね」
と言われるまでの経緯をLT！
仕事部屋を紹介

これは部屋から出ないですね。

中嶋 道太郎さん「さあ 椅子を捨てよう！ - スタンディングワークの始め方」

@dora0903
イベントの企画・運営、新卒採用、SNS(ヤフー大阪)
7年前から実践してる スタンディングワーク についてご紹介
スタンディングワーク (= 立ちながら仕事をする)を検討している人に対して

結構歴史が古く、偉人もやってたり。
スダンディングワークを導入する上での3つの壁→解決法

mochikoAsTechさん「『状況が落ち着いたら○○しよう』よりも現在を快適にしよう」

@mochikoAsTech
『状況が落ち着いたら○○しよう』よりも現在(イマ)を快適にしよう
リモート環境を整えようと思っても「でも」がよぎってしまう。。。

「落ち着いたら」ってのは実際「いつ」になるのだろう…？？
「いまは我慢！」の「いま」は実際は既に1年経ってることになってる。。。
なので「落ち着いたら」ではなく、「今、困ってることを解決する」というマインドになろう！
今にフォーカスして買ってよかったもの&やってよかったものベスト３を発表！

小田祥平さん「自作PCの中で住むことになった話」

@MS_odasho
自宅で仕事するならPC新調しちゃおうという話。
とにかく浮かせ！浮かせばなんとかなる！（作業スペースが）

映像がやはり大事ということでカメラを購入。結果３カメ購入w
音声も大事。声色や息遣いとか。ミキサーを購入してエフェクトかける。
おうちをIoT化にしまくった話。パソコンつけてる間ずっと家の電気が七色に光るようになった（制御不能w）

五島羊祐「家に木を買った話 -篭もりたくなる家の作り方-」

@gotoh_pg
木と間接照明で篭りたくなるおうちを実現した話！
インテリアグリーンの選び方。こだわりがなければ フェイクグリーン がおすすめ。
思い切って180cmくらいの大きな木を置くと 森っぽくなるのでおすすめ。
間接照明の選び方。光の向きを調整できるタイプはおすすめ。電球の色は暖色がおすすめ。
間接照明を置くことで、雰囲気が全然違う！！（before/afterで良さを伝えていただきました）
自宅で木漏れ日を楽しむ。間接照明をフェイクグリーンに当てることで外で見る木漏れ日を再現できる。

shibomb 柴原 洋紀さん「映えるための機材、自宅だからできる作業効率向上、そして、堕落もまたヨシ」

シバーンさん。フリーランスでシステムエンジニア、プログラミングティーチャー、YouTuberとマルチに活躍。
シバーン
映えるための機材。Zoomの映像がめっちゃ綺麗！背景がボケてて顔にピントが合う。
ミーティングとかで良い印象を与えることができる。
カメラとしては一眼レフカメラを使用。
ライトを使って雰囲気を調整。落ち着いた話はブルー系。アツい話をする時は赤系のライトをあてて、映えを表現。
デスク周りの話。デュアルディスプレイは絶対条件。サブディスプレイはウルトラワイドモニター+4Kモニターを使用。
椅子は「骨盤で座る椅子」姿勢良く座らないとしんどくなるらしい。
堕落もまた良し、人をダメにするソファを使ってスダンディングデスクならぬ シッティングデスクスタイル！
一室に全てが詰まってるお部屋を紹介していただきました！

まとめ

いやぁ、いろんなお話を聞けました。
にしても、皆さん発表が上手すぎました。。。羨ましい…！！
ありがとうございました！
ではでは。

","thumbnail":{"url":"https://images.microcms-assets.io/assets/7fa9f8975e7845759f5c8de646af32af/0b7bcd5fe9254e2abbb4a65b7e4a98a6/about.png","height":630,"width":1200},"topics":[{"id":"qyq-p49fyxj4","createdAt":"2021-04-11T08:00:02.719Z","updatedAt":"2021-04-11T08:00:02.719Z","publishedAt":"2021-04-11T08:00:02.719Z","revisedAt":"2021-04-11T08:00:02.719Z","name":"イベント報告","posts":[],"path_name":"event-report"}],"category":{"id":"ajdnsgjntabc","createdAt":"2021-04-11T07:57:59.636Z","updatedAt":"2021-04-11T07:57:59.636Z","publishedAt":"2021-04-11T07:57:59.636Z","revisedAt":"2021-04-11T07:57:59.636Z","name":"日常","path_name":"daily","logo":{"url":"https://images.microcms-assets.io/assets/7fa9f8975e7845759f5c8de646af32af/67a91f22c3e34e8f86e18b999fafdbc4/daily.svg","height":104,"width":87},"description":"Webに全く関係ない話もします！ 旅行に行った話、最近買ったもの、今日あった話など、備忘録・日記感覚で公開していこうと思います。","posts":[]}},{"id":"vcrv2ije3mk","createdAt":"2021-04-11T14:48:23.493Z","updatedAt":"2021-04-11T14:48:23.493Z","publishedAt":"2021-04-11T14:48:23.493Z","revisedAt":"2021-04-11T14:48:23.493Z","title":"MixLeap ＃36 に登壇したぜ","description":"こんにちはよしでぶです。今日はMixLeap ＃36 - 「在宅で役立つ買ってよかったもの」に登壇しました！この1年間新型コロナウイルスの影響で在宅ワークが続く中、在宅ワーク環境を快適にするために買ったものを3点ご紹介しています。","body":"

イントロ




私が現在働いている会社ヤフーでは、2020年の2月から全社員に対して在宅ワークするように呼びかけられました。
そして同年10月から無制限リモートワークの制度が取り入れられました。
ヤフー、“無制限リモートワーク”で新しい働き方へ
そんな中、私が叶えたかったこととして以下の3点がありました。

  1. 外で作業する機会も少なくなったし、私用PCをデスクトップPCにしたい
  2. 仕事用のPCはMacBook Proだからサブディスプレイとして良いモニターが欲しい
  3. 在宅ワークが続くので、座りっぱなしでも疲れないようにしたい

今回はこれらを叶えるために買った3点をご紹介します。

買ったもの

iMac




私用PCとして昨年8月にiMacを購入しました！！
27インチの大きい方を選択しました。
メモリは後で増設できるということを聞いたので一番小さい8GBを選択し、市販のメモリ32GBを別で購入して
今は40GBメモリとして使っています。
綺麗な5K Retina Displayがめっちゃ良い！！
そしてなんといっても 処理速度がノートPCに比べてめっちゃ速い！
買って幸せになりました。
iMac 27インチ｜Apple

Luna Display




iMacを買った後の私の机に仕事で使うディスプレイを配置するスペースなんてありませんでした。。。
そこで iMacというでかいディスプレイがあるからこれを使いたい！
ってことで購入したのが Luna Display です。
これでMacBook Proに専用のドングルを装着すると、iMacがMacBook Proのサブディスプレイとして使えるようになります！
すごい贅沢なサブディスプレイが完成しました。
これも買って幸せになりました。
Luna Display｜Astropad公式ホームページ

Style Premium




座りっぱなしは疲れるので良いチェアを買いたい。
最初はそう思ってましたが、こう考えました。
どんなにいくら良いチェアに座ったとしても、ちゃんと姿勢を良くして座らないと長時間座り続けると結局疲れる。
そこで思い立って購入したのが、骨盤矯正をしてくれるクッション Style Premium です！
こちら座るだけで包まれた感覚になり、すごいフィット感を得ることができます。
そしてなんと言っても全然疲れないし腰も痛くならない！！
椅子はニトリで買った7000円のものですが、高級チェアに座っている気分を味わえます。
本当に買ってよかったです、幸せになりました。
Style Premium｜MTG公式ホームページ

まとめ


今回は在宅ワークが続く中で買って幸せになれた品3点をご紹介しました〜！
他の方の発表もどれも面白かったので皆さんも是非またの機会に参加してみてください！！

","thumbnail":{"url":"https://images.microcms-assets.io/assets/7fa9f8975e7845759f5c8de646af32af/3fb7bebdc1a44f68bbeffdee3e118ca1/mixleap36_thumbnail.png","height":1080,"width":1920},"topics":[{"id":"qyq-p49fyxj4","createdAt":"2021-04-11T08:00:02.719Z","updatedAt":"2021-04-11T08:00:02.719Z","publishedAt":"2021-04-11T08:00:02.719Z","revisedAt":"2021-04-11T08:00:02.719Z","name":"イベント報告","posts":[],"path_name":"event-report"}],"category":{"id":"886tq3q6t-4j","createdAt":"2021-04-11T07:57:29.060Z","updatedAt":"2021-04-11T08:33:48.375Z","publishedAt":"2021-04-11T07:57:29.060Z","revisedAt":"2021-04-11T08:33:48.375Z","name":"制作物紹介","path_name":"product","logo":{"url":"https://images.microcms-assets.io/assets/7fa9f8975e7845759f5c8de646af32af/70949266f2654f289e055d5402f45db9/product.svg","height":103,"width":111},"description":"私が開発したWebアプリやそのアーキテクチャを紹介していきます。また、LTで発表した資料なども公開していきます。","posts":[{"id":"75yl0ftunccd"}]}},{"id":"yy3z5qee4","createdAt":"2021-04-11T14:35:21.041Z","updatedAt":"2021-04-11T14:35:21.041Z","publishedAt":"2021-04-11T14:35:21.041Z","revisedAt":"2021-04-11T14:35:21.041Z","title":"MixLeap LT会 ＃35に参加したぜ","description":"こんにちは、よしでぶです。MixLeapのLT会に参加しましたので報告します！今日のタイトルは『MixLeap Live LT #35 - 「教えて！みんなのSNSの使い方」』ですー","body":"

MixLeap Live LT #35 - LT会「教えて！みんなのSNSの使い方」 に参加
コメンテーターにヤフーの公式ツイッターを運営されてる方が参加していた

オープニングLT「Yahoo!天気・災害Twitter運用について」

ヤフー天気公式アカウント
2011 4月からTwitterを運営
天気をわかりやすく伝えることを第一に考えている。
フォロワーさんに信頼してもらう。災害時に情報をしっかり受け取ってもらうために平常時から定期投稿
中の人は朝5時起き。。
毎日朝に投稿してたけど、寝坊してしまった。。
botだと思ってた、中に人がいた！と反応
投稿がbotだと思われていたww
あの寝坊がなかったら今のような投稿はなかった（名言）
ミスった時は気軽に指摘してもらうように信頼を築いている
人間味ある行動で中の人が分かるという流れが　あたたかい　と聴衆のコメント
「災害発生時は、ずっと張り付いているのですか？」と質問→災害時は複数人で交代制で運用してる
「災害時は中の人も一緒に闘っている感じ、ありがたい」と聴衆のコメント
フォロワーと同じ目線で話すように心がけている

オープニングLT「ヤフー大阪Twitter運用について」

ヤフー大阪公式アカウント
ヤフー大阪の説明
富国生命 2012年〜 グランフロント大阪 2017年〜
ヤフー大阪アカウントは2017年10月〜スタート
ヤフー＋ヤフー大阪のファンをふやすことを影の目標

今までのインプレッション数が多いツイートをランキング形式で発表
第一位は綺麗な青空のやつ：ヤフー天気にRTされたのが原因と考察。公式アカウント同士でRTしあうとインプレッション数が伸びが良いらしい。

田村さん 「Twitterでデータを可視化しまくった話」

田村 健 / データ可視化人間
ヤフーでデータソリューション事業を業務されている。
ヤフーでたまったデータを利活用する仕事。
最初、マーケティングの人から「田村さん！インフルエンサーになってください！」と突然言われるw
田村さんがやったこと： ヤフーのデータを使っていっぱい可視化する
反響の多かった可視化best3

やってよかったこと

「可視化するテーマの選び方がすごく面白い。全部タムラさんが考えてツイートしてるのですか？」とコメント →Twitterはみなさんスマホで見てるので、わかりやすくとっつきやすいのをテーマにしてる

サワノミク「悠久の思いをSNSに載せて」

紡ぐ Japan Art & Culture
japan art & culture：日本文化、日本技術、伝統芸能について紹介するポータルサイト
SNSで目指してること

中継ツイート（国宝の運び出し）をしてる 「面白い！」「がんばれ！」とのコメントをもらう
障壁画を運び出しも好評
普段みなさんが見ないことを共有するだけでなく、現場の人の思いというのを伝えることを心がけている

MJうさちゃん「明日から出来る！現役公式中のTwitter"つぶやき"テクニック」

おたくま経済新聞
運用の重要ポイントを紹介

  1. カレンダーはチェックしておく→身近なネタでも注目されるチャンスあり！
  2. 流行には敏感に→脈絡のない単語がトレンドになるものもtwitter
  3. チェックすべきは「インプレッション」と「エンゲージメント」→いいねはブックマークがわり
  4. 絡めそうなネタだけ反応すればOK→Twitterだけが全てじゃない。割り切りも重要

「記念日タグ」を織り交ぜた挨拶投稿を行う
トレンドワードを利用しての過去記事紹介。トレンド活用は格好のPRチャンス！
個人アカウントでも効果あり
「卵かけご飯の完成」のトレンドに、"便乗"して行った
ハッシュタグはSEO的にも良い
「トレンド情報はどのあたりから入手されてますか？」→ヤフーリアルタイム検索、Twitterのトレンド
「食べ物はやっぱヒキがいいんですかね」とコメント。→人間の3大欲求。食品は動画がおすすめ。

ようかん「高校生エンジニアからみる高校生のLINEの使い方」

ようかん / Yosuke Inoue
高校生エンジニア
聴衆を圧倒するプレゼン。
#mixleap で投稿した内容がニコ動のコメントのように画面を横切る演出。
とりあえず圧巻のプレゼン。楽しそうに開発されてるのが聞いてるだけでわかる。
LINEアプリを作ってる。

bot開発はいつから？
→高校2年生から
LINEを使った開発は独学ですか？学校の授業であるとか…？レベル高くてビックリです
→LINEのイベントに参加して覚えていった

","thumbnail":{"url":"https://images.microcms-assets.io/assets/7fa9f8975e7845759f5c8de646af32af/0b7bcd5fe9254e2abbb4a65b7e4a98a6/about.png","height":630,"width":1200},"topics":[{"id":"qyq-p49fyxj4","createdAt":"2021-04-11T08:00:02.719Z","updatedAt":"2021-04-11T08:00:02.719Z","publishedAt":"2021-04-11T08:00:02.719Z","revisedAt":"2021-04-11T08:00:02.719Z","name":"イベント報告","posts":[],"path_name":"event-report"}],"category":{"id":"ajdnsgjntabc","createdAt":"2021-04-11T07:57:59.636Z","updatedAt":"2021-04-11T07:57:59.636Z","publishedAt":"2021-04-11T07:57:59.636Z","revisedAt":"2021-04-11T07:57:59.636Z","name":"日常","path_name":"daily","logo":{"url":"https://images.microcms-assets.io/assets/7fa9f8975e7845759f5c8de646af32af/67a91f22c3e34e8f86e18b999fafdbc4/daily.svg","height":104,"width":87},"description":"Webに全く関係ない話もします！ 旅行に行った話、最近買ったもの、今日あった話など、備忘録・日記感覚で公開していこうと思います。","posts":[]}}],"service_url":"https://yotteq.net"},"__N_SSG":true}