ChromeのデベロッパーツールのTipsやテクニックを紹介するスライド・DevTools Tips and Tricks
Google Chromeのデベロッパーツール のTipsやテクニックを紹介している スライドが結構勉強になったので、 シェアしてみます。英語ですが、画像 があるので概ね理解できるんじゃな いかと思います。
プログラミング
スワイプ操作に対応したイメージスライダーを実装するスクリプト・Swiper
タッチデバイスのスワイプ操作に 対応したイメージスライダーの ご紹介。ありそうであまり見かけ ないので一応備忘録・・・イメー ジスライダーと書きましたが、 基本何でもいけるみたいです。
WordPressの投稿ページに任意の説明文を挿入する
WordPressの記事投稿ページに、任意の説明文を挿入する、というTipsです。3.5から使用する事が出来るようになったフックを利用しますので3.4では使えません。
1枚の画像のみでマウスホバーによるアニメーションを実現させるjQueryプラグイン・spriteOnHover
CSSスプライトのように、1枚の画像 でマウスホバーによる簡易的なアニ メーションを実現させるjQueryのプ ラグイン・spriteOnHoverのご紹介 です。GIFアニメ以外の選択肢として 個人的に少し期待しています。
input要素に長いテキストが入力された際、カーソルの位置を可視化するjQueryプラグイン
なかなか良さそうだったので備忘録。 input要素に入力したテキストが長く なると、位置の把握やテキストの量 が把握できません。これが地味にス トレスな事もあります。これを解決 する、というスクリプトです。
正規表現の構文を色分けして解読しやすくするスクリプト・Regex Colorizer
正規表現コードを色で解読しやすく する、というスクリプト。エラー の有無も分かるので、解読だけで なく、勉強のお供にもいいかもし れませんし、解読速度も速められ そうです。
横長になったtable要素を2列にしてスマフォ等の小さい画面でも閲覧出来るようにするjQueryプラグイン・stacktable.js
横長になったtable要素を2列にして スマフォ等でも閲覧しやすくできる、 というスクリプトです。単純な作り のtableならこれで対応できますね。 複雑なものはちょっと難しそうでは ありますが・・
OSSとしても公開されているシンプルなコード共有サービス・Mystic Paste
よくあるコード共有サイトですが、 OSSとしても公開されていたので 一応備忘録・・現在は非常にシン プルで、基本的にはコードの貼り 付けとダウンロードのみの機能 しかありません。
マウスホイールで画像をズームさせるjQueryプラグイン・jQuery Wheelzoom
マウスホイールで画像を拡大、ドラ ッグ操作によるスクロールが可能な jQueryのプラグイン、jQuery Wheelzoomのご紹介です。シンプルで いいですね。IEは9からの対応だそう なので利用シーンは若干限られそ うで...
簡易的なクイズを作れるjQueryプラグイン・SlickQuiz
簡単なクイズコンテンツを作れる、というjQueryプラグインのご紹介です。クイズの回答次第で分岐する、みたいな細かい設定はできませんが、これはこれでシンプルでいいかも。
数値だけでなく、日付や時刻にも対応したスライダー・jQRangeSlider
D&Dで操作するスライダーを実装するjQuery依存のスクリプトです。数値のものが多いですが、こちらは日付や時刻などにも対応しています。使うシーンは多くは無いかもですけど、便利そうです。
iOSのホーム画面に作るフォルダっぽいやつを実装するjQueryライブラリ・App Folders
iPhoneやiPadのホーム画面に作れるフォルダっぽい動作のコンテンツを実装出来る、というスクリプト。動作はかなり再現出来てる気がします。
コピペやドラッグ&ドロップで画像をアップロードできる共有サービス・Pasteboard
地味に便利そうな気がしたので備忘録。コピペで画像をアップロード、共有も可能なWebサービスです。テキストを書く等の編集機能はありませんが、クロップは一応可能です。
HTMLコードを解析して問題箇所と理由を知らせてくれるブックマークレット・HTML_CodeSniffer
HTMLの構文チェックをその場で できるブックマークレットです。 問題箇所の数や、問題箇所もお しえてくれます。割と便利そう だったのでご紹介してみます。
さまざまな国の郵便番号から市区や州などの地名を取得出来るAPIを公開、提供している・Zippopotamus
日本だけでなく、海外の方もターゲットにしているコンテンツに需要あるかも、と思ったのでメモがてらご紹介します。様々な国の郵便番号を取得できる、というAPIを公開、提供しているWebサイト、Zippopotamusです。勿論、日本も入っています...
スライド時にキャプション等のテキストを遅延表示させる事が出来るイメージスライダー・ayaSlider
キャプション等のテキストがスライド時に遅延して表示させる、という演出が可能なイメージスライダーのご紹介。上手く説明できないのでデモをご覧頂ければと思います。
HTML5によるWebカメラの導入をサポートするjQueryプラグイン・Photobooth.js
HTML5でWebカメラに対応可能なWebサイトを実装するのを手助けしてくれる、というスクリプトのご紹介です。トリミングや色彩変更などの編集も可能のようです。
HTML5のvideoタグを使って背景に動画を設定するjQueryプラグイン・videoBG
HTML5から使えるvideoタグで背景への動画設定を簡単に行えるというスクリプトです。対応していないブラウザには静画が表示されるようになっているみたい。
マウスホバーでツールチップにWikipediaの内容を表示させるjQueryプラグイン・wikiUp
ちょっと需要あるかも？と思ったのでご紹介。Wikipediaの情報をツールチップとして表示させる、というjQueryプラグインです。日本語にも勿論対応しています。ヘルプにも使えるかもしれない。
Twitter Bootstrapのリソースを大量にまとめたサイト・The Big Badass List
人気のフレームワーク、Bootstrapを使う際に役立つリソースを大量に集めているWebサイト・The Big Badass Listのご紹介です。現在でも200近くのリソースがまとめられています。既に利用されている方は覗いてみては。
iOSやAndroid向けのアプリアイコンを作成出来るオンラインのジェネレーター・MakeAppIcon
iPhoneやiPad、Androidなどの ホーム画面に表示されるアプリの アイコンを作成出来る、という ジェネレーターのご紹介です。 高機能なものではなく、画像を 取り込んで作成するシンプルなもの。
tableをレスポンシブWebデザインに対応させるスクリプト・FooTable
table要素をレスポンシブに対応させる、というスクリプトです。他にも同じようなスクリプトは存在しますが実用的ではなかったので紹介してなかったですけどこれはアリな気がします。