Youtubeで公開した「タイピングソフトを作ろう！」の内容を記事にしました。 ◆「タイピングソフトを作ろう！」トレーニング編 タイトル 動画? 前編 https://youtu.be/gRde88oundY 後編 https://youtu.be/Cqu6Zuj24wo ◆ サンプルファイル Github からダウンロードしてご利用ください https://github.com/yamazakidaisuke/keytyping_youtube ◆ どんなキータイピングアプリ？ 外部ファイルでキーワードを管理します、以下のように並べるだけ。 これはJavaScriptでFileApiを利用することで可能になります。 以下画面構成を見ていただければわかりますが、 上記のテキストファイルを読み込めば、オリジナルのキーワードをタイピングできます！！ ◆ 変数を準備 keytyping.html //*************************************** //グローバル変数 //*************************************** const G = { read_file : document.getElementById("file"), //File選択 output_text : document.getElementById("output_text"), //キーワード表示 input_text : document.getElementById("input_text"), //キーワード入力 start : document.getElementById("start"), //スタートボタン total : document.getElementById("total"), //点数表示 texts : [], //配列でキーワード入ってくる //読み込んだキーワードを配列で保持 score : 0 //点数を保持 } ◆関数（処理）を記述 keytyping.html //*************************************** //関数 //*************************************** //ファイルを選択読み込む（FileAPIを利用） function readFile(e){ const file = e.target.files[0]; //ファイル情報を代入 const reader = new FileReader(); //インスタンス化 reader.onload = function(){ //読込み完了後にloadする G.texts = reader.result.split("\n"); //配列変換して代入 }; reader.readAsText(file); //textFileをRead } //テキストをランダムに表示 function shuffleText(){ G.input_text.value=""; //入力文字を削除 const rf = Math.random() * G.texts.length; const r = Math.floor(rf); //整数の乱数を作成 G.output_text.value = G.texts[r]; //n番目テキストを表示 } //キーを押すたびに処理 function keyEvent(e){ if(G.output_text.value === G.input_text.value){ shuffleText(); //ランダムにテキストを再表示 G.score++; //スコアに＋１ G.total.textContent = G.score; //表示を入れ替える } } ◆ イベントと関数の紐づけ keytyping.html //*************************************** //イベントと関数の紐づけ //*************************************** G.start.onclick = shuffleText; G.read_file.onchange = readFile; G.input_text.onkeydown = keyEvent; 以下Youtube動画で詳しく解説してるので、どうぞ見てください！ ◆ どうでしたか？ そこそこできる人は上記の解説・コードで十分だったかと思いますが、 初学者であれば、動画で詳しくやってみてください。 以上

Youtubeで公開した内容を記事にしました。 タイピングソフトを作ろう！【後編】「HTML/CSS/JavaScript/PHP...のキータイピング練習にも対応」JavaScript入門 以下Youtubeでの解説動画も張っておきます。（同じ内容ですが、詳しすぎるほど説明してます（笑）） YouTube https://youtu.be ◆ サンプルファイル Github からダウンロードしてご利用ください https://github.com/yamazakidaisuke/keytyping_youtube ◆ どんなキータイピングアプリ？ 外部ファイルでキーワードを管理します、以下のように並べるだけ。 これはJavaScriptでFileApiを利用することで可能になります。 以下画面構成を見ていただければわかりますが、 上記のテキストファイルを読み込めば、オリジナルのキーワードをタイピングできます！！ image.png ◆ 変数を準備 keytyping.html //*************************************** //グローバル変数 //*************************************** const G = { read_file : document.getElementById("file"), //File選択 output_text : document.getElementById("output_text"), //キーワード表示 input_text : document.getElementById("input_text"), //キーワード入力 start : document.getElementById("start"), //スタートボタン total : document.getElementById("total"), //点数表示 texts : [], //配列でキーワード入ってくる //読み込んだキーワードを配列で保持 score : 0 //点数を保持 } ◆関数（処理）を記述 keytyping.html //*************************************** //関数 //*************************************** //ファイルを選択読み込む（FileAPIを利用） function readFile(e){ const file = e.target.files[0]; //ファイル情報を代入 const reader = new FileReader(); //インスタンス化 reader.onload = function(){ //読込み完了後にloadする G.texts = reader.result.split("\n"); //配列変換して代入 }; reader.readAsText(file); //textFileをRead } //テキストをランダムに表示 function shuffleText(){ G.input_text.value=""; //入力文字を削除 const rf = Math.random() * G.texts.length; const r = Math.floor(rf); //整数の乱数を作成 G.output_text.value = G.texts[r]; //n番目テキストを表示 } //キーを押すたびに処理 function keyEvent(e){ if(G.output_text.value === G.input_text.value){ shuffleText(); //ランダムにテキストを再表示 G.score++; //スコアに＋１ G.total.textContent = G.score; //表示を入れ替える } } ◆ イベントと関数の紐づけ keytyping.html //*************************************** //イベントと関数の紐づけ //*************************************** G.start.onclick = shuffleText; G.read_file.onchange = readFile; G.input_text.onkeydown = keyEvent; 以下Youtube動画で詳しく解説してるので、どうぞ見てください！ ◆ どうでしたか？ そこそこできる人は上記の解説・コードで十分だったかと思いますが、 初学者であれば、動画で詳しくやってみてください。 以上

