常連

注目の的

社会貢献

かれこれ４時間ほど試行錯誤したが、全くわからず、困り果てています。

# やりたいこと
現在地を取得して、その値を検索のクエリに入れたいです。

```
  async getPosition() {
    // 現在地を取得
    const lonlat = await navigator.geolocation.getCurrentPosition(
      // 取得成功した場合
      function (position) {
        alert("緯度:" + position.coords.latitude + ",経度" + position.coords.longitude);
        const lon = position.coords.longitude
        const lat = position.coords.latitude
        const result = `lon=${lon}&lat=${lat}`
        console.log(result) // ここは正しく表示
        return result
      },
      // 取得失敗した場合
      function (error) {
        switch (error.code) {
          case 1: //PERMISSION_DENIED
            alert("位置情報の利用が許可されていません");
            break;
          case 2: //POSITION_UNAVAILABLE
            alert("現在位置が取得できませんでした");
            break;
          case 3: //TIMEOUT
            alert("タイムアウトになりました");
            break;
          default:
            alert("その他のエラー(エラーコード:" + error.code + ")");
            break;
        }
      }
    );
    return lonlat
  }


  async handleAreaChange(value) {
    this.setState({
      selected_area: value
    });

    let search_by = ""
    switch (value) {
      case "現在地":
        search_by = "location";
        console.log("現在地")
        break;
      case "駅名":
        search_by = "station";
        console.log("駅名")
        break;
      case "建物名":
        search_by = "name";
        console.log("建物名")
        break;
      default:
        break;
    }

    const search_query = await this.getPosition();
    console.log(search_query) // undefined になる

    fetch(`https://my-fucking-great-app/${search_by}?${search_query}`, {
      mode: 'cors',
      credentials: 'include',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      }
    })
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            data: result
          });
        },
        (error) => {
          this.setState({
            data: error
          });
        }
      )
  }
