カテゴリー: REPORT

今年最後のジャンプアップコースです。

今回の講義は、WEBサイトの基本構成、JavaScriptの基礎学習の２つを行いました。

まずはWEBサイトの基本構成についてです。

WEBサイトを作成するために必要なものは、３つあります。

HTML、CSS、JavaScriptです。

HTMLは、ページの骨組みとなり、テキストや画像などの情報を入れることができます。

CSSは、ページの装飾として、色や大きさ、余白などを設定することが可能です。

JavaScriptは、ページの動きやHTML/CSS 以外の処理全般を行うことができるプログラミング言語です。

ちなみに、Webサービスと相性の良いJavaScriptに使用することで、以下のような機能を持たせることができます。
　
　・Amazonなどのショッピングサイトの「カート追加」機能
　
　・プロフィールサイトや質問ページなどの「お問合せフォーム」機能
　
　・ネット番組や天気情報サイトの「リアルタイム」機能

エンタ先生からのレクチャーを熱心に聴きながら、ジャンプアップ生は普段目にしているWebサイトの構成について理解を深めていました。

続いて、プロゲートを用いてJavaScriptの基礎学習を行いました。

主に、基本的な文法や変数の使い方、条件分岐を学びました。

具体的には、同じような処理を何度も繰り返すのに便利な「繰り返し処理」や、複数の値をまるで1つのデータのように取り扱うことができるようになる「配列」等について学びました。

「繰り返し処理」や「配列」を利用することで、より短いコードで多くのデータを取り扱い、実行することができます。これらは、プログラミングをする上で基礎的な考え方になります。

~~~~~~~~~~

〜 事例紹介 〜

演算式は以下のように問題が出されます。

// 5と3を足した値を出力してください

console.log(5 + 3);

// 8と4をかけた結果を出力してください

console.log(8 * 4);

// 24を4で割った結果を出力してください

console.log(24 / 4);

// 7を2で割った余りを出力してください

console.log(7 % 2);

コンソールに計算した答えが出てきます。

~~~~~~~~~~

集中して、コードを書く姿が見られていました。

次回は、実際にJavaScriptを使ってアプリケーションを作ります。

徐々にレベルアップしていくジャンプアップ生。

この調子で挑戦していきましょう！

早いもので、もう12月。今年も残り1ヶ月となりました。

部活や学校の学期末テスト対策など、夢アカ生も師走の慌ただしさの中、今日も熱心にプログラミングに取り組んでいます。

では、さっそくレポートしていきます。

WEBコースでは、前回に引き続き、簡易計算機２パターンの開発です。

まず１つめの「簡易計算機」。

この計算機は、AとBの項目に数字を入力し、四則計算のボタンを押すだけで計算結果が出てきます。

開発のポイントは、ボタンを押した際にどのような条件式を使えば、正しい結果になるかを筋道を立てて進めることです。完成イメージは、以下の通り。

２つめの「簡易計算機 ver2.0」。

この計算機は、いつも私たちが使っている電卓に非常に近いです。

数字や四則計算のボタンを押し、四則計算ができるようになります。

開発のポイントは、CSSを使い綺麗なレイアウトを考えるのはもちろん、ボタンを押したら数字が表示されるように設定し、更に四則計算を行う処理が進むようにプログラミングしていきます。とても難易度が高い取り組みです。完成イメージは、以下の通り。

夢アカ生は、これまで学んだ「HTML、CSS、JavaScript」を使い、簡易計算機の完成を目指します。

完成間近。もうひと頑張り！

続いて、Unityコースです。

Unityコースでは、今日から２Dゲームの開発がスタートしました。

画面上の車を動かして、ゴールまで進めるゲーム開発に取り組みます。

開発を始める前に、すーさん先生から「演算計算」「if文」の解説がありました。

＝＝＝＝＝＝＝＝

〜演算計算〜

演算子は、プログラミング内で使用する記号のことです。

算数でも、足す(＋)や引く(−)などの記号を使用するように、プログラミングでも用途に応じて使う記号が決まっています。演算子を使うことで、値の計算や値の代入、値の比較などをすることができます。

