画像を指定座標に表示、ボタンで次の座標へ

Question

自分の目指すシステムは，(BB弾くらい小さい)画像を予め用意した座標(複数)に表示し、ボタンを押す毎に画像が次の座標で表示され、それを繰り返すというものです。
Swift言語は初めてで自分で調べてもよくわかりませんでした。
プログラミング的にはループ関数を用いて座標を繰り返し入力すると考えていますが、C言語とは別物でどうしたらいいかわかりません。非常に情けないですが、何か参考になるサイトか、もしよろしければ大まかなプログラムを教えていただけないでしょうか。
それと座標は、Ipad上の実際の距離はどれくらいになるのでしょうか。X座標0~100で何mm？調べてもわかりませんでした。質問ばかりですみません。。。

Answer 1

Swiftを使って iOS プログラミングを行うとなると、

1. Swift という言語仕様を理解する
2. Xcode という統合開発環境（Xcode）の使い方を理解する
3. UIKit を使って基本的なユーザインタフェースの作り方を理解する

という流れを追って学習することになるかと思います。

1から3まで一気に説明している入門書もありますが、率直なところ、その書籍で紹介されているものと同じものが作られたという達成感が得られるだけで、「じゃあその次は？」と言われたときに何もできないのが現実です。

でも、もし「iOS アプリを作るという成功体験を収めてから、細かいことを真面目に勉強したい」ということであれば、いわゆる初心者本で一通り学習することも否定しません。

非常に情けない、と思っていらっしゃいますが、誰でもはじめはそんなもんです。
むしろ、「情けない」と思っている気持ちをバネに真面目に学習されるのが、結局は早道かと思います。

「もしよろしければ大まかなプログラムを教えていただけないでしょうか」という期待に答えることはできなくもありませんが、それを渡したところで、結局は何をやってるかさっぱりわからないというのが現実かと思います。

kikiziさんの過去のご質問を拝見すると、なんとなく大学の研究で使うプログラムを作られているのではないかと推測しています。

そうなると、卒論なり修論なりに向けた時間が少ないことは想像に難くありませんし、周りのプレッシャーも大きいかと思いますが、まずは基礎的なところから始めることを考えてみてはいかがでしょうか。

真面目に基礎から挑戦する、ということであれば、ある程度の道標はお示しすることは可能かもしれません（一応、私自身は教える立場をやっていたからこそ、こういうアドバイスをしています）。

コメントいただければ、引き続き回答したいと思います。

##コメントを受けての追記

その中で特に問題だったのが、Main.storyboardでは横向きにしてボタンなどを配置したのですが、アプリが起動するとなぜか縦向き配置されたようになり表示される座標も横ではなく縦の時の座標になっていました。

このように、具体的な問題を初めからご質問に入れていただければ、より適切な回答ができます。

iPad 実行し、常に横向きでつかうのであれば、StoryBoard 以外での設定が必要です。

Targetの設定で、実行デバイスの種類、および端末の向きを設定できますから、横向き固定であれば次のように設定してみてもらえますでしょか。

これで横向き固定となります。

端末上ので 100ピクセルの値が実寸でどれくらいになるかという話ですが、これはデバイスの実スクリーンサイズを使って計算すれば求める話ではあります。

たとえば、

• iPhone/iPad/Apple Watch解像度(画面サイズ)早見表

こういう表もあったりしますが、それ以外にも、viewDidLoad()あたりに

 // MARK: - 100x100 ピクセルの赤い四角を中央に配置。
        let imgView = UIImageView()
        imgView.frame = CGRect(x: view.center.x - 50, y: view.center.y - 50, width: 100, height: 100)
        imgView.backgroundColor = .red
        view.addSubview(imgView)

というコードを一時的に記述して表示させ、ノギスなり定規なりで測ってみるのも一つの手です。

追記後半の件については、それだけの文章だと何を行いたいのか、どういうデザインにしたいのか具体的でないためなんとも申し上げられません（Fittsの法則の実験をしたいのか、心理認知実験をしたいのか、それ以外なのか...）。

実験を知らない第三者でもわかりやすいような説明が求められると思います。

Comments

[TsukubaDepot]

ちなみに、macOS/iOSアプリで UI を使ったプログラムを作るには、最新の SwiftUI と、従来の　Swift/UIKit の2つの選択肢があります。

これからは SwiftUI が主流になることはほぼ確実かと思いますが、参考になる書籍はまだすくないですし、文法も独特で Swift + DSL 記法に加え、クロージャの扱いや変数の監視方法の理解など、理解するためにはC言語で得た知識だけでは太刀打ちするのも難しいのが個人的な感想です。

もちろん、Swift も C言語に似て非なる言語ではありますが、プログラムの流れなどを理解することをかんがえるとそれほど難しくはないので、迷っているのであれば個人的には UIKIt をお勧めしているところです。

[kikizi]

