あらびき林檎。 » JavaScrpit http://splitchin.com/tech Macや, iPhoneでの,Webデザイン,アプリ開発などを綴ってます。 Sun, 06 May 2012 01:09:21 +0000 http://wordpress.org/?v=2.9.1 ja hourly 1 OSX Lionに、node.jsを入れる。 http://splitchin.com/tech/2012/02/02/osx-lion%e3%81%ab%e3%80%81node-js%e3%82%92%e5%85%a5%e3%82%8c%e3%82%8b%e3%80%82/ http://splitchin.com/tech/2012/02/02/osx-lion%e3%81%ab%e3%80%81node-js%e3%82%92%e5%85%a5%e3%82%8c%e3%82%8b%e3%80%82/#comments Thu, 02 Feb 2012 10:31:43 +0000 admin http://splitchin.com/tech/?p=1769 実践JS サーバサイド JavaScript 入門

環境

Mac OSX Lion 10.7.2
node.js 0.6.4

※バージョンによって、方法が異なるようなので注意してください。

*nodejs.org/dist*

http://nodejs.org/dist/

手順

wgetで、node-latest.tar.gz(最新版)をダウンロード

sudo wget http://nodejs.org/dist/node-latest.tar.gz

tarファイルを展開

$ sudo tar zxvf node-latest.tar.gz

展開ディレクトリに移動

$ cd node-v0.6.7

$ sudo ./configure
$ sudo make
$ sudo make install

これで、node.jsのインストールは完了です！

確認

$ node -v
$ > 0.6.7

nodeのバージョンが確認できれば、インストールに成功しています。

Hello, World!

適当なディレクトリに、以下のコードを書きます。

hellonodejs.js

var sys = require('sys');
var http = require('http');

var server = http.createServer (
        function (request, response) {
                response.writeHead(200, {'Content-type': 'text/plain'});
                response.write('Hello World!\n');
                response.end();
        }
).listen(8124);

sys.log('Server running at http://127.0.0.1:8124/');

以下のコマンドを入力し、nodeを起動します。

node hellonodejs.js

ブラウザから、「http://127.0.0.1:8124/」にアクセスすると、
hellonodejs

「Hello, World!」が表示されました。

]]> http://splitchin.com/tech/2012/02/02/osx-lion%e3%81%ab%e3%80%81node-js%e3%82%92%e5%85%a5%e3%82%8c%e3%82%8b%e3%80%82/feed/ 0 eval()使用しない。- JavaScriptパターン http://splitchin.com/tech/2011/05/29/eval%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%aa%e3%81%84%e3%80%82-javascript%e3%83%91%e3%82%bf%e3%83%bc%e3%83%b3/ http://splitchin.com/tech/2011/05/29/eval%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%aa%e3%81%84%e3%80%82-javascript%e3%83%91%e3%82%bf%e3%83%bc%e3%83%b3/#comments Sat, 28 May 2011 16:31:00 +0000 admin http://splitchin.com/tech/?p=1741 Head First JavaScript ―頭とからだで覚えるJavaScriptの基本

1. evalとは?

eval: 文字列を式として評価する関数、または複数の文をプログラム中のあるコンテキストで実行するサブルーチン

JavaScriptパターン
のevalを使わない手法を学習中です。

2. JavaScriptパターン

静的プロパティにアクセスするパターン

// Anti Patern
var property = "test";
alert(eval("obj." + property));

// Good Patern
var property = "test";
alert(obj[property]);

3. evalの危険性

eval()のセキュリティ問題。
不正な、コードが実行される危険。
Bad) AjaxリクエストからJSONレスポンスをevalで処理
Good) ブラウザの組み込みメソッドを使用して、JSONのレスポンスを構文解析

  • JSON.parse (新JavaScript例文辞典)
  • JQuery.parseJSON・・・JSON.parseがサポートされていないブラウザを使用する場合

setInterval(), setTimeOut(), Function()コンストラクタ

文字列を、setInterval(), setTimeOut(), Function()コンストラクタに渡すのは、eval()にほぼ等しいので危険。

