Life-LOG OtherSide

  

今日でMy Third Projectの勉強は終わった。

今回は長かった。一月もかかったのに完全理解はできていない悲しい状況ではある。

まあゆっくり進めていくか。

皆さん!　はてなに来て、来て〜!
Swiftで遊ぼう! on Hatena
http://yataiblue.hatenablog.com  

ここ、あしたさぬきでSwiftプログラミングの勉強の記録をつけていたが、プログラムコードの扱いがよくわからないのでプログラマも使っているHatenaブログに移行していくよ。

Swiftで遊ぼう! on Hatena

しばらく記事はパラレルに記載していく。  

こっそりHatenaブログ移行を検討中!->Swiftで遊ぼう！ on Hatena

そろそろセグメント・コントロールに機能を組み込んでいかなければならない。

まずアプリが立ち上がった時にボタンが隠れていないといけません。セグメント・コントロールの右のスイッチを押すと出現するようにする。

ボタンを選択して「Opt + Comd + 4」でアトリビュート・インスペクタを開こう。

ちょっと下の方へスクロールしてViewセクションにあるhiddenにチェックマークを入れよう。

するとIB上でボタンがトランスルーセント化する。

これで準備完了だ。ViewController.swiftに注目しよう。

まだコードを実装していない「toggleControls」メソッドがあるだろう。それに次のコードを組み込む。

@IBAction func toggleControls(sender: UISegmentedControl) {
if sender.selectedSegmentIndex == 0 {
leftSwitch.hidden = false
rightSwitch.hidden = false
doSomethingButton.hidden = true
} else {
leftSwitch.hidden = true
rightSwitch.hidden = true
doSomethingButton.hidden = false
}
}

よし、これでセグメント・コントロールは動くようになるだろう。

テストランする前にちょっとカラーの調整をする。

「Life-LOG Software」のロゴは黄色だけど、バックグラウンドは白いので同じ黄色に調整しよう。

まず「Document Outline」から「Control」を選択すれば、アプリのバックグラウンドが選択されるだろう。

覚えているかな?　普通ならコンテンツのバックグラウンドはViewですが、バックグラウンドにレスポンスを実装するためにUIContorolに変更しましたね。

次にアトリビュート・インスペクタを開いて、「Background」から「Other...」を選べば、カラーピッカーが出てくる。

虫眼鏡でロゴの黄色を選んでやり、Appleカラーに切り替えると同じ色が選択される。

さあ、ランしよう。

さあ、セグメント・コントロールがちゃんと動くかな?

次は実装されていないボタンに取り組もう。

今日はここまで。  

こっそりHatenaブログ移行を検討中!->Swiftで遊ぼう！ on Hatena

ちょこちょこアップしてなんとか余裕を持たないと毎日の継続性が途切れてしまう。

今日の記事も短いのでご了承下さいm(_ _)m

昨日までにStretchable Buttonを作ったけど、UIButtonにはコントロール・ステートという状態を表すプロパティを持っている。

iOSのコントロールは次の４つの状態のどれか１つを必ず持つ。

Normal(ノーマル)：最も一般的な状態で、defaultステートと呼ばれていて、他の状態(ステート)で無いときに入るデフォルトの状態。

Highlighted(ハイライト)：コントロールが使用されている時に入る状態だ。ボタンの場合、ボタン上に指を置いた時に入っている。

Disabled(無効)：コントロールの機能がオフになっている時に入る状態。

Selected(選択)：選択状態というのは特殊なコントロールだけに備わっている。選択された状態で常にオンに入った状態で、ユーザーが再びコントロールを選ばない限りこの選択状態は続く。

UIControlStateNormalとUIControlStateHiglightedで異なるイメージを持って、状態が変わることでイメージを切り替わっていく。

今日はここまで。  

何をしているのやら。延々と続くUIVewControllerの説明。

次はボタンを配置していく。セグメント・コントロールでスイッチからボタンに切り替える仕組みではあるが、開発中はスイッチとボタンは重なっている。

まずオブジェクト・ライブラリからボタンを選んでスイッチの間に設置しよう。

まず左のスイッチの上に設置するけど、ちゃんとブルーのガイドラインに従う。

次にボタンの右辺のリサイズ・ハンドルを使って右マージンのブルーガイドラインが出現するまで引き延ばす。

ボタンをダブルクリックして名前を「何かしよう！」と日本語タイプしてみるといい。

次の手順は、もうお馴染みのコンストレイントの設定だ。

ボタンを選んでちょっと情報に向かってControl + ドラッグして背景がブルーになったらリリースしよう。

ポップアップウインドウが出現するので、垂直方向(Y軸)のルールとして、「Top Apace to Top Layout Guide」を選ぶ。

次はボタンを水平方向左に向かってControl + ドラッグして背景をブルーにさせてリリースさせる。

ポップアップメニューから「Leading Space to Container Margin」を選ぶ。

次は右の方に動かして「Trailing Space to Container Margin」を選べば終了。

