人工知能を用いてWebサイトのテストを自動化する
お久しぶりです、田中です。 先日、ハンガリーからITWare kft.社が来日されたこともあり、共同でセミナーを行いました。ITWare社とは一緒にプロジェクトを行ったり、エンジニア同士の交流もあったりと、長い付き合いをさせて頂いています。 さて、ITWare社ではCV＆Deep Learningを用いた自動化テストを検討されているという事で、私も実際に世の中に出ている「人工知能」を用いたテストソリューションをいくつか評価しました。 自動化テストとは？ 関数単位で実行するユニットテストや、WebDriverを用いたE2Eテスト、そしてSeleniumなど、Webアプリケーションをテストするための手法とツールには色々なものがあります。これらのテストツールは、人間がポチポチと手を動かして動作を確認するのではなく、あらかじめ作成したレシピに従って、ツールが自動的にテストを行っていきます。 また、
Python x 自然言語処理でアシアルブログの単語ランキングを算出する
conda 4.3.16 ->パッケージ管理に使用 spyder 3.1.2 -> IDE jupyter notebook 4.3.1 -> 対話式にコードを実行し、グラフ等も即時に可視確認できる 最初に結果です! ・処理概要 下記ソースコードにも記載してあるのですが、アシアルブログのTOPページ(http://blog.asial.co.jp/)から「/[0-9]{4}」形式のリンクのみをスクレイピングで抽出し、ブログの詳細記事をクローリングして全てのブログ記事からBODYタグを抽出して、さらにそこから全角の一般名詞のみを抽出してます。 ・考察 最終的にTF解析で上位10件を円グラフで頻出単語ランキングとして表示させています。 さすがOnsenUIの効果でしょうか。「温泉」が1位の143個でした！ 2位の「アプリケーション」は汎用的すぎて弾いても良かったですね^^; コンポーネントは最
Onsen UI 2.0の紹介と始め方
ハイブリッドによるスマートフォンアプリ開発を手軽なものにしてくれるUIフレームワークとして開発しているのがOnsen UIです。現在も開発が継続されており、間もなく2.0が正式リリースとなります（執筆時点でβ）。 特に大きな転換ポイントと言えるのが、AngularJSとの切り離しになります。そこで今回はOnsen UI 2.0の使い方を紹介します。 インストール方法は4つ Onsen UIのインストール方法は主に4つ用意しています。いずれか使いやすいものを選んでください。 Node.js/npmを使う方法 Node.js/npmを使ってインストールする場合、次のようにコマンドを打ちます。 npm install onsenui@2.0.0-beta.7 --save // β版の現在の場合。 npm install onsenui --save // 2.0の正式版リリース後。現在は1.3
「マテリアルデザイン」に対応 Onsen UI 2.0 !!
Android向けのハイブリッドアプリを開発されている皆さんに嬉しいニュースがあります。なんとOnsenUI2.0では、マテリアルデザインを追加中です！ OnsenUIはiOSとAndroid両方のアプリ開発に使われるため、それらのプラットフォームに向けたネイティブ様のUIコンポーネントを提供することは理にかなっています。そのため現在のiOSベースのコンポーネントに加えて、マテリアルデザインを開発中というわけです。 これまでたくさんのユーザー様がマテリアルデザインをサポートするようリクエストされてきました。私たちはそういった声に耳を傾け、なるべく早くそれを利用できるように開発にいそしんできました。マテリアルデザインはOnsenUI2.0と並行して開発されており、次の大きなバージョンアップの時にネイティブ様のAndroidコンポーネントが利用できる様になります。 この度、α版は完成しました。
NVD3を使って、AngularJSで作ったハイブリッドアプリのグラフを統合しよう
ハイブリッドアプリにグラフを表示する方法はいくつもあります。ハイブリッドアプリは基本的にHTML,Javascript,CSSで動くウェブアプリケーションなので、JavaScriptのグラフライブラリならなんでも使うことができますし、バックエンドでグラフを作成して静止画として表示することもできます。 この記事では、D3というデータビジュアリゼーションライブラリに基づき、再利用することのできるNVD3に注目します。それでは、このNVD3がJavaScriptのみでどうやってグラフを作成し、AngularJSのディレクティブにどのようにしてラッピングされているのかを見>ていきましょう。 また、人気のJavaScriptライブラリは他には以下のようなものあります。 D3.js – D3はData-Driven Documentsの意味です。SVGを用いた、大変強力なデータビジュアリゼーションライ
LocalKitを使っているなら自動テストも簡単。JavaScriptテストフレームワークまとめ
JasmineはRSecに似た記述のテスト文法をもったテストフレームワークとなっています。例えば次のように記述します。 describe("CallTracker", function() { it("tracks that it was called when executed", function() { var callTracker = new j$.CallTracker(); expect(callTracker.any()).toBe(false); callTracker.track(); expect(callTracker.any()).toBe(true); }); it("tracks that number of times that it is executed", function() { var callTracker = new j$.CallTracke
オフラインの場合の処理をどうすれば良いか
今は高速なネットワークがあるのが当たり前になっており、常時オンラインというのも普通になっています。しかしそれに甘んじて作っていると、ネットワークが使えなくなった途端にアプリが落ちたり、全く動作しなくなってしまったりします。 そのためアプリを作る際には必ずオフラインを意識して作る必要があります。そのために必要なテクニックを紹介します。 オンライン/オフラインをフラグで管理する Monacaアプリの場合、オンラインになった、またはオフラインになったタイミングで呼ばれるイベントがあります。それを使ってネットワークの状態を管理できます。 // オンラインになった時に呼ばれるイベント document.addEventListener("online", onOnline, false); // オフラインになった時に呼ばれるイベント document.addEventListener("offli
ANGULAR UにてMonaca/Onsen UIの発表を行いました
なぜハイブリッドアプリを選択するかと言うと、 クロスプラットフォームサポート 既に覚えているWeb開発のスキルを活かしてアプリ開発ができる JavaScriptを使ってネイティブアプリのAPIにアクセスできる といった特徴があるからです。 次にハイブリッドとネイティブアプリの違いについてです。FacebookのCEOであるザッカーバーグ氏は実行速度を理由にHTML5からネイティブに開発の軸を変更しました。しかしそれから数年経ち、Ruby on Railsの開発者で知られるDHH氏は昨年、パフォーマンスは大幅に改善していると書いています。 ではここからMonacaを使ったCordovaアプリ開発について説明します。まずワークフローです。 コーディングはローカルのエディタ、またはCloud IDEを使ってブラウザ上での開発が選択できます。テストはMonacaデバッガーを使って行います。コードを
Selenium WebDriverでマウス操作 & 処理待機
はじめに Selenium WebDriverを使えばブラウザを自動操作できます。WebDriverは単純なクリックから複雑なマウス操作や非同期処理の確認などもできます。最近のWebサイトやWebシステムではAjaxが多用されていたり、ドラッグ&ドロップを使用していたりと、結構複雑です。そんな場合のSelenium WebDriverの簡単な使い方をご紹介します。 「Selenium WebDriverとは？」「どうやって使うのか？」と思った方は、簡単・便利、ブラウザの自動操作！～Selenium WebDriver～をご一読下さい。 複数操作 マウスで複数の操作を一連の動きとして実行する場合、どのようにするのか、簡単にやってみます。アシアル・ホームページのトップ画面上部に、下の画像の部分があります。 この部分(スライダー)をマウスでドラッグすると、その下の構築事例や会社情報が切り替わりま
ZendEngine勉強会で「拡張ライブラリでなるべく簡単に構文を追加する方法」というタイトルで喋ってきました
ご無沙汰しております、アシアル笹亀です。 ブログを書くのは、大変久しぶりになります。実はアシアルでは最近、noteもはじめております。アシアルの仕事の取り組み方、考え方、様々なメンバーについて知ることができます！是非、ご興味があるかたはこちらも一読いただけますと嬉しいです。 https://note.asial.co.jp/ 久しぶりにiPhoneアプリをアップデート申請をするときありますよね？ iPhoneのアプリを継続的に保守管理をしていると、申請作業をクライアント様におまかせして、あまりエンジニア自身で長い間、アップデート申請をしてこなかった方々は何気に多いのではないかとおもい（自分もその１人）、ブログにも残しておこうとおもいました。 こまめに改修などを加えており、その度にアップデートの申請をされている場合には、あまり実感はないかもですが、１年振りとかにアップデートの申請をしたりする
第5回 日本Cordovaユーザ会レポート
最初はヘッドウォータースの竹上さんから ネイティブアプリ開発者目線でのMonacaアプリ開発 という発表です。 これまでに作ったハイブリッドアプリとして、Monacaで作ったみんなでRunRingやスマホからPepperに喋らせられるアプリも作っている。 特別なことがなければネイティブ系言語を使っている。理由としては 高パフォーマンス HTML5の学習コスト デバッグしやすい Cocos2d-x/Unityなどの優秀なフレームワークがある といった理由。HTML5/JavaScriptのフレームワークは選択肢が多く、トレンドが変化しすぎる印象がある。 例えば最初はiOS向けに開発したとしても、その後Androidで確認するとレイアウトが崩れている。そして直すとiOSで崩れると言ったことが何度も繰り返されたりする。また、最初はリッチじゃなくても良いと言いつつ、欲が出てリッチにしたいと思うと途
Web Componentsでお気に入りボタンを作ってみましょう！
はじめに 最近、Onsen UIでWeb Components（ウェブ・コンポーネント）を使い始めました。このAPIで、ウェブ開発者は新しいHTMLのタグを楽に作れるようになります。Web Componentsを学びながら、下のようなシンプルな「お気に入りボタン」を作ってみましょう。 今回作成する「お気に入りボタン」は、カスタムエレメントなので作成後は簡単に利用できます。 クリックしたらはアニメーションでになります。 Onsen UIを作り始めた当時は、Web Componentsというものがないため、Onsen UIのカスタムエレメントはAngularのディレクティブで実装していましたが、今後はOnsen UIのコンポーネントをAngularJSだけではなく、どんなフレームワークでも利用可能にし、jQueryやReact.jsの開発者でも、Onsen UIでハイブリッドアプリを楽しく作れ
AngularJSとOnsen UI で作るGoogle Mapsのサンプルアプリ
今回の記事は、Onsen UI blogで2月に公開した”Creating Google Maps Sample App with AngularJS and Onsen UI“の翻訳記事です。 以下のツールを使用して、このサンプルを構築します。 Onsen UI ( HTML5 を使用したハイブリッドアプリを作成するためのフレームワーク ) AngularJS ( Google 社が開発した JavaScript のフレームワーク ) Google Maps JavaScript API v3 ここでは、Monacaを使用して、アプリを開発します。Monaca は、クロウド型のアプリ開発環境です。このツールを使用すれば、マルチプラットフォーム ( iOS/Android/Windows8 ) に対応するハイブリッドアプリを開発できます。Monaca には、Onsen UI のフルサポート
Onsen UIをWebサイトで使ってみよう
これでインストールは完了です。 作業用ディレクトリの作成 続いてWebサイトを作るディレクトリ（フォルダ）を作成します。今回は onsenui_for_website としています。そのディレクトリの中でbowerコマンドを実行します。 $ bower install onsenui bower cached git://github.com/OnsenUI/OnsenUI.git#1.2.2 bower validate 1.2.2 against git://github.com/OnsenUI/OnsenUI.git#* bower cached git://github.com/angular/bower-angular.git#1.3.15 bower validate 1.3.15 against git://github.com
MonacaでCrosswalk版を使おう
サイズはどれくらい増えるのか？ Crosswalk版はWebViewエンジンをアプリの中に内包するのが特徴になります。それにより個々のデバイスにあるWebViewのバージョンなどに左右されることなく動作可能になります。 唯一の欠点としてはアプリのサイズがWebViewの分、肥大化することでしょう。これはおおよそ18MBくらいになります。ごくごく小さなアプリの場合、数倍になるかも知れませんが、最近のアプリはリソースが高品質化することでサイズが大きくなる傾向があるので18MBくらいであれば許容範囲と言えるのではないでしょうか。また、アプリの自動アップデートも使われるようになっていますので、ユーザがアプリサイズを気にすることは殆どないかも知れません。 Crosswalkはこれまで問題視されていたデバイスごとの動作誤差をなくしてくれる素晴らしい仕組みです。Android 4.0以降に限定されてしま
ng-japanに参加しました
タイトルだけ見るとOnsen UIの紹介がメインのように見えますが、実際は、ハイブリッドアプリの概要から始まり、HTML5アプリのパフォーマンスチューニングの話題が主要な部分を占めます。 ハイブリッドアプリにはUIフレームワークが欠けていた、だからOnsen UIを作ったのだ、という開発の経緯がよくわかるプレゼンでした。 スライドにない部分としては、Onsen UIと同じくハイブリッドアプリ用のUIフレームワークであるionicとの比較について、会場からの質問がありました。 OnsenUIのionicと比べた利点としては以下がある、とのことです。 – (ionicが初期はiOSにフォーカスしていたのに対して) OnsenUIはAndroidでもパフォーマンスの最適化を行っている – OnsenUI 1.3ではWindows Phoneサポートを追加する予定 – OnsenUIは日本語ドキュ
WebView 中の HTML のデバッグ方法まとめ
iPhone, Android で WebView を用い、HTML5 + CSS3 + Javascript でアプリを開発するケースは、PhoneGap (Cordova) が登場して以来増えつつあるのではないでしょうか。 HTML 開発には Firebug や Web Inspector といったデバッグツールはもはや必須ですよね。 そこで今回は WebView 中の HTML のデバッグ方法をまとめてみました。 1. Android 全般・iOS4 (実機・シミュレータ)・iOS5 (実機) weinre （ワイナリー）というツールが利用できます。 weinre はウェブサーバとして動作し、そのサーバが提供するスクリプト・ページにアクセスすることで、ブラウザ上でデバッグが行えます。 （なお、この方法は後述する iOS5, 6 においても利用可能です） ・インストール・サーバの起動
AndroidでカードUIの実装に便利なプラグイン
こんにちは、細井です。 Androidから少し離れている内に、GoogleがMaterial DesignとかAndroid Studioを使え、とか言っていて取り残されています。。 この記事では、Material Designの概念のうち、カードUIをAndroidで実装する際に便利なプラグインを紹介します。 ListViewAnimations https://github.com/nhaarman/ListViewAnimations カードのスクロールにアニメーションを付けたり、カードのドラッグアンドドロップやスワイプでの削除を簡単に行えるようになります。 カードUIでは、スクロールで読み込む前のカードにはアニメーションを付けて、読み込んだ後のカードにはアニメーションを付けないことで、何処まで読み込んだか感覚的に分かるようにすることが推奨されているようです。 今回は、それも実現でき
Onsen UI version 1.2.2リリースのお知らせ
HTML5モバイルアプリを開発するのに最適なUIフレームワーク、Onsen UIの最新バージョン1.2.2がリリースしました。今回は大きな機能追加が二つあります。 ・Pull to Refresh ・Infinite List こちらの機能について解説します。 Pull to Refresh Pull to Refreshは表示領域を下に引っ張ってイベントを起こす機能です。ネイティブアプリではよく知られた機能で、通常は情報更新する際に利用されます。こちらはまずデモで動作をご覧ください。実際に動かせるようになっていますので、その操作感を確かめてください。 <ons-page ng-controller="MyController"> <ons-pull-hook var="loaded" ng-action="load($done)"> <span ng-switch="loader.get
第一回Apache Cordova勉強会で「Cordovaで作るHTML5ハイブリッドアプリ 〜開発ベストプラクティスを学ぶ〜」という題で発表しました
第一回Apache Cordova勉強会で「Cordovaで作るHTML5ハイブリッドアプリ 〜開発ベストプラクティスを学ぶ〜」という題で発表しました 第一回Apache Cordova勉強会にて、「Cordovaで作るHTML5ハイブリッドアプリ 〜開発ベストプラクティスを学ぶ〜」という題で発表しました。Cordovaでアプリを開発する上で、開発プロセスの中で留意する点についておおまかに説明しています。発表資料は以下になります。 自分以外の発表では、次のようなものがありました。 ・Cordovaの最近ホットな話題と地雷をまとめて紹介 ・Cordovaで業務アプリを作る 〜その事例とノウハウ〜 勉強会に参加された皆さんお疲れ様でした。Apache Cordova勉強会は、毎月行われる予定です。12月2日に行われる第二回Cordova勉強会の募集もすでにdoorkeeperのイベントペー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
