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

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

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

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の時間を入れてますがもうすこし調整できるかも。
スケジュールで実行してやれば定期的な宣伝ツイートとかもできちゃいますね

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

当たり前っちゃー当たり前なんですが、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ファイルさえちゃんと処理できればね。

まだ苦闘中

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

Time Capcel生産終了

現在売ってるもののみで終わりで、Appleはwifiルータ製品をもう作らないのだそうです。
現在の製品は5年ほどサポートがあるのではないか？とのこと。

Apple、Wi-FiルーターのAirMacを終了

ルータ機能いらないけどバックアップはしたい！

1TBSSDに換装したのはいいんですけど、なんでもかんでも保存するようになっちゃって、このパソコンぶっ壊れたら怖いなーという思いしかないんですよ・・・。
現在、1TBの外付けポータブルディスクをTime Machineのディスクとして使っているのですが、これがすこぶる調子が悪い。
接続しても認識しないことが多々ある・・・・。
本体より壊れやすいバックアップというのも考えものなので、どうにかバックアップはキチンとしておきたいなーと検討していたのです。

選択肢1 Time Capcel を買う

色々見てみたのですが、やはり安定性がすごく高いみたいですね。
いずれサポートは終了する製品とはいえ、今買ってしまうのもいいかなーと思うのですよ。

選択肢2 他社製のルーターかNASを買う

time machine対応のNASか、ルーター(USBでHDDなどを取り付けできる)を買うかー？
こちらの難点は、いまいち対応してるのか、してないのかわかりにくいということです。
なんかこの雑なサポートのしかたがあまり信用できないんだよなー。

HDD + ラズパイ で自作している方もいるみたいです。
Raspberry PI 3 でMacのTime Capsuleを自作してみた

これいいなー。要検討です。

選択肢3 他のMACの外部diskを保存先に指定する。

macOS High Sierraでは、Time Machineサーバーの機能がOS標準機能として組み込まれました。設定方法を解説します。

上記のようなことができるみたいです。それまでは2000円ぐらいのアプリを入れないとその機能は使えなかったみたいですが、新しいOSは標準搭載みたいです。
なるほど、wifi製品の販売を終了する代わりにこういった手段を提供していくのだなと思いました。

これはすごくちゃんとしてそうです。
でもMac持ってないんですよ。
新OSが入れば古くて問題ないと思いますけど、それでも高いよなぁ・・・・。

Mac mini

windowsでこれやらしてくれえ！　無理か。

結局様子見です

新しい何かが発表されるかもしれませんし、それまで壊れかけのHDDで耐えて行こうかなと思っています。

完成したHTMLサイトからWordpressテーマを作成する、という記事を書こうと思ったのですが、一つの記事にすると長すぎるし、事前に説明が必要なことや準備が多すぎる！
ということで外堀を埋める作業をずっとしています。

こちらの記事はワードプレスサイト化するための元となるHTMLサイトを作成する記事になります。
めんどくさいのでbootstrapでチャチャっと作ろうと思っているのですが、bootstrapについての説明も必要ですよね。
その辺も合わせて説明していくのにチャレンジしてみたいと思います。

Bootstrapでサイトを作ろう

Bootstrapとは

まずBootstrapについて説明しなければなりますまい。
Web制作をしている方は、「このCSS使い回せるようにしといたら楽だな！」などと思って実際に使いまわしていることはないでしょうか？

それです

BootstrapはそういったCSSの塊です。ついでにJSもついてます。
こういう使い回しのきくCSSを集めたものを「CSSフレームワークと呼びます」

めちゃ普及しているCSSフレームワークであるBootstrap

Bootstrapはかなり日本ではメジャーなCSSフレームワークですのでそこら中に情報が転がっています。
便利ですね。
また、Bootstrapを使ったサイトであれば、修正加筆が簡単というメリットもあります。
大規模で運営するほど、こういったフレームワークを活用することで大人数の修正でも破綻しないことが期待できます。