// Anti Patern
setTimeOut("myFunc()", 1000);
setTimeOut("myFunc(1, 2, 3)", 1000);

// Good Patren
setTimeOut(myFunc, 1000);
setTimeOut(function() {
     myFunc(1, 2, 3);
}, 1000);

どうしてもeval()を使用する必要がある時、new Functionコンストラクタを検討。
その関数のローカルなスコープで実行されるため、自動的にグローバルになることがない。

]]> http://splitchin.com/tech/2011/05/29/eval%e4%bd%bf%e7%94%a8%e3%81%97%e3%81%aa%e3%81%84%e3%80%82-javascript%e3%83%91%e3%82%bf%e3%83%bc%e3%83%b3/feed/ 0 JavaScriptパターン http://splitchin.com/tech/2011/05/23/javascript%e3%83%91%e3%82%bf%e3%83%bc%e3%83%b3/ http://splitchin.com/tech/2011/05/23/javascript%e3%83%91%e3%82%bf%e3%83%bc%e3%83%b3/#comments Sun, 22 May 2011 17:42:07 +0000 admin http://splitchin.com/tech/?p=1722 JavaScript本格入門　~モダンスタイルによる基礎からAjax・ｊQueryまで

最近、JSLintなど、
ストリクトなJavaScriptコードが求められてきたので、
JavaScriptのデザインパターンを２冊ほど。

JavaScriptパターン

JavaScriptパターン ―優れたアプリケーションのための作法
Stoyan Stefanov：著　豊福　剛：訳

目次

1. はじめに
2. 必須パターン
3. リテラルとコンストラクタ
4. 関数
5. オブジェクト作成のパターン
6. コード再利用パターン
7. デザインパターン
8. DOMとブラウザのパターン

他の言語とは違う、JavaScript独特の癖が理解できる書籍でした。

JavaScript The Good Parts

JavaScript: The Good Parts のDouglas Crockford氏の動画
さらに極めたい、JSLintのGood Partsオプションをクリアしたい時。


JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス

目次

1章 良いパーツ
2章 文法
3章 オブジェクト
4章 関数
5章 継承
6章 配列
7章 正規表現
8章 メソッド
9章 スタイル
10章 美しい機能たち
付録A ひどいパーツ
付録B 悪いパーツ
付録C JSLint
付録D 鉄道ダイアグラム
付録E JSON
索引

]]> http://splitchin.com/tech/2011/05/23/javascript%e3%83%91%e3%82%bf%e3%83%bc%e3%83%b3/feed/ 0 iPhone タッチイベント http://splitchin.com/tech/2011/04/11/iphone-%e3%82%bf%e3%83%83%e3%83%81%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88/ http://splitchin.com/tech/2011/04/11/iphone-%e3%82%bf%e3%83%83%e3%83%81%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88/#comments Sun, 10 Apr 2011 15:24:22 +0000 admin http://splitchin.com/tech/?p=1687 スマートフォンのためのHTML5アプリケーション開発ガイド―iPhone/iPad/Android対応

touchevent画像

サンプルURL

Apple資料

Safari Web Content Guide – Handling Events

  • onTouchStart
  • onTouchMove
  • onTouchEnd
  • onTouchCancel

※onClickのようなイベントの使い方。iPhoneでは、onClickよりレスポンスが良いらしい。

タッチ数の取得

  • event.touches.length

タッチ座標（x, y）の取得

  • event.touches[i].pageX
  • event.touches[i].pageY

