Googleが提供するAJAX JavaScriptライブラリを使用する

Googleの『AJAX Libraries API』というサービスを利用することで、jQueryやprototypeなどのjsファイルをWeb上の何処かにアップロードする必要がなくなります。

分かりやすく言えば、Googleがどうぞご自由に使って下さいと、Web上に公開しているJavaScript ライブラリを使わせてもらうということですね。

閲覧者側のメリットとして、利用者が増えればキャッシュから読み込むことで、閲覧時に不要な読み込み処理が減るということでしょうか。

使い方は最初にjsapiを読み込み、google.loadで読み込みたいJavaScriptライブラリを指定するというものです。

例として、以下のコードをheadタグ内に入れます。

<script src="http://www.google.com/jsapi"></script> 
<script>
   google.load("jquery", "1.2.6");
</script>

『"1.2.6"』というのはjQueryのバージョンですが、上記の場合、
『http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js』
と、このような形でjQueryのjsファイルが読み込まれます。

今後のメンテも考慮してバージョンを『"1.2"』とすると、1.2.xの最新バージョンが読み込まれます。
『"1"』とすると1.xの最新バージョンが読み込まれます。
上記どちらの書き方をしても現時点で最新バージョンである1.2.6が読み込まれました。

Google Feed APIやGoogle Search APIとの併用も可能で実際にこちらで使用しています。

GF APIやGS APIを使用する場合はAPIKeyが必要となりますが、Ajax Libraries APIでは必要ありません。

現在使用出来るライブラリは以下の5つです。

実際に使用する場合は上のファイルだけでなく、プラグインも使用するので別途アップロードしなければならないだろうが、このサービスを利用すれば今後のメンテが楽になりますので利用する価値はあるでしょう。

Blogger に使えそうな画像表示 Javascript ライブラリ etc...

Bloggerにupした画像のもう少しマシな見せ方はないかとちょっと探してみた。

LightBoxでシンプルに

Lightbox 2
http://www.huddletogether.com/projects/lightbox2/

動作が安定しているのでライトボックスの中ではこれがおススメかな?
『Script.aculo.us』と『prototype』を使用しています。


jQuery lightBox plugin
http://leandrovieira.com/projects/jquery/lightbox/

上の『2』と見た目にはほぼ同じ。
これは jQueryのプラグインになります。
上の『2』も含めてサンプルがあるのでそれをベースに移植すれば簡単に出来そう。

その後、これを使用してみたが動作に不満があったので『Highslide JS』に換えた。
参考:『lightBox 0.5』から『Highlside JS』に変えた訳


Lightbox JS
http://www.huddletogether.com/projects/lightbox/

これが一番シンプルで簡単に取り入れられそう。
該当のjsファイル以外にライブラリを必要としないところが良い。
上記『LightBox2』の初期バージョンのようだ。


ThickBox
http://jquery.com/demo/thickbox/

ソースを見ると、かなりシンプルなつくりなのが解る。故に動作もシンプル。
jQueryのプラグインで、jQueryのサイトから。



FancyZoom
http://www.cabel.name/2008/02/fancyzoom-10.html

画像を拡大表示させるときのEffectは「おおぉ」と思わせるが、それ以外の作りについては雑な印象。



facebox
http://famspam.com/facebox

これもjQueryを使用します。
jQueryを使用したものの中では一番 cool な印象。


ライトボックスの亜種は他にも多数存在するのでここにないモノもいろいろ試してみるのも良いかと。


おススメ

Highslide JS
http://highslide.com/

これはいいなぁと思うがなんか面倒そう。サンプルだと画像の左上に「Powerd by Highlight JS」と出るのだが、これ消しても問題ないのか?実際は出ない?設定で非表示にすることも可能。
結局私はこれに落ち着いた。



スライドさせるなら

JQuery Cycle Plugin
http://malsup.com/jquery/cycle/

いろんな動作が見られて「こんなことができるのか」と関心。ただブログに画像貼り付けるだけじゃ面白くないので、こう言う見せ方したらスペースも取らないし良いかな。



複数の画像を表示させるパーツとして

jQuery: jqGalScroll v2.1
http://benjaminsterling.com/jquery-jqgalscroll-photo-gallery/

縦 or 横方向にスライドさせるのだが中身を見ると例えば横方向にスライドさせるなら画像のコンテナのWidthが画像の合計Width分取っているようでちょっと腰が引ける。
低スペックのPCだと重くないか?

追記:jQueryのバージョンアップに伴い現在使用不可。(2009/03/10)


AJAX SlideShow
http://www.google.com/uds/solutions/slideshow/index.html

GoogleのAPIサンプル。このサンプルではFrickerの画像を引っ張ってきて表示している。シンプルだからFrickerのユーザーが自分のブログに載せたいならこれ使うのが手っ取り早い。


何をチョイスするにしてもHTML(XML)とJavascriptについて多少の知識は必要で、またjsファイルをアップロードする場所の確保も必要です。

