Webアプリケーション開発

Webアプリケーション開発

概要 本記事ではPlaywrightを使ったE2Eテスト自動化の実践経験を踏まえ、Playwrightにおけるテスト実装のノウハウを紹介します。Playwrightは、WebアプリのE2E（end-to-end）テストを自動化するためのライブラリです。テスト実装手順などは公式ドキュメントを参照すれば理解できましたが、良…

Webアプリケーション開発

はじめに AWS Lambda のコールドスタートとは Lambda 関数が呼び出されたときに Lambda サービスが新しい実行環境を初期化することです [1] 。 これが発生すると呼び出しへの応答に時間がかかり、例えばシステムの画面表示が遅くなるなどします。コールドスタートは Lambda を使う上でぜひ理解してお…

Webアプリケーション開発

はじめに デザイン＆エンジニアリング部の竹谷(たけたに)です。 ※よく「たけや」と間違われるのでふりがなを振ってみました 先日参画している案件で、外部システムと WebSocket プロトコルを使った通信を行う API サーバー( WebSocket サーバー)を作成する機会がありました。そこで AWS のサー…

Webアプリケーション開発

1. はじめに はじめまして。デザイン＆エンジニアリング部所属の内田です。Java開発に参画することが多いです。 最近の趣味はウイスキーで、よくモルトバーに出没しています（おかげで金欠気味・・・）。 1.1. この記事の目的 私が最近携わったプロジェクトで、「オープンデータをREST APIで呼び出し、地図上に表…

Webアプリケーション開発

デザイン＆エンジニアリング部の大和です。 システム構成図・アーキテクチャ図なんて呼ばれるものを考えたり描いたりすることを生業としています。 在宅ワーク・通販に加えて最近宅食サービスというものを覚えてしまい、いよいよ外出する機会が飲み会しかなくなってしまいました。 これは年明けの貴重な外出日に食べた、分かる方には…

Webアプリケーション開発

はじめに はじめまして。デザイン＆エンジニアリング部、入社4年目の浅岡と申します。 皆さん、AWS（Amazon Web Service）というサービスをご存知でしょうか。私は今まで4つのシステム開発プロジェクトに携わってきましたが、そのどのシステムもこのAWSと何らかの形で関わっていました。 世界シェア3…

Webアプリケーション開発

はじめに 本記事ではサービス開発案件で蓄積されたノウハウとして、OpenAPIの定義ファイルからREST APIのバックエンドソースコードを自動生成して開発を行う方法を紹介します。 背景 本開発ではバックエンドはSpring Boot、 フロントエンドはReactを用いており、SPA+REST API構成サービス開…

Webアプリケーション開発

デザイン＆エンジニアリング部の髙谷です。 先日、Fintanで公開されているReact Nativeのサンプルアプリケーション(以下サンプルアプリケーション)を参考にReact QueryとOpenAPI定義ファイルからコードを自動生成するツールOrvalを使ってWebアプリケーションの通信基盤を作成する機会があり…

Webアプリケーション開発

デザイン&エンジニアリング部所属の岡﨑です。 私は新規事業開発に携わっており、React+TypeScriptでフロントエンドの開発を行う中でAnt DesignというUIフレームワークを使用しました。そこで、使用した感想やAnt Designを使用する上で工夫した点について紹介させていただきます。 Ant …

Webアプリケーション開発

はじめに アプリケーション開発部の田村です。自社で運営するサービス開発を担当しています。 今、担当しているサービスはReactで開発し運用しています。 今回はVisual Studio Codeを使ったReactアプリケーションのデバッグについて私が便利だと感じた機能を紹介します。 本記事を実施する上での要件 …

Webアプリケーション開発

はじめに こんにちは。アプリケーション開発部の谷野です。インキュベーションセンターが運営する自社サービス開発を担当しています。 そのサービスはインフラ環境をAWSで構成しており、システム運用のための仕掛けも同様にAWSで構成しています。 今回は運用業務の一環としてAWS Management Consoleのログイ…

Webアプリケーション開発

はじめに 西日本テクノロジー&イノベーション室所属、入社二年目の寺澤です。 現在所属するプロジェクトにおいて、Microsoft Azure(以下、Azure)が提供しているApp Serviceを利用してWebサイトを構築しました。構築にあたって、プランや設定方法など決めなければいけないことがたくさんあ…

Webアプリケーション開発

はじめに 西日本テクノロジー＆イノベーション室の山田です。ここ1年ほどはコロナの影響によってほとんどリモートで働いています。 現在所属しているプロジェクトにおいて、認可設定の確認を効率的に行えるようWeb APIの設計・実装をすることで品質を担保しました。 どのようにWeb APIの認可設定の確認を効率的に行える…