メリットとデメリット

先に紹介したように、bootstrapを知っているもの同士ではファイルの可読性が増しスムーズです。
修正も簡単で、一から書いていると割と大規模な改修になってしまうものでも、「class1つ変えるだけ」でレイアウトを大きく変更してしまうことも可能です。そういった大規模修正であっても、CSSを全く書かなくていいこともあるというのもすごくいいですね。しかし、逆に言えばわからない人は全く使えないというのがデメリットです。学習コストが発生します。
一回覚えてしまえば利用に関してそこまで複雑なルールはありませんので、簡単なんですけど、触れていない人は何だか仰々しく、難しいものに感じてしまうのも事実です。

もう一つデメリットとしては、「bootstrap臭さ」が出てしまうということです。
簡単は簡単なのですが、どこかで見たことがあるようなサイトになってしまうのです。
運用重視で、デザインに関してはそこまで重要視していないというサイトであれば導入しない理由はありません。
それと、設定データからカスタマイズしてしまえばこの「bootstrapっぽさ」はかなり消せると思います。

モバイルファーストなサイトが作成できます。あとはFlexboxが登場してから、割とスマホ対応が簡単にできるようになったのでちょっと利用重要度は下がっているんですけどね。

あと導入が簡単なので、一から書く場合はリセットCSSを準備して、配置して、みたいなサイト制作開始時の手間がかなり減ります。リセットCSSは組み込まれていますのでわざわざ適用する必要はありません。
ちょっとクセはありますがモーダルウインドやカルーセルなども利用できますので便利です。

classつけすぎ問題
性質上htmlにclassがいっぱいつくのもデメリットと言えばデメリットかも。

Bootstrapの基本的な概念について覚えよう

こちらはbootstrap4について書いています。
バージョンでかなりclassに差があるので注意です。

グリッドシステム

bootstrapの大きな特徴として「グリッドシステム」を採用していることが挙げられるでしょう。
グリッドシステムとはサイトの横幅を12分割して考える方法のことです。

たとえば要素を3分割したいなら、

<div class="row">
<div class="col-4">コンテンツ1</div>
<div class="col-4">コンテンツ2</div>
<div class="col-4">コンテンツ3</div>
</div>

こうなります。12÷3ですので、4という数値が3分割を表します。
４分割なら

<div class="row">
<div class="col-3">コンテンツ1</div>
<div class="col-3">コンテンツ2</div>
<div class="col-3">コンテンツ3</div>
<div class="col-3">コンテンツ3</div>
</div>

こなります。

デモページ
sample1

このように、幅を指定したい場合は「col-?」という形で指定し、それらを囲む親要素には必ず横並びを表す「row」というclassをつけるようにしてください。

モバイルファーストのレスポンシブ

bootstrapでは最初から見た目の切り替わりである「ブレークポイント」が設定されています。
このブレークポイントで、classによる表示を変えることができる仕組みを持っています。

grid options

この5つのポイントでCSSの切り替えを行うことができます。

例えば 「Extra small」ではサイト幅いっぱい。
「Medium」より大きい場合は３分割、という場合は次のように指定します。

<div class="row">
    <div class="col-12 col-md-4">コンテンツ1</div>
    <div class="col-12 col-md-4">コンテンツ2</div>
    <div class="col-12 col-md-4">コンテンツ3</div>
</div>

デモページ
sample2
サンプルではスマホで全て幅いっぱいにする指定をしています。サイト幅を変えて表示を確認してください。

上記のような仕組みはグリッドシステムだけでなく、他の指定でも応用できます。

例えば
「d-block」「d-inline」「d-none」
という指定があります。
これらはそれぞれ、ブロック要素にする、インライン要素にする、none（見えなくする）という指定です。

これをレスポンシブの指定と組み合わせると

<p class="d-none d-md-block">PCPCPCPC</p>
<p class="d-block d-md-none">SPSPSPSP</p>
<p>現在のサイト幅は<span class="d-inline d-md-none">SP</span>
<span class="d-none d-md-inline">PC</span>サイズです</p>

