日記

いろんな記事見ても、うーむわからん！取得できん！
となって、うまく動かないことが多かったので、試行錯誤の末とりあえず動いた例をここにおいておきます。

リストが並んでてそこから情報を取り出したい
ということが多いと思いますが、そういったときにだいたい使えると思います。

はてなブックマークの人気エントリーのリストから取り出す

そんな例です。ブックマーク数、タイトル、URLを抜き出して配列にしています。
コンソールに、結合してから出力しています。

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({ 
        //executablePath: '/usr/bin/chromium-browser',
        args: ['--no-sandbox'],
        //見えるようにfalseにしたけど本番はtrueにしてね
        headless:false
    });

    //配列を作る
    var text = [];
    
    const page = await browser.newPage();
    await page.goto('http://b.hatena.ne.jp/hotentry/all',{ waitUntil: 'domcontentloaded' });
    //await page.waitFor(2000);

    //情報を取り出したい同列に並んでいる要素(liとかが多い)
    const items = await page.$$('#container > div.wrapper > div > div.entrylist-main > section > ul > li > div > div.entrylist-contents-main');

    //取り出したい内容のselectorをなんとかして選ぶ
    const inner1 = await page.$$('#container > div.wrapper > div > div.entrylist-main > section > ul > li > div > div.entrylist-contents-main > h3 > a');
    const inner2 = await page.$$('#container > div.wrapper > div > div.entrylist-main > section > ul > li > div > div.entrylist-contents-main > span > a');
    
    //要素分ループを回す
    for (let i = 0; i < items.length; i++) {
        //取得
        const text1 = await page.evaluate(content => content.innerText, inner1[i]);
        const text2 = await page.evaluate(content => content.innerText, inner2[i]);
        const text3 = await page.evaluate(content => content.href, inner2[i]);
        //配列に追加していく
        text.push( text1 + " 【" + text2 + "】\n" + text3 + "\n"); 
    }

    //配列を全て結合
    text = text.join("");

    //結合した配列を出力
    console.log(text);

    await browser.close();
})();

itemsが並んでる要素。
innerが取り出したい中身です。上記の図でわかるでしょうか。

こういうパターンもありますね。赤が「items」青が「inner」になります。

セレクターをうまく取り出す方法

セレクターがうまく指定できてないことが動かない原因であることが多いです。
デベロッパーツールでセレクターを取得する方法です。

chromeのデベロッパーツールを開き、その要素の上で右クリック。
Copy > Copy selector と選ぶとその場所のセレクターがコピーできます。
どこかにペーストしてください。

#container > div.wrapper > div > div.entrylist-main > section > ul > li:nth-child(1) > div > div.entrylist-contents-main > span > a

こんな感じになります。「何個め」を表す:nth-child はループさせるときに邪魔になるので

#container > div.wrapper > div > div.entrylist-main > section > ul > li > div > div.entrylist-contents-main > span > a

このように少し削除して上記のサンプルでは利用しています。

まとめ

スクレイピングは元サイトに迷惑をかけないようマナーを守ってやりましょう！
訴えられた例もあるので注意してね。　https://ja.wikipedia.org/wiki/%E5%B2%A1%E5%B4%8E%E5%B8%82%E7%AB%8B%E4%B8%AD%E5%A4%AE%E5%9B%B3%E6%9B%B8%E9%A4%A8%E4%BA%8B%E4%BB%B6

参考にしました。

https://qiita.com/dokkoisho/items/f95bbe96fe4bd7312f40

APIを設定

まずトークンを発行してください

https://www.chatwork.com/service/packages/chatwork/subpackages/api/token.php

ルームID

部屋のridxxxxxxxの数字の部分です。
送りたい場所のものを控えておいてください。

コード

request を使うのでインストール。

$ sudo npm install request

message.js

