ぼくのさいきょうツール

/ Text by

だいたい。プラグインやツールを探しまわってる時間て毎回なんなんだろうと思う。今より良いものがあるかもしれない。その「かもしれない」に懸けて膨大な時間を使って探しまわることに、結局いつも使っているものに戻ってくることに、そういうことに、ぼくは疲れたんだよパトラッシュ。

なので1カテゴリにつき1つのルールで、今の「ぼくのさいきょう」を追加&アップデートしつづけていこうかと思う。より良いものが登場したら潔く以前のものは削除して上書きするので、このページはアーカイブではありません。

「ぼくの」と言ってますが、より良いものに心あたりがある場合には推薦していただけると喜びます。それに、みんなのさいきょうも知りたいので類似記事も大歓迎です。

  • NEW (2015.10.29) “meta ヘルパー” を追加しました。
  • NEWUPDATE (2015.10.21) 最新の使えるツール群を追加・更新しました。

ブラウザテスト

meta ヘルパー

Coding

JavaScript

PHP

CSS

画像・アイコン

プロトタイピング

リソース


ブラウザテスト

ブラウザ サポート NEW

Can I use… Support tables for HTML5, CSS3, etc

各ブラウザの HTML5 / CSS / JavaScript API のサポート状況を一覧で確認できる。Mac で Alfred を使っている場合には専用 Workflow をインストールするとアクセスに便利。

レスポンシブ レイアウト UPDATE

Chrome Developer Toools

Chrome の Developer Tools のエミュレーションモードの使い勝手が群を抜いている。画面サイズはもちろん、Portrait ↔︎ Landscape の切り替えのほか、ネットワーク帯域・ジオロケーション・加速度センサの設定までエミュレーション可能となっており、レスポンシブ デザインの確認にとどまらずモバイル全体の使い勝手・快適性のチェックに使える。

Android シミュレータ NEW

Simulate Android apps with the Xamarin Android Player – Xamarin

Android の OS 自体の仮想環境を作成するツール。Jelly Bean (4.1.1) から Lolipop (5.1.0) までの仮想環境を必要なものだけダウンロード & インストール可能なユーザーインターフェースを備える。シミュレートする端末は Nexus 系。上記の Chrome Developer Tools では行えない、バージョン別のブラウザ表示確認を実機なしに手軽に行うことができる。

ハック

Browserhacks

CSS・JavaScriptのバグを利用し、ブラウザごとに異なる実装を行うための、ありとあらゆるハックをまとめたサイト。もっとも豊富でバリエーションに富んだハック方法を擁するブラウザは、もちろんアレですね。

ただし個人的にはブラウザのハックを利用した実装の分岐はオサレでないだけでなく、いつ使用できなくなるか分からない危険性をはらんでいる。よりスマートな実装を行うにはCssUserAgentを利用すべき。


meta ヘルパー

スタートメニュー タイル ジェネレータ NEW

Create a Windows 8.1 tile for your site – Build My Pinned Site – Microsoft Internet Explorer

Windows スタートニュー に登録・表示可能なタイルを1枚の画像から複数パターン生成可能なほか、定義用の browserconfig.xml の書き出しにも対応。タイルへ RSS フィードからのプッシュ配信も組み込むことが可能。Microsoft 謹製なので間違いが無い。

OGP 画像シミュレータ NEW

OGP画像シミュレータ | og:image Simulator

<meta property=”og:image”> へ記述した OGP 画像が Facebook 上でどのように表示されるか一覧で確認可能なツール。Facebook 側のアップデートに比較的早くに対応してくれる点も心強い。


Coding

HTMLテンプレート

HTML5 Boilerplate

HTMLやCSSのリセット処理、.htaccessの設定など、これやっておいた方がいいんじゃね?を網羅したテンプレート。Google, Microsoft, NASA, NIKEといったビッグネームのモダンなサイトでの使用例も多いし合衆国大統領だって使ってる。とにかくアップデートが頻繁で、HTML5サイトを作るなら。のイマが知れるので眺めるだけでも勉強になる。

