月: 2011年5月

Google Chromeの拡張機能を作ってみる!

投稿者:isc_blog

Google Chrome アドオン 作成 日記

※参考資料
Google Chrome Hello worldの作り方 アドオン機能を開発者向けに解禁

ここ↓閲覧しながら進めることにします。
http://code.google.com/chrome/extensions/index.html

開いたら・・・
引用 ——————-
How do I start?
1.Follow the Getting Started tutorial
2.Read the Overview
3.Keep up-to-date by reading the Chromium blog
4.Subscribe to the chromium-extensions group
————————
とあるので

まずは Getting Started tutorial
http://code.google.com/chrome/extensions/getstarted.html

「Create and load an extension」の章を見てやってみる(全編英語なのが辛いけどがむばる)
1.Create a folder somewhere on your computer to contain your extension’s code.
要するにどこでもいいからフォルダ作れってことね。
はい作成。

「GoogleExtension」フォルダをc:\に作りました。

2.Inside your extension’s folder, create a text file called manifest.json, and put this in it:


{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"http://api.flickr.com/"
]
}


作ったフォルダに「manifest.json」って名前で上記のコード記述しろって言ってるよね。

はい、完了!

3.Copy this icon to the same folder:
Download icon.png
同じフォルダにicon.pngをダウンロードしろって言ってるのでダウンロードします。

4.Load the extension.

a.Bring up the extensions management page by clicking the wrench icon and choosing Tools > Extensions.
b.If Developer mode has a + by it, click the + to add developer information to the page. The + changes to a -, and more buttons and information appear.
c.Click the Load unpacked extension button. A file dialog appears.
d.In the file dialog, navigate to your extension’s folder and click OK.

a.レンチのアイコンをクリックして Tools → Extensions 開く(日本語だとツール→拡張機能)
b.デベロッパーモードが「+」だったらクリックして・・・
c.「パッケージ化されていない拡張機能を読み込みます…」ボタンをクリック。
d.ファイル選択ダイアログでさっき作ったフォルダを指定して「OK」ボタンをクリックする。


If your extension is valid, its icon appears next to the address bar, and information about the extension appears in the extensions page, as the following screenshot shows.

まぁ、問題なかったらアイコンがアドレスバーの横に表示されて、拡張機能の情報が拡張機能のページに表示されます。次のスクリーンショットのように。
(結構直訳すみません。)

これは問題なかったんだろう・・・

それで次が本題だろう・・・
「Add code to the extension」に入ります。

In this step, you’ll make your extension do something besides just look good.
1.Edit manifest.json to add the following line:



"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
},


「manifest.json」にこの行を追加する・・・
※現在「manifest.json」はこんなソース


{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"http://api.flickr.com/"
],
"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
}
}


2.Inside your extension’s folder, create a text file called popup.html, and add the following code to it:

同じフォルダに「popup.html」っていう名前のファイルを作って
「CSS and JavaScript code for hello_world」をクリックして得たコードをコピペ

2.Return to the extensions management page, and click the Reload button to load the new version of the extension.
拡張機能のページに戻って、リロードボタンを押し機能拡張の「再読込する」ボタンを押す。

3.Click the extension’s icon. A popup should appear that displays the contents of popup.html.
その後、アドレスバー横の機能拡張アイコンを押すと「popup.html」のコンテンツが表示される・・・

It should look something like this:

If you don’t see the popup, try the instructions again, following them exactly. Don’t try loading an HTML file that isn’t in the extension’s folder – it won’t work!
Google翻訳で翻訳:あなたはポップアップを表示されない場合は、正確にそれらに続いて、作業手順をもう一度試してください。それは動作しません-拡張機能のフォルダにないHTMLファイルをロードしないでください!

・・・というわけで「Now What?」は現在どうですか?的な感じなので省略します。
「The hosting page, which tells you about options for distributing your extension」
という項目の「hosting」のリンク先に配布方法らしきものが・・・
これは後日・・・

2011年5月18日

KDDIが2011年6月末以降にスマートフォン向け公衆無線LANサービス提供開始するらしい!

投稿者:isc_blog

KDDIでは2011年6月以降に公衆無線LANサービス「au Wi-Fi SPOT」の提供を開始するらしいです。

KDDIのサイトより 「公衆無線LANサービス「au Wi-Fi SPOT」の提供開始について」
以下、引用


