FinTech Dialy

FinTech Diary

FinTechのこととかクレジットのこととか。金融・ITの話題を中心に書いていきます。

【銀行】じぶん銀行の利用を見直しました

じぶん銀行のサービス改定に伴い、利用を見直すことにしました。
検討の結果、じぶん銀行の利用をやめることにしました(><;)

 

じぶん銀行のサービス改定

下記の改定が2018年12月から適用されます。

「じぶんプラス」一部改定のお知らせ | じぶん銀行

 「じぶんプラス」とは、じぶん銀行の利用状況によって「+1」~「+5」にランク付けされランクに応じてATM手数料等の優遇が受けられる仕組みです。

 

改定概要

今回の主な改定は以下よのうな感じです。

①「+1」の優遇廃止

 出金手数料は勿論、なんと入金手数料まで有料に∩(´;ヮ;`)∩

 郵貯ATMは216円、他ATMは108円の手数料が毎回発生します。

 改定前:ATM預入手数料-何度でも無料

     ATM出金手数料-月2回無料(郵貯は1回)

 改定後:ATM預入手数料-無料回数なし

     ATM出金手数料-無料回数なし

 

②取引条件A(預かり資産残高10万円未満で「+2」になる条件)の変更

「+2」だと入金手数料無料、出金手数料は月2回まで無料になります。

 改定後も満たそうと思えば満たせる条件ですが、その割にメリットが少ないような…

 改定前:下のいずれか一つ以上に該当

     ・じぶん銀行スマートフォンアプリへのログインが1回以上

     ・年齢が25歳以下

 改定後:下のいずれか一つ以上に該当

     ・じぶん銀行totoのくじ購入額合計が1,000円以上

     ・給与振込によるご入金額合計が5万円以上

     ・au WALLET プリペイドカードへのオートチャージによる出金が

      3ヶ月以内に1回以上

 

③「+4」「+5」の優遇強化

 他行への振り込み無料回数が大幅に強化されました。

 改定前:月3回/月5回(「+4」/「+5」)

 改定後:月8回/月15回(「+4」/「+5」)

 

所感

長引く低金利による利ざやの低下を補うために、多くの銀行が手数料の増加に踏み切っています。

あまり利益を生まないライトユーザーを切り捨て、より利益を生む顧客を重視するのは仕方のないことだと思います…

ただ、かつて最強を誇った頃のじぶん銀行を知っていいると、長年のau・自分銀行ユーザーとしては非常に悲しい気持ちにならざるを得ません(; ;)

 

最強だった頃のじぶん銀行

今となっては影も形もなく消滅してしまいましたが、かつてはauユーザー向けに「プレミアムバンク for au(2016年11月に終了)」という神がかり的なサービスを提供していました。

プレミアムバンク for auのサービス

・ATM手数料が24時間365日、何回でも無料

・振込手数料がどの銀行宛てでも無料

(2015年10月からは他行宛ては月5回までに変更)

 

[参考]最強"だった"「じぶん銀行」が改悪…。さらばauユーザ!

matome.naver.jp

 

私も10年来のauユーザーで、就職してからは財布のお供としてじぶん銀行のキャッシュカードを重宝してきました。

しかし、auユーザーだからと言ってじぶん銀行を利用するメリットはほぼなくなりました(カードローン金利は優遇されるけど、使わないので…)。

 

じぶん銀行の利用法

私のじぶん銀行の利用法は以下のような感じでした。

メインバンクは給与振り込み口座であるMUFG(三菱UFJ銀行)ですが、下記の理由から現金の引き出しにはじぶん銀行を利用してきました。

MUFGからじぶん銀行へは振込手数料無料

MUFGはシルバーステージ(給与受取で達成)でも出金手数料無料は月2回まで。

 (じぶん銀行は何度でも無料だった。改悪後も3回までは無料だった)

⇒毎月MUFGから必要な分の現金をじぶん銀行に振り込み、引き出すという利用法。

 

今回の改定でじぶん銀行を利用する意味がなくなったため、利用を見直すことにしました。

 

対応

住信SBIネット銀行のキャッシュカードを作成し、出金に利用することにしました

(元々、住信SBIネット銀行SBI証券の証券口座のおまけで作ったのものなのでリアルでの使用は想定しておらず、キャッシュカードは今回新たに作成)。

 

じぶん銀行の「じぶんプラス」より、住信SBIネット銀行の「スマートプログラム」の方が圧倒的にメリットが大きいためです。

 

住信SBIネット銀行の「スマートプログラム」

じぶん銀行の「じぶんプラス」と同様、利用状況に応じてたステージ制の優遇制度です。

最低ランクの「ランク1」でも出金手数料月2回無料、他行宛て振込月1回まで無料です。

この時点で、じぶん銀行から乗り換えるには十分でした。

 

[参考] スマートプログラム - ランク

www.netbk.co.jp

 

[参考] スマートプログラム - ランク判定条件

www.netbk.co.jp

 

さらに、私は「THEO+住信SBIネット銀行」というサービスを利用しているため、現在のスマートプログラムのランクは「ランク3」で、ATM出金手数料は月7回まで無料、他行宛て振り込みも月7回まで無料と、十分なレベルです。

元々THEO単体で利用していましたが、連携することで住信SBIネット銀行のスマートプログラムの対象となることを知り、後から連携しました。

 

[参考]ロボアドバイザー(自動資産運用サービス)- THEO+住信SBIネット銀行

www.netbk.co.jp

 

「ATM手数料はじぶん銀行が最強」というかつての印象に捕らわれ今に至るまで見直しを行ってきませんでしたが、もっと早く見直しておけばよかったかもしれません。

まあ結局間に合ったので特に問題はありませんでしたが(' ' )…

 

 

入出金フローの新旧比較

収入元、最終的な支出先、経由する金融機関等を洗い出し、資金の流れを整理しました。じぶん銀行使用時と、使用停止後の新旧比較です。

入出金フロー(旧)

じぶん銀行を使っていた頃の図。

毎月給与が振り込まれると、MUFGからじぶん銀行に必要な分だけ資金を振込み、最寄りのコンビニATMで現金を引き出していました。

f:id:natsumedeus:20181015031956p:plain

入出金フロー(新)

じぶん銀行の代わりに、住信SBIネット銀行から現金を引き出すことにしました。

f:id:natsumedeus:20181015032526p:plain

 

項目一覧

項番 分類 項目名
1-1
収入元
会社
1-2 ポイントサイト
2-1
銀行口座
MUFG(三菱UFJ銀行)
2-2 住信SBIネット銀行
2-3 SBI証券(ハイブリット預金)
2-4 じぶん銀行
3-1
投資先
maneo
3-2 SBI証券(証券口座)
3-3 bitFlyer
3-4 THEO
3-5 クラウドクレジット
3-6 その他
4-1
カード会社
JCBカード
4-2 VIEWカード
5-1 財布 財布
6-1
支出先
物品/サービス購入
6-2 家賃

項目説明

1.収入元

1-1.会社

 会社からの給与が主な収入です。仕事内容は「システム開発」カテゴリ参照。

fintechdiary.hatenablog.com

 

1-2.ポイントサイト

 コシゴトハピタスで地味にポイントを稼いでいます。

マクロミルは昔使ってましたが、手間がかかる割に貰えるポイントが少ないので最近は使っていません。詳細は「ポイントサイト」カテゴリ参照。

fintechdiary.hatenablog.com

 

2.銀行口座

2-1.MUFG(三菱UFJ銀行)

メインバンクです。給与受取に使用しており、そこから用途に応じて他の銀行や投資先等に振り分けます。

 

2-2.住信SBIネット銀行

一押しのネット銀行です。

定期自動入金で毎月MUFGから5万円を入金しています。

定期自動入金はスマートプログラムのポイント加算対象なのもおいしいです^q^

 

2-3.SBI証券(ハイブリット預金)

家賃・クレカの引落分を計算し、残った資金を投資用に入金します。

MUFGからの即時入金(手数料無料)により即買付余力に反映されます。

 

2-4.じぶん銀行

お世話になりましたm(_ _)m

 

3.投資先

3-1.maneo

ソーシャルレンディング投資。maneoは例です。maneoは投資口座がMUFGなので、MUFGから直で入金します(他は基本住信SBIネット銀行から)。

 

3-2.SBI証券(証券口座)

国内・海外(米国)株式を購入しています。詳細は「株」カテゴリから。 

fintechdiary.hatenablog.com

 

3-3.bitFlyer

 暗号通貨投資。bitFlyerは例です。その他は「暗号通貨」カテゴリ参照。

fintechdiary.hatenablog.com

 

 

3-4.THEO

 ロボアドバイザー投資。詳細は下記参照。

fintechdiary.hatenablog.com

 

 

3-5.クラウドクレジット

ソーシャルレンディング投資。クラウドクレジットは例です。その他「ソーシャルレンディング」カテゴリ参照。

fintechdiary.hatenablog.com

 

3-6.その他

その他の投資先です。例えば「セキュリテ」等。

fintechdiary.hatenablog.com

 

4.カード会社

4-1.JCBカード

メインカード。普段の買い物に使用。最近ライフカードから乗り換えました。

fintechdiary.hatenablog.com

 

4-2.VIEWカード

サブカード。定期券とSuicaのチャージに使用。Suicaオートチャージが便利(' ' )/

 

5.財布

5-1.財布

キャッシュレス派ですが、病院など現金払い不可避な場所がまだ多いため仕方なく持ち歩いています。

いつか財布を持たなくてすむ世界を夢見て…( ˘ω˘ )

 

6.支出先

6-1.物品/サービス購入

出不精なので買い物は専らamazonです。

 

6-2.家賃

実家住まいですが、両親に毎月上納している分を家賃として計算しています。

 

おまけ

つぐみたん

じぶん銀行カードローンの広告担当「小鳥遊つぐみ」たんです。

 

つぐみたんのご挨拶です。かわいいですね。

www.youtube.com

 

つぐみたんのTwitterです。

twitter.com

 

残念ならがじぶん銀行はもう使うことはないと思いますが、つぐみたんは今後も応援していきたいと思います。

 

銀行とかカード会社の萌えキャラもっと増えるといいな(' ' ) 

 

 

 

【ブログ作成】はてなブログをHTTPS(SSL)化しました

はてなブログHTTPS化したので、その際のメモφ(..)

 

 HTTPS化

 HTTPS化自体はボタン一つで完了です。

その後のデザインや個別記事の修正が、場合によっては大変みたいです。

私もHTTPS化後いくつかエラー(検索バーに警告が出る)が発生しましたが、デザイン等の設定のhttpのままになっている部分を修正すると解消しました。

 

参考記事

「公式からツールが出てくるのでは?」という意見もありました。

私は記事数少ないので「忘れないうちにやっとくか(' ' )」的な感じでやっちゃいましたが、急ぎでない、或いは、記事数が膨大である等の場合は公式のツールを待った方が楽かもしれないですね。

parupuntenobu.hatenablog.jp

 

具体的な手順は下記参照。

happylife-tsubuyaki.hatenablog.com

 

 javascriptとかcssではhttp/httpsの記載って省略できるんですねφ(..)

勉強になりました(' ' )

www.ashitamomusyoku777.com

 

 

見直し時に既存の設定ミス発見

HTTPS化した後に、おかしくなっているところがないか確認した際に、既存の設定ミスをいくつか発見しました(><;)

例えば、コードの参照元のサイトURLを自分のサイトのURLに変更し忘れていたり…

 

また、この際なので、設定しているデザイン等を下記にまとめました(' ' )/

fintechdiary.hatenablog.com

 

一応全部修正したつもりですが、もしおかしな点があったら教えて頂けると助かりますm(_ _)m

 

 

おまけ

最近気に入っている顔文字たちです。

癒されます…

(><)

٩( 'ω' )و

(' ' )/

φ(..)

 

 

【ブログ作成】はてなブログのデザイン参考

はてなブログで使用させて頂いているデザインテーマ、参考にさせて頂いたサイト等のメモφ(..)です。

 

 

[1]記事一覧画面

 記事一覧(トップページ)のデザイン等

f:id:natsumedeus:20181008200653p:plain

 

①デザインテーマ

下記を使用させて頂いておりますm(_ _)m

www.notitle-weblog.com

結構使色々なブログで使用されているのではないかと思います。

グローバルナビがシンプルで使いやすいです^^

 

②記事一覧

下記記事を参考に、トップページが記事の一覧になるように設定しています。

iitaikotoha.hatenablog.com

 

 

[2]個別記事画面

個別記事のデザイン等

f:id:natsumedeus:20181008201047p:plain

 

①記事ヘッダー・フッター

(1)シェアボタン(記事ヘッダー・フッター)

記事の上下に設定しています。

コードは下記を使用させて頂いておりますm(_ _)m

www.yukihy.com

 

(2)Milliard関連ページ

関連記事をパネル形式で表示します。

お洒落な感じになりますが、タイトル画像が未設定の記事があると文字だけの表示になってしまい悪目立ちするので、こちらを設定する場合はできるだけ記事にタイトル画像を設定しておくことをお勧めします\(' ' )/

corp.shisuh.com

 

②サイドバー

(1)SNSリンク

はてなブログの読者登録ボタン、TwitterFeedlyのリンクを設定しています。

ボタンを選択すると幅が伸びるのが楽しくてすこです\(' ' )/

 

f:id:natsumedeus:20181008185243p:plain

 

コードは下記を使用させて頂いておりますm(_ _)m

ohama-style.com

 

(2)その他

上記の画像では切れてしまいまいしたが、色々設定しています。

はてなブログの機能以外に追加したものは下記になります。

 

Twitter

まず初めに設置したのがこれでした。

[参考] Twitter Publish

 

・ハピタス

お得なポイントサイトの宣伝です。

カード作成やFX・証券・銀行口座等の作成でポイントが貰えます。新しいサービスに登録する際は、こちらに広告がでていないか必ず確認してから登録するようにしています。

m.hapitas.jp

 

amazon

私が過去に読んだFintech・クレジットカード関連書籍の宣伝です。

 [参考] お気に入りウィジェット

 

・応援チップ

 仮想通貨の投げ銭サービスです。

  [参考] 応援チップ 14種類の仮想通貨と日本円を受け取れる、3秒で作れるサービス

 

③サイトフッター

(1)シェアボタン

 記事左下のシェアボタンは下記を参考にさせて頂きましたm(_ _)m

いい感じに透けてるのがすこです\(' ' )/

www.lisz-works.com

 

(2)上に戻るボタン

 下記参考にさせて頂きました。

上矢印の大きさは自分で微調整しました。

blog.mshimfujin.net

 

 

シェアボタンまとめ

下記記事に色々まとめられています。

新規設置や変更の際に参考になるかと思います。

 

[参考] 【はてなブログカスタマイズ】色々な「SNSシェアボタン」と「フォローボタン」を集めてみた。 - LIABLIFE(リアブライフ)

 

 

おわり

ブログは気軽に色々試せて楽しいですね\(' ' )/

デザインをいじる他に、主にJavaScriptでちょっとしたページを作ったりしているので、よければ見ていって下さいm(_ _)m

 

fintechdiary.hatenablog.com

 

会社の業務では旧時代の遺物古き良き汎用機系を扱っているのでwebを扱うことはないのですが、ブログで色々と試していきたいと思います٩( 'ω' )و

 

 

 

【プログラミング】カード番号のチェックデジットを判定する(JavaScript)【クレジットカード】

カード番号の最後の一桁は「チェックデジット」と呼ばれ、カード番号の有効性を判定するのに利用されます。 今回はチェックデジットの判定を行うJavaScriptを実行してみますφ(..)



チェックデジットとは?

数値の入力誤りを検出するために、末尾に付与される数値。
チェックディジット、チェックサム、検査数字、検査文字などとも。
英語だとCheck Digit、略称はCD、C/D。
クレジットカード以外にも、バーコードや銀行の口座番号、マイナンバー等、色々な番号で使用されています。

[参考]IT用語辞典
www.weblio.jp

[参考]wikipedia
チェックディジット - Wikipedia


Luhnアルゴリズムとは?

チェックデジットを判定するアルゴリズムには「Dammアルゴリズム」「ヴァーヘフアルゴリズム」「Luhnアルゴリズム」等があり、 クレジットカードでは「Luhnアルゴリズム」を使用しています。

[参考]wikipedia
Luhnアルゴリズム - Wikipedia
色々な言語のサンプルコードが公開されています。



チェックデジット判定

カード番号を入力し「判定」ボタンを押すとダイアログに結果が表示されます。




適当に入れると大体エラーになりますw
例えば「1111222233334444」とか入れるとOKが出ます。



コード

HTML

onclickでShowCheckResultを実行。

<form name = fr_card_info>
<input name="card_num" type="text" value="" placeholder="カード番号 (半角数字)" size = "24" maxlength = "16" /> <br/>
<input type="button" value="判定" onclick="ShowCheckResult()">
</form>


JavaScript

一応数値チェック(NumCheck)も入れてます。
数値チェックOKの場合、チェックデジット判定(luhn_checksum)でチェックデジットを判定します。

<script language="javascript">
<!--
//チェック結果表示
function ShowCheckResult()
{
   in_card_num = document.fr_card_info.card_num.value;
   //カード番号チェック
   if(in_card_num == "" || NumCheck(in_card_num) == false){
      alert("カード番号には半角数値を入力して下さい"); 
      return;
   }
   //チェックデジット判定
   if(luhn_checksum(in_card_num) == false){
      alert("チェックNG(><;)"); 
      return;
   }
   //チェックOK
   alert("チェックOK( '-')b"); 
}

//数値チェック
function NumCheck(val) {
   if (val.match(/[^z0-9]+/)) {
   return false;
   }
}

//チェックデジット判定
function luhn_checksum(card_number) {
  var a, s, i, x;
  a = card_number.split("").reverse();
  s = 0;
  for (i = 0; i < a.length; i++) {
    x = a[i] * (1 + i % 2);
    s += x > 9 ? x - 9 : x;
  }
  return s % 10 == 0;
}
//-->
</script>



コード参考

以下、参考にさせて頂きましたm(_ _)m

[参考1]クレジットカード番号をチェックする

luhn_checksumを使用させて頂きました。

[参考2]【PHP】クレジットカードチェックサンプル

[参考3][メモ] 各種チェックデジットの計算方法

[参考4]Javascriptで入力チェック(半角英数字)

NumCheckを使用させて頂きました。

エクセルマクロ

私の大好きなエクセルマクロ(VBA)のサンプルもありました。
まあ使う機会があるかどうかは極めて微妙ですが…(-_- )


[参考]Luhn Algorithm Validation in VBScript (ASP)

www.nilpo.com


上記のコードをそのまま実行するとコンパイルエラーになってしまうので、参照設定にRegExpオブジェクトを追加する必要があります。

[参考]VBA正規表現を使う - RegExpオブジェクトの利用
codezine.jp



チェックデジット以外のカード番号の意味

せっかくなのでおまけで少し触れておきたいと思います。
簡単な解説をまとめました。

f:id:natsumedeus:20181004025930p:plain


[参考]クレジットカードプロ
https://www.card-x.net/contents/creditcard-number.htmlwww.card-x.net
[参考]GIZMODO
www.gizmodo.jp
[参考]wikipedia
クレジットカードの番号 - Wikipedia

ISO/IEC 7812 - Wikipedia


おわり

MASTERカードの先頭2導入とか、先頭1のブランド(UATP)とか、意外と新たな発見がありました。
ただの数字の羅列に見えるものにも、実は色々な意味が込められているんですね(' ' )



【プログラミング】はてなブログでオンラインショッピングごっご②【JavaScript】

前回記事の解説というか、コードを見やすいように表示しつつちょこちょこコメントを入れましたφ(..)
ラジオボタン、テキストボックス、プルダウンリスト、テキストエリア等色々と試しているので、
HTML/JavaScriptで何か作ってみたい場合の参考になればと思います。


↓下記記事の説明になります。 fintechdiary.hatenablog.com


商品一覧

HTML

★ポイント
ラジオボタンの使用
ラジオボタンを選択するとonclickイベントで[選択中の商品]の表示を切り替える(ChangeGoodsInfo)
・画像をクリックするとonclickイベントでラジオボタンが選択される(ClickGoodsImage)

<p>以下より商品をお選び下さい(画像クリックでも選択可)。</p>
<p>※価格は税別価格です</p>
<p><form name = fr_good></p>
<br/>

<p><input name="kapu" type="radio" value="kapu_html" id = "kapu_html" onclick="ChangeGoodsInfo(1)" />支払可能見込額算出サンプルコード(html)</p>
<p>[ダウンロード版]¥ 400</p>
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/natsumedeus/20180506/20180506201036.png" border=0 onClick="ClickGoodsImage(1)" style="cursor: hand;">
<br/>
<br/>

<p><input name="kapu" type="radio" value="kapu_js" id = "kapu_js" onclick="ChangeGoodsInfo(2)" />支払可能見込額算出サンプルコード(JavaScript)</p>
<p>[ダウンロード版]¥ 600</p>
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/natsumedeus/20180506/20180506201302.png" border=0 onClick="ClickGoodsImage(2)" style="cursor: hand;">
<br/>
<br/>

<p><input name="kapu" type="radio" value="kapu_both" id = "kapu_both" onclick="ChangeGoodsInfo(3)" />支払可能見込額算出サンプルコード(html/JavaScript)</p>
<p>[ダウンロード版]¥ 900</p>
<p><span style="color: #ff0000">※html/JavaScript同時購入で10%割引</span></p>
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/n/natsumedeus/20180506/20180506203926.png" border=0 onClick="ClickGoodsImage(3)" style="cursor: hand;">

<p></form></p>


JavaScript

★ポイント
・CASE文を使用
・ChangeGoodsInfoを呼び出し、ラジオボタンを選択した時と同様に[選択中の商品]・[購入金額(税別)]の表示を切り替える

<script language="javascript">
<!--
//画像クリック時
function ClickGoodsImage(num)
{
   switch(num) {
       case 1:
           ChangeGoodsInfo(1);
           document.getElementById('kapu_html').checked=true;
           break;
       case 2:
           ChangeGoodsInfo(2);
           document.getElementById('kapu_js').checked=true;
           break;
       case 3:
           ChangeGoodsInfo(3);
           document.getElementById('kapu_both').checked=true;
           break;
   }
}

//商品・金額の表示切替
function ChangeGoodsInfo(num)
{
   switch(num) {
       case 1:
           goods_temp   = "支払可能見込額算出サンプルコード(html)";
           amaon_temp  = "400";
           break;
       case 2:
           goods_temp   = "支払可能見込額算出サンプルコード(JavaScript)";
           amaon_temp  = "600";
           break;
       case 3:
           goods_temp   = "支払可能見込額算出サンプルコード(html/JavaScript)";
           amaon_temp  = "900";
           break;
   }
   document.getElementById("select_goods").textContent = goods_temp;
   document.getElementById("goods_amount").textContent = '¥' + amaon_temp;
}
//-->
</script>


お支払い

カード情報のご入力

HTML

★ポイント
・テキストボックスの使用(カード名義人・カード番号)
・プルダウンリストの使用(有効期限)
・カード番号の入力後、onkeyupイベントにより[ご利用カード]の表示を切り替える(ChangeCardInfo)

<p>以下のカード情報をご入力下さい。</p>
<p>カード名義人(半角ローマ字) | カード番号 (半角数字)   | 有効期限</p>
<form name = fr_card_info>
<input name="card_name" type="text" value="" placeholder="カード名義人(半角ローマ字)" size = "21" maxlength = "30"/> 
<input name="card_num" type="text" value="" placeholder="カード番号 (半角数字)" size = "16" maxlength = "16" onkeyup="ChangeCardInfo(this.value)" /> 
<select name="month">
<option selected="selected" value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option>
<option value="05">05</option><option value="06">06</option><option value="07">07</option><option value="08">08</option>
<option value="09">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option>
</select>
<select name="year">
<option value="2018">2018</option><option value="2019">2019</option><option selected="selected" value="2020">2020</option>
<option value="2021">2021</option><option value="2022">2022</option><option value="2023">2023</option><option value="2024">2024</option>
<option value="2025">2025</option><option value="2026">2026</option><option value="2027">2027</option><option value="2028">2028</option>
</select>
</form>

<p>※JCB/VISA/MASTERブランドをご利用頂けます。先頭3(JCB)/4(VISA)/5(MASTER)且つ16桁の番号以外は購入時にエラーとなります。</p>
<p>※カード情報の収集はしてませんが、念のため適当な番号を入力してね!</p>
JavaScript

★ポイント
・substrを使用して文字列を編集

<script language="javascript">
<!--
//利用カード番号の表示切替
function ChangeCardInfo(change_card_num)
{
   document.getElementById("use_card_num").textContent = '************' + change_card_num.substr(12,4);
}
//-->
</script>


お支払い方法の選択

HTML

★ポイント
・プルダウンリストの使用

<p>一括払い/リボ払いのみご利用頂けます。</p>
<p><form name = fr_pay_method>
<select name="pay_method" onchange="ChangePayInfo(this.value)">
<option selected="selected" value="一括">一括</option>
<option value="リボ">リボ</option>
</select>
</form></p>
JavaScript
<script language="javascript">
<!--
//支払方法の表示切替
function ChangePayInfo(change_pay_method)
{
   document.getElementById("select_pay_method").textContent = change_pay_method;
}
//-->
</script>


商品ご購入

HTML

★ポイント
・入力によって下記の表示が切り替わる
・購入ボタンを押すと購入処理(purchase)を実行

<p>以下の内容でよろしければ、”購入”ボタンをクリックして下さい。</p>
<p>-----------------------------------------------------------------------------------------------------------</p>
<span>[選択中の商品]</span>
<span id="select_goods">商品未選択</span>

<span>[購入金額(税別)]</span>
<span id="goods_amount">¥0</span>

<span>[ご利用カード]</span>
<span id="use_card_num">未入力</span>

<span>[お支払い方法]</span>
<span id="select_pay_method">一括</span>

<span>[ダウンロードリンク]</span>
<a id="download_link"  href="" target="_blank"></a>
<p>※ダウンロードリンクはご購入後に表示されます</p>

<p>-----------------------------------------------------------------------------------------------------------</p>


<input type="button" value="購入" onclick="purchase()">
JavaScript

★購入処理(purchase)の説明
(1)入力チェック
入力された商品情報、カード情報が不正な値でないかチェックする。
チェックOKの場合、クレジット売上票の編集、ダイアログメッセージの表示、ダウンロードリンクの表示を行う。
チェックNGの場合、ダイアログメッセージを表示し処理を終了する。

(2)クレジット売上票編集(edit_credit_slip)
入力された商品情報、カード情報を元に、テキストエリアに表示するクレジット売上票の内容を編集する。

(3)ダウンロードリンク表示(show_download_link)
選択された商品のダウンロードリンクを表示する。

★ポイント
処理を説明する際には、IPOを考える(最近上司に教わりました)。
ただし、文脈によって自明なこと等は適宜省略したりする。
I(Input)・・・入力
P(Process)・・・何をするか
O(Output)・・・出力
例)入力チェック
入力された商品情報、カード情報が(I)不正な値でないかチェックし(P)、OK/NGの結果を出力する(O)。

<script language="javascript">
<!--
//購入処理
function purchase(){

   if(input_info_check() == false){ //入力情報チェック
      return;
   }

   edit_credit_slip();  //クレジット売上票編集
   alert("お買い上げありがとうございます。\nダウンロードリンクより商品をダウンロードして下さい。"); 
   show_download_link();
}
//入力情報チェック
function input_info_check(){
   in_card_name = document.fr_card_info.card_name.value;
   in_card_num = document.fr_card_info.card_num.value;
   brand_id = in_card_num.substr(0,1);
   in_expire = ""+ document.fr_card_info.year.value + document.fr_card_info.month.value;
   in_goods_name = document.getElementById("select_goods").textContent;

   //商品選択チェック
   if(in_goods_name == "商品未選択"){
      alert("商品を選択して下さい"); 
      return false;
   }

   //比較用有効期限編集
   var hiduke=new Date(); 
   var year = hiduke.getFullYear();
   var month = hiduke.getMonth()+1;
   chk_expire = ""+ year + zeroPadding(month ,2);

   //カード名義人チェック
   if(in_card_name == "" || ArfCheck(in_card_name) == false){
      alert("カード名義人には半角ローマ字を入力して下さい"); 
      return false;
   }
   //カード番号チェック
   if(in_card_num == "" || in_card_num.length < 16 || NumCheck(in_card_num) == false){
      alert("カード番号には半角数値(16桁)を入力して下さい"); 
      return false;
   }
   //ブランドチェック
   switch(brand_id  ) {
       case '3':
           card_co  = "  JCB   ";
           break;
       case '4':
           card_co  = "  VISA  ";
           break;
       case '5':
           card_co  = " MASTER ";
           break;
      default:
          alert("お取り扱いできなブランドのカードです"); 
          return false;
          break;
   }

   //有効期限チェック
   if(Number(in_expire) < Number(chk_expire)){
      alert("有効期限切れです"); 
      return false;
   }

}
//英字チェック
function ArfCheck(val) {
   if (val.match(/[^A-Za ]+/)) {
      return false;
   }
}

//数値チェック
function NumCheck(val) {
   if (val.match(/[^z0-9]+/)) {
      return false;
   }
}
//クレジット売上票編集
function edit_credit_slip(){
   //日時データ編集
   var hiduke=new Date(); 
   var jikan= new Date();

   var year = hiduke.getFullYear();
   var month = hiduke.getMonth()+1;
   var day = hiduke.getDate();
   var hour = jikan.getHours();
   var minute = jikan.getMinutes();
   var second = jikan.getSeconds();
   var ymd = zeroPadding(year ,2) + '/' + zeroPadding(month ,2) + '/' + zeroPadding(day ,2);
   var hms = zeroPadding(hour ,2) + ':' + zeroPadding(minute ,2) + ':' + zeroPadding(second ,2);
   var ymd = zeroPadding(year ,2) + '/' + zeroPadding(month ,2) + '/' + zeroPadding(day ,2);
   var hms = zeroPadding(hour ,2) + ':' + zeroPadding(minute ,2) + ':' + zeroPadding(second ,2);

   //会員番号編集
   or_card_num = document.fr_card_info.card_num.value;
   ed_card_num  = '************' + or_card_num.substr(12,4);

   //支払区分
   ed_pay_method = document.getElementById("select_pay_method").textContent;

   //金額編集
   pay_amount = parseInt(document.getElementById("goods_amount").textContent.replace( '¥', '' ));
   pay_tax =  pay_amount * 0.08;
   pay_total = pay_amount + pay_tax;

   //売上票編集
   var col1 = '*****************************************\r\n';
   var col2 = '           [クレジット売上票]\r\n';
   var col3 = '   ――――――――――――――――\r\n';
   var col4 = '   加盟店名 MERCHANT\r\n';
   var col5 = '   Fintech Diary Online Shop\r\n';
   var col6 = '   ご利用日 DATE ' + ymd  + ' ' + hms  + '\r\n';
   var col7 = '   伝票番号 SLIP No 00123\r\n';
   var col8 = '   ――――――――――――――――\r\n';
   var col9 = '   会員番号 ' + ed_card_num + '\r\n';
   var col10 = '   ACCT No\r\n';
   var col11 = '   承認番号 APP CODE 123456\r\n';
   var col12 = '   ――――――――――――――――\r\n';
   var col13 = '   取引内容| 支払区分 |取扱区分\r\n';
   var col14 = '     売上  |  ' + ed_pay_method + '  |110\r\n';
   var col15 = '   ――――――――――――――――\r\n';
   var col16 = '   カード会社| 有効期限 |商品区分\r\n';
   var col17 = '   CARD Co | EXP DATE |\r\n';
   var col18 = '   ' + card_co + '| XX/XX    |680\r\n';
   var col19 = '   ――――――――――――――――\r\n';
   var col20 = '   金 額 AMOUNT    ¥' + pay_amount + '\r\n';
   var col21 = '   税その他 TAX/OTHER      ¥' + pay_tax + '\r\n';
   var col22 = '   ――――――――――――――――\r\n';
   var col23 = '   合計金額     ¥' + pay_total + '\r\n';
   var col24 = '   ――――――――――――――――\r\n';
   var col25 = '   Fintech Diary Online Shop\r\n';
   var col26 = '   ――――――――――――――――\r\n';
   var col27 = '   ご利用ありがとうございました。\r\n';
   var col28 = '   お客様控え CUSTOMERS COPY\r\n';
   var col29 = '*****************************************\r\n';
   cols = col1 + col2  + col3 + col4 + col5 + col6 + col7 + col8 + col9 + col10 +
              col11 + col12  + col13 + col14 + col15 + col16 + col17 + col18 + col19 + col20 + 
              col21 + col22  + col23 + col24 + col25 + col26 + col27 + col28 + col29;
   myform.myarea.value = cols;

}

//0パディング
function zeroPadding(num,length){
    return ('0000000000' + num).slice(-length);
}
//ダウンロードリンクの表示切替
function show_download_link()
{
   if(document.getElementById('kapu_html').checked==true){
      document.getElementById("download_link").innerHTML= "支払可能見込額算出サンプルコード(html).html";
      document.getElementById("download_link").href = "https://drive.google.com/file/d/1UDyFk227u37ypnNY_ib4ESA3qskJtAWO/view?usp=sharing";
   }
   else if(document.getElementById('kapu_js').checked==true){
      document.getElementById("download_link").innerHTML= "支払可能見込額算出サンプルコード(JavaScript).js";
      document.getElementById("download_link").href = "https://drive.google.com/file/d/13LSgZBotkd3gb9GpqlT9w3LSztfSozdH/view?usp=sharing";
   }
   else{
      document.getElementById("download_link").innerHTML= "支払可能見込額算出サンプルコード(html/JavaScript).zip";
      document.getElementById("download_link").href = "https://drive.google.com/file/d/1TfmkQzikQiRBZ1_QJeop9LO5ZQFy67zM/view?usp=sharing";
   }
}


クレジット売上票

HTML
<form name="myform"><textarea id="txtarea"  rows="10" cols="45" name="myarea" style="font-family:'MS ゴシック';" ></textarea></form>

<button onclick="run();">売上票ダウンロード</button>


JavaScript

★ポイント
・売上票ダウンロードボタンを押すとクレジット売上票をテキスト形式でダウンロード

<script type="text/javascript">
//伝票ダウンロード
function SaveToFile(FileName,Stream) {
  if (window.navigator.msSaveBlob) {
    window.navigator.msSaveBlob(new Blob([Stream], { type: "text/plain" }), FileName);
  } else {
    var a = document.createElement("a");
    a.href = URL.createObjectURL(new Blob([Stream], { type: "text/plain" }));
    //a.target   = '_blank';
    a.download = FileName;
    document.body.appendChild(a) //  FireFox specification
    a.click();
    document.body.removeChild(a) //  FireFox specification
  }
}
 
function run(){    
  Stream = myform.myarea.value;
  Stream = Stream.replace(/\n/g, "\r\n").replace(/\r\r/g, "\r");
  SaveToFile('クレジット売上票.txt',Stream);
}
</script>



おわり

以上です。
JavaScriptは家で作ってるだけで別に詳しいわけではないので、
おかしなところがあればご指摘頂けるとありがたいですm(_ _)m