POTTIRI'S AUTOBIOGRAPHY

ダイエットやITで遊ぶアラフォーエンジニアの自伝ブログです。

タイマー爆弾を実装し、全体の見直し

f:id:pottiri:20201122093244j:plain

お疲れさまです。POTTIRIです。
今日は連休の2日目です。
休みということで優雅な朝食をいただいています。

昨晩頑張って爆弾パズルを改造&見直し。
昨日を持って当初考えていたギミックが一応揃いました。

タイマー爆弾の実装と全体の見直し

自作の爆弾パズルゲーム。
昨晩タイマー爆弾を実装してみました。
黄色い爆弾がそれです。
爆風が当たっても即座に爆発せず、一秒後に爆発します。
これにより「爆破する順番」という概念が生まれたはずです。
1つ目の爆破でブロックを破壊、通り道を作って2つ目を爆破・・・のような。

 

他の面はこちらにあるので、万が一興味を持たれたらサイトを訪れてください。

blast.pottiri.tech

全体の見直しとそれを可能にする作り

昨日と一昨日でタイマー爆弾の実装と共に、
プログラム全体の見直しをしています。
見直す前は敵やらタイマー爆弾やらが動く時それぞれ別の時間軸で動いており、
プログラムが読みづらくなっていました。
このままでは今後改造しづらくなると考え整理しています。
パット見はぜーんぜん変わっていませんが、
時間軸を一本にしたことで中身は少し綺麗になったと思います。

全体の見直しができるのって自分にある程度の力がある証拠だとうぬぼれてみたり。

新人の頃必死になって書いたプログラムはなんで動いてるのかさっぱりわからなくて、
直そうにも手が出せないものがあります😅

見直しがかけれるのはでっかくて複雑なプログラムじゃなくて、
シンプルで小さなプログラムの集合体であるから。

一箇所直したら全体が崩れるような作りだと手が出せないですよね。
とか言って今回バグが大量に混入してたらごめんなさい。

次は画像まわりを整理しようと思ってます。
実は今敵や爆弾が動く時、背景もろとも再描画かかっていてちらついてるのが気になっています。
日々精進です。  

Netlifyのフリープランの上弦を超えました

自作の爆弾パズルはNetlifyで動かしているのですが、
11月にいじりまくったのでこの度フリープランの上限を超えました😓
プランを変えたら?というメールがやたら飛んできまス。
けどクレジットカードの登録だけしてフリープランのままほっといたほうがお得っぽいですね。
プランをあげるより自動で走る上弦の拡張の方がまだ安いです。

www.netlify.com
AWSにもNetlifyに似た機能ができたみたいだから乗り換えようかな・・・。

aws.amazon.com

アフィリエイト

 

見ればわかるものはあんまり資料に残すべきじゃない

f:id:pottiri:20201118231734j:plain

お疲れさまです。POTTIRIです。
今現在とあるシステムの移植をやらせてもらっているのですが・・・
中途半端な資料に困惑させられています。

中途半端な資料に困惑させられてます

移植元のプログラムを眺めてると、
中途半端なコメントに困惑させられることがちょいちょいあります。

// ○○と✗✗でデータを集約する

???どう見てもそんなプログラムになってないが?
あーーー、これ開発当初はそういう動きだったけど、
改修の際にコメントを直し忘れたのか・・・。
無駄に考える時間を過ごしたな・・・。

プログラムを直す時って、時間がなかったり、
例えコメントでも該当部分以外は直したくないという心理によりコメントの修正が漏れるんですよね。
よくわかります。
ていうかそもそもプログラムや動きをさっと見れば分かるものをわざわざコメントにするのってどうなんでしょうね?
メンテナンスしきれないコメントや資料を残すのには疑問を感じます。
分かる人は現物を見れば全てわかります。
少々過激なことを言うと、プログラムに限っては現物を見ても理解できない人は関わるべきじゃないと思うんですよね。

もし残すならば「そうなった経緯」の方を残して欲しいし、残したい。
今現在、経緯が残ってないので仕様の意味を調べるのに時間を取られてるから。

自作の爆弾パズルゲーム、今日のステージ

自作の爆弾パズルゲームです。
秒で解けるパズルゲームというのがテーマ。
今日の成果は敵だけじゃなくて誘爆用の爆弾も動かすこと。
こんなステージに仕上げてみました。


爆弾まで動かしたことでタイミングが今まで一番シビアになってしまいました😅

このパズルゲームを思いついた時、
仕込みたかったギミックがあと2つあります。
それを作り切ったら一度プログラムを整理したいですね。
3連休は整理の時間に当てたい。
それまでにあと2つのギミックを実装できるかな?

