Swift

iPadのPlaygroundsを使ったApp開発にLilySwiftを導入します。 環境 iPadOS 17.1 Swift Playgrounds 4.4 Appの作成 PlaygroundsでAppを新規作成します. 画面下のAppを押すとマイAppが作成されます. 作成されたマイAppを押してプログラミングの画面に移動します. Swiftパッケージの追加 Appを開き, 左側メニューを表示するとファイルなどを追加するボタンがありますのでこれを押します. 追加したいもののメニューが出てきたらSwiftパッケージを選択します. 追加するSwiftの指定 追加するパッケージのURLを求められますので、 https://github.com/wdkk/LilySwiftForPlayground.git を入力します. 入力後, 少し待つと, 追加できるパッケージが表示されます. 以下の画面のように出てくれば最新のLilySwiftが使えますので, そのまま画面右上のAppプレイグランドに追加を押します. 自動で元の画面に戻り, 左メニューのファイルリストにLilySwiftForPlaygroundが追加されます. LilySwiftのインポート パッケージの読み込みが成功すると, Swiftコードの中で以下のインポートが可能になります. import LilySwiftForPlayground Lilyの機能を使っていないため, 画面に変化はありませんが、これでLilyの機能を使う準備が整いました. Lilyの機能が使えるかを試すにはこちらを参考にしてください.

macOSのPlaygroundsを使ったApp開発にLilySwiftを導入します。 環境 macOS Sonoma 14.2.1 Swift Playgrounds 4.4 Appの作成 PlaygroundsでAppを新規作成します. 画面下のAppを押します. マイAppが作成されます. 作成されたマイAppを押してプログラミングの画面に移動します. Swiftパッケージの追加 Appを開き, メニューの**[ファイル] > [パッケージを追加]**を選びます。 追加するSwiftの指定 追加するパッケージのURLを求められますので以下のURLを入力します. https://github.com/wdkk/LilySwiftForPlayground.git 入力後少し待つと, 追加できるパッケージが表示されます. 以下の画面のように出てくれば最新のLilySwiftが使えます. 画面右上のAppプレイグランドに追加を押します. 自動で元の画面に戻り, 左メニューのファイルリストにLilySwiftForPlaygroundが追加されたことを確認します. LilySwiftのインポート パッケージの読み込みが成功すると, Swiftコードの中で以下のインポートが可能になります. Lilyを使いたいswiftファイルに以下のimportを記入します. import LilySwiftForPlayground Lilyの機能を使っていないため, 画面に変化はありませんが、これでLilyの機能を使う準備が整いました. Lilyの機能が使えるかを試すにはこちらを参考にしてください.

iPadでのLily Playground Booksの導入手順 導入に関しては公式ページのiPadの手順を参考にしてください.

macOSでのLily Playground Booksの導入手順 導入に関しては公式ページのmacOSでの導入手順を参考にしてください.

