SQLの窓

2012年07月28日


Seesaa のブログで何故か Google の Plusone ボタンが表示されなかった原因

Google の仕様はこんなふうになっていて、たしかに Seesaa のコードを読んでみると『非同期』で Plusone ボタン用の javascript を読み込んでいるのですが、うちの Seesaa ブログではことごとく失敗しているようでした。

そこで、ヘッダー内に固定で Plusone ボタン用の javascript を記述すると、表示されるようになりました。
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'ja'}
</script>

うちだけなのかなぁ・・・


タグ:トラブル
posted by lightbox at 2012-07-28 02:01 | Google | このブログの読者になる | 更新情報をチェックする

2012年07月18日


Google プレゼンテーションが結構ふつうに使えるという事の確認

▼ NAVER で簡単な操作手順を作成しました


▲ は埋め込みですが、こちらは、ページ全体です
Microsoft の Office 製品の中でも一番簡単な『おもちゃ感』のある PowerPoint をそのまま持って来たようなツールですが、そもそも Excel や Word の酷似ツールも存在しています。

さすがに Excel や Word は機能的に及ぶはずもありませんが(それなりに有能です)、PowerPoint に至っては、もともと要求する機能が細やかなものでは無く、『画像』的な HTML 部分と大差ないので、こちらを代替えにして使っても十分な出来です。

おまけにこちらは(Google プレゼンテーション)は、必要なプレゼン資料を WEB上に置いておいて、スマホやパッドでもブレゼン出来てしまうところが有能です。



使えるのは、PC最新ブラウザ(Google Chrome、Firefox、IE9、Opera、Safari)と、iPhone4S(しか検証できていません)と、Android 4.0.3(エミュレータ)でした。(Androidは、2.2.2 で実機チェックしてダメだったので、エミュレータの 2.3.3 を試すと全く同じでした)

とにかく操作方法はスライドを追加してテキスト・画像・ワードアート等を挿入してアニメーション効果を付けるだけです。PowerPoint のような細やかさはありませんが、プレゼンの目的は PowerPoint の持つ機能では無いので Google プレゼンテーションで問題無いと考えます




▼ iPhone4S

▼ PC 全画面表示

▼ Android 4.0.3 エミュレータ



posted by lightbox at 2012-07-18 23:32 | Google | このブログの読者になる | 更新情報をチェックする

2012年07月15日


Android Flex : FLARToolkit を Flex4(AIR) を使って Android にのっけてみました。





動くとは思っていましたが、実機がテスト専用に買った RStream A1 なのでかなりレスポンスが悪かったです。最初、PC の同じ大きさ(320x240)で処理して見事に固まってしまいましたが、半分のサイズにする事でなんとか(コマ送り状態ですが)動作確認できました(Android は 2.2.2 です)

バッケージの中にあるデータは sdcard にコピーして使用します。dae のデータはインターネット経由でも動く事は解っているのですが、なにせ遅い(トラブルは避けたい)のでローカルで読み込んでいます。



本当は、実機側でシャッター押して画像化(あるいは動画化)したいところですが、それはまた個別にやらないと整理が付かないのです。









Flex4 でやる事のメリットは、3D に限らず大きいと思います。Java だけでやろうとするとやたらと面倒な事が、Flex4 ではいとも簡単にできます。反面、Native でないとできない事も多いので、その解決方法もいろいろ補充しましたので近いうちにまとめる予定です。

★ 以下はその基本部分のまとめです。

AIR Native Extentions for Android のフルコマンドラインビルド


関連する記事

7,980円の Rstream A1 をソフマップで買っちゃいました
Adobe AIR 3 が動く Android が 2.2 以降なので、動作確認用に買った Rstream A1 をバージョンアップしないといけない

Android の為の AIR Flex 基本 List で Web からデータ取得



posted by lightbox at 2012-07-15 01:00 | Flex | このブログの読者になる | 更新情報をチェックする

2012年07月11日


Win8(JS Metro)の『分割・・・』テンプレートにアプリバーを追加して、新しいページを定義する



アプリバーは、Metro スタイル アプリのナビゲーション デザイン で説明されていますが、上の画像の画面下部にある細い帯のような部分の事で、画面上をマウスで右クリックするか、画面の下端をスワイプする事によって表示されます。

ここには、現在のビューに対して作用するコマンドを置く事がガイドラインとして書かれていますが、Microsoft のサンプルであるこの図のようなサンプルもあります( メニューとしても使われています ) 



新しいページの追加



