なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】UXUIDesignUIデザイン画面設計 1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。

こんにちは、リファクタリングが大好きなミノ駆動です。 この記事は READYFORアドベントカレンダー2021 、初日の記事です。 なにこれ？ 苦労して執筆した技術記事は、伝えたい人にしっかり伝えたいですよね。 また、最後まで読んでもらいたいですよね。 一方で、構成などに課題があって、伝えたい人になかなか伝わらないことがあります。 この記事は、伝わる記事の書き方について、私の個人的なノウハウを書き記したものです。 これからアドベントカレンダーの記事を執筆される皆さんにとって、少しでもお役に立てられれば幸いです。 この記事のゴール 以下の理解を得ることをゴールとします。 以下2つの要件を踏まえた記事構成を心がけること。 構成要件①：技術を紹介する上で最低限説明の必要な内容を網羅すること。 特に課題をしっかり伝えること。 構成要件②：読み手が段階的に理解しやすい順番になっていること。 告知の仕

はじめに エンジニアやデータサイエンティストの人材育成のためのオープンソースな教材を探していたらMicrosoftがGitHubでかなり質の高い教材をweb開発、データサイエンティスト、機械学習、IoTの四項目を対象に提供してるのを発見したため共有したいと思う。 正直、マイクロソフトと聞くとGoogleやらFacebookに比べていけてないイメージを持っていたけど、実際にMicrosoftのGitHubレポジトリを見て、彼らはここ数年で大きく変わったように思える。特に人材育成や学習教材に関しては世界一かもしれないなんて思っています。本記事では筆者が自信を持っておすすめするMicrosoftのオープン教材を紹介するのでぜひ自身の勉強や人材育成に生かしてもらえれば本記事を執筆した甲斐があります。（もちろん僕がお勧めしているだけでなくてGitHubのスター数も多く世界的に認められています！） こ

A-CSM（Advanced-Certified Scrum Master）は、Scrum Alliance®による認定資格です。CSM（Certified Scrum Master）の上位資格という位置づけであり、研修は2020/11/30～2020/12/04の5日間で、オンラインで開催されました。日本では初開催、のはずです。 コースの概要については Odd-eのサイト をご覧ください。 講師はAndreas Schliep(Andy)です。 この記事では、A-CSM研修の内容や得られたものについてふりかえりをしていきます。 研修の中身をすべてカバーするような記事ではありませんが、興味を持っていただける人が増えれば幸いです。 背景 この記事を書くにあたって、私の背景を明らかにしておきます。 アジャイル開発に携わったのは2017年からであり、CSMを受講したのは2018年でした。 201

はじめに 文字列処理に関する3種類の自作関数を紹介します。 具体的には、主に以下の2点を目的としています。 ・正規表現の円滑な適用 ・英字 / かな / カナ / 漢字 / 数字 の識別 ☆ 02/26 時点で全体構成を刷新しました。 下準備

逃げるプログラマー、避けられない壁 Web系アプリケーション開発をするとなると、React, Angular, Vueといったフレームワークの話題は避けて通れないのだけど、面倒にかまけてみて見ぬふりをしているデヴェロッパー諸君は多いと思う。 自分もそういうダメグラマーの一人でした。 だが、Nodeベースでバックエンドを開発していると、どうしてもフロント側が必要だし、使いたいライブラリーや機能、操作性を組み込むためには、フロント側のフレームワークからは逃げられず、立派なフルスタックデベロッパーになる為に、重いけつを上げ、学習することにしたのであります。 React, Angular, Vueの３大フレームワークをざっと調べてみた際に、一番取っつきやすそうだったReactをチョイス。 しょせんはHTMLとCSSとJavascript で、結局Reactは何をやっているかというと、しょせんはHT

