すごいたんぶらー

何作ったの？

そも、UnityRoomのゲームジャムでは毎回テーマが決められています。そのお題の発表から1週間でゲームを完成させてアップロードまでする、という流れです。今回のテーマはずばり「つながる」でした。投稿者はその「つながる」というお題に沿ってゲームを作ります。

俺はそのお題に忠実で、そして何もひねらず「星をつないで星座を完成させるゲーム」を作りました。

https://unityroom.com/games/spacetraveler

TravelerとTylerが韻を踏んでるんですって、ほんとかなぁ？

散りばめられた星には重力があるんですって

クリックすると斥力が働く仕組みを利用して宇宙船で星座を作るんですって

北斗七星は星座なのか、作りながら思い、そして考えるのをやめた

左下のミニマップはカメラとかレイヤーとかをいじって実装してるんですねぇ

このゲームのポイントとかは？

このゲーム、1週間という時間を言い訳にするわけではないんですが、個人的には内部的な工夫点が特にない気がしてるんです。だから春休み中の投稿を躊躇したんですよ。とりあえず作って完成させることを目指したって感じです。

遊び方の実装は頑張ったかもしれないですが、「遊び方を作らないと分からないゲームは遊ばれる前に飽きられるのではないか」という個人的な考えから、ゲームとしてはあまりいい点ではないと思ってます。何で実装したんだろう？

やりたかったこと

このゲームジャムでやりたかったことで60%ぐらい達成できたことは、どれだけコードを綺麗に書けるかでした。重複した実装やわけの分からない命名など、たまに俺が注意される事項ですね。

正直パワーに頼っている部分はなくはないと思うのですが、少しずつ良くなっているように感じます。もっと時間に余裕を持った開発が必要ですね・・・。

逆にやりたかったことでできなかったことは、面白いゲームを作ることですね！！！！！このゲームつまんない！！！！！

Unityや実装に関してもできなかったこと、もっと勉強が必要だと感じたことは色々ありました。色々ありすぎてほんと。。。

ゲームを作るって難しいな

今回、「ゲームの内容決め」「クラス設計」「実装」「デバック」などを1週間で行いました。正直、ただコードを書いていた人間には難しいことこの上なかったです。音とかビジュアルとかゲーム内容とか全然ダメだし。

まぁでも、完成して投稿した点を最大限に褒めたいですね！すごい！

今度はゲームでもWebでもないアプリケーションを作成してみたいですね。

何作ったの？

ゴミ箱とゴミゲームを作りました。

そもそもPCの最終課題は、マイコンを使った作品を作るというものです。条件は「このマイコンを使ってね」ぐらいです。マイコンの使い方やマイコンとLEDで回路を組むことなどは、PC内で実験形式で学びます。それらを踏まえて、PC内で学んでいない部品（センサーとか）については、自分で調べながら最終課題に使っていくようになっています。

周りの人の作品はとても独特で面白いものでした。指輪をかざすと杖が下から現れるボックスや仮面ライダーに変身できるキット、話しかけると家電をつけてくれるbotなどたくさんありました。

一方俺は、ゴミ箱とゴミゲームを作りました。

目的は？

ゴミ箱の仕組みは「ゴミ箱にゴミを入れると、センサーが反応してPC上のゲーム内でゴミの数をカウントする。」です。ゲームは「カウントされたゴミの数だけ落ちてくるゴミをキャッチして燃やす」という内容です。Unityで作りました。

作品の外観とか遊び方とかコードとかはこのスライドを見てください。（決して時間がないわけではないですよ！！！）

「めんどくさいゴミ捨てや片付けが楽しくなり、習慣づくようになる」という目的のもと作ってみました。お子さん向けの作品かもしれないです。

あけましておめでとうございます！

今年初の更新でした・・・。

もうそろそろ一旦落ち着きそうなので、色々したいです。

使うもの

Python3（色々実現するのに必要なやつ）

urllib（html取ってくるのに必要なやつ）

BeautifulSoup（htmlをいい感じにするのに必要なやつ）

selenium（ブラウザを自動で動かすのに必要なやつ）

corntab（コードを予約実行するのに必要なやつ）

