Kivy tutorial 005: A drawing app（長方形描画）;を作ってみた！

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

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

「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でアプリを作って行く」に戻る

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」

「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」

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

「main.py」
同上

「tutorial.kv」

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

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を作ってみた！

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

Video（YouTube）

＜＜＜関連記事＞＞

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

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

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

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

前回のコード

「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:’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」

「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アカウントを作成して頂くと、登録がラクです♪

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

フォトストック写真ACさんのプロフィールページ

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

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

Kivy公式サイトのKivy Crash Course 6 – Kivy propertiesを作ってみた！

＜＜＜関連記事＞＞

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

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

Pythonでマルチタッチアプリを作るために、こちらの本で学んでいます。

Kivyの公式サイトは英語ばかりで泣きそうでしたが、この本を読んで行ったら公式サイトのサンプルアプリも作れるようになりました。

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

Video（YouTube）

この動画では、前回PythonとKV言語で作ったプログラムを、

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

前回のコード

「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
import random

class ScatterTextWidget(BoxLayout):
　　　　def change_label_colour(self,args):
　　　　　　　　colour=[random.random()
　　　　　　　　for i in range(3)]+[1]
　　　　　　　　label=self.ids[‘my_label’]
　　　　　　　　label.color=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
　　　　　　　　text:’dafault’
　　　　　　　　on_text:root.change_label_colour()

　　　　FloatLayout:
　　　　　　　　Scatter:
　　　　　　　　　　　　Label:
　　　　　　　　　　　　　　　　id:my_label
　　　　　　　　　　　　　　　　text:my_textinput.text
　　　　　　　　　　　　　　　　font_size:150

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

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

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

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

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

文字を入力したり消したりすると、色が変わるのは前回と同じで、今回は文字の分身が現れます。

文字列が「default」だと分かりにくいので、「abcdefg」とした場合のスクショを掲載します。

「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
import random

class ScatterTextWidget(BoxLayout):
　　　　def change_label_colour(self,args):
　　　　　　　　colour=[random.random()
　　　　　　　　for i in range(3)]+[1]
　　　　　　　　label=self.ids[‘my_label’]
　　　　　　　　label.color=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
　　　　BoxLayout:
　　　　　　　　orientation:’horizontal’
　　　　　　　　size_hint_y:None
　　　　　　　　height:150
　　　　　　　　Label:
　　　　　　　　　　　　text:my_textinput.text[:3][::-1]
　　　　　　　　　　　　font_size:100
　　　　　　　　Label:
　　　　　　　　　　　　text:my_textinput.text[-3:][::-1]
　　　　　　　　　　　　font_size:100

スライサーの所のコードを見ながら確認します。

左側の文字はabcdefgの最初から3文字分の「abc」が「cba」になっています。

右側の文字はabcdefgの後ろから3文字分の「efg」が「gfe」になっています。

次に、4分5秒の所のコードです。

このコードでは、色が分身ラベルの左右両方に反映されています。

「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
import random

class ScatterTextWidget(BoxLayout):
　　　　def change_label_colour(self,args):
　　　　　　　　colour=[random.random()
　　　　　　　　for i in range(3)]+[1]
　　　　　　　　label=self.ids[‘my_label’]
　　　　　　　　label.color=colour
　　　　　　　　label1=self.ids.label1
　　　　　　　　label2=self.ids.label2
　　　　　　　　label1.color=colour
　　　　　　　　label2.color=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
　　　　BoxLayout:
　　　　　　　　orientation:’horizontal’
　　　　　　　　size_hint_y:None
　　　　　　　　height:150
　　　　　　　　Label:
　　　　　　　　　　　　id:label1
　　　　　　　　　　　　text:my_textinput.text[:3][::-1]
　　　　　　　　　　　　font_size:100
　　　　　　　　Label:
　　　　　　　　　　　　id:label2
　　　　　　　　　　　　text:my_textinput.text[-3:][::-1]
　　　　　　　　　　　　font_size:100

