質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.94%

cordovaでAndroidアプリ:撮影した写真をアプリ内のディレクトリに保存させたい

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,291

score 8

【開発環境】
・Mac OSX 10.10.5
・Android Studio 1.3.1
・cordova 4.2.0
     - Plugin     Camera , File , File-transfer
・Asus Memo Pad7 (Android 4.42) …実機テスト用

【作成中のアプリについて】
▼ カメラで撮影または写真アルバムから取得した画像に日付やコメントなどを書き込み、画像メモとしてアプリ内に保存する、「写真メモアプリ」を作成中です。

【完成イメージ】
▼ ①a アプリの画面の撮影ボタン
       ⇨ Cordovaでカメラ起動 ⇨ 撮影
  ①b アプリ画面の写真アルバムボタン
       ⇨ アルバム内の写真選択

  ②*** 画像データをアプリ内ディレクトリに一時保存 ***
     ↑↑↑ 質問はこの部分です ↑↑↑

  ③ 取得した画像にコメント等を入力する画面
     ⇨日時は自動入力
     ⇨メモ入力フォームにコメントを入力
     ⇨撮影場所は自動取得 … Mapアプリと連携

  ④ ①と②の合成処理 ⇨ 完成イメージを表示
             ⇨ 保存・再編集・キャンセル等の確認ダイアログ

  ⑤ 写真メモを保存

  ⑥ 写真メモ一覧からの表示機能
    ⇨ 写真メモ再編集
    ⇨ 削除 等

【参考にしたサイト等】
PHPで画像アップロード
javascriptで画像アップロード
javascriptからphpを呼び出す方法
createjseaseljsによるコラ画像ジェネレータをあっという間

【現在の挙動】
▼ カメラで撮影後、保存できたかどうか Asus Memo Pad7 の「内部ストレージ」アプリで確認したところ、アクセス日時は表示されるが、アプリのディレクトリが生成しておらず、画像も見つからない。
▼ 撮影した画像が、Asus Memo Pad7の写真アルバム内にも残っていない。
▼ PHPでエラーメッセージが表示されないが、アプリのディレクトリおよび画像保存はなされていない。

【この質問をご覧になった方々へ】
この度は、私の質問をご覧いただき、ありがとうございます。
静的Webサイトは構築することはできますが、さらなる技量向上を求めてAndroidアプリ作成を勉強中です。
現在作成中のコードの変数処理がおかしいのか、それとも、プログラムの完成イメージそのものが間違っているのか、わからない状態です。
私が参考にしたサイト等の「行間」の意味をお教えいただければ、と思います。
至らぬ点が多いですが、どうぞよろしくお願い致します。

[↓2015.09.21追加↓]
少々難しい感じでしょうか?

【作成したコード】
⑴ HTML
<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

        <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />

        <script src="cordova.js"></script>
        <script src="js/easeljs-0.8.1.min.js"></script>
        <script src="js/jquery-2.1.4.min.js"></script>
        <script src="js/jquery.mobile-1.4.5.min.js"></script>

           <script src="js/getPicture0.js"></script>
           <script src="js/getPicture1.js"></script>

                <title>写真メモアプリ</title>
            </head>

            <body>

                <div data-role="page">

                    <div data-role="header">写真メモアプリ</div>

                    <div data-role="content">

<!-- ①・② 画像取得とアプリ内ディレクトリへの保存 -->
                        <div data-role="controlgroup" data-type="horizontal">
                            <button id="camera">camera</button>
                            <button id="photoAlbum">album</button>
                        </div>

                    </div>

 <!-- ③ 取得した画像にコメント等を入力する画面
                   <div class="textInput">
                        <!-- 入力エリア部分
                <dl class="table">
                    <dt>タイトル</dt>
                    <dd><input type="text" name="txt01" id="txt01" placeholder="メモのタイトル" /></dd>
                    <dt>メモ日</dt>
                    <dd><input type="text" name="txt02" id="txt02" placeholder="○月○日" /></dd>
                    <dt>時間</dt>
                    <dd><input type="text" name="txt03" id="txt03" placeholder="○時○分" /></dd>
                    <dt>備考</dt>
                    <dd><input type="text" name="txt04" id="txt04" placeholder="" /></dd>
                </dl>
                <div class="btn">
                    <button id="update">写真メモ作成</button>
                </div>
-->

<!-- ④ ①と②の合成処理 ⇨ 完成イメージを表示
             ⇨ 保存・再編集・キャンセル等の確認ダイアログ

                <div id="my-canvas">
                    <h2>結果</h2>
                    <!-- width,heightは必須
                    <canvas id="result" width="50%" height="50%"></canvas>
                </div>

                <div class="buttons">
                    <div class="mybutton" ontouchend="saveImage()">save</div>
                    <div class="mybutton" ontouchend="loadImage()">load</div>
                    <div class="mybutton" ontouchend="clearImage()">clear</div>
                </div>
