Skip to content

Enterprise HTML5 Seminar 2017レポート(3)「HTML5時代のUIテスト自動化」

先日行われましたEnterprise HTML5 Seminar 2017のセッション内容について紹介します。幾つかのセッションは非公開となっています。今回は新日鉄住金ソリューションズ システム研究開発センター hifive開発チーム 石川 真也による「HTML5時代のUIテスト自動化」の内容を紹介します。


20160118_pitalium_%e7%b4%b9%e4%bb%8b_%e5%85%ac%e9%96%8b%e7%94%a84

HTML5によって多彩な表現が可能になりました。円グラフなどもHTML5だけで描けるようになっています。その一方で、ユーザにどう見えているのか、正しく見えているのかというテストが必須になっています。きちんと表示されているか、表示場所は正しいか、表示内容が正しいかどうかといった確認が必要です。さらにマウスを重ねた時の表示など、操作も合わせた表示確認が必要になります。

この表示に関するUIテストと呼んでいます。例えば以下の2つの画面があった時に、いいねボタンのあるなしが違います。これくらいの違いしかないと、目視確認では見落としがちです。

20160118_pitalium_%e7%b4%b9%e4%bb%8b_%e5%85%ac%e9%96%8b%e7%94%a85

次に複数ブラウザ、デバイスの対応とテストという問題があります。HTML5はレスポンシブWebデザインによって一つのHTMLソースで複数のブラウザ、デバイスに対応可能になりました。デザイナーが楽になる一方、ブラウザ間の差異によるレイアウト崩れが起きることもあります。対応ブラウザ、デバイスすべてで表示を確認しなければなりません。今まではIEだけ対応していれば良かったのが、Google Chromeやスマートフォン、タブレットでもテストしなければならなくなりました。特にスマートフォンでのテストは負荷が大きいとよく聞きます。

さらに最近の開発体制の変化によって、短いサイクルでの開発、リリースへの需要が増えています。継続的インテグレーションが一般的になってきており、リリースの度に繰り返しテストを行う必要が出ています。UIテストについても自動化されていないとテストがボトルネックになってしまいます。

一回のテストであれば問題ありませんが、細かくリリースする度にテストをしていたのでは、掛け算的に負担が増えてしまいます。そこで自動化を考える必要があります。

20160118_pitalium_%e7%b4%b9%e4%bb%8b_%e5%85%ac%e9%96%8b%e7%94%a89

しかしテスト自動化を阻む課題が存在します。まず自動化環境やスクリプトの作成、保守コストが大きいという問題があります。ブラウザ間の差異に対応するために同じテストに対してブラウザ毎に個別のスクリプトを書く場合もあります。さらに「画像が正しく表示されること」をどう定義、記述するかという問題があります。

20160118_pitalium_%e7%b4%b9%e4%bb%8b_%e5%85%ac%e9%96%8b%e7%94%a814

この課題に対して私たちが行っているのがPitaliumというツールになります。テストスクリプトの作成を簡略化できます。さらにワンソースで複数ブラウザのテストができます。そしてレイアウトの確認も自動判定で処理できます。Pitaliumではスクリーンショットを比較することでテストの合否判定を行います。テストで取得したスクリーンショットと、予め用意しておいたスクリーンショットを比較してテストの合否判定に使います。最初の実行で保存されたスクリーンショットが正解として保存されます。二回目以降は正解と指定されている画像と比較することによってテストの合否を判定します。もし失敗した場合には正解と失敗の画像を比較して差分で確認できます。もし失敗した場合も正しい仕様変更によるものであれば、新しい画像を正解と定義し直すことができます。

スクリーンショット比較によるメリットとしては人間の目視による判定をなくし、負荷を大幅に減らすことができます。

20160118_pitalium_%e7%b4%b9%e4%bb%8b_%e5%8b%95%e7%94%bb%e3%82%ad%e3%83%a3%e3%83%97%e3%83%81%e3%83%a3


本発表の資料はSlideShareでも公開されていますので、ご覧ください。

banner_02

Enterprise HTML5 Seminar 2017レポート(2)「えっ!ここまで出来るHTML5のフロントエンド。」

