macOSをアップデートしたらgitコマンドでエラー「xcrun: error: invalid active developer path」が発生した時の対応方法

git コマンドで突如エラー

macOSをMontereyにアップデートしたらこんなエラー( xcrun: error: invalid active developer path )が出てなぜか動かない。

macにコマンドライン開発者ツールをインストールして解決

どうやらコマンドライン開発者ツールを入れてあげればいいようなので、ターミナルから以下のコマンドを実行。

ウィンドウが立ち上がるのでYesマンになってインストール。

以下のような画面が出てきたらOK

xcode-select --install

この後 git コマンドを実行してみる。

ちゃんと表示された!

一件落着。

 



[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最高でした!