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

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設定に移行するという意味になります。

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

昔からあるプログラミング言語でもその書き方は変化しています。
例えば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面白いですよ!

UnityのAddForce関数でボールを遠くに飛ばす

Unityは、物理計算のプログラムを1から作らなくても便利な関数が最初から利用できます。
わたしの好きなUnityの関数は、AddForce関数です。
AddForce関数は、引数に方向を指定するとUnity上のオブジェクトに力を加えることができます。

こんな感じ。

方向は、Vectorというクラスを使って表現します。
Vectorの引数はそれぞれx方向、y方向、z方向の力を表します。

先ほどの動画だと高さがy方向で、奥行きがx方向の設定にしています。
例えば次のようにするとx軸とy軸、前方45度に力を加えたことになります。(20.0fは強さなので適当です)

Vector3 force = new Vector3(20.0f, 20.0f, 0.0f);

今回ボールオブジェクトには、次のようなC#スクリプトをアタッチ(プログラムをオブジェクトに設定すること)しました。

void Start () {
	Rigidbody rb = GetComponent<Rigidbody>();
	Vector3 force = new Vector3(20.0f, 20.0f, 0.0f);
	rb.AddForce(force, ForceMode.Impulse);
}

Startメソッドに指定しているため、ボールに対して1回ガツーンと前方に力を加えたイメージです。
だからゴルフボールのように飛んでいきました。

この3行足らずのプログラムだけでこのような動作が出来るのは、凄いなあと思ってしまいます。
まあ、だからと言って面白いゲームが作れるかは別問題ですが…

今日は暑いです。武田です。

パソコンにはいろいろなアプリがインストールされていますが、アプリ毎に操作がまちまちだと不便です。
当然、よく使う機能は操作が統一されています。

有名なのは、コピー&貼り付けの「Ctrlキー  +  C」や「Ctrlキー + V」などです。

昔からある機能にF1キーを押すとヘルプを表示する、というものがあります。
プログラミングに使う統合開発環境のVisual Studioでも私自身よく使うのですが、ソースコード内で使い方を知りたいメソッドやクラスを選択してF1キーを押すというものです。

覚えておくと、かなり重宝しますのでプログラミングに困ったらぜひ利用してみてください。

実際の例

例えば、Formatというメソッドの使い方を知りたいとします。
Formatという部分をまず選択して、F1キーを押します。

便利なF1ヘルプ

ブラウザが起動して.NETマニュアルのStringクラスのFormatメソッドの使い方が表示されました。
便利なF1ヘルプ

便利な機能なので、ぜひ使ってみてください。

武田です。

まずは連絡です。
8月9日(金)~15日(木)までは学院業務が停止(ようするに先生方も休み)となります。

夏休みを利用してこんなものを作ってみました。

東海第2原発から30km圏内をGoogleマップ上に表示する

なぜこの題材にしているかと言うと、そろそろ大震災や福島第一原発の事故を忘れかけているのではないかと思ったからです。

これはGoogle Maps APIというGoogleの提供しているAPI(機能を簡単に利用できるようにしたプログラム群)を使って作成しました。

続きを読む

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

こんにちは。武田です。
今日も寒い夏ですね。

JavaScriptのライブラリでp5.jsというものがあります。Processingという以前からあったグラフィックを簡単に描く環境をJavaScriptに移植した環境です。
とても簡単にcanvasを使ったプログラムが記述できるので少し使ってみました。

p5.jsでお絵描きをするサンプル

続きを読む

武田です。
授業で「好きな動画ベスト3」というサイトを学生の課題として与えたのですが、その時考えたレイアウトです。

実際に作ったサイトはこちら

大雑把に言うと、HTMLのdivタグで枠(今回はclass=”video”で指定したdiv枠)を作っておいて、CSSのdisplayプロパティをinline-blockにすると枠が動画や画像の大きさに合わせられるので、あとはタイトルやコメントを同じdivタグの中に入れてそれっぽく見せています。

枠が浮いて見えるようにCSSに「box-shadow: #ddd 5px 5px 20px;」などとして指定しています。

今回は学生からも質問のあった独自フォントをサイトで使えないのか?という部分もやってみました。

以下のサイトが参考になります。

日本語フリーフォントからウェブフォントを作成する方法 | システムエクスプレス株式会社

今回使用したフォントは、かに沢のりおさんのサイトからフリーのCheekフォントを使わせて頂きました。

Cheekふぉんと(フリーフォント)|かに沢のりおのいろいろサイト

フォントを変えるだけでもかなり雰囲気が変わるものです。

興味のある方は、表示したサイトでCtrl + Uキーを押してHTMLやCSSの中身を見てみてください。

leftDays

こんにちは、寒くなって来ましたね。武田です。
学生たちは既に12月22日から冬休みに入りました。
ひたちなか情報電子専門学院の先生方も本日(12/28)で本年の業務終了となります。
色々とお疲れさまでした。

今年もあと何日かですね。
という事で今年最後はJavaScriptで今年の残り日数を表示するプログラムを作りました。

こちら

プログラム自体は、以下のサイトで詳しく解説しています。

今年の残り日数を表示する – 電脳産物

新年は、1月7日より業務開始となります。(学生は8日から始業です)
それでは、皆さん良いお年を!