ごちゃごちゃなpostgre周りの入門を概解説する[PostgreSQL]

heroku(察し)

postgreSQLを覚えたんですが、始めた時かなり混乱したので、postgre周りのツール等々、いじれるようになるまでの概要を説明します。

PostgreSQLのインストール

公式サイトから。2020/12/8現在のwindows用インストーラ名は「postgresql-13.1-1-windows-x64.exe」こんな。

インストール自体は単純で、設問にハイハイ答えればいいだけなのだが、終わった後に追加ツールをインストールしますか?などと聞かれる。

どこの記事でも「【今回は】ツールは使わない」などというものだから、実際「使うのか使わんのかどっちじゃい!」となったが、結論から言って必要なかった。少なくともビギナーには必要ない。また、後からツールインストーラだけの起動も出来るっぽいので、特に躊躇う必要もなく閉じてしまって良さそう。

環境変数「PATH」の編集

これはそこらの記事に書いてある。ちゃんと自分のpcのディレクトリ構造で考えて書けば大丈夫。

コマンドラインから

ここが既に分かりにくかったが、「postgreSQL」というのと、「psql」というのがある。どちらもコマンドラインから操作できてしまうので、摩訶不思議。

「psql」というのが「postgreSQLを扱える対話型ターミナル」というもの。postgresqlを簡易に扱える。基本はこれで良さそう。

psqlでログイン

分かり肉第x弾。

インストールの時はパスワード設定しかしなかった癖に、psqlを扱おうとすると、ユーザー名を聞いてくる。「登録しろってことか?」と思い、適当な名前を入れるとエラーを吐く。

psql -U lhaidera

↑エラー

実はpostgresql君。最初からスーパーアカウントなるものがあり、基本それで操作する模様。ユーザー名は「postgres」

psql -U postgres

「U」が大文字でないと効かないので注意。やるとパスワードを聞かれるのでインストール時に設定したものを入れる。黒丸すら表示されないが、ちゃんと入力されているので安心して。

ちなみに実行時のディレクトリ位置はどこでもOK。PCのプログラムファイルに突っ込まれてるので、データベース作成時も作られるところは決まってるらしい。もちろん変えれるっぽいが。

psqlログイン後

ログイン後は、コマンドライン行頭(自動表示)の部分が

C:\Users\desktop>

とかから

/*テーブル名*/=#

に変わっている。テーブル名はおそらく最初は「postgres」になっている。

実践

やり方さえ覚えれば、psqlを用いてpostgreを動かすのは意外に簡単だったりする。

しかし、この「やり方」を粗雑に扱ったり、変に飛ばしている記事も多いので手こずった。自分の為に基本コマンドは頭に入れておこうと思う。

基本として、SQL構文以外は「;」セミコロンは必要ない。「¥?」など、二文字で終わるような円マーク始まりの物も、怪しいが動くので安心。

ログイン

psql -U postgres

ヘルプ(コマンド一覧)

\? でpsqlコマンドのヘルプ。 \h でSQLコマンドヘルプ。

現在のデータベース一覧を表示。

\l

現在のデータベースのテーブル一覧を表示。

\dt

CREATE:テーブル作成例(SQL)

create table mytable(
 id integer,
 name varchar(10)
);

SQL文は「;」セミコロン付けないと実行されないので注意。逆にSQL文が長すぎて集中力持たない場合はわざと「;」付けないことで改行して見やすく出来る。

INSERT:挿入例(SQL)

insert into mytable values (1,'taro'),(2,'hiiro');

SELECT:テーブル選択情報取得(SQL)

select * from mytable;

其の他

SQLの本でも買おうね。

[JS&CSS]一定文字数以上のテキストのみスクロール

こんにちはらいどらです。

今回は別プロジェクトという別世界線の問題…..まあ関係ないやろ。

普通にどのサービスでもある、「例ボックス内にあるテキストが入りきらなかった場合に自動スクロールする」…..というやつをJSでやろう。

……やれ

という訳で始めていきます。

スクロール(CSS)

まずは基本的なスクロールの方法から。

こちらは例によってgの検索上位が分かりやすいので、貼り付けでOK。やっぱりCSSアニメーションでやるみたいですね。らくらく。

文字スクロールのCSS

アニメーションはテキスト入ってるボックス(div)にかけると動かなかったので、<div>の中に<span>を作っといた方が良いかもです。

なになにのもの
これこれのもの
それぞれのもの
ころころなもの

HTML

<div class="scrollbox">
  <span class="scrolltype">なになにのもの</span>
</div>
<div class="scrollbox">
  <span class="scrolltype">これこれのもの</span>
</div>
<div class="scrollbox">
  <span class="scrolltype">それぞれのもの</span>
</div>
<div class="scrollbox">
  <span class="scrolltype">ころころなもの</span>