今日はここまでではない。

今設置したボタンは非常にシンプルで、iOS7から導入されているフラットデザインが基調になっているからだ。

しかし、ちょっと昔風の立体感のあるカスタムデザインを使用したかったらどうする？

サイズが「29ピクセル×46ピクセル」のグラデーションのついたボタンを用意しよう。白いボタンと葵ボタンの最低2つは用意する必要がある。

しかしながら、しかし、サイズに関するルールをまだ知らない。今後の課題！

UIButtonはいくつかのState(状態)が用意されている。

少なくとも何もしていないデフォルトのStateとボタンが押されてハイライトのStateを2つ用意するためだ。

このPNGピクチャをImages.xcassetsに放り込もう！

「×1」のスロットだけが埋まるだろう。

じゃあ異なるサイズを作っていくのかと言えば...

ここでストレッチャブル・イメージ(Stretchable Images)という機能が使えるので、Xcodeでそれを利用していく。

whiteButtonだけを選ぼう。画面の一番下に「Show Slicing」が出ているので選択しよう。

するとスライシングが使えるようになるので、「Start Slicing」を押そう。

次に3つのボタンが出てくるだろう。スライスの方向を垂直、水平、その両方から選べる。

ここで真ん中の垂直、水平両方のスライシングボタンを押すと、自動的にスライス位置を決めてボタンイメージが分割される。

同じようにblueButtonも分割しておこう。

次はsortyboardに戻る。先ほどのボタンを選んだ状態で「Opt + Comd + 4」を押してアトリビュート・インスペクタを開く。

1番上の属性、TypeのSysytemをCustomに変更。

State ConfigはDefaultになっていることを確認してから、Backgroundのポップアップから「whiteButton」を選ぶ。

次はState CongifをHighlightedに切り替えてから、Backgroundを「blueButton」にする。

ほらボタンが出てきた!　でも黄色い枠が出てるよね。これはコンストレイントの警告だ。上下の高さが足りないからだ。ちょっと調整してやる必要がある。

Editor > Resolve Auto Layout Issues > Update Framesを選ぶ。

これでストレッチボタンを設置することができました。今日はここまで。  

ブログアップに余裕が無くなっている。

１週間ぐらいの書き溜めをするために短い記事を書いているのでご了承下さい。

Viewのオブジェクトにインタラクティブな機能を付けるためにViewControllerに繋げていなきゃいけない。

switchChanged()メソッドをコードしよう。

@IBAction func switchChanged(sender: UISwitch) {
let setting = sender.on
leftSwitch.setOn(setting, animated: true)
rightSwitch.setOn(setting, animated: true)
}

UISwitchクラスは当然、UIControlから継承されている。

プロパティに「on」があり、これはboolean型なんで、trueかfalseを保持する。

そのboolean型をsettingという変数で持たせる。

そしてsetOnはメソッドになる。リファレンスを見ると

func setOn(_ on: Bool, animated animated: Bool)となっている。

引数は2つあり、最初はonをパラメーター名無しで渡すので、プロパティonで作った定数settingをそのまま渡している。でも、この値はtrueなのか、falseなのかどうやって判断すればいいのだろう？　animatedパラメーターもboolean型であるが、これはパラメーター名を付けて渡さないといけない。直接trueを渡しているね。

今日はここまで。  

インフルエンザが大流行中でSwiftの勉強をする時間が取れなくなってますm(_ _)m

まあ、ちょっとずつなんとかしていきます。

左右に設置したスイッチのアウトレットを作ろう。

左のスイッチをControl + ドラッグしてViewController.swiftの中でリリースして、Outlet名前を「leftSwitch」、そして右のスイッチを「rightSwitch」にしよう。

また同じように左のスイッチをControl + ドラッグしてActionを作ろう。

Actionの時は関数なんで、関数はswitchChanged()としよう。

sender引数は、UISwitchにする。

次は右スイッチのアクションですが、左と同じなんで、Control + ドラッグして同じswitchChanged()でリリースするといい。

次は、セグメント・コントロールだが、同じようにControl + ドラッグしてswitchChanged()メソッドの下でリリースしてtoggleControls()を作る。

sender引数はUISegmentedControlだ。

これでいいだろう。終わり。  

ちんたらちんたら進んでますよね。

めちゃ遅いのは理由があり、インフルエンザ流行のため仕事が忙しくて勉強する時間がまとめて取れないんです(T_T)

少し勉強したことを細切れにしてアップしている状況です(^_^;)

まあそれでも少しずつ着実に進めていくのでよろしく！

セグメント・コントロールで切り替えるボタンを設置する前にスイッチに息を吹き込まなければ(コネクションを作ることですよ)ならない。

ボタンを設置してしまうとスイッチが下に隠れてしまうので後で編集がしにくくなるからだ。

スイッチのコネクションは今までと少し異なる。OutletとActionの両方を実装してやらないといけない。

アシスタント・エディタを開こう。

とはいうものの、今日は時間が無くてここまで。申し訳ないm(_ _)m  

