<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Sammy.js &#8211; Mach3.laBlog</title>
	<atom:link href="https://blog.mach3.jp/tag/sammy-js/feed" rel="self" type="application/rss+xml" />
	<link>https://blog.mach3.jp</link>
	<description></description>
	<lastBuildDate>Wed, 22 Sep 2010 02:25:21 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9</generator>
	<item>
		<title>Sammy.jsでAjaxコンテンツのセッションを操る</title>
		<link>https://blog.mach3.jp/2010/09/22/sammy-js.html</link>
		
		<dc:creator><![CDATA[mach3]]></dc:creator>
		<pubDate>Wed, 22 Sep 2010 02:25:21 +0000</pubDate>
				<category><![CDATA[Laboratory]]></category>
		<category><![CDATA[Ajax]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Plugin]]></category>
		<category><![CDATA[Sammy.js]]></category>
		<guid isPermaLink="false">http://blog.mach3.jp/?p=735</guid>

					<description><![CDATA[この記事の情報は古くなっています。 Sammy.js はAPIも一新されてより強力なフレームワークになっています。 公式ドキュメントをご参照ください。 ページを移動させずにサクサクと展開していくのがAjaxコンテンツの魅 [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="caution">
  この記事の情報は古くなっています。<br /> <a href="http://sammyjs.org/">Sammy.js</a> はAPIも一新されてより強力なフレームワークになっています。<br /> <a href="http://sammyjs.org/docs">公式ドキュメント</a>をご参照ください。
</p>



<p>ページを移動させずにサクサクと展開していくのがAjaxコンテンツの魅力ですが、<br />
移動しないが故にURLとしてセッションを保持出来ないという弱点があります。<br />
オーソドックスな解決法は「location.hash」を用いる物ですが、<br />
その処理を簡単にしてくれるのがSammy.jsです。</p>



<figure class="wp-block-image"><img decoding="async" src="http://lh6.ggpht.com/_JJkNs5Ixl70/TJjDmzzS06I/AAAAAAAABCw/rriMLBnT_6c/201009212338.png" alt="Sammy.js"/></figure>



<p></p>



<span id="more-735"></span>



<h2 class="wp-block-heading">おおざっぱな話</h2>



<h3 class="wp-block-heading">Sammy.js</h3>



<p><a href="http://code.quirkey.com/sammy/">Sammy :: Quirkey.com</a></p>



<p>Sammy.jsは、location.hashを用いたルーティングを<br />
効率化してくれるjQueryプラグインです。</p>



<h3 class="wp-block-heading">location.hashとは</h3>



<p>通常ページ内リンク等に使用される、<br />
URL末尾の<em>#</em>に続く文字列の事。</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>http://www.example.com/hoge.html<em>#foobar</em></p>
</blockquote>



<h2 class="wp-block-heading">簡単な使い方</h2>



<p>先ず、<em>$.sammy()</em>を使用してルーティングを定義します。<br />
myRouteにはSammyオブジェクトが渡されます。<br />
※あとで初期化を行う為に格納しておきます</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript"><span class="hljs-keyword">var</span> myRoute = $.sammy(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
    <span class="hljs-keyword">this</span>.get(<span class="hljs-string">"#/home"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
        <span class="hljs-comment">// #/homeにアクセスした時の処理</span>
    });
    <span class="hljs-keyword">this</span>.get(<span class="hljs-string">"#/profile"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
        <span class="hljs-comment">// #/profileにアクセスした時の処理</span>
    });
    <span class="hljs-keyword">this</span>.get(<span class="hljs-string">""</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
        <span class="hljs-comment">// location.hashが空だった時の処理</span>
    });
});
</code></span></pre>


<p>定義する為に用意された<em>get</em>メソッドには、<br />
第一引数に<em>location.hashの値</em>、<br />
第二引数に<em>実行したい処理（function）</em>を渡します。<br />
※get以外にもpost等がありますが、公式に任せて割愛</p>



<p>ルーティングを初期化する為には、<em>run</em>メソッドを呼びます。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript">$(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
    myRoute.run();
});
</code></span></pre>


<p>とても簡単ですね。</p>



<h2 class="wp-block-heading">正規表現を使って一括管理</h2>



<p>getメソッドの第一引数は、文字列の他に正規表現も渡せます。<br />
これを使用して一つのfunctionで一括管理する事も出来ますね。</p>


<pre class="wp-block-code"><span><code class="hljs language-javascript"><span class="hljs-keyword">this</span>.get( <span class="hljs-regexp">/^#\/&#91;a-zA-Z0-9_-]+$/</span> , <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
    <span class="hljs-keyword">switch</span>( <span class="hljs-keyword">this</span>.path ){
        <span class="hljs-keyword">case</span> <span class="hljs-string">"#/home"</span> :
            <span class="hljs-comment">// do something</span>
            <span class="hljs-keyword">break</span>;
        <span class="hljs-keyword">case</span> <span class="hljs-string">"#/profile"</span> :
            <span class="hljs-comment">// do something</span>
            <span class="hljs-keyword">break</span>;
        <span class="hljs-keyword">default</span>:
            <span class="hljs-keyword">this</span>.redirect(<span class="hljs-string">"#/home"</span>);
            <span class="hljs-keyword">break</span>;
    }
});
</code></span></pre>


<p>さりげなく使ってる、<em>this.path</em>と<em>this.redirect()</em>ですが、<br />
function内のスコープはSammyオブジェクトになっていて、<br />
色々な便利な機能が使えます。</p>



<dl>
<dt>path</dt>
<dd>location.hashの値が格納されています</dd>
<dt>redirect()</dt>
<dd>文字通り、別のlocation.hashにリダイレクトします</dd>
</dl>



<p>他にも色々ありますが、詳しくは公式のドキュメントをご参照ください。<br />
<a href="http://code.quirkey.com/sammy/docs/index.html">Sammy &#8211; Documentation &#8211; API :: Quirkey.com</a></p>



<h2 class="wp-block-heading">デモページ</h2>



<p class="caution">
    デモページは閉鎖しています。
</p>



<p>内容はやや複雑化してますが、<br />
基本的にはそれぞれのリンクに相応するファイルをAjaxで読み込んでいるだけです。<br />
ファイルが見つからない場合はconfirmでHomeにリダイレクトするか、<br />
history.back()させるかを選択させています。</p>



<h2 class="wp-block-heading">まとめ</h2>



<p>postメソッド等を利用することでAjaxで展開するカートなんかが作れるようで、<br />
チュートリアルも公式に掲載されていました。<br />
<a href="http://code.quirkey.com/sammy/tutorials/index.html">Sammy &#8211; Tutorials :: Quirkey.com</a></p>



<p>似たような働きをするライブラリにFlash向けのswfaddressなんていうのもありましたね。<br />
Sammy.jsはjQueryプラグインということもあって導入しやすく、期待大です。<br />
色々試してみよう…</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
