初心者のためのExtJS入門スマートフォン用の表示で見る初心者のためのExtJS入門ExtJSを使うので、ついでにまとめていきます2017-01-29アプリケーションを本番用にビルドするExtJS今回の話題はビルドです。ビルドコマンド開発途中は↓のコマンドを使います。チュートリアルでも、このコマンドを使っていました。このコマンドは簡易的なビルドとサーバ起動を行ってくれます。[classic|modern]本番環境で稼働させる場合は、↓のコマンドでビルドします。buildこのコマンドを実行すると、build/productionディレクトリが作成されます。上記キャプチャだと、productionの下にSampleディレクトリが作成されています。これはアプリケーション名をSampleとしているためです。このディレクトリの中には、圧縮されたjsやcss、画像ファイルやフォントファイルなどが作成されています。classicとmodernディレクトリの下に、それぞれアプリケーションで作成したclassicとmodernのソース一式が出力されます。この作成されたファイル一式を本番環境に適用すれば、基本的にはOKです。実際、Apacheでproduction/Sampleをドキュメントルートに設定して動かすと、PCブラウザでアクセスするとclassicの画面が、スマフォなどのブラウザでアクセスするとmodernの画面が表示されます。タグで単純に埋め込むなら実務ではWebアプリケーションフレームワークを使っていることが多いことでしょう。いう場面では「出力されたindex.htmlは使えないよ。既存のHTMLファイルにscriptタグで埋め込めないの?」という需要もあります。その場合は、直接classic、modern以下のjs、cssを使うこともできます。modernのリソースを使う場合は、例えば↓のようになるでしょう。src="modern/app.js"></script>ただし、classicとmodernのどちらを使用するかの判定は自分でやる必要があります。最近はデバイス判定のライブラリも存在するので、そちらを使うのであれば直接タグを指定する記述でも十分でしょう。私の場合は、PlayFrameworkをよく使っており、デバイスの判定はhttps://github.com/HaraldWalker/user-agent-utilsにまかせています。app.jsonapp.jsonファイルには、アプリケーションの設定を記述します。http://docs.sencha.com/cmd/guides/microloader.htmlが参考になります。ビルドの出力先ビルドの出力先は、app.json内のoutput.baseに定義されています。"${workspace.build.dir}/${build.environment}/${app.name}"}Webアプリケーションフレームワークの都合の良い場所に出力したい場合は、この値を変更するという方法があります。gulpやgruntなどのタスクツールで移動やコピーするのでも十分だと思います。この辺りは色々やり方があると思うので、都合の良い方法を検討・選択しましょう。変更していない場合、productionはキャッシュが有効になっていると思います。これは↓の記述に依ります。}}appCacheは、HTML5のアプリケーションキャッシュを使ったキャッシュです。別途appCacheの定義がapp.json内に記載されており、そこに記述されているファイルがキャッシュされます。cacheは、ローカルストレージを使ったキャッシュです。こちらはapp.jsをキャッシュします。ちなみに、このキャッシュはindex.htmlを使う場合は影響しますが、タグを直接埋め込む場合は使えません。おまけproductionに出力されたindex.htmlには、classicとmodernのどちらを使用するかを判定するjavascriptの処理が存在します(正確にはMicroloaderの機能になるのでしょうが)。Agentの内容で自動的に切り替わっていたのは、この処理のおかげです。将来、ブラウザの種類が増えた場合には、この判定処理も更新しないといけないので注意が必要です。ExtJSの更新に頼る、別ライブラリでデバイス判定する等、どのような準備をしておくか、あらかじめ検討しておきましょう。(2)今回もExtJS6.5のmodernグリッド改善点です。グリッドの各所に...2017-05-20アプリケーションで使用するExtJSのバージョンを上げるExtJS6.5がリリースされましたね。https://www.sencha.com/blo...2017-03-19多言語対応[classic]今回は言語の切り替えを試してみます。おおまかなポイントを列...2017-02-01グリッドの機能:カラム(列)[classic]※チュートリアルの登録画面あたりに不具合があったので一部訂正...2017-01-25チュートリアル:削除処理の実装(modern)今回はメモを削除できるようにします。(2)ツリーパネル[modern]任意のコンフィグを双方向バインディングに対応するスポットライト[classic]Googleマップアイコンフォントアイコンフォントのパッケージ作成suspendLayouts・resumeLayoutsES6で書いてみるExt.Deferredで非同期処理をまとめるビューモデルのデータにモデルを設定して使用するプラグインの作り方ミックスインの作り方ボタンのUIにバインディングできるように工夫するはてなブログをはじめよう!sham-memoさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。