D3.jsを使用したグラフ描画


D3.jsを使用してリリカルなのはに登場するキャラクターをグラフ化してみました。

ちなみにデータは独断で作成していますので、

  • あれ、〜が一覧にないけど?
  • 〜のネットワークが足りない。

といった場合があります。あと、Force関係は本を読み直さないと接続出来なそうでしたので、あまり接続されていません。

Twitterとかで情報を頂ければ対応したいところ…

以下のような画面となります。

キャラクターの有効・無効をボタンに割り当てているだけなので、頭の悪いUIです。

http://mizuvm01.cloudapp.net/gadgets/d3/nano_graph/index.html?jsdata=nano.json

nano_sgraph_01

nano_sgraph_02

.

circlecheckの機能拡張案(2)


circlecheckに編集機能を

妥当な権限設定はひとまず保留して、サークル毎にお品書きやお知らせを設定出来る機能を追加してみました。

norm サークル情報表示無効(通常表示)

cinfo サークル情報表示有効

サークル情報表示を有効にすると、サークル毎に設定されたお知らせ情報が表示されるようになります。

oauth_cc 認証はTwitterOAuth

ログインについてはTwitterOAuth認証で行います。

Twitterから通知されるuser_idとcirclecheckデータベースに保存されているuser_idとの照合により確認を行っているのですが、サークルとTwitterアカウント(screen_name)を正しく関連づける方法がなく、この方法では妥当性に欠けてしまっています。

circle_row ログイン後の画面

ログイン後にサークルとTwitterアカウントが紐付いていれば、編集ボタンが表示されます。コメントは1サークルあたり最大5件まで登録可能になっています。

ここに記載している項目は検索画面でも指定する事が出来るので、「お品書き」「新刊」といったキーワードで検索する事が出来ます。

やっとBackbone.jsCouchDBの恩恵が受けられた様な気がしてたり。

circlecheckに参加履歴を追加しました


circlecheckの機能の一つに、詳細表示(ボタン押すとダイアログが表示されるだけ)というのがあるのですが、あまり意味のある機能ではなかったので参加履歴を表示させるようにしました。

circlecheck_ss こんなかんじ。

circlecheckの機能上、古いイベントをチェックする機会はほとんどないため、どの日付のイベントであっても、表示されるのは最新5件となります。

CouchDBに保存された値でチャート描画


CouchDBを導入したので、NVD3によるチャート生成を行ってみました。

PixivDivの閲覧数表示

http://mizuvm01.cloudapp.net/gadgets/nano_chart/

nano_chart_ss 項目が多すぎるためか、所懐表示がずれる…

やっている事は、ピクシブ百科事典の項目毎に紀錄されている閲覧数を取り込み、結果をNVD3用に変換後、描画を行っています。

作成するのはかなり楽なのですが、頻繁な更新をかけるとCouchDBはすぐにデータベースのサイズが大きくなってしまいます。(誤った利用をしているためなのですけど)

サークルチェッカーを作成しました


2015年11月15日に開催予定の「COMITIA 114」向けのサークルチェッカーを作成しました。

EternalGarden

着せ替えアプリの試作(4)


着せ替えアプリで使用している描画ライブラリをCreateJSからPixi.jsに変更しました。

WebGLに対応しているブラウザ上ではかなり快適に動作するはずですが、古いブラウザでは動作しなくなってしまいました。

formcollage_v ヴィヴィオちゃん

formcollage_e アインハルトさん

 

circlecheckにイベントを追加しました


2015年10月03日に開催予定の「グルメコミックコンベンション #6」向けのcirclecheckを追加しました。

Web MIDI APIを使ってみました


現在ドラフトになっているWeb MIDI APIを使用してみました。

ドラフトではありますがChromeで使用可能になっているようなので試しにjavascriptからMIDI演奏出来るようなアプリを作成してみました。

https://mizunagikb.github.io/miz_music/

mizmusic こんな感じです。

作成したのはSMFを読み込んで再生するだけの単純なプレイヤーです。デバッグ機能を兼ねてD3.jsで演奏情報の描画を行っています。

