Swift Playgrounds

2023年12月現在, LilySwiftのパッケージは2つあります. 環境による違いについてご説明します. 環境 iPad iPadOS 17.1 Swift Playgrounds 4.4 Mac macOS Sonoma 14.2.1 Xcode 15.0 Swift Playgrounds 4.4 SwiftパッケージとPlaygrounds Swift Package Managerは, PlaygroundsとXcodeの双方で利用することができます. このパッケージはswiftファイル以外にもアセット画像やmetalファイル,ビルド済みのライブラリやフレームワークを組み込めるようになっています. しかし, PlaygroundsではSwift以外のファイルを解釈したり処理することができません. 例えばgithubでは定番のREADME.mdやLICENSEも場合によってエラーの原因になりえます. LilySwiftではMetalを使っていますが, .metalのファイルも使うことができません. Playgroundsで動作させることができるのはあくまでswiftファイルのみと考えたほうがよさそうです. LilySwiftForPlaygroundパッケージ そこでPlaygrounds向けにswiftファイルのみで構成しなおしたのがLilySwiftForPlaygroundです. LilySwiftForPlayground(github) 利用する時のimportは以下のようになります. 1 import LilySwiftForPlayground 純粋にSwiftファイルのみで作られているため, Playgroundsで利用できるようになりました. Metalはmetalファイルを用いず文字列データから作成するようにしています（Metalの実行時ビルド). 文字列からの実行は, metalファイルより性能が少し劣る, Appを起動した時にロスがあるなどのデメリットがありえますが, Playgroundsで動作させることができる点が何よりのメリットとなります. 余談ですが,あくまでSwiftだけで構成されているパッケージなのでXcodeでも使うことができます. LilySwiftパッケージ 以上の事情から, LilySwiftはXcode専用のパッケージになります. LilySwift(github) 利用する時のimportは以下のようになります. 1 import LilySwift Xcodeで使う前提となりますが, Swift以外のファイルを含めることができるためMetalの性能を引き出せる, その他のファイルを柔軟に扱えるなどの幅広いメリットがあります. 使い分け 2021年からPlaygroundsでもApp開発・公開ができるようになりました. 特にiPadのみでAppが提供できるようになったのは革命的です. よって以上で紹介した2つのパッケージは以下のように使い分けていただければと思います. とりあえず試したい → LilySwiftForPlayground iPadでApp開発・公開したい → LilySwiftForPlayground MacだがPlaygroundsで開発したい → LilySwiftForPlayground MacでXcodeで開発したい → LilySwift

macOSのXcodeを使ったApp開発にLilySwiftを導入します。 Xcodeでは色々な形式でAppを作成可能ですが, 今回はPlaygrounds Appでも使えるようにswiftpmを作成します. 環境 macOS Sonoma 14.2.1 Xcode 15.0 Appの作成 XcodeでAppを新規作成します. [Create New Project]を選択します. Appの種類の選択 プラットフォームで[iOS]を選択します. Appの種類で[App Playgrounds]を選びます. これを選択すると.swiftpmが作成できます. Appの名前を決める App名をつけます. 開発アカウントや組織が決まっていればここで設定してください(なければNoneでも作れます). [Next]を押します. 保存先を選択します. 作成後, 保存先にswiftpmが作られていることを確認してください. パッケージの追加 立ち上がったAppプロジェクトにパッケージを追加します. 左メニューのswiftpmを選びます.設定が表示されます. [Package Dependencies]を選びます. 左下の[+]ボタンを押します. LilySwiftForPlaygroundの追加 右上の検索フィールドにLilySwiftのURLを入力します. https://github.com/wdkk/LilySwiftForPlayground.git リストにlilyswiftforplaygroundが表示されるので,これを選びます. バージョンなどは利用したいものであることを確認してください. 確認したら[Add Package]を押します. 元の画面に戻るとリストにLilySwiftForPlaygroundが追加されています. LilySwiftの利用開始 ファイルリストにパッケージが追加されているかを確認します. リストが出ていない場合, 一度.swiftpmを立ち上げ直してください. Lilyを使いたいswiftファイルに以下のimportを記入します. import LilySwiftForPlayground Lilyの機能を使っていないため, 画面に変化はありませんが、これでLilyの機能を使う準備が整いました. Lilyの機能が使えるかを試すにはこちらを参考にしてください.

ここまでで準備したAppについて, インポートしたLilySwiftが動作することを確認します. 簡単な画像処理を行なってSwiftUIの画面に表示してみましょう. 環境 iPadOS 17.1 Swift Playgrounds 4.4 手順 作成したAppプロジェクトの ContentView.swift を開きます. LilySwiftForPlayground をインポートします. (.xcodeprojの場合, LilySwift) 以下のコードのように createImage関数を追加します. LLImageはLilyのもつ画像オブジェクトです. ここでピクセルを操作してグラデーション画像を作成します. SwiftUIのVStackの中にImageを作ります. Imageに読み込む画像に createImage().uiImage! を記述します. createImageが返してくれたLLImageをUIImageに変換するという意味です. 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 import SwiftUI import LilySwiftForPlayground // LilySwiftの場合書き換えてください. // Lily画像データを作成する関数 func createImage() -> LLImage { // 256x256ピクセルの画像を作成 let image = LLImage( wid:256, hgt:256 ) // RGBAのピクセルデータを取得 let matrix = image....

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の導入手順 1.Playgrounds Appのインストール iPadでApp Storeを開き、Swift Playgroundsをインストールします。 2. 購読 Lily Playgroundの購読を開始します。購読は無料です。iPadのSafariから下のリンクに進むと、Swift Playgrounds Appが開き、購読の確認に進みます。 Lily Playgroundを購読する 2-1. 購読を開始する 「購読しますか」と聞かれます。「購読」を選択してください。 2-2. 追加されたBooks購読リスト App内の購読リストに「Lily Playground」が追加され、Booksを入手できます。 3. Bookのダウンロード 3-1. Bookの選択 LilyPG…というBookを選び、「入手」を押すと、Bookのダウンロードがはじまります。 3-2. Bookを使う マイプレイグラウンドでBookを利用できるようになりました。

macOSでのLily Playground Booksの導入手順 1.Playgrounds Appのインストール App Storeを開き、Swift Playgroundsをインストールします。 2. 購読 Lily Playgroundの購読を開始します。購読は無料です。Safariから下のリンクに進むと、Swift Playgrounds Appが開き、購読の確認に進みます。 Lily Playgroundを購読する 2-1. 購読を開始する 「購読しますか」と聞かれます。「購読」を選択してください。 2-2. 追加されたBooks購読リスト App内の購読リストに「Lily Playground」が追加され、Booksを入手できます。 3. Bookのダウンロード 3-1. Bookの選択 LilyPG…というBookを選び、「入手」を押すと、Bookのダウンロードがはじまります。 3-2. Bookを使う マイプレイグラウンドでBookを利用できるようになりました。

この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....