What's New Qiita

20201014のMacに関する記事は6件です。

  • 投稿日：2020-10-14T23:52:47+09:00

DockerでWordPressの開発環境をサクッと構築する

TL;DR

https://github.com/qpSHiNqp/docker-wordpress-dev

これcloneして docker-compose up すると、一瞬でWordPress環境立ち上がるよ

目次

  1. dockerでWordPress環境を構築するまで
  2. テーマ作るときに、コンテンツ部分に適用されるスタイルをよしなにいい感じにする（ついでに書いてるだけ）

dockerでWordPress環境を構築するまで

経緯

たまたまちょいとWordPressいじる必要が生じた。開発環境を整えるために今までは、ローカルにMySQLサーバ立てて、DB作って、ユーザーと権限周り作って整えて、PHP環境作って、Webサーバ環境作って、繋いで、動作確認して... っていういわゆるMAMP的なのを頑張ってやってたんですが、今どきそんなこと普通しないだろ、ということでdockerで環境構築すべく、ちょっと調べた。

構築方法

調べたところ、wordpress っていうdocker imageもあるし、当然のことながら mysql もdocker imageあるので、 docker-compose.yml いい感じに作ればいじゃんという話になり、作った。

作り方についても、 wordpress のDocker HubのDescriptionに丁寧に書いてあったので、参考情報として記載しておく。
ページ中頃の、「... via docker stack deploy or docker-compose」というセクションほぼそのまんま。

今回はテーマとかプラグインを作りたかったので、wp-content/themesとwp-content/pluginsをマウントするようにdocker-compose.ymlを作成。
※最新のものはGitHubを参照してください。

version: '3.1'

services:

  wordpress:
    image: wordpress
    restart: always
    ports:
      - 8080:80
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: exampleuser
      WORDPRESS_DB_PASSWORD: examplepass
      WORDPRESS_DB_NAME: exampledb
    volumes:
      - wordpress:/var/www/html
      - ./wp-content/themes:/var/www/html/wp-content/themes
      - ./wp-content/plugins:/var/www/html/wp-content/plugins

  db:
    image: mysql:5.7
    restart: always
    environment:
      MYSQL_DATABASE: exampledb
      MYSQL_USER: exampleuser
      MYSQL_PASSWORD: examplepass
      MYSQL_RANDOM_ROOT_PASSWORD: '1'
    volumes:
      - db:/var/lib/mysql

volumes:
  wordpress:
  db:

これで、 docker-compose up して http://localhost:8080 開くともうすぐに WordPressのセットアップ画面が開くので、そのまま進めば管理画面にいける。

テーマ作るときに、コンテンツ部分に適用されるスタイルをよしなにいい感じにする（ついでに書いてるだけ）

ここから先、本当についでに書いただけなので、自分の備忘録程度にしか使えないと思います。

自作テーマ作るときに、レイアウトとか、見た目とかをstyle.cssで制御すると思うんだけど、WordPressってWYSIWYGエディタを備えたCMSなので、コンテンツ部分のレイアウトはWordPress備え付けのものを生かしてあげる必要がある。

備え付けのstyleは、CSS « WordPress Codexの「WordPress Generated Classes」セクションに書いてあるもの。これを自作テーマの最下部にコピペしてあげることで、WYSIWYGで編集時に指定したレイアウトを実際の表示に反映することができた。

当初、自作style.cssで定義したスタイルがコンテンツ部分の要素にまで適用されていたことでWYSIWYGと見た目がずれてしまうという問題が発生してしまっていたが、おそらく下記のようにマークアップの責任分界をするとだいたい上手くいくような気がする。

  • テンプレ/テーマ側では、コンテンツをwrapするブロック要素のレイアウトだけHTML+CSSで制御してあげて、 <?php the_content(); ?> とかで埋め込むコンテンツ本体のレイアウトに影響しないようなstyle.cssにしてあげる
  • <h1>（か、若しくは<h2>）が投稿タイトルの表示を担当するなら、これはテンプレ側で表示を制御してあげたほうがいい
  • 文字色とかフォントとか、レイアウト以外の見た目に関するスタイルは style.css で定義して、コンテンツにも適用させるようにつくる（厳密に言うとフォントが違うとレイアウトも違ってくるとも言えるけど）

