投稿者: sunasuna

【WordPress】管理バーが表示されなくなったときの対処法
皆さん、こんにちは。

すなです。

先日サイト制作でWordPressを扱っていた時に、管理バーが表示されなくなった事件が発生したので、そのときに対処法をまとめました。

次のいずれかのステップを踏めば、僕と同様の状態になってしまった方も管理バーを元の状態に戻せると思います。

管理バーとは

まずは「管理バー」が何かって話なんですけど、これはWordPressのページ上部に固定されているメニューバーです。

使っているプラグインによるのですが、基本的には投稿を編集するボタンやサイトから管理画面に移動するボタンなどがあります。

これはWordPressにログインした人にしか見えないので、管理バーは普通のサイト閲覧者には見えることも操作されることもありません。

WordPressのユーザーとして僕がこの管理バーを使うときの99%がサイトと管理画面を行き来するのに使っています（逆にそれ以外ではほぼ使っていません）。

余談なんですけど、この「管理バー」という名称は昔の呼び方で、現在は正式には「ツールバー」と呼ぶらしいです。

では実際に戻す方法をご紹介いたします。

ログイン・ログアウトを試す

基本中の基本です。

今までは通常に表示されていたのに急に表示されなくなった場合は、まずは落ち着いてログイン・ログアウトを行いましょう。

だいたいの場合はこれのゴリ押しでなんとかなります。

キャッシュをクリアする

ログイン・ログアウトがダメだった場合は、次はキャッシュをクリアしてみましょう。

キャッシュを簡単に説明すると、ブラウザにある「Webページの情報を一時的に記憶する機能」です。

何らかの理由で管理バーが表示されない、誤った情報がキャッシュに保存されている可能性があります。

それを一旦クリアすることで、次の読み込みでWebページを正常に読み込みなおします。

ちなみにキャッシュを消す方法は以下の通りです。
- Google Chromeの場合
  1. Fn+12で「検証ツール」を開く
  2. ブラウザの左上のリロードボタンを長押しする（または右クリックする）
  3. 選択肢の中から1番下の「キャッシュの削除とハード再読み込み」をクリックする
- Safariの場合
  1. Safariのメニューバーより「環境設定」を開く
  2. 「一般」タブの1番下の「メニューバーに”開発”メニューを表示」にチェックします
  3. メニューバーの「開発」から「キャッシュを空にする」をクリックします
キャッシュを削除したら、ページを再読み込みしてください。

管理バーを含んだ正常なWebページが読み込まれるはずです。

wp_head()とwp_footer()

上記のキャッシュクリアをしてもまだ管理バーが表示されない場合は、今度はwp_head()とwp_footer()があるか確認しましょう。

WordPressで自作テーマを作った方は特に注意しましょう。

これらの関数はHTMLにWordPressに必要な情報を出力するので、これらがないと管理バーが出力されません（厳密には管理バーはwp_footer()で生成されます）。

これらの関数は通常、wp_head()がheader.phpに、wp_footer()がfooter.phpに書かれます。

テーマエディターからそれぞれのページを確認して、どっちもの関数がちゃんと書かれているかを確認しましょう。

基本設定を確認

wp_head()とwp_footer()の両方の関数があるのを確認したにも関わらず、いまだに管理バーが表示されない場合は「基本設定」を確認しましょう。

管理画面から「ユーザー>プロフィール」を選択すると、「ツールバー」という項目があります。

「サイトを見る時にツールバーを表示する」というチェックボックスがありますので、これにチェックが入っているのかを確認しましょう。

これが抜けていると管理バーは表示されません。

いかがだったでしょうか。

WordPressで管理バーが表示されなくなった時に対処法4つをご紹介いたしました。

ちなみに僕はその先日に初めていきなり管理バーが消えたのですが、色々試した末にログイン・ログアウトをゴリ押ししたら何故か復活しました。

皆さんも管理バーが消えたらネット上には同じような人がたくさんいるので、焦らずに是非ググって解決してください。

それではまた別の記事でお会いしましょう。
2021年4月7日
【Web用語】僕がエンジニアを始めた時に知りたかった用語8選
皆さん、こんにちは。

すなです。

今回は僕がWebエンジニアとして働き始めた頃に知らなくて困った技術用語8選をご紹介したいと思います。

どの用語も基本レベルなので、駆け出しエンジニアの読者が少しでも早く現場に馴染める様にと思って書きました。

これらの用語を知らず上司に呆れられない様に、皆さんも一緒に勉強していきましょう。

ブラウザ

ブラウザはWebサイトを閲覧するためにソフトウェアになります。

いくつか有名なものを筆頭に、以下の様なブラウザが存在します。
- Google Chrome
- Microsoft Edge(旧 Internet Explorer)
- Safari
- Firefox
ブラウザはそれぞれ挙動に差異があるため、僕のインターン先では社員が新しく作ったデザインがブラウザごとに違わないかをインターン生が確認するという作業がありました。

サーバー

Webサイト制作において「サーバー」といえば、一般に「Webサーバー」のことを指します。

サーバー(=server)の語源のserveは「提供する」のような意味があります。

ウォーターサーバー的なノリです。

サーバー上には様々なファイルが保管されており、ブラウザと通信してファイルを提供します。

一般に制作したWebサイトを公開するときは、それをサーバーにアップロードしなければなりません。

リクエストメソッド

