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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

LiveBuilder の選択

@PAGE は、画像入力枠及び文字の入力枠の脇に「LiveBuilder」の画像マークが表示されています。
記事入力枠に、題名と文字を入力します。
画像が用意されている場合には、参照ボタンを押し画像入力を行いますが、【LiveBuilder】を利用する場合には、青色のLiveBuilderボタンを押します。

( ２ ) 画像取得・画像処理システムページの表示

LiveBuilder の稼動

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

画面中央に表示されている「許可」ボタンを押します。

( ３ ) 画像取得・画像処理システムの表示と画像処理

ウェブカメラ映像表示

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

画像調整と文字入力

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

文字入力調整

・ 文字色の変更

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

・ フォントの変更

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

・ フィルター機能の活用

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

画像切抜き・サイズ調整

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

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

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

画像取得

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

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