Tag Archives: JavaScript

html5、CSS3、JavaScriptなどなど、Web開発者のためのフレームワーク10

Posted on by
Reply

それぞれ、特定の用途に特化していて、いつか使いそうなJavaScriptやCSSのフレームワークに関するメモ。

もし実際に使った感想があれば教えてください。

TimeGlider

年表という表現でいいのかな？

JSONデータからグリグリ動く年表を作るためのフレームワークです。

treesaver

デジタルカタログ風のコンテンツを作成するためのフレームワーク。

スマフォへの対応をメインにしているらしく、よくある「めくる」演出ではなくスライドでページを移動します。

LimeJS

HTML5でネイティブアプリに近いゲームを作成するためのフレームワーク。

Wink Toolkit

スマフォ対応サイトを作るためのフレームワーク。

jqTouchに近い印象。よさげなんですけど、サーバー死んでます。^^;

xui.js

HTML5に特化したjQueryみたいな感じ？

x$()という記述が、気になります。^^

Baker Ebook Framework

iPhone、iPad向けの電子書籍を作るためのフレームワーク。

サンプルはApp Storeへのリンクが貼られています。ということは…

ActiveJS

jQueryとかprototype.jsのようなJavaScriptフレームワーク。

ソースをパッと見しただけですが、これといった特徴をつかめませんでした。

RightJS

jQuery UIとかExt.jsなどのように様々なUIを簡単に実装するためのフレームワーク。

これはいいかもしれない。

EZ-CSS

CSSでレイアウトを組む際に手助けしてくれるフレームワーク。

あらかじめ用意されたレイアウトのバリエーションからクラス属性をコピペするだけで使用できるようです。

Atatonic CSS

横方向の罫線に対してきれいに揃えたいみたいなことをやってくれるCSSフレームワーク。

jQueryでドロップダウンメニューをつくるまでの４ステップ

Posted on by
Reply

WordPressのメニューなどを、jQueryを使ってちょっとかっこいいドロップダウンメニューにするためのメモ。

あまり凝ったデザインや演出はありませんが、実はほとんどがCSSで対処できますのでノンプログラマーの人におすすめです。

ステップ１： メニューのHTMLを準備する。

メニューのHTMLは以下のようなネストしたリストを前提としています。

<ul id="nav">
    <li><a href="a.html">製品案内</a></li>
    <li><a href="b.html">会社概要</a>
        <ul>
            <li><a href="c.html">交通アクセス</a></li>
        </ul>
    </li>
<ul>

ステップ２： CSSを準備する。

CSSは以下のような感じで。背景などの装飾は一切加えていないテンプレートのようなものです。

#nav, #nav ul
{
    margin: 0;
    padding: 0;
    list-style-type: none;
}
#nav > li
{
    float: left;
    position: relative;
    height: 40px;
    line-height: 40px;
}
#nav a
{
    display: block;
    white-space: nowrap;
}
#nav ul
{
    display: none;
    position: absolute;
    top: 40px;
    left: 0px;
    z-index: 10;
}

ステップ３： JavaScriptを用意する。

意外なことにJavaScriptは、とてもシンプル。
以下のソースを</body>の直前にコピペしてください。

jQueryはあらかじめ読んでおいてくださいね。

$('#nav > li').each(function(){
    if ($('ul', this).length) {
        $(this).addClass('has_child');
    }
    $(this).bind('mouseenter', function(){
        $('ul', this).slideDown(200);
    });
    $(this).bind('mouseleave', function(){
        $('ul', this).hide();
    });
});

ステップ４： かっこよくする。

ここから先はデザインに応じてCSSを試行錯誤することになります。

  • #navに背景を設定する。
  • #nav ulに背景を設定する。
  • a要素に背景を設定する。
  • a:hoverで背景を変える。
  • 行の高さや文字サイズ、余白などの微調整。（特に孫となるリスト要素などに注意。）
  • このJavaScriptではサブメニューがあるli要素にhas_childという値を持つクラス属性をつけていますので、たとえば三角のアイコンを設置するなどのCSSを設定する。

