Posted by & filed under 開発.


Logo-webrtc

先週、社内で WebRTC の勉強会がありました。WebRTC は Web ブラウザを使ってリアルタイムコミュニケーション(RTC)することを目指したプロジェクトまたは API のことです。W3C によって仕様の標準化が進められています。詳しくはプロジェクトサイトを参照して下さい。

WebRTC:
http://www.webrtc.org/

勉強会で紹介されたコードを試してみて、「Sencha Touch のカスタムコンポーネントにすると面白いのでは!」と思い、早速作ってみました。ただ、肝心のコミュニケーション部分の API はまだラップしていません。。今のところ、デバイスのカメラやマイクからストリームデータを取得する API をラップしただけです。今後、追加していきたいと思います。

Usage

– 単純に、デバイスのカメラと繋いでページに出力する場合

これだけで OK です。ページを表示すると、カメラに接続する許可を求めるメッセージが出るので、許可して下さい。

image1

API を使ってストリームが取得できた場合は、ページに映像が出力されます。

image2

対応していないブラウザの場合は、エラーメッセージを表示します。

image3

– 取得したストリームを加工して出力する場合

useEffect オプションを true にすると、Canvas を使ってストリームを出力します(※通常は video タグを利用しています)。effectFn オプションでは関数、もしくは予め用意しているエフェクトの名称を指定します。 monochrome と指定すると、画像をモノクロ加工して出力します。

image4

Conclusion

実は、スマートフォンの標準ブラウザは WebRTC をサポートしていません。。現状スマートフォンで WebRTC の API が使えるのは Chrome for Android(29以降)、Firefox(24以降)、Opera Mobile(12以降)のみです。気になる safari ですが、今後対応するかは未定の模様。とはいえスマートフォンの Web アプリでビデオチャットができるのは夢がありますよね! 今後の普及に期待して、このコンポーネントのメンテナンスを続けていこうと思っています。

– デモ
http://kawanoshinobu.com/apps/webrtc

– リポジトリ
https://github.com/kawanoshinobu/Ext.ux.WebRTC


関連文書:

Posted by & filed under 製品.


Smart Frameworkはアリエル・ネットワーク株式会社が提供するスマートデバイス向け業務アプリケーションの開発プラットフォームです。スマートフォンやタブレットなど様々なデバイスで動作する業務アプリケーションを簡単に作成できます。作成したアプリケーションはSmart FrameworkのWebデータベース上で動作します。

このクイックスタートでは「フォトレポート」アプリの作成を通してSmart Frameworkの利用方法を解説します。Smart Frameworkの魅力をぜひご体験下さい。

このガイドで学ぶこと

システムの概要

Smart Frameworkでは、アプリケーションや文書、それらの設定文書などから構成されます。Smart Framework内部では、アプリケーションや文書などをすべてリソースという単位で保持します。これ以外にもユーザやグループなどのシステム内のデータも全てリソースとして保持します。

リソースとスキーマとデータ

リソースは、データとスキーマと呼ばれる設計情報で構成されています。設計情報はアプリケーションや文書が保持できるデータやその振る舞いを定義しています。データは設計情報に従って実際にユーザが入力した情報のことです。

アプリケーションと文書

リソースは、その特徴に応じて複数の種類に分類されます。代表的なものにアプリケーションや文書があります。

アプリケーションは、自分自身の中に他の種類のリソース(文書)を保持できます。また、保持している文書を一覧するビューやフィルター機能、それらのCRUD(作成・閲覧・更新・削除)機能などを提供します。

文書は、アプリケーションの中に複数作成されます。エンドユーザが主に作成、閲覧するのはこの種類のリソースになります。文書の保存時や表示時などに特定のビジネスロジック(JavaScript)を実行することもできます。

各リソースは、複数のフィールドで構成されます。フィールドは、リソースに保持するデータの型(文字列や数値型など)や値の許容範囲などを規定します。

このガイドで作成するアプリケーション

「フォトレポート」アプリはスマートデバイスのカメラで撮影した画像をチーム内で共有するアプリです。次の4つの情報を登録して共有します。

37 36 38

それでは「フォトレポート」アプリの作成を始めましょう。

デザイナーの起動

Smart FrameworkのアプリケーションはWebベースの開発ツール「Designer(デザイナー)」を利用して作成します。Designerは次の手順で起動します。

1. Smart FrameworkのWebデータベースにログインします。

1

2. 左上の「menu」->「テナント管理・運用」->「アプリ管理」から「スキーマ管理」を選択して、スキーマ管理画面に遷移します。

2

3. ツールバーの「アプリ連携」から「Designerを開く」を選択して下さい。

3

4. 新しいウィンドウでDesignerページが開きます。

4

プロジェクトの作成

アプリケーションは「プロジェクト」と呼ばれる単位で管理します。プロジェクトはDesignerから次の手順で作成します。

1. 画面左上にある「新規プロジェクト」アイコンをクリックして、作成ウィンドウを開きます。

5

2. 「新規プロジェクト名」に「Photo Report」と入力して「OK」ボタンをクリックします。

6

以上でプロジェクトの作成は完了です。

アプリケーションの作成

プロジェクトが作成に続いて、実際のアプリケーションのひな形を作成します。プロジェクトの作成に続いて表示されるダイアログで、アプリケーションの名前と、アプリケーション内に作られる文書名(文書種別)を指定します。今回はアプリ名も文書名も同じ「Photo Report」にします。

7

画面左上のプロジェクトウィンドウにアプリケーションの構成が表示されています。「Photo Report」プロジェクト配下に「Photo Report」アプリが配置されます。アプリケーション作成直後の「Photo Report」アプリは「Photo Report」文書と「新規ビュー」ビューの2つで構成されます。

