メニュー

つくばマルチメディア(茨城県つくば市)のホームページ作成システム:WEB制作技術:ウェブカメラ画像取得・処理ウェブ生成システム:「LiveBuilder」の案内

文字サイズの変更
標準
背景色の変更
標準
音声読上げ版

LiveBuilder:ウェブカメラ画像取得・処理ウェブ生成システム

ブロードバンド・ユビキタス時代の情報発信支援システム
Web カメラ画像自動取得Web データ生成システム
究極のコンテンツマネジメントシステム
デジカメ・画像処理ソフトがなくても画像付きホームページを簡単更新!!
特許第3924702号

システム開発の背景及び課題

現在、地域中小企業も含めてホームページの情報更新が課題となっています。
また、ブロードバンドやユビキタスが急激に普及していることにより、本日のお勧め商品やメニュー、事業者のニュース等、日々の更新が重要となってきています。
既に、ホームページの更新にあたっては、CMS(コンテンツマネジメントシステム)が広く利用されていますが、商品やサービスの写真画像をインターネット上に発信する場合、デジタルカメラで撮影し、パソコンに一旦保存後、画像処理ソフトで画像処理を施すという面倒な作業が発生します。
また、画像更新も含めたホームページの更新として、携帯電話での更新システムも既に当社でも開発しておりますが、携帯電話の通信料がかかること、画像のサイズ調整や画質調整ができないこと等の問題があります。
本システムは、デジタルカメラの複雑な操作や画像処理ソフトを使えない場合でも、容易に画像付のホームページや商品情報を更新可能とするシステムです。本システムは、平成19 年3月9 日に特許第3924702号として株式会社つくばマルチメディアで取得しています。

LiveBuilder 画像登録画面

ウェブカメラ画像取得・処理ウェブ生成システムの効果

  1. 画像を含むホームページデータをウェブサーバにアップする場合に、ホームページに利用する画像の取得、画像加工、画像調整、画像圧縮、ホームページ文章入力及びウェブサーバへのホームページデータの登録作業工程を一貫したシステムとしてウェブ管理者端末のウェブブラウザの表示画面上で処理することが可能となり、作業時間の短縮により効率的なホームページの作成と更新管理が可能です。
  2. デジタルカメラ等静止画取得機材や専用の画像処理ソフトやファイル転送ソフトの利用がなくなるため、それぞれの利用技術の知識修得がない場合でも容易に画像を含むホームページデータの作成が可能となり、専門的な情報技術のない中小・零細事業者でも容易にホームページ作成や頻繁なホームページの更新が可能となります。
  3. ウェブカメラは、インターネット回線に接続されている必要はないため、ウェブカメラをインターネットを介して制御するサーバ機能は不要であり、会議用のビデオチャットカメラやウェブカメラ機能付きのホームビデオでも利用することが可能となり、高額なスキャナーやウェブカメラ、ウェブカメラのネットワーク構築を必要とせず、低価格でのシステム構築が可能です。
    また、会議用のビデオチャットカメラやウェブカメラ機能付きのホームビデオは、持ち運びが容易であるため通信が可能なノートパソコンを利用する場合には作業場所が制限されません。

ウェブカメラ画像取得・処理ウェブ生成システムの利用

本システムは、既に当社のシステム製品である@TOWN(@PAGE)には、システム採用されていま すが、以下のようにホームページ更新が関わる分野や画像付きのデータベースを構築する分野へ の利用方法があります。


  • レンタルサーバサービスを運営する事業者のレンタルウェブサーバへの採用
  • ショッピングやオークションサイトへの採用
  • 地域ポータルサイトやコミュニケーションサイトへの採用
  • 企業のホームページや行政等のホームページ作成
  • 画像付き商品等データベースの構築

「LiveBuilder」:ウェブカメラ画像取得・処理ウェブ生成システム概要

