devlog

JavaScript／コンソールログ

2018年05月31日

変数の値を確認したい場合には、以下のようなデバッグ文を仕込むことがある。
┌──────────────────────────────────────┐
│alert(変数);                                                                │
└──────────────────────────────────────┘
各ブラウザのF12押下でデバッグツールを起動し、
コンソール(console)タブを表示できる場合には、以下に変更すれば
こちらの画面に出力できるようになる。
┌──────────────────────────────────────┐
│console.log(変数);                                                          │
└──────────────────────────────────────┘

分類：JavaScript

jQuery／jQueryでcanvas！

2018年05月25日

HTML文(body部)とCSSは以下のような感じ。(たいていはid制御になるだろうが)
┌──────────────────────────────────────┐
│<body>                                                                      │
│<canvas width="100" height="100"></canvas>                                  │
│</body>                                                                     │
├──────────────────────────────────────┤
│<style type="text/css">                                                     │
│canvas {                                                                    │
│    position            :absolute;                                          │
│    top                 :32px;                                              │
│    left                :32px;                                              │
│    height              :400px;     /* 拡大率にあたる */                    │
│    width               :400px;     /* 拡大率にあたる */                    │
│}                                                                           │
│</style>                                                                    │
└──────────────────────────────────────┘
canvasの実サイズは、canvasタグに記載する形になる。
CSSの指定はそれをどういうサイズに引き伸ばして表示するかの指定になる。
よって、上記は「100×100」のcanvasを、「400×400」で表示する指定となり
実質は縦4倍×横4倍の指定ということになる。

で、jQueryで縦と横に11本ずつ線を引いて、「囲」みたいな図を書いた例は以下の通り。
┌──────────────────────────────────────┐
│<script>                                                                    │
│$(function(){                                                               │
│    $('canvas').css({                                                       │
│        'background-color'  :'#EEEEEE',         // 背景色(灰)               │
│    });                                                                     │
│    if ($('canvas')[0].getContext) {                                        │
│        for (var i = 0; i <= 100; i += 10) {                                │
│            var context = $('canvas')[0].getContext('2d');                  │
│            // 縦線                                                         │
│            context.beginPath();                // 開始                     │
│            context.moveTo(i,   0);             // 始点                     │
│            context.lineTo(i, 100);             // 終点                     │
│            context.closePath();                // 終了                     │
│            context.strokeStyle = '#0000FF';    // 線の色(青)               │
│            context.stroke();                   // 描画                     │
│            // 横線                                                         │
│            context.beginPath();                // 開始                     │
│            context.moveTo(  0, i);             // 始点                     │
│            context.lineTo(100, i);             // 終点                     │
│            context.closePath();                // 終了                     │
│            context.strokeStyle = '#FF0000';    // 線の色(赤)               │
│            context.stroke();                   // 描画                     │
│        }                                                                   │
│    }                                                                       │
│});                                                                         │
│</script>                                                                   │
└──────────────────────────────────────┘
「$('canvas')」ではなく、「$('canvas')[0]」を用いる点がミソである。

分類：jQuery

PostgreSQL／大量のINSERT

2018年05月22日

plain(平文)形式でバックアップしたところ、大量のINSERT文を取得してしまった。
これを別DBへ移行するため投入したいのだが。。。

やり方は以下の三つ。
┌─┬────────────────────────────────────┐
│①│インサート                                                              │
│  │「INSERT INTO "表"(列) VALUES (値);」を何回も実行する                   │
│  │数千件レベルまで                                                        │
├─┼────────────────────────────────────┤
│②│バルクインサート                                                        │
│  │「INSERT INTO "表"(列) VALUES (値),(値),…;」                           │
│  │数十万件レベルまで                                                      │
├─┼────────────────────────────────────┤
│③│コピー                                                                  │
│  │「COPY "表" FROM '入力.csv' WITH CSV;」                                 │
│  │数百万件レベルでもいける                                                │
└─┴────────────────────────────────────┘

①は取得したINSERT文をそのままコピペして実行するパターン。
最も簡単で、件数が少ないならこれがお勧め。

②はINSERT文を編集する必要あり。
前の行の末尾の「;」から次の行の「VALUES」までを「,」に置換してやればよい。
これもコピペでいける。
数十万件レベルならこれがお勧め。(①との差は歴然)

極端に件数が多いのであれば、INSERT文はあきらめる
③のパターン。
(というか、INSERTでデータ取得したこと自体がある意味おかしな感じになってしまう)
INSERT文の前後を上手に置換して、CSV形式にする。
その上で、COPY文で取り込む。
手続きがめんどくさいが、それだけの件数ということなので致し方なし。

