牟田口

Monacaで<audio>タグを使って音楽再生と正解・不正解の音を鳴らす

こんにちは、牟田口です。

Monacaはウェブ上でスマートフォンアプリを作成できる、アプリ開発プラットフォームサービスです。


Monacaを使って、下記をやってみました。
クイズアプリなどを作るときに使えると思います。

  • BGMを自動再生する
  • 正解・不正解の音をボタンを押したときにならす

ただし、Monacaの公式ドキュメントでは「HTML5の audio タグは、iOS端末では正常に動作しない可能性があります。」との事でした。
iphone7の実機で確認したところ再生できました。他機種について再生できるか不明ですので、実機で確認されるのが良いかと思います。

BGM,正解・不正解のmp3は、サイトからダウンロードして、wwwフォルダにアップロードしました。

 

Monacaのテンプレート:最小限のテンプレート

BGM:http://www.hmix.net/music_gallery/music_top.htmの優しい・癒しの曲「Dear Childhood Friend」

正解音:https://soundeffect-lab.info/sound/anime/の「ラッパのファンファーレ」

不正解音:https://soundeffect-lab.info/sound/anime/の「運命2」

 

ソース

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
// 参考:HTML5のaudio要素とJavaScriptで作るオーディオプレイヤー
// https://mae.chab.in/archives/1975
function playSound1(){
audio = new Audio('trumpet1.mp3');
audio.play();
}
function playSound2(){
audio = new Audio('fate2.mp3');
audio.play();
}
</script>
</head>
<body style="text-align: center">
<!--
<audio>タグ。背景ミュージック。autoplay=自動再生、loop=ループ再生
参考:https://developer.mozilla.org/ja/docs/Web/HTML/Element/audio#Attributes
-->
<audio src="n46.mp3" autoplay loop></audio>
<!-- 開発中に再生の停止ボタンを表示する場合は、下記を使う -->
<!-- <audio src="n46.mp3" autoplay loop controls></audio> -->

<button onclick="playSound1()">正解</button>
<button onclick="playSound2()">不正解</button>
</body>
</html>

 

Monaca画面

参考リンク

音楽の再生方法 | Monaca Docs
https://docs.monaca.io/ja/sampleapp/tips/media/

 

0

Microsoft Edge においてダイジェスト認証を完了できない場合があります

IT技術情報です。
Microsoft Edgeは、ダイジェスト認証が通らないパターンがあるようです。
わすれないようにメモ。

 

こっちはOK

http://192.168.1.1/index.html
http://192.168.1.1/?

 

こっちはNG

http://192.168.1.1/ 
http://www.microsoft.com/


情報源

Microsoft Edge においてダイジェスト認証を完了できない場合があります

https://support.microsoft.com/ja-jp/help/3163423

0

2018年06月28日 commonsnet総会発表 NetCommons3の困った事 あるあるの対応方法(技術者向け)

commonsnet総会発表向けに資料作成しました。
残念ながら発表時間がおして、時間がなかったため、資料公開します。
内容は技術者向けとなっています。

0

packagistで使うcomposer.jsonのlicenceに独自ライセンスを設定する

こんにちは、オープンソース・ワークショップの牟田口です。
IT技術ネタです。

packagistが最近になって、composer.jsonのlicenceの書き方を厳密に見るようになったようで、
下記のエラーメールが届きました。

--- 注釈
・packagistは、composerでパッケージバージョン管理してるメインリポジトリです。
・composerは、phpのパッケージバージョン管理ツールです。
・composer.jsonは、composerの設定ファイルです。
---

 

--- エラー内容

「件名」
netcommons/videos failed to update, invalid composer.json data

「本文」
The netcommons/videos package of which you are a maintainer has
failed to update due to invalid data contained in your composer.json.
Please address this as soon as possible since the package stopped updating.

It is recommended that you use `composer validate` to check for errors when you
change your composer.json.

Below is the full update log which should highlight errors as
"Skipped branch ...":

[Composer\Repository\InvalidRepositoryException]: Some branches contained invalid data and were discarded, it is advised to review the log and fix any issues present in branches

Reading composer.json of netcommons/videos (3.1.7)
Importing tag 3.1.7 (3.1.7.0)

(省略)

Reading composer.json of netcommons/videos (master)
Importing branch master (dev-master)
Skipped branch master, Invalid package information:
License "NetCommons License" is not a valid SPDX license identifier, see https://spdx.org/licenses/ if you use an open license.
If the software is closed-source, you may use "proprietary" as license.