8

文書の作成

Smart Frameworkでは様々な種類のフィールド(ウィジェット)を文書に追加できます。画面左上のプロジェクトウィンドウで文書を選択した後、プレビュー画面右上の「フィールド追加」ボタンをクリックして下さい。文書に追加できるフィールドが一覧されます。

9

まずは写真データを登録するために「ファイル」フィールドを追加します。「フィールド追加」で表示されるポップアップから「ファイル」アイコンをクリックしてフィールドを追加します。

10

「プロパティ」を設定して、追加したフィールドの表示形式や動作を切り替えます。プレビュー画面でファイルフィールドを選択した後、左下の「プロパティウィンドウ」で「タイトル」プロパティに「写真」と入力して下さい。プレビュー画面のフィールドのタイトルが「写真」に変わります。また、登録できるファイルの種類を限定するため「ファイルの種類」プロパティを「画像ファイルのみ」に変更します。

11

続いて、コメントを入力する「リッチテキスト」フィールドを追加します。追加した「リッチテキスト」フィールドの「タイトル」プロパティを「コメント」に設定します。

12

最後に、撮影場所の情報を登録するフィールドを追加します。Smart Frameworkでは、端末のGPS機能を使って、現在地の住所を指定したフィールドに反映させることができます。最初に、「住所」フィールドを追加し、「タイトル」プロパティを「撮影場所」と設定します。

13

次に「位置情報」フィールドを追加し、「住所」プロパティに追加した「住所」フィールドを指定して下さい。これで端末から位置情報を取得すると、上の「住所」フィールドに現在地の住所が表示されるようになります。

14

以上で文書の作成は完了です。

ビューの作成

続いて「一覧」画面に関する設定を行います。左上のプロジェクトウィンドウから「新規ビュー」ビューを選択して下さい。一覧画面のプレビューが表示されます。

15

右上のフィールド追加ボタンから「タイトル」フィールドを追加します。プレビューの一覧に「タイトル」列が表示されます。現在のSmart Frameworkでは一覧にタイトルしか表示できませんが、今後、複雑な一覧ビュー(グリッドビュー)を表示・設定できるようになります。

16

以上でビューの作成は完了です。

ツールバーの編集

ツールバーに文書に対する操作(文書の作成や編集、削除など)を実行するボタンを配置します。ツールバーは「一覧」画面「文書」画面それぞれに配置されています。プロジェクトウィンドウから文書を選択し、プレビュー画面左上にある「ツールバーの編集」ボタンをクリックして下さい。ツールバー編集画面が表示されます。

17

アプリケーションの作成直後は、「複製」や「移動」ボタンがデフォルトで設定されています。「フォトレポート」アプリでは「複製」や「移動」は行わないため、これらのボタンを削除します。「操作」ボタンをクリックして表示されるポップアップの「複製」ボタン上で右クリックを押して下さい。「削除」というポップアップが表示されるのでクリックすると「複製」ボタンが画面上から削除されます。同じ要領で、「移動」ボタンも削除して下さい。

18

以上でツールバーの編集は完了です。

アプリアイコンの設定

Smart Frameworkでは、アプリごとに「ウェブクリップアイコン(ホーム画面にリンクを追加した際に表示されるアイコン)」を設定できます。
開発の仕上げに、このアイコン画像を指定します。アイコン画像は別途、作成しておいてください。

プロジェクトビューの「画像ファイル」項目を選択して、画像選択画面が表示します。

19

「追加」ボタンをクリックして、ホーム画面のアイコンに指定する画像をアップロードします。画像をアップロードすると、アイコンのプレビューが画面に表示されます。

20

その後、「ウェブクリップアイコン」プロパティでアップロードした画像を指定します。

** Coming Soon. **

21

以上でアプリケーションの開発は完了です。

Web データベースへのプロジェクトの配備

Designerでは、アプリの設計情報を生成するだけです。実際に動作するアプリを作成するためには、Smart FrameworkのWebデータベース上に設計情報を配備する必要があります。Designerの上段にある「プロジェクトの配備」ボタンをクリックして、Webデータベースにプロジェクトを配備します。

22

アプリケーションの作成

以上でDesginerでの作業は完了です。これからはWebデータベースの設定を行います。
Webデータベースに配備後、実際に動作するアプリのインスタンスを作成します。

プロジェクトの配備が完了したら、「組織」にアプリのインスタンスを作成します。作成するアプリのインスタンスは、各組織ごとの持ち物になります。

組織に複雑な階層構造を持たせて、組織ごとに別々のアプリを利用したり、組織ごとに利用するアプリを制限できます。デフォルトでは最上位に位置する組織がひとつできています。ここでは、最上位組織の直下にアプリのインスタンスを作成します。

「menu」->「テナント管理・運用」->「ユーザー・グループ管理」から「組織管理」を選択して、組織管理画面に遷移します。組織管理画面では、アプリケーションの作成の他、所属するユーザーの作成・設定を行います。また、実際の会社組織を反映した階層構造でユーザや組織を管理・運営することもできます。

23

ツールバーの「作成」ボタンから「アプリ作成」ボタンをクリックします。

24

ポップアップ表示されるプロジェクトの一覧から「フォトレポート」プロジェクトを選択して、アプリケーションの作成ダイアログが表示します。

25

「アプリ名」に「フォトレポート」と入力し登録すると、アプリ一覧に「フォトレポート」アプリが追加されます。

26

以上でアプリのインスタンスの作成は完了です。
アプリのインスタンスの作成後は、アプリの設計情報を更新してプロジェクトを配備するだけで、最新のアプリを利用できます。インスタンスを再度作成したり、更新する必要はありません。

ユーザーの作成

