ノーブレークスペース(ノンブレーキングスペース)と普通のスペースの違い

What?

  • ノーブレークスペース(ノンブレーキングスペース / no-break space, non-breaking space)
    • = 自動改行禁止のスペース≠半角スペース
    • HTML文字参照(HTMLエンティティ)
  • 半角スペース
  • 他にもいろいろな種類のスペース
    • ありすぎてかけない

Why?

  • 改行タイミングをコントロールするため
    • 例: km単位が文頭にずれて、数字と離れるのを防ぐ
[NG]
The lake has a total area of 25,300 
km2, total volume of 470 km3, length
of 386 km, and mean width of 17 km.

[OK]
The lake has a total area of 25,300 km2, 
total volume of 470 km3, length of 
386 km, and mean width of 17 km.

入力方法

  • Mac: ⌥ Opt+Space
  • Vim: Ctrl+K, Space, Space

参考

en.wikipedia.org

ja.wikipedia.org

NerdTreeで`^G`(ハットG)表示がでてしまう

What?

  • 新しいMacbookの環境設定をし、vimの設定をしたら以下のようにNerdTreeで^G(ハットG)表示がでてしまう
▸ ^G.anyenv/
▸ ^G.bash_sessions/
▸ ^G.ssh/

Why?

:version
VIM - Vi IMproved 8.0 (2016 Sep 12, compiled Aug 17 2018 17:24:51)
Included patches: 1-503, 505-680, 682-1283
Compiled by root@apple.com
(中略)
-conceal

Solution?

  • .vimrc に以下を加える(最初こっちをやった)
    • let g:NERDTreeNodeDelimiter = "\u00a0"
      • let: 変数代入
      • g:: グローバルスコープ
      • NERDTreeNodeDelimiter: NERDTreeのノードのデリミタ(区切り文字)設定変数
      • \u00a0: ノンブレーキングスペース
  • もしくは、conceal機能が入ったvimを使う(最終的にこっちにした)
$ which vim
/usr/bin/vim
$ brew install vim
$ which vim
/usr/local/bin/vim

:version
VIM - Vi IMproved 8.1 (2018 May 18, compiled Feb 19 2019 11:57:04)
macOS version
Included patches: 1-950
Compiled by Homebrew
+conceal

参考

www.reddit.com

React static入門

Index


React staticってなに?

インストール

$ yarn global add react-static
yarn global v1.5.1
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
success Installed "react-static@5.6.8" with binaries:
      - react-static
✨  Done in 55.27s.

試す: プロジェクト作成〜Hello world

$ react-static create

? What should we name this project? tryReactStatic
? Select a template below... basic
=> Creating new react-static project...

Using template: basic
=> Installing dependencies with: Yarn...

=> [✓] Project "tryReactStatic" created: 32126.416ms

  => To get started:

    cd tryReactStatic

    yarn start - Start the development server
    yarn build - Build for production
    yarn serve - Test a production build locally
  • ディレクトリを移動して、yarnでRunする
    • ビルドされてから、ローカルサーバーが立ち上がり、サイトが確認できる
$ cd tryReactStatic
$ yarn start
yarn run v1.5.1
$ react-static start
=> Building Routes...
=> [✓] Routes Built: 398.358ms
=> Building App Bundle...
=> [✓] Build Complete: 4145.172ms
=> [✓] App serving at http://localhost:3000

編集する: ディレクトリ構成〜Home画面の修正

├── README.md
├── dist # ビルドした本番用ファイル置き場
├── node_modules
├── package.json
├── public # 静的ファイル置き場
├── src      # ソースコード置き場
│   ├── App.js # 
│   ├── app.css # 
│   ├── containers # 各ページのJSコード
│   ├── index.js # 
│   └── logo.png
├── static.config.js # 設定ファイル
├── tmp
└── yarn.lock
  • containersの中のHome.jsのテキストを修正
  • 再ビルドとサーバ立ち上げ -> Home画面が修正されてる
$ tree src/containers/
src/containers/
├── 404.js
├── About.js
├── Blog.js
├── Home.js
└── Post.js
$ vi src/containers/Home.js
$ yarn start

デプロイする: 本番用ビルドする

  • yarn buildでビルドする
$ yarn build
yarn run v1.5.1
$ react-static build

=> Info: No 'siteRoot' is defined in 'static.config.js'. This is suggested for absolute url's and a sitemap.xml to be automatically generated.

