fincode

Product Blog

CloudWatch Logs Insightsでログを抽出・分析する

fincode開発チームです! 今回は、fincodeでも利用しているAmazon Web Services(AWS)のCloudWatch Logs Insightsを使用して、アプリケーションのログを簡単に抽出し、分析する方法を紹介したいと思います。 はじめに アプリケーションの運用や開発において、ログデータは貴重な情報源です。エラーや警告、トランザクションの記録など、アプリケーションの挙動や状態を理解するために不可欠な要素です。 しかし、アプリケーションが成長し、複雑化するにつれて、ログデータの量も増加し、その分析はますます困難になっています。 ここで登場するのが、Amazon Web Services(AWS)の提供するCloudWatch Logs Insightsです。このサービスは、ログデータを簡単に抽出し、リアルタイムで効果的に分析するための強力なツールです。 ログデータから価値ある情報を引き出し、アプリケーションのパフォーマンスを向上させる手助けをしてくれます。 CloudWatch Logs Insightsとは CloudWatch Logs Insightsは、AWSのモニタリングおよび管理サービスであるCloudWatchの一部として提供されています。このサービスを使用することで、アプリケーションのログデータをリアルタイムで簡単にクエリし、分析することができます。 従来のログの探索や分析では手間がかかっていた作業が、CloudWatch Logs Insightsを使用することで迅速かつ効率的に行えるようになります。 ログの重要性 ログデータは、アプリケーションがどのように動作しているか、ユーザーやシステムとのインタラクションがどのように進行しているかを記録する貴重な情報源です。特に、以下のような状況でログの分析が重要となります。 エラーのトラブルシューティング: エラーメッセージやスタックトレースを分析することで、アプリケーションの不具合を特定し、修正する手助けをします。 パフォーマンスの最適化: レスポンスタイムやリソース使用量などの情報を分析することで、アプリケーションのボトルネックを特定し、パフォーマンスを向上させる施策を打つことができます。 セキュリティ監視: 不正アクセスや異常なアクティビティを検知するために、アクセスログや認証イベントを監視することが重要です。 CloudWatch Logs Insightsは、これらの課題に取り組むためのツールとして優れた機能を提供しており、ログの分析作業を効率化し、アプリケーションの品質向上に寄与します。 次に、CloudWatch Logs Insightsの基本的な概念や操作方法について探求していきましょう。 実際に使ってみる 1.Logs Insights(ログのインサイト)を開く AWSコンソールからCloudWatchを開きログ>ログのインサイトを選択。 2.ロググループを選ぶ 抽出したいログが出力されてるロググループを選ぶ。(複数選択できる) 3.ログを抽出するクエリを書いて実行する クエリを書くことでログの表示ができる。(SQLみたいな感じ) @messageに1レコードのログが入っている。 そこからfilterを使って不要なログのレコードは取り除いたり、PARSEを使って欲しい情報のみを抽出してフィルタリング(filter)に使ったり並び替え(sort)に使ったりできる。 今回はAPI Gatewayのログを見てみることにします。 参考 CloudWatch Logs Insights のクエリ構文 - Amazon CloudWatch Logs API Gateway での CloudWatch による REST API のログの設定 CloudWatch Logs Insights は、さまざまなタイプのログをサポートします。Amazon CloudWatch Logs に送信されるすべてのログについて、CloudWatch Logs Insights は 5 つのシステムフィールドを自動的に生成しています。 フィールド名 備考 @message 生の未解析のログイベント。要はアプリで出力したログの中身 @timestamp ログイベントの timestamp フィールドに含まれるイベントタイムスタンプ。 @ingestionTime CloudWatch Logs によって受信された時間。 @logStream ログイベントの追加先のログストリームの名前を示します。ログストリームは、生成時と同じプロセスでログをグループ化します。 @log ロググループ識別子。 API Gatewayのログを見てみましょう。 下記のようなクエリを書いて実行することで、集計したデータを取得することができます。 fields@message # 単純に表示するとき | display@timestamp,path,httpMethod,status,authorizererror,dataProcessed,integrationErrorMessage,integrationLatency,sourceip # path毎に集計 | stats avg(integrationLatency) as avg_integrationLatency , sum(integrationLatency) as sum_integrationLatency , count(*) as count_path by path as path | sort count_path desc すると下記のように結果を出力できます。処理時間によってソート出来ていて、かつ各情報を簡潔に確認できますね。 @単純に表示するとき @path毎に集計 count(*) as path by pathのように記述することで、エンドポイント単位で集計することもできます。 4.使用したクエリを保存して他の人にも使ってもらう。 作ったクエリはAWSに保存できます。汎用性のあるものはできたら保存しておけば同一環境の他の人たちも気軽に使えて便利です。 まとめ この記事では、AWSのCloudWatch Logs Insightsを使ってアプリケーションのログをスマートに抽出し、リアルタイムで分析する方法をご紹介しました。 ログデータの探索や分析が面倒だった過去とは違い、CloudWatch Logs Insightsはその手間を劇的に削減してくれる頼もしいツールです。 fincodeではこのようなサービスを活用しながら継続的なサービスの改善に取り組んでいます! ご意見・ご要望もお待ちしております!  

