無料ブログはココログ

« 2010年7月 | トップページ | 2010年9月 »

[TiDD] 制約による高品質ソフトウェアの開発

以前、「ある種の制約は自由を増やす」というまつもとゆきひろさんのRuby on Railsに関するコメントを紹介しました。実は、ソフトウェア工学の歴史を振り返ると、ソフトウェア開発に制約を与えることで高品質なソフトウェアの開発を実現してきたと思います。

高品質といってもその特性は時代と共に変化してきました。

(1) 高機能の追求

ソフトウェア危機が叫ばれた1980年代から、大規模ソフトウェアをどのように開発するかが議論されました。解決法として考えられたのは、プログラムに論理的構造という制約を与えることです。

古くは構造化プログラミングがそれにあたります。GOTO文を禁止し、IF、WHILEなどという構造化が容易な制御文のみでプログラムを書くことで理解が容易になり、高機能なプログラムの実現が容易になりました。

これはその後、プログラムを一定規模のモジュールに分割する、システムを組み合わせるといったシステムの構造に対する制約につながりました。一方、スパイラルモデルを始めとする時間軸の分割、すなわち段階的な開発も行われました。

さらにアジャイル開発の時代になると、タイムボックスという制約が加えられて一定の時間に収まる機能に開発対象のスコープを制限するようになり、管理の容易な単位の開発を組み合わせて高機能なソフトウェアを開発するようになりました。

(2) 高信頼性の追及

信頼性はソフトウェア工学の主な課題の一つでしたが、高機能ソフトウェアが開発されるようになると、より注目されるようになりました。

1980年代には、各種のチェックリストのほか、テスト技術としてドライバ、スタブ、カバレージ等の技術が開発されました。

やがて、1990年前後の開発標準やプロセス改善の時代になると、定量的なデータを蓄積して、品質が管理されるようになりました。テスト項目数のほか、レビューやテストにおける不具合の件数に制約をつけることで、安定した品質のソフトウェアが開発できるようになりました。

さらにアジャイル開発の時代になると、ペアプログラミングやテスト駆動開発という新しい制約によって、バグを作りこまない開発が行われるようになりました。

(3) 顧客満足度の追求

高機能で高信頼性のシステムが構築できるようになると、使いやすいユーザインタフェースや社会変化に対応した顧客満足度の高いシステムが求められるようになりました。

顧客による確認を行うために、レビューやインスペクションというプロセスの制約によって、顧客満足度が高められました。

また、ユーザインタフェースに関しては、プロトタイピングやアジャイル開発のようにものづくりを優先するという制約によって、使いやすいシステムの開発が行われるようになりました。

社会の変化に関しては、繰り返し開発によって変化を受け入れられるようになりました。この実現方法には2つの方式がありました。一つは、変化を厳密に管理するという制約です。ウォーターフォール開発を基本とする場合に行われます。

もう一つは、変化を受け入れた上で要件を実現するというものです。前述のプロトタイピングやアジャイル開発のように、変化することを前提として限界に達するまで仕様を凍結しないという制約です。

これらに共通するのは、混乱状態を整理し、パターン化して制約を与えることで、混乱からリズム(テンポの良い開発あるいはスタイル)に変えていることです。

次回は、この制約という観点で、チケット駆動開発を考えてみる予定です(少し先になるかもしれません)。

[TiDD] チケット駆動開発の意義

方法論としてのチケット駆動開発の意義を考えてみました。

1.コンパクトな方法論

昔の方法論は今から比べるとコンパクトなものでした。構造化設計ならトップダウンにはトランザクション分割、ボトムアップにはSTS分割があり、あとはモジュール強度とモジュール間結合度を考慮できれば基本的に十分でした。

最近の方法論はプロセスの議論と結びついているので、とにかく巨大で、実施するのが大変です。このため、方法論は巨大なプロジェクトで実施されますが、普通のプロジェクトではフレームワークや開発環境をベースにした開発スタイルあるいは思想の導入にとどまっていると思います。

