コンテンツへスキップ

これからマイコンを使ってプログラミングの勉強を使用という方へ向けて、

プログラミング教育用ロボットのビュートローバーの開発環境構築とサンプルコードの実行までを、参考本に沿いつつ、(古い本なので)変更点などを書いていきます。

追記: つづき=>教育用ロボットビュートローバーで簡単制御:ライントレース

目次

  • マイコンとは
  • H8マイコンとビュートローバー
  • 組み立て
  • 環境構築
  • LED点滅
  • 雑記
  • 参考

マイコンとは

そもそもマイコンとは、マイクロコンピュータ、つまり小型計算機のことです。かつてはマイコンコンピュータを指していたそうですが、最近はPICマイコンのような部品を指すことが多いと思います。

家電製品を分解してみると回路が入っていますが、その中の計算処理をする部分です。こんな感じの物です。

手元にあったPICマイコン

これにプログラムを書き込んで、LEDを点滅させてリモコンにしたり、モーターに電気を流してタイヤを回したりするというわけです。

私聞いたことがあるのはPIC、LPC、R8C、H8ですが、他にも様々なものが販売されています。これにプログラムを書き込んでいくと、自立的に走行させたりできます。

H8マイコンとビュートローバー

ビュートローバーは専用ソフトウェアでフォーチャートから比較器簡単にプログラミングを学べる教育用ロボットです。統合開発環境HEWを使用することでC言語で開発することもできます。

プログラミング教育用ロボット ビュートローバー H8 [学習教材] [vstone]

プログラミング教材 ビュートローバーARM ビュートローバーH8 -ヴイストン株式会社

搭載されているのはH8/36064G搭載のVS-WRC003LVです。

組み立て

箱の中身

組み立てマニュアルに沿って組み立てます。

この時点で電池を入れると、前後左右に動きます。持ち上げると音が鳴り、その状態で左右のセンサを覆ってみて対応するLEDが点滅します。

ギアボックス

うまく動作しなかったら組み立てに失敗しているので確認しましょう。配線やモーターのギアに注意です。

完成!(左側が前)

環境構築

環境構築の前に

プログラムを書き込んでマイコンを動かすわけですが、C言語というプログラミング言語で命令する場合、一度機械語に翻訳する必要があります。

たとえば2+3=5をする場合、人間は「2+3」と書けば「5」と答えますし、C言語でもそのように書きます。一方、機械は以下のような計算をしています(機械語にかなり近い言語であるアセンブリ言語のイメージ)。

計算のイメージ

A ← 0    Aに初期値0を入れます
A ← A + (79) Aに79番地の値を加えます
A ← A + (80) Aに80番地の値を加えます
(81) ← A   81番地にAのもつ値を入れます

アセンブリ言語では ADD (M) がA ← A + (M)です。計算そのものは回路的に行えます。数値は16進数です。また、加算命令もとある番地に入っていて加算したり値を移動したりするたびに番地を指定して呼び出して...という感じに計算していきます。

ただ、最近一般的に使われているPCやラズパイは計算能力が高いのでこんなめんどうな部分は意識する必要がありません。マイコンは計算能力が低いので、プログラムを作る私たちはこのような部分を知っておくと便利です。宇宙開発のような機械を小さくしたい時や省消費電力化したいとき、あるいは簡単なロボットが作りたいときや教育等にマイコンを使用します。

統合開発環境HEW

統合開発環境とはC/C++によるプログラム作成に必要なソフトウェアが全部入っているソフトウェアのことです。

C言語などを機械語に変換してくれるソフトウェアをコンパイラといいます。機械語はハードウェアごとに違うので、マイコンにあったコンパイラをインストールしなければいけません。

【無償評価版】H8SX,H8S,H8ファミリ用C/C++コンパイラパッケージ V.7.00 Release 00 -RENESASのページの無償評価版のものを選択します。 ([無償評価版]H8SX,H8S,H8ファミリ用C/C++コンパイラパッケージv.700 Release 00)

ログインしてh8v7000_ev.exeをダウンロードして実行し、推奨設定でインストールします。

HEW