開発チーム
CloudWatch Logs Insightsでログを抽出・分析する

決済手段に「Apple Pay」が追加されました!

みなさん、こんにちは!fincodeプロダクトのマーケティングチームです。 本日はfincodeに新たな決済手段「Apple Pay」が追加されたため、ご紹介いたします。 Apple Pay追加の背景と概要 「fincode byGMO」では、スタートアップを中心とする導入事業者のビジネスニーズやエンジニアの声を積極的に取り入れながら、 時流に合わせたアップデートを定期的に実施しており、このたび新しい決済手段として「Apple Pay」(※1)を追加いたしました。 「Apple Pay」は Apple Inc. が提供するキャッシュレス決済サービスです。 ユーザーは手動で情報を打ち込むことなく、Touch IDやFace ID等の生体認証による承認のみで安全にクレジットカード決済ができます。 そのためEC事業者は、ユーザーの入力間違いによる「かご落ち」や不正利用による「チャージバック」の発生を抑えることができます。 オンライン決済においてより便利で安全な決済手段が求められる中、 「fincode byGMO」導入事業者は決済手段として「Apple Pay」を提供することが可能となります。 なお、クレジットカード決済やコンビニ決済等と統合された API のため、 「fincode byGMO」導入事業者は実装・学習コストを抑えて、自社の Web アプリ・スマホアプリ等において「Apple Pay」による決済の受付が可能となります。 (※1)「Apple Pay」についての詳細は Apple Inc.の Web サイトをご参照ください。 URL︓https://www.apple.com/jp/apple-pay/ インテグレーション fincodeの決済APIを利用してApple Payでの決済を処理することができます。 ブラウザが提供するApple Pay JS APIやiOS/iPadOS/watchOS/macOS上で動作するSwiftコードから得られるトークンを fincodeの決済実行APIのリクエストに含めることでApple Payでの決済を受け付けることが可能です。 fincode docsにはApple Pay用のトークンを取得するサンプルコードと決済処理のフローが全て記載されています。 Apple PayのDocsはこちら https://docs.fincode.jp/payment/applepay   fincodeではテスト環境もご用意しており、すぐに使えてすべての機能をお試しいただけます。 この機会にぜひお試しください! ※本番環境で利用する場合は、カード決済の利用開始後にダッシュボードよりApple Payの利用申請を行います。 また、 Apple Developer Program への登録が必要になります。

マーケティングチーム
決済手段に「Apple Pay」が追加されました!

決済手段に「PayPay」が追加されました!

みなさん、こんにちは!fincodeプロダクトのマーケティングチームです。 本日はfincodeに新たな決済手段「PayPay」が追加されたため、ご紹介いたします! PayPay追加の背景と概要 「PayPay」は 5,500 万人以上の登録ユーザー数(※1)を誇るキャッシュレス決済サービスです。 クレジット カードを使わないユーザーでも注文と同時に決済を完了することができ、利便性良く利用できます。 なお、クレジットカード決済、コンビニ決済と統合された API のため、「fincode byGMO」導入事業者は実装・学習コストを抑えて、自社の Web アプリ・スマホアプリ等において「PayPay」による決済の受付が可能となります。 購入者は、「PayPay」のアプリ上で支払を承認する、もしくはブラウザ上で「PayPay」にログインすることで「PayPay 残高」または「PayPay あと払い」での支払いが可能となります(※2)。 ※1 「PayPay」のアカウント登録済みのユーザー数。2023年2月時点。PayPay株式会社調べ。 ※2 「PayPay」で利用可能な支払方法はユーザーごとのご利用状況や利用事業者ごとの審査結果によって異なります。 インテグレーション fincodeの決済APIを利用してPayPayでの決済を呼び出すことができます。 決済APIのレスポンスに含まれるURLへユーザーを遷移させ、PayPayサイトもしくはアプリ上で決済を行います。 APIで決済を呼び出すほか、構築済みのリダイレクト決済ページを利用して少ないコーディングでPayPayでの決済を提供することも可能です。 PayPayのDocsはこちら https://docs.fincode.jp/payment/paypay fincodeではテスト環境もご用意しており、すぐに使えてすべての機能をお試しいただけます。 この機会にぜひお試しください! ※本番環境では、カード決済のご利用開始後に管理画面より追加申込いただけます。 ※(プラットフォームタイプご利用の方へ)テナント様にカード決済以外の決済手段をご提供されたい場合、テナント様の審査をスムーズに進めるために事前に決済会社との調整が必要になりますので、お問い合わせフォームよりお問い合わせください。