要は、WordPressのWYSIWYGが吐くHTMLなんて予想不可能なので、コンテンツ本文のブロックレイアウティングを自作cssで制御するのはたぶん無理。むしろテーマ作る側は、コンテンツ本文のブロックレイアウティングを制御せず放任してあげるようなクラス/セレクタ設計が必要な気がします。

カラーパレット機能とかサポートするように作っても良かったが、今回はそんなにWordPressの機能をフルサポートするような汎用的なテーマを作る必要がなかったので、最小限の機能サポートだけで実装した。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-14T22:47:47+09:00

JXA + Spotify + Macでワンクリックでアプリの起動＋好きな曲を再生する

JXAとは

これです。
知らないうちにMacがシステム標準でJavaScriptで操作できるようになってた (JXA)

練習がてらSpotifyを起動して好きな曲を再生するアプリを作ってみます。

STEP1. スクリプトエディタを起動、新規書類をjavascriptモードで開く

STEP2. コードを書く

追記：はじめにシャッフルを有効にして、通知センターを使って曲名も表示することにしてみました。
私はURIに My Library > お気に入りの曲 を指定しています。

参考: 

var spotify = Application("Spotify")
var target = "流したい曲/アルバム/アーティスト/プレイリストのURI"

// シャッフルを有効にする
if(spotify.shuffling() == false){
    const shuffleMenu = Application("System Events").applicationProcesses.byName("Spotify").menuBars.at(0).menuBarItems.byName("曲の再生").menus.byName("曲の再生").menuItems.byName("シャッフル")
    shuffleMenu.click()
}

spotify.playTrack(target)

// 現在の曲のtrackを取得
var current = spotify.currentTrack
delay(0.1)

//通知を表示
var app = Application.currentApplication()
app.includeStandardAdditions = true
app.displayNotification(current.artist() , {
    withTitle: current.name(),
    subtitle: current.album(),
    soundName: 'Pop'
})

STEP3. 流したい曲/アルバム/アーティスト/プレイリストのURIを調べる

URIとはSpotifyの中での住所的なやつです。
調べる方法は次の2つ。

1. ブラウザ版SpotifyのURLを見る

アルバムやプレイリストを開くと
https://open.spotify.com/album/4RlqowFUNcZR7UTUinXZlT
（アルバム「かつて天才だった俺たちへ」 by Creepy Nuts）
のように https://open.spotify.com/ + 〇〇 という形式になっていると思います。
この〇〇はURIに対応しているので

var target = "spotify:album:4RlqowFUNcZR7UTUinXZlT"

のように書けばOKです。

2. Spotify APIを使って調べる

1の方法だとアルバム/アーティスト/プレイリストのURIは分かるのですが個別の曲のURIの調べ方がいまいち分かりませんでした。（追記：「曲のリンクをコピー」という機能から普通に調べられました。。）そこでAPIを使ってダイレクトに調べます。

参考: Spotify APIで遊んでみる

1の方法でアルバムのURIが既に分かっている時は、簡単に曲のURIを検索できます。

import pprint

import spotipy
from spotipy.oauth2 import SpotifyClientCredentials

client_id = 'xxxxxxxxxxxxxx'
client_secret = 'xxxxxxxxxxxxxx'
client_credentials_manager = spotipy.oauth2.SpotifyClientCredentials(
    client_id, client_secret)
spotify = spotipy.Spotify(
    client_credentials_manager=client_credentials_manager)

results = spotify.album('アルバムのURI（英数字部分）')
# 例えば、results = spotify.album('4RlqowFUNcZR7UTUinXZlT')
results = results['tracks']['items']

pprint.pprint(results)

これで、下のように曲ごとの詳細情報が一覧表示されるので、その中のuriの項目を使えばOKです。

~~省略 ~~~
'name': 'かつて天才だった俺たちへ',
'preview_url': 'https://p.scdn.co/mp3-preview/037b28ab2dbdc68efb5b6a85398645a16a010f60?cid=67c1745df8724b52918df69aab8ff0bd',
'track_number': 7,
'type': 'track',
'uri': 'spotify:track:4qjpey2aljl28C40NmTcgQ'
~~省略 ~~~