const request = require('request');
const room_id = "xxxxxxxxxxx"; //メッセージを送りたいchatのURL末の番号(数字部分のみ)
const apiToken = "xxxxxxxxxxxxxxxxxxxxx"; //APIトークン

/* IDの情報取得に利用
function getInfo(){
    const options = {
        url:"https://api.chatwork.com/v2/me",
        headers:{
            "X-ChatWorkToken":apiToken
        }
    }
    function callbackFuc(error, res, body){
        //res(HTTPレスポンスヘッダ)
        //body(HTTPレスポンスボディ) jsonで返される
        res.statusCode == 200 ? console.log(body) : console.log('error: ' + error + '\nresponseCode: ' + res.statusCode);
    }
    request.get(options,callbackFuc);
}
getInfo();
*/

//メッセージの送信
function sendToMychat(){
    const options = {
        url:"https://api.chatwork.com/v2/rooms/" + room_id + "/messages",
        headers:{
            "X-ChatWorkToken":apiToken
        },
        form:{
            body:"メッセージ送信テストです"
        }
    }
    function callbackFuc(error, res, body){
        res.statusCode == 200 ? console.log(body) : console.log('error: ' + error + '\nresponseCode: ' + res.statusCode);
    }
    request.post(options,callbackFuc);
}
sendToMychat();

実行

$ node message.js

puppeteerで取得してきた情報をチャットワークに出力するのもいいかもしれませんね。

受付場所はこちら

　商品は以下の通り。

買おうと思ったけど、ちょっとためらってるんだよな・・・というのは抽選に参加してみるといいかもしれませんね。

どれもさすがの倍率です。

Zaifってメルアドとパスワードだけで登録できて、あとで名前やら住所やら登録する仕組みだったのです。
でも途中で飽きて登録したまま色々入力せず放置してました。

どうやら、ハッキング事件が起きたらしくてんやわんやになってたみたいですね。
で、フィスコとやらと資本提携したみたいです。

その引き継ぎに同意してくれってすごくメールが来ます。
いやだわ。

アカウント数で色々かわるから必死なんだろうな。
がんばって！！！

メールアドレス登録変えたんだけど、古いアドレスに送ってくるのだけはやめてくれー

毎週実行とか、毎日何時に実行とか、そういう動きをさせたいプログラムがあると思います。
そんな時に使える2つを紹介します。

どっちかを導入してみてね。違いはよく知らん。

node-schedule

$ npm install node-schedule

app.jsを毎日13時に実行させたい場合です。

schedule.js

let schedule = require('node-schedule');
let app =require('./app.js');

let j000 = schedule.scheduleJob({hour : 13,minute: 0}, function(){
  app.post();
 });

app.js側

exports.post = function (){

console.log("実行しました");

};

実行

$ node schedule.js

node-cron

$ npm install cron
$ npm install time

schedule-cron.js (app.jsは上と同じ)

const {CronJob} = require('cron');
let app =require('./app.js');

//秒: 0-59 分: 0-59 時: 0-23 日: 1-31 月: 0-11 週: 0-6
//以下は毎日 10:45
new CronJob('00 45 10 * * *', () => {
  app.post();
}, null, true); 

実行

$ node schedule-cron.js

さらに、これらはPM2と組み合わせると良いですよ。

フリー素材として有名ないらすとやですが、意外とあの絵柄にファンは多いみたいです。

日本中どこでも見かけますし、知名度はハンパないでしょうしね。

LINEスタンプ

公式のラインスタンプが結構出てます。
実際使うスタンプって送り手と受取手がどっちも知ってないと厳しい。
そういう意味では使いやすいですよね。

https://store.line.me/stickershop/author/4325/ja

ゲームプライズ

ストラップ付きのぬいぐるみですね。かわいい。
UFOキャッチャーとかで取れる店があるようです。

https://charahiroba.com/prize/item/detail?id=6174

ガチャガチャ

