-- --

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

09 29

無駄なタイピングをした話。

さて、無事バンドのサイトの公開が終わったわけですが、すぐに機能面での改善を思いつき、その旨ブログに書こうと下書きをしたためていたところでしたが、ちょいと風向きが変わりました。

まず何を改善しようと思ったかというと、サイト上で選曲をした時にXHR(ファイルを取って来て、というリクエストです)を飛ばしファイルのダウンロードが始まる、というところ。

曲を選ぶたびにXHRが飛び、そのたびユーザーに数メガバイトのダウンロードをさせるのは嫌だ、ブラウザに組み込まれているデータベース機能を上手く使えばダウンロードは最初の一回だけで済むじゃんね! という考えの元、コードをガリガリ書き換えていたのですが、実際のサイトの挙動はどうだったかというと...

「一度聴いた曲をもう一度選んだ時、ダウンロード時間は無い」ンですよね。

なんだこりゃ? というわけで教えて! ぐぐーる先生!!
検索バーには「XHR 2度目 ダウンロード」です。

するとどうでしょう、答えは...

キャッシュですよ皆様、キャッシュ。

一度ダウンロードしたものはブラウザがキャッシュとして残してくれて、次回以降はそのキャッシュを元に処理してくれるんですって! というわけで、2度目以降はユーザーが履歴クリアなどしていない限り、ダウンロードはしないんだと!

ちなみに毎回ダウンロードさせるには、コードのXHRの部分にちょいとコードを付け足せばいいだけです。どういう時にこれが必要かというと、刻々と変わるデータを扱いたい時など、古いものを参照されては困る場合。 

私の場合ですと、サイトの更新や音源の差し替えをしてもユーザー側にキャッシュが残っていれば、古いものが優先されることになるのかも。それが嫌なら毎回ダウンロードをさせればいいわけですが...まぁ今日日、履歴をいつまでも残してる人も少ないでしょうし、キャッシュのクリアなんて皆たびたびしているはず、毎回ダウンロードはやはり私のサイトでは必要ありません。

さて、このブラウザの便利機能によって、使い方が面倒で有名なブラウザ用データベース、indexedDBをいじくり回した時間が全くの無駄になったわけですが、別に構いません。

そのために書いた原稿が完全にボツでも全然構いません。

ボツ


そう、全ては素晴らしいユーザー体験のため。(チャンチャン)
スポンサーサイト

09 16

Web Audio APIで雨降りアプリを作った。

どうも、火頭です。

以前紹介した、神ウェブアプリ「レインマン」を公開しましたので宣伝します。

こちら↓
imrainman.com

3種類の音源をXHRでダウンロードし、Web Audio APIを使って再生、ボリュームや環境をコントロールできるという神アプリです。
ループ再生によって何時間でも雨降らせます。

実は近い内、音楽用のウェブサイトを公開する予定で、サーバー契約や事前に動作確認をしておきたいなと思い、ならついでにレインマンのドメインも取ってしまおう、んでそっちで動作確認をしたらいいや~ ということでこちらが先に公開になったのです。

なんでもやってみるもので、サーバーを使っての環境ではローカルと挙動が違うところがあり、XHR(Ajax通信)は今まで避けていた技術だけに勝手がわからず苦労ざんまいでした。

さらにローカルでの作業と違い、音源のファイルサイズがネックに。

Web Audio APIではwavファイルがとても速く処理出来るので、音源は全てwavにしていたのですが、サーバー使用での環境ではファイルをダウンロードするのに結構時間がかかることが判明(当たり前か)。

3種の音源を準備するので、3倍の時間がかかるわけですね。再生が始るまで3分とか、とても我慢できない時間でしたので、(田舎住まいの私は光回線ではないので、光ならもう少し速かったのかもしれません)音源は全てmp3に変更。

mp3にすると今度はWeb Audio API側の処理、decodeAudioDataという変換処理みたいなものに時間がかかります。ただしダウンロードに比べ、こちらは数秒程度の話でしたので、我慢することに。

Web Audio APIで気づいたこととしては...

・PCの設定と同じサンプルレートの音源の方がデコード処理が速いっぽい(ユーザーの大多数はデフォルトの44.1kHZ 16bitでしょう)。

・mp3のbpsは128でも192でもデコード処理の速度に大して変化なし。音質的に192bpsの方が安心。