Flash Development Toolkit

フラッシュ開発ツールキットとはフラッシュメモリに対して書き込みを行うためのソフトウェアです。

フラッシュ開発ツールキット Flash Development Toolkit (Programming GUI)の最新版(【無償評価版】フラッシュ開発ツールキット V.4.09 Release 03)をインストールします。

特に変更なしでインストールします。言語だけAsia(japanese)にします。

H8 Writer

書き込み用ツールをインストールします。同じくVS-WRC003LV-ヴイストン株式会社からインストールします。

モニタプログラム

H8/300H、H8/300H Tinyシリーズ用サンプルプログラム -Renesasから、HEW3,HEW4(C/C++ Compiler Ver. 6.0)対応版 H8/300H Tiny用 モニタプログラムをダウンロードします。

デフォルトの設定ならC:\300tに保存されるので、そのフォルダのmonitor.hwsをクリックしてHEWを起動します。何か言われたら「はい」でHEWをアップデートします。

モニタプログラムの設定

ユーザ・イニシャライズ・モジュールを設定します。monitor.cを以下のように設定します。

/************************************************************************/
/*      H8/300H Monitor Program (Normal Mode)           Ver. 2.0B       */
/*              Copyright (C) 2003 Renesas Technology Corp.             */
/************************************************************************/
#include "36064s.h"                              /*変更                 */
#pragma global_register(monitor=R5)             /* Return Address       */
void (*monitor)(void);                          /*                      */
/************************************************************************/
/*      User Initialize Module                                          */
/*              Input   R5  <-- Return Address                          */
/*              Output  Nothing                                         */
/*              Used Stack Area --> 0(0) Byte                           */
/************************************************************************/
#pragma noregsave(INITIALIZE)                   /* Non Register Save    */
void INITIALIZE(void)                           /*                      */
{ 
  WDT.TCSRWD.BYTE=0x92;                         /* 追加分               */
  WDT.TCSRWD.BYTE=0x92;				/* 追加分    			*/
  monitor();                                    /* Goto Monitor Program */
}      

マイコンにはウォッチドックタイマと呼ばれるマイコンの暴走を検知する機能が備わっています。モニタを使用する場合これは邪魔なので、機能を停止させるためのコードを追加しました。H8/36064が搭載されているので、マイコンの種類を指定するために36064s.hに変更します。

リンケージ・サブコンド・ファイルを以下のようにカスタマイズします。 monitor.subを以下のように変更します。

INPUT      NORMAL,MONITOR
LIST       MONITOR.MAP
SHOW       SYMBOL
OUTPUT     MONITOR.MOT
FORM       STYPE
CHANGE     INFORMATION=1320
NOOPTIMIZE
LIBRARY    NORMAL,36064
LIBRARY    MONITOR
DEFINE     $BRR=17
DEFINE     $STACK=FF00
START      VECTOR/0,ROM/100,RAM/F780,USER/F840,SCI/FFA8

変更したのは8行目と10行目です。8行目はマイコンの指定、10行目に通信速度を指定します。参考書p.230に記載されています。

書き換えたらメニューバーからビルドします。ビルドとは、マイコンが実行可能なプログラムに変換することです。ビルドは多少時間がかかりますのでのんびり待ちます。下記のように出たらが完了です。

Build Finished
0 Errors, 0 Warnings

モニタプログラムの書き込み

マイコンのスイッチを押したまま電源を入れると書き込みモードで起動します。 デバイスマネージャーなど(windws10ならスタートを押した後そのままデバイスマネージャーなどと打って検索)でどのポートにつながっているか確認します。USBコネクタを抜き差ししながら確認してください。この場合はCOM3なのでポート3でした。

デバイスマネージャー

H8 Writerを起動して、C:300t\moniter\Release\MONITOR.MOT、COM3を指定して書き込みを行います。

H8 Writer

本との差異について

モニタプログラム専用通信ソフトHtermは配布が終了していたので、参考本に記載されているシリアルコンバータVS-WRC003LV とHtermはインストールしませんでした。

サンプルプログラムのテスト走行

