アシアルブログ

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

Onsen UIが生まれたきっかけ



本記事はOnsen UI Advent Calendar 2016のエントリーです。Onsen UIが生まれたきっかけについて、簡単に紹介したいと思います。

当時PhoneGapといわれていたCordovaに足りなかったもの



2009年頃からWebViewを用いた、今でいうHTML5ハイブリッドアプリ開発をしていた訳ですが、当時のデバイスはパフォーマンスも低く、ブラウザーの機能が貧弱だったことも相まって、満足のいくアプリをHTML5「だけ」で作ることがほぼ不可能と言ってもいい状況でした。

思い返すとiOS 4Android 1.6の時代です。まだposition:fixedも使えず、CSSトランジションも怪しい動きをしていました。

一方で、コンテンツをHTML5で記述することのメリットは多く、アプリのマルチプラットフォーム対応や、サーバーからの動的配信で内容をアップデートすることができるなど、この分野の可能性を感じていました。

それがPhoneGap/Cordova/Monacaにつながっていくわけですが、とはいえUIWebViewだけでは、iOSAndroidのネイティブUIにかなう表現ができなかったのは事実です。

そこでネイティブUIフレームワーク



そこで2010年からMonacaを開発するに当たり、どのようにハイブリッドアプリでUI部分でブレークスルーを実現するかが特に大きな課題だと考えていました。その結果、私たちのチームが開発したのは「ネイティブUIとUIWebViewを組み合わせる」というアプローチです。

具体的には、コンテンツの中身はUIWebViewで記述しつつも、ナビゲーターやタブといったネイティブなトランジションが圧倒的に有利な部分はネイティブで描画する、という仕組みでした。

PhoneGapの拡張エンジンとして、オープンソースでリリースしました(メンテナンスはしていませんが、いまでも公開は続けています)。



このフレームワークでは、複数ページをスムーズに遷移するため、マルチWebView構成になっていました。ようするに、次のページに遷移した場合には別のWebViewが作られ、ページスタックが作られます。

ネイティブUIフレームワークの課題からOnsen UIへ



ただしこの仕組みには一つ大きな問題がありました。それは、WebViewが複数に分かれるため、JavaScriptでスコープを管理するのが大変難しくなったということでした。新しいページが全く別のJavaScriptインスタンスとして表示されるため、同じアプリであるにもかかわらず、ページ間でリソースを共有することが難しかったのです。

また、JSON形式でUI定義を記述できる仕組みとしていましたが、その結果デザインのカスタマイズに弱く、多様な表現をしたいアプリにとって制約になってしまうことも問題でした。

一方、iOS 7やAndroid 4が登場しフラットデザインが主流になるなか、WebViewでフルにUIを実装することの現実味が帯びてきました。そこで、社内で議論を行った末、これまで作っていたネイティブUIフレームワークを捨て、Onsen UIに移行するという決断を行いました。

これからのOnsen UI



最初はAngular 1のディレクティブ機能を使って実装したOnsen UIですが、当初は日本語の文献も全くなく、Angularは難しすぎるのではないか?という危惧もありました。しかし一方で、Angular以上にうまく部品をコンポーネント化できる仕組みがなく、Angularを選定したという経緯があります。

昨今ではCustom Elementsも安定したことから、Onsen UI 2.0よりAngularへの依存をなくし、ピュアなWeb Componentsフレームワークとなりました。そのメリットを生かし、Angular 2やReactへの対応とともに、Vue 2といったメジャーなフレームワークのサポートを進めていきたいと考えています。

ぜひ進化するOnsen UIにご期待ください。そして、日本発の世界的フレームワークの挑戦に向けて、GitHubのスターで応援ください!

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

先日 秋葉原UDXにて行われた「HTML5モバイルアプリDay」が

大盛況の内に終えることができました。

ご来場いただいた皆様、またご協力いただいたご関係者の皆様、

誠にありがとうございました。

国内初のMonaca/Cordova関連の総合展示交流イベントで、