【もうすぐ発売】＼立体！いらすとや カプセルフィギュア01／
11月中旬頃から順次、家電量販店などに設置されているカプセル筐体で発売予定です!　全6種。1回500円🐱

また、ボックス仕様でも発売決定!　受注も始まっております🌟
詳細はこちら→ https://t.co/z1PGgVOvZ7#いらすとや #goodsmile pic.twitter.com/QEakL2vHBs

— グッスマ ちーちゃん (@gsc_chii) 2018年11月13日

一個500円。ちょっと高いですけどよくできてますね。

TBSニュースのキャスター

グッズじゃないですけど、読み上げのアバターになってるみたいです。

人気のアイスクリームが値上げです。#いらすとキャスター #TBSNEWS #グリコ #アイス pic.twitter.com/8GO55c6vyn

— TBS NEWS (@tbs_news) 2018年11月20日

基本的にはリンク先を参考にしてください。
この記事は愚痴です。

参考
https://design1plus.net/premiere-encore/

この記事の続きです。

なんかプレミアCS6についてた古いソフトがいるらしい。めんどくさいなぁ。

メディア書き出しで上記のような設定で書き出してください。

creativeクラウドから premia CS６をインストールしておいてください。
実際に使うのは

こいつです。

その後の設定は一番上のリンクを参考にしてください。

DVD作るのマジでめんどくさいなぁ。
youtubeは手軽ですごいってのがよくわかりました。

最大68%OFF！11/30までブラックフライデーSALE とのこと。

セールは年に何回もないので、Adobe製品欲しかったよ!という人は買い求めたほうがいいです。
すでに持ってる人も、現在のプランが切れた後に延長で適用できますよ！

購入はこちら

参考にしました

今回は上記の記事をなぞるだけかも。
ほんとにやりたいのはpuppetterと連携させること。次の記事でやります。

まず送信用メールアドレスを作る

各レンタルサーバーでつくるがよい。
上記はさくらの画面です。

fs  / bluebird / co / nodemailer
をインストールしてください。

npm i fs
npm i bluebird
npm i co
npm i nodemailer

sendmail.js

const co = require('co');
const mailer = require('nodemailer');
const fs = require('fs');

const mail_config={
  "host": "xxxxxxxxxxx.ne.jp", //SMTPホスト
  "port": "587", // ポート
  "auth": {
    "user": "メールアドレス@aaa.aaaa", //ユーザー名
    "pass": "ぱすわーど" // パスワード
  }
}

//SMTPの接続
var smtp_tmp = mailer.createTransport(mail_config);
// プロミス化
var smtp = require('bluebird').promisifyAll(smtp_tmp);

// メール内容の設定
var mail = {
  from: "メールアドレス@aaa.aaaa", //送信元
  to: "xxxxxxxxxxxx@gmail.com", // 送信先
  subject: "テストメール", //メールのタイトル
  text: "メール本文", //メール本文
  attachments:[{
    filename: "screenshot.png",
    content: fs.readFileSync("screenshot.png")
  }]
};

co(function*(){
  try{
    var res = yield smtp.sendMailAsync(mail);
    console.log(res);
  }catch(e){
    console.log("Error");
    console.log(e);
  }
  smtp.close();
});

同じフォルダにscreenshot.pngというファイルを置いておくと送信できます。

実行は

node sendmail.js

さくらサーバーではWEBフォントが使える

さくらのレンタルサーバーではモリサワのWEBフォントが使えます。
ただし使用には条件がありますので注意してください。

あれ？プラグインを入れてるのに適用されてない・・・

そういうことに気づいたのでした。
スマホだと明朝体になってしまっている・・・・。

原因はドメインを指定していないからでした。

WEBフォントを使えるのは一つのドメインという決まりがあるみたいです。
ドメインを指定するにはサーバーコントロールパネルから指定します。

表示したいドメインを登録ドメインに指定してください。

また、PV数が多い場合も表示されないみたいです。
月間 25,000PV なかなかに最初は達成が難しいので、小さな規模のサイトはきにする必要はないと思います。

