EatSmartシステム部ブログ

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

2021-01-01から1年間の記事一覧

Docker Desktop for Windows でコンテナに割り当てられるIPアドレスを変更する

Windows で Docker を利用した開発環境を構築するため、Docker Desktop for Windows をインストールしました。 Docker コンテナとして作成したアプリから開発環境のデータベースに接続を試みましたが接続出来ません。 コンテナに割り当てられるIPアドレスが …

PostgreSQLの配列型を利用する

リレーショナル・データベースで、例えば1つの商品に対して複数のタグを紐付けるような場合、関連テーブルを作成すると思います。 以下のように、商品IDとタグを組み合わせたテーブルになります。 商品ID タグ 1 スイーツ 1 抹茶 2 スイーツ 3 アイスクリー…

アドセンス のレスポンシブ広告ユニットの高さ・幅指定

弊社のサイトの広告表示にGoogleのアドセンスを使っているのですが、スマートフォン用のサイトの場合、広告ユニットのサイズを指定せずにレスポンシブで使うことが多いです。 ただ、いくらレスポンシブと言っても、広告を掲載したいエリアの大きさを指定した…

SMTP経由でのメール送信時の文字数制限及び対処について

あるフォームで入力文字数の拡張を行い、その内容をSMTP(postfix)経由でメール送信したところ1000文字付近で文字化けが発生しました。 そこで、本内容についての原因及び対処方法を紹介します。 SMTPの1行あたりの文字数制限について メールサーバ間でやり取…

nginx の X-Accel-Redirect を試す

先日Twitterを眺めていたところ、"X-Accel-Redirect"というキーワードが目に止まりました。 調べてみると、バックエンドのレスポンスからnginxで内部リダイレクトを行う仕組みであり、用途としてはバックエンドで認証を行いnginxにコンテンツ配信を任せるこ…

テンプレートパーツで構成されるサイトのGoogleAdManager実装について-その2

だいぶ前の記事の続きになりますが、以前GAMの広告枠の基本的な実装方法と、ページをテンプレートで分割・再利用している場合の問題点を説明しました。 eatsmart.hatenablog.com 弊社では、defineSlotの空呼び出しが発生しないように実装しているので、紹介…

postgresqlでのbooleanの判定について

あるテーブルでboolean型のカラムに対して以下の様にselectしてみたところ期待した(NULLのレコードも含めた)結果が返却されませんでした。 SELECT * TABLE_NAME WHERE COLUMN_NAME <> TRUE; 上記に対して、boolean型のカラムにデフォルト値(TRUE or FALSE)を…

日次サマリデータから週次・月次グラフを出力する

SQL

WEBサービスのページごとのアクセスや、ユーザーの行動の数を日毎にまとめたサマリテーブルから、グラフを出力することになりました。 グラフを出力するにあたり、ロジックではなくSQLを工夫することで、週次・月次のデータを作ってみました。 週次グラフ 今…

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…