他の面はこちらにあるので、万が一興味を持たれたらサイトを訪れてください。

blast.pottiri.tech

アフィリエイト

 

復職してその後、取り戻そうという気が起きない

f:id:pottiri:20201118092258j:plain

お疲れさまです。POTTIRIです。
今日はネガティブな話なのでご注意ください。

気づけば11月の下旬。
早いですね・・・。
去年の今頃はちょうど鬱で精神科で入院した頃です。

pottiri.tech

pottiri.tech
現在の状態までよく回復したなあと思うと同時に、
やる気は衰えたままの生活を送っています。

取り残されて、諦める

復職してから強く感じたこと、
それは「取り残された感」です。
休んでる間、うちの会社では大きな変革がありました。
このタイミングで人事の大きな動きがあり、
その間休んでいた僕は思いっきり取り残された形です。
ライバルだと思っていた人ははるか向こうに行ってしまい、年下にも追い抜かれる始末。
そこで奮起できればよかったのですが、
弱っている私は「諦める」方向に気持ちが傾いています。
未だやる気は復活していません。

いや・・・それでいいのかもしれません。
何度も体調を崩した私はもう要注意人物です。
仕事はそこそこにして、他の生き方を用意しなければならないのでしょう。

今日のステージ

今日はこちらです。

横移動する敵も作りました。
今日のステージの爆弾の置く場所はずばり真ん中なのですが、
びみょーにタイミングがシビアになってます。
よーくタイミングを測ってみてください。

他の面はこちらにあるので、万が一興味を持たれたらサイトを訪れてください。

blast.pottiri.tech

敵の動きを滑らかにしたいけれど

実は敵の動きを滑らかにしたいなあと思って、
昨日試行錯誤したのですがどーしてもカクついたり爆弾判定がおかしくなりますね。
CSSだけで実現するのはちょっと無理かも。
でも、アニメーションのライブラリを導入するのはまだ早い気がする。
むー・・・
プログラムもごちゃついてきました。
連休はプログラムを整理(リファクタリング)したいと思います。

アフィリエイト

ツレがうつになりまして。 (幻冬舎文庫)

ツレがうつになりまして。 (幻冬舎文庫)

  • 作者:細川 貂々
  • 発売日: 2009/04/01
  • メディア: 文庫
 

 

年齢と共に理想は変わっちゃった

お疲れさまです。POTTIRIです。
毎日毎日プログラムを書いてますが、
自分の理想とするプログラムが年齢と共に変わってくのを感じます。
今日はそんな話です。

今日のステージ

今日はこちらです。

昨日作ったステージを嫁に見せたところ、
もっともーーーーっとシンプルな面いいということなので、
こんな感じにしてみました。
こ・これでいいのかなあ?
(ていうか爆風が重なりすぎて処理オチしてる・・・)
長男にやらせてみよう。
どんな反応するかな?

他の面はこちらにあるので、万が一興味を持たれたらサイトを訪れてください。

blast.pottiri.tech

格子模様つけてみました

今までステージのマス目が真っ白だったので、
ちょーっと寂しいかなーっていうことで格子模様にしてみました。

爆弾パズルはマス目を一定にしていないので、
模様の有無はプログラムで自動生成しています。
普通こういうのは奇数・偶数で判定して模様をつけたり外したりするのですが、
マス目が一定でないってことはちょっと一工夫が必要です。

f:id:pottiri:20201116221558j:plain

f:id:pottiri:20201116221603j:plain

模様をつけるかどうかの判定をしてるプログラム(Vue.js)はこんな感じ。

const idx = parseInt(x) + ((parseInt(y) - 1) * this.data.size)
if (this.data.size % 2 === 1) {
  // マス目のサイズが奇数の場合
  if ((idx % 2) === 1) array.push('box-pattern2')
} else {
  // マス目のサイズが偶数の場合
  if (y % 2 === 1) {
    // 奇数行
    if ((idx % 2) === 1) array.push('box-pattern2')
  } else {
    // 偶数行
    if ((idx % 2) === 0) array.push('box-pattern2')
  }
}   

割と愚直に書いてます。
もうちょっと洗練した書き方あるだろうと思わなくもないですが、
そういう気持ちを抑えてそのまんまな書き方をしてます。
あれですね、年齢と共に理想とするものは変わりますよね。

20代の頃の理想

凄いプログラムを書きたい!スタイリッシュに書きたい!
この程度のロジックなら一行に収めてやるぜ!

30代の頃の理想 