このようなこともできます。
デモページ
sample３
サイト幅を変えて表示を確認してください。

サイトの幅を指定する。

<!-- 通常 -->
<div class="container"></div>
<!-- ウインドウいっぱい -->
<div class="container-fluid"></div>

デモページ
sample2

画像をレスポンシブ化する

<img class="img-fluid" src="test.jpg" alt="">

デモページ
sample2

フレックスボックスの細かい指定

FLEXの細かい指定もclassで可能です。
幅「md」より広い時は横並び、狭い時は縦になる場合です。

<div class="container">
        <h1>Flexboxもclassで指定できる</h1>
        <div class="d-flex flex-nowrap flex-column flex-md-row">
                <div>
                        <img class="img-fluid" src="test.jpg" alt="">
                        フレックステスト
                </div>
                <div>
                        <img class="img-fluid" src="test.jpg" alt="">
                        フレックステスト
                </div>
                <div>
                        <img class="img-fluid" src="test.jpg" alt="">
                        フレックステスト
                </div>
        </div>
</div>

デモページ
sample4

その他いろいろ便利です

h1などの見出しももともとスタイルが適用されていたり、tableタグに「.table」をつけるだけで簡単にいい感じのテーブルになってくれたりします。
フォーム関係の指定も充実していて便利なのですが、ここでは割愛します。

指定をまとめた「チートシート」を掲載しているサイトがありますのでそちらのリンクを参照してください。
Bootstrap 4 Cheat Sheet

実際にサイトを作ろう！

ではブートストラップの紹介も済みましたので、実際のサイトを作成していきたいと思いますが、ちょっと長くなったので次の記事に続きます。

執筆中。

当サイトで紹介しているXdomain無料サーバーでFTPソフトを利用するには？
をまとめていますので参考にしてください。

利用にはちょこっと設定が必要なのです。

FTPソフトはFireZillaを利用しています。

https://logzitsu.tlog.work/xdomein/

サーバーレンタルの記事はこちらです。

まずは管理画面にログイン

Xdomain管理パネル
管理パネルにログインしましょう。

無料レンタルサーバー

管理パネルログインをクリックし、ワードプレスサービスの管理ページに移動しましょう。

設定をクリックしましょう

FTP設定の部分を探してクリック！
余談ですがphpMyadminへのログインリンクもここにありました。

(とくに今回は触りません)

こうして

こうして

こう！ 自動生成されたパスワードを確認する場合は編集をクリック

パスワードが確認できます。
あとはここにある情報を、FTPソフトに入力しサーバーとの接続を行ってください。

https://logzitsu.tlog.work/ftp/

WEB制作に必要なものまとめ

こちらのサイトではWEBのノウハウについてまとめていますが、制作に必要な環境について書いておかないと、それぞれの環境に差があって説明しにくいことに気づきましたので、この記事でWEB制作に関するソフトなどについてまとめておきたいと思います。

やっぱり最優先で揃えたいPC

WEB制作でコードを書く作業はそんなに重い作業ではないのですが、デザインデータに主に「photoshop」という画像処理ソフトでデザインを利用します。
あとは「adobe XD」とか。これも別にすごく軽いソフトではないので、
最新版のPhotoshopがちゃんと動くのが作業PCの最低条件かと思います。

PhotoshopがそしてXXが動かないよーとかいってるやつ！さっさと買い換えろ！
せっかく時間を割いて勉強してるのに、色々無駄で勿体無いですよ。

10~15万ぐらい出せばすべて解決します。
スピードが早くなり、効率がいいのは言わずもがな、気に入ったPCで作業できるという心の問題も大きいです。

OSはどっちがいいの？

