元記事はこちらです
https://qiita.com/gurigurico/items/2432ae08118050a280e8

スプレッドシートからjsonファイルを提供できるらしいです。

スプレッドシートを作ろう

スクリプトエディタを起動

スクリプトエディタからjsonを作る

データを整形する。
元記事のスクリプトを引用させていただきました。

function doGet() {
  const sheet = SpreadsheetApp.getActive().getSheetByName('シート1')
  const rows = sheet.getDataRange().getValues()
  const keys = rows.splice(0, 1)[0] 

  const data = rows.map(function (row) {
    var item = {}
    row.map(function (val, i) {
      item[String(keys[i])] = val
    })
    return item
  })

  return ContentService.createTextOutput(JSON.stringify(data)).setMimeType(ContentService.MimeType.JSON)
}

公開する。
全員に公開で、アプリケーションを承認するとURLが出てきます。 h

https://script.googleusercontent.com/macros/echo?user_content_key=9a7pZ_BBAtLCjhH1866wT7fyzdKaxcwIWGwDkfdHQv0JzLSqM67IKcUsvTst2ussqGj4_yl-IFynOpE1VMvY_OJUzgJCpTSYm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_1xSncGQajx_ryfhECjZEnGmZMfbfOToA7xjsrq03DF80Az8Jlk1D_cIaUahVhh9oocK5TpRSqfMYZpTak_o22Q&lib=MCREZQWbIOU9IyyNmKrcX-B-j0EsM5XUi

できました！

ちゃんと表示されます。

試してみる

スプレッドシートを更新すると・・・？

ちゃんとjsonにも反映されます。

これはすごい。
すごい可能性を感じるので、これについてもう少し掘り下げてみたいと思います。

続き

https://logzitsu.tlog.work/json%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92php%E3%81%A7%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/

おまけ

function doGet() {
  //シートを取得する
  const sheet = SpreadsheetApp.getActive().getSheetByName('シート1');
  const rows = sheet.getDataRange().getValues();

  //Browser.msgBox(JSON.stringify(rows));
  return ContentService.createTextOutput(JSON.stringify(rows)).setMimeType(ContentService.MimeType.JSON);
}

縦並びの場合は多分これでいける。

今まで知らなかったんですけど、うまーく工夫するとオリジナルのデザインでgoogleフォームが作れちゃうみたいです。
メールフォームのためだけに、PHPの動くサーバーを借りなくていいという利点があります。
まあ、だいたい一番安いプランで動きますけどね。
HTMLの知識と、Chromeとかのデベロッパーツールを使う必要があります。

参考にしました。

　https://qiita.com/sota6412/items/fa077cbf820faca30598

まず普通にフォームを作ります

今回はこちらのフォームのソースを使っちゃいました。

http://www-creators.com/archives/2486

自作でいいんですが参考にしてみると良いかと思います。

Googleフォームで同じものを作ろう！

 https://docs.google.com/forms/

作ったら、フォームページにアクセス

これのリンクにアクセスします。

fromの「action」とinputの「name」をそれぞれ取得

ブラウザのデベロッパーツールを立ち上げましょう

action

name

取得した情報を、作ったものに反映していきましょう。
めんどくさい。

ラジオボタンやチェックボタンもわかりにくいですがinputタグがあります。

それぞれ、作ったフォームに当て込みます。
ラジオボタンとチェックボックスは、valueの値をしっかり入れておきましょう。

動くか試してみる

PHPで動くシステムと違い、ローカルからPOSTしても問題なく動くのが素晴らしいですね。

以下のような画面が表示されたら成功です。

でもこの画面が表示されたらびっくりしてしまいますね。
あとで解決したいと思います。
その前に受信側の設定。

スプレッドシートに結果が記載されるようにする

フォーム作成画面から回答の表示画面に行けるのですが、その画面で上記のアイコンをクリックするとスプレッドシートが作成できます。
送信結果がスプレッドシートで一覧として確認できます。

上記のような感じ。
フォームが届いたら通知が届くように設定しておきましょう。

これで保存すると、フォームが届くたびに通知が届きますので、逃しません。

送信後の画面を変更する

ajaxで送信するんだそうですよ。

参考にしました。

Googleフォームをカスタマイズして導入、Ajax処理を行う
https://qiita.com/sugitata/items/182173c01e0470a3a4a8#_reference-a3a8c18aab158ee0c9de

jQueryのajaxを書き足します。

<!-- jQueryの読み込み -->
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>


<script>
function postToGoogle() {

//フォームの隊を取得
var field1 = $('[name="entry.2094131772"]').val();
var field2 = $('[name="entry.1337467998"]').val();
var field3 = $('[name="entry.1133430643"]').val();
//ラジオボタンの取得は↓
var field4 = $('[name="entry.204845324"]:checked').val();
var field5 = $('[name="entry.770373466"]').val();

//urlやentryは書き換えてね。
          $.ajax({
          url: "https://docs.google.com/forms/d/e/[key]/formResponse",
          data: {"entry.2094131772": field1,
"entry.1337467998": field2,
"entry.1133430643": field3,
"entry.204845324": field4,
"entry.770373466": field5
},
          type: "POST",
          dataType: "xml",
          statusCode: {
              0: function() {
                  //Success message
location.href="https://(転送先のURL)";
              },
              200: function() {
                  //Success Message
location.href="https://(転送先のURL)";
              }
          }
      });
      }