ストーリーボードとソースコードを行ったり来たりする開発スタイルが一般的のようだ。

再びストーリーボードに戻って、セグメント・コントロールの設定に入ろう。

オブジェクトライブラリーから「Swgmented Control」を選んで、スライダーの下に設置しよう！


まずスイッチのオン・オフを実現さえる。

セグメント・コントロールの右側をタップすると画面が切り替わってボタンが出現するようにする予定だ。

セグメント・コントロールのFirstをダブルクリックして名前を「Switches」に変更する。

次にSecondを「Button」に切りかえる。

当然、名前を変えると位置がズレるのでセンターに合わせよう。

次にスイッチをオブジェクトライブラリから選ぼう。

もう設置は慣れたよね。セグメント・コントロールの下の左右のマージンをとって設置する。


ここまでの作業を慣れたものだろう。3つの新しいオブジェクトをViewControllerに設置した。

次は、コンストレイントだ。

今までオートでコンストレイントを設定していたが、マニュアルで設定をしてみよう。

まず、セグメント・コントロールの設置を考える。

コンストレイントは、水平線上(X軸)のルールと垂直線上(Y軸)のルールを競ってしてやる必要がある。

水平線上のルールは、「ちょうど中央に位置する」というルールでいいだろう。

セグメント・コントロールを選んだ状態で、Editor > Align > Horizontal Center in Containerを選んでやる。

次は垂直方向のルールを決めるのだが、メニュー以外の方法を説明しよう。

1) Segmented Controlをマウスで選択する。

2) Control + ドラッグを少しだけ上にしてやるとメインビューの背景が青く変わる。

3) そこでマウスを放してやるとポップアップメニューが出現する。


4) メニューから「Top Space to Top Layout Guide」を選べば、メインビューの上辺からの距離を修正する(垂直方向のルール)。

これでセグメント・コントロールのコンストレイントが決定できた。

次にスイッチのコンストレイントを設定していこう。

左のスイッチを選択して、Control + ドラッグで、左上方(10時の方向)に少し動かしてビューの背景が青くなったらリリースするとポップアップメニューが出現する。

今度は水平と垂直の両方のルールを同時に設定する。

シフトキーを押したまま「Leading Space to Container Margin(表示エリアの左端マージンを設定)」と「Top Space to Top Layout Guide(上端のレイアウトに合わせて上端のスペースを設定)」を選べばいい。

次は右のスイッチを選択して、右上方(2時の方向)に少しControl + ドラッグしてやってポップアップメニューを出現させる。

同じようにシフトキーを押したまま「Trailing Space to Container Margin(表示アリアの右端マージンの設定)」と「Top Space to Top Layout Guide」を選ぶ。

これでマニュアル的にコンストレイントの設定ができたので今日は終わり。  

スライダーのアクションメソッドを以下のようにしました。

@IBAction func sliderChanged(sender: UISlider) {
let progress = lroundf(sender.value)
sliderLabel.text = "\(progress)"
}

じつはこれでスライダーをタッチした時に呼ばれてフィールドの表示が変わる。

しかしスライダーに触る前の値を設定しておかないと表示されないので

override func viewDidLoad() {
super.viewDidLoad()

sliderLabel.text = "50"
}

こうしておこう。

じゃあラン(Cmd + R)してみよう。

見事にスライダーに合わせてラベルの数字が変わるだろう。

しかし、よく見ると、10以下の数字や100になった時にスライダーのラインの長さが変わるだろう。

これはAuto Layoutの不完全性を表している。

じゃあどうすればいいかと言えば、Editor > Pin > Widthを選べばいいだろう。

こうしてやると幅が動かなくなるだろう。

今日はこれでおしまい。
  

素人が1番分かりにくいのが標準ライブラリや計算のために用意されているライブラリをさりげなく使っている時だ。

今日の話題の「lroudf」というのも最初は何のことかさっぱり分からなかった。

どうやって調べるかと言えば、Xcondeのメニュー、Helpから「Documentation and API Reference」を選ぼう。

簡単に「lroundf」をタイプすると、数々の「Round」に関する情報が出てくる。

round、lround、llroundなんて並んでいる。

いろいろある中でFloat型をとるやつをみると

roundf

lroundf

llroundf

この3つですね。

playgroundで「var numberf: Float = 3.4」にしてみると

numberfには「3.40000009536743」が入っている。

しかし、println("\(numberf)")としてやると、コンソールに「3.4」になっているのも不思議

var changenumber = roundf(numberf)としたら

changenumberは「3.0」になってprintln("\(changenumber)")も「3.0」

これがvar change2number = lroundf(numberf)にすると

change2numberは「3」だ。だからprintln("\(change2number)")も「3」

var change3number = llroundf(numberf)も

change3numberも同じように「3」だ。そしてprintln("\(change3number)")は「3」だ。

この関係をなんとなく覚えておこう。

じゃあ今日はここまで。  

さあ、スライダーとラベルを繋げる作業をしていきますよ。

