投稿日:

すごい広島 #6 でテスト駆動開発の読書

すごい広島とは 広島のエンジニアやウェブデザイナーが毎週集まって、 もくもくしたり Hackしたり 読書したり する場所です。

先週は欠席したので、今週は第6回でした。

「テスト駆動開発による組み込みプログラミング――C言語とオブジェクト指向で学ぶアジャイルな設計」という本を読み始めました。

テスト駆動開発による組み込みプログラミング ―C言語とオブジェクト指向で学ぶアジャイルな設計
テスト駆動開発による組み込みプログラミング ―C言語とオブジェクト指向で学ぶアジャイルな設計

posted with amazlet at 13.06.26
James W. Grenning
オライリージャパン
売り上げランキング: 40,430
Amazon.co.jpで詳細を見る

原著 Test Driven Development for Embedded C のページからサンプルコードをダウンロードして、make しながら読み進めました。

組み込みの開発はするかも知れないし、しないかも知れないのですが、NVDA に組み込まれている eSpeak や libLouis のようなライブラリも、一種の組み込みソフトウェアとしてとらえています。

この本で使われているツールは Unity と CppUTest なのですが、ダウンロードしたサンプルコードの中にどちらも入っていました。
VisualStudio のプロジェクトファイルも入っているのですが、Cygwin か Mingw で make all するほうがしっくりきます。
著者は Eclipse の CDT で、ファイルを保存したときに自動的にテストが走るようにしているそうです。。

著者のJames W. Grenningさんの講演は5月にアジャイルジャパン広島サテライトに参加して拝聴しました。講演の内容はプログラミングというよりも開発者の文化とか理念のお話でしたが、そのときにこの本が紹介されたのを、今頃になって思い出したのです。

今日読んだのは最初の100ページくらいなのですが、テスト駆動開発の「王道」がきっちり実践されているので驚いています。
C言語を教える大学の情報系カリキュラムで、アルゴリズムと並行してこういう実践をさせたら、すごいことになるんじゃないかと思ったり。。

オブジェクト指向開発とかテスト駆動とかいう話は、たいていプログラミング言語と結びついて語られるわけです。そして、この本は、C言語でアプリケーションそのものをオブジェクト指向的に書いたりはしないようです。でも、テスト駆動開発に必要なエッセンスを、素材であるC言語で、どう実践したらいいのか、見せてくれます。
しかも、律儀に、テストを書く、失敗させる、コードを書く、成功する、という繰り返しを読者にしつこく提示します。

テスト駆動は「何を使うか」ではなくて「いかに実践するか」なのだなあと改めて思いました。
ツールの仕様だけを覚えても、思想やスキルは身につかないということですね。。
この本の面白いところは、バージョン管理ツールについて一切言及がないところです。
これだけテスト駆動を実践すると、どこでコミットするかとかブランチを切るかとか、普通はやるんですけど。。
ただ「継続的インテグレーション」の説明の中で、バージョン管理ツールとのつながりそのものは語られているので、おそらく、話題を発散させないためにわざと削ったのだと思えてきました。

そんなわけで「C言語をカッコよく使いこなしてみたい」と思わせてくれる本です。

投稿日:

すごい広島 #4 で Twitter API の勉強

すごい広島とは 広島のエンジニアやウェブデザイナーが毎週集まって、 もくもくしたり Hackしたり 読書したり する場所です。

ということで、今週は第4回でした。

NVDA の作業をしようかと思ったのですが、たまたま Twitter API 1.0 が今日終了したということで、あちこちでソフトやサービスが動かなくなったという話を聞き、久しぶりに Twitter API の勉強をしました。

よく考えたら、Twitter API はなんどか使ったことがあるのでした。最初に勉強したのは Twitter4r という Ruby のライブラリでした。。

まずは Apigee で Twitter API 1.1 を叩いてみます。OAuth 認証もやってくれて、JSON で情報が返ってきます。簡単ですね。。簡単すぎてつまらない。。

The Qube というスクリーンリーダー対応の Twitter クライアントは Python で書かれていて Tweepy というライブラリに依存しているという話。
なにかライブラリを試してみようか、ということで、調べたら Tweepy の他に Python Twitter というものが見つかりました。

せっかくなので使ってみました。
が、タイムラインが取れて、ツイートができることは確認できたものの、GetFollowers などを使うと

twitter.TwitterError: [{u’message’: u’Rate limit exceeded’, u’code’: 88}]

になってしまい、うまくいかず。。

そもそも Twitter で何をしたいのか深く考えてなかったので、久しぶりに音声対話アプリを書いてみました。

