米村歩@日本一残業の少ないIT企業社長 @yonemura2006 ・丁目、番地が全角しか入力できない ・電話番号が全角しか入力できない ・建物名が全角しか入力できない ・生年月日がカレンダーで果てしなきページ送りを要求される ・何の入力チェックでエラーが出ているのかわからない ・入力チェックエラーになると入力内容が全部消える #クソ入力フォーム選手権 2021-09-06 22:44:39
1. はじめに 今回はBean Validationを利用した入力チェックの方法について説明したいと思います。 Bean Validationの使い方 入力チェックの対象クラスにチェックに応じたアノテーションを付与する チェック対象となるインスタンスを生成する Validatorのvalidateメソッドにチェック対象のインスタンスを指定し、入力チェックを実行する 2. ライブラリの用意 必要となるライブラリを依存関係に追加します。 hibernate-validatorのメッセージ解決で必要となるためjavax.elも一緒に追加しています。 なお、Bean Validationのライブラリ(groupId:javax.validation、artifactId:validation-api)を記述していませんが、依存関係があるため自動で依存関係に追加されます。 <dependency>
今回は今まで構築した環境を使って、入力チェック(バリデーション)部分を手探りのままに作ってみたいと思います。 バリデーション処理をするためライブラリを探してみたところ、simple-react-validatorというなんとも組み込みやすそうなライブラリがありました。名前の通りsimpleであることに期待し、このライブラリを使ってチェック処理を実装したいと思います。 では、さっそく。 バリデーションに必要なものをインストール まず、simple-react-validatorを使用するため、nodeのルートディレクトリ(app)ターミナルで以下コマンドを実行します。 # simple-react-validatorをインストール # Next.jsのプロジェクトルートで実行すること npm install simple-react-validator --save login.tsxファイ
入力チェックエラーをNERV本部警告アラート風にして、サクッと人類を補完しちゃおう!!エヴァ劇場公開記念CSSJavaScript雑記ネタクソアプリ 人の造りしもの WEBシステム それが人類の脅威になってはいけません! WEBシステムは人類に無限の可能性を示唆する福音になる必要があるのです! (作品が違う。) ではどうするか!? そうです! 入力チェックエラーの時にNERV本部警告アラートを出すしかありません! 左記のアラートにより、人類が己の過ちに気付き正すことができます。 そして、どこまでが自分でどこからか他人かがわからないほどに正しい入力が行えるセカイ(WEBシステム)になるのです!! これこそまさに人類補完WEBシステムの究極!!!!!!! はじめるぞ、冬月。 要約 CSSとJavaScriptだけで、NERV本部のモニターに出る警告アラートを出したい!! では、やっていきましょ
はじめに ASP.NETにて入力チェックをするにはDataAnnotationによる標準のValidationフレームワークを利用することができますが、標準機能だけでは業務要件的に全てのケースに対応できない場合には結局自前で検証コードを書くことになる為、検証コードが複数個所に分散することを嫌って標準のValidationを使っていない方もいるかと思います。 また、いろいろな理由でDataAnnotationが使えず、コントローラや業務ロジック側で入力検証をする必要があるケースもあるでしょう。 その際に使用できるシンプルな入力検証フレームワークの一つがFluentValidationです。 https://docs.fluentvalidation.net/ これを使うと、フレームワークでできる部分はフレームワークに任せ、複雑な検証は自前のコードで追加で記述することが容易に可能です。 また、
この記事について 入力ライブラリのPydanticで、(クラス定義を通さずに)関数で値をチェックする方法を紹介します 検証環境のバージョン Python 3.10 pydantic 1.10.7 pydanticって何? 入力をチェックするPythonのライブラリです # ユーザー情報クラスを定義する class UserInfo(BaseModel): user_name: str password: str # もし入力パラメータが{"user_name": "文字列", "password": "文字列"}の形式でなければ例外を投げる UserInfo.parse_raw(input) BaseModelを継承したクラスの型ヒントから、値を入力チェックすることができます。 この記事で実現したいこと、実現すること 実現したいこと JSONのような入力チェックなら標準の使い方そのままでい
オススメ!PICK UP Accessibility確認のブラウザー拡張機能 ソフト紹介2023年10月 2日 簡単実装:CSSだけでアコーディオン開閉させる CSS2022年5月 9日 jQuery:アコーディオンメニューをサクッと作りたい時のための記事 JavaScript2021年12月10日 スライダープラグインの王道「slick」でスライダーを実装する方法 スライダー2021年12月 8日 【Google Chrome】サイト全体をスクリーンショットする方法【拡張機能不要】 PC・スマホ(操作/設定)2020年10月29日 JavaScript コーディング 制作 PCやスマホで大抵なんでもかんでも手続きができちゃう現代。 通販を利用する時、舞台のチケットを取る時、ファンクラブに登録する時、etc... 様々な場面でフォームに入力をする機会があると思います。 そんな時ストレスにな
言語:C# 使用例 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; namespace 入力チェック { public partial class Form1 : Form { public Form1() { InitializeComponent(); } // ErrorProviderのインスタンス生成 ErrorProvider ep = new ErrorProvider(); /// <summary>
入力チェックの種類 セルやテキストボックスの文字列の入力チェックが必要な場合がありますが、入力チェックには以下のようにいろいろあります。 未入力チェック 文字数チェック 日付形式チェック 郵便番号形式チェック メールアドレス形式チェック 全角のみチェック 半角のみチェック 数字のみチェック 英字のみチェック 入力項目の内容に合わせて細分化すればさらにチェック形式が増えますがここでは上に挙げた各チェックについて実装方法を紹介します。 なお、一部のチェックでは都合がいいため正規表現を利用しています。正規表現が分からなくてもコピペで使えるようにしています。 事前設定 以下の一部のチェックで正規表現を使っているため、正規表現を利用するための参照設定をしておく必要があります。 VBAの画面でツールメニュー→参照設定のダイアログを開き、「Microsoft VBScript Regular Expre
人が操作するソフトウェアの開発で一番苦労する処理は入力チェックかもしれません。間違った入力を見逃すとちゃんと動かなかったり、プログラムが異常終了する原因になります。人の間違いをうまく教えてあげることでプログラムをスムーズに使ってもらえるようになりソフトウェアの評価も上がります。この記事はTWSNMPの入力チェックの仕組みについての話です。 入力チェックのライブラリ 入力チェックの処理をすべて自力で作る方法もあります。例えばIPアドレスの形式チェックなら4つの数値をドットで区切った文字列であることをチェクするプログラムを作ればよいです。ちょっと凝った方法なら正規表現でチェックしてもよいです。でも、ソフトウェアに入力するデータの形式はある程度パターンが決まっているので入力チェックは誰かの作ったライブラリを使った方が楽できるはずです。いつものようにGoogleに聞いてみました。"validato
概要 Pythonによる各種入力チェック実装。 サーバーサイドでのチェックを想定しています。 実装するチェックは以下になります。 ・必須チェック ・上限桁数判定 ・型判定 ・半角英数判定 ・Base64判定 ソースコード import re def checkRequire(checkStr: str): # 必須チェック判定 return len(checkStr)!=0 def checkMaxNum(checkStr: str, maxNum: int): # 上限桁数判定 currentNum = len(checkStr) return currentNum <= maxNum def checkType(checkStr: str, type): # 型判定 if checkStr == None: return True return type(checkStr) == ty
今回は@Patternで指定する正規表現を使って、わかりやすい名前の独自入力チェック用アノテーションを作ってみます。 なお、STS3(3.9.6)+SpringBoot2.0+tymeleaf3.0迄動作確認しています。 @Patternを使う方法には欠点がある Spring Boot +thymeleafの入力チェックでは、@Patternを使えば、大抵のことができるのですが、このやり方にはちょっと欠点があります。 それは、わかりづらいことです。 こんな感じの記述が、1箇所ならともかく、たくさんあると、ちょっと嫌です。 @Pattern(regexp = "^(https?|ftp)(:\\/\\/[-_.!~*\\'()a-zA-Z0-9;\\/?:\\@&=+\\$,%#]+)$") やっぱり、@UrlValid とか @EmailValid とかのわかりやすい名前のアノテーションを
このページでは入力した文章などに含まれる漢字を、小学校何年生で習う、中学校で習う、小中学校で習わない、に分けて表示できます。 小中学校で学習する漢字について... 小中学校で学習する漢字について 当サイトでは、漢字を学習する学年や学校を以下のように分類しています。 小学校で学習する漢字 小学校学習指導要領に基づき小学校の各学年で学習する漢字(全1,026字) 中学校で学習する漢字 常用漢字のうち、小学校で学習しない漢字(全1,110字)を「中学校で学習する漢字」「中学生の漢字」等と表現しています。ただし、実際の中学校でこれら全ての漢字を学習するとは限りません。
いつも便利に使わせていただいております「Contact Form 7」 しかしこちらの作者氏(Mr. Miyoshi)、メールアドレス再入力チェックと、送信確認画面の実装についてだけは、頑ななまでに否定的だった記憶があるのですが、いつのまにか公式サポートでやり方をご案内されていたんですね。親切!(しかも簡単、しかも2015年…) 上記の記事で紹介されている、次のコードを functions.php に追加するだけです。 (functions.php に手を加えたくない場合は、code snippets 等を使います) add_filter( 'wpcf7_validate_email*', 'custom_email_confirmation_validation_filter', 20, 2 ); function custom_email_confirmation_validation
入力チェックを行いたい場合、自前で判定処理作るのが常というのはありますが、PHPはFilter関数と呼ばれる言語自体に用意された、検証とサニタイズを行う機能があります。ちなみに検証とサニタイズの定義は下記ということになっています。 データの検証=データが適切な形式であるかどうかを判断。 データのサニタイズ=データから不正な文字を削除。 PHP Filter 関数 PHP Filter関数は、外部からの入力を検証およびサニタイズするために使用します。 PHP のFilter拡張機能は、ユーザーの入力をチェックするために必要な機能を備えており、 データの検証をより簡単かつ迅速に行うように設計されています。 filter_list()関数を使用すると、PHPが言語として提供しているPHP Filter拡張機能のリスト一覧を確認できます。 PHP Filter 関数 なぜフィルターを使用するのか?
はじめに この記事はSTSを利用した自作アノテーションの作成方法を記したものです。 以下のバージョンでの動作を確認しています。 - Pleiades All in One Eclipse 2021 - Spring Tool Suite (STS) 4.12.0 今回は「正しいタイムスタンプ形式かどうか」をチェックする自作アノテーションを作成してみたいと思います。 注釈(アノテーション)型の作成 「Ctrl + N」もしくは、「ファイル → 新規 → その他」からウィザードを立ち上げます Javaの項目の注釈型を選択し、次へを選択します。 名前を記載してください。バリデーション名になるため何を入力チェックするのかが分かりやすいモノであるべきでしょう。 @Rententionとはアノテーションが影響する範囲です。 @Targetとはアノテーションをつける対象。いわゆる入力チェックを行う対象と
JavaScriptで入力チェック・文字を入力制限する方法(4ページ目)JavaScriptで入力チェック・文字を入力制限する方法を解説。メールアドレスや日付のように入力文字数や文字種を制限したいフォームでは、リアルタイムにエラー表示できると便利。正規表現などを使う入力チェックの書き方をサンプルと共にご紹介。 B. 英字と特定の記号だけの入力に制限する書き方 次に、英字と特定の記号だけの入力を求めたい場合のJavaScriptソースをご紹介いたします。本記事で用意したサンプルページ「JavaScript入力チェック例」では、「6. ID」欄に適用しています。 ■JavaScriptソース: <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function() { // -------
前回記載していますが、PHPは性質上Webアプリケーションで利用されるため、様々な外部入力の影響を受けます。そのため言語自前で入力チェックを行う機能を有しており、PHP Filter関数と呼ばれるものがあります。 今回はfilter_var()関数のやや高度な使い方をまとめています。 PHP Filter 関数 PHP Filter関数は、外部入力の検証およびサニタイズするために使用され、ユーザー入力のチェックに用いられる機能があり、データ検証を簡単かつ迅速に行えるように設計されています。 filter_list()関数を使用して、PHPが言語として提供しているFilter拡張機能のリスト一覧を確認できます。 PHP Filter 関数 範囲内の整数を検証する 次の例では、filter_var()関数を使って、ある変数の型がintで、かつ1から200までの値であるかどうかを調べます。 <?
<!DOCTYPE html> <html lang="ja"> <style> body { padding:50px; background-color: greenyellow; } body #title { color:red; font-size : 50px; } body #name { width:200px; } body #mail { width:400px; } body #button1 { background-color: blue; } </style> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <h1 id = "title">送信フォーム</h1> <form action = "index4.html" method="POST"> Name:<input t
例えば、市役所で住民票を申請するとします。申請書の生年月日の欄に慌てて名前を書いて申請します。 おそらく、受付の方から生年月日を書くように指摘されると思います。指摘されれば生年月日を記入しますよね。 これが入力チェックの役割です。 入力チェックより後の処理は、正しく入力されたことを前提に作られることが多いと思います。生年月日から年齢を計算するような処理があったとして、入力チェックがなければ日付でないものが入ってくる可能性がありますよね。入ってきた場合、計算できなくてエラーになるかもしれません。 日付の入力チェックを行っておけば、日付が入ってくることは担保できますので年齢計算はできます。安心安全ですね。このように入力チェックは間違った入力を防ぐ為に必要なものです。 一般的なもの、業務に特化したものに大体分かれます。 一般的なチェックはどのシステムでも似たようなものです。業務に特化したチェック
1.英数字チェック 画面で入力された文字が英数字のみであるかどうかをチェックします。 英数字や英数字以外の文字を入力して OK ボタンをクリックしてみて下さい。 上のサンプルのソースコードは次の通りです。 <script type="text/javascript"> function checkStr(){ const str = document.getElementById("dat").value; if (str.match(/[^0-9 0-9 a-z a-z A-Z A-Z]/g)){ alert("英数字以外が含まれています\n(" + str.match(/[^0-9 0-9 a-z a-z A-Z A-Z]/g) + ")"); } else { alert("入力OKです!"); } } </script> <div style="background-color :
より高度な入力規則が問われる 入力規則自体は認定アドミニストレーターでもテスト範囲内ではありましたが、ごくごく基本的で簡易的な内容でしか問われませんでした。 Sales Cloudコンサルタントではより高度な入力規則のチェック方法が問われ、さらにシナリオに応じて出題されるので、様々なケースに対して条件を引き出せるかが重要となってきます。 高度な入力規則の使用例 ここからは、ちょっと高度な入力規則の使用例です。 以下に挙げるものはいずれも試験の出題ポイントになるので、覚えておきましょう。 ログインユーザのチェック ログインユーザについての情報を入力規則の条件に加えることができます。 $Userを使用することで、ログインユーザの情報を参照することができます。 例)ログインユーザが所有者と一致しない場合はエラー 特定の権限(プロファイル)かどうかのチェック ログインユーザだけでなく、自身が属する
はじめに 実務にて、フォームデータを URL 入力チェックするバリデーション(入力値の検証)を実装する作業があり、それを解決した情報になります。Web 開発の初心者、初学者の方にもわかりやすいように、ソースコードを編集してサンプルを公開しています、ご参考になれば幸いです。 検証環境 MAMP:6.6PHP:8.0.8 サンプル GitHubindex.php:URL チェックと入力フォーム 解説 サンプルのソースコードを基に実装方法を説明します。 URL の形式チェック URL(Uniform Resource Locator)とは、簡単に言うとインターネット上にある リソース を特定する場所のことです。 よく URI(Uniform Resource Identifier)を URL と言い方が違うだけで同じ意味だと勘違いしている人がいるので注意しましょう。 URI には、URL と U
Laravelのバリデーション機能は多様なチェック機能がデフォルトで備わっておりとても便利です。 ですが、実際に使用していく中で入力チェックの内容に漏れがあったり抜け穴があったりと気を付けなければならない点がありましたので、バリデーションの使い方とともにまとめました。 今回まとめた内容の動作の確認はLaravel5.8にて行っております。 バリデーション機能の使い方 ここではLaravelバリデーションを使用するうえで作成するファイルや設定する箇所等についてまとめております。 バリデーション言語ファイルの設定 バリデーション言語ファイルはバリデーションエラー時のメッセージを定義するファイルになります。 バリデーションエラーメッセージは後で設定するフォームリクエストバリデーションでも設定が可能ですが、多言語化対応を行うとなった場合に対応しやすいようこのファイルで設定するのがベストです。 この
突然ですがこういうフォームっていいですよね! 入力が終わると、エラーかどうかを判定してエラー文を表示してくれる 正しい入力に戻ると、エラー文が消える gifにするとこういう感じ! シンプルですが、「どういう風に書けばこうなるか」は案外知らないと作れないと思います 今回はこういうフォームの作り方をさくっとまとめます 要点をまとめると onChangeで、「入力値」をuseStateへ保存する onBlurで、「入力値を判定したエラー文」をuseStateへ保存する これがわかればできます! 実装 では書いていきます まずHTMLですが、「ラベル(はなくてもいいけど)」「入力欄」「エラー文を出す場所」があればいいです! <div> <label>unique name</label> <input type="text" name="name" placeholder="Enter your
WordPressのプラグインContact Form 7でメールアドレスの再入力チェック機能をつけるカスタマイズ方法です。 一般的なお問い合わせフォームでメールアドレスといえば、連絡手段として非常に重要な項目ですが、人が入力する限り入力ミスは避けられません。 もし間違ったメールアドレスを入力されてしまったら折角のリード(=興味関心を持つ見込み客)と連絡が取れなくなってしまいますので、間違いないメールアドレス入力いただきたいものです。 その為に、もう一度メールアドレス確認用エリアにメールアドレスを再度入力していただき、前のデータと齟齬がないか確認する機能です。 もうデフォルトで実装してくれてもいいんじゃないかと言うくらいの定番機能ですね。 2021年1月26日 加筆修正 下記「実装方法」に記載のコードの一部で、全角文字が使用されており、コピペでは動作しない、とのご指摘をいただきました。 確
railsのコントローラーでAPIの必須項目が入力されているかチェックする方法です。 どんなケースで使うのか具体的な使い方を書いていきます。 rails guideには以下の説明がされています。 In addition, parameters can be marked as required and will flow through a predefined raise/rescue flow that will result in a 400 Bad Request being returned if not all required parameters are passed in. サンプルコード class UserController < ApplicationController rescue_from ActionController::ParameterMissing,
kintoneの欠点 kintone上で時間表記で記録をしたい場合、何時何分から何時何分、という表記であれば時間入力のフォーマットを使えば済むのだが、経過時間を記録したい場合は、この時間表記というのは都合が悪い。しかも秒まで記載できない。従って、選択肢は単一行入力のSINGLE_LINE_TEXTしかないのだが、全員が全員書式通りに入れてくれるわけでもない、ということで、書式チェックのやり方。 前提 moment.jsを使うので読み込んでおく。 サンプル説明 日報に通話合計時間を「時分秒」の形式で入力させたい場合のチェック。kintoneの画面から入力された値を取得してきて、moment.jsでフォーマット、「isValid()」の形式でチェックして、falseであれば、メッセージを表示させる。 サンプル // 通話時間の妥当性チェック if(record['通話時間']['value']
//必須項目チェックを追加する function RequiredCheckAdd(id, name) { if (typeof (Page_Validators) == 'undefined') { Page_Validators = []; } // Create new validator var newValidator = document.createElement('span'); newValidator.style.display = "none"; newValidator.id = id + "Validator"; newValidator.controltovalidate = id; newValidator.errormessage = "<a href='#" + id + "_label'>" + name + " は必須フィールドです。</a>"; ne
はじめに 「半角文字しか入力してはいけない」とか「文字数は30文字まで」とかいう入力上の制限を、Excelのセルにおいてチェックする場合はどうしたらよいだろうか。 そういう設定方法に全く知識のない人だと、ただ自分で気を付けるだけといった精神論的なやり方をするだろうが、こういうところで気配りをできると周囲からの評価が変わってくる。 今回の記事では、そういった入力チェックの仕組みを正しくExcelに組み込む方法を紹介し、貴方の資料作成を一歩も二歩も前進させていきたい。 では具体的にどうするか。 少し慣れた人だと、Excelの「入力規則」という機能を積極活用しようとするだろう。 いかにも入力チェックそのものといった名前であるし。 しかし答えを言ってしまうと、入力チェックは基本的には「条件付き書式」により行うべきだ。 「入力規則」の機能では、基本的には行うべきではない。 入力規則によるチェックのデ
1.はじめに この記事で書くこと Spring Boot で Bean Validation を使って入力チェックをする方法 Validationを自作する方法 出力メッセージを自作する方法 バリデーショングループを作成して、submit毎にバリデーションを分ける方法 この記事で書かないこと プロジェクトの作成方法 Spring MVCに関して(Model、View、Controllerに関する説明) 細かい実装方法(コピペで利用できるサンプルソースは掲載します。) 説明に利用する画面 本記事ではこの画面にエラーメッセージを表示するさまざまな方法を紹介します。 パッケージ構成 説明の中でサンプルソースを紹介しますが、下記の構成で作成いただければ └─main ├─java │ ├─base │ │ │ MainApplication.java │ │ │ │ │ ├─config │ │
概要 大阪オフィスの山田です。今回、SwiftUIでFloating Buttonを趣味アプリで実装してみたので、やり方メモを公開します。 環境 Xcode: 11.5 macOS: 10.15.4 Floating Buttonを作る このようなボタンを実装します。 以下の実装でFloating Buttonの外観を作ります。 struct FloatingButton: View { var body: some View { VStack { // --- 1 Spacer() HStack { // --- 2 Spacer() Button(action: { print("Tapped!!") // --- 3 }, label: { Image(systemName: "pencil") .foregroundColor(.white) .font(.system(size:
日付のカスタムフィールドが2つあり、1つ目のフィールドの日付は2つ目のフィールドの日付よりも前であることをチェックしてほしいと要望がありました。さてどうしたものか。 pre_saveでチェックするか JavaScriptで頑張るか、Perlで頑張るか、になると思うのですが、Perlでpre_saveコールバックを操って記事を保存せずエラーにするのが良さそうです。というわけで、先人の知恵も借りながら書いてみました。 ブログIDと入力した日付は以下のコードで取得できることが分かりました。意外と簡単。 my $q = $app->param; my $blog_id = $app->blog->id; my $d1 = $q->param('d_customfield_cf_entry_event_start_date'); my $d2 = $q->param('d_customfield_c
フォームにGoogle reCAPTCHAを設置する最もシンプルな実装は下記のようなものです。 (なお、スコア評価が面倒なのでv2のinvisibleを使います) <script src='https://www.google.com/recaptcha/api.js' async defer></script> <form id="myform" action="server.php" method="POST"> <dd> <dt>お名前 【必須】:</dt> <dd><input type="text" name="name" value="" /></dd> </dd> <div class="g-recaptcha" data-sitekey="GOOGLE_RECAPTCHA_SITE_KEY" data-callback="google_recaptcha_onSubmit"
(.Net)DataGridViewでの入力チェックはCellValidatingだけではダメの続きとなります。 前回の最後で、「この場合だと、一つでも入力エラーとなれば、正しい値を入れるまで何もできない(フォームを閉じることさえ)ので、実装には工夫が必要」と書きました。 今回はその工夫の1つで、間違った入力をされたら、その行は消すという方法です。 列数が1つとか2つかの場合には有効だと思います。 実際に行を消すのは RowValidated イベントで行っています。 厄介だったのは、Row.Delete() のときにまた、RowValidated イベントが走ってしまうという点です。 これを回避するために、賢い方法ではないですが、例外を捕まえてキャンセルさせるという方法にしました。もっといい方法はないんでしょうかね。 下記がコードです。DataTable等の環境は前回と同じです。 Pub
今回は、Contact Form 7 を利用している問い合わせフォームで、メールアドレスの再入力チェックをする方法をご紹介します。 再入力チェックとは、 通常のメールアドレスの他に、確認用のメールアドレスを入力してもらう 通常のメールアドレス確認用のメールアドレスが同じものになっているか? のチェックをする機能です。 これにより、メールアドレスの誤入力を防ぐ事が出来ます。 メールアドレスの再入力チェックを行うための手順 以下手順にて実施します。 1.通常のメールアドレスと確認用のメールアドレスの項目を作成する 2.function.phpにコードを追加する 3.動作確認 加えて、メールアドレスのコピペを禁止にする方法もご紹介します。 手順1:通常のメールアドレスと確認用のメールアドレスの項目を作成する まずは、通常のメールアドレスと確認用のメールアドレスの項目を作成します。 左メニュー[お
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く