著者アーカイブ 村上

村上 著者:村上

【CSS】背景色の指定を解除する方法

何回か調べたので、今後も必要かもしれないと思い、備忘録としてまとめ。
CSS で 背景色を無効化する方法についてです。

 

と言っても、特に難しいことはなく、下記のように background-color プロパティに transparent を指定するだけです。

background-color: transparent;

なお、この値は background-color の初期値です。

こちらの指定方法は、teble の th に背景色を #FFF で指定したところ、別で指定していた罫線が消えてしまい、その対策のためです。
ちなみに、ブラウザは IE でした。
Google Chrome だと、罫線が消えることはなかったので、IE のみの挙動のようです。

 

以上、CSS で背景色の指定を解除する方法でした。
背景色の指定方法はよく使いますが、無効にすることは滅多にしないので、transparent という値については知りませんでした。
無効だから、と、うっかり none とか指定しそうです。
十分に気を付けます。

村上 著者:村上

【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アプリにスプラッシュページを追加する方法と、その画像サイズでした。

村上 著者:村上

【JavaScript】iframe内コンテンツ高さを取得する方法

今回は、JavaScript で iframe 内のコンテンツ高さを取得する方法についてです。
開発中のサービス内で、サイトのページを表示しているのですが、iframe をスクロールさせずに、さも一つのページのように見せたかったため、こちらの方法を調査しました。
そもそも、ページ内でさらにスクロールが発生すると、不便ですしね。

参考にさせていただいた記事はこちらから。

iframe内のコンテンツサイズに応じて、frameの高さを動的に変更する方法 – Qiita
https://qiita.com/Tanaaaaan/items/62df7d8ab061213aef58

2014年の記事ですが、特に問題なく動作しました。

ただし、こちらの方法は同一ドメインにあるページでしか使えないので、その点のみご注意ください。

 

さて、実装方法ですが…やっていることは、「iframe 内コンテンツの高さ取得 → iframe の高さ変更」のみです。
具体的には下記のとおり。

まず、iframe はこんな感じで指定します。

<iframe src='[ページURL]' width='100%' height='300px' frameBorder='0' scrolling='no' id='iframe' onLoad='iframeResize'></iframe>

iframe のリサイズ処理を書いた関数を onLoad に指定しています。
これにより、iframe の読み込みが完了したタイミングで、リサイズの関数が呼ばれます。

リサイズ関数はこちら。

function iframeResize() {
    const frame = document.getElementById('iframe');
    const height = frame.contentWindow.document.body.scrollHeight;
    frame.style.height = height + 'px';
}

上記を実行したところ、問題なく iframe の高さが変更されました。
枠線なし・スクロールなしなので、一枚のページのように見えます。
ただ、読み込んでいるページが原因なのか、iframe が読み込み完了になるまで結構時間がかかるので、ローディングのクルクル画像を追加するなど、読み込み中であることを表現したほうが良さそうです。

 

以上、iframe 内のコンテンツ高さを取得し、iframe 自体の高さを変更する方法でした。
参考にしていただければ幸いです。

村上 著者:村上

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

村上 著者:村上

【CSS】z-indexプロパティが効かない時の対処法【未解決】

タイトルにも明記しましたが、こちらは未解決です。
有効な対処法を発見したら、改めてまとめます…。

 

今回は、要素の重なり順を指定するための z-index プロパティについてです。
Webページのある要素を、最前面に配置しようとしたところ…何故か z-index が有効にならず、他の要素のしたに潜り込んでしまいます。
で、その対処法について検索したところ、一番上に表示されたのがこちらのページです。

z-indexの使い方:CSSで重なり順を指定する
https://saruwakakun.com/html-css/basic/z-index

こちらによると、z-index は position プロパティに static 以外が定義されている必要があるとのこと。
position プロパティのデフォルト値は static なので、relative や absolute など、なにかしらの値を定義する必要があります。
現在の要素の位置を変更したくない場合は、relative を指定しましょう。

が、z-index を指定した要素には、もともと position: absolute; が定義されており…こちらは関係なかったようです。
他の要素の CSS が関係しているようなので、もう少し調べてみたいと思います。

 

以上、CSS の z-index が効かなかった時の対処法でした。
私の環境では解決しませんでしたが…とりあえず、position プロパティを指定しているかを確認しましょう。

村上 著者:村上

【Cordova】アプリがオフラインになったことを検知する方法

