あらびき林檎。 » JavaScript 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 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 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 ソースコードをWebで表示する SyntaxHighlighter http://splitchin.com/tech/2009/12/17/5/ http://splitchin.com/tech/2009/12/17/5/#comments Wed, 16 Dec 2009 15:01:06 +0000 arakkyee http://splitchin.com/tech/?p=5 プログラムのソースコード（HTML, JavaScript, PHP)など、
Webで表示するのは、エスケープ処理などあって、面倒でした。

よく、行番号と、カラー分けでコードを表示しているテック系の
サイトを見かけるので、ライブラリを探してみました。

コードをそのまま表示するためのライブラリ、「SyntaxHighlighter」.
このブログはWordPressベースなので、JSとWordPressプラグインと
２通りのやり方を試してみました。

方法 1.） JavaScript

方法 ２.）WordPress プラグイン

［code language=”"js"”］・・・［/code］のように書きます。（［　］は半角記号に）

<ul>
<li>test</li>
</ul>

対応言語

言語 エイリアス
C++ cpp, c, c++
C# C#, c-sharp, csharp
CSS css
Delphi delphi, pascal
Java java
Java Script js, jscript, javascript
PHP php
Python py, python
Ruby rb, ruby, rails, ror
Sql sql
VB vb, vb.net
XML/HTML xml, html, xhtml, xslt

]]> http://splitchin.com/tech/2009/12/17/5/feed/ 0