パソコンの操作と簡単なWEBプログラミング【親子プログラミング】

受講にあたって、初めてパソコンを操作する人も多いと思います。
パソコンの操作を覚えるには、たくさんの時間が必要です。
でもプログラミングにも触れてほしいですし、そう考えると時間が足りません。

本講義では、どうやってパソコンに慣れていくのか、その慣れていく方法と、WEBプログラミングの初体験を行っていきます。

Wifiでパソコンをインターネットに繋ごう

自宅では接続されているインターネットも、外に出ると利用できない場合があります。
そんな時に、無料のWifiサービスを使ってインターネットに接続します。

ここ、カブッキーランドでは、FREESPOTと呼ばれる無料サービスがあるので、これを利用してインターネットに接続しましょう。

FREESPOT・公衆無線LANスポットサービス

教材ページを検索しよう

上の画像は『ちょもらんま塾』とGoogleで検索した結果の画面です。
最近ではスマートフォンが主流になり、検索することが身近になりました。
わからなかったほぼ全てのものが、検索することによって答えを見つけることが出来ます。

このとても便利な機能は、プログラミングを学んでいく上で最も利用することになります。
欲しい機能の作り方がわからなくても、正しく検索することにより、その作り方がわかります。

正しい検索方法を覚え、自分で学ぶ力をつけていきましょう。

検索の仕方

  1. 上の画像の黄色線が引かれている部分をクリック
  2. URLと呼ばれる文字の背景が青くなる
  3. キーボードで検索したいキーワードを入力
  4. 入力がおわったら『Enter』キーを押す
  5. 検索結果が表示!

検索するためにYahooGoogleのページを開く必要はありません。
どのページからでもブラウザ上部の窓に検索キーワードを入力するだけなので、とても簡単です。

ウェブブラウザ『Google Chrome』をインストールしよう

インターネットでWEBページを見るには、ブラウザが必要です。
そして、そのブラウザは色々な使い方が出来ます。
動画を見たりゲームをしたり、他にもプログラミング学習をするのにもブラウザが必要です。

そんなブラウザの中でも沢山のWEBページで推奨されているのがGoogle Chromeです。
世界で半分の人が使っているので、このブラウザを中心にしたアプリやサービスの開発が行われており、動作が安定するとされています。
こうした理由からGoogle Chromeをインストールして使う事にしています。

Google Chromeダウンロード

テキストエディタをダウンロードしよう

あとでプログラミングするためにプログラムを書くための『テキストエディタ』をパソコンにインストールしましょう。

プログラミングに触れながらマウスの操作を覚えよう

マウス練習サービス

今話題の体験型プログラミング学習サイトでは、ほぼマウスだけでプログラミングが体験できます。
以下のページから一つ選んでちょっとだけ体験してみましょう。

マウスの操作は、毎日使っていくうちに慣れてきます。
ストレスなく動かせるようになると、もっとプログラミングが楽しくなるかもしれませんね。

その他のマウス練習サービス

マウス練習広場 練習1 マウスを動かしてポインタを合わせる練習 – ハロー!パソコン教室
IT講習会支援サイト キーボード&マウス練習ツール

キーボードの操作を覚えよう

タイピング練習サービス

パソコンを動かすのも、プログラミングを書くのもキーボードを使います。
慣れないうちはキーを探して打ち込むことになりますが、練習すれば誰でも見なくてもキーの場所がわかるようになります。

以下のリンクはそんなキーボードをうまく操作できるようになるためのタイピング練習サービスです。
自分でやりやすいと思ったサービスを利用して自宅で練習しましょう。
一週間ほど続けるだけでかなり上達します。

ローマ字入力の練習
ひよこでも出来るタイピング練習講座 | タイピング練習の「マイタイピング」
インターネットでタイピング練習 イータイピング | e-typing ローマ字タイピング

少し慣れてきたらゲーム形式でタイピングを楽しみましょう。
【寿司打】WebGL版
【Popタイピング】

ローマ字入力とかな入力

