4.1.2テーマの設定方法

前回の投稿でホームページのコンセプトを決めましたので

WordPressでホームページを作成するにあたり、行う事はテーマの選択です。

WordPressには、無料のテンプレートのテーマが沢山あります。
自分が作りたいホームページの目的とデザインなどをもとにテーマを選択しましょう。

4.1.2.テーマの設定方法

メニューの[外観]ー[テーマ]をクリックします。

 

テンプレートが表示されるので、自分の好きなものを選択し、[有効化]をクリックします。

※テンプレート選択のポイント
・レイアウト:写真を前面に出した視覚的なサイトやブログ投稿がメインなのかサイトの目的に合うものを選択
・機能:テーマによって機能が異なります。こちらもサイトで達成したい事に合わせて選択

 

新しいテーマを追加したいときは、[新規追加]をクリックし、新規テーマをインストールします。

前の投稿/次の投稿/メニューページへ戻る

5.4.14.URL・地図画像・ストリートビュー画像を取得する機能の追加

GoogleのAPIを利用し、指定した場所や住所のGoogleMap(地図)の画像とURLを取得する機能を作成します。

1)GoogleのAPIを有効にしてキーを作成する。

下記の3件のAPIを有効にします。(マップのカテゴリーをすべて表示して探してください。)

・Geocoding API

・Maps Static API

・Street View  Static API

APIの有効化の方法は、「5.2.4.3.Googleのライブラリ(Cloud Speech)の利用準備」を参考にしてください。

認証情報から「APIキー」を作成してください。ここで作成/利用するキーは、参考としている「5.2.4.3.Googleのライブラリ(Cloud Speech)の利用準備」で作成したサービスアカウントキーとは種類が異なるので注意してください。

APIとサービスの認証情報から認証情報を作成、APIキーをクリックで作成できます。

作成したAPIキーは、APIキーの項目の下記の赤枠の部分に表示されます。

 

2)プログラムを作成する

[get_map.py]

①地図の基本的な情報(緯度/経度等の情報)を取得するプログラム

今回作成した「GoogleのAPIキー」と「住所または建物/場所の名称」から地図の基本的な情報を取得する関数を作成します。

②地図のURLを取得するプログラム

「①で作成したget_mapinfo」を利用して基本的な情報を取得。その情報から取得できる「緯度/経度」及び「place_id(場所に割り当てられた番号)」をもとに、対象の地図のURLを取得する関数を作成します。

③地図画像を取得するプログラム

「①で作成したget_mapinfo」を利用して基本的な情報を取得。その情報から取得できる「緯度/経度」をもとに地図画像を取得する関数を作成します。

④地図の場所のストリートビュー画像を取得するプログラム

「①で作成したget_mapinfo」を利用して基本的な情報を取得。その情報から取得できる「緯度/経度」をもとに、対象の地図のストリートビュー画像を取得する関数を作成します。

⑤テストする。

URL/地図画像/ストリートビューの画像取得の機能をテストするためのプログラムです。googleのAPIキー、アドレスが不正な場合にエラーとならないように、エラー処理を入れてあります。
 

getmap.pyを実行し、URLが表示され、地図画像とストリートビュー画像ファイルが作成されていたらOKです。  

4.1.1ホームページのコンセプトを決める

4.1ホームページのコンセプトを決める

ホームページを作るにあたり、まず最初に行うことが

◇ホームページのコンセプト決め  です。

コンセプトとは、下記①、②のようなものです。

①ホームページの種類
 ・個人のブログ
 ・会社のホームページ
 ・ショッピングサイト 等

②ターゲット
 ・どんな人に見て欲しいのかを具体的に考えてみる

コンセプトが決まりましたら、コンセプトに合わせてテーマやフォント・色などを決めます。(フォントを決める際には、文字の大きさなども決めておきましょう。)

今回はSpringKnowledgeLab(以下SKL)のホームページを題材にしていきます。
” https://www.sk-lab.co.jp “

SKLのホームページのコンセプトは
①は会社のホームページ
・若年者向けや女性向けのセミナーを行っている という点から、
②は”女性”、”10代後半から40代” をターゲットとしてイメージ

また、コンセプトに合わせて
・フォントイメージとして、柔らかい感じの文字イメージ
・文字の大きさは小さめ。(情報の間延びした感じを回避したい)
・イメージとは異なる色:ベージュ系、赤、茶色
・色のパターン:白×緑系 or 白×青系にしたい
・色は全体的に統一する(ボタンの色は同じ色にする等)

