・
　・
　・

…なんて、ちょっとAppleのCMみたいな切り出しをしてみました。笑
さて、昨年8月にベータ版として公開していたjQueryプラグイン「jQuery AutoSmoothController.js」をこの度レギュラーバージョン（正式版）へアップデート致しました。

これに先立ち、本ドキュメンテーション、デモも一新しましたので改めてご覧下さい。

2015/2/27　更新

jQuery AutoSmoothController.js概要

ブログでの使用に特化したページスムーズスクロールプラグインです。
どんなものかは、このブログの右側（初期位置から動かしていなければですが！)…この小さなパーツがAutoSmoothControllerプラグインの追加インターフェースです。

これまでもページ内スムーズスクロールプラグインは多々ありましたが、どれもWebサイト向けのもので、ブログでの使用ではかゆいところに手が届かないものがほとんどでした。

jQuery AutoSmoothControllerプラグインは「ページ内に新たなインターフェースを追加する」という方法で、アンカーリンクを視覚化し、同時に閲覧者が現在ページ内のどのあたりを閲覧しているかも直感的に理解できるようになります。

また、インターフェースを備えることで、それぞれのアンカーリンクに特別な意味を持たせることができます。
それぞれのアンカーに対応したTipsを表示させることができ、あなたが書いた文章の意味の切れ目を示すことはもちろん、「是非とも目を留めてほしい項目」をピックアップすることだって簡単です。

jQuery AutoSmoothControllerプラグインの特筆するポイントは

• 手軽で高機能
• 閲覧者一人一人に「自分だけのインターフェース環境」を提供する
• カスタマイズも簡単

様々なリッチな機能を搭載し、閲覧者のユーザビリティの向上と共に、そのほとんどを自動的に出力するため記述の負担はほとんどありません。ブログという書き方も十人十色なプラットフォーム上での使用を想定している為、様々な条件下でも適切に対応可能な豊富なオプションを用意しています。
また、アンカーを一つも設置しなかった場合は「移動可能なトップへ戻るボタン」として機能します。

ダウンロードは下記ページより。

GitHub – AutoSmoothController.js
https://github.com/Manabu-Fukai/AutoSmoothController.js

jQuery AutoSmoothControllerの特長

• どこでもいくつでも手軽にアンカーを設置可能
• 設置したアンカーはすべてコントローラーに並び、どんなタイミングでも移動できる
• コントローラーのドラッグ移動＋移動位置記憶（※モバイル対応）
• アンカーを設置しなければ「移動可能なページ先頭へ」のボタンとして機能
• アンカーのTipsをコントローラーへ表示
• Tipsへの表示はアンカーから自動取得orアンカーごとに任意の文字へカスタマイズ可
• アクティブチェンジ（※ページ内の現在位置を表示）
• デザインをワンタッチで変更可能
• 豊富なオプションによって、様々なカスタマイズが可能

…さて、せっかく切り出しをあんな感じにしてみたので、いっそこのまま通してしまいましょうか。笑
それでは、少し長いですが最後までお付き合い下さい。

どこでもいくつでも手軽にアンカーを設置可能

例えば、「記事内の任意の場所へスムーズスクロールさせたい」といった時、通常であればそのポイント毎にidを付与し、そこに対するリンクも一緒に設置する必要がありました。
idはページ内に一つしか使えない為、ポイントを指定する度にユニークなidを考え、指定する必要があります。 また、大抵の場合「a href=”#”」をアンカーとしたスクリプトを使用する為、融通がきかなかったり、他のスクリプトとのバッティングも少なくありませんでした。

『jQuery AutoSmoothController』では、たった一つの「class」を付与すれば、同一のclassを持つすべての要素がアンカーになり、自動的にコントローラーにリンクが設定されます。
もうアンカーの名称決めに迷う必要もありません。

さらに、コントローラーにはアンカーのタイトルや説明を表示させることができ、「意味の切れ目」や「是非とも目を留めてほしい項目」をピックアップすることが可能です。

