こんにちは、武田です。
プログラミングやITについて学ぶなら当学院へ!と言いたいところですが、最近はネット上の学習サイトや動画も増えてきました。これらはほとんど無料です。しかも充実しています!(宣伝しているわけではありませんが、良いものなので紹介したいと思います)

paiza.IOは、古くからある日本語のプログラミング学習サイトです。

https://paiza.io/ja

アクセスすると「コード作成を試してみる(無料)」というボタンがあるのでクリックします。

クリックするとこんな感じ。コードエディタがすでに起動しているので、このままプログラミングが可能となっています。
左上にプログラミング言語選択ボタンがあるのでクリックしてみます。

なんとこんなに沢山のプログラミング言語が選択できます!

とりあえずC言語を選択。おきまりの「Hello, world!」を出力してみます。
コード入力ボックスの下の実行ボタンを押せば、下のコンソールに実行結果が出力されます。

わざとセミコロンを取ってエラーが起きるか試してみました。
ちゃんと4行目でエラーのメッセージが表示されています。

少し複雑なプログラムをコピー貼り付けしてみました。
ありゃりゃ?ヘッダーファイルの「conio.h」はインクルードできないようです。
完璧ではないようですね。


キーボード入力を伴うプログラム
も実行させてみました。
動作しますが、注意が必要です。「入力」というタブに事前にキーボード入力するデータを入れておく必要があります。

プログラミング言語をブラウザ上で実行できるだけでも凄いですが、paiza.IOには無料で受講できる講座(アカウント登録が必要)も充実しています。

講座は一部有料もありますが、初心者なら無料の講座だけでも十分です。(もう学校はいらないんじゃないだろうか?)

以上、ブラウザでプログラミング言語が実行できるサイトpaiza.IOの紹介でした。

武田です。
夏休みも終わるころに言うのも気が引けるのですが…

夏休みは動画学習にちょうどいい時期です!(部屋にクーラーがあるなら)

今の時代、ネットを使えば自宅にいながら学べる時代です。
わたしが最近チェックしたゲーム制作などを学べるサイトをご紹介します。

ある意味大手なのですが、UnityUnreal Engineのサイトです。
UnityとUnreal Engineについて簡単に説明すると…

Unity
ゲーム開発環境。スマホゲームの5割はUnityで作られているといわれている。
3Dゲーム・2Dゲームどちらも開発可能。一世を風靡した「Pokémon GO」の開発で有名。
ゲーム開発環境ソフトでは世界No1。
Unreal Engine
ゲーム開発環境。「鉄拳7」に代表される現実に迫るグラフィックの描写に定評がある。
最近話題の「フォートナイト」もUnreal Engine製。

一説によると、Unityはスマホよりで、Unreal Engineは超美麗なグラフィックを生かせる環境が必要なため、ハイエンドゲーム向けが得意との事。もちろんUnityでも十分グラフィックは綺麗ですが。

で、冒頭の動画学習に戻りますが、Unity、Unreal Engineとも学習サイトが用意されています。
どちらも無料で最新ゲーム開発環境を使ったゲーム制作が学べます。

まずはUnity

Unity Learn

ご覧の通り英語です。とっつきにくいですねぇ。

流れとしては、こんな感じで文章説明があって、

途中に動画が挿入されている感じ。(こちらも英語)

英語アレルギーの方にはつらいかもしれません。

お次はUnreal Engine

URLは、https://learn.unrealengine.com/home/dashboardとなりますが、こちらはアカウント登録しないとみることが出来ませんので、イメージのみで失礼します。

トップ画面。
Unityと比べると日本語で表示される点に安心感があります。

こんな感じでUnityユーザからの取り込みを意識した学習動画もありました。

動画での解説がほとんど。
音声は英語なのですが、字幕が日本語でこちらもUnityと比べると親切です。

いかがでしたか?

最新のゲーム開発を自宅にいながら無料で学べる時代です。(やる気さえあればですが)
まあ、ともかくわたしの子供の頃より学習環境は格段に良くなっていると思います。

余談

ところで今回UnityUnreal Engineを調べていて分かったのですが、最近Appleストアから削除された「フォートナイト」は、Unreal Engineで制作されたもので、なおかつUnreal Engineを作っている会社と「フォートナイト」を作っている会社は同じEpic Gamesであるという事実です。

更に調べるとEpic Gamesはゲームも作り、ゲーム開発環境もつくり、Steamのようなゲーム販売のプラットフォームも持っていたのでした。Epic GamesはAppleに喧嘩を売れる大企業だったんだな、と感じました。

最近、めっきり寒くなりましたね。武田です。

今年は某ウイルスの影響で新入生と2年生との交流がもてなかったこともあり、2年生が主導して夏休み前にオンラインクイズ大会を開催しました。

オンラインといってもチーム毎に教室を分けてZOOMを使ってのクイズ大会です。

幹事は、別室にて出題を行います。パソコンが2台ありなんか凄そう!

