CakePHP3でReactを利用する

開発環境は、Windows 10 Pro(64bit) + CakePHP 3.7.8。

qiita.com
ここの記事を参考にして、CakePHPのルートディレクトリにて、
必要なモジュールをインストールしたが、bundle.jsを作成する段階でエラーが発生した。そこで、エラーメッセージに書いてある通りに修正すると、何とか動作した。(babelify@8をインストールした後に、babel-coreをインストールすると、うまく動作した。)


・PagesController.php内に、root(),a(),b()アクションをそれぞれ作る。

・/src/Template/Pages内に、a.ctp,b.ctp,root.ctpを作成する。

・/config/routes.phpを開き、Router::scope('/',~の中に追加する。
$routes->connect('/'~の部分は、actionをrootに書き換える。
routes.php

<?php
    $routes->connect('/', ['controller' => 'Pages', 'action' => 'root']);

    $routes->connect('/a', ['controller' => 'Pages', 'action' => 'a']);

    $routes->connect('/b', ['controller' => 'Pages', 'action' => 'b']);
?>

・エントリーポイントになるjavascriptファイルを作成して、以下のコードを書く。
entry.js

import React from 'react';
import {render} from 'react-dom';
import {BrowserRouter, Link, Route} from 'react-router-dom';

function root(){
  return <h1>root</h1>;
}

function a(){
  return <h1>a</h1>;
}

function b(){
  return <h1>b</h1>;
}

class Main extends React.Component{
  render(){
          return(
           <div>
           <BrowserRouter>
          <ul>
            <li><Link to="/">root</Link></li>
            <li><Link to="/a">a</Link></li>
            <li><Link to="/b">b</Link></li>
          </ul>
          <Route exact path="/" component={root} />
          <Route path="/a" component={a} />
          <Route path="/b" component={b} />
        </BrowserRouter>
        </div>
        );
  }
}

render(<Main />, document.getElementById("root"));

default.ctp

<body>
<div id="root"></div>
<script type="text/javascript" src="/js/bundle.js?_=<?= time() ?>"></script>
</body>

・これによって初回アクセス時は普通にhttpでアクセスし、後からは、リンクをクリックすると、ページ遷移をすることなく、動的に、URLを変化させながら、コンテンツの中身も変わる。

コントローラ側からJSON形式で取得する

entry.js

import React from 'react';
import {render} from 'react-dom';
import {BrowserRouter, Link, Route} from 'react-router-dom';

class Main extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      result: ''
    }
  }

  componentDidMount(){
    let url = location.pathname;
    this.readPage(url);
  }

  readPage(url){
    let this_ = this;
     fetch(url,{
      method: 'GET',
      headers: new Headers({ 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest'})
    }).then( function(res){
      return res.json();
    }).then( function(data){
      let test = data.result.message;
      this_.setState({result: test});
    }); 
  }

  render(){
     return(
       <div>
         <BrowserRouter>
           <ul>
            <li><Link to="/" onClick={() => (this.readPage("/"))}>root</Link></li>
            <li><Link to="/a" onClick={() => (this.readPage("/a")}>a</Link></li>
            <li><Link to="/b" onClick={() => (this.readPage("/b")}>b</Link></li>
          </ul>
          <Route exact path="/" render={() => (<h1>{this.state.result}</h1>)} />
          <Route path="/a" render={() => (<h1>{this.state.result}</h1>)} />
          <Route path="/b" render={() => (<h1>{this.state.result}</h1>)} />
        </BrowserRouter>
      </div>
    );
  }
}

render(<Main />, document.getElementById("root"));

コンポーネント内でcomponentDidMountメソッドを利用することで、指定のURLにアクセスした段階で、現在のURLのデータを読み込ませて、表示させています。これをしないと、リンクをクリックしない限り、データを読み込もうとはしません。
ja.reactjs.org


PagesController.php

<?php
  public function initialize(){
    parent::initialize();
  }

  public function root(){
    if($this->request->is(["ajax","get"])){
      $data = ["message" => "root page"];
      $this->set(['result' => $data, '_serialize' => ['result']]);
      return;
    }
  }

  public function a(){
    if($this->request->is(["ajax","get"])){
      $data = ["message" => "a page"];
      $this->set(['result' => $data, '_serialize' => ['result']]);
      return;
    }
  }

  public function b(){
    if($this->request->is(["ajax","get"])){
      $data = ["message" => "b page"];
      $this->set(['result' => $data, '_serialize' => ['result']]);
      return;
    }
  }
?>


参考リンク
React Router v4 でルーティング先の component に Props を渡す方法 - ngzmのブログ
【ajaxを卒業したい】rails+jqueryをreactで書き換えてみた #1 - Qiita
React.jsのComponent Lifecycle - Qiita

ffmpegを利用する

開発環境は、Windows10 Pro(64bit)。

動画から一部のフレームのサムネイル画像を作成したくて、ffmpegを利用してみることにしました。

1.公式サイトへアクセスする
https://www.ffmpeg.org/

2.左サイドバーのDownloadと書かれたリンクをクリック
f:id:k01ken:20190528061412p:plain

3.Get the packagesと書かれた欄のWindowsのアイコンにマウスカーソルを合わせて、Windows Buildsのリンクをクリック
f:id:k01ken:20190528061625p:plain

4.Versionは現時点で4.1.3を選択し、ArchitectureはWindows 64-bitを選択し、Linkingはstaticを選択し、Download Buildボタンをクリックし、zipファイルをダウンロードする
f:id:k01ken:20190528061912p:plain

5.ダウンロードしたzipファイルを解凍し、ファイル内へアクセスし、bin,doc,presetsディレクトリが直下にあるディレクトリの名前をffmpegに変更して、Cドライブ直下へ移動させる。

6.ffmpegディレクトリ内のbinディレクトリへのパス(今回はc:\ffmpeg\bin)を、Windowsの開発環境PATH内に設定する
k01ken.hatenablog.com

7.コマンドプロンプトを起動し、

ffmpeg -version

と入力し、バージョン情報が表示されたら、正しくパスが通っている。

8.Cドライブ直下に、ffmpeg_testというディレクトリを作成し、その中に、サムネイルを作成したい動画(名前は一応、input.mp4)を入れる。
※Cドライブ直下に、動画を設置すると、管理者権限でコマンドプロンプトを起動しないと、動作が失敗するので注意。

9.コマンドプロンプトを起動し、カレントディレクトリを上記のffmpeg_testにして、以下のコマンドを入力。

ffmpeg -i input.mp4 -f image2 -ss 120 -vframes 1 -s 426x240 thumbnail.jpg

成功すれば、動画の120秒の位置のフレームのthumbnail.jpgが、幅426px、高さ240pxで、同じディレクトリ内に作成されているはずです。

PHP経由で実行してみる

PHPからffmpegを実行して動作させたいと思います。といっても、単に、PHPのexec関数を使うだけです。

<?php
$output = '';
$status = '';
$command = 'ffmpeg -i input.mp4 -f image2 -ss 120 -vframes 1 -s 426x240 thumbnail.jpg';
exec($command, $output, $status);

if($status === 0){
  echo '成功しました';
}else{
  echo '失敗しました';
}
?>

Windows10でAnacondaを使ってみる

開発環境は、Windows 10 Pro(64bit)。

1.公式サイトへアクセスする
Anaconda
https://www.anaconda.com/
2.右上のDownloadボタンをクリック
f:id:k01ken:20190521192028j:plain

3.Downloadボタンをクリック
f:id:k01ken:20190521192042j:plain

4.Windowsアイコンをクリックし、Python 3.7 versionのDownloadボタンをクリック。インストーラのダウンロードが開始される。
f:id:k01ken:20190521192219j:plain

5.インストーラを実行

6.Nextをクリック
f:id:k01ken:20190521203934j:plain

7.I agreeをクリック
f:id:k01ken:20190521203944j:plain

8.Just meにチェックを入れて、Nextをクリック
f:id:k01ken:20190521205317p:plain

9.Nextをクリック
・3.1GBぐらい必要
f:id:k01ken:20190521205329p:plain

10.Installをクリック
f:id:k01ken:20190521205335p:plain

11.Nextをクリック
f:id:k01ken:20190521214526p:plain

12.Nextをクリック
f:id:k01ken:20190521214534p:plain

13.Finishをクリック
f:id:k01ken:20190521214617p:plain

Windows10にてAndroid Studioを使ってみる

開発環境は、Windows 10 Pro(64bit)。

1.公式サイトへアクセスし、DOWNLOAD ANDROID STUDIOボタンをクリック
f:id:k01ken:20190510145217p:plain

2.I have read and agree~にチェックボックスを入れて、
DOWNLOAD ANDROID STUDIO~ボタンをクリック
f:id:k01ken:20190510145226p:plain

3.ダウンロードしたファイルを実行する

4.Nextをクリック
f:id:k01ken:20190510145204p:plain

5.Nextをクリック
f:id:k01ken:20190510145154p:plain

6.Nextをクリック
f:id:k01ken:20190510145145p:plain

7.Installをクリック
f:id:k01ken:20190510145132p:plain

8.Nextをクリック
f:id:k01ken:20190510145120p:plain

9.Finishをクリック
f:id:k01ken:20190510145106p:plain

10.Android Studioの初回起動時にDo not import settingsにチェックを入れて、OKボタンをクリック
f:id:k01ken:20190510145508p:plain

11.次に使用データの送信を求めるダイアログが表示されるが、今回は、Don't sendをクリック
f:id:k01ken:20190510150219p:plain

12.Android Studio Setup Wizardが起動されるので、Nextをクリック
f:id:k01ken:20190510150358p:plain

13.Standardにチェックを入れて、Nextをクリック
f:id:k01ken:20190510150446p:plain

14.UIテーマに選択だが、今回は、Darculaにチェックを入れて、Nextをクリック
f:id:k01ken:20190510150700p:plain

15.Finishをクリック
f:id:k01ken:20190510150740p:plain

16.コンポーネントのダウンロード中にデバイスに変更を加えることを許可する

17.ダウンロードが終了したらFinishをクリック
f:id:k01ken:20190510162309p:plain

18.Start a new Android Studio projectをクリック
f:id:k01ken:20190510162453p:plain

19.今回は、Empty Activityをチェックし、Nextをクリック
f:id:k01ken:20190510163129p:plain

20.Finishをクリック
f:id:k01ken:20190510163137p:plain

Windows 10でSourcetreeを使う

開発環境は、Windows 10 Pro(64bit)。

GUIで、Gitが使用できるSourcetreeをインストールする手順のメモ。

1.公式サイトへアクセスする
https://ja.atlassian.com/software/sourcetree

2.Windows向けダウンロードボタンをクリック
f:id:k01ken:20190414112935p:plain

3.Atlassian Softwareライセンス契約~にチェックを入れて、
ダウンロードボタンをクリックすると、ダウンロードが開始される。
f:id:k01ken:20190414112947p:plain

4.ダウンロードしたファイルを起動すると自動的にインストールが始まる。

※事前にBitbucketに登録しておくこと

5.Bitbucketをクリック
f:id:k01ken:20190414120038p:plain

6.Googleアカウントでログインするか、Bitbucketのメールアドレスを入力して、
Continueボタンをクリック
f:id:k01ken:20190414120053p:plain
※Bitbucketのメールアドレスとパスワードを入力することに抵抗があったのですが、どうやら、BitbucketとSourcetreeは同じ会社が運営しているようです。

7.パスワードのフォームが表示されるのでBitbucketのパスワードを入力して、Log inボタンをクリック

8.連携が完了するので、次へボタンをクリック
f:id:k01ken:20190414120245p:plain

9.GitとMercurialにチェックを入れて、詳細オプションを押して、改行の自動処理を設定するにチェックを入れて、次へボタンをクリック
(自分の場合はすでにGitはインストールしています)
f:id:k01ken:20190414120257p:plain

10.インストールが完了したら、次へボタンをクリック
f:id:k01ken:20190414120312p:plain

11.その後は、無視して、インストーラ自体を消してよい。

Githubと連携する

デフォルトではBitbucketとしか連携できていないので、Githubと連携する方法をメモ。

Githubアカウントを作成していることが前提です

1.Sourcetreeを起動

2.ソフトウェア上部のRemoteアイコンをクリック

3.左部分のアカウントを追加をクリック

4.Hostの欄のホストティングサービスをGithubに変更し、Credentialsの欄の認証をOAuthにして、OAuthトークンを再読み込みボタンをクリック

5.ブラウザが起動するので、Authorize atlassianボタンをクリックして連携する

6.Githubのパスワードを入力して、Confirm passwordボタンをクリック

7.Sourcetree側に戻ってOKボタンをクリック

8.これによってリモートリポジトリの欄に自分のGithubアカウントが連携されていると思います。

Windows 10でcurlを使う

開発環境は、Windows 10 Pro(64bit)。

curlLinuxMacでは最初からインストールされていますが、Windowsにはないので、Windowscurlを使いたい場合は、chocolateyというものを使います。


The package manager for Windows
https://chocolatey.org/
1.公式サイトへアクセスする

2.Install Chocolatey Nowボタンをクリック

3.コマンドプロンプトを右クリックし、
その他 - 管理者として実行をクリック

4.以下のページの欄をコピペして実行する
https://chocolatey.org/install#install-with-cmdexe
・エラーは出たが、

choco -v

とコマンドを入力すると、

0.10.11

と表示されたので、一応、成功したと思います。

5.curlも、きちんとインストールされているか、以下のコマンドでチェックします。

curl -V

f:id:k01ken:20190407214343p:plain

問題なく表示されました。試しに、Googleの日本語版のページへアクセスしてみたいと思います。

curl --http1.0 https://www.google.co.jp/

と入力すると、
f:id:k01ken:20190407215124p:plain
が表示されました。

『電卓アプリで学ぶReact/Redux入門(実装編)』をやって詰まったところ

開発環境は、Windows 10 Pro(64bit) + node 10.15.0 + npm 6.4.1。

下記のReact/Reduxの実装編をやっていて、途中で詰まったところをメモしておく。

電卓アプリで学ぶReact/Redux入門(基礎知識編)
https://qiita.com/nishina555/items/affcb3684e67cd0ee897
電卓アプリで学ぶReact/Redux入門(実装編)
https://qiita.com/nishina555/items/9ff744a897af8ed1679b

全部のコードを書いて、実行してみると、以下のようなエラーが表示された。

../node_modules/react-redux/es/components/Provider.js
Module not found: Can't resolve 'react' in 'c:\react_test\node_modules\react-redux\es\components'

そこで、node_modulesディレクトリを確認すると、react-reduxが入っていない状態だったので、

npm install react-redux

と入力したら、以下の警告メッセージが出現した。

npm WARN react-redux@6.0.1 requires a peer of react@^16.4.0-0 but none is installed. You must install peer dependencies yourself.

なので、以下のコマンドを続けて入力する

npm install react@^16.4.0
npm install react-redux@6.0.1
npm list

で、インストールしたパッケージのリストを見ると、react-reduxが入っている。そして、1回別のディレクトリへ移動してから、もう一度、node_modulesディレクトリへ戻ると入っていた。

パッケージをインストールしたので、すでに、組み込みサーバーを立ち上げていたら、一度、停止してから、再び、

npm start

をすると、うまく動作した。