オシャレなユニバーサル アプリの作り方 – その2

連載記事の一回目を翻訳してしまったので、パート2も翻訳しました。

Sencha 公式ブログの How to Build a Great Looking Universal App with Ext JS – Part 2 | Sencha の翻訳になります。

ユニバーサル アプリを構築する際のキモとなる、2つのツールキット。そして双方にまたがるコードはどこに置くのか。2つのツールキットで作成したアプリは、実行時にどのように選択されるのか。

といった、「ユニバーサル アプリ」と聞いて、湧いてくる疑問に答えてくれています。

著者は Lee Boonstra です。彼女のブログは翻訳しやすくて、内容も整っているので大好きです。

ではご覧ください。

“オシャレなユニバーサル アプリの作り方 – その2” の続きを読む

オシャレなユニバーサル アプリの作り方 – その1

Ext JS 6 の最大の「売り」は、デスクトップとモバイルのアプリを1つのコードベースで記述できるという点です。Sencha ではそうしたアプリのことをユニバーサル アプリと呼んでいます。 とはいえ、これまで Ext JS と Sencha Touch で、重複するコードを書かされてきた我々としては、実際にどうやれば1つのコードベースに統一できるのか、というところが見えてきません。

Sencha の公式ブログで、ユニバーサル アプリの作り方について書かれた記事が掲載されました。それを翻訳してみましたので、ご覧ください。

“オシャレなユニバーサル アプリの作り方 – その1” の続きを読む

Modern ツールキットでのデータバインディング – Sencha ブログより

近頃、Sencha 本家のブログでは技術資料的な記事が少し少なくなっていましたが、先日久々に技術的な記事が掲載されました。

ご存じのように、Ext JS 6 では、以前の Ext JS (Version 5まで) と、Sencha Touch という2つのフレームワークがマージされました。 これまで、Ext JS のユーザーが Ext JS 6 へ移行する記事は、いくつか見られたのですが、Sencha Touch ユーザーに向けた、Ext JS 6 の解説記事はありませんでした。

この記事では、Ext JS 6 の ViewModel を modern ツールキットで使う方法が書かれています。ツールキットとは、Ext JS 6 のビジュアルな部分を受け持つところで、現在は、classic と modern の2つのツールキットが存在します。 modern ツールキットは、Sencha Touch の流れをくむツールキットです。

ViewModel は、Ext JS 5 で導入された、MVVM あるいは M-V-VM-VC という新しいアーキテクチャで採用された、ビューに関連してデータを保持するクラスです。 Sencha Touch だけをやってきた方には馴染みのない概念だと思いますが、これを利用することで、非常にアプリケーションを作成しやすくなります。

ではご覧ください。 Data Binding in the Ext JS Modern Toolkit | Sencha の翻訳です。 “Modern ツールキットでのデータバインディング – Sencha ブログより” の続きを読む

Ext JS 6 で複数環境に対応する方法

こんにちは、療養中の @martini3oz です。

Sencha から Ext JS 6 の GA が発表になってから、しばらく経ちますが、 このブログでは、まだ Ext JS 6 の話題を扱えていませんでした。

Ext JS 6 の目玉はいくつかあるのですが、最も大きな点は、Ext JS と Sencha Touch が「マージされた」ということでしょう。 以前から Sencha フレームワークをお使いの方は、「マージ」ってどういう風に?と思われることでしょう。 大まかに言うと次のようになります。

  • Ext JS と Touch のクラスシステムの微妙な違いを統一した
  • core パッケージという、共通部分を担うパッケージができた
  • classic と modern という二つの「ツールキット」を用意した
  • Sencha Cmd で、それぞれのツールキットを切り替えられるようにした
  • microloader で実行するビルドを切り替えられるようにした

クラスシステムの微妙な違いはこまりものでした。UI に関係のない Model の定義ですら違いがあったので、Ext JS と Touch の両方で使うクラスを書くことはほぼ不可能でした。クラスシステムの統一と core パッケージによって、これが解消されたのは非常に大きな事です。