クイズは2部構成。最初はオーソドックスなクイズ。
チーム毎に答えをネット上から幹事に送信します。(みんな真剣です!)

こちらも。

クイズにつづいてジェスチャー大会です。
チームリーダーがジェスチャー役となり、何を表現しているか当てます。
わかるかな?

これは分かりやすい。

ジェスチャーって椅子使ってもいいんでしたっけ?

当てる方も悩みます。

以外に盛り上がったオンラインクイズ大会。
最後は表彰です。

優勝したCチーム。クイズ、ジェスチャーともチームワークが光りました!
おめでとうございます!

2年生幹事の皆さんも大変お疲れさまでした!

以上、第1回オンラインクイズ大会でした。

6月18日(木)より通常授業に戻りました。
当学院生もリズムがとれない中よく頑張っています。武田です。

今年わたしの担当はC言語からPythonに変わりました。
C言語も最初に学ぶプログラミング言語としてはいい言語だと思っています。理由は他のプログラミング言語の文法に大きく影響を与えているので、別の言語を勉強した際、割とすんなりとは入れるからです。ただしコンパイルが必要だったりコード量が新しい言語より長くなりがちなので、初心者は辛いかもしれません。

Pythonはその点では、初心者にやさしいかもしれません。
記述はC言語より少なくて済みますし、サードパーティ製のライブラリをインストールすると色々と面白いことが簡単に出来るイメージがあります。QRコードを作る、画像処理をする、人工知能を扱う…等。

C言語ではできなかったことに今年はPythonの授業で挑戦してみようかと思っています。

Pythonコード例(QRコードを作る)

# -*- coding: utf-8 -*-
import qrcode
file_name = "qr_code.png"
qr_string = "そのやり方は、色々ある"
img = qrcode.make(qr_string)
img.save(file_name)
print("QRコード画像を保存しました")

武田です。今日も肌寒いですね。
ひたちなか情報電子専門学院も来週(5/25)から時間短縮ではありますが、学生は登校開始となります。

話は変わりますが、サーバなどに利用されているLinuxのコマンドWindowsのコマンドプロンプトの命令は似ているものや同じ名称のものまであるので、時々混乱します。
私が間違えるものを表にしてみるとある点に気づきました。

Windowsコマンド Linuxコマンド 意味
cd cd ディレクトリ移動
dir ls ディレクトリ情報表示
del rm ファイルの削除
copy cp ファイルのコピー
rename mv ファイルやフォルダの名前変更/移動
type cat ファイル表示
help man コマンドの使い方表示

とくにファイルの削除、コピー、名前変更のコマンドはよく間違えます。
で、気づいた点は、Linuxコマンドの方が命令の文字数が少ないことです。2文字のシンプルなものが多いかな、というのが印象です。

これからはLinuxコマンドで迷ったら短い方と思い出します。

p5.jsでお絵描きのイメージ画像

こんにちは。武田です。
5月6日まで当学院は休校となっています。
現在、当学院の職員は交代制で出勤しています。

しかし来客はほとんどありませんね。配達の方が時々来る感じです。
就職関係での電話は今日2件ほどありました。企業も学生の求人にはかなり神経質になっているようです。

そうそう、午後に1名登校日を間違えた学生が来ました!
元気そうで良かったです。何はともあれ、健康が一番です。
今年はインフルエンザにかかる学生が当学院では0というのも特筆すべき事かもしれません。

 

マウスが乗ると動くようなボタン

CSSを使うと簡単にアニメーションを伴う処理が記述できます。
リンクによく利用されるマウスが乗った時にボタンが少し動くような処理を紹介します。

例としてdivタグをボタンに見立ててマウスが乗った時、影が少し濃くなってちょっとだけ上に動くようにしてみます。

HTML部分(クラス名としてbuttonを指定)

<div class="button">
	<p>ひたちなか情報電子専門学院</p>
</div>

CSS部分(クラスbuttonとbutton:hover要素にそれぞれ指定)

.button{
	font-size: 24pt;
	font-weight: 900;
	background-color: orange;
	color: white;
	text-align: center;
	box-shadow: 5px 5px 10px #ddd;	/* ボタンの影 */
	padding: 10px;
	transition: all 0.3s ease 0s;	/* 0.3秒かけて変化する*/
}

.button:hover{	/* マウスが乗ったとき */
	box-shadow: 5px 5px 15px #555;	/* 少し影を濃く */
	transform: translateY(-0.18em);	/* 上方向に少し移動 */
}

上記で大事な部分は9行目と13行目、14行目のみです。
あとは見た目の記述なので何でも構いません。

動かしたいタグにtransition要素を指定するのがポイントです。
上記サンプルでは0.3秒かけて.button:hoverで指定したCSS設定に移行するという意味になります。

リンクボタンなどに使えそうです。

新型肺炎の中国での状況を確認する

新型肺炎ウイルスのニュースを見ない日はありません。武田です。
日本での報道は毎日見聞きしていますが、大元の中国ではどのような情報が提供されいるかチェックしてみました。

