jQuery

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

子要素Bを持つA要素を指定するには

CSS3までのセレクタは、特定の子要素を持つ親要素を選択できないけど
jQueryの:hasフィルターで出来るよ

例えば、aタグを含むliを選択してみる

aタグを含む<li>に.targetが付いてるのが確認できる
[image]:hasフィルター

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

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

[jQuery]$(this)の親要素や子要素を指定するには。

thisを使ってなかったからthisの子要素のアクセス方法が全くわからんかった。

当たり前だけどこんな風に出来無いわけですよね
[text]$("this ul").addClass("hogehoge");[/text]

childrenを使うといいみたい。

親にはparent

参考 / まよねこ inside » Blog Archive » 【jQuery】thisの親や子要素の指定方法[リライト版]

宿題
ひろし+すみれのliからから友蔵+こたけのliを指定するにはどうしたらいいんだろうか。

スクロールバーを変更するjscrollpane.js

SAVEJAPAN! PROJECTのツイッターのスクロールバーのところが、
デザインにあってていいねぇなんて思いながら見ていたら
だんだん自分でも使ってみたくなったので調べてみるとjscrollpaneというのを使っているようでした。

これ2009年くらいに話題になったらしいんだけど、全く知りませんでした。。。

ここ / jScrollPane – cross browser styleable scrollbars with jQuery and CSS
iframeも、親htmlにjsを追加するだけで(operaでマウスホイールが反応しなかったけど)スクロールバーを追加できたり
子htmlに直接jsを追加する事でマウスホイールも反応するように出来るかんじ。

練習

乱雑モックアップ|jQueryでツイッターを取得してjscrollpaneを適用
[image]jQueryでツイッターを取得してjscrollpaneを適用のスクリーンショット

ツイッターをjQueryで読み込む方法の参考にしたページ

jQueryでTwitterの自分のつぶやきを表示する | webOpixel

DreamweaverのjQuery拡張機能 / jQuery Utilities Toolset with Code Utilities

[image]jQuery Utilities Toolset with Code Utilities

Adobe – Dreamweaver Extension
上の一般、レイアウト、フォームとか書いてあるタブの所にjQueryのタブを追加
ボタンひとつで

とか挿入出来る。

jQueryのコードヒント拡張もあるみたいなんだけど
jQuery API extension for Dreamweaver | XTND.US – Xtnd urslf! Extensions for software. Adobe Dreamweaver, Drupal, jQuery, Eclipse, Fireworks
Dreamweaaver側のショートカットを変更してるとインストール出来ないのよね

一応

のMenus.xmlを削除するとインストール出来る。
変更したショートカットが無くなってしまうので、WinMergeなんかを使って差分をコピったりするのもいいかも。

WinMergeの説明はこちら / ファイル比較ツールをWinMergeに変更す
WinMerge 日本語版本体はこちら / WinMerge 日本語版

[無料のiPhoneアプリ] いつでも、どこでも、JavaScriptプログラミング! / JavaScript Anywhere で jQuery。

[image]javascript anywhereダウンロードページ
ちょっと前に見つけて入れてみた iPhone app JavaScript Anywhere が素敵です。
作者様のサイト
JavaScript Anywhere

HTML外部.js外部.cssの各1ファイルを自由に編集していつでもどこでも内蔵ブラウザで動作確認(実行)できます。
そして出来たモノを自分宛にメール送信する事も可能。
iPhoneのキーボードだとタグの入力が恐ろしく面倒臭いんですけど(個人的に ‘ (シングルクォーテーション)を入力した後にアルファベットに戻るのが納得いかない)、人って慣れるもの。
けどiPhoneで辞書登録ができたら定型文を使えて便利なのになぁ。

でもって JavaScript Anywhere を使って jQuery の練習をする

JavaScript Anywhere は jQeury を持っていないので Google Code のものを使わせてもらう。
Google AJAX Libraries API – Google Code
デベロッパー ガイド – Google AJAX Libraries API – Google Code

HTMLの<head>内に

もしくは

これでjQueryが使えるハズ。

動作確認

JSタブに

と入力して Hello が表示されたらおkなハズ。

JavaScript Anywhere のダウンロードはこちら

iTunes App Store で扱っている iPhone、iPod touch、iPad のJavaScript Anywhere