Archive for the ‘JavaScript’ Category

    はてなブックマーク - jquery.simplesearch.js のご紹介
    このエントリーをはてなブックマークに追加

    はじめまして、同世代が次々と結婚していく現状にそろそろ焦りを感じ始めた島田です。
    (安元さんおめでとーございます!)

    Fusicでは主に、PHP, Javascript, サーバ構築・管理を担当しています。
    今後ともよろしくお願いします。

    早速ですが、今回は 自作 jQueryプラグイン の紹介をさせていただきます。

    内容

    このプラグインは、Firefoxの各種設定ページ(アドレスバーに about:config と入力した時に出てくるページ)のフィルタをイメージして作成しています。
    ※Ajax は使ってないです。

    デモ
    ※ デモのテキストボックスに『FW』と入力すると、Position が FW のリストだけが表示されます。

    行数の多いテーブルなどで、フィルタをかけて表示したい時などにご利用ください。
    デモでは、単純にHTMLのテーブルをフィルタリングしてますが、
    私はよく、環境変数や定数などを度忘れした時なんかに、print_a で表示してフィルタリングをかけたりしています。。

    使い方

    HTML:

    <!-- 検索用テキストボックス -->
    <p><input type="text" name="jquery.search" id="jquerysearch" value="" /></p>
    
    <hr />
    
    <!-- フィルタをかけるリスト -->
    <table id="seachtable">
      <thead>
        <tr>
          <th>No.</th>
          <th>Nationality.</th>
          <th>Position.</th>
          <th>Name.</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td class="test">スペイン</td>
          <td>GK</td>
          <td>ビクトール・バルデス</td>
        </tr>
        <tr>
          <td>2</td>
          <td>ブラジル</td>
          <td>DF</td>
          <td>ダニエウ・アウヴェス</td>
        </tr>
        <tr>
          <td>3</td>
          <td>スペイン</td>
          <td>DF</td>
          <td>ジェラール・ピケ</td>
        </tr>
        <tr>
          <td>5</td>
          <td>スペイン</td>
          <td>DF</td>
          <td>カルレス・プジョル</td>
        </tr>
        <tr>
          <td>6</td>
          <td>スペイン</td>
          <td>MF</td>
          <td>シャビ</td>
        </tr>
        <tr>
          <td>7</td>
          <td>スペイン</td>
          <td>FW</td>
          <td>ダビド・ビジャ</td>
        </tr>
        <tr>
          <td>8</td>
          <td>スペイン</td>
          <td>MF</td>
          <td>アンドレス・イニエスタ</td>
        </tr>
        <tr>
          <td>9</td>
          <td>スペイン</td>
          <td>FW</td>
          <td>ボージャン・クルキッチ</td>
        </tr>
        <tr>
          <td>10</td>
          <td>アルゼンチン</td>
          <td>FW</td>
          <td>リオネル・メッシ</td>
        </tr>
        <tr>
          <td>11</td>
          <td>スペイン</td>
          <td>FW</td>
          <td>ジェフレン・スアレス</td>
        </tr>
        <tr>
          <td>13</td>
          <td>スペイン</td>
          <td>GK</td>
          <td>ホセ・マヌエル・ピント</td>
        </tr>
        <tr>
          <td>14</td>
          <td>アルゼンチン</td>
          <td>MF</td>
          <td>ハビエル・マスチェラーノ</td>
        </tr>
        <tr>
          <td>15</td>
          <td>マリ</td>
          <td>MF</td>
          <td>セイドゥ・ケイタ</td>
        </tr>
        <tr>
          <td>16</td>
          <td>スペイン</td>
          <td>MF</td>
          <td>セルヒオ・ブスケツ</td>
        </tr>
        <tr>
          <td>17</td>
          <td>スペイン</td>
          <td>FW</td>
          <td>ペドロ・ロドリゲス</td>
        </tr>
        <tr>
          <td>18</td>
          <td>アルゼンチン</td>
          <td>DF</td>
          <td>ガブリエル・ミリート</td>
        </tr>
        <tr>
          <td>19</td>
          <td>ブラジル</td>
          <td>DF</td>
          <td>マクスウェル</td>
        </tr>
        <tr>
          <td>21</td>
          <td>ブラジル</td>
          <td>DF</td>
          <td>アドリアーノ・コレイア</td>
        </tr>
        <tr>
          <td>22</td>
          <td>フランス</td>
          <td>DF</td>
          <td>エリック・アビダル</td>
        </tr>
        <tr>
          <td>26</td>
          <td>スペイン</td>
          <td>DF</td>
          <td>アンドレウ・フォンタス</td>
        </tr>
        <tr>
          <td>27</td>
          <td>スペイン</td>
          <td>FW</td>
          <td>ノリート</td>
        </tr>
        <tr>
          <td>28</td>
          <td>スペイン</td>
          <td>MF</td>
          <td>セルジ・ロベルト</td>
        </tr>
        <tr>
          <td>29</td>
          <td>スペイン</td>
          <td>FW</td>
          <td>ビクトール・バスケス</td>
        </tr>
        <tr>
          <td>30</td>
          <td>スペイン</td>
          <td>MF</td>
          <td>ティアゴ・アルカンタラ</td>
        </tr>
        <tr>
          <td>31</td>
          <td>スペイン</td>
          <td>GK</td>
          <td>ルベン・ミーニョ</td>
        </tr>
        <tr>
          <td>32</td>
          <td>スペイン</td>
          <td>DF</td>
          <td>マルク・バルトラ</td>
        </tr>
        <tr>
          <td>33</td>
          <td>スペイン</td>
          <td>DF</td>
          <td>セルジ・ゴメス</td>
        </tr>
        <tr>
          <td>34</td>
          <td>メキシコ</td>
          <td>MF</td>
          <td>ジョナタン・ドス・サントス</td>
        </tr>
        <tr>
          <td>35</td>
          <td>スペイン</td>
          <td>DF</td>
          <td>マルク・ムニエッサ</td>
        </tr>
        <tr>
          <td>36</td>
          <td>スペイン</td>
          <td>MF</td>
          <td>マルティ・リベロラ</td>
        </tr>
        <tr>
          <td>37</td>
          <td>スペイン</td>
          <td>MF</td>
          <td>オリオール・ロメウ</td>
        </tr>
        <tr>
          <td>38</td>
          <td>スペイン</td>
          <td>GK</td>
          <td>オイエル・オラサバル</td>
        </tr>
        <tr>
          <td>39</td>
          <td>スペイン</td>
          <td>FW</td>
          <td>ルベン・ロチーナ</td>
        </tr>
      </tbody>
    </table>

    Javascript:

    $(function(){
      $('#jquerysearch').simplesearch({
        // フィルタをかけた時、表示・非表示にするリスト
        lines: '#seachtable tbody tr',
        // 対象となる文字列が含まれるセレクタ
        //※nullの場合は、lines 全体の文字列を検索
        targets: 'td',
        // 最後の入力から interval秒 経過するとフィルタリングを開始します
        interval: 500
      });
    });
    

    DOMがロードされた時点(ready(fn))で、文字列・jQueryオブジェクトを変数に格納して、検索時にはその変数を参照するなどなるべくスムーズに動せるように実装しています。

    なお、ソースコードはここに置いてますので、ご自由にご利用ください。

    それでは、また次回お会いしましょう。
    さようなら。

      はてなブックマーク - Titanium MobileでiPhoneアプリを開発、リリースしました
      このエントリーをはてなブックマークに追加

      * 2010/11/17 17:00追記

      foursquareで誰もチェックインしない会社のMayerになってニヤニヤしている小山です。

      最近、個人的にですが、`CacooViewer’というiPhoneアプリをリリースしました。

      CacooViewer
      CacooViewer

      CacooViewerは、弊社と同じ福岡に本社を置くヌーラボさんの`Cacoo‘というリアルタイムなコラボレーションが可能なWebドローイングーサービスのモバイルビューワです。
      CacooViewerは非常に簡単なアプリですが、Flashで作成されているCacooの「iPhoneやiPadで作成した画像を見れない」という弱点を若干ながら補完するアプリになっています。

      で、

      実はこのアプリ、Titanim Mobileを利用して作られています。

      Titanium Mobileって何?

      Titanium Mobileとは、大雑把に言うと「JavaScriptを利用してiPhoneを初めとしたモバイルネイティブアプリが作成できるクロスコンパイル開発環境」です。

      Titanium MobileはTitanium Developerという開発環境を通じて利用できます。
      Titaniumはデスクトップアプリを作成することもでき(Titanium Desctop)、それらもTitanium Developerを通じて利用できます。

      Titanium Mobileは何がいいの?

      特に自分のようなWebシステムの開発者に言えるのですが、まず第一に「JavaScriptという普段利用している言語でiPhoneのネイティブアプリが作成できる」ということでしょう。
      やはり言語の壁というのは少なからずあります。学習コスト以前に「やろうかな」と思うことに躊躇してしまいます。それがJavaScriptという普段使い慣れているものが利用できるというのは非常に大きいです。

      次に言えるのは「コード記述量が格段に少なくなる」ということです。これはJavaScriptという言語の恩恵とも言えますが、Objective-Cでは記述が多くなる部分も、Titanium Mobileでは全て糖衣しているようなイメージを受けます。単純には言えませんが、開発スピードも早くなるかもしれません。
      逆にTitanium Mobileから提供されているAPI以外の機能を利用するのはなかなか難しそうです。

      最後に、「メモリ管理をする必要がない」ということです。これも逆に言えば「メモリ管理ができない」ということになるのですが、
      CacooViewerのような単純なアプリの開発では、本当にメモリを意識することなく開発ができます。
      自分みたいなゆとりプログラマには嬉しいメリットですw

      Titanium Mobileの情報はどれくらいあるの?

      これは最も重要な疑問だと思います。しかし、心配ありません。

      まず、1番初めに強調したい情報として@donayamaさん著の「Titanium MobileではじめるiPhoneアプリケーション開発(PDF)」という日本語電子書籍(PDF)があります。
      これがすごいです。もうなんというかO’Reilly本並です。この書籍でひととおりの開発が可能です。

      さらに@donayamaさん主導でtitanium-mobile-doc-jaという日本語情報の収集プロジェクトがあります。
      (さきほどの電子書籍はこのプロジェクトの成果のようです)
      こちらにもAPIに関する日本語解説や細かいTipsなどが数多く蓄積されています。

      さて、本当は最初に紹介するべきものとして公式APIリファレンスもあります。

      そして、開発を進めるに当たって最も強力な味方になってくれる公式サンプルアプリ「Kitchen Sinkがあります。

      Kitchen SinkはTitanium Mobileでできることをほぼ全て詰め込んだアプリです。
      その全てのコードがTitanium Mobileで作成されていて、さらにソースコードがすべて公開されています

      つまり、「何ができるのか」と「どう作るのか」を見ることができるのです。

      公式APIは若干間違っていたり古いことがあるらしく、Titanium Mobile開発者の間では「困ったときはKitchen Sinkを見ろ」が合言葉だとかそうでないとか。

      おそらく世のTitanium MobileでiPhoneを開発する開発者のiPhoneにはKitchen Sinkが実機転送されているのではないでしょうか?

      Titanium Mobileで開発できるというのは分った。じゃあ実際どんなもんなの?

      Kitchen Sinkも実機転送はできますが、App Storeに出ているわけではありません。
      またかつての規約に「クロスコンパイルだめ」的なものがあったせいか、心配することもあるかもしれません。
      「Titanium Mobileで作成してApp Storeでリリースできた」という話は聞きますが実際のその公開されているソースコードはなかなか探しにくいものです。

      というわけでCacooViewerのソースコードを公開します。

      github.com/k1LoW/CacooViewer

      そもそもCacooViewerを開発してみようと思ったのは、PHPMatsuriでユニットホスティング賞を受賞させていただき賞品としてiPod Touchをいただいたので、何かiPhoneアプリを作ってみようと思ったのがきっかけです。
      PHPMatsuriに感謝します(そしてこれがPHPMatsuriレポート最終章です)。

      また、コラボレーションをキーワードにしているヌーラボさんのコラボレーションツールCacooのアプリです。
      ソースコードもコラボレーションしない手はありません。

      このCacooViewerのソースコードは実際にTitanium Mobileを利用してビルドし、App Storeで配布されています。
      ソースコードをみてみると非常に少ないコード量で機能が実装されていることがわかります。
      初めて作成したTitanium Mobileのコードでいろいろツッコミどころ満載ですが、逆に「これで作れるのか」と思ってもらえれば幸いです。

      Titanium Mobileが良さそうなのは分った。

      どうですか?Titanium Mobileに興味が出てきましたか?

      かなりニッチな話題ですが、できるだけ多くの方がTitanium Mobileに興味をもってもらえれば嬉しいです。
      そしてそこからさらにJavaScriptへ興味をもってくれることを切実に願います。

      それを目的として、Fusicでは来週11月25日にTitanium Mobileの社内勉強会を開催予定です。
      実際に開発環境の作成からシミュレータへのビルド、あとリリースまでにつまづいた点などを
      簡単ですができるだけわかりやすく発表する予定です。

      もし需要がありそうでしたら、その模様をZENPREにて配信したいなと考えています。
      11月25日15:00よりZENPREにてTitanium Mobile社内勉強会を配信します。

      想像以上の反響ありがとうございます。みなさんJavaScriptへ興味をもってくれたということで非常にうれしく思います。
      発表時間としては1時間弱を見込んでいます。
      配信URLは当日@ZENPREの中の人に告知してもらいます。また、開始時間近くになりましたら、ZENPREトップページからリンクがたどれるはずです。

      よろしければ是非ご覧ください。

      それでは良いJavaScriptライフを。

      募集

      弊社では、絶賛エンジニアを募集しています
      役に立つ技術もそうでない技術も分け隔てなく、「技術に好奇心をもって行動すること」を評価してくれる環境に興味のある方は是非。