【GitHub】webページを無料で上げる【html】

1.リポジトリ(フォルダ)作成

最上部の「+」から「New repository」


「Repository name」に名前を付ける


下にスクロールして「緑」をクリック

2.コード、画像等を上げる

「Code」タブに移動
自身の進行状況によって3種類のページが表示される

どのページからでもすべて同じページに飛ばされる

◆コードを選択の場合

自分で作ったhtmlコードをコピペ
ファイル名を必ず index.html にする


「緑」で反映


※CSS,JavaScriptを別々に作った人は、
　再度コードを選択して新しいファイル作る
　今度のファイル名は、コードで使用した普通の名前にする

◆画像等を選択の場合

自身のフォルダから直接ドロップ


「緑」で反映

3.設定を1つ変更

「Settings」タブの「Pages」に移動


「None」となっている所を「main」に変更


しっかり「save」


完了！！反映まで５分ほどかかる

4.ページを見に行く

「Settings」タブの「Pages」にurlがある

5.編集、削除

「Code」タブに移動
自分が上げたファイル一覧があるので、編集(削除)したいファイルを選択

◆ 編集

鉛筆のマークで編集可能になる


「緑」で反映

◆削除

「…」をクリック


一番下の「Delet file」をクリック


「緑」で反映
]

6.リポジトリ(フォルダごと)削除

「Settings」タブの「General」に移動


一番下の「Delete this repository」


選択肢をクリック


選択肢をクリック


矢印の所をコピーしてボックスに貼り付け、選択肢をクリック

pythonでマウス、キーボード作業見える化

tkinterで本体、文字作成

tk.Tk()で、本体作成
geometryで、大きさと位置

tk.Labelで、文字やフォント
label1.place(x=0, y=10)で、設置

import tkinter as tk

#本体
root = tk.Tk()
root.geometry("500x500+100+100")#(横幅x縦幅+x座標+y座標)

label1 = tk.Label(root, text='あああああ',font=("Arial", 40))#文字を書く
label1.place(x=0, y=10)#文字の左上を、どこに置くか

root.attributes("-topmost", True)#常に手前に表示

root.mainloop()#本体実行

マウスの移動距離計算

インストール

pip install pyautogui

import math
import pyautogui

#1pix=0.24mm
#1pix=0.024cm
#1pix=0.00024m

pix = 0.00024
dis = 0

x_old, y_old = pyautogui.position()#今のマウス位置

def mouse_move():
    global dis,x_old, y_old
    
    x_now, y_now = pyautogui.position()#最新のマウス位置

    dis += math.floor(math.sqrt((x_now - x_old)**2+(y_now - y_old)**2))*pix#２点間の距離

    x_old = x_now
    y_old = y_now

    label1.config(text=f"移動: {dis}")#文字を上書き
    root.after(300,mouse_move)#０．3秒ごとにループ

root.after(300,mouse_move)#０．3秒ごとにループ

1ピクセル0.00024mで計算(モニターの解像度によって違う)

pyautogui.position()でマウスのx,y座標取得できる

math.sqrtでルート
math.floorで小数点以下を切り捨て

label1.configで文字を上書き

root.after(300,mouse_move)で0.3秒後にmouse_moveを実行
mouse_move内にroot.after(300,mouse_move)があるのでまた0.3秒後にmouse_moveを実行…

キーボード入力監視

tkinterとは別に監視する
pynputキーボード入力監視するために必要

インストール

pip install pynput

from pynput import keyboard

# キーが押されたときに呼ばれる関数
def k_press(key):
    print(key)#やりたい処理
            
# キーボードイベントを監視する
keyboard_listener = keyboard.Listener(on_press=k_press)
keyboard_listener.start()
# 監視を止める必要がある場合
# keyboard_listener.stop()

下の黒字2行書いておけば、裏で勝手にキーボード入力監視してくれる

keyboard_listener.stop()で止めないとずっと監視してしまうらしい

※1回しか押していないのに、連続で押されたことになってしまう。
　なので時間で制御する

マウスクリック,ホイールイベントを監視

上といっしょ
キーボードともtkinterとも別に監視する
書いておけば裏で勝手に監視してくれる

from pynput import mouse

#マウスクリックされたときに呼ばれる関数
def mo_click(x, y, button, pressed):
    print(x, y, button, pressed)#やりたい処理

def ho(x, y, dx, dy):
    print(x,y,dx,dy)#やりたい処理

# マウスのイベントを監視する
mouse_listener = mouse.Listener(on_click=mo_click)
mouse_listener.start()
# ホイールのイベントを監視する
wheel_listener = mouse.Listener(on_scroll=ho)
wheel_listener.start()

# 監視を止める必要がある場合
# mouse_listener.stop()
# wheel_listener.stop()