Compass + SCSSの環境で制作を行っている場合には “compass-h5bp” を使うと幸せになれます。


JavaScript

バリデーリョン チェック NEW

posabsolute/jQuery-Validation-Engine

フォームの入力時にリアルタイムにバリデーション チェックを行いエラーメッセージやその他の表示エフェクトを実行可能な機能を提供する jQuery プラグインが “Validation Engine” です。

実装方法に多少クセがありますが、メソッド群やコールバック関数が充実しており、また入力フォーマットのパターンも正規表現で自作のものを追加可能な柔軟性があります。

ページ内スクロール NEW

Smooth Scroll Plugin

ページ内スクロールの決定版。用意されている option に過不足がなく、要素へのバインドだけでなく $.smoothScroll() として単体で呼ぶことが出来るのも使い勝手が良い。

カスタム ラジオボタン・チェックボックス UPDATE

Checkboxes and radio buttons customization (jQuery and Zepto) plugin

ラジオボタンとチェックボックスをオリジナルのデザインに差し替える。option や callback メソッドが充実していて使いやすい。

カーニング UPDATE

jQuery.Kerning.js

日本語テキストのカーニング処理を JavaScript で行う jQuery プラグイン。カーニング処理の結果、行頭に約物がきてしまうことがあり、禁則処理に対応しきれていない面はあるがカーニングの処理自体は美しい。

カルーゼル UPDATE

Owl Carousel | 2.0.0-beta.2.4

複数枚レイアウト, レスポンシブ, Ajax, Lazy Load, CSS3アニメーション, マウス & タッチジェスチャに対応し、APIも豊富で拡張性が高い。Beta ではあるが Ver.2 になり高速化のほか、前バージョンでは出来なかったループ再生や YouTube ビデオを簡単に埋め込むことが可能な機能も付いた。

タイマー NEW

delayDo | a tiny timer management plugin for jQuery

手前みそではありますが自作のタイマー管理プラグインです。JavaScript で行う繰り返し処理を requestAnimationFrame と performance.now を使ったモダンな実装で行います。

CSS Transitions ハンドラ UPDATE

Velocity.js

CSS Transitions を扱うアニメーション ライブラリとしてこれまでは Transit を推してきましたが、更新が事実上停止している模様です。代替ライブラリとして Velocity.js が優秀で機能もより充実しています。また Transit の利用経験者は分かると思いますが Velocity のメソッド記述方法は Transit と非常に似通っており移行も非常にスムーズに行えるはずです。

カスケーディング グリッド レイアウト

Isotope v2 (beta)

PinterestJAYPEGに見られる、滝が流れ落ちるかのようにコンテンツが配置されるレイアウトを実現するライブラリ。

これに関しては非常に多くのライブラリがあるが、その火付け役とも言えるMasonryを生み出した作者の手によるものが “Isotope” だ。柔軟なフィルタリング機能やリサイズイベントの対応に滑らかなCSS3アニメーションによる演出も付いて、APIも豊富で、文句なし。ただし有償ライセンスなので「さいきょう」と言っておきながらいきなり難だが、無償という縛りで付け加えるなら、Masonryでいいんじゃないか。

画像フィット表示

jQuery Anystretch

指定したブロックエレメントの領域内に、どんなアスペクト比の画像であっても伸縮を行い、フィットするように表示させる。リサイズにも対応。

とても便利だがアップデートする気はあまりないらしく、案件ごとに必要な機能を独自拡張して使用するケースが多い。

画像読み込みイベントハンドラ

imagesLoaded

モダンなウェブサイトのリソースで、多くのウェイトを占めるのは画像だ。従って、何のプログラムをはじめるにしても画像の読み込み状況を監視するのがとても大事。そして、いまのところいちばん使いやすいと思うイベントハンドラが imagesLoaded です。