※iで、各タッチの座標を格納。

]]> http://splitchin.com/tech/2011/04/11/iphone-%e3%82%bf%e3%83%83%e3%83%81%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88/feed/ 0 Flashを1回クリックしないと操作できなくなる問題 http://splitchin.com/tech/2011/04/05/flash%e3%82%921%e5%9b%9e%e3%82%af%e3%83%aa%e3%83%83%e3%82%af%e3%81%97%e3%81%aa%e3%81%84%e3%81%a8%e6%93%8d%e4%bd%9c%e3%81%a7%e3%81%8d%e3%81%aa%e3%81%8f%e3%81%aa%e3%82%8b%e5%95%8f%e9%a1%8c/ http://splitchin.com/tech/2011/04/05/flash%e3%82%921%e5%9b%9e%e3%82%af%e3%83%aa%e3%83%83%e3%82%af%e3%81%97%e3%81%aa%e3%81%84%e3%81%a8%e6%93%8d%e4%bd%9c%e3%81%a7%e3%81%8d%e3%81%aa%e3%81%8f%e3%81%aa%e3%82%8b%e5%95%8f%e9%a1%8c/#comments Mon, 04 Apr 2011 15:46:25 +0000 admin http://splitchin.com/tech/?p=1673 Flash　プロの現場の仕事術 CS5/CS4/CS3対応

2006.04.12のIEの更新プログラムをインストールすると、
Flashを1回クリックしないと操作できなくなる問題について、Adobeの解決策。

1. Adobe資料

アクティブコンテンツデベロッパーセンター – ADOBE DEVELOPER CONNECTION
http://www.adobe.com/jp/devnet/activecontent
ブラウザの更新に備えたアクティブコンテンツ使用Webサイトの準備
http://www.adobe.com/jp/devnet/activecontent/articles/devletter.html

2.Adobe Active Contents Developer Centerより引用

HTMLファイル内部に記述された<object>、<embed>、または<apple>tタグを使用してコーディングされたアクティブコンテンツを表示する前に、ユーザにクリックを促すメッセージが表示されます。ただし、複雑なFlash検出スクリプトを使用したサイトなど、外部スクリプトファイル（JavaScriptなど）によって生成されたタグを使用するHTMLページは、変化なく正常な動作を続けます。

  • 外部JavaScriptソリューション1：埋め込みコンテンツが1つまたは数個の場合
  • 外部JavaScriptソリューション2：複数の埋め込みコンテンツがある場合

AC_RunActiveContent.js：

AC_RunActiveContent.jsのダウンロード
外部JavaScriptソリューション2：複数の埋め込みコンテンツがある場合で、FlashおよびShockwaveコンテンツの回避策に使用するファイル。

利用方法

  • 1. AC_FL_RunContent.jsをアップして、読み込む。
  • 2. AC_FL_RunContent()にパラメーターを記述して呼び出す。
  • 3. noscript部分に、JavaScript OFF時の代替手段を記述する。代替Gifでも可能。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body>
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','100','height','22','src','button1','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','button1' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="100" height="22">
  <param name="movie" value="button1.swf" />
  <param name="quality" value="high" />
  <embed src="button1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="100" height="22"></embed>
</object></noscript>
</body>
</html>

]]> http://splitchin.com/tech/2011/04/05/flash%e3%82%921%e5%9b%9e%e3%82%af%e3%83%aa%e3%83%83%e3%82%af%e3%81%97%e3%81%aa%e3%81%84%e3%81%a8%e6%93%8d%e4%bd%9c%e3%81%a7%e3%81%8d%e3%81%aa%e3%81%8f%e3%81%aa%e3%82%8b%e5%95%8f%e9%a1%8c/feed/ 0 PhoneGap HTML/CSS/JavaScript　Androidアプリで試してみる。 http://splitchin.com/tech/2010/11/23/phonegap-htmlcssjavascript%e3%80%80android%e3%82%a2%e3%83%97%e3%83%aa%e3%81%a7%e8%a9%a6%e3%81%97%e3%81%a6%e3%81%bf%e3%82%8b%e3%80%82/ http://splitchin.com/tech/2010/11/23/phonegap-htmlcssjavascript%e3%80%80android%e3%82%a2%e3%83%97%e3%83%aa%e3%81%a7%e8%a9%a6%e3%81%97%e3%81%a6%e3%81%bf%e3%82%8b%e3%80%82/#comments Tue, 23 Nov 2010 14:53:42 +0000 admin http://splitchin.com/tech/?p=1497 入門 Android 2 プログラミング (Programmer’s SELECTION)

