スクラッチのモバイル対応② マルチタップついに成る

スクラッチプログラミングに挑戦している皆さん、どうも！スクラッチコーチです。

前回(ぜんかい)は基本的(きほんてき)なキー操作(そうさ)を検知(けんち)して、さらにモバイル対応(たいおう)の礎(いしずえ)になるスティックの重要(じゅうよう)変数(へんすう)「可動域(かどういき)」と「有効(ゆうこう)範囲(はんい)」を定義(ていぎ)したね！こっからはクライマックスに向(む)けて爆走(ばくそう)していく！感動(かんどう)のマルチタップ可能(かのう)なモバイル対応(たいおう)ジョイスティックを堪能(たんのう)する日(ひ)は近(ちか)いぞ諸君(しょくん)！

今回(こんかい)の目的(もくてき)「マルチタップ可能(かのう)なモバイル対応(たいおう)を完成(かんせい)させる」

今回(こんかい)でモバイル対応(たいおう)を終(お)わらせるよ！シングルタッチではなくてマルチタッチ可能(かのう)なモバイル対応(たいおう)されたスティックをバックパック化(か)しておけば、これから作(つく)る作品(さくひん)はすべてモバイル対応(たいおう)出来(でき)ると言(い)っても過言(かごん)ではない。しかもサクッと。YES！

スティックを有効(ゆうこう)化(か)する

まずはスティックを有効(ゆうこう)化(か)する。有効(ゆうこう)範囲(はんい)内(ない)でタップを検知(けんち)したらスティックが動(うご)くようにしていくよ。

有効(ゆうこう)範囲(はんい)内(ない)でタップされたか調(しら)べる

条件(じょうけん)分岐(ぶんき)ブロックを配置(はいち)しよう。

条件(じょうけん)式(しき)にはこの３つを使(つか)っていく。

これを組(く)み合(あ)わせて条件(じょうけん)式(しき)にハメよう。

タップ（＝クリック）された際(さい)に、マウスまでの距離(きょり)が有効(ゆうこう)範囲(はんい)内(ない)にあればスティックを有効(ゆうこう)化(か)する処理(しょり)を呼(よ)び出(だ)そう！

有効(ゆうこう)化(か)する処理(しょり)を作(つく)る

ブロック定義(ていぎ)「スティックを有効(ゆうこう)化(か)する」を作(つく)るよ。

条件(じょうけん)ブロック内(ない)で呼(よ)び出(だ)そう。

指(ゆび)が離(はな)れるまで処理(しょり)を繰(く)り返(かえ)す

使(つか)うのはこちらの３つ。

組(く)み合(あ)わせて「指(ゆび)（マウス）が離(はな)れるまで繰(く)り返(かえ)す」というループを作(つく)ろう。

スティックXに値(ね)をセットする

パソコン操作(そうさ)の際(さい)には右(みぎ)矢印(やじるし)やDキーといったキー操作(そうさ)で値(ね)をセットしていた変数(へんすう)「★スティックX」を、ここからはスティックの動(うご)きによって値(ね)が決(き)まるように作(つく)っていくよん。とりあえず変数(へんすう)に値(ね)をセットするブロックを置(お)こう。

こちらの３つを使(つか)って値(ね)を決定(けってい)していく！

この３つをどう演算(えんざん)していけばいいか、まずはほぼ答(こた)えから見(み)てみよう。

まずは「マウスのX座標(ざひょう)」から「（スティックの）X座標(ざひょう)」を引(ひ)いた値(ね)を算出(さんしゅつ)して、それを可動域(かどういき)で割(わ)っているね。組(く)み合(あ)わせるとこう↓

どういうことだろうね！？

相対(そうたい)距離(きょり)を算出(さんしゅつ)する

最初(さいしょ)に「マウスのX座標(ざひょう)」から「スティックのX座標(ざひょう)」を引(ひ)いた値(ね)について考(かんが)えてみる。