STEP4. アプリの作成

スクリプトエディタに戻って、ファイル > 書き出す より、フォーマットでアプリケーションを選んで保存します。

アイコンを変えてDockに追加すれば、ワンクリックで曲の再生までやってくれるアプリができました。
image.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-14T22:31:27+09:00

Mac 環境構築メモ

MacBookProを購入した際に開発環境構築を行ったのでそのメモ。

3本指ドラッグ

https://support.apple.com/ja-jp/HT204609

デフォルトのシェルをzshからbashに変更

bashに慣れているため変更する。

https://qiita.com/___xxx_/items/c9a30e78196998f4160c

brewインストール

とりあえずインストール
https://brew.sh/index_ja

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

bashのアップデート

Macのbashはバージョンが古いみたいなのでアップデート
https://qiita.com/zaburo/items/1b990436ca45545959e9
→5.x系にアップデートされた

$ bash --version
GNU bash, バージョン 5.0.18(1)-release (x86_64-apple-darwin19.5.0)
Copyright (C) 2019 Free Software Foundation, Inc.

Vim設定

とりあえず最低限の設定だけ行う

~/.vimrc
syntax enable
colorscheme desert

Gitのアップデート

MacのGitは少し古いみたいなのでアップデート
https://qiita.com/normalsalt/items/f200ba50363ebfd46df0
→v2.28.0にアップデート

$ git --version
git version 2.28.0

ターミナルを見やすく&Gitのブランチを表示

https://qiita.com/hmmrjn/items/15d0fe15e5d03586ad46

VSCodeのターミナルも文字化けするので下記設定が必要

{
    "terminal.integrated.fontFamily": "Menlo for Powerline"
}

Docker Desktop for Macのインストール

https://hub.docker.com/editions/community/docker-ce-desktop-mac/

anyenvのインストール

https://anyenv.github.io/

brew install anyenv
~/.bash_profile
# 追記
eval "$(anyenv init -)"

source .bash_profile
anyenv install --init
mkdir -p $(anyenv root)/plugins
git clone https://github.com/znz/anyenv-update.git $(anyenv root)/plugins/anyenv-update

nodenvのインストール

anyenv install nodenv
exec $SHELL -l
nodenv --version

pyenvのインストール

anyenv install pyenv
exec $SHELL -l
pyenv --version

# Pythonインストール
pyenv install <バージョン>
pyenv global <バージョン>

goenvのインストール

anyenv install goenv
exec $SHELL -l
goenv --version
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-14T15:23:07+09:00

環境変数 $PATHの優先順位

はじめに

普段何気に使用していた
各コマンドが探しに行く設定パスには優先順位があることを知ったのでメモ

環境変数 $PATH

自分のPCのホームディレクトで（~/）

shiga1@MacBookPro ~ % echo $PATH　←を実行すると
/opt/local/bin:/opt/local/sbin:/Applications/XAMPP/xamppfiles/bin:/usr/local/opt/php@7.2/sbin:/usr/local/opt/php@7.2/bin:/usr/local/opt/mysql-client/bin:/usr/local/opt/mysql@5.7/bin:/usr/local/sbin:/Library/Frameworks/Python.framework/Versions/3.8/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin:/Library/Apple/usr/bin

コマンドを実行した時にどこを参照にしているのかが分かる。
ここまでは、以前から理解していたが優先順位があるのは、知らなかった。

調べたところ、優先順位は左から順と分かった。（パスは「：」区切り）

これを調べた経緯

諸事情あって、which php コマンドをよく使っていた時、
ホームディレクトと、XAMPP内で実行した時の結果が違うことに違和感を感じたから。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-14T10:54:31+09:00

MacにPython開発環境をインストールする

Windowsへのインストール方法はこちら

最終更新日

2020年10月14日

検証を行ったmacOSのバージョンは下記です。

  • macOS Catalina 10.15.7

インストールするもののバージョンは下記です。

  • anyenv 1.1.2
  • pyenv 1.2.21
  • Python 3.9.0
  • PyCharm Community Edition 2020.2

この記事が古くなった場合、下記の手順は最新のインストール手順とは異なっている可能性があります。