前回、iPhoneアプリで試してみた、HTML/CSS/JavaScriptで、iPhoneアプリ／Androidアプリを作るフレームワーク、「PhoneGap」を、Androidアプリでも試してみました。

1. PhoneGapをダウンロードする。

PhoneGap公式サイト:(http://www.phonegap.com/)から、PhoneGapをダウンロードします。※この段階では、Ver0.92でした。

PhoneGap-Android-Zip

Androidフォルダをそのまま、Androidのワークスペースにコピーします。

2.EclipseでAndroidプロジェクトを新規作成します。

Android New PhoneGap Project

※Mac OSX10.6.4, Eclipse Helios (3.6.1), Android SDK2.2で試したみた履歴です。

「Create project from existing source」を選択し、先ほど展開したPhonegapのAndroidのsampleを指定します。
デフォルトだと、Target Buildが、Android1.1ですが、そのまま選択するとビルドエラーが起きるので、Android 2.2を選択します。（多分1.5以上なら問題ないのではないかと思います。）

3. HTMLコーディングします。

phonegap-android-www

このようなAndroidプロジェクトが作成されます。
“www”フォルダに、”index.html”があるので、こちらを編集すると、ハイブリットアプリケーションができます。

4. エミュレーターで動かしてみる。

Androidエミュレーター

今回は、サンプルのままビルドしてみました。
色々なネイティブ機能が、JavaScriptで動作するのが確認できました！

参考資料

]]> http://splitchin.com/tech/2010/11/23/phonegap-htmlcssjavascript%e3%80%80android%e3%82%a2%e3%83%97%e3%83%aa%e3%81%a7%e8%a9%a6%e3%81%97%e3%81%a6%e3%81%bf%e3%82%8b%e3%80%82/feed/ 1 jQuery Mobile を使ってみた。 http://splitchin.com/tech/2010/11/20/jquery-mobile-%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f%e3%80%82/ http://splitchin.com/tech/2010/11/20/jquery-mobile-%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f%e3%80%82/#comments Sat, 20 Nov 2010 14:59:02 +0000 admin http://splitchin.com/tech/?p=1476 Web制作の現場で使う jQueryデザイン入門

jQuery mobile

jQuery Mobile
http://jquerymobile.com/

スマートフォンやタブレットデバイス向けに開発されているJavaScriptフレームワーク。
iOS、Androind、Blackberry Torch v.6、Palm WebOS Pre/Pixiなどに対応。

デバイスに最適化されたWebアプリを届けたい – jQuery開発者John Resig氏 – マイコムジャーナルより

jQuery Mobile Alpha 2が公開。
大幅なバグ修正、機能拡張、性能改善が実施されたバージョン
※動作にはjQuery 1.4.4が必要。

  • jQuery Mobile全体の品質を向上
  • 多くのサブシステムを書き換え
  • クロスブラウザ互換性品質の向上

2. デモ

JQueryMobileDemo

こちらから、実際のデモを閲覧できます。
http://jquerymobile.com/demos/1.0a2/

3. 対応環境

各プラットフォームと、ブラウザ対応状況は、こちらから。

Mobile Graded Browser Support
http://jquerymobile.com/gbs/

特に、ネイティブと、PhoneGapとの相性がいいですね。

4. ダウンロード

jQuery Mobileを使うには、下記のホストされているファイルを組み込むか、

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>

もしくは、こちらからhttp://jquerymobile.com/download/

※jQuery1.4.4が必要なので、なければこちらからもDLします。
http://docs.jquery.com/Downloading_jQuery

さて、これを組み込んで、
画面遷移、ボタン、スライダーを試してみました。
jquery-splitchin

サンプルURL
http://splitchin.com/sample/iPhone/jquery-mobilea2/

※SafariかChromeで閲覧してください。

