2023年やりたいこと

2022年振り返り

テレワークが始まって約３年、デスク環境を良くするためにいろいろ買ってきました。ディスプレイやwebカメラなど...毎年少しづつアップデートしているので、今年からデスク環境をまとめて、何が変わったのかどう変わったのかを比べられるようにブログにまとめておこうと思います。↑こちらは、僕の作業机です。ここに写ってるものを紹介していきます！ディスプレイInnocn モニター 40インチ ウルトラワイド pc モニター ワイドモニター ゲーミングモニター ADS 144HZ 40インチ HDR600 2K WQHD 95%DCI-P3色域 PIP/PBP FreeSync 3440×1440 高さ角度調整 USB Type-C接続 非光沢 薄型 VESA対応 WR40-PROINNOCNAmazon仕事と趣味を両立できる最高なディスプレイです！仕事ではMacBookを使用しているのですが、給電とディスプレイでケーブルを2本接続することありますよね？このディスプレイは90WのPD（パワーデリバリー）が備わっているので、type-cケーブル1本で給電しつつディスプレイ表示もできます。さらに、40インチのワイドディスプレイなので1枚で余裕を持って作業することができます。次に趣味、PCゲームをやっているのですが144Hz、MPRT 1msで快適にゲームをすることができるスペックを持っています。↓この条件で探していたらピッタシのディスプレイを見つけられたんですよねー最高でした。35インチ以上湾曲ディスプレイ144hz以上type-c/DP対応（144hzはDPだけで良き応答速度1msか2msPD 90wくらいのディスプレイないかなーこれあればかなり便利だと思うんだよなぁ— しょうた (@shota1995m) 2021年10月19日  ただ、湾曲だけは対応されていないので、湾曲じゃなきゃダメだっ！って方は注意してください。このスペックであれば他のディスプレイよりもコスパが良くPCゲームの機能を無視してもやはり、コスパ最高です。さらに、たまに2万円offのクーポンも発行されるのでこのディスプレイよりもコスパがいいやつなかなか出ないのではないでしょうか？モニターアームAmazonベーシック デスクマウント シングル モニターアーム ブラック (11.3kgまで対応)Amazonベーシック(Amazon Basics)Amazonディスプレイ自体の重量が約9kgあったため、元々使ってたハーマンミラーのモニターアームでは支えきれないので購入。このアームは11.3kgまでいけるので、約9kgもあるディスプレイでも問題なく支えてくれます！机FlexiSpot 電動式スタンディングデスク脚 EG1（アップデート版） パソコンデスク 昇降デスク 高さ調節 学習机勉強机 ブラック（天板別売り）FLEXISPOTAmazon机はFlexiSpot EG1を使用しています。ただ、これは型が古いため購入する際は公式ホームページで気に入ったものを探してみてください！最近のものだと全てメモリー機能付いているんじゃないでしょうか？メモリー機能はあると最高だとおもうので、ついているものを選びましょう！テレワークが普及してきて、昇降デスクは定番中の定番ですよね僕はヘルニアに一回なったので、そのリハビリの為に昇降デスクを購入しました。たまに立って仕事をすることで、腰の痛みは少なくなって今は普通に歩けるようになりました！（個人の感想です。医学的にどうとかわからんです。でも、よくなりました）MTG中とかよく、アキレス腱伸ばしながら話しています！マイクElgato Wave:3 - スタジオレベルUSBコンデンサーマイク, 配信、ポッドキャスト、ゲーミング、およびホームオフィスに最適, 無料のミキサーソフトウェア, サウンドエフェクトプラグイン, 歪みなし, プラグ&プレイ, Mac/PC対応ElgatoAmazonマイクはelgatoのwave3を使っています！マイク本体にタッチでミュートする機能が付いているので、即座にミュートすることが可能です。さらに押し込みではなく、タッチで反応してくれるので、静かに切り替えられるのがポイントが高いです！Echo ShowEcho Show 8 (エコーショー8) 第2世代 - HDスマートディスプレイ with Alexa、13メガピクセルカメラ付き、チャコールAmazonAmazonEcho showは神アイテムですねコード書くのに集中してしまった時に、MTG遅刻することありません？そんな時に、MTGの5分前にAlexaにお知らせしてもらうことで先にzoomやらmeetに入っておくことができ、遅刻しないという技を身につけました。安心してコード書いてられますね急なMTGもお知らせしてもらうことで、みてなかったから参加できなかったとかなくなりました。充電器Belkin 3 in 1 MagSafe充電器 最大15W高速充電 ワイヤレス充電器 MagSafe公式認証 iPhone 14 / 13 / 12 Apple Watch 8/7/Ultra 高速充電対応 AirPodsワイヤレス充電対応 ブラック WIZ017dqBKBelkinAmazonAppleの公式でも売られている充電器ですねiPhone14を購入したのでそのタイミングでこの充電器も購入しました常時点灯機能と相性がよく、置き時計的な感じで使っています。たまに横画面にして動画を流しながら、作業をするってこともしています下の土台のところでも充電できるのでQi対応の検証機を置いたりしてます。webカメラAnker PowerConf C300 ウェブカメラ AI機能搭載 フル HD モーショントラッキング 高速オートフォーカス 1080p ノイズリダクション オートゲインコントロール 画角調整機能 プライバシーカバー Zoom認証AnkerAmazonAnkerのwebカメラです！専用のアプリで明るさや画角などを調整できます！画質も良く、気に入っています。シャッターキャップも付いてますが、衝撃の自分で貼るタイプです。ただ、画質とか気にしないということであればロジクールの1000-2000円くらいのものを使っておけばコスパは良いですケーブルトレープラス Garage ケーブルトレー 幅63.7cm ワイヤーケーブルトレー 穴あけ不要 ケーブル配線トレー 配線整理 ケーブル整理 ケーブル収納 L YY-WDCTL 黒 435570 ブラックPLUS(プラス)Amazonとりあえず便利です！電源タップやUSBハブなど置いています。このトレーのおかげで昇降してもケーブルが引っ張られて大惨事になるってこともありません。リモコン置き山崎実業 デスクバー ホワイト 約W24.5×D9.7×H11.3cm タワー 2299山崎実業(Yamazaki)Amazonみんな大好き山崎実業のtowerシリーズです。デスクバーって商品名ですが、なんそれ？って感じなのでリモコン置きというダサい名前をつけてます。普通に便利で、スマホを立てかけたり、ペンを立てたり色々使い方はあると思います。番外編マイクアームElgato Wave Mic Arm LP 薄型デザインマイクアーム 配信/ゲーミング/レコーディング向け クランプ式固定 モニター下部からの設置に最適ElgatoAmazon写真には写ってないですが、elgatoのマイクアーム最高です。マイクアームがAの字みたいに山になっているのがデフォなんですが、このアームは低姿勢なんですよね。なので、ディスプレイの下から這わせることができ、ディスプレイにアームが掛からず邪魔にならないのでおすすめです！もう一本欲しいのですが、値段がややお高めなのがネックですねまとめ今回は、仕事デスクの紹介でした！まだまだ改良の余地がありますねーしかも、まだ開封していないアイテムもあるので、来年のアップデートに期待です！ちなみに、会社でおすすめアイテムとして色々紹介しているのですが、ディスプレイとFlexiSpotは結構人気で数人購入していましたw他にいいアイテム持ってる方いたらTwitterでも、コメントでも教えてくれると嬉しいです！