windowsでもMacでもどっちでもいいです。気に入った方を使ってください。
Macは高くて低スペック、と言われがちですが軽さや筐体の丈夫さ、キーボードの打ちやすさ、画面の美しさは折り紙つきなのでそういうところを気にしてwindowsを選ぶとめっちゃ高いです。
反面、macは一番安いノートを選んでもその辺は妥協してないと保証できます。
あと、結構古くてもオークションなどで人気なので下取り価格が下がらないのもいいですね。
自分は、ほぼ価値がゼロになるまで使い倒しそうな勢いですけどね。
不満がほとんどないからしょうがない。

どちらを選ぶかについてはどこを重要視するか、ですね。
使い慣れたwindowsの方が効率がいいということもあるでしょう。

Linuxはどうなの？

サーバーでよく使われるOSですのでサーバーとかに詳しい人が使ってるイメージ。
photoshopは動かないと思いますので、メインで使うのは難しいかもしれません。
デザインに関わらない人なら行けるかも。

ネット環境

当たり前ですがネット環境は必要です。
ソフトのダウンロードなど結構帯域を使いますので、モバイル回線のみはかなりきついかもしれません。
光回線などの固定回線を契約しておいた方がいいでしょうね。

WEB制作で使うソフト

デザインソフト

まず、デザインソフトを使用します。このサイトではあまりまだ触れられていませんが。
デザインがメインの業務でなくても、デザインを受け取って画像を切り出す作業は必要なのでインストールは必須でしょう。

adobeソフトなのでこちらから
Creative Cloud
月額有料のソフトです。
映像を作成するソフトも含まれています。WEBも映像を組み込むような場面が多くなっていますので、そういったことを視野に入れればそんなに高くないです。
月額利用料分くらいは頑張って稼ぎましょう。

Photoshop

adobeのソフトはクラウドサービスの月額制になっていますので、全てのソフトが使えるプランに登録しておいた方がいいと思います。
Photoshopは写真の加工を行うソフトですが、WEBデザインにも利用できます。
絵を描くソフトとしても使えますし、汎用性のある万能ソフトです。
ワイヤー作成 → デザイン作成・画像補正・イラスト作成 → デザイン納品
までこのソフト一本でできちゃいます。
月額有料のソフトです。

WEBデザインや、ワイヤー作成ソフトは色々他にもあるんですが、「画像編集」という点でどう考えてもphotoshopに勝てるソフトがないので、なかなか他のソフトが普及していない気がします。
納品となると、相手も同じソフトを持ってる必要がありますしね。

多分どれもphotoshopの作業ファイル形式である「psd」出力の機能を持っているのではないでしょうか。

Illustrator

Webデザインにおいてはさほど存在感がありませんが、イラストレーターも利用します。
元々はイラストを作ったり、紙媒体のレイアウトを行うためのソフトです。

ロゴやアイコンを作成する時に利用します。
SVGという軽量でどんなに拡大しても問題ないベジェ曲線データの画像を作成できますので、そういった場合に使用します。
とはいえ、シルエットのアイコンデータはフリー素材がかなり充実していますので、わざわざ作成する機会もやっぱりすくないですけどね。

また、紙媒体出身のデザイナーはだいたいIllustratorのほうが得意ですので、webデザインをすべてこのソフトで行うという方もいます。
月額有料のソフトです。

エディタ

HTMLやCSSはテキストデータなので、まずはこれが必要です。

Visual Studio code

最近使ってからメインになっていますが、最初からWeb制作に必要な機能が搭載されている感じがすごくいいです。
Gitとかもこのソフトを使えばさほど抵抗なく利用できるのではないでしょうか。
近くにそういった技術に詳しい人がいるとすごくいいと思いますけど。
WinでもMacでも使えます。
無料です。

Visual Studio Code

Dreamweaver

Adobeのソフトウェアです。昔に比べるとかなーりよくなっているはずのソフトなんですけど、結局使ってないんですよね。いろんな機能がついているが、なんとなく重い印象がネックですね。
ほかのソフトでも問題ないのでわざわざ使う必要がない、みたいな感じでしょうか・・・。
月額有料のソフトです。

