EatSmartシステム部ブログ

ウェブサイトの開発や運営に関する情報です。

Thymeleafでvue.jsを使う

最近のブログネタに登場しているように、現在、SpringBoot + ThymeleafでWebアプリの開発を行っています。 このアプリはログインをして使うサービスで、クローズドなものなので、SEOではなくユーザビリティを重視して作ろうと考えています。 特に、複雑な入…

Gmailで他ドメインのグループを差出人に設定する

今回はGmailで他ドメインのグループを差出人に設定する方法を紹介します。 実現したい内容について 今回実現したい内容は以下の通りです。 ドメイン1(test1.co.jp)上に存在するグループ(group1)をドメイン2(test2.co.jp)のGmailの差出人として送信を行う。…

SpringBootでフォームからPOSTされた際の独自Validator

SpringBootで構築しているWebアプリで、アカウント登録時にメールアドレスの重複チェック(既に登録されていないか)が必要なのですが、フォームからPOSTされた内容を検証するためにValidatorを作ったので、実装したことをここに残しておきます。 アノテーショ…

Spring Boot 2.3.3 から JMX でメトリクスを収集する

先日、Spring Boot のバージョン 2.2.3 を利用した際に、以前のように JMX でメトリクスを収集出来なかったので、対処を行いました。 以前記事を書いたときは、バージョン 1.5.2 となっていました。 eatsmart.hatenablog.com application.yml へ追加する必要…

Tomcat のオプション JAVA_OPTS と CATALINA_OPTS どちらが反映されるか?

結論 CATALINA_OPTS が反映されました Tomcat のオプションの指定 イートスマートが運営するサービスは全てDockerコンテナ上で稼働しています Tomcatを利用するイメージは、全て共通のTomcatイメージから個別のイメージを作成しています この共通のTomcatイ…

LVMに物理ディスクを追加してパーティション拡張を行う

今回はLVMに物理ディスクを追加してパーティション拡張を行う方法を紹介します。 新規物理ボリュームの作成 まず最初に、追加した物理ディスクから新たにLVMの物理ボリューム作成します。 今回は、/dev/sdbに物理ディスクを追加した状態で「pvcreate」コマン…

Googleアナリティクスの実装確認

ちょっとした小ネタです。 ページ内にGoogleアナリティクスのトラッキング設定をした際に、正しく設定できているか気になる時ありませんか? PVのトラッキングだったら、アナリティクスの「リアルタイム」で確認できるかもしれませんが、商用環境である程度…

Reactで作ったリストに削除機能を作る

先日行った、もぐナビのスマートフォンユーザー向けページのUIを新しくした話を書きたいと思います。 mognavi.jp もぐナビでは、"食べたい"商品を記録することが出来ます。 会員登録したユーザーは、マイページからこの記録を閲覧することが出来ます。 UIを…

ファイルアップロード状況をプログレスバー表示する

クスパでは料理教室の先生が作成したレッスン動画の有料配信サービスを展開していますが、動画をアップロードする際にファイルサイズが大きい為進捗状況を表示する必要がありました。そこで、今回はアップロード状況をプログレスバー表示する方法を紹介しま…

インスタグラムの@メンション投稿を収集する

弊社のサービス「クスパ 」では、「クスパ公認インスタアンバサダー」の方々によるインスタグラム投稿を、特設ページに集約して掲載をしています。 cookingschool.jp インスタ投稿の収集と表示はサードベンダーのASPサービスを利用していたのですが、インス…

Spring Securityの認証機能を利用する処理を実装する

先日記事を書いたSpring Bootのプロジェクトの続きです。 eatsmart.hatenablog.com ユーザーによるフォームを利用した認証は、Spring Securityが提供しているものを利用します。 これとは別に、他の処理と組み合わせて認証する機能が必要になりました。 ドキ…

HLSのサムネイル動画作成について

クスパでは、料理教室の先生が作成した動画レッスンの有料配信サービスを展開しています。今回は、クスパで採用している動画配信方式HLSのサムネイル動画を作成する方法を紹介します。 cookingschool.jp HLSとは HLSはHTTP Live Streamingの略であり、Web上…

shellでエラーを無視する

弊社のシステムでは、Jenkinsでshellを実行してJOBやバッチ処理を行う構成があります。 Jenkinsのshell定義の中で、前処理としてファイル削除やプロセス終了をさせることがあるのですが、その前処理で例外が発生しても無視して後続の処理をさせたい場合に、 …

Spring Boot でファイルのアップロードを実装する

EatSmart社が提供しているクスパというサービスで、動画の配信を行う事になりました。 今回は、動画をアップロードするAPIを実装した上でのメモになります。 cookingschool.jp 動画をアップロードする APIの構成は、[nginx]->[Spring Boot] のようにしました…

VIDEOタグのレスポンシブ対応について

今回は、HTML5のVIDEOタグで動画再生する際にレスポンシブ対応する方法について記載します。 VIDEOタグについて HTML5でサポートされたVIDEOタグですが、プラグイン等を使用せずに動画を再生可能で、且つ属性やイベントを豊富に揃っているので非常に便利です…