最後に、8分35秒の所のコードです。

Python側をシンプルにして、プロパティを使っています。

「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:’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

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

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

Kivy公式サイトのKivy Crash Course 5 – Mixing python and kivy languageを作ってみた！

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

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

Pythonでマルチタッチアプリを作るために、こちらの本で学んでいます。

Kivyの公式サイトは英語ばかりで泣きそうでしたが、この本を読んで行ったら公式サイトのサンプルアプリも作れるようになりました。

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

Video（YouTube）

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

前回の内容 Kivy公式サイトのKivy Crash Course 4 – Kivy language

前回のコードです。
これを今回用に改変していきます。

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

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

そのコードです。

「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

class ScatterTextWidget(BoxLayout):
　　　　pass

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
　　　　　　　　text:’dafault’
　　　　FloatLayout:
　　　　　　　　Scatter:
　　　　　　　　　　　　Label:
　　　　　　　　　　　　　　　　text:my_textinput.text
　　　　　　　　　　　　　　　　font_size:150

無事動かせました。

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

「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

import random

class ScatterTextWidget(BoxLayout):
　　　　def change_label_colour(self,args):
　　　　　　　　colour=[random.random() for i in range(3)]+[1]
　　　　　　　　label=self.ids[‘my_label’]
　　　　　　　　label.color=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
　　　　　　　　text:’dafault’
　　　　　　　　on_text:root.change_label_colour()
　　　　FloatLayout:
　　　　　　　　Scatter:
　　　　　　　　　　　　Label:
　　　　　　　　　　　　　　　　id:my_label
　　　　　　　　　　　　　　　　text:my_textinput.text
　　　　　　　　　　　　　　　　font_size:150

では、動作を見てみます。

文字を入力したり消したりすると、色が変わります。

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

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

Kivy公式サイトのKivy Crash Course 4 – Kivy languageを作ってみた！

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

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

Pythonでマルチタッチアプリを作るために、こちらの本で学んでいます。

Kivyの公式サイトは英語ばかりで泣きそうでしたが、この本を読んで行ったら公式サイトのサンプルアプリも作れるようになりました。

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

Video（YouTube）

この動画では、前回Pythonで作ったプログラムを、PythonとKV言語（ファイル拡張子が.kv）で、作ってよりPythonのコードがシンプルになることを学べる内容になっています。

Kivy Crash Course 3 – More interesting widget interactions
で作ったコードを改変して、好きな文字を入力して動かせるようにしたアプリです。

前回のコードが書いてあるファイルを開いて、これを今回用に改変していきます。

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

前回の「crash3」というフォルダの内容「main.py」を、今回の「crash4」というフォルダに保存して確認しました。

そのコードです。

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

class TutorialApp(App):
　　　　def build(self):
　　　　　　　　b=BoxLayout(orientation=’vertical’)
　　　　　　　　t=TextInput(font_size=150,
　　　　　　　　size_hint_y=None,
　　　　　　　　height=200,
　　　　　　　　text=’default’)
　　　　　　　　f=FloatLayout()
　　　　　　　　s=Scatter()
　　　　　　　　l=Label(text=’default’,font_size=150)
　　　　　　　　t.bind(text=l.setter(‘text’))
　　　　　　　　f.add_widget(s)
　　　　　　　　s.add_widget(l)
　　　　　　　　b.add_widget(t)
　　　　　　　　b.add_widget(f)
　　　　　　　　return b

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

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

無事動かせました。

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

Crash4フォルダの中にはmain.pyの他に「tutorial.kv」と言うファイルを作ります。

main.pyのAppのところが、何々Appだった場合、「何々.kv」と言うファイル名になります。

まずは、「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

class ScatterTextWidget(BoxLayout):
　　　　pass

class TutorialApp(App):
　　　　def build(self):