2022年版フロントエンジニアのデスク環境（テレワーク）

この記事は、スターフェスティバル Advent Calendar 2022の 24 日目の記事です。みなさん！ クリスマスイブですね！ユダヤ暦では日没から一日が始まっていたので、24 日の午後（イブニング）からメリクリって言っても良いらしいですねー前日は、まつやの2000 行の SQL が流れてた話でした！ はじめに今年（2022 年）の 8 月ごろ、親から来年（2023 年）の PDF カレンダーが欲しいと相談されていました。それならサクッと出来そうだなーと思って・・・気づいたら 12 月になっていました。すでに 2023 年の PDF カレンダーは入手できたそうで...

PDF-LIBでカレンダーを作れるサイトを作ったので、PDF-LIBについて書く

この記事は、スターフェスティバル Advent Calendar 2022の 10 日目の記事です。 はじめにスターフェスティバル株式会社 エンジニアの@shota1995m です！先日、社内でオブジェクト指向UIについて考える機会があったので 「オブジェクト指向 UI デザイン -使いやすいソフトウェアの原理-」 という本を読みました。みなさんは、オブジェクト指向 UI というものを知っていますでしょうか？検索などをしているとオブジェクト指向UIというよりも、Object Oriented User Interfaceの頭文字を取ってOOUIと表記しているところが多いです...

