Webアプリケーション開発
長年Webアプリケーション開発のアーキテクト・フルスタックエンジニアとして携わってきたTIS株式会社 テクノロジー&イノベーション本部 エンジニアチームが、開発プロジェクトの実践を通じて培った開発ノウハウ・実践の中で活用するFW・ガイド・ツールをご紹介します。
-
Nablarch
Nablarch
Nablarchとは Nablarch(ナブラーク)は、TISの豊富な基幹システム構築経験から得られたナレッジを集約したJavaアプリケーション開発/実行基盤です。 以下のような特長があります。 豊富なコンテンツ Javaフレームワークだけでなく開発標準・開発ツール・ガイド類をオープンソースで提供 …
Nablarch
Nablarch
-
Webアプリケーション開発
Springアプリ開発ノウハウ集
概要 Spring を活用してアプリケーションを構築する際に必要となるノウハウを提供します。 特に、アプリケーションを開発する際に公式ドキュメントやWeb上から実装方法を見つけることが難しく、躓きやすい点についての情報を中心に提供します。 詳細ページ https://fintan-contents.github.…
Webアプリケーション開発
Springアプリ開発ノウハウ集
-
Webアプリケーション開発
サービス開発のエンジニアリングガイド
はじめに このドキュメントは、サービス開発のエンジニアリング部分を担うエンジニアに対して、開発開始前・開発中になにをすべきか、なにを参照すれば良いかを示すものです。サービス開発に必要と考えているアクティビティについて、現時点で最適と考えている進め方を記載しています。プロジェクトのメンバースキルや文化に強く依存するため、…
Webアプリケーション開発
サービス開発のエンジニアリングガイド
-
Webアプリケーション開発
SPA + REST API構成のサービス開発リファレンス
はじめに SPA(シングルページアプリケーション)とREST APIで構成されるウェブアプリケーションを開発する際にリファレンスとして活用して頂ける方式設計のガイドと、アプリケーションのコード例を提供します。 このコンテンツのねらい SI型のプロジェクトとサービス型のプロジェクトを比較すると、サービス型のプロジェク…
Webアプリケーション開発
SPA + REST API構成のサービス開発リファレンス
/* Webアプリケーション開発 */ ブログ・事例
-
Webアプリケーション開発
Visual Studio CodeでできるReactアプリの便利なデバッグ方法
はじめに アプリケーション開発部の田村です。自社で運営するサービス開発を担当しています。 今、担当しているサービスはReactで開発し運用しています。 今回はVisual Studio Codeを使ったReactアプリケーションのデバッグについて私が便利だと感じた機能を紹介します。 本記事を実施する上での要件 …
Webアプリケーション開発
Visual Studio CodeでできるReactアプリの便利なデバッグ方法
-
Webアプリケーション開発
AWS Management Consoleのログインをメール通知する
はじめに こんにちは。アプリケーション開発部の谷野です。インキュベーションセンターが運営する自社サービス開発を担当しています。 そのサービスはインフラ環境をAWSで構成しており、システム運用のための仕掛けも同様にAWSで構成しています。 今回は運用業務の一環としてAWS Management Consoleのログイ…
Webアプリケーション開発
AWS Management Consoleのログインをメール通知する
-
Webアプリケーション開発
新人がAzureAppServiceを利用してWebサイトを作った話
はじめに 西日本テクノロジー&イノベーション室所属、入社二年目の寺澤です。 現在所属するプロジェクトにおいて、Microsoft Azure(以下、Azure)が提供しているApp Serviceを利用してWebサイトを構築しました。構築にあたって、プランや設定方法など決めなければいけないことがたくさんあ…
Webアプリケーション開発
新人がAzureAppServiceを利用してWebサイトを作った話
-
Webアプリケーション開発
認可設定の確認を効率的に行うためのWebAPI開発手法
はじめに 西日本テクノロジー&イノベーション室の山田です。ここ1年ほどはコロナの影響によってほとんどリモートで働いています。 現在所属しているプロジェクトにおいて、認可設定の確認を効率的に行えるようWeb APIの設計・実装をすることで品質を担保しました。 どのようにWeb APIの認可設定の確認を効率的に行える…
Webアプリケーション開発
認可設定の確認を効率的に行うためのWebAPI開発手法
- #認可
-
Webアプリケーション開発
Find Security Bugs によるセキュリティ対策と、そのカバー範囲に関するレポート
はじめに セキュリティ脆弱性による企業、ひいては社会全体への影響はますます増大し、システム開発におけるセキュリティ要求は日々高度化しています。 このような状況の中でセキュリティリスクを抑えるためには、継続的なセキュリティ診断と問題への対応が必要です。 本レポートでは、開発工程でのセキュリティ対策、そしてそこ…
Webアプリケーション開発
Find Security Bugs によるセキュリティ対策と、そのカバー範囲に関するレポート
-
Webアプリケーション開発
Amazon CognitoのIDトークンを利用したREST APIの認証例
はじめに Amazon Cognito User Pool を用いたWebサービスにおけるユーザー管理・運用の事例にあるように、ユーザー認証や管理には外部の認証基盤を利用することも多くなってきています。 利用する認証基盤には様々な選択肢があり、例えば次に挙げるようなものがあります。 前述の記事で挙げてい…
Webアプリケーション開発
Amazon CognitoのIDトークンを利用したREST APIの認証例
-
Webアプリケーション開発
フロントエンドはサービス開発リファレンスを使って、バックエンドは自前で作成してみた
はじめに こんにちは。西日本テクノロジー&イノベーション室の樋尻です。 私の所属する西日本テクノロジー&イノベーション室では、2020年9月末に「SPA + REST API構成のサービス開発リファレンス(以下サービス開発リファレンス)」を公開しました。こちらは、シングルページアプリケーション(以下SPA)とRE…
Webアプリケーション開発
フロントエンドはサービス開発リファレンスを使って、バックエンドは自前で作成してみた
-
Webアプリケーション開発
バックエンドはサービス開発リファレンスを使って、フロントエンドは自前で作成してみた
はじめに こんにちは。西日本テクノロジー&イノベーション室の齊藤です。 私の所属する西日本テクノロジー&イノベーション室では、2020年9月末に「SPA + REST API構成のサービス開発リファレンス(以下サービス開発リファレンス)」を公開しました。こちらは、シングルページアプリケーション(以下SPA)とRE…
Webアプリケーション開発
バックエンドはサービス開発リファレンスを使って、フロントエンドは自前で作成してみた
-
Webアプリケーション開発
サービス開発リファレンスの方式設計ガイドを使ってみよう
はじめに こんにちは。西日本テクノロジー&イノベーション室の樋尻です。 私の所属する西日本テクノロジー&イノベーション室では、2020年9月末に「SPA + REST API構成のサービス開発リファレンス(以下サービス開発リファレンス)」を公開しました。こちらは、シングルページアプリケーション(以下SPA)とRE…
Webアプリケーション開発
サービス開発リファレンスの方式設計ガイドを使ってみよう
-
Webアプリケーション開発
サービス開発リファレンスを使ってCSRF対策をしてみよう
はじめに こんにちは。西日本テクノロジー&イノベーション室の齊藤です。 私の所属する西日本テクノロジー&イノベーション室では、2020年9月末に「SPA + REST API構成のサービス開発リファレンス(以下サービス開発リファレンス)」を公開しました。こちらは、シングルページアプリケーション(以下SPA)とRE…
Webアプリケーション開発
サービス開発リファレンスを使ってCSRF対策をしてみよう
-
Webアプリケーション開発
サービス開発リファレンスを使ってファイルダウンロードを実装してみよう
はじめに こんにちは。西日本テクノロジー&イノベーション室の樋尻です。 私の所属する西日本テクノロジー&イノベーション室では、2020年9月末に「SPA + REST API構成のサービス開発リファレンス(以下サービス開発リファレンス)」を公開しました。こちらは、シングルページアプリケーション(以下SPA)とRE…
Webアプリケーション開発
サービス開発リファレンスを使ってファイルダウンロードを実装してみよう
-
Webアプリケーション開発
サービス開発リファレンスを使ってバリデーションしてみよう
はじめに こんにちは。西日本テクノロジー&イノベーション室の齊藤です。 私の所属する西日本テクノロジー&イノベーション室では、2020年9月末に「SPA + REST API構成のサービス開発リファレンス(以下サービス開発リファレンス)」を公開しました。こちらは、シングルページアプリケーション(以下SPA)とRE…
Webアプリケーション開発
サービス開発リファレンスを使ってバリデーションしてみよう
-
Webアプリケーション開発
サービス開発リファレンスを使ってREST APIを1つ作成してみよう
はじめに こんにちは。西日本テクノロジー&イノベーション室の齊藤です。 私の所属する西日本テクノロジー&イノベーション室では、2020年9月末に「SPA + REST API構成のサービス開発リファレンス(以下サービス開発リファレンス)」を公開しました。こちらは、シングルページアプリケーション(以下SPA)とRE…
Webアプリケーション開発
サービス開発リファレンスを使ってREST APIを1つ作成してみよう
-
Webアプリケーション開発
サービス開発リファレンスを使って1画面作成してみよう
はじめに こんにちは。西日本テクノロジー&イノベーション室の齊藤です。 私の所属する西日本テクノロジー&イノベーション室では、2020年9月末に「SPA + REST API構成のサービス開発リファレンス(以下サービス開発リファレンス)」を公開しました。こちらは、シングルページアプリケーション(以下SPA)とRE…
Webアプリケーション開発
サービス開発リファレンスを使って1画面作成してみよう
-
Webアプリケーション開発
サービス開発リファレンスを使ってWebアプリケーションを作成してみよう<導入編>
はじめに こんにちは。西日本テクノロジー&イノベーション室の齊藤です。 私の所属する西日本テクノロジー&イノベーション室では、2020年9月末に「SPA + REST API構成のサービス開発リファレンス(以下サービス開発リファレンス)」を公開しました。こちらは、シングルページアプリケーション(以下SPA)とRE…
Webアプリケーション開発
サービス開発リファレンスを使ってWebアプリケーションを作成してみよう<導入編>
-
Webアプリケーション開発
サービス開発リファレンスを利用してWebサービスのプロトタイプを開発しました
はじめに Webサービスを含めシステム開発では、フレームワークやライブラリを利用するだけでなく、サンプルやリファレンスを参考に効率的に開発を進めることが通例となっています。 筆者の所属する西日本テクノロジー&イノベーション室では、2020年9月末にSPA + REST API構成のサービス開発リファレンス(以下サ…
Webアプリケーション開発
サービス開発リファレンスを利用してWebサービスのプロトタイプを開発しました
-
Webアプリケーション開発
Storybookを導入してみてわかった、導入おすすめプロジェクトの特徴
はじめに 西日本テクノロジー&イノベーション室の山田です。 現在私が所属しているプロジェクトでStorybookを導入しました。 導入前に期待していた利点のほかにも、導入してはじめて気づいたStorybookの良さがありました。 また、導入して気づいた点をもとにStorybookの導入に向いているプロジェクト…
Webアプリケーション開発
Storybookを導入してみてわかった、導入おすすめプロジェクトの特徴
-
Webアプリケーション開発
BRMS(ビジネスルール管理システム)を活用したオンラインシステムの構築事例
はじめに ビジネスルールの見える化やシステムのアジリティの向上を目的として、BRMS(Business Rule Management System:ビジネスルール管理システム)の導入が注目されて久しい。 BRMSでは、ビジネスルールをディシジョンテーブルとして実装することにより、ビジネスルールが可視化されプログ…
Webアプリケーション開発
BRMS(ビジネスルール管理システム)を活用したオンラインシステムの構築事例
- #BRMS
-
Webアプリケーション開発
React Queryを用いた開発事例の紹介
はじめに 本ドキュメントは、 React Queryを用いた開発事例の紹介です。 React Queryは、Reactで非同期データをフェッチ、キャッシング、更新するためのフックを提供するライブラリです。 React Queryを用いることで、効率的なバックエンド連携が実現できます。 本ドキュメントでは、このライブラリ…
Webアプリケーション開発
React Queryを用いた開発事例の紹介
-
Webアプリケーション開発
Amazon Cognito User Pool を用いたWebサービスにおけるユーザー管理・運用の事例
はじめに ほとんどのWebサービスにおいて、ユーザの認証機能は必要です。 ここでいう認証機能とは以下の機能群を指します。 サインアップ サインイン・サインアウト パスワード変更 パスワード初期化 昔のWebサービスは、これら認証機能を各サービスごとに独自に実装していました。 しかしパ…
Webアプリケーション開発
Amazon Cognito User Pool を用いたWebサービスにおけるユーザー管理・運用の事例
-
Webアプリケーション開発
AWS Amplifyを用いたオンラインチャットアプリのバックエンド開発ブログ
はじめに オンラインチャットアプリを短期間で開発する案件があり、アプリのバックエンドをAWS Amplifyで構築する機会がありました。その時のAmplifyを選定した経緯や、AWS Cognitoの設定、GraphQLスキーマコードの一部、指定したドメインでアプリを公開する手続きを本ブログで紹介いたします。 本…
Webアプリケーション開発
AWS Amplifyを用いたオンラインチャットアプリのバックエンド開発ブログ
-
Webアプリケーション開発
iPhoneでバーチャルキーボード表示時に固定要素が画面外に消える問題を解決する
こんにちは。西日本テクノロジー&イノベーション室の高谷です。 TIS入社4年目です。 3月末まで、とあるサービスのPoCに用いるMVP(Minimum Viable Product)として、スマホ向けWebアプリを開発していました。 今回はその開発中に発生したバーチャルキーボードの挙動によって意図しない画面表示になる…
Webアプリケーション開発
iPhoneでバーチャルキーボード表示時に固定要素が画面外に消える問題を解決する
-
Webアプリケーション開発
FIWAREのデータをElastic Stackで可視化する
こんにちは。西日本テクノロジー&イノベーション室の髙谷です。 今回は私が担当したとある実証実験向けの案件で、IoTプラットフォームのFIWAREに蓄積したセンサーのデータを ElasticsearchとKibanaを使って可視化する作業をした時に発生した課題と、それを解決した方法を紹介します。 記事内ではFI…
Webアプリケーション開発
FIWAREのデータをElastic Stackで可視化する
-
Webアプリケーション開発
短納期でフロントエンド開発をして得た知見
はじめに こんにちは。西日本テクノロジー&イノベーション室の奥田です。 私は19年度に入社した新人エンジニアで、これまでにHTMLとCSS、Reactなどの技術を使って画面を実装した経験があります。 とある短納期開発案件で、デザイナーとエンジニアが協業して開発する機会がありました。 そこに私はフロントエンドエ…
Webアプリケーション開発
短納期でフロントエンド開発をして得た知見
-
Webアプリケーション開発
Spring Boot + Angularによる少人数・短納期開発の事例紹介
はじめに 本ドキュメントは、Spring Boot + Angularによって実証実験を目的とした少人数・短納期の開発案件を推進した際の事例紹介です。主な内容として、上記フレームワークを用いた開発手法およびアーキテクチャと、短納期を成功させるにあたって採用した開発手法について紹介します。 想定読者 Spri…
Webアプリケーション開発
Spring Boot + Angularによる少人数・短納期開発の事例紹介
-
Webアプリケーション開発
ReactとTab機能を利用したアプリへGoogle Analyticsを導入する
スタートアップと協業してサービス開発を推進する中で、Google Analytics(以下GA)を利用してユーザー動向を解析するニーズがありました。ここではその際に必要とした実装に関して記載します。 GAをアプリケーションに導入するには アプリの開発が得意な開発チーム と サービス運用に長けているスタートアップ企業…
Webアプリケーション開発
ReactとTab機能を利用したアプリへGoogle Analyticsを導入する
-
Webアプリケーション開発
AWS AppSync(GraphQL)を用いたバックエンドの構築事例
はじめに GraphQLは、2015年に公開されて以降、徐々に注目が高まっている技術になります。 以下リンクによると、2019年時点で約90%の人が注目していることが分かります。 https://2019.stateofjs.com/data-layer/graphql/ しかし、実際にGraphQLを…
Webアプリケーション開発
AWS AppSync(GraphQL)を用いたバックエンドの構築事例
-
Webアプリケーション開発
関西地区でのスタートアップとのサービス開発事例
はじめに 本ドキュメントは、スタートアップと半年間でPoCを実現するために実践した事例をまとめたものです。 本ドキュメントがサービス開発の事例として、サービス開発の経験が少ないメンバーでPoCを実施するための実用最小限のプロダクト(MVP)を実装するチームの参考情報になることを目的としています。 T…
Webアプリケーション開発
関西地区でのスタートアップとのサービス開発事例
-
Webアプリケーション開発
New Relicを用いたWebサービスのモニタリング事例
はじめに Webサービスを安定的に提供するためには、システムのモニタリングが欠かせません。 本記事では、我々が現在運用しているWebサービスに対してどのようなアプローチでモニタリングツールを選定・導入したか、どのように活用しているかをご紹介します。 我々のWebサービスについて ユーザーからの入力値に応じてさまざま…
Webアプリケーション開発
New Relicを用いたWebサービスのモニタリング事例
-
Webアプリケーション開発
Webアプリケーションのパフォーマンスチューニング事例(Python)
はじめに このドキュメントは、自社サービスとして開発したシステムに対する、開発中におけるチューニング、設計の改善などを事例としてまとめたものになります。 本ドキュメントに記載している改善範囲は、Pythonで作られたWebアプリケーションが主体となります。このため、Pythonに特化した内容もありますが他のプログラミ…
Webアプリケーション開発
Webアプリケーションのパフォーマンスチューニング事例(Python)
-
Webアプリケーション開発
React + APIでFacebookのOAuth認証を実装した
はじめに スタートアップ企業と一緒にサービスを開発し、ユーザー登録や認証を実装しました。 サービス開発にあたり、スタートアップ(PO)からは以下のような要望がありました。 Facebookで集客し、ターゲットはFacebookユーザー ネイティブアプリではなく、WebアプリでPWAで提供したい 技…
Webアプリケーション開発
React + APIでFacebookのOAuth認証を実装した
-
Webアプリケーション開発
Reactでバリデーションありのフォームを実装する
こんにちは。西日本テクノロジー&イノベーション室の藤田です。 技術的に強くなりたいと言っている新卒3年目です。 最近フィットボクシングを始めました。日々フックを打つ手が力強くなっていくのを実感しています。 この前書きは以下の内容とはまったく関係ありません。 はじめに React + Railsでサー…
Webアプリケーション開発
Reactでバリデーションありのフォームを実装する
-
Webアプリケーション開発
UI開発にSwaggerで作ったmockサーバーを使う
こんにちは。西日本テクノロジー&イノベーション室の藤田です。 日々(技術的に)強くなりたいと言っている新卒3年目です。 弊社では名刺を入社した時に100枚、それ以降も部門名称が変わるたびに100枚ずつ支給されるのですが、入社してからもらった名刺は400枚になりました。来年には500枚になっているかもしれません。 この記事…
Webアプリケーション開発
UI開発にSwaggerで作ったmockサーバーを使う
-
Webアプリケーション開発
ReactでAPI通信をしている間Loading画面を表示する
こんにちは。西日本テクノロジー&イノベーション室の藤田です。 日々(技術的に)強くなりたいと言っている新卒3年目です。 この記事では、先日まで関わっていたサービス開発案件のノウハウ紹介として、ReactでAPI通信している間にLoading画面を表示する実装について説明します。 背景 React + Railsでログ…
Webアプリケーション開発
ReactでAPI通信をしている間Loading画面を表示する
-
Webアプリケーション開発
Data URI形式の画像をS3へ保存してURLを取得する
こんにちは。西日本テクノロジー&イノベーション室の藤田です。 日々(技術的に)強くなりたいと言っている新卒3年目です。趣味はプロレス観戦、座右の銘は「己こそ己の寄る辺」です。 先日まで関わっていたサービス開発案件で使用した、RubyでData URI形式で送られてきた画像をURLとして扱う方法を書いていきます…
Webアプリケーション開発
Data URI形式の画像をS3へ保存してURLを取得する
-
Webアプリケーション開発
ContextAPIを使ってメッセージをローカライズ
こんにちは。西日本テクノロジー&イノベーション室の藤田です。日々、己の無知さに腿を強く殴りつつ(技術的に)強くなりたいと言っている新卒3年目です。この記事では、サービス開発案件の開発ノウハウとして、ReactのContextを使ってメッセージをローカライズする方法を説明します。 はじめに React+Railsで台湾…
Webアプリケーション開発
ContextAPIを使ってメッセージをローカライズ
-
Webアプリケーション開発
redux-sagaを用いたReact/Reduxアプリケーションにおけるデータ通信の実現事例
はじめに 本ドキュメントは、React+Reduxを利用した開発においてReduxのMiddlewareである redux-sagaを用いて非同期処理を制御する事例をまとめた資料となります。 本ドキュメントの目的は、React+Reduxを利用したアプリケーション開発において、非同期処理の制御に redux-saga…
Webアプリケーション開発
redux-sagaを用いたReact/Reduxアプリケーションにおけるデータ通信の実現事例
-
Webアプリケーション開発
gRPCのServer-Streaming RPCを用いたPUSH通知の実現事例
はじめに このドキュメントは、gRPCを用いてサーバからクライアントへのPUSH通知を実現した事例をまとめたものです。 ここでいう PUSH 通知とは、通常のクライアントからサーバへのリクエストではなく、何かしらの契機によりサーバからクライアントへ送信される通知を指します。 例えばチャットツールでよくあるように、誰か…
Webアプリケーション開発
gRPCのServer-Streaming RPCを用いたPUSH通知の実現事例
- #gRPC
-
Webアプリケーション開発
ヘキサゴナルアーキテクチャ導入事例
はじめに サマリ この活動への取り組みについての情報 プロジェクトのコンテキスト ヘキサゴナルアーキテクチャ導入の動機 導入にあたり検討したこと 導入後アーキテクチャ セパレートインターフェース 依存性逆転の法則とレジストリ レイヤー実装の注力順序と時期 導入結果 懸念事項 効果が期待できるプ…
Webアプリケーション開発
ヘキサゴナルアーキテクチャ導入事例
-
Webアプリケーション開発
Reactを使ったフロントエンドのアーキテクチャ事例
はじめに このドキュメントは、Reactを使ったフロントエンドのアーキテクチャを事例としてまとめたものになります。 本ドキュメントが今後開発を行うシステム、プロジェクトの参考情報となることを目的としています。 なお、このドキュメントに記載しているシステムは開発中のものであり、実際に運用されているシステムではありません。…
Webアプリケーション開発
Reactを使ったフロントエンドのアーキテクチャ事例
-
Webアプリケーション開発
SPA+REST APIにおけるセッションを使った認証の実践例
はじめに このドキュメントは、SPA+REST APIで構築したシステムの認証方法を、事例としてまとめたものになります。 本ドキュメントが、SPA+REST APIにおける認証の実現方式のひとつとして、今後開発を行うシステム、プロジェクトの参考情報となることを目的としています。 なお、このドキュメントに記載している…
Webアプリケーション開発
SPA+REST APIにおけるセッションを使った認証の実践例
- #認証
-
Webアプリケーション開発
StrutsからSpring MVCへのマイグレーション事例
はじめに このドキュメントは、あるプロジェクトにおけるフレームワークのマイグレーションを事例としてまとめたものになります。 このプロジェクトでは、StrutsからSpring MVCへの置き換えを行いました。 本ドキュメントがフレームワークのマイグレーションの例として、 今後開発を行うシステムやプロジェクト…
Webアプリケーション開発
StrutsからSpring MVCへのマイグレーション事例
-
Webアプリケーション開発
SPA+REST APIのシステム構成例(AWS)
はじめに このドキュメントは、クラウド上に構築したSPA+REST APIのシステム構成を事例としてまとめたものになります。利用したクラウド環境は、Amazon Web Services(AWS)です。 本ドキュメントが、SPAとREST APIを使用してAWS上で開発するシステムの構成例として、今後開発を行うシ…
Webアプリケーション開発
SPA+REST APIのシステム構成例(AWS)