return ScatterTextWidget()

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

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

とてもコードがシンプルになりましたね。

次に、「tutorial.kv」です。

では、動作を見てみます。

好きな文字を動かしてみます。

「I love cat!!」

＜２＞

動かせました。

次に、同じフォルダに日本語フォントを入れてカスタマイズします。

私は志村けんさんが好きなので、最後に「default」を「なんだチミは」と表示されるようにカスタマイズします。

同じフォルダ「crash4」の中に日本語フォントを置いてみます。

Googleフォントから好きな日本語フォントを持ってきて、フォントファイルの名前をわかりやすく変えて実行してみます。

やり方はNRさんという方の動画が分かりやすいです。

このようになりました。

Kvファイルを動かしても、ちゃんと日本語フォントが出たことにホッとしました。

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

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

Kivy公式サイトのKivy Crash Course 3 – More interesting widget interactionsを作ってみた！

この記事では、Kivy公式サイトと下記の本の章を対応づけての学習を記録しています。
見本通りに作っていったコードに遊びの要素を加えてカスタマイズしています。

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

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

Pythonでマルチタッチアプリを作るために、こちらの本で学んでいます。

Kivyの公式サイトは英語ばかりで泣きそうでしたが、この本を読んで行ったら公式サイトのサンプルアプリも作れるようになりました。

上の本の、3章の最後の演習問題を終えた所までで類題として作れるアプリです。
演習問題の解答のダウンロードは、この本の始めの方に書かれています。

Kivy Crash Course 3 – More interesting widget interactions

Video（YouTube）

このアプリは前回作った
Kivy Crash Course 1 – Making a simple Appで作ったコードを改変して、
好きな文字を入力して動かせるようにしたアプリです。

最初は「default」という単語を動かします。

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

「crash3」というフォルダを作って、その中に「main.py」というファイルにコードを書いていきます。

ウィジェットツリーです。

コードです。

このように動かせました。

好きな文字を動かしてみます。

「I love cat!!」

私は志村けんさんが好きなので、最後の所に「default」を「何だ、チミは！！」と表示されるようにカスタマイズします。

同じフォルダ「crash3」の中に日本語フォントを置いてみます。

Googleフォントから好きな日本語フォントを持ってきて、フォントファイルの名前をわかりやすく変えて実行してみます。

やり方はNRさんという方の動画が分かりやすいです。

このようになりました。

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

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

Kivy公式サイトのKivy Crash Course 1 – Making a simple Appを作ってみた！

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

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

Pythonでマルチタッチアプリを作るために、こちらの本で学んでいます。

Kivyの公式サイトは英語ばかりで泣きそうでしたが、この本を読んで行ったら公式サイトのサンプルアプリも作れるようになりました。

公式サイト（英語）です。
Kivy Crash Course 1 – Making a simple App

その動画説明です。

このアプリは「Hello」を画面上の好きな位置に動かすといった、Floatを使った単純なアプリです。

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

「crash1」というフォルダを作って、その中に「main.py」というファイルにコードを書いていきます。

後で同じフォルダに日本語フォントを入れてカスタマイズします。

私は志村けんさんが好きなので、この記事の最後のところで、「Hello」を「あい〜〜〜ん」と表示されるようにカスタマイズします。

Helloという青いボタンが画面いっぱいの表示される所までプログラミングします。

このプログラムのウィジェットツリーになります。

そのコードです。

from kivy.app import App
from kivy.uix.button import Button

class TutorialApp(App):
　　　　def build(self):
　　　　　　　　#rgbaでボタンを色を青にする
　　　　　　　　return Button(text=’Hello!’,
　　　　　　　　background_color=(0,0,1,1),
　　　　　　　　font_size=150)

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

コメントのrgbaですが、Rは赤、Gは緑、Bは青、最後のAは透明度です。

ターミナルに切り替えて、
「cd crash1」で「main.py」が入っているフォルダに移動し、
「python main.py」で実行します。

