自動でHTMLを生成してくれるサイトがでました

なんかMicrosoftがすごいものを出しました

 

Sketch2Code(https://sketch2code.azurewebsites.net/)です

 

こんなページを作りたい!っていうページの構成を紙に書いて写真をこのサイトにアップロードするだけでソースが出来上がるとのこと…

jsと一体型になってるvue.jsとかだと使えないとは思うけど雛形つくって修正って形を取ればだいぶぽいものを作れる気がします。HTMLでうんうん悩んでる時間を削減できることはいいこと?だと思います?いいのかな?自分はHTML全然わからないのでいいと思います

使って何か作れたらいいな〜とか思ってます

簡単な作ったもののまとめサイトとか…?

 

最近fusion360入れて遊んでるので3Dモデル置くところにしてもいいかも…?

そろそろ3Dプリンターで遊んでいる様子の記事を書きたいですね…って事で今日はおわりです

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アプリを作った

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つかってスライドをごそっととってくる

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):
        # とりあえず1ページ目だけ
        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年くらい前からプログラムに興味が出始め,2ヶ月前からpythonを触り始めました.

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

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

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

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

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

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

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

1.3. 終わりに

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