カテゴリーアーカイブ OS

村上 著者:村上

【Swift】iOSアプリにチュートリアルを簡単に実装できるライブラリ「Gecco」

iOS アプリで、初回起動時にチュートリアルを表示したいときにオススメのライブラリ「Gecco」のご紹介です。
こちらのライブラリでは、実際の画面にオーバーレイ表示して、各ボタンなどの使い方を説明する「コーチマーク」のチュートリアルを実装できます。

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

GitHub – yukiasai/Gecco: Simply highlight items for your tutorial walkthrough, written in Swift
https://github.com/yukiasai/Gecco

 

実装方法は、まず Podfile に下記を追加して、pod install を実行します。

pod 'Gecco'

そして AnnotationViewController.swift というファイルを、下記の内容で追加します。

import UIKit
import Gecco

class AnnotationViewController: SpotlightViewController {
    
    var annotationViews: [UIView] = []
    
    var stepIndex: Int = 0
    
    override func viewDidLoad() {
        super.viewDidLoad()
        delegate = self
        
        // ボタン等を強調した時に表示したいテキストがある場合は、ここで annotationViews に追加する
        let message1: UILabel = UILabel(frame: CGRect(x:0, y: 0, width: self.view.bounds.width, height: 150))
        message.text = "チュートリアルで表示したいメッセージ1"
        message.layer.position = CGPoint(x: self.view.bounds.width/2, y: 300)
        self.view.addSubview(message)
        annotationViews.append(message)
    }
    
    func next(_ labelAnimated: Bool) {
        updateAnnotationView(labelAnimated)
        
        let screenSize = UIScreen.main.bounds.size
        switch stepIndex {
        case 0:
            spotlightView.appear(Spotlight.RoundedRect(center: CGPoint(x: screenSize.width/2, y: 320), size: CGSize(width: screenSize.width, height: 500), cornerRadius: 50))
        case 1:
            spotlightView.move(Spotlight.Oval(center: CGPoint(x: screenSize.width - 28, y: 42), diameter: 50))
        case 2:
            spotlightView.move(Spotlight.Oval(center: CGPoint(x: 28, y: 42), diameter: 50))
        case 3:
            dismiss(animated: true, completion: nil)
        default:
            break
        }
        
        stepIndex += 1
    }
    
    func updateAnnotationView(_ animated: Bool) {
        annotationViews.enumerated().forEach { index, view in
            UIView.animate(withDuration: animated ? 0.25 : 0) {
                view.alpha = index == self.stepIndex ? 1 : 0
            }
        }
    }
}

extension AnnotationViewController: SpotlightViewControllerDelegate {
    func spotlightViewControllerWillPresent(_ viewController: SpotlightViewController, animated: Bool) {
        next(false)
    }
    
    func spotlightViewControllerTapped(_ viewController: SpotlightViewController, isInsideSpotlight: Bool) {
        next(true)
    }
    
    func spotlightViewControllerWillDismiss(_ viewController: SpotlightViewController, animated: Bool) {
        spotlightView.disappear()
    }
}

上記ファイルを追加したら、チュートリアルを表示したい ViewController の任意の場所で下記を実行します。

let viewController = AnnotationViewController()
viewController.alpha = 0.5
present(viewController, animated: true, completion: nil)

基本的な処理は以上です。
なお、Storyboard は変更する必要はありません。

また、もしボタン等を強調する際にテキストを表示しない場合は、AnnotationViewController.swift の 6行目、15~19行目、23行目、42~48行目の処理は不要なので、コメントアウトするか削除してください。

またボタンを強調する際には、円形もしくは四角形を使い分けることができます。

// 円形の強調を使用する場合
Spotlight.Oval(center: [円の中心座標], diameter: [直径の値]))
// 四角形の強調を使用する場合
Spotlight.RoundedRect(center: [中心座標], size: [四角形のサイズ], cornerRadius: [角丸のサイズ])

具体的な使用例は、AnnotationViewController.swift の 28行目、30行目、32行目をご参考にしていただければと思います。

 

