月別アーカイブ: 2013年2月

HTML5の動画再生機能を利用する – MediaElement.jsプラグイン

ブラウザのネイティブ機能によりHTML5動画を再生するのは簡単だが、 ・ブラウザの種類によって見た目が異なる ・別のプラグイン(jQuery EasyUI)との相性がよくない ようなので、プラグインを使ってみる。今回は、 … 続きを読む

カテゴリー: Tips | タグ: , , | コメントする

HTML5の動画再生機能を利用する

HTML5では「video要素」が追加され、Flashなどのプラグインを利用しなくても動画の再生が行えるようになった。ただ、まだ発展途上であり、ブラウザにより動作が異なる点もあり、利用には注意を要する。 基本的な使い方 … 続きを読む

カテゴリー: Tips | タグ: , | コメントする

画像表示アプリの作成(5) – EXIFデータの表示

画像情報ファイルにEXIFデータが加わったので、これを読み込んで画像と合わせてEXIFデータも表示するように改良する。基本的にはこれまでと同じで、 画像情報ファイルを読み込んで画像の位置と各種情報を得る 上パネルにサムネ … 続きを読む

カテゴリー: Development | タグ: | コメントする

画像情報ファイルにEXIFデータを追加する

JavaScriptで画像のEXIFデータを読み取るには、Javascript EXIF Reader が便利だ。jQuery版も用意されていて、これを使うとサーバにある画像のEXIFデータを、クライアントサイドで抽出す … 続きを読む

カテゴリー: Development | タグ: , | 1件のコメント

JavaScriptのクロージャをループ内で定義する時の技

JavaScriptのクロージャは便利だが、forなどのループ内で繰り返し呼び出したい場合は、変数のスコープに注意する必要がある。特に、ループカウンタの値を参照するようなケースでは、ループ内で擬似的にfunction() … 続きを読む

カテゴリー: Tips | タグ: | コメントする

画像表示アプリの作成(4) – jQuery Cycle Pluginの利用

前回はメインの画像表示(センターパネル)するのに、単純に「img要素のsrc属性」を設定していたが、画像表示用のjQueryプラグインであるjQuery Cycle Pluginを使ってみる。このプラグインを使うことで、 … 続きを読む

カテゴリー: Development | タグ: , , | コメントする

画像表示アプリの作成(3) – 画像表示機能の実現

「画像情報ファイル」を読み込んで、画像を表示するWebアプリを作成する。以下のサンプルでは、テスト画像を30個表示している。 imgview03.html 画面レイアウトには jQuery EasyUI を使う 上パネル … 続きを読む

カテゴリー: Development | タグ: , , , , , | コメントする

jQuery carouFredSelプラグインを使う (2)

carouFredSelを操作する方法。 基本的には、triger() メソッドを使う。(引数に動作を表わす文字列を指定する。) 要素を追加する: insertItem(items) 静的なHTMLではなく、要素を動的に … 続きを読む

カテゴリー: Tips | タグ: | コメントする

画像表示アプリの作成(2) – 画像情報ファイルの作成

画像ファイルの命名規則 画像ファイル名は、撮影日時(=ファイルの作成日時)をもとに、YYMMDD-HHMMSS 形式とする。 例えば、2012年9月8日午後2時31分31秒に撮影された画像ファイル名は、120908-14 … 続きを読む

カテゴリー: Development | タグ: , | コメントする

画像表示アプリの作成(1) – コンセプト&準備

画像(写真)を表示するWebアプリを作成する。 今のところ、以下のコンセプトを想定。 画像の置き場所とアプリの置き場所は独立させる javascriptファイルの配置場所は画像とは別にする。将来的には、picasaのよう … 続きを読む

カテゴリー: Development | タグ: , , | コメントする