ウェブ制作必携ブックマークレットまとめ

ブックマークレットとは?

ブックマークレット (Bookmarklet) とは、JavaScriptで記述されたプログラムのことです。
ブラウザのブックマークに登録して利用します。JavaScriptが利用できるブラウザであれば、WindowsやMac・IEやFirefoxやOperaやSafariやGoogle Chromeなど、あらゆる環境で利用ができます。
実に色々なブックマークレットがありますが、その中でウェブ制作などで活用できる便利なスクリプトをご紹介します。


XRAY

CSSレイアウト情報をレイヤー表示
01

SpriteMe

CSSの背景画像を解析
02

グリッドレイアウトブックマークレット

背景画像が格子状のグリッド表示になります。body要素に対して設定するので上物で大きい背景を敷いていると見えない場合もあります。
03

Rule

サイトにルーラー(定規)やガイド線を出します。
04

wg:CSS Bookmarklet – Show divs and spans

ページのdiv要素とspan要素を点線にして可視化。カラム割の解析とかに超便利。
05

CSSを無効化するブックマークレット・改

CSSの適用をオン・オフ切替。
06

ブラウザのウインドウサイズを変えるブックマークレット

ウィンドウの幅と高さを変更するブックマークレット。

Check Password

アスタリスクで隠されたパスワードを確認できます。自分の入力した文字を確認するとき便利です。
08

ページ編集モード

表示中のページを編集可能にします。
09

参考・オススメサイト

Snow Leopard + GyazMailで送信メールが名称未設定ファイルとして扱われてしまう問題

gyazmail

Snow Leopard上でGyazMailにも不具合があるようです。送信したメールが名称未設定ファイルとして扱われてしまう問題。

テキストエディットで開くと文字化けする場合がありますが、別なエディタで開くと正常に見られる場合もあります。文字コードの問題?

改善策

あれこれ試した結果、メールの文末に改行を挿入すると改善されました。添付ファイルを入れても名称未設定ファイルは作成されないようです。

署名を設定している場合、署名の下に1行改行を入れておくだけでOKです。
いずれにしても、改善版までのつなぎとして。

(Snow) Leopardで古いバージョンのSafariを使用する

だいぶ浸透してきたSafari4ですが、web制作においてターゲットブラウザをSafari3も入れるケースも少なくありません。
純正Safariは新しいバージョンで上書きされてしまうので、古いバージョンを利用したいときは「Multi-Safari」を利用します。

Multi-Safariとは

Multi-Safariとは、MacOS X上で、過去バージョンのSafariをマルチに同時起動できるアプリケーションです。純正ではない亜種です。

対応OS・バージョン

1.x系・2.x系・3.x系の細かいバージョンがあります。それぞれのOS対応状況は一覧表があります。

table

Leopard(Snow Leopard)で2.x系を利用するには?

新しいMacOS Xで2.x系を起動するにはRosettaが必要です。

ダウンロード先

multi-safari

同時起動が可能ですが、設定ファイルがシステムフォルダに入るので、スタンドアローン版ではありません。3あたりを入れておくと何かと便利かもしれません。

safari

DreamweaverでHTML5のタグを簡単に扱う

各所で取り上げられる”HTML5″ですが、リリース時期的なアレでDreamweaverではタグのコードヒントや自動補完が実装されていません。これをExtentionManegerで使用できるmxpパッケージを作成された方がいました。

機能

  • HTML5のタグと属性がコードヒントに現れる。
  • 新規作成やページプロパティで、HTML5が選択可能になる。選択するとドキュメントタイプが<!DOCTYPE html>に変換される。

登録タグ

  • video
  • section
  • time
  • rt
  • ruby
  • progress
  • rp
  • output
  • nav
  • menu
  • meter
  • mark
  • legend
  • keygen
  • header
  • footer
  • figure
  • dialog
  • details
  • datalist
  • command
  • canvas
  • audio
  • aside
  • article

ダウンロード先

HTML5で新規追加されたタグをDreamweaverのタグライブラリーに登録してみた – dwlog.net

作者に感謝です。ありがとうございます。

iPhoneで撮影した写真をプレビュー アプリから取り出す

iPhoneで撮影した写真はiPhotoなどで取り込みが可能です。が、iPhotoを使うまでもない、撮った写真をすぐに取り出したい時に使えるワザ。
Mac OS X標準のプレビューアプリを使うと簡単にiPhoneの写真が取り出せます。やりかたを簡単にご紹介。

preview
プレビュー.app

1.iPhoneを接続した状態で「ファイル」から「イメージを読み込む…」を選択

preview2

2.サムネイルが出るので必要なファイルを選択して「読み込む」をクリック

preview3

取り出せる写真は1枚で、新規ウィンドウに貼り付けた状態になりますので、お好きな形式に保存して完了です。