Smart Frameworkのアプリを利用する場合、全ての操作にユーザ認証が行われます。各文書やアプリごとにアクセス制御され、ユーザの操作が制限できます。会社の組織構造のように、全てのユーザーはひとつ以上の組織に属します。

複雑な組織構造を形成して、ユーザーの属している組織ごとにアクセス制御を細かく設定することも可能です。ここでは簡易的に再上位の組織にユーザーを作成しています。

ユーザーは次の手順で作成します。

1.「menu」->「ユーザー・グループ管理」から「組織管理」を選択して、組織管理画面に遷移します。ツールバーの「作成」ボタンから「ユーザー作成」を選択します。

28

2. 作成ダイアログで、「日本語名」「ユーザーID」「パスワード(PC)」「メールアドレス」を入力して登録します。ユーザー情報には「英語名」や「上司」「秘書」など実際の運用で役に立つ情報を登録できますが、今回のガイドでは解説は割愛します。

「日本語名」に作成するユーザの名前を入リョウクします。「ユーザーID」はメールアドレス形式を入力してください。「パスワード(PC)」は数字と英字と記号を含む8文字以上の文字列を指定します。最後に、「メールアドレス」には「ユーザーID」で入力したものと同じものを入力下さい。

29

3. ユーザを作成すると、ユーザー一覧に作成したユーザーが追加されます。

30

利用者へのアプリケーションの配布

最後に、利用者にアプリケーションを配布します。Smart FrameworkのアプリはWebアプリのため、利用者には作成したアプリのURLを伝えるだけで配布でます。アプリをアップデートしても利用者は何もする必要がなく、アプリにアクセスすれば常に最新の状態で利用できます。

アプリのURLは次の手順で配布します。

組織管理画面のアプリ一覧にある「フォトレポート」アプリをクリックして、アプリの一覧ページに移動します。

** Coming Soon. **

26

一覧のツールバーにある「アプリの通知」ボタンを選択すると、利用者にアプリのURLを伝えるためのフォーム画面が表示されます。送信先ユーザを設定して登録すると、利用者にメールを送信します。

** Coming Soon. **

26

利用者は、スマートデバイスからこのURLにアクセスして、アプリを利用します。

アプリケーションの利用

利用者がスマートデバイスからアプリのURLにアクセスすると、まず初めに認証画面が表示されます。利用者は認証完了後にアプリを利用できます。

31

認証完了後、一覧画面が表示されます。一覧画面では登録されている文書が一覧表示されます。

32

右上の「アクション」アイコンをタップすると、ツールバーで設定したボタンが表示されます。

33

「作成」ボタンをタップすると作成画面に遷移します。作成画面では、Designerを使って指定したフィールドが配置されています。

34

「写真」項目の「アップロード」アイコンをタップして、写真データを添付します。

35

位置情報取得ボタンをタップして、現在地を取得します。取得後、撮影場所フィールドに現在地の住所が補完入力されます。

36

右上の「登録」ボタンをタップして文書を保存します。保存した文書は一覧に追加され、他のユーザーからも閲覧できるようになります。

37 38

アプリをすぐに利用できるよう、ページをブックマークしてホーム画面に追加しておくと便利です。ウェブクリップアイコンとして指定したアイコン画像がホーム画面に表示されます。

39

まとめ

以上でSmart Frameworkを使ったアプリの作成は完了です。ここまで読み進まれた方は、簡単な手順でアプリケーションが作成できることを実感頂けたと思います。今回ご紹介した機能はSmart Frameworkのごく一部の機能です。実際に業務アプリケーションを運用するにはさらに複雑な機能が必要になりますが、それらに対応できるだけの豊富な機能がSmart Frameworkには含まれています。


関連文書:

Posted by & filed under いろいろ, 勉強会.


今年のゴールデンウィークにIBM Impact2013に初参加しました。3ヶ月以上も経過しています。今ごろ報告ブログを書きます。

公式情報は下記URLからたどれます。もっとも、このURLでは来年Impact2014に置き換わってImpact2013の情報が探せなくなりそうです。

http://www.ibm.com/impact

IBMのサイトは昔から「変わらないURL」に対する意識が低いので困ります。ティム・バーナーズ=リー言うところのクールURI(“Cool URIs don’t change”)のかけらもありません。意識と言うより、使っているシステムのせいかもしれませんが。と言うのも、IBMサイトで裏にNotesを使っている場合のURLの醜さは救いようがないからです。上記URLの先は裏がNotesでは無さそうなので、少しマシなようです。

IBMの反クールURIの件は10年ぐらい前から文句を書いているので、今日はこれ以上書くのはやめにします。

今回、初のラスベガスでした。

行く前に、空港にもカジノが置いてあると聞いていました。なので空港での驚きはありませんでした。しかし、ホテルに入った時の目の前の景色は想像以上でした。フロアの大半がカジノです。片隅にあるフロントを探すのに苦労したほどです。カジノを薄着の女性たちが闊歩しています。酒なのか薬なのか知りませんが全般的にフラフラ歩いています。そして場全体が葉巻の煙でもうもうとしています。ホテルに入って早々、場違いなところに来てしまった感が満載でした。なお、滞在中、昼間のラスベガスも歩きましたが、燦々とした日差しの下、健全そうな家族連れが大挙して街を歩いています。昼と夜があまりにも対照的な街です。

ラスベガスの話はさておき、IBM Impact2013の話です。

クラウド、モバイル、ソーシャル、ビッグデータの4キーワードの連呼です。と言っても、このキーワード自体に驚きはありません。オラクルもHPも同じキーワードを並べています。何かにフォーカスするでもなく、全部同じように並べてしまうのがIBMらしい、というぐらいでしょうか。

