gusachan – ページ 18 – デジタル生活めも（旧アーカイブ）

jQuery の fullcalendar

jQuery カレンダーfullcalendarを使ってみました。

参考URL: 多機能のカレンダーを実装するjQueryプラグインのFullCalendar

リンク先 Download|FullCalender からzip ファイルをダウンロード、解凍。最新版は、fullcalendar-3.2.0.zip （2017年3月7日現在）

カレントディレクトリに./fullcalendar.min.css, ./fullcalender.js, ./lib/moment.min.js, ./lib/jquery.min.js, ./lib/jquery-ui.min.js, ./fullcalendar.js, ./locale/ja.js を以下の配置でindex.html を作ります。

<html>
<head>
<meta charset='utf-8' />
<link href="./fullcalendar.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="./lib/moment.min.js"></script>
<script type="text/javascript" src="./lib/jquery.min.js"></script>
<script type="text/javascript" src="./lib/jquery-ui.min.js"></script>
<script type="text/javascript" src="./fullcalendar.min.js"></script>
<script type="text/javascript" src="./locale/ja.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('#calendar').fullCalendar();
});
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>

demos ディレクトリの selectable.html ではイベントを書き加えることができます。しかし、データとして保存するにはPHPと連携してJsonデータの受け渡しを実装しないといけないので難易度高めに感じました。
Google カレンダー、使おう！(直球)

ちなみにシェルスクリプトでは、

$ cal [-y] month year

参考URL: http://webcache.googleusercontent.com/search?q=cache:Ui3UAAmc3nMJ:sookibizviz.blog81.fc2.com/blog-entry-344.html+&cd=3&hl=ja&ct=clnk&gl=jp

小数係数の処理

前回のエントリーでは連立1次方程式の解の分数表示、分母の符号処理について冗長なコードを書いてみました。（エレガントな方法ではありませんが・・・。）

https://stuffy.mydns.jp/~gusachan/javascript/SimultaneousEquations.html

今回は、小数係数の取り扱いについて考えてみたいと思います。

  function isInteger(w) {
    w = parseFloat(w);
    return Math.round(w) === w;
  }
  var getDecimalPointLength = function(number) {
    var numbers = String(number).split('.'),
        result  = 0;
    if (numbers[1]) {
        result = numbers[1].length;
    }
    return result;
  };
  if(!(isInteger(a1) && isInteger(b1) && isInteger(p1))) {
    var s1 = getDecimalPointLength(a1);
    var t1 = getDecimalPointLength(b1);
    var u1 = getDecimalPointLength(p1);
    var v1 = Math.max(s1, t1, u1);
    var a1 = a1*Math.pow(10, v1);
    var b1 = b1*Math.pow(10, v1);
    var p1 = p1*Math.pow(10, v1);
  }
  if(!(isInteger(c1) && isInteger(d1) && isInteger(q1))) {
    var s2 = getDecimalPointLength(c1);
    var t2 = getDecimalPointLength(d1);
    var u2 = getDecimalPointLength(q1);
    var v2 = Math.max(s2, t2, u2);
    var c1 = c1*Math.pow(10, v2);
    var d1 = d1*Math.pow(10, v2);
    var q1 = q1*Math.pow(10, v2);
  }
  var x1= d1*p1-b1*q1, y1 = a1*q1-c1*p1;
  var z = a1*d1-b1*c1, z1 = Math.abs(z);

連立方程式の片方、または両方に小数係数が含まれている場合、小数点以下の桁数を取得し、方程式を10の最大桁数のべき乗倍して係数を宣言し直す方法を採りました。

また割り切れない分数の定量化として小数表示併記を追加しました。

参考URL: http://shanabrian.com/web/javascript/get-decimal-point-length.php

http://blog.at-human.com/2016/02/10/js%E6%95%B4%E6%95%B0%E3%81%8B%E3%81%A9%E3%81%86%E3%81%8B%E3%82%92%E5%88%A4%E5%88%A5%E3%81%99%E3%82%8B%E9%96%A2%E6%95%B0%EF%BC%88isinteger%EF%BC%89/

分数の表示

分数表示をするには、分母と分子の最大公約数での約分が必要です。ユークリッド互除法という古くからある解法を用いることで、javascript で分数の表示を実装することができます。今のところ、係数入力には整数しか対応していません。

以下、参照 JavaScript 第6版より