はい、実はステップ４が最も大変なのでした。^^

以下のようなCSSと組み合わせると幸せになれると思います。

CSS3 Fancy Menu / LavaLamp Menu

JavaScriptは苦手だけどCSSはいけるぜ！という人はぜひ挑戦を。^^

facebook向けiframeアプリの横幅や高さの設定方法

Posted on by
Reply

現在、WordPressをfacebookのアプリとして動作させるためのプラグインを作ってるのですが、コンテンツ部分の横幅や高さに関するメモ。

アプリのキャンバスの横幅

facebook アプリは、アプリとして登録するとiframeで外部サーバーのコンテンツを表示しています。

iframeなので、好き勝手に横幅を設定しちゃとスクロールバーが出てカッコ悪いので、CSSなどで横幅を予め合わせておく必要があります。

わかりにくいのですが、アプリは単独で開かれる場合とタブで開かれる場合があって、それぞれ最大の横幅が違います。

  • タブ経由で開かれる場合の横幅 – 520px
  • アプリ単独で開かれる場合の横幅 – 760px

アプリ側のbody要素のmarginとpaddingの調整もお忘れなく。

アプリの高さ

高さもコンテンツが縦長になると縦スクロールが出てみっともない事になってしまいますが、これはfacebookのJavaScript SDKで親ページのiframeの高さを変更するためのAPIが提供されています。

以下はAPIを使った高さ調節の例で、body要素の終了タグ直前にコピペしてください。

jQueryを使ってます。

FB.Canvas.setAutoResize() で自動的に高さが調整されるのですが、サイトによっては FB.Canvas.setSize() も紹介されていることが多いようです。

個人的には、FB.Canvas.setSize() のほうは他のJavaSCript でコンテンツ領域の高さが変わる場合に、いちいちコールする必要があったので、使いにくいと思いました。

Chromeの拡張機能をインストールする前にかならず確認すべきこと

Posted on by
Reply

今日、かなりのユーザーを抱えているChromeブラウザ用の拡張機能がマルウエアっぽい仕事をしているので、Googleさんに報告した。

具体的にはその拡張機能の開発元から「Did you try out: ….. from the Chrome Web Store?」といきなりリプライが来た。もちろんユーザー登録とか何もしてない、ただインストールしただけ。

でも、私自身がたまたまChrome拡張を開発したのでどうやったかが分かったわけで、そうではない人には、こういうセキュリティリスクがある拡張機能がどんなやつかが超わかりにくいのでまとめてみた。

インストールする前にかならず確認すべきこと！

拡張機能ギャラリー（https://chrome.google.com/webstore/）の中の各拡張機能の詳細ページの右側に以下のような記述があります。

この内容を必ず確認して下さい。

以下はリスクが高い順です！

All data on your computer and the websites you visit

この拡張機能は、パソコン内のすべての情報にアクセスできます。もちろんデータの送受信も可能です！
Googleのヘルプでもカメラや個人ファイルにアクセスできると警告しています。

ただし、これに該当する拡張機能はGoogleスタッフの手作業による審査を受けてパスしています。
したがって、拡張機能ギャラリー内で配布しているものに関しては、かえって安全かもしれませんが、万が一悪意があった場合にはもっとも大きな被害を受けうる拡張機能がこれに該当します。

Your data on all websites

この拡張機能は、パソコン内の個人ファイルにアクセスすることは出来ませんが、Chromeブラウザが開いている間はすべてのサーバーとの情報の送受信が可能です。

ちなみにどんなことができるかというと。。。

  • Twitter、Mixi、Facebook、Googleなどに順番にバックグラウンドでアクセスして情報を取得
  • 取得した情報を第三者のサーバーに送信