先日行われましたEnterprise HTML5 Seminar 2017のセッション内容について紹介します。幾つかのセッションは非公開となっています。今回はオークネット社、オークネット・アイビーエス社による「えっ!ここまで出来るHTML5のフロントエンド。」の内容を紹介します。


我々はこれまでにHTML5を使って業務システムを提供してきています。そこで今回はその試行錯誤であったり、その歴史について紹介したいと思います。

まず最初に事例を紹介します。こちらはリアルタイムオークションになります。車両の売買に関するオークションシステムになります。

百烈商談というのは一気に100台の車両情報をまとめて表示して商談を進めるというもので、これはHTML5とWebSocketを使って構築されています。そして車両を選択すると、より細かい情報がリアルタイムで確認できるようになっています。

次は従来型のオークションシステムをクラウド、HTML5に載せ替えたバージョンで、こちらもWebSocketを使っています。また、フレームワークとしてhifiveを採用しています。

さらに車輌検索システムもHTML5とWebSocketを使った実装となっています。同様に自家用車だけでなくトラック向けの車両検索システムも構築しています。

次は商談の事例です。チャット形式での商談システムをオンラインで提供しており、これまでの電話ではなくチャットによって商談が進められるようになっています。

その他、デバイス検査工程システム、花の受発注・販売管理システム、ディープラーニングによる車輌画像自動判定システム(KONPEKI)も開発しています。

続いてHTML5への取り組みの歴史を紹介します。

そもそもHTML5への取り組みをはじめた切っ掛けはWeb版のリアルタイムオークションを作ろうと思ったからです。2011年当時はJava版のフロントエンドでサービスを提供していましたが、起動時間が遅い、Javaのアップデートが煩雑、スマートフォンへの対応ができないといった課題がありました。こうした問題をHTML5であれば解決できるのではないかと考え、取り組み始めました。

なぜHTML5を使ったのか、についてはHTML5が提供する機能の一つにWebSocketがありました。この新しい通信プロトコルを使えば、Web上でリアルタイムな情報表示が可能であると考えたからです。WebSocketの前提条件としてHTML5が必要でした。

取り組みを開始したのは良いのですが、2011年当時開発者を探すことすら難しい状況でした。100社近い開発会社にコンタクトを取り、面談を行いましたがHTML5とJavaScriptを理解している技術者を見つけることはできませんでした。その後、半年掛けて国外に人材を求めることにしました。私たちが選んだ国はフィリピンでした。フィリピンはFacebook利用率も高く、ハッカーも多いと言われています。フィリピンで人材を集め、教育してHTML5に関するナレッジを培っていきました。

ただ、デザイナーに関して運良く、高いスキルを持った方に出会うことができました(Useful Design 白銀さん)。出会うきっかけとなったのが、2012年当時に作ったリアルタイムオークションのプロトタイプが次の画像になります。

この中央部の円部分はくるくると回るのですが、これをCSS3だけで実装できたのが前述の白銀さんだけでした。そこで彼を中心にWebサイトのデザインを行い、システムの開発はフィリピンで行うという体制ができあがりました。

そこから5、6年経ち現状の技術的課題とその解決法について紹介します。

まず、なぜWebアプリケーションという選択をしたのかについてです。ネイティブアプリ化という選択肢もありますが、Webの場合は「クロスプラットフォーム対応」「バージョンアップが容易」「アプリケーション起動までの時間が短い」といったメリットがあります。

そしてHTML5化によるメリットですが、まずHTMLだけで表現できる幅がとても広がりました。さらにWebSocketという新しいプロトコルが採用できたというメリットがあります。そしてタグが整理され、全体を統一することができました。

HTML5による表現力ですが、Canvasタグによるグラフィックス表現があります。さらにvideo/audioタグを使えば動画、音声出力も可能です。そしてWebStorageやGeo Location、Fileといった新しいAPIが活用できるようになったのは大きなメリットです。HTML5では新しいタグも数多く登場しており、それらを使うことで文書構造が簡潔になり、CSS3によって可読性やメンテナンス性が向上しています。