キーボードにはローマ字入力かな入力の2種類の入力方法があります。
例えば、『か』と入力したい場合、ローマ字入力なら「K+A」と2つのキーを打ち、かな入力なら「か」と1つのキーを打ちます。

これだけ見ると打つ数の少ないかな入力を選びたくなりますが、ローマ字入力を覚えましょう。
なぜなら、プログラミングはすべて英文字で打つ必要があるので、英文字の配列が身に着くローマ字入力が有利だからです。

学年によっては、まだローマ字について学んでない場合もあると思いますが、これを機会に少しずつ覚えていきましょう。

ショートカットキー

キーボードにはショートカットキーと呼ばれる、動作を短縮した操作があります。
これが自由に使えるようになるだけで、パソコンの操作にとても有利です。
タイピングは練習すれば慣れてきますが、ショートカットキーは意識して使うようにしないと身に着かないものなので、必ず日頃から使うようにしましょう。

キー操作 目的
Ctrl + A ドキュメントまたはウィンドウのすべての項目を選択する
Ctrl + X 選択した項目を切り取る
Ctrl + C (または Ctrl + Ins) 選択した項目をコピーする
Ctrl + V (または Shift + Ins) 選択した項目を貼り付ける
Ctrl + Y 操作をやり直す
Ctrl + Z 操作を元に戻す
Ctrl + R (または F5) 作業中のウィンドウを最新の情報に更新する

Windows のキーボード ショートカット
Macにおける時短ショートカット | TIPS | BOEL Inc. ボエル

WEBプログラミングに触れよう

絵文字スタンプ プログラミング

プログラミングの動作サンプルをまずは見てみましょう。
以下のリンクをクリックしてください。
絵文字スタンプ プログラミング

プログラミングの解説

絵文字の入ったボタンを押すと、その上の囲みの中に絵文字が入っていく仕組みになっています。

このプログラミングによるWEBページは、以下の言語でできています。

  • HTML:表示
  • CSS:見た目のデザイン
  • JavaScript:ボタンを押したときの動作

プログラミングコードをコピーする

動作しているプログラミングコードをコピーして、パソコン上で動作させてみましょう。
以下の手順で行います。
実演していきますので、操作を真似してください。

  1. 拡張子を表示設定
  2. テキストエディタを開く
  3. WEBページ上で右クリック
  4. ページのソースを表示
  5. ソースページでソースコードを全選択(Ctrl+Aキー)
  6. ソースコードをコピー(Ctrl+Cキー)
  7. テキストエディタ上でペースト(Ctrl+Cキー)
  8. テキストエディタを保存(Ctrl+Sキー)
  9. ファイル名を指定してデスクトップに保存
  10. 出来上がったファイルをブラウザで開く

以上でプログラミングコードのコピーが完了しました。
手元にコードがあるので、編集することができます。

プログラミングコードを編集する

スタンプ出来る絵文字を増やそう!

ヒントを出しますので、スタンプを増やしましょう。
コピー&ペーストだけでできます!

増やしたい絵文字を以下のページから選びましょう。
😋 Get Emoji — All Emojis to ✂️ Copy and 📋 Paste 👌

まとめ

約1時間半の講義はどうでしたか?
難しく感じたり、意外と簡単だと感じたり、人それぞれの感想を持ったと思います。
おそらく、プログラミングするという点においては、皆さんが思ったよりハードルは低いと感じたのではないでしょうか。

パソコン一つあれば、WEBページを作ったり、ゲームを作ったり、プログラミングによって色々なことが出来ます。
それには、普段からお家で触ること。
野球やサッカーなどのスポーツも、ピアノやリコーダーなどの楽器も、最初から難しいことはできません。
でも、毎日触っていれば必ず上達します。

今日の親子プログラミング講座をきっかけに、一人でも多くの子供たちがプログラミングに興味を持ってもらえることを願っています。

受講者アンケート

よろしければ、今回の受講に対する感想をお聞かせください。
アンケートは以下のページよりお願いします。

受講者アンケート