2018年7月

  • ラズベリーパイを買ってみたのでメモ

    なんのために購入したの?

    lotとかnode.jsによるボットとか試してみようかな、と思ったからです。
    botに関して言えば、googleのサービスでも事足りるんですが、よりプライベートなプログラムを走らせることをしてみようかな、というものです。

    どれを買ったの?

    世代とか、スペックとかいくつかあるみたい。
    別に高機能は求めてないので、低電力低価格のラズパイゼロとやらでも良かったんですが

    Raspberry Pi3 Model B ボード&ケースセット 3ple Decker対応 (Clear)-Physical Computing Lab

    新品価格
    ¥5,980から
    (2018/8/1 09:34時点)

    これにしました。sdカードにインストール済みだったり、各種コードがついてるもので一万円程度のものもあったんですが、そのへんはすでに持ってたのでこちらにしました。
    これはケースと、本体と、冷却用パーツのセットです。
    sdカードにosインストールに他のパソコンもいるよ。

    不安な人はこれで。それでも他に必要なものがあるよ。

    Raspberry Pi3 B コンプリートスターターキット (Standard, 16G)

    新品価格
    ¥9,980から
    (2018/8/1 09:37時点)

    モニタ

    I-O DATA モニター ディスプレイ 20.7型 EX-LD2071TB (ブルーライト軽減/スピーカー付/3年保証/土日もサポート)

    新品価格
    ¥10,980から
    (2018/8/1 09:39時点)

    これ使ってます。おすすめ。トラックパッド付きキーボード

    Logicool ロジクール ワイヤレス タッチキーボード K400pBK

    新品価格
    ¥2,409から
    (2018/8/1 09:40時点)

    届いたら・・・

    解説してるサイトを参照してね。
    https://qiita.com/cigalecigales/items/65e06116c9ccfb2307df

    RASPBIAN のGUIをインストールしたけど、ヘッドレスクロームが動かないので他のにした。
    調べたら動かす方法もありそうだけど、めんどくせーので諦めた。だってそれが主役だもん。

    ubuntuとかでやりてーな

    open suse というやつのインストールまではしたんですが、重い上に情報がない!
    すごくいいものだとは思うのだけれど、自分の使い方には残念ながらフィットしなかった・・・。
    時間食いすぎて他のことしたいなーという気持ちが強まったので、一旦これは放置します。

    64bitのOSがもっと出てきてほしいなぁ。

  • node.jsでtweetしてみる

    ヘッドレスクロームでつぶやくのはやってみたが・・・

    https://logzitsu.tlog.work/puppeteer-twitter-bot/

    node.js でやる場合はこんな感じ

    https://apps.twitter.com/app/
    ここでキーとアクセストークンを作る。
    アクセストークンは作成ボタン押さなきゃダメ

    var twitter = require('twitter');
    
    var client = new twitter({
        consumer_key: 'xxxxxxxxxxxxxxxxxxxxx',
        consumer_secret: 'xxxxxxxxxxxxxxxxxxxxx',
        access_token_key: 'xxxxxxxxxxxxxxxxxxxxx',
        access_token_secret: 'xxxxxxxxxxxxxxxxxxxxx'
    });
    
    var params = { screen_name: 'nodejs' };
    
    
    client.post('statuses/update',
        { status: 'テストツイートでございます' },
        function (error, tweet, response) {
            if (!error) {
                console.log(tweet)
            }
        });
    
    
    https://logzitsu.tlog.work/node-js%E3%81%AE%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%E3%82%92%E5%AE%9A%E6%9C%9F%E7%9A%84%E3%81%AB%E5%AE%9F%E8%A1%8C%E3%81%99%E3%82%8B/
  • Google Cloud Platform(GCP)を無料で使うよ。

    amazonのEC2みたいなやつです。
    クラウドで動かせる自分のPC(サーバー)が手に入ります。
    当然有料サービスなのですが、低スペックであれば無料で使えるみたいです。

    でも突然請求がきたりしたら怖い!

    というのが普通だとおもいます。
    しかし、どうやら永続無料枠もあり、かつ300ドルまで使えるクーポンがついてるみたいっすね。
    初心者に優しい。

    使い方!

    全然不安で紹介なんかできんわ
    以下で丁寧に紹介していますので参照してください。
    https://qiita.com/FukuharaYohei/items/0614354d6a4eda32d521

    自分はボットを作って遊んでいるよ。

    サーバーとかは普通のレンタルサーバーをすでに借りてます。
    常にPCを動かしておきたいbotシステムを試しに動かしてみてます。
    ubuntu 17?
    を入れたらchromeも動かせたようで、pupetter も動かせたのです。素晴らしい。
    また遊んでみて発見があればレポートします。

    メモ

    IP制限

    別サーバーのwordpressの投稿をしようとしたのだけどなぜか失敗。
    原因は、そのレンタルサーバーの「国外IP拒否」機能でした。

    ホワイトリストにGCPサーバーのIPを入れたらちゃんと投稿できました。
    なんでも解決するものですね。固定IPを設定していない場合は、再起動のたびに変わるので注意。

    時間の設定

    ubuntuの場合以下で設定できるよ

    //設定確認
    timedatectl
    
    //設定変更
    sudo timedatectl set-timezone Asia/Tokyo
    
  • 統計学について勉強する!(書籍購入編)

    データマイニングとか、スクレイピングに関する記事を見てると、必ず数式が出てくる

    まえの記事で、ビットコインやFXの売買についてやってみようかなーとおもったんですが、やはり投資やチャートの動き、社会情勢などいろいろ勉強する必要があると思ったので、優先度を落として他のことをやすことにしました。
    どうせ勉強しなきゃいけないなら、統計学やデータ処理について学びたいと思いましたので、勉強したいと思います。

    スクレイピングした情報を加工する際に、必ずなんらかの数式が出てきます。
    「うっ」と思ってそこで思考が止まってしまうことが多かったので、せっかく暇な今の時期に勉強してしまおうと思いました。

    本屋に行って見てビックリしたのですが、統計学の本ってめちゃくちゃ多いんですね!
    100種類ぐらいあるし、確率やらその他細分化された関連書籍もそれぞれ同じくらいの種類がある・・・。

    それだけ需要があるし、売れるし、習得し難いんだろうな・・・と思いました。

    本を選ぶよ

    文系でも仕事に使える統計学はじめの一歩【電子書籍】[ 本丸諒 ]

    価格:1,728円
    (2018/7/17 22:12時点)
    感想(0件)

    データ分析できない社員はいらない [ 平井明夫 ]

    価格:1,706円
    (2018/7/17 22:13時点)
    感想(6件)

    統計学が最強の学問である データ社会を生き抜くための武器と教養 [ 西内啓 ]

    価格:1,728円
    (2018/7/17 22:10時点)
    感想(29件)

    これらを買ってきました。
    今から読みまくります。

    ちょっと読んだのでメモしていくよ

    ちょっと読んだのでメモしていきます。
    以下はテキトーにメモしてるだけなので、正確な情報が欲しい人は本を読んだ方がいいです。

    統計学って何

    データをうまいこと使うための知識って感じでした。
    ・全数調査しなくても、サンプリングでも問題ない。
    ・少ないデータから数値を推測することも可能
    ・感覚でなく、データから正しいと思われる結論を導ける。

    値がいっぱいありすぎても扱いにくい。
    「代表値」を使う。

    平均値

    全ての数値を足して、個数でわる。

    中央値

    個数だけ見て真ん中の値。(奇数の場合は中央2つの値の平均をとる)
    (飛び抜けて少ない、多い値がある場合に強い)

    最頻値

    もっとも多く出てきた数値
    (データ的には扱いにくい)

    四分位数/箱ひげ図

    データ個数で四分割して、データのばらつきを表現するための方法

    偏差

    数値の平均値との差を表したもの。
    偏差を全て合計すると、0になる。

    平均偏差

    偏差をすべて正の値ににして足して個数で割ったもの。
    ばらつきを示す数字。ただし、下の標準偏差が一般的に使われ、こちらはあまり出てこない。

    分散

    正の値にするために数値を二乗して合計し、個数で割ってでてくる値。
    ばらつきを表す一般的な値。

    分散の公式

    分散公式

    わけわからん文だけど、大したことはやってないってのがわかりました。

    標準偏差

    分散の二乗をもとにもどしたやつ

    正規分布

    山形のヒストグラムを描くやつら
    平均、標準偏差でグラフが動く。変わる。
    正規分布表の面積で確率を得ることができる。

  • Node.js の万能さの前で打ちのめされる

    できることが多すぎるので・・・・

    ちょっと前の記事でもちょっと書きましたが、Node.jsでできることが自分のやろうと思ってたことと合致しすぎてなにから手をつけていいやら迷っています。
    この状態に入ると、他のことが手につかないので、着実に一個づつ手をつけて行かなきゃなと思っています。
    言語はpythonでもよかったかな、と思いますがjsに結構慣れてるのでストレスが少なくすんなり行けるのが大きいです。

    こういう時ブログって便利だなと思う

    最近の記事はやった結果を体系的にまとめているというより、過程をそのまま書いています。
    割と自分で見直すことが多くて役に立つし、学習の動機にもなるのでなかなかいい感じです。
    ブログ書きながら調べ物してトライアンドエラーの結果を記録してくのおすすめです。

    やりたいことをまとめておこう

    いまやろうかなと思っていることをまとめておこうかと思います。

    • fxやビットコインの自動売買
    • 更新情報を取得して来てまとめるブログを作りたい
    • 空き家バンクバンク
    • アレクサのスキルを作る
    • lotデバイスをなんか作りたい
    • 文章を作るプログラム
    • 異世界少女 twitter
    • このブログの宣伝?更報告twitter
    • WEB技術収集Twitter

    2番目のやつは実は1つ作りました。
    でもデータが揃ってないので、データが溜まった1年後くらいにこのブログで紹介できたらいいなと思います。
    もう一つアイデアはあるんですが、効率のいいデータ収集の方式がまだまとまってないので、それが思いついたらいつか作りたいなーと思っています。

    自動売買プログラムは、自分で決済処理するのめんどくさいなーと思っており、口座を放置していて勿体無いので・・・ということです。
    高度な売買の仕組みは難しいと思いますが、ただ買うだけ売るだけなら API 使えばきっとすぐだと思うんですよね。

    わけのわからない単語も混ぜましたが、自分も漠然としたことしか考えてないしやらないかもしれません。

    とりあえず売買プログラムつくってみようかなー

    一番とっつきやすいのがこれかなぁ。
    どこまでちゃんとやるかですけど。

    やることいっぱいなので一個づつ着実に終わらせていきたいと思います。

  • Node.js で 記事を投稿できる、「node-wordpress」を試してみた

    node-wordpress の使い方です!

    タイトルと記事内容について自動投稿する方法は結構調べたら出てくるけど、メディア(画像)の自動投稿についての記事があんまり見つからないので、しょうがないっと記事を作ってみます。

    余談ですが技術書を買いました

    JS+Node.jsによるWebクローラー/ネットエージェント開発テクニック
    自分のやりたいなーと漠然と思っていたことがいっぱい載ってました。
    しばらくこの分野のことを勉強したり、試作したりする生活を送りたい・・・・。

    つまり、データ出力場所としてのWordpressということです

    クローラーして集めたデータ/解析して加工した情報を定期的に自動投稿できたら良いなぁ、と思うわけなのでこれは避けて通れないことだなぁと思うのです。
    では始めていきたいと思います。

    試してみます

    node-wordpressを使います。
    https://github.com/scottgonzalez/node-wordpress/

    適当なフォルダで

    npm install wordpress
    

    そのフォルダにアップロードしたい画像をおきましょう。
    下のデモでは「img.jpg」という名前にしてあります。

    var wordpress = require('wordpress');
    const fs = require('fs');
    
    //接続設定
    const wpClient = wordpress.createClient({
        url: "わーどぷれすのURL",
        username: "ユーザーあいでぃー",
        password: "ぱすわーど"
    });
    
    //画像の場所を指定
    var filename = "img.jpg";
    var file = fs.readFileSync(filename);
    
    //画像のアップロード
    wpClient.uploadFile({
        name: filename,
        type: "image/jpg",
        bits: file
    }, function (error, data) {
        console.log(arguments);
        console.log(arguments[1].url);
    
        //コールバックで投稿アップロード
        wpClient.newPost({
            title: 'タイトル',
            status: 'publish',
            thumbnail: arguments[1].id,
            content: '内容',
            author: 1
            //customFields: [{ key: 'hoge', value: 'fuga' }]
        }, function (error, posts) {
            console.log(posts);
        })
    });
    

    まず画像をアップロードして、画像のIDをサムネイルに指定して記事を投稿。
    という流れになります。

    こう書いてみると、シンプルな流れですがけっこう試行錯誤しましたよ。
    これでほんとに色々できそうですよ。

    まずはあれをやろっかな(妄想)

    終わり

  • Electron で アプリ開発をしてみよーかなって話

    Node.jsはすごい!

    ここ数日 puppeteer と node.js を触って、世の中にこんな便利なものがあったかいな、詐欺やん!
    だれか教えてくれればよかったのに!

    とめちゃくちゃ感動していたのですが、一つ思いついたアプリがGUIがあった方がいいなーと思い始めていました。
    GUI作るならHTMLの画面を作ればいいなと思っていたんですけど、もっといい方法があったっぽいので調べながら実装してみようかなと思います。

    VScode や Atom に採用されている Electron

    今回取り扱うこの Electron というもの、日頃お世話になっている↑のアプリで採用されているものだったのです。
    Atomは知ってましたが、VScodeもHTMLでできてたんかいな・・・・。
    node.jsをつかえるなら、puppeteer の恩恵も活かせそうだな、と思ったので頑張って目的のものを作ってみようかと思っています。
    この記事ではさわりだけになるかもしれませんが。
    いままで扱ってきたアプリもGUIがあれば便利だな、と思っていた部分もあったので、とりあえずシンプルな入力欄だったり、取得してきた情報を一覧で表示したいなどできるところを目標にしたいと思っています。

    環境を整える

    nodeはインストールしておきましょう。
    vscodeを利用しています。

    適当なフォルダに移動し、以下を実行

    npm i -D electron
    npm init
    

    プロジェクトのフォルダを作りましょう。

    「project01」とします。
    そのフォルダに移動します。

    npm init
    

    package.jsonが作られます。
    main.jsを作りましょう。

    main.js

    var electron = require('electron');
    var app = electron.app;
    var BrowserWindow = electron.BrowserWindow;
    
    var mainWindow = null;
    
    app.on('window-all-closed', function () {
        if (process.platform != 'darwin')
            app.quit();
    });
    
    app.on('ready', function () {
    
        // ブラウザ(Chromium)の起動, 初期画面のロード
        mainWindow = new BrowserWindow({ width: 800, height: 600 });
        mainWindow.loadURL('file://' + __dirname + '/index.html');
    
        mainWindow.on('closed', function () {
            mainWindow = null;
        });
    });
    

    同フォルダ内に表示画面用のファイルを作成します。

    index.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Electron Read Us</title>
    </head>
    <body>
    <h1>Hello, electron!</h1>
    </body>
    </html>
    

    以下で画面が立ち上がるはず

    electron .
    

    が、エラーで立ち上がらない・・・・
    自分の環境では以下を実行し、再度 electronをインストールしたらうまくいきました。

    npm install -g electron-prebuilt
    

    以下記事 参考にしました。
    Electronでアプリケーションを作ってみよう

    ここまできたら、index.htmlをアプリケーションぽくしていけばいいだけみたいです。
    ふつーにいろんなJSを使って。

    //インストール
    npm i electron-packager -g
    
    //パッケージする
    electron-packager . your-app
    

    puppeteer 動くのかとかいろいろ調べて、また何かわかれば追記します。

    以下追記
    https://qiita.com/Quramy/items/a4be32769366cfe55778http://

    引数
    https://qiita.com/furusin_oriver/items/f030d1eaa9e7b54233c3

  • 完全自律型のバーチャルユーチューバーは可能か?

    よく知らないけど vtuberについて考察します

    *勝手な妄想を語っていますので注意。
    youtubeなんて全然見ないんですけど、ほんとに純粋なAIの「バーチャルユーチューバー」がいたらすごく面白いなと思うのです。
    vtuber界のドンであるキズナアイさんは設定はAIですけど、そうじゃないですし。

    むしろ中の人の人間性が面白いことが評価される世界だよね

    普通のyoutuberとの違いはそんなないと思うんですけど、
    – 別の人間になりきることでキャラが立ちやすい
    – 人嫌いな人も抵抗なく見れる
    – 単純に珍しいので注目されてる
    てなところでしょうか。ルックスがいけてなくても、声がダメダメでも中身の魅力で勝負できると言った感じ。
    いや、声は可愛い方がいいな・・・。

    ルーツは「ゆっくり実況」な気がする

    アバター使って、声もゆっくりごえ。これってvtuberですよね。
    3Dや2Dの表情が連動できるようになったので制作が楽になったというのが普及の原因でしょうか。
    録画した動画だけでなく、生で視聴者に反応できるのも今までなかった特徴かもしれません。

    今現在バーチャル化できてるものは
    – 姿・容姿
    – 声
    – 設定?
    – モーションのトレース
    となります。

    まだバーチャル化できてないものは
    – モーション元
    – 発声元
    – 会話
    – 動画のシナリオ
    – 中の人 / 人格
    ですね。

    録画型のものであれば、かなりバーチャルにできてると思うんですが、
    動画のシナリオ作成、モーション作成が結構手間だとおもいますので、自分で喋って撮影するタイプには制作の効率でかなわない感じがします。

    動画型のvtuverに関してはシナリオの自動作成

    シナリオを自動で生成して、それに合わせたモーションを勝手にやってくれるようになれば、さらに動画制作が効率的になるんじゃないでしょうか。
    リアルのyoutubeとか、芸能人でもいいんですが「カメラの前で喋るだけ」で人を楽しませるって、ものすごい生産性だと思います。
    そりゃー金持ちになるよ。
    でも、上記の勝手にシナリオを作成して、勝手に声入れして、勝手にモーションつけてくれて、それが面白ければ既存のコンテンツの生産コストを大幅に改善できるのではないかと思います。

    自動で面白いシナリオを作ることは可能か

    シナリオや小説を書く人は、シナリオ制作に関する方法論や、今まで作ってきたものの蓄積がありますので、全部完全に生成することは難しいかもしれませんがプロット作るとか、セリフのパターンとかでかなり自動でできるノウハウを持ってたりするのではないかと思ってます。
    たまーに文章書くひとの記事とかみると、そういう発言してるひともたまにいますよね。
    そういうツールが存在するんでしょうか。

    機能的にいうと、自分で発言するのが不得意だと思う

    アレクサやsiriなど、会話AIが出てきていますが、それらは「発言に反応する」ことはできても、自発的に声を発するというのがすごく苦手な気がします。
    タイマーで設定しとけば喋ってくれますし、声をかければ反応してくれます。それ以外が非常に苦手な気がします。

    なぜ自分から喋ることができないのか

    上記の「時間」や「反応」はかなりわかりやすいトリガーなのですが、それ以外の発話のトリガーが複雑すぎるのではないかと思います。
    たとえば AI側が 「お腹空いてない?何か食べる?」という発言をするとします。
    これは相手がしばらくの間何も食べていないことを知っていないと発言できないのです。
    もしこれを達成するなら、AIスピーカーにカメラをつけて監視させたり、今までの内容からお腹が空いていることを察する/直接質問するといった工程が必要になってきます。(食事記録をこまめにスマホに入れてる人なら可能かも)
    「働きすぎじゃありませんか」というばあいも同様。「オススメの映画です」 これも同様。(これはamazonが得意そうです)

    全然的外れのところで、長々と話を始められても困りますし、いまのところ実用性をかんがえると少し寡黙な方がいいのかなと思います。
    (今まさに聞きたい面白エピソードをAIスピーカーが話し出したら衝撃です。)

    もし、AIスピーカーのスキルを作るとするならば「いかにいい感じのタイミングでいい感じの話題をふるか」を考えるといい気がしています。
    お腹が空いている時に「オススメの商品を紹介する」
    料理を作っている時に「おすすめの料理について教えてくれる」
    服に迷っている時に「ファッションについての知識を披露してくれる」

    といったことです。これらは、既存のセンサーでは一律にできないことだと思います。
    工夫したそれらを「察する」センサーを身に付けることによって上記のことが可能になるのではないかと思います。
    なにか思いついた方、世界を豊かにするチャンスですよ。

    長いエピソードトークをすることは可能か

    全然嘘でもなんでもよくて、ロボットが適度な長さのおもしろいエピソードを語ることは可能でしょうか。
    普段の生活だと、めちゃくちゃ構成がいいまとまったエピソードを耳にすることなんてほとんどありません。

    まーとりとめもなくてオチのない話しをしてるなーと、プロの芸人さんの発言を見てると考えてしまいます。
    これにもきっといろいろなテクニックがあるのだと思います。
    「面白い話とは何か」ってのを真剣に解析して
    「それを生み出すにはどうしたらいいか」という方法を考えなければならないと思います。

    ちょっとおまけ

    いまのvtuberは顔のモーションを読み取って表情をつけてます。
    これは非常に効率がいいですが、もっと効率がいいのはシナリオの内容のポジティブ・ネガティブ 喜怒哀楽を読み取って勝手に表情をつけることだと思います。
    ネガティブな単語、ポジティブな単語というのはある程度ありそうですから、これもある程度まではできそうな気がしますよね。
    内容に合わせてポーズまでとってくれたらすごいですけど。
    シナリオ生成に関しても、生放送でお客さんの反応を見てさらにそれに反応するものができたら面白いなーと思います。

    まとめ

    • シナリオの自動生成が鍵となる
    • しかも面白いシナリオを作るとなると方法論の解析や確立が必要になる。

    おわりです。

  • puppeteer で twitter botを作るよ(使い道を考える)

    ちなみに、ふつうに呟く方が楽だよ。

    https://logzitsu.tlog.work/node-js-tweet/

    puppeteerの使い道

    すこーし考えてみました。
    – ログインが必要なサービスでデータを取得し、定期的にメールさせる
    – バックアップやアップデートの更新処理を勝手にやってくれるようにする
    – サイトから画像・テキストを集める、めっちゃメールを送る
    – 自分の代わりに投稿・更新させる

    こんなところかなぁとおもいます。一番上の情報収集に関してはオンライン会計ソフトで、ログイン情報を入れれば各種サイトの情報を取得してくる処理で「ヘッドレスブラウザ(かもしくは近しい技術)」でやってるみたいです。
    なるほどなーとおもいました。
    会計ソフトの例もそうですが、「いろんなサービスを横断的に利用できる」のが結構強みかな、と思いました。
    あと、人間を対象にしたものをどーにかこーにかするので、その分無駄が多いんですが、通常のプログラミングではややこしくめんどくさいところが結構無理やり解決できちゃうというか無視できちゃうんですごいです。高級言語って感じです。

    AIだなぁって思った

    人の代わりに人っぽいことをするものが「AI」だと思います。ブラウザを操って様々な作業をする。まさにAIですね。
    自律的に作業してくれるところまでまだ全然行けてませんが、決まった時間に発動させるくらいは今の状態でもできそう。
    3番目の「サイトから画像・テキストを集める、メールを送る」というのは完全にスパムの仕事ですね。
    集めた情報を使って画像の学習させるとか、そういった基礎資料集めには向いてると思いますが、短絡的に使うと迷惑行為になりかねないなぁと思います。

    メインのPCだとちょっときついよね

    ずっと立ち上げて処理を行ってほしいので、サーバー上で動かすのがいいと思うんですがそのためだけに借りるのもなーと思います。
    自宅にPCが余ってるのでそれを専用PCにしようかなと思っています。
    synology NASで動かすのがもしかしたら一番いいのかも。気分が乗ったら試してみようかな。

    DS216jにsshアクセスしてLinuxサーバーとして活用する方法
    http://www.web-walker.info/ds216j-ssh/
    追記:試してみましたが、chromeがうまく立ち上がらず断念。

    自動投稿とかもできちゃうよね

    wordpressにログインして、投稿するのも試してみました。
    でも画像の投稿が非常に難しく・・・・。それがやりたかったので、実用化するにはまだ研究が必要そうです。(情報もない)
    画像投稿ができるものならなんでもいいのでほかの何かを使いますかー。

    で、本題なんですが、twitterで定型文の定時ツイートくらいなら簡単にできちゃうと思うんですよね。
    試してみたいと思います。

    やってみた

    ログインがなかなかうまく行かなかず苦戦しましたが、なんとかなったです。

    const puppeteer = require('puppeteer');
    
    var user_name = "あかうんとめー";
    var user_pass = "ぱすわーど";
    
    function nowtime(){
        var d = new Date();
        var year = d.getYear()+1900;
        var month = d.getMonth()+1;
        var date = d.getDate();
        var hour = d.getHours();
        var minute = d.getMinutes();
        var second = d.getSeconds();
        d = year + "年" + month + "月" + date + "日" + hour + "時" + minute + "分でーす";
        return d;
    }
    
    (async () => {
        const browser = await puppeteer.launch({ args: ['--no-sandbox'] });
        const page = await browser.newPage();
    
        //twitter ログイン
        await page.goto('https://twitter.com/login');
    
        await page.type('.email-input',user_name);
        await page.type('.js-username-field',user_name);
    
        await page.waitFor(2000);
        await page.keyboard.press('Tab');
    
        await page.keyboard.type(user_pass);
        await page.waitFor(2000);
        await page.click('button[type="submit"]');
        await page.waitFor(2000);
    
    
        // ツイートする
        await page.goto('https://twitter.com/');
        await page.waitFor(5000);
        await page.click('button#global-new-tweet-button');
        await page.waitFor(5000);
        await page.keyboard.type(nowtime());
        await page.waitFor(5000);
        await page.click('button.js-send-tweets');
        //await page.screenshot({ path: './ss.png'});
        console.log(nowtime());
    
        await browser.close();
    })();
    
    
    

    最終的にうまくいったwaitの時間を入れてますがもうすこし調整できるかも。
    スケジュールで実行してやれば定期的な宣伝ツイートとかもできちゃいますね

    集中的な8週間のマンツーマン訓練で、最先端のAIエンジニアを目指す
    https://logzitsu.tlog.work/node-js%E3%81%AE%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%E3%82%92%E5%AE%9A%E6%9C%9F%E7%9A%84%E3%81%AB%E5%AE%9F%E8%A1%8C%E3%81%99%E3%82%8B/
  • ヘッドレス Chrome を使えるようになりたいのだ!

    「ヘッドレス」 ブラウザってなに?

    みなさんがネット今見ているもの、それがブラウザです。
    「前に戻る」「アドレスバー」など様々な部品で構成されていますが、そういった目で見えるものがなく、クリックではなく命令言語で動かせる。
    それが「ヘッドレス ブラウザ」なのです。

    それってなんの意味があるの?

    よく「業務が自動化できる」ということがメリットに挙げられます。
    言葉としての意味はその通りなんでしょうが、なんとも非常にピンとこない。
    個人的にはこれからの時代は「AIがお金を稼いでくれる」という言葉にも同じものを感じます。
    噛み砕いて説明しますと、普段皆さんはブラウザで仕事をすることが多いと思います。
    たとえば「Aというサイトからとある製品の金額を調べてファイルに記載する」という作業があったとします。これを分解すると

    • ブラウザを立ち上げる
    • アドレスバーに「A 製品名 金額」などと検索ワードを打ちます。
    • 表示された検索結果から A社の目的の製品のページを探し、サイトを表示します。
    • 製品の金額を探しコピーします。
    • ファイルを開き、書き込み保存します

    といった流れになります。
    もしこれが毎日必要なタスクだったとすると、
    このタスクを「ヘッドレスブラウザで毎日自動で3時に行う」 と設定します。

    • 特に作業なし

    となります。ヘッドレスブラウザがちゃんと動くようにさえしておけば何もする必要がないのです。
    これが「業務の自動化」です。
    ただし、検索する製品が同じ場合に限ってしまいます。
    この製品を自動で見つけて検索させるとなると、非常に複雑な命令になってしまうと思います。きっと。

    ルーティーンで大量な作業をさせるのは非常に得意なものになります。
    「スパム」なんて一般的に言われてるものも、こういった自動化作業の負の産物なのかもしれません。

    ウェブスクレイピング というネット上から情報を集めてくるものもこれで可能になるはずです。

    どーやってつかうのさ

    PCのターミナル/コマンドラインというところから命令を送ります。
    それだと別にあんまり便利ではないので、命令を記載したファイルを用意しておきそれをアプリから実行することが可能です。
    node.jsというものを使うのが一般的みたいですね。pythonでも動かせるみたいです。
    自分のPCからnode.jsで動かすことはもちろん可能ですが、node.jsが動く「サーバー」で自動化作業をさせるのもよくあることみたいです。

    こうすると、自分のパソコンの電源を常に入れておく必要がなくより自動感がありますね。

    利用環境を整えよう

    今回はサーバーで動かすまで行かないで、自分のパソコンでヘッドレスブラウザを動かすところをやって見たいと思います。
    偉そうに講釈を垂れてますが、自分も触るのはこれが初めてです。

    参考 こちらの記事
    https://developers.google.com/web/updates/2017/04/headless-chrome?hl=ja

    なんか、簡単に扱えるライブラリがいくつか存在するみたいです。
    「chromy」 と 「puppeteer」

    比較してる記事がありました
    http://techblog.raccoon.ne.jp/archives/52414951.html

    「puppeteer」が一応公式開発のものみたいなのでこちらの情報を収集して頑張っていきたいと思います。

    OSは mac
    ターミナルは vscode によってやりたいと思います。

    一応「puppeteer」なしで動かします。

    とりあえず動かす。

    chromeをインストールして、

    適当なフォルダを作成。vscodeで開きます。

    chromeのインストール場所を指定します。(以下はmacの場合)

    alias chrome="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome.app"
    

    PDFの撮影をしてくれます。

    chrome --headless --disable-gpu --print-to-pdf https://google.com/
    

    puppeteer をインストールする

    先ほど作ったフォルダで継続して行います。
    nodeをインストールしてある環境なので「npm」でやっちゃいます。
    未導入の場合は以下からインストールで
    https://nodejs.org/ja/

    npm install puppeteer
    

    ではtest.jsを作っていきましょう。

    test.js

    const puppeteer = require('puppeteer');
    
    (async () => {
        const browser = await puppeteer.launch({ args: ['--no-sandbox'] });
        const page = await browser.newPage();
        await page.goto('https://www.yahoo.co.jp');
        await page.screenshot({ path: 'screenshot.png', fullPage: true });
        await browser.close();
    })();
    

    実行は以下の通り

    node test.js
    

    「yahoo」のスクリーンショットを取ってくれます。(すげぇ)

    puppeteerでなにができるか知りたいんだよなぁ・・・

    配布先でapiの説明があります。
    https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md

    英語が苦手なのが恨めしいですなぁ

    googleで検索して1位のサイトをスクショ

    const puppeteer = require('puppeteer');
    
    (async () => {
        const browser = await puppeteer.launch({ headless: true });
        const page = await browser.newPage();
    
        // Googleにアクセス
        await page.goto('https://www.google.co.jp/');
        // 検索窓に「logzitsu」と入力
        await page.type('#lst-ib', 'logzitsu');
        // 検索ボタンクリック
        await page.focus('input[name="btnK"]');
        await page.click('input[name="btnK"]');
        // 遷移完了を待機
        await page.waitForNavigation();
        // 検索結果の先頭リンクをクリック
        await page.click('.rc > .r > a');
        await page.waitFor(5000);
        // ページタイトルを表示
        const title = await page.title();
        console.log(title);
    
        // スクリーンショット
        await page.screenshot({ path: 'ss.png', fullPage: true });
    
        await browser.close();
    })();
    

    googleサイトのロゴ画像を保存

    const puppeteer = require('puppeteer');
    const fs = require('fs');
    
    (async () => {
        const browser = await puppeteer.launch({ args: ['--no-sandbox'] });
        const page = await browser.newPage();
    
        // ページ作成
        await page.goto('https://www.google.co.jp/');
        await page.waitFor(2000);
    
        // ページタイトル出力
        console.log(await page.title());
    
        // URL出力
        console.log(await page.url());
    
        //特定の場所のテキストを出力 今回は右上のナビのclassを指定
        const texts = await page.$eval('.gb_P', item => { return item.textContent });
        console.log(texts);
    
        // スクリーンショット撮影
        await page.screenshot({ path: 'screenshot01.png', fullPage: true });
    
        //ロゴ画像ソースの取得
        var imgurl = await page.$eval('#hplogo', el => el.src);
        var viewSource = await page.goto(imgurl);
        fs.writeFile("./logo.png", await viewSource.buffer(), function (err) {
            if (err) {
                return console.log(err);
            }
            console.log("画像を保存したよ");
        });
    
        await browser.close();
    })();
    

    めっちゃ汎用性あるなぁ。
    もーちょいいろいろ組み合わせるといろんなことができそうな予感です。
    メールで結果を送ったり、チャットワークにメッセージを送ったりね・・・。

    https://logzitsu.tlog.work/node-js-%E3%81%A7-%E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF%E3%81%AB%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%82%92%E9%80%81%E3%82%8B/
  • WooCommerce でサイトを作ってみる2 カスタマイズ 編

    どうやら、プラグインと深く連携しているらしい。

    当たり前っちゃー当たり前なんですが、WooCommerce機能の部分はプラグインと密接に関連しており、通常のwordpress編集のやり方は通用しないっぽいです。
    それ以外のブログ的な部分は一般的なテンプレートが適用されると思いますので、storefrontテーマを元にsingle.phpなどを追加してあげれば理想の見た目になると思います。

    上記の理由から、おそらく一から作るのはオススメできず、あくまでstore-frontの子テーマとして作成するのが正攻法と言えるでしょう。

    https://logzitsu.tlog.work/woocommerce/

    とりあえず現状の気に入らないところをリストアップ

    • バナーを設置できるようなスライドショーが欲しい
    • ランキングは上に欲しい
    • 下の方にお知らせ一覧が欲しい

    それくらいあればよくあるECサイトの見た目になる気がします。

    つまりはトップページのみカスタマイズしたいのです。

    下層の会員ページとか、カートページ・購入ページはCSSの見た目変更だけで問題なく、
    ブログの部分などもおそらくwordpressテーマを作ったことのある人なら問題なく自由にカスタマイズできるでしょう。

    つまり、TOPページの作成さえできればいい。しかも、ニュース(ブログ)の一覧はWordpress的な文法で解決できるでしょう。
    スライドショーも同様。(プラグインを入れてもいいし、普通に追加してもいい。自分はACFでバナー追加できるようにするかなー)

    • ランキングの読み込み(表示)
    • 商品一覧の読み込み(表示)

    これさえわかればとりあえず大体の制作に対応できる気がします。

    テンプレートを見たら、なんかカスタマイズの方法が書いてあった。

    Homepage Control プラグインの追加で、TOPのコンテンツを操作できるよ、と。
    入れたらカスタマイズで表示非表示の切り替えと、並び替えが可能になっていました。

    多分これで問題ないかな・・・?

    でもやっぱ物足りないと思って調べたら商品は「product」カスタム投稿だった

    ここまでわかれば、様々な問題が解決したも同然。TOPでサブループを回せば商品一覧は表示できそうです。


    <? //single slug は 「product」 //ページリンクURL the_permalink(); //商品名 the_title(); //商品説明 the_content(); //商品画像 the_post_thumbnail(); //金額 echo get_post_meta( get_the_ID(), '_price', true ); ?> //カートに追加するボタン <a href="/?add-to-cart=<?php the_ID(); ?>">カートに追加</a>

    上記で大体事足りるのではないでしょうか?

    Homepage Control と ニュースの出力など組み合わせれば色々できるし、ACFプラグインも使えば楽天のように長いLPの後に購入の入力欄のあるページも作ることが可能なのではないでしょうか。
    ながーい記事に付属するタイプのものであれば、記事に商品IDのカスタムフィールドを作り商品と連携するのも容易いかもしれません。

    実際運用して見ないことには足りない機能や不満などがわからないと思いますので、実際のECサイトを運用し、半年後くらいに所見を共有できたらいいなと思います。

    (とりあえず現状の)

    まとめ

    • woocommerceは無料のプラグインで簡単に wordpressの ECサイトが作れる
    • ほかのショッピングサイト作成ツールと異なり、wordpressの制作スキルが行かせることが大きい
    • 便利な拡張機能や、かっこいいテーマは有料である
    • しかし無料の範囲でも多くのことができるし、購入テーマを使うなら初心者でもおすすめかもしれない
    • カートや、会員ページなどはめっちゃ使える品質。カスタマイズが必要なのは主にTOPページ
    • 商品はslug product のカスタム投稿なので、いわゆるカスタム投稿の表示方法で操作できる
    • 決済は「paypal」と「Stripe」 要アカウント

    てなところです。

  • WooCommerce でサイトを作ってみる 準備編

    WooCommerce ってなに?

    ECサイトを作れるwordpressプラグインらしいです。
    どうせ有料だろって思ってたんですが、無料みたいです。
    wordpress.com が作ってるプラグインらしいので、自分はなるほど無料もアリエル!と納得しました(?)

    WooCommerce は色んな物を販売できる、自由なデザインも可能なECプラグインです。WooCommerce はWordPressとシームレスに統合され、世界で多くのショップオーナーや開発者から支持されている人気のあるECシステムです。
    柔軟性があり、数百の機能拡張WordPress プラグインがあり、世界の30%のオンラインショップがWooCommerce を採用されています。– 世界では他のプラットフォームより多く使われています。

    当然ながら、より便利に使える各種機能追加は有料みたいですね。
    その辺の情報もわかりやすく提供できたらいいのかなと思います。

    この記事の対象者は

    • wordpress をインストールできる人
    • ECサイトを WooCommerce で作りたい人

    となります。HTMLとCSSわかんねぇとか、という人は対象外です。ごめんね。

    公式サイトはどこ?

    プラグイン配布先
    https://ja.wordpress.org/plugins/woocommerce/
    公式サイト
    https://woocommerce.com/
    当然ながら英語ですね。

    なにはともあれ、試してみよう

    今回はさらのwordpressを用意して、公式テーマで何ができるのかを検証して見たいと思います。
    まずはプラグインを導入して見ましょう。
    ほかのプラグインのように「新規追加」で「woocommerce」と検索すると出ますので追加します。

    通常のプラグインと違い登録ページに飛びます(びっくり)
    スクショ
    入力してもいい気がしますが、とりあえず自分はあとで入力を選択しました。

    この設定画面はダッシュボードに出てくるメッセージの「設定ウィザードを開始」からいつでも戻って来れるようです。

    テーマを入れよう

    とりあえず公式のテーマを入れて見たいと思います。
    storefront
    https://woocommerce.com/storefront/
    0$だったけど、なんか購入手続きふむ必要があります。めんどくさ・・・。
    、と思ったけど、管理画面のテーマ検索から「Storefront」で出てくるもの同じみたいです。
    無駄な個人情報を明け渡してしまった。人柱だぁ・・・。

    storefrontの使い心地は果たして

    ・・・これ、store.jp とか、 base ぐらい簡単にできるやん!
    これの子テーマ作って、カスタマイズするぐらいでもかなりいいんじゃないだろうか。
    テーマのカスタマイズページで、吹き出しのポップアップで「ここ編集してね」が出るので、それに合わせて編集してくだけです。
    めっちゃ楽やんけ。

    カスタマイズ
    この画面でロゴなんかを決めていくだけ。

    しかし問題は、金額がドル表示になってること。
    これは、上でパスした「設定ウィザードを追加」をやると設定が直せます。さらに、カートページにもしっかりアクセスできるようになります。

    デザインがなんかぱっとしない・・・

    これでちゃんとしてたらテーマ売れないから当たり前ですかね。
    ちょっと見たところ有料のテーマが多いみたいですね。

    商品ページのサイドバーが邪魔な気がするので、消します。
    商品カスタマイズ画面 → ウィジット → サイドバー メニュー項目を全部消すとワンカラムのサイトになります。うん。
    デザインちゃんとして必要な項目があれば悪くなさそうですけどね。
    カートもちゃんと動きますし、いい感じです。

    在庫数などは商品管理ページから入れるみたいです。ここはwordpress慣れてる人じゃないとめんどくさく感じるポイントかも。
    商品一覧のインポートエキスポートにも対応してるみたいです。

    でもやっぱりパッとしませんね。
    商品登録画面でちゃんと画像を登録すること、カテゴリーにもサムネイルを登録すると、少しは見れる感じになります。

    追加機能の部分はやはり有料のものが多かったです。
    – 定期購入
    – 予約購入
    – 会員登録
    なんかが一番推してる機能みたいですね。なるほど、たしかに。
    しかしそんなに高価でもなさそうなので、制作を生業としてる人は制作費でまかなえてしまうのではないでしょうか?

    これでpaypalとStripeのアカウントを取れば結構いい感じなのではないでしょうか。paypal と Stripe の契約がどんな感じなのかわからないですけどね。ちょっと調べてみようと思います。

    あ、これもうちゃんとまとめてる人のサイト貼った方が早そうですね。
    https://crosspiece.jp/stripe-review/

    めっちゃよさそう。つーかwordpressで決済使えるならわりといろいろ幅が広がりそうですよね。

    たぶんカスタマイズ編に続きます

    追記
    以下を追加CSSに入れるとある程度改善されますのでお試しあれ。書き方結構汚いけど許して

    .product_title,
    .woocommerce-tabs .panel h2:first-of-type{
        font-size: 1.2rem;
    }
    .section-title{
        font-size: 1.6rem;
    }
    ul.products li.product.product-category img,
    ul.products li.product img{
        border:1px solid #ccc;
    }
    .single-product div.product p.price{
        font-size: 2rem;
        margin:10px 0;
    }
    p {
        margin: 0 0 0.8rem;
    }
    .woocommerce-tabs ul.tabs li.active a, ul.products li.product .price, .onsale, .widget_search form:before, .widget_product_search form:before{
        font-size:1.6rem;
    }
    ul.products li.product .woocommerce-loop-product__title, ul.products li.product h2, ul.products li.product h3{
        font-weight:bold;
        font-size:1.4rem;
    }
    ul.products li.product .button {
        padding:20px ;
    }
    .single-product div.product .woocommerce-product-gallery .flex-viewport{
        margin-bottom:15px;
    }
    .single-product div.product form.cart{
        margin-bottom:0;
    }
    .stock.in-stock{
        margin-bottom:0;
    }
    .woocommerce-tabs{
        padding-top:0;
    }
    .storefront-breadcrumb{
        margin-bottom:0;
    }
    .storefront-full-width-content.single-product div.product .summary{
        margin-bottom:20px;
    }
    .storefront-full-width-content.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li{
        margin:0 15px 15px 0;
    }
    .site-header{
            padding-top: 20px;
    }
    .main-navigation ul.menu>li>a, .main-navigation ul.nav-menu>li>a,.site-header-cart .cart-contents{
        padding: 10px 20px;
        margin-bottom:20px;
    }
    .storefront-full-width-content .woocommerce-products-header, .storefront-full-width-content.woocommerce-account .entry-header, .storefront-full-width-content.woocommerce-cart .entry-header, .storefront-full-width-content.woocommerce-checkout .entry-header{
        padding-bottom:30px;
    }
    .site-search .widget_product_search form::before {
        top: 11px;
        left: 6px;
    }
    

    https://logzitsu.tlog.work/woocommerce2/