applican/アプリカン

Tutorialチュートリアル

Cursorでアプリ開発を効率化する方法

アプリ開発を効率化するために、アプリカンではAIコードエディタのCursor用の設定ファイル（MDCファイル）の無料提供を開始しました。
専用のGitHubからファイルを取得し、Cursorに設定して頂くことで、Cursorがアプリカンに最適化されたコードを自動生成できるようになります。詳しくは下記の手順を参照してください。

1. はじめに
2. Applicanでカーソルを使うための準備
3. プロジェクトルールのカスタム設定（上級者向け）
4. アプリカンの開発環境の準備
5. Cursorでの開発手順（カメラアプリを例に）
6. アプリカンの動作に必要なポイント
7. よくある問題と解決方法
8. 参考資料

1. はじめに

Cursorとは

Cursorは、AIを活用したコードエディタで、最新AIモデルを使用できます。

主な機能として、以下4点が挙げられます。

機能	説明
AIによるコード生成	自然言語での指示でコードを自動生成
コンテキスト理解	プロジェクト全体を理解した上での提案
リアルタイム補完	タイピング中にAIが次のコードを予測

Cursorを使用することでアプリカンの開発をAIがサポートしてくれます。

2. Applicanでカーソルを使うための準備

前提条件

1. Cursorのインストール

Cursorの公式サイト（https://cursor.sh/）から
お使いのOSに対応したバージョンをダウンロードしてインストールしてください。

2. AIモデルの設定

アプリカンの開発ではCursorの設定で使用するAIモデルをClaude 4 Sonnet以上を推奨します。
モデルの設定は
Settings > Models から選択できます。

3. MDCファイルのダウンロードと設定

アプリカン開発用のMDC（Model Documentation Context）ファイルを
GitHubリポジトリからダウンロードし、Cursorのプロジェクトルールで設定してください。

mdcファイルのダウンロードはこちら

ダウンロード手順

1. GitHubのアプリカンMDCリポジトリにアクセス
2. 「Code」ボタンから「Download ZIP」を選択
3. ダウンロードしたZIPファイルを解凍
4. プロジェクトのルートに.cursor/rules/フォルダを作成
5. 解凍したMDCファイルを.cursor/rules/フォルダにコピー

MDCファイルには、各APIの使用方法やサンプルコードが含まれており、
Cursorがこれを参照してアプリカンに最適化されたコードを生成します。

MDCファイルが設定されていると、以下のようになります

注意：MDCファイルを増やしすぎるとCursorの応答が遅くなります。
重いと感じたら、実際に使用する機能のMDCファイルのみを有効化（alwaysApply: true）してください。

3. プロジェクトルールのカスタム設定（上級者向け）

基本的には.cursor/rules/にあるMDCファイルをそのまま使用できますが、
プロジェクト固有のルールを追加したい場合は、新しいMDCファイルを作成できます。

プロジェクト専用MDCの作成例

例えば、カメラアプリ専用のルールを作成する場合

---
alwaysApply: true
---
# カメラアプリプロジェクト専用ルール

## プロジェクト概要
写真撮影とアルバム保存機能を持つアプリ

## 使用するアプリカンAPI
- Camera API（撮影・アルバム保存）
- Device API（端末情報取得）
- SimpleStorage API（撮影履歴保存）

## プロジェクト固有ルール
1. 画面は縦向き固定（applican-config.xmlで設定）
2. ステータスバーは表示
3. 撮影画像はBASE64形式で取得
4. エラーメッセージは必ず日本語で表示
5. ボタンは大きく、押しやすいデザインにする

## 禁止事項
- alert()の多用を避ける（画面上のメッセージ表示を使用）
- localStorageではなくapplican.simpleStorageを使用
- jQueryやフレームワークは使用しない（バニラJSのみ）

## コーディング規約
- 関数名は日本語コメント付きで説明
- devicereadyイベント内でAPI呼び出し必須
- エラーハンドリングは必ず実装

## 参考にするMDCファイル
このプロジェクトでは以下のMDCファイルを参照
- .cursor/rules/camera.mdc
- .cursor/rules/device.mdc
- .cursor/rules/simplestorage.mdc

このファイルを.cursor/rules/project.mdcとして保存します。

MDCファイルのカスタマイズポイント