チケット駆動開発は技術よりはライトウェイトなプロセスのルールが中心ですが、開発全体を統率できる可能性を感じています。

2.高付加価値ソフトウェアへの対応

かつてのアーキテクチャを重視していた頃は、アーキテクチャの実現に多くの工数が必要でした。近年はフレームワークを用いることで、少ない工数で高付加価値ソフトウェアを開発できるようになりました。

このことは、プロジェクトの管理を困難にしました。従来は開発規模は行数で見積もることが多かったですが、行数に比較して多くの機能が実現できる用になったので、行数による管理は困難になりました。

そこで、画面数や機能数を元に見積もることも増えました。しかし、機能数や画面数と必ずしも比例しない環境の構築や運用テストなどの存在がプロジェクト管理を難しくしています。

チケット駆動開発はプロジェクトをタスク数や工数といった直接的な尺度で管理しますので、近年の高付加価値ソフトウェアに向いていると思います。

3.オープン環境

かつてのプロセス改善では、ツールによってプロセスを自動化することが多かったものです。しかし、最近はツールが肥大化し環境になっていますので、プロセスが特定の環境に依存しやすくなっています。

しかしチケット駆動開発は、ツールへの依存度が低い方法論です。どちらかというとRedmineが向いているのではないか、という個人的な感想はあるものの、Tracの方が自由度が高くて良いといわれる方も
おられます。

このように、チケット駆動開発は特定のツールに依存しないので、将来、利用しているツールの開発が中断された場合も、(環境の移行は必要ですが)方法論を大きく変える必要がありません。ツールの購入費用も不要ですので、安心して始めることができます。

このようにまとめてみると「さすが開発現場で生まれた方法論だなぁ」としみじみと思いました。

[Redmine] ワークフローの視覚化

suerさんがGoogle Chartを使ってワークフローの視覚化をされています。

Redmine のワークフローを視覚化してみた

Redmine のワークフロー視覚化をプラグイン化してみた。

日本語に問題があったりするようですが、Google ChartのサポートしたGraphVizはDoxygenのクロスリファレンスなどで使われているもので、きれいなグラフ表示が期待できそうです。

以前もガントチャートの改良を紹介しましたが、ソースをちょこちょこっと触るだけで改造ができてしまうのがRedmineのすごいところですね。

リスバーガーのリスクに有効なのは「教育」

かおるんさんのブログにあった「リスバーガー」のお話は色々と考えさせられました。

認定スクラムマスター(CSM)研修のお話らしいので、プロダクトオーナー(この場合は顧客)の判断に従って開発を進めることの大切さを説明したものだと思います。しかし、これを読んでいて、開発者が勝手な判断をするリスクはどんな開発にもあることに気付いて、ゾッとしました。

例えば、何らかの条件で無限ループに入る、メモリーを破壊する、CPUを使い切る、システムを止めてしまう、などなど、です。静的アナライザや安全な言語、ライブラリによって防げることも多いでしょうが、完璧なレビューを行わなければ防ぎようのない問題もあるでしょう。

そんなに完璧なレビューもできないのに、なぜ開発ができるのか私自身も不思議です。よく考えると、「そんなバカじゃない」と開発者を信じているというのが、現実なのでしょうね。

では、どうすべきかと考えると、レビューで無理ならテストとも考えられます。しかし、すべてを自動テストできるなら話は別ですが、後から埋め込まれる危険は減るものの、基本的には下流で防ぐよりも上流で防ぐ方がコストは少ないはずです(でも難しい)。また、形式手法なども考えられますが、アルゴリズムの問題でなくコーディングレベルの問題なら変換ツールで形式化ができなければ効果は期待できません。

さて、基本に戻って考えるなら、リスクは以下の式で表されます。

  リスク = 影響 × 発生確率

この発生確率を「発見し損ねる確率」と考える所に無理があるのかもしれません。素直に「埋め込む確率」と考えれば良いと思います。つまり、開発者を信用せざるを得ないのだから、信用を高めればよいのです。安全な開発をするには、安全な開発が行えるようにするのです。

