【Cordova】プラットフォームごとにCSSファイルを切り替える方法

村上 著者:村上

【Cordova】プラットフォームごとにCSSファイルを切り替える方法

今回はタイトル通り、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を切り替える方法でした。
もし以前の私のように、同じことにお悩みの方がいらっしゃいましたら、参考にしていただければ幸いです。

  • この記事いいね! (0)

著者について

村上

村上 administrator