Shapesテンプレートの利用

　Shapesのテンプレートを使って新しいプレイグラウンドを作る方法については、もはや説明する必要はないでしょう。念のため簡単に説明すると、「My Playgrounds」のページのいちばん最後に表示される「＋」のサムネールをタップし、表示される「Choose a Template」のダイアログから「Shapes」を選べばいいのです。

　Shapesから作成したプレイグラウンドには、それぞれ「Canvas」「Create」「Touch」「Animation」と名付けられた4つのページがあります。これらを分類するとすれば、最初の2つのCanvasとCreateは、基本的な図形を描くもの、3番目のTouchは描いたグラフィックに対するユーザーの操作を可能にするもの、4番目のAnimationは基本的なアニメーション機能を試すものとなっています。

　最初の「Canvas」には、青く塗りつぶされた1つの円を描くプログラムだけが記述されています。この円は、実はドラッグして移動できるようになっています。

Shapesのテンプレートを使って作成したプレイグラウンドの最初のページ「Canvas」には、1つの円を描くプログラムが含まれています

　次の「Create」には、円、長方形、直線、文字列、画像といった各種のグラフィック要素の一覧を描くプログラムが記述されています。。これらの図形はすべて静止していて、描いたらそれでおしまいというタイプです。とりあえず、Shapesが含むグラフィック機能で描ける基本的な図形（これを一般にプリミティブと呼びます）をひととおり含んでいます。この環境でどんなものが描けるのか参考になります。

Shapesのプレイグラウンドの2番目のページ「Create」のプログラムは、この環境で描くことが可能なさまざまなグラフィックの基本形を描きます

　今回は最初のページ、Canvasにプログラムを追加することで、円の色や大きさ、描く位置などを変更する方法について考えてみます。すでに述べたように、Canvasで描いている円は、描いた後でユーザーがドラッグすることが可能となっていますが、今回はその機能には目をつぶります。

円のクラスから円のオブジェクトを作る

　改めてCanvasのプログラムを見てみましょう。最初に書かれているのは2行だけで、そのうちの2行めは、今回は目をつぶることにしたドラッグ機能を有効にするものです。ということは、今回まず注目するのは1行めだけです。そこには、

と書かれています。

　最初のletについては、まだこの連載では説明していませんでした。これはvarと同じような働きをするものですが、変数ではなく「定数」を定義するときに使います。変数はあとから値を変更できるのに対し、定数は最初に定義したときの値を変更することができません。不便と言えば不便ですが、あとから値が変わってしまっては困るようなものに対して使うことで、ある意味安全なプログラムを書くための機能なのです。

　ここでletの後ろは「circle」という定数に「Circle()」を代入するような式になっています。すべて小文字のcircleに、先頭だけ大文字のCircleを代入しているようで、それに何か意味があるのかと疑いたくなるような表記かもしれません。大文字Circleの後ろには「()」が付いていて、これまでに出てきたファンクションの呼び出しにも似ています。しかしSwiftでは、先頭が大文字のファンクションというのは普通はありません。これは名前のつけ方だけの問題ではなく、そいういう規則だと思ってください。

　これを短く言えば「Circleクラスのオブジェクト（インスタンス）を作成し、それを変数cirlceに代入する」ことになります。クラスもオブジェクトもまだ説明していませんが、それらについて細かく説明し始めると、少なくとも本の1章くらいは費やしてしまうことになります。すでにSwift Playgroundsに付属の「Learn To Code 2」をやり終えた人なら、その中にタイプ（Types）という章があったことを憶えているでしょう。そこでいうタイプは、ここでいうクラスと同じものです。

　いずれにしても、今はまだクラスやオブジェクトについて説明しません。ここでは、先頭大文字のCircleは「円の製造機」のようなもので、それに「()」を付けると、新しい円を生成して返してくると考えてください。その新しく作られた円のオブジェクトを、ここではcircleという定数に代入しているのです。ちなみにここでは「Circle」は規定のものなので、そのとおりに書かなければなりませんが「circle」は自由に付けられる名前なので、ほかの何でもかまいません。

