投稿

HTTP Webページを読み込めるようにする

イメージ
本記事は「デジタルサイネージアプリ「Sign!」(iOS版)とその実装機能の紹介」の子記事です。

目的 WKWebViewで「HTTP」でアクセスするWebページを読み込むための設定を紹介します。

開発・実行環境開発環境:macOS、Xcode(9~10)、Swift(4~5)実行環境:iOS 11以上
設定 Xcodeのナビゲータエリア上部のフォルダアイコン(一番左)をクリックし、表示されるツリーの中のプロジェクトルート(一番上)をクリックします。さらに、エディタエリア上部の「Info」をクリックし、「Custom iOS Target Properties」のうちのいずれかの項目にマウスカーソルを合わせると表示される「+」マークをクリックします。

開いたプルダウンから「App Transport Security Settings」を選びます。

さらに、追加された「App Transport Security Settings」にマウスカーソルを合わせると表示される「+」マークをクリックします。

開いたプルダウンから「Allow Arbitrary Loads in Web Content」を選びます。

さらに、その値(Value)を「Yes」にします。

以上です。

Webページを表示する

イメージ
本記事は「デジタルサイネージアプリ「Sign!」(iOS版)とその実装機能の紹介」の子記事です。

目的 StoryboardでWKWebViewを配置し、Webページを読み込んで表示するための操作やコードを紹介します。

開発・実行環境開発環境:macOS、Xcode(9~10)、Swift(4~5)実行環境:iOS 11以上
StoryboardでWKWebViewを配置する まず、Xcodeのナビゲータエリア上部のフォルダアイコン(一番左)をクリックし、表示されるツリーの中の「Main.storyboard」(Storyboardの名前は、みなさんのプロジェクトごとに異なると思います)をクリックし、Storyboard画面を開きます。
ここでは、StoryboardにViewControllerが1つあるものとして以下を記述します。

次に、画面右上にあるライブラリアイコン(寛永通宝のような丸の中に四角のアイコン)をクリックすると、UIオブジェクトを選択できるダイアログが表示されます。

ダイアログ上部の検索窓で、「web」と入力すると、「WebKit View」が現れます。

「WebKit View」をStoryboardのViewControllerへドラッグ&ドロップすると、WKWebViewの配置が完了します
※なお、ここでは説明しませんが、以降の説明のため、WKWebViewが画面いっぱいに表示されるようにレイアウトしておきます。

次に、配置したWKWebViewをコードへ紐づけます。
画面右上にある「Show the Assistant editor」アイコン(丸を2つ重ねたアイコン)をクリックすると、Storyboard画面の隣に、ViewControllerのコードが表示されます。この状態で、「control」キーを押しながら、StoryboardのWKWebViewをドラッグし、ViewControllerのコードの方へドロップすると、ダイアログが開きますのでNameにしかるべき名前(ここではwebviewとしています)を入力し、「Connect」ボタンをクリックします。

すると、「@IBOutlet ~」なる行が追加されますが、このままでは「Use of undeclared type 'WKWebView'」なるエラー…

アプリが起動している間、画面を表示し続ける(端末をスリープさせない)

本記事は「デジタルサイネージアプリ「Sign!」(iOS版)とその実装機能の紹介」の子記事です。

目的 アプリが起動している間、端末をスリープさせず、画面を表示しつづけるためのコードを紹介します。

