FC2ブログ
 

米国株テクニカル分析ブログ ソシアルアドバンテージ 香港株、米国株、エリオット波動のブログ

Swiftを学んだ上で初心者に「すぐできること」を教えます

今後日本でもプログラミングが学校でも必修化されていくそうです(おそすぎだろ)

プログラミングができれば人生が変わるか変わらないかは別にして、今も私はSwiftの学習を継続しています

ホリエモンこと堀江貴文のいう「本なんていらないネットで事足りる」というウソ情報を真に受けた私のSwiftの学習はトライアンドエラーとネットサーフィンを繰り返し、結局書店での立ち読みなどで解決しながらの学習はネットで事足りるというホリエモンの理屈を否定するには十分なほど非効率でした

Macを使っていて、Swiftでつくるiphone用のアプリに興味がある方に「最初の1時間」でできるSwiftの入門を教えようと思います
これは全国の初心者に向けて書いているため正式なプログラミングの初心者向けのテキストではありません
興味がある方だけご覧ください

画面遷移は割愛しています(もっといい記事がネット上にあるため)

画像と文字を画面に置いて、そのあと今回初心者の方に向けてSwiftのstoryboardという紙芝居の枠に簡単な足し算ができる画面を作り、計算させるためのコードを書いて最後にシミュレーターで実験します

<Xcodeのインストールに必要なSSDの容量をどう確保するか>

Swiftを始めるにはXcodeのインストールが欠かせません、なぜならXcodeというアップル製のソフトを使いながらiphone用の画面をつくり、処理を書き込むことでiphone用のアプリは作られていくからです
そしてこまったことにXcodeはサイズが大きいため、Macのストレージ容量に空きがないとインストールすらできません
しかし、私はストレージ容量がない人に改めてこの機会に「初期状態に戻す」ことを提案します
何故かと言うと、買ったばかりのMacならともかく、長く使ってきてたくさんのOS(ヨセミテとかシエラとか)を乗り越えてきたMacにはいろいろなよくわからないファイルがたくさん残っていて、SSDの容量を圧迫しています
そのため、どうせならMacOSがモハベになったこの機会に購入時に戻す操作をすることをおすすめします

私はMacを初期状態へ戻すだけで20GB以上も容量を得ることができました

<Swiftをはじめるぞ その2Storyboardは紙芝居の道具だ>
Xcodeのインストールが済んだらXcodeを開きcreate a new Xcode projectを選びiosのsingleViewAppを選び次のページでプロジェクト名ファイルの場所などの必要事項を入力するといよいよプログラミングの世界の始まりです
swift5スタート画面singleviewAppを選ぶ2018年11月14日

左側のAppDelegate.swiftやViewController.swiftなどショートカットが並んでいる部分からMain,storyboardを選びます

 すると、こういう画面が出ます
swiftstoryboard2018年11月14日

まだなにもない真っ白な白紙状態で名前はViewといいます

じつはこのViewは横文字がついていますが実態は「パソコン上の画用紙」であり、Xcodeでは私達がプログラミングに関して考えているような難しいことは実は多くは簡略化されています
開発者をソフトウェアがサポートしてくれるため初心者でもXcodeの要点さえ知っていれば熟練者と同じように扱えるようになります

文字を表示したり画像を表示したりということも極端な話ドラッグアンドドロップである程度はできます

また、液晶ディスプレイを搭載しているiphone上で動くアプリを作るプログラミング言語のSwiftは、押しボタンと十字ボタンで操作していたゲームボーイやワンダースワン(古いな)ネオジオポケット(これも古いな)のような古い機械の物理的なボタンとちがい、タッチパネルの中にボタンの役目をもつ部品などを置いておくことで、いろいろな操作をすることができ、普段iphoneで使っているような決定ボタンや画面の明るさ調整のスライダーやブックマーク登録させるボタンやカメラを起動させるボタンなどをいろいろ取り付けることができます

