なぽろぐ

気ままに感じたことを記事にまとめます。

Vtuber Land開演プレミアムパーティに行ってきました

9/17によみうりランドであったVtuberのイベントに行ってきました〜

 

アトラクションにVtuberの実況がつけられててめちゃめちゃ面白そうでした(9/24がにじさんじdaysでそれが一番な目的なのでまだアトラクションにはのってません)

 

プレミアムグッズはタオルでした！

f:id:Naporitan:20180919012801j:image

めちゃめちゃ手触りいいですこれ…何しろ委員長が可愛すぎる…

 

トークイベントはしずりん先輩と猫宮ひなたちゃんが永遠に可愛かった…あとでろーんと委員長の身長の対比が刺さりました…くぅ〜オタクでよかった…JK組の2人が3Dモデル実装されたことによって今までこんな動きだったのか〜ってのが伝わってきてよかった〜個人的にはしずりん先輩が3Dになったことでマイパースさが可視化？っていうか目でも声でも感じられたのでよかったなーって思いました〜

ミライアカリちゃんが上から下ネタを言わないように！と念押しされたんだよ〜って言っててそんなに言われたの？？？って感じで面白かったです〜

最近ほんとにおじさんじとかにじさんじとか名取とかしか見てなかったのでまた見る幅を戻していければな〜と思っています(webアプリ作ったりPython触ったりの方がお熱でした)

 

9/23,24はにじさんじオンリーの#にじそうさくとにじさんじdaysがあるので楽しみー

 

それではこの辺でキモオタは失礼します

 

もう少しIRKitで遊びます

最近1日1食生活を1週間ほど続けていたのですがふらふらします．．．できる人とできない人がいるようです．自分はやるとそのうち倒れると思います．

 

倒れないように！とご飯を満足するまで食べたらやる気が出てきたので新しいwebアプリでも作ってみようかと思います！！！

 

前回IRKitのwebアプリを作ったんですけど部屋のエアコンがたまについてなかったり，電気が消えなかったりしたのでIoT？的なことと絡めてもうちょっといい感じのwebアプリを作って行きます

 

使いたいものとしては

vue.js

python (webサーバをcgiで動かすため.)

cgiを使う理由としてはDjangoとかFlaskとかも使ってもいいけどこんなしょぼいアプリケーションにフレームワークを使うほうが労力かかるかなとおもったからです．テンプレート使うほど何枚もhtml書かなきゃいけないことはないと思うんだ～～～～

かなと思っています.

 

vue.jsはまだよく調べていないのですがどうやらページのリレンダリングを自動的にやってくれるらしいとのこと．ボタンの追加とかwebサーバからのレスポンスによる動作が多くなりそうなのでIRKitのアプリを作るにはいいのではないかなと思っています．(実は友達がこれ面白そうだよっていって来たからなんとなく使ってみたいだけ)

 

pyhtonではCRUD(生成，読み取り，更新，削除)の実装ができたらいいなぁとwebAPIとしては機能が少なすぎるし意味がないかもしれないけどはじめはモノを作ってみてから考えたいと思います．これが意味のない努力だとしても使えるものができていればそれでいいと考えています．

 

完成図みたいなものをiPadProで書きました．結構雑ですが方針にはなりそうです

f:id:Naporitan:20180915034724p:plain

．

 

今更IRKitの即興Webアプリを作った

web IoT JavaScript HTML

IRKitの即興Webアプリ

できたwebアプリ

気に入ってるのでアホみたいにでかくはろ f:id:Naporitan:20180912050510j:plain

IRKitって何？

IRKit: オープンソースなクラウドリモコンです.中身は確かESP8266で赤外線の送受信ができます.
curlでぽちぽち書くだけですぐ赤外線を送受信できるのでやってる感でていい・・・・・

curlを変換してくれるサイトがありました！！！

昔IRKit買いたての頃post,getが全くわからないけど動かしてみたいってことでここで変換してwebサイトを駆け巡りコピペしてたのを思い出しました
Convert curl syntax to Python, Node.js, PHP, Rここです.まじで神サイトだと思ってます
pythonをよく使うのですがrequestsのget,postメソッドがどうもうまくいかないなぁ・・・・って時に変換して確かめたりしました(それに何の意味があるんだって話ですが)
まぁ動けばきぶんがいいんでいいんです！

作ったコード