と細かい部分を設定しました。

また、デザインやレイアウトなど参考にしたいホームページを
いくつか探し、ホームページ作成担当者同士で意見を出し合い、
作成イメージのすり合わせを行いました。

その設定した内容にしたがって作成していくことで、ホームページに統一感を出すことができます。

さて、次の投稿からいよいよホームページを作成していきます。

 

次の投稿/メニューページへ戻る

5.4.13.サーボモーターとスピーカーの競合の解消

サーボモーターはpwmという信号を利用して動いています。
現在は、モノラルのスピーカーをD級アンプを利用して直接Raspberry pi に接続し、このpwmという信号を利用しています。しかし、サーボモーターとスピーカーを同時に利用すると競合が発生し動作不具合が発生するようです。このため、今回はサーボモーターの競合を解消するために、別回路(部品)を利用して動かします。また、このことにより、Raspberry piのpwm信号のピン数が限定的であったことから、サーボモータの接続にも限界がありましたが、この数の制限の解消も目的としています。

今回は、PCA9685というサーボモータードライバを利用します。

 

1)Raspberry Pi、PCA9685の配線

ジャンパー線を下図の通りに接続します。

[Raspberry Pi側]

[PCA9685側]

電池(単三電池4本が入った電池ケース)を画像のように接続します。

GND側➡マイナス(黒)  V+側➡プラス(赤)

 

2)ライブラリのインストール

sudo pip3 install adafruit-pca9685

 

3)プログラムの作成と修正

新しく「servo_new.py」を作成し、「BrainAction.py」を修正します。

[servo_new.py]

 

[BrainAction.py]

NagoRobo_Main.pyを実行し、サーボモーターの稼働とスピーカーの正常稼働確認ができれば完成です。

 

5.4.10.音声認識機能の差し替え(docomoからGoogleへ)

現在、声を文字変換する音声認識機能は、docomoの音声認識APIを利用しています。これをGoogleの音声認識APIの利用にプログラムを修正します。

1)VoiceToText_Google.pyを修正します。

声を文字化できなかった場合にエラーが起こらない様に処理を分岐するように「VoiceToText_Google.py」を修正します。

[VoiceToText_Google.py]

 

2)BrainAction.pyを修正する。

[BrainAction.py]

 

3)NagoRobo_Main.pyを修正します。

[NagoRobo_Main.py]

NagoRobo_Main.pyのプログラムを実行し、文字化したデータとその確度が表示されたらOKです。

 

前の投稿/次の投稿/メニューページへ戻る

5.4.11.NagoRobo_Main.pyを自動起動する

Raspberry piを起動した際にロボットのプログラム自動的に起動することができると便利なので、その設定を行います。

手順としては

1)ロボットのプログラム(NagoRobo_Main.py)がどのフォルダからでも起動できるように、プログラム内部でフォルダを参照してデータを取得している部分を、動的にファイルの場所を取得できるように修正します。

2)自動起動の設定を行う。設定内容としては、ターミナルを起動しNagoRobo_Main.pyをパス付で実行する。

では、順番に対応します。

1)プログラム内部のフォルダ内にあるファイルのパスを動的に取得するように変更。

変更対象のファイルは下記の4つです。

keylist.json

phraselist.json

yahoo_arealist.txt

RobotNago-〇〇〇〇.json(googlekeyファイル)

[NagoRobo_Main.py]を修正します。

# ★と記載されている部分を追加/修正します。

[NagoRobo_Main.py]

keylist.jsonとRobotNago-〇○○○.jsonをパスを指定して参照するように修正します。

[GetWeather.py]

yahoo_arealist.txtをパスを指定して参照するように修正します。

[news_rp_speak.py]

phraselist.jsonをパスを指定して参照するように修正します。

2)自動起動用の設定を行います。

①cd ~/.config/lxsession/LXDE-piで、フォルダーを移動します。

④「sudo nano autostart」でファイルを開きます。

⑤「autostart」ファイルの中に下記を追記して保存します。

@lxterminal -e sudo python3 /home/pi/Python3/NagoRobo_Main.py

再起動し、自動でターミナルが起動され、NagoRobo_Main.pyが実行できていたらOKです。