40ブースを超える関連製品やサービスの展示ブース、

セミナー、ワークショップが開催されました。


アシアルブースへも多数足を運んで頂きました。







アシアル代表取締役田中正裕と

株式会社オープンウェブ・テクノロジー代表取締役白石俊平氏との

基調講演テーマ「急速に拡大するウェブ技術の世界」には

立ち見が出るほどご来場頂きました。


各ワークショップも大盛況で

当社主催の「はじめてのOnsen UIワークショップ」も満席となりました。


こちら講師のMonacaエバンジェリスト 生形さん

ワークショップの合間にはMonaca姫として盛り上げます。



今後も準備期間を重ねて更にパワーアップした

ウェブの技術やアプリ開発、に関連した

イベントを実施して行きます。

お楽しみに!

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



HTML5モバイルアプリDAY」

日時:2016年11月14日(月)11時~19時

場所:秋葉原UDX4Fギャラリー
     
チケット及び詳細はこちら



HTML5モバイルアプリDAY」は、

 ウェブ技術を使ってアプリを企画開発する人のための総合展示交流会です。


 弊社代表取締役社長 田中正裕と

 株式会社オープンウェブ・テクノロジー代表取締役CEO 白石俊平 氏による

 基調講演も開催します。
 
 是非詳細をご確認ください!

チケット及び詳細はこちら

Monaca / Onsen UIの専用ブログを開設しました

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

これまでアシアルブログの一カテゴリーとして運営をしておりましたMonacaブログですが、この度新たにMonaca / Onsen UI専用ブログを立ち上げました。



今後はMonaca / Onsen UIブログにて、関連技術情報、イベント情報などをお届けしますのでよろしくお願いします。

第8回Apache Cordova勉強会が開催されました

CordovaやPhneGapといったハイブリッドアプリ開発に興味のあるエンジニアが多数集まる第8回Apache Cordova勉強会が西新宿のニフティ社にて行われました。80名近くの方々に参加いただき、大いに盛り上がった会となりました。



こちらはそのレポート記事になります。



Cordova/Electron の構造を知る



ソニー株式会社 関 康治さん





最近、デスクトップ向けのハイブリッドアプリ開発環境として知られるようになってきたEletronとCordovaの相違点について紹介されていました。



CordovaプラグインではどのようにしてネイティブとJavaScriptが通信を行っているのかについて紹介しました。特に面白いのはAndroidiOSで手法が異なるということです。AndroidについてはOSの提供しているWebViewをそのまま使います(後述するCrosswalkは異なります)。



JavaScriptからネイティブへの通信は2つあります。一つは_cordovaNativeを使う方法で、2つ目はPromptというOS標準のAPIをコールする方法です。対して、JavaScriptで処理を受け取る時にはハック的な手法が存分に使われています。まずポーリングで、50msごとに確認する方法を使っています。さらにLOAD_URL方式として、webViewにあるLOAD_URLにJavaScriptを埋め込んで実行する。最後にONLINE_EVENT方式。ネイティブで強制的にオンラインとオフラインを切り替えます。デフォルトはONLINE_EVENT方式となっています。



Crosswalkを使った場合。Androidアプリの中にCrosswalk(ブラウザ)を梱包します。使えるAPIが固定化されるメリットなどはありますが、プラグインの通信については特に変わりません。



iOSの場合。最近のiOS9からUIWebViewからWKWebViewに変わりました。それに伴って、通信方式が変わっています。iOSでは標準で用意されているので、JavaScriptからネイティブは簡単です。UIWebViewでは逆(ネイティブからJavaScript)はハックがふんだんに使われています。まずiframe方式で、iframeのハッシュを書き換えることでメッセージが飛ばします。さらにXHR方式で、ローカルでAjaxをやっているような感じの動きをします。iOS9のWKWebViewはメッセージハンドラーを使って簡単に通信しています。



なお、CordovaはUbuntu向けにも開発できるのですが、これはUbuntu Oneという携帯電話向けOS用に開発されています。実装としては、Qtに依存しています。UbuntuではメッセージAPIを持っているのでスマートにデータの送受信ができます。



