k01ken’s b10g

He110 W0r1d!

JavaScriptで何番目のclass属性でイベントが発生したのかインデックスを取得する

JavaScript

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

例えば、いいねボタンなどの複数のclass属性(今回はlike_btn)がある中で実際にクリックしたボタンのみを、色づけしたい、あるいは色づけを解除したい場合、jQueryのindexメソッドのようなものを、生のJavaScriptで行うにはどうすればいいのか、調べたのでメモ。コールバック関数clickedとして以下のコードを書く。

clicked(e){
  let doc = document.getElementsByClassName('like_btn');
  doc = [].slice.call(doc);
  let idx = doc.indexOf(e.target);
  console.log(idx);
}

Reactの場合は、e.targetの部分を、e.currentTargetに変える。console.log(e)で中身を見ていて発見した。


getElementsByClassNameで、HTMLCollectionのオブジェクトを取得し、それを、sliceメソッドを用いて、配列としてコピーしたいが、できないので、callメソッドを用いて、裏技的にHTMLCollectionオブジェクトを配列に変換して、その配列にe.targetを引数に指定したindexOfメソッドを用いると取得できる。


参考リンク
Array.prototype.indexOf() - JavaScript | MDN

ReactでBootstrapを使う

React JavaScript

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

https://react-bootstrap.github.io/

npm install react-bootstrap bootstrap

htmlファイルのheadタグ部分に、

<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
  crossorigin="anonymous"
/>

を追加する。CSSファイルを入れないと、デザインが反映されません。
自分独自のCSSファイルは、上記のCSSファイルの後に読み込むこと。

Reactのファイル内に

import Button from 'react-bootstrap/Button';

// renderのreturn内にて。
<ButtonToolbar>
  <Button variant="primary">Primary</Button>
</ButtonToolbar>

を追加する。

※注意点
作っている途中に、react-bootstrapを導入したら、リセットCSSが原因で、それまで書いていたデザインが崩れてしまった。できれば、最初から、導入すること。

CakePHP3でReactを利用する

CakePHP PHP

開発環境は、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を利用する

ffmpeg PHP

開発環境は、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を使ってみる

Python

開発環境は、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