流れはこうです。

Tumblrで決まった時間に予約投稿をする

↓

urllibとBeautifulSoupを使ってTumblrの投稿を決まった時間にスクレイピングする

↓

BeautifulSoupを使って2018年12月31日の投稿を見つけ出し、その記事のpostURLを取得する

↓

seleniumでブラウザ操作し、自動でDiscordにログイン、投稿をする

そして、以上の動作を書いたファイルをcorntabで決まった時間に行います。つまり、この流れは決まった時間に実行されるファイルによって行われます。Discordの予約投稿と言った感じでしょうか。

悪用しないかつ、セキュリティ意識ガバガバな人にオススメの逸品です。

スクレイピングとURLの取得

自分のTumblrから12月31日の記事のURLを取得するところまで行きましょう。

#自分のTumblrのURL tumblr_url = "https://kettypengin.tumblr.com/" #htmlもってきていい感じにしてる html = urlopen(tumblr_url) soup = BeautifulSoup(html, "html.parser") #自動でブラウザを開くための仕組み driver = webdriver.Chrome() #開きたいURLを貼る、今回はdisordのチャンネルURL discord_url = "chromeで勝手に開いて欲しいURL" driver.get(discord_url) #Tumblrのhtmlにあるarticleタグを全部引っ張ってくる article_tags = soup.find_all("article") #articleタグ内にあるdateクラスに記述された日付を見ている for article_count in range(len(article_tags)): article_tag = article_tags[article_count] date_class = article_tag.find(class_ = "date") date = date_class.p.string if(date == "2018-12-31"): #aタグでかつpostのURLを見つけ出す for url in article_tag.find_all("a"): if "post" in url.get("href"): #ここから下に目当てのURLが見つかった時の処理 #discordにログインする関数、次書く login_discode() #ロードしている最中なら10秒間止まるメソッド driver.implicitly_wait(10) #投稿する関数、次の次書く send_blogurl(url.get("href")) break

ここでは、Tumblrのhtmlの構造からどこに記事や日付やpostURLがあるのかを把握して当たりに当たりに行っています。スクレイピングをするには、そのサイトのhtmlの構造を把握すると簡単に行きます。力です。

ブラウザを起動してdiscordにログイン

次はDiscordに投稿するところです。ブラウザの起動から投稿まで全部自動です。

def login_discode(): dis_id = "自分のログインメールアドレス" dis_pass = "自分のログインパスワード" #discordのログインフォームのhtmlからid入力フォームを取得 loginid_form = driver.find_element_by_xpath("//input[@type='email']") #discordのログインフォームのhtmlからパスワード入力フォームを取得 password_form = driver.find_element_by_xpath("//input[@type='password']") #discordのログインフォームのhtmlから送信ボタンを取得 submmit_button = driver.find_element_by_xpath("//button[@type='submit']") #上で取得したフォームとボタンにそれぞれ入力、クリック動作 loginid_form.send_keys(dis_id) password_form.send_keys(dis_pass) submmit_button.click()

ここも力ですね。重要なのは先に書いたdriverです。ブラウザを動かすドライバをあらかじめインストールして読み込んでおく必要があります。

discordに投稿

最後は投稿です。とは言っても今までの復習みたいな感じです。

def send_blogurl(blogurl): #discordのメッセージ入力欄をhtmlクラスから取得 text_form = driver.find_element_by_xpath("//textarea[@class='textArea-2Spzkt textArea-2Spzkt scrollbarGhostHairline-1mSOM1 scrollbar-3dvm_9']") #取得した入力欄にurl（書きたいこと）を書いてえ送信 text_form.send_keys(blogurl) text_form.send_keys(Keys.ENTER)

htmlクラスはもちろん、htmlを読んで取得しましょう。

corntabでpythonファイルを決めた時間に実行

corntabはunix系で使えます。指定した時間に指定したことを実行してくれる偉い子です。

ターミナル等で下のようにうちましょう。

crontab -e

するとvimが起動するので、そこに日時等の指定などをいれます。

51 23 31 12 1 python3 コードの場所

これでコードの予約完了です。

試しに作ったdiscordのサーバーで発言してみた

