Myu: 2017

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日火曜日

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でポートフォワードを使うことにした

2017年9月16日土曜日

Dockerで注意必要なこと

その１　Dockerをいろいろ試し見ているが、なぜか文字化けが発生した。
ディフォルトではだめならしい。
こちらを参考に、cd /rootで
localedef -f UTF-8 -i ja_JP ja_JP.UTF-8　というコマンドを実行して、tomcatを再起動したら
解消した。このへんは、ネットの情報がないと、なんとも対処できそうにない。

その２　sambaがうまくいかない
ポートを指定してやる必要があるようだ。
こちらを参考にさせていただきました。

docker run -p 139:139 -p 445:445 のような指定をするとOkでした。

いろいろ、細かいところでひっかかるところがあるようです。

その３　vagrantの中でdocker runを行うとき、コンテナの中でプロセスを実行するには？
　ネット上で、例を見つけるのが大変だったが、cmd: という記述を追加することがわかる。
　結局、以下のようにすると　うまくいった。
　注意点として、vagrant upだけではだめで、vagrant up --provisionと打ち込まないとうまくdockerが動かない。
config.vm.provision "docker" do |d|
d.run "イメージ名（ただし、:は使わないほうがいい？）", cmd: "/init.sh" , args: " -e LANG=ja_JP.UTF-8 -p 139:139 -p 445:445 -p 8080:8080 --cap-add SYS_PTRACE -it -v /vagrant:/tmp/shared"
end

2017年9月9日土曜日

vagrantとDockerをざっと知る

http://qiita.com/hidekuro/items/fc12344d36d996198e96

上記のリンクが参考になりました。
簡単に仮想サーバを用意して
さらにそのなかに、いろいろなプロセスを簡単に動かせるので便利かもしれません。
うまく活用すれば環境構築がだいぶスムーズにできそうです。

ひっかかったところ
その１：vagrant でパブリックネットワークを固定Ipにする方法がよくわからない
結局、
config.vm.network :public_network, :ip => "192.168.1.123" , :netmask=>"255.255.255.0" , :bridge => "Intel(R) Ethernet Connection (2) I218-V"
のようにしてやるとうまくいった。ただし、Intel(R) Ethernet Connection (2) I218-Vの部分は自動では取得しないので、Windowsの場合は、ネットワークのイーサネットから接続の方法の欄あたりからコピペするしかない。このへんも自動取得してほしいところだが。。

その２：dockerのUbuntu14.04の中でなぜかtomcat7が起動しない
　ネットで調べたら、解決方法がでていた
https://stackoverflow.com/questions/29683231/tomcat7-fail-to-start-inside-ubuntu-docker-container

docker run --cap-add SYS_PTRACEとするらしい

その３：dockerのブリッジのIpアドレスの固定のしかたがわからない。
http://qiita.com/bellx2/items/21fdc3bdc6958f749f3e
に方法が出ていた。
たしかに/etc/default/dockerの
DOCKER_OPTS="--bip 192.168.1.126/24 "
を追加して、再起動したら、うまくいった。
ただ、こうすると　コンテナに192.168.1.1が割り振られてしまう。ここはすでに使っているので、対処療法的だけど　DOCKER_OPTS="--bip 192.168.1.130/25 としてみた。でも、これは、以下のことから、あまり意味が無いことが判明。

その４：やはりコンテナにアクセスできない。
docker run -p 8080:8080 　というようにしてやるといいらしい。
http://christina04.hatenablog.com/entry/2016/07/22/193000
すると、コンテナの192.168.1.129ではアクセスできないけれど
ブリッジの192.168.1.130やホストOSのアドレスでアクセスすると、コンテナ内の
サーバにアクセスできる。
いまいち、すっきりしないが、とりあえず、解決。

2017年9月7日木曜日

JAVA　Linuxではパスからファイル名がうまく取得できない

　Windowsでは、うまくいっても、Linuxではうまく動作しないということがよくある。ファイルアップロードの手直しをしている際に、またそういうところに遭遇する。
　パスからのファイル名の取得に関するメソッドgetName()です。\￥か/で違いがあるので、やむを得ないところもあるが、WIN,Linuxどちらでも使えるようにするためには、それなりの工夫が必要なようです。

　http://buzzword111.hatenablog.com/entry/2017/06/21/102518
　上記のリンクを参考にさせていただきました。

2017年9月4日月曜日

IE11ではFormDataのメソッドがすべて使えない

HTML5の機能としてFormDataが便利ですが
残念ながらIE11ではappendのメソッドしか使えないようです。
最初、これがわからず、ファイルのDrag&Dropのところで
Chromeで動くのに、IE11だと動かない現象に悩まされました。
getメソッドが使えないのが原因なので、結局getを使わずにappendする前に
必要な値は取得しておくことで解決しました。
よく考えれば当たり前の対策なのですが、getを無理に使うことばかりにとらわれてしまいました。

2017年9月3日日曜日

FormDataを使ってファイルアップロードとパラメータ渡しを同時に行う方法

ファイルのアップロードとパラメータ渡しを同時に行うのは意外とやりにくい。Formからボタンをクリックして行うのはまだいいとしても、Drag＆Dropなど行うには工夫が必要なようだ。

解決方法がこちらにでていた。
https://stackoverflow.com/questions/5512442/input-type-text-value-from-jsp-form-enctype-multipart-form-data-returns-null
これを参考にして　パラメータはHashを使ってみた。サーバのほうは、こんな感じです。
　File dirs = new File(path+"tmp");
if (!dirs.exists()) {
dirs.mkdir(); //make folders
}
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);

Iterator<FileItem> iterator = upload.parseRequest(request).iterator();
HashMap<String,String> map = new HashMap<String,String>();
String filename="";
while (iterator.hasNext()) {
　　　//ファイルはひとつが前提。複数ファイルなら最後のファイル名のみ取得
FileItem item = iterator.next();
if (!item.isFormField()) {
filename= item.getName();
item.write(new File(path+"tmp/" + filename));
}
else {
String otherFieldName = item.getFieldName();
String otherFieldValue = item.getString();
map.put(otherFieldName ,otherFieldValue);
}
}

クライアントのほうは
　　　var formData = new FormData();
formData.append('flg','foo');のようにパラメータを追加していく