KDDIは、2011年6月末以降、外出先などでもauスマートフォンで快適なインターネット通信を楽しめる公衆無線LANサービス「au Wi-Fi SPOT」の提供を開始します。
「au Wi-Fi SPOT」は、パケット通信料定額サービス「ISフラット」もしくは「プランF (IS) シンプル/プランF (IS)」にご契約されているお客さまであれば、auスマートフォンから無料でご利用いただけます。
当初、全国約1万スポット (注) で利用でき、2012年3月末には国内最大級の約10万スポット (注) でご利用いただける予定です。


特別な契約がなく利用出来るというのは「IS04」ユーザーの私にとって朗報です!
ただ、「IS04」のANDROID2.2アップデートがまだ・・・というのがいただけない・・・

参考記事
ケータイwatch:KDDI、スマートフォン向けに無料の公衆無線LAN「au Wi-Fi SPOT」

2011年5月17日

(戦利品?)クラウド コンピューティングEXPO2010【春】

投稿者:isc_blog

・Intel ミラー付き鞄掛け

・Yahoo 小さな置時計

・NEC バザールでござーるエコバッグ

・Nifty でかいエコバッグ

・Symantec あひるの癒しグッズ

・macnica networks ラバーコインケース

・VMware ボールペンとでかい紙袋

・Fujitsu 特製紙袋

・大成建設 太陽充電式LEDライト

・NTTファシリティーズ 携帯クリーナー

こんなところでした。

(真面目に名刺交換された方、こんなネタですみません。でも実用的な物をもらえるとちょっと嬉しいですよね。)

自分は主にクラウドと情報セキュリティエリアをうろつきました。

クラウドのエリアの展示内容は、どこも聞いたような内容が多かったですかね。。。

情報セキュリティのエリアで、Intelのブースで聞いたノートパソコンの盗難防止・追跡技術の進歩が1つ記憶に残りました。

HDDを暗号化すれば、HDDを抜き取っても使えない、ネットに繋がれば位置を通報するというのはこれまでもあったと思いますが、ここで聞いたのはHDDをフォーマットしてもそのPCがネットに繋がると、監視ソフトウェアを自動でインストールし監視を続けるそうです。マザーボードが交換されても監視を続けるとのことで、それが第2世代Intel vProの機能の1つのようです。

別のブースでは、長期間ネットに繋がないとロックをかけるような機能もあると聞きました。

うーむ、CPUにそんな機能を埋め込んでるとは・・・

普通の泥棒相手なら十分対策できそうですね。

社員に本格的にノートPCを貸与する時期が来たら、必要なサービスだと感じました。

ということで、久しぶりのお祭り楽しかったです。でわわ

2011年5月17日

jQueryでlightboxみたいな「prettyPhoto」を使ってみる

投稿者:isc_blog

前にお客様サイト上に「お問い合わせフォーム」を掲載する際に
prototype.js で 「lightbox」を使ってビューっとウィンドウ出したことがあったなぁと思い今回「jQuery」で実装しなければならなかったため調べたところ
「prettyPhoto」というものがありました。

本家サイトをいろいろ見れば使い方がわかるんですが(なんだかすごいです。)
今回、「お問い合わせフォーム」として使用するため、下記のような規制がありました。
・下部に表示される「twitter」をはじめとするボタンが不要
・リンクではなくボタンで起動する