変更の度に関連するところを一応テストするのはうんざりだ!
テストを自動化させよう!
そのためにはある程度シンプルにしないと!

現在の理想

どうせ自動テスト書いても手動テストは絶対必要だ。
自分が作ったものを自分でテスト・メンテできるとも限らん。
ていうかやってくれ。
だから誰が見てもわかりやすいのが一番だ。
新人が見てもわかるレベルぐらいに落とし込まないと。

これを熟成したと見るか、枯れてしまった見るべきか・・・🤔

アフィリエイト

 

作ったゲームはブログに埋め込む

f:id:pottiri:20201116003043j:plain

お疲れさまです。POTTIRIです。
ダイエットですが、体重が一向に減りません。
3ヶ月ぐらい停滞してるんじゃないかなー。
まあでも、身体の方が引き締まってきてるのでいいのかな。

さて、僕が作った爆弾パズルですが、
ブログなどに埋め込めるように作ってます。
今日はその話をします。

今日のステージ

今日はこちらです。

敵を動かせるようになったのをいいことに、
タイミングを測らないとクリアできない面を作りました。
最初は???と思うかもしれませんが、敵が一直線に並ぶ瞬間がある!
というつもりで作ったのですがいかがでしょう。

他の面はこちらにあるので、万が一興味を持たれたらサイトを訪れてください。

blast.pottiri.tech

爆弾パズルははてなブログに埋め込めます

僕が作った爆弾パズルははてなブログに埋め込めるようになっています。
上記の

http://blast.pottiri.tech/

も、実は爆弾パズル本体の入れ物でしかなく、
サイトの記事内に爆弾パズルをiframeで埋め込んでいます。

なんでこんな作りにしているかというと・・・、

(いい意味での)技術不足です。

何かを組み合わせることしかできない

僕はデザインの知識がないので、
出来合いのものを引っ付けはっつけすることしかできません。
そのやり方で言うとゲームとWEBサイトを一体化させたものを作ることはできなかったんですね。
両方満たそうとするとゲームかサイトかどちらかが崩れてしまう。
なので、別々に作って埋め込むというやり方をした次第です。

まあ、結果としてブログに埋め込むこともできるようになったし、
SNSにも共有しやすくなったので結果的にはオーライではあります。
プログラマー的にはいまいちだけど。
システムエンジニア的には省エネでいいんじゃないかと自分を慰めています。

外側のサイトをゼロから用意したのはセキュリティの問題

パズルゲームははてなブログに埋め込むことができるのだから、
わざわざ外側のサイトをゼロから作る必要はないのでは?とちょっと思いましたが、
はてなブログにもいつまで埋め込めるかはよくわからないところがあります。
(実際アメブロには爆弾パズルを埋め込むことはできません。)

というのも「埋め込む(iframe)」というのはセキュリティ的にちょっと危険を孕んでいます。
悪用すれば詐欺サイトを埋め込み、それを隠すことでこっそり詐欺サイトをクリックさせることができてしまいます。
※クリックジャッキングと言います。

www.ipa.go.jp

なので、いつ埋め込めなくなるかわかんないから自分でゼロからサイトを作っておいた次第です。
まあ、すぐにはそうならないでしょうから考えすぎかもしれません。

 

アフィリエイト

はてなブログ Perfect GuideBook [改訂第2版]

はてなブログ Perfect GuideBook [改訂第2版]

  • 作者:JOE AOTO
  • 発売日: 2020/07/18
  • メディア: 単行本
 

 

爆弾パズルゲームにタイミングとアニメーションを追加

f:id:pottiri:20201115013426j:plain

お疲れさまです。POTTIRIです。
寒くなってきたので我が家も鍋が増えてきました。
今日はおでんです。
以前関東に住んでた頃、スーパーに牛すじが売ってなくて困ったのですが、
おでんに牛すじ入れるのって西の方だけなんです?

さて、本日やっとこさ爆弾パズルゲームで敵を動かすことができるようになりました。

今日のステージ

今日はこちらです。

敵が動くようになりました。
敵の動きを予測してちょうどいいタイミングで爆弾をおいてください😉
現状縦の動きしか実現できていませんが、横や斜めの動きも作っていきたい。
思い描いているのは、

  • 一瞬考えて
  • 一瞬タイミングを測る

そんな小さい小さいパズルを日々のスキマ時間にあわよくばやってもらうゲーム。
ちょっとずつ理想に近づけていきたいです。

あと、爆弾を置いた時に動きをつけたりしています。
これにより爆弾を置くのに一秒かかるようになりました。