普段の生活では聞き馴染みのないワードかも知れません。

しかしWeb開発では頻出の概念です。

Web開発で「リクエストメソッド」と言うときは、一般に「HTTPリクエストメソッド」のことを指します。

ブラウザは一般にHTTPというルールに従ってサーバーに命令・通信するのですが、そのときに命令の種類がリクエストメソッドになります。

リクエストメソッドは特に頻出な以下の4つを筆頭に、全部で10種類存在します。
- GET(= 取得)
- POST(= 送信)
- PUT(= 更新)
- DELETE(= 削除)
日常でインターネットを使うときはほぼGETとPOSTしか使わない印象です。

ターミナル

これはソフトウェアエンジニア上級者になると頻繁に使うソフトウェアになります。

映画やアニメで見かける、エンジニアが操作している真っ黒な画面のやつです。

上のいらすとやの画像のまさにそれです。

「ターミナル」はMacでの名称で、Windowsでは同様のソフトウェアを「コマンドプロンプト」と呼びます。

どちらもデフォルトでインストールされているソフトウェアなので、パソコンの検索で「ターミナル（Windowsの場合はコマンドプロンプト）」と入力すると使えるはずです。

パソコンを操作するとき（＝指示をするとき）、普段はマウスを動かしてボタンをクリックするなどしますが、ターミナルを用いるとコマンドを入力するだけで同様の操作をすることができます。

僕はファイルを書くときはVSCodeというエディタを使うのですが、インターン先の先輩はターミナルで操作していました。

先輩曰くそっちの方が使いやすくなる時が来るそうです、、、（汗）。

FTP

File Transfer Protocolの略で、「ファイル(=file)を転送する(=transfer)ときの決まり事(=protocol)」という意味があります。

サーバーにファイルを転送するとき、みんなが思い思いの方法通信するとめちゃくちゃになってしまうので、このルールに従って通信しましょう、的なのがFTPです。

現場でも頻繁に使用されているFTPのフリーソフトは以下のようなものがあります。
- FileZilla
- FFFTP
- WinSCP
ちなみに僕は1番目のFileZillaを長く愛用しています。

フロントエンド&バックエンド

Webサイトを開発するときに、その見た目部分と機能部分で分ける考え方です。

使い方として、HTML&CSSやJavaScriptを扱うエンジニアを「フロントエンドエンジニア」と言います。

逆にPHPやRuby、Pyhtonなどを用いてサーバー周りの開発を行うエンジニアのことを「バックエンドエンジニア」と言います。

僕がインターン生のときは、サービスの新しい機能を開発していたのでバックエンドエンジニアでした。

ローカル環境&本番環境

こちらWebサイトやWebアプリを開発する場所についての用語になります。

一般に「ローカル環境」と言うと、自分のパソコン内のことを指します。

逆に「本番環境」と言うと、実際にリリースしている本番のWebサイトのことを指します。

新しい機能やサイトを開発するときはいきなり本番環境で開発するのではなく、DockerやVirtualBoxなどを使って自分のパソコンに本番環境に似た環境を用意します。

そのローカル環境でまずは開発をして、新しいサイトや機能が完成したらそれを本番環境にアップロードします。

API

「Application Programming Interface」の略です。

ソフトウェアの一部を公開して、他からもそのサービスを使える様にしたものを指します。

指定のフォーマットに従えば、そのソフトウェアの一部を使うことができます。

例えばzipcloudという郵便番号データ配信サービスの郵便番号検索APIをプログラムに組んでおけば、わざわざzipcloudで郵便番号を検索しなくても同様の機能が外部からでも使用できる様になります。

僕もインターン生のとき、バックエンド開発で他社のAPIにたくさんお世話になりました。

まとめ

いかがだったでしょうか。

以上が「僕がエンジニアを始めた時に知りたかった用語8選」になります。

全て知ってるよ！と言う方もいれば、全然知らない、、、という方も居るかも知れません。

エンジニアの世界には僕もまだ知らない単語が山ほどあります。

そんな知らない単語にぶち当たったときは、そのとき勉強してしっかりキャッチアップしましょう。

ではまた別の記事で会いましょう。
2021年4月5日
【公表】3月の収益報告
皆さん、こんにちは。

すなです。

今回は僕の【3月の収益報告】をしたいと思います。

Webサイト制作やブログを通して僕が今月どれくらい収益をあげたのかを解説したいと思います。

結論から言うと、大した収益をあげられてはいませんが、Webサイト制作やブログを始めたい方はロードマップ的に見ていただけると幸いです。

それではさっそく参りましょう。

Webサイト制作の収益

まずはWebサイト制作です。

今月した作業は大きく以下のような感じです。
- サイト模写(2つ)
- 営業(5件)
3月は1件、PASPOLさんのサイトを模写しました。

非常にコンテンツが多くて、模写に時間がかかった印象です。

もう1つは、模写とは言い切れないのですが、自分が過去に模写したサイトをWP化しました。

静的HTMLからWP化する方法をこれで学んだので、サイト制作の幅が一気に広がった感じがします。

また営業についてですが、これらは全てクラウドソーシングのサイトで行っています。
今となってはすっかり浸透したクラウドシーシングですが、そのせいかWPのサイト制作などの案件がある程度あります。

これらに対して、僕は自分が70%くらいできそうだな、と感じた案件に対して営業しました。

残りの30%は実務の中で勉強してキャッチアップすればokみたいな感覚です。

