pages/htdocs/petit-lesson/index.html

25 lines
12 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>プチレッスン目次 | おこげ俱楽部</title><meta name="title" content="プチレッスン目次 | おこげ俱楽部"><meta name="description" content="各レッスンに進む前にお読みください。問題形式で『オコゲ』でのプログラミング学習を体験することができます。"><meta name="keywords" content="オコゲ,プチレッスン,タマちー&ミミィ,オコゲ,blockly,プログラミング,上野学習塾"><meta name="author" content="ocogeclub"><meta name="robots" content="index, follow"><link rel="canonical" href="https://ocoge.club/petit-lesson/"><link rel="shortcut icon" type="image/png" href="/assets/img/favicon.png"><link rel="apple-touch-icon" href="/assets/img/apple-touch-icon.png"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"><script src="https://kit.fontawesome.com/73f7be0650.js" crossorigin="anonymous"></script><link rel="stylesheet" href="/assets/floatbox/floatbox.css"><script src="/assets/floatbox/floatbox.js" defer="defer"></script><link rel="stylesheet" href="/assets/css/ocmain.css"><link rel="stylesheet" href="/assets/css/main.css"><link rel="stylesheet" href="/assets/css/footer.css"><link rel="stylesheet" href="/assets/css/post.css"><meta property="og:image" content="https://ocoge.club/assets/img/raspberrycake_ogp.webp"><meta property="og:title" content="プチレッスン目次 | おこげ俱楽部"><meta property="og:description" content="各レッスンに進む前にお読みください。問題形式で『オコゲ』でのプログラミング学習を体験することができます。"><meta property="og:url" content="https://ocoge.club/petit-lesson/"><meta property="og:site_name" content="おこげ俱楽部"><meta name="twitter:card" content="summary"><meta name="twitter:site" content="@ocogeclub"></head><body class="flex flex-col h-screen bg-white text-gray-800 break-words"><header id="header" class="header-shadow bg-white px-6 py-5 z-50 fixed w-full top-0 transition-all transform ease-in-out duration-500"><div class="max-w-5xl mx-auto flex items-center flex-wrap justify-between"><div class="sm:mr-8"><a class="flex items-center" href="/"><span class="text-xl text-teal-700 font-semibold self-center"><img src="/assets/img/ocoge_title_kogecha.webp" title="おこげ俱楽部" alt="おこげ俱楽部" id="site_title"></span></a></div><nav id="menu" class="order-last md:order-none items-center flex-grow w-full md:w-auto md:flex hidden mt-2 md:mt-0"><a href="/about" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">About</a> <a href="/tags" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Tag List</a> <a href="https://cloud.ocoge.club/" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Cloud</a> <a href="https://mail.ocoge.club/" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Mail</a> <a href="https://git.ocoge.club/ocogeclub/pages" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">ocogIt</a></nav><form id="search" action="/search" class="order-last sm:order-none flex-grow items-center justify-end hidden sm:block mt-6 sm:mt-0"><label class="visually-hidden" for="header-searchbox">記事タイトル/概要を検索 ...</label> <input type="text" id="header-searchbox" name="q" placeholder="記事タイトル/概要を検索 ..." class="w-full sm:max-w-xs bg-gray-200 border border-transparent float-right focus:bg-white focus:border-gray-300 focus:outline-none h-8 p-4 placeholder-gray-500 rounded text-gray-700 text-sm"></form><div id="menu-toggle" class="flex items-center md:hidden text-gray-700 hover:text-teal-600 cursor-pointer sm:ml-6"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></div></div></header><main class="mx-7 lg:mx-6 mt-32 flex-grow"><article class="max-w-5xl mx-auto"><header class="mb-14"><h1 class="text-3xl text-center font-bold leading-normal text-gray-900 mt-0 mb-3">プチレッスン目次</h1><div class="text-center"><i class="fa-regular fa-clock"></i> 2022年5月14日</div><div class="mt-3 text-center"><a href="/tags/オコゲ" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#オコゲ</a> <a href="/tags/プチレッスン" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#プチレッスン</a> <a href="/tags/タマちー&ミミィ" class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-medium text-gray-700 m-0.5">#タマちー&ミミィ</a></div><div class="mt-10 -mx-7 md:mx-0"><img class="w-full max-w-2xl mx-auto" src="/assets/img/raspberrycake_ogp.webp" alt="This post thumbnail"></div></header><div id="content" class="prose text-gray-800 max-w-none"><div class="balloon_right"><div class="faceicon_right"><img src="/assets/img/mimmy.webp"><p>ミミィ</p></div><div class="chatting"><div class="says_right"><p>よく来たわね!ここでは問題形式で『オコゲ』でのプログラミング学習を体験することができるわ!どんどん挑戦してってちょうだい!</p></div></div></div><div class="balloon"><div class="faceicon"><img src="/assets/img/tama.webp"><p>タマちー</p></div><div class="chatting"><div class="think-l-bal-s"></div><div class="think-l-bal-l"></div><div class="tamathink"><p>どきどき…</p></div></div></div><h2>レッスンの進め方</h2><p>問題部分は以下のようなブロックです。</p><details class="lesson"><summary class="lesson"><i class="fa-solid fa-pen-to-square"></i> レッスン:生命と宇宙と万物についての究極の疑問の答えは?</summary><div class="lesson"><div class="slide">42です。</div></div></details><p>クリックすると答えが開きます。なるべくすぐには答えを見ずに、自分で考えてプログラムを作成して実行してみてください。プログラミングは基本的にトライアンドエラーです。まずは手を動かし、うまく動くまでいろいろ試してみましょう。</p><div class="balloon"><div class="faceicon"><img src="/assets/img/tama.webp"><p></p></div><div class="chatting"><div class="says">42</div></div></div><div class="balloon_right"><div class="faceicon_right"><img src="/assets/img/mimmy.webp"><p></p></div><div class="chatting"><div class="says_right"><p>『銀河ヒッチハイク・ガイド』ね!<br>気になる人は Google で「<a href="https://www.google.com/search?sxsrf=ALiCzsZ7Tpu1DPa32-x4LQo6iwxKA_SyTA:1652505813026&q=%E7%94%9F%E5%91%BD%E3%80%81%E5%AE%87%E5%AE%99%E3%80%81%E3%81%9D%E3%81%97%E3%81%A6%E4%B8%87%E7%89%A9%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%AE%E7%A9%B6%E6%A5%B5%E3%81%AE%E7%96%91%E5%95%8F%E3%81%AE%E7%AD%94%E3%81%88&stick=H4sIAAAAAAAAAOMwf8RYzi3w8sc9Yam8SWtOXmPM4OJyTsxJLs1JLMkvEori4nKtKChKLS7OzM8T8pHy4vJ4PmX-04l7Hzc0Pl3X_nTdTCDjcePcx43THzcue7Kj_XnnyseNqx83Lnnc2AIUedy47vnKbc-WbgUxpk18OrUfxFg75XFjB88iVqqZBQATFtvrxwAAAA&sa=X&ved=2ahUKEwiv2OXvn973AhWGAKYKHVGdCzAQ6RN6BAgxEAE&biw=1217&bih=966&dpr=1" target="_new" title="">生命、宇宙、そして万物についての究極の疑問の答え <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>」を検索するといいわディープ・ソート電卓が750万年の叡智が導き出す答えを計算してくれるわよレッスンの内容とは何の関係もないけどね</p></div></div></div><h2>注意事項</h2><h3>ブラウザは Chrome (Chromium) 推奨です</h3><p>『オコゲ』Web 体験版は Google Chrome (Chromium) 推奨です。それ以外のブラウザをご使用の場合、表示が乱れたり、機能の一部が使用できないことがあります。<br>※ レンダリングエンジンに Blink (Chromium) を使用しているブラウザMicrosoft Edge、Yandex Browserなどは使用可能です。<br>※ 使用できないブラウザの例Firefox「CODE」ツールボタン動作せず、Internet Explorer画面すらまともに表示されず:D~~)など。</p><h2>目次</h2><div class="card"><article class="blogcard"><h4 class="blogcard__heading"><a class="blogcard__link" href="/2022-05-14_petitlesson-01_typewriter-1/">プチレッスン『タイプライターっぽいもの』その1 | おこげ俱楽部</a></h4><img loading="lazy" class="blogcard__image" src="/assets/img/ogp_typewriter.webp"><p class="blogcard__description">サンプルプログラム「タイプライターもどき」をもうちょっとだけタイプライターっぽくしてみましょう。</p><div class="blogcard__meta"><img loading="lazy" class="blogcard__logo" src="/assets/img/favicon.png"><span class="blogcard__publisher">おこげ俱楽部</span></div></article></div><div class="balloon_right"><div class="faceicon_right"><img src="/assets/img/mimmy.webp"><p></p></div><div class="chatting"><div class="says_right"><p>レッスンでは基本的にアタシが教師役よ!<br>イマドキの言葉で言えばメンターね!</p></div></div></div><div class="balloon"><div class="faceicon"><img src="/assets/img/tama.webp"><p></p></div><div class="chatting"><div class="think-l-bal-s"></div><div class="think-l-bal-l"></div><div class="tamathink"><p>ミミィメンター…うさんくさい…</p></div></div></div></div><div class="mt-10"><div id="disqus_thread"></div><script>let disqusLoaded = false;
let disqus_config = function () {
this.page.url = 'https://ocoge.club/petit-lesson/';
this.page.identifier = 'petit-lesson';
};
function loadComments() {
if (!disqusLoaded) {
disqusLoaded = true;
const d = document, s = d.createElement('script');
s.src = '//ocogeclub.disqus.com/embed.js';
(d.head || d.body).appendChild(s);
}
}
if(!!window.IntersectionObserver) {
const disqusEl = document.getElementById('disqus_thread');
const intersectionObserver = new IntersectionObserver(function(entries, observer) {
if (entries && entries[0] && entries[0].isIntersecting) {
loadComments();
observer.unobserve(disqusEl);
}
});
intersectionObserver.observe(disqusEl);
}</script></div></article></main><footer class="mt-20 px-10 py-8 bg-gray-200"><div id="footer-badge"><a href="https://git.ocoge.club/" target="_new"><img loading="lazy" src="/assets/img/git-ocogeclub.svg" class="footer-img"></a><a href="http://creativecommons.org/licenses/by-sa/4.0/deed.ja" target="_new"><img loading="lazy" src="/assets/img/License_BY-SA_4.0.svg" class="footer-img"></a></div><div class="max-w-5xl mx-auto text-gray-700 text-center">© 2024 <a href="/" class="font-medium" target="_blank" rel="noopener">おこげ俱楽部</a>. Made by <a href="https://ocoge.club" target="_blank" rel="noopener">ocogeclub</a> using <a href="https://www.11ty.dev" target="_blank" rel="noopener">Eleventy</a> and <a href="https://github.com/dafiulh/vredeburg" target="_blank" rel="noopener">Vredeburg</a>.<br></div></footer><script src="/assets/js/bundle.js"></script></body><script>window.addEventListener('load', (event) => {
document.getElementsByTagName('html')[0].style.display='block';
});</script></html>