HTMLの方

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>IRKit</title>
  <style>
    select {
      font-size:16px;
    }
    #set{
      width: 50px; 
      height: 30px;
    }
    #send{
      width: 50px; 
      height: 30px;
    }
    #savebtn{
      width: 50px; 
      height: 30px;
    }
  </style>
</head>

<body>
    <label for="mode">Request method</label><br>
    <select id="mode" name="mode">
      <option value="get">GET</option>
      <option value="post">POST</option>
    </select><br>

    <select id="ir" name="ir">
        <option>-</option>
    </select>
    <input type="submit" value="SET" id="set"><br>

    <label id="message">Message</label><br>
    <textarea id="msg" ></textarea><br>

    <label for="response">Response</label><br>
    <textarea id="res" cols="40" rows="5"></textarea><br>
    <input type="submit" name="btn" id="send"><br><br>
    
    <div>
      <label for="save">save</label>
      <input type="text"  id ="save">
      <input type="submit"  id="savebtn">
    </div>
</body>

</html>

<script src="modules/jquery-3.3.1.min.js"></script>
<script src="modules/irkit.js"></script>

これと

<select id="ir" name="ir">
    <option>-</option>
</select>

これ

<div>
      <label for="save">save</label>
      <input type="text"  id ="save">
      <input type="submit"  id="savebtn">
    </div>

こいつらは自前でpythonで作ったWebAPI(あれはAPIって呼んでいい代物なのだろうか・・・・自分はAPIだと思いたいのでAPIって言い張ります)
から今までの赤外線データを取ってきたり,新規の赤外線データを保存できます

削除はweb側でできないんですけどね！！！！！そのうち削除もします

JavaScriptの方

val_list = [];

$(function () {
    get_keys();
 });

$('#send').click(function () {
    var url = "https://api.getirkit.com/1/messages";
    var clientKey = "クライアントキー"
    var deviceId = "デバイスキー";

    if ($('#mode').val() == "get") {
        $('#msg').val("Wait...");
        $.ajax({
            type: "get",
            url: url,
            data: {
                clientkey: clientKey,
                deviceid: deviceId
            },
            timeout: 5000
        }).done(function (json) {
            $('#msg').val("OK");
            $('#res').val(JSON.stringify(json["message"]));
        }).fail(function (XMLHttpRequest, textStatus, errorThrown) {
            $('#msg').val(textStatus);
        });
    } else {
        $.ajax({
            type: "post",
            url: url,
            data: {
                clientkey: clientKey,
                deviceid: deviceId,
                message: $('#res').val()
            },
            timeout: 5000
        }).done(function (json) {
            $('#msg').val("OK");
        }).fail(function (XMLHttpRequest, textStatus, errorThrown) {
            $('#msg').val(textStatus);
        });
    }
});

$('#savebtn').click(function () {
    var ir_name = $('#save').val();
    var ir_val = $('#res').val();
    if (ir_name.length <= 0 || ir_val.length <= 0) {
        $('#msg').val("error");
        return;
    }

    $.ajax({
        type: "post",
        url: "自作APIのアドレス",
        data: {
            ir_name: ir_name,
            ir_val: ir_val
        },
        timeout: 1000
    }).done(function (json) {
        $('#ir').empty();
        get_keys();
    }).fail(function (XMLHttpRequest, textStatus, errorThrown) {
        $('#msg').val(textStatus);
    });
});

$('#set').click(function(){
    var res = val_list[$('#ir').val()]
    $('#res').val(res);
    $('#mode').val("post");
});

$(function () {
   get_keys();
});

function get_keys(){
    $.ajax({
        type: "get",
        url: "自作APIのアドレス",
        timeout: 1000
    }).done(function (json) {
        $('#ir').empty();
        $('#ir').append("<option>-</option>");
        var key_list = json["keys"];
        val_list = json["vals"];
        for(var i=0;i<key_list.length;i++) {
            $('#ir').append("<option value="+i+">"+key_list[i]+"</option>");
        }
    }).fail(function (XMLHttpRequest, textStatus, errorThrown) {
        alert("今までの赤外線ファイルが読み込めませんでした");
    });
}

なんかJavaScriptのほうが色がつかない・・・・・
でも普通に動いてるのでいいです

最後に

なんだかんだ言って結構気に入ってます
pythonの方も削除できるようになったら載せるかもしれません

Scrapyつかってスライドをごそっととってくる

python scrapy スクレイピング web