お察しかもですけど、営業のうち契約に至った案件は0なので、Webサイト制作での収益は0円でした。

反省点としては3つあると思っていて、
- サイト模写と始めたばかりで、模写したサイトのレベルが低い
- そもそもの営業数が少ない
- 営業の際に付加価値を提供できていない
この辺かなと思います。

これらの改善点として、4月は以下に注力したいと思います。
- サイト模写のレベルを上げる
- 月の営業数を合計15件に増やす
- 相手の依頼にそのまま答えるだけじゃなく、こちらから+αの提案をする
これらを意識したいと思います。

まずは初案件を獲得できる様にこれからも作業を続けます。

ブログの収益

次はブログについてです。

ブログについては、3月は9記事を書きました。

また執筆した内容は以下の様な感じです。
- 模写など自分のWebサイト制作の過程
- Web制作で用いるテクニックなどのご紹介
他にもSNSのやり方とか少し書きました。

本業をWebサイト制作に置いてる割には、ある程度書けたなという印象です。

ブログも少しは頑張りたいと思っているので、毎月5本は書ける様に頑張ります。

また大きく変化したことは、色んな広告サイトに登録して自分のブログに広告を載せたことですね。

以下の全てのサイトに登録しました。
Google Adsenseは1回申請して落ちてしまいました。

少しブログを修正して、現在もリベンジ中です（汗）。

気になる収益の方ですが、A8.netと楽天アフィリエイトの広告を載せた記事が読まれたらしく、
- 20円（A8.net）
- 72円（楽天アフィリエイト）
合計で92円の収益を産むことができました。

A8.netでの収益はクリック課金制度だったので、恐らく何人かがクリックしたのかなと思います。

しかし楽天アフィリエイトでは物販を行ったので実際に商品を買っていただいての収益となります。

自分が紹介した商品が実際に売れたときは、とても嬉しい気持ちになったのを覚えています。

3月に初めてアフィリエイトに登録したので、微々たる金額とはいえ収益が発生したのは大変嬉しかったです。

今月の収益は計92円

以上が僕の3月の収益報告となります。

いかがだったでしょうか。

ブログでの収益も微々たる金額ですし、Webサイト制作ではまだ案件はありません。

しかし「継続は力なり」という言葉を胸に、4月も引き続き作業したいと思います。

では今度は4月の収益報告でお会いしましょう。

さようなら~♪
2021年4月1日
【損します】僕がMacBook Proに外付けキーボードをつける理由
こんにちは、すなです。

今日は僕がMacBook Proを買ったにも関わらず、外付けのキーボードを使用している理由について話したいと思います。

この記事は、
- 毎日たくさんパソコンを使う方
- パソコンが壊れると不便な方
- パソコンの修理費をなるべく払いたくない方
向けの記事となります。

16万円のMacBook Pro購入

プログラミングブームが起きたちょうど2年ほど前に僕は大学の授業に行くのを辞めて、1人でプログラミングの勉強を始めました。

大学入学時に買った生協のパソコンを持って、毎日コンビニのイートインに籠っていました。

プログラミングに興味あるのが分かってきたとある日、僕は大学のパソコンを捨てて、MacBook Proを買うことに決めました。

それからと言うものの、MacBookの使い心地の良さも相待って僕のプログラミング学習は捗り、ブログもたくさん執筆しました。

さらに僕は普段ブラウザでサイトを回遊するとき、VimiumというGoogle Chromeの拡張機能を使っているため、マウス操作をほぼ全てキーボードで完結させています。

僕は普段からプログラミングやブログ執筆をする上に、ブラウザ操作もキーボードを使うので、人一倍キーボードを使っていることに気付きました。

パソコンが壊れる心配

当時の16万円のMacBook Proは学生の僕のとってはとても大きな買い物でした。

24回の分割払いを今でも払っています。

そんな大事なパソコンのキーボードが壊れて新しいパソコンを買わないといけなくなったらどうしよう。

修理に出して高額な修理費用を払わないといけなくなったらどうしよう。

修理に出している間にWebサイト制作の案件が納品に間に合わなかったらどうしよう。

僕にはこんな不安が浮かんできました。

実際にたまに「P」や「Shift」キーが上手く反応しないことが過去にありました（なんか直りましたが）。

この様な不安を払拭するために、僕は「4000円の外付けのキーボードを買う」ことにしました。

MacBookについているキーボードではなく、外部接続のキーボードを買うことにしたのです。

外付けのキーボードを購入

外付けキーボードを買ったことによるメリットはたくさんありました。
- キーボードが壊れてもMacBook本体を修理に出さなくてもいい
- どれだけキーボードを使ってもいいという安心感
- 仕事が中断する心配がない
- MacBookの修理代よりも各段に安いキーボードの保険
これらのメリットを4000円で買うことができたと考えると、かなりお買い得だったかなと思っています。

SANWAのBluetoothキーボード

ちなみに僕が実際に使っているキーボードがこちらです。

こちらは僕が購入した当時最新のMac OS “Catalina”に対応していて、かつBluetooth接続なので家のどこからでもMacBookに接続することができます。

購入したばかりのAir Podsに似た感動があったのを覚えています。

【送料無料】SANWA Bluetoothスリムキーボード SKB-BT31BK 【jan 4969887696682】

posted with カエレバ

楽天市場

Amazon

