みなさんこんにちは。サイトロイド開発担当の石本です。

最近、職場でのスマートフォン率が急激に高くなってきました。この記事を読んでいる方も結構な割合でiPhoneやandroidをお持ちなのではないでしょうか？Webサイト制作者の方はスマートフォン用のサイトを作って欲しいなどの要望が増えているのではないでしょうか？

実は、サイトロイドでは近日中にスマートフォン用のサイト表示に対応します。単に縮小表示するだけでなくスマートフォンに合わせたレイアウトとUIになってますのでご期待ください。

今回スマートフォン用のUIを実現するにあたり、横にスライドするメニューを導入しました。オープンソースとして公開しますのでよろしければダウンロードしてご利用ください。

ダウンロード

こちらから行えます。（jQuery.slideMenu）

使い方

1.jQuery本体とプラグインをインクルード

以下の記述をして、jQuery本体とプラグインを読み込んでください。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="slidemenu.js"></script>

2.CSSを記述

以下のようにCSSを記述します。CSS3を使用してますので古いIEなどでは細かい部分の表示が異なりますがスマートフォンでは意図した表示になります。

div.slidemenu {
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-top: 1px solid #333333;
	border-right: 1px solid #333333;
	border-left: 1px solid #333333;
}
div.slidemenu * {
	margin: 0;
	padding: 0;
}
div.slidemenu ul {
	width : 100%;
	list-style: none;
}
div.slidemenu ul li {
	width : 100%;
}
div.slidemenu ul li.back {
	padding-top: 5px;
}
div.slidemenu ul li.back a {
	float: none;
	display: inline-block;
	background: #222222;
	background: -webkit-gradient(linear, 0 0, 0 100%,
			  color-stop(0, rgba(50, 50, 50, 0.9)),
			  color-stop(0.5, rgba(30, 30, 30, 0.9)),
			  color-stop(0.5, rgba(20, 20, 20, 0.9)),
			  color-stop(1, rgba(0, 0, 0, 0.9)));
	border: 0;
	border-radius: 1em;
	-webkit-border-radius: 1em;
	color: #fff;
	font-family: "helvetica neue", helvetica, arial, sans-serif;
	font-size: 22px;
	font-weight: lighter;
	line-height: 1;
	padding: 5px 15px 5px 10px;
	text-shadow: 0px -1px 1px rgba(0, 0, 0, .8), 0 1px 1px rgba(255, 255, 255, 0.3);
	font-size: 0.8em;
	font-weight: bold;
}
div.slidemenu ul li span {
	display: block;
	position: relative;
	border-bottom: 1px solid #333333;
	padding-left: 20px;
}
div.slidemenu ul li a {
	display: inline-block;
	padding: 15px 20px 15px 20px;
}
div.slidemenu ul li a.left {
	cursor: pointer;
}
div.slidemenu ul li span a.right {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
}
div.slidemenu ul.root {
	margin-left: 0;
}
div.slidemenu ul.root {
	position: relative;
	width: 100%;
}
div.slidemenu ul.root li ul {
	position: absolute;
	left: 100%;
	top: 0;
}

3.HTMLを記述

以下のように、ulを入れ子にしてサブメニューなどを記述します。

<ul class="root">
<li><span><a href="#" class="menu">menu1</a></span>
	<ul>
	<li><span><a href="#" class="menu">menu1_1</a></span></li>
	<li><span><a href="#" class="menu">menu1_2</a></span></li>
	<li><span><a href="#" class="menu">menu1_3</a></span></li>
	<li><span><a href="#" class="menu">menu1_4</a></span>
		<ul>
		<li><span><a href="#" class="menu">menu1_4_1</a></span></li>
		<li><span><a href="#" class="menu">menu1_4_2</a></span></li>
		</ul>
	</li>
	</ul>
