2012-05-28
iPod touchの画面が割れてから、復活するまでの、主にメンタル面での消耗について。
出勤途中、新宿駅の構内で、iPod Touch落としました。
カバンについたケータイケースの、マジックテープの蓋が開き、地面に落下。
無残にも画面にヒビが入った。
さて困った。この頃までにはこの製品は、かなり大事なものになっていたから。
ゲーム、音楽制作、お絵かき、習字まで、たくさんのアプリを使っていた。
画面にヒビは入っているが、タッチ機能は生きている。
ちゃんとタッチの動作に画面が反応するのだ。
その週の週末、Apple Storeに行った。
まだ購入して一年経っていなかったし、自然故障であれば一年間は無償で修理してくれるはずであった。
しかし、結論は、有償による本体交換。
1万円ちょっとの費用で、新品の本体と交換する。
これしか方法が無い、とのこと。
本体データのバックアップをとっていなかったということもあり、いったんここで引き上げて、バックアップとってから、また来ます、
といってその日には交換をしなかった。
ちょっとの間、割れたまま使おうと決心した。
よくよく電車などでiPhoneいじってるひと見てみると、割れたまま使っている人も散見される。
そうだよなー、ちょっと高いから考えちゃうよなー。
一週間くらい、割れたまま使っていたのだが、すぐに耐えられなくなってきた。
その週末、家でバックアップをとり、再びApple Storeに足を運び、有償交換をした。
家に帰り、バックアップから復元してみた。
曲と写真はバックアップから完璧に復元できたようだ。
しかし、アプリが、初期状態になっており、自分で入れたものは一つも入っていない...
少し焦ったが、Apple Storeのアプリから、購入したものを再び、ダウンロードすることができた。
安心したのもつかの間、懸念はまだまだ湧いてくる。
せっかく作った曲、絵、ゲームデータが残っているのだろうか・・・
そして、ゲームのデータ、作曲アプリの作った曲データ、フォトレタッチソフトのデザインデータ、
これらはすべて、残っていたのだ！
これで全て元の通りになった。
結論、iPodTouchのデータ移し替えは、結構大変である。
大変というのは、作業がというよりは、メンタル面で、大変なのだ。
特にまず焦るのが、「バックアップデータから復旧」と操作しても、一発で完全に元通りになるというわけではないことに気づいたとき。
そして次に大きな心配は、アプリを再ダウンロードしても制作データが残っているのだろうか、
毎日やって進めたゲームの苦労が台無し、なんてことにならないだろうか、というもの。
けれど、アプリおよびアプリで作ったデータは、絶対消えてほしくないしっかり作り込んだものから、落書きのようなものまで、驚くほどしっかり残っており、復旧できる。
Google doodles'Robert Moog's 78th Birthday'
モーグ博士の誕生日、googleトップのdoodlesにアナログシンセの名機minimoogが登場した！
HTMLで書かれたこの楽器ガジェットは、ちゃんと弾けるし、つまみを回して音作りもできる！
鍵盤とつまみ、ホイールでしばらく遊んでいると、となりにオープンリールレコーダ型のがジェットがあることに気づく。
録音を押すと、Recボタンが赤くなり、オープンリールのテープが回りだした。
「...これはひょっとして...！」
ためしに演奏し、停止ボタンを押し、再生を押してみる。
案の定、演奏したデータが流れた。
このガジェットを知ってすぐに投稿したFacebookのリンクを張ったのだが、
録音も出来ることをコメント欄に書き込むと、大学の音楽サークルの後輩から
「こりゃスゴイですねぇ〜。録音してすぐリンクも張れるみたいですね。」
とのコメント。
リンク？
それらしい、チェーンのイラストが入ったボタンをクリックしてみる。
どうやらこのガジェットで録音した作品へのリンクが生成され、どこにでも貼り付けて聴かせることができるようである。
さらにその後、オープンリールデッキに描かれた、ピークレベルメーターが4つあることに気付き、
「ひょっとして、4トラックの多重録音が出来たりして」
と二つ目のピークレベルメーターをクリックして録音すると、前回の録音データが流れ、その上に演奏を重て録音することができた。
上記コメントをくれた後輩が数字キーで鍵盤になるというコメントをくれた。
Appleの作曲ソフトLogicでもこういう機能あったので実はキーボードのFからKあたりが鍵盤にならないか、試してみてはいたのだが、数字キーだったとは・・・
Web Audio APIというのもかなり標準化が進んでいることを確認。
この二年前の古旗さんの記事のブラウザピアノは、レイテンシーが高すぎて、鍵盤を押さえてから0.5秒後くらいに音が出るという、Windows95時代のVSC-88などを鳴らす感覚を思い出させるもので、実用性はまだまだだなーと思っていたのだが、このガジェットは低レイテンシーで、問題なくリアルタイム演奏が可能になっていると感じた。ブラウザ楽器ガジェトかなり興味が湧いている。
Googleの技術力があればもっと本物に近いクオリティや、もっと本格的な（例えばメトロノームを備えた）シーケンサーを搭載することもできたであろう。
しかし、Google doodleは、あくまで検索窓の「オマケ」なのだ。その立ち位置をわきまえた、チープとリッチの絶妙なさじ加減による、プロダクトデザイン。
そうだ、ここに焦点をあてなくては面白くない。
ネットの覇者Googleの、技術力とともに、企画力、プロデュース力にも驚き、興奮した、モーグ博士の誕生日であった。
まだ触ってないという方はこちらで実際に触ってみてください。
MOOG [DVD]
2012-05-25
hamlで要素を繰り返し(loop)出力したい
haml, Ruby on Rails, Ruby |
例えば、下記のようなhtml
<select> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <span>/ 5</span>
を、hamlizeするとき、
%select %option 1 %option 2 %option 3 %option 4 %option 5 %span / 5
だとちょっとしんどい。
何より、繰り返し処理をとことん嫌うRailsのポリシーに反する。
そんな場合は、普通にRubyの構文を使って、繰り返し（loop）処理が可能。
こんな感じ。
%select
- 1.upto(5) do |i|
%option #{i}
%span / 5
完成イメージ
2012-05-22
HTMLに、グリッドの入った立体的な地図を描画する方法について---css3,canvas,SVGによる方法を試してみる。
要は戦国系MMORPG等のブラウザゲームによくある、あの、碁盤状の地図を斜めから見た地図をHTML上にどう描くか、という需要があるようなないようなことについていろいろと調べたり試したりしたことを書こうと思います。
まず、地図の座標点を特定するアルゴリズムについてしばし考えた。
遠近法だから二つの消失点から測量して、、とか、
三角関数は絶対使うよな、、とか難しく考えてしまいがちだけど、
よく見ると…ひし形の集積でした。
ということで、遠近法も三角関数も要りません。加算と減算だけ。
あとはforループの入れ子で縦と横、ずらして縦横同じ回数だけ回してあげればよい。
1)地図を作りたい大きさの幅(width)と高さ(height)をとる。
2)widthとheightを、それぞれマス目の数*２の数で割り、それぞれをcellX,cellYとする。
この1)2)の作業でグリッドを作ってしまえば、あとは繰り返しの法則を見つけ出し、それを命令するだけ。
3)xは0,yはheight/2、つまり縦軸のちょうど真ん中と横軸は左端を始点とし、下記の法則で描画すれば均等に分割された菱形の座標が得られる。
(i=0; i<cellの数;i++){
( j=0;j<cellの数;j++){
左のx = cellX*(i+j);
左のy = halfY-cellY*(i-j);
上のx = cellX*(i+j+1);
上のy = halfY - cellY *(i-j+1);
右のx = cellX*(i+j+2);
右のy = halfY - cellY *(i-j);
下のx = cellX*(i+j+1);
下のy = halfY+cellY-cellY*(i-j);
}
}
次に、使用する技術について。
ブラウザのみで2dのグラフィックスの描画を実現する技術として今実用的なものとしてcss3, canvas, SVGがある。
ためしに全ての方法でデモを作ってみた。
css3で実装する
これが当然、一番簡単、軽量、お手軽で、ベストなソリューションということになる。
しかし、css3の実装状況がまちまちであり、使用可能なブラウザを選ぶので、その点だけ注意が必要だ。
canvasで実装する
画像もプラグインも不要なので、マップの描画のみであれば、一番簡単な方法かもしれない。
しかし、地図の番地をクリックしてどこか別のページに移動するとかが必要な場合（ほとんどの場合必要であろう）、
そのクリックを検知する仕組みをさらに実装する必要があり、少々面倒
（このバージョンはクリッカブルマップで実装しているが、あとはクリックイベントをリッスンし
そのcliantX,cliantYから判断するという方法もある）。
SVGで実装する
SVGはマークアップ言語（XML）で、描画したオブジェクトを通常のDOMのように扱えるので大変便利。
また、ベクター(線)でデータを持っているので、拡大しても劣化しないという点も、iPadなどマルチデバイス対応の点で有利。
難点はAndroid2.X系で実装されていないところ。この一点に尽きると言ってもいいと思う。
しかしこれから発売されるAndroid機はほとんどの場合Android4系となるので、いよいよSVGが本格的に普及する可能性が出てきたといえると思う。
ちなみに、canvasライクにSVGが使え（学習コストが低い）、しかもIE6までブラウザ対応してくれるというJavaScriptライブラリraphaelで作ったSVGは、各オブジェクトに固有のidがデフォルトで振られるよう。
2012-05-08
開発で使用しているツールたちをWiki的メディアで調べてみる
大手SI'er系Web制作会社からスタートアップ間もないオンラインゲーム制作会社に(レンタル)移籍して一ヶ月。
思えば社風も開発環境も全く違う環境で仕事をしております。
その辺りを頭の整理をしがてらまとめてみようかと思います。
【a群】
git（★）
Git（ギット）はプログラムなどのソースコード管理を行う分散型バージョン管理システム。
プラガブルなマージアルゴリズム。Gitでは不完全なマージに対する優れたモデル化が行われている。また、不完全なマージを補完するアルゴリズムも複数存在する。最終的に自動的なマージが行えなかった場合には、ユーザによる編集が必要である旨がユーザに通知される。
出典
http://ja.wikipedia.org/wiki/Git
gerrit（★）
Gerrit は Web ベースのコードレビューシステムです。Git を使ったプロジェクトのオンラインでのコードレビューを手助けします。
出典:
http://blog.twiwt.org/e/04c191
ソースコードのレビューはシステムの品質を高めるのに大切な作業だ。GoogleやVMWareでも使われており、ブラウザを使って差分を確認してコメントができるようになっている。
出典:
http://www.moongift.jp/2009/04/gerrit/
Jenkins（★）
Javaで作られた継続的インテグレーションツール。
出典:
http://d.hatena.ne.jp/keyword/Jenkins
「ビルドもテストもほとんど手作業でやってるから，よくミスがあるんだよね……」
そんな問題を解決する手助けをしてくれるのがJenkins。ビルド，テスト，さらにはデプロイまでを自動化してくれるJenkinsは，開発プロジェクトにおける頼もしいパートナーです
出典:
https://gihyo.jp/dp/ebook/2011/978-4-7741-4952-3
Pivotal Tracker（★）:
Pivotal Trackerは、シンプルな、ストーリーベースのプロジェクト計画づくりのためのツールです。
出典:
http://agile.esm.co.jp/pivotaltracker/help/gettingstarted_ja
出典:
http://ja.wikipedia.org/wiki/Vim
【b群】
Ruby（ルビー）は、まつもとゆきひろ（通称Matz）により開発されたオブジェクト指向スクリプト言語であり、従来Perlなどのスクリプト言語が用いられてきた領域でのオブジェクト指向プログラミングを実現する。
出典:
http://ja.wikipedia.org/wiki/Ruby
Ruby on Rails（ルビーオンレイルズ）はオープンソースのWebアプリケーションフレームワークである。RoRまたは単にRailsと呼ばれる。その名にも示されているようにRubyで書かれている。またModel View Controller(MVC)アーキテクチャに基づいて構築されている。
出典:
http://ja.wikipedia.org/wiki/Ruby_on_Rails
Make の Ruby 版のような位置づけなビルドプログラム（DSL）。Makefile に当たる Rakefile を Ruby で記述して、それに基づいたタスクを実行する。
出典:
2012-04-24
cssのzoomプロパティをfirefoxに適用させたい
あくまで対象ブラウザがIE8以上、FireFox,Chromeの場合の手段ですが。
cssのzoomプロパティって、Chromeでも有効なんですね。
IEの独自実装かと思っていました。
背景画像を敷いたdiv要素に
zoom: 0.75;
と指定すると、Chromeでも対象要素が75%に縮小されて表示されました。
しかし残念ながらFirefoxでは無効のようで、100%の大きさでブラウザに表示されました。
となると頼りになるのはcss3ということになります。
私の場合以下のように指定してあげることでfirefoxでもzoom: 0.75;と同様の効果を得ることができました。
zoom: 0.75; -moz-transform: scale(0.75,0.75) translate(-23px,-23px);
２行目〜４行目は,firefoxで、transformプロパティのscale(拡大縮小)をx方向に0.75倍、y方向に0.75倍し、
translate( 移動)をx方向に-23px,y方向に-23pxしてください、という指定です。
このようにcss3では「拡大・縮小する」「移動する」と二つの挙動を同時に指定することができますが、
各指定間はスペースまたは改行でつなぎます（カンマでない点に注意）。
css3はcanvasと違い、座標の始点(0,0)はエリアの中心になりますので、transformすると元の画像の中心に向かって変形します。
（canvasは左上が始点となります）
そのためtranslate(移動)で左上に戻してあげる必要があるというわけです。