2011年4月30日土曜日

HTML5 + jQuery でGoogle検索

ブログなどでよくみるGoogle検索ガジェットのようなもの。
このサンプルではGoogleサーバにホスティングされたjQueryを利用します。
jQuery他、Dojo、jQuery UIなどのJavascriptフレームワークを利用可能です。

メリットとしては、Googleサーバにて無期限にホストしてくれるため、
自身が用意したサーバに配置して、
都度バージョンを管理したりする必要がないのが強みですね!!

ソースコードはこちら。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 非同期通信サンプル Google Ajax Libraries APIを使用</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
<!--
    // Google Search APIを利用(バージョンは1.0で問題なし)
    google.load('search', '1');
    // GoogleサーバにホスティングされたjQuery1.X.Xの最新版を自動的にロード
    google.load('jquery', '1');
    google.setOnLoadCallback(function() {
      $(function() {
        // SearchControlオブジェクトを生成
        var sc = new google.search.SearchControl();
        // Web検索サービスを設定。他にもローカル検索サービス、ブログ検索サービス、ビデオ検索サービスなど様々。
        sc.addSearcher(new google.search.WebSearch());

        // 検索結果をタブ表示
        var drawOptions = new GdrawOptions();
        drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);

        // SearchControlに格納された検索結果を描画
        sc.draw($('#sc')[0], drawOptions);
        // 検索実行
        sc.execute("");
      }); // end of jQuery
    }); // end of setOnLoadCallback
// -->
</script>

</head>
<body>
  <div id="sc">Loading...</div>
</body>
</html>

2011年4月26日火曜日

O'Reillyで電子書籍購入×5

先月、O'Reillyが全ての電子書籍を半額で販売し、その売上を日本赤十字社に寄付するとのことで、
こんな、被災地へ貢献できて、かつ自分も得する機会はない!と思い、
5冊も購入してしまいました。

・iOS SDK Hacks
・iPhone/iPadゲーム開発ガイド
・正規表現クックブック
・詳説 ActionScript 3.0
・アルゴリズムクイックリファレンス


アルゴリズムクイックリファレンスや詳説 ActionScript 3.0あたりから読みふけっています。
ActionScript 3.0の本は1,000頁以上。
壮大・・・

2011年4月24日日曜日

MacBook Pro 13インチを購入!

いつでもどこでもプログラミング・英語の勉強がしたい!

ということでノーパソを散策中だった矢先、
Core i5・USB3.0よりも転送速度が速いと言われているThunderbolt搭載で
定価\108,800はとても魅力!


しかし、初Mac PCということで、
開発環境の構築にも手間取っています。。

簡単に挙げられることといえば、

・キー配置に慣れること(Command, option…)
・カットペーストがデフォルトで存在しないこと
・Finderの操作
・トラックパッドの操作
・eclipse Mac OS X版のセットアップ

これらが立ちはだかりました。


eclipseも普通にインストールして起動だけならいいのですが、
Mac版のPleiadesが公式でないため、少し手間が必要でした。

それでも何とか完了!!


よーし、これから外でも家でもバリバリ開発するぞー!!!

2011年4月23日土曜日

HTML5 + jQuery mobile でiPhone, Android対応サイト作成 ~入門~


HTML5 + jQuery mobileによるスマートフォン対応サイト作成(by Webサービス勉強会にて学んだことを実践)

Dreamweaver CS5.5がjQuery Mobileに正式に対応し、
事実上のスタンダードとなったといえるjQuery mobile。ますます注目ですね。














各コンテンツはいずれも同じHTMLソース内に実装しています。
そして、ページ遷移やBackボタンはjQuery mobileにて提供されるため、
ページ作成に集中できるというわけです。

1.HTML内にダウンロード・配置したjQuery mobileとCSS定義を追加。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
2.トップページ作成。 data-theme属性は"a","b","c"などでテーマ・背景色を変更することができます。
<!-- ページ。ページごとにユニークなidを指定(同じページ内で重複させない)-->
<div id="basic" data-role="page">

  <!-- ヘッダ -->
  <!-- data-theme属性を変えることで色を変更可能 -->
  <div data-role="header" data-theme="e"><h1>トップページ</h1></div>

  <!-- コンテンツ -->
  <div id="title" data-role="content">
    <ul data-role="listview">
      <li><a href="#about">会社案内</a></li>
      <li><a href="#saiyo">採用情報</a></li>
      <li><a href="#ir">IR情報</a></li>
      <li><a href="#shachou">社長挨拶</a></li>
      <li><a href="#service">サービス一覧</a></li>
      <li><a href="#inquary">お問い合わせ</a></li>
    </ui>
  </div>
 
3.各コンテンツ作成。 ページのidを、トップページから遷移させたいidと合わせるだけ。
<!-- 会社案内 START -->
<!-- ぺージ --> 
<div id="about" data-role="page"> 

  <!-- ヘッダー --> 
  <div data-role="header" data-theme="e"><h1>会社案内</h1></div>

  <!-- コンテンツ -->
  <div id="title" data-role="content">
    会社案内:我が社はhogehoge
  </div>

  <!-- フッター --> 
  <div data-role="footer" data-position="fixed">copyright hogehoge</div> 

</div><!-- /about -->
<!-- 会社案内 END -->
▼感想

意外と表現力のあるサイトが作れる。

AndroidやiPhoneなどハードの違いを気にすることなく、作りたいコンテンツが作れるのは大きな魅力。

2011年4月21日木曜日

CSS Nite in Ginza, Vol.56 に参加!!

アップルストア銀座 3Fシアターで開かれた
CSS Niteに行って参りましたよー

内容はこちら↓



デザイナーのための“黒い画面”入門

  by 駒形 真幸(こまがた・まさゆき)さん
  FJORD, LLC 代表社員 プログラマー

コーディングを3倍速くする! Vim入門

 by 比留間 和也(ひるま・かずや)さん

  面白法人カヤック 意匠部所属

いやぁ、ためになった。
Vimを極めて、プログラマーとして更なる向上を図る決意を固めました!!

講演の最初のFacebook非難はウケた・・・

SJC-P/310-065に合格

しました。

正式名称:Java Standard Edition 6 Programmer Certified Proffessional Exam

2ヶ月、土曜日だけ費やして合格しました。
平日は別の勉強をしているので、土曜日だけ利用。

個人的には平均点が低い下記3つが高得点だったのが嬉しかった。

  ・平行性(スレッド)が100%
  ・APIコンテンツが85%
  ・コレクション/ジェネリックスが87%


ただ、もっと全体的には高得点取れたはずなので、
若干悔いが残るなぁ

参考書の内容の方が濃くて難しかった気がする。
まぁ内容をしっかり把握できたので良かったけど。




次はSJC-WC(Sun Certified Web Component Developer)か、
Flashクリエイター能力認定試験か迷うけど、、、


やはりまずはTOEICかな。

2011年4月19日火曜日

Personal Goal

私の個人的な目標



それは、

被災した方々へ向けた支援、

それもエンジニアにしかできないようなITによる支援を行うことです。



Googleが迅速に立ち上げたPersonal Finder(消息情報)のような素敵なサービス然り、

公式情報をマッシュアップして、災害に強いクラウドサービスに載せた災害時支援アプリを作成し、


自分なりの貢献の形としたいという気持ちが強くなりました。



これは偽善でも何でもなく、仕事を世の中のために活かしたいという、
個人的な目標です。



そのためにも、日々怠けず、技術を絶えず磨いていくことが大事。