corntabで7時47分に上のコードが起動するように設定して、実際にテストでログインから投稿までを動かしてみました。Tumblrは12月26日のを使ってます。ログインする時のメアドが見えているのでみなさんからのファンメール待ってます。

なんか、動きがすごいですね。

みなさんもぜひ自動投稿してみてください。

どんなゴミ箱を作るのか描いて分析する

早速なんですが、今回作るゴミ箱の絵を描いてみました。

どんなゴミ箱が作りたいか、誰にでもわかる素晴らしい絵ですね。

一応念の為まさかいないと思いますが絵を見て分からなかった人のために補足すると、『ほとんど直方体だけど下から上にかけてだんだん空洞が太くなっていく』みたいな感じです。そして何か見たことのあるマークを貼り付けます。ゴミ箱ですね。

こうして絵にしてみると、Blenderでどうやったらうまく作れるかわかってきました。重要な点は

左右対称に作る

自分が作った画像（マーク）を貼る

っぽいですね。

幸い、Blenderでどちらもできるみたいです。作りましょう！！！！！

オブジェクトいじる手順

Blenderで完全に左右対称のモデルを作るには、原型のオブジェクトを二等分にした方がいいです。というかしなきゃいけなさそうです。

よって、手順としては『オブジェクトを半分にする→左右対称モードにする→成形する→画像を貼る』です。

四角を半分にする

今回は直方体なんでこの四角をそのまま使います。先の手順の通り、この四角を半分にします。

この四角を右クリックしてエディットモードにしてから左にある『Tools→Add→Bisect』をクリックします。

その後、適当に上から下にビュッとマウスをドラックアンドドロップします。

そしたら左の『Plane Point』の値を全部0にして、『Plane Normal』の値をxだけ1にしてそれ以外を0にします。

そしたら左の『Clear Inner』か『Clear Outer』どちらかのチェックをつけます。

そうすると綺麗にバッサリとY軸を対称に右か左を切り捨てます。

どちらを切り捨てるかは好みです。

左右対称モードにする

そしたら左右対称モードにしましょう。

さっきの状態から『右の「スパナ🔧」のマークのアイコンをクリック→「Add Modifier」をクリック→「Mirror」をクリック』します。

すると、なんか片割れが現れました。Y軸を対称にミラーになっています。

この状態でゴミ箱を成形します。

画像を入れる・・・？

成形したゴミ箱はこちら！

面取り（丸みを帯びさせること）をして穴を開けて白色を付けました。オブジェクトのコピーの仕方を間違えて色々めんどくさかったですがとりあえず形はできました。

画像を入れようと思ったのですが、疲れました・・・。だから画像は次回にしようと思います。

yieldって何？

Pythonでの『yield』を説明するには『ジェネレータ』について、『ジェネレータ』について理解するには『イテレータ』について理解する必要があります。まってまだブラウザバックしないで。

『イテレータ』を理解すれば『ジェネレータ』や『yield』についてわかるので、頑張っていきましょう！！！！！！！

イテレータとは

イテレータとは『データを順番に取り出す方法を使っているオブジェクト』です。は？

実はPythonを使ったことある人のほとんどはイテレータにお世話になっています。

for i in range(0, 10): print(hasattr(i, "__iter__")) #False print(hasattr(range(0, 10), "__iter__")) #True

そこのrange()は実はイテレータです。range()は『指定された範囲の数を順番に取り出す』ことをしています。range()は、急に逆順になったり急に2個飛ばしになったりしないですよね。ちなみに2つのprint()では、第一引数のオブジェクトがイテレータオブジェクトかどうかを調べています。

ジェネレータとは

ジェネレータは『ジェネレータ関数』と『ジェネレータ式』という2つの言葉に分かれます。公式では『ジェネレータ』と書いてあったら『ジェネレータ関数』のことを示します。

ジェネレータの意味を端的に言うと、『イテレータを実装した関数や式』のことです。

yieldとは（実験しながら）

さてここでようやく『yield』ですが、yieldはジェネレータ（関数）で使います。

せっかくなのでさっきでてきたrange()を簡単に実装してみます。

def make_range(min, max): count = min while count < max: yield count count += 1

