初めてのGAS(Google Apps Script)自作などのサンプル集、動画と書籍の紹介

このコーナーでは、Googleの様々なサービスを連携して開発出来るプログラミング言語、GAS(Google Apps Script グーグル アップス スクリプト)で、簡単な自作サンプルなどを掲載して、学習のアウトプットをしています。

自作の他に、GASの先人の方のWebで公開されている教材を、自分なりに初心者目線で作ってアウトプットしています。

自分の学習を通して、どなたかのお役に立てればと思い、ブログにまとめることに致しました。

また、オススメのサイトや動画や書籍なども紹介しております。
※ 私はサイトや動画、書籍を紹介しているだけのただの一視聴者であり、投稿者の方とは面識がございません。

いつも隣にITのお仕事」様のブログで自習して自分の環境で動かしたコードも掲載しています。

■ 使用教材 ■

・ウェブサイト
【保存版】初心者向け実務で使えるGoogle Apps Script完全マニュアル


・書籍
上記のサイトの方の記事がわかりやすいので、同じ方の書籍を購入しました。絶賛、ガリ勉中!!!(=^x^=)mm。。。

■ スプレッドシートとGASにまずは慣れる ■

ハンターハンターで学ぶ、「とりあえず、スプレッドシートとGASプログラミングで関数・グラフの基礎の基礎が分かるようなる」コースです。

episode1 「セル操作で入力と消去」

episode2 「文字入力と消去をボタン操作で行う」

episode3 「範囲を指定してまとめて入力(二次元配列は団地だ!)」

episode4 「ヒソカチェックで、IFとループを一気に学ぶ」

episode5 「指定したセル範囲のフォントを変える」

episode6 「指定したセル範囲に色を付ける」

episode7 「キャラの身長で演算(平均・条件に該当する数のカウント)」

episode8 (最終回)「キャラの身長をシンプルなグラフ化する」

■ 学習コンテンツpaizaラーニングのレベルアップ問題集をPythonとGASで解いてみたサンプル集■

PythonとGASでpaizaレベルアップ問題集を解いてみた集


■ スプレッドシートとGASに慣れてきたら、GASでChatworkにメッセージを送って見る ■

「ねこあつめその1」文字の表示と簡単な計算


「ねこあつめその2」セルを選択して出力する

「ねこあつめその3」Forループを使って猫たちの名前を取り出す


「ねこあつめその4」IF文で条件に該当するねこ名を出力する

「ねこあつめその5」出力したセルに処理済み「済」を出力する

「ねこあつめその6」ループに制御を加えて一つずつ出力する

「ねこあつめその7」の行の範囲を取得する

「ねこあつめその8」の右端の列をクリアする

「ねこあつめその9」Chatworkを使う前にIT用語学習

「ねこあつめその10」GASで「Chatwork」を使ってみる。


「ねこあつめその11」GASで「Chatwork」に送る(=^x^=)mm

「ねこあつめその12」GASでChatworkに「トリガー」で時限式に送る

「ねこあつめシリーズその13」GASで「ねこあつめ」ChatworkのAPIトークンにプロパティストアを使って格納する

「ねこあつめシリーズその14」GASで「ねこあつめ」のデータをChatworkに送信にながら配列に慣れていく

「ねこあつめシリーズその15」Chatworkに送るメッセージを装飾する

「ねこあつめシリーズその16」ドキュメンテーションコメントを追加(最終回)

■ オオタニサン!! ■

スプレッドシートの二次元配列の取り扱いに慣れてきたら、メジャーリーガー、エンジェルスの二刀流、大谷翔平さんが高校時代にドラフト1位8球団から取得するのに使った、マンダラシートを作ってみる

大谷翔平の目標シート

◆フォーム作成の学習ノート◆

<ねこフォーム1>「ねこあつめ親睦会」のフォームを作ってみる

<ねこフォーム2>GASで作成したフォームを指定のフォルダに格納する

<ねこフォーム3>GASで作成したフォームに「ねこあつめ」の「おなまえ」と「あそんだグッズ」を追加する

<ねこフォーム4>ねこあつめフォームに「メールアドレス」を追加する

<ねこフォーム5>ねこあつめフォームに「ラジオボタン」を追加する

<ねこフォーム6>ねこあつめフォームに「チェックボックス」を追加する

<ねこフォーム7>ねこあつめフォームに「プルダウンリスト」を追加する

<ねこフォーム8>ねこあつめフォームに「スケールアイテム」と「パラグラフテキストアイテム」を追加する

◆ フォーム実践編 ◆

<ねこフォーム実践編1>就職セミナーアンケート


<ねこフォーム実践編2>プログラミング学習アンケート

<ねこフォーム実践編3>「就職氷河期世代&大人の発達障害」読者アンケート

■ Gmail ■

メール定型文を下書きへGo!!

■お役立ち動画の紹介■
(準備中)

■参考文献の紹介■
初めてGASを学ぶ方向け。
スプレッドシートの基本的な使い方からGASのベースとなるJavaScriptの基礎文法、GASでの初歩的なプログラミングを学べます。

GASに少し慣れて来たら、基礎固めとリファレンスとしてこの本でじっくり学べます。

実務に役立つサンプルを作りながらGASを体感出来る本です。

一通り基礎が身についた上での中級レベルでありながら基礎文法や実務で実用的なツールのスクリプトが学べる本です。
GASを極めたい方にオススメです。

プログラミングのアンケートにご協力頂ける方はこちらのフォームで勉強法など色々と教えて下さい。

サイトマップはこちらから

■ 関連記事 ■

自己紹介
コロナ禍、アフターコロナの働き方(Googleが提供するツール)
スプレッドシート
フォーム
カレンダー
 