少し驚いたキーワードの連呼はSOA(Service Oriented Architecture)です。日本にいるとSOAは少し前のバズワードで死にかけの印象があります。IBMの中ではSOAは死んでいないようです。会場に設置されている書籍コーナーを覗くと、SOAとタイトルのついた書籍が多く並んでいます。後日、過去のImpactに参加した人に聞いてみると、例年より今年はSOAの印象が強いと言っていました。IBMによると、モバイルの時代なのでSOA復権らしいです。理屈はわかりません。

製品の主役はWebSphereブランドです。IBMで壇上にあがる偉い人たちは軒並みWebSphere担当なんとかという肩書きです。ただ、そもそもImpact自体が元々WebSphere系列のイベントらしいので(たとえばDB2関連のイベント、Notes関連のイベントは別にあります)、単にそれだけの理由だと思います。

個人的には、アプリケーションサーバとしてのWebSphereに良い印象はありませんが、世間的には昔よりだいぶマシになったという評判のようです。今回、やたらとWebSphereが軽い速いとアピールしていました。WebSphere Libertyは起動が速いと言い張っていました。Java EE6のWeb Profileだからです。本当かどうか知りませんが、昔のWebSphereよりはたぶん速いのでしょう。

ところで、IBMのJavaあるいはJava EEに対するスタンスは微妙です。と言うのも、今やJavaはオラクルのものだからです。今回のImpact2013の一部のセッションでも、Polyglotという名目でJava以外の選択肢も考えたほうがいい、と受講者に訴えていました。そのセッションでIBMが推したのがNode.jsでした。この選択は意外でした。意外でしたが、Node.jsがサーバサイドJavaの置き換えになるのは考えづらいので、IBM的にもJava依存を脱する具体策はまだないようです。しばらくはWebSphereより上のレイヤで勝負するつもりのようです。

WebSphere以外で目新しくアピールされていたのは、モバイル開発基盤のWorklight、プライベートクラウドのSmartCloud Enterprise通称SCE、垂直統合基盤のPureSystemsです。WebSphereがアプリケーションサーバ以外の周辺システムを含むブランドになっているのと同じように、モバイルまわりはWorklight、クラウドはSCE、垂直統合のハイエンド機はPureシリーズとしてブランド化されつつあります。

今回、Worklightが目立っていました。前年買収されたばかりの新顔が大出世です。WorklightはApache Cordovaをベースにサーバ側の管理機能や開発環境などを作り込んだ製品です。Cordovaに馴染みがない人も、AdobeからASFに寄贈されたPhoneGapのオープンソース版と言えば、なるほどと思うかもしれません。Cordova(PhoneGap)はハイブリッドモバイルアプリを作るための基盤技術です。

モバイルアプリの開発方法は、HTML5ベース、ネイティブ、ハイブリッドの3種あり、その中でハイブリッドが正しい選択だというのがIBMの言い分です。同じ主張を以前、アシアル社の田中さんからも聞きました。アシアル社のMonacaとIBMのWorklightは同じCordovaベースで、似た戦略の製品です。ちなみに、IBM曰く、WorklightはMEAP(Mobile Enterprise Application Platform)という分野の製品です。

日本IBMの人からもWorklightいいよと散々売り込まれていますが、今のところ、自分はHTML5ベース派です。

WorklightのクライアントサイドJavaScriptのライブラリのデフォルトは(IBM推しの)Dojo Toolkitライブラリです(オプションでSencha TouchとjQuery Mobile)。IBMはやたらとDojo推しです。自分のまわりで使っている人を知らないので出来がわかりません。

垂直統合のPureシリーズは筐体も見ましたが、Oracle Open Worldで散々Exdataの筐体を見慣れてしまったので特に何も感じませんでした。ハードウェアやソフトウェアのスペックを聞いてもあまり頭に入ってきません。想像力が足りないせいかもしれません。

IBMのクラウドの基盤はSmartCloud Enterprise(SCE)です。日本ではSmartCloudの商標をNTTに取られてしまったため、SmarterCloudにせざるをえなかった悲しい歴史があるSCEです。

IBMがSCEのIaaS基盤として使うのがOpenStackです。

行く前から知っていましたが、IBMのOpenStackへの力の入れ様は想像以上でした。Impact後、日本でHPのイベントにも参加しましたが、HPのOpenStackへの入れ込み方も相当なものでした。かつて対Windowsのため、敗者の大手ベンダー(大手ですがマイクロソフトにこてんぱんにやられたベンダー連中)がLinuxに集結した動きを思い起こさせるようなOpenStackへの集結です。今回の敵はもちろんAWSです。アマゾンにやられまくった大手ベンダーがOpenStackで巻き返しをはかる構図です。御大のストールマンがOpenStackをGNU/OpenStackと呼べと言い出したらこの構図は完成すると思っています。

最後に、今回のImpactの収穫のひとつがGrady Boochの講演を聞いたことです。UMLには一言たりとも触れませんでした。Booch自身が出演の面白くないビデオを上演していました。本人が楽しそうなのでそういうものなのでしょう。


関連文書:

  • 関連文書は見つからんがな

Posted by & filed under .


先週、”Sencha Touch in Action” のペーバーバックが手元に届きました。

sencha-touch-in-action

Sencha Touch in Action は、ちょうど Sencha Touch を触り始めた 2 年くらい前にお世話になった本です。当時はまだ執筆中で、MEAP(Manning Early Access Program)で読んでました。そんな Sencha Touch in Action ですが、先月、ついに正式に出版されたようです。改めて読んでみて、やっぱりよい本だと感銘を受けたので、今回ご紹介させて頂こうと思いました。

ちなみに書評は英語でも書きました。物好きな方はこちらもどうぞ => http://kawanoshinobu.com/2013/08/book-review-sencha-touch-in-action