この外付けのキーボードのおかげで、僕は今でも安心して高級品のMacBookをガシガシ使えることができています。

皆さんもご自宅で愛用されているノートパソコンを大事にしたいなら、是非外付けのキーボードを買ってみたらいかがでしょうか。
2021年3月26日
【#】Twitterの「イイね」を増やすのに僕が最初にやったこと
皆さん、こんにちは。

すなです。

今回はまだ成果0の僕がTwitterで「イイね」をたくさん貰うために最初にしたことをお伝えします。

本記事はまだ実績はないけど、これからSNSを頑張ろうと思っている人向けになります。

SNSでイイねを増やしたいけどまだ実績がない

TwitterやInstagramは日常のつぶやきや綺麗な景色など、さまざまな内容を投稿できるSNSです。

しかしこれらのSNSには普段の日常を投稿する以外に、例えばブログやプログラミングなどで勉強の過程を発信している人がいます。

現代社会において、SNS上で認知されることは大きな意味があります。

SNSでのフォロワーが多いことは信頼できる人と見做されるので、多くの人を動かしたり、個人的にお仕事の依頼が来たりと現代ならではの色んなメリットを得ることができます。

ブログやプログラミングで成果を出されている方は、自分が過去に成果を出した具体的な方法をツイートすることで、初学者などからフォロー・イイねをもらうことができます。

しかしまだ成果がない初学者はどうでしょうか。

成功した方法を紹介することができない初学者は、フォロワー・イイねを増やすことは不可能なのでしょうか。

いいえ、そんなことはありません。

まだ成果がない初学者にも、フォロワー・イイねを増やす最初にするべき方法があります。

今回はその方法をご紹介したいと思います。

#ハッシュタグをつけよう

具体的にやることは「ハッシュタグをつける」ことになります。

どういうことなのか、詳しく見ていきます

実際に数値で比較

ハッシュタグがないとき

これは僕が普段、Webサイト制作やブログについての発信をしているアカウントのツイートになります。

こういう、めっちゃ痒かったところに手が届く情報を教えてくれるので、Web制作するならしめじさん(@simeji_pro)のフォローは必須ですね☺️☺️☺️ https://t.co/M2mCB4PlZj
— すな (@sunablog_tokyo) March 4, 2021

このアカウントで当初、僕はハッシュタグを全く付けずにツイートしていました。

しめじさんというフリーランスエンジニア界隈では比較的有名な人のツイートに共感したので、引用リツイートしました。

有名な方のツイートを引用しているにも関わらず、頂いたのはしめじさんからのイイねとリプだけでした。

本人以外からは全くリアクションを得られませんでした。

ハッシュタグがあるとき

しかし僕はあるタイミングから決まったハッシュタグを多用するようになりました。

学生でも個人で稼ぎたい！！！😂#駆け出しエンジニアと繋がりたい #ブログ初心者と繋がりたい
— すな (@sunablog_tokyo) March 17, 2021

こちらは僕が瞬間的な感情を吐いただけのツイートです。

先ほどのしめじさんの引用リツイートと比べると、学べる内容は全くなく、これぞ本来のTwitterといった様な使い方をしています。

しかし、こちらはイイねを25個、リプも2つ頂きました。

統計的に比較

今度はこのアカウントでハッシュタグを付けたものと付けてないもののイイね・リプ数を比較してみましょう。

いいね数リプ数
#あり 19.5 0.5
#なし 1.3 0
#の比較

「#駆け出しエンジニアと繋がりたい」というハッシュタグを付けた直近のツイート10件と、何もハッシュタグを付けずに投稿した直近のツイート10件を抽出し、それぞれのイイね数とリプ数を平均したものを表にまとめました。

結果はいかがでしょうか。

ご覧の通り、一目瞭然です。

ハッシュタグを何も付けずにツイートしていたときの平均が1.3イイねで、ハッシュタグを付けてツイートしてからは19.5イイねです。

15倍違います。

見てもらえるようにハッシュタグをつけよう

僕や皆さんと同様に、SNS上には多くの人が発信しています。

そして皆さんと同様に、勉強したての初学者は成果がないため、「イイねが増えない、フォロワーが増えない」という同じ悩みを抱えています。

そこで、特定のハッシュタグをつけることでそのハッシュタグで検索している人に見つけてもらい、イイねを、たまにはフォローをしてもらうことができます。

もちろん、全然他人から検索されないようなハッシュタグではなく、アクティブなユーザーが多いハッシュタグをつけて、広く色んな人に認知してもらいましょう。

僕が実際にプログラミング関係のツイートをするときは、
- #駆け出しエンジニアと繋がりたい
- #プログラミング初心者
ブログ関係のツイートをするときは、
- #ブログ初心者と繋がりたい
- #ブログ初心者
をつけてツイートしています。

まだ実績がない人でも、自分の分野でたくさんの人が使っているハッシュタグをつけて、たくさんイイねをもらいましょう！
2021年3月21日
【簡単】WordPressサイトにラクしてお問い合わせフォームを設置する手順
皆さん、こんにちは。

すなです。

本日はWordPress初心者に向けた記事になります。内容はタイトルにある通り、

「WordPressにお問い合わせフォームを導入する方法」

をご紹介と思います。
- ブログ開設したけど、お問い合わせフォーム作れない
- プログラミングスキルがなくて、簡単に作りたい
と言う方は是非ご覧ください。

