[{"data":1,"prerenderedAt":2726},["ShallowReactive",2],{"\u002Ftag\u002Finformation-ed\u002Fpage\u002F3":3},[4,471,981,1369,2565],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9,"description":10,"category":11,"tag":13,"thumbnail":18,"createdAt":19,"updatedAt":20,"body":21,"_type":465,"_id":466,"_source":467,"_file":468,"_stem":469,"_extension":470},"\u002Farticles\u002Fcg-usagi","articles",false,"","できる オリジナル年賀状","パワーポイントでサクッと作る3-D年賀状2023",[12],"work-system",[14,15,16,17],"cg","teachers-baton","information-ed","steam","ppnenga2023.jpg","2022\u002F12\u002F25","2022\u002F1\u002F1",{"type":22,"children":23,"toc":453},"root",[24,32,37,42,46,52,59,84,88,94,112,119,127,132,135,138,144,167,172,180,185,193,198,201,204,210,233,238,241,244,250,282,287,295,298,304,318,323,328,340,344],{"type":25,"tag":26,"props":27,"children":28},"element","p",{},[29],{"type":30,"value":31},"text","　「お世話になったあの方へ年賀状を送りたいけど、時間がない！」「授業で年賀状を作らせたいけど、時間数が足りない！」「オリジナリティのある年賀状にしたいけど、画像処理ができない！」",{"type":25,"tag":26,"props":33,"children":34},{},[35],{"type":30,"value":36},"と、お悩みではありませんか。実は、ふだん使っているパワーポイントで簡単に画像処理できるのです。",{"type":25,"tag":26,"props":38,"children":39},{},[40],{"type":30,"value":41},"　かっこいい3-DのCGを取り入れた年賀状デザインを15分でやってみました。",{"type":25,"tag":43,"props":44,"children":45},"br",{},[],{"type":25,"tag":47,"props":48,"children":50},"h2",{"id":49},"パワーポイントでサクッと作る3-d年賀状2023",[51],{"type":30,"value":10},{"type":25,"tag":53,"props":54,"children":56},"h3",{"id":55},"_1-だいたいの構想を立てる",[57],{"type":30,"value":58},"1 だいたいの構想を立てる",{"type":25,"tag":60,"props":61,"children":62},"ul",{},[63,69,74,79],{"type":25,"tag":64,"props":65,"children":66},"li",{},[67],{"type":30,"value":68},"はがきは横置き。",{"type":25,"tag":64,"props":70,"children":71},{},[72],{"type":30,"value":73},"背景画像の上に「迎春」「2023」の文字を重ねる。",{"type":25,"tag":64,"props":75,"children":76},{},[77],{"type":30,"value":78},"背景はぼかし、文字は立体化する。",{"type":25,"tag":64,"props":80,"children":81},{},[82],{"type":30,"value":83},"干支にちなんだもの（ウサギ）を入れる。",{"type":25,"tag":43,"props":85,"children":87},{"id":86},"geishun",[],{"type":25,"tag":53,"props":89,"children":91},{"id":90},"_2-迎春を3-d化する",[92],{"type":30,"value":93},"2 迎春を3-D化する",{"type":25,"tag":60,"props":95,"children":96},{},[97,102,107],{"type":25,"tag":64,"props":98,"children":99},{},[100],{"type":30,"value":101},"パワーポイントで、新規作成。デザイン-スライドのサイズ-ユーザー設定のスライドのサイズ-幅の半分の値を高さに設定。",{"type":25,"tag":64,"props":103,"children":104},{},[105],{"type":30,"value":106},"テキストボックスを挿入し、「迎春」を400ポイントで入力。",{"type":25,"tag":64,"props":108,"children":109},{},[110],{"type":30,"value":111},"図形の書式設定-文字のオプション-文字の塗りつぶしと輪郭 を ゴールド に設定。",{"type":25,"tag":113,"props":114,"children":118},"img",{"src":115,"alt":116,"width":117},"\u002Fimg\u002Fppnenga1.jpg","パワポで年賀状作り1","100%",[],{"type":25,"tag":60,"props":120,"children":121},{},[122],{"type":25,"tag":64,"props":123,"children":124},{},[125],{"type":30,"value":126},"図形の書式設定-文字のオプション-文字の効果-3-D回転-標準スタイル から 不等角投影2:左 を選択。3-D書式-奥行きを 40ポイント に設定。",{"type":25,"tag":113,"props":128,"children":131},{"src":129,"alt":130,"width":117},"\u002Fimg\u002Fppnenga2.jpg","パワポで年賀状作り2",[],{"type":25,"tag":43,"props":133,"children":134},{},[],{"type":25,"tag":43,"props":136,"children":137},{},[],{"type":25,"tag":53,"props":139,"children":141},{"id":140},"_3-誤字をデザインに生かすために図形化する",[142],{"type":30,"value":143},"3 誤字をデザインに生かすために図形化する",{"type":25,"tag":60,"props":145,"children":146},{},[147,152,157,162],{"type":25,"tag":64,"props":148,"children":149},{},[150],{"type":30,"value":151},"小学生時代のハダノは、「迎」を「卯 + しんにょう」と間違えて書いていた。",{"type":25,"tag":64,"props":153,"children":154},{},[155],{"type":30,"value":156},"しんにょうだけ取り出すために、文字を図形化。",{"type":25,"tag":64,"props":158,"children":159},{},[160],{"type":30,"value":161},"「迎」は分離しにくいので、代わりに「逝」を使用。コピーして2つ並べ、Shift+クリックで選択。",{"type":25,"tag":64,"props":163,"children":164},{},[165],{"type":30,"value":166},"図形の書式-図形の挿入-図形の結合-接合 をクリックすると、図形化される。",{"type":25,"tag":113,"props":168,"children":171},{"src":169,"alt":170,"width":117},"\u002Fimg\u002Fppnenga3.jpg","パワポで年賀状作り3",[],{"type":25,"tag":60,"props":173,"children":174},{},[175],{"type":25,"tag":64,"props":176,"children":177},{},[178],{"type":30,"value":179},"「逝」の中の「折」の部分を消すと、しんにょうだけになる。",{"type":25,"tag":113,"props":181,"children":184},{"src":182,"alt":183,"width":117},"\u002Fimg\u002Fppnenga3b.jpg","パワポで年賀状作り3b",[],{"type":25,"tag":60,"props":186,"children":187},{},[188],{"type":25,"tag":64,"props":189,"children":190},{},[191],{"type":30,"value":192},"「卯」と「しんにょう」を3-D化。ただし、「しんにょう」は図形化されているので、文字のオプション のかわりに 図形のオプション で設定。",{"type":25,"tag":113,"props":194,"children":197},{"src":195,"alt":196,"width":117},"\u002Fimg\u002Fppnenga4.jpg","パワポで年賀状作り4",[],{"type":25,"tag":43,"props":199,"children":200},{},[],{"type":25,"tag":43,"props":202,"children":203},{},[],{"type":25,"tag":53,"props":205,"children":207},{"id":206},"_4-背景画像をぼかす",[208],{"type":30,"value":209},"4 背景画像をぼかす",{"type":25,"tag":60,"props":211,"children":212},{},[213,218,223,228],{"type":25,"tag":64,"props":214,"children":215},{},[216],{"type":30,"value":217},"「2023」を3-D化。背景画像とマッチするよう、色を赤に。",{"type":25,"tag":64,"props":219,"children":220},{},[221],{"type":30,"value":222},"挿入-画像 で、背景画像（ハダノ家の樹齢250年のツツジ）を読み込む。",{"type":25,"tag":64,"props":224,"children":225},{},[226],{"type":30,"value":227},"ぼかすには、図の書式設定-図-図の修整-鮮明度 を下げていく。",{"type":25,"tag":64,"props":229,"children":230},{},[231],{"type":30,"value":232},"明るさ を上げ、コントラスト を下げるなどして見やすくする。",{"type":25,"tag":113,"props":234,"children":237},{"src":235,"alt":236,"width":117},"\u002Fimg\u002Fppnenga5.jpg","パワポで年賀状作り5",[],{"type":25,"tag":43,"props":239,"children":240},{},[],{"type":25,"tag":43,"props":242,"children":243},{},[],{"type":25,"tag":53,"props":245,"children":247},{"id":246},"_5-ウサギを強化する",[248],{"type":30,"value":249},"5 ウサギを強化する",{"type":25,"tag":60,"props":251,"children":252},{},[253,258,263,277],{"type":25,"tag":64,"props":254,"children":255},{},[256],{"type":30,"value":257},"ここまでのものを合体させて、一応完成。",{"type":25,"tag":64,"props":259,"children":260},{},[261],{"type":30,"value":262},"せっかくなので、「卯」の文字の代わりにウサギの3-D画像を入れて強化。",{"type":25,"tag":64,"props":264,"children":265},{},[266,275],{"type":25,"tag":267,"props":268,"children":272},"a",{"href":269,"rel":270},"https:\u002F\u002Fsketchfab.com\u002F3d-models\u002Frabbit-073eef14ae3c4d06808498c3ba895e67",[271],"nofollow",[273],{"type":30,"value":274},"🔗Sketchfab.com でフリーのウサギ3-D画像",{"type":30,"value":276}," を探す。",{"type":25,"tag":64,"props":278,"children":279},{},[280],{"type":30,"value":281},"ブラウザ上でウサギの向きを大まかに調整してスクショ。パワポで、しんにょうの上に貼り付け、図の書式設定-効果-3-D回転 で微調整。",{"type":25,"tag":113,"props":283,"children":286},{"src":284,"alt":285,"width":117},"\u002Fimg\u002Fusagi2023c.jpg","パワポで年賀状2023",[],{"type":25,"tag":60,"props":288,"children":289},{},[290],{"type":25,"tag":64,"props":291,"children":292},{},[293],{"type":30,"value":294},"完成したら、ファイル-名前を付けて保存 でPNG形式で保存。ワードに挿入し、住所・氏名等を入れてハガキに印刷。",{"type":25,"tag":43,"props":296,"children":297},{},[],{"type":25,"tag":47,"props":299,"children":301},{"id":300},"まとめ忙しくてもパワポがあれば年賀状が作れる",[302],{"type":30,"value":303},"【まとめ】忙しくてもパワポがあれば、年賀状が作れる",{"type":25,"tag":26,"props":305,"children":306},{},[307,309,316],{"type":30,"value":308},"　3-D画像を本格的に扱うには、",{"type":25,"tag":267,"props":310,"children":313},{"href":311,"rel":312},"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002FBlender",[271],[314],{"type":30,"value":315},"🔗Blender",{"type":30,"value":317}," などの3DCG制作ツールが必要です。ハダノは、時間があるときは、Blenderで納得いくまで3-D画像をいじります。",{"type":25,"tag":26,"props":319,"children":320},{},[321],{"type":30,"value":322},"　「忙しくても3-D画像をあきらめたくない」……そんなときどうするかと考えました。パワポの3-D効果機能を使えば、ある程度できるはずとやってみたのが今回の記事です。",{"type":25,"tag":26,"props":324,"children":325},{},[326],{"type":30,"value":327},"　業者から勧められるままに教育アプリを導入するより、ふだん使っているオフィスアプリでできることを見直すべきではないでしょうか。教員の働き方改革にもつながるはずです。",{"type":25,"tag":26,"props":329,"children":331},{"style":330},"text-align: right;",[332,334],{"type":30,"value":333},"⇒",{"type":25,"tag":267,"props":335,"children":337},{"href":336},"\u002Farticles\u002Fict-4",[338],{"type":30,"value":339}," 🔗PDFをInkscape経由でパワーポイントに貼れば、「きれい・自由・超簡単」",{"type":25,"tag":43,"props":341,"children":343},{"id":342},"powerpoint",[],{"type":25,"tag":345,"props":346,"children":349},"div",{"className":347},[348],"kattene",[350,352,368,369],{"type":30,"value":351},"\n    ",{"type":25,"tag":345,"props":353,"children":356},{"className":354},[355],"kattene__imgpart",[357],{"type":25,"tag":267,"props":358,"children":363},{"target":359,"rel":360,"href":362},"_blank",[361],"noopener","https:\u002F\u002Fhb.afl.rakuten.co.jp\u002Fichiba\u002F26ba9fc2.c2fdf85a.26ba9fc3.8edde063\u002F_RTLink57028?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fbook%2F16212010%2F&link_type=hybrid_url&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJoeWJyaWRfdXJsIiwic2l6ZSI6IjI0MHgyNDAiLCJuYW0iOjEsIm5hbXAiOiJyaWdodCIsImNvbSI6MSwiY29tcCI6ImRvd24iLCJwcmljZSI6MCwiYm9yIjoxLCJjb2wiOjEsImJidG4iOjAsInByb2QiOjAsImFtcCI6ZmFsc2V9",[364],{"type":25,"tag":113,"props":365,"children":367},{"src":366},"https:\u002F\u002Fthumbnail.image.rakuten.co.jp\u002F@0_mall\u002Fbook\u002Fcabinet\u002F8439\u002F9784295008439.jpg?_ex=240x240",[],{"type":30,"value":351},{"type":25,"tag":345,"props":370,"children":373},{"className":371},[372],"kattene__infopart",[374,376,387,388,403,404,452],{"type":30,"value":375},"\n      ",{"type":25,"tag":345,"props":377,"children":380},{"className":378},[379],"kattene__title",[381],{"type":25,"tag":267,"props":382,"children":384},{"target":359,"rel":383,"href":362},[361],[385],{"type":30,"value":386},"できるPowerPointパーフェクトブック困った！＆便利ワザ大全 Office　365／2019／2016／2013 [ 井上香緒里 ]",{"type":30,"value":375},{"type":25,"tag":345,"props":389,"children":392},{"className":390},[391],"kattene__description",[393,396,398,401],{"type":25,"tag":43,"props":394,"children":395},{},[],{"type":30,"value":397},"※ インプレスの「できるシリーズ」は、知りたいことに的確にこたえてくれます。ハダノは何度も助けられました。",{"type":25,"tag":43,"props":399,"children":400},{},[],{"type":30,"value":402},"「できるICT授業」は、無償配布されているので、学校教育に役立てるとよいでしょう。",{"type":30,"value":375},{"type":25,"tag":345,"props":405,"children":409},{"className":406},[407,408],"kattene__btns","__three",[410,412,424,426,438,439,451],{"type":30,"value":411},"\n      \t",{"type":25,"tag":345,"props":413,"children":414},{},[415],{"type":25,"tag":267,"props":416,"children":421},{"className":417,"target":359,"rel":420,"href":362},[418,419],"kattene__btn","__red",[361],[422],{"type":30,"value":423},"楽天",{"type":30,"value":425},"\n        ",{"type":25,"tag":345,"props":427,"children":428},{},[429],{"type":25,"tag":267,"props":430,"children":435},{"className":431,"target":359,"rel":433,"href":434},[418,432],"__orange",[361],"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%2FB0854HHHQX",[436],{"type":30,"value":437},"Amazon",{"type":30,"value":425},{"type":25,"tag":345,"props":440,"children":441},{},[442],{"type":25,"tag":267,"props":443,"children":448},{"className":444,"target":359,"rel":446,"href":447},[418,445],"__green",[361],"https:\u002F\u002Fck.jp.ap.valuecommerce.com\u002Fservlet\u002Freferral?sid=3651993&pid=887947441&vc_url=https%3A%2F%2Fstore.shopping.yahoo.co.jp%2Febookjapan%2Fb00162336743.html%3Fsc_i%3Dshp_pc_search_itemlist_shsrg_img",[449],{"type":30,"value":450},"Yahoo!",{"type":30,"value":375},{"type":30,"value":351},{"title":8,"searchDepth":454,"depth":454,"links":455},2,[456,464],{"id":49,"depth":454,"text":10,"children":457},[458,460,461,462,463],{"id":55,"depth":459,"text":58},3,{"id":90,"depth":459,"text":93},{"id":140,"depth":459,"text":143},{"id":206,"depth":459,"text":209},{"id":246,"depth":459,"text":249},{"id":300,"depth":454,"text":303},"markdown","content:articles:cg-usagi.md","content","articles\u002Fcg-usagi.md","articles\u002Fcg-usagi","md",{"_path":472,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":473,"description":474,"category":475,"tag":477,"thumbnail":482,"createdAt":483,"updatedAt":484,"body":485,"_type":465,"_id":978,"_source":467,"_file":979,"_stem":980,"_extension":470},"\u002Farticles\u002Fsocsaga-2","ソックサーガの始め方【自校運用】","コンテンツプログラミングシステム「ソックサーガ」のReplitによる自校運用法",[476],"programming",[478,16,479,480,481],"socsaga","beginner-programming","web-standards","vue","socsaga01.jpg","2022\u002F6\u002F23","2022\u002F7\u002F2",{"type":22,"children":486,"toc":973},[487,492,495,501,522,538,565,570,573,576,581,584,590,608,621,662,667,670,673,686,689,694,697,702,716,725,730,733,741,750,758,766,774,782,798,806,860,864,957,960,964],{"type":25,"tag":26,"props":488,"children":489},{},[490],{"type":30,"value":491},"　この記事では、コンテンツプログラミングシステム「ソックサーガ」の始め方を解説します。クラウド統合開発環境Replit（リプリット）による自校運用の方法です。プログラミング実習では、生徒が打ったコードを管理する必要があります。コードを評価や指導に十分役立てるには、自校運用が必須です。",{"type":25,"tag":43,"props":493,"children":494},{},[],{"type":25,"tag":47,"props":496,"children":498},{"id":497},"ソックサーガの始め方指導者の方へ",[499],{"type":30,"value":500},"ソックサーガの始め方（指導者の方へ）",{"type":25,"tag":502,"props":503,"children":504},"ol",{},[505,510],{"type":25,"tag":64,"props":506,"children":507},{},[508],{"type":30,"value":509},"Googleアカウント取得。校務用とは別に授業用のアカウントがあると便利。",{"type":25,"tag":64,"props":511,"children":512},{},[513,520],{"type":25,"tag":267,"props":514,"children":517},{"href":515,"rel":516},"https:\u002F\u002Freplit.com\u002F~",[271],[518],{"type":30,"value":519},"🔗Replit",{"type":30,"value":521}," に[Continue with Google]で[Sign up]し、アカウントを設定。左上の ≡ - [+Create]をクリック、Titleにプロジェクト名（socsaga1 等）、Languageは[HTML,CSS,JS]を選択し、[+Create Repl]をクリック。プロジェクトはクラス数分作るとよい。",{"type":25,"tag":26,"props":523,"children":524},{},[525,532],{"type":25,"tag":113,"props":526,"children":531},{"src":527,"alt":528,"className":529},"\u002Fimg\u002Freplitlogin.jpg","replitlogin",[530],"imgh",[],{"type":25,"tag":113,"props":533,"children":537},{"src":534,"alt":535,"className":536},"\u002Fimg\u002Fcreaterepl.jpg","createrepl",[530],[],{"type":25,"tag":502,"props":539,"children":540},{"start":459},[541,546,560],{"type":25,"tag":64,"props":542,"children":543},{},[544],{"type":30,"value":545},"JavaScriptプログラムは、基本的にhtmlファイルに組み込んで動作させる。ローカルファイルをFiles欄にドラッグ＆ドロップするか、コードエディタで直接書くかする。",{"type":25,"tag":64,"props":547,"children":548},{},[549,551,558],{"type":30,"value":550},"SocSagaを利用するには、",{"type":25,"tag":267,"props":552,"children":555},{"href":553,"rel":554},"https:\u002F\u002Fkyodx.com\u002Fsrc\u002Fsocsagaset.zip",[271],[556],{"type":30,"value":557},"🔗socsagaset.zipをダウンロード",{"type":30,"value":559},"・解凍しておく。sagaフォルダの中のものをすべてFiles欄にドラッグ＆ドロップする。",{"type":25,"tag":64,"props":561,"children":562},{},[563],{"type":30,"value":564},"jisshu00.html をひな形ファイルとし、ファイル名右の ≡ をクリック-Duplicate、≡ をクリック-Rename で jisshu01.html，jisshu02.html，…とクラスの生徒数分の実習htmlファイルを用意。指導者の方へ.txt の指示に従ってhtmlリストと画像リストを更新しておく。実習開始時には、右上の[👤+Invite]をクリックし、メールで生徒に知らせる。",{"type":25,"tag":113,"props":566,"children":569},{"src":567,"alt":568,"width":117},"\u002Fimg\u002Freplsaga1.jpg","replsaga1",[],{"type":25,"tag":43,"props":571,"children":572},{},[],{"type":25,"tag":43,"props":574,"children":575},{},[],{"type":25,"tag":26,"props":577,"children":578},{},[579],{"type":30,"value":580},"※ 生徒には、次の手順で操作をさせてください。",{"type":25,"tag":43,"props":582,"children":583},{},[],{"type":25,"tag":47,"props":585,"children":587},{"id":586},"ソックサーガの始め方生徒へ",[588],{"type":30,"value":589},"ソックサーガの始め方（生徒へ）",{"type":25,"tag":502,"props":591,"children":593},{"start":592},6,[594],{"type":25,"tag":64,"props":595,"children":596},{},[597,599,606],{"type":30,"value":598},"メールが届いたら、",{"type":25,"tag":600,"props":601,"children":603},"code",{"className":602},[],[604],{"type":30,"value":605},"https:\u002F\u002Freplit.com\u002Fjoin\u002F**********-*******",{"type":30,"value":607}," をクリックし、[Continue with Google]で[Sign up]して、プロジェクトに参加する。「Replit needs ……」に対しては、[Allow notifications]を選ぶ。",{"type":25,"tag":26,"props":609,"children":610},{},[611,615],{"type":25,"tag":113,"props":612,"children":614},{"src":527,"alt":528,"className":613},[530],[],{"type":25,"tag":113,"props":616,"children":620},{"src":617,"alt":618,"className":619},"\u002Fimg\u002Freplitnotif.jpg","replitnotif",[530],[],{"type":25,"tag":502,"props":622,"children":624},{"start":623},7,[625,630,641],{"type":25,"tag":64,"props":626,"children":627},{},[628],{"type":30,"value":629},"コード編集欄の右の Output欄の右上の ↗ (Open in a new tab) をクリックして新しいウィンドウを開く。少し待つと「ソックサーガへようこそ」から「ソックサーガで実習」に自動的に切り替わる。コード編集欄の右の仕切り線を右にずらして、広くしておくとよい。",{"type":25,"tag":64,"props":631,"children":632},{},[633,639],{"type":25,"tag":600,"props":634,"children":636},{"className":635},[],[637],{"type":30,"value":638},"jisshu\u002Fsocsaga.html（ソックサーガの説明_編集用）へ",{"type":30,"value":640},"をクリックし、実行エリアが表示されるようにし、[コンテンツ作り へ]、[　→　]、[　→　]、…とボタンをクリックして、SocSagaの説明を読み進める。",{"type":25,"tag":64,"props":642,"children":643},{},[644,646,652,654,660],{"type":30,"value":645},"SocSagaについて理解できたら、jisshu フォルダ内のhtml一覧で ",{"type":25,"tag":600,"props":647,"children":649},{"className":648},[],[650],{"type":30,"value":651},"jisshu**.html",{"type":30,"value":653},"（**は出席番号）をクリックして自分のページを表示する。Files欄で ",{"type":25,"tag":600,"props":655,"children":657},{"className":656},[],[658],{"type":30,"value":659},"jisshu\u002Fjisshu**.html",{"type":30,"value":661}," を選び、コード編集欄と自分のページとを行ったり来たりしてSocSagaの練習をする。編集するスライド番号 を入力し、自分のページの ↻ ボタンで更新。スライド編集エリアで編集後、[ソース]ボタンでコピーしたソースをコード編集欄のsectionタグ内に貼り付ける。自分のページの ↻ ボタンで更新。正しく表示されているか、実行エリアのボタンが作動するか確認。",{"type":25,"tag":113,"props":663,"children":666},{"src":664,"alt":665,"width":117},"\u002Fimg\u002Freplsaji.jpg","replsaji",[],{"type":25,"tag":43,"props":668,"children":669},{},[],{"type":25,"tag":43,"props":671,"children":672},{},[],{"type":25,"tag":26,"props":674,"children":675},{},[676,678,684],{"type":30,"value":677},"※ socsagaの練習で生徒がある程度使いこなせるようになったら、あとは「授業のねらい」に応じてどんどんコンテンツプログラミングをさせてください。コンテンツ作成では、「内容よりも見た目に凝りすぎる」ことのないよう注意してください。生徒はむやみに色を使いたがります。伝わるデザインにするには、「ポジティブな強調は青、ネガティブな強調は赤」など統一した色使いでシンプルに仕上げることが大切です（→",{"type":25,"tag":267,"props":679,"children":681},{"href":680},"#presen",[682],{"type":30,"value":683},"🔗プレゼン資料のデザイン図鑑",{"type":30,"value":685},"）。ソフトウェアは著作物だということも教えましょう。",{"type":25,"tag":43,"props":687,"children":688},{},[],{"type":25,"tag":26,"props":690,"children":691},{},[692],{"type":30,"value":693},"※ 以下は、おまけです。しくみを知りたい方はどうぞ……",{"type":25,"tag":43,"props":695,"children":696},{},[],{"type":25,"tag":47,"props":698,"children":700},{"id":699},"ソックサーガ自校運用の技術的な話",[701],{"type":30,"value":699},{"type":25,"tag":26,"props":703,"children":704},{},[705,707,714],{"type":30,"value":706},"　",{"type":25,"tag":267,"props":708,"children":711},{"href":709,"rel":710},"https:\u002F\u002Fkyodx.com\u002Farticles\u002Fcloudide-1",[271],[712],{"type":30,"value":713},"🔗クラウド統合開発環境でWebアプリの自校運用を",{"type":30,"value":715}," の最後に",{"type":25,"tag":26,"props":717,"children":718},{},[719],{"type":25,"tag":600,"props":720,"children":722},{"className":721},[],[723],{"type":30,"value":724},"　「画像の一覧」の問題が残っていますが、これは何とかなりそうです。画像やクリップボードの扱いが独特な iPad に対応したコードを書くついでに解決します。",{"type":25,"tag":26,"props":726,"children":727},{},[728],{"type":30,"value":729},"と書いた件ですが、次のように対応しました。",{"type":25,"tag":43,"props":731,"children":732},{},[],{"type":25,"tag":60,"props":734,"children":735},{},[736],{"type":25,"tag":64,"props":737,"children":738},{},[739],{"type":30,"value":740},"ルートのindex.htmlファイル「ソックサーガへようこそ」に以下のコードを入れ、新しいウィンドウを開いたら自動的にjisshuフォルダのindex.html「ソックサーガで実習」に移動するようにする。",{"type":25,"tag":742,"props":743,"children":745},"pre",{"code":744},"    if (location.hostname.indexOf('.id.repl.co') \u003C 0) {\n      location.href = '\u002Fjisshu\u002F';\n    }\n",[746],{"type":25,"tag":600,"props":747,"children":748},{"__ignoreMap":8},[749],{"type":30,"value":744},{"type":25,"tag":60,"props":751,"children":752},{},[753],{"type":25,"tag":64,"props":754,"children":755},{},[756],{"type":30,"value":757},"jisshu\u002Findex.htmlに以下のコードを入れ、画像一覧を表示させる。urliから画像ファイル名を取得して配列にし、insertAdjacentHTMLでimgタグを挿入してゆく。ファイル名はfigcaptionタグを使って表示。ファイル名をクリックすると画像を開くようにしている。",{"type":25,"tag":742,"props":759,"children":761},{"code":760},"      fetch(urli, {cache: \"no-store\"}).then(function(response) {\n        return response.text()\n      }).then(function(text) {\n        jlisti = text.split(\u002F\\n\u002F).filter((value) => value !== ''); \n        for (let item of jlisti) {\n        jisshui.insertAdjacentHTML('beforeend',`\u003Cfigure>\u003Cimg src=\"img\u002F${item}\">\u003Cfigcaption>\u003Ca href=\"img\u002F${item}\" onclick=\"return confirm('画像を開きますか？');\">${item}\u003C\u002Fa>\u003C\u002Ffigcaption>\u003C\u002Ffigure>`);          \n        }        \n      });      \n",[762],{"type":25,"tag":600,"props":763,"children":764},{"__ignoreMap":8},[765],{"type":30,"value":760},{"type":25,"tag":60,"props":767,"children":768},{},[769],{"type":25,"tag":64,"props":770,"children":771},{},[772],{"type":30,"value":773},"同じ要領で、jisshu\u002Findex.htmlに以下のコードを入れ、html一覧を表示させる。",{"type":25,"tag":742,"props":775,"children":777},{"code":776},"      fetch(urlh,{cache: \"no-store\"}).then(function(response) {\n        return response.text()\n      }).then(function(text) {\n        jlisth = text.split(\u002F\\n\u002F).filter((value) => value !== '');\n        for (let item of jlisth) {\n        jisshuh.insertAdjacentHTML('beforeend',`　\u003Ca href=\"${item}\" target=\"_blank\">${item}\u003C\u002Fa>　`);          \n        }\n      });\n",[778],{"type":25,"tag":600,"props":779,"children":780},{"__ignoreMap":8},[781],{"type":30,"value":776},{"type":25,"tag":60,"props":783,"children":784},{},[785],{"type":25,"tag":64,"props":786,"children":787},{},[788,790,796],{"type":30,"value":789},"画像ファイル名一覧・htmlファイル名一覧の取得は、通常はサーバサイドプログラミングの出番。今回は、「指導者の方へ」で以下のShellコマンドを実行してもらう形にした。",{"type":25,"tag":600,"props":791,"children":793},{"className":792},[],[794],{"type":30,"value":795},"{cache: \"no-store\"}",{"type":30,"value":797}," でfetchし、キャッシュを読まないようにしているが、「リストを最新の状態にしたのに一覧が古いまま」ということがたまにあったので、対策を追記した。",{"type":25,"tag":742,"props":799,"children":801},{"code":800},"cd jisshu\nls *.html > yourhtml.txt\nls img\u002F > yourimg.txt\n",[802],{"type":25,"tag":600,"props":803,"children":804},{"__ignoreMap":8},[805],{"type":30,"value":800},{"type":25,"tag":60,"props":807,"children":808},{},[809,814,835,855],{"type":25,"tag":64,"props":810,"children":811},{},[812],{"type":30,"value":813},"iPadなどのモバイルOSの場合、画像やクリップボードの扱いがPCとは異なるので注意が必要。JavaScriptの命令がうまく働かないことが多々ある。",{"type":25,"tag":64,"props":815,"children":816},{},[817,819,825,827,833],{"type":30,"value":818},"iPadで画像をロングタップして",{"type":25,"tag":600,"props":820,"children":822},{"className":821},[],[823],{"type":30,"value":824},"コピー",{"type":30,"value":826},"し、SocPadに",{"type":25,"tag":600,"props":828,"children":830},{"className":829},[],[831],{"type":30,"value":832},"貼り付け",{"type":30,"value":834}," をしても何も貼り付けられない。仕方ないので、ckeditor5-34.1.0へアップデイトしたうえでAutoImage pluginを有効にした。これで、画像URLを貼り付ければ画像が挿入される。",{"type":25,"tag":64,"props":836,"children":837},{},[838,840,846,848,853],{"type":30,"value":839},"ところが、画像をロングタップしても",{"type":25,"tag":600,"props":841,"children":843},{"className":842},[],[844],{"type":30,"value":845},"画像のアドレスをコピー",{"type":30,"value":847},"が出ない。ファイル名をクリックすると画像を開くようにしたのはこのためで、アドレス欄をロングタップ-",{"type":25,"tag":600,"props":849,"children":851},{"className":850},[],[852],{"type":30,"value":824},{"type":30,"value":854}," でようやく画像URLがコピーされる。",{"type":25,"tag":64,"props":856,"children":857},{},[858],{"type":30,"value":859},"他にも方法は考えられるが、Appleが年々クリップボードのセキュリティを厳しくしているので、ユーザーに意識的操作をさせた方がよいと判断した。",{"type":25,"tag":43,"props":861,"children":863},{"id":862},"presen",[],{"type":25,"tag":345,"props":865,"children":867},{"className":866},[348],[868,869,882,883],{"type":30,"value":351},{"type":25,"tag":345,"props":870,"children":872},{"className":871},[355],[873],{"type":25,"tag":267,"props":874,"children":877},{"target":359,"rel":875,"href":876},[361],"https:\u002F\u002Fhb.afl.rakuten.co.jp\u002Fichiba\u002F26ba9fc2.c2fdf85a.26ba9fc3.8edde063\u002F_RTLink57021?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fbook%2F15832001%2F&link_type=hybrid_url&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJoeWJyaWRfdXJsIiwic2l6ZSI6IjI0MHgyNDAiLCJuYW0iOjEsIm5hbXAiOiJ1cCIsImNvbSI6MSwiY29tcCI6ImRvd24iLCJwcmljZSI6MSwiYm9yIjoxLCJjb2wiOjEsImJidG4iOjAsInByb2QiOjAsImFtcCI6ZmFsc2V9",[878],{"type":25,"tag":113,"props":879,"children":881},{"src":880},"https:\u002F\u002Fthumbnail.image.rakuten.co.jp\u002F@0_mall\u002Fbook\u002Fcabinet\u002F5870\u002F9784478105870.jpg?_ex=240x240",[],{"type":30,"value":351},{"type":25,"tag":345,"props":884,"children":886},{"className":885},[372],[887,888,898,899,918,919,956],{"type":30,"value":375},{"type":25,"tag":345,"props":889,"children":891},{"className":890},[379],[892],{"type":25,"tag":267,"props":893,"children":895},{"target":359,"rel":894,"href":876},[361],[896],{"type":30,"value":897},"プレゼン資料のデザイン図鑑 [ 前田 鎌利 ]",{"type":30,"value":375},{"type":25,"tag":345,"props":900,"children":902},{"className":901},[391],[903,906,908,911,913,916],{"type":25,"tag":43,"props":904,"children":905},{},[],{"type":30,"value":907},"※ コンテンツ作成では、伝わるデザインが大切です。",{"type":25,"tag":43,"props":909,"children":910},{},[],{"type":30,"value":912},"ハダノは、今の学校教育にはプレゼン指導が欠けていると思います。",{"type":25,"tag":43,"props":914,"children":915},{},[],{"type":30,"value":917},"この本は、豊富な実例をもとにプレゼンの極意が述べられていて、目からうろこでした。",{"type":30,"value":375},{"type":25,"tag":345,"props":920,"children":922},{"className":921},[407,408],[923,924,933,934,944,945,955],{"type":30,"value":411},{"type":25,"tag":345,"props":925,"children":926},{},[927],{"type":25,"tag":267,"props":928,"children":931},{"className":929,"target":359,"rel":930,"href":876},[418,419],[361],[932],{"type":30,"value":423},{"type":30,"value":425},{"type":25,"tag":345,"props":935,"children":936},{},[937],{"type":25,"tag":267,"props":938,"children":942},{"className":939,"target":359,"rel":940,"href":941},[418,432],[361],"https:\u002F\u002Faf.moshimo.com\u002Faf\u002Fc\u002Fclick?a_id=3539938&p_id=170&pc_id=185&pl_id=4062&url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2F4478105871",[943],{"type":30,"value":437},{"type":30,"value":425},{"type":25,"tag":345,"props":946,"children":947},{},[948],{"type":25,"tag":267,"props":949,"children":953},{"className":950,"target":359,"rel":951,"href":952},[418,445],[361],"https:\u002F\u002Fck.jp.ap.valuecommerce.com\u002Fservlet\u002Freferral?sid=3651993&pid=887947441&vc_url=https%3A%2F%2Fstore.shopping.yahoo.co.jp%2Fbookfan%2Fbk-4478105871.html%3Fsc_i%3Dshp_pc_search_itemlist_shsrg_title",[954],{"type":30,"value":450},{"type":30,"value":375},{"type":30,"value":351},{"type":25,"tag":43,"props":958,"children":959},{},[],{"type":25,"tag":961,"props":962,"children":963},"hr",{},[],{"type":25,"tag":26,"props":965,"children":966},{},[967],{"type":25,"tag":267,"props":968,"children":970},{"href":969},"\u002Farticles\u002Fsocsaga-1",[971],{"type":30,"value":972},"←前へ　プログラミングシステム「ソックサーガ」を作ってみた",{"title":8,"searchDepth":454,"depth":454,"links":974},[975,976,977],{"id":497,"depth":454,"text":500},{"id":586,"depth":454,"text":589},{"id":699,"depth":454,"text":699},"content:articles:socsaga-2.md","articles\u002Fsocsaga-2.md","articles\u002Fsocsaga-2",{"_path":982,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":983,"description":984,"category":985,"tag":986,"thumbnail":988,"createdAt":989,"updatedAt":990,"body":991,"_type":465,"_id":1366,"_source":467,"_file":1367,"_stem":1368,"_extension":470},"\u002Farticles\u002Fcloudide-1","クラウド統合開発環境でWebアプリの自校運用を","Webアプリの自校運用に最適なクラウド統合開発環境を探し求め、GlitchからReplitに乗り換えた話",[476],[16,479,478,987,480],"soclicker","replsaga1.jpg","2022\u002F6\u002F21","2022\u002F7\u002F1",{"type":22,"children":992,"toc":1356},[993,998,1001,1007,1012,1018,1031,1034,1039,1042,1048,1053,1067,1073,1085,1090,1095,1101,1188,1191,1196,1199,1205,1210,1214,1236,1240,1333,1336,1339,1347],{"type":25,"tag":26,"props":994,"children":995},{},[996],{"type":30,"value":997},"　この記事では、「Webアプリの自校運用に最適なクラウド統合開発環境を探し求め、Glitch（グリッチ）から Replit（リプリット）に乗り換えた話」を紹介します。",{"type":25,"tag":43,"props":999,"children":1000},{},[],{"type":25,"tag":47,"props":1002,"children":1004},{"id":1003},"学校教育にふさわしいのはwebアプリ",[1005],{"type":30,"value":1006},"学校教育にふさわしいのは、Webアプリ",{"type":25,"tag":26,"props":1008,"children":1009},{},[1010],{"type":30,"value":1011},"　「コンピュータ、ソフトなければただの箱」です。各校とも自校の機種用のアプリを導入します。教員や教育委員会担当者がソフトウェアにくわしくなければ、業者のいいなりです。多くの場合、ネイティブアプリを有料で導入することになります。アプリ自体は無料であってもインストール手数料を取られます。",{"type":25,"tag":53,"props":1013,"children":1015},{"id":1014},"ネイティブアプリとwebアプリの違い",[1016],{"type":30,"value":1017},"ネイティブアプリとWebアプリの違い",{"type":25,"tag":60,"props":1019,"children":1020},{},[1021,1026],{"type":25,"tag":64,"props":1022,"children":1023},{},[1024],{"type":30,"value":1025},"ネイティブアプリは各OS用に作られたアプリなので、機能・性能をとことん追求できる。OSごとに別々のアプリが必要。開発・登録にお金がかかり、インストールが必要。",{"type":25,"tag":64,"props":1027,"children":1028},{},[1029],{"type":30,"value":1030},"Webアプリはブラウザ上で動くので、ネットさえあればOK。一つのアプリで汎用的に使えるが、機能・性能はほどほど。お金をかけずに開発でき、インストールは不要。",{"type":25,"tag":43,"props":1032,"children":1033},{},[],{"type":25,"tag":26,"props":1035,"children":1036},{},[1037],{"type":30,"value":1038},"　このような違いを考えると、予算の乏しい学校ではWebアプリを中心にした方がよいことになります。業者はWebアプリからは利益が得られないので、いい顔はしないと思います。WebアプリはWeb上に配置され、そのアドレスを知っていればだれでも使うことができます。ほとんどの場合、無料です。",{"type":25,"tag":43,"props":1040,"children":1041},{},[],{"type":25,"tag":47,"props":1043,"children":1045},{"id":1044},"webアプリを自校運用するには",[1046],{"type":30,"value":1047},"Webアプリを自校運用するには",{"type":25,"tag":26,"props":1049,"children":1050},{},[1051],{"type":30,"value":1052},"　Webアプリの中には、データを蓄積するタイプもあります。すでにWeb上に配置されているWebアプリの場合、データ領域も無料で使わせてくれることがあります。ただし、容量に制限があったり、保存期間が決まっていたり、秘密が守られなかったり、突然サービスが終了したりします。「容量を気にせず、自在にデータを扱いたい」場合、一般的には自力でサーバーを立てて運用する必要があります。サーバーサイドプログラミングをはじめとする専門知識や費用が必要となり、手が出ません。",{"type":25,"tag":26,"props":1054,"children":1055},{},[1056,1058,1065],{"type":30,"value":1057},"　それを解決するのが、",{"type":25,"tag":267,"props":1059,"children":1062},{"href":1060,"rel":1061},"https:\u002F\u002Fvitalify.jp\u002Fapp-lab\u002Fvietnam-offshore\u002F20181128-saaspaas\u002F#2-1_BaasmBaas",[271],[1063],{"type":30,"value":1064},"🔗Paas(Platform as a Service)やBaas(Backend as a Service)などのクラウドサービス",{"type":30,"value":1066},"です。無料でもけっこう使えるものがあります。ハダノは、プログラミングにはクラウド統合開発環境、データベースにはFirebaseを使います。これらを使えば、Webアプリを自校運用することができます。大切な教育データを自校で管理できて、安心・便利です。生徒の作品やコードの管理はもちろん、ソックリッカーの先生名の削除も自分でできるのです。",{"type":25,"tag":53,"props":1068,"children":1070},{"id":1069},"クラウド統合開発環境のおすすめは",[1071],{"type":30,"value":1072},"クラウド統合開発環境のおすすめは？",{"type":25,"tag":26,"props":1074,"children":1075},{},[1076,1077,1083],{"type":30,"value":706},{"type":25,"tag":267,"props":1078,"children":1080},{"href":1079},"#masatolan",[1081],{"type":30,"value":1082},"🔗JavaScriptでいきなり機械学習を遊び倒す本",{"type":30,"value":1084}," では、２つのおすすめが紹介されていました。",{"type":25,"tag":26,"props":1086,"children":1087},{},[1088],{"type":30,"value":1089},"　Glitch（グリッチ） と Replit（リプリット） です。どちらも似た特徴を持っています。GlitchはJavaScriptに特化、Replitは50以上のプログラミング言語対応です。ハダノはJavaScript主体なので、はじめはGlitchを使っていました。ボタン一つでFirebaseにデプロイできるのもGlitchの魅力でした。",{"type":25,"tag":26,"props":1091,"children":1092},{},[1093],{"type":30,"value":1094},"　2022年になって状況が変わってきたので、自分なりにGlitchとReplitの特徴を整理してみました。",{"type":25,"tag":53,"props":1096,"children":1098},{"id":1097},"glitchとreplitの比較gとr",[1099],{"type":30,"value":1100},"GlitchとReplitの比較【GとR】",{"type":25,"tag":60,"props":1102,"children":1103},{},[1104,1119,1132,1145,1160,1175],{"type":25,"tag":64,"props":1105,"children":1106},{},[1107,1109],{"type":30,"value":1108},"プロジェクト名は、Gは自動でつき、Rは自分で設定する。",{"type":25,"tag":1110,"props":1111,"children":1112},"em",{},[1113],{"type":25,"tag":1114,"props":1115,"children":1116},"strong",{},[1117],{"type":30,"value":1118},"Rの方がわかりやすい。",{"type":25,"tag":64,"props":1120,"children":1121},{},[1122,1124],{"type":30,"value":1123},"どちらもしばらくアクセスしないとスリープする。Rは10秒程度で復帰するが、Gは時間がかかることが多い。エラーでリロードすることもしばしば。",{"type":25,"tag":1110,"props":1125,"children":1126},{},[1127],{"type":25,"tag":1114,"props":1128,"children":1129},{},[1130],{"type":30,"value":1131},"Rの方がストレスが少ない。",{"type":25,"tag":64,"props":1133,"children":1134},{},[1135,1137],{"type":30,"value":1136},"Firebase Hostingにデプロイすればスリープしなくなる。Gは以前はボタン一つでデプロイできるのを売りにしていたが、2022年になって画面デザインが変わってボタンが表示されなくなった。GlitchとFirebaseに報告したが、返答なし。TERMINAL欄にShellコマンドを打ち込めばデプロイできるが、きわめて煩雑。同じようにすれば ",{"type":25,"tag":1110,"props":1138,"children":1139},{},[1140],{"type":25,"tag":1114,"props":1141,"children":1142},{},[1143],{"type":30,"value":1144},"Rでもデプロイできるが、そこまでの必要性を感じない。",{"type":25,"tag":64,"props":1146,"children":1147},{},[1148,1150,1158],{"type":30,"value":1149},"ファイルやフォルダの扱いは両者で異なる。Gは一つずつしかアップロードできないし、圧縮ファイルや画像ファイルはassetsフォルダにはいる。カレントディレクトリに入れたり、解凍したりするためには、TERMINAL欄に複雑なコマンドを打ち込む必要がある。Rは、ローカルファイルをごそっとドラッグ＆ドロップするだけで、フォルダ階層を保ったままアップロードできる。",{"type":25,"tag":1110,"props":1151,"children":1152},{},[1153],{"type":25,"tag":1114,"props":1154,"children":1155},{},[1156],{"type":30,"value":1157},"Rの方がファイルの扱いが簡単。",{"type":30,"value":1159}," ただ、簡単すぎて生徒が違う階層に移動させてしまうおそれはある。",{"type":25,"tag":64,"props":1161,"children":1162},{},[1163,1165,1173],{"type":30,"value":1164},"画像の一覧を見たい場合、",{"type":25,"tag":1110,"props":1166,"children":1167},{},[1168],{"type":25,"tag":1114,"props":1169,"children":1170},{},[1171],{"type":30,"value":1172},"Gは、assetsフォルダの一覧表示があって便利。",{"type":30,"value":1174}," Rは、画像をimgフォルダなどに入れ、プログラムで一覧表示させるしかない。",{"type":25,"tag":64,"props":1176,"children":1177},{},[1178,1180],{"type":30,"value":1179},"PREVIEW欄（Output欄）は、両者ともルートのindex.htmlが表示され、コード編集欄とは連動しない。Gはルート以下のパスを打ち込めるが、Rは固定なので新しいウィンドウで開く必要がある。タブレットでの操作などを考えると、",{"type":25,"tag":1110,"props":1181,"children":1182},{},[1183],{"type":25,"tag":1114,"props":1184,"children":1185},{},[1186],{"type":30,"value":1187},"別ウィンドウでプレビューする方が現実的なので、GもRも差はない。",{"type":25,"tag":43,"props":1189,"children":1190},{},[],{"type":25,"tag":26,"props":1192,"children":1193},{},[1194],{"type":30,"value":1195},"……ということで、おおむねReplitの方が使いやすそうです。",{"type":25,"tag":43,"props":1197,"children":1198},{},[],{"type":25,"tag":47,"props":1200,"children":1202},{"id":1201},"replitに乗り換えよう",[1203],{"type":30,"value":1204},"Replitに乗り換えよう",{"type":25,"tag":26,"props":1206,"children":1207},{},[1208],{"type":30,"value":1209},"　Glitchは、アップデートのたびに使いにくくなり、方向性も微妙にずれてきていると感じます。1年以上使って慣れているという利点を捨ててでも、Replitに乗り換えようと決めました。",{"type":25,"tag":26,"props":1211,"children":1212},{},[1213],{"type":30,"value":724},{"type":25,"tag":26,"props":1215,"children":1216},{},[1217,1218,1225,1227,1234],{"type":30,"value":706},{"type":25,"tag":267,"props":1219,"children":1222},{"href":1220,"rel":1221},"https:\u002F\u002Fkyodx.com\u002Ftag\u002Fsocsaga",[271],[1223],{"type":30,"value":1224},"🔗ソックサーガ",{"type":30,"value":1226}," と ",{"type":25,"tag":267,"props":1228,"children":1231},{"href":1229,"rel":1230},"https:\u002F\u002Fkyodx.com\u002Ftag\u002Fsoclicker",[271],[1232],{"type":30,"value":1233},"🔗ソックリッカー",{"type":30,"value":1235}," のReplitによる自校運用も提案していきます。",{"type":25,"tag":43,"props":1237,"children":1239},{"id":1238},"masatolan",[],{"type":25,"tag":345,"props":1241,"children":1243},{"className":1242},[348],[1244,1245,1258,1259],{"type":30,"value":351},{"type":25,"tag":345,"props":1246,"children":1248},{"className":1247},[355],[1249],{"type":25,"tag":267,"props":1250,"children":1253},{"target":359,"rel":1251,"href":1252},[361],"https:\u002F\u002Fhb.afl.rakuten.co.jp\u002Fichiba\u002F26ba9fc2.c2fdf85a.26ba9fc3.8edde063\u002F_RTLink57019?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fbook%2F16500601%2F&link_type=hybrid_url&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJoeWJyaWRfdXJsIiwic2l6ZSI6IjI0MHgyNDAiLCJuYW0iOjEsIm5hbXAiOiJ1cCIsImNvbSI6MSwiY29tcCI6ImRvd24iLCJwcmljZSI6MSwiYm9yIjoxLCJjb2wiOjEsImJidG4iOjAsInByb2QiOjAsImFtcCI6ZmFsc2V9",[1254],{"type":25,"tag":113,"props":1255,"children":1257},{"src":1256},"https:\u002F\u002Fthumbnail.image.rakuten.co.jp\u002F@0_mall\u002Fbook\u002Fcabinet\u002F9041\u002F9784844379041.jpg?_ex=240x240",[],{"type":30,"value":351},{"type":25,"tag":345,"props":1260,"children":1262},{"className":1261},[372],[1263,1264,1274,1275,1294,1295,1332],{"type":30,"value":375},{"type":25,"tag":345,"props":1265,"children":1267},{"className":1266},[379],[1268],{"type":25,"tag":267,"props":1269,"children":1271},{"target":359,"rel":1270,"href":1252},[361],[1272],{"type":30,"value":1273},"JavaScriptでいきなり機械学習を遊び倒す本 （技術の泉シリーズ（NextPublishing）） [ まさとらん ]",{"type":30,"value":375},{"type":25,"tag":345,"props":1276,"children":1278},{"className":1277},[391],[1279,1282,1284,1287,1289,1292],{"type":25,"tag":43,"props":1280,"children":1281},{},[],{"type":30,"value":1283},"※ 最新WebサービスとJavaScript関連の情報を提供してくれる「まさとらん」さんの記事に、ハダノはいつも助けられています。",{"type":25,"tag":43,"props":1285,"children":1286},{},[],{"type":30,"value":1288},"この本も入口の部分をていねいに教えてくれます。",{"type":25,"tag":43,"props":1290,"children":1291},{},[],{"type":30,"value":1293},"GlitchとReplitに出会えてよかったと思います。",{"type":30,"value":375},{"type":25,"tag":345,"props":1296,"children":1298},{"className":1297},[407,408],[1299,1300,1309,1310,1320,1321,1331],{"type":30,"value":411},{"type":25,"tag":345,"props":1301,"children":1302},{},[1303],{"type":25,"tag":267,"props":1304,"children":1307},{"className":1305,"target":359,"rel":1306,"href":1252},[418,419],[361],[1308],{"type":30,"value":423},{"type":30,"value":425},{"type":25,"tag":345,"props":1311,"children":1312},{},[1313],{"type":25,"tag":267,"props":1314,"children":1318},{"className":1315,"target":359,"rel":1316,"href":1317},[418,432],[361],"https:\u002F\u002Faf.moshimo.com\u002Faf\u002Fc\u002Fclick?a_id=3539938&p_id=170&pc_id=185&pl_id=4062&url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2FB08L7LXNDC",[1319],{"type":30,"value":437},{"type":30,"value":425},{"type":25,"tag":345,"props":1322,"children":1323},{},[1324],{"type":25,"tag":267,"props":1325,"children":1329},{"className":1326,"target":359,"rel":1327,"href":1328},[418,445],[361],"https:\u002F\u002Fck.jp.ap.valuecommerce.com\u002Fservlet\u002Freferral?sid=3651993&pid=887949559&vc_url=https%3A%2F%2Fshopping.yahoo.co.jp%2Fsearch%3Ffirst%3D1%26ss_first%3D1%26ts%3D1662382850%26mcr%3D06c8cb50c083cad35f8b6072fe936496%26tab_ex%3Dcommerce%26sretry%3D0%26area%3D13%26astk%3D%26aq%3D%26oq%3D%26p%3DJavaScript%25E3%2581%25A7%25E3%2581%2584%25E3%2581%258D%25E3%2581%25AA%25E3%2582%258A%25E6%25A9%259F%25E6%25A2%25B0%25E5%25AD%25A6%25E7%25BF%2592%25E3%2582%2592%25E9%2581%258A%25E3%2581%25B3%25E5%2580%2592%25E3%2581%2599%25E6%259C%25AC%2B%25EF%25BC%2588%25E6%258A%2580%25E8%25A1%2593%25E3%2581%25AE%25E6%25B3%2589%25E3%2582%25B7%25E3%2583%25AA%25E3%2583%25BC%25E3%2582%25BA%25EF%25BC%2588NextPublishing%25EF%25BC%2589%25EF%25BC%2589%2B%255B%2B%25E3%2581%25BE%25E3%2581%2595%25E3%2581%25A8%25E3%2582%2589%25E3%2582%2593%2B%255D%26sc_i%3Dshp_pc_search_searchBox_2",[1330],{"type":30,"value":450},{"type":30,"value":375},{"type":30,"value":351},{"type":25,"tag":43,"props":1334,"children":1335},{},[],{"type":25,"tag":961,"props":1337,"children":1338},{},[],{"type":25,"tag":26,"props":1340,"children":1341},{},[1342],{"type":25,"tag":267,"props":1343,"children":1344},{"href":472},[1345],{"type":30,"value":1346},"→　ソックサーガの始め方【自校運用】",{"type":25,"tag":26,"props":1348,"children":1349},{},[1350],{"type":25,"tag":267,"props":1351,"children":1353},{"href":1352},"\u002Farticles\u002Fsoclicker-3",[1354],{"type":30,"value":1355},"→　ソックリッカーの始め方【自校運用】",{"title":8,"searchDepth":454,"depth":454,"links":1357},[1358,1361,1365],{"id":1003,"depth":454,"text":1006,"children":1359},[1360],{"id":1014,"depth":459,"text":1017},{"id":1044,"depth":454,"text":1047,"children":1362},[1363,1364],{"id":1069,"depth":459,"text":1072},{"id":1097,"depth":459,"text":1100},{"id":1201,"depth":454,"text":1204},"content:articles:cloudide-1.md","articles\u002Fcloudide-1.md","articles\u002Fcloudide-1",{"_path":969,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":1370,"description":1371,"category":1372,"tag":1373,"thumbnail":482,"createdAt":1374,"updatedAt":1375,"body":1376,"_type":465,"_id":2562,"_source":467,"_file":2563,"_stem":2564,"_extension":470},"プログラミングシステム「ソックサーガ」を作ってみた","ローコードで専門知識不要、個性が出せるので評価しやすく、共同制作もできるコンテンツプログラミングシステム",[476],[478,16,479,480,481],"2022\u002F5\u002F5","2022\u002F6\u002F29",{"type":22,"children":1377,"toc":2549},[1378,1383,1393,1396,1402,1417,1422,1434,1439,1442,1448,1453,1458,1461,1466,1471,1474,1505,1510,1515,1526,1529,1535,1541,1555,1560,1565,1568,1574,1577,1586,1591,1596,1599,1660,1663,1668,1673,1678,1681,1686,1689,1694,1697,1703,1706,1716,1721,1736,1739,1747,1756,1761,1773,1786,1823,1826,1831,1834,1847,1850,1856,1863,1881,1890,1896,2152,2158,2186,2192,2256,2262,2324,2329,2334,2338,2344,2359,2362,2367,2370,2375,2380,2438,2442,2535,2538,2541],{"type":25,"tag":26,"props":1379,"children":1380},{},[1381],{"type":30,"value":1382},"　この記事では、新しい中学校プログラミング教育に対応するシステム「ソックサーガ」を紹介します。ソックリッカー制作の経験を活かし、最新技術をふんだんに取りいれて作りました。ローコードで専門知識不要、個性が出せるので評価しやすく、共同制作もできるコンテンツプログラミングシステムをめざしました。未履修問題の解決に役立つかどうか、お確かめください。",{"type":25,"tag":26,"props":1384,"children":1385},{"style":330},[1386,1387],{"type":30,"value":333},{"type":25,"tag":267,"props":1388,"children":1390},{"href":1389},"#socsagademo",[1391],{"type":30,"value":1392}," お急ぎの方はこちらへ",{"type":25,"tag":43,"props":1394,"children":1395},{},[],{"type":25,"tag":47,"props":1397,"children":1399},{"id":1398},"中学校プログラミング教育は未履修問題が心配",[1400],{"type":30,"value":1401},"中学校プログラミング教育は未履修問題が心配！？",{"type":25,"tag":26,"props":1403,"children":1404},{},[1405,1407,1415],{"type":30,"value":1406},"　2021年度から中学校プログラミング教育が大きく変わりました。従来の「ディジタル作品づくり」から、「",{"type":25,"tag":1110,"props":1408,"children":1409},{},[1410],{"type":25,"tag":1114,"props":1411,"children":1412},{},[1413],{"type":30,"value":1414},"ネットワークを利用した双方向性のあるコンテンツのプログラミング",{"type":30,"value":1416},"による問題の解決」となったのです。",{"type":25,"tag":26,"props":1418,"children":1419},{},[1420],{"type":30,"value":1421},"　ネットワークがらみのプログラミングは、環境構築の困難さに加え、通信の遅れを考慮した非同期処理・競合解決、セキュリティ対策、OS・ブラウザ・言語の多様性への対応も必要となり、かなりハードルが高くなります。一般的にPHPなどの専用言語を用いたサーバーサイドプログラミングも必要になります。",{"type":25,"tag":26,"props":1423,"children":1424},{},[1425,1427],{"type":30,"value":1426},"→ ",{"type":25,"tag":267,"props":1428,"children":1431},{"href":1429,"rel":1430},"https:\u002F\u002Fwww.watch.impress.co.jp\u002Fkodomo_it\u002Fnews\u002F1159054.html",[271],[1432],{"type":30,"value":1433},"🔗 「ネットワーク」に「双方向」!?　倍増するプログラミングの学習内容に中学校の現場はどう対応するのか",{"type":25,"tag":26,"props":1435,"children":1436},{},[1437],{"type":30,"value":1438},"　これに対応する教材はたいへん少ないのが現状です。",{"type":25,"tag":43,"props":1440,"children":1441},{},[],{"type":25,"tag":53,"props":1443,"children":1445},{"id":1444},"双方向性のあるコンテンツとは",[1446],{"type":30,"value":1447},"双方向性のあるコンテンツとは？",{"type":25,"tag":26,"props":1449,"children":1450},{},[1451],{"type":30,"value":1452},"　双方向性のあるコンテンツとは、「入力に応答する、人間にとって意味のある情報の内容」です。ロボットを動かす情報はコンテンツではないし、プレゼンや動画などは双方向性のないコンテンツです。さらにコンテンツには、「デジタル化された文字，音声，静止画，動画などのデータを複合化」することが求められています。",{"type":25,"tag":26,"props":1454,"children":1455},{},[1456],{"type":30,"value":1457},"　現代、作品・製品の多くがクリエーターとエンジニアの協力によって生まれています。どちらかといえば、双方向性はエンジニアの比重が、コンテンツはクリエーターの比重が大きいと言えます。もし両者の敷居を低くすることができれば、作品の質は飛躍的に向上するはずです。",{"type":25,"tag":43,"props":1459,"children":1460},{},[],{"type":25,"tag":53,"props":1462,"children":1464},{"id":1463},"技術の教科書が抱える深刻な問題",[1465],{"type":30,"value":1463},{"type":25,"tag":26,"props":1467,"children":1468},{},[1469],{"type":30,"value":1470},"　技術の教科書には５つの実習例が出ていますが、どれも深刻な問題を抱えています。",{"type":25,"tag":43,"props":1472,"children":1473},{},[],{"type":25,"tag":60,"props":1475,"children":1476},{},[1477,1482,1497],{"type":25,"tag":64,"props":1478,"children":1479},{},[1480],{"type":30,"value":1481},"『チャット』・『タイピング練習』は、コンテンツが利用者まかせで貧弱であり、作り手から提供される情報がない。",{"type":25,"tag":64,"props":1483,"children":1484},{},[1485,1487,1495],{"type":30,"value":1486},"『ルート検索』・『英単語の発音チェック』は、魅力的なコンテンツではあるが、外部プログラムを呼び出して使っているだけであり、ほぼ何もプログラミングしていない。つまり、問題解決にプログラムを使っているが",{"type":25,"tag":1110,"props":1488,"children":1489},{},[1490],{"type":25,"tag":1114,"props":1491,"children":1492},{},[1493],{"type":30,"value":1494},"作ってはいない",{"type":30,"value":1496},"。",{"type":25,"tag":64,"props":1498,"children":1499},{},[1500,1502],{"type":30,"value":1501},"『防災地図』は、魅力的なコンテンツを双方向的に操作できる可能性があるという点ですばらしい。ただ、望む動作をさせようとした場合、直接 scriptタグ内を正確に書き換える必要がある。数時間の実習で理解して完成させるのは、生徒も教師も不可能に近い。\n",{"type":25,"tag":43,"props":1503,"children":1504},{},[],{"type":25,"tag":26,"props":1506,"children":1507},{},[1508],{"type":30,"value":1509},"　『防災地図』以外の4つのアプリは、Scratch の利用を前提としています。小学生のプログラミング体験にはよくても、本格的な問題解決には向きません。本命は、高速・柔軟で共有・再利用できるテキストプログラミングです。いずれにせよ、「アイディアを形にするプロセス」が難しすぎたり、簡単でも制約が多すぎたりすれば、どの生徒の作品も同じようなものになり、評価が困難になるでしょう。",{"type":25,"tag":26,"props":1511,"children":1512},{},[1513],{"type":30,"value":1514},"　このように、技術の教科書にある5つの実習例は、どれも深刻な問題を抱え、実施も評価も困難です。高い理想に現実が追い付かず、このままでは、ほとんどの中学校で「未履修問題」が発生してしまいます。ITエンジニアからも「教えられる先生はいるのか？という課題」が指摘されました。",{"type":25,"tag":26,"props":1516,"children":1517},{},[1518,1519],{"type":30,"value":1426},{"type":25,"tag":267,"props":1520,"children":1523},{"href":1521,"rel":1522},"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",[271],[1524],{"type":30,"value":1525},"🔗 中学校の技術科の教科書(情報分野)が進歩していた件",{"type":25,"tag":43,"props":1527,"children":1528},{},[],{"type":25,"tag":47,"props":1530,"children":1532},{"id":1531},"プログラミングシステムソックサーガで解決",[1533],{"type":30,"value":1534},"プログラミングシステム「ソックサーガ」で解決",{"type":25,"tag":53,"props":1536,"children":1538},{"id":1537},"ネットワークプログラミングはクラウド統合開発環境で解決",[1539],{"type":30,"value":1540},"ネットワークプログラミングは、クラウド統合開発環境で解決",{"type":25,"tag":26,"props":1542,"children":1543},{},[1544,1546,1553],{"type":30,"value":1545},"　ネットワークを利用したプログラミングをしようとすると、テキストエディタで編集→ローカルファイルとして保存→アップロード→ブラウザで確認という手順が必要となり、セキュリティの問題もからみ、煩雑でした。それを解決するのが ",{"type":25,"tag":267,"props":1547,"children":1550},{"href":1548,"rel":1549},"https:\u002F\u002Fwww.naka-sys.okinawa\u002Freplit-used\u002F",[271],[1551],{"type":30,"value":1552},"🔗Replit（リプリット）",{"type":30,"value":1554}," などの「クラウド統合開発環境」です。",{"type":25,"tag":26,"props":1556,"children":1557},{},[1558],{"type":30,"value":1559},"　Replit の上でWebアプリを動かすことで、ビジュアルに複合コンテンツを作り、最小限のコードで双方向性を持たせるシステムを作ってみました。それが SocSaga です。即、サーガ（冒険物語）にいざなう…との願いをこめました。",{"type":25,"tag":26,"props":1561,"children":1562},{},[1563],{"type":30,"value":1564},"　SocSaga を使えば、ローカルファイルを管理する必要がなく、環境構築の手間なしに直接Web上のファイルを編集でき、作品の中身と動作のロジックに集中することができます。　",{"type":25,"tag":43,"props":1566,"children":1567},{},[],{"type":25,"tag":53,"props":1569,"children":1571},{"id":1570},"コンテンツ作りはビジュアルhtmlエディタで解決",[1572],{"type":30,"value":1573},"コンテンツ作りは、ビジュアルHTMLエディタで解決",{"type":25,"tag":43,"props":1575,"children":1576},{},[],{"type":25,"tag":26,"props":1578,"children":1579},{},[1580,1585],{"type":25,"tag":113,"props":1581,"children":1584},{"src":1582,"alt":1583,"width":117},"\u002Fimg\u002Fsocsaga02.svg","socpad",[],{"type":30,"value":706},{"type":25,"tag":26,"props":1587,"children":1588},{},[1589],{"type":30,"value":1590},"　HTMLの文法をマスターするには、相当の時間がかかります。ビジュアルHTMLエディタSocPadの出番です。",{"type":25,"tag":26,"props":1592,"children":1593},{},[1594],{"type":30,"value":1595},"　ソックサーガ用SocPadは、ソックリッカー用SocPadを流用したものです。簡易ワープロ「ワードパッド」に似た操作で簡単です。見たとおりにHTML編集ができます。画像をReplitにアップロードして挿入したり、リンクを挿入したりできるので、メディアを複合化したホームページとして使えます。",{"type":25,"tag":43,"props":1597,"children":1598},{},[],{"type":25,"tag":60,"props":1600,"children":1601},{},[1602,1607,1618,1639],{"type":25,"tag":64,"props":1603,"children":1604},{},[1605],{"type":30,"value":1606},"[保存] ボタンでFirebaseのデータベースに保存するかわりに、[ソース] ボタンを使い、指示に従って直接HTMLファイル内に貼り付ける。HTMLの文法を知らなくても、見たとおりにHTML編集ができる。",{"type":25,"tag":64,"props":1608,"children":1609},{},[1610,1616],{"type":25,"tag":600,"props":1611,"children":1613},{"className":1612},[],[1614],{"type":30,"value":1615},"\u003Csection>\u003C\u002Fsection>",{"type":30,"value":1617}," を追加すれば、新規スライドが追加される。",{"type":25,"tag":64,"props":1619,"children":1620},{},[1621,1623,1629,1631,1637],{"type":30,"value":1622},"sectionタグ内（",{"type":25,"tag":600,"props":1624,"children":1626},{"className":1625},[],[1627],{"type":30,"value":1628},"\u003Csection> ",{"type":30,"value":1630},"と",{"type":25,"tag":600,"props":1632,"children":1634},{"className":1633},[],[1635],{"type":30,"value":1636}," \u003C\u002Fsection>",{"type":30,"value":1638}," の間の部分）にソースを貼り付けると、スライドが保存される。",{"type":25,"tag":64,"props":1640,"children":1641},{},[1642,1644,1650,1652,1658],{"type":30,"value":1643},"別のスライドを編集したいときは、 ",{"type":25,"tag":600,"props":1645,"children":1647},{"className":1646},[],[1648],{"type":30,"value":1649},"～id=\"henshu\">",{"type":30,"value":1651},"（番号）",{"type":25,"tag":600,"props":1653,"children":1655},{"className":1654},[],[1656],{"type":30,"value":1657},"\u003C\u002Fspan>\u003C!--　編集するスライド番号を入れる　-->",{"type":30,"value":1659},"　の番号部分を書き換え、スライド編集エリアの上の ↻ ボタンで更新する。更新すると、編集中のものは消えるので、ソースを貼り付けたか必ず確認すること。心配であれば、メモ帳などにもソースを貼り付けておくとよい。",{"type":25,"tag":43,"props":1661,"children":1662},{},[],{"type":25,"tag":26,"props":1664,"children":1665},{},[1666],{"type":30,"value":1667},"…以上を繰り返して、スライドを１枚１枚作ってゆきます。",{"type":25,"tag":26,"props":1669,"children":1670},{},[1671],{"type":30,"value":1672},"　スライドを作ったら、「編集エリア」の下の「実行エリア」でボタンを押してスライドを切り換えてみます。切り換え動作の設定は、次の『双方向性は、4色ボタン操作で解決』を見てください。",{"type":25,"tag":26,"props":1674,"children":1675},{},[1676],{"type":30,"value":1677},"　すべてのスライドの内容・動作が完成したら、スライド番号部分に ０ を入れます。「実行エリア」だけが表示されるようになるので、URLを公開して人に見せることができます。",{"type":25,"tag":43,"props":1679,"children":1680},{},[],{"type":25,"tag":26,"props":1682,"children":1683},{},[1684],{"type":30,"value":1685},"※ ソックリッカーでは、Firebase の Realtime Database にHTMLを保存し、Storage に画像をアップロードしました。ソックサーガでは、Firebase は使いません。授業配信アプリでは、ユーザーにソースコードや画像素材等を見せる必要はありません。しかし、プログラミング学習では、Replit上ではっきり見える形で取り扱わせる方がよいと考えました。sectionタグ内にソースをはりつけさせるのは、そのためなのです。",{"type":25,"tag":43,"props":1687,"children":1688},{},[],{"type":25,"tag":26,"props":1690,"children":1691},{},[1692],{"type":30,"value":1693},"※ ソックサーガは、「生徒にWebアプリを作らせる」Webアプリです。コンテンツ編集・アプリ実行のためのJavaScriptは、ルートのssscript.jsにまとめて、生徒にさわらせないようにしています。編集モードから実行モードへの切り替えを「スライド番号部分に 0 を入れる」方法にしたのは、評価や指導をやりやすくするためです。",{"type":25,"tag":43,"props":1695,"children":1696},{},[],{"type":25,"tag":53,"props":1698,"children":1700},{"id":1699},"双方向性は4色ボタン操作で解決",[1701],{"type":30,"value":1702},"双方向性は、4色ボタン操作で解決",{"type":25,"tag":43,"props":1704,"children":1705},{},[],{"type":25,"tag":26,"props":1707,"children":1708},{},[1709,1714],{"type":25,"tag":113,"props":1710,"children":1713},{"src":1711,"alt":1712,"width":117},"\u002Fimg\u002Fsocsaga04.svg","socsaga04",[],{"type":30,"value":1715},"　　",{"type":25,"tag":26,"props":1717,"children":1718},{},[1719],{"type":30,"value":1720},"　ソックリッカーでは、TVのリモコンと同じ4色ボタンで投票します。ソックサーガも4色ボタンで操作することにしました。",{"type":25,"tag":26,"props":1722,"children":1723},{},[1724,1726,1734],{"type":30,"value":1725},"　①動作は4色のボタンに割り当て、②飛び先は class属性で指定し、③必要に応じて動作を拡張する という ",{"type":25,"tag":1110,"props":1727,"children":1728},{},[1729],{"type":25,"tag":1114,"props":1730,"children":1731},{},[1732],{"type":30,"value":1733},"ローコードプログラミング",{"type":30,"value":1735}," の手法で行います。 「順\n次・分岐・反復」のスライド移動の基本命令は、 xgo(数); という関数で、数によって動作を変えるようにしています。",{"type":25,"tag":43,"props":1737,"children":1738},{},[],{"type":25,"tag":60,"props":1740,"children":1741},{},[1742],{"type":25,"tag":64,"props":1743,"children":1744},{},[1745],{"type":30,"value":1746},"sectionタグには、デフォルト(規定値)で、",{"type":25,"tag":26,"props":1748,"children":1749},{},[1750],{"type":25,"tag":600,"props":1751,"children":1753},{"className":1752},[],[1754],{"type":30,"value":1755},"data-nav=\"nav0:xp+'／'+xpsum; nav1:↑;xgo(-8); nav2:←;xgo(-1); nav3:→;xgo(1);nav4:↓;xgo(8);\"",{"type":25,"tag":26,"props":1757,"children":1758},{},[1759],{"type":30,"value":1760},"というカスタムデータ属性が設定されている。",{"type":25,"tag":60,"props":1762,"children":1763},{},[1764],{"type":25,"tag":64,"props":1765,"children":1766},{},[1767],{"type":25,"tag":600,"props":1768,"children":1770},{"className":1769},[],[1771],{"type":30,"value":1772},"\u003Csection data-nav=\"nav1:先頭へ;xgo(-9);\">",{"type":25,"tag":26,"props":1774,"children":1775},{},[1776,1778,1784],{"type":30,"value":1777},"とすれば、青色のボタン1 だけ、先頭スライドへ移動するよう変更され、他のボタンはデフォルトのままとなる。nav数 のあとに コロン(:)、ボタン文字 のあとセミコロン(;)、そのあとは 命令1;命令2;命令3;…のように各命令のあとにセミコロンを付ける。二重引用符の中で引用符を使うときは、",{"type":25,"tag":600,"props":1779,"children":1781},{"className":1780},[],[1782],{"type":30,"value":1783},"\"nav0:xp+'／'+～\"",{"type":30,"value":1785}," のように単一引用符を使うこと。",{"type":25,"tag":60,"props":1787,"children":1788},{},[1789,1810],{"type":25,"tag":64,"props":1790,"children":1791},{},[1792,1794,1800,1802,1808],{"type":30,"value":1793},"各章の始まりのスライドのsectionタグに ",{"type":25,"tag":600,"props":1795,"children":1797},{"className":1796},[],[1798],{"type":30,"value":1799},"class=\"hp\"",{"type":30,"value":1801}," を入れておけば、デフォルトのままでも「プレゼンテーション」は十分可能。class属性を複数指定する場合は、",{"type":25,"tag":600,"props":1803,"children":1805},{"className":1804},[],[1806],{"type":30,"value":1807},"class=\"hp bk3\"",{"type":30,"value":1809}," のように半角スペースをはさむこと。",{"type":25,"tag":64,"props":1811,"children":1812},{},[1813,1815,1821],{"type":30,"value":1814},"Replitのコードエディタは、行番号の右の ▼ をクリックすることで折りたたむことができる。",{"type":25,"tag":600,"props":1816,"children":1818},{"className":1817},[],[1819],{"type":30,"value":1820},"\u003Csection",{"type":30,"value":1822}," の行を折りたたんでスライドの中身を隠すと、属性の指定がやりやすい。",{"type":25,"tag":43,"props":1824,"children":1825},{},[],{"type":25,"tag":26,"props":1827,"children":1828},{},[1829],{"type":30,"value":1830},"　ソックサーガは、Web標準技術に基づいたテキストプログラミングで主要な機能をラップすることで、入口が広く奥が深い学習を実現しました。将来にわたり役立つ情報活用能力が培われるでしょう。",{"type":25,"tag":43,"props":1832,"children":1833},{},[],{"type":25,"tag":26,"props":1835,"children":1836},{},[1837,1839,1845],{"type":30,"value":1838},"※ ソックサーガは、プロトタイプを jQuery + Firebase Storage + Mery マクロ で作りました。2年間実際に授業してみて、問題点を洗い出し、Vue.js で書き直しました。「可能な限りWeb標準に従う」ことが大切と痛感しました。そのため、Vueのコンポーネントのかわりに「カスタムデータ属性」を使っています。",{"type":25,"tag":600,"props":1840,"children":1842},{"className":1841},[],[1843],{"type":30,"value":1844},"data-***=\"\"",{"type":30,"value":1846},"のような形式で、制作者が自由に指定できる属性です。独自のデータを入力したり、JavaScriptで処理したりできます。HTMLで定義されているグローバル属性なので、将来的に無駄になりません。",{"type":25,"tag":43,"props":1848,"children":1849},{},[],{"type":25,"tag":53,"props":1851,"children":1853},{"id":1852},"発展的な-ソックサーガ-の使い方-余裕ができたら",[1854],{"type":30,"value":1855},"発展的な ソックサーガ の使い方（※ 余裕ができたら……）",{"type":25,"tag":1857,"props":1858,"children":1860},"h4",{"id":1859},"スライドの背景を指定する",[1861],{"type":30,"value":1862},"① スライドの背景を指定する",{"type":25,"tag":60,"props":1864,"children":1865},{},[1866],{"type":25,"tag":64,"props":1867,"children":1868},{},[1869,1871,1879],{"type":30,"value":1870},"sectionタグのカスタムデータ属性に画像ファイルURLを指定。URLは、",{"type":25,"tag":1110,"props":1872,"children":1873},{},[1874],{"type":25,"tag":1114,"props":1875,"children":1876},{},[1877],{"type":30,"value":1878},"jisshu\u002Fimg フォルダ内の画像一覧",{"type":30,"value":1880},"の画像を右クリックし、[画像アドレスをコピー]で。",{"type":25,"tag":26,"props":1882,"children":1883},{},[1884],{"type":25,"tag":600,"props":1885,"children":1887},{"className":1886},[],[1888],{"type":30,"value":1889},"data-bg=\"https:\u002F\u002Fsocsaga.hadano3.repl.co\u002Fjisshu\u002Fimg\u002Fvenndiag.svg\"",{"type":25,"tag":1857,"props":1891,"children":1893},{"id":1892},"x関数x変数でボタン動作を拡張する",[1894],{"type":30,"value":1895},"② x関数・x変数でボタン動作を拡張する",{"type":25,"tag":60,"props":1897,"children":1898},{},[1899,1952,1973,1986,2134,2139],{"type":25,"tag":64,"props":1900,"children":1901},{},[1902,1904,1910,1912,1918,1920,1926,1928,1934,1936,1942,1944,1950],{"type":30,"value":1903},"メッセージ表示：",{"type":25,"tag":600,"props":1905,"children":1907},{"className":1906},[],[1908],{"type":30,"value":1909},"xmsg('メッセージ','入力文');",{"type":30,"value":1911}," 入力文を省略したら ",{"type":25,"tag":600,"props":1913,"children":1915},{"className":1914},[],[1916],{"type":30,"value":1917},"alert",{"type":30,"value":1919}," 、",{"type":25,"tag":600,"props":1921,"children":1923},{"className":1922},[],[1924],{"type":30,"value":1925},"'OK'",{"type":30,"value":1927},"なら ",{"type":25,"tag":600,"props":1929,"children":1931},{"className":1930},[],[1932],{"type":30,"value":1933},"confirm",{"type":30,"value":1935}," 、それ以外は ",{"type":25,"tag":600,"props":1937,"children":1939},{"className":1938},[],[1940],{"type":30,"value":1941},"prompt",{"type":30,"value":1943}," と同じ動作をする。戻り値は",{"type":25,"tag":600,"props":1945,"children":1947},{"className":1946},[],[1948],{"type":30,"value":1949},"xm",{"type":30,"value":1951},"に代入される。",{"type":25,"tag":64,"props":1953,"children":1954},{},[1955,1957,1963,1965,1971],{"type":30,"value":1956},"乱数：",{"type":25,"tag":600,"props":1958,"children":1960},{"className":1959},[],[1961],{"type":30,"value":1962},"xran(数);",{"type":30,"value":1964}," 1～数 までのランダムな自然数を作る。数を省略したら 6 がはいりサイコロに使える。戻り値は、",{"type":25,"tag":600,"props":1966,"children":1968},{"className":1967},[],[1969],{"type":30,"value":1970},"xr",{"type":30,"value":1972}," に。",{"type":25,"tag":64,"props":1974,"children":1975},{},[1976,1978,1984],{"type":30,"value":1977},"待機：",{"type":25,"tag":600,"props":1979,"children":1981},{"className":1980},[],[1982],{"type":30,"value":1983},"xwait(数);",{"type":30,"value":1985}," 数秒間待機してから次の命令を実行する。",{"type":25,"tag":64,"props":1987,"children":1988},{},[1989,1991,1997,1999,2005,2007,2013,2015,2021,2023,2029,2031,2037,2039,2045,2047,2053,2055,2061,2063,2069,2071,2077,2079,2085,2087,2093,2095,2101,2103,2109,2111,2117,2118,2124,2126,2132],{"type":30,"value":1990},"x変数：",{"type":25,"tag":600,"props":1992,"children":1994},{"className":1993},[],[1995],{"type":30,"value":1996},"xc",{"type":30,"value":1998},"【クリックしたボタン番号】、",{"type":25,"tag":600,"props":2000,"children":2002},{"className":2001},[],[2003],{"type":30,"value":2004},"xe",{"type":30,"value":2006},"【エネルギー】、",{"type":25,"tag":600,"props":2008,"children":2010},{"className":2009},[],[2011],{"type":30,"value":2012},"xf",{"type":30,"value":2014},"【ファイル名】、",{"type":25,"tag":600,"props":2016,"children":2018},{"className":2017},[],[2019],{"type":30,"value":2020},"xg",{"type":30,"value":2022},"【移動後のスライドナンバー】、",{"type":25,"tag":600,"props":2024,"children":2026},{"className":2025},[],[2027],{"type":30,"value":2028},"xp",{"type":30,"value":2030},"【現在のスライドナンバー】、\n",{"type":25,"tag":600,"props":2032,"children":2034},{"className":2033},[],[2035],{"type":30,"value":2036},"xpsum",{"type":30,"value":2038},"【スライド総数】、",{"type":25,"tag":600,"props":2040,"children":2042},{"className":2041},[],[2043],{"type":30,"value":2044},"xs",{"type":30,"value":2046},"【スコア】、",{"type":25,"tag":600,"props":2048,"children":2050},{"className":2049},[],[2051],{"type":30,"value":2052},"xt",{"type":30,"value":2054},"【ターン数】、",{"type":25,"tag":600,"props":2056,"children":2058},{"className":2057},[],[2059],{"type":30,"value":2060},"xu",{"type":30,"value":2062},"【ユーザーデータ】、",{"type":25,"tag":600,"props":2064,"children":2066},{"className":2065},[],[2067],{"type":30,"value":2068},"xuu[数]",{"type":30,"value":2070},"【ユーザーデータ配列】…状態フラグとして使うのに便利な関数がある｛",{"type":25,"tag":600,"props":2072,"children":2074},{"className":2073},[],[2075],{"type":30,"value":2076},"xuuon(数);",{"type":30,"value":2078}," フラグオン、",{"type":25,"tag":600,"props":2080,"children":2082},{"className":2081},[],[2083],{"type":30,"value":2084},"xuuoff(数);",{"type":30,"value":2086}," フラグオフ、",{"type":25,"tag":600,"props":2088,"children":2090},{"className":2089},[],[2091],{"type":30,"value":2092},"xuutog(数);",{"type":30,"value":2094}," フラグ反転｝、",{"type":25,"tag":600,"props":2096,"children":2098},{"className":2097},[],[2099],{"type":30,"value":2100},"xcc[数]",{"type":30,"value":2102},"【ボタン無効化配列】…",{"type":25,"tag":600,"props":2104,"children":2106},{"className":2105},[],[2107],{"type":30,"value":2108},"xuu",{"type":30,"value":2110},"と同様な関数で",{"type":25,"tag":600,"props":2112,"children":2114},{"className":2113},[],[2115],{"type":30,"value":2116},"xcc[0]",{"type":30,"value":1630},{"type":25,"tag":600,"props":2119,"children":2121},{"className":2120},[],[2122],{"type":30,"value":2123},"xcc[番]",{"type":30,"value":2125},"をオンでボタン無効化、",{"type":25,"tag":600,"props":2127,"children":2129},{"className":2128},[],[2130],{"type":30,"value":2131},"xccreset();",{"type":30,"value":2133}," ですべて有効化。",{"type":25,"tag":64,"props":2135,"children":2136},{},[2137],{"type":30,"value":2138},"JavaScriptの命令がほぼ使えるが、コード量節約のため、ショートハンドを使うとよい。 if文のかわりに→三項演算子…など。",{"type":25,"tag":64,"props":2140,"children":2141},{},[2142,2144,2150],{"type":30,"value":2143},"テストボタンの ",{"type":25,"tag":600,"props":2145,"children":2147},{"className":2146},[],[2148],{"type":30,"value":2149},"data-test = “命令文”",{"type":30,"value":2151}," を書き換えて、ボタン動作のテストができる。",{"type":25,"tag":1857,"props":2153,"children":2155},{"id":2154},"アニメーションで画面に躍動感を与える",[2156],{"type":30,"value":2157},"③ アニメーションで画面に躍動感を与える",{"type":25,"tag":60,"props":2159,"children":2160},{},[2161,2181],{"type":25,"tag":64,"props":2162,"children":2163},{},[2164,2166,2172,2174,2180],{"type":30,"value":2165},"x関数の ",{"type":25,"tag":600,"props":2167,"children":2169},{"className":2168},[],[2170],{"type":30,"value":2171},"xanim(オブジェクト);",{"type":30,"value":2173}," でスライドの中の要素を時間を追って変化させることができる。アニメーションオブジェクトの書式は、anime.js に従う。戻り値は、",{"type":25,"tag":600,"props":2175,"children":2177},{"className":2176},[],[2178],{"type":30,"value":2179},"xa",{"type":30,"value":1972},{"type":25,"tag":64,"props":2182,"children":2183},{},[2184],{"type":30,"value":2185},"Wick Editor というフリーのWebアプリで手軽に Gifアニメ を作ることができる。軽量化して使うとよい。",{"type":25,"tag":1857,"props":2187,"children":2189},{"id":2188},"同じフォルダのsocsagaファイルを-x関数で呼び出しクラス全員で共同制作する",[2190],{"type":30,"value":2191},"④ 同じフォルダのSocSagaファイルを x関数で呼び出し、クラス全員で共同制作する",{"type":25,"tag":60,"props":2193,"children":2194},{},[2195,2224],{"type":25,"tag":64,"props":2196,"children":2197},{},[2198,2200,2206,2208,2214,2216,2222],{"type":30,"value":2199},"game03.html のスライド10番で ",{"type":25,"tag":600,"props":2201,"children":2203},{"className":2202},[],[2204],{"type":30,"value":2205},"xborrow(game05);",{"type":30,"value":2207}," を実行すると、game05.htmlが呼び出され、",{"type":25,"tag":600,"props":2209,"children":2211},{"className":2210},[],[2212],{"type":30,"value":2213},"xback();",{"type":30,"value":2215}," で game03.html のスライド11番に戻る。",{"type":25,"tag":600,"props":2217,"children":2219},{"className":2218},[],[2220],{"type":30,"value":2221},"xbuy(game07);",{"type":30,"value":2223}," を実行すると、game07.htmlに接続する（戻ってこない）。",{"type":25,"tag":64,"props":2225,"children":2226},{},[2227,2233,2235,2241,2242,2248,2250],{"type":25,"tag":600,"props":2228,"children":2230},{"className":2229},[],[2231],{"type":30,"value":2232},"xborrow",{"type":30,"value":2234},"、",{"type":25,"tag":600,"props":2236,"children":2238},{"className":2237},[],[2239],{"type":30,"value":2240},"xback",{"type":30,"value":2234},{"type":25,"tag":600,"props":2243,"children":2245},{"className":2244},[],[2246],{"type":30,"value":2247},"xbuy",{"type":30,"value":2249}," で他のファイルを呼び出すとき、次の x変数の値は引き継がれる。→ ",{"type":25,"tag":600,"props":2251,"children":2253},{"className":2252},[],[2254],{"type":30,"value":2255},"xs　xe　xt　xu　xuu[]",{"type":25,"tag":1857,"props":2257,"children":2259},{"id":2258},"htmlファイル本体をカスタマイズhtmlcssjavascript-を書き換えする",[2260],{"type":30,"value":2261},"⑤ HTMLファイル本体をカスタマイズ（html・css・JavaScript を書き換え）する",{"type":25,"tag":60,"props":2263,"children":2264},{},[2265,2286,2299,2319],{"type":25,"tag":64,"props":2266,"children":2267},{},[2268,2270,2276,2278,2284],{"type":30,"value":2269},"文字の大きさ→ ",{"type":25,"tag":600,"props":2271,"children":2273},{"className":2272},[],[2274],{"type":30,"value":2275},"--fontvw: 1.5vw;",{"type":30,"value":2277},"　、",{"type":25,"tag":600,"props":2279,"children":2281},{"className":2280},[],[2282],{"type":30,"value":2283},"methods:",{"type":30,"value":2285}," に新しい x関数 を追加…など。",{"type":25,"tag":64,"props":2287,"children":2288},{},[2289,2291,2297],{"type":30,"value":2290},"スライド内容の一時的な変更は、x関数の ",{"type":25,"tag":600,"props":2292,"children":2294},{"className":2293},[],[2295],{"type":30,"value":2296},"xdisp(元の語,置換語,回数);",{"type":30,"value":2298}," で可能。",{"type":25,"tag":64,"props":2300,"children":2301},{},[2302,2304,2310,2311,2317],{"type":30,"value":2303},"SocPad以外で作ったHTMLは、原則SocPadでの編集はできないが、sectionタグ内に貼り付けることは可能。セキュリティ上の問題がなければ、iframeタグを使って他サイトのコンテンツを埋め込むことができる。",{"type":25,"tag":600,"props":2305,"children":2307},{"className":2306},[],[2308],{"type":30,"value":2309},"--framewidth",{"type":30,"value":1630},{"type":25,"tag":600,"props":2312,"children":2314},{"className":2313},[],[2315],{"type":30,"value":2316},"--frameheight",{"type":30,"value":2318},"で幅と高さを指定できる。",{"type":25,"tag":64,"props":2320,"children":2321},{},[2322],{"type":30,"value":2323},"無料ソフトでもCG作成ができる。Blender で3Dモデルを、Effekseer でビジュアルエフェクトを、Unity でアニメやゲームを作ることができる。Sketchfab などの CGコンテンツ共有サイトを利用することで、登録・公開ができる。",{"type":25,"tag":1857,"props":2325,"children":2327},{"id":2326},"このような発展的な使い方により",[2328],{"type":30,"value":2326},{"type":25,"tag":26,"props":2330,"children":2331},{},[2332],{"type":30,"value":2333},"　プレゼンだけでなく、クイズ・アドベンチャーゲーム・脱出ゲーム・すごろくなども作れます。",{"type":25,"tag":43,"props":2335,"children":2337},{"id":2336},"socsagademo",[],{"type":25,"tag":53,"props":2339,"children":2341},{"id":2340},"まとめ-ソックサーガ-で-双方向性のあるコンテンツのプログラミング-はバッチリ",[2342],{"type":30,"value":2343},"【まとめ】 ソックサーガ で 双方向性のあるコンテンツのプログラミング はバッチリ！",{"type":25,"tag":26,"props":2345,"children":2346},{},[2347,2349,2357],{"type":30,"value":2348},"　ソックリッカー制作の経験を活かし、最新技術をふんだんに取りいれて作ったのが ",{"type":25,"tag":1110,"props":2350,"children":2351},{},[2352],{"type":25,"tag":1114,"props":2353,"children":2354},{},[2355],{"type":30,"value":2356},"ソックサーガ",{"type":30,"value":2358},"です。ローコードなので専門知識不要、「ディジタル作品づくり」＋α で取り組めます。５つの実習例とは違い、個性が出せるので評価しやすく、共同制作もできます。",{"type":25,"tag":43,"props":2360,"children":2361},{},[],{"type":25,"tag":26,"props":2363,"children":2364},{},[2365],{"type":30,"value":2366},"　他教科や行事のまとめ・発表を兼ねたテーマにすれば、時間数不足も解消されます。無料で、自校運用できて安心で、かゆいところに手が届くシステムは、そうそうないと自負しています。",{"type":25,"tag":43,"props":2368,"children":2369},{},[],{"type":25,"tag":26,"props":2371,"children":2372},{},[2373],{"type":30,"value":2374},"※ ページが表示されなければ、リロード（↻更新）してください。",{"type":25,"tag":26,"props":2376,"children":2377},{},[2378],{"type":30,"value":2379},"※【注意】Internet Explorer 以外のモダンブラウザー（Chrome,Firefox,Safari,…）で、横置き画面で見ること！",{"type":25,"tag":60,"props":2381,"children":2382},{},[2383,2394,2405,2416,2427],{"type":25,"tag":64,"props":2384,"children":2385},{},[2386,2387],{"type":30,"value":1426},{"type":25,"tag":267,"props":2388,"children":2391},{"href":2389,"rel":2390},"https:\u002F\u002Fkyodx.com\u002Fsshelp.html",[271],[2392],{"type":30,"value":2393},"🔗 ソックサーガで作った、「ソックサーガの紹介Webアプリ」",{"type":25,"tag":64,"props":2395,"children":2396},{},[2397,2398],{"type":30,"value":1426},{"type":25,"tag":267,"props":2399,"children":2402},{"href":2400,"rel":2401},"https:\u002F\u002Fkyodx.com\u002Fimg\u002Fsocsaga.pdf",[271],[2403],{"type":30,"value":2404},"🔗 ソックサーガの紹介（印刷用）",{"type":25,"tag":64,"props":2406,"children":2407},{},[2408,2409],{"type":30,"value":1426},{"type":25,"tag":267,"props":2410,"children":2413},{"href":2411,"rel":2412},"https:\u002F\u002Fkyodx.com\u002Fjisshu\u002Ftango.html",[271],[2414],{"type":30,"value":2415},"🔗 「英単語の発音チェックアプリ+AI作曲」",{"type":25,"tag":64,"props":2417,"children":2418},{},[2419,2420],{"type":30,"value":1426},{"type":25,"tag":267,"props":2421,"children":2424},{"href":2422,"rel":2423},"https:\u002F\u002Fkyodx.com\u002Fjisshu\u002Ftango2.html",[271],[2425],{"type":30,"value":2426},"🔗 「英単語の発音チェックアプリ+AI作曲」Ver2",{"type":25,"tag":64,"props":2428,"children":2429},{},[2430,2431],{"type":30,"value":1426},{"type":25,"tag":267,"props":2432,"children":2435},{"href":2433,"rel":2434},"https:\u002F\u002Fkyodx.com\u002Fjisshu\u002Fspellquest.html",[271],[2436],{"type":30,"value":2437},"🔗 「英単語ゲーム SPELL QUEST」",{"type":25,"tag":43,"props":2439,"children":2441},{"id":2440},"js278",[],{"type":25,"tag":345,"props":2443,"children":2445},{"className":2444},[348],[2446,2447,2460,2461],{"type":30,"value":351},{"type":25,"tag":345,"props":2448,"children":2450},{"className":2449},[355],[2451],{"type":25,"tag":267,"props":2452,"children":2455},{"target":359,"rel":2453,"href":2454},[361],"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",[2456],{"type":25,"tag":113,"props":2457,"children":2459},{"src":2458},"https:\u002F\u002Fthumbnail.image.rakuten.co.jp\u002F@0_mall\u002Fbook\u002Fcabinet\u002F3682\u002F9784297103682.jpg?_ex=240x240",[],{"type":30,"value":351},{"type":25,"tag":345,"props":2462,"children":2464},{"className":2463},[372],[2465,2466,2476,2477,2496,2497,2534],{"type":30,"value":375},{"type":25,"tag":345,"props":2467,"children":2469},{"className":2468},[379],[2470],{"type":25,"tag":267,"props":2471,"children":2473},{"target":359,"rel":2472,"href":2454},[361],[2474],{"type":30,"value":2475},"JavaScriptコードレシピ集 スグに使えるテクニック278　[ 池田泰延 ]",{"type":30,"value":375},{"type":25,"tag":345,"props":2478,"children":2480},{"className":2479},[391],[2481,2484,2486,2489,2491,2494],{"type":25,"tag":43,"props":2482,"children":2483},{},[],{"type":30,"value":2485},"※ Web標準技術は時代とともに進歩しています。",{"type":25,"tag":43,"props":2487,"children":2488},{},[],{"type":30,"value":2490},"ハダノは、jQueryからVue.jsに移行したとき、「イマドキのJavaScriptはこう書くんだ！」とカルチャーショックを受けました。",{"type":25,"tag":43,"props":2492,"children":2493},{},[],{"type":30,"value":2495},"この本は、実践的な最新テクニックを網羅的に学ぶのに役立ちます。",{"type":30,"value":375},{"type":25,"tag":345,"props":2498,"children":2500},{"className":2499},[407,408],[2501,2502,2511,2512,2522,2523,2533],{"type":30,"value":411},{"type":25,"tag":345,"props":2503,"children":2504},{},[2505],{"type":25,"tag":267,"props":2506,"children":2509},{"className":2507,"target":359,"rel":2508,"href":2454},[418,419],[361],[2510],{"type":30,"value":423},{"type":30,"value":425},{"type":25,"tag":345,"props":2513,"children":2514},{},[2515],{"type":25,"tag":267,"props":2516,"children":2520},{"className":2517,"target":359,"rel":2518,"href":2519},[418,432],[361],"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",[2521],{"type":30,"value":437},{"type":30,"value":425},{"type":25,"tag":345,"props":2524,"children":2525},{},[2526],{"type":25,"tag":267,"props":2527,"children":2531},{"className":2528,"target":359,"rel":2529,"href":2530},[418,445],[361],"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",[2532],{"type":30,"value":450},{"type":30,"value":375},{"type":30,"value":351},{"type":25,"tag":43,"props":2536,"children":2537},{},[],{"type":25,"tag":961,"props":2539,"children":2540},{},[],{"type":25,"tag":26,"props":2542,"children":2543},{},[2544],{"type":25,"tag":267,"props":2545,"children":2546},{"href":472},[2547],{"type":30,"value":2548},"次へ→　ソックサーガの始め方【自校運用】",{"title":8,"searchDepth":454,"depth":454,"links":2550},[2551,2555],{"id":1398,"depth":454,"text":1401,"children":2552},[2553,2554],{"id":1444,"depth":459,"text":1447},{"id":1463,"depth":459,"text":1463},{"id":1531,"depth":454,"text":1534,"children":2556},[2557,2558,2559,2560,2561],{"id":1537,"depth":459,"text":1540},{"id":1570,"depth":459,"text":1573},{"id":1699,"depth":459,"text":1702},{"id":1852,"depth":459,"text":1855},{"id":2340,"depth":459,"text":2343},"content:articles:socsaga-1.md","articles\u002Fsocsaga-1.md","articles\u002Fsocsaga-1",{"_path":2566,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":2567,"description":2568,"category":2569,"tag":2570,"thumbnail":2571,"createdAt":2572,"updatedAt":2573,"body":2574,"_type":465,"_id":2723,"_source":467,"_file":2724,"_stem":2725,"_extension":470},"\u002Farticles\u002Fprivacy-policy","プライバシーポリシー","教育DXブログのプライバシーポリシー・免責事項等",[476],[16],"keyhuman.png","2022\u002F4\u002F24","2022\u002F7\u002F20",{"type":22,"children":2575,"toc":2714},[2576,2580,2585,2590,2595,2600,2605,2610,2615,2629,2632,2637,2642,2647,2652,2655,2660,2665,2670,2675,2678,2683,2688,2711],{"type":25,"tag":47,"props":2577,"children":2578},{"id":2567},[2579],{"type":30,"value":2567},{"type":25,"tag":53,"props":2581,"children":2583},{"id":2582},"個人情報の利用目的",[2584],{"type":30,"value":2582},{"type":25,"tag":26,"props":2586,"children":2587},{},[2588],{"type":30,"value":2589},"　当ブログでは、お問い合わせや記事へのコメントの際、名前やメールアドレス等の個人情報を入力いただく場合があります。",{"type":25,"tag":26,"props":2591,"children":2592},{},[2593],{"type":30,"value":2594},"　取得した個人情報は、お問い合わせに対する回答や必要な情報を電子メールなどでご連絡する場合に利用させていただくものであり、これらの目的以外では利用いたしません。",{"type":25,"tag":26,"props":2596,"children":2597},{},[2598],{"type":30,"value":2599},"　ブログ内の記事での引用については、許可された範囲を超えて行うことはありません。",{"type":25,"tag":53,"props":2601,"children":2603},{"id":2602},"広告について",[2604],{"type":30,"value":2602},{"type":25,"tag":26,"props":2606,"children":2607},{},[2608],{"type":30,"value":2609},"　当ブログでは、第三者配信の広告サービス（Googleアドセンス）を利用しており、ユーザーの興味に応じた商品やサービスの広告を表示するため、クッキー（Cookie）を使用しております。",{"type":25,"tag":26,"props":2611,"children":2612},{},[2613],{"type":30,"value":2614},"　クッキーを使用することで当サイトはお客様のコンピュータを識別できるようになりますが、お客様個人を特定できるものではありません。",{"type":25,"tag":26,"props":2616,"children":2617},{},[2618,2620,2627],{"type":30,"value":2619},"　Cookieを無効にする方法やGoogleアドセンスに関する詳細は ",{"type":25,"tag":267,"props":2621,"children":2624},{"href":2622,"rel":2623},"https:\u002F\u002Fpolicies.google.com\u002Ftechnologies\u002Fads?gl=jp",[271],[2625],{"type":30,"value":2626},"🔗「広告 – ポリシーと規約 – Google」",{"type":30,"value":2628}," をご確認ください。",{"type":25,"tag":43,"props":2630,"children":2631},{},[],{"type":25,"tag":47,"props":2633,"children":2635},{"id":2634},"免責事項",[2636],{"type":30,"value":2634},{"type":25,"tag":26,"props":2638,"children":2639},{},[2640],{"type":30,"value":2641},"　当ブログからのリンクやバナーなどで移動したサイトで提供される情報、サービス等について一切の責任を負いません。",{"type":25,"tag":26,"props":2643,"children":2644},{},[2645],{"type":30,"value":2646},"　また当ブログのコンテンツ・情報について、できる限り正確な情報を提供するように努めておりますが、正確性や安全性を保証するものではありません。情報が古くなっていることもあります。",{"type":25,"tag":26,"props":2648,"children":2649},{},[2650],{"type":30,"value":2651},"　当ブログに掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。",{"type":25,"tag":43,"props":2653,"children":2654},{},[],{"type":25,"tag":47,"props":2656,"children":2658},{"id":2657},"著作権について",[2659],{"type":30,"value":2657},{"type":25,"tag":26,"props":2661,"children":2662},{},[2663],{"type":30,"value":2664},"　当ブログで掲載している文章や画像などにつきましては、著作権の対象となっています。",{"type":25,"tag":26,"props":2666,"children":2667},{},[2668],{"type":30,"value":2669},"　「私的使用のための複製」や「引用」など著作権法上認められた場合を除き、無断で複製・転用することはできません。",{"type":25,"tag":26,"props":2671,"children":2672},{},[2673],{"type":30,"value":2674},"　当ブログは著作権や肖像権の侵害を目的としたものではありません。著作権や肖像権に関して問題がありましたら、お問い合わせフォームよりご連絡ください。迅速に対応いたします。",{"type":25,"tag":43,"props":2676,"children":2677},{},[],{"type":25,"tag":47,"props":2679,"children":2681},{"id":2680},"リンクについて",[2682],{"type":30,"value":2680},{"type":25,"tag":26,"props":2684,"children":2685},{},[2686],{"type":30,"value":2687},"　当ブログへのリンクは、営利、非営利を問わず原則自由です。但し、以下のいずれかに該当する或いはそのおそれがあるリンクはご遠慮ください。",{"type":25,"tag":60,"props":2689,"children":2690},{},[2691,2696,2701,2706],{"type":25,"tag":64,"props":2692,"children":2693},{},[2694],{"type":30,"value":2695},"誹謗中傷、信用失墜、当ブログの運営を妨害する場合",{"type":25,"tag":64,"props":2697,"children":2698},{},[2699],{"type":30,"value":2700},"財産、プライバシー、肖像権その他の権利を侵害する場合",{"type":25,"tag":64,"props":2702,"children":2703},{},[2704],{"type":30,"value":2705},"法令又は公序良俗に反する場合",{"type":25,"tag":64,"props":2707,"children":2708},{},[2709],{"type":30,"value":2710},"情報発信元を誤認させるような形でリンクを張る場合",{"type":25,"tag":43,"props":2712,"children":2713},{},[],{"title":8,"searchDepth":454,"depth":454,"links":2715},[2716,2720,2721,2722],{"id":2567,"depth":454,"text":2567,"children":2717},[2718,2719],{"id":2582,"depth":459,"text":2582},{"id":2602,"depth":459,"text":2602},{"id":2634,"depth":454,"text":2634},{"id":2657,"depth":454,"text":2657},{"id":2680,"depth":454,"text":2680},"content:articles:privacy-policy.md","articles\u002Fprivacy-policy.md","articles\u002Fprivacy-policy",1791852928719]