上(うえ)の図(ず)を見(み)てみてね。マウスのX座標(ざひょう)が２００だとして、スティックのX座標(ざひょう)が８０だとするよね。「マウスX - スティックX」って計算(けいさん)することで赤(あか)い線(せん)の距離(きょり)を算出(さんしゅつ)しているんだ。このたとえだと２００－８０で赤(あか)い線(せん)の長(なが)さは１２０っていうことが分(わ)かる。これによってユーザーがスティックをどのくらい動(うご)かしたのかが分(わ)かるんだ！さらに言(い)うと、マウスのXが６０でスティックのXが８０なら赤(あか)い線(せん)の長(なが)さは－２０となる。マイナスになったということはユーザーは左(ひだり)にスティックを動(うご)かした、ということも分(わ)かるね。この赤(あか)い線(せん)のことを相対(そうたい)距離(きょり)と呼(よ)ぶことにするね。

ノーマライズする

相対(そうたい)距離(きょり)が算出(さんしゅつ)できたのはいいけど、ちょっと待(ま)って。前回(ぜんかい)スティックの要件(ようけん)を確認(かくにん)したよね。そこで「右(みぎ)なら１、左(ひだり)なら－１になる」っていう要件(ようけん)があったね。相対(そうたい)距離(きょり)が１２０とかマイナス２０だと、この要件(ようけん)から値(ね)が大(おお)きく逸脱(いつだつ)《いつだつ》してしまう。そこで、さらにこの相対(そうたい)距離(きょり)を可動域(かどういき)で割(わ)っていくわけだ。そうするとどうなるかな。たとえば相対(そうたい)距離(きょり)が１２０だとして、可動域(かどういき)の値(ね)が３２だとしよう。そうすると答(こた)えは3.75なんだ（計算機(けいさんき)使(つか)ったｗ）まだ１より大(おお)きいけど、それでもちょっと近(ちか)づいてきたね。あとは１より大(おお)きかったら強引(ごういん)に値(ね)を１にするっていう処理(しょり)を追加(ついか)すれば要件(ようけん)を満(み)たせる。

• それなら可動域(かどういき)で割(わ)らないで相対(そうたい)距離(きょり)（１２０）が１より大(おお)きいかどうかで決(き)めれば良(よ)くない？

  ＼u003cp＼u003e相対(そうたい)距離(きょり)を使(つか)って１より大(おお)きいかどうかを判定(はんてい)すると、０か１しか値(ね)が取(と)れないんだ。スティックの微妙(びみょう)な動(うご)きによっては0.5とかマイナス0.33みたいな絶妙(ぜつみょう)な動(うご)きが切(き)り捨(す)てられてしまうので、より精密(せいみつ)に動(うご)きを検知(けんち)するために相対(そうたい)距離(きょり)を可動域(かどういき)で割(わ)ってる。これによって小数点(しょうすうてん)以下(いか)の値(ね)も知(し)ることが出来(でき)るので、０か１だけしか取(と)れないよりは応用(おうよう)がきくスティックになるという思惑(しわく)だよ。＼u003c/p＼u003e

このように大(おお)きすぎる値(ね)を最小(さいしょう)値(ち)（今回(こんかい)はマイナス１）から最大(さいだい)値(ち)（今回(こんかい)は１）の範囲(はんい)に収(おさ)める計算(けいさん)は「ノーマライズする」とか「正規(せいき)化(か)する」と呼(よ)ばれているんだ。

値(ね)が１かマイナス１を超(こ)えているか調(しら)べる

ということで上限(じょうげん)が１で下限(かげん)が－１になるように条件(じょうけん)ブロックを追加(ついか)していくよ。

値(ね)が１より大(おお)きいか、マイナス１より小(ちい)さいかを一発(はつ)で判定(はんてい)するには、絶対値(ぜったいち)を使(つか)うと便利(べんり)。

値(ね)を１かマイナス１に固定(こてい)する

またまたプラスマイナスに関係(かんけい)なく値(ね)をセットしたいので、そう、絶対値(ぜったいち)の登場(とうじょう)だ！とりあえず変数(へんすう)ブロックを置(お)こう。

ここに絶対値(ぜったいち)を使(つか)った割(わ)り算(ざん)で、強引(ごういん)に値(ね)を１かマイナス１に丸(まる)めていく！

順番(じゅんばん)は「変数(へんすう)」÷「変数(へんすう)の絶対値(ぜったいち)」だよ。具体的(ぐたいてき)な数字(すうじ)で考(かんが)えてみようか。たとえば変数(へんすう)の値(ね)が３なら３÷３＝１だし、変数(へんすう)の値(ね)が－３なら－３÷３＝－１になるということ。便利(べんり)！

スティックYに値(ね)をセットする