設置したアンカーはすべてコントローラーに並び、どんなタイミングでも移動できる

コントローラーには、設置したアンカーの数だけリンクが並びます。それぞれのリンクをクリックするといつでもどこからでも対応するアンカーへ移動できます。

使用する際にあなたが行うのは、アンカーの設置だけです。あとはすべて自動的に行ってくれます。

コントローラーのドラッグ移動＋移動位置記憶（※モバイル対応）

インターフェースの使い勝手というのは個人差が大きいものです。世代によっても大きく違いますね？
例えば僕は右利きなので、左寄せのインターフェースは使い勝手が悪く感じます。でも、スマートフォンの時は左手持ちが多いので、逆に右寄せのインターフェースは使い勝手が悪く感じます。

そこでAutoSmoothControllerは「コントローラーを『自分の好きな位置へ』『いつでも』移動させられる」ようにしました。
移動させた位置はブラウザに記憶され、ページを移動したり次回閲覧時もその位置で留まってくれるので、毎回使いやすい位置へ移動させる必要もありません。いつでも、自分にとって気持ちの良い場所にいてくれます。

つまり、AutoSmoothControllerは閲覧者一人一人に「自分だけのインターフェース環境」を提供することができるのです。

もし、画面サイズからはみ出る位置で記憶させてしまったとしても心配ありません。
ページをロードした時に、コントローラーが画面外へはみ出した場合は、自動的に位置を再計算して、画面の端にひょっこりと現れてくれます。

アンカーを設置しなければ「移動可能なページ先頭へ」のリンクとして機能

ページによってはアンカーが必要ない時もあります。あるいは設置できないなど……でも、ページ先頭へのリンクは欲しい…
そんな時、また別のスクリプトを用意するなんてナンセンス。だって同じ処理を別々のスクリプトで用意するんですよ？非効率以外の何ものでもありません。

AutoSmoothControllerなら、そんな時、自動的に自分の形態を変化させてくれます。
このプラグイン一つでサイト内の「移動」という行為をすべてまかなってくれます。

もちろん、ドラッグ可能なので「閲覧者が好きな位置へ置ける」ページ先頭へのリンクとなってくれます。

アンカーのTipsをコントローラーへ表示

ただアンカーへのリンクが並んでいるだけだと、いまいちピンときません。人にはやっぱり動機が必要です。
コントローラーの各リンクがそれぞれ何を意味しているのか、Tipsを表示させることで伝えることができます。

また、このTipsを表示するという行為そのものが、そのアンカーに特別な意味を持たせます。あなたが是非とも目を留めてほしいポイントー閲覧者に伝えたい想い、それをかたちにするものです。

Tipsへの表示はアンカーから自動取得orアンカーごとに任意の文字へカスタマイズ可

とはいえ、毎回Tipsの内容を書き込むのは面倒です。私も書いていて非常に面倒に感じました。ですから自動で取得させることにしました。

AutoSmoothControllerはアンカーを設置すると、その要素内のテキストを自動で抽出してTipsへ表示してくれます。

これを「autoStrings」機能といいます。 このautoStringsの優れている点は、

1. タグが混在した場合でも、タグ「のみ」を除去
2. オプションで定めた最大文字数を超えた場合、最大文字数分のみを表示し、末尾に「…」を自動追加。
3. アンカーにdata属性を追加すれば、そのアンカーのみTips表示をdata属性のテキストに差し替え

特筆すべき点は、1.のタグ自動除去です。
アンカーの設置の仕方にもよりますが、そのセクションを囲む親要素にアンカーを設置した場合、

  <div class="section">/*「.section」がアンカー*/
    <h2>セクションタイトル</h2>
    <p>本文テキスト</p>
    <p>本文テキスト</p>
  </div>

