2022年6月21日火曜日

javascript備忘録その2

 聖剣伝説の攻撃力シミュレーターを作ってその状態をURLで保存するページを作ってみました。
ただ、ツイートする際に現在のURLでツイートするから現在のURLをリアルタイムで変更したいなぁって思ったので少し調べてみた。

ページ遷移動作は
location.href = 'URL';
ようはページリンクと変わらない。

現在のページパラメーター変更は
location.search = '?param=abc';
パラメーター更新という意味ではこれが正しい。
ただ、パラメーター変更はページの更新処理が走る。

現在のハッシュ値の変更
 location.hash = '#hash';
こちらは更新は走らない。
というのもハッシュはページ内の位置を記憶する為のものだから。

他に
History.pushState()
こちらもリアルタイムに変更できる
ただパラメーターというよりはハッシュみたいな扱いな気がする

最終的な悟り
そもそもツイートボタンのリンクを書き換えればよいのでは?
それはそう。

公式のシェアボタン生成から中身を見てみる。
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw"
class="twitter-share-button"
data-size="large"
data-text="聖剣伝説 Legend Of Mana リマスター 攻撃力シミュレーター"
data-url="http://blackstraycat.nobody.jp/lom/lom-savechart.htm"
data-hashtags="聖剣伝説LoM"
data-show-count="false">Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
なるほど。