メインメニューに戻る


Gallery of Examples FBO Canvasを作ってみた!

この記事では、「Python Kivyプログラミング Pythonで作るマルチタッチアプリ」という本を頼りに、章の終わりごとに本と対応するKivy公式サイト(英語で泣きそう)のサンプルプログラムに挑戦しています。

上の本の、5章を終えた所までで類題として作れるアプリです。

Gallery of Examples FBO Canvas

このアプリは、

この記事の分からない英単語を調べながら読んで行きます。
ちなみに私の英語能力は英検4級(3級落ちた)です。

・instead …代わりに

・Buffer…一時保存用の記憶領域

・attach….添付

「Kivyというライブラリを使ってPythonでアプリを作って行く」に戻る

コードです。

all=(‘FboFloatLayout’,)

from kivy.graphics import Color,Rectangle,Canvas,ClearBuffers,ClearColor
from kivy.graphics.fbo import Fbo
from kivy.uix.floatlayout import FloatLayout
from kivy.properties import ObjectProperty,NumericProperty
from kivy.app import App
from kivy.core.window import Window
from kivy.animation import Animation
from kivy.factory import Factory

class FboFloatLayout(FloatLayout):
texture=ObjectProperty(None,allownone=True)
alpha=NumericProperty(1)

def init(self,kwargs):
self.canvas=Canvas()
with self.canvas:
self.fbo=Fbo(size=self.size)
self.fbo_color=Color(1,1,1,1)
self.fbo_rect=Rectangle()
with self.fbo: ClearColor(0,0,0,0)
ClearBuffers()

#全てのインストラクションを待ってキャンバスにテクスチャーを設置する self.texture=self.fbo.texture
super(FboFloatLayout,self).init(kwargs)
def add_widget(self,largs):

#キャンバスの代わりにグラフィックを添付するトリック canvas=self.canvas
self.canvas=self.fbo ret=super(FboFloatLayout,self).add_widget(largs)
self.canvas=canvas
return ret

def remove_widget(self,largs): canvas=self.canvas self.canvas=self.fbo super(FboFloatLayout,self).remove_widget(largs)
self.canvas=canvas

def on_size(self,instance,value):
self.fbo.size=value
self.texture=self.fbo.texture
self.fbo_rect.size=value

def on_pos(self,instance,value):
self.fbo_rect.pos=value

def on_texture(self,instance,value):
self.fbo_rect.texture=value

def on_alpha(self,instance,value):
self.fbo_color.rgba=(1,1,1,value)

class ScreenLayerApp(App):
def build(self):
f=FboFloatLayout()
b=Factory.Button(text=”FBO”,size_hint=(None,None))
f.add_widget(b)

def anim_btn(*args):
if b.pos[0]==0:
Animation(x=f.width-b.width).start(b)
else:
Animation(x=0).start(b)
b.bind(on_press=anim_btn)
return f

if name == “main”:
ScreenLayerApp().run()

ボタン「FBO」が左右に動くアニメーションが作れました。

これを上下に動くように遊んでみます。


class ScreenLayerApp(App):
def build(self):
f=FboFloatLayout()
b=Factory.Button(text=”FBO”,size_hint=(None,None))
f.add_widget(b)

#ここを、xをy、widthをheightに変える
def anim_btn(*args):
if b.pos[0]==0:
Animation(y=f.height-b.height).start(b)
else:
Animation(y=0).start(b)
b.bind(on_press=anim_btn)
return f

このように遊べました(=^x^=)

「Kivyというライブラリを使ってPythonでアプリを作って行く」に戻る

■ 関連記事 ■

Python自作サンプル集
Swiftでアプリ開発される方向け
これからプログラミングを始める方へ
プログラミングと資格について

Kivy Gallery Examples 「Lines Extended Demo」を作ってみた!

この記事では、「Python Kivyプログラミング Pythonで作るマルチタッチアプリ」という本を頼りに、章の終わりごとに本と対応するKivy公式サイト(英語で泣きそう)のサンプルプログラムに挑戦しています。

上の本の、5章を終えた所までで類題として作れるアプリです。

Kivy Gallery Examples 「Lines Extended Demo」

このアプリは、円、楕円、長方形、とベジエ曲線(多分一番分かりやすいと思うサイト)を描きます。

この記事の分からない英単語を調べながら読んで行きます。
ちなみに私の英語能力は英検4級(3級落ちた)です。

extended…拡張された
static…静的
padding…余白
spacing…間隔

「Kivyというライブラリを使ってPythonでアプリを作って行く」に戻る

コードです。

from kivy.app import App
from kivy.uix.gridlayout import GridLayout
from kivy.uix.widget import Widget
from kivy.lang import Builder