atom

github謹製のエディタ。
軽くて機能拡張もでき、カスタマイズすることでどんどん自分好みのエディタになります。
多分、別のパソコンでも環境を統一できると思うんですが、Visual Studio codeが初期状態で使いやすすぎるせいでこのソフトの出番はだいぶ減ってます。
Atom

ただインストールしただけだと物足りないエディタなので、いろんな記事を調べて適用できる方におすすめ。

チャットソフト

お客さんのやり取りや、制作者同士のやりとりで必要になってきます。

LINE

お客さんが使える環境にあるという一点で使う機会が多いです。
ただし、過去データが見れなくなることが多いです。
WEBにメッセージ履歴が残ってないので、端末を変えたりすると過去のデータが見れなくなることがあります。仕事のやり取りで使うには不安が大きすぎます。
バックアップを撮る機能はありますが、そんなことを気にするより他のツールを使ったほうがいいでしょう
お客さんとのやりとりはしょうがないですが、最低でも制作者同士のやりとりは他のツールで。

チャットワーク

月額利用料を払ってないと、部屋が5つぐらいしか作れないという制限があります。
でも割と普及してますし、チャットソフトとしての不満はあんまりないです。

slack

使ったことないんですけど、チャットワークより無料による制限が少なそうなのがすごくいいですね。
エンジニアが使ってるイメージがすごくあります。
チャットワークは割と閉じた印象なのですが、slackはいろんなソフトと連携して面白いことが色々できるみたいです。
機会があればちゃんと使ってこのサイトでもそういった記事を作ってみたいですね。

プロジェクト管理

https://logzitsu.tlog.work/task/
この記事でも少し触れましたが、プロジェクト管理ツールを利用するのが割と一般的になりつつあります。
複数人でTODOを共有できるソフトウェアです。

使ってみるとわかりますが、めちゃくちゃ効率がいいです。

trello

有料のツールが多い中、無料でかなりのことができるツールとなっています。
おすすめです。
trello

プロジェクト管理ツールに関しては会社に所属している場合はそこで使っているソフトを利用するケースが多い気がしますので、今回触れるのはこの程度にしておこうと思います。

ブラウザ

制作したものが実際動作するか確認が必要！
ということでWEBブラウザーは必須です。

Chrome

このソフトの検証ツールに慣れすぎて、これなしでは作業ができません。
でもJavaScriptとかの検証についてはそんなに明るくないので、その辺も調べた上記事にしてみようかなと思います。

EDGE

windows10のデフォルトブラウザーです。
Windowsでないと動きませんよ。

internet explorer 11

もういいだろ、デフォルトから消してくれ、な「internet explorer 11」です。
とはいえ、昔のIEと比べて、表示が異なってしまうことは少ないかな、と思います。
Windows専用です。

Safari

Macのデフォルトブラウザーです。
Windows版もありましたがそれはもうサポート切れてると思いますので気にしなくていいです。
iOSのデフォルトブラウザーでもありますので、スマホでの動作確認もこちらで。

Firefox

Firefoxです。バージョンが新しくなって早くなったみたいです。
ほとんど使ってないですけど、頑張って欲しい。

Androidデフォルトブラウザ

Android持ってないので今は違ったらすいません。
デフォルトでついてるブラウザです。
Androidスマホでの検証で必要になります。

ブラウザまとめ

Win、Mac、iphone、Androidスマホ
を全部持ってないと上記の検証はできないんですよね。
ちょっと古い端末はそんなに高くないので、一応持っておくといいかもしれません。
持ってる人に借りて確認するのも全然ありだと思います。

FTPソフト

サーバーにファイルをアップロードするために必要なソフトです。
https://logzitsu.tlog.work/ftp/
このサイトではFilezillaを使ってます。

レンタルサーバー