// いろんなとこにasync await 入れて試しまくったので、変な箇所があるかもしれません
```
自分の考えている挙動としては、`const search_query = await this.getPosition();`の箇所で、`search_query`が生成されるのを待ち、それが取得されたら、fetchが行われるというものです。

しかし、どうがんばっても`search_query`の値が`undefined`になってしまいます。まだまだ非同期処理周りの知識がなく、解決できません。

どなたか解決法をご教授いただければ幸いです。

Javascript の 同期処理が上手くできない。

*いわゆるアンケート系です。不快に思われる方はスルーして下さい。
*頂いた回答は、現在の私ではベストの判断ができないものが含まれる可能性が高いと思います。恐縮ですが、多分ベストアンサーはつけません。ご了承下さい。

プログラミングをしていて気がついたのですが、技術以外に考え方や心がけにより、大きくプログラミングの効率が上がったことがありました。

私の例で言うと、
**・自身の間違いを最初に疑う**
プログラミングを始めたころ、サンプルコードを学習元として使用していたのですが、エラーが出てもまずサンプルコード自体を疑い、自身の行った行動（DBの作成や、ちょっとしたカスタム、構築環境の違い）を疑う事を後回しにしていました。
が、ある時から、自身の行った行動こそ間違いを内包することを前提に切り分けを行うようにしたところ、開発効率がかなり上がりました。

プログラミングを長くされている方であれば、多分同じような「技術以外のポイント」による効率向上を感じたケースがあるのではないかと思い質問を立てました。

今レベルの私に参考にならないケースも多々あることを期待しています。
将来の私のために、経験された精神的ブレークスルーポイントをご紹介いただけないでしょうか？

よろしくお願いします。

追記
---
問題/課題が含まれていないとのご指摘を多く受けましたので、追記します。
現在、余り効率の良い開発ができておらず、その改善を模索しておりますが、改善には、技術学習以外にも精神的なトリガーがあることに気が付きました。
しかし、独学/一人作業を行っている背景があり、先輩からの学びや、職場環境による気付きが得にくい状況であるため、今回の質問をしております。
恵まれた環境にいる方から見ると、切実に感じられないかもしれませんが、結構真剣な質問です。

ご指摘くださった方の中にも、開発効率を上げるポイントとなった心がけがある方がいらっしゃるのではないかと思います。ぜひご紹介下さい。

プログラミングにおける精神的ブレイクスルーポイント

Monacaの[ファイル操作プラグイン](https://docs.monaca.io/ja/reference/cordova_6.2/file/)のページで
> cordova.file.cacheDirectory - キャッシュしたデータファイルまたは他のファイル ( アプリ側で再作成可能な、なんらかのファイル ) 用のディレクトリーです。端末側のストレージが不足する場合には、OS 側が、これらのファイルを削除します。ファイルの削除は、本来であれば、アプリ側で制御すべき処理です。

と記述がありますが、具体的な方法は書いてありませんでした。
cordova.file.cacheDirectoryの中身を全て削除するには
どのようにすればよいでしょうか？

Monacaのキャッシュの消し方について

###Canvasを画像としてAndroidに保存する
現在、少し変わったカメラアプリを作成しているのですが、Canvasを画像としてAndroidに保存するやり方がわかりません。

詳しいやり方やソースコードを教えてもらえると助かります。
よろしくお願いします。

開発環境 monaca
言語 HTML5/Javascript/CSS

Canvas Androidに画像として保存する方法

現在Monacaを利用して、cameraAPIとその撮影データをPERSISTENT領域に保存させる方法を勉強・模索しております。サンプルアプリのコードや他のページで紹介されていたコードを組み合わて調整をしたりすることで、iPhoneでカメラ起動・撮影・アプリ上に表示するところまではできましたが、2枚目以降撮影しても、最初の1枚目の写真が繰り返し表示されてしまう状況です。

今現在のコードで撮影画像がPERSISTENT領域にちゃんと保存されているかもよく分からないのですが、ひとまず複数撮影しても最初の1枚だけが繰り返し表示されてしまう問題箇所が分かればと思い、質問させていただきます。

ちなみに、コード中の「// ■■■ 撮影画像をPERSISTENTへ移動させる ■■■」より下のコードを削除すると、複数枚撮影しても正しく複数枚表示されるようになりますので、このあたりが原因ではないかと見ています。

コードを添付しますので、もし何かお分かりの方いらっしゃいましたらお知恵拝借できたらと思います。
よろしくお願いいたします。



```ここに言語を入力
// ■■■ ページ上のボタンをクリックしてカメラ起動 ■■■
function addTodoPicture() {
    navigator.camera.getPicture( /*カメラ起動成功時はaddTodo実行、キャンセル時はアラート、3番目はセッティング情報*/
        addTodo, 
        function() {
            alert("撮影をキャンセルしました");
        }, 
        {
            quality : 50,
            destinationType : Camera.DestinationType.FILE_URI,
        }
    );
}


// ■■■ 撮影した画像をページ上に表示 ■■■
function addTodo(camera_url) { //camera_urlで撮影した画像のパスを取得？
    var title = $("#todo-title").val();
    var body = $("#todo-body").val();
    var img_tag = "";
    if (camera_url) {
        img_tag = "<img src='" + camera_url + "'>";
    }
    
    $.mobile.changePage($("#list-page"));
    $("#todo-list").append(img_tag)
    $("#todo-list").listview('refresh');
    
    getFileEntry(camera_url);
};


// ■■■ 撮影画像をPERSISTENTへ移動させる ■■■
function getFileEntry(camera_url) {
    window.resolveLocalFileSystemURL(camera_url, function success(fileEntry) {

        // Do something with the FileEntry object, like write to it, upload it, etc.
        // writeFile(fileEntry, camera_url);
        alert("got file: " + fileEntry.fullPath);
        // displayFileData(fileEntry.nativeURL, "Native URL");
        
        moveToPersistent(fileEntry); //moveToPersistentを実行してPersistentへデータを移動

    }, function () {
      // 有効な FileEntry オブジェクトを取得できなかった場合、アプリ側の createNewFileEntry を呼び出す
        createNewFileEntry(camera_url);
    });
}


