Chat GPTを使って、ブログにJavaScriptで動く計算フォームを設置してみた

本サイトの以下の記事に数値を入力して計算してくれるフォームを設置しました。

mm→pixel計算フォームと換算表(350dpi & 300dpi)|印刷に適した画像解像度を知るために – WATANABEDESIGN.Blog https://watanabedesign511.info/archives/13020

文字サイズ「mm・級(Q)・ポイント」計算フォームと換算表 – WATANABEDESIGN.Blog
https://watanabedesign511.info/archives/13015

こういった計算フォームのHTMLをChat GPTで作ることができたので、その方法をご紹介します。

Chat GPTに入力するテキスト

例えば、以下のようなテキストをChat GPTに投げます。

2つの数値を入力し、足し算をしてくれる計算フォームのHTMLを書いて

そうすると以下のような感じでコードを書いてくれます。

書き出されたコードの内容

<!DOCTYPE html>
<html>
<head>
    <title>足し算計算フォーム</title>
</head>
<body>
    <h1>足し算計算フォーム</h1>
    <form>
        <label for="num1">数値1:</label>
        <input type="number" id="num1" name="num1"><br><br>
        
        <label for="num2">数値2:</label>
        <input type="number" id="num2" name="num2"><br><br>
        
        <input type="button" value="計算" onclick="calculate()">
    </form>
    
    <p id="result"></p>
    
    <script>
        function calculate() {
            var num1 = parseInt(document.getElementById("num1").value);
            var num2 = parseInt(document.getElementById("num2").value);
            var result = num1 + num2;
            document.getElementById("result").innerText = "結果: " + result;
        }
    </script>
</body>
</html>

このコードをWordpressのブロック要素「カスタムHTML」を選んでペーストします。

完成したフォーム

足し算計算フォーム

足し算計算フォーム





このように、Javascriptを使用した計算フォームを作ることができます。

細かい見出しの文字などはコードを直接書き換えれば変更できます。

私はHTMLやJavascriptを一から書くことは苦手ですが、このように、Chat GPTを使って雛形を作ればそこから編集することはできます。

WordPressでこういった計算を実現するプラグインもありますが、この程度の簡単な内容であれば、プラグイン無しで実装したほうがシンプルで気軽です。

Webサイトに簡単な計算フォームを作りたい方には、Chat GPTを使うのはおすすめです。

よろしければ参考にしてください。

【Webサイトや資料に】「無断転載禁止」のための汎用性の高いコピーライト表記を考えた【著作権】

ワークショップや授業など教える仕事が増えるにつれて、授業で使う資料(書類)を作り込むことも増えてきました。
そこで、それらの資料に掲載できるような、使い回しがしやすいコピーライト表記を考えてみました。

今回考えたのは以下のようなものです。

本書類に掲載の図版および文章について、転載、複製、改変等は禁止させていただきます。
Reproduction is prohibited. 禁止私自转载、加工。
© 2024 Shu Watanabe.

最後の©の後は、掲載する年号、著作者の名前に応じて変えます。

いくつかのサイトを参考にさせていただいて反映したのは以下のポイントです。

  • 「無断」転載禁止。と書くと許可取りの連絡が来たり、断ったから(OKしていなくても)掲載して良いだろうと判断される場合がある
    →「無断」は入れずにシンプルに「転載禁止」としました
  • 日本語圏外の方の為に他の言語でも表記する
    →「転載禁止」を意味する英語と中国語を入れました

実際にはこのような表記をしなくとも、著作権は制作者にあるということですが、より強い意思表示の効果はあると思うので、今後制作する資料には掲載していこうと思います。

このコピーライトの雛形は自由に使っていただいて構いませんので、参考にしてください。

参考にさせていただいたサイト

「無断転載禁止」という注意書きは逆効果なのかも…効果的な文面とは? | ばしでざ
https://bashideza.com/reproduction-prohibited-text/

コピーライトとは?法的な必要性や書き方、意味について解説
https://www.unprinted.design/articles/copyright/

#1 日本語以外の複製、転載禁止文章【9ヵ国語版】 | 日本語以外の注意書き – 祭屋暦@規約改定ゆるく – pixiv
https://www.pixiv.net/novel/show.php?id=7928138