書いたのはこんなコードです。

Windows 8 でこのプログラムを起動して、「今日はWindowsで音声認識を使うプログラムを作りました」「コンピューターいまのをツイートして」といえば、Windows 内蔵の日本語音声認識と日本語音声合成で、下記のようにツイートができました。

「コンピューターツイッターを読んで」といえばタイムラインを読んでくれます。

Python でこういうライブラリを使うと HTTP も JSON も文字コード変換もほとんどお任せでいいから便利ですね。。

静かな「もくもく作業の場」でひとりコンピューターに向かってしゃべり続けてしまい、すみませんでした。今度から突発的に音声認識アプリが書きたくなったときに備えて、常にヘッドセットを持参しようと思います。。

最近は Mac OS X や Chrome ブラウザにも音声認識機能がついてたりしますが、Windows 8 はクラウドでなくコンピューターの中で音声認識と音声合成をしています。でも作ったものが Twitter アプリだから、やっぱりネットワークにつながってなくてはならないわけで、違いをアピールしにくいです。。

今日は使いませんでしたが dragonfly – Python-based speech recognition framework – Google Project Hosting は SAPI と Dragon の音声認識APIラッパーらしいです。アプリケーションごとの音声コマンドのライブラリが充実している印象ですが、フレームワークがここまでやるとローカライズが大変かも。。

ところで、今週土曜日にはNVDA広島勉強会を行います。よろしくお願いします。

追記（6月14日）

Twitter クライアントの Qube は無事に API 1.1 対応したそうです：

投稿日:

AngularJS と NVDA

<htmlday> 2013 ということで AngularJS で遊ぼう という勉強会に参加しました。

AngularJS は Web アプリケーション開発のフレームワークということで、簡潔に書けて保守性が高いのが特長、らしいです。

しかし、生産性の高い開発手法という話を聞くと「それってアクセシビリティは大丈夫なの？」とつい思ってしまいます。
そこで、angularjs.org のトップページのビデオで紹介されていた TODO アプリケーションのサンプルをスクリーンリーダー NVDA 日本語版 と Firefox の組み合わせで確認しました。

書かれたマークアップは内部で標準的なHTMLに変換されているので、フォーカス移動などはちゃんとできるのですが、チェックボックスにフォーカスしたときに、その右側にある項目名を読み上げないので、何の操作をするチェックボックスなのかわかりません。

ふと aria-labelledby でやればいいんじゃない？ と思ったので、下記のように直したところ、うまくチェックボックスの項目名を読み上げるようになりました。

最初は id をつけるために todos モデルに通し番号のプロパティを追加したのですが、後で $index という特殊プロパティがあることを教わったので、todo.js 側のコントローラーとモデルは書き換えないで実装できました。アクセシビリティのための処理が View だけで完結するのは素晴らしい。AngularJS なかなかよさそうなのでもうちょっと勉強してみたいと思います。

<htmlday>とは、日本全国でWeb制作者／開発者向けのイベントを同日に開催することで、日本のWebを一層盛り上げようという「お祭り」だったそうで、私も貢献できればと思いブログを書きました。
ちなみに広島市中心部は「とうかさん」というお祭りの季節です。。

以下のソースでは bootstrap.css と Underscore.js を使っています：

<!doctype html>
<html ng-app>
  <head>
    <script src="angular.js"></script>
    <script src="underscore.js"></script>
    <script src="todo.js"></script>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="todo.css">
  </head>
  <body>
    <h2>Todo</h2>
    <div ng-controller="TodoCtrl">
      <span>{{remaining()}} of {{todos.length}} remaining</span>
      [ <a href="" ng-click="archive()">archive</a> ]
      <ul>
        <li ng-repeat="todo in todos">
          <input aria-labelledby="label{{$index}}" type="checkbox" ng-model="todo.done">
          <span id="label{{$index}}">{{todo.text}}</span>
        </li>
      </ul>
      <form>
        <input type="text" ng-model="todoText"  size="30"
               placeholder="add new todo here">
        <button ng-click="addTodo()"><i></i>Add</button>
      </form>

      <button ng-click="clearCompleted()"><i></i>Clear Completed</button>
    </div>
  </body>
