自分が作成したプログラムをブログ上で動作させたい！
プログラミングとブログをやっている方は一度は考えると思います。
私自身、同じことを考えて、実際にブログに以下のようなプログラムを載せました。
これはリベラルアーツ大学というYoutube動画で掲載していたクイズをプログラム化してブログに載せたものです。
この記事ではブログに簡単なプログラムを載せる手順を、実践方式で解説します。
チェックポイント
・JavaScriptのプログラムをブログに載せたい
・ブログのテーマはcocoonを使用している
・ブログに自作プログラムを載せたことがない初心者の方
上記に当てはまる方にはお勧めの内容となります。
この記事を読むことで、以下のボタンクリックプログラムをブログに掲載できます。
プログラミング言語とブログのテーマ
まず初めに、ブログに載せる自作プログラムのプログラミング言語はJavaScriptを使用しています。
JavaScriptはWebアプリ開発で多くの方が学習する言語のため、Webで公開するプログラムを自作したい方は、まずJavaScriptから学習しましょう！
次に、ブログのテーマについてです。
私は【cocoon】という無料のテーマを使用しています。
2021年9月から【SWELL】にテーマを移行しました。
そのため、私の紹介する内容は【cocoon】のテンプレートを利用したものであり、他のテーマを使用している場合は、やり方が異なる可能性があります。
※【SWELL】では、「カスタムHTML」に直接JavaScriptを書き込む形に変更しています。
簡単なプログラムの作成
それでは実際に、簡単なボタンクリックのプログラムを作成していきましょう！
まずは、いきなりブログにプログラムを載せる前に、正常に動作するか確認が必要です。
プログラミングをするために、エディタを用いて、HTMLファイルとCSSファイルを作成します。
私は「Visual Studio Code」というエディタを使用していますが、エディタが良く分からないという方はメモ帳でも問題ありません。
HTMLファイルの作成
はじめに、HTMLファイルを作成していきます。
エディタまたはメモ帳に以下のコードを記載してください。
以下のコードをコピーして、エディタまたはメモ帳に張り付けてもOKです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stylesheet.css">
<title>Document</title>
</head>
<body>
<input type="button" id="greet" value="Hello!" onclick="greeting()">
</body>
<script>
let text = document.getElementById("greet").value;
function greeting() {
if (text === "Hello!") {
document.getElementById("greet").value = "Good Bye!";
text = document.getElementById("greet").value;
} else {
document.getElementById("greet").value = "Hello!";
text = document.getElementById("greet").value;
};
};
</script>
</html>注意点として、ファイルを保存するときに、ファイルの種類をすべてのファイルにして、「index.html」という名前で保存してください。
保存が完了したら、作成した「index.html」ファイルをブラウザで開いてみてください。
上のようなボタンが表示されたと思います。
ボタンをクリックすると、Hello!からGood Bye!に表示が変わり、再びクリックすると元に戻ります。
これで簡単なボタンクリックのプログラムの作成は完了です。
ただ、このボタンだと味気ないですよね…。
ボタンのデザインをもっと良くしたい！
そういう時は、CSSファイルを活用して、ボタンのレイアウトを変更します。
CSSファイルの作成
CSSファイルを作成していきます。
エディタまたはメモ帳に以下のコードを記載してください。
以下のコードをコピーして、エディタまたはメモ帳に張り付けてもOKです。
#greet {
width: auto;
height: 50px;
padding: 10px 20px;
border: 2px solid black;
background-color: #33AAFF;
color: white;
font-weight: bold;
}注意点として、ファイルを保存するときに、ファイルの種類をすべてのファイルにして、「stylesheet.css」という名前で保存してください。
また、ファイルの保存場所は「index.html」と同じフォルダ内に保存してください。
「stylesheet.css」という名前については、上記の「index.html」ファイルで以下の記載をしています。
<link rel="stylesheet" href="stylesheet.css">これは簡単にいえば、「index.html」ファイルのレイアウトは「stylesheet.css」の内容を参照しますという意味になります。
そのため、異なる名前で作成すると反映されなくなります。
「stylesheet.css」ファイルを保存したら、もう一度「index.html」ファイルをブラウザで開いてみてください。
冒頭で紹介したボタンが作成できたと思います。
これでプログラムの作成は終了です。
次は作成したプログラムをブログに載せていきましょう！
ブログにプログラムを載せる手順
ここでは、ブログのテーマが【cocoon】であることを前提に、プログラムを載せる手順を紹介します。
まず、「投稿」⇒「新規追加」で記事作成ページに移行しましょう。
2021年3月時点の【cocoon】の様式では、記事作成ページの一番下側に次の3つが表示されています。
- SEO
- カスタムCSS
- カスタムJavaScript
今回編集するのは、「カスタムCSS」と「カスタムJavaScript」の２つです。
カスタムCSSの編集
カスタムCSS内の記入欄に次のコードを記入してください。
#greet {
width: auto;
height: 50px;
padding: 10px 20px;
border: 2px solid black;
background-color: #33AAFF;
color: white;
font-weight: bold;
}内容を見れば気付くかと思いますが、「stylesheet.css」の内容を丸ごとコピーしています。
慣れた方であれば、CSSの内容を編集して、レイアウトを変えてみても良いかもしれません。
※【SWELL】のブログテーマでも、この方法で動作します。
カスタムJavaScriptの編集
次に、カスタムJavaScript内の記入欄に次のコードを記入してください。
let text = document.getElementById("greet").value;
function greeting() {
if (text === "Hello!") {
document.getElementById("greet").value = "Good Bye!";
text = document.getElementById("greet").value;
} else {
document.getElementById("greet").value = "Hello!";
text = document.getElementById("greet").value;
};
};このコードは、「index.html」の<script> </script>で囲まれた部分の内容をコピーしています。
この部分がJavaScriptでの記述になります。
今回作成した「index.html」ファイルは、HTMLファイル内にJavaScriptも記載した形になります。
※【SWELL】のブログテーマでは、この方法ではエラーが発生したため、この記事のボタンは「カスタムHTML」内に直接<script>タグを挿入しています。
記事作成ページの編集
上記の作業で、CSSとJavaScriptの設定は完了しました。
しかし、肝心のHTMLの内容を記事内に記載していないため、このままではボタンが表示されません。
そのため、最後に記事内にHTMLを挿入します。
【cocoon】では記事内に挿入するブロックの種類で、「カスタムHTML」があります。
「カスタムHTML」のブロックを記事内に挿入し、その中に次のコードを記載します。
<input type="button" id="greet" value="Hello!" onclick="greeting()">これで全ての作業が完了です。
最後に記事をプレビューで確認して、正常にボタンクリックのプログラムが動作するか確認してみましょう。
コメント