俺のクソレシピ

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

記事一覧

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 ドライブ

CSSアニメーションとJavaScriptで下から出てくるダイアログを作る

今回は、前回の記事で紹介したデジタル時計とアナログ時計とアラームを組み合わせたもので使った、俺が作ったダイアログを凡用化して作り直したので紹介します。
解説なんてどうでもいいから早く使いたいという方は、目次で使い方まですっ飛ばしてください。
ちなみに、jQueryは全く使っていません。

前回の記事
myprogramming.hatenablog.com

f:id:myprogramming:20170626201822p:plain

CSSアニメーションについて

CSSアニメーションではJavaScriptなどを使わなくても簡単にキーフレームを指定したアニメーションを実現することができます。cssアニメーションについて詳しくは下記リンクで詳しく解説されています。

CSSアニメーション 入門 - Qiita

今回は先にキーフレームだけCSSで定義しておいて、あとでJavaScriptでアニメーションを定義するというふうにしています。CSSのコードは以下のとおりです。


JavaScriptCSSアニメーション

JavaScriptCSSアニメーションを使うのは実に簡単です。JavaScriptCSSアニメーションを使うにはまずJavaScriptCSSを操作しないといけません。というかそれだけです。JavaScriptCSSを操作するには次のように書きます。

要素.style.プロパティ = "値"; (値は文字列です)

そして今回はCSSアニメーションなので、

要素.style.animation = "値";

のようにして書きます。コードは次のようになりました。

まず引数についてですが、第一引数はダイアログに表示する文字です(HTMLもOK)。第二引数はボタンに表示する文字で、第三引数はボタンがクリックされた後に実行する関数です。そしてinnerHTMLでダイアログに表示する文字とボタンを追加します。次に、CSSアニメーションでダイアログを表示します。ダイアログを表示して、ボタンがクリックされたらダイアログを非表示にして、第三引数で受け取った関数をsetTimeoutで2秒後に実行します。なぜ2秒後に実行するのかというと、アニメーションに2秒かけているので、2秒後に実行しないと、ダイアログが完全に非表示になる前に実行されてしまうからです。ちなみに、bottom_dialog_hideという関数はボタンを押さなくてもダイアログを非表示にできるというものです。

使い方

使い方は簡単です。

まず、HTMLで、

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

をheadに、

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

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

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

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

bottom_dialog(ダイアログに表示するHTML, ボタンに表示する文字, ボタンが押された後に実行する関数);

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

bottom_dialog_hide();

を実行してください。


ダウンロード

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

bottom_dialog.zip - Google ドライブ

まとめ

どうでしょうか。今回はalert的なものを作ってみましたが、自分で作ると結構カスタマイズできる、というか無限にカスタマイズできるのでいいですよね。この応用としてconfirmのような確認ダイアログを作ってみるのもまたいいと思います。今度できたら確認ダイアログの方も紹介しようかな。では、今日はこのへんで。

JavaScriptで時計を作る(完成編)

はいこんにちは。今日は2回目ですけど・・・さっき作ったアラームと前に作ったデジタル時計、アナログ時計を組み合わせて、全体的に見やすくして作り変えてみました。

f:id:myprogramming:20170626201822p:plain

どんな感じになったのか

今回、作ったものを早速デモページにアップしてみたんですけど、どんどん改良していくうちにめちゃくちゃ読みにくくなってしまったので、解説はしません。スイマセン。でも、これは俺的にはまあまあ自身があるのでぜひ見てください。これには、俺が作ったモーダルウィンドウ的なものを使ってたり、アラームの時間の設定にSwiperというJavaScriptで簡単にスライドショーを作れるものを使っていたり、Cookieで設定を保存したりと、けっこう色々やってみました。

Swiperについてはコチラ
Swiper - Most Modern Mobile Touch Slider

ダウンロード

一応ダウンロードできるようにしておきました。

時計.zip - Google ドライブ

まとめ

どうでしょうか。俺的にはまあまあのできかなとは思っているのですが、皆さん的にはどうでしょうか。もし、もっとここをこうした方がいいと思うという所があればぜひコメントを下さい。JavaScript初心者の方はこんぐらいのものは簡単に作れるぜ~っていうぐらいになれるように頑張ってください。あと、JavaScriptだけじゃなくて結構CSSとかも使っちゃってるのでそこんとこはすんません。では、さようなら~。

JavaScriptで時計を作る(アラーム編)

はい、コンニチハ。今回は「JavaScriptで時計を作る」第三弾、アラームを作っていきたいと思います。

