[{"data":1,"prerenderedAt":5119},["ShallowReactive",2],{"\u002Ftag\u002Fsocsaga\u002Fpage\u002F1":3},[4,2538,3038,3423,4615],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9,"description":10,"category":11,"tag":13,"thumbnail":20,"createdAt":21,"updatedAt":22,"body":23,"_type":2532,"_id":2533,"_source":2534,"_file":2535,"_stem":2536,"_extension":2537},"\u002Farticles\u002Fhacker-1","articles",false,"","ちょっとだけハッカー","ソックサーガ版学習アプリの改造にAIエージェントを使ってみた",[12],"programming",[14,15,16,17,18,19],"ai","beginner-programming","socsaga","information-ed","web-standards","vue","hacker-1.jpg","2025\u002F10\u002F26","2025\u002F11\u002F22",{"type":24,"children":25,"toc":2517},"root",[26,34,49,61,73,77,83,96,108,113,118,123,134,137,144,189,442,454,459,462,468,473,502,518,531,536,541,544,550,601,630,641,689,694,705,715,727,738,759,762,767,772,775,780,823,931,970,990,993,999,1004,1020,1029,1034,1039,1078,1109,1120,1133,1146,1149,1155,1160,1204,1209,1240,1245,1250,1286,1291,1294,1299,1304,1309,1321,1326,1331,1362,1375,1388,1409,1414,1434,1446,1453,1456,1461,1466,1487,1515,1520,1533,1538,1543,1548,1575,1580,1599,1604,1627,1643,1656,1661,1672,1675,1681,1702,1707,1736,1739,1751,1756,1769,1782,1787,1794,1806,1811,1814,1819,1854,1868,1875,1880,1893,1898,1932,1937,1940,1945,1958,1963,1968,1981,1986,1994,2007,2012,2025,2030,2039,2044,2049,2060,2065,2068,2073,2085,2090,2099,2103,2216,2220,2313,2317,2405,2409,2502,2505,2508],{"type":27,"tag":28,"props":29,"children":30},"element","p",{},[31],{"type":32,"value":33},"text","　現役教員時代、「ハダノ先生はハッカーみたいなことできるんでしょ」と生徒たちに言われていました。",{"type":27,"tag":35,"props":36,"children":37},"ul",{},[38],{"type":27,"tag":39,"props":40,"children":41},"li",{},[42],{"type":27,"tag":43,"props":44,"children":46},"a",{"href":45},"\u002Farticles\u002Fblog-3",[47],{"type":32,"value":48},"🔗AIエージェントはWeb系プログラミングの役に立つか",{"type":27,"tag":28,"props":50,"children":51},{},[52,54,59],{"type":32,"value":53},"で、AIエージェントの支援があれば、「",{"type":27,"tag":55,"props":56,"children":57},"strong",{},[58],{"type":32,"value":9},{"type":32,"value":60},"」になれるかもと思いました。",{"type":27,"tag":28,"props":62,"children":64},{"style":63},"text-align: right;",[65,67],{"type":32,"value":66},"⇒",{"type":27,"tag":43,"props":68,"children":70},{"href":69},"#spellquest",[71],{"type":32,"value":72}," お急ぎの方はこちらへ",{"type":27,"tag":74,"props":75,"children":76},"br",{},[],{"type":27,"tag":78,"props":79,"children":81},"h2",{"id":80},"ソックサーガ版学習アプリの改造にaiエージェントを使ってみた",[82],{"type":32,"value":10},{"type":27,"tag":28,"props":84,"children":85},{},[86,93],{"type":27,"tag":87,"props":88,"children":92},"img",{"src":89,"alt":90,"width":91},"\u002Fimg\u002Fsocsaga01.jpg","ソックサーガ","100%",[],{"type":27,"tag":74,"props":94,"children":95},{},[],{"type":27,"tag":35,"props":97,"children":98},{},[99],{"type":27,"tag":39,"props":100,"children":101},{},[102],{"type":27,"tag":43,"props":103,"children":105},{"href":104},"\u002Ftag\u002Fsocsaga",[106],{"type":32,"value":107},"🔗ソックサーガ",{"type":27,"tag":28,"props":109,"children":110},{},[111],{"type":32,"value":112},"を中心に、中学生のプログラミング教育を後押ししてきたハダノですが、壁にぶつかっていました。",{"type":27,"tag":28,"props":114,"children":115},{},[116],{"type":32,"value":117},"　一般の中学校教員にとって、プログラミング環境構築はハードルが高いので、クラウド統合開発環境を推奨してきました。GlitchからReplitに乗り換え、自校運用できるように導いてきたつもりです。",{"type":27,"tag":28,"props":119,"children":120},{},[121],{"type":32,"value":122},"　ところが、2024年からReplitが使いづらくなりました。無料でできる範囲が小さくなってしまったのです。かといって、Glitchに戻る気にもなれません。",{"type":27,"tag":28,"props":124,"children":125},{},[126,131],{"type":27,"tag":87,"props":127,"children":130},{"src":128,"alt":129,"width":91},"\u002Fimg\u002Freplsoc.jpg","ReplitによるWebプログラミング",[],{"type":27,"tag":74,"props":132,"children":133},{},[],{"type":27,"tag":74,"props":135,"children":136},{},[],{"type":27,"tag":138,"props":139,"children":141},"h3",{"id":140},"webアプリ開発環境のおすすめは",[142],{"type":32,"value":143},"Webアプリ開発環境のおすすめは？",{"type":27,"tag":145,"props":146,"children":149},"div",{"className":147},[148],"balloon2",[150,152,166,168,171,173,176,179,181,184,186],{"type":32,"value":151},"\n  ",{"type":27,"tag":145,"props":153,"children":156},{"className":154},[155],"icon",[157,159,165],{"type":32,"value":158}," ",{"type":27,"tag":87,"props":160,"children":164},{"src":161,"alt":162,"width":163},"\u002Fimg\u002Fhadano80.png","ハダノ",80,[],{"type":32,"value":158},{"type":32,"value":167},"\n2026年以降のことを考えた場合、Replitに代わるクラウド統合開発環境は何がよいでしょうか。",{"type":27,"tag":74,"props":169,"children":170},{},[],{"type":32,"value":172},"\nおすすめの上位3つを理由付きで教えてください。",{"type":27,"tag":74,"props":174,"children":175},{},[],{"type":27,"tag":74,"props":177,"children":178},{},[],{"type":32,"value":180},"\nまた、当面は（中学生が）ローカル（LANも含む）でWebアプリのコーディングをし、ローカルサーバーを利用して動作確認後、無料ホスティングサービス（Cloundflareなど）を利用して（教員が）デプロイすることになると思います。",{"type":27,"tag":74,"props":182,"children":183},{},[],{"type":32,"value":185},"\nその際の手段としておすすめの上位3つを理由付きで教えてください。",{"type":27,"tag":74,"props":187,"children":188},{},[],{"type":27,"tag":145,"props":190,"children":193},{"className":191},[192],"balloon1",[194,195,206,208,211,214,222,227,327,331,339,344,437],{"type":32,"value":151},{"type":27,"tag":145,"props":196,"children":198},{"className":197},[155],[199,200,205],{"type":32,"value":158},{"type":27,"tag":87,"props":201,"children":204},{"src":202,"alt":203,"width":163},"\u002Fimg\u002Faiagent.png","Gemini CLI",[],{"type":32,"value":158},{"type":32,"value":207},"\n✦ 中学校での情報教育、特にWebアプリケーション開発の環境構築に関するご経験と課題、拝見いたしました。Replitの仕様変更は、教育現場にとって大きな課題かと存じます。2026年以降を見据えた上で、これまでのご経験と今後の運用形態を踏まえ、クラウドIDEとローカル開発＋ホスティングのそれぞれについて、おすすめの選択肢を提案させていただきます。",{"type":27,"tag":74,"props":209,"children":210},{},[],{"type":27,"tag":74,"props":212,"children":213},{},[],{"type":27,"tag":28,"props":215,"children":216},{},[217],{"type":27,"tag":55,"props":218,"children":219},{},[220],{"type":32,"value":221},"Replitに代わるクラウド統合開発環境 おすすめ上位3選",{"type":27,"tag":28,"props":223,"children":224},{},[225],{"type":32,"value":226},"クラウドIDEは、生徒の環境差異をなくし、教員が管理しやすい点が最大のメリットです。Replitの代替としては、以下の3つが考えられます。",{"type":27,"tag":228,"props":229,"children":230},"ol",{},[231,265,293],{"type":27,"tag":39,"props":232,"children":233},{},[234,239],{"type":27,"tag":55,"props":235,"children":236},{},[237],{"type":32,"value":238},"GitHub Codespaces",{"type":27,"tag":35,"props":240,"children":241},{},[242],{"type":27,"tag":39,"props":243,"children":244},{},[245,247],{"type":32,"value":246},"理由:\n",{"type":27,"tag":35,"props":248,"children":249},{},[250,255,260],{"type":27,"tag":39,"props":251,"children":252},{},[253],{"type":32,"value":254},"教育現場への優遇: 「GitHub Education」に登録することで、教員は無料の利用枠を得られる可能性があります。生徒も同様の特典を受けられる場合があり、コスト面の課題を解決できる可能性が最も高いです.",{"type":27,"tag":39,"props":256,"children":257},{},[258],{"type":32,"value":259},"デファクトスタンダード: 中身は多くのプロが使用する「Visual Studio Code (VS Code)」そのものです。生徒は実践的な開発環境に早期から慣れ親しむことができ、将来的なステップアップにも繋がります。",{"type":27,"tag":39,"props":261,"children":262},{},[263],{"type":32,"value":264},"GitHub連携: ソースコード管理の学習と開発環境が一体化しており、バージョン管理の概念を自然に学べます。",{"type":27,"tag":39,"props":266,"children":267},{},[268,273],{"type":27,"tag":55,"props":269,"children":270},{},[271],{"type":32,"value":272},"CodeSandbox",{"type":27,"tag":35,"props":274,"children":275},{},[276],{"type":27,"tag":39,"props":277,"children":278},{},[279,280],{"type":32,"value":246},{"type":27,"tag":35,"props":281,"children":282},{},[283,288],{"type":27,"tag":39,"props":284,"children":285},{},[286],{"type":32,"value":287},"手軽さとコラボレーション: Webフロントエンド開発に特化しており、ReactやVue.jsといったモダンな技術のテンプレートが豊富です。ブラウザ上で非常に高速に動作し、複数人でのリアルタイム共同編集機能は、グループ学習に最適です。",{"type":27,"tag":39,"props":289,"children":290},{},[291],{"type":32,"value":292},"教育向け機能: 教室管理機能（CodeSandbox Classrooms）が提供されており、課題の配布や進捗管理が容易です。",{"type":27,"tag":39,"props":294,"children":295},{},[296,301],{"type":27,"tag":55,"props":297,"children":298},{},[299],{"type":32,"value":300},"StackBlitz",{"type":27,"tag":35,"props":302,"children":303},{},[304],{"type":27,"tag":39,"props":305,"children":306},{},[307,308],{"type":32,"value":246},{"type":27,"tag":35,"props":309,"children":310},{},[311,316],{"type":27,"tag":39,"props":312,"children":313},{},[314],{"type":32,"value":315},"圧倒的な速度: ブラウザ内でNode.js環境を直接実行する独自の「WebContainers」技術により、環境の起動や動作が非常に高速です。生徒を待たせることなく、すぐにコーディングを開始できます。",{"type":27,"tag":39,"props":317,"children":318},{},[319,321,324],{"type":32,"value":320},"オフライン動作: 一度プロジェクトを開けば、オフラインでも動作するPWA（プログレッシブウェブアプリ）として機能します。ネットワーク環境が不安定な場合でも、学習を継続できる可能性があります。",{"type":27,"tag":74,"props":322,"children":323},{},[],{"type":27,"tag":74,"props":325,"children":326},{},[],{"type":27,"tag":328,"props":329,"children":330},"hr",{},[],{"type":27,"tag":28,"props":332,"children":333},{},[334],{"type":27,"tag":55,"props":335,"children":336},{},[337],{"type":32,"value":338},"ローカル開発＋無料ホスティング おすすめ上位3選",{"type":27,"tag":28,"props":340,"children":341},{},[342],{"type":32,"value":343},"ローカルでの開発は、ツールの仕組みをより深く理解することに繋がります。教員がデプロイを管理する現在の運用に最適な組み合わせは以下の通りです。",{"type":27,"tag":228,"props":345,"children":346},{},[347,375,403],{"type":27,"tag":39,"props":348,"children":349},{},[350,355],{"type":27,"tag":55,"props":351,"children":352},{},[353],{"type":32,"value":354},"開発: VS Code + Live Server拡張機能 \u002F デプロイ: GitHub Pages",{"type":27,"tag":35,"props":356,"children":357},{},[358],{"type":27,"tag":39,"props":359,"children":360},{},[361,362],{"type":32,"value":246},{"type":27,"tag":35,"props":363,"children":364},{},[365,370],{"type":27,"tag":39,"props":366,"children":367},{},[368],{"type":32,"value":369},"開発の手軽さ: VS Codeは無料で高機能なエディタです。「Live Server」という拡張機能を追加すれば、HTMLファイルを右クリックするだけでローカルサーバーが起動し、コードの変更が即座にブラウザに反映されるため、生徒でも直感的に扱えます。",{"type":27,"tag":39,"props":371,"children":372},{},[373],{"type":32,"value":374},"デプロイの簡易性: GitHub\nPagesは、GitHubリポジトリにソースコードをアップロード（プッシュ）するだけでWebサイトとして公開できる、最も手軽なホスティングサービスの一つです。完全に無料で利用でき、バージョン管理と公開作業が一体化しているため、教育的価値も高いです。",{"type":27,"tag":39,"props":376,"children":377},{},[378,383],{"type":27,"tag":55,"props":379,"children":380},{},[381],{"type":32,"value":382},"開発: VS Code + Live Server拡張機能 \u002F デプロイ: Cloudflare Pages",{"type":27,"tag":35,"props":384,"children":385},{},[386],{"type":27,"tag":39,"props":387,"children":388},{},[389,390],{"type":32,"value":246},{"type":27,"tag":35,"props":391,"children":392},{},[393,398],{"type":27,"tag":39,"props":394,"children":395},{},[396],{"type":32,"value":397},"開発の容易さ: 開発環境は1位と同じく、最も手軽な組み合わせです。",{"type":27,"tag":39,"props":399,"children":400},{},[401],{"type":32,"value":402},"高機能なデプロイ: Cloudflare Pagesは、GitHub Pagesと同様にGitリポジトリと連携して自動でデプロイできます。それに加え、より高速な配信（CDN）、詳細なアクセス解析、共同作業者へのプレビューURL発行など、無料で使える機能が非常に豊富です。教員がデプ\nロイを管理・運用する上で、より柔軟で高度な対応が可能です。",{"type":27,"tag":39,"props":404,"children":405},{},[406,411],{"type":27,"tag":55,"props":407,"children":408},{},[409],{"type":32,"value":410},"開発: Node.js + live-server \u002F デプロイ: Vercel",{"type":27,"tag":35,"props":412,"children":413},{},[414],{"type":27,"tag":39,"props":415,"children":416},{},[417,418],{"type":32,"value":246},{"type":27,"tag":35,"props":419,"children":420},{},[421,426],{"type":27,"tag":39,"props":422,"children":423},{},[424],{"type":32,"value":425},"一歩進んだ開発体験: PCにNode.jsをインストールし、コマンドプロンプト（ターミナル）から npx live-server のようなコマンドでサーバーを起動する方法です。プログラミングのより実践的な側面に触れる良い機会になります。",{"type":27,"tag":39,"props":427,"children":428},{},[429,431,434],{"type":32,"value":430},"最先端のデプロイ先: Vercelは、特にReactなどのモダンなフレームワークを使ったWebアプリのホスティングに最適です。デプロイは非常に簡単かつ高速で、世界中の多くの開発者に利用されています。生徒が将来、より複雑なアプリケーション開発へ興味を持った際\nの、スムーズな移行先となります。",{"type":27,"tag":74,"props":432,"children":433},{},[],{"type":27,"tag":74,"props":435,"children":436},{},[],{"type":27,"tag":28,"props":438,"children":439},{},[440],{"type":32,"value":441},"ご自身のスキルや、生徒たちにどこまでの体験をさせたいかに合わせて、これらの選択肢を検討・試してみてはいかがでしょうか。",{"type":27,"tag":28,"props":443,"children":444},{},[445,447,452],{"type":32,"value":446},"　とても的確なアドバイスです。とりあえず、",{"type":27,"tag":55,"props":448,"children":449},{},[450],{"type":32,"value":451},"ローカル開発の2番",{"type":32,"value":453},"で行くことにします。",{"type":27,"tag":28,"props":455,"children":456},{},[457],{"type":32,"value":458},"　しばらくお休みしていた「ソックサーガ」による開発を再開し、「英単語の発音チェックアプリ」をグレードアップしようとしたところで問題が発生しました。",{"type":27,"tag":74,"props":460,"children":461},{},[],{"type":27,"tag":138,"props":463,"children":465},{"id":464},"英単語の発音チェックアプリが動かなくなった",[466],{"type":32,"value":467},"「英単語の発音チェック」アプリが動かなくなった！？",{"type":27,"tag":87,"props":469,"children":472},{"src":470,"alt":471,"width":91},"\u002Fimg\u002Fspeechrecognition.png","Web Speech APIによる発音チェック",[],{"type":27,"tag":145,"props":474,"children":476},{"className":475},[148],[477,478,487,489,492,494,497,499],{"type":32,"value":151},{"type":27,"tag":145,"props":479,"children":481},{"className":480},[155],[482,483,486],{"type":32,"value":158},{"type":27,"tag":87,"props":484,"children":485},{"src":161,"alt":162,"width":163},[],{"type":32,"value":158},{"type":32,"value":488},"\n以前は正常に作動していた自作のWebアプリで「英単語の発音チェック」ができなくなりました。",{"type":27,"tag":74,"props":490,"children":491},{},[],{"type":32,"value":493},"\n@C:\\nuxt●\\～～\\public\\jisshu\\tango.html",{"type":27,"tag":74,"props":495,"children":496},{},[],{"type":32,"value":498},"\n原因を調査し、解決策を提案してください。",{"type":27,"tag":74,"props":500,"children":501},{},[],{"type":27,"tag":145,"props":503,"children":505},{"className":504},[192],[506,507,516],{"type":32,"value":151},{"type":27,"tag":145,"props":508,"children":510},{"className":509},[155],[511,512,515],{"type":32,"value":158},{"type":27,"tag":87,"props":513,"children":514},{"src":202,"alt":203,"width":163},[],{"type":32,"value":158},{"type":32,"value":517},"\n✦ 承知いたしました。C:\\nuxt●\\～～\\jisshu\\tango.html\n  を調査し、英単語の発音チェックが機能しなくなった原因を特定し、解決策を提案します。\n",{"type":27,"tag":519,"props":520,"children":525},"pre",{"className":521,"code":523,"language":524,"meta":8},[522],"language-tango1.jps1","✦ ファイル tango.html の内容を確認しました。\n  このアプリはVue.jsを使用し、発音チェック機能は Web Speech API\n  を利用していると推測されます。\n  特に、xhear() という関数がその中核を担っているようです。\n\n  次に、xhear()関数が定義されていると思われる \n  C:\\nuxt●\\～～\\ssscript.js の内容を調査します。\n\n✦ ssscript.js の内容を確認しましたが、\n  xhear 関数の定義が見つかりませんでした。\n  tango.htmlから呼び出されているにもかかわらず、\n  関連ファイル内に見当たらないのは不可解です。\n\n  以前は動作していたという状況から、ssscript.js から\n  xhear 関数が誤って削除された可能性が最も高いと判断します。\n\n  そこで、Web Speech API を使用して音声認識を行う xhear 関数を\n  新たに作成し、ssscript.js のVueインスタンスの  methods \n  に追加することで、機能を復元します。\n\n  この新しい xhear 関数は、tango.html のロジックに合わせて、\n  発音が正しければ次のスライド（正解）に、\n  間違っていれば不正解のスライドに移動するように実装します。\n\n  以下の手順で C:\\nuxt●\\～～\\ssscript.js を修正します。\n","tango1.jps1",[526],{"type":27,"tag":527,"props":528,"children":529},"code",{"__ignoreMap":8},[530],{"type":32,"value":523},{"type":27,"tag":28,"props":532,"children":533},{},[534],{"type":32,"value":535},"　自分で確認したところ、確かにその通りだったので、修正実行を Gemini CLI にお願いしました。",{"type":27,"tag":28,"props":537,"children":538},{},[539],{"type":32,"value":540},"　ところが、どうも期待した動作をしません。結局、自力で修復しました。",{"type":27,"tag":74,"props":542,"children":543},{},[],{"type":27,"tag":138,"props":545,"children":547},{"id":546},"aiエージェントがまちがえたわけ",[548],{"type":32,"value":549},"AIエージェントがまちがえたわけ",{"type":27,"tag":145,"props":551,"children":553},{"className":552},[148],[554,555,564,566,569,571,574,576,579,581,584,586,589,591,594,596,599],{"type":32,"value":151},{"type":27,"tag":145,"props":556,"children":558},{"className":557},[155],[559,560,563],{"type":32,"value":158},{"type":27,"tag":87,"props":561,"children":562},{"src":161,"alt":162,"width":163},[],{"type":32,"value":158},{"type":32,"value":565},"\n……xhear 関数が誤って削除された可能性が最も高いと判断します。』",{"type":27,"tag":74,"props":567,"children":568},{},[],{"type":32,"value":570},"\nというお答えでした。こちらで確認したところ、その通りでした。",{"type":27,"tag":74,"props":572,"children":573},{},[],{"type":32,"value":575},"\nただ、そのあとに修正していただいた、",{"type":27,"tag":74,"props":577,"children":578},{},[],{"type":32,"value":580},"\n@C:\\nuxt●\\～～\\ssscript_gemini.js",{"type":27,"tag":74,"props":582,"children":583},{},[],{"type":32,"value":585},"\nは、動作しません。",{"type":27,"tag":74,"props":587,"children":588},{},[],{"type":32,"value":590},"\n自力で修復した",{"type":27,"tag":74,"props":592,"children":593},{},[],{"type":32,"value":595},"\n@C:\\nuxt●\\～～\\ssscript_original.js",{"type":27,"tag":74,"props":597,"children":598},{},[],{"type":32,"value":600},"\nは動いたのですが、両者の違いは何だったと考えられますか。\n",{"type":27,"tag":145,"props":602,"children":604},{"className":603},[192],[605,606,615,617],{"type":32,"value":151},{"type":27,"tag":145,"props":607,"children":609},{"className":608},[155],[610,611,614],{"type":32,"value":158},{"type":27,"tag":87,"props":612,"children":613},{"src":202,"alt":203,"width":163},[],{"type":32,"value":158},{"type":32,"value":616},"\n✦ ファイルの内容を確認し、比較いたしました。ssscript_gemini.jsが動作しなかった原因をご説明します。\n",{"type":27,"tag":28,"props":618,"children":619},{},[620,622,628],{"type":32,"value":621},"結論から言うと、",{"type":27,"tag":527,"props":623,"children":625},{"className":624},[],[626],{"type":32,"value":627},"xhear",{"type":32,"value":629},"関数の引数（パラメータ）と、その後の処理の仕方に違いがありました。",{"type":27,"tag":519,"props":631,"children":636},{"className":632,"code":634,"language":635,"meta":8},[633],"language-ssscript.js","  1. 動作する ssscript_original.js の xhear 関数\n\n  ご自身で修復されたこちらのバージョンでは、\n  xhear関数は以下のように定義されています。\n\n   1 xhear: function(word='', go1=1, go2=2, langn=1) {\n   2   \u002F\u002F ...\n   3   \u002F\u002F ★判定後、引数で受け取った \n            go1 または go2 を使ってページを移動する\n   4   this.xgo(retval);\n   5 }\n\n  この関数は、照合する単語 word に加えて、\n  正解時の移動先 go1、不正解時の移動先 go2、言語 langn\n  を引数として受け取ります。\n  そして、音声認識の結果に応じて、xgo() 関数を呼び出して\n  指定されたページへ移動します。\n  これにより、tango.html側で柔軟に動作を制御できます。\n\n  2. 動作しなかった ssscript_gemini.js の xhear 関数\n\n  一方、私が以前作成したこちらのバージョンでは、\n  関数は以下のように定義されていました。\n\n   1 xhear: function(ans = \"\") {\n   2   \u002F\u002F ...\n   3   if (speechResult.includes(ans.toLowerCase())) {\n   4     this.evax('xgo(1)'); \u002F\u002F ★常に「1」に移動する\n   5   } else {\n   6     this.evax('xgo(2)'); \u002F\u002F ★常に「2」に移動する\n   7   }\n   8 }\n\n  この関数が受け取る引数は、照合する単語 ans のみです。\n  正解・不正解の移動先は、関数の中に xgo(1)、xgo(2)\n  と固定で書かれてしまっています。\n","ssscript.js",[637],{"type":27,"tag":527,"props":638,"children":639},{"__ignoreMap":8},[640],{"type":32,"value":634},{"type":27,"tag":145,"props":642,"children":644},{"className":643},[192],[645,646,655,663,668,673,684],{"type":32,"value":151},{"type":27,"tag":145,"props":647,"children":649},{"className":648},[155],[650,651,654],{"type":32,"value":158},{"type":27,"tag":87,"props":652,"children":653},{"src":202,"alt":203,"width":163},[],{"type":32,"value":158},{"type":27,"tag":28,"props":656,"children":657},{},[658],{"type":27,"tag":55,"props":659,"children":660},{},[661],{"type":32,"value":662},"なぜ動作しなかったか",{"type":27,"tag":28,"props":664,"children":665},{},[666],{"type":32,"value":667},"tango.htmlでは、xhear('apple', 5, 6)\nのように、正解なら5ページへ、不正解なら6ページへ、といった形でxhear関数を呼び出していたはずです。",{"type":27,"tag":28,"props":669,"children":670},{},[671],{"type":32,"value":672},"しかし、ssscript_gemini.jsのxhear関数は移動先の引数（5や6）を受け取る作りになっていなかったため、それらの指\n定が無視され、常に1か2へ移動しようとしてしまいました。これが、意図した通りに動作しなかった原因です。",{"type":27,"tag":28,"props":674,"children":675},{},[676,678,681],{"type":32,"value":677},"ご自身で修復されたssscript_original.jsは、tango.htmlからの引数を正しく受け取って処理するようになっていたため\n、正常に動作した、ということになります。",{"type":27,"tag":74,"props":679,"children":680},{},[],{"type":27,"tag":74,"props":682,"children":683},{},[],{"type":27,"tag":28,"props":685,"children":686},{},[687],{"type":32,"value":688},"私の修正が不十分で、ご不便をおかけし大変申し訳ありませんでした。",{"type":27,"tag":28,"props":690,"children":691},{},[692],{"type":32,"value":693},"、、、と、もっともらしい説明をしていますが、「じゃあ、なんで最初からそのように修正しなかったの？」と突っ込みたくなります。",{"type":27,"tag":28,"props":695,"children":696},{},[697,702],{"type":27,"tag":87,"props":698,"children":701},{"src":699,"alt":700,"width":91},"\u002Fimg\u002Faifailure.jpg","AIエージェントの失敗",[],{"type":27,"tag":74,"props":703,"children":704},{},[],{"type":27,"tag":28,"props":706,"children":707},{},[708,710],{"type":32,"value":709},"　",{"type":27,"tag":55,"props":711,"children":712},{},[713],{"type":32,"value":714},"実は、Gemini CLI の説明は完全に間違っています。",{"type":27,"tag":28,"props":716,"children":717},{},[718,719,725],{"type":32,"value":709},{"type":27,"tag":527,"props":720,"children":722},{"className":721},[],[723],{"type":32,"value":724},"xgo()",{"type":32,"value":726}," 関数などハダノが定義した関数への理解が足りないのがその原因です。ソックサーガは、「中学生にWebアプリを作らせるためのWebアプリ」なので、JavaScriptの命令も間接的に実行されるようにしています。",{"type":27,"tag":28,"props":728,"children":729},{},[730,731,736],{"type":32,"value":709},{"type":27,"tag":527,"props":732,"children":734},{"className":733},[],[735],{"type":32,"value":724},{"type":32,"value":737}," 関数については、絶対ジャンプではなく相対ジャンプにしています。スライドの挿入・削除をしてもそのまま動くからです。",{"type":27,"tag":28,"props":739,"children":740},{},[741,743,749,751,757],{"type":32,"value":742},"　そもそもxhear関数を呼び出す側では、単語しか引数として指定していません。移動先や言語は規定値のままなわけですから、『移動先の引数（5や6）を受け取る作りになっていなかったため』というのは、理由になりません。",{"type":27,"tag":527,"props":744,"children":746},{"className":745},[],[747],{"type":32,"value":748},"xgo(1)",{"type":32,"value":750},"や",{"type":27,"tag":527,"props":752,"children":754},{"className":753},[],[755],{"type":32,"value":756},"xgo(2)",{"type":32,"value":758},"の呼び出し方を根本的に間違えていたのです。",{"type":27,"tag":74,"props":760,"children":761},{},[],{"type":27,"tag":28,"props":763,"children":764},{},[765],{"type":32,"value":766},"　やはり、今のAIエージェントは、一般的なプログラムはOKでも特殊なプログラムは苦手なようです。……惜しい！！",{"type":27,"tag":28,"props":768,"children":769},{},[770],{"type":32,"value":771},"　しかし、AIの助けがあれば、アプリの改造がスピードアップしそうです。",{"type":27,"tag":74,"props":773,"children":774},{},[],{"type":27,"tag":138,"props":776,"children":778},{"id":777},"中学生に刺さる英単語ゲームに",[779],{"type":32,"value":777},{"type":27,"tag":145,"props":781,"children":783},{"className":782},[148],[784,785,794,796,799,801,804],{"type":32,"value":151},{"type":27,"tag":145,"props":786,"children":788},{"className":787},[155],[789,790,793],{"type":32,"value":158},{"type":27,"tag":87,"props":791,"children":792},{"src":161,"alt":162,"width":163},[],{"type":32,"value":158},{"type":32,"value":795},"\n中学生用の英単語チェックアプリを作ろうとしています。",{"type":27,"tag":74,"props":797,"children":798},{},[],{"type":32,"value":800},"\n普通の勉強だと敬遠されるのでゲーム感覚で楽しんでもらいたいのです。中学生の好きなゲームタイトルによく出てくる言葉をアプリタイトルに入れるとよいのではないかと思います。",{"type":27,"tag":74,"props":802,"children":803},{},[],{"type":27,"tag":28,"props":805,"children":806},{},[807,809,818,820],{"type":32,"value":808},"中学生が興味を持ちそうなアプリタイトルの案を5つ、",{"type":27,"tag":810,"props":811,"children":812},"em",{},[813],{"type":27,"tag":55,"props":814,"children":815},{},[816],{"type":32,"value":817},"その確率とともに生成",{"type":32,"value":819},"してください。",{"type":27,"tag":74,"props":821,"children":822},{},[],{"type":27,"tag":145,"props":824,"children":826},{"className":825},[192],[827,828,839,847,858,871,884,897,910,923,926],{"type":32,"value":151},{"type":27,"tag":145,"props":829,"children":831},{"className":830},[155],[832,833,838],{"type":32,"value":158},{"type":27,"tag":87,"props":834,"children":837},{"src":835,"alt":836,"width":163},"\u002Fimg\u002Fgenai.png","ChatGPT",[],{"type":32,"value":158},{"type":27,"tag":28,"props":840,"children":841},{},[842],{"type":27,"tag":55,"props":843,"children":844},{},[845],{"type":32,"value":846},"おすすめタイトル案｛確率つき｝",{"type":27,"tag":28,"props":848,"children":849},{},[850,852,855],{"type":32,"value":851},"以下は、中学生に人気のゲームタイトル傾向（マインクラフト、ポケモン、スプラトゥーン、フォートナイト、どうぶつの森など）を参考にした、英単語チェックアプリのネーミング案です。｛中学生に刺さる確率｝",{"type":27,"tag":74,"props":853,"children":854},{},[],{"type":27,"tag":74,"props":856,"children":857},{},[],{"type":27,"tag":28,"props":859,"children":860},{},[861,866,868],{"type":27,"tag":55,"props":862,"children":863},{},[864],{"type":32,"value":865},"Word Quest",{"type":32,"value":867},"（ワードクエスト）：RPG風。「クエスト」という冒険感が人気ゲームに多く登場。｛ 85% ｝",{"type":27,"tag":74,"props":869,"children":870},{},[],{"type":27,"tag":28,"props":872,"children":873},{},[874,879,881],{"type":27,"tag":55,"props":875,"children":876},{},[877],{"type":32,"value":878},"English Royale",{"type":32,"value":880},"（イングリッシュ・ロワイヤル）：……｛ 80% ｝",{"type":27,"tag":74,"props":882,"children":883},{},[],{"type":27,"tag":28,"props":885,"children":886},{},[887,892,894],{"type":27,"tag":55,"props":888,"children":889},{},[890],{"type":32,"value":891},"VocabCraft",{"type":32,"value":893},"（ボキャブラクラフト）：……｛ 90% ｝",{"type":27,"tag":74,"props":895,"children":896},{},[],{"type":27,"tag":28,"props":898,"children":899},{},[900,905,907],{"type":27,"tag":55,"props":901,"children":902},{},[903],{"type":32,"value":904},"Spellmon",{"type":32,"value":906},"（スペルモン）：……｛ 75% ｝",{"type":27,"tag":74,"props":908,"children":909},{},[],{"type":27,"tag":28,"props":911,"children":912},{},[913,918,920],{"type":27,"tag":55,"props":914,"children":915},{},[916],{"type":32,"value":917},"Word Splash",{"type":32,"value":919},"（ワードスプラッシュ）：……｛ 70% ｝",{"type":27,"tag":74,"props":921,"children":922},{},[],{"type":27,"tag":328,"props":924,"children":925},{},[],{"type":27,"tag":28,"props":927,"children":928},{},[929],{"type":32,"value":930},"👉 興味があれば、これらのタイトルに合わせたUI演出やゲームシステムのアイデアも提案できます。見てみますか。",{"type":27,"tag":145,"props":932,"children":934},{"className":933},[148],[935,936,945,947,950,952,955],{"type":32,"value":151},{"type":27,"tag":145,"props":937,"children":939},{"className":938},[155],[940,941,944],{"type":32,"value":158},{"type":27,"tag":87,"props":942,"children":943},{"src":161,"alt":162,"width":163},[],{"type":32,"value":158},{"type":32,"value":946},"\nありがとうございます。",{"type":27,"tag":74,"props":948,"children":949},{},[],{"type":32,"value":951},"\nプレーヤーである魔法使いが、次々と現れる魔物（日本語訳）に対して呪文（英単語）を発音し、スペルが合っていれば呪いを解除して人間にもどし、報酬（得点）をゲットするというゲームがよさそうです。",{"type":27,"tag":74,"props":953,"children":954},{},[],{"type":27,"tag":28,"props":956,"children":957},{},[958,960,965,967],{"type":32,"value":959},"spellには呪文という意味もあるので、「",{"type":27,"tag":55,"props":961,"children":962},{},[963],{"type":32,"value":964},"SPELL QUEST",{"type":32,"value":966},"（スペルクエスト）」というタイトルにします。",{"type":27,"tag":74,"props":968,"children":969},{},[],{"type":27,"tag":28,"props":971,"children":972},{},[973,975,980,982],{"type":32,"value":974},"　最近覚えたのが、「",{"type":27,"tag":55,"props":976,"children":977},{},[978],{"type":32,"value":979},"確率つき",{"type":32,"value":981},"」のアイディア出しです。これは簡単なのに効果的でおすすめです。　→ ",{"type":27,"tag":43,"props":983,"children":987},{"href":984,"rel":985},"https:\u002F\u002Fnazology.kusuguru.co.jp\u002Farchives\u002F187383",[986],"nofollow",[988],{"type":32,"value":989},"🔗スタンフォード大学の研究から「その確率も教えて」でAIが覚醒すると判明",{"type":27,"tag":74,"props":991,"children":992},{},[],{"type":27,"tag":138,"props":994,"children":996},{"id":995},"spell-quest-への改造開始",[997],{"type":32,"value":998},"SPELL QUEST への改造開始",{"type":27,"tag":28,"props":1000,"children":1001},{},[1002],{"type":32,"value":1003},"　何百語もの英単語＆日本語訳を読み込むとなると、HTML内に直書きして変数に代入するのは現実的ではありません。かといってバックエンドの知識が必要なデータベース構築もたいへんです。JSONファイルを読み込むのがよいでしょう。",{"type":27,"tag":145,"props":1005,"children":1007},{"className":1006},[148],[1008,1009,1018],{"type":32,"value":151},{"type":27,"tag":145,"props":1010,"children":1012},{"className":1011},[155],[1013,1014,1017],{"type":32,"value":158},{"type":27,"tag":87,"props":1015,"children":1016},{"src":161,"alt":162,"width":163},[],{"type":32,"value":158},{"type":32,"value":1019},"\n@C:\\nuxt●\\～～\\jisshu\\tango1.csv\nをもとにして、JavaScriptから読み込んで使うためのJSONファイルを作り、同じフォルダに保存してください。\n",{"type":27,"tag":28,"props":1021,"children":1022},{},[1023],{"type":27,"tag":527,"props":1024,"children":1026},{"className":1025},[],[1027],{"type":32,"value":1028},"[   {     \"en\": \"always\",     \"ja\": \"いつも\"   },   {     \"en\": \"breakfast\",     \"ja\": \"朝食\"   },       ：：：：：   {     \"en\": \"junior\",     \"ja\": \"年下の、下級の\"   } ]",{"type":27,"tag":28,"props":1030,"children":1031},{},[1032],{"type":32,"value":1033},"というJSONファイルが作られていましたが、ちょっと冗長で使いづらそうです。",{"type":27,"tag":28,"props":1035,"children":1036},{},[1037],{"type":32,"value":1038},"　やはり、ゴールから逆算してリクエストすべきでした。",{"type":27,"tag":145,"props":1040,"children":1042},{"className":1041},[148],[1043,1044,1053,1055,1058,1060,1063,1065,1068,1070,1073,1076],{"type":32,"value":151},{"type":27,"tag":145,"props":1045,"children":1047},{"className":1046},[155],[1048,1049,1052],{"type":32,"value":158},{"type":27,"tag":87,"props":1050,"children":1051},{"src":161,"alt":162,"width":163},[],{"type":32,"value":158},{"type":32,"value":1054},"\nfetch()でJSONを読み込んだあと、Object.entries()で\n[['always','いつも'],['breakfast','朝食'],…,['junior','年下の、下級の']]",{"type":27,"tag":74,"props":1056,"children":1057},{},[],{"type":32,"value":1059},"\nという二次元配列に変換して使う予定です。",{"type":27,"tag":74,"props":1061,"children":1062},{},[],{"type":32,"value":1064},"\nこのような処理をやりやすくするためのJSONファイルを作り、同じフォルダに保存してください。",{"type":27,"tag":74,"props":1066,"children":1067},{},[],{"type":32,"value":1069},"\nちなみに、英単語は同じものは二度と出てこないので、オブジェクトのキーに使えます。",{"type":27,"tag":74,"props":1071,"children":1072},{},[],{"type":27,"tag":74,"props":1074,"children":1075},{},[],{"type":32,"value":1077},"\nまた、このような処理をするためのJavaScriptコードのサンプルを示してください。\n",{"type":27,"tag":145,"props":1079,"children":1081},{"className":1080},[192],[1082,1083,1092,1094],{"type":32,"value":151},{"type":27,"tag":145,"props":1084,"children":1086},{"className":1085},[155],[1087,1088,1091],{"type":32,"value":158},{"type":27,"tag":87,"props":1089,"children":1090},{"src":202,"alt":203,"width":163},[],{"type":32,"value":158},{"type":32,"value":1093},"\n✦ 承知いたしました。ご要望の形式のJSONファイルを作成し、それを利用するJavaScriptのサンプルコードを提示します。\n",{"type":27,"tag":28,"props":1095,"children":1096},{},[1097,1099,1102,1104,1107],{"type":32,"value":1098},"英単語をキー、日本語訳を値とするオブジェクト形式のJSONファイルを作成し、",{"type":27,"tag":74,"props":1100,"children":1101},{},[],{"type":32,"value":1103},"\nC:\\nuxt●\\～～\\jisshu\\tango1.jsonとして保存します。",{"type":27,"tag":74,"props":1105,"children":1106},{},[],{"type":32,"value":1108},"\nこれにより、Object.entries() を使って効率的に二次元配列へ変換できます。",{"type":27,"tag":519,"props":1110,"children":1115},{"className":1111,"code":1113,"language":1114,"meta":8},[1112],"language-json.ps1","まず、JSONファイルを上書き保存します。\n│     1 {  \n│     2   \"always\": \"いつも\",  \n│     3   \"breakfast\": \"朝食\", \n            ：：：：：\n│    11   \"junior\": \"年下の、下級の\" \n│    12 } \n✦ 新しい形式で tango1.json を保存しました。\n\n  次に、このJSONファイルを読み込んで二次元配列に変換する\n  JavaScriptコードのサンプルを示します。\n\n  1 async function loadAndConvertWords() {\n  2   try {\n  3     \u002F\u002F 1. JSONファイルをfetchで読み込む\n  4     const response = await fetch('tango1.json');\n  5     if (!response.ok) {\n  6       throw new Error(`HTTP error! \n                          status: ${response.status}`);\n  7     }\n  8     const wordObject = await response.json();\n  9\n  10     \u002F\u002F 2. Object.entries()で二次元配列に変換\n  11     const wordPairs = Object.entries(wordObject);\n  12\n  13     \u002F\u002F 3. 結果をコンソールに出力して確認\n  14     console.log(wordPairs);\n  15\n  16     \u002F*\n  17     コンソールへの出力結果：\n  18     [\n  19       [\"always\", \"いつも\"],\n  20       [\"breakfast\", \"朝食\"],\n              ：：：：：\n  28       [\"junior\", \"年下の、下級の\"]\n  29     ]\n  30     *\u002F\n  31\n  32   } catch (error) {\n  33     console.error('データの読み込みまたは\n                          変換に失敗しました:', error);\n  34   }\n  35 }\n  36\n  37 \u002F\u002F 関数を実行\n  38 loadAndConvertWords();\n","json.ps1",[1116],{"type":27,"tag":527,"props":1117,"children":1118},{"__ignoreMap":8},[1119],{"type":32,"value":1113},{"type":27,"tag":28,"props":1121,"children":1122},{},[1123,1125,1131],{"type":32,"value":1124},"これをほとんどそのまま採用し、",{"type":27,"tag":527,"props":1126,"children":1128},{"className":1127},[],[1129],{"type":32,"value":1130},"xjson()",{"type":32,"value":1132}," 関数として組み込んだところ、期待通りに動きました。……感動！！",{"type":27,"tag":28,"props":1134,"children":1135},{},[1136,1138,1144],{"type":32,"value":1137},"　これで、英単語データをCSV形式で作れば、あとの作業（",{"type":27,"tag":527,"props":1139,"children":1141},{"className":1140},[],[1142],{"type":32,"value":1143},"CSV → JSON → 二次元配列",{"type":32,"value":1145},"）はAIに任せられます。",{"type":27,"tag":74,"props":1147,"children":1148},{},[],{"type":27,"tag":138,"props":1150,"children":1152},{"id":1151},"英単語データの作成もaiエージェントで",[1153],{"type":32,"value":1154},"英単語データの作成もAIエージェントで",{"type":27,"tag":28,"props":1156,"children":1157},{},[1158],{"type":32,"value":1159},"　そうなると、英単語データもAIで作れないかと考えてしまいます。",{"type":27,"tag":145,"props":1161,"children":1163},{"className":1162},[148],[1164,1165,1174,1176,1179,1181,1184,1186],{"type":32,"value":151},{"type":27,"tag":145,"props":1166,"children":1168},{"className":1167},[155],[1169,1170,1173],{"type":32,"value":158},{"type":27,"tag":87,"props":1171,"children":1172},{"src":161,"alt":162,"width":163},[],{"type":32,"value":158},{"type":32,"value":1175},"\n高校入試に挑戦する中学生がマスターすべき英単語を",{"type":27,"tag":74,"props":1177,"children":1178},{},[],{"type":32,"value":1180},"\ntango1.csv\nと同じ形式で作成してください。",{"type":27,"tag":74,"props":1182,"children":1183},{},[],{"type":32,"value":1185},"\nただし、以下のものは除外してください。\n",{"type":27,"tag":35,"props":1187,"children":1188},{},[1189,1194,1199],{"type":27,"tag":39,"props":1190,"children":1191},{},[1192],{"type":32,"value":1193},"冠詞、代名詞",{"type":27,"tag":39,"props":1195,"children":1196},{},[1197],{"type":32,"value":1198},"外来語として定着しているもの、固有名詞",{"type":27,"tag":39,"props":1200,"children":1201},{},[1202],{"type":32,"value":1203},"略語、スペースやハイフンが入ったもの（熟語）",{"type":27,"tag":28,"props":1205,"children":1206},{},[1207],{"type":32,"value":1208},"　指示が雑すぎたのか、動詞と形容詞だけで50語作ってくれました。初級・中級・上級のクエストに使えるように指示を追加します。",{"type":27,"tag":145,"props":1210,"children":1212},{"className":1211},[148],[1213,1214,1223,1225,1228,1230,1233,1235,1238],{"type":32,"value":151},{"type":27,"tag":145,"props":1215,"children":1217},{"className":1216},[155],[1218,1219,1222],{"type":32,"value":158},{"type":27,"tag":87,"props":1220,"children":1221},{"src":161,"alt":162,"width":163},[],{"type":32,"value":158},{"type":32,"value":1224},"\n同じような感じで日本の中学生がマスターすべき英単語を",{"type":27,"tag":74,"props":1226,"children":1227},{},[],{"type":32,"value":1229},"\n初級：words1.csv、中級：words2.csv、上級：words3.csv",{"type":27,"tag":74,"props":1231,"children":1232},{},[],{"type":32,"value":1234},"\nそれぞれ100語ずつ重なりなく作成してください。",{"type":27,"tag":74,"props":1236,"children":1237},{},[],{"type":32,"value":1239},"\n品詞については、動詞と形容詞だけでなく、固有名詞以外の名詞、副詞も含めてお願いします。\n",{"type":27,"tag":28,"props":1241,"children":1242},{},[1243],{"type":32,"value":1244},"　「100語ずつ」も勝手に「100語以上」と解釈したのか、級が上がるにつれ雪だるま式に増えています。",{"type":27,"tag":28,"props":1246,"children":1247},{},[1248],{"type":32,"value":1249},"　プロンプトをいじっても限界があると感じたので、作られたCSVファイルに対して操作を加えてもらうことにします。",{"type":27,"tag":145,"props":1251,"children":1253},{"className":1252},[148],[1254,1255,1264,1266,1269,1271,1274,1276,1279,1281,1284],{"type":32,"value":151},{"type":27,"tag":145,"props":1256,"children":1258},{"className":1257},[155],[1259,1260,1263],{"type":32,"value":158},{"type":27,"tag":87,"props":1261,"children":1262},{"src":161,"alt":162,"width":163},[],{"type":32,"value":158},{"type":32,"value":1265},"\nリストアップをありがとうございました。",{"type":27,"tag":74,"props":1267,"children":1268},{},[],{"type":32,"value":1270},"\n上級：words3.csv",{"type":27,"tag":74,"props":1272,"children":1273},{},[],{"type":32,"value":1275},"\nに、初級と中級のものが重なって含まれているので、それらを削除して真に「上級」のリストにし",{"type":27,"tag":74,"props":1277,"children":1278},{},[],{"type":32,"value":1280},"\n@C:\\nuxt●\\～～\\jisshu\\words3.csv",{"type":27,"tag":74,"props":1282,"children":1283},{},[],{"type":32,"value":1285},"\nに上書き保存してください。\n",{"type":27,"tag":28,"props":1287,"children":1288},{},[1289],{"type":32,"value":1290},"、、、どうするのか見ていたら、その場で文字列操作用のPythonプログラムを組んで実行していました。一応、できたようです。",{"type":27,"tag":74,"props":1292,"children":1293},{},[],{"type":27,"tag":138,"props":1295,"children":1297},{"id":1296},"英単語問題作りはけっこうたいへん",[1298],{"type":32,"value":1296},{"type":27,"tag":28,"props":1300,"children":1301},{},[1302],{"type":32,"value":1303},"　英単語と日本語訳が一対一対応していれば簡単なのですが、「多義語」「同義語」「同音異義語」の関係で非常にややこしくなっています。",{"type":27,"tag":28,"props":1305,"children":1306},{},[1307],{"type":32,"value":1308},"　特に、英語は同じ言葉の繰り返しを嫌い、言い換えのための「同義語」をたくさん持っているようです。",{"type":27,"tag":28,"props":1310,"children":1311},{},[1312,1314],{"type":32,"value":1313},"　また、バイ（by,bye,buy）のような「同音異義語」を音声認識させると、特定の一つしか認識されない（この場合はbye）ためゲームが成立しなくなります。　→ ",{"type":27,"tag":43,"props":1315,"children":1318},{"href":1316,"rel":1317},"https:\u002F\u002Fchugakueigo.itgakko.com\u002Fmatome\u002Fdouonigigo.html",[986],[1319],{"type":32,"value":1320},"🔗高校入試対策で覚えておきたい中学英語の同音異義語",{"type":27,"tag":28,"props":1322,"children":1323},{},[1324],{"type":32,"value":1325},"　文脈に依存せず、日本語訳を見て一つの英単語が思い浮かび、発音が認識される、、、そんな「英単語＆日本語訳（複数可）」のペアにしぼりたいものです。",{"type":27,"tag":28,"props":1327,"children":1328},{},[1329],{"type":32,"value":1330},"　もうこうなると今のAIには荷が重いので、手作業となります。CSVファイルはエクセルで読み書きできるので、ソート（並べ替え）を駆使し、Google翻訳で確認しながら、なんとか100語ずつにしぼり込みました。",{"type":27,"tag":145,"props":1332,"children":1334},{"className":1333},[148],[1335,1336,1345,1347,1350,1352,1355,1357,1360],{"type":32,"value":151},{"type":27,"tag":145,"props":1337,"children":1339},{"className":1338},[155],[1340,1341,1344],{"type":32,"value":158},{"type":27,"tag":87,"props":1342,"children":1343},{"src":161,"alt":162,"width":163},[],{"type":32,"value":158},{"type":32,"value":1346},"\nwords1.csv、words2.csv、words3.csvから100語ずつ抜粋して計300語のwordsq.csvを作りました。",{"type":27,"tag":74,"props":1348,"children":1349},{},[],{"type":32,"value":1351},"\nこれをもとにtango1.jsonと同じ形式のJSONファイルを作成し、",{"type":27,"tag":74,"props":1353,"children":1354},{},[],{"type":32,"value":1356},"\n@C:\\nuxt●\\～～\\jisshu\\wordsq.json",{"type":27,"tag":74,"props":1358,"children":1359},{},[],{"type":32,"value":1361},"\nとして保存してください。\n",{"type":27,"tag":28,"props":1363,"children":1364},{},[1365,1367,1373],{"type":32,"value":1366},"　クエストの級を選択したら、100語の中からランダムに10語を選び、アルファベット順に並べて出題する関数を ",{"type":27,"tag":527,"props":1368,"children":1370},{"className":1369},[],[1371],{"type":32,"value":1372},"xquest()",{"type":32,"value":1374}," として追加しました。",{"type":27,"tag":28,"props":1376,"children":1377},{},[1378,1380,1386],{"type":32,"value":1379},"　また、",{"type":27,"tag":527,"props":1381,"children":1383},{"className":1382},[],[1384],{"type":32,"value":1385},"xhear()",{"type":32,"value":1387}," 関数にも次のような改良を加えました。",{"type":27,"tag":35,"props":1389,"children":1390},{},[1391,1404],{"type":27,"tag":39,"props":1392,"children":1393},{},[1394,1396,1402],{"type":32,"value":1395},"発音した通りに認識されなかったら",{"type":27,"tag":527,"props":1397,"children":1399},{"className":1398},[],[1400],{"type":32,"value":1401},"[キャンセル]",{"type":32,"value":1403},"し、すぐに発音をやり直す。",{"type":27,"tag":39,"props":1405,"children":1406},{},[1407],{"type":32,"value":1408},"スペルが正しくないときの判定結果に、「どれくらい惜しいか」という類似度（%）を表示。",{"type":27,"tag":28,"props":1410,"children":1411},{},[1412],{"type":32,"value":1413},"　アルファベット順であることと類似度をヒントに「同義語」「類義語」の中から正解にたどりつきやすくなるでしょう。",{"type":27,"tag":28,"props":1415,"children":1416},{},[1417,1419,1425,1427],{"type":32,"value":1418},"　ちなみに、　類似度の計算手法は何種類もあり、自分で（AIで）JavaScriptで組んでもよかったのですが、公開されているライブラリ ",{"type":27,"tag":527,"props":1420,"children":1422},{"className":1421},[],[1423],{"type":32,"value":1424},"string-similarity",{"type":32,"value":1426}," を使うことにしました。 　→ ",{"type":27,"tag":43,"props":1428,"children":1431},{"href":1429,"rel":1430},"https:\u002F\u002Fqiita.com\u002Fkenny-m\u002Fitems\u002F7131669cd5f6f757dffc",[986],[1432],{"type":32,"value":1433},"🔗【JavaScript】文字列検索の手法",{"type":27,"tag":28,"props":1435,"children":1436},{},[1437,1439],{"type":32,"value":1438},"　プログラミングを料理に例えると、「めんつゆ」「顆粒だし」を使ったら手抜き料理になるからすべて手作りで……と考えるようなもので、現実的ではありません。　→ ",{"type":27,"tag":43,"props":1440,"children":1443},{"href":1441,"rel":1442},"https:\u002F\u002Fmagmix.jp\u002Fpost\u002F325864",[986],[1444],{"type":32,"value":1445},"🔗リアルで「じゃあ、あんたが作ってみろよ」と思った瞬間は？",{"type":27,"tag":87,"props":1447,"children":1452},{"src":1448,"alt":1449,"className":1450},"\u002Fimg\u002Fjatsuku.jpg","じゃあ、あんたが作ってみろよ",[1451],"imghr",[],{"type":27,"tag":74,"props":1454,"children":1455},{},[],{"type":27,"tag":138,"props":1457,"children":1459},{"id":1458},"ゲームっぽいデザインに",[1460],{"type":32,"value":1458},{"type":27,"tag":28,"props":1462,"children":1463},{},[1464],{"type":32,"value":1465},"　ゲームの雰囲気を盛り上げるといえば、美しいグラフィックスやサウンドです。学習用の場合、グラフィックスは低刺激に、サウンドはオフにする必要があります。",{"type":27,"tag":28,"props":1467,"children":1468},{},[1469,1470,1476,1478,1485],{"type":32,"value":709},{"type":27,"tag":43,"props":1471,"children":1473},{"href":1472},"\u002Farticles\u002Ftechnolojiya-10#mapcustom",[1474],{"type":32,"value":1475},"🔗(万博)つじさんマップを自分用にカスタマイズ",{"type":32,"value":1477}," で味をしめた",{"type":27,"tag":43,"props":1479,"children":1482},{"href":1480,"rel":1481},"https:\u002F\u002Flets-emoji.com\u002F",[986],[1483],{"type":32,"value":1484},"🔗絵文字",{"type":32,"value":1486}," を活用することにしました。",{"type":27,"tag":145,"props":1488,"children":1490},{"className":1489},[148],[1491,1492,1501],{"type":32,"value":151},{"type":27,"tag":145,"props":1493,"children":1495},{"className":1494},[155],[1496,1497,1500],{"type":32,"value":158},{"type":27,"tag":87,"props":1498,"children":1499},{"src":161,"alt":162,"width":163},[],{"type":32,"value":158},{"type":27,"tag":28,"props":1502,"children":1503},{},[1504,1506,1510,1512],{"type":32,"value":1505},"「",{"type":27,"tag":55,"props":1507,"children":1508},{},[1509],{"type":32,"value":964},{"type":32,"value":1511},"（スペルクエスト）」に使えそうな絵文字を探しています。次のもののほかによさそうなもの（魔物・人間・魔法・報酬）があれば、教えてください……",{"type":27,"tag":74,"props":1513,"children":1514},{},[],{"type":27,"tag":28,"props":1516,"children":1517},{},[1518],{"type":32,"value":1519},"　報酬は、銅🥉・銀🥈・金🥇のメダルとし、",{"type":27,"tag":28,"props":1521,"children":1522},{},[1523,1525,1531],{"type":32,"value":1524},"魔物 → 人間 の変化は、",{"type":27,"tag":527,"props":1526,"children":1528},{"className":1527},[],[1529],{"type":32,"value":1530},"xkk=[['🐛','👶'],['🪰','👦'],['🕷️','👧'],……",{"type":32,"value":1532},"　という二次元配列としてクエスト分そろえました。画像ファイルでやるよりはるかに楽です。",{"type":27,"tag":28,"props":1534,"children":1535},{},[1536],{"type":32,"value":1537},"　オープニング画面も絵文字を並べて作りましたが、言いたいことは伝えられそうです。",{"type":27,"tag":28,"props":1539,"children":1540},{},[1541],{"type":32,"value":1542},"　あとは、「動き」がほしいところです。",{"type":27,"tag":28,"props":1544,"children":1545},{},[1546],{"type":32,"value":1547},"　アニメGIF でもよいのですが、調整のしやすさを考えて、",{"type":27,"tag":35,"props":1549,"children":1550},{},[1551,1570],{"type":27,"tag":39,"props":1552,"children":1553},{},[1554,1560,1562,1568],{"type":27,"tag":527,"props":1555,"children":1557},{"className":1556},[],[1558],{"type":32,"value":1559},"anime.js",{"type":32,"value":1561}," を呼び出す ",{"type":27,"tag":527,"props":1563,"children":1565},{"className":1564},[],[1566],{"type":32,"value":1567},"xanim(obj,ループ回数)",{"type":32,"value":1569}," 関数",{"type":27,"tag":39,"props":1571,"children":1572},{},[1573],{"type":32,"value":1574},"SVGアニメーション（SMIL）",{"type":27,"tag":28,"props":1576,"children":1577},{},[1578],{"type":32,"value":1579},"の二つを使いました。",{"type":27,"tag":28,"props":1581,"children":1582},{},[1583,1584,1589,1591,1597],{"type":32,"value":709},{"type":27,"tag":527,"props":1585,"children":1587},{"className":1586},[],[1588],{"type":32,"value":1559},{"type":32,"value":1590}," の ",{"type":27,"tag":527,"props":1592,"children":1594},{"className":1593},[],[1595],{"type":32,"value":1596},"loop",{"type":32,"value":1598}," がうまく機能しないので、ループ回数を受け取るようにしました。",{"type":27,"tag":28,"props":1600,"children":1601},{},[1602],{"type":32,"value":1603},"　SVGは、HTML内に埋め込めるので便利です。中学生曰く、「魔法が放射されている」と見えるようです。",{"type":27,"tag":1605,"props":1606,"children":1610},"svg",{"xmlns":1607,"viewBox":1608,"preserveAspectRatio":1609},"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg","-11 0 90 7","none",[1611],{"type":27,"tag":1612,"props":1613,"children":1617},"path",{"fill":1614,"id":1615,"d":1616},"#ffff00","wave1","M100,10H0V9C49.83,9,50,2,100,2v8Z",[1618],{"type":27,"tag":1619,"props":1620,"children":1626},"animate",{"attributeType":1621,"attributeName":1622,"dur":1623,"repeatCount":1624,"values":1625},"XML","d","1s","indefinite","\n M100,10H0V9C49.83,9,50,2,100,2v8Z;\n M100,10H0V5.5C50,10,50,10,100,5.5V10Z;\n M100,10H0V2C49.83,2,50,9,100,9v1Z;\n M100,10H0V5.58C50.08,0,50.08,0,100,5.5V10Z;\n M100,10H0V9C49.83,9,50,2,100,2v8Z\n ",[],{"type":27,"tag":28,"props":1628,"children":1629},{},[1630,1632,1637,1639],{"type":32,"value":1631},"　ちなみに、プログラムというのは書いて終わりではありません。「推敲・校正」にあたる ",{"type":27,"tag":55,"props":1633,"children":1634},{},[1635],{"type":32,"value":1636},"デバッグ",{"type":32,"value":1638}," が延々と続くのです。",{"type":27,"tag":74,"props":1640,"children":1642},{"id":1641},"spellquest",[],{"type":27,"tag":35,"props":1644,"children":1645},{},[1646],{"type":27,"tag":39,"props":1647,"children":1648},{},[1649],{"type":27,"tag":43,"props":1650,"children":1653},{"href":1651,"rel":1652},"https:\u002F\u002Fics.media\u002Fentry\u002F190517\u002F",[986],[1654],{"type":32,"value":1655},"🔗ChromeのデベロッパーツールでJavaScriptをデバッグする方法",{"type":27,"tag":28,"props":1657,"children":1658},{},[1659],{"type":32,"value":1660},"にいつも助けられています。",{"type":27,"tag":28,"props":1662,"children":1663},{},[1664,1669],{"type":27,"tag":87,"props":1665,"children":1668},{"src":1666,"alt":1667,"width":91},"\u002Fimg\u002Fspellquestdev1.jpg","スペルクエスト開発中",[],{"type":27,"tag":74,"props":1670,"children":1671},{},[],{"type":27,"tag":74,"props":1673,"children":1674},{},[],{"type":27,"tag":138,"props":1676,"children":1678},{"id":1677},"まとめaiエージェントでちょっとだけハッカーになれアプリを改造できた",[1679],{"type":32,"value":1680},"（まとめ）AIエージェントで「ちょっとだけハッカー」になれ、アプリを改造できた",{"type":27,"tag":35,"props":1682,"children":1683},{},[1684],{"type":27,"tag":39,"props":1685,"children":1686},{},[1687,1689],{"type":32,"value":1688},"→ ",{"type":27,"tag":43,"props":1690,"children":1693},{"href":1691,"rel":1692},"https:\u002F\u002Fkyodx.com\u002Fjisshu\u002Fspellquest.html",[986],[1694,1696,1700],{"type":32,"value":1695},"🔗「英単語ゲーム ",{"type":27,"tag":55,"props":1697,"children":1698},{},[1699],{"type":32,"value":964},{"type":32,"value":1701},"」",{"type":27,"tag":87,"props":1703,"children":1706},{"src":1704,"alt":1705,"width":91},"\u002Fimg\u002Fspellquest3.jpg","スペルクエストプレイ中",[],{"type":27,"tag":28,"props":1708,"children":1709},{},[1710,1712,1718,1720,1726,1728,1734],{"type":32,"value":1711},"※ 内蔵マイクだと音声認識が弱いときは、",{"type":27,"tag":43,"props":1713,"children":1715},{"href":1714},"#dungzduz",[1716],{"type":32,"value":1717},"🔗小型USBマイク",{"type":32,"value":1719}," ← ",{"type":27,"tag":43,"props":1721,"children":1723},{"href":1722},"#usbcadapter",[1724],{"type":32,"value":1725},"🔗USB-Cアダプター",{"type":32,"value":1727},"　← ",{"type":27,"tag":43,"props":1729,"children":1731},{"href":1730},"#lpoiejun",[1732],{"type":32,"value":1733},"🔗USB-C延長ケーブル",{"type":32,"value":1735}," ← タブレット のように接続",{"type":27,"tag":74,"props":1737,"children":1738},{},[],{"type":27,"tag":28,"props":1740,"children":1741},{},[1742,1744],{"type":32,"value":1743},"　「英単語の学習」については、さまざまな意見があるようです。　→ ",{"type":27,"tag":43,"props":1745,"children":1748},{"href":1746,"rel":1747},"https:\u002F\u002Fwww.asahi.com\u002Farticles\u002FASTC74J0JTC7OXIE002M.html#:~:text=%E5%8D%98%E8%AA%9E%E5%AD%A6%E7%BF%92%E3%82%92%E5%85%88%E8%A1%8C%E3%81%97%E3%81%9F,%E5%8F%AF%E8%83%BD%E6%80%A7%E3%81%8C%E3%81%82%E3%82%8B%E3%81%A8%E3%81%84%E3%81%86%E3%80%82",[986],[1749],{"type":32,"value":1750},"🔗単語か会話か、英語学習どっちから？　富山大教授ら「効果に違い」",{"type":27,"tag":28,"props":1752,"children":1753},{},[1754],{"type":32,"value":1755},"　「このアプリはやさしすぎる」と思われる方も多いでしょう。しかし、ハダノが中学生と接してきた経験からすると、英語が苦手な生徒は高校受験直前であっても「初級クエスト」さえクリアできません。",{"type":27,"tag":28,"props":1757,"children":1758},{},[1759,1760,1767],{"type":32,"value":709},{"type":27,"tag":43,"props":1761,"children":1764},{"href":1762,"rel":1763},"https:\u002F\u002Fwww.uta-net.com\u002Fsong\u002F231967\u002F",[986],[1765],{"type":32,"value":1766},"🔗セカオワのRAIN",{"type":32,"value":1768}," は歌えるのに、「雨」の英単語が出てきません。「雨の日に着るのは、何コートかな？」と聞いてやっと出てきます。",{"type":27,"tag":28,"props":1770,"children":1771},{},[1772,1773,1780],{"type":32,"value":709},{"type":27,"tag":43,"props":1774,"children":1777},{"href":1775,"rel":1776},"https:\u002F\u002Fwww.uta-net.com\u002Fsong\u002F9951\u002F",[986],[1778],{"type":32,"value":1779},"🔗めざせポケモンマスター",{"type":32,"value":1781}," は歌えるのに、「町」の英単語が出てきません。「シティじゃない方だよ」と言ってもなかなか出ません。",{"type":27,"tag":28,"props":1783,"children":1784},{},[1785],{"type":32,"value":1786},"　生活の中に英語が浸透し、アニメやゲームの中でもたくさん使われているのに、まったく結びついていない生徒がいるのが実態です。「詰め込み教育はよくない」などという前に基礎基本について再考すべきかと思います。",{"type":27,"tag":87,"props":1788,"children":1793},{"src":1789,"alt":1790,"className":1791},"\u002Fimg\u002Ftangojhs.jpg","アニメやゲームなどでたくさんの英単語に囲まれている中学生たち",[1792],"imghc",[],{"type":27,"tag":28,"props":1795,"children":1796},{},[1797,1799],{"type":32,"value":1798},"　ハダノ自身は、小学校高学年のときにローマ字習得に苦労しました。当時の教科書が、「文の中で理解させる」方法をとっていたためです。あるとき、五十音表を目にして法則に気づいたら、簡単に読み書きできるようになりました。高校時代も英単語を語源に分解して覚えるようにしたら、たくさん覚えられました。　→ ",{"type":27,"tag":43,"props":1800,"children":1803},{"href":1801,"rel":1802},"https:\u002F\u002Fisseisuzuki.org\u002Fprejudice\u002F",[986],[1804],{"type":32,"value":1805},"🔗prejudiceの意味をわかりやすく説明　一夜漬け英単語記憶術　語源",{"type":27,"tag":28,"props":1807,"children":1808},{},[1809],{"type":32,"value":1810},"　学習者のレベルや学び方に対応した教育でありたいものです。そういう意味では、学習アプリの手作りも有効な手段と言えるでしょう。",{"type":27,"tag":74,"props":1812,"children":1813},{},[],{"type":27,"tag":28,"props":1815,"children":1816},{},[1817],{"type":32,"value":1818},"　「AIエージェントを使ったプログラミング」についても、さまざまな意見があります。",{"type":27,"tag":35,"props":1820,"children":1821},{},[1822,1832,1842],{"type":27,"tag":39,"props":1823,"children":1824},{},[1825],{"type":27,"tag":43,"props":1826,"children":1829},{"href":1827,"rel":1828},"https:\u002F\u002Fqiita.com\u002FmonsoonTropicalBird\u002Fitems\u002F1d5a6257808ff7871bf0",[986],[1830],{"type":32,"value":1831},"🔗AIがプログラマを滅ぼすというのは、幻想やったかもしれん",{"type":27,"tag":39,"props":1833,"children":1834},{},[1835],{"type":27,"tag":43,"props":1836,"children":1839},{"href":1837,"rel":1838},"https:\u002F\u002Fzenn.dev\u002Fsatto_workspace\u002Farticles\u002Fa12faf6131ac4e",[986],[1840],{"type":32,"value":1841},"🔗わいの生成AIがカスコードばっか出してくるんやが",{"type":27,"tag":39,"props":1843,"children":1844},{},[1845,1852],{"type":27,"tag":43,"props":1846,"children":1849},{"href":1847,"rel":1848},"https:\u002F\u002Fatmarkit.itmedia.co.jp\u002Fait\u002Farticles\u002F2510\u002F20\u002Fnews030.html",[986],[1850],{"type":32,"value":1851},"🔗世界の開発者に聞いた「AIに任せられるタスク、任せられないタスク」",{"type":32,"value":1853},"\n、、、要するに、「AIに丸投げはダメ」ということです。",{"type":27,"tag":28,"props":1855,"children":1856},{},[1857,1859,1866],{"type":32,"value":1858},"　さしずめ、Eカプセル を飲んで、",{"type":27,"tag":43,"props":1860,"children":1863},{"href":1861,"rel":1862},"https:\u002F\u002Fwww.tv-asahi.co.jp\u002Fchottodake_esper\u002F",[986],[1864],{"type":32,"value":1865},"🔗「ちょっとだけエスパー」",{"type":32,"value":1867}," になれるようなものです。",{"type":27,"tag":87,"props":1869,"children":1874},{"src":1870,"alt":1871,"className":1872},"\u002Fimg\u002Fbitesper.jpg","ちょっとだけエスパー",[1873],"imghl",[],{"type":27,"tag":28,"props":1876,"children":1877},{},[1878],{"type":32,"value":1879},"　AIエージェント を使って、「ちょっとだけハッカー」になれますが、学習は欠かせません。AIが進化してゆき、",{"type":27,"tag":35,"props":1881,"children":1882},{},[1883],{"type":27,"tag":39,"props":1884,"children":1885},{},[1886],{"type":27,"tag":43,"props":1887,"children":1890},{"href":1888,"rel":1889},"https:\u002F\u002Fnote.com\u002Fihayato\u002Fn\u002Fn7e3cb271f96c",[986],[1891],{"type":32,"value":1892},"🔗【業務命令】今すぐ「Antigravity」をインストールして、バイブコーディングを始めよ！",{"type":27,"tag":28,"props":1894,"children":1895},{},[1896],{"type":32,"value":1897},"　という風に開発スタイルは変わっていくでしょうが、プログラミング知識が完全に不要になることはないでしょう。",{"type":27,"tag":28,"props":1899,"children":1900},{},[1901,1903,1908,1910,1916,1918,1924,1926],{"type":32,"value":1902},"　そもそも、今回の ",{"type":27,"tag":527,"props":1904,"children":1906},{"className":1905},[],[1907],{"type":32,"value":1130},{"type":32,"value":1909}," 関数の『",{"type":27,"tag":527,"props":1911,"children":1913},{"className":1912},[],[1914],{"type":32,"value":1915},"fetch()",{"type":32,"value":1917},"でJSONを読み込んだあと、",{"type":27,"tag":527,"props":1919,"children":1921},{"className":1920},[],[1922],{"type":32,"value":1923},"Object.entries()",{"type":32,"value":1925},"で二次元配列に変換してください』などは、書籍で学んだからこそ出せた指示なのです。　→ ",{"type":27,"tag":43,"props":1927,"children":1929},{"href":1928},"\u002Farticles\u002Fsocsaga-1#js278",[1930],{"type":32,"value":1931},"🔗JavaScriptコードレシピ集 スグに使えるテクニック278",{"type":27,"tag":87,"props":1933,"children":1936},{"src":1934,"alt":9,"className":1935},"\u002Fimg\u002Fbithacker.jpg",[1451],[],{"type":27,"tag":74,"props":1938,"children":1939},{},[],{"type":27,"tag":28,"props":1941,"children":1942},{},[1943],{"type":32,"value":1944},"　また、今回の件で「分断」についても考えさせられました。",{"type":27,"tag":35,"props":1946,"children":1947},{},[1948],{"type":27,"tag":39,"props":1949,"children":1950},{},[1951],{"type":27,"tag":43,"props":1952,"children":1955},{"href":1953,"rel":1954},"https:\u002F\u002Fplay.rakuten.co.jp\u002Farticle\u002F1300",[986],[1956],{"type":32,"value":1957},"🔗話題作「じゃあ、あんたが作ってみろよ」から得た気づき",{"type":27,"tag":28,"props":1959,"children":1960},{},[1961],{"type":32,"value":1962},"で述べられているように、何かを生み出す「作り手」の苦悩と、それを安易に批判する「受け手」の無責任さ……これは、さまざまな分野で見られます。",{"type":27,"tag":28,"props":1964,"children":1965},{},[1966],{"type":32,"value":1967},"　総じて日本では、「現場で手を動かす人」が軽んじられているように感じます。",{"type":27,"tag":35,"props":1969,"children":1970},{},[1971],{"type":27,"tag":39,"props":1972,"children":1973},{},[1974],{"type":27,"tag":43,"props":1975,"children":1978},{"href":1976,"rel":1977},"https:\u002F\u002Fwww.karasawanouki.co.jp\u002Fblog\u002Fkk20251105\u002F",[986],[1979],{"type":32,"value":1980},"🔗アメリカ、ブルーカラービリオネアの時代に。日本企業も大卒者よりも工業高校卒に熱い視線！AI時代に選ぶべき職業とは？",{"type":27,"tag":28,"props":1982,"children":1983},{},[1984],{"type":32,"value":1985},"を読むと、なるほどと思います。しかし、日本独特の雇用スタイル（新卒一括採用・年功序列・配置転換・終身雇用・退職金）が変わらなければ、専門的スキル人材は非正規・下請けで低待遇のままでしょう。熊対策一つ見ても、長期的視点での人材育成ができていないのが日本です。",{"type":27,"tag":28,"props":1987,"children":1988},{},[1989,1991],{"type":32,"value":1990},"　「人事・予算をにぎっている既得権益層が、現場に無理難題を押し付ける」構図を変えるには、",{"type":27,"tag":74,"props":1992,"children":1993},{},[],{"type":27,"tag":145,"props":1995,"children":1997},{"style":1996},"text-align: center; font-size: larger;",[1998],{"type":27,"tag":28,"props":1999,"children":2000},{},[2001,2002,2006],{"type":32,"value":1505},{"type":27,"tag":55,"props":2003,"children":2004},{},[2005],{"type":32,"value":1449},{"type":32,"value":1701},{"type":27,"tag":87,"props":2008,"children":2011},{"src":2009,"alt":1449,"className":2010},"\u002Fimg\u002Fmakeityourself.jpg",[1792],[],{"type":27,"tag":35,"props":2013,"children":2014},{},[2015],{"type":27,"tag":39,"props":2016,"children":2017},{},[2018],{"type":27,"tag":43,"props":2019,"children":2022},{"href":2020,"rel":2021},"https:\u002F\u002Fbiz.kddi.com\u002Fcontent\u002Fglossary\u002Fh\u002Fhacker\u002F",[986],[2023],{"type":32,"value":2024},"🔗ハッカーとは？意味・用語説明",{"type":27,"tag":28,"props":2026,"children":2027},{},[2028],{"type":32,"value":2029},"によれば、",{"type":27,"tag":28,"props":2031,"children":2032},{},[2033],{"type":27,"tag":527,"props":2034,"children":2036},{"className":2035},[],[2037],{"type":32,"value":2038},"ハッカーとは、コンピューターシステムやネットワークを探索し、操作する技術者のことを指します。ハッカーは、通常、高度なコンピューティングスキルを持ち、システムの動作を理解し、それを操作する能力を持っています。",{"type":27,"tag":28,"props":2040,"children":2041},{},[2042],{"type":32,"value":2043},"、、、ということですが、正しく理解されていません。",{"type":27,"tag":28,"props":2045,"children":2046},{},[2047],{"type":32,"value":2048},"　「天才ハッカー」を別にすると、「ハッカー＝悪人」と見なされています（本当はクラッカー＝破壊者）。",{"type":27,"tag":28,"props":2050,"children":2051},{},[2052,2054],{"type":32,"value":2053},"　発展形として「ライフハック（日常生活や仕事の効率化を図る工夫）」も広く使われるようになってきたのに残念です。 → ",{"type":27,"tag":43,"props":2055,"children":2057},{"href":2056},"#mindhacks",[2058],{"type":32,"value":2059},"🔗マインドハックス勉強法",{"type":27,"tag":28,"props":2061,"children":2062},{},[2063],{"type":32,"value":2064},"　コンピューターシステムに限らず、ハッキング（しくみを知って工夫すること）は、仕事や生活の質を向上させるのに役立ちます。",{"type":27,"tag":74,"props":2066,"children":2067},{},[],{"type":27,"tag":28,"props":2069,"children":2070},{},[2071],{"type":32,"value":2072},"　AIエージェントがプログラミングのハードルを下げ、システム技術者と利用者との「分断」を解消してゆくことを期待しつつ、",{"type":27,"tag":145,"props":2074,"children":2075},{"style":1996},[2076],{"type":27,"tag":28,"props":2077,"children":2078},{},[2079,2080,2084],{"type":32,"value":1505},{"type":27,"tag":55,"props":2081,"children":2082},{},[2083],{"type":32,"value":9},{"type":32,"value":1701},{"type":27,"tag":28,"props":2086,"children":2087},{},[2088],{"type":32,"value":2089},"になってみようと思います。",{"type":27,"tag":28,"props":2091,"children":2092},{},[2093,2096],{"type":27,"tag":87,"props":2094,"children":2095},{"src":1934,"alt":9,"width":91},[],{"type":27,"tag":74,"props":2097,"children":2098},{},[],{"type":27,"tag":74,"props":2100,"children":2102},{"id":2101},"dungzduz",[],{"type":27,"tag":145,"props":2104,"children":2107},{"className":2105},[2106],"kattene",[2108,2110,2126,2127],{"type":32,"value":2109},"\n    ",{"type":27,"tag":145,"props":2111,"children":2114},{"className":2112},[2113],"kattene__imgpart",[2115],{"type":27,"tag":43,"props":2116,"children":2121},{"target":2117,"rel":2118,"href":2120},"_blank",[2119],"noopener","https:\u002F\u002Fhb.afl.rakuten.co.jp\u002Fichiba\u002F4e6e3273.b9466c14.4e6e3274.9cb62d84\u002F_RTLink57026?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fnovolstore%2Fcfki6nxphbvaqxw74ucpw7rolq%2F&link_type=hybrid_url&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJoeWJyaWRfdXJsIiwic2l6ZSI6IjI0MHgyNDAiLCJuYW0iOjEsIm5hbXAiOiJyaWdodCIsImNvbSI6MSwiY29tcCI6ImRvd24iLCJwcmljZSI6MSwiYm9yIjoxLCJjb2wiOjEsImJidG4iOjEsInByb2QiOjAsImFtcCI6ZmFsc2V9",[2122],{"type":27,"tag":87,"props":2123,"children":2125},{"src":2124},"https:\u002F\u002Fthumbnail.image.rakuten.co.jp\u002F@0_mall\u002Fnovolstore\u002Fcabinet\u002F11933359\u002F28295605_0.jpg?_ex=240x240",[],{"type":32,"value":2109},{"type":27,"tag":145,"props":2128,"children":2131},{"className":2129},[2130],"kattene__infopart",[2132,2134,2145,2146,2166,2167,2215],{"type":32,"value":2133},"\n      ",{"type":27,"tag":145,"props":2135,"children":2138},{"className":2136},[2137],"kattene__title",[2139],{"type":27,"tag":43,"props":2140,"children":2142},{"target":2117,"rel":2141,"href":2120},[2119],[2143],{"type":32,"value":2144},"DUNGZDUZ USB Microphone 高ゲイン、コードレスミニサイズ、仕事や学習に最適",{"type":32,"value":2133},{"type":27,"tag":145,"props":2147,"children":2150},{"className":2148},[2149],"kattene__description",[2151,2154,2156,2159,2161,2164],{"type":27,"tag":74,"props":2152,"children":2153},{},[],{"type":32,"value":2155},"※ 一般に内蔵マイクの性能は十分ではありません。",{"type":27,"tag":74,"props":2157,"children":2158},{},[],{"type":32,"value":2160},"ハダノはビデオ会議のときは、イヤホンに付属のマイクを使っていますが、マイクだけ使うときはじゃまです。",{"type":27,"tag":74,"props":2162,"children":2163},{},[],{"type":32,"value":2165},"この製品は、小型・高感度・高コスパで一つ持っておくと役に立ちます。",{"type":32,"value":2133},{"type":27,"tag":145,"props":2168,"children":2172},{"className":2169},[2170,2171],"kattene__btns","__three",[2173,2175,2187,2189,2201,2202,2214],{"type":32,"value":2174},"\n      \t",{"type":27,"tag":145,"props":2176,"children":2177},{},[2178],{"type":27,"tag":43,"props":2179,"children":2184},{"className":2180,"target":2117,"rel":2183,"href":2120},[2181,2182],"kattene__btn","__red",[2119],[2185],{"type":32,"value":2186},"楽天",{"type":32,"value":2188},"\n        ",{"type":27,"tag":145,"props":2190,"children":2191},{},[2192],{"type":27,"tag":43,"props":2193,"children":2198},{"className":2194,"target":2117,"rel":2196,"href":2197},[2181,2195],"__orange",[2119],"https:\u002F\u002Faf.moshimo.com\u002Faf\u002Fc\u002Fclick?a_id=3539938&p_id=170&pc_id=185&pl_id=4062&url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2FB0CNVZ27YH",[2199],{"type":32,"value":2200},"Amazon",{"type":32,"value":2188},{"type":27,"tag":145,"props":2203,"children":2204},{},[2205],{"type":27,"tag":43,"props":2206,"children":2211},{"className":2207,"target":2117,"rel":2209,"href":2210},[2181,2208],"__green",[2119],"https:\u002F\u002Fck.jp.ap.valuecommerce.com\u002Fservlet\u002Freferral?sid=3651993&pid=887947441&vc_url=https%3A%2F%2Fstore.shopping.yahoo.co.jp%2Fchansuaa%2F49077870589.html%3Fsc_i%3Dshopping-pc-web-result-item-rsltlst-title",[2212],{"type":32,"value":2213},"Yahoo!",{"type":32,"value":2133},{"type":32,"value":2109},{"type":27,"tag":74,"props":2217,"children":2219},{"id":2218},"usbcadapter",[],{"type":27,"tag":145,"props":2221,"children":2223},{"className":2222},[2106],[2224,2225,2238,2239],{"type":32,"value":2109},{"type":27,"tag":145,"props":2226,"children":2228},{"className":2227},[2113],[2229],{"type":27,"tag":43,"props":2230,"children":2233},{"target":2117,"rel":2231,"href":2232},[2119],"https:\u002F\u002Fhb.afl.rakuten.co.jp\u002Fichiba\u002F1c31a7e9.545b2c08.1c31a7ea.d83a8f7a\u002F_RTLink57026?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2Fe7699c2d6f58730632d3edbdfb0706fd%2F&link_type=hybrid_url&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJoeWJyaWRfdXJsIiwic2l6ZSI6IjI0MHgyNDAiLCJuYW0iOjEsIm5hbXAiOiJyaWdodCIsImNvbSI6MSwiY29tcCI6ImRvd24iLCJwcmljZSI6MSwiYm9yIjoxLCJjb2wiOjEsImJidG4iOjEsInByb2QiOjEsImFtcCI6ZmFsc2V9",[2234],{"type":27,"tag":87,"props":2235,"children":2237},{"src":2236},"https:\u002F\u002Fthumbnail.image.rakuten.co.jp\u002F@0_mall\u002Fanker\u002Fcabinet\u002Famazon\u002Fb87310a1.jpg?_ex=240x240",[],{"type":32,"value":2109},{"type":27,"tag":145,"props":2240,"children":2242},{"className":2241},[2130],[2243,2244,2254,2255,2274,2275,2312],{"type":32,"value":2133},{"type":27,"tag":145,"props":2245,"children":2247},{"className":2246},[2137],[2248],{"type":27,"tag":43,"props":2249,"children":2251},{"target":2117,"rel":2250,"href":2232},[2119],[2252],{"type":32,"value":2253},"Anker USB-C & USB 3.0 変換アダプタ 2個セット",{"type":32,"value":2133},{"type":27,"tag":145,"props":2256,"children":2258},{"className":2257},[2149],[2259,2262,2264,2267,2269,2272],{"type":27,"tag":74,"props":2260,"children":2261},{},[],{"type":32,"value":2263},"※ USBのType-CをType-Aに変換するアダプタの2個セットです。",{"type":27,"tag":74,"props":2265,"children":2266},{},[],{"type":32,"value":2268},"コネクタ部分は、抜き差しの繰り返しによってこわれやすいものですが、Ankerなら安心です。",{"type":27,"tag":74,"props":2270,"children":2271},{},[],{"type":32,"value":2273},"ランプで動作が確認できるのも気に入っています。",{"type":32,"value":2133},{"type":27,"tag":145,"props":2276,"children":2278},{"className":2277},[2170,2171],[2279,2280,2289,2290,2300,2301,2311],{"type":32,"value":2174},{"type":27,"tag":145,"props":2281,"children":2282},{},[2283],{"type":27,"tag":43,"props":2284,"children":2287},{"className":2285,"target":2117,"rel":2286,"href":2232},[2181,2182],[2119],[2288],{"type":32,"value":2186},{"type":32,"value":2188},{"type":27,"tag":145,"props":2291,"children":2292},{},[2293],{"type":27,"tag":43,"props":2294,"children":2298},{"className":2295,"target":2117,"rel":2296,"href":2297},[2181,2195],[2119],"https:\u002F\u002Faf.moshimo.com\u002Faf\u002Fc\u002Fclick?a_id=3539938&p_id=170&pc_id=185&pl_id=4062&url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2FB08JTMYPNW",[2299],{"type":32,"value":2200},{"type":32,"value":2188},{"type":27,"tag":145,"props":2302,"children":2303},{},[2304],{"type":27,"tag":43,"props":2305,"children":2309},{"className":2306,"target":2117,"rel":2307,"href":2308},[2181,2208],[2119],"https:\u002F\u002Fck.jp.ap.valuecommerce.com\u002Fservlet\u002Freferral?sid=3651993&pid=887947441&vc_url=https%3A%2F%2Fstore.shopping.yahoo.co.jp%2Fankerdirect%2Fb8731.html%3Fsc_i%3Dshopping-pc-web-result-item-brd_off-title",[2310],{"type":32,"value":2213},{"type":32,"value":2133},{"type":32,"value":2109},{"type":27,"tag":74,"props":2314,"children":2316},{"id":2315},"lpoiejun",[],{"type":27,"tag":145,"props":2318,"children":2320},{"className":2319},[2106],[2321,2322,2335,2336],{"type":32,"value":2109},{"type":27,"tag":145,"props":2323,"children":2325},{"className":2324},[2113],[2326],{"type":27,"tag":43,"props":2327,"children":2330},{"target":2117,"rel":2328,"href":2329},[2119],"https:\u002F\u002Fhb.afl.rakuten.co.jp\u002Fichiba\u002F4e6e58ec.dd593a7b.4e6e58ed.e4d95d7c\u002F_RTLink57026?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fplays23%2Fb0c7khm23c%2F&link_type=hybrid_url&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJoeWJyaWRfdXJsIiwic2l6ZSI6IjI0MHgyNDAiLCJuYW0iOjEsIm5hbXAiOiJyaWdodCIsImNvbSI6MSwiY29tcCI6ImRvd24iLCJwcmljZSI6MSwiYm9yIjoxLCJjb2wiOjEsImJidG4iOjEsInByb2QiOjAsImFtcCI6ZmFsc2V9",[2331],{"type":27,"tag":87,"props":2332,"children":2334},{"src":2333},"https:\u002F\u002Fthumbnail.image.rakuten.co.jp\u002F@0_mall\u002Fplays23\u002Fcabinet\u002Fraku099_0304\u002Fb0c7khm23c00.jpg?_ex=240x240",[],{"type":32,"value":2109},{"type":27,"tag":145,"props":2337,"children":2339},{"className":2338},[2130],[2340,2341,2351,2352,2366,2367,2404],{"type":32,"value":2133},{"type":27,"tag":145,"props":2342,"children":2344},{"className":2343},[2137],[2345],{"type":27,"tag":43,"props":2346,"children":2348},{"target":2117,"rel":2347,"href":2329},[2119],[2349],{"type":32,"value":2350},"USB type C 延長ケーブル 0.5m LpoieJun USB 3.2 Gen2(20Gbps) 高速データ通信",{"type":32,"value":2133},{"type":27,"tag":145,"props":2353,"children":2355},{"className":2354},[2149],[2356,2359,2361,2364],{"type":27,"tag":74,"props":2357,"children":2358},{},[],{"type":32,"value":2360},"※ Type-C延長ケーブルは、規格がシビアなようで、慎重に選ぶ必要があります。",{"type":27,"tag":74,"props":2362,"children":2363},{},[],{"type":32,"value":2365},"これは、太くてしっかりしているのにやわらかく、とても使いやすそうです。",{"type":32,"value":2133},{"type":27,"tag":145,"props":2368,"children":2370},{"className":2369},[2170,2171],[2371,2372,2381,2382,2392,2393,2403],{"type":32,"value":2174},{"type":27,"tag":145,"props":2373,"children":2374},{},[2375],{"type":27,"tag":43,"props":2376,"children":2379},{"className":2377,"target":2117,"rel":2378,"href":2329},[2181,2182],[2119],[2380],{"type":32,"value":2186},{"type":32,"value":2188},{"type":27,"tag":145,"props":2383,"children":2384},{},[2385],{"type":27,"tag":43,"props":2386,"children":2390},{"className":2387,"target":2117,"rel":2388,"href":2389},[2181,2195],[2119],"https:\u002F\u002Faf.moshimo.com\u002Faf\u002Fc\u002Fclick?a_id=3539938&p_id=170&pc_id=185&pl_id=4062&url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2FB0DHSH2DM6",[2391],{"type":32,"value":2200},{"type":32,"value":2188},{"type":27,"tag":145,"props":2394,"children":2395},{},[2396],{"type":27,"tag":43,"props":2397,"children":2401},{"className":2398,"target":2117,"rel":2399,"href":2400},[2181,2208],[2119],"https:\u002F\u002Fck.jp.ap.valuecommerce.com\u002Fservlet\u002Freferral?sid=3651993&pid=887947441&vc_url=https%3A%2F%2Fstore.shopping.yahoo.co.jp%2Fshopeevergreen%2F11520240909200113.html%3Fsc_i%3Dshopping-pc-web-result-item-rsltlst-title",[2402],{"type":32,"value":2213},{"type":32,"value":2133},{"type":32,"value":2109},{"type":27,"tag":74,"props":2406,"children":2408},{"id":2407},"mindhacks",[],{"type":27,"tag":145,"props":2410,"children":2412},{"className":2411},[2106],[2413,2414,2427,2428],{"type":32,"value":2109},{"type":27,"tag":145,"props":2415,"children":2417},{"className":2416},[2113],[2418],{"type":27,"tag":43,"props":2419,"children":2422},{"target":2117,"rel":2420,"href":2421},[2119],"https:\u002F\u002Fhb.afl.rakuten.co.jp\u002Fichiba\u002F273236f4.d5f5314b.273236f5.ec66cf8e\u002F_RTLink50200?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Frakutenkobo-ebooks%2F72f787bd5f0733efad7dbc6691edc4f7%2F&link_type=hybrid_url&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJoeWJyaWRfdXJsIiwic2l6ZSI6IjI0MHgyNDAiLCJuYW0iOjEsIm5hbXAiOiJyaWdodCIsImNvbSI6MSwiY29tcCI6ImRvd24iLCJwcmljZSI6MSwiYm9yIjoxLCJjb2wiOjEsImJidG4iOjEsInByb2QiOjAsImFtcCI6ZmFsc2V9",[2423],{"type":27,"tag":87,"props":2424,"children":2426},{"src":2425},"https:\u002F\u002Fthumbnail.image.rakuten.co.jp\u002F@0_mall\u002Frakutenkobo-ebooks\u002Fcabinet\u002F9750\u002F2000006139750.jpg?_ex=240x240",[],{"type":32,"value":2109},{"type":27,"tag":145,"props":2429,"children":2431},{"className":2430},[2130],[2432,2433,2443,2444,2463,2464,2501],{"type":32,"value":2133},{"type":27,"tag":145,"props":2434,"children":2436},{"className":2435},[2137],[2437],{"type":27,"tag":43,"props":2438,"children":2440},{"target":2117,"rel":2439,"href":2421},[2119],[2441],{"type":32,"value":2442},"マインドハックス勉強法 脳と心を味方につける【電子書籍】[ 佐々木正悟 ]",{"type":32,"value":2133},{"type":27,"tag":145,"props":2445,"children":2447},{"className":2446},[2149],[2448,2451,2453,2456,2458,2461],{"type":27,"tag":74,"props":2449,"children":2450},{},[],{"type":32,"value":2452},"※ ハダノは、紙の本を2008年に買いました。",{"type":27,"tag":74,"props":2454,"children":2455},{},[],{"type":32,"value":2457},"機器の進歩に合わせて読み替えるべき点はありますが、基本的な考え方は現在でも通用すると思います。",{"type":27,"tag":74,"props":2459,"children":2460},{},[],{"type":32,"value":2462},"「ハック」という手法をなぜみんな使わないのか不思議です。",{"type":32,"value":2133},{"type":27,"tag":145,"props":2465,"children":2467},{"className":2466},[2170,2171],[2468,2469,2478,2479,2489,2490,2500],{"type":32,"value":2174},{"type":27,"tag":145,"props":2470,"children":2471},{},[2472],{"type":27,"tag":43,"props":2473,"children":2476},{"className":2474,"target":2117,"rel":2475,"href":2421},[2181,2182],[2119],[2477],{"type":32,"value":2186},{"type":32,"value":2188},{"type":27,"tag":145,"props":2480,"children":2481},{},[2482],{"type":27,"tag":43,"props":2483,"children":2487},{"className":2484,"target":2117,"rel":2485,"href":2486},[2181,2195],[2119],"https:\u002F\u002Faf.moshimo.com\u002Faf\u002Fc\u002Fclick?a_id=3539938&p_id=170&pc_id=185&pl_id=4062&url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2FB0195VHW64",[2488],{"type":32,"value":2200},{"type":32,"value":2188},{"type":27,"tag":145,"props":2491,"children":2492},{},[2493],{"type":27,"tag":43,"props":2494,"children":2498},{"className":2495,"target":2117,"rel":2496,"href":2497},[2181,2208],[2119],"https:\u002F\u002Fck.jp.ap.valuecommerce.com\u002Fservlet\u002Freferral?sid=3651993&pid=887947441&vc_url=https%3A%2F%2Fstore.shopping.yahoo.co.jp%2Fsoftya%2F9784775924204-pan.html%3Fsc_i%3Dshopping-pc-web-result-item-rsltlst-img",[2499],{"type":32,"value":2213},{"type":32,"value":2133},{"type":32,"value":2109},{"type":27,"tag":74,"props":2503,"children":2504},{},[],{"type":27,"tag":328,"props":2506,"children":2507},{},[],{"type":27,"tag":28,"props":2509,"children":2510},{},[2511],{"type":27,"tag":43,"props":2512,"children":2514},{"href":2513},"\u002Farticles\u002Fhacker-2",[2515],{"type":32,"value":2516},"次へ→　ちょっとだけハッカー2",{"title":8,"searchDepth":2518,"depth":2518,"links":2519},2,[2520],{"id":80,"depth":2518,"text":10,"children":2521},[2522,2524,2525,2526,2527,2528,2529,2530,2531],{"id":140,"depth":2523,"text":143},3,{"id":464,"depth":2523,"text":467},{"id":546,"depth":2523,"text":549},{"id":777,"depth":2523,"text":777},{"id":995,"depth":2523,"text":998},{"id":1151,"depth":2523,"text":1154},{"id":1296,"depth":2523,"text":1296},{"id":1458,"depth":2523,"text":1458},{"id":1677,"depth":2523,"text":1680},"markdown","content:articles:hacker-1.md","content","articles\u002Fhacker-1.md","articles\u002Fhacker-1","md",{"_path":2539,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":2540,"description":2541,"category":2542,"tag":2543,"thumbnail":2544,"createdAt":2545,"updatedAt":2546,"body":2547,"_type":2532,"_id":3035,"_source":2534,"_file":3036,"_stem":3037,"_extension":2537},"\u002Farticles\u002Fsocsaga-2","ソックサーガの始め方【自校運用】","コンテンツプログラミングシステム「ソックサーガ」のReplitによる自校運用法",[12],[16,17,15,18,19],"socsaga01.jpg","2022\u002F6\u002F23","2022\u002F7\u002F2",{"type":24,"children":2548,"toc":3030},[2549,2554,2557,2563,2583,2599,2626,2631,2634,2637,2642,2645,2651,2668,2681,2722,2727,2730,2733,2746,2749,2754,2757,2762,2775,2784,2789,2792,2800,2808,2816,2824,2832,2840,2856,2864,2918,2922,3015,3018,3021],{"type":27,"tag":28,"props":2550,"children":2551},{},[2552],{"type":32,"value":2553},"　この記事では、コンテンツプログラミングシステム「ソックサーガ」の始め方を解説します。クラウド統合開発環境Replit（リプリット）による自校運用の方法です。プログラミング実習では、生徒が打ったコードを管理する必要があります。コードを評価や指導に十分役立てるには、自校運用が必須です。",{"type":27,"tag":74,"props":2555,"children":2556},{},[],{"type":27,"tag":78,"props":2558,"children":2560},{"id":2559},"ソックサーガの始め方指導者の方へ",[2561],{"type":32,"value":2562},"ソックサーガの始め方（指導者の方へ）",{"type":27,"tag":228,"props":2564,"children":2565},{},[2566,2571],{"type":27,"tag":39,"props":2567,"children":2568},{},[2569],{"type":32,"value":2570},"Googleアカウント取得。校務用とは別に授業用のアカウントがあると便利。",{"type":27,"tag":39,"props":2572,"children":2573},{},[2574,2581],{"type":27,"tag":43,"props":2575,"children":2578},{"href":2576,"rel":2577},"https:\u002F\u002Freplit.com\u002F~",[986],[2579],{"type":32,"value":2580},"🔗Replit",{"type":32,"value":2582}," に[Continue with Google]で[Sign up]し、アカウントを設定。左上の ≡ - [+Create]をクリック、Titleにプロジェクト名（socsaga1 等）、Languageは[HTML,CSS,JS]を選択し、[+Create Repl]をクリック。プロジェクトはクラス数分作るとよい。",{"type":27,"tag":28,"props":2584,"children":2585},{},[2586,2593],{"type":27,"tag":87,"props":2587,"children":2592},{"src":2588,"alt":2589,"className":2590},"\u002Fimg\u002Freplitlogin.jpg","replitlogin",[2591],"imgh",[],{"type":27,"tag":87,"props":2594,"children":2598},{"src":2595,"alt":2596,"className":2597},"\u002Fimg\u002Fcreaterepl.jpg","createrepl",[2591],[],{"type":27,"tag":228,"props":2600,"children":2601},{"start":2523},[2602,2607,2621],{"type":27,"tag":39,"props":2603,"children":2604},{},[2605],{"type":32,"value":2606},"JavaScriptプログラムは、基本的にhtmlファイルに組み込んで動作させる。ローカルファイルをFiles欄にドラッグ＆ドロップするか、コードエディタで直接書くかする。",{"type":27,"tag":39,"props":2608,"children":2609},{},[2610,2612,2619],{"type":32,"value":2611},"SocSagaを利用するには、",{"type":27,"tag":43,"props":2613,"children":2616},{"href":2614,"rel":2615},"https:\u002F\u002Fkyodx.com\u002Fsrc\u002Fsocsagaset.zip",[986],[2617],{"type":32,"value":2618},"🔗socsagaset.zipをダウンロード",{"type":32,"value":2620},"・解凍しておく。sagaフォルダの中のものをすべてFiles欄にドラッグ＆ドロップする。",{"type":27,"tag":39,"props":2622,"children":2623},{},[2624],{"type":32,"value":2625},"jisshu00.html をひな形ファイルとし、ファイル名右の ≡ をクリック-Duplicate、≡ をクリック-Rename で jisshu01.html，jisshu02.html，…とクラスの生徒数分の実習htmlファイルを用意。指導者の方へ.txt の指示に従ってhtmlリストと画像リストを更新しておく。実習開始時には、右上の[👤+Invite]をクリックし、メールで生徒に知らせる。",{"type":27,"tag":87,"props":2627,"children":2630},{"src":2628,"alt":2629,"width":91},"\u002Fimg\u002Freplsaga1.jpg","replsaga1",[],{"type":27,"tag":74,"props":2632,"children":2633},{},[],{"type":27,"tag":74,"props":2635,"children":2636},{},[],{"type":27,"tag":28,"props":2638,"children":2639},{},[2640],{"type":32,"value":2641},"※ 生徒には、次の手順で操作をさせてください。",{"type":27,"tag":74,"props":2643,"children":2644},{},[],{"type":27,"tag":78,"props":2646,"children":2648},{"id":2647},"ソックサーガの始め方生徒へ",[2649],{"type":32,"value":2650},"ソックサーガの始め方（生徒へ）",{"type":27,"tag":228,"props":2652,"children":2654},{"start":2653},6,[2655],{"type":27,"tag":39,"props":2656,"children":2657},{},[2658,2660,2666],{"type":32,"value":2659},"メールが届いたら、",{"type":27,"tag":527,"props":2661,"children":2663},{"className":2662},[],[2664],{"type":32,"value":2665},"https:\u002F\u002Freplit.com\u002Fjoin\u002F**********-*******",{"type":32,"value":2667}," をクリックし、[Continue with Google]で[Sign up]して、プロジェクトに参加する。「Replit needs ……」に対しては、[Allow notifications]を選ぶ。",{"type":27,"tag":28,"props":2669,"children":2670},{},[2671,2675],{"type":27,"tag":87,"props":2672,"children":2674},{"src":2588,"alt":2589,"className":2673},[2591],[],{"type":27,"tag":87,"props":2676,"children":2680},{"src":2677,"alt":2678,"className":2679},"\u002Fimg\u002Freplitnotif.jpg","replitnotif",[2591],[],{"type":27,"tag":228,"props":2682,"children":2684},{"start":2683},7,[2685,2690,2701],{"type":27,"tag":39,"props":2686,"children":2687},{},[2688],{"type":32,"value":2689},"コード編集欄の右の Output欄の右上の ↗ (Open in a new tab) をクリックして新しいウィンドウを開く。少し待つと「ソックサーガへようこそ」から「ソックサーガで実習」に自動的に切り替わる。コード編集欄の右の仕切り線を右にずらして、広くしておくとよい。",{"type":27,"tag":39,"props":2691,"children":2692},{},[2693,2699],{"type":27,"tag":527,"props":2694,"children":2696},{"className":2695},[],[2697],{"type":32,"value":2698},"jisshu\u002Fsocsaga.html（ソックサーガの説明_編集用）へ",{"type":32,"value":2700},"をクリックし、実行エリアが表示されるようにし、[コンテンツ作り へ]、[　→　]、[　→　]、…とボタンをクリックして、SocSagaの説明を読み進める。",{"type":27,"tag":39,"props":2702,"children":2703},{},[2704,2706,2712,2714,2720],{"type":32,"value":2705},"SocSagaについて理解できたら、jisshu フォルダ内のhtml一覧で ",{"type":27,"tag":527,"props":2707,"children":2709},{"className":2708},[],[2710],{"type":32,"value":2711},"jisshu**.html",{"type":32,"value":2713},"（**は出席番号）をクリックして自分のページを表示する。Files欄で ",{"type":27,"tag":527,"props":2715,"children":2717},{"className":2716},[],[2718],{"type":32,"value":2719},"jisshu\u002Fjisshu**.html",{"type":32,"value":2721}," を選び、コード編集欄と自分のページとを行ったり来たりしてSocSagaの練習をする。編集するスライド番号 を入力し、自分のページの ↻ ボタンで更新。スライド編集エリアで編集後、[ソース]ボタンでコピーしたソースをコード編集欄のsectionタグ内に貼り付ける。自分のページの ↻ ボタンで更新。正しく表示されているか、実行エリアのボタンが作動するか確認。",{"type":27,"tag":87,"props":2723,"children":2726},{"src":2724,"alt":2725,"width":91},"\u002Fimg\u002Freplsaji.jpg","replsaji",[],{"type":27,"tag":74,"props":2728,"children":2729},{},[],{"type":27,"tag":74,"props":2731,"children":2732},{},[],{"type":27,"tag":28,"props":2734,"children":2735},{},[2736,2738,2744],{"type":32,"value":2737},"※ socsagaの練習で生徒がある程度使いこなせるようになったら、あとは「授業のねらい」に応じてどんどんコンテンツプログラミングをさせてください。コンテンツ作成では、「内容よりも見た目に凝りすぎる」ことのないよう注意してください。生徒はむやみに色を使いたがります。伝わるデザインにするには、「ポジティブな強調は青、ネガティブな強調は赤」など統一した色使いでシンプルに仕上げることが大切です（→",{"type":27,"tag":43,"props":2739,"children":2741},{"href":2740},"#presen",[2742],{"type":32,"value":2743},"🔗プレゼン資料のデザイン図鑑",{"type":32,"value":2745},"）。ソフトウェアは著作物だということも教えましょう。",{"type":27,"tag":74,"props":2747,"children":2748},{},[],{"type":27,"tag":28,"props":2750,"children":2751},{},[2752],{"type":32,"value":2753},"※ 以下は、おまけです。しくみを知りたい方はどうぞ……",{"type":27,"tag":74,"props":2755,"children":2756},{},[],{"type":27,"tag":78,"props":2758,"children":2760},{"id":2759},"ソックサーガ自校運用の技術的な話",[2761],{"type":32,"value":2759},{"type":27,"tag":28,"props":2763,"children":2764},{},[2765,2766,2773],{"type":32,"value":709},{"type":27,"tag":43,"props":2767,"children":2770},{"href":2768,"rel":2769},"https:\u002F\u002Fkyodx.com\u002Farticles\u002Fcloudide-1",[986],[2771],{"type":32,"value":2772},"🔗クラウド統合開発環境でWebアプリの自校運用を",{"type":32,"value":2774}," の最後に",{"type":27,"tag":28,"props":2776,"children":2777},{},[2778],{"type":27,"tag":527,"props":2779,"children":2781},{"className":2780},[],[2782],{"type":32,"value":2783},"　「画像の一覧」の問題が残っていますが、これは何とかなりそうです。画像やクリップボードの扱いが独特な iPad に対応したコードを書くついでに解決します。",{"type":27,"tag":28,"props":2785,"children":2786},{},[2787],{"type":32,"value":2788},"と書いた件ですが、次のように対応しました。",{"type":27,"tag":74,"props":2790,"children":2791},{},[],{"type":27,"tag":35,"props":2793,"children":2794},{},[2795],{"type":27,"tag":39,"props":2796,"children":2797},{},[2798],{"type":32,"value":2799},"ルートのindex.htmlファイル「ソックサーガへようこそ」に以下のコードを入れ、新しいウィンドウを開いたら自動的にjisshuフォルダのindex.html「ソックサーガで実習」に移動するようにする。",{"type":27,"tag":519,"props":2801,"children":2803},{"code":2802},"    if (location.hostname.indexOf('.id.repl.co') \u003C 0) {\n      location.href = '\u002Fjisshu\u002F';\n    }\n",[2804],{"type":27,"tag":527,"props":2805,"children":2806},{"__ignoreMap":8},[2807],{"type":32,"value":2802},{"type":27,"tag":35,"props":2809,"children":2810},{},[2811],{"type":27,"tag":39,"props":2812,"children":2813},{},[2814],{"type":32,"value":2815},"jisshu\u002Findex.htmlに以下のコードを入れ、画像一覧を表示させる。urliから画像ファイル名を取得して配列にし、insertAdjacentHTMLでimgタグを挿入してゆく。ファイル名はfigcaptionタグを使って表示。ファイル名をクリックすると画像を開くようにしている。",{"type":27,"tag":519,"props":2817,"children":2819},{"code":2818},"      fetch(urli, {cache: \"no-store\"}).then(function(response) {\n        return response.text()\n      }).then(function(text) {\n        jlisti = text.split(\u002F\\n\u002F).filter((value) => value !== ''); \n        for (let item of jlisti) {\n        jisshui.insertAdjacentHTML('beforeend',`\u003Cfigure>\u003Cimg src=\"img\u002F${item}\">\u003Cfigcaption>\u003Ca href=\"img\u002F${item}\" onclick=\"return confirm('画像を開きますか？');\">${item}\u003C\u002Fa>\u003C\u002Ffigcaption>\u003C\u002Ffigure>`);          \n        }        \n      });      \n",[2820],{"type":27,"tag":527,"props":2821,"children":2822},{"__ignoreMap":8},[2823],{"type":32,"value":2818},{"type":27,"tag":35,"props":2825,"children":2826},{},[2827],{"type":27,"tag":39,"props":2828,"children":2829},{},[2830],{"type":32,"value":2831},"同じ要領で、jisshu\u002Findex.htmlに以下のコードを入れ、html一覧を表示させる。",{"type":27,"tag":519,"props":2833,"children":2835},{"code":2834},"      fetch(urlh,{cache: \"no-store\"}).then(function(response) {\n        return response.text()\n      }).then(function(text) {\n        jlisth = text.split(\u002F\\n\u002F).filter((value) => value !== '');\n        for (let item of jlisth) {\n        jisshuh.insertAdjacentHTML('beforeend',`　\u003Ca href=\"${item}\" target=\"_blank\">${item}\u003C\u002Fa>　`);          \n        }\n      });\n",[2836],{"type":27,"tag":527,"props":2837,"children":2838},{"__ignoreMap":8},[2839],{"type":32,"value":2834},{"type":27,"tag":35,"props":2841,"children":2842},{},[2843],{"type":27,"tag":39,"props":2844,"children":2845},{},[2846,2848,2854],{"type":32,"value":2847},"画像ファイル名一覧・htmlファイル名一覧の取得は、通常はサーバサイドプログラミングの出番。今回は、「指導者の方へ」で以下のShellコマンドを実行してもらう形にした。",{"type":27,"tag":527,"props":2849,"children":2851},{"className":2850},[],[2852],{"type":32,"value":2853},"{cache: \"no-store\"}",{"type":32,"value":2855}," でfetchし、キャッシュを読まないようにしているが、「リストを最新の状態にしたのに一覧が古いまま」ということがたまにあったので、対策を追記した。",{"type":27,"tag":519,"props":2857,"children":2859},{"code":2858},"cd jisshu\nls *.html > yourhtml.txt\nls img\u002F > yourimg.txt\n",[2860],{"type":27,"tag":527,"props":2861,"children":2862},{"__ignoreMap":8},[2863],{"type":32,"value":2858},{"type":27,"tag":35,"props":2865,"children":2866},{},[2867,2872,2893,2913],{"type":27,"tag":39,"props":2868,"children":2869},{},[2870],{"type":32,"value":2871},"iPadなどのモバイルOSの場合、画像やクリップボードの扱いがPCとは異なるので注意が必要。JavaScriptの命令がうまく働かないことが多々ある。",{"type":27,"tag":39,"props":2873,"children":2874},{},[2875,2877,2883,2885,2891],{"type":32,"value":2876},"iPadで画像をロングタップして",{"type":27,"tag":527,"props":2878,"children":2880},{"className":2879},[],[2881],{"type":32,"value":2882},"コピー",{"type":32,"value":2884},"し、SocPadに",{"type":27,"tag":527,"props":2886,"children":2888},{"className":2887},[],[2889],{"type":32,"value":2890},"貼り付け",{"type":32,"value":2892}," をしても何も貼り付けられない。仕方ないので、ckeditor5-34.1.0へアップデイトしたうえでAutoImage pluginを有効にした。これで、画像URLを貼り付ければ画像が挿入される。",{"type":27,"tag":39,"props":2894,"children":2895},{},[2896,2898,2904,2906,2911],{"type":32,"value":2897},"ところが、画像をロングタップしても",{"type":27,"tag":527,"props":2899,"children":2901},{"className":2900},[],[2902],{"type":32,"value":2903},"画像のアドレスをコピー",{"type":32,"value":2905},"が出ない。ファイル名をクリックすると画像を開くようにしたのはこのためで、アドレス欄をロングタップ-",{"type":27,"tag":527,"props":2907,"children":2909},{"className":2908},[],[2910],{"type":32,"value":2882},{"type":32,"value":2912}," でようやく画像URLがコピーされる。",{"type":27,"tag":39,"props":2914,"children":2915},{},[2916],{"type":32,"value":2917},"他にも方法は考えられるが、Appleが年々クリップボードのセキュリティを厳しくしているので、ユーザーに意識的操作をさせた方がよいと判断した。",{"type":27,"tag":74,"props":2919,"children":2921},{"id":2920},"presen",[],{"type":27,"tag":145,"props":2923,"children":2925},{"className":2924},[2106],[2926,2927,2940,2941],{"type":32,"value":2109},{"type":27,"tag":145,"props":2928,"children":2930},{"className":2929},[2113],[2931],{"type":27,"tag":43,"props":2932,"children":2935},{"target":2117,"rel":2933,"href":2934},[2119],"https:\u002F\u002Fhb.afl.rakuten.co.jp\u002Fichiba\u002F26ba9fc2.c2fdf85a.26ba9fc3.8edde063\u002F_RTLink57021?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fbook%2F15832001%2F&link_type=hybrid_url&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJoeWJyaWRfdXJsIiwic2l6ZSI6IjI0MHgyNDAiLCJuYW0iOjEsIm5hbXAiOiJ1cCIsImNvbSI6MSwiY29tcCI6ImRvd24iLCJwcmljZSI6MSwiYm9yIjoxLCJjb2wiOjEsImJidG4iOjAsInByb2QiOjAsImFtcCI6ZmFsc2V9",[2936],{"type":27,"tag":87,"props":2937,"children":2939},{"src":2938},"https:\u002F\u002Fthumbnail.image.rakuten.co.jp\u002F@0_mall\u002Fbook\u002Fcabinet\u002F5870\u002F9784478105870.jpg?_ex=240x240",[],{"type":32,"value":2109},{"type":27,"tag":145,"props":2942,"children":2944},{"className":2943},[2130],[2945,2946,2956,2957,2976,2977,3014],{"type":32,"value":2133},{"type":27,"tag":145,"props":2947,"children":2949},{"className":2948},[2137],[2950],{"type":27,"tag":43,"props":2951,"children":2953},{"target":2117,"rel":2952,"href":2934},[2119],[2954],{"type":32,"value":2955},"プレゼン資料のデザイン図鑑 [ 前田 鎌利 ]",{"type":32,"value":2133},{"type":27,"tag":145,"props":2958,"children":2960},{"className":2959},[2149],[2961,2964,2966,2969,2971,2974],{"type":27,"tag":74,"props":2962,"children":2963},{},[],{"type":32,"value":2965},"※ コンテンツ作成では、伝わるデザインが大切です。",{"type":27,"tag":74,"props":2967,"children":2968},{},[],{"type":32,"value":2970},"ハダノは、今の学校教育にはプレゼン指導が欠けていると思います。",{"type":27,"tag":74,"props":2972,"children":2973},{},[],{"type":32,"value":2975},"この本は、豊富な実例をもとにプレゼンの極意が述べられていて、目からうろこでした。",{"type":32,"value":2133},{"type":27,"tag":145,"props":2978,"children":2980},{"className":2979},[2170,2171],[2981,2982,2991,2992,3002,3003,3013],{"type":32,"value":2174},{"type":27,"tag":145,"props":2983,"children":2984},{},[2985],{"type":27,"tag":43,"props":2986,"children":2989},{"className":2987,"target":2117,"rel":2988,"href":2934},[2181,2182],[2119],[2990],{"type":32,"value":2186},{"type":32,"value":2188},{"type":27,"tag":145,"props":2993,"children":2994},{},[2995],{"type":27,"tag":43,"props":2996,"children":3000},{"className":2997,"target":2117,"rel":2998,"href":2999},[2181,2195],[2119],"https:\u002F\u002Faf.moshimo.com\u002Faf\u002Fc\u002Fclick?a_id=3539938&p_id=170&pc_id=185&pl_id=4062&url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2F4478105871",[3001],{"type":32,"value":2200},{"type":32,"value":2188},{"type":27,"tag":145,"props":3004,"children":3005},{},[3006],{"type":27,"tag":43,"props":3007,"children":3011},{"className":3008,"target":2117,"rel":3009,"href":3010},[2181,2208],[2119],"https:\u002F\u002Fck.jp.ap.valuecommerce.com\u002Fservlet\u002Freferral?sid=3651993&pid=887947441&vc_url=https%3A%2F%2Fstore.shopping.yahoo.co.jp%2Fbookfan%2Fbk-4478105871.html%3Fsc_i%3Dshp_pc_search_itemlist_shsrg_title",[3012],{"type":32,"value":2213},{"type":32,"value":2133},{"type":32,"value":2109},{"type":27,"tag":74,"props":3016,"children":3017},{},[],{"type":27,"tag":328,"props":3019,"children":3020},{},[],{"type":27,"tag":28,"props":3022,"children":3023},{},[3024],{"type":27,"tag":43,"props":3025,"children":3027},{"href":3026},"\u002Farticles\u002Fsocsaga-1",[3028],{"type":32,"value":3029},"←前へ　プログラミングシステム「ソックサーガ」を作ってみた",{"title":8,"searchDepth":2518,"depth":2518,"links":3031},[3032,3033,3034],{"id":2559,"depth":2518,"text":2562},{"id":2647,"depth":2518,"text":2650},{"id":2759,"depth":2518,"text":2759},"content:articles:socsaga-2.md","articles\u002Fsocsaga-2.md","articles\u002Fsocsaga-2",{"_path":3039,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":3040,"description":3041,"category":3042,"tag":3043,"thumbnail":3045,"createdAt":3046,"updatedAt":3047,"body":3048,"_type":2532,"_id":3420,"_source":2534,"_file":3421,"_stem":3422,"_extension":2537},"\u002Farticles\u002Fcloudide-1","クラウド統合開発環境でWebアプリの自校運用を","Webアプリの自校運用に最適なクラウド統合開発環境を探し求め、GlitchからReplitに乗り換えた話",[12],[17,15,16,3044,18],"soclicker","replsaga1.jpg","2022\u002F6\u002F21","2022\u002F7\u002F1",{"type":24,"children":3049,"toc":3410},[3050,3055,3058,3064,3069,3075,3088,3091,3096,3099,3105,3110,3124,3130,3142,3147,3152,3158,3243,3246,3251,3254,3260,3265,3269,3290,3294,3387,3390,3393,3401],{"type":27,"tag":28,"props":3051,"children":3052},{},[3053],{"type":32,"value":3054},"　この記事では、「Webアプリの自校運用に最適なクラウド統合開発環境を探し求め、Glitch（グリッチ）から Replit（リプリット）に乗り換えた話」を紹介します。",{"type":27,"tag":74,"props":3056,"children":3057},{},[],{"type":27,"tag":78,"props":3059,"children":3061},{"id":3060},"学校教育にふさわしいのはwebアプリ",[3062],{"type":32,"value":3063},"学校教育にふさわしいのは、Webアプリ",{"type":27,"tag":28,"props":3065,"children":3066},{},[3067],{"type":32,"value":3068},"　「コンピュータ、ソフトなければただの箱」です。各校とも自校の機種用のアプリを導入します。教員や教育委員会担当者がソフトウェアにくわしくなければ、業者のいいなりです。多くの場合、ネイティブアプリを有料で導入することになります。アプリ自体は無料であってもインストール手数料を取られます。",{"type":27,"tag":138,"props":3070,"children":3072},{"id":3071},"ネイティブアプリとwebアプリの違い",[3073],{"type":32,"value":3074},"ネイティブアプリとWebアプリの違い",{"type":27,"tag":35,"props":3076,"children":3077},{},[3078,3083],{"type":27,"tag":39,"props":3079,"children":3080},{},[3081],{"type":32,"value":3082},"ネイティブアプリは各OS用に作られたアプリなので、機能・性能をとことん追求できる。OSごとに別々のアプリが必要。開発・登録にお金がかかり、インストールが必要。",{"type":27,"tag":39,"props":3084,"children":3085},{},[3086],{"type":32,"value":3087},"Webアプリはブラウザ上で動くので、ネットさえあればOK。一つのアプリで汎用的に使えるが、機能・性能はほどほど。お金をかけずに開発でき、インストールは不要。",{"type":27,"tag":74,"props":3089,"children":3090},{},[],{"type":27,"tag":28,"props":3092,"children":3093},{},[3094],{"type":32,"value":3095},"　このような違いを考えると、予算の乏しい学校ではWebアプリを中心にした方がよいことになります。業者はWebアプリからは利益が得られないので、いい顔はしないと思います。WebアプリはWeb上に配置され、そのアドレスを知っていればだれでも使うことができます。ほとんどの場合、無料です。",{"type":27,"tag":74,"props":3097,"children":3098},{},[],{"type":27,"tag":78,"props":3100,"children":3102},{"id":3101},"webアプリを自校運用するには",[3103],{"type":32,"value":3104},"Webアプリを自校運用するには",{"type":27,"tag":28,"props":3106,"children":3107},{},[3108],{"type":32,"value":3109},"　Webアプリの中には、データを蓄積するタイプもあります。すでにWeb上に配置されているWebアプリの場合、データ領域も無料で使わせてくれることがあります。ただし、容量に制限があったり、保存期間が決まっていたり、秘密が守られなかったり、突然サービスが終了したりします。「容量を気にせず、自在にデータを扱いたい」場合、一般的には自力でサーバーを立てて運用する必要があります。サーバーサイドプログラミングをはじめとする専門知識や費用が必要となり、手が出ません。",{"type":27,"tag":28,"props":3111,"children":3112},{},[3113,3115,3122],{"type":32,"value":3114},"　それを解決するのが、",{"type":27,"tag":43,"props":3116,"children":3119},{"href":3117,"rel":3118},"https:\u002F\u002Fvitalify.jp\u002Fapp-lab\u002Fvietnam-offshore\u002F20181128-saaspaas\u002F#2-1_BaasmBaas",[986],[3120],{"type":32,"value":3121},"🔗Paas(Platform as a Service)やBaas(Backend as a Service)などのクラウドサービス",{"type":32,"value":3123},"です。無料でもけっこう使えるものがあります。ハダノは、プログラミングにはクラウド統合開発環境、データベースにはFirebaseを使います。これらを使えば、Webアプリを自校運用することができます。大切な教育データを自校で管理できて、安心・便利です。生徒の作品やコードの管理はもちろん、ソックリッカーの先生名の削除も自分でできるのです。",{"type":27,"tag":138,"props":3125,"children":3127},{"id":3126},"クラウド統合開発環境のおすすめは",[3128],{"type":32,"value":3129},"クラウド統合開発環境のおすすめは？",{"type":27,"tag":28,"props":3131,"children":3132},{},[3133,3134,3140],{"type":32,"value":709},{"type":27,"tag":43,"props":3135,"children":3137},{"href":3136},"#masatolan",[3138],{"type":32,"value":3139},"🔗JavaScriptでいきなり機械学習を遊び倒す本",{"type":32,"value":3141}," では、２つのおすすめが紹介されていました。",{"type":27,"tag":28,"props":3143,"children":3144},{},[3145],{"type":32,"value":3146},"　Glitch（グリッチ） と Replit（リプリット） です。どちらも似た特徴を持っています。GlitchはJavaScriptに特化、Replitは50以上のプログラミング言語対応です。ハダノはJavaScript主体なので、はじめはGlitchを使っていました。ボタン一つでFirebaseにデプロイできるのもGlitchの魅力でした。",{"type":27,"tag":28,"props":3148,"children":3149},{},[3150],{"type":32,"value":3151},"　2022年になって状況が変わってきたので、自分なりにGlitchとReplitの特徴を整理してみました。",{"type":27,"tag":138,"props":3153,"children":3155},{"id":3154},"glitchとreplitの比較gとr",[3156],{"type":32,"value":3157},"GlitchとReplitの比較【GとR】",{"type":27,"tag":35,"props":3159,"children":3160},{},[3161,3174,3187,3200,3215,3230],{"type":27,"tag":39,"props":3162,"children":3163},{},[3164,3166],{"type":32,"value":3165},"プロジェクト名は、Gは自動でつき、Rは自分で設定する。",{"type":27,"tag":810,"props":3167,"children":3168},{},[3169],{"type":27,"tag":55,"props":3170,"children":3171},{},[3172],{"type":32,"value":3173},"Rの方がわかりやすい。",{"type":27,"tag":39,"props":3175,"children":3176},{},[3177,3179],{"type":32,"value":3178},"どちらもしばらくアクセスしないとスリープする。Rは10秒程度で復帰するが、Gは時間がかかることが多い。エラーでリロードすることもしばしば。",{"type":27,"tag":810,"props":3180,"children":3181},{},[3182],{"type":27,"tag":55,"props":3183,"children":3184},{},[3185],{"type":32,"value":3186},"Rの方がストレスが少ない。",{"type":27,"tag":39,"props":3188,"children":3189},{},[3190,3192],{"type":32,"value":3191},"Firebase Hostingにデプロイすればスリープしなくなる。Gは以前はボタン一つでデプロイできるのを売りにしていたが、2022年になって画面デザインが変わってボタンが表示されなくなった。GlitchとFirebaseに報告したが、返答なし。TERMINAL欄にShellコマンドを打ち込めばデプロイできるが、きわめて煩雑。同じようにすれば ",{"type":27,"tag":810,"props":3193,"children":3194},{},[3195],{"type":27,"tag":55,"props":3196,"children":3197},{},[3198],{"type":32,"value":3199},"Rでもデプロイできるが、そこまでの必要性を感じない。",{"type":27,"tag":39,"props":3201,"children":3202},{},[3203,3205,3213],{"type":32,"value":3204},"ファイルやフォルダの扱いは両者で異なる。Gは一つずつしかアップロードできないし、圧縮ファイルや画像ファイルはassetsフォルダにはいる。カレントディレクトリに入れたり、解凍したりするためには、TERMINAL欄に複雑なコマンドを打ち込む必要がある。Rは、ローカルファイルをごそっとドラッグ＆ドロップするだけで、フォルダ階層を保ったままアップロードできる。",{"type":27,"tag":810,"props":3206,"children":3207},{},[3208],{"type":27,"tag":55,"props":3209,"children":3210},{},[3211],{"type":32,"value":3212},"Rの方がファイルの扱いが簡単。",{"type":32,"value":3214}," ただ、簡単すぎて生徒が違う階層に移動させてしまうおそれはある。",{"type":27,"tag":39,"props":3216,"children":3217},{},[3218,3220,3228],{"type":32,"value":3219},"画像の一覧を見たい場合、",{"type":27,"tag":810,"props":3221,"children":3222},{},[3223],{"type":27,"tag":55,"props":3224,"children":3225},{},[3226],{"type":32,"value":3227},"Gは、assetsフォルダの一覧表示があって便利。",{"type":32,"value":3229}," Rは、画像をimgフォルダなどに入れ、プログラムで一覧表示させるしかない。",{"type":27,"tag":39,"props":3231,"children":3232},{},[3233,3235],{"type":32,"value":3234},"PREVIEW欄（Output欄）は、両者ともルートのindex.htmlが表示され、コード編集欄とは連動しない。Gはルート以下のパスを打ち込めるが、Rは固定なので新しいウィンドウで開く必要がある。タブレットでの操作などを考えると、",{"type":27,"tag":810,"props":3236,"children":3237},{},[3238],{"type":27,"tag":55,"props":3239,"children":3240},{},[3241],{"type":32,"value":3242},"別ウィンドウでプレビューする方が現実的なので、GもRも差はない。",{"type":27,"tag":74,"props":3244,"children":3245},{},[],{"type":27,"tag":28,"props":3247,"children":3248},{},[3249],{"type":32,"value":3250},"……ということで、おおむねReplitの方が使いやすそうです。",{"type":27,"tag":74,"props":3252,"children":3253},{},[],{"type":27,"tag":78,"props":3255,"children":3257},{"id":3256},"replitに乗り換えよう",[3258],{"type":32,"value":3259},"Replitに乗り換えよう",{"type":27,"tag":28,"props":3261,"children":3262},{},[3263],{"type":32,"value":3264},"　Glitchは、アップデートのたびに使いにくくなり、方向性も微妙にずれてきていると感じます。1年以上使って慣れているという利点を捨ててでも、Replitに乗り換えようと決めました。",{"type":27,"tag":28,"props":3266,"children":3267},{},[3268],{"type":32,"value":2783},{"type":27,"tag":28,"props":3270,"children":3271},{},[3272,3273,3279,3281,3288],{"type":32,"value":709},{"type":27,"tag":43,"props":3274,"children":3277},{"href":3275,"rel":3276},"https:\u002F\u002Fkyodx.com\u002Ftag\u002Fsocsaga",[986],[3278],{"type":32,"value":107},{"type":32,"value":3280}," と ",{"type":27,"tag":43,"props":3282,"children":3285},{"href":3283,"rel":3284},"https:\u002F\u002Fkyodx.com\u002Ftag\u002Fsoclicker",[986],[3286],{"type":32,"value":3287},"🔗ソックリッカー",{"type":32,"value":3289}," のReplitによる自校運用も提案していきます。",{"type":27,"tag":74,"props":3291,"children":3293},{"id":3292},"masatolan",[],{"type":27,"tag":145,"props":3295,"children":3297},{"className":3296},[2106],[3298,3299,3312,3313],{"type":32,"value":2109},{"type":27,"tag":145,"props":3300,"children":3302},{"className":3301},[2113],[3303],{"type":27,"tag":43,"props":3304,"children":3307},{"target":2117,"rel":3305,"href":3306},[2119],"https:\u002F\u002Fhb.afl.rakuten.co.jp\u002Fichiba\u002F26ba9fc2.c2fdf85a.26ba9fc3.8edde063\u002F_RTLink57019?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fbook%2F16500601%2F&link_type=hybrid_url&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJoeWJyaWRfdXJsIiwic2l6ZSI6IjI0MHgyNDAiLCJuYW0iOjEsIm5hbXAiOiJ1cCIsImNvbSI6MSwiY29tcCI6ImRvd24iLCJwcmljZSI6MSwiYm9yIjoxLCJjb2wiOjEsImJidG4iOjAsInByb2QiOjAsImFtcCI6ZmFsc2V9",[3308],{"type":27,"tag":87,"props":3309,"children":3311},{"src":3310},"https:\u002F\u002Fthumbnail.image.rakuten.co.jp\u002F@0_mall\u002Fbook\u002Fcabinet\u002F9041\u002F9784844379041.jpg?_ex=240x240",[],{"type":32,"value":2109},{"type":27,"tag":145,"props":3314,"children":3316},{"className":3315},[2130],[3317,3318,3328,3329,3348,3349,3386],{"type":32,"value":2133},{"type":27,"tag":145,"props":3319,"children":3321},{"className":3320},[2137],[3322],{"type":27,"tag":43,"props":3323,"children":3325},{"target":2117,"rel":3324,"href":3306},[2119],[3326],{"type":32,"value":3327},"JavaScriptでいきなり機械学習を遊び倒す本 （技術の泉シリーズ（NextPublishing）） [ まさとらん ]",{"type":32,"value":2133},{"type":27,"tag":145,"props":3330,"children":3332},{"className":3331},[2149],[3333,3336,3338,3341,3343,3346],{"type":27,"tag":74,"props":3334,"children":3335},{},[],{"type":32,"value":3337},"※ 最新WebサービスとJavaScript関連の情報を提供してくれる「まさとらん」さんの記事に、ハダノはいつも助けられています。",{"type":27,"tag":74,"props":3339,"children":3340},{},[],{"type":32,"value":3342},"この本も入口の部分をていねいに教えてくれます。",{"type":27,"tag":74,"props":3344,"children":3345},{},[],{"type":32,"value":3347},"GlitchとReplitに出会えてよかったと思います。",{"type":32,"value":2133},{"type":27,"tag":145,"props":3350,"children":3352},{"className":3351},[2170,2171],[3353,3354,3363,3364,3374,3375,3385],{"type":32,"value":2174},{"type":27,"tag":145,"props":3355,"children":3356},{},[3357],{"type":27,"tag":43,"props":3358,"children":3361},{"className":3359,"target":2117,"rel":3360,"href":3306},[2181,2182],[2119],[3362],{"type":32,"value":2186},{"type":32,"value":2188},{"type":27,"tag":145,"props":3365,"children":3366},{},[3367],{"type":27,"tag":43,"props":3368,"children":3372},{"className":3369,"target":2117,"rel":3370,"href":3371},[2181,2195],[2119],"https:\u002F\u002Faf.moshimo.com\u002Faf\u002Fc\u002Fclick?a_id=3539938&p_id=170&pc_id=185&pl_id=4062&url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2FB08L7LXNDC",[3373],{"type":32,"value":2200},{"type":32,"value":2188},{"type":27,"tag":145,"props":3376,"children":3377},{},[3378],{"type":27,"tag":43,"props":3379,"children":3383},{"className":3380,"target":2117,"rel":3381,"href":3382},[2181,2208],[2119],"https:\u002F\u002Fck.jp.ap.valuecommerce.com\u002Fservlet\u002Freferral?sid=3651993&pid=887949559&vc_url=https%3A%2F%2Fshopping.yahoo.co.jp%2Fsearch%3Ffirst%3D1%26ss_first%3D1%26ts%3D1662382850%26mcr%3D06c8cb50c083cad35f8b6072fe936496%26tab_ex%3Dcommerce%26sretry%3D0%26area%3D13%26astk%3D%26aq%3D%26oq%3D%26p%3DJavaScript%25E3%2581%25A7%25E3%2581%2584%25E3%2581%258D%25E3%2581%25AA%25E3%2582%258A%25E6%25A9%259F%25E6%25A2%25B0%25E5%25AD%25A6%25E7%25BF%2592%25E3%2582%2592%25E9%2581%258A%25E3%2581%25B3%25E5%2580%2592%25E3%2581%2599%25E6%259C%25AC%2B%25EF%25BC%2588%25E6%258A%2580%25E8%25A1%2593%25E3%2581%25AE%25E6%25B3%2589%25E3%2582%25B7%25E3%2583%25AA%25E3%2583%25BC%25E3%2582%25BA%25EF%25BC%2588NextPublishing%25EF%25BC%2589%25EF%25BC%2589%2B%255B%2B%25E3%2581%25BE%25E3%2581%2595%25E3%2581%25A8%25E3%2582%2589%25E3%2582%2593%2B%255D%26sc_i%3Dshp_pc_search_searchBox_2",[3384],{"type":32,"value":2213},{"type":32,"value":2133},{"type":32,"value":2109},{"type":27,"tag":74,"props":3388,"children":3389},{},[],{"type":27,"tag":328,"props":3391,"children":3392},{},[],{"type":27,"tag":28,"props":3394,"children":3395},{},[3396],{"type":27,"tag":43,"props":3397,"children":3398},{"href":2539},[3399],{"type":32,"value":3400},"→　ソックサーガの始め方【自校運用】",{"type":27,"tag":28,"props":3402,"children":3403},{},[3404],{"type":27,"tag":43,"props":3405,"children":3407},{"href":3406},"\u002Farticles\u002Fsoclicker-3",[3408],{"type":32,"value":3409},"→　ソックリッカーの始め方【自校運用】",{"title":8,"searchDepth":2518,"depth":2518,"links":3411},[3412,3415,3419],{"id":3060,"depth":2518,"text":3063,"children":3413},[3414],{"id":3071,"depth":2523,"text":3074},{"id":3101,"depth":2518,"text":3104,"children":3416},[3417,3418],{"id":3126,"depth":2523,"text":3129},{"id":3154,"depth":2523,"text":3157},{"id":3256,"depth":2518,"text":3259},"content:articles:cloudide-1.md","articles\u002Fcloudide-1.md","articles\u002Fcloudide-1",{"_path":3026,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":3424,"description":3425,"category":3426,"tag":3427,"thumbnail":2544,"createdAt":3428,"updatedAt":3429,"body":3430,"_type":2532,"_id":4612,"_source":2534,"_file":4613,"_stem":4614,"_extension":2537},"プログラミングシステム「ソックサーガ」を作ってみた","ローコードで専門知識不要、個性が出せるので評価しやすく、共同制作もできるコンテンツプログラミングシステム",[12],[16,17,15,18,19],"2022\u002F5\u002F5","2022\u002F6\u002F29",{"type":24,"children":3431,"toc":4599},[3432,3437,3446,3449,3455,3470,3475,3486,3491,3494,3500,3505,3510,3513,3518,3523,3526,3557,3562,3567,3578,3581,3587,3593,3607,3612,3617,3620,3626,3629,3638,3643,3648,3651,3712,3715,3720,3725,3730,3733,3738,3741,3746,3749,3755,3758,3768,3773,3788,3791,3799,3808,3813,3825,3838,3875,3878,3883,3886,3899,3902,3908,3915,3933,3942,3948,4204,4210,4238,4244,4308,4314,4376,4381,4386,4390,4396,4410,4413,4418,4421,4426,4431,4488,4492,4585,4588,4591],{"type":27,"tag":28,"props":3433,"children":3434},{},[3435],{"type":32,"value":3436},"　この記事では、新しい中学校プログラミング教育に対応するシステム「ソックサーガ」を紹介します。ソックリッカー制作の経験を活かし、最新技術をふんだんに取りいれて作りました。ローコードで専門知識不要、個性が出せるので評価しやすく、共同制作もできるコンテンツプログラミングシステムをめざしました。未履修問題の解決に役立つかどうか、お確かめください。",{"type":27,"tag":28,"props":3438,"children":3439},{"style":63},[3440,3441],{"type":32,"value":66},{"type":27,"tag":43,"props":3442,"children":3444},{"href":3443},"#socsagademo",[3445],{"type":32,"value":72},{"type":27,"tag":74,"props":3447,"children":3448},{},[],{"type":27,"tag":78,"props":3450,"children":3452},{"id":3451},"中学校プログラミング教育は未履修問題が心配",[3453],{"type":32,"value":3454},"中学校プログラミング教育は未履修問題が心配！？",{"type":27,"tag":28,"props":3456,"children":3457},{},[3458,3460,3468],{"type":32,"value":3459},"　2021年度から中学校プログラミング教育が大きく変わりました。従来の「ディジタル作品づくり」から、「",{"type":27,"tag":810,"props":3461,"children":3462},{},[3463],{"type":27,"tag":55,"props":3464,"children":3465},{},[3466],{"type":32,"value":3467},"ネットワークを利用した双方向性のあるコンテンツのプログラミング",{"type":32,"value":3469},"による問題の解決」となったのです。",{"type":27,"tag":28,"props":3471,"children":3472},{},[3473],{"type":32,"value":3474},"　ネットワークがらみのプログラミングは、環境構築の困難さに加え、通信の遅れを考慮した非同期処理・競合解決、セキュリティ対策、OS・ブラウザ・言語の多様性への対応も必要となり、かなりハードルが高くなります。一般的にPHPなどの専用言語を用いたサーバーサイドプログラミングも必要になります。",{"type":27,"tag":28,"props":3476,"children":3477},{},[3478,3479],{"type":32,"value":1688},{"type":27,"tag":43,"props":3480,"children":3483},{"href":3481,"rel":3482},"https:\u002F\u002Fwww.watch.impress.co.jp\u002Fkodomo_it\u002Fnews\u002F1159054.html",[986],[3484],{"type":32,"value":3485},"🔗 「ネットワーク」に「双方向」!?　倍増するプログラミングの学習内容に中学校の現場はどう対応するのか",{"type":27,"tag":28,"props":3487,"children":3488},{},[3489],{"type":32,"value":3490},"　これに対応する教材はたいへん少ないのが現状です。",{"type":27,"tag":74,"props":3492,"children":3493},{},[],{"type":27,"tag":138,"props":3495,"children":3497},{"id":3496},"双方向性のあるコンテンツとは",[3498],{"type":32,"value":3499},"双方向性のあるコンテンツとは？",{"type":27,"tag":28,"props":3501,"children":3502},{},[3503],{"type":32,"value":3504},"　双方向性のあるコンテンツとは、「入力に応答する、人間にとって意味のある情報の内容」です。ロボットを動かす情報はコンテンツではないし、プレゼンや動画などは双方向性のないコンテンツです。さらにコンテンツには、「デジタル化された文字，音声，静止画，動画などのデータを複合化」することが求められています。",{"type":27,"tag":28,"props":3506,"children":3507},{},[3508],{"type":32,"value":3509},"　現代、作品・製品の多くがクリエーターとエンジニアの協力によって生まれています。どちらかといえば、双方向性はエンジニアの比重が、コンテンツはクリエーターの比重が大きいと言えます。もし両者の敷居を低くすることができれば、作品の質は飛躍的に向上するはずです。",{"type":27,"tag":74,"props":3511,"children":3512},{},[],{"type":27,"tag":138,"props":3514,"children":3516},{"id":3515},"技術の教科書が抱える深刻な問題",[3517],{"type":32,"value":3515},{"type":27,"tag":28,"props":3519,"children":3520},{},[3521],{"type":32,"value":3522},"　技術の教科書には５つの実習例が出ていますが、どれも深刻な問題を抱えています。",{"type":27,"tag":74,"props":3524,"children":3525},{},[],{"type":27,"tag":35,"props":3527,"children":3528},{},[3529,3534,3549],{"type":27,"tag":39,"props":3530,"children":3531},{},[3532],{"type":32,"value":3533},"『チャット』・『タイピング練習』は、コンテンツが利用者まかせで貧弱であり、作り手から提供される情報がない。",{"type":27,"tag":39,"props":3535,"children":3536},{},[3537,3539,3547],{"type":32,"value":3538},"『ルート検索』・『英単語の発音チェック』は、魅力的なコンテンツではあるが、外部プログラムを呼び出して使っているだけであり、ほぼ何もプログラミングしていない。つまり、問題解決にプログラムを使っているが",{"type":27,"tag":810,"props":3540,"children":3541},{},[3542],{"type":27,"tag":55,"props":3543,"children":3544},{},[3545],{"type":32,"value":3546},"作ってはいない",{"type":32,"value":3548},"。",{"type":27,"tag":39,"props":3550,"children":3551},{},[3552,3554],{"type":32,"value":3553},"『防災地図』は、魅力的なコンテンツを双方向的に操作できる可能性があるという点ですばらしい。ただ、望む動作をさせようとした場合、直接 scriptタグ内を正確に書き換える必要がある。数時間の実習で理解して完成させるのは、生徒も教師も不可能に近い。\n",{"type":27,"tag":74,"props":3555,"children":3556},{},[],{"type":27,"tag":28,"props":3558,"children":3559},{},[3560],{"type":32,"value":3561},"　『防災地図』以外の4つのアプリは、Scratch の利用を前提としています。小学生のプログラミング体験にはよくても、本格的な問題解決には向きません。本命は、高速・柔軟で共有・再利用できるテキストプログラミングです。いずれにせよ、「アイディアを形にするプロセス」が難しすぎたり、簡単でも制約が多すぎたりすれば、どの生徒の作品も同じようなものになり、評価が困難になるでしょう。",{"type":27,"tag":28,"props":3563,"children":3564},{},[3565],{"type":32,"value":3566},"　このように、技術の教科書にある5つの実習例は、どれも深刻な問題を抱え、実施も評価も困難です。高い理想に現実が追い付かず、このままでは、ほとんどの中学校で「未履修問題」が発生してしまいます。ITエンジニアからも「教えられる先生はいるのか？という課題」が指摘されました。",{"type":27,"tag":28,"props":3568,"children":3569},{},[3570,3571],{"type":32,"value":1688},{"type":27,"tag":43,"props":3572,"children":3575},{"href":3573,"rel":3574},"https:\u002F\u002Fqiita.com\u002FeXpresser\u002Fitems\u002F1764c2801a1e036f2c50?utm_source=Qiita%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%B9&utm_campaign=fd989cefdb-Qiita_newsletter_469_07_07_2021&utm_medium=email&utm_term=0_e44feaa081-fd989cefdb-34321993",[986],[3576],{"type":32,"value":3577},"🔗 中学校の技術科の教科書(情報分野)が進歩していた件",{"type":27,"tag":74,"props":3579,"children":3580},{},[],{"type":27,"tag":78,"props":3582,"children":3584},{"id":3583},"プログラミングシステムソックサーガで解決",[3585],{"type":32,"value":3586},"プログラミングシステム「ソックサーガ」で解決",{"type":27,"tag":138,"props":3588,"children":3590},{"id":3589},"ネットワークプログラミングはクラウド統合開発環境で解決",[3591],{"type":32,"value":3592},"ネットワークプログラミングは、クラウド統合開発環境で解決",{"type":27,"tag":28,"props":3594,"children":3595},{},[3596,3598,3605],{"type":32,"value":3597},"　ネットワークを利用したプログラミングをしようとすると、テキストエディタで編集→ローカルファイルとして保存→アップロード→ブラウザで確認という手順が必要となり、セキュリティの問題もからみ、煩雑でした。それを解決するのが ",{"type":27,"tag":43,"props":3599,"children":3602},{"href":3600,"rel":3601},"https:\u002F\u002Fwww.naka-sys.okinawa\u002Freplit-used\u002F",[986],[3603],{"type":32,"value":3604},"🔗Replit（リプリット）",{"type":32,"value":3606}," などの「クラウド統合開発環境」です。",{"type":27,"tag":28,"props":3608,"children":3609},{},[3610],{"type":32,"value":3611},"　Replit の上でWebアプリを動かすことで、ビジュアルに複合コンテンツを作り、最小限のコードで双方向性を持たせるシステムを作ってみました。それが SocSaga です。即、サーガ（冒険物語）にいざなう…との願いをこめました。",{"type":27,"tag":28,"props":3613,"children":3614},{},[3615],{"type":32,"value":3616},"　SocSaga を使えば、ローカルファイルを管理する必要がなく、環境構築の手間なしに直接Web上のファイルを編集でき、作品の中身と動作のロジックに集中することができます。　",{"type":27,"tag":74,"props":3618,"children":3619},{},[],{"type":27,"tag":138,"props":3621,"children":3623},{"id":3622},"コンテンツ作りはビジュアルhtmlエディタで解決",[3624],{"type":32,"value":3625},"コンテンツ作りは、ビジュアルHTMLエディタで解決",{"type":27,"tag":74,"props":3627,"children":3628},{},[],{"type":27,"tag":28,"props":3630,"children":3631},{},[3632,3637],{"type":27,"tag":87,"props":3633,"children":3636},{"src":3634,"alt":3635,"width":91},"\u002Fimg\u002Fsocsaga02.svg","socpad",[],{"type":32,"value":709},{"type":27,"tag":28,"props":3639,"children":3640},{},[3641],{"type":32,"value":3642},"　HTMLの文法をマスターするには、相当の時間がかかります。ビジュアルHTMLエディタSocPadの出番です。",{"type":27,"tag":28,"props":3644,"children":3645},{},[3646],{"type":32,"value":3647},"　ソックサーガ用SocPadは、ソックリッカー用SocPadを流用したものです。簡易ワープロ「ワードパッド」に似た操作で簡単です。見たとおりにHTML編集ができます。画像をReplitにアップロードして挿入したり、リンクを挿入したりできるので、メディアを複合化したホームページとして使えます。",{"type":27,"tag":74,"props":3649,"children":3650},{},[],{"type":27,"tag":35,"props":3652,"children":3653},{},[3654,3659,3670,3691],{"type":27,"tag":39,"props":3655,"children":3656},{},[3657],{"type":32,"value":3658},"[保存] ボタンでFirebaseのデータベースに保存するかわりに、[ソース] ボタンを使い、指示に従って直接HTMLファイル内に貼り付ける。HTMLの文法を知らなくても、見たとおりにHTML編集ができる。",{"type":27,"tag":39,"props":3660,"children":3661},{},[3662,3668],{"type":27,"tag":527,"props":3663,"children":3665},{"className":3664},[],[3666],{"type":32,"value":3667},"\u003Csection>\u003C\u002Fsection>",{"type":32,"value":3669}," を追加すれば、新規スライドが追加される。",{"type":27,"tag":39,"props":3671,"children":3672},{},[3673,3675,3681,3683,3689],{"type":32,"value":3674},"sectionタグ内（",{"type":27,"tag":527,"props":3676,"children":3678},{"className":3677},[],[3679],{"type":32,"value":3680},"\u003Csection> ",{"type":32,"value":3682},"と",{"type":27,"tag":527,"props":3684,"children":3686},{"className":3685},[],[3687],{"type":32,"value":3688}," \u003C\u002Fsection>",{"type":32,"value":3690}," の間の部分）にソースを貼り付けると、スライドが保存される。",{"type":27,"tag":39,"props":3692,"children":3693},{},[3694,3696,3702,3704,3710],{"type":32,"value":3695},"別のスライドを編集したいときは、 ",{"type":27,"tag":527,"props":3697,"children":3699},{"className":3698},[],[3700],{"type":32,"value":3701},"～id=\"henshu\">",{"type":32,"value":3703},"（番号）",{"type":27,"tag":527,"props":3705,"children":3707},{"className":3706},[],[3708],{"type":32,"value":3709},"\u003C\u002Fspan>\u003C!--　編集するスライド番号を入れる　-->",{"type":32,"value":3711},"　の番号部分を書き換え、スライド編集エリアの上の ↻ ボタンで更新する。更新すると、編集中のものは消えるので、ソースを貼り付けたか必ず確認すること。心配であれば、メモ帳などにもソースを貼り付けておくとよい。",{"type":27,"tag":74,"props":3713,"children":3714},{},[],{"type":27,"tag":28,"props":3716,"children":3717},{},[3718],{"type":32,"value":3719},"…以上を繰り返して、スライドを１枚１枚作ってゆきます。",{"type":27,"tag":28,"props":3721,"children":3722},{},[3723],{"type":32,"value":3724},"　スライドを作ったら、「編集エリア」の下の「実行エリア」でボタンを押してスライドを切り換えてみます。切り換え動作の設定は、次の『双方向性は、4色ボタン操作で解決』を見てください。",{"type":27,"tag":28,"props":3726,"children":3727},{},[3728],{"type":32,"value":3729},"　すべてのスライドの内容・動作が完成したら、スライド番号部分に ０ を入れます。「実行エリア」だけが表示されるようになるので、URLを公開して人に見せることができます。",{"type":27,"tag":74,"props":3731,"children":3732},{},[],{"type":27,"tag":28,"props":3734,"children":3735},{},[3736],{"type":32,"value":3737},"※ ソックリッカーでは、Firebase の Realtime Database にHTMLを保存し、Storage に画像をアップロードしました。ソックサーガでは、Firebase は使いません。授業配信アプリでは、ユーザーにソースコードや画像素材等を見せる必要はありません。しかし、プログラミング学習では、Replit上ではっきり見える形で取り扱わせる方がよいと考えました。sectionタグ内にソースをはりつけさせるのは、そのためなのです。",{"type":27,"tag":74,"props":3739,"children":3740},{},[],{"type":27,"tag":28,"props":3742,"children":3743},{},[3744],{"type":32,"value":3745},"※ ソックサーガは、「生徒にWebアプリを作らせる」Webアプリです。コンテンツ編集・アプリ実行のためのJavaScriptは、ルートのssscript.jsにまとめて、生徒にさわらせないようにしています。編集モードから実行モードへの切り替えを「スライド番号部分に 0 を入れる」方法にしたのは、評価や指導をやりやすくするためです。",{"type":27,"tag":74,"props":3747,"children":3748},{},[],{"type":27,"tag":138,"props":3750,"children":3752},{"id":3751},"双方向性は4色ボタン操作で解決",[3753],{"type":32,"value":3754},"双方向性は、4色ボタン操作で解決",{"type":27,"tag":74,"props":3756,"children":3757},{},[],{"type":27,"tag":28,"props":3759,"children":3760},{},[3761,3766],{"type":27,"tag":87,"props":3762,"children":3765},{"src":3763,"alt":3764,"width":91},"\u002Fimg\u002Fsocsaga04.svg","socsaga04",[],{"type":32,"value":3767},"　　",{"type":27,"tag":28,"props":3769,"children":3770},{},[3771],{"type":32,"value":3772},"　ソックリッカーでは、TVのリモコンと同じ4色ボタンで投票します。ソックサーガも4色ボタンで操作することにしました。",{"type":27,"tag":28,"props":3774,"children":3775},{},[3776,3778,3786],{"type":32,"value":3777},"　①動作は4色のボタンに割り当て、②飛び先は class属性で指定し、③必要に応じて動作を拡張する という ",{"type":27,"tag":810,"props":3779,"children":3780},{},[3781],{"type":27,"tag":55,"props":3782,"children":3783},{},[3784],{"type":32,"value":3785},"ローコードプログラミング",{"type":32,"value":3787}," の手法で行います。 「順\n次・分岐・反復」のスライド移動の基本命令は、 xgo(数); という関数で、数によって動作を変えるようにしています。",{"type":27,"tag":74,"props":3789,"children":3790},{},[],{"type":27,"tag":35,"props":3792,"children":3793},{},[3794],{"type":27,"tag":39,"props":3795,"children":3796},{},[3797],{"type":32,"value":3798},"sectionタグには、デフォルト(規定値)で、",{"type":27,"tag":28,"props":3800,"children":3801},{},[3802],{"type":27,"tag":527,"props":3803,"children":3805},{"className":3804},[],[3806],{"type":32,"value":3807},"data-nav=\"nav0:xp+'／'+xpsum; nav1:↑;xgo(-8); nav2:←;xgo(-1); nav3:→;xgo(1);nav4:↓;xgo(8);\"",{"type":27,"tag":28,"props":3809,"children":3810},{},[3811],{"type":32,"value":3812},"というカスタムデータ属性が設定されている。",{"type":27,"tag":35,"props":3814,"children":3815},{},[3816],{"type":27,"tag":39,"props":3817,"children":3818},{},[3819],{"type":27,"tag":527,"props":3820,"children":3822},{"className":3821},[],[3823],{"type":32,"value":3824},"\u003Csection data-nav=\"nav1:先頭へ;xgo(-9);\">",{"type":27,"tag":28,"props":3826,"children":3827},{},[3828,3830,3836],{"type":32,"value":3829},"とすれば、青色のボタン1 だけ、先頭スライドへ移動するよう変更され、他のボタンはデフォルトのままとなる。nav数 のあとに コロン(:)、ボタン文字 のあとセミコロン(;)、そのあとは 命令1;命令2;命令3;…のように各命令のあとにセミコロンを付ける。二重引用符の中で引用符を使うときは、",{"type":27,"tag":527,"props":3831,"children":3833},{"className":3832},[],[3834],{"type":32,"value":3835},"\"nav0:xp+'／'+～\"",{"type":32,"value":3837}," のように単一引用符を使うこと。",{"type":27,"tag":35,"props":3839,"children":3840},{},[3841,3862],{"type":27,"tag":39,"props":3842,"children":3843},{},[3844,3846,3852,3854,3860],{"type":32,"value":3845},"各章の始まりのスライドのsectionタグに ",{"type":27,"tag":527,"props":3847,"children":3849},{"className":3848},[],[3850],{"type":32,"value":3851},"class=\"hp\"",{"type":32,"value":3853}," を入れておけば、デフォルトのままでも「プレゼンテーション」は十分可能。class属性を複数指定する場合は、",{"type":27,"tag":527,"props":3855,"children":3857},{"className":3856},[],[3858],{"type":32,"value":3859},"class=\"hp bk3\"",{"type":32,"value":3861}," のように半角スペースをはさむこと。",{"type":27,"tag":39,"props":3863,"children":3864},{},[3865,3867,3873],{"type":32,"value":3866},"Replitのコードエディタは、行番号の右の ▼ をクリックすることで折りたたむことができる。",{"type":27,"tag":527,"props":3868,"children":3870},{"className":3869},[],[3871],{"type":32,"value":3872},"\u003Csection",{"type":32,"value":3874}," の行を折りたたんでスライドの中身を隠すと、属性の指定がやりやすい。",{"type":27,"tag":74,"props":3876,"children":3877},{},[],{"type":27,"tag":28,"props":3879,"children":3880},{},[3881],{"type":32,"value":3882},"　ソックサーガは、Web標準技術に基づいたテキストプログラミングで主要な機能をラップすることで、入口が広く奥が深い学習を実現しました。将来にわたり役立つ情報活用能力が培われるでしょう。",{"type":27,"tag":74,"props":3884,"children":3885},{},[],{"type":27,"tag":28,"props":3887,"children":3888},{},[3889,3891,3897],{"type":32,"value":3890},"※ ソックサーガは、プロトタイプを jQuery + Firebase Storage + Mery マクロ で作りました。2年間実際に授業してみて、問題点を洗い出し、Vue.js で書き直しました。「可能な限りWeb標準に従う」ことが大切と痛感しました。そのため、Vueのコンポーネントのかわりに「カスタムデータ属性」を使っています。",{"type":27,"tag":527,"props":3892,"children":3894},{"className":3893},[],[3895],{"type":32,"value":3896},"data-***=\"\"",{"type":32,"value":3898},"のような形式で、制作者が自由に指定できる属性です。独自のデータを入力したり、JavaScriptで処理したりできます。HTMLで定義されているグローバル属性なので、将来的に無駄になりません。",{"type":27,"tag":74,"props":3900,"children":3901},{},[],{"type":27,"tag":138,"props":3903,"children":3905},{"id":3904},"発展的な-ソックサーガ-の使い方-余裕ができたら",[3906],{"type":32,"value":3907},"発展的な ソックサーガ の使い方（※ 余裕ができたら……）",{"type":27,"tag":3909,"props":3910,"children":3912},"h4",{"id":3911},"スライドの背景を指定する",[3913],{"type":32,"value":3914},"① スライドの背景を指定する",{"type":27,"tag":35,"props":3916,"children":3917},{},[3918],{"type":27,"tag":39,"props":3919,"children":3920},{},[3921,3923,3931],{"type":32,"value":3922},"sectionタグのカスタムデータ属性に画像ファイルURLを指定。URLは、",{"type":27,"tag":810,"props":3924,"children":3925},{},[3926],{"type":27,"tag":55,"props":3927,"children":3928},{},[3929],{"type":32,"value":3930},"jisshu\u002Fimg フォルダ内の画像一覧",{"type":32,"value":3932},"の画像を右クリックし、[画像アドレスをコピー]で。",{"type":27,"tag":28,"props":3934,"children":3935},{},[3936],{"type":27,"tag":527,"props":3937,"children":3939},{"className":3938},[],[3940],{"type":32,"value":3941},"data-bg=\"https:\u002F\u002Fsocsaga.hadano3.repl.co\u002Fjisshu\u002Fimg\u002Fvenndiag.svg\"",{"type":27,"tag":3909,"props":3943,"children":3945},{"id":3944},"x関数x変数でボタン動作を拡張する",[3946],{"type":32,"value":3947},"② x関数・x変数でボタン動作を拡張する",{"type":27,"tag":35,"props":3949,"children":3950},{},[3951,4004,4025,4038,4186,4191],{"type":27,"tag":39,"props":3952,"children":3953},{},[3954,3956,3962,3964,3970,3972,3978,3980,3986,3988,3994,3996,4002],{"type":32,"value":3955},"メッセージ表示：",{"type":27,"tag":527,"props":3957,"children":3959},{"className":3958},[],[3960],{"type":32,"value":3961},"xmsg('メッセージ','入力文');",{"type":32,"value":3963}," 入力文を省略したら ",{"type":27,"tag":527,"props":3965,"children":3967},{"className":3966},[],[3968],{"type":32,"value":3969},"alert",{"type":32,"value":3971}," 、",{"type":27,"tag":527,"props":3973,"children":3975},{"className":3974},[],[3976],{"type":32,"value":3977},"'OK'",{"type":32,"value":3979},"なら ",{"type":27,"tag":527,"props":3981,"children":3983},{"className":3982},[],[3984],{"type":32,"value":3985},"confirm",{"type":32,"value":3987}," 、それ以外は ",{"type":27,"tag":527,"props":3989,"children":3991},{"className":3990},[],[3992],{"type":32,"value":3993},"prompt",{"type":32,"value":3995}," と同じ動作をする。戻り値は",{"type":27,"tag":527,"props":3997,"children":3999},{"className":3998},[],[4000],{"type":32,"value":4001},"xm",{"type":32,"value":4003},"に代入される。",{"type":27,"tag":39,"props":4005,"children":4006},{},[4007,4009,4015,4017,4023],{"type":32,"value":4008},"乱数：",{"type":27,"tag":527,"props":4010,"children":4012},{"className":4011},[],[4013],{"type":32,"value":4014},"xran(数);",{"type":32,"value":4016}," 1～数 までのランダムな自然数を作る。数を省略したら 6 がはいりサイコロに使える。戻り値は、",{"type":27,"tag":527,"props":4018,"children":4020},{"className":4019},[],[4021],{"type":32,"value":4022},"xr",{"type":32,"value":4024}," に。",{"type":27,"tag":39,"props":4026,"children":4027},{},[4028,4030,4036],{"type":32,"value":4029},"待機：",{"type":27,"tag":527,"props":4031,"children":4033},{"className":4032},[],[4034],{"type":32,"value":4035},"xwait(数);",{"type":32,"value":4037}," 数秒間待機してから次の命令を実行する。",{"type":27,"tag":39,"props":4039,"children":4040},{},[4041,4043,4049,4051,4057,4059,4065,4067,4073,4075,4081,4083,4089,4091,4097,4099,4105,4107,4113,4115,4121,4123,4129,4131,4137,4139,4145,4147,4153,4155,4161,4163,4169,4170,4176,4178,4184],{"type":32,"value":4042},"x変数：",{"type":27,"tag":527,"props":4044,"children":4046},{"className":4045},[],[4047],{"type":32,"value":4048},"xc",{"type":32,"value":4050},"【クリックしたボタン番号】、",{"type":27,"tag":527,"props":4052,"children":4054},{"className":4053},[],[4055],{"type":32,"value":4056},"xe",{"type":32,"value":4058},"【エネルギー】、",{"type":27,"tag":527,"props":4060,"children":4062},{"className":4061},[],[4063],{"type":32,"value":4064},"xf",{"type":32,"value":4066},"【ファイル名】、",{"type":27,"tag":527,"props":4068,"children":4070},{"className":4069},[],[4071],{"type":32,"value":4072},"xg",{"type":32,"value":4074},"【移動後のスライドナンバー】、",{"type":27,"tag":527,"props":4076,"children":4078},{"className":4077},[],[4079],{"type":32,"value":4080},"xp",{"type":32,"value":4082},"【現在のスライドナンバー】、\n",{"type":27,"tag":527,"props":4084,"children":4086},{"className":4085},[],[4087],{"type":32,"value":4088},"xpsum",{"type":32,"value":4090},"【スライド総数】、",{"type":27,"tag":527,"props":4092,"children":4094},{"className":4093},[],[4095],{"type":32,"value":4096},"xs",{"type":32,"value":4098},"【スコア】、",{"type":27,"tag":527,"props":4100,"children":4102},{"className":4101},[],[4103],{"type":32,"value":4104},"xt",{"type":32,"value":4106},"【ターン数】、",{"type":27,"tag":527,"props":4108,"children":4110},{"className":4109},[],[4111],{"type":32,"value":4112},"xu",{"type":32,"value":4114},"【ユーザーデータ】、",{"type":27,"tag":527,"props":4116,"children":4118},{"className":4117},[],[4119],{"type":32,"value":4120},"xuu[数]",{"type":32,"value":4122},"【ユーザーデータ配列】…状態フラグとして使うのに便利な関数がある｛",{"type":27,"tag":527,"props":4124,"children":4126},{"className":4125},[],[4127],{"type":32,"value":4128},"xuuon(数);",{"type":32,"value":4130}," フラグオン、",{"type":27,"tag":527,"props":4132,"children":4134},{"className":4133},[],[4135],{"type":32,"value":4136},"xuuoff(数);",{"type":32,"value":4138}," フラグオフ、",{"type":27,"tag":527,"props":4140,"children":4142},{"className":4141},[],[4143],{"type":32,"value":4144},"xuutog(数);",{"type":32,"value":4146}," フラグ反転｝、",{"type":27,"tag":527,"props":4148,"children":4150},{"className":4149},[],[4151],{"type":32,"value":4152},"xcc[数]",{"type":32,"value":4154},"【ボタン無効化配列】…",{"type":27,"tag":527,"props":4156,"children":4158},{"className":4157},[],[4159],{"type":32,"value":4160},"xuu",{"type":32,"value":4162},"と同様な関数で",{"type":27,"tag":527,"props":4164,"children":4166},{"className":4165},[],[4167],{"type":32,"value":4168},"xcc[0]",{"type":32,"value":3682},{"type":27,"tag":527,"props":4171,"children":4173},{"className":4172},[],[4174],{"type":32,"value":4175},"xcc[番]",{"type":32,"value":4177},"をオンでボタン無効化、",{"type":27,"tag":527,"props":4179,"children":4181},{"className":4180},[],[4182],{"type":32,"value":4183},"xccreset();",{"type":32,"value":4185}," ですべて有効化。",{"type":27,"tag":39,"props":4187,"children":4188},{},[4189],{"type":32,"value":4190},"JavaScriptの命令がほぼ使えるが、コード量節約のため、ショートハンドを使うとよい。 if文のかわりに→三項演算子…など。",{"type":27,"tag":39,"props":4192,"children":4193},{},[4194,4196,4202],{"type":32,"value":4195},"テストボタンの ",{"type":27,"tag":527,"props":4197,"children":4199},{"className":4198},[],[4200],{"type":32,"value":4201},"data-test = “命令文”",{"type":32,"value":4203}," を書き換えて、ボタン動作のテストができる。",{"type":27,"tag":3909,"props":4205,"children":4207},{"id":4206},"アニメーションで画面に躍動感を与える",[4208],{"type":32,"value":4209},"③ アニメーションで画面に躍動感を与える",{"type":27,"tag":35,"props":4211,"children":4212},{},[4213,4233],{"type":27,"tag":39,"props":4214,"children":4215},{},[4216,4218,4224,4226,4232],{"type":32,"value":4217},"x関数の ",{"type":27,"tag":527,"props":4219,"children":4221},{"className":4220},[],[4222],{"type":32,"value":4223},"xanim(オブジェクト);",{"type":32,"value":4225}," でスライドの中の要素を時間を追って変化させることができる。アニメーションオブジェクトの書式は、anime.js に従う。戻り値は、",{"type":27,"tag":527,"props":4227,"children":4229},{"className":4228},[],[4230],{"type":32,"value":4231},"xa",{"type":32,"value":4024},{"type":27,"tag":39,"props":4234,"children":4235},{},[4236],{"type":32,"value":4237},"Wick Editor というフリーのWebアプリで手軽に Gifアニメ を作ることができる。軽量化して使うとよい。",{"type":27,"tag":3909,"props":4239,"children":4241},{"id":4240},"同じフォルダのsocsagaファイルを-x関数で呼び出しクラス全員で共同制作する",[4242],{"type":32,"value":4243},"④ 同じフォルダのSocSagaファイルを x関数で呼び出し、クラス全員で共同制作する",{"type":27,"tag":35,"props":4245,"children":4246},{},[4247,4276],{"type":27,"tag":39,"props":4248,"children":4249},{},[4250,4252,4258,4260,4266,4268,4274],{"type":32,"value":4251},"game03.html のスライド10番で ",{"type":27,"tag":527,"props":4253,"children":4255},{"className":4254},[],[4256],{"type":32,"value":4257},"xborrow(game05);",{"type":32,"value":4259}," を実行すると、game05.htmlが呼び出され、",{"type":27,"tag":527,"props":4261,"children":4263},{"className":4262},[],[4264],{"type":32,"value":4265},"xback();",{"type":32,"value":4267}," で game03.html のスライド11番に戻る。",{"type":27,"tag":527,"props":4269,"children":4271},{"className":4270},[],[4272],{"type":32,"value":4273},"xbuy(game07);",{"type":32,"value":4275}," を実行すると、game07.htmlに接続する（戻ってこない）。",{"type":27,"tag":39,"props":4277,"children":4278},{},[4279,4285,4287,4293,4294,4300,4302],{"type":27,"tag":527,"props":4280,"children":4282},{"className":4281},[],[4283],{"type":32,"value":4284},"xborrow",{"type":32,"value":4286},"、",{"type":27,"tag":527,"props":4288,"children":4290},{"className":4289},[],[4291],{"type":32,"value":4292},"xback",{"type":32,"value":4286},{"type":27,"tag":527,"props":4295,"children":4297},{"className":4296},[],[4298],{"type":32,"value":4299},"xbuy",{"type":32,"value":4301}," で他のファイルを呼び出すとき、次の x変数の値は引き継がれる。→ ",{"type":27,"tag":527,"props":4303,"children":4305},{"className":4304},[],[4306],{"type":32,"value":4307},"xs　xe　xt　xu　xuu[]",{"type":27,"tag":3909,"props":4309,"children":4311},{"id":4310},"htmlファイル本体をカスタマイズhtmlcssjavascript-を書き換えする",[4312],{"type":32,"value":4313},"⑤ HTMLファイル本体をカスタマイズ（html・css・JavaScript を書き換え）する",{"type":27,"tag":35,"props":4315,"children":4316},{},[4317,4338,4351,4371],{"type":27,"tag":39,"props":4318,"children":4319},{},[4320,4322,4328,4330,4336],{"type":32,"value":4321},"文字の大きさ→ ",{"type":27,"tag":527,"props":4323,"children":4325},{"className":4324},[],[4326],{"type":32,"value":4327},"--fontvw: 1.5vw;",{"type":32,"value":4329},"　、",{"type":27,"tag":527,"props":4331,"children":4333},{"className":4332},[],[4334],{"type":32,"value":4335},"methods:",{"type":32,"value":4337}," に新しい x関数 を追加…など。",{"type":27,"tag":39,"props":4339,"children":4340},{},[4341,4343,4349],{"type":32,"value":4342},"スライド内容の一時的な変更は、x関数の ",{"type":27,"tag":527,"props":4344,"children":4346},{"className":4345},[],[4347],{"type":32,"value":4348},"xdisp(元の語,置換語,回数);",{"type":32,"value":4350}," で可能。",{"type":27,"tag":39,"props":4352,"children":4353},{},[4354,4356,4362,4363,4369],{"type":32,"value":4355},"SocPad以外で作ったHTMLは、原則SocPadでの編集はできないが、sectionタグ内に貼り付けることは可能。セキュリティ上の問題がなければ、iframeタグを使って他サイトのコンテンツを埋め込むことができる。",{"type":27,"tag":527,"props":4357,"children":4359},{"className":4358},[],[4360],{"type":32,"value":4361},"--framewidth",{"type":32,"value":3682},{"type":27,"tag":527,"props":4364,"children":4366},{"className":4365},[],[4367],{"type":32,"value":4368},"--frameheight",{"type":32,"value":4370},"で幅と高さを指定できる。",{"type":27,"tag":39,"props":4372,"children":4373},{},[4374],{"type":32,"value":4375},"無料ソフトでもCG作成ができる。Blender で3Dモデルを、Effekseer でビジュアルエフェクトを、Unity でアニメやゲームを作ることができる。Sketchfab などの CGコンテンツ共有サイトを利用することで、登録・公開ができる。",{"type":27,"tag":3909,"props":4377,"children":4379},{"id":4378},"このような発展的な使い方により",[4380],{"type":32,"value":4378},{"type":27,"tag":28,"props":4382,"children":4383},{},[4384],{"type":32,"value":4385},"　プレゼンだけでなく、クイズ・アドベンチャーゲーム・脱出ゲーム・すごろくなども作れます。",{"type":27,"tag":74,"props":4387,"children":4389},{"id":4388},"socsagademo",[],{"type":27,"tag":138,"props":4391,"children":4393},{"id":4392},"まとめ-ソックサーガ-で-双方向性のあるコンテンツのプログラミング-はバッチリ",[4394],{"type":32,"value":4395},"【まとめ】 ソックサーガ で 双方向性のあるコンテンツのプログラミング はバッチリ！",{"type":27,"tag":28,"props":4397,"children":4398},{},[4399,4401,4408],{"type":32,"value":4400},"　ソックリッカー制作の経験を活かし、最新技術をふんだんに取りいれて作ったのが ",{"type":27,"tag":810,"props":4402,"children":4403},{},[4404],{"type":27,"tag":55,"props":4405,"children":4406},{},[4407],{"type":32,"value":90},{"type":32,"value":4409},"です。ローコードなので専門知識不要、「ディジタル作品づくり」＋α で取り組めます。５つの実習例とは違い、個性が出せるので評価しやすく、共同制作もできます。",{"type":27,"tag":74,"props":4411,"children":4412},{},[],{"type":27,"tag":28,"props":4414,"children":4415},{},[4416],{"type":32,"value":4417},"　他教科や行事のまとめ・発表を兼ねたテーマにすれば、時間数不足も解消されます。無料で、自校運用できて安心で、かゆいところに手が届くシステムは、そうそうないと自負しています。",{"type":27,"tag":74,"props":4419,"children":4420},{},[],{"type":27,"tag":28,"props":4422,"children":4423},{},[4424],{"type":32,"value":4425},"※ ページが表示されなければ、リロード（↻更新）してください。",{"type":27,"tag":28,"props":4427,"children":4428},{},[4429],{"type":32,"value":4430},"※【注意】Internet Explorer 以外のモダンブラウザー（Chrome,Firefox,Safari,…）で、横置き画面で見ること！",{"type":27,"tag":35,"props":4432,"children":4433},{},[4434,4445,4456,4467,4478],{"type":27,"tag":39,"props":4435,"children":4436},{},[4437,4438],{"type":32,"value":1688},{"type":27,"tag":43,"props":4439,"children":4442},{"href":4440,"rel":4441},"https:\u002F\u002Fkyodx.com\u002Fsshelp.html",[986],[4443],{"type":32,"value":4444},"🔗 ソックサーガで作った、「ソックサーガの紹介Webアプリ」",{"type":27,"tag":39,"props":4446,"children":4447},{},[4448,4449],{"type":32,"value":1688},{"type":27,"tag":43,"props":4450,"children":4453},{"href":4451,"rel":4452},"https:\u002F\u002Fkyodx.com\u002Fimg\u002Fsocsaga.pdf",[986],[4454],{"type":32,"value":4455},"🔗 ソックサーガの紹介（印刷用）",{"type":27,"tag":39,"props":4457,"children":4458},{},[4459,4460],{"type":32,"value":1688},{"type":27,"tag":43,"props":4461,"children":4464},{"href":4462,"rel":4463},"https:\u002F\u002Fkyodx.com\u002Fjisshu\u002Ftango.html",[986],[4465],{"type":32,"value":4466},"🔗 「英単語の発音チェックアプリ+AI作曲」",{"type":27,"tag":39,"props":4468,"children":4469},{},[4470,4471],{"type":32,"value":1688},{"type":27,"tag":43,"props":4472,"children":4475},{"href":4473,"rel":4474},"https:\u002F\u002Fkyodx.com\u002Fjisshu\u002Ftango2.html",[986],[4476],{"type":32,"value":4477},"🔗 「英単語の発音チェックアプリ+AI作曲」Ver2",{"type":27,"tag":39,"props":4479,"children":4480},{},[4481,4482],{"type":32,"value":1688},{"type":27,"tag":43,"props":4483,"children":4485},{"href":1691,"rel":4484},[986],[4486],{"type":32,"value":4487},"🔗 「英単語ゲーム SPELL QUEST」",{"type":27,"tag":74,"props":4489,"children":4491},{"id":4490},"js278",[],{"type":27,"tag":145,"props":4493,"children":4495},{"className":4494},[2106],[4496,4497,4510,4511],{"type":32,"value":2109},{"type":27,"tag":145,"props":4498,"children":4500},{"className":4499},[2113],[4501],{"type":27,"tag":43,"props":4502,"children":4505},{"target":2117,"rel":4503,"href":4504},[2119],"https:\u002F\u002Fhb.afl.rakuten.co.jp\u002Fichiba\u002F26ba9fc2.c2fdf85a.26ba9fc3.8edde063\u002F_RTLink57027?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fbook%2F15761369%2F&link_type=hybrid_url&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJoeWJyaWRfdXJsIiwic2l6ZSI6IjI0MHgyNDAiLCJuYW0iOjEsIm5hbXAiOiJ1cCIsImNvbSI6MSwiY29tcCI6ImRvd24iLCJwcmljZSI6MCwiYm9yIjoxLCJjb2wiOjEsImJidG4iOjAsInByb2QiOjAsImFtcCI6ZmFsc2V9",[4506],{"type":27,"tag":87,"props":4507,"children":4509},{"src":4508},"https:\u002F\u002Fthumbnail.image.rakuten.co.jp\u002F@0_mall\u002Fbook\u002Fcabinet\u002F3682\u002F9784297103682.jpg?_ex=240x240",[],{"type":32,"value":2109},{"type":27,"tag":145,"props":4512,"children":4514},{"className":4513},[2130],[4515,4516,4526,4527,4546,4547,4584],{"type":32,"value":2133},{"type":27,"tag":145,"props":4517,"children":4519},{"className":4518},[2137],[4520],{"type":27,"tag":43,"props":4521,"children":4523},{"target":2117,"rel":4522,"href":4504},[2119],[4524],{"type":32,"value":4525},"JavaScriptコードレシピ集 スグに使えるテクニック278　[ 池田泰延 ]",{"type":32,"value":2133},{"type":27,"tag":145,"props":4528,"children":4530},{"className":4529},[2149],[4531,4534,4536,4539,4541,4544],{"type":27,"tag":74,"props":4532,"children":4533},{},[],{"type":32,"value":4535},"※ Web標準技術は時代とともに進歩しています。",{"type":27,"tag":74,"props":4537,"children":4538},{},[],{"type":32,"value":4540},"ハダノは、jQueryからVue.jsに移行したとき、「イマドキのJavaScriptはこう書くんだ！」とカルチャーショックを受けました。",{"type":27,"tag":74,"props":4542,"children":4543},{},[],{"type":32,"value":4545},"この本は、実践的な最新テクニックを網羅的に学ぶのに役立ちます。",{"type":32,"value":2133},{"type":27,"tag":145,"props":4548,"children":4550},{"className":4549},[2170,2171],[4551,4552,4561,4562,4572,4573,4583],{"type":32,"value":2174},{"type":27,"tag":145,"props":4553,"children":4554},{},[4555],{"type":27,"tag":43,"props":4556,"children":4559},{"className":4557,"target":2117,"rel":4558,"href":4504},[2181,2182],[2119],[4560],{"type":32,"value":2186},{"type":32,"value":2188},{"type":27,"tag":145,"props":4563,"children":4564},{},[4565],{"type":27,"tag":43,"props":4566,"children":4570},{"className":4567,"target":2117,"rel":4568,"href":4569},[2181,2195],[2119],"https:\u002F\u002Faf.moshimo.com\u002Faf\u002Fc\u002Fclick?a_id=3539938&p_id=170&pc_id=185&pl_id=4062&url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2F4297103680",[4571],{"type":32,"value":2200},{"type":32,"value":2188},{"type":27,"tag":145,"props":4574,"children":4575},{},[4576],{"type":27,"tag":43,"props":4577,"children":4581},{"className":4578,"target":2117,"rel":4579,"href":4580},[2181,2208],[2119],"https:\u002F\u002Fck.jp.ap.valuecommerce.com\u002Fservlet\u002Freferral?sid=3651993&pid=887947441&vc_url=https%3A%2F%2Fpaypaymall.yahoo.co.jp%2Fstore%2Fboox%2Fitem%2Fbk-4297103680%2F%3Fsc_i%3Dshp_pc_search_itemlist_shsrg_title",[4582],{"type":32,"value":2213},{"type":32,"value":2133},{"type":32,"value":2109},{"type":27,"tag":74,"props":4586,"children":4587},{},[],{"type":27,"tag":328,"props":4589,"children":4590},{},[],{"type":27,"tag":28,"props":4592,"children":4593},{},[4594],{"type":27,"tag":43,"props":4595,"children":4596},{"href":2539},[4597],{"type":32,"value":4598},"次へ→　ソックサーガの始め方【自校運用】",{"title":8,"searchDepth":2518,"depth":2518,"links":4600},[4601,4605],{"id":3451,"depth":2518,"text":3454,"children":4602},[4603,4604],{"id":3496,"depth":2523,"text":3499},{"id":3515,"depth":2523,"text":3515},{"id":3583,"depth":2518,"text":3586,"children":4606},[4607,4608,4609,4610,4611],{"id":3589,"depth":2523,"text":3592},{"id":3622,"depth":2523,"text":3625},{"id":3751,"depth":2523,"text":3754},{"id":3904,"depth":2523,"text":3907},{"id":4392,"depth":2523,"text":4395},"content:articles:socsaga-1.md","articles\u002Fsocsaga-1.md","articles\u002Fsocsaga-1",{"_path":4616,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":4617,"description":4618,"category":4619,"tag":4620,"thumbnail":4624,"createdAt":4625,"updatedAt":4626,"body":4627,"_type":2532,"_id":5116,"_source":2534,"_file":5117,"_stem":5118,"_extension":2537},"\u002Farticles\u002Fhadano","ハダノのプログラミング遍歴","ハダノがプログラミングに出会ってから教育に活用するようになるまでの過程をざっと振り返り",[12],[15,4621,4622,3044,16,18,4623],"rpa","nurpa","sf","vscodesoc.jpg","2022\u002F4\u002F28","2022\u002F6\u002F1",{"type":24,"children":4628,"toc":5093},[4629,4634,4637,4643,4648,4653,4659,4664,4670,4675,4680,4685,4688,4693,4696,4702,4707,4712,4718,4732,4745,4748,4754,4759,4764,4769,4774,4779,4784,4798,4803,4808,4813,4818,4822,4828,4833,4846,4851,4854,4860,4865,4888,4901,4906,4912,4917,4922,4927,4932,4937,4940,4946,4952,4957,4962,4967,4970,4976,4979,4985,4988,4994,4997,5000],{"type":27,"tag":28,"props":4630,"children":4631},{},[4632],{"type":32,"value":4633},"　この記事では、サンデープログラマとしてのハダノについて、（記憶をたどりながらぼちぼち）紹介していきます。",{"type":27,"tag":74,"props":4635,"children":4636},{},[],{"type":27,"tag":78,"props":4638,"children":4640},{"id":4639},"コンピューティング-プログラミング-の時代",[4641],{"type":32,"value":4642},"コンピューティング ＝ プログラミング の時代",{"type":27,"tag":138,"props":4644,"children":4646},{"id":4645},"プログラマブル関数電卓から",[4647],{"type":32,"value":4645},{"type":27,"tag":28,"props":4649,"children":4650},{},[4651],{"type":32,"value":4652},"　大学生協の新入生向けフェアで、「理系学部生の必需品」として紹介されていた関数電卓を購入しました。ポケットコンピュータという愛称で、ビープ音で「エリーゼのために」を演奏するプログラムを打ち込んだり、宇宙戦艦ゲームを作ったりしました。プログラミングの楽しさにはじめて触れました。",{"type":27,"tag":138,"props":4654,"children":4656},{"id":4655},"メインフレームはfortranで",[4657],{"type":32,"value":4658},"メインフレームはFortranで",{"type":27,"tag":28,"props":4660,"children":4661},{},[4662],{"type":32,"value":4663},"　1年半の教養課程を終え、専門課程に移ると、実験・実習で夜遅くなることが多くなりました。データ解析に大学のメインフレームを使わせてもらうこともありました。Fortranという科学技術計算用の言語でプログラムを組み、カードの束を読み込ませて処理していました。4年生になると、TSS端末で画面を見ながらキーボードで入力できるようになるのでした。",{"type":27,"tag":138,"props":4665,"children":4667},{"id":4666},"_8ビットのマイコンピュータ",[4668],{"type":32,"value":4669},"8ビットのマイコンピュータ",{"type":27,"tag":28,"props":4671,"children":4672},{},[4673],{"type":32,"value":4674},"　個人用の小型コンピュータが「マイコン」と呼ばれていたころ、NEC PC-6001 というお手頃価格のマシンを購入しました。中古のTVをつなぎ、カセットテープにデータを保存しました。時間制限なくコンピュータが使えて興奮したのを覚えています。",{"type":27,"tag":28,"props":4676,"children":4677},{},[4678],{"type":32,"value":4679},"　当時は、ソフトウェア販売は普及していなかったので、コンピュータを使うためには、プログラムを打ち込む必要がありました。マイコン雑誌のプログラムリストを打ち込んだり、改造したりしてゲームなどを楽しむのが一般的でした。",{"type":27,"tag":28,"props":4681,"children":4682},{},[4683],{"type":32,"value":4684},"　ハダノは、そのほかに数理生物学で使うFortranプログラムをBASICに移植したり、簡単な音楽ソフトやお絵描きソフトを作ったりしました。3次スプライン関数をBASICで組んだら遅すぎ、Z80機械語で高速化したこともありました。",{"type":27,"tag":74,"props":4686,"children":4687},{},[],{"type":27,"tag":28,"props":4689,"children":4690},{},[4691],{"type":32,"value":4692},"　教員採用試験の面接で「プラネタリウムなどコンピュータを活用した授業をしたい」と答えたハダノでしたが、8ビットの時代は学級通信の印刷に少し使う程度でした。漢字フォントがなかったので、方眼紙に点を打って必要な分を自作していました。成績処理以外の実務では、ハンディワープロに負けていました。",{"type":27,"tag":74,"props":4694,"children":4695},{},[],{"type":27,"tag":78,"props":4697,"children":4699},{"id":4698},"ms-dos-windows-の時代",[4700],{"type":32,"value":4701},"MS-DOS ～ Windows の時代",{"type":27,"tag":138,"props":4703,"children":4705},{"id":4704},"国産16ビットコンピュータ",[4706],{"type":32,"value":4704},{"type":27,"tag":28,"props":4708,"children":4709},{},[4710],{"type":32,"value":4711},"　2校目のとき（1980年代後半）、16ビットコンピュータを手に入れました。内蔵BASICでOS機能も開発もこなすのではなく、OS機能はMS-DOS、開発はC言語と役割分担したのです。国産機は漢字ROMを内蔵しており、ワープロや表計算などのソフトウェア販売も広がり始めました。",{"type":27,"tag":138,"props":4713,"children":4715},{"id":4714},"ms-dos時代はプログラミング冬の時代",[4716],{"type":32,"value":4717},"MS-DOS時代は、プログラミング冬の時代",{"type":27,"tag":28,"props":4719,"children":4720},{},[4721,4723,4730],{"type":32,"value":4722},"　このころ、サンデープログラマの多くは壁に直面していました。これまで通りBASICでプログラミングすることはできましたが、主流はC言語でした。難解なうえに開発環境も整備されておらず、趣味としてのプログラミングは衰退の危機にありました。せいぜい、バッチ（または",{"type":27,"tag":43,"props":4724,"children":4727},{"href":4725,"rel":4726},"https:\u002F\u002Fponzmild.hatenablog.com\u002Fentry\u002F2017\u002F10\u002F29\u002F004625",[986],[4728],{"type":32,"value":4729},"sed,awk",{"type":32,"value":4731},"）を組んで市販ソフトを順番に動かすか、表計算ソフトのマクロ機能でプログラミング気分を味わうか、ぐらいでした。",{"type":27,"tag":28,"props":4733,"children":4734},{},[4735,4737,4743],{"type":32,"value":4736},"　そんなときに、生徒用コンピュータが導入されました。MS-DOSマシンの世界は、漢字ROM搭載で独自規格の国産機と汎用的なDOS\u002FV機が争い、混とんとしていました。",{"type":27,"tag":43,"props":4738,"children":4740},{"href":4739},"nurpa-2#hekiga",[4741],{"type":32,"value":4742},"「巨大ドット壁画」",{"type":32,"value":4744},"を作った1993年もそんな状態でした。ソフトウェア的には、7つほどの処理を組み合わせる必要があったのです。",{"type":27,"tag":74,"props":4746,"children":4747},{},[],{"type":27,"tag":138,"props":4749,"children":4751},{"id":4750},"windowsのradツールでビジュアルプログラミング",[4752],{"type":32,"value":4753},"WindowsのRADツールでビジュアルプログラミング",{"type":27,"tag":28,"props":4755,"children":4756},{},[4757],{"type":32,"value":4758},"　Windows3.1、windows95が現われ、キーボードからコマンドを打つ代わりにマウスで視覚的にソフトウェアを操作するようになりました。",{"type":27,"tag":28,"props":4760,"children":4761},{},[4762],{"type":32,"value":4763},"　Windowsでのプログラミングも、視覚的にできるようになりました。RAD（ラピッド・アプリケーション・デベロップメント）ツールの登場です。GUI部品をペタペタと貼り付け、ユーザーの操作に応じたコードを書くだけなので簡単でした。Visual Basic というビジュアルプログラミング向けのBASICがすっかり気に入りました。メインルーチンのない、イベントドリブンのプログラミングスタイルにもやがて慣れました。",{"type":27,"tag":138,"props":4765,"children":4767},{"id":4766},"西日本の理科教員研修会の講師に",[4768],{"type":32,"value":4766},{"type":27,"tag":28,"props":4770,"children":4771},{},[4772],{"type":32,"value":4773},"　「ハダノ先生はコンピュータが得意らしい」という噂が広まり、教員研修や公民館講座の講師として呼ばれるようになりました。そこで強調したのは、「コンピュータが得意になりたければ、プログラミングをしなさい」ということです。「料理の歴史、テーブルマナーやおいしい料理店」をいくら知っていても、調理ができなければ「料理が得意」とは言えないはずです。",{"type":27,"tag":28,"props":4775,"children":4776},{},[4777],{"type":32,"value":4778},"　西日本の理科教員研修会の講師に指名されたときも、マジックナース「レイアウト」というSF仕立ての人体内アドベンチャーゲームを参加者に作らせることにしました。Visual Basic でアドベンチャー用の簡易言語を作っておき、サンプルゲームをもとに参加者に続きのシナリオを作成させるというものです。画像の連続表示でアニメーションもでき、大きな手ごたえを得ました。\n　",{"type":27,"tag":138,"props":4780,"children":4782},{"id":4781},"インターネット部顧問に",[4783],{"type":32,"value":4781},{"type":27,"tag":28,"props":4785,"children":4786},{},[4787,4789,4796],{"type":32,"value":4788},"　公務災害で左腕に障害を負い、「人生終わった」と落ち込んでいたハダノは、ハダノ校長の勧めでインターネット部を作りました。",{"type":27,"tag":43,"props":4790,"children":4793},{"href":4791,"rel":4792},"https:\u002F\u002Fjiten.com\u002Fdicmi\u002Fdocs\u002Fk10\u002F16367s.htm",[986],[4794],{"type":32,"value":4795},"こねっとプラン",{"type":32,"value":4797},"参加校になり、ホームページを作ったり、他の学校と交流したりしました。1997年6月19日の「こねっと・特別セミナー」では、全国4校の質問校に選ばれました。講師のビル・ゲイツ氏に、NTTのマルチメディア会議システムで次の質問をぶつけました。",{"type":27,"tag":28,"props":4799,"children":4800},{},[4801],{"type":32,"value":4802},"Q: 「インターネットはからっぽの洞窟」という本に書いてあることは本当ですか？",{"type":27,"tag":28,"props":4804,"children":4805},{},[4806],{"type":32,"value":4807},"　それに対して、ゲイツ氏は",{"type":27,"tag":28,"props":4809,"children":4810},{},[4811],{"type":32,"value":4812},"A: いつの時代にも新しいメディアに対して否定的な人はいます。道具はその特性を理解して使うことが大切です。インターネットを中身の豊かな百科事典にするために、力を合わせていきましょう。",{"type":27,"tag":28,"props":4814,"children":4815},{},[4816],{"type":32,"value":4817},"と、丁寧に答えてくれました。",{"type":27,"tag":74,"props":4819,"children":4821},{"id":4820},"multimedia",[],{"type":27,"tag":138,"props":4823,"children":4825},{"id":4824},"マルチメディア作品コンテストで",[4826],{"type":32,"value":4827},"マルチメディア作品コンテストで🏆！！",{"type":27,"tag":28,"props":4829,"children":4830},{},[4831],{"type":32,"value":4832},"　国民文化祭のマルチメディア部門で作品コンテストが開催され、インターネット部も一般の参加者にまじって、プレ・本番それぞれに出品しました。プレ国民文化祭では、かぐや姫のパロディ紙芝居で第2位を獲得しました。",{"type":27,"tag":28,"props":4834,"children":4835},{},[4836,4838,4844],{"type":32,"value":4837},"　「今度こそ優勝を」という思いで部員一丸となって臨んだ国民文化祭には、「クローン戦隊ドリーマーズ」を出品しました。マジックナース「レイアウト」のときに作った簡易言語をJavaに移植し、最新生物学の知見を盛り込んだSFアドベンチャーゲームに仕上げました。「容量１MB以内かつWeb上で見られるもの」という条件をクリアするのに苦労しましたが、見事グランプリを獲得しました。ごほうびは、PC1台とマルチメディアフェスティバルへの招待でした。インターネット部全員で、",{"type":27,"tag":43,"props":4839,"children":4841},{"href":4840},"\u002Farticles\u002Fpopculture-gamemusic#oshii",[4842],{"type":32,"value":4843},"🔗押井守監督の記念講演",{"type":32,"value":4845}," を聞きました。",{"type":27,"tag":87,"props":4847,"children":4850},{"src":4848,"alt":4849,"width":91},"\u002Fimg\u002Fdolly.svg","クローン戦隊ドリーマーズ",[],{"type":27,"tag":74,"props":4852,"children":4853},{},[],{"type":27,"tag":138,"props":4855,"children":4857},{"id":4856},"wsh-で-rpa-をめざしたタイアップ",[4858],{"type":32,"value":4859},"WSH で RPA をめざした「タイアップ」",{"type":27,"tag":28,"props":4861,"children":4862},{},[4863],{"type":32,"value":4864},"　Windowsは視覚的な操作ができて便利な反面、定型的な操作では弱点を抱えていました。何をするにもいちいちマウスを動かす必要があったのです。マクロやショートカットキーで、ある程度スピードアップできますが、ソフトを組み合わせて動かすのは困難でした。",{"type":27,"tag":28,"props":4866,"children":4867},{},[4868,4870,4877,4879,4886],{"type":32,"value":4869},"　IE（インターネット エクスプローラ）用のスクリプトをWindows上で実行できるようにした ",{"type":27,"tag":43,"props":4871,"children":4874},{"href":4872,"rel":4873},"https:\u002F\u002Fe-words.jp\u002Fw\u002FWSH.html",[986],[4875],{"type":32,"value":4876},"WSH（ウィンドウズ スクリプト ホスト）",{"type":32,"value":4878},"が、Windows98から使えるようになりました。これをうまく使えば、人がへばりついてなくても自動実行できる",{"type":27,"tag":43,"props":4880,"children":4883},{"href":4881,"rel":4882},"https:\u002F\u002Fwww.nri.com\u002Fjp\u002Fknowledge\u002Fglossary\u002Flst\u002Falphabet\u002Frpa",[986],[4884],{"type":32,"value":4885},"RPA（ロボティック プロセス オートメーション）",{"type":32,"value":4887},"が実現できるはずです。",{"type":27,"tag":28,"props":4889,"children":4890},{},[4891,4892,4899],{"type":32,"value":709},{"type":27,"tag":43,"props":4893,"children":4896},{"href":4894,"rel":4895},"https:\u002F\u002Fwww.vector.co.jp\u002Fsoft\u002Fwin95\u002Futil\u002Fse099345.html",[986],[4897],{"type":32,"value":4898},"TieUp（あらゆるアプリとタイアップし、全自動処理を実現）",{"type":32,"value":4900},"というWSH強化用のフリーソフトをVectorで公開しました。Visual Basic で作った ActiveX DLLで、いろんなPC雑誌に紹介され、ユーザーは1万5千人に達しました。",{"type":27,"tag":28,"props":4902,"children":4903},{},[4904],{"type":32,"value":4905},"　しばらくは、VB系言語（Visual Basic,VBScript,VBA）による幸せなプログラミングライフが続きました。",{"type":27,"tag":138,"props":4907,"children":4909},{"id":4908},"猫の目のように変わるweb開発",[4910],{"type":32,"value":4911},"猫の目のように変わるWeb開発",{"type":27,"tag":28,"props":4913,"children":4914},{},[4915],{"type":32,"value":4916},"　国民文化祭'98のときは、Webでしっかりしたインタラクティブなコンテンツを作るには、Java Applet か Director くらいしか選択肢がありませんでした。クローン戦隊ドリーマーズを Java Applet で作ったのは、そういう理由があったのです。「オブジェクト指向」はなかなか手ごわかったと思います。※ Java Applet は2015年以降、ブラウザサポートが打ち切られて廃れました。",{"type":27,"tag":28,"props":4918,"children":4919},{},[4920],{"type":32,"value":4921},"　やがて Internet Explorer4 と Netscape Navigator4 によるブラウザ戦争が勃発しました。HTMLとCSSにJavaScriptを組み合わせてインタラクティブなコンテンツを作る「ダイナミックHTML」という技術が登場しましたが、ブラウザ間の互換性が乏しく、面倒くさいものでした。",{"type":27,"tag":28,"props":4923,"children":4924},{},[4925],{"type":32,"value":4926},"　2000年からの10年間は、Flash がWeb表現の中心でした。動画編集のようにタイムライン編集ができ、クリエイターたちの支持を集めていました。2005年ごろになると、Googleの Gmail や GoogleMap でも使われているAjaxを活用した軽量のサービスが注目されましたが、リッチな表現分野ではあいかわらずFlashでした。",{"type":27,"tag":28,"props":4928,"children":4929},{},[4930],{"type":32,"value":4931},"　このころのハダノは、Webでリッチなコンテンツを作る必要がなく、Flashは無視していました。「Webは、IE＋VBScriptで十分」「ローカルは、VB があるさ」と思っていました。ところが、インターネット対応で出遅れたマイクロソフトが、2002年に Visual Basic の大幅な仕様変更をしたのです。VB.NET 7.0 は、従来のVB 6.0 とは全くの別物でした。ローカルだけでなくWebでも動く、本格的なオブジェクト志向、Java や C＃ のような言語仕様……。Visual Basic Magazine などの雑誌は、「早くVB.NETへ乗り換えよう！」という記事のオンパレードです。VB 6.0 や エクセルVBA のノウハウが役に立たず、気軽さが失われたように感じ、ドットネット環境へ移行することをためらいました。ドットネット言語のうち、 C# と C++ は成功しましたが、 VB.NET は失敗だったのではないでしょうか。VB 6.0 は、2008年にサポート打ち切りになりました。",{"type":27,"tag":28,"props":4933,"children":4934},{},[4935],{"type":32,"value":4936},"　ちなみにハダノは2006年から、ローカル環境でのプログラミングに　Python も使うようになっていました。",{"type":27,"tag":74,"props":4938,"children":4939},{},[],{"type":27,"tag":78,"props":4941,"children":4943},{"id":4942},"html5-の時代",[4944],{"type":32,"value":4945},"HTML5 の時代",{"type":27,"tag":138,"props":4947,"children":4949},{"id":4948},"スマホが登場しflashが退場",[4950],{"type":32,"value":4951},"スマホが登場し、Flashが退場",{"type":27,"tag":28,"props":4953,"children":4954},{},[4955],{"type":32,"value":4956},"　2010年ごろから、Flashの人気が低下してきました。AppleがiPhoneでFlash Playerをサポートしないと宣言したのです。スマホが急速に普及したため、PCと共通のWebページづくりが求められるようになりました。「HTML5ならどのブラウザでもリッチな表現ができる」「もうFlashはいらない」と宣伝されました。HTML5+CSS3+JavaScript（ECMAScript5）という新しいWeb標準技術が今後のWeb開発の中心になるというのです。",{"type":27,"tag":28,"props":4958,"children":4959},{},[4960],{"type":32,"value":4961},"　AdobeはFlashの後継製品として、Edge Animate を出しましたが、3年ほどで積極的な開発を終了しました。※ Flash Player も2020年末にすべてサポート打ち切りになりました。",{"type":27,"tag":28,"props":4963,"children":4964},{},[4965],{"type":32,"value":4966},"　「Adobeに支配されたくない」Appleの目論見通りになったわけですが、スマホのHTML5対応は一足飛びには進みません。ハードウェアを最大限生かしたスマホゲームがはやり、ネイティブアプリが主役となりました。Web標準技術ではなく、機種に依存した開発になってしまったのです。Web技術で作られたOS（Firefox OSなど）のスマホに期待をかけていたハダノは、あきらめて2015年にペン入力のAndroidスマホを購入しました。「Webアプリがネイティブアプリを駆逐する日がいつか来る」と信じて……。",{"type":27,"tag":74,"props":4968,"children":4969},{},[],{"type":27,"tag":138,"props":4971,"children":4973},{"id":4972},"授業配信アプリソックリッカー",[4974],{"type":32,"value":4975},"授業配信アプリ「ソックリッカー」",{"type":27,"tag":74,"props":4977,"children":4978},{},[],{"type":27,"tag":138,"props":4980,"children":4982},{"id":4981},"プログラミングシステムソックサーガ",[4983],{"type":32,"value":4984},"プログラミングシステム「ソックサーガ」",{"type":27,"tag":74,"props":4986,"children":4987},{},[],{"type":27,"tag":138,"props":4989,"children":4991},{"id":4990},"全校ぬりえ自動化システムヌルパ",[4992],{"type":32,"value":4993},"全校ぬりえ自動化システム「ヌルパ」",{"type":27,"tag":74,"props":4995,"children":4996},{},[],{"type":27,"tag":74,"props":4998,"children":4999},{},[],{"type":27,"tag":145,"props":5001,"children":5003},{"className":5002},[2106],[5004,5005,5018,5019],{"type":32,"value":2109},{"type":27,"tag":145,"props":5006,"children":5008},{"className":5007},[2113],[5009],{"type":27,"tag":43,"props":5010,"children":5013},{"target":2117,"rel":5011,"href":5012},[2119],"https:\u002F\u002Fhb.afl.rakuten.co.jp\u002Fichiba\u002F26ba9fc2.c2fdf85a.26ba9fc3.8edde063\u002F_RTLink57027?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fbook%2F13307159%2F&link_type=hybrid_url&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJoeWJyaWRfdXJsIiwic2l6ZSI6IjI0MHgyNDAiLCJuYW0iOjEsIm5hbXAiOiJ1cCIsImNvbSI6MSwiY29tcCI6ImRvd24iLCJwcmljZSI6MCwiYm9yIjoxLCJjb2wiOjEsImJidG4iOjAsInByb2QiOjAsImFtcCI6ZmFsc2V9",[5014],{"type":27,"tag":87,"props":5015,"children":5017},{"src":5016},"https:\u002F\u002Fthumbnail.image.rakuten.co.jp\u002F@0_mall\u002Fbook\u002Fcabinet\u002F4220\u002F9784844374220.jpg?_ex=240x240",[],{"type":32,"value":2109},{"type":27,"tag":145,"props":5020,"children":5022},{"className":5021},[2130],[5023,5024,5034,5035,5054,5055,5092],{"type":32,"value":2133},{"type":27,"tag":145,"props":5025,"children":5027},{"className":5026},[2137],[5028],{"type":27,"tag":43,"props":5029,"children":5031},{"target":2117,"rel":5030,"href":5012},[2119],[5032],{"type":32,"value":5033},"最速の仕事術はプログラマーが知っている [ 清水亮 ]",{"type":32,"value":2133},{"type":27,"tag":145,"props":5036,"children":5038},{"className":5037},[2149],[5039,5042,5044,5047,5049,5052],{"type":27,"tag":74,"props":5040,"children":5041},{},[],{"type":32,"value":5043},"※ 世界的なビジネスリーダーにプログラマーあがりの人が多い理由がわかる本です。",{"type":27,"tag":74,"props":5045,"children":5046},{},[],{"type":32,"value":5048},"「プログラミングにこだわりすぎ」と批判されるハダノに清水亮さんはいつも勇気をくれます。",{"type":27,"tag":74,"props":5050,"children":5051},{},[],{"type":32,"value":5053},"プログラミング的思考は、働き方改革にも効きます。",{"type":32,"value":2133},{"type":27,"tag":145,"props":5056,"children":5058},{"className":5057},[2170,2171],[5059,5060,5069,5070,5080,5081,5091],{"type":32,"value":2174},{"type":27,"tag":145,"props":5061,"children":5062},{},[5063],{"type":27,"tag":43,"props":5064,"children":5067},{"className":5065,"target":2117,"rel":5066,"href":5012},[2181,2182],[2119],[5068],{"type":32,"value":2186},{"type":32,"value":2188},{"type":27,"tag":145,"props":5071,"children":5072},{},[5073],{"type":27,"tag":43,"props":5074,"children":5078},{"className":5075,"target":2117,"rel":5076,"href":5077},[2181,2195],[2119],"https:\u002F\u002Faf.moshimo.com\u002Faf\u002Fc\u002Fclick?a_id=3539938&p_id=170&pc_id=185&pl_id=4062&url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2FB011UFDIZM",[5079],{"type":32,"value":2200},{"type":32,"value":2188},{"type":27,"tag":145,"props":5082,"children":5083},{},[5084],{"type":27,"tag":43,"props":5085,"children":5089},{"className":5086,"target":2117,"rel":5087,"href":5088},[2181,2208],[2119],"https:\u002F\u002Fck.jp.ap.valuecommerce.com\u002Fservlet\u002Freferral?sid=3651993&pid=887947441&vc_url=https%3A%2F%2Fpaypaymall.yahoo.co.jp%2Fstore%2Fboox%2Fitem%2Fbk-4844374222%2F%3Fsc_i%3Dshp_pc_search_itemlist_shsrg_title",[5090],{"type":32,"value":2213},{"type":32,"value":2133},{"type":32,"value":2109},{"title":8,"searchDepth":2518,"depth":2518,"links":5094},[5095,5100,5110],{"id":4639,"depth":2518,"text":4642,"children":5096},[5097,5098,5099],{"id":4645,"depth":2523,"text":4645},{"id":4655,"depth":2523,"text":4658},{"id":4666,"depth":2523,"text":4669},{"id":4698,"depth":2518,"text":4701,"children":5101},[5102,5103,5104,5105,5106,5107,5108,5109],{"id":4704,"depth":2523,"text":4704},{"id":4714,"depth":2523,"text":4717},{"id":4750,"depth":2523,"text":4753},{"id":4766,"depth":2523,"text":4766},{"id":4781,"depth":2523,"text":4781},{"id":4824,"depth":2523,"text":4827},{"id":4856,"depth":2523,"text":4859},{"id":4908,"depth":2523,"text":4911},{"id":4942,"depth":2518,"text":4945,"children":5111},[5112,5113,5114,5115],{"id":4948,"depth":2523,"text":4951},{"id":4972,"depth":2523,"text":4975},{"id":4981,"depth":2523,"text":4984},{"id":4990,"depth":2523,"text":4993},"content:articles:hadano.md","articles\u002Fhadano.md","articles\u002Fhadano",1791852931912]