はじめに アプリケーション開発部の田村です。自社で運営するサービス開発を担当しています。 現在私が担当するサービスでは、アプリケーション実行環境にAWS ECS Fargateを利用しています。 今回はAWS ECS Fargateとは何か、使ってみて嬉しいことや注意点を説明します。 また自分がAWS ECSを構築した時の手順についてもサンプルアプリケーションを用いて解説していきます。 想定読者 Docker及びDocker Composeを使った経験がある AWS ECS Fargateを使ってWebサイトを公開してみたい モチベーション AWS ECS FargateをAWSコンソールを使って一から自分の手で構築する記事を公開したいと考えました。 TerraformやAWS CloudformationなどのIaCを使った構築ではなく、実際に手を動かして構築することがAWS ECSの理

ごあいさつ みなさんはじめまして、dev.aokiと申します。あっQiitaはTwitterアカウントか！まぁいっか。 IT系でふらふらと仕事をしておりまして、今年9月からオプトに入社しました。 入社前まではSIのプロジェクトやWindowsデスクトップアプリケーションの開発をしておりまして、 クラウドサービスを使ったWebアプリケーションを本格的にやるのは今回初めてでした。 そんなわけで色々と学びがありましたが、 特にネット上にやりたかったことドンピシャな情報が少なく自分が苦労した部分についてまとめて、 今後類似の構成で環境構築したい方の役に少しでも立てれば幸いかなと思い、記録がてら記事を書かせて頂いております。 Qiitaは閲覧専門だったので、書く側になるのはちょっとばかし緊張しております。 内容やら書き方やらに不備がございましたらご指摘いただけると幸いです。 どうぞよろしくお願いいた

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。 その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

一対一の関係のデータは一つのテーブルにまとめるというのが、データベース設計のセオリーです。ですので、特別な事情が無い限りは一対一関係のテーブルを作るメリットはないです。ただ、絶対に一対一の設計はNGというわけでもありません。 一対一の関係が必要な特別な事情の例と、その場合の設計法や注意する点について、今回は取り上げます。 難易度:

Amazon Simple Storage Service (Amazon S3) の HTTPS リクエストを処理するように Amazon CloudFront ディストリビューションを設定したいと考えています。 解決策 以下のステップでは、S3 バケットは Amazon S3 ウェブサイトエンドポイントまたは REST API エンドポイントのいずれかを使用できます。Amazon S3 との連携に関する情報については、「Amazon S3 バケットの使用」を参照してください。Amazon S3 の静的ウェブサイトエンドポイントを使用する場合、CloudFront と Amazon S3 の間の接続は HTTP のみで利用できます。 CloudFront コンソールを開きます。 **[ディストリビューションの作成]**を選択します。 [オリジン] の [オリジンドメイン] で、ドロップダ

はじめに このドキュメントは、クラウド上に構築したSPA＋REST APIのシステム構成を事例としてまとめたものになります。利用したクラウド環境は、Amazon Web Services（AWS）です。 本ドキュメントが、SPAとREST APIを使用してAWS上で開発するシステムの構成例として、今後開発を行うシステム、プロジェクトの参考情報となることを目的としています。 なお、このドキュメントに記載しているシステムは開発中のものであり、実際に運用されているシステムではありません。テストなどで品質を高めていく活動についても、これからになります。その点については、ご留意のうえ、構成例としてドキュメントを参照いただければと思います。 TL;DR このドキュメントに記載しているシステムでは、以下のような構成でAWS上に構築を行いました。 シンプルなSPA＋REST APIで作成したシステムを、A

2019.07.02 スキル 近年、Webサービスの成功には優れたUI/UXデザインが不可欠となっている。そのため、エンジニアにもその領域の知見が求められるようになってきたが、実際は「UI/UXはデザイナーが考える」というスタイルが定着している企業が多く、エンジニアがユーザー体験を考えられる機会が少ないのが現状だ。 だからこそ、サービス開発の現場では、エンジニアとデザイナーの協業が必要となるが、お互いの意思疎通がうまくいかず、スムーズに開発が進まないケースも多いのではないだろうか。 株式会社サイバーエージェントで働く谷拓樹さんは、まだ国内では希少な存在のUXエンジニアだ。現在は、同社のエンジニアリング組織とデザイナー組織をつなぐ役割を担うが、幾多のプロジェクトを手掛けてきた中で、エンジニアとデザイナーの意思疎通がうまくいかない様子を数々目にしてきたという。 そんな谷さんに、サービス開発の現

