カテゴリーアーカイブ iOS

村上 著者:村上

【Cordova】cordova-plugin-media使用時の音楽ファイルパスの指定について

dちょっとハマりかけたので、備忘録としてまとめ。
昨日ご紹介した、Cordova アプリで音楽ファイルを扱うためのプラグイン「cordova-plugin-media」の音楽ファイルのパスの指定方法についてです。

なお、昨日の記事はこちらから。

【Cordova】音声ファイルを扱うためのプラグイン「cordova-plugin-media」

 

で、ハマりかけたのは、Android での音楽ファイルのパスの指定方法についてです。
単純に、画像ファイルなんかと同じように、www ディレクトリ以下のパスを指定すればOKかと思ったら、それでは動かず、Code: 1 のエラーが発生しました。
なお、エラーコード 1 は、MediaError.MEDIA_ERR_ABORTED というエラーとのことです。
Aborted は「中止」という意味なので、エラーで途中で中断したという感じかな?

で、色々検索したところ、下記の記事がヒットしました。

【Monaca】Mediaプラグインを使う時に気をつけたいこと【Cordova】|webico
https://blog.webico.work/monaca-cordova02

その中で、下記のようにファイルパスを取得している関数があり、それを音楽ファイルの頭につけていたので、それを参考に修正しました。

// パス取得の関数
function getPath() {
    let str = location.href;
    let i = str.lastIndexOf('/');
    return str.substring(0, i+1);
}

私の場合、Android の時は音楽ファイルの頭に file:///android_asset/www/ を付けるようにしたら問題なく動作するようになりました!
なお、iOS の場合、単に www ディレクトリからのパスだけでOKだったので、cordova-plugin-device を利用して、プラットフォームごとに処理を切り替えるようにしましょう。

最終的なコードは下記のようになりました。

playMedia() {
  let src = '[www からの音楽ファイルのパス]';
  if (window.device.platform == 'Android') {
    src = 'file:///android_asset/www/' + src;
  }
  let media = new window.Media(src);
  media.play();
}

なお、前の記事でも書きましたが、Android の場合はリリースの処理をきちんと行いましょう。
私は…今から追加します。

 

以上、cordova-plugin-media の音楽ファイルのパスの指定方法でした。
お困りの方がいましたら、参考にしていただければと思います。

  • この記事いいね! (0)
村上 著者:村上

【Cordova】アプリのアクセス解析を行えるプラグイン「google-analytics-plugin」

今回は、Google Analytics を Cordova アプリで使うためのプラグイン「google-analytics-plugin」についての紹介です。
そう言えば入れてなかった…と気づき、実装。

GitHub のページはこちらから。

https://github.com/danwilson/google-analytics-plugin
https://github.com/danwilson/google-analytics-plugin

 

実装方法については、こちらのサイトが分かりやすいかと。

Google Analyticsプラグインを使ってアプリの行動分析を行おう|モナカプレス
https://press.monaca.io/atsushi/447

まず下記のコマンドでプラグインをインストールします。

cordova plugin add https://github.com/danwilson/google-analytics-plugin.git
// または
cordova plugin add cordova-plugin-google-analytics

インストールが終わったら、下記のコードを deviceready イベントのタイミングで実行します。

window.ga.startTrackerWithId('[トラッキングID]');

画面を追跡するには下記のコードを利用します。

window.ga.trackView('[画面名]')

また、ボタンを押したり、検索を実行したタイミングなどでイベントを記録したい場合には、下記のコードを追加します。

window.ga.trackEvent('Category', 'Action', 'Label', Value);

Label と Value はオプションで、Value には数値が入ります。

意外と簡単!と思ったのですが、実は最初のトラッキング ID の指定から躓いております。
Google Analytics のページで、新しいプロジェクトを追加したのですが、モバイルアプリを選択すると、「トラッキングIDの発行」ではなく「アプリの追加」になっていて、ここでは ID が取得できないのかも?
ならどこに?と探しているのですが、未だ見つけられておりません。

で、色々見て調べていたのですが、そもそも、プロジェクト作成時に Firebase のプロジェクトと連携させたんですよね。
…これは、Google Analytics ではなく、Firebase のアナリティクスを使った方が早いのでは…!
ということで、その方向で進めてみたいと思います。

 

以上、Google Analytics を Cordova アプリに導入するためのプラグイン「google-analytics-plugin」のご紹介でした。

  • この記事いいね! (0)
村上 著者:村上

【Cordova】ソフトウェアキーボードを制御するためのプラグイン「cordova-plugin-keyboard」

