jquery-tutor というプラグインを作りました
おひさしぶりです。riaf です！
今日は、ちょっとした jQuery Plugin を作ってみたのでその紹介です。 ちなみに、まだ Crocos のサービスには使用していないので、ちゃんといろんな環境で動くかどうかはわかりません..。 おかしなところがあったらぜひぜひ Pull Request をおねがいしますね！（見た目をかっこ良くしてくれたりとかも大歓迎です！）
何をするプラグインか
サンプル を見ていただければイッパツなんですが、 ウェブサービスのチュートリアルを、そのサイトを実際に見ながら進めるやつ、あるじゃないですか。
あれがそこそこ汎用的になってるとやりやすいなーと思って作ってみました。 Crocos には Hack Hour という制度があり、先週末の Hack Hour で気分が高まって作ってみた、というレベルの状態ですので、今後ちゃんとプロダクション環境で使えるようにして行きたいと考えています！Hack Hour については、後ほど紹介します。
使い方
jquery-tutor.min.js を読み込んだら
$(function() { $.tutor({ steps: [ { target: '.step-one', message: 'まずは、ここから' }, { target: '.step-two', message: '次は、ここ。' } ] }); });
のようにして、操作の対象になる element を target に指定して、表示するメッセージを設定します。 Next ボタンを押したら次のステップに移動します。
steps に指定できるのは element を指定した object だけではなく、何かする function を指定することもできます。 Deferred Object を return すると、resolve されるまで次のステップは実行されません。
$(function() { $.tutor({ steps: [ function() { alert('Welcome!'); }, function(dfd) { // async FB.api('/me', function(me) { alert(me.name + 'さんですねー！'); dfd.resolve(); }); return dfd.promise(); } ] }); });
ダウンロードなど
GitHub で公開しておりますので、煮るなり焼くなり...！
crocos/jquery-tutor · GitHub
https://github.com/crocos/jquery-tutor
Hack Hour について
毎週金曜日の 2 時間、仕事とは関係がない（もちろん、関係があっても OK。というか、技術的なことならだいたい関係してきますよね）技術の勉強とか、開発とか（たとえば、社内で使っている wiki システムの新機能開発とか）をする時間が設けられています。 わりと最近はみんな忙しくて参加率低めなんですが、ゆるゆると「今日はこんなことやろうかな！」と宣言して終わる頃に「ここまでやったよ！」みたいな共有をして終わります。
この Hack Hour で仕込んでいるネタもいろいろあるので、今後もブログとかで報告していけるといいなーと思ってます。