爆弾を置いてから爆発まで3秒あり、
この間も敵は動くので4秒後の敵の位置を予測して爆弾を置かないといけないようになりました。
・・・4秒って微妙ですかね・・・?🤔
4秒ってあまり聞き慣れない数字ですよね。
トータル3秒の方が直感的かな・・・?
しばらく様子見です。

他の面はこちらにあるので、万が一興味を持たれたらサイトを訪れてください。

blast.pottiri.tech

技術的な話

今回、爆風に自分なりのアニメーションを入れるようにしてみました。

このアニメーションはCSSの機能で実現しています。

<img src="/static/bomb/explosion-bomb.svg" class="explosion-bomb" />
<img src="/static/bomb/fire.svg" class="blast" style="--animation-second: 0.5s; --translate-x: -112px; --translate-y: 0px; --rotate: 90deg;" />
<img src="/static/bomb/fire.svg" class="blast" style="--animation-second: 0.6s; --translate-x: -112px; --translate-y: 0px; --rotate: 90deg;" />
<img src="/static/bomb/fire.svg" class="blast" style="--animation-second: 0.7s; --translate-x: -112px; --translate-y: 0px; --rotate: 90deg;" />
<img src="/static/bomb/fire.svg" class="blast" style="--animation-second: 0.8s; --translate-x: -112px; --translate-y: 0px; --rotate: 90deg;" />
<img src="/static/bomb/fire.svg" class="blast" style="--animation-second: 0.9s; --translate-x: -112px; --translate-y: 0px; --rotate: 90deg;" />
<img src="/static/bomb/fire.svg" class="blast" style="--animation-second: 1s; --translate-x: -112px; --translate-y: 0px; --rotate: 90deg;" />
.explosion-bomb {
  width: 1.75rem !important;
  height: 1.75rem !important;
  position: absolute;
  z-index: 100;
  animation: explosion-bomb-animation 0.5s forwards;
}
@keyframes explosion-bomb-animation {
  0% {transform: scale(0, 0);}
  90% {transform: scale(2.0, 2.0);}
  100% {transform: scale(0, 0);}
}
.blast {
  width: 1.75rem !important;
  height: 1.75rem !important;
  position: absolute;
  z-index: 100;
  animation-timing-function: linear;
  animation: blast-animation var(--animation-second) forwards;
}
@keyframes blast-animation {
  0% {
    transform: translateX(0px) translateY(0px) rotate(var(--rotate));
    -webkit-transform: translateX(0px) translateY(0px) rotate(var(--rotate));
  }
  90% {
    transform: translateX(var(--translate-x)) translateY(var(--translate-y)) rotate(var(--rotate));
    -webkit-transform: translateX(var(--translate-x)) translateY(var(--translate-y)) rotate(var(--rotate));
  }
  100% {
    transform: translateX(var(--translate-x)) translateY(var(--translate-y)) rotate(var(--rotate)) scale(0, 0);
    -webkit-transform: translateX(var(--translate-x)) translateY(var(--translate-y)) rotate(var(--rotate)) scale(0, 0);
  }
}

爆弾を置いた場所に爆発アニメーションを発生させます。
爆発アニメーションは、
CSSのtransform: scaleを利用します。
.explosion-bombexplosion-bomb-animationの定義内で使っています。
transform: scaleは1が標準です。
0%が最初で、100%が最後。
これを0.5sで一回だけ動かすというのが、
animation: explosion-bomb-animation 0.5s forwards;
という記述です。
forwardsというのが一回だけを意味します。
繰り返すならinifiniteですね。
最初はscaleをゼロにして、一瞬2倍にしてまたゼロにすることで一瞬拡大させてます。
爆発っぽい・・・ですよね。なってない?😅

爆風の方は.blastblast-animationです。
blast-animationtransform: rotateで炎の向きを決めます。
実は炎のが画像は1種類しか用意ししておらず、これをば爆風の向きに合わせて回転させています。
そしてtransform:translateXtransform:translateYで炎を移動させています。
とはいえ炎の向きは8種類あるし、炎の移動パターンは無数にあるので、
これらを事前に用意することはやってられません。
なので炎の移動距離は回転の角度はJavaScriptで計算し、HTMLタグ内のstyle要素で変数として渡すようにしています。
これでいくらでもパターンが作れます。
このCSS定義を0.25sぐらいで実行することで炎が飛んでるように見せています。

が!これだと火の玉がポーンと飛んでくだけで、爆風っぽくありません。
なので、
複数の炎をちょっとずつスピードを変えながら連続で飛ばしてみました。
今の所これで爆風!ということで自分を納得させています(笑)