　このFormDataに　ドロップされたファイルは
　　　var files = event.dataTransfer.files;
fd.append('file', files[i]);　とするとよいようだ。（iをforなどで処理する。）
　あとは、ファイルもパラメータも一緒にformDataとして非同期でサーバに送ります。
var uploadURL ="fileupload"; //Upload URL
$.ajax({
url: uploadURL,
type: "POST",
contentType:false,
processData: false,
cache: false,
data: formData,
success: function(data){
　　　　　　　　　..............というように

2017年8月30日水曜日

Java　参照渡し

Javaで関数に引数を渡す場合、参照渡し（正確にいうと、JAVAには参照渡しはないらしいが）になっていることに　きづかず基本的ミスをしてしまう。

関数の中で、配列のソートをやっているが、これが、関数外部に影響してしまったことに

気づかずにいる。

ディープコピーとやらが必要なようだ。

String[] aaa = {"1", "2", "3", "4"};

String[] bbb = Arrays.copyOf(aaa, aaa.length);

という方法が　こちらにあったので、参考にさせていただきました。

2017年8月11日金曜日

Java tomcatのパス取得

Strutsなどのactionでは
getServlet().getServletContext().getRealPath("/WEB-INF/file/")で絶対パスを取得できるが、それ以外ではできないようだ。
調べてみると、かわりにTomcatのパスが次の方法で取得できた。
new File("webapps/アプリ名/WEB-INF/file/").getCanonicalPath()+"\\";
なお、ディレクトリパスの場合は、上のように、最後に\\をつけないといけないようだ。（Windowsの場合）

Strutsで、バッチ処理を行う場合など、必ずしもactionを経由しない場合もあるので、ファイル処理は上記の方法がいいようだ。

2017年7月30日日曜日

tomcatの起動を速く　～groupsession等のカスタマイズ～

グループセッションをeclipseでカスタマイズしているが、メモリを結構食うので、tomcatの起動が遅い。そして、あちこち、設定をいじっているうちに、うまく起動しなくなることもある。ここらへんで、設定上注意することを覚書として、再度まとめてみた。

１コンパイルでバージョンが合わないというメッセージが出る場合は、　javaはjava7あたりに、tomcatはtomcat7あたりに統一するといいようだ。

２ tomcatの起動が遅いのは、メモリ設定を変えることでかなり改善するようだ。
ウインドウ＞設定＞Tomcat ＞jvm設定＞JVMパラメータへの追加で変えてみた。ネットでは、eclipse.iniという情報もあったが。念のため、両方とも増やしてみたら、だいぶ快適になる。

３　外部のMysqlとデータのやりとりするため、ドライバをどこに置くか迷ったが、WEB-INF/libに置いてみた。

※他に、eclipseに詳しい人にとってはたぶん、よく知っていることなのだろうけど、デバッグのタブで、実行中のセッションを手動でいったんすべて終了させて、Tomcatを起動させたほうが、結果的に速く起動するようだ。

2017年7月29日土曜日

gsession バッチ処理

サンプルを参考にコンパイルしてみるがエラーが発生
importで
import jp.groupsession.v2.batch.IBatchModel;が不足していた。
また、do5mBatch(Connection con,IBatchModel param) が正しい記述だった。

2017年7月22日土曜日

Javascript関数型プログラミング P187

IOモナドの例が出ていた。Maybeモナド、Eitherモナドなど、ラッピングにより、Nullや例外の扱いがスッキリする状況がわかりやすく書かれています。その流れで、IOモナドの説明になりますが、細かいところでよく確認しないと少し難しいところもでてきます。
const changeToStartCase =
IO.from(readDom('#student-name'))
.map(_.startCase)
.map(writeDom('#student-name'));

fromは
static from(fn){
return new IO(fn);
}
となり、fnそのものをIOにラッピングしている。
　fnは ()=>document.querySlector('#student-name').innerHTML
ということか

mapは
map(fn){
const self=this;
return new IO( ()=> fn(self.effect()));
}
ここでは、fnは１文字目を大文字にしたり、domへの書き込みということのようだ。
いずれもIOでラッピングされた中で変換されていくということか

ただ、changeToStartCaseだけでは、IO処理の宣言的な記述のみ
IOのインスタンス（関数をラッピングしただけのもの？）なので、何も実行されていないということらしい。
changeToStartCase.run();
でコードが処理される。
ちなみに
run(){
return this.effect();
}
となっている。

要するに、fromで、IOでラッピングした関数（ラッピングされる関数を効果関数と呼んでいるようだ）を用意して、ラッピングされたままの関数をmapで変換していき、できたものを、最後に実行させるということだろうか。

2017年7月9日日曜日

JavaScript関数型プログラミング　P１０５　ツリーを再帰で

ツリーなるデータ構造がむずかしい。

class Tree {
constructor(root) {
this._root=root;
}
static map(node,fn,tree=null){
node.value=fn(node.value);
if(tree===null) {
tree=new Tree(node);
}
if(node.hasChildren()) {
_.map(node.children,function (child) {
Tree.map(child ,fn, tree);
}); 　ここで、node.childrenという配列のmapを行うが、結局はひとつひとつのノードに対して、Tree.mapを施す（fn関数を適用）ということになる
}
return tree;
}

get root(){
return this._root;
}
}
　最初、treeの変化が気になったが、それよりも、Tree.mapにより、Nodeのvalueの形がすべて変わるということが　ポイントであるようだ。

2017年7月3日月曜日

H2データベースのコミット

H2データベースを埋め込みで使っている。
読み取りはOkだが、どうやら、一つのテーブルに複数アクセスあるとロックが
かかる？という情報がサイトに出ている。
そのせいだろうか、selectはokでもdelete,insertがうまくいかない。
いろいろ調べてみると、どうやらJavaのConnectionにはcommitというメソッドがあり
これがロックを解除してくれるらしい。早速ためしてみたら、delete、insertもできるようになった。commitなどというメソッドはMysqlでは使ったことがなかったので、わからなかった。データベースもいろいろあってなかなか大変。

2017年7月1日土曜日

Strutsでのファイルの読み書き

ファイルの読み書きは通常のサーブレットでは、できたのが、Actionだとできなくなっていた。
http://d.hatena.ne.jp/kawam/20060816
上記のサイトが詳しかった。これを参考に修正したところうまくアクセスできるようになりました。
thiis.getServlet().getServletContext().getRealPath
とすればいいようだ。

2017年6月29日木曜日

StrutsでJSPに一行に複数のデータがあるもの（List)を表示するには（Group　Session)

Group　Sessionのデータベースアクセスのサンプルを参考にいろいろ試してみた。
Strutsで Jsp表示にlogic:iterateなるものがあるけれど
これを使って、GroupModeのリストを表示したいと思いいろいろやってみたが
情報が少なくて苦労する。
結局http://www.ne.jp/asahi/hishidama/home/tech/struts/logic_iterate.html
のサイトが一番参考になりました。

<logic:iterate id="item" name="YoteiForm" property="gpList" type="jp.groupsession.v2.cmn.dao.GroupModel" >
<bean:write name="item" property="groupName"/><br>
</logic:iterate>
といった感じでやってみたら、うまくいきました。

YoteiAction:
YoteiForm yoteiForm = (YoteiForm)form;
ArrayList<GroupModel> gpList = gpDao.selectGroupNmList(usrSid);
yoteiForm.setGpList(gpList);
return map.getInputForward();

YoteiForm:
ArrayList<GroupModel> gpList＿ = new ArrayList<GroupModel>();
public void setGpList(ArrayList<GroupModel> gpList) {
gpList＿ = gpList;
}

public ArrayList<GroupModel> getGpList() {
return gpList＿ ;
}
といった感じです。

　Strutsは脆弱性の問題で、Springに移行しつつあるようですが、いまだにCOBOLやVB6が使われているように、しばらくは残るのだろうと思われます。新規で使うことはないにしても、カスタマイズする必要性はしばらく続きそうです。
　フレームワークを使いこなせるようになるまでには、まだまだ道は険しいようです。

2017年6月23日金曜日

eclipseでgroupsessionのコンパイル

　グループセッションでは、サイトでソースも公開されており、プラグインの作り方もでているので、試してみた。久々に、tomcatの設定をしたため、だいぶ試行錯誤が必要だった。
　最初うまくいかなかったが、原因はクリーン処理してからビルドしたことだった。必要なリソースファイルが、消えてしまってうまくいかなかったようです。classesフォルダの中をクリーンしてしまってはだめなようです。

　HDDでは、最新のeclipseがきつくなっています。SSDで使うことでだいぶストレスが緩和されるようになりました。

1　eclipseの最新版をセット。tomcatつきだと、何かと便利
２　tomcat7を使ってみた　webappsの中に目的のプロジェクタのフォルダを作成
gsessionという名称で作成。
　念のため、最初にソースなしのものを作成し、さらにソース版をコピーした。（同一ファイルはスキップさせるようにして）
３　eclipseのwrokspace切り替えでtomcatのwebappsを指定
４　eclipse のファイルシステムからプロジェクトを開くをクリック＞ディレクトリ＞さきほどのtomcatの中のgsessionフォルダを指定

あとは、サイトの説明にあるように
*WEB-INF/LIBのライブラリの登録、tomcatのライブラリ登録、JREの登録
*コンパイラを1.6にする等（1.7や1.8でもOkなような気もしますが。。）
*WEF-INF/pluginの中の各プラグインの中のsrcフォルダを、ソースフォルダとして登録が必要

サイトの説明にないこととして
＊ビルド結果の出力先として、ディフォルト出力フォルダー　gsession/WEB-INF/classes　の設定が必要です。(プラグイン追加の場合はこちらには追加ならないようですが）
＊WEB-INF/plugin/commonなどフォルダの中にMessage.propertiesがあるものも、ソースフォルダとして登録しておいたほうがいいようです。

プラグインの作成について
　サイトの説明でほほできますが、build.xmlの中の設定で、ビルドエラーを回避するため
<property name="SRC.ENC" value="UTF-8" />と修正する必要がありました。

eclipse4.6へのtomcat plugin

tomcat pluginはマーケットプレイスからはうまくインストールできなかった
https://sourceforge.net/projects/tomcatplugin/files/
こちらから　zipファイルをダウンロードして
これをヘルプの新規ソフトウエアインストール＞追加＞アーカイブでzip指定

2017年6月5日月曜日

three.js

javascriptにもさまざまな、ライブラリがある。
three.jsは、３D表示に特化したライブラリ。
サンプルプログラムに、地球を表示するものがあった。
地球の自転軸は23.4°ほど、公転面の垂直方向に対して傾いているが
このように、回転軸を傾けて動かす方法がなかなかわからなかった。

var axis = new THREE.Vector3(0.3,0.7,0);で、傾いた回転軸のベクトルaxisを決め

group.rotateOnAxis (axis, Math.PI/100);　で球体を回転させる

という手順でうまくいった。

ただ、北極、南極を軸にして回転させるまでにはいかなかった。そのためには、もう少し工夫が必要なようだ。

https://rasp.cld9.work/py/earth

※若干、バグがあり、修正2017/6/17

var axis = new THREE.Vector3(0.397,0.918,0);
としました。このベクトルは単位ベクトルにする必要ありました。
そうしないと、回転している間に形がゆがむようでした。

Struts

Strutsを少しさわってみた。
フレームワークというのは、暗黙の決まり事みたいなものが多いと感じる。
そうしないと、グループで仕事をするときに統一とれなくなるのかもしれない。
railsやspringでは、「設定より規約」という方針があるようだけど、そういった
方針へ移行している感じがする。　

たとえばstruts-config.xmlで
<message-resources parameter="MessageResources"/>
としてリソースを指定するけど、実際のファイル名はMessageResources.propertiesだったりする。
この場合、WEB-INF/src/MessageResources.propertiesという位置になければならない。

2017年5月20日土曜日

AIで仕事はなくらならい

自分が以前ブログで書いていたことが、最近になって
言われるようになっている。

人工知能としての機械学習など、結局、センサーが生身の人間の体においつくのはまだ
まだ大変だということが、以下のサイトに出ている。

https://www.businessinsider.jp/post-827

2017年5月12日金曜日

ZabbixでL2スイッチの監視（覚書）

Ubuntuにzabbixを入れて、L2スイッチを監視する設定にしてみた。
・最初テンプレートなどから、いろいろ試してみたが
うまくいかなかった。機種によって微妙な違いがあるのかとも思い、
Ubuntuに、snmpのツールを入れて、コマンド操作でスイッチから
OIDのリストを取得し、その情報をもとに、ネットで検索したら
なんとか、送受信のパケットやら、破棄パケット、ブロードキャスト等のOIDがわかってきた。
・データはあくまで蓄積値ということに気づく、zabbixの中で差分を求める設定にできることを知る。なんとか、通信状況の推移を表示するところまでこぎつけた。

<インストール方法＞
apt-get install fonts-vlgothic
wget
http://repo.zabbix.com/zabbix/3.0/ubuntu/pool/main/z/zabbix-release/zabbix-r
elease_3.0-1+trusty_all.deb
apt-get update
dpkg -i zabbix-release_3.0-1+trusty_all.deb
apt-get install zabbix-agent zabbix-server-mysql zabbix-frontend-php apt-get install snmp

$ mysql -uroot -p
Enter password:
mysql> create database zabbix;
mysql> grant all privileges on zabbix.* to zabbix@localhost identified
mysql> by
'password' ;
mysql> exit

以下の操作も必要なようです
$ mysql -uroot -p<password>
mysql> create database zabbix character set utf8 collate utf8_bin; quit;

Zabbixの設定ファイル/etc/zabbix/zabbix_server.confのデータベースの接続情報を
修正します。
/etc/zabbix/zabbix_server.conf
DBHost=localhost
DBName=zabbix
DBUser=zabbix
DBPassword=password
DBHostは、設定ファイルのコメントに「 If set to localhost, socket is used for
MySQL.」とあるのでMySQLの場合は必須です。

$ zcat /usr/share/doc/zabbix-server-mysql/create.sql.gz | mysql -uroot zabbix -p Enter password:

$ sudo vi /etc/zabbix/zabbix_server.conf
設定内容は以下の通りです。
DBPassword=password

$ sudo vi /etc/apache2/conf-enabled/zabbix.conf
設定箇所は以下の部分です。
php_value date.timezone Asia/Tokyo

$ sudo service zabbix-agent start
$ sudo service zabbix-server start
$ sudo service apache2 restart

うまくいかないときは、一度PCの再起動が必要

※WEB画面http://ホスト/zabbix/で表示させると　以下のエラー出ることあり、以下
のように対処
「PHP Timezone」に「NG」が表示され、インストールが進まない。php.iniを修正し
ないといけない
pico /etc/php5/apache2/php.ini　(php.iniの場所はインストールの仕方によって変
わる）
で、timezoneで検索。コメントアウトされているので、タイムゾーンを設定。
;date.timezone =
date.timezone = Asia/Tokyo
php.iniを保存後、apacheを再起動。その後、zabbixのインストール画面で「Retry」
ホタンを押したら「OK」表示に変わり、インストールを続行できた。
Phpでmysqlが使えない状態ならば
apt-get install libapache2-mod-php5 php5-mysql
apt-get install libapache2-mod-auth-mysql
も必要

ID：Admin　　ｐw:zabbixでログインします
右上の人の形のアイコンを選択して、LanguageでJapaneseを選択します。日本語は、
デフォルトでインストールされているので選択するだけです。

自動起動設定
sudo sysv-rc-conf zabbix-agent on
sysv-rc-conf zabbix-server on

○***************************スイッチの監視設定

※うまくzabbix-serverが起動しないとき
mkdir /var/log/zabbix-server/
chmod 777 /var/log/zabbix-server/
とする
/usr/sbin/zabbix_server
で起動できる

/ect/init.d/zabbixserverというファイルに
/usr/sbin/zabbix_server -c /etc/zabbix/zabbix_server.conf
というスクリプト作成し chmod +x /ect/init.d/zabbixserver
/etc/rc.localというファイルに
/ect/init.d/zabbixserverを追加した

＜Zabbixの設定について＞
・参考資料
http://www.oidview.com/mibs/712/LANART-AGENT.html
にOIDのリストがあるので、参考にできる

また、スイッチから、telnetやsshで、OIDのリストを取得して
それをもとにsnmp　OIDをきめた(snmpのインストールが必要）

・基本的な操作
http://ホスト名/zabbix/index.php
Username:Admin　　Password:zabbix
①設定＞ホストで
　ホスト名、グループ（Discovered hosts Network Templatesなど、このへんの詳
細は不明）を選択
SNMP
インターフェースに対象のL2スイッチのIPアドレス指定　ポートが１６１
　bulkリクエストを使用は　チェックはずす

・ホストを再度クリック
　変更したいホストのところのアイテムをクリック＞アイテムの作成＞
　名前を任意で入力　タイプはsnmp v2エージェント　キーも英数字で任意
SNMP OIDに調べたい項目を上記資料をもとに入力
　ポート１の受信パケット数をみたいならiso.3.6.1.2.1.2.2.1.10.1
　SNMPコミュニティはL2スイッチにあわせてpublic
保存時の計算は「差分/時間」とします。こうしないと、累積のパケットが表示さ
れてしまいます。
最後に更新
・再度ホスト一覧にもどる
　グラフをクリック＞グラフの作成＞名前は任意
　　アイテム＞追加＞表示たいアイテムを選択＞選択＞追加
・表示をみるには
　監視データ＞グラフ＞ホスト（スイッチ）を選択＞表示したグラフをコンボボックス
から選択

2017年5月5日金曜日

関数型プログラミングの基礎　IOモナド

　IOモナドは関数の形であり、FUN[WORLD=>PAIR[T,WORLD]]であることに注意が必要、その分ややこしくなっている。

　したがってunit:: T => IO[T] のIO[T]の部分が上記の関数の形になっていることが
下記のスクリプトで確かめられる。
anyがT、 (world) => return pair.cons(any, world);がFUN[WORLD=>PAIR[T,WORLD]]ということ。

　また、flatMap:::: IO[T] => FUN[T => IO[U]] => IO[U]としてみると
instancdAが IO[T]、actionABがFUN[T => IO[U]] 、 return (world) => 以降が IO[U]ということになる。
　actionABはT からIO[U]を作る関数で、TはIO[T]つまりnewPair = instanceA(world)のnewPair (value, newWorld) からvalue（ここではT）をmatchを使って取り出してる。
確かに、actionAB(value)(newWorld)はFUN[T => IO[U]] つまりFUN[T =>FUN[WORLD=>PAIR[U,WORLD]] ] （∵IO[U]=FUN[WORLD=>PAIR[U,WORLD]])となっていることが確認できる。

var IO = {
unit: (any) => {
return (world) => { return pair.cons(any, world); };
},
flatMap: (instanceA) => {
return (actionAB) => {
return (world) => {
var newPair = instanceA(world); // 現在の外界で instanceA実行
return pair.match(newPair,{
cons: (value, newWorld) => {
return actionAB(value)(newWorld); // 新しい外界で、actionAB(value)で作られたIOアクションを実行
}
});
};
};
},

2017年5月4日木曜日

関数型プログラミングの基礎　継続を使った非決定計算機

継続について書いてあるが、かなりこみ入っている。
とりあえず、以下のようにしたら、動作させることはできた。
おおまかな流れを把握するので精一杯だった。
式の評価とか、なんらかの構造をもつものについてのアルゴリズムは、複雑になりやすいので、こういった方法で少しでも、整理してプログラミングをしていくということなのでしょう。。。

①add(amb(リスト１）,amb(リスト２）)がdirverの中のcalculateの第１引数へ
②calculateの中のmatchにより、add:(x,y)にマッチ
③その中で再帰でcalculateの第１引数へ amb(リスト）の形なので
④amb:(choice)にmatch　また再帰でcalculateの第１引数へ headであるnum()の形で
⑤最終的には num:(n)にmatch　return contiuesOnSuccess(n,contiunesOnFailure);
に到達する。 contiuesOnSuccessは第１引数anyvalue（今の場合n)をそのまま返している。suspendedComputationにはfailureのほうにある残りのリストが保持されることになるらしい。

代数的データ構造のパターンマッチについては、以前でてきた方法
var exp = {
match : (anExp, pattern) => {
return anExp.call(exp, pattern);
},
　　 amb : (alist) => {
return (pattern) => {
return pattern.amb(alist);
};
},
num : (n) => {
return (pattern) => {
return pattern.num(n);
};
},
add : (exp1, exp2) => {
return (pattern) => {
return pattern.add(exp1, exp2);
};
}
};

評価関数
var calculate = (anExp, continuesOnSuccess, continuesOnFailure) => {
return exp.match(anExp, {
※数値の場合 num: (n) => {
return continuesOnSuccess(n, continuesOnFailure);
},
※足し算の場合 add: (x, y) => {
return calculate(x, (resultX, continuesOnFailureX) => {
return calculate(y, (resultY, continuesOnFailureY) => {
　引数xとyがともに成功すれば、両者の値で足し算を計算
return continuesOnSuccess(resultX + resultY, continuesOnFailureY);
}, continuesOnFailureX);
　 y の計算に失敗すれば、xの失敗継続を渡す
}, continuesOnFailure);
　x の計算に失敗すれば、おおもとの失敗継続を渡す
},
※amb式の場合 amb: (choices) => {
var calculateAmb = (choices) => {
return list.match(choices, {
empty: () => {
return continuesOnFailure();
},
cons: (head, tail) => {
return calculate(head, continuesOnSuccess, (_) => {
　失敗継続で後尾を計算
return calculateAmb(tail);
});
}
});
};
return calculateAmb(choices);
}
});
};

非決定計算機の駆動関数
var driver = (expression) =>{　
var suspendedComputation = null;//中断された計算を継続として保存する変数
　成功継続
var continuesOnSuccess = (anyValue,
continuesOnFailure) => {//再開に備えて、失敗継続を保存
suspendedComputation = continuesOnFailure;
return anyValue;
};
　失敗継続
var continuesOnFailure = () => {
return null;
};
　内部に可変な状態suspendedComputationを持つクロージャーを返す
return () => {　//中断された継続がなければ、最初から計算
if(suspendedComputation === null) {
return calculate(expression, continuesOnSuccess, continuesOnFailure);
} else {　//中断された継続があれば、その継続を実行
return suspendedComputation();
}
};
};

リストモジュールも必要
// expect(array).to.an('array');はコメントアウトしないとだめだった。

 
 var list  = {
  match : (data, pattern) => {
    return data.call(list, pattern);
  },
  empty: (_) => {
    return (pattern) => {
      return pattern.empty();
    };
  },
  cons: (value, alist) => {
    return (pattern) => {
      return pattern.cons(value, alist);
    };
  },
  head: (alist) => {
    return list.match(alist, {
      empty: (_) => {
        return null;
      },
      cons: (head, tail) => {
        return head;
      }
    });
  },
  tail: (alist) => {
    return list.match(alist, {
      empty: (_) => {
        return null;
      },
      cons: (head, tail) => {
        return tail;
      }
    });
  },
  isEmpty: (alist) => {
    return list.match(alist, {
      empty: (_) => {
        return true;
      },
      cons: (head, tail) => {
        return false;
      }
    });
  },
  /* append:: LIST[T] -> LIST[T] -> LIST[T] */
  append: (xs) => {
    return (ys) => {
      return list.match(xs, {
        empty: (_) => {
          return ys;
        },
        cons: (head, tail) => {
          return list.cons(head, list.append(tail)(ys)); 
        }
      });
    };
  },
  /* map:: LIST[T] -> FUNC[T -> T] -> LIST[T] */
  map: (alist) => {
    return (transform) => {
      return list.match(alist,{
        empty: (_) => {
          return list.empty();
        },
        cons: (head,tail) => {
          return list.cons(transform(head),list.map(tail)(transform));
        }
      });
    };
  },
  reverse: (alist) => {
    var reverseAux = (alist, accumulator) => {
      return list.match(alist, {
        empty: (_) => {
          return accumulator;  // 空のリストの場合は終了
        },
        cons: (head, tail) => {
          return reverseAux(tail, list.cons(head, accumulator));
        }
      });
    };
    return reverseAux(alist, list.empty());
  },
  toArray: (alist) => {
    var toArrayAux = (alist,accumulator) => {
      return list.match(alist, {
        empty: (_) => {
          return accumulator;  // 空のリストの場合は終了
        },
        cons: (head, tail) => {
          return toArrayAux(tail, accumulator.concat(head));
        }
      });
    };
    return toArrayAux(alist, []);
  },
  fromArray: (array) => {
   // expect(array).to.an('array');
    return array.reduce((accumulator, item) => {
      return list.append(accumulator)(list.cons(item, list.empty()));
    }, list.empty());
  }
};

テスト
var ambExp = exp.add(
exp.amb(list.fromArray([exp.num(1),exp.num(2)])),
exp.amb(list.fromArray([exp.num(3),exp.num(4)])));
var calculator = driver(ambExp);

calculator() ;
calculator() ;
calculator() ;
calculator() ;

2017年4月30日日曜日

関数型プログラミングの基礎　リスト７．６２　reduceメソッドによるfromArray関数

var fromArray= (array) => {
retrun array.reduce((acumulator,item) => {
return list.append(acumulator)(list.cons(item,list.empty()));
},list.empty());
};

reduceは、配列用のfoldr関数という説明があった。
最初、なぜ、それで、上記のfromArrayがリストを返すのかがよくわからなかったが、
よく考えたらわかった。
accumuratorがリスト（配列からreduceを使って蓄積されたもの）だから、確かにそうなる。

2017年4月22日土曜日

yコンビネータ

関数型プログラミングの基礎に
コラムとしてYコンビネータのことがでていた。

わかったような、わからないような。。。
なぜ明示的に再帰を使わずに、再帰ができるかの証明がWikipediaに出ていた。

https://ja.wikipedia.org/wiki/%E4%B8%8D%E5%8B%95%E7%82%B9%E3%82%B3%E3%83%B3%E3%83%93%E3%83%8D%E3%83%BC%E3%82%BF

他のサイトからscriptをコピペして試してみた
<script>
function Y(f) {
return (function(g) {
return function(m) {
return f(g(g))(m);
};
})(function(g) {
return function(m) {
return f(g(g))(m);
};
})
}

var factorial = Y((fact) => {
return (n) => {
if (n==0) {
return 1;
}else {
return n*fact(n-1);
}
};
});
alert(factorial(4));
</script>

2017年4月11日火曜日

elm使ってみた

　pipeが標準装備されてるようなjavascriptのフレームワークでもないかといろいろ見ていたら、elmという言語を見つける。
　Haskellっぽい言語で、javascriptにコンパイルして使う。
手軽に関数型プログラミングを試せる点では優れものですが、最新情報は英語の資料でみるしかない。signalとやらを一時期使っていたけど、最新版ではsubscriptionを使うのだとか、変化も激しい。これから注目されそうな発展途上言語といったところでしょうか。

少し試しみた。

import Html exposing (beginnerProgram, div, button, text)
import Html.Events exposing (onClick)


main =
  beginnerProgram { model = "0", view = view, update = update }


view model =
  div []
    [ button [ onClick One ] [ text "1" ]
    , button [ onClick Two ] [ text "2" ]
    , button [ onClick Pl ] [ text "+" ]
    ,  div [] [ text model ]
    ]


type Msg = One | Two | Pl


update msg model =
  case msg of
    One ->
      model++"1"
    Two ->
      model++"2"
    Pl ->
      model++"+"

コンパイラはオンラインのもので
http://elm-lang.org/try
が使える。PCにインストールできない環境でも、上記のサイトでコンパイルして、ソースを表示して、javascriptをコピペして、htmlファイルにしておけば、保管できる。

2017年4月9日日曜日

複雑な条件分岐は、関数型で処理したほうががシンプルになる

元のサイトは
https://medium.com/@chetcorcos/functional-programming-for-javascript-people-1915d8775504で、和訳された方のサイトが
http://postd.cc/functional-programming-for-javascript-people-1/
です。
各関数は１つだけ処理をおこなうので、関数の合成がわかりすい。
これを、if文等で処理するのは、複雑になることが、よくわかります。

pipe は配列にある関数を順に処理する便利な関数ですが、javascriptに標準である関数かと思ったらそうでなく、以下のように簡単に、つくれるということが判明。
よくみたら、上記サイトにも定義されていたのを見逃してしまっていました。
http://javascript-demo.w3c.tokyo/js/status/740

試しに、自分でもつくってみました。関数定義の手間はかかりますが、その分複雑な条件分岐が必要なプログラミングでは威力を発揮しそうです。

<script>
const faisatu = (name) => "おはようございます "+name;
const caisatu = (name) => "おはよう"+name;

const male = (name) => name+"君";
const female = (name) => name+"さん";
const doctor = (name) => name+"先生";

//alert(faisatu(male("佐藤")));

const identity = (x) =>x;

const pipe = (fns) => (x) => fns.reduce((v, f) => f(v), x);

const aisatu = (name,options) => {
 return pipe([options.formal ? faisatu : caisatu,
  options.male ? male : options.female ? female :  options.doctor ? doctor :  identity ])(name)
};

var opt = {formal:false,male:false,female:false,doctor:false};

alert(aisatu("鈴木",opt));

</script>

2017年4月2日日曜日

関数型プログラミングの基礎　P２７７

リスト７．９１、７．９２のmatchiの定義を exp.call(pattern,pattern)から、exp(pattern)にかえてみた。これでも動くようだが、call(pattern,pattern)を使う意味がいまいちわからない。

<script>
 /* #@range_begin(algebraic_type_maybe) */
      var maybe = {
        match: (exp, pattern) => {
          return exp(pattern);
        },
        just: (value) => {
          return (pattern) => {
            return pattern.just(value);
          };
        },
        nothing: (_) => {
          return (pattern) => {
            return pattern.nothing(_);
          };
        }
      };
      /* #@range_end(algebraic_type_maybe) */

var MAYBE = {
        /* #@range_begin(maybe_monad) */
        /* unit:: T => MAYBE[T] */
        unit: (value) => {
          return maybe.just(value);
        },
        /* flatMap:: MAYBE[T] => FUN[T => MAYBE[U]] => MAYBE[U] */
        flatMap: (instanceM) => {
          return (transform) => {
            return maybe.match(instanceM,{
              /* 正常な値の場合は、transform関数を計算する */
              just: (value) => { 
                return transform(value);
              },
              /* エラーの場合は、何もしない */
              nothing: (_) => { 
                return maybe.nothing();
              }
            });
          };
        },
        /* ヘルパー関数  */
        getOrElse: (instanceM) => {
          return (alternate) => {
            return maybe.match(instanceM,{
              just: (value) => {
                return value;
              },
              nothing: (_) => {
                return alternate;
              }
            });
          };
        },
        /* #@range_end(maybe_monad) */
      };

      
       var add = (maybeA,maybeB) => {
          return MAYBE.flatMap(maybeA)((a) => {
            return MAYBE.flatMap(maybeB)((b) => {
              return MAYBE.unit(a + b);
            });
          });
        };
        var justOne = maybe.just(1);
        var justTwo = maybe.just(2);

alert(MAYBE.getOrElse(add(justOne,justOne))(null) );
   alert(MAYBE.getOrElse(add(justOne,maybe.nothing()))(null));
   
        
</script>

2017年3月31日金曜日

関数型プログラミングの基礎　代数的データ構造のmatch関数

scalaにある便利なパタンマッチをjavascriptで実現する方法が書いてあった。

var empty = () => {
return (pattern) => {
return pattern.empty();
};
};

var match = (data,pattern) => {
return data(pattern);
};

match(empty(),{
empty: (_)=> {
return true;
},
cons: (head,tail) => {
....
}
}); //ここでは、empty()にマッチして　trueが返される。

2017年3月29日水曜日

関数プログラミングの基礎　P67

無限ストリームの例が出ていた。twoStepは任意の関数として、さまざまな無限数列がつくれるということのようです。
var iterate = (init) => {
return (step) => {
return [init, (_) => {
return iterate(step(init))(step);
}];
};
};

var twoStep = (n) => {
return n+2;
};

var evenStream = iterate(2)(twoStep);
　ただ、ふと、この数列の値はどうやってとりだすのか考えてしまった。
evenStream[1]()　
evenStream[1]()[1]()
evenStream[1]()[1]()[1]()
という具合に、入れ子になった状態のストリームの中身を確かめるしかないのだろうか？
と思っていたら　P69にelemAtという要素を求めるために関数が出てきており疑問は解決しました。

2017年3月28日火曜日

関数型プログラミングの基礎

javascriptでも関数型プログラミングができるということで、上記の書籍を読んでみた。
さっそく、リスト２．４で　少し混乱する。
　var get = (key, obj) =＞ {
return obj(key); 　
};
var set = (key, value, obj) => {
　　return (key2) => {
if(key === key2) {
return value;
　 } else {
　 return get(key2,obj);
}
};
　};

var ob;
ob=set('a',1,ob); １
ob=set('b',2,ob);　２
などと試し見た。
get('a',ob);
1
get('b',ob);
2

と、確かにできた。

１ではob('a')が1へ対応する関数
(key2) =＞ {
if ('a'===key2) {
return 1;
} else {
return ob(key2);
}
};
};　ができて
２ではob('b')が２へ対応する関数
(key2) =＞ {
if ('b'===key2) {
return 2;
} else {
return ob(key2);
}
};
};
ここのob(key2)は
ob('a')が１へ対応するもの、つまり１の関数がきている
これを再帰的に繰り返しているということだろうか？

2017年3月25日土曜日

二次方程式を解く javascript

javascriptの勉強のためにつくってみた。

利用させていただいたサイト
https://www.mathjax.org/
http://d.hatena.ne.jp/kochann/?of=6
問題を乱数で出題するようにしています。
.netなどでつくるより、つくりやすいところとそうでないところがあり、一長一短があるような気がします。
javascriptは、型の定義の融通がきく半面、何の型なのか常に意識する必要はあるようです。画面上の細かい調整にいまいち慣れてないので、レイアウトでけっこう時間がかかってしまいます。あと、^2など２乗の計算を認識しない？ようです。*+-は大丈夫なようですが。
　さまざまなパータンの二次方程式に対応させるため、だいぶ長くなってしまいました。
2017.5.9 bug fix　有理数解のときのメッセージ表示に不具合あったものを修正しました。

 
 <!DOCTYPE html>
<html>
  <head>
    <title>２次方程式</title>

<style type="text/css">
<!--

div {font-size:50px;}
span#hyoka {color:#ff0000;font-size:30px;}
button {font-size:40px;}

-->
</style>
</head>
  
  <body >
      <script type="text/javascript"  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    TeX: { equationNumbers: { autoNumber: "AMS" }},
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      processEscapes: true
    },
    "HTML-CSS": { matchFontHeight: false },
    displayAlign: "left",
    displayIndent: "2em"
  });
</script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

  <br>
 二次方程式を解の公式をつかって解きましょう　　<button id="btn" value="ans" style="font-size:20px;">答えを見る</button><br><br>
    <input type="radio" name="ptrn" value="kihon"  checked >
    <label >レベル０（aの係数が１）</label> 
    <input type="radio" name="ptrn" value="noroot" >
    <label >レベル１（ルート計算なし）</label> 
    <input type="radio" name="ptrn" value="yaku" >
    <label >レベル２（約分あり）</label>
    <input type="radio" name="ptrn" value="seisu">
    <label >レベル３（有理数解）</label> 
   <button id="btn" value='shutudai' style="font-size:20px;">を出題</button><br><br>

<table width=1000>
<tr>
<td width=40% valign=top>
<div id='mondai'>
</div>
<div id='waku'>
</div>
<span id='hyoka' ></span><br>
</td>
<td>
<button id="btn" value='7'>7</button>　
<button id="btn" value='8'>8</button>　
<button id="btn" value='9'>9</button><br>
<button id="btn" value='4'>4</button>　
<button id="btn" value='5'>5</button>　
<button id="btn" value='6'>6</button><br>
<button id="btn" value='1'>1</button>　
<button id="btn" value='2'>2</button>　
<button id="btn" value='3'>3</button><br>
<button id="btn" value='0'>0</button>　
<button id="btn" value='×'>*</button>　
<button id="btn" value='\pm'>±</button>　 
<button id="btn" value='-'>-</button>　
<button id="btn" value='+'>+</button><br>
<button id="btn" value='('>(</button>　
<button id="btn" value=')'>)</button>　
<button id="btn" value='x='>x=</button>
<button id="btn" value=','>,</button>
<button id="btn" value='frac' style="font-size:30px;">分の</button>
<button id="btn" value='sqrt' >√</button><br>
<button id="btn" value='cls' style="font-size:30px;">１行消</button>
<button id="btn" value='bs' style="font-size:30px;">１字消</button>
<div id='ans' style='display:none;'>
</div>
</td>
</tr>
</table>
<script>
var mode='';  var bunbo='';  var bunshi='';  var root='';  var gyo=0;
var nk;
var a,b,c;
var seikairafter; var aseikaivpre; var aseikaisi ; var aseikaibo;
var flg1,flg2,kmm;

 $(function() {
  $('button').click(function(e) { 
       var st=e.target.value;
       

       
       if(st=='ans') {
        $('#ans').toggle();
        exit;
       }
       
    if(st=='shutudai'){//***********************************************shutudai
     mondai();
     exit;
    }
  //****************************************************************************
    if (st.trim()==','){
     kmm=true;     
    }
  
    if (st=='sqrt'||st=='frac'||st=='default') {
     if (bunsi=='1' && st=='frac') {
      alert('分母１は分数になりません');
      bunbo='1';
      bunsi='';
      mode='nofrac';
     }else if(bunsi!='1' && st=='frac'){    
      if (mode=='nofrac'){ //分数状態でなければ「分の」をクリックすると、それまでの入力を分母にコピーする
       bunbo=bunsi;
       bunsi='';
       mode='frac';
      }else {//それ以外の状態ならば「分の」をクリックすると、そのままルートの外を変更できる
       mode='frac';
      }

     }else{
      mode=st;  
     }     
     nk.disp(bunbo,bunsi,root,mode);
     exit;
    }
  
    if (st=='x=') {
      bunbo='1';bunsi='';root='';
      mode='nofrac';      
      gyo=gyo+1; 
      nk=new Keisan('s'+gyo);
      nk.disp(bunbo,bunsi,root,mode);

     exit;
    }
  
    if (st=='cls'){
     $('#s'+gyo).remove();
     gyo=gyo-1;
     kmm=false;
    }
    
   
  
 switch (mode){
    case 'frac':
    case 'nofrac':
      if (st=='bs') {
        if(bunsi.substr(bunsi.length-3)=='\\pm')
        {bunsi=bunsi.substr( 0, bunsi.length-3) ;} 
       else
        {bunsi=bunsi.substr( 0, bunsi.length-1) ;}
      }else{
       bunsi=bunsi+st;
      }
      break;
     case 'sqrt':
      if (st=='bs') {
       root=root.substr( 0, root.length-1 ) ;
      }else{
       root=root+st;
      }
      break;
     default:
      if (st=='bs') {
       bunbo=bunbo.substr( 0, bunbo.length-1 ) ;
      }else{
       bunbo=bunbo+st;
      }
      break;
     }

     nk.disp(bunbo,bunsi,root,mode);  
     hanbetu(bunbo,bunsi,root);
    
  });
});


 //****************************::::
 function hanbetu(bunbo,bunsi,root) {
    var bunbox=bunbo;
    var bunsix=bunsi;
      
    if (bunsix.substr(-2,2)=="pm"){//末尾±なら削除
     bunsixx=bunsix.substr(0,bunsix.length-3);
     rpr="1";
     
    }else if(bunsix.indexOf("pm")>=0){  
     tmp=bunsix.replace("\\pm",",");
     var bsx=tmp.split(",");
     bunsixx=bsx[0];
     rpr=bsx[1];      
    }else {       
     bunsixx=bunsix;rpr="1";
    }
        //    alert(bunsi+" "+bunsixx+" "+rpr);

    var rootx=root;
    bunbox=bunbox.replace(/×/g,"*");
    bunsix=bunsixx.replace(/×/g,"*");
    rootx=rootx.replace(/×/g,"*");

    bo=eval(bunbox);  si=eval(bunsix);  ro=eval(rootx);
  
    rpre=eval(rpr)*aOfaRootb(soinsu(ro));
    rafter=bOfaRootb(soinsu(ro));
      
  // alert(bo+" "+si+" "++"root"+);
   //*********************ここから先にまだエラーがあり

  gc=gcd3(bo,si,rpre);
  abo=bo/gc;
  asi=si/gc;
  arpre=rpre/gc;



// alert("最終計算値＝正解  "+abo+"="+aseikaibo+" "+asi+"="+aseikaisi+" "+arpre+"="+aseikairpre+" "+rafter+"="+seikairafter);
  //入力値                 : bunbox      bunsix    rpr              rootx
  //入力値からの最終計算値 ：abo 分母    asi分子　　apreルートの外　　rafterルートの中
  //正解                   :aseikaibo    aseikaisi   aseikaipre       seikairahter
  


  if(bunbox==aseikaibo.toString(10) && bunsix==aseikaisi.toString(10) && rpr==aseikairpre.toString(10) && rootx==seikairafter.toString(10)  ) {
   if(rootx!='1') {  $('#hyoka').text('正解');} //ルートがとれないときはこれで正解
  }else if(abo==aseikaibo && asi==aseikaisi && arpre==aseikairpre && rafter==seikairafter){//無理数解で、途中計算Okの場合          
   $('#hyoka').text('あと少し');
  }else if(seikairafter==1){//有理数解の場合
        a1=aseikaisi+aseikairpre;a2=aseikaisi-aseikairpre;
        gc1=gcd(Math.abs(a1),aseikaibo);gc2=gcd(Math.abs(a2),aseikaibo);
        seikai1si=a1/gc1;   seikai1bo=aseikaibo/gc1;
        seikai2si=a2/gc2;   seikai2bo=aseikaibo/gc2;
        
      //  alert(seikai1si+'/'+seikai1bo+'?'+bunsix+'/'+bunbox);
      if (eval(bunbox)<0) {
         bunsix=(eval(bunsix)*(-1)).toString(10);        
         bunbox=(eval(bunbox)*(-1)).toString(10);
        }//もし、分母をマイナスにしていたら、便宜上、分子にマイナスをかけ、分母を＋に 分母は常に＋として評価したいので
      flg1=flg1||(eval(bunbox)==seikai1bo&&eval(bunsix)==seikai1si);
      flg2=flg2||(eval(bunbox)==seikai2bo&&eval(bunsix)==seikai2si);
      
     if(flg1&&flg2) {
       $('#hyoka').text('正解');
     }else if(flg1||flg2) {
       //$('#hyoka').text('もうひとつの解は？');
     }
        
  }else{
   $('#hyoka').text('');
  }
  
 }

 function soinsu(n){
 if (n==1) {
  return "1";
 }else{
  st="";
  i = 2;
  while (i <= n) {
   while (n % i == 0) {
   st=st+"*"+i;
   n = Math.floor(n/i);
   }
  i = i+1;
  }
   return st.substr(1);
 }
 
 }

 function aOfaRootb(soinsu) {
 var insu=soinsu.split("*");
 var out=1;
  if (insu.length>0) {
   for(var i = 1; i < insu.length; i++) {
     if (insu[i-1]==insu[i]) {
      out=out*eval(insu[i]);
      insu[i]=1;
     }
   }
   return out;
  
  }else{
   return 1;
  }

 }


 function bOfaRootb(soinsu) {
 var insu=soinsu.split("*");
  var out=1;
  if (insu.length>0) {
   for(var i = 1; i < insu.length; i++) {
     if (insu[i-1]==insu[i]) {
       insu[i-1]=1;insu[i]=1;
     }
   }
  
   for(var i = 0; i < insu.length; i++) {
      out=out*eval(insu[i]);
   }
  
   return out;
  
  }else{
   return 1;
  }

 }

 //*************************
 function gcd3(m,n,l) {
    return gcd(gcd(m,n),l);
 }

var gcd = function(a, b){
    var gcd_temp = function(a, b, n, p){
        var smaller = function(a, b){
            return a < b ? a : b;
        }
        if(0 == a % n && 0 == b % n){
            return gcd_temp(a, b, (n + 1), n);
        }else{
            if(n > smaller(a, b)){
                return p;
            }else{
                return gcd_temp(a, b, (n + 1), p);
            }
 }
    }
    return gcd_temp(a, b, 1, 1);
}

//*****************************************************************************************:
  function Keisan(id) {     
        this.bo=" ";   this.si=" ";  this.ro=" ";     this.id=id;
       
        if(kmm == true){
           $('div#waku').append('<div id="'+id+'" style="display:inline;" >
</div>
');
         }else{
            $('div#waku').append('<div id="'+id+'" >
</div>
');
         }
     
     }     
    
     Keisan.prototype = {
        disp : function(bunbo,bunsi,root,mode){
        this.bo=bunbo;     this.si=bunsi;    this.ro=root;
        switch (mode){
         case 'init':
            $('#'+this.id).text('$x='+this.bo+'$');
           break;  
         case 'frac':
          if(eval(this.bo)<0) {
            $('#'+this.id).text('$x=-\\frac{'+this.si+'}{'+(eval(this.bo)*(-1)).toString(10)+'}$');
          }else{
            $('#'+this.id).text('$x=\\frac{'+this.si+'}{'+this.bo+'}$');
          }
           
          break;
         case 'sqrt':
          if(this.bo=='1'){
           $('#'+this.id).text('$x='+this.si+'\\sqrt{'+this.ro+'}$');
          }else{
           $('#'+this.id).text('$x=\\frac{'+this.si+'\\sqrt{'+this.ro+'}}{'+this.bo+'}$');
          }          
           break;
         case 'nofrac':
           $('#'+this.id).text('$x='+this.si+'$');
          break;
         default:
           $('#'+this.id).text('$x=\\frac{'+this.si+'\\sqrt{'+this.ro+'}}{'+this.bo+'}$');
           break;
         }
        MathJax.Hub.Typeset($("#test")[0], function() { console.log("Done"); });
       }
     }
//****************************************:::
  function mondai(){
  
   flg1=false;flg2=false;kmm=false;
   $('#hyoka').text('');
   while (gyo>=0){
       $('#s'+gyo).remove();
     gyo=gyo-1;
   }

  switch ( $("input:radio[name='ptrn']:checked").val()) {
    case 'kihon' :
       a=rand(1,1);
      do {
        b=Math.pow(-1,rand(1,2))*rand(1,8);
        c=rand(-8,8);
       }while (c==0||b*b-4*a*c<=0|| aOfaRootb(soinsu(b*b-4*a*c)) > 1 ||bOfaRootb(soinsu(b*b-4*a*c))==1 || Math.abs(2*a/gcd3(2*a,b,aOfaRootb(soinsu(b*b-4*a*c))))==1)
                                     //ルートの計算がある場合や    、ルートの中が１つまり整数解のものはのぞく　分母が１のものは除く
      break;
    case 'noroot':
      a=rand(1,3);
      do {
       b=Math.pow(-1,rand(1,2))*rand(1,8);
       c=rand(-8,8);
      }while (c==0||b*b-4*a*c<=0|| aOfaRootb(soinsu(b*b-4*a*c)) > 1 ||bOfaRootb(soinsu(b*b-4*a*c))==1 || Math.abs(2*a/gcd3(2*a,b,aOfaRootb(soinsu(b*b-4*a*c))))==1)
                                    //ルートの計算がある場合や    、ルートの中が１つまり整数解のものはのぞく　分母が１のものは除く
      break;
   
    case 'yaku'://約分あり
        a=rand(1,3);
      do {
       b=Math.pow(-1,rand(1,2))*rand(1,8);
       c=rand(-8,8);
      }while (c==0||b*b-4*a*c<=0 ||bOfaRootb(soinsu(b*b-4*a*c))==1 || Math.abs(gcd3(2*a,b,aOfaRootb(soinsu(b*b-4*a*c))))==1)
                                  //、ルートの中が１（有理数解）のものはのぞく 約分できないもの除く　　　
      break;
    case 'seisu'://有理数解
        a=rand(1,3);
      do {
       b=Math.pow(-1,rand(1,2))*rand(1,8);
       c=rand(-8,8);
      }while (c==0||b*b-4*a*c<=0 ||bOfaRootb(soinsu(b*b-4*a*c))!=1 )
      break;
  }
  
   aa=a;   bb=b;   cc=c;
   if(bb>1){bb='+'+bb;}
   if(cc>0){cc='+'+cc;}
   if(aa==-1){aa='-';}
   if(bb==-1){bb='-';}
   if(aa==1){aa='';}
   if(bb==1){bb='+';}
  
  
   $('#mondai').text('$'+aa+'x^2'+bb+'x'+cc+'=0$');
   
  //*****************ここで、正解を作成
  seikaibo=2*a;  seikaisi=-1*b; 
  seikairpre  =aOfaRootb(soinsu(b*b-4*a*c));
  seikairafter=bOfaRootb(soinsu(b*b-4*a*c));
  gc=gcd3(seikaibo,Math.abs(seikaisi),seikairpre);  
  aseikaibo=seikaibo/gc;
  aseikaisi=seikaisi/gc;
  aseikairpre=seikairpre/gc;
     //alert('kotae:'+aseikaisi+'±'+aseikairpre+'r'+seikairafter+'/'+aseikaibo);
     
  if (aseikaibo==1){
       if(seikairafter==1){//ルートなし
         $('#ans').text('$x='+(aseikaisi+aseikairpre).toString(10)+',x='+(aseikaisi-aseikairpre).toString(10)+'$');
       }else{
         $('#ans').text('$x='+aseikaisi.toString(10)+'\\pm'+ichinasi(aseikairpre)+'\\sqrt{'+seikairafter+'}$');
       }       
  }else{
      if(seikairafter==1){//ルートなし
         a1=aseikaisi+aseikairpre;a2=aseikaisi-aseikairpre;
         gc1=gcd(Math.abs(a1),aseikaibo);gc2=gcd(Math.abs(a2),aseikaibo);
         //alert(gc1+' '+gc2);
        $('#ans').text('$x='+bunsu(a1/gc1,aseikaibo/gc1)+',x='+bunsu(a2/gc2,aseikaibo/gc2)+'$');
       }else{
         $('#ans').text('$x=\\frac{'+aseikaisi.toString(10)+'\\pm'+ichinasi(aseikairpre)+'\\sqrt{'+seikairafter+'}}{'+aseikaibo+'}$');
       }       
    
  }
   
   MathJax.Hub.Typeset($("#test")[0], function() { console.log("Done"); });
 }
  
 function bunsu(bs,bb){
  if (bb==1) {
   return bs.toString(10);
  }else{
   if (bs<0) {
    return '-\\frac{'+((-1)*bs).toString(10)+'}{'+bb.toString(10)+'}';
   }else{
    return '\\frac{'+bs.toString(10)+'}{'+bb.toString(10)+'}';
   }
  
  }
 
 } 
  
 function rand(min,max){
   return Math.floor( Math.random() * (max+1-min)) + min ; 
 }
 
 function ichinasi(n){
  if(n==1){
   return "";
  }else{
   return n.toString(10);
  }
 }


</script>


  </body>
</html>

github pagesで公開してみました
https://gh6141.github.io/gitdrill/nijihote.html

2017年3月14日火曜日

javascript でクラスを使ってみる

canvasという便利な図形表示の仕組みがいつのまにか
使えるようになっている。これをオブジェクト指向で（クラスで）使ってみた。
クラスを使わないと、ちょっと複雑になると、手に負えなくなりそうだ。

ドラッグ&ドロップをしてみたかったので、まずこちらを参考にさせていただいた。
http://qiita.com/kyrieleison/items/26fcfb3a1d94bc92c596

さっそく、イベントの追加でthisの使い方がわからず悩む
がhttps://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener
に解決方法がかいていあった。

力の合成を表すものですが、矢印は
http://qiita.com/frogcat/items/2f94b095b4c2d8581ff6
の中のライブラリをつかわせていただきました。

それを参考に少しためしてみたのが、以下のソース

<!DOCTYPE html>
<!DOCTYPE html>
<html>
  <head>
    <title>力の合成</title>
    
    <style>
      #canvas {
        background: #FFF;
      }
    </style>
  </head>
  <body onLoad="init()">
  <p><b>力の合成</b>　<font color=red>■</font>を動かしてみてください　　<font style='font-size:40px;color:blue'>→</font>は <font style='font-size:40px;color:red;'>→</font>の合力です。</p>
    <canvas id="canvas" width="1200" height="800"></canvas>
    <script>
//********************************************
    (function(target) {
  if (!target || !target.prototype)
    return;
  target.prototype.arrow = function(startX, startY, endX, endY, controlPoints) {
    var dx = endX - startX;
    var dy = endY - startY;
    var len = Math.sqrt(dx * dx + dy * dy);
    var sin = dy / len;
    var cos = dx / len;
    var a = [];
    a.push(0, 0);
    for (var i = 0; i < controlPoints.length; i += 2) {
      var x = controlPoints[i];
      var y = controlPoints[i + 1];
      a.push(x < 0 ? len + x : x, y);
    }
    a.push(len, 0);
    for (var i = controlPoints.length; i > 0; i -= 2) {
      var x = controlPoints[i - 2];
      var y = controlPoints[i - 1];
      a.push(x < 0 ? len + x : x, -y);
    }
    a.push(0, 0);
    for (var i = 0; i < a.length; i += 2) {
      var x = a[i] * cos - a[i + 1] * sin + startX;
      var y = a[i] * sin + a[i + 1] * cos + startY;
      if (i === 0) this.moveTo(x, y);
      else this.lineTo(x, y);
    }
  };
})(CanvasRenderingContext2D);
//****************************************
    
    
       canvas = document.getElementById("canvas");
       context = canvas.getContext('2d');
       wx = canvas.width;
       hx = canvas.height;
       
       
        objWidth = 10;
        objHeight = 10;
        startx=300;
        starty=200;
        var x, y, relX,relY;
        var offsetX = canvas.getBoundingClientRect().left;
        var offsetY = canvas.getBoundingClientRect().top;       
        otherX=10;
        otherY=10;

     
     
     function Arrow(ix,iy) {       
         this.objX=ix;
         this.objY=iy;
         this.dragging = false;
   
         //https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener
         canvas.addEventListener('mousedown', this.onDown.bind(this) , false);
         canvas.addEventListener('mousemove', this.onMove.bind(this) , false);
         canvas.addEventListener('mouseup', this.onUp.bind(this), false);

     }      
       Arrow.prototype = {
        getobj : function(obj){
         this.obj=obj;
         this.drawRect();
        },
        onDown :function(e) {
        x = e.clientX - offsetX;
        y = e.clientY - offsetY;
        if (this.objX < x && (this.objX + objWidth) > x && this.objY < y && (this.objY + objHeight) > y) {
          this.dragging = true;
          relX = this.objX - x;
          relY = this.objY - y;
        }      
        },
        onMove : function(e) {
        x = e.clientX - offsetX;
        y = e.clientY - offsetY;
        if (this.dragging) {
          this.objX = x + relX;
          this.objY = y + relY;
          this.drawRect();
        }
        },
        onUp : function(e) {
        this.dragging = false;
        },
        goseidrawRect : function(iix,iiy) {
         
        context.strokeStyle = "rgb(0,0, 200)";
        context.fillStyle = "rgb(0,0, 255)";
        context.beginPath();        
        context.arrow(startx, starty, iix,iiy, [0, 5, -20, 5, -20, 15]);
  context.fill();     
        },      
        drawRect : function() {
        
             context.clearRect(0,0,wx,hx);
      //２つの力の矢印
        context.fillStyle = "rgb(200, 0, 0)";
        context.arrow(startx, starty, this.objX, this.objY, [0, 5, -20, 5, -20, 15]);
        context.arrow(startx, starty, this.obj.objX, this.obj.objY, [0, 5, -20, 5, -20, 15]);
  context.fill();
  context.fillRect(this.objX, this.objY, objWidth, objHeight);
  context.fillRect(this.obj.objX, this.obj.objY, objWidth, objHeight);
  

         this.goseidrawRect(this.objX+this.obj.objX-startx,this.objY+this.obj.objY-starty);    
     
      //平行四辺形の細い線
       context.strokeStyle = "rgb(200,0, 0)";
        context.beginPath();
        context.lineWidth=1;
        context.moveTo(this.objX, this.objY);
        context.lineTo(this.objX+this.obj.objX-startx,this.objY+this.obj.objY-starty);        
        context.moveTo(this.obj.objX, this.obj.objY);
        context.lineTo(this.objX+this.obj.objX-startx,this.objY+this.obj.objY-starty);        
        context.stroke();       
        }
     }

         ar1 = new Arrow(startx+120,starty+20);    
         ar2 = new Arrow(startx+40,starty+110);          
    
         ar1.getobj(ar2);
         ar2.getobj(ar1);
 

        


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

<!DOCTYPE html>
<!DOCTYPE html>
<html>
  <head>
    <title>力の分解</title>
    
    <style>
      #canvas {
        background: #FFF;
      }
    </style>
  </head>
  <body onLoad="init()">
  <p><b>力の分解</b>　<font color=blue>■</font>を動かしてみてください　　
  <font style='color:red;font-size:40px;'>→</font>が<font style='color:blue;font-size:40px;'>→</font>の分力です</p>
    <canvas id="canvas" width="1200" height="800"></canvas>
    <script>
//********************************************
    (function(target) {
  if (!target || !target.prototype)
    return;
  target.prototype.arrow = function(startX, startY, endX, endY, controlPoints) {
    var dx = endX - startX;
    var dy = endY - startY;
    var len = Math.sqrt(dx * dx + dy * dy);
    var sin = dy / len;
    var cos = dx / len;
    var a = [];
    a.push(0, 0);
    for (var i = 0; i < controlPoints.length; i += 2) {
      var x = controlPoints[i];
      var y = controlPoints[i + 1];
      a.push(x < 0 ? len + x : x, y);
    }
    a.push(len, 0);
    for (var i = controlPoints.length; i > 0; i -= 2) {
      var x = controlPoints[i - 2];
      var y = controlPoints[i - 1];
      a.push(x < 0 ? len + x : x, -y);
    }
    a.push(0, 0);
    for (var i = 0; i < a.length; i += 2) {
      var x = a[i] * cos - a[i + 1] * sin + startX;
      var y = a[i] * sin + a[i + 1] * cos + startY;
      if (i === 0) this.moveTo(x, y);
      else this.lineTo(x, y);
    }
  };
})(CanvasRenderingContext2D);
//****************************************
    
    
       canvas = document.getElementById("canvas");
       context = canvas.getContext('2d');
       wx = canvas.width;
       hx = canvas.height;
       
       
        objWidth = 10;
        objHeight = 10;
        startx=300;
        starty=200;
        var x, y, relX,relY;
        var offsetX = canvas.getBoundingClientRect().left;
        var offsetY = canvas.getBoundingClientRect().top;       
        otherX=10;
        otherY=10;

     
     function Arrow(ix,iy) {       
         this.objX=ix;
         this.objY=iy;
         this.dragging = false;

     }      
       Arrow.prototype = {
        getobj : function(obj,objg){
         this.obj=obj;
         this.objg=objg;
         this.drawRect();
        },
        getobj2 : function(obj1,obj2){
         this.obj1=obj1;
         this.obj2=obj2;
         this.drawRect();
        },
        onDown :function(e) {
        x = e.clientX - offsetX;
        y = e.clientY - offsetY;
        if (this.objX < x && (this.objX + objWidth) > x && this.objY < y && (this.objY + objHeight) > y) {
          this.dragging = true;
          relX = this.objX - x;
          relY = this.objY - y;
        }      
        },
        onMove : function(e) {
        x = e.clientX - offsetX;
        y = e.clientY - offsetY;
        if (this.dragging) {
          this.objX = x + relX;
          this.objY = y + relY;
          this.drawRect();
        }
        },
        onUp : function(e) {
        this.dragging = false;
        }

    }  

//****************************
function disp(obj1,obj2,objg){
      context.clearRect(0,0,wx,hx);
      //２つの力の矢印
      
      context.beginPath();
      context.fillStyle = "rgb(200, 0, 0)";     
      
  
      ab=(starty-objg.objY)/(starty-obj2.objY)-(startx-objg.objX)/(startx-obj2.objX);
      bab=(startx-obj1.objX)/(obj2.objX-startx)-(starty-obj1.objY)/(obj2.objY-starty);
      ak=ab/bab;      
        xx=startx+ak*(obj1.objX-startx);
        yy=starty+ak*(obj1.objY-starty);
        context.arrow(startx, starty, xx, yy, [0, 5, -20, 5, -20, 15]);//動かしている矢印

        
      ab2=(starty-objg.objY)/(starty-obj1.objY)-(startx-objg.objX)/(startx-obj1.objX);
      bab2=(startx-obj2.objX)/(obj1.objX-startx)-(starty-obj2.objY)/(obj1.objY-starty);
      ak2=ab2/bab2;      
        xx2=startx+ak2*(obj2.objX-startx);
        yy2=starty+ak2*(obj2.objY-starty);
        context.arrow(startx, starty, xx2, yy2, [0, 5, -20, 5, -20, 15]);//反対側の矢印

  context.fill();
  
  context.beginPath();
  context.fillStyle = "rgb(0, 0, 200)";
  context.fillRect(obj1.objX, obj1.objY, objWidth, objHeight);
  context.fillRect(obj2.objX, obj2.objY, objWidth, objHeight);
 
     context.arrow(startx, starty, objg.objX, objg.objY, [0, 5, -20, 5, -20, 15]); //合力
  context.fillRect(objg.objX, objg.objY, objWidth, objHeight);
  context.fill();


     
      //平行四辺形の細い線
        context.strokeStyle = "rgb(200,0, 0)";
        context.beginPath();
        context.lineWidth=1;
        context.moveTo(xx, yy);
        context.lineTo(objg.objX,objg.objY); //元の力
        
        context.moveTo(startx,starty);
        context.lineTo((obj1.objX-startx)*10+startx,(obj1.objY-starty)*10+starty);//延長線
               
        context.moveTo(xx2, yy2);
        context.lineTo(objg.objX,objg.objY); //元の力       
        
        context.moveTo(startx,starty);
        context.lineTo((obj2.objX-startx)*10+startx,(obj2.objY-starty)*10+starty);//延長線

        context.stroke(); 
        

}
function addE(obj){
         canvas.addEventListener('mousedown', obj.onDown.bind(obj) , false);
         canvas.addEventListener('mousemove', obj.onMove.bind(obj) , false);
         canvas.addEventListener('mouseup', obj.onUp.bind(obj), false);
         }
//********************************

function sArrow(ix,iy) {  
         this.objX=ix;
         this.objY=iy;        
          addE(this);
         }    
         sArrow.prototype = new Arrow();
         
sArrow.prototype.drawRect = function() {
              disp(this,this.obj,this.objg);       
        }

function nArrow(ix,iy) {  
         this.objX=ix;
         this.objY=iy; 
          addE(this);         
         }    
         nArrow.prototype = new Arrow();
         
nArrow.prototype.drawRect = function() {
            disp(this.obj1,this.obj2,this);   
}
         ar1 = new sArrow(startx+120,starty+20);    
         ar2 = new sArrow(startx+40,starty+110);          
         arg = new nArrow(startx+80,starty+70);
         
         ar1.getobj(ar2,arg);
         ar2.getobj(ar1,arg);
         arg.getobj2(ar1,ar2);
             
    </script>
  </body>
</html>

力の分解のほうは、継承を使ってみました。もう少し簡潔にできそうですが。

2017年3月12日日曜日

ubuntuでcifs　マウント

起動時にマウントする方法

/etc/fstabに以下を追加
//192.168.1.？/share /mnt/windows/ cifs username=user,password=,uid=1000,gid=1000 0 0
パスワード不要なら省略できるようだ。
以前はシェルスクリプトをサービスとして起動する方法でやってきたが、それだと
sleep等を使って、遅延させる必要があった。
fstabに登録する方法があるとは知らなかった。

参考リンク
http://engetu21.hatenablog.com/entry/2016/07/31/190059

2017年3月10日金曜日

cloud9 herokuを連携して利用（postgresqlで)

