映像制作 eラーニングのことならビズバレー
文字サイズの変更 標準 
大きい
ホーム > スタッフブログ
スタッフブログ
k.takahashi
k.taguchi
j.hashimoto
j.katou
y.hotate
m.kawai
s_inomata
m_muraoka
ビズバレーは、東京都 千代田区で活動する、映像制作、DVD、eラーニングを扱う会社です。

エンジニア:田口

<コメント>
15年以上 eラーニング業界にさまざまな立場で関わってきました。教材開発からLMSの企画開発、コンシューマ向けeラーニングの経験を経て、多様なラーニングの企画開発を行っています。専門分野 Web技術全般、Adobe AIR、動画配信技術など。
日本イーラーニングコンソシアム認定 SCORM技術者。

<制作実例>
スマートフォンアプリ開発、LMS開発・運用、SCORM教材開発

<趣味>
一眼レフカメラ撮影

今回は、スマートフォンアプリの作成で避けては通れないマルチ解像度について考えてみたいと思います。スマートフォンのアプリは、画面いっぱいにシングルウィンドウとしてコンテンツを描画するため、端末の解像度を考慮しなければなりません。

例えば、Android端末で800x480ピクセル、1920×1080ピクセルの画面サイズで、800x480ピクセルのコンテンツ(画像)をそのまま表示しようとしたらこのような感じになります。

20150501-1

片方はピッタリ合っていますが、高解像度の端末では、なんらかの対処が必要なのは見ての通りです。さて、ここでどうするかという問題です。思い付くところ3通りの手法があります。

(1)コンテンツのアスペクト比を「無視」して拡大する
(2)コンテンツのアスペクト比を「維持」して拡大する
(3)コンテンツを相対的に作成・配置する

ここでは、アスペクト比を「無視」した方法の記述を見てみましょう。
starlingを起動するまでのコードです。

package
{
  import flash.display.Sprite;
  import flash.display.StageDisplayState;
  import flash.display.StageScaleMode;
  import flash.geom.Rectangle;
  import starling.core.Starling;
  
  [SWF(frameRate="60", backgroundColor="#000")]
  
  public class Main extends Sprite
  {
    public var starling:Starling;
    public static const STAGE_HEIGHT:int = 800;
    public static const STAGE_WIDTH:int  = 480;

    public function Main()
    {      
      stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
      stage.scaleMode    = StageScaleMode.NO_SCALE;

      var viewPort:Rectangle =
       new Rectangle(0, 0, stage.fullScreenWidth, stage.fullScreenHeight);

      starling = new Starling(MainState, stage, viewPort);
      starling.stage.stageWidth  = STAGE_WIDTH;
      starling.stage.stageHeight = STAGE_HEIGHT;
      starling.start();

    }
  }
}

ポイントになる部分は、ビューポートの矩形設定で(0,0)からフルスクリーンでの座標をセットしてStarlingオブジェクト生成時の引数としています。

var viewPort:Rectangle =
       new Rectangle(0, 0, stage.fullScreenWidth, stage.fullScreenHeight);

そして、次のところでコンテンツサイズ(800x480)をセットしています。

starling.stage.stageWidth  = STAGE_WIDTH;
starling.stage.stageHeight = STAGE_HEIGHT;

結果、このように縦横800x480ピクセルの画像がディスプレイのサイズにぴったり合いました。ただし中央の正方形は11ピクセル歪んでいました。

20150510-3

注意したいのは、端末の解像度が1920x1080であっても、コンテンツの高さは1920ピクセルではありません。1776ピクセルとなります。これは画面下部にナビゲーションバー(システムキー)があるためです。端末によっては、画面の外に出ているものもあるため端末の解像度が同じでも、その有無によって表示サイズが異なります。

またステータスバーを表示すると、さらに縦幅は変わってきますので、なかなかやっかいです。個人的には、アスペクト比を無視したやり方は端末により歪みが大きいため、利用していません。