VS-WRC003LV -ヴイストン株式会社からサンプルプログラムをダウンロードできます。zipファイルを解凍し、ドキュメントなど好きなフォルダに張り付けてください。 HEWを起動し、ワークスぺースを開くから先ほど保存したフォルダの中からhwsファイルを開きます。バージョンが異なる場合何か聞かれますが、すべて「OK」です。

サンプルプログラムを開く

メニューバーのビルドから一番上の[H8S,H8/300 Standard Toolchain..]を選択してコンパイラ、リンカなどを設定します。

相対パスはCustom directory、ディレクトリに各 CPU 用のインクルードファイルがあるiodefine フォルダのパスを設定し、OKを押します。このサブディレクトリは各自のPCで必ず確認してください。私の場合はC:\Program Files (x86)\Renesas\Hew\System\Pg\Renesas\H8\H8_7_0\Generate\iodefineを指定しました。

(追記)あとからビルドのインクルードファイル設定を変更する場合

ビルド→RX Standard Toolchain→コンパイラタブ→オプション項目(S)からインクルードファイルディレクトリを選択(Custom directoryから、iodefineを指定。私はC:\Program Files (x86)\Renesas\Hew\System\Pg\Renesas\H8\H8_7_0\Generate\iodefine)→追加ボタン

wirter \WRC003LV_SampleProject_MOTOR_20100826_0926\FILES\Debugの中の.motを開きます

参考

LED点滅

ビルドからすべてをビルドします。pdfの通りにやるとデバックの体験のために必ずerrorを吐きます。 36064S.hの一行目を削除します。保存してすべてをビルド。このとき、保存が拒否されることがありますが、その場合はHEWの起動を右クリック/その他から管理者権限で行ってください。0 Errors, 0 Warningsと出ればOKです。

1: void main(void)
2: {
3:   //制御周期の設定[単位:Hz 範囲:30.0~]
4:   const BYTE MainCycle = 60;
5:
6:   Init((BYTE)MainCycle); //CPU の初期設定
7:   //I2C_init(void); //IXBUS 初期化
8:
9:   //ループ
10:   while(1){
11:     LED(1); //緑の LED 点灯
12:     Wait(1000); //1000msec 待つ
13:     LED(2); //オレンジの LED 点灯
14:     Wait(1000); //1000msec 待つ
15:   }
16: }

VS-WRC003LV -ヴイストン株式会社のページで配布されているLED点滅サンプルコードより引用。

再びH8 Writerを起動して今ビルドしたファイルを (C:\Users\user\Documents\HEW\WRC003LV_SampleProject_LED_20100826_0926\LED\Debug\LED.motなど)を指定します。すると、マイコンのLEDが交互に点滅します。wait関数の引数を1000から500に帰ると点滅が早くなります。

書き込み

雑記

使っているのはDCモーターなので動かすのは簡単そうです。来週やってみようと思います。今後これを使ってなにをしようかな。センサを増やしてフィードバック制御出来たらうれしいですね。

追記(2019/4/22):続編、あとからビルドのインクルードファイル設定を変更する場合について追記しました。

参考

これは以前HTMLとCSSを使ってみる目的で作ってみたサイトの話です。

ざっくりホームページ

はじめはホームページ作りの始め方からです。プログラミングやホームページに興味があるけれどもどうしたらいいかわからない、俺よりも初心者をターゲットに書いていきます。

ホームページに最低限必要なもの(俺調べ)

「プログラミングをはじめたい!!」  …けど何をすれば??

俺の場合は、プログラミングといえばC言語で、なんとなく難しそうだけどやっていけばできるようになるよねー、という見切り発車でした。これがよくなかった。

ホームページを作りたいだけならC言語を使わないでもできます。ということを知らなかった俺はなかなかな遠回りをしました。

さて、本題です。ホームページ作りに必要なのは

  • HTMLなど
  • CSS
  • JavaScript

です。それぞれについて軽く説明します。

HTML

ホームページの顔になる部分を表現します。タイトルはこれ、本文はこれ、という感じ。他のページのURLを形式にしたがって記述すると、ホームページ上でそこをクリックすると指定したページに飛ぶことができます。URLは住所や道筋に当たります。このファイルのこのファイルにはいって…という風に道筋(パスといいます)を指定しています。