というようなことが、プログラマー歴１年未満の人でも数分考えれば作り方がわかるほど、簡単にできます。
（拡張機能は、クロスドメイン制約というセキュリティが働かないので、ホームページ上のプログラムより簡単といえるかも）

よく理解していただきたいのは、バックグラウンドでアクセスする際には、あたかもあなた自身がアクセスしたときと全く同じように処理されますので、ログイン済みで「クッキーを保存する」になっている場合は、あなたが閲覧できる全てを勝手に取得することができます。

さらに、この拡張機能に関してはGoogleスタッフの手作業による審査を受けていません。

インストールしたい拡張機能が「Your data on all websites」になっている場合は、レビューなどをよく確認してから慎重にインストールするべきです。

この場合も、万が一悪意がある拡張機能をインストールした場合は、非常に広い範囲の個人情報を盗まれる覚悟が必要です。
（tiwtterとmixiとfacebookに書いてることが、全部紐付けされたら、そりゃー丸裸じゃないですか？）

Your data on google.com

この拡張機能はgoogle.comとの情報の送受信ができるという意味で、google.comの部分はtwitter.comなど他のドメインの場合もあります。

この場合、情報をそのドメインのサーバーと自由に送受信できますが、他のサーバーとは送受信できませんので、仮にバックグラウンドでGoogleからデータを取得しても他に送ることができないため、安全であると言えます。（泥棒に例えると家に忍び込んでも外に出られない状態）

ただし、このドメインの部分には以下のように複数のドメインが書かれている場合があります。

Your data on ebay.com, ebay.co.uk and 17 other websites

上記の例では、17のドメイン名のサーバーとの通信が可能で、羅列しているサーバー間であれば、自由に情報を送受信することが可能です。

この場合、ユーザー側からは、どんな情報を取得されているかを判断することは非常に困難なため、一つ一つのドメイン名をよく確認して、すべてが信頼できるサーバーである場合にのみ、その拡張機能をインストールするべきです。

その他

上述の説明の中で紹介した画像の中にも「Your browsing history」との記述があります。
これは、ブラウザの履歴にアクセスしたり、現在まさに表示中のページの情報にアクセスできますよという意味です。

他にもいろいろあって、それぞれ潜在的なリスクはあると思うのですが、ここまでご説明した内容と組み合わさってリスクの大小が変化しますので、ここでは詳細は割愛します。

以下のページに詳しく書いてあります。

アプリケーション、拡張機能、テーマに必要な許可 – Google Chrome ヘルプ

This extension can accessがない

非常に少ないと思いますが、この場合は、最も安全な拡張機能であると言えます。
表示中のページに独自のスタイルを追加したり、通信を伴わないゲームがこれに該当します。

ただし、これには実は大きな罠があります。

実はChromeブラウザでは拡張機能のインストール画面が、Windows用とMac用でそれぞれ違う画面に誘導されます。（2011/02/23現在）

しかも、Mac用の拡張機能ギャラリーでは、これまで述べたような情報が掲載されていません。
（念のため申し上げますが、Mac用もWindow用も拡張機能の中身は同じです。）

したがって、”This extension can access”がない場合はURLを確認して、正しいURLのほうで拡張機能を検索しなおしてください。

インストール時のポップアップ

拡張機能のインストール時には、上述の内容がポップアップで表示されます
はいはいみたいな感じで「インストール」をクリックしてしまいますが、再度確認することをおすすめします。

ところで！

このサイトで配布している二つの拡張機能は以下のように一つのドメインとだけ情報を送受信しますので、「忍び込んだはいいけど外に出られない状態」と言えますので、ご安心を！

最後に！

実はあのEvernoteでさえもYour data on all websitesだったりします。
でも、実際には表示中のページの情報は、ここまでの権限を要求しなくても”Your browsing history”という非常に限定的な権限で取れるし、ページのスクリーンショットならGoogleさんがAPIで用意してくれてます。

したがって、Your data on evernote.comだけで十分動作すると思うんですが、もし動作しないというなら。。。