=> Copying public directory...
=> [✓] Public directory copied: 1.624ms
=> Building Routes...
=> [✓] Routes Built: 329.341ms
=> Bundling App...
=> [✓] App Bundled: 6516.959ms
=> Fetching Site Data...
=> [✓] Site Data Downloaded: 0.126ms
=> Fetching Route Data...
=> [==================================================================] 104/104 100% 14857/s 0.0s
=> [✓] Route Data Downloaded: 9.490ms
=> Exporting Route Data...
=> [✓] Route Data Exported: 10.393ms
=> Exporting HTML...
=> [====================================================================] 104/104 100% 208/s 0.0s
=> [✓] HTML Exported: 563.963ms
=> Site is ready for production!: 7860.281ms
✨  Done in 10.77s.
$ tree dist/ -L 1
dist/
├── 404
├── 404.html
├── about
├── blog
├── bootstrap.943eaf03.js
├── index.html
├── main.31e220f4.js
├── react-static-routes.js
├── robots.txt
├── routeInfo.json
├── static
├── static.ffae8488.js
├── static.ffae8488.js.map
├── styles.20041c42.css
├── styles.20041c42.css.map
├── styles.8db21466.css
├── styles.8db21466.css.map
└── templates

yarnインストールでwarning

Warningの意味

  • 警告: あなたが使っているNodeは XXX でyarnでサポートしてないですよ。バグや予期しない振る舞いをしたりする可能性がありますよ。Yarnはこのバージョンしかサポートしてないですよ。
$ yarn
yarn install v1.5.1
warning You are using Node "7.3.0" which is not supported and may encounter bugs or unexpected behavior. Yarn supports the following semver range: "^4.8.0 || ^5.7.0 || ^6.2.2 || >=8.0.0"
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
info Lockfile not saved, no dependencies.
✨  Done in 0.13s.

最新版をインストールしたはずだけど?

==> Installing yarn dependency: node
==> Downloading https://homebrew.bintray.com/bottles/node-9.10.1.el_capitan.bottle.tar.gz
######################################################################## 100.0%
==> Pouring node-9.10.1.el_capitan.bottle.tar.gz
==> Caveats
Bash completion has been installed to:
  /usr/local/etc/bash_completion.d
==> Summary
🍺  /usr/local/Cellar/node/9.10.1: 5,125 files, 49.8MB

原因: ndenvのほうのnodeを見ていた

  • which でどのnodeを見ているか確認
$ which node
/Users/kz-engineer/.anyenv/envs/ndenv/shims/node

解決

  • ndenvのほうで最新版をインストールして、バージョンを切り替え
$ ndenv install v9.10.1
$ ndenv global v9.10.1
  • 消えた
$ yarn
yarn install v1.5.1
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
info Lockfile not saved, no dependencies.
✨  Done in 0.06s.

PHPフレームワークSlim: public/index.php コードリーディング

  • public/index.php コードリーディング

静的ファイルの処理

if (PHP_SAPI == 'cli-server') {
    $url  = parse_url($_SERVER['REQUEST_URI']);
    $file = __DIR__ . $url['path'];
    if (is_file($file)) {
        return false;
    }
}

composerを使って、ライブラリ群をロード

require __DIR__ . '/../vendor/autoload.php';

セッション開始

session_start();

アプリインスタンスの生成

$settings = require __DIR__ . '/../src/settings.php';
$app = new \Slim\App($settings);
  • 設定ファイル読み出し

    • src/settings.php
    • Default: エラー表示, content-length header, Renderer, Monolog
  • インスタンスのプライマリクラスからインスタンスを作る

    • vendor/slim/slim/Slim/App.php

各種設定

// Set up dependencies
require __DIR__ . '/../src/dependencies.php';

// Register middleware
require __DIR__ . '/../src/middleware.php';

// Register routes
require __DIR__ . '/../src/routes.php';

アプリケーションを走らせる

// Run app
$app->run();

Phpstormの翻訳プラグイン

やりたいこと

  • Phpstorm自体を翻訳(日本語化)したいのではなく、コードの中の英単語を翻訳したい

おすすめ

  • Translate me github.com
  • Alt + y で選択した範囲を翻訳してくれる
  • 他の人気のあるプラグインは、中国語対応のものが多い

使い方

  • Preference > Plugins > Browse repositories から Translate me を探してインストール
  • インストールして、再起動後、Preferenceの最下段にTranslateMe設定が現れる
  • 設定は en - ja とすると、英語から日本語に訳される(デフォルトは en - ru になっているので、ロシア語になる)
  • Alt + y で選択した範囲を翻訳する

PHP マイクロフレームワーク Slim インストール

インストールのしかた

  • 先にcomposerはインストールしとく
$ composer create-project slim/slim-skeleton sample
Installing slim/slim-skeleton (3.1.4)
  - Installing slim/slim-skeleton (3.1.4): Downloading (100%)