オブジェクト指向UIデザインを読んだから図解してみる

みなさんは、Web アニメーション使っていますか？おそらくLottieを使っている人が多いかと思います。ただ、Lottieには大きな問題がありますね？そうです。Adobe の After Effects（AE）がないとアニメーションが作れないという問題です。たくさんの人たちが嘆き苦しみながら AE を使うために Adobe に課金している事だと思います。そんな人々を救うため、最近では AE を使わなくてもアニメーションを作れるようにとLottie Labというサービスが開発されていたりします。https://lottielab.com/しかし、まだまだ公開には至っていな...

WebアニメーションはRiveが便利！

スターフェスティバル株式会社 エンジニアの@shota1995m です！今回は、GW にエンジニアが Figma に入門した時のこれ覚えておけば Figma 活用できるんじゃない（個人的意見）のまとめをしていこうと思います！ Figma 活用技術これから紹介する機能たちは、同じ要素を使い回す場合にとても力を発揮します！エンジニアで Figma を触らないといけなくなった時、使い回し技術だけでも習得しておけばデザインを崩すことがなく手を入れることが可能です！ AutoLayoutフロントエンジニアの方にはFlexBoxとpaddingが設定できるようになる機能といえばイメー...

GWにFigmaに入門したエンジニア

ブログのリニューアルをしました！

What's Changedアラートの追加 by @shota1995m in #21ハイライトとソート追加 by @shota1995m in #22Develop by @shota1995m in #23New Contributors@shota1995m made their first contribution in #21Full Changelog: v1.0.0...v1.0.1

Planning Poker Remix v1.0.1

Code Lab Blog v1.0.0

Full Changelog: https://github.com/shota1995m/github-readme-blog-score/commits/v1.0.0

GitHub Readme Blog Score v1.0.0

Full Changelog: https://github.com/shota1995m/code-lab-timeline/commits/v1.0.0

Code Lab Timeline v1.0.0リリース

What's ChangedConfigure Renovate by @renovate in #1Pin dependencies by @renovate in #2Update dependency @vercel/node to v1.14.1 by @renovate in #3Update dependency framer-motion to v6.2.10 by @renovate in #5Update dependency eslint to v8.13.0 by @renovate in #6Update dependency @types/react to v18 by @renovate in #7Update react monorepo to v18 (major) by @renovate in #9Update dependency @types/react-dom to v18 by @renovate in #8Update dependency @types/react to v18.0.4 by @renovate in #10New Contributors@renovate made their first contribution in #1Full Changelog: https://github.com/shota1995m/planning-poker-remix/commits/v1.0.0

Planning Poker Remix v1.0.0

この記事は、Flutterをほぼ初めて触った人の感想記事です。どうも、shota1995mです。今回は、Flutterを使ってアプリを作ってみました！ReactNativeの開発体験はとても素敵なもので、Flutterに挑戦しようと思ってもRNの誘惑に負けて手を出せずにいました。Cordovaから始まり、Native(Swift)をさわり、ReactNative(Expo)をやってきて、とうとうFlutterに挑戦です！アプリエンジニアの歴史にFlutterをぶち込んでやります！！ なにつくったの？？去年、1年間何してきたかなと思って振り返ると、記憶がほぼありませんで...

Flutterを使って１週間でアプリ作ってみた!

こんにちは、shota1995mです！最近、Zennに投稿する機会が増えたので、GitHubでもZennの記事数とか表示できたら面白いなーと思ったので、本日はこんなものを作ってまいりました。https://github.com/shota1995m/github-readme-blog-score 作成の経緯みなさん、GitHubのプロフィールREADMEは使っていますか？GitHubのユーザー名と同じリポジトリを作ることで、GitHubのプロフィールページにREADMEを表示できる、名前まんまの機能です。どこかの国のエンジニアの人がプロフィールREADMEを使ってカッ...

GitHubのプロフィールにZennのいいね数や記事数を表示してみた

この記事はスターフェスティバル Advent Calendar 2021の 24 日目です。スターフェスティバル株式会社 エンジニアの@shota1995m です！今回は、個人ではなくチームで改善した話をしたいと思います。Yoshifujiikkitang 使用ツールGitHubソースコードの管理Jiraチケットの管理Confluenceドキュメント / 仕様の管理Jira と GitHub は連携しており、Jira のチケットからプルリクの公開状況やGitHub Actionsの実行結果が分かるようになっています。 浮...