次回は、アスペクト比を「維持」したやり方を見てみようと思います。

先日、浦和のパルコへ「コップのフチ子展」を見に行ってきました。周りの方は、ライトにスマホで記念に撮影している程度でしたが、一眼レフカメラを取り出そうとしているのは私だけでした。せっかく来たからにはと思い、気負いせず撮影開始です。

20150409-1 20150409-6 20150409-2

フチ子さんは、プラスチックのショウケースに入っているためケースにほぼ密着した状態でカメラを構えて撮っていきます。レンズは60mmのマクロレンズで、ISOは下限2000~上限4000程度でオート、露出補正は高めに設定しました。ちょっと古めのミラーレスやAPS-Cでは、ISOを上げると、ノイズが発生しやすいですが、フルサイズカメラであれば、ISO2000でも全く問題ないレベルの品質が得られます。

また、なにぶん照明が、フロアの地明かりしかないのと、見た目の明るさに合わせて撮影すると記録写真のように面白みが欠けるので、露出補正をプラスに上げて明るめに撮ります。これらの写真は、さらにRAW現像で補正を加えています。そして、小さなホコリが付着したような汚れは、フォトショップのスポット修復ブラシツールで取り除き、綺麗な表面に仕上げます。

玉ボケの写真は、展示会場奥のブティックに設置された照明が、良い感じにボケてくれました。

20150409-4 20150409-12 20150409-3

マクロ撮影は、ピントの合う幅が狭いため油断すると、ピントが合わせたい部分がボケてしまうことがあります。私の場合、同じ構図でF4、F5.6、F10といった風に3パターンほど絞りの設定を変えて撮ることがあります。そうすることで、背景のボケ味、ピントの度合による違ったバリエーションを作ることができるため、失敗する確率を下げることができます。

20150409-5 20150409-8 20150409-7

ふなっしーの写真は、光が弱くメリハリ感がでませんでしたが、クレイアニメにような空気感がでているように見えて面白いです。どこにピントを定めているか、よくわかる写真ですね。

20150409-11 20150409-9 20150409-10

前ボケの写真を狙ってみました。ミニチュアの模型撮影は、その世界観を上手く表現できると、とても面白い写真になるため機会があればまた挑戦してみようと思います。

20150409-13 20150409-14 20140409-15

こんにちは、田口です。今回は、趣味の一眼レフカメラを片手に、神代植物公園に行ってきました。お目当ては、梅の花ので、見頃のタイミングは、ちょうど最終日という感じです。一方、桜の開花もみることができ、こちらは1割程度ですが、これから咲き始める段階でした。天気が良かったこともあり、ほどよい賑わいで撮影される方も多くみられました。

そして、さっそくお目当ての梅をパシャリ。遠目からの撮影だと、すこし萎れていても気にならない感じですね。近めでは、目立つところもありますが。なんとか耐えられる範囲でしょうか。

20150325-7 20150325-9 20510325-8

桜の花もパシャリ。木をまるまる引きで撮影すると、記録写真っぽく面白みがないので、マクロレンズを使い寄りで撮影しました。そのとき、被写界深度と構図を意識して、特に単焦点レンズのため、体を動かして良い構図を探す感じです。

20150324-1 20150324-3 20150324-2

良い感じにボケ具合がでて、水墨画のようですね。ピントが合ってる範囲は5ミリ程度でしょうか。

20150325-6 20150325-5 20150324-4

4月になると、桜の開花が進み、良い見頃になるでしょう。撮影もゆっくりできるので勧めポイントの1つです。

こんにちは、田口です、今回はモバイルAIRアプリの動作検証としてモバイル版のAdobe Scoutを使い、デスクトップ版のScoutに接続してGPUメモリの変化を確認してみようと思います。

20150217-1

まずScoutの役割ですが、プロファイラーツールとなります。これにより、AIR(Flash)の内部動作を視覚的に把握できるようになり、アプリケーションの不具合を突き止めやすくなります。Flash Builderにもプロファイラーは付いていますが、ScoutはGPUメモリの消費も把握でき、これはFlash Builderにはない機能です。

