mania-ku

食べ物とコードとか。

【Mac】フォント変換はFontPrepがいいかもしれない

HTML5&CSS3のPCサイトやスマホサイト、レスポンシブなんかではウェブフォントを使うことがあると思います。
すでにあるフォントを使うにしても、新たにフォントを作るにしても、変換が結構大変なんですよね・・・
いままで使っていたサービスが使えなくなる、なんてことも多々ありますし。
プライベートでサイトを作るときにウェブフォントを使おうと思って変換サービスを調べていたら、FontPrepを見つけました。

FontPrepってどんなサービス?

TTFかOTFから、他の拡張子のフォントを作ったり、CSSを書き出すアプリです。

変換方法

  1. 1.TTFかOTFをドラッグ&ドロップ
  2. 2.フォントが読み込まれたらフォント名とアイコンが並んだバーが出るので、一番左のアイコンを押してエクスポートする

※フォントが読み込むのは、他のアプリなんかと同様遅いので気長に待ってください。

スマホサイトコーディングの覚え書き:ツール編

Can I use

HTML5やCSS3、SVGなどブラウザの対応を調べるサイト。
必要なプリフィックスもわかります。
PCサイトをHTML5で作るときにも使えます。
菊池崇さんのセミナーで知りました。
ちなみに菊池さんのレスポンシブの本はオススメ。

Ultimate CSS Gradient Generator

グラデを作るツール。
フォトショっぽいUIなので、フォトショに慣れていたら使いやすいです。

GradientFinder

こちらは同じグラデでも、画像からグラデを作るツール。
複雑なグラデやグラデの詳細な情報が残っていないときには便利です!
ただし古いバージョンのwebkitのグラデには対応していないので補完する必要があります。

LONG SHADOWS GENERATOR

ロングシャドウを作るツール。
今回のブログデザインのときにもお世話になりました。

CSSの三角形ジェネレーター

吹き出しとかに使うCSSの三角形のジェネレーター。

border-imageシュミレーター

border-imageのジェネレーター。
ただし、このプロパティはレティナ対応はしていないようなので、こちらのコードを参考にしてください。

【Advent calendar】sublimeText2でJSHINTを入れる方法

これはadvent calendar13日目の記事です。
12日目の昨日はWindowsXPのサポートが終了するけど、そのあと使い続けるってどういうこと?でした。

jQueryプラグインの構文チェックをしてみたくて、Mac10.6.8でインストールしてみました。
必要なものは

  • ターミナル
  • sublimeText2

です。

ターミナル

(nodeとHomebrewがあったらとばす)Homebrewのインストール

ruby <(curl -fsSkL raw.github.com/mxcl/homebrew/go)

(node入ってたらとばす)nodeをインストール

brew install node

JSHintをインストール

sudo npm install -g jshint

sublimeText2

(sublimeText2入ってたらとばす)sumlimeText2をインストール

Sublime Text: The text editor you'll fall in love with

(Package Control入っていたらとばす)Package Controlを入れる

View > Show Console