新しいページの追加は、HTML で画面を作成し、その HTML 用の JavaScript のコードで、WinJS.UI.Pages.define を使ってページの定義を行う事によって準備できます。

ここでは、その呼び出しに『アプリバー』を使う為に、そのイベントを data.js で定義しています。

参考 : Win8(JS Metro)の『分割・・・』テンプレートを使って RSS を収集するサンプル

data.js では、本来リストビュー用のデータの処理を行っていますが、二つのビューから利用されるので定義場所として良い場所となります。また、元々複数のコード間で名前を参照できるように、名前空間の定義もあるのでイベントの実体をここで定義します。

但し、イベントの登録は各ページ定義の ready イベント で行います。

default.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <title>GetXmlList</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>

    <!-- GetXmlList references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/data.js"></script>
    <script src="/js/default.js"></script>
    <script src="/js/navigator.js"></script>
</head>
<body>
    <div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/items/items.html'}"></div>
    <div id="appbar" data-win-control="WinJS.UI.AppBar">
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd', label:'Command', icon:'placeholder' }"></button>
    </div>
</body>
</html>

アプリバーの定義は、Metro JS のひな型のエントリポイント的位置付けの default.html で行われます。意味合い的には、アプリバーはコントロール用オブジェクト(data-win-control属性を持つ)であって、他の一般的な HTML とは識別され、実装は default.js で実行される『WinJS.UI.processAll()』で行われるようです。( ビューの書き換え/Navigate はその上にある DIV 内で行われます )


split.html
data.js

アプリバーとは関係無いですが、動的な HTML 処理サンプルとしてリンクと IFRAME を実装しています。リンクは直接 HTML を書き込む方法と、A要素にデータをバインドする方法の二つを実装しています




data.js 内の呼び出し部分
    function newPage() {
        Debug.writeln("newPage:" + WinJS.Navigation.location);
        if (WinJS.Navigation.location != "/pages/hello/hello.html") {
            WinJS.Navigation.navigate(
                '/pages/hello/hello.html',
                {
                    param1: '自動的に',
                    param2: 'ページのオプションとして ready イベントへ'
                }
            );
        }
        document.getElementById("appbar").winControl.hide();

    }

    WinJS.Namespace.define("Data", {
        items: groupedItems,
        newPage: newPage,
        groups: groupedItems.groups,
        getItemsFromGroup: getItemsFromGroup,
        getItemReference: getItemReference,
        resolveGroupReference: resolveGroupReference,
        resolveItemReference: resolveItemReference
    });

新しいページ

アプリバーは、▼この新しいページでも処理される為、自身である場合はなにもしないようにしています。また、戻るボタンはHTML側の定義で完結しています

hello.html
hello.js




