たつをの ChangeLog

12 件 見つかりました。

1 2 3 [ 次へ ]

積立額・年利・年数・目標金額のうち3つを入力するだけで、残り1つを自動計算してくれるシンプルな積立計算ツール「ざっくり積立シミュレーター」を作りました。

ざっくり積立シミュレーター
  • ざっくり積立シミュレーター
    「毎年いくら積み立てればいい?」「何年で目標金額に届く?」「今の積立で将来いくらになる?」 ──そんな疑問にすぐ答える、積立シミュレーション専用の軽量ツールです。

以下のように、知りたいことに応じて3項目を入力することで、残りの1項目を求めることができます:

  • 「積立額」を求めたいとき
    10年後に1,000万円を達成したい。年利5%で運用するとして、毎年いくら積み立てればいい?
  • 「年利」を求めたいとき
    毎年80万円を20年間積み立てて、目標は3,000万円。何%で運用すれば達成できる?
  • 「期間(年数)」を求めたいとき
    毎年100万円を積み立てて、年利3%で運用したら、1,500万円貯まるには何年かかる?
  • 「目標金額(将来の金額)」を求めたいとき
    毎年50万円を25年間積み立てて、年利4%で運用したら、最終的にいくらになる?

計算が完了すると、元本の推移と運用総額をグラフで確認することができます。積み立てた元本と、それに対する複利運用の効果が一目でわかるようになっており、「複利ってすごい!」という感覚を視覚的に実感できます。元本は灰色、運用総額は青色で表現され、資産の成長が明確に把握できます。

インストール不要でブラウザだけで完結するため、どこでも手軽に利用可能です。入力されたデータはサーバに送信されないため、プライバシー面でも安心です。さらに、スマートフォンにも対応しており、外出先や移動中でも操作可能。

使い方は簡単です。

  1. 4つの項目(積立額、年利、年数、目標金額)のうち3つを入力
  2. 求めたい項目の左にある「計算」ボタンを押す
  3. 結果がすぐに表示され、グラフも生成されます

ざっくり積立シミュレーター

初めての人は、まず「サンプルデータを入力」ボタンを押してから「計算」ボタンを押して動作を試してみてください。

あと、入力フォームをダブルクリックすると、そのフォームの入力を削除できます。全体を削除するには「全クリア」ボタンを。また、「結果をコピー」ボタンで
毎年600,000円を積み立てると年利5%(複利)で15年後に12,947,138円になる
といった文章形式でコピーできます。

ぜひお試しください。


グループ分けを複数回やるときになるべく同じ人とかぶらないように振り分ける、というのはよくある課題ですが、それを解決するツールを作りました (HTML + JavaScript)。車輪の再発明とか知らん。

barasukun

「作りました」とは言っていますが、プログラムのコードはすべて生成AI(ChatGPT)に書いてもらいました。私は仕様書(兼プロンプト)を書いただけで、ChatGPTに仕様書テキスト貼り付けて「これ作って!」と頼む係です(今後このパターンで作成・公開することが増えそうです)。

この手のウェブツール作成は生成AIの得意分野ですね。一手目からかなり思い描いた通りのものが出てきて、未来を感じます。「こういうツールを作りたい」という要望を持つのはまだ人間側の特権(?)みたいなものですので、要望をしっかりと仕様(プロンプト)に落とし込むことが出来さえすればAIとうまく共存できそうな気がしています。当面の間は。

というありきたりな生成AI感想は置いておいて、振り分けロジックの話。結局、目から鱗が落ちるようなトンチ的な解決方法はなくて、スタンダードなやり方に落ち着きました。これまでの回に誰と誰が一緒のグループになったかという共起情報を振り分けのときの使う作戦です。

データの持ち方は、参加者それぞれが何回目にどのグループに割り振られたかの履歴を持ち回るという方法。"#1A" は1回目にグループAに振り分けれらたこと、"#1A#2B#3C" は1回目はグループA、2回目はグループB、3回目はグループCに振り分けられたことを意味する履歴です。"天下一太郎#1A#2B#3C" のように参加者名の末尾にこの履歴を繋げて、それ自体をマスターデータとしています。必要な情報はすべて人目につくようにしています。