最近ではテレビなどにもブラウザが含まれるようになっています。そこでCordovaを使って他のプラットフォーム向けにアプリ提供ができないかどうか試してみました。その場合、問題になるのは利用するブラウザを自前で用意しなければならないことと、JavaScriptとネイティブの通信方法を確保するのが困難でした。



そこでElectronに注目しました。ElectronはWindows/Mac OSX向けのネイティブアプリが作れます。コンパイルしてできあがるバイナリはNode とChromiumを足した感じ。Chromiumとnodeは良い感じに通信してくれます。Cordovaのハック的なやり方に比べると随分スマートになっています。



なお、Electronのリスクとしては、開発を一人でやっている、Chromium、nodeが入っているので重い、Chromiumのセキュリティアップデートよりちょっとタイムラグがあるといった点になります。



CordovaとElectronはwebViewの調達方法が違うというのが今回の結論でした。似たような技術ですが、取り組みがまったく違うようです。



質問としては以下がありました。



ソニーのグラスやデバイスといったプロダクトにCordovaに組み込んだことありますか?



製品としては答えられません。実験的な実装であれば、Cordovaを社内的に使っています。



Cordova × EdTech



エレファンキューブの支倉常明さん





まず事例の紹介がありました。学校の授業用ツールのカンガルー(iPad向けApp Store)になります。ある問題に対して、特徴挙げていきつつグルーピングします。マインドマップ的な、授業中に使う思考ツールです。アプリはCordovaで作られていて、データはlocalStorageに保存するようになっています。



このアプリを開発したきっかけは、新潟大学教育学部附属新潟小学校の片山 敏郎 先生の要望から始まったとのこと。そこに多くの教師が参加しつつ、実際に開発できるのですが人が支倉さんしかいなかったので開発することにしたとのことです。



Cordovaを使ってみて実感するのは開発が爆速であるということ。Web上でも動くようにしたので、確認がとてもスムーズに進む。



さらに別な事例として◯◯を紹介しました。◯◯は海外向けの日本語教育アプリです。UIはOnsen UIを使っており、元々iOS/Android/Webサイトの3環境で使いたいという要望があったそうです。アプリ側の特徴としては、動画や音声をダウンロードするようになっています。



なお、WebViewなのでvideo/audioタグで問題ないかと思ったそうなのですが、Androidではうまく再生できない不具合にハマったとのこと。結局、Cordovaのプラグインを使っているのですが、Webブラウザでも動かすために分岐処理によって使う仕組みを切り替えるようにしているそうです。



ただ、その甲斐もあってワンソースでiOS/Android/Webブラウザに対応しています。



その他の機能として、受講者の学習履歴を閲覧したり、お知らせ/スケジュール配信といった機能があります。サーバサイドはPHPで作ってあるとのことです。



その他の問題として、ID/PWの仕組みを用意するとAppleがとりあえずリジェクトするそうです。また、課金の仕組みを用意していても問題になります。iCloudのバックアップは25MBまでしか使えないので、動画などを保存するとすぐにいっぱいになります。回避策としては、特定のメタデータを書き込むと除外できます。



ニフティクラウド mobile backend × Cordova





ニフティクラウド mobile backendエヴァンジェリストでもある筆者の登壇です。まずニフティクラウド mobile backendについて説明しました。いわゆるmBaaS(mobile Backend as a Service)の一つで、サーバサイドで必要になる機能をまるっと提供することでアプリ開発を高速化します。また、無料から使えるので開発コストを低コスト化することにもつながります。



主な機能はデータストア(データベース)、ファイルストア(ストレージ)、会員管理、プッシュ通知、スクリプトがあります。スクリプトは最も最近出てきた機能で、node.jsベースのコードでmBaaSを拡張できるようになります。



