a-blog cms Training Camp 2018 Spring でアップルップルのOSSについて紹介しました

a-blog cms Training Camp 2018 Spring に参加されたみなさん、ご参加いただきありがとうございました。そしてお疲れ様でした。今回のイベントはa-blog cmsのクイズ大会や、やりごたえのあるハンズオンなどで満足いただけたのではないかと思っています。

さて、合宿の一日目で発表した「Web制作に使えるアップルップルの新しいOSSの紹介」ですが、スライドの再生中に何枚目かでスクリーンが消えてしまうというトラブルに見舞われ、お見苦しい姿をお見せしてしまい申し訳ありませんでした。
今回発表したスライドはこちらにアップしてますのでよろしければご覧ください。

スライドだけだと上手く伝わらない部分もあると思いますので、今回の記事ではデモ付きでそれぞれのJSについて紹介させていただきます。

FormStorage


下のデモのようにフォームの送信時にフォームの登録内容をローカルストレージに保存し、復元することができます。またフォームを送信しなくても、saveapplyメソッドを使えばいつでもフォームの保存・復元が可能です。

See the Pen FormStorage.js デモ by appleple (@appleple) on CodePen.

ScrollHint


下のデモのように要素が左右にスクロール可能な場合、スクロールを促すためのアイコンを表示してくれます。スクロールした時点でアイコンがふわっと消えてくれるのも特徴です。

See the Pen ScrollHintデモ by appleple (@appleple) on CodePen.

PrettyScroll


サイドメニューなどをスクロールに追従させるためのJavaScriptです。こういったJavaScriptは世の中に数多く公開されているのですが、スマートフォンのような小さい画面幅の時にJSを動かさないなど、非常に細かいオプションが用意されているのが特徴です。

See the Pen Pretty Scroll Example2 by appleple (@appleple) on CodePen.

Hiraku2

hiraku2はデモなしです。下記のリンクを直接スマートフォンで表示して操作感などを見ていただくのがいいと思います。
ページ内リンクへの対応や、オフキャンバスのスクロール時のカクツキを防止、npm対応やアニメーションの美しさなどが前作のhirakuとの違いとなります。


以上です。これらのOSSはひょっとすると将来バージョンのa-blog cmsに組み込まれる可能性もありますので、ぜひ先行して使って見てください。@steelydylanまでご意見、ご要望お待ちしております m(_ _)m


Home
Next entry →