以上から、人に依存するリスクの低減に効果的なのは「教育」だと思いました。かつてテストで有名なN先生が「武士道の極意は刀を抜かずに人を切る、テスト道の極意はテストをせずにバグをなくす」といわれていました。危険なバグ(問題)を作らないように教育するということは、とても大切なフロントローディングの方法なのだと思いました。

いかがでしょうか?

[iPhone4] 一ヶ月半の使い勝手

iPhone4を購入して一ヶ月半、使い勝手をまとめてみました。

1.ボタンは一つ?

一見、iPhoneにはボタンが一つしかありません。アプリケーションとシステムの切り替えと考えると確かに一つですが、実は見方で変わります。ハードスイッチと考えると、これだけあります。

  • ホームボタン:ホーム画面に戻る。コマンド切り替え、過去のコマンド履歴(2回クリック)からプロセス終了もできる。ロック(スリープから復帰)時にダブルクリックするとオーディオ(音楽・ムービー)再生できる
  • マナースイッチ:マナーモード切り替えスイッチ
  • ボリューム:音量調整

このうち、アプリケーションから見えるものは基本的にありません。アプリケーションのボタンはすべて画面に表示されます。じつは、ここに問題があります。アプリケーションのボタンは上か下に表示されますが、一貫性がありません。前の画面に戻るボタンは上の左側にある場合が多いのですが、ブラウザのSafariなどは下にあります。

下にある場合も状態で場所が変わります。メール一覧で編集すると削除が左でフォルダに移動が右ですが、個別のメールだと逆になります。ケータイではクリアボタンで前の状態が一般化されていることを考えると、ハードキーでない分だけ、一貫性を保ちにくいのかもしれません(自由だとも言えます)。

このように一貫性だけで考えるとあまり良くないですが、困ったときはホームボタンを押すという単一の操作になるというシンプルさは非常に評価できます。また、画面の上の方にあるタイトルバーをタップすると最上部にジャンプできますが、こんな隠しコマンドがある辺りが、マニア心をくすぐるのでしょう。

2.大きさと重さ

胸ポケットやズボンの前ポケットに入れても特に不都合がない大きさです。ただ、重量はそれなりにあるので、長時間胸ポケットに入れていると肩がこってしまいます。対策にブルートゥースレシーバを買いました。

画面はとてもきれいですが、字がやや細めです。地図や大きいPDFを見る場合は大きい液晶がほしくなります

3.オーディオプレーヤー

音質は悪くはないです。直挿だとPhilips製ソニーのブルートゥースレシーバならソニー製が良いと思いました。

iPhoneの魅力の一つは、様々な機能が一つに収まっていることです。ある程度パソコン的な使い方もできますし、携帯オーディオプレーヤーにもなります。自分のスタイルに合わせてバッテリー充電サイクルを決めて、必要なら予備バッテリーを用意すればとても便利です。私の場合は念のために予備バッテリーを常に持ち歩きますが、これがなくても1回の充電でだいたい2日ぐらい持ちます。

4.専用Web画面

最近、mixi touchのように、iPhone対応のWeb画面がありますが、どうもいただけません。確かに使いやすいのですが、簡単に画面を拡大できないのです。目が悪くなくても「パピプペポ」と「バビブベボ」の区別は難しく、指2本でピンチして画面を拡大したいときがあります。しかし専用Web画面は、画面の拡大ができないことが多いです。

「設定->アクセシビリティ->拡大縮小」をONにすれば、指3本で拡大できるのですが、ユニバーサルデザインでない証明ですね。また、「設定->アクセシビリティ->テキストを大きな文字で表示」にしても、無視するWebページが多いようです。

これなら、日経BPのように2段組、あるいは、3段組にしてくれた方が拡大縮小もできますし、横に向けるだけでほどほどの拡大にもなるので便利だと思いました。

5.トラブル

