Corredor

ウェブ、プログラミングの勉強メモ。

スマホ向け Web アプリを作る時に使える CSS : user-select と -webkit-touch-callout

スマートフォンサイトのためのHTML5+CSS3 [リフロー版]

スマートフォンサイトのためのHTML5+CSS3 [リフロー版]

以前、overflow-scrolling という CSS プロパティを紹介した。スマホで慣性スクロールを有効にするためのプロパティだ。

neos21.hatenablog.com

今回はその他にスマホ向け Web アプリを構築する際に使えそうな CSS を2つ紹介する。

user-select: none

user-select: none というプロパティは、テキストの選択を禁止することができる。テキストを長押ししても、文字列を選択状態にできなくなる。

これはスマホに限らないので、PC サイトでも「特定の文字列だけ選択させたい (それ以外の文字列を選択・コピーさせたくない)」といった時に気軽に使うことができる。ベンダプレフィックスもあるので以下のサイトを確認してみてほしい。

-webkit-touch-callout: none

-webkit-touch-callout: none は、リンクや画像を長押しした時に、「新規タブで開く」だとか「画像を保存する」とかいったメニューを表示させないようにするもの。

この辺の操作ができてしまうと普通の Web ページ感が拭えないので、Web アプリ感を出すために入れておきたい。


この2つのプロパティを適用すると、テキストや画像を操作できなくするので、スマホアプリっぽい Web ページを作れるようになるだろう。

画面の明るさを操作できる cordova-plugin-brightness

Cordova アプリでデバイスの画面の明るさを操作できる、cordova-plugiin-brightness を試してみた。

プラグインのインストール

プラグインのインストールはいつもどおり。

$ cordova plugin add cordova-plugiin-brightness

明るさを変更する

実際にデバイスの明るさを変更するには、cordova.plugins.brightness.setBrightness() を叩く。明るさは第1引数で指定する。

// 第1引数で、明るさを 0.8 (80%) にする
cordova.plugins.brightness.setBrightness(0.8, () => {
  console.log('明るさを設定しました');
}, (error) => {
  console.log('明るさの設定に失敗', error);
});

明るさは 0 が一番暗く、1 が一番明るい。中くらいにするには 0.5 と設定する、というワケだ。

また、-1 を指定すればシステムデフォルトの明るさを選べる。

現在の明るさを取得する

逆に、現在の明るさの設定値を取得することもできる。

cordova.plugins.brightness.getBrightness((amount) => {
  console.log('現在の明るさは [' + amout + '] です');
}, (error) => {
  console.log('明るさの取得に失敗', error);
});

コールバック関数内の amount がその値になる。0 から 1 の間の値で取得できる。


他にも、スクリーンが暗くなるスリープを防ぐ brightness.setKeepScreenOn(true); といったメソッドもある。

手軽に画面の明るさを操作できるので、アプリの画面に表示したバーコードを別のデバイスで読み取る、というような IoT 的な使い方をする時なんかに使えるだろう。

HTML5とJavaScriptによるiPhone/Android両対応アプリ開発ガイド (DESIGN & WEB TECHNOLOGY)

HTML5とJavaScriptによるiPhone/Android両対応アプリ開発ガイド (DESIGN & WEB TECHNOLOGY)

  • 作者: 大友聡之,坂手寛,清水崇之,城口良太,高木基成,床井幹人,野島祐慈,渡辺俊輔
  • 出版社/メーカー: 翔泳社
  • 発売日: 2013/03/12
  • メディア: 大型本
  • クリック: 1回
  • この商品を含むブログ (2件) を見る

ぼくが Fork した cordova-background-video を紹介する

HTML5とApache Cordovaで始めるハイブリッドアプリ開発

HTML5とApache Cordovaで始めるハイブリッドアプリ開発

cordova-background-video という Cordova プラグインがある。HTML ページの背景に撮影中の映像を表示することができるので、ビデオのプレビュー画面の上に任意の HTML 要素を配置したりすることができる。

以前、このプラグインを Fork して、iOS デバイスで 1080p の動画が撮影できるように改造した話をしたが、このプラグインの特徴や使い方を紹介しようと思う。

neos21.hatenablog.com

Fork したコードは以下。

プラグインのインストール方法

自分が Fork したプラグインは GitHub で公開しているので、以下のようにインストールする。

