HTML5 - nicozon

#6 フォームとその部品【HTML5入門】

お問い合わせなどに使われるフォームの基本。

しゃべりが下手なので、Webサイトを作ってそこに詳しくじっくり書いていくことにしました！
HTML5/CSS3の超教科書 | http://prog.guide/html5-css3/

sm30226104 ← #5 || #7 → 再開までもう少しお待ちを

Twitter → @ithat_me
01 : HTML5入門：mylist/57685012

http://www.nicovideo.jp/watch/sm30245302

ブラウザとJavaScriptだけでベートヴェンの交響曲第9番＋Ζ刻をこえてを演奏

sm29089662 からエンジンに改良を重ねてベートヴェンの第９番を演奏できるぐらいになりました。

主な変更
・描画負荷を減らすためテーブルタグでなくDivタグとスタイルシートで鍵盤を表示。（一応レスポンシブ対応）
・数値よりもバーのほうがわかりやすいっしょということでパンポットやピッチはmeterタグで描画。
・音色ファイルをS-YXG50_0.2.1.2.sf2をベースに作り直した。48kHzと以前の倍以上に向上。
・リバーブエフェクトのインパルス応答（IR）のライセンスが怪しかったのでエフェクターのインパルス応答JavaScriptで自作（https://github.com/logue/sf2synth.js/blob/develop/src/reverb.js）

今後の予定
・バンク・セレクトに正式対応しGeneral MIDI 2に準拠させる。（今はドラムとSFXしか対応していません。）
・音色が存在しなかった場合の処理を書く。（125未満のバンクの場合、バンク0の音色を鳴らす。126～128の場合、音色番号1の楽器（通常はドラムのStandard Kit）を鳴らす）

だいぶシャリシャリ感はなくなったハズ。

MIDIファイルのアドレスもコピペできます（日本語が含まれてると動かないが・・・）：
https://logue.github.io/smfplayer.js/#zip=midifiles%2F%E9%81%A9%E5%BD%93%E8%A9%B0%E3%82%81%E5%90%88%E3%82%8F%E3%81%9B.zip&file=Beethoven%20-%20Symphony%20No.%209%20(with%20choir)%20in%20d%20minor%2C%20Op.%20125%20-%204.mid

おまけに、Ζ刻をこえて（Better days are comming）19:41 も入れてあります。

http://www.nicovideo.jp/watch/sm33279666

HTML5/CanvasでADVRPG作ってみた①

お初にお目にかかります、HNはてふと名乗ってます。

さて、HTML5のCanvasを利用してADVぽいRPGぽいゲームを作ってますが、
今回はそのADV部分だけ、東方のキャラ達にご出演頂いて紹介させていただきます。

ちなみに東方に関しては"にわか"なので悪しからず…

次回はバトルシーンもある程度完成させて投稿する予定です。

