ラベル HTML の投稿を表示しています。 すべての投稿を表示
ラベル HTML の投稿を表示しています。 すべての投稿を表示

2015年1月12日月曜日

インスタント検索

Google検索で、文字入力するたびに勝手に検索する機能について、
ちょっと調べたのでメモ。

実装自体は非常に単純で、JavaScriptでkeyupイベントを取得してajaxで検索処理を実行して
結果を表示するだけ、サーバサイドはPHPでもJavaでも好きなものを使って良いです。

ただし、何も考えずこのまま実装すると文字を入力するたびに検索処理が走ってしまい
非常に重たいページになってしまう。
そのため、以下のような工夫が必要になる。
・前回のキー入力から一定時間経っている場合のみ検索結果を取得
・カーソルキーやタブキーに反応しないよう、前回の入力内容と比較して同じなら処理中止

こういった注意点を突き詰めていかないと、使いづらくて重いだけのものになってしまい、
誰も使いたくないものができあがるんだろうなーと思った。

2014年5月16日金曜日

WYSIWYGエディタで画像アップロード

WYSIWYGエディタで画像アップロードできるようにしたい!!!

■CKEditor
CKEditorに画像アップロード機能を追加する設定メモ。
KCFinderと連携させる場合、phpでgdを有効化しておく必要がある。

手順などの参考リンク
CKEditorに画像アップロード機能を追加する
CKFinder からKCFinderに乗り換え
CKEditorとKCFinderの最新版がうまく動かないと聞いたので検証

ただし、そのままだとサーバのアップロードディレクトリを直接触るようなイメージになる。
そのため、以下のような懸念がある
・アップロードされた画像がそのまま残る
・他人のアップロード画像を使用したり編集できる
・削除された場合は表示できる画像がなくなる

KCFinderを使わず、画像アップロード機能を自作する場合に参考にできそうなブログ
CKEditor でオリジナルの画像ブラウザを作る的な

■TinyMCE
TinyMCEというエディタ。
解説しているブログを見る感じだと、やりたいことに近いのはこれかも。
CKEditor同様、プラグインで機能拡張するタイプみたい。

TinyMCE エディタ上で画像をアップロードしながら貼り付けられる jbimages プラグインを使ってみた


■その他
プラグインなどを使用せず、アップロード機能を別に作って
エディタ内に挿入する方法だとこんなのがある。
CLEditorとの連携になっているけど、他のエディタとでも連携できるように思う。

CLEditor + jQuery.upload Sample

jQuery.uploadの公式サイトがリンク切れているぽい。
こっちからはダウンロードできる。

jQuery.upload

2012年9月12日水曜日

HTMLのtableタグは時代遅れ

HTML5を勉強しなければと、ずっと思ってましたが・・・。
それ以前に、table タグについては随分昔から使わないというのが主流になっているそうですね。
かなり遅れましたが、本日思い知りました。

とりあえず役立つサイトリンク
・dl、dt、ddの使い方サンプル
・定義リスト(dl、dt、dd)について
・tableタグを使わないでレイアウトする方法

あとはその理由についてのリンク
・その1
・その2

新規でやるならば、これまでの安易な方法ばかりをとらない!!
これが大事だと痛感しました。

2011年12月14日水曜日

子画面から親画面に値をセットする(JavaScript)

コードマスタなどの値をポップアップ画面で検索してセットということを
今まで携わったWebシステムではよくやっていた。
JavaScriptだけでサンプルが作れたのでメモ。
window.open で子画面を開き、window.opener で親画面にセットする流れ。
ついでに close して子画面も閉じる。

======================================================================

parent.html(親画面)
<html>
<head>
<title></title>
<script type="text/javascript">
    function windowOpen(controlName) {
        window.open("child.html?controlid=" + controlName,"new");
    }
</script>
</head>
<body>
子画面から選択した値を入れる
<input type="button" value="open" onclick="windowOpen('txtParent');">
<input type="text" id="txtParent">
</body>
</html>

======================================================================

======================================================================

child.html(子画面)
<html>
<head>
<title></title>
<script type="text/JavaScript">
    function setParentValue(){
        var controlId = getQuerystring("controlid");
        window.opener.document.getElementById(controlId).value = document.getElementById("txtValue").value;
        self.close();
    }
   
    function getQuerystring(key) { 
        var keyName = key.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
        var regex = new RegExp("[\\?&]" + keyName + "=([^&#]*)");
          
        var qs = regex.exec(window.location.href);
        if(qs == null) {
            return ""; 
        } else {
            return qs[1];
        }
    }
</script>
</head>
<body>
<input type="text" id="txtValue">
<input type="button" value="親画面に反映" onclick="setParentValue();">
</body>
</html>
======================================================================

Getで親画面のセット先のコントロールIDを渡すようにしているけど、
PHPとか.Net使うならセッションで管理するのがいいと思う。
上の例だとクエリストリングの取得サンプルも書けた。

JavaScriptでのクエリストリングの取り方