</html>
// todo.js
function TodoCtrl($scope) {
    $scope.todos = [
	{text:'learn angular', done:true},
	{text:'build an angular app', done:false}];
    $scope.addTodo = function() {
	$scope.todos.push({text:$scope.todoText, done:false});
	$scope.todoText = '';
    };
    $scope.remaining = function() {
	var count = 0;
	angular.forEach($scope.todos, function(todo) {
	    count += todo.done ? 0 : 1;
	});
	return count;
    };
    $scope.archive = function() {
	var oldTodos = $scope.todos;
	$scope.todos = [];
	angular.forEach(oldTodos, function(todo) {
	    if (!todo.done) $scope.todos.push(todo);
	});
    };
    $scope.clearCompleted = function() {
	$scope.todos = _.filter($scope.todos, function(todo) {
	    return !todo.done;
	})
    };
}
投稿日:

すごい広島 #3 に行って勉強した

すごい広島とは 広島のエンジニアやウェブデザイナーが毎週集まって、 もくもくしたり Hackしたり 読書したり する場所です。

ということで、今週は第3回でした。私は最初の参加（広島Git勉強会から数えて2回目の参加）です。

たまたま「プロになるためのJavaScript入門」という本を読んでいるところなので、最初の文法の説明を「写経」することにしました。

プロになるためのJavaScript入門 ~node.js、Backbone.js、HTML5、jQuery-Mobile (Software Design plus)
プロになるためのJavaScript入門 ~node.js、Backbone.js、HTML5、jQuery-Mobile (Software Design plus)

posted with amazlet at 13.06.05
河村 嘉之 川尻 剛
技術評論社
売り上げランキング: 88,262
Amazon.co.jpで詳細を見る

こまかい作業は私の Wiki サイト JavaScript のページに書いたのですが、例えば、なぜ下記のようなものが出てくるのか、いろいろ打ち込んでみてやっとわかってきました：

> new String({})
{ '0': '[',
'1': 'o',
'2': 'b',
'3': 'j',
'4': 'e',
'5': 'c',
'6': 't',
'7': ' ',
'8': 'O',
'9': 'b',
'10': 'j',
'11': 'e',
'12': 'c',
'13': 't',
'14': ']' }

丁寧に書くとこういうことですね：

> new String(({}).toString())