以上、iOS アプリでチュートリアルを簡単に実装するためのライブラリ「Gecco」のご紹介でした。
サンプルコードは Storyboard を使用していたので、若干手こずりましたが、コツさえつかんでしまえばシンプルでとても使いやすかったです。
ご参考になれば幸いです。

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

【Android】画像ライブラリ「Glide」で画像を円形に切り抜く方法

GitHub や公式ページが私には分かりにくかったので備忘録としてまとめ。
Android の画像ライブラリ「Glide」を使って表示した画像を円形に切り抜く方法です。

GitHub のページはこちら。

GitHub – bumptech/glide: An image loading and caching library for Android focused on smooth scrolling
https://github.com/bumptech/glide

 

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

android – How to round an image with Glide library? – Stack Overflow
https://stackoverflow.com/questions/25278821/how-to-round-an-image-with-glide-library

サンプルコードは下記のとおりです。

Glide.with(context)
        .load([表示したい画像パス])
        .apply(RequestOptions.circleCropTransform())
        .into(imageView);

ポイントは 3行目の .apply(RequestOptions.circleCropTransform()) です。
こちらを追加することで、指定した画像を円形に切り抜くことができます。

なお、こちらは V4 の書き方なので、V3 の場合はまた違う指定をする必要がありますのでご注意ください。
上のサイトに V3 の場合の指定の方法も載っていますので、ご参考にしていただければと思います。

 

以上、Android の画像ライブラリ「Glide」を使って画像を円形に切り抜いて表示する方法でした。
ご参考になれば幸いです。

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

【Android】ActionBarのタイトルとボタンの色を白色に変更する

前回に引き続き、今回も Android の ActionBar についての記事です。
今回は、ActionBar の戻るボタンやタイトルの色を白色に変更する方法です。
ActionBar を濃い色で指定しているので、戻るボタンの色を白に変えたかったのですが、どこを直すのかがわかりにくかったのでまとめました。

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

android – Changing ActionBar Text and Button color when using Theme.AppCompat.Light – Stack Overflow
https://stackoverflow.com/questions/30720873/changing-actionbar-text-and-button-color-when-using-theme-appcompat-light

 

修正するのは、プロジェクトの res > values ディレクトリ内にある styles.xml ファイルです。
このファイル内にある AppTheme という名前のタグの parentTheme.AppCompat.Light.DarkActionBar に変更します。
具体的には下記のとおりです。

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    ......
</style>

変更はこれだけで、実機で確認したところ、きちんと白色に変更されていました。

他にも、タグ内に下記を追加するという方法もあるようでしたが、私の環境では上手くいきませんでした。

<item name="android:textColorPrimary">#fff</item>

そのため、他に影響が出ないようでしたら、parent を変更する方法をおすすめします。

 

以上、Android の ActionBar のボタン・タイトルの色を白色に変更する方法でした。
ご参考になれば幸いです。

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

DNS over HTTPS、近いうちにWindowsに実装される!?

先日、MicrosoftがDoHをWindowsに搭載することを発表しました。

Firefox/Google Chromeに続き、Windowsでも“DNS over HTTPS”をサポートへ – 窓の杜

DoH(DNS over HTTPS)は、DNSへのIPアドレスの問い合わせリクエストをHTTPSプロトコルを経由(カプセル化)することでDNS通信を暗号化する方法です。

DNSプロトコルそのものを暗号化するのではなく、既存のHTTPSの仕組みを使うため扱いやすいうえ、HTTPSポートをブロックしている環境はかなり限られてくるので、ファイアーウォールが置かれている環境でも設定の変更なく通信が通りやすいのが特徴です。

現時点ではまだDoHを正式に実装しているのはFirefox/Chromeの2ブラウザのみで、OSレベルでの対応は現状Androidのみですが、先日、MicrosoftがWindows OSの標準機能としてDoH対応を行う予定であることを明かした、というのが今回のニュースです。

ブラウザレベルでの対応では、あくまでDoH対応ブラウザを使用した通信でしかDoHが利用されませんが、OSレベルで対応されれば、そのマシンで行われる(OS上で動作する全アプリの)全通信のDNSリクエストをDoH経由で行わせることが可能になります。