おさいふケータイ化は便利です。普段はこれと小銭入れだけで十分生活ができます。最初にケースの間にICカードを挟んでだめだったときはショックでしたが、電波吸収材を挟んだ上で握り締めた状態(間に指を挟む)ならこれまでトラブル知らずです。レジも問題ありません。

問題は使い続けていると、iPhone4がたまにおかしくなることです。写真が取れなくなったときは、マルチタスクでメモリーが残ったのかコマンド履歴を消すと直る場合がありました。聞くところによると、どうしても直ら症状もあるそうで、そのような時は電源を切るしかないようです。

6.まとめ

全体に辛口になりましたが、これは期待が大きかったことと、かなり良い線まで作りこまれているので、もうチョットと思ってしまうからです。twitterをきっかけ頭金も無料になりましたし、ケースも無料でもらえましたアプリケーションも豊富ライフハックも楽しめますし、PDFでプレゼンができるなど、この1ヵ月半の満足度はかなり高いです。

iPhone4を使うまでは、完璧を目指したユーザインタフェースと思っていました。しかし、実際は「より重要なものを実現するために優先度の低い機能を捨てた」システムのようです。不満なところがある限り、iPhoneは成長すると期待しています。

[iPhone4] ライフハックに使う

ライフハックとは

最近までライフハックという言葉を知りませんでしたが、Wikipediaによると

LifeHack(ライフハック)は、情報処理業界を中心とした「仕事術」のことで、いかに作業を簡便かつ効率よく行うかを主眼としたテクニック群である。ハッカー文化の一つ。

だそうです。以前、ここでも音楽再生のTIPSを紹介した「iPhone情報整理術 ~あなたを情報’’強者’’に変える57の活用法!(デジタル仕事術シリーズ) 」という本では、以下のようなパターンが見えてきます。

  • すぐに記録する
  • 再利用が容易になるように分類する
  • インターネットを使って共有する
  • 便利なWebサービスを利用する

私のライフハック

このうち、最後を除くと個人版のチケット駆動開発といった感じです。これまで、ひとりチケット駆動開発にはメールをチケット代わりに使ってきたので、googleのカレンダーやToDoを使う感じですね。SoftBankの通信速度が少し不満ですが、より大量の情報を扱えるので悪くない感じです。

情報共有ではEvernoteとかgoogleのnoteを利用して、どこでもメモを残す感じですね。

かつてPalm系のSONY CLIEを持っていた頃と比べると、ネットがつける分だけリアルタイムになり、情報共有も母艦に縛られなくなって、かなり楽に感じます。

私にとって最大のポイントは最後の「便利なWebサービスを利用する」です。これまでも携帯の頃からジョルダンの乗換案内を使ってきましたので、これを専用アプリにして、PCで見ていた「ぐるなび」を専用アプリ版と「食べログ」アプリにするぐらいですね。

あとは、写真やムービーを取りまくって家族への伝言板としてTwitterに載せれば、私のライフハックは十分です。

旅行での活用

最近、旅行する機会がありましたので、普段のライフハックを活用してみました。まずはホテル、「楽天トラベル」で地図で簡単に検索できて星の数も確認できますが、予算で検索できたり、苦情も読めるのでPCの方が便利でした。でも、当日にホテルの場所を探すときには、GPS付きの地図はとても便利でした。

次に食事場所の検索、これは結構便利です。現在位置周辺のお店を食べログで検索できます。適当に散策しながらお店を探すときに便利です。実は良さそうなお店が見つかったのに、少し離れているからと適当なお店に入ってちょっと失敗しました。

また、PCと同じようにぐるなびでお店を探すのも便利です。お昼に明治40年創業という茅場町の長寿庵に行きました。しかし、iPhoneでは、地図がいけません。慣れていないこともあって、iPhoneの狭い画面で拡大しようとすると変なところが拡大されてチョット大変でした。地図は大きい画面で見るか、印刷したものの方が良いようです。じつは、このお店は地下(三井住友のATMの下)にあるのですが、そのことがわからずに結局電話で聞きました。いざというときに電話できるのもiPhoneならではですね。