プルリクエストのテンプレートを改善したら、レビュー効率が上がった話

この記事は、スターフェスティバル Advent Calendar 2021の22日目です。 はじめに2021/12/9に開催されたReact Conf 2021の感想記事です！https://conf.reactjs.org/アーカイブは↓こちらから！https://www.youtube.com/watch?v=8dUpL8SCO1w&t=2920s動画内のまとめ記事ではないので、興味があった箇所を軽く紹介しつつ感想を書いてるだけの記事です。なので、詳しく詳細をみたい！という方は、アーカイブへ!各項目ごとにどこについて話しているか分かり易いように、再生箇...

React Conf 2021をみたよ

この記事は、スターフェスティバル Advent Calendar 2021の18日目です。 はじめにshota1995mです！今回のテーマは1年間アウトプットを意識してみた👏朝の挨拶の時やお昼時間、集中が切れたタイミングに周りの人と最近流行ってるライブラリや技術の話をしてました。話すことでアウトプットし、相手からの意見を聞くことでインプットするという結構いい流れができていたんだなと思います。しかし、コロナの影響でリモートワークになり、話すタイミングが減ったことでインプットしたものをアウトプットし切れなくなりました。そして、そもそもアウトプットって話すだけじゃなくLTや...

1年間アウトプットを意識してみた

この記事は、スターフェスティバル Advent Calendar 2021の4日目です。昨日は3日目、Yoshifujiさんの社内で技術書の輪読会を開催している話でした！輪読会は自分も参加してみて、とても良い取り組みだと思います！ 挨拶4日目（ギリギリ）は、shota1995mです。お願いします！今回は、やってみた系（？）です。Expo SDK43のHighlightsにHermesがiOSでも使えるようになったと記載があり、気になっていたのでこの機会にすこし触れてみます！ そもそも、Hermesってなーに?ReactNative用に最適化されたオープンソースの...

ExpoのHermesでビルドしてみた

現象ios15で新規インストール、インストール済み関係なくアプリが起動できない状態になっていた。 調査Expoの下記のスレッドで今回の現象について話し合われていた。https://forums.expo.dev/t/ios-15-cannot-launch-enterprise-signed-application/53701要約するとXcode13にアップデートしなきゃいけないeas buildを使ってlocalでbuildすれば動くexpo build:iosが機能していないよという感じっぽいですねそして、AppleのDeveloper Forums...

expoでつくったenterpriseアプリがios15で起動できない問題を対処した

供養：画像のサイズ（width/height）を取得するやつ。

Next.js を 10 から 11 へあげてみたのと他にもちょっと

請求書作って送るまでやってくてるinvoyは便利なんだよなー

Next.jsのinitializeをしてみた

Next.jsのISRをVercelを使わずに実装する

ディレクトリ構造をmdで表記することがあったのでメモ

bundleサイズが80%削減されたFireBaseのベータ版を使用してみた

ブログのアップデートを行った

Typescript error: Cannot find name 'Response' というエラーが出た

React の arrow function で react/prop-types が出た

ReactNativeの開発環境メモ４ - storybook編

ReactNativeの開発環境メモ３ - husky & lint-staged編

ReactNativeの開発環境メモ２ - Prettier編

ReactNativeの開発環境メモ１ - ESLint編

できるだけ意識高くやっていきたいやつ

スターフェスティバル Advent Calendar 2020 の21日目です。はじめにLCDを使って久々にarduinoで遊ぼうと思っていたのですが、うまいことプログラムの書き込み出来ずに21…

いろいろあったのでゲームを作ってみた

はじめにVue.jsで素早くLPを作らなければならなくなった。ビルドするのにwebpackやgulpなどがあるが、もっと手っ取り早くできる方法はないかと調べたところ、parcelを発見した。P…

Parcel + Vue.js で素早く環境を作る。

エラーが出た。Access to XMLHttpRequest at 'http://hogehoge.com' from origin 'http://fugafuga.com' has bee…

よくあるクロスドメインの対応

現象$ cordova run androidandroidで実機動作時に、以下のエラーが出た。Failure [INSTALL_FAILED_UPDATE_INCOMPATIBLE]解決方法…

Code Lab 🤔

Timeline