そんなわけで、この履歴付き参加者一覧をテキストでコピペすれば、セーブ&ロードになります。前回の続きから(例えば第5回から)グループ分けの再開ができるのです。

途中参加の人は参加者リストの末尾に履歴なしで名前を足すだけ。途中でいなくなる人はその名前を履歴ごと削除するだけ。シンプルです。

グループ振り分けがうまくできたかの評価基準として「またかよ数(MK)」「またかよ平均(MA)」というのを導入しています。これらは共起 (cooccurence) 関連の数値でして、キャッチーにそう呼んでいるだけです。
  • 「またかよ数」は参加者それぞれがグループ振り分け後に「またこの人と同じグループかよ!」と思う回数の合計です。「またAさんと一緒かよ、Bさんもかよ、Bさんは3回目だよ」という場合はこれまでにAさんは1回、Bさんは2回一緒だったので「またかよ数」は3となります。
  • 「またかよ平均」はそのグループの全メンバーの「またかよ数」の平均で、そのグループにうずまく「またかよ!」の強さを表しています。

なお、ツール名はChatGPTに考えてもらいました。他のネーミング候補としては「一期一会シャッフル」「またかよ防止くん」「グループシャッフル最適化ツール」「もう会わないグルーピング」などがありました(すべてChatGPTによる)。

Tekitof はウェブページ上で表示要素のフィルターやソートを行う JavaScript ライブラリです。Tekitof は「テキトフ」と読みます。適当フィルター、略してテキトフ、です。

github でリリースしました。

ソースをコピペすればすぐに使えるサンプルページも用意しました。

Tekitof

こういうライブラリってもちろん既存のがいろいろあるのですが、どれも大袈裟な感じで使いづらく感じていました。ちょこっとコードいじってカスタマイズしたいのに混み入りすぎて無理、とか。なので、自分が使いやすいミニマムなやつを作りました。車輪の再発明です。というかむしろ自分専用車輪の大発明です。

他と比べて特に優れた点はないのですが、特徴をいくつか。
  • 150行くらいでコンパクト
    • 内部で何をやっているのかの見通しが良い
  • 他のライブラリへの依存はゼロ
  • 複数キーワードの AND/OR 条件もサポート
  • フィルターの重ねがけが可能
    • 絞り込み結果にさらに別条件での絞り込みをかけられる

2年ほど前から Kindle セール情報サイト「キンセリ」で導入しています。というか、キンセリで使うために作った、というのが正しいですね。

例えば、キンセリのトップページの開催中のセール一覧で、開催中のセールをジャンルや出版社で絞ったり、開始・終了日や人気度でソートしたりする部分。また、個別 Kindle セールをまとめたページ()でのレーベルや読み放題などでの絞り込み、価格や割引率や配信日でのソートなど。その他、キンセリ内のあちこちで使っています。

今後キンセリ以外(例えばブラウザ拡張機能とか)でも使っていこうと思って、こうして公開してみた次第です。よかったら見てみてください。

以上です。

Amazon アソシエイトの Kindle 書籍の紹介料率は基本的に8%である。
(得られる紹介料は一冊あたり MAX 1000円の制限あり)

紹介料


紹介料は税抜価格の8%に対して小数点以下を四捨五入して計算される。
(過去数年の売り上げレポートのデータで検算済)

例えば、税抜価格6円(税込価格7円)の Kindle 書籍が1冊売れた場合は
6 * 0.08 = 0.48
で四捨五入して0となり収入は無し。
税抜価格7円(税込価格8円)の Kindle 書籍が1冊売れた場合は
7 * 0.08 = 0.56
で四捨五入して1となり収入は1円。

税込価格税抜価格紹介料紹介料(最終)
760.480
870.561
20181.441
21191.522

この四捨五入による調整のため、実際の価格と紹介料で計算すると紹介料率は必ずしも8%ぴったりにはならない。

なお、紹介料率の最高は7円の作品(税込価格8円)を売って紹介料が1円入ったときで14.29%である。

また、紹介料率の最低は6円以下の作品(税込価格7円以下)を売って紹介料が0円のときの0%で、その次は18円(税込価格20円、紹介料1円)の作品のときで5.56%である(紹介料が1000円(MAX)になる場合は際限ないので除外)。

税込価格と税抜価格


Amazon のサイトで表示されている Kindle 書籍の価格は税込価格である。

