2月 2012 | 忘れたらググればいい

2012年2月25日土曜日

「ドッ ドッ ドリドリ ドドドド ドリランド」で遊ぶ

元ネタ

ドッ ドッ ドリドリ ドドドド ドリランド
ドッ ドッ ドリドリ ドドドド ドリランド ...
Chrome と Firefox でしか動きません.@mohayonaoさん作成.

音階で入力したい

こういうのはリズムを楽しむものだと思うけど,そこを無理矢理音階を奏でてみたい,と思うのが世の常.

「ドッ ドッ ドリドリ ドドドド ドリランド」のルール

ちゃんと明記されているわけじゃないけど,ソースを適当に眺めた感じ,たぶんこんなルール.

  • 「ド」「リ」「ラ」「ン」「ッ」が使える.「ッ」は休止.
  • 「ドッドッ」「ドッ」「ンド」「ドリランド」は特別.
  • "|" が入るとそれ以降はループ.
  • "+"が入ると再生速度が上がり,"-"が入ると再生速度が下がる.ただし,「ッ」の長さは不変?
  • 再生速度はデフォルトを1.0として,"+"や"-"1文字に対して0.1ずつ変化する.最低は0.5で最高は2.0.

ド+ド+ド+ド+ド+ド+ド+ド+ド+ド+」は,0.1ずつ再生速度が上がるので,音が高くなりつつ「ド」がどんどん短かくなる.

再生速度と音階の関係

一般的に,再生速度が上がると音の高さが上がり,下がると低くなる. 以下のサイトを参考にすれば,(音階の) 「ド」を1.0とすると,「レ」は1.122462048,「ミ」は1.25992105, 「ファ」は1.334839854,「ソ」は1.498307077,「ラ」は1.681792831,「シ」は1.887748625,一個上の「ド」は2になる.

 音程と再生速度の関係

最初は基底の「ド」を1.0にしようとしたんだけど,「ファ」がずれてて違和感があるので, 基底の「ド」を0.8とした.ちなみに,0.8を基準にすると,0.8→1,0.9→1.125,1.0→1.25,1.1→1.375,1.2→1.5,1.3→1.625,1.4→1.75,1.5→1.875,1.6→2.0となる. また,音階が上がるほど音が短くなっちゃうので,「ッ」を入れて長さを調節した.

これに基づき変換ルールを作成.

変換ルール (四分音符)

  • 「ド」→「--ドッ++」(0.8)
  • 「レ」→「-ドッッ+」(0.9)
  • 「ミ」→「ドッッ」(1.0)
  • 「ファ」→「+ドッッ-」(1.1)
  • 「ソ」→「++ドッッ--」(1.2)
  • 「ラ」→「+++ドッッ---」(1.3)
  • 「シ」→「+++++ドッッ-----」(1.5)
  • 「ドu」→「++++++ドッッ------」(1.6)

変換ルール (八分音符)

  • 「ド8」→「--ドッ++」(0.8)
  • 「レ8」→「-ドッ+」(0.9)
  • 「ミ8」→「ドッ」(1.0)
  • 「ファ8」→「+ドッ-」(1.1)
  • 「ソ8」→「++ドッ--」(1.2)
  • 「ラ8」→「+++ドッ---」(1.3)
  • 「シ8」→「+++++ドッ-----」(1.5)
  • 「ドu8」→「++++++ドッ------」(1.6)

休符

  • 「休」→「ッ」

このルールに基づくと,「ドレミファミレド休ミファソラソファミ休ド休ド休ド休ド休ドレミファミレド」は 「--ドッ++-ドッッ+ドッッ+ドッッ-ドッッ-ドッッ+--ドッ++ッドッッ+ドッッ-++ドッッ--+++ドッッ---++ドッッ--+ドッッ-ドッッッ--ドッ++ッ--ドッ++ッ--ドッ++ッ--ドッ++ッ--ドッ++-ドッッ+ドッッ+ドッッ-ドッッ-ドッッ+--ドッ++」に変換される.