WordPressの場合

プラグインで「TypeSquare Webfonts Plugin for さくらのレンタルサーバ」を有効にして好きなフォントを選ぶだけでいいです。

簡単ですね。
HTMLサイトの場合も上記ページのリンクから追加方法が記載されているようですよ！

メールの文面が不自然なので、修正する方法を調べてみました。

文面を挿入したい場合はメールテンプレートを加工する

設定のメール編集画面から行えますが、今回は文章の配置などはおそらく必要ないと判断したので触っていません。

基本は翻訳ファイルを修正する

メールの文面は翻訳ファイルに含まれています。
まず、テストで受注メール等を試しに送ってみて、修正したい文面を翻訳ファイルないで検索して、該当箇所を修正するという形になります。

翻訳ファイルの場所

/wp-content/languages/plugins　の中にあります。
woocommerce-ja.mo
woocommerce-ja.po
をコピーしましょう。
＊後述しますが上書きするだけだとプラグインアップデート時に更新内容は消えます。

.moが実際使われるファイル

.moのほうが実際に使われているものですが、人間が読めない「バイナリファイル」になります。.poの方を編集し正しい内容にして、コンパイルしましょう。

.poを.moに変換するソフト

POEDIT
https://poedit.net/

このソフトでコンパイルができるみたいです。windowsでもmacでも使えそうです。
あとは、ターミナルのコマンドでやる方法もあるみたいです。(今回は紹介しません)

編集もこれ使った方が効率が良さそうです。
よくみたら翻訳の提案してんじゃん！すご！
.poを開いて編集しましょう。

　編集が終わったら上書き保存の上、ファイルメニューからMOにコンパイルして、どちらもアップロードしましょう。

プラグインの付属ファイルなので、そのまま差し替えるとアップデートがあった時に消える。

なので、アップデートの影響が及ばない所に保存します。
アップロード場所は
/wp-content/languages/woocommerce
にフォルダを作ってアップロードしましょう。

追記 : プラグインの元データ(.poと.mo)消さないと反映されないかも？
消したら反映されました。

この場合の欠点としては、アップデート時に増えた項目は英語になってしまうことです。
Gitなどで言語ファイルを管理して、更新時に差分だけ適用するとかがいいんじゃないかと思ってます。(試してないですけど)

メールの役割と自然な文面

完了メールは発送通知みたいです・・・（わかりにくい）
どんなタイミングでどのような役割のメールが届くのか、また自然な文面については以下の記事が役に立ちました。

ふだん映像編集はしてないですが、adobeの契約していると普通に映像編集のソフトが使えます。
たまーに、映像を繋げてスライドショーにして、音楽だけつけてほしいよという依頼があるので最短で編集できる方法を書き残して置きたいと思います。
使用頻度が少なすぎて忘れちゃうんですよね。

Adobe公式動画がめっちゃわかりやすかった。

めっちゃ簡略的にまとまってます。
これだけで8割OKな感じがします。

トランジションの設定をする

上記の編集方法に加え、画面切り替えだけ少し工夫できればいい感じです。

画面切り替わり用語のメモ

エフェクトパネルのエフェクトから、該当のエフェクトを探してドラッグ&ドロップする感じです。
エフェクトの呼び名を知っておくとわかりやすいのでここにメモしておきます。

ディゾルブ

エフェクトパネル　ビデオトランジション → ディゾルブ → クロスディゾルブ
画面をフェードで切り替え
シーンのはしに合わせて、「command + D」で「クロスディゾルブ」エフェクトを追加できちゃうみたいですよ。

押し出し

エフェクトパネル　ビデオトランジション → スライド → 押し出し

写真のサイズを動画サイズに合わせる

フレームを選んで右クリック。フレームサイズに合わせてスケール
するとサイズがピッタリ合います。
複数を選択していると、一気にできます。

