独学でサイト開発を学ぶ前に見てほしい記事（WordPressやプログラミングについて）
インターネット上に自分自身のサイトを作りたいと思う方はたくさんいると思います。
自分のビジネスを持っている人、副業で稼ぎたい、その手段としてサイト開発するスキルを得たいなどたくさん相談を受けます。
ですが、もろもろ話をしてから、最初のサイトを公開するまでがずっと超えられない壁になっている方が多くとてももったいなと感じます。
1度慣れてしまえば、繰り返しサイト開発ができるようになるものですが、そんな上手くいかないものですよね。
社会人になると仕事、家庭を持ったらいろんな用事、何かとスキルを得る時間というのは限られる上に、何かを学ぶときはお金までかかる。
本当に厳しい世の中だぜ。
このブログでは仕事や家庭の調整はできませんが、せめて「サイト開発を無料で学べる」ようにはしてあげたいと考えています。
また個人として、サイト開発の手法を教えてほしいと言われることが多いため、そんな時に、このサイトを見てと案内できるようにしておきたいと考えています。
特にWordPressに関連するコンテンツは下記リンクにまとめているので順を追って見たい方はぜひ下記のリンクより記事を閲覧してください。
この記事では独学でサイト開発を学ぶ前に見てほしい内容を取り上げます。
目的を決める
あなたのサイトの目的はなんですか？
コーポレートページ？
ブログ？
アフィリエイトサイト？
業務システム？
目的はそれぞれだと思いますが、目的に応じて学習する内容が異なります。
サイトを公開するだけならプログラミングスキルは必要ない
サイトを公開する＝プログラミングスキルが必要
↑こういう思考になっていませんか？
実はそんなことはありません。
上の表でも書いていますが、ブログやアフィリエイトサイトを運営するだけならテーマを選んで「っぽん。」で運営することが可能です。
WordPressでサイトを公開する場合は無料で優秀な「テーマ」が存在していて、そのテーマを利用することで高品質なサイトをすぐに公開することができます。
実際、個人で行うブログやアフィリエイトの場合はほとんどの方が無料のテーマで実際に運用しているでしょう。
またアフィリエイトなどで成果を出したい方の場合は、無料のテーマでも少し改良したり、アイコンを作ったり細かいことをしたいこともあると思いまが、そんな場合は、coconalaなどでサクッと外注するのがおすすめです。
この記事では取り上げませんが、別の記事でサイトを構築する手順を案内します。
サイト開発ができるようになるまでのSTEP
ここまで長くなりました、そうもしサイトを自身で開発したいと思っている方でも、ブログやアフィリエイトサイトを運営することが目的の場合は別でとりあげるSEOやコンテンツマーケティングの知識について見てください。
このブログではサイト開発が必要になるレベルの内容について簡単に整理します。
STEP①HTML・CSS
HTML・CSS、どんなサイトでもHTML・CSSの知識がないことには始まらないでしょう。
ですが安心してください。 HTMLやCSSは難易度が低いため割と簡単にできるようになると思います。思い切って始めましょう。
STEP②WordPressの仕組み理解
WordPressは「WordPress」というシステムです。
WordPressには独自のルールが存在しており、そのルールに沿ってサイトを更新する必要があります。
WordPress独自の機能なども多数知る必要があるのでここは順を追って公開していきます。
この仕組みについてはある程度時間をかけて進めることをお勧めします。 仕組みがわかっていると、思うように動かなくなった時に迷う時間が少なくなり、サイト開発がスムーズになるでしょう。
また仕組みの理解を進める時点でローカルPCでWordPressサイトの開発を行えるように環境を用意します。
ローカル環境の準備については別の記事で取り上げます。
STEP③JavaScript（あえてこの順番）
JavaScriptはHTML・CSSを学び、WordPressの仕組みを覚えたタイミングで学習すると良いでしょう。
ただし、Javascriptは苦手でもここはぶっちゃけコピペでも大丈夫。 大体のことはコピペでできるようになります。
難しく考えずに、どんどん前に進んでください。
STEP④ドメイン・サーバの知識
さくら、Lolipop、Xserver、、、よく聞くサーバたちは何が違うのか？
どうやって選ぶ？
どうやって設定する？
この辺りは実際にやって見てからじゃないとわからないことがほとんどでしょう。実際に手を動かせるようなコンテンツを用意するので少々お待ちください。
まとめ
ここまで独学でサイト開発を学ぶ前に見てほしい記事を書かせていただきました。
これからは具体的な内容を書いていくので楽しみにしておいてください。 ではまた。
【WordPress研修（無料公開）SEO編 #001 ~Googleの掲げる10の事実~】
私たちが作成したサイトはGoogleを代表とする検索エンジンに評価をしてもらい、良い評価をもらうことができてはじめて検索ランキングの上位に表示されるようになります。
検索して1ページ目に表示されることはとても難しいことであることはまだサイトを実際に運用をした経験がない方には想像がつかないかもしれません。
WordPress研修SEO編では、あなたのサイトの検索順位を少しでも上げるためにできることをひとつづつ紹介していきます。
それでは早速内容に入っていきましょう。
SEOとは?
SEOとはSearch Engine Optimizationの頭文字をとった文字で一般的には大きく2つの活動を指すと合田は考えています。
これらの2つの活動に関連した様々な改善策があるため、1度には説明できませんが、SEO編で少しづ紹介していきたいと思います。
本記事ではそもそもSEOの大前提となる知識について紹介させていただきます。
検索順位を上げる＝ Googleに評価してもらえるサイトにする
検索順位を上げたい場合、現時点では実質的にGoogleに評価したもらえるサイトにしなければいけません。
え？でもYahooとGoogleは違うんじゃ、、？
Yahooで検索する方はYahooに評価してもらえるサイトにしないといけないのでは？
このような疑問が浮かぶ方がいると思います。
実は、Yahooも2010年からGoogleの検索技術を活用しており、検索評価を上げたい場合はGoogleに評価してもらえるサイトにしないといけません。
Microdoft Edgeから提供されるBingという検索エンジンもありますが、こちらはSEO対策を実施する上で優先度はあまり高くないので現状でしょう。
BingはWindowsで提供されるEdgeブラウザなどの初期ブラウザで、現状ではWindowsPCからしか利用されていない状況です。
MacPCの増加（Safariも初期ブラウザはGoogle）やスマートフォンによるアクセス（Safari or Google）が主な現状では優先度がとても低いでしょう。
またWindowsの規定のブラウザは初期設定こそEdgeとなっていますが、下記のリンクに沿って設定を行えばGoogleへ変更することができます。
かなりの方がGoogleに変更している状況でしょう。
さて、話を戻します。
どうすればGoogleに評価してもらえるサイトになるのか？
具体的ではないかもしれませんがGoogleは評価するサイトの基準を公開しています。
それがGoogleの掲げる10の事実です。
それでは早速中身を見ていきます。
Googleの掲げる10の事実
Googleは下記の10点を事実を公開しています。
まずはその10項目を下記に抜粋します。
- ユーザーに焦点を絞れば、他のものはみな後からついてくる
- 1 つのことをとことん極めてうまくやるのが一番
- 遅いより速いほうがいい
- ウェブ上の民主主義は機能する
- 情報を探したくなるのはパソコンの前にいるときだけではない
- 悪事を働かなくてもお金は稼げる
- 世の中にはまだまだ情報があふれている
- 情報のニーズはすべての国境を越える
- スーツがなくても真剣に仕事はできる
- 「すばらしい」では足りない
この中からSEOを実施するサイト運営者が特に意識すべき3つの点について取り上げます。
①遅いより速いほうがいい。
同じページで同じ内容を提供してくれているサイトがあったとしたら、さくさく動いてくれる速いページと遅いページのどちらを見ますか？
おそらく特殊な環境にいる方を除けば100％速いページを見ると思います。
であれば、早いページにした方がいいよね。というのがGoogleの主張です。
②ウェブ上の民主主義は機能する
サイトコンテンツが重要かどうかを判断する上でページ間のリンクが重要と明確に伝えています。
ページ間のリンクを「投票」と解釈し、どのサイトが他のページから最高の情報源として投票されているかを分析します
③情報を探したくなるのはパソコンの前にいるときだけではない。
検索はパソコン上だけでなくスマートフォンからももちろんあります。
いつでも、どこでもユーザニーズに応えらえることが重要と理解できるでしょう。
拡大解釈かもしれませんが、スマートフォンで見やすい記事、スマートフォンのネットワークが悪くても見れてしまうようなサクサクしたサイトに仕上げていくことが重要だと理解することができます。
3つの重要点のまとめ
簡単にまとめると、
- 速いサイトにしよう
- リンクをもらおう
- スマートフォン対応しよう
になります。
Googleではサイト運営者に向けてこれらの項目に対応するための無料ツールをいくつも提供してくれています。
WordPress講座SEO編では、これらのツールについても紹介していきますのでご安心ください。
※↑経験上、開発できることよりもビジネスを育てる上ではこれらのツールの理解の方が重要だったりします。開発ができなくてもまずはSEO編の内容をマスターするのも全然ありだと思います。
まとめ
ここまでいかがだったでしょうか。 サイトは開発するだけでなく、見てもらってこそ意味があります！
見てもらえるサイトにするためにはこの講座の内容は必須となると思いますので、ぜひ継続して見てくださいね。
【ソースコード共有】LINEとLINEWORKS間でメッセージをやりとりする
WEBサイトの問い合わせフォームの入力は面倒だけど、LINEなら気軽にメッセージができるという人は世の中に結構いると思います。
特にWEBの問い合わせフォームはメールアドレス・電話番号等を入力して、そのどちらかの連絡になることが多いのでどっちも嫌だなと感じる方も多いでしょう。
私の勤め先でもそんなケースが散見されるため、この度、LINEBOTで受けつけたメッセージを社内のLINEWORKSの（個人orグループ）に転送する、またLINEWORKSからlINEBOTを通じてお客様へメッセージを送信するBOTを用意しました。
特に問題はないので、こちらのブログでソースコードを共有させていただきます。
LINEWORKSの活用の企業の皆様ぜひ改良してご利用ください。
ソース
下記、GitHubで公開しているので利用してみてください。
開発環境
- node.js
- Heroku
LINEBOTの開発手法について
詳しい開発の手順については別のブログ記事で公開したいと思うのでまたみていただけると幸いです。
WordPress開発環境の構築 ~Localのインストール~
WordPressの研修を始める前に
Visual Studio Code（VSコード）のインストール
Visual Studio Codeは略して「VSコード」と呼ばれることが多いです。
VSコードは、WordPressを構築する上で、必要なファイルを編集するためのエディタです。
エディタとは、プログラムファイルを編集するためのツールのことです。
この講習ではHTML、CSS、JavascriptやPHPファイルをVSコードを使って編集します。
VSコードは下記リンク先でダウンロードできるのダウンロードしましょう。 azure.microsoft.com
VSコードの拡張機能の追加
編集中
Localのインストール
インストール時のスクリーンショット①
インストール時のスクリーンショット②
インストール完了時
利用規約にチェックを入れて同意する
利用規約に同意するとWELCOME画面が表示される
Localのアカウントを作成するかどうか確認がありますが特に必要ないと思います。
ローカルのインストールはここまでです。 Localを使ってPCにWordPressサイトを完成させる場合は下記のリンクを参考にしてサイトを構築してくださいね。
今回はここまでです。
【WordPress】Contact Form7にAkismetを設定する
今回は、前回のブログの続きです。
前回は、サイトにAkismetを有効化するところまでを実施しましたが、今回はさらに実際にコンタクトフォームにAkismetを設定する方法を共有します。
Akismetの設定ができる項目
AkismetはContact Formでも、テキスト、メールアドレス、URLの3つのフォームに適用することができます。
では、詳しくみていきます。
項目への設定の実演
テキスト項目でも特に問い合わせ者の名前を入力してもらうフィールドに設定します。
テキストフォームの生成を行う際に、「送信者の名前の入力を要求する項目」にチェックを入れます。
ここにチェックを入れると生成されるタグの中にakismet:authorという項目が追加されます。
基本的にはこれで完了です。
今回は、メールアドレスの入力フォームの設定についてもみていきましょう。
基本的にはテキストフォームと同様の設定方法になります。
下図の赤枠「送信者のメールアドレスの入力を要求する項目」にチェックを入れると、生成されるタグの中にakismet:author_emaiが追記されます。
ここまでできたらあとはタグを挿入すれば設定は完了です。
すでにフォームを設定していて後付けする場合はどうする？
すでに生成したタグの最後尾にそれぞれ、akismetで生成されたタグの記述を追加すればakismetの導入が可能です。
今回はここまでです。
さらなるセキュリティの設定については次の投稿で紹介いたします。
【WordPress】Contact Form7にAkismet（アンチスパム）の有効化
このページを見ている方はすでに、ご存知かもしれませんが何のセキュリティ設定もないまま、ContactForm7を運用するとかなりの数の迷惑メールやスパムのような問い合わせが入ることはご存知だと思います。
今回はサイトに設置したContact Form7に最低限しておきたい設定の一つであるAkismet AntiSpamの設定方法を共有していきます。
Akismetについては日本語の説明サイトで簡単に概要が紹介されているので引用させていただきます。
Akismet はサイトのコメントをチェックし、フォーム送信内容をスパムのグローバルデータベースと照合して、悪意あるコンテンツの公開を防ぎます。ブログの「コメント」管理画面でキャッチしたコメントスパムを確認できます。
https://ja.wordpress.org/plugins/akismet/
Akismetの使用感
Akismet AntiSpamを利用することで100%ではないものの、体感で半分くらい迷惑な問い合わせが減るくらい効果があります。
100%に近づけるには、Akismetの設定を行った後に、下記のリンクからreCAPTCHAの設定をしてみてください。
では引き続きAkismetの設定方法についてみていきましょう。
Akismet Anti-Spam (アンチスパム)の設定方法をみていきましょう。
まずはインストール
まずはAkismetをインストールしていきましょう。
Akismetがインストールできたら有効化しておきます。
有効化ボタンを押下すると管理ページ内で下図のようなページに遷移します。
遷移したら、「Akismetアカウントを設定」を押下してください。
Akismetアカウントを設定を押下するとブラウザの別タブでアカウント設定ページに遷移するので、ここでは画面一番左の「 Get Personal」を押下しましょう。
Get Personalボタンを押下すると、アカウント設定のパラメータを入力する欄に入ってきます。
ここでは、まず画面右手の価格のスライダーを選択して年額利用料の設定を4500円→0円に設定しましょう。
年額の利用料の設定を0円にすると少し画面左手の画面が変化します。
ここでは、下図の通り入力とチェックボックにチェックを入れて、「CONTINUE WITH PERSONAL SUBSCRIPTION」を押下するまで進めてください。
ここまで設定を進めると、次は先ほどの入力画面で入力したメールアドレスに確認コードが届きます。
確認レコードをメールで受け取ったら設定サイトにコードを入力しましょう。
ここまできたらAkismetアカウント設定は完了です。
正しい確認コードの入力が完了したら下図のような画面になります。
ここまできたら次にAPIキーの設定に進みます。
APIキーは先ほどの確認コードを入力するところまで完了したら、入力したメールアドレスに届いています。これは後ほど利用するのでコピーしておきます。
届いたAPIキーをコピーしたら次はWordPressの設定画面に戻ります。
サイトに戻ったら、「手動でAPIキーを入力」というボタンがあるので押下します。
押下すると先ほどコピーしたAPIキーを入力する画面が現れるのでペーストして「APIキーを使って接続する」を押下しましょう。
APIキーを利用して接続までが完了したら、下図のような画面に遷移します。
ここまで来ればアカウント設定と、サイトへのAkismet有効化が完了します。
今回はここまでです。
次回の投稿では、Contact Form7にAkismetの導入をします。
【WordPress】Contact Form7の迷惑メールを減らすための追加対応〜Contact Form 7 Captchaの設定~
- Contact Form 7 Captchaのインストール
- Contact Form 7 Captchaの設定
- サイトキー・シークレットの発行の完了そして設定へ
- Contact Form7への設定
- 【Special Thanks】塩田恭平様
今回は皆様がよく利用しているであろうContact Form7での追加セキュリティ設定について説明します。
皆様もご存じの通りAkismet AntiSpamの設定だけでは海外からの不正な問い合わせを防ぐことができません。
このような不正な問い合わせを防ぐためには、Akismet AntiSpamに加えてContact Form 7 Captchaの設定も追加で行うのをおすすめします。
Akismet AntiSpamに加えてContact Form7 Captchaの設定を行うと、執筆時点ではほとんど不正なアクセスを防ぐことができているサイトが多いです。
現時点では簡単に誰でもできる対応の1つでしょう。
それでは早速設定方法について共有していきます。
Contact Form 7 Captchaのインストール
まずはプラグインからこちらをダウンロードしましょう。
Contact Form 7 Captchaの設定
プラグインをインストールしたら、プラグインの一覧からインストールしたプラグインの「settings」を押下してください。
settingsを押下するとSite KeyとSecret Keyを入力する画面が現れます。
これらの情報を新たに設定するために、赤枠で囲っているhereを押下してください。
hereを押下するとGoogle reCAPTHAのサイトに遷移します。
このページでは赤枠で囲っているサイトの右上のプラスボタンを押下しましょう。
プラスボタンを押下するとGoogle reCAPTHAの情報登録を行うページに遷移します。
セッティングの内容について①~④まで順番に見ていきます。
①：ラベルの設定
①は複数のサイトにreCAPTHAを設定する場合にそれぞれを識別するためのラベルなのでサイトキーやシークレットには直接的に関係ありません。ですがこちらの項目にはサイトドメインを設定するのをお勧めします
②：認証種類の選択の設定
こちらはreCAPTHA v2を設定しましょう。
③サイトドメインの設定
こちらには適用したいサイトのドメインを設定しましょう。
例えばこのサイトの場合は、「money-junior-high.com」になります。
https://などは入力不要です。
④：利用条件への同意
最後に利用条件に同意しましょう。
ここまで来たら、「送信」ボタンを押下してください。
サイトキー・シークレットの発行の完了そして設定へ
送信ボタンの押下まで完了すると下図の通り、サイトキーとシークレットキーの発行が完了します。
発行されたサイトキー・シークレットキーをプラグインの設定画面に戻って貼り付けて、Save Settingsを押下しください。
ここまでで認証を利用する準備が整いました。
次は実際にコンタクトフォームに設定したフォームを設定していきます。
Contact Form7への設定
こちらが最後の設定になります。
問い合わせフォームの任意の場所に[cf7sr-simple-recaptcha]を貼り付けます。
こちらを貼り付ければこのセクションの作業は完了です。
貼り付けて保存したら実際にサイトに反映されているか確認してみます。
ここまで設定して保存すると問い合わせフォームにreCAPTHAが表示されるようになります。
【Special Thanks】塩田恭平様
本記事の解説は塩田恭平様に協力いただきました。
塩田様は、香川県でフィットネスインストラクターとして大活躍されている方です。
オンライン・オフラインの両方でエアロビクスダンス、ズンバ、ボクササイズなど多様なイベント・レッスンを実施されておりますのでご興味がある方はぜひレッスンに申し込んでみたください。
Goのインストール
これは自分用のメモです。 Goこれまで触ったことなく初めてなので、最初の対応をメモしております。 内容はあまり把握していない。
Goのダウンロード
インストール確認
あれ、入ってない。。
ターミナルを一度ダウンして、再度起動させたら入っていた。 なんだろう。。
GoのExtensionのインストール
Extensionをさらにインストール
コマンドパレットを起動（cmd + shift + p）
> GO:install
と入力したら、GO:install/updates
GO:install/updatesを選択して全ての選択肢にチェックを入れて右上のOKボタンを押す。
ターミナルでツールのインストールがはじまるのでインストールが終わるまで待つ。
Hello World!
GoでHello Worldしてみる。
package main import "fmt" func main() { fmt.Println("Hello World!") }
go run main.go
ここまで