このように実行できました。

他の色を見てみます。

赤
background_color=(1,0,0,1)

緑
background_color=(0,1,0,1)

では、「Hello!」の文字を好きな位置に動かせるアプリを作っていきます。

コードです。

from kivy.app import App
from kivy.uix.scatter import Scatter
from kivy.uix.label import Label
from kivy.uix.floatlayout import FloatLayout

class TutorialApp(App):
　　　　def build(self):
　　　　　　　　f=FloatLayout()
　　　　　　　　s=Scatter()
　　　　　　　　l=Label(text=’Hello!’,font_size=150)
　　　　　　　　f.add_widget(s)
　　　　　　　　s.add_widget(l)
　　　　　　　　return f

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

左下隅に文字が出ているので、それをマウスで移動します。

また、２つの点を右クリックしてHello!の大きさを変えられます。

最後に「Hello!」を、志村けんさんの「あい〜〜〜〜ん」にカスタマイズします。
同じフォルダ「crash1」の中に日本語フォントを置いてみます。

Googleフォントから好きな日本語フォントを持ってきて、フォントファイルの名前をわかりやすく変えて実行してみます。

やり方はNRさんという方の動画が分かりやすいです。

このようになりました。

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

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

Kivy公式サイトのチュートリアル4を作ってみた！（電卓で数字表示）

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

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

Pythonでマルチタッチアプリを作るために、こちらの本で学んでいます。

Kivyの公式サイトは英語ばかりで泣きそうでしたが、この本を読んで行ったら公式サイトのサンプルアプリも作れるようになりました。

上の本の、2章まで学んだ所で作れるアプリです。

Kivy公式テキストチュートリアル4

フォルダ「koushiki4」の中に「main.py」ファイルを置き、コードは「main.py」に書きます。

このチュートリアルでは、前回のチュートリアルに続いて電卓を扱いますが、演算機能まではありません。
キーを押したらラベルにその数字が表示されるところまでです。

では、コードです。
今回は多少コードが長いので、コメントもわかる範囲で加えました。

数字キーのところで関数が入れ子になっていて、インデントも複雑になっているので、模写される方はインデントにお気を付けてください。

from kivy.app import App
from kivy.uix.button import Button
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.gridlayout import GridLayout
from kivy.uix.label import Label

class YourApp(App):
def build(self):
root_widget=BoxLayout(orientation=’vertical’)
output_label=Label(size_hint_y=1)
button_symbols=(‘1′,’2′,’3′,’+’,
‘4’,’5′,’6′,’-‘,
‘7’,’8′,’9′,’.’,
‘0’,’‘,’/’,’=’)

#数字ボタン群の高さはラベルの高さの２倍で４列用意
#ボタンの表示は数値と一致させる
button_grid=GridLayout(cols=4,size_hint_y=2)
for symbol in button_symbols:
button_grid.add_widget(Button(text=symbol))

#「clear_button」の文字と高さの設定
clear_button=Button(text=’clear’,size_hint_y=None,
height=100)

#ラベルに押したボタンを表示させる
def print_button_text(instance):
output_label.text+=instance.text
for button in button_grid.children[1:]:
button.bind(on_press=print_button_text)

#ラベルに表示させる文字の大きさを調整する
def resize_label_text(label,new_height):
label.font_size=0.5*label.height
output_label.bind(height=resize_label_text)

def evalute_result(instance):
try:
output_label.text=str(eval(output_label.text))
except SyntaxError:
output_label.text=’Python syntax error!’
button_grid.children[0].bind(on_press=evalute_result)

def clear_label(instance):
output_label.text=”
clear_button.bind(on_press=clear_label)

root_widget.add_widget(output_label)
root_widget.add_widget(button_grid)
root_widget.add_widget(clear_button)
return root_widget

YourApp().run()

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

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

月	火	水	木	金	土	日
			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