dorimusic

以上の工程をjavascriptで作って遊んでた. 最近,githubのアカウントを作ったのでせっかくなので公開する.

fukubaya/dorimusic - GitHub
はじめてのプロジェクトだ…。

たいして長いコードじゃないので,ここにも貼れるけどね....

/*
 * dorimusic.js
 * 
 * Created by FUKUBAYASHI Yuichiro on 2012/02/25
 * Copyright (c) 2012, FUKUBAYASHI Yuichiro
 *
 * last update: <2012/02/25 20:54:26>
 */
DORIMUSIC = {      
  table : [
    ['ドu8','++++++ds------'],
    ['シ8','+++++ds-----'],
    ['ラ8','+++ds---'],
    ['ソ8','++ds--'],
    ['ファ8','+ds-'],
    ['ミ8','ds'],
    ['レ8','-ds+'],
    ['ド8','--ds++'],

    ['ドu','++++++dss------'],
    ['シ','+++++dss-----'],
    ['ラ','+++dss---'],
    ['ソ','++dss--'],
    ['ファ','+dss-'],
    ['ミ','dss'],
    ['レ','-dss+'],
    ['ド','--ds++'],
    
    ['休','s']
  ],

  replace_code : function(text,d) {
    var result = text, base=d;

    if(base != 'ド' && base != 'リ' && base != 'ラ' && base != 'ン' && base != 'ド'){
      base = 'ド';
    }

    for(var i=0;i -1){
      result = result.replace("+-","");          
    }
    while(result.indexOf("-+") > -1){
      result = result.replace("-+","");          
    }
    
    return result;
  }
};

一応「ド」以外にも「リ」「ラ」「ン」を使えたり,"++--" のような無意味な部分を取り除くようにしてある.

曲を作ってみた

きらきら星

ちょっとはましになったかな? http://t.co/Hh1lXtkL2012年2月25日 19:0 via Tweet Button

かえるのうた

むすんでひらいて

新曲をリリース.4分音符と8分音符に対応. | http://t.co/Fh4h6XcX2012年2月25日 19:51 via Tweet Button

大きなくりの木の下で

土曜日だと言うのにこんなネタだけで数時間遊んじゃたよ...

2012年2月7日火曜日

短縮URLを使ってiPhoneアプリ (もどき) をtwitterで配布する

dataスキームへのリンクを短縮URLに渡す

dataスキームを使ってアプリの内容を記述すれば,ローカルアプリをリンクに埋め込むことができる.

iPhone のルート検索ショートカット作成アプリをCSS対応+完全ローカル化 | 忘れたらググればいい

ということは,短縮URLの転送先をURLスキームにしてしまえば文字数制限のあるtwitter上でもアプリ配布できちゃうんじゃね? ということで調べてみた.

tinyURL以外はdataスキームそのままはできない

すでに調べている人がいて,tinyURL以外の短縮URLではdataスキームが登録できなかったり, 登録できても "http://" を勝手につけてしまうようになっている.

URL 短縮サービスで data スキームを短縮する (良い子はマネしちゃダメ) - 何にしても生っかじりの朴念仁

tinyURLはそのまま転送するが,文字数制限がある

そこでtinyURLでアプリを登録してみようとしたが,長すぎて無理だった. ちなみに画像埋め込みがないver.1.0は登録できた. → http://tinyurl.com/6wdjrvc

dataスキームそのままはあきらめて,文字数制限が長い短縮URLを使う

"http://" が頭に付加されてしまうが,文字数制限が長い短縮URLとして pixiv の p.tl を使う.

そこで… 数ある短縮URLサービスの中で、POSTメソッドを使っているサービスを見つけました。 Pix◯vが運営するp.◯lです。 URLの文字数が最大約32000文字のものまで短縮できるため、小さい画像であれば1つの短縮URLで十分間に合います。

URL短縮サービスを利用したオンラインストレージ | 自称プログラマーの備忘録