x,yはクリック,ホイールされた座標
buttonはどのマウスクリックされたか(右、左、ホイール)
pressedはクリックされたらTrue、離されたらFalse
dx,dyはホイール上で(0,1),ホイール下で(0,-1)

mouse_listener.stop() wheel_listener.stop()で止めないとずっと監視してしまうらしい

※1回しか押していないのに、連続で押されたことになってしまう。
　なので時間で制御する

まとめ

import time
import math
import tkinter as tk
import pyautogui
from pynput import keyboard
from pynput import mouse

width = 800
height = 480

#################マウス移動距離+画面の更新#####################################################
#1pix=0.24mm
#1pix=0.024cm
#1pix=0.00024m
pix = 0.00024
dis = 0

x_old, y_old = pyautogui.position()#今のマウス位置

def mouse_move():
    global dis,x_old, y_old
    
    x_now, y_now = pyautogui.position()#今のマウス位置

    dis += (math.sqrt((x_now - x_old)**2+(y_now - y_old)**2))*pix#２点間の距離
    x_old = x_now
    y_old = y_now

    label1.config(text=f"移動: {round(dis, 1)}m")
    label2.config(text=f"キーボード: {key_count}")
    label3.config(text=f"クリック: {mo_count}")
    label4.config(text=f"ホイール: {ho_count}")
    
    root.after(300,mouse_move)#０．3秒ごとにループ

#####################キーボード入力##############################################
key_count = 0
key_old_time = 0
key_now_time = 0
last_key = None

# キーが押されたときに呼ばれるコールバック関数
def k_press(key):
    global key_count,last_key,key_now_time,key_old_time
    if key != last_key:#前回と違うキーが押された
        key_count+=1
        last_key = key
        key_old_time = time.time()
    else:#前回と同じキーが押された
        key_now_time = time.time()
        if key_now_time - key_old_time > 0.1:
            key_count+=1
            key_old_time = time.time()
            
# キーボードイベントを監視する
keyboard_listener = keyboard.Listener(on_press=k_press)
keyboard_listener.start()

#################マウスクリック#####################################################
mo_count = 0
mo_old_time = 0
mo_now_time = 0
last_mo = None

def mo_click(x, y, button, pressed):
    global mo_count,mo_old_time,mo_now_time,last_mo
    if pressed:
        if button != last_mo:#前回と違うマウス
            mo_count += 1
            last_mo = button
            mo_old_time = time.time()
        else:#前回と同じマウス
            mo_now_time = time.time()
            if mo_now_time - mo_old_time > 0.05:
                mo_count+=1
                mo_old_time = time.time()

# マウスのイベントを監視する
mouse_listener = mouse.Listener(on_click=mo_click)
mouse_listener.start()

#################マウスクホイール#####################################################
ho_count = 0
ho_old_time = 0
ho_old_time = time.time()

def ho(x, y, dx, dy):
    global ho_count,ho_old_time
    if time.time() - ho_old_time > 0.05:
        ho_count += abs(dy)
        ho_old_time = time.time()

# マウスのイベントを監視する
wheel_listener = mouse.Listener(on_scroll=ho)
wheel_listener.start()
#######################################################################################
root = tk.Tk()
root.title("見えるか")

w,h= pyautogui.size()#モニターサイズ

root.geometry(f"{width}x{height}+{(w-width)}+{(h-height)}")

label1 = tk.Label(root, text=f'移動:{round(dis, 1)}m',font=("Arial", 40))
label1.place(x=0, y=10)
label2 = tk.Label(root, text=f'キーボード:{key_count}',font=("Arial", 40))
label2.place(x=0, y=110)
label3 = tk.Label(root, text=f'クリック:{mo_count}',font=("Arial", 40))
label3.place(x=0, y=210)
label4 = tk.Label(root, text=f'ホイール:{ho_count}',font=("Arial", 40))
label4.place(x=0, y=310)

#最も手前に表示
root.attributes("-topmost", True)

root.after(300,mouse_move)#０．3秒ごとにループ

root.mainloop()

おまけ(時間とセーブ機能つき)

pythonでメモ帳

tkinterで本体とキャンバス作成

tk.Tk()で、本体作成
geometryで、大きさと位置

tk.Canvaで、キャンバス作成
cv.place(x=0, y=0)で、設置

root.mainloop()で本体起動、コードここから動かなくなる

import tkinter as tk

#本体
root = tk.Tk()
root.geometry("500x500+100+100") #(横幅x縦幅+x座標+y座標)

#キャンバス作成
cv = tk.Canvas(root, width=500, height=500,bg="#000000") #(本体,width=横幅,height=縦幅,bg=背景色)
cv.place(x=0, y=0)#キャンバス左上を、本体のどの位置に置くか

