はてなブックマーク

「目的の場所に最短で行け」 これが本記事において、僕がもっとも伝えたいことです。 アプリを開く。よく使うページを開く。タブを切り替える。パソコン作業で必ず発生するこれらの作業をトラックパッドや方向キーを使って行っているのであればぜひこの記事を読んで欲しいです。 いつもの作業が数倍早くなることを約束します。 対象者 Macユーザー 新卒社会人や大学生でパソコン操作を速くしたい人 きっかけ 同僚がパソコン作業しているのをみた時に「もっとこうしたらいいのに、、、」と思うことが頻繁にあり、これはまとめて教える人や機会がないのが悪いんだと思ったことがきっかけです。 基本的な考え方 カーソル操作を極力減らして、キーボードだけで操作が完結するようにする。 移動によって作業が中断される時間をできるだけ短くすることが目標です。 ケースごとの移動方法 PC内での移動を図にしてみました。(これらができたら十分だ

技術ブログの続け方ガイド こんにちは！ITベンチャー企業で半年間働いている駆け出しエンジニアです👨‍💻 今回はエンジニアで働く上でテックブログを続けるためのモチベーションの保ち方を記事にしてみました。 テックブログって敷居高いしめんどいよなぁ！？ 技術記事を発信する人材は重宝されるらしい。 ただ、僕は現段階で技術記事って面倒くさいし敷居が高いな〜書くネタもないな〜🐹 と思ってしまうのが事実としてあります。 僕だけなのかな？と思って調べてみたら… みんなめんどくさがってるやんけ！！！！！ そこで、めんどくさがりな僕たち向けにテックブログの続け方をノウハウとしてまとめてみました。 みなさんのモチベーション維持に貢献できれば嬉しいです👍 1. 初学的なところも書いてみる こんなの書いても誰のためにもならないんじゃないの…？😭 ということでも書いてみるのは大事である。 自身が悩んだり共感

こんにちは！saimyonです👶 今回はPlaywrightでリクエストを確認する方法について書きます🎭 はじめに みなさん、Webアプリケーションを開発していてこんなことはありませんか？ APIは触ってないけどUIを刷新した！素敵！美しい！🥰 でも、新UIでぽちぽちした時に投げられるリクエストって、本当にこれまでと同じ形になっているの…？🤔 …もう不安で不安で夜しか眠れないですよね。 こういうリグレッションテスト的なことを「Playwrightでできないのかな？」と思い調べてみたところ、公式ドキュメントに載っている2つの方法で達成できそうだったので、そちらを紹介します！ Playwrightでリクエストを確認する方法 準備 今回はPOSTリクエストのボディを対象とし例を紹介したいのですが、手軽にPOSTできるWebサービスがなかなか思いつかず…最終的にGoogleフォームに行きつ

こんにちは！ソーシャルデータバンク株式会社・開発部のくすみです。 いきなりですが、みなさん！ この数式の答えはなんでしょうか？ 0.1 + 0.2 = ? あなたが人間であれば 0.3 を頭に浮べてくれたと思います。 しかし、コンピュータの世界では 0.3 にはなりません。 実際にあなたの環境で console を叩いて確認してみましょう。 右クリックで「検証」を開いていただき、console タブを開いてください。 無事に開くことができたら、 console の中に0.1 + 0.2 === 0.3を入れてみましょう 0.1 + 0.2 === 0.3 の結果は false になりました…。 詳細を確認すると… なんと！ 0.1 + 0.2 は 0.30000000000000004 だそうです。 なぜ、0.1 + 0.2 がこのような結果になるのでしょうか？ その原因は... 10 進

こんにちは🌤 ソーシャルデータバンクのデザインチームでインターンをしている河合です。 普段の業務では、弊社のプロダクトであるLinyのUI改善やデザインシステム構築に関する業務、さらに社内で使うシステムのUIデザインをしています！ この記事では、私が他職種（主にエンジニア）にとって見やすいFigmaでのデザインデータ作成を行うために、日頃心がけていることについてお話しできたらと思います。 前提：UIデザインに従事するのであればマークアップの知識はあったほうがいい 「デザイナーはコードも理解できたほうがいいのか？」という議論は業界でたくさんあるかと思いますが、個人的にはデザイナーもエンジニアリング領域の知見は持っておいたほうがいいと思っています。 なぜならデザイナー（特にこの記事でいうデザイナーはデジタルプロダクトのUIデザイナーを指す）は、「絵を描く人」ではなく「開発者」である からです

リアルタイム通信について 以前リアルタイム通信についてまとめた記事を執筆しました。この背景として、他ユーザの予約がリアルタイムに反映される予約管理アプリの開発があり、予約のトランザクションエラーを防ぐための一貫性を第一としたリアルタイム通信が必要でした。 しかし、PollingやLong Pollingによる通信はリクエスト間隔や更新間隔に依存するため、その間に他ユーザの予約が挟まるとトランザクションエラーを引き起こします。何より毎秒何件も予約が発生するようなアプリケーションではないことから、無駄なHTTP通信が発生するため負荷の面の課題が大きいです。 一方、SSEはchunkを用いるためコネクションは最低限で済みます。しかし、コネクションが一時的に切断された場合、その間のデータ更新を追う機能はプロトコルレベルではないため、SSEの再接続に対応するための実装コストが増えます。また、同様にH

はじめに はじめまして！ ソーシャルデータバンク企画チームの塩浦です。 私の仕事は、弊社のプロダクトである「Liny」のサービス価値向上のために新しい機能を考えたり、既存機能を改善することです。 さまざまな機能を開発していく中で、「すごく頑張って作ったのにあんまり喜んでもらえない！？」という経験をすることがあります。 開発に携わる人間であれば、誰しも経験したことのある悩みではないでしょうか？ 今日はプロダクト作りのあるあるとも言える「せっかくリリースした機能が"喜んでもらえない"」現象の原因と対策について、私の経験を中心にまとめてみたいと思います。 なぜ喜んでもらえないのか せっかく作った機能がユーザーから喜んでもらえない原因を、「3つのない」としてまとめてみます。 「3つのない」とは 私たち開発者目線で見ればユーザーに「喜んでもらえない」という状況ですが、ユーザーの立場に立つとどうでしょ

イントロ 皆さんこんにちは。デザインチーム和田です。 私が現在のソーシャルデータバンクに転職したのが2023年の2月になるのですが、1人目のUIデザイナーとして採用していただきました。 1人目ということで珍しいのか、社内の方から「どうやったらUIデザイナーになれるんですか？」という事をたまに聞かれたりします。 この質問に端的に答えるのは意外と難しく、仕事や実践を通して少しずつできるようになっていった、というのが正直なところです。ですがもう少し内容を深掘りし、UIデザイナーになるのに「これは必要だったな...」という要素を紹介したいと思います。 簡単なキャリア紹介 私は元々エンジニア歴が長く、プロダクト開発をきっかけにUIデザイナーにジョブチェンジしました。UIデザインはフロント実装の傍らやっていただけだったのですが、徐々にUIデザインを専業に近づけていった感じです。 バックエンド -> フ

■はじめに こんにちは。TKです。 私はラーメンが好きです。多い時は週5くらい食べてます。 話は変わりますが社内のnotionに「つよいエンジニアになるには！」的なページにこんな事が書いてありました。 「心...?心で理解するってなんだ...?」 「そんなことより今日は何のラーメン食べようかな・・・」 「・・・これが・・・そうか」 「この丼にあるものが」 「 心 か 」 というわけで僕が好きなラーメンでオブジェクト指向の3要素を例えて ”心”で理解したいと思います。 ■オブジェクト指向の3大要素 1. クラスとインスタンス（カプセル化） 一般的な説明 オブジェクト指向の中でも最も基本的な仕組みです。 クラスは英語のclassで「分類」「種類」といった「同種のものの集まり」という意味を持ちます。 インスタンスは英語のinstanceで「具体的なモノ」「実例」を意味します。 OOPで作られたプ

イントロ 皆さんこんにちは。デザインチームの和田です。 突然ですが、皆さんはデザイン4原則をご存知でしょうか？ 近接：関連する情報は近づけよう 整列：一定のルールに従って並べよう 強弱：要素に強弱をつけ、優先度を伝えよう 反復：繰り返すことで一貫性を持たせよう エンジニアの方の中でもデザインに興味のある方は、書籍などで見聞きした事があるかもしれません。 4原則さえ守れば、あなたのデザインは絶対良くなる!? こんな感じで紹介されているのですが、4原則を学んだだけではデザインはすぐに良くならないことの方が多いです。この原則だけで十分いけるよ！という方はかなり几帳面な方、もしくは審美眼がすでに備わっている方だと思います。 ここでは、ありがちなミスと突破口となるヒントを紹介したいと思います。 まずは観察 まずはこちらのサンプルをご覧ください。 一応デザイン4原則に従ってデザインしたものなので大きく

リアルタイム通信とは そもそも「リアルタイム」の意味は界隈によって様々ありますが、本記事ではWEBアプリケーションにおいて「サーバ側の更新によりクライアント側も更新される」という意味合いで進めていきます。つまり、リロードしなくても自動でページが変化するようなアプリケーションを手助けしてくれる通信を「リアルタイム通信」とします。例えば、LINEやSlackのようなライブチャットや、Google Documetなどのコラボレーションツールが挙げられれます。 リアルタイム通信技術 WEBアプリケーションはHTTP通信によって成り立っています。HTTPの大きな特徴は以下の3つです。 クライアント/サーバモデル リクエスト/レスポンス ステートレスプロトコル それぞれの説明は省きますが、HTTPにおいて、サーバがクライアントからの各リクエストを独立して扱うため、基本的に連続したリクエスト間での状態を

こんにちは！saimyonです！ Social Databank Tech Blog Advent Calendar 2023の14日目です。 今回はCircleCIにPlaywrightを組み込んだ話をします🎭 きっかけ 私は弊社製品「Liny（リニー）」のQA担当として日々品質を格闘しております。 LinyのE2Eテストは現在、全て手動で実施しています。 そのため、新機能を入れた際にデグレが発生していたとしても、そのデグレが（ユニットテストでは発見できず）E2Eテストでしか発見できない場合、検証項目から漏れているとそのデグレに気付けない状況です。 ということで、この状況から脱却すべく、E2Eテストの自動化に取り組むことに。 LinyではCI/CDにCircleCIを使用しているので、そこにE2Eテストを組み込むこととなり、本記事を書くことと相成りました。 デグレ、本当に怖い。 やった

イントロ 皆さんこんにちは。デザインチームの和田と申します。 Social Databank Tech Blog Advent Calendar 2023の8日目です。 どんな規模の開発であれ、UIのデザインする中で灰色というのはとにかく種類が増えやすく、管理が大変ですよね。 薄い、普通、濃いの3色だけだと足りない、しかしデザインシステムを参考しようにもパレットには10色以上用意されておりどう使えばいいか分からない、という方も多いのでは無いでしょうか。 デザイン庁デザインシステム Sumiより 13色用意されています そもそもなぜ灰色は増えてしまうのか？ よくある決め方として、テキスト用、枠線用、hover用...と用途別に決めていく方法があるかと思います。しかしこの決め方はあまりおすすめしません。Componentは機能拡張とともに増えますし、同じテキストでもここは濃く、ここは薄くしたい

1. はじめに Social Databank Tech Blog Advent Calendar 2023の5日目です。 今回はSocial Databank（以下SDB）でQAチームを立ち上げた話をします。 SDBにQAチームができたのが1年前。それまでQAという組織が存在せず、各メンバーがそれぞれの機能・コードをレビューし、リリースを行なっていました。 そのため、サービスの規模や開発メンバーが増えるにつれて以下の課題が発生しました。 品質が各メンバー・PJに依存する a. 検証項目が作成する人によって粒度が変わる b. テストコードを書くPJとそうでないPJがある c. 仕様が特定のメンバーに属人化している 品質に関するルールや規定がない a. 障害が発生しても有識者が場当たり的に対応している b. リリースに関する判定基準がない 以上の理由から、QAチームを立ち上げ組織全体の品質向

こんにちは😊 kesojiです。 この記事はSocial Databank Tech Blog Advent Calendar 2023の4日目です。 弊社では開発ツールとしてJetBrains社のIDE (PHPStorm, WebStorm, GoLandなど) を法人プランで契約しています。 こだわりがある人は好きなIDEやエディタを使ってもらっても良いのですが、ドキュメンテーションをJetBrainsの場合とVSCodeの場合〜と分けたりするのは面倒なので、 基本的にはJetBrainsを使用するということにしています。 さて、本題ですが私はVimが好きだ(です)。 (宗教)戦争をするつもりは無いので一応補足すると、 VimでもEmacsでも、最低限の手の動きで最大限の効果を出すような思想が好きです😄 各種IDEもVSCodeでも、Vimプラグインを入れて使っていればVimだと