モバイル版のScoutの役割は、デスクトップ版のようなグラフィカルなプロファイラー機能は持っていません。スマートフォン上で動作するAIRアプリを検知して、キャプチャーした情報をデスクトップPCに送信します。そのため、送信先としてScoutを起動しているPCのIPアドレスが必要です。また当然ながら、モバイルAIRアプリを動作させるスマートフォンはwifi設定をオンにして無線LANの環境が必要です。

モバイルAdobe Scoutを起動すると、このようにIPアドレスを求められます。(Android版)

20150209-1
起動して接続を「有効」にする

IPアドレスを知るには、Windowsの場合、DOSプロンプトにて、ipconfigと打ち込むをPCのIPアドレスを知ることができます。基本的に、そのアドレスを入力すると接続できるはずですが、なかなかどうして繋がらないことがあるかもしれません。Wifiで接続できるPCを持って入れば、Scoutを起動するPCにPINGが届くか、確認してみてください。私の場合、セキュリティソフトがアクセスを遮断してうまく繋がらないことがありました。

20150216-3
接続できました。

PCとモバイルのScout両方起動した状態で、スマートフォン上のAIRアプリを起動すると、PCにデータがどんどん送信され、CPU、メモリ、GPUメモリなどの利用状態が分かります。下の例は、良くない状態で、画面移動を前後繰り返すとGPUメモリがどんどん上昇している状態です。

20150216-1

20150216-4
増え続けるGPUメモリの使用量

次に対処した結果です。同じように画面移動を前後繰り返すと、メモリが解放され安定していることが分かります。

20150216-2

20150216-5
期待通りの動作

GPUメモリの消費は、Flash BuilderのプロファイラーやStarling.showStatsプロパティでは分からないため、Scoutは重宝します。そのほかガベージコレクションの発生したタイミングなど色々な情報を確認することができますので、特にStage3DでAIRアプリを開発されている方にはお勧めです。

こんにちは、田口です、趣味で写真を撮っているのですが、特定の人に写真を公開するとき、使い勝手の良い写真置き場はないかと探していました。スタイルとしては、URLを送りスマホで見てもらうというコンセプトです。

要件は
・広告、不必要なものは表示されないこと
・タイル状にサムネイル一覧が表示されること
・スマートフォンでスムーズ・直感的に操作できること
・その写真をダウンロードできること
・URLの限定公開ができること
・写真劣化がないこと
・有料でも構わない

と、比較的ハードルを上げています。試したサイトは下記となります。オンラインストレージ系とオンラインアルバムサイト系に分かれます。

Flickr
Picasa
Bitcasa
Box
Adobe Revel
OneDrive
Dropbox
Teraクラウド

Flickr
無料で1Tバイト利用できるため、個人的に画像置き場として利用していますが、ブラウザでの閲覧はやや難があります。専用アプリの利用を促されますが、日本からは直接ダウンロードできません。※ Android OSは、Amazonアプリストア経由だと公式アプリをダウンロードすることができます。

20150125-1 20150125-2 20150125-3

Picasa
Googleの写真アルバムサイトで、単純な写真置き場としてはFlickrかPicasaかよく候補になります。ですが、スマートフォンで見てみると意外と洗練されていません。UIの画面サイズが合っていませんし、一世代昔のUIを感じさせるデザインです。

20150125-4 20150125-5

Bitcasa
一昔は、容量無制限で話題になりましたが、廃止されてから陰に隠れてしまった印象です。画像の一覧はリスト形式がデフォルトで、操作によりサムネイルが大きくなった表示に切り替わります。ただ上部が固定されてるためフレーム分割されたような操作感です。画像表示では、前後移動の操作ボタンが上部に配置されているため、スマホのインチサイズによって、指が届きにくいと思います。

20150125-6 20150125-7 20150125-8