Builder.load_string(”’

<LineEllipse1>:#赤い楕円1
canvas:
Color:
rgba:1,.1,.1,.9
Line:
width:2.
ellipse:(self.x,self.y,self.width,self.height)
Label:
center:root.center
text:’Ellipse’

<LineEllipse2>:#赤い楕円2
canvas:
Color:
rgba:1,.1,.1,.9
Line:
width:2.
ellipse:(self.x,self.y,self.width,self.height,90,180)
Label:
center:root.center
text:’Ellipse from 90 to 180′
#fun result with low segments!

<LineEllipse3>:#赤い楕円3
canvas:
Color:
rgba:1,.1,.1,.9
Line:
width:2.
ellipse:(self.x,self.y,self.width,self.height,90,720,10)
Label:
center:root.center
text:’Ellipse from 90 to 720\n10 segments’
halign:’center’

<LineCircle1>:#緑の円1
canvas:
Color:
rgba:.1,1,.1,.9
Line:
width:2.
circle:
(self.center_x,self.center_y,min(self.width,self.height)/2)
Label:
center:root.center
text:’Circle’

<LineCircle2>:#緑の円2
canvas:
Color:
rgba:.1,1,.1,.9
Line:
width:2.
circle:
(self.center_x,self.center_y,min(self.width,self.height)/2,90,180)
Label:
center:root.center
text:’Circle from 90 to 180′

<LineCircle3>:#緑の円3
canvas:
Color:
rgba:.1,1,.1,.9
Line:
width:2.
circle:
(self.center_x,self.center_y,min(self.width,self.height)/2,90,180,10)
Label:
center:root.center
text:’Circle from 90 to 180\n10 segments’
helign:’center’

<LineCircle4>:#緑の円4
canvas:
Color:
rgba:.1,1,.1,.9
Line:
width:2.
circle:
(self.center_x,self.center_y,min(self.width,self.height)/2,0,360)
Label:
center:root.center
text:’Circle from 0 to 360′
halign:’center’

<LineRectangle>:#青い四角
canvas:
Color:
rgba:.1,.1,1,.9
Line:
width:2.
rectangle:(self.x,self.y,self.width,self.height)
Label:
center:root.center
text:’Rectangle’

<LineBezier>:#青いベジェ曲線
canvas:
Color:
rgba:.1,.1,1,.9
Line:
width:2.
bezier:
(self.x,self.y,self.center_x-40,self.y+100,
self.center_x+40,self.y-100,self.right,self.y)
Label:
center:root.center
text:’Bezier’
”’)


class LineEllipse1(Widget):
pass
class LineEllipse2(Widget):
pass
class LineEllipse3(Widget):
pass
class LineCircle1(Widget):
pass
class LineCircle2(Widget):
pass
class LineCircle3(Widget):
pass
class LineCircle4(Widget):
pass
class LineRectangle(Widget):
pass
class LineBezier(Widget):
pass

class LineExtendedApp(App):
def build(self):
root=GridLayout(cols=2,padding=50,spacing=50)
root.add_widget(LineEllipse1())
root.add_widget(LineEllipse2())
root.add_widget(LineEllipse3())
root.add_widget(LineCircle1())
root.add_widget(LineCircle2())
root.add_widget(LineCircle3())
root.add_widget(LineCircle4())
root.add_widget(LineRectangle())
root.add_widget(LineBezier())
return root


if name == ‘main’:
LineExtendedApp().run()

実行結果です。

ここから少し遊びます(=^x^=)

長方形とベジェ曲線が見づらいので、色を黄色に変えます。

<LineRectangle>:#黄色い四角
canvas:
Color:
rgba:1,1,.1,.9
Line:
width:2.
rectangle:(self.x,self.y,self.width,self.height)
Label:
center:root.center
text:’Rectangle’
<LineBezier>:#黄色いベジェ曲線
canvas:
Color:
rgba:1,1,.1,.9
Line:
width:2.
bezier:
(self.x,self.y,self.center_x-40,self.y+100,
self.center_x+40,self.y-100,self.right,self.y)
Label:
center:root.center
text:’Bezier’

このようになりました。

では、楕円2の孤の表示される角度を変えて、色をマゼンタ(ピンク)に変え、太さを5にします。

<LineEllipse2>:#ピンクの楕円2
canvas:
Color:
rgba:1,.1,1,.9
Line:
width:5.
ellipse:(self.x,self.y,self.width,self.height,180,270)
Label:
center:root.center
text:’Ellipse from 180 to 270′

次に、多角形の角数を10角から20角に変えます。

<LineEllipse3>:#赤い楕円3
canvas:
Color:
rgba:1,.1,.1,.9
Line:
width:2.
ellipse:(self.x,self.y,self.width,self.height,90,720,20)
Label:
center:root.center
text:’Ellipse from 90 to 720\n20 segments’
halign:’center’

最後に円4を0度から360度のところを270度に変えます。

<LineCircle4>:#緑の円4
canvas:
Color:
rgba:.1,1,.1,.9
Line:
width:2.
circle:
(self.center_x,self.center_y,min(self.width,self.height)/2,0,270)
Label:
center:root.center
text:’Circle from 0 to 270′
halign:’center’

このように遊べました(=^x^=)

「Kivyというライブラリを使ってPythonでアプリを作って行く」に戻る

■ 関連記事 ■

Python自作サンプル集
Swiftでアプリ開発される方向け
これからプログラミングを始める方へ
プログラミングと資格について

Kivy Gallery Examples 「Bezier Example」を作ってみた!

この記事では、「Python Kivyプログラミング Pythonで作るマルチタッチアプリ」という本を頼りに、章の終わりごとに本と対応するKivy公式サイト(英語で泣きそう)のサンプルプログラムに挑戦しています。

上の本の、5章を終えた所までで類題として作れるアプリです。

Kivy Gallery Examples 「Bezier Example」

このアプリは、多角形とベジェ曲線(多分一番分かりやすいと思うサイト)を2つのスライダーを使って描きます。
紫の多角形と、赤いベジエ曲線です。

この記事の分からない英単語を調べながら読んで行きます。
ちなみに私の英語能力は英検4級(3級落ちた)です。

bezier…ベジェ曲線
computed…計算された
polygon…多角形
recompute…再計算

「Kivyというライブラリを使ってPythonでアプリを作って行く」に戻る

from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.slider import Slider
from kivy.graphics import Color,Bezier,Line


class BezierTest(FloatLayout):
def init (self,points=[],loop=False,args,kwargs): super(BezierTest,self).init(args,kwargs)
self.d=10 #pixel tolerance(支える) when clicking on a point
self.points=points
self.loop=loop
self.current_point=None #index of point being dragged