事前にインストールが必要なもの

  • Xcode
  • Xcode Command Line Tools
    • Xcodeインストール後、ターミナルで xcode-select --install を実行
  • Homebrew

anyenv

インストール

(1) ターミナルで brew install anyenv を実行してください。

$ brew install anyenv
Updating Homebrew...
==> Auto-updated Homebrew!
Updated 1 tap (homebrew/cask).
==> Updated Casks
skype

==> Downloading https://homebrew.bintray.com/bottles/anyenv-1.1.2.catalina.bottl
Already downloaded: /Users/tada/Library/Caches/Homebrew/downloads/7d50622dafb1cbbc172af5158125cd4e6d137d7c05615a6e90739ffda9204241--anyenv-1.1.2.catalina.bottle.tar.gz
==> Pouring anyenv-1.1.2.catalina.bottle.tar.gz
?  /usr/local/Cellar/anyenv/1.1.2: 23 files, 29.9KB

(2) anyenv init を実行してください。

$ anyenv init
# Load anyenv automatically by adding
# the following to ~/.zshrc:

eval "$(anyenv init -)"

(3) ~/.zshrcに下記の記述を追記してください。

eval "$(anyenv init -)"

~/.zshrcを直接編集してもいいですし、 echo 'eval "$(anyenv init -)"' >> ~/.zshrc を実行してもOKです。

(4) source ~/.zshrc を実行、またはターミナルを再起動してください。

$ source ~/.zshrc

これは任意ですが、 anyenv update のインストールもおすすめします。詳細はGitHubを確認してください。

確認

(1) anyenv install -l を実行して、下記のように表示されれば成功です。

$ anyenv install -l
  Renv
  crenv
  denv
  erlenv
  exenv
  goenv
  hsenv
  jenv
  jlenv
  luaenv
  nodenv
  phpenv
  plenv
  pyenv
  rbenv
  sbtenv
  scalaenv
  swiftenv
  tfenv

pyenv

インストール

(1) anyenv install pyenv を実行してください。

$ anyenv install pyenv
/var/folders/fy/48r10wdn7mx2629zngd9zsnh0000gn/T/pyenv.20201014093919.65856 ~
Cloning https://github.com/pyenv/pyenv.git master to pyenv...
Cloning into 'pyenv'...
remote: Enumerating objects: 19, done.
remote: Counting objects: 100% (19/19), done.
remote: Compressing objects: 100% (16/16), done.
remote: Total 18370 (delta 3), reused 10 (delta 2), pack-reused 18351
Receiving objects: 100% (18370/18370), 3.70 MiB | 2.36 MiB/s, done.
Resolving deltas: 100% (12507/12507), done.
~

Install pyenv succeeded!
Please reload your profile (exec $SHELL -l) or open a new session.

(2) ターミナルを再起動してください。

確認

(1) pyenv install -l を実行してください。下記のように表示されれば成功です。

$ pyenv install -l
Available versions:
  2.1.3
  (中略)
  3.9.0
  (中略)
  stackless-3.7.5

Python

インストール

(1) pyenv install 3.9.0 を実行してください。

$ pyenv install 3.9.0
python-build: use openssl@1.1 from homebrew
python-build: use readline from homebrew
Downloading Python-3.9.0.tar.xz...
-> https://www.python.org/ftp/python/3.9.0/Python-3.9.0.tar.xz
Installing Python-3.9.0...
python-build: use readline from homebrew
python-build: use zlib from xcode sdk
Installed Python-3.9.0 to /Users/tada/.anyenv/envs/pyenv/versions/3.9.0

(2) pyenv versions を実行してください。Python 3.9.0がインストールされたことが確認できます。

$ pyenv versions
* system (set by /Users/tada/.anyenv/envs/pyenv/version)
  3.9.0

(3) pyenv global 3.9.0 を実行してください。

$ pyenv global 3.9.0

(4) ターミナルを再起動してください。

確認

(1) python --version を実行してください。 Python 3.9.0 と表示されれば成功です。

$ python --version
Python 3.9.0

PyCharm

インストール

(1) https://www.jetbrains.com/ja-jp/pycharm/download/ にアクセスしてください。