DoHはユーザーのDNS要求を意図しない第三者に見せないようにすることでユーザーのプライバシーを保つ仕組みなので、OS全体で適用されるようになればより信頼性も向上することになります。

インターネットの自由性と安全性の担保の一つとして、DoHは重要になってくると個人的には考えているので、Windowsでの標準サポートはありがたい話だと思います。

今後。他のOSも追従してくるのか、今後の動きにも注目したいですね。

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

【Android】setTitle()で指定したActionBarのTitleが表示されない時の対処法

凄く初歩的ですが、今後も同じミスをやらかしそうな予感がしたので、未来の自分のためにまとめ。
タイトル通り、.setTitle() を使って ActionBar の Title を指定したのに表示されなかった時の対処法です。

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

Android getActionBar().setTitle does not work – Stack Overflow
https://stackoverflow.com/questions/26045431/android-getactionbar-settitle-does-not-work

ちなみに5年前の投稿でしたので、結構古いです。
が、私の環境ではこちらの方法で解決可能でした。

 

対処法ですが、getSupportActionBar().setDisplayShowTitleEnabled(true); を追加するだけでした。
具体的には下記のとおりです。

getSupportActionBar().setDisplayShowTitleEnabled(true);  // この行を追加
getSupportActionBar().setTitle("[タイトル]");

実際に実機(Android 7.0 と 8.0)で試したところ、問題なくタイトルが表示されていました!
念のため、他の端末でも確認する予定ですが、多分問題はないはずです。

 

以上、Android の ActionBar のタイトルが表示されない時の対処法でした。
ご参考になれば幸いです。

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

Macで利用できるブートローダー”rEFInd”の見た目をカスタマイズする方法

以前紹介した記事でMacでデュアルブートを行っている場合に、起動時にOS選択メニューを表示させる方法をご紹介しました。

ここで使用したrEFIndというブートローダですが、実は見た目を変更することができるようになっています。

デフォルトのデザイン

今回は、その方法をご紹介したいと思います。

※今回の操作には最悪macOSを含む全OSが起動しなくなる、リスクのある操作が含まれます。取り扱いには十分注意してください。また、万が一起動しなくなっても責任は負えませんのでご了承ください。(起動時にOSを読み込むプログラムが入っている領域を触るためです。誤って必要なファイルを変更したり、削除したりしないように注意してください。)

まず、ネット上に公開されているテーマから、自分が使用したいテーマを見つけます。

The rEFInd Boot Manager: Theming rEFInd

参考元の記事によると、このあたりにまとめられているようです。

好きなテーマを見つけたら、ダウンロードして解凍しておきます。

次にrEFIndがインストールされているEFIパーティションをマウントします。

ターミナルを開き、次の2つのコマンドを入力します。

sudo mkdir /Volumes/efi #EFIパーティションのマウント先に使用するディレクトリを作成
sudo mount -t msdos /dev/disk0s1 /Volumes/efi #efiパーティションをマウント

マウントに成功したら、次のコマンドでrefindのディレクトリに移動します。

cd /Volumes/efi/EFI/refind

移動したら、次のコマンドを実行してFinderを開きます。

open .

Finderが/Volumes/efi/EFI/refind内の内容を表示した状態で起動しますので、その中に先程入手したテーマをディレクトリごとコピーします。

/Volumes/efi/EFI/refind直下にテーマをコピーしてもよいですが、僕はさらにthemesというディレクトリを作り、その中にテーマをコピーしました。

あとは、 /Volumes/efi/EFI/refind/refind.confの末尾に、次の行を追加します。

# Custom theme
Include テーマが入っているディレクトリ/theme.conf

“テーマが入っているディレクトリ”の部分は

/Volumes/efi/EFI/refind 

から見たtheme.confへの相対パスを記述します。

プラグインによってはこれで使用できる状態になるのですが、プラグインによってはthemesフォルダ内に置かれることを想定していないものもあるため、その場合はテーマが含まれるディレクトリを移動するか、themes.confを確認・書き換えする必要があります。

