秘密っす。

今日は秘密の作業を行っていました。

え？どんな作業かって？

え？聞いてないって？

聞いてようが聞いてまいが秘密です。

✌('ω'✌ )

編集画面やそのほかの画面への音の組み込み作業が終わりました。この音再生ライブラリがめっちゃ便利で作業がはかどりました。githubに上げようかしら・・・

本日を持って、5日間に渡って作業してきた音の再生作業が完了しました。

あとは”秘密の作業”を残すのみとなりました。こちらは5日もかからないと思うので、2月頃にいよいよアプリがリリース出来そうです。

今回は、昨日作成した音再生ライブラリを使って、ガワネイティブアプリに音を組み込んでいました。

音再生ライブラリの使い勝手が良く、効率よく音を組み込むことが出来ました。

吾輩はやれば出来る子である。  
　　　　∩∩ 
　　　（´･ω･） 
　　 ＿|　⊃／(＿＿_ 
　／　└-(＿＿＿_／ 
　￣￣￣￣￣￣￣

今日はタイトル画面とテキスト漫画一覧画面に組み込んだので、明日は編集画面やそのほかの画面に組み込みます。明日には音の組み込み作業は終了しそうです。

Web Audio APIによるmp3の簡易再生ライブラリが完成しました！

複数の音の同時再生に対応しています！！

sound.js

if (typeof g_audioContext === 'undefined') {
    window.AudioContext = window.AudioContext || window.webkitAudioContext;
    g_audioContext = new AudioContext();
    loadSound = function(url, keyName, fn) {
        var request = new XMLHttpRequest();
        request.open('GET', url, true);
        request.responseType = 'arraybuffer';
        // Decode asynchronously
        request.onload = function() {
            g_audioContext.decodeAudioData(request.response, function(buffer) {
                fn(keyName, buffer);
            });
        }
        request.send();
    };
    getScriptParam = function(name) {
        var scripts = document.getElementsByTagName('script');
        var src = scripts[scripts.length - 1].src;
        var query = src.substring(src.indexOf('?') + 1 );
        var params = query.split('&');
        var result = new Object();
        for(var i = 0; i < params.length; i++) {
            var keyValue = params[i].split( '=' );
            if (name == keyValue[0]) {
                return keyValue[1];
            }
        }
    };
    g_sounds = {};
    playSound = function(name) {
        if (name in g_sounds) {
            g_sounds[name]();
        }
    }
}
var tmpName = getScriptParam('name');
loadSound('https://minnano.app/sound/' + tmpName, tmpName, function(keyName, buffer) {
    g_sounds[keyName] = () => {
        var source = g_audioContext.createBufferSource();
        source.buffer = buffer;
        source.connect(g_audioContext.destination);
        source.start(0);
    };
});

sound.jsファイル内の ‘https://minnano.app/sound/’ はmp3ファイルの置いてある場所です。環境に合わせて書き換えて下さい。

例えば kachi.mp3 と ok.mp3 の2つのファイルがあった場合、以下のように name に ファイル名を指定してJSファイルを読み込みます。

<script type="text/javascript" src="sound.js?name=kachi.mp3"></script>
<script type="text/javascript" src="sound.js?name=ok.mp3"></script>

その後、JavaScriptから任意の場所で playSound(‘kachi.mp3’) や playSound(‘ok.mp3’) と呼べば、それぞれの音が鳴ります！

3ファイル以上の場合も、同様の方法でscriptタグを追加すればOKです！！

便利！ヽ(´▽｀)ノﾜｰｲ

音鳴りました。単純にコードミスだったようです。

｡･ﾟ･(ﾉ∀`)･ﾟ･｡

以下コードを記述した上で、JavaScriptから任意の場所でplaySound()を呼べば音が鳴ります。

window.AudioContext = window.AudioContext || window.webkitAudioContext;
var g_audioContext = new AudioContext();
loadSound = function(url, fn) {
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.responseType = 'arraybuffer';
    // Decode asynchronously
    request.onload = function() {
        g_audioContext.decodeAudioData(request.response, function(buffer) {
            fn(buffer);
        });
    }
    request.send();
};
function playSoundBuffer(buffer) {
    var source = g_audioContext.createBufferSource();
    source.buffer = buffer;
    source.connect(g_audioContext.destination);
    source.start(0);
}
var g_soundBuffer = null;
loadSound('https://minnano.app/textmanga/assets/sound/kachi.mp3', function(buffer) {
    g_soundBuffer = buffer;
});
function playSound() {
    playSoundBuffer(g_soundBuffer);
}

mp3は絶対パスで指定しています。

‘https://minnano.app/textmanga/assets/sound/kachi.mp3’

の部分を変えて下さい。

しかし、これだと1種類の音しか鳴りませんね。いろんな音を鳴らしたいです。

｡･ﾟ･(ﾉ∀`)･ﾟ･｡

明日は、複数音源の場合の対応を考えようと思います。

今回はガワネイティブアプリで音の再生作業を行いました。

まずは、せっかくガワネイティブアプリなのでアプリ側での音の再生に挑戦しましたが、クライアント側のJSにより任意のタイミングで音を鳴らしたい場面が多々あり、またWeb側だと、Webへアクセスした後に音が鳴りずれるため、アプリ側での再生は諦めました。

そこで Web Audio API という、HTML5 でのサウンドライブラリを使うことにしました。新しいライブラリなのできっとより洗練されているのでしょう。

それで、JSによりmp3のファイル名を指定して簡単に音を鳴らせるメソッドを作ろうとました。が、webからは鳴るんですがアプリから使おうとすると何故か音がなりません。

ちゃんと音がなるコードが出来たら公開しようと思います。

今日は原因調査で終わってしまいました・・・

今日は各メニュー(1〜3)での登録/変更テストを行い、問題無いことを確認しました。

また、PCサイトで登録したメールアドレスを、アプリで”ID”として指定することで、PCサイトと共通のアカウントを使うことが出来る隠し機能を付けました。

便利。ヽ(´▽｀)ノﾜｲ

残作業は以下のたった２つだけです。

・ボタンやリンク押した時に音を出す
・秘密の作業

あれ？いつの間にか100日経ってた・・・

本命のアプリ作る前に、ちょっとだけテキスト漫画サイトをガワネイティブアプリ化する作業を行おうと思ったら、こっちがメインになってしまいました。

とは言ってももう一息で完成しそうです。今日は絵文字を入力すると正常動作しない箇所があるので対策をしました。

絵文字を入力可能とするには

・DB(MariaDB)の文字コード変更(utf8mb4に変更)
・JSの文字処理で”サロゲートペア”に対応する

の２つを行う必要があります。

しかし絵文字は各環境で同じものが出るわけではありません。iPhoneで入れた絵文字って、Androidで同じように出ないんですよ。知っていました？え？知ってる？まじで？

・・・

・・

・

やろうと思えば絵文字の対応は可能ですが、混乱を避けるため、泣く泣く入力出来ないよう、JSで以下のように入力禁止対応をしました。

function isContainSP(s) {
    for (var i = 0; i < s.length; i++) {
        var c = s.charCodeAt(i);
        if ((0xD800 <= c && c <= 0xDBFF) || (0xDC00 <= c && c <= 0xDFFF)) { 
            return true; 
        }
    }
    return false;
}

・・・

・・

・

え？手抜き？

いや、絵文字が各環境で異なるので、混乱を避けるためです・・・

まじで。

今日はID不正変更対策を行っていました。

今作っているガワネイティブアプリはユーザID変更機能があります。

ユーザIDを変更できる機能があるという事は、IDを試しまくって入力していればいつかは他人のIDでログインできてしまうという事です。この力任せの総当たり攻撃の不正をブルートフォースアタックといいます。

対策は１００億通りくらいありますが書ききれないです。しょうがないので３つくらいの対策を紹介します。

１．不正な入力があったら、その応答に時間をかける。あまりに長い時間待たせるとID変更しようとして単に間違えた人にも迷惑がかかるため、１、２回目の間違いは３秒くらい、３、４回以上間違えたら１０秒待たせるとか工夫すると良いです。
２．同一アクセス元から短時間に高頻度のアクセスがあったら遮断する。
３．後は・・・たぶんなんかあります。

テキスト漫画のガワネイティブアプリは、１の方法を採用し、対策を行いました。