普通に取得すると、アンカー要素の中身はh2要素とp要素が2つなので取得した内容にタグが必ず含まれます。
これを出力すると

• <h2>セクションタイトル</…　/*タグの内容まで出力（初期設定では最大文字数15文字）*/
• 　もしくは
• &lt;h2&gt;セクション…　/*サニタイズされての出力*/

このようにほとんどの方にとって、意味の無い（分からない）情報が出力されてしまいます。

しかし、autoStringsは賢い！
取得した内容にタグが含まれていれば、そのタグ「だけ」を綺麗に省いてテキストのみへと変換します。

セクションタイトル本文テキスト…　/*タグを抜いて最大文字数分出力*/

このように途中にタグが入っていようと関係ありません。 Tipsに表示されるのは、常に純粋なテキストのみです。

  <h2 class="section">セクションタイトル<span>サブコピー</span></h2>

  /*Tipsへの出力*/
  セクションタイトルサブコピー

そしてもう一点、3.のポイント。こちらは後述のデモページでも詳しく説明していますが
autoStringsはdata属性の内容を優先させます。

そのため、アンカーリンクのTips表示を一箇所だけ（もしくは複数）内容を差し替えたいという時にはdata-asc=”任意のテキスト”をアンカーに追加して下さい。

SEO上アンカーをそのタイトルにしているが、Tipsへの表示はもう少し簡潔なものやインパクトを重視したものにしたい、といった時にも効果的です。

AutoSmoothControllerはアンカーに付与されたdata-asc属性のテキストを最優先でTipsへ表示させます。

アクティブチェンジ

コントローラーには現在いるセクション位置が表示される為「今ページ内のどの部分にいるか」も視覚的に理解しやすくなり、見たいセクションを探すのも容易になります。

先が見えないものは誰だって不安になったり、余計な気疲れをしてしまうものです。現在どの位置か分かることで、閲覧者の精神的な疲労や負担を軽減してくれます。

デザインをワンタッチで変更可能

「このページだけ、少しデザインを変えたい」そんな時だってあります。 AutoSmoothControllerはそのビジュアルをほぼcssのみで形成しています。そのため、cssを変更するだけで簡単にビジュアルを変化させることができます。

「customClass」というオプションを任意のページの際のみ追加すればその他のページでは普段の表示を、そのページのみ特別な表示、といったように切り替えることができます。

もちろん、画像などを加えたり変更すればオリジナリティ溢れるコントローラーになるでしょう。

元々のデザインなんて無視して構いません。「自分なりにカスタマイズしてほしい」という考えもあり。これだけシンプルで簡素なものにしています。
形状だって、今の縦型にこだわる必要はありません。横型にしてもなかなか新鮮ですよ。もちろん、すべての機能は正常に動作します。（※検証済み。stickオプションのみ吸着位置に注意）

豊富なオプションによって、様々なカスタマイズが可能

『jQuery AutoSmoothController』は豊富なオプションによって、様々なカスタマイズが可能です。 ページのどの部分にコントローラーを設置するかも自由に指定でき、初期位置からドラッグで自由に移動させることができます。 ビジュアルもcssのみでスタイリングしている為、手軽に自由自在に変更可能です。 あなたのブログやサイトのデザインにもっともフィットした状態にカスタマイズすることができます。

Ex. 特定の要素にコントローラーを吸着 また、

これらにより記事閲覧時の利便性を大きく高めてくれます。

ダウンロード&ドキュメンテーション

興味を持っていただけたなら、ぜひドキュメンテーションやデモページも合わせてご覧下さい。

ドキュメンテーションではAutoSmoothControllerの導入方法や基本的な使い方からちょっとした応用までスタートアップとちょっとしたカスタマイズについて書いています。

デモページはドキュメンテーションを読んだ後の方がイメージがつきやすいですが、豊富なオプションをリアルタイムに切り替えながらそれぞれがどう働くのかを確認できるようになっています。

• Documentation
• Demo
• Download