</script>

送信ボタンはsubmitから上記の関数が動くように書き換え

 <input type="button" onClick="postToGoogle()" value="送信">

サンクスページは作って、転送先URLに設定してください。

これで動けばOK!

お疲れ様でした！！

あとはフォームバリデーションのプラグインとか使うともっと本格的になりそうです。
あと、googleスクリプトとか使えば自動返信メールもできそうですね。

googleフォームには通常のフォームにはない利点もありますので、使いようによってはwordpressやphpより便利に使うことも可能そうですね。

最初に

初めましてしのぴと申します。

超高圧的なタイトルですね。ごめんなさい。ちょっとSEO的に効果あるか試してるだけなんで許してください。

それでは始めたいと思います。
今回は Web 制作の方法についてまとめていきたいと考えています。
「とりあえずホームページが欲しい」と言った方もこの記事の対象にして行きたいですが、ウェブデザイナーとして仕事をしたいと言う方も対象にしています。

WIXやjimdoってどうなの？

昨今は、簡単なウェブサイトができるようという謳い文句のメール制作サービスがいっぱいあります。
これらを利用すると、ある程度のものはできますが結局のところ素人臭くなんだかダサいサイトになってしまうことが多いです。

また、ちょっと変わったことがやりたいと思っても、できない。有料である。
そんなことがおおいので、あまりお勧めできるものではありません

「とりあえず」といったレベルの情報を載せておきたい、という場合は便利なのでこれらのサービスを利用すると良いと思います。

要望があれば上記のようなインスタントな Web サイトの作り方などの使い方も記事にできたらいいなと思っていますがどうでしょうか。（反応がなさそうならやりません)

WEB制作とインターネット

今回は Web 制作とは何かという話をしていきたいと思います

制作とは何かという話をしていきたいと思います結構 制作とは何かという話をしていきたいと思います結構簡単 制作とは何かという話をし

さてまずインターネットという仕組みについてお話ししたいと思います

インターネットというのは HTML 文章を共有するサービスのことです

サーバーに htmlファイルをアップロードすることで全世界の人がそのファイルにアクセスし情報を閲覧できます。

HTMLとは

インターネットはHTML 文書を基本として成り立っています。
例えばよく使われる「ワードの文章」などはそのままではサイトとして表示することはできません。

HTML の書き方に則って文章を作成してあげなければいけません
最初にこの HTML 文書の作り方を覚える必要があります。

初期の HTML は文章と画像を載せるだけのシンプルなものだったのですが、現在は閲覧者から情報の入力を受け取り、表示内容を変えたりする、能動的なアプリケーションの役割をするウェブサイトも多くなっています

これをよくリッチなウェブサイトなどと呼んだりしますね。

HTML自体に装飾の仕組みがあるのですが、 HTML の中に装飾の情報を入れてしまうと文章として非常にごちゃごちゃして扱いにくいという問題がありました。

これを解決するために 、CSS という装飾用の技術を組み合わせることによって装飾を行います。

html も CSS の日々心配しており書き方が少しずつ変わってきていますので、常に最新の技術に注意を払っていくことが、WEB業界で生き残っていく秘訣です。

そして HTML と CSS だけでは先ほど言ったアプリケーションのような動的なサイトを作ることは非常に難ししいです。
基本的には静的なWEBサイトを作るものための言語です。

JavaScriptについて

HTML では JavaScript というプログラミング言語を用いることができます。

JavaScript ではウェブサイトにアニメーションをつけたり、ちょっとしたメモアプリを作ったり、タイマーなどのちょっとしたアプリケーションを作ったりといったことが可能になります

JavaScript は 閲覧者のパソコンの中で動く者なので情報の改変ができてしまったりまた閲覧者の環境によって動かなかったりなど不安定な要素がありますので信頼性の高いプログラミングには利用できないという特徴があります

例えば掲示板やチャットシステムなどサーバーにデータを置いておきそれを更新し表示するといったプログラムがサーバーサイトのプログラミング言語でないと難しくなっています

サーバーサイドの言語は PHP がよく用いられています。

サーバーサイドの言語は何も複数ありますのでやりたいことに応じて学ぶ言語を選んで変えていくといいかもしれません

サーバーサイドで動く JavaScript がありますので JavaScript を極めればかなりの多くのことができると考えて良いでしょう。

HTML はサーバー上に設置する時に FTP ソフトというソフトを使わなければデータをアップロードできません。

これは HTML 言語が分かる人間であればたいしたことではありませんか、新たにページを作ることがなかなか面倒くさくなってしまいます、

そこで皆さんのブログもしくは SNS Twitter などを利用したことはないでしょうか

これらのサービスがレベル上に入力欄が存在しそこに文字などを入力することによって新たなページを生成することができるようになっています

こういった仕組みを CMS と呼びます

ブログなどが CMS なの代表的なものですがドログバサービス提供者様々な権限がありますのでサービス提供者が気に入らないうつ昭和削除する ています