Web MIDIを使用するには、はじめにrequestMIDIAccessを実行する必要があるのですが、システムエクスクルーシブを利用したい場合、以下の条件を満たす必要があります。

  1. 対象のウェブアプリケーションにhttpsでアクセスしている。
  2. requestMIDIAccess呼び出し時に、sysexをtrueにしている。
  3. 利用者がMIDIデバイスのフルコントロールを許可している。

1)

1に関してはhttpsが利用できる場所にアプリを配置するだけなのですが、環境によっては手間かもしれません。

自分のアプリはgithub上のweb page機能(githubで作成したリポジトリ毎にブランチをウェブページに見せることが出来ます。)を使用することで解決しています。

SysExは本体初期化やダンプデータを抜き出したり出来るため、利用条件を厳しくしているようです。

2)

2に関しては単に引数を渡すだけです。

3)

これは利用者側で有効にしてもらう必要があります。自分で使用する分には許可をすれば良いだけです。

chrome_mididevice ちなみにこんな画面です。

あとは普通にMIDIデータを送り込めば良いのですが、今回はRoland SoundCanvas for iOSを制御してみました。また、送信元がMacですので、以下の接続を試しました。

  • Thunderbolt + iRig MIDI 2 + UX16
  • Air Play

Air Playを使用するには、SoundCanvas for iOS側のMENUからAir Play / Bluetoothを有効にして、Mac側のAudio MIDI設定からMIDIスタジオを開き、ネットワークでiPhoneと接続をする事で利用可能です。Thunderboltを使用しない為、給電させながら演奏が出来て便利…かと思ったのですが、電波状況によって演奏が安定しない場合がありました。

プログラム作成にはTypeScriptを使用しています。今回は以下の様に分離してみました。

  • データ構造
  • データ読込処理
  • データ再生処理
  • データ表示処理(これはデバッグ用)

GitHubにソースコードを置いておきました。

https://github.com/MizunagiKB/miz_music

SoundCanvas for iOSを制御していて気になったこと

ノートオンメッセージ(0x90〜0x9F)を同じノート番号に送る(キーオンを二回送信する)と、次回以降のメッセージを正常に受け付けないようです。

普通に処理していれば、キーオンとキーオフはセットで処理されるのですが、キーオンだけの楽器(ドラムとか)や演奏途中で停止させた場合にキーオンだけの状態が発生する事があります。

そもそもキーオンを二回送るというのが良くないのですが、今回作成したプログラムでは、チャンネル毎のキーオン状態を保存しておき、再生停止時にキーオンしたままのノートにキーオフを送るようにしてみました。

なんとなく、自分の作成したプログラム側に問題がありそうですけど。

 

javascriptから加速度センサの情報を取得


せっかくiPhoneがあるので、加速度センサを使用してそれっぽいのを作ってみました。CreateJSを使用しています。

AndroidやWindowsPhone等では動作確認していませんので、動かないかもしれません。

http://mizuvm01.cloudapp.net/gadgets/nanoge/ss01/index.html

area_search ゲーム性はないです…

加速度センサを使用するアプリ開発は、加速度センサがない環境だと開発出来ないため、CreateJSのstagemousemoveイベントで擬似的に傾き(というか、今回の処理に必要な情報)を生成しています。

作成していて気付いたのですが、画面のロックをしていない状態だとセンサの情報と画面の向きが一致しなくなるため、動作がおかしくなるようです。

こういうのはどうすりゃいいんだろう…

 

着せ替えアプリの試作(2)


先日作成したCreateJSによる試作アプリをバージョンアップさせてみました。

http://mizuvm01.cloudapp.net/gadgets/form_collage/

IMG_0079 初代iPadでの動作例

単に色を塗っただけに見えますが、モデルデータと服データに階層構造をもたせて、それっぽい重ね合わせを実現しています。

ついでにiPhoneやiPadの縦横リサイズにも対応させてみました。

fig_01 こういう組み合わせです。

アインハルトさんの例だと、

  • BODY_BASEにキャラクター本体、BODY_BACKに髪の毛(後頭部)、BODY_FOREに右手
  • WEAR_BASEに長袖シャツ、WEAR_FOREに長袖の右腕部分
  • DROPに背景

