超簡単に3DCGできるJavaScriptライブラリ作った - aike’s blog
ブラウザでWebGLが使えるようになって3DCGプログラミングはずいぶん身近なものになりました。と書いてるそばから違和感を感じるくらい生のWebGLをJavaScriptで書くのは敷居が高かったりします。できなくはないけど前提となる知識がかなり必要な感じ。 three.jsが登場したときは、これで普通に3DCGができるということで一気にひろまりました。とはいえ、それでもまだやることは多く、画面に四角い箱を表示する場合以下のようなプログラムを書くことになります。 ・シーンを作成 ・ライトを作成、位置と向きを設定、シーンに追加 ・カメラを作成、位置と向きを設定、シーンに追加 ・マテリアルを作成、色を指定 ・BoxGeometryを作成、サイズを指定 ・メッシュを作成、位置と向きを設定、シーンに追加 ・レンダラーを作成 ・レンダリングループ処理 これらのひとつでも間違えたりパラメーターが適切でな
全天球パノラマ動画を表示するJavaScriptライブラリ作った - aike’s blog
複数台のGoProを組み合わせて360度上も下も撮影できる動画カメラが一部で流行りつつあるようです。 こんなやつ。 http://home360.co.jp/freedom360.html http://freedom360.us/ 要はRICOH THETAの動画版なんですが、動画ということで機材の価格もだいぶ違うし、複数の動画を合成する作業もまだまだけっこう手間も時間もかかります。 そこまで頑張って動画を作っても、公開がまた大変です。フリーのスタンドアロンプレイヤーはありますが(これとか)、見る人にインストールさせるのはちょっと面倒だし、Flashで作られた全天球動画プレイヤーも良いものがいろいろあるものの、自由にダウンロードできて自分のサイトで手軽に使えるものは今はちょっとなさそうです。 そんなわけでJavaScriptのThree.jsを使ってさくっと全天球動画プレイヤーを作ってみ
不思議な円グラフを描くウェブサービス作ったよ - aike’s blog
最近ツイッター界隈で不思議な円グラフを見かけました。 こんなやつです。 ちょっと調べてみると昨年の報道番組からキャプチャした映像のようです。 このグラフを見て、その手があったか！という新鮮な驚きを感じました。これまでの円グラフの常識にとらわれず、円の中心からあえてずらした位置から分割することで飛躍的に表現の幅を向上させています。無味乾燥で機械的なグラフにくらべて製作者の強い思いがぐっと伝わってきます。なんとイノベーティブでなんとワンダーなグラフなのでしょう。 でも、このグラフ、実際に描こうと思うとけっこう面倒です。Excelのグラフ機能をみても中心点の位置をずらす方法はなさそうです。 そんなわけでゆがんだ円グラフを描くウェブサービスを作りました。 ワンダー・グラフ・ジェネレイター 項目の追加変更はもちろん、中心をずらしたり、楕円形にして項目を強調したりできます。円グラフの秘められた表現力を
エクスコムの情報流出はシステム設計というより業務設計がだめな件 - aike’s blog
そんなわけでクレジットカード再発行しました。そうです流出です。今年の3月にアメリカ行ったときに海外旅行者向けWiFiルーターレンタル業者を探してたらエクスコムが安かったので申し込みました。まさかこんなことになろうとは、という感じでくやしかったのでブログのネタにしてみました。 申し込みから返却まで経緯はこんな感じでした。 ■3月5日 申し込み エクスコムのウェブフォームから住所氏名とともにクレジットカード情報を入力して申し込んだら、こんな確認メールが返ってきました。一部省略、伏字にしています。 Subject: レンタルお申し込みありがとうございます Date: 5 Mar 2013 10:46:21 +0900 From: エクスコムグローバル株式会社 この度は、お申込みいただき、誠にありがとうございます。 ご利用に際しては、以下の注意事項をご確認ください。 （略） ━━━━━━━━━━━
JavaScriptにsleepを実装しようとして気づいたら新言語を作ってた話 - aike’s blog
あのですね、JavaScriptにsleep()とかwait()みたいなのってほしいじゃないですか。で、調べてみると標準にはなくて作れるには作れるけどブラウザ依存だったりビジーループだったりJava Applet併用だったりしてがっかりするじゃないですか。 ぼくは1年半くらい前に「竹内関数で音楽生成」っていうエントリーを書いたんですが、当然これをJavaScriptで計算しながら音を鳴らすページを作りたくなりますよね。ですよね。こう見えても昔はN88-BASICでCMD PLAYとかばりばり使ってたくちなんで、そのくらい簡単だと思うじゃないですか。そしたらもう当時はAudio APIも出たばかりで情報もすくなくてブラウザ依存で、しかもJavaScriptでsleepできないしふんだりけったりで最初の一歩も踏み出せない状態。 そんなわけでなんとか手はないかとこの1年以上ずっと試行錯誤してきて
プログラマーが知っておくべきうつ病の知識 - aike’s blog
少し前にITproにプログラマーは「こころの病」にかかる比率が高いという記事が載っていましたが、あらためて言われるまでもなくプログラマーがストレスで精神を病んで離脱するケースは自分の周りを見ても非常に多いです。こんな状況であればプログラマーに対する危険手当やプログラマー専用うつ保険とかあっても良いと思うのですがなかなか社会は変わらないようです。 このような状況に対抗するにはプログラマー自身が自衛のために知識を得ることだと思います。プログラマーの武器は知識であり、ハックする好奇心なのだから、あらかじめ十分な知識を身につけて不当なストレスに対して有利に戦いをすべきなのです。 １．判断力低下は想像以上に怖い うつで一番恐ろしいのは、気分が憂鬱になることではなく、判断力が低下することです。 判断力が落ちるとどうなるかと言うと、自分が健康なのかどうか判断できなくなり、仕事を休むべきなのかどうかで判断
VSTプラグイン作家のためのWeb Audio API入門 〜 adelayの作成 - aike’s blog
全国100人くらいのVSTプラグイン作家の方こんばんは。今日は皆さんおなじみのadelayのウェブブラウザバージョンを作ってみたいと思います。最近のウェブブラウザはAudio APIが急速に充実してきて簡単に音声信号処理ができるようになってきました。 adelayといえばVST 2.X SDKのサンプルコードとして大変なじみ深く、こんなシンプルなコードであのディレイが作れてしまうのかというインパクトもあり、プラグイン作家であればアルゴリズムをそらで暗唱できるくらい体に染み付いているかと思います。（←大げさ） 一方、Web Audio APIで用意されているDelayNodeは単に入力信号を遅延させて再生するものでDry/Wetのバランス設定やFeedbackもありません。ディレイプログラムはGainNodeなどと組み合わせて作ることが想定されているものと思いますが入門者が学習するにはちょっ
JavaScriptで正規表現練習ゲーム作った - aike’s blog
特に何か目的があるわけじゃないんですが、JavaScriptの練習のためにゲームを作ってみました。 Regex Of The Dead タイピングゲームのように正規表現を練習するためのシンプルなゲームです。ゾンビと一般人が迫ってくるのでゾンビの名前にだけマッチするように正規表現を入力して倒していきます。 HTML5の流れでオーディオ、グラフィック、フォントがHTML/JavaScriptで簡単に扱えるようになり、さらにenchant.jsのようなゲームエンジンも充実してきて、ゲームもJavaScriptだけで気軽に作れるようになってきたようです。 そんなわけで試しに書いてみたのがRegex Of The Deadです。プログラミングは長いことやっているもののゲームを作ったのは大学のとき以来かもしれません。 最初、何か良さそうなゲームエンジンがないものかいくつか調査しましたが、こういったタイ
WebMidiLinkがわずか40行でなしとげたとてつもないブレイクスルー - aike’s blog
3日前にg200kgさんが提案したWebMidiLinkという規格がすごすぎていまだに興奮がさめやらない感じ。DTMとWebの世界はいったいこれからどうなってしまうんだろうという気持ちです。 WebMidiLinkは、ひとことで言うと「MIDI over window.postMessage」というようなもので、とてもシンプルなアイデアながら、これまで多くの人が夢想してしかし誰もできなかったWeb楽器のアプリ間接続を実現してしまいました。 けっして複雑な手法ではなく、マスター側約20行、スレーブ側約20行の合計40行程度で誰でも実現できてしまいます。ブレイクスルーはすぐ目の前にあったのです。みんなが模索している中、とてもクレバーでクールな解決方法を提示しました。 Web楽器はまだ新しい技術です。これまでFlashベースやJava Appletベースの楽器アプリがそれなりの数ありましたが、去
竹内関数が音楽的に聴こえる理由について考えてみた - aike’s blog
前回のエントリーが予想以上に反響が大きくてびっくりしています。 プログラミング言語好きの僕にとってはヒーローみたいなすごいプログラマーたちにツイートしてもらってびびっていたところ、今日になって竹内先生ご本人からのコメントをいただいてしまって本気で腰抜かしそうになりました。せっかくなので自分なりに竹内関数が音楽的に聴こえる理由についての考えを書いてみます。 ■ちょっとした工夫 最初に少し種明かしをすると、より音楽的になるように以下のような工夫をしています。 ・ダイアトニックスケール（白鍵）だけを使用し調性の外れた音が出ないようにした ・最小値(-1)をレにわりあてることで少し寂しげなドリアンスケールにした （とはいえ-1の出現頻度が低いのでミからはじまるフリジアンスケール的かも） ・オートアルペジオ、テンポ、音色の設定でミニマルミュージック風にした 上記のことをおこなうと、ただの乱数でもわり
竹内関数で音楽生成 - aike’s blog
Lisperの人ならみんな知ってる竹内関数（たらいまわし関数）という関数があります。 定義としてはこんな感じ。 そのシンプルな定義からは想像もつかないほど複雑で膨大な再帰呼び出しがおこなわれるとても興味深い関数です。たとえば引数にTarai(10,5,0)を与えると343,073回も再帰呼び出しされたりします。 この関数呼び出しの引数がどのように変化するか知りたくてプログラムを書いて調べてみたところ、Tarai(10,5,0)の場合は3つの引数がそれぞれ0〜10（xは-1〜10）の間で少しずつ変化するなかで、2つの値を固定してひとつの値が下降していくような挙動があったりして、なんだか音楽の3和音のコード進行を思わせるような動き方です。 そういうことなら、ということで実際に音にして聴いてみました。Tarai関数が呼ばれるたびに引数のx、y、zを、0=ミ、1=ファ、2=ソ、……、のように音に割
十年前「はやぶさ」開発の現場を見ていた - aike’s blog
小惑星探査機はやぶさ帰還のインターネット中継を見た。あのMUSES-Cが本当に打ち上げられ、様々な困難を乗り越え、六十億キロもの想像を絶する距離を航行した後に地球に戻ってきた。わずかな時間ではあるけれどまわりを照らすほど明るく輝いて燃え尽きる映像を本当に感慨深い思いで見ていた。 十年以上前、ぼくは横浜に住んでいて人工衛星の開発現場にいた。宇宙開発とは言っても設計業務はデスクワークであり、一見普通の会社とあまり変わらない光景だ。製造や試験は関係者以外立ち入らない別の施設でおこなうため、オフィスでは主にPCに向かって文書を作成している。 そこにいる技術者はみんな宇宙が好きということでは共通しているものの、担当部署によって少しずつ特徴があったように思う。熱設計、構造設計の担当者は特殊技能を持っている職人のようだ。データセンターで大量のデータ解析をする地上設備の開発者はIT技術者に近い。品質管理部
理不尽との戦い方 - aike’s blog
社会人として仕事をしていると、いつか必ずどこかで理不尽にぶつかります。それはどんなに優良企業でも大会社でも中小企業でもかたちは違えど多かれ少なかれあると思います。 デスクのまわりの騒音や狭さがまともに働けるような状況になかったり、ありえないスケジュールが設定されたり、ものごとがとても納得できないような決まりかたをしたり、といった話はどこにでもあります。人間関係的なことでいうと、異様に責任の押し付けがうまい上司だとか、まるで子供じみた発想をする同僚、妄想のような策略をめぐらす古参社員など、ドラマや小説でさえ見たこともないような異形の人が世の中にはたくさんいることに気づかされたりします。大学などのつながりで自分でも気づかずに同じようなクラスタの人ばかり見てきた後に、就職した先で世代や文化の異なる人と接するとそのギャップにびっくりします。 自分も過去にそういった理不尽を多く経験してきました。まだ
JavaScriptでシンセとか作るとき用のGUIライブラリ作った - aike’s blog
ブラウザ(JavaScript)で動くシンセ的なアプリを作ろうと思うとGUIコントロールの便利なライブラリがなくてけっこう困ります。jQuery UIはわりと良いんだけど肝心のノブとかスイッチとかがなかったりするし。そんなわけでウェブ楽器のGUI作成に便利なjQuery UIっぽいJavaScriptライブラリを作成しました。 こんな感じでGUIコントロールを生成できます。 // 背景パネルの表示 $('<img />').panel({ id: 'panel', image: 'images/panel.jpg', left: 20, top: 20 }).appendTo('#draw'); // ノブの表示 $('<img />').knob({ id: 'knob01', image: 'images/knob.png', left: 100, top: 80, width: 85
Rubyでもっとも重要なライブラリは何か？PageRankで計算してみた - aike’s blog
最近、PageRankを計算するPHPソースコードを公開している人がいたので、Rubyで書き直してみました。 PHPからRubyへは移植というよりほとんど写経のような感じでそのままポーティングできます。 pagerank.rb #!/usr/bin/ruby # original PHP source http://phpir.com/pagerank-in-php def calculatePageRank(linkGraph, dampingFactor = 0.15) pageRank = Hash.new tempRank = Hash.new nodeCount = linkGraph.length linkGraph.each {|node, outbound| pageRank[node] = 1/nodeCount tempRank[node] = 0 } change =
Rails + Cicindelaでレコメンデーション付ウェブサイトの構築(2) - aike’s blog
目次 ユーザ認証付Railsアプリの構築 RailsアプリにCicindelaインタフェースを実装 ←いまここ Cicindelaの設定とバッチ処理設定 そんなわけで昨日作ったRuby on RailsアプリにCicindelaとのインタフェース機能をつけてみます。 Cicindelaインタフェース用クラスの作成 CicindelaはWeb APIが用意されており、アプリケーション側の実装言語に依存せずに利用できるので非常に便利です。今回のアプリの場合アクセスするタイミングは３ヶ所で、以下に例を示します。 (a) ユーザID100の人がアイテムID500のウェブページをブックマークしたとき http://localhost/cicindela/record?set=bookmark&op=insert_pick&user_id=100&item_id=500(b) ユーザID100の人
Rails + Cicindelaでレコメンデーション付ウェブサイトの構築(1) - aike’s blog
目次 ユーザ認証付Railsアプリの構築 ←いまここ RailsアプリにCicindelaインタフェースを実装 Cicindelaの設定とバッチ処理設定 先日Sapporo.rbで黙々と読書した成果として、Ruby on RailsのアプリにCicindelaのレコメンデーション機能をつけることができました。そんなわけで何回かに分けて説明していきます。 まずはRailsアプリを作ります。お題としてはソーシャルブックマークサービスにしてみます。ブックマークアプリはRailsの課題曲みたいなもので、慣れた人なら10分で作れます。今回はそれに加えてユーザごとにブックマークできるよう、ログイン認証などの機能拡張が必要になります。 完成版のソースコードはgithubにて公開しています。 Railsアプリケーションの作成 今回の環境としてはこんな感じです。 OS: Ubuntu 8.04 Ruby
Ruby1.9が入っていないと端末に「アナログ」と表示する.bashrc - aike’s blog
Ruby1.9がいよいよ安定してきたようで、そろそろ試さなくてはと思っています。でも、なんというか必要に迫られないのでなかなか全面的な導入に踏みきれません。 というわけで、Rubyを1.9にするよう促すプロンプト設定を考えました。Rubyのバージョンがまだ1.8の場合、端末の右上に「アナログ」と表示されます。どうぞご利用ください。 .bashrcの最後に以下の内容を書くと設定できます。 ruby -v | egrep '^ruby 1\.9' >/dev/null if [ $? -ne 0 ]; then PS1="\033[s\033[1;72H\033[37mアナログ\033[39m\033[u$PS1" fi ※Ruby1.9は旧バージョンと互換性のない機能が一部あります。導入には充分注意してください。
UbiquityはGoogle時代の実行操作検索システムだというお話 - aikeの日記
Ubiquityすごいっす。何がすごいかはこの辺を見てみて。これを見たとき、なんか最近こういうの増えてるなあって思った。思い出したのはTomblooとanything.elね。使ったこと無いけどMacのQuickSilverも同じようなものらしい。でも、これらを統合ランチャーとかマッシュアップツールとか言ってしまうと、なんかちょっとイメージが違う。実際に使ってみると分かるけど、それまでのPCの操作感をまったく変えてしまうほどのインパクトがある。なんというかGoogleが登場したときのような驚きなのだ。 これはいったいなんだろうと考えてみた。直感に従うとたぶんこれはある意味Googleなのだ。かつてGoogleは、精度の高い検索システムでインターネット上のあらゆるリソースへの距離感を変えてしまった。「あれが見たい」とか「これが知りたい」というケースにおいてはほぼ満足する答えに最短で到達できる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5でワードアートするJSライブラリ作った - aike’s blog