お察しの通り大学の研究のためにシステム開発を行なっており、かなり焦っている状況です。
UIKITを用いた基本的なものを作ったりなど基礎的なものは理解はできます。
自分のシステムは最悪でも画像が表示できるようになればなんとかなるのでその部分だけでもお教えいただけないでしょうか。。。
自分でも作製を試みようと大まかに考えたのですが、そこでループの方法がわからないと思い、参考にと自分が作りたいシステムに似た先輩が作製したシステムを見たのですが、
let position1 = CGPoint(x:350, y:200)
で座標指定し、position1~Xまでを先に決めていてiを関数としてループさせ、それを座標に入れていることまではわかったのですが、(基礎しか知らない自分にとっては)特殊なもの(音声認識など)が組み合わさっており、コードが複雑で読解するにも限界があり、どのようにしてループさせているのかがわかりませんでした。ネットの記事を探してもなかなか答えに辿り着けずとても難航してしまい、助けを求めたしだいです。ご教授願えたら幸いです。
ちなみに先輩はもう卒業されており、Xcodeに詳しい人が周りにいない状態です。先輩のシステム自体も少し古いものでした。

TsukubaDepotのおっしゃられる二つ の違いなど詳しいことはよくわかりません。実現したいと考えているシステムはちなみにそれら二つの違いなど関係する事柄でしょうか？？

[TsukubaDepot]

たとえば、現在できているコードを拝見することは可能でしょうか。
どこまでできていて、どこからがわからないのか把握することは、教える側にしても教えられる側にしても重要なこととなります。

「ループの方法がわからない」という表現は、質問者さんの背景を考えると2つ想像できます。ひとつは単純に for-in ループの仕組みが分かっていないという推測、もう一つは画像を表示させつつ、ボタンなどの反応も受け取りたいけど、それがわからない、という2つの推測です。

C言語でもそうですが、イベント（ボタンが押された）などという処理をこなしつつ、別の処理を行う谷は「イベントドリブン」とか「割り込み」とか呼ばれる処理の概念を理解しておく必要があります。これは、C言語の基礎でよく取り扱うような、scanf で文字を読み込んだ後、printf で計算結果を表示し、再度 scanf で次のデータを受け取る、という考え方とはまた違った視点で考える必要があります。

いずれにせよ、「どこまでどう頑張ったんか」ということを示さない限りは、teratail でいう「問題の丸投げ」「（具体的な）課題が含まれていない問題」に相当してしまいますし、それは類似の掲示板で行っても同じ話になります。

なので、少なくとも第三者が見通せる範囲でコードを示し、その上で質問を続けるといいかと思います。コードはこのご質問に追記できますので、追記してみてもらえますでしょうか。

[TsukubaDepot]

二つの違い、というのはどのことを指しているのでしょうか。

[kikizi]

最新の SwiftUI と、従来のSwift/UIKit の2つの選択肢　＜＜　二つの違いというのはこれのことです。よくわからないので今回はスルーします。
　作成中のプログラムが以下のものです。
この状態でRunしたところSUCCESSにはなりましたが、いくつか問題がありました。
その中で特に問題だったのが、Main.storyboardでは横向きにしてボタンなどを配置したのですが、アプリが起動するとなぜか縦向き配置されたようになり表示される座標も横ではなく縦の時の座標になっていました。

import UIKit

class ViewController: UIViewController {

var i = 1
// View
var myImageView1: UIImageView!
var myImageView2: UIImageView!

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.

//指標の設定
myImageView1 = UIImageView(frame: CGRect(x:-50,y:-50,width:12.39*2,height:12.39*2))

myImageView2 = UIImageView(frame: CGRect(x:-50,y:-50,width:12.39*2,height:12.39*2))

// 表示する画像を設定する.
let myImage1 = UIImage (named:"[e-mail]")
let myImage2 = UIImage (named:"[e-mail]")

// 画像をUIImageViewに設定する.
myImageView1.image = myImage1
myImageView2.image = myImage2

// UIImageViewをViewに追加する
self.view.addSubview(myImageView1)
self.view.addSubview(myImageView2)

//固視点の座標
let position0 = CGPoint(x:400, y:200)

//固視点の画像を座標に
myImageView1.layer.position = position0
}