with self.canvas:
Color(1.0,0.0,0.0)
self.bezier=Bezier(points=self.points,
segments=150,
loop=self.loop,
dash_length=100,
dash_offset=10)
Color(1.0,0.0,1.0)
self.line=Line(points=self.points+self.points[:2],
dash_offset=10,
dash_length=100)

s=Slider(y=0,pos_hint={‘x’:.3},size_hint=(.7,None),height=50)
s.bind(value=self._set_bezier_dash_offset)
self.add_widget(s)

s=Slider(y=50,pos_hint={‘x’:.3},size_hint=(.7,None),height=50)
s.bind(value=self._set_line_dash_offset)
self.add_widget(s)

def _set_bezier_dash_offset(self,instance,value):
#effect to raduce(減らす) length while increase offset
self.bezier.dash_length=100-value
self.bezier.dash_offset=value

def _set_line_dash_offset(self,instance,value):
#effect to reduce length while increase offset
self.line.dash_length=100-value
self.line.dash_offset=value

def on_touch_down(self,touch):
if self.collide_point(touch.pos[0],touch.pos[1]):
for i,p in enumerate(list(zip(self.points[::2],
self.points[1::2]))):

if(abs(touch.pos[0]-self.pos[0]-p[0])<self.d and \
abs(touch.pos[1]-self.pos[1]-p[1])<self.d):
self.current_point=i+1
return True
return super(BezierTest,self).on_touch_down(touch)

def on_touch_up(self,touch):
if self.collide_point(touch.pos[0],touch.pos[1]):
if self.current_point:
self.current_point=None
return True

return super(BezierTest,self).on_touch_up(touch)
def on_touch_move(self,touch):
if self.collide_point(touch.pos[0],touch.pos[1]):
c=self.current_point

if c:
self.points[(c-1)2]=touch.pos[0]-self.pos[0] self.points[(c-1)2+1]=touch.pos[1]-self.pos[1]
self.bezier.points=self.points
self.line.points=self.points+self.points[:2]
return True
return super(BezierTest,self).on_touch_move(touch)

class Main(App):
def build(self):
from math import cos,sin,radians
x=y=150
z=100
#Pacman!
points=[x,y]
for i in range(45,360,45):
i=radians(i)
points.extend([x+cos(i)z,y+sin(i)z])
return BezierTest(points=points,loop=True)

if name == ‘main’:
Main().run()

実行結果です。

「Kivyというライブラリを使ってPythonでアプリを作って行く」に戻る

<<関連記事>>

Python自作サンプル集
Swiftでアプリ開発される方向け
これからプログラミングを始める方へ
プログラミングと資格について

Kivy Gallery Examples 「Canvas stress」を作ってみた!

この記事では、「Python Kivyプログラミング Pythonで作るマルチタッチアプリ」という本を頼りに、章の終わりごとに本と対応するKivy公式サイト(英語で泣きそう)のサンプルプログラムに挑戦しています。

上の本の、5章を終えた所までで類題として作れるアプリです。

Kivy公式Gallery of Examples 「Canvas stress」

このアプリは、画面下のボタンを押すと、その分だけ小さいカラフルな四角を、画面に散りばめることが出来ます。

”’Canvas stress
この例は、指定のボタンを押すと小さい四角が追加されます。
ボタンは黒いスクリーンの下にあります。
”’

「Kivyというライブラリを使ってPythonでアプリを作って行く」に戻る


from kivy.uix.button import Button
from kivy.uix.widget import Widget
from kivy.uix.label import Label
from kivy.uix.boxlayout import BoxLayout
from kivy.app import App
from kivy.graphics import Color,Rectangle
from random import random as r
from functools import partial


class StressCanvasApp(App):
def add_rects(self,label,wid,count,largs): label.text=str(int(label.text)+count)

with wid.canvas:

#ここで、大きさを変えることができる
for x in range(count): Color(r(),1,1,mode=’hsv’)
Rectangle(pos=(r()wid.width+wid.x,
r()wid.height+wid.y),size=(20,20))


def double_rects(self,label,wid,largs):
count=int(label.text)
self.add_rects(label,wid,count,largs)


def reset_rects(self,label,wid,largs):
label.text=’0′
wid.canvas.clear()

def build(self):
wid=Widget()

label=Label(text=’0′)
btn_add100=Button(text=’+ 100 rects’,
on_press=partial(self.add_rects,label,wid,100))

btn_add500=Button(text=’+ 500 rects’,
on_press=partial(self.add_rects,label,wid,500))

btn_double=Button(text=’x 2′,
on_press=partial(self.double_rects,label,wid))

btn_reset=Button(text=’Reset’,
on_press=partial(self.reset_rects,label,wid))

layout=BoxLayout(size_hint=(1,None),height=50)
layout.add_widget(btn_add100)
layout.add_widget(btn_add500)
layout.add_widget(btn_double)
layout.add_widget(btn_reset)
layout.add_widget(label)
root=BoxLayout(orientation=’vertical’)
root.add_widget(wid)
root.add_widget(layout)
return root

if name == ‘main’:
StressCanvasApp().run()

このような四角が表示されました。

ここからちょっと遊んでみます(=^x^=)
上のコードの「大きさを変えられる」のところで、size=(20,20)を100にしてみます。

このように遊べました。

「Kivyというライブラリを使ってPythonでアプリを作って行く」に戻る

<<関連記事>>

Python自作サンプル集
Swiftでアプリ開発される方向け
これからプログラミングを始める方へ
プログラミングと資格について

Kivy tutorial 006: Let’s draw something(お絵かき);を作ってみた!

この記事では、「Python Kivyプログラミング Pythonで作るマルチタッチアプリ」という本を頼りに、章の終わりごとに本と対応するKivy公式サイト(英語で泣きそう)のサンプルプログラムに挑戦しています。