カスタマイズ項目	設定内容の例
使用するAPI	このプロジェクトで使用するアプリカンAPIを明記例：Camera、Device、Barcode、GeoLocation
画面設定	画面向き（縦固定/横固定/自動）ステータスバー表示/非表示
デザインルール	ボタンサイズ、配色、レイアウト指針例：「ボタンは最低44px×44px」
禁止事項	使用してはいけない機能やライブラリ例：「jQuery禁止」「alert禁止」
エラー処理方針	エラー時の表示方法例：「画面下部に3秒間メッセージ表示」

設定の確認方法

・ファイルを保存後、Cursorを再起動
・AIチャットで「このプロジェクトのルールを教えてください」と質問
・設定した内容が認識されているか確認
・実際にコード生成を依頼して、ルール通りに生成されるか確認

4. アプリカンの開発環境の準備

1. アプリカンライブラリのダウンロードと配置

プロジェクトルートに .cursor/utilities/ ディレクトリを作成し、
アプリカン開発に必要なファイルを配置します。

ライブラリダウンロードはこちら

必要なファイル

ファイル名	説明
applican.js	アプリカンSDK
applican-config.xml	アプリカン設定ファイル（ステータスバー表示など）
whitelist.xml	アクセス許可設定ファイル（外部URLへのアクセス制御）

詳しい内容はライブラリのダウンロードページに記載されています。

2. サンプルファイルの配置（推奨）

参考にしたいサンプルコードを.cursor/examples/ ディレクトリに配置すると、
AIがサンプルを参照しながら、より適切なコードを生成できます。

サンプルはそれぞれのAPIリファレンス詳細ページにあります。

リファレンスはこちら

5. Cursorでの開発手順（カメラアプリを例に）

ここでは、カメラ機能を使ったアプリを例に、Cursorでの実際の開発手順を説明します。
他のアプリカンAPIを使用する場合も、基本的な流れは同じです。

ステップ1：プロジェクトフォルダを開く

Cursorで開発用のプロジェクトフォルダを開きます。
File > Open Folder から選択してください。

ステップ2：AIチャットでアプリ作成を依頼

Cmd+L（Mac）またはCtrl+L（Windows）でAIチャットパネルを開き、
作りたいアプリをCursorに依頼します。

カメラアプリの場合の詳細プロンプト例

アプリカンのカメラAPIを使用した写真撮影アプリを作成してください。

要件：
1. カメラ撮影ボタンを配置
2. 撮影した写真をプレビュー表示
3. 撮影した写真をアルバムに保存するボタンを追加
4. エラー処理を実装
5. iOS/Android両対応
6. シンプルで使いやすいUI

必ず以下を含めてください：
- devicereadyイベントの実装
- applican.camera.getPictureの使用
- Base64形式での画像取得
- エラーハンドリング

webフォルダ内にファイルを生成して、最後にweb.zipを作成してください。

その他のAPI使用例（参考）

・「アプリカンのDevice APIとSimpleStorage APIを使って、端末情報を取得してストレージに保存し、画面に表示するアプリを作成してください」
・「アプリカンのBarcode APIを使用してQRコードを読み取り、読み取った内容を表示するアプリを作成してください」
・「アプリカンのGeoLocation APIで現在地を取得し、地図上にマーカーを表示するアプリを作成してください」

※上記スクリーンショットはあくまで一例です

ステップ3：生成されたファイルの確認

Cursorが以下のようなファイル構造でアプリを生成します

web/
├── index.html              # メインHTMLファイル
├── css/
│   └── style.css           # スタイルシート
├── js/
│   ├── applican.js         # アプリカンSDK（必須）
│   └── main.js             # アプリのメインロジック
├── img/                    # 画像ファイル（必要に応じて）
├── applican-config.xml     # アプリ設定ファイル
└── whitelist.xml           # アクセス許可設定

ステップ4：生成されたコードの確認

Cursorが生成したコードの例を確認します。実際の生成内容は依頼内容により異なります。

index.html の例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>カメラアプリ</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="app">
        <h1>カメラアプリ</h1>
        <div id="preview-area">
            <img id="preview" src="" alt="プレビュー">
        </div>
        <div class="button-group">
            <button id="cameraBtn">写真を撮る</button>
            <button id="saveBtn">アルバムに保存</button>
        </div>
        <div id="message"></div>
    </div>
    
    <script src="js/applican.js"></script>
    <script src="js/main.js"></script>
</body>
</html>

main.js の例（重要なポイント）

// devicereadyイベントの実装（必須）
document.addEventListener('deviceready', function() {
    console.log('アプリカンSDK初期化完了');
    
    // イベントリスナーの設定
    document.getElementById('cameraBtn').addEventListener('touchend', takePicture, false);
}, false);