SlideShareをスクレイピングするやつ〜

今日はもう眠いのでスパイダーのソースだけ
scrapyでやってます.

# -*- coding: utf-8 -*-
import io
import os
import time
import urllib
from datetime import datetime as dt

import requests
import scrapy
from PIL import Image
from pytz import timezone
from reportlab.pdfgen import canvas
from scrapy.linkextractors import LinkExtractor
from scrapy.spiders import CrawlSpider, Rule
from scrapy_splash import SplashRequest

from slide_scrapy.items import SlideScrapyItem


class SlideshareSpider(CrawlSpider):
    name = 'slideshare'
    allowed_domains = ['www.slideshare.net']
    start_urls = ['http://www.slideshare.net/']

    custom_settings = {
        "DOWNLOAD_DELAY": 1,
        "FEED_EXPORT_FIELDS": [
            "title",
            "author",
            "page",
            "path",
            "url"
        ]
    }

    # csv export
    now = dt.now(timezone('Asia/Tokyo'))
    date = now.strftime('%Y-%m-%d')
    jst_time = now.strftime('%Y-%m-%dT%H-%M-%S')

    # rules = (
    #     Rule(LinkExtractor(allow=r'Items/'), callback='parse_item', follow=True),
    # )

    def parse(self, response):
        search_url = urllib.parse.urljoin(response.url, "search/slideshow")
        query = {
            "searchfrom": "header",
            "q": "iot python",
            "lang": "ja"
        }
        query = urllib.parse.urlencode(query)
        url = search_url+"?"+query
        print(url)

        yield SplashRequest(url,
                            method="get",
                            callback=self.after_search,
                            args={"wait": 2,
                                  "timeout": 90},
                            dont_filter=True)

    def after_search(self, response):
        # とりあえず１ページ目だけ
        contents = response.xpath(
            "//div[@class='thumbnail-content ']/a/@href").extract()
        for content in contents:
            url = urllib.parse.urljoin(response.url, content)
            yield SplashRequest(url,
                                method="get",
                                callback=self.content_search,
                                args={"wait": 2,
                                      "timeout": 90},
                                dont_filter=True)

    def content_search(self, response):
        item = SlideScrapyItem()


        max_page = int(response.xpath(
            "//span[@id='total-slides']/text()").extract_first())
        images_url = response.xpath(
            "//img[@class='slide_image']/@data-full").extract()

        title = response.xpath(
            "//span[@class='j-title-breadcrumb']/text()").extract_first().strip()
        author = response.xpath(
            "//span[@itemprop='name']/text()").extract_first().strip()

        pdf_name = title+".pdf"
        output_dir = "適当なディレクトリ"

        item["title"] = title
        item["author"] = author
        item["page"] = max_page
        item["path"] = output_dir+pdf_name
        item["url"] = response.url

        pdf_cnvs = canvas.Canvas(output_dir+pdf_name)
        for idx, img_url in enumerate(images_url):
            self.logger.info("title: {0} {1}/{2}".format(title,idx+1,max_page))
            image = Image.open(io.BytesIO(requests.get(img_url).content))
            image.save(".temp.png")
            image =Image.open(".temp.png")
            pdf_cnvs.setPageSize((image.size[0]+10,image.size[1]+10))
            pdf_cnvs.drawInlineImage(image,0,0)
            pdf_cnvs.showPage()
            time.sleep(1)
        os.remove(".temp.png")
        pdf_cnvs.save()      
        yield item


urlから画像をPILのImageオブジェクトのままpdfにしたかったけどなんか赤色が加算？されちゃうので一回隠しファイルでファイルを生成してます〜

超カッコ悪くて草

iPhoneXを買いました

日常のこと

naporitan.hatenablog.com

IPhoneXを中古で買いました～

結果で言うと6.6万円で買いました!!!
もともと複数端末持っていたのでポケットWiFiとかもあればいいなぁ～とか今契約している回線が遅いな～って思っていたので変えるにはちょうどよかった～

割引ってどんな？

Ymobileで2回線契約をしたうえで使用していたiPhoneSEを売りました～ これで合計6万円くらい割引かかっていい感じです

月額料金とか

ちゃんと計算してないんですけど多分月4000~5000円に収まるのではないかと，10分ならかけ放題とか前の契約会社ではシビアだったところが改善されました
ちなみに前の契約会社では月3000円くらいだったのでちょびっと上がってます

終わりに

