2014年07月03日


Facebox v1.3 の正しい設置方法と使用方法








▼ href の画像を表示します


▼ href に他の id を指定してその内容を表示します


▼ url で指定されたテキストの内容を HTML として表示します
(但し、クリックした後2秒後に閉じます)


▼ ajax で読み込んだ内容を表示します
ダウンロード

Facebox 1.3

自分のサイトにアップロード

1) facebox.js
2) facebox.css
3) closelabel.png
4) loading.gif

ファイルをアップロードできるブログであればブログでも可能です。

アップロードする前に、facebox.js 内の closelabel.png と loading.gif の URL を直接 http から記述しておけば、実行するページからプログラムで変更する必要がなくなります。

facebook.js の変更部分(URLを3つ)
  $.extend($.facebox, {
    settings: {
      opacity      : 0.2,
      overlay      : true,
      loadingImage : 'https://lightbox.sakura.ne.jp/demo/facebox13/loading.gif',
      closeImage   : 'https://lightbox.sakura.ne.jp/demo/facebox13/closelabel.png',
      imageTypes   : [ 'png', 'jpg', 'jpeg', 'gif' ],
      faceboxHtml  : '\
    <div id="facebox" style="display:none;"> \
      <div class="popup"> \
        <div class="content"> \
        </div> \
        <a href="#" class="close"><img src="https://lightbox.sakura.ne.jp/demo/facebox13/closelabel.png" title="close" class="close_image" /></a> \
      </div> \
    </div>'
    },
※ プログラムからは以下のようにして変更します
$.facebox.settings.closeImage = '/images/facebox/closelabel.png'
$.facebox.settings.loadingImage = '/images/facebox/loading.gif'

または、

jQuery(document).ready(function($) {
	$('a[rel*=facebox]').facebox({
		loadingImage : 'images/loading.gif',
		closeImage   : 'images/closelabel.png'
	})
})


j設置

jQuery が必要ですが、google がホスティングしているものを使います。

あるいは、jQuery をダウンロードして設置して下さい。

このサンプルでは、外部ファイルとして image_001.txt と、message_001.txt を使っています。その為、実行する URL と 同一ドメインである必要があります。( access-control-allow-origin:* を返す場合はどこからでも OK )

image_001.txt
message_001.txt

rel="文字列" で、文字列は自由に設定可能で、facebox の初期処理で指定します
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://lightbox.sakura.ne.jp/demo/facebox13/facebox.js"></script>
<link type="text/css" rel="stylesheet" href="https://lightbox.sakura.ne.jp/demo/facebox13/facebox.css">

<script	type="text/javascript">
// jQuery の画面準備完了時のイベント
$(function(){
	// rel 属性で対象を決定しています( ここでは、my_image が含まれるもの )
	$('a[rel*=my_image]').facebox()

	// イベント登録
	$(document).bind('beforeReveal.facebox', 
	function(){
		console.log("実行直前");
	});

});
</script>


<div>▼ href の画像を表示します</div>
<a href="http://lh6.ggpht.com/_IzfbcNjqGuE/S1jkKM952HI/AAAAAAAAAPU/CheJ6YkRGPM/s720/b15architecture_exteriors014.jpg" rel="my_image1"><img  src="http://lh6.ggpht.com/_IzfbcNjqGuE/S1jkKM952HI/AAAAAAAAAPU/CheJ6YkRGPM/s128/b15architecture_exteriors014.jpg" style='border-width:0px;'></a>


<br><br>

<div>▼ href に他の id を指定してその内容を表示します</div>
<a href="#my_div" rel="my_image2"><img src="http://lh3.ggpht.com/_IzfbcNjqGuE/S1j75KHGTZI/AAAAAAAAARg/l_d3g2d4fb0/s128/b17diederik015.jpg" style='border-width:0px;'></a>
<div id="my_div" style='display:none'><t5>divの中にタイトルと画像をセットして、display:none を指定しています</t5><img  src="http://lh3.ggpht.com/_IzfbcNjqGuE/S1j75KHGTZI/AAAAAAAAARg/l_d3g2d4fb0/s720/b17diederik015.jpg" style='border-width:1px;'></div>

<br><br>

<div>
▼ url で指定されたテキストの内容を HTML として表示します
<br>
(但し、クリックした後2秒後に閉じます)
</div>
<a href="https://lightbox.sakura.ne.jp/demo/facebox13/image_001.txt" rel="my_image3"><img src="http://lh3.ggpht.com/_IzfbcNjqGuE/S1js9TWpzrI/AAAAAAAAAP0/OG-rkSIkyIQ/s128/b7architecture_exteriors045.jpg" style='border-width:0px;' onclick='setTimeout(function(){$(document).trigger("close.facebox")},2000)'></a>

<br><br>

<div>▼ ajax で読み込んだ内容を表示します</div>
<input type="button" value="メッセージ" onclick="$.facebox({ ajax: 'https://lightbox.sakura.ne.jp/demo/facebox13/message_001.txt' })">

</body>
</html>
関連する記事

lightbox.js の正しい設置方法


posted by at 2014-07-03 02:33 | Comment(0) | 小ネタ | このブログの読者になる | 更新情報をチェックする

2013年11月01日


Google Chroem の自分用テーマを超簡単に作成する方法

環境準備

とにかく、元となるようなテーマをインストールします。( 後でいろいろ変更すれば良いです )

インストールされたテーマデータを複写

『C:\Users\ユーザ名\AppData\Local\Google\Chrome\User Data\Default\Extensions』

に移動して、タイムスタンプよりインストールされたばかりのフォルダに入ります。



必要なのは、images フォルダ全てと、manifest.json です。これらをどこか好きなフォルダにコピーします。

テーマ用背景画像を images フォルダにコピー

jpg でも png でもどちらでもかまいません。そのファイル名を manifest.json の中の theme_ntp_background の値として変更します。
      "images": {
         "theme_button_background": "images/theme_button_background.png",
         "theme_frame": "images/theme_frame.png",
         "theme_frame_inactive": "images/theme_frame_inactive.png",
         "theme_frame_incognito": "images/theme_frame_incognito.png",
         "theme_ntp_background": "images/UrbanFuture4_1.jpg",
         "theme_tab_background": "images/theme_tab_background.png",
         "theme_tab_background_incognito": "images/theme_tab_background_incognito.png",
         "theme_tab_background_v": "images/theme_tab_background_v.png",
         "theme_toolbar": "images/theme_toolbar.png",
         "theme_window_control_background": "images/theme_window_control_background.png"
      },

他はとりあえずそのままにしておいて、他のファイルは自分用のパッケージを作成してからゆっくり変更して下さい。

manifest.json の変更

インストール済みの manifest.json には必要無い部分が含まれているので、以下のようなエントリのみにします( manifest_version が無い場合は追加して下さい )
{
   "manifest_version": 2,
   "name": "DAZ3D / sworc",
   "theme": {
      "colors": {
         "bookmark_text": [ 232, 232, 232 ],
         "button_background": [ 255, 9, 9 ],
         "control_background": [ 70, 0, 0 ],
         "frame": [ 4, 4, 4 ],
         "frame_inactive": [ 4, 4, 4 ],
         "frame_incognito": [ 4, 4, 4 ],
         "frame_incognito_inactive": [ 0, 0, 0 ],
         "ntp_background": [ 0, 0, 0 ],
         "ntp_header": [ 70, 0, 0 ],
         "ntp_link": [ 255, 9, 9 ],
         "ntp_link_underline": [ 255, 9, 9 ],
         "ntp_section": [ 70, 0, 0 ],
         "ntp_section_link": [ 255, 9, 9 ],
         "ntp_section_link_underline": [ 255, 9, 9 ],
         "ntp_section_text": [ 186, 186, 186 ],
         "ntp_text": [ 186, 186, 186 ],
         "tab_background_text": [ 4, 4, 4 ],
         "tab_text": [ 232, 232, 232 ],
         "toolbar": [ 56, 56, 56 ]
      },
      "images": {
         "theme_button_background": "images/theme_button_background.png",
         "theme_frame": "images/theme_frame.png",
         "theme_frame_inactive": "images/theme_frame_inactive.png",
         "theme_frame_incognito": "images/theme_frame_incognito.png",
         "theme_ntp_background": "images/UrbanFuture4_1.jpg",
         "theme_tab_background": "images/theme_tab_background.png",
         "theme_tab_background_incognito": "images/theme_tab_background_incognito.png",
         "theme_tab_background_v": "images/theme_tab_background_v.png",
         "theme_toolbar": "images/theme_toolbar.png",
         "theme_window_control_background": "images/theme_window_control_background.png"
      },
      "properties": {
         "ntp_background_alignment": "center",
         "ntp_background_repeat": "no-repeat",
         "ntp_logo_alternate": 1
      },
      "tints": {
         "background_tab": [ -1.0, 0.5, 0.75 ],
         "buttons": [ 1.0, 0.0, 1.0 ],
         "frame": [ -1.0, -1.0, -1.0 ],
         "frame_inactive": [ -1.0, -1.0, 0.75 ],
         "frame_incognito": [ -1.0, 0.2, 0.35 ],
         "frame_incognito_inactive": [ -1.0, 0.3, 0.6 ]
      }
   },
   "version": "1.0"
}

パッケージ作成とインストール

Google Chrome の chrome://extensions/ を開いて、デベロッパーモードをチェックして、拡張機能のパッケージ化で、パッケージを作成します。出来上がったパッケージは、拡張子が crx になります。出来上がったら、Google Chrome にドラッグ & ドロップするとインストール完了です。

細かいチューニング方法

オプションの詳細(英文)で細かい設定をチェックして、現在インストール済みのオプションを変更して状況を確かめます。

変更するには、Google Chrome を終了させて『C:\Users\ユーザ名\AppData\Local\Google\Chrome\User Data\Default\Preferences』を開いて manifest.json の内容がコピーされた部分を変更します。インストール先の manifest.json は変更しても状態は変化しません。Preferences の内容を変更したら、インストール先の Cached Theme.pak を削除して Google Chrome を起動すると変更されているばすです。(Cached Theme.pak は、Google Chrome 起動毎に作成されるので、この処理を繰り返して完成させます)

全ての変更が終わったら、パッケージ用の manifest.json に内容をコピーして再度パッケージ化すれば、オリジナルのテーマパッケージが完成します。





posted by at 2013-11-01 01:05 | Comment(0) | Google | このブログの読者になる | 更新情報をチェックする

2013年07月11日


Twitter(API1.1) の投稿に関して、VS2010、VS2012、Android、VBScript、PHP の言語でサンプルを作成しました

posted by at 2013-07-11 21:22 | Comment(0) | HTTP | このブログの読者になる | 更新情報をチェックする

2013年04月01日


Google Chrome 拡張作成入門

最新の情報は以下のリンク先です

マウスカーソル下の画像表示用 HTML コードをクリップボードにコピーする Google Chrome 拡張

▼ 以下はバージョンアップ(仕様変更)の為、動作しません
---------------------------------------------------------

以下のコードは最も簡単でかつ利用価値の高いものです。必要なファイルは、拡張アプリケーションの基本定義である『background.html』と、全体の仕様を定義する『manifest.json』と、アイコンファイルが3つです( アイコンは必ずしも必要ではありません )

以上の5つファイルを任意のディレクトリ内に配置して、Google Chrome から読み込むだけで、拡張機能として実装されて、デバッグも可能になります。もし、世の中に配布したいのであれば、そこからパッケージを作成する事も可能です
background.html(UTF-8N)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

// *************************************************
// クリップボードへコピー
// *************************************************
function clip_Copy(str) {
	document.getElementById('text').value = str;
	document.getElementById('text').select();
	document.getElementById('text').focus();
	document.execCommand("Copy");
}

// *********************************************************
// 右クリックメニューの処理
// *********************************************************
function active_Action(info, tab) {

	var str = "";

	if ( info.mediaType == 'image' && typeof( info.srcUrl ) !== 'undefined' ) {
		str = '<img src="' + info.srcUrl + '"';
		str += ' style="border: solid 0px #000000" />';
		clip_Copy( str );
		chrome.tabs.executeScript(
			null,
			{ code: "alert('"+str+"');" },
			function() {
			}
		);
	}

}

// *********************************************************
// 初期処理
// *********************************************************
try {
	chrome.contextMenus.removeAll();
}catch(e) {}

// 右クリックメニューを作成
chrome.contextMenus.create(
	{
		"title": "画像HTML取得",
		"contexts":["image"],
		"onclick": active_Action
	}
);
</script>
</head>
<body>
<textarea name="text" id="text"></textarea> 
</body>
</html>

manifest.json
{
   "background_page": "background.html",
   "description": "\u53F3\u30AF\u30EA\u30C3\u30AF\u3088\u308A\u6A19\u6E96\u7684\u306A \u753B\u50CF\u7528HTML \u3092\u53D6\u5F97\u3057\u307E\u3059",
   "icons": {
      "128": "icon128.png",
      "16": "icon16.png",
      "48": "icon48.png"
   },
   "name": "\u753B\u50CFHTML\u53D6\u5F97",
   "permissions": [ "contextMenus", "tabs", "http://*/*", "https://*/*" ],
   "version": "1.0"
}

まず最初にデベロッパーモードのチェックボックスをオンにします。そうすると、読み込み用のボタンが現れるので5つのファイルを配置したフォルダを選択します






ファイルを読み込んだ状態



詳細を表示した状態



background.html のリンクをクリックすると、非表示である background.html 用のデベロッパーツールが開きます( 通常は F12 でひらくもの )

id は、仮の id で、正式に登録されるとGoogle Chrome の環境フォルダ でダウンロードしたスクリプトを実行して、さらに extentions フォルダに入るとその中にあるはずです。

この拡張機能の要点

画像を右クリックすると、コンテキストメニューに登録した機能が表示されて、選択するとその画像を使用した HTML 記述がクリップボードにコピーされます。





クリップボードへのコピー

background.html はもともと非表示なので、コピーするために必要な入力エリアを作成しておいて、データをセットして選択して document.execCommand("Copy"); でコピーします

コンテキストメニューの追加

これは、API の処理なので、まず manifest.json で利用する API を宣言する必要があります。その上で、chrome.contextMenus.removeAll(); で既存のメニューを削除しておいて、chrome.contextMenus.create で作成します。

"contexts":["image"] の記述が、対象が画像のみであることを示しています。他には、 "page", "frame", "selection", "link", "editable", "video", "audio" というようなコンテンツを複数配列で指定する仕様になっています。

実際の処理

クリックすると、定義した function が呼び出されますが、その際に API から引数が渡されて、ある程度の情報をその場で利用する事ができます。この場合は、画像の URL を使って、IMG 要素を完成させています。

1) OnClickData
2) Tab