What I liked

著者の Jay Garcia さんは、Sencha コミュニティではとても有名なエンジニアです。Modus Create という Sencha 関連技術に強みを持つ開発会社の CTO 職に就いており、Ext JS の初期の頃から、フォーラムの質問に回答したり、ブログ記事やチュートリアル動画を公開したりと、他のエンジニアが Sencha フレームワークをうまく使いこなせるようコミュニティに貢献されてきました。今回出版した Sencha Touch in Action の他に、Ext JS in Action の著者でもあります。

Sencha Touch in Action の魅力は、そんなベテラン開発者である Jay Garcia さんの長年の経験が凝縮されている点にあると思います。解説の所々にちょっとしたコラムが登場するのですが、これがなかなか面白くて、こういった内容が書けるのは長くフレームワークに携わってきたからこそだと感じました。

もちろん、本題のフレームワークの説明も分かりやすいです。コンポーネントモデルの解説ひとつを取っても、ただ仕様を述べるだけでなく、内部の動きを踏まえながら、かなり詳細に説明しています。この本で学んだコンポーネントのライフサイクルに関する知識には、開発でハマった時に、かなり助けられました。また、Sencha Touch の仕様の中で特に難しい部分がデータパッケージだと思うのですが、これらに関しても、詳細に説明してくれています。データパッケージを扱った Capter 8 では、Sencha Touch 2.1 から導入されたリストコンポーネントの無限スクロールについても解説されていて、最新の動向にちゃんと対応している点も素晴らしいです。

本の中で特に気に入っているのは Chapter 10 です。この章では、Sencha Touch のクラスシステムに関する解説と、実際にカスタムコンポーネント、カスタムプラグインを作る方法についてステップ・バイ・ステップで説明しています。Twitter のタイムラインにあるようなスワイプするとアクションリストが表示されるコンポーネントを作るのですが、ドラッグイベントと CSS3 の transform3d をうまく組み合わせる実装は、なるほどと感心しました。Jay Garcia さんは先月行われた Sencha Con 2013 でも Sencha Touch のカスタムコンポーネントを作る方法について講演されていて、どうやら、このテーマは彼の得意分野のようです。Sencha Con でのスライドはこちら => 「Sencha Touch Custom Components」http://www.slideshare.net/moduscreate/creating-custom-component

ところで、本書にはたくさんのサンプルコードが登場するのですが、当初は、その独特のスタイルが気になっていました。具体的な以下のようにイコールやコロンの位置を揃えるスタイルです。

気になったのは自分ではやらない書き方だからですが、ある日、このスタイルを試してみたところ、コードが奇麗に見えることに気づきました。今ではすっかり気に入っていて、個人的なプロジェクトでは、このスタイルを採用しています。

What I didn’t like

Sencha Touch は巨大なフレームワークなので、この本ではカバーしていないトピックも結構あります。ネイティブパッケージングやテーマのカスタマイズ、Sencha Architect の解説は含まれていません。この本は Sencha Touch に関する全てのトピックを網羅したガイドではないので、そこは API ドキュメントと併用する必要があります。

また、ちょっと残念なのが、Sencha Cmd が本の最後で紹介されていることです。本来であれば、最初から Sencha Cmd をベースに解説した方が、初めて学ぶ方には分かりやすいように思います。Sencha Cmd は執筆開始時点では存在していなかったので仕方ないですが、、このあたりは執筆期間が長期に渡った弊害のように感じます。

Final Thoughts

本の中で特に印象に残った一文があります。カスタムコンポーネントを作るポイントについて述べた箇所ですが

So, the lesson is, don’t ever be afraid to look at the source code. Even if you don’t get it at first glance, you’ll learn something along the way and will be able to create some pretty awesome UI goodness.

とフレームワークのソースコードを読むことの重要性を述べています。私も Sencha Touch を使いこなす鍵はフレームワークのコードを読むことだと考えていて、このアドバイスには深く共感しました。そして本書は、これまで発売されたどんな Sencha Touch の解説書よりも内部動作の解説に重きを置いています。Sencha Touch の使い方を学ぶのに適しているだけではく、フレームワークのソースコードを読む際のガイドとしても、この本は役に立つのではないでしょうか。え、英語だから読みづらい? そんな方には、こちらの本が「パーフェクト」とか書いてあるし、お勧めです :)


関連文書:

Posted by & filed under いろいろ.


開発部の栗田です。End-to-Endテストの効率化をテーマにプレゼンを行いましたので概要を紹介させて頂きます。

繰り返しのテストを自動化してくれるSelenium WebDriver。(以下WebDriverと呼びます)

過去長い時間マニュアルテストをしていた私には、夢の様なツールで大好きです。

スモークテストを自動化して、随分助けて頂きました。

 

しかし確認作業を全部自動化出来るかというと、実はそうでは無いようです。値の検証は得意で動作テストは概ね自動化できそうですが、「見た目の不具合(レイアウトバグ)」を見つけるのは苦手だと思います。

 

レイアウト確認をマニュアルで行おうとすると、確認に至るまでの操作もマニュアルで行う事になります。そうなると、動作確認を自動化するするメリットが減ってしまいそうです。

そんな苦手分野を克服する方法の紹介です。

 

<目的は時間の削減、自動化は方法、半自動でも時間を削減できる>

自動化を始めた頃、私は自動化が目的になっていた時期がありました。完全な自動化が難しいと理解した頃、目的が叶えられないと錯覚した事もありました。でも重要なのは時間の節約ですね。

自動テストの目的は時間の節約です。

こんな振り返りをするのは今回紹介する、今回ご紹介する方法が、全自動ではなく半自動を目指したものだからです。