JavaScript では new Object は {} と書けるので、({}) は toString() すると “[object クラス名]” という形式の文字列リテラルが得られる。これを与えて String ラッパークラスに与えるので、その（文字列リテラルではない） String オブジェクトの内部表記である { ‘0’: ‘[‘, ‘1’: … のような結果が返ってくる。。

前から読もうと思っていたCategorizing values in JavaScript という記事 がまさにこういう話だった。。

こんなことをもくもくやっていたのですが、集まった人たちがそれぞれ、もくもく何かをやっている状況は、とても刺激的でよい雰囲気でした。

この「すごい広島」は勉強内容は自由ですが、記録や報告に git/github や Markdown を使うルールになっています。共同作業の練習になるので、興味のあるかたはぜひ。

投稿日:

NVDA 講習会でやったこと

6月の VIC ステップアップ講習会で NVDA 日本語版の紹介をしました。

やった内容を紹介します。

（１）導入から入力ヘルプまで

NVDA 日本語版の最新バージョンは http://i.nvda.jp でダウンロードしてください。

NVDA のインストーラーを起動して、3種類の使い方があることを説明。
Tabで移動、スペースで「同意する」のチェックボックスの操作、スペースでボタンを押す操作。

NVDA の起動。ようこそ画面に書いてある「NVDAキー」の説明。ノートパソコンでは「無変換」を使うのが便利。
NVDA+N で NVDA メニューを開いて、ヘルプ（サブメニュー）からもう一度「ようこそ画面」を開いてみるなど。

ダイアログはEnterキーで閉じられる。メニューはEscキーで閉じられる。

NVDA メニューを開いていないときも NVDA はずっと動いている。

NVDA+1 を押して「入力ヘルプモード」を体験する。押したキーの説明。NVDA+N を押すとわかるように「NVDAコマンドの説明」にもなっている。
入力ヘルプモードで NVDA+1 を押すと入力ヘルプモードの解除。

（２）NVDA の設定

NVDA メニューで「キーボード設定」を確認する。今回は「ラップトップ」配列でやっていただいた。

アクセラレーターキーで項目の移動やチェック状態の変更ができるが、慣れるまでは使わなくてよい。

項目は Tab で移動。そろそろ Shift+Tab で逆方向移動も。

読み上げの中止は Ctrl で、中断（再開）は Shift で。

音声設定で「速さの変更」と「記号読み上げレベル」だけ試していただく。

記号読み上げレベル「読まない」にしたら、比較のためにもう一度「ようこそ画面」を開いてもらう。

この記号読み上げレベルは NVDA+P でも変更できる。

（３）ユーザーガイドで「一文字ナビゲーション」を体験

NVDA メニューの「ヘルプ」から「ユーザーガイド」を開いてもらう。

目次はリンクになっているので、Tab で移動して、スペースでリンク実行（ジャンプ）できる。

覚えるコマンド（ラップトップ配列）：
NVDA+A （すべて読み上げ）
H と Shift+H （見出しジャンプ）
1, 2, 3, 4 （Shiftで逆方向、レベルを指定して見出しジャンプ）
左矢印と右矢印（１文字ずつ確認）
上矢印と下矢印（NVDA内部で文として扱われている単位での移動）
NVDA+L （現在の行の読み上げ）
NVDA+T （タイトルの読み上げ）

ユーザーガイドはアプリケーションなので Alt+F4 で終了。

（４）オブジェクトナビゲーションに挑戦

オブジェクトとは？ Windows の画面に表示されるあらゆるもの。
Windows 7 の例を見せながら「電卓」で１ケタの足し算に挑戦。

スタートメニューから電卓を起動。
Alt+Tab （アプリケーションの切り替え）で、デスクトップと電卓が切り替わる。

電卓を起動すると「結果を表示しているオブジェクト」が現在位置で、「０」と出ている。

電卓がどんな画面なのかは、簡単にあらかじめ説明しておく。

Alt キーを押すとメニューに移動できて、上下に移動できることも確認。
Esc を押してメニューを閉じ、さらに Esc を押して元の場所に戻る。

まず NVDA+Shift+下矢印 で「内側のオブジェクト」があるかどうか確認する。
そして NVDA+Shift+左（右）矢印で前後に「オブジェクトがありません」と言われるまで移動してみる。
これで3方向を確認したことになる。

NVDA メニューと違ってオブジェクトは「上下が階層の移動」「左右が階層の中での移動」なので注意。

いよいよ上に移動する。行き過ぎると「デスクトップ」まで行ってしまって、戻るのが大変になるので注意。

Windows 7 の場合は、結果を表示するダイアログと、もう一つ名前のない「ダイアログ」がある。
名前なしダイアログに30個くらいボタンがある。NVDA+Enterでボタンを押せる。
「１」「加算」「３」「等号」と押せば、結果表示ダイアログに戻ってきたときに「４」と出ている。

Tab 移動で操作できないアプリケーションでも、NVDAのオブジェクトナビゲーションはこのように活用できる。

続きはぜひユーザーガイドを読みながら練習してみてください。

こんな感じで2時間の講習でした。
この内容は NVDA-KR の英語ポッドキャスト の第1回から第3回の前半までの内容を、ちょっと削ってコンパクトにしたものになっています。
最後の内容はまほろばさんの記事を参考にしました。
いずれ私もポッドキャストを作ったほうがいいなあと思っています。

実演には開発中の「フォーカスハイライト」アドオンを使いました。
ダウンロードは下記からどうぞ：
focusHighlight-0.0.5.nvda-addon

広島では7月から8月にかけて、何度か NVDA の講習会を行う予定です。詳しいことが決まったら、このブログなどでご案内します。

追記（7月28日）：focusHighlight のリンクを更新しました。
講習会の告知は広島市広報誌の7月15日版に掲載されました。ご報告が遅くなって済みませんでした：
視覚障害者向けパソコン音声ガイドソフト講習会

投稿日:

広島Git勉強会に参加しました

広島Git勉強会に参加しました。

BzrからGitに乗り換えたときの話、と言いつつ NVDA のブランチ（チケット駆動開発）の話をしました。

NVDA が分散型バージョン管理システム Bazaar に移行してから、NVDA 日本語版は「ブランチとマージ」を活用してソースコードを管理することを心掛けてきました。

今回は NVDA 本家の機能ブランチとリリースブランチの運用方法を紹介して、さらに、NVDA日本語チームがどうやってリリースごとに日本語版のブランチを運用しているのか、ローカルとリモートのリポジトリをどのように使っているのか、といったお話をしました。最後に、Bazaar のエコシステムがうまく回らなくなったので Git に移行した、という1か月前の出来事に触れました。

Ustream 配信の録画

Git はエコシステム的には大成功しているツールですが、使い方は簡単ではありません。いろいろな人のお話を聞いていると、自分が使いこなしていないオプション、設定、使い方もいろいろ気づくことができました。

最後に交流会かと思わせて すごい広島 に参加者を巻き込んだ github flow の実習。ウェブサイトの場合は master ブランチを常にデプロイ可能な状態にしておくブランチ運用がいいよね、という話の実践でした。github のissueやプルリクエストなどの機能をみんなで体験しました。

6月2日：内容を追加しました。