HTML知らなくても大丈夫

WordPressはプログラミングスキル、HTMLやCSSを知らなくてもブログサイトが開設できる便利なソフトウェアです。

プログラミングスキルがあればもっとカスタマイズできるのですが、WordPressはそのスキルがなくても全然困らないくらいお手軽に扱えるのが良いところです。

しかしWordPressにはデフォルトで「お問い合わせ」の機能がありません。

そこで今回はHTML&CSSのスキルがなくても簡単にお問い合わせを導入できるプラグインをご紹介いたします。

Contact Form 7がオススメ

WordPressには「Contact Form 7」というプラグインがあります。

これがかなり優秀で、今回はこれをオススメします。

今回はお問い合わせを固定ページで作成して、それをサイトのヘッダーに置く方法を紹介します。

プラグインを新規追加する

まずダッシュボードを開いた状態で、まずは「プラグイン > 新規追加」をクリックします。

Contact Form 7をインストールする

検索バーから「Contact Form 7」と入力します。

自動的に検索がかかって、Contact Form 7が表示されます。

Contact Form 7の「今すぐインストール」をクリックして、今すぐにインストールします。

有効化する

インストールが数秒で完了すると「今すぐインストール」の表示が「有効化」に変わります。

その「有効化」をクリックして、Contact Form 7を有効化します。

するとWordPressのメニューに「お問い合わせ」という欄が追加されます。

お問い合わせを作成

新しく追加された「お問い合わせ」から「新規追加」を選択します。

お問い合わせフォームを作る

今回はContact Form 7のデフォルトのフォームを使って、そのまま説明します。

自分の分かりやすい名前を設定したら、「保存」をクリックします。

固定ページを作成する

「保存」をクリックすると、青い背景のコードが表示されてお問い合わせフォームが作成できたのが確認できます。

「固定ページ > 新規追加」を選択して、固定ページの作成画面に移動します。

タイトルを今回は分かりやすく「お問い合わせ」にします。

段落の右の「＋」ボタンをクリックして、選択肢の中から「Contact Form 7」を選びます。

プルダウンから先ほど設定した名前を選びます（コンタクトフォーム１は最初から入っているフォームです）。

これで「公開」をクリックすると、以下のようなお問い合わせのページが作成できます。

お問い合わせページ

ヘッダーにお問い合わせを設置する

「外観 > メニュー」から新しくメニューを追加します。
- 「メニュー名」は自分が分かりやすい名前を設定します。
- 「メニュー項目を追加」から「お問い合わせ」を選択して「メニューに追加」をクリックします。
- 「メニュー設定 > メニューの位置」でお問い合わせを表示させたいメニューをクリックします（どの表示でも表示させたいので、全部にチェックしてもokです）。
上記の設定が完了したら、最後に「メニューを保存」をお忘れなくクリックして設定を保存します。

すると以下のように、ヘッダー位置に「お問い合わせ」が表示されるようになりました！

もちろん、「お問い合わせ」をクリックすると先ほど作った固定ページが表示されます。

お問い合わせフォームを作った方がいい理由

いかがだったでしょうか。

Contact Form 7を使って、プログラミングスキルがなくても簡単にお問い合わせフォームを設置する方法をご紹介しました。

これで皆さんももうお問い合わせページを作るのに困りませんね。

ちなみにデフォルトの状態だとお問い合わせからのメールは、サイトを開いているサーバーに送信されるのでレンタルサーバーにアクセスすればメールを確認することができます。

ところで今回はお問い合わせフォームをCotact Form 7を使って導入する方法をご紹介しましたが、もしかしたら「僕のサイトにはお問い合わせは必要ないよ！」と言う方も中にはいらっしゃるかも知れません。

しかし僕はWordPressサイトにはお問い合わせフォームを導入することをオススメします。

それには大きな理由が3つあります。
- 読者の信頼を得やすい
- もしかしたら企業からも連絡が来るかも
- Googleアドセンスに通りやすい！？？
読者からの信頼

読者がブログを読むとき、それが芸能人ならば顔も素性も分かっているので読者は安心して読むことができます。

しかし、皆さんのブログはどうでしょう。

僕も含めて、ほぼ99%の方がいわゆる素人の一般人だと思います。

そんなブログを読むとき、読者はどこのどんな人が書いているのか不安になっています。

しかしブログにお問い合わせフォームがあると、読者は

「この人は連絡が取れる、怪しい人ではないんだな」

と思ってもらえます。

お問い合わせフォームがあることで、実際に連絡することがなくても読者は安心して皆さんのブログを読むことができます。

企業からの連絡も

信頼できるブログが完成したら、個人の方から色んな連絡が来るかもしれません。

しかし、そんな信頼できるブログに連絡するのは企業も同じです。

信頼できる、アクセスの多いブログで企業の商品を紹介してもらえれば、企業は商品の売上アップに繋がると考えるのは妥当ですよね。

お仕事に繋がるかもしれない連絡が来るかもしれないので、そんな企業様のためにも窓口を用意しましょう。

Googleアドセンスに通りやすい！？？

本当か分かりませんが、巷ではこう言われているらしいです。

Googleアドセンスは審査基準を公表していません。

なので、この情報に信憑性がどこまであるのかは正直分からないのです。

しかしブロガーのヒトデさんが「数百人からアドセンス審査の相談を受けてきて、通る人の共通点が見えてきました」と仰っていた中にこれがありました。

