20191130のMacに関する記事は4件です。

PythonのTkinterを8.6にアップデートする方法

概要

PythonでTkinterモジュールを使用していると、ボタンの文字が表示されないという現象が発生した。調べてみたところ、それはどうやらTkinter8.5のバグらしい。
このバグはTkinterをアップデートすることで治るが、現状だとTkinterを公式にアップデートする方法はない。
いくつかのサイトがTkinterのアップデート方法を紹介しており、その方法はPythonを再インストールするというものだった。だが、私の環境ではそれでもTkinterをアップデートすることはできなかった。

しかし、海外の有志が作成したプログラムを使うことでTkinterを8.6にアップデートすることができたのでここで紹介する。

環境

MacOS Mojave 10.14.6

1. Xcodeのコマンドラインツールをインストール

Xcodeがインストールされていなければ、Xcodeのコマンドラインツールをインストールする。

$ xcode-select --install

2. homebrewを最新バージョンにアップデートする

$ brew update

3. PythonとTkinterをアンインストールする

homebrew、pyenvなど、インストールしているパッケージからPythonとTkinterを全てアンインストールする。

Pythonのアンインストール

$ brew uninstall python
$ pyenv uninstall x.x.x

→ xはバージョン番号。

Tkinterのアンインストール

$ brew uninstall tcl-tk

不要なキャッシュを削除

$ brew cleanup

4. プログラムをダウンロードする

MacOS homebrew python 3.7.4 with tcl-tk (properly)

上記サイトから、「python-with-tcl.rb」をダウンロードする。

5. ファイルを置き換える

/usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/Formula/python.rb
を削除、または別の場所に置く。

ダウンロードした「python-with-tcl.rb」の名前を「python.rb」に変更し、
/usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/Formula/
に置く。

6. Pythonをインストール

下記のコマンドを使用し、Pythonをインストールする。

$ HOMEBREW_NO_AUTO_UPDATE=1 brew install --build-from-source python

7. Tkinterのバージョンを確認

$ python -c "import tkinter;print(tkinter.TkVersion)"

8.6になっているはずだ。

参考URL

brew cleanupでMacを掃除してストレージ容量を確保する方法
MacOS homebrew python 3.7.4 with tcl-tk (properly)
Macのtkinter8.5でpngをまともに表示できない→PyenvのPython再インストールでtcl-tkをバージョンアップした

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

Macユーザーが矢印キーを使うのはダサい

はじめに

タイトルの通りです.長年,テキストエディタとしてemacsを愛用していた(今はVSCodeと併用)こともあって,矢印キーは取り外したいくらい嫌いです.
しかしながら,最近はVSCodeを使う機会が多くなり,こっそりと矢印キーを使っている自分がいるので,その自分への戒めという意味も込めてこの記事を書きました.

Macなら矢印キーなしでも生きていけますよ!

矢印キーとマウスのイケてないところ

僕は矢印キーの他にマウスも嫌いです.ただ,マウスは使わないとさすがに不便なので使います.
では矢印キーとマウスの何が嫌いかというと

ホームポジションから手が離れる

これだけです.
「たったそれだけ⁉️」と思うのも無理はありません.僕もemacsを使い慣れるまでは、ホームポジションから手が離れることの悪さがこれっぽちも理解できませんでした.

矢印キーとマウスを使うときの自分の指をよく観察してみてください.矢印キーはギリギリ,ホームポジションを崩さず操作できるかもしれませんが,一度ホームポジションを崩すと,もう一回キーボードの方を見て,ホームポジションに指を置き直していませんか?

そう,この時間がダメなんです.

たかだか,1秒くらいかもしれません.でも,このロスタイムを1日何回しているでしょうか?20回だとすると20秒,1年で7300秒,約2時間です.
1年で2時間もホームポジションを直すのに使っているんですよ!これはもったいなくないですか?

このロスタイムをなくしたテキストエディタがemacsとvimです.sshでサーバにログインしてファイルを編集する際は,emacsかvimのどちらかを使っているのではないでしょうか.
CUIベースなので,矢印キーやマウスを一切使わずコードを書いていくことができます.ただし,フレームワークで開発したりするときはファイル構成やメソッドなどを確認しづらいので,僕はVSCodeを使っています.