マーケティングチーム
決済手段に「PayPay」が追加されました!

新機能追加のお知らせ:リダイレクト型決済でコンビニ決済が利用できるようになりました!

みなさん、こんにちは!プロダクトのマーケティングチームです。 リダイレクト型決済でもコンビニ決済をご利用いただけるようになりました! 本記事では、メールリンク機能を用いてコンビニ決済をご利用いただくための方法をご紹介いたします。   なお、WEBサイトなどの貴サービスへfincodeの決済機能を組み込んで決済処理を実行される方はシステム仕様など詳細について下記ページをご参照ください。 ▼fincode Docs https://docs.fincode.jp/ ▼API reference https://docs.fincode.jp/api ▼Product Blog「fincodeの決済APIの利用する仕組みと方法」 https://blog.fincode.jp/product_blog/244-2/    メールリンクの送信方法 ①ログイン後、左メニュー>メールリンクをクリックし、「決済作成」ボタンをクリック ②クリック後、以下の画面が表示されるので、「金額」まで項目に沿って入力 ※今回は「メールアドレスを直接入力して送信する」送信方法でご紹介いたします。 ③「決済手段(最低1つ選択)」にて、「コンビニ決済」を選択。その他、必要項目を入力し「確認」をクリック ※カード決済、コンビニ決済を2種類選んだ際は、購入者の画面で決済手段が選べるようになります。今回はコンビニ決済のみ選択します。 ※成功URLおよびキャンセルURLの指定がない場合は、fincodeのデフォルトの画面が表示されます ④メールリンクの設定詳細画面が表示されます。こちらでコンビニ決済のメールリンク作成は完了です。 お客様の実際のお支払い画面 ①指定したメールアドレスに支払い依頼のメールが届きます。「お支払いページに進む」をクリックします。 ②支払い画面が表示されます。「お支払い」ボタンをクリックします。 ③指定のメールアドレスへお支払い用バーコードのご案内メールが別途送信されます。 メールまたは支払い画面の「今すぐバーコードを表示して支払う」からバーコードを確認します。 ▼メールでのご案内 「お支払いへ進む」ボタンをクリック ④内容確認画面が表示されるので、「バーコードを表示」をクリック ⑤支払い用のバーコードが表示されるので、コンビニのレジで提示し、支払い完了となります。 いかがでしたでしょうか? コンビニ決済の支払いもシステム構築なし、管理画面上の操作のみで簡単に作成・送信できました。 こちらの機能についてはテスト環境でも実際に触ることができるので、一度お試しくださいませ!  

マーケティングチーム
新機能追加のお知らせ:リダイレクト型決済でコンビニ決済が利用できるようになりました!

UIコンポーネントのデモページを作成しました

fincode開発チームです! UIコンポーネントの「コーディングを始める」というページを作成したのでそのご紹介です。 https://docs.fincode.jp/payment/ui_component/demo fincodeでは、UIコンポーネントというWebサイトに埋め込めるカード情報入力フォームを提供しています。 詳しくはこちら UIコンポーネントは利用者が自由にカスタマイズできるようになっていて、 文字色や背景、ラベルの内容...などを任意の値に指定できるようにしています。 今回はdocs上に実際にUIコンポーネントのカスタマイズを試してどんなUIになるのか?をインタラクティブに試せるページを作成しました。 1.初期表示 ページを開くとこの画面が表示されます。 2.各パラメータを変更 今回はテキストを変えてみようと思います。 ラベルテキストの各項目を英語にし、 プレースホルダーテキストのカード名義人を変更し、「更新」を選択します。 すると... 3.更新後画面 UIコンポーネントが更新され、変更したパラメータ通りの表示になっていますね! また、左に記載されているコードブロックはUIコンポーネントのサンプルコードです。 このページでお好みの文字や色に調整したあと、コードをコピーすればローカルでも利用できます! 今回はdocsに追加したUIコンポーネントの「コーディングを始める」ページの紹介でした。

開発チーム
UIコンポーネントのデモページを作成しました

スマホで支払える「コンビニ決済」がリリースされました!