ところで、この炎を連続で飛ばすという処理ですが、
Vue.jsで実現するにあたり配列にCSS定義をぶち込むことでそれがなせるようになっているのですが、今の所そこの処理がこんなことになってます。

      let $vm = this
      $vm.blasts[skey].push({
        '--animation-second': '0.5s',
        '--translate-x': diffX + 'px',
        '--translate-y': diffY + 'px',
        '--rotate': ROTATE[axis].rotate
      })
      $vm.blasts[skey].push({
        '--animation-second': '0.6s',
        '--translate-x': diffX + 'px',
        '--translate-y': diffY + 'px',
        '--rotate': ROTATE[axis].rotate
      })
      $vm.blasts[skey].push({
        '--animation-second': '0.7s',
        '--translate-x': diffX + 'px',
        '--translate-y': diffY + 'px',
        '--rotate': ROTATE[axis].rotate
      })
      ・
      ・
      ・

そう、なぜかベタ書きです。
6回ぐらいぶち込んでるんだからループ使えよ!と自分でも思うのですが、
ループにすると何故か炎の間隔がすっごい空いて爆風っぽくなくなるのです。

まったくわかりません。
原理的には一緒のはずなんだけど。

突き止められたらご報告します。
不思議だ・・・。

アフィリエイト

これからはじめるVue.js実践入門

これからはじめるVue.js実践入門

  • 作者:山田 祥寛
  • 発売日: 2019/08/22
  • メディア: Kindle版
 

爆弾パズル英語化作戦②

f:id:pottiri:20201111233255j:plain

お疲れさまです。POTTIRIです。
明日(2020/10/14)はポケモンセンターヒロシマでジムチャレンジがあります。
小学生同士でポケモンバトルが出来るそうなので息子をつれていく予定です。
負ける姿は見たくないので、行く前に少し育成に関して入れ知恵をします。
エースバーンにとくせいカプセルを使わせておこう。

voice.pokemon.co.jpさて今日は前回に引き続き自作の爆弾パズルゲームの英語化のお話です。

今日のステージ

今日はこちらです。

今日の面は本当に試作品なのでゲームになってないです(汗)
新たにウィルスっぽいのを作って、「敵」として配置してみました。
「敵」はブロックと違い爆風が止まらないようにしています。
「敵」はまだ動かないので役物として機能していません。
前後左右に動かしてタイミングを見て爆弾をおかないとクリアできないようにしたいですね。
そうしたら子供がもっと喜んでくれるかも。
何気に爆風もアニメーションに変えようと試行錯誤中。

他の面はこちらにあるので、万が一興味を持たれたらサイトを訪れてください。

blast.pottiri.tech

英語版記事について

さて、前回書いたように爆弾パズルのサイトは多言語化しています。
サイトのタイトルは、Hugoの設定ファイル(config.toml)で、
言語ごとに指定しています。

defaultContentLanguage = "ja"
[languages]
[languages.ja]
baseURL = "https://blast.pottiri.tech"
title = "Cross×Blast"
[languages.ja.params]
author = "POTTIRI"
description = "秒で解ける爆弾パズルゲーム"
headerTitle = "Cross×Blast"
headerBottomText = "秒で解ける爆弾パズルゲーム"
[languages.en]
baseURL = "https://blast-en.pottiri.tech"
title = "Cross×Blast"
[languages.en.params]
author = "POTTIRI"
description = "Bomb puzzle that can be solved in an instant"
headerTitle = "Cross×Blast"
headerBottomText = "Bomb puzzle that can be solved in an instant"

https://blast.pottiri.tech にアクセスするとlanguages.jaの設定が有効となり、
プロフィール下あたりの説明文が日本語になります。

https://blast-en.pottiri.tech にアクセスするとlanguages.enの設定が有効となり、
プロフィール下あたりの説明文が英語になります。

ゲームの各種ステージ・・・、ブログで言う記事は日本語・英語それぞれで作ることになります。
当初は一つの記事に日本語・英語両方の文章を書くことも検討したのですが、
ダサいのと検索エンジンがどう反応するかよくわからないので辞めました。

さて、Hugoにおいては、記事はファイルで管理されます。

conetnt/posts
├── level0-5.md
└── level0-e.en.md

こんな感じで日本語・英語のファイルを作ります。
日本語の中身をGoogle翻訳してちょっと調整したものが英語ファイルです。
https://blast.pottiri.tech にアクセスするとlanguages.jaの設定が有効となり、
記事の一覧や各種リンクが全部「.md」または「.ja.md」からできた記事になります。

https://blast-en.pottiri.tech にアクセスするとlanguages.enの設定が有効となり、
記事の一覧や各種リンクが全部「.en.md」からできた記事になります。
素晴らしい。

