前回、Googleスライドを使って、イラストを自動で変える方法の①を書いたので、その続きです。前回までの作業工程はこちらから↓↓
前回、「ドリル練習」というボタンを作るところまでやりました。「」の名前は好きな名前でOKなので、「イラスト出現」に変えてみました。
赤い丸で囲まれているように、新しいボタンが追加できたら、次は1枚目のイラストを用意します。
これは、自動化できないので、自分が使いたいイラストを用意してください。
今回は、テーブルは変えず、他の3つのイラストを変えていきます。
1枚目のスライドが完成したら、いよいよ自動的にイラストを変えてくれるスクリプトを書きます。
まずは、アクティブ(これから使いたい)なファイルをコンピューターに教えます。
「function practice_start」で、「イラスト出現」に加える機能ですよ〜と伝えて(コンピューターに)、SlidesApp.getActivePresentation()でアクティブなファイルはこれですよ〜と教えます。
ちなみに、var の後の名前もなんでもOKだそうです。(これが困るんだけど・・・)
次は、機能を追加したいスライド(1枚目のスライド)はこれですよ〜とコンピューターに教えます。
getSlideById(g152b55f〜)というところです。Idがファイルによって違うので、自分で作ったスライドのIdを入れてください。IdはGoogleスライドのアドレスでわかります。
機能を追加したいファイル、スライドをコンピューターに教えた後は、自動でスライドを追加してもらいます。それが、
var newSlide = 〜appendSlide(s1)という部分です。
ここまでやって、保存→実行をすると、1枚目と全く同じスライドが2枚目に自動で生成されるはずです。
次は、イラストの用意です。スプレッドシートにこんなファイルを作ります。
新しく用意するのが面倒なので🤣、ありますの練習用を再利用。
私はいらすとやさんでイラストを用意しましたが、お好きなpngファイルをご用意ください。
え!!面倒くさい・・・と正直、私も思いました💧でも、1回ファイルを用意してしまえば、別の練習でも活用できるし、新しいファイルを作るにしても作りやすくなります。空いている時間にちょこちょこ進めれば、後々楽になりますよ♪♪
用意したスプレッドシートを読み込みます。Idは先ほどと同じように、スプレッドシートのURLから取得してください。
シートの読み込みができたら、読み込んで欲しい部分を指定します。今回のファイルではA列に書いた本、パソコンなどの文字は不要なので、B列から指定をします。
問題はここから・・・。イラストを読み込んだら、ランダムで表示をしてほしい。
ランダムにするために、まずはスプレッドシートの順番をランダムにします。
それが、Math.randomです。-0.5がついているのは、プラスマイナスのバランスを取るためだそうです。
なんでバランス取らないといけないの??と私もここが1番難しくて何度もにゃーに聞きました😅💦たった今、説明を聞いて分かった気になったので整理する意味でも書いてみます。
えーと、random という関数は、0〜1の範囲をとるそうです。もし、常に+になってしまうと、コンピューターは並べ替える必要性を理解しないのだとか。-0.5〜0.5の範囲とすることで、時々+の数字、時々−の数字となり、−の時(あるいは+のとき)は順番を並べ替えると判断するそう。
0.3845-0.5=-0.1155
0.7823-0.5=0.2823
というふうに、+と−の結果がでることで順番をバラバラにしてくれるそうです。
うん、難しい。
ちなみに、にゃーの愛するScalaという言語ではこの操作が必要ないとのことですが、キャパオーバーなので詳しくはわかりません。
後は、並べ替えたファイルの中から3つを選んで、イラストをかえてもらうだけ。
これで、イラストを自動で並べ替えてくれるスライドの完成です🎉🎉
と、分かったような顔で書きましたが、「こんなのが作りたい」と思って、じゃあどんな方法で実現できるかを思いつくか否かというのが大きな壁。
いくつかのサイトでプログラムの勉強をちょこっとやってみるものの、実際に自分がやりたい、作りたいものを一人で作れるようになるまでにはまだまだ相当な時間とにゃーのアシストが必要そうです。。。
ですが、学習者にも教師にもメリットのあるものを作りたいと思っているので、諦めずにコツコツやっていきたいと思います。