Ctrl + `

import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation') 

JSHINTを入れる

Cmd+Shift+p>install>JSHINT

適当なJSを開いて、動くか確認

ファイルの上で右クリック>JSHINT
もしくは
Ctrl+J

リアルタイムにエラーチェックするためにSublimeLinterをインストール

Cmd+Shift+p>install>SublimeLinter

エラーチェックの設定

よくわからないので、ひとまずバシャログの設定をコピペしました。
これで、jQueryのエラー出なくなるみたいです。
Preferences>Package Settings>SublimeLinter>Settings – User

でもこれだとJSHINTと違う箇所にもエラーが出てしまいます・・・
謎です

【Emmet】Wrap with Abbreviationが使える!

ドットインストールのEmmetに新たにレッスンが追加されました。
すでにあるコードを囲む(DW/Cmd+shift+T)ことができる、この機能他にも色々使えます。

複数行あるテキストをリストに

Google
Yahoo
このようなテキストがあるとき、選択してコマンドを打って、ポップアップに「ul>li*」(*が重要)と入れると、

<ul>
<li>Google</li>
<li>Yahoo</li>
</ul>

と変換してくれます。
大量にあるテキストをリスト化するときなんか、ラクチンなんではないでしょうか?

テキストの接頭にマークがある場合、消す

-Google
-Yahoo
このように、テキストの頭に何らかのマークがあるとき、「ul>li*|t」で消すことができます。
これはフィルターでいろんなものがあるので、一度調べておくと吉。

テキストを流用したい

Google
Yahoo
このようなテキストで、それぞれのテキストをaのtitleに流用したいときなんかは「ul>li*>a[title=$#へ]{$#}」このように書くことができます。
超便利!

DreamWeaverにEmmetインストールして、カスタマイズした

Zen-codingからEmmetにするのを忘れていたので、手があいてるときにやってみました。
ついでに覚えてなかったけどよく使いそうなCSSショートカットもメモ。

ダウンロード&インストール

GithubのEmmet.zxpをクリックしてダウンロードし、ダウンロードしたファイルをダブルクリックしてExtension managerからインストールします。
※DWは再起動する必要があります。

キーボードショートカットをカスタマイズ

展開をTabに変更しました。
DreamWeaver>キーボードショートカットを開き コマンド>Emmet>Expand AbbreviationのところのキーをTabに変更
※Tabは押してるキーをそのままショートカットとして入力できないので、テキストで入力します。
ちなみにこれだとふつうのタブが挿入できなくなります・・・どうすればいいんだろ?
なお、DreamWeaverだとEmmetの新しい機能のキーボードショートカットが設定されていないみたいです。
便利な機能:Html編を参考に、自分の押しやすいキーで設定するといいと思います。 私はとりあえずコメントアウトのみ設定しました。

展開するコードをカスタマイズ

MacのCS5.5だと下記のファイルにあたります。
/Users/ユーザ名/Library/Application Support/Adobe/Dreamweaver CS5.5/ja_JP/Configuration/Commands/Emmet/snippets.js
CSSの展開がデフォだと、***:***なのですが***: ***に変更しました。

覚えてなかったけどよく使いそうなCSSショートカット

覚えてないところを復習。

display

  • display: block; → d
  • display: inline; → d:i
  • display: inline-block; → d:ib
  • display: table; → d:tb
  • display: table-cell; → d:tbc

overflow

  • overflow: hidden; → ov
  • overflow: auto; → ov:a
  • overflow: scroll; → ov:s

CSS3

  • box-sizing: border-box; → bxz boxz
  • box-shadow: inset hoff voff blur color; → bxs boxs
  • text-shadow: hoff voff blur #000; → tsh

その他

  • zoom: 1; → zoo
  • border: 1px solid #000; → bd+
  • border-radius: ; → bdrs
  • vertical-align: top; → va
  • text-decoration: none; → td
  • text-indent: -9999px; → ti:-

【Firefox】ブラウザ確認が楽になるプラグインOpen With

Firefoxで開いているページをほかのブラウザで1クリックで開けるプラグインです。
ベーシック認証のサイトだとIDPASSは必要ですが、これは便利だ・・・!

WinにもMacにも入れれば、スイスイブラウザ確認できますね:D
Open With

使ってる&使えそうなコーディングツール

※Macユーザー限定もあります

Photoshop
名前 特徴
CSS3PS PhotoshopのレイヤースタイルをCSS3化するPhotoshopプラグイン
chrome
名前 特徴
HTML5 markup detector HTML5で作られたサイトかどうか見分ける
Pendule Pサイトで使われているJSを調べる
マウスで指定した先の色を調べる
マウスで覆った範囲のサイズを調べる
ブラウザサイズを指定できるなど
Popup Image Alt Attribute ALT表示
※ローカルでは動かない
Stylebot ユーザスタイルシートを適用する
Firefox
名前 特徴
FireFTP FTP
FiremobileSimulator ガラケーのシュミレーター
lori ロード時間、ページ容量、リクエスト回数を表示できる
Popup ALT Attributes ALT表示
Web Developer フォームのパスワードを表示
フォームの情報を別ウィンドウに表示
ブラウザサイズを指定できるなど
その他
名前 特徴
FileZilla FTP
Cyberduck FTP
※重い
RapidSVN SVN
Browserhacks CSSハックやJavaScriptによるハック方法をまとめたサイト
caniuse ベンダープレフィックスや対応ブラウザの確認
CSSPrefixer ベンダープレフィックス付きCSSに変換
PXtoEM pxとem(rem)の変換
Ultimate CSS Gradient Generator 簡単にグラデを作る(フォトショっぽい・模様は作れない)
Responsivator レスポンシブで個々のサイズを一気に確認
ttf → eot フォントをttf → eotに変換
WOFFコンバータ フォントをWOFFに変換
Free Online Font Converter フォントを変換
WinArchiver Lite Windowsで文字化けや不可視ファイルを入れないように、MacでZIPにする
ImageOptim 画像圧縮
Integrity リンクチェック
SiteSucker サイトデータダウンロード
エクセルの表をtableに変換ツール(自作) そのまんま
カナ→半角カナ変換ツール(自作) そのまんま

[js]エクセルの表をtableに変換ツール

コーディングで表を作るときにもっと簡単にできないかなーと思って、
ツールを作ってみました。

[js]カナ→半角カナ変換ツール

携帯サイトをコーディングするときにカナを半角カナにすることが多いので、
ツールにしてみました。