というわけで、Googleは不必要に大きな権限を要求する拡張機能をもっとチェックするべきだと思います。

JavaScriptでsprintf

Posted on by
Reply

グーグル先生に聞いたらたくさん出てくるのですが、どれも多機能で私の頭にはソースが難しいので自分で作っちゃった。

ダウンロード

業界用語で言う「車輪の再発明」です。
ただし、以下のパターンのみの低機能な奴です。

使い方及び置換パターン

もっともシンプルな置換。

var str = "%sは%sで%sです。"
alert(str.sprintf('わたし', '仕事', '東京')); // わたしは仕事で東京です。

置換文字列がひとつの場合は、すべて同じ文字列で置き換えられます。

var str = "%sは%sで%sです。"
alert(str.sprintf('わたし')); // わたしはわたしでわたしです。

置換文字列が複数あって、さらに%sの数にたいして置換文字列が少ない場合は、その部分だけ置換されません。

var str = "%sは%sで%sです。"
alert(str.sprintf('わたし', '仕事')); // わたしは仕事で%sです。

プレースホルダーも使用できます。

var str = "%1$sは%3$sで%2$sです。"
alert(str.sprintf('わたし', '仕事', '東京')); // わたしは東京で仕事です。

ソース

String.prototype.sprintf = function()
{
    var str = this + '';
    var args = Array.prototype.slice.call(arguments);

    var ph = true;
    if (str.indexOf('%s', 0) != -1) {
        ph = false;
    }

    if (args.length === 1) {
        if (ph) {
            return str.replace(/%1$s/g, args[0]);
        } else {
            return str.replace(/%s/g, args[0]);
        }
    } else {
        for (var i=0; i<args.length; i++) {
            var n = i + 1;
            if (ph) {
                str = str.replace('%'+n+'$s', args[i]);
            } else {
                str = str.replace('%s', args[i]);
            }
        }
    }
    return str;
}

JavaScript+jQueryでソートいろいろ

Posted on by
Reply

先ほど、アップデートしたchromeの拡張機能の中でXMLのノードのソートや、大文字小文字を区別しないソートなどをする必要があって、意外と簡単だったんだけど、いちおうメモ。

DOMノードのソート

XMLのDOM要素を、その子ノードの値の文字列順でソートする。
（大文字小文字は無視する。）

以下は、<bookmark>要素の中の<title>要素の値で、<bookmark>要素を並べ替えする。

var bookmarks = $('bookmark', data).sort(function(a, b){
    a = $('title', a).text().toLowerCase();
    b = $('title', b).text().toLowerCase();
    if(a > b)  return 1;
    if(a < b)  return -1;
    return 0;
});

jQueryを使っているので、シンプル。

当然HTMLでも同じなので、tableなどのソートは意外と楽かも。

大文字小文字を無視した文字列のソート

単純に sort() としてしまうと、[A, B, a, b] みたいになってしまうので、以下のようにする。

strings = strings.sort(function(a,b){
    a = a.toString().toLowerCase();
    b = b.toString().toLowerCase();
    if(a > b)  return 1;
    if(a < b)  return -1;
    return 0;
});

以上で、[A, a, b, B] みたいになる。
ただし、Aとaの並び順はこれだけでは、コントロール出来ない。

Google MAPS API v3でdistanceFrom（二点間の距離を求める）

Posted on by
Reply

Google MAPS API V3では、V2で実装されていた二点間の距離を計算するためのメソッドdistanceFrom()が実装されていない。

そこで、Google MAPS API v3に、distanceFrom()を実装するためのソース。

以下のソースをJavaScript内にコピペ。

