テキスト入力を指定のフォントで表示

Question

当店では名入れを対応しているのですが
画像のような手書きの筆記体フォントで刻印しますので

よりお客様にわかりやすいように
ご入力された文字をその筆記体のフォントで
プレビュー表示できるようなシステムを構築したいと考えているのですが

例えばその筆記体フォントのデータを楽天goldなどのサーバーに入れて
インラインフレーム内にテキスト入力エリアを設けて
英数を入力してプレビューボタンを押したら

プレビューエリアで筆記体フォントを指定フォントとして呼び出して表示する。

と、そういう事が可能でしょうか？
また、意図していることができる方法等ありましたら

ご教授下さいませ。
よろしくお願いいたします。

Answer

ECマスターズの田中です。

「.ttf」形式のフォントデータをお持ちでしたら、
下記記事にて紹介されている「Webfont Generator」で
Webフォントとして使える形式に変換することが可能です。
https://zxcvbnmnbvcxz.com/convert-to-webfont/
※変換の前に、フォントのライセンスに反しないかどうかを予めご確認ください。

変換したファイルをGOLDにアップロードして、
CSS内で設定することにより、フォントを利用することができます。

テキスト入力エリア、プレビューボタン、プレビューエリアの動作設定は
JavaScriptで可能となります。
設定が難しい場合はお知らせください。

あるいは、テキスト入力エリアだけ１つ設けておき、
表示用フォントとしてGOLDにアップロードしたフォントをご設定いただく、
という方法もあるかと思います。

Answer

田中様

ありがとうございます。
いつも田中様のレベルの高い技術・知識には
助けられております。

実装したいページはこちらになります。
http://www.rakuten.ne.jp/gold/81wind/neme.html

＞テキスト入力エリア、プレビューボタン、プレビューエリアの動作設定は
JavaScriptで可能となります。
設定が難しい場合はお知らせください。

→ご教授お願いいたします。

＞あるいは、テキスト入力エリアだけ１つ設けておき、
表示用フォントとしてGOLDにアップロードしたフォントをご設定いただく、
という方法もあるかと思います。


→こちらの方法がシンプルで良いかとも思いますが
現在入力した文字がそのままカゴに入りRMSでも確認できるようにしているため
実際に動作するとRMS側で文字化けするのではないかと思っております。
入力エリアのフォントは筆記体
RMS側に送信されるのはRMS側が認識できるフォント
と設定できれば良いかと思いますが可能ですか？

よろしくお願いいたします。

Answer

ECマスターズの田中です。

＞ご教授お願いいたします。
それでは、プレビューエリアとして使うタグを一個設置していただき、
そのタグにID属性を設定してください。
例）

次に、入力欄を示すタグに、
下記のようにonchange属性をご設定いただくことで、
テキスト入力エリアの内容が変わる度に、プレビューエリアの表示が変化します。

onChange="document.getElementById('preview_area').innerText=this.value;"

※「preview_area」の文字は、先ほど設定したID属性の値に合わせてください。
※「onChange」を「onKeyup」に変更すると、リアルタイムでプレビューが変更するようになります。

プレビューエリアの表示を変化させる仕組みができましたら、
スタイルシートによって、GOLDにアップロードしたフォントを適用していただくことで、
入力エリアに入力があるたび、指定したフォントによるプレビューが表示されるようになります。

なお、RMSに情報を送信する際、
入力エリアのフォントの情報は送信されることはありませんので、
独自フォントの利用による文字化けは発生いたしません。
ページ（正確には送信データ）の「文字コード」がEUCであれば問題ありません。

Answer

田中様

ありがとうございます！
おかげさまで無事プレビューすることができました！

しかし、指定フォントの設定がわかりません。
何をどこに記述すればよいのか…

スタイルシートに何を書けばいいのか
HTML内ではどこに呼び出すためのタグを書けばいいのか

力不足のくせにやりたい事がややこしくて申し訳ないです…
ご教授下さいませ。
よろしくお願いいたします。

Answer

ECマスターズの田中です。

https://zxcvbnmnbvcxz.com/convert-to-webfont/
こちらのページでも紹介されているとおり、
変換を行ってダウンロードしていただいた内容の中に
表示確認用HTMLが含まれており、
その中で設定方法の確認を行うことができます。

変換したファイルによって設定内容が異なる可能性があるため、
実際の表示確認用HTMLファイルを私にて確認する必要がありますので、
実際にGOLDに各ファイルをアップロードしていただき、
表示確認用HTMLのURLをお知らせいただけますでしょうか。

Answer

田中様

ありがとうございます。
URL
http://www.rakuten.ne.jp/gold/81wind/81/neme/saint-andrews_queen-demo.html

それとプレビューエリアの文字サイズのみ大きくしたいのですが
合わせてご教授のほどよろしくお願いいたします。

本当にお手数おかけ致します。

Answer

ECマスターズの田中です。

URLをお知らせいただきありがとうございます。
それでは、下記の内容をメモ帳にコピー＆ペーストしていただき、
ファイル名の末尾を「.css」にして保存した上で、
GOLDの「neme」フォルダにアップロードしてください。

===== この下の行から ================
@font-face{ 
	font-family: 'MyWebFont';
	src: url('WebFont.eot');
	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
	     url('WebFont.woff') format('woff'),
	     url('WebFont.ttf') format('truetype'),
	     url('WebFont.svg#webfont') format('svg');
}
===== この上の行まで ================
※「Webfont.***」と記載された各ファイル名は、
　実際にアップロードしたファイル名にご変更ください。

次に、下記HTMLタグを「neme.html」の
〜内にご記載ください。

===== この下の行から ================

===== この上の行まで ================
※「アップロードしたファイルのファイル名」を、実際のファイル名にご変更ください。

最後に、プレビューエリアのスタイルシートに、
下記属性を加えていただくことで、
プレビューエリアのフォントがアップロードしたフォントに変更されます。

===== この下の行から ================
font-family: 'MyWebFont', Arial, sans-serif;
===== この上の行まで ================

なお、プレビューエリアの文字サイズを大きくする際は、
スタイルシートの「font-size」属性をご利用ください。

===== この下の行から ================
font-size: 30pt;
===== この上の行まで ================
※数値を増減させて、フォントの大きさを調整してください。

Answer

ありがとうございます。

何かが間違っているのでしょうか…

指定のフォントになってくれませんね…

http://www.rakuten.ne.jp/gold/81wind/neme.html

原因は何かわかりますでしょうか？

Answer

何とかできたようです！

しかし、実際にカゴに入れてみると
入力情報が反映されなくなりました。

何が問題でしょうか？
よろしくお願いいたします。

Answer

田中様

ありがとうございます。
解決いたしました！

一応、田中様の方でも
PC・スマホから動作確認頂けますと幸いです。

よろしくお願いいたします。

Answer

ECマスターズの田中です。

私のPC・iPhoneでも、問題なく動作いたしました。
無事解決して何よりです。

Answer

田中様

本当にいつもありがとうございます！
今後ともよろしくお願い致します。