『lightBox 0.5』を触ってみた

HTML,XML,CSSを触り出したら必然的に触りたくなるAjax関連。
ということで、簡単そうで視覚的にも分かりやすい『lightBox 0.5』を触ってみました。

『SkyDrive』の方の実験と兼ねていたので少々手間取ったがやってることは実に簡単で、Javascriptのことを余り知らなくてもイケちゃいます。

Web上の何処かにjsファイルをアップロードしなければならないのでGoogle Page Creator(GPC)の方に置いて実装してます。

表示される画像はSkyDriveにupして一つ一つ引っ張ってきてます。(えらい面倒で二度とやらない!)

で、こちらがそのjQueryを使用したページですのでお暇なら触ってみてください。
実は画像選びや色を統一する加工の方が大変だったりして…
あまり苦労の跡が感じられないのが悲しかったりする。



jQuery lightBox plugin:
http://leandrovieira.com/projects/jquery/lightbox/
こちらが今回使用したlightBoxの入手先。
私でも理解できるほど簡単で、英語ができなくても理解できるdemoも用意されているので、ただ外国のサイトから取って貼り付けただけの日本の似非Geekのサイトを見るよりよっぽど参考になるので見てきてほしい。

追記:
『lightbox』と名のつくモノは複数あり、このlightbox0.5はお薦めしません。
理由は以下の投稿にてご確認ください。
humming bird: 『lightBox 0.5』から『Highlside JS』に変えた訳

SkyDriveにupしたファイルをBloggerで使用出来るか

今回は『SkyDrive』にアップロードした画像をGoogleで使用出来るか試す。

もちろん公開されている画像はBloggerやGoogle Page Creatorでも使用可能であるが、SkyDriveでは非公開に設定している画像は開こうとすると下に示すサインインの画面に飛ばされる。

Sign in to Windows Live Storage:


つまり持ち主以外開けない

この動作の方が健全ではないか?

むしろ非公開画像が使用(表示)できるGoogleの『Picasa ウェブ アルバム』の方がおかしいのでは?

『Picasa』のスタンスとしては検索しても引っかからないけど、表示はできます、ということだろうが(そういえば何処かに書いてあったような...)他人に全く触れさせないようにすることが出来るような選択オプションがあっても良いように思う。

結論として、『SkyDrive』にupしたファイルは公開しないと使えない

Bloggerにも使えるWindows Live Writerを試す

Windows Live Writer』(以下WLW)をインストール、使用してみました。
これはWebサービスではなく、パソコンにインストールして使用するアプリケーションです。

Windows Liveのブログサービス『Spaces』のみならず BloggerWordPress など他のブログサービスでも使用可能です。

ツールバーまたは基本メニュー[ブログ] - [ブログアカウントの追加]から自身のブログを登録することでWLWから簡単に投稿が行えるようになります。

複数ブログを持つ人にとっては一つのインターフェイスから作業を行えるのは効率的で利便性が良いのではないでしょうか。

もちろん投稿後の編集も可能です。基本メニュー[ファイル(F)] - [開く]またはツールバーの[開く]から過去の投稿を読み込むことができます。

サムネイルを編集

設定により、サムネイルに影を付けたり、画像に文字を挿入することができます。

Webレイアウト

エディタとしてのありがたい機能はWebレイアウト表示できること。
これは、ブログデザインを読み込み、同じレイアウトで記事を書くことができるというものです。

Webレイアウト表示例:

これによって記事を書きながら投稿後のWeb上での実際の表示が確認できるので改行、折り返しなどにも気を使っている人には大変有難い機能です。

Webプレビュー

[F12]キー押下することで実際のWebページとほぼ同じ状態で表示することができます。

HTMLを直接編集

[Shift] + [F11]押下でHTMLタグを直接書き込むことができます。

プラグイン

WLWの右サイドバー[プラグインの追加]からプラグインを追加することが可能です。
(ジャンプした先はなぜか「アドイン」と表示されているのですが…)
公開されているプラグインの数は少ないですが、使えるものもあります。
Web Thumbnail』を使用してみたのですが、作成されるサムネイルに必ずスクロールバーが入っているのがちょっと気になります。
Amazonアソシエイトを挿入するプラグイン『Amazon Associate Japan』は便利です。

以前は絵文字を挿入するプラグインがあったはずなのですが、見当たらないようですね。

その他

  • クリップボード経由で画像の貼り付けが可能
  • テーブルの挿入が簡単で列(Column)の幅(width)の設定もドラッグで可能

投稿可能なブログサービスの確認はこちらから

WLWにFC2のブログを登録する方法はこちら

補足)
FC2ブログの場合、euc-jpなので『euc-jp(既定)』で良いかと思われましたが、

UTF-8に変更しないと
  • 過去の記事の取得ができない。
  • 一度投降した記事を再度読み込むと文字化けする。

「設定の詳細」で文字コードをUnicode(UTF-8)に変更しましょう。

Sony Style(ソニースタイル)
デル株式会社

Recent Posts