書き換えなければいけない項目としては下記のような項目です。

・icons_dir
・banner 
・selection_big
・selection_small

これらの項目のパスも、 /Volumes/efi/EFI/refind/refind.conf 同様に

 /Volumes/efi/EFI/refind/

から見た相対パスを記述する必要があります。

例えば、僕が今回ダウンロードした”refined-next”は、ディレクトリ直下に置くことを想定していたため、このテーマに含まれるtheme.confは下記のような内容になっていました。

hideui singleuser,hints,label
icons_dir next-theme/icons
banner next-theme/background.png
selection_big   next-theme/selection_big.png
selection_small next-theme/selection_small.png
showtools about,reboot,shutdown

上記のような設定の場合はthemesフォルダの中にいれる構成にするとパスが合わないため、パスが合うように設定を修正します。

hideui singleuser,hints,label
icons_dir themes/next-theme/icons
banner themes/next-theme/background.png
selection_big   themes/next-theme/selection_big.png
selection_small themes/next-theme/selection_small.png
showtools about,reboot,shutdown

これで無事テーマが適用されるようになります。

refined-next適用後のOS選択画面

なお、頭と末尾にある設定

hideui singleuser,hints,label

showtools about,reboot,shutdown

ですが、hideuiはOS選択画面で表示されるUIのパーツのうち、非表示にする要素を入れることで、説明文や詳細オプションなどを消すことができます。

またshowtools はOS一覧の下に並ぶシャットダウンボタン・リブートボタンなどのメニューのうち、何を表示するかを指定できます。

僕は上記の設定を下記のように変更したところ、次のようなUIになりました。

...省略...
#hideui singleuser,hints,label
...省略...
showtools apple_recovery,shell,about,reboot,shutdown
...省略...

ほかにも、画像の差し替えを行ったりなどすれば、オリジナルの起動画面を作ることも可能です。

rEFIndのデフォルトのUIに飽きてきたら、是非試してみてはいかがでしょうか。

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

【Android】「Only fullscreen opaque activities can request orientation」エラーでアプリがクラッシュする時の対処法

タイトル通り、今回は Android で発生したエラーの対処法についてです。
以前に開発したアプリの修正を行っていたところ、確か現在の Activity から別の ActivityIntent を使って遷移した際に「java.lang.IllegalStateException: Only fullscreen opaque activities can request orientation」というエラーと共にアプリが強制終了しました。

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

java.lang.IllegalStateException: Only fullscreen opaque activities can request orientation – Qiita
https://qiita.com/oxsoft/items/042aaa6e9c7ae828e967

全く同じ状況だったので、大変参考になりました…!

 

参考サイトによると、クラッシュ原因は下記の 4つを満たすと発生するそうなので、どれか一つでも対処すればOKです。

  1. Android 8.0 の端末
  2. targetSdkVersion が 27 以上
  3. 背景を透過にしている
  4. 画面の向きを固定している

私は 4番目の「画面の向きを固定している」を変更することで対応しました。
…というか、これを変更する以外の選択肢がないのでは…?

画面の向きを固定しない方法については、下記のサイトを参考にさせていただきました。

Y.A.M の 雑記帳: Android 画面の向きを設定
http://y-anz-m.blogspot.com/2010/09/android.html

設定方法は AndroidManifest.xml 内にある、画面向きを固定しないアクティビティの android:screenOrientationbehind に設定するだけです。
サンプルコードは下記のとおりです。

<activity
    android:name=".[アクティビティ名]"
    android:label="@string/app_name"
    android:screenOrientation="behind" />

対処方法としては以上です。
再度アプリをビルド・実行したところ、クラッシュすることなく問題なく動作しました!

 

以上、「java.lang.IllegalStateException: Only fullscreen opaque activities can request orientation」エラーでアプリがクラッシュする時の対処法でした。
ご参考になれば幸いです。

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

【Windows】「You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.」警告の対処法

昨日に引き続き、本日も webpack で発生したエラー・警告の対処法についてです。
昨日は「Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.」というエラーの対処法でしたが、今回の警告はこちらのエラーを解消した後に発生したものです。

