[ASP.MET] カテゴリの記事
全6件 (6件中 1-6件目)
1
-
AJAXを使用して非同期通信を実装する方法
AJAXを使用して非同期通信を実装する方法を、ASP.NETを使った簡単な例で示します。この例では、ユーザーがボタンをクリックすると、サーバーにリクエストを送り、結果を受け取って画面に表示します。### 1. **ASP.NET Webフォームの構成**#### 1.1. 必要なHTMLとjQueryのコード**Default.aspx**```aspx<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>AJAX Example</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#btnGetData').click(function () { // 非同期通信の実行 $.ajax({ type: "GET", // HTTPメソッド url: "DataHandler.ashx", // サーバーサイドのハンドラ success: function (response) { // 成功時に結果を表示 $('#result').html(response); }, error: function (xhr, status, error) { // エラー時の処理 alert("エラーが発生しました: " + error); } }); }); }); </script></head><body> <form id="form1" runat="server"> <div> <asp:Button ID="btnGetData" runat="server" Text="データを取得" /> <div id="result"></div> </div> </form></body></html>```### 2. **サーバーサイド処理**次に、AJAXリクエストを処理するためのサーバーサイドのハンドラを作成します。このハンドラは、データを生成してクライアントに返します。#### 2.1. ハンドラのコード**DataHandler.ashx**```csharp<%@ WebHandler Language="C#" Class="DataHandler" %>using System;using System.Web;public class DataHandler : IHttpHandler{ public void ProcessRequest(HttpContext context) { // ここでデータを生成または取得する string responseData = "サーバーからのデータ: " + DateTime.Now.ToString(); // コンテンツタイプを設定 context.Response.ContentType = "text/plain"; // データを返す context.Response.Write(responseData); } public bool IsReusable { get { return false; } }}```### 3. **解説**- **jQueryのインポート**: jQueryのCDNからスクリプトを読み込み、jQueryを使用できるようにします。- **AJAXのリクエスト**: ボタンがクリックされると、`$.ajax()`メソッドが呼ばれます。`url`には、データを取得するためのハンドラのURLを指定します。- **成功時の処理**: サーバーからのレスポンスが成功した場合、`success`コールバック関数が実行され、結果が`#result`というIDの要素に表示されます。- **エラーハンドリング**: 通信中にエラーが発生した場合は、`error`コールバック関数が実行され、エラーメッセージが表示されます。### 4. **実行とテスト**1. 上記のコードをASP.NETプロジェクトに追加します。2. Webページを実行し、「データを取得」ボタンをクリックします。3. サーバーからのデータが表示されることを確認します。### 5. **結果の表示**このサンプルでは、ボタンをクリックすることでサーバーからのデータ（現在の日時）を非同期で取得し、ページの一部を更新する方法を示しています。AJAXを使用すると、ページをリロードせずにサーバーと通信できるため、ユーザーエクスペリエンスが向上します。この基本的な例を基に、さらに複雑なデータの取得や処理を行うことができます。必要に応じて、POSTメソッドを使用してデータを送信することも可能です。
2024.11.03
-
ASP.NETとjQueryを組み合わせて
ASP.NETとjQueryを組み合わせて、項目を追加できるコンボボックスを作成する方法を説明します。この例では、ユーザーがコンボボックスに新しい項目を追加できるインタラクティブなUIを実装します。### 1. **ASP.NET Webフォームの構成**この例では、ASP.NET Webフォームを使用し、jQueryを利用してコンボボックスに新しい項目を追加します。#### 1.1. 必要なHTMLとjQueryのコード**Default.aspx**```aspx<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Dynamic ComboBox Example</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#btnAdd').click(function () { var newItem = $('#txtNewItem').val(); if (newItem) { $('#ddlItems').append('<option value="' + newItem + '">' + newItem + '</option>'); $('#txtNewItem').val(''); // 入力フィールドをクリア } else { alert('項目を入力してください。'); } }); }); </script></head><body> <form id="form1" runat="server"> <div> <label for="ddlItems">項目:</label> <select id="ddlItems" runat="server"> <option value="Item1">Item1</option> <option value="Item2">Item2</option> <option value="Item3">Item3</option> </select> <br /> <label for="txtNewItem">新しい項目を追加:</label> <input type="text" id="txtNewItem" runat="server" /> <asp:Button ID="btnAdd" runat="server" Text="追加" /> </div> </form></body></html>```### 2. **サーバーサイド処理（オプション）**この基本的な例では、項目をサーバーに送信する必要はありませんが、サーバーサイドでの処理も必要な場合は、`btnAdd_Click`イベントを実装できます。**Default.aspx.cs**```csharpusing System;using System.Web.UI;public partial class Default : Page{ protected void Page_Load(object sender, EventArgs e) { // 必要に応じて初期化処理を行う } protected void btnAdd_Click(object sender, EventArgs e) { // サーバーサイドでの処理（必要に応じて実装） }}```### 3. **解説**- **jQueryのインポート**: jQueryのCDNからスクリプトを読み込み、jQueryを使用できるようにします。- **コンボボックスの操作**: `#ddlItems`というIDのコンボボックスに、ユーザーが入力した新しい項目を追加します。項目が入力されていない場合は、アラートで警告を表示します。- **項目追加ボタン**: 「追加」ボタンをクリックすると、入力フィールドから値を取得して、コンボボックスに新しいオプションを追加します。### 4. **実行方法**1. 上記のコードをASP.NETプロジェクトに追加します。2. Webページを実行し、コンボボックスに新しい項目を追加してみてください。### 5. **サーバーサイドにデータを送信する方法（オプション）**もし、追加した項目をサーバーに保存する必要がある場合は、AJAXを使ってサーバーにデータを送信できます。以下のように、jQueryの`$.ajax()`メソッドを使って、項目をサーバーに送信できます。#### AJAXの実装例```javascript$('#btnAdd').click(function () { var newItem = $('#txtNewItem').val(); if (newItem) { $('#ddlItems').append('<option value="' + newItem + '">' + newItem + '</option>'); // サーバーに新しい項目を送信 $.ajax({ type: "POST", url: "YourHandler.ashx", // サーバー側のハンドラのURL data: { item: newItem }, success: function (response) { // 成功時の処理 console.log("サーバーに追加しました: " + response); }, error: function (xhr, status, error) { // エラーハンドリング alert("エラーが発生しました: " + error); } }); $('#txtNewItem').val(''); // 入力フィールドをクリア } else { alert('項目を入力してください。'); }});```このコードでは、`YourHandler.ashx`というASP.NETハンドラに新しい項目を送信します。このハンドラでは、送信されたデータを受け取って処理することができます。以上が、ASP.NETとjQueryを組み合わせて、項目追加ができるコンボボックスを作成する方法です。必要に応じて、デザインや機能を拡張してみてください。
2024.11.03
-
ASP.NETでOracleデータベースに新しいデータを追加するためには
ASP.NETでOracleデータベースに新しいデータを追加するためには、Oracleのデータアクセスライブラリを使用してINSERT文を実行します。以下に、ASP.NET WebフォームおよびASP.NET MVCのサンプルコードを示します。### 1. **必要なパッケージのインストール**前述の通り、OracleのデータアクセスライブラリをNuGetからインストールします。```bashInstall-Package Oracle.ManagedDataAccess```### 2. **ASP.NET Webフォームの例**以下は、ASP.NET Webフォームを使用してOracleデータベースに新しいデータを追加する基本的な例です。#### 2.1. Webフォームのコード**Default.aspx**```aspx<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Oracle Insert Example</title></head><body> <form id="form1" runat="server"> <div> <label for="txtName">名前:</label> <asp:TextBox ID="txtName" runat="server"></asp:TextBox><br /> <label for="txtAge">年齢:</label> <asp:TextBox ID="txtAge" runat="server"></asp:TextBox><br /> <asp:Button ID="btnAdd" runat="server" Text="データを追加" OnClick="btnAdd_Click" /> <asp:Label ID="lblMessage" runat="server" ForeColor="Green"></asp:Label> </div> </form></body></html>```**Default.aspx.cs**```csharpusing System;using Oracle.ManagedDataAccess.Client;public partial class Default : System.Web.UI.Page{ protected void btnAdd_Click(object sender, EventArgs e) { string name = txtName.Text; int age; if (int.TryParse(txtAge.Text, out age)) { string connectionString = "User Id=your_username;Password=your_password;Data Source=your_data_source"; using (OracleConnection connection = new OracleConnection(connectionString)) { connection.Open(); string query = "INSERT INTO your_table (name, age) VALUES (:name, :age)"; using (OracleCommand command = new OracleCommand(query, connection)) { command.Parameters.Add(new OracleParameter("name", name)); command.Parameters.Add(new OracleParameter("age", age)); int rowsAffected = command.ExecuteNonQuery(); lblMessage.Text = $"{rowsAffected} 行が追加されました。"; } } } else { lblMessage.Text = "年齢は数値で入力してください。"; } }}```### 3. **ASP.NET MVCの例**次に、ASP.NET MVCを使用した例です。#### 3.1. コントローラのコード**HomeController.cs**```csharpusing System;using System.Web.Mvc;using Oracle.ManagedDataAccess.Client;public class HomeController : Controller{ [HttpGet] public ActionResult Index() { return View(); } [HttpPost] public ActionResult Index(string name, string age) { int ageValue; if (int.TryParse(age, out ageValue)) { string connectionString = "User Id=your_username;Password=your_password;Data Source=your_data_source"; using (OracleConnection connection = new OracleConnection(connectionString)) { connection.Open(); string query = "INSERT INTO your_table (name, age) VALUES (:name, :age)"; using (OracleCommand command = new OracleCommand(query, connection)) { command.Parameters.Add(new OracleParameter("name", name)); command.Parameters.Add(new OracleParameter("age", ageValue)); int rowsAffected = command.ExecuteNonQuery(); ViewBag.Message = $"{rowsAffected} 行が追加されました。"; } } } else { ViewBag.Message = "年齢は数値で入力してください。"; } return View(); }}```#### 3.2. ビューのコード**Index.cshtml**```html@{ ViewBag.Title = "Oracle Insert Example";}<h2>データを追加</h2>@using (Html.BeginForm()){ <label for="name">名前:</label> <input type="text" name="name" required /><br /> <label for="age">年齢:</label> <input type="text" name="age" required /><br /> <input type="submit" value="データを追加" />}@if (ViewBag.Message != null){ <div>@ViewBag.Message</div>}```### 4. **接続文字列の設定**上記のサンプルコードでは、`your_username`、`your_password`、`your_data_source`、`your_table`をそれぞれ実際の値に置き換えてください。- **User Id**: Oracleのユーザー名- **Password**: Oracleのパスワード- **Data Source**: TNS名またはデータベースの接続情報- **your_table**: データを追加したいテーブル名（このテーブルには、`name`と`age`というカラムが必要です）。### 5. **実行とテスト**ASP.NETアプリケーションを実行し、フォームに名前と年齢を入力して送信することで、Oracleデータベースに新しいデータが追加されることを確認できます。エラーハンドリングやデータ検証を適切に追加して、実際のアプリケーションに対応させることをお勧めします。
2024.11.03
-
ASP.NETでOracleデータベースに接続するためには
ASP.NETでOracleデータベースに接続するためには、OracleのData Providerを利用します。これには、`Oracle.ManagedDataAccess`ライブラリを使用することが一般的です。以下に、ASP.NET WebフォームおよびASP.NET MVCのサンプルコードを示します。### 1. **必要なパッケージのインストール**まず、OracleのデータアクセスライブラリをNuGetからインストールします。```bashInstall-Package Oracle.ManagedDataAccess```### 2. **ASP.NET Webフォームの例**以下のコードは、ASP.NET Webフォームを使用してOracleデータベースに接続し、データを取得する基本的な例です。#### 2.1. Webフォームのコード**Default.aspx**```aspx<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Oracle Connection Example</title></head><body> <form id="form1" runat="server"> <div> <asp:Button ID="btnGetData" runat="server" Text="Get Data" OnClick="btnGetData_Click" /> <asp:GridView ID="GridView1" runat="server"></asp:GridView> </div> </form></body></html>```**Default.aspx.cs**```csharpusing System;using System.Data;using Oracle.ManagedDataAccess.Client;public partial class Default : System.Web.UI.Page{ protected void btnGetData_Click(object sender, EventArgs e) { string connectionString = "User Id=your_username;Password=your_password;Data Source=your_data_source"; using (OracleConnection connection = new OracleConnection(connectionString)) { connection.Open(); string query = "SELECT * FROM your_table"; using (OracleCommand command = new OracleCommand(query, connection)) { using (OracleDataAdapter adapter = new OracleDataAdapter(command)) { DataTable dataTable = new DataTable(); adapter.Fill(dataTable); GridView1.DataSource = dataTable; GridView1.DataBind(); } } } }}```### 3. **ASP.NET MVCの例**次に、ASP.NET MVCを使用した例です。#### 3.1. コントローラのコード**HomeController.cs**```csharpusing System;using System.Data;using System.Web.Mvc;using Oracle.ManagedDataAccess.Client;public class HomeController : Controller{ public ActionResult Index() { DataTable dataTable = GetData(); return View(dataTable); } private DataTable GetData() { string connectionString = "User Id=your_username;Password=your_password;Data Source=your_data_source"; using (OracleConnection connection = new OracleConnection(connectionString)) { connection.Open(); string query = "SELECT * FROM your_table"; using (OracleCommand command = new OracleCommand(query, connection)) { using (OracleDataAdapter adapter = new OracleDataAdapter(command)) { DataTable dataTable = new DataTable(); adapter.Fill(dataTable); return dataTable; } } } }}```#### 3.2. ビューのコード**Index.cshtml**```html@model System.Data.DataTable<!DOCTYPE html><html><head> <title>Oracle Connection Example</title></head><body> <h2>Data from Oracle Database</h2> <table border="1"> <thead> <tr> @foreach (var column in Model.Columns) { <th>@column.ColumnName</th> } </tr> </thead> <tbody> @foreach (DataRow row in Model.Rows) { <tr> @foreach (var item in row.ItemArray) { <td>@item</td> } </tr> } </tbody> </table></body></html>```### 4. **接続文字列の設定**上記のサンプルコードでは、`your_username`、`your_password`、`your_data_source`、`your_table`をそれぞれ実際の値に置き換えてください。- **User Id**: Oracleのユーザー名- **Password**: Oracleのパスワード- **Data Source**: TNS名またはデータベースの接続情報- **your_table**: 取得したいテーブル名### 5. **実行とテスト**ASP.NETアプリケーションを実行し、ボタンをクリックすることでOracleデータベースからデータを取得し、GridViewやHTMLテーブルに表示することができます。これで、ASP.NETでOracleデータベースに接続する基本的な流れが理解できたと思います。必要に応じて、エラーハンドリングやデータ処理を追加して、実際のアプリケーションに対応させてください。
2024.11.03
-
ASP.NETでコントロールの上にツールチップ（ホバー時に表示されるテキスト）を表示
ASP.NETでコントロールの上にツールチップ（ホバー時に表示されるテキスト）を表示するには、HTMLの `title` 属性を使用する方法が一般的です。また、jQueryの「jQuery UI Tooltip」などを使用してカスタマイズしたツールチップを表示することもできます。以下に代表的な方法を紹介します。---### 1. **HTMLの `title` 属性を使用する**最も簡単な方法は、ASP.NETコントロールに `ToolTip` プロパティを設定し、HTMLの `title` 属性として表示する方法です。ASP.NETの `ToolTip` プロパティはHTMLの `title` 属性として出力され、コントロール上にマウスをホバーするとツールチップが表示されます。#### 例```aspx<!-- ASP.NET Webフォームでの使用例 --><asp:Button ID="btnExample" runat="server" Text="ボタン" ToolTip="これはツールチップです" /><asp:TextBox ID="txtExample" runat="server" ToolTip="ここにテキストを入力してください" />```この方法はシンプルで、ASP.NETコントロールの `ToolTip` プロパティに設定した内容がツールチップとして表示されます。ただし、スタイルやデザインをカスタマイズすることが難しいため、より柔軟な表現が必要な場合には、以下のjQueryを使用する方法がおすすめです。---### 2. **jQuery UI Tooltipを使用する**jQuery UIのTooltip機能を利用すると、よりデザイン性のあるツールチップを簡単に追加できます。CSSでスタイルをカスタマイズすることもでき、`title` 属性を使わずにコンテンツを設定することも可能です。#### ステップ1：jQuery UIの読み込みまず、jQueryとjQuery UIをプロジェクトに追加します。CDNを利用する場合、以下のようにHTMLに追加できます。```html<!-- jQueryおよびjQuery UIの読み込み --><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"><script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>```#### ステップ2：jQuery UI Tooltipを設定する次に、JavaScriptでjQuery UIのツールチップ機能をコントロールに適用します。```javascript<script> $(function () { // 全ての要素にツールチップを適用 $(document).tooltip(); });</script>```#### 使用例ASP.NETコントロールに `ToolTip` プロパティを設定し、jQuery UIのTooltipを適用することで、ツールチップがカスタマイズされたスタイルで表示されます。```aspx<asp:Button ID="btnExample" runat="server" Text="ボタン" ToolTip="jQuery UIでスタイリングされたツールチップ" />```このようにすると、ASP.NETの `ToolTip` プロパティに設定した内容が、jQuery UIによってスタイリングされたツールチップとして表示されます。---### 3. **カスタムツールチップをJavaScriptで実装**HTMLの `title` 属性ではなく、カスタムツールチップを実装したい場合には、JavaScriptやCSSを使って独自のツールチップを作成することもできます。#### ステップ1：CSSでツールチップのスタイルを定義```css/* ツールチップのスタイル */.tooltip { position: relative; display: inline-block;}.tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 5px; padding: 5px; position: absolute; z-index: 1; bottom: 125%; /* ツールチップの位置 */ left: 50%; margin-left: -60px; opacity: 0; transition: opacity 0.3s;}.tooltip:hover .tooltiptext { visibility: visible; opacity: 1;}```#### ステップ2：ASP.NETコントロールにツールチップを適用ASP.NETの `Label` コントロールなどにカスタムツールチップを設定します。```aspx<!-- カスタムツールチップをASP.NETコントロールに適用 --><div class="tooltip"> <asp:Label ID="lblExample" runat="server" Text="ホバーでツールチップ表示"></asp:Label> <span class="tooltiptext">カスタムツールチップの内容</span></div>```この方法で、CSSを使用してカスタムツールチップを実装できます。見た目や位置を自由に調整でき、デザイン性の高いツールチップを作成可能です。---### まとめASP.NETでコントロールの上にツールチップを表示する方法には、以下のような選択肢があります：1. **HTMLの `title` 属性を使用する** - 簡単で標準的な方法。2. **jQuery UI Tooltipを使用する** - 柔軟なスタイルが可能で、カスタムツールチップのスタイル調整も簡単。3. **カスタムCSSとJavaScriptを使用する** - 完全に独自のデザインを実現したい場合に最適。用途やデザインの要件に応じて、最適な方法を選んでください。
2024.11.03
-
ASP.NETで開発する際には、jQueryの機能を利用して、UIの操作や非同期通信、エフェクトを簡単に実装できます
ASP.NETで開発する際には、jQueryの機能を利用して、UIの操作や非同期通信、エフェクトを簡単に実装できます。特に、ASP.NET WebフォームやASP.NET MVCなどでjQueryを活用すると、ページのパフォーマンスや操作性を向上させることができます。以下は、ASP.NETでよく利用されるjQueryの機能です。---### 1. **DOM操作**ASP.NETでボタンやテキストボックスなどのUI要素を操作する際、jQueryのDOM操作機能が役立ちます。- `$("#elementID").text("Text");`：指定したIDの要素のテキストを設定します。- `$("#elementID").val("Value");`：テキストボックスやセレクトボックスの値を設定します。- `$(".className").css("color", "red");`：指定したクラスの要素のCSSを変更します。#### 例```javascript// ボタンがクリックされた時にテキストボックスの値を取得してラベルに表示$("#btnShow").click(function() { var value = $("#txtBox").val(); $("#lblDisplay").text(value);});```---### 2. **Ajax通信**ASP.NETでサーバーと非同期にデータのやり取りをするために、jQueryの`$.ajax()`がよく使われます。Web APIやコントローラと通信し、非同期でデータを取得したり、サーバーに送信したりできます。- **$.ajax()**：Ajax通信を行う基本的なメソッドです。- **$.get()** や **$.post()**：簡単にGET/POSTリクエストを送信するメソッドです。#### 例（MVCのAPI呼び出し）```javascript// ボタンがクリックされたときにサーバーからデータを取得して表示$("#btnGetData").click(function() { $.ajax({ url: "/Home/GetData", // APIやコントローラのURL type: "GET", success: function(response) { $("#lblData").text(response); }, error: function(error) { console.log("Error:", error); } });});```---### 3. **イベント処理**jQueryのイベント処理を使うことで、ボタンやテキストボックスなどのユーザーアクションに応じてリアルタイムに処理を実行できます。- **.click()**：クリックイベントを処理します。- **.change()**：値の変更イベントを処理します（ドロップダウンリストなど）。- **.keyup()**：キーボード入力イベントを処理します。#### 例```javascript// テキストボックスの値が変更されるたびにリアルタイムで値を表示$("#txtInput").keyup(function() { $("#lblOutput").text($(this).val());});```---### 4. **エフェクト**jQueryのエフェクト機能を使用すると、要素の表示・非表示やフェードイン・フェードアウト、スライドなどの視覚効果を簡単に追加できます。- **.show()/.hide()**：要素の表示・非表示を切り替えます。- **.fadeIn()/.fadeOut()**：要素をフェードイン/フェードアウトします。- **.slideDown()/.slideUp()**：要素をスライドイン/スライドアウトします。#### 例```javascript// チェックボックスがチェックされているときにメッセージを表示$("#chkToggle").change(function() { if ($(this).is(":checked")) { $("#message").fadeIn(); } else { $("#message").fadeOut(); }});```---### 5. **フォームのバリデーション**ASP.NETでは、jQueryを使ったクライアントサイドのバリデーションがよく利用されます。`jQuery Validation Plugin`を使用することで、簡単に入力チェックを実装できます。#### 例```javascript// フォームのバリデーション設定$("#myForm").validate({ rules: { username: { required: true, minlength: 5 }, email: { required: true, email: true } }, messages: { username: { required: "ユーザー名を入力してください", minlength: "ユーザー名は5文字以上で入力してください" }, email: { required: "メールアドレスを入力してください", email: "正しいメールアドレスを入力してください" } }});```---### 6. **要素の読み込み後の処理**ASP.NETのサーバーコントロールである`UpdatePanel`内で部分更新が行われる場合、更新後に要素の再設定が必要になることがあります。jQueryを利用することで、部分的な更新後に必要なイベント処理を再度設定できます。#### 例（UpdatePanel使用時のリロード）```javascript// UpdatePanel更新後に再度イベントを設定する例Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() { $("#btnDynamic").click(function() { alert("UpdatePanel内のボタンがクリックされました"); });});```---これらの機能を活用することで、ASP.NETで動的で使いやすいインターフェースを作成できます。特に、Ajax通信やエフェクト機能は、ユーザー体験を向上させるために有効です。
2024.11.03
全6件 (6件中 1-6件目)
1
-
-
- あなたのおすすめコスメ・化粧品おし…
- ☆おすすめ☆ 人気韓国化粧水 Anua ア…
- (2024-11-20 09:27:19)
-
-
-
- 香水
- 数年おきにハマることこと
- (2024-10-30 09:00:09)
-
-
-
- 化粧品、クリスマス限定コスメどんな…
- CHANELホリデー限定セット
- (2023-11-06 20:21:41)
-
