無料で優秀なテーマCacoonをWordPressに適用する
そもそもWordPressとは？
WordPressとは一言にすると「ウェブサイトを作るために様々な機能を提供してくれる開発キット」です。
開発キットとしてのWordPressの機能については、また別の記事で紹介いたします。
テーマとは？
WordPressが開発キットで、テーマは開発キットを使って作る制作物（ウェブサイトそのもの）です。
図にある通り、テーマの中でHTML・CSS・JavaScriptなどのプログラムファイルを作成します。
WordPressやプログラムを深く理解しないとサイトが作れない？
HTML・CSS・JavaScriptなどプログラミングができないとウェブサイトは作れないのでしょうか？
実はそんなことありません。 WordPressのテーマには既に開発されていて無料で公開されているものが多く存在しています。
これれは簡単にダウンロードができて自分のサイトに活用することが可能です。
この記事では無料のテンプレートでも特に優秀なCacoonを使ってサイトにテーマを適用してみます。
Cacoonをダウンロードする
ダウンロードを完了したら次のステップに進みます。
管理画面へログインする
Cacoonテーマをダウンロードしたら次は、WordPressの管理画面へログインを行います。
今回、WordPressのログインは以前、Localで作成したサイトを使ってみましょう。
もしまだサイトを作っていない方は下記のリンクから手元PCでサイトを準備してから続きに進んでください。
WP Adminを押下したら管理画面へのログイン画面に遷移します。
ログインの認証情報には、サイトを立ち上げた時に入力したユーザ名とパスワードを利用します。
// コピーして使ってください
ユーザ名：test
パスワード：test-taro
テーマを適用する
テーマを適用する前に、もう一度、現状のサイトを確認しましょう。
確認をしたら次はテーマを適用してサイトがどのように変わるか確認しましょう。
確認したら次はCacoonをサイトに適用します。
外観>>テーマに移動する
管理画面の左側のメニューで、外観>>テーマに移動します。
新規追加を押下する
テーマの一覧が表示されている画面で、「新規追加」を押下します。
テーマをアップロードする
ダウンロードしたZipファイルを押下する
今すぐインストール
テーマを有効化する
LOCALでPCにWordPressサイトを立ち上げる
はじめに
この記事では、Localを使ってでPC上にWorPressサイトの構築を行う手順を公開します。
Localのインストールがまだお済みで無い方は下記のリンクよりLocalをインストールしてからこの記事を進めてください。
Localを使ってPCにサイトを構築する手順
それでは順を追って構築する手順を画像つきで説明していきます。
サイト作成ボタンを押下する
Create a new siteを選択してContinueを押下する
サイト名を作成する
// コピーして使ってください
hello-wordpress
各種オプションを選択する
| オプション | 値 |
|---|---|
| Type | Custom |
| PHP Version | 7.4.1 |
| Web Server | Apache 2.4.43 |
| Database | MySQL 5.7.28 |
ユーザ名とパスワーを決める
// コピーして使ってください
ユーザ名：test
パスワード：test-taro
ここまで完了するとしばらくしたらサイトが完成します。
サイトが完成したか確認する
VUCAワールド
これから、ビジネスや社会はの先の見通せない時代になる。
激しいIT開発、社会情勢の急変、疫病の流行、消費者トレンドの変化、、
こういう危機感からか今更ながら無理矢理、「DX研修」なるものを受講させられたので気になったというか知らなかったワードをメモしておこうと思います。
VUCAワールド
今後は予測可能性の低い、先が見通せないVUCA（ブーカ）と呼ばれる状況になるとのこと。
それぞれのワードが表す意味は下記の通りだ。
- V=Volatility（変動性）
- U=Uncertainity（不確実性）
- C=Complexity（複雑性）
- A=Ambiguity（曖昧性）
変動性（Volatility）
技術革新やデジタルディスラプターの出現により業界のパワーバランスやビジネスが変わるなど、あらゆるものが物凄いスピードで変動する時代。
不確実性（Uncertainity）
インバウンド需要などは国の戦略としても重要なポジションを担っていたはずだ。
しかしながらコロナなどの疫病の流行で一瞬にして状況は一変。
何があるかわからない不確実性が高い時代というのは納得。
複雑性（Complexity）
印象的だったのが、SaaS, IaaS, PaaSなどそもそも意味のわからない言葉を並べられて、その違いがさらにわかった前提で「ビジネスで行かせそうなアイデアはありますか？」と言われているシーン。
ヘルプデスクレベルのIT部署の担当者でも答えられないような質問。
確かに複雑だ。
曖昧性（Ambiguity）
将来の急激な変動や、不測の事態、複雑性が増している状態など様々な条件が重なり合って、曖昧な解釈や確信でビジネスを進めないといけない状態というのはある。
ロシアが急に北海道はロシアのものだと言い始めるように、日本はそもそも中国のものだと言い出しかねない。
そんな意味不明で曖昧な世界観が今の現実。
主観的な意見
人口減少、DX人材不足、景気悪化、若者にお金がないことなど、日本はとっても厳しい環境だと感じている今日この頃、とても納得できるワードというか造語でした。
Google にウェブサイトが表示されない？？
Googleにサイトが検索されない!?
そんな方もいるのではないでしょうか。
Googleも完璧ではないようで、何十億ものページをクロールしているので、見落とすこともあるそうです。
よくある原因が下記のページに記載されていたので確認していきましょう。
Googleにサイトが表示されない5つの原因
- サイトがウェブ上の他のサイトからリンクされていない。
- 新しく立ち上げたばかりのサイトで、Google がまだクロールできていない
- サイトのデザイン上の問題により、Google がコンテンツを実質上クロールできない
- Google がサイトをクロールしようとした際にエラーが発生した。
- Google がサイトを見逃した
サイトがウェブ上の他のサイトからリンクされていない
自分のサイトを他のサイトからリンクしてもらえるかどうかを確認します（ただし、リンクしてもらうためにお金を払わないでください。Google のガイドラインに違反する行為と見なされる可能性があります）。
↑リンクのためにお金を払うというルール違反はあり得ないとして、他のサイトからリンクされているかどうか？という点はとても重要です。
サイト内でも、どこからもリンクのないページを作成してしまった場合は、陸の孤島のようになってしまい、クローラーも巡回できないので、サイトマップを作成したり、Footer等にリンク集を作るなどして孤立したページを作らないように意識しましょう。
↓メルカリのFooterをちょこっと見てみると、ちゃんとリンクされてますね。（そりゃそうだわ。）
新しく立ち上げたばかりのサイトで、Google がまだクロールできていない
Google が新しいサイトや既存のサイトの変更に気付くまでに数週間かかる場合があります。
これはそもそも見つけてもらえるようになるまで数週間もかかるとちょっと苦しいですよね。
こちらのサイトでも紹介した通り、重要なページについてはインデックス登録依頼を行うなどして対策しましょう。
サイトのデザイン上の問題により、Google がコンテンツを実質上クロールできない
サイトが HTML ではなく、その他の特殊なテクノロジーを使用して構築されている場合、Google がサイトを正しくクロールできない可能性があります。サイトでは、画像や動画だけでなく、必ずテキストも使用してください。
こちら、例えば画像だけでサイトを描写しているなどしている場合、流石にクローラーも解析できないということでしょうか。
HTMLで描写はしているけど、ほとんどimgばかりで表示しているような特殊なサイトの場合かもしれませんが、imgタグばかりのサイトでもalt属性を追加するなどして画像に意味を持たせるなど工夫して「テキスト情報」をクローラーに渡すようにしましょう。
Google がサイトをクロールしようとした際にエラーが発生した。
このエラーが発生する一般的な原因は、サイトにログインページがあるか、なんらかの理由でサイトが Google をブロックしていることです。シークレット ウィンドウでサイトにアクセスできることを確認してください。
こちらも、そもそも、会員制サイトなどはクロールしてもらうことはできません。クロールしてもらいたいサイトは制限をなくしましょう。
Google がサイトを見逃した
Google は何十億ものページをクロールしていますが、小規模なサイトなどはクロールされない場合もあります。少し時間を置いて、他のサイトからリンクされるようにしてみてください。
こちらの対応策としては、やはり有効なリンクをたくさん持っておきサイトに必ず辿りついてもらえるようにしないといけないでしょう。
【WordPress研修（無料公開）SEO編 #002 ~サイトが検索結果に表示されるまで~】
WEBサイトの目的は、ビジネスやブログをお客様に見つけてもらって、そこから実際に店舗に来てもらったり、アフィリエイトブログなら何かに申し込んでもらうことが目的になると思います。
では、最初の「お客様に見つけてもらう」ためには何から始めるべきなのか。
この記事では、その内容について重要な簡単に紹介していきます。
お客様に見つけてもらうためにすること
このページでは、検索エンジンの簡単な説明をした後に、Google Search Consoleを利用してGoogleへインデックス登録を依頼する手法について説明をしています。もしこのあたりの内容を既に知っているよという方はスキップしていただけると幸いです。
検索エンジンに表示されるようになりましょう
そう、お客様にビジネスを見つけてもらうためにはまずは検索エンジンに表示されるようにならなければなりません。
Googleの検索に表示されるまでには下記のようなフローが存在します。
サイトを制作して、Googleにインデックス登録を依頼し、ユーザーに表示されるために、Googleに評価される内容にしなければなりません。
Google検索の仕組みについては下記の公式動画がとてもわかりやすいのでぜひ確認しましょう。
当ブログ内でも内容を簡単にご紹介します。
Google検索の仕組みの理解
仕組みは細かいところまで行くと難しいですが、大まかにいうと公式の動画でも紹介がある通り、下記の3点のみです。
クロール
クローラーという自動プログラムが存在しています。
新しいページや更新されたページを探して、Googleのインデックスというとても大きなリストに登録されるようになりますGoogleインデックスへの登録
1のクローラーによって検出したページの内容を分析して「Google インデックス」に保存します。検索結果を表示
Google で検索するとGoolgeは「質の高いページ」をユーザーに表示しようとします。
さて話を戻しましょう。
「Google検索に表示される」までに最初の段階で特に必要なのは、Google検索の仕組みでも説明した1~2のプロセス（クロール、インデックス登録です）になります。
ではどのようにクローラーに来てもらって、どのようにインデックス登録してもらうか説明します。
インデックス登録依頼
新しいサイトや小規模なサイトはGoogleのクローラーに忘れられてしまったり、回覧してもらえないことがあるようです。
確実に、クローラーにサイトに訪れてもらうためにはGoogle Search Consoleを活用してインデックス登録を依頼することが重要です。
インデックス登録依頼の方法
Google Search Consoleにログインして、サイトがインデックスされているかどうかを確認します。
新しいサイトやページの場合はほぼ確実に登録されていないので、Google Search Consoleからインデックス登録依頼をできるだけするようにしたほうがいいでしょう。
検索ボックスに確認したいURLをコピー・ペーストしてURLがGoogleのインデックスに登録されているか確認します。
登録されていない場合は、写真の通り、「URLがGoogleに登録されていません」のように表示されるので「ページインデックス登録をリクエスト」を押下します。これでインデックス登録を依頼することができます。
登録されている場合は...??
登録されている場合でも、サイトを更新した場合などには再度クローラーに来てもらい、内容を確認してもらう方が良いでしょう。
mjsファイルとは？ -CommonJSとECMAScriptの違いについてメモ-
最近、node.jsのスクレイピングプログラムの開発を行なっていたところ、
xx.mjsという見慣れないファイル形式のファイルを見つけた。
~mjsは知らなかったので、その内容について少し調べていくとECMAScript moduleがどうこうという話みたいなのでこれを機に自分的理解を進めてみようと思い調べてみることに。
ECMAScriptとは?
ECMAScriptはJavaScriptの標準仕様のことでEcma Internationalによって標準が定められている。
EcmaScriptとJavaScriptは一緒ってこと？
→そういうことだった。
そもそもJavaScriptにはバージョンが存在しないということであり、バージョンというよりは、「EcmaScript 2015に準拠したJavaScript」のような感じ。
何年も使ってきて今更知る自分に驚いている。
Ecma Scriptのバージョン
ECMA Scriptは2015年版から「ECMAScript 2015」のように仕様の名称に発行年が付けられるようになったようで、現在は「ECMAScript 2018」が最新になるようだ。
天下のMDN web Docsにバージョン情報はWikipediaを参照するようにと書かれていたので現時点での最新の更新情報については下記のWiki記事を参照されると良いと思われる。
Ecma Intenational（エクマインターナショナル）
Ecma internatinalは情報通信システムの分野における国際的な標準化団体だそうで、1961年にヨーロッパにおける計算機システムを標準化するために設立されたとのこと。現在はスイスのジュネーヴにある。
↓サイト下部にSwitzerlandと書かれてますね
Google Mapで見てみた。
なんか京都っぽい街並みな気がした。
mjsファイルとは？
.mjsファイルとは簡単にいうと、Ecma Scriptに準拠したJavaScriptファイルだよとファイルフォーマットで明示されたもの。
node.jsでデフォルトで採用しているのはCommonJS
commonJSは下記のような構文を利用して書くJavaScript。
node.jsのプロジェクト内でxx.jsという名前のファイルだとcommonJSの構文で書かれたプログラムとnodeは期待して動く。
//index.js const helloWorld = require('./hello-world.js')
や
//hello-world.js module.exports = function helloWorld() { console.log("Hello World"); return; };
確かに、普通にxx.jsのようなファイル形式でnode.jsを書く場合はこのように記載するケースが現状ではほとんどでした。
EcmaScriptをnode.jsで利用する場合
// index.mjs import { helloWorld } from './hello-world.mjs';
や
// hello-world.mjs function helloWorld() { console.log("Hello World"") return; } export { helloWorld };
このようにして利用する。
今思えば、node.jsではこのように書いていなかったが、Angular, Vue、NestJS（そういえばTypeScriptだけどES2015準拠で書いていたな。）などなどではそもそもEcmaで書いていた。
なんかスッキリした。
最後に
EcmaScript等については、ビルドの話や読み込み方の話や、そもそもの背景歴史的な記述をたくさん目にした。
このブログ内では細かい歴史には踏み込まないが、一つ感じたのが、今後はEcmaScript形式でnode.jsも書いていく方が良さそうだということ。
既存の簡単なやつから書き換えていこうと思います。
Nuxt製WEBアプリでFirestoreのServerTimeStampをyyyy年mm月dd日で表示する
その中で、今回、firestoreのserverTimeStampを利用したのですが、そのデータを日付として画面に表示するにはひと工夫必要だったのでその時との対応メモをここに残しておきたいと思います。
システム前提条件
- nuxt v2.15.8
- vue 2.6.14
システムでやること整理
上記のフロントエンドシステム内で、いつ受け付けたものか把握するために、createdDateというドキュメントフィールドを作成し、そのフィールドにはseverTimestamp()で作成したデータを格納することとしました。
↓が部分的ですがFirestoreに登録している部分です。
try { const db = await getFirestore() await addDoc(collection(db, "requests"), { userID: accountId, content: messageText, status: false, createdDate: serverTimestamp() }); } catch(e){ console.log(e) }
登録に成功するとFirebaseの管理コンソール画面では下のようにしっかりと2022年3月3日という風に表示されます
とし、これでviewでも同じように表示できるはず、、っと思っていましたがそれがどうもうまくいかないようでした。
こんな感じ
{{ ticket.createdDate }}
これは何かしらの対応が必要なんだなと悟った瞬間でした。 サクッといかせてほしいのに。。
では、Search Consoleでデータも確認しておきましょう。
ここは全然詳しくないんですが、nanosecondsとseconds があるらしい。
ただ、今回はそこを深ぼる必要はなさそうなので早速対応した方法を共有していきます。
今回はserverTimeStampをフィルターで加工して表示することとしました。
serverTimeStampをフィルターで加工して表示する手順
フィルター用のプラグインを作る
pluginsフォルダにdate-filter.jsを作成します。
※このファイル名はなんでもいいです。
ファイルは下記のようにします。
もしyyyy年mm月dd日のような表示をしたい方はこのままコピーして利用できると思うのでぜひ使ってください。
import Vue from 'vue' const dateFilter = value => { return formatDate(value); }; function formatDate(data) { const date = data.toDate() const year = date.getFullYear(); const month = date.getMonth() + 1; const day = date.getDate(); const formattedDate = `${year}年${month}月${day}日`; return formattedDate; } Vue.filter('date', dateFilter)
プラグインをnuxt.config.jsで読み込む
nuxt.config.jsでdata-filter.jsを読み込みます。
plugins: [ '@plugins/date-filter.js' ],
viewでフィルターとして利用する
ここまで設定すればあとはViewで利用するだけです。
{{ ticket.createdDate | date }}
まとめ
今回はFiretoreに格納したservertimestampの処理方法についてメモしました。これ以外の方法もあると思うので、これ以外に何かいい方法がある方はSNSでも、このブログのコメントでも大丈夫なのでぜひご連絡ください。