確かに、上記の「読者の信頼を得る」と繋がるところもあるのですが、

連絡できる窓口がある = 信頼できるブログ

であるのは想像できます。

Googleも無闇に広告は出したくないので、信頼できるブログの基準に「お問い合わせがあるか」が入っていても納得できると僕は感じました。

これらの観点からも、まだお問い合わせフォームを設置していない方は是非Contact Form 7でお問い合わせを用意しましょう！

それではまた会いましょう。
2021年3月16日
【傘を買え】雨が降った時は歩く？走る？どっちが濡れない？？
皆さん、こんにちは。

すなです。

本日はいつもとは一風変わった内容です。

「雨が降っている時は歩くのと走るのでは、どちらがより濡れないか」というテーマを検証したいと思います。

歩くのと走るの、どっちが濡れないん？？

僕が住んでいる地域では昨日の夜から雨が降り出しました。
天気予報だと、明後日までずっと雨が続くらしいです。

今日も雨だったので、傘を差してアルバイトに行きました。

アルバイトが終わって帰るときに「濡れたくないから、走って帰るか」と思ったのですが、

「実際、雨って歩くのと走るのどっちの方が濡れないん？」

と疑問に感じたため、今回はこれを検証してみました。

実験のルール

皆んなに理解してもらえるように、まずは分かりやすく説明します。

全ての条件を当てはめるのは不可能に近いので、今回は次のように条件を絞りました。
- 雨が降る量が変化しない
- 風が吹いていない
- 地面からの跳ね返りや水溜りに足を突っ込むなどその他の原因を考えない
これらを条件にした上で、人間を直方体と見立てて雨の中を移動したときに濡れる量を考えました。

2つの濡れ方

雨の中を移動する直方体を次に2つに分けます。
- 正面から濡れる量
- 上から濡れる量
正面から濡れる

まずは直方体が正面から濡れることを考えてみましょう。

直方体は正面に移動すると目の前の雨粒に触れて濡れます。

このとき直方体はどれだけ速いor遅いスピードで移動しても、移動した先に同じ雨粒が存在します。

結果正面から濡れる量に移動する「スピード」は関係なく、移動する「距離」が関係します。

ボルトが走ってもデブが歩いても、同じ100mを移動すれば、到着する時間が違うだけで、正面は100m分の雨に濡れます。
（言葉悪くてすみません笑）

【正面から濡れる量は「移動する距離」が関係する】

上から濡れる

今度は同様に直方体の上面が濡れることを考えます。

直方体は正面に移動すると、真上の雨粒を回避できます。
しかし移動先には別の雨粒が待っているので、結果としては濡れてしまいます。

この様に、どんだけ速いor遅いスピードで移動しても、上からの雨に濡れる量は止まっているときと一緒です。
（コップを頭の上に乗せて歩くのを想像すると、分かりやすいかもしれません。）

つまり、上から濡れるときに大事なのは「雨の中に何分いるか」が大事になります。

1時間かけて家まで走って帰ったら、上面は1時間分の雨に濡れます。

5分かけて家まで歩いて帰っても、上面は5分ぶんの雨にしか濡れません。

【上からの雨は「移動する時間」が関係する】

今の2つの結論をまとめると、
- 正面からの雨には距離が関係する
- 上からの雨には時間が関係する
です。現在地から家までの「移動距離」は決まっているので、歩いても走っても正面から濡れる量は変わりません。

しかし、現在地から家までの「移動時間」は走る速さで変わります。
走れば、その分短くなるし、歩けばその分長くなります。

結論：走った方がいい。

正面から濡れる量は走っても変化しないけど、上から濡れる量は走ると少なくなるから、「走ろう！」が正解。

です。

定量的な解説

めちゃくちゃ最低限の定量的な解説をします。理系の方はご覧ください(笑)。

上の導出で、
- 正面が濡れる量は距離に依存し
- 上面が濡れる量は時間に依存する
と分かった。

直方体の上面が単位時間あたりに濡れる量をn_上、正面が単位長さあたりに濡れる量をn_正とする。
移動にかかる時間をt、移動する距離をLとする。

直方体が雨に濡れる総量をNとすると、次の式が成立する。

N = n_上t + n_正L

このときLは定数であるため、濡れる総量Nをより小さくするためには、tを小さくすればよい。

本当はもう少ししっかりめの導出も見つけたのですが、数式をブログに書き起こすのが億劫だったのでこれくらいで許してください(汗)。

走った方がいいなんて

いかがだったでしょうか。

個人的には、走っても歩いても「変わらない派」だったので、歩く速さで濡れる量が変わるのにはビックリです。

皆さんもぜひ、傘がないときは走りましょう。

それかタクシーで一緒に帰りましょう。

それではまたお会いしましょう。
最後までお読みいただき、ありがとうございました。
2021年3月13日
English Expressions #2

Hi, there! Welcome back to my English blog.

It’s been a while since I posted my last article. I’ve learnt some new English words, so I’ll write it just so I won’t forget!

Let’s go!!!

Immortality

the ability to live forever, eternal life.

Back then, many kings wanted immortality life.

devote A to B

to give all of something, especially your time, effort, or love, or yourself, to something you believe in or to a person.

He devoted his life to the company.
The report recommends that more resources be devoted to teaching four-year-olds.

champion

to support or defend a person, cause, or a principle.