ホームページの作成や更新において、ビデオチャットカメラやホームビデオからノートパソコン等にUSB 接続し、Web ブラウザ上にLiveBuilder システムとWeb カメラの映像を表示します。
パソコンのWeb ブラウザ上の表示映像から任意の範囲をマウスで指定し、ウェブ表示画面上の画像調整画面で画像を調整加工して登録すると、その映像の範囲指定した部分を画像として取得後ウェブサーバに送信し、商品データ等の画像を文字情報とともにインターネット上に表示することを可能とするシステムです。
ライブカメラの映像画面上で画像のサイズ入力が可能な他、画質の明暗や解像度、彩度等の調整、文字の入力、文字の加工等もWeb ブラウザ上で処理することが可能です。

ウェブカメラ画像自動取得ウェブサーバシステム

「LiveBuilder」:ウェブカメラ画像取得・処理ウェブ生成システム機能

以下のイメージは、ウェブブラウザ上に表示される「LiveBuilder」のコントロールパネルです。
機能説明は、番号順に説明されています。

ライブビルダー コントロールパネル

1. 画像解像度調整

画面上に表示された映像表示画面のサイズ調整により、サーバ上で画像解像度の調整をします。
映像表示画面を縮小して画像を取得すると自動的に高画質の静止画を取得することができます。
画像解像度は100 パーセントとし、20 パーセントまでの目安度数表示をしています。)

2. 明るさ調整

明るさ調整ボタンで映像画面の明るさの調整をすることが可能です。画像を取得した場合には、その明るさが静止画像に反映されます。
表示画像の明るさを1とし、100 までの度数表示をしています。

3. コントラスト調整

画像の黒い部分から白い部分までの明暗差(コントラスト)を調整します。

4. 彩度調整

色の鮮やかさを調整します。

5. シャープ調整

隣り合ったピクセルのコントラストを増加させて画像をハッキリさせます。

6. 画像切抜き

画像切抜きボタンを押すと、映像画面上でマウスによって切り抜き範囲を指定できます。
左上にあるコントロールポイントをドラッグすると位置が移動できます。
右下にあるコントロールポイントをドラッグすると大きさが変更できます。

7. 数値入力による切抜きサイズの変更

範囲指定後に、サイズ調整数値入力枠に縦・横の数値を入力することにより、取得画像のサイズ変更を行うことが可能で、正確な画像サイズのデータを取得できます。

8. 文字の入力

画面上で任意の場所をクリックすると点線の四角が表示されます。
次にテキスト入力すると点線の内部に文字が表示されます。
左上にあるコントロールポイントをドラッグすると位置が移動できます。
右下にあるコントロールポイントをドラッグすると大きさが変更できます。
文字フォントは、システム利用者のパソコン内の文字フォントを利用可能です。
なお、一部のフォントは本システムに対応しておりません。

9. 「×」解除

部分切抜きや文字の入力時に、このボタンを押すと指定が解除されます。

10. 文字フォント色

表示されているかカラーの部分をクリックするとカラーバーが表示され、文字の入力時のフォント色を指定できます。

11. 文字フォント名

文字の入力時のフォントは、システム利用者のパソコン内にインストールされている文字フォントの中から選択できます。
なお、一部のフォントは本システムに対応しておりません。

12. 画像送信

画像送信ボタンを押すと取得画像がサーバに送信され画像をWeb 上に表示され取得画像を確認できます。

13. 文字フィルターリストと活用

文字フィルターリストで、+ボタンを押すとフィルターメニューが表示され適用したいフィルターを選択します。
フィルターは、ドロップシャドウ、ベベル、グロー、ブラー等が現在採用されています。

14. フィルターの解除

フィルター適用時に、リストボックスから削除したいフィルター名を選択して「-」ボタンを押すとフィルターが解除されます。


@PAGE/@WEB メニュー項目の画像自動入力による各ページの利用方法

