2008年4月アーカイブ

先日の記事『シンプルな画像拡大スクリプト「FancyZoom」』で紹介した「FancyZoom」ですが、IEで自分のブログを見たら、ヘッダー部分のレイアウトが崩れていました。

私は普段、Firefoxを使用しているため、IEのチェックが怠りがちで、レイアウト崩れやJavascriptのバグに気づかないことが多々あります。本当は最低でもIE6、IE7、Firefox、Safariあたりはチェックしなくちゃいけないんですけどね。

今回もまさにそのケース。
原因は「FancyZoom」が、bodyタグの直下にdivとtableをひそかに追加しているため。

私のブログの場合、コンテンツ領域をdiv#containerにmargin-top:30pxを指定していました。
「FancyZoom」が追加したdivの高さやポジションの指定のせいで、隣接する要素がうまく取得できず、マージンを取れなかったのが原因です。

Firefoxの拡張「Firebug」を使って判明。

div#ZoomSpin、div#ZoomBox、div#ZoomCapDiv、div#ShadowBoxという4つのdivに加えて、div#ZoomCapDiv、div#ShadowBoxの中にはtableが追加されています。

SWF上のテキストフィールドに入力した内容を、別のテキストフィールドに特定のフォントで表示させる実験。
今回の実験では、下記の項目をあえて必須要素としました。

1. 埋め込みフォントを使用し、フォントがインストールされていないPCでも、見た目が変わらないようにする。
2. フォントシンボルを共有ライブラリとして外部SWFに置く。つまりテキストフィールドに入力させるSWFと、フォントシンボルの入ったSWFをそれぞれ別々にする。

■制作上の注意点

1. フォントシンボルを共有ライブラリSWFにする必要がある。
2. 共有ライブラリのシンボルの読み込みは、それが配置される直前のフレームである。
3. つまりムービーがロードし終わっても、共有ライブラリのフォントシンボルはまだ読み込まれていない。
4. それを回避するため、間にもう一つ共有ライブラリを読み込むためだけのSWFをはさむ。
5. 結局、合計3つのSWFが必要となる。
   • フォントシンボル共有ライブラリSWF
   • 共有ライブラリSWFをからのMCに読み込み、キャッシュさせるSWF
   • テキストフィールドに入力、表示させるSWF

■フォントシンボル共有ライブラリSWFの作成

1. 空のテキストフィールドを作成、使用したいフォントを埋めこむ。「例：A-OTF 新ゴ Pro M」
2. 識別子:myFont
3. リンケージは下記のようにチェック
   • ActionScriptに書き出し
   • ラインタイム共有用に書き出し
   • 最初のフレームに書き出し
4. SWFにパブリッシュ

■キャッシュさせるSWFの作成

1. 先に作成した、外部ライブラリの読み込みでmyFontを読み込み。
2. 識別子:myFont
3. リンケージは下記のようにチェック
   • ラインタイム共有用に読み込み
4. ステージ上に配置
5. SWFにパブリッシュ

4/23、第2回大阪IT飲み会に参加してまいりました。

主催はEC studio。ここが運営しているブログ「技術ブログ」は結構ためになるのでRSSリーダーで購読していたので社名だけは知っていました。

他にも「社長ブログ」、「デザインブログ」などを運営しているのですが、その中の「社長ブログ」の下記の記事を読むと、大阪IT飲み会の主旨が分かるかと思います。

●大阪IT飲み会の構想を練ってみました
http://blog.ecstudio.jp/ec_studio_blog/080312osaka_it_party.html

●大阪をどげんかせんといかん
http://blog.ecstudio.jp/ec_studio_blog/080308got_to_change_osaka.html

参加人数は約30名ほどで、WEB業界だけでなく、IT業界全般からの参加。
場所も大阪だけでなく、京都や滋賀から参加している方々もいらっしゃいました。

飲み会ではありますが、株式会社ペンシルの覚田社長のショートセッションがありました。
株式会社ペンシルは福岡に拠点があるインターネットコンサルティングの会社です。
現在はWEB制作はほぼ外注で、コンサルティング・マーケティングに力を入れているそうです。

Javascriptを利用できない環境でもGoogle Mapsが利用できるようになりました。

Google Static Maps API

通常のGoogle Maps APIではJavascriptで地図を表示させ、ズーム機能やマウスでドラッグして移動させたり、マウスオンでふきだしを表示させたりなどできました。
ただし、Javascriptを使用できないモバイルサイトでは利用できませんでした。

モバイルでGoogle Mapsを利用したい場合はiアプリ版の「モバイルGoogleマップ」がありましたが、これはドコモの903iシリーズ以降の対応となっており、かなり限定的でした。

これまではモバイル版Yahoo!地図情報にリンクを貼ったりしてモバイルサイトに対応していたのですが、今後はGoogle Static Maps APIにより、Google Mapsも利用できるようになりそうです。

Google Static Mapsは静的なGIF画像を表示させます。
当然、ドラッグして地図を移動させたり、マウスオンでふきだしを表示させたり、ズーム機能は使えません。
しかしながらあらかじめマーカーを表示させたり、通常のマップとモバイル用のマップのいずれかのマップタイプを指定できます。