みなさん、こんにちは!fincodeプロダクトのマーケティングチームです。 本日はfincodeにスマホで支払える「コンビニ決済」が追加されたので購入者の利用イメージと導入方法についてご紹介いたします。 fincode byGMOのスマホで支払える「コンビニ決済」とは? スマートフォンの画面上に表示される電子バーコードを対象コンビニのレジで提示して支払う方式を採用しており、コンビニ内の端末を操作する必要がないため、ショップ様は購入者へ決済完了までのステップが少ないコンビニ決済の提供が可能です。 ※コンビニ店頭でのお支払いには現金のみご利用いただけます。 導入メリット コンビニ決済は以下のような3つのメリットがあります。 ①ECサイト、オンラインサービスの新しい決済手段としてコンビニ決済を購入者に提供できる ②購入者は、コンビニでの端末操作や電子バーコード発行用のアプリを事前ダウンロードをすることなく、スムーズにコンビニでのお支払いができる ③サブスクリプションサービスにおいてカード決済がエラーになった場合の代替支払い手段としてもコンビニ決済の利用ができる 購入者の利用イメージ 購入者の利用までの流れは以下になります。 ①決済選択画面にてコンビニ支払いを選択 ②支払い画面を表示 ③コンビニのレジにてバーコードをスキャンし、お支払いへ ※現状ではAPI型のみのご提供となりますので、レギュレーションに従って加盟店様で画面を構築していただく必要があります。 ※リダイレクト型を利用したコンビニ決済は2023年2月下旬に公開予定です。 導入方法について 実際にコンビニ決済を導入するには、本番環境の管理画面「設定」メニューから「コンビニ決済」の利用申請をお願いいたします。 ※コンビニ決済は、カード決済のいずれかのブランドのご利用開始後に、利用申請が可能になります。 ※カード決済の利用申請は、fincodeの本番環境を申請すると自動的に開始されます。カード決済のご利用予定がなく、コンビニ決済のみご利用されたいショップ様も、カード決済の利用手続きは完了まで進めていただく必要がございます。 システムの導入および設定についてはDocsをご覧くださいませ。 https://docs.fincode.jp/payment/konbini いかがでしたでしょうか? テスト環境では、コンビニ決済の機能をすぐにご利用いただけます。 ぜひこの機会にお試しください!

マーケティングチーム
スマホで支払える「コンビニ決済」がリリースされました!

システム構築無し!メールリンクを用いてサブスクリプションを開始する方法

みなさん、こんにちは!finocde byGMOのマーケティングチームです。 本日はシステム構築無し、fincodeの管理画面機能とメールリンクを用いてサブスクリプションを設定する方法をご案内いたします。 管理画面の操作手順としては ①プラン作成→②顧客作成→③カード登録→④サブスクリプション登録となります。 ▼サブスクリプション設定のDocsはこちら https://docs.fincode.jp/payment/subscription    ①プラン作成 手順1:まずは管理画面にログインし、左メニュー「サブスクリプション」を選択、「プラン管理」をクリック。 手順2:「新規プラン」をクリック。 手順3:サブスクリプションのプランID、プラン名、金額、支払間隔の設定をし「保存」をクリック。 手順4:設定された内容が表示されるので、サブスクリプションの内容と相違がないか最終チェック。 変更があれば右上ボタン「編集」、削除する場合は「削除」をクリック。 これでプランの作成は完了です。次は「②顧客作成」になります。 ②顧客作成 手順1:左メニュー「顧客」を選択し、「新規顧客」ボタンをクリック。 手順2:顧客情報の必要情報を入力し、「作成」をクリック。 手順3:登録した顧客情報が表示されるので、内容に相違がないか確認してください。 顧客情報の登録は完了です。次は「③カード登録」になります。 ③カード登録 手順1:顧客詳細ページ>支払い情報の「メールリンク(カード登録)」ボタンをクリック。 手順2:必要な情報を入力し「確認」ボタンをクリック。 手順3:内容確認のポップアップが表示されますので、変更がなければ「OK」をクリック。 手順4:作成したカード登録に関するメールリンク詳細情報が表示されます。 こちらでカード登録に関するメールリンク作成は完了です。 ※ユーザー様へメールにてカード登録手続き用のURLが送信されますので、カード登録を行っていただくようご案内ください。 ユーザー様がカード登録を完了されると、ステータスが「カード登録完了」へ更新されます。 作成したメールリンクの情報は左メニュー「メールリンク」より ステータス、有効期限等を確認することができます。 次は最後のステップ「④サブスクリプション登録」になります!   ④サブスク登録 手順1:左メニュー「サブスクリプション」から「新規サブスクリプション」をクリック。 手順2:サブスクリプションの情報入力画面が表示されます。 まずは「顧客の選択」をクリックします。 手順3:サブスクリプション登録をしたい顧客情報を選択。 ※今回は「②顧客作成」で事前に登録していた顧客情報を選択します。 手順4:カード決済選択画面が表示されるので、サブスクリプションで課金を行う先のカード情報を選び「選択」をクリック。 手順5:次に「プラン選択」をクリック。 手順6:「①プラン作成」で作成したプランを選択。 手順7:初回利用金額、初回税送料は任意設定になります。 課金タイミング、課金開始日、課金停止日を設定し「サブスクリプションを開始」をクリック。 ※初回の課金日のみ異なる金額を請求したい場合は、初回利用金額・初回税送料をご設定ください。 ※サブスクリプションの課金開始日を当日にした場合、即時にプランで登録した金額でオーソリ処理が行われ、成功した場合、売上確定の決済が作成されます。 ※停止、失敗のサブスクリプションは再度有効に変更出来ません。 新規のサブスクリプションを登録しなおしてください。 ※課金日が対象月に存在しない場合、課金日を対象月の最終日に処理を実施します。 例)課金日が30日の場合、2月は2月28日に課金が行われます。 手順8:確認のポップアップが表示されるので「OK」をクリック。 手順9:サブスクリプションの設定した内容が表示されます。 こちらでサブスクリプションの設定は完了です。 サブスクリプションの設定内容に応じて、ユーザー様のクレジットカードへ課金開始となります。 いかがでしたでしょうか? システム構築無しでサブスクリプションが設定できる方法もぜひテスト環境でお試しください! ご不明点などございましたら、問い合わせフォームまでお問合せください。   ▼テスト環境登録ページ https://dashboard.test.fincode.jp/sign_up ▼お問合せフォーム https://dashboard.fincode.jp/contact/