有難いことに,Macには標準でemacsのキーバインドの多くがサポートされているので,これを覚えておけばどんな操作をするときも矢印キーを使わなくて済み,なおかつ,前より少しスピードアップできると思います.

矢印キーを使わない極意

上下左右の移動

矢印キーを使うときに多いのが,上下左右の移動ではないでしょうか?
これは以下のキーバインドで操作可能です.

動作 キーバインド 意味
右へ移動 Ctrl+f foreground
左へ移動 Ctrl+b background
上へ移動 Ctrl+p previous
下へ移動 Ctrl+n next

Ctrl+fというのはcontrolボタンを押下した状態で,キーボードのfも押下すると言う意味です.意味と一緒だと覚えやすいです.
これはGoogleクロームやターミナルあるいはiTermなどでも操作が可能となっております.
なお,ターミナルあるいはiTermで上下の矢印キーを操作すると,一つ前で入力したキーバインドが表示されます.これもCtrl+pCtrl+nで代用することができます.

もう矢印キー使わなくて済みますよね?

他に覚えておいた方がいいキーバインド

動作 キーバインド 意味
行頭へ Ctrl+a ahead
行末へ Ctrl+e end
カーソルの一文字後ろを削除 Ctrl+d delete
カーソルより後ろの行を切り取り Ctrl+k kill-ring

なお,Ctrl+kで切り取った文字列はクリップボードの仕組みとは異なるので,Ctrl+vで貼り付けをすることはできません.
これを覚えればマウスでの操作も少し減少するのではないでしょうか?

キーバインドが覚えれない?

心配しなくてもそう簡単に覚えられません.
矢印キーとマウスは初めて操作する人でも直感的に触ることができます(だから皆矢印キーを使う).ただし,スピードアップには限界があります.
逆に上で列挙した8つのキーバインドは最初は使いにくいし,慣れるまである程度時間はかかりますが,その壁を乗り越えたら非常に速いです.

ちなみ僕の場合は,大学の指導教官が矢印キーをちょっとでも使っているとブチギレする人だったので,嫌でも覚えることができました.

emacsではもっと覚えなければいけないキーバインドがあるので(自分でも増やすことができるし),短時間で身につけようとすると挫折すると思います.なので,vimやemacsを習得するまでは学習コストがある程度必要であることを心に刻んでおきましょう(最近はvim使っている人しか見ないけど).

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

docker 19 + nginx 1.17.6 + PHP 7.4の環境構築

docker 19 + nginx 1.17.6 + PHP(PHP-FPM) 7.4の環境構築

環境情報

2019/11/30 時点

  • MacOS X 10.15.1(19B88)
  • Docker 19.03.5
  • nginx 1.17.6
  • php-fpm 7.4.0

事前準備

Mac用のdocker-for-macをインストールする必要があります。
インストールする際、Docker Hubのアカウントが必要になりますので、事前にDocker Hubへのアカウント登録を済ませておいてください。

https://docs.docker.com/docker-for-mac/install/

$ docker --version
Docker version 19.03.5, build 633a0ea

環境構築

基本的にはdocker-composeを使って環境構築を進めていきます。

nginxの構築

以下のディレクトリ構成を前提に環境構築を進めていきます。

.
├── docker-compose.yml
├── php-docker.md
└── web
    ├── conf
    │   └── default.conf
    └── src
        └── index.html

default.confファイルの内容は下記の通りです。

server {
  listen 80;
  server_name 127.0.0.1;

  #ドキュメントルートの設定
  root  /var/www/;
  index index.html index.htm;

  access_log /var/log/nginx/access.log;
  error_log  /var/log/nginx/error.log;
}

index.htmlファイルの内容は下記の通りです。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ようこそDocker</title>
</head>

<body>
  <h1>ようこそDocker!</h1>
</body>
</html>

docker-compose.ymlファイルの内容は下記の通りです。