タイトル通り、今回はアプリ(というより、アプリが実行されている端末?)がオフラインになったことを検知する方法についてです。
現在開発中のアプリは、当然ながらデータ通信が行われているので、アプリ利用時は常にオンラインである必要があるのですが、何らかの原因でオフラインになったときに、それを通知して、ネットワーク環境の確認を促すようにしたかったためです。

 

今回は、下記のCordovaのページを参考にしました。

オフライン – Apache Cordova
https://cordova.apache.org/docs/ja/3.1.0/cordova/events/events.offline.html

実装方法はとても簡単で、プラグインの追加なども不要!
私の環境では、index.js ファイル内に、下記のコードを追加するだけでした。

document.addEventListener("offline", onOffline, false);

function onOffline() {
    // オフラインの時に実行したい処理
}

サンプルコードを見ると、追加ファイルは index.html である場合もあるようです。
こちらは、開発環境に合わせて変更してください。

あとは、onOffline() 内に実行したい処理を記述すればOKです。
私は、Toast でエラーメッセージを表示しています。

なお、iOS の初回起動時、最初の オフラインイベントは少なくとも起動に 1秒かかりますとのこと。
こちらは仕様のようなので、諦めて受け入れるのが良さそうです。
また、Android や iOS は問題ありませんが、Windows Phone 7 など、端末によっては、オフラインが検知できないこともあるようなので、対応しているか十分注意してください。
…Android と iOS が対応していたら、ほぼほぼ大丈夫だとは思いますけどね。

 

以上、アプリがオフラインになったことを検知する方法でした。
プラグインも不要なので、実装しておいても良いと思います。

村上 著者:村上

【Cordova】アプリにステータスバーを追加する方法

設定したのがずいぶん前だったので忘れていました…。
今回は、Cordova で開発しているアプリにステータスバーを追加する方法についてご紹介します。
Android なら、特に意識せずに開発ができるのですが、iOS で、特にヘッダーが固定されているデザインの時にデザインが少々崩れます。
ステータスバーのエリアまで、アプリの画面になるので、ヘッダー固定で、それ以外の要素がスクロールになったとき、ヘッダーを突き抜けてスクロールしてしまいます。
スクリーンショットを取り忘れてしまったので文章で書いておりますが、わかりにくいですね…。
発生した現象については、下記の記事が参考になります。

cordova-plugin-statusbarの使い方。 – Qiita
https://qiita.com/nagao_norihiro/items/2e6189c147098dc63ab9

そのため、iOSを対象としているときや、どうしても必要ない!という場合以外は、念のため導入しておくことをおすすめします。

 

さて、ステータスバーを設定する方法ですが、cordova-plugin-statusbar というプラグインを使用します。
GitHub のページは下記から。

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

プラグインのインストールは、下記のコマンドを実行します。

cordova plugin add cordova-plugin-statusbar

インストールが終わったら、config.xmlpreference で設定します。
まず、ステータスバーを有効にする場合は、下記を追加します。

<preference name="StatusBarOverlaysWebView" value="false" />

次に、ステータスバーの背景色を下記で指定します。

<preference name="StatusBarBackgroundColor" value="#000000" />

なお、色の指定は16進数 6文字で指定してください。
白色だからと、うっかり #FFF と書いたところ…青になりました。
きっちり 6文字で記載してください。

あとは、iOS でよくある、ステータスバーとタップすると上までスクロールするという処理を追加したい場合は下記を追加ます。

<preference name="StatusBarDefaultScrollToTop" value="true" />

デフォルト値は false なので、ステータスバータップでスクロールをさせたい場合は、true に設定します。

最後に、私は使いませんでしたが、ステータスバーのスタイルを指定するときは、下記を使用します。

<preference name="StatusBarStyle" value="lightcontent" />

設定できるオプションは、default, lightcontent, blacktranslucent, blackopaque があるようです。
デフォルト値は lightcontent です。

 

以上、Cordova アプリにステータスバーを追加する方法でした。
Android のみであれば任意でOKだと思いますが、iOS で利用するのであれば、導入しておくことをおすすめします。

村上 著者:村上

【Cordova】iOS端末でのバウンススクロールを無効化する方法

Cordova アプリを iPhone の実機で動作確認したとき、何も設定していないと、端までスクロールした際にびよーんと伸びる、という現象が起こるかと思います。
今回はこの現象を無効化する方法について。
ちなみに、これのことを「バウンススクロール」もしくは「オーバースクロール」と呼びます。

 

今回参考にさせていただいた記事はこちらから。

Cordova iOS アプリで画面外にまでオーバースクロール (バウンド) しないようにする – Corredor
http://neos21.hatenablog.com/entry/2017/06/21/080000

