「Local」を使ってWordPressをローカル環境で動かしてみる！【簡単・Web制作】
ブログとかホームページを作りたいけど色々面倒くさそう。
と思ってブログやホームページの作成出来ず踏みとどまっている方は多いのではないでしょうか。今回はローカル環境で簡単にWordPressを試すことが出来るツール、「Local」をご紹介します！WordPressのテスト環境をサクッと作りたい場合にもおすすめです。
「Local（ローカル）」ってなに？
わし「ワードプレスってどんな感じ？めっちゃプログラミングの知識がないと使えないの？お試しで使って見たい！」
そんな時におすすめなのが、「Local」です。
ローカルは文字通り「ローカル環境（外部には記事やホームページが公開されない状態）でWordPressを構築して、実際に動かして使って見ることができるツール」です。
少し前までは、多少複雑なPCの知識がなければローカル環境でWordPressを動かすことが出来ませんでしたが、「Local」を使うことで簡単にWordPressを試すことが出来るようになりました。
「Local」を使うまでの手順は？
・公式サイトから「Local」インストーラーをダウンロード。
・インストーラーを起動して「Local」をインストール。
・「Local」起動。ID・パスワードを設定して開始！
ざっくり上記の３ステップです。難しい知識は必要ないので、サクッと試してみましょう！
「Local」インストーラーをダウンロードしてみよう！
わし「まずLocalの公式サイトからインストーラーをダウンロードしてみる。」
ローカルの公式サイトに移動すると「Free Download」ボタンがあります。
わし「色々情報入力を求められる。めんどくさい。」
大丈夫です。
・使用しているOS（今回はWindows版で解説していきます。）
→ほとんどがMacかWindowsのはず。自分のPCにあったものを選択しましょう。
・メールアドレス
最低限上記２項目を入力すればダウンロードできます。
入力したら「GET IT NOW!」からLocalのダウンロードをしましょう！
わし「ダウンロード完了までしばし待つよ。」
「Local」をセットアップしてみよう！
わし「ダウンロード完了！」
緑色のアイコンで「local-○○.exe」というファイルがダウンロードされます。Localのインストーラーです。（○○の部分はLocalのバージョンや選択したOSによって異なります。）クリックしてLocalインストーラーを起動しましょう。
Localをインストールするユーザを尋ねられます。どちらでも構いませんが、今回は現在使用しているユーザーのみにインストールします。
Localの設定ファイルの保存場所を聞かれます。ここで指定した場所にLocal本体がインストールされます。デフォルトのままで進んで大丈夫です。
わし「インストール完了！」
ここまで来たらインストール完了です！Localを起動してみましょう！
Localを起動してみよう！
初期画面です。「CREATE A NEW SITE」をクリックしてサイトを作りましょう。
サイトの名前を何にする？と聞かれます。
なんでも良いのですが今回は「テストWordpressサイト」とします。
管理画面に入る際のユーザーネーム・パスワードを聞かれます。ローカル環境なので両方とも簡単に「test」とします。
わし「しばし待つ。」
完了したらWordPressの構築が始まります。クルクルするのでしばし待ちましょう。
わし「ここまで来たらセットアップ完了！WordPressを使って見よう！」
WordPressを使って見よう！
セットアップが完了したので実際にWordPressを使って見ましょう！
先ほどセットアップしたLocalの画面説明です。
先ほどの管理画面で主に使うのは画像の赤枠で囲っている部分です。
①ローカルサーバーの起動
ここでサーバーを起動したり閉じたりできます。サーバーが起動していないとサイトを見ることが出来ないので、起動していない場合はここでサーバーの状態を切り替えてあげましょう。
②ADMIN・VIEW SITEボタン
ADMIN：サイトの管理画面に移動するボタンです。管理画面では記事を投稿したり、サイトの外観を変えたりできます。
VIEW SITE：実際のサイトを見ることが出来ます。管理画面から記事を投稿すしたり、サイトの外観を変えたりするとその内容が表示されます。
ここまで来たらあとはWordPressを色々触ってみるのみです！実際に「ADMIN」ボタンから管理画面に移動して、WordPressを使って見ましょう！
まとめ
今回はローカル環境でWordPressを使用する方法をご紹介しました。ローカル環境なので実際に全世界にサイトが公開されることはありません。実際にサイトを公開したい場合はサーバーをレンタルしてWordPressを運用する必要があります。
「Local」でWordPressの操作に慣れたら、実際のサーバーを使って自分のサイトを公開してみましょう！
WordPressを覚えるために【書籍】
ブラウザってどれ使ってる？
ブラウザってどれを使うのが正解なんだろう？
わし「そもそもブラウザって何？」
ネットで何か検索するときに使うやつです。
わし「ブラウザって色々あるのか。結局どれがいいんだ？」
結論は、Chrome・Safari・Firefoxのいずれかになります。
わし「んじゃあ、なんでそれ以外のブラウザが推奨されないのかも知りたい！」
わし「ひとまずこの記事はChromeを使って見ることにするでー。」
そもそもブラウザってどんな種類があるの？
色々あります。
代表的なものを5つ紹介していきます。
■Google Chrome（グーグル クローム）
わし「これPCの時いつもこれ使ってる。」
一番馴染みの深いブラウザではないでしょうか。「Chrome」です。国内だとPCで使用するブラウザ人気No.1。圧倒的なシェア率です。スマホの場合の国内シェア率も「Sarfari」に次いで2番目です。国外でみると圧倒的1位ですね。海外は大多数がAndroid端末を使用していることもあって、「Safari」より人気が出ていると考えられます。
「拡張機能」も充実していて後付けで欲しい機能をどんどん追加することもできます。ただChromeを使用するとメモリの関係で別のソフトの動作に影響をきたすこともしばしば。
わし「PC重いなー、動作カックカクやん。」
わし「...（Chromeのタブ10個くらい開きっぱなしだ...）」
■Safari（サファリ）
わし「iPhoneで検索するときはこれ！ってか勝手にこれ開く！」
スマホでの国内シェアNo.1の「Safari」です。PCでは割と他のブラウザに埋もれ気味ですが、Macを使用している方はしばしば開く機会があるのではないでしょうか。こちらもChrome同様「拡張機能」が存在します。Appleが提供しているブラウザなので、iPhoneやMacでは基本デフォルトのブラウザとして設定されています。
わし「目立って悪い部分はないので、これからもiPhoneでいる限りはSafari使うと思う。」
■Firefox（ファイアフォックス）
わし「キツネ。」
キツネです。ChromeやSafariに比べると認知度は低いかもしれませんが、世界5大ブラウザには確実に入るであろうブラウザです。正直わしも普段使う機会はありません。ただ動作はChromeに負けず劣らずのサクサク。「アドオン」という機能を追加することで自分好みにカスタマイズしていけるのが利点です。こだわりがある方はChromeやSafariよりこちらを使用するのかもしれません。
わし「ここまでの3つのブラウザは、問題なく使ってOK！」
■Internet Explorer（インターネットエクスプローラー）
わし「問題児。」
問題児。とにかく問題児。略してIE（アイイー）呼ばれることが多いです。しかし少し前まではメジャーなブラウザだったこともあり、国内のPCでのシェアはChromeに続き2位です。マイクロソフトが提供しているブラウザ。
わし「IEでホームページを開いたらボタンが押せない...表示がめちゃくちゃで何が書いてるかわからない...画像がデカすぎて画面のほとんどを占めている...なんじゃこりゃ...」
わし「でもChromeでみればバッチリやないかい！実はカッコいいサイト！」
Web業界は進化して技術的なハードルが下がり、開発者の負担が少なくなっていきます。ブラウザもその技術に対応しようとアップデートを繰り返していきます。しかしIEはもう進化しません。既に開発元のマイクロソフトが「IEの使用をやめた方がいいです。」って言ってしまっているくらいです。
わし「便利な技術を使ってサクッとWebページを作った」
IE「それ、対応してない。表示できない。」
わし「でもIEを使う人は多い…無視できない...」
わし「時間をかけてでも、昔の技術を組み合わせて何とかうまく動かすしかない...」
これがIEが開発者から嫌われる最大の理由です。ただこれまでIEを使っていた企業がいきなりChromeに乗り換えるのも色々とリスクが高く、IE離れが進まないというのが現状のようです。
現状個人で使用する場合にIEを使うメリットはほぼ無く、使用を避ける方がよさそうです...！
■Microsoft Edge（マイクロソフト エッジ）
わし「IEにアイコンが似てるな。もしかして...。」
略してEdge（エッジ）と呼ばれるブラウザ。名前の通りこちらもマイクロソフトが提供しており、最近はIEに代わってWindowsの標準ブラウザとしてパソコンに搭載されているブラウザです。ただこいつも割と厄介者。IEほどではありませんが、表示崩れや動作不良が起こる可能性が大いにあるブラウザです。
わし「IEから乗り換える分にはありかもなー。だったらChromeとかに乗り換えた方が断然いいから、このブラウザを使うメリットもほぼ無いなー。」
開発者からすると、おすすめはできないブラウザの一つです。
ブラウザは他にも色々！
ここで紹介した以外にもブラウザは色々あります。しかし初めにも言ったように、Chrome・Safari・Firefoxのいずれかを使うのが無難です。
わし「Twitterから開いたらTwitterのブラウザ？で見てる感じになってるんだけどこれは大丈夫なの？」
体感的にはこのようなアプリ専用ブラウザで不具合が報告されるケースは少ない気がします。IEやEdgeでなければそこまで気にかける必要はないでしょう。
以上、良いブラウザを使って快適なネットサーフィンをしましょう！
今回のシェア率データの参考サイト（2018/10～2019/10データ）
国内：デスクトップ（PC）
https://gs.statcounter.com/browser-market-share/desktop/japan#monthly-201810-201910
国内：スマホ
https://gs.statcounter.com/browser-market-share/mobile/japan#monthly-201810-201910
世界：デスクトップ（PC）
https://gs.statcounter.com/browser-market-share/desktop/worldwide#monthly-201810-201910
世界：スマホ
https://gs.statcounter.com/browser-market-share/mobile/worldwide/#monthly-201810-201910
部長「今年の売上を計算してメールで送って欲しくて」【GAS】
部長「これから毎年やってもらうから。」
わし「かしこまりたくねぇ。」
部長「何とか頼んだ。」
わし「んーしかも毎年か。スプレッドシートで売上データ貰ったけど、これボタン１つで計算してメール送信まで出来たりしないかなー。」
前提として
Googleスプレッドシートとは、Googleに登録していると使えるExcelのような機能です。他にもWordに代わるGoogleドキュメント、PowerPointに代わるGoogleスライドが提供されています。
わし「スプレッドシートで計算したり、自動でメールを送る方法を検索...」
わし「このGAS（ガス）ってやつ使えばできるかな？」
GASとは？業務を効率的にするためのプログラミング！
GASとは、Google Apps Scriptの略で、事務作業などをスプレッドシートで行う際に、覚えておくと便利なプログラミング言語です。実際に今回の例を元にGASを試してみましょう。
わし「これが部長からもらった月ごとの売上シート！」
わし「ちなみにこのシートは"売上（万円）"ってことか？」
部長「んや、"売上（円）"や。」
わし「辞めてぇ。」
GASを使ってみる。
わし「まずはGASを書く画面（エディタ）に移動する！」
上のツールバーから、「ツール＞スクリプトエディタ」をクリックするとプログラムを書く画面（エディタ）に移動できます。
主に使うのは上の２箇所。コードを書く部分と、そのコードを実行する部分です。
わし「準備おっけーや。今回やることは、
・さっきのシートの月ごとの売上の合計を出す。
・売上をメールで送信する。
の２つ。合計はSUM関数でも簡単に計算出来るけど、練習を兼ねてプログラムとして書いてみる。」
プログラムを書いてみる【売上合計を求めたい】
わし「まず売上を合計する処理を書いてみる！」
わし「//って書いている部分に何をやっているかまとめてみた。」
色々書いていますが、このソースを丸々書くことで元々のシートの「売上」列の数字を全て合計することが出来ます。
6行目のuriageAryには[2000, 2000, 3000, 2000, 1000...]のように毎月の売上が格納されるので、それ値を全て足しこんで11行目でuriageTotalに入れる。という内容です。
わし「つまりuriageTotalには今年の売上額が入っていることになるのか。これをメールで送れば完璧や！」
プログラムを書いてみる【メールで送信したい】
わし「さっきの売上合計をだす処理の下にメールを送信する処理を書いてみた。」
MailApp.sendEmailの中に宛先、タイトル、本文を指定してメールを送信する仕組みを作っていきます。
わし「さっきuriageTotalに合計を入れるようにしたから、これを本文に指定してあげると良さそう。実際には合計額に置き換わってメールが送信されると思う。」
実行してみる。
わし「これで完成！試しに部長アドレスの部分を自分のアドレスにして実行してみる。これで自分にメールが飛んでくるはず。」
わし「実行は上にある三角ボタン。（ポチ）」
わし「......メール来てるかな。」
わし「ｷﾀ━(ﾟ∀ﾟ)━!これで毎年貰った金額をシートにコピペして、三角ボタンで実行すればメールが飛ぶようになったわけだ！」
部長「あ、さっきのシート、別にメールで報告しなくてもよかったわ。代わりにWordで売上報告書を作成して共有してくれ。」
わし「辞めてぇ。」
一応気を付けてほしいこと
わし「メールアドレスの指定などを間違えると、内容によっては個人情報流にもつながるので、まずどうでもいいデータで試したり、個人用のシステムを作ってみるほうがいいかもしれない。」
まとめ
今回は事務作業等で活躍する言語、GAS（Google Apps Script）を紹介しました。ExcelのVBAと似たような機能です。メール送信以外にも、仕事管理ツール、自動でシートの書き込み、ちょっとしたWEBアプリ開発、他のツールとの連携など、アイデア次第で使い方は無限大です。Googleに登録しているだけで手軽に使える機能なので、気になった方は一度お試しあれ。自分なりの業務効率化ツールを作ってみてはいかがでしょうか。
参考にしたい本とか記事とか
【書籍】
GASはJavaScriptベースの言語なので、覚えておくとJavaScriptを書く場合にも応用が利きます。
|
GASから始めるプログラミング入門書としてもおすすめ！ |
そもそもスプレッドシートとは？という方へ。
【記事】
GASの基本。わしの記事より100倍分かりやすいので目を通してみて下さい。
身に着けるとこんなことまで出来るよという例。
わし「APIってなに？」
APIって聞いたことある！使いたい！でも何かわからない！
わし「API（あぴ）？」
API（えーぴーあい）です。
ってことで、最近YouTubeのAPI（YouTube Data API v3）を使って簡単なWebアプリケーションを作った経験をもとに、APIとは何かを自分なりに超ざっくりまとめてみました。
今回はYouTubeではなく架空の料理サイトのAPIを使うつもりで説明していきます。（APIによっては色々異なる部分があるかもしれません。間違ってたらごめんなさい。）
１．わし「そもそもAPIってなに？」
簡単に説明すると、なにかのサービスの機能やデータを使用できる仕組みです。
アプリケーションプログラミングインタフェース（API、英: Application Programming Interface）[1]とは、広義ではソフトウェアコンポーネント同士が互いに情報をやりとりするのに使用するインタフェースの仕様である。
なんか色々難しいけど要は、
わし「あーなんか料理のレシピを見ることが出来るサイトを作りたいなー」
わし「自分で全部入力するのは大変だから、どこかの料理系サイトに掲載してる情報をそのまま使えたりしないかなー」
お料理.com「んじゃーうちのAPIを使えばいいよ。」
お料理.com「https://お料理.com/api/にアクセスすればいいよ。」
わし「クックパッ...」
お料理.com「https://お料理.com/api/にアクセスすればいいよ。」
わし「まじ？んじゃーアクセス！！（エンター）」
お料理.com「どぞ（料理情報を詰め込んだデータの塊が返ってくる）」
[
{
"yasai": "ニンジン",
"color": "オレンジ",
"cooking":"カレー"
},
{
"yasai": "キャベツ",
"color": "緑",
"cooking":"ロールキャベツ"
}
]
わし「んー、なんかわからんけどこのyasaiって野菜の名前のことかな。」
わし「colorってその野菜の色かな？cokkingってその野菜を使ったおすすめの料理のことかな？」
お料理.com「そう。全部うちのサイトに掲載しているよ。」
わし「なんかこのデータ使ったら、野菜ごとのおすすめの料理一覧とか作れそう。」
って仕組みのことです。ちなみにこの渡ってきたデータの形式をJSON形式といいます。
２．お料理.com「APIキーって持ってる？」
わし「なにそれ？」
お料理.com「みんながURL叩くだけでうちのサービスの情報使えるなら、なんか損した気分だよ。だから最低限うちのサービスに登録してる人だけに使ってもらいたいよ。」
料理サイト「登録してくれたらAPIキーっていう英数ごちゃ混ぜの文字を渡すよ。それをURLに混ぜてから叩いてくれないとうちのサービス情報は使えないよ。」
わし「登録した。」
お料理.com「ap15KF7sgaL1P」
わし「https://お料理.com/api/のURLの中に混ぜればいいの？」
お料理.com「後ろにkey=って指定してあげて。」
わし「https://お料理.com/api/?key=ap15KF7sgaL1P（エンター）」
お料理.com「通信成功。どぞ。（料理情報の塊データ）」
わし「https://お料理.com/api/?key=aaaa（エンター）」
お料理.com「通信失敗。そのキーは誰にも渡した記憶ないよ。（エラー）」
これがAPIキーです。APIを取得する際にお金がかかったりするものもあるので、簡単に作りたいときはひとまず無料APIを探してみるといいかもしれません。
３．わし「カレーに使う野菜一覧だけ欲しいんだけど」
お料理.com「パラメータで色々指定してあげればいいよ。」
お料理.com「さっきのkey=ってやつもパラメータだよ。あのURLの後ろに&で続けて指定してあげてね。」
わし「カレーに関係する情報だからcookingがカレーのものを指定すればいいのか。」
わし「https://お料理.com/api/?key=ap15KF7sgaL1P&cooking=カレー」
わし「こんな感じ？（エンター）」
お料理.com「そうそう。どぞ。」
[
{
"yasai": "ニンジン",
"color": "オレンジ",
"cooking":"カレー"
},
{
"yasai": "ジャガイモ",
"color": "茶色",
"cooking":"カレー"
},
{
"yasai": "タマネギ",
"color": "白",
"cooking":"カレー"
}
]わし「coolkingがカレーの情報だけ取れた！なんかシチューも作れそう。」
お料理.com「他にもにも色々あるけど詳しくはお料理.comの開発者用公式サイトを見てね。」
基本APIにはそのAPI特有のパラメータが色々用意されています。これらを駆使して上記のように自分が欲しい情報だけを見つけ出すこともできます。
４．まとめ
以上、APIとはざっくりこんな感じの仕組みというお話でした。
さらに取得したデータ情報ブラウザに表示させたい！その情報を使ってWebアプリケーションを作りたい！といった場合には、HTMLとJavaScriptについて知る必要があります。APIによってはPHPなどサーバーサイドの知識も要することもありますが、まずはHTMLとJavaScript（Ajax）について知っておくと良いかと思います。わしもサーバーサイドはぱっぱらぱーです。
ちなみに実際にわしが使用したYouTubeのAPI（YouTube Data API v3）も基本的な機能は無料で使えるAPIです。こちらは最低限HTML、JavaScript（Ajax）の知識があれば使用できるAPIでした。
Google Cloud Platformというサイトに登録すると使うことが出来るので気になる方は試してみてください。
