[Swift Playgrounds] – Swift Playgroundsの使い方 – 操作・UI紹介編

2016.09.24

おばんです、最近気付いたらほぼ毎週なにかしらイベント運営やらイベント参加していることに気付いた田中です。

今回はSwift Playgroundsの操作方法やUIについて、Blank(自由記述のまっさらなPlayground)を元に紹介していきます。

Swift Playgroundsとは?

こちらをご覧ください。

[Swift Playgrounds] - Swift Playgroundsことはじめ - 全体紹介編

画面紹介

allscreen

  1. コードエリア
  2. LiveViewエリア
  3. My Playgrounds一覧ボタン
  4. Plusボタン
  5. Toolsボタン
  6. Undoボタン
  7. Redoボタン
  8. コード補完
  9. 削除ボタン
  10. 改行ボタン
  11. キーボード表示/非表示ボタン
  12. 実行ボタン

4. Plusボタン

コードスニペット

let, varに始まり、for, if, switch, classなどよく書くコードのひな形が用意されています。
コードエリアの任意の場所にカーソルを合わせてこれを選ぶことで、コードを挿入することができます。

IMG_0053

画像

Playground上で扱える画像の管理場所です。
iCloud、Photo Library、カメラから画像を追加可能で、追加した画像はPlayground上で扱うことができるようになります。

IMG_0066

ファイル

Playground上で扱えるファイルの管理場所です。
音声ファイルや.storyboardファイルなどをiCloudから追加可能で、追加したファイルはPlayground上で扱うことができるようになります。

IMG_0055

5. Toolsボタン

Help

Swift Playgroundsの使い方についてのヘルプです。

IMG_0057

Create PDF

書いたソースコードをPDFとして出力し、AirDrop等で共有することができます。

Record Movie

Playgroundの画面全体を録画することができます。
録画した動画はその端末上で保存できるほか、AirDropなどで他のApple製品に共有することも可能です。

IMG_0046

Broadcast Live

コーディングの様子をLive Streamingアプリでライブ配信できる模様。

Take Picture

PlaygroundのLiveView領域を画像として取得することができます。
取得した画像はその端末上で保存できるほか、AirDropなどで他のApple製品に共有することも可能です。

IMG_0048

新規UI

数値入力

ソースコード上の数値の箇所をタップすると、テンキーと円上にくるくるまわすことで数値の増減を操作するUIが表れます。

IMG_0049 IMG_0050

色指定

ソースコード上で色を代入する箇所では□枠で色を指定するUIが選択可能です。

IMG_0051

画像指定

ソースコード上で画像を代入する箇所では□枠で画像を指定するUIが選択可能です。

IMG_0067

まとめ

簡単な操作領域の説明と、Swift PlaygroundsならではのUIについて説明しました。
iPadならではのタップによって操作するUIが多く取り入れられ、新しいコーディング体験があって楽しい印象でした。
ぜひ一度ご賞味あれ!