逆に苦労した部分もあります。例えば使用するHTML5の機能によって対応ブラウザが異なることです。一番辛いのはIEです。また、表現力が増したことでフロントエンド側の負荷が増加し、イベント処理や画像処理速度などに影響が出ます。そして前述の通り、HTML5を熟知しているエンジニアを集めるのに苦労しました。

これらの問題の解決手段として、まず対応ブラウザの違いについては要件定義の時点で対応ブラウザを明確にしなければなりません。HTML5だけで解決できない場合はJavaScriptで実装し、細かく検証作業を行う必要があります。そのためにモックアップを作成し、その上で検証を続けました。

クライアント側の負荷については、画面上に表示されない描画処理をなるべく削ることや、SPA(シングルページアプリケーション)化、そしてクライアントとサーバ間の通信量を減らすことによって負荷を軽減しています。

これはテストの画面なのですが、右側に並んでいるリスト部をお客様によっては1000件ほど登録することがあります。それを単純に描画してしまうと速度が著しく低下してしまいました。そこでスクロールを設けて、表示していない部分は描画しないようにすることで負荷を下げています。

SPAにするとレンダリング処理が画面上の更新される部分のみになりますので、更新されない部分はそのまま描画し続けることができます。これによってページがちらついたり、遷移が軽くなるといったメリットがあります。

クライアントとサーバ間の通信量対策については3つ解決手段があります。1つはWebSocketの利用によってメッセージサイズを縮小しています。さらにJavaScriptの圧縮や画像最適化によって通信量を軽減しています。さらに通信回数についても画像の結合などによって最適化しています。

人材に関する問題は解決することができず、自社で教育体制を築くことになりました。ただし高速なWebアプリケーションを開発するためのガイドラインを自社で作成し、技術の標準化を行っています。

まとめとしてですが、HTML5を業務システムで使うメリットはWebフロントエンド側で様々な処理が可能になったということです。サーバとの通信がなくとも処理できることが増えたため、ネットワーク負荷が軽減されます。画像加工でさえWebフロントエンドで行うことができます。そしてもう一つはなんと言ってもリアルタイムな情報表示が可能なことです。株価、金融情報、メッセージ交換、IoTのセンサーデータ表示など幅広い分野に応用できるでしょう。

Q. hifiveを使っていて、良い点はなんですか?

公式ドキュメントが日本語で書かれています。英語で書かれている場合、私が理解できたとしてもそれを各メンバーに熟知してもらうのは困難と思われます。また、不具合が発生した時の調査がしやすかったという点が挙げられます。

Q. 2011年当時、どうやって周囲にHTML5/WebSocketでいこうと説得したのでしょうか?

元々は研究開発の一環ではじまっています。また、周囲に実際に試してもらうためにゲームをたくさん作りました。もちろんオークションシステムのモックアップも作っています。そうした体感を通じて利点を周知していった形です。

 

banner_02

HTML5 Enterprise Seminar 2017レポート(1)「hifiveで実現するエンタープライズHTML5 Webアプリケーション開発」

先日行われましたHTML5 Enterprise Seminar 2017のセッション内容について紹介します。幾つかのセッションは非公開となっています。今回はまずhifiveチームの下田による「hifiveで実現するエンタープライズHTML5 Webアプリケーション開発」の内容を紹介します。


2008年、今から10年前にiPhone 3Gが日本で発売されました。この年にW3CからHTML5の初期草案が発表されました。そして、そこから6年経過した2014年にHTML5が正式に勧告となりました。これによって互換性、表現力、さらにパフォーマンスの向上が期待されました。そして現在でもWeb Paymentsのような仕様を含めてWebの世界はどんどん拡大しています。とは言え、業務システムという視点で考えると、必要となる機能は備わってきたのではないかと感じています。

そして現在のWeb業務システム開発がどうなのかという視点で考えた時に「モジュール化技術」が一つ注目に値します。アプリケーションが複雑化してきた中で、フレームワークやライブラリが揃ってきてはいるものの、Webブラウザ自体の仕様として大規模なシステム開発に対応できるようになったり、JavaScriptという言語自体も変わりつつあります。Web ComponentsのようなWebブラウザネイティブの機能として部品化を推し進めていくための仕組みができつつあります。

