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.

Kotlinの読み方 (Androidアプリ開発言語)

Google I/Oでの新発表。

jp.techcrunch.com

で、どう読むのか?

  • 日本勢: ことりん
  • 英語勢: コットリン(アクセントはコットが強くて、リンは弱め)
    • 以下の動画で、9秒くらいから3回くらいKotlin言うので聴いてください

youtu.be

公式回答

discuss.kotlinlang.org

It is usually pronounced with the same sound as in “cot”: http://www.dictionary.com/browse/cot99

jupyter で ModuleNotFoundError: No module named 'tensorflow' エラー

What?

from tensorflow.examples.tutorials.mnist import input_data
mnist = input_data.read_data.read_data_sets("MNIST_data/", one_hot=True)
---------------------------------------------------------------------------
ModuleNotFoundError                       Traceback (most recent call last)
<ipython-input-1-3a141fdd5d37> in <module>()
----> 1 from tensorflow.examples.tutorials.mnist import input_data
      2 mnist = input_data.read_data.read_data_sets("MNIST_data/", one_hot=True)

ModuleNotFoundError: No module named 'tensorflow'

How to resolve?

  • pip で tensorflow をもう一度インストー
$ pip install tensorflow

Why?

  • 失敗したパッケージ
    • tensorflow-1.1.0-py3-none-any.whl
    • appdirs-1.4.3 numpy-1.12.1 packaging-16.8 protobuf-3.3.0 pyparsing-2.2.0 setuptools-35.0.2 six-1.10.0 tensorflow-1.1.0 werkzeug-0.12.1 wheel-0.29.0
  • 成功したパッケージ
    • tensorflow-1.1.0-cp36-cp36m-macosx_10_11_x86_64.whl
    • numpy-1.12.1 protobuf-3.3.0 tensorflow-1.1.0 werkzeug-0.12.1
  • OS X 用のパッケージになっていなかったぽい(チュートリアルに沿ってるんだけどな。。。)

問題の切り分けで試したこと

  • jupyter notebook を立ち上げず、コンソールで直接試す
    • コンソールから見ると、Tensorflow用の仮想環境は立ち上がっている
    • OK (問題なくimportできる) -> jupyter notebookからの読み込みが上手くいかない
(tensorflow) $ python
Python 3.6.0 |Anaconda custom (x86_64)| (default, Dec 23 2016, 13:19:00)
[GCC 4.2.1 Compatible Apple LLVM 6.0 (clang-600.0.57)] on darwin
Type "help", "copyright", "credits" or "license" for more information.
>>> import tensorflow
>>> from tensorflow.examples.tutorials.mnist import input_data
  • Anaconda navigatorを再起動して、もう一度試す

    • NG (同じ) -> 立ち上げっぱなしが原因ではない
  • tensorflow仮想環境から直接 jupyter notebook を立ち上げてみる

    • NG (同じ) -> 立ち上げる場所が原因ではない
  • tensorflow仮想環境から直接立ち上げた jupyter notebook で import tensorflow1行を実行してみる

    • NG (同じ) -> サンプルコードが間違っているわけではない
  • どのjupyter notebookが起動されているのか?

    • /Users/kz/anaconda/envs/tensorflow/bin/jupyter_mac.command ; exit;
    • OK -> tensorflow環境のjupyter notebookが起動されている
  • tensorflowインストール時のpipがどこに紐付いていた?

    • OK -> tensorflow環境に紐ついている
$ which pip
/Users/kz/anaconda/envs/tensorflow/bin/pip
(tensorflow) $ conda install jupyter notebook

Package plan for installation in environment /Users/kz/anaconda/envs/tensorflow:
(tensorflow) $ which jupyter notebook
/Users/kz/anaconda/envs/tensorflow/bin/jupyter
(tensorflow) $ jupyter notebook
[I 18:03:32.381 NotebookApp] Serving notebooks from local directory: /Users/kz
  • conda listでtensorflowが出るか?
    • NG -> あれ?出てこない?
(tensorflow) $ conda list | grep tensorflow
# packages in environment at /Users/kz/anaconda/envs/tensorflow:
  • そうだ。pipでインストールしたから、condaには登録されていない
    • ここに原因があるのでは?
(tensorflow) $ echo $TF_PYTHON_URL
https://storage.googleapis.com/tensorflow/mac/cpu/tensorflow-1.1.0-py3-none-any.whl
(tensorflow) $ pip install --ignore-installed --upgrade $TF_PYTHON_URL
(tensorflow) $ pip freeze | grep tensorflow
tensorflow==1.1.0
  • 初心に帰って、conda仮想環境を立ち上げ直してみる
    • NG -> 変わらない
(tensorflow) $ source deactivate tensorflow
$ source activate tensorflow
(tensorflow) $ 
$ source activate tensorflow

(tensorflow) $ jupyter kernelspec list
Available kernels:
  python3    /Users/kz/anaconda/envs/tensorflow/share/jupyter/kernels/python3

(tensorflow) $ pip install ipykernel
Requirement already satisfied: ipykernel in ./anaconda/envs/tensorflow/lib/python3.6/site-packages
(tensorflow) $ python -m ipykernel install --user --name tensorflow --display-name "conda env tensorflow"

(tensorflow) $ jupyter kernelspec list
Available kernels:
  tensorflow    /Users/kz/Library/Jupyter/kernels/tensorflow
  python3       /Users/kz/anaconda/envs/tensorflow/share/jupyter/kernels/python3

(tensorflow) $ jupyter notebook
-m: モジュールを指定して実行
install: カーネルをインストールする
--user: 現在ログイン中のユーザにインストール
--name: カーネルスペックの名前を指定
--display-name: 表示されるカーネルの名前を指定
  • condaのバージョンを下げる
    • conda 4.3.17 , Python 3.6.1 を conda 4.2.16 , Python 3.6.1 へ
    • NG
(tensorflow) $ conda --version
conda 4.3.17
(tensorflow) $ conda install conda=4.2
Fetching package metadata ...........


InstallError: Install error: Error: 'conda' can only be installed into the root environment


(tensorflow) $ source deactivate tensorflow
$ conda --version
conda 4.3.17
$ conda install conda=4.2
Fetching package metadata ...........
Solving package specifications: .

Package plan for installation in environment /Users/kz/anaconda:

The following packages will be DOWNGRADED due to dependency conflicts:

    conda: 4.3.17-py36_0 --> 4.2.16-py36_0

Proceed ([y]/n)? y

conda-4.2.16-p 100% |######################################################################| Time: 0:00:00 428.78 kB/s
$ conda --version
conda 4.2.16
  • 念押しでtensorflowをもう一度インストー
    • できた。。。。
$ pip install tensorflow
Collecting tensorflow
  Downloading tensorflow-1.1.0-cp36-cp36m-macosx_10_11_x86_64.whl (31.3MB)
...
Installing collected packages: numpy, protobuf, werkzeug, tensorflow
Successfully installed numpy-1.12.1 protobuf-3.3.0 tensorflow-1.1.0 werkzeug-0.12.1