このほか、カメラやムービーを活用しました。1台にすべてがあるのは、とても便利です。家族がTwitterを見ていることが分かっていたので、いつもより多めにつぶやきました。

活用のコツ

やはり、iPhoneに向いた使い方は、その場でのアドホックな情報検索でしょう。逆に言うと、あらかじめ行くことが分かっている店なら、PCで検索して地図を印刷しておくことも併用すると良いと思います。

また、写真やムービーを起動していると、デジカメと違いスリープしてくれませんので、意識して止めないと電池が消費します。電車に乗っているとアンテナを検索するので、それだけでも電池を消費することを考えあわせると、予備バッテリーは必須です。ホテルや充電可能な喫茶店、新幹線もN700の窓側かグリーン車をキープして、まめに充電するのも良いと思います。

あと、色々と使っていると写真やムービーが取れなくなることがありました。ホーム画面でホームボタンを2度押ししてプログラムの履歴表示をして、アイコンを長押しして、左上の赤いアイコンをクリックして、プログラムをすべて止めると動くようになりました。複数のプログラムがサスペンドしていて、メモリーが不足していたのでしょうね。

まとめ

最近、Evernoteやmixiでトラブルがあったようです。Webサービスに完全に依存することには、ある程度のリスクが存在します。しかし、ワーク環境や、その場での検索環境として使うなら、これほど便利な環境はないでしょう。何でもかんでもではなく、PCなど他の環境とうまく組み合わせることがライフハックのコツだと思いました。

[iPhone4] incase Snap Case for iPhone 4

左下の金属部分を持つと感度が落ちる問題の対策として、iPhone4のケースが無料配布されています。

申し込み用のソフトであるiPhone 4 ケース提供プログラムで申し込んだincaseのSnap Case for iPhone 4が届きました。これを選んだ理由は、

・おさいふケータイ
・コネクタの露出

の2点です。iPhone4のケースとしてはバンパーが高級感があってお徳だと思うのですが、底の部分のカバーがありません。すでにiPhone4をおさいふケータイとして使っているので、底の部分がないといけません。

とはいえ、すでにTPUケースを使っているので、同じようなものもイマイチです。そこで、選んだのが、Snap Caseです。

Snapcase
このケースは、ボタンやコネクタの部分が開いているのが特徴です。TPUケースはケースの上から「ぎゅっ」とボタンを押す必要があり、操作性が若干悪くなりました。また、コネクタ部があまりあいていないので、イヤホンや電源ケーブルが奥まで刺さりにくい(イヤホンによってはスピーカーから切り替わらない)と言う問題がありました。

Snap Caseなら、ボタン部分と上下が開いています。ボタン操作も容易ですし、コネクタもしっかりとまります。コネクタが奥までささるので、iPhone4でのプレゼンもすこし安心です(ケーブルに爪があればさらに良かったのですが、残念)。

難点はICカードを底面に入れると、ケースがしっかり止まらないことです。これはTPUケースも同じでしたが、上下があいている分だけブカブカしています。この辺は仕方のないところでしょう。

手に持った感じは、以前より薄く感じます。また、表面がすべすべしていて、手触りもわるくありません。

以外だったのは、写真の透明なスタンドが付いていることです。いまのところ購入予定はありませんが、キーボードを使う場合には役に立つかもあしれません。

(8月16日追記)

ボタンを押したままの状態になる場合があるようですので、おさいふケータイにする際はカードをボリュームボタンからなるべく離したほうが良いようです。

[iPhone4] SONY DRC-BT30P Bluetooth ワイヤレスオーディオレシーバー(更新)

SONY DRC-BT30P、イヤホンを選ぶもののいい仕事しています。

購入理由

iPhone4を購入して、特に大きな不満なく1ヶ月がたちました。音楽を聴いていると、気になるのがその重さです。短時間なら気にならないのですが、おじさんなので胸ポケットに入れたまま、長時間歩くと肩がこってきます(きっと無意識に力を入れているのでしょう)。そこで、購入したのがBluetoothオーディオレシーバーです。