</li>
<li><span><a href="#" class="menu">menu2</a></span></li>
<li><span><a href="#" class="menu">menu3</a></span>
	<ul>
	<li><span><a href="#" class="menu">menu3_1</a></span></li>
	<li><span><a href="#" class="menu">menu3_2</a></span></li>
	<li><span><a href="#" class="menu">menu3_3</a></span></li>
	</ul>
</li>
</ul>

4.プラグインをセットアップ

以下の記述をしてプラグインを有効にしてください。現在対応しているオプションは幅とアニメーションの時間です。

$(function(){
    $('.slidemenu').slideMenu({
        //"width" : 320,//幅
        //"time"  : 200//アニメーションの時間
    });
});

ソースコード

/**
 * slideMenu
 * @author Nutex Inc.
 * @param {Object} conf
 * {
 *     "width" : the width of wrapper
 *     "time"  : the time of animation
 * }
 */
(function($){
    $.fn.slideMenu = function(conf){
        var conf    = conf;
        var wrapper = this;
        var width   = (conf && conf['width'])? conf['width'] : this.width();
        var root    = this.find('ul.root');
        var li      = this.find('li');
        var span    = this.find('li span');
        var menu    = this.find('li span a.menu');
        var time    = (conf && conf['time'])? conf['time'] : 200;
        var depth   = 0;
        
        var setRight = function(){
            var right = document.createElement('a');
            $(right).attr('class', 'right');
            right.appendChild(document.createTextNode('≫'));
            $('li:has(ul)').children('span').find('a.menu').after(right);
            
            wrapper.find('a.right').unbind('click');
            wrapper.find('a.right').bind(
                'click',
                function(){
                    var current = $(this).closest('li').find('ul');
                    $(this).parent('span').next('ul').show();
                    root.animate(
                        {
                            "marginLeft" : '-=' + (wrapper.width()) + 'px'
                        },
                        time,
                        function(){
                            depth++;
                            wrapper.css({
                                "height" : current.height() + 'px'
                            })
                        }
                    );
                }
            );
        }
        
        var setLeft = function(){
            var left = document.createElement('a');
            $(left).attr('class', 'left');
            left.appendChild(document.createTextNode('≪ back'));
            var li = document.createElement('li');
            $(li).attr('class', 'back');
            li.appendChild(left);
            root.find('li ul li:first-child[class!=back]').before(li);

            wrapper.find('a.left').unbind('click');
            wrapper.find('a.left').bind(
                'click',
                function(){
                    var block = $(this).closest('ul');
                    var current = $(this).closest('ul').parents('ul');
                    $(this).parent('span').next('ul').show();
                    root.animate(
                        {
                            "marginLeft" : '+=' + (wrapper.width()) + 'px'
                        },
                        time,
                        function(){
                            depth--;
                            wrapper.css({
                                "height" : current.height() + 'px'
                            })
                            block.hide();
                        }
                    );
                }
            );
        }
        
        
        wrapper.find('li ul').hide();
        setRight();
        setLeft();
        
        if(window.addEventListener){
            window.addEventListener(
                'resize',
                function(){
                    root.css({
                        "marginLeft" : -depth * wrapper.width() + 'px'
                    });
                },
                false
            );
        }
        else{
            window.attachEvent(
                'onresize',
                function(){
                    root.css({
                        "marginLeft" : -depth * wrapper.width() + 'px'
                    });
                }
            );
        }
    }
})($);

ライセンス

BSDライセンスの元で配布されています。

前回に引き続きjQueryネタから良く使う実用的なjQueryプラグインを紹介したいと思います。それぞれのライセンス形態も書いておきまし た。ちなみに5つとも商用利用可能です。それではどうぞ。

imgbox

(デモ) http://jqueryglobe.com/labs/imgbox/

画像サムネイルをクリックするとその位置から拡大します。かなり使いやすいです。

ライセンス : MIT License

tipsy

(デモ) http://onehackoranother.com/projects/jquery/tipsy/

