すべてを一度で読み込みタブ選択により表示を分けます。 ソース github 動かし方は一つ前の記事参照。 ここが一つ前
すべてを一度で読み込みタブ選択により表示を分けます。 ソース github 動かし方は一つ前の記事参照。 ここが一つ前
ajax からCGIを通してpython scrapingを実施します。 まずはgithubからソースをクローンします。 github 修正履歴 2024.09.30 URLが未指定なら選択ボックスから選ぶ。 2024.10.03 find_al
CGIを用いたJavaScript-Pythonのajax通信 上記サイトをもとにconsoleを使わず、documentでやり取り github python -m http.server --cgi (pythonでサーバーを立てる） http://localhost:8000/ （自
実験サイト <!DOCTYPE html><head> <title>様々な写真が舞い降りる</title> <meta http-equiv="refresh" content="3; URL=canvas40.html"> <style> #name{
以下をクリック バラバラ画像
画像サイズを変更すると別画像が取得できます。 640と641 <!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>Sample</title></head><body&
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>Sample</title></head><body> <button onclick="buttonClick()">picture</but
javascript img display onclick
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>Sample</title></head><body> <button onclick="buttonClick()">picture</but
css keyframes background-image auto change
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { background-color: yellow; animation: bg-co
css backgroud color auto change
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { background-color: yellow; animation: bg-co
javascript change bgcolor by button
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body{ background-color: rgb(255, 174, 0); } bu
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</tit
<!DOCTYPE html><html lang="en"><head> <title>Document</title> <style> button{ position: absolute; top: 300px; left: 500px; width: 100px;
stateで状態管理します。 clickしても前の状態を引き継ぎます。 <!DOCTYPE html><html lang="en"><head> <title>Document</title> <style> button{ width: 100px
<!DOCTYPE html><html lang="en"><head> <title>Document</title> <style> button{ width: 100px; height: 100px; background-color: rgb(12, 12, 12);
ボタンをクリックすると<button>にoptionクラスが追加されます。 ボタンに表示される数字は乱数で決まります。 <!DOCTYPE html><html lang="en"><head> <title>Document</tit
javascript classList add remove
最初 <button id="base0" onclick="click0()">0</button><button id="base1" onclick="click1()">1</button>がボタンを押してクラスが追加されると <button id="base0" onclick="click
css keyframes after click animation-fill-mode: forwards;
<!DOCTYPE html><html lang="ja"><head> <meta charset="utf-8"> <title>CSS Animations</title> <style> .rect { width: 60px; height: 80px; bac
<!DOCTYPE html><html lang="ja"><head> <meta charset="utf-8"> <title>CSS Animations</title> <style> .rect { width: 100px; height: 100px; b
css jpg circle rotate slide show
<!DOCTYPE html><head> <title>circle</title> <style> #pic{ position: absolute; top: 100px; left: 30px; width:400px; height:40
<!DOCTYPE html><head> <title>circle</title> <style> #circle0{ position: absolute; top: 100px; left: 30px; width:400px; h
javascript animatoin and css animation both
<!DOCTYPE html><head> <title>circle</title> <style> #circle0{ position: absolute; top: 25px; left: 30px; width:400px; he
<!DOCTYPE html><head> <title>opacity</title> <style> #name{ font-size: 20px; color: rgb(255, 0, 13); } .paper0{ position: absolu
<!DOCTYPE html><head> <title>circle</title></head><body> <canvas id="cw"></canvas> <script> const WIDTH = 800; const HEIGHT = 700;
const WIDTH = 800;const HEIGHT = 700; const canvas = document.createElement('canvas');canvas.width = WIDTH;canvas.height = HEIGHT; const context = canvas.getContext('2d'); document.body.appendChild
<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>appendchild</title></head><body> <button onclick="addChild()">追加</button><
<!DOCTYPE html><head></head><body><p>p0</p><p>p1</p><p>p2</p><script> var sel = document.querySelectorAll("p"); sel[0].innerHTML = "
コクドゥの季節 DVD-SET2 [ キム・ジョンヒョン ]
韓国ドラマ/マウス～ある殺人者の系譜～-第1話～第11話- (DVD-BOX 1) 日本盤 Mouse
特典付【ポイント3倍】LuminAID ルミンエイド パックライト マックス ライト LEDライト 充電式 USB充電 ソーラー ソーラーバッテリー モバイルバッテリー 防水 ランタン 白色 暖色】
<!DOCTYPE html><head> <title>opacity</title> <style> #name{ font-size: 20px; color: rgb(255, 0, 13); } .paper0{ position: absolu
position:absoluteを使います。 <!DOCTYPE html><html lang="en"><head> <title>circles change</title> <style> #circle0{ position: absolute;
css animation keyframes opacity
不透明度 <!DOCTYPE html><head> <title>opacity</title> <style> #name{ font-size: 20px; color: rgb(255, 0, 13); } .paper0{
border-radiusを使います。 <!DOCTYPE html><head> <title>色紙が変形</title> <style> #name{ font-size: 20px; color: rgb(255, 0, 13); }
settimeoutを使った例 <!DOCTYPE html><head> <title>写真が舞いながらスライドショー</title> <style> #name{ font-size: 50px; color: chartreuse;
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>keyframes</title> <style> .box { position: relative; top:200px; left:
参照サイト 以下に変更 <div class="stage"> <div class="cube"> <div class="panel front"><img src="0.jpg" width=200px height=200px ></div> <div clas
<!DOCTYPE html><head> <title>色紙の色が変わる</title> <style> #name{ font-size: 50px; color: chartreuse; } @keyframes paper0 { 0
一つ前の記事を以下に変更 <body> <div class="paper0"> <img src="0.jpg" width=300px> </div> <div class="paper1"> <img src="1.jpg" width=300px>
<!DOCTYPE html><head> <title>色紙の色が変わる</title> <style> #name{ font-size: 50px; color: chartreuse; } @keyframes paper0 { 0
transform: translateX(20px) rotateX(180deg) rotateY(360deg);上記意味 X軸方向に20px移動 X軸を中心に時計回り180度回転 Y軸を中心に時計回り360度回転 を同時に実行 <!DOCTYPE html&g
1秒間で位置、サイズ、色が変化します。 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>keyframes</title> <style> .box { positio
javascriptは使っていません。 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>keyframes</title> <style> .box { position: relati
spanでは改行されません。 <!DOCTYPE html><html lang="en"><head> <title>Document</title> <style> .aka{ color:red; } .ao{
<!DOCTYPE html><html lang="en"><head> <title>circles change</title> <style> #circle0{ position: relative; top: 800px;
<!DOCTYPE html><html lang="en"><head> <title>circles change</title> <style> #circle0{ width:300px; height:300px; borde
<!DOCTYPE html><html lang="en"><head> <title>circles change</title> <style> #circle1{ position: relative; top: 100px;
<!DOCTYPE html><head> <title>伸びるbar</title> <style> .text{ font-size: 100px; } .anim{ font-size: 30px; animation-name: stretc
<!DOCTYPE html><html lang="en"><head> <title>dot circles</title> <style> #circle0{ width:100px; height:100px; bord
参考サイト <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>カラフル</title></head><body> <p style="color:rgb(255, 0, 17
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>じわっと</title> <sty
javascript requestAnimationFrame
<!doctype html><html><head><meta charset="UTF-8"><title>アニメーション</title></head><body><main> <canvas id="canvas" width="800" height="50
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width
<!DOCTYPE html><html lang="en"><head> <title>ボタンでカウント</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script></he
CSSの#（シャープ）と.（ドット）の違いを現役エンジニアが解説【初心者向け】
デリバリーマン～幽霊専門タクシー始めました～ DVD-BOX1 [ ユン・チャニョン ]
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ボタンテスト</title></head><body><p id="p0">初期値</p><button i
HTML Canvasのインターフェイスのまとめ #2 【canvas】ctx.arc()を使って円を描画する <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vi
CrystalDiskMarkを使ってディスクの回転数と性能の関係を 調査してみました。 7200rpmと5400rpmディスク搭載で比較し7200rpmのほうが 性能はいいようです。 ただし、ディスク周辺のハードの違いがあるので一
参考サイト arrow 矢印 allow 許す これではない 比較 通常表記 let sum = function(a,b){ return a+b; }; アロー関数の表記 let sum = (a,b) => { return a+b; }; htmlで動くや
xfreeでphpアクセスすると 403 Forbidden You don't have permission to access 突然発生 無料利用なのでしょうがないかな。 とりあえず、xfreeのフォーラムで質問してみる。
【JavaScript入門】すぐわかる！無名関数とは
Vue3で出てくるrefの使い方(reactiveも) リアクティブについても説明している。 Vue3でリアクティブな変数を定義する時に使う
{{ }}はデータバインディングに利用 <script setup>import { ref } from "vue";const num = ref(123456);</script> <template> <h1>{{ num }}</h1></template>
vue <script> と<script setup>の違い
Vue versionの違いのようです。 参考サイト（違い） 参考サイト（script setup) まるで別な言語のようです。
参考サイト
参考サイト
Vue CLI mergin-leftが他のclassに影響する
view1のmergin-leftがview0とview2に影響している。 </script><template> <div class="view0"> <p >あいうえお</p> </div> <div class="view1"> <p >
親の背景色とコンポーネント側の背景色を分けて記述します。 App.vue <script setup>import hoge from './components/hoge.vue'</script><template><body> <div class="body0
<script setup>defineProps({ msg: String,}) </script> <script>import axios from "axios";import { reactive } from "vue"; const data = reactive({ responses: "", keyWord: "",});
他のファイルからアクセスが可能 簡単な例 App.vue <script setup>import hoge2 from './components/hoge2.vue'</script><template> <hoge2 /></template> hoge2
実際のサーバー環境でないと動作しない。 index.html <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><bod
黒豊と白夕～天下を守る恋人たち～ DVD-SET3＜映像特典DVD付＞ [ ヤン・ヤン[楊洋] ]
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device
ミッシング〜彼らがいた〜 DVD-BOX1 【DVD】
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device
参考サイト Vue3+axiosでlocalサーバにアクセス app.vue <script setup>import hoge from './components/hoge.vue'</script><template> <main> <hoge /> </ma
SFC(単一ファイルコンポーネント)とは？
これは単一ファイルコンポーネントでVue独自で、 そのままブラウザに反映させても動作しない。 コンポーネントのテンプレート内で ref にアクセスする <script> import { ref } from 'vue' expor
以下で助かりました。 100%になった時の対処法 Windows Searchの終了が一番効果がありました。
以下のサイトがよさそう。 Vue.jsの開発環境 vue.js + typescript = vue.ts ことはじめ Vue.js「コンポーネント」入門 Vue.js]Vue.jsでDOMやコンポーネントを操作するのに便利なref機能 Vu
vue.js script setupの利点を説明しています。 vue.js script setup
Vue3の環境設定は不要 <!DOCTYPE html><html lang="ja"> <head> <meta charset="UTF-8" /> <title>CDNでVue 3</title> <script src="https://cdn.jsdelivr.net
axiosを使ってVue.jsとPHPで非同期通信を連携する方法 ちょこっと変造 index.html alert('成功: ' + response.data.message); register.php echo json_encode(['success' => true, 'message' => $dat
<!DOCTYPE html><html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vueインスタン
こんなとこに書いてありました。 wifi direct パスワードを調べる方法 やや分かりづらい！
<script setup>import jpgfile0 from "@/assets/0.jpg"import jpgfile1 from "@/assets/1.jpg" defineProps({ msg: { type: String, required: true }})</script> <template> <div
ソース
TypeScript には型推論という言葉が出てきます。 たとえば let any = 10; とすれば anyは整数とみなされます。 したがって その後any = "あいうえお";とするとエラーになります。
異なるApp.vueをひとつのプロジェクトで デバッグしたいときがあります。 そんなときは以下のようにします。 index.html <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-
TypeScriptを入門者向けに解説！JavaScriptとの違いや勉強法までわかりやすく
javascriptのお勉強：ajaxで天気予報 地域を選択
実験サイト ajax参考 <!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>Ajax</title> <script src="http://code.jquery.com/jqu
以下を参考 meta refreshって何？リダイレクトとの関係も解説！ このサイトはアクセス毎に画像が変化します 実験サイト <!DOCTYPE html><html lang="ja"><head> <meta
javascriptのお勉強：locatstrageによる日記帳
カレンダーから獲得した日付をキーとしてLocalStrageへ 格納しています。 実験サイト <html> <head> <meta charset="UTF-8"> <title>localStorageの日記</tit
javascriptのお勉強：localstrage 日記帳 拡張
カレンダーから獲得した日付および日付nextをキーとして LocalStrageへ格納しています。 実験サイト ソース
javascriptのお勉強： localStorageのテスト
ローカルストレージってどこにある？ 各ブラウザでWebStorage（LocalStorage）を確認する方法 ブラウザごとに別の場所に格納されます。 <html> <head> <title>local
javascriptのお勉強：LocalStrageのテスト key付
実験サイト <html> <head> <meta charset="UTF-8"> <title>localStorageのテスト</title> </head> <body> <h1>localStorageの
実験サイト <!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>Ajax</title> <script src="http://code.jquery.com/jquery-1.11.0.min.
サーバー側画像はphpで集めます。 php <?php// ファイル $files = glob('../jpg/*.jpg');$imax=count($files)-1; $ran=rand(0,$imax);$i=0;foreach ($files as $key => $value) { if($i==$ran){
「ブログリーダー」を活用して、きょうゆうくんさんをフォローしませんか？
すべてを一度で読み込みタブ選択により表示を分けます。 ソース github 動かし方は一つ前の記事参照。 ここが一つ前
ajax からCGIを通してpython scrapingを実施します。 まずはgithubからソースをクローンします。 github 修正履歴 2024.09.30 URLが未指定なら選択ボックスから選ぶ。 2024.10.03 find_al
CGIを用いたJavaScript-Pythonのajax通信 上記サイトをもとにconsoleを使わず、documentでやり取り github python -m http.server --cgi (pythonでサーバーを立てる） http://localhost:8000/ （自
実験サイト <!DOCTYPE html><head> <title>様々な写真が舞い降りる</title> <meta http-equiv="refresh" content="3; URL=canvas40.html"> <style> #name{
以下をクリック バラバラ画像
画像サイズを変更すると別画像が取得できます。 640と641 <!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>Sample</title></head><body&
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>Sample</title></head><body> <button onclick="buttonClick()">picture</but
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>Sample</title></head><body> <button onclick="buttonClick()">picture</but
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { background-color: yellow; animation: bg-co
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { background-color: yellow; animation: bg-co
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body{ background-color: rgb(255, 174, 0); } bu
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</tit
<!DOCTYPE html><html lang="en"><head> <title>Document</title> <style> button{ position: absolute; top: 300px; left: 500px; width: 100px;
stateで状態管理します。 clickしても前の状態を引き継ぎます。 <!DOCTYPE html><html lang="en"><head> <title>Document</title> <style> button{ width: 100px
<!DOCTYPE html><html lang="en"><head> <title>Document</title> <style> button{ width: 100px; height: 100px; background-color: rgb(12, 12, 12);
ボタンをクリックすると<button>にoptionクラスが追加されます。 ボタンに表示される数字は乱数で決まります。 <!DOCTYPE html><html lang="en"><head> <title>Document</tit
最初 <button id="base0" onclick="click0()">0</button><button id="base1" onclick="click1()">1</button>がボタンを押してクラスが追加されると <button id="base0" onclick="click
<!DOCTYPE html><html lang="ja"><head> <meta charset="utf-8"> <title>CSS Animations</title> <style> .rect { width: 60px; height: 80px; bac
<!DOCTYPE html><html lang="ja"><head> <meta charset="utf-8"> <title>CSS Animations</title> <style> .rect { width: 100px; height: 100px; b
<!DOCTYPE html><head> <title>circle</title> <style> #pic{ position: absolute; top: 100px; left: 30px; width:400px; height:40
九尾狐伝～不滅の愛～ DVD-BOX1 [ イ・ドンウク ]
女優さんが足らない。 国子監は花ざかり～ロマンスは最高学府で～ DVD-SET1 [ チャオ・ルースー[趙露思] ]
Python 動くグラフ (2021 MLB American League / Home Run 争い) 大谷選手の打球分析・仮 (2022) - ヒット vs アウト
もうStatcastデータには困らない！？pybaseballの紹介
github
import tkinterclass main_class: def __init__(self): #基本となるフレームをインスタンス root = tkinter.Tk() # ボタン # commandのオプションはボタンを押した場合の動作を指定します
アップデートの度に重くなる。 PCの性能が悪すぎる。 なぜアップデート中はディスク100%になるのか いまだに不明。
github
クラス化するほうが見通しがいいです。 github コンストラクタの引数initialはクラスのインスタンスの 引数として渡せます。 import tkinter class main_class: def __init__(self,initial):
import webbrowserurls = ["https://baseball.yahoo.co.jp/mlb/schedule/", "https://baseball.yahoo.co.jp/mlb/stats/"]for i in urls: webbrowser.open(i)
import webbrowser url = "https://plaza.rakuten.co.jp/kyoyoukun/"webbrowser.open(url)
あの人魚はなんでしょうか？ 斛珠＜コクジュ＞夫人～真珠の涙～ DVD-BOX3 [ ヤン・ミー ]
たったの3行でpython簡易webサーバを構築する手順【入門者向け】 VSCからならデバッグなしで実行すればよい。
タイムスリップもの 雲間の月は輝きて ～運命の恋人～ DVD-BOX2 [ チャン・ジーシー[張□溪] ]
シリアスでもない。 策略ロマンス～謎解きの鍵は運命の恋～ DVD-SET1 [ チャオ・シン ]
BDディスクレコーダーが操作画面でハングしてしまった。 説明書によるとコンセントを抜いて電源OFFしろとあるが 録画中のためそれができない。 録画が終わっているタイミングでやるしかないようだ。 家
スマホを新しくしたらテザリング機能が有料化されてしまった。libmoは無料だったのにsoftbank は有料のようです。
なつかしい名作を見た。 【中古レンタルアップ】 DVD アジア・韓国ドラマ 美賊イルジメ伝 全12巻セット チョン・イル ユン・ジンソ
教師あり学習 supervised Learning 年齢と体重という指標がわかっているとき ある人の年齢から体重を予測する。 教師なし学習 Unsupervised Learning データから指標を予測する。 最初は
>>> from PIL import Image>>> import numpy as np#PILでjpgをopenしnumpyでarrayへ>>> im = np.array(Image.open('sample1.jpg'))#arrayからjpgへ>>> pil_img = Image.fromarr