中国には百度(バイドゥ)という検索サービスがあります。
新型肺炎情况」と検索するとトップにくるのが以下のサイトです。

新型冠状病毒肺炎 – 疫情实时大数据报告

2月14日の朝に見たときのイメージ。
新型肺炎の中国での状況を確認する

感染状況が59913人となっています。(たぶん今現在はもっと増えています)
地図をクリックするとその省ごとの更に細かいデータが示されていました。

下にスクロールすると、日ごとの増加状況が示されています。
新型肺炎の中国での状況を確認する

上記の画像で驚いたのですが、前日より15000人も感染者が増えています
理由は分かりませんが、2月11日と2月12日の差が激しいことがグラフから見て取れました。日本ではこうした状況がリアルタイムでは提供されていないのではないでしょうか。

情報は1箇所から見て判断するだけでは危険だと思います。
今日は参考までに中国では新型肺炎の状況がどう報道されているかを紹介しました。

昔からあるプログラミング言語でもその書き方は変化しています。
例えばJavaScriptという言語ではサイトが表示されたとき(要するに起動時)のイベント処理としてこんな風に書いていました。

window.onload = function(){
	console.log("起動したよ!");
	document.getElementById("message").innerHTML = "書き換えました";
};

window.onloadに関数の処理を代入するかたちの記述です。
最近はイベントリスナ登録というaddEventListenerを使ってこう書きます。

window.addEventListener("load", function(){
	console.log("起動したよ!");
	document.getElementById("message").innerHTML = "起動時のイベントで書き換えました";
});

日本語が変わっていくようにプログラミング言語も変化しています。
もちろん古い形式で書いても動きますが、わたしはなるべく新しい形式で書きます
なぜなら新しい形式はセキュリティ上強化されていたり、処理効率が高かったりとメリットの方が多いからです。(デメリットはたぶん古いコンピュータやソフトで動作しないということです)
日本語なら古い言い回しも趣があっていいですが、プログラミング言語の場合は、新しい形式を取り入れていくべきだと思います。コンピュータやインターネット技術がそもそも新しい技術の集大成だからです。

簡単!Pythonで円相場を取得

インフルエンザが流行っていますが、プログラミングの世界ではPythonが流行りですね。武田です。

当学院では学生の記入する日誌に円相場記入欄があります。
今日はPythonを使ってYahoo!のサイトから円相場を取得して表示するプログラムを作ってみます。

と、言っても以下の短いプログラムです。

# -*- coding: utf-8 -*-
import urllib.request
from bs4 import BeautifulSoup			# BeautifulSoup4をインポート

# Yahooの円相場表示URL
url = "https://info.finance.yahoo.co.jp/fx/detail/?code=usdjpy"

# サイトからデータ取得
data = urllib.request.urlopen(url)

# HTMLをプログラムから扱えるように変換
soup = BeautifulSoup(data, 'html.parser')

# 特定のタグのデータを抽出(ddタグのidがUSDJPY_detail_bidの部分)
usdjpy = soup.find("dd", id="USDJPY_detail_bid")

# テキスト部分のみ表示
print("1ドル = {0}円".format(usdjpy.text) )

実行結果はこんな感じです。(Windowsのコマンドプロンプトで実行)

簡単!Pythonで円相場を取得

スクレイピングによく利用されるbeautifulsoup4を使っています。
ちなみにスクレイピングとは、Webサイトから必要な情報だけ抽出するソフトウエア技術のことです。

Pythonをインストールしてもbeautifulsoup4は標準でインストールされませんので、Pythonをインストール後、ターミナルから、

pip install beautifulsoup4

を実行してbeautifulsoup4をインストールしてください。

今回円相場情報を知るために利用したサイトは以下のサイトです。

米ドル/円 – FXレート・チャート – Yahoo!ファイナンス

このサイトは、こんな感じで表示されます。

簡単!Pythonで円相場を取得

赤丸の部分が取得したい円相場です。ここからどうやって必要な情報を抜き出すかと言うと、まずはCtrl + UキーでこのサイトのHTMLソースコードを表示させます。
ここからは自分で探し出すしかないのですが、わたしが見たところddタグのidがUSDJPY_detail_bidの部分が該当する円相場でした。このように取得したいデータが特定できるようならスクレイピングは簡単です。

簡単!Pythonで円相場を取得

プログラムでは以下の部分がデータを抽出している部分です。

# 特定のタグのデータを抽出(ddタグのidがUSDJPY_detail_bidの部分)
usdjpy = soup.find("dd", id="USDJPY_detail_bid")

ddタグ、とid名称USDJPY_detail_bidが指定されているのが分かるでしょうか。

こうやって自分で探し出すのは、隠された財宝をみつけるとまでは言いませんがけっこう面白いものです。
以上、PythonでYahoo!のサイトから円相場を取得して表示するプログラムでした。
Python面白いですよ!