で、こんな感じで出来ました!
下記を「test.html」としました。
[html]
<!DOCTYPE html>
<html>
<head>
<title>jQuery lightbox clone – prettyPhoto – by Stephane Caron</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.6");
</script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javaScript">
function openInquiry() {
$.prettyPhoto.open(‘inquiry.html?iframe=true&amp;width=500&amp;height=500′,’お問い合わせフォーム’,’内容を入力してください。’);

}
</script>
</head>
<body>
<div id="main">
<h2>Iframe JavaScriptから起動</h2>
<input type="button" value="click" onclick="openInquiry();" />

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("area[rel^=’prettyPhoto’]").prettyPhoto();
});
</script>
</div>
</body>
</html>
[/html]
で、中に表示されるhtml (その1:inquiry.html)
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD html 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE>お問い合わせ</TITLE>
</head>
<body>
<form name="form" action="result.html" method="get">
<dt>お名前(※)</dt>
<dd><input name="お名前" size="50" maxlength="255" value="" type="text"></dd>
<dt>メールアドレス(※)</dt>
<dd><input name="メールアドレス" size="50" maxlength="255" value="" type="text"></dd>
<dt>サイトアドレス<br>ホームページアドレス<br>(存在する場合のみ)</dt>
<dd><input name="ホームページアドレス" size="50" maxlength="255" value="" type="text"></dd>
<dt>タイトル</dt>
<dd><input name="タイトル" size="50" maxlength="255" value="" type="text"></dd>
<dt>内容</dt>
<dd><textarea name="内容" rows="10" cols="30"></textarea></dd>
<dt>&amp;nbsp;</dt>
<dd><input value="送信" type="submit"></dd>
</form>
</body>
</html>
<hr />
続いて、結果ページ result.html
<hr />
<!DOCTYPE html PUBLIC "-//W3C//DTD html 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE>お問い合わせ</TITLE>
</head>
<body>
<form name="form" action="result.html" method="get">
<dt>お名前(※)</dt>
<dd>○○○○</dd>
<dt>メールアドレス(※)</dt>
<dd>abcd@efgh.ij</dd>
<dt>サイトアドレス<br>ホームページアドレス<br>(存在する場合のみ)</dt>
<dd>http://www.wwww.com/</dd>
<dt>タイトル</dt>
<dd>マイホームページ</dd>
<dt>内容</dt>
<dd>お花屋さんのサイト</dd>
</form>
</body>
</html>
[/html]
※本来はPHPとかでやるはずです。

構成は下記の通り
[html]
prettyPhoto
│ inquiry.html
│ result.html
│ test.html

├─css
│ prettyPhoto.css

├─images
│ │
│ ├─fullscreen
│ │ 1.jpg
│ │ 2.jpg
│ │ 3.jpg
│ │ 4.jpg
│ │ 5.jpg
│ │ 6.jpg
│ │ high.gif
│ │ huge.gif
│ │ wide.gif
│ │
│ ├─prettyPhoto
│ │ ├─dark_rounded
│ │ │ btnNext.png
│ │ │ btnPrevious.png
│ │ │ contentPattern.png
│ │ │ default_thumbnail.gif
│ │ │ loader.gif
│ │ │ sprite.png
│ │ │
│ │ ├─dark_square
│ │ │ btnNext.png
│ │ │ btnPrevious.png
│ │ │ contentPattern.png
│ │ │ default_thumbnail.gif
│ │ │ loader.gif
│ │ │ sprite.png
│ │ │
│ │ ├─default
│ │ │ default_thumb.png
│ │ │ loader.gif
│ │ │ sprite.png
│ │ │ sprite_next.png
│ │ │ sprite_prev.png
│ │ │ sprite_x.png
│ │ │ sprite_y.png
│ │ │
│ │ ├─facebook
│ │ │ btnNext.png
│ │ │ btnPrevious.png
│ │ │ contentPatternBottom.png
│ │ │ contentPatternLeft.png
│ │ │ contentPatternRight.png
│ │ │ contentPatternTop.png
│ │ │ default_thumbnail.gif
│ │ │ loader.gif
│ │ │ sprite.png
│ │ │
│ │ ├─light_rounded
│ │ │ btnNext.png
│ │ │ btnPrevious.png
│ │ │ default_thumbnail.gif
│ │ │ loader.gif
│ │ │ sprite.png
│ │ │
│ │ └─light_square
│ │ btnNext.png
│ │ btnPrevious.png
│ │ default_thumbnail.gif
│ │ loader.gif
│ │ sprite.png
│ │
│ └─thumbnails
│ flash-logo.png
│ quicktime-logo.gif
│ t_1.jpg
│ t_2.jpg
│ t_3.jpg
│ t_4.jpg
│ t_5.jpg

└─js
jquery-1.3.2.min.js
jquery-1.4.4.min.js
jquery.prettyPhoto.js
[/html]
サンプルはこちらに置きました↓
http://ivankov.iscw.jp/prettyPhoto/test.html


↓↓↓


↓↓↓



アーカイブダウンロードはこちら
ダウンロード

2011年5月16日

今日のあなたの取り扱い説明書

投稿者:isc_blog

今日のあなたの取り扱い説明書をゲットしてください!

Powered By ISC-WEB

入力された「名前」を元にいろいろ解析(?)して今日のあなたの「取扱説明書」を表示します。

いろいろやってみてください。
日付も関係させてありますので同じ名前でも明日は違う結果が待っています。

2011年5月15日

favicon.ico を作るサイト

投稿者:isc_blog

favicon.ico Generatorfavicon.ico Generator

