Myu

2018年2月23日金曜日

railsについて

https://railstutorial.jp/chapters/basic_login?version=5.1#cha-8_footnote-8

上記リンクで、Railsを勉強してみる。とても丁寧で細かいところまで

説明してくれているので、わかりやすい。

ただ、Rails5.1だと、８章で途中、動かないところがあった。

Jqueryがなくなっていたためのようで、GEMFILEに追加してbundle installでOkだった。

2018年2月7日水曜日

久しぶりにCloud9とHerokuをGitHub経由で使ってみる

Railsなど構築が大変なので、とりあえずcloud9を使って、Herokuにアップしてみる。
https://qiita.com/HideakiSaito/items/5be1a45870a4c3d1a3c7
上記のリンクを参考にさせて頂く
ただ、若干手直しも必要だった。Postgresqlにすると、You should use PG::Connection, PG::Result, and PG::Error なるエラーが表示される。
解決方法は
https://bokunonikki.net/post/rails_pg/
を参考にさせていただく。

Railsの入門としては
https://openbook4.me/projects/92
が、初心者向けにわかりやすいようです。

2017年12月16日土曜日

React 試してみる

https://mae.chab.in/archives/2943
のリンクを参考にさせていただきました。

Babel等使わないでいいように、古いVer形式です
三目ならべです

 

<!DOCTYPE html>
<html>
  <head>
    <script src="http://fb.me/react-0.13.3.js"></script>
    <script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
    
    <style>
    body {
  font: 14px "Century Gothic", Futura, sans-serif;
  margin: 20px;
}

ol, ul {
  padding-left: 30px;
}

.board-row:after {
  clear: both;
  content: "";
  display: table;
}

.status {
  margin-bottom: 10px;
}

.square {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 34px;
}

.square:focus {
  outline: none;
}

.kbd-navigation .square:focus {
  background: #ddd;
}

.game {
  display: flex;
  flex-direction: row;
}

.game-info {
  margin-left: 20px;
}

</style>
    
    
  </head>
  <body>
    <div id="container">
</div>
<script type="text/jsx">





















var Square =React.createClass( {
render() {
  return (
    <button className="square" onClick={() => this.props.onClick()}>
      {this.props.value}
    </button>
  );
  }
  });

var Board  =React.createClass ( {

 renderSquare(i) {
  return <square value={this.props.squares[i]} onClick={() => this.props.onClick(i)} />;
  
 },
 
  render() {



    return (
      <div>
        
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
<div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
<div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
</div>
);
  }
});

var Game =React.createClass ({
 getInitialState() {
   return({  history: [{ squares: Array(9).fill(null) }] ,xIsNext: true,stepNumber: 0 })


 },
  handleClick(i) {
  var history = this.state.history;

  const current = history[this.state.stepNumber];
  const squares = current.squares.slice();
  if (calculateWinner(squares) || squares[i]) {
    return;
  }
  squares[i] = this.state.xIsNext ? 'X' : 'O';
  this.setState({
    history: history.concat([{
      squares: squares
    }]),
    xIsNext: !this.state.xIsNext,
    stepNumber: history.length,
  });
 },
 jumpTo(step) {
  this.setState({
    stepNumber: step,
    xIsNext: (step % 2) ? false : true,
  });
},
  render() {
  
   const history = this.state.history;
   const current = history[this.state.stepNumber];
   const winner = calculateWinner(current.squares);

  let status;
  if (winner) {
   status = 'Winner: ' + winner;
  } else {
   status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
  }
  
  const moves = history.map((step, move) => {
  const desc = move ?
    'Move #' + move :
    'Game start';
  return (
<li>
      <a href="#" onClick={() => this.jumpTo(move)}>{desc}</a>
    </li>
);
});

  return (
      <div className="game">
        <div className="game-board">
         <Board
          squares={current.squares}
          onClick={(i) => this.handleClick(i)}
         />
        </div>
<div className="game-info">
        <div>
{status}</div>
<ol>{moves}</ol>
</div>
</div>
);
  }
});