JavaScript SDKを提供しており、Cordovaと絡めて動かすこともできます。このセッション中でのデモは失敗したのですが(失敗した理由はCordovaのセキュリティ上のメタタグを設定し忘れたためです)、Cordovaプロジェクトへの組み込みはBower/npmを使って簡単にできます。



JavaScript SDKさえ組み込んでしまえば、ごく短いコードでデータをクラウド上に保存できるようになります。






Cordova勉強会は今後も行われるとのことで、ぜひ登壇者を募っているそうです。興味がある方は連絡してみてはいかがでしょうか。

Monacaのプレビューを使う際のTips

最近Monacaをハンズオンで使っています。開発環境を用意せず、ブラウザさえあればすぐに動くものが作れるというのは大きなポイントになります。



しかし普段の開発環境とは異なる分、詰まってしまうこともあるようです。そこで今回はMonaca IDEを使った開発において注意して欲しいポイントを紹介します。



Webブラウザとスマートフォンアプリでのイベントの違い



WebブラウザでjQueryなどを使った開発を行っている時に、 $(function() {}) をよく使うかと思います。これはDOMの構築などが終わり、JavaScriptを安全に実行できるようになった状態で呼び出されます。しかしMonaca(Cordova)アプリの場合、さらにプラグインの読み込みなども完了しなければ安全に開始できません。それは deviceready というイベントになります。ただしこのイベントはWebブラウザでは実装されていないので、Monaca IDEのプレビューでは使えません。



そこで次のようにコードを書くと便利です。





function onDeviceReady() {
    alert("読み込まれました");
}
var event = typeof cordova === 'undefined' ? 
                              'DOMContentLoaded' : 'deviceready';
document.addEventListener(event, onDeviceReady, false);


これはWebブラウザの場合はDOMContentLoaded、スマートフォンアプリの場合はdevicereadyをイベントリスナーに設定する指定です。iPhone/iPad/Androidの区別だけではスマートフォンのWebブラウザ判別には使えませんので、Cordovaアプリに特有のグローバル変数であるcordovaがあるかどうかを判定に使っています。これでプレビューの場合も確認が容易になります。



このテクニックはclickイベントとtapstartイベントを分ける際にも使えます。スマートフォンにおけるclickイベントは若干の遅延があるので、tapstartを積極的に使っていくべきなのですが、Monaca IDEのプレビューでは反応しなくなってしまいます。そこで処理分けすることでどちらでも動作する、かつ最適な動作が期待できるようになります。



リモートファイルを読み込む場合の注意



同様にMonaca IDEのプレビューではリモートファイルを読み込むのに制限(CORS)があります。そのため、スマートフォンアプリとして外部のXMLJSONを読み込む場合、同じファイルをMonacaプロジェクト内にも用意して、プレビューの時にはそのファイルを読み込むようにしましょう。処理分けは上記と同じ仕組みが使えます。



自社のアプリで、サーバと通信するといった場合にはCORSの設定を行っておけば問題ないでしょう。



JavaScriptエラーの確認の方法



Monaca IDEにはコンソールが表示されているので、プレビューで起こっているエラーも確認できるかと思ってしまう方がたくさんいます。しかしこれはMonacaデバッガー用のエラー表示になるので、プレビューのエラーは出ません。





そこでエラーの確認方法なのですが、プレビューのアプリの画面相当部分を右クリックします。そして出てきたコンテクストメニューで要素の検証であったり、検証といったDevToolsが開くメニューを選択します。これ以外の方法ですと、プレビュー全体であったり、Monaca IDEを対象としたDevToolsが開いてしまいますので注意してください。





DevToolsが開けば、コンソールを見てエラーメッセージが確認できます。なお、時々保存忘れというケースもありましたので、ちゃんとファイル保存されているかも確認してください。





プレビューはHTMLファイルを開いている時以外には表示されません



プレビューはあくまでもHTMLファイルを編集している場合に限って右側に表示されます。JavaScriptCSSなどを編集中に確認する場合は別ウィンドウとして表示されるので注意してください。なお、別ウィンドウの場合でもファイル編集後のリロードは自動的に行われます。