まるっとコピペして各所(かくしょ)を修正(しゅうせい)しよう。

処理(しょり)は同(おな)じだけど、ちょっと見(み)にくいから順番(じゅんばん)を変(か)えてみた↓

テスト

うぉぉぉ！動(うご)くぞぉ！ってまだ普通(ふつう)のモバイル対応(たいおう)の範疇(はんちゅう)《はんちゅう》だけどね。

ちゃんと有効(ゆうこう)範囲(はんい)外(がい)をタップしても反応(はんのう)しない様子(ようす)も見(み)て取(と)れるね。良(よ)きかな。

最初(さいしょ)のタップをセンターにする

ゲームをしていると最初(さいしょ)のタップはセンターにしてくれたほうがストレスなくプレイできることに気(き)づく。というか、最初(さいしょ)のタップがセンターじゃないと不便(ふべん)なんだよね。カンタンに解決(かいけつ)しちゃおうと思(おも)う。

これだけ！これだけでプレイストレスがだいぶ減(へ)る。お得(とく)すぎる！

ブロック定義(ていぎ)にまとめる

ジャンプの処理(しょり)に移(うつ)る前(まえ)に、有効(ゆうこう)化(か)する処理(しょり)をブロック定義(ていぎ)にまとめることでリファクタリングしよう。リファクタリングとはカンタンに言(い)うとコードの改善(かいぜん)のこと。

スティック操作(そうさ)を検知(けんち)する

ブロック定義(ていぎ)「_スティック操作(そうさ)を検知(けんち)する」を作(つく)ろう。再(さい)描画(びょうが)は不要(ふよう)。

処理(しょり)を移動(いどう)する

スティックを有効(ゆうこう)化(か)する処理(しょり)をまるっと移動(いどう)しよう。

ブロック定義(ていぎ)を呼(よ)び出(だ)す

ジャンプ処理(しょり)を検知(けんち)する

スペースキーを押(お)したらジャンプするという処理(しょり)もモバイル対応(たいおう)していこう。

ブロック定義(ていぎ)を作(つく)る

ブロック定義(ていぎ)「_タップを検知(けんち)する」を作(つく)るよ。再(さい)描画(びょうが)は不要(ふよう)。

スティック操作(そうさ)の検知(けんち)後(ご)に呼(よ)び出(だ)す

使用(しよう)箇所(かしょ)はこちら。

タップによって変数(へんすう)の値(ね)を変(か)える

スペースキーが押(お)されたときの処理(しょり)と同(おな)じように作(つく)っていくよ、とりあえずね。

条件(じょうけん)式(しき)を作(つく)る

条件(じょうけん)式(しき)はタップだけど、これはマウスのクリックで代用(だいよう)できるよ。

タップされたら加算(かさん)する

タップされてないときはゼロにする

テスト

おっと、動(うご)いてるけど、スティックを有効(ゆうこう)化(か)する最初(さいしょ)のタップでプレイヤーがジャンプしちゃうね。これはトラブルのもとになりそう。

ラッチを作(つく)る

ラッチというのは、ある変数(へんすう)の値(ね)が決(き)まった値(ね)になってないと処理(しょり)が動(うご)かないようにする仕組(しく)みのこと。今回(こんかい)は有効(ゆうこう)化(か)のタイミングでジャンプしてしまうので、最初(さいしょ)のタップではジャンプしないようなしくみを作(つく)るよ。方法(ほうほう)としては、変数(へんすう)「★スティックボタン」の値(ね)を有効(ゆうこう)化(か)のタイミングでは空白(くうはく)にしておいて、ブロック定義(ていぎ)「_タップを検知(けんち)する」で「空白(くうはく)ならジャンプしない」という条件(じょうけん)ブロックを設置(せっち)すればOK。

スティックボタンを空白(くうはく)にする

有効(ゆうこう)化(か)のタイミングでは必(かなら)ず変数(へんすう)「★スティックボタン」が空白(くうはく)になるようにしよう。

条件(じょうけん)式(しき)を作(つく)る

次(つぎ)にタップを検知(けんち)した際(さい)にスティックボタンの値(ね)が空白(くうはく)かどうかを調(しら)べる条件(じょうけん)ブロックを置(お)こう。