</div>

CSS

.scrollbox{
    width: 200px;
    height: 50px;
    padding: 10px 30px; 
    border: solid 1px gray;
    white-space: nowrap;
    overflow: hidden;
}

.scrollbox span.scrolltype{
    display: inline-block;
    animation: wordscroll 3s infinite linear;
    animation-delay: 2s;
}
@keyframes wordscroll {
    0%{transform: translateX(0);}
    15%{transform: translateX(0);}
    100%{transform: translateX(-110%);}
}

動き変えたければ@keyframesいじるだけですね。

ただ、このままだと長い文だけでなく短い文も全て動いてしまいます。雲か。静的ならどうにでもなりますが。

今回はこれをJavaScriptを使って何とかしていきます。

長い文だけ(JavaScript)

JS

let scro = document.getElementsByClassName("scrollbox");
for(let i=0;i<scro.length;i++){
    let scrotext = scro[i].getElementsByTagName("span");
    if(scrotext[0].innerText.length>6){
        scrotext[0].classList.add("scrolltype");
        console.log("scrolladd!!");
    }else{
        console.log("Noif!!");
    }
}

時折動作確認にconsole.logが混ざっておりますが、いらないので取って大丈夫です。

長い文だけ<span>にscrolltypeクラスを付けるようにしました。[0]とか[i]があるのはHTMLCollectionの調整ですね。詳細は前記事へ

今回の肝は取得した<span>タグをlengthで文字数取得することでした。これでだいぶエラー出て悩みましたが、innerTextにしてからやったらundefinedが消えました。Nandefind。

以上

[WordPress]前後投稿へのリンクを実装する方法を解説[サムネイル出力あり]

こんにちは、らいどらです。

記事でたまに見る[前後投稿へのリンク]。当サイトにも実装したくなったので、解説しながら設置していこうと思います。

出力してえええええええ

なお、真偽は定かではありませんが、この[前後投稿へのリンク]は特にSEO面では有利取ることは無いと言われています。

まあ、回遊性は高まるかもしれませんが、記事の内容に沿ったテーマを見に来たユーザーが同じサイトであるというだけで関係のない記事に手を伸ばすのは珍しいですからね。

妥当と言えるでしょう。

前後投稿を出力するタグ

さて、解説していきます。

前後投稿はいつもおなじみのテンプレートタグを使うことで簡単に出力することが出来ます。

投稿タイトルとリンクだけの出力ならば、以下のコードだけでOKです。

<?php previous_post_link(); ?>
<?php next_post_link(); ?>
↑リンクと文字だけ出力できた。

単純にリンクを設置するだけならこれでOKですね。

サムネイルも出力したい場合

文が簡単すぎるし薄々感づいてはいましたが、 先述した方法ではサムネイル の出力まではしてくれないようです。

前後投稿リンクにサムネイルを出力するためには、もうひと手間必要なようです。

詳しくは以下の記事が参考になりました。

外部記事サムネ

WordPressで前後の投稿のサムネイル取得方法とコードサンプル

参照記事

サムネイル出力したい場合は以下のコードを参照してください。

※当サイトのコードを引用している為、スタイリング等の理由から一部コードが乱れてますが、ご了承ください。

<div class="beforenext-link-area clearfix">
 <div class="beforelink clearfix"><span class="maenokiji"><前の記事</span>
   <?php
       $bp = get_previous_post();
        if (!empty( $bp )): 
	   $b_thum = get_the_post_thumbnail($bp->ID, array(100,100) );
   ?>
    <div class="beforediv">
     <div class="b-thum">
	   <?php if($b_thum){ echo $b_thum; } ?>
     </div>
     <div class="b-ancr">
	  <a href="<?php echo get_permalink( $bp->ID ); ?>">
         <?php echo $bp->post_title; ?></a>
     </div>
    </div>
          
          <?php endif; ?>
        </div>
        
        <div class="nextlink clearfix"><span class="tuginokiji">次の記事></span>
          <?php
            $np = get_next_post();
              if (!empty( $np )): 
	        $n_thum = get_the_post_thumbnail($np->ID, array(100,100) );
          ?>
  		
           <div class="nextdiv">
	   <div class="n-ancr">
	    <a href="<?php echo get_permalink( $np->ID ); ?>">
                <?php echo $np->post_title; ?></a>
	   </div>
             <div class="n-thum">
	  	<?php if($n_thum){ echo $n_thum; } ?>
	   </div>
           </div>
		
          <?php endif; ?>
        
  </div>
</div>

リンクだけの時よりずいぶん長くなってしまいましたね……。

コードの内容としては、投稿の情報を引き出してから、各情報(タイトルやサムネなど)を出力するという内容になっているため、仕方ないのかもしれませんが……。