-->
        </div>

<!-- 以下、⑤・⑥のコードについては後ほど作成 -->
            </body>


</html>

⑵ getPicture0.js
// アルバムから画像を取得⇨アプリのディレクトリへ保存
$(function() {

     var win = function () {
         alert('ok');
     };

     var fail = function (error) {
         alert('error!' + error.code + '\n' + error.source + '\n' + error.target);
     };

     $('#photoAlbum').on('click', function() {

              // カメラのチェク
              if (!navigator.camera) {
                  alert("Camera API not supported", "Error");
                  return;
              }

              // カメラ起動時のオプション
              var options = {
                  quality: 50,
                  destinationType: Camera.DestinationType.DATA_URI,
                  sourceType: 0,     // 0:Photo Library, 1=Camera, 2=Saved Album
                  encodingType: 0,     // 0=JPG 1=PNG
                  correctOrientation: true,
                  saveToPhotoAlbum: true
              };

              // フォトライブラリーを起動
              navigator.camera.getPicture(
                  function(fileURL) {
                      var ft0 = new FileTransfer0();
                      ft0.upload(fileURL, encodeURI("php/upload0.php"), win, fail);
                  },
                  function() {
                      alert('Error taking picture', 'Error');
                  },
                  options
              );

          });
 });

⑶ getPicture1.js
// カメラで撮影して画像を取得⇨アプリのディレクトリへ保存
$(function() {

     var win = function () {
         alert('ok');
     };

     var fail = function (error) {
         alert('error!' + error.code + '\n' + error.source + '\n' + error.target);
     };


     $('#camera').on('click', function() {

         // カメラのチェク
         if (!navigator.camera) {
             alert("Camera API not supported", "Error");
             return;
         }

         // カメラ起動時のオプション
         var options = {
             quality: 50,
             destinationType: Camera.DestinationType.DATA_URI,
             sourceType: 1,     // 0:Photo Library, 1=Camera, 2=Saved Album
             encodingType: 0,     // 0=JPG 1=PNG
             correctOrientation: true,
             saveToPhotoAlbum: true
         };

         // カメラを起動
         navigator.camera.getPicture(
             function(fileURL) {
                 var ft1 = new FileTransfer1();
                 ft1.upload(fileURL, encodeURI("php/upload1.php"), win, fail);
             },
             function() {
                 alert('Error taking picture', 'Error');
             },
             options
         );

     });


 });

⑷ upload0.php
<?php
$uploads_dir = '/img';
if (is_uploaded_file($_FILES["acceptImage"]["tmp_name"])) {
  if (move_uploaded_file($_FILES["acceptImage"]["tmp_name"], 'test.png')) {
    echo "アップロードしました。<br>";
    echo $_FILES["acceptImage"]["tmp_name"];
  } else {
    echo "ファイルをアップロードできません。";
  }
} else {
  echo "ファイルが選択されていません。";
}
?>

⑷ upload1.php
<?php
$uploads_dir = '/img';
if (is_uploaded_file($_FILES["acceptImage"]["tmp_name"])) {
  if (move_uploaded_file($_FILES["acceptImage"]["tmp_name"], 'test.png')) {
    echo "アップロードしました。<br>";
    echo $_FILES["acceptImage"]["tmp_name"];
  } else {
    echo "ファイルをアップロードできません。";
  }
} else {
  echo "ファイルが選択されていません。";
}
?>

⑸ ③の「取得した画像内にコメント等を入力する」javascriptコード等はこの質問をご覧になった皆様に必要があれば記述します。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

cordovaについては知識が無いので、Androidネイティブ側の立場からコメントします。
▼ カメラで撮影後、保存できたかどうか Asus Memo Pad7 の「内部ストレージ」アプリで確認したところ、アクセス日時は表示されるが、アプリのディレクトリが生成しておらず、画像も見つからない。 
▼ PHPでエラーメッセージが表示されないが、アプリのディレクトリおよび画像保存はなされていない。 
Androidは端末によっては端末所有者であってもアプリ固有のフォルダ(data/パッケージ名以下)を参照できない場合があります。
アクセス日時が正しい場合ということなので、下記を試してみてはいかがでしょうか。
・DDMSから見てはいかがでしょうか。
・撮影成功処理の中でアプリ内に画像を表示する処理を追加してみてはいかがでしょうか。

▼ 撮影した画像が、Asus Memo Pad7の写真アルバム内にも残っていない。 
AndroidでGarallyにはContentResolverという機構を使ってデータベースに登録された写真しか表示されません。この辺をcordovaは解決しているのでしょうか。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/10/25 22:59

    回答ありがとうございます。
    返信が遅くなり、誠に申し訳ございません。

    早速、上記内容を試してみます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.94%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る