現在開発中のCordovaアプリで、iOS のソフトウェアキーボードを制御したくて導入したプラグイン「cordova-plugin-keyboard」についてのご紹介です。
開発中のアプリには、LINE のトーク画面のように入力欄が画面下にぴったり張り付いているようなレイアウトになっているのですが、文字を入力するとき、キーボードのサイズが若干変わったタイミングで、入力欄がキーボードの裏に隠れてしまう不具合が発生しました。
それの対処法として、今回紹介するプラグインを使いました。
なお、この現象が発生するのは iOS のみで、どうやら OS のバグが原因のようでした。
Android だと、全く問題なかったので、気づくのに遅れてしまいました…。

 

さて、では対処法ですが、まず導入したプラグインの GitHub はこちらから。

GitHub – cjpearson/cordova-plugin-keyboard: Keyboard Plugin for Cordova
https://github.com/cjpearson/cordova-plugin-keyboard

他にも、cordova-plugin-ionic-keyboard というよく似たプラグインもありましたが、私の実現したいことにはそぐわなかったので、こちらは使用しませんでした。

インストールは、下記のコマンドを実行してください。

cordova plugin add cordova-plugin-keyboard --save

インストールが終わったら、任意のメソッドを導入します。
私は下記の2つのメソッドを使いました。

  1. cordova.plugins.Keyboard.shrinkView
  2. cordova.plugins.Keyboard.disableScrollingInShrinkView

1つ目のメソッドは、キーボードが表示されたときに、WebView のサイズを縮小するかどうかを指定できます。
指定する方法は下記の通りです。

cordova.plugins.Keyboard.shrinkView(true);

true を指定すると、キーボード出現時に WebView のサイズが縮み、スクロール可能になります。
false だと、キーボードが表示されても WebView のサイズは変わりません。
というか、iOS の場合、こうして指定しないと、キーボードが表示されても WebView のサイズは変わらないんですね…。
それなら、レイアウトが崩れたのも納得です。

次に、キーボードが表示されている間、スクロールを許可するかどうかを指定できるメソッドです。

cordova.plugins.Keyboard.disableScrollingInShrinkView(true);

スクロールを無効にするためには、true を指定します。
本当は、スクロールを有効にしたかったのですが、たまにレイアウトが崩れて謎の余白が発生したりするので、しぶしぶスクロールを禁止にしました。
レイアウト崩れがなんとかなりそうだったら、スクロール許可しようと思います。

なお、このメソッドは iOS しかサポートされていませんので、ご注意ください。
…でも、そもそも Android だと、これを使う必要もないので、これがあってもなくても特になんの影響もないんですけどね。

また、私の環境では、上記で紹介した書き方ではエラーが発生したので、下記のように書き直しました。

// 上記の記述でエラーが発生した場合、下記の記述に変更
window.Keyboard.shrinkView(true);
window.Keyboard.disableScrollingInShrinkView(true);

この対応が正しいのかはわからないのですが、問題なく期待する動作をしたので、これでOKだと思います。

私が使ったメソッドはこの2つですが、他にも、キーボードが表示されているか検知できるプロパティや、キーボードが表示/非表示になったときに実行されるイベントもあります。
イベントには、キーボードが表示/非表示になる前に発火するものもあるので、状況に応じて使い分けてください。

 

以上、ソフトウェアキーボードを制御するためのプラグイン「cordova-plugin-keyboard」のご紹介でした。
Cordovaアプリ開発中に、iOS のソフトウェアキーボードに悩まされた方は、是非ご参考にしていただければと思います。

  • この記事いいね! (0)
takahashi 著者:takahashi

テレビでもラジオでもない放送形態 i-dio (アイディオ)音楽好きにはうれしいサービスかもしれない。

TVでもラジオでもない、第三の放送形態として、”i-dio”というサービスが始まっているのをご存知でしょうか。

i-dio


新放送サービス『i-dio』は、地上アナログテレビ放送終了後に空いた周波数帯 (VHF-Low帯=99MHz~108MHz)を利用して創設された、既存のテレビでもラジオでもない全く新しい”第3の放送”です。受信機をお持ちであれば、契約などは原則必要ありません(今後有料サービスが個別に提供されることがあります)。
「i-dio」は、映像・音響・データなど、デジタルデータなら何でも送ることが可能です。また放送波で送信するため、通信とは異なり、輻輳もなく、不特定多数に情報を送ることができます。好きなときにコンテンツを楽しむことが出来る、蓄積型放送も予定しています。