hifive%e3%83%96%e3%83%ad%e3%82%b0%e3%83%ac%e3%83%9d%e3%83%bc%e3%83%881

次にブラウザのバージョンアップについて紹介します。2000〜2005年くらいまではかなり長いスパンでバージョンアップが行われてきました。しかし最近では短いものでは6週間に一回バージョンアップを繰り返すようになっています。バージョンはもはや意味がなく、継続的に開発が続けられるような時代になってきています。HTML5、Webブラウザともに継続的に少しずつ変わっていくのが当たり前になってきました。そうなった時、私たちのような利用する側としては継続的な変化に対応し続けられる仕組みが必要になってきます。

業務システム開発とクライアントのリッチ化

hifive%e3%83%96%e3%83%ad%e3%82%b0%e3%83%ac%e3%83%9d%e3%83%bc%e3%83%882

業務システム開発をなぜ行うのかと言うと、IT投資における維持費用の抑制を目的とし、攻めの投資を行っていくためです。分散、多人数での開発が増えており、オフショアなども当たり前になっています。さらに最近ではスマートフォン向けなどはスモールスタートやアジャイル開発を実践するケースも増えています。さらに運用、保守という観点で見ると、業務の変更に伴って数年から10年以上も改造され続けていくのが業務システムです。

hifive%e3%83%96%e3%83%ad%e3%82%b0%e3%83%ac%e3%83%9d%e3%83%bc%e3%83%883

クライアントがリッチ化するのに合わせてJavaScriptの役割が増えてきています。これまではバリデーションくらいだったのが、一部の業務ロジックもJavaScriptで実装するようになってきています。その際には何らかのフレームワークやライブラリは使っていきますが、結果としてJavaScriptのコード量も増えていかざるを得ません。つまり量も質も増加しています。そこで必要になるのがどこに何を書くのかといった分割、整理するための仕組みです。それによってメンテナンス性を向上させたり、多人数での開発を可能にしていきます。

hifive%e3%83%96%e3%83%ad%e3%82%b0%e3%83%ac%e3%83%9d%e3%83%bc%e3%83%884

これを開発のフェーズ毎に見ていきたいと思います。これはクライアントサイドだから起きる問題という訳ではありませんが、元々サーバサイドで考えてきた問題が、クライアントサイドでも考えなければならなくなってきました。

そういった背景もあり、当社ではhifiveの開発を行っています。

hifiveとは?

hifiveは次世代Web標準を開発した企業Webシステム開発のためのプラットフォームになります。2012年04月にバージョン1.0を公開しています。そして実際の案件の中で使いながら成長を続けています。そして当社にとってははじめての自社開発オープンソース・ソフトウェアとなっています。コンセプトは使い始めるための敷居を低く、Webの標準的な仕組みから逸脱しない、開発サイクルをトータルにサポートするといった点を掲げています。他にも業務システムということもあって、着実な進化と旧バージョンのサポートなども考えた上で開発に取り組んでいます。

hifiveはフレームワークではなくプラットフォームという風に説明しています。フレームワークだけでなく、チャートやグリッドなど業務向けライブラリも多数提供しています。その他開発支援ツールや書籍、オンラインドキュメントなども提供しています。

hifive%e3%83%96%e3%83%ad%e3%82%b0%e3%83%ac%e3%83%9d%e3%83%bc%e3%83%885

コアフレームワークはWebブラウザ上で動作するJavaScriptコードの構造化をサポートしています。なるべく薄い実装にしていて、ネイティブの言語で解決できることはなるべく任せるようにしています。そしてバージョンアップのスピードや互換性維持については十分に配慮しています。

次にライブラリですが、例えばデータグリッド、グラフ構造、チャート、ドローイングなど業務システムでよく使われる大量データの可視化部品など実装頻度の高いUI部品を提供しています。古いブラウザでも使えるよう、チューニングされた部品群で提供しています。

後は開発支援するツールとして、テンプレートエディタ、AP構造視覚化ツール、マルチデバイス対応テスト支援ツール(Pitalium)などを開発しています。

実際に作られたアプリケーションについて

