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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Cordova

Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Android Studio

Android Studioは、 Google社によって開発された、 Androidのネイティブアプリケーション開発に特化した統合開発ツールです。

Q&A

1回答

4308閲覧

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

kuronecocafe

総合スコア8

Cordova

Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Android Studio

Android Studioは、 Google社によって開発された、 Androidのネイティブアプリケーション開発に特化した統合開発ツールです。

0グッド

0クリップ

投稿2015/09/06 13:04

編集2015/09/21 12:54

【開発環境】
・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

HTML

1<!DOCTYPE html> 2 3<html> 4 <head> 5 <meta charset="utf-8" /> 6 <meta name="format-detection" content="telephone=no" /> 7 <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" /> 8 9 <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css" /> 10 <link rel="stylesheet" type="text/css" href="css/index.css" /> 11 12 <script src="cordova.js"></script> 13 <script src="js/easeljs-0.8.1.min.js"></script> 14 <script src="js/jquery-2.1.4.min.js"></script> 15 <script src="js/jquery.mobile-1.4.5.min.js"></script> 16 17 <script src="js/getPicture0.js"></script> 18 <script src="js/getPicture1.js"></script> 19 20 <title>写真メモアプリ</title> 21 </head> 22 23 <body> 24 25 <div data-role="page"> 26 27 <div data-role="header">写真メモアプリ</div> 28 29 <div data-role="content"> 30 31<!-- ①・② 画像取得とアプリ内ディレクトリへの保存 --> 32 <div data-role="controlgroup" data-type="horizontal"> 33 <button id="camera">camera</button> 34 <button id="photoAlbum">album</button> 35 </div> 36 37 </div> 38 39 <!-- ③ 取得した画像にコメント等を入力する画面 40 <div class="textInput"> 41 <!-- 入力エリア部分 42 <dl class="table"> 43 <dt>タイトル</dt> 44 <dd><input type="text" name="txt01" id="txt01" placeholder="メモのタイトル" /></dd> 45 <dt>メモ日</dt> 46 <dd><input type="text" name="txt02" id="txt02" placeholder="○月○日" /></dd> 47 <dt>時間</dt> 48 <dd><input type="text" name="txt03" id="txt03" placeholder="○時○分" /></dd> 49 <dt>備考</dt> 50 <dd><input type="text" name="txt04" id="txt04" placeholder="" /></dd> 51 </dl> 52 <div class="btn"> 53 <button id="update">写真メモ作成</button> 54 </div> 55--> 56 57<!-- ④ ①と②の合成処理 ⇨ 完成イメージを表示 58 ⇨ 保存・再編集・キャンセル等の確認ダイアログ 59 60 <div id="my-canvas"> 61 <h2>結果</h2> 62 <!-- width,heightは必須 63 <canvas id="result" width="50%" height="50%"></canvas> 64 </div> 65 66 <div class="buttons"> 67 <div class="mybutton" ontouchend="saveImage()">save</div> 68 <div class="mybutton" ontouchend="loadImage()">load</div> 69 <div class="mybutton" ontouchend="clearImage()">clear</div> 70 </div> 71--> 72 </div> 73 74<!-- 以下、⑤・⑥のコードについては後ほど作成 --> 75 </body> 76 77 78</html> 79

⑵ getPicture0.js

javascript

1// アルバムから画像を取得⇨アプリのディレクトリへ保存 2$(function() { 3 4 var win = function () { 5 alert('ok'); 6 }; 7 8 var fail = function (error) { 9 alert('error!' + error.code + '\n' + error.source + '\n' + error.target); 10 }; 11 12 $('#photoAlbum').on('click', function() { 13 14 // カメラのチェク 15 if (!navigator.camera) { 16 alert("Camera API not supported", "Error"); 17 return; 18 } 19 20 // カメラ起動時のオプション 21 var options = { 22 quality: 50, 23 destinationType: Camera.DestinationType.DATA_URI, 24 sourceType: 0, // 0:Photo Library, 1=Camera, 2=Saved Album 25 encodingType: 0, // 0=JPG 1=PNG 26 correctOrientation: true, 27 saveToPhotoAlbum: true 28 }; 29 30 // フォトライブラリーを起動 31 navigator.camera.getPicture( 32 function(fileURL) { 33 var ft0 = new FileTransfer0(); 34 ft0.upload(fileURL, encodeURI("php/upload0.php"), win, fail); 35 }, 36 function() { 37 alert('Error taking picture', 'Error'); 38 }, 39 options 40 ); 41 42 }); 43 });