条件(じょうけん)式(しき)は変数(へんすう)「★スティックボタン」が空白(くうはく)よりも大(おお)きいかどうか、というちょっと変(か)わった条件(じょうけん)式(しき)を作(つく)るよ。

これを条件(じょうけん)式(しき)にハメよう。

これで初回(しょかい)のタップ時(じ)には加算(かさん)処理(しょり)は実行(じっこう)されないね。結果的(けっかてき)にジャンプもしないってなるからOKだね！

テスト……失敗(しっぱい)

これでテストしてみると、うん、ジャンプはしなくなったけど、そもそもジャンプができなくなってると思(おも)う！これでは本末転倒(ほんまつてんとう)なので、もう少(すこ)し変(か)えていくよ。

有効(ゆうこう)化(か)の条件(じょうけん)を変(か)える

「マウスが離(はな)されるまで繰(く)り返(かえ)す」というループの条件(じょうけん)を変(か)えるよ。

かわりの条件(じょうけん)式(しき)を、次(つぎ)の３つを使(つか)って作(つく)っていくよ。

組(く)み合(あ)わせるとこんな感(かん)じ↓

これによって、タップされた位置(いち)が有効(ゆうこう)範囲(はんい)内(ない)にあるかぎりはスティックの有効(ゆうこう)化(か)が続(つづ)くようになるよ！つまり、初回(しょかい)のタップはジャンプしないけど、２回(かい)目(め)以降(いこう)のタップが有効(ゆうこう)範囲(はんい)内(ない)であればジャンプしてくれるようになるっていうことだ。条件(じょうけん)式(しき)にはめておこう！

テスト

よぉしリベンジだ！テストしてみるぞ。

どう？最初(さいしょ)はスティックボタンの中身(なかみ)は空白(くうはく)だけど、一回(かい)マウスを離(はな)すと０になって、そのあとにタップ（クリック）するとジャンプしている様子(ようす)が見(み)て取(と)れるかな。このタイミングでタブレットでもテストしてみようと思(おも)う。

刮目(かつもく)せよ！iPadでテスト

これが夢(ゆめ)のマルチタップだぁ！！うぉぉぉ！

スティックの見(み)た目(め)を調整(ちょうせい)する

さぁさぁマルチタップは成(な)ったぞ。あとはちょこっと見(み)た目(め)を調整(ちょうせい)したいと思(おも)う。

グリグリ動(うご)く部分(ぶぶん)を作(つく)る

指(ゆび)に合(あ)わせてグリグリ動(うご)いてくれる白(しろ)い部分(ぶぶん)を作(つく)るよ。ちなみにコスチューム名(めい)はスティック。スプライト名(めい)と同(おな)じだからちょっと分(わ)かりづらい。

コスチュームを着替(きが)える

クローンを作(つく)る

コスチュームを元(もと)に戻(もど)す

無効(むこう)化(か)する処理(しょり)を作(つく)る

さて、スティックを有効(ゆうこう)化(か)する処理(しょり)はいままで作(つく)り込(こ)んできたけど、クローンを作(つく)ったタイミングで無効(むこう)化(か)の処理(しょり)も作(つく)っておこうと思(おも)う。といってもカンタンで、クローンを消(け)すだけだから安心(あんしん)してね。

メッセージ「スティックを無効(むこう)化(か)します」を作(つく)る

有効(ゆうこう)化(か)の最後(さいご)でメッセージを送(おく)る

クローンされた時(とき)の処理(しょり)を作(つく)る

これだけでOK！

スティックの動(うご)きを作(つく)る

では改(あらた)めてスティックの動(うご)きを作(つく)っていこう。

スティックのクローンのときだけ走(はし)る処理(しょり)を作(つく)る

まずはクローンされたときに、

スティックのクローンかどうかを調(しら)べるよ。コスチューム名(めい)で分(わ)かるね。条件(じょうけん)ブロックにコスチューム名(めい)がスティックかどうかを調(しら)べる条件(じょうけん)式(しき)をハメよう。

レイヤーを前(まえ)にする

白(しろ)いスティックはベースよりも上(うえ)にあってほしいから、レイヤーを１階層(かいそう)前(まえ)に出(で)そう。

透明度(とうめいど)を0にする

ベースの透明度(とうめいど)が80だけど、スティックは0にしておくことでクッキリ見(み)えるよ。

スティック用(よう)のメインループを作(つく)る

