はじめに
MathML
DTDを一通り見たので、次にMathMLのSample CSSからフォントが想定されているのか知りたいと思います。
MathML Sample CSS フォント |
|
|
ワードや数式入力パネル、Microsoft Mathematics が、数式をMathMLでクリップボードに入れてくれます。ただ、分数などを普通に書きたいだけですがIE9になっても上手く行かないようです。
「IE9とMathML、SVG」
●「数式入力パネル」は、ワードにしか貼れないので、プログラムを作りました。
「MathMLクリップボードビューア」
●ブラウザで表示可能なスクリプトに変換したいのでMathMLの構文を知ろうとしました。
これは、DTDに記されていると言うことのようです。MathMLのDTDは4種ありました。
下図はDTDを見るためのSilverlightアプリケーションです。図をクリックすると実行します。
文字の実体参照に表示されている文字は、Portable User Interfaceフォントによります。
「DTDの効果」
「DTDパーサー」
「MathMLのDTD」
「マークアップとフォント」
「マークアップとエンコード」
プログラミング上の考慮に付いて
「文字(char、int、string、BMP外のUnicode)」
「マークアップとエンコード」
MathML DTD の宣言
|
MathMLの文字 |
Portable User Interface フォント |
|
|
|
折れ線グラフを描く.Netアセンブリを作りました。
左図は Silverlight アプリケーションにしたサンプルで、図をクリックするとブラウザで開いて実行します。
WPF-Toolkit、Silverlight Toolkit に、System.Windows.Controls.DataVisualization 名前空間があり、大変高機能なのを知りました。なんでもカスタマイズ可能ですが、その分、折れ線を描く以外の知識が必要です。
作成したアセンブリの説明は、上の目次から、「ベクターにアップしたプログラム」
「SimpleChart(WPF,Silverlight)」以下を参照ください。
WPF-Toolkit、Silverlight Toolkit については、「折れ線グラフ、棒グラフ」を参照ください。
音の実験
Silverlight アプリケーションですので、左図をクリックするとブラウザで開いて実行します。
音を加工する実験をするためのフレームワークを作りたいと思います。
WAVファイルから任意の区間を選んで、いろいろな加工ができるようにします。
最初に、選択範囲のWAVファイル出力と、2秒以下の区間のカラースペクトログラムを作ってみました。
目次から「音について」「音の実験」の下に説明を書きます。
うなりを出してみます。
「うなり」
音の反響を描くようにしました。距離を計算してみます。
「エコーで距離」
リサンプル(レートコンバータ)をしてみました。
「音について」「音の実験」「リサンプル/その他形式変換」
アルゴリズムは、
「音について」「「内挿、間引きによるレート変換」
音のカラー・スペクトログラム |
|
ブラウザで起動できる音のスペクトログラムです。
Silverlightでマイクが使えるようになっただけだと思っていましたが、デバイスが選択できることに気が付いたので再度作ってみました。MIXを選べば、再生中の音のスペクトルを表示できます。
PCMの再生もサポートされているとのことなので、そのサンプルも更新しました。前はMP3にエンコードして鳴らしていましたが、PCMのままで鳴らせます。ただし、MemoryStreamにWAV形式で書き込んでもダメで、MediaStreamSourceにすることが必要なようです。
図をクリックするとSilverlightアプリケーションのカラースペクトログラムが起動します。
上のコンボボックスで、デバイスとフォーマットが選択できます。パソコンで再生中の音を表示するにはMIXデバイスを選びます。
サンプリングレートは、できるだけ小さな値を選んでください。大きな値にする場合は、CPUやグラフィクの能力を確認しながらにしてください。
「Start」ボタンを押すと、「カメラおよびマイクへのアクセスを許可しますか?」と言うダイアログが開きます。
別に、カメラやマイクを使うわけではありませんが、「はい」を選んでください。
2チャンネルのフォーマットを選んだ場合、左右どちらのチャネルを表示するかを選択できます。
Narrow/Wideは、周波数軸の最大を切り替えます。
Narrowは、1500Hzまでを表示します。声や楽譜で使われる周波数を想定しました。
Wideは、より高い周波数まで表示します。サンプリングレートが高くなると、表示の最大周波数も大きくなります。
8000Hzのサンプリングレートで、2244Hzまでを表示します。
Wideの方が、CPUの負荷が小さいです。
「Silverlightで音を作る」サンプルを使えば、音階とスペクトル表示の関係が見られます。
このサンプルは、チェックの付いている個所の音を再生します。16拍分を再生できます。
音をWAVファイルに書くこともできます。
「WavIO DLL R言語 エクステンション」を使おうとして、Rごと落ちるのに気が付きました。
DLLを置く場所を、R言語のインストールディレクトリ bin から bin/i386 にすれば動きました。
このことからDLL(アセンブリ)をRの作業ディレクトリだけで良いように修正しました。
-
-
-
WaveIO7 (WPF用音声入出力ライブラリ)を差し替えました。
ページ最上部の目次から「ベクターにアップしたプログラム」「WPF用音声入出力ライブラリ(WaveIO7) 」以下を参照ください。
(目次が大きくなっていて本文の表示が切り替わったのに気が付かないことがあります。下へスクロールして見てください。)
ダウンロード:
http://www.vector.co.jp/soft/winnt/prog/se487213.html
すべてC#でできているので、比較的容易に実験ができます。
サンプルプログラムは、それぞれ Visual Studio のプロジェクトになっています。
WaveXxx、Direct Sound、Core Audio(WASAPI)、Kernel Streaming の4つの方式でPCM形式の音声データの録音・再生ができます。
PCMCaptureクラス、PCMRenderクラスを作成しました。
サンプルプログラムは、これを使っています。
4つの方式のどれでも同じプログラミングで簡単にPCMデータの入出力ができます。
このライブラリは、PCMCaptureクラス、PCMRenderクラスを使って簡単にPCMデータの入出力ができる以外に、直接各種 API の呼び出しにも使えます。MSDNのドキュメントなどC++向けに書かれた記事通りに、C# から API を呼び出して動作を見ることができます。
「WPF用」としましたが、サンプルに添付したプログラムのプロジェクトが「WPFアプリケーション」だと言う以上の意味はありません。
このライブラリは、プログラミングをしようとしている方以外には、なんの実用性もありません。
「なぜこんなにいろいろな方法が用意されているのか」とか「パソコンのサウンド機能は何が不自然」と言った疑問を持った方の実験の手段になればと思います。
再生のサンプルプログラム |
|
|
WaveIO7 (WPF用音声入出力ライブラリ)の応用でレコーダを作りました。
・2種類の圧縮モード
・再生音の録音
・ファイル自動分割保存
が特徴です。
設定と入力方式の関係
|
ミックス |
規定のデバイス |
規定の圧縮 |
高圧縮 |
規定の圧縮 |
高圧縮 |
Core Audio |
Core Audio |
DSound |
DSound |
- |
- |
DSound |
DSound |
ダウンロード:http://www.vector.co.jp/vpack/browse/person/an039696.html
説明:「ベクターにアップしたプログラム」「録音7(RoKuOn7)」
「インストール、使い方」
「ひもとけば」
ミトコンドリアDNA話しには、部位の名前が出てきます。NCBIのデータには、名前と説明が付いています。まだ、何もわかりませんが、テキストのままでは良くわからないので絵にしてみました。
環状鎖の上のクリックや名前のクリックで連動させてみました。
ネアンデルタール人の核DNA解析が終了し現在のヒトにも混血していることが確認されたと言う話しを聞きました。
ミトコンドリアDNAの解析からは否定的な答えが出て、ネアンデルタール人が旧人ではないことになってしまっていたのだと思います。(旧人=ネアンデルタール人のように使われていましたが本来は直系が旧人らしい。)
ミトコンドリア・イブも1987年の話題であり、何がどう調べられたのか知りたいと思いました。
まったく知識のないことなので、わからないことを1つずつ調べてきたのですが、ようやく塩基配列に行きつきました。
ミトコンドリア・イブの話題では、12種類の制限酵素が使われ、それによって切断された切片の有無が比較されたと言うところまで来ました。
記号列の処理で説明されていることは図にしてみればわかるかと思ってやってみました。
左図は、GANTC をマークしたところです。黒い線が HinfI と言う酵素の認識サイトになるのだろうと思います。
制限酵素
WPFのWebBrowserコントロールを使って、HTMLマークアップ用のWYZIWYGなエディタを作りました。
ダウンロード
- FckEditorと同様、ブラウザのコンポーネントを利用するもので、操作性の点で似ています。
- このプログラムはスタンドアロン(EXE)で、ネットワーク・アプリケーションではありません。
- このプログラムは、データベースに格納したコンテンツの管理を目的にしたもので、階層的な目次が使えます。
- このプログラムは、すべてC#で書きました。エディタ部分はコントロールとして分離しました。
- データベースの操作をする部分とも独立しており、データベースやテーブルのフィールドにも非依存で、カスタマイズできます。この部分のソースコードを付けました。
以下の機能を追加しました。
- CSSにフォーマットを登録して、テーブル挿入時に選択可能に
- Visual Studio から、ソースコードを専用枠を作って直接貼り付ける
- XAMLをスクリプトとして埋め込む
- Silverlightオブジェクトの挿入
- IFRAMEの挿入
WpfFontViewer フォントビューア
ダウンロード:WpfFontViewer
フォントはパソコンやプリンタの付き物で、文書の作成側では制御できないものでしたが、フォントを埋め込んでも軽々と動作する時代になりました。
こうなると、フォントも文書を作る側の守備範囲のようです。
フォントファミリを選択するか、ttf、ttc、odttf ファイルを貼り付けてフォントファイルを開きます。
フォントを選んでXPSファイルを作ることができ、フォントのサブセットを作ることが出来ます。
特に数式で使われていた、フォントサイズを数倍も上回る大きな字形を、重ならないように表示することを工夫しました。
Silverlight の Unicode 一覧
フォントファミリーやフォントファイルを明示しない場合、「Portable User Interface」フォントが使われると言うことですがどんなものでしょうか。
左図をクリックするとSilverlightアプリケーションで作成したコード表が起動します。
Silverlightの場合、「Portable User Interface」を使うか、組み込みフォントを使う方法がとれますが、ブラウザ側のフォントを明示的に使うことはできないように思います。
U+1D400からの数学用英数字など、数式で必要な文字は含まれているようです。
Glyphs を TextBlock に置き換えても、充分表示できそうです。
「ワード」で数式や図を書いてXPS形式で保存します。それをXAMLにしてVisual Studioで使おうと言うものです。
- XPS2XAML
- Silverlightアプリケーションの例(1)
- Silverlightアプリケーションの例(2)
- WPFアプリケーションの例
- XPS中のImageBrushとSilverlight
- XPSファイルでの座標
- GlyphsをTextBlockに置き換えることの問題点
ダウンロード:Xps2Xaml
作ったサンプルは、左図をクリックすると実行できます。
開発環境が Silverlight 3 になっているので、Linux はまだだと思っていたのですが、左図のように、Fedora、FireFox、Moonlight で動作します。
ワードの出力もXMLになって、最終的な清書機械から、文書入力装置になるのだろうと思いました。ワードで出力したXPSファイルに含まれるXAMLファイルの、Glyphs を TextBlock に置き換えて見ました。これで、左図のようにVisual Studio や Blend でも開けます。
フォントなどのリソースの扱いについて調べました。
1.「Silverlightのマニフェスト・リソース」
2.「Silverlightのリソースの分類」
3.「Silverlightのフォントとイメージの検索」
4.「SilverlightとWPFでのXPSファイルの表示」
このページの先頭の目次から、「プログラミング Tips」「XAML」以下に XAMLについて書きました。
XAMLの種類 に記したように利用局面としては、WPFアプリケーションやSilverlightアプリケーションの作成と、XAMLをスクリプトやマークアップとして使うことに大別できます。
「プログラミング Tips」「XAMLの3D」には、XAMLでの3Dの表現方法を書きました。
ブラウザが直接XAMLを開く場合は、XAMLはSilverlightではなく、Windowsの機能(.Net Framework)で処理されます。このため、ブラウザに3Dを表示することができます。
ただし、ブラウザは常にXAMLを開けるわけではく、設定にも依存します。
左図は、「プログラミング Tips」「XAMLの3D」の下の「スペキュラ、発光」「 スペキュラ、発光のサンプル」にある図で、SpecularPower などを変化させて表示の変化を見るものです。
XAMLだけで記述した、3Dの操作可能なサンプルです。
データベースの使い方のサンプルを作ろうと思って始めたことですが、図の描画でいくつかメモして置きます。
- マウスのボタンのイベントは、図形オブジェクトの上でのみ発生する。
図形オブジェクトの上かどうかは、Fill や Background にブラシが設定されているかどうかで判断されているようだ。
PolygonにFillを指定しない、Canvas に Background を指定しない、状態だと線上のみでイベント処理が呼び出される。
透明ブラシ、白ブラシでも指定があれば、面も図形オブジェクトらしい。
- ScaleTransform での拡大はビットマップとして拡大される。
Canvas に設定した ScaleTransform に倍率を設定すると線幅も拡大される。
- マウスホイールをズーム(拡大率の変更)に使うには工夫を要す。
WPF では、ScrollViewer が縦スクロールに使っていて、MouseWheelイベントを指定しただけではこの動作が止められない。
Silverlight では、ブラウザが縦スクロールに使っている。 ( Silverlight のサンプル2 のようにMouseWheelでズームすることはできる。)
図をクリックすると Silverlight のサンプルが起動します。
- 図のズーム
- JPN.mdbの読み取り
- System.Data.Sqlite、Linq
- LINQ to SQL クラス
- LINQ to SQL クラスの自動生成
- SQLite の dbml
- SQLiteとDataGridのバインド
(http://www.gadm.org/ から mdb 形式のデータ(海岸線、県境、市区町村境界)が入手可能なのに気が付いて始めました。このデータはの利用については、1)原著作者のクレジットを表示、2)非営利利用、3)の許諾条件の継承 の条件が付いています。私には「原著作者」が誰なのかわかりませんがライセンス条項へのリンクを乗せて置きます。 Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.)
お菓子の虜 Web API の検索機能を使ったSilverlightアプリケーションです。画像をクリックすれば動きます。
・Silverlight アプリケーションが、プログラム外のリソース(ファイルや通信)を使う方法について、「Silverlightの入出力」。
・NuSoap を使ったサービス参照について「SilverlightとNuSoap」。
・Web由来のデータをできるだけコードを書かずにバインドすることに付いて。「WPFのバインディング」 「Silverlight のバインディング」 「ListBoxのバインディング」 「Silverlightのカラーとバインディング」「XAMLの種類」
今度は、1つのカラーを選択して、他の色を距離でソートして表示して見ました。
図をクリックすると起動します。
1.グリッドの背景色を交互に変えて見易くする。
2.メニューバーなどの背景にグラデーションを付けて立体感を出す。
と、いった時の色の選択の目安を探しています。
いずれの場合も、文字が読みにくくならないように色を選ぶことが必要です。
上の段の、丸い色見本をクリックすると、その色を背景色にして、近い色から下に向かって並べて、下段に表示します。
20個で折り返しています。
中ほどに2行、色の情報を表示します。上の行は、背景になっている、上の段で選んだ色の情報です。
下の行は、下段の色見本をクリックすると表示されます。
表示しているのは、色名、L*a*b のカラーコード、[色相、半径]、RGBコードです。
色名なり、RGBコードなりをコピーしてプログラミングに使います。(右ボタンメニューは、「Silverlight」と表示されますが、CTRL-X や CTRL+Insert でコピーできます。)
[色相、半径]は、Lを無視して、a-b平面上の、点(a,b)の位置を書いています。a軸との角度(度)と半径で表しています。角度は、色の種類を、半径はその鮮明度を知る目安になると考えました。
表示している色は、Colorsクラスにある、名前の付いたカラーです。
色の間の距離を使って、組み合わせを行おうとするもので、できるだけ色見本で距離がわかるようにしたいのですが。
詳細は、「名前の付いたカラー」を参照ください。
Colorsクラスの全色の一覧は、ここにあります。
文字の色と背景色、グラデーションで盛り上がりを作る、など2色の組合せがなかなか上手く作れません。左図のプログラムを作ってみました。図をクリックすると起動します。
丸い色見本をクリックすると、色1、色2の選択されている方にセットされます。「表示」をクリックすると、色の組み合わせのサンプルを表示します。
表示しているのは、Colorsクラスにある、名前の付いたカラーです。
色の間の距離を使って、組み合わせを行おうとするもので、できるだけ色見本で距離がわかるようにしたいのですが。
詳細は、「名前の付いたカラー」を参照ください。
Colorsクラスの全色の一覧は、ここにあります。
このサイトのオフライン編集ツールを、故あって、Windows Server 2008 上で動かしています。これには、一つ修正が必要でした。C#から旧来のDLLの関数を呼び出す DllImport が失敗する箇所がありました。おそらく、これは Vista でも同じなのだろうと思います。
- [DllImport("sqlite3.dll")]
- static extern string sqlite3_libversion();
これは、戻りの型をIntPtrに変えて、Marshal.PtrToStringAnsi() で文字列にすれば、XPでも両立します。Vista を使ったことがないので知らずにいました。
これをきっかけに、Vector にアップしていたプログラムを、Vista、Windows 7RCで動作確認しました。今後は x64 も普及するのだろうと、これも試してみました。
C#は、CPU、OS非依存の中間コードなのでほとんど問題ありませんでした。FlvMP3Gain 以外の修正の必要なものは差し替えました。
- 前述の、文字列が返される関数のDllImportの修正
- x64 OS で動作しないものがある。プラットフォームを Any CPU から x86 にすると動作する。納得はいかないが。
- FlvMP3Gainについては、VolMaxを作ったので、使わなくなっていた。性格を明確にして作り直すことにした。
このサイトのCMSはPHPを使ったCupCakeでできています。管理者権限のない、(データベースもサービスされていない)レンタルサーバを利用するには、唯一の選択肢だと思います。
理想は、単一の言語、単一のツールでホームページを作成、維持できることです。
レンタルサーバには乗らなくても、そんな方法がないものかと思っていました。
「マイクロソフトがオープンソースのCMS…」の見出しを見て、Oxiteを調べてみました。
期待するSilverlightとの連携などはありませんが、これもCupCakeと同じMVCモデルのCMSであることを知りました。「LINQ to SQL」や「ASP.NET MVC Framework」を、もう少し調べて、「IISでCMS」以下に書いて置こうと思います。
Expression Blend を使ってGUIや図を書く練習をしていたのですが、大半の図形は最終的にPathオブジェクトで表現されることを知りました。
ツールを使って作った図形は、小さなパーツの集合になって、扱いずらいだろうと思っていたのですが、複雑な形状も1つのPathオブジェクトで表現されています。
このPathオブジェクトの表現はどこかで見たことがあると思っていたのですが、文字列をインタプリットするL-systemの話に似ていることに気がつきました。
一筆書きのような形状だけでなく、分岐のある形状も 1つのPathオブジェクトに置き換えられます。
これを Silverlight のプログラムにして見ました。上の図をクリックすると実行できます。
プログラムについては、「「かたち」について」「L-system」に書きます。
左の図をクリックすると、Silverlightのプログラムがポップアップ表示されます。スライダを動かして見てください。
ウエブ・アプリケーションの作り方を調べていて、時計のデモビデオを見ました。
それを元にしたサンプルです。
一番驚いたのは、グラデーションの付いた同心円を重ねて少し角度をずらすだけで立体的に見えることでした。ほんの数十秒で立体が書けるのに驚きました。同じ角度のずれでも、上下を逆にすると凹凸まで変わって見えます。
(ブラウザのウインドウサイズを変えて見てください)
ウスホイールでのズーミング、パネルのドラッグを追加しました。
動的にコントロールを配置する方法を試してみました。
「コントロールの動的配置」
さらに、均等に配置する方法を考えてみました。
「コントロールの均等配置(フレーム周期の描画)」
この例は、BorderとImageで作った2種類のマークをたくさん作って表示しています。
最初は中央に集中しているマークが左図のようになります。
均等と言ってもまだまだ工夫の余地があります。また、プログラミング的にも理解できていないところがあります。
いずれライブラリ化したいと思います。
Imageやコントロールには Effect プロパティがありました。
HLSL で効果が記述できると言うことなので試してみました。
「XAML、WPF、Silverlight」「BitmapEffect」のようにコントロールに適用するのは簡単ではないようです。
イメージ全体に同じ処理をするなら何とかなりそうです。
「XAML、WPF、Silverlight」「HLSLでEffect」を参照ください。
ボタンのサンプルを作ってみました。
「Tips」「XAML」に記述しました。
Silverlightアプリケーションで、コントロールのスタイルやテンプレートを独立した別ファイルにして実行時に読み込むことができるようになりました。これで再利用が容易になるので少しは見栄えに気を使うことができます。
どうやら、Blendと言うツールでデザインするもののようなので、このツールを使えば、ここでの工夫は徒労なのかもしれませんが。
もう少し、工夫が必要ですが、そろそろXAMLベースでページを書けそうです。
ブラウザで簡単に実行できるようなサンプルを作るには、Silverlightが良いわけですがPixel単位の操作がないことがわかりました。
これは、Pixel単位の操作がブラウザにとって一般的にサポートされてないためなのだと思います。
ブラウザは、イメージファイルを表示する機能を標準的に持っています。
そこで、Bitmapの代わりに、SilverlightがサポートするPNG形式のファイルのPixelを操作するようなプログラムを作ってみました。
プログラムの目的は、RGBを255x255x255の立方体と考えて、各面に平行な面での切断面を見てみようと言うものです。
R,G,B 3つのスライダーがあり、切断する位置を移動できます。
内部的には、スライダの移動に応じて、PNG形式ファイル(メモリー・ストリーム)のPixelを操作しています。
PNG形式には無圧縮形式があることを利用しています。
「XAML,WPF,Silverlight」「Silverlight」を参照ください。
名前の付いているカラーの一覧。大きなウインドウで表示してください。(Windows、IE)
|
XAMLの話題には3Dがあるのですが座標が理解できません。
カメラの位置と向きが要点のようなので試してみました。
「プログラミング Tips」「XAMLで3D」以下に、XAMLでの3Dの表現方法について書きました。
WPFアプリケーションを作って確かめたのですが、Loose XAMLを使ってブラウザで同様のことができるのが分かったので差し替えてあります。
|
Visual Studio のエディタから色付きでテキストがワープロに貼り付けられることに気が付きました。
そこで、クリップボード上のテキストの色情報を使ってHTMLに変換するプログラムを作りました。
これで、見たままに貼り付けられます。
しかし、テキストエディタやR言語のコンソールからはできません。
これは、アプリケーション側がどんな形式でクリップボードに積むかに掛かっており、どうしようもなさそうです。
テキストなら、キーワードでカラーリングすることも必要なようです。
テキストエディタはマクロが使えないかと考えましたが、文字が拾えても、色などの属性は取得できないようです。
行番号を付けるとコピーで困るのではと思っていましたがこれも問題ないことを知りました。
今までは、HTMLを「ソース」に切り替えて貼り付けていました。
クリップボードに格納するときには、HTMLとして格納できることを知りました。こうすると、FCKeditorにそのまま貼れることがわかりました。
ただし、HTMLとしてクリップボードに積むと、テキストエディタに貼れなくなります。
クリップボードへは複数の形式で積めるのでまだ工夫の余地があります。
サーバーを使えれば、どこからでも編集できると考えて始めたわけですが、サーバーのダウンを機会にローカルで編集することにします。
そこで、下図のような編集ツールを作ってみました。FCK Editor をスタンドアロンで動かすものです。
サーバーを起動しないで、編集できます。
また、目次もマウスで移動できるようになりました。
SQLite3とMySQLの両方で、HTML(コンテンツ)を管理することにします。
自身の問題解決や、 いろいろな疑問を考えるのにパソコンを利用する、と言う当然のことがなかなかできません。
試してみると、C#やR言語のすばらしさには驚くばかりです。パソコンの進歩があるのでしょうが、画像でもなんでも、オンメモリで高速に演算できます。
もっといろいろなことができそうです。
また、思いついたことや試したことをその場で簡単に記録できることも重要です。
mikeo_410@hotmail.com |