[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されています。

まとめ

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

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

 



[WordPress] Gutenbergで作るランディングページ!Gutenbergの使い方やテーマ対応方法!

WordPressの次期エディタ「Gutenberg」について学ぼう

あけましておめでとうございます。今年もよろしくお願いします!

新年開けてすぐの今日、WordBench京都&大阪でWordPressの次期エディタである「Gutenberg(グーテンベルク)」のお話をさせていただきました。

このポストは、WordBench京都&大阪の振り返りポストです。

WordBench京都&大阪 1月 WordPressとWebマーケティングことはじめ

https://wb-kyoto.connpass.com/event/70848/

大阪のたこ焼き美味しかったです!

セッションスライド

当日利用したスライドです。

※ デモサイトは停止しました。Gutenbergを使ってみたい方は以下を読み進めてくださいな。

Gutenbergってなんだ?

Gutenberg(グーテンベルク)とはWordPressのバージョン5.0に搭載予定の次期エディタのことです。活版印刷技術の発明家「ヨハネス・グーテンベルク」にちなんで命名されたようです。

現在のWordPressのエディタはこのブログのように単純な投稿には適していますが、ちょっと複雑なことをやろうとすると、極端に難しくなりますよね。

Gutenbergでは、ブロックと言う単位でコンテンツを構成します。

ブロックには、見出しや文章、画像、動画と言った基本ブロック以外にも、ショートコードやウィジェットなども組み合わせてコンテンツを組み立てる事ができます。

Gutenbergを試してみたい!

Gutenbergは現在プラグイン形式で開発中です。

Gutenbergを試してみたい方は、以下のURLからダウンロードするか、WordPressのプラグインインストール画面から「Gutenberg」と入力してインストールし、有効化してください。

※ 鋭意開発中なので本番環境などで使わない方がいいです。

Gutenberg Plugin

Gutenberg

Gutenbergを無効化したい!

Gutenbergの導入は怖い!Gutenbergを利用したくない!無効化したい!

という方のために、今まで通りのエディタを使う為のプラグインも開発されています。カスタムフィールドをゴリゴリ使っているサイトはちょっと心配ですもんね。

※ 現在鋭意開発中なので本番環境などで使わない方がいいです。

Classic Editor Plugin

Classic Editor

Gutenbergの使い方を知りたい

Gutenbergを有効化すると、管理画面のサイドバーに「Gutenberg」メニューが現れます。

そちらにカーソルを合わせて「デモ」を選択すると、Gutenbergのデモ記事が生成されます。

画面キャプチャを交えて簡単に使い方を紹介します。

編集画面

Gutenberg編集画面

編集画面上部

上部左側には、ブロックの追加ボタン、リドゥ・アンドゥボタンが配置されています。

上部右上には、プレビューボタン、公開ボタン、右サイドバーの表示切り替え、エディタ切り替え(グーテンベルクとクラシックエディタを切り替えるボタン)が配置されています。

右サイドバー

右サイドバーには、DocumentタブとBlockタブがあります。

Documentタブでは、記事のカテゴリやアイキャッチ画像、抜粋が設定できます。

Blockタブでは、選択中のブロック固有のスタイルやCSS ID・クラスの設定等ができます。

コンテンツエリア

見慣れないですが、画像やテキストは別々のブロックとしてあつかわれています。

左上、もしくはブロックとブロックの間にカーソルを合わせると出て来るブロック追加ボタン(プラスボタン)を押してブロックを追加していきます。

どんなブロックが存在するの?

デフォルトでは、以下のブロックが定義されています。

多く見えますが、実際に使おうと思うとまだまだ開発段階ということが分かるかと。

カラムレイアウト(3列や4列)には現在非対応で、5.0のタイミングには対応されないかもしれません。早く対応して欲しい!

グーテンベルクのブロック一覧

数多くの埋め込みにも対応しています。

グーテンベルクのブロック一覧2

ブロックのデータはどうやって保存されるの?

各ブロックの情報は、HTMLコメント形式でwp_postsテーブルに保存されます。

表示の際には、HTMLコメントが解釈されて動画や画像が埋め込まれたりします。

Gutenbergのデータ保持方法

これから改善されていくところやメモなど

パーマリンクの設定箇所がない

投稿一覧クイック編集から編集するしかなさそう。

この件について、Githubで議論されている。

https://github.com/WordPress/gutenberg/pull/3418

カラムを柔軟に作れない

今のところ柔軟なカラム設定出来ない。

https://github.com/WordPress/gutenberg/issues/219

カスタム投稿タイプで動作させるためには

register_post_typeする際に、‘show_in_rest’ => true が必要。

編集画面が真っ白になることがある

ローカル環境にGutenbergをインストールして記事を新規作成したところ、なぜか画面が真っ白になった。

管理画面の設定→パーマリンク設定

画面を開いて、「変更を保存」ボタンを押すことで正常に動作するようになった。

テーマをGutenbergに対応させるには

以下の作業は必須ではありませんが、functions.phpやstyle.cssに記述しておくとGutenbergの機能を活用できると思います。

functions.php の編集

add_theme_supportに’gutenberg’を指定します。

wide-imagesは、左寄せ・右寄せ・中央寄せの他に「ワイド幅」や「全幅」を追加するためのオプションです。

colorsは、Gutenbergのテキストブロック等で指定する色を予め設定しておくオプションです。サイトのキーカラー等を設定しておくとごちゃごちゃせずに良さそうですね。

style.css の編集

add_theme_supportでwide-imagesオプションを設定し、ブロックに対してワイド幅や全幅を指定すると、.alignwideや.alignfullというクラスが付加されます。

そのクラスに対してテーマとしての振る舞いを定義します。

Gutenbergについて理解を深めたい!

Gutenbergについて理解を深めるには、実際に使ってみるのが一番!

Gutenberg Challenge

ということで、WordBench京都&大阪では、「Gutenberg Challenge」と題して、Gutenbergでランディングページを作ってもらうという簡易のワークショップを行いました。

これからGutenbergを触って見ようかな!と思っている方、以下のリポジトリからGutenberg Challengeに挑戦してみてください!

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



[IDE] Eclipse 4.7(OXYGEN)のインストール手順と日本語化

Aptanaのアップデートが止まっている!
新しいIDEを探そう!

私は以前からAptana(Aptana Studio 3)を愛用しているのですが、2014年頃から新しいバージョンがリリースされず。

このまま使い続けるのもいいのですが、他のIDE(統合開発環境)を模索しても良い頃かと思い、AptanaのベースともなっているEclipseをインストールしてみました。

2017年の6月末にEclipseのバージョン4.7(コードネームをOXYGEN(酸素))がリリースされており変わらず活発にアップデートがされているようです。

今回はWindows 10(64bit)でEclipseをインストールする手順をまとめてみました。

日本語化についても簡単に触れていますが不足部分はググってくださいませ。

ダウンロード

公式サイトのダウンロードページへアクセス

https://www.eclipse.org/downloads/

ダウンロードボタンをクリック。

もう一度ダウンロードボタンをクリック

ダウンロードが開始される。

 

お金に余裕のある方は、ダウンロード中の画面に表示される寄付を検討してみてくださいませ。

インストール

ダウンロードしてきた、「eclipse-inst-win64.exe」をダブルクリックしてインストール操作を行います。

Eclipse IDE for JavaScript and Web Developersを選択

Eclipse IDE for JavaScript and Web Developersを選択

インストールパスを指定

インストールパスを指定

利用規約に同意

よく内容を読み、Accept Nowをクリック。

利用規約に同意

インストール完了まで待つ

Eclipseのインストール中

インストール完了したらEclipseを起動

インストール完了 Eclipseの起動

おおぉ!Eclipse!

Eclipseのスプライト画面

ワークスペースディレクトリを指定

ワークスペースを指定

Eclipseが無事に起動しました

Eclipse無事に起動

日本語化

Eclipseの日本語化といえば、Pleiades (プレアデス)。

公式サイトよりPleiadesのプラグインをダウンロード

Pleiades – Eclipse プラグイン日本語化プラグイン
http://mergedoc.osdn.jp/

Eclipseの日本語化

日本語化の設定

詳しくはreadme_pleiades.txtを参照ください。

readme_pleiades.txtより、設定方法部分だけ以下に抜粋します。

1. pleiades_x.x.x.zip を解凍し、plugins、features ディレクトリーを <ECLIPSE_HOME> ディレクトリーに
コピー。(<ECLIPSE_HOME> は Eclipse デフォルトの plugins や features があるディレクトリー)

2. eclipse.ini の最終行に以下の 2 行を追加。Xverify は Eclipse 4.4 以降で必須で、これを指定しないと
起動できなかったり、一部の機能が正常に動作しない可能性があります。
Windows 以外の場合は後述の Eclipse 起動オプション参照してください。

-Xverify:none
-javaagent:plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar

3. Pleiades スプラッシュ画像を使う場合は
eclipse.ini の -showsplash org.eclipse.platform (実際は 2 行) を削除。

最低限1と2だけ行えばEclipseが日本語化されます。

まとめ

以前Javaでプログラムをしていた頃と比べるとロゴがおしゃれになっていたり、Eclipse Marketplace が出来ていたりと色々なアップデートが加えられているようです。

Eclipseを試してみつつ、IDE探しの旅引き続き行ってまいります。



Bootstrapで作られたWEBサイトを見たまま印刷(プリントアウト)する方法

Boostrapを使って作ったサイトをPC用の表示で印刷したい!

Bootstrap利用して構築してあるWEBサイトを印刷すると、見たままの状態では印刷されず、紙媒体でも読みやすいように印刷時にレイアウト等が変更されて印刷されます。

Bootstrapデフォルト状態での印刷プレビュー

以下のURLで印刷プレビューしてもらうと、Bootstrapのデフォルトの印刷スタイルを確認出来ます。
http://onocom.net/code/bootstrap-print/default.html

これは、Bootstrapには予め印刷用のスタイルが定義されており、それが印刷時に適用されるためです。

この印刷スタイルには、

・リンクテキストの後にリンク先のURLが表示される!(ハイテク!)
・背景がすべて消える(インク代節約!)
・レイアウトがシンプルになる(タブレットやスマホ用に近い、コンテンツを読みやすいレイアウトになる!)

などなどが含まれます。
デバイスに応じて適切なスタイル(CSS)を定義すべきという素晴らしい思想だと思います。

しかし、そんなことクライアント様には関係ないようで「印刷用のスタイル?わけがわからない。安く作ってくれればいい。」「印刷すると壊れる!(印刷するとレイアウト崩れておかしくなるの意)」などありがたい意見を頂くことがあります。

印刷する環境はやはりPCなので、PC表示を印刷できるようにして欲しい。という要望です。

[Bootstrap 印刷]とかで調べると、印刷時のURLを消す方法とかはよく出てくるのですが、見たまま印刷する方法って意外と出てこないので頭を抱えておりました。

私以外にもそういうお声に頭を悩ませている方がいることを願い、今回、Bootstrapで見たまま印刷する。という方法に真っ向から立ち向かってみました。

お役に立てれば幸いです。

Bootstrapで見たまま印刷する手順

以下の手順でBootstrapサイトを見たまま印刷できるようにしていきます。

  1. Bootstrap公式サイトから印刷用スタイル(@media print)を除外したパッケージをダウンロード
  2. 印刷調整用CSSの適用
  3. 微調整

1. Bootstrap公式サイトから印刷用スタイル(@media print)を除外したパッケージをダウンロード

まずは、Boostrapから印刷用のスタイル定義情報(@media print)を削除してあげます。

目視で該当部分を削除する方法もありますが、公式サイトのカスタマイズページやSass・Lessを使った方が間違いないでしょう。

ということでここでは、Bootsrap公式サイトのカスタマイズページを利用する前提で話を進めます。

Bootstrapカスタマイズページ

Bootsrapのカスタマイズページ (Customize and download)
http://getbootstrap.com/customize/

このページはBootstrapのカラム幅や色など、多岐にわたるカスタマイズをウェブ上から簡単に行えるページです。
以下の方法で印刷用のスタイルを除外したBootstrapを取得します。

1-1:ページの最初の方にある大見出し「Less files」の中にある、中見出し「Common CSS」の中の「Print media styles」というチェックボックスのチェックを外し、一番下までスクロールします。

Print media styles - Bootstrapカスタマイズページ選択項目

1-2:ページの一番下に「Compile and Download」というボタンがあるのでクリックしてダウンロードします。

ダウンロードしたZIPファイルには印刷スタイルの含まれないBootstrapが出来上がっています!すごい簡単!

コンパイル&ダウンロード

1-3:ダウンロードしたZIPファイルの中からbootstrap.css,bootstrap.min.cssをコピーして現在のサイトで使っているBootstapファイルを上書きします。

ここまでの操作でBootstrapで構築されたサイトを印刷プレビューしてみましょう。

ステップ1が完了した時点での印刷プレビュー

以下のURLで印刷プレビューしてもらうと、このステップが完了した状態の印刷スタイルを確認出来ます。
http://onocom.net/code/bootstrap-print/step1-complete.html

当初より大分改善はされているものの、スマホやタブレットのようなレイアウトになっているかと思います。手順2でその部分を改善していきます。


蛇足ですが、ダウンロードしたZIPファイルには「config.json」というファイルが含まれています。このファイル先ほどBootstrapのカスタマイズページの上部からアップロードしてあげることでカスタマイズ情報を引き継ぐことができます。

config.jsonの使い方そのため、Bootstrapのバージョンが変わってもこのファイルをアップロードして再度Bootstrapをダウンロードすることで、印刷スタイルの定義されていないBootstrapのCSSファイルを簡単にダウンロードできるのです。


2. 印刷調整用CSSの適用

印刷用スタイルの定義されていないbootstrap.cssを利用すると印刷が見たままに多少近づきますが、レイアウトがスマホやタブレットのようになりがちです。

そこで私が特別に作った黒魔術のようなCSS(bootstrap-print.css)を以下からダウンロードしてサイトに適用してあげます。

bootstrap-print
https://github.com/onocom/bootstrap-print

するとどういうことでしょう。印刷プレビューがPC表示のままで印刷出来るようになっていませんか!?PC表示のまま印刷出来るという方はここまでで作業終了。

全ての対応が終わった時の印刷プレビュー

以下のURLで印刷プレビューしてもらうと、印刷対応が全て完了した状態の印刷スタイルを確認出来ます。
http://onocom.net/code/bootstrap-print/index.html

もし、一部印刷が上手く出来ない方は3.微調整を行っていきます。

3. 微調整

サイトによっては(と言うか殆どのサイトでは)、2の調整用のCSSを導入しただけでは細かな部分でおかしい箇所が出てくると思います。

そこは印刷調整用のCSSに追記するなどして一個ずつ潰していきましょう。

先ほどのbootstrap-print.cssに追記するか、以下の用にプリント用のCSS (@print)を作成して最終調整を行います。

bootstrap-print-adjuster.cssみたいなファイルを作成し、以下のように記述する

さぁ、これで印刷パーフェクトになったはずです!

まとめ

ここに辿り着くまでに意外と時間がかかりました(^_^;)

印刷調整用CSSはまだまだ改良の余地があると思いますので、お気づきの点などあればリクエストをお願いします。

皆様のウェブサイトが見たまま印刷出来るようになってくれることを願います!



[制作者向け] 404 NOT FOUNDページにみるレクサスのおもてなし精神、その他の自動車メーカーの404ページもまとめてみた

「404 – ページが見つかりませんでした」というページってどんなアナウンスしていますか?

リクエストしたURLにコンテンツが存在しなかった場合に表示される、404ページ。皆さんはどのように表示させていますか?

ちなみこのサイトでは、こんな感じで表示されます。(Twenty Fifteenテーマのデフォルトの表示です。)

404 NOT FOUNDページ

いやぁ、おもてなしの精神を感じませんね。私は悪くない、あなたがこのURLを開いたのが悪いんだ!お望みのページを勝手に探してくれって感じるナイスなアナウンスになっています。(言い過ぎ?!)

さて、そんななか、レクサスの404 NOT FOUNDページがシンプルながらも素敵だったので今回紹介します。レクサスを見た後に、他の自動車メーカーの404 NOT FOUNDページも気になったので勉強がてら集めて見ました。

皆様のサイト制作の参考になれば幸いです。

レクサスの404 NOT FOUNDページに感じるおもてなしの精神

さて、私が見たのはこの404 NOT FOUNDページです。

非常に簡潔ながらも、レクサスのおもてなしの精神が行き届いていて、素敵ですね。

大変申し訳ありませんが、該当ページがございません。 トップページへご案内いたします。 このページをブックマーク登録されていた方は、 お手数ですがブックマークの変更をお願いいたします。 なお、このページは5秒後に自動的にジャンプします。 ※自動的にジャンプしない場合は、上記のリンクをクリックして下さい。実際のページを見てみたい方はこちらをクリック

トップページへご案内いたします。

リダイレクトのことを「ご案内致します。」と表現するあたり、ちょっと感動しました。レクサスのショールームで対応をして頂いているような感じを受けます。

また、リダイレクトや画面遷移というようなむずかしい単語は使われず、ジャンプというイメージしやすい言葉で置換えられています。ブックマークしている方への配慮も忘れていません。

このキャプチャだとセンタリングされているように見えますが、実際は左上にコンパクトにまとめられています。これも何か意図があるのかな。

私のブログのNOT FOUNDページと比べると、その差は明らかですね。

その他の自動車メーカーの404 NOT FOUNDページ

レクサス以外の404ページも気になったので集めてみました。各社様々なスタイルで「ページが見つかりませんでした」と伝えてくれています。

※ 一部キャプチャは縦長になりすぎたためトリミングしております。リンク先は各社のトップページにしてありますので、各自でNOT FOUNDページを探してみてくださいませ。

トヨタ自動車

まずはトヨタ。レクサスとほぼ同じ構成でした。シンプルかつ自動リダイレクト。

https://toyota.jp/

トヨタ自動車のNOT FOUNDページ

スズキ

ももクロちゃんがCMをしているハスラーがバカ売れのスズキです。意外とシンプルな感じの作りになっています。

「スズキのサイトでなにかお探しですか?」という文言に言葉にできない違和感を感じるのは私だけでしょうかね。

http://www.suzuki.co.jp/

スズキのNOT FOUNDページ

スバル

スバルのNOT FOUNDページは、メッセージの下にサイトマップやキャンペーン情報を表示しています。

トップページやサイトマップに移動して別のページを探すよりもこの方が機能的だし私は好きでした。

https://www.subaru.jp/

スバルのNOT FOUNDページ

日産自動車

theシンプル。メッセージを表示して5秒後にページ遷移する作りでした。

5秒しか滞在できないし、長い文章は読んで貰えなそうですし。リダイレクトするといいう前提で考えるとこれは有りかと思いました。

http://www.nissan.co.jp/

日産自動車のNOT FOUNDページ

光岡自動車

WordPress で作られているようで、404 File Not Foundと表示されるのはSEO系プラグインか何かの影響かな?と関係ないことを考えてしまいました。

サイトマップへとサイトのトップへと2つのリンクがありますが、ページを探すならサイトマップを見てもらったほうが早いし、2つあると迷いそうだなぁと個人的には思いました。

http://www.mitsuoka-motor.com/

光岡のNOT FOUNDページ

三菱自動車

英語との併記!これは多言語サイトのせいなのか、日本に済む外国人への配慮なのか、少し気になるところです。

シンプルかつリダイレクトでトップページへ行きます。レクサスやトヨタと似たような作りですね。

http://www.mitsubishi-motors.co.jp/

三菱自動車のNOT FOUNDページ

マツダ

シンプルな作りです。リダイレクトはされませんが、上下にグローバルナビゲーションやフッターナビゲーションがあるので迷うことはなさそうです。

「引き続きマツダオフィシャルサイトでの快適なドライブをお楽しみください。」といメッセージが添えられているあたり、マツダらしいですね。

http://www.mazda.co.jp/

マツダのNOT FOUNDページ

ホンダ

一番驚いたのはホンダのサイトでした。

スバルと同じくお知らせや簡単なサイトマップがあるのですが、更にその下には「問題点についてお知らせ下さい」という見出しとともに、フォームが表示されています!こんなNOT FOUNDページはじめて見た!

ホンダのモノづくりに対する精神というものを感じるNOT FOUNDページになっています。

http://www.honda.co.jp/

ホンダのNOT FOUNDページ

ダイハツ

よく見る404ページですね。

「前のページに戻る」ボタンをクリックするとJavaScriptでひとつ前のページに戻る作りになっています。こういうのって検索エンジンから直で来たときって検索エンジンに戻っちゃうので悩みどころですよね。

https://www.daihatsu.co.jp/

ダイハツのNOT FOUNDページ

外国車の自動車メーカー

MINI

ミニはビジュアルでNOT FOUNDを表現している感じでしょうか。

  1. NOT FOUND.という文言を見なければ、パット見、あまり404ページぽくないですね。

https://www.mini.jp

MINIのNOT FOUNDページ

メルセデスベンツ

(!)という表示に見る側が驚きそうですが、ベンツのNOT FOUNDページは画像もなく割りとシンプル。トップページに戻らずに各種リンクを案内しています。

http://www.mercedes-benz.co.jp/

メルセデスベンツのNOT FOUNDページ

BMW

アドレスの入力が誤っている可能性があります。という断定にBMWらしさを感じますね。ヘッダー・フッターからページを見つけてもらえる作りになっています。

http://www.bmw.co.jp/

BMWのNOT FOUNDページ

テスラ

Drupalで作られているサイトのようです。ザ・海外って感じがします。

ページが見つからなかったことと共に、シンプルなナビゲーションが記載されています。

https://www.tesla.com/jp/

テスラのNOT FOUNDページ

まとめ

いかがでしたでしょうか?

お客様の欲しい情報を提供できなかった時、自動車メーカーはどういった応対をするのか。

NOT FOUNDページひとつですが、こうやって見てみると、各社の色が出てますね。

個人的にはスバルやホンダのような機能的な404 NOT FOUNDページが好きです。

特にホンダの「問題点を教えて下さい」っていう姿勢は、本田宗一郎の精神が根付いているように感じました。