投稿

2月, 2014の投稿を表示しています

Canvasを使ってWebアプリケーションを作った備忘録

イメージ
Canvasを使ったWebサービス「写真明るさ補正」を公開しました。
明るすぎる写真や暗すぎる写真の明度を調整できます。
補正機能はサーバに頼らず Canvas + JavaScript のみで構成されているため、補正の際に画像がサーバにアップロードされることはありません。



本サービスを作るにあたってCanvasを使用したわけですが、その際に起こったことやTIPSなどを備忘録としてまとめておきます。
Web上にあるCanvasの情報は、ゲームなどの用途が主なのか、触ってみた程度のレビューや表示までの手順は紹介記事が多く、私が今回欲しかった情報、特にピクセルデータを取り出して操作する方法の情報は十分とは言えませんでした。

Canvas画像が壊れる サイズの大きな画像(4608x3456ピクセル 約3.5MBのJPEG画像)を読みこませるとCanvasの画像データが壊れる問題が発生。
画像データが壊れる原因は、ChromeのCanvasなどの実験的アクセラレータでした。
以前、Chromeの非推奨な高速化を有効にしていたのを忘れていました。
アクセラレータを解除すると、大サイズ画像の表示が正常化しました。
思い出せばすぐ解決できましたが、実際には思い出すまで時間がかかってしまいました。

1MBを超える画像ファイルをダウンロードさせる 1MB以上の大きな画像ファイルをダウンロードさせる際、FireFoxでは問題なかったのですが、chromeではブラウザのタブがクラッシュしてしまいました。(タブが紫の停止表示になる)
原因を探すと、以下のような情報が。