minを省略できるとか第3引数があるなどの厳密な実装は置いといてください。4行目でyieldが使われています。では、この関数を定義した状態で色々な方法で実行してみます。実験です。

1つ目：そのまま実行

make_range(3, 8) #generator object make_range at 0x7eff69bf2c50

2つ目：next()を使った実行その1

f = make_range(3, 8) print(next(f)) #3 print(next(f)) #4 print(next(f)) #5 print(next(f)) #6 print(next(f)) #7

3つ目：next()を使った実行その2

print(next(make_range(3, 8))) #3 print(next(make_range(3, 8))) #3 print(next(make_range(3, 8))) #3 print(next(make_range(3, 8))) #3 print(next(make_range(3, 8))) #3

4つ目：range()みたいにfor文で使う

for i in make_range(3, 8): print(i) #3 #4 #5 #6 #7

5つ目：2つ目を範囲外まで実行

f = make_range(3, 8) print(next(f)) #3 print(next(f)) #4 print(next(f)) #5 print(next(f)) #6 print(next(f)) #7 print(next(f)) #StopIteration

6つ目：next()とforの合わせ技

f = make_range(3, 8) print(next(f)) #3 print(next(f)) #4 print("-----") #----- for i in f: print(i) #5 #6 #7

7つ目：listとして取り出す

print(list(make_range(3, 8))) #[3, 4, 5, 6, 7]

yieldは

オブジェクトを1つ返す

next()やforで関数が格納された同じオブジェクトを使いまわすと続きがどんどん出てくる

なんか面白い

です。まだまだたくさんあるかもしれないんですが、今はとりあえずこれが特徴です。

yieldとメモリ

じゃあこのyieldとメモリが一体どんな関係なのか。それは『同じ変数を使いまわす』です。

上のrangeもどきのmake_range関数は、countを使いまわしています。これぐらいのデータ量ならlistで返したりしてもいいのですが、大量のテキストデータを読んで解析して返すとなった時に、とても役立ちます。

まぁとにかく、変数を使いまわすのでメモリの確保が最小限でエコであるって感じですね。これをうまく使えればめっちゃエコなプログラマーになりそうですね。

ながっ

今回はすごい長いですね・・・。

そういえばキーボード買いました。これでラズパイがうまく使えそう！

Flaskって何

FlaskとはPythonで書ける『軽量』Webフレームワークです。PythonのWebフレームワークというとDjangoが有名かもしれません。WebフレームワークというとRailsとか有名かもしれません。

Webフレームワークとは、Webサイトのあれこれの機能が入っていて改造しやすくしたもの（もの？）です。データベースを扱ったり、場合によって変わりうるみたいな動的なサイトを作るときに、Webフレームワークを使うことによってWebフレームワークを使わずに1から作るよりは比較的簡単に作ることができます。

んで、Flaskは自称『軽量』Webフレームワークらしいです。何が軽量なのかというと、他のフレームワークよりあまり複雑な構造ではないところです。詳しいことはここを読んでください。今は割とかなり忙しいので。逃げるわけじゃないですよ！！！！！！！！！！

CSSでフォントを変える

そもそもWebサイトのフォントってCSSで変えられるんですね。「お前そんなことも知らなかったのかよ笑」って思った人、本当その通りだと思います。

では早速。

この回ではあらかじめFlaskの環境があることを前提に話を進めます。詳しいことはここを見よう！

今はプロジェクトというボスがいるからそんなことを説明している場合ではないんだ！！！！！！

<!DOCTYPE html> <html lang="ja"> <head> <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename = 'fonts.css')}}"> </head> <body> <p>フォント変更を適応していない文</p> <p id = "relief">フォント適応1</p> <p id = "patience">フォント適応2</p> <p id = "regret">フォント適応3</p> <p>わああああああああ</p> </body> </html>

/*フォント適応1*/ @font-face { font-family: "relief1"; src: url("relief/knsw_fudangi_font-Regular.ttf") format("truetype"); } /*フォント適応2*/ @font-face { font-family: "patience1"; src: url("patience/CP_Revenge.otf") format("opentype"); } /*フォント適応3*/ @font-face { font-family: "regret1"; src: url("regret/genkai-mincho.ttf") format("truetype"); } #relief { font-family: "relief1"; } #patience { font-family: "patience1"; } #regret { font-family: "regret1"; }