//子視点座標
let position1 = CGPoint(x:350, y:200)
let position2 = CGPoint(x:100, y:200)
let position3 = CGPoint(x:100, y:100)
let position4 = CGPoint(x:350, y:610)
let position5 = CGPoint(x:150, y:620)
let position6 = CGPoint(x:250, y:630)
let position7 = CGPoint(x:350, y:640)
let position8 = CGPoint(x:647, y:249.88)
let position9 = CGPoint(x:558.53, y:160.23)
let position10 = CGPoint(x:121, y:598.73)
let position11 = CGPoint(x:558.53, y:338.06)
let position12 = CGPoint(x:121, y:249.88)
let position13 = CGPoint(x:558.53, y:685.94)
let position14 = CGPoint(x:121, y:955.44)
let position15 = CGPoint(x:558.53, y:685.94)
let position16 = CGPoint(x:296.97, y:774.12)
let position17 = CGPoint(x:91.20, y:512)
let position18 = CGPoint(x:706.78, y:774.12)
let position19 = CGPoint(x:91.20, y:685.94)
let position20 = CGPoint(x:706.78, y:598.73)
let position21 = CGPoint(x:91.20, y:863.77)
let position22 = CGPoint(x:706.78, y:598.73)
let position23 = CGPoint(x:91.20, y:685.94)
let position24 = CGPoint(x:706.78, y:955.44)
let position25 = CGPoint(x:296.97, y:685.94)
let position26 = CGPoint(x:384, y:955.44)
let position27 = CGPoint(x:471.03, y:512)
let position28 = CGPoint(x:558.53, y:955.44)
let position29 = CGPoint(x:296.97, y:512)
let position30 = CGPoint(x:558.53, y:249.88)
let position31 = CGPoint(x:471.03, y:685.94)
let position32 = CGPoint(x:647, y:863.77)
let position33 = CGPoint(x:384, y:249.88)
let position34 = CGPoint(x:121, y:338.06)
let position35 = CGPoint(x:558.53, y:425.27)
let position36 = CGPoint(x:121, y:685.94)
let position37 = CGPoint(x:558.53, y:249.88)
let position38 = CGPoint(x:647, y:160.23)
let position39 = CGPoint(x:384, y:774.12)
let position40 = CGPoint(x:296.97, y:160.23)
let position41 = CGPoint(x:558.53, y:249.88)
let position42 = CGPoint(x:647, y:338.06)
let position43 = CGPoint(x:209.47, y:425.27)
let position44 = CGPoint(x:647, y:338.06)
let position45 = CGPoint(x:384, y:955.44)
let position46 = CGPoint(x:647, y:512)
let position47 = CGPoint(x:209.47, y:68.56)
let position48 = CGPoint(x:471.03, y:685.94)
let position49 = CGPoint(x:209.47, y:425.27)
let position50 = CGPoint(x:121, y:863.77)
let position51 = CGPoint(x:647, y:685.94)
let position52 = CGPoint(x:558.53, y:249.88)
let position53 = CGPoint(x:296.97, y:685.94)
let position54 = CGPoint(x:209.47, y:955.44)
let position55 = CGPoint(x:296.97, y:160.23)
let position56 = CGPoint(x:209.47, y:774.12)
let position57 = CGPoint(x:471.03, y:685.94)
let position58 = CGPoint(x:209.47, y:598.73)
let position59 = CGPoint(x:296.97, y:338.06)
let position60 = CGPoint(x:558.53, y:955.44)
let position61 = CGPoint(x:471.03, y:160.23)
let position62 = CGPoint(x:558.53, y:774.12)
let position63 = CGPoint(x:558.53, y:774.12)
let position64 = CGPoint(x:558.53, y:774.12)
let position65 = CGPoint(x:558.53, y:774.12)
let position66 = CGPoint(x:296.97, y:160.23)
let position67 = CGPoint(x:209.47, y:774.12)
let position68 = CGPoint(x:471.03, y:685.94)
let position69 = CGPoint(x:209.47, y:598.73)
let position70 = CGPoint(x:296.97, y:338.06)
let position71 = CGPoint(x:558.53, y:955.44)
let position72 = CGPoint(x:471.03, y:160.23)
let position73 = CGPoint(x:558.53, y:774.12)
let position74 = CGPoint(x:471.03, y:160.23)

lazy var positions2 = [position1,position2,position3,position4,position5,position6,position7,position8,position9,position10,position11,position12,position13,position14,position15,position16,position17,position18,position19,position20,position21,position22,position23,position24,position25,position26,position27,position28,position29,position30,position31,position32,position33,position34,position35,position36,position37,position38,position39,position40,position41,position42,position43,position44,position45,position46,position47,position48,position49,position50,position51,position52,position53,position54,position55,position56,position57,position58,position59,position60,position61,position62,position63,position64,position65,position66,position67,position68,position69,position70,position71,position72,position73,position74]

@IBAction func yes(_ sender: Any) {
//子視点の画像を座標に
myImageView2.layer.position = positions2[i]

i = i + 1
}

@IBAction func No(_ sender: Any) {

myImageView2.layer.position = positions2[i]

i = i + 1

}
}

[kikizi]

また最低が画像を表示するまでですが、本来は74マスの空列を作ってそれぞれのボタンを押した際FもしくはTの文字をその空列に記録していき、最後にそのできた空列をoverdriveに保存するといったシステムにできたらより良いと考えています。

[TsukubaDepot]

回答を追記しました。
回答本文をご参照ください。