・今回のような音量が均一の音源ではループ再生の繋ぎ目がどうしても気になる。ファイルを長くすると当然ループする頻度は落ちるのですが、ファイルサイズとの兼ね合いがあるので5分以上は避けたい。音源の方に短いフェードイン、フェードアウトをかけておくのが良いかも。

などです。

再生までの時間を早めたいのであれば、以前node.jsでトライしたストリーミング再生の機構が使えるか?と思ったのですが、今回のように複数の音源を扱うことは考えていなかったので、不採用。複数のファイルを平行してダウンロードし、それぞれをリアルタイムに組み立てていくのは私にはハードル高すぎます。

一つだけの音源を少しでも早く再生させたいなら使えそうですが、音源が一つなら結局ダウンロード時間も減るので今回はそこまで恩恵はないかと、音源が30分あるとかなら話は別ですが。

様々な苦労を経てサイトはどうにか動作し、ちゃっかりSNSボタンやアドセンスまで組み込んであります。

あとは大金が転がりこんでくるのを願うばかりです。

それでは良い雨を。


追記:
javascript関連は苦労してもまだ楽しいのですが、HTML&CSSは全然楽しくない。表示関係の挙動は本当に嫌いで、勉強する気もおきません。

あとライブラリは一切使っていないので、ブラウザ間の違いが完全に乗り越えられません。

クローム、Firefoxは動作確認済みです(キチンと更新されていれば)。たぶんIEでは動きません、動かす気もなし。

私は某アンドロイド系しゅまほ☆(スマホ)を使っているのですが、機体自体がWeb Audio APIに対応しておらず、動作しません。iOS系は対応しているはずですが、持っていないので実機確認は出来ません。たぶんサイトのレイアウトは崩れます。

というわけで、レインマンはデスクトップで雨を延々と降らせながら作業したい雨野朗に向けたアプリですので、そこんとこヨロシク。

レインマン
07 31

エブリデイ イズ ドシャ降り

( -ω-) ...梅雨が終わってしまった...

( -ω-)...毎日あっつい。

( -ω-) やる気でねぇ。

ずっと梅雨が続けば良かったのに...
あー雨ふらねぇかな...

( ゚ω゚)  !?

( ゚Д゚) ハゥアッ!

なら「レインマン」すればいいじゃない!
火頭さんの神ウェブアプリ「レインマン」すればいいじゃない!


はい、というわけで私が個人的に楽しむために作ったウェブアプリ「レインマン(非公開)」にまつわるお話です。

javascriptのWeb Audio APIを使って雨音をループ再生し続けるという神アプリですが、実は数ヶ月前に動作しなくなっているのを確認しました。 (元ネタはレイニームード Rainy Moodという雨音を再生するサイト様です)

クロスオリジン制約(クロスドメイン?)というのが原因だそうで、ローカルファイルのアクセスが不可とのことでした。↓コレ

rainman_error.png

これ私がAjaxの学習を断念する原因になったやつなんですよね。
かつてはこのエラーを回避すべく、別のやり方を模索しなんとか成功に辿り付いたのに、ブラウザのアップデートによって制限が追いついてしまった形になりました。

梅雨が終わって雨音が恋しくなってきたので修正することに。

いままでは音源を自動再生するようにしていたのですが、今回はFileApiを使うことにしました。これを使うとファイルを選ぶ手間が増えるのですが仕方ありません。

おなじみのこういうヤツ。↓

rainman_file.png

これで3つの音源を一斉に読み込むと、FileAPIiさんが下準備をしてくれます。
あとは再生ボタンで雨音を再生し、音量や環境など、自分好みのコントロールをするというだけ。

rainman.png

それぞれのスライダーで音量を調節できます。
一番下のRoom Environmentはお部屋で聴く雨の音をシミュレートするためにローパスフィルターを使いました。

さらに今回は一定期間で音量をランダムに変化させる機能を付けました。
普段は分数を指定しますが、下の動画では待ち時間をさけるため、5秒ごとに音量を変化させています。



この神アプリにて、私の梅雨は続行となりました。
03 31

赤黒木をがんばってみた。 javascript

こんにちは火頭です。

好きなメソッドは console.log()です。
ということでプログラミング関連のお話です。

赤黒木に魅せられたここ一ヶ月でした。
ルールを調べあげ、その複雑さに顔が赤黒くなりながらも、ようやくテストプログラムが完成しました。 

なぜ赤黒木かというと...いや自分でも全くわからないんですけど。

強いて言えば、
ルールを与えることで、自分でバランスを取り、頑なにデータを維持するその姿に、熟練の職人に通じる何かを感じたためでしょうか。(私が作ったテストプログラムはバグだらけで、データを簡単にロストするんですけど)

