息子たちがローマ字勉強するための HTML5 Web標準アプリ作ってみた

ローマ字れんしゅうちょうhttp://romanlettersdrillbook.azurewebsites.net/

Canvas

Audio

MP3 encoder

Internet

Explorer

11

Microsoft Azure

Websites

Visual Studio

Community 2013

Git

PowerShell with

Posh-Git

W3C

Pointer Events

Ocrad.jsOptical Character Recognition

by JavaScript

nuget

Drawing

Canvas

Community 2013 / It’s free.

http://visualstudio.com/free

nuget

Demo

Erase Stroke

W3CCandidate Recommendation

09 May 2013

Pointer

Events

http://www.w3.org/TR/pointerevents/

Internet

Explorer

11

http://goo.gl/IkI2Xm

Demo

Optical Character Recognition in JS

http://antimatter15.com/ocrad.js/demo.html

http://bower.io/

http://nodejs.org/

> npm install –g bower> bower install ocrad-bower

Demo

ローマ字スペルからひらがなへの変換は…

Generate Voice Sound

https://cloud.voicetext.jp/webapi

Demo

Audio

var audio = new Audio();audio.autoplay = true;var url = '/api/voice/' + encodeURI('こんにちは');

audio.src = url;

Internet

Explorer

11

http://www.w3schools.com/html/html5_audio.asp

http://www.w3schools.com/html/html5_audio.asp

Convert .wav to .mp3

http://lame.sourceforge.net/

https://github.com/Corey-M/NAudio.Lame

using System.IO;using NAudio.Wave;using NAudio.Lame;

public static class Codec{

// Convert WAV to MP3 using libmp3lame librarypublic static void WaveToMP3(

string waveFileName, string mp3FileName, int bitRate = 128){

using (var reader = new WaveFileReader(waveFileName))using (var writer = new LameMP3FileWriter(

mp3FileName, reader.WaveFormat, bitRate))reader.CopyTo(writer);

}}

http://stackoverflow.com/questions/20088743

Deploy

Microsoft

Azure

Websites

https://appharbor.com/

https://github.com/dahlbyk/posh-git

Posh-Git

Appendix: Favicon

http://realfavicongenerator.net/

Conclusion

Canvas

Audio

MP3 encoder

Internet

Explorer

11

Microsoft Azure

Websites

Visual Studio

Community 2013

Git

PowerShell with

Posh-Git

W3C

Pointer Events

Ocrad.jsOptical Character Recognition

by JavaScript

nuget

Learn, Practice, Share.

Thanks.