急な出費だったけど結構満足しているので自分的にはいい感じ～です
やっぴ～
今週末はにじさんじのトークイベントに参加し行きます～

自己紹介とか

日常のこと

1. 自己紹介とか

1.1. 自己紹介

1年くらい前からプログラムに興味が出始め,２ヶ月前からpythonを触り始めました.

IoTとか機械学習とか流行りに興味を持ちたがるミーハーってやつです.

アニメとかはあまり見ません.最近はVtuberが好きですね.(結局これもはやりっていう・・・)

1.2. どんな記事を書くの？

  • pnadas,numpy,matplotlibを使ってセンシングしたデータの可視化をやって見たいなぁと思ってたり思ってなかったり,それ中心の記事になるかと....
    Django使ってページ作成して....基本的にはpythonでほぼ全部やりたいと思っています.

  • それに合わせてESP8266とかも使います.ESP32はめちゃめちゃ使いやすそうだけどESP8266をたくさん買ってしまったので当分は8266で遊びます.

  • 旅行とか,イベント参加した感想とかもかきたいなぁ....

基本は二番煎じ,三番煎じのことを初心者が苦戦しながらやっていく様をつらつらと書き連ねます.

1.3. 終わりに

飽きやすい性格なので続けられたらいいなぁと思ってたり思ってなかったり,できるだけ更新頻度は高くして三日坊主は避けたい......!!!

ESP8266初期セットアップ

ESP8266 電子工作

ArduinoIDEでESP-wroom-02(ESP8266)を使う

目次

1. ArduinoIDE

1.1. Arduinoのインストール

バージョン1.8.4で開発を行っているので開発環境のOSにあわせてここから1.8.4をインスコ

1.2. IDEの設定

以下の設定を行う

1.2.1. 環境設定

1.2.2. ボードマネージャ設定

  • windows
    ツール > ボード > ボードマネージャを選択
  • Mac OS
    ツール > ボード > ボードマネージャを選択
  • 共通
    esp8266と入力して,esp8266 by ESP8266 Communityをインスコ f:id:Naporitan:20180908162450p:plain:w400

1.2.3. ツールメニュー設定

以下のように設定
f:id:Naporitan:20180908162504p:plain:w300

2. ESP-wroom-02(ESP8266)

2.1. PIN配置

ESP-WROOM-02を使ってみるから画像を拝借しています. f:id:Naporitan:20180908162454p:plain:w400

2.2. 書き込み機の作成

2.2.1. 用意するもの

名称 説明 個数
ESP-wroom-02 WiFi付きArduino 1
AE-UM232R USBシリアル変換モジュール 1
カーボン抵抗 1/4W 10kΩ 抵抗 5
ブレッドボード 基盤 1
mini USB Mini-B PC - USBシリアル間の通信用 1
ジャンパワイヤ 配線用 何本か

2.2.2. 配線

対応表

ESP側のピン 中継 AE-UM232R側のピン
3.3V - 3V3
EN 10kΩ 3V3
IO15 10kΩ GND
IO02 10kΩ 3V3
IO0 10kΩ 3V3
IO0 - DTR
GND - GND
RST 10kΩ 3V3
RST - RST
TXD - RXD
RXD - TXD

完成図

f:id:Naporitan:20180908162458j:plain:w200

3. テストプログラムを実行してみる

Hello Worldをやってみる

3.1. USBシリアルモジュールのドライバをインスコ

3.2. Hello Worldプログラム

ArduinoIDEで新規作成して以下のプログラムをコピペ

void setup() {
  // put your setup code here, to run once:
  Serial.begin(115200);
  while(!Serial){}
  Serial.println();
  Serial.println("Hello World");
}

void loop() {
  // put your main code here, to run repeatedly:

}

3.3. シリアルモニタの設定

ArduinoIDEの右上の虫ねがねっぽいアイコンをクリックするとシリアルモニタが出てくるので下の項目を次のように設定
f:id:Naporitan:20180908162502p:plain:w400

3.4. 書き込み

  1. ツール > シリアルポート からESPが接続されているポートを洗濯してから左上の矢印ボタンをクリックすると書き込みが開始される.下に赤い文字で.......[33%]とか表示されるが,気にしないで100%になるまで待つ

  2. 100%になったらシリアルモニタを確認

  3. Hello Worldと表示されていたらセットアップは完了

    • Hello World前に変な文字が出ていても問題ないです