上の本の、5章を終えた所までで類題として作れるアプリです。

公式サイト
Kivy tutorial 006: Let’s draw something

「Kivyというライブラリを使ってPythonでアプリを作って行く」に戻る

前回 の記事の最後のコードに追記したコードを掲載します。
追記したところはコメントがついています。

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.slider import Slider
from kivy.uix.widget import Widget
from kivy.graphics import Rectangle,Color


class DrawingWidget(Widget):
def init(self):
super(DrawingWidget,self).init()
with self.canvas:
Color(1,1,1,1)#赤、緑、青、透明度
self.rect=Rectangle(size=(self.size),
pos=self.pos)

#前回のコードから追記 
Color(1,0,0,1)
Rectangle(size=(300,100),
pos=(300,200))
self.bind(pos=self.update_rectangle,
size=self.update_rectangle)

def update_rectangle(self,instance,value):
self.rect.pos=self.pos
self.rect.size=self.size

class DrawingApp(App):
def build(self):
root_widget=DrawingWidget()
return root_widget
DrawingApp().run()

実行します。

このコードを修正・追記して、ランダムな色で落書きが出来るようにします。

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.slider import Slider
from kivy.uix.widget import Widget
from kivy.graphics import Rectangle,Color,Line
from random import random


class DrawingWidget(Widget):
def init(self):
super(DrawingWidget,self).init()
with self.canvas:
Color(1,1,1,1)#赤、緑、青、透明度
self.rect=Rectangle(size=self.size,
pos=self.pos)

#修正
self.rect_colour=Color(1,0,0,1)
Rectangle(size=(300,100),
pos=(300,200))
self.bind(pos=self.update_rectangle,
size=self.update_rectangle)
def update_rectangle(self,instance,value):
self.rect.pos=self.pos
self.rect.size=self.size
def on_touch_down(self,touch):

super(DrawingWidget,self).on_touch_down(touch)
with self.canvas:
Color(random(),random(),random())
self.line=Line(points=[touch.pos[0],touch.pos[1]],width=2)

def on_touch_move(self,touch):
self.line.points=self.line.points+[touch.pos[0],touch.pos[1]]

class DrawingApp(App):
def build(self):
root_widget=DrawingWidget()
return root_widget

DrawingApp().run()

今日の日付を書きました。

「Kivyというライブラリを使ってPythonでアプリを作って行く」に戻る

<<関連記事>>

Python自作サンプル集
Swiftでアプリ開発される方向け
これからプログラミングを始める方へ
プログラミングと資格について

Kivy tutorial 005: A drawing app(長方形描画);を作ってみた!

この記事では、「Python Kivyプログラミング Pythonで作るマルチタッチアプリ」という本を頼りに、章の終わりごとに本と対応するKivy公式サイト(英語で泣きそう)のサンプルプログラムに挑戦しています。

上の本の、5章を終えた所までで類題として作れるアプリです。

Kivy tutorial 005: A drawing app

「Kivyというライブラリを使ってPythonでアプリを作って行く」に戻る

赤い四角のすぐ上のプログラムを、エディタ Visual Studio Codeに書いていってターミナルで実行します。

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.slider import Slider
from kivy.uix.widget import Widget
from kivy.graphics import Rectangle,Color


class DrawingWidget(Widget):
def init(self):
super(DrawingWidget,self).init()

with self.canvas:
Color(1,0,0,1)#赤、緑、青、透明度
Rectangle(size=(300,100),
pos=(300,200))
class DrawingApp(App):

def build(self):
root_widget=DrawingWidget()
return root_widget
DrawingApp().run()

このような赤い四角が表示されました。
ここから少し遊びたいと思います。

色をシアン(青と緑)に変えて、位置を動かします。

with self.canvas:
Color(0,1,1,1)#赤、緑、青、透明度
Rectangle(size=(300,100),
pos=(300,600))

このように書き換えました。

更に、下記のコードを追加します。

with self.canvas:
Color(1,1,0,1)#赤、緑、青、透明度
Rectangle(size=(300,100),
pos=(0,700))


with self.canvas:
Color(1,0,1,0.7)#赤、緑、青、透明度
Rectangle(size=(300,100),
pos=(0,500))

with self.canvas:
Color(0,1,1,0.6)#赤、緑、青、透明度
Rectangle(size=(300,100),
pos=(300,600))

with self.canvas:
Color(1,1,0,1)#赤、緑、青、透明度
Rectangle(size=(300,100),
pos=(600,700))

with self.canvas:
Color(1,0,1,0.7)#赤、緑、青、透明度
Rectangle(size=(300,100),
pos=(600,500))

with self.canvas:
Color(0,1,1,0.6)#赤、緑、青、透明度
Rectangle(size=(300,100),
pos=(900,600))
with self.canvas:
Color(1,1,0,1)#赤、緑、青、透明度
Rectangle(size=(300,100),
pos=(1200,700))
with self.canvas:
Color(1,0,1,0.7)#赤、緑、青、透明度
Rectangle(size=(300,100),
pos=(1200,500))

簡易的な市松模様です。シアンとマゼンタの透明度も変更しています。

では、最終的なコードにして実行します。

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.slider import Slider
from kivy.uix.widget import Widget
from kivy.graphics import Rectangle,Color

class DrawingWidget(Widget):
def init(self):
super(DrawingWidget,self).init()

with self.canvas:
Color(1,1,1,1)#赤、緑、青、透明度
self.rect=Rectangle(size=(self.size),
pos=self.pos)

self.bind(pos=self.update_rectangle,
size=self.update_rectangle)