マウスオーバー時に、簡単なテキストを表示できます。ちょっとしたヘルプなんかを表示するのに使えますね。もともとのデザインが簡単なCSSなので装飾も簡単です。

ライセンス : MIT License

galleryview

(デモ) http://spaceforaname.com/galleryview

よく出来た画像ギャラリーです。なんでもカッコイイ画像に見えてしまいます。画像ギャラリープラグインの中では一番のオススメ。

ライセンス : MIT License

blockUI

(デモ) http://malsup.com/jquery/block/#demos

ローディング中など、ユーザーに画面を操作させないようにできます。シンプルにカッコよく見せれるのでオススメです。しかもデモを見ると多彩な使い方ができるようで す。

ライセンス : MIT License

tinymce

(デモ) http://tinymce.moxiecode.com/examples/full.php

テキストを直観的にHTMLで装飾できるHTMLエディターです。wysiwygとか言われていますね。HTMLエディターの中でも一番優秀で、色んなサー ビスやCMSなどで使われています。サイトロイドでも使用しています。画像アップロード機能がデフォルトで付いてないのが残念なとこですが。。

ライセンス : LGPL

まとめ

jQueryライブラリは星の 数ほどありますのでどれを使うか迷うことが多いです。採用基準となるのはライセンス形態・クオリティ・ドキュメントの質・ブラウザの対応範囲などなどで す。あと、会社などで使う場合は商用で使えるライセンスかどうか気になりますね。そこらへんを分かりやすく説明してある記事があったので紹介しておきます。

オープンソースのライセンスは商用利用できるのか？
http://www.u-ziq.com/blog/2006/08/post_42.html

他の参考サイト

他サイトで紹介しているの実用的なjQueryプラグインの記事です。こちらも参考にしてみて下さい。

IE6、7でも動いてくれる&実用性の高そうなjQueryプラグイン30個まとめ
http://kachibito.net/web-design/practicably-jquery.html

実務で使える・使ったjQueryプラグイン5選
http://tech.ironhearts.com/blog/archives/162

みなさんこんにちは。サイトロイド開発担当の石本です。

突然ですが、登録フォームなどで下のようなUIを実現したいと思ったことはないでしょうか。

かな アルファベット 数字

今日は簡単なjQueryのプラグインを作りながら、これを実現してみたいと思います。

早速プラグインを作ってみる

プラグインを作る前に下のような要素があるHTMLを準備しておきましょう。

<select name="master">
<option value="kana">かな</option>
<option value="alpha">アルファベット</option>
<option value="num">数字</option>
</select>
<select name="slave">
</select>

プラグインのソースコード

プラグインのコードは以下のようになります。

(function($){
    $.fn.variableOptions = function(conf){
        
        /**
         * setOptions
         * @param {Object} elm
         */
        var setOptions = function(elm){
            conf['slave'].empty();
            var slave = conf['options'][$(elm).val()];
            for(var i = 0, n = slave.length; i < n; i++){
                var option = document.createElement('option');
                var text   = document.createTextNode(slave[i]['text']);
                option.appendChild(text);
                option.value = slave[i]['value'];
                conf['slave'].append(option);
            }
        };
        
        /**
         * 選択が変更されたときに実行します
         */
        this.change(function(){
            setOptions(this);
        });
        
        /**
         * 読み込み時に実行し初期状態を再現します
         */
        setOptions(this.get(0));
    }
})($);

以下の部分でプラグインを定義します。

$.fn.variableOptions = function(conf){
}

ちなみにこの関数内でのthisには$('select')が入ってます。

このプラグインを使用するには以下のようにすれば定義したプラグインが実行できます。

$('select').variableOptions();

とっても簡単ですね。♪(´ε｀ )。実際には呼び出し時に様々なオプションを指定します。それではの呼び出し側のコードを見てみましょう。

プラグインを使用するコード