以下は、USB 接続のウェブカメラを使用して@PAGE を更新する手順です。
【LiveBuilder】は、基本的にUSB 接続のウェブカメラであれば利用可能ですが、取得画像が高画質な株式会社ロジクール Qcam® Pro 9000 を推奨しています。

パソコンにウェブカメラを接続したイメージ
ロジクール Qcam® Pro 9000写真

株式会社ロジクール Qcam® Pro 9000
オートフォーカス機能付きのハイパフォーマンスウェブカメラ
HD 画質静止画撮影:800 万画素*のHD画質静止画撮影が可能で、高画質画像を取得することが可能です。

( 1 ) ホームページ更新画面の表示

以下は、@PAGE メニュー項目の「新着情報」のホームページ更新画面です。


LiveBuilder の選択
@PAGE は、画像入力枠及び文字の入力枠の脇に「LiveBuilder」の画像マークが表示されています。
記事入力枠に、題名と文字を入力します。
画像が用意されている場合には、参照ボタンを押し画像入力を行いますが、【LiveBuilder】を利用する場合には、青色のLiveBuilderボタンを押します。
新着情報ホームページ更新画面
( 2 ) 画像取得・画像処理システムページの表示

LiveBuilder の稼動
更新画面で、「LiveBuilder」の画像マークをクリックすると右記のページがウェブブラウザ上に表示されます。

画面中央に表示されている「許可」ボタンを押します。
ライブビルダーの稼働画面
( 3 ) 画像取得・画像処理システムの表示と画像処理

ウェブカメラ映像表示
上記、「LiveBuilder」表示画面の「許可」をクリックすると、右記のようにウェブカメラの中継映像と画像処理の調整ボタンが表示されます。
画像解像度、明るさ、コントラスト、彩度、シャープの調整の他、文字入力、フォント指定、フィルター機能、画像切取(トリミング)と数値入力による画像サイズの調整が可能です。
中継映像と画像処理画面


画像調整と文字入力
前記の画像処理機能①、②、③、④、⑤で画像調整し、文字選択ボタン「T」を押します。
画面票に文字枠が黒点線枠で表示されます。
右イメージは、緑色で文字を記載した事例です。
左上にあるコントロールポイントをドラッグすると位置を移動できます。
右下にあるコントロールポイントをドラッグすると大きさが変更できます。
文字入力画面


文字入力調整
・ 文字色の変更
フォント色を押すとカラーバーが表示され、フルカラーの色選択をすることができます。右イメージは、赤を選択したイメージです。

・ フォントの変更
使用するフォントを変更する場合には、フォント名を選択するとパソコンにインストールされているフォントが表示され、選択すると指定のフォントに変更が可能です。

・ フィルター機能の活用
フィルター機能の「+」を押すとフィルターの機能が表示されます。
ドロップシャドウ、ベベル、グロー、ブラー等のフィルター機能を利用できます。
右のイメージは、ドロップシャドウを利用した事例で、影に白を利用しています。影の幅や強度等は、調整バーで変更できます。
文字色・フォント・フィルター機能の変更画面


画像切抜き・サイズ調整
画像調整と文字入力が完了後に、画像切抜きボタンを押し、マウスで範囲を指定すると赤の枠線が表示されます。
赤枠は、マウスで拡大・縮小、移動を行うことが可能です。

また、切抜き範囲が指定されると同時にシステムのコントロールパネル上に、画像サイズ調整入力枠が表示されます。
縦・横の数値を入力すると赤色の切抜き枠線が入力されたサイズに変更されます。

左上にあるコントロールポイントをドラッグすると位置を移動できます。
右下にあるコントロールポイントをドラッグすると大きさが変更できます。
トリミング・サイズ調整


画像取得
画像取得ボタンを押すと取得した画像がサーバに送られ右のイメージのように別ブラウザ上に取得した画像が表示されます。

画面上に表示されている「閉じる」ボタンを押すとブラウザが自動的に閉じて、ページ更新の管理画面上の画像入力枠に自動的に画像が入力表示されます。
取得したイメージ画像