Spring Securityでログインした状態を残す

新規プロジェクトで利用しているSpring Boot + Spring Securityですが、ログインした状態を残すためRemember-meという機能を利用しました Remember-meを有効にする Remember-meは、HttpSecurityへの設定とログインフォームへの追加で有効になります HttpSecu…

2020年を振り返って

怒涛の2020年も、もうすぐ終わりになります。EatSmart社システム部の2020年を振り返ってみたいと思います。 サービス的に取り組んできたこととしては、 1月 クスパ レッスン決済サービス開始 1月〜2月 もぐナビ月次ランキングサービス開始 3月〜6月 もぐナビ…

HTMLのプレビュー機能を作る

WEBサービスを運営していると、ユーザー向けのアプリ(以後"フロントエンド"と呼びます)のほかに運営向けのアプリ(以後"バックエンド"と呼びます)を作ることがあると思います。 イートスマートで提供しているWEBサービスでも、バックエンドがいくつか存在…

JavaScriptでファイルアップロード時に動画ファイルの総再生時間を取得する

動画ファイルをアップロードする際に、チェック等の用途で総再生時間が取得できないか検証してみました。 検証内容について 最初は、JavaScriptのFile APIで簡単に取得できるものだと思っていましたが、試してみたところ出来ませんでした。 そこで、色々調べ…

Reactのオブジェクトから、呼び出し元のJavaScriptを実行する

サービス内で、ページ内の一部の機能をReactで実装することがあります。 完全に独立した機能であれば、単体でReactの実装をすれば良いのですが、元ページにある要素と連携させたい場合があります。 その場合は、以下のように呼び出し元ページのJavaScript関…

JavaScriptで子ウィンドウから親ウィンドウを操作する

もぐナビの運営には、日々投稿されるクチコミの監視業務があります。 そこで利用しているWebアプリには、投稿された画像を編集する機能があります。 クチコミの一覧が表示される親ウィンドウから編集機能をもつ子ウィンドウが開かれ、画像の編集と保存を行い…

javaで文中のURLを個別にaタグ置換する

サービスの改善要望で、ユーザーが投稿する文中のURLを自動的にaタグに置換することになり、その実現方法について記載します。 文中のURLを一括でaタグに置換する 文中のURLを一括でaタグ置換する場合、正規表現で行うことができます。 private static final…

PostgreSQLのJSON型

業務で主にPostgreSQLを使用しているのですが、Ver9.2以降でJSON型というのが追加されたとの事で、少し使ってみました。 使い方 機能としては、 型(INDEXも使える) 演算子 関数 とあるのですが、今回はJSON型と演算子を使ってみました。 JSON型 公式のドキュ…

1つのリポジトリで2つのSpring Bootアプリを管理する

Webサービスを提供する場合、ユーザーにサービスを提供するためのフロントエンドと、データの閲覧や管理を行うためのバックエンドの2つWebアプリを作ることになると思います。 イートスマートでは、新規にWebサービスをつくる場合は主にSpring Bootを利用し…

Spring Boot + Thymeleaf でページネーションを実装する

業務のなかで一覧表示を実装することはよくあると思います 件数が多い場合はページあたりの件数を設け、複数ページに分割します Spring Boot を利用して開発を行っているなかで、この複数ページの分割を実現する仕組みを見つけたので利用してみました Pageab…

日別で保持しているレコードを行単位で月別集計してみる

表題のような集計をDBで行うに辺り、その変換方法を交えて記載していきます。 使用DBMS:PostgreSQL9.3.5 はじめに 今回は日別で保持している個々の予約データを、月別でレッスン形式毎に予約ユーザー数を集計し、その結果を行単位(横持ち)に変換するまで…

Spring Security で独自の認証処理を利用する

新規プロジェクトのため Spring Security を勉強しています。 そこで、既存のアプリケーションを移植してみることにしたのですが、ユーザーを認証する処理で躓いてしまいました。 移植を試みたアプリケーションでは、認証に利用するパスワードのハッシュ化に…

ヒアドキュメントについて

プログラム内に別のプログラムや長いテキストを埋め込む際に、文字列の結合やエスケープなど面倒な処理が必要となることが多いと思いますが、ヒアドキュメントを使うと楽になることを知りました。 と言いつつも、メインで使っているJavaでは13以降の機能のよ…

gitで管理するシェルの実行権限について

弊社では、Linuxサーバー上で使用するシェルをgitで管理しているのですが、Windowsで作業しているメンバーが「シェルに実行権限を付けた状態でgitにcommitできない」と言っていたので、調査をしてみました。 はじめは、「gitはファイル実行権限についてはリ…

FontAwesomeのplaceholder表示について

今回HTMLのplaceholderにFontAwesomeのアイコンを表示する方法を記事にしてみました。 FontAwesomeとは FontAwesomeとはWebでよく使用されるアイコンをフォントとして扱うことができます。 使い方はとても簡単で無料版も用意されており、必要なソース一式をF…