こうした点に注意すると、初学者の方であってもMonaca IDEを使ったアプリ開発がスムーズに開始できるかと思います。特にプレビューをうまく使えばデザインや動作確認が素早く行えるようになります。ぜひお試しください!

MonacaクラウドとGitHub連携方法

MonacaクラウドGitHubがついに連携しました。多数のご要望を頂いていた機能だけに、従来の開発にGitHubをご利用いただいている方には簡単に使いこなせると思いますが、GitHubアカウントでのMonacaへのシングルサインオンや、クローン、コミットやプッシュなど、MonacaクラウドIDE上のプロジェクトをGit管理ができるようになりましたので、画面を見ながら説明します。

1.MonacaGitHubの連携設定



Monacaダッシュボード画面からアカウント情報を選択すると「GitHub連携」メニューが追加されています。こちらを押下し、GitHub連携設定に進んでください。



このような、GitHubアカウント連携の設定画面に遷移しますので、「連携する」ボタンを押下してください。


すると、GitHubログイン画面へ遷移します。


ログインしたGitHubアカウントにMonacaとの連携を許可しましょう。

「Authorize applicatioin(Monacaアプリケーションを承認する)」ボタンを押下して、MonacaGitHub連携初期設定が完了します。
※なお、先に個別アカウントにのみ承認をしてしまって、あとからOrganizationに対して承認を行いたい場合は、一度MonacaとのGitHub連携を解除し、再度連携設定を最初から行い、本画面にてOrganizationからMonacaを承認する必要がありますのでご注意ください。







2.Monacaプロジェクトとリポジトリの紐づけ



次に、Monacaプロジェクトソースを連携しているGitHubアカウントへアップロードしましょう。もし連携したGitHubアカウント上に空のリポジトリが存在しない場合は、新規リポジトリを作成するようメッセージが表示されます。

「空のリポジトリを作成する」ボタンを押下してください。



すると、下記のような新規リポジトリを作成画面を遷移します。
なおプライベートリポジトリをご利用いただく場合は、有料となります。


空のリポジトリが作成できました。