全自動は夢としてとっておいて、まずは半自動でテスト時間を短縮したいと思います。

 

<概要>

WEBエレメント単位で画像抽出、それをドット単位で比較して、見た目の変化を見つける方法です。

WebDriverはスクリーンキャプチャ*を撮影する事、エレメントの座標とサイズを得る事ができますが、これらを使いつつ実現します。

*厳密には IEDriver と FirefoxDriver はdocument 全体の画像キャプチャを返しますが、ChromeDriver はスクリーン範囲のみのキャプチャを返します。document 全体に統一してほしいところです。

<全画面スクリーンショットの撮影 + 画像の自動比較 + 目視確認>

まずは、部分画像ではなく「全画面(ドキュメント)画像比較」をした場合の確認です。

良いところ:

  • 動作テストに、全画面スクリーンショット撮影の処理を加えておけば、レイアウト確認は画像を見るだけでテストを完結出来ます。これだけでも、レイアウト確認に必要だった操作手順を省略する事ができます。
  • また、画像一致の確認を自動的に行う事で、目視確認するものは変化のあった画像だけに絞る事が出来ます。

悪いところ:

  • 画像に少しの変更があるだけで目視確認が必要になりますが、例えば共通UIのフッターの文言が変更されるだけで、全部の画像確認が必要になってしまいます。
  • 大きなストレージが必要になります。確認の度に全画面の画像を保存するのは、いかにも無駄が多そうです。プロジェクトによっては現実的な容量を超えるかも知れません。
  • 全画面を比較対象とすると、自動であっても多少は時間が掛かります。

使用するメソッドなど:

  • 画像の撮影は、WebDriverのget_screenshot_as_fileメソッドなどで可能です。

# python code

driver.get_screenshot_as_file(‘tmp_full.png’)

  • 画像の比較は、ドットデータを配列変換する任意の画像ライブラリで実現可能です。(私はPython の scipy.misc.imread を使用しています)

# python code

from scipy.misc import imread

test_img = imread(“/validation/0001.png”,1) # rgb を格納した配列を得られる

latest_img = imread(“/latest/0001.png”,1)

bools = test_img == latest_img

bools.all()

その他:

  • 画像の確認と更新は、それ用にWEBページなどを用意しておくと効率的です。差異のある部分を強調表示するViewを用意すれば、ヒューマンエラーを軽減できると思います。

 

<エレメント単位のスクリーンショットを撮影 + 画像の自動比較 + 目視確認>

本題の「WEBエレメント単位で画像比較」したらどうなるかの考察です。

全画面撮影ではノイズが多い事、データ量が多い事が問題でした。これらを回避しています。

良いところ(前項に加えて):

  • 比較する画像範囲を絞った事で、ノイズとなるケースが大幅に削減されます。
  • 必要なストレージ容量が大幅に削減されます。下記は仮の数値ですが現実的な容量に収まりそうです。

A) 確認項目数 = 10000

B) 環境数 = 6

C) 1画像の平均容量 = 200KB

D) 不一致となる場合の画像数の割合 (仮に5%) = 500

(A + D) * B * C = 必要な容量

(10000+500) * 6 * 200KB = 約 12 GB

※数値は仮のものです。

使用するメソッドなど(前項に加えて):

  • エレメントの位置とサイズの情報は、WebElement の location と size で取得可能です。
  • javascriptのgetBoundingClientRect メソッドでも、取得可能です。リクエストの往復回数を減らせるので、お勧めです。driver.execute_script メソッドで js を実行して確認できます。(確認環境 IE10, Chrome 28, Firefox 22.0 on windows7)

/* javascript code */

var e = document.querySelector(css_string);

var bc_rect = e.getBoundingClientRect();

bc_rect.left;  // left座標を取得できます。ほか座標も同様に取得できます。

  • エレメント画像の切り抜きは、一般的な画像ライブラリで出来ると思います。(私はPython の PIL を使っています)

# python code

from PIL import Image

img = Image.open(‘/tmp/0001.png’)

rect_info = [left, top, right, bottom] # 各座標を格納した配列

cropped_img = img.crop(rect_info)

cropped_img.save(“/latest/0001.png”, “PNG”)

部分画像としたことで、目視確認数、データ量の問題を大解決しています。

後記の「確認されている事象」で、ノイズとなるケースを紹介しています。プロジェクトによってはノイズ量が多くなるかも知れません。御参考まで御覧頂ければと思います。

<その他のメリット>

画像比較をベースとした自動化を行うと、次のようなメリットも期待できます。

  • 不具合があった場合、取得済みの画像を添付すれば、バグレポートの文章量を削減できる。
  • 複雑な確認内容を画像比較とすれば、テストスクリプトをシンプルに出来そう。

 

<確認されている事象>

次のケースではWEBエレメントのStyleに変化が無い場合でも、画像が微妙に変化する事が確認されています。

確認対象 : IE10, Chrome 28, Firefox 22.0 on windows7

エレメントの位置とサイズ情報の取得方法 : WebElement の location と size

発生状況 : 確認対象のWEBエレメントのposition (top, left ) に float 単位で変化した場合

事象1:エレメントのposition(top, left)が1ドットずれるケースがある。(確認した3環境で発生)

事象2:エレメント中のブロック要素などが1ドットずれるケースがある。(確認した3環境で発生)

事象3:フォントのアンチエリアスの掛かり方が変化する。(IE10で発生)

 

事象1と2について

各ドットの確認時に上下左右1ドットのずれを許容する事で回避できました。(IE10については事象3により未確認です)*

*1ドット幅のborderなどは無視されるはずですので、どちらのメリットを取るかは判断が必要です。

 

事象3について

