アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

2015年4月-6月におけるアシアルの活動 : スマートフォン&モバイルEXPO、Cordova勉強会、AngularU 他。

春はイベント開催時期ということもあり、アシアルでも各種展示会、勉強会、カンファレンスに参加してきました。

○ 4月20日-22日 「O'Reilly Fluent Conference 2015」出展


○ 5月12日-13日 「AppsWorld North America 2015」出展


○ 5月13日-15日 「スマートフォン&モバイルEXPO 2015春」出展


Monaca展示ブースを設置。多くのお客様にご来場いただき、ミニセミナーは通路にまで人が溢れるという大盛況ぶりでした。

また、ヘッドウォータース社より、イベント用Pepperアプリパッケージ「プロボ」に展示会支援をいただきました。


○ 5月26日-27日 「de:code 2015」講演

田中が「Visual Studio with Cordova クロス プラットフォーム開発の全貌」と題する講演を行いました。

関連記事:CodeIQ MAGAZINE
「Visual Studio+Cordova」は、なぜクロスプラットフォームでのアプリ開発に適しているのか?


○ Cordova勉強会 講演&開催協力

日本Cordovaユーザー会メンバーとして、Apache Cordova勉強会に参加、開催協力をしております。

・5月20日 第5回Apache Cordova勉強会
勉強会の模様は、アシアルブログ「第5回 日本Cordovaユーザ会レポート」でも紹介しています。

・6月19日 第6回Apache Cordova勉強会
勉強会の模様は、アシアルブログ「第6回Apache Cordova勉強会 に参加してきました」でも紹介しています。


○ 6月22日-25日 「AngularU」講演


Andreasが「Angular + Cordova + Monaca = Killer mobile app development」と題する講演を行いました。

関連動画:AngularU 主催者提供
Angular + Cordova + Monaca = Killer mobile app development


○ 6月27日 「PHPカンファレンス福岡2015」講演


久保田が「PHPで学ぶ仮想マシン正規表現エンジンの仕組み」と題する講演を行いました。



今後も積極的に活動していきますので、どこかでお会いすることがあれば、気軽にお声掛けいただけたらと思います!

社内勉強会での「チームで作る!イケてるデザイン」の資料を公開しました



アシアルの社内勉強会で発表した資料を公開します。今回の社内勉強会では、「イケてるデザイン」をテーマに勉強会を開催しました。自分はその中でも「どうやってチームでイケてるデザインを作るのだろうか?」ということをテーマにして話をしました。

「2014 Red Herring Top100 Global」を受賞!

アメリカ・ロサンゼルスで開催された「Red Herring Global」にて、アシアル社が「Top 100」入りを果たしました!

Red Herring Top 100 Global」への選出企業は、財務数値、技術革新度、経営能力、事業戦略、市場浸透度などを基準に選出されています。「Red Herring Top 100 Global」は、過去にGoogle、Yahoo、 Salesforce.com、Twitterなども受賞しており、ベンチャー企業の登竜門的位置づけとして高い注目を集めている賞なので、今回、アシアル社が受賞できたこと大変嬉しく思います。

これからも、社名(Asial:AsiaのLeader)を深く心に刻み、Monacaをグローバルに展開すると共に、皆さまの期待に応える製品・サービスを提供して参ります。

『2014 Red Herring Top 100 Global』の受賞企業一覧については以下をご覧下さい。

http://www.redherring.com/events/red-herring-global/2014-top100-winners/

アシアルランニング部活動報告_フルリレーマラソンに参加してきました☆

こんにちは、西尾です。

10月ですねー。
食欲の秋、読書の秋、スポーツの秋ですヽ| ゝ∀・*|ノ☆

というわけで、アシアルランニング部 秋の部!活動してきました。
フルマラソン42.195Kmを7人のメンバーで走りましたよヽ(`・ω・´)ノ


お天気は快晴♪絶好のランニング日和(*´∀`)b



今回はMonacaの宣伝も兼ねて・・・。



バックプリントもかわいいΣd(≧∀≦*)