なにやら、composer.jsonのLicense "NetCommons License" は、SPDX license(https://spdx.org/licenses/)に該当してないよ、との事。
NetCommons Licenseは、FreeBSD Licenseを基にした独自のOSSライセンスなんだよなぁ。
という事で、SPDXのライセンスにない場合の書き方を調べました。

 

--- 対応方法

SPDXのライセンスにない場合の書き方をする。
  (composer.jsonの修正例)

"license": "LicenseRef-NetCommons",
"license-ref-net-commons": "https://raw.githubusercontent.com/NetCommons3/NetCommons3/master/license.txt",

 

--- 情報元link

SPDXのライセンスにない場合は、こう書くらしいです。
https://spdx.org/spdx-specification-21-web-version#h.1v1yuxt

issueにもこんなのあがってました。
https://github.com/composer/composer/issues/2152

修正例
https://github.com/NetCommons3/Videos/blob/master/composer.json#L25-L26

 

--- その他の対応方法

メールの修正方法に従う。
 1) SPDX license(https://spdx.org/licenses/)に修正する。
(composer.jsonの修正例)

"license": "BSD-2-Clause-FreeBSD",

 

 2) クローズしたソースなら、ライセンスを"proprietary"にする。
(composer.jsonの修正例)

"license": "proprietary",

 

以上、参考なればうれしい限りです。

0

#イクメン日記 - 最近見てるTV番組

さんきゅうパパプロジェクト2016/10/24から約1年間、育児休業を取得しています。

ご無沙汰ぶりです、牟田口です。
とりあえずブログ投稿できる位には落ち着てきました。

最近NHKを見る機会が増えました。 
パパ1年生の自分にとって、子育てや保護者の立場も1年生なので圧倒的に知識や経験が足りません。

たまたまテレビをつけたら気になる番組がやってたので、nasneに毎週録画してチェックしてます。
結構ためになりますよ。

すくすく子育て(Eテレ 毎週土曜 午後9:00~9:29)
http://www.nhk.or.jp/sukusuku/
子育ての悩みとか、専門家(大学の先生とか)の意見が参考にしてます(実際やれるかどうかは別問題(汗))

ウワサの保護者会(Eテレ 毎週土曜 午後9:30~9:55)
http://www4.nhk.or.jp/hogosya/
他の家庭の保護者はこんな事考えてるんだ、へー。と思ってみてます。各々の家庭の違いが聞けます。

 ではでは

0

#イクメン日記 - これからパパさんになる方へ

さんきゅうパパプロジェクト2016/10/24から約1年間、育児休業を取得しています。

こんにちは、牟田口です。

------
#イクメン だ育児休業だと頑張ってるけど、全然いたってなかった。大変さは異次元というか、聞いてるのと体験するのと、こんなにも違うものなのかと衝撃。見えてなさすぎた。まだまだだな、反省
------

と呟いたところ、なんと気になると反応頂いたので、これからパパさんになる方に、少しでも参考になればと思い、自分の不出来さを書いておきます。

4点で、ちょい長めです。
何かの参考になれば幸いです。

--- 1.夫婦2人で同時期に育児休業1年取得したら、子育て終わった熟年夫婦の家の環境と似たような事になる事を理解してなかった

2人が家にいる時間が長くなる
→ 子育てを終えた熟年夫婦でも、2人で家にいると大変と聞いていたにも関わらず、まったく考えてなかった。
→ 二人だと家事掃除育児を共同作業になるので、家の中でもあるし、細かいところが気になっていった。
→ その都度どうするか決めが必要になり、自分一人で決められないもどかしさがあった。手を抜こうにも相手も居るので、余りだらなしない事はしちゃいけないと思い込んだ。
→ 育児休業が一人であれば、ワンオペ育児と言われようとも、昼間の時間でやる事は自分の判断で決めて動けるのし、なれてこれば少しの手抜きも出来たり、家でゴロンとちょっとだらし無い時も出来るかもしれない。とはいえワンオペ育児で困ってる人は居ると思うので、それはまた別の解決策が必要なんだろうと思う。

育児休業を2人でとれるなら、交互に(嫁1年後、夫1年取得で2年)とった方が良いかと今なら思う。
保育園入れなかったとしても、理論上は2年は確保出来るため。それはそれで大変さはあると思う。

--- 2.仕事をしない事でこんなに不安がつのるとは思ってなかった。