画像も出てきた!

とは言っても、上記のコードは”前後”の投稿リンク出力なので、例として”次投稿リンクのみ”の出力にすると以下のコードになります。

<div class="nextlink clearfix"><span class="tuginokiji">次の記事></span>
          <?php
            $np = get_next_post();
              if (!empty( $np )): 
	        $n_thum = get_the_post_thumbnail($np->ID, array(100,100) );
          ?>
  		
           <div class="nextdiv">
	   <div class="n-ancr">
	    <a href="<?php echo get_permalink( $np->ID ); ?>">
                <?php echo $np->post_title; ?></a>
	   </div>
             <div class="n-thum">
	  	<?php if($n_thum){ echo $n_thum; } ?>
	   </div>
           </div>
		
          <?php endif; ?>
</div>

内容を軽く解説すると、まずget_next_post();で次投稿の情報を取得し、変数npに入力。

その後、各所でnpを引用しながらget_the_post_thumbnailでサムネイルを取得、配列arrayでサイズを調整。その後のecho $n_thum;でサムネイルを出力(変数n_thumにはサムネイルの情報を入力してあるため)

さらにecho get_permalinkでリンクを取得して<a>タグで囲むことによってそのまま出力。

最後にecho $np->post_title;でタイトルを出力していますね。

順を変えたい場合は十分配慮しながら各<div>要素を切り取っていけば大丈夫です。(たぶん)

後は、お好きなようにCSSでスタイリングを整えてください。

良い感じになった!

これで完成!!

それでは!!

[WordPress]独自テーマにコメント欄を表示させる方法[初心者向け]

こんにちは、らいどらです。

さあ、いよいよ我がサイトにもコメ欄を表示させる時が来た……..!

