Ubuntu忘備録: 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を用いた方法を検討すると良い．」(http://www.h2.dion.ne.jp/~defghi/canvasMemo/canvasMemo.htm#h11)

というわけで、dataURLを直接ダウンロードさせるのではなく、Blobに変換してからダウンロードさせるように変更することで、chromeでもダウンロードが可能になります。

ExplorerCanvasなどIE環境でのCanvasではできないことがある

HTML5.JPの Canvasの使い方を読むと、ExplorerCanvasを読みこめばすべて解決するかのような雰囲気ですが、当然そのようなことはなく。
(IE8以前のCanvas非対応ブラウザが存在しないかのように書いてあるMicrosoftのサイトのほうが酷い。 )
画像やアニメーションといった通常使用はともかく、画像のピクセル情報取得や画像ファイル出力は使用できません。また、これらCanvasの機能を利用した実装であるJS-Image-ResizeやJS-Image-Filter-ddnも使用できないことになります。
というのも、ExplorerCanvasには生ピクセルデータ取得するgetImageData()やjpeg画像を吐き出すgetDataURL()が実装されていません。

latest log様 uupaa-excanvas.js と ExplorerCanvas(excanvas.js) の違いによると、これはVML+Silverlightに生のピクセルデータにアクセスする方法がないからとのことです。

FlashCanvasは getDataURL() を実装していますが、getImageData()はPro(商用利用は有償)でしか使用できないとのこと。
一覧は FlashCanvasのサポートAPIリストページで見ることができます。

どうやら uuCanvas.js ならば、フリーでFlashベースのピクセルAPIサポートが使えるようです。ただし、他のCanvas実装と違い、Canvasを利用するためのAPIに標準と異なる部分があるようで、利用するためにはひと手間必要なようです。

仕方がないので画像補正Webサービスのリリース時点ではIE9以降のみサポートとしましたが、 IE で HTML5 Canvas が使えるかどうかを調べる方法によるとIE9でもCanvasを使用できない場合がありそうで、追加の調査が必要なようです。

画像の輝度と彩度を変える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, ソース画像のアルファチャンネルの有無, 変換アルゴリズムの指定, 変換の重み付け, ワーカー使用の有無, コールバック関数

「ソース画像のwidth, ソース画像のheight, ソース画像のアルファチャンネルの有無」
で、ソース画像の情報をbrightness機能に伝えます。

「変換アルゴリズム」
は、無指定ではデフォルトの関数を使用します。今のところひとつしか搭載されていないので、選択肢はありません。

「変換の重み付け」
変換の強さを制御します。
値は -100 ~ 0 ~ +100までです。
Brightnessでは、-100が最も暗く、+100で最も明るくなります。

「コールバック関数」
変換終了後に呼び出される関数を指定します。
変換済み画像情報が、配列bufferとして、コールバック関数の引数に渡されます。
通常は、画面再描画の関数を登録します。

画像操作の実行

obj_brightness.brightness(dataToBrightness, value);

引数：ソース画像のピクセル情報の配列，変換の重み付け(オプション)

「ソース画像のピクセル情報の配列」
変換ソース画像を渡します。
各ピクセルの色データがRGBA(またはRGB)順に並んでいるだけの、単純な1次元配列です。
Canvasコンテキストのdata形式です。
例えば以下のようにして、画像を持っているCanvasから取得することができます。

var dataToBrightness = h_Canvas_context.getImageData(0, 0, image.width, image.height).data;

「変換の重み付け(オプション)」
変換の強さを制御します。
値は -100 ~ 0 ~ +100までです。
この引数は省略することができます。省略した場合、オブジェクト生成時に指定したデフォルト値が使用されます。

TIPS: 元画像データ用に表示されないCanvasを用意する

加工した画像だけ表示すればよく、元画像のデータは持っていてもブラウザ上に表示する必要はない場合があると思います。
ページのHTMLに書きこんでhiddenなどで隠すこともできますが、JavaScript側だけで使うCanvasをHTMLに持たせるのはあまり好ましいとは思えません。
下記の方法により、ページ上に存在しないCanvasをJavaScriptで作成することができます。

//src_canvas = document.getElementById('source_canvas');

src_canvas = document.createElement('canvas');

src_ctx = src_canvas.getContext('2d');

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で出すことができます。

デモコード：

<title>jQuery Slider</title>

// スライダを初期化

$(function() {

// スライダーを作成

$('#slider').slider({

min: 0,

max: 100,

step: 2,

value: 50,

// スライダーの操作終了時に呼び出される

change: function(e, ev) {

console.log('changed slider :' + ev.value);

$('#num').val(ev.value);

// スライダーの初期化時に初期値を取得

create: function(e, ev) {

$('#num').val($(this).slider('option', 'value'));

// スライド中に変化を取得する

slide: function(e, ev) {

var s_val = $(this).slider('option', 'value')

console.log('changing slider' + s_val);

$('#num').val(s_val);

}

});

</script>

</head>
<body>

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

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

SSSHを使うと、ソースコードを静的なHTMLに変換することができます。

ソースコードに含まれる、HTML特殊文字をタグに置きかえる。
タブ空白や半角空白が潰れないように置きかえる。
簡単なシンタックスハイライトを付けることもできる。

ソースコードを静的なHTMLとして出力するので、CodeMirrorやSyntaxHighlighterのようにライブラリを読み込む必要はありません。

SSSHにコードを張り付けるとハイライトされる

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

使い方

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

仕組み

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

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

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

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

・JavaScriptへの色付け。
"<script>"に囲われた範囲がJavaScript。
C系言語用関数 syntax_c_like() に予約語リストと共に渡す。
あまりJavaScriptとしての扱いをしていない。
syntax_c_likeは文字列( "hello"や'world' )およびコメントアウトをハイライトしてくれる。

・ユーザの入力検出
textareaの変化、上部オプションの切り替えでコールバック関数が呼ばれると、上記の変換を最初からかけ直す。キャッシュなどは行なっていない。

・改行に<br />を付与する
・コード全体を<div>の領域の筥で区切って囲う

といった感じです。
本当にあらためて解説するような特別なことは何もしていないという...。
正規表現で済ませて、真面目な構文解析をしていません。そのため、トリッキーなJavaScriptを渡されると結果がおかしくなることもありますが、サンプルコードを表示用にハイライトするには十分な能力があります。
(あと、そういった結果を見つけたら報告をいただけると嬉しいです。)

Virtual MIDI Piano Keyboardを使う (Ubuntu 12.04)

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

VMPK (Virtual MIDI Piano Keyboard)とJACK

参考にしたのは以下のサイト様です。
「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 HTML変換ページ

公開したサービスはこちら。
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へアップロードされます。

メールアドレスの認証

「[sssh-syntax-converter] Page build failure」というタイトルのメールが届きました。

「You need a verified email address in your GitHub account to publish Pages.」

認証されたメールアドレスが必要とのことだったので、手続きを行いました。

サブのメールアドレス(こちらがパスワードリセットに使われる？)を登録します。サブとメインの両方のメールアドレスにメールが届くので

メインで使い公開するメールアドレスのVerifyボタンを押して、認証します。
(メインのメールアドレス(「Primary GitHub Email」「Public 」 )は公開アドレスであるためパスワードリセットに使えない、といったようなことが書いてある。)

リポジトリのSettingsページにあるGitHub Pages項目に
「Changes may take up to ten minutes to be visible.」
と表示されます。10分よりも長くかかる場合もあるようですが、あまり長いようであれば、設定ミスを疑ってもよいと思います。

ファイル拡張子のミス

一晩経ってもページが公開されない( 404 error )ままだったので、海外のFAQを参考にgh-pagesブランチを再作成してみたものの、何も起こらず。

「sakashushuの取りあえずブログ」様を参考に、英文にて問い合わせ。

返答は、
「Github pages はPHPをサポートしていません」(抽出・意訳)
というもの。
読んですぐに気づいて、ブラウザのURI欄に、
「http://michinarinukazawa.github.io/sssh-syntax-converter/index.php」
と入力したところ、「ファイル "index.php" をダウンロードしますか？」のダイアログが。
プロジェクトの.jsファイルもフルパスを打てば閲覧可能でした。

静的ページしかホスティングしていないことは忘れていませんでしたが、PHPが無効になっている環境で index.php がメインページとして表示されなくなることをすっかり忘れていました。
というわけで、 index.php -> index.html とリネームを行いました。

あと、上記サイト様も書いていますが、githubのサポートは返事が早いです。本当に10分くらいで返事が来てびっくりしました。

フルパスでjsファイルの公開を確認

ページ生成エラー

またもや「Page build failure」メールが届きました。
今回は、本文に記載されたエラーも件名と同じ「page build failed」でした。

メールに記載されているトラブルシューティングのページを読むと、
「Jekyll （によるページ生成) を無効にしたければ、プロジェクトのルートディレクトリに ".nojekyll" ファイルを配置してください」
と書いてあったので、その通りにしたところ、index.htmlがメインページとして表示されるようになりました。

TIPS: コードの修正をブランチ間で共有する

これまで、Gitを使っていたにもかかわらず、その主要機能であるブランチを使ったことがありませんでした。
Github pagesを使う場合、ブランチがmasterとgh-pagesの2つ必要になるため、初めてブランチを使う方が私以外にもいるかもしれません。

私がgh-pagesブランチを扱うにあたって、最低限必要だったコマンドは、以下の2つでした。

masterで行った作業をgh-pagesに反映させる
git checkout gh-pages
git rebase master
(またはmerge)

gh-pagesで行った作業をmasterに反映させる
git checkout master
git merge gh-pages

あとは通常通り、 git push コマンドを打てば、修正がgithub上に反映されます。

masterブランチを削除して、gh-pagesをmaster扱いにして運用する方法があります。
こちらに紹介されている手法ですが、私は最近この方法を使っています。
git checkout -b gh-pages
git branch -d master

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

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

その他購入品

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

キーボード他を繋いで使用中

サウンドデバイスをタコ足配線して使ってみるテスト。

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

今回はバスパワーで取り回しのしやすい製品としてこれを選びました。

ACアダプタ付きの外部電源供給可能な製品は、これより少し高いようだというのも理由のひとつです。

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

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


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 にて、ビルド成功を確認しています。

ビルドした32bit Wineのwinecfg

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仮想マシンを、ホームディレクトリを共有した状態で作成します。

LXC導入(18.04ではlxc-templateを別途インストール指定が必要。)
sudo apt install lxc lxc-template -y

作成と起動のコマンドは以下。
sudo lxc-create -t ubuntu -n my32bitbox -- --bindhome $LOGNAME -a i386
sudo lxc-start -n my32bitbox

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

LXCコンテナのターミナルへ入る
sudo lxc-attach -n my32bitbox

なお、作業後にLXCコンテナを閉じる際には、仮想環境側でシャットダウンコマンドを実行します。
sudo shutdown -h now

LXC内でのビルド環境の構築

LXCコンテナに内のUbuntuに必要なアプリケーションを導入して、ビルド環境を構築します。

add-apt-repositoryの導入

LXCゲスト環境そのままでは「 add-apt-repositoryが無い」旨のエラーが出てリポジトリを追加できないので、
sudo apt-get install python-software-properties
にて、 add-apt-repository コマンドを導入。
(software-properties-common パッケージではない。)

2014/05/13追記: Ubuntu 14.04では software-properties-common パッケージが必要になって(戻って)いました。
2018/05/13追記: Ubuntu18.04では不要でした。

ccacheの導入

コンパイル時に使用する情報をキャッシュすることで、再ビルドを高速化します。
不具合報告をするなど、2度以上コンパイルすることがありそうならば導入しておくとよいです。
使用するなら、ccacheを追加で導入。
sudo apt-get install ccache -y

なお、ccacheの動作を確認するならば、ビルド中に
du -sm ~/.ccache/
すれば、サイズが増えていくことを確認することができます。

ビルドに必要な依存パッケージの導入

wine/ppaを導入することで、WINE最新版のビルドに必要な依存パッケージのリスト情報が追加されます。
sudo add-apt-repository ppa:ubuntu-wine/ppa

Ubuntu 14.04(正確には12.04より後)では、ソースパッケージがデフォルトで無効になっているため、aptの設定ファイルを書き換えて有効化する必要があります。

テキストエディタとしてviを使う場合は以下のようにします。
(斜文字の部分はUbuntuバージョンにより異なるので読み替えてください。)
sudo vi /etc/apt/sources.list.d/ubuntu-wine-ppa-saucy.list

具体的な書き換え内容としては、上記テキストファイル内の

deb http://ppa.launchpad.net/ubuntu-wine/ppa/ubuntu trusty main
# deb-src http://ppa.launchpad.net/ubuntu-wine/ppa/ubuntu trusty main

2行目の先頭から#を外します。
この後で、sudo apt-get update からの作業を行えば、build-dep による依存パッケージの導入に成功するはずです。

(詳しく知りたい場合、32bit環境でのWineビルド記事を参照してください。)

変更後、パッケージリストを更新し、依存パッケージの追加を行います。
sudo apt-get update
sudo apt-get build-dep wine1.7 -y

Gitはあらかじめインストールしておきます。
sudo apt-get install git -y

GitリポジトリからWINE最新版ソースを取得します。
git clone git://source.winehq.org/git/wine.git ~/wine-git

ビルド

WINE 32bit版をビルドするためのディレクトリを作成します。
mkdir ~/wine32-tools

作業ディレクトリに移動して、WINEソースのconfigureを実行します。
cd ~/wine32-tools
~/wine-git/configure

ccacheを使用する場合は、この手順でconfigureの前にオプションとして追記します。
CC="ccache gcc" ~/wine-git/configure

Makefileなどが展開されるので、makeします。
並列化数はビルド環境のCPU数と同程度にしておきます。
make -j4

コンパイルの最後に
"Wine build complete."
が出れば成功です。

32bit Wineの起動

Wineは実行時に「ボトル」(.wineディレクトリのこと。Windowsのc:\に相当する)を必要とし、起動時にこのディレクトリが存在しなければ自動生成します。
64bit環境で既にWineを利用している場合、ボトルは64bit版がすでに生成されていると思われます。
このままでは32bit Wineを使用することができません。
既存のボトルを削除するのが手軽な方法ではありますが、既存のアプリケーションや設定を削除したくない場合もあると思いますので、今回はWINEPREFIXを設定し、テスト用の32bit版Wineディレクトリを作ることにします。

ホストのターミナルで、コンパイル済みWineの置いてあるディレクトリに移動します。
cd ~/wine32-tools/

環境変数WINEPREFIXで、
パッケージのWineバイナリではなく、ビルドしたWineバイナリ(./wine)をパスで指定します。
WINEPREFIX=~/wine32 ./wine winecfg

初回は起動に少し時間がかかり、ボトルを生成する旨のメッセージが表示されます。
問題なくwinecfgが起動すれば、32bit Wineのビルドに成功しています。

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

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

RoseGardenとJACK(qjackctl)

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

DAWにはRosegardenを採用

Rosegarden に決めました。

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

JACK (JACK Audio Connection Kit)から音を出す

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

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

qjackctl

JACKのD-Busエラーへの対処

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

JACK の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をアンインストールするという解決策が紹介されていることが多いですが、可能な限り削除は避けます。
Jack使用時はWebブラウザから音が出なくなるので、必要になった時にPulseAudioをすぐ起動できる状態にしておきたいからです。
特にFlashプレイヤーから音が出なくなるのが問題です。YouTubeやニコニコ動画などで参考動画を見るのに不便だからです。
(なお、ブラウザから音を出すには、PulseAudioサーバ起動後に、ブラウザ再起動が必要です。)

PulseAudioのサーバを起動させるコマンドは
pulseaudio --start
です。

Jackとflashを繋げる方法はあるようなのですが、RoseGardenから音を出すのには関係ありませんし、ビルド作業などが必要となるので、今回は後回しにしたいところです。
参考サイト様にjackの上でpulseaudioを起動する方法が紹介されていますが、これも検証は後回し。

参考にさせていただいたのは、主に以下のサイト様です。
JackとサウンドサーバとRoseGardenの関係
「http://web1.kcn.jp/haruem/Ubuntu_audio_OS.html#suondserver」

Pulseaudioを削除せずにKillする方法
「http://web1.kcn.jp/haruem/Ubuntu_audio_OS.html#pulseaudio」
「http://d.hatena.ne.jp/namerican/20120515/1337084480」

Jack(qjackctl)上にて、RoseGardenとの入出力の連結

「Output Device:」に適切なデバイスを指定することでJACKから音が出るようになりました。

JACKで使用するデバイスの選択

私の環境では、マザーボードの標準サウンド出力の他に、USBサウンドデバイスも繋がっているため、普通より選択肢が多いです。(さらに、HDMIのサウンド出力も認識されている)

PulseAudioを止めた状態で、RhythmboxやVLCで適当な音楽ファイルを聴いてみれば、JACKから音が出るようになったかどうかがわかります。

これでJACKから音が出るようになったので、RoseGardenを起動し、qjackctlのUI上で、RoseGardenの出力とJACKを連結します。

あとはRosegardenから音を出すだけです。
その手順は参考記事さまの方法のまま。

参考は
Ubuntu Weekly Recipe 第176回　Rosegardenで作曲する
後半の手順はほぼこちらの記事のままだったのですが、
まず出力用のプラグインを追加
sudo apt-get install fluidsynth-dssi

サウンドフォントを入手(コマンドによるインストールが紹介されている)
sudo apt-get install fluid-soundfont-gm -y

Rosegarden上で適当にMIDIを打ってみると、音が出ることが確認できます。

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

予約領域あるいはリカバリ領域を削除するにあたって、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のバージョンが合わなくなり、この問題が発生するものと思われます。

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

F8からシステム修復のコマンドプロンプトを実行

私が使ったのは、こちらの方法でした。
Windowsが問題なく起動する状態で修復オプションを使いたいのであれば、ディスクを用意しなくて良いこちらの方法が楽です。

起動直後にF8キーを連打すると、セーフモードのオプション選択画面が現れます。
この中から、「コンピュータの修復」を選びます。
Windowsのインストールディスクと同じシステム修復画面に切り替わるので、あとは通常の手順どおりにブートローダの再インストールを行います。

リカバリ領域を削除する際の手順

OSが起動しなくなる場合があるので、作業は自己責任であり、実際に作業を行う前には必ずバックアップを取ってください。

Windowsのコマンドプロンプトから、ブートローダーを再インストールする方法は、参考サイト様「【備忘録】Windows 7 のシステム予約済みパーティションについて」をご参照ください。
ようするに、適切な状態で
bcdboot.exe C:\Windows /l ja-JP
を実行すれば良いわけです。

不要になったパーティションの削除にはUbuntuを使用しました。
GPartedを呼び出して、隠し領域フラグを削除してから、パーティションを削除しました。
GPartedをコマンドで呼び出すならば、
sudo gparted
です。

作業手順に間違いがなければ、リカバリ領域を削除した状態で、Windows7が起動します。
なお、作業後、初回の起動に時間がかかるかもしれません。
一度、ログインしてからHDD(SSD)へのアクセスが終わらず、エクスプローラーから「スタート」ボタンも押せないため、強制的に電源を落とさなければなりませんでした。
それからしばらく、今のところは問題は発生していません。

リカバリモードでのC:\(コロン・バックスラッシュ)の入力方法

修復オプションのコマンドプロンプトでコマンドを打つ際に、キー配置によって円「￥」やコロン「：」が打てない問題に出会う場合があります。その対処法です。
(以下、全角で表記している記号は、すべて半角に読み替えてください。)
「：」コロンは、「Ctrl + ;」で入力できます。
バックスラッシュは「む」キー(「}」または「]」キー)にて入力可能です。「＼」は、「￥」マークと同じ意味を持ちます。(参考サイト)

システム修復中、キー配置がUSキーボードとして認識される場合があります。
特に、私がF8からの修復オプションを使用した際は、キー配置に Japanese を選択してもキー配置がUS相当のまま変わらない現象に遭遇しました。

修復ディスク作成

今回使わないとしても、念の為に作っておいたほうが良いです。
特にブートローダを操作する今回の作業手順は、OSが起動しなくなる場合があるので、復旧手段を用意しておくのは重要です。
(私は、作業前にddコマンドでシステムのバックアップを取っています)。
「Windows TIPS：Windows 7のシステム修復ディスクを作成する」を参考にして、コントロールパネルから簡単に作成することができました。

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

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

miniDVD 80mm

通常のDVDと比べたところ

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

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

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

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

登録: 投稿 (Atom)