// ========================================

m=React.render(
  <game />,
  document.getElementById('container')
);

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}



    </script>
  </body>
</html>

2017年10月17日火曜日

MtsをMp4に変換するツール

Everioで撮影した動画ファイルがipadでは再生できなかったので変換ツールないか
探してみました。
ネットで同様のソフトがいろいろあるようでしたが、いずれも
無料だと制限がつくようだったので、ffmpegとvb.netで
即席でツールをつくってみました。
以下のところに置いています。
サンプル動画は羽黒山をEverioで撮影したものです
https://drive.google.com/file/d/0B4pVdxZ3b8JAWFh6V2M3Ui1mT3M/view?usp=sharing

2017年9月30日土曜日

vagrant ボックスの移行でつまづく

vagrantのボックスは他のPCに移行するとき　ネットワークまわりで注意が必要なようだ
Vagrantfileにはhostonlyの設定をひとつしか記述してないので、２つのethがしかも同じIpアドレスのものができて、おかしいと思っていました。
https://qiita.com/YusukeHigaki/items/36cd2d4b60f049815fc6
こちらを参考にさせていただきました
どうやら、Macアドレスが固定化される問題があるらしい。

また、いろいろ操作しているうちに
vagrant destroyを忘れると
起動時に Warning: Remote connection disconnect. Retrying...がでてしまう。
これもhttps://teratail.com/questions/38135 を参考にさせていただきました。

2017年9月23日土曜日

vagrant box 移行　覚書

おおまかな流れとして

すでに以前　作成した設定が残っているとうまくいかないことが多いようなので
あらかじめ、以下のような操作で　できるだけ不要なものは削除しておくといいようだ。
　vagrant halt
vagrant destroy 　
　vagrant box remove ボックス名

vagrant packageでエクスポート
別のPCの該当フォルダにpackage.boxをコピー
vagrant box add newboxname package.box
vagrant box listで確認

ここでいったん vagrant init
ただし、できたVagrantfileは編集する必要がある。
Vagrantfileでconfig.vm.box = "newboxname"　その他、ネットワーク等さまざまな初期設定を書き込む

vagrant up --provision
で起動

これらの操作をバッチファイルにまとめ、それをさらにC#でわかりやすく操作できるようにしてみた。コマンド知らない人にもサーバ構築できるようなものを試しにつくれないか検討中。

さまざまなPCで、インストールを試してみたら、うまくいかないものがあった。
　バッチコマンドの実行中に文字化けが、、どうやら、全角文字が原因らしい。
調べてみると、やはりそうでした。パス名の中に全角文字があるとうまくいかない仕様になっているとのこと。
　対策は、環境変数にVAGRANT_HOMEを追加すること。この環境変数により、ディフォルトパス（ユーザープロファイルのパス）でなく、任意に変更できる。そういえば、vagrant関連データを、c:\の直下にフォルダを作ってもうまく行かなかった。この方法なら、自分で好きなところにフォルダを作りそこに関連データを置ける。そしてそのフォルダ名は当然全角にはしないこと。

2017年9月17日日曜日

リバースプロキシについて

Macアドレスで制限があると、仮想ホストの運用しにくい？のでないか。
よくわからないけど、念のため、リバースプロキシを使って物理ホストのイーサネット
にアクセスしたものを、仮想ホストのイーサネットに転送させてみようかと考えた。
nginxが手軽で便利なようだ。
server {
listen 8080;
server_name i5;
location / {
proxy_pass http://192.168.1.111:8080;
proxy_redirect default;
}
としてみたら、なんとかうまくいった。
http://192.168.1.111:8080/とするとうまくいかなかった。

＜追記＞
ホストで8080を使っていたため、nginxを使うことにしたけれど、やはりホストの8080は停止して、シンプルにvagrantでポートフォワードを使うことにした