ということでさっそく調べてやっていきます。今回は (https://webdesign.practice.jp/wordpress-theme16-comments-php )様と( https://fantastech.net/wordpress-comment-form-cookie-checkbox#outline-2 )様の記事を参考にさせていただきました。

必要なファイル

今回は、個別投稿へのコメント受付なので[single.php]に追記をしていきます。ですが、実際のところ[single.php]への追記はテンプレートタグだけで済ませ、細かい機能などは別途の[comments.php]に記載する場合が多いようなので、私もそちらの方法でやっていきます。

[single.php]への追記はコメントを表示させたい位置に以下のコードをコピペでOK。もちろんdiv要素のclassも変えても構いません。

<div class="comment-fill">
      <?php comments_template(); ?>
</div>

さて、本題の[comments.php]ですが実例を表すとこのサイトのやつがこんな感じ↓

<div id="comment_area">
<?php $args = array(
    'title_reply' => 'コメント',
    'label_submit' => 'コメントを送信する',
    'comment_notes_before' => '<p class="commentNotesBefore"></p>',
    'comment_notes_after'  => '<p class="commentNotesAfter">内容をご確認の上、送信してください。</p>',
    'fields' => array(
            'author' => '<p class="comment-form-author">' .
                        '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' placeholder="ニックネームを入力..." /></p>',
            
            'url'    => '',
            ),
    'comment_field' => '<p class="comment-form-comment">' . '<textarea id="comment" name="comment" cols="50" rows="6"  placeholder="コメントを入力..." /></textarea></p>',
    );
comment_form( $args ); ?>
  
  <?php if(have_comments()): ?>

<ol class="commets-list">
<?php wp_list_comments('avatar_size=48'); ?>
</ol>
<?php endif; ?>
  
</div>

…….申し訳ないです。ほとんど (https://webdesign.practice.jp/wordpress-theme16-comments-php ) 様のコピペでございます。とはいえ、必要な部分はちゃんと変えたから許してくれ…….。

でも、コピペでもなんとかなる理由はちゃんとあります。それはWordPressが勝手に手伝ってくれるということです。

例をあげると、下の画像の赤い下線でチェックボックスがある文。これはcookieを使用する機能ですから、初心者だとちょっと厳しいものがありますが、この文はWordPressが出力させている文になります。

コメント欄に表示されるcookie関係の文

なお、私がCSSでいじったのは送信ボタンだけですので、デフォルトでこれだけの整ったコメントスペースが出てくることにもなります。

要するに、「コメント欄、意外と簡単に表示できますよ?」ってことです。……上から目線ですいません、はい。

コメントスペースの改造

ここからは、コードと実際に出力されたエリアを見比べながら、対応する箇所を軽く解説していこうと思います。

初心者だから憶測なのは許して…….

ソースコード解説用出力側

はい、番号ごとに分けてみました。これをコードファイルの各行に当てはめると…..。

ソースコード解説用コード側

このようになります。⑤は先ほど言ったようにWordPress側の出力なので書いてありません。

構造としては、コメント欄を構成する要素を配列arrayでリストデータ的な感じにしているやつですね。ちなみに改造前はいろんなところに挟んであった[$aria_req]は、その情報を必須入力にするかどうかの関数みたいな感じらしいです。

配列途中にある[url=> ~]の一文ですが、もともとのWordPressでのデフォルトのコメント欄の必須情報は[名前][email][URL]の三つのところを、URLパラメータに何も入力せず[返す(return)]ことによって無効化している….らしいです。

ん?そうなると俺もemailパラメータには空白を入力して返してやることが正解だったのだろうか……。まあいいか。

email入力を不要にする

このサイトの場合はemail入力は不要にしました。

手法として、配列の中にemailパラメータを含めないのに加えて少しやることがあったので追記します。

やることとは、ずばりWordPressの設定です!

なんだよWordPress内の設定で出来ちゃうのかよ…..って思った半日だった。

email入力の必須は設定で決められる

赤下線の文のチェックボックスを外せばOKです。

まとめ

以上、簡素ではありますが我がブログに念願のコメ欄を設置することに成功しました…….!やったー!(スパムは来るなよ……)

意外とデフォルトでもそれなりの形を成してくれるので、ぜひ皆さんもやってみてください!

それでは!

CSSで変更できるマウスカーソル絵一覧

こんにちは、らいどらです。

先日サイトを回覧している時、マウスカーソルの形が思うように変わっていないのに気づきました。あの大文字のI型の奴です。

調べてみると、きちんとCSSで指定しないとだめだということが分かりました。自動でやってくれるわけでは無かったのですね……。

という訳で、今回はCSSで変更可能なマウスカーソルの種類を調べて一覧化してみました。

ではやっていきます!!

cursorプロパティ

カーソルの形を変えるには、CSSの[cursor]プロパティを使います。その後ろに指定する値によって、カーソルの形が変わります。以下が一覧です。

cursorに与える値

alias

all-scroll

alias

allscroll

auto

cell

col-resize

context-menu

copy

crosshair

default

e-resize

ew-resize

grab

grabbing

help

inhirit

initial

move

n-resize

ne-resize

nesw-resize

no-drop

none

not-arrowed

ns-resize

nw-resize

nwse-resize

pointer

progress

row-resize

s-resize

se-resize

sw-resize

text

unset

vertical-text

w-resize

wait

zoom-in

zoom-out

-webkit-grab

-webkit-grabbing

-webkit-zoom-in

-webkit-zoom-out

※調査にはchromeの検証機能を用いました。これで全てという保証はありませんのでご理解ください。

はい!今回調べる限りでは以上です!

見ると、ああ、これ!ってなる奴がいくつもあって楽しかったです(笑)

私の場合はソースコードエリアにカーソルが入った時にI型にしたいだけだったのですが、かなりの量を調べてしまいました…….。

特にロード中を示す青いクルクル。あれが指定できるとは……。サイト全体に指定しておけば、見る人を常にイラつかせるサイトの完成ですね(鬼)。まあそんな酷いことしないですが(笑)

皆さんもサイト制作の際には、用途に応じて正しいカーソルを指定できるようになっておきましょう!

それでは!

XML-Sitemapでサーチコンソールのnoindexエラーが出た時の対処法

そう、その事件は唐突に起きた………!

いつものように、何気なくGoogle Search consoleレポートを覗いてみると、なんとそこには禁断の3文字…………..

「エラー」がっ!!!!

カバレッジに出たエラー
エラーだと!?

なんということだ……..やっと安定してきたのに!と、理由を見てみると

「送信されたURLにnoindexタグが追加されています。」と出ています。

noindexタグが問題らしい

※noindex………….SEOを勉強した人ならご存じかもしれませんが、値:noindexはmetaタグで使用され、そのページの内容がGoogleにindexして欲しくない物な時にheadエリアに記述するものです。(具体例:アーカイブページなど)

調べてみると、少し前にXML-Sitemapプラグインで作ったサイトマップが問題だったみたいです。

つまりはindexされなければならないはずのサイトマップにnoindexタグが追加されているので情報収集が困難になっているということでしょうか。早めに直した方がよさそうです。

原因としては、XML-Sitemapの設定で「HTML形式でのサイトマップを含める」にチェックが入っていたのがダメだったようです。いじったつもりは無いので、デフォルトでチェックが入るのかもしれません。

チェックを外す

これで後は、Search Consoleの画面から修正完了/再検証の依頼を出せばOKですね。

数日は掛かるのでそっとしておきましょう。だがブログの更新は忘れるな。

9/11 追記:検証合格です!

検証合格通知が来た
検証合格!だけどそのまま赤いのはちょっと心配になる…….。

参考記事 → https://www.blogging-life.com/how-to-fix-submitted-url-marked-noindex/