function createNewFileEntry(camera_url) {
    window.resolveLocalFileSystemURL(cordova.file.cacheDirectory, function success(dirEntry) {

        // JPEG file
        dirEntry.getFile("tempFile.jpeg", { create: true, exclusive: false }, function (fileEntry) {

            // Do something with it, like write to it, upload it, etc.
            // writeFile(fileEntry, imgUri);
            alert("got file: " + fileEntry.fullPath);
            // displayFileData(fileEntry.fullPath, "File copied to");

        }, onErrorCreateFile);

    }, onErrorResolveUrl);
}


var persistentDirectoryEntry;
document.addEventListener('deviceready', init, false);

function init() {
  // あらかじめPERSISTENTファイルシステムを要求し，DirectoryEntryオブジェクトを取得しておく
  window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, getPersistentDirectoryEntry, failFS);
}

function getPersistentDirectoryEntry(fileSystem) { //新しい画像ファイルでタスク登録できない原因はここっぽい
  persistentDirectoryEntry = fileSystem.root;
}


function moveToPersistent(fileEntry) {
  // あらかじめ取得しておいたPERSISTENTファイルシステムのDirectoryEntryオブジェクトと
  // resolveLocalFileSystemURIメソッドで取得したFileEntryオブジェクトを用いて，ファイルをPERSISTENTに移動
  fileEntry.moveTo(persistentDirectoryEntry, fileEntry.name, moveToSuccess, failFS);
}

function moveToSuccess(fileEntry) {
  alert('画像ファイル「' + fileEntry.name + '」を移動しました。\n' + fileEntry.fullPath);
}

function failCamera(message) {
  alert('カメラ操作に失敗しました。\n' + message);
}

function failFS(error) {
  alert('ファイルシステム操作に失敗しました。\nエラーコード: ' + error.code);
}
```

cameraAPIで撮影した画像をPERSISTENTに移動させたい（Monaca）

MonacaのファイルAPIを利用して、PERSISTENTに保存されたファイル一覧を取得しようとしています。とあるページにて紹介されていました、下記のコードを利用することで、ファイル名の一覧を取得することまではできました。

次に、ファイル名だけの一覧ではなく、ファイルURL(file://〜/〜/image.jpg)を含めた形での一覧を取得したいと模索しているのですが、その方法が分からず、このような形での取得が可能なのかどうか、実現できる方法をお知りの方がいましたらよろしくお願いいたします。

これを通して実現したいことは、個々のファイルパスを取得して、ページ上に<img src="(取得したファイルパス)">の形で画像を表示させたいと考えております。

よろしくお願いいたします。

```ここに言語を入力
/*＝＝＝PERSISTENTにあるファイル一覧を取得する＝＝＝*/

    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {
        window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onFileSystemSuccess, onFileSystemFail);
        //window.requestFileSystem(LocalFileSystem.TEMPORARY, 0, onFileSystemSuccess, onFileSystemFail);
    }
    function onFileSystemSuccess(fileSystem) {
        var directoryEntry = fileSystem.root;
        var directoryReader = directoryEntry.createReader();
        directoryReader.readEntries(getFileName, fail);
    }
    function onFileSystemFail(error) {
        console.log("error: " + error.code);
    }

    function getFileName(fileEntries) {
        for (var index = 0; index < fileEntries.length; index++) {
            console.log(fileEntries[index].name)
        }
    }
    function fail(error) {
        console.log("error: " + error.code);
    }
```

```ここに言語を入力
//上のコードの結果、このようなファイル名一覧は取得できています

cdv_photo_001.jpg
cdv_photo_002.jpg
cdv_photo_003.jpg
   and more...
```

ファイルAPIでPERSISTENTに保存されているファイルのURLを取得したい（Monaca）

とあるwordpressサイトを構築しまして、トップページのみページ遷移・ページ更新でフェードインするようにいたしました。
Firefox・Edgeでは問題なく動いているのですが、Chrome・IEにて、移動してきた際にフェードイン前に一瞬コンテンツが表示されてしまいます。

コードは大まかに下記の通りです。
```HTML
<head>
	
	<style>
		body{display:none;}
	</style>
	
</head>
<body>
	<div class="all_wrap">
		<div class="fade_over"></div>
		<div class="index_content">
			
		</div>
	</div>
	<script type="text/javascript" src="/common.js"></script>
</body>
	