といった感じで描画を行っています。(Photoshopのレイヤーなんかと同じです。)

前述したように複数画像を組み合わせて一つの画像として扱っているのですが、それぞれが別レイヤーに配置されているため、Containerによる結合が行えません。

そのため、今回は空のContainerを生成し、そこにhitAreaとマウスイベントを設定するようにし、割り当てたContainerのidをキーとする連想配列に構成画像を格納しています。

こうすることで

  1. hitAreaの領域がクリックされたことを検知。
  2. クリックされたContainerのidを調べる。
  3. ドラッグされた場合は、
    1. Containerの位置を更新。
    2. Containerのidを使用して連想配列から画像を取り出す。
    3. 画像の位置を更新する。

といった処理を実現しています。

また実画像とhitAreaを別に管理することで、

  • 判定処理以下のアルファ値の画像もクリック可能になる。
  • 体を動かすことは出来ないが、ツインテール部分はドラッグ可能という動作を実現しています。

着せ替えアプリの試作(1)


イラストの服装を考える時に便利かもしれないな…という事で、Twitterに投稿した絵の派生でアプリを作ってみました。

CIRW8x-UcAA97Te.jpg-orig これがネタ元

form:Collage

http://mizuvm01.cloudapp.net/gadgets/form_collage/

form_collage 操作にはマウスが必要です。(タッチパッド対応になりました)

着せ替え遊びを楽しむには、かなり寂しいボリュームですけど…

CreateJS(EaselJS + PreloadJS)で実装をしています。以下はTypeScriptから生成されたものになりますが、かなりの機能をCreateJS側で処理出来たため、かなり少ないコード量で実現できました。

これ以外の選択肢としてはenchant.jsD3.jsによる実装を考えていましたが、CreateJSは実現したい事と提供されている機能の相性が良かったため、正解だったかも。

やっている事はシンプルにCreateJSのマウスドラッグイベントで処理しているだけなのですが、CreateJSでは画像を対象とした際に、アルファ値を考慮した動作をしてくれます。

というわけで、自分よりも後ろの画像を消すのを兼ねてクリック可能領域を不透明に塗るだけです。

region 分かりやすく赤色にしてあります。

とまぁ、思わず作成してしまったのですが、着せ替え用のキャラクター画像って服を重ねる関係上、すこし細めに描いておいたほうが良さそうだって事がわかりました。

 

circlecheckにBingMapを追加しました


circlecheckをTypeScript化しながら、新しい機能を追加してみました。

あまり需要はなさそうですが、BingMapによる地図表示機能となります。

cc_bingmap BingMap対応。

機能を追加する過程で段々とメニュー周りが汚くなってしまいました。

TypeScriptをはじめました


VisualStudioやAtomを使用する事で、コード記述の生産性が上がりそうなのでTypeScriptをはじめてみました。

環境の構築自体は、node.jsを導入してから npm install -g typescript とするだけです。

導入されるとtscコマンドが使用できる様になるので、 tsc scriptfile.ts でbuild出来るようになります。

Atom用のコードハイライトを導入

自分はAtomを使用しているのでatom-typescriptを導入してみました。

インストールすると、

  • コードハイライト
  • オートコンプリート
  • セーブ時に自動的にbuild
  • build失敗時のエラーを表示

といったものが組み込まれます。

早速使ってみる

TypeScriptはjavascriptの言語仕様を拡張しているようなので、現状のjavascriptをそのまま移植してから徐々にTypeScript化して行くことが可能…なのですが、手始めに移植をしてみたcirclecheckでは、外部のjavascriptを使用している場所で問題が発生しました。

こんな感じでエラーに…

正攻法としては、それぞれのライブラリ用に定義ファイルを用意するのが良いのですが、TypeScriptのハンドブックを見ながらとりあえずエラーが起こらない様な定義を作成してみました。

エラーは出なくなったけど、なんとなく適当すぎな気がしてます。

というわけで、circlecheckのjavascript部分をhtmlから分離してみました。まだ分離しただけでTypeScriptの恩恵はあまり受けていませんが…

紀文の豆乳一覧をcirclecheck用にデータ化