これを作ったからといって私の生活に何ら影響を与えないので、完全に趣味です。


まず赤黒木を知らない人のために簡単に説明します。

(Wikiより抜粋)
赤黒木(あかくろぎ)は、コンピュータ科学のデータ構造である平衡二分木の一種で、主に連想配列の実装に用いられている。 

赤黒木は、探索、挿入、削除などの操作における最悪時間計算量がO(log n) (nはツリーの要素数)と短く、複雑ではあるが実用的なデータ構造として知られている。


...だそうです。詳しく知りたい人は自分でググってもらいたいと思いますが、要はデータの格納や管理の仕方です。平衡二分木というものはこういう見た目をしています。↓
Binary_search_tree.png

例えば「6を探して」という命令を出した時、一番上にある「8」からチェックを開始して「6は8より小さい」→左へ→「6は3より大きい」→右へ→「6を発見」→ありましたよ。という具合に探索します。データが数万件とかの場合に、1、2、3、4、5、6…と探すより手間が省けるというお話です。

平衡二分木の一種である赤黒木、いざ制作に取り掛かったのは良いのですが、javascriptでの実装はコードが落ちてなくて他の言語のコードの意味を調べる必要が出てきてかなり大変でした。

さらに「回転」についての理解が甘かったり、葉はnullで扱っていたため「葉は黒である」という便利ルールを採用していないことになり例外処理を延々と書き続けるはめになったのです。

何はともあれ、とりあえず一段落しましたし、これ以上の実装は時間の問題ということで。

これから実装に挑戦する方は(よっぽどモノ好きだと思います)何よりルールをよぉ~く理解しておくことをおすすめします。

私はいきなり赤黒木から始めたのですが、2分探索木→AVL木→赤黒木 と順を追って学習しておくと効率が良いと思います。普通そうするでしょうけど。

特に気をつけることとして「左右の回転」。
回転の影響は、本人の「子世代~爺世代」までにおよびます。
私は「本人とその親」の視点だけに注目してたので、失敗が続きました。

「子の親を付け替える・爺の子を付け替える」これらを忘れるとエラーが出ると思います。これは意味上は「親の子をつけかえる・親の親をつけかえる」などと同じ意味になりますが、PCには関係ありません、きちんとプログラムに書いておかないと、関係がめちゃくちゃになります。

あとは挿入・削除の場合分け処理のときに、あるノードが木の内側なのか・外側なのかを調べる処理が必ず必要になります。親の右子の右子が黒だから外側で、その場合は親が爺に左回転で…等、頭がこんがらがるので、わかりやすくメモしておきましょう。

というわけで実際に画面を見ましょう。頭を左へ傾けながら見てください。RとBで赤と黒を表現しています。


1から順にループで数字を入れているので、やや右に傾いていますが、これでバランスがとれているということになります。
右と左どちら側から上に辿っても黒の数が同じということになります。(横には数えませんよ)

ここにノード(数字)を追加すると...

ほら


ほらぁ!!


数字の位置が移動して、できるだけ左右に均等に配置されるように、木が自動でバランスを取ります。なんと美しいことでしょう。

削除も同様、データを入れ替え、必要あればバランスを取ります。

こんな感じに。


制作はとても大変だったのですが、オブジェクト指向を考える良い機会になったかもしれません。アルゴリズムって素敵。

...
え?これが何の役に立つのかって?




02 06

プログラミング、はじめました。(そして終わりそう)

こんにちは、火頭です。

昔からプログラミングには多大な興味を示していた私ですが、今回はその辺のことを話題にします。

最近特にプログラミングが注目されていると思うんですよね、新聞やらネットニュースでよく見かけます。

学校にプログラミングの授業を!とか、
日本から次のザッカーバーグを!とか、
無料のプログラミング教室を開催!とか。

確かに快適な開発環境が整っていればユーザーはどんどん増えるでしょう。
現状、学習の基本である「ググりまくって自力で問題を克服していく」のは時間もかかるし解けないものは解けないし。

学校などの場で、ささっと問題を解決してくれる教師が身近にいればハードルはめちゃくちゃ低まると思います。プログラミング学習の初期においては、スムーズなスタートを切ることが何より大切。

そこで過去幾度となくプログラミングに苦汁を飲まされてきた、私の思い出~現在に触れてみたいと思います。 