〜if文〜

if文は主に、2つの値の大小関係や、等しい・等しくないなどの条件により処理を変える場合に使われます。条件式が「true」の場合には、{ }内の処理を行います。「false」の場合には、if文のブロック外に出るか、もしくは「else」句の後の{ }内の処理を行います。

以下のように記述します。

if (条件Ａ)

{

　　　// 実行Ａ

}

else if (条件Ｂ)

{

　　　// 実行Ｂ

}

else

{

　　　// 実行Ｃ

}

＝＝＝＝＝＝＝＝＝

演算計算やif文は、Unityを使っていく上で必要な重要構文になります。これを応用すると、Aボタンを押すとキャラクターがジャンプするような動きができるようになります。

すーさん先生の解説を聞いて、いざ実践。

教科書を参考に、各々ミニゲームを作成してみました。

Rくんの感想です。

〜〜〜〜〜〜〜〜〜〜〜〜

今日は教科書を見ながら、新しいゲームの骨組みを作りました。

内容は、車を操作してゴールを目指すアクションゲームです。

チームのみんなも順調に進んでいて、メンバーで見せ合うのが楽しみです。

〜〜〜〜〜〜〜〜〜〜〜〜

3Dゲーム開発から、2Dゲーム開発へ。

作れるゲームの幅が少しづつ広がっていきますね。

今日から、実際にHTMLやCSSをって、自己紹介のWebサイト製作に挑戦します。

まずは、開発のための環境設定。

Microsoft が作っている「Visual Studio Code」と呼ばれるコードエディターをパソコンにインストールしました。

＝＝＝＝＝＝

コードエディターとは、コード（HTML や CSS などのプログラム）を編集するために使うアプリケーションです。メモ帳の高機能版のようなもので、プロのエンジニアも使っており、有料版もありますがほとんどは無料で使うことができます。

＝＝＝＝＝＝

開発環境が整ったら、コーディングです。

メンバーは、コーディングは初めてです。

教科書を見ながら、コーディングする姿勢は、真剣そのもの。

スペルミスでのエラーやタグ名称の書き間違えなど、立ち止まることも度々。

エンタ先生のサポートを受けて、課題にしっかり取り組めました！

Webコースでは、Javascriptの応用とCSSフレームワークについて学びました。

今回は、簡易計算機の開発に挑戦です！

みっつ先生、今日もよろしくお願い致します。

簡単計算機の開発を通して、より実践的な開発を学びます。

開発で使う言語は、HTML、CSS、JavaScriptと今まで学んだ言語です。

何もないところからWebアプリケーションを作る際には、自分で完成までの手順などを設計する必要があります。今回は、その練習として「こんな場合はどうするか」という想定される課題への対応策を考えました。

夢アカ生は、これまで学んだことを復習しながら、さらに、分からないことについては自分で調べながら開発に取り組んでました。

その後は、CSSフレームワークについて学びました。

CSSフレームワークは、デザインやレイアウトのベースを簡単に作ることができるライブラリーです。見た目の美しさを整えるデザインのベース部分をCSSフレームワークに任せてしまうことで、作業時間の短縮などのメリットが期待できます。

今回は、Blumaと呼ばれるCSSフレームワークを利用。

Blumaを利用すると、より早く、短いコードでデザインが整ったサイトができるようになります。

メンバーは、デザイン性という観点から自分のプロフィールサイトへのBluma応用に挑戦していました。

続いて、Unityコースです。

Unityコースでは、自分で作ったオリジナルゲームの最後のチェックを行いました。

メンバーのこだわりポイントは、まちまち。

ゴールシーンにより動きを出したり、コースの難易度を絶妙に調整したり、主人公のキャラクターを変更したり・・・と作り手の個性が出てきました。

最後に、発表会を行いました。

長めのコースでゲーム行程を開発したメンバーは、ユーザーが飽きないように行程の途中に小さなトラップを何度も仕掛け、工夫していました。

他のメンバーも、短いコースで難易度をあげるなど、ユーザーに「またやりたい！」と思わせるちょっとしたひねりが加えられ、初のゲーム開発とは思えないほど、しっかり仕上げました。