「.md」と「.ja.md」同一視されるのは、設定ファイル(config.toml)のdefaultContentLanguageが「ja」だからです。
「en」にすると「.md」と「.en.md」が同一視されます。

ファイル管理は好きです。
パッと見で日本語・英語が揃っているのがわかるので。
全体的に一つで二言語賄うよりも、設定・ファイルが言語ごとにすっぱり分かれてる方が扱いやすくていい感じです。 

自分で運用するならこれでいいけれど

とまあ・・・私自身は今の仕組みで満足していて、
そこそこ回せているのですが・・・。
これ、一般の方は無理ですよね・・・。
過去にとあるシステムで多言語対応をしたことありますが、
悲しい結果に終わった記憶です。
翻訳家の人と組んでやったのですが、うまく噛み合いませんでした。
上記のような多言語化の仕組みを理解していない(ついていけない)翻訳家、
英語を知らない開発者(私)・・・うまくいくはずもなく・・・。
上記の仕組みよりももっと色々工夫して、
翻訳作業をしやすいよう歩み寄ったつもりだったのですが、
むこうが求めるのは画面中の文言をクリックしたらその場で翻訳した文章を入れれるような、ダイナミックな多言語化機能でした。
画面と剥離した設定やファイルを見せられても翻訳のイメージが湧かないってことでしたね。
わかるっちゃあわかる。
けど、そんなの無理で、画像で一つ一つ指示をもらいながらこちらで丁寧に直した思い出です。

英語ができてシステムもわかる人、そんな人に私はなりたい。

最後まで読んでいただきありがとうございました。

アフィリエイト

爆弾パズル英語化作戦

f:id:pottiri:20201111233255j:plain

お疲れさまです。POTTIRIです。
最近昼間めちゃくちゃ眠いです・・・。
不眠ってほどではないのですが・・・仕事に張り合いがないのかもしれません。
ストレスがなさすぎるのもよくないですね。

さて今日は自作の爆弾パズルゲームを英語化のお話です。

今日のステージ

今日はこちらです。

ハート型にしてみました。
上の方ならどこでもクリアできると思います。
うー・・・ん、もうちょっとギミックがないとパズルゲームとして底が浅すぎますね。
といわけで今「敵」を作ろうとしています。
いつできることやら・・・。

他の面はこちらにあるので、万が一興味を持たれたらサイトを訪れてください。

blast.pottiri.tech

英語版のサイトを作るよ

この爆弾パズルゲームですが、
パズルゲームなら多少英語が拙くても海外の人にやってもらえるんじゃないか?
少しでもアクセスが増える方法を模索したほうがよくないか?
ということで英語版も同時に作っています。
英語版の作成はHugoの多言語化機能とNetlifyの機能を駆使しています。

そもそもなんでHugoとNetlifyなのよという話は後日したいと思います。

英語版作成の具体的な方法はHugoの公式サイトを参考にします。

gohugo.io

記述に従い、Hugoの設定ファイルをこんな感じにします。

[languages]
[languages.ja]
baseURL = "https://blast.pottiri.tech"
title = "Cross×Blast"
[languages.ja.params]
author = "POTTIRI"
description = "秒で解ける爆弾パズルゲーム"
headerTitle = "Cross×Blast"
headerBottomText = "秒で解ける爆弾パズルゲーム"
[languages.en]
baseURL = "https://blast-en.pottiri.tech"
title = "Cross×Blast"
[languages.en.params]
author = "POTTIRI"
description = "Bomb puzzle that can be solved in an instant"
headerTitle = "Cross×Blast"
headerBottomText = "Bomb puzzle that can be solved in an instant"

この状態でビルドすると、次のように言語ごとのディレクトリができるようになります。

dist
├── ja
└── en

で、こっから先はどこを見ても書いてなかったので自力で探った方法です。
Netlify側でサイトを2つ作り、
公開ディレクトリの設定を一方はdist/ja、もう一方はdist/enにします。

f:id:pottiri:20201111235325p:plain
これでHugoの方でソースを変えたり記事を変えたりすれば、
日本語版・英語版両方のサイトに反映されるようになります。
・・・とは言っても日本語を英語に自動翻訳してくれるわけではないので、
どこかに日本語・英語両方の文字列を書いておく必要があります。
次回はこのお話をしようと思います。

最後まで読んでいただきありがとうございました。

アフィリエイト

 

爆弾パズルゲーム大作戦

f:id:pottiri:20201110084743j:plain