ここから実際の機能について細かく紹介していきます。まず一つ目はフォーム入力、帳票についてです。フォーム入力においてはタブ遷移の順番を適切に制御したり、エンターキーでの移動も行えます。もちろん入力値のバリデーションやエラー表示も行えます。さらにオートコンプリートや入力に応じた選択可能項目の変更、ファンクションキーによるショートカットなどもサポートしています。

次に帳票を表示する部分ですが、非常に要望が多いです。究極的にはExcelのような画面を求められます。ヘッダー固定、ソート、集計行などの機能です。さらにhifiveでは行数が増えた場合にもパフォーマンスが維持できる仕組みも取り入れています。

hifive%e3%83%96%e3%83%ad%e3%82%b0%e3%83%ac%e3%83%9d%e3%83%bc%e3%83%8810

さらにモバイル活用があります。タブレットやスマートフォンの機能を活かした入力を提供します。例えばタッチ操作、GPS、カメラなどです。

これは一例ですが、タブレット向けに作ったWebアプリケーションになります。店舗巡回指示アプリとしていまして、現場を回ってその報告を行うものになります。地図が表示されていますが、これはHTML5のGeo Locationを用いています。さらに要望で多いのが写真・動画撮影であったり、さらにそこに手書きで情報を書き加えられる機能です。

ここで取得したデータはサーバに送られ、デスクトップでも同じデータが確認できるようになっています。なお、今回のWebブラウザはIE11となっており、ちゃんと動作するのが分かってもらえるかと思います。IE11だから、と諦めてしまう声も多いのですが、ちゃんと実現できます。

次にデータ視覚化です。チャート、グラフ構造、データグリッドなどになります。3Dについても取組中です。業務システムでは大量のデータを描画すること、さらに一つの画面の領域の中に多くの情報を詰め込む必要があります。柔軟なレイアウト構造を可能にする部品も提供しています。


%e3%83%87%e3%83%bc%e3%82%bf%e5%8f%af%e8%a6%96%e5%8c%96%e3%82%b0%e3%83%aa%e3%83%83%e3%83%89

hifiveではパフォーマンスに注力しているのですが、その概念を紹介します。グラフやチャートについてはSVGを使っています。さらに大量のデータを表示する場合は見えている部分だけを描画しており、それ以外の部分は消すようにしています。スクロールを行った場合には表示範囲外のオブジェクトについては非表示となっています。さらにイベントハンドラを最適化しています。


hifive%e3%83%96%e3%83%ad%e3%82%b0%e3%83%ac%e3%83%9d%e3%83%bc%e3%83%889

こういったことを実現するためにパフォーマンスのベンチマークを取っています。幾つかの方法があるのですが、一番ベストなものを選択するようにしています。同様に、3Dでも大量データの可視化には取り組んでいて、10,000個の表示時でも15fps程度で表示可能です。hifiveではこのようにパフォーマンスに特に注意して取り組んでいます。


hifiveの講演については、logmiでも記事にしていますので、ぜひご覧ください。

banner_02

HTML5 Enterprise Seminar 2017が開催されました

2017年1月18日、HTML5による業務システム開発の現状と検討プロセス、事例を紹介するHTML5 Enterprise Seminar 2017が開催されました。参加者は総計93名で、セミナールームも満員となっていました。

一部のセッションは非公開となっていますが、公開可能なものは随時記事にして紹介していきます。

セミナーだけでなく、展示ブースについても多数の方に訪れていただきました。

皆さまのご参加誠にありがとうございました。

以下で一部のセッションのレポートを載せておりますので、こちらもご覧ください。

 

banner_02

企業でのHTML5活用が分かる!HTML5 Enterprise Seminar 2017を開催します

企業におけるHTML5活用が広がっている昨今、2017年1月18日にhifiveチームにてHTML5 Enterprise Seminar 2017を開催します!

HTML5 Enterprise Seminar 2017 – hifive

お申し込みページ(Connpassになります)

開催概要