スライダーを動かすと、Actionが生じてラベルにOutletさせればいいんですよね。

じゃあAssistant Editorを開いて、スライダーを「Control + ドラッグ」してViewController.swiftにあるbackgroudTap()の下でリリースしよう。

ダイアログが出現するのでConnectionを「Action」に変更、Nameを「sliderChanged」、そしてTypeを「UISlider」に変更してコネクションさせる。


次はラベルを「Control + ドラッグ」してnumberFieldの下でリリースして、ダイアログのNameに「sliderLabel」と入力してコネクションさせる。


これで用意ができたので新しく作ったメソッドを実装させていこう。

@IBAction func sliderChanged(sender: UISlider) {
let progress = lroundf(sender.value)
sliderLabel.text = "\(progress)"
}

この中で聞き慣れない「lroundf」が出てきた。

まず、UISliderのプロパティでああるvalueですが、これはfloat型だ。

Floating-Point Numberって何だったか復習をしておかないといけない。直ぐ忘れるんですオヤジ頭は(T_T)

基本的にプログラミングで使う数字の型は、「Int」「Double」「Float」を理解していたらいいのだろうか？

私が勘違いしていたのはDoubleよりFloatが正確なような気になっていましたが、逆でした(^_^;)

Doubleは64ビットフローティングナンバーでFloatは32ビットフローティングナンバーでした。

さあ、数字を扱う場合、型が違うと扱えないのがプログラミング。

型を一致させる方法がキャスティングということだろう。

ちょっとこの話は明日しよう。  

ラベルとスライダーの2つのオブジェクトを加えたためAuto Layoutが崩れている。

すべてのオブジェクトにコンストレイントが競ってされていないとコンパイル時にエラーが生じるので、ランをする前にコンストレイントを設定する。

オブジェクト毎にコンストレイントを設定してやるのもいいけど、1番手っ取り早いのが、Document OutlineでView Controllerを選択して、メニューからEditor > Rsxolve Auto Layout Issues > Add Missing Constraintsを選ぼう。

たったこれだけでいい。

でも、テキストフィールドとラベルの位置も少し下にずらしているので、コンストレイントは崩れたままで警告の黄色いランが出ているだろう。

これを修正するのも簡単。

View Controllerを選択してメニューからEditor > Eisolve Auto Layout Issues > Update Constraintsを選ぶといい。

すると黄色いラインは消えているだろう。

今日はここまで。  

次はスライダーを組み込んで行く。

もう慣れたもんだろう。「Cont + Opt + Cmd + 3」でオブジェクト・ライブラリーを開こう。

Sliderを選んで、numberFieldの下、右隅に設置しましょう。ブルラインが出るところです。

重要なのはアトリビュート・インスペクタ「Opt + Cmd + 4」で設定しなければならないところが数カ所。

Minimum値を「1」にする。

Maximum値を「100」にする。

Current値を「50」にする。

Events Continuous Updateにチェックを入れる。

次にオブジェクト・ライブラリからラベルを選んでブルーラインを意識してスライダーの左の画面の旗に設置する。


ラベルをダブルクリックして「100」にする。0から100の中で1番幅が広い値だからだ。これでレイアウトを決めていく。

そしてレイアウトの調整をするためにラベルを選択したままメニューの「Editor > Size to Fit Content」(Cmd + =)をしよう。

次にスライダーを選択してリサイズボタンの左辺を選んでラベルの横のブルーラインが出現するまで広げる。

今日はここまで。

  

やっとText FieldとViewControllerの関連付け(紐づけ？)に入る。

今までに設置したImageViewとLabelはインタラクティブな挙動をしないのでそのままMain.storyboard上でインスタンス化していればいいだろう。

しかしText Fieldは違いますよね。

テキストフィールドがクリックされると反応してキーボードが出現してキーボードの入力に対して表示をするので、ViewControllerとコネクションがないと実現できない。

ということでUITextFieldをViewControllerのプロパティとして保持させなければならない。

これは前回のプロジェクトと同様です。

上にあるTextFieldを「Control + ドラッグ」してViewControllerの「{}」内に入れてリリースするとダイアログが現れてる。

名前に「nameField」と入れて、outletを選択しておこう。

同じように下のTexfFieldには「numberField」と名前を付けよう。

ここまでの作業に詳しい説明はいらないと思う。

以前説明したようにすれば、次の2行が追加されているだろう。

@IBOutlet var nameField: UITextField!
@IBOutlet var numberField: UITextField!

実は、インターフェイスビルダーの凄いところは、「Comd + R」でシュミレータをランしてみれば分かる。

フィールドをクリックするとキーボードが出現するだろう！　凄いと思いませんか？

注：もしキーボードが出現しなかったらシュミレーターのメニューから「Hardware > Keyboard > Toggle Softeare Keyboard」を選択すること！

しかし、問題点もある。一度出現したキーボードは消えないんですよね。

キーボードの「Done」をクリックしたらキーボードが引っ込むように機能を実装しようと思う。

