なぜ家事は紛争を呼ぶのか 私の周りも結婚・出産をする友人が増えました。 そこで必ずと言っていいほど上がる議題がこれ。 「夫（妻）がぜんっぜん家事をやらない」 日本で婚姻制度が発足してから早100年。 これだけ長い年月「夫婦」という形が取られているのに、なぜこんなにも初歩的な不満が世に蔓延するのでしょう。 私も妻と結婚して5年経ちます。 知人からの愚痴なども収集した結果、いくつかの原因が考えられました。 その１． 人は「自分が一番やってる」と思う生き物である これは私がサラリーマンとして働いてて出した結論です。 殆どの人が「自分は結構仕事してる」と思いがちです。（これはマジ） 少なくとも同等の仕事量だとまず間違いなく「自分のほうが仕事してる」と勘違いします。 そのため、仮に夫婦が全く同じ量の家事を分担してたとしても、 それが正確に見える化されない限り、必ず「俺(私)のほうが家事をやってる」と

はじめに こんにちは、モチベーションクラウドの開発にフリーのエンジニアとして参画している@HayatoKamonoです。 この記事は、「モチベーションクラウド Advent Calendar 2018」8日目の記事となります。 概要 モチベーションクラウドの開発チームでは2018年10月から改善期間と称して、開発に関するガイドラインやルール作りをはじめとする、様々な改善活動に取り組んでいます。 その改善活動の一環として作成した「コンポーネント設計・実装ガイドライン」を今回は説明を交えながらご紹介して行きたいと思います。 目次 Componentの粒度に関して Container ComponentとPresentational Component コンポーネントの共通化に関して コンポーネント実装時の細かな決め事 CSSに関して まとめ Componentの粒度に関して これまではフロント

はじめに どんなソフトウェアエンジニアも拡張しやすくメンテナンスしやすいソフトウェアを作りたいと思っているはずです。また、どんなプロダクトマネージャも同様に拡張しやすいシンプルな要求を作りたいと考えているはずです。 しかし、将来の不確実性や発展性に対して見通しを立てるのは難しいものです。そのため、開発チームの思いとは裏腹にソフトウェアの複雑性はどんどんと増大していきます。気がついたら技術的負債と呼ばれるような手もつけられない泥団子になってしまうということもしばしばです。誰もが生産性を下げるために機能を追加したいわけではなく、ビジネス価値を提供するために機能を追加したいだけなのにです。 このような状況を避けるためにはどうしたらよいのでしょうか。今回はその一つの手段として、要求には隠れた「意図」があり、それを発見していくことの重要性についてまずはお話しします。さらにわかりやすい要求が持つ仕様の

2020年後半版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTipsJavaScriptTypeScriptVue.jsフロントエンドvue-cli はじめに 最近iCAREさんの所でVue.jsを一緒にやらせていただいているのですが、フロントの技術スタックがGraphQL + Vue.js + TypeScriptで開発しており、そこでのVue.jsの開発体験がかなり良く、iCareさんの詳細なノウハウを公開しても良いと言っていただけたので、言語化し、整理して、共有出来たらと思います. ※ いつも通り記事の内容に意見がありましたら直接編集リクエストをください 前置き 今回のサンプルは@vue/cliを利用し、プリセットはTypeScriptだけいれときました. versionは2020年7月16日

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

ブログパーツなどでよく使われる、HTMLタグをコピペするだけでサードパーティーのコンテンツを表示させることができるウィジェット。 TwitterやFacebook、はてなブログ等いろいろなサービスがウィジェットを提供していたり、表示をサポートしていたりしますね。 先日GitHubのコントリビューションチャートを任意のページに貼り付けられるウィジェットYourcontributionsを作ったので、これを例にしてiframeを使ったウィジェットのベーシックな作り方をメモ。 GitHubのcontributionを見られるウィジェットを作った : Query OK. http://queryok.ikuwow.com/entry/github-widget-released/ こんなウィジェットです。 Yourcontributions: GitHub Contribution widget

概要 AWS Amplify Advent Calendar 2019、19日目はAWS Amplifyの新機能MockingでGraphQL API開発スピードを爆上げする方法について書いていきます！ Amplify Mockingとは 2019.08.07に発表されたAmplify CLIの新(というにはいささか時間が経ってしまった)機能です。$ amplify pushはAWS CloudFormationのスタックの参照と変更を行うため、それなりに時間がかかってしまいます。$ amplify mockコマンドを使用すると、$ amplify pushでクラウドリソースに変更反映する前に、変更後の動作確認をローカル環境で行うことが可能です。 現在Mockingが提供されているCategoryは、以下の3つです。 api(GraphQL): AWS AppSync + Amazon D

