Google の仕様はこんなふうになっていて、たしかに Seesaa のコードを読んでみると『非同期』で Plusone ボタン用の javascript を読み込んでいるのですが、うちの Seesaa ブログではことごとく失敗しているようでした。 そこで、ヘッダー内に固定で Plusone ボタン用の javascript を記述すると、表示されるようになりました。
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'ja'}
</script>
うちだけなのかなぁ・・・
▼ 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 エミュレータ
アプリバーは、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
以下のページに、『インターネットでのお問い合わせ(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=01 と http://flets-w.com/inq/link_inq.php?sbt=to146001&acs=01 です。 普通にリンクにすれば開くものを、何故こんな事になってるんでしょう。
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 が同一のデータが一つのグループとしてまとめられます
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定＞ 詳細設定＞ ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。 Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。 また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。 ※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです 対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。※ エキスパートモードで表示しています アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
<% if:page_name eq 'archive' -%> アーカイブページでのみ表示される内容 <% /if %> <% if:page_name eq 'category' -%> カテゴリページでのみ表示される内容 <% /if %> <% if:page_name eq 'tag' -%> タグページでのみ表示される内容 <% /if %>この記述は、以下の場所で使用します
|
|