開発・実行環境開発環境:macOS、Xcode(9~10)、Swift(4~5)実行環境:iOS 11以上
コード 画面を表示しつづけたい(その画面が表示されている間は、スリープさせたくない)ViewControllerのviewWillAppear()に、以下を記述します。
override func viewWillAppear(_ animated: Bool) { super.viewWillAppear(animated) UIApplication.shared.isIdleTimerDisabled = true  // この行 }
なお、この画面から別の画面に遷移したときに、遷移先の画面ではスリープがされるように(上記の設定が維持されないように)するには、同じViewControllerのviewWillDisappear()に、以下を記述します。
override func viewWillDisappear(_ animated: Bool) { super.viewWillDisappear(animated) UIApplication.shared.isIdleTimerDisabled = false  // この行 }
以上です。

アプリ画面をフルスクリーン表示にする(ステータスバーを表示しない)

イメージ
本記事は「デジタルサイネージアプリ「Sign!」(iOS版)とその実装機能の紹介」の子記事です。

目的 アプリ全体として、画面上部にステータスバーを表示せず、フルスクリーンアプリとして実行するための設定を紹介します。
開発・実行環境
開発環境:macOS、Xcode(9~10)、Swift(4~5)実行環境:iOS 11以上
設定
Xcodeのナビゲータエリア上部のフォルダアイコン(一番左)をクリックし、表示されるツリーの中のプロジェクトルート(一番上)をクリックします。さらに、エディタエリア上部の「General」をクリックし、「Deployment Info」の「Hide status bar」にチェックを入れます。

さらに、エディタエリア上部の「Info」をクリックし、「Custom iOS Target Properties」のいずれかの項目にマウスカーソルを乗せると表示される「+」マークをクリックします。

開いたプルダウンから「View controller-based status bar appearance」を選び、その値(Value)を「NO」にします。

以上です。

ナンプレ解答アプリ「ナンプレ自動解答」(Android版)とその実装機能の紹介

イメージ
「ナンプレ自動解答」(Android版)は、ナンプレ(数独)の問題を写真に撮ると、その問題を自動的に解き、答えを示すアプリです。
そのため、例えばナンプレの懸賞本の大量の問題を解く時間を短縮したり、解答が載っていない問題の答えを確認したり、あるいは自作した問題が正しく答えを導き出せるものであるかどうかを確認したりするのに使えます。

本記事では、ナンプレ自動解答で実装している各機能をTipsとして解説します。
※アプリのダウンロードは、こちら
※iOS版「ナンプレ自動解答」の解説記事は、こちら

開発・実行環境 ナンプレ自動解答は、以下の環境で開発・実行しています。 開発環境 : macOS、Android Studio(3.3~3.4)、Java実行環境 : Android 5.0以上
アプリの構成の概要 ナンプレ自動解答は、2つの画面を持ちます。1つは、ナンプレの問題(9x9のマス目や各マスの数字)を表示し、数字を編集するため操作を受け付ける独自ビューと、機能を呼び出す複数のボタンと、広告(AdMob)が表示されます。もう1つは、ナンプレの問題を写真に撮るためのCamera2 APIを使ったカメラ画面です。
本アプリでは、カメラで撮影した写真から、ナンプレの問題(9x9のマス目)を切り出し、さらにその各マスの数字を認識し、解答処理を行う対象データとして取り込みますが、マス目の切り出しにはOpenCVを使い、数字の認識にはOCRライブラリ(tess-two)を使っています。

実装している機能 本アプリを実現するために、以下の機能を実装しており、それぞれTipsとして解説していきます。 ※リンクをクリックするとTips解説記事に飛びます。リンクされていない項目は、記事を鋭意作成中です。 AdMobを組み込む(AdMob SDK)広告を表示する(AdMob SDK)OpenCVライブラリを組み込む写真から、四角形領域を切り出す(OpenCV)OCRライブラリを組み込む(tess-two)OCR機能で文字を認識する(tess-two)アセットに格納しているデータをファイルに書き出す独自ビューを生成する(FrameLayout、View)独自ビューに描画する(View)画面レイアウト決定後に、ビューを再描画する(FrameLayout)独自カメラ機能を実装する(Camer…

ナンプレ解答アプリ「ナンプレ自動解答」(iOS版)とその実装機能の紹介

イメージ
「ナンプレ自動解答」(iOS版)は、ナンプレ(数独)の問題を写真に撮ると、その問題を自動的に解き、答えを示すアプリです。
そのため、例えばナンプレの懸賞本の大量の問題を解く時間を短縮したり、解答が載っていない問題の答えを確認したり、あるいは自作した問題が正しく答えを導き出せるものであるかどうかを確認したりするのに使えます。

本記事では、ナンプレ自動解答で実装している各機能をTipsとして解説します。
※アプリのダウンロードは、こちら
※Android版「ナンプレ自動解答」の解説記事は、こちら

開発・実行環境 ナンプレ自動解答は、以下の環境で開発・実行しています。 開発環境 : macOS、Xcode(9~10)、Swift(4~5)実行環境 : iOS 11以上
アプリの構成の概要 ナンプレ自動解答は、2つの画面を持ちます。1つは、ナンプレの問題(9x9のマス目や各マスの数字)を表示し、数字を編集するため操作を受け付ける独自ビューと、機能を呼び出す複数のボタンと、広告(AdMob)が表示されます。もう1つは、ナンプレの問題を写真に撮るためのAVFoundationを使ったカメラ画面です。
本アプリでは、カメラで撮影した写真から、ナンプレの問題(9x9のマス目)を切り出し、さらにその各マスの数字を認識し、解答処理を行う対象データとして取り込みますが、マス目の切り出しにはOpenCVを使い、数字の認識にはOCRライブラリ(Tesseract OCR iOS)を使っています。

実装している機能 本アプリを実現するために、以下の機能を実装しており、それぞれTipsとして解説していきます。 ※リンクをクリックするとTips解説記事に飛びます。リンクされていない項目は、記事を鋭意作成中です。 OpenCVライブラリを組み込む写真から、四角形領域を切り出す(OpenCV)OCRライブラリを組み込む(Tesseract OCR iOS)OCR機能で文字を認識する(Tesseract OCR iOS)独自ビューに描画する(UIView)独自ダイアログを実装する(UIView)画面レイアウト決定後に、ビューを再描画する(UIView)画像を拡縮する(UIImage)StoryBoardで定義した画面(ViewController)をコードから呼び出して開く独自カメラ機能を実装する(…

デジタルサイネージアプリ「Sign!」(iOS版)とその実装機能の紹介

イメージ
デジタルサイネージアプリ「Sign!」(iOS版)は、iPadやiPhoneをシンプルなデジタルサイネージとして使うためのアプリです。
WebページやGoogleスライドで作ったスライドショーや、固定のテキストメッセージやTwitterへの投稿をティッカー(流れるテキスト)としてフルスクリーンかつノースリープで表示し続けるもので、複数のページをめくって切り替えられるものです。
そのため、例えば商品POP、レストランのメニュー、展示ブースの看板、電光掲示板などに使えます。
※アプリのダウンロードは、こちら

本記事では、Sign!で実装している各機能をTipsとして解説します。

開発・実行環境 Sign!は、以下の環境で開発・実行しています。 開発環境 : macOS、Xcode(9~10)、Swift(4~5)実行環境 : iOS 11以上
アプリの構成の概要 Sign!は、Webページやティッカーテキストを表示するためのWebビュー(WKWebView)が1画面に1つ表示されており、複数の画面をページめくり(UIPageViewController)で切り替えられるようになっています。 Webビューには、HTTPS(やHTTP)でアクセスできるWebページやWebスライドショー(Googleスライドなど)の他、文字列をティッカー表示するためにアプリ内部で保持する固定的なHTMLを表示します。 ティッカー表示する文字列としては、ユーザが入力した固定のテキストメッセージの他、Twitterのツイートも表示できます。ツイートは、特定のユーザ名やハッシュタグのものを定期的に検索し、最も新しいもの1つが表示されます。 また、アプリの画面下部には、広告(AdMob)が、画面サイズや向きに応じて異なるサイズで表示されます。
実装している機能 本アプリを実現するために、以下の機能を実装しており、それぞれTipsとして解説していきます。 ※リンクをクリックするとTips解説記事に飛びます。リンクされていない項目は、記事を鋭意作成中です。 アプリ画面をフルスクリーン表示にする(ステータスバーを表示しない)アプリが起動している間、画面を表示し続ける(端末をスリープさせない)Webページを表示する(WKWebView)文字列として定義したHTMLをWebページとして表示する(WKWebV…