マーケティングチーム
システム構築無し!メールリンクを用いてサブスクリプションを開始する方法

fincodeの構築方法~UIコンポーネント編~

fincode開発チームです! fincodeを使ってみた 第四弾・UIコンポーネント編をご紹介します! 今回は、UIコンポーネントを使って決済画面を構築してみました。 htmlにformを埋め込み、fincodeJSを使ったコードを書くだけで簡単にカード入力フォームを配置することができたので、ぜひ使ってみてください! UIコンポーネントを使った決済フローは以下になります。 まず、[UI初期化]・[入力フォーム作成]・[UIマウント]を行うことで決済画面にカード入力フォームを配置します。 その後ユーザーが入力したカード情報を[入力フォーム情報取得]で取得します。 取得したカード情報と決済実行APIのレスポンスをもとに、[決済実行JS]を呼び出し決済を実行します。 以下で画面にカード入力フォームを埋め込んだコードを掲載します。フロントはVue.jsで実装しました。 実装メモ: ・htmlにformを挿入 ・fincodeJSの[UI初期化]・[入力フォーム作成]・[UIマウント]を実行 htmlタグ <form id="fincode-form"> <div id="fincode"> </div> <button v-on:click="payment" class="fincode-button"> <span>お支払い</span> </button> </form> JS <script src="https://js.test.fincode.jp/v1/fincode.js"></script> <script> const app = new Vue({ el: '#app', mounted() { setUiComponent() { const fincode = Fincode('p_prod_XXXXXXXXXXXXXXXX'); const appearance = { layout: "vertical", hideLabel: false, hideHolderName: false, hidePayTimes: true, labelCardNo: "カード番号", labelExpire: "有効期限", labelCvc: "セキュリティコード", labelHolderName: "カード名義人", cardNo: "1234 5678 9012 3456", expireMonth: "01", expireYear: "25", cvc: "001", holderName: "TARO YAMADA", colorBackground: "f7f6e7", colorBackgroundInput: "ecebd9", colorText: "333", colorPlaceHolder: "9a9a9a", colorLabelText: "314e52", colorBorder: "314e52", colorError: "990c02", colorCheck: "000054", } const ui = fincode.ui(appearance) ui.create("payments", appearance) ui.mount("fincode", "400") }, }, }); </script> 上記実装で構築した決済画面はこちらです↓ フォームのデザインを考える際にはDocsの[コーディングを始める]ページを使うのがおすすめです! UIコンポーネントのDocs 好きなカラーやレイアウトを選ぶだけで簡単にコードが生成できるようになっています。 皆さんも是非試してみてください!

開発チーム
fincodeの構築方法~UIコンポーネント編~