URL短縮サービス[p.tl] - pixiv

p.tlでもダメだった...

アイコンに使っているpngファイルがbase64エンコードで29KBもある上に2回出ててくるので全体で89KBにもなり,さすがに入りきらなかった. しょうがないので,完全ローカル化はあきらめる. アイコンの出現を1回減らして,アプリインストール時 (ホーム画面に追加する時) だけオンラインにする,という制限を加えた.

88613文字が16文字に!

減らしたバーションで短縮してみたら,できた! http://p.tl/Wxmz

開いたリンクの "http://" を消せばアプリが表示される...のだけれど, iPhoneのSafariのロケーションバーは選択しても,どうしてもURLの末尾にしかカーソルが合わず, 先頭に持っていくのは相当時間がかかる.

ここまで来たのに一手間増える...

結局,適当なテキストエディタに一旦コピーして,"http://" を消してからもう一回コピーしてSafariで開く,しか対応が思いつかなかった. 専用bookmarkletを用意する方法もあるだろうけど,それだとtwitterでの配布には向かない. せっかくここまで行けたので,なんとかならんかなぁ.

twitterで配布 (2012/02/08 追記)

twitterでiPhoneアプリもどきを配布してみる http://t.co/3ofYDmQy | 1.URLを開く http://t.co/8Xe15CWw 2.転送先のURLから "http://" を消して開く 3.表示された画面で"ホーム画面に追加"でインストール完了.2012年2月7日 4:37 via YoruFukurou

iPhone のルート検索ショートカット作成アプリをCSS対応+完全ローカル化

以前作ったアプリもどき

以前,Data URI スキームを使って,iPhone (iOS) のマップアプリのルート検索のショートカットをホーム画面に追加するアプリを作った.

iPhoneのホーム画面にルート検索のショートカットを追加するアプリもどきを作る | 忘れたらググればいい

CSSで見た目をよくする

以前公開したやつは,素のHTMLであんまりカッコよくなかったので,適当なCSSを使って見栄えをよくする. 適当に探すと,CSSでiPhoneネイティブアプリっぽく表示させることができるframeworkとして iWebKit というのを見つけたので使うことにした.

iWebKit | SnippetSpace

完全ローカル化

せっかくData URI スキームを使うことでローカル化できるので,完全ローカル化をさせたい. したがって,すべてをHTMLの中に埋め込む必要がある.

CSSとjavascriptは問題ない

CSSは<style></style>を,javascriptは<script></script>を使えば問題ない.



画像はbase64でエンコーティング

ネット上の画像をsrcで参照にしてしまうとオフラインでは画像が表示できない. したがって埋め込むためには,base64でエンコーディングして埋め込む. CSS上でもHTML上でもbase64でエンコーティングした画像は指定できる. なお,base64エンコーティングにはbase64コマンドを利用する.

% base64 images/arrow.png
iVBORw0KGgoAAAANSUhEUgAAAAgAAAAaCAMAAAC9z+0pAAAAA3NCSVQICAjb4U/gAAAAUVBMVEX///////+AgID///+AgID///+AgID///+AgID///+AgID///+AgID///+AgID///+AgID///+AgID///+AgID///+AgID///+AgID///+AgICXHOeoAAAAGXRSTlMAEREiIjMzRERVVXd3iIiqqru7zMzd3e7utIir7QAAAAlwSFlzAAAK8AAACvABQqw0mAAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNAay06AAAABiSURBVAhbdYxJFoAgDEMB51kGxfb+B7WmuIRNPi8/NS7MBi8wj4CT+amTaOq5W6h0vMv/a1ZNuOnfJH56bF1okcb6ScETDYCDKNdJNPXsJVQ62r5Dkosm3PhvIuUOW+sb5AsIAQis/N2LZQAAAABJRU5ErkJggg==
%


完成

このリンクをiPhoneで開くとアプリが表示される. そのままブックマークに登録する要領でホーム画面に追加すればインストール完了. 使い方は↑の記事参照.