Webアプリケーション開発

はじめに セキュリティ脆弱性による企業、ひいては社会全体への影響はますます増大し、システム開発におけるセキュリティ要求は日々高度化しています。 このような状況の中でセキュリティリスクを抑えるためには、継続的なセキュリティ診断と問題への対応が必要です。 本レポートでは、開発工程でのセキュリティ対策、そしてそこ…

Webアプリケーション開発

はじめに Amazon Cognito User Pool を用いたWebサービスにおけるユーザー管理・運用の事例にあるように、ユーザー認証や管理には外部の認証基盤を利用することも多くなってきています。 利用する認証基盤には様々な選択肢があり、例えば次に挙げるようなものがあります。 前述の記事で挙げてい…

Webアプリケーション開発

はじめに こんにちは。西日本テクノロジー＆イノベーション室の樋尻です。 私の所属する西日本テクノロジー＆イノベーション室では、2020年9月末に「SPA + REST API構成のサービス開発リファレンス（以下サービス開発リファレンス）」を公開しました。こちらは、シングルページアプリケーション（以下SPA）とRE…

Webアプリケーション開発

はじめに こんにちは。西日本テクノロジー＆イノベーション室の齊藤です。 私の所属する西日本テクノロジー＆イノベーション室では、2020年9月末に「SPA + REST API構成のサービス開発リファレンス（以下サービス開発リファレンス）」を公開しました。こちらは、シングルページアプリケーション（以下SPA）とRE…

Webアプリケーション開発

はじめに こんにちは。西日本テクノロジー＆イノベーション室の樋尻です。 私の所属する西日本テクノロジー＆イノベーション室では、2020年9月末に「SPA + REST API構成のサービス開発リファレンス（以下サービス開発リファレンス）」を公開しました。こちらは、シングルページアプリケーション（以下SPA）とRE…

Webアプリケーション開発

はじめに こんにちは。西日本テクノロジー＆イノベーション室の齊藤です。 私の所属する西日本テクノロジー＆イノベーション室では、2020年9月末に「SPA + REST API構成のサービス開発リファレンス（以下サービス開発リファレンス）」を公開しました。こちらは、シングルページアプリケーション（以下SPA）とRE…

Webアプリケーション開発

はじめに こんにちは。西日本テクノロジー＆イノベーション室の樋尻です。 私の所属する西日本テクノロジー＆イノベーション室では、2020年9月末に「SPA + REST API構成のサービス開発リファレンス（以下サービス開発リファレンス）」を公開しました。こちらは、シングルページアプリケーション（以下SPA）とRE…

Webアプリケーション開発

はじめに こんにちは。西日本テクノロジー＆イノベーション室の齊藤です。 私の所属する西日本テクノロジー＆イノベーション室では、2020年9月末に「SPA + REST API構成のサービス開発リファレンス（以下サービス開発リファレンス）」を公開しました。こちらは、シングルページアプリケーション（以下SPA）とRE…

Webアプリケーション開発

はじめに こんにちは。西日本テクノロジー＆イノベーション室の齊藤です。 私の所属する西日本テクノロジー＆イノベーション室では、2020年9月末に「SPA + REST API構成のサービス開発リファレンス（以下サービス開発リファレンス）」を公開しました。こちらは、シングルページアプリケーション（以下SPA）とRE…

Webアプリケーション開発

はじめに こんにちは。西日本テクノロジー＆イノベーション室の齊藤です。 私の所属する西日本テクノロジー＆イノベーション室では、2020年9月末に「SPA + REST API構成のサービス開発リファレンス（以下サービス開発リファレンス）」を公開しました。こちらは、シングルページアプリケーション（以下SPA）とRE…

Webアプリケーション開発

はじめに こんにちは。西日本テクノロジー＆イノベーション室の齊藤です。 私の所属する西日本テクノロジー＆イノベーション室では、2020年9月末に「SPA + REST API構成のサービス開発リファレンス（以下サービス開発リファレンス）」を公開しました。こちらは、シングルページアプリケーション（以下SPA）とRE…

Webアプリケーション開発

はじめに Webサービスを含めシステム開発では、フレームワークやライブラリを利用するだけでなく、サンプルやリファレンスを参考に効率的に開発を進めることが通例となっています。 筆者の所属する西日本テクノロジー＆イノベーション室では、2020年9月末にSPA + REST API構成のサービス開発リファレンス（以下サ…

Webアプリケーション開発

はじめに 西日本テクノロジー＆イノベーション室の山田です。 現在私が所属しているプロジェクトでStorybookを導入しました。 導入前に期待していた利点のほかにも、導入してはじめて気づいたStorybookの良さがありました。 また、導入して気づいた点をもとにStorybookの導入に向いているプロジェクト…