動きをコピーして他のフレームに適用

一つのフレームに拡大のエフェクトとかを自作して、他のフレームにも適用したい場合があると思います。
コピー元のフレームを選択し、コピーします。その後コピーしたいフレームを選び、「属性をペースト」します。一気にエフェクトを適用できます。

まとめ

メモっとかないと忘れちゃうんで、また同じような作業しなきゃいけない時はこの記事をみながらやろうと思います。
あと、DVDくらいの解像度なら、macbook pro 13インチの一番安いモデルでも楽々こなせそうな感じです。動画と静止画くっつけて30分ぐらいの動画になりましたが、h.264のmp4書き出しで10分というエンコード時間でした。
実用範囲も実用範囲です。
追記 * エンコードはやはりパワーを食う作業のようで、カクカクして真っ最中には他の作業は難しいようでした。ご注意ください。

Photoshop使ってて、シェイプの線の色が必ず赤色になってしまったり、破線や点線で書かれてしまうことがあります。
自分の場合は、必ず 角丸が 20px 1px 1px 1px という非常に使いにくいものが毎回出てきてイライラしていたところでした。

今回はそれの対策法です。

ツールの初期化をする方法

最初にツールを選択してください。

続いて、上に出ているバーの「ツールアイコン」を右クリックします。

ツールを初期化でOKです。全てのツールを初期化しても良いです。

手動で学習させるなら、アキネイターつくれるんちゃうか、とふと思ったので実験してみる。

アキネイターとは

https://jp.akinator.com/

これよ。人物を思い浮かべて質問をしていくと適切な回答を得られるというものです。
魔法みたい。

アキネイター仮説

つくり方を晒してる訳ではないと思うので、推測します。
これって実質は、「属性タグの絞り込み検索」なのではないかと思います

質問 1で男女とか、アニメキャラか否かを分けます。

アンパンマンを例にするとこんな感じです。
男であり、架空のキャラである。

属性タグ説でいくとこう表現できます。

質問によって、
男だと判明したら、男にチェックが入る。
架空だと判明したら架空にチェックが入る。

そんな感じで質問によってタグ情報を追加していき、該当するものを絞り込んでいく。
そのような仕組みなのではないかと思います。

質問の作り方

初期は大雑把に振り分けられる質問が多い感じがします。
タグの数の多い質問を優先的にしていく。そんな仕組みが必要そうですね。

事前にいい感じの質問を用意しておく必要もあります。
この辺の仕組みはまだちょっと考え中。
つくりながら検討します。

機械学習と、内容の修正

この辺はちょっとどうやったらいいか思いつきません。
s質問の絞りこみが達成できたら考えてみようかな。

squoosh とは

Google Chrome Labs の開発した画像圧縮ツールです。
TinyPNGのようにWeb上で使うアプリです。
PNGやJpgのほか
webP などの新しいファイル形式にも対応しているそうです。

早速使ってみた

tinyPNGと同じでドラッグするだけです。ファイル形式によっては圧縮率も設定できますし、画像の劣化具合もわかりやすく比較できます。

デフォルトの圧縮率だと劣化具合もほぼわからないので、実用的な設定になっていると思います。

もしかして１ファイルずつしかできない・・・？これは不便ですね・・・。

比べてみた

圧縮率とかの設定があるので、簡単には比較できないですが・・・。

元データ

5.0MB

squoosh

　mozJpg 665kb

webP 387kb

TinyPNG

.jpg 602kb

というような結果になりました。
jpgに関してはtinyPNGのほうが小さくなりました。
ただ、圧縮率を調整すればsquooshのほうが優れてる場合もありそうです。
画質に関しては・・・差がわかります？？
どれも元データをアップしてあるので興味のある人は比較してみてください。

また、新しいwebPは優れていそうですね。圧倒的に小さい。
tinyPNGは画像を大量に処理できるのが優れているのでまだまだ使うことになりそうです。