学生時代、Max/MSPやSuperColliderといった音響系ソフトを少しだけ触りました。
基本、先生が用意したファイルの数値をいじって音の反応を見る程度のことだったので、プログラミング的にはノーカウント。
しかしこの経験が元になり、以前取りあげたPureDataを使ったパッチ制作に至った次第です。PureDataについて詳しくはこちらのエントリ
今となっては、SuperColliderは面白そうだけど新しい言語覚えるのが嫌だし、実用を考えるとMaxやPureDataが自分には合っているかと。

それから会社員時代に、なんとなくプログラミング勉強してみようかな、と思ったことがありましたが即挫折。
本を借りて学習を試みた気がしますが、Hello Worldの壁が雲より高かったようです。
どの言語を試そうとしたのかすら覚えていません(というより環境構築で投げ出したんじゃないかな)。

そして忘れてはいけないAppInventor(今はAppInventor2になったとか)。 
今は全く触っていません、てかPC変わって環境潰した。
このソフトが私の(比較的まともな)プログラミング経験のキッカケだったと感じています。

当時は一般的なプログラミング言語に対して全くの無知であったことから、
エラーが出た時の対応が出来なかったことを覚えています、なんで動かないの?としか言いようがなかったのです。

さらにAppInventorはアンドロイドアプリ制作のソフトにも関わらず、当時使用していたケータイがiPhoneであったことから実機テストが出来ず(エミュレーターはとっても不快適でした)一つ二つ試作のプログラムを作ってそのまま放ってしまいました。

当時AppInventor自体が新しかったので、色々と不便があったようですが現在も更新されているところを見ると、あの時続けていたら良かったと思うばかりです。

ちなみに最後に着手したのは、
「たわわに実れ!ミスオレンジ!!~目指すの?全米ナンバーワン~」というアプリです。コレ↓
missorange.gif
ユーザーが入力した文字に反応し、ミスオレンジを成長させて行くシーマン的なアプリを考えていたのですが...PC乗り換え時にめでたく制作中止。


そして最近ですが、数年越しでまたプログラミングの勉強を始めたんですよ。
今度はjavascriptです。

javascriptに行き着く前、またまたプログラミングやるかーっとなんとなく思い(何回目だこれ)適当に、java、 ruby、 php とフラフラ調べ回っていたのですが、やりたい事もなくイマイチのめり込めず。
以前見かけたウェブ技術学習サイトCodecademyにjavascriptのコースがあり、試しに触れてみたのが幸いでした。Codecademyは環境を揃える必要がなく、ブラウザでコーディング・結果の確認ができるのが素晴らしいですね。

とりあえずCodecademyのjavascriptコースを全て通しました。
正直同じような作業があったり、質問の意味が不明だったり結構大変なのですが、いざとなったら検索で答えが出てきますので、ご安心を。

後々気づいたのですが、Codecademyのプログラミングコースのうち、javascriptは内容が充実していて良いです。

ただこの決して短くないコースを全て終了しても、間違いなく「で?」ってなります。これで何をするのよ?ってね。

javascriptはHTML/CSSと組み合わせることがほとんどですので、その辺を最初に少し体験してから、Codecademyの内容にトライするのがおすすめ。
元々サイト作ったり、ブログの装飾を自分でしている人であれば、サイトにこんな動きがつけられる!ってことで意欲もわきやすいと思います。ウェブサイト制作の初心者にはHTML CSS javascriptの3つを扱うのは大変なので、一つ一つ学習して行った方が無難。
 
私はCodecademy学習後、HTML CSS javascriptの3つを扱った本を借りてきて、必要と思える箇所をコピーしたりしました。
 
私はHTML/CSS自体普段使わないので、色々と苦労しました、やはり学習は段階を踏むことが大切です。あと紙のものを手打ちでコピーすると必ず間違うんですよね、んで気づくのにめちゃくちゃ時間かかったり。 

ちなみにこの手の本は大体html5の機能を広く浅く学習する流れになっています。

DOM操作、audio/video、canvas、 webstorage、 Ajax通信など、これらの機能をjavascriptで操作するわけです。

自分はデータベース系はいらんなーとか、Ajaxはネット繋ぐの嫌だとか(実は家にネット環境がなく、テザリング生活です)、
jQueryもなんか気にいらんなーとか、そういうバイアスでどんどんページを飛ばすくらいでちょうどいいです(結局後から学習することになったりしますが)。現在もjQueryとAjaxは未学習。

さて、以下にjavascriptを使って作ったものを列記します。順不同。 