子供は9月生まれで、9月10月の2ヶ月は保育園周りや書類作成、提出で慌ただしく、また保育園周りで他のお母さん方や、保育園職員さんに子供の悩み(あんまり昼寝してくれない、嫁は母乳あげてたので、カフェインの関係でコーヒー飲んでも大丈夫か等)話を聞けたので、不安が紛れてた。

12月頃から子育てのみで、家を出る事が減った。
→ 自分の都合で外に出る事は、育児休業を一年頂いてる手前、何か罪悪感があり、子供の相手をする事の大変さを、嫁さんに頼んで楽しむ気になれなかった。
→ ここは今なら嫁さんに相談して、息を抜きをすればよかったと思う。親のストレス軽減、イライラの発散すれば、子供の育児にも少し柔らかく対応できるかと思う。
イライラしたままだと、なかなか泣き止まない我が子に笑顔を向ける事が難しいから。
イライラしてあやしても、何時もより泣き止まないことがあり、相当じれたかった。

--- 3.些細なことと思って、気になったことを、意識的に周りに相談しなかった。結果、爆発したこと

会社に行っていた時は、他の社員もいるし、昼食を一緒に食べていたので、その時気軽に相談というか、話をしていた。
→ 育児休業中には、その気軽な話先が無くなってる事に気づかなかった。
→ 些細な事は以下の通り
・トイレの蓋は使い終わったら閉めるか、開けっ放しか
・トイレで夫は座ってして、立ってするのどちらか
・靴下の干し方は片方ずつ干すか、両方まとめて干すか
→ 他人に話せば些細なこととして、流すことも出来たと思う。しかし得てして夫婦喧嘩って些細な事から始まりますよね。
→ そんな些細なことや、イラっとした事を考え続けて煮詰まって爆発しました。
→ 結果、嫁さんを一方的に怒る事を2日連続して、深く傷つけてしまった。

考えが煮詰まってイライラが止まらないなら、電話でもメールでもlineでもいいから友達、両親、同僚、兄弟に話を聞いてもらうのが良いと思います。

何か自分の思い込みや決めつけで、ネガティヴ思考ぐるぐる状態を、フラットな意見で解きほぐしてくれたり、自分の気づいてなかった事を気づかせてくれるキッカケを作ってくれました。

--- 4.感情的に爆発はもうしたく無い

一方的に相手怒るなんて、自分で振り返っても無いしあり得ないので、"イライラしたくない"でAmazon検索して紙本と電子本合わせて14冊購入。図書館で2冊借りて、どうにかしようとしてます。

精神病も疑って精神科行ったけど、病気なし。今思えば当たり前だけど、病気を発症した後でないと、精神科は患者が本気で困ってても、病気未満であれば有効な手は施しようがないんだろうとおもった。

今はアンガーマネジメントの21日で習慣づける、怒りと上手に付き合う心理トレーニングを実践中です。
https://www.amazon.co.jp/dp/4820719475/ref=cm_sw_r_sms_awdb_JrrSyb9QFVDAT

有料のアンガーマネジメント入門講座、応用講座は受講済み。本を事前に読んでなくても大丈夫とは知らなかった。
https://www.angermanagement.co.jp/seminar

と、こんな感じです。

 

0

#イクメン日記 - 寝かしつけ困った

さんきゅうパパプロジェクト2016/10/24から約1年間、育児休業を取得しています。

こんにちは、牟田口です。

--- 寝かしつけ困った

4か月になり、よく笑ってくれるようになりました。
ミルクを飲むときも、右に左に首をぐりぐり動かすので、哺乳瓶がちょくちょく外れます。
以前は通用していた寝かしつけミルク。もう通用しないみたいです。3勝2連敗中(T^T)

母乳寝かしつけは有効。
父ちゃんは乳でないんじゃー。その方法できないんじゃー。
今は、嫁さんに母乳寝かしつけしてもらってます。ふぅ。

今度はちょっと体力使うけど、抱っこ寝かしつけかな?
半信半疑でいろいろ試しながら、これからもやってきます。

抱っこやお風呂入れをやってると、日々赤ちゃんの体重が重くなっていくのが、腕の辛さでわかってきます。筋肉つくよねっ!
(順調に成長してるんだね。嬉しい辛い嬉しい)

ではでは

1

#イクメン日記 - 真・ぎゃん泣き

さんきゅうパパプロジェクト2016/10/24から約1年間、育児休業を取得しています。

こんにちは、夕方にはぐったり、牟田口です。

--- 真・ぎゃん泣き