$(function(){
    $('select[name="master"]').variableOptions({
        "options" : {
            "kana" : [
                {"value" : "あ", "text" : "あ"},
                {"value" : "い", "text" : "い"},
                {"value" : "う", "text" : "う"}
            ],
            "alpha" : [
                {"value" : "a", "text" : "a"},
                {"value" : "b", "text" : "b"},
                {"value" : "c", "text" : "c"}
            ],
            "num" : [
                {"value" : "0", "text" : "0"},
                {"value" : "1", "text" : "1"},
                {"value" : "2", "text" : "2"}
            ]
        },
        "slave" : $('select[name="slave"]')
    });
});

選択肢の配列と従属するセレクトボックスをjsonで渡しています。実際にはプラグイン内での処理と照らし合わせながら引数の形式を決めていくことになると思います。

# 生成するファイルを保存するディレクトリを作成
[root@localhost ~] mkdir ~/sample_ssl

# opensslコマンドのパスを探ます
[root@localhost ~] which openssl
/usr/bin/openssl

# 移動
[root@localhost ~] cd /usr/bin/

# 秘密鍵生成時に必要となる、ランダムな乱数を作ります
[root@localhost bin] openssl md5 * > ~/sample_ssl/rand.dat

# パスワードを自動で生成します。パスワードは秘密鍵で使います。
[root@localhost bin] mkpasswd -s 0
zpOdeCm88

# 先ほど作ったディレクトリに移動
[root@localhost bin] cd ~/sample_ssl/

# 秘密鍵作成
[root@localhost sample_ssl] openssl genrsa -rand rand.dat -des3 2048 > 2010_10_06.key.pem
先ほど生成したパスワードを2回ペーストします。

# CSR作成
[root@localhost sample_ssl] openssl req -new -key 2010_10_06.key.pem -out 2010_10_06.csr.pem
先ほどのパスワードをまた入力します。