http://www.i-dio.jp/service/

ということで、はじめからデジタルデータで送信することを前提にしており、映像も音声も送ることができ、なおかつ音声放送は高音質で送ることも可能とのことです。

なお、現在は音楽を中心としたコンテンツを配信するチャンネルが多いようです。

i-dioを受信するには専用のチューナーが必要ですが、現時点で既に(Radikoのような) サイマル放送も行わており、専用アプリからインターネット回線を経由して放送を聞くことも可能なようです。

TS PLAY by i-dio

TS PLAY by i-dio

VIP Co.,Ltd.無料posted withアプリーチ

従来の浜松で聞けるラジオ放送のうち、音楽メインのチャンネルといえば平日の”ラジオ日経第二”ぐらいしかなかったので、音楽好きにとってはありがたいサービスかもしれません。

興味のある方は一度試してみてはいかがでしょうか。

  • この記事いいね! (0)
村上 著者:村上

【CSS】iOSでiframe要素が縦に伸びてしまうときの対処法

本日遭遇した現象で、iPhone で見たときに、iframe 要素が縦にびよーんと伸びてしまい、スクロールできませんでした。
ちなみに、Android では問題ありませんでした。
…この端末に依存するタイプの CSS のずれが本当に苦手…。

 

さて、こちらの対処法については、下記の Qiita の記事を参考にさせていただきました。

スマホサイトなどでiframe要素をスクロールさせる方法 – Qiita
https://qiita.com/ta__ho/items/904290fa0c8c60b25af1

まず、HTML要素は下記のようになっているものとします。


<div id='content'>
    <iframe src='[表示したいURL]' />
</div>

で、この時、CSS は下記の指定をしていました。

#content {
    width: 100%;
    height: 100%;
}
#content iframe {
    width: 100%;
    height: 100%;
}

Android であれば、上記のコードで問題ないのですが、iOS だと iframe 内の縦長のページが下に伸びてはみ出してしまい、スクロールすらできない状態でした。
そのため、#content に下記を追加します。