ClearType フォントと sub-pixel フォントが原因のようです。簡単なテストでは、9割程度が不一致となりました。

(テスト内容:top, left をそれぞれ0.0から0.9まで変更した切り抜き画像(10 * 10 = 100画像)を、それぞれを他99画像と比較)

ClearTypeの設定をオフにしましたが、あまり改善は見られないようです。(9割→8割5分程度)

sub-pixelについては、調べた範囲では解除方法が提供されておらず、別の方法を検討中です。

<まとめ>

今回紹介した部分画像比較の方法は、前述の通りテスト時間の短縮を目的としたものです。

ノイズが多くなる場合も、テストプロセスは自動化できる為、テスト時間の削減が期待できるほか、

「その他のメリット」で紹介した点も合わせると、総合的にテストを効率化できる方法になっていると思います。

自動テストの出来る事は、他にもいろいろ有りそうです。

また、折を見てご紹介したいと思います。


関連文書:

  • 関連文書は見つからんがな

Posted by & filed under .


技術評論社から「コーディングを支える技術」を献本してもらったので読みました。

著者の西尾さんはサイボウズラボの数少ない生き残り著名人です。たぶんお会いしたことはないと思います。もしかしたら西尾さんが今ほど有名になる前にどこかで会っているかもしれませんが。

最近のサイボウズラボはどんなものかとWebサイトを見たら、新着情報も不明で、かつCopyright表記も2011年で止まっていました。でも中の人が元気そうなのでいいのでしょう。IBM社の基礎研の人によると、IBM基礎研の人数はIBM全体の社員の約0.1%だそうです。個人的に、IT業界全般で0.1%ぐらいは俗世間から離れた研究をしていいと思います。0.1%ぐらいの人たちは、役に立つとか役に立たないとかそんなつまらない俗世から離れてよいのです。業界の健全性のために必要なコストです。

本の感想に戻ります。

とにかくまず読みやすいです。すらすら読めます。それだけでも才能です。

この本の楽しみ方は読み手によりだいぶ違うと思います。今まで考えたことがなかった新しい視点を楽しむ人もいれば、プログラミングの基本知識をこの本で得る人もいると思います。自分は、豆知識集としてこの本を楽しみました。同時に、疑問点を放っておけない著者の態度に技術者魂を感じました。この本はプログラマの資質をはかるリトマス試験紙に使えそうです。著者の好奇心に共感できるなら、プログラマの資質があると思うからです。

本に書いてある豆知識はそれなりに知っていましたが、知らないことも多々ありました。

たとえば例外処理の歴史的事情は意外に知らず、この本ではじめて知ったことがいくつかあります。例外処理の構文を提案する論文が1975年にJohn Goodenough氏によって発表されていたのは初耳でした。またfinallyの原型とも言うべき構文がマイクロソフト発という話も知りませんでした。

本書で一番興味深いのは、第8章の「型」と第11章の「オブジェクトとクラス」です。オブジェクト指向がしっくりこない人はぜひ読んでみてください。ただ万人にわかりやすい説明かは不明です。人によっては余計に混乱する可能性もあります。その場合、オブジェクト指向の考え方は自分に向いていないと諦めて、他のパラダイムで生きる決意をしたほうがよいかもしれません。オブジェクト指向をわかっていたつもりだったのに、この本を読んで混乱した気分になったら、たぶんわかっていたつもりで本当はわかっていなかったのだと思います。わかっていたつもりを暴き立ててくれる本は貴重なので、わからせてくれたことに感謝しましょう。


関連文書:

  • 関連文書は見つからんがな

Posted by & filed under 開発.


開発部 川野です。昨日、キャノン IT ソリューションズ様主催の Sencha セミナーで講演させて頂きました。講演は、テキストエディタを使って Sencha Touch アプリを開発する、という内容です。参加者の方からとても元気が出る嬉しいフィードバックを頂いたので、興奮そのままにこの記事を書いています。

セミナーの後、何人かの方から、私の開発環境についてご質問を頂きました。私の個人的な環境ですが何かのお役に立てれば、ということで公開します。

===

◆テキストエディタ

Sublime Text 2

Web エンジニアは UNIX 系のテキストエディタ(Emacs, Vim)を使う人が多い印象ですが、私は Sublime Text を使っています。Sublime Text も Emacs や Vim のようにカスタマイズできるテキストエディタなのですが、後発なだけあって、これまでのテキストエディタの優れた部分をうまく盗んでいるように思います。Sublime Text のちょっとした歴史は昨年の PyCon で発表した私のスライドを見ると面白いかもです。また、インターフェイスの美しさも魅力です。私はテキストエディタを使ってプレゼンする機会がたまにあるので、この部分も気に入っているポイントです。

以下のようにカスタマイズして使っています。

– Vintage モード

キーバインドを Vi 風に変更するモードです。デフォルトのキーバインドを使った方がいい、という意見もあるかもですが、コードを素早く編集するには Vi のキーバインドの方が優れていると感じています。

– スニペット

Sencha のエンジニアが作っているスニペットを利用しています。ちょうど数日前、Sencha の Robert Dougan さんが最新のスニペットを公開していました。以下のものを利用するとよいと思います。

Sencha.sublime:
https://github.com/rdougan/Sencha.sublime

あとは、オライリーから今年の秋に出版される Sencah Touch Cookbook の著者の Lee Boonstra さんもスニペットを公開しているので、そちらを試してみてもよいかもです。

Sencha-Sublime-Snippets:
https://github.com/savelee/Sencha-Sublime-Snippets

– プラグイン

デフォルトのままでも十分に使えるのが Sublime Text のとっつきやすい点ですが、加えていくつかのプラグインを入れています。

