読者です 読者をやめる 読者になる 読者になる

S.F. Page

Programming,Music,etc...

Youtube Data API - 再生リストのサムネイルとプレビュー

続いて再生リストのサムネイル表示に取り組んでみた。 再生リストのサムネイルとプレビュー 今回は動きを少し工夫してみた。 まずプレイリスト一覧表示する。 プレイリスト一覧のサムネイルをクリックするとプレイリストの中身をサムネイル表示する。 サムネ…

knockout.jsの勉強(2)

computed,options,foreachバインディングを試す。 ポケミク・シーケンサーのUIをknockout.jsベースにすべく、jsfiddleを使用して勉強中である。昨日今日とcomputed,options,foreachバインディングを試していた。WebMIDIを使用して入力MIDIイベントをフォーマ…

ポケミク・シーケンサーを作る(10)

ようやくゲートタイム調整機能ができた。。 ようやくピアノロールエディタのノートデータのゲートタイムを調整する機能が実装できた。まだエリア外にノートデータを移動したときの挙動とか未実装な部分は多いが。なんとなく技術的には実装しきれそうな気がし…

ポケミク・シーケンサーを作る(9) Shortcut (Hotkey)の実装

削除やコピペの実装に入るのだが、これを実現するにはコンテキスト・メニューとキーボード・ショートカットが欠かせない。コンテキストメニューの実装はなんとなく行けそうに思えるものの、キーボードショートカットはkeydown/keyupイベントを捕まえてキーコ…

ポケミク・シーケンサーを作る(8) 縦ピアノロールエディタの実装

じわじわ機能を実装中 縦ピアノロールエディタをじわじわ実装中である。今のところマウスでのノート挿入・移動が可能である。Undo/Redoもできる。挿入したノートを再生ボタンで鳴るようにした。というかこれはBugで鳴らなかっただけなのだが。 縦ピアノロー…

ポケミク・シーケンサーを作る(7) undo/redoの実装

はじめに 縦ピアノロールエディタという奇怪なUIを実装し始めたがまだまだ道のりは長い。 実装方法をある程度理解できていたはずのundo/redo機能にてこずっていた。ようやくできたけれども忘れたとき用にまとめておくことにする。 Undo/Redo機能の仕様など …

ポケミク・シーケンサーを作る(6)

挿入機能は一通りできたので、次はノートを移動する機能を実装している。ついでに移動をグリッド単位で移動できるようにコードを追加したり、挿入機能で書いたコードが移動でも使いまわしできそうなのでメソッドとしてまとめたりとか行っていた。ピアノロー…

ポケミク・シーケンサーを作る(5)

相変わらずのペースだが、ぼちぼちと実装を進めている。マウスでノート挿入する機能を実装してみているところである。何しろあまりUIを真剣に作りこんだことがないのでいろいろ躓きながら手戻りしながらである。少しずつしか進歩しない。 Undo/Redoもできる…

ポケミク・シーケンサーを作る(4)

今週もあまり成果はない。Undo/Redoをコントロールするオブジェクトを作ったり、レイアウトをデスクトップ専用にするためにCSSをいじったりしていた。画面上の変化ではタブでトラックを切り換えるようにできるようにしたくらいか。 Bootstrapのデフォルトテ…

ポケミク・シーケンサーを作る(3)

いつものとおりゆっくりと実装を進めていっている。今どうなっているかというとトラックのシーケンスデータを表示できるところまで。まだ完全な実装ではなく、とりあえず表示してみたレベルである。 縦ピアノロールというUIはおそらく音ゲーかプレイヤーくら…

ポケミク・シーケンサーを作る(2)

ようやくシーケンスエディターを作成しはじめた。エディター部分をどのように作ろうか1週間ほど考えていたが「Single Track DAW」サンプルに倣い、canvasを使ってUI部分を作ることにした。canvasは1-2年ほど前にいじって遊んでいたのでまあそんなにハマると…

ポケミク・シーケンサーを作る

ポケミク用シーケンサーをWeb MIDIでぼちぼち実装し始めている。ST/GTタイプを目指しているがひょっとすると縦ピアノロールタイプになるかもしれない。MIDIのシーケンサーのエンジン部分というのは音源は作らなくてもよいので比較的簡単に作れるのではないか…

Tumblrブラウザを作る(1)

node.jsの勉強用として作り始めたが、機能をクライアントサイドのjQueryにほぼ移行してしまったのでタイトルを変更した。 一番大きいブロックにに動画が表示された時だけ、YouTube Player APIを使ってプレーヤーを表示するようにしてみた。 ソースコード

node.jsをいじり始める(7) – 微改良

今日は微改良した。 画像表示の部分を表示ブロックの大きさに応じてサムネイルURLを切り換えるようにした。あとはカーソルキーの左右でコンテンツを移動できるようにした。 フォトセット表示はまだまだ改良が必要だ。

node.jsをいじり始める(6) - Tumblrのリンク投稿の内容表示

リンク投稿だと、以下の赤い四角の空白が開いてしまう。ここにリンク内容の一部分を表示したいなと考えている。 リンク内容の表示方法については以下の3つの方法を考えている。 iframeで表示する これが一番簡単で実際試したりしているのだが表示が重いし、i…

node.jsをいじり始める(5) - HTML5・CSS・jQueryを理解するうえで私がポイントと思ったところとか

Tumblrのポストを表示するためのページ作りを進めている。CSS・JQuery中心に実装を進めていて、node.jsどころではなくなっている。モダンなWeb技術に関する知識のない私が、Wordpressのテーマかスタマイズを始めてから今まで勉強してきた中でポイントだ!と…

node.jsをいじり始める(4)

まあぼちぼち作っている。下の画面をクリックすると作成中のサイトへ移動する。 node.jsの使い方はtumblrポストデータのプロキシっぽくなっている。操作はほどんとHTMLページ側で行っている。 「前へ」「次へ」をクリックすると画面内でコンテンツが移動する…

node.jsをいじり始める(3)

ここ2-3日はtumblrのデータを取得するモジュールを改良したり、expressでquerystringやcookieを扱う方法とかを調べたり、試したりしていた。 tumblrのデータを取得するモジュールは今のところ下記のとおり。 var http = require('http'); exports.getPosts =…

node.jsをいじり始める(2)

というわけで作り始めたのだが、いったい何がやりたいのかというとnode.jsでTumblrのAPIをつついて、オリジナルのビュー(ブログ)を作りたいのだ。Tumblrのカスタマイズ画面でも必要十分だとも思うけれど、かゆいところに手が届きそうで届かないのが不満な…

少しブログのレイアウトをいじった。

ウィジェットエリアにYoutubeのサムネイル表示スクリプトを組み込んでみた。これは昔サンプルを参考にしながら作ったもの。jQueryでなくても良いのだけど、メソッドの発動の部分だけ「$」で囲っていたりする。が、WordpressではjQueryの「$」は使えない。代…

jQuery、jQuery UIをアップデートした。

XMPlayerサンプルで使っているjQueryおよびjQueryUIを最新のものにアップデートした。 ソースコード XMPlayerへのリンク jQuery("#runXMPlayer20110925").click(function(){ window.open(this.href, "XMPlayer","width=550,height=610,resizable=no,scrollba…