Youtubeで公開した内容を記事にしました。 タイピングソフトを作ろう！【後編】「HTML/CSS/JavaScript/PHP...のキータイピング練習にも対応」JavaScript入門 以下Youtubeでの解説動画も張っておきます。（同じ内容ですが、詳しすぎるほど説明してます（笑）） ◆ サンプルファイル Github からダウンロードしてご利用ください https://github.com/yamazakidaisuke/keytyping_youtube ◆ どんなキータイピングアプリ？ 外部ファイルでキーワードを管理します、以下のように並べるだけ。 これはJavaScriptでFileApiを利用することで可能になります。 以下画面構成を見ていただければわかりますが、 上記のテキストファイルを読み込めば、オリジナルのキーワードをタイピングできます！！ ◆ 変数を準備 keytyping.html //*************************************** //グローバル変数 //*************************************** const G = { read_file : document.getElementById("file"), //File選択 output_text : document.getElementById("output_text"), //キーワード表示 input_text : document.getElementById("input_text"), //キーワード入力 start : document.getElementById("start"), //スタートボタン total : document.getElementById("total"), //点数表示 texts : [], //配列でキーワード入ってくる //読み込んだキーワードを配列で保持 score : 0 //点数を保持 } ◆関数（処理）を記述 keytyping.html //*************************************** //関数 //*************************************** //ファイルを選択読み込む（FileAPIを利用） function readFile(e){ const file = e.target.files[0]; //ファイル情報を代入 const reader = new FileReader(); //インスタンス化 reader.onload = function(){ //読込み完了後にloadする G.texts = reader.result.split("\n"); //配列変換して代入 }; reader.readAsText(file); //textFileをRead } //テキストをランダムに表示 function shuffleText(){ G.input_text.value=""; //入力文字を削除 const rf = Math.random() * G.texts.length; const r = Math.floor(rf); //整数の乱数を作成 G.output_text.value = G.texts[r]; //n番目テキストを表示 } //キーを押すたびに処理 function keyEvent(e){ if(G.output_text.value === G.input_text.value){ shuffleText(); //ランダムにテキストを再表示 G.score++; //スコアに＋１ G.total.textContent = G.score; //表示を入れ替える } } ◆ イベントと関数の紐づけ keytyping.html //*************************************** //イベントと関数の紐づけ //*************************************** G.start.onclick = shuffleText; G.read_file.onchange = readFile; G.input_text.onkeydown = keyEvent; 以下Youtube動画で詳しく解説してるので、どうぞ見てください！ ◆ どうでしたか？ そこそこできる人は上記の解説・コードで十分だったかと思いますが、 初学者であれば、動画で詳しくやってみてください。 以上