次回は、別のゲーム開発に挑戦してきます！

11月。

7月からスタートした横須賀プログラミングアカデミー。通常講習は、今日で４回目です。

季節も変わりつつあります。

Webコースは、Javascriptの知識を更に深めるため、今回はおみくじアプリの開発を行いました。

Javascriptを使うと、画像が横に動くスライダーが設置できたり、マウスの動きにあわせて動くコンテンツができるようになったり、ポップアップウィンドウができたり。

Javascriptは、Webページでの動的コンテンツに欠かせないスクリプト言語で、この言語を学ぶとより複雑なことができるようになります。

今回は、I君にインタビュー。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝

-今日やったことは何ですか？-

Iくん）

今日は、JavaScriptを学びました。おみくじやジャンケンをつくるプログラミングを通して、変数、if関数など、多くのことを学びました。なかなかうまく動かなかったこともありましたが、思い通りのものが作れた時は、大きな満足感を得ることが出来ました。

-つまずいたことはありましたか？-

Iくん）

JavaScriptは、全体像をあらかじめイメージし、全体の中の要素どうしの関わり方を考えて、コードをかいていく必要があり、うまく繋がらないコードをかいてしまうと、思うように実行されない。なので、全体像を正しくイメージして、正しく組み立てることに苦労しました。自分ではうまくできていると思っても、コードを分けて考えなくてはならなかったり・・・。大変でした。

-成功したこと／解決できたことは？-

Iくん）
自分のプロフィールページを、今回学んだことを生かして少しだけつくり変えてみました。自分のWebサイトに動きが出て、より面白いものが出来ました。また、分からないところは先生に聞くことで、うまくいかない理由が分かり、思い通りに動かす工夫ができたので、良かったです。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

変数やif関数を利用するなど、本格的な分野に入りました。

Webコースのメンバーは、意欲的にJavaScriptの利用し、いろんな動きを試してみることができました。

続いてはUnityコースです。

本日も黙々と開発を進めました。

開発は試行錯誤の繰り返し。

ゲーム製作という視点から、Unityちゃんが上手く動かずにエラーになったものを修正したり、自作ゲームのコースの完成度をあげるためにいろんな方法を試したり。

さらに、一歩進んだユーザー視点に立って、このゲームは難しすぎないか、また簡単すぎないか、とあれこれ試したり。

みんなのオリジナルゲームの出来上がりが、とても楽しみです。

UnityコースのM君に、現在のゲームの進捗と感想をインタビュー。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝

Mくん）

今日は、主にステージ作成をしました。ステージを作成することで、ようやくゲームとして楽しめるものになりました。そして、ちゃんと最後までできたことに、とても嬉しくなりました。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝

両コースとも、講習を重ねるごとにアカデミー生同士、分からないところを互いに教え合ったり、一緒に悩んだりする場面が出てきました。共に学べる人がいるって、なんとなく心強いですね！

さぁ、本日もがんばっていきましょう。

まずは、Webコース。

メンバーによって進むスピードが違うため、個人での開発がメインとなりました。

前回に引き続き、GitHubPagesを使い、ブラウザー上にプロフィールページをアップするメンバー。

より魅力的なプロフィールページを目指してカスタマイズするメンバー。

トライアンドエラーを繰り返しながらも、途中で投げ出すことなく取り組みました。

今日を振り返り、Nさんの感想です。

ーーーーーーーーーーーー

今日は、何もない状態から、自分の自己紹介ページを世界の人が見れるようにするまでのターンを、他の人から遅れてる分、頑張ってやりました。最後の最後で、ユーザー名をミスって、（ブラウザー上に）あげることのができなかったのですが、ネットで調べたり、先生に聞いたりして、解決策を見つけ、知らなかったパソコンのシステムまで知ることができて良かったです。

ーーーーーーーーーーーー

Nさんの、分からないことを分からないままで放置しないで、自分で調べて解決する姿、とても素晴らしいです。

続いては、Unityコースです。