「DataURI はファイルの中身を全て文字列に展開するというやや乱暴な方法であり、大きなファイルを扱うには向いていません。(試した限りでは、2MB 程度の DataURI で Chrome がクラッシュします: 図5)」(http://teikyo.tumblr.com/advent-2011-12-07)

「なお,canvas要素のサイズが大きくなるにつれて,データスキーム形式の文字列もそれに比例して長くなる.この時chromeにおいては長さが1MBを超えたhref属性を指定し,リンクを表示させようとした場合にブラウザがクラッシュするケースがあるので注意する.この問題が発生する場合は次のtoBlobを用いた方法を検討…

画像の輝度と彩度を変えるJavaScriptライブラリを公開しました(Canvas用)

イメージ
画像の輝度と彩度を変えるJavaScriptライブラリ JS-Image-Filters-ddn をGithubにて公開しました。
Github Pagesでデモを公開しています。
また、このライブラリを使用したWebサービス「写真明るさ補正」を公開しています。


ddnを作るにあたって、JavaScriptで画像をリサイズする JS-Image-Resizer をベースにさせていただきました。
メソッドのインターフェイスも JS-Image-Resizer に近いものにしました。
既に JS-Image-Resizer を使っている方は、使い方が理解しやすいかと思います。

まだ追加したい機能もあるのですが(ワーカースレッド実装・画像変換アルゴリズムの選択肢など)、JavaScriptで画像の輝度・彩度を操作するには十分かと思います。


使い方 詳しい使い方は、Githubで直接 JS-Image-Filters-ddn サンプルページのコードを見ていただければわかると思います。

大まかな流れとしては、
 ソース画像ファイル
 ->Imageオブジェクト
 ->Canvasハンドル+Canvasコンテキストハンドル
 ->ImageDate(縦横サイズ+ピクセル情報)
 ->ImageDateのdata配列(ピクセル情報)
と変換してから本ライブラリにピクセル情報を操作させて、
 ->変換済みdata(ピクセル情報)
 ->ImageDate(縦横サイズ+ピクセル情報)
 ->ImageDateをCanvasに描画
となります。

ここでは本ライブラリの引数について解説します。
例としてBrightness(輝度)を紹介していますが、Chroma(彩度) も基本的には同じです。

本機能のオブジェクトを作成 obj_brightness = new Brightness(
image.width, image.height, true, '', 0, true,
function(buffer){ cb_my_rewrite(buffer); });
引数: ソース画像のwidth, ソース画像のheight, ソース画像のアルファチャンネルの有無, 変換アルゴリズムの指定, 変換の重み付け, ワーカー使用の有…

jQuery UIのスライダーで操作中の変化を検出

イメージ
JavaScriptを使ったスライダーは、ライブラリにまとめられたものから生のJavaScriptまで数多くありますが、今回はjQuery UIのスライダを使用することにしました。


このスライダーは、yonchangeイベントを監視するだけでは操作中の変化を検出できません。マウスドラッグによる操作を終えてはじめてonchangeが発行されるため、ユーザの操作に動的に反応することができません。
そして、onchange以外を監視しているデモコードをあまり見かけません。

まず、jQuery UI公式ページのSliderデモおよび同デモのソースコードを参考にします。
デモコードの通りにしたところ、jQueryおよびjQuery UIを読み込むことができず「 $ is not defined. 」エラーに出会うことになってしまったので、Google APIから引っ張ってくるように書き換えました。

jQuery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
jQuery UI
<link rel="stylesheet"href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> (上記jQueryのバージョンは2014/01時点のものです)

また、初期値の設定などはこちらのサイト様で詳しく説明されています。下のサンプルを作る際、参考にさせていただきました。

jQuery UI公式デモでは「スライド中に変化があったとき値を取得する」機能を使用していません。
使う場合は、下記のデモコードのようにします。

なお、console.logの出力が見られるコンソールは、Firefox/Chromiumの場合、Ctrl+Shift+Iで出すこ…

ソースコードをWebページへ表示できるよう変換するWebサービスを公開

イメージ
ソースコードを表示可能なHTMLに変換するWebサービス「SSSH」を公開しました。
(Standalone Static Syntax Highlight builder の略です。)

SSSHを使うと、ソースコードを静的なHTMLに変換することができます。
ソースコードに含まれる、HTML特殊文字をタグに置きかえる。
タブ空白や半角空白が潰れないように置きかえる。
簡単なシンタックスハイライトを付けることもできる。 ソースコードを静的なHTMLとして出力するので、CodeMirrorSyntaxHighlighterのようにライブラリを読み込む必要はありません。


「Webサービス」というほど大げさなものではありませんが。
公開にはGithub Pagesを使用しています。

使い方 サイトに書いてあるとおり、必要なのは3ステップのみです。
・「ソースコード」にコードを貼る
・「プレビュー」「HTML」に結果が表示される
・「HTML」をコピーして、コードを表示したいページに貼り付ける


仕組み 興味のある方がいればお読みください。当然ながら、Githubのプロジェクトページに行けばコードは全文を公開しています。
一言で説明すると、上部のtextareaに入力されたテキストを、ゴリゴリと正規表現パースしているだけです。
いちおう、各部の解説としては、

・HTML特殊文字を変換
一部の文字はそのままではWebページで表示できないので単純置換。
特に "<>"など。(静的Webページなのでセキュリティはこの程度)

・半角空白とタブ空白を、表示およびコピーペーストできるようタグ付け
半角のHTML表現は何種類かある中から「&ensp;」(文字nと同じサイズ)を選択。
タブ空白は<span>で囲んで表示されるよう保護。ついでに文字コードによる表現の「&#x0009;」に変換。

・タグに色付け
"<>"で囲われた範囲はすべてタグ扱い。
 タグ内の予約語を色付け。(予約語は、ハードコーディングされている数単語のみ。)

・JavaScriptへの色付け。
"<script>"に囲われた範囲がJavaScript。
C系言語用関数 syntax_c_like…

Virtual MIDI Piano Keyboardを使う (Ubuntu 12.04)

イメージ
作曲およびその勉強を始めようと思ったのですが、音を覚えていない状態でMIDIシーケンサに入力するのは思った以上に難しいことが判明しました。
そこで、何らかのピアノをエミュレートするソフトウェアを導入して、作曲時に音を確認するのに使おうと考えました。


参考にしたのは以下のサイト様です。
「Ubuntu Weekly Recipe 第150回 MIDIとUbuntuの素敵な出会い(2)
ソフトウェアシンセサイザで演奏してみる
Ubuntuの音楽関係を検索すると、いつもgihyoのサイトに辿り着きます。


Virtual MIDI Piano Keyboard インストールはコマンド一発で終了です。
sudo apt-get install vmpk -y

Timidityを導入 VMPKが出力するMIDI情報で音を鳴らすために、Timidityを導入します。
sudo apt-get install timidity

起動してみる
timidity -iA

終了方法から遅延対策まですべてgihyo「ソフトウェアシンセサイザで演奏してみる 」記事のまま対処します。
音が出ることを確認するだけならば、「JACKサウンドサーバで使う場合」として紹介されているコマンドのオプションでtimidityを起動すれば、それで十分かと思います。

TimidityとVMPKを繋げる VMPKとTimidityを関連付けます。
これが終わると、
VMPK -> Timidity -> JACK -> ALSA -> サウンドデバイス
という流れでサウンドデバイスから音が出るようになります。



キーボードの割り当て キーボードのz〜mまでが、左側のド〜シの鍵に割り当てられています。a〜lまでが、鍵盤上の位置に対応するよう、飛ばし飛ばしの配置で黒鍵に対応。
キーボードのq〜pが、右側のド〜ソ〜ミまで対応しています。数字キーが、やはり黒鍵に対応。

Github PagesでちょっとしたWebサービスを公開した備忘録

イメージ
自分のブログを書くにあたってソースコードをハイライト表示に変換するスクリプトが欲しくなったのですが、使いやすいようJavaScriptで開発したので、ついでに公開することにしました。サーバーホスティングしてまで公開しようとは思っていなかったのですが、タイミングよく「Webアプリをいまどきの手法で爆速開発した — KaoriYa」様にて、Github Pagesなどを使えばWebサービスを簡単に公開できることを知ったので公開に踏み切った次第です。


公開したサービスはこちら。
SSSH -Standalone Static Syntax Highlight builder-
ソースコードをHTMLページに貼り付けられる形に変換します。
ついでにシンタックスハイライトする機能もあります(リリース時点ではHTMLのみハイライト可能)。

(2014/03追記)
さらにgitで公開している自作JavaScript画像処理ライブラリを使って、もうひとつサービスを公開しました。
写真明るさ加工」
は、ブラウザ上で画像の明度を調整できるWebサービスです。

結果的には、Github pages以前の問題で躓くなど、恥ずかしい箇所もあるのですが、同じようなミスで困る方が出ないよう、公開に踏み切った次第です。

gh-pagesブランチ作成とアップロード マスターブランチが存在する状態で、「gh-pages」ブランチを作成して切り替えます。
branch gh-pages
git checkout gh-pages

Githubで、空のリポジトリを作成します。

「 git remote add origin 」コマンドを実行します。今回の作業では、ここで指定するURLを間違えてしまったため、下記コマンドにより設定変更して対処しました。
git remote set-url origin git@github.com:MichinariNukazawa/sssh-syntax-converter.git
確認のコマンド
git remote -v

Githubへアップロードします。
git push origin master
git push origin gh-pages
二度目のpushが必要なのかはよくわかりません。
以後、 git push のみで両方ブランチがGithubへアップロードされ…

USB2.0のハブを購入 Ubuntuでサウンドデバイスを繋ぐテストほか (U2H-SS4BF1BK)

イメージ
USB2.0のポートを増やそうと、USBハブを購入しました。
買ったのは U2H-SS4BF1BK です。

ついでにその他、あれこれ購入。


サウンドデバイスをタコ足配線して使ってみるテスト。
キーボードとペンタブレットを繋いだ状態の通常使用(?)ではまったく問題ありません。
さすがにサウンドデバイスを繋いでマイクで通話した時は音にノイズが入りました。具体的には、声は聞こえるけれどノイズが同じくらい乗って、実用は厳しいくらい。
ただし、ヘッドホンで音楽を聴くだけならば、気がつくような遅延もノイズもありませんでした。
また、当然ながら Ubuntu 12.04およびUbuntu14.04 で問題なく使用できました。

今回はバスパワーで取り回しのしやすい製品としてこれを選びました。
ACアダプタ付きの外部電源供給可能な製品は、これより少し高いようだというのも理由のひとつです。

USBのLANアダプタを購入 (UE100TX-G3)

イメージ
特にすぐ必要というわけではないのですが、USB接続のLANアダプタを購入しました。
購入したのは UE100TX-G3 です。


どこかで読んだ「原因の切り分けなどに便利だからLinux使いは一台持っておくべき」という助言に従い、以前に一度おなじものを買って持っていたのですが、大学卒業の際、後輩にあげてしまって、それから今まで代わりを買っていませんでした。
そういった事情ですので、
・安い
・あまり早くなくても良い
・素直に認識してくれること
がこの製品を選んだ理由になります。
この製品はUSB2.0の100base-Tなので遅いということはなく、普通に使うには十分だと思います。
また、WindowsとMacで挿してすぐ使えるということは、Linuxでも標準的なドライバで動く可能性が高いと考えられます。(そもそも以前、同じ製品を持っていたので、すでに動作確認済み。)

もちろん、(改めて) Ubuntu12.04 での動作も確認。
設定不要で問題なくインターネット接続することができました。
(なんとなく、USB3.0ポートに差してみましたが、当然問題ありません。)

どうやらAmazonにはもう少し安い製品も存在するようです…。
でも最初の一台は、秋葉原で一度だけ見かけた値段の700円で買いました。

Ubuntu 64bit環境で32bit Wineをビルドする (Ubuntu14.04 and 12.04)

イメージ
Ubuntu 64bit 環境で、 32bit Wineをビルドする手順です。
以前32bit Ubuntu環境でのWineビルド手順について書いた際に残した課題でした。

Ubuntu 12.04 上の Wine1.7.11 および、Ubuntu 14.04 上の Wine1.7.18 にて、ビルド成功を確認しています。


Ubuntu 64bit環境でのWineビルドは後回しにしていたのですが、ktmizugaki様の日記でchrootの手法によるWineのビルドにあっさり成功しているのを見た後で、lxcコンテナ版をやってみたところあっさり上手く行きました。
パッケージ版のWineは競合するのではないかと思っていたのですが、依存ライブラリを入れておくためにあえてインストールしておくというのも、たしかに理にかなっていると思いました。
閑話休題。

Wineの公式Wikiには64bit Wineをビルドする手順が3種類あり、(なぜか)3つもページが存在します。(そして1ページにつき1手順、という書き方ではない。)
しかし、2014/01時点で、Wikiに書かれているLXCを使った方法は、私の環境では上手く行きません。(原因は大したことではないのですが。2014/03/22追記。Wikiは修正されました。)

私が32bit Wineをビルドした際、上手く行った手順は以下の通りです。

LXCコンテナ(仮想マシン)の作成とログイン 64bit UbuntuでWineをビルドする方法は3種類あるようですが、今回は、LXCで32bit仮想マシン環境を作成し、そこで32bitビルドを行う方法を使います。

まず、LXCにて32bit Ubuntu仮想マシンを、ホームディレクトリを共有した状態で作成します。
作成と起動のコマンドは以下。
sudo lxc-create -t ubuntu -n my32bitbox -- --bindhome $LOGNAME -a i386
sudo lxc-start -n my32bitbox

なお、LXCコンテナの初回作成時には、パッケージのダウンロードなどで時間がかかります。
また、コンテナ起動時に要求されるユーザ名とパスワードですが、デフォルトではユーザ名・パスワード共に 'Ubuntu' になっているはずですが、私の環境では…

Ubuntu 12.04 で音楽制作を始める ( JACKサウンドサーバを動かすまでの手順)

イメージ
そろそろ音楽制作を始める決心がついたので、作曲初心者がUbuntu環境でDTMを始める方法を調べ始めました。


最初の課題は、最低限の作曲環境を構築すること。
これを、「打ち込むと、音が出る」状態と見定めました。
ようは「キーボードとマウスで、音が出せるようになれば、あとはなんとかなる」という方針です。

DAWにはRosegardenを採用 Rosegarden に決めました。

参考は
Ubuntu Weekly Recipe 第176回 Rosegardenで作曲する
後半の手順はほぼこちらの記事のままだったのですが、それ以前に必要となるJACKが起動しなかったので、独自に手を打ちました。


JACK (JACK Audio Connection Kit)から音を出す Rosegarden に限らず、Linux環境でDAWソフト(MIDIシーケンサー)からMIDIの音を出すのには、JACK サウンドサーバが必要となります。

デフォルトのUbuntu環境では、下記のいくつかの設定を行わないと、JACKを起動することができません。



JACKのD-Busエラーへの対処 D-Busエラーへの対処法は
Ubuntuフォーラム「QJackCtlの設定エラー」
に記載されていたのでそちらを設定。
qjackctlの設定項目で、D-Busのチェックボックスを外すだけなので、とてもお手軽でした。



PulseAudioが自動起動・自動再起動しない設定 デフォルト設定では、下記のコマンドでpulseaudioデーモンを停止させても、すぐ再起動してしまいます。
pulseaudio  --kill

なお、下記のコマンドで、pulseaudioのデーモンが動いていることを確認できます。
ps ax | grep pulse

PulseAudioの自動起動と自動再起動を無効にするには、設定ファイルを変更します。
sudo gedit /etc/pulse/client.conf

変更内容は以下の通り
; autospawn = yes
; daemon-binary = /usr/bin/pulseaudio
から、
autospawn = no
daemon-binary = /usr/true
へ書き換える。


PulseAudioをアンインストールするという解決策が紹介されていることが多いですが、…

リカバリ領域の削除と、インストールディスクが使えない場合の対処法 ( Windows7 )

イメージ
予約領域あるいはリカバリ領域を削除するにあたって、Windows7 のインストールディスクが使えなかった場合の代替手段を紹介します。



予約領域を消す
ノートPCにプリインストールされているWindows7の場合、リカバリ領域が100MBの予約領域に相当するパーティションであり、そのサイズは私のPCでは25GBもあります。
120GBのSSDを使っていることを考えると、25GBも使えないのはもったいないです。また、25GBもあれば、Ubuntuを入れるのに十分な領域を確保できます。
というわけで、予約領域を消すことにします。 作業自体は単純で、

・Windowsの修復オプションでブートローダーを再インストール
・別OSを使うか、Windowsのコマンドを使って、隠しパーティションを削除

という、たったの2工程です。
今回は、「Windows修復オプション」が使えないという問題に突き当たったため、その解決策を防備録として記事にしました。

インストールDVDが使えない Windows7x64のインストールディスクを入れたにもかかわらず、「このバージョンのシステム回復オプションは修復しようとするWindowsのバージョンと互換性がありません。このバージョンのWindowsと互換性のある回復ディスクを使用して下さい。」というメッセージが出て、修復オプションを使用できない場合があります。

このエラーが出る原因は多分、Windowsのサービスパックです。
もちろん、バグがあるという意味ではなくて、「サービスパックを適用したらOSは別バージョン扱い」ということです。
Windows(PC)を購入してからSP1が登場し、インターネット経由でアップデートを行った場合、インストールディスクとPC上のOSのバージョンが合わなくなり、この問題が発生するものと思われます。

この状態で、リカバリ領域削除を行うためのターミナルを呼び出す方法は2つあります。・Windowsが起動する状態ならば、F8キーでセーフモードのオプションから[コンピュータの修復」を選ぶ
・システム修復ディスクを作成する。(Windowsが既に起動しない状態でも使用可能だが、システム修復ディスク自体は動作するWindows上で作らなければならない。)


F8からシステム修復のコマンドプロンプトを実行 私が使ったのは、こちらの…

MiniDVD (80mm)を100円均一で見つけたので購入してみました

イメージ
サイズの小さいDVD ( MiniDVD 80mm 規格)を100円均一で見つけて、用途もないのについ購入してしまいました。
DVD-Rで、記録サイズは片面1.4GB (約30分)とのこと。1〜4倍速対応のTAIWAN製。
ビデオカメラ用 (当然、通常のデータ保存もできる) 。


日本語版WikipediaにもMiniDVDの記事はもありますが、英語版WikipediaのMiniDVDの記事には容量などの詳しい情報が記載されています。

ミニサイズのディスクといえば、西尾維新の零崎シリーズ(零崎双識の人間試験)に付いてきたカード型(しかも長方形!)のディスクを思い出します。あれには壁紙などが入っていました。



2014年現在、Amazonではまだ何種類か販売されているようです。
315円の製品が105円に値下げされて売られていましたし、もうそろそろ、80mmのDVDを使用するビデオカメラもほぼ引退したのではないかと思います。

このMiniDVD、かなりの個数が陳列されていました。何か用途が思いついたら、大量に購入したいと思うのですが。