表示されているページへの通信

セキュリティ上の理由だと思われますが、直接表示しているページへのアクセスは禁じられており、メッセージを送る事によって互いに通信するような仕様になっているようです。

その中で簡単に background から呼び出せる方法がこの、chrome.tabs.executeScript を使った実行です。

この処理はメニューとは別の API 分類になるので、manifest.json で宣言しておく必要があります。

関連する記事

Twitter用埋め込みコードを取得する Google Chrome 拡張


posted by at 2013-04-01 02:24 | Comment(0) | ツール | このブログの読者になる | 更新情報をチェックする

2013年02月07日


Google News Search API の NewsShow でニュースコンテンツを利用する

Code Playground

慣れている場合は、Code Playground( サンプルコードと実演 ) でチェックして動作を確認します( IE では動かないので注意して下さい )

※ Code Playground は使い方が解りにくいので、以下に抜粋サンプルを作成しています

その他のサンプルコードと実装

Google NewsShow ( queryList ) - SOURCE
Google NewsShow( IFRAME ) - SOURCE
( IFRAME のほうが簡単で CSS の影響が出ません )

実装について

ドキュメント : NewsShow Documentation - Google News Search API - Google Code

Google のサンプルはページの onload で実装されているので、単独ページなら良いですが、部品としてコンテンツとして埋め込みたい場合はなかなか面倒ですですが、本来 onload で実装する必要は全く無いので以下のように書きます。
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
▲はヘッダ部分に記述します
( 必ずしもヘッダ部分で描く必要は無く、実装したい DIV の直前でもかまいません )

ここをクリックすると、以下と同等のコードを編集しながらテストできます
( onload での実装 )
<div style='position:absolute;left:951px;top:0px;height:250px;'>
<div id="ggnews"></div>
</div>
<script type="text/javascript">
google.load("elements", "1", {packages : ["newsshow"]});
</script>
<script type="text/javascript">
(function () {
	var options = {
		"format" : "300x250",
		"linkTarget" : "_blank",
		"displayTime" : 30000
	}
	var content = document.getElementById('ggnews');
	var newsShow = new google.elements.NewsShow(content, options);
})();
</script>

displayTime は表示が切り替わる間隔で、ここでは 30 秒にしています

フォーマットは以下の二通りが有効です
■ "728x90"
■ "300x250"



posted by at 2013-02-07 08:24 | Comment(0) | Google | このブログの読者になる | 更新情報をチェックする