ノーブレークスペース(ノンブレーキングスペース)と普通のスペースの違い
What?
- ノーブレークスペース(ノンブレーキングスペース / no-break space, non-breaking space)
- 半角スペース
- 他にもいろいろな種類のスペース
- ありすぎてかけない
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.
入力方法
参考
NerdTreeで`^G`(ハットG)表示がでてしまう
What?
▸ ^G.anyenv/ ▸ ^G.bash_sessions/ ▸ ^G.ssh/
Why?
- vimのビルド内容によって出現する
- 同様の現象: why I see ^G in the NERDTree explorer · Issue #928 · scrooloose/nerdtree · GitHub
- 本当は、conceal(隠蔽)されるはずのデリミタが表示されている。
- 今使っているvimは、以下のようにconceal機能がインクルードされてないので該当文字列が隠蔽されない
: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
参考
React static入門
Index
- 英語がわかってもわからなくても、この5分動画を見るのが最もわかりやすい
React staticってなに?
- https://react-static.js.org/
- Reactのプログレッシブ静的サイトジェネレータ
- めちゃパフォーマンスがよい
- SEO対策もされてる
インストール
- 公式クイックスタートに沿ってやる
- yarnでグローバルインストール
$ 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
コマンドを打つ- 対話形式でプロジェクトを作れる
- プロジェクト名 = ディレクトリ名
- テンプレート名 = とりあえずbasicで
$ 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; } }
PHP_SAPI: PHP が使用しているインターフェイスの型
cil-server
: PHPのビルトインWEBサーバ- Refer: PHP: php_sapi_name - Manual
PHPのビルトインWEBサーバを使っていて、パスの対象が静的ファイルの場合は、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';
- 依存関係(Dependency Injection Container)のセットアップ
- ミドルウェア(デフォルトは空)登録
- ルートの登録
アプリケーションを走らせる
// Run app
$app->run();
- 生成したアプリインスタンスの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.