function memoize(f) {
  var cache = {};
  return function() {
    var key = arguments.length + Array.prototype.join.call(arguments,",");
    if (key in cache) return cache[key];
    else return cache[key] = f.apply(this, arguments);
  };
}
function gcd(m,n) {
  var t;
  if (m < n) t=n, n=m, m=t;
  while(n != 0) t=n, n = m%n, m=t;
    return m;
}
function output() {
  var gcdmemo = memoize(gcd);
  var a1= document.getElementById('a').value;
  var b1= document.getElementById('b').value;
  var c1= document.getElementById('c').value;
  var d1= document.getElementById('d').value;
  var p1= document.getElementById('p').value;
  var q1= document.getElementById('q').value;
  var x1= d1*p1-b1*q1, y1 = a1*q1-c1*p1;
  var z = a1*d1-b1*c1, z1 = Math.abs(z);
  if(z1 == 0) {
    document.getElementById('x').innerHTML = "x = " + a1 + 
        "x + " + b1 + "y = " + p1 + " のすべての解です。";
    document.getElementById('y').innerHTML = "y = " + a1 + 
        "x + " + b1 + "y = " + p1 + " のすべての解です。";
    return false;
  }
  if(Math.abs(gcdmemo(x1,z1)) == z1) {
    document.getElementById('x').innerHTML = "x = " + 
        x1/gcdmemo(x1,z);
    if(Math.abs(gcdmemo(y1,z1)) == z1) {
      document.getElementById('y').innerHTML = "y = " + 
        y1/gcdmemo(y1,z);
    }
    else {
      if(z/gcdmemo(y1,z) > 0) {
        document.getElementById('y').innerHTML = "y = " + 
        y1/gcdmemo(y1,z) + "/" + z/gcdmemo(y1,z);
      }
      else {
      document.getElementById('y').innerHTML = "y = " +
         (-1)*y1/gcdmemo(y1,z) + "/" + Math.abs(z/gcdmemo(y1,z));
      }
    }
  }
  else {
    if(z/gcdmemo(x1,z) > 0) {
      document.getElementById('x').innerHTML = "x = " + 
        x1/gcdmemo(x1,z) + "/" + z/gcdmemo(x1,z);
    }
    else {
      document.getElementById('x').innerHTML = "x = " + 
        (-1)*x1/gcdmemo(x1,z) + "/" + Math.abs(z/gcdmemo(x1,z));
    }
    if(Math.abs(gcdmemo(y1,z1)) == z1) {
      document.getElementById('y').innerHTML = "y = " + 
        y1/gcdmemo(y1,z);
    }
    else {
      if(z/gcdmemo(y1,z) > 0) {
        document.getElementById('y').innerHTML = "y = " + 
        y1/gcdmemo(y1,z) + "/" + z/gcdmemo(y1,z);
      }
      else {
        document.getElementById('y').innerHTML = "y = " + 
        (-1)*y1/gcdmemo(y1,z) + "/" + Math.abs(z/gcdmemo(y1,z));
      }
    }
  }
}

追記）分母の符号処理にバグを発見しました。謹んで訂正致します。しかしながら依然、分子か分母またそのいずれもマイナス値だった時のユークリッド互除法の符号処理に疑問があります。

連立1次方程式

いきなり n元1次方程式を解こうとすると、n次行列の逆行列とかLU分解法など、線形代数を本格的にやるハメになるので中学レベルから始めます。

参考URL: 連立方程式 – 高精度計算サイト

function output() {
  var a1= document.getElementById('a').value;
  var b1= document.getElementById('b').value;
  var c1= document.getElementById('c').value;
  var d1= document.getElementById('d').value;
  var p1= document.getElementById('p').value;
  var q1= document.getElementById('q').value;
  var x1= d1*p1-b1*q1, y1 = a1*q1-c1*p1;
  var z = a1*d1-b1*c1, z1 = Math.abs(z);
  if(z1 == 0) {
    document.getElementById('x').innerHTML = "x = " + a1 + "x + " + b1 + "y = " + p1 + " のすべての解です。";
    document.getElementById('y').innerHTML = "y = " + a1 + "x + " + b1 + "y = " + p1 + " のすべての解です。";
    return false;
  }
  else {
    document.getElementById('x').innerHTML = "x = " + x1/z;
    document.getElementById('y').innerHTML = "y = " + y1/z;
    return false;
  }
}

今は、結果を分数で表示できないか試行錯誤中です。