各チーム一斉にスタート(ヾ(。・ω・)ノ !!



たすきをつないで(ノo´・∀・)ノ゙ ⌒



がんばれーヽ(・´∀`・)ノ



よろしくー(○´∀`)ノ゙



ふぁいとー.:+:.::.:+:(,, ・∀・)ノ゛



がっちりキャッチ三( ・∀・)ノ゙ヾ(・∀・ )



任せた。d(`ゝc_・´)゚+。



だんだんと気温が上がってきて、
みんなへとへと(`-д-;)ゞ・・・



ばてばて・・・(´ー`A;)



おつかれさまーヾ(´ε`;)ゝ…



ようやく、ゴール!!



みんながんばりました☆



完走証もちゃんと頂きましたよー♪




走ったあとは・・・肉!!!



ビールが美味い(´∀`σ)σ



おつかれさまでしたーヾ(o´▽`)ノ゙


という活動でした。
涼しくなってきて、ますますランニングにはいい季節ですね。
みなさんLet's Enjoy Running♪

Monacaフレームワークが最新のPhoneGap/Cordovaに対応します

PhoneGap/Cordova 3.5対応



現在のMonacaはPhoneGap/Cordova (以下 Cordova) バージョン2.9をフレームワークとして使用していますが、いよいよ次回のアップデートで、最新版であるバージョン3.5に対応する予定です。(スケジュールは7月末頃を予定しております)そのメリットと留意して頂きたい点について、ご説明いたします。

これまでのMonacaはCordova 2.9ベースであったため、脆弱性やAppStoreでのアプリ審査上の不安要素となっていましたが、今回Cordova 3.5に対応することにより、最新機種でのパフォーマンスが期待出来るとともに、セキュリティ的にもより安心して使えるようになります。さらに、使用しないプラグインが組み込まれなくなりますので、これまでよりもビルドされたファイルサイズが小さくなります。

また、Cordovaプラグインの互換性も大幅に向上します。Cordova 3.5で利用出来るプラグインは、ほぼそのまま導入することが可能です。さらに、カスタムデバッガーにプラグインを組み込むことが可能になりますので、プラグインを導入したアプリの開発もやりやすくなります。

具体的なSDKの差異としては、これまでは、AndroidではSDK-17でのビルド、iOSではarmv7, armv7sまでの対応でしたが、今回のアップデートにより、Androidでは最新のSDK-19でビルドがされるようになり、また、iOSでは最新のarm64に対応出来るようになります。


アップデートに伴う主な機能変更一覧



変更点変更内容
プロジェクトプロジェクトはCordova2.9版とCordova3.5版の2種類に分けられます。
新規作成出来るプロジェクトは、Cordova 3.5版のみとなります。
Cordova 2.9プロジェクトのCordova 3.5へのアップグレード機能を用意いたしますが、
プロジェクトのダウングレード機能はございません。
デバッガー配布※デバッガーは2.9版と3.5版の2種類に分かれます。また、3.5版はアプリ実行を高速化した「ハイパフォーマンス版」も提供いたします
iOS: AppStore版デバッガ(Cordova 3.5)、カスタムデバッガー(Cordova 2.9, 3.5)
Android: Google Playストア版デバッガー(Cordova 3.5)、Google Playストア版ハイパフォーマンスデバッガー(Cordova 3.5)、カスタムデバッガー(Cordova 2.9, 3.5)
ネイティブUIコンポーネント Cordova 3.5プロジェクトでは、ネイティブUIコンポーネントは使用不可。
Cordova 2.9プロジェクトでは、互換性のため継続。
Cordova 3.5で廃止されるメソッド・プラグイン対象メソッド・プラグイン代替手段
monaca.pushPage(), monaca.popPage(), monaca.home(), monaca.load(), monaca.clearPageStack(), monaca.queryParams Onsen UIの場合はons.navigatorで対応
monaca.updateUIStyle()スタイルシートで設定
monaca.showSpinner(), monaca.hideSpinner(), monaca.updateSpinner()なし
monaca.splashScreen.hide()CordovaのSplashScreen機能を利用
monaca.invokeBrowser(), ChildBrowser InAppBrowserを利用


最も重要な変更点として、Moancaの独自機能であったネイティブUIコンポーネントの開発が終了し、新規プロジェクトでは利用出来なくなります。今後は、Onsen UI等のHTML5ベースのUIフレームワークをご利用ください。

なお、これまでに作成したネイティブUIコンポーネントを利用したプロジェクトについては、引き続きMonaca上で開発/テストを行うことが可能です。ただし、これらのプロジェクトはCordova 2.9環境での利用となるため、Cordova 3.5の新機能は利用出来ませんので、ご注意ください。


今後の流れ



アップデートは7月末を予定しておりますが、具体的な日程が決まりましたら、Webサイト、ブログ、そしてお知らせメールにてご連絡させていただきます。

今後ともMonacaをよろしくお願いいたします。

追記


アップデートが7月31日で確定しました。
お知らせメールをご確認下さい.

ハーフマラソンに参加してきました

こんにちは^^西尾です。

4月に入り、すっかり春な感じですね。

今回は、アシアル、実は体育会系なんですよ!(?)
というところをご紹介したいと思います。

アシアルの一部では、
密かにランニングがブームだったりします。

ということで、
先週の日曜日(4月6日)に、
アシアルのランニング好き数名で
PARACAP2014というマラソン大会に参加してきました^^
http://www.paracup.info/

前日は、夜中まで雨雨雨。。
当日の天気予報では、晴れ時々荒れ模様・・・との微妙な天気予報でした。

若干の不安が残るところでしたが、とにかくスタート会場に集合です。



会場についてみるとなかなかの人だかり!



アシアルのメンバーは、マラソンベテランのTさんや、母国でのマラソン経験豊富なLさんを除いて、
みんな大会初心者だったので、会場であたふたしてしまいました。。



出場記念のTシャツとゼッケンをもらって、若干テンションもあがります!













みんな念入りに準備中。





さてさて準備をしていると、なんだか雲行きが怪しいですね。





と思っている間に、スタートのカウントダウンが始まりました!!






一斉にスタート!





バナナ!?





仮装したランナーがいっぱい!!






われらがリーダーTさん!トップ集団入り!!





途中で雨は降るし、雷は鳴るし、なぜか雹まで降ってくるし、
ものすごい天候の中での大会でした。。。




そんなこんなで、やっとゴールに到着!長かったぁーー。



初マラソン大会は、そんなこんなで無事に終了しました(^^)





ということで、おつかれさまでしたー(^▽^)/”



次はなんの大会に出るのかな?お楽しみに♪

Android Bazaar and Conference 2014 Spring(ABC 2014 Spring)のイベントアプリを作りました。

こんにちは。Android Bazaar and Conference 2014 Spring(ABC 2014 Spring)に出展してきました。その際にABC 2014 Springから配信されているWeb APIを使ってOnsen UIでイベントアプリを社内メンバーで作ったのでご紹介します。

Android iOS向けに作っておりますので、動作しない方はSafariGoogle Chromeなどのブラウザでご確認ください。



このアプリはGoogle Play からダウンロードすることができます。 (最小APIレベル14 : Android 4.0です)

また、このアプリのソースコードをこちらからダウンロードできる状態にしています。(若干、修正を入れています。) ダウンロードしてからMonacaにてプロジェクトとしてインポートすることができます。

ソースコード

Onsen UIも1.0.4がリリースされています (今回はバグFIXをメインに行っています) 。 今後とも、Onsen UIをよろしくお願いします。

2013年におけるアシアルの取り組みを振り返る

御無沙汰しています。小林です。
言いたい放題のもうすぐ3歳の息子と、だいぶ表情をみせるようになった0歳の娘に囲まれ、益々、家庭が賑やかになりました。

アシアルでは、最近、さまざまな部活が発足され盛り上がっていますが(※ アシアルブログ「アシアル内でひそかに活動する集団について」)、残念ながら、なかなか個人的には参画できていない状況です。
「週末、皇居のまわりを走る!」や、「毎朝、階段を利用する(※オフィスは10階です)」という話を聞くと、自分も何か始めたいと思うこの頃です。

12月も間近となり、今年も、あっという間に1年が過ぎて行きそうです。
今回は、改めて2013年のアシアルの取り組みについて振り返りたいと思います。

アシアルとして、2013年における取り組みの目玉としては、HTML5をベースとしたモバイルアプリ開発プラットフォーム「Monaca」を正式リリースしたことです。



「誰でも今日からアプリ開発」を目指して、今後も、機能改良を続けてまいりますので、引き続き宜しくお願いします。


Monacaに関しては、以下のように国内外で多数の展示を行ってきました。
2013年だけでも、十数以上のカンファレンス・展示会に参加しています。
引き続き活動を続けて参りますので、どこかでお会いした際には宜しくお願いします。



■ 出展関係

2013年2月 アプリ博2013に出展
2013年2月 Mobile World Congressに出展 @バルセロナ
2013年5月 スマートフォン&モバイルEXPOに出展
2013年6月 ICT SPRING EUROPE 2013に出展 @ルクセンブルク
2013年6月 Innovation Meetup参加
2013年9月 Mobile Developer Summit 2013にて田中、Kruyが登壇 @バンガロール
2013年10月 PhoneGap Day EUにて田中が登壇 @アムステルダム
2013年10月 GMIC Silicon Valley 2013に出展。G-startupのピッチコンテスト参加 @サンフランシスコ
他、多数。


受託開発/研修についても、多くのお客様からPHPシステム開発/研修、スマートフォンアプリ開発/研修のご依頼を受け、ご期待に応えて参りました。

アシアルとしてPHPシステム開発はもちろん、2013年は、以下のように、特に「HTML5 + JS」を利用したWebアプリ/スマホアプリの開発に取り組んで参りました。



■ 開発/研修関係の実績

・株式会社タニタ様が提供する健康管理アプリ「HealthPlanet」のAndroid/iPhone版の開発
・ニフティ株式会社様が提供するスマートフォン向けBaaSシステムの開発
・株式会社テレビ朝日様が提供するセカンドスクリーンアプリ「いくぞブラジル!絶対突破大作戦!」「よゐこの無人島0円ゲーム」の開発
・ハイブリッドキャスト向けのアプリケーションの開発
・グリー株式会社様に「新入社員向けPHPプログラミング研修」の実施
他、多数。


使いやすさやビジュアルに対応した実績も増えており、最近は、「Monacaのようなサイトを制作して欲しい」というご相談もいただいている状況です。

今後も、益々精進して参りますので、引き続き、アシアルをどうぞ宜しくお願い致します。

Selenium WebDriverでマウス操作 & 処理待機

はじめに



Selenium WebDriverを使えばブラウザを自動操作できます。WebDriverは単純なクリックから複雑なマウス操作や非同期処理の確認などもできます。最近のWebサイトやWebシステムではAjaxが多用されていたり、ドラッグ&ドロップを使用していたりと、結構複雑です。そんな場合のSelenium WebDriverの簡単な使い方をご紹介します。

Selenium WebDriverとは?」「どうやって使うのか?」と思った方は、簡単・便利、ブラウザの自動操作!~Selenium WebDriver~をご一読下さい。


複数操作



マウスで複数の操作を一連の動きとして実行する場合、どのようにするのか、簡単にやってみます。アシアル・ホームページのトップ画面上部に、下の画像の部分があります。


この部分(スライダー)をマウスでドラッグすると、その下の構築事例や会社情報が切り替わります。このドラッグをSelenium WebDriverで実行してみます。以下のコードを実行すると、スライダーが右に移動し、パネル部分が変化します。


package jp.co.asial.test;

import java.util.concurrent.TimeUnit;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Action;
import org.openqa.selenium.interactions.Actions;

public class AsialHpSliderTest {

    public static void main(String[] args) {
        WebDriver driver = new FirefoxDriver();
        driver.get("http://www.asial.co.jp");
        driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
        
        // 興味のある技術分野の選択
        Action action = new Actions(driver)
            .clickAndHold(driver.findElement(By.cssSelector(".ui-slider-handle")))
            .moveByOffset(100, 0)
            .release()
            .build();
        action.perform();
    }
}

実際にマウスでスライダーを移動させる場合、マウス・ダウン、ドラッグ、リリースの3つの処理を実行します。このようにマウス操作を同時に複数行う場合、SeleniumではActionsクラスを使います。このクラスは、マウスの基本操作を実行するメソッドを多数保持しています。上記の通りBuilderパターンを使ってインスタンスを作成し、peform()メソッドで一連の処理を実行します。

単純なドラッグ&ドロップのみであれば、以下のようにも記述できます。dragAndDropBy()メソッドはclickAndHold()、moveByOffset()、release()を組み合わせたメソッドです。


Action action = new Actions(driver)
    .dragAndDropBy(driver.findElement(By.cssSelector(".ui-slider-handle")), 100, 0)
    .build();
action.perform();



アニメーション終了確認



先のコードではブラウザを開いたまま処理を終えました。本当はアニメーション終了とともにブラウザを閉じたいのですが、素直には実行できません。例えば、上記コードの最後にdriver.quit()を入れると、アニメーション前にブラウザを閉じてしまいます。ドラッグ&ドロップを終えるとすぐに次の処理を実行してしまうからです。

意図通りに動かしたい場合、処理を中断(待機)し、適切なタイミングで再開する必要があります。こういう場合、WebDriverWaitクラスを用いて待機処理を実装します。

上記パネルの更新は次のようになっています。

  1. パネル要素を画面外へ移動する
  2. 新しい要素を追加する
  3. 古い要素を削除する
  4. 新しいパネルを画面内へ移動する

このパネル更新を確認するためには、①パネルが動き出すまで待ち、②新しい要素が画面内の定位置に来るまで待つ、ことが必要です。これは以下のように実装できます。


package jp.co.asial.test;

import java.util.concurrent.TimeUnit;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Action;
import org.openqa.selenium.interactions.Actions;
import org.openqa.selenium.support.ui.ExpectedCondition;
import org.openqa.selenium.support.ui.WebDriverWait;

public class AsialHpSliderTest {

    public static void main(String[] args) {
        WebDriver driver = new FirefoxDriver();
        driver.get("http://www.asial.co.jp");
        driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
        
        // スライダーを移動
        Action action = new Actions(driver)
            .dragAndDropBy(driver.findElement(By.cssSelector(".ui-slider-handle")), 100, 0)
            .build();
        action.perform();

        // 画面が動き出すまで待つ: 10秒間、50ms間隔で確認
        new WebDriverWait(driver, 10, 50).until(new ExpectedCondition<Boolean>() {
            @Override
            public Boolean apply(WebDriver driver) {
                final WebElement element = driver.findElement(By.cssSelector(".topCardList > article:first-child"));
                return !element.getCssValue("top").equals("0px");
            }
        });

        // 最初の要素の位置が確定するまで待つ: 10秒間、100ms間隔で確認
        new WebDriverWait(driver, 10, 100).until(new ExpectedCondition<Boolean>() {
            @Override
            public Boolean apply(WebDriver driver) {
                final WebElement element = driver.findElement(By.cssSelector(".topCardList > article:nth-last-child(21)"));
                return element.getCssValue("top").equals("0px");
            }
        });

        driver.quit();
    }
}

WebDriverWaitコンストラクタの第二、第三引数にはそれぞれ最大待ち時間[秒]と確認間隔時間[ミリ秒]を渡します。そして、WebDriverWaitオブジェクトのuntil()メソッドへExpectedConditionオブジェクトを渡すことで処理を待機します。この仕組みはAjaxなどの非同期処理を確認する際には多用します。ちなみに、アシアル・サイトのパネル操作でもAjax通信を行っています。

実際のところ、上記のコードはたまに失敗してしまいます。2番目の待機で、最初の要素を上手く特定できないことがあるためです。Webサイトの自動テスト等を考える場合、HTMLの構造とJavaScriptの使い方も考える必要がありそうです。適切にIDを割り当てる、Ajaxが終了したら何らかの属性を変化させるなど、ちょっとした処理を入れておくと自動操作もかなり楽になります。もちろん、複雑にならないようなバランス感覚も重要です。


おわりに



マウス操作や処理待機の扱いになれれば、Selenium WebDriverを使ったブラウザ自動操作もかなり楽になります。その他にもダブルクリックや、キーボード入力なども扱えます。かなり万能に操作やテストを実行できますので、ぜひ試してみて下さい。

アシアル内で密かに活動する集団について・・

こんにちは、西尾です。

最近、アシアルでは、密かに部活動が発足して
いるとかいないとか。。

□音楽部:



活動目的:
楽経験者が主に活動。忘年会等のアシアルが開催する飲み会等で余興を行い飲み会の良い雰囲気作りを目指す。







楽経験者モトム!ヽ(・ω・。ヽ)



MtG(マジック:ザ・ギャザリング)部:

活動目的:
イラスト・ルールともに芸術的な札競技であるMtGを実践することによって、
英語ドキュメントの読解力、見積もりやリスク管理能力の向上を目指す。





なるほどねー☆ただの遊びではないわけだーヽ(・ω・。ヽ)


□DJ部

活動目的:
DJの助けが必要なイベント等で威力を発揮する。






去年の忘年会では大活躍でしたねヾ(*≧∀≦*)ノ今年もよろしくー♪


□英語部

Our goals are ...
◆ Being able to understand documentations of products we need.
◆ Being able to discuss our products in English.

MonacaのMeetingでは英語は必須のようですからねΣ(゚д゚|||)
アシアルも英語化の流れが・・・。


□ランニング部


活動目的(仮):
仕事や日常の様々なストレスにも打ち勝つ強靭な精神力を培うために、
また、単なる体力づくりの為に日々走り続ける。

我らがリーダーT田さん指導のもと、密かに活動中(今はまだ個別活動が主ですが。)
今は暑いからね。。涼しくなったら、きっと活動するはず|ω・`)。。
部員募集中ですー。

そんなこんなで、
アシアル社内部活動に乞うご期待^^/

それでは、また☆