素晴らしいWebslides
webslidesを使ってみて、とてもいいことがわかりました
ホームページのコンテンツに適用できます
ひとつ問題が
利用できるコンポーネントがたくさんありますので、どう使えばいいのか調べるのが大変
そこでツールを作って見ました
webslidesはhtmlでドキュメントがあります。
ドキュメント自体もこのコンポーネントで作ってあります
コンポーネントの一覧と表示の例があれば便利です
ドキュメントをプログラムで読んで整形します。
- コンポーネントをテキストファイルにします
- コンポーネントの中からタイトルを取得します（うまく取れない箇所あり）
WEBアプリを作ります
- リスト：左にコンポーネント名
- HTML:真ん中にコンテンツのコード
- 出力：右に出力
機能
マイページは現在作業中のHTMLを保存する機能です。
- 様々なコンポーネントを表示して、利用するHTMLをコピー
- マイページを表示し、コピーしたHTMLをペースト
- マイページに保管
これでいろいろなコンポーネントを確認しながら、新しいページの作成ができます。
作業が終わったらクリップボードに入れて他で利用します
コンポーネントをクリックするとHTMLと出力が変わります
HTMLを手で修正すると出力も動的に変わります
「クリップボードへ」でHTMLがクリップボードに入ります。
codepenみたいに使えます
WEBアプリ
これはHTMLの勉強に使えるツールになります
右のコンテンツリストを下記のようにしたら
- 問題画像
- ひな形 これを修正して問題を解きます
- ヒント わからないときは見ます。（「前のページへ戻る」でひな形に復帰します）
- 答え 最後に答えを見ましょう
これを問題の数だけ作ります
次回のプログラミング教室でやってみます
作ったコードは
<!doctype html>
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&subset=latin-ext" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<title>Webslides components一覧表示</title>
<meta description="Webslidesのコンポーネント一覧を表示し、HTMLと出力を動的に確認できます" />
<meta property="og:url" content="http://clinic.mond.jp/pctext" />
<meta property="og:type" content="Webslides components一覧表示" />
<meta property="og:title" content="パソコンでこんなことができます" />
<meta property="og:description" content="Webslidesのコンポーネント一覧を表示し、HTMLと出力を動的に確認できます" />
<meta property="og:site_name" content="Webslidesのコンポーネント一覧" />
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<style>
body {
heighjt: 100%;
}
.t {
width: 100%;
font-size: 10px;
height: 94%;
}
.g {
height: 720px;
color: blue;
overflow: auto;
}
.c10 {
font-size: 10px;
}
.view {
width: 100%;
height: 720px;
}
.h100 {
height: 100%;
}
</style>
</head>
<body>
<div class="container-fluid h100">
<div class="row">
<div class="col-12 text-center">
<h1>Webslides components</h1>
</div>
<div class="col-2 g" id=list>...</div>
<div class="c10 col-3">
<button class=btn onclick="c()">クリップボードへ</button>
<button class=btn onclick="p()">前のページへ戻る</button>
<button class=btn onclick="my1()">現在の状態をマイページとして保存する</button>
<button class=btn onclick="my2()">マイページを表示</button>
<textarea class=t id=textdoc cols=56 rows=30></textarea>
</div>
<div class="col-7 h100"><iframe id=ifr name=ifr src=one.html class=view></iframe></div>
</div>
</div>
<script>
</script>
<script>
var MyPage;
var MyPageFlg;
var curID;
var curText;
var url;
var sheight;
MyPageFlg = false;
const init = () => {
url = location.href;
/* URLパラメータでテキストエリアの文字サイズを変更する*/
if (url.indexOf("c12") > 0) {
$("#textdoc").css("font-size", "12px");
}
if (url.indexOf("c16") > 0) {
$("#textdoc").css("font-size", "16px");
}
if (url.indexOf("c20") > 0) {
$("#textdoc").css("font-size", "20px");
}
if (url.indexOf("c30") > 0) {
$("#textdoc").css("font-size", "30px");
}
var screen_obj = window.screen;
sheight = screen_obj.availHeight;
$("#list").css("height", window.innerHeight * 0.9);
$("#ifr").css("height", window.innerHeight * 0.9);
}
const l = () => {
$.get("filename.txt", function(data) {
w2 = data.split("\n");
wlist = "";
w2.forEach(function(e) {
w3 = e.split(",");
w = "contents\/" + w3[0] + ".txt";
w4 = "<div onclick=\"a(\'" + w + "\');\">" + w3[1] + "</div>";
wlist = wlist + w4;
});
$("#list").html(wlist);
});
}
const p = () => {
$("#textdoc").val(curtext);
$("#ifr").contents().find("body").html(curtext);
}
const u = () => {
var w = $("#textdoc").val();
$("#ifr").contents().find("body").html(w);
}
const c = () => {
var textarea = document.getElementsByTagName("textarea")[0];
textarea.select();
document.execCommand("copy");
}
function GetFile(w) {
$.get(w,
function(data) {
curtext = $("#textdoc").val();
$("#ifr").contents().find("body").html(data);
$("#textdoc").val(data);
}
);
}
const my1 = () => {
/*現在のページをマイページに保管*/
MyPage = $("#textdoc").val();
}
const my2 = () => {
/*マイページを復帰*/
MyPageFlg = true;
$("#textdoc").val(MyPage);
$("#ifr").contents().find("body").html(MyPage);
}
const a = (w) => {
curID = w;
/*マイページが表示されている状態で、他のページに遷移するときはマイページを保存する*/
if (MyPageFlg == true) {
my1();
MyPageFlg = false;
}
GetFile(w);
}
/* テキストエリアから動的更新*/
$('#textdoc').keyup(function() {
u();
});
l();
init();
</script>
</script>
</body>
</html>