洗濯物の乾き具合を知りたくて、M5StickCで物干し部屋の湿度を測って Azure IoT Central で分かるようにしてみたAzureおうちハックM5StickCAzureIoTCentralQiitaAzure はじめに 少しずつ秋が近づいてきて、真夏のように洗濯物がすぐに乾いて、すぐに畳めるという時期もだんだん終わりに近づいてきてます。そして、これから冬にかけて少しずつ大変になってくる洗濯物の乾かない問題。 そこで今回は、M5StickC と Azure IoT Central を活用して、少しでも家庭の課題を解決できるようにしたいと思います。 洗濯物の乾燥についてはこんなことを思っています。 洗濯物が乾いたタイミングを知りたい 乾いたのが分かったら、手が空いているうちに畳みたい たくさん干し過ぎると生乾きっぽくなって困る もし、乾くまでに長く時間が掛かっていたら、コインランド

【VS Code + Marp】Markdownから爆速・自由自在なデザインで、プレゼンスライドを作るMarkdownVisualStudioCodeDraw.ioMarpvega TL;DR Visual Studio Code上で、Markdownから、こんな感じのデッキを生成できるようにします。 使用したファイル類は、GitHub tomo-makes/marp-styles にまとめました。 きっかけ 叩き台となる資料がなく、急ぎプレゼンをする機会があり、Marpで作成した 内輪では使っていたが、多くの目に触れるのは初めてで、もう少しデザインを調整したいと思った 今後も使いまわせるものを、スニペット、およびサンプルテーマ化しておこうと思い立った ついでにいろいろな図表の生成とデッキへの入れ方、必要そうな配色、素材のリンクをまとめておきたい Marpとは Marp: Markdown

以前に以下のツイートをしました。 この論文の凄さは、「DNNは学習していない」ということ。学習済モデルを全面的に信用している。それでAUC95.80％は驚愕。 凄まじく早い（学習）ので、エッジなんかで威力を発揮しそう。 （続く） https://t.co/1u6BUQsJnt — shinmura0 @ 2/27参加者募集中 (@shinmura0) September 14, 2020 個人的に、この論文は画像分野において異常検知の決定版と認識しています。 ただ、弱点を挙げるとすれば「可視化手法がない」ということです。 本稿では、この手法で異常検知しつつ、異常部分を可視化する方法を模索します。 ※コードはこちら 先に結論 本稿のターゲットは、「高精度に異常検知しつつ(detection)」、「低速+ある程度の 可視化(segmentation)」です。本稿の内容が適合していない場合、お好

再発防止策を書くのは難しい。 良い再発防止策 良い再発防止策について、順位付けするとしたら、 その種類の問題について二度と意識することがなくなる解決策 その種類の問題を開発時に自動的に検知することができる解決策 その種類の問題が発生しても自動的に復旧することができる解決策 その種類の問題が発生しても影響が局所化される、フールプルーフ、フェールセーフになる解決策 と言うのは意識したいと思いつつ、やはり難しい。 再発防止はむずかしい 障害の再発防止策は、 メカニズム ツール ルール チェックリスト の順番に検討せよ。と言われても、急いで書けなんて言われると「次回からは複数人でチェックします。」とか「チェック項目を追加します。」とかいう徹底できなそうな「反省文」になってしまう。 まさにこの有名な猫...。 **「なぜミスを繰り返すのか」「どうすればミスを防げるのか」を真剣に考えていないことがミス

開発環境にChromeを選ぶなら知っておきたい12のテクニック Photo by Morning Brew on Unsplash さて、何らかの理由で、開発ブラウザとしてChromeを選んだとします。次は、デベロッパーツールを開き、コードのデバッグを開始します。 Consoleパネルを開いてプログラムの出力を確認したり、Elementsパネルを開いてDOM要素のCSSコードを確認したりします。 でも、Chromeデベロッパーツールを本当に理解していますか？実は、パワフルだけど知られていない機能がたくさん用意されていて、開発効率を大幅に改善できるのです。 ここでは、最も便利な機能を紹介します。お役に立てたら嬉しいです。 ChromeのCommandメニューから始めましょう。ChromeのCommandメニューは、LinuxのShellのようなものです。コマンドを入力してChromeを操作で