しかし、どうすればいいと思います？

キーボードの「Done」を押すと、event(イベント)が発生するんですよ。

「Did End On Exit」が発生するから、これとキーボードが引っ込む動作を関連付け(紐づけ)る。

キーボードが引っ込む動作は次の関数で再現します。

@IBAction func textFieldDoneEditing(sender: UITextField) {
sender.resignFirstResponder()
}

さあ耳慣れないメソッド「resignFirstResponder()」が出てきました。

これはUITextFieldのメソッドですが、親クラスの「UIResponder」のメソッドを継承していることになるんです。

クラスの関係が理解できていないので少しずつ紐解いていきます。

クラスの関係は：NSObject > UIResponder > UIView > UIControl > UITestField、ってとこでしょう。

じゃあこのresignFirstResponder()は何をするかというと、ウインドウ内の最初の反応を受けると状態を停止させることを受け手に送る(boolean値のtrue)。

ちょっと分かりにくいのですが、この関数が呼ばれたらその状態(キーボードが出現)を停止させTrueを返すということかな？

受ける側のキーボードのコードがどうなのかまだ分からないので、これは今後の課題ですね。

では、この関数とイベントを関連付けましょう。

この関連付けも色々なやり方があるんですが、今回はコネクション・インスペクタを使った関連づけをしてみましょう。

まず、nameFieldのフィールドを選択した状態でコネクション・インスペクタを開いてください。

フィールドから発せられるイベントやメソッドが色々あります。その中でSent Eventsの一番上に「Did End On Exit」がありました。

これがキーボードの「Done」を押すと発生するイベントですね。

じゃあドキュメント・アウトラインを開いてください。

Main.storyboardの左下にあるこのアイコンをクリックすると出てきます

先ほどのDid End On Exitの右横の○をドキュメント・アウトラインにある「View Controller」上にドラッグする。


そしてリリースすると関連づけされていないメソッドがダイアログ表示されるだろう。


このtextFieldDoneEditin()メソッドを選択してやれば関連付け成功です。
コネクション・インスペクタにちゃんと表示されています。


じゃあ「Comd + R」してください。

今度は「Done」を押すとキーボードが消えるだろう。

あれ、ナンバーパッドには「Done」キーがないね。

じゃあどうしたらいいのか、また明日！  

IB(インターフェイスビルダー)にViewを加えてもXcodeは自動的にコンストレイントを加えてくれる訳ではない。

しかしながら、アプリが完成したときにレイアウトシステムはコンストレイントの完全なセットを必要とする。

Xcodeはデフォルトでいくつかのコンストレイントのセットを持っている。

左右の端に近ければマージンの位置でコンストレイントを加えたり、中心に近ければ中心に位置づける(Pin)など自動的にコンストレイントを新しいオブジェクトに加えることができるが、この自動機能もプログラマが望むように動いてくれないことが多い。

複雑なコンストレイントの説明は今後プロジェクトを進める途中で説明するが、My Third Projectでは、少しばかり遊んでみよう。

先ほど属性を変えていたテキストフィールドをシングルクリックして選択して、Size Inspector(ショートカット)を開こう。

コンストレイントには何も設定がされていない。


そりゃ当然ですよね。先ほど説明したようにオブジェクトがViewに追加されても自動的にコンストレイントは設定されない。

では、イメージビューならどうだろう?

ロゴとして設置したイメージビューをクリックしてみるといい。

これには既に「水平上の中点」というコンストレイントを設定してあるので、そのルールがサイズ・インスペクターで確認できるだろう。


当然のようにコンストレイントの設定は中途半端なままなので、このままではコンパイルできない。

取りあえず全てのコンストレイントを設定しないとアプリをコンパイルできなので自動でルールを与えよう。

Viewの中の左上の隅からドラッグして左下の隅に動かしてみよう。

View上のオブジェクトがすべて選択されるだろう。

そこでメニューの「Editor -> Resolve Auto Layout Issues -> As Missing Constraints(選択でも全部でもどちらでもいい)」を選べば一気にコンストレイントが競ってされる。

今までオレンジ色の警告が出ていたけどそれもすべて消えているだろう。


今日はここまで。  

まず最初に一言。

Merry Christmas!!!

今日はクリスマスですが私は普通に仕事で、仕事の合間にプログラミングの勉強してます。皆さんも冬期休暇をどのようにお過ごしでしょうか? 私は仕事柄休みはあまり長くありません。休みになっても子供達の相手をしなければいけないのでプログラミングの勉強も中断がちになるんですよね。さあこれからどうなるやら。

じゃあ早速今日の話題に入りましょう。

UIImageViewのアトリビューションの説明をしておこう。Image Viewセクションの下にViewセクションがある。このアトリビュート・インスペクタですが、上の方にある設定はより一般的な設定になり、オブジェクトの親クラスの設定が含まれる。UIImageViewの親クラスはUIViewになるんで、単純にViewとラベルされている。