◎Xcodeで画像を表示したい
Xcodeで画像を表示するには画像ファイルをxcodeのAssets.xcassetsというファイルにドラッグアンドドロップしていれて登録することでアプリで使用可能になります
登録した画像の使い方はMain.storyboardの画面の右上の○の中に□があるボタンを押し、UIImageViewという部品を選び、ドラッグアンドドロップでstoryboardの上に置きます、このUIImageViewの頭にあるUIはユーザーインタフェースという意味でアプリ用の部品という意味です(まあ厳密に知りたいならググって調べてw)
swift5 uiimageviewの使い方は

画像を使うにはXcode画面の右上のホームベース型のボタンを選び、imageViewの欄のImageをクリックし先程の画像のファイル名を選ぶと画像が表示されます
このホームベース型のボタンは設定画面のひとつです。

次に文字を置きます

◎文字を表示したい
プログラミングの本やネット上のページなどではプログラミングの初心者に"hello World!"を書けとありますがiphone用のプログラミング言語であるSwiftの場合は初心者でも簡単に文字を表示できます
それがUILabelです
単にこのUILabelを置くことで文字が表示できます

画面にUILabelの部品を置き、文字を編集することでアプリ上に文字を表示する用意ができます

UILabelSwift52018年11月14日

少し見づらい場合は先程のホームベース型のボタンを押し、Viewの画面色を変更しましょう、左側のViewを押してからホームベース型のボタンを押し、Backgroundの欄を選ぶことで色が変更でき、ポップアップした選択欄の中のCustomを選ぶことでいろいろないろから選ぶことができます
黒、目に優しい緑からエロいピンクに高貴な紫、キチガイイエローまでいろいろです

 <変数とか定数とかどうでもいい最初に重要なのはプロパティだ>

Swiftを学ぼうとすると定数はとか変数はとかletとかvarとかfuncとはというふうに書いてあるのをよく見ます
いろいろなページで見る変数は中身が変えられる箱だよとかそういう情報は実は初心者には無意味な情報です

むしろ初心者が知りたいのはどうやってswiftの部品を使いこなすか?ということです


iphoneのアプリを作るソフトウェアであるXcodeとそのプログラミング言語であるSwiftは初心者に優しいのは「部品の使い方を知る」ということがそのまま上達につながるところです

部品の使い方をおぼえることで複雑なアプリを作ることができます

そこで重要なのがプロパティです

Swiftでは、UI部品をViewというパソコン上の画用紙に置くとプロパティという設定をいくつかすることで、その部品を使えるようにし、してほしい処理を指示することができます

ですから、SwiftでUI部品を使うときは部品のプロパティを検索するとSwiftの知識が高まりすばやく上達できます

ですから、「文字の色を変えるプロパティ」とか、「フォントを指定するプロパティ」というふうに検索すると上達できます

つまりSwiftでは部品を置き、プロパティで部品の色形を設定し、処理を書き込むことでアプリを動かしていきます

<さあそろそろ始まるぞい>

さあ、つぎはUI部品の中からこんどはUItextFieldを選んで2個置きます今回は2つのUItextFieldの数字を足し算で足して答えを表示するというアプリを作ります
数字を入力するのがUItextFieldで、表示(出力)するのがUILabelという部品です
始める前にUItextFieldに入力した数字はコンピューターの中で計算(処理)されてUILabelとういう部品に表示(出力)されるという順番を覚えておいてください

それではUItextFieldを二個置いてUILabelをひとつViewの上においてください

そして答えの部分のUILabelのBackgroundの色を変更して見やすくしましょう

Swift52つのUITextFieldの数字を足して1つのUILabelに表示2018年11月14日



できましたか?