警告なので、別に修正が必須ではないのですが、気になるので対応しました。
警告文は「You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.」というものです。

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

Webpack2のパフォーマンス警告を制御する – Qiita
https://qiita.com/terrierscript/items/f840b5ccff0c0be7420a

ビルドした際にファイルサイズがデフォルト設定よりも大きいです!という警告のようです。

 

対応策としては、下記の方法があります。

  1. 警告そのものを表示させないように設定する
  2. ファイルサイズ警告の閾値を変更する

私は 2の方を採用しました。
webpack.config.js に 下記を追加します。

module.exports = {
  ...
  performance: {
    maxEntrypointSize: [ファイルサイズの許容値],
    maxAssetSize: [ファイルサイズの許容値]
  }
}

どちらの値もデフォルト値は 250,000(=250kb)です。
警告になったファイルサイズによって適宜変更してください。
なお、カンマは不要ですのでお気を付けください。
あとは、npm run build を実行すればOKです。
閾値を超えなければ、警告は発生しません。

 

以上、npm run build を実行した際の「You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.」警告の対処方法でした。
ご参考になれば幸いです。

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

【Windows】「Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.」エラーの対処法

Windows 環境で、Cordova アプリをビルドしようと npm run build を実行しようとしたところ、「Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.」というエラーに遭遇したのでその解決方法についてです。
調べたところ、こちらのエラーは webpack で発生しているとのこと。

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

webpack4に更新した時にこけた所まとめ – Qiita
https://qiita.com/shota_abe/items/fbd6d988188442a4d11c

上記のサイトによると、今回のエラーは webpack を 4 に更新したタイミングで発生したとのことでした。

 

解決方法ですが、webpack.config.jslodersrules に変更するだけでした!

module.exports = {
  ...

  module: {
    rules: [  // ここを loders から rules に変更
      ...
    ]
  },
  ...
}

あとは、念のため npm install を再度実行後、npm run build を実行したところ、エラーが解消されました!

ただし、今度は「The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environment.」というエラーが発生したので、今度はこの対策も必要です…。
こちらのエラーについては、次回に解決方法をご紹介させていただければと思います。

 

以上、「Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.」エラーが発生した時の対処法でした。
ご参考になれば幸いです。

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

【Swift】UITextField入力後に画面をタップしてキーボードを非表示にする

Swift で実装しとくと便利かな?な機能その2。
今回は、文字入力時に表示されたソフトウェアキーボードを、TextField や キーボード以外のばしょをタップして消す方法です。
確か Android は特に指定しなくても入力欄外をタップすればキーボードは非表示になったと思うのですが…iOS はわざわざ実装しないと消えないんですね…。

今回参考にさせていただいたサイトはこちらから。

[Swift] resignFirstResponder 以外でキーボードを隠す – Qiita
https://qiita.com/takecian/items/ebcdd3cc37c90a054020

 

実装方法は下記の通りです。
画面がタップされた時に呼ばれる touchesBegan をオーバーライドして、その中にキーボードを閉じる処理を追加します

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    // キーボードを閉じる
    view.endEditing(true)
}

他にも、UITextFieldresignFirstResponder メソッドを使う方法もありますが、こちらの方法だと、TextField が複数あった場合、全ての TextField でメソッドを実行しなければいけないので面倒です。
かく言う私も、最初は resignFirstResponder を使っていたのですが、endEditing を知り、速攻でこちらに書き換えました。
アプリの挙動にも全く問題ないので、よほどのことがない限りは、view.endEditing(true) を使った方が簡単だと思います!

 

以上、UITextField 入力後に、入力欄外やキーボード以外の画面をタップしてソフトウェアキーボードを非表示にする方法でした。
ご参考になれば幸いです。

なお、Swift で実装しとくと便利かな?な機能その1 はこちらです。

【Swift】UITextField入力後にキーボードのリターンキーで次のUITextFieldに移動する
https://cpoint-lab.co.jp/article/201911/12629/

必須ではないですが、こちらもあると便利かもしれません。

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