HTML5 は次世代標準のWeb 技術です。スマートフォンを含めたWeb ブラウザの進化や、セキュリティの懸 念による脱ブラウザプラグインの流れもあり、HTML5 に対応したWeb サイトは着実に増えてきています。企業 システムにおいても、使い勝手の向上、高い表現力、マルチデバイスへの対応など の利点を活かすことで、 新しい価値の創出や、既存の業務を変革することができるようになってきました。特に、ここ数年での機能や パフォーマンス面でのブラウザの進化は急速であり、従来なら対象外としていたシステムも含め、HTML5 を 活用した様々な事例が出てきています。

このような事例においては、HTML5 を採用するに至るまでには、機能の使いこなし、これまでのWeb の資産の有効活用、パフォーマンスを引き出すためのノウハウの不足、進化し続けるブラウザへの対応など、多岐に渡る課題の検討が行われています。

本セミナーでは、HTML5 の最新動向や、実際に採用されている企業様から採用に至るまでの検討プロセス、事例についてご紹介頂きます。また、HTML5 のシステムを効率的に開発するためのポイントや、その際に着目されるソリューションをご紹介いたします。それにより、参加者の皆様がHTML5 について理解を深め、採用の検討やHTML5 のパワーを益々活用するための糸口を掴む機会にして頂きたいと思います。

日時

2017年01月18日 13時30分〜18時00分(セミナー)、13時30分~18時30分(ブース)

場所

品川TKPカンファレンスセンター 6F

  • JR品川駅 高輪口 徒歩1分
  • 京急本線 品川駅 徒歩2分

プログラム

13:30 開会のご挨拶

13:35 エンタープライズWebの幕開け ~業務システムにHTML5を使うわけ~

有限会社futomi 代表取締役、株式会社ニューフォリア 取締役 CTO 羽田野 太巳 氏

HTML5はWebのフロントエンドの大きな進歩として話題になり、今では当たり前のように使われている。Webブラウザーから有名なWebサイトを訪れば、それはHTML5ベースで作られいることだろう。
しかし、それがまだ当たり前でない領域がある。そう、企業で使われる業務システムだ。 一般消費者向けのコンテンツは常に技術トレンドをキャッチアップする一方、企業向けシステムは常に保守的で技術トレンドの採用は遅れがちだ。しかし、HTML5をはじめとしたWebフロントエンドの技術は、まだまだ進化し続け、カッティングエッジの技術も登場し続けているものの、その多くはすでに成熟している。 にもかかわらず、企業向けシステム開発において、フロントエンドにWeb技術をあえて採用する理由はあまり理解されていない。それはWeb技術がホームページを作成するための技術であるとの先入観が世間一般に浸透しているからに他ならない。 HTML5をはじめとしたWeb技術がどういった方向性で進化し続けているのかを理解すれば、その応用範囲は多岐に及ぶことが分かるはずだ。 本講演では、HTML5をはじめとしたフロントエンドのWeb技術を企業向けシステムに採用するメリットとデメリット、そして、Web技術の最新動向を踏まえ、今後、Web技術でどこまで業務システムのフロントエンドを置き換えられるのかを占う。

【講演者紹介】

1993年 日本電信電話(株)(NTT)入社。伝送系エンジニアとして通信系インフラの保守運用を経て、通信系SIとして企業通信系システム設計に従事。 1999年 NTTぷららに出向、インターネット接続サービスおよびサーバーのシステム運用、サービス企画に従事し、IPTVサービスの立ち上げに携わる。2004年独立後、(有)futomiを設立し、ウェブ・システム開発の傍ら、ウェブコンサルティングも手がける。 HTML5の気運が高まる以前からHTML5の探求を始め、HTML5の普及啓蒙に関わり、HTML5関連書籍や雑誌記事執筆も行う。2011年 (株)ニューフォリア取締役(最高技術責任者)に就任し、HTML5を使ったコンテンツ作りの指揮を執る。

14:15 休憩

14:20 hifiveで実現するエンタープライズHTML5 Webアプリケーション開発

新日鉄住金ソリューションズ システム研究開発センター hifive開発チーム 下田 修氏

【講演者紹介】