Webアプリケーション開発

はじめに ビジネスルールの見える化やシステムのアジリティの向上を目的として、BRMS(Business Rule Management System：ビジネスルール管理システム)の導入が注目されて久しい。 BRMSでは、ビジネスルールをディシジョンテーブルとして実装することにより、ビジネスルールが可視化されプログ…

Webアプリケーション開発

はじめに 本ドキュメントは、 React Queryを用いた開発事例の紹介です。 React Queryは、Reactで非同期データをフェッチ、キャッシング、更新するためのフックを提供するライブラリです。 React Queryを用いることで、効率的なバックエンド連携が実現できます。 本ドキュメントでは、このライブラリ…

Webアプリケーション開発

はじめに ほとんどのWebサービスにおいて、ユーザの認証機能は必要です。 ここでいう認証機能とは以下の機能群を指します。 サインアップ サインイン・サインアウト パスワード変更 パスワード初期化 昔のWebサービスは、これら認証機能を各サービスごとに独自に実装していました。 しかしパ…

Webアプリケーション開発

はじめに オンラインチャットアプリを短期間で開発する案件があり、アプリのバックエンドをAWS Amplifyで構築する機会がありました。その時のAmplifyを選定した経緯や、AWS Cognitoの設定、GraphQLスキーマコードの一部、指定したドメインでアプリを公開する手続きを本ブログで紹介いたします。 本…

Webアプリケーション開発

こんにちは。西日本テクノロジー＆イノベーション室の高谷です。 TIS入社4年目です。 3月末まで、とあるサービスのPoCに用いるMVP(Minimum Viable Product)として、スマホ向けWebアプリを開発していました。 今回はその開発中に発生したバーチャルキーボードの挙動によって意図しない画面表示になる…

Webアプリケーション開発

こんにちは。西日本テクノロジー＆イノベーション室の髙谷です。 今回は私が担当したとある実証実験向けの案件で、IoTプラットフォームのFIWAREに蓄積したセンサーのデータを ElasticsearchとKibanaを使って可視化する作業をした時に発生した課題と、それを解決した方法を紹介します。 記事内ではFI…

Webアプリケーション開発

はじめに こんにちは。西日本テクノロジー＆イノベーション室の奥田です。 私は19年度に入社した新人エンジニアで、これまでにHTMLとCSS、Reactなどの技術を使って画面を実装した経験があります。 とある短納期開発案件で、デザイナーとエンジニアが協業して開発する機会がありました。 そこに私はフロントエンドエ…

Webアプリケーション開発

はじめに 本ドキュメントは、Spring Boot + Angularによって実証実験を目的とした少人数・短納期の開発案件を推進した際の事例紹介です。主な内容として、上記フレームワークを用いた開発手法およびアーキテクチャと、短納期を成功させるにあたって採用した開発手法について紹介します。 想定読者 Spri…

Webアプリケーション開発

スタートアップと協業してサービス開発を推進する中で、Google Analytics(以下GA)を利用してユーザー動向を解析するニーズがありました。ここではその際に必要とした実装に関して記載します。 GAをアプリケーションに導入するには アプリの開発が得意な開発チーム と サービス運用に長けているスタートアップ企業…

Webアプリケーション開発

はじめに GraphQLは、2015年に公開されて以降、徐々に注目が高まっている技術になります。 以下リンクによると、2019年時点で約90％の人が注目していることが分かります。 https://2019.stateofjs.com/data-layer/graphql/ しかし、実際にGraphQLを…

Webアプリケーション開発

はじめに 本ドキュメントは、スタートアップと半年間でPoCを実現するために実践した事例をまとめたものです。 本ドキュメントがサービス開発の事例として、サービス開発の経験が少ないメンバーでPoCを実施するための実用最小限のプロダクト(MVP)を実装するチームの参考情報になることを目的としています。   T…

Webアプリケーション開発

はじめに Webサービスを安定的に提供するためには、システムのモニタリングが欠かせません。 本記事では、我々が現在運用しているWebサービスに対してどのようなアプローチでモニタリングツールを選定・導入したか、どのように活用しているかをご紹介します。 我々のWebサービスについて ユーザーからの入力値に応じてさまざま…

Webアプリケーション開発

はじめに このドキュメントは、自社サービスとして開発したシステムに対する、開発中におけるチューニング、設計の改善などを事例としてまとめたものになります。 本ドキュメントに記載している改善範囲は、Pythonで作られたWebアプリケーションが主体となります。このため、Pythonに特化した内容もありますが他のプログラミ…

Webアプリケーション開発