f:id:myprogramming:20170626201822p:plain

アラームを作る

ではアラームを作っていきます。コードはこんな感じでしょうか。

けっこう長くなってしまったのでがんばってください!

今回はアラームをオンにするかどうかのチェックボックスと時間を設定するためのセレクトボックス、設定を保存するためのボタンを作っています。セレクトボックスは全部書いているとものすごく長くなってしまうので、JavaScriptのfor文で書いていて現在時刻に合わせるようにしています。

そして、main関数で1秒毎に更新しています。ここで、alarm_setがtrueでalarm_hourとalarm_minuteが現在時刻だったらアラームを鳴らして、メッセージとアラームを止めるためのボタンを表示します。そして、そのボタンが押されたら非表示にしてアラームを止めるのですが、アラームを鳴らしたときに1回alarm_setをfalseにしないと止めても止まらなくなってしまうので気をつけてください。しかもfalseにしたままだと、次その時間になっても鳴らないので、設定を保存する時、アラームをオンにするならばalarm_set2もtrueにしておいて、alarm_set2がtrueでアラームをセットしている時間でないならばalarm_setをtrueにするというようにすれば、アラームを止めるとちゃんと止まるけど次にその時間になったらちゃんと鳴るというふうになります。

また、アラームが鳴り終わったときもendedイベントでメッセージなどを非表示にしています。

ちなみに、設定を保存するときにalarm_setがtrueならsoundをロードしていますが、これはスマホだとユーザーからのイベントがあったときしか音声を再生できないので、このときにロードすることで解決しています。

デモ

前回説明したウェブクロウで今回のデモページを作ってみました。

http://myrecipe.webcrow.jp/alarm/

前回の記事
myprogramming.hatenablog.com

まとめ

今回はアラームを作ってみましたが、少し長くなってしまったものの、基本的には難しいことはやっていないのでけっこう簡単だと思ったのではないでしょうか。こんな感じで、ちょっとしたものなら書き方がわかっていれば簡単に作ることができてしまいますし、わからないことがあっても調べれば大抵すぐ出てきます。なので、みなさんもこんな感じのちょっとしたものをたくさん作っていると自分の知識も上がるしモチベーションも上がると思うのでぜひやってみたらどうでしょうか。今回はこのぐらいにしといて、また今度!

ウェブクロウ使ってみた

はいこんにちは。今回は無料レンタルサーバーのウェブクロウを使ってみました。


f:id:myprogramming:20170716110409p:plain

無料レンタルサーバーとは

無料レンタルサーバーとはサーバーを無料で借りることのできるサービスのことです。そもそもサーバーとは・・・長くなるので解説サイトのリンクを張っておきます。

サーバって何?初心者でもわかる4つのサーバの種類 | 構築ツールの最新情報や基礎知識 | 知る・学ぶ | Marketing Bank (マーケティングバンク)

無料レンタルサーバには様々な種類があり、無料と見ればだいたい予想はついたと思いますが、もちろんいろいろな制限もたくさんあったりします。

ウェブクロウとは

www.webcrow.jp

ウェブクロウとは無料レンタルサーバのサービスの一つです。ウェブクロウでは、ファイルは1GBまで、PHPMYSQLは使えないなどの制限はありますが、多くの無料レンタルサーバーでは広告が表示されるのに対して、ウェブクロウでは広告が表示されません。また、サブドメインなら無料で取得できます。ちなみに、PHPMYSQLを使用可能にしたり、ファイルの容量を2GBにするかわりに、スマホで広告を表示する、といったオプションもあります。

実際に使ってみた

どんな感じなのか実際に使ってみました。俺はこのブログのプログラミングのデモページを作りたいと思っていたので実際に作ってみました。どんな感じなのか率直に言うと大規模なサービスを作ろうとしてない人はこれで十分かなと思いました。WebFTPもあったので、編集もかなり楽にできた感じです。ただ、1GBなので、ブログとか更新していってファイルがどんどん増えていく場合はあまり向かないと思います。また、ウェブクロウを運営しているネットオウルは他のサーバーやドメインのサービスなどを運営していて、有料だけど制限がもっとなくなったりするので、そちらの方を検討してみるのもいいと思います。

作ってみたデモページ
俺のクソレシピ デモページ

まとめ

結局、俺的にはウェブクロウは良かったと思います。ただ、それは個人の用途にもよると思うので、皆さんにあったレンタルサーバーを探してみてください。では、また今度!