「Mode」は、モードのポップアップメニューがある。ここではコンテンツの振る舞いを規定する。今はどの設定を選んでも変化が無いと思う。というのは、設定したViewサイズとコンテンツとなるイメージのサイズが同じになっているからだ。もしイメージのサイズが異なれば、モードの設定でイメージのサイズが変化するだろう。しかし、覚えておかなければならないことがあります。サイズを変化させるということはランタイム時にプロセッサー能力を使用してしまうということ。サイズを変化させる明確な理由がないのであれば、Viewサイズと同じ大きさのイメージサイズを用意するというのが好ましい。これはHIG(ガイドライン)で規定されている。

「Tag」は識別番号みたいなものだ。My Second Projectで作った「Right」と「Left」のボタンを覚えているかな？それぞれのボタンを識別させるのに、ボタンのNameを使ったけど、ローカライズして日本語の「右」「左」にすると識別できなくなります。変化しない識別子として使うのがタグですね。

「Intereaction」チェックボックスは、ユーザーからのActionメソッドを作動させるためにチェックしなければならないが、情報に変化のない静止イメージの場合はチェックしないで置いておこう。

「Alpha」はイメージの透過度ですね。これもモードと同様に透過させるとプロセッサパワーを使います。理由がなければ使わない方がいいでしょう。

「Background」とは背景の設定ですが、イメージのサイズとViewのサイズが同じなら設定する必要はありません。

「Tint」は、選択されたViewの色をぼかすのですが、UIImageViewでは必要ありませんね。

「Drawing」チェックボックスにある「Opaque」は不透過の設定であり、さきほど説明したAlphaと関連するところだ。Alphaで透過性が与えられていないとバックグラウンドに何も無くていい訳で、Opaaqueの設定をオンにしてやりバック無しにすると描画がスピードアップする。「Hidden」は名前のとおり見えなくするので時と場合により有用ですね。「Clears Graphics Context」なんて必要なことはほとんど無い！なのに私はチェックが入っています(^_^;)　これにチェックが入っているとオブジェクトを描出するときに透過した黒色を塗り込むようだが、プロセッサパワーの無駄遣いですね。チェックを外しましょう。「Clip Subviews」の説明を吟味するのに疲れたので、今日はパスm(_ _)m　次の「Autoresize Subviews」もよく分からん。サブビューって何？　そして「Stretching」はイメージのサイズが変化するとき四隅だけ比率が変わらないようにする設定ですね。

とまあ、今日は説明だけで終了。  

Swiftで遊ぼう！ - 154 - アプリを作ろう - 3 Outlet　のコメントに対する考察

柔軟性を失ったオヤジの理解力では間違いや思い込みが甚だしい。理解したと思っていたことでも勘違いしていることもある。

「Swiftで遊ぼう!」シリーズ初期の頃からアドバイスをくださるNao大先生(←勝手に大先生と呼んでます)からプロパティに関する間違った認識を指摘されました。こういうツッコミが入ると本当に助かります。復習するチャンスってことですよね。

ということでプロパティの勉強をもう一度やり直します。ここのブログでプロパティの項目を探してみましたが、中途半端な説明しか無かったですね。

Swiftで遊ぼう！ - 5 なんだなんだLazy?
Swiftで遊ぼう！ - 6 セッター、ゲッター、何のコッチャー

じゃあ、今回は正本The Swift Programming Language本のプロパティ(Properties)セクションを精読していこう。

じゃあ始めるよ。

「Propeties associate values with a particular class, structure, or enumeration.」

この冒頭の文章を読んで、「あっ！Naoさんの言ってることだ」と、ピーンと感じました。このセンテンスが、「Properties are values with a particular class, sturucture, or enumaeration」ではなく、「associate(関連付ける)」を使っているところがミソでしたね。プロパティが値じゃないんですね。

Naoさんの仰っていた次の通りだと思う。

プロパティとは、変数の一種と思っていただいたほうが良いと思います。普通の変数と異なるのは、読み書きの時に、その値を直接読み書きするのではなく、内部的にメソッド(関数)を利用するという点です。「内部的に」とは、プログラム上は普通に変数を読み書きしているように見えるけど、コンパイラが自動的にメソッドを作ってそれをアクセスしているという意味です。

しかし、もう少しツッコんで理解しなければならないのが、Naoさんの次の言葉だろう。

なぜこのような仕組みになっているのかというと、オブジェクト指向プログラミングの歴史を勉強していただけるとわかると思います。

Naoさんの言うとおり、OOPのプログラミング技法に行きついた理由を理解するために過去から脈々と続くプログラミング技法の変化の歴史を知る必要がある。数々の制限(限られたメモリやプロセッサー能力)がある環境で工夫されてきた技法は、裏を返せば簡単に変わらないとも言える。今のように制限が解き放たてきていてもOOPはしばらくプログラミング技法の中心に鎮座し続けるだろう。関数型プログラミング(私はまだよく分かってないけど)へ変化し始めている中、最もモダンと形容されるSwiftでさえも、旧来のやり方を踏襲しながら新しい概念を取り入れている訳で、新旧混在する今の状況はしばらく続くでしょう。