google.maps.LatLng.prototype.distanceFrom = function(newLatLng) {
   var lat1 = this.lat();
   var radianLat1 = lat1 * ( Math.PI  / 180 );
   var lng1 = this.lng();
   var radianLng1 = lng1 * ( Math.PI  / 180 );
   var lat2 = newLatLng.lat();
   var radianLat2 = lat2 * ( Math.PI  / 180 );
   var lng2 = newLatLng.lng();
   var radianLng2 = lng2 * ( Math.PI  / 180 );
   var earth_radius = 6378.1;
   var diffLat =  ( radianLat1 - radianLat2 );
   var diffLng =  ( radianLng1 - radianLng2 );
   var sinLat = Math.sin( diffLat / 2  );
   var sinLng = Math.sin( diffLng / 2  );
   var a = Math.pow(sinLat, 2.0) + Math.cos(radianLat1) * Math.cos(radianLat2) * Math.pow(sinLng, 2.0);
   var distance = earth_radius * 2 * Math.asin(Math.min(1, Math.sqrt(a)));
   return distance;
}

以上で以下のようにpoint0とpoint1の距離が求められる。と思う。

var distance = point0.distanceFrom(point1);

point0とpoint1は、google.maps.LatLngオブジェクトである必要があります。

計算式そのものは、もう、わけわかんないので、間違ってたら教えてください。

WordPressのテーマファイル内で外部JavaScriptを使用する際の注意

Posted on by
1

WordPressのテーマファイル内で外部JavaScriptを使用する際に、単純に<script></script>としてしまうと以下のような問題が生じるおそれがある。

  • JavaScriptを使用するプラグインをインストールした際に、prototype.jsやJQueryなどが重複してロードされるおそれがある。
  • 同様に違うバージョンのライブラリをインストールしてしまうおそれがある。

すばらしいことにWordPressには、これらの問題を解決するための素晴らしい仕組みが実装されている。

wp_enqueue_script

もし、テーマファイル内にあるmyscript.jsをテーマファイル内で読み込みたい場合は、以下のようなPHPスクリプトをheader.php内に記述する。

<?php

wp_register_script(
	'myScript',
	get_bloginfo('stylesheet_directory').'/js/myscript.js',
	array('scriptaculous'),
	'20101129'
);

wp_enqueue_script('myScript');

?>

まずはじめの関数wp_enqueue_script()には以下のようなパラメータを指定する。

  1. スクリプトの名前（ファイル名ではなく任意の名前）
  2. JavaScriptまでのURL
  3. 依存関係があるJavaScriptライブラリ
  4. バージョン番号（私は単純にファイルの更新日を入れることが多い）

ポイントは依存関係があるJavaScriptライブラリを指定する部分で、上記の例で使用しているscriptaculousは、WordPressのパッケージ内に予め含まれており、上記のような記述を入れるだけで自動的に依存関係が全て解決されてロードされる。

依存関係が全て解決されるので、prototype.jsも勝手にロードされるのがポイント。

あとは、wp_enqueue_script(‘myScript’);が実行されることで、<head></head>内に<script></script>がずらずらと並ぶようになっている。

WordPressにあらかじめ同梱されているJavaScriptライブラリ

以下のページの下の方を参考に。

Function Reference/wp enqueue script « WordPress Codex

参考

以下のサイトも詳しい。

wp_enqueue_scriptで外部JavaScriptの読み込みをスマートに at WordPress.ex-libris.jp

Enhancing CSS & JavaScriptでTwenty Tenテーマをカスタマイズ

Posted on by
2

このサイトで配布しているEnhancing CSSプラグインとEnhancing JSプラグインは、それぞれ外部CSSと外部JavaScriptをWordPressに添付するプラグインです。

今回の記事では、これらのプラグインを使ってTwenty Tenテーマをカスタマイズする方法をご紹介します。

カスタマイズ例

以下の画像はTwenty TenテーマにEnhancing CSS及びEnhancing JavaScriptを使用して、外部CSS及びJavaScriptでカスタマイズした事例です。

CSSとJavaScript以外はメニューの設定も含めて全て同じです。もちろんテーマファイルの書き換えも一切行っていません。

はじめに

