俺のクソレシピ

おもにプログラミングについて俺の趣味についてテキトーに書いています。

記事一覧

Raspberry Pi(Raspbian)にArduino IDEをインストールする

皆さんこんにちは。

突然ですが、Raspberry PiArduino IDEをインストールしてみたいなと思って適当にやってみたら普通にできてしまったのでその方法を皆さんにも紹介したいと思います。

なお、この記事にたどり着いた方はRaspberry PiArduinoについての知識がある方がほとんどだと思うのでRaspberry PiArduino自体については解説しません。もし気になったらググれば大量に情報があるので、ぜひ調べてみてください。

f:id:myprogramming:20170924170222p:plain

インストールする

Linuxでインストールといったらapt-getコマンドだと思ってやってみたら、普通にできちゃったのでその方法を説明します。
ブログ的にはこれでうまくいかないほうが面白いんだけど...(笑)

まず

sudo apt-get update コマンドと
sudo apt-get upgrade コマンドで

パッケージを一応更新しておいてください。

パッケージが更新できたら、

sudo apt-get install -y arduino コマンドを

叩けばOKです。

  • yオプションはすべての質問にYesで答えるようにするものです。例えば、「続行しますか」のような質問がでなくなりすべてYesで答えたことになります。

そしたらRaspberry Piを再起動してやれば、左上のアプリケーションメニューのプログラミングカテゴリーと電子工学カテゴリーに入っています。どちらも同じものなので好きな方から起動してください。ちなみに、もし表示されていなかったら設定のMain Menu Editorで表示させることができます。

もし、コマンドから起動したい、という方がいるのなら

arduino コマンドでも起動することができます。

f:id:myprogramming:20170924181325p:plain
アプリケーションメニューに表示されているArduino IDE

f:id:myprogramming:20170924181404p:plain
Arduino IDEを実際に開いてみたところ

まとめ

今回はすごく簡単でした。
俺も少し驚いていて、もっと早くやっときゃよかったな、なんて思ったりしてます。
今後、Raspberry PiArduinoの連携なんかもできたらいいなと思っているので、そちらの方も是非読んでみてください。
皆さんも是非試してみてください。

Arduino Uno(互換機)が届いたぞ! Lチカも成功!

皆さんArduinoを知っていますか?
Arduinoは誰でも始められるように作られたマイコンボードです。
今回Arduinoの互換品を購入してみたので紹介していきたいと思います。

※この記事では動作確認程度しかしていないので詳しい解説はしていません。

f:id:myprogramming:20170913191316j:plain

Arduinoの互換品

まずArduinoオープンソースハードウェアなのでたくさん互換品が世の中に出回っています。
その中で今回購入したものは、Arduinoの中で最もメジャーなArduino Unoの互換機の

EasyWordMall UNO R3開発ボード USBケーブル付属 Arduinoと互換

というものです。
これは、500円くらいで俺の場合、8日で届きました。
ハズレがあるかもと思って3台購入しておいたのですが、全てピン曲がりもなくちゃんと使える状態でした。
本家は1台3000円以上するので、これだと3台1500円位と、とてもお得ですね。
本家1台分で6台買えてしまいます。

ちゃんと動くかLチカしてみた

やはりArduinoといったらLチカ(LEDをチカチカ点滅させることで、ArduinoHello Worldみたいなもの)だと思い、俺もやってみました。
俺は一応Arduinoを以前にやっていたので、スケッチ(Arduinoのプログラム)を書くことができました。

そのスケッチはこんな感じ。

ArduinoとLEDと抵抗の回路。

f:id:myprogramming:20170913195116p:plain

Lチカしている様子。


まとめ

今回はかなりお得な買い物ができたと思います。
今後、ラジコンとか作ったりできたらいいなと思っています。
これからは、Arduinoについての記事も結構書いていくと思うので、Arduinoを始めてみたいと思う人は是非参考にしてくれるとうれしいです。

JavaScriptで文字列を複数行記述するのが結構簡単だった

ブログを書くのがだいぶ久しぶりになってしまいましたが、今回はJavaScriptで文字列を複数行記述する方法を紹介したいと思います。ちなみにここでの複数行はソースコードは複数行で表記するけど実際には一行として扱われる場合ではなく実際に改行が入る場合です。

f:id:myprogramming:20170626201822p:plain

改行するところに \n を記述する

これは今まで俺が使っていた方法でした。ただ、どこで改行したのかわかりにくいし一行がとても長くなってしまっていました。

クォーテーションではなくグレイヴ・アクセントを使う