はじめに スタートアップ企業と一緒にサービスを開発し、ユーザー登録や認証を実装しました。 サービス開発にあたり、スタートアップ（PO）からは以下のような要望がありました。 Facebookで集客し、ターゲットはFacebookユーザー ネイティブアプリではなく、WebアプリでPWAで提供したい 技…

Webアプリケーション開発

こんにちは。西日本テクノロジー＆イノベーション室の藤田です。 技術的に強くなりたいと言っている新卒3年目です。 最近フィットボクシングを始めました。日々フックを打つ手が力強くなっていくのを実感しています。 この前書きは以下の内容とはまったく関係ありません。 はじめに React + Railsでサー…

Webアプリケーション開発

こんにちは。西日本テクノロジー＆イノベーション室の藤田です。 日々（技術的に）強くなりたいと言っている新卒3年目です。 弊社では名刺を入社した時に100枚、それ以降も部門名称が変わるたびに100枚ずつ支給されるのですが、入社してからもらった名刺は400枚になりました。来年には500枚になっているかもしれません。 この記事…

Webアプリケーション開発

こんにちは。西日本テクノロジー＆イノベーション室の藤田です。 日々（技術的に）強くなりたいと言っている新卒3年目です。 この記事では、先日まで関わっていたサービス開発案件のノウハウ紹介として、ReactでAPI通信している間にLoading画面を表示する実装について説明します。 背景 React + Railsでログ…

Webアプリケーション開発

こんにちは。西日本テクノロジー＆イノベーション室の藤田です。 日々（技術的に）強くなりたいと言っている新卒3年目です。趣味はプロレス観戦、座右の銘は「己こそ己の寄る辺」です。 先日まで関わっていたサービス開発案件で使用した、RubyでData URI形式で送られてきた画像をURLとして扱う方法を書いていきます…

Webアプリケーション開発

こんにちは。西日本テクノロジー＆イノベーション室の藤田です。日々、己の無知さに腿を強く殴りつつ（技術的に）強くなりたいと言っている新卒3年目です。この記事では、サービス開発案件の開発ノウハウとして、ReactのContextを使ってメッセージをローカライズする方法を説明します。 はじめに React+Railsで台湾…

Webアプリケーション開発

はじめに 本ドキュメントは、React+Reduxを利用した開発においてReduxのMiddlewareである redux-sagaを用いて非同期処理を制御する事例をまとめた資料となります。 本ドキュメントの目的は、React+Reduxを利用したアプリケーション開発において、非同期処理の制御に redux-saga…

Webアプリケーション開発

はじめに このドキュメントは、gRPCを用いてサーバからクライアントへのPUSH通知を実現した事例をまとめたものです。 ここでいう PUSH 通知とは、通常のクライアントからサーバへのリクエストではなく、何かしらの契機によりサーバからクライアントへ送信される通知を指します。 例えばチャットツールでよくあるように、誰か…

Webアプリケーション開発

はじめに サマリ この活動への取り組みについての情報 プロジェクトのコンテキスト ヘキサゴナルアーキテクチャ導入の動機 導入にあたり検討したこと 導入後アーキテクチャ セパレートインターフェース 依存性逆転の法則とレジストリ レイヤー実装の注力順序と時期 導入結果 懸念事項 効果が期待できるプ…

Webアプリケーション開発

はじめに このドキュメントは、Reactを使ったフロントエンドのアーキテクチャを事例としてまとめたものになります。 本ドキュメントが今後開発を行うシステム、プロジェクトの参考情報となることを目的としています。 なお、このドキュメントに記載しているシステムは開発中のものであり、実際に運用されているシステムではありません。…

Webアプリケーション開発

はじめに このドキュメントは、SPA＋REST APIで構築したシステムの認証方法を、事例としてまとめたものになります。 本ドキュメントが、SPA＋REST APIにおける認証の実現方式のひとつとして、今後開発を行うシステム、プロジェクトの参考情報となることを目的としています。 なお、このドキュメントに記載している…

Webアプリケーション開発

はじめに このドキュメントは、あるプロジェクトにおけるフレームワークのマイグレーションを事例としてまとめたものになります。 このプロジェクトでは、StrutsからSpring MVCへの置き換えを行いました。 本ドキュメントがフレームワークのマイグレーションの例として、 今後開発を行うシステムやプロジェクト…

Webアプリケーション開発

はじめに このドキュメントは、クラウド上に構築したSPA＋REST APIのシステム構成を事例としてまとめたものになります。利用したクラウド環境は、Amazon Web Services（AWS）です。 本ドキュメントが、SPAとREST APIを使用してAWS上で開発するシステムの構成例として、今後開発を行うシ…