タグ: JavaScript

position: absolute な要素を縦横中央揃えにする

CSSで「position: absolute;」指定された要素を縦横中央揃えするのに、こんなやり方があると知ってちょっと感動。


<html>
<head>
  <meta http-equiv="Content-Language" content="ja" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <title>[SAMPLE] absolute の要素を縦横中央揃え</title>

  <style>
  .outer {
    width: 100%;
    height: 100%;
    background: #ccc;
    position: relative;
  }
  .inner {
    width: 30px;
    height: 30px;
    background: #000;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  </style>
</head>
<body>
  <div class="outer">
    <div class="inner"></div>
  </div>
</body>
</html>

[JavaScript] jQuery UI 1.11以降でのdatepickerの日本語表示

しばらく目を離した隙にjQuery UIのバージョン1.11系がリリースされていたので1.10系からバージョンアップを図ろうとしたのですが、datepickerで日本語表示するために読み込んでいた言語別ファイル「jquery.ui.datepicker-ja.js」(あるいは jquery.ui.datepicker-ja.min.js)が1.11系には見当たりません。

Changelogを眺めてみると1.11よりファイル名が変わったりしているようなので、以下のいずれかの対応が必要になります。

ファイル名を変更する

1.11より「jquery.ui.datepicker-ja.js」は「datepicker-ja.js」へとファイル名が変更されているので、それにあわせて呼び出し元を変更すればOK。

<!--
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery.ui.datepicker-ja.min.js"></script>
<link type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/south-street/jquery-ui.css" rel="stylesheet" />
-->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/datepicker-ja.min.js"></script>
<link type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/south-street/jquery-ui.css" rel="stylesheet" />

[Perl] PerlとJavaScriptの間でRSA暗号化と復号を行う

暇を見つけては社内で使うちょっとしたWebアプリケーションの開発を進めているのですが、その中でクライアント(JavaScript)-サーバ(Perl)間での暗号化・復号を行う仕組みが必要となったため公開鍵暗号方式のRSAによる実装にトライしてみました。

やりたいことの流れはこんな感じ。

  1. サーバ(Perl)側でRSA鍵(秘密鍵・公開鍵)を生成
  2. 公開鍵をクライアント(JavaScript)に渡す
  3. クライアント(JavaScript)側で公開鍵を用いて暗号化
  4. 暗号化された文字列をサーバ(Perl)に返す
  5. サーバ(Perl)側で秘密鍵を用いて復号

色々なモジュールを試してみたのですが、RSAといっても種類が色々あるようで(?)組み合わせによっては元の文字列を上手く復元出来ないケースもあり難儀しましたが、最終的にJavaScript側で「JSEncrypt」、Perl側は「Crypt::OpenSSL::RSA」を利用することで上手く行きました。

さくらのレンタルサーバでのWordPressチューニング

昨年末に店舗を営む知人からWordPressを用いた情報発信ページの構築を依頼されていたのですが、本業の合間に少しづつ作業を進めてようやくテンプレートが完成。

「あまりお金をかけられない」ということだったので個人でも利用している「さくらのレンタルサーバ」を新たに契約してもらって設置したもののそのままではレスポンスが宜しくないので諸々のチューニングで大幅改善。

この際行った対応は特に目新しいものではありませんが、今後さくらのレンタルサーバで初めてWordPressを用いたサイトを構築される方のため、そして自分への備忘録も兼ねて効果の期待できる設定や注意点などを残しておくことにします。

[JavaScript] jQuery v1.10.x への移行で注意すべき点

jQueryに依存するスクリプトに於いて以下のようなロジックでjQueryのバージョンチェックを行い処理分岐を行なっているものが多く見受けられるのですが、このようなロジックはjQuery 1.10.xとの組み合わせで期待通りの動きをしてくれなくなるので注意が必要です。

// support: jQuery 1.8+
if (parseFloat($.fn.jquery) >= 1.8) {
// (本処理)
}

理由は簡単。$.fn.jqueryで取得した「1.10.x」をparseFloatで小数値変換すると小数値としてあり得ない2つめのドット(.)以下が削られたうえで小数部末尾の0も省略されるため「1.10」ではなく「1.1」となってしまうため。

innerHTMLで書き出したJavaScriptが実行できない

ここ数日Ajaxを駆使して自分のホームページの管理画面を作りこんでいたのですが、innerHTMLで書き出した中にあるJavaScript文は実行されないという事実をはじめて知りました。

<div id="TestArea"></div>
<script>
<!--
$('TestArea').innerHTML = '<script>alert(1)</script>':
//-->
</script>