#content {
    width: 100%;
    height: 100%;
    /* 下記を追加 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

iframe には追加するプロパティはありません。
ここ重要なのは、overflow プロパティです。
overflow の初期値は visible で、要素に収まらない分ははみ出して表示するので、当然といえば当然ですね。
逆に、変更前のコードで動いてしまう Android が凄い…。
なお、横に伸びてしまう場合は、overflow-x プロパティを使用してください。

-webkit-overflow-scrolling プロパティでは慣性スクロールを有効にしています。
これを追加することで、滑らかなスクロールが実現できます。
これがないと、スクロール途中で突っかかって、スムーズにスクロールできず、かなりストレスになる場合があるので、iOS で利用される場合には、追加することをおすすめします。

 

以上、iOS で iframa 要素が縦に伸びてしまい、スクロールできない時の対処法でした。
どなたかの参考になれば幸いです。

  • この記事いいね! (0)
村上 著者:村上

【Xcode】「Command PhaseScriptExecution failed with a nonzero exit code」エラーの対処法【未解決】

今回は Xcode でプロジェクトをビルドした際に発生したエラーについて。
タイトルに書いてある通り、未解決なのですが、いくつか参考になりそうな記事は見つかったので、とりあえずそれをまとめました。
今後解決できたら、改めてその手順についてまとめる予定です。

 

エラーは「Command PhaseScriptExecution failed with a nonzero exit code」というもの。
翻訳すると、「コマンドPhaseScriptExecutionがゼロ以外の終了コードで失敗しました」とのことですが…これだけでは意味不明です…。

で、解決策ですが、参考になりそうだったのがこちらの2つ。

[Swift, Xcode] Command PhaseScriptExecution failed with a nonzero exit code – Qiita
https://qiita.com/kamata1729/items/885ae2cf2a9b06594adf

Command PhaseScriptExecution failed with a nonzero exit codeとの戦い – Qiita
https://qiita.com/masa-321/items/19f66557dcff65553f18

解決方法として共通しているのは、下の二つでした。

  1. キーチェーンアクセスを起動し、ロック→解除を実行後、アプリを再ビルド
  2. Pod を一度クリーン後、再インストール

ただ、こちらを実行しても、私の環境では解決できませんでした…。
アプリのクリーン→再ビルドも行ってみましたが、こちらも効果なし。
…もう少し、調査します。

 

以上、Xcode で発生したエラー「Command PhaseScriptExecution failed with a nonzero exit code」の対処法でした。
私は上記の方法では解決できませんでしたが…参考になれば幸いです。

  • この記事いいね! (0)
村上 著者:村上

【Cordova】アプリの再読み込みを実行する方法

実際に使うかどうかはまだ未定ですが…アプリの再読み込みを実行したかったので、その方法について。

参考にした投稿はこちらから。

cordova – Restart my Phonegap app programmatically
– Stack Overflow

https://stackoverflow.com/questions/15477887/restart-my-phonegap-app-programmatically

この投稿の一番上にあった解決方法を採用しました。

 

さて、実装方法ですが、再読み込みを行いたいタイミングで、下記のコードを実行するだけです。

window.location.reload();

私の環境では、Android、iOS ともに、問題なく動作しました。

なお、オンラインになった際の検知は、下記のコードを実行すれば良さそうです。

document.addEventListener("online", callbackFunction, false);

ただ、上記のコードは、オンラインになった時や、デバイスがインターネットに接続した時に発火するので、オフライン → オンラインの検知に使用する際は少し工夫する必要がありますね。
私の場合は上記コードではなく、オフラインになったらダイアログを表示し、それを OK ボタンで閉じる際にリロードの処理を行うようにしています。
…このやり方があっているかは分かりませんが…とりあえず、今のところ不測の動作は発生していないので、良しとしています。

 

以上、アプリの再読み込みを行う方法でした。
ご参考にしていただければ幸いです。

  • この記事いいね! (0)
著者:杉浦

Apple製品開発者用ドキュメントアーカイブの紹介

 Appleは開発者用ドキュメントを多く公開しており、それらは次のページにまとまっています。
Apple Developer Documentation
日本語ドキュメント – Apple Developer
 残念ながら日本語ドキュメントは数が少ないです。日本語ドキュメントのうち現役でリンクが張られているものは12本ですが、英語版は177本です。
 英語版は数多く、ドキュメント内の繋がりも複雑です。広範なApple製品全般を扱っているため、目当てのものを探すのは一苦労です。Documentation Archiveを用いると情報の新鮮さは多少落ちるでしょうが検索はずいぶん楽になります。
Documentation Archive
 下図の様にわかりやすくまとめられた表から目的のものにアクセスできます。ここから古いものを見つけて中にある単語らをキーワードに最新があるかないかチェック、あればそちらを見つからなければ手元にある方を参照できます。

 最近よくお世話になっているのは赤丸のSafari Web Content Guideです。このガイドの中にはSafariがHTML、CSS、JavaScriptの何にどう対応しているかが記述されています。例えばHandling Events章のSupported Events節にはload, unloadイベントが廃止予定で非推奨、代わりにpageshow, pagehideを使うべき、とあります。これはMDN Web DocsでもCan I useでもわからず問題点の確証を得るのが結構手間でした。

  • この記事いいね! (0)
村上 著者:村上

【Cordova】Android・iOSのスプラッシュ画像のサイズと指定方法

毎回毎回サイズが分からなくなるのでまとめ。
今回はスプラッシュスクリーン画像のサイズについてです。

なお、アイコンのサイズについては、以前まとめましたので、よろしければこちらもご参照ください。

【Cordova】アプリのアイコンの設定方法とAndroidのアイコンサイズまとめ

タイトルに Android と書いてありますが、iOS のサイズも載せてあります。

 

プラグインは、以前にも紹介した cordova-plugin-splashscreen を使います。
下記コマンドでインストールしてください。

cordova plugin add cordova-plugin-splashscreen

インストールが完了したら、スプラッシュスクリーン画像を用意します。
Androidは下記のサイズです。

  • ldpi – 200 x 320
  • mdpi – 360 x 640
  • hdpi – 480 x 800
  • xhdpi – 720 x 1280
  • xxhdpi – 1080 x 1920
  • xxxhdpi – 1440 x 2560

ちなみに、横幅 × 高さなのでご注意ください。
画像が用意出来たら、res/screen/android ディレクトリを作成し、そこに保存します。
で、config.xml に下記を記述してください。
なお、ファイル名は変更してもOKです。

<platform name="android">
    <preference name="SplashMaintainAspectRatio" value="true" />
    <splash density="hdpi" src="res/screen/android/android-hdpi.png" />
    <splash density="ldpi" src="res/screen/android/android-ldpi.png" />
    <splash density="mdpi" src="res/screen/android/android-mdpi.png" />
    <splash density="xhdpi" src="res/screen/android/android-xhdpi.png" />
    <splash density="xxhdpi" src="res/screen/android/android-xxhdpi.png" />
    <splash density="xxxhdpi" src="res/screen/android/android-xxxhdpi.png" />
</platform>

ちなみに、2行目の SplashMaintainAspectRatio プロパティは、画面サイズに合わせて画像を引き延ばすか、もしくは縦横比はそのままで拡大/縮小するかを指定できます。
上記のように true を指定すると、縦横比そのままの拡大/縮小になります。

次に、iOSの設定です。
iOS は、config.xml に記載する設定にもファイルサイズも記載されているので、その通りのサイズでご用意ください。 画像は、res/screen/ios に保存します。

<platform name="ios">
    <splash height="480" src="res/screen/ios/Default.png" width="320" />
    <splash height="960" src="res/screen/ios/Default@2x.png" width="640" />
    <splash height="1136" src="res/screen/ios/Default-568h@2x.png" width="640" />
    <splash height="1334" src="res/screen/ios/Default-667h@2x.png" width="750" />
    <splash height="2208" src="res/screen/ios/Default-736h@3x.png" width="1242" />
    <splash height="1024" src="res/screen/ios/Default-Portrait.png" width="768" />
    <splash height="2048" src="res/screen/ios/Default-Portrait@2x.png" width="1536" />
</platform>

あとは、アプリをビルド・実行すればOKです。
パスやファイル名などが間違っていなければ、問題なく表示されるはずです。

 

以上、Cordovaアプリにスプラッシュページを追加する方法と、その画像サイズでした。

  • この記事いいね! (0)
村上 著者:村上

【Cordova】外部サイトをアプリ内ブラウザで表示できるプラグイン「cordova-plugin-inappbrowser」

昨年末にも似たような記事を投稿しましたが、今回はプラグインを使って外部サイトアプリ内ブラウザで表示する方法について。
まだ iOS でしか動作検証できていませんが、結構良い感じに動作したので、Android でも確認して、採用するか決めたいと思います。

使用したプラグインは、「cordova-plugin-inappbrowser」です。
GitHubはこちらから。

GitHub – apache/cordova-plugin-inappbrowser: Apache Cordova Plugin inappbrowser
https://github.com/apache/cordova-plugin-inappbrowser

ただ、今回は下記のサイトの方が参考になりました。

InAppBrowser プラグイン|Monaca Docs
https://docs.monaca.io/ja/reference/cordova_6.2/inappbrowser/

モナカのドキュメントのページですが、プラグインなどは同じものを使えるので問題なし。

 

実装方法ですが、まずは下記のコマンドでプラグインをインストールします。

cordova plugin add cordova-plugin-inappbrowser

インストールが完了したら、あとは下記の関数を呼び出して、サイトを開くだけ。

const url = '[開きたいページのURL]';
cordova.InAppBrowser.open(url, '_blank', 'location=no');

実際の画面はこんな感じ。

私のコードでは、一連の処理を抜粋して書くとこうなります。
ちなみに、React を使用しておりますので、悪しからず。

openSite(url) {
  cordova.InAppBrowser.open(url, '_blank', 'location=no');
}
render() {
  const url = '[開きたいページのURL]';
  return (
    <main>
      <a onClick={() => this.openLink(url)}>ページを開く</a>
    </main>
  );
}

なお、cordova.InAppBrowser.open() には引数がいくつかあります。
個人的に指定しておいたほうがいいと思うのは、第3引数の、location=no ですね。
こちらはロケーションバーの表示/非表示の設定を行えます。
で、デフォルト値が Yes なのですが…正直、格好悪い…!
そのため、申し訳ないのですが、速攻非表示にさせてもらいました…。
他にも、下の「完了」の文言を変えたり、新規のウィンドウを開く際に、キャッシュやCookie を削除することもできるらしいです。
その辺りは、状況に応じて設定してください。
なお、複数設定する場合、プロパティをスペースなしのカンマ区切りで指定してください。

 

以上、Cordova アプリで外部サイトをアプリ内ブラウザで表示する方法でした。

最後に、以前投稿した記事についてもご紹介しておきます。

【Cordova】外部サイトをアプリ内ブラウザで表示する方法
https://cpoint-lab.co.jp/article/201811/【cordova】外部サイトをアプリ内ブラウザで表示する/

こちらは Whitelist を利用してアプリ内ブラウザを開く方法です。
同じように外部サイトを開くことはできるのですが、前のページに戻れなかったので、この方法は却下しました。

  • この記事いいね! (0)