早速、結論の実装方法を紹介すると、comfig.xml に下記を追加するだけです。

<preference name="DisallowOverscroll" value="true" />

こちらを追加してアプリを実行すると、画面端までいくとそれ以上スクロールしなくなります。
この設定を追加すれば、例えば Twitter のように、「タイムラインの一番上まで行ったときに、さらにスクロールすると再読み込みを行う」などの、スクロールがトリガーとなった処理を行いたいときに、挙動がおかしくなることを防ぐことができます。

 

ちなみに、今回のバウンススクロール禁止を検索していた時、下記の CSS プロパティにもヒットしました。

body {
   overscroll-behavior: none;
}

こちらは、Google Chrome などのブラウザでは正常に動作しましたが、Cordovaアプリでは特に効果はないようでした。
他にも、height: 100%;overflow: hidden; を使って、スクロール自体を発生させない&無効にするという方法もありましたが、他の要素がスクロールできなくなるなど影響があったので、こちらは採用しませんでした。
何より、comfig.xml に一行追加するだけ!という手軽さなら、こちらを採用しない手はないかと。

 

以上、CordovaアプリをiOSで実行した時のバウンススクロールを無効化する方法でした。
一気にアプリらしくなるので、是非、導入をご検討ください。

村上 著者:村上

【JavaScript】「The body of a for-in should be wrapped in an if statement to filter unwanted properties from the prototype」エラーの対処法

長いタイトルですみません…。
現在開発中のシステムで導入している ESLint という検証ツールで、タイトルにあるエラーが発生したので、対処法をまとめ。
エラー文は「The body of a for-in should be wrapped in an if statement to filter unwanted properties from the prototype.」というもので、翻訳したところ「for-inの本体は、プロトタイプから不要なプロパティをフィルタリングするためにif文でラップする必要があります。」とのことでした。
…いまいち意味が分からない…。

 

今回参考にさせていただいた記事はこちら。

JSLintオプション考察「unfiltered for in」|もっこりJavaScript|ANALOGIC(アナロジック)
http://analogic.jp/jslint-options-forin/

上の記事によると、for-in ループを使用したときに列挙されるプロパティには、実際のデータ以外にも、プロトタイプ連鎖から来たプロパティも含まれるとのことでした。
そのため、取得したデータがオブジェクト自身が持つプロパティなのか、プロトタイプ連鎖から来たプロパティなのかを判断する必要があります。
で、それは hasOwnProperty() を使うことで判断できるとのこと。

使い方は下記のとおりです。

const list = ['A', 'B', 'C', 'D', 'E'];
for (data in list) {
    if (list.hasOwnProperty(data)) {
        // 実行したい処理
    }
}

3行目で、データの判別を行っています。
こちらを追加したところ、エラーが解消され、問題なく実行できました。

 

以上、JavaScript の for-in 文で発生したエラーの対処方法でした。
なおこの後、実装しているコードでは for-in よりも forEach の方が向いているとわかり、上記は使用しないように修正しました…。
が、うっかりと再発させそうなエラーだったので、備忘録としてまとめました。
もし、同じことでお困りの方は参考にしていただければと思います。

村上 著者:村上

【React】エンターキーが押されたことを検知する方法

チャット画面を作成していたとき、エンターキーでテキスト入力エリアに入力したテキストを送信するという処理を行いたかったので、その方法について。
React と書いていますが、恐らく通常の JavaScript でも扱えるはず。

今回参考にさせていただいた記事はこちらから。

Reactでエンターキーのイベントを取得する方法 – 1日1%成長するブログ
http://masarufuruya.hatenadiary.jp/entry/2017/09/06/200551

 

さて、実装方法ですが、キー入力されたことは onKeyDown イベントで検知します。

<input type='text' onKeyDown={(e) => this.handleKeyDown(e)} />

上記は、なにかしらのキーが押された場合、その都度 handleKeyDown 関数が呼び出されます。

で、handleKeyDown 関数の中身は下記のとおりです。

handleKeyDown(e) {
  if (e.keyCode === 13) {
    // エンターキーが押された時の処理
  }
}

エンターキーは keyCode では 13 という数字が割り振られているとのことだったので、keyCode の値を見て判断します。
あとは、この if 文の中で、テキストを送信した際に行いたい処理を実行すればOKです。
非常に簡単でした!

 

以上、エンターキーが押されたかどうかを検知する方法でした。
なお、Androidの実機と iOS の Simulator でも動作確認を行いましたが、問題なく動作しました。
実行ボタンが無くなると、やはりレイアウトがすっきりする気がします。
是非、ご参考にしていただければと思います。