```

```jquery
//common.jsにて
	$(window).on('load', function(){
	$("body").show();
		setTimeout(function(){
			$(".fade_over").fadeOut("slow");
		},500);
	});
	//bodyのshow後、ずらしてfade_overを消しているのはbody内で高さ取得などのjsを動かしているため、
	//bodyを先に表示させて他のjsを動かして表示を整えてからfade_overを消しているためです
```

```css
.all_wrap{
	position:relative;
}
.fade_over{
	display:block;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:#FFF;
	z-index:500;
}

```

headの上部にてbodyをdisplay:noneしているため、適切に処理されれば表示されないかと思うのですが、一瞬表示されます。

また、トップページ内でランダムでスライドの順番が決まるスライドを一番上に設定しています。（PHPでHTMLごとランダムに表示しています）
読み込みごとに一枚目の画像が変わる仕組みなのですが、一瞬表示されるコンテンツでの画像は必ず同じ画像です。
そのため、キャッシュなのかと思うのですが、head内のスタイルより先にキャッシュが表示されてしまうことはあるのでしょうか。

Chromeのコンソールでの「Network」タブの読み込み時のスクリーンショットを表示する機能（ビデオカメラのマークのような箇所）を見ても、
1msや250msにすでにコンテンツが描画され、その後.fade_overで隠した画面が描画されているようでした。

Wordpressが原因かと思って全く同じHTMLで静的なHTML化してみましたが改善されず、原因が不明です。
なにか解決方法や原因かと思われるものはありますでしょうか？よろしくお願いいたします。

Chromeでのページ移動・読み込み時にフェードイン時にコンテンツが一瞬見える

### 前提・実現したいこと

グーグルマップ上に登録されていない場所に名称を表示させたい。

### 発生している問題・エラーメッセージ

```
Googleの地図上で登録されていない場所（マイビジネスで申請中）に名称を表示させたいと思っています。
緯度経度で表示させる方法しか現状になく、下記のコードで表示させていますが名称部分には緯度経度の数字が出てしまいます。
緯度経度で検索しつつ場所名称で表示させる方法はありますでしょうか...
```

### 該当のソースコード

```ここに言語名を入力
  <iframe src="https://www.google.com/maps/embed/v1/place?key=[APIキー]&q=<?php echo rawurlencode($latitude . ','. $longitude); ?>" width="500" height="350" frameborder="0" style="border:0" allowfullscreen></iframe>

```

### 試したこと

1拠点のみなので下記のコードに書き足せば良いかと思い、名称を書き足してはいるのですが上手くいきません。

### 補足情報（FW/ツールのバージョンなど）

Googlemap embed APIのiframeを仕様しています。

Google地図のiframeで場所の名称を表示させたい

```ここに言語を入力
$input = file_get_contents("php://stdin");
```
で受け取ったメールをmail_mimeDecodeで処理しているのですが、
iPhoneから送られた画像を保存すると、縦向きの画像が横向きで保存されます。

調べてみると、iPhoneの場合は縦向きでも横向きで保存されるらしく、
'orientation'という値をいじれば良いところまではわかったのですが、
上記のやり方の場合、向きを直すことは可能でしょうか。



<追記>
「上記のやり方の場合、向きを直すことは可能でしょうか。」
こちらですが、
file_get_contents、mail_mimeDecodeで画像を取得、保存した場合、
その画像情報から'orientation'の変更が可能か、という意味です。

誤解する表現でしたので、追記いたします。


<追記（メール情報から画像をファイル保存するまでの処理>
```ここに言語を入力
<?php 
$input = file_get_contents("php://stdin");
$structure = mail_mimeDecode($input);

if (strtolower($structure->ctype_primary) == "multipart") {
	$images = getImage($structure->parts);
}

reset($images);
// 拡張子を格納
$ext = '';

$count = 0;

$count_max = count($images);