　このShapesのテンプレートでは、この1行の記述だけで画面に円を描くことができます。実に簡単でしょう。これで右側の表示エリアの中央に比較的大きめの青い円が表示されます。この中央という位置、円の大きさ、色は、すべて便宜的なデフォルトのものであとから変更することができます。

円オブジェクトの属性を設定する

　デフォルトの状態で描かれば円の「属性」を変更してみましょう。属性とはこの場合、位置、大きさ、色などのように、個別の円に固有の性格のことです。属性を変更するには、オブジェクトの変数名の後ろに「.」（ドット＝ピリオド）を付けて、その後ろに属性名を付け、それを変数とみなします。そこに目的の値を代入すればいいのです。上で、letは値を変更できない定数を定義するものだと書きました。それなのに属性が変更できるのかという疑問はもっともです。しかし、この場合はcircle自体はcircleのまま変わらないので大丈夫なのです。その中の属性だけの変更は可能です。しかし、circleに別のオブジェクトを代入したりすることはできません。オブジェクトの定数とは、そういうものです。

　まずは色を変更してみます。それには、Swift Playgrounds特有の画期的な属性設定機能を利用することができます。

　最初からあるコードに続けて、

と入力してみましょう。すると、画面の下辺、あるいはキーボードの上辺のツールバーには、次に入力可能な候補として、いろいろな円の属性が表示されます。

円の色を変えるには、円のオブジェクトの属性を変更します。ここではcolor属性を変更するため、circleの後ろにピリオドを入力しました

　ここでは色を変更したいので「color」を選んでタップし、続けて代入記号の「=」を入力します。すると、この時点のツールバーの入力候補に文字ではないグレーの正方形の「□」のような記号が表示されるので、それをタップします。これは色を指定するためのカラーパッチのようなものです。

「circle.color =」までを入力すると、「Color」が勝手に入力されますがそれは無視して、ツールバーの入力候補からグレーの正方形をタップして入力します

　すると、ソースコードの入力欄にいきなりカラーパレットが表示されます。あとは、この中から好きな色を選ぶだけです。もちろんこれでは選択肢が限られます。もっと別の色を設定したいという場合には、色の要素ごとに数字で指定することも可能です。

グレーの正方形を色指定の位置に入力するとカラーパレットが開くので、その中から目的の色を選んでタップします

　ここでは、抹茶のような緑色を選んでみました。その状態でプログラムを動作させると、描かれる円の色は、当然ながら抹茶色になります。

右側の画面に描かれる円の色が、color属性でカラーパッチを使って指定した抹茶色になりました

　続けて、ほかの属性も設定してみましょう。円の大きさは半径を表す「radius」で指定します。ここでは、デフォルトのものよりも少し小さめの3.0にしています。また位置は「center」で指定しますが、このcenterには、さらに属性としてx座標とy座標があります。このような場合も、属性名の後ろにさらに「.」を付けて、細かな属性名を書くのです。これらを付け足したコードは以下のようになります。

　ここで再びプログラムを実行すると、抹茶色で、やや小さめの円が、中心を画面の右上角にして（4分1だけ）表示されます。このx座標が25.5、y座標が38.0という数字は、iPad標準の9.7インチモデルを横向きに持って右半分を表示エリアとした場合に右上角を表します。この数字は、Shapesが用意してくれるキャンバスの画面に表示される範囲のグラフィック座標を表しています。つまりx座標は-25.5〜+25.5、y座標は-38.0〜+38.0の範囲に描画すれば、だいたい画面に収まることになります。

円のcolor属性に続いて、radiusとcenter属性も指定して、円の大きさと位置を決めています。円の中心をちょうど右上角にして、円の4分の3をはみ出させているのはわざとです

　12.9インチモデルの場合にはもう少し広くて、x座標は-34.0〜+34.0、y座標は-51.5〜+51.5くらいになります。なお、これらの数字はあまり正確ではありません。厳密な数字は、また別の機会に考えてみましょう。

次回の予定

　今回は、基本的なグラフィック要素として円の描き方がわかりました。次回はその応用として、別のグラフィック要素も描いてみます。その際、今回の実験でわかったキャンバスの大きさを考慮して、画面からなるべくはみ出さないように描画することを考えます。