Bluetooth 大きさ

大きさは思ったよりも大きく、単3電池を箱に入れた感じです。印鑑ケースよりは小さいですが、大き目のクリップ部分が出っ張っています。本体上部のスペースが狭く、クリップをとめる際に操作ボタンに触れてしまいそうになります。狭い本体部分をつまむ感じで押さえると、うまくとめられます。クリップがしっかりしているので、胸にポケットがなくても、胸元や袖にとめられそうです。

型番

SONYには、DRC-BT30PとDRC-BT30がありますが、流通ルートが携帯か家電かの違いのようで、添付のマニュアル等にも両型番が併記されています。iPhoneとペアリングした際は、DRC-BT30と表示されました。

接続

接続は簡単です。最初にペアリングと言う操作が必要ですが、その後はiPhoneのBluetoothがONの状態であれば、電源の長押しでONするだけでつながります。早送り/巻き戻しはできませんが、再生、停止、ボリューム調整、通話ができます。iOS4.1から曲送り/曲戻しができるようになりました

ペアリング

ペアリングもなんとも簡単でした。まず、iPhoneの設定->一般->Bluetoothで、設定をオンにします。BT30Pの電源を切った状態から、充電用のUSBコネクタのカバーを開けたところにあるペアリングボタンを押して、ペアリングを開始します。iPhoneに接続されましたと表示されるのを1-2分待てば、それで完了です。マニュアルにはPINコードの入力が必要とあったのですが、それも不要でした。

音質とイヤホンの相性

さて問題のイヤホンの相性です。これまでPHILIPS SHE9700-Aを愛用してきましたが、BT30Pを通すと何か音に伸びがなくなり、低音の軽いトントンが強調されて変な感じでした。アマゾンのカスタマレビューに載っているモード切替の方法(電源+再生を7秒長押しで1回点滅させる)を試して、少し音質が良くなりましたが、どうもいけません。

次に、以前使っていたセンハイザーCX300を試したところ、低音が気持ちよくなって、何とか使えそうな感じでした。でも、中高音がどうもおもちゃのような感じでいけません。これまで、iPhone4に直接接続していた時は、SHE9700-A > CX300 >> MDR-EX51LP と思っていましたが、BT30Pを通すと異なるようです。そこで、物は試しでSONY MDR-EX51LPをつないでみました。

これが大正解!これまで高音がシャリシャリして、いまいちだったMDR-EX51LPが最高のバランスでした。高音もすっきり、(好みにもよると思いますが)低音はドンドンと良い感じです。ポップスなどは今までより良い音に聞こえます。ソニー製品の良い音とはこのような音をなのでしょう。良く考えればSONY同士なので、相性が良いのでしょうね。ちなみに、モードは1回点滅の状態です。早送り/巻き戻しはできませんでした。iOS4.1から曲送り/曲戻しができるようになりました

バッテリー

DRC-BT30Pのバッテリーはそれなりに持ちそうです。電源を入れたままで一晩おいてもあまり消費していないようでした。通信がなければ自動的にスリープしてくれるのでしょう。コネクタも汎用的なミニUSBなので、iPhoneの電源コネクタをローソン100のものにすると都合がよさそうです。

問題はiPhone4ですね。こちらも急激に減ると言う感じではないですが、やや消費が早くなった気がしますので、こまめにBluetoothをON/OFFした方が良いかもしれません。

USBコネクタのカバー

取れそうだと思いながらも初めて充電していたら、コネクタを抜く際に取れてしまいました。早すぎです。orz

[HTML5] CharaGene.js のプロパティ: fillTextを使わずに文字を出力してみる4

ある程度ライブラリ化ができました。正式配布用のアーカイブは後日作成予定ですが、ひとまず公開します。JavaScriptはBSDライセンス同等、フォントはM+FONTに従います。

Charagene_demo
ここをクリックすると実行できます。