個人的には、senchaフレームワークより、扱いやすかったです。

]]> http://splitchin.com/tech/2010/11/20/jquery-mobile-%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f%e3%80%82/feed/ 1 Facebook Platform – HelloWorld!を試してみる。 http://splitchin.com/tech/2010/11/08/facebook-sdk-helloworld%e3%82%92%e8%a9%a6%e3%81%97%e3%81%a6%e3%81%bf%e3%82%8b%e3%80%82/ http://splitchin.com/tech/2010/11/08/facebook-sdk-helloworld%e3%82%92%e8%a9%a6%e3%81%97%e3%81%a6%e3%81%bf%e3%82%8b%e3%80%82/#comments Sun, 07 Nov 2010 15:17:50 +0000 admin http://splitchin.com/tech/?p=1374 Facebook-developers

1. Facebook Developers Doucumentationを読む。

とりあえず、何が出来るのか、ということで
Facebook DevelopersのDocumentationを読むと、下記のような構成で

API References

■Core API
Graph API
Social plugins
■Facebook SDKs
JavaScript SDK
PHP SDK
Python SDK
iOS SDK for iPhone and iPad
Android SDK
■Advanced APIs
Graph Realtime API
Facebook Query Language (FQL)
Facebook Markup Language (FBML)
Old REST API
Old JavaScript Client Library
Internationalization
Integrating with Facebook Chat
Facebook Ads API

自サイトへの、導入資料である、Facebook for Websitesを読むと、Socail Plugins http://developers.facebook.com/pluginsがはじめに紹介されており、

Social plugins let you see what your friends have liked, commented on or shared on sites across the web. All social plugins are extensions of Facebook and are specifically designed so none of your data is shared with the sites on which they appear.

一番、基本なのは、このSocial Pluginsで、
Likeボタンを追加したり、Activity一覧を、自分のサイトに、
HTMLで組み込む事ができるAPIとのことです。

以前、Likeボタン設置したり、
大体、これで、どんなものなのか掴むことができたので、

今度は、Graph APIをJavaScript経由で利用出来るという、
Javascript SDKを試して行きたいと思います。

その前の基礎として、HTMLで、”Hello, World!” を試します。

2. Facebook API – Hello,World!を試してみる

JavaScript SDK
http://developers.facebook.com/docs/reference/javascript/
こちらを読みながら、進めてみました。

2-1, Facebook Developers – アプリケーションIDを取得

The JavaScript SDK enables you to access all of the features of the Graph API via JavaScript, and it provides a rich set of client-side functionality for authentication and sharing. The JavaScript SDK is also necessary to use the XFBML versions of the Social Plugins. Many functions in the JavaScript SDK require an application ID. You can get an app ID by registering your application.

大体の機能を使うには、IDの登録が必要だよ、とあるので、
まずは、Facebook DevelopersのアプリケーションIDを取得します。

日本語のアプリケーションID取得方法説明は、こちらの方々のサイトを参考に、「FACEBOOK開発者アプリケーションの追加とアプリケーションの登録」、facebookアプリの作り方・PHP編

2-2. Canvas URLで、”Hello, World!”を表示するHTMLを組み込む。

■Facebook Developers – MyApplication
http://www.facebook.com/developers/

自分は、MyApplicationに辿り着けなかったので、
直接、上記URLを、ブックマークしています。

Facebook - MyApplication
MyAppの、Facebook Integrationを設定します。

Facebook-Setting

  • CanvasPage URL: 組み込むHTMLのURLを指定します。
  • Canvas Type：”iframe”にすると、まるっと上記URLを組み込みます。
  • iFrameサイズ：”Auto-resize”を指定すると、自動でiframeのサイズ調整します。

上記MyAppで指定した、CanvasPage URLに、なんでもいいのですが、

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>Splitchin  - Facebook SDK Hello, World!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Splitchinは、Macでの、Webデザイン、iPhone、Tシャツ、などのクリエイティブ活動です。">
<meta name="keywords" content="Splitchin,Webデザイン,Tシャツ,iPhone,Mac">
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>
<body>
<div id="wrap">
<!-- contents -->
<div id="contents">
	<p>Facebook SDK - Hello, World!!</p>