この方法はシングルクォーテーションやダブルクォーテーションではなくグレイヴ・アクセントを使って文字列を定義する方法です。グレイヴ・アクセントとは ` のことで Shift + @ で入力できます。この方法を使うと自由に改行してもそのまま文字列を記述し続けることができます。

まとめ

ずいぶんと簡単に複数行の文字列を記述することができるようになりましたね。この方法を使えば、修正したりするときにもすぐ改行してあるところがわかりますね。皆さんもこのやり方でぜひ楽をしてみてください。ではまた今度。

JavaScriptでクソゲーを作ってみた

JavaScriptクソゲーを作ってみたので一応紹介します。

f:id:myprogramming:20170626201822p:plain

作ったゲームのリンク

GSG -Geometric Shooter Game-

このゲームは一切画像を使わず作ってみました。

それと、CSSJavaScriptでは様々な機能を使っているのでその一部を今度紹介したいと思います。

このゲームは改良しているうちにものすごく読みにくいプログラムになってしまったので、このゲームでの解説は省かせてもらいます。解読してみたい人は是非頑張ってみてください。

一応ダウンロードリンクも貼っておきます。

GSG.zip - Google ドライブ

Pythonで名言をツイートするbotを作ってみた

だいぶ遅れてしまいましたが、今回はPythonで名言をツイートするbotを作ってみたので解説します。ちなみに、Raspberry Piを使っていて名言は名言集.comから取得しています。

名言bot
python 名言bot (@py_meigen_bot) | Twitter

名言集.com
名言集.com - 名言・ことわざ・金言・格言集めました

f:id:myprogramming:20170728192959j:plain

名言を取得する

名言を取得する方法について説明します。まず、今回は名言集.comのランダム名言から取得します。HTMLを解析して名言を取得します。まずサイトのHTMLを取得して、その中から取得したい文字列(今回の場合は名言)を取得します。ズラズラ書かれていてもわかりにくいと思うのでまずプログラムを見てもらいましょう。

Python3ではurllib.request.urlopenを使ってHTMLを取得します。ただそのままだと文字化けしてしまうのでデコードします。名言集.comは、utf-8エンコードされているのでdecode('utf-8')でokです。そして、HTMLが取得できたら正規表現で名言とその作者を取得します。

urllibとデコードについて
Python3で、urllibとBeautifulSoupを使ってWebページを読み込む - minus9d's diary

正規表現について
Pythonの正規表現の基本的な使い方 | UX MILK

Pythonでツイートする

次にPythonでツイートする方法について説明します。まずpython-twitterをインストールします。

pip install python-twitter

importするときはpython-twitterではなくtwitterなので気をつけてください。

このソースコードにある"your ..."のところは自分のキーに置き換えてください。

twitterapiキーの取得について
Twitter API Key を取得する方法 | phiary

ちなみにtwitterapiキーを取得するには電話番号をtwitterアカウントに登録しないといけないのですが、俺の場合なぜかパソコンだと登録できなくてスマホだと電話番号の登録ができました。

取得した名言をツイートする

では実際に取得した名言をツイートしてみましょう。さっきの2つのプログラムを組み合わせるだけですね。

これを実行すれば名言をツイートしてくれるプログラムの出来上がりです。・・・ん?これじゃbotじゃない!!

Pythonプログラムを定期的に実行する

botにするには自動で定期的に実行しないといけませんね。定期的に実行するにはHerokuなどがありますが制限がかかっていたり設定がめんどかったりするので、今回は眠っていたRaspberry Pi3を使ってやってみました。ちなみにRaspberry Piのバージョンはなんでもokです。Raspberry Piで定期的にプログラムを実行するにはcronを使います。今回、俺は5分ごとにツイートしようと思ったので設定は以下のようになります。

*/5 * * * * python3 /home/ユーザー名(デフォルトではpi)/meigen_bot.py

cronの使い方について
決まった時間に処理する | Make.

ちなみに近々、Raspberry Piをやったことのない人のためにRaspberry Pi入門の記事を書きたいと思っています。

まとめ

今回はPythonRaspberry Piで名言をツイートするbotを作ってみました。Raspberry Piを使ったため少しお金がかかってしまいましたが、Raspberry Piならbotをやめた後でも使えますし、そこまで高くないのでRaspberry Piを買ってやってみるのもいいのではないでしょうか。今回は名言をツイートするというほぼ無意味なbotを作ってしまいましたが、これを応用すれば天気予報をツイートする実用的なものや、Raspberry Piを使っているのでセンサーから得た情報をツイートするものを作ることだって簡単にできてしまいます。ぜひ皆さんもいろいろなbot作りをしてみてください。

Pythonで文字列の特定の文字の削除

Pythonで文字列の何番目かの文字を削除する方法が探してもなかったので一応できる方法を紹介します。もしそういう方法があったら、教えていただけるとうれしいです。

f:id:myprogramming:20170627164334j:plain

スライスで削除する文字以外を取得する

str_del = str[:*1文字列のインデックス]+str[文字列のインデックス+1:]

という風にすれば簡単にできます。この方法では、削除したい文字以外をスライスで取得してそれを別の変数に代入しています。

スライスについて詳しくはこちら

スライスを使った部分文字列の取得 - 文字列 - Python入門

文字列を一旦リストに型変換する

この方法では文字列を一旦リストに型変換してdelを使ってリストの特定の要素を削除してから、そのリストをjoinを使って文字列に戻しています。こちらもインデックス番号には気をつけてください。

いちいち書くのがめんどくさいから関数化する

こんなのいちいち書くの面倒なので関数にしちゃいましょう。

引数には文字を削除したい文字列とその削除したい文字のインデックス番号を渡します。

str_del("abcdef", 2) //abdef

まとめ

文字列の何番目かの文字を削除したいと思って今回はこのようなやり方をしましたが、もしもっといい方法があったりちゃんとした書き方がもとからあったら教えてくれると嬉しいです。ではまた今度。

*1:文字列のインデックスは0から数えてください。要は-1をしてください。(例:3番めの文字→2)

CSSアニメーションとJavaScriptで確認ダイアログを作る

今日は前回やろうかと書いていたconfirmのような確認ダイアログを作ってみました。
この記事では、前回の記事を前提に話を進めていくので、前回の記事を読んでない方は前回の記事を読んでからこの記事を読むといいと思います。
ただ使い方だけ知りたいという方は、目次で「使い方」に飛んでください。

前回の記事
myprogramming.hatenablog.com

f:id:myprogramming:20170626201822p:plain

ほとんど前回と同じ

今回作る確認ダイアログは、前回のダイアログと全然変わりませ。前回と違うのは、ボタンを「はい」と「いいえ」の2つ作って、それぞれのボタンが押された時の処理を定義しておくだけです。

実際のプログラム

実際のプログラムは以下のとおりです。

CSS

前回と何が変わったのっていうくらい変わってませんが、ボタンのwidthとmarginが少し変わってます。これはボタンが2つになったので、そのボタンを横に並べるためです。

JavaScript

こちらもあまり変わってません。こっちは、ボタンをinnerHTMLで書く時に「はい」と「いいえ」の2つにボタンが増えています。そして、「はい」と「いいえ」のボタンそれぞれが押された時の処理を定義していて、ダイアログを閉じる関数も「はい」が押された時の処理をするのか「いいえ」が押された時の処理をするかで2つ定義しています。

使い方

使い方は前回とほとんど変わりませんが、一応載せておきます。

まず、HTMLで、

<link rel="stylesheet" href="http://myrecipe.webcrow.jp/bottom_confirm/bottom_confirm.css">

をheadに、

<div id="bottom_confirm_base"></div>
<script src="http://myrecipe.webcrow.jp/bottom_confirm/bottom_confirm.js"></script>

をbodyに記述します。
このとき、

<div id="bottom_confirm_base"></div>

は、一番手前に配置してください。ほとんどの場合は、実際に表示するところの一番後ろに記述すれば大丈夫です。
そして、JavaScript

bottom_confirm(ダイアログに表示するHTML, 「はい」のボタンに表示する文字, 「いいえ」のボタンに表示する文字, 「はい」のボタンが押された後に実行する関数, 「いいえ」のボタンが押された後に実行する関数);

というように関数を呼び出せばOKです。引数の関数で引数を渡したいときは無名関数の中で関数を呼び出してください(setTimeoutのような感じ)。
もし、ボタンがクリックされなくてもダイアログを閉じたい場合は

bottom_confirm_yes_hide(); (「はい」が押された時の処理)
bottom_confirm_no_hide(); (「いいえ」が押された時の処理)

を実行してください。


ダウンロード

ダウンロードして使いたい方はこちらから

bottom_confirm.zip - Google ドライブ

まとめ

今回は前回に続いてconfirmのような確認ダイアログを作ってみました。ものすごく簡単でしたね。やっぱり元になるものがあるのとないのでは全然違います。今回変えたのは、ボタンを2つに増やしてそれぞれがクリックされた時の処理を書いてあげただけです。CSSを少しいじれば好きなようにデザインできるし、JavaScriptをいじれば自分の好きなように作り変えることが簡単にできるのでぜひやってみてください。今回の記事はここまで!


2017/5/16 追記

背景を暗くする機能をつけてみました。背景は暗くなりますがバックのスクロールとクリックなどはできるままです。

CSS

JavaScript

使い方は

<div id="bottom_dialog_base"></div>

の前に

<div id="bottom_dialog_back"></div>

を記述するだけです。

デモ

http://myrecipe.webcrow.jp/bottom_confirm_new/

ダウンロード

bottom_confirm.zip - Google ドライブ