今回、3キャリア対応の携帯エミュレータを見つけました。

ケータイサイト用の高機能テスター「P1エミュレータ」
http://p1.netfarm.ne.jp/

この記事を投稿している現在、4月2日にリリースされたばかりの「バージョン1.0.1.32」がダウンロードできます。
β版ゆえ、ユーザー登録＆ライセンスキーが必要ですが、フリーでダウンロードできます。
使用期限は30日間です。
おそらく将来的には有料になるものと思われます。

Adobeが「Adobe Media Player」正式版を公開しました。
Adobe AIRアプリケーションで、インストールの際にはAdobe AIRをインストールする必要があります。

現在のところ米国のAdobeサイトからしかダウンロードできないようです。
当然、メニューとかは英語。

【ダウンロード先】
http://www.adobe.com/products/mediaplayer/

さて、早速インストール。
FLVファイルをいくつかドラッグアンドドロップして直接再生させてみました。

とうとうYahoo! 動画　Silverlight採用へ・・・
各ニュースサイトで、同様の記事がありました。

• 「Yahoo！動画」でSilverlight採用へ　Macで閲覧可能に - ITmedia News
• ヤフー、Silverlightを採用 - ITmedia エンタープライズ
• Yahoo! JAPAN、Silverlight対応の動画配信サービス提供へ | ネット | マイコミジャーナル
• ヤフー、マイクロソフトの「Silverlight」採用を表明～Windows・Mac・UNIXのマルチプラットフォームで動画展開（RBB TODAY） - Yahoo!ニュース

マイクロソフト自身も同様の発表をしています。
「Microsoft Silverlight テクノロジをヤフー株式会社が採用することを表明」

これまでのAdobe AIRアプリと言えば、玩具的なもの、アクセサリー的なものがほとんどでした。
Adobe AIRに限らず、基本的にデスクトップ・ガジェット、デスクトップ・ウィジェットと呼ばれるものはちょっと面白い小物的なものがほとんどです。
実際、ビジネスで利用されるものは少なく、プロモーションの一環としてプレゼントとして配布される場合はあるものの、そのガジェット自体に実用性があるものは本当に少なかったのが現状です。

ところが真の商用AIRアプリが登場しました。

「ASKUL DESKTOP　－アスクルデスクトップ－」
http://www.askul.co.jp/f/adesk/adesk00/

簡単に言うと、アスクルの商品検索・オンラインショッピングができるというシロモノです。

最近、ちょっとSEO&SEMに関心を持ってあれこれ調べ始めました。
特に興味を持っているのがアクセス解析とモバイルSEO＆SEM。
以前にもSEO関連の入門書？を購入しましたが、正直言って今回かなり良い書籍を見つけました。

「SEO SEM Technique」というムック（雑誌と書籍の中間）で、これまでにVol.1～Vol.4まで出版されています。
今回一挙に全部購入。

Firefox 3 Beta5をインストールしました。
以前Beta2をインストールしたのですが、自分の環境ではちょっと不安定だったのと、必要なアドオンが使えなかったので、しばらく使用せず、Beta3とBeta4はすっとばしてました。
ようやく安定版というかほぼ決定版に近いBeta5が出たのでインストール。

ダウンロードは下記のサイトから。
http://www.mozilla-japan.org/products/firefox/beta/

Firefox 2との併用の仕方も書いてありますので、とりあえずそのとおりにインストール。

当ブログには、アクセス解析用にGoogle Analyticsのトラッキングコードを設置していたのですが、ごくたまにレポートビューを見る程度で、まともに分析したことはありませんでした。
仕事でGoogle Analyticsのトラッキングコードを設置する機会が増えましたので、この際、自分のブログももう一度見直そうと思い至ったわけです。

現在、Google Analyticsには二種類のトラッキングコードが用意されています。

一つは従来版のurchin.js。
もう一つはga.js

新しいトラッキングコードに「ga.js」も、当初は日本語のキーワードが文字化け（実際はエンコードされているだけ）するという不具合があったそうですが、すでに改善されているということです。
従来版のurchin.jsに関しては、今後アップグレードの予定はないということですのです。

画像を拡大表示させるJavascriptは数あれど、これほどシンプルなものはないのではないか？と思われるのが「FancyZoom」です。

デモの確認とソースのダウンロードは下記のサイトから。
cabel.name: FancyZoom 1.1

2008年2月8日に1.1にバージョンアップしたようです。

使い方はいたってシンプル。
ダウンロードしてきたスクリプトにリンクを貼ります。

bodyタグにonloadで読み込み。

あとはサムネールの画像のimgタグにアンカータグで拡大画像へリンクを貼るだけ。

画像から画像へのリンクは全てスクリプトが効きます。
他の画像拡大スクリプトのように、適用したい画像に記述を追加するのではなく、「適用したくない画像」にだけ、スクリプトを記述します。

rel="nozoom"

この記述を追加すれば、画像拡大しません。
title属性で画像のキャプションもつけることができます。