お久しぶりです。POTTIRIです。
ここしばらくプログラミングに没頭していたので、ブログ更新をお休みしていました。
プログラミングに集中してしまうとブログのネタがまったく思いつかなくなってしまいますね。
マルチタスクができない男です。

秒で解ける爆弾パズルゲーム

さて、今回作ったのはこちらです。

コンセプトは
「秒で解ける爆弾パズルゲーム」です。
一個だけ赤い爆弾を置くことができます。
爆弾を置くと3秒後に爆発、
爆風で茶色いブロックを全部ぶっ飛ばしたらクリアです。
黒い爆弾は誘爆するのでそれを利用したりするパズルゲーム(のつもり)です。

子供にやらせるゲームを作ってみたいなーと思ったのですが、
子供達の興味を長く惹きつけ続けるゲームは作れない・・・。
でも、一瞬なら惹けるかも。
どうせ一瞬なら爽快感があるほうがいいかも・・・爽快感と言えば・・・爆弾?
という発想で作ったものです。
一瞬でできるのであわよくば通りすがりの人もやってくれるかなあといういやらしい思いもあります(笑)

で、毎日面を作って子供に遊ばせているのですが、
ちょうどいい面って難しいですね・・・。
上の面だと真ん中一番上に「いかにも」な場所を作り、
実はそのちょっと横が正解だよーってつもりだったのですが、
子供はまず「いかにも」な場所にたどり着きませんでした。
う~ん、塩梅がわからないなー。
色々試行錯誤してます。
他の面はこちらにあるのでよかったらどうぞー。

blast.pottiri.tech

技術的な話

爆弾パズルゲームは最近お気に入りのNetlifyで作ってます。

www.netlify.com爆弾パズルゲームは最近お気に入りのNetlifyで作ってます。
無料の範疇で作ってます。
無料!最高!イェイ!イェイ!
と思ったのですが・・・
Netlifyは更新=ビルドに制限がかかっています。
更新には一定時間かかり、無料枠の場合は更新にかかる時間がトータル300分までの制限がかかっています。

www.netlify.comぶっちゃけ個人でそんな制限超えるわけないだろーと思ってたのですが、
私の爆弾パズルは一つのサイトの更新に一回40~50秒かかることがわかりました。

f:id:pottiri:20201110120850p:plain

そんでもってサイト立ち上げの際に更新しまくったので、11月から始めたのにあっという間にこの数字。

f:id:pottiri:20201110120909p:plain

f:id:pottiri:20201110120913p:plain

無駄な試作品とかもあったので慌てて削除。
うぉぉ・・・本気でやるとこんなことになるんですね・・・。
無駄な更新しないようにするのと、更新時間を短縮する方法も考えなくちゃ。

パズルゲームなので言葉の壁を破れないだろうか?と思って
英語版も作ってみました(無謀)

blast-en.pottiri.tech一工夫して一か所直せば日英両方のサイトが更新できるようにしています。
次回はこの話もしたいと思います。

最後まで読んでいただきありがとうございました。

アフィリエイト

 

【ブログ運営】Googleフォームを使ってお問い合わせページを作ろう

f:id:pottiri:20201010000042p:plain
お疲れさまです。POTTIRIです。
ブログにお問い合わせフォームを設置する場合、
Googleフォームが簡単で便利です。
便利なのですが・・・
ふと気付いたらこのブログに設置してたお問い合わせページが崩れていました。
直そうと思ったら、あれこうどうやって使うんだっけ・・・😅
ちょっと使わないとすぐ忘れちゃいますね。
使い方を思い出したので備忘録として残してみます。

お問い合わせページを設置する意味

ぶっちゃけて言うと、お問い合わせページはなくても問題はないと思います。
TwitterやInstagramのリンクを付けてるし、コメント欄も解放しています。
コンタクトを取ろうと思ったらこれらを使っていただいて問題ないからですね。
でも、公開の場では言いにくいことだったり、
わざわざSNSまで移動するのも面倒なこともあるかもしれません・・・。
意見をいただく機会を逃すのもどうかなあと思います。
それら踏まえて私が思うのは
お問い合わせページは意見を聞く気があるという意思表示
だと思っています。
使われなくとも問題ない、
まじめにサイトを運営していて意見も聴く気があることを示すのが重要だと考えます。

ちなみにGoogleアドセンスの審査と、
お問い合わせページの関係はよくわかりません。
いつもとりあえず付けてるので付けずに申請したことがないんですよね。

というわけで今日もさっくり付けてみましょう。

Googleフォームを作成する

Google検索で「Googleフォーム」を検索し、サイト開きます。
※Googleにログインしておいてください。