http://qiita.com/yuki0627/items/abd9eedc989ae1da21a7
がとても参考になりました。

cloud9でrailsによるサイトを作成し、限られた時間であればサイト上で確認できますが、時間がたつと使えなくなります。そこで、herokuへgitにより、サイトの内容をpushするといいようです。データベースはherokuではpostgresqlが標準的なので、cloud9で使用するデータベースもpostgresqlに切り替えてみました。

以下のその手順を覚え書きとしてまとめてみました。
○　cloud9でrailsをpostgresqlを使って動かしてみるには＊＊＊＊＊＊＊＊＊＊＊＊＊＊

1　cloud9でblankを選択しcreate workspace
2 Rails のインストール
gem install rails --no-ri --no-rdoc
rails new myapp --database=postgresql
cd myapp
bundle install
rails generate controller welcome
app/views/welcome/index.html.erbを編集して
<h2>Hello World</h2>でも入力しておく

config/routes.rbは
root 'welcome#index'　の行を追加
以下、Unicode使用のテンプレートを用意するために、次の操作が必要なようです。

sudo service postgresql start

sudo sudo -u postgres psql

CREATE USER username SUPERUSER PASSWORD 'password';

UPDATE pg_database SET datistemplate = FALSE WHERE datname = 'template1';

DROP DATABASE template1;