def update_rectangle(self,instance,value):
self.rect.pos=self.pos
self.rect.size=self.size

class DrawingApp(App):
def build(self):
root_widget=DrawingWidget()
return root_widget

DrawingApp().run()

真っ白いキャンバスが現れました。

「Kivyというライブラリを使ってPythonでアプリを作って行く」に戻る

<<関連記事>>

Python自作サンプル集
Swiftでアプリ開発される方向け
これからプログラミングを始める方へ
プログラミングと資格について

Kivy公式サイトのKivy Crash Course 7 – Let’s fix some bugs;を作ってみた!

この記事では、「Python Kivyプログラミング Pythonで作るマルチタッチアプリ」という本を頼りに、章の終わりごとに対応する公式サイト(英語で泣きそう)のサンプルプログラムに挑戦しています。
また、動画の場合、何分何秒のコードとYouTubeを途中で止めて、コードと実行結果を掲載しています。

上の本の、5章を終えた所までで類題として作れるアプリです。

Video(YouTube)

<<関連記事>>

Kivyというライブラリを使ってPythonでアプリを作って行く

Python自作サンプル集
Swiftでアプリ開発される方向け
これからプログラミングを始める方へ
プログラミングと資格について

この動画では、前回PythonとKV言語で作ったプログラムを改変していきます。

Kivy公式サイトのKivy Crash Course 7 – Drawing on the canvasで作った所までです。

前回のコード

「main.py」

from kivy.app import App
from kivy.uix.scatter import Scatter
from kivy.uix.label import Label
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.textinput import TextInput
from kivy.uix.boxlayout import BoxLayout
from kivy.properties import ListProperty,ObjectProperty
from kivy.graphics.vertex_instructions import (Rectangle,
Ellipse,
Line)
from kivy.graphics.context_instructions import Color
import random


class ScatterTextWidget(BoxLayout):
text_colour=ListProperty([1,0,0,1])
def init(self,kwargs):

super(ScatterTextWidget,self).init(kwargs)
def change_label_colour(self,args):

colour=[random.random()
for i in range(3)]+[1]
self.text_colour=colour
class TutorialApp(App):
def build(self):
return ScatterTextWidget()
def some_function(args):
print(‘text changed’)
if name == “main”:
TutorialApp().run()

「tutorial.kv」

<ScatterTextWidget>:
orientation:’vertical’
canvas:
Color:
rgba:0,0,1,1
Rectangle:
pos:self.pos
size:self.size
TextInput:
id:my_textinput
font_size:150
size_hint_y:None
height:200
on_height:do_someting()
text:’default’
on_text:root.change_label_colour()
FloatLayout:
Scatter:
Label:
id:my_label
text:my_textinput.text
font_size:150
color:root.text_colour
BoxLayout:
orientation:’horizontal’
size_hint_y:None
height:150
Label:
id:label1
text:my_textinput.text[:3][::-1]
font_size:100
color:root.text_colour
Label:
id:label2
text:my_textinput.text[-3:][::-1]
font_size:100
color:root.text_colour

これを今回用に改変していきます。

エディタ Visual Studio Codeに書いていってターミナルで実行します。

前回の「crash7」というフォルダの内容「main.py」と「tutorial.kv」を、今回の「crash8」というフォルダに保存して動作を確認しました。

では、今回の動画(全部英語で泣きそう)をみながら食らいついてコードを書きました。

ここから図形描画のコードを追記していきます。

半透明の緑の長方形を文字の上に被せます。
2分04秒

「main.py」
同上

「tutorial.kv」

<ScatterTextWidget>:
orientation:’vertical’
TextInput:
id:my_textinput
font_size:150
size_hint_y:None
height:200
on_height:do_someting()
text:’default’
on_text:root.change_label_colour()
FloatLayout:
Scatter:
Label:
id:my_label
text:my_textinput.text
font_size:150
color:root.text_colour
canvas:
Color:
rgba:0,1,0,0.5
Rectangle:
pos:self.pos
size:self.size
BoxLayout:
orientation:’horizontal’
size_hint_y:None
height:150
Label:
id:label1
text:my_textinput.text[:3][::-1]
font_size:100
color:root.text_colour
Label:
id:label2
text:my_textinput.text[-3:][::-1]
font_size:100
color:root.text_colour

動画の3分19秒あたりまでの内容です。

「main.py」
同上

「tutorial.kv」

<ScatterTextWidget>:
orientation:’vertical’
TextInput:
id:my_textinput
font_size:150
size_hint_y:None
height:200
on_height:do_someting()
text:’default’
on_text:root.change_label_colour()
FloatLayout:
Scatter:
Label:
id:my_label
text:my_textinput.text
font_size:150
color:root.text_colour
size:self.texture_size
canvas:
Color:
rgba:0,1,0,0.5
Rectangle:
pos:self.pos
size:self.size
BoxLayout:
orientation:’horizontal’
size_hint_y:None
height:150
Label:
id:label1
text:my_textinput.text[:3][::-1]
font_size:100
color:root.text_colour
Label:
id:label2
text:my_textinput.text[-3:][::-1]
font_size:100
color:root.text_colour

長方形のラベルが、文字の長さに自動的に調整しています。

5分9秒ぐらいでは、赤い大きい長方形のラベルを追加して、動かせます。

「main.py」

同上

「tutorial.kv」