・web audio apiを使ったバンド用のプロフィールサイト(非公開)
音を扱うweb audio apiという機能を使っています。
ページを開くとバンドの音源が流れます(うざいですね)。メンバーの画像をクリックしたらその人が担当しているパートに音源がフォーカスします(他の楽器の音量下げ&ローパス通過でくぐもらせる)。プロフィールの詳細もクリックと連動して切り替わるといった具合。

・web audio apiを使った雨音をループで再生するパクリサイト
Rainy Moodというサイトを思い出して、コピーしました。
音源は3つ「雨音」「雨がピチャピチャと滴る系の音」「雷の音」を用意。 
それぞれ音量をコントロール出来るようにしました。さらにローパスフィルターを使って室内をシミュレートできるコントロールを実装。
これにより、雨の激しさ、お部屋で聞く雨の感じ、外で聞く雨など、お好みの環境が楽しめます。ループ再生なので何時間でも行けますが、ループの切れ目がスムーズじゃないようなので、改良の余地あり。

・indexedDBを使ったメモ帳的な何か
データベースです。コールバック関数というものに出くわした最初の難関、今でも苦手。
indexedDBは今後も可能性ありそうなので注目したいです。
概要は、メモを保存する「ストア」に名前をつけて新規作成(ファイルの新規作成みたいなもんです)ストアにメモ(文字列)を保存・表示・内容の上書き・消去が出来るといったもの。 
ちなみにこの学習にて、webstorageやらの怖さを知りました、ネットしてると勝手に色々保存されててなんか怖いんですけど...。

・node.jsを使ったチャットページ
サーバーサイドもjavascriptで出来る、ということでちょっと試してみました。ネット環境がないので作業はローカルですけど。
node jsを始めた時、上手くパスが通らなくてめちゃくちゃ苦労しました、環境設定をいじることで解決しましたのですが、無知な私にはハードルが高かったです。
チャットの仕組み自体はデモアプリが沢山ネットに転がっているので、それほど苦労はしませんでした。参加人数の制限やチャット内容の表示の方法だったり結構楽しみました。 

・node.jsを使った音源ストリーミングの仕組み
これは苦労しましたが、最近解決。これもsocket.ioです。
当初考えたのは、ページで選んだ音楽ファイルをサーバーにストリーミング送信→サーバーからブラウザへストリーミング受信→web audio apiでストリーミング再生でしたが、結局はサーバーに置いたファイルをストリーミング送信、順次再生、で満足しました。
ま、これが出来たらアップロードも大体同じだろ、ということで。

というより、音源の形式によって処理が大きく違うことに気づいたんですね、
バイトとかバッファとかエンディアンとかいうモノに精通する必要があるようで、
失敗するとガガーーピピーー!!と爆音が流れたりするので大変です、2週間くらい聴き続けましたからねコレ。

結局、バッファのノーマライズの仕方を試行錯誤している時に正解に当りました。
ここでノーマライズにやはり問題があったかと理解→別の形式ファイルで試すとまた爆音→ファイル形式に依存するの嫌だしそれぞれの形式に対応させるのもめんどい→作業終了。
socket.io界隈の開発は活発っぽいので、そのうち楽なストリーミング方法が編み出されると思います。

・canvasを使った幾何学描画的な何か
描画モノは全く興味なかったのですが、デモを見たらなにやら楽しそうだったので、ちょっとだけ触りました。
web audio apiと組み合わせて、オーディオに反応する背景(なんていうんでしたっけ?視覚効果?)あーいうの出来ると思います、web audio apiにアナライザがついているので。

あとは水族館的な鑑賞アプリを作ってみたい気がしますが、大変そう。


こんな所でしょうか、あとは細々した各機能テストみたいなものをしていました。
今回の一連の学習でようやく「あぁ俺プログラミングしている」という実感が出てきました。今後は、プログラミングについて最初から勉強しなおし、みたいなことはないと言い切れます、あーよかった。

最後に、
プログラミングはモチベーションの維持が大変です。作りたいものがないと学習が止まります。私もモチベーションは特に残っていないんですけど、また何か思いついたら作ろうと思います。

特にweb audio apiは音楽関連ってことで、今後も役に立ちそうです。


火頭

Author:火頭

火頭工房の中の人。 

ギター弾きます。
ゲームします。
お酒飲みます。

新ブログ


火頭工房のサイト

プロフィール
PR

Page Top
Powered by FC2 Blog | | Template Design by スタンダード・デザインラボ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。