ということで、正本The Swift Programming Language本を精読して、古い概念と新しい概念の混在も見極めないといけないんでしょうね。特に私のようにObject-Cを全く知らない素人でありながら独学でプログラミングを勉強している人にとって

Swiftで使われているプロパティを考えてみよう。

1) Stored Properties(保持型プロパティ)
- Lazy Stored Properties
2) Computed Properties(計算型プロパティ)
- set, get：セッターを省略すると、自動的に「newValue」が利用される。
- Read-Only Computed Properties
3) Property Observers
- willSet, didSet：willSetは値を保持しないのでコンスタント値のパラメーターを()を使って与えないといけない。何も書かなかったら「newValue」が利用される。 didSetも同様ですが、何も書かなかったら「oldValue」が利用される。プロパティの初期化の時には呼ばれないけど、それ以外でプロパティに値がセットされた時(同じ値としても)に必ず呼ばれる。
4) Type Properties
- static var, class var

この4つの項目にプロパティが使われていて説明があるけど、Object-Cの経験者が知っておくべき説明文があった「Stored Properties and Instance Variables」というセクションだけど、ここを精読しておこう。

Object-Cの経験者だったら、クラス・インスタンスの一部としての値とリファレンス値を保持をする2通りの方法を知っているだろう。プロパティ以外にも、プロパティの値を保持する補助的保持にインスタンス・バリアブルを使うことができる。Swift言語ではこれらを統合して単一プロパティ宣言にした。Swiftのプロパティにはインスタンス・バリアブルと同等のものを持っていないし、プロパティの補助的保持値にアクセスすることはできない。これは様々な状況下で値にアクセスしていた混乱性を避け、プロパティの宣言をたった1つの完全なステートメントの中でさせる単純化を試みている。全ての情報、名前、型、メモリーマネージメント、そして特質?(Characteristcics)まで含めた全てのプロパティ情報を型定義の一部分として1箇所で定義させている。

まず、Stored Propertiesであるが、クラスと構造体(Structure)のインスタンスの一部として、変数(var)もしくは定数(let)の値を保持することができる。クラスでもStructureでもインスタンス生成時、初期化ステップにおいて値を保持させる。しかし、宣言していても初期化ステップで値を保持させなかった場合はコンパイルエラーに陥る。Swiftでは、それを避けるためにオプショナル値を設定するか、Lazy Stored Propertiesにしなければならないということかな。

私が勘違いしていたのは、プロパティにしろクラスにしろ「宣言」と「インスタンス生成」を混同してしまっていたのでNaoさんに誤解を与えていたと思う。

Swiftで遊ぼう！ - 154 - アプリを作ろう - 3 Outletの冒頭で、「クラスインスタンスではなくプロパティなので注意しなければならない」と書いているが、これは間違いだ。クラスインスタンスが一部にプロパティを持つことができるので、クラスインスタンスとプロパティを同列に語ることはできないね。

var someButton: UIButton!

Naoさんの仰るように、この宣言文だけでクラスのオブジェクト(インスタンス)を生成しているというのは間違いである。これはあくまでもUIButtonクラスの変数someButtonを宣言だけで、実体の値は無い。実は、この宣言文だけみてプロパティかどうかも分からない。

class ViewController: UIViewController {

var someButton: UIButton!

}

上記のようになると、「var someButton: UIButton!」はUIButtonクラスの変数がプロパティとして宣言されるのでメモリーの確保はされるけど、まだ実体は無い状態です。viewControllerクラスのインスタンスが生成される時、初期化を通してsomeButtonに値が保持されるはずですが、初期終了時までに値が保持されなければ「nil」となるということです。

私の勘違いは、「宣言」と「インスタンス生成」を混同していたことと、また私は、インスタンスの一部になるメソッドもプロパティと思っていたので勘違いですね。

さて、まだ私は勘違いしているのでしょうか?

プロパティの話の続きは「初期化」でします。また後日アップ予定なのでお待ちを。  

前回まででイメージの準備はできているので、Main.storyboardに戻ってください。オブジェクトライブラリを選択するショートカットは?　そうですよね「control + option + command + 3」を選択してください。右下のオブジェクトライブラリになっているので、検索ボックスに「image」とタイプすれば、「Image View」が出てくるだろう。これをドラッグすると最初は横長長方形の形が出てくるけど、ストーリーボード上のViewに触れると背景一杯に拡大するだろう。これは正常は反応だ。最初に設定するイメージは背景にすることが多いからだ。取りあえずドロップしてイメージを確定してから周囲の側面を縮めていって元のイメージに近い大きさにしてください。言っとくけどサイズは適当に合わせればいい。後でイメージのサイズに調整するからだ。

できあがったイメージを中央情報に持っていくと、青いガイドラインが出てくるね。もう既に説明したけどHIGで規定された距離にあるということだ。