version: '3'
services:
  web:
    image: nginx:latest
    ports:
      - "8000:80"
    volumes:
      - ./web/conf/default.conf:/etc/nginx/conf.d/default.conf
      - ./web/src:/var/www/
  • version
    • Docker 19.03.5に対応しているdocker-composeのファイルフォーマットは3.7なので、yamlのversionには3を指定する。
    • 対応バージョンの確認はこちらから確認してください。
  • services -> web は、任意の名前をつけられます。今回はnginxをWebサーバーとして利用する環境構築となり、わかりやすい名称としてwebと定義しています。
  • services -> web -> image に設定している nginx:latest は、docker hubのnginxでどのバージョンに対応しているかなどが確認できます。
    • ここではlatestとしていますが、1.17.6と指定しても同じ結果になります。(2019/11/30時点では。)
  • services -> web -> ports の8000:80は、ホスト(ここではMacPC)で受け付けたポート8000へのリクエストを、Dockerコンテナの80ポートに転送するという設定です。ポートフォワーディング
  • volumes ホスト側で編集したソースやconfなどをDockerコンテナと同期するための設定。

カレントディレクトリをdocker-compose.ymlのあるディレクトリに移動して、下記コマンドを実行します。

docker-compose up -d

コマンドの実行結果

$ docker-compose up -d
Creating network "php-docker_default" with the default driver
Pulling web (nginx:latest)...
latest: Pulling from library/nginx
000eee12ec04: Pull complete
eb22865337de: Pull complete
bee5d581ef8b: Pull complete
Digest: sha256:50cf965a6e08ec5784009d0fccb380fc479826b6e0e65684d9879170a9df8566
Status: Downloaded newer image for nginx:latest
Creating php-docker_web_1 ... done

nginxのDockerコンテナが正常に動作しているか確認するため以下のURLにアクセスします。
http://127.0.0.1:8000/

「ようこそDocker!」というページ(index.htmlで作ったページ)が表示されればOKです。

いったん起動したnginxのコンテナを停止します。

docker-compose stop
$ docker-compose stop
Stopping php-docker_web_1 ... done

ここまでで、dockerによるnginx環境の構築がいったん完了です。

php-fpm 7.4の環境構築

以下のディレクトリ構成を前提に環境構築を進めていきます。

.
├── docker-compose.yml
├── php
│   └── src
│       ├── html
│       └── index.php
├── php-docker.md
├── src
│   └── html
└── web
    ├── conf
    │   └── default.conf
    └── src
        └── index.html

default.confファイルの内容は下記の通りです。

server {
  listen 80;
  server_name 127.0.0.1;

  #ドキュメントルートの設定
  root  /var/www/;
  index index.php index.html index.htm;

  location / {
    # 指定された順序でfileやdirの存在を確認し、最初に見つかったものを返却する。
    # いずれも無かった場合は、最後に指定されたパスに遷移する。
    try_files $uri $uri/ /index.php$is_args$args;
  }

  location ~ \.php$ {
    fastcgi_split_path_info ^(.+\.php)(/.+)$;
    # php-fpmのコンテナである「app」のポート9000に対してリクエストのパスを設定
    fastcgi_pass   app:9000;
    # 1台のサーバーでnginx+php-fpmを動作させる場合、Unixソケットの方が高速に動作するため、
    # 以下の設定をするが、今回はnginxとphp-fpmを別のコンテナにしているため、ポートでの接続となっている。
    # fastcgi_pass   unix:/var/run/php-fpm/php-fpm.sock
    fastcgi_index  index.php;
    include        fastcgi_params;
    fastcgi_param  SCRIPT_FILENAME $document_root$fastcgi_script_name;
    fastcgi_param  PATH_INFO $fastcgi_path_info;
  }

  access_log /var/log/nginx/access.log;
  error_log  /var/log/nginx/error.log;
}

index.phpファイルの内容は下記の通りです。

<?php
phpinfo();

docker-compose.ymlファイルの内容は下記の通りです。

version: '3'
services:
  web:
    image: nginx:latest
    ports:
      - "8000:80"
    depends_on:
      - app
    volumes:
      - ./web/conf/default.conf:/etc/nginx/conf.d/default.conf
      #- ./web/src:/var/www/ PHP側でソースを管理するためコメントアウト
  app:
    image: php:7.4.0-fpm
    volumes:
      - ./php/src:/var/www/

カレントディレクトリをdocker-compose.ymlのあるディレクトリに移動して、下記コマンドを実行します。

docker-compose up -d

http://127.0.0.1:8000/ にアクセスしてphpinfo()の実行結果が確認できれば完了。

php 7.4.0 って2019年11月28日にビルドされたんですねぇ

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

Adobe ExtendScript Debuggerのセットアップ

はじめに

この記事は、Visual Studio Codeに、Adobe ExtendScript Debuggerプラグインをセットアップする手順を共有するためのものです。