Unityコースでは、前回からUnityちゃんを動かすミニゲームの開発がスタートしています。

今回から、教科書を活用して学習開始です。
個々の取り組みの中で、どうしていいか分からず止まっていた手が、この教科書からのヒントで、動き始めることに期待！

UnityコースのNくんに、インタビュー。

〜〜〜〜〜〜〜〜〜〜

–今日やったことは何ですか？

Nくん）

&nbspUnityの基礎をサイトを見ながら進めて行きました。

–つまずいたところはどこですか？

Nくん）

&nbspC#のコードを書いているときに、大文字と小文字を間違えてエラーが大量に出たことです。

–成功したこと/解決できたことは？

Nくん）

&nbsp大量に出たエラーをすべて解決できました。基礎を半分終わらせられたことがよかったです。

〜〜〜〜〜〜〜〜〜〜

自分の考えや思いを表現するために、どんな動きの組み合わせが必要で、その動きは何と何を組み合わせることで達成できるのか、今日も一生懸命考え、実践しました。

始めにゴールを設定し、そのためにどうするか順序立てていく思考、アカデミー生たちは着実に身につけています。

本日は、プログラミングの基礎知識、progateの実践を行いました。

エンタ先生が、教えてくれた「プログラミングとは・・・」の説明、少しだけご紹介しますね。

＝＝＝＝＝＝＝＝＝＝＝

プログラミングを「カレー作り」に、たとえてみましょう。

・何を作りたいか　⇨　カレー

・どんな手順でつくるか　⇨　レシピ
　 　
　&nbsp 1. 野菜を切る
　　
　&nbsp 2. 肉を切る
　　
　&nbsp 3. 野菜と肉を鍋で炒める
　　
　&nbsp 4. 水を入れて沸騰させる
　　
　&nbsp 5. 煮込む
　　
　&nbsp 6. ルーを入れる
　　
　&nbsp 7. サーブする

・実際につくる　⇨　調理

作りたい料理がある。

そのために、レシピを考える。このレシピの部分が、プログラム。

レシピに則って、調理する。この調理の部分が、プログラム処理。

調理が完了し、料理が完成。この料理完成で、正常にアプリケーションが動く。

＝＝＝＝＝＝＝＝＝＝＝＝＝

身近な料理での説明、分かりやすい！

続いて、Progate を使った実践へ進みました。

具体的には、HTML、CSSの基礎学習。

ジャンプアップコースのメンバーは、次々に現れてくる課題を、１つ１つ丁寧に、クリアしていきました。
Progate を使って、自宅でのプログラミング学習も、さらに進めていきましょう！

外は、気持ちのいい秋晴れの本日。
アカデミー生は、今日も一生懸命パソコンと向き合い、プログラミングの学びを進めます。

では、本日の様子をレポートします。

WEBコースでは、前回まで開発していたプロフィールページを更にバージョンアップ。動きのあるサイトにするために、Javascriptを用いてカスタマイズしました。Javascriptをマスターするとよりユーザーを惹きつけることができる魅力的なサイトが出来上がります。

今回はJavascriptを用いて、モバイルタッチスライダー（スライドショーのように画像が変わるような仕組み）を実際にサイトに追加するなどの開発を行いました。

その後は、GitHubPagesを使い、外部公開について学びました。GitHubPagesを用いるとウェブページをインターネット上に公開することができます。

〜GitHub Pagesとは〜

GitHub Pagesは、GitHubが提供するホスティングサービスで、ウェブページをインターネット上に公開することができます。自分自身や所属する組織、あるいはプロジェクトのウェブページをGit/GitHubのリポジトリを用いて、簡単な手順で公開することが可能です。

GitHubPagesでは、パソコンの環境の違いや認証が通らないなどなど、、、うまくいかない状況が多発。何が問題なのか、講師の先生たちも力を合わせて対応しました。

続いては、Unityコースです。
Unityコースでは、今日からUnityちゃんを動かすミニゲームの開発がスタートしました。Unityちゃんは、Unityの公式キャラクターです。