// カメラ撮影
function takePicture() {
    var options = {
        quality: 70,
        destinationType: applican.camera.DestinationType.DATA_URL,
        sourceType: applican.camera.PictureSourceType.CAMERA,
        encodingType: applican.camera.EncodingType.JPEG,
        targetWidth: 600,
        targetHeight: 600,
        correctOrientation: true
    };
    
    applican.camera.getPicture(
        function(imageData) {
            // 成功時の処理
            var preview = document.getElementById('preview');
            preview.src = 'data:image/jpeg;base64,' + imageData;
        },
        function(error) {
            // エラー時の処理
            alert('カメラの起動に失敗: ' + error);
        },
        options
    );
}

コード確認のポイント

確認項目	内容
devicereadyイベント	API使用前に必ず待機している
イベントリスナー	touchendイベントを使用（モバイル最適化）
エラーハンドリング	成功/失敗時の処理が実装されている
画像形式	BASE64形式での取得を使用

ステップ5：コードのカスタマイズ

生成されたコードを確認し、必要に応じてCursorに修正を依頼します

機能追加の例

・「撮影前にカメラ権限のチェック機能を追加してください（requestPermission使用）」
・「画像の品質を選択できるスライダーを追加してください」
・「ライブラリから画像を選択する機能も追加してください」
・「撮影した画像の一覧を表示する機能を追加してください」

UI/UX改善の例

・「ボタンのデザインをもっと大きく、押しやすくしてください」
・「プレビュー画像を画面幅いっぱいに表示してください」
・「撮影ボタンをタップしたら、ボタンを無効化して二重起動を防止してください」
・「撮影した画像が表示される際にフェードインアニメーションを追加してください」
・「エラー時にアラートではなく、画面上にメッセージを表示するように変更してください」

ステップ6：web.zipの作成

Cursorに「webフォルダの中身をweb.zipにしてください」と依頼すると、
自動的にZIPファイルが作成されます。

重要： webフォルダ自体ではなく、webフォルダ「内」のファイルがZIP化されている必要があります。

ステップ7：アプリカン管理画面でアップロード

作成したweb.zipをアプリカンの管理画面にアップロードします。

管理画面の使い方はこちらを参照ください

ステップ8：パーミッション設定（重要）

カメラなどのデバイス機能を使用する場合、管理画面でパーミッション設定が必須です。

カメラAPIを使用する場合の設定例は以下を参照下さい

ステップ9：動作確認

アプリカンシミュレーターまたは実機でテストします。

エラーが発生した場合は、以下を確認してください。

・devicereadyイベントが正しく設定されているか
・パーミッション設定が有効になっているか
・applican.jsが正しく読み込まれているか
・ブラウザのコンソールでエラーメッセージを確認

6. アプリカンの動作に必要なポイント

1. devicereadyイベントの必須使用

アプリカンAPIは必ずdevicereadyイベント後に呼び出してください。
これはアプリカンSDKの初期化完了を待つために必須です。

// 正しい使用方法
document.addEventListener('deviceready', function() {
    // ここでアプリカンAPIを使用
    applican.device.getInfo(function(info) {
        console.log('Device Info:', info);
    });
}, false);

// 誤った使用方法（動作しません）
applican.device.getInfo(function(info) {
    // devicereadyイベント前の呼び出しはエラーになります
});

2. applican-config.xmlの設定

アプリの動作設定をapplican-config.xmlで行います。
主要な設定項目

<?xml version="1.0" encoding="UTF-8"?>
<applican-configuration>
    <!-- WebViewのバウンス効果（iOS） -->
    <property name="WEBVIEW_BOUNCES">true</property>
    
    <!-- ステータスバー表示 -->
    <property name="STATUS_BAR">true</property>
    
    <!-- ナビゲーションバー表示 -->
    <property name="NAVIGATION_BAR">true</property>
    
    <!-- 画面向き設定 -->
    <property name="SCREEN_ORIENTATION_LANDSCAPE">true</property>
    <property name="SCREEN_ORIENTATION_PORTRAIT">true</property>
</applican-configuration>

3. whitelist.xmlの設定

外部URLへのアクセス制御をwhitelist.xmlで設定します。
セキュリティのため、必要最小限のアクセス許可を設定してください。

<?xml version="1.0" encoding="UTF-8"?>
<whitelist>
    <!-- HTTP/HTTPS通信の許可 -->
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    
    <!-- ナビゲーションの許可 -->
    <allow-navigation href="http://*/*" />
    <allow-navigation href="https://*/*" />
    
    <!-- 外部リソースへのアクセス -->
    <access origin="*" />