10歳 Web 制作で主流になっているサービスが WordPress になります

桑のストレスは自分のサーバーにプログラムもインストールして自分のサーバーにブログシステムを設置して使うことができるというイメージです

WordPressを勉強した方が良い

これから Web 制作を勉強したいと考えている人はこの WordPress の作成を部屋に入れて勉強していた方がいいでしょう

WordPressについて勘違いされがちなこと

WordPress の運用は非常に簡単で便利に行うことができる仕組みになっています。
そのため WordPress による Web 制作は非常に簡単なものだと勘違いされがちです

しかし WordPress テーマを一から作成するというのは前述した HTML と CSS の知識に加え WordPress は PHP でできているシステムですので PSP の知識と WordPress 独自のテンプレートタグと呼ばれるもののしくみも知っている必要があります。

以上がプログラミングに関する知識です。

根津製作に関してはこれだけではありません

Web サイトの情報の位置を決める構成を作ったり見た目つまりデザインを考えたりする必要がありますまたその考えたデザインを形にするためにグラフィックソフトを扱うことも必要になります

日本では Adobe というグラフィックソフトの会社がほとんどのデザイン会社で採用されています

聞いたことがあるかもしれませんがフォローショーツはその後火のソフトです

利用料はそれなりにかかりますが今後仕事にするのであれば契約して早めに使い慣れておくことをお勧めします

グラフィックソフトが使えるだけでなく基本的な Web デザインの知識がウェブサイトを使って普段使い慣れていると言う森それを実際構成やデザインに残すことができるというスキルも非常に重要になってきます

つまりまとめると WordPress による Web 制作を部屋に入れている人間は次のような知識が必要になります

HTML と CSS の知識

サイトデザインをする場合は
デザインの知識
デザインを形にするための Illustrator や Photoshop の知識
ウェブサイト全般の基本的な知識
ＰＨＰの知識
WORDPRESSの知識
Web 制作にはもう行った時にわたる手術が必要求められます

多くの方はここでちょっとやりたくない気分になってしまうかもしれませんが心配することはありません就職するとなると多くの場合が部分用システムになっていますプログラミング 人間は数とプログラミングをやりますしデザインをやる人間はずっとデザインをやるという形が多いです

またこの他にも信仰の管理をするディレクターやゆうあいと言うユーザーの使いやすさを専門とした職種である UI デザイナーなどもあります

プログラミングだけひとつとっても CSS や JavaScript を担当するフロントエンドエンジニアサーバーサイドを担当するバックエンドエンジニアなどなど定期券メールを固執担当は HK メールを作成する担当は口座と呼ばれたりもします

羽田最近は Web サイトに動画を埋め込むことも多いので動画担当者などの Web 制作の軍用の一般となっていることが多いです

どちらかと言うと色々できる人間よりは一つのことに特化している人間の方がええわまたはいいことがありますので自分のやりたい分野を見つけてとにかく極めることが今後の自分の価値を高める手段になります。

次の記事に続きます

https://logzitsu.tlog.work/web/

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

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がもっと出てきてほしいなぁ。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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をサムネイルに指定して記事を投稿。
という流れになります。

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

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

終わり

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

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

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/

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

当たり前っちゃー当たり前なんですが、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 ってなに？

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/

やりたいこと

linuxの共有フォルダをtimemachineにしたい。

macのバックアップを取りたい。
windowsの共有サーバーではどうやら難しいらしい。
windows内の仮想PCにlinuxをインストールして共有もどうやら可能らしい
↓
とりあえずインストールしてみた

仮想PCをインストールするのはそんなに難しくない

isoファイルをダウンロードしてきて、仮想化ソフトでインストールするだけ。

linuxはオープンソースなのでいろんなものが存在します。（androidとかもその一つ）
サーバー用のものは真っ黒な画面で、他のPCから接続することを前提とした省エネなやつもあるんですが、そういうのはとっつきにくいので、割と普通PCみたいに使える「ubuntu」を選択してみました。

自分のWindows PCはメモリ16GBも積んでいて、宝の持ち腐れがはんぱないので、４GB割り当ててみた。
最初ちょっと古い１４？とかのバージョンを入れてみましたが、なにかとエラーが出ました。あとちょっともったりする感じがある。16にしたら見た目もちょっとよくなっていい感じです。

ファイルサーバー立てるのがよくわかんねー

通常のpcにlinuxをインストールしてファイル共有するやり方が結構出てるんですけど、そこに仮想PCという要素が乗ってくるともう頭がこんがらがっちまいますね。
NASを買ってくれば簡単に解決すると思うと、「もういいや！買ってくる！」となる気持ちもよくわかる・・・・。

ファイルサーバー以外の気づき

microsoftのvs codeとか普通に動きますね。
このソフトをメインで使ってるなら、もうwindowsでもmacでもlinuxでもなんでもいいじゃん。って思いました。
chromeも動くしね。
chromeにログインしちゃえばどこも一緒ですからね。

あとはpsdファイルさえちゃんと処理できればね。

まだ苦闘中

時間あるときにちまちまやります