はじめに（jsdo.itとは）

「jsdo.it」は、サイコロ給料でお馴染みの面白法人カヤックが運営しているJavaScript、HTML5系のWebエディタであり、そこで開発したコードを共有するためのサービスです。Web上で手軽に利用できるので、ちょっとしたサンプルを作る時とかすごく便利です。類似のサービスとして、JS Bin、JSFiddle、CODEPENなどがあります。

以下に「アクセスの多かった上位10コード」と「おまけとして自分が選らんだ面白そうな5コード」をちょっとした解説と共に紹介します。

1. Bootstrapのアコーディオン（collapse）の開閉時にアイコンを変更させる

Bootstrapにアコーディオンメニューを実装するcollapseという機能があります。メニューが開いているのか、閉じているのか瞬時にわかるように、メニューの開閉に合わせてアイコンを変更させるスクリプトの実装例です。これが最もアクセスされていることを知り、かなり意外でした。

2. 現在位置取得＆表示アプリ

HTML5のGeolocation APIとGoogle Maps APIの逆ジオコーディングを使って、現在地の位置情報を取得し、地図に表示するスクリプトの実装例です。さらにフォームに住所を入力して、地図を表示させる機能も実装しています。

Google Maps APIについては当ブログの以下の記事に書いています。

• Google Maps JS APIを使って「住所から緯度経度を取得し地図を検索する」機能を実装する方法

3. JSクリックカウンター v2

クロージャを使った単なるクリックカウンターですね。やっていることはすごく単純です。某ファミコンを思わせるデザインが受けたんでしょうかね。カウンター部分のデジタル風な数字はDS-DigitalというWebフォントを使っています。

4. 画面リサイズ時にアスペクト比を維持したまま画像サイズを変更させる方法

青一色の画像を使ってしまったのでわかりにくいと思いますが、画面サイズが小さくなった時にアスペクト比を維持しながら画像サイズを縮小させるようなスクリプトの実装例です。リキッドなレンスポンシブ対応に使えると思います。ただ実はcssを使うと数行で実装できてしまうことが後ほど判明してショックを受けたことを覚えています…

5. HTML5 Audio Player ver.2.0

音楽をやっていたということもあり、Web上で音楽を扱いたいという野望が昔からありました。HTML5のAudio要素の出現はなかなか衝撃的でした。そんなAudio要素を試すために簡易的なミュージックプレイヤーを作ってみました。再生される曲は自分の作った曲になります。

このミュージックプレイヤーの実装について当ブログで詳しく書いています。

• HTML5のaudio要素とJavaScriptで作るオーディオプレイヤー
• HTML5 Audio Playerを改良しました: ボリューム機能追加、再生ボタン機能拡張など

6. cssで千鳥格子

CSSオンリーで千鳥格子を作ることにチャレンジしたものです。CSS3には様々な模様を作るためのプロパティが豊富に揃っています。千鳥格子は一見複雑な模様に見えますが、分解してみると正方形とストライプでできています。細かいステップに分けて見ていくと、理解もしやくなります。

千鳥格子の実装について当ブログで詳しく書いています。

• 6ステップで完成！CSS3でお洒落な「千鳥格子」を作る方法

7. パスワードフォームのチェック

パスワードの設定時に必要だと思われるパスワード入力フォーム用のバリデーションの実装例です。入力チェック、文字数チェック、同一性チェック、パスワードの伏字解除などの機能を実装しています。

8. 画面のリサイズイベントを取得して、PC/スマホ用に変化するメニュー

「見出し」と「コンテンツ」を持った画面デザインのスマホ対応例となります。PCビューではどちらも表示させていますが、スマホビューでは「見出し」のみ表示させ、「見出し」をタッチするたびに「コンテンツ」部分を表示/非表示させるようにしています。レスポンシブデザインでよく使うテクニックとなります。

9. CSS Filter Effectsで画像にエフェクトをかけるデモ

CSSには画像に様々なエフェクトをかけることができるFilterプロパティというものがあります。そのFilterプロパティを使ってアップロードした画像にエフェクトをかけるものを作りました。エフェクトをかけた状態でファイルを出力できないのが残念です。

Filterエフェクトの実装について当ブログで詳しく書いています。

• CSS filterプロパティとFilter Effectsの話

10. 「バルス」と唱えると画面が崩壊するJavaScriptコード

これを書く前にコナミコマンドを実装するスクリプトを書きましたが、それを応用したものとなります。フォームに「bals」と入力すると画面が崩壊するようになっています。「bals」とは映画『天空の城ラピュタ』でお馴染みの崩壊の呪文です。画面を崩壊させる処理はmeltdown3.jsというライブラリを使って実装しています。

おまけ1. chmod アクセス権の8進数変換機能

LINUXのコマンドにchmodというファイルやディレクトリのアクセス権を指定するものがあります。アクセス権の指定方法は2通りあり、rwxで指定するか、3桁の8進数で指定します。ここで作ったものは、一方の指定方法をもう一方の指定方法に変換するものとなります。ちょっと使いにくいので入力部分をもう少し使いやすくしたいと考えています。

おまけ2. 複数の画像ファイルをドラッグ&ドロップで画面に表示

ドラッグ＆ドロップした画像ファイルをHTML5のFile APIを使って取得し、画面にファイル名と容量と一緒に表示させる機能の実装例です。ドラッグ＆ドロップは、Drag & Drop APIによるイベントを取得することで実装することができます。複数のファイルを同時にドラッグ＆ドロップすることにも対応しています。

おまけ3. CanvasとFile APIを使って画像を取得、表示、出力させる処理

HTML5のFile APIを使って読み込んだ画像をCanvasのdrawImageメソッドを使ってCanvasに描画し、さらにCanvasのtoDataURLメソッドを使って再度画像に変換し直しています。本来はCanvasに描画したら、そこでフィルターをかけた後に、再度画像として出力するようなものを作りたかったのですが、そこまではできていません。

おまけ4. 非同期で「FBいいね数」「ツイート数」「はてブ数」取得

フォームに入力したURLのシェア数（Facebookいいね数、はてなブックマーク数、Twitterリツイート数）を取得する機能の実装例です。それぞれのサービスのAPI経由でシェア数を取得するのに、jQuery.Deferredを使うことで、並列で処理させるようにして高速を実現しています。

おまけ5. フォームのテキストの値を変更した時だけ送信ボタンを押せるようにするスクリプト

登録情報の変更画面などに使えそうな機能です。初期状態で登録情報がフォームに入力された状態となっていたとして、内容を変更した時のみ「変更」ボタンを押せるようにする機能の実装例です。コードはだいぶ多重ループになってしまっています。jQueryのserializeメソッドを使うと違う方法でもっと楽に実装ができるかもと思ったりしています。

まとめ

長々と紹介してきましたが、参考になりそうなものがありましたら、ぜひ参考にしてみてください。今回紹介したコード以外にもjsdo.it上に自分の書いたコードが100近くあるので、よろしかったら見てみてください。

• maechabin codes – jsdo.it