ここで簡単に作れます!
しかも他の方が作ったアイコンも閲覧可能。
すごいのを作る方がいますねぇ~


[Latest favicons]をクリックするとこれまでの履歴が見られます。

便利です。

ちなみに「favicon.ico」をページに設定するためには
<head></head> 内に
<LINK REL=”SHORTCUT ICON” HREF=”favicon.ico”>
href= には 「http://~」などの絶対パスか相対パスで記述します。


追記 2011/05/16


ちなみに弊社デザイナーは
favicon.icoを作ろう!というサイトを利用している とのこと
こちらは3つのアイコンをひとつのファイルにまとめられるので便利とのこと。

2011年5月14日

IE6でSSL通信の場合、xmlHttpRequestのonreadyStateChangeがうまく拾えない場合がある

投稿者:isc_blog

この現象は IE6(InternetExplorer6)でhttps://~ で発生します。
サイト上から下記Javascriptのような処理を行ったところ
非同期通信でデータを取得し取得が完了したら結果をサブウィンドウに表示する処理なのだが
一度目はデータを読み込みサブウィンドウを開いて表示したものの
2回目はサブウィンドウを開くそぶりもない・・・
JavaScriptにalert()を入れてみたところ
「きたよ!」が出ない・・・

どうやら通信に行っていないようだ
[javascript]
xmlHttpRequest.onreadyStateChange = function() {
// ↓ここにalert
alert(‘きたよ!’);
if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
subwin = ("","subwin","width=400,height=370");
subwin.document.open();
subwin.document.write(xmlHttpRequest.responseText);
subwin.document.close();
}
}
[/javascript]
なにが悪いのかな・・・・と調べたところ
どうやらIE6でSSL通信の場合キャッシュを見てしまって通信すら行かないらしい・・・

上記ソースの場合、通信しないとサブウィンドウが開かないので
シレっと何事もないようになってしまうから厄介だ・・・

この場合、手っ取り早いのは
リクエスト送信時にタイムでも付けてしまうこと・・・
[javascript]
var time = (new Date()).getTime();
xmlHttpRequest.open("GET", "/service/AAAA?" + time);
[/javascript]
IE7やFireFoxでは再現しないみたい(IE8以降は試してません)

キーワード
onreadyStateChange キャッシュ ssl サブウィンドウ

2011年5月13日

Microsoft Power Point の覚え書き

投稿者:isc_blog

最近ほどパワポことMicrosoft Power Pointを多用することがなかったので
今更ながら得たちょっとしたコツを覚え書きとして書いておいきます。

カラー印刷するにはもったいないな~と思って白黒印刷したときに
「ハッ」としたこと
白黒だと背景が表示されないんですね・・・初めて知った。
対策はここに書いてありました(本家サポートですね)↓

パワーポイントの白黒印刷で背景を印刷する方法
パワーポイントを白黒印刷する際に背景を印刷する方法

上記サイトより引用 —–

この現象は PowerPoint 色付きの背景を含むスライドのモノクロ プリンターを印刷する方法を最適化するために発生します。

既定で、色付きの背景で、PowerPoint プレゼンテーションは、モノクロのプリンターに印刷されません。 これは、色付きの背景情報、プレゼンテーションを白黒プリンターに印刷するときに、スライドを妨げますがためです。

ということで対策方法は

以下も引用です。

色付きの背景を含む PowerPoint プレゼンテーションを開きます。
Microsoft Office PowerPoint 2003 および以前のバージョンの PowerPoint、[ ファイル ] メニューの [ 印刷 ] をクリックします。

Microsoft Office PowerPoint 2007 で、 Microsoft Office ボタン) をクリックして、 印刷 、[ 印刷 ] をクリックします。
[表示 色/グレースケール ] ボックスの一覧 の色 。

・・・最後「[表示 色/グレースケール ] ボックスの一覧 の色 」という表現がありますが
「カラー」だと思います。(Office2002だと「カラー」でした。)

もう一点。
パワーポイントの印刷時ページ数を表示する方法

1. パワーポイントで、[表示] メニューの [マスタ] をポイントして、[スライドマスタ] をクリックします。
2. 左下の「数字領域」とかかれている点線のボックスに、「/70」と入力します。
3. [表示] メニューの [標準] をクリックします。
4. [挿入] メニューの [スライド番号] をクリックします。
5. [スライド番号] チェック ボックスをオンにして、[すべてに適用] ボタンをクリックします。

Yahoo!知恵袋より引用
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1112615366

2011年5月12日