SublimeLinter:
https://github.com/SublimeLinter/SublimeLinter

ソースコードのリアルタイムチェックができます。裏側では JsHint を利用するので、Node.js と JsHint のインストールが必要です。

SublimeBlockCursor:
https://github.com/netpro2k/SublimeBlockCursor

Vintage モードを利用する人は必須かと。ノーマルモードの際にカーソルがブロックになって見やすいです。

SublimeAllAutocomplete:
https://github.com/alienhard/SublimeAllAutocomplete

現在開いているファイルから入力した文字にマッチするものを探して補完してくれます。私は Sencha Touch の全てのコードが書かれた sencha-touch-all-debug.js を常に開いていて、このプラグインを使って IDE がやってくれるようなコード補完を実現しています。

SideBarEnhancements:
https://github.com/titoBouzout/SideBarEnhancements/tree/st3

サイドバーの機能を拡張してくれるプラグインです。

他にも細々としたものを入れていますが、おすすめは以上です。

あと、テーマに Phoenix を、カラースキームに Tomorrow を使っています。

◆ターミナル

シェルは Zsh を使っています。最近、Oh MyZSH を入れましたが、まだちゃんと使っていません。Zsh も機能を拡張することが可能で、入力を自動補完してくれる auto-fu.zsh はとても便利でおすすめです。

auto-fu.zsh:
https://github.com/hchbaw/auto-fu.zsh

◆その他

Live Reload:
http://livereload.com

ファイルを編集した後、毎回ブラウザをリロードしなくてもよいので、とても捗ります。

Grunt.js:
http://gruntjs.com

よく行う作業をタスクとして定義しています。手作業を減らせるので、とても捗ります。Node.js が必要です。

weinre:
http://people.apache.org/~pmuellr/weinre/docs/latest

実機で起こった問題をデバッグする時に重宝します。モバイル Web アプリの開発では、端末固有の問題に悩まされるので覚悟して下さいw こちらも Node.js が必要です。

===

ざっと書きましたが、何か漏れているかもしれませんw 少しでも参考になれば幸いです。

Sencha セミナーの参加者・関係者の皆様、どうもありがとうございました。とても楽しい時間を過ごすことができました。寝不足でデモンストレーションがグダグダだった点はお許し下さい :D


関連文書:

Posted by & filed under いろいろ, 勉強会, 開発.



昨年の PyCon JP 2012 に引き続き、今年の PyCon APAC 2013 in Japan でもありえるえりあアリエル・ネットワークはシルバースポンサーとして協賛することになりました。

昨年までの PyCon JP ではなくアジア太平洋地域に向けた PyCon APAC を開催するという事で、国内外の様々な開発者が集まったりするんじゃないでしょうか。楽しそうですね。
参加登録はこのページから行えるようなので、皆様是非参加しましょう。

PyCon は、Pythonユーザが集まり、PythonやPythonを使ったソフトウェアについて情報交換し、交流するためのカンファレンスです。 PyCon APACの開催を通してPythonの使い手が一同に集まり、他の分野などの情報や知識や知人を増やす場所とすることが目標です。

今年で4回目となる PyCon APAC ですが、今年は初めて日本で開催します。PyCon APACはアジア太平洋地域の PyCon として、過去3回シンガポールで開催されました。

PyCon APAC 2013 about より

 

開催概要
チュートリアル 2013-09-13(金)
カンファレンス 2013-09-14(土)-15(日)/td>
開発スプリント 2013-09-16(月・祝)
テーマ The Year of Python
会場 工学院大学 新宿キャンパス
参加者数(予定) 500
トラック数(予定) 英語2
日本語2
参加費 5000円(EarlyBird)
運営 PyCon JP 実行委員会 PyCon APAC 2013 運営チーム
連絡先 2013@pycon.jp

関連文書:

  • 関連文書は見つからんがな

Posted by & filed under .


社内で「TaPLで殴りあう会」が開催されるというので、型システム入門(通称TaPL: Types and Programming Languages)を購入したものの、内容が難しくて序盤からまったくと言っていいほど読み進めることができませんでした。

しかし、読めないままにしておくのは悔しいし、内容はとても面白そうなので、やはりちゃんと読めるようになりたい。
そこで基礎的な書籍とWebで情報収集してから再度挑戦したところ、なんとか読み進められるようになりました。

監訳者さんによると、序盤のいくつかの章と中盤以降の好きな章を読めば読んだことになるらしいので、ここでは11章までを読むために必要になった知識をまとめてみたいと思います。

続きを読む


関連文書:

  • 関連文書は見つからんがな

Posted by & filed under いろいろ.


RhinoでgotoとかArrow Functionとかやって遊んでたら、CTOに「Rhinoはオワコン、時代はNashorn(意訳)」と言われたのでNashorn触りました。

ビルドの方法はこの辺を参考にしました。
https://wiki.openjdk.java.net/display/Nashorn/Building+Nashorn

個人的にどの程度メタプログラミングができるか気になったのでParser部分を呼び出してみました。

NodeVisitorに各構文のenter/leaveをハンドリングできるメソッドが用意されているのでesprimaレベルの使い勝手が期待できます。ただRhinoのJavaAdapterが見当たらなかったのでNodeVisitorを継承するコードがECMAScript invalidな構文になってしまうあたりはあまり好みではありません。あと私が試したバージョンだと暗黙の文字列変換にバグがあって、TokenType#toStringがnullを返すとConsString内でNullPointerExceptionになります。

ちなみにConsStringは文字列のRope表現をするためのクラスで、LispのCons Cellと同じ構造をしています。Rhinoにも同名のクラスがあり微妙に実装方法が違うので興味があればコードを読んでみると面白いと思います。


関連文書:

  • 関連文書は見つからんがな