というのも、人間が読む文章は、大きさ、内容から、見出し、キーワード、タイトルなどを見分けられるようになっています。このように、文章を意味の重要性で分けて区別することを構造化と呼びます。テキストを構造化するとき、具体的にはいちいち「ここはタイトルですよー」と意味を加えていくことになります。これをやる役割を持つのがマークアップ言語です。

HTMLはマークアップ言語というものの1つです。これにはいろいろと種類がありますので、ググッてみてください。

このホームページのコードはこんな感じ。文の両端にあるのがタグで,これが構造化のみそです。

\begin{lstlisting}
<title>お勉強のために</title>
 <li> <a href=”../index.html”>HOME</a> </li>
 <img src=”../portfolio/images/P1030350.JPG” height=”390″ >
 <h2 class=”headTitle-typeA”>今後扱っていきたいこと</h2>
\end{lstlisting}

1番目の文では、ここがタイトルであるということを指定していて、ホームページの上のタブの部分に表示されます。タグは\textless~~\textgreater \textless/~~\textgreater という部分で、ここの間に書いたテキストが~~だ、ということになります。

2番目の文では、リンクを指定しているタブと箇条書きをするタブを使っています。\textless li\textgreater\textless/li\textgreater が箇条書きを指示し、\textless a href = ” パス ” \textgreater

/a \textgreater でリンクをしていています。

このパスと書いている部分で、ファイルがある場所を指定しています。このリンクをページ上でクリックするとHOME画面に移動します。

スタート地点は今自分が書いているhtmlファイルの場所で、..は一つ上の段のフォルダに行くことを意味しています。スタート地点のフォルダをA,上の段のフォルダをBとすると,私のパソコンの中には、Bフォルダの中にAフォルダとindex.htmlが入っています。ブラウザ(SafariやMicrosoft Edge等)がトップページにアクセスしたとき,フォルダ内でindex.htmlというファイルが一番始めに表示されるらしいので気をつけましょう。

自分がいるところからスタートするパスは相対パス,httpから始まるようなインターネット上でファイルの位置を指定する方法を絶対パスと言います。

同様に場所を指定する事で画像を表示させる事も出来ます。3行目がそうです。heightは画像サイズを指定しています。

4段目は見出しの部分なので \textless h2 \textgreater で文を強調しています。h1,h2,h3の順で字が大きく表示されますので,h1やh2でタイトルや見出しを書くことが多いです。ここではさらに class=ほにゃらら と名前をつけています。CSSで指定するして装飾を作るとそのクラスの文はその通りに表示されますのでつけておくと便利です。

CSS

CSSを使うと文章を装飾することができます。背景の色やタイトルの文字の大きさ、余白の大きさなどを指定できます。文字の大きさはHTMLでも指定できますが、CSSのほうが便利です。

CSSは セレクタ{ プロパティ : 値 ;} の形で書かれています。セレクタは装飾される対象を選んでいます。HTMLでclass=honyaと指定していたらセレクタをhonyaにすれば良いですし,見出しのh1,h2..や1段落文の文章を表すpなどを指定しても大丈夫です。プロパティは何を,値はどうするかを指定します。font-size:14pxだったら文字サイズは14ピクセルですし,background:rgb(241, 250, 224)は背景が薄い緑になります。色は三原色の濃さでしています。これはテキストエディタか画像加工ツールを利用しましょう。

classで名前をつけると,CSSで指定するして装飾を作るとそのクラスの文はその通りに表示されますのでつけておくと便利と言いましたが,あとで修正するのも楽になります。各見出しは同じ色や大きさにすることが多いと思いますが,それぞれに同じようにCSSを指定するよりもclassで名前をつけて,そのクラスの装飾内容を1カ所で書けば,修正箇所も1カ所で済みます。また,h2で2種類の見出しの装飾を作りたいと言うときなどにも便利です。例ではheadTitle-typeA等がこれに当たります。

ただ、CSSのことはよく分かっていません。なんとなくで書いています。