(2) [コミュニティ]の[ダウンロード]ボタンをクリックしてください。
スクリーンショット 2020-10-14 10.53.37.png

(3) ダウンロードしたDMGファイルをダブルクリックしてください。

(4) [PyCharm CE.app]を[Applications]にドラッグしてください。
スクリーンショット 2020-10-14 10.28.16.png

起動と初期設定

(1) /ApplicationsフォルダにあるPyCharm CE.appを起動してください。下記のダイアログが表示されたら[開く]をクリックしてください。
スクリーンショット 2020-10-14 10.31.11.png

(2) [Do not import settings]を選択して、[OK]をクリックしてください。
スクリーンショット 2020-10-14 10.37.39.png

(3) [I've never used PyCharm]を選択して、[Next: UI Theme]を
スクリーンショット 2020-10-14 10.38.23.png

(4) [Darcula]・[Light]のどちらか好みのテーマを選択して、[Next: Launcher Script]をクリックしてください。
スクリーンショット 2020-10-14 10.40.17.png

(5) コマンド（ charm ）でPyCharmを起動したい場合は、[Create a script for opening files and projects from the command line]にチェック。そうでない場合は何もせずに、[Next: Feature plugins]をクリックしてください。
スクリーンショット 2020-10-14 10.40.37.png

(6) そのまま[Start using PyCharm]をクリックしてください。
スクリーンショット 2020-10-14 10.44.55.png

Pythonインタープリターの設定

(1) [Configure]-[Preferences]をクリックしてください。
スクリーンショット 2020-10-14 10.46.05.png

(2) 画面左のメニューから[Python Interpreter]を選択→画面右端の歯車アイコンをクリック→[Add...]をクリックしてください。
スクリーンショット 2020-10-14 10.46.37.png

(3) 画面左のメニューから[System Interpreter]を選択→画面右側の[...]をクリックして「/Users/ユーザー名/.anyenv/envs/pyenv/versions/3.9.0/bin/python」を選択して[OK]→[OK]をクリックしてください。
![スクリーンショット 2020-10-14 10.48.20.png

(4) [OK]をクリックしてください。

PyCharmを好みに設定する（ここの手順は必須ではありません）

こちらの記事を参考にしてください。

IntelliJ IDEA（Java用IDE）の設定の説明ですが、PyCharmでも同様です。

PyCharmでHello World

(1) [New Project]をクリックしてください。
スクリーンショット 2020-10-14 10.50.28.png

(2) [Location]に適当なパスを入力→[Existing interpreter]を選択→[Create a main.py welcome script]にチェックを入れて、[Create]をクリックしてください。
スクリーンショット 2020-10-14 10.51.34.png

(3) [Don't show tips]にチェックを入れて、[Close]をクリックしてください。
スクリーンショット 2020-10-14 10.52.00.png

(4) main.py内で右クリックして、[Run 'main']をクリックしてください。

(5) [Hi, PyCharm]と表示されれば成功です。
スクリーンショット 2020-10-14 10.53.00.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-14T03:08:44+09:00

DMiMEを導入してみる。

経緯

知り合いの医学生が医薬用語の変換がメンドイらしく、
DMimeという変換辞書をMacにいれるお手伝いをすることになりました。

注意

これはmac用の設定方法です。

準備

  1. ダウンロードページでDMiME-1.1-mac.zipをダウンロードします。 （最新バージョンはこちらのページより確認できます。）
  2. ダウンロードしたDMiME-1.1-mac.zipをダブルクリックすることで解凍し、DMiME-1.1-macフォルダを取り出します。(この中の「DMiME-1.1-mac.txt」を利用します。)

導入方法

  1. 本体画面右上の文字のアイコン（バッテリーアイコンの左にあります。）をクリックし、1番下にある「”日本語”環境設定を開く」をクリックします。
  2. キーボード設定画面が開かれるかと思うので、そこで「入力ソース」を選択します。
  3. 一番下にスクロールし、準備ステップで用意した「DMiME-1.1-mac.txt」を「追加辞書」の欄にドラッグアンドドロップします。
  4. 完了

参考

DMiMEのインストールから使い方解説｜医学用語変換辞書のその2の手法

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