自分の作品を公開したり、サイトをテストするために自分のサーバーを持っておくのは割と一般的な気がします。
ドメインも持っておくといいでしょうね。
月額費用はかかりますけどね。

まとめ

まとめると必要なツールは

• パソコン
• ネット環境
• Adobeのツール
• エディタ(この記事では VScodeを採用)
• ブラウザ
• FTPソフト
• レンタルサーバー

これらが揃っていれば割と場所も選ばずに活動できるということです。
いい世の中になったなーと思います。
そして、今後も生き残れるように決意を新たにした次第であります・

おわり。

wordpressをインストールしたら見るマニュアルです

ワードプレスをインストールしたものの、なんだかよくわからねえ。
そんな困ってしまってる人を助けるための記事です。
必要な部分を読んじゃってくださいね！

まだワードプレスをインストールしたことがない！
インストールの仕方もわからない！という人は以下の記事を参考にしてみてください。

https://logzitsu.tlog.work/xdomein/

ワードプレスサイトを持ってる方は以下へどうぞ。

WordPress管理画面にログインする

各自、ワードプレスが閲覧できるアドレスを持っていると思います。
自分の場合は以下。
http://logzitsu.wp.xdomain.jp/

このアドレスの末尾に「wp-admin」をつけてアクセスしてみましょう。
http://logzitsu.wp.xdomain.jp/wp-admin
といった具合です。

ワードプレスのログイン画面が表示されたと思います。
ワードプレスインストール時に設定した、
「ログインID」or[メールアドレス]
そして「ログインパスワード」を入力してください。

管理画面解説

管理画面左にあるメニューは「管理メニュー」などと呼びます。(多分)

今回の記事で説明するのは

• テーマの変更方法
• 記事の投稿方法
• 固定ページの追加方法
• プラグインの追加方法(contactform7)

です。今回触るのは画像の赤で印をつけてある部分のみです。

テーマを変更してみよう

ワードプレスは見た目を簡単に変えられるので、HTMLがわからない人でもテーマ制作者による高品質なテーマが利用できるのが大きな利点です。
まずはサイトの見た目を変えてみましょう!

管理メニュー
外観 → テーマをクリックすると上記のような画面になります。

「新規追加」をクリックすると新たなテーマを追加する画面に移動します。
選んで「プレビュー」するとどんなテーマかみることができますので、試してみましょう。

上記は　Start というテーマのプレビュー画面です。
多くのテーマ作者さんたちが提供していますので、多くのテーマから選ぶことができます。この画面から選べるものは無料で利用できます。

気に入ったものが見つかれば、インストールしてみましょう。
すぐに適用されるわけではありませんので、安心してインストールしてみてください。
インストール後、「適用」することでサイトの見た目が変わります。

テーマにより、搭載している機能が異なりますのでご注意ください。

記事を投稿してみよう

ワードプレスの大きな特徴として、ページ追加がとても手軽であることがあげられます。手軽にページを追加できるということは更新や記事の追加が簡単ということですので更新頻度が上がり、SEOへの効果も期待できます。

管理メニュー
投稿 → 新規追加

で上記の新規投稿追加画面に移動します。
タイトルと内容を入力すればOKです。

ブログエディタ機能で簡単に見出しやリストなどを作成できますので、活用していい感じに読みやすい記事を作っちゃってください！

アイキャッチを設定しよう

記事にはアイキャッチが設定できます。
記事内容の部分から画像を追加できるのですが、アイキャッチとして追加したものは、記事一覧で使うことができます。
多くのテーマはこの画像を有効に利用していますので、記事にはアイキャッチを設定してあげたほうが見栄えが良くなります。必ず設定するようにしましょう。

ワードプレスの画像追加は、画像投稿画面を表示したら、パソコンからのドラッグ&ドロップで直感的に作業できますのでそんなに迷うことはないかな、と思います。

記事にカテゴリとタグを設定しよう。

ワードプレスは初期状態で「カテゴリ」「タグ」を設定する機能が付いています。
カテゴリやタグってなに？
という方もいるかと思います。

