今回はタイトル通り、CordovaアプリでプラットフォームごとにCSSを切り替える方法について。
デザインにもよるかもしれませんが、覚えておくと意外と便利です。
今回参考にさせていただいた記事はこちら。
第3回：Apache Cordovaでプラグインを使ってみよう (1/5)：連載：Visual Studio＋Apache Cordovaで始めるiOS／Androidアプリ開発 – @IT
http://www.atmarkit.co.jp/ait/articles/1605/23/news032.html
こちらの2ページ目に記載されている内容です。
こちらの設定はそれほど難しくなく、まずは大元となるCSSを作成し、アプリ内で読み込みます。
ここでは仮に style.css としておきます。
次に、プロジェクトのルートディレクトリ直下に merges ディレクトリを作成し、更にそのフォルダ内に、android、ios など、プラットフォーム名のディレクトリを作ります。
最後に、各プラットフォーム内にcssディレクトリを作成し、その中に、上で作成した style.css ファイルをコピー＆ペーストします。
イメージとしてはこんな感じ。
merges
┗ android
┗ css ― style.css
┗ ios
┗ css ― style.css
あとは、各プラットフォームの style.css ファイルを変更すればOKです。
なお、大元の CSS から変更がない場合は、そのプラットフォームのディレクトリを作成する必要はありません。
例えば、iOS はデザインを追加もしくは変更したいけど、Android はそのままでOKという場合は、ios ディレクトリ以下のみを作成するだけで、変更が反映されます。
注意点というか推奨ですが、こちらを実装する場合は、切り替える必要のある記述のみを 別ファイルに抜き出すことをおすすめします。
一度こちらの方法でCSSを切り替えたとき、CSSファイルをそっくりそのままコピーして各プラットフォームごとに配置してしまったので、CSS ファイルの内容を把握するのが若干大変でした。
是非、私と同じわだちを踏まないようにしてください…。
また、JavaScript や画像でも上記の方法を用いれば、同様にプラットフォームごとに処理を変更することができます。
が、私は試したことがないので…興味やその必要性のある方は、是非実際にお試しください。
以上、プラットフォームごとにCSSを切り替える方法でした。
もし以前の私のように、同じことにお悩みの方がいらっしゃいましたら、参考にしていただければ幸いです。
