プログラミング言語や環境設定を中心としたパソコン関連の技術メモです。
主にシステム開発中に調べたことをメモしています。TIPS的な位置付けで、気が向いたときにちまちま更新していきます。
FC2ブログの自動下書き機能を真似る
FC2ブログを使っている人は分かると思いますが、FC2ブログには
入力中の内容を一定時間ごとに自動で下書きとして保存してくれる機能があります。

前々から「これは親切だなー」と感じていましてね。
いつかパクって……もとい、真似させていただこうと思っていたのです。
そして今回、タイミングがあったのでパク……真似させていただきました。

この機能によって、入力中の内容が消えちゃう哀しい事態を回避できますからね。
作った人は天才で優しく、そしてとても素晴らしい人だと思います。
この機能を考え出した人、流石ですね(人´∀`)

よし。
これだけ褒めておけば、真似てもそこまで怒られることは無いだろう。

それでは早速……の前に、別にFC2ブログさんの中身を解析したとかではありません。
表面上の動きを見て「こんな感じかな~」との推測を元に自分で作ったので、
実際にはFC2ブログさんとは全然違うことをやっている可能性もあります。
あくまで機能として参考にしただけなんで、なんか変なところがあったらゴメンナサイ。
別に私の書いたコードがおかしかろうとFC2ブログさんには何も関係ありません。

それでは改めて、作ってみたのはこんな感じφ(--)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>test</title>
    <script src="./js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        <!--
            jQuery.support.cors = true;

            // タイマーID
            var timerId;

            //通信対象URL
            var url = "http://192.168.0.2/hoge.php";

            // 繰り返される処理
            function doProc(){
                if($("#input_text").val() != ""){
                    //非同期通信で下書き保存
                    $.ajax({
                     type: "GET",
                     url: url,
                        data: {article_id : 'hoge',
                            input_text : $("#input_text").val(),
                        },
                     timeout: 10000,
                     success: function(msg) {
                            //下書き保存時間を表示
                            var now = new Date();
                            $("#msg_area").html("記事を下書き保存しました(" + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds() + ")");
                     },
                     error:function(XMLHttpRequest, textStatus, errorThrown){
                            $("#msg_area").html("エラー:" + textStatus + ":" + errorThrown);
                     }
                    });
                }
            }

            // 画面表示時の処理
            $(document).ready(function(){
                //タイマー開始
                this.timerId = setInterval("doProc()", 10000);
            });

        // -->
    </script>
</head>
<body>
    <p id="msg_area"></p>
    <textarea id="input_text"></textarea>
</body>
</html>

仕組みはぶっちゃけ単純ですよ。
入力中の内容を非同期通信でサーバに送りつけているだけです。
サーバ側では送られてきた情報を状態「下書き」でDBに保存しています。

一応、上からざっくり解説しておくと

jQuery.support.cors = true;

はおまじない。
詳細は「jQuery、$.ajax()で「No Transport」エラーになる場合の対処」をご覧ください。

//通信対象URL
var url = "http://192.168.0.2/hoge.php";

は入力中の内容を送り付ける先です。
入力中の内容を実際にDBとかファイルとかセッションとかに
下書きとして保存してくれる奴です。
サーバ側のコードはここには書きませんが、まぁ適当に。
「どこに入力中か」(記事No.とか)と「何を入力中か」(入力中の内容)を
保持しておけば良いだけですからね。

if($("#input_text").val() != ""){
    //非同期通信で下書き保存
    $.ajax({
     type: "GET",
     url: url,
        data: {article_id : 'hoge',
            input_text : $("#input_text").val(),
        },
     timeout: 10000,
     success: function(msg) {
            //下書き保存時間を表示
            var now = new Date();
            $("#msg_area").html("記事を下書き保存しました(" + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds() + ")");
     },
     error:function(XMLHttpRequest, textStatus, errorThrown){
            $("#msg_area").html("エラー:" + textStatus + ":" + errorThrown);
     }
    });
}

の部分が今回のメイン処理ですね。
とは言っても、別に特別なことをやっている訳ではありません。
非同期通信で通信対象URLのurlに対して入力内容を送り付けています。

ちなみに

input_text : $("#input_text").val(),

のところが入力内容をGETパラメータとして付与しているところね。

あとは通信が成功したらメッセージを更新、失敗したらエラー内容を表示です。
「$.ajax()」自体がよく分からない人は頑張って勉強してください。

そんな感じ(--)ノ
スポンサーリンク
 
このエントリーをはてなブックマークに追加 

category:● JavaScript  thema:システム開発 - genre:コンピュータ  Posted by ササキマコト 

  関連記事