Andoroid7.0

先週遅ればせながら、手持ちのXperia Z5の更新がきました。

6.0 marshmallow からAndroid7.0 nougat へのアップグレードです。

詳細は下記URL でも紹介されてますので使い心地を感想したいと思います。

http://ap-land.com/wordpress/17034#1

機器上部のステータス表示をスワイプして現れるクイック設定ツールの表示が便利になりました。2段階でアイコンのみと一覧が表示されるので設定に簡単にアクセスできます。

右下の□をダブルタップで、ひとつ前のアプリに移動できることができるようになったのも地味にうれしいですね。

Andoroidのバージョンは、lolipop,marshmallow, nougat と順調に来てますが、次のAndoroid O は何なんでしょうね。Oreo かな？

hostsファイルを編集するシェルスクリプト

/etc/hosts.allow でホスト制限しているとカスペルスキーセキュアコネクションでIPが変わったときにsshdに締め出されるので対策スクリプトを作ってみた。

#!/bin/bash
ipAddress=`/usr/bin/host example.com | awk 'NR==1{print $4}'`
sed -i '/sshd:/d' /etc/hosts.allow
sed -i -e '10i sshd: '$ipAddress /etc/hosts.allow
service sshd restart

クライアントのIPアドレスを/usr/bin/host で取得して変数に格納。hosts.allow の古いIPを含むsshd行を削除、10行目に新しいIPとして追加。このスクリプトをcronファイルとして保存。

00 * * * * /root/scriptname

実行権限を与えてcronに登録します。これでうまく行くはず？

#chmod o+x scriptname
# crontab filename

注）コンソールログオンできないレンタルサーバでの障害発生や正常動作は保証しません。

参考URL:

https://blog.tnmt.info/2011/11/30/hosts-allow-include/
http://blog.glidenote.com/blog/2011/12/28/dyndns-iptables-hosts.allow/

fail2banでSSHのセキュリティ

今回はSSHのセキュリティソフト、fail2ban をご紹介します。

yum でインストール

# yum enablerepo=epel install fail2ban

/etc/fail2ban/jail.conf 設定ファイルを開き、アクセス禁止時間、最大パスワード許容回数をコメント解除します。

[DEFAULT]
bantime = 3600
[SSHD]
enabled =true
maxretry = 5

/etc/fail2ban/fail2ban.local ファイルを作り、以下の設定をします。

[Definition]
logtarget = /var/log/fail2ban.log

サービスとして起動します。

# service fail2ban start

参考URL：http://s.webry.info/sp/vogel.at.webry.info/201506/article_6.html

jQuery の記述

jQueryを使ったスライダーの作り方とその仕組み

のコピペでスミマセン。センセンシャル。

jQuery はDOMが操作可能になるまで待機させるために、ready()メソッドに入れ子で記述すると良いとのこと。これだけは伝えたかった。

<script type="text/javascript">
$(document).ready(function() {
・・・（jQueryの記述
});
</script>

https://stuffy.mydns.jp/~gusachan/javascript/slider.html

JavaScript BMIの判定

久々に JavaScript に触ってみましたが、onClick が効かなくて焦りました。コードのタイプミスが原因でした。他にもHTMLタグのid が予約語や変数名と被るとかいった事でもダメみたいですね。

https://stuffy.mydns.jp/~gusachan/javascript/BMI.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
function calcBMI() {
  var shincho = document.getElementById("height");
  var tiju = document.getElementById("weight");
  var hantei = document.getElementById("result");
  var h = shincho.value/100, w = tiju.value;
  var bmi = w/h/h;
  if (bmi < 18.5) {
    hantei.innerHTML = "痩せすぎ";
  }
  else if (bmi < 25) {
    hantei.innerHTML = "普通";
  }
  else if (bmi < 30) {
    hantei.innerHTML = "肥満度1";
  }
  else if (bmi < 35) {
    hantei.innerHTML = "肥満度2";
  }
  else if (bmi <40) {
    hantei.innerHTML = "肥満度3";
  }
  else if (bmi >= 40) {
    hantei.innerHTML = "肥満度4";
  }
}
</script>
</head>
<body>
<form>身長を入力してください。<input type="text" size="4" id="height"> cm<br>
体重を入力してください。<input type="text" size="4" id="weight"> kg<br>
<input type="button" value="計算" onClick="calcBMI()"></form>
判定：<div id="result"></div>
</body>
</html>