He passionately championed the poor.
It was a cause championed by the tech billionaire.

dedicate

to give all your attention and effort to one particular thing.

The actress now dedicates herself to children’s charity work.

longevity

the amount of time that someone or something lives, long life or the long time that something lasts.

The worms have a longevity of about two years.
The ancient Chinese claimed that garlic promoted longevity.

entrepreneur

someone who starts their own business, especially when this involves seeing a new opportunity.

He was one of the entrepreneurs of the 80s who made their money in property.

proposition

a statement that consists of a carefully considered opinion or judgement

Most people accept the proposition that we have a duty to protect endangered animals.

2021年3月12日
【ブログ入門】WordPressサイトを開設する方法
こんにちは、すなです。

今回は僕たちWebエンジニアも御用達も「WordPress」を使って完全に自分だけのサイトを作る方法をご紹介いたします。
- Webサイト制作を始めたい
- はてなブログ等ではなく自分だけの完全オリジナルサイトを持ちたい
という方は是非見ていってください。

それでは本編です。

サーバーを借りる

まずはあなたのサーバーを借りないといけません。

サーバーには色んな役割がありますがざっくり説明すると、皆さんが書いたプログラミングのファイルを保存する場所です。

サーバー(server)の語源のserveですが、こんな意味があります。

〜に仕える、奉公する、尽くす
（飲食物を）出す
（テニス・バレーボールなど）サーブする
weblioより

「相手のために出す、仕事する」みたいな意味があります。

つまりITにおいては「ファイルを供給する」という役割があります。

ここで言うファイルとは簡単に言うとホームページのことです。これらを保管している場所から皆さんのパソコンに提供するので「サーバー」と呼ばれています。

サイトやブログ開設の第一歩は、まず自分のサーバーを持つことから始まります。

このブログのサーバーは「ロリポップ！」という会社からレンタルしていますので、今回は「ロリポップ！」でサーバーを借りるという体で話を進めていきます。
ロリポップ！

各種レンタルサーバー屋さんには色んなプランがありますが、ブログサイトを開設するだけなら1番普通のプランで問題ないと思います。

僕が入っているロリポップ！のスタンダードプランは、初期費用1650円と月額550円なので全然負担はないです。

「WordPress簡単インストール」でWordPressを準備する

ロリポップ！（や他のレンタルサーバー屋さん）でサーバーを借りてログインしたら、「WordPress簡単インストール」的な項目がどこかにあると思います。
- ロリポップ！だと、「サイト作成ツール > WordPress簡単インストール」
- さくらインターネットだと、「Webサイト/データ > クイックインストール>WordPress」
- エックスサーバーだと、「WordPress > WordPress簡単インストール」
レンタルサーバー3大手のWordPress導入方法を紹介しましたが、だいたいの場合はWordPressの案内がどこかにあると思います。

各種サイトがWordPressインストールの手順を用意しているので、その案内に沿って作業すれば問題なく借りたサーバーにWordPressを準備できると思います。

WordPress開設！！！

WordPressの導入が完了したら、晴れてあなたのブログの開設完了です！！！おめでとうございます！

記事の執筆をすれば、サイトがあなた好みのブログに変化していきます。

【中級編】テーマを変えてみよう！

ですが、これだとWordPressのデザイン・見た目がデフォルトのままです。少しダサいや、テンプレのデザインは嫌だ、というこだわりの強い方もいらっしゃるかもしれません。

そんなはWordPressの「テーマ」を変えて見ましょう。

WordPressにはLINEでいう「着せかえ」に似た機能があり、見た目やデザインを「テーマ」を変えることで変更できます。

有料・無料など様々なテーマがネット上にあるので、お気に入りのデザインのテーマを見つけたら自分のWordPressにアップロードして適用してみてください。

正常に処理が完了すると、あなたのWordPressがさっきとはまるで違う見た目をしているのが分かると思います。

僕がオススメする無料のWordPressテーマを5つピックアップしましたので、調べる前に一旦こちらを見てみてください。
- Cocoon – シンプルで万能的な無料テーマ。デフォルトがホワイトを基調としたデザイン。
- Luxeritas – サイトが非常に軽く設計されている無料テーマ。「ザ・ブログ」というデザイン。
- Lightning – 多くのカスタムが用意されている無料テーマ。会社サイトなどにも向いている。
- AFFINGER – 『「稼ぐ」に特化』した有料テーマ。1つのテーマで多くのデザインが可能。
- SANGO – エンジニア系の発信で有名な「サルワカ」が提供している有料テーマ。
皆さんもお気に入りのテーマを見つけて、自分なりのサイトにしましょう。

【応用編】独自ドメインを取得してみよう！

今度はサイトのurlに注目しましょう。現在では借りたレンタルサーバーのurlがそのまま使われていると思います。

せっかくならurlのブログと関連性のある名前にしてみましょう。

レンタルサーバーから提供されるurlではなく、自分で用意するオリジナルなurlを「独自ドメイン」と呼びます。

独自ドメインは、レンタルサーバー同様に、色んな会社さんが貸し出し・販売をしているので各種サイトを訪問して自分が欲しいドメインがまだ有効かどうかを見てみてください。

僕はロリポップ！が推奨する「MuuMuu Domain」でこのブログの「sunablog.tokyo」という独自ドメインを88円/年で契約しています。
ムームードメイン

