MaedaCSSHTML5JavaScriptjQueryUI/UXwebデザイン「jsdo.it」というWeb上でコードを書いて共有するサービスがあります。自分はよくUIのサンプルなどを試すのに使ったりしています。気づいたら自分がjsdo.it内で書いたコードが100を超えていました。これまでに「アクセスの多かった上位10コード」と、「おまけとして自分が選らんだ面白そうな5コード」を紹介したいと思います。お試しで書いていることが多いので、あんまり洗練されていかなったりしますが、その辺は多めに見ていただければと思います。はじめに(jsdo.itとは)「jsdo.it」は、サイコロ給料でお馴染みの面白法人カヤックが運営しているJavaScript、HTML5系のWebエディタであり、そこで開発したコードを共有するためのサービスです。Web上で手軽に利用できるので、ちょっとしたサンプルを作る時とかすごく便利です。Bin、JSFiddle、CODEPENなどがあります。以下に「アクセスの多かった上位10コード」と「おまけとして自分が選らんだ面白そうな5コード」をちょっとした解説と共に紹介します。Bootstrapのアコーディオン(collapse)の開閉時にアイコンを変更させるBootstrapにアコーディオンメニューを実装するcollapseという機能があります。メニューが開いているのか、閉じているのか瞬時にわかるように、メニューの開閉に合わせてアイコンを変更させるスクリプトの実装例です。これが最もアクセスされていることを知り、かなり意外でした。APIの逆ジオコーディングを使って、現在地の位置情報を取得し、地図に表示するスクリプトの実装例です。フォームに住所を入力して、地図を表示させる機能も実装しています。APIについては当ブログの以下の記事に書いています。v2クロージャを使った単なるクリックカウンターですね。やっていることはすごく単純です。某ファミコンを思わせるデザインが受けたんでしょうかね。カウンター部分のデジタル風な数字はDS-DigitalというWebフォントを使っています。青一色の画像を使ってしまったのでわかりにくいと思いますが、画面サイズが小さくなった時にアスペクト比を維持しながら画像サイズを縮小させるようなスクリプトの実装例です。リキッドなレンスポンシブ対応に使えると思います。ver.2.0音楽をやっていたということもあり、Web上で音楽を扱いたいという野望が昔からありました。HTML5のAudio要素の出現はなかなか衝撃的でした。そんなAudio要素を試すために簡易的なミュージックプレイヤーを作ってみました。再生される曲は自分の作った曲になります。このミュージックプレイヤーの実装について当ブログで詳しく書いています。cssで千鳥格子CSSオンリーで千鳥格子を作ることにチャレンジしたものです。CSS3には様々な模様を作るためのプロパティが豊富に揃っています。千鳥格子は一見複雑な模様に見えますが、分解してみると正方形とストライプでできています。細かいステップに分けて見ていくと、理解もしやくなります。千鳥格子の実装について当ブログで詳しく書いています。パスワードフォームのチェックパスワードの設定時に必要だと思われるパスワード入力フォーム用のバリデーションの実装例です。入力チェック、文字数チェック、同一性チェック、パスワードの伏字解除などの機能を実装しています。「見出し」と「コンテンツ」を持った画面デザインのスマホ対応例となります。PCビューではどちらも表示させていますが、スマホビューでは「見出し」のみ表示させ、「見出し」をタッチするたびに「コンテンツ」部分を表示/非表示させるようにしています。レスポンシブデザインでよく使うテクニックとなります。Effectsで画像にエフェクトをかけるデモCSSには画像に様々なエフェクトをかけることができるFilterプロパティというものがあります。そのFilterプロパティを使ってアップロードした画像にエフェクトをかけるものを作りました。エフェクトをかけた状態でファイルを出力できないのが残念です。Filterエフェクトの実装について当ブログで詳しく書いています。「バルス」と唱えると画面が崩壊するJavaScriptコードこれを書く前にコナミコマンドを実装するスクリプトを書きましたが、それを応用したものとなります。フォームに「bals」と入力すると画面が崩壊するようになっています。「bals」とは映画『天空の城ラピュタ』でお馴染みの崩壊の呪文です。画面を崩壊させる処理はmeltdown3.jsというライブラリを使って実装しています。アクセス権の8進数変換機能LINUXのコマンドにchmodというファイルやディレクトリのアクセス権を指定するものがあります。アクセス権の指定方法は2通りあり、rwxで指定するか、3桁の8進数で指定します。ここで作ったものは、一方の指定方法をもう一方の指定方法に変換するものとなります。使いにくいので入力部分をもう少し使いやすくしたいと考えています。APIを使って取得し、画面にファイル名と容量と一緒に表示させる機能の実装例です。APIによるイベントを取得することで実装することができます。複数のファイルを同時にドラッグ&ドロップすることにも対応しています。APIを使って読み込んだ画像をCanvasのdrawImageメソッドを使ってCanvasに描画し、さらにCanvasのtoDataURLメソッドを使って再度画像に変換し直しています。本来はCanvasに描画したら、そこでフィルターをかけた後に、再度画像として出力するようなものを作りたかったのですが、そこまではできていません。非同期で「FBいいね数」「ツイート数」「はてブ数」取得フォームに入力したURLのシェア数(Facebookいいね数、はてなブックマーク数、Twitterリツイート数)を取得する機能の実装例です。それぞれのサービスのAPI経由でシェア数を取得するのに、jQuery.Deferredを使うことで、並列で処理させるようにして高速を実現しています。フォームのテキストの値を変更した時だけ送信ボタンを押せるようにするスクリプト登録情報の変更画面などに使えそうな機能です。初期状態で登録情報がフォームに入力された状態となっていたとして、内容を変更した時のみ「変更」ボタンを押せるようにする機能の実装例です。コードはだいぶ多重ループになってしまっています。jQueryのserializeメソッドを使うと違う方法でもっと楽に実装ができるかもと思ったりしています。まとめ長々と紹介してきましたが、参考になりそうなものがありましたら、ぜひ参考にしてみてください。今回紹介したコード以外にもjsdo.it上に自分の書いたコードが100近くあるので、よろしかったら見てみてください。maechabinホーム目次トップ。