はじめに ソフトウェア開発のチームの生産性や健全性というものは、内部の体感的として理解できるものの、外部の人間からは見えにくいものです。こういった情報の非対称性は開発チーム外の人々との関係の中での問題の原因になってきました。 また、複数の開発チームやプロダクトを束ねるEM、CTOや、管理職にとってそれぞれの状況を客観的な数字やグラフで可視化することは、全体的な戦略を考える上でも重要な参考情報になります。ですが、アンケートやプロジェクト管理を増やすほど、どんどんと開発メンバーに負担をかけてしまうことになり、計測のし過ぎによる疲れなども誘発してしまいます。 本稿では、gitリポジトリのログ情報から、いくつかのグラフを生成し、チームの状況を可視化するためのツールgilotを作成したので、その目的と意図、そして使い方、注意点を解説します。 アプローチ方法 gilotのアプローチは、git logの

はじめに Vue.jsを普段開発で使っていて、SVGとの相性がすごく良いと感じてます。 Vue.jsのドキュメントでもアニメーションなどの紹介もされていますが、 今回はブラウザで編集可能なGUIの土台として、 使えそうなTipsを書いていきたいと思います。 Vue.jsのプロジェクトを作成していく 今回使っていくのはVueCLI v3.xの環境で開発していきます。 標準でプロジェクト作成のUIなども付いており、非常に開発しやすいです。 SVG内でズーム・パン風の機能を実装してみる 早速ですが、SVG内でズーム・パン風の機能を作って見たいと思います。 下記のような感じになります。 （MacBookProなどのノートPCですと二本指で開いてズームしたり、 二本指でスライドして、移動したりして、操作が実感しやすいと思います。） コードで実際に実装するとこのような形です。 移動の場合は差分値分移動

Amplify CLI GraphQL TransformとディレクティブでAppSync+DynamoDBをいじってみよう！(@model @auth, @key)AWSGraphQLAppSyncAWSAmplify 概要 AWS Amplify Advent Calendar 2019、7日目はAWS Amplify CLIでAWS AppSync + Amazon DynamoDBをセットアップするschema.graphqlで使用可能な3つのディレクティブ(@model、@auth、 @key)を触っていきます。 想定読者 amplify add api、なんとなく使ったことあるけど、@model、@authとか@keyよくわからん！という方に向けた記事になります。検証用アプリケーションはReactでの実装ですが、Reactの知識がなくても大丈夫です。 動作確認環境 @aws-a