CharaGeneをnewする際にフォントのイメージと設定を指定します。Canvasのコンテキストと同じように、あらかじめプロパティを設定しておいてputText()を実行します。影やボーダには別の色のフォントをオープンして、そのオブジェクトを設定してかららフラグをtrue後にputText()を実行します(影は同じオブジェクトを設定してもかまいません)。

どのような表示ができるかを、プロパティで説明します。<>内はデフォルト値です。

影付き
    shadowFlag: 影付き文字モード(true/false)<false>
    shadowX: 影のX方向のずれ(ピクセル数)<3>
    shadowY: 影のY方向のずれ(ピクセル数)<3>
    shadowAlpha: 影の濃さ(globalAlphaの値)<0.2>
    shadowCG: 影用のフォント(CharaGeneオブジェクト)<undefined>

ボーダー(ふちどり)
    borderFlag: ボーダーモード(true/false)<false>
    borderX: ボーダーのX方向のずれ(ピクセル数)<1>
    borderY: ボーダーのY方向のずれ(ピクセル数)<1>
    borderCG: ボーダーのフォント(CharaGeneオブジェクト)<undefined>

太字
    boldFlag: 太字モード(true/false)<false>
    boldX: 太字のX方向のずれ(ピクセル数)<1>

イタリック   
    itaricFlag: イタリックモード(true/false)<false>

表示位置
    textBaseline: Y位置("top"/"middle"/"bottom")<"top">
    textAlign: X位置("start"/"left"/"center"/"end"/"right")<"start">

拡大縮小
    rateX: X方向の倍率(1)
    rateY: Y方向の倍率(1)

[HTML5] fillTextを使わずに文字を出力してみる3(影付き)

フォントのイメージを貼り付ける方法ながら、今度は影付き文字を出せるようにしました。

Carageneout3_2

ここをクリックして実行してください。

次はライブラリ化、、、かな?

ソースもフォントイメージもフリーですが、ライブラリ化の際に変更する可能性がありますので、ご注意ください。

つづく

[HTML5] fillTextを使わずにCanvasに文字を出力してみる2

revuloさんや職場のプロに助言をいただいて、少しまともになりました。
Carageneout2実行する場合はここをクリックしてください。
firefox、Crome、iPhone等で動くはずです(IE+uuCanvas, IE+FlashCanvas)。拡大縮小をX・Y独立で指定できます。

今回はフォントのイメージも再作成しました。作成にGIMPを用いるとハーフトーンのところも半透明で、フォントサイズぴったりのイメージが作成できました。
透過レイヤでこのテキストをコピー&ペーストすると作成できます(Yさん、情報ありがとうございました)。

夏休みにライブラリ化を試みる予定です。

つづく

[HTML5] fillTextを使わずにCanvasに文字を出力してみる

HTML5の規格が策定中のためか、ブラウザのサポートもあまり進んでいないようです。Canvasに文字を出力するには、fillTextとstrokeTextがあるのですが、これをサポートしていなかったり(iPhone+iOS3、Android(バージョンによるかもしれません), IE+exCanvas)とか、線の太さを変えられないもの(IE+uuCanvas)があるようです。

とはいえ、図やグラフを出力すれば文字も出したいものです。せめて英数字だけでも出そうと試みました。まだまだ技術的な可能性を確認したレベルですし、そもそもJavaScriptを書くのも初めてなので、まだクラスにもできていなかったり、何度もロードしてやっとfirefoxで動く程度で、Safariが偶然一度だけ動いた状態です(たぶん、onloadを待つ必要があるのでしょう)。

とはいえ、データも作成しましたので、こうかいします。興味のある方は、自由に改造して使ってみてください。ご意見がいただけるとうれしいです。

Carageneout
(左がフォントの中間調を少し残したもの、右が2値にしたもの。クリックすると原寸で表示されます)

<考え方>

有識者に聞くと、divで文字を重ねる、イメージを貼る(遅ければまとめてcssスプライトを使う)などというアイデアをいただきましたが、管理対象が増える、ブラウザ毎の対応が大変、Webのスキルの低い私には壁が高い、という問題があります。そこで、思い出したのが日経ソフトウェアで紹介されていたCraftymind Articleのデモです。