前の投稿/次の投稿/メニューページへ戻る

 

5.4.9.Google Cloud Text-To-Speechを試してみる

テキストを読み上げる機能は、5.2.6.1.から5.2.6.3.までに作成していますが、ここでは新しくリリースされているGoogleのAPIを利用してテキストの読み上げを行えるようにします。

1)ライブラリをインストールします。

sudo pip3 install –upgrade google-cloud-texttospeech

2)プログラムを作成します。

[TextToSpeech_Google.py]

プログラムを実行し、「こんにちは」と女性の声で聞こえたらOKです。

※再生されない場合は、カード番号を変更して試してみてください。

前の投稿/次の投稿/メニューページへ戻る

5.3.2.2.motor_drv.pyをBrainAction.pyへ組み込む

Raspberry piからモーターを制御できるようになりましたので、このプログラムをBrainAction.pyに組み込みます。

 

1)Dialogflowの修正

①Entities/action_selfの追加

動きを制御するEntityとして前後/左右のEntityを登録します。

このEntityはIntentに登録した際に利用し、動きを制御するキーワードとしてプログラムで利用することから、取り扱いしやすいように英語表記で登録します。synonymsは日本語を含めて通常通り登録しておきます。

②Intents/Action_selfへのフレーズの追加

~Training phrasesを追加します。

足の動きの指示は赤枠の部分となります。「下げてください」、「上げてください」、「振ってください」は手の動きとなります。手を作るの章でプログラムを作成しますが、先に登録していても問題ありません。

~Response登録します。

正常にフレーズが認識された場合には、「了解しました。」と返すようにします。

 

2)BrainAction.pyの修正

Dialogflowの修正に伴い、プログラムの修正を行います。

①モーター制御のプログラムを利用できるように、motor_drv.pyのインポート処理を追加します。

➁BrainAction.pyの下記の部分を修正します。(仮置きしていたプログラムを今回のDialogflowの登録に合わせて修正しています。)

修正前

修正後

NagoRobo_Main.pyを動かし、「前進」「右」「左」などのDialogflowに登録しているフレーズを言って、「了解しました。」とロボットが発声し、モーターが動いていることが確認できればOKです。

前の投稿/次の投稿/メニューページへ戻る

5.3.2.1.DCモーターを動かす

足としてタイヤを動かすためにDCモーターを使います。

Raspberry Piから、DCモータを制御するために、モータドライバを経由してDCモータに接続。制御プログラムを実行することでモーターを動かせるようにします。各部品はブレッドボードとジャンパー線を利用して接続します。

1)Raspberry Pi、ブレッドボードにジャンパー線を接続します。

【Raspberry Pi側】

ジャンパー線を下図の通りに接続します。

【ブレッドボード側】

ジャンパー線を下図の通りに接続します。P4、P15などのPがついている番号はRaspberry Piのピンの番号(GPIOの番号ではありません)です。

※電池、DCモータ、抵抗をを下記のように表しています。

ブレッドボード上の配線が左右対になるようにモータードライブの差し込みは同じ向きにします。

Raspberry Pi側とブレッドボード側のジャンパー線それぞれに、Raspberry Piのピンの番号や、モーターの左右、電池の+/-をタグ付けしておくと接続が簡単です。

Raspberry Pi側の線とブレッドボード側の線の色は合わせてください。Raspberry Pi側のジャンパー線とブレッドボード側のジャンパー線を接続の際にわかりやすくなります。

ジャンパー線を全て接続するとこのようになります。ちょっと複雑に見えますが、それぞれの配線にタグ貼ることで再接続する時にスムーズに接続できるようにしています。

2)プログラムを作成します

モーターを動かすために必要なライブラリをインストールしてください。

sudo pip3 install wiringpi

[motor_drv.py]

プログラムを実行し、2つのモーターが回ればOKです。

前の投稿/次の投稿/メニューページへ戻る

※仮想環境について

仮想環境について

Raspberry PiにはOSを準備すると、デフォルトで2つのバージョンのPython(version2.7とversion3台)がインストールされています。よって、私たちが改めてインストールする必要はありません。ただし、開発する場合には、開発するプログラムによっていろいろなライブラリーを組み込んで開発する必要があります。このライブラリーの組み込み(インストール)で、ライブラリー同士が干渉しあってトラブルが発生して開発でつまずくことが多いことから、インストールしているライブラリを管理しやすいように、プログラム毎に個別の環境を用意し、各環境に必要なライブラリだけをインストールして開発を行うことによりライブラリの導入によるトラブルを減らすことが可能です。