以下のサンプルを試す前にプラグインをインストールしてください。

メニューの位置を変更する

カスタマイズ例ではメニューの位置が画像の上部に変更されています。
この修正は、CSSでも可能ですが、JavaScriptにて行ないました。

  1. まず、Enhancing JavaScriptの管理画面（外観->拡張JavaScript）を開いて、Enqueue Scriptsの中からprototypeにチェックを入れて保存してください。
    以上の操作でテーマファイル側にprototype.jsが組み込まれます。
  2. 以下のソースをコピーしてJavaScriptのエディター内にペーストしてください。

コピー＆ペーストするソース

function init(){
  var oImg = $('branding').getElementsByTagName('IMG')[0];
  if (document.getElementsByTagName('BODY')[0].className.indexOf('home') >= 0) {
    $('masthead').appendChild(oImg);
  } else {
    $('branding').removeChild(oImg);
  }
}

Event.observe(window, 'load', init);

サイトタイトル部分に画像を使用する

  1. まず任意のロゴ画像を作成して、WordPressのメディアからアップロードして、画像のURLをコピーしてください。
  2. 以下のソースを”外観” -> ”拡張CSS” のCSSエディター内にペーストして、画像のパスの部分をアップロード画像と書き換えてください。（画像の横幅や高さもかえましょう！）
#site-title a
{
  background-image: url(/wp-content/uploads/2010/09/buttonw-grey-8bit.png);
  background-position: left top;
  background-repeat: no-repeat;
  display: block;
  width: 178px;
  height: 58px;
  text-indent: -9999px;
  overflow: hidden;
}

#site-description
{
  text-align: right;
}

サイトを確認してください。
もし、何も表示されていなければ画像のURLに間違いがあります。
また、ロゴ画像の上下左右が欠けている場合は、横幅と高さを調べて上記のソースと差し替えてください。

メニューをカッコよくする

以下のソースを”外観” -> “拡張CSS” のCSSエディター内に追加してください。

/* メニュー全体の背景の設定 */
#access
{
  background-color: #ffffff;
  background-image: url(/wp-content/uploads/2010/09/menu.png);
  background-repeat: repeat-x;
  background-position: left top;
  color: #000000;
  border-bottom: 1px solid #cccccc;
  margin-bottom: 5px;
  padding: 5px 0;
}

/* メニューのリンク文字列 */
#access a
{
  color: #000000;
}

/* メニューの項目別の背景 */
#access li > a
{
  background-image: url(/wp-content/uploads/2010/09/menu-items.png);
  width: 150px;
  height: 40px;
  padding: 0px;
  text-align: center;
  margin-right: 3px;
}

/* メニューの項目別の背景（マウスオーバー及びカレントページ） */
#access ul li.current_page_item > a,
#access li:hover > a
{
  background-image: url(/wp-content/uploads/2010/09/menu-items.png);
  background-position: left bottom;
  color: #666666;
}

/* ポップアップメニューを無効にする */
#access ul li:hover > ul
{
  display: none;
}

まとめ

すごく、ざっとした説明で恐縮ですが、以上のような手順で、JavaScriptによるHTMLの書き換え＋CSSというテクニックを使用すれば、複雑なテンプレートタグを使用しなくても十分に実用的なサイトが作れることがおわかりいただければ幸いです。

参考までにサンプルで使用した画像をおいておきますので、ご利用いただければ上記の事例が簡単に再現できると思います。

サンプル画像のダウンロード

WordPressプラグインEnhancing JavaScript 0.1をリリース

Posted on by
Reply

WordPress上で外部JavaScriptを取り扱うためのプラグインをリリースしました。

firegoby » WordPressに外部JavaScriptを追加するプラグイン

このプラグインを使用するとビジュアル エディターでJavaScriptを編集したり、WordPressにデフォルトで組み込まれているprototype.jsやjqueryなどのJavaScriptフレームワークを簡単にテーマに組み込むことが可能です。