Created project in sample
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 34 installs, 0 updates, 0 removals
  - Installing psr/container (1.0.0): Downloading (100%)
  - Installing container-interop/container-interop (1.2.0): Downloading (100%)
  - Installing nikic/fast-route (v1.2.0): Downloading (100%)
  - Installing psr/http-message (1.0.1): Downloading (100%)
  - Installing pimple/pimple (v3.2.2): Downloading (100%)
  - Installing slim/slim (3.9.2): Downloading (100%)
  - Installing slim/php-view (2.2.0): Downloading (100%)
  - Installing psr/log (1.0.2): Downloading (100%)
  - Installing monolog/monolog (1.23.0): Downloading (100%)
  - Installing symfony/yaml (v3.4.0): Downloading (100%)
  - Installing sebastian/version (2.0.1): Downloading (100%)
  - Installing sebastian/resource-operations (1.0.0): Downloading (100%)
  - Installing sebastian/recursion-context (2.0.0): Loading from cache
  - Installing sebastian/object-enumerator (2.0.1): Downloading (100%)
  - Installing sebastian/global-state (1.1.1): Downloading (100%)
  - Installing sebastian/exporter (2.0.0): Loading from cache
  - Installing sebastian/environment (2.0.0): Downloading (100%)
  - Installing sebastian/diff (1.4.3): Loading from cache
  - Installing sebastian/comparator (1.2.4): Loading from cache
  - Installing doctrine/instantiator (1.0.5): Downloading (100%)
  - Installing phpunit/php-text-template (1.2.1): Loading from cache
  - Installing phpunit/phpunit-mock-objects (3.4.4): Downloading (100%)
  - Installing phpunit/php-timer (1.0.9): Loading from cache
  - Installing phpunit/php-file-iterator (1.4.5): Downloading (100%)
  - Installing sebastian/code-unit-reverse-lookup (1.0.1): Downloading (100%)
  - Installing phpunit/php-token-stream (2.0.2): Downloading (100%)
  - Installing phpunit/php-code-coverage (4.0.8): Downloading (100%)
  - Installing webmozart/assert (1.2.0): Downloading (100%)
  - Installing phpdocumentor/reflection-common (1.0.1): Downloading (100%)
  - Installing phpdocumentor/type-resolver (0.4.0): Downloading (100%)
  - Installing phpdocumentor/reflection-docblock (4.2.0): Downloading (100%)
  - Installing phpspec/prophecy (1.7.3): Downloading (100%)
  - Installing myclabs/deep-copy (1.7.0): Downloading (100%)
  - Installing phpunit/phpunit (5.7.25): Downloading (100%)
monolog/monolog suggests installing aws/aws-sdk-php (Allow sending log messages to AWS services like DynamoDB)
monolog/monolog suggests installing doctrine/couchdb (Allow sending log messages to a CouchDB server)
monolog/monolog suggests installing ext-amqp (Allow sending log messages to an AMQP server (1.0+ required))
monolog/monolog suggests installing ext-mongo (Allow sending log messages to a MongoDB server)
monolog/monolog suggests installing graylog2/gelf-php (Allow sending log messages to a GrayLog2 server)
monolog/monolog suggests installing mongodb/mongodb (Allow sending log messages to a MongoDB server via PHP Driver)
monolog/monolog suggests installing php-amqplib/php-amqplib (Allow sending log messages to an AMQP server using php-amqplib)
monolog/monolog suggests installing php-console/php-console (Allow sending log messages to Google Chrome)
monolog/monolog suggests installing rollbar/rollbar (Allow sending log messages to Rollbar)
monolog/monolog suggests installing ruflin/elastica (Allow sending log messages to an Elastic Search server)
monolog/monolog suggests installing sentry/sentry (Allow sending log messages to a Sentry server)
symfony/yaml suggests installing symfony/console (For validating YAML files using the lint command)
sebastian/global-state suggests installing ext-uopz (*)
phpunit/php-code-coverage suggests installing ext-xdebug (^2.5.1)
phpunit/phpunit suggests installing phpunit/php-invoker (~1.1)
phpunit/phpunit suggests installing ext-xdebug (*)
Writing lock file
Generating autoload files

WEBサーバ立ち上げ

$ cd sample
$ php -S localhost:8080 -t public public/index.php
  • オプションの意味は以下
    • -S localhost:8080: ビルトインWEBサーバをこのURLで立ち上げ
    • -t public public/index.php: ドキュメントルートや読み込むファイルを指定
  -S <addr>:<port> Run with built-in web server.
  -t <docroot>     Specify document root <docroot> for built-in web server.