記事の分類わけとして認識していだければと思います。
カテゴリ・タグの使い方は、各サイトで自由に設定できるというのが利点でもありますので説明が難しいのですが、カテゴリは記事の持つ大きな分類分けをするもので、タグは記事の特徴を細かく記載してして指定していくもの、という感じでしょうか・・・。

ここで設定した情報は同じカテゴリ、タグを持つ記事だけを一覧として表示することができますので、ユーザーの使い勝手が上がりサイトの価値をあげることにもつながります。

設定が全て終わったら「公開」を押すことで公開が開始されます。

固定ページを追加してみよう

投稿と固定ページの違いですが、ブログ記事のように日々いっぱい増えていくようなものは「投稿ページ」
一度作成したら内容も変わらず、同じようなページもさほど増えないという性質のものを「固定ページ」にするといいです。
例えばアバウトページやコンタクトページです。
内容は変わることはあると思いますが、さほど頻繁ではないですし、毎日同じような
ページが増えていくタイプのものでもありません。

固定ページの特徴として親子関係を持たせられるという特徴があります。
親子関係は少し処理として重いそうなので、ものすごい数が増えるような「投稿」てきなものには比較的向いていないため搭載していないのだそう。

固定ページも「親」の設定がある以外は投稿ページとさほど変わりません。

管理メニュー
固定ページ → 新規追加で上記画面になります。

やってみよう

お問い合わせページを追加してみましょう
– タイトル「お問い合わせフォーム」
– 本文「お問合せはこちらかどうぞ！」

プラグインを追加する

いろんな機能を追加できる、プラグインを試してみましょう。
せっかくなので、今回はサイトにコンタクトフォームを追加してみましょう。

管理メニュー
プラグイン → 新規追加
で上記画面になります。右上にある検索窓から「contactform7」と入力して、富士山のアイコンの該当プラグインをインストールしてください。

インストールできたら有効化してください。
管理メニューに「お問い合わせ」が追加されたと思います。

Contact Form7 の使い方

コンタクトフォーム7プラグインを使うと、サイトに簡単にお問い合わせフォームページが追加できます。
入門としてはすごく良いので試してみましょう。

管理メニュー
お問い合わせ　をクリックすると、
最初から「コンタクトフォーム1」というものが作成されています。
それをクリックするとフォームが編集できます。

この画面で詳細にフォームを設定できますが、初期状態でとりあえず動きますのでこのまま使ってみましょう。

管理者宛のメールアドレスは、インストール時に設定したEmailアドレスになっているはずです。

ここでコピーするものはショートコードというものです。
PHPを管理画面でそのまま使えると、セキュリティに問題があるため、ワードプレスでは「ショートコード」というものを経てプログラムを利用します。

プラグインでは度々あります。大抵は記事に貼り付けることで動きます。
コンタクトフォーム７ではこれを貼り付けた場所にフォームが出現し使えるようになります。

このようにして公開すると

フォームが生成されます！
実際に動くか試してみて、受信できれば成功です。

とりあえず大雑把ですがこんな感じです。

WordPressの醍醐味な部分にはこの記事の内容を一通りやることで体験できたのではないでしょうか？
当然ながら細かい設定は色々ありますし、プラグインを追加することでさらに便利にすることも色々できます。
そういったことについては他の記事で随時触れて行きたいと思いますのでご期待ください。

https://logzitsu.tlog.work/wordpress1/

こちらを次に見るとワードプレスについてもうちょっと深く理解できるようになりますよ！

SEO対策の基本を学びましょう。

SEO対策とは、検索エンジンで検索結果が適切に表示されるように設定しておくことです。
過去、「キーワードに無関係のワードをとにかく大量に入れる」「外部リンクをとにかく設置する」などのSEO対策が取られていましたが、これらは現在逆効果であると言われています。