User Agent 解析

CssUserAgent

User Agentを解析し、<html>にデバイス, ブラウザ名, バージョン, レンダリングエンジンなどの情報を含んだ固有のクラスを追加する。CSSからはもちろんJavaScriptからも参照可能なので、ブラウザごとに異なる実装が必要となった場合に利用している。

HTML5 & CSS3 Feature Detection

Modernizr: the feature detection library for HTML5/CSS3

ブラウザのHTML5, CSS3に関する実装状況を解析し、<html>に固有のCSSクラスを追加するライブラリ。これ自体も強力だが、CssUserAgentとの併用で、ブラウザ判別はほぼ完璧に行うことができる。HTML5 Boilerplateに標準実装されている。

Googleマップビルダー

Google MapBuildr – Google Map Making — Simplified

ページに埋め込むGoogleマップのコードをちゃっちゃか作るにはこれ。Google Maps APIを学ぶモチベーションがなくなってデンジャラス。

イメージ スプライト ムービー

sublimehq/anim_encoder

イメージ スプライト ムービーという名称がはたして正しいのかも良く分かりませんが、Image Sprites · JavaScript · JSON · <canvas>を使用した、ムービーの実装方法としてこれまでに見た中で最も変態度が高い技術。AppleSublime Textのサイトで使用されたことがある。同じムービーをGIFアニメーションに変換した場合と比べ、クオリティ・容量ともアドバンテージがある。JavaScriptによる再生のため、AppleのレギュレーションでAutoPlayが禁止されているMobile Safariにおいてもおかまいなく再生可能。

その唯一無二のエンコーダが公開されているので紹介しておく。ダウンロードすればすぐ使えるというものではなく、Pngcrush, NumPy, OpenCV等様々な依存ライブラリをあらかじめインストールした上で自分でコンパイルを行わなければならない。以前Branchに書いた記事にリンクを張っておく。


PHP

PHP フレームワーク NEW

Toolkit | Kirby

フレームワークの話は深淵なテーマになりがちなので軽く触れる程度で。もともと “Kirby” という名のフレームワークであったが、現在は同名のファイルベース CMS となっている。フレームワーク群は Toolkit の名で残されておりペースは遅いが更新もされている。Codeignitor を入れるほどでもない… と思った時に軽量で扱いやすかったため採用したが、それ以来少なくともフロントエンド程度の実装であれば何かに事欠くことはなかった。

モバイル判別

Mobile Detect – lightweight PHP class for detecting mobile devices (including tablets)

スマートフォン・タブレットの判別を行う軽量なPHPクラス。サーバー側でモバイル端末向けの実装分岐を行いたい場合にだいたいこれを使ってる。


CSS

CSS → SCSS 逆コンパイルツールNEW

css2scss – from css to scss

CSS を逆コンパイルして SCSS を生成するツール。自動的にプレースホルダを作成してくれたり、色やフォントを変数化してくれる機能もあり、過去案件の冗長な CSS の整理に役立つ。

CSS プレイグラウンド NEW

Online CSS3 Code Generator With a Simple Graphical Interface – EnjoyCSS

JavaScript プレイグラウンドである Codepen の CSS 版と言えるのが EnjoyCSS である。優れたオンラインツールによりコードによる描画結果をリアルタイムにブラウザ上で確認できる。主にグラデーションコードやシャドウのコードを生成するのに使用。

三角形ジェネレータ NEW

CSS triangle generator

CSS で三角形を描画するコードを生成するだけのツール。シンプルであるがゆえに使いやすい。

CSS Sprites

Sprite Cow – Generate CSS for sprite sheets

最近はCodeKitをはじめ、自動でCSS Spritesのスタイルソースを吐き出してくれるもっと便利な奴らがいますが。でも自動すぎて逆に分かりにくくなってしまう場合もあるので、手動で書くことも多いです。そんなとき、いちいちグラフィックソフトで座標を調べながら書くと、ぼくみたいなおじさんは目にキます。なのでこれを使う。