Country Name (2 letter code) [GB]:JP
State or Province Name (full name) [Berkshire]:Tokyo
Locality Name (eg, city) [Newbury]:Shinagawa-ku
Organization Name (eg, company) [My Company Ltd]:SITEROID JAPAN LLC.
Organizational Unit Name (eg, section) []: 
Common Name (eg, your name or your server's hostname) []:siteroid.jp 
Email Address []:  Please enter the following 'extra' attributes to be sent with your certificate request 
A challenge password []: 
An optional company name []:

SSL証明書を発行してもらったら、サーバーに設置します。
設置に必要なものは、『秘密鍵』 『SSL証明書』 『中間証明書』の3つです。 
まずは、その3つをサーバーにアップロードします。できればwinscpなどの暗号化されたアップローダーを使いましょう。 今回は、/etc/httpd/conf/sslへアップロードしましたが、別にどこでもかまいません。アップしたらapacheの設定です。

設置例

apacheの設定ファイルに以下を追加して、apacheを再起動します。

<VirtualHost *:443>
  ServerName siteroid.jp
  DocumentRoot /var/www/vhosts/siteroid.jp/html
  SSLEngine on
  SSLCipherSuite ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP:+eNULL
  SSLCertificateFile /etc/httpd/conf/ssl/(SSL証明書のファイル名) # SSL証明書
  SSLCertificateKeyFile /etc/httpd/conf/ssl/2010_10_06.key.pem # 秘密鍵
  SSLCACertificateFile /etc/httpd/conf/ssl/(中間証明書のファイル名) # 中間証明書
</VirtualHost>

完了

httpsでアクセスして、エラーが出ずにアクセスできればokです。

まとめ

コマンド実行したりと大変かもしれませんが、『サーバーの設置に何が必要か?』などが分かれば、なんとかなると思います。以外につまずきやすいのがapacheの設定ですかね。ですが、ググれば嫌というほど情報が出てくるはずです。ぁ、ググる前にエラーログを見てくださいね(var/log/httpd/error_log)。^^。

おまけ

前回勧めた代理店joes sslで秘密鍵とCSRの作成代行を依頼した場合の注意点を一つ。
秘密鍵ですがPKCS8の形式で渡されます。レンタルサーバーではRSA形式の秘密鍵しか受け付けないところもあるので注意が必要です。さくらインターネットなどがそうです。そういう場合は、以下のようにコマンドを実行してRSA形式に変換するといいです。

openssl rsa -in 秘密鍵のファイル名 -out 新しい秘密鍵のファイル名

ちなみにRSA形式は秘密鍵ファイルの一行目が

-----BEGIN RSA PRIVATE KEY-----

こんな感じになっています。
参考までに。 

(リンク)
アイコンはここのサイトから頂きました。
http://medialoot.com/blog/incredibly-detailed-free-icons-set/ 

(参考)
http://blog.livedoor.jp/ld_directors/archives/51085702.html

みなさんこんにちは。サイトロイド開発担当の本郷です。

今回はプログラミング的な事からちょっと外れてSSLについてお話ししたいと思います。SSLを取得する際に知っておくべきポイントをまとめてたのでぜひ活用して下さい♪

サイトロイドでも個人情報を取り扱っているためSSLを取得しています。私自身も何回もSSLの取得・設定をしているので慣れました。もう目をつむってで取得できるくらいです。嘘です。(´・ω・｀
じゃあ説明していきます。 

1、SSLはドメインごとに取得するもの

例えば、siteroid.jpであればsiteroid.jp用にSSLを取得します。このブログのようにdevelop-blog.siteroid.jpでSSLを使用する場合は、develop-blof.siteroid.jp用にSSLを取得しないといけません。ちなみに、SSLはドメインごとに取るものなのでサーバーの引っ越しやIPが変わっても何の問題も起きません。

2、携帯サイトでSSLを使用する場合はベリサイン

ちなみにSSLは、色んな会社が発行しています。ベリサインとかグローバルサイン、最近ではセコムも出してますね。各会社が発行しているSSLによっては、携帯でSSLが正常に動作してないとエラーが出てしまいます。SSLはサイト訪問者に安心感を与えるものですので、SSLでエラーが出てしまっては元も子もないですね。ベリサインなら携帯サイトへの対応率は99%です。プランによっては100%もあります。他の安いSSLなんかは60%～なので携帯サイトでSSLを使う場合はベリサインです。

このサイトに対応しているか一覧表があるので気になる方は見てみて下さい。ベリサイン以外は結構だめだめですね。。ちなみに自分携帯softbankのSH823(たしか3年前購入)だとRapidSSLはエラーが出ました。

3、SSLは代理店で購入すべし

例えばベリサインの公式サイトで一番安いタイプのSSLを購入した場合は、¥85,050。同じものを安い代理店で買った場合は、¥39,900です。これが噂のボッタク(ry
実は、原価は$299です。代理店を通すと取得の際に手間が軽くなったりサポートが充実してたりと安いだけじゃありません。絶対代理店で取得するのをオススメします。

4、サーバー台数に注意

SSLは、1つのIPで1つしか動かすことができません。(新しいプラットフォームではできるみたいですが。。。http://slashdot.jp/~doda/journal/495893)
あと、SSLのプランによってはサーバー台数によって値段が変わります。複数サーバー構成のサイトを作る場合は事前に要調査です。

5、ベリサインなら取得に2週間、それ以外はすぐ

これはぜひ覚えといて下さい。ベリサインは、取得する際に実際に企業が存在するかなどを調べます。電話もかかってきます(ﾟДﾟ。なので審査に時間がかかるみたいです。

以上が取得する際に気を付けるポイントです。何か分からないことあればサポートセンターに電話するのが一番早いです。丁寧に教えてくれます^^

みなさんこんにちは。サイトロイド開発担当の石本です。本日はJavaScriptについてちょっとしたメモを残しておきます。

以下のように書く事はよくあると思います。

function sample(txt){
    alert(txt);
}
sample('test1');// test1

でも同じような機能で以下のように書く事もできます。

(function(txt){
    alert(txt);
})('test2');// test2

グローバル空間を極限まで使わないようにするという指針はアプリケーションが巨大になり、複数のJavaScriptファイルを読み込む場面で、非常に重要となってきます。しっかりとこの記法を胸に刻んでおきましょう。

みなさんこんにちは。サイトロイド開発担当の石本です。

サイトロイドではドラッグ＆ドロップを始めとした直観的なUIを実現させるために広範にわたってJavaScriptを使用しています。JavaScriptを使ってウェブアプリケーションを開発する場合、クラスを作ってインスタンス化するという作業が欠かせません。ところがJavaScriptのオブジェクト指向は他の言語とは少々異なってます。そこで今回は他の言語と比較しながらJavaScriptにおけるオブジェクト指向を学んでみたいと思います。

基本的な構造

PHP

class Dog
{
    private $_name = '';
    public function __constructor($name)
    {
        $this->_name = $name;
    }
    public function cry()
    {
        echo 'bow!';
    }
}

これをインスタンス化して使用するときは以下のようになります。

$pochi = new Dog('pochi');
$pochi->cry();// bow!

JavaScript

同じものをJavaScriptで書いてみましょう。

function Dog(name){
    this._name = name;
}
Dog.prototype.cry = function(){
    document.write('bow!');
};

以上がクラスにあたる部分です。ちなみに正確にはJavaScriptにはクラスが存在しませんが、コンストラクタ関数を「クラス」と呼ぶ書籍がほとんどのようですので、こちらでも「クラス」と呼ばせて頂きます。それでは実際に使用してみましょう。

var pochi = new Dog('pochi');
pochi.cry();// bow!

殆どPHPと同じですね！

掘り下げてみる

結論だけ分かれば良い人は今日はおしまいです。掘り下げたい人だけはココからも読んでください。

それではPHPとは違った部分を振り返ってみましょう。

var Dog = function(name){
    this._name = name;
}

まず、JavaScriptにおいて関数とはオブジェクトですので、上述のように変数に代入することができます。クラスの話に戻りますが上述のコードではコンストラクタを定義しています。プロパティ・メンバについてはthis.メンバ名とすることで生成できます。つまりコンストラクタ関数におけるthisは、インスタンス化したオブジェクト自身という事になります。

「this.メンバ名とすることで」と先ほど書きましたが何故、関数cry()はthisで定義しなかったのでしょうか？実はメンバメソッドをthisで定義することも可能です。

var Dog = function(name){
    this._name = name;
    this.cry   = function(){
        document.write('bow!');
    }
}

さきほどと同じようにインスタンス化して使用することができるにも関わらずなぜ以下のように書いたのでしょうか？

Dog.prototype.cry = function(){
    document.write('bow!');
};

結論から言いますと「無駄なコピーを無くすため」です。実は、newする時のコストは意外と高くつきます。大きなクラスになればなるほどメンバも増えますのでコストも高くなりがちです。そこで登場するのがprototypeです。JavaScriptにおいて全てのオブジェクトはprototypeというプロパティを持っています。そして全てのインスタンス化されたオブジェクトは、コンストラクタ関数のprototypeへの参照を保持しているのです。従って

pochi.cry();

の時にpochiオブジェクトにcry()メソッドがないかJavaScriptインタプリタは探索します。存在しない場合、コンストラクタ関数のcry()メソッドを探索します。もしここでも存在しない場合は更にprototypeを辿り、最終的にはwindowオブジェクトのprototypeまで調べます。この参照の連鎖をprototypeチェーンと言います。

Dog.prototype.cry = function(){
    document.write('bow!');
};

以上のようにコンストラクタ関数にメソッドを登録しておくことにより無駄なコピーをなくしコストを下げられる。それがprototypeです。

次回は継承などについてお話しできたらと思います。