<ScatterTextWidget>:
orientation:’vertical’
TextInput:
id:my_textinput
font_size:150
size_hint_y:None
height:200
on_height:do_someting()
text:’default’
on_text:root.change_label_colour()
FloatLayout:
Scatter:
canvas.after:
Color:
rgba:1,0,0,0.5
Rectangle:
size:self.size
pos:self.pos
Label:
id:my_label
text:my_textinput.text
font_size:150
color:root.text_colour
size:self.texture_size
canvas:
Color:
rgba:0,1,0,0.5
Rectangle:
pos:self.pos
size:self.size
BoxLayout:
orientation:’horizontal’
size_hint_y:None
height:150
Label:
id:label1
text:my_textinput.text[:3][::-1]
font_size:100
color:root.text_colour
Label:
id:label2
text:my_textinput.text[-3:][::-1]
font_size:100
color:root.text_colour

6分33秒ぐらいでは、赤と緑の二重ラベルになります。

「main.py」

同上

「tutorial.kv」

<ScatterTextWidget>:
orientation:’vertical’
TextInput:
id:my_textinput
font_size:150
size_hint_y:None
height:200
on_height:do_someting()
text:’default’
on_text:root.change_label_colour()
FloatLayout:
Scatter:
size_hint:None,None
size:my_label.size
canvas.after:
Color:
rgba:1,0,0,0.5
Rectangle:
size:self.size
pos:self.pos
Label:
id:my_label
text:my_textinput.text
font_size:150
color:root.text_colour
size:self.texture_size
canvas:
Color:
rgba:0,1,0,0.5
Rectangle:
pos:self.pos
size:self.size
BoxLayout:
orientation:’horizontal’
size_hint_y:None
height:150
Label:
id:label1
text:my_textinput.text[:3][::-1]
font_size:100
color:root.text_colour
Label:
id:label2
text:my_textinput.text[-3:][::-1]
font_size:100
color:root.text_colour

8分18秒ぐらいでは、中央に配置されます。

「main.py」

同上

「tutorial.kv」

<ScatterTextWidget>:
orientation:’vertical’
TextInput:
id:my_textinput
font_size:150
size_hint_y:None
height:200
on_height:do_someting()
text:’default’
on_text:root.change_label_colour()
FloatLayout:
Scatter:
center:self.parent.center
size_hint:None,None
size:my_label.size
canvas.after:
Color:
rgba:1,0,0,0.5
Rectangle:
size:self.size
pos:self.pos
Label:
id:my_label
text:my_textinput.text
font_size:150
color:root.text_colour
size:self.texture_size
canvas:
Color:
rgba:0,1,0,0.5
Rectangle:
pos:self.pos
size:self.size
BoxLayout:
orientation:’horizontal’
size_hint_y:None
height:150
Label:
id:label1
text:my_textinput.text[:3][::-1]
font_size:100
color:root.text_colour
Label:
id:label2
text:my_textinput.text[-3:][::-1]
font_size:100
color:root.text_colour

Kivyというライブラリを使ってPythonでアプリを作って行く

Python自作サンプル集
Swiftでアプリ開発される方向け
これからプログラミングを始める方へ
プログラミングと資格について

Kivy公式サイトのKivy Crash Course 7 – Drawing on the canvasを作ってみた!

この記事では、「Python Kivyプログラミング Pythonで作るマルチタッチアプリ」という本を頼りに、章の終わりごとに対応する公式サイト(英語で泣きそう)のサンプルプログラムに挑戦しています。
また、動画の場合、何分何秒のコードとYouTubeを途中で止めて、コードと実行結果を掲載しています。

上の本の、5章を終えた所までで類題として作れるアプリです。

Video(YouTube)

<<<関連記事>>

Kivyというライブラリを使ってPythonでアプリを作って行く

Python自作サンプル集
Swiftでアプリ開発される方向け
これからプログラミングを始める方へ
プログラミングと資格について

この動画では、前回PythonとKV言語で作ったプログラムを改変していきます。

Kivy公式サイトのKivy Crash Course 6 – Kivy propertiesで作った所までです。

前回のコード

「main.py」

from kivy.app import App
from kivy.uix.scatter import Scatter
from kivy.uix.label import Label
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.textinput import TextInput
from kivy.uix.boxlayout import BoxLayout
from kivy.properties import ListProperty
import random

class ScatterTextWidget(BoxLayout):
    text_colour=ListProperty([1,0,0,1])

    def change_label_colour(self,args):
    colour=[random.random()
    for i in range(3)]+[1] self.text_colour=colour class    
     TutorialApp(App):

def build(self):
    return ScatterTextWidget()

def some_function(args):
print(‘text changed’)
if name == “main”:
TutorialApp().run()

「tutorial.kv」

<ScatterTextWidget>:
    orientation:’vertical’
    TextInput:
        id:my_textinput
        font_size:150
        size_hint_y:None
        height:200
        on_height:do_someting()
        text:’dafault’
        on_text:root.change_label_colour()
    FloatLayout:
        Scatter:
            Label:
                id:my_label
                text:my_textinput.text
                font_size:150
               color:root.text_colour
    BoxLayout:
        orientation:’horizontal’
        size_hint_y:None
        height:150
        Label:
            id:label1
            text:my_textinput.text[:3][::-1]
            font_size:100
            color:root.text_colour
        Label:
            id:label2
            text:my_textinput.text[-3:][::-1]
            font_size:100
            color:root.text_colour

これを今回用に改変していきます。

エディタ Visual Studio Codeに書いていってターミナルで実行します。

前回の「crash6」というフォルダの内容「main.py」と「tutorial.kv」を、今回の「crash7」というフォルダに保存して動作を確認しました。

では、今回の動画(全部英語で泣きそう)をみながら食らいついてコードを書きました。

ここから図形描画のコードを追記していきます。

動画の3分25秒あたりまでの内容です。

「main.py」

from kivy.app import App
from kivy.uix.scatter import Scatter
from kivy.uix.label import Label
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.textinput import TextInput
from kivy.uix.boxlayout import BoxLayout
from kivy.properties import ListProperty,ObjectProperty
from kivy.graphics.vertex_instructions import (Rectangle,
Ellipse,
Line)
from kivy.graphics.context_instructions import Color
import random