前提とする条件

この記事は以下の環境を想定しています。

  • macOS 10.14.6
  • Visual Studio Code 1.38.1
  • ExtendScript Debugger 1.1.2

記事を読む前に、お手元の環境をご確認ください。

想定する読者

この記事は以下の読者を想定しています。

  • Visual Studio Codeを利用したことがある
  • JavaScriptの知識がある
  • ExtendScriptを利用、開発したことがある

この記事ではVisual Studio CodeおよびExtendScript開発の解説はしません。

ExtendScriptとは

ExtendScriptとは、Adobe社のCreativeCloudアプリケーションを制御するためのスクリプトです。ES3相当のJavaScriptに、各アプリケーション用のAPIを追加したものです。

ExtendScript ToolKitのサポート終了

ExtendScriptの開発には、いままではAdobe ExtendScript Toolkit CCが利用されてきました。しかしこのソフトはすでに開発とサポートの終了が宣言されています。Adobeの公式リリースでmacOS Catalina(10.15)では起動せず、また修正も行わないと告知されました。

リリース内で移行先として指定されているのがExtendScript Debuggerです。

ExtendScript Debuggerのセットアップ

ExtendScript DebuggerはMicrosoft社のVisual Studio Code用プラグインです。動作させるにはまず、このコードエディターをインストールする必要があります。

インストール

次に、ExtendScript Debuggerをインストールします。Visual Studio Codeを起動し、Extensionパネルを開くと検索ボックスがあります。そこに「ExtendScript」と入力するとプラグインが表示されます。

「インストール」ボタンを押せばExtendScript Debuggerのインストールは完了です。

アプリケーションとの接続

ExtendScript DebuggerはAdobe CCアプリケーションと接続し、デバッグ用の情報を収集します。この接続先アプリケーションを指定します。

画面下の青い帯に「ターゲットアプリケーションを指定」という表示が出ている場合、接続先のアプリケーションが指定されていません。ここをクリックするとコマンドパレットが開き、接続先の候補が表示されます。

候補のアプリケーションが起動していない場合は、起動するかどうかを聞かれますので「はい」を選択します。

画面右下の文字が、アプリケーション名になれば接続は成功です。

デバッグ構成を追加する

次にデバッグ構成を追加します。デバッグ構成はデバッガーの動作を設定します。一度設定してしまえば何度も繰り返し呼び出せます。

デバッグ構成はlaunch.jsonという設定ファイルに保存されます。launch.jsonはいま開いているフォルダーの.vscodeという隠しフォルダーに保存されます。まだフォルダーを開いていないなら「ようこそ」画面からフォルダーを選択してください。

つぎにデバッガーパネルを開き、デバッグ構成のプルダウンメニューを開きます。

プルダウンメニューの最下部の「構成の追加…」を選びます。

すると新規にlaunch.jsonファイルが作成されます。複数のテンプレートが用意されているので、「ExtendScriptデバッグ起動設定」を選びます。

launch.json
{
    "type": "extendscript-debug",
    "request": "launch",
    "name": "スクリプト名を求める",
    "program": "${workspaceFolder}/${command:AskForScriptName}",
    "stopOnEntry": false
}

このようなテンプレートが挿入されるので、いったんlaunch.jsonを保存します。

デバッガーパネルに戻り、プルダウンから「スクリプト名を求める」を選択し、緑の矢印アイコンを押します。コマンドパレットでデバッグしたいスクリプトファイルまでのパスを求められます。ここでファイルパスを入力すれば、AdobeCCアプリケーションでスクリプトが実行されます。

デバッグ構成を編集する

launch.jsonの冒頭コメントには、Microsoftのガイド記事へのリンクが張られています。
このリンク先の記事には、デバッグ構成の編集方法が解説されています。

例として、以下のように構成を変更するとコマンドパレットを開かず現在開いているファイルを実行します。
参考 : Debugging current file in VS Code
ExtendScript Debuggerをスクリプトのランチャーとして利用する場合は、こちらの構成がオススメです。

launch.json
{
    "type": "extendscript-debug",
    "request": "launch",
    "name": "現在のファイルをExtendScriptとして実行",
    "program": "${file}",
    "stopOnEntry": false
},

参考記事

Adobe製品をVSCodeで制御(Javascript)

以上、ありがとうございました。

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