このデモのソースを見ると、<div style="display:none".. としてビデオとCanvasを不可視の状態で置いておき、drawImageでビデオ->裏Canvas->表Canvasとコピーしているようです。2回もコピーして、あのような速度が出るなら文字表示も大丈夫だろうと考えたわけです。

昔のパソコンにはキャラクタージェネレータというハードウェアがあり、ROMにある文字のドットイメージを画面に表示するVRAMに転送していました。その方式はGUIになった今もフォントのイメージをレンダリングによって得ているものの、その後はビデオチップの機能でまとめて転送しているはずなので、今も基本的に変わらない仕組みだと思います。

このキャラクタジェネレータをソフトで実現しようと考えました。上に挙げたデモのように非表示のCanvasを使ってフォントのイメージをまとめて置いておき、表示したい文字をそこから表に転送するのです。

<フォントのイメージ>

さて、そこで気になるのがフォントのイメージをどう手に入れるかと言うことです。

かつてムンパッパなるハンドルで、FM-TOWNS用に縮小印字ソフトを公開したことがあります。このときは、印刷時にTOWNSのROMからフォントイメージを読んでそのマシンのプリンタに出力していました。所有者が同じであること、印刷時に取り出すだけで保存しないことから、私的利用の範囲であると気にしませんでした。しかい、今回は別のマシンで参照され、保存・配布もするので明らかな2次利用になのでライセンスが気になりました。

調べてみると、日本はタイプフェイスを保護する条約に入っていないようですが、MicroSoftなどのサイトによると、Windowsのフォントを利用できるのはWindowsだけのようです(フォントにもよります)。そこで、2次利用に問題のないフォントを探しました。ひとまず欧文256文字(ISO 8859-1)を考えていたこと、等幅フォントでないと配置がめんどくさい、見た目が良かった、ということで、M+ FONTS(アウトライン)を使いました。

手順的には、コードの一覧をつくり表示、キャプチャ、補正、透明化、としました。

1.コード一覧の作成
結構大変でした。Wikipediaの一覧を使おうとしましたが、Unicodeなのでフォントによって2バイトコードのフォントを使うものがあって表の幅がそろいませんでした。英語サイトの方がましでしたがWebで狭い幅にそろえるのは難しかったです。結局、英語のWikipedhiaの一覧からコードを拾ってExcelに貼りました(希望者が折られましたら、差し上げます)。

2.キャプチャ
キャプチャソフトは何でも良いですが、フォントをM+2mにして、ノイズがのらないようにbmpで保存しました。

3.補正
そのまま使うと中間調の部分が多いので、Paint.Netで少し減らしたものと2値のものを作成しました(上のイメージのように中間長の部分は透明にならないので)。また、等幅フォントはプログラミングを考慮してゼロの中央に点があるのですが、使いにくかったので消させていただきました。

4.透明化
shin's Palette PNG Editorで透明色を指定しました。

<開発>

プログラム自体はリンクを見ていただければ分かりますが、イメージの構成に自由度を持たせたことで計算式がややこしいぐらいで大したことはありません(JavaScriptをあまり知らないので時間がかかりましたが、、、)

<今後の野望>

いずれiOS4やIE9が普及すれば用なしになりますが、イメージのかたまりを渡しておいて好きなところに配置できるので、様々な場面で使えるかと思います。ゲームを作っても面白いかもしれません。

ということで、こんな野望を持っています。

・表示されない問題をなくして、fillTextの使えないブラウザにも対応する。
・クラス化してライブラリにする
・拡大縮小をサポートする
・設定ファイルを読むようにする
・フォントのイメージファイルをそろえる
   :
・擬似グラフィックでゲームを作る

どこまでやるかはわかりませんが、コメントをいただけるとうれしいです。

つづく

« 2010年7月 | トップページ | 2010年9月 »