Asial Blog

Recruit! Asialで一緒に働きませんか?

温泉マーク問題

カテゴリ :
デザイン・UI
タグ :
Onsen UI
マーケティング
この記事はOnsen UI Advent Calendar 2016向けの記事として書きました。

アシアルのマーケティング担当の塚田です。

先日報道されたOnsen UIのマーケティング上、非常に重要なニュースについて書きたいと思います。

2013年9月にプレビュー版リリースをしたOnsen UIは、現在ではCordovaプロジェクトの公式サイトに掲載されたり、GitHubスターも4000弱つくなど、国内外の多くのエンジニアのみなさんに使っていただけるUIフレームワークとして成長してきました。

イタリアでは人気の自転車レースGiro d'Italiaの公式アプリに採用されたり、日本では金融機関やテレビ局のアプリなどにも多数採用されています。

認知度もあがり、素晴らしいアプリも多数生まれ、我々の努力も少しは報われてきたかと思っていた最中、2016年7月にとんでもないニュースが飛び込んできました。


温泉マークが変更になる???



リオオリンピックが始まる直前の2016年7月7日、経済産業省が2020年の東京オリンピックに向けて、公共施設などで使われる案内用のピクトグラムを外国人でもわかりやすくするため変更を検討しているという発表がされました。

その変更の対象として取り上げられた一つが「温泉マーク」です。従来の温泉マークは外国人には「温かい料理」に見えるとのこと。

ニュースの映像では、温泉マークを見た外国人観光客が「コーヒー」だと答えていました。

新たなマークの候補として発表されたのがこちら。



はい、、、

湯船に人が入っています。


みなさんご存知の通り、我々のOnsen UIのロゴマークも温泉マークをオマージュして作ったもので湯気の部分が「UI」となっています。



もし、温泉マークが変更になってしまったら、Onsen UIのロゴマークにも湯船に人を入れるように経済産業省から指導が入るかもしれません。

そうなると、Webサイトも作り直し、たくさんつくったTシャツなどのノベルティなども全て無駄に、、、

そもそも温泉マークが「コーヒー」に見えていたとすると、CoffeeScript開発チームのみなさんは苦々しく思っていたのではないか、、、

これまで海外向けのプロモーションに費やしてきた努力がお湯の泡、いや水の泡になってしまいます。

マーケティング担当の私の責任問題になること必至、、、

これはまずい。


Onsen UIの名前には意味がある



皆さんにはご理解いただきたいのですが、Onsen UIという名前は適当につけた訳ではないのです。

Onsen UIはモバイル向けのシングルページアプリケーションを開発するためのUIフレームワークです。シングルページアプリケーションは通称「SPA」とも言われます。勘の良い方は、この時点でピンっと来たかもしれませんが、SPA→スパ→温泉→Onsenです。シングルアプリケーション向けのUIフレームワークなのでOnsen UIなのです。

そして、日本に来る外国人旅行者が楽しみにしていることの第5位がなんと温泉なのです。和食や買い物、景勝地の観光と並んで多くの外国人が温泉を求めて日本に来るのです。日本発のオープンソースプロジェクトを世界に広めるのにこれ以上の名前があったでしょうか。

そしてロゴも温泉マークをオマージュしたしたロゴを作成したのですが、この時にはこのロゴが変更に追い込まれるかもしれないことになると思いもよりませんでした。


温泉地が立ち上がった



経済産業省に意義を申し立てようにも、温泉とは直接関係のないOnsen UIの意見を聞いてくれる余地は無さそう、、、

新温泉マークは不評ではあるものの、変更することを規定路線にただただ時間だけが過ぎて行きました。

ここで別府温泉で有名な大分県別府市が立ち上がりました。別府市が温泉がある全国の自治体に調査を実施し、調査協力をした57自治体のうち過半数を軽く超える36自治体が現温泉マークを支持する(新マークは16自治体)と発表しました。

そして2016年12月6日に開かれた経済産業省が主催する有識者会議では、湯布院観光協会や磯部観光温泉旅館協同組合の代表などが出席し、温泉マーク変更案の撤回を強く求めました。これまで約50件の反対意見が寄せられていることもあり、経済産業省の担当者も「慎重に検討して決めたい」と話し、風向きが変わってきました。