クリエイターの著作権について学べる書籍

著作権トラブル解決のバイブル! クリエイターのための権利の本 改訂版 単行本(ソフトカバー)

著作権トラブル解決のバイブル! クリエイターのための権利の本 改訂版

著作権トラブル解決のバイブル! クリエイターのための権利の本 改訂版

大串肇, 北村崇, 木村剛大, 古賀海人, 齋木弘樹, 角田綾佳, 染谷昌利
3,080円(05/21 09:18時点)
Amazonの情報を掲載しています

ブログを書く気が全く起きない時でも、投稿できる記事の内容を考えた

ブログを書いていると、全く書く気が起きない時があります。

とにかく億劫になる時。

そんな時にあまり頭を使わずに投稿できる記事を見出しました。

それは、、、、

既存の投稿記事の英語版を、別記事として作成し投稿する

ということです。

やり方はシンプル。

既存の記事(私は特にアクセス数が多いものを選んでいます)をコピーして、Google翻訳で翻訳し、英語版の記事として投稿するだけです。

本ブログでも、前々から、人気のあった記事は英語版を作成して投稿していましたが、日本語版とは別でそれなりにアクセスがあります。

例えば、以下のような記事です。

新しい記事がどうしても書けない時はぜひ参考にしてみてください。

【ブログSEO】2023年に書いた記事でアクセス数が多かったブログ記事10選-ブログ運営の参考に

本ブログに2023年に書いて投稿した記事の中でアクセス数が多かった記事をご紹介します。

表示数は記事を書いている2023/12/29 10:22時点での年間表示数です。

1位|突然Gmailにメールが送れなくなった/2022年11月の仕様変更で、SPF認証かDKIM認証の設定が必要に?

表示数:2,275回

2位|【ショック!】オーケーストアでは楽天ペイの支払いでポイントが付かないことを知る!リストには他にもポイントが付かない店舗が

表示数:1,560回

3位|神聖幾何学模様(Sacred Geometry)とは?その概要と代表的な5つの図形についてご紹介します

表示数:1,033回

4位|Apple Watch充電器、純正以外のものを使うと発熱と充電スピードの遅さが危険!

表示数:611回

5位|Google Fontsで人気&定番の10種の欧文フォント

表示数:537回

6位|MacからWindows宛に送ったメールで、添付ファイルが表示されない時の解決方法

表示数:498回

7位|モリサワの気になるフォント「あおとゴシック」/ニュートラルさが特徴の使い勝手が良さそうなゴシック体

表示数:395回

8位|Illustratorで、プロパティの変形パネルに数値入力が出来ない(テンキーが反応しない)場合の対処方法

表示数:387回

9位|MacでUSBメモリの書き込み/読み込みが遅い時に試すこと

表示数:376回

10位|Gill Sansに似たフリーフォントを探しています

表示数:324回

まとめ

上位は多くの方に当てはまるメールトラブル、お金(ポイ活)トラブル系でした。

3位の神聖幾何学はかなり意外でした。

私自身がグラフィックデザイナーということもあり、フォント関係、特にフリーフォントを紹介する記事は強いですね。

引き続き、2024年もだれかの役に立てるようなブログ記事を書いていきたいと思います。

Header: TumisuによるPixabayからの画像

ブログの記事ネタが思いつかないときに|他ブログのトラックバックテーマや記念日サイトのリスト

ブログの記事ネタが出ないときのために、他のブログのトラックバックテーマサイトをブックマークしました。

該当のブログサービスを使っていないので実際にトラックバックはできないかもしれませんが、記事ネタを考えるときに見てみると参考になりそうです。

FC2トラックバックテーマ

https://fc2trackback.blog.fc2.com/?sp

エキサイトブログ、今週のトラックバックテーマ

https://trackback.exblog.jp

一般社団法人 日本記念日協会

https://www.kinenbi.gr.jp/

こちらはトラックバックテーマではありませんが、毎日が何の記念日かを掲載しているサイト。

その日の記念日モノをネタに記事を書くのは良さそうです。

他にも見つかったら追加していきます。

Header: Free PhotosによるPixabayからの画像