Home > Tags > JavaScript

JavaScript

Flashを1回クリックしないと操作できなくなる問題

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>

Comments: 0
Trackbacks: 0

Facebook Platform – HelloWorld!を試してみる。

2010-11-08 (月)
Facebook | HTML/CSS | JavaScrpit
Facebook | Facebook Developers | HTML | JavaScript

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を設定します。

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のコードをデバッグできるので便利です。

Comments: 0
Trackbacks: 0

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

2010-11-06 (土)
HTML/CSS | JavaScrpit | PhoneGap | iPhone
HTML5 | iPhone | JavaScript | PhoneGap | Webkit

■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