さて、MonacaのプロジェクトIDEに戻ってください。
再度バージョン管理メニューから管理項目を選択すると、空のリポジトリが存在する場合はリポジトリ名称選択・通知などに使うメールアドレス選択が求められます。Organization(組織やチーム用リポジトリの場合は、コミット名の入力が追加されます。

入力が終わったら「設定する」ボタンを押下してください。


全てのコードがGitHubへアップロードされるまで、少し間があります。すべてのコードがアップロードされ、Monacaとの紐づけが完了すると、下記の画面が表示されます。


このように、GitHub上にもソースコードが管理されていることが確認できるでしょう。




3.コミット&プッシュ



それではコードを修正してリポジトリへのコミットを試してみましょう。バージョン管理メニューからコミットを選択してください。修正されたファイルの一覧が表示されますので、コミットしたいファイルを選択し、「コミット」ボタンを押下してください。


正常にコミットが完了したらこのような画面が表示されます。


ソースコードの修正差分をご覧いただきたい場合は、バージョン管理メニューからコードのコミット履歴を選択してください。リモート上のコミット履歴も閲覧できます。


開発を進めコミットされたコードを、リモートのGitHubにあるリポジトリにプッシュするには、上部メニューからプッシュを選択してください。




このようにしてGitHub連携をおこない、MonacaIDE上にて開発しているコードを管理することが出来るようになりました。


4.GitHubアカウントを使ったログイン



ひとたびMonacaGitHubの連携設定ができましたら、MonacaのIDとパスワードを入力することなくログインすることができるようになります。
なお、ご利用のブラウザでGitHubへログインしていない状態だと、GitHubのログイン画面へ遷移します。



5.GitHubからのソースコードインポート



プロジェクト新規作成時に、GitHubリポジトリからMonacaプロジェクトのソースコードをインポートすることが出来るようになりました。チームで開発する場合は、OrganizationとしてGitHubにて設定したアカウントと紐づけを行っておくと、インポートをしたいリポジトリ選択欄にOrganizationのリポジトリも掲載されます。
なお、Organizationのリポジトリをご利用いただく場合、Monacaパーソナルプランからご利用いただくことができます。

動画を使ったアプリ利用解析を実現するReproはMonacaで簡単に利用できます

Monacaでは多くの外部サービスと連携できるようになっています。今回はアプリマーケティングで欠かせない利用者を理解するのに役立つReproを紹介します。





Reproについて



Reproはアプリの操作を記録し、Web上で動画として操作を確認できるサービスです。ユーザの利用状態を可視化することで、どこでユーザが迷っているのかであったり、アクティブ率に関わるアプリ上の問題を発見することができます。



数多くのプラットフォームに対応しており、Monacaにも対応しています。しかも無料ユーザから利用できるようになっています。





Reproでトークンを取得する



まずReproにてユーザ登録を行います。そうするとトークンが取得できますので、コピーしておきます。Repro側で必要な作業はそれくらいで、とても簡単にはじめられます。



Monacaでの使い方



Monacaで適当なアプリを作成した後、設定メニューの*を選択します。





出てきた一覧の中でReproを選択します。





詳細な説明が出ますのでセットアップをクリックします。





確認が出ますのでOKをクリックして実行します。





これでReproのSDKがインストールされました。





設定を行う



次に測定するための情報を記述します。単純に全操作を記録する場合は次のように書きます。YOUR_APP_TOKENはReproにて取得したトークンに書き換えてください。





document.addEventListener("deviceready",onDeviceReady,false);
function onDeviceReady() {
    Repro.setup("YOUR_APP_TOKEN");
    Repro.startRecording();
}


さらに何かのイベント(クリックなど)を記録したい場合は任意の場所で次のように記述します。





Repro.track("App Launch");


また、ユーザを指定することもできます。





Repro.setUserID("foo@example.com");


これだけで使えますのでとても手軽です。



アプリをビルドする



Reproを使うためにはMonacaデバッガーではなくビルドしたアプリで使う必要があります。今回はiOSアプリとしてビルドしています。





ビルドが完了したら実機にインストールしてください。



Reproを試す



Reproを試す場合は、アプリを起動して適当に操作するだけでOKです。最後にホームボタンを押して終了です。アプリがバックグラウンドになると記録が停止します。動画がアップロードするまで管理画面には反映されませんが、ほとんど待ち時間なく反映されるはずです。





アップロードされた動画はWeb管理画面上でいつでも繰り返し再生ができます。イベントが記録がされていれば、動画の途中に印が入っています。








MonacaアプリにReproを組み込むのはとても簡単にできます。コード量も少ないので、すぐに使いこなせるでしょう。後はアプリの動線を解析し、より良いアプリ開発に取り組んでください。



Repro

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系がインストールされます。


また、このままですと node_modules 以下に配置されて使いづらいので、browserifyをインストールします。





npm install -g browserify


そしてコードを書きます。例えばファイルを index.js とします。






require('onsenui');

// 自分のWebアプリケーションのコード


後は最後に browserify を実行します。





browserify index.js -o app.js


これで onsenuiが入った状態でJavaScriptコードが生成されます。JavaScript側ではapp.jsを読み込むようにすれば問題ありません。



Bowerを使う方法



BowerもNode.js/npm同様に進めることができます。Monaca IDEはBowerを使ったプロジェクトのインポートに対応していますので、さらに手軽と言えそうです。ただしBower自体はnpmを使ってインストールします。





npm instlal bower -g


そしてアプリを開発するプロジェクトのルートで bower initを実行します。





bower init


次にOnsen UIをインストールします。現在はバージョンを指定する必要があります。





bower install onsenui#2.0.0-beta.7 --save


ファイルは bower_components/onsenui/ 以下にインストールされます。



ファイルをダウンロードする



3つ目はJavaScript/スタイルシートファイルを直接ダウンロードする方法です。Releases · OnsenUI/OnsenUI-distから最新版がダウンロードできます。解凍したフォルダの中にあるjs/cssフォルダを好きな場所に配置してください。



Monacaのテンプレートを使う



最後にMonacaのテンプレートを使う方法です。Monacaのプロジェクトテンプレートの中に、Onsen 2.0 クイックスタートというテンプレートを用意していますので、これを選択するという方法になります。これは予めOnsen UI 2.0が組み込まれていますので手軽にはじめることができます。





こちらがOnsen UI 2.0クイックスタートプロジェクトです。



Reactと組み合わせたデモも内包されています。



実際に使ってみる



では実際にOnsen UI 2.0を使ってみたいと思います。例えばHTMLは次のようになります。ファイル名は index.html とします。





<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />
    <title>Onsen UI 2.0 Quickstart</title>
    <script src="node_modules/onsenui/js/onsenui.min.js"></script>

    <link rel="stylesheet" href="node_modules/onsenui/css/onsenui.css" type="text/css" media="all" />
    <link rel="stylesheet" href="node_modules/onsenui/css/onsen-css-components.css" type="text/css" media="all" />
</head>

<body>
  <ons-page>
  </ons-page>
  <ons-tabbar>
  <ons-tab page="page1.html" label="Page 1" icon="square" active="true"></ons-tab>
    <ons-tab page="page2.html" label="Page 2" icon="square"></ons-tab>
    <ons-tab page="page3.html" label="Page 3" icon="square"></ons-tab>
    <ons-tab page="page4.html" label="Page 4" icon="square"></ons-tab>
    <ons-tab page="page5.html" label="Page 5" icon="square"></ons-tab>
  </ons-tabbar>
</body>


見て分かる通り、onsenui.min.jsしかJavaScript側では読み込んでいません。スタイルシートはベースになるonsenui.cssと、各種コンポーネント用のonsen-css-components.cssを読み込んでいます。



bodyタグの中身はを使ったOnsen UIの定義になります。さらにpage1.htmlを次のような内容で作成します。





<h3 class = "title-h3">iOS Switch</h3>
<p>
  <ons-switch></ons-switch>
</p>
<h3 class = "title-h3">Material Switch</h3>
<p>
  <ons-switch modifier="material" checked></ons-switch>
</p>


こちらはヘッダーもなく、いきなりbodyタグ内の内容を記述します。さらにpage2.htmlを次のように定義します。





<ons-list>
  <ons-list-header>Page 2</ons-list-header>
  <ons-list-item>Item</ons-list-item>
  <ons-list-item>Item</ons-list-item>
</ons-list>


こちらはを使っています。いずれのファイルもJavaScriptの定義であったり、AngularJSの記述は一切ありません。



このファイルを開くと、次のように表示されます。





まさにスマートフォンアプリ風のUIになっているのが分かるかと思います。さらにons-tabbarの一番左のページがデフォルト表示になります。今回はpage2.htmlまでしか作っていませんが、タブ1とタブ2がタップで表示切り替えできる点も確認できるかと思います。






このように外部ライブラリへの依存性が減ったことで、自由度が高まったり、すでに多数あるJavaScriptフレームワークと組み合わせた開発ができるようになっています。Onsen UI 2.0は間もなく正式リリースになります。ぜひお試しください!



Onsen: HTML5 Hybrid App Framework & UI Components

Lebabを使ってECMAScript6を体験しよう

新しいJavaScriptであるECMAScript6(以下ES6)はすでにnode.jsをはじめとする幾つかの環境で使えるようになっています。クラスやimport、Promise、テンプレート文字列など便利な機能がたくさんありますが、なかなか使う機会に恵まれないのではないでしょうか。



そこでよく使われているのはBabelで、ES6で書いたコードを従来のJavaScriptであるECMAScript5(以下ES5)に変換してくれるソフトウェアです。Babelを使うことによって、コーディングは先進的なES6で行いつつ、実際の利用はES5で幅広いブラウザに対応させると言った利用ができます。



今回はその逆で、すでにあるES5のコードをES6に変換してくれるLebabというソフトウェアを紹介します。LebabはBabelを逆から読んだ名前になっています。



Lebabの使い方



Lebabはnpmを使ってインストールができます。





$ npm install -g lebab


コマンドオプションは次のようになっています。





$ lebab --help

  Usage: lebab [options] <file>

  Turn your ES5 code into readable ES6

  Available transforms:

    + class .......... prototype assignments to class declaration
    + template ....... string concatenation to template string
    + arrow .......... callback to arrow function
    + let ............ var to let/const
    + default-param .. use of || to default parameters
    + obj-method ..... function values in objects to methods
    + obj-shorthand .. {foo: foo} to {foo}
    + no-strict ...... remove "use strict" directives
    + commonjs ....... CommonJS module loading to import/export

  Options:

    -h, --help            output usage information
    -V, --version         output the version number
    -o, --out-file <out>  compile into a single file
    --enable <a,b,c>      enable only specified transforms
    --disable <a,b,c>     disable specified transforms


後はES5のJavaScriptファイルと、出力先のJavaScriptファイルを指定すればOKです。





$ lebab es5.js -o es6.js


利用するライブラリ、しないライブラリを指定することもできます。





$ lebab es5.js -o es6.js --enable let,arrow,commonjs


他にもWeb上でライブデモを使って試すこともできます。





サンプル



例えば変数の定義と、その後での上書きによってconst/letを使い分けてくれます。





// Let/const
var name = 'Bob', time = 'yesterday';
time = 'today';
  ↓
const name = 'Bob';
let time = 'yesterday';
time = 'today';


nameは定義したまま使っていますのでconst、timeはその後で上書きしているのでletを使っています。



テンプレート文字列も使えます。





// Template string
console.log('Hello ' + name + ', how are you ' + time + '?');
  ↓
// Template string
console.log(`Hello ${name}, how are you ${time}?`);


オブジェクトメソッドはfunctionが省略されます。





var bob = {
  // Object shorthand
  name: name,
  // Object method
  sayMyName: function () {
    console.log(this.name);
  }
};
  ↓
const bob = {
  // Object shorthand
  name,
  // Object method
  sayMyName() {
    console.log(this.name);
  }
};


さらにクラスもきちんと認識されます。





var SkinnedMesh = function SkinnedMesh() {
};

SkinnedMesh.prototype.update = function (camera) {
  camera = camera || createCamera();
  this.camera = camera;
};

Object.defineProperty(SkinnedMesh.prototype, 'name', {
  set: function (geometry) {
    this.geometry = geometry;
  },
  get: function () {
    return this.geometry;
  }
});

  ↓
class SkinnedMesh {
  update(camera=createCamera()) {
    this.camera = camera;
  }
  set name(geometry) {
    this.geometry = geometry;
  }
  get name() {
    return this.geometry;
  }
}


後はNode.jsの場合requireを使ってきましたが、importに書き換わります。





var lebab = require('lebab');
module.exports = SkinnedMesh;
  ↓
import lebab from 'lebab';
export default SkinnedMesh;


最後にアローファンクションです。これもES6の特徴的な書き方だと思います。





var render = function () {
  requestAnimationFrame(render);
};
  ↓
const render = () => {
  requestAnimationFrame(render);
};


Lebabを使うメリット



普段の開発の中でLebabを使うことはあまり多くないかと思います。しかし今後ES6が広まっていく中で、ES6の書き方を覚える必要が出てくるでしょう。そんな時にLebabを使って軽く試せるとモダンな書き方を確認できるようになります。



さらに既存のES5で書かれた多くのリソースもLebabを使うことでES6に変換できるようになります。資産が多すぎるために乗り換えを躊躇してしまっている場合は特に便利ではないでしょうか。



ぜひLebabを試してみてください!



mohebifar/lebab: Turn your ES5 code into readable ES6. It does the opposite of what Babel does.