【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ボタンをクリック

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

まとめ

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

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



DreamweaverでSass(Compass)を利用する方法

Adobe DreamweaverでSass・Compassを利用する方法の備忘録です。

Gulp・Grunt等でやる方法がありますが、コマンドプロンプト(通称:黒い画面)はちょっと敷居が高いと思われる方も多いと思うので、Adobeユーザーなら大抵入っているDreamweaverの設定方法をお伝えします。

Dreamweaverを利用してWordPressでサイト構築(テーマ開発)することを想定していますが、他のサイト制作でも同様の設定で多分利用できます。

試行錯誤の結果とりあえず動いたという設定方法をご紹介しておりますので、正統なやり方では無いかもしれません。その点ご容赦ください。

2018年2月2日追記

文字コードの関係でエラーになる場合があったため、config.rb、config_prod.rbに以下の一文を追加しました。

Encoding.default_external = “UTF-8”

今回想定するDreamweaverのサイト設定

Dreamweaverのサイト設定が以下のように行われている前提で説明を行います。

今回のサイト設定・構造

Dreamweaverのサイト設定

  • サイト直下にwp-content , wp-admin, wp-includes等のファイルがある。
  • テーマディレクトリを「THEME_NAME」としてテーマを作り込もうとしていることを想定しています(この部分を適宜ご自身の環境に合わせて以降読み替えてください)。

空のディレクトリを作成しよう

以下のように、/wp-content/themes/THEME_NAME/ディレクトリに空のディレクトリを作成します。

Compass用の空ディレクトリの作成

scss ディレクトリ

このディレクトリにSassファイルを配置していきます。

css, css/min ディレクトリ

sassディレクトリに配置されたSassファイルがコンパイルされ、生成されたCSSファイルが配置されます(css/minにはminifyされたCSSが配置されます)

fonts, images, js ディレクトリ

とりあえず作ります。Compassが画像等を出力する時に使用するようですが正直よく分かりません(笑)

configファイルを配置しよう

以下Gist からconfig.rbとconfig_prod.rbをダウンロードしてきてテーマディレクトリ直下に配置します。

Gist:Dreamweaverでcompassを動作させようとした時のconfig.rb

https://gist.github.com/onocom/29259b091fdea04e159506bcba6d89ff

config.rb

これはMinifyしない為のコンフィグファイル。このコンフィグが実行されると、最後にMinify用のコンフィグが実行される。

THEME_NAMEディレクトリは適宜書き換えてください。

config_prod.rb

Minify(圧縮)用のコンフィグ。

なお、output_styleを変更することで様々な出力を選べる。

  • :expanded ・・・ 通常のCSS出力
  • :nested ・・・ ネストされたCSS出力
  • :compact ・・・  コンパクトなCSS出力
  • :compressed ・・・ Minifyされた最も小さいCSS出力

また、sourcemap の設定は.mapファイルを生成するかどうかの指定。
line_comments の設定は、コメントを出力するかしないかの指定になります。

THEME_NAME ディレクトリは適宜書き換えてください。

テーマディレクトリ直下に配置

上記ファイルを配置するとこんな感じ。

config.rb/config_prod.rbを配置

サイト設定でCompassを有効化しよう

サイト設定を開く

Dreamweaverメニュー → サイト(S) → サイトの管理(M)から該当のサイトをダブルクリックして以下の画面を立ち上げます。

サイト設定

CSSプリプロセッサー - 一般設定

以下のように設定しておきました。

Sassの設定

ファイルの保存時に自動コンパイルを有効にする

をチェック入れとくと勝手にコンパイルしてくれるようです。その他のOutput file Styleやソースマップを生成、ソースコメントを作成などはconfigで設定してあるので無視して良さそう。

Compassの設定をしよう

Compassの設定

Compassの設定項目で、

Compassを使用する

にチェックし、

Rubyベースの構成ファイルを指定で先ほど配置したconfig.rbファイルを指定します。

これが出来たら保存をします。

コンパイルされるか確かめてみよう

Sassファイル(SCSSファイル)を保存するとコンパイルされる

Sass・Compassの設定がちゃんと動作するか確かめて見ましょう。

scssディレクトリ内に、適当なscssファイル(ここではmain.scss)を作成し、保存します。

数秒待つと

/~~~/main.scss は CSSに正常にコンパイルされました: /~~~/main.css

とうメッセージが「出力」ウィンドウに出力され、以下のファイルが自動的に作成されました。

THEME_NAME/css/main.css
THEME_NAME/css/min/main.css

やったー!出来た!

まとめ

設定さえしてしまえば、DreamweaverでもSassが使えるので大変便利ですね。

黒いウインドウ怖いといって敬遠していたかた、ぜひご活用ください。

config.rb の設定方法でもっと良いやり方があれば教えてください。