class ScatterTextWidget(BoxLayout):
    text_colour=ListProperty([1,0,0,1])
    def init(self,kwargs):

       super(ScatterTextWidget,self).init(kwargs)
        #図形の指定 長方形、楕円、線
        with self.canvas:
            Color(0,1,0,1)
            Rectangle(pos=(0,100),size=(300,100))
            Ellipse(pos=(0,400),size=(300,100))
            Line(points=[0,0,500,600,400,300],
            close=True,
            width=3)
        def change_label_colour(self,args):

            colour=[random.random()
          for i in range(3)]+[1]
          self.text_colour=colour
class TutorialApp(App):
    def build(self): return

ScatterTextWidget()
def some_function(args):
    print(‘text changed’)

if name == “main”:
TutorialApp().run()

「tutorial.kv」

<ScatterTextWidget>:
    orientation:’vertical’
    TextInput:
        id:my_textinput
        font_size:150
        size_hint_y:None
        height:200   
        on_height:do_someting()
        text:’default’
        on_text:root.change_label_colour()
    FloatLayout:
        Scatter:
            Label:
                id:my_label
                text:my_textinput.text
                font_size:150
                color:root.text_colour
    BoxLayout:
        orientation:’horizontal’
        size_hint_y:None
        height:150
        Label:
            id:label1
            text:my_textinput.text[:3][::-1]
            font_size:100
            color:root.text_colour
        Label:
            id:label2
            text:my_textinput.text[-3:][::-1]
            font_size:100
            color:root.text_colour

4分5秒ぐらいでは、
「main.py」ファイルで、

with self.canvas.before:

とすると、図形が文字の下に、

with self.canvas.after:

とすると、図形が文字の上になります。

次に、図形をkvファイルで書きます。

6分50秒ぐらいでは、

「main.py」

from kivy.app import App
from kivy.uix.scatter import Scatter
from kivy.uix.label import Label
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.textinput import TextInput
from kivy.uix.boxlayout import BoxLayout
from kivy.properties import ListProperty,ObjectProperty
from kivy.graphics.vertex_instructions import (Rectangle,
Ellipse,
Line)
from kivy.graphics.context_instructions import Color
import random


class ScatterTextWidget(BoxLayout):
    text_colour=ListProperty([1,0,0,1])
    def init(self,kwargs):

    super(ScatterTextWidget,self).init(kwargs)
    def change_label_colour(self,args): colour=

    [random.random()
    for i in range(3)]+[1]
        self.text_colour=colour
class TutorialApp(App):
    def build(self):
        return ScatterTextWidget()
def some_function(args):
    print(‘text changed’)
if name == “main”:
TutorialApp().run()

「tutorial.kv」

<ScatterTextWidget>:
    orientation:’vertical’
    #ここをcanvas.beforeにすると、キャンバスが文字の下、
    #afterにすると、キャンバスが文字の上にくる
    canvas:
        Color:
            rgba:0,0,1,1
        Rectangle:
            pos:self.pos
            size:self.size
    TextInput:
        id:my_textinput
        font_size:150
        size_hint_y:None
        height:200
        on_height:do_someting()
        text:’default’
        on_text:root.change_label_colour()
    FloatLayout:
        Scatter:
            Label:
                id:my_label
                text:my_textinput.text
                font_size:150
                color:root.text_colour
    BoxLayout:
        orientation:’horizontal’
        size_hint_y:None
        height:150
        Label:
            id:label1
            text:my_textinput.text[:3][::-1]
            font_size:100
            color:root.text_colour
        Label:
            id:label2
            text:my_textinput.text[-3:][::-1]
            font_size:100
            color:root.text_colour

<<<関連記事>>

Kivyというライブラリを使ってPythonでアプリを作って行く

Python自作サンプル集
Swiftでアプリ開発される方向け
これからプログラミングを始める方へ
プログラミングと資格について

PowerPointでアニメーションと画面切り替えを作る

この記事では、アニメーションを効率的に作るショートカットキーと、画面の切り替えで動きを付ける方法を掲載しています。

[アニメーション]タブから、好きなアニメーションを付けられます。

あるアニメーションを別の図形などにも利用する場合

既にアニメーションが設定してある図形などをクリックします。
その後、[Alt]+[Shift]+[C]でアニメーションをコピーして、[Alt]+[Shift]+[V]で別の図形に同じアニメーションを適用できます。

Macですと、[option]+[Shift]+[Command]+[C]と、一つ押すキーが多くなります。

スマートアートのアニメーション

また、スマートアートのアニメーションの設定は、そのスマートアートを選択して、「効果のオプション」から、下記メニューで個別に選択できます。


画面切り替え

こちらで画面切り替えに動きをつけることができます。

アニメーションと画面切り替えは以上になります。


お疲れ様でした。
勉強のリフレッシュに、写真で息抜きを致します。

江ノ電、鎌倉高校前駅の海です。

仕事や勉強のリフレッシュに、趣味で写真を撮っておりますので、宜しかったら フォトストック写真ACさん の投稿もご覧頂けますと、大変嬉しい限りでございます!!

こちら、無料の「ダウンロードユーザー」に登録して頂けると、無料で写真のダウンロードが可能になります。

※ 先にGoogleアカウントを作成して頂くと、登録が ラク です♪

 

最後までご精読、誠にありがとうございました!!

最後までお付き合い頂き、誠にありがとうございました!!

急にプレゼン資料を作ることになったから手っ取り早くパワポ教えてくれ!!!!!に戻る

モバイルバージョンを終了