画像・アイコン

SVG → Webfont 変換ツール NEW

IcoMoon App – Icon Font, SVG, PDF & PNG Generator

SVG画像をアップロードすることにより、Webfont への変換が可能。ベタ塗りや線画のアイコンやロゴは Webfont にしてしまえば Retina 環境を意識することなく使え、無駄な画像リソースを抑えることができ管理も楽になり、CSS で簡単に色の変更が可能になるなどメリットが非常に大きい。

JPEG 軽量化ツール NEW

JPEGmini

JPEG 画像を独自アルゴリズムによる非可逆圧縮で大幅に軽量化してくれる “JPEGmini” のスタンドアロン ツール。Mac App Store にて販売されている。Retina 環境の普及に伴い高解像度画像の利用が増加傾向にあるため、軽量化の処理は必須と言える。

プレースホルダ UPDATE

Unsplash It

高解像度の感度の良い写真をフリーで提供している Unsplash の画像から、サイズやエフェクトを指定してプレースホルダを生成 & 提供してくれる。

Webfont アイコン

Font Awesome, the iconic font designed for Bootstrap

世の中に数多く溢れるオープンソースのWeb Fontsアイコン。さいきょうを決めるのは難しいのだけど、選ぶとしたらFont Awesome。このサイトで使用しているアイコンもそうです。サイトのモックアップを作るときに便利なので良く使いますが、クオリティが高いのでついついそのまま使ってしまうことも。テイスト含め本当にそのアイコンで良いのか、思考停止しないように気をつけています。デスクトップ用のOpenTypeやTrueTypeフォントの用意もあり。

画像減色ツール

ImageAlpha — image minifier (like JPEG with transparency!)

ある程度マニュアル設定可能な PNG 画像の減色ツールで、これ以上のものって見たことがないんですがそんなもの存在するのですか。CodeKitImageOptimと連携させるとさらに効果的。


プロトタイピング

ワイヤーフレーム NEW

Online Mockup, Wireframe & UI Prototyping Tool · Moqups

ブラウザ上でワイヤーフレームの作成が可能なツール。“ステンシル” と呼ばれるパーツ群が豊富かつ、“テンプレート” としてヘッダーやフッターなど決まった要素群を保存することも可能。ただし、1つを修正すれば他のすべてのテンプレートが更新される、インスタンスのような機能は持っていない点が残念。ホットスポットやページの管理の他、任意の場所へのコメントも可能なためプロトタイピング ツールとしても優秀。


リソース

画像収集NEW

Pixa

多種多様なフォーマットに対応し、画像ファイルからスクリーンショットまで気になったものを気軽に保存し、フォルダーやタグにで整理して閲覧可能。「サイズ」や「カラー」は画像から自動的に取得され整理される。デザイン インスピレーションのストックに便利。

ブックマーク NEW

Stache

Mac / iOS デバイスに対応したブックマーク アプリ。保存したリンク先を自動でサムネイル化してくれるだけでなく、Mac 版を使えば、ブックマークしたページのウェブアーカイブ(非同期読み込み部分は除く)を保存してくれるためサイト閉鎖後にも閲覧が可能。そのほか、スクリーンショットも同時に撮影してくれる。また各ブックマークへのタグ付けやメモも当然のように可能。iOS アプリでブックマークした場合には URL とサムネイルのみ保存される。

画面サイズ NEW

SCREEN SIZES

スマートフォン・タブレット・PC の代表的な端末のディスプレイサイズ・解像度・密度・アスペクト比の一覧。

iOS UI Animation

CAPPTIVATE.co | iOS UI Animations

よくあるUIギャラリーと一線を画すのは、UI “アニメーション” ギャラリーであること。マウスオーバーすることで、録画したUIアニメーションをその場で見ることが出来る。