ドメインは以下の様に「~.〇〇」のドット以降によって料金が大きく違います。
- 「~.jp」は、2035円
- 「~.com」は、1045円
- 「~.tokyo」は、88円
- 「~.ai」は、13090円
これらは全てMuuMuu Domainでの結果ですが、他のドメインの会社を見ると結構料金が違ったので、独自ドメインに契約される方は色々見てから決めてみてください。

独自ドメインを購入されたら、ロリポップ！（や他のレンタルサーバー屋さん）にログインして、「独自ドメイン設定」で借りているサーバーと独自ドメインを紐づけてください。

この作業は設定後、処理が完了するまで数分かかりますが、少し待つと先ほど借りた独自ドメインであなたのブログを閲覧できる様になります。

これが完了すれば、あとはもう少しです。

【応用編】サイト自体をSSL化してみよう！

最後にブログサイトをSSL化しましょう！

これは簡単に言うと、サイトの通信を暗号化して安全性を高めるということです。

サイトのSSL化はこちらの記事でざっくりと説明しているので、興味を持たれた方はこちらも合わせてご覧ください。

https://sunablog.tokyo/2021/03/10/post-900/

（多くのレンタルサーバー屋さんも同じだと思いますが）ロリポップ！では借りたドメインのSSL化を無料で行えます。

ロリポップ！にログインしたら、「セキュリティ > 独自SSL証明書導入」という項目を選択してください。

ここで、先ほど紐づけた独自ドメインを選択して、SSL保護を有効にすれば晴れてあなたのブログはSSL化されたということになります。

これであなたもサイトを開設できる様になります

いかがだったでしょうか。

知っていると大した作業じゃないんですけど、いざ分かりやすく文章にしたら記事のボリュームが多くなってしまいました。

作業の深い手順は省いて説明しているので、躓いたら焦らずに1つ1つ調べて解決していただけたらなと思います。

最後の最後まで読んでくださった方はありがとうございました。

また次のブログでお会いしましょう。
2021年3月12日
httpとhttpsの違い、知ってる？
こんにちは、すなです。

今回は僕たちがパソコンを使うときによく見る「http」と「https」にどんな違いがあるのか、気になったので調べました。

ブラウザとは

皆さんはインターネットを使う時、普段SafariやGoogle Chromeを使うと思います。

この様なソフトウェアのことを「ブラウザ」といいます。

他にもMicrosoft Edge（かつてのInternet Explorer）やFirefoxなどが有名なブラウザの1つです。

HyperText Transfer Protocol

ユーザーがブラウザで情報を調べるとき、ブラウザはサーバーにアクセスします（ホームページの情報はサーバーに保管されていて、ブラウザはそこからデータを逐一取得します）。

このときの通信方法をHTTPと言います。

httpは「HyperText Transfer Protocol」の略で、直訳すると「ハイパーテキストを転送する規約」という意味になります。

HyperTextとは何か

ハイパーテキストとは、とあるWebサイトを訪問したとしてそのページ内の「商品一覧」をクリックすると新しいページに遷移します。

かつての紙媒体で同じことをやろうとすると、例えば「商品一覧（p.40）」と書かれていたとすると、40ページまで紙を捲らないといけません。

「他のページから他のページに飛べるのがハイパーじゃね？」ということで、ネット上のページを単なるテキストではなく、「ハイパーテキスト」と呼びます。

共通の通信手順

httpはこれら「HyperTextなファイルを転送するのに用いる通信手順」のことを指します。

要するに皆んながバラバラな方法でサーバーと通信してたら収拾がつかないので、「httpという方法で通信しよう」というインターネット上での約束（＝規約）がhttpです。

httpsで暗号化する

httpsはhttpとできることは大きく違いませんが1つ異なる点が、httpsにはSSL(≒TLS)という手順が追加で用いられています。

httpはブラウザがサーバと通信する時に、生のデータでやり取りします。

分かりやすく説明すると、通信するときの信号に通信内容をそのまま記述してやりとりします。

つまり悪意のある第三者によってその通信を「盗聴」されると、その内容が簡単に解読されてしまいます。

しかしhttpと違い、httpsは通信内容が暗号化されます。

つまりhttpsの通信を第三者が傍受したとしても、通信内容が暗号化されているて、その暗号を解読するのには膨大な時間と労力がかかるので、現実的には不可能に近いです。

他にもhttpだと通信に介入して通信内容を改ざんして送信されるなど、暗号化されないことによって不都合なことが多く生じます。

それらを阻止するためにSSL(≒TLS)を用いて通信を暗号化しています。

httpsの見つけ方

実際にhttpsで通信が暗号化されているサイトは、ブラウザが「鍵のマーク」だったり、「保護された通信」と表記したりします。

一方でhttp通信のときは「！」マークだったり、「保護されていない通信」と表記されます。

このように分かりやすくなっています。
いかがだったしょうか。

今回は、
- ブラウザとサーバーの通信について
- HyperTextが何か
- httpとhttpsについて
- httpsのサイトの見分け方
をざっくりと解説しましたが、理解していただけたでしょうか。

httpsのサイトはブラウザにそのサインが表示されるので、これを知っていればどのサイトがより安全で、どのサイトがより安全でないか、一目で分かりますね。

皆さんも是非、身近に潜んでいる疑問をたまには深掘りしてみてはいかがでしょうか。

では、また別の記事でお会いしましょう。
2021年3月10日