昨日は赤ちゃんの寝つきが悪くて、寝る直前にご機嫌損ねてギャン泣きされました。
予防接種、3,4か月検診、保険の窓口で相談と3日連続お出かけしたので疲れたのかも。

昼間はニコニコ続きだったので、久しぶりのぎゃん泣きにイライラモードでした。
結局、私では機嫌を直す事ができず、嫁さんに母乳飲ませながら寝かしつけてもらう事を2回繰り返して、寝て頂きました。

今日の夕方も突然、機嫌を損ねてぎゃん泣き始めまして、いやいや俺なんも悪い扱いしてないぞ、と思いつつも抱っこやら、絵本を読んだり
アンパンパン人形を使って、赤ちゃんの目の前で飛んでる演出をしてみたり、夕飯作ってる嫁さんを赤ちゃんと一緒に見学したりして、
機嫌を取ってみました。

結局、抱っこしている牟田口の腕が筋肉疲労で活動限界になったので、赤ちゃんをおやすみたまごベットに寝かして牟田口バタンキュー。
しばらしくしたら赤ちゃん寝てました。

こんな日もあるみたいです。

--- 紙オムツの種類

「出産前に、紙オムツは合う合わないがあるよー。病院のオムツで使ってるオムツだったら大丈夫だと思う。」
と聞いていたので、合わないオムツだったらどうしよう?と不安に思ったものです。

結論。どのメーカーでも新生児用サイズのテープタイプだったら、だいたい大丈夫でした。

うちで使ったオムツは下記

  • ムーニー新生児用サイズ(病院のもの)
  • パンパース新生児用サイズ
  • パンパースSサイズ(頂きもの)
  • グーンSサイズ(←いまここ)

グーンはほかのオムツより1周り大きいようで、新生児用サイズ→Sサイズに変える時に使うとスムーズとAmazonカスタマレビューがありました。

紙オムツは頻繁に消費するので、らくちん購入方法色々

  • ネット通販で箱買い(サイズ変更時に余るリスクあり)
  • Amazonの毎月定期購入(要プライム会員)
  • 薬局で購入

うちはAmazonで正月安売りしていたグーンSサイズ3パック(=箱買になった)を購入
後は、徒歩圏内の薬局でつど購入でいいかなと思ってます。

ではでは

0

#イクメン日記 - 3,4か月検診

さんきゅうパパプロジェクト2016/10/24から約1年間、育児休業を取得しています。

こんにちは、牟田口です。
昨日は予防注射2回目で、やっぱりギャン泣き。
夜の寝つきが悪かったです。

--- 3,4か月検診

嫁さんに行ってもらいました。
身長59cm、体重5.6kgで栄養状態も良好でした。
診察をする方の白衣を見てたら泣いてたとの事。
昨日の予防注射を思い出したのかなぁ。

3,4か月検診に行ったら、ブックスタートという活動で、かわいい絵本を1冊頂きました。

ぶぅさんのブー(0,1,2才用)

この力押し、嫌いじゃないっす

離乳食話もあったみたい。
しまった、これは嫁さんに教えてもらおう。

ではでは

0

#イクメン日記 - うがい声あそび

さんきゅうパパプロジェクト2016/10/24から約1年間、育児休業を取得しています。

こんにちは、牟田口です。
明日で赤ちゃん4か月になります。
こちらが笑い声をあげると、つられて笑ってくれるので、かわいいんです。

--- うがい声あそび

3か月後半から覚えたのか、ミルク飲ませて後半位になると、ミルクが口の中に残ってるのに声だして「あ”あ”あ”あ”~」とか「う”う”う”う”~」と低い声を上げてます。
顔が赤くなったり発疹が出てないので、たぶん異常ではないと思う。

どこで覚えたの、そのうがい声(デスボイス)
私もちょっと面白がっています^^

--- 抱っこポジション

赤ちゃん6kgあるので、なかなか抱っこも腕・足にきます。
無酸素運動の代わりになりますね。
横抱きと縦抱きがあって、縦抱きの方が喜んでます。

  • 横抱き
    • はじめにやってた抱き方。腕枕にして抱っこみたいな。1,2か月の時はよかったけど、最近は腕枕が固いのか「いやだー、びよーん」とよく身体を反らせます。
  • 縦抱き
    • 片方の手のひらや腕に乗せて、もう片方で首や背中を押さえるスタイル。腕疲れやすいので、疲れたら手のひらや腕に移動させたり、右手から左手に持ち替えたりする。

既にこなしている、世の先輩父ちゃん母ちゃんには頭が下がる思いです。

ではでは

0