サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
猛暑に注意を
www.aduca.org
About this Entry Rubyでファイル更新検知 was posted on 6月 19th, 2011 at 7.36am and is filed under Programming. This entry has no comments (yet). You can follow any responses through the RSS 2.0 Feed. Recent Post Rubyでファイル更新検知 Javascriptの開発手法について社内でプレゼンしました Javascriptが難しくてわからないので誰か教えてください Nerineを作り直したい話 新宿にて配信の記録 Category livestream non-category Programming thinking Meta ログイン 投稿の RSS コメントの RSS WordPress.o
わかった わかった 気になる わかった 気になる JS開発手法 わかった 気になる JS開発手法 ＼テッテレー／ アジェンダァ •「アップロード」？アホか！ •Makefileを書かないJSerは悪い奴だ •GCCって知ってるか •テストコードを書かないと死ぬ奴向け 1. アップロードとか 最初に言ったのは どこのどいつだ 1. アップロードとか 最初に言ったのは どこのどいつだ まず諸君らは JSを書く だろう 書かない人は 対象外なので ニコニコチャンネルで アニメをどうぞ そしたらそれを試しに動かしたい まずこういうソフトを起動する奴は いますぐ腹を切って死ね file:///.... みたいなURLを開く奴は いますぐ首を裂いて死ね せめて置換Proxyを使え！ http://coderepos.org/share/wiki/CocProxy •ファイル名マッチでローカルと置換 •ち
About this Entry Javascriptの開発手法について社内でプレゼンしました was posted on 5月 18th, 2011 at 1.23pm and is filed under Programming. This entry has no comments (yet). You can follow any responses through the RSS 2.0 Feed. Recent Post Javascriptの開発手法について社内でプレゼンしました Javascriptが難しくてわからないので誰か教えてください Nerineを作り直したい話 新宿にて配信の記録 機材購入 Category livestream non-category Programming thinking Meta ログイン 投稿の RSS コメントの RSS Wor
About this Entry Javascriptが難しくてわからないので誰か教えてください was posted on 5月 13th, 2011 at 7.02am and is filed under Programming. This entry has no comments (yet). You can follow any responses through the RSS 2.0 Feed. Recent Post Javascriptが難しくてわからないので誰か教えてください Nerineを作り直したい話 新宿にて配信の記録 機材購入 test Category livestream non-category Programming thinking Meta ログイン 投稿の RSS コメントの RSS WordPress.org 僕はプログラミングがまったく
散財しました。 ということで購入物リスト。 UA-4FX: 有名オーディオキャプチャー。PCに音を取り込む。 AT-PMX5P: ポータブルマルチミキサー。こいつにマイクやらを繋いで音をミキシングします。 ハンドマイクx2: スタンドも同時に購入。ハンドマイクなので少々カラオケっぽい音になるけど、MacBookProなどに最初から付いているマイクなんかよりは全然ノイズが少なくていい音です。 フォーン→ミニフォン変換: ミニフォンのオスとフォーンのオスのケーブル。こいつでiPhoneやら普通のPCやらからBGMをだしてやることができます。 (機材じゃないけど)TonePad Pro: iPhoneアプリのTonePadさん。テノリオン系のいわゆるオセロの升目みたいな所をON/OFFしてループ音を作るだけのアプリなのですが、配信の開始、ラストのBGMはこいつで作ってまかなっています。番組ごとの
なんか頭の色のおかしい人がNode.jsをやってたので真似して初めてみることにしましたが、特に作りたいものがありませんでした。残念です。 ということで、別にやることもないなら適当にやるかということでもぞもぞしてみたんですが、起動引数を取るのにproccess.argvでの配列しか今のところなく、目立った便利ライブラリもなさそうなのでちょっとうまいことしてくれるコードを書きました。 var optionParse = function(argv){ if(!argv){ argv = process.argv.slice(2); } var obj = {}; for(var i=0,l=argv.length; i<l; i++){ var option = argv[i]; if(!option.match('=')){ obj[option] = true; } else { opti
インストールはここから なにこれ ニコニコ動画のコメントの方式が変わったらしいので、それに対応した「自分が書いた歌詞とか流れてねーかな、というかいまどのへんよ」というのをみるツールです。 Firefox(+GreaseMonkey)、Safari、Google Chrome対応です。Operaはわかんない。 インストールして確認したい動画のWatchページに行くと、「184等を付けず、自分のユーザーIDを公開してつけたコメントの一覧」が出ます。 Snap コメント編集タブの中にこんな感じで出ます。左から順に「コメント番号」「最新から何番目(-NのNが大きいほど古い。-100で消える)」「動画内時間位置」「コマンド」「本文」です。 一番下に更新リンクがついていて、クリックすると更新する……はず。
なんだかスーツをびしっと着たかっこいい方が多かったのでぶるぶる震えながらの拙い発表でしたが、何かの参考になっていれば幸いです。 多分今までのプレゼンの中で最長だったのではないかしら。40分も喋ったのは初めてです。 そんな資料をアップしました。最近HTML5関係のコード書いてないからしゃきっとしないと……！ ニコニコ動画でのHTML5View more presentations from Sho KUSANO.
Name Mail address (will not be published) URI Remember personal info はい いいえ CommentYou can use some HTML tags for decorating. Add Your Comment Trackbacks:0 Trackback URL for this entry http://www.aduca.org/2010/12/java-ja-js2%e3%81%a7%e7%99%ba%e8%a1%a8%e3%81%97%e3%81%9f/trackback/ Listed below are links to weblogs that reference Java-ja.js#2で発表した from aduca
風のウワサでニコレポをうまいこと取得してくれるものがほしいと聞こえたので実装した。 まだ設定とかできないけど、そのうち出来るようになる予定。予定。 今できるのはChromeでニコニコ動画にログインしてあとは適当にブラウザをほっぽっておけばポップアップで最新のニコレポが出るぐらい。 更新がない場合最新の1件だけ出て、そうでない場合は複数個いっきに出るよ。 クリックしてもニコレポにジャンプしたりもありません。ごめんなさい〜。 インストールはGoogle Extentionsから。
Name Mail address (will not be published) URI Remember personal info はい いいえ CommentYou can use some HTML tags for decorating. Add Your Comment Trackbacks:0 Trackback URL for this entry http://www.aduca.org/2010/11/underhandedtrick/trackback/ Listed below are links to weblogs that reference 備忘録 from aduca
Apacheモジュールだけでイケることがわかったのでメモ SetEnvIf Origin "(.*\.aduca\.org)$" ALLOW_ORIGIN=$1 Header set Access-Control-Allow-Origin "${ALLOW_ORIGIN}e" env=ALLOW_ORIGIN Header set Access-Control-Allow-Credentials "true" env=ALLOW_ORIGIN これで基本的にはXHRを開放しつつ、Cookieの付与をさせられ、かつ他サイトからはそれが出来ないように出来る。 いじりたい場合はSetEnvIfの括弧の中を正規表現で編集すればOK
iPadを相手にする。と考えれば案外いろいろな制約を考えずに済む。CSSを書くときに一番面倒なのは複数のブラウザを相手にすることだからだ。(viewportとかいう実に厄介な概念がなければよりよい) んでそんな時に心に留めておくとそこそこ便利tips nth-childとか使える :nth-child(even)とかすれば、偶数・奇数でわざわざ邪魔なクラスを付与する必要が無くなる。実によい。 今時の携帯回線網がどれだけ速いのかもよく知らないのであれだけど、とりあえず昔携帯サイトとか覚えてた頃は転送量に気を使いまくって、無駄な空白の一切を削除とかしていたので、無駄なクラス名が増えるのは悪いことではなかろう。 その他、CSS3とかのオプションは案外使えるので、がんがん使うとよい。 -webkitを付けないとダメなプロパティがいくつかある border-radiusとか、最近webkitブラウザ
みた限り3Dコンテンツだと俄然Flashが速い。当然か。 案外当然でもないかもしれない。Android端末の3Dであの速度なら「まったく予測の範疇」だけど、Flashのパフォーマンスはそのはるか上を行った。 もちろん、コード自体が出てこない限り大した検証にもならないし、へーほーふーんぐらいのモノでしかないけど、実際に僕が似たようなサンプルを用意してもこうなるんではないかな。 ちなみにCanvasは重くて当然！というのはおかしくて、僕が記憶している限りではOpenGLのAPIそのままみたいなレベルで叩けるはずだから、Flashの速度を見るに、もっと速くても不思議でない。
さて、まぁなんとかかんとか仕事の方も上手いことリリースできた訳だけれど。 世の中でHTML5というワードが流行りまくっている。恐ろしいくらいのレベルで。 例えるなら戦中の日本の「鬼畜米帝」なり、小学生時代の可愛げの残る淫語なり。 まぁそのくらい流行っている。 しかし、我々(Webデベロッパ)が求められているのは、新技術ではない。というのを念頭において、考えて欲しい。 めんどくさい Flash playerの普及率がどの程度だったか、失念したが。まぁ大体体感値でパーソナルコンピュータを抱えていれば99.9%ぐらいだろう。OSバインディングされていても不思議ではないレベルで普及している。 これはほぼほぼブラウザの普及率に近い。あくまでもIEではない。ブラウザだ。世の中、星の数ほどブラウザはあれど、現実問題としてFlashのプラグインの無いブラウザは実用に耐えないだろう。 それはpngを表示出来
今日は右京くんに頼まれたのでアコーディオンエフェクトをHTML5とCSS3で実装する。 基本的なDOM構造はこんなもの、 - body `- section#accordion |- section | |- h2 | `- p |- section | `- ... |- section | `- ... `- section `- ... んでこれらにエフェクトを与えるのだけれど、その前にとりあえず現物のサンプル。 CSS Accordion CSSなどのコードもすべてこのHTML一枚にかいてあります。(Firefoxでも動くみたいだけどWebkit系ブラウザが一番綺麗にアニメーションします) hoverの関係 最下層のsection上にポインタがある場合、その親要素にも:hoverが付く。 これを利用しないと、単純に:not(:hover)してしまうと、普通の状態(ポインタが一切ない
なんか前のエントリが僕の頭の悪さを露呈しまくっていてよくない感じだったのできちんと書き直すことにした。 withCredentailsの概要 ようするに var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://www.nicovideo.jp/'); xhr.withCredentials = true; xhr.send(); とすると、www.nicovideo.jpドメインに自分の持っているwww.nicovideo.jpドメインのCookieがついた状態でGETリクエストが飛ぶという話。 嫌な話 将来的にどうなるのか一切わかんないんだけど、まぁ要するにニコニコの外部プレーヤーって、ログイン済みだとエコノミーじゃなくて普通の動画リソースを返してくれたりするのです。プレミアムだったら高画質とか。 んで、そのためにはCookieが必
XHR Lv2、俗に言うCross-Domain-XML-HTTP-Requestの話。 前に書いたエントリの通り、withCredentialを付ければCookie情報を付加して通信を行うことができる。 var xhr = new XMLHttpRequest(); xhr.open("GET", "http://other.domain.com/"); xhr.withCredential = true; xhr.send(); という具合にだ。 んでこれに対してサーバーは以下のようなHTTPヘッダを返す必要がある。 Access-Control-Allow-Origin: http://www.domain.com Access-Control-Allow-Credential: true この場合だとwww.domain.comからしか通信は不可能になり、それ以外のドメイン以下の場
Safariのみしか検証してないけど。 XHR Lv2でクロスドメイン通信が出来るようになった。 コード的には var xhr = new XMLHttpRequest(); xhr.open('http://other.domain.com/example'); xhr.send(); みたいにするのだけれど、これでアクセスすると、例えばmain.domain.comからつないだとき、.domain.comで登録されているCookieが送信されない。 .domain.comでセッションクッキーを置いておいて、他のドメインにコンテンツを置き、そのセッションのクッキーだけを食わせるというのは結構あると思うのだけれど、それをするためには xhr.withCredentials = true; のようにしないといけない。んでここからがハマるところで、 Access-Conrtol-Allow-D
iPadの上限は未実施。 だいたいここの通りでいけるんだけど、まぁ自分用のまとめ。 ビットレートは1500kbps以下。これは全体ではなく動画オンリーであることに注意。音声ビットレートの上限はみてない。128kbpsは大丈夫だった。 フレームレートは30fpsが上限。ソレ以上の動画ファイルを持っていないので試してないけど。 縦横は640×480が上限。どちらも最大値。アスペクト比は1:1推奨？なのかな。よくわからない。 Profileは今のところBaselineでしか再生試してない。Highはとりあえずダメだった。 一応ビットレートを限界突破する方法として、MPEG ２とかでエンコードするっていう手法はあるんだけど、あの小さい画面で2Mbpsとか出してもどうしようもないと思う。回線圧迫するだけじゃないかな。
HTML5でプレゼンテーションするツール、Nerineを公開した。 Nerineで目指していることとか、ぱっと見ではわかんない機能とかをとりあえず解説しておきたい。解説しておけば誰かが直してくれるかもしれないし。 なんなのか NerineはS6みたいなものを目指してはいるものの、S6と同じにならないようにしている。例えばS6だとページごとのエフェクトをJSとして書き入れることで、多種多様なエフェクトが使えるのだけれど、Nerineはそういうことが出来ないし、今後もサポートするつもりがない。 Petal NerineでいうところのEffectというのは、CSSによって定義されたエフェクトになる。これらを僕はPetalと呼んでいて、Nerine本体オンリーだとかなり質素なプレゼンテーションツールなのだけれど(これは意図的で、ネリネの花言葉である簡素に由来する)、Petalを追加することで、そこ
Simple HTML5 Presentation Tool About Download Usage Petal About HTMLで手軽にスライドが作れたら楽なのにというものぐさな気分から生まれた、出来る限り綺麗なHTMLの書けるHTMLプレゼンテーションツールです。 デモ / ちょっとカッコつけたデモ How to use Downloadから、ファイルセットをダウンロード アーカイブを展開 example.htmlを参考にしながら、ぽちぽち書く CSSでお好きな見た目をつける(Effect PetalはPetalから) 推敲する 3に戻る Requirement jQuery Safari / Google Chrome / Firefox License どれならいいのかわかりませんが、GPLだと思います！ Download stable: Zip Archive develo
IE9はネットブックでも快適にMP4が再生可能 <video> tag support in fullscreen mode... OS 4.0からブラウザ内での再生が可能に but... ビットレート及び画面サイズに制限がある Seesaw game H.264 or Theora H.264 Theora 多数決によって決定されるならH.264 しかしMozillaの言い分も間違いではない VP8 まだまだわからない We don't have time for worry Youtube, Vimeo, CNN and Flickr support HTML5 video Hurry Hurry Hurry!! ... be cool ... to be continued Cost Realistic solution Ideal support all browser and p
HTML5で何か出来ないか考えた結果、フランちゃんとうふふ出来ました。 BMS(だっけ)形式の音ゲーの譜をJSONに変換して食わせてます。タイミングはなるべく音と同期するように作ったけど微妙に速い気がする。ところで僕は音ゲーが苦手なので必死で頑張っても70%で限界です。しかももとの譜は9キーなので実質クリア出来ていない。 まぁそんなこんなで、フランちゃんうふふ。 いつも通りSafariもしくはWebkitレンダラしか想定してません。Firefoxってばmp3再生出来ないんだもん。 変換元BMS : http://touhoubms.blog66.fc2.com/blog-entry-64.html 背景絵 : http://www.pixiv.net/member_illust.php?mode=medium&illust_id=10189036
またHTML5。 今度はvideo要素の再生速度を変えてみる。 再生速度を速くすると音が高くなってうんことかを心配したけれど、そんなこともなかったです。大勝利ですね。 サンプルはこちらにおいてありますのでどうぞ。いつもの話ですが、動画再生なのでマシンスペックを食います。ご容赦ください。 動画は例によってvimeoから拝借してきました。Thank you Tom and Matt!! コードはHTMLの中にあるだけで全部です。
HTML5のvideoとcanvasで遊んでみる。 やることはごくごく単純で、videoを再生しながら、videoをソースにcanvasに描画、そのcanvasからbitmap配列をとってモノクロにしてもういっこのcanvasに描画。というだけ。 問題はどう考えても書き方が悪いせいで感動的なほど重いってことです。 Google chrome, safari(多分)で動きます。 http://www.aduca.org/content/html5/video_and_canvas/ 動画はここから借りてきました。かっこいい。
HTML5のスマートフォン系の対応状況とか iPhone いわずと知れたiPhoneは現在mp4(H.264)のみ対応。 ただしブラウザ上で再生されるものではなく、タップするとQuickTimeが立ち上がって再生される仕様なので、日本の携帯などと対して変わらない。それに対してなんらかのエフェクトがかけられるとは思えない。 将来的にAppleが対応してくれる可能性がないわけではないし、iPadなどを見る限りそういう流れになってくれるのだろうか？ Android 現在実機では非対応だが、仕様などを見る限り将来的に対応する可能性あり。 ただin fullscreen modeとの但し書きがあるので、iPhoneと同じような実装になる可能性は多いにある。 iPhoneよりは対応の見込み大きいかもしれないな、と個人的に思っている。 むしろ まだPC用ブラウザでも対応されていないものの、もっとコーデッ
このページを最初にブックマークしてみませんか？
『Aduca — a dull canvas』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