以下使用素材とか(敬称略

キャラクター立ち絵
kaoru http://gensoukyou.1000.tv/

効果音
魔王魂 http://maoudamashii.jokersounds.com/

背景画像
闇討ちProject http://commons.nicovideo.jp/user/499432

その他ゆっくり画像など

製作状況などはこちら→ @tefugame

http://www.nicovideo.jp/watch/sm23253213

単スリットによる回折現象

スリット幅 w[μm]に波長λ[nm]の可視光を入射した時の回折パターン。スリットからスクリーンまでの距離は1[[m]。
HTML5による仮想物理実験室
http://www.natural-science.or.jp/article/20160526000054.php

http://www.nicovideo.jp/watch/sm28920037

【MMDドラマ】勝負師弱音ハク

二作目になります。
ほとんど動かない上に文字ばかりで内容もないようなものですが、少しでも楽しんでいただけたら幸いです。
キャラの動きなどは相変わらずJavascriptで制御を行っていて2Dのようになってます。
前回文字が小さいということで、今回は文字サイズを大きくしてみました。
今回登場するゲーム要素のある部分について、需要はないかもしれませんが、致命的なバグを含むシステムの改修やデザインの修正が終わっていつか配布できたらと夢みています。
本編は10秒後くらいから始まります。
補足
ボカロ王国：ミクちゃん、リンちゃん、レンちゃん、ルカちゃん、ネルちゃん、ハクちゃんが住んでる王国
任務：ボカロ王国に他国から来る依頼でミクダヨー様に命じられる仕事

http://www.nicovideo.jp/watch/sm22416523

クリスマスプロ生勉強会第12回＠品川セッション1 #pronama

2011/12/24 開催クリスマスプログラミング生放送勉強会第12回＠品川のセッション1グループ
イベント詳細: http://bit.ly/xpronama

10分程度のセッションです。
#00:00 @jz5 「HTML5 ではじめるプログラミング」
#09:18 @daisuke_nomura 「Windows Phone でニコ生アプリを作ってみた」
#21:03 @hello_yukiko 「要件定義～導入運用保守までの SI 案件ひきこもごも」
#31:59 @sattch02 「IVRC について」
#36:27 @handy_fox 「画像符号化の歴史をほんの少しだけふりかえってみた」

スポットライトはセミナールームの仕様で消せませんでした。配置的な制限でななめ撮影になってます。
lv74838697 で 2012/12/31 まで公式で配信された内容も視聴できます。

lv74579261
mylist/12987821

http://www.nicovideo.jp/watch/sm16563536

Mabinogi MML Emulator

マビノギのMMLをブラウザで再生するプログラムを開発しました。（Chrome、FireFox、Edge対応）ほぼゲーム上と同じ音で再生されます。sm29089662の応用プログラムです。（これも、公表から３年経過してるが・・・）ついでに、JSMMLで再生するプログラムも入れてます。（JSMML版は立ち上がりが遅いが・・・。）
http://logue.github.io/MabiMmlEmu/

自分のMMLを入力して、このページの右下にある「シリアライズ」をクリックして、music.jsonのnameに曲名、valueに先ほど「シリアライズ」で出力したテキストを入れることで自分のMMLを登録できます。

http://www.nicovideo.jp/watch/sm29090754

【万年エターナるが3Dシューティング…ではない…だと？】微生物シミュ

来週から頑張ります

シューティング制作の過程でJavascriptの勉強ができたので
すごい昔に作った微生物シミュレーションを作り直してみました。

↓ライブデモ
http://www.geocities.jp/warotarock/experimental/webpcl/

※Google Chromeで動作確認しています。
※WebGLではないのでChrome以外でもわりと動く気がします。

http://www.nicovideo.jp/watch/sm19173943

eVY1 ShieldをUSB接続して、Web MIDI APIで再生してみる

YAMAHA NSX-1搭載のeVY1 ShieldをMacにUSB接続して、Web MIDI API経由で唄ってもらうサンプルができました。

http://www.nicovideo.jp/watch/sm22143520

東方風STGブラウザゲームをJavaScriptとHTML5で作成中その5

ライブラリなどは使用せず0から作っています。

前: sm21892468 次: sm22137339
mylist/38547755
更新点はマイリスト参照。
使用素材はその1の親作品参照。

詳細やプレイは下記リンク先で。Chrome上でプレイできます。

http://d.hatena.ne.jp/takahirox/20130819/1376894048

今回はリプレイ機能を実装しました。
サーバに登録することで、他プレイヤーにリプレイを見せることができます。
#0:00 ブラウザ上で動くアピール
#0:03 リプレイ垂れ流し
#4:33 リプレイ登録方法
録画環境が酷い。実物はもっと快適な動作です。

ブラウザMMDビューア→mylist/49125767

http://www.nicovideo.jp/watch/sm22039412

【自作ゲーム】ポテくまくんキャッチ！

いきなりですが、秩父第一中学校コンピュータ部のある人達にお詫び申し上げます。
わけありで、せっかく撮影した動画を今回投稿した動画に使うことができませんでした。m(_ _)mﾍﾟｸﾘ

今回は、コンピュータ部第6グループのルッソさんのテストプレイ動画を無修正で
そのままニコニコ動画に投稿しました。
【ゲームタイトル】
ぽてくまくんキャッチ！
【クリア時間】
無限にあそべます
【動作環境】
ネットブラウザがあるものほとんど
【ジャンル】
ミニゲーム(オチゲー,ブラウザゲーム)
【使用した制作ツール】
メモ帳,ペイント
【概要】
遊べばわかる！リンク↓
http://waricoma.hp2.jp/d/p/
もしくは「ぽてくまくんキャッチ！」で検索

http://www.nicovideo.jp/watch/sm26224793

Nintendo Switchでコメントアートのテスト

Nintendo Switchの内蔵ブラウザを呼び出す方法があるらしいので試してみた。
しかし動画は再生できなかったので、コメントアートだけ流してみる。
もしNintendo SwitchでZenzaWatchが動いたらこんな感じだよ、というイメージです。

使ったデータはここにいろいろ置いてあります。
http://makimo.to/Zenza/

http://www.nicovideo.jp/watch/sm31072058

しっとり物理アクションパズルを作ってみた

http://9leap.net/games/1784 --------------------色玉里（しきたまり）という物理演算を使ったアクションパズルゲームを作ってみました。パズルゲームは遊べるカタチになるまでが結構大変なのであまり作りたくなかったのですが、なんとか頭を使っても使わなくてもそれなりに没頭できるゲームに仕上がったので紹介します＾＾ -------------------- 他のゲーム【BUTTERFLY SPEAR】→sm17809030

http://www.nicovideo.jp/watch/sm18093635

HTML5 でゲーム配信とか - shinh

SDLオフ 2009年夏 (2009-09-23)
http://gonypage.jp:10080/proj/wiki/SDL_2009%E5%A4%8F

マイリスト: mylist/15007094
この動画はCreative Commons「表示」を適用します
http://creativecommons.org/licenses/by/2.1/jp/

http://www.nicovideo.jp/watch/sm8397705

【ZenzaWatch】新iPadProではコメントも120fpsで流れてた　ほか

動画自体は60fpsだけど、なんとなく違いがわかる？

わざわざiPadでZenzaWatchを使う人もいないと思うけど、SafariよりChromeのほうがおすすめです。

タッチパネル関連はまだまだアイデアが出てくると思うので、今後も研究していきたい。(たぶんChromeしか確認しないけど)

検証にお借りした動画はこちら: sm17209552

http://www.nicovideo.jp/watch/sm31543909

ネットワークトラフィック可視化ツール Dot Star

ネットワークトラフィックの可視化。音源は次の2曲。てってて～原曲、じゅるP氏作：Gene-Revolutionary

http://www.nicovideo.jp/watch/sm22110880

【MMDドラマ】ミクダヨーを称える動画

自作のミクダヨーを称える動画がいくつも流れる動画です。
導入部分を含めて全てが無駄に長いMMDドラマですが
普通のMMDドラマと違って、ゲームプログラムを流用した部分が9割以上です。
内容はいろいろツッコミどころありますが最後まで見ていただけたら幸いです。

★注意★
私が初めて初音ミクV3を買ってDTMをしたときの曲が流れます。
初音ミクの洗練された技術を知っている方からすれば
笑ってしまうようなものですがご容赦ください。
特に11分18秒～12分に流れる初音ミクV3による聖剣伝説2「呪術師」は
原曲を知っていたり音感がいい方は体調を崩されるかもしれません。
その場合は無理して視聴を続けないでください。

http://www.nicovideo.jp/watch/sm23530381

【ZenzaWatch】 765Proでコメントキャプチャテスト

ニワン語の構文を無視してreplace命令だけ拾うという雑(現実的)な作戦で妥協しました。
正直ニワン語がオーバーテクノロジーすぎてフル実装できる気がしないけど、いつかは挑戦したいです。

今回お借りした動画はこちら -> sm25818853
(見やすくするために背景は黒くさせていただきました)
コンパイルされたもの: http://makimo.to/Zenza/765Pro!.html

ZenzaWatchがやってることと矛盾してるかもしれませんが、もし新規に動画プレイヤーを作るのであれば、フォントまわりの複雑な挙動は再現しなくていいと思います。
過去の互換よりも、AdobeやGoogleの気まぐれに振り回されないような描画の「仕様」をしっかり固めるべきではないだろうか。
ChromeでもFirefoxでもWindowsでもMacでもスマホでも同じCAが見られる世界こそ未来。

http://www.nicovideo.jp/watch/sm29040006

【ZenzaWatch】 Amazon Fire TVでBad Apple!

公式プレイヤーもAmazon Fire TVで動いたので比較テスト。

最初がめんどくさいけど、環境さえ構築すればそこそこ使える。

以前試した時: sm29273116 は丸っぽいフォントだったのですが、ある日突然、ゴシックっぽいフォントが表示されるようになりました。謎すぎる。

お借りしたマイメモリーはこちら: watch/1463845240

http://www.nicovideo.jp/watch/sm30047094

#2 テンプレートとHello World!【HTML5入門】

HTMLの基本となるテンプレートの作成とHello World!です。

しゃべりが下手なので、Webサイトを作ってそこに詳しくじっくり書いていくことにしました！
HTML5/CSS3の超教科書 | http://prog.guide/html5-css3/

sm30166509 ← #1 || #3 → sm30182020

Twitter → @ithat_me
01 : HTML5入門：mylist/57685012

http://www.nicovideo.jp/watch/sm30175859

JavaScript“だけ”で日本語読み上げするソフトを作ってみた。

espeak（読み上げソフト）とIgo.js（日本語形態素解析）を用いて日本語を読み上げるソフトを作りました。まぁ、作ったのは3年前で今更感ありますが・・・。一応IEに対応させました。
この動画では「吉野家のコピペ」「前原圭一の演説」「ブロントさん」のセリフを喋らせています。
女性の声やロボットの声とかにもできるんですが、めんどくさいのでやってません。
http://logue.github.io/espeak-japanese

http://www.nicovideo.jp/watch/sm29089075

「60fpsの滑らかさ」の比較

解説記事用の動画です。
これだけ見ても意味不明だと思います。

ざっくり言うと、
上は時間とコメントがきっちり同期してるのに対し、
下はそんなに正確じゃなかったりします。(そのかわりに滑らか)
この辺をCanvasとCSS3 Transitionの性質と絡めつつ、うまくまとめられるといいんですが。

録画環境
Ryzen 1700X / Radeon 580 / 1920x1080 / Chrome 64

お借りした動画はこちら sm30617631

http://www.nicovideo.jp/watch/sm32817861

【自作ゲーム】ブレイブースト

HTML5+JavaScriptで作ったシューティングゲームです。
難易度ノーマルでStage1〜Stage3までクリアする動画です。

公開中→ http://9leap.net/games/1888

http://www.nicovideo.jp/watch/sm19062598

WebGroove 0.9 デモ

HTML5で書いたシーケンサーWebGroove ver0.9デモ。ボーカルシンセ「200きろいど」搭載でブラウザが歌います。

http://www.nicovideo.jp/watch/sm16190548

【HTML5】東方ノベルシステム for iPhone、的な何か2【webkit】

sm10459029 からちょいちょい作ってます。
続き > sm10705262

まともに動くかはアレですがためしに触ってみたい方はこちらをどうぞ
（キャッシュ処理を完全に入れてないのでWIFI環境推奨）
http://novesys.appspot.com/index.html

ちなみに動かしているシナリオは以下のテキストの記法でやってます。
http://novesys.appspot.com/scenario1.txt
http://novesys.appspot.com/scenario2.txt

GW明けにはアップロードして誰でも見ることができるようなったらいいな。
バグとか何とかあれば [email protected] へ頂けると助かります！

http://www.nicovideo.jp/watch/sm10546434