「Googleフォームを使ってみる」をクリックします。

f:id:pottiri:20201010001016p:plain

左端の大きな+をクリックします。

f:id:pottiri:20201010001017p:plain

Googleフォームの作成画面が開きます。
まずは左上のフォームの名前を変更しましょう。
「無題のフォーム」の部分をクリックすると変更できます。
保存は自動でされます。

f:id:pottiri:20201010001047p:plain

f:id:pottiri:20201010001052p:plain

お問い合わせ画面に設置する質問事項を追加します。
最低限必要なのは、返信に必要なメールアドレスと名前、
そして問い合わせ内容ですね。
まずはメールアドレスを追加します。

  1. 右の+ボタンをクリック
  2. タイプを「記述式」にする。
  3. 質問事項の名前をメールアドレスにする。
  4. 質問事項の名前をメールアドレスにすると
    「メールアドレスにすの収集設定を有効にする」が出るのでクリック。

f:id:pottiri:20201010001101p:plain

「設定を変更」をクリック。

f:id:pottiri:20201010001107p:plain

設定ダイアログが出るので、
「回答のコピーを送信」と「常に表示」をチェックして「保存」をクリックします。
これで、お問い合わせを送信するとその内容が送った人にも確認メールが送信されるようになります。
確認メールを送らない場合、お問い合わせを送った側はちゃんと送信されたかイマイチよくわならないので、送った人に確認メールを送るのはとても重要なことだと思います。

同じ要領でお名前・お問い合わせ内容を追加します。
それぞれ右下のスイッチで必須設定をします。
お問い合わせ内容は段落にしておきましょう。
複数行のコメントが入れられるようになります。

f:id:pottiri:20201010001119p:plain

f:id:pottiri:20201010001125p:plain

不要な質問項目はゴミ箱アイコンをクリックして削除しましょう。

f:id:pottiri:20201010001129p:plain

これでお問い合わせ画面は完成です。
ブログに貼り付ける準備をします。
右上の「送信」ボタンをクリックします。

f:id:pottiri:20201010001135p:plain

「フォームを送信」ダイアログが現れます。
「<>」タブをクリックして、埋め込み用のコードをコピーしましょう。

f:id:pottiri:20201010001140p:plain

ブログにGoogleフォームを設置する

はてなブログの場合は固定ページに貼り付けるのがいいですね。

固定ページのURLは「contact」がいいんじゃあないかと思います。
「contact」としているサイトをよく見かけるので。

f:id:pottiri:20201010001146p:plain

固定ページの編集画面で、「HTML編集」タブをクリックします。
HTML編集画面で先程控えたGoogleフォーム画面のURLを貼り付けます。

f:id:pottiri:20201010001150p:plain

これでGoogleフォームの貼付け完了です。
このページのリンクをメニューやサイドバーに貼り付けておきましょう。

f:id:pottiri:20201010001157p:plain

ちなみに高さの設定が合わないと途中で切れてしまうことがあります。

f:id:pottiri:20201010001201p:plain

そういう時は、URLのheightの数値を変えてみましょう。
基本的に伸ばせば途中で切れるのは解消されるはずです。

<iframe src="https://docs.google.com/forms/d/e/フォームのID/viewform?embedded=true" width="640"
height="791" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe>

回答を見る

Googleフォームから作ったお問い合わせページから送られた内容は、
Googleフォームの回答タブから見ることができます。
※メールも来ますよ。

f:id:pottiri:20201010001208p:plain

おまけ

今回はGoogleフォームを使いましたが、
Wordpressでブログ運営しているならContact Form 7を使用する手がありますね。
一応共有しておきますが、
Contact Form 7とContact Form 7 add Confirm(送信確認画面を付与するプラグイン)を併せて使う場合はちょっとだけ注意してください。
古いiOSだと動かないことがあります。
これは、Contact Form 7とContact Form 7 add Confirmは作った人が別であることに起因します。
どちらも個人が開発されてるので進化を続ける中で意図せず古いものが切り捨てられてしまったんですね。
ご年配の方はOSのアップデートなどほとんどしないので注意が必要です。

ちなみに、「送信の確認画面」を設置するのは日本だけっぽいですね。
意味がほとんどないので海外ではないそうですね。
開発者としては地味に作るのがめんどい機能なので無くなって欲しい文化ではあります。

最後まで読んでいただきありがとうございました。

アフィリエイト 

はてなブログ Perfect GuideBook [改訂第2版]

はてなブログ Perfect GuideBook [改訂第2版]

  • 作者:JOE AOTO
  • 発売日: 2020/07/18
  • メディア: 単行本