なので、そんなにテクニック的なことはないです。
上記の不自然なリンクはよく無いのですが、自然増の外部リンクは非常に有効であると言われていますので、外部リンクが自然と増える有益なコンテンツを作成するのが大切みたいです。

まずは「googleの情報を確認しましょう」

検索エンジン最適化（SEO）スターター ガイド

googleに関しては、まずこちらを熟読してください！以上！

といいたいところですが、それだとこの記事の意味が無いので、抜粋、要約してみたいと思います。
全部を網羅しているわけでは無いので、しっかり学びたい人はちゃんと元ファイルをみてください。

ちゃんとしたサイトになるように心がけよう

ウェブマスター向けガイドライン（品質に関するガイドライン）

こちらにどんなサイトにするべきか記載されています。

基本方針

• 検索エンジンではなく、ユーザーの利便性を最優先に考慮してページを作成する。
• ユーザーをだますようなことをしない。
• 検索エンジンでの掲載位置を上げるための不正行為をしない。ランクを競っているサイトや Google 社員に対して自分が行った対策を説明するときに、やましい点がないかどうかが判断の目安です。その他にも、ユーザーにとって役立つかどうか、検索エンジンがなくても同じことをするかどうか、などのポイントを確認してみてください。
• どうすれば自分のウェブサイトが独自性や、価値、魅力のあるサイトといえるようになるかを考えてみる。同分野の他のサイトとの差別化を図ります。

具体的なガイドライン

次のような手法を使用しないようにします。

• コンテンツの自動生成
• リンク プログラムへの参加
• オリジナルのコンテンツがほとんどまたはまったく存在しないページの作成
• クローキング
• 不正なリダイレクト
• 隠しテキストや隠しリンク
• 誘導ページ
• コンテンツの無断複製
• 十分な付加価値のないアフィリエイト サイト
• ページへのコンテンツに関係のないキーワードの詰め込み
• フィッシングや、ウイルス、トロイの木馬、その他のマルウェアのインストールといった悪意のある動作を伴うページの作成
• リッチ スニペット マークアップの悪用
• Google への自動化されたクエリの送信

つまり、検索エンジンを騙すような不正をするな！ということみたいですね。

Googleにインデックスしてもらうための具体的な方法

サイトマップを送信しよう

サイトマップというのは、そのページにどんなページがあるかを記載したものです。
人間がみるためのものではなく検索エンジンが見るためのものです。

ワードプレスであれば、プラグインによって存在するページから自動生成できます。
静的なHTMLサイトでも作成するサービス・アプリを利用すれば生成できます。

作成したサイトマップは「サーチコンソール」から送信してください。

検索結果に必要の無いページはクロールしないように設定する

検索結果に載せる必要の無いページをしっかり省くというのも重要みたいです。
「robots.txt」にクロール除外情報を載せておく必要があるみたいです。

検索エンジンがコンテンツをちゃんと見れるようにする。

これはそんなに気にしたことないですね。
Fetch as Google ツールをつかうことで、検索エンジンにちゃんとページが表示されているか確認できます。
たぶんプログラムで特殊なHTML生成をしていたりすると、適切に認識されてない可能性があるから
気をつけてね、ということを言っているんじゃないかと思っています。

固有の正確なページタイトルを付ける

この辺がSEO対策として言われる部分ですね。
titleタグの中身が検索結果として表示されるので、タイトルづけは超重要です。

• ページのコンテンツについて正確に記述する
• 各ページに固有のタイトルを付ける
• 簡潔でわかりやすいタイトルを使用する

つまり、内容を的確に簡潔にタイトルに反映し、同じタイトルを複数ページで使わないようにするということですね。

「description」メタタグを使用する

• ページの内容を正確に要約する
• ページごとに固有の説明を使用する

見出しタグを使用して重要なテキストを強調する

• 概要を書く場合を想像する
• ページ全体で控えめに見出しを使用する

サイトの階層を整理する

検索エンジンによる URL の使用方法を理解する

すいません><
この記事は編集途中です！