「ExtJS6」タグアーカイブ

Ext JS と Electron でインストール可能なデスクトップ アプリケーションを作る

この記事は、Sencha の公式ブログ記事 Creating Installable Desktop Applications with Ext JS and Electron を翻訳したものです。

extjs-electron-img1

ベテランの Ext JS 開発者であっても、Ext JS を使って (Windows、MacOS、Linuxで動作する) .exe とか .app ファイルの実行可能なデスクトップ アプリケーションを作る事ができると聞くと、驚くでしょう。 実際に Sencha Themer、 Sencha Architect、 Sencha Inspector、 Sencha Test は、Ext JS でビルドし、Electron でパッケージした実行可能なデスクトップ アプリケーションです。 Ext JS で作って Electron でパッケージしたアプリケーションは、 Windows Store や Mac App Store にアップロードして販売することもできます。 この記事では、Ext JS 6 のスターター アプリケーションをビルドしてパッケージするプロセスについてご案内します。 続きを読む →

Sencha FontAwesome パッケージをリバースエンジニアリングしてアイコンの概要を知る

何度か、このブログでも翻訳させて貰った、Lee Boonstra のブログ記事 Reverse Engineer the Sencha FontAwesome package to get an overview of icons. | Dev Tricks を翻訳しました。

Sencha に同梱されている FontAwesome フォントパッケージについて解説された記事です。どうぞご覧ください。

続きを読む →

Sencha Ext JS で美しい線画を描く Part 2

昨日、一つ前の記事を翻訳して公開したところ、タイミングの良いことにその Part 2 が今朝 Sencha 本家の方で公開されました。 連載ですので、一旦手をつけたら翻訳も続けないといけないと思うので、Part 2 も翻訳しました。(文章部分が少なかったので楽でしたw)

元記事は Creating Beautiful Drawings Using Sencha Ext JS – Part 2 | Sencha です。 続きを読む →

Sencha Ext JS で美しい線画を描く Part 1

先日、急に熱が出まして、入院する羽目になってしまいました。 今もまだ病室の中なんですが、もうじき退院できそうです。 体調が良くなってきたので、Sencha ブログの翻訳をしてみました。

Sencha 公式ブログの Creating Beautiful Drawings Using Sencha Ext JS – Part 1 | Sencha の翻訳です。 Draw パッケージは、API ドキュメント以外になかなかいい資料がないので、この連載は楽しみです。 僕としては、この回にもうすでに目からウロコな話がありました。 続きを読む →

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

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

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

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

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

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

ではご覧ください。

続きを読む →

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

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

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

続きを読む →

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 の翻訳です。 続きを読む →

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 を翻訳しましたので参考にしてください。(翻訳ミスなどみつけたら教えてください) 続きを読む →