Monaca リモートフォルダ機能で快適プロジェクト管理

初めまして、中川です。

Monaca チームでは、主に iOS に関する開発を担当しています。どうぞよろしくお願いします。

今回は Monaca IDE が持つリモートフォルダ機能について紹介します。リモートフォルダ機能とは、離れたコンピュータにあるファイルにアクセスする機能です。

Monaca IDE が提供するリモートフォルダ機能を使うと、Monaca プロジェクトがあたかも手元のコンピュータ上にあるようにアクセスすることができます。これにより、HTML や JS ファイルを使い慣れたエディタで編集したり、アプリで使う画像を簡単に追加したりできるのです。

Monaca では、リモートフォルダとして WebDAV プロトコルによるアクセスに対応しています。WebDAV はインターネットで広く用いられている HTTP をベースとしたプロトコルで、Monaca では SSL 暗号化を行い、通信が解読されないようセキュリティに配慮した設計になっています。

詳しくは Monaca ドキュメントを参照してください。

Monaca ドキュメント: リモートフォルダ (WebDAV) を利用する

ドキュメントでは DreamWeaver を使ったアクセス方法を紹介しているので、ここでは Windows 用のフリーな WebDAV クライアントを使った方法と、Mac OSX の標準機能を使った方法を紹介します。

Windows は標準で WebDAV クライアント機能を持っていますが、私の環境 (Windows Vista 32bit SP2) では WebDAV 認証がうまく動かなかったため、フリーの WebDAV クライアント CarotDAV を使った方法を紹介します。

まず、ファイルアクセスしたいプロジェクトで Monaca IDE を開き、左下に表示された WebDAV のアドレスをコピーしておきます。

次に、CarotDAV をダウンロードします。

CarotDAV: http://www.rei.to/carotdav.html

ダウンロードしたファイルをダブルクリックし、インストーラの指示に従ってインストールを進めてください。インストール完了後，起動すると次のような画面が表示されます。Add ボタンをクリックし，WebDAV を選択します。

接続設定の編集画面が表示されます。General タブを選択し、

• Setting Name: お好きな名前

• URI: 先程コピーした WebDAV のアドレス

• Username: Monaca に登録したメールアドレス

• Password: Monaca に登録したパスワード

を入力して OK を押します。

接続情報が追加されました。Connect ボタンを押します。

ファイル一覧が表示されて、プロジェクトファイルにアクセスすることができました。ファイルを編集したり、画像を追加したりすることができます。

編集内容が IDE に反映されていない場合は、更新ボタンを押してください。

以上です。

Mac OSX でも標準で WebDAV クライアントが含まれています。まず、ファイルアクセスしたいプロジェクトで Monaca IDE を開き、左下に表示された WebDAV のアドレスをコピーしておきます。

次にデスクトップのメニューから「移動」，「サーバへ接続」を選択します。

先ほどコピーしたアドレスをサーバアドレスの欄に入力し、接続を押します。

ユーザの種類は「登録ユーザ」を選択し、Monaca に登録したメールアドレスとパスワードを入力して、接続を押します。

Finder が表示されて、プロジェクトファイルにアクセスすることができます。ファイルを編集したり、画像を追加したりできます。

編集内容が IDE に反映されていない場合は、更新ボタンを押してください。

以上です。

Windows と Mac OSX で、プロジェクトファイルに WevDAV アクセスする方法を紹介しました。これにより、Monaca IDE 上の HTML や JS ファイルを使い慣れたエディタで編集したり、アプリで使う画像を簡単に追加したりできます。

Monaca で快適なスマフォアプリ開発をお楽しみください！