こんにちは。デザイナの田名網です。 先日、エンジニア向けに社内勉強会をしました。 テーマは、デザインの基礎と、UX/UIについてです。 前回、新卒さん向けに行なった内容（新卒さん向けデザイン基礎研修をやりました。1回目 “デザインってなに？”）が好評いただいたので、基本はそのまま、今度はエンジニアさん向けに開催しました。 このスライドは前回も見ていただいたと思います。 デザイナ vs エンジニア？ 巷では、デザイナ vs エンジニアに関する話で溢れていますね。 その様子は、対立というよりかは、近頃は「いかに仲良くやっていくかノウハウ」とか、「ハイブリッド型のエンジニア/デザイナであろう」といったような 平和な方向にシフトしているような感じがして、個人としては嬉しいです。仲が良い方がいいですね。 それほど言及されるのは、デザイナとエンジニア同士が日頃より論点や着眼点が違ったり、理解し合うのが

これは何 私が所属している株式会社エイチームでは社内勉強会を自由に開ける制度があります。 エンジニア向けにデザインの基礎をレクチャーする会を開いたのですがせっかくだったらオープンにしようと思い、投稿しました。 今回の勉強会では「Webサービスを作る」レベルまでは踏み込めませんでしたが、ちょっとしたUIを作る際の手助けにはなれる気がしています。 なお、勉強会用に書いた原稿なので書き言葉としてあまり適切でない箇所もあります。 ご了承ください。 また、この研修の次の年に行った研修も記事として投稿しています。 設計の話 はじめに：デザイン業務の内訳とよくある誤解 デザイン業務の内訳 まず最初に設計の考え方をレクチャーするのですが、その前に1つ。 普段デザイナーが行っている業務について簡単に説明します。 後の方で話す内容と繋がってくるので、ちょっと本筋から外れますが聞いてください。 話を分かりやすく

はじめに 近年、コスト削減を目的とした基幹システムの開発は一巡し、IT基盤が社会に浸透した時代背景から、サービスの付加価値や業績向上を目的とした攻めのシステム開発が増えています。 これらのシステムは、従来の「利用者に使われることが前提」としたシステムに比して、「利用者に使ってもらえる」ための優れたUI/UXデザインが求められます。 このような背景からエンジニアとデザイナーの協業が増えてきている現場は多いと思いますが、両者の考え方やミッションは異なります。 そのため今までのエンジニア同士のコミュニケーションとは異なる意思疎通の工夫が必要であると考えています。 今回、PoCを目的としたMVP開発（MVP: 実用最小限の製品 minimum viable product）において、デザイナーとエンジニアが協業して開発することとなりました。 本稿は、その協業で得た知見や経験を紹介するものです。 想

"（自分は）エンジニアだからデザイン部分は関係ない" エンジニアの方であれば、1度は上記のような思いが脳裏をかすめたことがあるはずです。 いかがでしょうか。 実際、デザイナーとエンジニアがそれぞれの専門分野を担当するのは当たり前のことです。ただ、だからといってデザインのことを全く知らなくても良い！というわけではありません。 業務上、様々なプロジェクトを進めていく上で、エンジニアがデザインの基本を知っておくことで役立つ場面というのは往々にしてあります。デザイン作業を直接行うことはなくとも、デザインを検討する上でデザイナーとのやり取りがスムーズにできるでしょう。 そこで今回は、デザインの基本「デザインガイドライン」のポイントをまとめてご紹介します。 エンジニアの方は、この機会にぜひデザインの基本を学んでみてはいかがでしょうか。 エンジニアでもデザインの基本を知っておくべき理由 当然、業務を進め

2020.03.17｜ Writer：NTT東日本アベ AWS Fargateとは？Amazon ECSとの関係性やメリット・デメリットを解説 【クラウド導入を検討中の方必見！】「NTT東日本がおすすめするクラウド導入を成功させるためのお役立ちマニュアル 」を無料でダウンロードしていただけます！今すぐこちらをクリック！ 企業情報システムのITインフラストラクチャはオンプレミスからクラウドへと移行しています。それにともない、開発環境や本番環境のサーバーやネットワーク管理もユーザーの手から離れ、クラウドサービス事業者が管轄するようになってきました。また、従来のクラウドサービス利用ではクラウド上にユーザーが仮想マシンを構築するスタイルが一般的でしたが、近年のコンテナ利用に見られるようにクラウド上のホストマシンすら意識させないスタイルになりつつあります。そこで今回は、コンテナの実行環境であるAWS

