[{"data":1,"prerenderedAt":3465},["ShallowReactive",2],{"\u002Ftag\u002Fweb-standards\u002Fpage\u002F2":3},[4,1080,2286,2788],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9,"description":10,"category":11,"tag":13,"thumbnail":21,"createdAt":22,"updatedAt":23,"body":24,"_type":1074,"_id":1075,"_source":1076,"_file":1077,"_stem":1078,"_extension":1079},"\u002Farticles\u002Fnurpa-2","articles",false,"","全校ぬりえ自動化システム「ヌルパ」を作ってみた","全校ぬりえ自動化システム「ヌルパ」の使い方を紹介。壁画づくり・自動化の技術的な話も",[12],"work-system",[14,15,16,17,18,19,20],"nurpa","rpa","web-standards","cg","teachers-baton","steam","dx","nuriehonban.jpg","2022\u002F5\u002F11","2022\u002F5\u002F15",{"type":25,"children":26,"toc":1052},"root",[27,35,40,45,50,55,59,66,71,76,81,86,89,94,101,111,114,119,122,128,133,148,153,158,161,167,176,181,190,195,200,205,210,213,219,228,233,238,243,246,252,261,266,271,280,285,290,295,300,305,308,314,323,328,333,338,341,347,352,366,388,393,398,403,408,413,416,422,436,441,444,450,455,458,463,468,471,476,481,486,489,496,499,504,509,512,517,520,525,530,533,538,541,547,552,559,564,621,627,634,640,651,657,668,674,679,692,698,704,715,721,726,741,746,751,757,762,773,776,781,786,791,796,801,806,829,834,839,848,851,857,866,869,875,880,885,890,895,900,903,908,913,918,922,1036,1039,1043],{"type":28,"tag":29,"props":30,"children":31},"element","p",{},[32],{"type":33,"value":34},"text","　「今年の文化祭、コロナ禍で制限多いけど、全校ぬりえに挑戦してみようか？」",{"type":28,"tag":29,"props":36,"children":37},{},[38],{"type":33,"value":39},"　「すべてフリーソフトでだれでもできるって本当なのかな？」",{"type":28,"tag":29,"props":41,"children":42},{},[43],{"type":33,"value":44},"　「ヌルパでどうやって自動化できるの？」",{"type":28,"tag":29,"props":46,"children":47},{},[48],{"type":33,"value":49},"　そんなあなたに、全校ぬりえ自動化システム「ヌルパ」の使い方を紹介します。壁画づくり・自動化の技術的な話もします。",{"type":28,"tag":29,"props":51,"children":52},{},[53],{"type":33,"value":54},"　民間企業では働き方改革の切り札として、RPAなどによる自動化が求められています。ヌルパをきっかけに教員の働き方改革を前進させてみませんか。",{"type":28,"tag":56,"props":57,"children":58},"br",{},[],{"type":28,"tag":60,"props":61,"children":63},"h2",{"id":62},"nurpaヌルパはぬりえ変換を自動化するｒｐａシステム",[64],{"type":33,"value":65},"nuRpa(ヌルパ)は、ぬりえ変換を自動化するＲＰＡシステム",{"type":28,"tag":29,"props":67,"children":68},{},[69],{"type":33,"value":70},"　全校ぬりえの取組紹介には、「すべてフリーソフトでだれでもできる」と書きましたが、数種類のソフトをいちいちマウスで操作していくのは、やはり骨が折れるものです。",{"type":28,"tag":29,"props":72,"children":73},{},[74],{"type":33,"value":75},"　そこで、アプリのショートカットと原画をフォルダに入れ、nuRpa.wsfをダブルクリックするだけで、全校ぬりえに必要なファイルが自動的にできあがる仕組みを作りました。",{"type":28,"tag":29,"props":77,"children":78},{},[79],{"type":33,"value":80},"※ Windows10,Windows11のPCで動作確認済み。",{"type":28,"tag":29,"props":82,"children":83},{},[84],{"type":33,"value":85},"※ Windows11では、右クリック-その他のオプションを表示 で、従来のWindows10の右クリックメニューが出るように変更されたので注意！",{"type":28,"tag":56,"props":87,"children":88},{},[],{"type":28,"tag":60,"props":90,"children":92},{"id":91},"ヌルパの使い方",[93],{"type":33,"value":91},{"type":28,"tag":95,"props":96,"children":98},"h3",{"id":97},"_1-nurpazipをダウンロードする",[99],{"type":33,"value":100},"1) nurpa.zipをダウンロードする",{"type":28,"tag":29,"props":102,"children":103},{},[104],{"type":28,"tag":105,"props":106,"children":108},"a",{"href":107},"\u002Fsrc\u002Fnurpa.zip",[109],{"type":33,"value":110},"⤵ nurpa.zip をダウンロード",{"type":28,"tag":56,"props":112,"children":113},{},[],{"type":28,"tag":29,"props":115,"children":116},{},[117],{"type":33,"value":118},"　すべて展開し、nurpaフォルダをドキュメントフォルダなどに移動します。",{"type":28,"tag":56,"props":120,"children":121},{},[],{"type":28,"tag":95,"props":123,"children":125},{"id":124},"_2-スムーズ化などの調整をしpng形式で保存した原画ファイルをnurpaフォルダに入れる",[126],{"type":33,"value":127},"2) スムーズ化などの調整をし、PNG形式で保存した原画ファイルをnurpaフォルダに入れる",{"type":28,"tag":29,"props":129,"children":130},{},[131],{"type":33,"value":132},"　A3用紙1枚の絵は、横26cm：縦39cm = 2：3 となります。横何枚×縦何枚になるか計算して原画の横：縦の比を決め、1000ピクセルをあまり超えない程度におさめてください。",{"type":28,"tag":29,"props":134,"children":135},{},[136,138,146],{"type":33,"value":137},"　",{"type":28,"tag":105,"props":139,"children":143},{"href":140,"rel":141},"https:\u002F\u002Feizone.info\u002Fphotoscape-x\u002F",[142],"nofollow",[144],{"type":33,"value":145},"photoscape",{"type":33,"value":147}," などの画像編集ソフトで、スムーズ化などの調整を加えてください。ベクトル化したときにきれいに仕上がります。",{"type":28,"tag":29,"props":149,"children":150},{},[151],{"type":33,"value":152},"　原画は、jpg や bmp ではなく、必ず png ファイルとして保存してください。",{"type":28,"tag":29,"props":154,"children":155},{},[156],{"type":33,"value":157},"　動作確認用のサンプルとして、yell0.png を入れてあります。",{"type":28,"tag":56,"props":159,"children":160},{},[],{"type":28,"tag":95,"props":162,"children":164},{"id":163},"_3-javaバージョンを確認する",[165],{"type":33,"value":166},"3) Javaバージョンを確認する",{"type":28,"tag":29,"props":168,"children":169},{},[170],{"type":28,"tag":105,"props":171,"children":174},{"href":172,"rel":173},"https:\u002F\u002Fjava.com\u002Fja\u002Fdownload\u002Funinstalltool.jsp",[142],[175],{"type":33,"value":172},{"type":28,"tag":29,"props":177,"children":178},{},[179],{"type":33,"value":180},"　もしJavaが入っていなければ、インストールします。P2VJを動かすのに必要です。",{"type":28,"tag":29,"props":182,"children":183},{},[184],{"type":28,"tag":105,"props":185,"children":188},{"href":186,"rel":187},"https:\u002F\u002Fjava.com\u002Fja\u002Fdownload\u002F",[142],[189],{"type":33,"value":186},{"type":28,"tag":29,"props":191,"children":192},{},[193],{"type":33,"value":194},"　Cドライブで javaw.exe を検索します。",{"type":28,"tag":29,"props":196,"children":197},{},[198],{"type":33,"value":199},"　見つかったものをコピーし、nurpaフォルダでショートカットの貼り付けをします。",{"type":28,"tag":29,"props":201,"children":202},{},[203],{"type":33,"value":204},"※ Windows11では、右クリック-その他のオプションを表示-ショートカットの貼り付け をする。",{"type":28,"tag":29,"props":206,"children":207},{},[208],{"type":33,"value":209},"例：javaw.exe - ショートカット リンク先→\"C:\\Program Files\\Java\\jre1.8.0_271\\bin\\javaw.exe\"",{"type":28,"tag":56,"props":211,"children":212},{},[],{"type":28,"tag":95,"props":214,"children":216},{"id":215},"_4-p2vjをダウンロードする",[217],{"type":33,"value":218},"4) P2VJをダウンロードする",{"type":28,"tag":29,"props":220,"children":221},{},[222],{"type":28,"tag":105,"props":223,"children":226},{"href":224,"rel":225},"http:\u002F\u002Fsesamecake.sakura.ne.jp\u002Fp2vj\u002F",[142],[227],{"type":33,"value":224},{"type":28,"tag":29,"props":229,"children":230},{},[231],{"type":33,"value":232},"　すべて展開し、p2vj_1.3フォルダをドキュメントなどにコピーします。",{"type":28,"tag":29,"props":234,"children":235},{},[236],{"type":33,"value":237},"　P2VJ.jarをコピーし、nurpaフォルダでショートカットの貼り付けをします。",{"type":28,"tag":29,"props":239,"children":240},{},[241],{"type":33,"value":242},"例：P2VJ.jar - ショートカット　リンク先→\"C:\\Users\\BOKUser\\Documents\\p2vj_1.3\\p2vj_1.3\\P2VJ.jar\"",{"type":28,"tag":56,"props":244,"children":245},{},[],{"type":28,"tag":95,"props":247,"children":249},{"id":248},"_5-inkscapeをダウンロードする",[250],{"type":33,"value":251},"5) Inkscapeをダウンロードする",{"type":28,"tag":29,"props":253,"children":254},{},[255],{"type":28,"tag":105,"props":256,"children":259},{"href":257,"rel":258},"https:\u002F\u002Finkscape.org\u002Fja\u002Frelease\u002F1.0.1\u002Fwindows\u002F",[142],[260],{"type":33,"value":257},{"type":28,"tag":29,"props":262,"children":263},{},[264],{"type":33,"value":265},"　できるだけ最新版をインストールします。",{"type":28,"tag":29,"props":267,"children":268},{},[269],{"type":33,"value":270},"　Ver1.0以降は、出力命令が変更されているので要注意です。",{"type":28,"tag":29,"props":272,"children":273},{},[274],{"type":28,"tag":105,"props":275,"children":278},{"href":276,"rel":277},"https:\u002F\u002Flookbackmargin.blog\u002F2020\u002F07\u002F31\u002Finkscape-o-instead-of-e\u002F",[142],[279],{"type":33,"value":276},{"type":28,"tag":29,"props":281,"children":282},{},[283],{"type":33,"value":284},"　インストールしたくない場合は、32-bitのPortable版をダウンロードし、インストール先（実際は展開のみ）をドキュメントなどにして使用します。",{"type":28,"tag":29,"props":286,"children":287},{},[288],{"type":33,"value":289},"　デスクトップのInkscapeのショートカットをコピーし、nurpaフォルダで貼り付けをします。",{"type":28,"tag":29,"props":291,"children":292},{},[293],{"type":33,"value":294},"例：Inkscape　リンク先→\"C:\\Program Files\\Inkscape\\bin\\inkscape.exe\"",{"type":28,"tag":29,"props":296,"children":297},{},[298],{"type":33,"value":299},"　または、InkscapePortable.exeをコピーし、nurpaフォルダでショートカットの貼り付けをします。",{"type":28,"tag":29,"props":301,"children":302},{},[303],{"type":33,"value":304},"例：InkscapePortable.exe - ショートカット　リンク先→C:\\Users\\BOKUser\\Documents\\InkscapePortable\\InkscapePortable.exe",{"type":28,"tag":56,"props":306,"children":307},{},[],{"type":28,"tag":95,"props":309,"children":311},{"id":310},"_6-posterazorをダウンロードする",[312],{"type":33,"value":313},"6) PosteRazorをダウンロードする",{"type":28,"tag":29,"props":315,"children":316},{},[317],{"type":28,"tag":105,"props":318,"children":321},{"href":319,"rel":320},"https:\u002F\u002Fwww.jimakudaio.com\u002Fpost-9637",[142],[322],{"type":33,"value":319},{"type":28,"tag":29,"props":324,"children":325},{},[326],{"type":33,"value":327},"　最新版をダウンロード・インストールします。",{"type":28,"tag":29,"props":329,"children":330},{},[331],{"type":33,"value":332},"　デスクトップのPosteRazorのショートカットをコピーし、nurpaフォルダで貼り付けをします。",{"type":28,"tag":29,"props":334,"children":335},{},[336],{"type":33,"value":337},"例：PosteRazor.exe - ショートカット　リンク先→\"C:\\Program Files (x86)\\PosteRazor\\PosteRazor.exe\"",{"type":28,"tag":56,"props":339,"children":340},{},[],{"type":28,"tag":95,"props":342,"children":344},{"id":343},"_7-nurpaを実行する",[345],{"type":33,"value":346},"7) nuRpaを実行する",{"type":28,"tag":29,"props":348,"children":349},{},[350],{"type":33,"value":351},"　nurpaフォルダの nuRpa.wsf をダブルクリックして実行します。",{"type":28,"tag":29,"props":353,"children":354},{},[355,357,364],{"type":33,"value":356},"　処理内容を変更したいときは、 nuriemaker.js をテキストエディタ（",{"type":28,"tag":105,"props":358,"children":361},{"href":359,"rel":360},"https:\u002F\u002Fforest.watch.impress.co.jp\u002Flibrary\u002Fsoftware\u002Fmery\u002F",[142],[362],{"type":33,"value":363},"Mery",{"type":33,"value":365}," など）で編集します。",{"type":28,"tag":29,"props":367,"children":368},{},[369,371,378,380,386],{"type":33,"value":370},"　2)で計算した枚数で　",{"type":28,"tag":372,"props":373,"children":375},"code",{"className":374},[],[376],{"type":33,"value":377},"\u002F\u002F\u002F\u002F\u002F\u002F★横分割数",{"type":33,"value":379}," の ",{"type":28,"tag":372,"props":381,"children":383},{"className":382},[],[384],{"type":33,"value":385},"RoboKey(\"数\");",{"type":33,"value":387}," を打ち換えて変更できます。縦分割数は、画像のサイズと横分割数から自動計算されます。「手本」と「ぬりえ」それぞれ指定できます。",{"type":28,"tag":29,"props":389,"children":390},{},[391],{"type":33,"value":392},"※ nuriemaker.js を直接ダブルクリックしないこと。",{"type":28,"tag":29,"props":394,"children":395},{},[396],{"type":33,"value":397},"　nuRpaでは、次の4段階で処理が進んでゆきます。",{"type":28,"tag":29,"props":399,"children":400},{},[401],{"type":33,"value":402},"①原画をSVGに変換、②完成画とぬりえのSVGを作成、③SVGをPNGに変換、④分割印刷用PDFを作成。",{"type":28,"tag":29,"props":404,"children":405},{},[406],{"type":33,"value":407},"（それぞれ、①P2VJ、②JScriptでテキスト置換、③Inkscape、④PosteRazor を使って実行）",{"type":28,"tag":29,"props":409,"children":410},{},[411],{"type":33,"value":412},"　②のぬりえ化については、「塗色を透明に」→「塗色を白色に」とアルゴリズムを改良しました。これにより、不要な線が透けることなく、塗りやすくなりました。",{"type":28,"tag":56,"props":414,"children":415},{},[],{"type":28,"tag":95,"props":417,"children":419},{"id":418},"_8-個人手本とぬりえを分割印刷する",[420],{"type":33,"value":421},"8) 個人手本とぬりえを分割印刷する",{"type":28,"tag":29,"props":423,"children":424},{},[425,427,434],{"type":33,"value":426},"　nuRpaで作成された分割印刷用PDF（～tr.pdfと～trp.pdf）に ",{"type":28,"tag":105,"props":428,"children":431},{"href":429,"rel":430},"https:\u002F\u002Fforest.watch.impress.co.jp\u002Flibrary\u002Fsoftware\u002Fpdf_as\u002F",[142],[432],{"type":33,"value":433},"pdf_as",{"type":33,"value":435}," でページ番号を付加します。",{"type":28,"tag":29,"props":437,"children":438},{},[439],{"type":33,"value":440},"　Acrobat Reader DC で、印刷します。",{"type":28,"tag":56,"props":442,"children":443},{},[],{"type":28,"tag":60,"props":445,"children":447},{"id":446},"hekiga",[448],{"type":33,"value":449},"壁画づくりの技術的な話",{"type":28,"tag":29,"props":451,"children":452},{},[453],{"type":33,"value":454},"　「大きな壁画を分割して共同制作したい」というハダノの夢は、PCを使えば実現できそうでした。",{"type":28,"tag":56,"props":456,"children":457},{},[],{"type":28,"tag":29,"props":459,"children":460},{},[461],{"type":33,"value":462},"　「PL学園の人文字のマスを2cmぐらいにしたら、写真クオリティの壁画ができないか」と思いついて、1993年に横16m × 縦10mの巨大壁画を作ってみました。県都の大きな中学校の3年生8クラスの文化祭作品です。「夢を現実に」をスローガンに体育大会の感動を表現しました。体育大会の写真をスキャンし、8色の色コードをBASICのpoint関数で読み取りました。生徒はその数字の表を見ながら、模造紙のマス目をポスターカラーで塗りました。壁画は話題となり、地元の新聞にも載りました。「ドット壁画」の誕生です。",{"type":28,"tag":29,"props":464,"children":465},{},[466],{"type":33,"value":467},"　その後、「ドット壁画の作り方を教えてほしい」と自宅に人が来るようになりました。高校に行った教え子が高校ではやらせ、転任した同僚がその学校ではやらせ、しだいに文化祭や卒業式のステージ画の定番となりました。",{"type":28,"tag":56,"props":469,"children":470},{},[],{"type":28,"tag":29,"props":472,"children":473},{},[474],{"type":33,"value":475},"　しかし、ドット壁画はあくまでも実験でした。原画を作ってしまえば、あとは単純作業です。一人ひとりの生徒に創意工夫の余地はありません。数年後、ハダノは自分の手でドット壁画を封印しました。",{"type":28,"tag":29,"props":477,"children":478},{},[479],{"type":33,"value":480},"　田舎の学校に移っていたハダノは、専門の理科以外に数・技・美などを持たされていました。美術を教えていたとき、あることに気づきました。絵の苦手な生徒は、見た通りの形ではなく、言葉の影響を受けたシンボルを描こうとするのです。試しに上下さかさまにした絵を模写させると、みんな上手に描けます。言葉を使うことができないからです。",{"type":28,"tag":29,"props":482,"children":483},{},[484],{"type":33,"value":485},"　立体感が苦手な生徒は、見た通りの色ではなく、頭の中で信じた色を塗ろうとするのです。試しに真っ白のトイレットペーパーをスケッチさせるとき、明るさを4段階に処理した写真を見せたあとは、もうだれも「トイレットペーパーは白一色だから描けない」とは言いません。",{"type":28,"tag":56,"props":487,"children":488},{},[],{"type":28,"tag":490,"props":491,"children":495},"img",{"src":492,"alt":493,"width":494},"\u002Fimg\u002Fdot_nurie.png","ドット絵からぬりえへ","100%",[],{"type":28,"tag":56,"props":497,"children":498},{},[],{"type":28,"tag":29,"props":500,"children":501},{},[502],{"type":33,"value":503},"　共同制作では、形が狂うと貼り合わせられません。色は自由な発想の余地があります。こうして、「ぬりえ」にたどりつきました。2000年代は Paint Shop Pro を使い、効果-アーティスティック効果-ポスタリゼーション で減色後、 効果-エッジ効果-輪郭検出 で輪郭線を得て、画像分割もPythonマクロでやっていました。できばえはよかったものの、フリーソフトではなかったため、はやらせるのは無理がありました。",{"type":28,"tag":490,"props":505,"children":508},{"src":506,"alt":507,"width":494},"\u002Fimg\u002Fgengasakusei.png","ぬりえ原画作成",[],{"type":28,"tag":56,"props":510,"children":511},{},[],{"type":28,"tag":29,"props":513,"children":514},{},[515],{"type":33,"value":516},"　2010年代になると、画面の高解像度化に伴い、ベクトル画像が脚光を浴びるようになりました。Web標準技術の一つとして、SVGというベクトル画像の規格が普及してきました。HTMLのようなテキストでベクトル画像が描画できるという画期的なものです。SVG編集ソフトでは、Adobe Illustratorが有名ですが、Inkscape という優秀なフリーソフトが現われました。",{"type":28,"tag":56,"props":518,"children":519},{},[],{"type":28,"tag":29,"props":521,"children":522},{},[523],{"type":33,"value":524},"　ぬりえ制作では、ビットマップ画像より、ベクトル画像の方が適しています。問題は、写真のようなビットマップをベクトルにきれいに変換するのはたいへんということです。Inkscape にもトレースという機能がありますが、変換精度は今一つです。そんなとき、P2VJというフリーソフトを知りました。ビットマップ→ベクトル変換に特化していて、きれいにやってくれます。あとは、SVGの中のテキストをいじって輪郭線を灰色にしたり、塗色を抜いたりするだけでぬりえの完成です。",{"type":28,"tag":490,"props":526,"children":529},{"src":527,"alt":528,"width":494},"\u002Fimg\u002Fsodehikaku.png","ぬりえ変換プロセス",[],{"type":28,"tag":56,"props":531,"children":532},{},[],{"type":28,"tag":29,"props":534,"children":535},{},[536],{"type":33,"value":537},"　画像分割は、自分でもVisualBasicで作ったことがあります。大量の画像ファイルができて管理がたいへんでした。PosteRazor は、１つのPDFファイルにしてくれます。生徒が描き損じても、ページ指定で目的の分割画像だけ印刷することができるのです。",{"type":28,"tag":56,"props":539,"children":540},{},[],{"type":28,"tag":95,"props":542,"children":544},{"id":543},"中全校ぬりえの技術的な話",[545],{"type":33,"value":546},"●●中全校ぬりえの技術的な話",{"type":28,"tag":29,"props":548,"children":549},{},[550],{"type":33,"value":551},"2020年度●●中学校文化祭テーマ「YELL～感謝・希望・笑顔～」",{"type":28,"tag":553,"props":554,"children":556},"h4",{"id":555},"原画-紅葉の背景を",[557],{"type":33,"value":558},"原画① 紅葉の背景を！",{"type":28,"tag":29,"props":560,"children":561},{},[562],{"type":33,"value":563},"　色が地味すぎる、もっとカラフルにしないと。紅葉の背景画像を探そう！",{"type":28,"tag":29,"props":565,"children":566},{},[567,569,576,578,585,587,594,596,603,605,612,614],{"type":33,"value":568},"※ ",{"type":28,"tag":105,"props":570,"children":573},{"href":571,"rel":572},"https:\u002F\u002Fhdrihaven.com\u002Fhdris\u002F",[142],[574],{"type":33,"value":575},"360度背景画像",{"type":33,"value":577},"と",{"type":28,"tag":105,"props":579,"children":582},{"href":580,"rel":581},"https:\u002F\u002Fsketchfab.com\u002Fsearch?features=downloadable&q=tree&sort_by=-relevance&type=models",[142],[583],{"type":33,"value":584},"３Dモデル",{"type":33,"value":586},"を探し、",{"type":28,"tag":105,"props":588,"children":591},{"href":589,"rel":590},"https:\u002F\u002Fudemy.benesse.co.jp\u002Fdevelopment\u002Fweb\u002Fblender.html",[142],[592],{"type":33,"value":593},"Blender",{"type":33,"value":595},"で合成。Gifアニメは、",{"type":28,"tag":105,"props":597,"children":600},{"href":598,"rel":599},"https:\u002F\u002Ffreesoft-100.com\u002Freview\u002Fmadophoto.html",[142],[601],{"type":33,"value":602},"画面キャプチャツール「窓フォト」",{"type":33,"value":604},"で作成。",{"type":28,"tag":105,"props":606,"children":609},{"href":607,"rel":608},"https:\u002F\u002Fwptheme-navi.jp\u002Fgif_compression_3\u002F",[142],[610],{"type":33,"value":611},"軽量化",{"type":33,"value":613},"してからWebにアップロード。\n",{"type":28,"tag":490,"props":615,"children":620},{"src":616,"alt":617,"className":618},"\u002Fimg\u002Fautumn2hf-min.gif","紅葉の背景画像を探そう",[619],"imghr",[],{"type":28,"tag":553,"props":622,"children":624},{"id":623},"原画-どこまでも伸びる木を",[625],{"type":33,"value":626},"原画② どこまでも伸びる木を！",{"type":28,"tag":490,"props":628,"children":633},{"src":629,"alt":630,"className":631},"\u002Fimg\u002Ftree_2.gif","３Dの木",[632],"imghl",[],{"type":28,"tag":553,"props":635,"children":637},{"id":636},"原画-みんなを笑顔にした集団行動",[638],{"type":33,"value":639},"原画③ みんなを笑顔にした集団行動",{"type":28,"tag":29,"props":641,"children":642},{},[643,645],{"type":33,"value":644},"　体育大会全校種目「集団行動」\n",{"type":28,"tag":490,"props":646,"children":650},{"src":647,"alt":648,"className":649},"\u002Fimg\u002Fshupei.JPG","体育大会集団行動",[619],[],{"type":28,"tag":553,"props":652,"children":654},{"id":653},"原画-今ここにしかない音楽を",[655],{"type":33,"value":656},"原画④ 今ここにしかない音楽を！",{"type":28,"tag":29,"props":658,"children":659},{},[660,662],{"type":33,"value":661},"　リコーダーで小鳥のさえずりを創作\n",{"type":28,"tag":490,"props":663,"children":667},{"src":664,"alt":665,"className":666},"\u002Fimg\u002Fsaezuri.JPG","リコーダーで小鳥のさえずりを創作",[632],[],{"type":28,"tag":553,"props":669,"children":671},{"id":670},"原画-yellが伝わる応援グッズ",[672],{"type":33,"value":673},"原画⑤ YELLが伝わる応援グッズ？",{"type":28,"tag":29,"props":675,"children":676},{},[677],{"type":33,"value":678},"　文化祭テーマのYELLがはっきりわかるには、小道具が必要。カラフルな応援グッズと言えば…？",{"type":28,"tag":29,"props":680,"children":681},{},[682,684,691],{"type":33,"value":683},"※ SVGモーフィングアニメーションは、",{"type":28,"tag":105,"props":685,"children":688},{"href":686,"rel":687},"https:\u002F\u002F11neko.com\u002Fflubber_js\u002F",[142],[689],{"type":33,"value":690},"flubber",{"type":33,"value":604},{"type":28,"tag":490,"props":693,"children":697},{"src":694,"alt":695,"width":696},"\u002Fimg\u002Fmegaphf.gif","SVGモーフィングアニメーション","20%",[],{"type":28,"tag":553,"props":699,"children":701},{"id":700},"原画-ファイトオー",[702],{"type":33,"value":703},"原画⑥ ファイト！オー！",{"type":28,"tag":29,"props":705,"children":706},{},[707,709],{"type":33,"value":708},"　力感がない、がっかりだ。撮り直そう！\n",{"type":28,"tag":490,"props":710,"children":714},{"src":711,"alt":712,"className":713},"\u002Fimg\u002Ffight7255.JPG","ファイト！オー！",[619],[],{"type":28,"tag":553,"props":716,"children":718},{"id":717},"原画-よし合体だ",[719],{"type":33,"value":720},"原画⑦ よし、合体だ！",{"type":28,"tag":29,"props":722,"children":723},{},[724],{"type":33,"value":725},"※ このアニメーションは、Wick Editor で作成。フリーのWebアプリで、クリックやキーボード入力を受け付けて動作を変えることもできるので、簡単な教材やゲームが作れ、プログラミングの入門にも役立ちそう。",{"type":28,"tag":727,"props":728,"children":729},"ul",{},[730,736],{"type":28,"tag":731,"props":732,"children":733},"li",{},[734],{"type":33,"value":735},"パラパラ漫画アニメーションをプログラムで制御できる「Wick Editor」を使ってみた！　",{"type":28,"tag":731,"props":737,"children":738},{},[739],{"type":33,"value":740},"Wick - Webベースのアニメーション作成エンジン",{"type":28,"tag":490,"props":742,"children":745},{"src":743,"alt":744,"width":494},"\u002Fimg\u002FYell55-min.gif","合体させて原画を作るアニメーション",[],{"type":28,"tag":29,"props":747,"children":748},{},[749],{"type":33,"value":750},"　Wick Editor は、学校のiPadでも動き、登録不要・インストール不要で使え、Web標準技術に沿っているので学習したことが無駄にならない。パラパラ漫画式でもTween補間でもとにかくビジュアルにアニメが作れ、GIFやmp4で出力できるので、いろんな環境で見ることができる。まだ、日本語の資料が少ないが、動画編集の経験があれば、迷わずに使える。 アドビのプレミアなどの動画編集ソフトでは、mp4に変換しなくてもそのままGIFアニメを動画クリップとして読み込むことができて便利。",{"type":28,"tag":553,"props":752,"children":754},{"id":753},"ベクトル化-ぬりえ-に",[755],{"type":33,"value":756},"ベクトル化 → ぬりえ に",{"type":28,"tag":29,"props":758,"children":759},{},[760],{"type":33,"value":761},"　すべてフリーソフトでだれでもできる。",{"type":28,"tag":29,"props":763,"children":764},{},[765,767],{"type":33,"value":766},"　nuRpa（ヌルパ）で自動実行すれば、さらに楽ちん！\n",{"type":28,"tag":490,"props":768,"children":772},{"src":769,"alt":756,"className":770},"\u002Fimg\u002Fvectorq-min.gif",[771],"imghc",[],{"type":28,"tag":56,"props":774,"children":775},{},[],{"type":28,"tag":60,"props":777,"children":779},{"id":778},"自動化の技術的な話",[780],{"type":33,"value":778},{"type":28,"tag":29,"props":782,"children":783},{},[784],{"type":33,"value":785},"　教員の働き方改革のためにもRPA（ロボティック・プロセス・オートメーション）などで自動化することが求められています。",{"type":28,"tag":29,"props":787,"children":788},{},[789],{"type":33,"value":790},"　マウスやタッチでの直感的な操作（GUI）は、初心者にはやさしいが、熟練者やコンピュータには扱いづらいものです。キーボードでコマンドをテキスト入力する操作（CUI）の方が、動作が軽く、記録・共有しやすいので処理を自動化しやすいといえます。デザイナーとプログラマーの間の溝もこれが原因でしょう。",{"type":28,"tag":29,"props":792,"children":793},{},[794],{"type":33,"value":795},"　『コマンドラインで実行→キーボードで操作→マウスで操作』の順に自動化が難しくなります。操作対象を特定するためには、オブジェクト認識、画像認識、さらにはAI活用も必要になってきます。",{"type":28,"tag":29,"props":797,"children":798},{},[799],{"type":33,"value":800},"　現在のruRpaでは、「①原画をSVGに変換、②完成画とぬりえのSVGを作成、③SVGをPNGに変換」は、コマンドラインで実行し、「④分割印刷用PDFを作成」は、キーボード操作を自動化しています。プログラムの行数を比較すると、①～③の平均16行に対し、④は158行で10倍ものコード量となっているのです。",{"type":28,"tag":29,"props":802,"children":803},{},[804],{"type":33,"value":805},"　モダンな開発環境（VS Code、Node.js、Python、…）は、セキュリティの関係でPCにインストールできない学校が多いのが現状です。しばらくはWSHなどレガシーな技術で何とかするしかないでしょう。",{"type":28,"tag":727,"props":807,"children":808},{},[809,819],{"type":28,"tag":731,"props":810,"children":811},{},[812],{"type":28,"tag":105,"props":813,"children":816},{"href":814,"rel":815},"https:\u002F\u002Flanguage-and-engineering.hatenablog.jp\u002Fentry\u002F20090125\u002F1232940498",[142],[817],{"type":33,"value":818},"WSHでもWSF形式にすることで、Node.jsのrequire()のようなライブラリ利用が可能",{"type":28,"tag":731,"props":820,"children":821},{},[822],{"type":28,"tag":105,"props":823,"children":826},{"href":824,"rel":825},"https:\u002F\u002Fblog.natade.net\u002F2020\u002F01\u002F19\u002Fwsh-jscript-javascript-windows-bat\u002F",[142],[827],{"type":33,"value":828},"WSHを利用したJScriptのライブラリ「SenkoWSH」（なたで氏作）",{"type":28,"tag":29,"props":830,"children":831},{},[832],{"type":33,"value":833},"などにより、ぬりえ変換以外にも広く業務の自動化に取り組んでいきたいと考えています。",{"type":28,"tag":29,"props":835,"children":836},{},[837],{"type":33,"value":838},"　特に、「Robotクラス」には、2000年公開の自作ライブラリ「TieUp（タイアップ）」と共通する方向性を感じます。",{"type":28,"tag":29,"props":840,"children":841},{},[842],{"type":28,"tag":105,"props":843,"children":846},{"href":844,"rel":845},"https:\u002F\u002Fwww.vector.co.jp\u002Fsoft\u002Fwin95\u002Futil\u002Fse099345.html",[142],[847],{"type":33,"value":844},{"type":28,"tag":56,"props":849,"children":850},{},[],{"type":28,"tag":95,"props":852,"children":854},{"id":853},"nurpawsf-実行例画面出力をコピペ",[855],{"type":33,"value":856},"nuRpa.wsf 実行例（画面出力をコピペ）",{"type":28,"tag":858,"props":859,"children":861},"pre",{"code":860},"\n　nuRpa (ヌルパ) は、ぬりえ変換を自動化するＲＰＡシステムです。\n\n　natadeさんのSenkoWSH.js（WSH JScript用の汎用ライブラリ）を読み込んで使用しています。\n\nまず、 nurpa フォルダ内のショートカットを調べます。\n\njavaw.exe - ショートカット.lnk\nP2VJ.jar - ショートカット.lnk\ninkscape.exe - ショートカット.lnk\nPosteRazor.exe - ショートカット.lnk\n\n\nもし、？がついていれば、そのショートカットを nurpa フォルダ内にコピーしてから再び実行してください。誤作動を防ぐため、不 要なウィンドウは、終了・最小化してください。\n\n0 :ここで処理を終了\n1 :原画を P2VJ でSVGファイルに変換（要 java、要 P2VJ）\n2 :完成画svgとぬりえsvgを作成\n3 :Inkscape でPNG画像にエクスポート（要 Inkscape）\n4 :PosteRazor で分割印刷用PDF作成（要 PosteRazor）\nどこまで処理するかを、半角数字とEnterキーで！\n4\n　4 番の処理まで実行します。処理が完全に終わるまで、手を触れないでください。\nyell0.png　を\nyell0.svg　に変換します。\n処理が終わるまで数分かかります。辛抱強くお待ちください、、、\n\"C:\\\\Users\\\\k***8\\\\AppData\\\\Local\\\\JDownloader 2.0\\\\jre\\\\bin\\\\javaw.exe\" -jar C:\\\\Users\\\\k***8\\\\OneDrive\\\\ドキュメント\\\\OLS\\\\p2vj_1.3\\\\p2vj_1.3\\\\P2VJ.jar -i yell0.png -o yell0.svg -posterize 256\n1番「P2VJによるベクトル化」が終わりました。\n\n2番「完成画（～tr.svg）とぬりえ（～trp.svg）のベクトル画像作成」が終わりました。\n\n\"C:\\\\Program Files\\\\Inkscape\\\\bin\\\\inkscape.exe\" -z yell0tr.svg -o yell0tr.png -d 320\n\"C:\\\\Program Files\\\\Inkscape\\\\bin\\\\inkscape.exe\" -z yell0trp.svg -o yell0trp.png -d 320\n3番「完成画（～tr.png）とぬりえ（～trp.png）のビットマップ画像作成」が終わりました。\n\nyell0tr.pdf を一旦開いて閉じてから削除します。\n.\n\"C:\\\\Program Files (x86)\\\\PosteRazor\\\\PosteRazor.exe\" D:\\\\dev\\\\nurpa\\\\yell0tr.png\n..\n\"C:\\\\Program Files (x86)\\\\PosteRazor\\\\PosteRazor.exe\" D:\\\\dev\\\\nurpa\\\\yell0trp.png\n..\n4番「個人手本（～tr.pdf）とぬりえ（～trp.pdf）の分割印刷用PDF作成」が終わりました。\n\n自動的に終了します。\n\n",[862],{"type":28,"tag":372,"props":863,"children":864},{"__ignoreMap":8},[865],{"type":33,"value":860},{"type":28,"tag":56,"props":867,"children":868},{},[],{"type":28,"tag":60,"props":870,"children":872},{"id":871},"dx人材育成へ",[873],{"type":33,"value":874},"DX人材育成へ",{"type":28,"tag":29,"props":876,"children":877},{},[878],{"type":33,"value":879},"　「DXに本気で取り組まないと2025年の崖を乗り越えられない」は、大企業だけの問題ではありません。",{"type":28,"tag":29,"props":881,"children":882},{},[883],{"type":33,"value":884},"　自動車にしてもOAにしても機械を導入すれば自動化されて楽になるというのは幻想です。機械の操作に追われて終わりでしょう。「自動車→自動運転車」に相当するのが「OA→RPA」です。",{"type":28,"tag":29,"props":886,"children":887},{},[888],{"type":33,"value":889},"　大企業では、「COBOL・自社運用→JAVA・クラウド」へと転換しようとしていますが、これはせいぜい「MTガソリン車→運転支援付きATハイブリッド車」ぐらいの変化です。完全な自動化のためには、「認知」「判断」「操作」、そして「学習」し改良し続けるAI技術が必要です。AI人材育成に向けて教育も変わらなければなりません。",{"type":28,"tag":29,"props":891,"children":892},{},[893],{"type":33,"value":894},"　GIGAスクールの一人１台タブレット導入に向けて準備する中で、マウスやタッチでのGUIしか知らない人がUNIX文化で積み上げられたCUIの世界に踏み込むのはかなり困難と確信しました。",{"type":28,"tag":29,"props":896,"children":897},{},[898],{"type":33,"value":899},"　今やデザイナーでさえ、作品をGitで管理する時代です。Gitコマンドを使いこなせないと他のデザイナーやエンジニアと連携できないはずです。どんな映画も、原作本や台本などのテキストをもとにみんなが協働して制作されます。プログラミングは、台本やマニュアルや指導案のようなテキストを書く作業です。",{"type":28,"tag":56,"props":901,"children":902},{},[],{"type":28,"tag":29,"props":904,"children":905},{},[906],{"type":33,"value":907},"　未来を生きる子どもたちには、読解力・表現力・論理的思考力が必要です。小学校にプログラミング教育が入ったものの、ビジュアルプログラミング体験のみで、中学校のテキストプログラミングにつながっていません。",{"type":28,"tag":29,"props":909,"children":910},{},[911],{"type":33,"value":912},"　AIリテラシーの前にICTリテラシーが必要です。スマホやタブレットで各種アプリやサービスを便利に使いこなすことより、テキストベースのコマンドやファイルの取り扱い・タッチタイピングを基礎教養として重視すべきです。",{"type":28,"tag":29,"props":914,"children":915},{},[916],{"type":33,"value":917},"　nuRpaの開発でも、ぬりえ化アルゴリズムの改良は、「正規表現」を使うことで簡単に実現できると気づきました。こういう基礎的な部分をGUIでオブラートに包んでブラックボックス化してはいけないとも感じています。ガラパゴス化する日本の中で、世界の集合知を高めるためにどんな貢献ができるか、考えていきたいものです。",{"type":28,"tag":56,"props":919,"children":921},{"id":920},"svgessentials",[],{"type":28,"tag":923,"props":924,"children":927},"div",{"className":925},[926],"kattene",[928,930,946,947],{"type":33,"value":929},"\n    ",{"type":28,"tag":923,"props":931,"children":934},{"className":932},[933],"kattene__imgpart",[935],{"type":28,"tag":105,"props":936,"children":941},{"target":937,"rel":938,"href":940},"_blank",[939],"noopener","https:\u002F\u002Fhb.afl.rakuten.co.jp\u002Fichiba\u002F26ba9fc2.c2fdf85a.26ba9fc3.8edde063\u002F_RTLink57028?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fbook%2F14919365%2F&link_type=hybrid_url&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJoeWJyaWRfdXJsIiwic2l6ZSI6IjI0MHgyNDAiLCJuYW0iOjEsIm5hbXAiOiJ1cCIsImNvbSI6MSwiY29tcCI6ImRvd24iLCJwcmljZSI6MCwiYm9yIjoxLCJjb2wiOjEsImJidG4iOjAsInByb2QiOjAsImFtcCI6ZmFsc2V9",[942],{"type":28,"tag":490,"props":943,"children":945},{"src":944},"https:\u002F\u002Fthumbnail.image.rakuten.co.jp\u002F@0_mall\u002Fbook\u002Fcabinet\u002F7973\u002F9784873117973.jpg?_ex=240x240",[],{"type":33,"value":929},{"type":28,"tag":923,"props":948,"children":951},{"className":949},[950],"kattene__infopart",[952,954,965,966,986,987,1035],{"type":33,"value":953},"\n      ",{"type":28,"tag":923,"props":955,"children":958},{"className":956},[957],"kattene__title",[959],{"type":28,"tag":105,"props":960,"children":962},{"target":937,"rel":961,"href":940},[939],[963],{"type":33,"value":964},"SVGエッセンシャルズ 第2版 [ J. David Eisenberg ]",{"type":33,"value":953},{"type":28,"tag":923,"props":967,"children":970},{"className":968},[969],"kattene__description",[971,974,976,979,981,984],{"type":28,"tag":56,"props":972,"children":973},{},[],{"type":33,"value":975},"※ SVGは、拡大縮小・変形しても美しい、XMLベースのWeb標準画像フォーマットです。",{"type":28,"tag":56,"props":977,"children":978},{},[],{"type":33,"value":980},"スマホのSVG対応も進み、今後ますます利用がふくらむSVGの基礎から応用までをわかりやすく解説しています。",{"type":28,"tag":56,"props":982,"children":983},{},[],{"type":33,"value":985},"ハダノは、この本のおかげでヌルパを作ることができました。",{"type":33,"value":953},{"type":28,"tag":923,"props":988,"children":992},{"className":989},[990,991],"kattene__btns","__three",[993,995,1007,1009,1021,1022,1034],{"type":33,"value":994},"\n      \t",{"type":28,"tag":923,"props":996,"children":997},{},[998],{"type":28,"tag":105,"props":999,"children":1004},{"className":1000,"target":937,"rel":1003,"href":940},[1001,1002],"kattene__btn","__red",[939],[1005],{"type":33,"value":1006},"楽天",{"type":33,"value":1008},"\n        ",{"type":28,"tag":923,"props":1010,"children":1011},{},[1012],{"type":28,"tag":105,"props":1013,"children":1018},{"className":1014,"target":937,"rel":1016,"href":1017},[1001,1015],"__orange",[939],"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%2F4873117976",[1019],{"type":33,"value":1020},"Amazon",{"type":33,"value":1008},{"type":28,"tag":923,"props":1023,"children":1024},{},[1025],{"type":28,"tag":105,"props":1026,"children":1031},{"className":1027,"target":937,"rel":1029,"href":1030},[1001,1028],"__green",[939],"https:\u002F\u002Fck.jp.ap.valuecommerce.com\u002Fservlet\u002Freferral?sid=3651993&pid=887947441&vc_url=https%3A%2F%2Fstore.shopping.yahoo.co.jp%2Fkinokuniya%2F9784873117973.html%3Fsc_i%3Dshp_pc_search_itemlist_shsrg_title",[1032],{"type":33,"value":1033},"Yahoo!",{"type":33,"value":953},{"type":33,"value":929},{"type":28,"tag":56,"props":1037,"children":1038},{},[],{"type":28,"tag":1040,"props":1041,"children":1042},"hr",{},[],{"type":28,"tag":29,"props":1044,"children":1045},{},[1046],{"type":28,"tag":105,"props":1047,"children":1049},{"href":1048},"\u002Farticles\u002Fnurpa-1",[1050],{"type":33,"value":1051},"←前へ　文化祭×人権教育×働き方改革から生まれたヌルパ",{"title":8,"searchDepth":1053,"depth":1053,"links":1054},2,[1055,1056,1067,1070,1073],{"id":62,"depth":1053,"text":65},{"id":91,"depth":1053,"text":91,"children":1057},[1058,1060,1061,1062,1063,1064,1065,1066],{"id":97,"depth":1059,"text":100},3,{"id":124,"depth":1059,"text":127},{"id":163,"depth":1059,"text":166},{"id":215,"depth":1059,"text":218},{"id":248,"depth":1059,"text":251},{"id":310,"depth":1059,"text":313},{"id":343,"depth":1059,"text":346},{"id":418,"depth":1059,"text":421},{"id":446,"depth":1053,"text":449,"children":1068},[1069],{"id":543,"depth":1059,"text":546},{"id":778,"depth":1053,"text":778,"children":1071},[1072],{"id":853,"depth":1059,"text":856},{"id":871,"depth":1053,"text":874},"markdown","content:articles:nurpa-2.md","content","articles\u002Fnurpa-2.md","articles\u002Fnurpa-2","md",{"_path":1081,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":1082,"description":1083,"category":1084,"tag":1086,"thumbnail":1091,"createdAt":1092,"updatedAt":1093,"body":1094,"_type":1074,"_id":2283,"_source":1076,"_file":2284,"_stem":2285,"_extension":1079},"\u002Farticles\u002Fsocsaga-1","プログラミングシステム「ソックサーガ」を作ってみた","ローコードで専門知識不要、個性が出せるので評価しやすく、共同制作もできるコンテンツプログラミングシステム",[1085],"programming",[1087,1088,1089,16,1090],"socsaga","information-ed","beginner-programming","vue","socsaga01.jpg","2022\u002F5\u002F5","2022\u002F6\u002F29",{"type":25,"children":1095,"toc":2270},[1096,1101,1113,1116,1122,1139,1144,1156,1161,1164,1170,1175,1180,1183,1188,1193,1196,1227,1232,1237,1248,1251,1257,1263,1277,1282,1287,1290,1296,1299,1308,1313,1318,1321,1381,1384,1389,1394,1399,1402,1407,1410,1415,1418,1424,1427,1437,1442,1457,1460,1468,1477,1482,1494,1507,1544,1547,1552,1555,1568,1571,1577,1583,1601,1610,1616,1872,1878,1906,1912,1976,1982,2044,2049,2054,2058,2064,2079,2082,2087,2090,2095,2100,2158,2162,2255,2258,2261],{"type":28,"tag":29,"props":1097,"children":1098},{},[1099],{"type":33,"value":1100},"　この記事では、新しい中学校プログラミング教育に対応するシステム「ソックサーガ」を紹介します。ソックリッカー制作の経験を活かし、最新技術をふんだんに取りいれて作りました。ローコードで専門知識不要、個性が出せるので評価しやすく、共同制作もできるコンテンツプログラミングシステムをめざしました。未履修問題の解決に役立つかどうか、お確かめください。",{"type":28,"tag":29,"props":1102,"children":1104},{"style":1103},"text-align: right;",[1105,1107],{"type":33,"value":1106},"⇒",{"type":28,"tag":105,"props":1108,"children":1110},{"href":1109},"#socsagademo",[1111],{"type":33,"value":1112}," お急ぎの方はこちらへ",{"type":28,"tag":56,"props":1114,"children":1115},{},[],{"type":28,"tag":60,"props":1117,"children":1119},{"id":1118},"中学校プログラミング教育は未履修問題が心配",[1120],{"type":33,"value":1121},"中学校プログラミング教育は未履修問題が心配！？",{"type":28,"tag":29,"props":1123,"children":1124},{},[1125,1127,1137],{"type":33,"value":1126},"　2021年度から中学校プログラミング教育が大きく変わりました。従来の「ディジタル作品づくり」から、「",{"type":28,"tag":1128,"props":1129,"children":1130},"em",{},[1131],{"type":28,"tag":1132,"props":1133,"children":1134},"strong",{},[1135],{"type":33,"value":1136},"ネットワークを利用した双方向性のあるコンテンツのプログラミング",{"type":33,"value":1138},"による問題の解決」となったのです。",{"type":28,"tag":29,"props":1140,"children":1141},{},[1142],{"type":33,"value":1143},"　ネットワークがらみのプログラミングは、環境構築の困難さに加え、通信の遅れを考慮した非同期処理・競合解決、セキュリティ対策、OS・ブラウザ・言語の多様性への対応も必要となり、かなりハードルが高くなります。一般的にPHPなどの専用言語を用いたサーバーサイドプログラミングも必要になります。",{"type":28,"tag":29,"props":1145,"children":1146},{},[1147,1149],{"type":33,"value":1148},"→ ",{"type":28,"tag":105,"props":1150,"children":1153},{"href":1151,"rel":1152},"https:\u002F\u002Fwww.watch.impress.co.jp\u002Fkodomo_it\u002Fnews\u002F1159054.html",[142],[1154],{"type":33,"value":1155},"🔗 「ネットワーク」に「双方向」!?　倍増するプログラミングの学習内容に中学校の現場はどう対応するのか",{"type":28,"tag":29,"props":1157,"children":1158},{},[1159],{"type":33,"value":1160},"　これに対応する教材はたいへん少ないのが現状です。",{"type":28,"tag":56,"props":1162,"children":1163},{},[],{"type":28,"tag":95,"props":1165,"children":1167},{"id":1166},"双方向性のあるコンテンツとは",[1168],{"type":33,"value":1169},"双方向性のあるコンテンツとは？",{"type":28,"tag":29,"props":1171,"children":1172},{},[1173],{"type":33,"value":1174},"　双方向性のあるコンテンツとは、「入力に応答する、人間にとって意味のある情報の内容」です。ロボットを動かす情報はコンテンツではないし、プレゼンや動画などは双方向性のないコンテンツです。さらにコンテンツには、「デジタル化された文字，音声，静止画，動画などのデータを複合化」することが求められています。",{"type":28,"tag":29,"props":1176,"children":1177},{},[1178],{"type":33,"value":1179},"　現代、作品・製品の多くがクリエーターとエンジニアの協力によって生まれています。どちらかといえば、双方向性はエンジニアの比重が、コンテンツはクリエーターの比重が大きいと言えます。もし両者の敷居を低くすることができれば、作品の質は飛躍的に向上するはずです。",{"type":28,"tag":56,"props":1181,"children":1182},{},[],{"type":28,"tag":95,"props":1184,"children":1186},{"id":1185},"技術の教科書が抱える深刻な問題",[1187],{"type":33,"value":1185},{"type":28,"tag":29,"props":1189,"children":1190},{},[1191],{"type":33,"value":1192},"　技術の教科書には５つの実習例が出ていますが、どれも深刻な問題を抱えています。",{"type":28,"tag":56,"props":1194,"children":1195},{},[],{"type":28,"tag":727,"props":1197,"children":1198},{},[1199,1204,1219],{"type":28,"tag":731,"props":1200,"children":1201},{},[1202],{"type":33,"value":1203},"『チャット』・『タイピング練習』は、コンテンツが利用者まかせで貧弱であり、作り手から提供される情報がない。",{"type":28,"tag":731,"props":1205,"children":1206},{},[1207,1209,1217],{"type":33,"value":1208},"『ルート検索』・『英単語の発音チェック』は、魅力的なコンテンツではあるが、外部プログラムを呼び出して使っているだけであり、ほぼ何もプログラミングしていない。つまり、問題解決にプログラムを使っているが",{"type":28,"tag":1128,"props":1210,"children":1211},{},[1212],{"type":28,"tag":1132,"props":1213,"children":1214},{},[1215],{"type":33,"value":1216},"作ってはいない",{"type":33,"value":1218},"。",{"type":28,"tag":731,"props":1220,"children":1221},{},[1222,1224],{"type":33,"value":1223},"『防災地図』は、魅力的なコンテンツを双方向的に操作できる可能性があるという点ですばらしい。ただ、望む動作をさせようとした場合、直接 scriptタグ内を正確に書き換える必要がある。数時間の実習で理解して完成させるのは、生徒も教師も不可能に近い。\n",{"type":28,"tag":56,"props":1225,"children":1226},{},[],{"type":28,"tag":29,"props":1228,"children":1229},{},[1230],{"type":33,"value":1231},"　『防災地図』以外の4つのアプリは、Scratch の利用を前提としています。小学生のプログラミング体験にはよくても、本格的な問題解決には向きません。本命は、高速・柔軟で共有・再利用できるテキストプログラミングです。いずれにせよ、「アイディアを形にするプロセス」が難しすぎたり、簡単でも制約が多すぎたりすれば、どの生徒の作品も同じようなものになり、評価が困難になるでしょう。",{"type":28,"tag":29,"props":1233,"children":1234},{},[1235],{"type":33,"value":1236},"　このように、技術の教科書にある5つの実習例は、どれも深刻な問題を抱え、実施も評価も困難です。高い理想に現実が追い付かず、このままでは、ほとんどの中学校で「未履修問題」が発生してしまいます。ITエンジニアからも「教えられる先生はいるのか？という課題」が指摘されました。",{"type":28,"tag":29,"props":1238,"children":1239},{},[1240,1241],{"type":33,"value":1148},{"type":28,"tag":105,"props":1242,"children":1245},{"href":1243,"rel":1244},"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",[142],[1246],{"type":33,"value":1247},"🔗 中学校の技術科の教科書(情報分野)が進歩していた件",{"type":28,"tag":56,"props":1249,"children":1250},{},[],{"type":28,"tag":60,"props":1252,"children":1254},{"id":1253},"プログラミングシステムソックサーガで解決",[1255],{"type":33,"value":1256},"プログラミングシステム「ソックサーガ」で解決",{"type":28,"tag":95,"props":1258,"children":1260},{"id":1259},"ネットワークプログラミングはクラウド統合開発環境で解決",[1261],{"type":33,"value":1262},"ネットワークプログラミングは、クラウド統合開発環境で解決",{"type":28,"tag":29,"props":1264,"children":1265},{},[1266,1268,1275],{"type":33,"value":1267},"　ネットワークを利用したプログラミングをしようとすると、テキストエディタで編集→ローカルファイルとして保存→アップロード→ブラウザで確認という手順が必要となり、セキュリティの問題もからみ、煩雑でした。それを解決するのが ",{"type":28,"tag":105,"props":1269,"children":1272},{"href":1270,"rel":1271},"https:\u002F\u002Fwww.naka-sys.okinawa\u002Freplit-used\u002F",[142],[1273],{"type":33,"value":1274},"🔗Replit（リプリット）",{"type":33,"value":1276}," などの「クラウド統合開発環境」です。",{"type":28,"tag":29,"props":1278,"children":1279},{},[1280],{"type":33,"value":1281},"　Replit の上でWebアプリを動かすことで、ビジュアルに複合コンテンツを作り、最小限のコードで双方向性を持たせるシステムを作ってみました。それが SocSaga です。即、サーガ（冒険物語）にいざなう…との願いをこめました。",{"type":28,"tag":29,"props":1283,"children":1284},{},[1285],{"type":33,"value":1286},"　SocSaga を使えば、ローカルファイルを管理する必要がなく、環境構築の手間なしに直接Web上のファイルを編集でき、作品の中身と動作のロジックに集中することができます。　",{"type":28,"tag":56,"props":1288,"children":1289},{},[],{"type":28,"tag":95,"props":1291,"children":1293},{"id":1292},"コンテンツ作りはビジュアルhtmlエディタで解決",[1294],{"type":33,"value":1295},"コンテンツ作りは、ビジュアルHTMLエディタで解決",{"type":28,"tag":56,"props":1297,"children":1298},{},[],{"type":28,"tag":29,"props":1300,"children":1301},{},[1302,1307],{"type":28,"tag":490,"props":1303,"children":1306},{"src":1304,"alt":1305,"width":494},"\u002Fimg\u002Fsocsaga02.svg","socpad",[],{"type":33,"value":137},{"type":28,"tag":29,"props":1309,"children":1310},{},[1311],{"type":33,"value":1312},"　HTMLの文法をマスターするには、相当の時間がかかります。ビジュアルHTMLエディタSocPadの出番です。",{"type":28,"tag":29,"props":1314,"children":1315},{},[1316],{"type":33,"value":1317},"　ソックサーガ用SocPadは、ソックリッカー用SocPadを流用したものです。簡易ワープロ「ワードパッド」に似た操作で簡単です。見たとおりにHTML編集ができます。画像をReplitにアップロードして挿入したり、リンクを挿入したりできるので、メディアを複合化したホームページとして使えます。",{"type":28,"tag":56,"props":1319,"children":1320},{},[],{"type":28,"tag":727,"props":1322,"children":1323},{},[1324,1329,1340,1360],{"type":28,"tag":731,"props":1325,"children":1326},{},[1327],{"type":33,"value":1328},"[保存] ボタンでFirebaseのデータベースに保存するかわりに、[ソース] ボタンを使い、指示に従って直接HTMLファイル内に貼り付ける。HTMLの文法を知らなくても、見たとおりにHTML編集ができる。",{"type":28,"tag":731,"props":1330,"children":1331},{},[1332,1338],{"type":28,"tag":372,"props":1333,"children":1335},{"className":1334},[],[1336],{"type":33,"value":1337},"\u003Csection>\u003C\u002Fsection>",{"type":33,"value":1339}," を追加すれば、新規スライドが追加される。",{"type":28,"tag":731,"props":1341,"children":1342},{},[1343,1345,1351,1352,1358],{"type":33,"value":1344},"sectionタグ内（",{"type":28,"tag":372,"props":1346,"children":1348},{"className":1347},[],[1349],{"type":33,"value":1350},"\u003Csection> ",{"type":33,"value":577},{"type":28,"tag":372,"props":1353,"children":1355},{"className":1354},[],[1356],{"type":33,"value":1357}," \u003C\u002Fsection>",{"type":33,"value":1359}," の間の部分）にソースを貼り付けると、スライドが保存される。",{"type":28,"tag":731,"props":1361,"children":1362},{},[1363,1365,1371,1373,1379],{"type":33,"value":1364},"別のスライドを編集したいときは、 ",{"type":28,"tag":372,"props":1366,"children":1368},{"className":1367},[],[1369],{"type":33,"value":1370},"～id=\"henshu\">",{"type":33,"value":1372},"（番号）",{"type":28,"tag":372,"props":1374,"children":1376},{"className":1375},[],[1377],{"type":33,"value":1378},"\u003C\u002Fspan>\u003C!--　編集するスライド番号を入れる　-->",{"type":33,"value":1380},"　の番号部分を書き換え、スライド編集エリアの上の ↻ ボタンで更新する。更新すると、編集中のものは消えるので、ソースを貼り付けたか必ず確認すること。心配であれば、メモ帳などにもソースを貼り付けておくとよい。",{"type":28,"tag":56,"props":1382,"children":1383},{},[],{"type":28,"tag":29,"props":1385,"children":1386},{},[1387],{"type":33,"value":1388},"…以上を繰り返して、スライドを１枚１枚作ってゆきます。",{"type":28,"tag":29,"props":1390,"children":1391},{},[1392],{"type":33,"value":1393},"　スライドを作ったら、「編集エリア」の下の「実行エリア」でボタンを押してスライドを切り換えてみます。切り換え動作の設定は、次の『双方向性は、4色ボタン操作で解決』を見てください。",{"type":28,"tag":29,"props":1395,"children":1396},{},[1397],{"type":33,"value":1398},"　すべてのスライドの内容・動作が完成したら、スライド番号部分に ０ を入れます。「実行エリア」だけが表示されるようになるので、URLを公開して人に見せることができます。",{"type":28,"tag":56,"props":1400,"children":1401},{},[],{"type":28,"tag":29,"props":1403,"children":1404},{},[1405],{"type":33,"value":1406},"※ ソックリッカーでは、Firebase の Realtime Database にHTMLを保存し、Storage に画像をアップロードしました。ソックサーガでは、Firebase は使いません。授業配信アプリでは、ユーザーにソースコードや画像素材等を見せる必要はありません。しかし、プログラミング学習では、Replit上ではっきり見える形で取り扱わせる方がよいと考えました。sectionタグ内にソースをはりつけさせるのは、そのためなのです。",{"type":28,"tag":56,"props":1408,"children":1409},{},[],{"type":28,"tag":29,"props":1411,"children":1412},{},[1413],{"type":33,"value":1414},"※ ソックサーガは、「生徒にWebアプリを作らせる」Webアプリです。コンテンツ編集・アプリ実行のためのJavaScriptは、ルートのssscript.jsにまとめて、生徒にさわらせないようにしています。編集モードから実行モードへの切り替えを「スライド番号部分に 0 を入れる」方法にしたのは、評価や指導をやりやすくするためです。",{"type":28,"tag":56,"props":1416,"children":1417},{},[],{"type":28,"tag":95,"props":1419,"children":1421},{"id":1420},"双方向性は4色ボタン操作で解決",[1422],{"type":33,"value":1423},"双方向性は、4色ボタン操作で解決",{"type":28,"tag":56,"props":1425,"children":1426},{},[],{"type":28,"tag":29,"props":1428,"children":1429},{},[1430,1435],{"type":28,"tag":490,"props":1431,"children":1434},{"src":1432,"alt":1433,"width":494},"\u002Fimg\u002Fsocsaga04.svg","socsaga04",[],{"type":33,"value":1436},"　　",{"type":28,"tag":29,"props":1438,"children":1439},{},[1440],{"type":33,"value":1441},"　ソックリッカーでは、TVのリモコンと同じ4色ボタンで投票します。ソックサーガも4色ボタンで操作することにしました。",{"type":28,"tag":29,"props":1443,"children":1444},{},[1445,1447,1455],{"type":33,"value":1446},"　①動作は4色のボタンに割り当て、②飛び先は class属性で指定し、③必要に応じて動作を拡張する という ",{"type":28,"tag":1128,"props":1448,"children":1449},{},[1450],{"type":28,"tag":1132,"props":1451,"children":1452},{},[1453],{"type":33,"value":1454},"ローコードプログラミング",{"type":33,"value":1456}," の手法で行います。 「順\n次・分岐・反復」のスライド移動の基本命令は、 xgo(数); という関数で、数によって動作を変えるようにしています。",{"type":28,"tag":56,"props":1458,"children":1459},{},[],{"type":28,"tag":727,"props":1461,"children":1462},{},[1463],{"type":28,"tag":731,"props":1464,"children":1465},{},[1466],{"type":33,"value":1467},"sectionタグには、デフォルト(規定値)で、",{"type":28,"tag":29,"props":1469,"children":1470},{},[1471],{"type":28,"tag":372,"props":1472,"children":1474},{"className":1473},[],[1475],{"type":33,"value":1476},"data-nav=\"nav0:xp+'／'+xpsum; nav1:↑;xgo(-8); nav2:←;xgo(-1); nav3:→;xgo(1);nav4:↓;xgo(8);\"",{"type":28,"tag":29,"props":1478,"children":1479},{},[1480],{"type":33,"value":1481},"というカスタムデータ属性が設定されている。",{"type":28,"tag":727,"props":1483,"children":1484},{},[1485],{"type":28,"tag":731,"props":1486,"children":1487},{},[1488],{"type":28,"tag":372,"props":1489,"children":1491},{"className":1490},[],[1492],{"type":33,"value":1493},"\u003Csection data-nav=\"nav1:先頭へ;xgo(-9);\">",{"type":28,"tag":29,"props":1495,"children":1496},{},[1497,1499,1505],{"type":33,"value":1498},"とすれば、青色のボタン1 だけ、先頭スライドへ移動するよう変更され、他のボタンはデフォルトのままとなる。nav数 のあとに コロン(:)、ボタン文字 のあとセミコロン(;)、そのあとは 命令1;命令2;命令3;…のように各命令のあとにセミコロンを付ける。二重引用符の中で引用符を使うときは、",{"type":28,"tag":372,"props":1500,"children":1502},{"className":1501},[],[1503],{"type":33,"value":1504},"\"nav0:xp+'／'+～\"",{"type":33,"value":1506}," のように単一引用符を使うこと。",{"type":28,"tag":727,"props":1508,"children":1509},{},[1510,1531],{"type":28,"tag":731,"props":1511,"children":1512},{},[1513,1515,1521,1523,1529],{"type":33,"value":1514},"各章の始まりのスライドのsectionタグに ",{"type":28,"tag":372,"props":1516,"children":1518},{"className":1517},[],[1519],{"type":33,"value":1520},"class=\"hp\"",{"type":33,"value":1522}," を入れておけば、デフォルトのままでも「プレゼンテーション」は十分可能。class属性を複数指定する場合は、",{"type":28,"tag":372,"props":1524,"children":1526},{"className":1525},[],[1527],{"type":33,"value":1528},"class=\"hp bk3\"",{"type":33,"value":1530}," のように半角スペースをはさむこと。",{"type":28,"tag":731,"props":1532,"children":1533},{},[1534,1536,1542],{"type":33,"value":1535},"Replitのコードエディタは、行番号の右の ▼ をクリックすることで折りたたむことができる。",{"type":28,"tag":372,"props":1537,"children":1539},{"className":1538},[],[1540],{"type":33,"value":1541},"\u003Csection",{"type":33,"value":1543}," の行を折りたたんでスライドの中身を隠すと、属性の指定がやりやすい。",{"type":28,"tag":56,"props":1545,"children":1546},{},[],{"type":28,"tag":29,"props":1548,"children":1549},{},[1550],{"type":33,"value":1551},"　ソックサーガは、Web標準技術に基づいたテキストプログラミングで主要な機能をラップすることで、入口が広く奥が深い学習を実現しました。将来にわたり役立つ情報活用能力が培われるでしょう。",{"type":28,"tag":56,"props":1553,"children":1554},{},[],{"type":28,"tag":29,"props":1556,"children":1557},{},[1558,1560,1566],{"type":33,"value":1559},"※ ソックサーガは、プロトタイプを jQuery + Firebase Storage + Mery マクロ で作りました。2年間実際に授業してみて、問題点を洗い出し、Vue.js で書き直しました。「可能な限りWeb標準に従う」ことが大切と痛感しました。そのため、Vueのコンポーネントのかわりに「カスタムデータ属性」を使っています。",{"type":28,"tag":372,"props":1561,"children":1563},{"className":1562},[],[1564],{"type":33,"value":1565},"data-***=\"\"",{"type":33,"value":1567},"のような形式で、制作者が自由に指定できる属性です。独自のデータを入力したり、JavaScriptで処理したりできます。HTMLで定義されているグローバル属性なので、将来的に無駄になりません。",{"type":28,"tag":56,"props":1569,"children":1570},{},[],{"type":28,"tag":95,"props":1572,"children":1574},{"id":1573},"発展的な-ソックサーガ-の使い方-余裕ができたら",[1575],{"type":33,"value":1576},"発展的な ソックサーガ の使い方（※ 余裕ができたら……）",{"type":28,"tag":553,"props":1578,"children":1580},{"id":1579},"スライドの背景を指定する",[1581],{"type":33,"value":1582},"① スライドの背景を指定する",{"type":28,"tag":727,"props":1584,"children":1585},{},[1586],{"type":28,"tag":731,"props":1587,"children":1588},{},[1589,1591,1599],{"type":33,"value":1590},"sectionタグのカスタムデータ属性に画像ファイルURLを指定。URLは、",{"type":28,"tag":1128,"props":1592,"children":1593},{},[1594],{"type":28,"tag":1132,"props":1595,"children":1596},{},[1597],{"type":33,"value":1598},"jisshu\u002Fimg フォルダ内の画像一覧",{"type":33,"value":1600},"の画像を右クリックし、[画像アドレスをコピー]で。",{"type":28,"tag":29,"props":1602,"children":1603},{},[1604],{"type":28,"tag":372,"props":1605,"children":1607},{"className":1606},[],[1608],{"type":33,"value":1609},"data-bg=\"https:\u002F\u002Fsocsaga.hadano3.repl.co\u002Fjisshu\u002Fimg\u002Fvenndiag.svg\"",{"type":28,"tag":553,"props":1611,"children":1613},{"id":1612},"x関数x変数でボタン動作を拡張する",[1614],{"type":33,"value":1615},"② x関数・x変数でボタン動作を拡張する",{"type":28,"tag":727,"props":1617,"children":1618},{},[1619,1672,1693,1706,1854,1859],{"type":28,"tag":731,"props":1620,"children":1621},{},[1622,1624,1630,1632,1638,1640,1646,1648,1654,1656,1662,1664,1670],{"type":33,"value":1623},"メッセージ表示：",{"type":28,"tag":372,"props":1625,"children":1627},{"className":1626},[],[1628],{"type":33,"value":1629},"xmsg('メッセージ','入力文');",{"type":33,"value":1631}," 入力文を省略したら ",{"type":28,"tag":372,"props":1633,"children":1635},{"className":1634},[],[1636],{"type":33,"value":1637},"alert",{"type":33,"value":1639}," 、",{"type":28,"tag":372,"props":1641,"children":1643},{"className":1642},[],[1644],{"type":33,"value":1645},"'OK'",{"type":33,"value":1647},"なら ",{"type":28,"tag":372,"props":1649,"children":1651},{"className":1650},[],[1652],{"type":33,"value":1653},"confirm",{"type":33,"value":1655}," 、それ以外は ",{"type":28,"tag":372,"props":1657,"children":1659},{"className":1658},[],[1660],{"type":33,"value":1661},"prompt",{"type":33,"value":1663}," と同じ動作をする。戻り値は",{"type":28,"tag":372,"props":1665,"children":1667},{"className":1666},[],[1668],{"type":33,"value":1669},"xm",{"type":33,"value":1671},"に代入される。",{"type":28,"tag":731,"props":1673,"children":1674},{},[1675,1677,1683,1685,1691],{"type":33,"value":1676},"乱数：",{"type":28,"tag":372,"props":1678,"children":1680},{"className":1679},[],[1681],{"type":33,"value":1682},"xran(数);",{"type":33,"value":1684}," 1～数 までのランダムな自然数を作る。数を省略したら 6 がはいりサイコロに使える。戻り値は、",{"type":28,"tag":372,"props":1686,"children":1688},{"className":1687},[],[1689],{"type":33,"value":1690},"xr",{"type":33,"value":1692}," に。",{"type":28,"tag":731,"props":1694,"children":1695},{},[1696,1698,1704],{"type":33,"value":1697},"待機：",{"type":28,"tag":372,"props":1699,"children":1701},{"className":1700},[],[1702],{"type":33,"value":1703},"xwait(数);",{"type":33,"value":1705}," 数秒間待機してから次の命令を実行する。",{"type":28,"tag":731,"props":1707,"children":1708},{},[1709,1711,1717,1719,1725,1727,1733,1735,1741,1743,1749,1751,1757,1759,1765,1767,1773,1775,1781,1783,1789,1791,1797,1799,1805,1807,1813,1815,1821,1823,1829,1831,1837,1838,1844,1846,1852],{"type":33,"value":1710},"x変数：",{"type":28,"tag":372,"props":1712,"children":1714},{"className":1713},[],[1715],{"type":33,"value":1716},"xc",{"type":33,"value":1718},"【クリックしたボタン番号】、",{"type":28,"tag":372,"props":1720,"children":1722},{"className":1721},[],[1723],{"type":33,"value":1724},"xe",{"type":33,"value":1726},"【エネルギー】、",{"type":28,"tag":372,"props":1728,"children":1730},{"className":1729},[],[1731],{"type":33,"value":1732},"xf",{"type":33,"value":1734},"【ファイル名】、",{"type":28,"tag":372,"props":1736,"children":1738},{"className":1737},[],[1739],{"type":33,"value":1740},"xg",{"type":33,"value":1742},"【移動後のスライドナンバー】、",{"type":28,"tag":372,"props":1744,"children":1746},{"className":1745},[],[1747],{"type":33,"value":1748},"xp",{"type":33,"value":1750},"【現在のスライドナンバー】、\n",{"type":28,"tag":372,"props":1752,"children":1754},{"className":1753},[],[1755],{"type":33,"value":1756},"xpsum",{"type":33,"value":1758},"【スライド総数】、",{"type":28,"tag":372,"props":1760,"children":1762},{"className":1761},[],[1763],{"type":33,"value":1764},"xs",{"type":33,"value":1766},"【スコア】、",{"type":28,"tag":372,"props":1768,"children":1770},{"className":1769},[],[1771],{"type":33,"value":1772},"xt",{"type":33,"value":1774},"【ターン数】、",{"type":28,"tag":372,"props":1776,"children":1778},{"className":1777},[],[1779],{"type":33,"value":1780},"xu",{"type":33,"value":1782},"【ユーザーデータ】、",{"type":28,"tag":372,"props":1784,"children":1786},{"className":1785},[],[1787],{"type":33,"value":1788},"xuu[数]",{"type":33,"value":1790},"【ユーザーデータ配列】…状態フラグとして使うのに便利な関数がある｛",{"type":28,"tag":372,"props":1792,"children":1794},{"className":1793},[],[1795],{"type":33,"value":1796},"xuuon(数);",{"type":33,"value":1798}," フラグオン、",{"type":28,"tag":372,"props":1800,"children":1802},{"className":1801},[],[1803],{"type":33,"value":1804},"xuuoff(数);",{"type":33,"value":1806}," フラグオフ、",{"type":28,"tag":372,"props":1808,"children":1810},{"className":1809},[],[1811],{"type":33,"value":1812},"xuutog(数);",{"type":33,"value":1814}," フラグ反転｝、",{"type":28,"tag":372,"props":1816,"children":1818},{"className":1817},[],[1819],{"type":33,"value":1820},"xcc[数]",{"type":33,"value":1822},"【ボタン無効化配列】…",{"type":28,"tag":372,"props":1824,"children":1826},{"className":1825},[],[1827],{"type":33,"value":1828},"xuu",{"type":33,"value":1830},"と同様な関数で",{"type":28,"tag":372,"props":1832,"children":1834},{"className":1833},[],[1835],{"type":33,"value":1836},"xcc[0]",{"type":33,"value":577},{"type":28,"tag":372,"props":1839,"children":1841},{"className":1840},[],[1842],{"type":33,"value":1843},"xcc[番]",{"type":33,"value":1845},"をオンでボタン無効化、",{"type":28,"tag":372,"props":1847,"children":1849},{"className":1848},[],[1850],{"type":33,"value":1851},"xccreset();",{"type":33,"value":1853}," ですべて有効化。",{"type":28,"tag":731,"props":1855,"children":1856},{},[1857],{"type":33,"value":1858},"JavaScriptの命令がほぼ使えるが、コード量節約のため、ショートハンドを使うとよい。 if文のかわりに→三項演算子…など。",{"type":28,"tag":731,"props":1860,"children":1861},{},[1862,1864,1870],{"type":33,"value":1863},"テストボタンの ",{"type":28,"tag":372,"props":1865,"children":1867},{"className":1866},[],[1868],{"type":33,"value":1869},"data-test = “命令文”",{"type":33,"value":1871}," を書き換えて、ボタン動作のテストができる。",{"type":28,"tag":553,"props":1873,"children":1875},{"id":1874},"アニメーションで画面に躍動感を与える",[1876],{"type":33,"value":1877},"③ アニメーションで画面に躍動感を与える",{"type":28,"tag":727,"props":1879,"children":1880},{},[1881,1901],{"type":28,"tag":731,"props":1882,"children":1883},{},[1884,1886,1892,1894,1900],{"type":33,"value":1885},"x関数の ",{"type":28,"tag":372,"props":1887,"children":1889},{"className":1888},[],[1890],{"type":33,"value":1891},"xanim(オブジェクト);",{"type":33,"value":1893}," でスライドの中の要素を時間を追って変化させることができる。アニメーションオブジェクトの書式は、anime.js に従う。戻り値は、",{"type":28,"tag":372,"props":1895,"children":1897},{"className":1896},[],[1898],{"type":33,"value":1899},"xa",{"type":33,"value":1692},{"type":28,"tag":731,"props":1902,"children":1903},{},[1904],{"type":33,"value":1905},"Wick Editor というフリーのWebアプリで手軽に Gifアニメ を作ることができる。軽量化して使うとよい。",{"type":28,"tag":553,"props":1907,"children":1909},{"id":1908},"同じフォルダのsocsagaファイルを-x関数で呼び出しクラス全員で共同制作する",[1910],{"type":33,"value":1911},"④ 同じフォルダのSocSagaファイルを x関数で呼び出し、クラス全員で共同制作する",{"type":28,"tag":727,"props":1913,"children":1914},{},[1915,1944],{"type":28,"tag":731,"props":1916,"children":1917},{},[1918,1920,1926,1928,1934,1936,1942],{"type":33,"value":1919},"game03.html のスライド10番で ",{"type":28,"tag":372,"props":1921,"children":1923},{"className":1922},[],[1924],{"type":33,"value":1925},"xborrow(game05);",{"type":33,"value":1927}," を実行すると、game05.htmlが呼び出され、",{"type":28,"tag":372,"props":1929,"children":1931},{"className":1930},[],[1932],{"type":33,"value":1933},"xback();",{"type":33,"value":1935}," で game03.html のスライド11番に戻る。",{"type":28,"tag":372,"props":1937,"children":1939},{"className":1938},[],[1940],{"type":33,"value":1941},"xbuy(game07);",{"type":33,"value":1943}," を実行すると、game07.htmlに接続する（戻ってこない）。",{"type":28,"tag":731,"props":1945,"children":1946},{},[1947,1953,1955,1961,1962,1968,1970],{"type":28,"tag":372,"props":1948,"children":1950},{"className":1949},[],[1951],{"type":33,"value":1952},"xborrow",{"type":33,"value":1954},"、",{"type":28,"tag":372,"props":1956,"children":1958},{"className":1957},[],[1959],{"type":33,"value":1960},"xback",{"type":33,"value":1954},{"type":28,"tag":372,"props":1963,"children":1965},{"className":1964},[],[1966],{"type":33,"value":1967},"xbuy",{"type":33,"value":1969}," で他のファイルを呼び出すとき、次の x変数の値は引き継がれる。→ ",{"type":28,"tag":372,"props":1971,"children":1973},{"className":1972},[],[1974],{"type":33,"value":1975},"xs　xe　xt　xu　xuu[]",{"type":28,"tag":553,"props":1977,"children":1979},{"id":1978},"htmlファイル本体をカスタマイズhtmlcssjavascript-を書き換えする",[1980],{"type":33,"value":1981},"⑤ HTMLファイル本体をカスタマイズ（html・css・JavaScript を書き換え）する",{"type":28,"tag":727,"props":1983,"children":1984},{},[1985,2006,2019,2039],{"type":28,"tag":731,"props":1986,"children":1987},{},[1988,1990,1996,1998,2004],{"type":33,"value":1989},"文字の大きさ→ ",{"type":28,"tag":372,"props":1991,"children":1993},{"className":1992},[],[1994],{"type":33,"value":1995},"--fontvw: 1.5vw;",{"type":33,"value":1997},"　、",{"type":28,"tag":372,"props":1999,"children":2001},{"className":2000},[],[2002],{"type":33,"value":2003},"methods:",{"type":33,"value":2005}," に新しい x関数 を追加…など。",{"type":28,"tag":731,"props":2007,"children":2008},{},[2009,2011,2017],{"type":33,"value":2010},"スライド内容の一時的な変更は、x関数の ",{"type":28,"tag":372,"props":2012,"children":2014},{"className":2013},[],[2015],{"type":33,"value":2016},"xdisp(元の語,置換語,回数);",{"type":33,"value":2018}," で可能。",{"type":28,"tag":731,"props":2020,"children":2021},{},[2022,2024,2030,2031,2037],{"type":33,"value":2023},"SocPad以外で作ったHTMLは、原則SocPadでの編集はできないが、sectionタグ内に貼り付けることは可能。セキュリティ上の問題がなければ、iframeタグを使って他サイトのコンテンツを埋め込むことができる。",{"type":28,"tag":372,"props":2025,"children":2027},{"className":2026},[],[2028],{"type":33,"value":2029},"--framewidth",{"type":33,"value":577},{"type":28,"tag":372,"props":2032,"children":2034},{"className":2033},[],[2035],{"type":33,"value":2036},"--frameheight",{"type":33,"value":2038},"で幅と高さを指定できる。",{"type":28,"tag":731,"props":2040,"children":2041},{},[2042],{"type":33,"value":2043},"無料ソフトでもCG作成ができる。Blender で3Dモデルを、Effekseer でビジュアルエフェクトを、Unity でアニメやゲームを作ることができる。Sketchfab などの CGコンテンツ共有サイトを利用することで、登録・公開ができる。",{"type":28,"tag":553,"props":2045,"children":2047},{"id":2046},"このような発展的な使い方により",[2048],{"type":33,"value":2046},{"type":28,"tag":29,"props":2050,"children":2051},{},[2052],{"type":33,"value":2053},"　プレゼンだけでなく、クイズ・アドベンチャーゲーム・脱出ゲーム・すごろくなども作れます。",{"type":28,"tag":56,"props":2055,"children":2057},{"id":2056},"socsagademo",[],{"type":28,"tag":95,"props":2059,"children":2061},{"id":2060},"まとめ-ソックサーガ-で-双方向性のあるコンテンツのプログラミング-はバッチリ",[2062],{"type":33,"value":2063},"【まとめ】 ソックサーガ で 双方向性のあるコンテンツのプログラミング はバッチリ！",{"type":28,"tag":29,"props":2065,"children":2066},{},[2067,2069,2077],{"type":33,"value":2068},"　ソックリッカー制作の経験を活かし、最新技術をふんだんに取りいれて作ったのが ",{"type":28,"tag":1128,"props":2070,"children":2071},{},[2072],{"type":28,"tag":1132,"props":2073,"children":2074},{},[2075],{"type":33,"value":2076},"ソックサーガ",{"type":33,"value":2078},"です。ローコードなので専門知識不要、「ディジタル作品づくり」＋α で取り組めます。５つの実習例とは違い、個性が出せるので評価しやすく、共同制作もできます。",{"type":28,"tag":56,"props":2080,"children":2081},{},[],{"type":28,"tag":29,"props":2083,"children":2084},{},[2085],{"type":33,"value":2086},"　他教科や行事のまとめ・発表を兼ねたテーマにすれば、時間数不足も解消されます。無料で、自校運用できて安心で、かゆいところに手が届くシステムは、そうそうないと自負しています。",{"type":28,"tag":56,"props":2088,"children":2089},{},[],{"type":28,"tag":29,"props":2091,"children":2092},{},[2093],{"type":33,"value":2094},"※ ページが表示されなければ、リロード（↻更新）してください。",{"type":28,"tag":29,"props":2096,"children":2097},{},[2098],{"type":33,"value":2099},"※【注意】Internet Explorer 以外のモダンブラウザー（Chrome,Firefox,Safari,…）で、横置き画面で見ること！",{"type":28,"tag":727,"props":2101,"children":2102},{},[2103,2114,2125,2136,2147],{"type":28,"tag":731,"props":2104,"children":2105},{},[2106,2107],{"type":33,"value":1148},{"type":28,"tag":105,"props":2108,"children":2111},{"href":2109,"rel":2110},"https:\u002F\u002Fkyodx.com\u002Fsshelp.html",[142],[2112],{"type":33,"value":2113},"🔗 ソックサーガで作った、「ソックサーガの紹介Webアプリ」",{"type":28,"tag":731,"props":2115,"children":2116},{},[2117,2118],{"type":33,"value":1148},{"type":28,"tag":105,"props":2119,"children":2122},{"href":2120,"rel":2121},"https:\u002F\u002Fkyodx.com\u002Fimg\u002Fsocsaga.pdf",[142],[2123],{"type":33,"value":2124},"🔗 ソックサーガの紹介（印刷用）",{"type":28,"tag":731,"props":2126,"children":2127},{},[2128,2129],{"type":33,"value":1148},{"type":28,"tag":105,"props":2130,"children":2133},{"href":2131,"rel":2132},"https:\u002F\u002Fkyodx.com\u002Fjisshu\u002Ftango.html",[142],[2134],{"type":33,"value":2135},"🔗 「英単語の発音チェックアプリ+AI作曲」",{"type":28,"tag":731,"props":2137,"children":2138},{},[2139,2140],{"type":33,"value":1148},{"type":28,"tag":105,"props":2141,"children":2144},{"href":2142,"rel":2143},"https:\u002F\u002Fkyodx.com\u002Fjisshu\u002Ftango2.html",[142],[2145],{"type":33,"value":2146},"🔗 「英単語の発音チェックアプリ+AI作曲」Ver2",{"type":28,"tag":731,"props":2148,"children":2149},{},[2150,2151],{"type":33,"value":1148},{"type":28,"tag":105,"props":2152,"children":2155},{"href":2153,"rel":2154},"https:\u002F\u002Fkyodx.com\u002Fjisshu\u002Fspellquest.html",[142],[2156],{"type":33,"value":2157},"🔗 「英単語ゲーム SPELL QUEST」",{"type":28,"tag":56,"props":2159,"children":2161},{"id":2160},"js278",[],{"type":28,"tag":923,"props":2163,"children":2165},{"className":2164},[926],[2166,2167,2180,2181],{"type":33,"value":929},{"type":28,"tag":923,"props":2168,"children":2170},{"className":2169},[933],[2171],{"type":28,"tag":105,"props":2172,"children":2175},{"target":937,"rel":2173,"href":2174},[939],"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",[2176],{"type":28,"tag":490,"props":2177,"children":2179},{"src":2178},"https:\u002F\u002Fthumbnail.image.rakuten.co.jp\u002F@0_mall\u002Fbook\u002Fcabinet\u002F3682\u002F9784297103682.jpg?_ex=240x240",[],{"type":33,"value":929},{"type":28,"tag":923,"props":2182,"children":2184},{"className":2183},[950],[2185,2186,2196,2197,2216,2217,2254],{"type":33,"value":953},{"type":28,"tag":923,"props":2187,"children":2189},{"className":2188},[957],[2190],{"type":28,"tag":105,"props":2191,"children":2193},{"target":937,"rel":2192,"href":2174},[939],[2194],{"type":33,"value":2195},"JavaScriptコードレシピ集 スグに使えるテクニック278　[ 池田泰延 ]",{"type":33,"value":953},{"type":28,"tag":923,"props":2198,"children":2200},{"className":2199},[969],[2201,2204,2206,2209,2211,2214],{"type":28,"tag":56,"props":2202,"children":2203},{},[],{"type":33,"value":2205},"※ Web標準技術は時代とともに進歩しています。",{"type":28,"tag":56,"props":2207,"children":2208},{},[],{"type":33,"value":2210},"ハダノは、jQueryからVue.jsに移行したとき、「イマドキのJavaScriptはこう書くんだ！」とカルチャーショックを受けました。",{"type":28,"tag":56,"props":2212,"children":2213},{},[],{"type":33,"value":2215},"この本は、実践的な最新テクニックを網羅的に学ぶのに役立ちます。",{"type":33,"value":953},{"type":28,"tag":923,"props":2218,"children":2220},{"className":2219},[990,991],[2221,2222,2231,2232,2242,2243,2253],{"type":33,"value":994},{"type":28,"tag":923,"props":2223,"children":2224},{},[2225],{"type":28,"tag":105,"props":2226,"children":2229},{"className":2227,"target":937,"rel":2228,"href":2174},[1001,1002],[939],[2230],{"type":33,"value":1006},{"type":33,"value":1008},{"type":28,"tag":923,"props":2233,"children":2234},{},[2235],{"type":28,"tag":105,"props":2236,"children":2240},{"className":2237,"target":937,"rel":2238,"href":2239},[1001,1015],[939],"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",[2241],{"type":33,"value":1020},{"type":33,"value":1008},{"type":28,"tag":923,"props":2244,"children":2245},{},[2246],{"type":28,"tag":105,"props":2247,"children":2251},{"className":2248,"target":937,"rel":2249,"href":2250},[1001,1028],[939],"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",[2252],{"type":33,"value":1033},{"type":33,"value":953},{"type":33,"value":929},{"type":28,"tag":56,"props":2256,"children":2257},{},[],{"type":28,"tag":1040,"props":2259,"children":2260},{},[],{"type":28,"tag":29,"props":2262,"children":2263},{},[2264],{"type":28,"tag":105,"props":2265,"children":2267},{"href":2266},"\u002Farticles\u002Fsocsaga-2",[2268],{"type":33,"value":2269},"次へ→　ソックサーガの始め方【自校運用】",{"title":8,"searchDepth":1053,"depth":1053,"links":2271},[2272,2276],{"id":1118,"depth":1053,"text":1121,"children":2273},[2274,2275],{"id":1166,"depth":1059,"text":1169},{"id":1185,"depth":1059,"text":1185},{"id":1253,"depth":1053,"text":1256,"children":2277},[2278,2279,2280,2281,2282],{"id":1259,"depth":1059,"text":1262},{"id":1292,"depth":1059,"text":1295},{"id":1420,"depth":1059,"text":1423},{"id":1573,"depth":1059,"text":1576},{"id":2060,"depth":1059,"text":2063},"content:articles:socsaga-1.md","articles\u002Fsocsaga-1.md","articles\u002Fsocsaga-1",{"_path":2287,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":2288,"description":2289,"category":2290,"tag":2291,"thumbnail":2294,"createdAt":2295,"updatedAt":2296,"body":2297,"_type":1074,"_id":2785,"_source":1076,"_file":2786,"_stem":2787,"_extension":1079},"\u002Farticles\u002Fhadano","ハダノのプログラミング遍歴","ハダノがプログラミングに出会ってから教育に活用するようになるまでの過程をざっと振り返り",[1085],[1089,15,14,2292,1087,16,2293],"soclicker","sf","vscodesoc.jpg","2022\u002F4\u002F28","2022\u002F6\u002F1",{"type":25,"children":2298,"toc":2762},[2299,2304,2307,2313,2318,2323,2329,2334,2340,2345,2350,2355,2358,2363,2366,2372,2377,2382,2388,2402,2415,2418,2424,2429,2434,2439,2444,2449,2454,2468,2473,2478,2483,2488,2492,2498,2503,2516,2521,2524,2530,2535,2558,2570,2575,2581,2586,2591,2596,2601,2606,2609,2615,2621,2626,2631,2636,2639,2645,2648,2654,2657,2663,2666,2669],{"type":28,"tag":29,"props":2300,"children":2301},{},[2302],{"type":33,"value":2303},"　この記事では、サンデープログラマとしてのハダノについて、（記憶をたどりながらぼちぼち）紹介していきます。",{"type":28,"tag":56,"props":2305,"children":2306},{},[],{"type":28,"tag":60,"props":2308,"children":2310},{"id":2309},"コンピューティング-プログラミング-の時代",[2311],{"type":33,"value":2312},"コンピューティング ＝ プログラミング の時代",{"type":28,"tag":95,"props":2314,"children":2316},{"id":2315},"プログラマブル関数電卓から",[2317],{"type":33,"value":2315},{"type":28,"tag":29,"props":2319,"children":2320},{},[2321],{"type":33,"value":2322},"　大学生協の新入生向けフェアで、「理系学部生の必需品」として紹介されていた関数電卓を購入しました。ポケットコンピュータという愛称で、ビープ音で「エリーゼのために」を演奏するプログラムを打ち込んだり、宇宙戦艦ゲームを作ったりしました。プログラミングの楽しさにはじめて触れました。",{"type":28,"tag":95,"props":2324,"children":2326},{"id":2325},"メインフレームはfortranで",[2327],{"type":33,"value":2328},"メインフレームはFortranで",{"type":28,"tag":29,"props":2330,"children":2331},{},[2332],{"type":33,"value":2333},"　1年半の教養課程を終え、専門課程に移ると、実験・実習で夜遅くなることが多くなりました。データ解析に大学のメインフレームを使わせてもらうこともありました。Fortranという科学技術計算用の言語でプログラムを組み、カードの束を読み込ませて処理していました。4年生になると、TSS端末で画面を見ながらキーボードで入力できるようになるのでした。",{"type":28,"tag":95,"props":2335,"children":2337},{"id":2336},"_8ビットのマイコンピュータ",[2338],{"type":33,"value":2339},"8ビットのマイコンピュータ",{"type":28,"tag":29,"props":2341,"children":2342},{},[2343],{"type":33,"value":2344},"　個人用の小型コンピュータが「マイコン」と呼ばれていたころ、NEC PC-6001 というお手頃価格のマシンを購入しました。中古のTVをつなぎ、カセットテープにデータを保存しました。時間制限なくコンピュータが使えて興奮したのを覚えています。",{"type":28,"tag":29,"props":2346,"children":2347},{},[2348],{"type":33,"value":2349},"　当時は、ソフトウェア販売は普及していなかったので、コンピュータを使うためには、プログラムを打ち込む必要がありました。マイコン雑誌のプログラムリストを打ち込んだり、改造したりしてゲームなどを楽しむのが一般的でした。",{"type":28,"tag":29,"props":2351,"children":2352},{},[2353],{"type":33,"value":2354},"　ハダノは、そのほかに数理生物学で使うFortranプログラムをBASICに移植したり、簡単な音楽ソフトやお絵描きソフトを作ったりしました。3次スプライン関数をBASICで組んだら遅すぎ、Z80機械語で高速化したこともありました。",{"type":28,"tag":56,"props":2356,"children":2357},{},[],{"type":28,"tag":29,"props":2359,"children":2360},{},[2361],{"type":33,"value":2362},"　教員採用試験の面接で「プラネタリウムなどコンピュータを活用した授業をしたい」と答えたハダノでしたが、8ビットの時代は学級通信の印刷に少し使う程度でした。漢字フォントがなかったので、方眼紙に点を打って必要な分を自作していました。成績処理以外の実務では、ハンディワープロに負けていました。",{"type":28,"tag":56,"props":2364,"children":2365},{},[],{"type":28,"tag":60,"props":2367,"children":2369},{"id":2368},"ms-dos-windows-の時代",[2370],{"type":33,"value":2371},"MS-DOS ～ Windows の時代",{"type":28,"tag":95,"props":2373,"children":2375},{"id":2374},"国産16ビットコンピュータ",[2376],{"type":33,"value":2374},{"type":28,"tag":29,"props":2378,"children":2379},{},[2380],{"type":33,"value":2381},"　2校目のとき（1980年代後半）、16ビットコンピュータを手に入れました。内蔵BASICでOS機能も開発もこなすのではなく、OS機能はMS-DOS、開発はC言語と役割分担したのです。国産機は漢字ROMを内蔵しており、ワープロや表計算などのソフトウェア販売も広がり始めました。",{"type":28,"tag":95,"props":2383,"children":2385},{"id":2384},"ms-dos時代はプログラミング冬の時代",[2386],{"type":33,"value":2387},"MS-DOS時代は、プログラミング冬の時代",{"type":28,"tag":29,"props":2389,"children":2390},{},[2391,2393,2400],{"type":33,"value":2392},"　このころ、サンデープログラマの多くは壁に直面していました。これまで通りBASICでプログラミングすることはできましたが、主流はC言語でした。難解なうえに開発環境も整備されておらず、趣味としてのプログラミングは衰退の危機にありました。せいぜい、バッチ（または",{"type":28,"tag":105,"props":2394,"children":2397},{"href":2395,"rel":2396},"https:\u002F\u002Fponzmild.hatenablog.com\u002Fentry\u002F2017\u002F10\u002F29\u002F004625",[142],[2398],{"type":33,"value":2399},"sed,awk",{"type":33,"value":2401},"）を組んで市販ソフトを順番に動かすか、表計算ソフトのマクロ機能でプログラミング気分を味わうか、ぐらいでした。",{"type":28,"tag":29,"props":2403,"children":2404},{},[2405,2407,2413],{"type":33,"value":2406},"　そんなときに、生徒用コンピュータが導入されました。MS-DOSマシンの世界は、漢字ROM搭載で独自規格の国産機と汎用的なDOS\u002FV機が争い、混とんとしていました。",{"type":28,"tag":105,"props":2408,"children":2410},{"href":2409},"nurpa-2#hekiga",[2411],{"type":33,"value":2412},"「巨大ドット壁画」",{"type":33,"value":2414},"を作った1993年もそんな状態でした。ソフトウェア的には、7つほどの処理を組み合わせる必要があったのです。",{"type":28,"tag":56,"props":2416,"children":2417},{},[],{"type":28,"tag":95,"props":2419,"children":2421},{"id":2420},"windowsのradツールでビジュアルプログラミング",[2422],{"type":33,"value":2423},"WindowsのRADツールでビジュアルプログラミング",{"type":28,"tag":29,"props":2425,"children":2426},{},[2427],{"type":33,"value":2428},"　Windows3.1、windows95が現われ、キーボードからコマンドを打つ代わりにマウスで視覚的にソフトウェアを操作するようになりました。",{"type":28,"tag":29,"props":2430,"children":2431},{},[2432],{"type":33,"value":2433},"　Windowsでのプログラミングも、視覚的にできるようになりました。RAD（ラピッド・アプリケーション・デベロップメント）ツールの登場です。GUI部品をペタペタと貼り付け、ユーザーの操作に応じたコードを書くだけなので簡単でした。Visual Basic というビジュアルプログラミング向けのBASICがすっかり気に入りました。メインルーチンのない、イベントドリブンのプログラミングスタイルにもやがて慣れました。",{"type":28,"tag":95,"props":2435,"children":2437},{"id":2436},"西日本の理科教員研修会の講師に",[2438],{"type":33,"value":2436},{"type":28,"tag":29,"props":2440,"children":2441},{},[2442],{"type":33,"value":2443},"　「ハダノ先生はコンピュータが得意らしい」という噂が広まり、教員研修や公民館講座の講師として呼ばれるようになりました。そこで強調したのは、「コンピュータが得意になりたければ、プログラミングをしなさい」ということです。「料理の歴史、テーブルマナーやおいしい料理店」をいくら知っていても、調理ができなければ「料理が得意」とは言えないはずです。",{"type":28,"tag":29,"props":2445,"children":2446},{},[2447],{"type":33,"value":2448},"　西日本の理科教員研修会の講師に指名されたときも、マジックナース「レイアウト」というSF仕立ての人体内アドベンチャーゲームを参加者に作らせることにしました。Visual Basic でアドベンチャー用の簡易言語を作っておき、サンプルゲームをもとに参加者に続きのシナリオを作成させるというものです。画像の連続表示でアニメーションもでき、大きな手ごたえを得ました。\n　",{"type":28,"tag":95,"props":2450,"children":2452},{"id":2451},"インターネット部顧問に",[2453],{"type":33,"value":2451},{"type":28,"tag":29,"props":2455,"children":2456},{},[2457,2459,2466],{"type":33,"value":2458},"　公務災害で左腕に障害を負い、「人生終わった」と落ち込んでいたハダノは、ハダノ校長の勧めでインターネット部を作りました。",{"type":28,"tag":105,"props":2460,"children":2463},{"href":2461,"rel":2462},"https:\u002F\u002Fjiten.com\u002Fdicmi\u002Fdocs\u002Fk10\u002F16367s.htm",[142],[2464],{"type":33,"value":2465},"こねっとプラン",{"type":33,"value":2467},"参加校になり、ホームページを作ったり、他の学校と交流したりしました。1997年6月19日の「こねっと・特別セミナー」では、全国4校の質問校に選ばれました。講師のビル・ゲイツ氏に、NTTのマルチメディア会議システムで次の質問をぶつけました。",{"type":28,"tag":29,"props":2469,"children":2470},{},[2471],{"type":33,"value":2472},"Q: 「インターネットはからっぽの洞窟」という本に書いてあることは本当ですか？",{"type":28,"tag":29,"props":2474,"children":2475},{},[2476],{"type":33,"value":2477},"　それに対して、ゲイツ氏は",{"type":28,"tag":29,"props":2479,"children":2480},{},[2481],{"type":33,"value":2482},"A: いつの時代にも新しいメディアに対して否定的な人はいます。道具はその特性を理解して使うことが大切です。インターネットを中身の豊かな百科事典にするために、力を合わせていきましょう。",{"type":28,"tag":29,"props":2484,"children":2485},{},[2486],{"type":33,"value":2487},"と、丁寧に答えてくれました。",{"type":28,"tag":56,"props":2489,"children":2491},{"id":2490},"multimedia",[],{"type":28,"tag":95,"props":2493,"children":2495},{"id":2494},"マルチメディア作品コンテストで",[2496],{"type":33,"value":2497},"マルチメディア作品コンテストで🏆！！",{"type":28,"tag":29,"props":2499,"children":2500},{},[2501],{"type":33,"value":2502},"　国民文化祭のマルチメディア部門で作品コンテストが開催され、インターネット部も一般の参加者にまじって、プレ・本番それぞれに出品しました。プレ国民文化祭では、かぐや姫のパロディ紙芝居で第2位を獲得しました。",{"type":28,"tag":29,"props":2504,"children":2505},{},[2506,2508,2514],{"type":33,"value":2507},"　「今度こそ優勝を」という思いで部員一丸となって臨んだ国民文化祭には、「クローン戦隊ドリーマーズ」を出品しました。マジックナース「レイアウト」のときに作った簡易言語をJavaに移植し、最新生物学の知見を盛り込んだSFアドベンチャーゲームに仕上げました。「容量１MB以内かつWeb上で見られるもの」という条件をクリアするのに苦労しましたが、見事グランプリを獲得しました。ごほうびは、PC1台とマルチメディアフェスティバルへの招待でした。インターネット部全員で、",{"type":28,"tag":105,"props":2509,"children":2511},{"href":2510},"\u002Farticles\u002Fpopculture-gamemusic#oshii",[2512],{"type":33,"value":2513},"🔗押井守監督の記念講演",{"type":33,"value":2515}," を聞きました。",{"type":28,"tag":490,"props":2517,"children":2520},{"src":2518,"alt":2519,"width":494},"\u002Fimg\u002Fdolly.svg","クローン戦隊ドリーマーズ",[],{"type":28,"tag":56,"props":2522,"children":2523},{},[],{"type":28,"tag":95,"props":2525,"children":2527},{"id":2526},"wsh-で-rpa-をめざしたタイアップ",[2528],{"type":33,"value":2529},"WSH で RPA をめざした「タイアップ」",{"type":28,"tag":29,"props":2531,"children":2532},{},[2533],{"type":33,"value":2534},"　Windowsは視覚的な操作ができて便利な反面、定型的な操作では弱点を抱えていました。何をするにもいちいちマウスを動かす必要があったのです。マクロやショートカットキーで、ある程度スピードアップできますが、ソフトを組み合わせて動かすのは困難でした。",{"type":28,"tag":29,"props":2536,"children":2537},{},[2538,2540,2547,2549,2556],{"type":33,"value":2539},"　IE（インターネット エクスプローラ）用のスクリプトをWindows上で実行できるようにした ",{"type":28,"tag":105,"props":2541,"children":2544},{"href":2542,"rel":2543},"https:\u002F\u002Fe-words.jp\u002Fw\u002FWSH.html",[142],[2545],{"type":33,"value":2546},"WSH（ウィンドウズ スクリプト ホスト）",{"type":33,"value":2548},"が、Windows98から使えるようになりました。これをうまく使えば、人がへばりついてなくても自動実行できる",{"type":28,"tag":105,"props":2550,"children":2553},{"href":2551,"rel":2552},"https:\u002F\u002Fwww.nri.com\u002Fjp\u002Fknowledge\u002Fglossary\u002Flst\u002Falphabet\u002Frpa",[142],[2554],{"type":33,"value":2555},"RPA（ロボティック プロセス オートメーション）",{"type":33,"value":2557},"が実現できるはずです。",{"type":28,"tag":29,"props":2559,"children":2560},{},[2561,2562,2568],{"type":33,"value":137},{"type":28,"tag":105,"props":2563,"children":2565},{"href":844,"rel":2564},[142],[2566],{"type":33,"value":2567},"TieUp（あらゆるアプリとタイアップし、全自動処理を実現）",{"type":33,"value":2569},"というWSH強化用のフリーソフトをVectorで公開しました。Visual Basic で作った ActiveX DLLで、いろんなPC雑誌に紹介され、ユーザーは1万5千人に達しました。",{"type":28,"tag":29,"props":2571,"children":2572},{},[2573],{"type":33,"value":2574},"　しばらくは、VB系言語（Visual Basic,VBScript,VBA）による幸せなプログラミングライフが続きました。",{"type":28,"tag":95,"props":2576,"children":2578},{"id":2577},"猫の目のように変わるweb開発",[2579],{"type":33,"value":2580},"猫の目のように変わるWeb開発",{"type":28,"tag":29,"props":2582,"children":2583},{},[2584],{"type":33,"value":2585},"　国民文化祭'98のときは、Webでしっかりしたインタラクティブなコンテンツを作るには、Java Applet か Director くらいしか選択肢がありませんでした。クローン戦隊ドリーマーズを Java Applet で作ったのは、そういう理由があったのです。「オブジェクト指向」はなかなか手ごわかったと思います。※ Java Applet は2015年以降、ブラウザサポートが打ち切られて廃れました。",{"type":28,"tag":29,"props":2587,"children":2588},{},[2589],{"type":33,"value":2590},"　やがて Internet Explorer4 と Netscape Navigator4 によるブラウザ戦争が勃発しました。HTMLとCSSにJavaScriptを組み合わせてインタラクティブなコンテンツを作る「ダイナミックHTML」という技術が登場しましたが、ブラウザ間の互換性が乏しく、面倒くさいものでした。",{"type":28,"tag":29,"props":2592,"children":2593},{},[2594],{"type":33,"value":2595},"　2000年からの10年間は、Flash がWeb表現の中心でした。動画編集のようにタイムライン編集ができ、クリエイターたちの支持を集めていました。2005年ごろになると、Googleの Gmail や GoogleMap でも使われているAjaxを活用した軽量のサービスが注目されましたが、リッチな表現分野ではあいかわらずFlashでした。",{"type":28,"tag":29,"props":2597,"children":2598},{},[2599],{"type":33,"value":2600},"　このころのハダノは、Webでリッチなコンテンツを作る必要がなく、Flashは無視していました。「Webは、IE＋VBScriptで十分」「ローカルは、VB があるさ」と思っていました。ところが、インターネット対応で出遅れたマイクロソフトが、2002年に Visual Basic の大幅な仕様変更をしたのです。VB.NET 7.0 は、従来のVB 6.0 とは全くの別物でした。ローカルだけでなくWebでも動く、本格的なオブジェクト志向、Java や C＃ のような言語仕様……。Visual Basic Magazine などの雑誌は、「早くVB.NETへ乗り換えよう！」という記事のオンパレードです。VB 6.0 や エクセルVBA のノウハウが役に立たず、気軽さが失われたように感じ、ドットネット環境へ移行することをためらいました。ドットネット言語のうち、 C# と C++ は成功しましたが、 VB.NET は失敗だったのではないでしょうか。VB 6.0 は、2008年にサポート打ち切りになりました。",{"type":28,"tag":29,"props":2602,"children":2603},{},[2604],{"type":33,"value":2605},"　ちなみにハダノは2006年から、ローカル環境でのプログラミングに　Python も使うようになっていました。",{"type":28,"tag":56,"props":2607,"children":2608},{},[],{"type":28,"tag":60,"props":2610,"children":2612},{"id":2611},"html5-の時代",[2613],{"type":33,"value":2614},"HTML5 の時代",{"type":28,"tag":95,"props":2616,"children":2618},{"id":2617},"スマホが登場しflashが退場",[2619],{"type":33,"value":2620},"スマホが登場し、Flashが退場",{"type":28,"tag":29,"props":2622,"children":2623},{},[2624],{"type":33,"value":2625},"　2010年ごろから、Flashの人気が低下してきました。AppleがiPhoneでFlash Playerをサポートしないと宣言したのです。スマホが急速に普及したため、PCと共通のWebページづくりが求められるようになりました。「HTML5ならどのブラウザでもリッチな表現ができる」「もうFlashはいらない」と宣伝されました。HTML5+CSS3+JavaScript（ECMAScript5）という新しいWeb標準技術が今後のWeb開発の中心になるというのです。",{"type":28,"tag":29,"props":2627,"children":2628},{},[2629],{"type":33,"value":2630},"　AdobeはFlashの後継製品として、Edge Animate を出しましたが、3年ほどで積極的な開発を終了しました。※ Flash Player も2020年末にすべてサポート打ち切りになりました。",{"type":28,"tag":29,"props":2632,"children":2633},{},[2634],{"type":33,"value":2635},"　「Adobeに支配されたくない」Appleの目論見通りになったわけですが、スマホのHTML5対応は一足飛びには進みません。ハードウェアを最大限生かしたスマホゲームがはやり、ネイティブアプリが主役となりました。Web標準技術ではなく、機種に依存した開発になってしまったのです。Web技術で作られたOS（Firefox OSなど）のスマホに期待をかけていたハダノは、あきらめて2015年にペン入力のAndroidスマホを購入しました。「Webアプリがネイティブアプリを駆逐する日がいつか来る」と信じて……。",{"type":28,"tag":56,"props":2637,"children":2638},{},[],{"type":28,"tag":95,"props":2640,"children":2642},{"id":2641},"授業配信アプリソックリッカー",[2643],{"type":33,"value":2644},"授業配信アプリ「ソックリッカー」",{"type":28,"tag":56,"props":2646,"children":2647},{},[],{"type":28,"tag":95,"props":2649,"children":2651},{"id":2650},"プログラミングシステムソックサーガ",[2652],{"type":33,"value":2653},"プログラミングシステム「ソックサーガ」",{"type":28,"tag":56,"props":2655,"children":2656},{},[],{"type":28,"tag":95,"props":2658,"children":2660},{"id":2659},"全校ぬりえ自動化システムヌルパ",[2661],{"type":33,"value":2662},"全校ぬりえ自動化システム「ヌルパ」",{"type":28,"tag":56,"props":2664,"children":2665},{},[],{"type":28,"tag":56,"props":2667,"children":2668},{},[],{"type":28,"tag":923,"props":2670,"children":2672},{"className":2671},[926],[2673,2674,2687,2688],{"type":33,"value":929},{"type":28,"tag":923,"props":2675,"children":2677},{"className":2676},[933],[2678],{"type":28,"tag":105,"props":2679,"children":2682},{"target":937,"rel":2680,"href":2681},[939],"https:\u002F\u002Fhb.afl.rakuten.co.jp\u002Fichiba\u002F26ba9fc2.c2fdf85a.26ba9fc3.8edde063\u002F_RTLink57027?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fbook%2F13307159%2F&link_type=hybrid_url&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJoeWJyaWRfdXJsIiwic2l6ZSI6IjI0MHgyNDAiLCJuYW0iOjEsIm5hbXAiOiJ1cCIsImNvbSI6MSwiY29tcCI6ImRvd24iLCJwcmljZSI6MCwiYm9yIjoxLCJjb2wiOjEsImJidG4iOjAsInByb2QiOjAsImFtcCI6ZmFsc2V9",[2683],{"type":28,"tag":490,"props":2684,"children":2686},{"src":2685},"https:\u002F\u002Fthumbnail.image.rakuten.co.jp\u002F@0_mall\u002Fbook\u002Fcabinet\u002F4220\u002F9784844374220.jpg?_ex=240x240",[],{"type":33,"value":929},{"type":28,"tag":923,"props":2689,"children":2691},{"className":2690},[950],[2692,2693,2703,2704,2723,2724,2761],{"type":33,"value":953},{"type":28,"tag":923,"props":2694,"children":2696},{"className":2695},[957],[2697],{"type":28,"tag":105,"props":2698,"children":2700},{"target":937,"rel":2699,"href":2681},[939],[2701],{"type":33,"value":2702},"最速の仕事術はプログラマーが知っている [ 清水亮 ]",{"type":33,"value":953},{"type":28,"tag":923,"props":2705,"children":2707},{"className":2706},[969],[2708,2711,2713,2716,2718,2721],{"type":28,"tag":56,"props":2709,"children":2710},{},[],{"type":33,"value":2712},"※ 世界的なビジネスリーダーにプログラマーあがりの人が多い理由がわかる本です。",{"type":28,"tag":56,"props":2714,"children":2715},{},[],{"type":33,"value":2717},"「プログラミングにこだわりすぎ」と批判されるハダノに清水亮さんはいつも勇気をくれます。",{"type":28,"tag":56,"props":2719,"children":2720},{},[],{"type":33,"value":2722},"プログラミング的思考は、働き方改革にも効きます。",{"type":33,"value":953},{"type":28,"tag":923,"props":2725,"children":2727},{"className":2726},[990,991],[2728,2729,2738,2739,2749,2750,2760],{"type":33,"value":994},{"type":28,"tag":923,"props":2730,"children":2731},{},[2732],{"type":28,"tag":105,"props":2733,"children":2736},{"className":2734,"target":937,"rel":2735,"href":2681},[1001,1002],[939],[2737],{"type":33,"value":1006},{"type":33,"value":1008},{"type":28,"tag":923,"props":2740,"children":2741},{},[2742],{"type":28,"tag":105,"props":2743,"children":2747},{"className":2744,"target":937,"rel":2745,"href":2746},[1001,1015],[939],"https:\u002F\u002Faf.moshimo.com\u002Faf\u002Fc\u002Fclick?a_id=3539938&p_id=170&pc_id=185&pl_id=4062&url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2FB011UFDIZM",[2748],{"type":33,"value":1020},{"type":33,"value":1008},{"type":28,"tag":923,"props":2751,"children":2752},{},[2753],{"type":28,"tag":105,"props":2754,"children":2758},{"className":2755,"target":937,"rel":2756,"href":2757},[1001,1028],[939],"https:\u002F\u002Fck.jp.ap.valuecommerce.com\u002Fservlet\u002Freferral?sid=3651993&pid=887947441&vc_url=https%3A%2F%2Fpaypaymall.yahoo.co.jp%2Fstore%2Fboox%2Fitem%2Fbk-4844374222%2F%3Fsc_i%3Dshp_pc_search_itemlist_shsrg_title",[2759],{"type":33,"value":1033},{"type":33,"value":953},{"type":33,"value":929},{"title":8,"searchDepth":1053,"depth":1053,"links":2763},[2764,2769,2779],{"id":2309,"depth":1053,"text":2312,"children":2765},[2766,2767,2768],{"id":2315,"depth":1059,"text":2315},{"id":2325,"depth":1059,"text":2328},{"id":2336,"depth":1059,"text":2339},{"id":2368,"depth":1053,"text":2371,"children":2770},[2771,2772,2773,2774,2775,2776,2777,2778],{"id":2374,"depth":1059,"text":2374},{"id":2384,"depth":1059,"text":2387},{"id":2420,"depth":1059,"text":2423},{"id":2436,"depth":1059,"text":2436},{"id":2451,"depth":1059,"text":2451},{"id":2494,"depth":1059,"text":2497},{"id":2526,"depth":1059,"text":2529},{"id":2577,"depth":1059,"text":2580},{"id":2611,"depth":1053,"text":2614,"children":2780},[2781,2782,2783,2784],{"id":2617,"depth":1059,"text":2620},{"id":2641,"depth":1059,"text":2644},{"id":2650,"depth":1059,"text":2653},{"id":2659,"depth":1059,"text":2662},"content:articles:hadano.md","articles\u002Fhadano.md","articles\u002Fhadano",{"_path":2789,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":2790,"description":2791,"category":2792,"tag":2793,"thumbnail":2794,"createdAt":2795,"updatedAt":2796,"body":2797,"_type":1074,"_id":3462,"_source":1076,"_file":3463,"_stem":3464,"_extension":1079},"\u002Farticles\u002Fblog-1","Nuxt+Content+Cloudflareで無料でブログを作ってみた","エンジニアでもない素人でブログ初心者が1カ月で自前のブログ立ち上げに挑戦",[1085],[16,1090],"nuxt-blog.jpg","2022\u002F4\u002F25","2023\u002F2\u002F15",{"type":25,"children":2798,"toc":3443},[2799,2804,2807,2813,2818,2823,2828,2833,2838,2843,2849,2854,2859,2862,2868,2873,2878,2883,2886,2892,2915,2920,2925,2936,2941,2946,2949,2954,2959,2964,2969,2980,2985,2991,2994,3000,3009,3014,3022,3027,3030,3035,3040,3045,3050,3053,3059,3072,3077,3080,3086,3091,3094,3100,3105,3110,3123,3128,3133,3146,3149,3155,3160,3173,3178,3183,3188,3191,3197,3202,3207,3212,3217,3222,3246,3251,3266,3269,3275,3297,3302,3309,3314,3319,3322,3327,3332,3337,3340,3428,3431,3434],{"type":28,"tag":29,"props":2800,"children":2801},{},[2802],{"type":33,"value":2803},"　この記事では、ブログ初心者が1カ月で自前のブログを立ち上げるようすを紹介します。エンジニアでもない素人にそんなことができるのでしょうか？",{"type":28,"tag":56,"props":2805,"children":2806},{},[],{"type":28,"tag":60,"props":2808,"children":2810},{"id":2809},"そうだブログを始めよう",[2811],{"type":33,"value":2812},"そうだ、ブログを始めよう！",{"type":28,"tag":29,"props":2814,"children":2815},{},[2816],{"type":33,"value":2817},"　ハダノは中学校教頭として定年退職して1年間、勤めに出ずにインプット中心の生活をしてきました。",{"type":28,"tag":29,"props":2819,"children":2820},{},[2821],{"type":33,"value":2822},"　これからは、アウトプットに力を入れていきたい　→　そうだ、ブログを始めよう！　と考えました。しかし、そこには大きなハードルがあったのです。",{"type":28,"tag":95,"props":2824,"children":2826},{"id":2825},"記事を管理するシステムが必要",[2827],{"type":33,"value":2825},{"type":28,"tag":29,"props":2829,"children":2830},{},[2831],{"type":33,"value":2832},"　シングルページとは違い、記事の数が増えてくるとリンク構造が複雑になります。記事を管理する何らかのシステムが必要です。手入力ではやっていられません。",{"type":28,"tag":95,"props":2834,"children":2836},{"id":2835},"無料ブログシステムの闇",[2837],{"type":33,"value":2835},{"type":28,"tag":29,"props":2839,"children":2840},{},[2841],{"type":33,"value":2842},"　そこで、はてなブログなどの無料ブログシステムを使おうと考えます。運営会社の都合に合わせる生活が始まります。予告なく仕様が変更されたり、突然サービスが終了されたりします。無料だから仕方ないとはいえ、使い捨てにされる気分です。",{"type":28,"tag":95,"props":2844,"children":2846},{"id":2845},"ブログなら-wordpress-一択",[2847],{"type":33,"value":2848},"ブログなら WordPress 一択",{"type":28,"tag":29,"props":2850,"children":2851},{},[2852],{"type":33,"value":2853},"　有名なブロガーは、口をそろえてそう言います。実際に全ウェブサイト中 43% のシェアがあり、2位の 4% を大きく引き離しています。日本国内CMSでは、 84% と独走状態です。",{"type":28,"tag":29,"props":2855,"children":2856},{},[2857],{"type":33,"value":2858},"　PHPの動くレンタルサーバーを借りればすむ話ですが、月千円程度必要です。ブログで稼ぐことを考えていない者にとっては、けっこうな負担です。教員には勧められません。",{"type":28,"tag":56,"props":2860,"children":2861},{},[],{"type":28,"tag":60,"props":2863,"children":2865},{"id":2864},"jamstackで動的サイトと静的サイトのいいとこ取りを",[2866],{"type":33,"value":2867},"Jamstackで動的サイトと静的サイトのいいとこ取りを",{"type":28,"tag":29,"props":2869,"children":2870},{},[2871],{"type":33,"value":2872},"　Jamstackの冒頭3文字はJavaScriptの”J”、APIの”A”、Markupの”M”を並べたものです。Jamstackとはこれらの3つの技術を利用し、Webをより速く、より安全に、そしてより簡単に拡張できるように設計されたしくみです。",{"type":28,"tag":29,"props":2874,"children":2875},{},[2876],{"type":33,"value":2877},"　ブログの場合でいうと、WordPressはサーバーサイドでPHPによって動的にページを作ります。JamstackはJavaScriptによって事前に作っておいた静的なページを配信するのです。無料のホスティングサービスを使えばお金は一切かかりません。しかも、Web標準技術（HTML,CSS,JavaScript）の知識さえあれば、自分好みにカスタマイズできます。PHPプログラミングを覚える必要はありません。",{"type":28,"tag":29,"props":2879,"children":2880},{},[2881],{"type":33,"value":2882},"　Jamstackにはいろんなシステムがあります。Webアプリを作るのにVue.jsというJavaScriptフレームワークを使ったことのあるハダノは、Vue.jsを拡張するNuxt.jsに挑戦することにしました。",{"type":28,"tag":56,"props":2884,"children":2885},{},[],{"type":28,"tag":95,"props":2887,"children":2889},{"id":2888},"nuxtcontntでブログシステムを構築",[2890],{"type":33,"value":2891},"nuxt\u002Fcontntでブログシステムを構築",{"type":28,"tag":727,"props":2893,"children":2894},{},[2895,2905],{"type":28,"tag":731,"props":2896,"children":2897},{},[2898],{"type":28,"tag":105,"props":2899,"children":2902},{"href":2900,"rel":2901},"https:\u002F\u002F0115765.com\u002Farchives\u002F6348",[142],[2903],{"type":33,"value":2904},"Nuxt+Content+Cloudflareで無料でブログを作ろう！【初心者向け】",{"type":28,"tag":731,"props":2906,"children":2907},{},[2908],{"type":28,"tag":105,"props":2909,"children":2912},{"href":2910,"rel":2911},"https:\u002F\u002Fjun-app.com\u002Fseries\u002Fnuxt-content-blog\u002F1",[142],[2913],{"type":33,"value":2914},"Nuxt Content × SSG で作る静的ブログ",{"type":28,"tag":29,"props":2916,"children":2917},{},[2918],{"type":33,"value":2919},"などのサイトを参考にブログを作っていきました。",{"type":28,"tag":29,"props":2921,"children":2922},{},[2923],{"type":33,"value":2924},"　最初につまづいたのは、ESlintです。JavaScriptのコードが正しいかをチェックするツールで、とても助かるのですが、いちいち細かいことまで指摘してきます。注意だけならともかく警告が出て止まってしまうこともありました。",{"type":28,"tag":858,"props":2926,"children":2931},{"code":2927,"language":2928,"meta":8,"className":2929},"  \u002F\u002F add your custom rules here\n  rules: {\n    'vue\u002Fmulti-word-component-names': 'off'\n  }\n",".eslintrc.js",[2930],"language-.eslintrc.js",[2932],{"type":28,"tag":372,"props":2933,"children":2934},{"__ignoreMap":8},[2935],{"type":33,"value":2927},{"type":28,"tag":29,"props":2937,"children":2938},{},[2939],{"type":33,"value":2940},"Vueのコンポーネント名として一つの単語を使っても止まらないようにするため、このルールを .eslintrc.js に追加しました。",{"type":28,"tag":29,"props":2942,"children":2943},{},[2944],{"type":33,"value":2945},"　次に困ったのはデバッグです。VScodeでのデバッグ方法がよくわからず、結局 Google Chrome で右クリック-検証 とやってデバッグしました。ほとんど単純ミスでした。layout は、うまく使えず、原因不明のままです。ヘッダーなどの共通部品をコンポーネント化したので、さほど困ってはいません。",{"type":28,"tag":56,"props":2947,"children":2948},{},[],{"type":28,"tag":29,"props":2950,"children":2951},{},[2952],{"type":33,"value":2953},"　いちばん困ったのが、date-fnsという日付処理用のプラグインをインストールしようとしたときです。何やらエラーメッセージが出て、そこで何かまずい操作をしたらしく、システムが停止しました。そのあと、Gitで復旧を試みましたが、何かのバージョン違いで復旧作業自体がストップしてしまいました。結局、nuxtのインストールからやり直すはめになりました。「おかしいと思ったら早めに引き返すこと」が教訓となりました。",{"type":28,"tag":29,"props":2955,"children":2956},{},[2957],{"type":33,"value":2958},"　作成日付と更新日付は、markdownファイルから自動取得していました。Cloudflare Pagesにデプロイすると、なぜかリセットされてしまいます。nuxt-content-gitというモジュールをインストールすれば解決するらしいと試みるもまたエラー　→　今度は深入りせず、自動取得をあきらめてcreatedAtとupdatedAtを手動で入力することにしました。",{"type":28,"tag":29,"props":2960,"children":2961},{},[2962],{"type":33,"value":2963},"　このあとも npm install ではエラーに悩まされました。firebase-tools のインストールで試しに yarn を使ってみたところ、あっさり成功しました。これは使えるかもしれません。",{"type":28,"tag":29,"props":2965,"children":2966},{},[2967],{"type":33,"value":2968},"　サイトの看板となるアイコン（favicon.ico）がうまく表示されない問題については、nuxt.config.jsを",{"type":28,"tag":858,"props":2970,"children":2975},{"code":2971,"language":2972,"meta":8,"className":2973},"  pwa: {\n    manifest: {\n      lang: 'en'\n    },\n    icon: false \u002F\u002F ←PWAのバグに対応\n  },\n","nuxt.config.js",[2974],"language-nuxt.config.js",[2976],{"type":28,"tag":372,"props":2977,"children":2978},{"__ignoreMap":8},[2979],{"type":33,"value":2971},{"type":28,"tag":29,"props":2981,"children":2982},{},[2983],{"type":33,"value":2984},"としてみたところ、ちゃんと favicon が表示されるようになりました。",{"type":28,"tag":490,"props":2986,"children":2990},{"src":2987,"alt":2988,"className":2989},"\u002Fimg\u002Ffavicon.gif","favicon",[619],[],{"type":28,"tag":56,"props":2992,"children":2993},{},[],{"type":28,"tag":95,"props":2995,"children":2997},{"id":2996},"cloudflare-pages-にカスタムドメインを設定",[2998],{"type":33,"value":2999},"Cloudflare Pages にカスタムドメインを設定",{"type":28,"tag":29,"props":3001,"children":3002},{},[3003],{"type":28,"tag":105,"props":3004,"children":3007},{"href":3005,"rel":3006},"https:\u002F\u002Fqiita.com\u002Fakitkat\u002Fitems\u002F8aeaee639ba5f2bda141",[142],[3008],{"type":33,"value":3005},{"type":28,"tag":29,"props":3010,"children":3011},{},[3012],{"type":33,"value":3013},"を参考に、kyodx.com に設定しました。「24時間かかる」との説明でしたが、数分でつながりました。",{"type":28,"tag":858,"props":3015,"children":3017},{"code":3016},"https:\u002F\u002F●●●blog.pages.dev\u002F*\n  X-Robots-Tag: noindex\n",[3018],{"type":28,"tag":372,"props":3019,"children":3020},{"__ignoreMap":8},[3021],{"type":33,"value":3016},{"type":28,"tag":29,"props":3023,"children":3024},{},[3025],{"type":33,"value":3026},"と書いた _headers ファイルをルートに置き、Cloudflare Pages の pages.dev ドメインを無効にして、独自ドメインだけを有効にするようにしました。",{"type":28,"tag":56,"props":3028,"children":3029},{},[],{"type":28,"tag":95,"props":3031,"children":3033},{"id":3032},"とても簡単なブログ更新作業",[3034],{"type":33,"value":3032},{"type":28,"tag":29,"props":3036,"children":3037},{},[3038],{"type":33,"value":3039},"　content\u002Farticles フォルダに ●●●.md という記事ファイルを作ります。マークダウンの書き方に慣れていなくても、HTMLを貼り付ければ大丈夫です。",{"type":28,"tag":29,"props":3041,"children":3042},{},[3043],{"type":33,"value":3044},"　GitHub Desktop で 「commit to master」ボタンをクリックし、「Push origin」ボタンをクリックして、数分間待つだけで勝手に更新されます。",{"type":28,"tag":29,"props":3046,"children":3047},{},[3048],{"type":33,"value":3049},"　これまで Git はあまり使っていなかったのですが、変更履歴がきちんと残るので便利です。",{"type":28,"tag":56,"props":3051,"children":3052},{},[],{"type":28,"tag":95,"props":3054,"children":3056},{"id":3055},"title-タグや-meta-タグを動的に設定",[3057],{"type":33,"value":3058},"title タグや meta タグを動的に設定",{"type":28,"tag":727,"props":3060,"children":3061},{},[3062],{"type":28,"tag":731,"props":3063,"children":3064},{},[3065],{"type":28,"tag":105,"props":3066,"children":3069},{"href":3067,"rel":3068},"https:\u002F\u002Fqiita.com\u002Famishiro\u002Fitems\u002Fb7260116b282d2cf2756",[142],[3070],{"type":33,"value":3071},"nuxt.js(v2)でSEOに必要なmeta(OGP)を入れたい",{"type":28,"tag":29,"props":3073,"children":3074},{},[3075],{"type":33,"value":3076},"を参考に、title タグや meta タグを設定しました。トップページ・記事一覧ページ以外のページでは、title,description,url,imageなどが動的に設定されるようにしました。",{"type":28,"tag":56,"props":3078,"children":3079},{},[],{"type":28,"tag":95,"props":3081,"children":3083},{"id":3082},"トップページに教育dxの概要説明を",[3084],{"type":33,"value":3085},"トップページに「教育DX」の概要説明を",{"type":28,"tag":29,"props":3087,"children":3088},{},[3089],{"type":33,"value":3090},"　教育DXとは何かを簡単に説明しました。知っている部分は読まなくていいように、details タグ　summary タグ を使いました。それぞれの「カテゴリー」や「タグ」への道案内になればよいと思います。",{"type":28,"tag":56,"props":3092,"children":3093},{},[],{"type":28,"tag":95,"props":3095,"children":3097},{"id":3096},"e-a-t-を意識した自己紹介を",[3098],{"type":33,"value":3099},"E-A-T を意識した自己紹介を",{"type":28,"tag":29,"props":3101,"children":3102},{},[3103],{"type":33,"value":3104},"　自作ソフト（ソックリッカー、ソックサーガ、ヌルパ）の紹介記事を書きました。",{"type":28,"tag":29,"props":3106,"children":3107},{},[3108],{"type":33,"value":3109},"　プロフィールのコンポーネントを作って、各記事の末尾に表示するようにしました。",{"type":28,"tag":727,"props":3111,"children":3112},{},[3113],{"type":28,"tag":731,"props":3114,"children":3115},{},[3116],{"type":28,"tag":105,"props":3117,"children":3120},{"href":3118,"rel":3119},"https:\u002F\u002Fwww.suzu6.net\u002Fposts\u002F266-nuxt-content-sitemap\u002F",[142],[3121],{"type":33,"value":3122},"nuxt\u002Fcontentでサイトマップを作る",{"type":28,"tag":29,"props":3124,"children":3125},{},[3126],{"type":33,"value":3127},"を参考に、ビルドしたらサイトマップが sitemap.xml に書き出されるようにしました。Google Search Console への登録に使います。",{"type":28,"tag":29,"props":3129,"children":3130},{},[3131],{"type":33,"value":3132},"　Cloudflare Pages でデプロイエラー → 環境変数の設定（NODE_VERSION,YARN_VERSION）で解決しました。Glitchもデフォルトのバージョンが低すぎて、似たようなことがありました。依存ライブラリのバージョン問題には悩まされます。",{"type":28,"tag":727,"props":3134,"children":3135},{},[3136],{"type":28,"tag":731,"props":3137,"children":3138},{},[3139],{"type":28,"tag":105,"props":3140,"children":3143},{"href":3141,"rel":3142},"https:\u002F\u002Fwww.saoyagi2.net\u002Fdiary\u002Fpost_175.html",[142],[3144],{"type":33,"value":3145},"DLLヘルが去ってパッケージヘルがやってきた",{"type":28,"tag":56,"props":3147,"children":3148},{},[],{"type":28,"tag":95,"props":3150,"children":3152},{"id":3151},"google-search-console-へ登録",[3153],{"type":33,"value":3154},"Google Search Console へ登録",{"type":28,"tag":29,"props":3156,"children":3157},{},[3158],{"type":33,"value":3159},"　Google Search Console のドメインプロパティで、1日待っても「所有権が証明できない」エラーが消えません。本に書いているのとやり方が違って戸惑ったので、",{"type":28,"tag":727,"props":3161,"children":3162},{},[3163],{"type":28,"tag":731,"props":3164,"children":3165},{},[3166],{"type":28,"tag":105,"props":3167,"children":3170},{"href":3168,"rel":3169},"https:\u002F\u002Fkoichi-tsujino.com\u002Fsetting_google_search_console_to_gcp",[142],[3171],{"type":33,"value":3172},"GCP + CloudFlareな環境に移行してGoogle SearchConsoleの設定をした話",{"type":28,"tag":29,"props":3174,"children":3175},{},[3176],{"type":33,"value":3177},"を参考に、DNSレコードを「ドメイン登録サービス」ではなく、Cloudflare のDNS設定で追加すると、すぐに解決しました。",{"type":28,"tag":29,"props":3179,"children":3180},{},[3181],{"type":33,"value":3182},"　URL検査で「このページはモバイルフレンドリーです」 が出て、一安心です。",{"type":28,"tag":29,"props":3184,"children":3185},{},[3186],{"type":33,"value":3187},"　Cloudflare の Web Analytics も始めました。",{"type":28,"tag":56,"props":3189,"children":3190},{},[],{"type":28,"tag":95,"props":3192,"children":3194},{"id":3193},"google-adsense-審査通過",[3195],{"type":33,"value":3196},"Google AdSense 審査通過",{"type":28,"tag":29,"props":3198,"children":3199},{},[3200],{"type":33,"value":3201},"　2022\u002F7\u002F22、記事数が20に達したので Google AdSense の利用にとりかかりました。",{"type":28,"tag":29,"props":3203,"children":3204},{},[3205],{"type":33,"value":3206},"　プライバシーポリシーにGoogle AdSenseについての記述を追加します。",{"type":28,"tag":29,"props":3208,"children":3209},{},[3210],{"type":33,"value":3211},"　@nuxtjs\u002Fgoogle-adsense をインストールし、nuxt.config.jsを編集、adsbygoogleコンポーネントをセットします。",{"type":28,"tag":29,"props":3213,"children":3214},{},[3215],{"type":33,"value":3216},"　「審査をリクエスト」をクリックして待ちます。審査完了まで平均1～2週間かかるようです。",{"type":28,"tag":29,"props":3218,"children":3219},{},[3220],{"type":33,"value":3221},"　審査は年々厳しくなっていく傾向にあり、信頼性の高いWebサイトに求められる",{"type":28,"tag":3223,"props":3224,"children":3225},"ol",{},[3226,3231,3236,3241],{"type":28,"tag":731,"props":3227,"children":3228},{},[3229],{"type":33,"value":3230},"ユーザーが抱える悩みや疑問を解決できるか",{"type":28,"tag":731,"props":3232,"children":3233},{},[3234],{"type":33,"value":3235},"独自性のあるコンテンツか",{"type":28,"tag":731,"props":3237,"children":3238},{},[3239],{"type":33,"value":3240},"コンテンツの量や質が適切であるか",{"type":28,"tag":731,"props":3242,"children":3243},{},[3244],{"type":33,"value":3245},"お問い合わせ・プライバシーポリシーがあるか",{"type":28,"tag":29,"props":3247,"children":3248},{},[3249],{"type":33,"value":3250},"という4つの基準が重視されるようです。",{"type":28,"tag":29,"props":3252,"children":3253},{},[3254,3256,3264],{"type":33,"value":3255},"　ドキドキしながら待っていると、1日半で「AdSense アカウントの有効化おめでとうございます！」のメールが届いてホッとしました。「",{"type":28,"tag":1128,"props":3257,"children":3258},{},[3259],{"type":28,"tag":1132,"props":3260,"children":3261},{},[3262],{"type":33,"value":3263},"教育DXブログがGoogleに認められたんだ！",{"type":33,"value":3265},"」とうれしくなりました。",{"type":28,"tag":56,"props":3267,"children":3268},{},[],{"type":28,"tag":95,"props":3270,"children":3272},{"id":3271},"staticフォルダ内のページが表示されない",[3273],{"type":33,"value":3274},"staticフォルダ内のページが表示されない！",{"type":28,"tag":29,"props":3276,"children":3277},{},[3278,3280,3287,3288,3295],{"type":33,"value":3279},"　マークダウンは書きやすく便利ですが、たまに、マークダウン以外で書かれたページが必要になります。自作のWebアプリ（",{"type":28,"tag":105,"props":3281,"children":3284},{"href":3282,"rel":3283},"https:\u002F\u002Fkyodx.com\u002Ftag\u002Fsoclicker",[142],[3285],{"type":33,"value":3286},"🔗ソックリッカー",{"type":33,"value":1954},{"type":28,"tag":105,"props":3289,"children":3292},{"href":3290,"rel":3291},"https:\u002F\u002Fkyodx.com\u002Ftag\u002Fsocsaga",[142],[3293],{"type":33,"value":3294},"🔗ソックサーガ",{"type":33,"value":3296},"）やPDF形式の文書などです。",{"type":28,"tag":29,"props":3298,"children":3299},{},[3300],{"type":33,"value":3301},"　そんなファイルは、static フォルダに入れておけばルートフォルダに置かれるので、\u002F（スラッシュ）から始まる相対URLでアクセスできます。",{"type":28,"tag":490,"props":3303,"children":3308},{"src":3304,"alt":3305,"width":3306,"style":3307},"\u002Fimg\u002Fpagenotfound.png","ページ表示エラー","50%","float:right",[],{"type":28,"tag":29,"props":3310,"children":3311},{},[3312],{"type":33,"value":3313},"　ところが実際は、すんなりと表示されないようです。リロードすれば表示されるので、アドレス指定は間違っていません。",{"type":28,"tag":29,"props":3315,"children":3316},{},[3317],{"type":33,"value":3318},"　いろいろ調べますが、今のところ原因がわかっていません。名前解決の問題かもと思いながら、とりあえず絶対URL指定に変えることにしました。",{"type":28,"tag":56,"props":3320,"children":3321},{},[],{"type":28,"tag":60,"props":3323,"children":3325},{"id":3324},"これからも改良を",[3326],{"type":33,"value":3324},{"type":28,"tag":29,"props":3328,"children":3329},{},[3330],{"type":33,"value":3331},"　自前のブログシステムなので、使っていきながら改良していきます。中身が全部わかっているというのは、安心です。",{"type":28,"tag":29,"props":3333,"children":3334},{},[3335],{"type":33,"value":3336},"　これからも応援よろしくお願いします。",{"type":28,"tag":56,"props":3338,"children":3339},{},[],{"type":28,"tag":923,"props":3341,"children":3343},{"className":3342},[926],[3344,3345,3358,3359],{"type":33,"value":929},{"type":28,"tag":923,"props":3346,"children":3348},{"className":3347},[933],[3349],{"type":28,"tag":105,"props":3350,"children":3353},{"target":937,"rel":3351,"href":3352},[939],"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",[3354],{"type":28,"tag":490,"props":3355,"children":3357},{"src":3356},"https:\u002F\u002Fthumbnail.image.rakuten.co.jp\u002F@0_mall\u002Frakutenkobo-ebooks\u002Fcabinet\u002F5585\u002F2000007695585.jpg?_ex=240x240",[],{"type":33,"value":929},{"type":28,"tag":923,"props":3360,"children":3362},{"className":3361},[950],[3363,3364,3374,3375,3389,3390,3427],{"type":33,"value":953},{"type":28,"tag":923,"props":3365,"children":3367},{"className":3366},[957],[3368],{"type":28,"tag":105,"props":3369,"children":3371},{"target":937,"rel":3370,"href":3352},[939],[3372],{"type":33,"value":3373},"Vue.js&Nuxt.js超入門 [ 掌田津耶乃 ]",{"type":33,"value":953},{"type":28,"tag":923,"props":3376,"children":3378},{"className":3377},[969],[3379,3382,3384,3387],{"type":28,"tag":56,"props":3380,"children":3381},{},[],{"type":33,"value":3383},"※ ネットの情報には、間違いも含まれています。",{"type":28,"tag":56,"props":3385,"children":3386},{},[],{"type":33,"value":3388},"ハダノは掌田さんの本のおかげで、Vue.jsの全体像とNuxt.jsの基本を一通り理解することができました。",{"type":33,"value":953},{"type":28,"tag":923,"props":3391,"children":3393},{"className":3392},[990,991],[3394,3395,3404,3405,3415,3416,3426],{"type":33,"value":994},{"type":28,"tag":923,"props":3396,"children":3397},{},[3398],{"type":28,"tag":105,"props":3399,"children":3402},{"className":3400,"target":937,"rel":3401,"href":3352},[1001,1002],[939],[3403],{"type":33,"value":1006},{"type":33,"value":1008},{"type":28,"tag":923,"props":3406,"children":3407},{},[3408],{"type":28,"tag":105,"props":3409,"children":3413},{"className":3410,"target":937,"rel":3411,"href":3412},[1001,1015],[939],"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",[3414],{"type":33,"value":1020},{"type":33,"value":1008},{"type":28,"tag":923,"props":3417,"children":3418},{},[3419],{"type":28,"tag":105,"props":3420,"children":3424},{"className":3421,"target":937,"rel":3422,"href":3423},[1001,1028],[939],"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",[3425],{"type":33,"value":1033},{"type":33,"value":953},{"type":33,"value":929},{"type":28,"tag":56,"props":3429,"children":3430},{},[],{"type":28,"tag":1040,"props":3432,"children":3433},{},[],{"type":28,"tag":29,"props":3435,"children":3436},{},[3437],{"type":28,"tag":105,"props":3438,"children":3440},{"href":3439},"\u002Farticles\u002Fblog-2",[3441],{"type":33,"value":3442},"次へ→　持続可能なブログ作り",{"title":8,"searchDepth":1053,"depth":1053,"links":3444},[3445,3450,3461],{"id":2809,"depth":1053,"text":2812,"children":3446},[3447,3448,3449],{"id":2825,"depth":1059,"text":2825},{"id":2835,"depth":1059,"text":2835},{"id":2845,"depth":1059,"text":2848},{"id":2864,"depth":1053,"text":2867,"children":3451},[3452,3453,3454,3455,3456,3457,3458,3459,3460],{"id":2888,"depth":1059,"text":2891},{"id":2996,"depth":1059,"text":2999},{"id":3032,"depth":1059,"text":3032},{"id":3055,"depth":1059,"text":3058},{"id":3082,"depth":1059,"text":3085},{"id":3096,"depth":1059,"text":3099},{"id":3151,"depth":1059,"text":3154},{"id":3193,"depth":1059,"text":3196},{"id":3271,"depth":1059,"text":3274},{"id":3324,"depth":1053,"text":3324},"content:articles:blog-1.md","articles\u002Fblog-1.md","articles\u002Fblog-1",1791852930676]