分類：PostgreSQL

PostgreSQL／pgAdmin4クエリ初期化エラー

2018年05月21日

テーブルの右クリックメニューから「クエリツール...」を選んで
クエリツールを起動すると以下のエラーが発生する。
┌───────────────────┐
│Alertifyjs                            │
├───────────────────┤
│Query Tool Initialize Error           │
└───────────────────┘
日本語に翻訳した場合は以下。
┌───────────────────┐
│Alertifyjs                            │
├───────────────────┤
│クエリツール初期化エラー              │
└───────────────────┘

対応方法としては以下の二つ
(a) 本メニューは使わない。
    メニューバーの「ツール」→「クエリツール」を実行すればよい。
(b) 同右クリックメニューから「Count Rows」を実行してから、
    本「クエリツール...」を実行する

分類：PostgreSQL

PostgreSQL／pgAdmin4起動エラー

2018年05月19日

pgAdmin4を起動したら以下のエラーが出た。
┌───────────────────────┐
│Fatal error                                   │
├───────────────────────┤
│The application server could not be contacted │
└───────────────────────┘
「C:\Users\(ユーザ名)\AppData\Roaming\pgAdmin」の中を空にしたら直った。

「pgAdmin」の中の「pgadmin4.db」が主要因の模様(これだけの削除でもOK)。

但し、「pgadmin4.db」を削除すると、パスワードの記録や日本語化設定は
クリアされてしまう。(再設定が必要)

分類：PostgreSQL

jQuery／Ajaxのキャッシュ防止

2018年05月17日

「$.get();」などでAjaxでデータを反映させる場合、
ブラウザ上のキャッシュにデータが保存される場合がある。

一旦保存されてしまうと、再読込しても、変更したものが反映されない。

それを防ぐ方法。
┌──────────────────────────────────────┐
│$.ajaxSetup({cache:false});                                                 │
└──────────────────────────────────────┘
上記を直前に実行してあげればよい。

以下のような感じになる。
┌──────────────────────────────────────┐
│$.ajaxSetup({cache:false});                                                 │
│$.get(                                                                      │
│    // 略                                                                   │
│);                                                                          │
└──────────────────────────────────────┘

分類：jQuery

jQuery／エスケープ・アンエスケープの裏技

2018年05月13日

上記のような感じで、.text()と.html()を組み合わせると変換ができるようだ。
┌───────┬──────────────────────────────┐
│エスケープ    │エスケープ後 = $('<div\/>').text(エスケープ前).html();      │
├───────┼──────────────────────────────┤
│アンエスケープ│エスケープ前 = $('<div\/>').html(エスケープ後).text();      │
└───────┴──────────────────────────────┘
ただ、ダミーでdivタグを用いるので、
あまりお勧めはできない模様(多用するとパフォーマンスに影響がありそう)。

分類：jQuery

jQuery／エスケープ有無と出力

2018年05月12日

エスケープの有無と.text()および.html()の関係は以下の通り。
┌──────────────┬───────┬───────────────┐
│           入力元           │     動作     │             結果             │
├──────────────┼───────┼───────────────┤
│以下を未エスケープ          │.html()で出力 │×XSS対策漏れ                 │
│<script>alert("@");</script>│              │  JavaSciptが動作             │
│                            │              │  (「@」ダイアログが出力)     │
├──────────────┼───────┼───────────────┤
│以下をエスケープ済み        │.html()で出力 │○OK                          │
│<script>alert("@");</script>│              │  文字列として以下が表示      │
├──────────────┼───────┤  <script>alert("@");</script>│
│以下を未エスケープ          │.text()で出力 │                              │
│<script>alert("@");</script>│              │                              │
├──────────────┼───────┼───────────────┤
│以下をエスケープ済み        │.text()で出力 │×文字化け                    │
│<script>alert("@");</script>│              │  文字列として以下が表示      │
│                          &lt;script&gt;alert(&quot;@&quot;);&lt;/script&gt;│
└──────────────┴───────┴───────────────┘

分類：jQuery

Smarty／エラーログ

2018年05月11日

「Notice:  Undefined index: 変数 in ～」
Smartyにて、上記のような変数未定義エラーなど様々なエラーがあるが、
それをエラーログに出して、確認できないかと考えた。

よくよく調べてみたら、これらはPHPのエラーなので、
PHPのエラーログに出力されている。

よって、PHPのエラーログを見ればよいのだ。

エラーログは、「php.ini」に以下のような定義があるので、それを参照のこと。
┌──────────────────────────────────────┐
│error_log = PHPのエラーログの出力先                                         │
└──────────────────────────────────────┘

分類：Smarty

前へ 1 2 次へ