CREATE DATABASE template1 WITH TEMPLATE = template0 ENCODING = 'UNICODE';

UPDATE pg_database SET datistemplate = TRUE WHERE datname = 'template1';

\c template1

VACUUM FREEZE;

データベースのユーザー名とパスワード名を環境変数に入れておくといいようです。

export USERNAME=username

export PASSWORD=password

これにあわせてdababase.ymlを次のような内容に編集

default: &default

adapter: postgresql

encoding: unicode

pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>

username: <%= ENV['USERNAME'] %>

password: <%= ENV['PASSWORD'] %>

host: <%= ENV['IP'] %>

ここで

rails db:create

そして　modelを作成してみる

rails generate model title

db\migrate\20120322080659_create_titles.rb」のようなマイグレーションスクリプトと呼ばれるファイルができるので、これに以下のように追加

class CreateTitles < ActiveRecord::Migration

def change

create_table :titles do |t|

t.string :name　←ここと

t.date :date　←ここを追加

t.timestamps

end

rake db:migrate

を実行

seeds.rbができるので、これを以下のように修正

# coding: utf-8

Title.create(:name => 'サンプル１', :date => '2011-06-28')

Title.create(:name => 'サンプル２', :date => '2011-11-14')

以下のコマンドで、上記のデータの初期値設定ができるようだ