役立つYouTubeのチャンネルまとめ 数学、物理、アルゴリズム、プログラミング、などなど自分が使う技術に役立ちそうだな、困ったときによく見たなと思うチャンネルを紹介する。 取っ掛かり、ハマりがち、コツみたいな物が拾える。数学がメイン。随時更新していくつもり。 当たり前だけどちゃんと本も読んで勉強するんだぞ。 背景 YouTubeは視聴する登録チャンネルの数が増えると、チャンネルが埋もれて発掘困難になりがち (chrome拡張でできるチャンネルのフォルダ分け機能は、ぽちぽち登録するのも面倒で、そのフォルダの中から掘り出すのも難しい) モチベが上がる(おべんつよしたい)チャンネルを探してるうちに湧いてくる、わんにゃんコンテンツ(だいちゅき)に流され一日が終わるため、 モチベが上がる有用なチャンネルにすぐにたどり着くために、よく使うQiitaに列挙しておくことにした Streamや大学専用サイ

はじめに 私はこれまで機械学習のパラメータチューニングに関し、様々な書籍やサイトで学習を進めてきました。 しかしどれもテクニックの解説が主体のものが多く、 「なぜチューニングが必要なのか？」 という目的に関する記載が非常に少なかったため、体系的な理解に苦労しました。 この経験を後世に役立てられるよう、「初心者でも体系的に理解できる丁寧さ！」をモットーに記事にまとめたいと思います。 具体的には、 1. パラメータチューニングの目的 2. チューニングの手順とアルゴリズム一覧 3. Pythonでの実装手順 (SVMでの分類を例に) の手順で解説を進めます。 独自解釈も含まれるため、間違っている点等ございましたら指摘頂けると有難いです。 なお、文中のコードはこちらのGitHubにもアップロードしております。 2021/9/6追記：LightGBMのチューニング実行例追加 以下の記事に、Ligh

親記事 : https://qiita.com/Regpon/items/1116679adadd8fb76f3f ドメインモデルで設計する狙い オブジェクト指向プログラミングにおいてかなり重要な内容となっているが如何せん概念的な内容となっている。ドメインモデルを設計するには幾度とない失敗の経験を重ねていき、常に改良していく精神が重要。そのための指針となる内容なので是非とも押さえておきたい。 それを踏まえてドメインモデルで設計する狙いは以下の通り。 業務的な判断・加工・計算のロジックを重複なく一元的に記述できる 業務の関心事(データ)とコードを直接対応させ、どこに何が書いてあるのかわかりやすく整理する 業務のルールの変更や追加の時に、変更の影響を狭い範囲に閉じ込める ドメインモデルの設計の難しさ ドメインモデルの設計は手続き型(スクリプト型)のプログラミングと比べて設計がむずかしいとされる

大量のメソッドを保有し、数千、数万行単位にぶくぶく膨れ上がった巨大クラス。別名「神クラス」とも「大きな泥団子」とも呼ばれる、長大で複雑で、様々なクラスと密結合で極めて変更が困難なアイツ。 そんな巨大クラスの退治に有効な、命名に関する考え方を紹介致します。 解決したい課題、狙う効果 数千、数万行単位の巨大クラスの登場を抑止する。 巨大クラスを爆砕し、小さなクラス群に分割する。 クラス結合度を下げ、影響範囲を小さくすることで保守コストや変更コストを下げる。 ダメな例 例えばECサイトの「商品」を考えてみます。 よくありがちなのは、商品をそのまま「商品クラス」と設計してしまうこと。 単純な商品クラスは、往々にして出品、予約、注文、発送など、様々なユースケースのクラスと結合してしまいがちです。 商品クラス自体も、結合したクラスに関連する知識(ロジック)を持ち始め、どんどん巨大化複雑化していきます。