</div>
<!-- /contents -->
</body>
</html>

こんな、「Hello,World！」を表示するHTMLをサンプルとして、アップします。

その後、

http://apps.facebook.com/****ご自分のAppベースURL***/

にアクセスすると、

facebook-helloworld

こんな感じで、「Hello,World!」が表示されました！

2-3. Facebook – JavaScript SDKをダウンロードする – (実装は次回)

■facebook / connect-js
https://github.com/facebook/connect-js

から、SDKをダウンロードします。

次回は、こちらを使用して、認証系など、実装テストしていきます。

こちらの、JS Test Consoleを使うと、
http://developers.facebook.com/tools/console/

書いた、JavaScript SDKのコードをデバッグできるので便利です。

]]> http://splitchin.com/tech/2010/11/08/facebook-sdk-helloworld%e3%82%92%e8%a9%a6%e3%81%97%e3%81%a6%e3%81%bf%e3%82%8b%e3%80%82/feed/ 0 PhoneGap – HTML/CSS/JavaScriptで、iPhoneやAndroidアプリを作るフレームワーク http://splitchin.com/tech/2010/11/06/phonegap-htmlcssjavascript%e3%81%a7%e3%80%81iphone%e3%82%84android%e3%82%a2%e3%83%97%e3%83%aa%e3%82%92%e4%bd%9c%e3%82%8b%e3%83%95%e3%83%ac%e3%83%bc%e3%83%a0%e3%83%af%e3%83%bc%e3%82%af/ http://splitchin.com/tech/2010/11/06/phonegap-htmlcssjavascript%e3%81%a7%e3%80%81iphone%e3%82%84android%e3%82%a2%e3%83%97%e3%83%aa%e3%82%92%e4%bd%9c%e3%82%8b%e3%83%95%e3%83%ac%e3%83%bc%e3%83%a0%e3%83%af%e3%83%bc%e3%82%af/#comments Sat, 06 Nov 2010 13:30:07 +0000 admin http://splitchin.com/tech/?p=1348

■PhoneGapとは
HTML/CSS/JavaScriptで、iPhoneやAndroidアプリを作るフレームワーク。

1. PhoneGapをはじめる。

今回は、iPhoneアプリでのPhoneGapを試します。
Android編はこちらから。

公式サイトもしくは、GitHubから、PhoneGapフレームワークをダウンロードします。

PhoneGap

DLしてきたZipファイルを解凍し、iOSフォルダにある、
「PhoneGapLibInstaller.pkg」を開いて、PhoneGapフレームワークをインストールします。

PhoneGapTemplate

XCodeを起動して、新規プロジェクトを作成すると、
「PhoneGap」というテンプレートが追加されているので
それを、選択してプロジェクトを作成します。

PhoneGapIndex

「www」というフォルダに、index.htmlファイルが追加されています。
このhtmlに、記述したり、PhoneGap APIをJSから使用することで
iPhoneアプリを作成していきます。

PhoneGap – API Reference http://docs.phonegap.com/
  • Accelerometer
  • Camera
  • Contacts
  • Device
  • Events
  • Geolocation
  • Network
  • Notification

2. PhoneGap APIの加速度センサーを使ってみる。

Accelerometerを参考に、accelerometer.getCurrentAccelerationを使った加速度センサーのAPIを使ってみます。