無料で Vue.js + express で作った API を Azure Static Web Apps でホストしてみようAzureTypeScriptAzureFunctionsAzureStaticWebApps Build 2020 見てたら Azure App Service Static Web Apps が公開されました。現在は public preview ですが、Azure Functions と統合されていて API も統合されているのは便利そうだなぁと思いました。控え目にいって最高！ Cosmos DB も 5GB で 400RU(性能の指標です) まで無料なのでフロントから API とデータを保存するところまで全部無料でいけるようになったのは大きいですね。 今回やりたいこと 今回は、Azure App Service Static Web Apps (長いので S

Java 14が2020/3/17にリリースされました。 Java SE 14 Platform JSR 389 ダウンロード OpenJDKサイトからダウンロードできます。 https://jdk.java.net/14/ MacやLinuxでのインストールにはSDKMAN!をお勧めします Oracle OpenJDK以外に無償で商用利用できるディストリビューションとしては、次のようなものがあります。 AdoptOpenJDK Azul Zulu Community Liberica JDK LTSではないのでAmazon Correttoではリリースされないようです。 アップデートは4月に14.0.1が、7月に14.0.2がリリースされることになります。 Oracle JDKは開発用途には利用できますが、商用利用にはJava SE Subscriptionを購入する必要があります。 J

やりたいことはタイトルどおり、 AWS ECR上のDockerイメージをpullせずにDockerタグをコピーしたい。 なぜかというと、CIからECSにデプロイするときに、 hoge:current を一旦 hoge:old に退避して、 hoge:latest を hoge:current に上書きしたいみたいなことがあるんだけど、イメージがそこそこサイズがでかいと、一旦 docker pull して docker tag して docker push し直すみたいなのが時間がかかる。 AWSの公式ドキュメント見てたら、やりたいことはdockerコマンドを使わずにaws-cliでできそうだったのでやってみたんだけど、 参考: AWS CLI を使用してイメージにもう一度タグを付ける https://docs.aws.amazon.com/ja_jp/AmazonECR/latest/us

はじめに Java アプリケーションをコンテナ化するツールに jib があります。 GitHub の README には、Docker のベストプラクティスを知らなくても最適な Docker イメージを作ってくれると書かれています。 Jib builds optimized Docker and OCI images for your Java applications without a Docker daemon - and without deep mastery of Docker best-practices. そんな Jib がどのくらい Docker イメージのベストプラクティスを満たしているのか調査してみました。 準備 検証には、Spring Initializr で作成した Maven プロジェクトを使います。 jib-maven-plugin の README の通り、

ソフトウェアテストの小ネタ Advent Calendar 2019 - Qiita２日目の記事です。 初日の方が100以上のいいねを集めていて非常にやりづらいですが、初志貫徹して、本当の小ネタを書きます。 ソフトウェアテストをしていると、不具合の再現手順をレポートする機会も多いですが、文字だけよりも画像あり、画像ありよりも動画ありのほうがわかりやすい場合もあります。 そんなとき、おそらくどの職場でも使えて一番手っ取り早い方法として「パワポで動画をとる」という手があります。 やりかた パワポを開いて、挿入タブの「メディア」にある「画面録画」を選択します。 （パワポのバージョンによって異なる可能性もあるので、探してみましょう） 画面が薄く白くなって、上のほうにメニューが出てくるので、範囲選択をしましょう。 範囲選択すると赤い点線で録画対象範囲が囲われます。 ここまでできたら録画ボタンをクリッ

この記事は DeNA Advent Calendar 2019 の12/17(火)の記事です。 こんにちは、ゲーム事業部エンジニアの今江です。普段はゲームのサーバサイドの開発をやっています。 この記事では、社内の勉強会でニコニコ風コメントを作ってみたら良さそうだった話と作り方について紹介します。 最近は、Google Cloud Platform（GCP）を使って開発をしているので、この記事でもクラウドサービスはGCPを使っています。 事前準備 GCP: https://cloud.google.com/ Google Cloud SDK: https://cloud.google.com/sdk/docs/ node.js: v10.15.1 electron: v1.4.13 背景 DeNAでは社内の勉強会が結構活発に行われていて、チーム内、ゲーム事業部内、全社規模、特定の技術に関して

記事を移転しました。 概要を読んでみて、気になる方は続きをご覧ください。 結果だけ書くと yarn　の方が速くて簡潔です。 また必要な状況はかなり限定的ですがyarnにあってnpmにない機能も存在します。それに関する内容にこの記事で若干触れました。気になる方はご覧ください。 (比較した方法・バージョンとかは下を読んでください。誤りがあれば意見いただけると嬉しいです。） 続き -> https://blog.minimalcorp.com/users/jigen/posts/3c08ecb4391ae4836cd84d27378440ae Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back usefu

Keycloak by OpenStandiaの21日目は、Keycloakをコンテナ環境で動作させてみようと思う。ただ、単体のDockerコンテナとして動作させるのは非常に簡単で、Docker で始める Keycloakなどの記事で既に紹介されている。そこで今回は、 先月行われた AWS re:Invent 2017 にて発表された AWS Fargate 上で動かす さらに、Keycloak はクラスター構成 (HA構成)とする ついでにCloudFormationでAWS環境の構築を自動化しちゃう をやってみました！ AWS Fargateとは? 最初にAWS Fargateについて簡単に紹介しておく。FargateはEC2インスタンス管理が不要なAWSの新しいコンテナ実行環境サービスである。従来、AWSではコンテナ環境としてAmazon ECS(Elastic Container

概要 2019/05/22 CIのcron設定について注意事項を追記 コンテナの脆弱性スキャナを作ったので紹介します。ここでの脆弱性はWebサービスの脆弱性診断で見つかるようなタイプのものではなく、セキュリティアップデートが提供されるようなものを指しています。重ねて説明しますが脆弱性診断で見つけるような脆弱性ではなく、CVE-IDなどが付与される脆弱性です。 まず最初に、ツールは以下にあります。 https://github.com/knqyf263/trivy CIで簡単に使えるように1コマンドで実行可能なものにしました。ただイメージ名を指定するだけで利用可能です。 これだけです。イメージ名を指定すれば勝手にレジストリから取得するので手元にイメージがある必要はなく、それもDockerコマンドに依存せず実装してあるので実はDockerのインストールも不要です。 AWS/GCR等のプライベー

Vue.js に TypeScript を導入する障壁の一つに、状態管理の定番である Vuex が TypeScript と相性が良くないという課題があります。状態管理はアプリケーションの中枢（モデル）とも呼べ、型システムによる保守担保が求められます。この課題に対し、これまでコミュニティから様々なアプローチが試みられました。 Vue.js 界隈における TypeScript の型推論といえば、クラスベースによるものが一般的です。先行きの不透明なデコレーターだけでなく、関数型の流行によるクラスベースへの不安感は、いっそうユーザーを困惑させて来ました。いま Vue.js 界隈は、型推論と標準準拠の板挟みに葛藤していると言っても過言ではないでしょう。 私はこれまで TypeScript 芸人としてこの Vuex 型課題に取り組み続け、書籍執筆などで提案を行なって来ました。その過程で得た知見から、