circlecheckを他の目的に使用できないかどうかと思い、紀文の豆乳一覧をデータ化してみました。

現在販売中の豆乳飲料一覧のサークルチェッカー用データ

…いまいちでした。

D3.jsで年表らしきものを(2)


魔法少女リリカルなのはの年表らしき物を作ってみました。D3.js(Data-Driven Documents)の習作として作った物ですので、機能的な見た目はしょぼいです。

nano_history_ss02 データはたいしたことないです。

D3.jsは以前にも何度か使用しており、

といったものを作ったりしているのですが、もう少しデータと表示を関連づけられるようなものを…というわけで年表を作ってみることにしました。

ミッドチルダでは、「旧暦」と「新暦」という暦が使用されているため、そのままでは年表をプロットすることが出来ないため、便宜上なのはの物語が始まった時点を、西暦2005年(新暦65年)としています。

ちなみに、魔法少女リリカルなのはVividの放送が開始されました(これを書いている時点で1話目が放送完了)事で、魔法少女リリカルなのはに興味を持った方は、過去作品のネタバレが含まれますのでご注意を。

それっぽい感じになったので、GitHub上で公開してみました。

javascript (web)

魔法少女リリカルなのは Series Timeline

GitHub

master / gh-pages

 

D3.jsで年表らしきものを(1)


D3.jsを使用して、年表もどきを作成中…といいながら完成させる予定はないのですけど。

nano_history D3.jsで描画

以前からD3.jsを使用しているのですが、チャート以外の用途にあまり使用していないので、ちょっと変わった物を作成しようとおもい、着手してみました。まぁ、単なる年表なんですけど。

circlecheckerを追加しました


2015年4月15日に開催予定の歌姫庭園 #7 のサークルチェッカーを作成しました。

 

circlecheckを更新しました


実験的にcirclecheckをjQuery mobileでも実装してみました。

Twitter Bootstrapを使用した現行のバージョンでも、ほとんど問題にならなそうですけど、参加サークル数が多いイベントを表示すると画面上部のタブがかなりおかしな事になっていました。

というわけで、モバイル表示時は「配置」と書かれたボタンをクリックする事でサイドメニューの表示を行うようにしました。

モードの切替(単なるリンクですけど)は設定メニューから行えます。

ccs_01 いままでの表示(Twitter Bootstrap)

ccs_02 モバイルでの表示(jQuery mobile)

あの場面をゲーム化(無印なのは) #01


魔法少女リリカルなのは(第1期)のBlu-rayを観始めました。

まだ第3話までしか観ていないのですが、魔法を使う前に「リリカルマジカル〜」って唱えているのを知って、この頃はまだレイジングハートって魔法の杖だったんだなぁと思ったりして。

そんなわけで、第2話目の物語終盤の

神社で犬みたいなのに襲われちゃったけど、レイジングハートのプロテクションで完全ガードしちゃいました。

というシーンをゲーム風味にしようと思ったのですが犬が描けませんでしたので、謎の物体が上から振ってくるだけになっています。

プロテクションなのはちゃん

http://mizuvm01.cloudapp.net/gadgets/nanoge/02/index.html

nanoge_02

高得点をとっても何もありません、…どころか、リロードしないとリプレイ出来なかったりして。

作成には enchant.js を使ってみました。

 

サークルチェッカーに検索機能を追加しました


サークルチェッカーに検索機能を追加してみました。

  • 「たしか…『な』からはじまっていたような…」
  • 「〜さんのサークル名って何だっけ?」
  • 「サークル名はわかるけど配置場所どこだっけ?」

といった場合に役立つと思います。

動作としては、サークル名称とライター名を検索して、部分一致したものを表示しているだけなのですが、一文字入れる度にテーブルを書き換えるという、残念な処理を行っているためかなり重たいです。

また、文字は完全一致ですので、ひらがなとカタカナや半角全角は区別されます。

ss_cc 試しに「な」で検索してみたところ。

あったら便利かな…と思って追加してみました。

このプログラム(circlecheck)は MIT ライセンスとして公開しています。

このページへのリンクやツイートによる共有はご自由にどうぞ