前述のwwwフォルダの、index.htmlを記述します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
	<!-- Change this if you want to allow scaling -->
    <meta name="viewport" content="width=default-width; user-scalable=no" />

    <meta http-equiv="Content-type" content="text/html; charset=utf-8">

    <title>PhoneGapTest</title>

	<!-- iPad/iPhone specific css below, add after your main css >
	<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />
	<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
	-->
	<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
    <script type="text/javascript" charset="utf-8">

	// If you want to prevent dragging, uncomment this section
	/*
	function preventBehavior(e)
	{
      e.preventDefault();
    };
	document.addEventListener("touchmove", preventBehavior, false);
	*/

	// Wait for PhoneGap to load
	function onBodyLoad() {
		document.addEventListener("deviceready",onDeviceReady,false);
	}

	/* When this function is called, PhoneGap has been initialized and is ready to roll */
    // PhoneGap is ready
	//
	function onDeviceReady() {
		navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);
	}

	// onSuccess: Get a snapshot of the current acceleration
	//
	function onSuccess(acceleration) {
        alert('Acceleration X: ' + acceleration.x + '\n' +
              'Acceleration Y: ' + acceleration.y + '\n' +
              'Acceleration Z: ' + acceleration.z + '\n' +
              'Timestamp: '      + acceleration.timestamp + '\n');
	}

	// onError: Failed to get the acceleration
	//
	function onError() {
		alert('onError!');
	}

  </script>
  </head>
  <body onload="onBodyLoad()">
  <!-- PhoneGap Test Code -->
  <h1>PhoneGap test.</h1>
  <p>getCurrentAcceleration</p>
  <!-- /PhoneGap Test Code -->
  </body>
</html>

通常のiPhoneアプリと同じように、XCodeから、ビルドします。

phoneGapAPIAccelr

JavaScriptで実装したアラートに加速度センサーが動きました。

3. PhoneGap ドキュメント関連

■PhoneGap
http://www.phonegap.com/

■PhoneGap Roadmap
http://wiki.phonegap.com/w/page/16494820/Roadmap

■GitHub
https://github.com/phonegap
オフィシャルのプラグインやAPIの、レポジトリがあります。

■DOCS API Reference
http://docs.phonegap.com/

]]> http://splitchin.com/tech/2010/11/06/phonegap-htmlcssjavascript%e3%81%a7%e3%80%81iphone%e3%82%84android%e3%82%a2%e3%83%97%e3%83%aa%e3%82%92%e4%bd%9c%e3%82%8b%e3%83%95%e3%83%ac%e3%83%bc%e3%83%a0%e3%83%af%e3%83%bc%e3%82%af/feed/ 0 FlashのHTMLの埋込み。　SWFObject v2.0 http://splitchin.com/tech/2009/12/17/flash%e3%81%aehtml%e3%81%ae%e5%9f%8b%e8%be%bc%e3%81%bf%e3%80%82%e3%80%80swfobject-v2-0/ http://splitchin.com/tech/2009/12/17/flash%e3%81%aehtml%e3%81%ae%e5%9f%8b%e8%be%bc%e3%81%bf%e3%80%82%e3%80%80swfobject-v2-0/#comments Thu, 17 Dec 2009 14:12:40 +0000 admin http://splitchin.com/tech/?p=37 FlashのSWFファイルを<object>タグ, <embed>タグを使用せずに、
JSライブラリで、手軽にHTMLに埋込める、SWFObjectを使ってみました。

ダウンロード＆資料

サンプルページ

1. swfobject.jsを読み込む

<script type="text/javascript" src="swfobject.js"></script>

2. swfobject.jsを読み込む

<script type="text/javascript">
var flashvars = {
// ここに、swfに渡す引数
}
var params = {
wmode: "transparent"　//params指定
};
var attributes = {};
// swf(FLASH素材)ファイル名、
// 置き換えるオブジェクト名(swfを組み込むdivタグのid名)、
// 横の長さ、
// 縦の長さ,
swfobject.embedSWF("mp3moji.swf", "mp3moji", "180", "15", "9.0.0","", flashvars, params, attributes);
</script>

3. Flash組み込み部分　＆　Flash代替コンテンツ

<div id="mp3moji">
<!--  Flash代替コンテンツ -->
<a href="test.mp3">voice01</a>
<!-- / Flash代替コンテンツ -->
</div>
]]> http://splitchin.com/tech/2009/12/17/flash%e3%81%aehtml%e3%81%ae%e5%9f%8b%e8%be%bc%e3%81%bf%e3%80%82%e3%80%80swfobject-v2-0/feed/ 0