<デリゲート(Delegate)とアウトレット(Outlet)を接続しよう>
UItextFieldに入力された数字を計算するにはデリゲート接続する必要があります
まずclass ViewController: UIViewController {の中にtextFieldのデリゲートを書き込みます

class ViewController: UIViewController,UITextFieldDelegate {


デリゲート接続は一体何かというと人間側の入力をアプリの命令書であるコード上に持っていき処理にかけてとコンピューターに処理を依頼する命令の接続です
ここでの注意点としては処理を依頼する命令の接続であり、デリゲートじたいは命令の中身でもなければ命令のそのものでもありません単に接続であり、右から左へ受け流すだけです。
そのため、デリゲートはデータをアプリ上で打ち込むUItextFieldからは接続できてもコード側から表示部であるtextLabelにデータを送る用には設定できません
そのためデリゲートはUItextFieldにだけ必要でUILabelには必要ではありません

デリゲートの接続は、UItextFieldを選択しクリックしドラッグしながらview上部のview controllerまで持っていき出てきた選択肢のdelegateを押すと接続されます

そしてアウトレットは何かというと紙芝居であるviewの上に置かれたUI部品をコンピューターの指示書であるコードとつなぐというものでアウトレットという単語は英語ではコンセントやソケットという意味がありますつまりアウトレットとはスーパーファミコンで言えば赤白黄色のRCA端子をテレビと繋ぎコントローラーをスーパーファミコン本体とつなぐようなもので、UI部品をプログラミングのコードとつなぎ入力用の部品(ボタン・テキストフィールド)と出力用の部品(ImageView・textLabel)をそれぞれつなぐようなものなのです



アウトレット接続はUI部品をドラッグしながらコード上に線を引っ張っていくと接続でき、接続名をつかってプログラムのコードを書きます(ですから複雑なアプリの場合名前を適当に名付けないように)

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}
の後ろにUItextFieldとUILabelをアウトレット接続しましょう

UItextFieldSwift実際


<プロパティを設定しましょう>
UI部品をStoryboard上のviewに置いて、アウトレットとデリゲートの接続を済ましたらいよいよキーボードをまともに使うタイミングです

デリゲート接続とアウトレット接続が済んだのでいまやStoryboard上のviewに置かれたUI部品はプログラムのコードを書くことで動かすことができます

詳しくは「プロパティ 〇〇(UI部品) Swift」で検索してもらうとして、必須の項目のプロパティで足し算の答えをラベルに表示させましょう

必要なのは

1.プレースホルダー
2.デリゲート
3.addSubview


です

他にもプロパティはありますがこれは必須です

処理は

override func viewDidLoad() {
super.viewDidLoad()

}

の項目の中に書き込みます

プレースホルダーは初期の表示内容で”を2つ使って囲むことで文字を表示することができます

書き方はアウトレット接続の名前を使い以下のように書きます

〇〇〇(アウトレット接続の名前).text = "なんでも"

次にデリゲートは以下のように書きます

〇〇〇(アウトレット接続の名前).delegate = self

デリゲートは人間の入力をプログラムのコードに送る方向なのでUILabelにはありません

次のaddSubviewは部品をタッチパネル上でタッチしたときに反応させるというもので、このaddSubviewによってキーボードやボタンを呼び出します

addSubviewは以下のように書きます


self.view.addSubview(A1)


するとこうなります

swift4平成30年11月15日足し算

<処理を書いて足し算を完成させろ>

あとは処理を書いて足し算を完成させます
今回はguard文を使います、詳しくはググって調べたほうがわかりやすいのでそちらに任せます

今回の処理内容はざっくりいうとtextFieldに入力された文を整数かチェックしてから計算するというものです

func textFieldDidEndEditing(_ textField: UITextField) {
print("textFieldDidEndEditing: \(A1.text!)")
guard let A2Num = Int(A2.text!) else {
return
}

guard letA1Num = Int(A1.text!) else {
return
}


注意:円マークはバックスラッシュです

textFieldDidEndEditingという処理は編集が終わったらというものです

textFieldの編集が終わりしだい、入力された文章は整数に変更されています


answ.text = String(rightNum + leftNum)

最後にこの一列を取り付けることで足し算の処理を行います

これで足し算をするプログラムが完成しました

▶ボタンを押しシミュレーターを起動すると実際に試すことができます
2つのtextFieldに数字を入力しもう片方を触れると計算結果がUILabel部分に表示されます

より複雑な計算をする場合もUItextField、アウトレット接続、デリゲート接続、3つのプロパティ(プレースホルダー・デリゲート・アドサブビュー)と、ガード文の追加、計算記号の変更をすることで計算できます


参考にしていただければ幸いです


              にほんブログ村 株ブログ 米国株へ
にほんブログ村

ブログを続けるテンションをくださいクリック投票とブックマークお願いします(´・ω・`)ノシ


関連記事
スポンサーサイト



コメント


管理者にだけ表示を許可する
 

 

トラックバック