$ cordova plugin add https://github.com/Neos21GitHub/cordova-background-video.git

録画開始

動画の録画を開始するには、cordova.plugins.backgroundvideo.start() メソッドを叩く。

cordova.plugins.backgroundvideo.start('videoFileName', 'back', () => {
  console.log('録画開始');
}, (error) => {
  console.log('録画開始に失敗', error);
});

() => 部分は ES2015 のアロー関数という記法で、function() と同義。Cordova アプリでも Babel でトランスパイルすることなく ES2015 の記法が使えるようになっているようなので使ってみた。

第1引数がファイル名になる。これの後ろに .mp4 が付く。第2引数は back でバックカメラ、front でフロントカメラ (自撮り) を指定できる。

このメソッドを叩くと、ページの背景に録画中の映像が表示される。html 要素に background-color を指定してしまうと、プレビューが隠れてしまうようなので注意。

iOS のカメラ実装には詳しくないのだが、このプラグインは AVFoundation というフレームワークを使っている。UI を加工しやすいようなのでこのプラグインで使われていたのだろう。どうも純正のカメラアプリで撮った時より画質が落ちるっぽいのだが、録画開始・終了時にシャッター音が鳴らないという副次的な効果があったりもする。

動画ではなく写真撮影の場合だと、cordova-plugin-camera-preview という類似プラグインがあるので、こちらも見てみると良いだろう。

録画中はフォーカスや露出等の設定はできない。プレビューは完全に表示のみで、画面をタップしたりしても何も反応しない。完全にオートフォーカス・自動露出補正にお任せになる。

録画停止

録画を終了するには、cordova.plugins.backgroundvideo.stop() を叩く。

cordova.plugins.backgroundvideo.stop((fileUrl) => {
  console.log('録画終了・次の File URL に動画ファイルを保存しました', fileUrl);
}, (error) => {
  console.log('録画終了に失敗', error);
});

録画を終了させると、録画したファイルの保存場所を示す URL を返す。

動画ファイルは cordova.file.cacheDirectory 直下に、start() 時に指定した 【fileName】 + '.mp4' というファイル名で保存される。もし fileName.mp4 という同名のファイルが既にあった場合は、fileName_1.mp4 というようにアンスコ + 連番を自動付与してくれて別名保存されるので、既存ファイルを上書きすることはない。

Fork 元の状態だと、画質や音声の有無、保存先ディレクトリを選択できるかのような引数が用意されていたが、それらはいつの間にか使われなくなっていたので、Fork した時に JS 側で記述する引数を整理した。結局、

  • 動画は 1080p クオリティ固定で撮影させる (音声アリ)
  • ファイルの保存先は cordova.file.cacheDirectory 直下に固定

とした。

動画ファイルの扱い

動画ファイルはカメラロールには保存されず、cordova.file.cacheDirectory 直下に保存される。データを取り出すには iTunes で同期するとかしないといけない。

動画ファイルをカメラロールに保存するには cordova-plugin-photo-library といった別のプラグインを利用する必要がある。ただ、自分で試した限りだと、stop() のコールバック関数内でカメラロールに保存しようとすると、アプリ起動後の初回の録画のみ保存でき、2回目の録画から保存に失敗するようになってしまった。コールバック関数内でも少し実行のタイミングを遅らせてあげないといけないっぽい?

また、なぜか cordova-plugin-photo-library ではフォトライブラリにファイルを保存するためのアクセス許可がうまく得られなかった。cordova-plugin-ios-camera-permissions というアクセス許可を得られるようなプラグインがあったので入れてみたがうまくいかず。

苦肉の策で、cordova-plugin-camera でフォトライブラリにアクセスするボタンを作り、予めココでフォトライブラリへのアクセス許可だけを得るようにしてみた。実際のアプリ開発ではコレじゃあダメなので、やりようを考えないといけない。

カメラロールにエクスポートしても、元のファイルを削除する機能はないので、cordova-plugin-file を利用して cordova.file.cacheDirectory 配下から目的のファイルを探して削除する機能も別途作ってやらないといけないだろう。


このプラグイン単体では本当に録画のみで、録画したファイルをアレコレするには他のプラグインも組み合わせる必要があるが、何よりページの背景にプレビューを表示できるという特殊な UI は試してみる価値はあるだろう。