(この記事は Khemry Khourn が 2018年3月19日に The Web Tub に投稿した Monaca & Onsen UI: Next 1–2 Months の翻訳です。)

この記事ではMonaca&Onsen UIに関する近況報告と、今後リリースする新機能に関してご案内いたします。Monaca&Onsen UI両チームともに次のステージへと直実に開発を推し進めていくため、短期目標を設定し日々まい進しております。

まずは2月の活動内容を振り返り、次にリリース予定の機能をご紹介させていただきます。

2月の活動内容

Monacaの最新iOSへの対応

iPhone XとiOS 11のリリースによって、ビルドとデプロイの仕様が一部変更されました。App Store用のアイコン(1024x1024)もその1つであり、アプリの申請時に必須となりました。

修正が必要となる項目に関してはMonaca側でもすでに対応を済ませておりますので、いままでどおりMonacaをお使いいただければ最新iOSや機種に適した設定・ビルド・デプロイ処理が行われます。また、ご要望いただいていたストーリーボード(Storyboard、スプラッシュ画像の表示機能)も新たにサポートいたしました!

スプラッシュ画像の設定(LegacyオプションとStoryboardオプション)

Onsen UIコンポーネントのUI/UXの改善、日本語対応

2月は大きな更新こそはなかったものの、ユーザーインターフェイスとユーザー体験をさらに充実させるため、ナビゲーション・タブバー・スプリットビュー(分割画面)・スイッチをはじめとする多くのOnsen UIコンポーネントに手を加えております。Onsen UIコンポーネントをお使いの皆様に最高のユーザー体験を提供するため、Onsen UIチームは今後も日々切磋琢磨していきます。

また、Onsen UIテーマローラー を日本語対応させました!英語版のテーマローラーは以前から公開しておりましたが、今回新たに日本語版も用意いたしました。Onsen UIを利用してくださる日本語ユーザーの方が増えてきたので少しでもお役に立てればと願っております。

Onsen UIテーマローラー(日本語版)

今後の予定

Monacaの新クラウドIDEに実装される機能

MonacaクラウドIDEのUIがリニューアルされますので最初にここでご紹介させていただきます!正式なリリースはもう少し先になりますがどうぞ楽しみにお待ちください。
それでは新しく搭載される予定の機能を見ていきましょう。

新MonacaクラウドIDE

1.クラウドIDEにおけるトランスパイル処理のサポート

新クラウドIDEで提供する主要な機能の一つにトランスパイル処理(コード変換)があります。この機能により、React、Vue.js、Angularなどを使用したトランスパイル処理を施す必要のあるプロジェクトもクラウド上で開発できるようになります。また、トランスパイル処理にはwebpackを使用しているためモジュール群の管理も行えます。
新クラウドIDEに実装されているターミナルウィドウ上ではプレビューが動作し、プロジェクトのホットリロード(hot reloading)にも対応しています。

実装されたターミナルウィンドウ

2.操作性を向上させ、さらに使いやすくしたクラウドIDE

Monaca開発チームでは開発者様の使い勝手を常に念頭に置き、クラウドIDEにおけるユーザーインターフェイスの改善、新機能の追加、既存機能の修正を行っています。

今回は、レイアウトに使用されているパネル群を自由に配置できるように新クラウドIDEの仕様を変更しました。旧クラウドIDEではすべてのパネルが固定されています。一方、新クラウドIDEではパネルをドラッグして移動させることができます。また、各パネルは最大化・最小化できます。これによりお好みのレイアウトにパネルを配置することができます。なお、このレイアウト機能には GoldenLayout を使用しています(GoldenLayoutはWebアプリ向けの画面レイアウトマネージャーです)。

自由自在なパネル配置

また、パネルの置き換え機能に加えて複数のプレビューウィンドウ上でアプリの動作を確認できる機能も追加しました。それぞれのプレビューウィンドウには異なる機種設定を選択できるので、複数の機種上におけるアプリの動作を同時に確認できるようになります。

アプリの開発ではコードを「書く」ことに多くの時間が費やされます。そのため、コードエディタの使い勝手が良ければ開発時間・効率ともに改善されることでしょう。検討を重ねた結果、新クラウドIDEではいままで使用していたAceエディタを廃止して Monaco に切り替えることにしました。Monacaとの親和性も良く次のような付加価値ももたらしてくれます。

・Language Serverという仕組みによって、自動補完システムを拡張しています。私たちが現在サポートしている言語はTypeScript、HTML、JavaScriptおよびOnsen UIです。将来的にはReactとVueもサポートする予定です。
・ソースコードの色分け(シンタックスハイライト)が行われます。
・自動補完システム(インテリセンス)とコード検証(バリデーション)機能が充実しています。

新クラウドIDEに実装されたMonacoエディタ

新クラウドIDEではMonacaバックエンド管理画面がリニューアルされたこともお伝えしておきます!Monacaバックエンド管理画面は別ウィンドウ上で表示されるようになりました。別ウィンドウに切り離されたことで、ユーザー管理、コレクション、プッシュ通知、メールテンプレートの各機能も以前より操作しやすくなったかと思います。管理画面トップまたは左パネルから各機能へ移動することができるので操作性・視認性が向上しました。

Monacaバックエンドの新管理画面

3.Monacaドキュメントのリニューアル

Monacaドキュメント を掲載しているサイトもリニューアルしております。今のところコンテンツに大きな変更はありませんが、今後はAPIの活用方法やサンプルアプリの充実に取り組み、Monacaが提供している多種多様な機能をより身近に感じられるように内容を随時改編していく予定です。

新デザインのMonacaドキュメント(トップページ)

Onsen UIドキュメント内容の改善とチュートリアルの追加

Onsen UIドキュメントのコンテンツも大幅に変更しております。特に各Onsen UIコンポーネントの使用例と解説を充実させました。今後は役立つチュートリアルも随時追加していく予定です!


ご紹介した機能は段階的に随時リリースして行きます!Monaca開発チームは今後もアプリの開発者側の視点に立ちMonacaの使い勝手が良くなるように尽力していきます。実際に使用してぜひご意見などをお聞かせください!

Cheers,

Monaca & Onsen UIチーム開発者一同

翻訳者紹介
渡部正和/Masakazu Watabe
フリーランスの翻訳家。インターネット・通信業界で10年ほど翻訳を経験したあと、2013年からフリーランスに。直訳ではない、わかりやすい翻訳を心がけています。校正など翻訳全般に関するご相談がありましたら watabe08@gmail.com(渡部) まで。