学生たちは、まずコースを作るなど、自分のペースで開発を進めています。アカデミー生のR君は、早くもコースを作り上げそうです。みんな試行錯誤しながらどんどん進んでおり、着実に力をつけてきています。

両コースのアカデミー生、今日も真剣に取り組みました。

ジャンプアップコースの講習会もスタートです。ジャンプアップコースでは、パソコンの使い方からWEBの基礎まで学びます。将来の可能性を秘めた、とてもやる気のあふれた子どもたちが集まりました。

最初に、全体あいさつ。講師は、エンタ先生こと遠藤さん。エンタ先生の言葉を聞くジャンプアップ生の姿は、とても真剣です。

次に、今後プログラミングを学ぶ上で必要な、パソコン環境の設定を行いました。

最後に、コミュニュケーションツールとして、Slackの使い方のレクチャーがありました。Slackは多くの企業が導入しているコミュニュケーションツールです。練習として、実際にチャットで話してみたり、スタンプでリアクションをとってみたり。みんな慣れるのが早い！

次回から本格的にWebアプリケーションの開発がスタートします。ぜひお楽しみにしててください。

今回から２つのコースに分かれて本格的に学習開始です。コースは、Webコースとゲームプログラミングコース（Unityコース）の２つ。両コースとも、じっくり基礎から取り組みます。目指すは、3月の発表会！自分の開発した作品を発表する予定です。

では、各チームごとに様子をレポートします。

まずは、Webコース。講師は、みっつ先生こと堀内さん。
冒頭、みっつ先生からの大切な「３つの手順」を教えて頂きました。

〜みっつ先生からの大切な「３つの手順」〜

１.「マネしてコードを書く」→　「試す（やってみる）」

２.「コードを理解する」→　「仕組み、使い方を知る(なぜ動くのか）」

３.「自分なりにアレンジする」→「創る（新しいものを世の中に生み出す）」

この大切な３つのことに心掛けて、しっかり学んでいきましょう！

さて、今回の学習は「プロフィールページ作成」と「Web（フロントエンド）基礎」です。

「プロフィールページ作成」では、HTML、CSS、JavaScriptの３つの言語の基礎を網羅的に学んでもらうことがねらいです。アカデミー生個々のオリジナリティが感じられる作品の完成に期待しながら、開発スタート。

情報を伝える５つの方法を意識しながら、アカデミー生たちは、自分のプロフィールページ作成に試行錯誤。

情報を伝える５つの方法とは・・・

１. 文字で伝える（メモ、文章）

２. 絵や写真やグラフで伝える（画像、グラフ）

３. 色で伝える（赤 止まれ 黄 注意 青 前に進め）

４. 動きで伝える（手を振って注目を集める）

５. 話し伝える（音声、動画）

Webは、情報を効果的に伝える手段が揃っており、その情報は「永遠」に残すことが可能です。そして、その情報を全世界に公開できるスケールの大きさを兼ね備えています。しかし、一度公開してしまうと情報を消すことが難しいという危険性も持ち合わせています。

Webの持つ魅力、Webの持つ危うさの両面を学びながら、Webを使いこなしていきたいですね！

次に、ゲームプログラミングコース（Unityコース）。講師は、すーさん先生こと鈴木さん。

Unityは、3Dゲーム開発の手軽さとその物理エンジンが有名。３Dだけではなく、2Dゲーム開発にも対応しており、普段私たちが体験しているゲームの多くは、Unityで作られているらしいです。

今回は、ベーシックなチュートリアルとして、Unityの概要学習とUnityの操作方法を学びました。便利なショートカットキーの紹介や、フォルダ構成など開発に必要な細やかな知識を教えて頂きました。

〜すーさん先生からのワンポイント講習〜

LTS版（長期サポート版）は安定して主要な機能が使えるバージョンです。

最新版を使うと思わぬエラーが出てしまうことがあるので、慣れるまでは基本的にLTS版を使用しましょう。

動画教材を使い、Unityコースのみんなは、各々で開発を進めていきます。開発中にわからない部分あったり、エラーがでたりした時は、積極的に質問する姿が見られました。どんな作品ができるのかとても楽しみです。