新日鉄住金ソリューションズ株式会社 技術本部 システム研究開発センター所属。「水曜どうでしょう」が好きな北海道育ち。会社ではWebシステム(やや画面寄り)の領域で研究開発を行っており、「hifive」のチーフアーキテクトも務める。学生時代に「Imagine Cup 2007日本大会」で優勝し、シアトルでビルゲイツを前にプレゼンしたのがちょっとした自慢。

15:00 休憩

15:20 HTML5事例紹介1

新日鐵住金株式会社 業務プロセス改革推進部 IT企画室長 寺原 秀明 氏

15:50 最先端フロントエンド開発とは・・・

株式会社オークネット 統括GM 黒柳 為之 氏、フロントエンドエンジニア 大橋 秀紀 氏

16:20 休憩

16:40 HTML5アプリケーションにおけるUIテストのポイントとは(仮)

新日鉄住金ソリューションズ システム研究開発センター hifive開発チーム 石川 真也氏

【講演者紹介】

新日鉄住金ソリューションズ株式会社 技術本部 システム研究開発センター所属。「hifive」リードエンジニア。hifiveの機能開発や対外広報活動に携わる傍ら、見て楽しい・触って楽しいデモアプリの製作にも余念がない

16:55 IT企業/IT技術者のためのHTML5 さらなる優位性の築き方

特定非営利活動法人 LPI-Japan 和田 真輝 氏

ビジネスを効率的に推進してゆく根幹となる業務システムの多くは、クライアントサーバモデルを採用している。業務システムはサーバーサイドで動作することが多く、ITの発展とともに様々な機能をサーバーへ取り込んできたが、クライアントの果たす役割は少なかった。 いち早くHTML5およびその関連技術を導入してきたSNSなどのWebサービスやWebアプリケーションは、クライアント端末の多様化に対応し、またリッチなユーザエクスペリエンスの提供による成功を収めている。 業務システムへのHTML5の導入により、業務システムは新たな進化を遂げる可能性があり、またIT企業/IT技術者はHTML5を習得することで他社(他者)との優位性を築き、差別化を図ることができる。

17:25 HTML5 と Visual Studio tools for Apache Cordova ではじめるモバイルアプリ開発

日本マイクロソフト株式会社 デベロッパー & プラットフォーム統括本部 エバンジェリスト 物江 修 氏

Visual Studio tools for Apache Cordova は Web 開発者が慣れ親しんだ HTML + JavaScriptを使用して、Android、iOS といったプラットフォームを横断したシングルコードでのモバイルアプリの開発を可能にします。このセッションでは Visual Studio を使用した Cordova アプリの基本的な開発方法、Cordova 開発用に用意された Visual Studio のさまざまな機能について紹介します。

【講演者紹介】

2000年よりマイクロソフト、NTTドコモのジョイントベンチャー立ち上げに参加。技術者として.NET Framework を使用した商用ASPサービスの設計と開発に従事。2004年、マイクロソフト・アジアリミテッド入社。インターネット開発製品のサポートエンジニアを経て現職のデベロッパー&プラットフォーム統括本部エバンジェリストとなる。以来、ASP.NET、IIS(Webサーバー)の啓発活動に従事し、現在はEdge、Windows 10 を広く開発者に知ってもらうべく活動中。

17:55 閉会のご挨拶


募集はConnpass上で行っています。ぜひご参加ください!

HTML5 Enterprise Seminar 2017 – connpass

 

hifive – HTML5企業Webシステムのための開発プラットフォーム

banner_02

Mozillaさんとの共催ハンズオンが開催されました

12月17日(日)にMozillaさんとの共催ハンズオン「Firefox 開発ツールハンズオン #3 with hifive」が開催されました。hifiveを使って日報アプリを作りつつ、さらにFirefoxを使ってデバッグを行ってみるというハンズオンです。

前半は日報アプリ作成

前半はhifiveの説明と、日報アプリ作成でした。資料はすべてhifivemania/hifive-ff-handsonにアップされています。内容としては次のようになります。

後半はデバッグ実践

後半はFirefoxを使ってデバッグを行うハンズオンでした。ブレークポイントに加えて条件付きブレークポイント、ウォッチ式などについて実際に試しながら学べる内容になっています。

内容は次のようになります。

最後はもくもく会