仕事で複数のバックエンドから一つのクライアントと疎通するような構成の可能性があり、BFFが使えるかもということで調べてみました。 対象者 BFF(backend for frontend)の概要を知りたい方 どういったメリット、デメリットがあるかを整理したい方 概要 BFF(backend for frontend)とは簡単にいうと、クライアントとバックエンドの中間に位置し双方の複雑性を吸収するような作られたサーバーのことです。雑に書くとこんな感じです。 これが必要になった、背景はクライアントの端末の種類が増加したことそれに伴うロジックの増加です。 例えばweb,スマホ版web,スマホアプリ、デスクトップアプリなど複数のクライアントが登場し、それぞれにメッセージやコンテンツの出しわけを実装しようとすると、クライアント側のコードが複雑化し、冗長なコードを書かざる追えない状態になります。 そう

npm のちょっとしたオプションについては以下を参照。 Step.1 本体と最低限のルールをインストール 任意のフォルダを作成。 C:\workspaces\textlint_work cd C:\workspaces\textlint_work npm init -y npm install --save-dev textlint textlint-rule-preset-ja-spacing textlint-rule-preset-ja-technical-writing 上記で、textlint 本体 + プリセット2つをインストールする。 preset-ja-spacing preset-ja-technical-writing npx textlint --init で、.textlintrc が生成される。 Step.2 追加のルールをインストール 上を参考に入れてみる。 n

Qiitaで期間限定開催中の、「エンジニアによるマネジメント」に関する記事を投稿するイベントへの参加記事です。 マネジメントを始めて悩んだこと 約1年前、アシスタントマネージャーという役職をいただき、エンジニアリングマネージャー（以下、EM）としての業務を開始しました。EMになると1on1やメンバーの目標設定、チームづくり、チームの代表として事業部リーダーズミーティングへの参加などの新しい業務をしながら、それまでのプレイヤーとしての業務も行い、目の前の業務をこなすのにいっぱいいっぱいでした。 そんな中で常に「自分がマネージャーとしてきちんとできているのかが分からない」という不安を持っていました。また、どんなスキルをつけて、どうなれたら正解なのかというイメージが見つからず悩んでいました。 ある時、先輩との1on1で、「（メンバーとの1on1やメンバーの育成を）どうしてそれをやるのか」と問われ

はじめに 私はこれまで機械学習のパラメータチューニングに関し、様々な書籍やサイトで学習を進めてきました。 しかしどれもテクニックの解説が主体のものが多く、 「なぜチューニングが必要なのか？」 という目的に関する記載が非常に少なかったため、体系的な理解に苦労しました。 この経験を後世に役立てられるよう、「初心者でも体系的に理解できる丁寧さ！」をモットーに記事にまとめたいと思います。 具体的には、 1. パラメータチューニングの目的 2. チューニングの手順とアルゴリズム一覧 3. Pythonでの実装手順 (SVMでの分類を例に) の手順で解説を進めます。 独自解釈も含まれるため、間違っている点等ございましたら指摘頂けると有難いです。 なお、文中のコードはこちらのGitHubにもアップロードしております。 2021/9/6追記：LightGBMのチューニング実行例追加 以下の記事に、Ligh

最新の省略テクニック、コツ、秘訣で、JavaScriptコードを最適化する。 開発者の生活というのは常に新しいことを学ぶことで、その変化についていくことは決して難しいことではありません。私は、フロントエンド開発者として知っておく必要のある省略形や機能など、JavaScriptのすべてのベストプラクティスを紹介して、2021年の生活をより快適にしたいと考えています。 JavaScript開発に長く携わっている人でも、コードを追加しなくても問題解決できるような最新機能を知らないこともあるかもしれません。ここで紹介するものは、クリーンで最適化されたJavaScriptのコード記述にも、2021年のJavaScriptの面接準備にも役立ちます。 これは新しいシリーズで、2021年版のJavaScriptコーディングチートシートです。 1. 複数の条件を持つif 配列に複数の値を格納し、includ