日本の温泉マークを世界に広めよう



先日の有識者会議で、出席委員の一人が「変えずに日本の温泉マークを世界に広めてはどうか」との意見がでたようですが、私もこの意見に大賛成です。前述の通り外国人の多くの方は日本に温泉を求めてやってきます。そこで温泉マーク自体を日本の観光PRなどに積極的に使うことで、誰もが認識できるものとして広げていくべきではないでしょうか。

ついでの温泉マークがスパ(SPA)だということが認知されれば、Onsen UIがSPA用のフレームワークだということが嬉しいですね。

とりあえずOnsen UIのロゴが変更に追い込まれることがなくなりそうなので、2017年はOnsen UIをもっと世界の開発者に知ってもらえるように頑張りたいと思います。

皆さんもOnsen UIの応援をよろしくお願いします。
製品へのフィードバックとか、GitHubスターとかをいただけるともっと頑張れますので、是非よろしくお願いします。

アシアルの会社情報

アシアル株式会社はPHP、HTML5、JavaScriptに特化したWebエンジニアリング企業です。ユーザーエクスペリエンス設計から大規模システム構築まで、アシアルメンバーが各々の専門性を通じてインターネットの進化に貢献します。

会社情報詳細

Onsen UIが生まれたきっかけ

カテゴリ :
フロントエンド(HTML5)
タグ :
社長BLOG
Monaca
JavaScript
Tech
Cordova
images.png
本記事はOnsen UI Advent Calendar 2016のエントリーです。Onsen UIが生まれたきっかけについて、簡単に紹介したいと思います。

11月のソーシャルランチ

カテゴリ :
日常
タグ :
日常
PB150250.JPG
11月のソーシャルランチの模様です。

「HTML5モバイルアプリDay」大盛況でした!

カテゴリ :
Monaca
タグ :
Monaca
slack_for_ios_upload_720.jpg
「HTML5モバイルアプリDay」のご報告です。

『HTML5モバイルアプリDAY』まもなく開催します!

カテゴリ :
Monaca
タグ :
Monaca
DSC00209.JPG
「HTML5モバイルアプリDAY」のお知らせです。

美女と手ぬぐい

カテゴリ :
日常
タグ :
日常
una.jpg
アシアルと展示会についてのお話です。

7月&8月のソーシャルランチ

カテゴリ :
日常
タグ :
ランチ
日常
SALAD.JPG
7月と8月に開催したソーシャルランチの模様です。

WebdriverIOを使ってみました

カテゴリ :
フロントエンド(HTML5)
タグ :
Selenium
WebDriver
WebdriverIO
icon
最近、「WebdriverIO がいい」という話を耳にしたので使ってみました。
軽く実案件の自動テストにも組み込んでみたのですが、かなり使いやすいと感じたので簡単に使い方をご紹介します。

WebdriverIOとは



UI操作を自動化するためのJSライブラリです。(執筆現在の最新バージョンはv4.2.8)
ブラウザ操作を同期的に記述でき、APIもシンプルに記述できるよう配慮されているため、
複雑になりがちなUI操作のテストコードをかなりシンプルに記述することができます。

構成



今回は以下の環境・バージョンで試しました。

OS : Mac OS El Capitan 10.11.6(15G31)
NodeJS : v6.4.0
Chrome バージョン 52.0.2743.116 (64-bit)

webdriverio : 4.2.8
selenium-standalone : 5.6.1
※ selenium standalone serverをjavascriptから立てるためのライブラリです。

今回はローカルにselenium standalone serverを立ててでテストを実行する想定で書いていますが、
リモートマシンやSelenium Gridだけでなく、
テスティングクラウドサービス(Sause Labs/Browserstack/Testingbot)等との連携も可能です。

インストール



(npm initは完了しているものとして)、ひとまずWebdriverIOをインストールしましょう。

  1. $ npm install webdriverio --save-dev

また、selenium standalone serverを立ち上げる必要があるので、selenium-standaloneをインストールしておきます。


  1. $ npm install selenium-standalone --save-dev

設定ファイル作成