⑶ getPicture1.js

javascript

1// カメラで撮影して画像を取得⇨アプリのディレクトリへ保存 2$(function() { 3 4 var win = function () { 5 alert('ok'); 6 }; 7 8 var fail = function (error) { 9 alert('error!' + error.code + '\n' + error.source + '\n' + error.target); 10 }; 11 12 13 $('#camera').on('click', function() { 14 15 // カメラのチェク 16 if (!navigator.camera) { 17 alert("Camera API not supported", "Error"); 18 return; 19 } 20 21 // カメラ起動時のオプション 22 var options = { 23 quality: 50, 24 destinationType: Camera.DestinationType.DATA_URI, 25 sourceType: 1, // 0:Photo Library, 1=Camera, 2=Saved Album 26 encodingType: 0, // 0=JPG 1=PNG 27 correctOrientation: true, 28 saveToPhotoAlbum: true 29 }; 30 31 // カメラを起動 32 navigator.camera.getPicture( 33 function(fileURL) { 34 var ft1 = new FileTransfer1(); 35 ft1.upload(fileURL, encodeURI("php/upload1.php"), win, fail); 36 }, 37 function() { 38 alert('Error taking picture', 'Error'); 39 }, 40 options 41 ); 42 43 }); 44 45 46 });

⑷ upload0.php

PHP

1<?php 2$uploads_dir = '/img'; 3if (is_uploaded_file($_FILES["acceptImage"]["tmp_name"])) { 4 if (move_uploaded_file($_FILES["acceptImage"]["tmp_name"], 'test.png')) { 5 echo "アップロードしました。<br>"; 6 echo $_FILES["acceptImage"]["tmp_name"]; 7 } else { 8 echo "ファイルをアップロードできません。"; 9 } 10} else { 11 echo "ファイルが選択されていません。"; 12} 13?>

⑷ upload1.php

PHP

1<?php 2$uploads_dir = '/img'; 3if (is_uploaded_file($_FILES["acceptImage"]["tmp_name"])) { 4 if (move_uploaded_file($_FILES["acceptImage"]["tmp_name"], 'test.png')) { 5 echo "アップロードしました。<br>"; 6 echo $_FILES["acceptImage"]["tmp_name"]; 7 } else { 8 echo "ファイルをアップロードできません。"; 9 } 10} else { 11 echo "ファイルが選択されていません。"; 12} 13?>

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

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

cordovaについては知識が無いので、Androidネイティブ側の立場からコメントします。

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

Androidは端末によっては端末所有者であってもアプリ固有のフォルダ(data/パッケージ名以下)を参照できない場合があります。
アクセス日時が正しい場合ということなので、下記を試してみてはいかがでしょうか。
・DDMSから見てはいかがでしょうか。
・撮影成功処理の中でアプリ内に画像を表示する処理を追加してみてはいかがでしょうか。

▼ 撮影した画像が、Asus Memo Pad7の写真アルバム内にも残っていない。

AndroidでGarallyにはContentResolverという機構を使ってデータベースに登録された写真しか表示されません。この辺をcordovaは解決しているのでしょうか。

投稿2015/10/09 17:21

yona

総合スコア18155

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kuronecocafe

2015/10/25 13:59

回答ありがとうございます。 返信が遅くなり、誠に申し訳ございません。 早速、上記内容を試してみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問