そして、Ext JS 5 は classic というツールキットに、Touch は modern というツールキットになりました。 ツールキットは、ビジュアルクラス部分で、それぞれデスクトップ用、モバイル用と分類されますが、別な視点で言うと、レガシー用、HTML5用とも言えます。 Ext JS 6 の現在のバージョンでは、modern の方は Touch をそのまま移植した程度のコンポーネントになっていて、classic にはあるけど modern にはないコンポーネントが多数ありますが、これも徐々に増えていくそうです。

この「マージ」によって、一つのソースコードでデスクトップからスマートフォンまですべてに対応したアプリケーションを作ることが可能になったのでしょうか。 現状で言うと、「限りなくそれに近い」という答えになります。 classic と modern は別個のツールキットなので、一つの製品のなかに両者を混在することはできません。 しかし、両者の共通部分は一つのソースコードで記述できます。 また、classic と modern という二つのビルドはできるのですが、microloader の働きで、アクセスしてきたデバイスに応じて、読み込むビルドを自動的に選択してくれます。

レガシーブラウザからスマートフォンまで、すべてのデバイスで動作する、ユニバーサルアプリケーションを作る方法について、以下、Sencha のガイド Developing for Multiple Environments and Screens を翻訳しましたので参考にしてください。(翻訳ミスなどみつけたら教えてください) “Ext JS 6 で複数環境に対応する方法” の続きを読む

Ext JS 5 データパッケージ

Sencha Advent Calendar 2014 も残すところ、2つとなりました。

もちろん、大トリは、@kotsutsumi さんですので、私が前座を取らせてもらいます。

この前の記事でご紹介した THE KIDDIE ですが、あのあとも色々と聴いているんですが、いいんですよ。楽曲もいいし、歌うまいし。皆さんも聴いてみて下さい。 最新曲 OMELAS の PV がこちらです。明日は、渋谷公会堂でライブです。行きたかったなぁ〜。

“Ext JS 5 データパッケージ” の続きを読む

DYSTOPIA

この記事は、 Sencha Advent Carendar 2014 の16日目の記事です。 @martini3oz がお届けします。

新しいことを覚えるというのは、大変ですが楽しいものです。

僕も先日、新しい体験をしました。THE KIDDIE というロックバンドのライブを観に行ったのです。 それはもう、これまで全然知らなかった世界でした。 とても新鮮でしたし楽しかった。KIDDIE サイコー。揺紗くんサイコー、ユウダイくんサイコー!

あ、Sencha の話でした…

“DYSTOPIA” の続きを読む

Ext JS 5 資料リスト

こんにちは、これは、Sencha Advent Calendar 2014 の 8日目の記事です。

今年は、Advent Calendar に 3つの記事を書こうと思っています。

今回は、軽くジャブで、Ext JS 5 に関する資料リストをご提供します。 え?手抜きですか?

でも、まとめサイトみたいなものが、これまでにないので、結構役立つのではないかと。(汗 “Ext JS 5 資料リスト” の続きを読む

Sencha UG 勉強会@大阪に登壇します

来る 10月24日に、Sencha UG の第20回勉強会@大阪が開催されます。 大阪でやりますので、僕も登壇します。

参加申し込みはこちら

  • 日時 :2014/10/24 19:00 to 21:00
  • 定員 :15 人
  • 参加費 :無料
  • 会場 :株式会社ゼノフィ関西事業所 (大阪府大阪市北区東天満1-14-10 MF南森町2ビル 2階)

Sencha Ext JS 5 が公開されてしばらく経ちましたが、もうお使いの方、様子見の方、これから Ext JS を始められる方、といろいろではないでしょうか。Sencha UG 大阪では、全国に先立って Ext JS 5 をテーマにした勉強会を開催します。

“Sencha UG 勉強会@大阪に登壇します” の続きを読む