次に、wdioを実行するための設定ファイルを作成します。
npm initやkarma initのように、対話的に設定ファイルを作成できるwdioのconfigコマンドが用意されているので利用しましょう。

  1. $ ./node_modules/.bin/wdio config

質問内容は以下のとおりです。
※ ライブラリやadapterをインストールするか?という質問は省略しています


  1. Seleniumの動作環境(On my local machine)

  2. 使用するテストフレームワーク(jasmine)

  3. Specファイルの配置場所(./test/specs/*.js)

  4. 使用するレポーターの種類(dots)

  5. 使用するサービス(selenium-standalone)

  6. logレベル(error)

  7. エラー発生時のスクリーンショットの配置場所(./errorShots)

  8. テストサーバーのbase url(localhost:8000)



テストの実行



先ほど指定した場所にテストを作成・配置し、以下のコマンドでwdio testrunnerを実行します。
wdio.conf.jsのserviceにselenium-standaloneを登録しておくとテスト実行時に自動でselenium standalone serverが立ち上がります

  1. $ ./node_modules/.bin/wdio

サンプルコード



典型的な操作をいくつかピックアップしてご紹介していきます。

※ browserオブジェクトについて
wdio test runnerを使用した場合、webdriverのインスタンスにbrowserというグローバル変数でアクセスできるようになります。(参考


ブラウザにアクセスしてタイトルを取得する



  1. describe('WDIOのテスト', () => {
  2.     it('画面の表示', () => {
  3.         browser.url('/index.html');
  4.         expect(browser.getTitle()).toBe('Hello WebdriverIO');
  5.     });  
  6. });

ユーザーIDとパスワードを入力してログイン



  1. describe('Login Page', () => {
  2.     beforeEach(() => {
  3.         browser.url('/index.html');
  4.     });
  5.  
  6.     it('should translate to todo list when submit correct userid & password', () => {
  7.         let title = browser.setValue('#userid', 'test@example.com')
  8.             .setValue('#password', 'password')
  9.             .click('#login')
  10.             .getTitle();
  11.         expect(title).toBe('Login Succeeded');
  12.     });
  13. });


キャプチャの取得


  1. describe('Login Page', () => {
  2.     beforeEach(() => {
  3.         browser.url('/login.php');
  4.     });
  5.     it('should have right title', () => {
  6.         browser.saveScreenshot('./images/login.png');
  7.     });
  8. });

また、こちらのページを参考にPage Objectを作成しておくと、より読みやすく変更に強いテストが作成できそうです。


wdio test runnerを使用しない場合



他のテストランナーと組み合わせる場合は非同期なAPIとなります。
以下のサンプルのようにco + generatorで同期的に書くこともできますが、いちいちyieldで止める必要があるので少々不便になります。

例:jasmine + jasmine-co + webdriverioを組み合わせて使用する場合のサンプルです。

  1. require('jasmine-co').install();
  2.  
  3. const webdriverio = require('webdriverio');
  4. const browser = webdriverio.remote({
  5.     desiredCapabilities: { browserName: 'chrome' },
  6.     baseUrl: 'http://127.0.0.1:8000'
  7. });
  8.  
  9. describe('Login Page', () => {
  10.     beforeAll(function* () {
  11.         yield browser.init();
  12.     });
  13.     beforeEach(function* () {
  14.         yield browser.url('/login.php');
  15.     });
  16.     it('should have right title', function* () {
  17.         let title = yield browser.getTitle();
  18.         expect(title).toBe('Login Page');
  19.     });
  20. });

あとがき



簡単な機能しか紹介していませんが、いかがでしたでしょうか。

次期Mac OS Xにて SafariのWebDriver Supportが発表され、各ブラウザのWebDriverが一通り揃いつつあります。
また、今回紹介したWebdriverIOに限らずクライアント側のツールもこなれてきました。

UIテスト自動化を試してみるにはいい時期になってきたのではないでしょうか。
その時には是非WebdriverIOを試してみてください。

6月のソーシャルランチ

カテゴリ :
日常
タグ :
日常
ランチ
hongo_kusu_04.jpg
6月のソーシャルランチの模様です。

5月のソーシャルランチ

カテゴリ :
日常
タグ :
日常
ランチ
P5240001.JPG
5月に開催したソーシャルランチの模様です。