Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

Cordovaでアプリを公開するためのビルド方法をカスタマイズしよう

Apache Cordovaで本格スマホアプリに挑戦しよう 第14回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2017/02/22 14:00

 今回はアプリがリリース段階になった場合を想定し、ビルドを行うために必要な設定や、便利なTIPSを紹介します。これまでは実際にリリースすることを想定していなかったため、ほとんどデフォルトの状態で何も設定していませんでした。しかし実際の開発では、アプリ名の変更やアイコン・スプラッシュ画像などを設定する必要があります。これらアプリの設定は、実際のアプリ開発者なら簡単にわかることであっても、Cordova上の設定ではどうすればいいか、わからない方もいるのではないでしょうか。今回はそれらの設定や方法などを紹介します。

目次

対象読者

  • スマホアプリに挑戦したいと思っているWeb開発者
  • アプリ開発をもっと楽にしたいと思っている方
  • 業務スマホアプリを作る開発者

プロジェクトの設定ファイルを理解しよう

 Cordovaではプロジェクトの設定がconfig.xmlというファイルで管理されています。このファイルはプロジェクトを管理するためのCordovaの設定に加えて、作成するアプリのプラットフォームに応じた設定なども行います。そのため、それぞれのプラットフォームのプロジェクト内で、直接設定ファイルを編集せずに管理できるようになっています。設定方法を理解するにはこのファイルの基本的な概念を理解することが必要なので、実際にリスト1のコマンドでプロジェクトを作成し、内容を説明していきます。

リスト1 プロジェクトの作成コマンド
$cordova create app com.coltware.cdv.SampleApp14 SampleApp14

 作成されるファイルは、構造的には図1のようになっています。

図1 confix.xmlの記述構造
図1 confix.xmlの記述構造

 また、内容はリスト2のようになっています。

リスト2 作成されるconfig.xmlの内容の抜粋
<?xml version='1.0' encoding='utf-8'?>
<widget
    id="com.coltware.cdv.SampleApp14"
    version="1.0.0"
    xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>SampleApp14</name>
    // : 省略
    <platform name="android">
        // : (省略)
    </platform>
    <platform name="ios">
        // : (省略)
    </platform>
</widget>

 プロジェクト情報としてデフォルトで設定されている主な項目は表1の通りです。

表1 基本的な設定値
要素@属性名 備考
widget@id パッケージ名
widget@version バージョン番号
widget/name アプリ名(ただし、iOSの場合はフォルダ名も使われる)
widget/platform プラットフォームごとの各設定(name属性でターゲットOSを指定)

 これ以外にもauthorやdescriptionなどの要素があり、プロジェクトの内容を任意に記述できます。詳細な情報はリファレンス(日本語版)を参照すれば理解できると思います。ただし、英語版のほうが詳細に説明されているため、こちらも併せて参照すると良いでしょう。

 ただ、通常のHTML5部分だけで開発している場合は、デフォルトから変更する必要性をあまり感じないかもしれません。ネイティブ部分での変更は、プラグインを経由しているケースがほとんどなので、各プラグイン側で必要な設定は通常、自動的に制御されています。今回はそれ以外でのリリースを想定して、よく利用する要素や属性などの変更方法を、実際の利用シーンに合わせて紹介します。

プロジェクトの設定ファイルをより自由に扱えるプラグインを使う

 残念ながら、標準の設定方法ではどうしても各プラットフォーム側の設定を変更できない場合があります。その場合、それぞれのIDE(Android StudioやXCode等)を使って変更しなくてはいけません。しかし、それぞれのIDEを利用すると、Cordovaの「IDEの使い方を知らなくてもビルドできるというメリット」が薄れてしまいます。

 Cordovaを用いた開発の特徴を活かすのであれば、ネイティブプロジェクトを構成するファイルを直接変更したり、追加したりできるほうが良いはずです。ここでは、そのためのプラグインを紹介します。

プラグインのインストール

 インストールするプラグインは、「cordova-custom-config」です。インストールはリスト2のように行います。

リスト2 プラグインのインストール
$cordova plugin add cordova-custom-config --fetch --save

 インストールが終了したら、リスト3のようにconfig.xmlを変更します。それぞれの設定方法は後述しますが、andoridの設定をする際にXMLとして問題がないようにするために、必ずリスト3のような設定の追加が必要になります。

リスト3 config.xmlの設定例
<widget id="com.coltware.cdv.SampleApp14" version="1.0.0"
    xmlns:android="http://schemas.android.com/apk/res/android"  <!-- 追加する -->
    >

 ここまでの準備が終わると利用可能となります。複雑ですが、非常にパワフルなプラグインです。ここからは、事例ごとに設定方法を紹介します。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2017年5月時点での登録メンバは52名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:Apache Cordovaで本格スマホアプリに挑戦しよう

もっと読む

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5