foreach ($images as $image) {
	if ($image['type'] == 'image/jpeg' || $image['type'] == 'image/gif' || $image['type'] == 'image/png') {
		$count++;


		// ファイルとして保存($pathDir_tmpImageは一時ファイルを保存するディレクトリ名です)
		$tmp_path = tempnam($pathDir_tmpImage, 'img_');
		if ($tmp_path == false) {
				break;
		}
		$fp = fopen($tmp_path, 'w');
		if ($fp == false) {

				break;
		}

		fwrite($fp, $image['body']);
		fclose($fp);
		
		// ここから、一時ファイルを加工して別ディレクトリに保存します。（＊）
		
}

function mail_mimeDecode($input){
  list($headers,$body) = splitBodyHeader($input);
  return decode($headers, $body);
}

function splitBodyHeader($input){
  if (preg_match("/^(.*?)\r?\n\r?\n(.*)/s", $input, $match)) {
    return array($match[1], $match[2]);
  }
  return false;
}

function getImage($parts) {

  $images = array();
  foreach( $parts as $part ){
  	print($part->ctype_primary. '/'.$part->disposition .'<br />');
    // タイプ判別
    if (isset($part->disposition) &&
    	(strtolower($part->disposition) == "attachment")) {
        $images[] = array(
                        'type' => strtolower(sprintf("%s/%s",$part->ctype_primary,
                                                         $part->ctype_secondary)),
                        'name' => $part->ctype_paramaters['name'],
                        'body' => $part->body,
                        );
    } else {
      switch(strtolower($part->ctype_primary)){
      case "image":
        $images[] = array(
                          'type' => strtolower(sprintf("%s/%s", $part->ctype_primary,
                                                       $part->ctype_secondary)),
                          'name' => $part->crype_paramaters['name'],
                          'body' => $part->body,
                          );
        break;
      case "multipart":
        $images = array_merge($images, getImage($part->parts));
        break;
      default:
        break;
      }
    }

  }
  return $images;
}

 ?>
```

iphoneからメール送信した画像の向き

### 前提・実現したいこと

javascriptで画像をリサイズした後phpにてアップロード及びデータベースへ画像パスを挿入するというシステムを作成しています。
ここに一連の処理が終わった後別ページへリダイレクトする処理を追加したいのですが、phpでのheaderリダイレクトもjavascriptのlocation.hrefリダイレクトも機能しません。
そこでリダイレクト処理を入れる場所などを教えていただけますと幸いです。
よろしくお願いします。

### 発生している問題・エラーメッセージ

```
リダイレクトが機能しない
```

### 該当のソースコード

```javascript

echo '<form action="" id="imageForm" method="post" enctype="multipart/form-data">';
echo '<div id="drag-drop-area">';

echo '<p class="dropZone"><input id="imageSelect" type="file" value="ファイルを選択" name="image" onChange="imgDisp();"></p>';

echo '<p><INPUT type="submit" name="submit" onClick="imgUpload();" value="送信" class="updateBtn"></p>';

echo '<img src="" id="preview" /><canvas id="canvas"></canvas>';

echo '</div></form>';

<script>
function imgDisp() {
    var file = $("#imageSelect").prop("files")[0];
                
    //画像ファイルかチェック
    if (file["type"] != "image/jpeg" && file["type"] != "image/png" && file["type"] != "image/gif") {
        alert("jpgかpngかgifファイルを選択してください");
        $("#imageSelect").val('');
        return false;
    }
                
    var fr = new FileReader();
    fr.onload = function() {
        //選択した画像をimg要素に表示
        $('#preview').attr("src", fr.result);                        
    };
    fr.readAsDataURL(file);
} 
	  
</script>
	  
<script>

function imgUpload() {
    //加工後の横幅を800pxに設定
    var processingWidth = 2000;            
            
    //加工後の容量を100KB以下に設定
    var processingCapacity = 200000;                               

    //ファイル選択済みかチェック
    var fileCheck = $("#imageSelect").val().length;
    if (fileCheck === 0) {
        alert("画像ファイルを選択してください");
        return false;
    }
                
    //imgタグに表示した画像をimageオブジェクトとして取得
    var image = new Image();
    image.src = $("#preview").attr("src");

    var h;
    var w;

    //原寸横幅が加工後横幅より大きければ、縦横比を維持した縮小サイズを取得
    if(processingWidth < image.width) {
        w = processingWidth;
        h = image.height * (processingWidth / image.width);

    //原寸横幅が加工後横幅以下なら、原寸サイズのまま
    } else {
        w = image.width;
        h = image.height;
    }

    //取得したサイズでcanvasに描画
    var canvas = $("#canvas");
    var ctx = canvas[0].getContext("2d");
    $("#canvas").attr("width", w);
    $("#canvas").attr("height", h);
    ctx.drawImage(image, 0, 0, w, h);                          

    //canvasに描画したデータを取得
    var canvasImage = $("#canvas").get(0);

    //オリジナル容量(画質落としてない場合の容量)を取得
    var originalBinary = canvasImage.toDataURL("image/jpeg"); //画質落とさずバイナリ化
    var originalBlob = base64ToBlob(originalBinary); //画質落としてないblobデータをアップロード用blobに設定
    console.log(originalBlob["size"]);

    //オリジナル容量blobデータをアップロード用blobに設定
    var uploadBlob = originalBlob;                    

    //オリジナル容量が加工後容量以上かチェック
    if(processingCapacity <= originalBlob["size"]) {
        //加工後容量以下に落とす
        var capacityRatio = processingCapacity / originalBlob["size"];
        var processingBinary = canvasImage.toDataURL("image/jpeg", capacityRatio); //画質落としてバイナリ化
        uploadBlob = base64ToBlob(processingBinary); //画質落としたblobデータをアップロード用blobに設定
        console.log(capacityRatio);                        
        console.log(uploadBlob["size"]);
    }

    //アップロード用blobをformDataに設定
    var form = $("#imageForm").get(0);
    var formData = new FormData(form);                    
    formData.append("selectImage", uploadBlob);

    //formDataをPOSTで送信
    $.ajax({
        async: false,
        type: "POST",
        url: "./output.php",
        data: formData,
        dataType: "text",
        cache: false,
        contentType: false,
        processData: false,
        error: function (XMLHttpRequest) {
            console.log(XMLHttpRequest);
            //alert("アップロードに失敗しました");
        },
		
		
        success: function (res) {
            if(res !== "OK") {
                console.log(res);
                //alert("アップロードに失敗しました");
            } else {
                //alert("アップロードに成功しました");
				
            }
			
        }
    });
	
}

// 引数のBase64の文字列をBlob形式にする
function base64ToBlob(base64) {
    var base64Data = base64.split(',')[1], // Data URLからBase64のデータ部分のみを取得
          data = window.atob(base64Data), // base64形式の文字列をデコード
          buff = new ArrayBuffer(data.length),
          arr = new Uint8Array(buff),
          blob,
          i,
          dataLen;
    // blobの生成
    for (i = 0, dataLen = data.length; i < dataLen; i++) {
        arr[i] = data.charCodeAt(i);
    }
	
    blob = new Blob([arr], {type: 'image/jpeg'});
    return blob;
location.href = "../index.php";
}

```
```php
<?php
session_start();
$pdo=new PDO('mysql:host=localhost;dbname=xxx;charset=utf8', 'root', '');
	
date_default_timezone_set('Asia/Tokyo');
	
	
	$user_id=$_SESSION['users']['user_id'];
	$username=$_SESSION['users']['username'];
	$email=$_SESSION['users']['email'];
	$password=$_SESSION['users']['password'];
	

  $file_name = $_FILES['image']['name'];
  $extension = pathinfo($file_name, PATHINFO_EXTENSION); //拡張子取得
  $tmp_path = $_FILES['selectImage']['tmp_name'];
  $file_dir_path = "../img/";
  $uniq_name = date("YmdHis").md5(uniqid(microtime(),1)).session_id() . "." . $extension;


	
	
  if (is_uploaded_file($tmp_path)) {
    if(move_uploaded_file( $tmp_path, $file_dir_path . $uniq_name)) {
      chmod($file_dir_path . $uniq_name, 0644);
		
echo('<pre>');
var_dump($uniq_name);
echo('</pre>');
		
		
		$sql=$pdo->prepare("update users set icon=? where user_id={$user_id}");
		$sql->execute([$uniq_name]);
		
		$_SESSION['users']=[
			'user_id'=>$user_id, 'username'=>$username, 'email'=>$email, 'password'=>$password];
		
		header("Location: ../index.php");
		exit();
	
		
    } else {
      echo "Error:アップロードできませんでした。";
    }
  }
	

	

?>
```
### 試したこと

様々な位置にリダイレクト処理を記載

### 補足情報（FW/ツールのバージョンなど）

PHP のバージョン: 7.2.3

ajaxでphpファイルを処理した後の、別ページへのリダイレクトができない

各ユーザーが持つ画像のサイズや解像度はバラバラだと思いますが、それらをアップロード時に「自社のサイトに最適な画像サイズ」で扱っていくためにはどのような処理が必要になってくるのでしょうか。

現状、弊社のアプリではアップロードした画像を「サイズ違いで3か所」使用する部分があります。
イメージとしてはプロフィール、ユーザーランキング、注目のユーザーといった別ページに使いまわしをする感じです。

かなり小規模である現在は、アップロード時、最大表示である「プロフィール」のサイズに合わせた画像をアップロードするようにし、他のユーザーランキング、注目のユーザーのページにはこれを縮小して表示をしています。

知りたいことは、このやり方は一般的な方法と言えるかということです。他の方がどのようなアプローチをされているのかを知りたく、ベストと言えずとも「こんなやり方があるよ」程度で構いませんので知識を共有頂ければ有難いです。

よろしくお願いいたします。

画像アップロード時のサイズ指定について

###前提・実現したいこと
PHPを利用して画像のサイズをリサイズしてからデータベースに登録したいです。

###発生している問題・エラーメッセージ

```
iPhoneで撮影した画像などをそのままデータベースに登録しようとすると保存されません。
ちなみにサイズの小さい画像であれば登録できるので、登録方法そのものには問題ないと思います。
```

###該当のソースコード
```HTML
<form action="image_test" method="post" name="select" enctype="multipart/form-data" >
<p>写真を選択</p>
<input type="file" name="image" id="image"  alt="写真を選択">
<input type="submit" alt="送信">
</form> 
```
```PHP
function sql_call($str)
{
      $str = mysql_query($str); 
      return $str;                
}
$data = fread($fp, $_FILES['image']['size']);
$sqlsel=sprintf('INSERT INTO sheet VALUES(null,"%s")',($data));
$querysel=sql_call($sqlsel);
```
###試したこと
javascriptを利用してリサイズを試みましたが、PHPのみで出来るのであればPHPだけを使ってリサイズを行いたいです。

PHPを利用して画像をリサイズしてからデータベースに登録する方法

今回は技術的な質問ではなく、エンジニアとしての考え方に関する質問となります。

最近、技術の勉強`※1`をしていて、

> 「これで本当に勉強になっているのか？成長速度は遅くないか？」

と自問しております。

この自問の背景には、以下の仮説があります。
> より正しい考え方ができていないと、勉強しても何も身についていないのでは？
延いては、エンジニアのスキルそのものにも大きな影響を及ぼすのでは？

「より正しい考え方ができていないと勉強しても何も身につかない」という仮説`※2`を真とした場合、
その考え方とはどんなものがあるでしょうか？

---

`※1`
技術の勉強というのは具体的に、以下のことをしています。
```
・技術書を読む
・サンプルコードを書いてみる
・オリジナルアプリケーションを作って、実際に動かす
・質問する（御助言下さる方、本当にありがとうございます）
・VMでLinuxを動かす
```

`※2`
一例を挙げますと、

> 2時間勉強に使って、なんとか 「Hello, World!」 を出力できた

とします。

しかし、私の仮説においては、これでは全く勉強になっていません。その理由は、

> 仕組みを理解してこそ勉強であり、なぜ 「Hello, World!」 を出力できたのか、その仕組みの理解に全く時間が割かれていないため

です。

------------追記------------
貴重な御助言を下さいました皆様、ありがとうございます。

この質問に対してベストアンサーを決めることは、技術的な質問に対するそれとは異なり、
本質的な意味を持たないと考えております。
このまま勉強を続け、個人的に一番成長できたと思う考え方をベストアンサーとさせてください。

------------追記2------------
そもそも前提がおかしい、など、是非ご意見を頂きたく思っておりますので、お気軽にご回答ください。