LilySwiftのパッケージを追加すると, Lily Playground Booksの処理とSwiftUIを合わせて使うことができるようになります。以下のサンプルコードをダウンロードして参照してください. 実行環境 Xcode 15.2 LilySwift 5.1.23 サンプルプロジェクト PGScreenView.swiftpm.zip 上記のプロジェクトを開くと, Lily Playgroundが動かせる状態になっています. コードの以下の部分を書き換えてください. ダークグレイの背景に赤の四角が表示されます. Playground Booksと同じ design関数 をつくる screen.clearColor = .darkGrey を指定する PGRectangleのcolorを .red にする コード 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 import SwiftUI import LilySwiftForPlayground import LilySwiftAlias class Playground { // Metalを使う準備 lazy var device = MTLCreateSystemDefaultDevice()!...

このBookでは、タッチに反応して図形を描くプログラミングしていきます。 タッチに合わせて動くエフェクトはとても魅力的です。表現を工夫して楽しいエフェクトを作っていきましょう。 手始めに、タッチしたところに円を描くプログラムを書きましょう。 前のBookでは実行時に1度だけ処理するdesign関数をつかいました。 このBookから、design関数に加え、update関数をつかいます。 update関数は繰り返し呼ばれる関数です。呼ばれるたびにタッチの情報を更新するため、今タッチしている位置が得られます。screen.latestTouch が最新の触れた位置の情報です。 design関数に screen.clearColor = .lightGrey を書きます。 背景を薄灰色に設定します。 update関数を用意します。 update関数のはじめに、screen.removeAllShapes() を書きます。 一度すべての図形を消す処理です。updateは繰り返し呼ばれるので前のフレームの図形が残ります。 今回は前フレームの図形を消すため、removeAllShapes()を呼びます。 let touch = screen.latestTouchを書きます。 最新のタッチ情報がtouchに入ります。 PGCircle() を書きます。 PGCircle()に .position( touch.xy ) を追加します。 touch.xyはタッチ情報のxy座標が得られます。 1 2 3 4 5 6 7 8 9 10 11 12 func design( screen:PGScreen ) { screen.clearColor = .lightGrey } func update( screen:PGScreen ) { screen.removeAllShapes() let touch = screen.latestTouch PGCircle() .position( touch.xy ) } 「コードを実行」を押します。 目標 実行後、タッチした位置に丸が描けたら成功です。...

このBookでは、LilyPlaygroundで描いた図形を動かすプログラミングを学びます。 工夫をこらして、美しいアニメーションをつくっていきましょう。 LilyPlaygroundでは、1秒間に最大60回、画面をリフレッシュします。その1回ごとに図形のパラメータを変えることで、動きを表現します。 1回ごとに加算する値を delta と呼びます。たとえば、 position の加算値は deltaPosition です。 てはじめに deltaPosition を使ってみましょう。 design関数内に、 PGCircle() を書きます。 PGCircleに .deltaPosition(dx:dy:) を追加します。 1 2 3 4 func design( screen:PGScreen ) { PGCircle() .deltaPosition( dx:0.5, dy:1.0 ) } 「コードを実行」を押します。 目標 中心から右上に移動する円が出たら成功です。 終わったら次のページへ進みます。

LilyPlaygroundへようこそ。たのしく絵を描きながら、Swiftでプログラミングを学んでいきましょう。最終的に色々な図形を自由に操って美しい表現を目指します。この1章はその第一歩です。まず画面に四角を描いてみます。 下のプログラムの入力部分に PGRectangle() と書きます。 1 2 3 func design( screen:PGScreen ) { PGRectangle() } 「コードを実行」を押したら、すこし待ちます。 目標 画面の真ん中に黒い四角が出たら成功です。 終わったら次のページへ進みます。 実行例

前ページでは life がなくなった時の処理、 .completion{ } を紹介しました。 ここでは .completion{ } を活用して、図形を再利用してアニメーションを繰り返してみましょう。 PGCircle() を書きます。 フレームごとの移動量 .deltaPosition( dx:0.0, dy:-1.0 ) を指定します。 初期ライフとして .life( 1.0 ) を指定します。またlifeに合わせて .alpha( 1.0 ) を指定します。 フレームごとの減り量として、 .deltaLife( -0.01 ) と deltaAlpha( -0.01 ) を指定します。 .completion のブロック内で図形を再設定します。 .position(), .life(), .alpha() を使って、それぞれ初期化します。 フレーバーとして .color( .random ) を追加します。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 func design( screen:PGScreen ) { PGCircle() .deltaPosition( dx:0.0, dy:-1....

前ページで終了時の操作を学びました。 ここでは、毎フレームの処理を自分で書いてみましょう。 PGCircle() を書きます。 .position(cx:cy:), deltaPosition(dx:dy:), .life(), deltaLife() を指定します。はじめの初期化です。 .completion{ } で再利用を行います。 .position(cx:cy:)、deltaPosition(dx:dy:), .life() をそれぞれ元の値に戻します。 .color()　は前回と同じくランダムにします。 続けて .iterate{ } を書きます。そのブロック内で $0.deltaPosition(dx:dy:) を書きます。deltaPosition.yの値を1.08倍します。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 func design( screen:PGScreen ) { PGCircle() .position( cx:0.0, cy:200.0 ) .deltaPosition( dx:0.0, dy:-1.0 ) .life( 1.0 ) .deltaLife( -0.01 ) .completion { $0 .position( cx:0.0, cy:200.0 ) ....