from flask import Flask, render_template, request app = Flask(__name__) @app.route("/") def example(): return render_template("fonts.html") if __name__ == "__main__": app.run(debug = True)

こんな感じで書くとできるみたいですよ！！！（投げやり）

するとこんな感じで適応されるよ！！！（投げやり）

俺が今回実験したりして学べたことは

Flaskでは、cssなどの静的ファイルはstaticというフォルダに入れる

Flaskでcssなどの静的ファイルのリンクをつけるには『url_for』関数を使う

cssでフォントを変えるには『@font-face』でフォントを取得してから適応させる

『@font-face』は変数宣言みたいな感じで使う

Flaskは俺みたいなめんどくさがりにはとても楽で良い

です。

日本語チュートリアルがあるみたいなんでpythonで何か適当な軽いWebアプリを作りたい人はぜひ使ってみては！！！

そもラズパイとはなんぞや

ラズパイは『マイコン（マイクロコンピュータ）』というくくりの中の一つの製品です。『マイコン』とは、一言でなるべくわかりやすく言うと『小さいコンピュータ』です。そのまんまですね。

よく言われる例としては電化製品です。炊飯器とか電子レンジとか、物にもよるのですが電化製品には『小さいコンピュータ』が組み込まれています。その組み込まれている小さいコンピュータにプログラムを書いたり回路を組んだりすることで、炊飯器としての動きをしたり電子レンジとしての動きをしたりします。

マイコンには、上の例のような使い方をするものもあれば、パソコン並に使えるものなど様々な得意分野があります。そして、マイコンの種類も様々あります。スマホで例えるなら『Xperia』とか『Arrows』みたいな機種って感じです。

俺が今持っているのは『Raspberry Pi 2』という機種です。スマホで例えるなら『Xperia Z5』みたいな感じです。（性能とかが、とかいうことではない）

『Raspberry Pi 2』という機種はパソコンとして使えるという得意分野があります。めっちゃ端的に言うとOSが入れられます。つまり、パソコンでできる色々なことができそうな気がします！！！！！！！！！！

調理開始

「ちゃちゃっと繋げておーわり！」と思ったんですよ。でも、さっきの画像を見てほしんですが、キーボードなんて付いてません。俺の家にもキーボードなんていう高級なものはありません。あるのは型落ちのmacと型落ちのVAIOのノートPCです。

ここで思うのが「ラズパイをノートPCで操作したい」です。

そしてラズパイとノートPCを何で繋げるかです。ラズパイのポートをみながら消去法で考えました。

LANケーブルでした。

VAIOのノートPCにもラズパイにもLANポートがあるではないですか。

本題

別に解説のTumblrとかじゃないんで環境について詳細は書きません。めんどいので。ただ

Raspbianが入っているRaspberry Pi 2

WindowsにTeraTeamが入っている

の2つが俺の実行環境でした。

接続先の名前とか接続方法を設定してあげてます。

なんか出たので、心の広い俺は許して続行しました。

ラズパイにログインするときの認証を求められました。OSXとかWindowsでも起動した時に求められるあれみたいなもんです。初期値だとユーザ名は『pi』パスワードは『raspberry』です。

できました。

ウッキウッキすぎて猿のようにシェルコマンドを打って間違えてますね。

次の課題

不満があるとすれば

CUI（前の画像みたいにほとんど文字だけでの操作しかできない）

ラズパイのLANポートが使えない（windowsとの接続で使っている）

の2点です。ネット回線にも繋ぎたいですし。

実はGUI（いつもみたいにマウスとかで操作できる感じのやーつ）で操作できるようにチャレンジしたんですが、結果うまくいきませんでした。というか休戦することにしました。そもそもキーボード買えばめっちゃ簡単に解決するし・・・。ネタに困ったらそのうち失敗談を書きます。

そんなこんなで次やるとしたら『ラズパイをネットに繋ぐ』です。

キーボードを買った後にね・・・。