コードです

\begin{lstlisting}
 @charset "utf-8";
#page { width: 980; margin: 0 auto;} 
body {background: rgb(241, 250, 224);
color : rgba(41, 42, 43, 0.712); margin-left: 2em; margin-right: 2em; } 
 ~~省略~~ 
.siteTitle { background: rgb(95, 128, 158); color:rgb(242, 246, 247); 
padding : 5px 15px; line-height: 1.231; margin-top: 0;} 
.headTitle-typeA {font-size :18px; color: #349FA6; 
border-bottom: solid 1px #349FA6;} 
.headTitle-typeB {background: rgb(207, 243, 178); 
font-size :18px; color: #03817b; border-left: 
solid 5px rgb(68, 68, 66);} 
 .headTitle-typeC {font-size :16px; color: #494848; }  

作るまでの準備

せっかくこの記事を読んでくださったので、読んでいる方がスタートを切れるように説明たいと思います。実際に作ってみる前に,環境を整える必要があります。

コードに関する知識の他にに必要なものは、以下と通りです。

  • PCとネット環境
  • ブラウザ
  • サーバー

加えて、ファイルに関する知識が多少必要です。index.htmlについての話を書きましたが、.htmlというのは拡張子と呼ばれていて,ファイルの種類を表しています。テキストファイルは.txt等,様々な拡張子があります。htmlもテキストファイルですが,ホームページで表示できます。もし名前を変えるとき画像を表す.jpgのような拡張子をワードで作ったファイルにつけてしまうとワードは画像を見るためのツールではありませんので開けなくなります。このような事故を防ぐために初期設定では拡張子は非表示になっています。拡張子はパス指定するときにも書かなくてはいけません。ホームページを作るなら拡張子を把握している必要がありますので,エクスプローラー(ファイルマークのアイコン)の「表示」から変更してください。

拡張子の画像

ブラウザはなんでも良いはずですが、私はGoogle Chromeを使っています。htmlファイルを開くときに右クリックで「プログラムから開く」や「このアプリケーションで開く」で選んでください。

テキストエディタは文を書くツールです。Wordでも出来るはずですが、文字の大きさなどのデータも保存されますし,重いです。メモ帳でもできますが,無料のエディタがネットにあるのでお好みで使うのをおすすめします。タグなどを色を変えて表示してくれたりすると見やすくなります。私はVisual Studio Codeで書いています。

サーバというのはサービスを提供するコンピュータです。ホームページの土地のようなイメージのおもので,公開するには不可欠です。これも調べれば無料のものがすぐに見つかります。登録しましょう。ユーザー名とFTPパスワードはひかえておいてください。私はとりあえずFC2にしました。

作ったホームページをサーバに保存するにはFTPソフトが必要になります。ネットからインストールしましょう。有名なのはFFFTPというソフトで,私も使っています。「新規ホスト」の「基本」からホスト名にfc2などと入力ていき、ローカルの初期フォルダに「C:\ほにゃらら」と自分が作ったホームページに関するいろいろなデータを保存したフォルダを指定します。あとはOKして接続して…とすればアップできます。

雑になりましたが,事前準備は以上です。これができれば,あとはネットに転がっている記述法や書店で巡り合った本を活用して自分のホームページを作り始めることができるはずです。

ffftpの写真

終わりに

初心者がまず手を出すものとしてホームページはおすすめです。パスの指定のような考え方がわかりますし,書いたコードがすぐに形になるのは楽しいです(^^ゞ ただ、今回の内容では計算処理が出てきませんので,アプリやゲームが作りたい方はさらに別な言語を勉強してみてください。

追記

(2019/2/11)コードの表示を変更しました。HTMLとCSSなどの学習にはprogateが楽しいのでおすすめです。

参考

作りながら学ぶ HTML/CSSデザインの教科書 高橋朋代・森智佳子 SB Creative

(無料電話サポート付)できるホームページ HTML&CSS入門 Windows 10/8.1/7対応 (できるシリーズ) インプレス

追記(2019/3/18) 段落構成を変更しました。内容は変更ありません。