Box
日本では馴染みがあまり無いですが、オンラインファイル共有サイトとしては2005年に設立された老舗サイトです。Bitcasa同様に画像だけでなくさまざまなファイルを置くことがでいますが、スマホで画像閲覧を主とする場合は、どのように見えるか。まずリスト状に画像が表示されます。1つ選択すると、その画像を閲覧できますが、前後の画像に直接移動することはできません。いったんリスト画面に戻り、次の画像を選択することになります。画像ビューアとしては、ちょっと厳しいですね。

20150125-9 <20150125-10

Adobe Revel
Adobeが提供するオンラインアルバムサイトです。月額500円(年間5200円)でディスク容量無制限という太っ腹なサイトです。容量無制限と聞くとどうしても、ホントに大丈夫なのか?とBitcasaの二の舞を考えてしましますが。それを抜きとして考えても、月額500円は安いですね。以前は、Jpeg形式しかアップロードできませんでしたが、現在はNEFなどのRAWファイルも置くことができます。スマートフォン上での使い勝手は、非常に良くタイル状に表示される一覧から、画像を選択して、スワイプにより前後の画像に移動できます。残念なのが、スマホ上では画像のダウンロードができません。また、画像の一括削除ができないため管理面ではもう一歩の印象です。また、Exif情報が表示されないのが非常に残念なところです。

20150125-11 20150125-12 20150125-13

OneDrive
OneDriveは、マイクロソフトが運営するオンラインストーレジです。画像一覧は、タイル状に表示され、各画像はスワイプによって切り替えることができます。画像の表示はAdobe Revelによく似ています。OneDriveは、上部の「・・・」ボタンのプルダウンメニューから、ダウンロードを選ぶことで画像を保存することができます。ただちょっと、ボタンが分かりずらいのが残念です。画像長押しでダウンロードできればとても便利ではないかと思います。全体的に要件はすべて満たしています。

20150125-20 20150125-21 20150125-22

Dropbox
Dropbox はオンラインストレージとして、画像以外にもさまざまなファイルを置くことができます。画像の一覧はタイル状に表示されます。個別の画像も画像左右にリンクがついて、前後の移動することができます。Revelのようなスワイプで移動することができません。ピンチ操作をすると1024x768の画像になり、画像を直接ブラウザに表示する感じで、「戻る」操作をしないと復帰しません。また、たまにプレビューに失敗することがあります。全体的に要件はすべて満たしています。2Gバイトまで無料で、1Tバイトの費用は1200円です。

20150125-14 20150125-15 Screenshot_2015-01-25-23-53-21

Teraクラウド
Teraクラウドは、オープンソースのOwnCloudをベースにしたもので、ジャストプレイヤーが運営をしています。この手のクラウド型のストレージは、Linuxが多いのでは?と想像しますが、ここはOracleのSolaris OSを利用して、国内にサーバーがあります。オープンソースならば自分で構築することもできますが、1Tバイト月額980円(年間9800円)のプラン設定は、VPSで自分で構築するよりはるかに安いです。ファイル共有機能を使うには有料プランのみ利用できます。指定される共有リンクのアドレスに、service=files が含まれると、画像はリストで表示されます。service=gallery に書き換えるとタイル状に表示されます。画像の移動は、画面をタップもしくはDropbox同様に左右のリンクで前後移動ができます。画像を長押しで保存することもできます。残念なのが、表示している画像が全体の何枚目なのか、そして最後の画像から最初の画像に戻るため終わりがどこか分かりにくい点です。このあたりは、Dropboxのほうが使い勝手は良いです。全体的に要件はすべて満たしています。

20150125-17 20150125-18 20150125-19

というわけで、今回は、OneDrive、Dropbox、Teraクラウドの3つが候補に残りました。いかがでしたでしょうか?ただこの分野は進歩が激しいので1年後は、また違う結果になるかもしれません。用途に応じてベストなサービスを使い分けるのが良さそうです。

1 / 1712345...10...最後 »