カテゴリー: plugin

CodeKitを使ってみた

CodeKitなら、Autoprefixerを簡単に使えるようなので試してみることにした。

codekit

Autoprefixerは、Can I use…の結果を元にベンダープレフィックスを補ってくれる機能
display:flexみたいな仕様がころころ変わってきたプロパティを使う時など、とても便利。

例えば次の記述は

こんな風に変換される。

今まではgulpを使ってしていたんだけど
それだと、compass準備して、gulpインストールして、package.jsonを用意するか使いまわして、モジュールをインストールして、gulpfile.js書いて、、、とさっと始めるには労力がかかっていたけど
CodeKit2には基本機能としてAutoprefixerが組み込まれてるから、起動したらほぼいきなり書き始められるもんで超絶楽な予感。

ただcompassの追加プラグインなんてのはCodeKitからは追加できたりしないのかしら?
そうなると結局config.rbは自分で編集してターミナルも使う事になりそうだ。


[WordPressプラグイン]urlからwebサイトのサムネイルを作成するプラグイン

WordPressの投稿にwebサイトのサムネイルを簡単に貼り付ける方法のメモです

[image]Browser Shots

WordPressの管理画面からインストールできました

プラグインを有効化したら
投稿に次の記述でサムネイルを挿入可
[text]
[browser-shot url="サムネイルにしたサイトのURL" width="任意の横幅"]
[/text]

うちはFirefoxのMake Link
こんな感じの設定を追加して右クリックからソースを生成できるようにした
[text]
[browser-shot url="%url%" title="%text%" width="205"]
[/text]

[image]makelink設定


[coda2] emmetのexpand abbreviationをtabキーで実行する

[追記あり / 2013-04-12 16:58]
プラグイン>Emmet>Preferences…から変更できるようになってますね!
[image]emmet設定

これどのバージョンから設定できてたんだろう、全然気づかなかった。

html:4tとかhtml:xtとかをexpand abbreviationしたらbodyタグの無いコードが生成されて、おかしいなぁと設定を見てみたら発見したというわけ
そして肝心のbodyタグがなくなる現象の原因は未だ発見できず。
こうゆうのことわざでなんていうんでしょう。

TEA for Codaもインストールしてるから駄目なのかな?

追記

喜び勇んで投稿しちゃったけど、coda2自前のクリップ挿入機能(tabトリガー?)が効かなくなってしまった。
それはそれで困るので以前の状態へ戻す事にしました(´・ω・)


jPlayerで1時間超の動画の再生時間を表示させる

[image]jPlayer時間表示

jquery.jplayer.min.jsの19行目にあるshowHourを1から0にしてましたが

以下を追加すればよかったみたい

jp-duration on media files longer than 1 hour · Issue #33 · happyworm/jPlayer


Coda2にzen-codingを入れて、カスタマイズ

Coda2のzen-codingで地味に困る事。を追加。
解決方法をご存知でしたらぜひ教えて下さいませ。
追記ここまで。

日本語化されるまで触らないでおこうと思いつつ
ちょっとしたコーディングをする際にちょこちょこ起動してるCoda2

zen-codingを入れてhtml:5とやるとlang=”en”になっていたり<!DOCTYPE HTML>と少し気持ち悪かったのでカスタマイズする事に。

zen-codingを拾ってくる

Downloads – zen-coding – Set of plugins for HTML and CSS hi-speed coding – Google Project Hosting
Zen Coding for Coda v0.7.1 をダウンロードした

/Users/[ユーザー名]/Library/Application Support/Coda 2/Plug-ins/TEA for Coda.codaplugin
右クリックして「パッケージの内容を表示」

Support/Library/zencoding/zen_settings.py
をバックアップしてから
CotEditorで開いた

でもってenをjaに変更

[text]
‘lang’: ‘ja’,
‘locale’: ‘ja-JP’,[/text]
[image]気持ち悪い場所

ついでに

私、気になりますっ!

なんでHTMLが大文字でlangはlocaleなんでしょう?
[image]書き換えます

!DOCTYPE HTMLを
!DOCTYPE htmlにしました。
[image]小文字とjaにしました

ちなみに、W3C(HTML5)の記述はこんな感じだった

lang属性はなんて書くのがいいんだろう?

おまけでjQueryやviewportの記述も追加しておく
[image]色々追加
コンディショナルコメントのところの[]は\でエスケープ。

この段階のhtml:5をzen-codingすると

こうなる。

テンプレ部分の参考サイト

HTML5+CSS3の導入時に役立つ7つの設定 : アシアルブログ
【HTML】最近のPCサイトに見るテンプレ要素まとめ | istis

ちゃんと勉強してテンプレを作りたいなー。


Coda2についてくるオリジナルのフォント(Panic Sans)の格納場所

[image]Panic Sans

App Storeのレビューの「前のバージョンについていたPanic Sans(オリジナルのフォント)がCoda2にはみあたらない」を読んで
みたことないフォントだけど残念過ぎる!本当にないのか?と探してみたらパッケージの中にありました!やった!

Panic Sans 格納場所

/Applications/Coda 2.app/Contents/Resources/Panic Sans.dfont

アプリケーションのCoda 2.appを右クリックして
パッケージの内容を表示から行った。

[image]アプリケーションからCoda2を右クリック

他のフォントと比較

menloとそっくり、でも0が可愛い。
[image]比較

なんで一緒にインストールされなかったんだろう


Webサイトにオーディオ / ビデオプレイヤーを設置する

[jplayerダウンロードページ]

jPlayer : HTML5 Audio & Video for jQuery
オーディオだけじゃなくビデオも再生できるjQueryのプラグイン。
htmlとcssがわかればある程度好きなように見栄えをカスタマイズできて
プレイリストっていうのかな、複数の曲の連続再生に対応してる。

.mp3を.oggに変換する

うちの設置方法がよくないのか、firefoxではmp3が再生できなかった。

firefoxのaudioタグがmp3をサポートしていないからなのかな
とりあえず.mp3を.oggに変換する事に。

Audio Sound File Converter Software. Convert wav mp3 dvd midi flac dvf wma etc.というアプリ(無料)が簡単だった。
[image]switch
ファイルをドラッグして形式を選んでコンバート押すだけ。

.ogg以外にも様々な形式に書き出せる。
[image]Switch Audio Converter

こないだ変換に使ったアプリなんだったけな?と忘れちゃったのでメモ投稿。