rake db:seed

rails dbconsoleで確認できる

select * from titles;等が実行可能

ぬけるときはCtrl+D

welcome_control.rb

def index

@titles = Title.all

end

index.html.erbをつぎのように変えてみる

<p>

<% @titles.each do |title| %>

[タイトル] <%= title.name %>, [月日] <%= title.date %><br />

<% end %>

</p>

rails s -p $PORT -b $IP

で起動してみる

https://[ワークスペース名]-[ユーザー名].c9.io にアクセスして確認。

○herokuにpushしてみる＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

※事前にcd myappになっているか、確認してから

heroku login

git init

git add .

git commit -m "init"

heroku create
heroku buildpacks:set https://github.com/bundler/heroku-buildpack-bundler2

git push heroku master

○herokuのpostgresqlの設定＊＊＊＊＊＊＊＊＊＊＊＊

herokuへのpushだけでは、だめで、postgresqlのマイグレーション等の操作が必要

heroku addons:add heroku-postgresql

heroku run rake db:migrate

herokuでも、seedは必要なので

heroku run rake db:seed

○ためしに、scafoldも使ってみた＊＊＊＊＊＊＊

たとえば　userというモデル名であれば

rails g scaffold user name:string point:string sudo service postgresql start（postgresqlが起動してないときは、sudo service postgresql startと起動が必要であることに注意）

