こんな方にオススメの記事
結論、できます！
必要なのは2ステップ。
- 編集モードの設定
- < script >の記述
これだけで、こういう入力フォームを作りつつ↓
四則演算の結果が算出できるようになります。
もちろんJavascriptの基本的な知識は必要ですが、ネットで調べればザクザク出てきますし、上記フォームのソースコードも添えておくので、参考にしてみてください。
Javascriptをブログに埋め込むことができれば、一気にブログをWebツール化できるようになるので、ブログの役割が一気に広がりますよ。
Webツールとしてのブログ
Javascriptをブログに埋め込むことで、ブログをWebツール化できます。
もちろん「はてなブログ」でも可能です。
以下、「最大心拍数の算出」をサンプルに、解説していきます。
最大心拍数の算出（サンプル）
- 公式① 最大心拍数＝220 - 年齢
- 公式② 最大心拍数＝207 - (年齢×0.7)
年齢を入力してください↓
公式①：
公式②：
※入力規制がないのはご愛嬌です ^^;
手順
やりかたは至極カンタン。
- 編集モードを「はてな記法」「Markdown」「HTML」のいずれかに変更する
- < script >～< /script >で囲んでJavascriptを記載する
上記、2ステップだけです。
ただし、編集モードを「見たまま」以外にすることが、まず分岐点です。
「見たまま」モードだと余計なコードが補完されてしまうので、正しく表示されません。
- はてな記法
- Markdown
- HTML
こうも口酸っぱくいうのは、はてなブログは一度編集モードを決めて公開してしまうと、その後の変更が利かなくなるからです。
ご注意ください。
ソースコード（サンプル）
冒頭に載せた計算フォーム「最大心拍数の算出」のソースコードは以下の通りです。
年齢を入力してください↓
<form id="FormAge" action="#">
<input type="text" id="input-message">
<input type="button" onclick="showMessage()" value="計算">
</form>
<p id="output-message1">公式①：</p>
<p id="output-message2">公式②：</p>
<script>
function showMessage(){
const textbox = document.getElementById("input-message");
var inputValue = textbox.value;
// 計算
var MaxRate1 = 220 - inputValue;
var MaxRate2 = 207 - (inputValue * 0.7);
// テキストボックスの値を使って、出力するメッセージを生成する
const output1 = "公式①：" + MaxRate1 + " bpm";
const output2 = "公式②：" + MaxRate2 + " bpm";
// 出力用のp要素にメッセージを表示
document.getElementById("output-message1").innerHTML = output1;
document.getElementById("output-message2").innerHTML = output2;
}
</script>※私は「はてな記法」を採用しています
とりあえず、コピペして計算式を改造しながら自分のものにしてみてください。
デバッグするために
固定ページを駆使
記述したJavascriptがうまく動作するかデバッグ（検証）するために、はてなブログの固定ページを使うことをオススメします。
プレビューで動作することを確認の上、公開すればOK。
下書きでプレビューしても良いのですが、CSS（スタイルシート）などの都合上、実際の画面で確認したいケースもあるとおもいます。
記事としてリリースしてしまうと、テストにも関わらず最新のページとしてRSSフィードされてしまうので、固定ページでの検証をオススメします。
私は下記URLにデバッグ用の固定ページを公開し、実際の見え方を確認しています。
アラートを駆使
プレビューではJavascriptが正常に動作している場合は確認できるのですが、正常に動作しない場合、どこのコードに誤りがあるかわかりません。
要はデバッグがめちゃくちゃしにくいんです。
なので、てっとり早いのは、アラートメッセージをソースの色んな箇所に入れていき、どこでそのメッセージが表示されなくなるか切り分ける方法です。
alert('ここまで正常');5箇所入れて、4箇所目で表示されなくなったら、3箇所目と4箇所目のコードのどこかに誤りがあるはずなので、さらにアラートを追加して範囲を絞っていきます。
ちなみに、メッセージに入力値（変数）を表示することも可能で、例えば冒頭の「最大心拍数の算出」の場合
alert('入力値：' + inputValue );とアラートを記述することで、入力値が正しく取得できているかを確認する、というような使い方もできます。
コメントアウトを駆使
あとアラートメッセージとセットで使いたいのが、コメントアウト「/* ～ */」です。
そもそもソースコードに誤りがあるとJavascript全体が機能しない場合があるので、コメントアウトを使って、コードがなかったことにします。
もし、コメントアウトすることで、するようになったとすると、コメントアウトした場所に不備がある、と切り分けができるのです。
次項に例を記載しますが、コメントアウトしたいコードの初めに「/*」を、終わりに「*/」を書いて、囲むように使ってください。
もし、1行だけ無効化したい場合は、行の先頭に「//」を付けるというのも有効です。
テキストエディタを駆使
ブログエディタ上だとソースコードが正しく記述されているかわかりませんが、Javascript対応のテキストエディタ（メモ帳のようなソフト）を使うことで、一気に見やすくなります。
「Javascript テキストエディタ 無料」とかで調べれば山ほど出てきますが、オススメは「EmEditor」です。
先ほどのアラートメッセージ、コメントアウトの状態をEmEditorで編集すると…
こんな感じに色分けされます。
Javascriptに限らず、色んなプログラム言語に対応していおり、超絶オススメなのでぜひ試してみてください。
参考Web
本記事を書くにあたり、参考にさせていただいたのは以下のサイトです。
この場を借りて御礼申し上げます。
JavascriptでやりたいことをGoogle先生に尋ねれば、いくらでもソースがでてきます。
先人の知恵を借りましょう。
まとめ
はてなブログへのJavascript記述は、やってみるとカンタンで
- 編集モードの設定
- < script >の記述
今回はカンタンな計算式ではありましたが、たとえばクーパーテストの結果やVDOTの計算なんかにも流用できそうです。
参考になれば幸いです。
偉そうに書きましたが、私もまだまだJavascript初心者です。
アウトプットすることで成長するとおもっているので、一緒に切磋琢磨していきましょう！