最後はもくもく会として、作成したWebアプリケーションを拡張したり、各自目的のWebアプリケーションを開発していました。こちらからトピックを幾つか出しています。内容は先日出版したプロ直伝 業務システム開発のためのHTML5攻略ガイドからピックアップしています。


午後いっぱいを使った長時間のハンズオンでしたが、皆さん満足いただけたようで良かったです。今後もハンズオンを積極的に行っていきますので、ぜひご参加ください。

hifive – HTML5企業Webシステムのための開発プラットフォーム

banner_02

Selenium Conf ’16 こぼれ話: テストのバグを見つけてドローンを当てよう!

この記事はSelenium/Appiumアドベントカレンダー2016の13日目の記事です。

石川@hifive開発チームです。

先日、SeleniumConf’16に参加してきました。
(私のチームでPitaliumというSeleniumベースのテストライブラリを開発しており、Selenium周りの情報収集が主な目的です。)

http://2016.seleniumconf.co.uk/

SeleniumConfはSeleniumのコミッター・ユーザのためのカンファレンスで、
ワークショップ(1日目)やセッション(2,3日目)が催されます。
今回はセッションの紹介ではなく、カンファレンスで見かけた小ネタをご紹介します。

会場内には「休憩所兼スポンサー展示コーナー」のような部屋があり、
セッションの合間も参加者の方々は紅茶を飲みながら盛んに議論を交わしていました。
そんなスポンサー展示コーナーの一角で、おもしろいパネルを発見。

img_1929

テストのバグを見つけてドローンを当てよう!

パネルにはこう書かれています。

(意訳)
なぜこのテストは失敗するのでしょうか?
Seleniumスクリプトのエラーを見つけられた方の中から抽選でドローンをプレゼント!

このパネルはSeleniumConfのメインスポンサーであるSauceLabs社が、参加者向けにプレゼント企画を行っているものでした。

スクリプトは下記のとおりです。皆さんはどこにエラーが隠れているか、わかりますか?

正解発表です!
答えはテストコードをコンパイルしようとするとすぐに分かります。
実はこのJavaコード、実行はおろかコンパイルさえ通りません。

なぜならこの一文がWebDriverのインタフェースに反しているからです。

    WebElement freeTrialButton = driver.findElement("signup");

WebDriver#findElement()は文字通り「DOM要素を見つける」メソッドですが、
呼び出しの際はidを指定するのか、cssセレクタを与えるか、など、
「要素を検索する方法(location strategy)」を明示しなくてはいけません。

参考: https://seleniumhq.github.io/selenium/docs/api/java/org/openqa/selenium/WebElement.html#findElement-org.openqa.selenium.By-

問題文の場合は、「By」クラスのオブジェクトをfindElementの引数に与えることで
検索方法を明示します。

    WebElement freeTrialButton = driver.findElement(By.id("signup"));

さてこの企画、カンファレンスを締めくくる「コミッターパネル討論」の冒頭で抽選が行われました。
抽選の様子はセッションの動画をご覧ください。

ちなみに85人が回答して70人が正解したそうです(私も正解しましたが、抽選には落ちました…)。
さらに、不正解だった15人の中から抽選で「Seleniumオンライントレーニング1年分」が
プレゼントされていました。
個人的にはこちらのほうがうれしいですね!

上記のクロージングセッションの他にも、実はSeleniumConfのセッションは全て動画が公開されていますので、ぜひチェックしてみてください。
https://www.youtube.com/channel/UCtqHXVoR7QSJARfhZ4dts1g/

以上、今回は小ネタのご紹介でしたが、今週末に開催されるSelenium勉強会にて、カンファレンス全体のレポートをします。

第4回 日本Seleniumユーザーコミュニティ勉強会 – connpass
「誰でも枠」は既に定員が埋まっていますが、キャンセル待ちを狙えば間に合うかもしれませんね。
あとは「勉強会&懇親会枠」が現在1名空いています。カンファレンスの裏話など興味ある方はぜひお話しましょう!

なお、勉強会に参加できない方も、SeleniumConfの発表資料は後日公開予定ですので楽しみにお待ちください!

hifive – HTML5企業Webシステムのための開発プラットフォーム

banner_02