この個別の環境として、仮想環境というものを開発プログラム毎に用意して、上記の個別の環境を実現することが可能です。

ただし、今回の開発ではRaspberry pi のGPIO制御を行うにあたってsudoでの実行が必須となっている箇所があります。よって、今回の開発では、プログラム管理用のフォルダは作成して管理するものの、ライブラリの管理はドキュメント上で管理することとし、仮想環境を利用しない方針とします。

しかし、仮想環境そのものは開発上有効なものであることから、仮想環境の構築の仕方について以下に説明します。

2)仮想環境作成の手順

①仮想環境を作成するためのツールはPython3.3以降標準で入っているvenvを利用します。(※インストールは不要です。)

➁プロジェクト管理用のフォルダーを作成

基本的にはどのようなフォルダー名でも構いませんが、今回は「home/pi」の直下に「Python3Venv」名前のフォルダーを作成します。「home/pi」直下とはpiというファルダの事です。

フォルダの作成はターミナルから行います。Terminalを起動しましょう。Terminalを起動すると下記の画面が立ち上がります。             Terminalで操作したいフォルダを指定する時はcdというコマンドを使ってファルダを移動する必要があります。ですが、Terminalは起動するとデフォルトでhome/pi直下にディレクトリ(ファイル)がありますので今回は移動する必要はありません。フォルダの作成はTerminalに下記を記述し作成する事ができます。

mkdir Python3Venv

➂個別プロジェクト用の仮想環境の作成

上記で作成したフォルダーに移動して下記のコマンドを実行して、個別プロジェクト用の仮想環境を作成します。今回はPython3(pythonのバージョンv3台)で開発開発します。「py3test」という環境を作成します。

cd Python3Venv                               ←フォルダー移動

python3 -m venv py3test           ←環境作成

※赤字の部分はpython3の環境を作成することを指しています。Python2の場合にはpython2と記載して作成します。

※少し実行に時間がかかります。

 

④作成した仮想環境の起動

作成した仮想環境を起動するには、作成した仮想環境のフォルダ「py3test」以下のコマンドを実行します。

cd py3test      ←フォルダー移動

source bin/activate ←仮想環境の起動

実行すると上記のような画面となります。

 

⑤簡単なPythonプログラムの実行

Pythonを起動します。

python ←Pythonの起動

下記のプログラムを実行します。

print(‘test’)

※Python v3.5.3が起動します。

※問題なく実行できます。

⑥仮想環境を終了する。

仮想環境を終了させるためには、Pythonを終了させて、下記のコマンドを実行します。Pythonの終了はCtrl+Zで終了します。

deactivate

※もとのフォルダーの状態に戻ります。

 

⑦仮想環境の効果

PCに新たなソフトをインストールする時、手順通りに行っているのにうまくいかない事はありませんか?その多くの原因は別のソフトとの相性が悪く衝突が起こることにあります。1度インストールしたソフトはPCに全体に影響を与える為、衝突の原因になっているソフトをアンインストールしないとうまくインストールできないのです。しかし、どのソフトと衝突しているのかを調べるのはとても難しく、インストールを諦めてしまう方もいるのではないでしょうか。

仮想環境は、例えばライブラリをインストールした場合には、その環境にのみ適用され、他の環境には影響を及ぼしません。

例えば、仮想環境でインストールの必要なライブラリをimportします。

import pyttsx3

インストールしていないのでエラーとなります。

一旦Pythonを終了させて、ライブラリをインストールします。

pip install pyttsx3

その後、再度Pythonを起動してimport します。

今度はインストールしてもエラーとなりません。

では、一旦仮想環境を終了させて通常の環境で同様にimportしてみます。

エラーとなります。これで、他の環境に影響を及ぼしていないことがわかります。

仮想環境の作成は以上です。

※仮想環境で、pythonを起動する場合には今回はpythonバージョン3台の環境作成しているので、コマンドとしては「python」のみでバージョンを意識する必要はありません。

通常の環境では、バージョン3のpythonを起動する場合には「python3」と実行する必要があります。

前の投稿/次の投稿/メニューページへ戻る