はてなブックマーク - [jQuery プラグイン]draggableの使い方
    このエントリーをはてなブックマークに追加

    アドベントカレンダーも最終日になりました。

    誕生日プレゼントに次いで、アンカーというクリスマスプレゼントまでもらってしまった、弊社安元に続いてまさかの4回目の登場の萩原です。

    まぁ今年はクリスマスは中止なわけですが

    [jQuery プラグイン]draggableの使い方

    今回はjQueryプラグイン、draggableの紹介をします。

    draggableはその名の通り、divやsqpnなどのドラッグ&ドロップを簡単に実装できるプラグインです。

    まずはこちらからjQuery UIをダウンロードします。

    その中から以下のjsファイルを使用します。
    jquery.ui.core.js
    jquery.ui.widget.js
    jquery.ui.mouse.js
    jquery.ui.draggable.js

    実際のコードを見てもらった方が早いと思うので早速コードを。

    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="jquery.ui.core.js"></script>
    <script type="text/javascript" src="jquery.ui.widget.js"></script>
    <script type="text/javascript" src="jquery.ui.mouse.js"></script>
    <script type="text/javascript" src="jquery.ui.draggable.js"></script>
    <script type="text/javascript">
    	$(function(){
    		$('div').draggable({
    			helper:'clone',//ドラッグ時に要素を複製する
    			opacity:'0.5',//不透明度の指定
    			drag:function(){},//ドラッグ中
    			stop:function(){}//ドラッグ終了時
    	});
    	})
    </script>
    <div style="border-color:black;border-style:solid;border-width:1px;width:50px;">
    	テスト
    </div>あああ

    draggableにはいくつもオプションが準備されていまして、ドラッグする時の要素の動きから、
    ドラッグ中やドラッグ終了時に関数を指定することもできます。
    関数の中ではthisを使うことでドラッグ中の要素を取得することもできますので、
    DIVを左の枠から右の枠に移すと言った動きを作ることもできます。

    (というか今回draggableを使用した目的がそれでした。)

    他にもたくさんオプションが準備されていますので、多分一通りはできるのではないかと思います。

    少しは役に立つかもしれない化学知識

    毎度おなじみになってきた化学知識コーナー第4回です。
    皆さんクロロホルムってご存知だと思います。
    ドラマとか推理アニメとかバーローとかに出てくるあれです。
    ハンカチにクロロホルムをしみこませて、かがせることで即おねんね、という描写が良くなられてますが、あれは大ウソです。

    化学ではかなり一般的に使われるもので、主に水に溶けないものを溶かすことに使われています。
    蒸発しやすく結構強烈な匂いがします。(少なくとも私は苦手です・・・)

    まぁ匂いを把握していることからわかるとおり、嗅いだら即気絶するようなものじゃありません。
    濃厚なクロロホルムを10分以上かぐと気絶したりするらしいですが・・・

    何でクロロホルムがあんな扱いなのか不思議ですね。
    昔麻酔に使われていたせいらしいですが・・・

    あ、因みに絶対に試したりしないで下さいね。
    発がん性とかありますし。

    総括

    最後なんで簡単に総括もさせていただきます。
    アドベントカレンダーをご覧下さった皆さん、Fusicの皆さん、24日お疲れ様です。
    感想としては、まず結構登場人物が割と偏っていたなぁという感じですね。
    担当を決めるルーレットをテストしていた際は、特に偏ったりしていなかったようなのですが・・・
    特に、企画者の小山が一人だけ当たらないという展開あり、4回当たりが二人もと・・・
    社内もある意味スリリング(?)な24日でした。

    内容も汎用的に使えそうなものから、なかなかコアなものまで多様な記事が登場しました。
    記事の傾向から弊社の何某はどういった分野が得意か、等もわかったんじゃないかなと思います。

    最後に

    これで、Fusicアドベントカレンダーはおしまいです。
    普段Fusicブログに登場しない人物も登場していい企画だったなと思います。
    それではまたお会いしましょう。

    Fusicアドベントカレンダーエキストララウンド(!?)にご期待下さい?

      はてなブックマーク - WordPressが動いているサーバのApache設定
      このエントリーをはてなブックマークに追加

      Fusic 平田です。
      次の人にバトンタッチしたつもりが自分でした。

      発端

      このエントリが原因でサーバが落ちたのがきっかけ。
      と言ってもそこまでアクセス数がすさまじかったわけでもないので、いろいろ見直した次第です。
      状況としては

      • 落ちた原因はメモリ枯渇
      • メモリは256MB+swap1GB

      といった感じです。

      見直しその1 – プロセス数とか調整

      とりあえずMaxClientsとかを見直し。
      デフォルトのままで

      <IfModule prefork.c>
      StartServers      8
      MinSpareServers   5
      MaxSpareServers   20
      ServerLimit       20
      MaxClients        256
      MaxRequestsPerChild  4000
      </IfModule>

      になっていたんですが、これだと富豪すぎるので

      <IfModule prefork.c>
      StartServers      8
      MinSpareServers   8
      MaxSpareServers   8
      ServerLimit       8
      MaxClients        8
      MaxRequestsPerChild  32
      </IfModule>

      くらいまで極端に減らしました。
      繋がらないとか出たらまた増やしながら様子見ようという魂胆。

      各設定値についてはこのへんが参考になるかと。
      省運用目的だとこのくらいで十分かな、といった印象です。
      もっとメモリに余裕があって待機プロセス多くても問題ない時は

      <IfModule prefork.c>
      StartServers      32
      MinSpareServers   32
      MaxSpareServers   32
      ServerLimit       32
      MaxClients        32
      MaxRequestsPerChild  64
      </IfModule>

      くらいで運用してたりします。
      「これだと一斉にMaxRequestPerChild迎えて死ぬからいやん」って人はmod_bumpy_lifeがいい感じです。

      見直しその2 – 不要モジュールを切る

      あとは1プロセスごとの使用メモリを抑える方向に。
      余計なモジュールはロードしなくていいので。
      これはいらないだろう、を少しずつ切ってます。

      #LoadModule authz_owner_module modules/mod_authz_owner.so
      #LoadModule authz_groupfile_module modules/mod_authz_groupfile.so
      #LoadModule authz_dbm_module modules/mod_authz_dbm.so
      #LoadModule ldap_module modules/mod_ldap.so
      #LoadModule authnz_ldap_module modules/mod_authnz_ldap.so
      #LoadModule env_module modules/mod_env.so
      #LoadModule ext_filter_module modules/mod_ext_filter.so
      #LoadModule dav_module modules/mod_dav.so
      #LoadModule dav_fs_module modules/mod_dav_fs.so
      #LoadModule actions_module modules/mod_actions.so
      #LoadModule speling_module modules/mod_speling.so
      #LoadModule proxy_ftp_module modules/mod_proxy_ftp.so

      もっと切っていいモジュールはあるんですが、その辺はサーバの用途とにらめっこして決めるのがいいでしょう。

      で再起動して様子見

      再起動してtopを画面脇に流しつつ様子見。
      こっそりabでリクエスト投げたり普通にリロード連打したりで、とりあえずは安定したっぽいのでこのくらいで。
      まとめると

      • preforkのデフォルト設定は普通のサイトだと結構な富豪具合なので要調整
      • モジュールも明らかに不要ならさっくり切る

      といったところです。
      あまり凝ったことをしないで済むようには心がけています。

      てことで

      今度こそ次の人にバトンタッチ。

        はてなブックマーク - Google Base Data APIで商品検索
        このエントリーをはてなブックマークに追加

        Fusic 平田です。
        1回くらいはさっさと当たれーとか思ってたら、ここまで引っ張りました。

        前提

        本題の前に。
        数日前に弊社の化学系新卒君が書いたAmazon APIの記事
        これとの繋がりが微妙にあるような話です。

        要は商品検索をいろいろ調べたり調べてもらったりしていたのです。
        Amazonだと多種多様の商品調べられてすごく便利、なんですが。
        1時間で2000アクセス~だと、あまり思い切ってリクエスト投げられない。
        # amazletでも最近引っかかっていましたし。
        てことでGoogle先生に頼ってみたところ、思いのほかいい感じだったのでご紹介。

        Google Base Data API

        Google Product Searchと言えばピンと来る人もいるでしょうか。
        旧Froogleだったりしながら未だにbetaなのですが。
        このデータ群を検索するためのAPIがGoogle Base Data APIです。
        # 商品に限らずいろいろ検索できます。

        とりあえず使ってみる

        # 以下のリンクはIEやFirefoxで開くとより分かりやすいです。
        仕組みは単純で、クエリを投げたら結果がFeedで返ってきます。
        例えば「モンスターハンターポータブル」で検索してみると
        www.google.com/base/feeds/snippets/?bq=モンスターハンターポータブル
        こんな感じです。

        突っ込んだ使い方

        bq=で渡す値をいろいろ変えることで、いろいろ検索できます。

        例えば中古品だけを探したい場合。
        スペース空けて後ろに[condition:used]を追加すればOK。
        「モンスターハンターポータブル」を中古のみ検索

        値段で絞りたい場合は[price >= 2000 JPY]とか付ければいいです。
        「モンスターハンターポータブル」を2000円以上で検索

        これらは組み合わせて使えるので[condition:new][isbn][price <= 1000 JPY]とか後ろに付ければ
        「デジタルカメラで新品でISBNコード持って(書籍かCDあたり)て1000円以内」
        とかもできます。

        更に値段でソートしたければ後ろにorderbyとsortorderを渡せばいいです。
        「更に値段の昇順でソートした結果」

        プログラムで取ってくる

        単にリクエスト投げてFeedを受け取るだけなので、割と簡単です。
        例えば引数でクエリの値を渡すようなプログラムだとこんな感じになります。

        #!/usr/bin/env perl
        use warnings;
        use strict;
        use Furl;
        use XML::Feed;
        use URI::Escape;
         
        if (@ARGV != 1) {
            die 'Usage: perl /path/to/snippet.pl [bq parameter]';
        }
         
        # 引数を受け取る
        my $query = shift;
         
        # Furl初期化
        my $furl = Furl->new(
            agent => 'Sample script for Google Base Data API',
            timeout => 10,
        );
         
        # リクエスト送信
        my $request_url = 'http://www.google.com/base/feeds/snippets/';
        my $res = $furl->get($request_url . '?bq=' . uri_escape($query));
         
        # レスポンスのXMLをパース
        my $feed = XML::Feed->parse(\$res->content);
         
        # SnippetのURLとタイトルを表示
        foreach my $entry ( $feed->entries ) {
            my $snippet_url = $entry->id;
            my $title = $entry->title;
            print "$snippet_url : $title \n";
        }
         
        exit;

        で、実行すると

        debility@xebius:~/works$ perl ./snippet.pl "デジタルカメラ [condition:new][isbn][price <= 1000 JPY]"
        http://www.google.com/base/feeds/snippets/9861142365767353685 : 55才から楽しむデジタルカメラで写真工房 Windows XP版 お父さんお母さんのための 押すだけ撮影から卒業・デジカメで思い出を残そう
        http://www.google.com/base/feeds/snippets/8908453582924256996 : デジタルカメラとパソコンを合わせて使える本
        http://www.google.com/base/feeds/snippets/12581094022531619238 : デジタルカメラ批判序説 あるいは、デジタルカメラで写真は撮れない
        http://www.google.com/base/feeds/snippets/1086636419406988656 : FMVでもっと楽しむデジタルカメラ わかりやすい図解入り
        http://www.google.com/base/feeds/snippets/13607998448764488416 : デジタルカメラ進化論
        http://www.google.com/base/feeds/snippets/10565006307493625118 : デジタルカメラで「趣味」を撮ってらくらく印刷
        http://www.google.com/base/feeds/snippets/13954829398014624305 : 大人のためのはじめてのデジタルカメラ 賢い選び方と快適活用術
        http://www.google.com/base/feeds/snippets/16925320360818721412 : デジタルカメラエクスプレス Vol.1
        http://www.google.com/base/feeds/snippets/13769101776078837942 : デジタルカメラエクスプレス Vol.2
        http://www.google.com/base/feeds/snippets/11531105340749645450 : デジタルカメラLabs Vol.1
        http://www.google.com/base/feeds/snippets/16563827664371922494 : いっきにわかるデジタルカメラの買い方・使い方―あなたのパソコンライフをいっきにひろげるデジタルカメラのすべて
        http://www.google.com/base/feeds/snippets/15904047532666634991 : 今日から上達デジタルカメラスーパー活用!
        http://www.google.com/base/feeds/snippets/8964847794878919955 : デジタルカメラ選び方・撮り方・楽しみ方 最新43機種の○と×がイッキにわかる!
        http://www.google.com/base/feeds/snippets/7419790109938360232 : デジタルカメラマガジン No.4
        http://www.google.com/base/feeds/snippets/6668800394078123731 : Best GearデジタルカメラSpecial ミラーレス一眼の真価キャッチせよ!激変のコンデジ
        http://www.google.com/base/feeds/snippets/5458330732187518314 : デジタルカメラマガジン Vol.16
        http://www.google.com/base/feeds/snippets/3282137698886167565 : デジタルカメラを始めよう
        http://www.google.com/base/feeds/snippets/16178408780302372761 : こんなに簡単デジタルカメラ徹底活用術 撮影・プリント・レタッチ・Web・デジカメの基本がよくわかる!すぐできる!
        http://www.google.com/base/feeds/snippets/15687552409826306759 : 55歳から楽しむデジタルカメラで写真三昧
        http://www.google.com/base/feeds/snippets/15331179909448343256 : デジタルカメラを始めよう
        http://www.google.com/base/feeds/snippets/6890264039679668486 : こんなに簡単デジタルカメラ&デジカメ写真のためのパソコン活用術 日本でいちばんやさしく丁寧な解説本
        http://www.google.com/base/feeds/snippets/6673485326686974641 : デジタルカメラを始めよう―For Windows & Macintosh (2002年版)
        http://www.google.com/base/feeds/snippets/5869285652009149385 : デジタルカメラを始めよう (2003年)
        http://www.google.com/base/feeds/snippets/3661117677961004259 : 中高年のための最新デジタルカメラ使いこなし術
        http://www.google.com/base/feeds/snippets/12355831548414530192 : 超図解ビギナーズデジカメ

        てな具合です。
        他の言語でも実装は非常に簡単でしょう。

        制限

        リクエスト制限については
        code.google.com/apis/base/faq.html#Limits

        > The Google Base data API supports up to approximately 5 queries per second, per user.

        てことで秒間5クエリくらいまでOKなので、だいぶ思い切って投げられます。多い日も安s

        てことで

        次の方にバトンタッチ。