税込価格(小数点以下無し)が先にあって、それをベースに税抜価格を計算しているようだ。
同じ税抜価格の作品の税込価格が1種類ではない(例えば税抜25円の作品の税込価格は27円と28円の2種類がある)というのが根拠。

税抜価格は税込価格を 1.1 で割って四捨五入して計算する。消費税が10%なので110%、つまり 1.1 で割る。

例えば、2023年12月13日の『【推しの子】 13』はサイトでの表示価格(税込価格)が732円なので
732 / 1.1 = 665.4545...
で四捨五入した665円が税抜価格となる。

税込価格税抜価格
732665『【推しの子】 13』(2023/12/13)
730664『薬屋のひとりごと 1巻』(2023/12/13)
2725『サハラ(新装版)5』(2023/12/13)
2825『サハラ(新装版)6』(2023/12/13)

なお、ポイント還元キャンペーンなどによるポイント分の実質値引きは、売り上げレポートには反映されない。つまり、紹介料収入には影響がない。ポイント還元キャンペーンは売上冊数が増える上に紹介料は元の価格ベースで計算されるので、アフィリエイター的にはとてもありがたい。

表示価格(税込価格)から紹介料を計算する


表示価格(税込価格)から紹介料を計算する式。
ROUND() は小数点第一位で四捨五入する関数とする。

ROUND( ROUND( 表示価格 / 1.1 ) * 0.08 )

JavaScript で計算するやつ


税込価格、税抜価格、紹介料のどれかに金額を入力してその横のボタンを押すと残りの金額が計算される。ただし、税抜価格から計算する場合は税込価格が、紹介料から計算する場合は税抜価格と税込価格が一意ではないことに注意(複数の可能性があっても表示される金額は一つだけ)。

税込価格
税抜価格
紹介料


参考


li ごとにそれぞれ別の絵文字をマーカー文字として設定したい。
しかし、list-item-style で一つ一つ li に設定するのは面倒。
なので、li の先頭文字をリストのマーカー文字にする作戦!

  • li の先頭文字の取得。
    e.innerText.spit('')[0] だとサロゲートペア非対応で絵文字が壊れる。
    Array.from(e.innerText)[0] でいける。
    これをマーカー文字として JavaScript で設定すれば良い。
  • マーカー文字で使う先頭文字を li 本体で非表示にする。
    そうしないと二重で表示されるので。
    擬似要素 ::first-letter を使う。
    しかし利用可能プロパティの制約がきつい。
    display: none が使えないのはつらい。
    とりあえず透明にして全体を左にずらすことに。

こんな感じになりました。
(サービス適用例: キンセリの「定番セール」コーナー)
li marker emoji CSS

サンプルコード (HTML, CSS, JavaScript):
<ul class="c20220808">
 <li>&#x1F4AB;定期開催
 <ul>
  <li>&#10140;<a href="">&#x1f31e;日替わりセール</a>
   <a href="">&#x1f31b;月替わりセール</a>
  </li>
 </ul>
<li>&#x1f4b0;<a href="">ポイント還元対象作品</a>
 <ul>
 <li>&#x1f17f;<a href="">31%以上</a>
  <ul><li>&#10140;<a href="">&#x1F4AD;マンガ</a>
   <a href="">&#x1f9d9;ラノベ</a>
   <a href="">&#x1f4d4;文学</a>
   <a href="">&#x1f9ea;科学</a>
   <a href="">&#x1f4ca;ビジネス</a>
  </li>
 </ul>
 </li>
</ul>
<style>
.c20220808 li::first-letter { color: transparent; margin-left: -1em; }
</style>
<script>
Array.from(document.querySelectorAll('.c20220808 li')).forEach(
  function(e){ e.style.listStyleType = '"' + Array.from(e.innerText)[0] + '"'; }
);
</script>


なお、最初は list-style-type: none で良いかと思ったのですが、折り返しが発生したときに「コレジャナイ!」となりました。
  • "list-style-type: none" のとき (コレジャナイ!)
    • 📕おはようございます。
    • 📕こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
  • マーカー文字が📕のとき (コレダ!)
    • おはようございます。
    • こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。

参考

この記事に言及しているこのブログ内の記事

1 2 3 [ 次へ ]

たつをの ChangeLog
Powered by chalow