[{"data":1,"prerenderedAt":9189},["ShallowReactive",2],{"\u002Ftag\u002Fvue":3},[4,2538,3968,5178,5655,6127,7318,7796,8518],{"_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":45,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":2539,"description":2540,"category":2541,"tag":2542,"thumbnail":2544,"createdAt":2545,"updatedAt":2546,"body":2547,"_type":2532,"_id":3965,"_source":2534,"_file":3966,"_stem":3967,"_extension":2537},"ブログのコード修正","AIエージェントはWeb系プログラミングの役に立つか",[12],[18,19,14,2543],"teachers-baton","blog-3.jpg","2025\u002F10\u002F5","2024\u002F10\u002F24",{"type":24,"children":2548,"toc":3955},[2549,2554,2566,2571,2576,2582,2585,2591,2603,2608,2613,2627,2632,2653,2658,2663,2684,2687,2693,2698,2721,2732,2744,2758,2761,2766,2777,2782,2793,2798,2810,2821,2833,2838,2856,2861,2866,2869,2875,2880,2903,2924,2927,2948,2969,2975,2980,2985,2998,3003,3006,3012,3025,3263,3268,3281,3286,3289,3295,3300,3617,3622,3627,3632,3642,3648,3653,3666,3671,3674,3680,3685,3690,3703,3708,3726,3731,3736,3748,3753,3758,3763,3766,3771,3776,3781,3804,3809,3815,3820,3825,3828,3834,3839,3844,3848,3941,3944,3947],{"type":27,"tag":28,"props":2550,"children":2551},{},[2552],{"type":32,"value":2553},"　この記事では、",{"type":27,"tag":35,"props":2555,"children":2556},{},[2557],{"type":27,"tag":39,"props":2558,"children":2559},{},[2560],{"type":27,"tag":43,"props":2561,"children":2563},{"href":2562},"\u002Farticles\u002Fblog-2",[2564],{"type":32,"value":2565},"🔗２年前に作ったブログを Vue3+Nuxt3+NuxtContentV2 に移行してみた",{"type":27,"tag":28,"props":2567,"children":2568},{},[2569],{"type":32,"value":2570},"のその後について述べます。",{"type":27,"tag":78,"props":2572,"children":2574},{"id":2573},"aiエージェントはweb系プログラミングの役に立つか",[2575],{"type":32,"value":2540},{"type":27,"tag":87,"props":2577,"children":2581},{"src":2578,"alt":2579,"className":2580},"\u002Fimg\u002Faicodingagent.jpg","AIコーディングエージェント",[1792],[],{"type":27,"tag":74,"props":2583,"children":2584},{},[],{"type":27,"tag":138,"props":2586,"children":2588},{"id":2587},"xに投稿しようとしたら画像が表示されないだと",[2589],{"type":32,"value":2590},"Xに投稿しようとしたら画像が表示されないだと？",{"type":27,"tag":35,"props":2592,"children":2593},{},[2594],{"type":27,"tag":39,"props":2595,"children":2596},{},[2597],{"type":27,"tag":43,"props":2598,"children":2600},{"href":2599},"\u002Farticles\u002Ftechnolojiya-10",[2601],{"type":32,"value":2602},"🔗「いのち輝く未来社会」をめざす万博はSDGs学習に役立つか",{"type":27,"tag":28,"props":2604,"children":2605},{},[2606],{"type":32,"value":2607},"のページを旧TwitterのX「教師のバトンプロジェクト」に投稿しようとしましたが、アイキャッチ画像が表示されません。",{"type":27,"tag":28,"props":2609,"children":2610},{},[2611],{"type":32,"value":2612},"　以前は、公式の Card Validator を使うことでTwitterカードをプレビューできていたのに、プレビュー機能がなくなっています。",{"type":27,"tag":28,"props":2614,"children":2615},{},[2616,2618,2625],{"type":32,"value":2617},"　そこで、",{"type":27,"tag":43,"props":2619,"children":2622},{"href":2620,"rel":2621},"https:\u002F\u002Fchromewebstore.google.com\u002Fdetail\u002Ftwitter-card-validator\u002Fehaanihobfkdbiagofmalaljnkhpajmm?hl=ja",[986],[2623],{"type":32,"value":2624},"🔗Twitter Card Validator というchrome拡張機能 ",{"type":32,"value":2626}," をインストールしました。",{"type":27,"tag":87,"props":2628,"children":2631},{"src":2629,"alt":2630,"width":91},"\u002Fimg\u002Fcardvalidator1.jpg","Twitter Card Validatorでプレビュー１",[],{"type":27,"tag":28,"props":2633,"children":2634},{},[2635,2637,2643,2645,2651],{"type":32,"value":2636},"　確かに、アイキャッチ画像の部分は空白で、",{"type":27,"tag":527,"props":2638,"children":2640},{"className":2639},[],[2641],{"type":32,"value":2642},"Data",{"type":32,"value":2644}," を見ると ",{"type":27,"tag":527,"props":2646,"children":2648},{"className":2647},[],[2649],{"type":32,"value":2650},"undefined",{"type":32,"value":2652}," となっています。",{"type":27,"tag":28,"props":2654,"children":2655},{},[2656],{"type":32,"value":2657},"　その後、プラグインをインストールするもかえって悪化し、開発者ツールでオブジェクトの中身を調べながら試行錯誤し、何とか表示されるようにしました。",{"type":27,"tag":87,"props":2659,"children":2662},{"src":2660,"alt":2661,"width":91},"\u002Fimg\u002Fcardvalidator2.jpg","Twitter Card Validatorでプレビュー２",[],{"type":27,"tag":28,"props":2664,"children":2665},{},[2666,2668,2674,2676,2682],{"type":32,"value":2667},"　実際は、",{"type":27,"tag":527,"props":2669,"children":2671},{"className":2670},[],[2672],{"type":32,"value":2673},"og:image",{"type":32,"value":2675}," だけでなく ",{"type":27,"tag":527,"props":2677,"children":2679},{"className":2678},[],[2680],{"type":32,"value":2681},"twitter:image",{"type":32,"value":2683}," も指定する必要がありました。",{"type":27,"tag":74,"props":2685,"children":2686},{},[],{"type":27,"tag":138,"props":2688,"children":2690},{"id":2689},"aiエージェントgemini-cli-にプログラミングを助けてもらう",[2691],{"type":32,"value":2692},"AIエージェント(Gemini CLI) にプログラミングを助けてもらう",{"type":27,"tag":28,"props":2694,"children":2695},{},[2696],{"type":32,"value":2697},"　「プログラミングできない人は、生成AIにやらせればいい」と言われるようになりました。やってはみたもののまともに動かず、原因さえわからない……という声も寄せられます。「やっぱりたくさんお金をかけないとダメか」とあきらめていたところ、",{"type":27,"tag":35,"props":2699,"children":2700},{},[2701,2711],{"type":27,"tag":39,"props":2702,"children":2703},{},[2704],{"type":27,"tag":43,"props":2705,"children":2708},{"href":2706,"rel":2707},"https:\u002F\u002Fforest.watch.impress.co.jp\u002Fdocs\u002Fserial\u002Faistream\u002F2028156.html",[986],[2709],{"type":32,"value":2710},"🔗開発にも運用にも使える「Gemini CLI」が便利すぎてやばい",{"type":27,"tag":39,"props":2712,"children":2713},{},[2714],{"type":27,"tag":43,"props":2715,"children":2718},{"href":2716,"rel":2717},"https:\u002F\u002Fcloud-ace.jp\u002Fcolumn\u002Fdetail520\u002F",[986],[2719],{"type":32,"value":2720},"🔗Gemini CLIとは？機能や使い方、料金など初心者にもわかる完全ガイド",{"type":27,"tag":28,"props":2722,"children":2723},{},[2724,2726,2730],{"type":32,"value":2725},"など、「",{"type":27,"tag":55,"props":2727,"children":2728},{},[2729],{"type":32,"value":203},{"type":32,"value":2731}," はいいぞ！」という記事をよく目にするようになりました。",{"type":27,"tag":28,"props":2733,"children":2734},{},[2735,2737,2742],{"type":32,"value":2736},"　ターミナル上で対話するだけで、AIがコード生成、定型作業のスクリプト化、複雑なコマンド提案など、いろいろとプログラミングを助けてくれるGoogleの",{"type":27,"tag":55,"props":2738,"children":2739},{},[2740],{"type":32,"value":2741},"AIエージェント",{"type":32,"value":2743},"です。",{"type":27,"tag":28,"props":2745,"children":2746},{},[2747,2749,2756],{"type":32,"value":2748},"　Gemini CLI を使えば、本来有料の ",{"type":27,"tag":43,"props":2750,"children":2753},{"href":2751,"rel":2752},"https:\u002F\u002Faismiley.co.jp\u002Fai_news\u002Fwhat-is-gemini-2-5-pro\u002F",[986],[2754],{"type":32,"value":2755},"🔗Gemini 2.5 Pro",{"type":32,"value":2757}," が1日1,000回まで無料利用可能と、個人利用には十分な機能が提供されます。これは、やってみる価値があります。",{"type":27,"tag":74,"props":2759,"children":2760},{},[],{"type":27,"tag":28,"props":2762,"children":2763},{},[2764],{"type":32,"value":2765},"　さっそく Gemini CLI をインストールし、試してみることにしました。\n　",{"type":27,"tag":519,"props":2767,"children":2772},{"className":2768,"code":2770,"language":2771,"meta":8},[2769],"language-blog1.ps1","……Vue3+Nuxt3+NuxtContentV2 を使って、ブログを運営しています。\n……Xで画像が表示されないという不具合がありました。\n@C:\\nuxt●\\nuxt●●●●●\\pages\\articles\\[slug].vue\nのコードを変更したところ……一応これで解決なのですが、\nもっとスマートなコードがあれば提案してください。\nプラグインの追加インストール不要の方法でお願いします。\n","blog1.ps1",[2773],{"type":27,"tag":527,"props":2774,"children":2775},{"__ignoreMap":8},[2776],{"type":32,"value":2770},{"type":27,"tag":28,"props":2778,"children":2779},{},[2780],{"type":32,"value":2781},"と投げかけると、",{"type":27,"tag":519,"props":2783,"children":2788},{"className":2784,"code":2786,"language":2787,"meta":8},[2785],"language-blog2.ps1","✦ 現在のコードは動作しているとのことですが、\nより安全で推奨される方法を提案します。\nまず、C:\\nuxt●\\nuxt●●●●●\\pages\\articles\\[slug].vue\nのコードを拝見し、……最適なコードを提案します。\n……\n✦ コードを拝見しました。ありがとうございます。\nご指摘の問題は、NuxtのuseAsyncDataから取得したデータが\nVueのrefオブジェクトでラップされているために発生します。\n……より安全で「スマート」なコードは、\ncontent.valueを使ってデータにアクセスする方法です。\n……これにより、コードの可読性が向上し、\n将来のVue\u002FNuxtのバージョンアップにも対応しやすくなります。\nこれから、この修正を適用するためのツールを実行します。\n","blog2.ps1",[2789],{"type":27,"tag":527,"props":2790,"children":2791},{"__ignoreMap":8},[2792],{"type":32,"value":2786},{"type":27,"tag":87,"props":2794,"children":2797},{"src":2795,"alt":2796,"width":91},"\u002Fimg\u002Fgeminiclislug.jpg","Gemini CLI による[slug].vue修正",[],{"type":27,"tag":28,"props":2799,"children":2800},{},[2801,2803,2808],{"type":32,"value":2802},"と、コードの修正を提案してくれました。提案を参考にするだけで終わることも選べますが、今回はそのまま",{"type":27,"tag":55,"props":2804,"children":2805},{},[2806],{"type":32,"value":2807},"修正を実行",{"type":32,"value":2809},"してもらいました。",{"type":27,"tag":519,"props":2811,"children":2816},{"className":2812,"code":2814,"language":2815,"meta":8},[2813],"language-blog3.ps1","✦ コードを……より安全で推奨される方法に更新しました。\ncontent.valueを使用して記事のデータにアクセスすることで、\n……安定して動作するコードになりました。\n\n他に何かお手伝いできることはありますか？\n","blog3.ps1",[2817],{"type":27,"tag":527,"props":2818,"children":2819},{"__ignoreMap":8},[2820],{"type":32,"value":2814},{"type":27,"tag":28,"props":2822,"children":2823},{},[2824,2826,2831],{"type":32,"value":2825},"　「",{"type":27,"tag":55,"props":2827,"children":2828},{},[2829],{"type":32,"value":2830},"こいつ、動くぞ！",{"type":32,"value":2832},"」と思わずつぶやいていました。実に見事です。",{"type":27,"tag":28,"props":2834,"children":2835},{},[2836],{"type":32,"value":2837},"　聞きかじった知識で適当にお茶をにごすのではなく、",{"type":27,"tag":35,"props":2839,"children":2840},{},[2841,2846,2851],{"type":27,"tag":39,"props":2842,"children":2843},{},[2844],{"type":32,"value":2845},"＠で指定したファイルを読んでコードを分析し、",{"type":27,"tag":39,"props":2847,"children":2848},{},[2849],{"type":32,"value":2850},"要求に沿ったコード修正案を理由付きで提案し、",{"type":27,"tag":39,"props":2852,"children":2853},{},[2854],{"type":32,"value":2855},"修正を適用してファイルを上書き保存する。",{"type":27,"tag":28,"props":2857,"children":2858},{},[2859],{"type":32,"value":2860},"までやってくれるのです。「AIエージェント ＝ 有能な秘書」と実感しました。",{"type":27,"tag":28,"props":2862,"children":2863},{},[2864],{"type":32,"value":2865},"　一定の制限・リスクはありますが、これからもっと Gemini CLI を使っていけたらと思います。",{"type":27,"tag":74,"props":2867,"children":2868},{},[],{"type":27,"tag":138,"props":2870,"children":2872},{"id":2871},"ファイルサーバーを入れ替えたら掲示板が動かなくなっただと",[2873],{"type":32,"value":2874},"ファイルサーバーを入れ替えたら掲示板が動かなくなっただと？",{"type":27,"tag":28,"props":2876,"children":2877},{},[2878],{"type":32,"value":2879},"　そんな矢先、市内の小学校教頭のN先生から電話がかかってきました。",{"type":27,"tag":145,"props":2881,"children":2883},{"className":2882},[192],[2884,2885,2896,2898,2901],{"type":32,"value":151},{"type":27,"tag":145,"props":2886,"children":2888},{"className":2887},[155],[2889,2890,2895],{"type":32,"value":158},{"type":27,"tag":87,"props":2891,"children":2894},{"src":2892,"alt":2893,"width":163},"\u002Fimg\u002Fnobu.png","小学校教頭",[],{"type":32,"value":158},{"type":32,"value":2897},"\n  校内のファイルサーバーが不調で入れ替えたら、掲示板が動かなくなってしまったんです。データは戻しているのですが、何か設定が必要なようです。\n  ",{"type":27,"tag":74,"props":2899,"children":2900},{},[],{"type":32,"value":2902},"ハダノ先生にお聞きすれば何とかなるのではと……\n",{"type":27,"tag":145,"props":2904,"children":2906},{"className":2905},[148],[2907,2908,2917,2919,2922],{"type":32,"value":151},{"type":27,"tag":145,"props":2909,"children":2911},{"className":2910},[155],[2912,2913,2916],{"type":32,"value":158},{"type":27,"tag":87,"props":2914,"children":2915},{"src":161,"alt":162,"width":163},[],{"type":32,"value":158},{"type":32,"value":2918},"\n  市教委のSさんがバッファローのNASに設置した校内ポータルですね。\n  ",{"type":27,"tag":74,"props":2920,"children":2921},{},[],{"type":32,"value":2923},"中学校はあまり設置を希望しなかったので、私は実物をさわっていません。Sさんが突然去られ、少しして私も定年だったので……\n",{"type":27,"tag":74,"props":2925,"children":2926},{},[],{"type":27,"tag":145,"props":2928,"children":2930},{"className":2929},[192],[2931,2932,2941,2943,2946],{"type":32,"value":151},{"type":27,"tag":145,"props":2933,"children":2935},{"className":2934},[155],[2936,2937,2940],{"type":32,"value":158},{"type":27,"tag":87,"props":2938,"children":2939},{"src":2892,"alt":2893,"width":163},[],{"type":32,"value":158},{"type":32,"value":2942},"\n  市教委に聞いても、「Sさんがどう設定したかわからない」「グループウエアを活用せよ」というばかりです。\n  ",{"type":27,"tag":74,"props":2944,"children":2945},{},[],{"type":32,"value":2947},"でも、みんな掲示板に慣れていて……グループウエアは自分から情報を取りにいかないと……\n",{"type":27,"tag":145,"props":2949,"children":2951},{"className":2950},[148],[2952,2953,2962,2964,2967],{"type":32,"value":151},{"type":27,"tag":145,"props":2954,"children":2956},{"className":2955},[155],[2957,2958,2961],{"type":32,"value":158},{"type":27,"tag":87,"props":2959,"children":2960},{"src":161,"alt":162,"width":163},[],{"type":32,"value":158},{"type":32,"value":2963},"\n  「プログラミングの達人」だと思って頼ってくれたのはうれしいのですが……\n  ",{"type":27,"tag":74,"props":2965,"children":2966},{},[],{"type":32,"value":2968},"Sさんと私は、守備範囲が違います。バックエンドとフロントエンドは、OS・プログラミング言語・ツールなどが異なる別世界なのです。彼の設定を再現するのは不可能だし、代わりの措置も困難です。\n",{"type":27,"tag":87,"props":2970,"children":2974},{"src":2971,"alt":2972,"className":2973},"\u002Fimg\u002Fwebdev.svg","ウェブ開発の違い",[1792],[],{"type":27,"tag":28,"props":2976,"children":2977},{},[2978],{"type":32,"value":2979},"、、、ということで、電話を切りました。",{"type":27,"tag":28,"props":2981,"children":2982},{},[2983],{"type":32,"value":2984},"　根本的な問題は、「日本の経営層がソフトウエアの価値を理解していない」という点です。Sさんの高度なスキルを理解していたなら、決して手放すことはなかったのにと悔やまれます。",{"type":27,"tag":35,"props":2986,"children":2987},{},[2988],{"type":27,"tag":39,"props":2989,"children":2990},{},[2991,2992,2997],{"type":32,"value":1505},{"type":27,"tag":55,"props":2993,"children":2994},{},[2995],{"type":32,"value":2996},"パソコンは、ソフトが無ければ、ただの箱です。偉い人にはそれが解らんのですよ",{"type":32,"value":1701},{"type":27,"tag":28,"props":2999,"children":3000},{},[3001],{"type":32,"value":3002},"と愚痴っていても始まりません。AIを駆使してもがいてみます。",{"type":27,"tag":74,"props":3004,"children":3005},{},[],{"type":27,"tag":138,"props":3007,"children":3009},{"id":3008},"掲示板復活が可能か-copilot-に聞いてみた",[3010],{"type":32,"value":3011},"掲示板復活が可能か Copilot に聞いてみた",{"type":27,"tag":28,"props":3013,"children":3014},{},[3015,3017,3023],{"type":32,"value":3016},"　まずは、ふだん使っている ",{"type":27,"tag":43,"props":3018,"children":3020},{"href":3019},"\u002Farticles\u002Ftechnolojiya-4#copilot",[3021],{"type":32,"value":3022},"🔗Copilot(クイック応答)",{"type":32,"value":3024}," に聞いてみます。",{"type":27,"tag":145,"props":3026,"children":3028},{"className":3027},[192],[3029,3030,3039,3041,3044,3047,3049,3052,3054,3057,3059,3062,3083,3086,3088,3091,3093,3096,3164,3167,3169,3172,3174,3177,3190,3198,3211,3219,3227,3230,3232,3235,3258,3261],{"type":32,"value":151},{"type":27,"tag":145,"props":3031,"children":3033},{"className":3032},[155],[3034,3035,3038],{"type":32,"value":158},{"type":27,"tag":87,"props":3036,"children":3037},{"src":835,"alt":836,"width":163},[],{"type":32,"value":158},{"type":32,"value":3040},"\n掲示板の復活は「限定的に可能」ですが、教頭先生のスキルと校内ネットワークの制約を考えると、代替手段の検討も現実的です。",{"type":27,"tag":74,"props":3042,"children":3043},{},[],{"type":27,"tag":328,"props":3045,"children":3046},{},[],{"type":32,"value":3048},"\n🛠 掲示板復活は可能か？",{"type":27,"tag":74,"props":3050,"children":3051},{},[],{"type":32,"value":3053},"\n条件付きで可能です。",{"type":27,"tag":74,"props":3055,"children":3056},{},[],{"type":32,"value":3058},"\nWordPressベースの掲示板であれば、NAS（LinkStation）上にWordPress環境を再構築し、プラグインを再導入すれば復旧できます。ただし、以下の条件が揃っている必要があります：",{"type":27,"tag":74,"props":3060,"children":3061},{},[],{"type":27,"tag":35,"props":3063,"children":3064},{},[3065,3070,3075],{"type":27,"tag":39,"props":3066,"children":3067},{},[3068],{"type":32,"value":3069},"NASにPHP・MySQL・Apache（またはLighttpd）が動作している",{"type":27,"tag":39,"props":3071,"children":3072},{},[3073],{"type":32,"value":3074},"WordPressのインストールファイルと旧掲示板のデータ（MySQLのdumpやWordPressのwp-contentフォルダ）が残っている",{"type":27,"tag":39,"props":3076,"children":3077},{},[3078,3080],{"type":32,"value":3079},"インターネット接続可能なPCが一時的に校務ネットワークに接続できる（USBテザリングなど）",{"type":27,"tag":74,"props":3081,"children":3082},{},[],{"type":27,"tag":74,"props":3084,"children":3085},{},[],{"type":32,"value":3087},"\n📋 自力で復旧する手順（教頭先生向け）",{"type":27,"tag":74,"props":3089,"children":3090},{},[],{"type":32,"value":3092},"\n以下は、ICTスキルが中程度の方でも可能な手順です：",{"type":27,"tag":74,"props":3094,"children":3095},{},[],{"type":27,"tag":35,"props":3097,"children":3098},{},[3099,3104,3109,3114,3119,3124,3129,3134,3139,3144,3149,3154,3159],{"type":27,"tag":39,"props":3100,"children":3101},{},[3102],{"type":32,"value":3103},"WordPressの再インストール",{"type":27,"tag":39,"props":3105,"children":3106},{},[3107],{"type":32,"value":3108},"インターネット接続可能なPCでWordPress最新版をダウンロード",{"type":27,"tag":39,"props":3110,"children":3111},{},[3112],{"type":32,"value":3113},"USBメモリでNASに転送",{"type":27,"tag":39,"props":3115,"children":3116},{},[3117],{"type":32,"value":3118},"NASの共有フォルダに展開し、ブラウザでインストール画面にアクセス",{"type":27,"tag":39,"props":3120,"children":3121},{},[3122],{"type":32,"value":3123},"MySQLの設定",{"type":27,"tag":39,"props":3125,"children":3126},{},[3127],{"type":32,"value":3128},"NASにMySQLが動いていれば、phpMyAdminなどでデータベースを作成",{"type":27,"tag":39,"props":3130,"children":3131},{},[3132],{"type":32,"value":3133},"旧掲示板のデータ（.sqlファイル）があればインポート",{"type":27,"tag":39,"props":3135,"children":3136},{},[3137],{"type":32,"value":3138},"掲示板プラグインの導入",{"type":27,"tag":39,"props":3140,"children":3141},{},[3142],{"type":32,"value":3143},"WordPress管理画面から「bbPress」などの掲示板プラグインをインストール",{"type":27,"tag":39,"props":3145,"children":3146},{},[3147],{"type":32,"value":3148},"プラグインのzipファイルをUSB経由でNASに転送し、手動インストールも可能",{"type":27,"tag":39,"props":3150,"children":3151},{},[3152],{"type":32,"value":3153},"動作確認とURLの周知",{"type":27,"tag":39,"props":3155,"children":3156},{},[3157],{"type":32,"value":3158},"校内ポータルのURLを教職員に再通知",{"type":27,"tag":39,"props":3160,"children":3161},{},[3162],{"type":32,"value":3163},"掲示板の使い方を簡単に説明（投稿・返信・通知など）",{"type":27,"tag":74,"props":3165,"children":3166},{},[],{"type":32,"value":3168},"\n🚧 復旧が難しい場合の代替案",{"type":27,"tag":74,"props":3170,"children":3171},{},[],{"type":32,"value":3173},"\n✅ 代替案1：ローカル掲示板アプリ（インターネット不要）",{"type":27,"tag":74,"props":3175,"children":3176},{},[],{"type":27,"tag":35,"props":3178,"children":3179},{},[3180,3185],{"type":27,"tag":39,"props":3181,"children":3182},{},[3183],{"type":32,"value":3184},"例：Kibela（ローカル運用可能なWiki型）、Redmine（タスク管理＋掲示板機能）",{"type":27,"tag":39,"props":3186,"children":3187},{},[3188],{"type":32,"value":3189},"Windows PCにインストールし、NAS上で共有",{"type":27,"tag":28,"props":3191,"children":3192},{},[3193,3195],{"type":32,"value":3194},"✅ 代替案2：Excelベースの掲示板風シート",{"type":27,"tag":74,"props":3196,"children":3197},{},[],{"type":27,"tag":35,"props":3199,"children":3200},{},[3201,3206],{"type":27,"tag":39,"props":3202,"children":3203},{},[3204],{"type":32,"value":3205},"教頭先生が得意なExcelを使い、共有フォルダで運用",{"type":27,"tag":39,"props":3207,"children":3208},{},[3209],{"type":32,"value":3210},"シート保護＋コメント機能で簡易掲示板として活用",{"type":27,"tag":28,"props":3212,"children":3213},{},[3214,3216],{"type":32,"value":3215},"✅ 代替案3：市教委推奨のグループウェアの「掲示板機能」だけ使う",{"type":27,"tag":74,"props":3217,"children":3218},{},[],{"type":27,"tag":35,"props":3220,"children":3221},{},[3222],{"type":27,"tag":39,"props":3223,"children":3224},{},[3225],{"type":32,"value":3226},"教員が慣れるまで、旧掲示板風のUIを模したマニュアルを作成",{"type":27,"tag":74,"props":3228,"children":3229},{},[],{"type":32,"value":3231},"\n🧭 教頭先生へのアドバイスまとめ",{"type":27,"tag":74,"props":3233,"children":3234},{},[],{"type":27,"tag":35,"props":3236,"children":3237},{},[3238,3243,3248,3253],{"type":27,"tag":39,"props":3239,"children":3240},{},[3241],{"type":32,"value":3242},"まずはNASのWordPress環境が生きているか確認（PHP・MySQL・Apache）",{"type":27,"tag":39,"props":3244,"children":3245},{},[3246],{"type":32,"value":3247},"旧掲示板のデータがあるか確認（wp-contentやSQLファイル）",{"type":27,"tag":39,"props":3249,"children":3250},{},[3251],{"type":32,"value":3252},"インターネット接続手段が一時的に確保できるか検討",{"type":27,"tag":39,"props":3254,"children":3255},{},[3256],{"type":32,"value":3257},"復旧が難しい場合は、ExcelやRedmineなどの代替案を提案",{"type":27,"tag":74,"props":3259,"children":3260},{},[],{"type":32,"value":3262},"\nハダノさんのような「テクノロじいや」的支援があれば、教頭先生も安心して取り組めるはずです。必要なら、掲示板のUI再現やマニュアル作成もお手伝いできますよ。どの方向で支援するか、もう少し絞り込みましょうか？\n",{"type":27,"tag":28,"props":3264,"children":3265},{},[3266],{"type":32,"value":3267},"、、、ハダノ元教頭と小学校のN教頭を混同しており、ハルシネーションだらけの非現実的なアドバイスとなっています。こんなのハダノにだってできません。これが普通の生成AIの限界でしょうか。",{"type":27,"tag":35,"props":3269,"children":3270},{},[3271],{"type":27,"tag":39,"props":3272,"children":3273},{},[3274,3275,3280],{"type":32,"value":1505},{"type":27,"tag":55,"props":3276,"children":3277},{},[3278],{"type":32,"value":3279},"生成AIなんてただのペテン師です。偉い人にはそれが解らんのですよ",{"type":32,"value":1701},{"type":27,"tag":28,"props":3282,"children":3283},{},[3284],{"type":32,"value":3285},"と、つぶやきたくなります。",{"type":27,"tag":74,"props":3287,"children":3288},{},[],{"type":27,"tag":138,"props":3290,"children":3292},{"id":3291},"掲示板復活が可能か-gemini-cli-に聞いてみた",[3293],{"type":32,"value":3294},"掲示板復活が可能か Gemini CLI に聞いてみた",{"type":27,"tag":28,"props":3296,"children":3297},{},[3298],{"type":32,"value":3299},"　同じ質問をAIエージェント(Gemini CLI) にぶつけると、、、",{"type":27,"tag":145,"props":3301,"children":3303},{"className":3302},[192],[3304,3305,3314,3316,3324,3329,3334,3352,3355,3360,3365,3430,3435,3438,3443,3448,3456,3461,3505,3513,3518,3597,3602,3607,3612],{"type":32,"value":151},{"type":27,"tag":145,"props":3306,"children":3308},{"className":3307},[155],[3309,3310,3313],{"type":32,"value":158},{"type":27,"tag":87,"props":3311,"children":3312},{"src":202,"alt":203,"width":163},[],{"type":32,"value":158},{"type":32,"value":3315},"\n✦ ご相談いただいた内容について、私の見解を以下にまとめました。\n",{"type":27,"tag":28,"props":3317,"children":3318},{},[3319],{"type":27,"tag":55,"props":3320,"children":3321},{},[3322],{"type":32,"value":3323},"結論：自力での完全な復活は「極めて困難」であり、推奨しません",{"type":27,"tag":28,"props":3325,"children":3326},{},[3327],{"type":32,"value":3328},"プログラミング経験のない教頭先生が、現在の情報だけで元の掲示板を完全に復活させる\nのは、残念ながら極めて困難です。下手に作業を行うと、残っているデータさえも破損させてしまう危険性があります。",{"type":27,"tag":28,"props":3330,"children":3331},{},[3332],{"type":32,"value":3333},"【困難な理由】",{"type":27,"tag":228,"props":3335,"children":3336},{},[3337,3342,3347],{"type":27,"tag":39,"props":3338,"children":3339},{},[3340],{"type":32,"value":3341},"専門知識の壁: ご推察の通り、この種のシステムはLinux、PHP、MySQL、WordPressといった複数の技術で構成されてい\nます。これらは、VBAやクライアントサイドJavaScriptとは全く異なる知識体系を必要とします。エラーが出た際の対処\nは、専門家でなければほぼ不可能です。",{"type":27,"tag":39,"props":3343,"children":3344},{},[3345],{"type":32,"value":3346},"設定情報の欠如:\n最大の問題は、元の設定情報が一切ないことです。特に、WordPressがデータベース（MySQL）に接続するための「ユー\nザー名」や「パスワード」が記録された設定ファイル（wp-config.php）の内容が不明なのは致命的です。",{"type":27,"tag":39,"props":3348,"children":3349},{},[3350],{"type":32,"value":3351},"オフラインという制約: インターネットに接続できない校務用ネットワークでは、必要なソフトウェアのダウンロード\nや、問題解決のための情報検索ができません。これは、復旧作業を行う上で非常に大きな足かせとなります。",{"type":27,"tag":328,"props":3353,"children":3354},{},[],{"type":27,"tag":28,"props":3356,"children":3357},{},[3358],{"type":32,"value":3359},"復旧に必要な作業（参考）",{"type":27,"tag":28,"props":3361,"children":3362},{},[3363],{"type":32,"value":3364},"もし仮に復旧作業を行う場合、最低でも以下のような手順が必要になります。これを見ていただくだけでも、作業の複雑さ\nがお分かりいただけるかと思います。",{"type":27,"tag":228,"props":3366,"children":3367},{},[3368,3386,3399,3417],{"type":27,"tag":39,"props":3369,"children":3370},{},[3371,3373],{"type":32,"value":3372},"現状分析:\n",{"type":27,"tag":35,"props":3374,"children":3375},{},[3376,3381],{"type":27,"tag":39,"props":3377,"children":3378},{},[3379],{"type":32,"value":3380},"NASにログインし、PHPやMySQLが動作しているか確認する。",{"type":27,"tag":39,"props":3382,"children":3383},{},[3384],{"type":32,"value":3385},"バックアップされたデータの中に、WordPressの全ファイルと、データベースのバックアップファイル（拡張子が\n.sql や .dump のファイル）が存在するか確認する。",{"type":27,"tag":39,"props":3387,"children":3388},{},[3389,3391],{"type":32,"value":3390},"環境構築:\n",{"type":27,"tag":35,"props":3392,"children":3393},{},[3394],{"type":27,"tag":39,"props":3395,"children":3396},{},[3397],{"type":32,"value":3398},"NASの管理画面から、Webサーバー機能、PHP、MySQLを有効化・インストールする。",{"type":27,"tag":39,"props":3400,"children":3401},{},[3402,3404],{"type":32,"value":3403},"データ復元:\n",{"type":27,"tag":35,"props":3405,"children":3406},{},[3407,3412],{"type":27,"tag":39,"props":3408,"children":3409},{},[3410],{"type":32,"value":3411},"WordPressのファイルを所定のWeb公開フォルダにコピーする。",{"type":27,"tag":39,"props":3413,"children":3414},{},[3415],{"type":32,"value":3416},"MySQLにデータベースを作成し、バックアップファイルをインポート（読み込み）させる。",{"type":27,"tag":39,"props":3418,"children":3419},{},[3420,3422],{"type":32,"value":3421},"設定接続:\n",{"type":27,"tag":35,"props":3423,"children":3424},{},[3425],{"type":27,"tag":39,"props":3426,"children":3427},{},[3428],{"type":32,"value":3429},"WordPressの設定ファイル（wp-config.php）を見つけ出し、手順3で設定したデータベース名、ユーザー名、パスワ\nードを正確に書き換える。",{"type":27,"tag":28,"props":3431,"children":3432},{},[3433],{"type":32,"value":3434},"これらの作業には、専門的なコマンド操作が必要になる場面が多く、一つでも間違うとシステムは全く動作しません。",{"type":27,"tag":328,"props":3436,"children":3437},{},[],{"type":27,"tag":28,"props":3439,"children":3440},{},[3441],{"type":32,"value":3442},"提案すべき代替手段",{"type":27,"tag":28,"props":3444,"children":3445},{},[3446],{"type":32,"value":3447},"以上のことから、復旧を目指すよりも、以下の現実的な代替案を教頭先生とご相談されることを強くお勧めします。",{"type":27,"tag":28,"props":3449,"children":3450},{},[3451],{"type":27,"tag":55,"props":3452,"children":3453},{},[3454],{"type":32,"value":3455},"案1：市教委推奨のグループウェアへ移行する（最も推奨）",{"type":27,"tag":28,"props":3457,"children":3458},{},[3459],{"type":32,"value":3460},"これが最も正攻法であり、長期的に見て学校のためになる選択肢です。",{"type":27,"tag":35,"props":3462,"children":3463},{},[3464,3487],{"type":27,"tag":39,"props":3465,"children":3466},{},[3467,3469],{"type":32,"value":3468},"メリット:\n",{"type":27,"tag":35,"props":3470,"children":3471},{},[3472,3477,3482],{"type":27,"tag":39,"props":3473,"children":3474},{},[3475],{"type":32,"value":3476},"持続可能性: 市教委のサポートが受けられるため、今後問題が起きても安心です。",{"type":27,"tag":39,"props":3478,"children":3479},{},[3480],{"type":32,"value":3481},"セキュリティ: 自作システムよりもセキュリティが担保されています。",{"type":27,"tag":39,"props":3483,"children":3484},{},[3485],{"type":32,"value":3486},"機能拡張: 掲示板以外の機能（スケジュール共有など）も使える可能性があります。",{"type":27,"tag":39,"props":3488,"children":3489},{},[3490,3492],{"type":32,"value":3491},"進め方の助言:\n",{"type":27,"tag":35,"props":3493,"children":3494},{},[3495,3500],{"type":27,"tag":39,"props":3496,"children":3497},{},[3498],{"type":32,"value":3499},"現場の先生方が「使い慣れたもの」を好む気持ちはよく分かります。まずは、新しいグループウェアの操作研修会\nを開いてもらうよう市教委に働きかけるのが良いでしょう。",{"type":27,"tag":39,"props":3501,"children":3502},{},[3503],{"type":32,"value":3504},"簡単な操作マニュアルを配布する、移行のメリットを丁寧に説明するなど、現場の\n不安を取り除くための支援方法が必要と思われます。",{"type":27,"tag":28,"props":3506,"children":3507},{},[3508],{"type":27,"tag":55,"props":3509,"children":3510},{},[3511],{"type":32,"value":3512},"案2：あなたの技術を活かした「新しい簡易掲示板」を構築する（次善策）",{"type":27,"tag":28,"props":3514,"children":3515},{},[3516],{"type":32,"value":3517},"もし、どうしても現場の抵抗が強く、代替システムが必要な場合の「次善の策」です。これは、あなたの得意なJavaScri\npt（Nuxt.js）の技術を活かす方法です。",{"type":27,"tag":35,"props":3519,"children":3520},{},[3521,3549,3571],{"type":27,"tag":39,"props":3522,"children":3523},{},[3524,3526],{"type":32,"value":3525},"コンセプト:\n",{"type":27,"tag":35,"props":3527,"children":3528},{},[3529,3534,3539,3544],{"type":27,"tag":39,"props":3530,"children":3531},{},[3532],{"type":32,"value":3533},"データベースを使わない「静的サイトジェネレーター（SSG）」の仕組みを利用します。",{"type":27,"tag":39,"props":3535,"children":3536},{},[3537],{"type":32,"value":3538},"先生方は、PCで書いた「お知らせ」のテキストファイル（Markdown形式など）を、NASの特定の共有フォルダに保存\nします。",{"type":27,"tag":39,"props":3540,"children":3541},{},[3542],{"type":32,"value":3543},"教頭先生が、あなたの用意したツール（バッチファイル等）をPCで実行すると、それらのテキストファイルから自\n動で掲示板のWebページ（HTMLファイル群）が生成されます。",{"type":27,"tag":39,"props":3545,"children":3546},{},[3547],{"type":32,"value":3548},"生成されたWebページ群を、NASのWeb公開フォルダにコピーすれば、全員が閲覧できます。",{"type":27,"tag":39,"props":3550,"children":3551},{},[3552,3553],{"type":32,"value":3468},{"type":27,"tag":35,"props":3554,"children":3555},{},[3556,3561,3566],{"type":27,"tag":39,"props":3557,"children":3558},{},[3559],{"type":32,"value":3560},"PHPやMySQLが不要で、あなたの得意技術で開発・メンテナンスが可能です。",{"type":27,"tag":39,"props":3562,"children":3563},{},[3564],{"type":32,"value":3565},"データはただのテキストファイルなので、管理やバックアップが非常に簡単です。",{"type":27,"tag":39,"props":3567,"children":3568},{},[3569],{"type":32,"value":3570},"オフライン環境でも運用できます（Webページ生成PCとNASの間はUSBメモリ等でデータを移動）。",{"type":27,"tag":39,"props":3572,"children":3573},{},[3574,3576,3589],{"type":32,"value":3575},"教頭先生の作業:\n",{"type":27,"tag":228,"props":3577,"children":3578},{},[3579,3584],{"type":27,"tag":39,"props":3580,"children":3581},{},[3582],{"type":32,"value":3583},"お知らせのテキストファイルが共有フォルダに溜まってきたら、PCでツールを実行する。",{"type":27,"tag":39,"props":3585,"children":3586},{},[3587],{"type":32,"value":3588},"出来上がったWebページ群をNASにコピーする。",{"type":27,"tag":35,"props":3590,"children":3591},{},[3592],{"type":27,"tag":39,"props":3593,"children":3594},{},[3595],{"type":32,"value":3596},"この手順なら、プログラミング知識は不要で、ファイルのコピー程度の操作で完結します。",{"type":27,"tag":28,"props":3598,"children":3599},{},[3600],{"type":32,"value":3601},"まとめ",{"type":27,"tag":28,"props":3603,"children":3604},{},[3605],{"type":32,"value":3606},"まずは教頭先生に、自力での復旧はリスクが高すぎること、そして学校組織の継続性を考えれば「案1：グループウェア\nへの移行」が最も望ましい選択であることを、専門家の立場から冷静に伝えてあげてください。",{"type":27,"tag":28,"props":3608,"children":3609},{},[3610],{"type":32,"value":3611},"その上で、どうしても現場の合意形成が難しい場合の「奥の手」として、あなたのスキルを活かせる「案2：新しい簡易\n掲示板の構築」の可能性を示唆し、もし興味があるようならば、その設計について相談に乗る、というスタンスで臨まれ\nるのがよろしいかと存じます。",{"type":27,"tag":28,"props":3613,"children":3614},{},[3615],{"type":32,"value":3616},"長年のご経験と知識を持つあなたからのアドバイスは、きっと教頭先生の助けになるはずです。",{"type":27,"tag":28,"props":3618,"children":3619},{},[3620],{"type":32,"value":3621},"　さすが、Gemini CLI です。的確な応答です。",{"type":27,"tag":28,"props":3623,"children":3624},{},[3625],{"type":32,"value":3626},"　Web系プログラミングの大変さをよく理解してくれていて、涙が出そうになります。",{"type":27,"tag":28,"props":3628,"children":3629},{},[3630],{"type":32,"value":3631},"　代替案2は、ふだんハダノが自分のブログシステムでやっていることです。ネックになるのは、「Markdownを覚えなければならない」「リアルタイムの更新が難しい」「継続的サポートが必須」という点です。こんな面倒なことをするぐらいなら、グループウエアを使った方がよいでしょう。",{"type":27,"tag":28,"props":3633,"children":3634},{},[3635,3637],{"type":32,"value":3636},"　今どきのソフトウエアのやっかいな点は、しょっちゅうバージョンアップがあり、それぞれのバージョンがずれると不具合が起きることです。今動いていてもメンテナンスし続ける必要があるのです。　→ ",{"type":27,"tag":43,"props":3638,"children":3639},{"href":2562},[3640],{"type":32,"value":3641},"🔗技術の急速な進歩で、ブログの引っ越しがたいへんなことに！",{"type":27,"tag":87,"props":3643,"children":3647},{"src":3644,"alt":3645,"className":3646},"\u002Fimg\u002Ferrorstorm.jpg","エラーの嵐",[1451],[],{"type":27,"tag":28,"props":3649,"children":3650},{},[3651],{"type":32,"value":3652},"　それにしても、AIエージェント(Gemini CLI) は、普通の生成AIよりもはるかに頼りになります。",{"type":27,"tag":35,"props":3654,"children":3655},{},[3656],{"type":27,"tag":39,"props":3657,"children":3658},{},[3659,3660,3665],{"type":32,"value":1505},{"type":27,"tag":55,"props":3661,"children":3662},{},[3663],{"type":32,"value":3664},"生成AIとは違うのだよ、生成AIとは！",{"type":32,"value":1701},{"type":27,"tag":28,"props":3667,"children":3668},{},[3669],{"type":32,"value":3670},"と、言いたいかもしれません。",{"type":27,"tag":74,"props":3672,"children":3673},{},[],{"type":27,"tag":138,"props":3675,"children":3677},{"id":3676},"まとめaiエージェントgemini-cli-はweb系プログラミングの役に立つ",[3678],{"type":32,"value":3679},"【まとめ】AIエージェント(Gemini CLI) はWeb系プログラミングの役に立つ",{"type":27,"tag":28,"props":3681,"children":3682},{},[3683],{"type":32,"value":3684},"　「今動いているシステムをバージョンアップするだけだから、一から作るより楽だろう」という考えは甘すぎました、、、と前回の振り返りで述べました。",{"type":27,"tag":28,"props":3686,"children":3687},{},[3688],{"type":32,"value":3689},"　これと似たことが、生成AI界隈で起きているようです。",{"type":27,"tag":35,"props":3691,"children":3692},{},[3693],{"type":27,"tag":39,"props":3694,"children":3695},{},[3696],{"type":27,"tag":43,"props":3697,"children":3700},{"href":3698,"rel":3699},"https:\u002F\u002Fnote.com\u002Frk611\u002Fn\u002Fnf22e638593aa",[986],[3701],{"type":32,"value":3702},"🔗素人がAIで誤りを量産し、プロが後始末する地獄絵図",{"type":27,"tag":28,"props":3704,"children":3705},{},[3706],{"type":32,"value":3707},"を読むと、背筋がゾッとします。素人が生成AIを安直に使うと、",{"type":27,"tag":228,"props":3709,"children":3710},{},[3711,3716,3721],{"type":27,"tag":39,"props":3712,"children":3713},{},[3714],{"type":32,"value":3715},"大量生産 → チェック・修正で疲弊",{"type":27,"tag":39,"props":3717,"children":3718},{},[3719],{"type":32,"value":3720},"AIで計画・設計の検討 → 内容の確認とだめな理由の説明で疲弊",{"type":27,"tag":39,"props":3722,"children":3723},{},[3724],{"type":32,"value":3725},"AIで途中までやったのであとは簡単 → 簡単じゃない理由の説明で疲弊",{"type":27,"tag":28,"props":3727,"children":3728},{},[3729],{"type":32,"value":3730},"、、、という、プロにとっての地獄が待っているというのです。",{"type":27,"tag":87,"props":3732,"children":3735},{"src":3733,"alt":3734,"width":91},"\u002Fimg\u002Fhellish.jpg","素人がAIで誤りを量産し、プロが後始末する地獄絵図",[],{"type":27,"tag":35,"props":3737,"children":3738},{},[3739],{"type":27,"tag":39,"props":3740,"children":3741},{},[3742],{"type":27,"tag":43,"props":3743,"children":3745},{"href":3744},"\u002Farticles\u002Faimanga-3",[3746],{"type":32,"value":3747},"🔗生成AIとパワポで４コマ漫画「モチはモチや」を作ってみた",{"type":27,"tag":28,"props":3749,"children":3750},{},[3751],{"type":32,"value":3752},"の中で、「専門家へのリスペクトが足りない！」「無理解と同調圧力が専門家を苦しめる」と述べましたが、生成AIの普及がこれに拍車をかけるかもしれません。SNSで主流となった考え方を「集合知」と勘違いする傾向もこわいと思います。",{"type":27,"tag":28,"props":3754,"children":3755},{},[3756],{"type":32,"value":3757},"　これを防ぐには、生成AIに作らせっぱなしではなく、検証が必要です。",{"type":27,"tag":28,"props":3759,"children":3760},{},[3761],{"type":32,"value":3762},"　プログラミングに関しては、作らせたコードを実行させて検証するとよいでしょう。そういう意味では、Gemini CLI のようなAIエージェントは従来の生成AIより優れています。「実行」によって、責任が生まれる感じです。プロの足を引っ張るのではなく、プロの片腕となるAIエージェントの発展を期待します。",{"type":27,"tag":74,"props":3764,"children":3765},{},[],{"type":27,"tag":28,"props":3767,"children":3768},{},[3769],{"type":32,"value":3770},"※ ちなみに、、、",{"type":27,"tag":28,"props":3772,"children":3773},{},[3774],{"type":32,"value":3775},"　医師の診察に納得できないとき、セカンドオピニオンを求めます。",{"type":27,"tag":28,"props":3777,"children":3778},{},[3779],{"type":32,"value":3780},"　Copilot でも医師を選べます。今回の質問に対する応答の印象は、",{"type":27,"tag":35,"props":3782,"children":3783},{},[3784,3789,3794,3799],{"type":27,"tag":39,"props":3785,"children":3786},{},[3787],{"type":32,"value":3788},"クイック応答：望む答えを引き出すにはプロンプトの工夫が必要 → 研修医",{"type":27,"tag":39,"props":3790,"children":3791},{},[3792],{"type":32,"value":3793},"Think Deeper：クイック応答をより現実に即して詳しくした感じ → 中堅医師",{"type":27,"tag":39,"props":3795,"children":3796},{},[3797],{"type":32,"value":3798},"GPT-5(新規)：現実を踏まえながらも新発想の代替手段を多数提示 → 研究熱心な若手医師",{"type":27,"tag":39,"props":3800,"children":3801},{},[3802],{"type":32,"value":3803},"Deep Research：応答に時間がかかるが根拠ある詳細な現実解提示 → 大学病院の専門医",{"type":27,"tag":28,"props":3805,"children":3806},{},[3807],{"type":32,"value":3808},"、、、という感じです。",{"type":27,"tag":87,"props":3810,"children":3814},{"src":3811,"alt":3812,"className":3813},"\u002Fimg\u002Fsecondopinion.jpg","セカンドオピニオンを求める患者",[1451],[],{"type":27,"tag":28,"props":3816,"children":3817},{},[3818],{"type":32,"value":3819},"　成功には「人を見る力」「コミュニケーション能力」が欠かせませんが、これからは生成AIに対してもこれらの能力が必要になりそうです。",{"type":27,"tag":28,"props":3821,"children":3822},{},[3823],{"type":32,"value":3824},"　AIエージェントは、外部ツールや他のAIとコミュニケーションする能力を磨きつつあります。今回の Gemini CLI は、さしずめ「専門医と連携して親身になって診てくれる若手医師」といったところでしょうか。今後、主治医になる可能性もあります。",{"type":27,"tag":74,"props":3826,"children":3827},{},[],{"type":27,"tag":3829,"props":3830,"children":3832},"h4",{"id":3831},"これからも改良を",[3833],{"type":32,"value":3831},{"type":27,"tag":28,"props":3835,"children":3836},{},[3837],{"type":32,"value":3838},"　自前のブログシステムなので、使っていきながら改良していきます。中身が全部わかっているというのは、安心です。AIエージェントの力も借りながら、さらに理解を深めたいと思います。",{"type":27,"tag":28,"props":3840,"children":3841},{},[3842],{"type":32,"value":3843},"　これからも応援よろしくお願いします。",{"type":27,"tag":74,"props":3845,"children":3847},{"id":3846},"nikkeisoft",[],{"type":27,"tag":145,"props":3849,"children":3851},{"className":3850},[2106],[3852,3853,3866,3867],{"type":32,"value":2109},{"type":27,"tag":145,"props":3854,"children":3856},{"className":3855},[2113],[3857],{"type":27,"tag":43,"props":3858,"children":3861},{"target":2117,"rel":3859,"href":3860},[2119],"https:\u002F\u002Fhb.afl.rakuten.co.jp\u002Fichiba\u002F1c31a7e9.545b2c08.1c31a7ea.d83a8f7a\u002F_RTLink57027?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2F5e9e4f14a0ca6b7bafbe30bbde4a93b6%2F&link_type=hybrid_url&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJoeWJyaWRfdXJsIiwic2l6ZSI6IjI0MHgyNDAiLCJuYW0iOjEsIm5hbXAiOiJyaWdodCIsImNvbSI6MSwiY29tcCI6ImRvd24iLCJwcmljZSI6MSwiYm9yIjoxLCJjb2wiOjEsImJidG4iOjEsInByb2QiOjEsImFtcCI6ZmFsc2V9",[3862],{"type":27,"tag":87,"props":3863,"children":3865},{"src":3864},"https:\u002F\u002Fthumbnail.image.rakuten.co.jp\u002F@0_mall\u002Fbook\u002Fcabinet\u002F1154\u002F4910071891154_1_2.jpg?_ex=240x240",[],{"type":32,"value":2109},{"type":27,"tag":145,"props":3868,"children":3870},{"className":3869},[2130],[3871,3872,3882,3883,3902,3903,3940],{"type":32,"value":2133},{"type":27,"tag":145,"props":3873,"children":3875},{"className":3874},[2137],[3876],{"type":27,"tag":43,"props":3877,"children":3879},{"target":2117,"rel":3878,"href":3860},[2119],[3880],{"type":32,"value":3881},"日経ソフトウエア 2025年 11月号 [雑誌]",{"type":32,"value":2133},{"type":27,"tag":145,"props":3884,"children":3886},{"className":3885},[2149],[3887,3890,3892,3895,3897,3900],{"type":27,"tag":74,"props":3888,"children":3889},{},[],{"type":32,"value":3891},"※ ハダノがずっと購読している隔月刊のプログラミング雑誌です。",{"type":27,"tag":74,"props":3893,"children":3894},{},[],{"type":32,"value":3896},"流行をおさえているので、最近はAI関連の記事が多めです。",{"type":27,"tag":74,"props":3898,"children":3899},{},[],{"type":32,"value":3901},"特集2「AIエージェント時代到来！ MCPとは何か？」が特に興味深かったと思います。",{"type":32,"value":2133},{"type":27,"tag":145,"props":3904,"children":3906},{"className":3905},[2170,2171],[3907,3908,3917,3918,3928,3929,3939],{"type":32,"value":2174},{"type":27,"tag":145,"props":3909,"children":3910},{},[3911],{"type":27,"tag":43,"props":3912,"children":3915},{"className":3913,"target":2117,"rel":3914,"href":3860},[2181,2182],[2119],[3916],{"type":32,"value":2186},{"type":32,"value":2188},{"type":27,"tag":145,"props":3919,"children":3920},{},[3921],{"type":27,"tag":43,"props":3922,"children":3926},{"className":3923,"target":2117,"rel":3924,"href":3925},[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%2FB0F196QW8D",[3927],{"type":32,"value":2200},{"type":32,"value":2188},{"type":27,"tag":145,"props":3930,"children":3931},{},[3932],{"type":27,"tag":43,"props":3933,"children":3937},{"className":3934,"target":2117,"rel":3935,"href":3936},[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%2Fmt-4910071891154.html%3Fsc_i%3Dshopping-pc-web-result-item-rsltlst-img",[3938],{"type":32,"value":2213},{"type":32,"value":2133},{"type":32,"value":2109},{"type":27,"tag":74,"props":3942,"children":3943},{},[],{"type":27,"tag":328,"props":3945,"children":3946},{},[],{"type":27,"tag":28,"props":3948,"children":3949},{},[3950],{"type":27,"tag":43,"props":3951,"children":3952},{"href":2562},[3953],{"type":32,"value":3954},"←前へ　持続可能なブログ作り",{"title":8,"searchDepth":2518,"depth":2518,"links":3956},[3957],{"id":2573,"depth":2518,"text":2540,"children":3958},[3959,3960,3961,3962,3963,3964],{"id":2587,"depth":2523,"text":2590},{"id":2689,"depth":2523,"text":2692},{"id":2871,"depth":2523,"text":2874},{"id":3008,"depth":2523,"text":3011},{"id":3291,"depth":2523,"text":3294},{"id":3676,"depth":2523,"text":3679},"content:articles:blog-3.md","articles\u002Fblog-3.md","articles\u002Fblog-3",{"_path":2562,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":3969,"description":3970,"category":3971,"tag":3972,"thumbnail":3973,"createdAt":3974,"updatedAt":3975,"body":3976,"_type":2532,"_id":5175,"_source":2534,"_file":5176,"_stem":5177,"_extension":2537},"持続可能なブログ作り","２年前に作ったブログを Vue3+Nuxt3+NuxtContentV2 に移行してみた",[12],[18,19],"blog-2.jpg","2024\u002F3\u002F25","2024\u002F5\u002F24",{"type":24,"children":3977,"toc":5164},[3978,3982,3994,3998,4003,4009,4012,4018,4030,4043,4048,4051,4072,4077,4081,4086,4104,4109,4112,4118,4123,4136,4141,4177,4182,4210,4215,4221,4224,4230,4235,4247,4252,4263,4283,4295,4298,4303,4308,4319,4324,4352,4357,4370,4375,4386,4422,4432,4444,4447,4452,4457,4462,4467,4473,4478,4506,4512,4517,4530,4559,4589,4600,4605,4616,4621,4649,4661,4672,4685,4688,4694,4705,4710,4723,4728,4741,4746,4750,4756,4761,4766,4771,4777,4782,4815,4820,4825,4830,4835,4938,4943,4948,4951,4955,4967,4971,4975,5047,5050,5142,5145,5148,5156],{"type":27,"tag":28,"props":3979,"children":3980},{},[3981],{"type":32,"value":2553},{"type":27,"tag":35,"props":3983,"children":3984},{},[3985],{"type":27,"tag":39,"props":3986,"children":3987},{},[3988],{"type":27,"tag":43,"props":3989,"children":3991},{"href":3990},"\u002Farticles\u002Fblog-1",[3992],{"type":32,"value":3993},"🔗Nuxt+Content+Cloudflareで無料でブログを作ってみた",{"type":27,"tag":28,"props":3995,"children":3996},{},[3997],{"type":32,"value":2570},{"type":27,"tag":78,"props":3999,"children":4001},{"id":4000},"２年前に作ったブログを-vue3nuxt3nuxtcontentv2-に移行してみた",[4002],{"type":32,"value":3970},{"type":27,"tag":87,"props":4004,"children":4008},{"src":4005,"alt":4006,"className":4007},"\u002Fimg\u002Fadvancedit.jpg","高度情報技術",[1792],[],{"type":27,"tag":74,"props":4010,"children":4011},{},[],{"type":27,"tag":138,"props":4013,"children":4015},{"id":4014},"技術の急速な進歩でブログの引っ越しがたいへんなことに",[4016],{"type":32,"value":4017},"技術の急速な進歩で、ブログの引っ越しがたいへんなことに！",{"type":27,"tag":28,"props":4019,"children":4020},{},[4021,4022,4028],{"type":32,"value":709},{"type":27,"tag":43,"props":4023,"children":4025},{"href":4024},"\u002Farticles\u002Faipc-2",[4026],{"type":32,"value":4027},"🔗「生成AI用にデスクトップPCを追加購入した件」",{"type":32,"value":4029}," で述べたように、ノートPCでやっていたことをデスクトップPCでもできるように頑張りました。",{"type":27,"tag":28,"props":4031,"children":4032},{},[4033,4035,4041],{"type":32,"value":4034},"　データは ",{"type":27,"tag":43,"props":4036,"children":4038},{"href":4037},"\u002Farticles\u002Fict-2#personalcloud",[4039],{"type":32,"value":4040},"🔗パーソナルクラウド",{"type":32,"value":4042}," にバックアップしていました。",{"type":27,"tag":28,"props":4044,"children":4045},{},[4046],{"type":32,"value":4047},"　プログラムは、重要なものから順にインストールしていきました。ブログも早く引っ越したかったのですが、子ども食堂タブレット教室への影響を考え、春休みを「ブログメンテナンス期間」としました。",{"type":27,"tag":74,"props":4049,"children":4050},{},[],{"type":27,"tag":28,"props":4052,"children":4053},{},[4054,4056,4062,4064,4070],{"type":32,"value":4055},"　ブログシステムは、記事データをデスクトップPCに移しただけでは動きません。",{"type":27,"tag":527,"props":4057,"children":4059},{"className":4058},[],[4060],{"type":32,"value":4061},"Vue.js",{"type":32,"value":4063}," や ",{"type":27,"tag":527,"props":4065,"children":4067},{"className":4066},[],[4068],{"type":32,"value":4069},"Nuxt.js",{"type":32,"value":4071}," などのプログラムをインストールする必要があります。",{"type":27,"tag":28,"props":4073,"children":4074},{},[4075],{"type":32,"value":4076},"　２年前と同じ要領でやってみましたが、エラーの嵐に打ちのめされました。",{"type":27,"tag":87,"props":4078,"children":4080},{"src":3644,"alt":3645,"className":4079},[1451],[],{"type":27,"tag":28,"props":4082,"children":4083},{},[4084],{"type":32,"value":4085},"　どうやら、この２年間で開発環境が様変わりしていたようです。",{"type":27,"tag":35,"props":4087,"children":4088},{},[4089,4094,4099],{"type":27,"tag":39,"props":4090,"children":4091},{},[4092],{"type":32,"value":4093},"Vue2　→　Vue3",{"type":27,"tag":39,"props":4095,"children":4096},{},[4097],{"type":32,"value":4098},"Nuxt2　→　Nuxt3",{"type":27,"tag":39,"props":4100,"children":4101},{},[4102],{"type":32,"value":4103},"Nuxt Content　→　Nuxt Content V2",{"type":27,"tag":28,"props":4105,"children":4106},{},[4107],{"type":32,"value":4108},"　おまけに、インストールコマンドまで変わっていました。たった２年間で浦島太郎です。",{"type":27,"tag":74,"props":4110,"children":4111},{},[],{"type":27,"tag":138,"props":4113,"children":4115},{"id":4114},"vue-はオワコンなのか",[4116],{"type":32,"value":4117},"Vue はオワコンなのか？",{"type":27,"tag":28,"props":4119,"children":4120},{},[4121],{"type":32,"value":4122},"　そのままインストールすると最新バージョンになって動かないのなら、古いバージョンを指定してインストールすれば動くかもしれません。ただ、これは持続可能ではありません。Vue2 の公式サポートが2023年で終了したからです。",{"type":27,"tag":35,"props":4124,"children":4125},{},[4126],{"type":27,"tag":39,"props":4127,"children":4128},{},[4129],{"type":27,"tag":43,"props":4130,"children":4133},{"href":4131,"rel":4132},"https:\u002F\u002Frealengineer.link\u002Fnuxt3-upgrade",[986],[4134],{"type":32,"value":4135},"🔗Vue.jsはオワコンになり、Vue3は衰退する。Nuxt2からNuxt3へのアップデートは破壊的変更が多すぎて移行できないからだ",{"type":27,"tag":28,"props":4137,"children":4138},{},[4139],{"type":32,"value":4140},"を読むと、お先真っ暗な感じです。",{"type":27,"tag":28,"props":4142,"children":4143},{},[4144,4146,4152,4154,4160,4162,4168,4169,4175],{"type":32,"value":4145},"　それでも、",{"type":27,"tag":527,"props":4147,"children":4149},{"className":4148},[],[4150],{"type":32,"value":4151},"Vue",{"type":32,"value":4153}," + ",{"type":27,"tag":527,"props":4155,"children":4157},{"className":4156},[],[4158],{"type":32,"value":4159},"Nuxt",{"type":32,"value":4161}," を捨てて、",{"type":27,"tag":527,"props":4163,"children":4165},{"className":4164},[],[4166],{"type":32,"value":4167},"React",{"type":32,"value":4153},{"type":27,"tag":527,"props":4170,"children":4172},{"className":4171},[],[4173],{"type":32,"value":4174},"Next",{"type":32,"value":4176}," へ鞍替えしようとは思いません。乗り換えは最後の手段です。",{"type":27,"tag":28,"props":4178,"children":4179},{},[4180],{"type":32,"value":4181},"　冷静になると、",{"type":27,"tag":228,"props":4183,"children":4184},{},[4185,4190,4195,4200,4205],{"type":27,"tag":39,"props":4186,"children":4187},{},[4188],{"type":32,"value":4189},"Vue3,Nuxt3 を新しいフレームワークだと思って学ぶ。",{"type":27,"tag":39,"props":4191,"children":4192},{},[4193],{"type":32,"value":4194},"Vue2,Nuxt2 と似ている部分は、慣れている分だけラッキーと考える。",{"type":27,"tag":39,"props":4196,"children":4197},{},[4198],{"type":32,"value":4199},"現行システムのロジックをベースに Vue3,Nuxt3 で書き直す。",{"type":27,"tag":39,"props":4201,"children":4202},{},[4203],{"type":32,"value":4204},"モジュール対応が遅れていれば、代替手段を模索する。",{"type":27,"tag":39,"props":4206,"children":4207},{},[4208],{"type":32,"value":4209},"それでもだめなら、旧バージョンでしのぎつつ、React等への移行を検討。",{"type":27,"tag":28,"props":4211,"children":4212},{},[4213],{"type":32,"value":4214},"、、、と方針が固まってきました。",{"type":27,"tag":87,"props":4216,"children":4220},{"src":4217,"alt":4218,"className":4219},"\u002Fimg\u002Fvuenuxt.jpg","Vue3,Nuxt3",[1873],[],{"type":27,"tag":74,"props":4222,"children":4223},{},[],{"type":27,"tag":138,"props":4225,"children":4227},{"id":4226},"vue3nuxt3-を学び現行システムを書き直してみる",[4228],{"type":32,"value":4229},"Vue3,Nuxt3 を学び、現行システムを書き直してみる",{"type":27,"tag":28,"props":4231,"children":4232},{},[4233],{"type":32,"value":4234},"　新・旧の書き方が混在した解説資料が多い中、",{"type":27,"tag":35,"props":4236,"children":4237},{},[4238],{"type":27,"tag":39,"props":4239,"children":4240},{},[4241],{"type":27,"tag":43,"props":4242,"children":4244},{"href":4243},"#nuxtsite",[4245],{"type":32,"value":4246},"🔗はじめてつくるNuxtサイト: 最新Nuxtの基礎と使い方をしっかりマスターできる！",{"type":27,"tag":28,"props":4248,"children":4249},{},[4250],{"type":32,"value":4251},"ならば、Nuxtバージョンv3.5.2、全編Composition API + script setupを使用……とあるので大丈夫そうです。",{"type":27,"tag":519,"props":4253,"children":4258},{"className":4254,"code":4256,"language":4257,"meta":8},[4255],"language-_slug.vue","\u002F\u002F pages\u002Farticles\u002F_slug.vue　【 旧バージョン 】\n\u003Cscript>\n  export default {\n    async asyncData ({ $content, params, redirect, store }) {\n      const content = await $content('articles').where({ path: '\u002Farticles\u002F' + params.slug }).fetch()\n      if (content.length > 0) {\n        return {\n          content: content[0],\n          contenturl: store.state.baseurl + content[0].path,\n          imgurl: store.state.baseurl + '\u002Fimg\u002F' + content[0].thumbnail\n        }\n      } else {\n        redirect('\u002Farticles')\n      }\n    },\n    head () {\n  ・・・・・・\n      ↓\n\n\u002F\u002F pages\u002Farticles\u002F[slug].vue　【 新バージョン 】\n\u003Cscript setup>\n  const route = useRoute()\n  const path = route.path\n  const { data: content } = await useAsyncData(path,() => queryContent(path).findOne())\n  const h1title = content.title\n  const formatDate = (date) => new Date(date).toLocaleDateString()\n  const contenturl = useBaseurl() + content._path\n  const imgurl = useBaseurl() + '\u002Fimg\u002F' + content.thumbnail\n\n  useHead({\n  ・・・・・・\n","_slug.vue",[4259],{"type":27,"tag":527,"props":4260,"children":4261},{"__ignoreMap":8},[4262],{"type":32,"value":4256},{"type":27,"tag":28,"props":4264,"children":4265},{},[4266,4268,4273,4275,4281],{"type":32,"value":4267},"、、、比べてみると、ずいぶん書き方が違います。ファイル名も ",{"type":27,"tag":527,"props":4269,"children":4271},{"className":4270},[],[4272],{"type":32,"value":4257},{"type":32,"value":4274}," → ",{"type":27,"tag":527,"props":4276,"children":4278},{"className":4277},[],[4279],{"type":32,"value":4280},"[slug].vue",{"type":32,"value":4282}," と変わりました。",{"type":27,"tag":28,"props":4284,"children":4285},{},[4286,4288],{"type":32,"value":4287},"　use で始まる Composables関数 は、Nuxt3 側が用意してくれたものが大幅に増えたうえに、簡単に自作してどこでも使えるようになりました。 → ",{"type":27,"tag":43,"props":4289,"children":4292},{"href":4290,"rel":4291},"https:\u002F\u002Fzenn.dev\u002Fperaichi_blog\u002Farticles\u002F1504fb916d9d88",[986],[4293],{"type":32,"value":4294},"🔗Nuxt3の本気を見た～Composablesの可能性～",{"type":27,"tag":74,"props":4296,"children":4297},{},[],{"type":27,"tag":138,"props":4299,"children":4301},{"id":4300},"ページの構成をすっきりさせてみる",[4302],{"type":32,"value":4300},{"type":27,"tag":28,"props":4304,"children":4305},{},[4306],{"type":32,"value":4307},"　これまでは、次のようになっていました。",{"type":27,"tag":519,"props":4309,"children":4314},{"className":4310,"code":4312,"language":4313,"meta":8},[4311],"language-page.txt","pages\n ├ articles\n ｜  ├ page\n ｜  ｜  └ _id.vue\n ｜  ├ index.vue\n ｜  └ _slug.vue  ⇒　各記事表示用ページ\n ├ category\n ｜  └ _slug\n ｜      ├ page\n ｜      ｜  └ _id.vue\n ｜      └ index.vue\n ├ tag\n ｜  └ _slug\n ｜      ├ page\n ｜      ｜  └ _id.vue\n ｜      └ index.vue\n └ index.vue\n","page.txt",[4315],{"type":27,"tag":527,"props":4316,"children":4317},{"__ignoreMap":8},[4318],{"type":32,"value":4312},{"type":27,"tag":28,"props":4320,"children":4321},{},[4322],{"type":32,"value":4323},"　_slug.vue 以外の7つのvueファイルは、記事一覧表示用なので基本的なつくりは同じです。",{"type":27,"tag":28,"props":4325,"children":4326},{},[4327,4328,4334,4335,4341,4343,4350],{"type":32,"value":4145},{"type":27,"tag":527,"props":4329,"children":4331},{"className":4330},[],[4332],{"type":32,"value":4333},"category",{"type":32,"value":4063},{"type":27,"tag":527,"props":4336,"children":4338},{"className":4337},[],[4339],{"type":32,"value":4340},"tag",{"type":32,"value":4342}," など ",{"type":27,"tag":43,"props":4344,"children":4347},{"href":4345,"rel":4346},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FGlossary\u002FLiteral",[986],[4348],{"type":32,"value":4349},"🔗リテラル",{"type":32,"value":4351},"　を打って各動作を指定する必要があったため、別々に作っていました。前回、「layout は、うまく使えず、原因不明のままです。……」となっていましたが、今回は何とかしたいものです。",{"type":27,"tag":28,"props":4353,"children":4354},{},[4355],{"type":32,"value":4356},"　処理を分ける際のネックとなっていたのが、オブジェクトのキーの指定です。",{"type":27,"tag":35,"props":4358,"children":4359},{},[4360],{"type":27,"tag":39,"props":4361,"children":4362},{},[4363],{"type":27,"tag":43,"props":4364,"children":4367},{"href":4365,"rel":4366},"https:\u002F\u002Fzenn.dev\u002Fry_km\u002Farticles\u002Fuse-variables-with-object-key-in-js",[986],[4368],{"type":32,"value":4369},"🔗JavaScriptでObjectのKeyに変数展開する",{"type":27,"tag":28,"props":4371,"children":4372},{},[4373],{"type":32,"value":4374},"　を読んでやってみたら、リテラル を打たなくてよくなりました。",{"type":27,"tag":519,"props":4376,"children":4381},{"className":4377,"code":4379,"language":4380,"meta":8},[4378],"language-_id.vue","\u002F\u002F pages\u002Fcategory\u002F_slug\u002Fpage\u002F_id.vue\n  async asyncData ({ store, $content, params, redirect }) {\n    const ipp = store.state.indexPerPage\n    const h1title = store.getters.getCategoryTextBySlug(params.slug)\n                                  \u002F\u002F Categoryテキスト取得専用メソッド\n    ............\n    const content = await $content({ deep: true })\n      .where({ category: { $contains: params.slug } })\n                    \u002F\u002F リテラル【 category 】をObjectのKeyに指定\n      .sortBy('createdAt', 'desc')\n      .skip(pfrom).limit(ipp)\n      .fetch()\n　　・・・・・・\n        ↓\n\n\u002F\u002F pages\u002Fcategory\u002F[slug]\u002Fpage\u002F[id].vue\n　......\n  const ipp = useIndexPerPage()\n  ......\n  \u002F\u002F コンテンツの種類による場合分け\n  if (route.params.slug) {\n    if (mapCat.get(route.params.slug)) {\n      parent = 'category'\n      child = route.params.slug\n      h1title = mapCat.get(child)   \u002F\u002F 連想配列からCategoryテキスト取得\n    } else {\n      if (mapTag.get(route.params.slug)) {\n        parent = 'tag'\n        child = route.params.slug\n        h1title = mapTag.get(child) \u002F\u002F 連想配列からTagテキスト取得\n      }\n  ............\n  const { data: contents } = await useAsyncData(rpath,() => queryContent('articles')\n      .where({[parent]:{$contains:child}})\n                   \u002F\u002F 【 [変数] 】でObjectのKeyに変数展開\n      .sort({createdAt:-1, $numeric:true})    \u002F\u002F 日付を数値順でソート\n      .skip(pfrom).limit(ipp) \n      .find()\n　　・・・・・・\n","_id.vue",[4382],{"type":27,"tag":527,"props":4383,"children":4384},{"__ignoreMap":8},[4385],{"type":32,"value":4379},{"type":27,"tag":28,"props":4387,"children":4388},{},[4389,4391,4397,4399,4405,4407,4413,4414,4420],{"type":32,"value":4390},"　これで、7つのVueファイルのコードを共通化できます。",{"type":27,"tag":527,"props":4392,"children":4394},{"className":4393},[],[4395],{"type":32,"value":4396},"layouts",{"type":32,"value":4398}," フォルダに ",{"type":27,"tag":527,"props":4400,"children":4402},{"className":4401},[],[4403],{"type":32,"value":4404},"listing.vue",{"type":32,"value":4406}," として保存し、",{"type":27,"tag":527,"props":4408,"children":4410},{"className":4409},[],[4411],{"type":32,"value":4412},"index.vue",{"type":32,"value":4063},{"type":27,"tag":527,"props":4415,"children":4417},{"className":4416},[],[4418],{"type":32,"value":4419},"[id].vue",{"type":32,"value":4421}," は次のように書いておけばよいのです。",{"type":27,"tag":519,"props":4423,"children":4427},{"className":4424,"code":4426,"language":4412,"meta":8},[4425],"language-index.vue","\u003Ctemplate>\n  \u003CNuxtLayout name=\"listing\"> \n    \n    ※ listing.vue の \u003Cslot \u002F> に差し込む中身があれば書く\n\n  \u003C\u002FNuxtLayout>\n\u003C\u002Ftemplate>\n",[4428],{"type":27,"tag":527,"props":4429,"children":4430},{"__ignoreMap":8},[4431],{"type":32,"value":4426},{"type":27,"tag":28,"props":4433,"children":4434},{},[4435,4437,4442],{"type":32,"value":4436},"　結果的に、7つのVueファイルは同じものになりました。コードを修正するときは、",{"type":27,"tag":527,"props":4438,"children":4440},{"className":4439},[],[4441],{"type":32,"value":4404},{"type":32,"value":4443}," だけをいじればよく、保守性がアップしました。",{"type":27,"tag":74,"props":4445,"children":4446},{},[],{"type":27,"tag":138,"props":4448,"children":4450},{"id":4449},"デプロイに四苦八苦",[4451],{"type":32,"value":4449},{"type":27,"tag":28,"props":4453,"children":4454},{},[4455],{"type":32,"value":4456},"　ブログシステムがだいたい動くようになったので、デプロイ（ネットにアップ）してみることにしました。",{"type":27,"tag":28,"props":4458,"children":4459},{},[4460],{"type":32,"value":4461},"　「 GitHubのリモートリポジトリにプッシュ → Cloudflare Pages に自動デプロイ 」という設定にしていたので、更新は楽でした。",{"type":27,"tag":28,"props":4463,"children":4464},{},[4465],{"type":32,"value":4466},"　ところが、「Cloudflare PagesとGitHubのリポジトリを連携させ、接続するGitリポジトリを選んで……」という手順で、今回の新しいリポジトリを選択しようとしましたがうまくいきません。どうやら、いったんプロジェクトを削除してやり直すしかないようです。削除を試みましたが、エラーでそれもできません。『最初が肝心』と思い知らされました。",{"type":27,"tag":87,"props":4468,"children":4472},{"src":4469,"alt":4470,"className":4471},"\u002Fimg\u002Fuploadfailed.jpg","アップロード失敗",[1792],[],{"type":27,"tag":28,"props":4474,"children":4475},{},[4476],{"type":32,"value":4477},"　次の手として、「前のGitHubリモートリポジトリをクローンしてローカルリポジトリを作り、そこに新しいブログシステムを移す」ことにしました。",{"type":27,"tag":35,"props":4479,"children":4480},{},[4481,4486,4491,4496,4501],{"type":27,"tag":39,"props":4482,"children":4483},{},[4484],{"type":32,"value":4485},"「ローカルリポジトリに前のデータがあるけど、新しいプログラムをインストールするときに邪魔になるかな？」",{"type":27,"tag":39,"props":4487,"children":4488},{},[4489],{"type":32,"value":4490},"「マークダウンファイルや画像ファイルは邪魔にならないはずだから、残しておいていいのでは？」",{"type":27,"tag":39,"props":4492,"children":4493},{},[4494],{"type":32,"value":4495},"「あれれ？！　インストールしようとしたら、'空っぽのフォルダじゃないとダメ'って怒られた！」",{"type":27,"tag":39,"props":4497,"children":4498},{},[4499],{"type":32,"value":4500},"「でも、空っぽにしたら、リモートリポジトリにプッシュできなくなるのでは？」",{"type":27,"tag":39,"props":4502,"children":4503},{},[4504],{"type":32,"value":4505},"「あーー　詰んだ、、、、」",{"type":27,"tag":87,"props":4507,"children":4511},{"src":4508,"alt":4509,"className":4510},"\u002Fimg\u002Fclogged.jpg","詰んだ",[1451],[],{"type":27,"tag":28,"props":4513,"children":4514},{},[4515],{"type":32,"value":4516},"　あきらめの悪いハダノは、",{"type":27,"tag":35,"props":4518,"children":4519},{},[4520],{"type":27,"tag":39,"props":4521,"children":4522},{},[4523],{"type":27,"tag":43,"props":4524,"children":4527},{"href":4525,"rel":4526},"https:\u002F\u002Fzenn.dev\u002Futa_mory\u002Farticles\u002Ff8bad2ffa86d99",[986],[4528],{"type":32,"value":4529},"🔗create-nuxt-appで既存のディレクトリを上書きできるようになった",{"type":27,"tag":28,"props":4531,"children":4532},{},[4533,4535,4541,4543,4549,4551,4557],{"type":32,"value":4534},"という記事を見つけ前を向こうとしますが、",{"type":27,"tag":527,"props":4536,"children":4538},{"className":4537},[],[4539],{"type":32,"value":4540},"--overwrite-dir",{"type":32,"value":4542},"フラグが廃止されたと知ってガックリ。そもそも ",{"type":27,"tag":527,"props":4544,"children":4546},{"className":4545},[],[4547],{"type":32,"value":4548},"create-nuxt-app",{"type":32,"value":4550}," は、",{"type":27,"tag":527,"props":4552,"children":4554},{"className":4553},[],[4555],{"type":32,"value":4556},"Nuxt2",{"type":32,"value":4558}," 時代のものでした。",{"type":27,"tag":28,"props":4560,"children":4561},{},[4562,4564,4570,4572,4578,4580,4587],{"type":32,"value":4563},"　「もしや、",{"type":27,"tag":527,"props":4565,"children":4567},{"className":4566},[],[4568],{"type":32,"value":4569},"Nuxt3",{"type":32,"value":4571}," のインストールコマンド ",{"type":27,"tag":527,"props":4573,"children":4575},{"className":4574},[],[4576],{"type":32,"value":4577},"npx nuxi init",{"type":32,"value":4579}," に何かないか？」と思って ",{"type":27,"tag":43,"props":4581,"children":4584},{"href":4582,"rel":4583},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fapi\u002Fcommands\u002Finit",[986],[4585],{"type":32,"value":4586},"🔗Nuxt公式ページ",{"type":32,"value":4588}," を見ると、",{"type":27,"tag":28,"props":4590,"children":4591},{},[4592,4598],{"type":27,"tag":527,"props":4593,"children":4595},{"className":4594},[],[4596],{"type":32,"value":4597},"--force 〔Force clone to any existing directory.〕",{"type":32,"value":4599}," というオプションがあるではありませんか。",{"type":27,"tag":28,"props":4601,"children":4602},{},[4603],{"type":32,"value":4604},"　最終的に、",{"type":27,"tag":519,"props":4606,"children":4611},{"className":4607,"code":4609,"language":4610,"meta":8},[4608],"language-nuxt3blog.txt","1. GitHubのリモートリポジトリをクローンし、.gitフォルダ 以外を削除。\n2. 親フォルダへ移動し、Nuxtプロジェクトを上書き作成（content も同時に）。\n  > npx nuxi init プロジェクト名 --force -t content\n  ☑npm\n3. gitリポジトリは初期化せず、既存のものを使う。\n  > Initialize git repository?\n  □Yes \u002F ☑No\n4. モジュール（@nuxtjs\u002Fgoogle-adsense, @nuxtjs\u002Fseo）をインストール。\n5. だいたい動くプロジェクトからファイルをコピー（.nuxt, node_modules以外 ）。\n6. nuxt.config.ts等を修正し、npm run dev で動作確認。\n7. GitHubへコミット・プッシュ。\n8．Cloudflare Pages デプロイの詳細-ビルドログを確認。\n","nuxt3blog.txt",[4612],{"type":27,"tag":527,"props":4613,"children":4614},{"__ignoreMap":8},[4615],{"type":32,"value":4609},{"type":27,"tag":28,"props":4617,"children":4618},{},[4619],{"type":32,"value":4620},"という流れで、やっとデプロイにこぎつけました。",{"type":27,"tag":28,"props":4622,"children":4623},{},[4624,4626,4632,4633,4639,4641,4647],{"type":32,"value":4625},"　ビルド コマンド：",{"type":27,"tag":527,"props":4627,"children":4629},{"className":4628},[],[4630],{"type":32,"value":4631},"npx nuxt generate",{"type":32,"value":4063},{"type":27,"tag":527,"props":4634,"children":4636},{"className":4635},[],[4637],{"type":32,"value":4638},"NODE_VERSION",{"type":32,"value":4640},"：",{"type":27,"tag":527,"props":4642,"children":4644},{"className":4643},[],[4645],{"type":32,"value":4646},"20.11.0",{"type":32,"value":4648},"　などの変更をし、",{"type":27,"tag":28,"props":4650,"children":4651},{},[4652,4659],{"type":27,"tag":43,"props":4653,"children":4656},{"href":4654,"rel":4655},"https:\u002F\u002Fqiita.com\u002Fnegitoro001\u002Fitems\u002F37ce4b4e7ef34bbcd920",[986],[4657],{"type":32,"value":4658},"🔗ビルドエラー回避のため、nuxt.config.ts に",{"type":32,"value":4660}," 以下を加えました。",{"type":27,"tag":519,"props":4662,"children":4667},{"className":4663,"code":4665,"language":4666,"meta":8},[4664],"language-nuxt.config.ts","  nitro:{\n    prerender: {\n        failOnError: false,\n        },\n  },\n","nuxt.config.ts",[4668],{"type":27,"tag":527,"props":4669,"children":4670},{"__ignoreMap":8},[4671],{"type":32,"value":4665},{"type":27,"tag":28,"props":4673,"children":4674},{},[4675,4677,4683],{"type":32,"value":4676},"　開発環境では動いたのに、本番環境では動かず（リロードが必要）、",{"type":27,"tag":527,"props":4678,"children":4680},{"className":4679},[],[4681],{"type":32,"value":4682},"useAsyncData",{"type":32,"value":4684}," のキャッシュ制御を見直す一幕もありましたが、何とか予定したものができあがりました。",{"type":27,"tag":74,"props":4686,"children":4687},{},[],{"type":27,"tag":138,"props":4689,"children":4691},{"id":4690},"_2024524追記pre-transform-error",[4692],{"type":32,"value":4693},"【2024\u002F5\u002F24追記】Pre-transform error",{"type":27,"tag":519,"props":4695,"children":4700},{"className":4696,"code":4698,"language":4699,"meta":8},[4697],"language-rundev.bat","cd c:\\nuxth\\nuxthblog\nnpm run dev\ncmd \u002Fk\n","rundev.bat",[4701],{"type":27,"tag":527,"props":4702,"children":4703},{"__ignoreMap":8},[4704],{"type":32,"value":4698},{"type":27,"tag":28,"props":4706,"children":4707},{},[4708],{"type":32,"value":4709},"　いつものバッチファイル（rundev.bat）でエラーが出たので調べると、",{"type":27,"tag":35,"props":4711,"children":4712},{},[4713],{"type":27,"tag":39,"props":4714,"children":4715},{},[4716],{"type":27,"tag":43,"props":4717,"children":4720},{"href":4718,"rel":4719},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fissues\u002F25941",[986],[4721],{"type":32,"value":4722},"🔗ERROR Pre-transform error: path should be a path.relative()d string, but got \"c:\u002Fproject\u002Ftest\u002Fplugin-vue:export-helper\" #25941",{"type":27,"tag":28,"props":4724,"children":4725},{},[4726],{"type":32,"value":4727},"という報告があがっていました。",{"type":27,"tag":35,"props":4729,"children":4730},{},[4731,4736],{"type":27,"tag":39,"props":4732,"children":4733},{},[4734],{"type":32,"value":4735},"nuxt.config.ts の modules に '@nuxt\u002Fdevtools',　を追加",{"type":27,"tag":39,"props":4737,"children":4738},{},[4739],{"type":32,"value":4740},"ターミナル（管理者）つまり PowerShell を 起動して実行",{"type":27,"tag":28,"props":4742,"children":4743},{},[4744],{"type":32,"value":4745},"で、とりあえずエラーは消えました。",{"type":27,"tag":74,"props":4747,"children":4749},{"id":4748},"pyramidcycle",[],{"type":27,"tag":138,"props":4751,"children":4753},{"id":4752},"振り返り持続可能なブログ作り-のため-学び作り続けよう",[4754],{"type":32,"value":4755},"【振り返り】持続可能なブログ作り のため 学び・作り続けよう",{"type":27,"tag":28,"props":4757,"children":4758},{},[4759],{"type":32,"value":4760},"　「今動いているシステムをバージョンアップするだけだから、一から作るより楽だろう」という考えは甘すぎました。",{"type":27,"tag":28,"props":4762,"children":4763},{},[4764],{"type":32,"value":4765},"　持続可能なシステムとは、「ピラミッドのように堅固なもの」ではなく、「自転車のように動いているもの」だと知りました。",{"type":27,"tag":28,"props":4767,"children":4768},{},[4769],{"type":32,"value":4770},"　世界は常に変化しています。完璧に見えるピラミッドも風化していきます。状況に対応しながら走り続ける自転車でありたいものです。そのためには、「学ぶ」「作る」というペダルをこぎ続けるしかありません。",{"type":27,"tag":87,"props":4772,"children":4776},{"src":4773,"alt":4774,"className":4775},"\u002Fimg\u002Fpyramidcycle.jpg","ピラミッドと自転車",[1792],[],{"type":27,"tag":28,"props":4778,"children":4779},{},[4780],{"type":32,"value":4781},"　今回、さまざまなエラーに苦しみながら実感したことは、「問題の切り分け」の大切さです。",{"type":27,"tag":35,"props":4783,"children":4784},{},[4785,4790,4795,4800,4805,4810],{"type":27,"tag":39,"props":4786,"children":4787},{},[4788],{"type":32,"value":4789},"JavaScript(Node.js) の仕様の問題",{"type":27,"tag":39,"props":4791,"children":4792},{},[4793],{"type":32,"value":4794},"Vue3 の仕様の問題",{"type":27,"tag":39,"props":4796,"children":4797},{},[4798],{"type":32,"value":4799},"Nuxt3 の仕様の問題",{"type":27,"tag":39,"props":4801,"children":4802},{},[4803],{"type":32,"value":4804},"NuxtContentV2 の仕様の問題",{"type":27,"tag":39,"props":4806,"children":4807},{},[4808],{"type":32,"value":4809},"GitHub, Cloudflare Pages の仕様の問題",{"type":27,"tag":39,"props":4811,"children":4812},{},[4813],{"type":32,"value":4814},"その他の問題",{"type":27,"tag":28,"props":4816,"children":4817},{},[4818],{"type":32,"value":4819},"、、、それぞれのレベルごとにバージョン間の互換性はあるので、新しいものが出たからといってすぐに移行しなくてもよさそうです。ただし、年代ごとに想定している環境があるので、ある程度そろえる必要があります。",{"type":27,"tag":28,"props":4821,"children":4822},{},[4823],{"type":32,"value":4824},"　例えば、JavaScriptの関数を定義する方法として、「function宣言」のほかに「アロー関数」が出てきました。現在、どちらも使用可能ですが、Vue2：function宣言 ⇒ Vue3：アロー関数 と移り変わっています。参考資料に出てくるコードを理解して利用するためには、古いやり方に固執してはいけません。逆に、新しい書き方を有効にするために、Node.js のバージョンを上げる必要も出てきます。",{"type":27,"tag":87,"props":4826,"children":4829},{"src":4827,"alt":4828,"width":91},"\u002Fimg\u002Fnuxt3dev.jpg","Nuxt3による開発",[],{"type":27,"tag":3829,"props":4831,"children":4833},{"id":4832},"ブログシステム移行で参考にした記事",[4834],{"type":32,"value":4832},{"type":27,"tag":35,"props":4836,"children":4837},{},[4838,4848,4858,4868,4878,4888,4898,4908,4918,4928],{"type":27,"tag":39,"props":4839,"children":4840},{},[4841],{"type":27,"tag":43,"props":4842,"children":4845},{"href":4843,"rel":4844},"https:\u002F\u002Fqiita.com\u002Ffruitriin\u002Fitems\u002F81691ce68cf3678f3bda",[986],[4846],{"type":32,"value":4847},"🔗Vue3の衰退を招いたのは＜script setup＞とCompositionAPIかもしれない という考察",{"type":27,"tag":39,"props":4849,"children":4850},{},[4851],{"type":27,"tag":43,"props":4852,"children":4855},{"href":4853,"rel":4854},"https:\u002F\u002Fzenn.dev\u002Fkata_n\u002Farticles\u002F6e5d57a15e96f5",[986],[4856],{"type":32,"value":4857},"🔗Vue2からVue3への変化と慣れていくためのTips",{"type":27,"tag":39,"props":4859,"children":4860},{},[4861],{"type":27,"tag":43,"props":4862,"children":4865},{"href":4863,"rel":4864},"https:\u002F\u002Freffect.co.jp\u002Fvue\u002Fnuxt3",[986],[4866],{"type":32,"value":4867},"🔗Nuxt 3を使いこなすために基礎から徹底解説",{"type":27,"tag":39,"props":4869,"children":4870},{},[4871],{"type":27,"tag":43,"props":4872,"children":4875},{"href":4873,"rel":4874},"https:\u002F\u002Fb1san-blog.com\u002Fpost\u002Fnuxt3\u002Fnuxt3-start\u002F",[986],[4876],{"type":32,"value":4877},"🔗【Nuxt 3】Nuxt 2と比較しながらはじめるNuxt 3",{"type":27,"tag":39,"props":4879,"children":4880},{},[4881],{"type":27,"tag":43,"props":4882,"children":4885},{"href":4883,"rel":4884},"https:\u002F\u002Fb1san-blog.com\u002Fpost\u002Fnuxt3\u002Fnuxt3-blog\u002F",[986],[4886],{"type":32,"value":4887},"🔗Nuxt 3 + Nuxt Content v2 による静的サイトの作成",{"type":27,"tag":39,"props":4889,"children":4890},{},[4891],{"type":27,"tag":43,"props":4892,"children":4895},{"href":4893,"rel":4894},"https:\u002F\u002Fwww.sejuku.net\u002Fblog\u002F21812",[986],[4896],{"type":32,"value":4897},"🔗【JavaScript入門】配列処理をするmap()の使い方とMapオブジェクトの解説！",{"type":27,"tag":39,"props":4899,"children":4900},{},[4901],{"type":27,"tag":43,"props":4902,"children":4905},{"href":4903,"rel":4904},"https:\u002F\u002Fqiita.com\u002Fazukiazusa\u002Fitems\u002Fb91046e9f1d618c67d7f",[986],[4906],{"type":32,"value":4907},"🔗【JavaScript】Null合体演算子と(??)とオプショナルチェイニング演算子(?.)",{"type":27,"tag":39,"props":4909,"children":4910},{},[4911],{"type":27,"tag":43,"props":4912,"children":4915},{"href":4913,"rel":4914},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FOperators\u002FDestructuring_assignment",[986],[4916],{"type":32,"value":4917},"🔗分割代入 - JavaScript | MDN",{"type":27,"tag":39,"props":4919,"children":4920},{},[4921],{"type":27,"tag":43,"props":4922,"children":4925},{"href":4923,"rel":4924},"https:\u002F\u002Fzenn.dev\u002Frivine\u002Farticles\u002F2023-06-23-deploy-hugo-to-cloudflare-pages",[986],[4926],{"type":32,"value":4927},"🔗【Cloudflare Pages】ブログを公開したい？...5分もあれば十分だ",{"type":27,"tag":39,"props":4929,"children":4930},{},[4931],{"type":27,"tag":43,"props":4932,"children":4935},{"href":4933,"rel":4934},"https:\u002F\u002Fwp-kyoto.net\u002Fdownload-cloudflare-pages-config-to-wrangler-toml\u002F",[986],[4936],{"type":32,"value":4937},"🔗Cloudflare Pagesの設定をwrangler.tomlに出力する",{"type":27,"tag":28,"props":4939,"children":4940},{},[4941],{"type":32,"value":4942},"、、、実際にやってみて、記事の時点とは状況が変わっていたものも多かったのですが、基本的な考え方は身につきました。",{"type":27,"tag":28,"props":4944,"children":4945},{},[4946],{"type":32,"value":4947},"　Vue2,Nuxt2 に慣れた人からすると「破壊的変更」かもしれませんが、Vue3,Nuxt3 になって「素のJavaScript」に近づいた感じがします。ネストが浅くすっきり書けるので、言われるほど悪くありません。それどころか、もっと新しい書き方を試してみたくなります。",{"type":27,"tag":74,"props":4949,"children":4950},{},[],{"type":27,"tag":3829,"props":4952,"children":4953},{"id":3831},[4954],{"type":32,"value":3831},{"type":27,"tag":28,"props":4956,"children":4957},{},[4958,4960,4965],{"type":32,"value":4959},"　自前のブログシステムなので、使っていきながら改良していきます（",{"type":27,"tag":55,"props":4961,"children":4962},{},[4963],{"type":32,"value":4964},"自転車操業",{"type":32,"value":4966},"になるかも？）。中身が全部わかっているというのは、安心です。",{"type":27,"tag":28,"props":4968,"children":4969},{},[4970],{"type":32,"value":3843},{"type":27,"tag":74,"props":4972,"children":4974},{"id":4973},"nuxtsite",[],{"type":27,"tag":145,"props":4976,"children":4978},{"className":4977},[2106],[4979,4980,4993,4994],{"type":32,"value":2109},{"type":27,"tag":145,"props":4981,"children":4983},{"className":4982},[2113],[4984],{"type":27,"tag":43,"props":4985,"children":4988},{"target":2117,"rel":4986,"href":4987},[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%2FB0B5N8QJ2Y",[4989],{"type":27,"tag":87,"props":4990,"children":4992},{"src":4991},"https:\u002F\u002Fimages-fe.ssl-images-amazon.com\u002Fimages\u002FI\u002F418GAr5ISQL._SL160_.jpg",[],{"type":32,"value":2109},{"type":27,"tag":145,"props":4995,"children":4997},{"className":4996},[2130],[4998,4999,5009,5010,5029,5030,5046],{"type":32,"value":2133},{"type":27,"tag":145,"props":5000,"children":5002},{"className":5001},[2137],[5003],{"type":27,"tag":43,"props":5004,"children":5006},{"target":2117,"rel":5005,"href":4987},[2119],[5007],{"type":32,"value":5008},"はじめてつくるNuxtサイト: 最新Nuxtの基礎と使い方をしっかりマスターできる！",{"type":32,"value":2133},{"type":27,"tag":145,"props":5011,"children":5013},{"className":5012},[2149],[5014,5017,5019,5022,5024,5027],{"type":27,"tag":74,"props":5015,"children":5016},{},[],{"type":32,"value":5018},"※ タイトルと価格だけ見ると、Nuxt2の運用経験のあるハダノには不要な本なのかと思いました。",{"type":27,"tag":74,"props":5020,"children":5021},{},[],{"type":32,"value":5023},"実際に購入してみると、Nuxt3ブログの具体的な作り方が過不足なく載っていて、非常に参考になりました。",{"type":27,"tag":74,"props":5025,"children":5026},{},[],{"type":32,"value":5028},"Nuxt3の本は多くないので、貴重な存在です。",{"type":32,"value":2133},{"type":27,"tag":145,"props":5031,"children":5034},{"className":5032},[2170,5033],"__one",[5035,5036,5045],{"type":32,"value":2188},{"type":27,"tag":145,"props":5037,"children":5038},{},[5039],{"type":27,"tag":43,"props":5040,"children":5043},{"className":5041,"target":2117,"rel":5042,"href":4987},[2181,2195],[2119],[5044],{"type":32,"value":2200},{"type":32,"value":2133},{"type":32,"value":2109},{"type":27,"tag":74,"props":5048,"children":5049},{"id":3846},[],{"type":27,"tag":145,"props":5051,"children":5053},{"className":5052},[2106],[5054,5055,5068,5069],{"type":32,"value":2109},{"type":27,"tag":145,"props":5056,"children":5058},{"className":5057},[2113],[5059],{"type":27,"tag":43,"props":5060,"children":5063},{"target":2117,"rel":5061,"href":5062},[2119],"https:\u002F\u002Fhb.afl.rakuten.co.jp\u002Fichiba\u002F26ba9fc2.c2fdf85a.26ba9fc3.8edde063\u002F_RTLink57027?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fbook%2F17815167%2F&link_type=hybrid_url&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJoeWJyaWRfdXJsIiwic2l6ZSI6IjI0MHgyNDAiLCJuYW0iOjEsIm5hbXAiOiJyaWdodCIsImNvbSI6MSwiY29tcCI6ImRvd24iLCJwcmljZSI6MSwiYm9yIjoxLCJjb2wiOjEsImJidG4iOjAsInByb2QiOjAsImFtcCI6ZmFsc2V9",[5064],{"type":27,"tag":87,"props":5065,"children":5067},{"src":5066},"https:\u002F\u002Fthumbnail.image.rakuten.co.jp\u002F@0_mall\u002Fbook\u002Fcabinet\u002F0546\u002F4910071890546_1_2.jpg?_ex=240x240",[],{"type":32,"value":2109},{"type":27,"tag":145,"props":5070,"children":5072},{"className":5071},[2130],[5073,5074,5084,5085,5103,5104,5141],{"type":32,"value":2133},{"type":27,"tag":145,"props":5075,"children":5077},{"className":5076},[2137],[5078],{"type":27,"tag":43,"props":5079,"children":5081},{"target":2117,"rel":5080,"href":5062},[2119],[5082],{"type":32,"value":5083},"日経ソフトウエア 2024年 5月号 [雑誌]",{"type":32,"value":2133},{"type":27,"tag":145,"props":5086,"children":5088},{"className":5087},[2149],[5089,5092,5093,5096,5098,5101],{"type":27,"tag":74,"props":5090,"children":5091},{},[],{"type":32,"value":3891},{"type":27,"tag":74,"props":5094,"children":5095},{},[],{"type":32,"value":5097},"流行をおさえているので、最近はPythonの記事が多めですが、3月号と5月号にはJavaScriptの特集がありました。",{"type":27,"tag":74,"props":5099,"children":5100},{},[],{"type":32,"value":5102},"アロー関数・Mapオブジェクト・スプレッド構文などの解説には目を開かされました。",{"type":32,"value":2133},{"type":27,"tag":145,"props":5105,"children":5107},{"className":5106},[2170,2171],[5108,5109,5118,5119,5129,5130,5140],{"type":32,"value":2174},{"type":27,"tag":145,"props":5110,"children":5111},{},[5112],{"type":27,"tag":43,"props":5113,"children":5116},{"className":5114,"target":2117,"rel":5115,"href":5062},[2181,2182],[2119],[5117],{"type":32,"value":2186},{"type":32,"value":2188},{"type":27,"tag":145,"props":5120,"children":5121},{},[5122],{"type":27,"tag":43,"props":5123,"children":5127},{"className":5124,"target":2117,"rel":5125,"href":5126},[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%2FB0CX5BD7TT",[5128],{"type":32,"value":2200},{"type":32,"value":2188},{"type":27,"tag":145,"props":5131,"children":5132},{},[5133],{"type":27,"tag":43,"props":5134,"children":5138},{"className":5135,"target":2117,"rel":5136,"href":5137},[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%2Fneowing%2Fneobk-2957123.html%3Fsc_i%3Dshopping-pc-web-result-item-rsltlst-title",[5139],{"type":32,"value":2213},{"type":32,"value":2133},{"type":32,"value":2109},{"type":27,"tag":74,"props":5143,"children":5144},{},[],{"type":27,"tag":328,"props":5146,"children":5147},{},[],{"type":27,"tag":28,"props":5149,"children":5150},{},[5151],{"type":27,"tag":43,"props":5152,"children":5153},{"href":3990},[5154],{"type":32,"value":5155},"←前へ　Nuxt+Content+Cloudflareで無料でブログを作ってみた",{"type":27,"tag":28,"props":5157,"children":5158},{},[5159],{"type":27,"tag":43,"props":5160,"children":5161},{"href":45},[5162],{"type":32,"value":5163},"次へ→　ブログのコード修正",{"title":8,"searchDepth":2518,"depth":2518,"links":5165},[5166],{"id":4000,"depth":2518,"text":3970,"children":5167},[5168,5169,5170,5171,5172,5173,5174],{"id":4014,"depth":2523,"text":4017},{"id":4114,"depth":2523,"text":4117},{"id":4226,"depth":2523,"text":4229},{"id":4300,"depth":2523,"text":4300},{"id":4449,"depth":2523,"text":4449},{"id":4690,"depth":2523,"text":4693},{"id":4752,"depth":2523,"text":4755},"content:articles:blog-2.md","articles\u002Fblog-2.md","articles\u002Fblog-2",{"_path":5179,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":5180,"description":5181,"category":5182,"tag":5184,"thumbnail":5187,"createdAt":5188,"updatedAt":5189,"body":5190,"_type":2532,"_id":5652,"_source":2534,"_file":5653,"_stem":5654,"_extension":2537},"\u002Farticles\u002Fsoclicker-3","ソックリッカーの始め方【自校運用】","授業配信アプリ「ソックリッカー」のReplitによる自校運用法",[5183],"giga-school",[5185,5186,19,18],"soclicker","active-learning","soclickerif.jpg","2022\u002F6\u002F25","2022\u002F7\u002F5",{"type":24,"children":5191,"toc":5646},[5192,5197,5200,5206,5226,5242,5300,5304,5331,5334,5339,5344,5357,5362,5365,5370,5373,5378,5391,5400,5405,5408,5416,5424,5432,5440,5448,5456,5472,5480,5539,5543,5631,5634,5637],{"type":27,"tag":28,"props":5193,"children":5194},{},[5195],{"type":32,"value":5196},"　この記事では、授業配信アプリ「ソックリッカー」の始め方を解説します。クラウド統合開発環境Replit（リプリット）による自校運用の方法です。kyodx.com上に配置されたソックリッカー（デモ版）は、どなたでも無料で使えます。しかし、本格的に授業に活用したい場合は、自校運用されることをおすすめします。大切な教育データを自校で管理でき、安心・便利です。設問データや生徒の入力結果の管理はもちろん、ソックリッカーの先生名の削除も自分でできるのです。",{"type":27,"tag":74,"props":5198,"children":5199},{},[],{"type":27,"tag":78,"props":5201,"children":5203},{"id":5202},"ソックリッカーの始め方ict担当者主体で",[5204],{"type":32,"value":5205},"ソックリッカーの始め方（ICT担当者主体で）",{"type":27,"tag":228,"props":5207,"children":5208},{},[5209,5214],{"type":27,"tag":39,"props":5210,"children":5211},{},[5212],{"type":32,"value":5213},"Googleアカウント取得。学校代表のGoogleアカウントでよい。",{"type":27,"tag":39,"props":5215,"children":5216},{},[5217,5224],{"type":27,"tag":43,"props":5218,"children":5221},{"href":5219,"rel":5220},"https:\u002F\u002Freplit.com\u002F~",[986],[5222],{"type":32,"value":5223},"🔗Replit",{"type":32,"value":5225}," に[Continue with Google]で[Sign up]し、アカウントを設定。左上の ≡ - [+Create]をクリック、Titleにプロジェクト名（soclicker 等）、Languageは[HTML,CSS,JS]を選択し、[+Create Repl]をクリック。",{"type":27,"tag":28,"props":5227,"children":5228},{},[5229,5236],{"type":27,"tag":87,"props":5230,"children":5235},{"src":5231,"alt":5232,"className":5233},"\u002Fimg\u002Freplitlogin.jpg","replitlogin",[5234],"imgh",[],{"type":27,"tag":87,"props":5237,"children":5241},{"src":5238,"alt":5239,"className":5240},"\u002Fimg\u002Fcreaterepl.jpg","createrepl",[5234],[],{"type":27,"tag":228,"props":5243,"children":5244},{"start":2523},[5245,5250,5264,5278,5283,5288],{"type":27,"tag":39,"props":5246,"children":5247},{},[5248],{"type":32,"value":5249},"JavaScriptプログラムは、基本的にhtmlファイルに組み込んで動作させる。ローカルファイルをFiles欄にドラッグ＆ドロップするか、コードエディタで直接書くかする。",{"type":27,"tag":39,"props":5251,"children":5252},{},[5253,5255,5262],{"type":32,"value":5254},"ソックリッカーを自校運用するには、",{"type":27,"tag":43,"props":5256,"children":5259},{"href":5257,"rel":5258},"https:\u002F\u002Fkyodx.com\u002Fsrc\u002Fsoclickerset.zip",[986],[5260],{"type":32,"value":5261},"🔗soclickerset.zipをダウンロード",{"type":32,"value":5263},"・解凍しておく。soclickerフォルダの中のものをすべてFiles欄にドラッグ＆ドロップする。",{"type":27,"tag":39,"props":5265,"children":5266},{},[5267,5269,5276],{"type":32,"value":5268},"ソックリッカーでは、生徒が入力したものは Replit ではなく Firebase に保存される。生徒の操作は不要で、ICT担当者が ",{"type":27,"tag":43,"props":5270,"children":5273},{"href":5271,"rel":5272},"https:\u002F\u002Fconsole.firebase.google.com\u002Fu\u002F0\u002F?hl=ja",[986],[5274],{"type":32,"value":5275},"🔗Firebase console",{"type":32,"value":5277}," にログインし、データベース作成・管理を行う。プロジェクトの追加-プロジェクトの作成-プロジェクト名[soclicker] …… Realtime Database をテストモードで開始する。",{"type":27,"tag":39,"props":5279,"children":5280},{},[5281],{"type":32,"value":5282},"Firebase console-プロジェクトの概要[歯車]-プロジェクトの設定-全般-マイアプリ-SDKの設定と構成 で ◎構成 を選択し、📃ボタンでコピー。Replitのsoc\u002Ffbconfig.jsに貼り付け、データベースを自校のものに置き換える。",{"type":27,"tag":39,"props":5284,"children":5285},{},[5286],{"type":32,"value":5287},"Firebase console-Realtime Database-データ- 右端の≡ -JSONをインポート-参照でsoclickersetフォルダの soclicker-*****-export.json を選んでインポート。続けて、ルール-ルールを編集 で databaserule.json の記述内容の通りにし、ルールを公開する。",{"type":27,"tag":39,"props":5289,"children":5290},{},[5291,5298],{"type":27,"tag":43,"props":5292,"children":5295},{"href":5293,"rel":5294},"https:\u002F\u002Fqiita.com\u002Fniusounds\u002Fitems\u002F383a780d46ee8551e98c",[986],[5296],{"type":32,"value":5297},"🔗Firebase StorageにCORSの設定をする",{"type":32,"value":5299}," をやっておいた方がよい（同一オリジンポリシーに抵触しないため）。",{"type":27,"tag":87,"props":5301,"children":5303},{"src":128,"alt":5302,"width":91},"replsoc",[],{"type":27,"tag":228,"props":5305,"children":5307},{"start":5306},9,[5308,5313,5326],{"type":27,"tag":39,"props":5309,"children":5310},{},[5311],{"type":32,"value":5312},"Replitコード編集欄の右の Output欄の右上の ↗ (Open in a new tab) をクリックして新しいウィンドウを開く。少し待つと「ソックリッカーへようこそ」から「ソックリッカーで授業」に自動的に切り替わる。ソックリッカー子機（生徒用）へ からsoclicker.html のURLが取得できる。もし、Replitに追加したhtmlや画像をソックリッカーで使いたい場合は、指導者の方へ.txt の指示に従ってhtmlリストと画像リストを更新しておく。",{"type":27,"tag":39,"props":5314,"children":5315},{},[5316,5318,5324],{"type":32,"value":5317},"あとは、soclicker0.html に配信内容をどんどん入力し、soclicker.html のURLを生徒に公開し、先生名を入力させて授業をしていけばよい。あるいは、",{"type":27,"tag":527,"props":5319,"children":5321},{"className":5320},[],[5322],{"type":32,"value":5323},"https:\u002F\u002Fsoclicker.*******.repl.co\u002Fsoc\u002Fsoclicker.html#nonaka",{"type":32,"value":5325}," のように　末尾に #先生名 をつけたURLを生徒に渡してもよい。",{"type":27,"tag":39,"props":5327,"children":5328},{},[5329],{"type":32,"value":5330},"データベース管理者は、授業者抹消の依頼が来たら、Firebase console-Realtime Database-データ-soclicker-*****-koji の中の、該当する授業者のデータを 🗑️ でdeleteする。~Teachersの中の 授業者名も一緒にdeleteすること。",{"type":27,"tag":74,"props":5332,"children":5333},{},[],{"type":27,"tag":138,"props":5335,"children":5337},{"id":5336},"ソックリッカーの投票機能について",[5338],{"type":32,"value":5336},{"type":27,"tag":28,"props":5340,"children":5341},{},[5342],{"type":32,"value":5343},"　データを自校で管理できるようになると、ソックリッカーの投票機能が輝きを増します。",{"type":27,"tag":28,"props":5345,"children":5346},{},[5347,5349,5355],{"type":32,"value":5348},"　台湾の天才デジタル大臣オードリー・タン氏は、デジタルを駆使して市民参加型の新しい民主主義の実践に挑んでいます。1人1票ではない投票方法（クアドラティックボーディング）の導入など、画期的な事例が ",{"type":27,"tag":43,"props":5350,"children":5352},{"href":5351},"#tang",[5353],{"type":32,"value":5354},"🔗「オードリー・タンが語るデジタル民主主義」",{"type":32,"value":5356},"という本で多数紹介されています。",{"type":27,"tag":28,"props":5358,"children":5359},{},[5360],{"type":32,"value":5361},"　クアドラティックボーディングは、法案・政策・予算などの優先順位を決める投票で有効です。集計を紙上で行うのは難しいので、デジタルシステムが必要になります。授業でアイディアに順位をつける場合など、持ち点と振り分けのルールを工夫すれば、ソックリッカーで同じことができそうです。投票者の意思・志向が反映される民主的なしくみが実現するのです。",{"type":27,"tag":74,"props":5363,"children":5364},{},[],{"type":27,"tag":28,"props":5366,"children":5367},{},[5368],{"type":32,"value":5369},"※ 以下は、おまけです。しくみを知りたい方はどうぞ……",{"type":27,"tag":74,"props":5371,"children":5372},{},[],{"type":27,"tag":78,"props":5374,"children":5376},{"id":5375},"ソックリッカー自校運用の技術的な話",[5377],{"type":32,"value":5375},{"type":27,"tag":28,"props":5379,"children":5380},{},[5381,5382,5389],{"type":32,"value":709},{"type":27,"tag":43,"props":5383,"children":5386},{"href":5384,"rel":5385},"https:\u002F\u002Fkyodx.com\u002Farticles\u002Fcloudide-1",[986],[5387],{"type":32,"value":5388},"🔗クラウド統合開発環境でWebアプリの自校運用を",{"type":32,"value":5390}," の最後に",{"type":27,"tag":28,"props":5392,"children":5393},{},[5394],{"type":27,"tag":527,"props":5395,"children":5397},{"className":5396},[],[5398],{"type":32,"value":5399},"　「画像の一覧」の問題が残っていますが、これは何とかなりそうです。画像やクリップボードの扱いが独特な iPad に対応したコードを書くついでに解決します。",{"type":27,"tag":28,"props":5401,"children":5402},{},[5403],{"type":32,"value":5404},"と書いた件ですが、次のように対応しました。",{"type":27,"tag":74,"props":5406,"children":5407},{},[],{"type":27,"tag":35,"props":5409,"children":5410},{},[5411],{"type":27,"tag":39,"props":5412,"children":5413},{},[5414],{"type":32,"value":5415},"ルートのindex.htmlファイル「ソックリッカーへようこそ」に以下のコードを入れ、新しいウィンドウを開いたら自動的にsocフォルダのindex.html「ソックリッカーで授業」に移動するようにする。",{"type":27,"tag":519,"props":5417,"children":5419},{"code":5418},"    if (location.hostname.indexOf('.id.repl.co') \u003C 0) {\n      location.href = '\u002Fsoc\u002F';\n    }\n",[5420],{"type":27,"tag":527,"props":5421,"children":5422},{"__ignoreMap":8},[5423],{"type":32,"value":5418},{"type":27,"tag":35,"props":5425,"children":5426},{},[5427],{"type":27,"tag":39,"props":5428,"children":5429},{},[5430],{"type":32,"value":5431},"soc\u002Findex.htmlに以下のコードを入れ、画像一覧を表示させる。urliから画像ファイル名を取得して配列にし、insertAdjacentHTMLでimgタグを挿入してゆく。ファイル名はfigcaptionタグを使って表示。ファイル名をクリックすると画像を開くようにしている。",{"type":27,"tag":519,"props":5433,"children":5435},{"code":5434},"      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        soci.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",[5436],{"type":27,"tag":527,"props":5437,"children":5438},{"__ignoreMap":8},[5439],{"type":32,"value":5434},{"type":27,"tag":35,"props":5441,"children":5442},{},[5443],{"type":27,"tag":39,"props":5444,"children":5445},{},[5446],{"type":32,"value":5447},"同じ要領で、soc\u002Findex.htmlに以下のコードを入れ、html一覧を表示させる。",{"type":27,"tag":519,"props":5449,"children":5451},{"code":5450},"      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        soch.insertAdjacentHTML('beforeend',`　\u003Ca href=\"${item}\" target=\"_blank\">${item}\u003C\u002Fa>　`);          \n        }\n      });\n",[5452],{"type":27,"tag":527,"props":5453,"children":5454},{"__ignoreMap":8},[5455],{"type":32,"value":5450},{"type":27,"tag":35,"props":5457,"children":5458},{},[5459],{"type":27,"tag":39,"props":5460,"children":5461},{},[5462,5464,5470],{"type":32,"value":5463},"画像ファイル名一覧・htmlファイル名一覧の取得は、通常はサーバサイドプログラミングの出番。今回は、「指導者の方へ」で以下のShellコマンドを実行してもらう形にした。",{"type":27,"tag":527,"props":5465,"children":5467},{"className":5466},[],[5468],{"type":32,"value":5469},"{cache: \"no-store\"}",{"type":32,"value":5471}," でfetchし、キャッシュを読まないようにしているが、「リストを最新の状態にしたのに一覧が古いまま」ということがたまにあったので、対策を追記した。",{"type":27,"tag":519,"props":5473,"children":5475},{"code":5474},"cd soc\nls *.html > yourhtml.txt\nls img\u002F > yourimg.txt\n",[5476],{"type":27,"tag":527,"props":5477,"children":5478},{"__ignoreMap":8},[5479],{"type":32,"value":5474},{"type":27,"tag":35,"props":5481,"children":5482},{},[5483,5488,5509,5529,5534],{"type":27,"tag":39,"props":5484,"children":5485},{},[5486],{"type":32,"value":5487},"iPadなどのモバイルOSの場合、画像やクリップボードの扱いがPCとは異なるので注意が必要。JavaScriptの命令がうまく働かないことが多々ある。",{"type":27,"tag":39,"props":5489,"children":5490},{},[5491,5493,5499,5501,5507],{"type":32,"value":5492},"iPadで画像をロングタップして",{"type":27,"tag":527,"props":5494,"children":5496},{"className":5495},[],[5497],{"type":32,"value":5498},"コピー",{"type":32,"value":5500},"し、SocPadに",{"type":27,"tag":527,"props":5502,"children":5504},{"className":5503},[],[5505],{"type":32,"value":5506},"貼り付け",{"type":32,"value":5508}," をしても何も貼り付けられない。仕方ないので、ckeditor5-34.1.0へアップデイトしたうえでAutoImage pluginを有効にした。これで、画像URLを貼り付ければ画像が挿入される。",{"type":27,"tag":39,"props":5510,"children":5511},{},[5512,5514,5520,5522,5527],{"type":32,"value":5513},"ところが、画像をロングタップしても",{"type":27,"tag":527,"props":5515,"children":5517},{"className":5516},[],[5518],{"type":32,"value":5519},"画像のアドレスをコピー",{"type":32,"value":5521},"が出ない。ファイル名をクリックすると画像を開くようにしたのはこのためで、アドレス欄をロングタップ-",{"type":27,"tag":527,"props":5523,"children":5525},{"className":5524},[],[5526],{"type":32,"value":5498},{"type":32,"value":5528}," でようやく画像URLがコピーされる。",{"type":27,"tag":39,"props":5530,"children":5531},{},[5532],{"type":32,"value":5533},"他にも方法は考えられるが、Appleが年々クリップボードのセキュリティを厳しくしているので、ユーザーに意識的操作をさせた方がよいと判断した。",{"type":27,"tag":39,"props":5535,"children":5536},{},[5537],{"type":32,"value":5538},"ソックサーガとは違い、ソックリッカーでは生徒に画像をアップロードさせることは想定していない。親機から Firebase Storage にアップロードする使い方が中心。生徒に画像を扱わせたければ、Replitの soc\u002Fimg フォルダにアップロードし、「ソックリッカーで授業」ページの画像一覧を使うようにする。",{"type":27,"tag":74,"props":5540,"children":5542},{"id":5541},"tang",[],{"type":27,"tag":145,"props":5544,"children":5546},{"className":5545},[2106],[5547,5548,5561,5562],{"type":32,"value":2109},{"type":27,"tag":145,"props":5549,"children":5551},{"className":5550},[2113],[5552],{"type":27,"tag":43,"props":5553,"children":5556},{"target":2117,"rel":5554,"href":5555},[2119],"https:\u002F\u002Fhb.afl.rakuten.co.jp\u002Fichiba\u002F26ba9fc2.c2fdf85a.26ba9fc3.8edde063\u002F_RTLink49974?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fbook%2F17004825%2F&link_type=hybrid_url&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJoeWJyaWRfdXJsIiwic2l6ZSI6IjI0MHgyNDAiLCJuYW0iOjEsIm5hbXAiOiJ1cCIsImNvbSI6MSwiY29tcCI6ImRvd24iLCJwcmljZSI6MSwiYm9yIjoxLCJjb2wiOjEsImJidG4iOjAsInByb2QiOjAsImFtcCI6ZmFsc2V9",[5557],{"type":27,"tag":87,"props":5558,"children":5560},{"src":5559},"https:\u002F\u002Fthumbnail.image.rakuten.co.jp\u002F@0_mall\u002Fbook\u002Fcabinet\u002F6700\u002F9784140886700_1_3.jpg?_ex=240x240",[],{"type":32,"value":2109},{"type":27,"tag":145,"props":5563,"children":5565},{"className":5564},[2130],[5566,5567,5577,5578,5592,5593,5630],{"type":32,"value":2133},{"type":27,"tag":145,"props":5568,"children":5570},{"className":5569},[2137],[5571],{"type":27,"tag":43,"props":5572,"children":5574},{"target":2117,"rel":5573,"href":5555},[2119],[5575],{"type":32,"value":5576},"オードリー・タンが語るデジタル民主主義 （NHK出版新書670　670） [ 大野 和基 ]",{"type":32,"value":2133},{"type":27,"tag":145,"props":5579,"children":5581},{"className":5580},[2149],[5582,5585,5587,5590],{"type":27,"tag":74,"props":5583,"children":5584},{},[],{"type":32,"value":5586},"※ ハダノは、DXやSTEAM教育の研究会などで「日本は、オードリー・タンに学ぶべきだ」という声を多く聞きます。",{"type":27,"tag":74,"props":5588,"children":5589},{},[],{"type":32,"value":5591},"クアドラティックボーディングをはじめとする台湾モデルは、あきらめムードの日本人に変革の勇気を与えてくれます。",{"type":32,"value":2133},{"type":27,"tag":145,"props":5594,"children":5596},{"className":5595},[2170,2171],[5597,5598,5607,5608,5618,5619,5629],{"type":32,"value":2174},{"type":27,"tag":145,"props":5599,"children":5600},{},[5601],{"type":27,"tag":43,"props":5602,"children":5605},{"className":5603,"target":2117,"rel":5604,"href":5555},[2181,2182],[2119],[5606],{"type":32,"value":2186},{"type":32,"value":2188},{"type":27,"tag":145,"props":5609,"children":5610},{},[5611],{"type":27,"tag":43,"props":5612,"children":5616},{"className":5613,"target":2117,"rel":5614,"href":5615},[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%2F4140886706",[5617],{"type":32,"value":2200},{"type":32,"value":2188},{"type":27,"tag":145,"props":5620,"children":5621},{},[5622],{"type":27,"tag":43,"props":5623,"children":5627},{"className":5624,"target":2117,"rel":5625,"href":5626},[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%2Fstarclub%2F9784140886700.html%3Fsc_i%3Dshp_pc_search_itemlist_shsrg_title",[5628],{"type":32,"value":2213},{"type":32,"value":2133},{"type":32,"value":2109},{"type":27,"tag":74,"props":5632,"children":5633},{},[],{"type":27,"tag":328,"props":5635,"children":5636},{},[],{"type":27,"tag":28,"props":5638,"children":5639},{},[5640],{"type":27,"tag":43,"props":5641,"children":5643},{"href":5642},"\u002Farticles\u002Fsoclicker-2",[5644],{"type":32,"value":5645},"←前へ　ソックリッカー活用で授業改善を",{"title":8,"searchDepth":2518,"depth":2518,"links":5647},[5648,5651],{"id":5202,"depth":2518,"text":5205,"children":5649},[5650],{"id":5336,"depth":2523,"text":5336},{"id":5375,"depth":2518,"text":5375},"content:articles:soclicker-3.md","articles\u002Fsoclicker-3.md","articles\u002Fsoclicker-3",{"_path":5656,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":5657,"description":5658,"category":5659,"tag":5660,"thumbnail":5661,"createdAt":5662,"updatedAt":5663,"body":5664,"_type":2532,"_id":6124,"_source":2534,"_file":6125,"_stem":6126,"_extension":2537},"\u002Farticles\u002Fsocsaga-2","ソックサーガの始め方【自校運用】","コンテンツプログラミングシステム「ソックサーガ」のReplitによる自校運用法",[12],[16,17,15,18,19],"socsaga01.jpg","2022\u002F6\u002F23","2022\u002F7\u002F2",{"type":24,"children":5665,"toc":6119},[5666,5671,5674,5680,5698,5709,5735,5740,5743,5746,5751,5754,5760,5777,5790,5831,5836,5839,5842,5855,5858,5862,5865,5870,5880,5888,5892,5895,5903,5911,5919,5927,5935,5943,5956,5964,6007,6011,6104,6107,6110],{"type":27,"tag":28,"props":5667,"children":5668},{},[5669],{"type":32,"value":5670},"　この記事では、コンテンツプログラミングシステム「ソックサーガ」の始め方を解説します。クラウド統合開発環境Replit（リプリット）による自校運用の方法です。プログラミング実習では、生徒が打ったコードを管理する必要があります。コードを評価や指導に十分役立てるには、自校運用が必須です。",{"type":27,"tag":74,"props":5672,"children":5673},{},[],{"type":27,"tag":78,"props":5675,"children":5677},{"id":5676},"ソックサーガの始め方指導者の方へ",[5678],{"type":32,"value":5679},"ソックサーガの始め方（指導者の方へ）",{"type":27,"tag":228,"props":5681,"children":5682},{},[5683,5688],{"type":27,"tag":39,"props":5684,"children":5685},{},[5686],{"type":32,"value":5687},"Googleアカウント取得。校務用とは別に授業用のアカウントがあると便利。",{"type":27,"tag":39,"props":5689,"children":5690},{},[5691,5696],{"type":27,"tag":43,"props":5692,"children":5694},{"href":5219,"rel":5693},[986],[5695],{"type":32,"value":5223},{"type":32,"value":5697}," に[Continue with Google]で[Sign up]し、アカウントを設定。左上の ≡ - [+Create]をクリック、Titleにプロジェクト名（socsaga1 等）、Languageは[HTML,CSS,JS]を選択し、[+Create Repl]をクリック。プロジェクトはクラス数分作るとよい。",{"type":27,"tag":28,"props":5699,"children":5700},{},[5701,5705],{"type":27,"tag":87,"props":5702,"children":5704},{"src":5231,"alt":5232,"className":5703},[5234],[],{"type":27,"tag":87,"props":5706,"children":5708},{"src":5238,"alt":5239,"className":5707},[5234],[],{"type":27,"tag":228,"props":5710,"children":5711},{"start":2523},[5712,5716,5730],{"type":27,"tag":39,"props":5713,"children":5714},{},[5715],{"type":32,"value":5249},{"type":27,"tag":39,"props":5717,"children":5718},{},[5719,5721,5728],{"type":32,"value":5720},"SocSagaを利用するには、",{"type":27,"tag":43,"props":5722,"children":5725},{"href":5723,"rel":5724},"https:\u002F\u002Fkyodx.com\u002Fsrc\u002Fsocsagaset.zip",[986],[5726],{"type":32,"value":5727},"🔗socsagaset.zipをダウンロード",{"type":32,"value":5729},"・解凍しておく。sagaフォルダの中のものをすべてFiles欄にドラッグ＆ドロップする。",{"type":27,"tag":39,"props":5731,"children":5732},{},[5733],{"type":32,"value":5734},"jisshu00.html をひな形ファイルとし、ファイル名右の ≡ をクリック-Duplicate、≡ をクリック-Rename で jisshu01.html，jisshu02.html，…とクラスの生徒数分の実習htmlファイルを用意。指導者の方へ.txt の指示に従ってhtmlリストと画像リストを更新しておく。実習開始時には、右上の[👤+Invite]をクリックし、メールで生徒に知らせる。",{"type":27,"tag":87,"props":5736,"children":5739},{"src":5737,"alt":5738,"width":91},"\u002Fimg\u002Freplsaga1.jpg","replsaga1",[],{"type":27,"tag":74,"props":5741,"children":5742},{},[],{"type":27,"tag":74,"props":5744,"children":5745},{},[],{"type":27,"tag":28,"props":5747,"children":5748},{},[5749],{"type":32,"value":5750},"※ 生徒には、次の手順で操作をさせてください。",{"type":27,"tag":74,"props":5752,"children":5753},{},[],{"type":27,"tag":78,"props":5755,"children":5757},{"id":5756},"ソックサーガの始め方生徒へ",[5758],{"type":32,"value":5759},"ソックサーガの始め方（生徒へ）",{"type":27,"tag":228,"props":5761,"children":5763},{"start":5762},6,[5764],{"type":27,"tag":39,"props":5765,"children":5766},{},[5767,5769,5775],{"type":32,"value":5768},"メールが届いたら、",{"type":27,"tag":527,"props":5770,"children":5772},{"className":5771},[],[5773],{"type":32,"value":5774},"https:\u002F\u002Freplit.com\u002Fjoin\u002F**********-*******",{"type":32,"value":5776}," をクリックし、[Continue with Google]で[Sign up]して、プロジェクトに参加する。「Replit needs ……」に対しては、[Allow notifications]を選ぶ。",{"type":27,"tag":28,"props":5778,"children":5779},{},[5780,5784],{"type":27,"tag":87,"props":5781,"children":5783},{"src":5231,"alt":5232,"className":5782},[5234],[],{"type":27,"tag":87,"props":5785,"children":5789},{"src":5786,"alt":5787,"className":5788},"\u002Fimg\u002Freplitnotif.jpg","replitnotif",[5234],[],{"type":27,"tag":228,"props":5791,"children":5793},{"start":5792},7,[5794,5799,5810],{"type":27,"tag":39,"props":5795,"children":5796},{},[5797],{"type":32,"value":5798},"コード編集欄の右の Output欄の右上の ↗ (Open in a new tab) をクリックして新しいウィンドウを開く。少し待つと「ソックサーガへようこそ」から「ソックサーガで実習」に自動的に切り替わる。コード編集欄の右の仕切り線を右にずらして、広くしておくとよい。",{"type":27,"tag":39,"props":5800,"children":5801},{},[5802,5808],{"type":27,"tag":527,"props":5803,"children":5805},{"className":5804},[],[5806],{"type":32,"value":5807},"jisshu\u002Fsocsaga.html（ソックサーガの説明_編集用）へ",{"type":32,"value":5809},"をクリックし、実行エリアが表示されるようにし、[コンテンツ作り へ]、[　→　]、[　→　]、…とボタンをクリックして、SocSagaの説明を読み進める。",{"type":27,"tag":39,"props":5811,"children":5812},{},[5813,5815,5821,5823,5829],{"type":32,"value":5814},"SocSagaについて理解できたら、jisshu フォルダ内のhtml一覧で ",{"type":27,"tag":527,"props":5816,"children":5818},{"className":5817},[],[5819],{"type":32,"value":5820},"jisshu**.html",{"type":32,"value":5822},"（**は出席番号）をクリックして自分のページを表示する。Files欄で ",{"type":27,"tag":527,"props":5824,"children":5826},{"className":5825},[],[5827],{"type":32,"value":5828},"jisshu\u002Fjisshu**.html",{"type":32,"value":5830}," を選び、コード編集欄と自分のページとを行ったり来たりしてSocSagaの練習をする。編集するスライド番号 を入力し、自分のページの ↻ ボタンで更新。スライド編集エリアで編集後、[ソース]ボタンでコピーしたソースをコード編集欄のsectionタグ内に貼り付ける。自分のページの ↻ ボタンで更新。正しく表示されているか、実行エリアのボタンが作動するか確認。",{"type":27,"tag":87,"props":5832,"children":5835},{"src":5833,"alt":5834,"width":91},"\u002Fimg\u002Freplsaji.jpg","replsaji",[],{"type":27,"tag":74,"props":5837,"children":5838},{},[],{"type":27,"tag":74,"props":5840,"children":5841},{},[],{"type":27,"tag":28,"props":5843,"children":5844},{},[5845,5847,5853],{"type":32,"value":5846},"※ socsagaの練習で生徒がある程度使いこなせるようになったら、あとは「授業のねらい」に応じてどんどんコンテンツプログラミングをさせてください。コンテンツ作成では、「内容よりも見た目に凝りすぎる」ことのないよう注意してください。生徒はむやみに色を使いたがります。伝わるデザインにするには、「ポジティブな強調は青、ネガティブな強調は赤」など統一した色使いでシンプルに仕上げることが大切です（→",{"type":27,"tag":43,"props":5848,"children":5850},{"href":5849},"#presen",[5851],{"type":32,"value":5852},"🔗プレゼン資料のデザイン図鑑",{"type":32,"value":5854},"）。ソフトウェアは著作物だということも教えましょう。",{"type":27,"tag":74,"props":5856,"children":5857},{},[],{"type":27,"tag":28,"props":5859,"children":5860},{},[5861],{"type":32,"value":5369},{"type":27,"tag":74,"props":5863,"children":5864},{},[],{"type":27,"tag":78,"props":5866,"children":5868},{"id":5867},"ソックサーガ自校運用の技術的な話",[5869],{"type":32,"value":5867},{"type":27,"tag":28,"props":5871,"children":5872},{},[5873,5874,5879],{"type":32,"value":709},{"type":27,"tag":43,"props":5875,"children":5877},{"href":5384,"rel":5876},[986],[5878],{"type":32,"value":5388},{"type":32,"value":5390},{"type":27,"tag":28,"props":5881,"children":5882},{},[5883],{"type":27,"tag":527,"props":5884,"children":5886},{"className":5885},[],[5887],{"type":32,"value":5399},{"type":27,"tag":28,"props":5889,"children":5890},{},[5891],{"type":32,"value":5404},{"type":27,"tag":74,"props":5893,"children":5894},{},[],{"type":27,"tag":35,"props":5896,"children":5897},{},[5898],{"type":27,"tag":39,"props":5899,"children":5900},{},[5901],{"type":32,"value":5902},"ルートのindex.htmlファイル「ソックサーガへようこそ」に以下のコードを入れ、新しいウィンドウを開いたら自動的にjisshuフォルダのindex.html「ソックサーガで実習」に移動するようにする。",{"type":27,"tag":519,"props":5904,"children":5906},{"code":5905},"    if (location.hostname.indexOf('.id.repl.co') \u003C 0) {\n      location.href = '\u002Fjisshu\u002F';\n    }\n",[5907],{"type":27,"tag":527,"props":5908,"children":5909},{"__ignoreMap":8},[5910],{"type":32,"value":5905},{"type":27,"tag":35,"props":5912,"children":5913},{},[5914],{"type":27,"tag":39,"props":5915,"children":5916},{},[5917],{"type":32,"value":5918},"jisshu\u002Findex.htmlに以下のコードを入れ、画像一覧を表示させる。urliから画像ファイル名を取得して配列にし、insertAdjacentHTMLでimgタグを挿入してゆく。ファイル名はfigcaptionタグを使って表示。ファイル名をクリックすると画像を開くようにしている。",{"type":27,"tag":519,"props":5920,"children":5922},{"code":5921},"      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",[5923],{"type":27,"tag":527,"props":5924,"children":5925},{"__ignoreMap":8},[5926],{"type":32,"value":5921},{"type":27,"tag":35,"props":5928,"children":5929},{},[5930],{"type":27,"tag":39,"props":5931,"children":5932},{},[5933],{"type":32,"value":5934},"同じ要領で、jisshu\u002Findex.htmlに以下のコードを入れ、html一覧を表示させる。",{"type":27,"tag":519,"props":5936,"children":5938},{"code":5937},"      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",[5939],{"type":27,"tag":527,"props":5940,"children":5941},{"__ignoreMap":8},[5942],{"type":32,"value":5937},{"type":27,"tag":35,"props":5944,"children":5945},{},[5946],{"type":27,"tag":39,"props":5947,"children":5948},{},[5949,5950,5955],{"type":32,"value":5463},{"type":27,"tag":527,"props":5951,"children":5953},{"className":5952},[],[5954],{"type":32,"value":5469},{"type":32,"value":5471},{"type":27,"tag":519,"props":5957,"children":5959},{"code":5958},"cd jisshu\nls *.html > yourhtml.txt\nls img\u002F > yourimg.txt\n",[5960],{"type":27,"tag":527,"props":5961,"children":5962},{"__ignoreMap":8},[5963],{"type":32,"value":5958},{"type":27,"tag":35,"props":5965,"children":5966},{},[5967,5971,5987,6003],{"type":27,"tag":39,"props":5968,"children":5969},{},[5970],{"type":32,"value":5487},{"type":27,"tag":39,"props":5972,"children":5973},{},[5974,5975,5980,5981,5986],{"type":32,"value":5492},{"type":27,"tag":527,"props":5976,"children":5978},{"className":5977},[],[5979],{"type":32,"value":5498},{"type":32,"value":5500},{"type":27,"tag":527,"props":5982,"children":5984},{"className":5983},[],[5985],{"type":32,"value":5506},{"type":32,"value":5508},{"type":27,"tag":39,"props":5988,"children":5989},{},[5990,5991,5996,5997,6002],{"type":32,"value":5513},{"type":27,"tag":527,"props":5992,"children":5994},{"className":5993},[],[5995],{"type":32,"value":5519},{"type":32,"value":5521},{"type":27,"tag":527,"props":5998,"children":6000},{"className":5999},[],[6001],{"type":32,"value":5498},{"type":32,"value":5528},{"type":27,"tag":39,"props":6004,"children":6005},{},[6006],{"type":32,"value":5533},{"type":27,"tag":74,"props":6008,"children":6010},{"id":6009},"presen",[],{"type":27,"tag":145,"props":6012,"children":6014},{"className":6013},[2106],[6015,6016,6029,6030],{"type":32,"value":2109},{"type":27,"tag":145,"props":6017,"children":6019},{"className":6018},[2113],[6020],{"type":27,"tag":43,"props":6021,"children":6024},{"target":2117,"rel":6022,"href":6023},[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",[6025],{"type":27,"tag":87,"props":6026,"children":6028},{"src":6027},"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":6031,"children":6033},{"className":6032},[2130],[6034,6035,6045,6046,6065,6066,6103],{"type":32,"value":2133},{"type":27,"tag":145,"props":6036,"children":6038},{"className":6037},[2137],[6039],{"type":27,"tag":43,"props":6040,"children":6042},{"target":2117,"rel":6041,"href":6023},[2119],[6043],{"type":32,"value":6044},"プレゼン資料のデザイン図鑑 [ 前田 鎌利 ]",{"type":32,"value":2133},{"type":27,"tag":145,"props":6047,"children":6049},{"className":6048},[2149],[6050,6053,6055,6058,6060,6063],{"type":27,"tag":74,"props":6051,"children":6052},{},[],{"type":32,"value":6054},"※ コンテンツ作成では、伝わるデザインが大切です。",{"type":27,"tag":74,"props":6056,"children":6057},{},[],{"type":32,"value":6059},"ハダノは、今の学校教育にはプレゼン指導が欠けていると思います。",{"type":27,"tag":74,"props":6061,"children":6062},{},[],{"type":32,"value":6064},"この本は、豊富な実例をもとにプレゼンの極意が述べられていて、目からうろこでした。",{"type":32,"value":2133},{"type":27,"tag":145,"props":6067,"children":6069},{"className":6068},[2170,2171],[6070,6071,6080,6081,6091,6092,6102],{"type":32,"value":2174},{"type":27,"tag":145,"props":6072,"children":6073},{},[6074],{"type":27,"tag":43,"props":6075,"children":6078},{"className":6076,"target":2117,"rel":6077,"href":6023},[2181,2182],[2119],[6079],{"type":32,"value":2186},{"type":32,"value":2188},{"type":27,"tag":145,"props":6082,"children":6083},{},[6084],{"type":27,"tag":43,"props":6085,"children":6089},{"className":6086,"target":2117,"rel":6087,"href":6088},[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",[6090],{"type":32,"value":2200},{"type":32,"value":2188},{"type":27,"tag":145,"props":6093,"children":6094},{},[6095],{"type":27,"tag":43,"props":6096,"children":6100},{"className":6097,"target":2117,"rel":6098,"href":6099},[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",[6101],{"type":32,"value":2213},{"type":32,"value":2133},{"type":32,"value":2109},{"type":27,"tag":74,"props":6105,"children":6106},{},[],{"type":27,"tag":328,"props":6108,"children":6109},{},[],{"type":27,"tag":28,"props":6111,"children":6112},{},[6113],{"type":27,"tag":43,"props":6114,"children":6116},{"href":6115},"\u002Farticles\u002Fsocsaga-1",[6117],{"type":32,"value":6118},"←前へ　プログラミングシステム「ソックサーガ」を作ってみた",{"title":8,"searchDepth":2518,"depth":2518,"links":6120},[6121,6122,6123],{"id":5676,"depth":2518,"text":5679},{"id":5756,"depth":2518,"text":5759},{"id":5867,"depth":2518,"text":5867},"content:articles:socsaga-2.md","articles\u002Fsocsaga-2.md","articles\u002Fsocsaga-2",{"_path":6115,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":6128,"description":6129,"category":6130,"tag":6131,"thumbnail":5661,"createdAt":6132,"updatedAt":6133,"body":6134,"_type":2532,"_id":7315,"_source":2534,"_file":7316,"_stem":7317,"_extension":2537},"プログラミングシステム「ソックサーガ」を作ってみた","ローコードで専門知識不要、個性が出せるので評価しやすく、共同制作もできるコンテンツプログラミングシステム",[12],[16,17,15,18,19],"2022\u002F5\u002F5","2022\u002F6\u002F29",{"type":24,"children":6135,"toc":7302},[6136,6141,6150,6153,6159,6174,6179,6190,6195,6198,6204,6209,6214,6217,6222,6227,6230,6261,6266,6271,6282,6285,6291,6297,6311,6316,6321,6324,6330,6333,6342,6347,6352,6355,6416,6419,6424,6429,6434,6437,6442,6445,6450,6453,6459,6462,6472,6477,6492,6495,6503,6512,6517,6529,6542,6579,6582,6587,6590,6603,6606,6612,6618,6636,6645,6651,6907,6913,6941,6947,7011,7017,7079,7084,7089,7093,7099,7113,7116,7121,7124,7129,7134,7191,7195,7288,7291,7294],{"type":27,"tag":28,"props":6137,"children":6138},{},[6139],{"type":32,"value":6140},"　この記事では、新しい中学校プログラミング教育に対応するシステム「ソックサーガ」を紹介します。ソックリッカー制作の経験を活かし、最新技術をふんだんに取りいれて作りました。ローコードで専門知識不要、個性が出せるので評価しやすく、共同制作もできるコンテンツプログラミングシステムをめざしました。未履修問題の解決に役立つかどうか、お確かめください。",{"type":27,"tag":28,"props":6142,"children":6143},{"style":63},[6144,6145],{"type":32,"value":66},{"type":27,"tag":43,"props":6146,"children":6148},{"href":6147},"#socsagademo",[6149],{"type":32,"value":72},{"type":27,"tag":74,"props":6151,"children":6152},{},[],{"type":27,"tag":78,"props":6154,"children":6156},{"id":6155},"中学校プログラミング教育は未履修問題が心配",[6157],{"type":32,"value":6158},"中学校プログラミング教育は未履修問題が心配！？",{"type":27,"tag":28,"props":6160,"children":6161},{},[6162,6164,6172],{"type":32,"value":6163},"　2021年度から中学校プログラミング教育が大きく変わりました。従来の「ディジタル作品づくり」から、「",{"type":27,"tag":810,"props":6165,"children":6166},{},[6167],{"type":27,"tag":55,"props":6168,"children":6169},{},[6170],{"type":32,"value":6171},"ネットワークを利用した双方向性のあるコンテンツのプログラミング",{"type":32,"value":6173},"による問題の解決」となったのです。",{"type":27,"tag":28,"props":6175,"children":6176},{},[6177],{"type":32,"value":6178},"　ネットワークがらみのプログラミングは、環境構築の困難さに加え、通信の遅れを考慮した非同期処理・競合解決、セキュリティ対策、OS・ブラウザ・言語の多様性への対応も必要となり、かなりハードルが高くなります。一般的にPHPなどの専用言語を用いたサーバーサイドプログラミングも必要になります。",{"type":27,"tag":28,"props":6180,"children":6181},{},[6182,6183],{"type":32,"value":1688},{"type":27,"tag":43,"props":6184,"children":6187},{"href":6185,"rel":6186},"https:\u002F\u002Fwww.watch.impress.co.jp\u002Fkodomo_it\u002Fnews\u002F1159054.html",[986],[6188],{"type":32,"value":6189},"🔗 「ネットワーク」に「双方向」!?　倍増するプログラミングの学習内容に中学校の現場はどう対応するのか",{"type":27,"tag":28,"props":6191,"children":6192},{},[6193],{"type":32,"value":6194},"　これに対応する教材はたいへん少ないのが現状です。",{"type":27,"tag":74,"props":6196,"children":6197},{},[],{"type":27,"tag":138,"props":6199,"children":6201},{"id":6200},"双方向性のあるコンテンツとは",[6202],{"type":32,"value":6203},"双方向性のあるコンテンツとは？",{"type":27,"tag":28,"props":6205,"children":6206},{},[6207],{"type":32,"value":6208},"　双方向性のあるコンテンツとは、「入力に応答する、人間にとって意味のある情報の内容」です。ロボットを動かす情報はコンテンツではないし、プレゼンや動画などは双方向性のないコンテンツです。さらにコンテンツには、「デジタル化された文字，音声，静止画，動画などのデータを複合化」することが求められています。",{"type":27,"tag":28,"props":6210,"children":6211},{},[6212],{"type":32,"value":6213},"　現代、作品・製品の多くがクリエーターとエンジニアの協力によって生まれています。どちらかといえば、双方向性はエンジニアの比重が、コンテンツはクリエーターの比重が大きいと言えます。もし両者の敷居を低くすることができれば、作品の質は飛躍的に向上するはずです。",{"type":27,"tag":74,"props":6215,"children":6216},{},[],{"type":27,"tag":138,"props":6218,"children":6220},{"id":6219},"技術の教科書が抱える深刻な問題",[6221],{"type":32,"value":6219},{"type":27,"tag":28,"props":6223,"children":6224},{},[6225],{"type":32,"value":6226},"　技術の教科書には５つの実習例が出ていますが、どれも深刻な問題を抱えています。",{"type":27,"tag":74,"props":6228,"children":6229},{},[],{"type":27,"tag":35,"props":6231,"children":6232},{},[6233,6238,6253],{"type":27,"tag":39,"props":6234,"children":6235},{},[6236],{"type":32,"value":6237},"『チャット』・『タイピング練習』は、コンテンツが利用者まかせで貧弱であり、作り手から提供される情報がない。",{"type":27,"tag":39,"props":6239,"children":6240},{},[6241,6243,6251],{"type":32,"value":6242},"『ルート検索』・『英単語の発音チェック』は、魅力的なコンテンツではあるが、外部プログラムを呼び出して使っているだけであり、ほぼ何もプログラミングしていない。つまり、問題解決にプログラムを使っているが",{"type":27,"tag":810,"props":6244,"children":6245},{},[6246],{"type":27,"tag":55,"props":6247,"children":6248},{},[6249],{"type":32,"value":6250},"作ってはいない",{"type":32,"value":6252},"。",{"type":27,"tag":39,"props":6254,"children":6255},{},[6256,6258],{"type":32,"value":6257},"『防災地図』は、魅力的なコンテンツを双方向的に操作できる可能性があるという点ですばらしい。ただ、望む動作をさせようとした場合、直接 scriptタグ内を正確に書き換える必要がある。数時間の実習で理解して完成させるのは、生徒も教師も不可能に近い。\n",{"type":27,"tag":74,"props":6259,"children":6260},{},[],{"type":27,"tag":28,"props":6262,"children":6263},{},[6264],{"type":32,"value":6265},"　『防災地図』以外の4つのアプリは、Scratch の利用を前提としています。小学生のプログラミング体験にはよくても、本格的な問題解決には向きません。本命は、高速・柔軟で共有・再利用できるテキストプログラミングです。いずれにせよ、「アイディアを形にするプロセス」が難しすぎたり、簡単でも制約が多すぎたりすれば、どの生徒の作品も同じようなものになり、評価が困難になるでしょう。",{"type":27,"tag":28,"props":6267,"children":6268},{},[6269],{"type":32,"value":6270},"　このように、技術の教科書にある5つの実習例は、どれも深刻な問題を抱え、実施も評価も困難です。高い理想に現実が追い付かず、このままでは、ほとんどの中学校で「未履修問題」が発生してしまいます。ITエンジニアからも「教えられる先生はいるのか？という課題」が指摘されました。",{"type":27,"tag":28,"props":6272,"children":6273},{},[6274,6275],{"type":32,"value":1688},{"type":27,"tag":43,"props":6276,"children":6279},{"href":6277,"rel":6278},"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],[6280],{"type":32,"value":6281},"🔗 中学校の技術科の教科書(情報分野)が進歩していた件",{"type":27,"tag":74,"props":6283,"children":6284},{},[],{"type":27,"tag":78,"props":6286,"children":6288},{"id":6287},"プログラミングシステムソックサーガで解決",[6289],{"type":32,"value":6290},"プログラミングシステム「ソックサーガ」で解決",{"type":27,"tag":138,"props":6292,"children":6294},{"id":6293},"ネットワークプログラミングはクラウド統合開発環境で解決",[6295],{"type":32,"value":6296},"ネットワークプログラミングは、クラウド統合開発環境で解決",{"type":27,"tag":28,"props":6298,"children":6299},{},[6300,6302,6309],{"type":32,"value":6301},"　ネットワークを利用したプログラミングをしようとすると、テキストエディタで編集→ローカルファイルとして保存→アップロード→ブラウザで確認という手順が必要となり、セキュリティの問題もからみ、煩雑でした。それを解決するのが ",{"type":27,"tag":43,"props":6303,"children":6306},{"href":6304,"rel":6305},"https:\u002F\u002Fwww.naka-sys.okinawa\u002Freplit-used\u002F",[986],[6307],{"type":32,"value":6308},"🔗Replit（リプリット）",{"type":32,"value":6310}," などの「クラウド統合開発環境」です。",{"type":27,"tag":28,"props":6312,"children":6313},{},[6314],{"type":32,"value":6315},"　Replit の上でWebアプリを動かすことで、ビジュアルに複合コンテンツを作り、最小限のコードで双方向性を持たせるシステムを作ってみました。それが SocSaga です。即、サーガ（冒険物語）にいざなう…との願いをこめました。",{"type":27,"tag":28,"props":6317,"children":6318},{},[6319],{"type":32,"value":6320},"　SocSaga を使えば、ローカルファイルを管理する必要がなく、環境構築の手間なしに直接Web上のファイルを編集でき、作品の中身と動作のロジックに集中することができます。　",{"type":27,"tag":74,"props":6322,"children":6323},{},[],{"type":27,"tag":138,"props":6325,"children":6327},{"id":6326},"コンテンツ作りはビジュアルhtmlエディタで解決",[6328],{"type":32,"value":6329},"コンテンツ作りは、ビジュアルHTMLエディタで解決",{"type":27,"tag":74,"props":6331,"children":6332},{},[],{"type":27,"tag":28,"props":6334,"children":6335},{},[6336,6341],{"type":27,"tag":87,"props":6337,"children":6340},{"src":6338,"alt":6339,"width":91},"\u002Fimg\u002Fsocsaga02.svg","socpad",[],{"type":32,"value":709},{"type":27,"tag":28,"props":6343,"children":6344},{},[6345],{"type":32,"value":6346},"　HTMLの文法をマスターするには、相当の時間がかかります。ビジュアルHTMLエディタSocPadの出番です。",{"type":27,"tag":28,"props":6348,"children":6349},{},[6350],{"type":32,"value":6351},"　ソックサーガ用SocPadは、ソックリッカー用SocPadを流用したものです。簡易ワープロ「ワードパッド」に似た操作で簡単です。見たとおりにHTML編集ができます。画像をReplitにアップロードして挿入したり、リンクを挿入したりできるので、メディアを複合化したホームページとして使えます。",{"type":27,"tag":74,"props":6353,"children":6354},{},[],{"type":27,"tag":35,"props":6356,"children":6357},{},[6358,6363,6374,6395],{"type":27,"tag":39,"props":6359,"children":6360},{},[6361],{"type":32,"value":6362},"[保存] ボタンでFirebaseのデータベースに保存するかわりに、[ソース] ボタンを使い、指示に従って直接HTMLファイル内に貼り付ける。HTMLの文法を知らなくても、見たとおりにHTML編集ができる。",{"type":27,"tag":39,"props":6364,"children":6365},{},[6366,6372],{"type":27,"tag":527,"props":6367,"children":6369},{"className":6368},[],[6370],{"type":32,"value":6371},"\u003Csection>\u003C\u002Fsection>",{"type":32,"value":6373}," を追加すれば、新規スライドが追加される。",{"type":27,"tag":39,"props":6375,"children":6376},{},[6377,6379,6385,6387,6393],{"type":32,"value":6378},"sectionタグ内（",{"type":27,"tag":527,"props":6380,"children":6382},{"className":6381},[],[6383],{"type":32,"value":6384},"\u003Csection> ",{"type":32,"value":6386},"と",{"type":27,"tag":527,"props":6388,"children":6390},{"className":6389},[],[6391],{"type":32,"value":6392}," \u003C\u002Fsection>",{"type":32,"value":6394}," の間の部分）にソースを貼り付けると、スライドが保存される。",{"type":27,"tag":39,"props":6396,"children":6397},{},[6398,6400,6406,6408,6414],{"type":32,"value":6399},"別のスライドを編集したいときは、 ",{"type":27,"tag":527,"props":6401,"children":6403},{"className":6402},[],[6404],{"type":32,"value":6405},"～id=\"henshu\">",{"type":32,"value":6407},"（番号）",{"type":27,"tag":527,"props":6409,"children":6411},{"className":6410},[],[6412],{"type":32,"value":6413},"\u003C\u002Fspan>\u003C!--　編集するスライド番号を入れる　-->",{"type":32,"value":6415},"　の番号部分を書き換え、スライド編集エリアの上の ↻ ボタンで更新する。更新すると、編集中のものは消えるので、ソースを貼り付けたか必ず確認すること。心配であれば、メモ帳などにもソースを貼り付けておくとよい。",{"type":27,"tag":74,"props":6417,"children":6418},{},[],{"type":27,"tag":28,"props":6420,"children":6421},{},[6422],{"type":32,"value":6423},"…以上を繰り返して、スライドを１枚１枚作ってゆきます。",{"type":27,"tag":28,"props":6425,"children":6426},{},[6427],{"type":32,"value":6428},"　スライドを作ったら、「編集エリア」の下の「実行エリア」でボタンを押してスライドを切り換えてみます。切り換え動作の設定は、次の『双方向性は、4色ボタン操作で解決』を見てください。",{"type":27,"tag":28,"props":6430,"children":6431},{},[6432],{"type":32,"value":6433},"　すべてのスライドの内容・動作が完成したら、スライド番号部分に ０ を入れます。「実行エリア」だけが表示されるようになるので、URLを公開して人に見せることができます。",{"type":27,"tag":74,"props":6435,"children":6436},{},[],{"type":27,"tag":28,"props":6438,"children":6439},{},[6440],{"type":32,"value":6441},"※ ソックリッカーでは、Firebase の Realtime Database にHTMLを保存し、Storage に画像をアップロードしました。ソックサーガでは、Firebase は使いません。授業配信アプリでは、ユーザーにソースコードや画像素材等を見せる必要はありません。しかし、プログラミング学習では、Replit上ではっきり見える形で取り扱わせる方がよいと考えました。sectionタグ内にソースをはりつけさせるのは、そのためなのです。",{"type":27,"tag":74,"props":6443,"children":6444},{},[],{"type":27,"tag":28,"props":6446,"children":6447},{},[6448],{"type":32,"value":6449},"※ ソックサーガは、「生徒にWebアプリを作らせる」Webアプリです。コンテンツ編集・アプリ実行のためのJavaScriptは、ルートのssscript.jsにまとめて、生徒にさわらせないようにしています。編集モードから実行モードへの切り替えを「スライド番号部分に 0 を入れる」方法にしたのは、評価や指導をやりやすくするためです。",{"type":27,"tag":74,"props":6451,"children":6452},{},[],{"type":27,"tag":138,"props":6454,"children":6456},{"id":6455},"双方向性は4色ボタン操作で解決",[6457],{"type":32,"value":6458},"双方向性は、4色ボタン操作で解決",{"type":27,"tag":74,"props":6460,"children":6461},{},[],{"type":27,"tag":28,"props":6463,"children":6464},{},[6465,6470],{"type":27,"tag":87,"props":6466,"children":6469},{"src":6467,"alt":6468,"width":91},"\u002Fimg\u002Fsocsaga04.svg","socsaga04",[],{"type":32,"value":6471},"　　",{"type":27,"tag":28,"props":6473,"children":6474},{},[6475],{"type":32,"value":6476},"　ソックリッカーでは、TVのリモコンと同じ4色ボタンで投票します。ソックサーガも4色ボタンで操作することにしました。",{"type":27,"tag":28,"props":6478,"children":6479},{},[6480,6482,6490],{"type":32,"value":6481},"　①動作は4色のボタンに割り当て、②飛び先は class属性で指定し、③必要に応じて動作を拡張する という ",{"type":27,"tag":810,"props":6483,"children":6484},{},[6485],{"type":27,"tag":55,"props":6486,"children":6487},{},[6488],{"type":32,"value":6489},"ローコードプログラミング",{"type":32,"value":6491}," の手法で行います。 「順\n次・分岐・反復」のスライド移動の基本命令は、 xgo(数); という関数で、数によって動作を変えるようにしています。",{"type":27,"tag":74,"props":6493,"children":6494},{},[],{"type":27,"tag":35,"props":6496,"children":6497},{},[6498],{"type":27,"tag":39,"props":6499,"children":6500},{},[6501],{"type":32,"value":6502},"sectionタグには、デフォルト(規定値)で、",{"type":27,"tag":28,"props":6504,"children":6505},{},[6506],{"type":27,"tag":527,"props":6507,"children":6509},{"className":6508},[],[6510],{"type":32,"value":6511},"data-nav=\"nav0:xp+'／'+xpsum; nav1:↑;xgo(-8); nav2:←;xgo(-1); nav3:→;xgo(1);nav4:↓;xgo(8);\"",{"type":27,"tag":28,"props":6513,"children":6514},{},[6515],{"type":32,"value":6516},"というカスタムデータ属性が設定されている。",{"type":27,"tag":35,"props":6518,"children":6519},{},[6520],{"type":27,"tag":39,"props":6521,"children":6522},{},[6523],{"type":27,"tag":527,"props":6524,"children":6526},{"className":6525},[],[6527],{"type":32,"value":6528},"\u003Csection data-nav=\"nav1:先頭へ;xgo(-9);\">",{"type":27,"tag":28,"props":6530,"children":6531},{},[6532,6534,6540],{"type":32,"value":6533},"とすれば、青色のボタン1 だけ、先頭スライドへ移動するよう変更され、他のボタンはデフォルトのままとなる。nav数 のあとに コロン(:)、ボタン文字 のあとセミコロン(;)、そのあとは 命令1;命令2;命令3;…のように各命令のあとにセミコロンを付ける。二重引用符の中で引用符を使うときは、",{"type":27,"tag":527,"props":6535,"children":6537},{"className":6536},[],[6538],{"type":32,"value":6539},"\"nav0:xp+'／'+～\"",{"type":32,"value":6541}," のように単一引用符を使うこと。",{"type":27,"tag":35,"props":6543,"children":6544},{},[6545,6566],{"type":27,"tag":39,"props":6546,"children":6547},{},[6548,6550,6556,6558,6564],{"type":32,"value":6549},"各章の始まりのスライドのsectionタグに ",{"type":27,"tag":527,"props":6551,"children":6553},{"className":6552},[],[6554],{"type":32,"value":6555},"class=\"hp\"",{"type":32,"value":6557}," を入れておけば、デフォルトのままでも「プレゼンテーション」は十分可能。class属性を複数指定する場合は、",{"type":27,"tag":527,"props":6559,"children":6561},{"className":6560},[],[6562],{"type":32,"value":6563},"class=\"hp bk3\"",{"type":32,"value":6565}," のように半角スペースをはさむこと。",{"type":27,"tag":39,"props":6567,"children":6568},{},[6569,6571,6577],{"type":32,"value":6570},"Replitのコードエディタは、行番号の右の ▼ をクリックすることで折りたたむことができる。",{"type":27,"tag":527,"props":6572,"children":6574},{"className":6573},[],[6575],{"type":32,"value":6576},"\u003Csection",{"type":32,"value":6578}," の行を折りたたんでスライドの中身を隠すと、属性の指定がやりやすい。",{"type":27,"tag":74,"props":6580,"children":6581},{},[],{"type":27,"tag":28,"props":6583,"children":6584},{},[6585],{"type":32,"value":6586},"　ソックサーガは、Web標準技術に基づいたテキストプログラミングで主要な機能をラップすることで、入口が広く奥が深い学習を実現しました。将来にわたり役立つ情報活用能力が培われるでしょう。",{"type":27,"tag":74,"props":6588,"children":6589},{},[],{"type":27,"tag":28,"props":6591,"children":6592},{},[6593,6595,6601],{"type":32,"value":6594},"※ ソックサーガは、プロトタイプを jQuery + Firebase Storage + Mery マクロ で作りました。2年間実際に授業してみて、問題点を洗い出し、Vue.js で書き直しました。「可能な限りWeb標準に従う」ことが大切と痛感しました。そのため、Vueのコンポーネントのかわりに「カスタムデータ属性」を使っています。",{"type":27,"tag":527,"props":6596,"children":6598},{"className":6597},[],[6599],{"type":32,"value":6600},"data-***=\"\"",{"type":32,"value":6602},"のような形式で、制作者が自由に指定できる属性です。独自のデータを入力したり、JavaScriptで処理したりできます。HTMLで定義されているグローバル属性なので、将来的に無駄になりません。",{"type":27,"tag":74,"props":6604,"children":6605},{},[],{"type":27,"tag":138,"props":6607,"children":6609},{"id":6608},"発展的な-ソックサーガ-の使い方-余裕ができたら",[6610],{"type":32,"value":6611},"発展的な ソックサーガ の使い方（※ 余裕ができたら……）",{"type":27,"tag":3829,"props":6613,"children":6615},{"id":6614},"スライドの背景を指定する",[6616],{"type":32,"value":6617},"① スライドの背景を指定する",{"type":27,"tag":35,"props":6619,"children":6620},{},[6621],{"type":27,"tag":39,"props":6622,"children":6623},{},[6624,6626,6634],{"type":32,"value":6625},"sectionタグのカスタムデータ属性に画像ファイルURLを指定。URLは、",{"type":27,"tag":810,"props":6627,"children":6628},{},[6629],{"type":27,"tag":55,"props":6630,"children":6631},{},[6632],{"type":32,"value":6633},"jisshu\u002Fimg フォルダ内の画像一覧",{"type":32,"value":6635},"の画像を右クリックし、[画像アドレスをコピー]で。",{"type":27,"tag":28,"props":6637,"children":6638},{},[6639],{"type":27,"tag":527,"props":6640,"children":6642},{"className":6641},[],[6643],{"type":32,"value":6644},"data-bg=\"https:\u002F\u002Fsocsaga.hadano3.repl.co\u002Fjisshu\u002Fimg\u002Fvenndiag.svg\"",{"type":27,"tag":3829,"props":6646,"children":6648},{"id":6647},"x関数x変数でボタン動作を拡張する",[6649],{"type":32,"value":6650},"② x関数・x変数でボタン動作を拡張する",{"type":27,"tag":35,"props":6652,"children":6653},{},[6654,6707,6728,6741,6889,6894],{"type":27,"tag":39,"props":6655,"children":6656},{},[6657,6659,6665,6667,6673,6675,6681,6683,6689,6691,6697,6699,6705],{"type":32,"value":6658},"メッセージ表示：",{"type":27,"tag":527,"props":6660,"children":6662},{"className":6661},[],[6663],{"type":32,"value":6664},"xmsg('メッセージ','入力文');",{"type":32,"value":6666}," 入力文を省略したら ",{"type":27,"tag":527,"props":6668,"children":6670},{"className":6669},[],[6671],{"type":32,"value":6672},"alert",{"type":32,"value":6674}," 、",{"type":27,"tag":527,"props":6676,"children":6678},{"className":6677},[],[6679],{"type":32,"value":6680},"'OK'",{"type":32,"value":6682},"なら ",{"type":27,"tag":527,"props":6684,"children":6686},{"className":6685},[],[6687],{"type":32,"value":6688},"confirm",{"type":32,"value":6690}," 、それ以外は ",{"type":27,"tag":527,"props":6692,"children":6694},{"className":6693},[],[6695],{"type":32,"value":6696},"prompt",{"type":32,"value":6698}," と同じ動作をする。戻り値は",{"type":27,"tag":527,"props":6700,"children":6702},{"className":6701},[],[6703],{"type":32,"value":6704},"xm",{"type":32,"value":6706},"に代入される。",{"type":27,"tag":39,"props":6708,"children":6709},{},[6710,6712,6718,6720,6726],{"type":32,"value":6711},"乱数：",{"type":27,"tag":527,"props":6713,"children":6715},{"className":6714},[],[6716],{"type":32,"value":6717},"xran(数);",{"type":32,"value":6719}," 1～数 までのランダムな自然数を作る。数を省略したら 6 がはいりサイコロに使える。戻り値は、",{"type":27,"tag":527,"props":6721,"children":6723},{"className":6722},[],[6724],{"type":32,"value":6725},"xr",{"type":32,"value":6727}," に。",{"type":27,"tag":39,"props":6729,"children":6730},{},[6731,6733,6739],{"type":32,"value":6732},"待機：",{"type":27,"tag":527,"props":6734,"children":6736},{"className":6735},[],[6737],{"type":32,"value":6738},"xwait(数);",{"type":32,"value":6740}," 数秒間待機してから次の命令を実行する。",{"type":27,"tag":39,"props":6742,"children":6743},{},[6744,6746,6752,6754,6760,6762,6768,6770,6776,6778,6784,6786,6792,6794,6800,6802,6808,6810,6816,6818,6824,6826,6832,6834,6840,6842,6848,6850,6856,6858,6864,6866,6872,6873,6879,6881,6887],{"type":32,"value":6745},"x変数：",{"type":27,"tag":527,"props":6747,"children":6749},{"className":6748},[],[6750],{"type":32,"value":6751},"xc",{"type":32,"value":6753},"【クリックしたボタン番号】、",{"type":27,"tag":527,"props":6755,"children":6757},{"className":6756},[],[6758],{"type":32,"value":6759},"xe",{"type":32,"value":6761},"【エネルギー】、",{"type":27,"tag":527,"props":6763,"children":6765},{"className":6764},[],[6766],{"type":32,"value":6767},"xf",{"type":32,"value":6769},"【ファイル名】、",{"type":27,"tag":527,"props":6771,"children":6773},{"className":6772},[],[6774],{"type":32,"value":6775},"xg",{"type":32,"value":6777},"【移動後のスライドナンバー】、",{"type":27,"tag":527,"props":6779,"children":6781},{"className":6780},[],[6782],{"type":32,"value":6783},"xp",{"type":32,"value":6785},"【現在のスライドナンバー】、\n",{"type":27,"tag":527,"props":6787,"children":6789},{"className":6788},[],[6790],{"type":32,"value":6791},"xpsum",{"type":32,"value":6793},"【スライド総数】、",{"type":27,"tag":527,"props":6795,"children":6797},{"className":6796},[],[6798],{"type":32,"value":6799},"xs",{"type":32,"value":6801},"【スコア】、",{"type":27,"tag":527,"props":6803,"children":6805},{"className":6804},[],[6806],{"type":32,"value":6807},"xt",{"type":32,"value":6809},"【ターン数】、",{"type":27,"tag":527,"props":6811,"children":6813},{"className":6812},[],[6814],{"type":32,"value":6815},"xu",{"type":32,"value":6817},"【ユーザーデータ】、",{"type":27,"tag":527,"props":6819,"children":6821},{"className":6820},[],[6822],{"type":32,"value":6823},"xuu[数]",{"type":32,"value":6825},"【ユーザーデータ配列】…状態フラグとして使うのに便利な関数がある｛",{"type":27,"tag":527,"props":6827,"children":6829},{"className":6828},[],[6830],{"type":32,"value":6831},"xuuon(数);",{"type":32,"value":6833}," フラグオン、",{"type":27,"tag":527,"props":6835,"children":6837},{"className":6836},[],[6838],{"type":32,"value":6839},"xuuoff(数);",{"type":32,"value":6841}," フラグオフ、",{"type":27,"tag":527,"props":6843,"children":6845},{"className":6844},[],[6846],{"type":32,"value":6847},"xuutog(数);",{"type":32,"value":6849}," フラグ反転｝、",{"type":27,"tag":527,"props":6851,"children":6853},{"className":6852},[],[6854],{"type":32,"value":6855},"xcc[数]",{"type":32,"value":6857},"【ボタン無効化配列】…",{"type":27,"tag":527,"props":6859,"children":6861},{"className":6860},[],[6862],{"type":32,"value":6863},"xuu",{"type":32,"value":6865},"と同様な関数で",{"type":27,"tag":527,"props":6867,"children":6869},{"className":6868},[],[6870],{"type":32,"value":6871},"xcc[0]",{"type":32,"value":6386},{"type":27,"tag":527,"props":6874,"children":6876},{"className":6875},[],[6877],{"type":32,"value":6878},"xcc[番]",{"type":32,"value":6880},"をオンでボタン無効化、",{"type":27,"tag":527,"props":6882,"children":6884},{"className":6883},[],[6885],{"type":32,"value":6886},"xccreset();",{"type":32,"value":6888}," ですべて有効化。",{"type":27,"tag":39,"props":6890,"children":6891},{},[6892],{"type":32,"value":6893},"JavaScriptの命令がほぼ使えるが、コード量節約のため、ショートハンドを使うとよい。 if文のかわりに→三項演算子…など。",{"type":27,"tag":39,"props":6895,"children":6896},{},[6897,6899,6905],{"type":32,"value":6898},"テストボタンの ",{"type":27,"tag":527,"props":6900,"children":6902},{"className":6901},[],[6903],{"type":32,"value":6904},"data-test = “命令文”",{"type":32,"value":6906}," を書き換えて、ボタン動作のテストができる。",{"type":27,"tag":3829,"props":6908,"children":6910},{"id":6909},"アニメーションで画面に躍動感を与える",[6911],{"type":32,"value":6912},"③ アニメーションで画面に躍動感を与える",{"type":27,"tag":35,"props":6914,"children":6915},{},[6916,6936],{"type":27,"tag":39,"props":6917,"children":6918},{},[6919,6921,6927,6929,6935],{"type":32,"value":6920},"x関数の ",{"type":27,"tag":527,"props":6922,"children":6924},{"className":6923},[],[6925],{"type":32,"value":6926},"xanim(オブジェクト);",{"type":32,"value":6928}," でスライドの中の要素を時間を追って変化させることができる。アニメーションオブジェクトの書式は、anime.js に従う。戻り値は、",{"type":27,"tag":527,"props":6930,"children":6932},{"className":6931},[],[6933],{"type":32,"value":6934},"xa",{"type":32,"value":6727},{"type":27,"tag":39,"props":6937,"children":6938},{},[6939],{"type":32,"value":6940},"Wick Editor というフリーのWebアプリで手軽に Gifアニメ を作ることができる。軽量化して使うとよい。",{"type":27,"tag":3829,"props":6942,"children":6944},{"id":6943},"同じフォルダのsocsagaファイルを-x関数で呼び出しクラス全員で共同制作する",[6945],{"type":32,"value":6946},"④ 同じフォルダのSocSagaファイルを x関数で呼び出し、クラス全員で共同制作する",{"type":27,"tag":35,"props":6948,"children":6949},{},[6950,6979],{"type":27,"tag":39,"props":6951,"children":6952},{},[6953,6955,6961,6963,6969,6971,6977],{"type":32,"value":6954},"game03.html のスライド10番で ",{"type":27,"tag":527,"props":6956,"children":6958},{"className":6957},[],[6959],{"type":32,"value":6960},"xborrow(game05);",{"type":32,"value":6962}," を実行すると、game05.htmlが呼び出され、",{"type":27,"tag":527,"props":6964,"children":6966},{"className":6965},[],[6967],{"type":32,"value":6968},"xback();",{"type":32,"value":6970}," で game03.html のスライド11番に戻る。",{"type":27,"tag":527,"props":6972,"children":6974},{"className":6973},[],[6975],{"type":32,"value":6976},"xbuy(game07);",{"type":32,"value":6978}," を実行すると、game07.htmlに接続する（戻ってこない）。",{"type":27,"tag":39,"props":6980,"children":6981},{},[6982,6988,6990,6996,6997,7003,7005],{"type":27,"tag":527,"props":6983,"children":6985},{"className":6984},[],[6986],{"type":32,"value":6987},"xborrow",{"type":32,"value":6989},"、",{"type":27,"tag":527,"props":6991,"children":6993},{"className":6992},[],[6994],{"type":32,"value":6995},"xback",{"type":32,"value":6989},{"type":27,"tag":527,"props":6998,"children":7000},{"className":6999},[],[7001],{"type":32,"value":7002},"xbuy",{"type":32,"value":7004}," で他のファイルを呼び出すとき、次の x変数の値は引き継がれる。→ ",{"type":27,"tag":527,"props":7006,"children":7008},{"className":7007},[],[7009],{"type":32,"value":7010},"xs　xe　xt　xu　xuu[]",{"type":27,"tag":3829,"props":7012,"children":7014},{"id":7013},"htmlファイル本体をカスタマイズhtmlcssjavascript-を書き換えする",[7015],{"type":32,"value":7016},"⑤ HTMLファイル本体をカスタマイズ（html・css・JavaScript を書き換え）する",{"type":27,"tag":35,"props":7018,"children":7019},{},[7020,7041,7054,7074],{"type":27,"tag":39,"props":7021,"children":7022},{},[7023,7025,7031,7033,7039],{"type":32,"value":7024},"文字の大きさ→ ",{"type":27,"tag":527,"props":7026,"children":7028},{"className":7027},[],[7029],{"type":32,"value":7030},"--fontvw: 1.5vw;",{"type":32,"value":7032},"　、",{"type":27,"tag":527,"props":7034,"children":7036},{"className":7035},[],[7037],{"type":32,"value":7038},"methods:",{"type":32,"value":7040}," に新しい x関数 を追加…など。",{"type":27,"tag":39,"props":7042,"children":7043},{},[7044,7046,7052],{"type":32,"value":7045},"スライド内容の一時的な変更は、x関数の ",{"type":27,"tag":527,"props":7047,"children":7049},{"className":7048},[],[7050],{"type":32,"value":7051},"xdisp(元の語,置換語,回数);",{"type":32,"value":7053}," で可能。",{"type":27,"tag":39,"props":7055,"children":7056},{},[7057,7059,7065,7066,7072],{"type":32,"value":7058},"SocPad以外で作ったHTMLは、原則SocPadでの編集はできないが、sectionタグ内に貼り付けることは可能。セキュリティ上の問題がなければ、iframeタグを使って他サイトのコンテンツを埋め込むことができる。",{"type":27,"tag":527,"props":7060,"children":7062},{"className":7061},[],[7063],{"type":32,"value":7064},"--framewidth",{"type":32,"value":6386},{"type":27,"tag":527,"props":7067,"children":7069},{"className":7068},[],[7070],{"type":32,"value":7071},"--frameheight",{"type":32,"value":7073},"で幅と高さを指定できる。",{"type":27,"tag":39,"props":7075,"children":7076},{},[7077],{"type":32,"value":7078},"無料ソフトでもCG作成ができる。Blender で3Dモデルを、Effekseer でビジュアルエフェクトを、Unity でアニメやゲームを作ることができる。Sketchfab などの CGコンテンツ共有サイトを利用することで、登録・公開ができる。",{"type":27,"tag":3829,"props":7080,"children":7082},{"id":7081},"このような発展的な使い方により",[7083],{"type":32,"value":7081},{"type":27,"tag":28,"props":7085,"children":7086},{},[7087],{"type":32,"value":7088},"　プレゼンだけでなく、クイズ・アドベンチャーゲーム・脱出ゲーム・すごろくなども作れます。",{"type":27,"tag":74,"props":7090,"children":7092},{"id":7091},"socsagademo",[],{"type":27,"tag":138,"props":7094,"children":7096},{"id":7095},"まとめ-ソックサーガ-で-双方向性のあるコンテンツのプログラミング-はバッチリ",[7097],{"type":32,"value":7098},"【まとめ】 ソックサーガ で 双方向性のあるコンテンツのプログラミング はバッチリ！",{"type":27,"tag":28,"props":7100,"children":7101},{},[7102,7104,7111],{"type":32,"value":7103},"　ソックリッカー制作の経験を活かし、最新技術をふんだんに取りいれて作ったのが ",{"type":27,"tag":810,"props":7105,"children":7106},{},[7107],{"type":27,"tag":55,"props":7108,"children":7109},{},[7110],{"type":32,"value":90},{"type":32,"value":7112},"です。ローコードなので専門知識不要、「ディジタル作品づくり」＋α で取り組めます。５つの実習例とは違い、個性が出せるので評価しやすく、共同制作もできます。",{"type":27,"tag":74,"props":7114,"children":7115},{},[],{"type":27,"tag":28,"props":7117,"children":7118},{},[7119],{"type":32,"value":7120},"　他教科や行事のまとめ・発表を兼ねたテーマにすれば、時間数不足も解消されます。無料で、自校運用できて安心で、かゆいところに手が届くシステムは、そうそうないと自負しています。",{"type":27,"tag":74,"props":7122,"children":7123},{},[],{"type":27,"tag":28,"props":7125,"children":7126},{},[7127],{"type":32,"value":7128},"※ ページが表示されなければ、リロード（↻更新）してください。",{"type":27,"tag":28,"props":7130,"children":7131},{},[7132],{"type":32,"value":7133},"※【注意】Internet Explorer 以外のモダンブラウザー（Chrome,Firefox,Safari,…）で、横置き画面で見ること！",{"type":27,"tag":35,"props":7135,"children":7136},{},[7137,7148,7159,7170,7181],{"type":27,"tag":39,"props":7138,"children":7139},{},[7140,7141],{"type":32,"value":1688},{"type":27,"tag":43,"props":7142,"children":7145},{"href":7143,"rel":7144},"https:\u002F\u002Fkyodx.com\u002Fsshelp.html",[986],[7146],{"type":32,"value":7147},"🔗 ソックサーガで作った、「ソックサーガの紹介Webアプリ」",{"type":27,"tag":39,"props":7149,"children":7150},{},[7151,7152],{"type":32,"value":1688},{"type":27,"tag":43,"props":7153,"children":7156},{"href":7154,"rel":7155},"https:\u002F\u002Fkyodx.com\u002Fimg\u002Fsocsaga.pdf",[986],[7157],{"type":32,"value":7158},"🔗 ソックサーガの紹介（印刷用）",{"type":27,"tag":39,"props":7160,"children":7161},{},[7162,7163],{"type":32,"value":1688},{"type":27,"tag":43,"props":7164,"children":7167},{"href":7165,"rel":7166},"https:\u002F\u002Fkyodx.com\u002Fjisshu\u002Ftango.html",[986],[7168],{"type":32,"value":7169},"🔗 「英単語の発音チェックアプリ+AI作曲」",{"type":27,"tag":39,"props":7171,"children":7172},{},[7173,7174],{"type":32,"value":1688},{"type":27,"tag":43,"props":7175,"children":7178},{"href":7176,"rel":7177},"https:\u002F\u002Fkyodx.com\u002Fjisshu\u002Ftango2.html",[986],[7179],{"type":32,"value":7180},"🔗 「英単語の発音チェックアプリ+AI作曲」Ver2",{"type":27,"tag":39,"props":7182,"children":7183},{},[7184,7185],{"type":32,"value":1688},{"type":27,"tag":43,"props":7186,"children":7188},{"href":1691,"rel":7187},[986],[7189],{"type":32,"value":7190},"🔗 「英単語ゲーム SPELL QUEST」",{"type":27,"tag":74,"props":7192,"children":7194},{"id":7193},"js278",[],{"type":27,"tag":145,"props":7196,"children":7198},{"className":7197},[2106],[7199,7200,7213,7214],{"type":32,"value":2109},{"type":27,"tag":145,"props":7201,"children":7203},{"className":7202},[2113],[7204],{"type":27,"tag":43,"props":7205,"children":7208},{"target":2117,"rel":7206,"href":7207},[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",[7209],{"type":27,"tag":87,"props":7210,"children":7212},{"src":7211},"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":7215,"children":7217},{"className":7216},[2130],[7218,7219,7229,7230,7249,7250,7287],{"type":32,"value":2133},{"type":27,"tag":145,"props":7220,"children":7222},{"className":7221},[2137],[7223],{"type":27,"tag":43,"props":7224,"children":7226},{"target":2117,"rel":7225,"href":7207},[2119],[7227],{"type":32,"value":7228},"JavaScriptコードレシピ集 スグに使えるテクニック278　[ 池田泰延 ]",{"type":32,"value":2133},{"type":27,"tag":145,"props":7231,"children":7233},{"className":7232},[2149],[7234,7237,7239,7242,7244,7247],{"type":27,"tag":74,"props":7235,"children":7236},{},[],{"type":32,"value":7238},"※ Web標準技術は時代とともに進歩しています。",{"type":27,"tag":74,"props":7240,"children":7241},{},[],{"type":32,"value":7243},"ハダノは、jQueryからVue.jsに移行したとき、「イマドキのJavaScriptはこう書くんだ！」とカルチャーショックを受けました。",{"type":27,"tag":74,"props":7245,"children":7246},{},[],{"type":32,"value":7248},"この本は、実践的な最新テクニックを網羅的に学ぶのに役立ちます。",{"type":32,"value":2133},{"type":27,"tag":145,"props":7251,"children":7253},{"className":7252},[2170,2171],[7254,7255,7264,7265,7275,7276,7286],{"type":32,"value":2174},{"type":27,"tag":145,"props":7256,"children":7257},{},[7258],{"type":27,"tag":43,"props":7259,"children":7262},{"className":7260,"target":2117,"rel":7261,"href":7207},[2181,2182],[2119],[7263],{"type":32,"value":2186},{"type":32,"value":2188},{"type":27,"tag":145,"props":7266,"children":7267},{},[7268],{"type":27,"tag":43,"props":7269,"children":7273},{"className":7270,"target":2117,"rel":7271,"href":7272},[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",[7274],{"type":32,"value":2200},{"type":32,"value":2188},{"type":27,"tag":145,"props":7277,"children":7278},{},[7279],{"type":27,"tag":43,"props":7280,"children":7284},{"className":7281,"target":2117,"rel":7282,"href":7283},[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",[7285],{"type":32,"value":2213},{"type":32,"value":2133},{"type":32,"value":2109},{"type":27,"tag":74,"props":7289,"children":7290},{},[],{"type":27,"tag":328,"props":7292,"children":7293},{},[],{"type":27,"tag":28,"props":7295,"children":7296},{},[7297],{"type":27,"tag":43,"props":7298,"children":7299},{"href":5656},[7300],{"type":32,"value":7301},"次へ→　ソックサーガの始め方【自校運用】",{"title":8,"searchDepth":2518,"depth":2518,"links":7303},[7304,7308],{"id":6155,"depth":2518,"text":6158,"children":7305},[7306,7307],{"id":6200,"depth":2523,"text":6203},{"id":6219,"depth":2523,"text":6219},{"id":6287,"depth":2518,"text":6290,"children":7309},[7310,7311,7312,7313,7314],{"id":6293,"depth":2523,"text":6296},{"id":6326,"depth":2523,"text":6329},{"id":6455,"depth":2523,"text":6458},{"id":6608,"depth":2523,"text":6611},{"id":7095,"depth":2523,"text":7098},"content:articles:socsaga-1.md","articles\u002Fsocsaga-1.md","articles\u002Fsocsaga-1",{"_path":5642,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":7319,"description":7320,"category":7321,"tag":7322,"thumbnail":5187,"createdAt":7324,"updatedAt":7325,"body":7326,"_type":2532,"_id":7793,"_source":2534,"_file":7794,"_stem":7795,"_extension":2537},"ソックリッカー活用で授業改善を","授業配信アプリ「ソックリッカー」を活用するとなぜ授業改善ができるのかを科学的に解説",[5183],[5185,5186,7323,19],"ebe","2022\u002F5\u002F2","2022\u002F5\u002F10",{"type":24,"children":7327,"toc":7788},[7328,7333,7336,7342,7366,7371,7376,7381,7386,7391,7396,7399,7404,7409,7414,7419,7424,7429,7434,7439,7444,7449,7454,7459,7464,7469,7474,7479,7484,7487,7492,7505,7510,7515,7520,7552,7566,7571,7576,7581,7585,7673,7677,7765,7768,7771,7780],{"type":27,"tag":28,"props":7329,"children":7330},{},[7331],{"type":32,"value":7332},"　この記事では、授業配信アプリ「ソックリッカー」を活用するとなぜ授業改善ができるのかを解説します。想起練習、知識の活性化、学びの責任の移行、同調圧力なしでの見取り…など、エビデンス（科学的根拠）に基づく教育に取り組んでみませんか。",{"type":27,"tag":74,"props":7334,"children":7335},{},[],{"type":27,"tag":78,"props":7337,"children":7339},{"id":7338},"忘れたころに思い出させて学力向上を",[7340],{"type":32,"value":7341},"忘れたころに思い出させて、学力向上を",{"type":27,"tag":35,"props":7343,"children":7344},{},[7345,7355],{"type":27,"tag":39,"props":7346,"children":7347},{},[7348,7349],{"type":32,"value":1688},{"type":27,"tag":43,"props":7350,"children":7352},{"href":7351},"#peterbrown",[7353],{"type":32,"value":7354},"🔗 使える脳の鍛え方 成功する学習の科学（ピーター・ブラウン他著）",{"type":27,"tag":39,"props":7356,"children":7357},{},[7358,7359],{"type":32,"value":1688},{"type":27,"tag":43,"props":7360,"children":7363},{"href":7361,"rel":7362},"https:\u002F\u002Fkyodx.com\u002Fimg\u002Fmemory15sec.pdf",[986],[7364],{"type":32,"value":7365},"🔗 15秒記憶法",{"type":27,"tag":28,"props":7367,"children":7368},{},[7369],{"type":32,"value":7370},"　もし、赤ずきんが大人におんぶされて１週間連続おばあさん宅を訪問しても、後日ひとりで行けるかは怪しいものです。本人は「何度も行ってるから大丈夫」と思っても、自分で苦労して道を記憶していないので迷うに違いありません。",{"type":27,"tag":28,"props":7372,"children":7373},{},[7374],{"type":32,"value":7375},"　何度も迷ってやっとたどりつくことを時期をずらして何回か経験するうちに、ひとりで行けるようになります。",{"type":27,"tag":28,"props":7377,"children":7378},{},[7379],{"type":32,"value":7380},"　学習も同じで、連続で同じ文章を読んでスラスラになっても、その記憶は一時的・表面的なものに留まります。",{"type":27,"tag":28,"props":7382,"children":7383},{},[7384],{"type":32,"value":7385},"　「忘れたころに思い出させる」ことを期間をあけて繰り返すことでやっと記憶は定着します。",{"type":27,"tag":28,"props":7387,"children":7388},{},[7389],{"type":32,"value":7390},"　授業の中でときどきクイズをすれば、想起練習（忘れたころに思い出させる）ができ、学力が向上します。",{"type":27,"tag":28,"props":7392,"children":7393},{},[7394],{"type":32,"value":7395},"　ソックリッカーを使えば、楽しくクイズができるのです。　",{"type":27,"tag":74,"props":7397,"children":7398},{},[],{"type":27,"tag":78,"props":7400,"children":7402},{"id":7401},"クイズの工夫で知識の活性化を",[7403],{"type":32,"value":7401},{"type":27,"tag":28,"props":7405,"children":7406},{},[7407],{"type":32,"value":7408},"　新学習指導要領の三つの視点のうち、",{"type":27,"tag":28,"props":7410,"children":7411},{},[7412],{"type":32,"value":7413},"　ア　「思考力・判断力・表現力等」「学びに向かう力・人間性等」（コンピテンシー：汎用的スキル）",{"type":27,"tag":28,"props":7415,"children":7416},{},[7417],{"type":32,"value":7418},"　ウ　「知識・技能」（コンテンツ：教科等に固有の知識や個別スキル）",{"type":27,"tag":28,"props":7420,"children":7421},{},[7422],{"type":32,"value":7423},"は、ともすると分離・対立しがちです。",{"type":27,"tag":28,"props":7425,"children":7426},{},[7427],{"type":32,"value":7428},"　この２つを有機的に結び付けるのが",{"type":27,"tag":28,"props":7430,"children":7431},{},[7432],{"type":32,"value":7433},"　イ　「見方・考え方」（教科等の本質に関わるもの）",{"type":27,"tag":28,"props":7435,"children":7436},{},[7437],{"type":32,"value":7438},"であり、これを働かせることでバラバラの知識を統合して活性化された知識（概念）へと高められます。",{"type":27,"tag":28,"props":7440,"children":7441},{},[7442],{"type":32,"value":7443},"　活性化された知識では、条件節IF と行為節THEN が対をなしており、行為節の知識がどんな場合に活用可能かは条件節の中に明示されています。",{"type":27,"tag":28,"props":7445,"children":7446},{},[7447],{"type":32,"value":7448},"　従来の学校教育では、条件節の指導を軽視し、生きて働かない知識にとどまりがちでした。",{"type":27,"tag":28,"props":7450,"children":7451},{},[7452],{"type":32,"value":7453},"　近年、英語の指導でよく言われるオーセンティックな学習（真正の学習）では、条件節の部分を実生活で出会いそうな場面にすることで 本物の実践に近づけます。",{"type":27,"tag":28,"props":7455,"children":7456},{},[7457],{"type":32,"value":7458},"　「単なる知識→知識を含んだ能力」へ 転換するには、クイズにも工夫が必要です。",{"type":27,"tag":28,"props":7460,"children":7461},{},[7462],{"type":32,"value":7463},"demo先生の例を参照…",{"type":27,"tag":28,"props":7465,"children":7466},{},[7467],{"type":32,"value":7468},"　10．知識Ｑ 低いギアに変えることによるブレーキは？ フット…、サイド…、エンジン…、排気…",{"type":27,"tag":28,"props":7470,"children":7471},{},[7472],{"type":32,"value":7473},"　11. 能力Ｑ エンジンブレーキを使う場面は？ 雪道、長い下り坂、市街地、駐車時",{"type":27,"tag":28,"props":7475,"children":7476},{},[7477],{"type":32,"value":7478},"　もちろん、場面を答えて終わりにせず、理由を出し合えば議論が深まります。",{"type":27,"tag":28,"props":7480,"children":7481},{},[7482],{"type":32,"value":7483},"　票数の少ない方から理由を述べさせると、多数派に押されて意見を言いにくいということが防げます。",{"type":27,"tag":74,"props":7485,"children":7486},{},[],{"type":27,"tag":78,"props":7488,"children":7490},{"id":7489},"同調圧力なしで見取りを",[7491],{"type":32,"value":7489},{"type":27,"tag":35,"props":7493,"children":7494},{},[7495],{"type":27,"tag":39,"props":7496,"children":7497},{},[7498,7499],{"type":32,"value":1688},{"type":27,"tag":43,"props":7500,"children":7502},{"href":7501},"#betterlearning",[7503],{"type":32,"value":7504},"🔗 「学びの責任」は誰にあるのか』～「責任の移行モデル」で授業が変わる～",{"type":27,"tag":28,"props":7506,"children":7507},{},[7508],{"type":32,"value":7509},"　①焦点を絞った指導（教師）、②教師がガイドする指導（教師＋生徒）、③協働学習（生徒たち）、④個別学習（生徒個人）の４つの要素を意識し、子ども主体の学びに変えたいものです。",{"type":27,"tag":28,"props":7511,"children":7512},{},[7513],{"type":32,"value":7514},"　従来の授業は、ほとんど①→④でした。アクティブラーニングで③に力を入れても、他の3つが弱いと、「活動あって学びなし」となります。②は、ＴＴ・ 習熟度別や特別支援など教師を増やしたときぐらいです。",{"type":27,"tag":28,"props":7516,"children":7517},{},[7518],{"type":32,"value":7519},"　特に②で必要となるのが、生徒の理解度の正確な見取りです。周りの生徒につられて挙手したり、笑われるのを恐れて意思表示しなかったりと、見取りは簡単ではありません。自己評価させても、メタ認知力の問題（能力不足で能力不足に気づかない）で不正確になりがちです。",{"type":27,"tag":28,"props":7521,"children":7522},{},[7523,7525,7532,7534,7541,7543,7550],{"type":32,"value":7524},"　これは、多数派に合わせてしまう",{"type":27,"tag":43,"props":7526,"children":7529},{"href":7527,"rel":7528},"https:\u002F\u002Fwww.sogensha.co.jp\u002Fspecial\u002Fshinri\u002Fpdf\u002F064.pdf",[986],[7530],{"type":32,"value":7531},"🔗 「同調」についての実験",{"type":32,"value":7533},"からも明らかなように、深刻な問題です。",{"type":27,"tag":43,"props":7535,"children":7538},{"href":7536,"rel":7537},"https:\u002F\u002Fs.webry.info\u002Fsp\u002Fcharm.at.webry.info\u002F200711\u002Farticle_17.html",[986],[7539],{"type":32,"value":7540},"🔗 いじめも「同調」から生まれる",{"type":32,"value":7542},"と考えられます。最近の研究では、",{"type":27,"tag":43,"props":7544,"children":7547},{"href":7545,"rel":7546},"http:\u002F\u002Fkarapaia.com\u002Farchives\u002F52263835.html",[986],[7548],{"type":32,"value":7549},"🔗 子どもはロボットの意見でも従ってしまう",{"type":32,"value":7551},"ことが判明しました。",{"type":27,"tag":28,"props":7553,"children":7554},{},[7555,7557,7564],{"type":32,"value":7556},"　脳科学的には、",{"type":27,"tag":43,"props":7558,"children":7561},{"href":7559,"rel":7560},"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002F%E3%83%9F%E3%83%A9%E3%83%BC%E3%83%8B%E3%83%A5%E3%83%BC%E3%83%AD%E3%83%B3#:~:text=%E3%83%9F%E3%83%A9%E3%83%BC%E3%83%8B%E3%83%A5%E3%83%BC%E3%83%AD%E3%83%B3%EF%BC%88%E8%8B%B1%3A%20Mirror%20neuron,%E3%81%93%E3%81%A8%E3%81%8B%E3%82%89%E5%90%8D%E4%BB%98%E3%81%91%E3%82%89%E3%82%8C%E3%81%9F%E3%80%82",[986],[7562],{"type":32,"value":7563},"🔗 ミラーニューロン（他人の言動を鏡のように自分に置き換えて反応する脳細胞）",{"type":32,"value":7565},"の働きとも言われています。ミラーニューロンの「まねる」機能は、「学ぶ」の基礎だけに敵視することもできずやっかいです。「いいことだけをまねてくれれば…」という願いは、いつも裏切られます。",{"type":27,"tag":28,"props":7567,"children":7568},{},[7569],{"type":32,"value":7570},"　「主体的」と「学ぶ」を両立させるのは困難です。「自己決定・自己存在感」と「共感」を両立させるのも困難です。このジレンマを解決する手立てが必要なのです。",{"type":27,"tag":28,"props":7572,"children":7573},{},[7574],{"type":32,"value":7575},"　ソックリッカーは、同調圧力なしで匿名投票でき、素早くクラス全体の回答分布を得ることができます。匿名性は完全で教師にも知られません。成績を気にせず回答できるのも、小テストより優れている点です。もし秘密投票のチェックをはずせば、投票過程を見える化できます。しかし、クリックしたタイミングで投票がばれたり、先に投票した分の同調圧力を受けたりする恐れがあるので注意しましょう。",{"type":27,"tag":28,"props":7577,"children":7578},{},[7579],{"type":32,"value":7580},"　投票中にほかの子が覗きこまないよう配慮すべきです。",{"type":27,"tag":74,"props":7582,"children":7584},{"id":7583},"peterbrown",[],{"type":27,"tag":145,"props":7586,"children":7588},{"className":7587},[2106],[7589,7590,7603,7604],{"type":32,"value":2109},{"type":27,"tag":145,"props":7591,"children":7593},{"className":7592},[2113],[7594],{"type":27,"tag":43,"props":7595,"children":7598},{"target":2117,"rel":7596,"href":7597},[2119],"https:\u002F\u002Fhb.afl.rakuten.co.jp\u002Fichiba\u002F26ba9fc2.c2fdf85a.26ba9fc3.8edde063\u002F_RTLink46324?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fbook%2F13860904%2F&link_type=hybrid_url&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJoeWJyaWRfdXJsIiwic2l6ZSI6IjI0MHgyNDAiLCJuYW0iOjEsIm5hbXAiOiJ1cCIsImNvbSI6MSwiY29tcCI6ImRvd24iLCJwcmljZSI6MCwiYm9yIjoxLCJjb2wiOjEsImJidG4iOjAsInByb2QiOjAsImFtcCI6ZmFsc2V9",[7599],{"type":27,"tag":87,"props":7600,"children":7602},{"src":7601},"https:\u002F\u002Fthumbnail.image.rakuten.co.jp\u002F@0_mall\u002Fbook\u002Fcabinet\u002F0668\u002F9784757160668.jpg?_ex=240x240",[],{"type":32,"value":2109},{"type":27,"tag":145,"props":7605,"children":7607},{"className":7606},[2130],[7608,7609,7619,7620,7634,7635,7672],{"type":32,"value":2133},{"type":27,"tag":145,"props":7610,"children":7612},{"className":7611},[2137],[7613],{"type":27,"tag":43,"props":7614,"children":7616},{"target":2117,"rel":7615,"href":7597},[2119],[7617],{"type":32,"value":7618},"使える脳の鍛え方 成功する学習の科学 [ ピーター・ブラウン ]",{"type":32,"value":2133},{"type":27,"tag":145,"props":7621,"children":7623},{"className":7622},[2149],[7624,7627,7629,7632],{"type":27,"tag":74,"props":7625,"children":7626},{},[],{"type":32,"value":7628},"※ 忘れかけたころに思い出させる「想起練習」は、記憶の定着に抜群の効果があります。",{"type":27,"tag":74,"props":7630,"children":7631},{},[],{"type":32,"value":7633},"ソックリッカーのクイズ機能は、この本から生まれたのです。",{"type":32,"value":2133},{"type":27,"tag":145,"props":7636,"children":7638},{"className":7637},[2170,2171],[7639,7640,7649,7650,7660,7661,7671],{"type":32,"value":2174},{"type":27,"tag":145,"props":7641,"children":7642},{},[7643],{"type":27,"tag":43,"props":7644,"children":7647},{"className":7645,"target":2117,"rel":7646,"href":7597},[2181,2182],[2119],[7648],{"type":32,"value":2186},{"type":32,"value":2188},{"type":27,"tag":145,"props":7651,"children":7652},{},[7653],{"type":27,"tag":43,"props":7654,"children":7658},{"className":7655,"target":2117,"rel":7656,"href":7657},[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%2F4757160666",[7659],{"type":32,"value":2200},{"type":32,"value":2188},{"type":27,"tag":145,"props":7662,"children":7663},{},[7664],{"type":27,"tag":43,"props":7665,"children":7669},{"className":7666,"target":2117,"rel":7667,"href":7668},[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%2Fbooks-ogaki%2Fitem%2F9784757160668%2F%3Fsc_i%3Dshp_pc_search_itemlist_shsrg_title",[7670],{"type":32,"value":2213},{"type":32,"value":2133},{"type":32,"value":2109},{"type":27,"tag":74,"props":7674,"children":7676},{"id":7675},"betterlearning",[],{"type":27,"tag":145,"props":7678,"children":7680},{"className":7679},[2106],[7681,7682,7695,7696],{"type":32,"value":2109},{"type":27,"tag":145,"props":7683,"children":7685},{"className":7684},[2113],[7686],{"type":27,"tag":43,"props":7687,"children":7690},{"target":2117,"rel":7688,"href":7689},[2119],"https:\u002F\u002Fhb.afl.rakuten.co.jp\u002Fichiba\u002F26ba9fc2.c2fdf85a.26ba9fc3.8edde063\u002F_RTLink46324?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fbook%2F15164545%2F&link_type=hybrid_url&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJoeWJyaWRfdXJsIiwic2l6ZSI6IjI0MHgyNDAiLCJuYW0iOjEsIm5hbXAiOiJ1cCIsImNvbSI6MSwiY29tcCI6ImRvd24iLCJwcmljZSI6MCwiYm9yIjoxLCJjb2wiOjEsImJidG4iOjAsInByb2QiOjAsImFtcCI6ZmFsc2V9",[7691],{"type":27,"tag":87,"props":7692,"children":7694},{"src":7693},"https:\u002F\u002Fthumbnail.image.rakuten.co.jp\u002F@0_mall\u002Fbook\u002Fcabinet\u002F0809\u002F9784794810809.jpg?_ex=240x240",[],{"type":32,"value":2109},{"type":27,"tag":145,"props":7697,"children":7699},{"className":7698},[2130],[7700,7701,7711,7712,7726,7727,7764],{"type":32,"value":2133},{"type":27,"tag":145,"props":7702,"children":7704},{"className":7703},[2137],[7705],{"type":27,"tag":43,"props":7706,"children":7708},{"target":2117,"rel":7707,"href":7689},[2119],[7709],{"type":32,"value":7710},"「学びの責任」は誰にあるのか 「責任の移行モデル」で授業が変わる [ ダグラス・フィッシャー ]",{"type":32,"value":2133},{"type":27,"tag":145,"props":7713,"children":7715},{"className":7714},[2149],[7716,7719,7721,7724],{"type":27,"tag":74,"props":7717,"children":7718},{},[],{"type":32,"value":7720},"※ ハダノは「子ども中心の授業」をめざしながら、実際には教え込みの授業ばかりでした。",{"type":27,"tag":74,"props":7722,"children":7723},{},[],{"type":32,"value":7725},"教師から生徒へ「学びの責任」を徐々に計画的に移行していく必要があることをこの本は教えてくれました。",{"type":32,"value":2133},{"type":27,"tag":145,"props":7728,"children":7730},{"className":7729},[2170,2171],[7731,7732,7741,7742,7752,7753,7763],{"type":32,"value":2174},{"type":27,"tag":145,"props":7733,"children":7734},{},[7735],{"type":27,"tag":43,"props":7736,"children":7739},{"className":7737,"target":2117,"rel":7738,"href":7689},[2181,2182],[2119],[7740],{"type":32,"value":2186},{"type":32,"value":2188},{"type":27,"tag":145,"props":7743,"children":7744},{},[7745],{"type":27,"tag":43,"props":7746,"children":7750},{"className":7747,"target":2117,"rel":7748,"href":7749},[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%2F4794810806",[7751],{"type":32,"value":2200},{"type":32,"value":2188},{"type":27,"tag":145,"props":7754,"children":7755},{},[7756],{"type":27,"tag":43,"props":7757,"children":7761},{"className":7758,"target":2117,"rel":7759,"href":7760},[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%2Fkinokuniya%2F9784794810809.html%3Fsc_i%3Dshp_pc_search_itemlist_shsrg_title",[7762],{"type":32,"value":2213},{"type":32,"value":2133},{"type":32,"value":2109},{"type":27,"tag":74,"props":7766,"children":7767},{},[],{"type":27,"tag":328,"props":7769,"children":7770},{},[],{"type":27,"tag":28,"props":7772,"children":7773},{},[7774],{"type":27,"tag":43,"props":7775,"children":7777},{"href":7776},"\u002Farticles\u002Fsoclicker-1",[7778],{"type":32,"value":7779},"←前へ　授業配信アプリ「ソックリッカー」を作ってみた",{"type":27,"tag":28,"props":7781,"children":7782},{},[7783],{"type":27,"tag":43,"props":7784,"children":7785},{"href":5179},[7786],{"type":32,"value":7787},"次へ→　ソックリッカーの始め方【自校運用】",{"title":8,"searchDepth":2518,"depth":2518,"links":7789},[7790,7791,7792],{"id":7338,"depth":2518,"text":7341},{"id":7401,"depth":2518,"text":7401},{"id":7489,"depth":2518,"text":7489},"content:articles:soclicker-2.md","articles\u002Fsoclicker-2.md","articles\u002Fsoclicker-2",{"_path":7776,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":7797,"description":7798,"category":7799,"tag":7800,"thumbnail":5187,"createdAt":7801,"updatedAt":7802,"body":7803,"_type":2532,"_id":8515,"_source":2534,"_file":8516,"_stem":8517,"_extension":2537},"授業配信アプリ「ソックリッカー」を作ってみた","ネット機器さえあれば、だれでもどの機種でも使えるアクティブラーニング用の無料Webアプリ",[5183],[5185,5186,19],"2022\u002F5\u002F1","2022\u002F5\u002F9",{"type":24,"children":7804,"toc":8506},[7805,7810,7819,7822,7828,7833,7847,7861,7866,7870,7875,7886,7890,7895,7898,7904,7915,7918,7923,7944,7949,7965,7970,7981,7986,7997,8002,8013,8018,8034,8040,8051,8054,8111,8114,8120,8131,8134,8147,8150,8156,8161,8195,8198,8203,8226,8229,8234,8247,8250,8255,8278,8281,8286,8304,8307,8395,8399,8492,8495,8498],{"type":27,"tag":28,"props":7806,"children":7807},{},[7808],{"type":32,"value":7809},"　この記事では、ハダノが学校現場にいたときに作った、授業配信アプリ「ソックリッカー」について紹介します。近隣の学校・教員のみなさんに実際に使っていただき、高評価を得ています。アクティブラーニング型授業をめざすあなたの役に立つかどうか、お確かめください。",{"type":27,"tag":28,"props":7811,"children":7812},{"style":63},[7813,7814],{"type":32,"value":66},{"type":27,"tag":43,"props":7815,"children":7817},{"href":7816},"#soclickerdemo",[7818],{"type":32,"value":72},{"type":27,"tag":74,"props":7820,"children":7821},{},[],{"type":27,"tag":78,"props":7823,"children":7825},{"id":7824},"授業配信アプリソックリッカーとは",[7826],{"type":32,"value":7827},"授業配信アプリ「ソックリッカー」とは？",{"type":27,"tag":28,"props":7829,"children":7830},{},[7831],{"type":32,"value":7832},"　せっかくタブレットが導入されても、タブレットの種類ごとに専用のアプリ（多くは有料）をそろえなければなりません。授業でリアルタイムに対話的・協働的に使えるアクティブラーニング用アプリは、意外と少ないのが現状です。",{"type":27,"tag":28,"props":7834,"children":7835},{},[7836,7838,7845],{"type":32,"value":7837},"　「なければ作るしかない」と考え、",{"type":27,"tag":43,"props":7839,"children":7842},{"href":7840,"rel":7841},"https:\u002F\u002Farschool.co.jp\u002Fblog\u002Farchives\u002F5646",[986],[7843],{"type":32,"value":7844},"🔗 MOONBlock",{"type":32,"value":7846},"などのJavaScriptプレイグラウンドでプロトタイプを作りました。改良を重ね、Vue.js と Firebase でWebアプリとして作り上げました。",{"type":27,"tag":28,"props":7848,"children":7849},{},[7850,7852,7859],{"type":32,"value":7851},"　大学では、講義を対話的にするためにリモコン型専用端末「",{"type":27,"tag":43,"props":7853,"children":7856},{"href":7854,"rel":7855},"https:\u002F\u002Fwww.waseda.jp\u002Fnavi\u002Frental\u002Fclicker.html",[986],[7857],{"type":32,"value":7858},"🔗 クリッカー",{"type":32,"value":7860},"」が普及しました。そのソックリ版が「ソックリッカー」です。 ネット機器さえあれば、簡単に授業を対話的に変身させられます。インストール不要・ユーザー登録不要の無料Webアプリなので、だれでもどの機種でも使えます。",{"type":27,"tag":28,"props":7862,"children":7863},{},[7864],{"type":32,"value":7865}," 遠隔教育対応の機能も追加し、GIGAスクール時代の授業改善アプリとして進化中です。",{"type":27,"tag":74,"props":7867,"children":7869},{"id":7868},"soclickerdemo",[],{"type":27,"tag":78,"props":7871,"children":7873},{"id":7872},"ソックリッカーの使い方",[7874],{"type":32,"value":7872},{"type":27,"tag":28,"props":7876,"children":7877},{},[7878,7879],{"type":32,"value":1688},{"type":27,"tag":43,"props":7880,"children":7883},{"href":7881,"rel":7882},"https:\u002F\u002Fkyodx.com\u002Fsoclicker1.html#help",[986],[7884],{"type":32,"value":7885},"🔗 基本的な使い方 へ",{"type":27,"tag":28,"props":7887,"children":7888},{},[7889],{"type":32,"value":7128},{"type":27,"tag":28,"props":7891,"children":7892},{},[7893],{"type":32,"value":7894},"※ InternetExplorer以外のモダンブラウザー（Chrome,Firefox,Safari,…）で見てください。……以下同様……",{"type":27,"tag":74,"props":7896,"children":7897},{},[],{"type":27,"tag":138,"props":7899,"children":7901},{"id":7900},"ソックリッカー親機教師用で制作送信",[7902],{"type":32,"value":7903},"ソックリッカー親機（教師用）で制作・送信",{"type":27,"tag":28,"props":7905,"children":7906},{},[7907,7908],{"type":32,"value":1688},{"type":27,"tag":43,"props":7909,"children":7912},{"href":7910,"rel":7911},"https:\u002F\u002Fkyodx.com\u002Fsoclicker0.html",[986],[7913],{"type":32,"value":7914},"🔗 ソックリッカー親機【デモ】 へ",{"type":27,"tag":74,"props":7916,"children":7917},{},[],{"type":27,"tag":28,"props":7919,"children":7920},{},[7921],{"type":32,"value":7922},"１．クイズ",{"type":27,"tag":35,"props":7924,"children":7925},{},[7926,7931,7936],{"type":27,"tag":39,"props":7927,"children":7928},{},[7929],{"type":32,"value":7930},"質問と選択肢を入力し、[投票開始]で投票可能に。",{"type":27,"tag":39,"props":7932,"children":7933},{},[7934],{"type":32,"value":7935},"秘密投票で、同調圧力なしで見取りができる。",{"type":27,"tag":39,"props":7937,"children":7938},{},[7939,7941],{"type":32,"value":7940},"想起練習（忘れたころに思い出させる）で学力Up。\n",{"type":27,"tag":74,"props":7942,"children":7943},{},[],{"type":27,"tag":28,"props":7945,"children":7946},{},[7947],{"type":32,"value":7948},"２．説明",{"type":27,"tag":35,"props":7950,"children":7951},{},[7952,7957],{"type":27,"tag":39,"props":7953,"children":7954},{},[7955],{"type":32,"value":7956},"音声入力可能なら、授業者がしゃべったことをただちに文字列化し、表示・記録できる。",{"type":27,"tag":39,"props":7958,"children":7959},{},[7960,7962],{"type":32,"value":7961},"ワイヤレスイヤホンマイクがあると、授業者が歩き回っても声を拾うことができて便利。\n",{"type":27,"tag":74,"props":7963,"children":7964},{},[],{"type":27,"tag":28,"props":7966,"children":7967},{},[7968],{"type":32,"value":7969},"３．Webページ",{"type":27,"tag":35,"props":7971,"children":7972},{},[7973],{"type":27,"tag":39,"props":7974,"children":7975},{},[7976,7978],{"type":32,"value":7977},"見せたいページを一斉に見せられる。\n",{"type":27,"tag":74,"props":7979,"children":7980},{},[],{"type":27,"tag":28,"props":7982,"children":7983},{},[7984],{"type":32,"value":7985},"４．画像",{"type":27,"tag":35,"props":7987,"children":7988},{},[7989],{"type":27,"tag":39,"props":7990,"children":7991},{},[7992,7994],{"type":32,"value":7993},"ノート写真などを撮れば、ただちに子機にも表示。\n",{"type":27,"tag":74,"props":7995,"children":7996},{},[],{"type":27,"tag":28,"props":7998,"children":7999},{},[8000],{"type":32,"value":8001},"５．プレゼン",{"type":27,"tag":35,"props":8003,"children":8004},{},[8005],{"type":27,"tag":39,"props":8006,"children":8007},{},[8008,8010],{"type":32,"value":8009},"PDFのページをめくりオンラインプレゼンできる。\n",{"type":27,"tag":74,"props":8011,"children":8012},{},[],{"type":27,"tag":28,"props":8014,"children":8015},{},[8016],{"type":32,"value":8017},"６．ホワイトボード",{"type":27,"tag":35,"props":8019,"children":8020},{},[8021,8026],{"type":27,"tag":39,"props":8022,"children":8023},{},[8024],{"type":32,"value":8025},"📝で独自ホワイトボードSocPadを新規作成。",{"type":27,"tag":39,"props":8027,"children":8028},{},[8029,8031],{"type":32,"value":8030},"簡単な操作で、班で作業後に全体で発表も可能。\n",{"type":27,"tag":74,"props":8032,"children":8033},{},[],{"type":27,"tag":138,"props":8035,"children":8037},{"id":8036},"ソックリッカー子機生徒用で受信参加",[8038],{"type":32,"value":8039},"ソックリッカー子機（生徒用）で受信・参加",{"type":27,"tag":28,"props":8041,"children":8042},{},[8043,8044],{"type":32,"value":1688},{"type":27,"tag":43,"props":8045,"children":8048},{"href":8046,"rel":8047},"https:\u002F\u002Fkyodx.com\u002Fsoclicker.html",[986],[8049],{"type":32,"value":8050},"🔗 ソックリッカー子機【デモ】 へ",{"type":27,"tag":74,"props":8052,"children":8053},{},[],{"type":27,"tag":35,"props":8055,"children":8056},{},[8057,8062,8067,8072,8077,8082,8094],{"type":27,"tag":39,"props":8058,"children":8059},{},[8060],{"type":32,"value":8061},"先生名を入力して授業を選択。以後は先生の管理下で授業に集中できる。",{"type":27,"tag":39,"props":8063,"children":8064},{},[8065],{"type":32,"value":8066},"情報を受け取るだけでなく、テレビのｄボタンのようにクイズに回答することができる。",{"type":27,"tag":39,"props":8068,"children":8069},{},[8070],{"type":32,"value":8071},"開票結果は子機にも表示され、親機の画面を大きく映せない環境や遠隔授業でも使える。",{"type":27,"tag":39,"props":8073,"children":8074},{},[8075],{"type":32,"value":8076},"オンラインホワイトボードを使うと、生徒同士が自由に意見交換でき、協働学習に役立つ。",{"type":27,"tag":39,"props":8078,"children":8079},{},[8080],{"type":32,"value":8081},"特に、思考ツールで「情報の可視化」と「情報の操作化」を行えば、授業は探究・協働型に変わってゆく。",{"type":27,"tag":39,"props":8083,"children":8084},{},[8085,8087],{"type":32,"value":8086},"思考ツールの枠 → ",{"type":27,"tag":43,"props":8088,"children":8091},{"href":8089,"rel":8090},"https:\u002F\u002Fwww.google.com\u002Fsearch?q=%E6%80%9D%E8%80%83%E3%83%84%E3%83%BC%E3%83%AB%E6%9E%A0+%E7%94%BB%E5%83%8F&tbm=isch&ved=2ahUKEwj-8cvoqr7wAhWBxYsBHVSLAvoQ2-cCegQIABAA&oq=%E6%80%9D%E8%80%83%E3%83%84%E3%83%BC%E3%83%AB%E6%9E%A0+%E7%94%BB%E5%83%8F&gs_lcp=CgNpbWcQAzoECAAQF1Clrw1YxssNYKjfDWgAcAB4AIABbYgB6gmSAQQwLjEymAEAoAEBqgELZ3dzLXdpei1pbWfAAQE&sclient=img&ei=Qb6YYL7NHoGLr7wP1JaK0A8&bih=937&biw=1920",[986],[8092],{"type":32,"value":8093},"🔗 ネット上にある画像",{"type":27,"tag":39,"props":8095,"children":8096},{},[8097,8099,8105],{"type":32,"value":8098},"→ SocPadの背景画像用に自作したもの： ベン図　\n",{"type":27,"tag":43,"props":8100,"children":8103},{"href":8101,"rel":8102},"https:\u002F\u002Fkyodx.com\u002Fimg\u002Fvenndiag.svg",[986],[8104],{"type":32,"value":8101},{"type":27,"tag":87,"props":8106,"children":8110},{"src":8107,"alt":8108,"className":8109},"\u002Fimg\u002Fvenndiag.svg","ベン図",[1451],[],{"type":27,"tag":74,"props":8112,"children":8113},{},[],{"type":27,"tag":138,"props":8115,"children":8117},{"id":8116},"ソックリッカー復習生徒用で見逃し受信",[8118],{"type":32,"value":8119},"ソックリッカー復習（生徒用）で見逃し受信",{"type":27,"tag":28,"props":8121,"children":8122},{},[8123,8124],{"type":32,"value":1688},{"type":27,"tag":43,"props":8125,"children":8128},{"href":8126,"rel":8127},"https:\u002F\u002Fkyodx.com\u002Fsoclicker1.html",[986],[8129],{"type":32,"value":8130},"🔗 ソックリッカー復習【デモ】 へ",{"type":27,"tag":74,"props":8132,"children":8133},{},[],{"type":27,"tag":35,"props":8135,"children":8136},{},[8137,8142],{"type":27,"tag":39,"props":8138,"children":8139},{},[8140],{"type":32,"value":8141},"自分のペースで授業を振り返ることができる。",{"type":27,"tag":39,"props":8143,"children":8144},{},[8145],{"type":32,"value":8146},"欠席生徒も授業を追体験できる。",{"type":27,"tag":74,"props":8148,"children":8149},{},[],{"type":27,"tag":78,"props":8151,"children":8153},{"id":8152},"ソックリッカーの使いどころ例-主体的対話的で深い学びへ",[8154],{"type":32,"value":8155},"ソックリッカーの使いどころ（例）… 主体的・対話的で深い学びへ",{"type":27,"tag":28,"props":8157,"children":8158},{},[8159],{"type":32,"value":8160},"１　単元導入時",{"type":27,"tag":35,"props":8162,"children":8163},{},[8164,8169,8190],{"type":27,"tag":39,"props":8165,"children":8166},{},[8167],{"type":32,"value":8168},"単元に関連するレディネステストのクイズをソックリッカーでする。",{"type":27,"tag":39,"props":8170,"children":8171},{},[8172,8174,8188],{"type":32,"value":8173},"単元に関連する疑問や追求したいテーマを書かせ、含まれるキーワードをクイズで問う。",{"type":27,"tag":43,"props":8175,"children":8177},{"href":8176},"#question",[8178,8180],{"type":32,"value":8179},"🔗 ",{"type":27,"tag":810,"props":8181,"children":8182},{},[8183],{"type":27,"tag":55,"props":8184,"children":8185},{},[8186],{"type":32,"value":8187},"「質問づくり」",{"type":32,"value":8189},"で質問を絞り込むのにも使える。選択肢は、とりあえずア～エとしておき、その場で板書してもよい。",{"type":27,"tag":39,"props":8191,"children":8192},{},[8193],{"type":32,"value":8194},"これを生徒が実生活で出会いそうな場面設定に生かし、真正の学習になるよう、単元を計画する。",{"type":27,"tag":74,"props":8196,"children":8197},{},[],{"type":27,"tag":28,"props":8199,"children":8200},{},[8201],{"type":32,"value":8202},"２-1　授業導入時",{"type":27,"tag":35,"props":8204,"children":8205},{},[8206,8211,8216,8221],{"type":27,"tag":39,"props":8207,"children":8208},{},[8209],{"type":32,"value":8210},"前時までの復習クイズ。または、生活経験からすでに知っていることをクイズで問う。",{"type":27,"tag":39,"props":8212,"children":8213},{},[8214],{"type":32,"value":8215},"前時の振り返り・本時の導入のプレゼンをソックリッカーでする。5分以内にまとめる。",{"type":27,"tag":39,"props":8217,"children":8218},{},[8219],{"type":32,"value":8220},"本時の導入クイズで、予想・意見・立場の分布を調べる。少数派から理由を述べさせるとよい。",{"type":27,"tag":39,"props":8222,"children":8223},{},[8224],{"type":32,"value":8225},"教科の目標と実態のギャップを埋めるべくめあてを設定するが、語彙力・読解力・メタ認知力不足のため、ボタンの掛け違いが起こりがち。「何を,なぜ,どう学ぶのか」クイズをし、班でめあてを確認してから演習に移りたい。困りやつまづきを把握し、授業改善に即生かせる。",{"type":27,"tag":74,"props":8227,"children":8228},{},[],{"type":27,"tag":28,"props":8230,"children":8231},{},[8232],{"type":32,"value":8233},"２-2　授業展開時",{"type":27,"tag":35,"props":8235,"children":8236},{},[8237,8242],{"type":27,"tag":39,"props":8238,"children":8239},{},[8240],{"type":32,"value":8241},"班活動・ペア活動を基本とした演習（問題を解く、実験・実技・ワークショップ・調べ学習をする、意見をホワイトボードにまとめる）を行う。演習中に「チームで協力できていますか」「あと○分ですが順調ですか」「○○ さんはどう思いますか」の３つの質問を投げかけ、気づきを促す。紹介したいノートやホワイトボードを撮影してソックリッカーで見せるとよい。意見をSocPadなどのオンラインホワイトボードにまとめるのにもソックリッカーが使える。",{"type":27,"tag":39,"props":8243,"children":8244},{},[8245],{"type":32,"value":8246},"「比べ・分類する」ことで違いに気付かせるクイズ、過去の経験と「関連付け」させるクイズ、（少し時間を置いて）理解度を確認するクイズなどを時々行う。",{"type":27,"tag":74,"props":8248,"children":8249},{},[],{"type":27,"tag":28,"props":8251,"children":8252},{},[8253],{"type":32,"value":8254},"２-3　授業まとめ時",{"type":27,"tag":35,"props":8256,"children":8257},{},[8258,8263,8268,8273],{"type":27,"tag":39,"props":8259,"children":8260},{},[8261],{"type":32,"value":8262},"班ごとに発表させたとき、どの班がよかったかクイズで相互評価させる。",{"type":27,"tag":39,"props":8264,"children":8265},{},[8266],{"type":32,"value":8267},"ワークシート穴埋め、または白紙に学んだことを書かせ、本時の内容（解決したもの・未解決のもの）をまとめさせる。そこに含まれる（含まれない） キーワードをクイズで問う。",{"type":27,"tag":39,"props":8269,"children":8270},{},[8271],{"type":32,"value":8272},"クイズの答えについての解説のプレゼンをする。３分以内にまとめる。",{"type":27,"tag":39,"props":8274,"children":8275},{},[8276],{"type":32,"value":8277},"本時を振り返らせ、態度目標の達成度や他人へ説明する自信度などをクイズで問う。",{"type":27,"tag":74,"props":8279,"children":8280},{},[],{"type":27,"tag":28,"props":8282,"children":8283},{},[8284],{"type":32,"value":8285},"３　単元まとめ時",{"type":27,"tag":35,"props":8287,"children":8288},{},[8289,8294,8299],{"type":27,"tag":39,"props":8290,"children":8291},{},[8292],{"type":32,"value":8293},"単元を通して学んだことを書かせ、そこに含まれるキーワードをクイズで問う。",{"type":27,"tag":39,"props":8295,"children":8296},{},[8297],{"type":32,"value":8298},"知の成果物（論文・新聞・プレゼン・作品）を作らせ、どれがよかったかクイズで相互評価させる。",{"type":27,"tag":39,"props":8300,"children":8301},{},[8302],{"type":32,"value":8303},"単元全体を振り返らせ、態度目標達成度・説明自信度・「生徒による授業評価」をクイズで問う。",{"type":27,"tag":74,"props":8305,"children":8306},{},[],{"type":27,"tag":145,"props":8308,"children":8310},{"className":8309},[2106],[8311,8312,8325,8326],{"type":32,"value":2109},{"type":27,"tag":145,"props":8313,"children":8315},{"className":8314},[2113],[8316],{"type":27,"tag":43,"props":8317,"children":8320},{"target":2117,"rel":8318,"href":8319},[2119],"https:\u002F\u002Fhb.afl.rakuten.co.jp\u002Fichiba\u002F26ba9fc2.c2fdf85a.26ba9fc3.8edde063\u002F_RTLink46324?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fbook%2F13855503%2F&link_type=hybrid_url&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJoeWJyaWRfdXJsIiwic2l6ZSI6IjI0MHgyNDAiLCJuYW0iOjEsIm5hbXAiOiJ1cCIsImNvbSI6MSwiY29tcCI6ImRvd24iLCJwcmljZSI6MCwiYm9yIjoxLCJjb2wiOjEsImJidG4iOjAsInByb2QiOjAsImFtcCI6ZmFsc2V9",[8321],{"type":27,"tag":87,"props":8322,"children":8324},{"src":8323},"https:\u002F\u002Fthumbnail.image.rakuten.co.jp\u002F@0_mall\u002Fbook\u002Fcabinet\u002F7357\u002F9784382057357.jpg?_ex=240x240",[],{"type":32,"value":2109},{"type":27,"tag":145,"props":8327,"children":8329},{"className":8328},[2130],[8330,8331,8341,8342,8356,8357,8394],{"type":32,"value":2133},{"type":27,"tag":145,"props":8332,"children":8334},{"className":8333},[2137],[8335],{"type":27,"tag":43,"props":8336,"children":8338},{"target":2117,"rel":8337,"href":8319},[2119],[8339],{"type":32,"value":8340},"7つの習慣×アクティブラーニング 最強の学習習慣が生まれた！ [ 小林昭文 ]",{"type":32,"value":2133},{"type":27,"tag":145,"props":8343,"children":8345},{"className":8344},[2149],[8346,8349,8351,8354],{"type":27,"tag":74,"props":8347,"children":8348},{},[],{"type":32,"value":8350},"※ 小林昭文先生のアクティブラーニングの本は間違いがありません。",{"type":27,"tag":74,"props":8352,"children":8353},{},[],{"type":32,"value":8355},"ハダノが「だまされたと思ってこの通りに授業してごらん」とすすめた教員がめきめき腕を上げて、指導的な立場になるのを見ました。",{"type":32,"value":2133},{"type":27,"tag":145,"props":8358,"children":8360},{"className":8359},[2170,2171],[8361,8362,8371,8372,8382,8383,8393],{"type":32,"value":2174},{"type":27,"tag":145,"props":8363,"children":8364},{},[8365],{"type":27,"tag":43,"props":8366,"children":8369},{"className":8367,"target":2117,"rel":8368,"href":8319},[2181,2182],[2119],[8370],{"type":32,"value":2186},{"type":32,"value":2188},{"type":27,"tag":145,"props":8373,"children":8374},{},[8375],{"type":27,"tag":43,"props":8376,"children":8380},{"className":8377,"target":2117,"rel":8378,"href":8379},[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%2F4382057353",[8381],{"type":32,"value":2200},{"type":32,"value":2188},{"type":27,"tag":145,"props":8384,"children":8385},{},[8386],{"type":27,"tag":43,"props":8387,"children":8391},{"className":8388,"target":2117,"rel":8389,"href":8390},[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-4382057353%2F%3Fsc_i%3Dshp_pc_search_itemlist_shsrg_title",[8392],{"type":32,"value":2213},{"type":32,"value":2133},{"type":32,"value":2109},{"type":27,"tag":74,"props":8396,"children":8398},{"id":8397},"question",[],{"type":27,"tag":145,"props":8400,"children":8402},{"className":8401},[2106],[8403,8404,8417,8418],{"type":32,"value":2109},{"type":27,"tag":145,"props":8405,"children":8407},{"className":8406},[2113],[8408],{"type":27,"tag":43,"props":8409,"children":8412},{"target":2117,"rel":8410,"href":8411},[2119],"https:\u002F\u002Fhb.afl.rakuten.co.jp\u002Fichiba\u002F26ba9fc2.c2fdf85a.26ba9fc3.8edde063\u002F_RTLink46324?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fbook%2F13351103%2F&link_type=hybrid_url&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJoeWJyaWRfdXJsIiwic2l6ZSI6IjI0MHgyNDAiLCJuYW0iOjEsIm5hbXAiOiJ1cCIsImNvbSI6MSwiY29tcCI6ImRvd24iLCJwcmljZSI6MCwiYm9yIjoxLCJjb2wiOjEsImJidG4iOjAsInByb2QiOjAsImFtcCI6ZmFsc2V9",[8413],{"type":27,"tag":87,"props":8414,"children":8416},{"src":8415},"https:\u002F\u002Fthumbnail.image.rakuten.co.jp\u002F@0_mall\u002Fbook\u002Fcabinet\u002F0168\u002F9784794810168.jpg?_ex=240x240",[],{"type":32,"value":2109},{"type":27,"tag":145,"props":8419,"children":8421},{"className":8420},[2130],[8422,8423,8433,8434,8453,8454,8491],{"type":32,"value":2133},{"type":27,"tag":145,"props":8424,"children":8426},{"className":8425},[2137],[8427],{"type":27,"tag":43,"props":8428,"children":8430},{"target":2117,"rel":8429,"href":8411},[2119],[8431],{"type":32,"value":8432},"たった一つを変えるだけ クラスも教師も自立する「質問づくり」 [ ダン・ロススタイン ]",{"type":32,"value":2133},{"type":27,"tag":145,"props":8435,"children":8437},{"className":8436},[2149],[8438,8441,8443,8446,8448,8451],{"type":27,"tag":74,"props":8439,"children":8440},{},[],{"type":32,"value":8442},"※ 「教師が発問し生徒が答える」⇒「生徒が質問し教師がガイドする」へ授業を大転換できる本です。",{"type":27,"tag":74,"props":8444,"children":8445},{},[],{"type":32,"value":8447},"ハダノも「電気について学びたいことは？」などと書かせて始めた単元は、「生徒の食いつきが違う！」と実感した覚えがあります。",{"type":27,"tag":74,"props":8449,"children":8450},{},[],{"type":32,"value":8452},"「質問づくり」は、ヤラセではない本物の探究型授業を実現する近道です。",{"type":32,"value":2133},{"type":27,"tag":145,"props":8455,"children":8457},{"className":8456},[2170,2171],[8458,8459,8468,8469,8479,8480,8490],{"type":32,"value":2174},{"type":27,"tag":145,"props":8460,"children":8461},{},[8462],{"type":27,"tag":43,"props":8463,"children":8466},{"className":8464,"target":2117,"rel":8465,"href":8411},[2181,2182],[2119],[8467],{"type":32,"value":2186},{"type":32,"value":2188},{"type":27,"tag":145,"props":8470,"children":8471},{},[8472],{"type":27,"tag":43,"props":8473,"children":8477},{"className":8474,"target":2117,"rel":8475,"href":8476},[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%2F4794810164",[8478],{"type":32,"value":2200},{"type":32,"value":2188},{"type":27,"tag":145,"props":8481,"children":8482},{},[8483],{"type":27,"tag":43,"props":8484,"children":8488},{"className":8485,"target":2117,"rel":8486,"href":8487},[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%2Fhmv%2F6569901.html%3Fsc_i%3Dshp_pc_search_itemlist_shsrg_title",[8489],{"type":32,"value":2213},{"type":32,"value":2133},{"type":32,"value":2109},{"type":27,"tag":74,"props":8493,"children":8494},{},[],{"type":27,"tag":328,"props":8496,"children":8497},{},[],{"type":27,"tag":28,"props":8499,"children":8500},{},[8501],{"type":27,"tag":43,"props":8502,"children":8503},{"href":5642},[8504],{"type":32,"value":8505},"次へ→　ソックリッカー活用で授業改善を",{"title":8,"searchDepth":2518,"depth":2518,"links":8507},[8508,8509,8514],{"id":7824,"depth":2518,"text":7827},{"id":7872,"depth":2518,"text":7872,"children":8510},[8511,8512,8513],{"id":7900,"depth":2523,"text":7903},{"id":8036,"depth":2523,"text":8039},{"id":8116,"depth":2523,"text":8119},{"id":8152,"depth":2518,"text":8155},"content:articles:soclicker-1.md","articles\u002Fsoclicker-1.md","articles\u002Fsoclicker-1",{"_path":3990,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":8519,"description":8520,"category":8521,"tag":8522,"thumbnail":8523,"createdAt":8524,"updatedAt":8525,"body":8526,"_type":2532,"_id":9186,"_source":2534,"_file":9187,"_stem":9188,"_extension":2537},"Nuxt+Content+Cloudflareで無料でブログを作ってみた","エンジニアでもない素人でブログ初心者が1カ月で自前のブログ立ち上げに挑戦",[12],[18,19],"nuxt-blog.jpg","2022\u002F4\u002F25","2023\u002F2\u002F15",{"type":24,"children":8527,"toc":9167},[8528,8533,8536,8542,8547,8552,8557,8562,8567,8572,8578,8583,8588,8591,8597,8602,8607,8612,8615,8621,8644,8649,8654,8665,8670,8675,8678,8683,8688,8693,8698,8709,8714,8720,8723,8729,8738,8743,8751,8756,8759,8764,8769,8774,8779,8782,8788,8801,8806,8809,8815,8820,8823,8829,8834,8839,8852,8857,8862,8875,8878,8884,8889,8902,8907,8912,8917,8920,8926,8931,8936,8941,8946,8951,8974,8979,8994,8997,9003,9024,9029,9036,9041,9046,9049,9053,9058,9062,9065,9153,9156,9159],{"type":27,"tag":28,"props":8529,"children":8530},{},[8531],{"type":32,"value":8532},"　この記事では、ブログ初心者が1カ月で自前のブログを立ち上げるようすを紹介します。エンジニアでもない素人にそんなことができるのでしょうか？",{"type":27,"tag":74,"props":8534,"children":8535},{},[],{"type":27,"tag":78,"props":8537,"children":8539},{"id":8538},"そうだブログを始めよう",[8540],{"type":32,"value":8541},"そうだ、ブログを始めよう！",{"type":27,"tag":28,"props":8543,"children":8544},{},[8545],{"type":32,"value":8546},"　ハダノは中学校教頭として定年退職して1年間、勤めに出ずにインプット中心の生活をしてきました。",{"type":27,"tag":28,"props":8548,"children":8549},{},[8550],{"type":32,"value":8551},"　これからは、アウトプットに力を入れていきたい　→　そうだ、ブログを始めよう！　と考えました。しかし、そこには大きなハードルがあったのです。",{"type":27,"tag":138,"props":8553,"children":8555},{"id":8554},"記事を管理するシステムが必要",[8556],{"type":32,"value":8554},{"type":27,"tag":28,"props":8558,"children":8559},{},[8560],{"type":32,"value":8561},"　シングルページとは違い、記事の数が増えてくるとリンク構造が複雑になります。記事を管理する何らかのシステムが必要です。手入力ではやっていられません。",{"type":27,"tag":138,"props":8563,"children":8565},{"id":8564},"無料ブログシステムの闇",[8566],{"type":32,"value":8564},{"type":27,"tag":28,"props":8568,"children":8569},{},[8570],{"type":32,"value":8571},"　そこで、はてなブログなどの無料ブログシステムを使おうと考えます。運営会社の都合に合わせる生活が始まります。予告なく仕様が変更されたり、突然サービスが終了されたりします。無料だから仕方ないとはいえ、使い捨てにされる気分です。",{"type":27,"tag":138,"props":8573,"children":8575},{"id":8574},"ブログなら-wordpress-一択",[8576],{"type":32,"value":8577},"ブログなら WordPress 一択",{"type":27,"tag":28,"props":8579,"children":8580},{},[8581],{"type":32,"value":8582},"　有名なブロガーは、口をそろえてそう言います。実際に全ウェブサイト中 43% のシェアがあり、2位の 4% を大きく引き離しています。日本国内CMSでは、 84% と独走状態です。",{"type":27,"tag":28,"props":8584,"children":8585},{},[8586],{"type":32,"value":8587},"　PHPの動くレンタルサーバーを借りればすむ話ですが、月千円程度必要です。ブログで稼ぐことを考えていない者にとっては、けっこうな負担です。教員には勧められません。",{"type":27,"tag":74,"props":8589,"children":8590},{},[],{"type":27,"tag":78,"props":8592,"children":8594},{"id":8593},"jamstackで動的サイトと静的サイトのいいとこ取りを",[8595],{"type":32,"value":8596},"Jamstackで動的サイトと静的サイトのいいとこ取りを",{"type":27,"tag":28,"props":8598,"children":8599},{},[8600],{"type":32,"value":8601},"　Jamstackの冒頭3文字はJavaScriptの”J”、APIの”A”、Markupの”M”を並べたものです。Jamstackとはこれらの3つの技術を利用し、Webをより速く、より安全に、そしてより簡単に拡張できるように設計されたしくみです。",{"type":27,"tag":28,"props":8603,"children":8604},{},[8605],{"type":32,"value":8606},"　ブログの場合でいうと、WordPressはサーバーサイドでPHPによって動的にページを作ります。JamstackはJavaScriptによって事前に作っておいた静的なページを配信するのです。無料のホスティングサービスを使えばお金は一切かかりません。しかも、Web標準技術（HTML,CSS,JavaScript）の知識さえあれば、自分好みにカスタマイズできます。PHPプログラミングを覚える必要はありません。",{"type":27,"tag":28,"props":8608,"children":8609},{},[8610],{"type":32,"value":8611},"　Jamstackにはいろんなシステムがあります。Webアプリを作るのにVue.jsというJavaScriptフレームワークを使ったことのあるハダノは、Vue.jsを拡張するNuxt.jsに挑戦することにしました。",{"type":27,"tag":74,"props":8613,"children":8614},{},[],{"type":27,"tag":138,"props":8616,"children":8618},{"id":8617},"nuxtcontntでブログシステムを構築",[8619],{"type":32,"value":8620},"nuxt\u002Fcontntでブログシステムを構築",{"type":27,"tag":35,"props":8622,"children":8623},{},[8624,8634],{"type":27,"tag":39,"props":8625,"children":8626},{},[8627],{"type":27,"tag":43,"props":8628,"children":8631},{"href":8629,"rel":8630},"https:\u002F\u002F0115765.com\u002Farchives\u002F6348",[986],[8632],{"type":32,"value":8633},"Nuxt+Content+Cloudflareで無料でブログを作ろう！【初心者向け】",{"type":27,"tag":39,"props":8635,"children":8636},{},[8637],{"type":27,"tag":43,"props":8638,"children":8641},{"href":8639,"rel":8640},"https:\u002F\u002Fjun-app.com\u002Fseries\u002Fnuxt-content-blog\u002F1",[986],[8642],{"type":32,"value":8643},"Nuxt Content × SSG で作る静的ブログ",{"type":27,"tag":28,"props":8645,"children":8646},{},[8647],{"type":32,"value":8648},"などのサイトを参考にブログを作っていきました。",{"type":27,"tag":28,"props":8650,"children":8651},{},[8652],{"type":32,"value":8653},"　最初につまづいたのは、ESlintです。JavaScriptのコードが正しいかをチェックするツールで、とても助かるのですが、いちいち細かいことまで指摘してきます。注意だけならともかく警告が出て止まってしまうこともありました。",{"type":27,"tag":519,"props":8655,"children":8660},{"code":8656,"language":8657,"meta":8,"className":8658},"  \u002F\u002F add your custom rules here\n  rules: {\n    'vue\u002Fmulti-word-component-names': 'off'\n  }\n",".eslintrc.js",[8659],"language-.eslintrc.js",[8661],{"type":27,"tag":527,"props":8662,"children":8663},{"__ignoreMap":8},[8664],{"type":32,"value":8656},{"type":27,"tag":28,"props":8666,"children":8667},{},[8668],{"type":32,"value":8669},"Vueのコンポーネント名として一つの単語を使っても止まらないようにするため、このルールを .eslintrc.js に追加しました。",{"type":27,"tag":28,"props":8671,"children":8672},{},[8673],{"type":32,"value":8674},"　次に困ったのはデバッグです。VScodeでのデバッグ方法がよくわからず、結局 Google Chrome で右クリック-検証 とやってデバッグしました。ほとんど単純ミスでした。layout は、うまく使えず、原因不明のままです。ヘッダーなどの共通部品をコンポーネント化したので、さほど困ってはいません。",{"type":27,"tag":74,"props":8676,"children":8677},{},[],{"type":27,"tag":28,"props":8679,"children":8680},{},[8681],{"type":32,"value":8682},"　いちばん困ったのが、date-fnsという日付処理用のプラグインをインストールしようとしたときです。何やらエラーメッセージが出て、そこで何かまずい操作をしたらしく、システムが停止しました。そのあと、Gitで復旧を試みましたが、何かのバージョン違いで復旧作業自体がストップしてしまいました。結局、nuxtのインストールからやり直すはめになりました。「おかしいと思ったら早めに引き返すこと」が教訓となりました。",{"type":27,"tag":28,"props":8684,"children":8685},{},[8686],{"type":32,"value":8687},"　作成日付と更新日付は、markdownファイルから自動取得していました。Cloudflare Pagesにデプロイすると、なぜかリセットされてしまいます。nuxt-content-gitというモジュールをインストールすれば解決するらしいと試みるもまたエラー　→　今度は深入りせず、自動取得をあきらめてcreatedAtとupdatedAtを手動で入力することにしました。",{"type":27,"tag":28,"props":8689,"children":8690},{},[8691],{"type":32,"value":8692},"　このあとも npm install ではエラーに悩まされました。firebase-tools のインストールで試しに yarn を使ってみたところ、あっさり成功しました。これは使えるかもしれません。",{"type":27,"tag":28,"props":8694,"children":8695},{},[8696],{"type":32,"value":8697},"　サイトの看板となるアイコン（favicon.ico）がうまく表示されない問題については、nuxt.config.jsを",{"type":27,"tag":519,"props":8699,"children":8704},{"code":8700,"language":8701,"meta":8,"className":8702},"  pwa: {\n    manifest: {\n      lang: 'en'\n    },\n    icon: false \u002F\u002F ←PWAのバグに対応\n  },\n","nuxt.config.js",[8703],"language-nuxt.config.js",[8705],{"type":27,"tag":527,"props":8706,"children":8707},{"__ignoreMap":8},[8708],{"type":32,"value":8700},{"type":27,"tag":28,"props":8710,"children":8711},{},[8712],{"type":32,"value":8713},"としてみたところ、ちゃんと favicon が表示されるようになりました。",{"type":27,"tag":87,"props":8715,"children":8719},{"src":8716,"alt":8717,"className":8718},"\u002Fimg\u002Ffavicon.gif","favicon",[1451],[],{"type":27,"tag":74,"props":8721,"children":8722},{},[],{"type":27,"tag":138,"props":8724,"children":8726},{"id":8725},"cloudflare-pages-にカスタムドメインを設定",[8727],{"type":32,"value":8728},"Cloudflare Pages にカスタムドメインを設定",{"type":27,"tag":28,"props":8730,"children":8731},{},[8732],{"type":27,"tag":43,"props":8733,"children":8736},{"href":8734,"rel":8735},"https:\u002F\u002Fqiita.com\u002Fakitkat\u002Fitems\u002F8aeaee639ba5f2bda141",[986],[8737],{"type":32,"value":8734},{"type":27,"tag":28,"props":8739,"children":8740},{},[8741],{"type":32,"value":8742},"を参考に、kyodx.com に設定しました。「24時間かかる」との説明でしたが、数分でつながりました。",{"type":27,"tag":519,"props":8744,"children":8746},{"code":8745},"https:\u002F\u002F●●●blog.pages.dev\u002F*\n  X-Robots-Tag: noindex\n",[8747],{"type":27,"tag":527,"props":8748,"children":8749},{"__ignoreMap":8},[8750],{"type":32,"value":8745},{"type":27,"tag":28,"props":8752,"children":8753},{},[8754],{"type":32,"value":8755},"と書いた _headers ファイルをルートに置き、Cloudflare Pages の pages.dev ドメインを無効にして、独自ドメインだけを有効にするようにしました。",{"type":27,"tag":74,"props":8757,"children":8758},{},[],{"type":27,"tag":138,"props":8760,"children":8762},{"id":8761},"とても簡単なブログ更新作業",[8763],{"type":32,"value":8761},{"type":27,"tag":28,"props":8765,"children":8766},{},[8767],{"type":32,"value":8768},"　content\u002Farticles フォルダに ●●●.md という記事ファイルを作ります。マークダウンの書き方に慣れていなくても、HTMLを貼り付ければ大丈夫です。",{"type":27,"tag":28,"props":8770,"children":8771},{},[8772],{"type":32,"value":8773},"　GitHub Desktop で 「commit to master」ボタンをクリックし、「Push origin」ボタンをクリックして、数分間待つだけで勝手に更新されます。",{"type":27,"tag":28,"props":8775,"children":8776},{},[8777],{"type":32,"value":8778},"　これまで Git はあまり使っていなかったのですが、変更履歴がきちんと残るので便利です。",{"type":27,"tag":74,"props":8780,"children":8781},{},[],{"type":27,"tag":138,"props":8783,"children":8785},{"id":8784},"title-タグや-meta-タグを動的に設定",[8786],{"type":32,"value":8787},"title タグや meta タグを動的に設定",{"type":27,"tag":35,"props":8789,"children":8790},{},[8791],{"type":27,"tag":39,"props":8792,"children":8793},{},[8794],{"type":27,"tag":43,"props":8795,"children":8798},{"href":8796,"rel":8797},"https:\u002F\u002Fqiita.com\u002Famishiro\u002Fitems\u002Fb7260116b282d2cf2756",[986],[8799],{"type":32,"value":8800},"nuxt.js(v2)でSEOに必要なmeta(OGP)を入れたい",{"type":27,"tag":28,"props":8802,"children":8803},{},[8804],{"type":32,"value":8805},"を参考に、title タグや meta タグを設定しました。トップページ・記事一覧ページ以外のページでは、title,description,url,imageなどが動的に設定されるようにしました。",{"type":27,"tag":74,"props":8807,"children":8808},{},[],{"type":27,"tag":138,"props":8810,"children":8812},{"id":8811},"トップページに教育dxの概要説明を",[8813],{"type":32,"value":8814},"トップページに「教育DX」の概要説明を",{"type":27,"tag":28,"props":8816,"children":8817},{},[8818],{"type":32,"value":8819},"　教育DXとは何かを簡単に説明しました。知っている部分は読まなくていいように、details タグ　summary タグ を使いました。それぞれの「カテゴリー」や「タグ」への道案内になればよいと思います。",{"type":27,"tag":74,"props":8821,"children":8822},{},[],{"type":27,"tag":138,"props":8824,"children":8826},{"id":8825},"e-a-t-を意識した自己紹介を",[8827],{"type":32,"value":8828},"E-A-T を意識した自己紹介を",{"type":27,"tag":28,"props":8830,"children":8831},{},[8832],{"type":32,"value":8833},"　自作ソフト（ソックリッカー、ソックサーガ、ヌルパ）の紹介記事を書きました。",{"type":27,"tag":28,"props":8835,"children":8836},{},[8837],{"type":32,"value":8838},"　プロフィールのコンポーネントを作って、各記事の末尾に表示するようにしました。",{"type":27,"tag":35,"props":8840,"children":8841},{},[8842],{"type":27,"tag":39,"props":8843,"children":8844},{},[8845],{"type":27,"tag":43,"props":8846,"children":8849},{"href":8847,"rel":8848},"https:\u002F\u002Fwww.suzu6.net\u002Fposts\u002F266-nuxt-content-sitemap\u002F",[986],[8850],{"type":32,"value":8851},"nuxt\u002Fcontentでサイトマップを作る",{"type":27,"tag":28,"props":8853,"children":8854},{},[8855],{"type":32,"value":8856},"を参考に、ビルドしたらサイトマップが sitemap.xml に書き出されるようにしました。Google Search Console への登録に使います。",{"type":27,"tag":28,"props":8858,"children":8859},{},[8860],{"type":32,"value":8861},"　Cloudflare Pages でデプロイエラー → 環境変数の設定（NODE_VERSION,YARN_VERSION）で解決しました。Glitchもデフォルトのバージョンが低すぎて、似たようなことがありました。依存ライブラリのバージョン問題には悩まされます。",{"type":27,"tag":35,"props":8863,"children":8864},{},[8865],{"type":27,"tag":39,"props":8866,"children":8867},{},[8868],{"type":27,"tag":43,"props":8869,"children":8872},{"href":8870,"rel":8871},"https:\u002F\u002Fwww.saoyagi2.net\u002Fdiary\u002Fpost_175.html",[986],[8873],{"type":32,"value":8874},"DLLヘルが去ってパッケージヘルがやってきた",{"type":27,"tag":74,"props":8876,"children":8877},{},[],{"type":27,"tag":138,"props":8879,"children":8881},{"id":8880},"google-search-console-へ登録",[8882],{"type":32,"value":8883},"Google Search Console へ登録",{"type":27,"tag":28,"props":8885,"children":8886},{},[8887],{"type":32,"value":8888},"　Google Search Console のドメインプロパティで、1日待っても「所有権が証明できない」エラーが消えません。本に書いているのとやり方が違って戸惑ったので、",{"type":27,"tag":35,"props":8890,"children":8891},{},[8892],{"type":27,"tag":39,"props":8893,"children":8894},{},[8895],{"type":27,"tag":43,"props":8896,"children":8899},{"href":8897,"rel":8898},"https:\u002F\u002Fkoichi-tsujino.com\u002Fsetting_google_search_console_to_gcp",[986],[8900],{"type":32,"value":8901},"GCP + CloudFlareな環境に移行してGoogle SearchConsoleの設定をした話",{"type":27,"tag":28,"props":8903,"children":8904},{},[8905],{"type":32,"value":8906},"を参考に、DNSレコードを「ドメイン登録サービス」ではなく、Cloudflare のDNS設定で追加すると、すぐに解決しました。",{"type":27,"tag":28,"props":8908,"children":8909},{},[8910],{"type":32,"value":8911},"　URL検査で「このページはモバイルフレンドリーです」 が出て、一安心です。",{"type":27,"tag":28,"props":8913,"children":8914},{},[8915],{"type":32,"value":8916},"　Cloudflare の Web Analytics も始めました。",{"type":27,"tag":74,"props":8918,"children":8919},{},[],{"type":27,"tag":138,"props":8921,"children":8923},{"id":8922},"google-adsense-審査通過",[8924],{"type":32,"value":8925},"Google AdSense 審査通過",{"type":27,"tag":28,"props":8927,"children":8928},{},[8929],{"type":32,"value":8930},"　2022\u002F7\u002F22、記事数が20に達したので Google AdSense の利用にとりかかりました。",{"type":27,"tag":28,"props":8932,"children":8933},{},[8934],{"type":32,"value":8935},"　プライバシーポリシーにGoogle AdSenseについての記述を追加します。",{"type":27,"tag":28,"props":8937,"children":8938},{},[8939],{"type":32,"value":8940},"　@nuxtjs\u002Fgoogle-adsense をインストールし、nuxt.config.jsを編集、adsbygoogleコンポーネントをセットします。",{"type":27,"tag":28,"props":8942,"children":8943},{},[8944],{"type":32,"value":8945},"　「審査をリクエスト」をクリックして待ちます。審査完了まで平均1～2週間かかるようです。",{"type":27,"tag":28,"props":8947,"children":8948},{},[8949],{"type":32,"value":8950},"　審査は年々厳しくなっていく傾向にあり、信頼性の高いWebサイトに求められる",{"type":27,"tag":228,"props":8952,"children":8953},{},[8954,8959,8964,8969],{"type":27,"tag":39,"props":8955,"children":8956},{},[8957],{"type":32,"value":8958},"ユーザーが抱える悩みや疑問を解決できるか",{"type":27,"tag":39,"props":8960,"children":8961},{},[8962],{"type":32,"value":8963},"独自性のあるコンテンツか",{"type":27,"tag":39,"props":8965,"children":8966},{},[8967],{"type":32,"value":8968},"コンテンツの量や質が適切であるか",{"type":27,"tag":39,"props":8970,"children":8971},{},[8972],{"type":32,"value":8973},"お問い合わせ・プライバシーポリシーがあるか",{"type":27,"tag":28,"props":8975,"children":8976},{},[8977],{"type":32,"value":8978},"という4つの基準が重視されるようです。",{"type":27,"tag":28,"props":8980,"children":8981},{},[8982,8984,8992],{"type":32,"value":8983},"　ドキドキしながら待っていると、1日半で「AdSense アカウントの有効化おめでとうございます！」のメールが届いてホッとしました。「",{"type":27,"tag":810,"props":8985,"children":8986},{},[8987],{"type":27,"tag":55,"props":8988,"children":8989},{},[8990],{"type":32,"value":8991},"教育DXブログがGoogleに認められたんだ！",{"type":32,"value":8993},"」とうれしくなりました。",{"type":27,"tag":74,"props":8995,"children":8996},{},[],{"type":27,"tag":138,"props":8998,"children":9000},{"id":8999},"staticフォルダ内のページが表示されない",[9001],{"type":32,"value":9002},"staticフォルダ内のページが表示されない！",{"type":27,"tag":28,"props":9004,"children":9005},{},[9006,9008,9015,9016,9022],{"type":32,"value":9007},"　マークダウンは書きやすく便利ですが、たまに、マークダウン以外で書かれたページが必要になります。自作のWebアプリ（",{"type":27,"tag":43,"props":9009,"children":9012},{"href":9010,"rel":9011},"https:\u002F\u002Fkyodx.com\u002Ftag\u002Fsoclicker",[986],[9013],{"type":32,"value":9014},"🔗ソックリッカー",{"type":32,"value":6989},{"type":27,"tag":43,"props":9017,"children":9020},{"href":9018,"rel":9019},"https:\u002F\u002Fkyodx.com\u002Ftag\u002Fsocsaga",[986],[9021],{"type":32,"value":107},{"type":32,"value":9023},"）やPDF形式の文書などです。",{"type":27,"tag":28,"props":9025,"children":9026},{},[9027],{"type":32,"value":9028},"　そんなファイルは、static フォルダに入れておけばルートフォルダに置かれるので、\u002F（スラッシュ）から始まる相対URLでアクセスできます。",{"type":27,"tag":87,"props":9030,"children":9035},{"src":9031,"alt":9032,"width":9033,"style":9034},"\u002Fimg\u002Fpagenotfound.png","ページ表示エラー","50%","float:right",[],{"type":27,"tag":28,"props":9037,"children":9038},{},[9039],{"type":32,"value":9040},"　ところが実際は、すんなりと表示されないようです。リロードすれば表示されるので、アドレス指定は間違っていません。",{"type":27,"tag":28,"props":9042,"children":9043},{},[9044],{"type":32,"value":9045},"　いろいろ調べますが、今のところ原因がわかっていません。名前解決の問題かもと思いながら、とりあえず絶対URL指定に変えることにしました。",{"type":27,"tag":74,"props":9047,"children":9048},{},[],{"type":27,"tag":78,"props":9050,"children":9051},{"id":3831},[9052],{"type":32,"value":3831},{"type":27,"tag":28,"props":9054,"children":9055},{},[9056],{"type":32,"value":9057},"　自前のブログシステムなので、使っていきながら改良していきます。中身が全部わかっているというのは、安心です。",{"type":27,"tag":28,"props":9059,"children":9060},{},[9061],{"type":32,"value":3843},{"type":27,"tag":74,"props":9063,"children":9064},{},[],{"type":27,"tag":145,"props":9066,"children":9068},{"className":9067},[2106],[9069,9070,9083,9084],{"type":32,"value":2109},{"type":27,"tag":145,"props":9071,"children":9073},{"className":9072},[2113],[9074],{"type":27,"tag":43,"props":9075,"children":9078},{"target":2117,"rel":9076,"href":9077},[2119],"https:\u002F\u002Fhb.afl.rakuten.co.jp\u002Fichiba\u002F273236f4.d5f5314b.273236f5.ec66cf8e\u002F_RTLink57027?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Frakutenkobo-ebooks%2F6641aa3ba3f53a0caa7fa51d5f20f36f%2F&link_type=hybrid_url&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJoeWJyaWRfdXJsIiwic2l6ZSI6IjI0MHgyNDAiLCJuYW0iOjEsIm5hbXAiOiJ1cCIsImNvbSI6MSwiY29tcCI6ImRvd24iLCJwcmljZSI6MCwiYm9yIjoxLCJjb2wiOjEsImJidG4iOjAsInByb2QiOjAsImFtcCI6ZmFsc2V9",[9079],{"type":27,"tag":87,"props":9080,"children":9082},{"src":9081},"https:\u002F\u002Fthumbnail.image.rakuten.co.jp\u002F@0_mall\u002Frakutenkobo-ebooks\u002Fcabinet\u002F5585\u002F2000007695585.jpg?_ex=240x240",[],{"type":32,"value":2109},{"type":27,"tag":145,"props":9085,"children":9087},{"className":9086},[2130],[9088,9089,9099,9100,9114,9115,9152],{"type":32,"value":2133},{"type":27,"tag":145,"props":9090,"children":9092},{"className":9091},[2137],[9093],{"type":27,"tag":43,"props":9094,"children":9096},{"target":2117,"rel":9095,"href":9077},[2119],[9097],{"type":32,"value":9098},"Vue.js&Nuxt.js超入門 [ 掌田津耶乃 ]",{"type":32,"value":2133},{"type":27,"tag":145,"props":9101,"children":9103},{"className":9102},[2149],[9104,9107,9109,9112],{"type":27,"tag":74,"props":9105,"children":9106},{},[],{"type":32,"value":9108},"※ ネットの情報には、間違いも含まれています。",{"type":27,"tag":74,"props":9110,"children":9111},{},[],{"type":32,"value":9113},"ハダノは掌田さんの本のおかげで、Vue.jsの全体像とNuxt.jsの基本を一通り理解することができました。",{"type":32,"value":2133},{"type":27,"tag":145,"props":9116,"children":9118},{"className":9117},[2170,2171],[9119,9120,9129,9130,9140,9141,9151],{"type":32,"value":2174},{"type":27,"tag":145,"props":9121,"children":9122},{},[9123],{"type":27,"tag":43,"props":9124,"children":9127},{"className":9125,"target":2117,"rel":9126,"href":9077},[2181,2182],[2119],[9128],{"type":32,"value":2186},{"type":32,"value":2188},{"type":27,"tag":145,"props":9131,"children":9132},{},[9133],{"type":27,"tag":43,"props":9134,"children":9138},{"className":9135,"target":2117,"rel":9136,"href":9137},[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%2FB07X6F1C2P",[9139],{"type":32,"value":2200},{"type":32,"value":2188},{"type":27,"tag":145,"props":9142,"children":9143},{},[9144],{"type":27,"tag":43,"props":9145,"children":9149},{"className":9146,"target":2117,"rel":9147,"href":9148},[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%2Fvaboo%2Fva6596805479u30.html%3Fsc_i%3Dshp_pc_search_itemlist_shsrg_title",[9150],{"type":32,"value":2213},{"type":32,"value":2133},{"type":32,"value":2109},{"type":27,"tag":74,"props":9154,"children":9155},{},[],{"type":27,"tag":328,"props":9157,"children":9158},{},[],{"type":27,"tag":28,"props":9160,"children":9161},{},[9162],{"type":27,"tag":43,"props":9163,"children":9164},{"href":2562},[9165],{"type":32,"value":9166},"次へ→　持続可能なブログ作り",{"title":8,"searchDepth":2518,"depth":2518,"links":9168},[9169,9174,9185],{"id":8538,"depth":2518,"text":8541,"children":9170},[9171,9172,9173],{"id":8554,"depth":2523,"text":8554},{"id":8564,"depth":2523,"text":8564},{"id":8574,"depth":2523,"text":8577},{"id":8593,"depth":2518,"text":8596,"children":9175},[9176,9177,9178,9179,9180,9181,9182,9183,9184],{"id":8617,"depth":2523,"text":8620},{"id":8725,"depth":2523,"text":8728},{"id":8761,"depth":2523,"text":8761},{"id":8784,"depth":2523,"text":8787},{"id":8811,"depth":2523,"text":8814},{"id":8825,"depth":2523,"text":8828},{"id":8880,"depth":2523,"text":8883},{"id":8922,"depth":2523,"text":8925},{"id":8999,"depth":2523,"text":9002},{"id":3831,"depth":2518,"text":3831},"content:articles:blog-1.md","articles\u002Fblog-1.md","articles\u002Fblog-1",1791852904854]