よし、このメインループの中(なか)も作(つく)っていこうか。

自分(じぶん)自身(じしん)に移動(いどう)する？

っと、ここでトリッキーな裏技(うらわざ)を紹介(しょうかい)するぜ！スクラッチには「◯◯へ行(い)く」というブロックがあるんだけど、選択肢(せんたくし)に自分(じぶん)自身(じしん)というものがないからクローンに本体(ほんたい)を追(お)いかけてほしい時(とき)に困(こま)るんだ。ひょっとしたら経験(けいけん)あるかな？下(した)のスクショを見(み)てみて。これはスプライト「スティック」を表示(ひょうじ)した時(とき)の「◯◯へ行(い)く」ブロックの選択肢(せんたくし)なんだけど、スティックはないでしょ？

そこで裏技(うらわざ)の登場(とうじょう)だ。手順(てじゅん)を説明(せつめい)するよ。

1. いったんスプライト「プレイヤー」を選(えら)んでみて。
   
2. 「◯◯へ行(い)く」ブロックの選択肢(せんたくし)を開(ひら)いてみて。スティックがあるよね。
   
3. スティックを選(えら)んだらドラッグ・アンド・ドロップで、スプライト「スティック」にコピーしてみて。
   
4. これでスプライト「スティック」を開(ひら)いてみよう！
   
5. どこかに今(いま)のブロックが見(み)つかるはず！
   

わぉ！出来(でき)ないと思(おも)っていたことが出来(でき)ちゃったね！

メインループ内(ない)に置(お)く

これで常(つね)に白(しろ)いグリグリ動(うご)かすスティックが、ベースの部分(ぶぶん)のセンターにくっついてくるようになったぞ！ナイスぅ！

左右(さゆう)上下(じょうげ)に動(うご)くようにする

ただ、ずっとセンターに白(しろ)いスティックがあるだけでは意味(いみ)ないよね。指(ゆび)の動(うご)きに合(あ)わせて白(しろ)いスティックが動(うご)くようにしよう。カンタンだよ。

左右(さゆう)に動(うご)くようにする

ポイントは円(えん)の内側(うちがわ)からはみ出(で)ないようにするところだけど、すでに一度(いちど)実装(じっそう)したからサクッとやっちゃおう。この４つを使(つか)っていくよ。

組(く)み合(あ)わせてX座標(ざひょう)が円(えん)の内側(うちがわ)で動(うご)くような演算(えんざん)にしよう！

メインループ内(ない)に置(お)くよ。

上下(じょうげ)に動(うご)くようにする

コピってY座標(ざひょう)にも動(うご)きをつけよう。

テストしてみよう、なんかビビる！

うぉぉぉぉ！スティックやんけぇ！ってなる！ならないｗ？

右側(みぎがわ)のスティックも作(つく)る

よしよし、左側(ひだりがわ)のスティックは完成(かんせい)だ。あとはマルチタップできることをユーザーに分(わ)かりやすく伝(つた)えるために、右側(みぎがわ)にもスティックを表示(ひょうじ)するようにしよう。

待機(たいき)中(ちゅう)のクローンを作(つく)る

コスチュームはすでにスタータープロジェクト内(ない)に入(はい)っているものを使(つか)うよ。名前(なまえ)は「待機(たいき)中(ちゅう)」というコスチュームね。

置(お)く場所(ばしょ)に注意(ちゅうい)

着替(きが)えよう！必(かなら)ずコスチューム「スティック」の前(まえ)に置(お)こう。

• なぜココなの？

  u003cpu003e表示(ひょうじ)する階層(かいそう)の関係(かんけい)上(じょう)、スティックよりも前(まえ)に表示(ひょうじ)しておく必要(ひつよう)があるんだ。こうすることで正(ただ)しく白(しろ)いスティックが画面(がめん)に見(み)えるし、この順番(じゅんばん)を守(まも)らないとスティックよりも他(ほか)のクローンが上(うえ)に描画(びょうが)されてしまって見(み)えなくなってしまうんだ。u003c/pu003e

クローンを作(つく)る

反対(はんたい)側(がわ)（右側(みぎがわ)）に表示(ひょうじ)する

単純(たんじゅん)にX座標(ざひょう)をマイナスからプラスにすれば反対(はんたい)側(がわ)に表示(ひょうじ)できる。