改善点 会社でもコメントでも御指摘あった通り殆ど日記と大差なくQiitaで書く様な物では無かったのと自分が思ってるよりか説明下手なのもあったので今回からはよりエンジニア向け且つ分かり易く纏める事を意識したいと思います、御指摘して下さった方々本当にありがとうございます。 そんな訳で本日の学習内容 午前中　主にHTMLの学習 HTMLの基本文法から、HTMLの始まりを表す<!DOCTYPE html>タグや見出しの<h>タグ、段落を表す<p>タグと箇条書きに用いる<li>タグにその<li>タグを囲む<ul>と兎に角タグ、タグ、タグと出て来ますが基本的にはタグとタグで挟むイメージと各タグの要素を少しでも覚えておけば案外混乱無くコーディング出来るのでしょうか？一先ずは<body>タグの間に本文を書き込むって事を頭に入れて今後の学習を進めてみましょうか。 午後　JavaScriptの学習 letでは無くvarが出て来てそれでいて使い方は同じ？取り敢えず調べて見て分かった事は varは再代入、再宣言が可能な事 var a　= 1 var a　= 2 // みたいな感じに使える letは再宣言がvarみたいに出来ない let a = 1 let a = 2 // が出来ない、再代入は出来るので間違えない様にしたい所。 グローバル変数、ローカル変数？これまた知らない単語が出て来たので調べました。 グローバル変数 関数の外側にある変数でプログラムが終わるまで値は保持される。 ローカル変数 関数の内側にある変数で関数が実行される度に初期値になる この辺は事前にプログラムの基礎知識を学習していれば使い方はスンナリ理解出来るかも。 そしてinnerHTML、これは取得したHTMLの中身を書き換える命令との事。 例えば事前にHTML側のidに画像1を入れてJavaScript側の操作でgetElementByIdでidを取得した後にこのinnerHTMLを使って画像2に書き換える処理を実装出来る訳で。 相変わらず分かりづらいとは思いますが大きく間違ってはいないはず。 はい、本日の学習は以上となります。 今後ももっと分かり易くエンジニア向けに纏められる様に改善致しますので宜しくお願いします。

改善点 会社でもコメントでも御指摘あった通り殆ど日記と大差なくQiitaで書く様な物では無かったのと自分が思ってるよりか説明下手なのもあったので今回からはよりエンジニア向け且つ分かり易く纏める事を意識したいと思います、御指摘して下さった方々本当にありがとうございます。 そんな訳で本日の学習内容 午前中　主にHTMLの学習 HTMLの基本文法から、HTMLの始まりを表す<!DOCTYPE html>タグや見出しの<h>タグ、段落を表す<p>タグと箇条書きに用いる<li>タグにその<li>タグを囲む<ul>と兎に角タグ、タグ、タグと出て来ますが基本的にはタグとタグで挟むイメージと各タグの要素を少しでも覚えておけば案外混乱無くコーディング出来るのでしょうか？一先ずは<body>タグの間に本文を書き込むって事を頭に入れて今後の学習を進めてみましょうか。 午後　JavaScriptの学習 letでは無くvarが出て来てそれでいて使い方は同じ？取り敢えず調べて見て分かった事は varは再代入、再宣言が可能な事 var a　= 1 var a　= 2 // みたいな感じに使える letは再宣言がvarみたいに出来ない let a = 1 let a = 2 // が出来ない、再代入は出来るので間違えない様にしたい所。 グローバル変数、ローカル変数？これまた知らない単語が出て来たので調べました。 グローバル変数 関数の外側にある変数でプログラムが終わるまで値は保持される。 ローカル変数 関数の内側にある変数で関数が実行される度に初期値になる この辺は事前にプログラムの基礎知識を学習していれば使い方はスンナリ理解出来るかも。 そしてinnerHTML、これは取得したHTMLの中身を書き換える命令との事。 例えば事前にHTML側のidに画像1を入れてJavaScript側の操作でgetElementByIdでidを取得した後にこのinnerHTMLを使って画像2に書き換える処理を実装出来る訳で。 相変わらず分かりづらいとは思いますが大きく間違ってはいないはず。 はい、本日の学習は以上となります。 今後ももっと分かり易くエンジニア向けに纏められる様に改善致しますので宜しくお願いします。

Streamlitでhtml記法を実現するには以下のように書けば良いわけだが、 st.write(text, unsafe_allow_html=True) 例えば条件によって文字の色を変えたい！でも改行とかは入れたくない！という時は、ここのtextにf-string表記を入れればよい。 数字のリストがあったとして、偶数はオレンジ、奇数はグレーで表示したい時の例 app.py import streamlit as st numbers = [1,2,3,4,5,6,7,8,9] text = "" for i in numbers: if i%2==0: text += f'<span style="color:coral">{i}</span>' else: text += f'<span style="color:darkgray">{i}</span>' st.markdown('**color change example:**\n') #太字 st.markdown("---") #区切り線 st.write(text, unsafe_allow_html=True) 出力結果