rake db:migrate

rails s -p $PORT -b $IP

として

https://アプリ名-ユーザー名.c9users.io/usersにアクセスして確認できる

git add.

git commit -m "scafold_test"

git push heroku master

で、herokuでも動いているか試してみる

※データベースを使うので、データベースがきちんと動いてないとうまくいかない。最初エラーが出たとき、原因がつかめずいたが、結局、データベースが動いてないことが原因ということが何回かあった。このへんは、慣れの問題かもしれない。

2017年2月22日水曜日

LinqでCSVから配列、配列からCSVへ

CSVから配列への読み込みについては
ネットに参考になるサイトがありました。
https://teratail.com/questions/40822
なるほどと思いました。非常にシンプルで、Linqの威力を感じます。
サイトを参考に、こんな感じで、簡単に配列を用意できるようです。
using System.IO;
public String[][] dcsv;
dcsv=File.ReadLines(csvfilename, Encoding.GetEncoding("utf-8")).Select(s => s.Split(',')).ToArray();

ただ、配列からCSVへの書き込みは、シンプルなものはみつからず
とりあえず、foreachでも使ってみました。
StreamWriter sw = new StreamWriter(csvfilename);
foreach ( String[] row in dcsv)
{
sw.WriteLine(string.Join(",", row));
}
sw.Close();

