HTML5」タグアーカイブ

HTMLで画像と他要素の縦方向位置を揃える

vertical-alignプロパティを使って、HTMLで画像と他要素の縦方向位置を揃える方法。 このプロパティを使って、リンクボタンと画像の縦方向位置を揃えた結果は以下。 少しわかりにくいが、下の行だけ vertica … 続きを読む

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

ローカルストレージを利用して端末にデータを保存する(HTML5)

HTML5では端末にデータを保存するためのWeb Storage という仕組が用意されている。Web Storage にはセッション中のみ有効な Session Storage と、永続的に有効な Local Stora … 続きを読む

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

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

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

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

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

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

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

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

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

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

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

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

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

URLパラメータで読み込むファイル・自動トラッキングを指定する

URLパラメータで、読み込むJSONファイル名と自動トラッキングする/しないを指定できるようにする。URLパラメータの取得方法は、この記事を参照。動きは以下のとおりを想定。 ファイル指定の有無(gpsjson)を確認する … 続きを読む

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

JSONファイルの作成・読込機能を実現する

これまでの成果をまとめて、アップロードしたGPSデータをJSON形式に変換し、変換したJSONファイルを読み込んで、内容を Google Mapsに表示する機能を実現する。JSONファイルはサーバ側に配置しておき、GUI … 続きを読む

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

jQuery EasyUIでカスタムアイコンを追加する

jQuery EasyUIのCSSを編集する アイコン関連CSSファイルの配置場所:(root dir)/themes/icon.css 追加したいアイコンに適宜名前(以下では「icon-myupload」)をつけて、次 … 続きを読む

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

内部データをファイルとしてダウンロードできるようにする

HTML5のFile APIを使ってファイルを作成する方法をベースに、内部データをファイルとしてダウンロードできるようにする。GUIの一貫性を考慮し、ボタンクリックでダウンロードを開始する。 データをJSON形式にし、さ … 続きを読む

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