</whitelist>

4. パーミッション設定

アプリカンAPIを使用してデバイス機能にアクセスする場合、
必ずアプリカン管理画面の「パーミッション設定」で適切な権限を有効化する必要があります。

パーミッションが正しく設定されていない場合、以下のような問題が発生します

・APIが正常に動作せず、エラーが発生する
・アプリがクラッシュする可能性がある
・ユーザーにエラーメッセージが表示される

設定方法

1. アプリカン管理画面にログイン
2. 対象のアプリを選択
3. 「パーミッション設定」メニューを開く
4. 使用する機能に応じて必要な権限を「有効」に設定
5. 変更を保存してアプリをビルド

重要：使用するAPIに対応するパーミッションが設定されていないと、
そのAPIは動作しません。必ず事前に設定を確認してください。

5. エラーハンドリングの実装

すべてのアプリカンAPI呼び出しにエラーハンドリングを実装してください。
ユーザーに適切なフィードバックを提供することが重要です。

// 良い例
applican.camera.getPicture(
    function(imageData) {
        // 成功時の処理
        displayImage(imageData);
    },
    function(error) {
        // エラー時の処理
        alert('カメラの起動に失敗しました: ' + error);
    },
    options
);

7. よくある問題と解決方法

問題1：「applican is not defined」エラーが出る

原因：applican.jsが読み込まれる前にAPIを呼び出している

解決方法

・devicereadyイベント内でAPIを呼び出しているか確認
・HTMLで<script src="js/applican.js"></script>が他のJSより先に読み込まれているか確認
・applican.jsファイルが正しくwebフォルダ内に配置されているか確認

// ✕ 間違った例
applican.device.getInfo(function(info) {
    console.log(info);
});

// ○ 正しい例
document.addEventListener('deviceready', function() {
    applican.device.getInfo(function(info) {
        console.log(info);
    });
}, false);

問題2：カメラが起動しない

原因：パーミッション設定が不足している

解決方法

・アプリカン管理画面でカメラのパーミッションを有効化

問題3：devicereadyイベントが発火しない（実機で動かない）

原因：ブラウザでテストしている、またはファイル構造が不正

解決方法

・アプリカンシミュレーターまたは実機でテストする（通常のブラウザでは動作しません）
・applican.jsが正しいバージョンか確認
・コンソールにエラーが出ていないか確認
・applican-config.xmlが正しく配置されているか確認

問題4：web.zipのアップロードエラー

原因：ZIPファイルの構造が正しくない

解決方法

・webフォルダ自体ではなく、webフォルダ「内」のファイルをZIP化する
・ZIPを解凍した時に、直下にindex.htmlが存在する構造にする
・applican-config.xmlとwhitelist.xmlが含まれているか確認
・ファイル名に日本語や特殊文字を使用しない

// ✕ 間違った構造
web.zip/
└── web/
    ├── index.html
    └── ...

// ○ 正しい構造
web.zip/
├── index.html
├── css/
├── js/
├── applican-config.xml
└── whitelist.xml

問題5：Cursorが期待通りのコードを生成しない

原因：プロンプトが不明確、またはMDCファイルが認識されていない

解決方法

・より具体的なプロンプトを作成する（「何をしたいか」「どのAPIを使うか」を明記）
・.cursor/rules/に必要なMDCファイルが配置されているか確認
・段階的に機能を追加する（一度に複雑な機能を依頼しない）
・生成されたコードにdevicereadyイベントが含まれているか確認
・「アプリカンのカメラAPIを使用して」のように、具体的なAPI名を指定

デバッグのコツ

アプリカンのデバッグ方法はこちらを参照ください

・console.log()を使って値を確認（デバッグビルドで確認可能）
・エラーコールバックに必ずalertやconsole.logを入れる
・一つずつ機能を追加して、どこで問題が発生しているか特定
・Cursorに「このエラーメッセージが出ています。修正してください」とエラー内容を伝える

8. 参考資料

アプリカン関連

Cursor関連

・Cursor公式サイト - エディタのダウンロード
・Cursor ドキュメント - 使い方ガイド

Cursorでアプリ開発を効率化する方法

目次

1. はじめに

2. Applicanでカーソルを使うための準備

3. プロジェクトルールのカスタム設定（上級者向け）

4. アプリカンの開発環境の準備

5. Cursorでの開発手順（カメラアプリを例に）

6. アプリカンの動作に必要なポイント

7. よくある問題と解決方法

8. 参考資料