posted by lightbox at 2012-07-11 12:08 | Windows8 Metro(JS/C#) | このブログの読者になる | 更新情報をチェックする

2012年07月05日


NTT 西日本の『問い合わせ』ページで、Google Chrome だけフォームが開かないのは、NTT のバグです。

以下のページに、『インターネットでのお問い合わせ(0120-116116 と 116)』として、window.open を使っているのですが、A 要素の href="javascript:" で呼び出しています。それは問題無いのですが、onclick="return (VL_FileDL(this))" という良く解らないものが付加されているので、これが原因で Google Chrome でウインドウが開きません。

http://www.ntt-west.co.jp/share/inquire.html

開発者ツールで、その部分を削除したら開きました。

それぞれ、URL は、http://flets-w.com/inq/link_inq.php?sbt=to148001&acs=01http://flets-w.com/inq/link_inq.php?sbt=to146001&acs=01 です。

普通にリンクにすれば開くものを、何故こんな事になってるんでしょう。


タグ:トラブル
posted by lightbox at 2012-07-05 22:57 | 記録 | このブログの読者になる | 更新情報をチェックする

2012年07月04日


Android Flex : AIR Native Extentions for Android のフルコマンドラインビルド



Toast の表示と、ブラウザを開く処理とバージョン文字列の取得



※ 一括バッチを追加しました
cd java
call build
if ERRORLEVEL 1 goto proc_exit1
cd ..

cd ane
call build
if ERRORLEVEL 1 goto proc_exit2
cd ..

call setlib
echo library.swf を配置しました

call build_ane

call build
if ERRORLEVEL 1 goto proc_exit3

call inst

goto proc_normal

:proc_exit1
cd ..
echo java のビルドで失敗しました
goto proc_normal

:proc_exit2
cd ..
echo ane のビルドで失敗しました
goto proc_normal

:proc_exit3
echo 本体 のビルドで失敗しました
goto proc_normal


:proc_normal


Eclipse は必要ありません。Java の SDK と、Flex の SDK (と、最新が必要なら AIR の SDK ) と、Android の SDK があればいいです。( ここでは厳密には、エミュレータのデバックとして処理してます。が、実機でもそのまま動くはずです )

とにかく、一度解ってしまえばコマンドラインでビルドしたほうが小回りが利きます。一連の流れがはっきりすると、swf の作成は -library-path+=lightboxANE.ane でいい事が解るし、つまり、ane ファイルがあって、使い方さえ解れば自由に使える事が解ります( ID は 解凍すれば extension.xml に書かれてますし )

※ とは言うものの、ane のダウンロードって殆ど見かけませんでした( 見つけたものは動作確認しました )

java のコード

これは、http://www.adobe.com/devnet/air/native-extensions-for-air.html にたくさんサンプルがあったのですが、一番簡単だと思われる 『Sharing/SMS/Toast』 を使いました( URL を開くのは少し変更 )

■ Java のソースコード

java フォルダに入って、jc.bat でコマンドラインを開いて、build.bat で jar を作成します
javac -cp C:\android\android-sdk-windows\platforms\android-10\android.jar;C:\AdobeAIRSDK\lib\android\FlashRuntimeExtensions.jar lightbox\ToastFunction.java lightbox\OpenURLFunction.java lightbox\AndroidExtensions.java
del ..\jar\ANElib.jar
jar cvf ..\jar\ANElib.jar lightbox\*.class 


ActionScript のコード

これも、『Sharing/SMS/Toast』のものです。ane フォルダに入って、android.bat でコマンドプロンプトを開いて build.bat を実行します。

■ ActionScript のソースコード

※ 注意するのは、java も ActionScript も同じパッケージ名にする事です
compc +configname=airmobile -source-path . -output ..\lightboxANE.swc -include-classes lightbox.AndroidExtensions lightbox.AndroidExtensionsEvent -swf-version 14
swc を解凍して jar\library.swf として配置

これは、仕様らしいのですが、自動的にやってくれないので自分でします。メインの android.bat を実行してコマンドプロンプトを開いて setlib.bat を実行します。

del jar\library.swf
jar xf lightboxANE.swc library.swf
move library.swf jar

lightboxANE.ane を作成

拡張用のライブラリですが、Flex側のコードをビルドする為のコードも格納されるので、本体のビルドもこのライブラリを使用します。

以下は、見やすくする為に改行を入れています
adt
 -package
 -storetype pkcs12
 -keystore lightbox.p12
 -storepass password
 -target ane lightboxANE.ane extension.xml
 -swc lightboxANE.swc
 -platform Android-ARM -C jar .


本体 Mainw.swf 作成

build.bat で swf が作成されます。この後は、Android 用のパッケージを作成してエミュレータに転送するのですが、それらの処理は inst.bat で行っています。ですから、inst.bat を実行する前に、エミュレータ起動 して、tools\ddms.bat 実行しておきます。

■ Android アプリ用の XML と、拡張用の XML

inst.bat の実行
call adt -package -target apk-debug -storetype pkcs12 -keystore lightbox.p12 -storepass password lightbox_1.apk Mainw.xml Mainw.swf winofsql.png -extdir .
call adt -uninstallApp -platform android -appid lightbox.androidtest
call adt -installApp -platform android -package lightbox_1.apk

SDK 類のパスはそれぞれの PC の環境によって変わりますが、基本 C ドライブのルートに展開しておけば、そのまま使えると思います。

関連する記事

コマンドラインで簡単に AIR アプリを Android エミュレータにインストールして実行
コマンドラインで、Android エミュレータで、dae の 3Dモデルを表示するパッケージ
Android の為の AIR Flex 基本 List で Web からデータ取得
AIR Native Extentions for Android なコマンドライン一覧


参考

ns.adobe.com/air/extension/2.5 > AIR 3+ > -swf-version 13
ns.adobe.com/air/extension/3.1 > AIR 3.1+ > -swf-version 14

らしいです。
( default は必要無いです。入れると余計面倒な仕様になってます )


posted by lightbox at 2012-07-04 01:56 | Flex | このブログの読者になる | 更新情報をチェックする

2012年07月03日


Win8(JS Metro)の『分割・・・』テンプレートを使って RSS を収集するサンプル

NAVER と Yahoo! の 天気を取り出してリストページを作成しています。変更したのは data.js で、もともとあった固定のデータは削除して、その枠組みをそのまま利用しています






(function () {
    "use strict";

    function getItemReference(item) {
        return [item.group.key, item.title];
    }

    function resolveGroupReference(key) {
        for (var i = 0; i < groupedItems.groups.length; i++) {
            if (groupedItems.groups.getAt(i).key === key) {
                return groupedItems.groups.getAt(i);
            }
        }
    }

    function resolveItemReference(reference) {
        for (var i = 0; i < groupedItems.length; i++) {
            var item = groupedItems.getAt(i);
            if (item.group.key === reference[0] && item.title === reference[1]) {
                return item;
            }
        }
    }

    function getItemsFromGroup(group) {
        return list.createFiltered(function (item) { return item.group.key === group.key; });
    }

    var backImage1 = "https://lh4.googleusercontent.com/-hHZ3UeOrQGQ/T_J4kLkBN2I/AAAAAAAAHB0/D-MsMRu7j0g/s205/_naver.png";
    var backImage2 = "https://lh5.googleusercontent.com/-F7zC9HwtSTw/T_J4kIny9XI/AAAAAAAAHBw/AesYu2jQHbI/s224/_yahoo.png";

    var sampleGroups = null;
    var sampleItems = null;

    var list = new WinJS.Binding.List();
    var groupedItems = list.createGrouped(
        function groupKeySelector(item) { return item.group.key; },
        function groupDataSelector(item) { return item.group; }
    );

    var serverUrl = "http://matome.naver.jp/feed/hot";
    var xhr = new WinJS.xhr({
        type: "GET",
        url: serverUrl
    }).then(function (req) {

        Debug.writeln(req.responseXML);
        var root = req.responseXML;
        var items = root.getElementsByTagName("item");
        var thumbnail_img = null;

        for( var i = 0; i < items.length; i++ ) {

            var item = {};
            item.group = {};
            item.group.key = "naver"
            item.group.title = "NAVER"
            item.group.subtitle = "Windows8 ひな形拡張";
            item.group.backgroundImage = backImage1;
            item.group.description = "グループの説明";

            item.title = items[i].getElementsByTagName("title")[0].firstChild.nodeValue;
            item.subtitle = "作者 : " + items[i].getElementsByTagName("dc:creator")[0].firstChild.nodeValue;
            item.description = "";

            try {
                item.content = items[i].getElementsByTagName("description")[0].firstChild.nodeValue;
            }
            catch (e) {
                item.content = "";
            }

            thumbnail_img = items[i].getElementsByTagName("media:thumbnail")[0].getAttribute("url");
            item.backgroundImage = thumbnail_img;

            list.push(item);
           
        }


    }, function (req) {
        Debug.writeln("正しく取得できませんでした");
    });


    var serverUrl = "http://rss.weather.yahoo.co.jp/rss/days/6200.xml";
    var xhr = new WinJS.xhr({
        type: "GET",
        url: serverUrl
    }).then(function (req) {

        Debug.writeln(req.responseXML);
        var root = req.responseXML;
        var items = root.getElementsByTagName("item");
        var thumbnail_img = null;

        for (var i = 0; i < items.length; i++) {

            var item = {};
            item.group = {};
            item.group.key = "yahoo"
            item.group.title = "Yahoo! 天気"
            item.group.subtitle = "Windows8 ひな形拡張";
            item.group.backgroundImage = backImage2;
            item.group.description = "グループの説明";

            item.title = items[i].getElementsByTagName("title")[0].firstChild.nodeValue;
            item.subtitle = "";
            item.description = "";

            try {
                item.content = items[i].getElementsByTagName("description")[0].firstChild.nodeValue;
            }
            catch (e) {
                item.content = "";
            }

            thumbnail_img = "https://lh3.googleusercontent.com/-byjvNpDs538/TwbSVn_202I/AAAAAAAAE2g/gbeMVoj4SPU/s200/b17nauke014.jpg";
            item.backgroundImage = thumbnail_img;

            list.push(item);

        }


    }, function (req) {
        Debug.writeln("正しく取得できませんでした");
    });


    WinJS.Namespace.define("Data", {
        items: groupedItems,
        groups: groupedItems.groups,
        getItemsFromGroup: getItemsFromGroup,
        getItemReference: getItemReference,
        resolveGroupReference: resolveGroupReference,
        resolveItemReference: resolveItemReference
    });
})();

※ item.group.key が同一のデータが一つのグループとしてまとめられます


posted by lightbox at 2012-07-03 14:00 | Windows8 Metro(JS/C#) | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します


Windows
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり