[Docker] WordPressを速攻インストールして構築を開始できるのDocker開発環境をつくった

WordPressを開発するとき、MAMPやLocal by Flywheel、皆さんはどんなツールを使っていますか?

開発環境って結構構築が面倒だったりしますよね。

ここ1年くらい、私はDockerで開発環境を構築しています。非常にシンプルな開発環境ですが、個人的には気に入っています。

メールの送受信も確認できるMailHog付きです。

WordPressがサクッと動作するDocker環境

Git

以下のリポジトリを利用します。

https://github.com/onocom/wp-docker

前提

インストール方法

Git Clone

Docker立ち上げ

クローンしたディレクトリに移動

Docker起動

Docker停止

使い方

WordPressインストール

http://localhost:8000/

※ 初回起動時には、WordPressのインストール画面が立ち上がるはずです。

WordPressインストール画面

phpMyAdmin

http://localhost:8080/

phpMyAdmin画面

MailHog

ローカル環境でメール受信・送信を確認する画面が立ち上がります。

http://localhost:8025/

MailHog画面

ディレクトリ構成

Dockerが起動すると、以下のディレクトリが生成されます。
htmlがApacheのドキュメントルートになります。

※ www配下のディレクトリは、gitignoreされています。

まとめ

シンプルな構成にしているので改善とかもしやすいかな。

ぜひぜひご活用いただけると嬉しいです。

 



【macOS】hostsファイルの場所と編集方法、書き換え方法

最近は仕事柄めっきりWindowsマシンを触ることはなくなりました。

そのかわりに触っているのがMacBookPro(macOS Mojave)。

以前、Windowsのhostsファイルの場所が覚えられなくて記事にしたんだけど、改めてmacOSでのhostsファイルの場所をメモっておきます。

Windowsユーザの方はこちらの記事をどうぞ。

hostsファイルの読み方とかは上記記事を参照ください。

macOSのhostsファイルの場所

以下のパスにhostsファイルが存在しています。

※ macOS Mojaveで確認しましたが、他のバージョンでも同じパスに存在すると思います。(違ってたら指摘ください。)

macOSでhostsファイルの場所を開いて編集する方法

macOSだとFinderにフォーカスがあった状態で【Command】+【G】を押す。

Finderにフォーカスされた状態
こうなった状態でキーボード操作

すると、以下のようなウィンドウが立ち上がるので、そこに先程のhostsファイルの場所

/private/etc/

を入力する。

フォルダへ移動ウィンドウ

移動ボタンを押すことで、hostsファイルのあるフォルダが開く。

hostsファイルを探す

その中からhostsファイルを見つけて開こう。

hostsファイル

hostsファイルの書き換え方

以下のように編集します。

記述形式

記述例

コメント

先頭に#を入れることでコメントも使える。

まとめ

アプリで編集する方法とかも色々試したけど、直接編集したほうが個人的には色々楽だったので、直接hostsファイルを編集する方法をメモりました。

よし、これでmacOSのhostsファイルの編集方法覚えたぞ。

 

全然関係ないけど、iPadが欲しい。



[WordBench三重] Gutenbergで作るランディングページ 再改定版+Gutenbergのカスタムブロックを作る

WordCamp Osakaでお話した内容を再改定してWordBench三重でお話をさせていただきました。

使用したスライド

変更点

エディタカラーパレットの設定

ブロックスタイル

 



[WordCamp Osaka 2018] Gutenbergで作るランディングページ 改定版

今日、2018年6月2日に開催されるWordCamp Osaka 2018にWordPressの次期エディターであるGutenbergのお話で登壇しました。

WordBench Osaka & Kyotoでお話した内容と基本同じではあるのですが、半年経つとGutenbergのテーマサポートなどの方法が変更されていたりと、大幅な改定を行いました(大変でしたっ)。

使用したスライド

Gutenbergってなんだ?

GutenbergとはWordPressの5.0からコアに搭載予定のエディターになります。
エディターインターフェースといったほうがしっくり来るかも。

今までエディタとは大きく異なり、ブロックと呼ばれるコンテンツのまとまりを組み上げることによってページを作成するのが大きな特徴です。

パブリッシングプラットフォームであるWordPressのパブリッシングを大きく変える壮大なプロジェクトで、このエディターの導入には大きな苦労が伴うと思われます。

WixやJimdoなど、最近は誰でも簡単に編集ができるプラットフォームが多くなってきました。

そういった環境の変化にユーザーは敏感です。より簡単な方に流れていくのは人の真理でもあります。

今はWordPressのシェアは世界一ですが、そのようなユーザーのことを思うと、未来はどうなっているかは誰にもわかりません。

その未来を見据えたプロジェクトがGutenbergエディターだと私は感じています。

Gutenbergの使い方

当日は、デモサイトを利用して参加者に触っていただく機会を設けました。

Gutenberg 対応のテーマの作り方

ここが半年前と大きく異なる部分でした。

add_theme_support の gutenberg がなくなり、それぞれがテーマサポートとして独立しました。

 

 

 

GutenbergChallenge

Gutenbergを利用して、指定されたデザインのランディングページを作るワークショップも実施しました。

実際に、参加者が頑張って作ってくれたページは以下のURLの最下部よりご確認いただけます!

http://wb.onocom.net/

GutenbergChallengeの説明ページ用のプラグインも作りました。GitHubで公開しています。

https://github.com/onocom/gutenberg-challenge-introduction

感想

ワークショップ盛り上がってすごく嬉しかったです!

WordCamp Osaka 2018最高でした!



【Office-Excel】プロジェクトの課題管理や仕様調整、連絡用に使えるエクセルテンプレート

仕様の調整、細かい部分の相談など、プロジェクトに欠かせない課題管理

プログラムやウェブサイトを構築していると必ず出てくる疑問・質問・課題。

例えば、ウェブサイトの構築であれば、

  • リンクをクリックした時の遷移先
  • メニューにマウスオンした時の挙動
  •  WordPressに導入するプラグインの相談

などなど、事前に取り決めておく事が出来るものもあれば、出来ないものもあり、一個ずつメールで確認するのも大変です。

そんな時に使っていただきたい課題管理・仕様調整用のエクセルテンプレートを作ったので紹介します。

プロジェクト課題管理エクセルシート

課題管理(質問・連絡等)を円滑に進める為のエクセルテンプレートです

いまさらエクセルで課題管理してるなんて・・・という声が聞こえて来そうですね。

クラウド関係は一切ダメで、エクセルしか使えないクライアントさんもいらっしゃるので、そういう方にご活用頂ければと思います。

また、Googleスプレッドシートにアップロードして変換することでクラウド化も簡単なのでそういう使い方も有りかと。

プロジェクトに合わせて、自由に使ってみてください。

ダウンロード

以下のリンクよりダウンロード頂けます。

【課題管理・仕様調整エクセルシート】ダウンロード

ライセンス

好きに使ってください。

商用・非商用何でも大丈夫です。

当サイトにリンクする必要もないです(リンクしてくれたら嬉しいけど)。

使っている様子動画

特徴とか

課題管理はシンプルに

今まで、プロジェクトに合わせて様々な課題管理・仕様調整用のエクセルシートを作って来ました。

「優先度」「影響度」「期限」などの列を作って管理していたこともありましたが、私の経験則から言うと、余り列が多すぎてもゴチャゴチャして結局列が使われない。ということもあり、シンプルな課題管理票になっています。

状態も「OPEN」、「CLOSE」のみです。

「CLOSE」に変更するとその行がグレーアウトされるように条件付き書式を設定してあります。

必要な列は追加してね

シンプル過ぎて物足りない。

という方、シンプルな作りだからこそ簡単に列を追加出来ます。

必要な列を追加してご活用ください。

LAN内の共有サーバに配置して複数人で課題・質問を記入したい

エクセルブックの共有を設定してあげれば複数人で同時に記入することも可能です。

エクセルの共有方法

エクセルブックの共有は以下の方法で行います(上部の動画でも共有方法を確認頂けます)。

  1. リボン(メニューバー、ツールバーとも言う?)から校閲を選択
  2. ブックの保護と共有を選択
  3. 変更履歴付きで共有する(S)をチェックしてOKボタンをクリック
    変更履歴付きで共有する(S)
  4. 「この操作を行うとブックはいったん保存されます。よろしいですか?」のダイアログに対してOKボタンをクリック

    この操作を行うとブックはいったん保存されます。よろしいですか?

まとめ

エクセルだから色んな人が使えて、カスタマイズがしやすい!

ご活用頂ければ嬉しいです。