webslidesコンポーネントの使い方をわかりやすくするツール
素晴らしいWebslidesWebSlides — Making HTML Presentations EasyWebSlides is a beautiful solution for telling stories. Just the essentials. Good karma.webslides.tvwebslidesを使ってみて、とてもいいことがわかりましたホームページのコンテンツに適用できますひとつ問題が利用できるコンポーネントがたくさんありますので、どう使えばいいのか調べるのが大変そこでツールを作って見ましたwebslidesはhtmlでドキュメントがあります。ドキュメント自体もこのコンポーネントで作ってありますコンポーネントの一覧と表示の例があれば便利ですドキュメントをプログラムで読んで整形します。 コンポーネントをテキストファイルにします コンポーネントの中からタイトルを取得します（うまく取れない箇所あり）WEBアプリを作ります リスト：左にコンポーネント名 HTML:真ん中にコンテンツのコード 出力：右に出力機能マイページは現在作業中のHTMLを保存する機能です。 様々なコンポーネントを表示して、利用するHTMLをコピー マイページを表示し、コピーしたHTMLをペースト マイページに保管これでいろいろなコンポーネントを確認しながら、新しいページの作成ができます。作業が終わったらクリップボードに入れて他で利用しますコンポーネントをクリックするとHTMLと出力が変わりますHTMLを手で修正すると出力も動的に変わります「クリップボードへ」でHTMLがクリップボードに入ります。https://clinic.mond.jp/webslidescomponents/codepenみたいに使えますhttps://codepen.io/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>