値(ね)の変更(へんこう)はカンタンだよ、下(した)の動画(どうが)をチェックしてね。

タップしたら表示(ひょうじ)されるようになった！

タップ（クリック）したら表示(ひょうじ)されて、スティックが無効(むこう)化(か)されたら消(き)えている様子(ようす)が見(み)て取(と)れるね！ナイス！

タップで有効(ゆうこう)化(か)させる

待機(たいき)中(ちゅう)は「タップで有効(ゆうこう)化(か)」という文字(もじ)が出(で)ているね。つまりタップしたら有効(ゆうこう)化(か)されるようにするのだけど、実(じつ)はその処理(しょり)はもう出来(でき)てる。あとはコスチュームを有効(ゆうこう)化(か)状態(じょうたい)に変更(へんこう)すればいいだけだよ。

• タップして有効(ゆうこう)化(か)する処理(しょり)って、いつ作(つく)ったっけ？

  u003cpu003eほら、変数(へんすう)「★スティックボタン」の値(ね)を最初(さいしょ)は空白(くうはく)にしておいて、最初(さいしょ)のタップで0になって、２回(かい)目(め)以降(いこう)で１になってジャンプするようにラッチ処理(しょり)を作(つく)ったところだよ。u003c/pu003e

有効(ゆうこう)化(か)のタップを検知(けんち)する

このクローンが表示(ひょうじ)されているということは左側(ひだりがわ)のスティックがタップされているはずなので、有効(ゆうこう)化(か)するには「指(ゆび)が離(はな)れたら」という条件(じょうけん)式(しき)を作(つく)ればOK。指(ゆび)が離(はな)れると変数(へんすう)「★スティックボタン」の値(ね)が０になるから、次(つぎ)のタップからはジャンプが機能(きのう)するというわけだね。ちょい直感的(ちょっかんてき)に分(わ)かりづらいね。次(つぎ)の３つを使(つか)うよ。

組(く)み合(あ)わせて配置(はいち)する。

コスチュームを着替(きが)える

このコスチュームもスタータープロジェクト内(ない)にあるよ。

指(ゆび)が離(はな)れたら有効(ゆうこう)化(か)されるようになった

有効(ゆうこう)化(か)されて文字(もじ)が消(き)えているのが分(わ)かるね！OK！

フィードバックを実装(じっそう)する

さっきユーザビリティの話(はなし)を少(すこ)ししたけど、ここでも重要(じゅうよう)なユーザビリティの処理(しょり)を実装(じっそう)するよ。本物(ほんもの)のボタンなら押(お)したらカチって音(おと)がしたり、押(お)した触感(しょっかん)が指(ゆび)にあるよね。そういう押(お)したって分(わ)かることをフィードバックと呼(よ)んだりする。いろんな呼称(こしょう)があるけど、フィードバックが分(わ)かりやすいかなと。

タップされたかどうかで濃(こ)さを変(か)える

今(いま)のままだと右(みぎ)スティックをタップしたらプレイヤーがジャンプするから、まぁ押(お)せたんだねってユーザーにも伝(つた)わるけど、さらに一歩(ぽ)進(すす)めて右(みぎ)スティックがタップされたら色(いろ)を濃(こ)くしてみようと思(おも)う。カンタンに実装(じっそう)できるからやっちゃおう！

右(みぎ)スティック用(よう)のメインループを作(つく)る

条件(じょうけん)ブロックを置(お)く

タップされたか調(しら)べる

タップされたら透明度(とうめいど)を25に減(へ)らす

タップされてないときは透明度(とうめいど)を75にする

最終(さいしゅう)テスト

これですべての必要(ひつよう)な処理(しょり)が実装(じっそう)できた！お疲(つか)れ様(さま)！最後(さいご)にiPadでマルチタップのテストをしてみるね！

バックパック化(か)して使(つか)ってみる

これで完成(かんせい)！あとはバックパック化(か)して実際(じっさい)に他(ほか)の作品(さくひん)をモバイル化(か)してみようか。次回(じかい)はこのスティックを実践的(じっせんてき)に使(つか)っていくサンプル手順(てじゅん)を提示(ていじ)したいと思(おも)う！といってもスティック自体(じたい)はもう完成(かんせい)しているから、どんどん自分(じぶん)の作品(さくひん)でモバイル対応(たいおう)を試(ため)しちゃおう！