次にUIImageViewのオプションを見ていこう。オプションということはUIImageViewのプロパティってことですね。「option + command + 4」を選択しよう。もうこのショートカットもお馴染みになっているね。アトリビュートインスペクター、説明はいらないか。
ここでもっとも重要なのは1番上の「Image」だろう。ここをクリックしたらイメージアセットカタログに登録しているイメージが現れる。機能セットしたロゴが出てくるはずですよ。私の場合は、「Lifel_logo」という項目がありました。さあ選択するとどうなるでしょう。昨日作ったイメージが現れるでしょう。でも、「あれ?　なんか形がいびつだな」なんて思いませんか?　適当な大きさのUIImageViewを置いたからだ。Modeがデフォルトで「Scale to Fit」になっているので、イメージを自動で計算してImage Viewの大きさに変えてしまったからだ。この作業には処理する時間が必要になるのでアプリ作成の時に推奨されていない。ということでイメージのサイズに戻してやろう。

やり方は2つ!　イメージが選択されていることを確認してから、「command + =」←わかりにくい書き方ですね。「command」キーと「=」キーを押せばいいんです。もしくは、メニューのEditorから「Size to Fit Content」を選ぼう。←これも間違えないでね。私はアトリビュートインスペクタ内にあるModeを探して無いな〜なんてしてました(^_^;)

大きさが変わったから画面からズレてしまっているだろう。またドラッグして上部中央の青いラインが出現する位置に戻そう。次にどうするかと言えば、イメージの位置にコンストレイントを1つ付けておこう。Alignから水平中央値固定(Horizontal Center in Container」だ。Document Outlineから(control)ドラッグしてもいいし、右下のAlignメニューから選んでいいよ。すると中央にオレンジラインが出てくるだろう。

Auto Layoutにおけるオレンジラインは、コンストレイントの設定が不十分で警告が出ているということですよね。ここでオレンジの意味が分かりますか?　当然分かりますよね。水平線上の位置は決めていても垂直方向の位置が決まっていないからです。


更なるコンストレイントの追加はまた後ほど。今日はここまで。  

今日から新たなプロジェクトに入る。複雑なインタラクティブ性を実現していく前に色々な種類のユーザーインターフェイスの扱いを学ぼう!

iOSフレームワークのリファレンスを眺めていると、理解しようとする行為が無謀に思えてくるほど膨大な情報量に触れて圧倒されてしまっている。iOSデベロッパーの人って凄いですね。改めて開発者の知識量の多さに関心してしまいます。私が本当に使えるようになるのだろうか...(^_^;)　

もはやSwift言語の勉強でもなんでもないような気がするが、iOSフレームワークの理解は、OOPプログラミングの理解(Swiftで遊ぼう！ - 73 オブジェクト指向でなぜつくるのか 第2版)無くしてあり得なかったと思う。私のアプローチの仕方が自然な流れのような気もしている。Swiftの勉強から入ってOOPの理解に進み、そしてIOSフレームワークを構成するAPI群の理解をしようとしている。

今までに手を出したものは、UILabel、UIButton、NSMutableAttributedString、UIDynamicsAnimatorと、ちぐはぐですね(^_^;)

まだUIKitとUIViewの関係性もよく分かっていないけど、今日はUIImageViewの話に入る。

じゃあお決まりのようにMy Third Projectを作ってください(参考：Swiftで遊ぼう！ - 152 - アプリを作ろう - 1 MVC再び)

ディスプレイ上に使用する画像を用意する時の決まり事を説明しよう。ユニバーサルターゲットで開発をする場合は、ディスプレイが最小のiPhone4sが持つ「320 × 480」に収まるロゴということで、「300 × 100」以下にするべきでしょう。そうなると、スケーリング値を考えて、用意する画像サイズは、2倍の「600 × 200」と3倍の「900 × 300」の3サイズということになる(Swiftで遊ぼう！ - 145 - Xcode6 - 3)。ということはイメージ作成は、「900 × 300」を1つ作ればいい。その後はここで説明しているように小さなサイズを用意すればいいですよね。私が用意したロゴは次のような「LifeL_logo900.png」、「LifeL_logo600.png」、「LifeL_logo300.png」の3サイズ。

利用する画像は常に3サイズを1セットとして考えておいた方がいいだろう。プロジェクト内で使用するためにアセットカタログ(Images.xcassets)に登録しておかなければならないから、次に「command + 1」、覚えているかなプロジェクトナビゲーターを開いてから、Images.xcassetsを選択してください。まだAppIconしかないと思います。左下隅にある「+」ボタンを押してください。「New Image Set」というメニューを選ぶと、「Image」と名前のついたイメージセットが作られるでしょう。option + command + 4」を選択すると、アトリビュートインスペクタが選ばれるのでイメージセットの名前を「LifeL_logo」に変えてください。

これで準備は終わった。用意したサイズの異なる3つのpngイメージをそれぞれのスロットにドラッグ&ドロップしてください。

今日はここまで。