root.attributes("-topmost", True)#常に手前に表示

root.mainloop()#本体実行

キャンバスサイズ変更

本体のサイズ変えても、キャンバスのサイズは変わらないので、自分で作る

※動画でも言っていますが、root.bind("<Configure>",)を使うとcup使用率が高くなってしまうので、自分で作る
　本来はroot.bind("<Configure>",)で作る

w = 500#幅の初期値
h = 500#高さの初期値

#リサイズ関連
def resize():
    global w,h #defの中でも使用したい

    # 本体のサイズを取得
    width = root.winfo_width()
    height = root.winfo_height()
    if width != w or height != h:
        cv.config(width=width-4, height=height-4)#キャンバスサイズ変更
        w = width
        h = height
    root.after(300,resize)#0.3秒ごとにループ

root.after(300,resize)#0.3秒後に実行

root.after(300,resize)で0.3秒後にresizeを実行
resize内にroot.after(300,resize)があるのでまた0.3秒後にresizeを実行
resize内にroot.after(300,resize)があるのでまた0.3秒後にresizeを実行…

cv.configでキャンバスサイズを上書き

クリック関係の基本

事前にroot.bindと書いておけば、ずっとマウスを監視して、
クリックされたら勝手に関数読んでくれる

要は書いておけばok

#左クリック時
def aaa(event):
    print(event.x,event.y)#クリックされた位置
            
#ドラッグ時
def bbb(event):
    print(event.x,event.y)#ドラッグされている位置
    
#左クリック離したら
def ccc(event):
    print(event.x,event.y)#クリック離された位置

#マウスの監視
root.bind("<Button-1>", aaa)#左クリックされたらaaa読まれる
root.bind("<B1-Motion>", bbb)#ドラッグされたらbbb読まれる
root.bind("<ButtonRelease-1>",ccc)#左クリック離したらccc読まれる

点と線、描写の基本

点→長方形に接する楕円

線→始点と終点を結んだ線

#点
cv.create_oval(x1, y1, x2, y2, fill="#f5f5f5")
             #(左上の座標,右下の座標,fill=色)
#線
cv.create_line(x1, y1, x2, y2, fill="#f5f5f5", width=4,capstyle="round")
             #(始点xy, 終点xy, fill=色, width=線の幅,capstyle=直線の端のスタイル)

まとめ

点(クリック)と線(ドラッグ)は分けて考える

合体↓

import tkinter as tk

#線の始点用
prev_x = None
prev_y = None

w = 500#幅の初期値
h = 500#高さの初期値

########################関数#################################################
#リサイズ関連
def resize():
    global w,h #defの中でも書き換えたい
    # 本体のサイズを取得
    width = root.winfo_width()
    height = root.winfo_height()
    if width != w or height != h:
        cv.config(width=width-4, height=height-4)#キャンバスサイズ変更
        w = width
        h = height
    root.after(300,resize)#0.3秒ごとにループ

#左クリック(点)
def aaa(event):
    cv.create_oval(event.x - 3, event.y - 3, event.x + 3, event.y + 3, fill="#f5f5f5")
                 #event.x,event.yはクリックされた位置
#ドラッグ(線)
def bbb(event):
    global prev_x, prev_y  #defの中でも書き換えたい
    if prev_x and prev_y:#始点あるか
        cv.create_line(prev_x, prev_y, event.x, event.y, fill="#f5f5f5", width=4,capstyle="round")
                         #始点は１つ前の終点
    prev_x = event.x  #始点は１つ前の終点
    prev_y = event.y  #始点は１つ前の終点
    
#左クリック離したら始点を初期化
def ccc(event):
    global prev_x, prev_y  #defの中でも書き換えたい
    prev_x = None
    prev_y = None

#######################tkinter############################################################
root = tk.Tk()#本体
root.geometry(f"{w}x{h}+100+100") #(横幅x縦幅+x座標+y座標)

cv = tk.Canvas(root, width=w-4, height=h-4,bg="#000000") #キャンバス(本体,width=横幅,height=縦幅,bg=背景色)
cv.place(x=0, y=0)#本体からの位置

#マウスの状態監視
root.bind("<Button-1>", aaa)#左クリックされたらaaa読まれる
root.bind("<B1-Motion>", bbb)#ドラッグされたらbbb読まれる
root.bind("<ButtonRelease-1>",ccc)#左クリック離したらccc読まれる

#常に手前に表示
root.attributes("-topmost", True)

root.after(300,resize)#0.3秒後にresize実行
root.mainloop()#本体実行

おまけ(カンニングペーパー)

動画のカンニングペーパーのコード

ChatGPTに聞いて

ダウンロード

windowsのみ

すべて展開→警告→詳細→実行

https://github.com/namakemono22/memocho