会計 freee のアプリケーションエンジニアの id:him0 (@him0net) です。自分は2017年4月に freee に入っているので、4月で丸3年となりました。相変わらず自ら手を動かしてコードを書くことが好きなのですが、チームのマネジメント業務も始め、チームのパフォーマンスを出すという課題にも取り組んでいるこの頃です。 3年前、自分は新卒としてfreeeに入社しプロダクトチームに迎え入れられたわけですが、今年はプロダクトチームとして新卒たちを迎える、新卒研修の運営をおこなったので、freee のプロダクトチームの新卒研修の紹介をフルリモートでの実施という今年らしい切り口を加えて紹介したいと思います。 新卒研修 kick off freee のプロダクトチームの新卒研修 freee のプロダクトチームは、エンジニアと UI/UX デザイナーを内包した概念です。プロダクトチームの

【入門】Reactチュートリアルをやりながら実践入門業務で開発しているプロジェクトでReactを入れることになりまして、そのためのインプットとしてReactの公式チュートリアルを行いました。Reactには入門として公式のチュートリアルがあります。英語で書かれていますが、この記事では日本語で解説していきます。初心者の方でもわかってもらえるように、押さえておくべき部分が出てきた時にその都度解説を挟むようにしています。... チュートリアル本編で作ったもの 公式のReactチュートリアルで、このようなものを作成しました。 誰でもやってことがある「○×ゲーム」です。公式ページではtic-tac-toeゲーム（三目並べ）と呼ばれています。 機能としては プレイヤーが交互に順番が回ってくる すでに埋まったマスは埋めれない 1列揃った時点で終了 上に現状のプレイヤーが誰か、勝負がついた場合に勝者が通知さ

はじめに React公式には知識ゼロからReactのコンセプトを学べる、非常に丁寧なチュートリアルが用意されています（日本語版あり）。 右も左もわからない状態からReactを学ぶことになったとき、このチュートリアルには大いに助けられました。ただしこのチュートリアルは型のない素のJavaScriptで書かれています。 ここにTypeScriptを導入するとパワフルなサジェスト機能が使えるようになり、コードがより見通しの良いものになります。 Reactでは、コンポーネントと呼ばれる機能単位をブロックとして組み合わせることが基本となります。Reactにおける型推論の恩恵の一つは、コンポーネントが要求するパラメーター（しばしば"props"という名のオブジェクトとしてまとめられます）が何であるかコード上でマニュアル化され、誤っている場合には実行前に検知できることです。 さらに、Reactにはバージ

概要 フロントエンドをVueを使って作り、APIなどのバックエンドをpythonのFlaskという軽量なフレームワークを使って作りました。今回は、ローカル環境下で動いていたアプリケーションをgithubから自動的にAWSの方にdeployすることができるようなインフラ構成を設計してみます。 不十分な点などありましたら、アドバイスいただけると幸いです。 使うもの AWS関連 EC2 RDS ECR ECS(fargate) S3 CloudFront Route53 IAM CI/CD関連 Circle CI システム構成図 まず、public subnetとprivate subnetを持つVPCを作成します。外部からのアクセスを許容するpublic subnetには、ロードバランサーと踏み台(ログイン)サーバーを設置します。外部から直接アクセスできないprivate subnetには、A

最近業務でNext.js+LaravelのアプリケーションをAWSのAmazon ECS(Fargate)にデプロイするタスクを担当しているので、デプロイするにあたりNext.js側、Laravel側でやっておくこと、エラー対応などをまとめておく。 ECSへのデプロイはEC2へのデプロイに比べそもそもネットに情報が少ないECSの中でもデータプレーン（コンテナ実行環境）にEC2を使った記事が多くFargateを使った記事はかなり少ないECS+Fargateへのデプロイでも本記事のようなフロントエンド+APIの構成のデプロイ例はマジで少ない という状態で結構苦戦したので、自分で苦戦したことを残しておくとともに同じ構成でデプロイする方に向けて参考になれば嬉しいです。 ECS、ECR、Fargateについての技術説明・全体的なデプロイ作業の手順についてはこの記事では扱わないが、この記事（というかZ