2017年2月21日火曜日

c#　別フォームのコントロール取得

http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1251572732
が参考になりました。
Form1で　Form2のインスタンスを作成したら　親フォーム情報を子フォームに
通知するところがミソのようです。
あとは、子フォームで、親フォームを宣言しておけば、親フォームを扱うことが
できるようです。

Form1(親）側
Form2 f = new Form2();
f.form1obj = this;
f.Show();

Form2(子）側
public Form1 form1obj;
textBox1.Text= form1obj.listView1.Items[comboBox1.SelectedIndex].SubItems[0].Text;

あと、当然Form1側のコントロールのModifiersはpublicにしておきます。

2017年1月29日日曜日

Ubuntuをアップデートしたら、400エラーが出るようになる

　結論から言うと、原因はJSPの中のjavascriptで、HTMLリクエストパラメータを全角文字などもそのまま送信していたのが原因でした。
　これまで、全角文字もそのまま送信していて問題はおきなかったのは、ブラウザ側あるいはｔｏｍｃａｔ？でうまく処理していてくれたためと思う。

　tomcatあるいはjavaあたりをアップデートした影響で、URLエンコードしてない影響がIE11にだけ現れたようだ。このへんの関係を発見するまで時間がかかった。

　400エラーが出るのは、ＩＥ１１だけである。chromeやEdgeでは特に問題は起こってない。

　encodeURIにより、URLエンコードするだけで問題が解決した。デコードはとくにしなくても、だいじょうぶなようだ。ネットで検索しても、こういった症状が出てこなかったのは、基本的ミスだったからともいえる。

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊解決までの流れ
①Ubuntuサーバで、突然、IE11を使ったとき、全角のファイル名のときだけ、ダウンロードできなくなる。400エラーが出る。
②Vmware内の古いUbuntuサーバについては問題ない。試しにapt-get update
　すると、同じ症状が出る。原因はtomcatかjavaの影響？IE11との相性？いずれか、と考えた。
　ネットでは、IE11のUserAgentの文字がTridentに変わったことが、出ていたので対応させてみた。
　でも、これとは無関係だった。しばらく解決策がみつからない。
③他のリクエストパラメータを使うGETのところで、同じ症状（400エラー）が出ることを発見。
④③よりひょっとして、URLエンコードしていないのが原因でないかと疑う。試しにエンコードするように修正したら解決した。

※原因を見つけるには、試行錯誤しながら、考えるしかないようだ。

2017年1月24日火曜日

ポップアップ　アラームを職場で

職場でPCにソフトをインストールするのはいろいろ制限もあるので
インストール無しで　ポップアップアラームを使う方法を調べてみた。

VBSスクリプトを使う方法があり、参考になりました。
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11134557286

タスクスケジューラで、起動するようにしておけばOkです。
ただ、他のソフトを使用中でも、最前面にポップアップ画面を出したいので

MsgBox "○○の時間です",vbSystemModal,"タスクスケジューラ"

のようにするといいようです。

あとは、タスクスケジューラの時刻設定の手間は若干ありますが、許容範囲かと。

いくつか、よくつかうvbsスクリプトを登録しておいて、時刻だけ書き換えて使いまわせばOkでしょう。

2017年1月21日土曜日

netcommons3

netcommons3を入れてみた。

phpの設定では
C:\xampp\htdocs\NetCommons3\app\Console\cake.batの中では
C:\xampp\php\php.exe -q "%lib%cake.php" -working "%CD% " %*
とする必要がある。

すでに入れてあるmsyql5.6を使おうとするが、なかなかうまくいかない。

sql_modeがSTRICT_TRANS_TABLESだと正常に動作しないということらしい。
一時的にset sql_mode="";コマンドで、空白にしてみる。

Mysqlのパスが、xamppとは違うので
C:\xampp\apache\conf\extra￥httpd-xampp.confの中で
SetEnv MYSQL_HOME "\\Program Files\\MySQL\\MySQL Server 5.6\\bin"
としてみたが、これでもだめ。

mysqlで
再度,
set session sql_mode="";
set global sql_mode="";
としてみたら、うまくインストールできた。（set session　～だけではだめで、set global ～でやっとうまくいく）
このへんは、ネットで見てもよくわからない。なぜか、my.iniの設定が反映されなかったため
このような試行錯誤状態になってしまった。CMSのインストールも、ちょっとしたバージョンのずれで、大変なようだ。

xampp

https://www.apachefriends.org/jp/index.html
から入手しインストールしてみた。
必要なものだけ選べるようだ。php,apacheだけ入れてみた

登録: 投稿 (Atom)