tetu式

ゲームと音楽・作曲の自己満足と悩みどころの多いプログラムのブログ。

XcodeでiPhone用画面に文字を出してみる

Xcode

新年あけました。

今は仕事でPHPとJavascriptをメインにしてますが、他の言語をかれこれ１年くらい触ってないという事態に。
せっかくなので別の言語、それも職場にMacがあるので巷で話題のSwift言語について勉強してみることに。

Swiftとはなんぞや、とかいう人はこの記事を読む前に別のサイトで少し下調べをお願いします。
一応簡単に説明すると前にMacで使ってたObjective-C言語が使いづらいから新しく使いやすい言語として出たプログラム言語という感じです。

で、タイトルにはSwift 2.0って書いてます。
2015年内にSwiftに修正が入り、2.0より前の記述が使えなくなっているという情報もちらほらあります。
実際自分も記事書く前にSwift入門サイトとか見ながら少し触ってみて「なんでエラー出るねん」とか思ってました。

今回の記事は2016年1月現在で最新のXcodeの環境という前提で書いていきます。


まずは準備

まぁ、最新のMac環境であれば最初からXcodeも入ってますし、ダウンロードとかそういう手間はすっ飛ばしてプロジェクト作るところから。

  1. Xcodeを起動し、案内画面の左側にあるCreate a new Xcode projectをクリック。
    案内画面でねーよって人はメニューバーからFile > New > Projectを選択。
  2. iOSのSingle View Applicationを選択し、Nextクリック。
  3. Product Nameに何か適当に名前を入力（ここでは single_view_test としておきます）
    Organization Nameに会社名、制作者名を入力。いわばドメイン名的なもの。
  4. Organization Identiferにアプリ識別用の名前を入力。一般的にはcom.(Organization Name)
  5. LanguageにSwiftを選択。
  6. DevicesにiPhoneを選択。
  7. そこから下に3つほどあるチェックボックス項目はデフォルトのまま。Use Core Dataだけチェックが外れてる状態にしておく。
    まだそこまで試してないけどデータ保存時とかに使うらしい？
  8. nextクリック。
  9. プロジェクトを保存する場所を聞かれるので適当な場所を選択。
    (ここではデスクトップにswift_testというフォルダを作ってそこに入れておきます)
  10. Createクリック
    バージョン管理とかしたい人？はCreate Git repositoryにチェック。今回はテスト用なので入れなくてもいいかと。

ここまで操作してプロジェクト画面がでてきます。
初期状態がどうなってるかは忘れましたが、とりあえず画面右上の3つの四角形は全部青くなるようにクリックしときましょう。
左上の再生ボタンをクリックすると擬似iPhone画面が起動し、アプリの状況をテストできます。

さて、準備できたので何かやってみましょう。

  1. 画面左のsingle_view_testフォルダ内にあるMain.storyboardをクリック。
  2. 画面右下の◯に□が入ってるアイコンをクリック。
  3. さらに下にあるテキストに Label と打ち込む。
  4. 表示されたLabelを画面中央の枠内のどこかにドロップ&ダウン。

なんということでしょう。ソース書かずにLabelという文字を表示するアプリの原型が出来上がりました。
この状態で再生ボタンを押すとiOSシミュレータが動き出し、画面Labelという文字が浮かびます。
望んだ位置に表示されてない？
それはドロップ&ダウンした時に指定した画面がデフォルトでは枠が正方形になっているからです。iPhoneの画面は長方形ですよね？

この辺りの設定は以下の通り

  1. Main.storyboard枠内の上部にある3つのアイコンの左のアイコン(View Controller)をクリック
  2. 画面右側の右から3つ目（定規アイコンの左）をクリック
  3. Simulated MetrixのSizeをiPhone 5.5-inchに指定

これでiPhone6用の画面を想定したMain.storyboardを編集できるようになります。
ちなみにデフォルトでは再生ボタンを押した時にiPhone6用にビルドするようになっています。
別のiPhoneとかiPad用にビルドしたい場合は、再生ボタンの右側にあるsingile_test_view > iPhone 6s Plus の iPhone 6s Plusをクリック。
iOS Simulators 内にある好きなApple端末を選択してビルドの仕方を変更できます。
この辺りはView ControllerのSizeに合わせるようにしてください。
あ、ちなみにフルHD横長のモニターではiPhone 6sの縦解像度は足りないので注意。
横置き配置を想定したい場合はOrientationをLandscapeにすると横配置にできます。

あれ？iOS Simulatorは縦長のまま？
iOS Simulatorを横長表示にしたい場合はメニューバーの Hardware > Rotate Left(Rightでも可)

これで横長用に表示できますが、またRotateすると望んだ位置に表示されないようになってしまいます。
この辺りの調整は現時点でわからないですが、ソースとか書けばどうにかなりそうな気もします。
とりあえず横長か縦長かどちらかでLabelが望んだ位置に表示できるようになったら、配置したLabelという文字をダブルクリックし、Helloと打ち込んでみてください。
なんということでしょう。やっぱりソースを書かずに表示する文字を編集できました。

そのほか、配置したLabelをクリックすると右側にいろいろ項目が表示されます。
この辺りの設定を変えることで色を変えたり、文字の大きさを変えたりできます。

文字も表示できるようになったし、今回はここまで。


あれ？Swiftは？
その辺りはまた別の機会に・・・