web

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

Macで入力した「〜(波ダッシュ・全角チルダ)」がギザギザする。

[image]ギザギザ

うあー、知りませんでした!ギザギザしてます!

発生にはいくつか条件があるみたいで
Macで「〜(波ダッシュ)」を入力したutf-8のページwindowsで表示する、とギザギザになってしまう。

「~ (から・波線)」がWebページで文字化けする条件と対処法 全角チルダと波ダッシュ | アイビーネットblogによると、メイリオは化けないらしいです。
ちなみにリンク先には「文字パレット」から入力できると書いてあるけど、おそらく「文字ビューア」と勘違いしてる)

とりあえず「~」を辞書登録したけど、入力した後じゃ確認のしようがないから困りますね。
文字参照を使ったほうがいいのかな。

確認してみる

Macで入力した「〜」
  • 〜(全角チルダ / google日本語入力で入力)
  • 〜(波ダッシュ / google日本語入力で入力)
  • 〜(ことえりの仮名表-文字パレットを使って入力)
  • ~(文字ビューアからFF5Eを入力)
Windowsの全角チルダをコピペしたもの

スクリーンショット

[image]見比べ

入力方法メモ

文字ビューア

[image]文字ビューアで全角チルダを表示したところ

unicodeを表示させる

文字ビューアを表示>左上の歯車クリック>リストをカスタマイズ

上のリストで「半角・全角形」から探すと早い

google日本語入力の文字パレット

探しづらい

[image]google日本語入力 文字パレット

(コピペで使える)Coda2 zen-codingショートカット用メモ

select

[text]
Balanced Tag
Balanced Tag (Inward)
Line
Line Contents
Word
[/text]

Numbers

[text]
Decrement Number By 0.1
Decrement Number By 1
Decrement Number By 10
Evaluate Math Expression
Increment Number By 0.1
Increment Number By 1
Increment Number By 10
[/text]

Zen Coding

[text]
Encode/Decode image to data:URI
Expand Abbreviation
Merge Lines
Next Edit Point
Previous Edit Point
Reflect CSS Value
Remove Tag
Select Next Item
Select Previous Ite,
Split/Join Tag
Toggle Comment
Update Image Size
Wrap With Abbreviation
[/text]

HTML

[text]
Format: Emphasize
Format: Strong
Insert Linebreak
Wrap Selected Lines In Tag
Wrap Selection In Link
Wrap Selection In Tag
[/text]

General

[text]
Indent New Line
Trim Line(s)
[/text]

Downloads – zen-coding – Set of plugins for HTML and CSS hi-speed coding – Google Project Hosting

Coda2にzen-codingを入れて、カスタマイズ | 乱雑モックアップ

html,body{height:100%}でブラウザー表示領域一杯まで広げたブロック要素に、余白やborderを含ませつつ100%におさめる方法

こんな感じのレイアウト

box-sizingでheight100%のブロック要素にラインを引く

tableを使わないと不可能だと思ってたけど普通にできちゃうんだねぇ
サンプル

css3のbox-sizingを使った

box-sizing-CSS3リファレンス

どっちにしろmarginは含ませる事は出来ないのでレイアウトによってはちょっとした工夫や無駄な要素が必要になるかも。

対応ブラウザ

firefox以外のモダンブラウザーには実装済みで
そのfirefoxもベンダープレフィックスをつければ使える。

ブラウザ 確認したバージョン ベンダープレフィックス
safari 5.1.2 不要
chrome 20.0.1132.52m 不要
firefox 13.0.1 必要(-moz-box-sizing: border-box;)
opera 11.64 不要
IE 9 不要
IE 8 不要

他の手段を使って同じように組む事も出来るのかな?

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

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