Embedded Files
「面白コンテンツ始めました」
「面白コンテンツ始めました」
#創作を楽しむ 2023年11月05日(日)
本日(?)２本目の記事はサイト構築の進捗です
本日(?)２本目の記事はサイト構築の進捗です
柚木原 恭(ゆのきはら きょう)です。本日２本目の記事になります。
本日っつっても見事に日付線越えちゃったけど！ 日曜更新は避けたいっていってるのに～！
……ま、１本既に上げてるからいっか(´-ω-) ここからはボーナスステージですのでね。
さて、２本目のテーマはズバリ「最近サイトに追加した面白コンテンツ」についてです。
面白といってもネタ系ではなく、柚木原にとって大変面白い追加物なので面白コンテンツと称しました。
つまり題名詐欺です、すみません。
で、今回のブログで報告するのは「メモ帳」と「Web拍手ガチャ」の２つです。
前者の「メモ帳」は割と前から動かしているものの再紹介で、後者の「Web拍手ガチャ」は今回の記事が初出になります。
作り方についても簡単に書いてみようと思うので、良かったら流し読みしてってください～！
１，「メモ帳」コンテンツ作りました
１，「メモ帳」コンテンツ作りました
さて、最初はメモ帳についての話です。
柚木原の独り言をぽいぽい投稿する場所、簡単に言えば「独りぼっちTwitter」を作ってみました。
実際に見ていただいた方が早いので、下のボタンから飛んでみてください。
※リンク先は、左側のサイドバーにある「Home」内の「メモ帳」と同じです。
追加した日は10月22日なので、動かし始めて既に２週間くらいは経ってますね。
ただ、認知度は低いかもしれません。
初出は日曜日の夜だったし、メモを投稿しても基本サイレント更新なので。
ということで、どう考えてもこのサイトのメインコンテンツであるブログにて改めて紹介しようと思いました。
今のところ、割と毎日投稿しております。良かったらチラ見してくれると嬉しいです。えへ。
簡単メイキング
簡単メイキング
使っているツールはちょっぴりマイナーかもしれないSNS「Tumblr」です。
Tumblrってつまり「自分のつぶやきを流すためのカスタムWebサイトを作れるSNS」でして、このカスタムサイトを埋め込むことでサイト内独りTwitterを再現しています。
世の個人サイト様はこういうコンテンツを作るときは「てがろぐ」なるCGIを使う方が多いですが、ここは見ての通り自サーバではなくGoogleサイトという柵の中で活動しているので、残念ながら導入は無理です。
とはいえ、てがろぐのために自サーバを契約するのもなって感じだったので、Tumblrを選ぶことにしました。
では、TumblrでWebサイトを作るための備忘録を簡単に書いてみます。
アカウント作成画面から、とりあえずログインし、設定します。
料金はかからないので有難いですね。
柚木原は勿論Googleアカウントで続行しました。連携できるのも神です。
Tumblrはアプリからでも登録できますが、Webサイトをカスタマイズするにはブラウザ版じゃないとダメなんじゃないかな？ 多分。
登録作業が終わったら、早速カスタムサイトの設定をします。
とりあえず、Tumblrブログの設定画面を開き、下の方へスクロールしてみてください。
そしたら「カスタムテーマ」なる項目を見つけられると思うので、ここを有効化。
その後、「テーマの編集」をクリックします。
出てきた画面の左側にある「テーマを見る」から素敵なテンプレートを探して設定すれば、Webサイトの完成です。
あとは、Googleサイトの機能「ページ全体の埋め込み」で、作ったTumblrサイトのアドレスをまんま埋め込めば、サイト内壁打ちを再現できます。
Tumblrはその本質はSNSなので、実はダッシュボード（Twitterでいうとこのタイムラインみたいなやつ）があります。いいねもRTもコメント機能もハッシュタグもあります。
その上で、なんとアカウントを検索避けすることが可能なのです。
Twitterの鍵垢と違うのは「誰でも見られるけど探しても出てこない、特定のURLしか入口を設けない」を再現できる点。
しかも、カスタムページならば、弄ればいいね数やRT数、フォロー数を隠すこともできます。
完全に個人サイト民の需要に特化している。
Tumblrは「入口はカスタムページのURLのみ、引きこもり公開がした～い！」って人にもオススメですし、「SNSの投稿が丸々個人サイトのコンテンツになればいいのに～！」って人にもオススメです。
COMPASSLINK(コンパスリンク)さんで「Tumblr」ってフリーワード検索すればわかる通り、そもそもサイト自体がTumblr製って方も多いイメージです。
あと、TumblrはCGIよりも導入ハードルが低いし（登録してリンク貼るだけ）、スマホから投稿できるのもポイントです！
Tumblrで個人サイト内の独りTwitterをやる人が増えてくれると嬉しいなぁ～。そういうの見るの好きなので……。
因みに、柚木原がお借りしているテーマはこちらです。
HTMLをかなりカスタマイズさせてもらっています。ありがとうございます。
２，GoogleフォームでWeb拍手ガチャを作ってみました
２，GoogleフォームでWeb拍手ガチャを作ってみました
二つ目は表題の通り、Googleフォーム製のWeb拍手ガチャの制作に成功した話です！
まだ仮完成状態ではありますが、挙動は上手くいったので早速置いてみます。
「え、何この謎スペース……」
って感じですが、ネタバレしますとななトワの誰かがランダムで出てくるためのスペースです。
そう、これはWeb拍手型のガチャです。押していただければ分かります！(笑) 因みに全７種です。
絵が古すぎてキャラデザが違うのですが、旧絵で出てくるレア拍手っていうのもまた一興かもですね。
因みに、見た目は変貌していますがこう見えてGoogleフォーム制なので、押された方はこちらでは把握できないです。安心してください。
何なら通知も届かない設定にしているので、連打も大丈夫です。
あと、Googleフォームの選択肢とキャラガチャを連携させたので、上記のように誰をどれくらい当てて貰っているかかが分かりますｗ 試運転で217回押しちゃったｗｗｗ
何でこんな謎性能を備えたかというと、「今月のキャラガチャトップはコイツでした！ おめでと！(笑)」っていうプチイベントが出来たら楽しいなって思ったからですｗｗｗ
なんていうか……人気投票よりも平等で良くないですか？(笑)
簡単メイキング
簡単メイキング
コレは何か専用ツールがあるものではなく、普通にHTMLとJavaScriptで書いています。カスタムコードを置ける環境で試してみてください。
あと、先に参考文献を掲載しておきます。本当にありがとうございます！
さて、最初の手順です。とりあえずGoogleフォームを作ります。
フォームの作り方は……簡単なので説明はいらないですよね。
作る質問項目は「ガチャとして出したい絵と同じ数のラジオボタン」だけで取り敢えず十分です。
例として、太郎・次郎・三郎という３人の絵のガチャを想定する場合、上のスクショのようなフォームにすればOKってことです。
項目名は分かりやすい方が良いと思います。キャラガチャにしたい場合はキャラ名にするとか。
何故ならガチャの内訳が見やすくなるので。
あと、回答必須・ログイン必須にはしない方が良いと思います、多分。
変な挙動になる原因になりかねないので、とにかく押せば送れる状態にするべきかと。
フォームを作れたら、次は以下のサイトを参考にHTMLとGoogleフォームを繋げます。
それには、とりあえずGoogleフォームの繋げ方を理解して頂かないとならないので……。
えーと、先人の知恵に感謝しつつ、上の記事を頑張って読んでください！！
私の適当な説明よりも上記の方々の説明のが分かりやすいと思うんで……へへ……。
特に、☆をつけた「い様」のnote記事を全て読めば大体分かると思います。
まぁ簡潔に書けば、Googleフォーム内のソースコードから「form要素のaction属性」と「input要素のname属性」を探して、HTMLで作ったフォームにそのままコピペすればよし、ってことです。
……理解できましたか？
そしたらば、Googleフォーム内のソースコードから探してきた「form要素のaction属性」と「input要素のname属性」、そして「表示したい画像のURL」を以下のコードの中に当てはめてみてください！
【HTML】
<!-- GoogleFormの終了画面に飛ばさないためのiframe -->
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;"></iframe>
<body>
<form name="myform" action="https://docs.google.com/forms/u/1/d/e/＊＊＊＊＊/formResponse" target="hidden_iframe" onsubmit="submitted=true;">
<div class="table">
<!-- 拍手選択肢用のラジオボタン -->
<div class="form-check">
<p>
<input name="entry.＊＊＊＊" type="radio" value="太郎">太郎
<input name="entry.＊＊＊＊" type="radio" value="次郎">次郎
<input name="entry.＊＊＊＊" type="radio" value="三郎">三郎
</p>
</div>
<!-- 拍手を送るボタン -->
<button type="button" class="clap-btn" onclick="formSwitch();" id="clapbtn">web拍手</button>
</form>
<!-- キャラクター画像表示 -->
<p>
<img id="clap-taro" class="clapimg" name="imag" src="https://＊＊＊＊＊.img" style="display: none;">
<img id="clap-jiro" class="clapimg" name="imag" src="https://＊＊＊＊＊.img" style="display: none;">
<img id="clap-saburo" class="clapimg" name="imag" src="https://＊＊＊＊＊.img" style="display: none;">
</p>
</div>
【Javascript】
<script type="text/javascript">
// ページが読み込まれたらランダムにボタンを選択
document.addEventListener("DOMContentLoaded", function () {
var radioButtons = document.querySelectorAll('input[type="radio"]');
var randomIndex = Math.floor(Math.random() * radioButtons.length);
radioButtons[randomIndex].checked = true;
});
// 拍手ボタンがクリックされたときにラジオボタンに対応した画像を表示
function formSwitch() {
document.getElementById('clapbtn').className = "clap-timeout"; // 拍手ボタンを無効にするCSSを適用
document.getElementById('clap-taro').className = "clapimg"; // フェードインアニメーションの適用
document.getElementById('clap-jiro').className = "clapimg";
document.getElementById('clap-saburo').className = "clapimg";
hoge = document.getElementsByName('entry.＊＊＊＊')
if (hoge[0].checked) {
document.getElementById('clap-taro').style.display = "";
document.getElementById('clap-jiro').style.display = "none";
document.getElementById('clap-saburo').style.display = "none";
} else if (hoge[1].checked) {
document.getElementById('clap-taro').style.display = "none";
document.getElementById('clap-jiro').style.display = "";
document.getElementById('clap-saburo').style.display = "none";
} else if (hoge[2].checked) {
document.getElementById('clap-taro').style.display = "none";
document.getElementById('clap-jiro').style.display = "none";
document.getElementById('clap-saburo').style.display = "";
} else {
document.getElementById('clap-taro').style.display = "none";
document.getElementById('clap-jiro').style.display = "none";
document.getElementById('clap-saburo').style.display = "none";
}
//フォームを送信
document.myform.submit();
//再びラジオボタンをランダムで選択
var radioButtons = document.querySelectorAll('input[type="radio"]');
var randomIndex = Math.floor(Math.random() * radioButtons.length);
radioButtons[randomIndex].checked = true;
// 2.5秒後にfadeout()を実行（フェードアウトアニメーション）
setTimeout(fadeout, 2500);
}
// フェードアウトアニメーションのCSSを適用
function fadeout(){
document.getElementById('clap-taro').className = "fadeout"; // フェードアウトアニメーションの適用
document.getElementById('clap-jiro').className = "fadeout";
document.getElementById('clap-saburo').className = "fadeout";
// 1秒後にresetbtn()を実行（ボタンを復活させる）
setTimeout(resetbtn, 1000);
}
function resetbtn(){
document.getElementById('clapbtn').className = "clap-btn"; // 拍手ボタンを有効にするCSSに戻す
}
// Googleフォームページに飛ばさないための処理
var submitted = false;
var currentURL = window.location.href;
</script>
【CSS】
<style>
/* 全体を真ん中揃えにする */
.table {
text-align: center;
margin: 0em;
}
/* ラジオボタンは見えなくしておく */
.form-check {
display: none;
}
/* 拍手ボタン…デフォルト */
.clap-btn {
padding: 0.5em 0.6em;
font-size: 13px;
color: #8d76e0;
border: 1px solid #8d76e0;
background-color: #ffffff;
border-radius: 10px;
transition: background-color 0.3s;
}
/* 拍手ボタン…ホバー */
.clap-btn:hover {
color: #ffffff;
background-color: #8d76e0;
}
/* 拍手ボタン…クリック */
.clap-btn:active {
transform: translateY(2px);
background-color: #ed789d;
border: 1px solid #ed789d;
}
/* 画像表示中は無効にしておく */
.clap-timeout {
padding: 0.5em 0.6em;
font-size: 13px;
color: #ffffff;
border: 1px solid #ed789d;
background-color: #ed789d;
border-radius: 10px;
transition: background-color 0.3s;
pointer-events: none;
}
/* 画像を出すアニメCSS */
.clapimg {
width: 150px;
height: 246px;
animation: zoomIn 0.8s;
}
/* 画像を消すCSS */
.fadeout {
width: 150px;
height: 246px;
animation: fadeout-keyframes 0.8s linear forwards; /* フェードアウト用のアニメーション */
}
/* 画像が飛び出すアニメーション */
@keyframes zoomIn {
0% { transform: scale(0); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
/* 画像をフェードアウトするアニメーション */
@keyframes fadeout-keyframes {
0% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(20px);
display: none;}
}
</style>
……以上です！！ 素人なりに頑張って書いたの！！ 褒めて！！！！
（ただ、マジで素人のコードなので、何か不具合が起きても何も保証できないです。ごめんね）
コードの解説はできなくないけど、とりあえず今回は「適時コピペすればすぐに動かせるよ☆」仕様で一旦止めさせてください。これ以上は長くなりすぎるので。
もしも「解説欲しいよ～コレを元にいじくりまわしたいのに理解できないんだもん～」って要望があったとしたら、その時は頑張って解説しますね(・ω・)ノ
……ただ、上述の参考文献様３本を理解できた上、このコードを設置できるだけの能力があるのならば、絶対解説なんて要らないよね？
というか個人サイト運営できる時点でこれくらいみんな書けるのではなかろうか。
おしまい！
おしまい！
長くなっちゃったけど、今回の記事はこの辺で終了です。
拙者、さすらいの個人サイト巡り大好き侍と申すので（何？？）、こういう個人サイトを充実させるための備忘録みたいなのも少しずつ書き溜められたいな～って考えてます。
というのも、今回作った独りTwitterやキャラガチャって、そもそも私自身が見るのが好きなんです。
なので、この記事を参考にして導入を検討してくれる個人サイト主様が増えたらいいな～っていう思いでメイキングを書いてみたわけです。
ま、こんな辺境に辿り着く方ってそういないとは思いますがね(笑)
あとは、このweb拍手ガチャを堂々とトップ画面に設置できるように、さっさと新規ミニキャラを描かないとならんですね！！ 描かなきゃいけないものが多くて困る～～！！（楽しい）
では、次回の更新は……多分来週の土曜日、11月11日です！
また来週もお会いできると嬉しいです♪ ここまでお読みいただきありがとうございました！
Page updated
Google Sites
Report abuse